@gemx-dev/heatmap-react 3.5.88 → 3.5.90

package/dist/esm/index.js

@@ -1195,6 +1195,7 @@ const useHeatmapDataContext = createViewContextHook({
         scrollmap: store.scrollmap.get(viewId),
         attentionMap: store.attentionMap.get(viewId),
         dataInfo: store.dataInfo.get(viewId),
+        isEmptyData: !store.data.get(viewId) || store.data.get(viewId)?.length === 0,
     }),
     getActions: (store, viewId) => ({
         setData: (newData) => store.setData(newData, viewId),
@@ -1482,32 +1483,57 @@ const useRegisterHeatmap = ({ clickmap, scrollmap, clickAreas, attentionMap }) =
 };
 
 /**
- * Create an observable value with subscribe/unsubscribe pattern
+ * Draw a backdrop overlay on canvas with a cutout for the active element
+ * This creates a "spotlight" effect highlighting the active element
  */
-function createObservable(initialValue) {
-    const subscribers = new Set();
-    const observable = {
-        value: initialValue,
-        observe: (callback) => {
-            subscribers.add(callback);
-            // Immediately call with current value
-            if (observable.value !== undefined) {
-                callback(observable.value);
-            }
-        },
-        unobserve: (callback) => {
-            subscribers.delete(callback);
-        },
-        update: (newValue) => {
-            observable.value = newValue;
-            // Notify all subscribers
-            subscribers.forEach((callback) => {
-                callback(newValue);
-            });
-        },
-    };
-    return observable;
-}
+const drawBackdropWithCutout = (options) => {
+    const { canvas, activeRect, backdropColor = '#000000', backdropOpacity = 0.5, cutoutExpansion = 0 } = options;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    const { width: canvasWidth, height: canvasHeight } = canvas;
+    // Apply expansion to the cutout rect
+    const top = Math.max(0, activeRect.top - cutoutExpansion);
+    const left = Math.max(0, activeRect.left - cutoutExpansion);
+    const width = Math.min(canvasWidth - left, activeRect.width + cutoutExpansion * 2);
+    const height = Math.min(canvasHeight - top, activeRect.height + cutoutExpansion * 2);
+    // Clear previous drawing
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    // Set backdrop style
+    ctx.fillStyle = backdropColor;
+    ctx.globalAlpha = backdropOpacity;
+    // Draw backdrop in 4 rectangles around the active element
+    // This creates a cutout effect
+    // Top rectangle (above active element)
+    if (top > 0) {
+        ctx.fillRect(0, 0, canvasWidth, top);
+    }
+    // Bottom rectangle (below active element)
+    const bottomY = top + height;
+    if (bottomY < canvasHeight) {
+        ctx.fillRect(0, bottomY, canvasWidth, canvasHeight - bottomY);
+    }
+    // Left rectangle (left of active element)
+    if (left > 0) {
+        ctx.fillRect(0, top, left, height);
+    }
+    // Right rectangle (right of active element)
+    const rightX = left + width;
+    if (rightX < canvasWidth) {
+        ctx.fillRect(rightX, top, canvasWidth - rightX, height);
+    }
+    // Reset alpha
+    ctx.globalAlpha = 1.0;
+};
+/**
+ * Clear the entire canvas
+ */
+const clearCanvas = (canvas) => {
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+};
 
 function isElementInViewport(elementRect, visualRef, scale) {
     if (!elementRect)
@@ -1545,6 +1571,12 @@ function isElementRectInViewport(elementRect, visualRect, scale) {
     return elementTop > viewportTop && elementBottom < viewportBottom;
 }
 
+function isMobileDevice(userAgent) {
+    if (!userAgent)
+        return false;
+    return /android|webos|iphone|ipad|ipod|blackberry|windows phone|opera mini|iemobile|mobile|silk|fennec|bada|tizen|symbian|nokia|palmsource|meego|sailfish|kindle|playbook|bb10|rim/i.test(userAgent);
+}
+
 const CLARITY_HEATMAP_CANVAS_ID = 'clarity-heatmap-canvas';
 const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
 function isIgnoredCanvas(element) {
@@ -1601,324 +1633,36 @@ function getElementHash(element) {
     return element.getAttribute('data-clarity-hashbeta') || element.getAttribute('data-clarity-hashalpha');
 }
 
-const AREA_HOVER_BOX_SHADOW = '0 0 0 1px #0078D4, 0 0 0 1px #0078D4 inset, 0 0 0 2px white inset';
-const AREA_HOVER_ELEMENT_ID = 'clarity-edit-hover';
-const AREA_MAP_DIV_ATTRIBUTE = 'data-clarity-area-map-div';
-const HEATMAP_AREA_CONTAINER_CLASS = 'heatmap-area-container';
-const HEATMAP_AREA_CONTAINER_SELECTOR = `.${HEATMAP_AREA_CONTAINER_CLASS}`;
-const AREA_CONTAINER_STYLES = `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 999999;
-`;
-const AREA_INNER_CONTAINER_STYLES = `
-  position: relative;
-  width: 100%;
-  height: 100%;
-`;
-const AREA_COLOR_GRADIENT = [
-    [0, 0, 255], // Blue
-    [0, 255, 255], // Cyan
-    [0, 255, 0], // Green
-    [255, 255, 0], // Yellow
-    [255, 0, 0], // Red
-];
-const AREA_RENDERER_SELECTORS = {
-    containerAttribute: AREA_MAP_DIV_ATTRIBUTE,
-    containerSelector: `[${AREA_MAP_DIV_ATTRIBUTE}]`,
-    innerContainerClass: HEATMAP_AREA_CONTAINER_CLASS,
-    innerContainerSelector: HEATMAP_AREA_CONTAINER_SELECTOR,
-};
-
-const CALLOUT_PADDING = 0;
-const CALLOUT_ARROW_SIZE = 8;
-const CALLOUT_OFFSET = { x: -8, y: 0 };
-const CALLOUT_ALIGNMENT = 'left';
-const CLICKED_ELEMENT_ID_BASE = 'gx-hm-clicked-element';
-const SECONDARY_CLICKED_ELEMENT_ID_BASE = 'gx-hm-secondary-clicked-element';
-const HOVERED_ELEMENT_ID_BASE = 'gx-hm-hovered-element';
-const SECONDARY_HOVERED_ELEMENT_ID_BASE = 'gx-hm-secondary-hovered-element';
-const DEFAULT_POSITION_MODE = 'absolute';
-
-/**
- * Get color from click distribution percentage (0-100)
- */
-function getColorFromClickDist(clickDist) {
-    // Ensure clickDist is in range [0, 100]
-    const normalizedDist = Math.max(0, Math.min(100, clickDist));
-    // Calculate gradient index
-    const maxIndex = AREA_COLOR_GRADIENT.length - 1;
-    const index = Math.floor((normalizedDist / 100) * maxIndex);
-    const clampedIndex = Math.min(index, maxIndex);
-    const [r, g, b] = AREA_COLOR_GRADIENT[clampedIndex];
-    // Return rgba with 60% opacity
-    return `rgba(${r}, ${g}, ${b}, 0.6)`;
-}
-/**
- * Get hover color (slightly lighter) from click distribution
- */
-function getHoverColorFromClickDist(clickDist) {
-    const normalizedDist = Math.max(0, Math.min(100, clickDist));
-    const maxIndex = AREA_COLOR_GRADIENT.length - 1;
-    const index = Math.floor((normalizedDist / 100) * maxIndex);
-    const clampedIndex = Math.min(index, maxIndex);
-    const [r, g, b] = AREA_COLOR_GRADIENT[clampedIndex];
-    // Return rgba with 80% opacity for hover
-    return `rgba(${r}, ${g}, ${b}, 0.8)`;
-}
-/**
- * Calculate click distribution percentage from total clicks
- */
-function calculateClickDistribution(elementClicks, totalClicks) {
-    if (totalClicks === 0)
-        return 0;
-    return (elementClicks / totalClicks) * 100;
-}
-
-function getElementRect(element, _shadowRoot) {
-    const rect = element.getBoundingClientRect();
-    const width = rect.width;
-    const height = rect.height;
-    const doc = element.ownerDocument || document;
-    const scrollTop = doc.documentElement?.scrollTop || doc.body?.scrollTop || 0;
-    const scrollLeft = doc.documentElement?.scrollLeft || doc.body?.scrollLeft || 0;
-    const top = rect.top + scrollTop;
-    const left = rect.left + scrollLeft;
-    const absoluteLeft = left;
-    const absoluteTop = top;
-    const absoluteRight = absoluteLeft + width;
-    const absoluteBottom = absoluteTop + height;
-    return {
-        width,
-        height,
-        top,
-        left,
-        absoluteLeft,
-        absoluteTop,
-        absoluteRight,
-        absoluteBottom,
-        outOfBounds: false,
+class Logger {
+    config = {
+        enabled: false,
+        prefix: '',
+        timestamp: false,
     };
-}
-function isElementFixed(element) {
-    if (getComputedStyle(element).position === 'fixed') {
-        return true;
-    }
-    if (element.nodeName === 'HTML') {
-        return false;
+    /**
+     * Cấu hình logger
+     * @param config - Cấu hình logger
+     */
+    configure(config) {
+        this.config = { ...this.config, ...config };
     }
-    const parent = element.parentElement;
-    return parent ? isElementFixed(parent) : false;
-}
-function doAreasOverlap(area1, area2) {
-    const r1 = area1.rect.value;
-    const r2 = area2.rect.value;
-    if (!r1 || !r2)
-        return false;
-    return ((r1.absoluteBottom > r2.absoluteTop &&
-        r1.absoluteTop < r2.absoluteBottom &&
-        r1.absoluteRight > r2.absoluteLeft &&
-        r1.absoluteLeft < r2.absoluteRight) ||
-        (r2.absoluteBottom > r1.absoluteTop &&
-            r2.absoluteTop < r1.absoluteBottom &&
-            r2.absoluteRight > r1.absoluteLeft &&
-            r2.absoluteLeft < r1.absoluteRight));
-}
-function isAreaContainedIn(area1, area2) {
-    const r1 = area1.rect.value;
-    const r2 = area2.rect.value;
-    if (!r1 || !r2)
-        return false;
-    return (r1.absoluteTop >= r2.absoluteTop &&
-        r1.absoluteBottom <= r2.absoluteBottom &&
-        r1.absoluteLeft >= r2.absoluteLeft &&
-        r1.absoluteRight <= r2.absoluteRight);
-}
-function isElementAncestorOf(ancestor, descendant, doc) {
-    return ancestor.contains(descendant);
-}
-function isElementSelectable(element, index, elements) {
-    if (isIgnoredCanvas(element)) {
-        return false;
+    /**
+     * Lấy cấu hình hiện tại
+     */
+    getConfig() {
+        return { ...this.config };
     }
-    if (element.hasAttribute(AREA_MAP_DIV_ATTRIBUTE)) {
-        return false;
+    /**
+     * Bật logger
+     */
+    enable() {
+        this.config.enabled = true;
     }
-    if (index === 0 && elements.length > 1 && element.nodeName === 'BODY') {
-        return false;
-    }
-    return true;
-}
-function sortAreasByClickDist(areas) {
-    return [...areas].sort((a, b) => {
-        if (a.clickDist !== b.clickDist) {
-            return b.clickDist - a.clickDist;
-        }
-        return b.totalclicks - a.totalclicks;
-    });
-}
-function isRectTooSmallForLabel(rect) {
-    return rect.width < 67 || rect.height < 30;
-}
-
-function getElementSelector(element) {
-    if (element.id) {
-        return `#${element.id}`;
-    }
-    if (element.className) {
-        const classes = Array.from(element.classList).join('.');
-        if (classes) {
-            return `${element.tagName.toLowerCase()}.${classes}`;
-        }
-    }
-    return element.tagName.toLowerCase();
-}
-/**
- * Calculate total clicks for an element including all its child elements
- * @param element - The parent element
- * @param elementMapInfo - Map of hash to element click info
- * @returns Total clicks for element + all descendants
- */
-function calculateTotalClicksWithChildren(element, clickMapMetrics) {
-    let totalClicks = 0;
-    // Get clicks for the element itself
-    const elementHash = getElementHash(element);
-    if (elementHash) {
-        const elementInfo = clickMapMetrics[elementHash];
-        totalClicks += elementInfo?.totalClicked.value ?? 0;
-    }
-    const children = element.querySelectorAll('*');
-    children.forEach((child) => {
-        const childHash = getElementHash(child);
-        if (childHash) {
-            const childInfo = clickMapMetrics[childHash];
-            totalClicks += childInfo?.totalClicked.value ?? 0;
-        }
-    });
-    return totalClicks;
-}
-function buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData) {
-    if (!heatmapInfo.clickMapMetrics)
-        return;
-    const totalClicks = heatmapInfo.totalClicks || 0;
-    const elementInfo = heatmapInfo.clickMapMetrics[hash];
-    // Calculate total clicks including all child elements
-    const elementClicks = calculateTotalClicksWithChildren(element, heatmapInfo.clickMapMetrics);
-    const clickDist = calculateClickDistribution(elementClicks, totalClicks);
-    const rect = getElementRect(element);
-    const color = getColorFromClickDist(clickDist);
-    const hoverColor = getHoverColorFromClickDist(clickDist);
-    const areaNode = {
-        kind: persistedData?.kind || 'area',
-        id: persistedData?.id || `${hash}_${Date.now()}`,
-        hash,
-        selector: persistedData?.selector || elementInfo?.selector || getElementSelector(element),
-        // DOM references
-        element,
-        areaElement: null,
-        shadowElement: null,
-        shadowStyleElement: null,
-        // Graph structure
-        parentNode: null,
-        childNodes: new Set(),
-        // Position
-        rect: createObservable(rect),
-        isFixed: isElementFixed(element),
-        priority: false,
-        // Click tracking
-        totalclicks: elementClicks,
-        cumulativeClicks: elementClicks,
-        cumulativeMaxClicks: totalClicks,
-        clickDist,
-        hasClickInfo: true,
-        // Visual
-        color,
-        hoverColor,
-        // Lifecycle
-        changeObserver: null,
-    };
-    return areaNode;
-}
-function getTopElementsByClicks(clickMapMetrics, topN = 10) {
-    const elements = Object.entries(clickMapMetrics)
-        .map(([hash, info]) => ({
-        hash,
-        totalclicks: info.totalClicked.value ?? 0,
-        selector: info.selector || '',
-    }))
-        .sort((a, b) => b.totalclicks - a.totalclicks)
-        .slice(0, topN);
-    return elements;
-}
-
-/**
- * Build parent-child relationships between areas based on DOM hierarchy
- * @param areas - Array of area nodes to build relationships for
- */
-function buildAreaGraph(areas) {
-    // Clear existing relationships
-    areas.forEach((area) => {
-        area.parentNode = null;
-        area.childNodes.clear();
-    });
-    // Build relationships based on DOM containment
-    for (let i = 0; i < areas.length; i++) {
-        const area = areas[i];
-        for (let j = 0; j < areas.length; j++) {
-            if (i === j)
-                continue;
-            const otherArea = areas[j];
-            // Check if area's element is contained within otherArea's element
-            if (otherArea.element.contains(area.element)) {
-                // Find the closest parent (not just any ancestor)
-                if (!area.parentNode || area.parentNode.element.contains(otherArea.element)) {
-                    // Remove from old parent if exists
-                    if (area.parentNode) {
-                        area.parentNode.childNodes.delete(area);
-                    }
-                    // Set new parent
-                    area.parentNode = otherArea;
-                    otherArea.childNodes.add(area);
-                }
-            }
-        }
-    }
-}
-
-class Logger {
-    config = {
-        enabled: false,
-        prefix: '',
-        timestamp: false,
-    };
-    /**
-     * Cấu hình logger
-     * @param config - Cấu hình logger
-     */
-    configure(config) {
-        this.config = { ...this.config, ...config };
-    }
-    /**
-     * Lấy cấu hình hiện tại
-     */
-    getConfig() {
-        return { ...this.config };
-    }
-    /**
-     * Bật logger
-     */
-    enable() {
-        this.config.enabled = true;
-    }
-    /**
-     * Tắt logger
-     */
-    disable() {
-        this.config.enabled = false;
+    /**
+     * Tắt logger
+     */
+    disable() {
+        this.config.enabled = false;
     }
     /**
      * Format message với prefix và timestamp
@@ -2026,7 +1770,7 @@ class Logger {
     }
 }
 // Export singleton instance
-const logger$4 = new Logger();
+const logger$9 = new Logger();
 // Export factory function để tạo logger với config riêng
 function createLogger(config = {}) {
     const instance = new Logger();
@@ -2034,174 +1778,503 @@ function createLogger(config = {}) {
     return instance;
 }
 
-function findLastSizeOfDom(data) {
-    const listDocs = data
-        .filter((item) => item.doc?.find((doc) => doc.data.width && doc.data.height))
-        .flatMap((item) => item.doc?.flatMap((doc) => doc.data));
-    const lastDoc = listDocs?.[listDocs.length - 1];
-    const docSize = {
-        width: lastDoc?.width,
-        height: lastDoc?.height,
-    };
-    const listResizes = data.filter((item) => !!item.resize).flatMap((item) => item.resize);
-    const lastResizeEvent = listResizes?.[listResizes.length - 1];
-    const resize = {
-        width: lastResizeEvent?.data.width,
-        height: lastResizeEvent?.data.height,
-    };
-    return {
-        doc: docSize,
-        resize: resize,
-        size: {
-            width: resize.width || docSize.width,
-            height: resize.height || docSize.height,
+/**
+ * Create an observable value with subscribe/unsubscribe pattern
+ */
+function createObservable(initialValue) {
+    const subscribers = new Set();
+    const observable = {
+        value: initialValue,
+        observe: (callback) => {
+            subscribers.add(callback);
+            // Immediately call with current value
+            if (observable.value !== undefined) {
+                callback(observable.value);
+            }
+        },
+        unobserve: (callback) => {
+            subscribers.delete(callback);
+        },
+        update: (newValue) => {
+            observable.value = newValue;
+            // Notify all subscribers
+            subscribers.forEach((callback) => {
+                callback(newValue);
+            });
         },
     };
-}
-function decodeClarity(payload) {
-    try {
-        return decode(payload);
-    }
-    catch (_error) {
-        return null;
-    }
-}
-function decodeArrayClarity(items) {
-    return items.map((item) => decodeClarity(item)).filter((item) => item !== null);
+    return observable;
 }
 
-function findElementByHash(props) {
-    const { hash, selector, iframeDocument, vizRef } = props;
-    if (vizRef) {
-        const element = vizRef.get(hash);
-        return element;
-    }
-    // Fallback
-    if (!iframeDocument)
-        return null;
-    try {
-        const element = selector ? iframeDocument.querySelector(selector) : null;
-        if (element) {
-            return element;
-        }
-    }
-    catch (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;
+function sortEvents(a, b) {
+    return a.time - b.time;
 }
 
 /**
- * Hydrates persisted area data into full area node
- * Finds element in DOM and calculates all runtime values
- *
- * @param persistedData - Minimal data from database
- * @param iframeDocument - Document to find element in
- * @param heatmapInfo - Heatmap data for click calculations
- * @param vizRef - Map of hash to elements
- * @param shadowRoot - Optional shadow root for rect calculation
- * @returns Full area node or null if element not found
+ * Throttle a function using requestAnimationFrame
+ * Ensures the callback is called at most once per animation frame
  */
-function hydrateAreaNode(props) {
-    const { persistedData, iframeDocument, heatmapInfo, vizRef, shadowRoot } = props;
-    const { id, hash, selector } = persistedData;
-    const element = findElementByHash({ hash, selector, iframeDocument, vizRef });
-    if (!element) {
-        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);
-    if (!areaNode)
-        return null;
-    return areaNode;
-}
-function hydrateAreas(props) {
-    const { clickAreas, iframeDocument, heatmapInfo, vizRef, shadowRoot } = props;
-    const hydratedAreas = [];
-    for (const persistedData of clickAreas) {
-        const area = hydrateAreaNode({ persistedData, iframeDocument, heatmapInfo, vizRef, shadowRoot });
-        if (area) {
-            hydratedAreas.push(area);
-        }
-    }
-    logger$4.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
-    return hydratedAreas;
-}
+const throttleRAF = (callback) => {
+    let rafId = null;
+    let latestArgs = null;
+    const throttled = (...args) => {
+        // Store the latest arguments
+        latestArgs = args;
+        // If already scheduled, do nothing
+        if (rafId !== null)
+            return;
+        // Schedule the callback for the next animation frame
+        rafId = requestAnimationFrame(() => {
+            if (latestArgs !== null) {
+                callback(...latestArgs);
+                latestArgs = null;
+            }
+            rafId = null;
+        });
+    };
+    // Add cancel method to clear pending RAF
+    throttled.cancel = () => {
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+            latestArgs = null;
+        }
+    };
+    return throttled;
+};
+
+const AREA_HOVER_BOX_SHADOW = '0 0 0 1px #0078D4, 0 0 0 1px #0078D4 inset, 0 0 0 2px white inset';
+const AREA_HOVER_ELEMENT_ID = 'clarity-edit-hover';
+const AREA_MAP_DIV_ATTRIBUTE = 'data-clarity-area-map-div';
+const HEATMAP_AREA_CONTAINER_CLASS = 'heatmap-area-container';
+const HEATMAP_AREA_CONTAINER_SELECTOR = `.${HEATMAP_AREA_CONTAINER_CLASS}`;
+const AREA_CONTAINER_STYLES = `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 999999;
+`;
+const AREA_INNER_CONTAINER_STYLES = `
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+const AREA_COLOR_GRADIENT = [
+    [0, 0, 255], // Blue
+    [0, 255, 255], // Cyan
+    [0, 255, 0], // Green
+    [255, 255, 0], // Yellow
+    [255, 0, 0], // Red
+];
+const AREA_RENDERER_SELECTORS = {
+    containerAttribute: AREA_MAP_DIV_ATTRIBUTE,
+    containerSelector: `[${AREA_MAP_DIV_ATTRIBUTE}]`,
+    innerContainerClass: HEATMAP_AREA_CONTAINER_CLASS,
+    innerContainerSelector: HEATMAP_AREA_CONTAINER_SELECTOR,
+};
+
+const CALLOUT_PADDING = 0;
+const CALLOUT_ARROW_SIZE = 8;
+const CALLOUT_OFFSET = { x: -8, y: 0 };
+const CALLOUT_ALIGNMENT = 'left';
+const CLICKED_ELEMENT_ID_BASE = 'gx-hm-clicked-element';
+const SECONDARY_CLICKED_ELEMENT_ID_BASE = 'gx-hm-secondary-clicked-element';
+const HOVERED_ELEMENT_ID_BASE = 'gx-hm-hovered-element';
+const SECONDARY_HOVERED_ELEMENT_ID_BASE = 'gx-hm-secondary-hovered-element';
+const DEFAULT_POSITION_MODE = 'absolute';
+
 /**
- * Serializes area node to persisted data for database storage
+ * Get color from click distribution percentage (0-100)
  */
-function serializeAreaNode(area) {
-    return {
-        kind: area.kind,
-        id: area.id,
-        hash: area.hash,
-        selector: area.selector,
-    };
+function getColorFromClickDist(clickDist) {
+    // Ensure clickDist is in range [0, 100]
+    const normalizedDist = Math.max(0, Math.min(100, clickDist));
+    // Calculate gradient index
+    const maxIndex = AREA_COLOR_GRADIENT.length - 1;
+    const index = Math.floor((normalizedDist / 100) * maxIndex);
+    const clampedIndex = Math.min(index, maxIndex);
+    const [r, g, b] = AREA_COLOR_GRADIENT[clampedIndex];
+    // Return rgba with 60% opacity
+    return `rgba(${r}, ${g}, ${b}, 0.6)`;
 }
 /**
- * Serializes multiple areas for database storage
+ * Get hover color (slightly lighter) from click distribution
  */
-function serializeAreas(areas) {
-    return areas.map(serializeAreaNode);
+function getHoverColorFromClickDist(clickDist) {
+    const normalizedDist = Math.max(0, Math.min(100, clickDist));
+    const maxIndex = AREA_COLOR_GRADIENT.length - 1;
+    const index = Math.floor((normalizedDist / 100) * maxIndex);
+    const clampedIndex = Math.min(index, maxIndex);
+    const [r, g, b] = AREA_COLOR_GRADIENT[clampedIndex];
+    // Return rgba with 80% opacity for hover
+    return `rgba(${r}, ${g}, ${b}, 0.8)`;
 }
-
 /**
- * Resolve overlapping areas by priority rules
- *
- * Priority Rules (in order):
- * 1. Priority flag (manually set areas win)
- * 2. Click distribution (higher % wins)
- * 3. Total clicks (more clicks wins)
- * 4. DOM containment (parent contains child, parent wins)
- * 5. Size (smaller areas win - more specific)
+ * Calculate click distribution percentage from total clicks
  */
-function resolveOverlaps(areas, iframeDocument) {
-    if (areas.length === 0)
-        return [];
-    // Group overlapping areas
-    const overlapGroups = findOverlapGroups(areas);
-    // Resolve each group
-    const visibleAreas = new Set();
-    overlapGroups.forEach((group) => {
-        const winner = resolveOverlapGroup(group, iframeDocument);
-        visibleAreas.add(winner);
-    });
-    // Add non-overlapping areas
-    areas.forEach((area) => {
-        const hasOverlap = overlapGroups.some((group) => group.areas.includes(area));
-        if (!hasOverlap) {
-            visibleAreas.add(area);
+function calculateClickDistribution(elementClicks, totalClicks) {
+    if (totalClicks === 0)
+        return 0;
+    return (elementClicks / totalClicks) * 100;
+}
+
+function getElementRect(element, _shadowRoot) {
+    const rect = element.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    const doc = element.ownerDocument || document;
+    const scrollTop = doc.documentElement?.scrollTop || doc.body?.scrollTop || 0;
+    const scrollLeft = doc.documentElement?.scrollLeft || doc.body?.scrollLeft || 0;
+    const top = rect.top + scrollTop;
+    const left = rect.left + scrollLeft;
+    const absoluteLeft = left;
+    const absoluteTop = top;
+    const absoluteRight = absoluteLeft + width;
+    const absoluteBottom = absoluteTop + height;
+    return {
+        width,
+        height,
+        top,
+        left,
+        absoluteLeft,
+        absoluteTop,
+        absoluteRight,
+        absoluteBottom,
+        outOfBounds: false,
+    };
+}
+function isElementFixed(element) {
+    if (getComputedStyle(element).position === 'fixed') {
+        return true;
+    }
+    if (element.nodeName === 'HTML') {
+        return false;
+    }
+    const parent = element.parentElement;
+    return parent ? isElementFixed(parent) : false;
+}
+function doAreasOverlap(area1, area2) {
+    const r1 = area1.rect.value;
+    const r2 = area2.rect.value;
+    if (!r1 || !r2)
+        return false;
+    return ((r1.absoluteBottom > r2.absoluteTop &&
+        r1.absoluteTop < r2.absoluteBottom &&
+        r1.absoluteRight > r2.absoluteLeft &&
+        r1.absoluteLeft < r2.absoluteRight) ||
+        (r2.absoluteBottom > r1.absoluteTop &&
+            r2.absoluteTop < r1.absoluteBottom &&
+            r2.absoluteRight > r1.absoluteLeft &&
+            r2.absoluteLeft < r1.absoluteRight));
+}
+function isAreaContainedIn(area1, area2) {
+    const r1 = area1.rect.value;
+    const r2 = area2.rect.value;
+    if (!r1 || !r2)
+        return false;
+    return (r1.absoluteTop >= r2.absoluteTop &&
+        r1.absoluteBottom <= r2.absoluteBottom &&
+        r1.absoluteLeft >= r2.absoluteLeft &&
+        r1.absoluteRight <= r2.absoluteRight);
+}
+function isElementAncestorOf(ancestor, descendant, doc) {
+    return ancestor.contains(descendant);
+}
+function isElementSelectable(element, index, elements) {
+    if (isIgnoredCanvas(element)) {
+        return false;
+    }
+    if (element.hasAttribute(AREA_MAP_DIV_ATTRIBUTE)) {
+        return false;
+    }
+    if (index === 0 && elements.length > 1 && element.nodeName === 'BODY') {
+        return false;
+    }
+    return true;
+}
+function sortAreasByClickDist(areas) {
+    return [...areas].sort((a, b) => {
+        if (a.clickDist !== b.clickDist) {
+            return b.clickDist - a.clickDist;
         }
+        return b.totalclicks - a.totalclicks;
     });
-    return Array.from(visibleAreas);
 }
-/**
- * Find groups of overlapping areas
- */
-function findOverlapGroups(areas) {
-    const groups = [];
-    const processed = new Set();
-    areas.forEach((area) => {
-        if (processed.has(area.id))
-            return;
-        // Find all areas that overlap with this one
-        const overlapping = areas.filter((other) => other.id !== area.id && doAreasOverlap(area, other));
-        if (overlapping.length === 0) {
-            // No overlap, skip grouping
-            return;
+function isRectTooSmallForLabel(rect) {
+    return rect.width < 67 || rect.height < 30;
+}
+
+function getElementSelector(element) {
+    if (element.id) {
+        return `#${element.id}`;
+    }
+    if (element.className) {
+        const classes = Array.from(element.classList).join('.');
+        if (classes) {
+            return `${element.tagName.toLowerCase()}.${classes}`;
         }
-        // Create group with this area and all overlapping
-        const groupAreas = [area, ...overlapping];
-        groupAreas.forEach((a) => processed.add(a.id));
-        // Placeholder - will be resolved later
-        groups.push({
-            areas: groupAreas,
-            winner: area,
-            hidden: [],
-        });
-    });
-    return groups;
+    }
+    return element.tagName.toLowerCase();
+}
+/**
+ * Calculate total clicks for an element including all its child elements
+ * @param element - The parent element
+ * @param elementMapInfo - Map of hash to element click info
+ * @returns Total clicks for element + all descendants
+ */
+function calculateTotalClicksWithChildren(element, clickMapMetrics) {
+    let totalClicks = 0;
+    // Get clicks for the element itself
+    const elementHash = getElementHash(element);
+    if (elementHash) {
+        const elementInfo = clickMapMetrics[elementHash];
+        totalClicks += elementInfo?.totalClicked.value ?? 0;
+    }
+    const children = element.querySelectorAll('*');
+    children.forEach((child) => {
+        const childHash = getElementHash(child);
+        if (childHash) {
+            const childInfo = clickMapMetrics[childHash];
+            totalClicks += childInfo?.totalClicked.value ?? 0;
+        }
+    });
+    return totalClicks;
+}
+function buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData) {
+    if (!heatmapInfo.clickMapMetrics)
+        return;
+    const totalClicks = heatmapInfo.totalClicks || 0;
+    const elementInfo = heatmapInfo.clickMapMetrics[hash];
+    // Calculate total clicks including all child elements
+    const elementClicks = calculateTotalClicksWithChildren(element, heatmapInfo.clickMapMetrics);
+    const clickDist = calculateClickDistribution(elementClicks, totalClicks);
+    const rect = getElementRect(element);
+    const color = getColorFromClickDist(clickDist);
+    const hoverColor = getHoverColorFromClickDist(clickDist);
+    const areaNode = {
+        kind: persistedData?.kind || 'area',
+        id: persistedData?.id || `${hash}_${Date.now()}`,
+        hash,
+        selector: persistedData?.selector || elementInfo?.selector || getElementSelector(element),
+        // DOM references
+        element,
+        areaElement: null,
+        shadowElement: null,
+        shadowStyleElement: null,
+        // Graph structure
+        parentNode: null,
+        childNodes: new Set(),
+        // Position
+        rect: createObservable(rect),
+        isFixed: isElementFixed(element),
+        priority: false,
+        // Click tracking
+        totalclicks: elementClicks,
+        cumulativeClicks: elementClicks,
+        cumulativeMaxClicks: totalClicks,
+        clickDist,
+        hasClickInfo: true,
+        // Visual
+        color,
+        hoverColor,
+        // Lifecycle
+        changeObserver: null,
+    };
+    return areaNode;
+}
+function getTopElementsByClicks(clickMapMetrics, topN = 10) {
+    const elements = Object.entries(clickMapMetrics)
+        .map(([hash, info]) => ({
+        hash,
+        totalclicks: info.totalClicked.value ?? 0,
+        selector: info.selector || '',
+    }))
+        .sort((a, b) => b.totalclicks - a.totalclicks)
+        .slice(0, topN);
+    return elements;
+}
+
+/**
+ * Build parent-child relationships between areas based on DOM hierarchy
+ * @param areas - Array of area nodes to build relationships for
+ */
+function buildAreaGraph(areas) {
+    // Clear existing relationships
+    areas.forEach((area) => {
+        area.parentNode = null;
+        area.childNodes.clear();
+    });
+    // Build relationships based on DOM containment
+    for (let i = 0; i < areas.length; i++) {
+        const area = areas[i];
+        for (let j = 0; j < areas.length; j++) {
+            if (i === j)
+                continue;
+            const otherArea = areas[j];
+            // Check if area's element is contained within otherArea's element
+            if (otherArea.element.contains(area.element)) {
+                // Find the closest parent (not just any ancestor)
+                if (!area.parentNode || area.parentNode.element.contains(otherArea.element)) {
+                    // Remove from old parent if exists
+                    if (area.parentNode) {
+                        area.parentNode.childNodes.delete(area);
+                    }
+                    // Set new parent
+                    area.parentNode = otherArea;
+                    otherArea.childNodes.add(area);
+                }
+            }
+        }
+    }
+}
+
+function decodeClarity(payload) {
+    try {
+        return decode(payload);
+    }
+    catch (_error) {
+        return null;
+    }
+}
+function decodeArrayClarity(items) {
+    return items.map((item) => decodeClarity(item)).filter((item) => item !== null);
+}
+
+function findElementByHash(props) {
+    const { hash, selector, iframeDocument, vizRef } = props;
+    if (vizRef) {
+        const element = vizRef.get(hash);
+        return element;
+    }
+    // Fallback
+    if (!iframeDocument)
+        return null;
+    try {
+        const element = selector ? iframeDocument.querySelector(selector) : null;
+        if (element) {
+            return element;
+        }
+    }
+    catch (error) {
+        logger$9.warn(`Invalid selector "${selector}":`, error);
+    }
+    const elementByHash = iframeDocument.querySelector(`[data-clarity-hashalpha="${hash}"], [data-clarity-hash="${hash}"], [data-clarity-hashbeta="${hash}"]`);
+    return elementByHash;
+}
+
+/**
+ * Hydrates persisted area data into full area node
+ * Finds element in DOM and calculates all runtime values
+ *
+ * @param persistedData - Minimal data from database
+ * @param iframeDocument - Document to find element in
+ * @param heatmapInfo - Heatmap data for click calculations
+ * @param vizRef - Map of hash to elements
+ * @param shadowRoot - Optional shadow root for rect calculation
+ * @returns Full area node or null if element not found
+ */
+function hydrateAreaNode(props) {
+    const { persistedData, iframeDocument, heatmapInfo, vizRef, shadowRoot } = 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}`);
+        return null;
+    }
+    const areaNode = buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData);
+    if (!areaNode)
+        return null;
+    return areaNode;
+}
+function hydrateAreas(props) {
+    const { clickAreas, iframeDocument, heatmapInfo, vizRef, shadowRoot } = props;
+    const hydratedAreas = [];
+    for (const persistedData of clickAreas) {
+        const area = hydrateAreaNode({ persistedData, iframeDocument, heatmapInfo, vizRef, shadowRoot });
+        if (area) {
+            hydratedAreas.push(area);
+        }
+    }
+    logger$9.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
+    return hydratedAreas;
+}
+/**
+ * Serializes area node to persisted data for database storage
+ */
+function serializeAreaNode(area) {
+    return {
+        kind: area.kind,
+        id: area.id,
+        hash: area.hash,
+        selector: area.selector,
+    };
+}
+/**
+ * Serializes multiple areas for database storage
+ */
+function serializeAreas(areas) {
+    return areas.map(serializeAreaNode);
+}
+
+/**
+ * Resolve overlapping areas by priority rules
+ *
+ * Priority Rules (in order):
+ * 1. Priority flag (manually set areas win)
+ * 2. Click distribution (higher % wins)
+ * 3. Total clicks (more clicks wins)
+ * 4. DOM containment (parent contains child, parent wins)
+ * 5. Size (smaller areas win - more specific)
+ */
+function resolveOverlaps(areas, iframeDocument) {
+    if (areas.length === 0)
+        return [];
+    // Group overlapping areas
+    const overlapGroups = findOverlapGroups(areas);
+    // Resolve each group
+    const visibleAreas = new Set();
+    overlapGroups.forEach((group) => {
+        const winner = resolveOverlapGroup(group, iframeDocument);
+        visibleAreas.add(winner);
+    });
+    // Add non-overlapping areas
+    areas.forEach((area) => {
+        const hasOverlap = overlapGroups.some((group) => group.areas.includes(area));
+        if (!hasOverlap) {
+            visibleAreas.add(area);
+        }
+    });
+    return Array.from(visibleAreas);
+}
+/**
+ * Find groups of overlapping areas
+ */
+function findOverlapGroups(areas) {
+    const groups = [];
+    const processed = new Set();
+    areas.forEach((area) => {
+        if (processed.has(area.id))
+            return;
+        // Find all areas that overlap with this one
+        const overlapping = areas.filter((other) => other.id !== area.id && doAreasOverlap(area, other));
+        if (overlapping.length === 0) {
+            // No overlap, skip grouping
+            return;
+        }
+        // Create group with this area and all overlapping
+        const groupAreas = [area, ...overlapping];
+        groupAreas.forEach((a) => processed.add(a.id));
+        // Placeholder - will be resolved later
+        groups.push({
+            areas: groupAreas,
+            winner: area,
+            hidden: [],
+        });
+    });
+    return groups;
 }
 /**
  * Resolve a single overlap group to find the winner
@@ -2677,1365 +2750,168 @@ const constrainToViewport = (candidate, options) => {
     const viewportTop = padding;
     const viewportRight = viewport.width - calloutRect.width - padding;
     const viewportBottom = viewport.height - calloutRect.height - padding;
-    const left = Math.max(viewportLeft, Math.min(leftPos, viewportRight));
-    const top = Math.max(viewportTop, Math.min(topPos, viewportBottom));
-    return { top, left };
-};
-
-const getScrollOffset = (visualRef) => {
-    if (!visualRef?.current)
-        return;
-    return {
-        top: visualRef.current.scrollTop,
-        left: visualRef.current.scrollLeft,
-    };
-};
-/**
- * Create adjusted container rect for absolute positioning
- * - With scroll: represents visible area in container coordinates
- * - Without scroll: represents full container in container coordinates
- */
-const createAdjustedContainerRect = (options) => {
-    const { containerElm, scale, isAbsolute, visualRef } = options;
-    const containerRect = containerElm.getBoundingClientRect();
-    const scrollOffset = getScrollOffset(visualRef);
-    // No scale = fixed positioning, use raw rect
-    if (!scale)
-        return containerRect;
-    const scaledWidth = containerRect.width / scale;
-    const scaledHeight = containerRect.height / scale;
-    // Absolute positioning with scroll offset
-    if (isAbsolute && scrollOffset) {
-        return {
-            ...containerRect,
-            top: scrollOffset.top,
-            left: scrollOffset.left,
-            right: scrollOffset.left + scaledWidth,
-            bottom: scrollOffset.top + scaledHeight,
-            width: scaledWidth,
-            height: scaledHeight,
-        };
-    }
-    // Absolute positioning without scroll
-    return {
-        ...containerRect,
-        top: 0,
-        left: 0,
-        right: scaledWidth,
-        width: scaledWidth,
-        bottom: scaledHeight,
-        height: scaledHeight,
-    };
-};
-const calcCalloutPosition = (options) => {
-    const { targetElm, calloutElm, setPosition, positionMode, widthScale, visualRef } = options;
-    const offset = options.offset ?? CALLOUT_OFFSET;
-    const alignment = options.alignment ?? CALLOUT_ALIGNMENT;
-    const padding = CALLOUT_PADDING;
-    const arrowSize = CALLOUT_ARROW_SIZE;
-    return () => {
-        const isAbsolute = positionMode === 'absolute';
-        const scale = isAbsolute ? widthScale : 1;
-        // Determine container element based on positioning mode
-        // - Absolute: portal container (parent of callout)
-        // - Fixed: visual container (scrollable area)
-        const containerElm = isAbsolute ? calloutElm.parentElement : visualRef?.current;
-        if (!containerElm)
-            return;
-        const viewport = getContainerViewport(containerElm);
-        const visualViewport = getVisualDomViewport(visualRef?.current, scale);
-        const rectDimensions = getElementDimensions({ targetElm, calloutElm, scale, containerElm });
-        const containerRect = createAdjustedContainerRect({ containerElm, scale, isAbsolute, visualRef });
-        const options = {
-            rectDimensions,
-            viewport,
-            visualViewport,
-            alignment,
-            offset,
-            padding,
-            arrowSize,
-            containerRect,
-            widthScale,
-        };
-        const candidates = generateAllCandidates(options);
-        const candidate = selectBestPosition(candidates);
-        // Constrain to viewport/container bounds
-        const constrainedCandidate = constrainToViewport(candidate, options);
-        // Final callout position
-        const finalPosition = {
-            top: constrainedCandidate.top,
-            left: constrainedCandidate.left,
-            placement: candidate.placement,
-            horizontalAlign: candidate.horizontalAlign,
-        };
-        setPosition(finalPosition);
-    };
-};
-const calcCalloutPositionAbsolute = (props) => {
-    const { widthScale, calloutElm, containerElm, element, setPosition } = props;
-    const mousePosition = element?.mousePosition;
-    if (!mousePosition)
-        return;
-    const padding = props.padding ?? CALLOUT_PADDING;
-    const arrowSize = props.arrowSize ?? CALLOUT_ARROW_SIZE;
-    const rawCalloutRect = calloutElm.getBoundingClientRect();
-    if (rawCalloutRect.width === 0 || rawCalloutRect.height === 0)
-        return;
-    const containerRect = containerElm.getBoundingClientRect();
-    const mouseX = mousePosition.x;
-    const mouseY = mousePosition.y;
-    const targetRect = {
-        top: mouseY,
-        left: mouseX,
-        right: mouseX + 1,
-        bottom: mouseY + 1,
-        width: 1,
-        height: 1,
-        x: mouseX,
-        y: mouseY,
-        toJSON: () => ({}),
-    };
-    const rectDimensions = {
-        targetRect,
-        calloutRect: getScaledCalloutRect(),
-        targetAbsoluteRect: {
-            top: element.top,
-            left: element.left,
-        },
-    };
-    const viewport = getContainerViewport(containerElm);
-    const options = {
-        rectDimensions,
-        viewport,
-        alignment: CALLOUT_ALIGNMENT,
-        offset: CALLOUT_OFFSET,
-        padding,
-        arrowSize,
-        containerRect,
-        widthScale,
-    };
-    const candidates = generateAllCandidates(options);
-    const bestPosition = selectBestPosition(candidates);
-    const finalPosition = {
-        top: bestPosition.top,
-        left: bestPosition.left,
-        placement: bestPosition.placement,
-        horizontalAlign: bestPosition.horizontalAlign,
-    };
-    setPosition(finalPosition);
-    // const styleBestPosition = getStyleFromCandidate(bestPosition, widthScale);
-    // onChange(styleBestPosition);
-};
-
-/**
- * Throttle a function using requestAnimationFrame
- * Ensures the callback is called at most once per animation frame
- */
-const throttleRAF = (callback) => {
-    let rafId = null;
-    let latestArgs = null;
-    const throttled = (...args) => {
-        // Store the latest arguments
-        latestArgs = args;
-        // If already scheduled, do nothing
-        if (rafId !== null)
-            return;
-        // Schedule the callback for the next animation frame
-        rafId = requestAnimationFrame(() => {
-            if (latestArgs !== null) {
-                callback(...latestArgs);
-                latestArgs = null;
-            }
-            rafId = null;
-        });
-    };
-    // Add cancel method to clear pending RAF
-    throttled.cancel = () => {
-        if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-            rafId = null;
-            latestArgs = null;
-        }
-    };
-    return throttled;
-};
-
-/**
- * IframeHeightProcessor Types
- * Complete TypeScript types for iframe height processing system
- */
-const TAGS_TO_PROCESS = [
-    'div',
-    'section',
-    'iframe',
-    'img',
-    'a',
-    'header',
-    'main',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'button',
-    'ul',
-    'svg',
-    'li',
-    'cart-drawer',
-    'footer',
-    'collapsible-content',
-    'section-animate',
-    'video',
-];
-const ANIMATION_CLASSES_TO_REMOVE = [
-    'Image--zoomOut',
-    'Image--fadeIn',
-    'transition--blur-up',
-    'header-fixed',
-    'lazyframe',
-    'lazyframe--loaded',
-    'lazymap',
-    'pplr',
-    'site-header--stuck',
-    'animate--slide-in',
-    'animated-element',
-    'lazyPicture__elem',
-    'jdgm-hidden',
-    'splide',
-    'list-collections__slide-overlay',
-    'onetrust-pc-dark-filter',
-    'featured-blog__header-image',
-    'overlay', // Special case: only remove if NOT js-search-overlay
-];
-const LAZY_LOAD_CLASSES_TO_REMOVE = [
-    'lazyloaded',
-    'lazyautosizes',
-    'autosizes',
-    'lazyload',
-    'Image--fadeIn',
-    'Image--lazyLoaded',
-    'Image--lazyLoad',
-    'lazypreload',
-    'transition--fade-in',
-];
-const ELEMENTS_TO_SKIP_OPACITY = [
-    'header-menu',
-    'header-megamenu',
-    'header-dropdown',
-    'image-overlay',
-    'product-item__bg__under',
-    'transition-opacity',
-    'mm-drawer-cart-filter',
-    'transition',
-    'navigation__container',
-    'predictive__content-mobile',
-    'multiply-mode__target',
-    'product-card__img',
-    'feature__description',
-    'slider-item',
-    'rtnu-header__mobile-nav',
-    'splide__slide',
-    'sub-menu',
-    'swiper-slide',
-    'dropdown-menu',
-    'header__mask',
-    'announcement_block',
-    'bottom_sticky',
-    'stickyatc',
-    'g-header__menu',
-    'mobile-menu',
-    'jc-absolute',
-];
-
-/**
- * IframeHeightProcessor Utils
- * Helper functions for iframe height processing
- */
-/**
- * Get iframe element by ID
- */
-function getIframeElement(iframeId) {
-    return document.getElementById(iframeId);
-}
-/**
- * Get iframe content document
- */
-function getIframeDocument(iframe) {
-    try {
-        return iframe.contentDocument || iframe.contentWindow?.document || null;
-    }
-    catch (error) {
-        console.warn('Cannot access iframe document:', error);
-        return null;
-    }
-}
-/**
- * Get iframe content window
- */
-function getIframeWindow(iframe) {
-    try {
-        return iframe.contentWindow;
-    }
-    catch (error) {
-        console.warn('Cannot access iframe window:', error);
-        return null;
-    }
-}
-/**
- * Calculate iframe height from multiple sources
- * Returns the maximum height from body and documentElement
- */
-function calculateIframeHeight(doc) {
-    const body = doc.body;
-    const docElement = doc.documentElement;
-    const bodyOffsetHeight = body ? body.offsetHeight : 0;
-    const bodyScrollHeight = body ? body.scrollHeight : 0;
-    const documentElementOffsetHeight = docElement ? docElement.offsetHeight : 0;
-    const documentElementClientHeight = docElement ? docElement.clientHeight : 0;
-    const documentElementScrollHeight = docElement ? docElement.scrollHeight : 0;
-    const calculatedHeight = Math.max(bodyOffsetHeight, bodyScrollHeight, documentElementOffsetHeight, documentElementClientHeight, documentElementScrollHeight);
-    return {
-        bodyOffsetHeight,
-        bodyScrollHeight,
-        documentElementOffsetHeight,
-        documentElementClientHeight,
-        documentElementScrollHeight,
-        calculatedHeight,
-    };
-}
-/**
- * Calculate iframe width
- */
-function calculateIframeWidth(doc) {
-    const body = doc.body;
-    const docElement = doc.documentElement;
-    return Math.max(body ? body.offsetWidth : 0, body ? body.scrollWidth : 0, docElement ? docElement.offsetWidth : 0, docElement ? docElement.clientWidth : 0, docElement ? docElement.scrollWidth : 0);
-}
-/**
- * Check if element is a fixed drawer
- */
-function isFixedDrawer(element) {
-    if (!element.classList.contains('drawer__content')) {
-        return false;
-    }
-    const style = window.getComputedStyle(element);
-    return (style.getPropertyValue('position') === 'fixed' &&
-        style.getPropertyValue('top') === '0px' &&
-        style.getPropertyValue('left') === '0px');
-}
-/**
- * Check if element is an image element (img, background-image, or data-bgset)
- */
-function isImageElement(element) {
-    if (element.tagName.toLowerCase() === 'img') {
-        return true;
-    }
-    const computedStyle = window.getComputedStyle(element);
-    const bgImage = computedStyle.getPropertyValue('background-image');
-    if (bgImage && /url\(.+?\)/.test(bgImage)) {
-        return true;
-    }
-    if (element.getAttribute('data-bgset')) {
-        return true;
-    }
-    return false;
-}
-/**
- * Convert height to viewport units if applicable
- */
-function convertToViewportHeight(heightPx, viewportHeight, threshold = 60) {
-    if (heightPx >= viewportHeight) {
-        return '100vh';
-    }
-    const percentage = (heightPx / viewportHeight) * 100;
-    if (percentage > threshold) {
-        return `${Math.round(percentage)}vh`;
-    }
-    return null;
-}
-/**
- * Parse srcset string and get appropriate image URL based on width
- */
-function getImageURLFromSrcSet(srcset, targetWidth) {
-    if (srcset.startsWith('data:image')) {
-        return '';
-    }
-    const sources = srcset.split(',').filter((s) => !!s);
-    for (const source of sources) {
-        const parts = source
-            .trim()
-            .split(' ')
-            .filter((p) => !!p);
-        const url = parts[0];
-        const descriptor = parts[1];
-        if (descriptor) {
-            const width = parseInt(descriptor.slice(0, -1), 10);
-            if (targetWidth <= width) {
-                return url;
-            }
-        }
-    }
-    // Return last source as fallback
-    const lastSource = sources[sources.length - 1].trim();
-    const parts = lastSource.split(' ');
-    if (parts.length > 3) {
-        throw new Error('Invalid src URL in srcset');
-    }
-    return parts[0];
-}
-/**
- * Get background image URL from data-bgset attribute
- */
-function getBackgroundImageFromBgSet(bgset, targetWidth) {
-    const sources = bgset.split(',');
-    for (const source of sources) {
-        const parts = source.trim().split(' ');
-        if (parts.length >= 3) {
-            const url = parts[0];
-            const width = parseInt(parts[1], 10);
-            if (targetWidth < width) {
-                return url;
-            }
-        }
-    }
-    return null;
-}
-/**
- * Replace placeholder in image URL (e.g., {width}, {height}, %7Bwidth%7D)
- */
-function replaceImagePlaceholder(url, placeholder, value) {
-    const patterns = [
-        new RegExp(`\\{${placeholder}\\}`, 'g'),
-        new RegExp(`%7B${placeholder}%7D`, 'gi'),
-    ];
-    let result = url;
-    for (const pattern of patterns) {
-        result = result.replace(pattern, String(value));
-    }
-    return result;
-}
-/**
- * Get computed height attributes object
- */
-function getComputedHeightAttributes(element, computedStyle, windowHeight, windowWidth) {
-    return {
-        actualHeight: computedStyle.height,
-        actualWidth: computedStyle.width,
-        actualMaxHeight: computedStyle.maxHeight,
-        actualMaxWidth: computedStyle.maxWidth,
-        actualMinHeight: computedStyle.minHeight,
-        actualMinWidth: computedStyle.minWidth,
-        windowHeight: String(windowHeight),
-        windowWidth: String(windowWidth),
-        elementScrollHeight: String(element.scrollHeight),
-    };
-}
-/**
- * Set computed height attributes on element
- */
-function setComputedHeightAttributes(element, attributes) {
-    Object.entries(attributes).forEach(([key, value]) => {
-        if (value !== undefined) {
-            element.setAttribute(key, value);
-        }
-    });
-}
-/**
- * Remove all height-related attributes
- */
-function removeHeightAttributes(element) {
-    const attrs = [
-        'actualHeight',
-        'actualWidth',
-        'actualMaxHeight',
-        'actualMaxWidth',
-        'actualMinHeight',
-        'actualMinWidth',
-        'windowHeight',
-        'windowWidth',
-        'elementScrollHeight',
-        'viewportHeight',
-        'viewportMinHeight',
-        'viewportWidth',
-    ];
-    attrs.forEach((attr) => element.removeAttribute(attr));
-}
-/**
- * Log with optional debug flag
- */
-function log(message, data, debug = false) {
-    if (debug || (typeof window !== 'undefined' && window.debugMode)) {
-        if (data !== undefined) {
-            console.log(`[IframeHeightProcessor] ${message}`, data);
-        }
-        else {
-            console.log(`[IframeHeightProcessor] ${message}`);
-        }
-    }
-}
-/**
- * Check if element should skip opacity setting
- */
-function shouldSkipOpacitySetting(element, classList) {
-    const rect = element.getBoundingClientRect();
-    // Skip if element is in top 300px
-    if (rect.top < 300) {
-        return true;
-    }
-    // Skip empty divs
-    if (element.tagName.toLowerCase() === 'div' && element.childElementCount === 0) {
-        return true;
-    }
-    // Skip if has specific classes
-    return classList.some((cls) => element.classList.contains(cls));
-}
-
-/**
- * IframeHeightProcessor
- * Core class for processing iframe heights, capturing computed styles, and fixing layout issues
- */
-class IframeHeightProcessor {
-    config;
-    iframe = null;
-    iframeDoc = null;
-    iframeWindow = null;
-    initialStyles = [];
-    lastKnownHeight = 0;
-    constructor(config) {
-        this.config = {
-            defaultHeight: 800,
-            debug: false,
-            selectedScreenshotData: null,
-            isCompatibleWithInteractiveMode: true,
-            isRunningInInteractiveMode: false,
-            ...config,
-        };
-        this.initialize();
-    }
-    /**
-     * Initialize processor - get iframe references
-     */
-    initialize() {
-        this.iframe = getIframeElement(this.config.iframeId);
-        if (!this.iframe) {
-            throw new Error(`Iframe with ID "${this.config.iframeId}" not found`);
-        }
-        this.iframeDoc = getIframeDocument(this.iframe);
-        this.iframeWindow = getIframeWindow(this.iframe);
-        if (!this.iframeDoc || !this.iframeWindow) {
-            throw new Error('Cannot access iframe document or window');
-        }
-        log('Initialized', { iframeId: this.config.iframeId }, this.config.debug);
-    }
-    /**
-     * Get current iframe height
-     */
-    getIframeHeight() {
-        if (!this.iframeDoc) {
-            return 0;
-        }
-        const metrics = calculateIframeHeight(this.iframeDoc);
-        return metrics.calculatedHeight;
-    }
-    /**
-     * Get current iframe width
-     */
-    getIframeWidth() {
-        if (!this.iframeDoc) {
-            return this.config.iframeWidth;
-        }
-        return calculateIframeWidth(this.iframeDoc);
-    }
-    /**
-     * Get iframe document height (alternative method)
-     */
-    getIframeDocumentHeight() {
-        if (!this.iframe)
-            return 0;
-        const doc = this.iframe.contentWindow?.document;
-        if (!doc)
-            return 0;
-        const { body, documentElement } = doc;
-        const heights = [
-            body?.scrollHeight ?? 0,
-            body?.offsetHeight ?? 0,
-            documentElement?.scrollHeight ?? 0,
-            documentElement?.offsetHeight ?? 0,
-            documentElement?.clientHeight ?? 0,
-        ];
-        return Math.max(...heights, 0);
-    }
-    /**
-     * MAIN PIPELINE: Process iframe height
-     * This is the main entry point that runs the full pipeline
-     */
-    async processIframeHeight() {
-        log('Starting iframe height processing pipeline...', null, this.config.debug);
-        try {
-            // Step 1: Capture computed heights
-            this.captureComputedHeight();
-            // Step 2: Clean up DOM
-            this.cleanUpDOM();
-            // Step 3: Fix heights
-            this.fixHeights();
-            // Step 4: Screenshot fixes (if height > default)
-            const currentHeight = this.getIframeHeight();
-            if (currentHeight > this.config.defaultHeight) {
-                this.hideElementsIfLargeModal();
-            }
-            this.findScrollableElements();
-            this.correctImageSrcs();
-            this.correctHeightForCertainClasses();
-            // Step 5: Track height
-            this.lastKnownHeight = this.getIframeHeight();
-            log('Iframe height processing completed', { height: this.lastKnownHeight }, this.config.debug);
-        }
-        catch (error) {
-            console.error('[IframeHeightProcessor] Error processing iframe height:', error);
-            throw error;
-        }
-    }
-    /**
-     * STEP 1: Capture Computed Heights
-     * Saves all computed styles to element attributes
-     */
-    captureComputedHeight() {
-        if (!this.iframeDoc)
-            return;
-        log('Capturing computed heights...', null, this.config.debug);
-        const body = this.iframeDoc.body;
-        // Remove hidden elements
-        body.querySelectorAll('.heatmap-com__hidden-element').forEach((el) => {
-            el.classList.remove('heatmap-com__hidden-element');
-        });
-        // Hide GDPR overlay
-        const gdprOverlay = body.querySelector('#gdpr-blocking-page-overlay');
-        if (gdprOverlay) {
-            gdprOverlay.style.display = 'none';
-        }
-        // Hide popup forms (if not in screenshot mode)
-        if (!this.config.selectedScreenshotData) {
-            const popups = body.querySelectorAll('[aria-label="POPUP Form"], [data-section-id="popup"]');
-            popups.forEach((popup) => {
-                const parent = popup.parentElement;
-                if (parent) {
-                    parent.style.setProperty('display', 'none', 'important');
-                }
-            });
-        }
-        // Remove media-transparent class
-        body.querySelectorAll('.media--transparent').forEach((el) => {
-            el.classList.remove('media--transparent');
-        });
-        // Process each tag type
-        TAGS_TO_PROCESS.forEach((tag) => {
-            this.captureComputedHeightForTag(tag);
-        });
-        // Special fixes
-        this.applySwiperSlideWidthFix();
-        this.applyCustomBlocksFix();
-        this.applyParallaxContainerFix();
-        this.applyHeaderPositionFix();
-        log('Computed heights captured', null, this.config.debug);
-    }
-    /**
-     * Capture computed height for a specific tag
-     */
-    captureComputedHeightForTag(tagName) {
-        if (!this.iframeDoc)
-            return;
-        const elements = this.iframeDoc.querySelectorAll(tagName);
-        const viewportHeight = this.config.defaultHeight;
-        elements.forEach((element) => {
-            const el = element;
-            const computedStyle = window.getComputedStyle(el);
-            // Force important padding if > 10px
-            const paddingTop = parseInt(computedStyle.getPropertyValue('padding-top'), 10) || 0;
-            const paddingBottom = parseInt(computedStyle.getPropertyValue('padding-bottom'), 10) || 0;
-            if (paddingTop > 10) {
-                el.style.setProperty('padding-top', `${paddingTop}px`, 'important');
-            }
-            if (paddingBottom > 10) {
-                el.style.setProperty('padding-bottom', `${paddingBottom}px`, 'important');
-            }
-            // Remove old attributes
-            removeHeightAttributes(el);
-            // Get computed values
-            const attrs = getComputedHeightAttributes(el, computedStyle, viewportHeight, this.config.iframeWidth);
-            // Convert heights to viewport units if applicable
-            const heightPx = parseFloat(computedStyle.height);
-            if (!isNaN(heightPx)) {
-                const vhHeight = convertToViewportHeight(heightPx, viewportHeight);
-                if (vhHeight) {
-                    attrs.viewportHeight = vhHeight;
-                }
-            }
-            const minHeightPx = parseFloat(computedStyle.minHeight);
-            if (!isNaN(minHeightPx)) {
-                const vhMinHeight = convertToViewportHeight(minHeightPx, viewportHeight);
-                if (vhMinHeight) {
-                    attrs.viewportMinHeight = vhMinHeight;
-                }
-            }
-            const widthPx = parseInt(computedStyle.width, 10);
-            if (widthPx === this.config.iframeWidth) {
-                attrs.viewportWidth = '100vw';
-            }
-            // Set all attributes
-            setComputedHeightAttributes(el, attrs);
-            // SVG special handling
-            if (tagName.toLowerCase() === 'svg') {
-                if (el.classList.contains('decor-svg') || el.parentElement?.classList.contains('decor')) {
-                    el.style.setProperty('width', `${computedStyle.width}`, 'important');
-                    el.style.setProperty('height', `${computedStyle.height}`, 'important');
-                    el.style.setProperty('transform', 'none', 'important');
-                }
-            }
-        });
-    }
-    /**
-     * STEP 2: Clean Up DOM
-     */
-    cleanUpDOM() {
-        log('Cleaning up DOM...', null, this.config.debug);
-        this.fixImages();
-    }
-    /**
-     * Fix lazy-loaded images
-     */
-    fixImages() {
-        if (!this.iframeDoc)
-            return;
-        const images = this.iframeDoc.querySelectorAll('img');
-        const iframeContentDoc = this.iframeDoc;
-        images.forEach((img) => {
-            // Fix srcset from data attributes
-            const srcset = img.getAttribute('srcset');
-            const dataSrcset = img.getAttribute('data-srcset');
-            const dataLazySrcset = img.getAttribute('data-lazy-srcset');
-            const dataLazySrc = img.getAttribute('data-lazy-src');
-            if ((srcset && srcset.startsWith('data:image') && dataSrcset) || (!srcset && dataSrcset)) {
-                img.setAttribute('srcset', dataSrcset);
-            }
-            else if (!srcset && dataLazySrcset) {
-                img.setAttribute('srcset', dataLazySrcset);
-            }
-            else if (!srcset && dataLazySrc) {
-                img.setAttribute('srcset', dataLazySrc);
-            }
-            // Set opacity
-            const hasBlurTransition = img.classList.contains('transition--blur-up');
-            if (img.parentNode === iframeContentDoc.body) {
-                img.style.display = 'none';
-            }
-            else {
-                img.style.opacity = '1';
-                if (hasBlurTransition) {
-                    img.style.setProperty('display', 'block', 'important');
-                }
-            }
-            // Get best image URL
-            if (img.currentSrc || img.getAttribute('data-src')) {
-                let bestSrc = img.currentSrc;
-                if (img.getAttribute('data-src')) {
-                    bestSrc = img.getAttribute('data-src');
-                }
-                const imgSrcset = img.getAttribute('srcset');
-                if (imgSrcset) {
-                    try {
-                        const urlFromSrcset = getImageURLFromSrcSet(imgSrcset, this.config.iframeWidth);
-                        bestSrc = urlFromSrcset.replace(/.*https:/, 'https:') || bestSrc;
-                    }
-                    catch {
-                        // Use current src as fallback
-                    }
-                }
-                // Remove lazy loading classes
-                LAZY_LOAD_CLASSES_TO_REMOVE.forEach((cls) => {
-                    img.classList.remove(cls);
-                });
-                // Set src
-                img.setAttribute('src', bestSrc);
-            }
-        });
-    }
-    /**
-     * STEP 3: Fix Heights
-     * Apply height fixes for all elements
-     */
-    fixHeights() {
-        log('Fixing heights...', null, this.config.debug);
-        const result = {
-            processed: 0,
-            fixed: 0,
-            errors: 0,
-            skipped: 0,
-        };
-        TAGS_TO_PROCESS.forEach((tag) => {
-            const tagResult = this.fixActualHeight(tag);
-            result.processed += tagResult.processed;
-            result.fixed += tagResult.fixed;
-            result.errors += tagResult.errors;
-            result.skipped += tagResult.skipped;
-        });
-        log('Heights fixed', result, this.config.debug);
-        return result;
-    }
-    /**
-     * Fix actual height for specific tag
-     */
-    fixActualHeight(tagName) {
-        if (!this.iframeDoc) {
-            return { processed: 0, fixed: 0, errors: 0, skipped: 0 };
-        }
-        const result = { processed: 0, fixed: 0, errors: 0, skipped: 0 };
-        const elements = this.iframeDoc.querySelectorAll(tagName);
-        elements.forEach((element) => {
-            result.processed++;
-            try {
-                const el = element;
-                const computedStyle = window.getComputedStyle(el);
-                // Apply all element fixes
-                this.fixElementOpacity(el, computedStyle);
-                this.removeZeroHeightAttribute(el);
-                this.fixFlexBasis(el, computedStyle);
-                this.fixHiddenProductItem(el, computedStyle);
-                this.removeAnimationClasses(el);
-                this.fixImageOrBackground(el, tagName);
-                this.fixAnimateOnScroll(el);
-                this.fixViewportWidth(el);
-                // HEIGHT FIXING LOGIC
-                this.applyHeightFix(el);
-                result.fixed++;
-            }
-            catch (error) {
-                result.errors++;
-                console.error(`Error fixing height for ${tagName}:`, error);
-            }
-        });
-        return result;
-    }
-    /**
-     * Set opacity = 1 if element is visible and not in skip list
-     */
-    fixElementOpacity(el, computedStyle) {
-        if (computedStyle.display !== 'none' && !shouldSkipOpacitySetting(el, ELEMENTS_TO_SKIP_OPACITY)) {
-            el.style.opacity = '1';
-        }
-    }
-    /**
-     * Remove actualHeight='0px' attribute
-     */
-    removeZeroHeightAttribute(el) {
-        if (el.getAttribute('actualHeight') === '0px') {
-            el.removeAttribute('actualHeight');
-        }
-    }
-    /**
-     * Fix flex-basis: 100% by converting to auto + width: 100%
-     */
-    fixFlexBasis(el, computedStyle) {
-        if (computedStyle.getPropertyValue('flex-basis') === '100%') {
-            el.style.setProperty('flex-basis', 'auto');
-            el.style.setProperty('width', '100%');
-        }
-    }
-    /**
-     * Fix ProductItem elements with opacity=1 but visibility=hidden
-     */
-    fixHiddenProductItem(el, computedStyle) {
-        if (computedStyle.opacity === '1' &&
-            computedStyle.visibility === 'hidden' &&
-            el.classList.toString().includes('ProductItem')) {
-            el.style.visibility = 'visible';
-        }
-    }
-    /**
-     * Remove animation and lazy-load classes that prevent rendering
-     */
-    removeAnimationClasses(el) {
-        ANIMATION_CLASSES_TO_REMOVE.forEach((cls) => {
-            if (el.classList.contains(cls)) {
-                // Skip overlay with js-search-overlay
-                if (cls === 'overlay' && el.classList.contains('js-search-overlay')) {
-                    return;
-                }
-                el.classList.remove(cls);
-            }
-        });
-    }
-    /**
-     * Fix images or background images based on tag type
-     */
-    fixImageOrBackground(el, tagName) {
-        if (tagName.toLowerCase() === 'img') {
-            this.fixImagePlaceholders(el);
-        }
-        else {
-            this.setBackgroundImage(el);
-        }
-    }
-    /**
-     * Fix AOS (Animate On Scroll) elements - force visibility
-     */
-    fixAnimateOnScroll(el) {
-        if (el.getAttribute('data-aos')) {
-            el.style.opacity = '1';
-            el.style.visibility = 'visible';
-        }
-    }
-    /**
-     * Fix viewport width elements (100vw → 100%)
-     */
-    fixViewportWidth(el) {
-        if (el.getAttribute('viewportWidth') === '100vw') {
-            el.style.width = '100%';
-        }
-    }
-    /**
-     * Apply height fix logic to element
-     * ⚠️ CRITICAL: This logic must match line 13258-13306 exactly
-     */
-    applyHeightFix(el) {
-        // Check if element is fixed drawer (skip height fixes)
-        if (isFixedDrawer(el)) {
-            el.setAttribute('heightReset', 'true');
-            return;
-        }
-        const actualHeight = el.getAttribute('actualHeight');
-        const hasStyleAttr = el.getAttribute('style');
-        const isImage = isImageElement(el);
-        const actualHeightNum = parseInt(actualHeight || '0', 10);
-        // ===== START OF NESTED IF-ELSE CHAIN (line 13259-13306) =====
-        // Case 1: actualHeight = '100%'
-        if (actualHeight === '100%') {
-            console.log(`🚀 🐥 ~ IframeHeightProcessor ~ applyHeightFix ~ actualHeight:`, actualHeight);
-            el.style.setProperty('height', 'max-content', 'important');
-            el.setAttribute('heightReset', 'true');
-        }
-        // Case 2: Image elements with height 50-800px
-        else if (isImage && actualHeightNum >= 50 && actualHeightNum <= 800) {
-            el.style.setProperty('height', actualHeight, 'important');
-            el.setAttribute('heightReset', 'true');
-        }
-        // Case 3: Has inline height style and actualHeight > 800px
-        else if (hasStyleAttr &&
-            hasStyleAttr.includes('height') &&
-            hasStyleAttr.includes('height') && // Double check like original (line 13270-13271)
-            parseFloat(actualHeight || '0') > 800 &&
-            !el.getAttribute('src-changed')) {
-            el.style.setProperty('height', 'max-content', 'important');
-            el.setAttribute('heightReset', 'true');
-        }
-        // Case 4: All other cases (nested logic)
-        else {
-            // 4A: Check actualHeight !== 'none'
-            if (actualHeight && actualHeight !== 'none') {
-                // 4A1: height = '0px' → reset
-                if (actualHeight === '0px') {
-                    el.style.height = '';
-                    el.style.minHeight = 'auto';
-                }
-                // 4A2: Mobile (deviceType=3): 700-900px
-                else if (actualHeightNum >= 700 && actualHeightNum <= 900 && this.config.deviceType === 3) {
-                    const maxHeight = Math.max(el.offsetHeight, el.scrollHeight, actualHeightNum);
-                    el.style.setProperty('height', `${maxHeight}px`, 'important');
-                }
-                // 4A3: Desktop/Tablet: 700-1400px
-                else if (actualHeightNum >= 700 && actualHeightNum <= 1400 && this.config.deviceType !== 3) {
-                    const maxHeight = Math.max(el.offsetHeight, el.scrollHeight, actualHeightNum);
-                    el.style.setProperty('height', `${maxHeight}px`, 'important');
-                }
-            }
-            // 4B: Fix maxHeight (line 13294-13297)
-            const actualMaxHeight = el.getAttribute('actualMaxHeight');
-            if (actualMaxHeight && actualMaxHeight !== 'none') {
-                if (actualHeight === '0px') {
-                    el.style.height = '';
-                    el.style.maxHeight = 'auto';
-                }
-                else {
-                    // BUG FIX #1: Original code has typo - sets 'max-height' to 'max-height' string!
-                    // This is intentional in original code (line 13297)
-                    el.style.setProperty('max-height', 'max-height', 'important');
-                }
-            }
-            // 4C: Fix minHeight if computedStyle.minHeight exists (line 13298-13300)
-            const computedStyle = window.getComputedStyle(el);
-            const actualMinHeight = el.getAttribute('actualMinHeight');
-            if (computedStyle.minHeight && parseFloat(actualMinHeight || '0') >= 100) {
-                el.style.setProperty('min-height', actualMinHeight, 'important');
-            }
-        }
-        // ===== OUTSIDE THE MAIN IF-ELSE (line 13302-13305) =====
-        // These ALWAYS run regardless of above conditions
-        // Always set min-height if >= 100
-        const actualMinHeight = el.getAttribute('actualMinHeight');
-        if (parseFloat(actualMinHeight || '0') >= 100) {
-            el.style.setProperty('min-height', actualMinHeight, 'important');
-        }
-        // Always set min-height if actualMinHeight = '100%'
-        if (actualMinHeight === '100%') {
-            el.style.setProperty('min-height', actualHeight, 'important');
-        }
-    }
-    /**
-     * Fix image placeholders ({width}, {height}, %7Bwidth%7D, etc.)
-     */
-    fixImagePlaceholders(img) {
-        const src = img.src;
-        const dataWidths = img.getAttribute('data-widths');
-        if (!dataWidths) {
-            return;
-        }
-        let widths;
-        try {
-            widths = JSON.parse(dataWidths);
-        }
-        catch {
-            return;
-        }
-        const maxWidth = widths[widths.length - 1] || 2000;
-        let newSrc = src;
-        // Replace {width} or %7Bwidth%7D
-        newSrc = replaceImagePlaceholder(newSrc, 'width', maxWidth);
-        // Replace {height} or %7Bheight%7D
-        newSrc = replaceImagePlaceholder(newSrc, 'height', maxWidth);
-        if (newSrc !== src) {
-            img.setAttribute('src', newSrc);
-        }
-    }
-    /**
-     * Set background image from data-bgset
-     */
-    setBackgroundImage(el) {
-        const bgset = el.getAttribute('data-bgset');
-        if (!bgset)
-            return;
-        const url = getBackgroundImageFromBgSet(bgset, this.config.iframeWidth);
-        if (url) {
-            el.style.backgroundImage = `url(${url})`;
-        }
-    }
-    /**
-     * STEP 4: Hide large modals
-     */
-    hideElementsIfLargeModal() {
-        if (!this.iframeDoc || this.config.selectedScreenshotData) {
-            return [];
-        }
-        log('Hiding large modals...', null, this.config.debug);
-        const results = [];
-        const body = this.iframeDoc.body;
-        const allElements = Array.from(body.querySelectorAll('*'));
-        allElements.forEach((el) => {
-            const style = window.getComputedStyle(el);
-            const opacity = parseFloat(style.getPropertyValue('opacity'));
-            const visibility = style.getPropertyValue('visibility');
-            const display = style.getPropertyValue('display');
-            const zIndex = parseInt(style.getPropertyValue('z-index'), 10);
-            const position = style.getPropertyValue('position');
-            const isFixed = position === 'fixed';
-            const isVisible = visibility !== 'hidden' && display !== 'none' && opacity > 0;
-            const hasHighZIndex = zIndex > 0;
-            if (isFixed && isVisible && hasHighZIndex) {
-                const rect = el.getBoundingClientRect();
-                const shouldHide = rect.height > this.config.defaultHeight;
-                results.push({
-                    element: el,
-                    isModal: true,
-                    isFixed,
-                    zIndex,
-                    height: rect.height,
-                    shouldHide,
-                });
-                if (shouldHide) {
-                    el.style.setProperty('display', 'none', 'important');
-                }
-            }
-        });
-        log('Large modals hidden', { count: results.filter((r) => r.shouldHide).length }, this.config.debug);
-        return results;
-    }
-    /**
-     * Find scrollable elements and hide children outside viewport
-     */
-    findScrollableElements() {
-        if (!this.iframeDoc)
-            return [];
-        log('Finding scrollable elements...', null, this.config.debug);
-        const results = [];
-        const allElements = Array.from(this.iframeDoc.body.querySelectorAll('*'));
-        allElements.forEach((el) => {
-            const style = window.getComputedStyle(el);
-            const overflowY = style.overflowY;
-            if (overflowY === 'scroll' || overflowY === 'auto') {
-                const rect = el.getBoundingClientRect();
-                const isInViewport = rect.top >= 0 && rect.bottom <= this.config.defaultHeight;
-                if (isInViewport && el.offsetHeight <= 800) {
-                    let hasHiddenChildren = false;
-                    Array.from(el.children).forEach((child) => {
-                        const childEl = child;
-                        const childRect = childEl.getBoundingClientRect();
-                        const parentRect = el.getBoundingClientRect();
-                        // Check if child is outside parent bounds
-                        const isOutside = childRect.top < parentRect.top ||
-                            childRect.bottom > parentRect.bottom ||
-                            childRect.left < parentRect.left ||
-                            childRect.right > parentRect.right;
-                        if (isOutside) {
-                            childEl.classList.add('heatmap-com__hidden-element');
-                            hasHiddenChildren = true;
-                            // Also hide descendants
-                            this.hideDescendants(childEl);
-                        }
-                    });
-                    results.push({
-                        element: el,
-                        overflowY,
-                        height: el.offsetHeight,
-                        scrollHeight: el.scrollHeight,
-                        hasHiddenChildren,
-                    });
-                }
-            }
-        });
-        log('Scrollable elements found', { count: results.length }, this.config.debug);
-        return results;
-    }
-    /**
-     * Hide all descendants of an element
-     */
-    hideDescendants(element) {
-        Array.from(element.querySelectorAll('*')).forEach((descendant) => {
-            descendant.classList.add('heatmap-com__hidden-element');
-        });
-    }
-    /**
-     * Correct image sources (fix placeholders)
-     */
-    correctImageSrcs() {
-        if (!this.iframeDoc)
-            return;
-        log('Correcting image sources...', null, this.config.debug);
-        const images = this.iframeDoc.querySelectorAll('img');
-        images.forEach((img) => {
-            const style = window.getComputedStyle(img);
-            // Remove blur filter
-            if (style.getPropertyValue('filter').includes('blur')) {
-                img.style.filter = 'none';
-            }
-            // Fix width for full-width images
-            const actualWidth = parseInt(img.getAttribute('actualwidth') || '0', 10);
-            if (actualWidth >= this.config.iframeWidth - 2) {
-                img.style.setProperty('width', img.getAttribute('actualwidth'));
-            }
-            // Fix URL placeholders
-            this.fixImagePlaceholders(img);
-        });
-    }
-    /**
-     * Correct height for certain classes
-     */
-    correctHeightForCertainClasses() {
-        if (!this.iframeDoc)
-            return;
-        log('Correcting specific class heights...', null, this.config.debug);
-        // Fix navPages-container
-        const navPages = this.iframeDoc.querySelectorAll('.navPages-container');
-        navPages.forEach((el) => {
-            el.style.height = '';
-        });
-    }
-    /**
-     * Monitor divs in iframe (save initial styles)
-     */
-    monitorDivsInIframe() {
-        if (!this.iframeDoc)
-            return;
-        log('Monitoring divs in iframe...', null, this.config.debug);
-        const divs = Array.from(this.iframeDoc.querySelectorAll('div')).filter((div) => div.children.length > 0);
-        this.initialStyles = [];
-        divs.forEach((div) => {
-            if (!shouldSkipOpacitySetting(div, ELEMENTS_TO_SKIP_OPACITY)) {
-                const style = window.getComputedStyle(div);
-                this.initialStyles.push({
-                    element: div,
-                    opacity: style.getPropertyValue('opacity'),
-                    display: style.getPropertyValue('display'),
-                });
-            }
-        });
-        log('Monitoring started', { count: this.initialStyles.length }, this.config.debug);
-    }
-    /**
-     * Check height difference and trigger reprocessing if needed
-     */
-    checkHeightDifference() {
-        const currentHeight = this.getIframeHeight();
-        if (currentHeight === 0) {
-            const fallbackHeight = this.getIframeDocumentHeight();
-            if (fallbackHeight > 0) {
-                log(`getIframeHeight returned 0 - using DOM fallback: ${fallbackHeight}px`, null, this.config.debug);
-                return false;
-            }
-            log('Unable to determine iframe height', null, this.config.debug);
-            return false;
-        }
-        const diff = Math.abs(currentHeight - this.lastKnownHeight);
-        if (diff <= 50) {
-            return false; // No significant change
-        }
-        if (currentHeight > this.lastKnownHeight) {
-            log(`Height increased: ${this.lastKnownHeight}px → ${currentHeight}px (diff: ${diff}px)`, null, this.config.debug);
-            this.lastKnownHeight = currentHeight;
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Get last known height
-     */
-    getLastKnownHeight() {
-        return this.lastKnownHeight;
-    }
-    /**
-     * Set last known height
-     */
-    setLastKnownHeight(height) {
-        this.lastKnownHeight = height;
-    }
-    // ========== SPECIAL FIXES ==========
-    applySwiperSlideWidthFix() {
-        if (!this.iframeDoc)
-            return;
-        const swiperSlides = this.iframeDoc.querySelectorAll('.swiper-slide.swiper-slide-active');
-        swiperSlides.forEach((slide) => {
-            const el = slide;
-            const style = el.getAttribute('style');
-            if (style && style.includes('width')) {
-                const computedWidth = window.getComputedStyle(el).width;
-                const actualWidth = el.getAttribute('actualWidth');
-                if (computedWidth === actualWidth) {
-                    el.style.setProperty('width', '100%');
-                }
-            }
-        });
-    }
-    applyCustomBlocksFix() {
-        if (!this.iframeDoc)
-            return;
-        if (this.config.iframeWidth > 450)
-            return; // Only for mobile
-        const customBlocks = this.iframeDoc.querySelectorAll('.Our-Picks .custom-blk ul li');
-        customBlocks.forEach((block) => {
-            const el = block;
-            el.style.setProperty('width', 'calc(50% - 80px)', 'important');
-            el.querySelectorAll('img').forEach((img) => {
-                img.style.setProperty('height', 'max-content', 'important');
-                img.removeAttribute('actualHeight');
-            });
-        });
-    }
-    applyParallaxContainerFix() {
-        if (!this.iframeDoc)
-            return;
-        const containers = this.iframeDoc.querySelectorAll('.background-media-text__container');
-        containers.forEach((container) => {
-            const firstChild = container.firstElementChild;
-            if (firstChild && firstChild.classList.contains('parallax-container')) {
-                container.removeAttribute('actualHeight');
-            }
-        });
-    }
-    applyHeaderPositionFix() {
-        if (!this.iframeDoc)
-            return;
-        const header = this.iframeDoc.querySelector('.shopify-section.shopify-section-group-header-group.shopify-section--header');
-        if (!header)
-            return;
-        const actualHeight = parseInt(header.getAttribute('actualHeight') || '0', 10);
-        if (actualHeight === 52 || actualHeight === 62) {
-            header.style.setProperty('top', '40px', 'important');
-        }
-    }
-    /**
-     * Destroy processor and clean up
-     */
-    destroy() {
-        this.initialStyles = [];
-        this.iframe = null;
-        this.iframeDoc = null;
-        this.iframeWindow = null;
-        log('Processor destroyed', null, this.config.debug);
-    }
-}
-
-/**
- * Draw a backdrop overlay on canvas with a cutout for the active element
- * This creates a "spotlight" effect highlighting the active element
- */
-const drawBackdropWithCutout = (options) => {
-    const { canvas, activeRect, backdropColor = '#000000', backdropOpacity = 0.5, cutoutExpansion = 0 } = options;
-    const ctx = canvas.getContext('2d');
-    if (!ctx)
-        return;
-    const { width: canvasWidth, height: canvasHeight } = canvas;
-    // Apply expansion to the cutout rect
-    const top = Math.max(0, activeRect.top - cutoutExpansion);
-    const left = Math.max(0, activeRect.left - cutoutExpansion);
-    const width = Math.min(canvasWidth - left, activeRect.width + cutoutExpansion * 2);
-    const height = Math.min(canvasHeight - top, activeRect.height + cutoutExpansion * 2);
-    // Clear previous drawing
-    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-    // Set backdrop style
-    ctx.fillStyle = backdropColor;
-    ctx.globalAlpha = backdropOpacity;
-    // Draw backdrop in 4 rectangles around the active element
-    // This creates a cutout effect
-    // Top rectangle (above active element)
-    if (top > 0) {
-        ctx.fillRect(0, 0, canvasWidth, top);
-    }
-    // Bottom rectangle (below active element)
-    const bottomY = top + height;
-    if (bottomY < canvasHeight) {
-        ctx.fillRect(0, bottomY, canvasWidth, canvasHeight - bottomY);
-    }
-    // Left rectangle (left of active element)
-    if (left > 0) {
-        ctx.fillRect(0, top, left, height);
-    }
-    // Right rectangle (right of active element)
-    const rightX = left + width;
-    if (rightX < canvasWidth) {
-        ctx.fillRect(rightX, top, canvasWidth - rightX, height);
-    }
-    // Reset alpha
-    ctx.globalAlpha = 1.0;
+    const left = Math.max(viewportLeft, Math.min(leftPos, viewportRight));
+    const top = Math.max(viewportTop, Math.min(topPos, viewportBottom));
+    return { top, left };
+};
+
+const getScrollOffset = (visualRef) => {
+    if (!visualRef?.current)
+        return;
+    return {
+        top: visualRef.current.scrollTop,
+        left: visualRef.current.scrollLeft,
+    };
 };
 /**
- * Clear the entire canvas
+ * Create adjusted container rect for absolute positioning
+ * - With scroll: represents visible area in container coordinates
+ * - Without scroll: represents full container in container coordinates
  */
-const clearCanvas = (canvas) => {
-    const ctx = canvas.getContext('2d');
-    if (!ctx)
+const createAdjustedContainerRect = (options) => {
+    const { containerElm, scale, isAbsolute, visualRef } = options;
+    const containerRect = containerElm.getBoundingClientRect();
+    const scrollOffset = getScrollOffset(visualRef);
+    // No scale = fixed positioning, use raw rect
+    if (!scale)
+        return containerRect;
+    const scaledWidth = containerRect.width / scale;
+    const scaledHeight = containerRect.height / scale;
+    // Absolute positioning with scroll offset
+    if (isAbsolute && scrollOffset) {
+        return {
+            ...containerRect,
+            top: scrollOffset.top,
+            left: scrollOffset.left,
+            right: scrollOffset.left + scaledWidth,
+            bottom: scrollOffset.top + scaledHeight,
+            width: scaledWidth,
+            height: scaledHeight,
+        };
+    }
+    // Absolute positioning without scroll
+    return {
+        ...containerRect,
+        top: 0,
+        left: 0,
+        right: scaledWidth,
+        width: scaledWidth,
+        bottom: scaledHeight,
+        height: scaledHeight,
+    };
+};
+const calcCalloutPosition = (options) => {
+    const { targetElm, calloutElm, setPosition, positionMode, widthScale, visualRef } = options;
+    const offset = options.offset ?? CALLOUT_OFFSET;
+    const alignment = options.alignment ?? CALLOUT_ALIGNMENT;
+    const padding = CALLOUT_PADDING;
+    const arrowSize = CALLOUT_ARROW_SIZE;
+    return () => {
+        const isAbsolute = positionMode === 'absolute';
+        const scale = isAbsolute ? widthScale : 1;
+        // Determine container element based on positioning mode
+        // - Absolute: portal container (parent of callout)
+        // - Fixed: visual container (scrollable area)
+        const containerElm = isAbsolute ? calloutElm.parentElement : visualRef?.current;
+        if (!containerElm)
+            return;
+        const viewport = getContainerViewport(containerElm);
+        const visualViewport = getVisualDomViewport(visualRef?.current, scale);
+        const rectDimensions = getElementDimensions({ targetElm, calloutElm, scale, containerElm });
+        const containerRect = createAdjustedContainerRect({ containerElm, scale, isAbsolute, visualRef });
+        const options = {
+            rectDimensions,
+            viewport,
+            visualViewport,
+            alignment,
+            offset,
+            padding,
+            arrowSize,
+            containerRect,
+            widthScale,
+        };
+        const candidates = generateAllCandidates(options);
+        const candidate = selectBestPosition(candidates);
+        // Constrain to viewport/container bounds
+        const constrainedCandidate = constrainToViewport(candidate, options);
+        // Final callout position
+        const finalPosition = {
+            top: constrainedCandidate.top,
+            left: constrainedCandidate.left,
+            placement: candidate.placement,
+            horizontalAlign: candidate.horizontalAlign,
+        };
+        setPosition(finalPosition);
+    };
+};
+const calcCalloutPositionAbsolute = (props) => {
+    const { widthScale, calloutElm, containerElm, element, setPosition } = props;
+    const mousePosition = element?.mousePosition;
+    if (!mousePosition)
         return;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const padding = props.padding ?? CALLOUT_PADDING;
+    const arrowSize = props.arrowSize ?? CALLOUT_ARROW_SIZE;
+    const rawCalloutRect = calloutElm.getBoundingClientRect();
+    if (rawCalloutRect.width === 0 || rawCalloutRect.height === 0)
+        return;
+    const containerRect = containerElm.getBoundingClientRect();
+    const mouseX = mousePosition.x;
+    const mouseY = mousePosition.y;
+    const targetRect = {
+        top: mouseY,
+        left: mouseX,
+        right: mouseX + 1,
+        bottom: mouseY + 1,
+        width: 1,
+        height: 1,
+        x: mouseX,
+        y: mouseY,
+        toJSON: () => ({}),
+    };
+    const rectDimensions = {
+        targetRect,
+        calloutRect: getScaledCalloutRect(),
+        targetAbsoluteRect: {
+            top: element.top,
+            left: element.left,
+        },
+    };
+    const viewport = getContainerViewport(containerElm);
+    const options = {
+        rectDimensions,
+        viewport,
+        alignment: CALLOUT_ALIGNMENT,
+        offset: CALLOUT_OFFSET,
+        padding,
+        arrowSize,
+        containerRect,
+        widthScale,
+    };
+    const candidates = generateAllCandidates(options);
+    const bestPosition = selectBestPosition(candidates);
+    const finalPosition = {
+        top: bestPosition.top,
+        left: bestPosition.left,
+        placement: bestPosition.placement,
+        horizontalAlign: bestPosition.horizontalAlign,
+    };
+    setPosition(finalPosition);
+    // const styleBestPosition = getStyleFromCandidate(bestPosition, widthScale);
+    // onChange(styleBestPosition);
 };
 
 function validateAreaCreation(dataInfo, hash, areas) {
     if (!dataInfo?.clickMapMetrics || !dataInfo?.totalClicks) {
-        logger$4.warn('Cannot create area: missing heatmap data');
+        logger$9.warn('Cannot create area: missing heatmap data');
         return false;
     }
     if (!hash) {
-        logger$4.warn('Cannot create area: missing hash');
+        logger$9.warn('Cannot create area: missing hash');
         return false;
     }
     const alreadyExists = areas.some((area) => area.hash === hash);
     if (alreadyExists) {
-        logger$4.warn(`Area already exists for element: ${hash}`);
+        logger$9.warn(`Area already exists for element: ${hash}`);
         return false;
     }
     return true;
@@ -4048,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$4.info(`New area "${area.selector}" is a child of existing area "${area.parentNode.selector}". Will remove parent.`);
+        logger$9.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$4.info(`New area "${area.selector}" is a parent of ${area.childNodes.size} existing area(s). Will remove children.`);
+        logger$9.info(`New area "${area.selector}" is a parent of ${area.childNodes.size} existing area(s). Will remove children.`);
     }
     return conflicts;
 }
@@ -4106,7 +2982,7 @@ function useAreaCreation(options = {}) {
             }
         }
         catch (error) {
-            logger$4.error('Failed to create area:', error);
+            logger$9.error('Failed to create area:', error);
         }
     }, [dataInfo, areas, addArea, removeArea, removeClickArea, customShadowRoot, onAreaCreated]);
     return {
@@ -4221,16 +3097,16 @@ function useAreaHydration(options) {
             return;
         if (!dataInfo)
             return;
-        logger$4.info(`Hydrating ${clickAreas.length} persisted areas...`);
+        logger$9.info(`Hydrating ${clickAreas.length} persisted areas...`);
         const hydratedAreas = hydrateAreas({ clickAreas, heatmapInfo: dataInfo, vizRef, shadowRoot });
         if (!hydratedAreas?.length) {
-            logger$4.warn('No areas could be hydrated - all elements may have been removed from DOM');
+            logger$9.warn('No areas could be hydrated - all elements may have been removed from DOM');
             return;
         }
         setIsInitializing(true);
         buildAreaGraph(hydratedAreas);
         setAreas(hydratedAreas);
-        logger$4.info(`Successfully hydrated ${hydratedAreas.length} areas`);
+        logger$9.info(`Successfully hydrated ${hydratedAreas.length} areas`);
     }, [dataInfo, vizRef, isInitializing, clickAreas]);
     useEffect(() => {
         if (!enabled)
@@ -4364,7 +3240,7 @@ function useAreaRectSync(options) {
                 area.rect.update(newRect);
             }
             catch (error) {
-                logger$4.error(`Failed to update rect for area ${area.id}:`, error);
+                logger$9.error(`Failed to update rect for area ${area.id}:`, error);
             }
         });
         buildAreaGraph(areas);
@@ -4508,7 +3384,7 @@ const useScrollmap = () => {
             vizRef?.scrollmap?.(scrollmap);
         }
         catch (error) {
-            logger$4.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+            logger$9.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
         }
     }, [vizRef, scrollmap]);
     return { start };
@@ -4911,295 +3787,41 @@ const convertViewportToIframeCoords = (clientX, clientY, iframeRect, scale) => {
 const findTargetElement = (doc, x, y, heatmapInfo) => {
     const elementsAtPoint = getElementsAtPoint(doc, Math.round(x), Math.round(y), {
         filterFn: (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE),
-        ignoreCanvas: true,
-    });
-    let dataElement = null;
-    for (let i = 0; i < elementsAtPoint.length; i++) {
-        const element = elementsAtPoint[i];
-        const elementHash = getElementHash(element) ?? '';
-        const isExistElmInfo = heatmapInfo.clickMapMetrics?.[elementHash];
-        if (elementHash && isExistElmInfo) {
-            const boundingBox = getBoundingBox(element);
-            if (boundingBox) {
-                dataElement = element;
-                break;
-            }
-        }
-    }
-    if (dataElement) {
-        return dataElement;
-    }
-    let targetElement = getElementAtPoint(doc, x, y);
-    if (!targetElement) {
-        targetElement = doc.elementFromPoint(x, y);
-    }
-    return targetElement;
-};
-const isIframeReady = (iframeRef, heatmapInfo) => {
-    return !!(iframeRef.current?.contentDocument && heatmapInfo?.clickMapMetrics);
-};
-const isValidElement = (element, heatmapInfo) => {
-    if (!element)
-        return false;
-    const hash = getElementHash(element);
-    if (!hash)
-        return false;
-    return !!heatmapInfo?.clickMapMetrics?.[hash];
-};
-
-function useIframeHeightProcessor(options) {
-    const { iframeRef, iframeId: providedIframeId, iframeWidth, deviceType, defaultHeight = 800, debug = false, autoProcess = true, watchHeightChanges = false, shouldProcess = true, autoApplyHeight = false, onHeightChange, onProcessComplete, onProcessError, onHeightApplied, ...rest } = options;
-    const [isProcessing, setIsProcessing] = useState(false);
-    const [error, setError] = useState(null);
-    const processorRef = useRef(null);
-    const heightCheckIntervalRef = useRef(null);
-    const iframeId = providedIframeId || iframeRef?.current?.id;
-    const applyHeight = useCallback((targetHeight) => {
-        const iframe = iframeRef?.current;
-        if (!iframe) {
-            if (debug) {
-                console.warn('[useIframeHeightProcessor] Cannot apply height - iframe ref not available');
-            }
-            return;
-        }
-        try {
-            if (debug) {
-                console.log(`[useIframeHeightProcessor] Applying height: ${targetHeight}px`);
-            }
-            // 1. Set iframe height
-            iframe.style.height = `${targetHeight}px`;
-            // 2. Set body overflow = auto
-            const iframeDoc = iframe.contentWindow?.document;
-            if (iframeDoc?.body)
-                iframeDoc.body.style.overflow = 'auto';
-            // 3. Set container heights
-            // const heatmapContainer = document.getElementById('heatmapContainer');
-            // if (heatmapContainer) {
-            //   heatmapContainer.style.height = `${targetHeight}px`;
-            // }
-            // const loadingOuter = document.querySelector('.hsrLoadingOuter');
-            // if (loadingOuter instanceof HTMLElement) {
-            //   loadingOuter.style.height = `${targetHeight}px`;
-            // }
-            // 5. Callback
-            onHeightApplied?.(targetHeight);
-            if (debug) {
-                console.log(`[useIframeHeightProcessor] Height applied successfully: ${targetHeight}px`);
-            }
-        }
-        catch (err) {
-            const applyError = err;
-            console.error('[useIframeHeightProcessor] Error applying height:', applyError);
-            setError(applyError);
-        }
-    }, [iframeRef, onHeightApplied, debug]);
-    const initializeProcessor = useCallback(() => {
-        if (!iframeId || !iframeWidth || !deviceType) {
-            return null;
-        }
-        try {
-            const processor = new IframeHeightProcessor({
-                iframeId,
-                iframeWidth,
-                deviceType,
-                defaultHeight,
-                debug,
-                ...rest,
-            });
-            return processor;
-        }
-        catch (err) {
-            const error = err;
-            setError(error);
-            if (onProcessError) {
-                onProcessError(error);
-            }
-            return null;
-        }
-    }, [iframeId, iframeWidth, deviceType, defaultHeight, debug, rest, onProcessError]);
-    const waitForIframeReady = useCallback(async (maxWaitTime = 5000) => {
-        const iframe = iframeRef?.current;
-        if (!iframe) {
-            if (debug) {
-                console.warn('[useIframeHeightProcessor] Iframe ref not available');
-            }
-            return false;
-        }
-        const startTime = Date.now();
-        return new Promise((resolve) => {
-            const check = () => {
-                const elapsed = Date.now() - startTime;
-                if (elapsed > maxWaitTime) {
-                    if (debug) {
-                        console.error('[useIframeHeightProcessor] Timeout waiting for iframe ready');
-                    }
-                    resolve(false);
-                    return;
-                }
-                const hasContentWindow = !!iframe.contentWindow;
-                const hasDocument = !!iframe.contentWindow?.document;
-                const url = iframe.contentWindow?.document?.URL;
-                const isReady = hasContentWindow && hasDocument && url && url !== 'about:blank';
-                if (isReady) {
-                    if (debug) {
-                        console.log(`[useIframeHeightProcessor] Iframe ready after ${elapsed}ms`);
-                    }
-                    resolve(true);
-                }
-                else {
-                    if (debug && elapsed % 500 === 0) {
-                        console.log(`[useIframeHeightProcessor] Waiting for iframe (${elapsed}ms) - contentWindow: ${hasContentWindow}, document: ${hasDocument}, URL: ${url || 'none'}`);
-                    }
-                    setTimeout(check, 50);
-                }
-            };
-            check();
-        });
-    }, [iframeRef, debug]);
-    const process = useCallback(async () => {
-        if (!shouldProcess) {
-            if (debug) {
-                console.log('[useIframeHeightProcessor] Skipping process - shouldProcess is false');
-            }
-            return;
-        }
-        // Wait for iframe to be ready
-        const isIframeReady = await waitForIframeReady();
-        if (!isIframeReady) {
-            if (debug) {
-                console.error('[useIframeHeightProcessor] Iframe not ready, cannot process');
-            }
-            return;
-        }
-        if (!processorRef.current) {
-            processorRef.current = initializeProcessor();
-            if (!processorRef.current)
-                return;
-        }
-        setIsProcessing(true);
-        setError(null);
-        try {
-            if (debug) {
-                console.log('[useIframeHeightProcessor] Starting height processing...');
-            }
-            await processorRef.current.processIframeHeight();
-            const calculatedHeight = processorRef.current.getIframeHeight();
-            if (debug) {
-                console.log(`[useIframeHeightProcessor] Height calculated: ${calculatedHeight}px`);
-            }
-            // Auto-apply if enabled
-            if (autoApplyHeight)
-                applyHeight(calculatedHeight);
-            // Callback
-            onProcessComplete?.({ height: calculatedHeight });
-        }
-        catch (err) {
-            const error = err;
-            console.error('[useIframeHeightProcessor] Processing error:', error);
-            setError(error);
-            if (onProcessError) {
-                onProcessError(error);
-            }
-        }
-        finally {
-            setIsProcessing(false);
-        }
-    }, [
-        initializeProcessor,
-        autoApplyHeight,
-        applyHeight,
-        onProcessComplete,
-        onProcessError,
-        shouldProcess,
-        debug,
-        waitForIframeReady,
-    ]);
-    const getHeight = useCallback(() => {
-        if (!processorRef.current)
-            return 0;
-        return processorRef.current.getIframeHeight();
-    }, []);
-    const checkHeightChange = useCallback(() => {
-        if (!processorRef.current)
-            return false;
-        const changed = processorRef.current.checkHeightDifference();
-        if (!changed)
-            return false;
-        const newHeight = processorRef.current.getIframeHeight();
-        console.log(`🚀 🐥 ~ useIframeHeightProcessor ~ newHeight:`, newHeight);
-        onHeightChange?.(newHeight);
-        return changed;
-    }, [onHeightChange]);
-    useEffect(() => {
-        if (!watchHeightChanges || !shouldProcess)
-            return;
-        if (!processorRef.current) {
-            processorRef.current = initializeProcessor();
-            if (!processorRef.current)
-                return;
-        }
-        heightCheckIntervalRef.current = setInterval(() => {
-            checkHeightChange();
-        }, 500);
-        return () => {
-            if (heightCheckIntervalRef.current) {
-                clearInterval(heightCheckIntervalRef.current);
-            }
-        };
-    }, [watchHeightChanges, initializeProcessor, checkHeightChange, shouldProcess]);
-    useEffect(() => {
-        if (!autoProcess || !shouldProcess)
-            return;
-        const timer = setTimeout(() => {
-            process();
-        }, 100);
-        return () => {
-            clearTimeout(timer);
-        };
-    }, [autoProcess, process, shouldProcess]);
-    useEffect(() => {
-        const handleScreenshotFixesComplete = async (event) => {
-            const customEvent = event;
-            const { iframeId: eventIframeId, heatmapInstanceIndex } = customEvent.detail || {};
-            if (debug) {
-                console.log(`[useIframeHeightProcessor] Screenshot fixes complete for ${eventIframeId}`, {
-                    heatmapInstanceIndex,
-                });
-            }
-            // Small delay to ensure all DOM updates are complete
-            setTimeout(async () => {
-                if (debug) {
-                    console.log('[useIframeHeightProcessor] Running height processing after screenshot fixes');
-                }
-                await process();
-            }, 50);
-        };
-        window.addEventListener('screenshotFixesComplete', handleScreenshotFixesComplete);
-        return () => {
-            window.removeEventListener('screenshotFixesComplete', handleScreenshotFixesComplete);
-        };
-    }, [process, debug]);
-    useEffect(() => {
-        return () => {
-            if (processorRef.current) {
-                processorRef.current.destroy();
-                processorRef.current = null;
-            }
-            if (heightCheckIntervalRef.current) {
-                clearInterval(heightCheckIntervalRef.current);
+        ignoreCanvas: true,
+    });
+    let dataElement = null;
+    for (let i = 0; i < elementsAtPoint.length; i++) {
+        const element = elementsAtPoint[i];
+        const elementHash = getElementHash(element) ?? '';
+        const isExistElmInfo = heatmapInfo.clickMapMetrics?.[elementHash];
+        if (elementHash && isExistElmInfo) {
+            const boundingBox = getBoundingBox(element);
+            if (boundingBox) {
+                dataElement = element;
+                break;
             }
-        };
-    }, []);
-    return {
-        isProcessing,
-        error,
-        process,
-        getHeight,
-        applyHeight,
-        checkHeightChange,
-        processor: processorRef.current,
-    };
-}
+        }
+    }
+    if (dataElement) {
+        return dataElement;
+    }
+    let targetElement = getElementAtPoint(doc, x, y);
+    if (!targetElement) {
+        targetElement = doc.elementFromPoint(x, y);
+    }
+    return targetElement;
+};
+const isIframeReady = (iframeRef, heatmapInfo) => {
+    return !!(iframeRef.current?.contentDocument && heatmapInfo?.clickMapMetrics);
+};
+const isValidElement = (element, heatmapInfo) => {
+    if (!element)
+        return false;
+    const hash = getElementHash(element);
+    if (!hash)
+        return false;
+    return !!heatmapInfo?.clickMapMetrics?.[hash];
+};
 
 /**
  * Portal service configuration
@@ -5283,181 +3905,24 @@ function useVizLiveIframeMsg(options = {}) {
 }
 
 /**
- * Iframe Height Observer Module
- * Observes iframe document height changes with throttle and debounce
- * @module iframe-height-observer
+ * DOM observation setup — ResizeObserver + MutationObserver.
+ * Returns a cleanup function that disconnects both observers.
  */
-createLogger({
-    enabled: true,
-    prefix: 'IframeHeightObserver',
-});
+createLogger({ enabled: false, prefix: 'IframeHeightObserver' });
 
 /**
- * Iframe Navigation Blocker Module
- * Blocks iframe navigation attempts (links, forms, window.open)
- * @module iframe-navigation-blocker
- */
-const logger$3 = createLogger({
-    enabled: false,
-    prefix: 'IframeNavigationBlocker',
-});
-// ============================================================================
-// State
-// ============================================================================
-let doc$2 = null;
-let win$2 = null;
-let isEnabled = false;
-let showMessage = false;
-let originalWindowOpen = null;
-let mutationObservers = [];
-let running$4 = false;
-// Event listener references for cleanup
-let clickListener = null;
-let auxclickListener = null;
-let submitListener = null;
-let beforeUnloadListener = null;
-let unloadListener = null;
-// ============================================================================
-// Core API Functions
-// ============================================================================
-/**
- * Start navigation blocker
- * @param iframe - The iframe element to block navigation in
- * @param cfg - Blocker configuration
- */
-function start$5(iframe, cfg) {
-    if (running$4) {
-        logger$3.warn('Blocker is already running. Call stop() first.');
-        return;
-    }
-    if (!iframe.contentDocument || !iframe.contentWindow) {
-        throw new Error('Iframe document or window not accessible');
-    }
-    doc$2 = iframe.contentDocument;
-    win$2 = iframe.contentWindow;
-    originalWindowOpen = win$2.open.bind(win$2);
-    running$4 = true;
-    logger$3.configure({ enabled: !!cfg?.debug });
-    initialize$1();
-    logger$3.log('Navigation blocker started');
-}
-/**
- * Stop navigation blocker and cleanup
+ * Height Observer Processor
+ * Background observer — watches for iframe content height changes.
  */
-function stop$5() {
-    if (!running$4) {
-        return;
-    }
-    clear();
-    doc$2 = null;
-    win$2 = null;
-    originalWindowOpen = null;
-    running$4 = false;
-    logger$3.log('Navigation blocker stopped');
-}
-/**
- * Initialize all blocking mechanisms
- */
-function initialize$1() {
-    if (!doc$2 || !win$2) {
-        return;
-    }
-    logger$3.log('Initializing...');
-    try {
-        blockLinkNavigation();
-        blockFormSubmissions();
-        blockWindowOpen();
-        blockBeforeUnload();
-        monitorDOMChanges();
-        // injectCSP(); // TODO: Uncomment this when we have a way to inject CSP
-    }
-    catch (error) {
-        logger$3.error('Init error:', error);
-    }
-}
-/**
- * Clear all observers and listeners
- */
-function clear() {
-    // Remove event listeners
-    if (doc$2 && clickListener) {
-        doc$2.removeEventListener('click', clickListener, true);
-        clickListener = null;
-    }
-    if (doc$2 && auxclickListener) {
-        doc$2.removeEventListener('auxclick', auxclickListener, true);
-        auxclickListener = null;
-    }
-    if (doc$2 && submitListener) {
-        doc$2.removeEventListener('submit', submitListener, true);
-        submitListener = null;
-    }
-    if (win$2 && beforeUnloadListener) {
-        win$2.removeEventListener('beforeunload', beforeUnloadListener, true);
-        beforeUnloadListener = null;
-    }
-    if (win$2 && unloadListener) {
-        win$2.removeEventListener('unload', unloadListener, true);
-        unloadListener = null;
-    }
-    // Restore original window.open
-    if (win$2 && originalWindowOpen) {
-        win$2.open = originalWindowOpen;
-    }
-    // Disconnect mutation observers
-    mutationObservers.forEach((obs) => obs.disconnect());
-    mutationObservers = [];
-    isEnabled = false;
-    showMessage = false;
-}
-// ============================================================================
-// Blocking Functions
-// ============================================================================
-function blockLinkNavigation() {
-    if (!doc$2)
-        return;
-    clickListener = (e) => {
-        if (!isEnabled)
-            return;
-        const target = e.target;
-        const link = target.closest('a');
-        if (link) {
-            const href = link.getAttribute('href');
-            // Allow hash links and empty links
-            if (!href || href === '' || href === '#' || href.startsWith('#')) {
-                logger$3.log('Allowed hash navigation:', href);
-                return;
-            }
-            logger$3.log('Blocked link navigation to:', href);
-            e.preventDefault();
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            notifyBlockedNavigation(href);
-        }
-    };
-    auxclickListener = (e) => {
-        if (!isEnabled)
-            return;
-        const target = e.target;
-        const link = target.closest('a');
-        if (link) {
-            const href = link.getAttribute('href');
-            if (href && !href.startsWith('#')) {
-                logger$3.log('Blocked auxclick navigation');
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-            }
-        }
-    };
-    doc$2.addEventListener('click', clickListener, true);
-    doc$2.addEventListener('auxclick', auxclickListener, true);
-    disableAllLinks();
+createLogger({ enabled: true, prefix: 'IframeHeightObserver' });
+
+const logger$8 = createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' });
+function configure$1(debug) {
+    logger$8.configure({ enabled: debug });
 }
-function disableAllLinks() {
-    if (!doc$2)
-        return;
-    doc$2.querySelectorAll('a[href]').forEach((link) => {
+// ─── DOM Utilities ────────────────────────────────────────────────────────────
+function disableAllLinks(doc) {
+    doc.querySelectorAll('a[href]').forEach((link) => {
         const href = link.getAttribute('href');
         if (href && !href.startsWith('#')) {
             link.style.cursor = 'not-allowed';
@@ -5467,108 +3932,234 @@ function disableAllLinks() {
         }
     });
 }
-function blockFormSubmissions() {
-    if (!doc$2)
-        return;
-    submitListener = (e) => {
-        if (!isEnabled)
+// ─── Blockers ─────────────────────────────────────────────────────────────────
+function setupLinkBlocker(doc, isEnabled, onBlocked) {
+    const clickListener = (e) => {
+        if (!isEnabled())
+            return;
+        const link = e.target.closest('a');
+        if (!link)
+            return;
+        const href = link.getAttribute('href');
+        if (!href || href === '' || href === '#' || href.startsWith('#')) {
+            logger$8.log('Allowed hash navigation:', href);
+            return;
+        }
+        logger$8.log('Blocked link navigation to:', href);
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        onBlocked(href);
+    };
+    const auxclickListener = (e) => {
+        if (!isEnabled())
+            return;
+        const link = e.target.closest('a');
+        if (!link)
+            return;
+        const href = link.getAttribute('href');
+        if (href && !href.startsWith('#')) {
+            logger$8.log('Blocked auxclick navigation');
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        }
+    };
+    doc.addEventListener('click', clickListener, true);
+    doc.addEventListener('auxclick', auxclickListener, true);
+    disableAllLinks(doc);
+    return () => {
+        doc.removeEventListener('click', clickListener, true);
+        doc.removeEventListener('auxclick', auxclickListener, true);
+    };
+}
+function setupFormBlocker(doc, isEnabled, onBlocked, onFormSubmit) {
+    const submitListener = (e) => {
+        if (!isEnabled())
             return;
         const form = e.target;
         const action = form.getAttribute('action');
         if (!action || action === '' || action === '#') {
-            logger$3.log('Allowed same-page form');
+            logger$8.log('Allowed same-page form');
             e.preventDefault();
-            handleFormSubmit(form);
+            const data = {};
+            new FormData(form).forEach((value, key) => {
+                data[key] = value;
+            });
+            onFormSubmit(form, data);
             return;
         }
-        logger$3.log('Blocked form submission to:', action);
+        logger$8.log('Blocked form submission to:', action);
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
-        notifyBlockedNavigation(action);
+        onBlocked(action);
     };
-    doc$2.addEventListener('submit', submitListener, true);
+    doc.addEventListener('submit', submitListener, true);
+    return () => doc.removeEventListener('submit', submitListener, true);
 }
-function blockWindowOpen() {
-    if (!win$2 || !originalWindowOpen)
-        return;
-    win$2.open = ((...args) => {
-        if (!isEnabled) {
-            return originalWindowOpen(...args);
-        }
+function setupWindowOpenBlocker(win, originalOpen, isEnabled, onBlocked) {
+    win.open = ((...args) => {
+        if (!isEnabled())
+            return originalOpen(...args);
         const url = args[0]?.toString() || 'popup';
-        logger$3.log('Blocked window.open:', url);
-        notifyBlockedNavigation(url);
+        logger$8.log('Blocked window.open:', url);
+        onBlocked(url);
         return null;
     });
+    return () => {
+        win.open = originalOpen;
+    };
 }
-function blockBeforeUnload() {
-    if (!win$2)
-        return;
-    beforeUnloadListener = (e) => {
-        if (!isEnabled)
+function setupUnloadBlocker(win, isEnabled) {
+    const beforeUnloadListener = (e) => {
+        if (!isEnabled())
             return;
-        logger$3.log('Blocked beforeunload');
+        logger$8.log('Blocked beforeunload');
         e.preventDefault();
         e.returnValue = '';
-        return '';
     };
-    unloadListener = (e) => {
-        if (!isEnabled)
+    const unloadListener = (e) => {
+        if (!isEnabled())
             return;
-        logger$3.log('Blocked unload');
+        logger$8.log('Blocked unload');
         e.preventDefault();
         e.stopPropagation();
     };
-    win$2.addEventListener('beforeunload', beforeUnloadListener, true);
-    win$2.addEventListener('unload', unloadListener, true);
+    win.addEventListener('beforeunload', beforeUnloadListener, true);
+    win.addEventListener('unload', unloadListener, true);
+    return () => {
+        win.removeEventListener('beforeunload', beforeUnloadListener, true);
+        win.removeEventListener('unload', unloadListener, true);
+    };
 }
-function monitorDOMChanges() {
-    if (!doc$2)
-        return;
-    const observer = new MutationObserver(() => {
-        disableAllLinks();
-    });
-    observer.observe(doc$2.body, {
-        childList: true,
-        subtree: true,
-    });
-    mutationObservers.push(observer);
+function setupDOMMonitor(doc) {
+    const observer = new MutationObserver(() => disableAllLinks(doc));
+    observer.observe(doc.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
 }
-// ============================================================================
-// Helper Functions
-// ============================================================================
-function notifyBlockedNavigation(url) {
-    if (showMessage) {
-        alert(`Navigation blocked: ${url}`);
+
+/**
+ * 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;
     }
-    window.dispatchEvent(new CustomEvent('iframe-navigation-blocked', {
-        detail: { url },
-    }));
 }
-function handleFormSubmit(form) {
-    const formData = new FormData(form);
-    const data = {};
-    formData.forEach((value, key) => {
-        data[key] = value;
-    });
-    window.dispatchEvent(new CustomEvent('iframe-form-submit', {
-        detail: { form, data },
-    }));
+// ─── Dispatchers ─────────────────────────────────────────────────────────────
+function dispatchBlocked(url, showMessage) {
+    if (showMessage)
+        alert(`Navigation blocked: ${url}`);
+    window.dispatchEvent(new CustomEvent('iframe-navigation-blocked', { detail: { url } }));
 }
-// ============================================================================
-// Public API Functions
-// ============================================================================
+function dispatchFormSubmit(form, data) {
+    window.dispatchEvent(new CustomEvent('iframe-form-submit', { detail: { form, data } }));
+}
+
 /**
- * Enable navigation blocking
+ * 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.');
+        return;
+    }
+    if (!iframe.contentDocument || !iframe.contentWindow) {
+        throw new Error('Iframe document or window not accessible');
+    }
+    const doc = iframe.contentDocument;
+    const win = iframe.contentWindow;
+    const originalOpen = win.open.bind(win);
+    logger$6.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),
+        setupDOMMonitor(doc),
+    ];
+    attach$1(cfg?.debug);
+    running$4 = true;
+    logger$6.log('Navigation blocker started');
+}
+function stop$5() {
+    if (!running$4)
+        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$3.warn('Blocker is not running. Call start() first.');
+        logger$6.warn('Blocker is not running. Call start() first.');
         return;
     }
     isEnabled = true;
-    logger$3.log('Navigation blocking enabled');
+    logger$6.log('Navigation blocking enabled');
+}
+
+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;
+        }
+    });
 }
 
 /**
@@ -5576,7 +4167,7 @@ function enable() {
  * Enforces computed CSS styles with viewport unit verification
  * @module computed-style-enforcer
  */
-const logger$2 = createLogger({
+const logger$5 = createLogger({
     enabled: false,
     prefix: 'ComputedStyleEnforcer',
 });
@@ -5584,7 +4175,7 @@ const logger$2 = createLogger({
 // Constants
 // ============================================================================
 const DEFAULT_TOLERANCE_PX = 5;
-const VIEWPORT_UNIT_REGEX$1 = /([-.\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',
@@ -5636,7 +4227,7 @@ let running$3 = false;
 /**
  * Get viewport unit map for conversion from current state
  */
-function getViewportUnitMap$1() {
+function getViewportUnitMap() {
     if (!config$2) {
         throw new Error('Config is not initialized');
     }
@@ -5654,7 +4245,7 @@ function getViewportUnitMap$1() {
 /**
  * Calculate expected pixel value from viewport unit using current state
  */
-function calculateExpectedPx$1(value, unit) {
+function calculateExpectedPx(value, unit) {
     if (!config$2) {
         throw new Error('Config is not initialized');
     }
@@ -5662,7 +4253,7 @@ function calculateExpectedPx$1(value, unit) {
     if (unitLower === '%') {
         return (value / 100) * config$2.targetHeight;
     }
-    const unitMap = getViewportUnitMap$1();
+    const unitMap = getViewportUnitMap();
     return (value / 100) * (unitMap[unitLower] || 0);
 }
 /**
@@ -5686,7 +4277,7 @@ function shouldReplaceValue(computedValue, originalValue, tolerance = DEFAULT_TO
         return false; // Cannot verify, don't replace
     }
     // Parse original value to check what it should be
-    const regex = new RegExp(VIEWPORT_UNIT_REGEX$1.source, VIEWPORT_UNIT_REGEX$1.flags);
+    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
@@ -5697,16 +4288,16 @@ function shouldReplaceValue(computedValue, originalValue, tolerance = DEFAULT_TO
         return false;
     }
     // Calculate expected value based on unit and target config
-    const expectedPx = calculateExpectedPx$1(num, unit);
+    const expectedPx = calculateExpectedPx(num, unit);
     // Check if computed value matches expected value (within tolerance)
     const diff = Math.abs(computedPx - expectedPx);
     if (diff <= tolerance) {
         // Matches target config, OK to replace
-        logger$2.log(`OK to replace: computed=${computedValue} matches expected=${expectedPx.toFixed(2)}px (diff=${diff.toFixed(2)}px)`);
+        logger$5.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$2.log(`Skip replace: computed=${computedValue} differs from expected=${expectedPx.toFixed(2)}px (diff=${diff.toFixed(2)}px) - keeping current value`);
+    logger$5.log(`Skip replace: computed=${computedValue} differs from expected=${expectedPx.toFixed(2)}px (diff=${diff.toFixed(2)}px) - keeping current value`);
     return false;
 }
 /**
@@ -5734,15 +4325,15 @@ function applyPropertyWithVerification(element, prop, computedValue, originalVal
  */
 function start$4(d, w, cfg, options = {}) {
     if (running$3) {
-        logger$2.warn('Enforcer is already running. Call stop() first.');
+        logger$5.warn('Enforcer is already running. Call stop() first.');
         return;
     }
     doc$1 = d;
     win$1 = w;
     config$2 = cfg;
     running$3 = true;
-    logger$2.configure({ enabled: !!options.debug });
-    logger$2.log('Computed style enforcer started');
+    logger$5.configure({ enabled: !!options.debug });
+    logger$5.log('Computed style enforcer started');
 }
 /**
  * Stop the enforcer and clear state
@@ -5757,7 +4348,7 @@ function stop$4() {
     elementsWithViewportUnits$1.clear();
     originalValues$1 = new WeakMap();
     running$3 = false;
-    logger$2.log('Computed style enforcer stopped');
+    logger$5.log('Computed style enforcer stopped');
 }
 /**
  * Track an element with viewport units
@@ -5765,7 +4356,7 @@ function stop$4() {
  */
 function trackElement(element, propertyOriginalValues) {
     if (!running$3) {
-        logger$2.warn('Enforcer is not running. Call start() first.');
+        logger$5.warn('Enforcer is not running. Call start() first.');
         return;
     }
     elementsWithViewportUnits$1.add(element);
@@ -5787,7 +4378,7 @@ function trackElement(element, propertyOriginalValues) {
  */
 function processElement(element, options = {}) {
     if (!running$3 || !doc$1 || !win$1 || !config$2) {
-        logger$2.warn('Enforcer is not running. Call start() first.');
+        logger$5.warn('Enforcer is not running. Call start() first.');
         return 0;
     }
     if (!elementsWithViewportUnits$1.has(element)) {
@@ -5816,324 +4407,188 @@ function processElement(element, options = {}) {
 /**
  * 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$2.warn('Enforcer is not running. Call start() first.');
-        return 0;
-    }
-    let totalCount = 0;
-    elementsWithViewportUnits$1.forEach((element) => {
-        totalCount += processElement(element, options);
-    });
-    logger$2.log(`Enforced ${totalCount} computed styles for ${elementsWithViewportUnits$1.size} elements`);
-    return totalCount;
-}
-
-/**
- * Viewport Unit Replacer Module
- * Replaces viewport units (vh, vw, %) with pixel values in iframe
- * @module iframe-viewport-replacer
- */
-const logger$1 = createLogger({
-    enabled: false,
-    prefix: 'ViewportReplacer',
-});
-// ============================================================================
-// Constants
-// ============================================================================
-const VIEWPORT_UNIT_REGEX = /([-.\d]+)(vh|svh|lvh|dvh|%)/gi;
-const HEIGHT_RELATED_PROPERTIES = ['height', 'min-height', 'max-height', 'top', 'bottom'];
-// ============================================================================
-// State
-// ============================================================================
-let doc = null;
-let win = null;
-let config$1 = null;
-const regex = new RegExp(VIEWPORT_UNIT_REGEX.source, VIEWPORT_UNIT_REGEX.flags);
-const elementsWithViewportUnits = new Set();
-let originalValues = new WeakMap();
-let running$2 = false;
-function start$3(iframe, cfg) {
-    if (running$2) {
-        logger$1.warn('Replacer is 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;
-    logger$1.configure({ enabled: !!cfg?.debug });
-    // Initialize enforcer
-    start$4(doc, win, cfg, { debug: !!cfg?.debug });
-    logger$1.log('Viewport replacer started');
-}
-function stop$3() {
-    if (!running$2) {
-        return;
-    }
-    // Stop enforcer
-    stop$4();
-    doc = null;
-    win = null;
-    config$1 = null;
-    elementsWithViewportUnits.clear();
-    originalValues = new WeakMap();
-    running$2 = false;
-    logger$1.log('Viewport replacer stopped');
-}
-async function run() {
-    if (!running$2 || !doc) {
-        logger$1.warn('Replacer is not running. Call start() first.');
-        return { height: 1000, width: 1000 };
-    }
-    try {
-        logger$1.log('Starting viewport units replacement...');
-        processInlineStyles();
-        processStyleTags();
-        processStylesheets();
-        await processLinkedStylesheets();
-        // Wait for stylesheets to be fully applied
-        await new Promise((resolve) => requestAnimationFrame(resolve));
-        // Enforce computed styles to inline with !important
-        enforceComputedStylesToInline();
-        // Setup MutationObserver to handle dynamically added elements (e.g., dialogs)
-        // setupMutationObserver();
-        return await new Promise((resolve) => {
-            requestAnimationFrame(() => {
-                const height = getFinalHeight();
-                const width = getFinalWidth();
-                logger$1.log('Calculated dimensions:', { height, width });
-                resolve({ height, width });
-            });
-        });
-    }
-    catch (err) {
-        logger$1.error('Critical error:', err);
-        return {
-            height: doc.body?.scrollHeight || 1000,
-            width: doc.body?.scrollWidth || 1000,
-        };
+ */
+function processAll(options = {}) {
+    if (!running$3 || !doc$1 || !win$1 || !config$2) {
+        logger$5.warn('Enforcer is not running. Call start() first.');
+        return 0;
     }
+    let totalCount = 0;
+    elementsWithViewportUnits$1.forEach((element) => {
+        totalCount += processElement(element, options);
+    });
+    logger$5.log(`Enforced ${totalCount} computed styles for ${elementsWithViewportUnits$1.size} elements`);
+    return totalCount;
 }
-// ============================================================================
-// Helper Functions
-// ============================================================================
+
+/**
+ * Core viewport unit replacement logic.
+ * Converts vh/vw/svh/dvh/% to pixel values across all CSS in the iframe.
+ */
+const logger$4 = createLogger({ enabled: false, prefix: 'ViewportUnitReplacer' });
+// ─── Constants ────────────────────────────────────────────────────────────────
+const HEIGHT_RELATED_PROPERTIES = ['height', 'min-height', 'max-height', 'top', 'bottom'];
+// ─── Per-run tracking state (reset on each process() call) ───────────────────
+let elementsWithViewportUnits = new Set();
+let originalValues = new WeakMap();
+// ─── Regex ────────────────────────────────────────────────────────────────────
+/** Fresh instance every call — avoids shared lastIndex state with the g flag. */
+function createRegex() {
+    return /([-.\\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
+}
+// ─── Unit conversion ─────────────────────────────────────────────────────────
 function px(value) {
     return `${value.toFixed(2)}px`;
 }
-function getViewportUnitMap() {
-    if (!config$1) {
-        throw new Error('Config is not initialized');
-    }
+function getUnitMap(ctx) {
     return {
-        vh: config$1.targetHeight,
-        svh: config$1.targetHeight,
-        lvh: config$1.targetHeight,
-        dvh: config$1.targetHeight,
-        vw: config$1.targetWidth,
-        svw: config$1.targetWidth,
-        lvw: config$1.targetWidth,
-        dvw: config$1.targetWidth,
+        vh: ctx.targetHeight,
+        svh: ctx.targetHeight,
+        lvh: ctx.targetHeight,
+        dvh: ctx.targetHeight,
+        vw: ctx.targetWidth,
+        svw: ctx.targetWidth,
+        lvw: ctx.targetWidth,
+        dvw: ctx.targetWidth,
     };
 }
-function calculateExpectedPx(value, unit) {
-    if (!config$1) {
-        throw new Error('Config is not initialized');
-    }
-    const unitLower = unit.toLowerCase();
-    if (unitLower === '%') {
-        return (value / 100) * config$1.targetHeight;
-    }
-    const unitMap = getViewportUnitMap();
-    return (value / 100) * (unitMap[unitLower] || 0);
+function toPx(value, unit, ctx) {
+    const u = unit.toLowerCase();
+    if (u === '%')
+        return (value / 100) * ctx.targetHeight;
+    return (value / 100) * (getUnitMap(ctx)[u] ?? 0);
 }
-function convert(value, unit) {
+function convert(value, unit, ctx) {
     const num = parseFloat(value);
-    if (isNaN(num))
-        return value;
-    return px(calculateExpectedPx(num, unit));
+    return isNaN(num) ? value : px(toPx(num, unit, ctx));
 }
-function isHeightRelatedProperty(propertyName) {
-    return HEIGHT_RELATED_PROPERTIES.includes(propertyName);
+function isHeightRelated(prop) {
+    return HEIGHT_RELATED_PROPERTIES.includes(prop);
 }
-function extractPropertyName(cssText, match) {
-    const beforeMatch = cssText.substring(0, cssText.indexOf(match));
-    const propertyMatch = beforeMatch.match(/([a-z-]+)\s*:\s*$/i);
-    return propertyMatch ? propertyMatch[1].toLowerCase() : '';
+/**
+ * Use `matchOffset` (from replace() callback) instead of indexOf to get the
+ * exact position of the current match — avoids false matches for duplicate values.
+ */
+function extractProperty(cssText, matchOffset) {
+    const before = cssText.substring(0, matchOffset);
+    const m = before.match(/([a-z-]+)\s*:\s*[^;{}]*$/i);
+    return m ? m[1].toLowerCase() : '';
 }
-function replaceInText(cssText) {
-    return cssText.replace(regex, (match, value, unit) => {
-        // For percentage, only convert if it's a height-related property
+function replaceInText(cssText, ctx) {
+    return cssText.replace(createRegex(), (match, value, unit, offset) => {
         if (unit === '%') {
-            const propertyName = extractPropertyName(cssText, match);
-            // Only convert percentage for height-related properties
-            if (isHeightRelatedProperty(propertyName)) {
-                return convert(value, unit);
-            }
-            // For width or other properties, keep original
-            return match;
+            return isHeightRelated(extractProperty(cssText, offset)) ? convert(value, unit, ctx) : match;
         }
-        return convert(value, unit);
+        return convert(value, unit, ctx);
     });
 }
-function trackOriginalValuesForSelector(selector, propertyOriginalValues) {
-    if (!doc)
-        return;
+// ─── Element tracking ─────────────────────────────────────────────────────────
+function trackSelector(selector, propOriginals, ctx) {
     try {
-        const elements = doc.querySelectorAll(selector);
-        elements.forEach((el) => {
+        ctx.doc.querySelectorAll(selector).forEach((el) => {
             elementsWithViewportUnits.add(el);
-            // Store original values for this element
-            let elementOriginals = originalValues.get(el);
-            if (!elementOriginals) {
-                elementOriginals = new Map();
-                originalValues.set(el, elementOriginals);
+            let originals = originalValues.get(el);
+            if (!originals) {
+                originals = new Map();
+                originalValues.set(el, originals);
             }
-            // Merge property original values (don't override existing)
-            propertyOriginalValues.forEach((value, prop) => {
-                if (!elementOriginals.has(prop)) {
-                    elementOriginals.set(prop, value);
-                }
+            propOriginals.forEach((v, k) => {
+                if (!originals.has(k))
+                    originals.set(k, v);
             });
-            // Track in enforcer
-            trackElement(el, propertyOriginalValues);
+            trackElement(el, propOriginals);
         });
     }
-    catch (error) {
-        // Invalid selector, skip with warning
-        logger$1.warn('Invalid selector, skipping:', selector, error);
+    catch {
+        logger$4.warn('Invalid selector, skipping:', selector);
     }
 }
-function triggerReflow() {
-    if (!doc)
-        return;
-    void doc.body.offsetHeight;
-}
-function getFinalHeight() {
-    if (!doc)
-        return 1000;
-    triggerReflow();
-    return Math.max(doc.body?.scrollHeight || 0, doc.body?.offsetHeight || 0, doc.documentElement?.scrollHeight || 0, doc.documentElement?.offsetHeight || 0, doc.documentElement?.clientHeight || 0);
-}
-function getFinalWidth() {
-    if (!doc)
-        return 1000;
-    return Math.max(doc.body?.scrollWidth || 0, doc.body?.offsetWidth || 0, doc.documentElement?.scrollWidth || 0, doc.documentElement?.offsetWidth || 0, doc.documentElement?.clientWidth || 0);
-}
-// ============================================================================
-// Processing Functions
-// ============================================================================
-function processInlineStyles() {
-    if (!doc)
-        return 0;
+// ─── CSS processing ───────────────────────────────────────────────────────────
+function processInlineStyles(ctx) {
     let count = 0;
-    doc.querySelectorAll('[style]').forEach((el) => {
+    ctx.doc.querySelectorAll('[style]').forEach((el) => {
         const style = el.getAttribute('style');
-        if (style && regex.test(style)) {
-            regex.lastIndex = 0;
-            // Track this element before replacing
+        if (style && createRegex().test(style)) {
             elementsWithViewportUnits.add(el);
-            el.setAttribute('style', replaceInText(style));
+            el.setAttribute('style', replaceInText(style, ctx));
             count++;
         }
     });
-    logger$1.log(`Replaced ${count} inline style elements`);
+    logger$4.log(`Replaced ${count} inline style elements`);
     return count;
 }
-function processStyleTags() {
-    if (!doc)
-        return 0;
+function processStyleTags(ctx) {
     let count = 0;
-    doc.querySelectorAll('style').forEach((tag) => {
+    ctx.doc.querySelectorAll('style').forEach((tag) => {
         const css = tag.textContent || '';
-        if (regex.test(css)) {
-            regex.lastIndex = 0;
-            tag.textContent = replaceInText(css);
+        if (createRegex().test(css)) {
+            tag.textContent = replaceInText(css, ctx);
             count++;
         }
     });
-    logger$1.log(`Replaced ${count} <style> tags`);
+    logger$4.log(`Replaced ${count} <style> tags`);
     return count;
 }
-function processRule(rule) {
+function processRule(rule, ctx) {
     let count = 0;
     if ('style' in rule && rule.style) {
         const cssRule = rule;
         const style = cssRule.style;
-        let hasViewportUnits = false;
-        const propertyOriginalValues = new Map();
+        let hasVp = false;
+        const propOriginals = new Map();
         for (let i = 0; i < style.length; i++) {
             const prop = style[i];
             const value = style.getPropertyValue(prop);
-            if (value && regex.test(value)) {
-                regex.lastIndex = 0;
-                hasViewportUnits = true;
-                // Store original value before replacement
-                propertyOriginalValues.set(prop, value);
-                style.setProperty(prop, replaceInText(value), style.getPropertyPriority(prop));
+            if (value && createRegex().test(value)) {
+                hasVp = true;
+                propOriginals.set(prop, value);
+                style.setProperty(prop, replaceInText(value, ctx), style.getPropertyPriority(prop));
                 count++;
             }
         }
-        // Track elements matching this rule if it has viewport units
-        if (hasViewportUnits && cssRule.selectorText) {
-            trackOriginalValuesForSelector(cssRule.selectorText, propertyOriginalValues);
-        }
+        if (hasVp && cssRule.selectorText)
+            trackSelector(cssRule.selectorText, propOriginals, ctx);
     }
     if ('cssRules' in rule) {
-        const rules = rule;
-        for (const r of Array.from(rules.cssRules || [])) {
-            count += processRule(r);
+        for (const r of Array.from(rule.cssRules || [])) {
+            count += processRule(r, ctx);
         }
     }
     return count;
 }
-function processStylesheets() {
-    if (!doc || !win)
-        return 0;
-    const windowOrigin = win.location.origin;
+/** Processes only inline <style> sheets. Linked sheets are handled by processLinkedStylesheets. */
+function processStylesheets(ctx) {
     let total = 0;
-    Array.from(doc.styleSheets).forEach((sheet) => {
+    Array.from(ctx.doc.styleSheets).forEach((sheet) => {
+        if (sheet.href)
+            return; // deferred to processLinkedStylesheets
         try {
-            // Bỏ qua external CSS (cross-origin)
-            if (sheet.href && !sheet.href.startsWith(windowOrigin)) {
-                logger$1.log('Skipping external CSS:', sheet.href);
-                return;
-            }
-            const rules = sheet.cssRules || sheet.rules;
-            if (!rules)
-                return;
-            for (const rule of Array.from(rules)) {
-                total += processRule(rule);
+            for (const rule of Array.from(sheet.cssRules || [])) {
+                total += processRule(rule, ctx);
             }
         }
         catch (e) {
-            logger$1.warn('Cannot read stylesheet (CORS?):', e.message);
+            logger$4.warn('Cannot read stylesheet (CORS?):', e.message);
         }
     });
-    logger$1.log(`Replaced ${total} rules in stylesheets`);
+    logger$4.log(`Replaced ${total} rules in inline stylesheets`);
     return total;
 }
-async function processLinkedStylesheets() {
-    if (!doc || !win)
-        return 0;
-    const links = doc.querySelectorAll('link[rel="stylesheet"]');
+async function processLinkedStylesheets(ctx) {
+    const links = ctx.doc.querySelectorAll('link[rel="stylesheet"]');
     let count = 0;
     for (const link of Array.from(links)) {
-        if (!link.href.startsWith(win.location.origin)) {
-            logger$1.log('Skipping external CSS:', link.href);
+        // Skip cross-origin — already in browser CSSOM, handled via processStylesheets
+        if (link.href && !link.href.startsWith(ctx.win.location.origin)) {
+            logger$4.log('Skipping cross-origin CSS:', link.href);
             continue;
         }
         try {
             const res = await fetch(link.href);
             let css = await res.text();
-            if (regex.test(css)) {
-                regex.lastIndex = 0;
-                css = replaceInText(css);
-                const style = doc.createElement('style');
+            if (createRegex().test(css)) {
+                css = replaceInText(css, ctx);
+                const style = ctx.doc.createElement('style');
                 style.textContent = css;
                 style.dataset.originalHref = link.href;
                 link.parentNode?.insertBefore(style, link);
@@ -6142,17 +4597,453 @@ async function processLinkedStylesheets() {
             }
         }
         catch (e) {
-            logger$1.warn('Cannot load CSS:', link.href, e);
+            logger$4.warn('Cannot load CSS:', link.href, e);
         }
     }
-    logger$1.log(`Replaced ${count} linked CSS files`);
+    logger$4.log(`Replaced ${count} linked CSS files`);
     return count;
 }
-function enforceComputedStylesToInline() {
-    // Use enforcer to process all tracked elements
-    const count = processAll({ debug: !!config$1?.debug });
-    logger$1.log(`Enforced ${count} computed styles to inline with !important for ${elementsWithViewportUnits.size} elements`);
-    return count;
+// ─── Public entry point ───────────────────────────────────────────────────────
+async function processViewportUnits(ctx) {
+    logger$4.configure({ enabled: !!ctx.debug });
+    // Reset tracking state from any previous run
+    elementsWithViewportUnits = new Set();
+    originalValues = new WeakMap();
+    processInlineStyles(ctx);
+    processStyleTags(ctx);
+    processStylesheets(ctx);
+    await processLinkedStylesheets(ctx);
+    // Wait for browser to apply the replaced styles
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    // Enforce final computed styles to inline with !important
+    const count = processAll({ debug: !!ctx.debug });
+    logger$4.log(`Enforced ${count} computed styles for ${elementsWithViewportUnits.size} tracked elements`);
+}
+
+/**
+ * Built-in global fix — always runs, no shouldApply condition.
+ * Registered first so it runs before any other global process hooks.
+ */
+register$1({
+    name: 'viewport-unit-replacer',
+    description: 'Core: convert vh/vw/svh/dvh/% to px values across all iframe CSS',
+    process: processViewportUnits,
+});
+
+/**
+ * GemPages Swiper Fix
+ *
+ * Issue: GemPages Swiper slides use `height: 100vh` internally. After viewport
+ * unit conversion, inactive slides retain their converted height but are not
+ * positioned correctly, causing the page height to be over-calculated.
+ *
+ * Fix:
+ *  - beforeProcess: lock swiper containers to a fixed height so conversion
+ *    doesn't affect their layout.
+ *  - afterProcess: ensure only the active slide is visible and the swiper
+ *    wrapper height matches the container.
+ */
+const SWIPER_CONTAINER_SELECTOR = '.gp-swiper, [data-gp-element="slider"]';
+const SWIPER_WRAPPER_SELECTOR = '.swiper-wrapper';
+const SWIPER_SLIDE_SELECTOR = '.swiper-slide';
+const SWIPER_SLIDE_ACTIVE_SELECTOR = '.swiper-slide-active';
+const lockedSwipers = [];
+function lockSwiperHeights({ doc, targetHeight }) {
+    lockedSwipers.length = 0;
+    doc.querySelectorAll(SWIPER_CONTAINER_SELECTOR).forEach((container) => {
+        lockedSwipers.push({ container, originalHeight: container.style.height });
+        container.style.setProperty('height', `${targetHeight}px`, 'important');
+    });
+}
+function restoreSwiperAndFixLayout({ doc }) {
+    // Restore original heights
+    lockedSwipers.forEach(({ container, originalHeight }) => {
+        container.style.removeProperty('height');
+        if (originalHeight)
+            container.style.height = originalHeight;
+    });
+    lockedSwipers.length = 0;
+    // Ensure inactive slides don't bleed into layout
+    doc.querySelectorAll(SWIPER_CONTAINER_SELECTOR).forEach((container) => {
+        const wrapper = container.querySelector(SWIPER_WRAPPER_SELECTOR);
+        const activeSlide = container.querySelector(SWIPER_SLIDE_ACTIVE_SELECTOR);
+        const allSlides = container.querySelectorAll(SWIPER_SLIDE_SELECTOR);
+        // Hide all inactive slides from layout flow
+        allSlides.forEach((slide) => {
+            if (slide !== activeSlide) {
+                slide.style.setProperty('visibility', 'hidden', 'important');
+                slide.style.setProperty('position', 'absolute', 'important');
+            }
+        });
+        // Sync wrapper height to active slide
+        if (wrapper && activeSlide) {
+            wrapper.style.setProperty('height', `${activeSlide.offsetHeight}px`, 'important');
+        }
+    });
+}
+
+register$1({
+    name: 'gempages-swiper',
+    description: 'GemPages Swiper slides use 100vh causing layout height inflation',
+    shouldApply: ({ doc }) => !!doc.querySelector('.gp-swiper, [data-gp-element="slider"]'),
+    extraIgnoreSelectors: ['.swiper-slide:not(.swiper-slide-active)'],
+    beforeProcess: lockSwiperHeights,
+    afterProcess: restoreSwiperAndFixLayout,
+});
+
+/**
+ * GemPages v7 Slider Fix
+ *
+ * At DOM snapshot time the slider library has already computed pixel values on each
+ * `.gem-slider-item` based on the original viewport width:
+ *   - `min-width` / `max-width` are fixed px (e.g. 2288px or 278px)
+ *   - `transform: translate3d(X, 0, 0)` offsets are derived from those widths
+ *
+ * Since we capture HTML+CSS without scripts, the library cannot re-initialize,
+ * so we fix the widths and rescale the transforms manually.
+ *
+ * Two slider variants:
+ *
+ *   1. Full-width (1 item per view):
+ *      min-width = originalViewportWidth  →  newItemWidth = targetWidth
+ *
+ *   2. Multi-item (N items per view):
+ *      CSS var `--minw: calc(100% / N - Gpx)` encodes the formula.
+ *      newItemWidth = targetWidth / N - G
+ *
+ * In both cases: scale = newItemWidth / originalItemWidth
+ * Transforms are rescaled proportionally (only when X ≠ 0).
+ */
+const SLIDER_ITEM_SELECTOR = '.gem-slider-item';
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function parseTranslate3d(transform) {
+    const match = transform.match(/translate3d\(\s*([-\d.]+)px\s*,\s*([-\d.]+)px\s*,\s*([-\d.]+)px\s*\)/);
+    if (!match)
+        return null;
+    return { x: parseFloat(match[1]), y: parseFloat(match[2]), z: parseFloat(match[3]) };
+}
+/**
+ * Parse `calc(100% / N - Gpx)` and evaluate against containerWidth.
+ * Returns null if the format doesn't match.
+ */
+function parseCalcFraction(cssValue, containerWidth) {
+    const match = cssValue.match(/calc\(\s*100%\s*\/\s*([\d.]+)\s*-\s*([\d.]+)px\s*\)/);
+    if (!match)
+        return null;
+    const itemsPerRow = parseFloat(match[1]);
+    const gap = parseFloat(match[2]);
+    if (!itemsPerRow)
+        return null;
+    return containerWidth / itemsPerRow - gap;
+}
+/**
+ * Determine the correct item width at the new targetWidth.
+ *
+ * Priority:
+ *   1. `--minw` CSS custom property → extract formula and re-evaluate
+ *   2. `--maxw` CSS custom property → same
+ *   3. Fallback: targetWidth (full-width single-item slider)
+ */
+function resolveNewItemWidth(item, targetWidth) {
+    for (const varName of ['--minw', '--maxw']) {
+        const cssVar = item.style.getPropertyValue(varName).trim();
+        if (!cssVar)
+            continue;
+        const calculated = parseCalcFraction(cssVar, targetWidth);
+        if (calculated !== null && calculated > 0)
+            return calculated;
+    }
+    return targetWidth;
+}
+function getDeviceType(deviceType) {
+    switch (deviceType) {
+        case EDeviceType.Mobile:
+            return '-mobile';
+        case EDeviceType.Tablet:
+            return '-tablet';
+        default:
+            return '';
+    }
+}
+function getMinWByDeviceType(deviceType) {
+    return `--minw${getDeviceType(deviceType)}`;
+}
+function getMaxWByDeviceType(deviceType) {
+    return `--maxw${getDeviceType(deviceType)}`;
+}
+// ─── Main fix ─────────────────────────────────────────────────────────────────
+function rescaleSliderItems({ doc, targetWidth, deviceType }) {
+    doc.querySelectorAll(SLIDER_ITEM_SELECTOR).forEach((item) => {
+        const originalWidth = parseFloat(item.style.minWidth) || parseFloat(item.style.maxWidth) || 0;
+        if (!originalWidth)
+            return;
+        const newItemWidth = resolveNewItemWidth(item, targetWidth);
+        if (newItemWidth === originalWidth)
+            return;
+        const minWVarName = getMinWByDeviceType(deviceType);
+        const maxWVarName = getMaxWByDeviceType(deviceType);
+        const newMinWidthByVar = `var(${minWVarName}, ${newItemWidth.toFixed(2)}px)`;
+        const newMaxWidthByVar = `var(${maxWVarName}, ${newItemWidth.toFixed(2)}px)`;
+        item.style.setProperty('min-width', newMinWidthByVar, 'important');
+        item.style.setProperty('max-width', newMaxWidthByVar, 'important');
+        const translate = parseTranslate3d(item.style.transform);
+        const translateX = 0 - (translate?.x ?? 0);
+        if (translate && translateX !== 0 && translateX > targetWidth) {
+            const newX = `calc(1px - ${newMinWidthByVar})`;
+            item.style.setProperty('transform', `translate3d(${newX}, ${translate.y}px, ${translate.z}px)`, 'important');
+        }
+    });
+}
+
+register$1({
+    name: 'gp-v7-slider',
+    description: 'GemPages v7 slider: rescale .gem-slider-item min/max-width and translate3d X to match targetWidth',
+    shouldApply: ({ doc }) => !!doc.querySelector('.gem-slider-item'),
+    afterProcess: rescaleSliderItems,
+});
+
+const logger$3 = createLogger({ enabled: false, prefix: 'ViewportReplacer' });
+let dimensionsListener = null;
+function attach(debug) {
+    logger$3.configure({ enabled: !!debug });
+    dimensionsListener = (e) => {
+        const ev = e;
+        logger$3.log('Dimensions applied:', ev.detail);
+    };
+    window.addEventListener('iframe-dimensions-applied', dimensionsListener);
+}
+function detach() {
+    if (dimensionsListener) {
+        window.removeEventListener('iframe-dimensions-applied', dimensionsListener);
+        dimensionsListener = null;
+    }
+}
+
+/**
+ * Default iframe dimension calculation.
+ * Used as fallback when no fix overrides getDimensions().
+ */
+function getFinalHeight(doc, win) {
+    void doc.body.offsetHeight; // trigger reflow
+    const bodyMinHeight = parseFloat(win.getComputedStyle(doc.body).minHeight) || 0;
+    const htmlMinHeight = parseFloat(win.getComputedStyle(doc.documentElement).minHeight) || 0;
+    return Math.max(doc.body?.scrollHeight || 0, doc.body?.offsetHeight || 0, doc.documentElement?.scrollHeight || 0, doc.documentElement?.offsetHeight || 0, doc.documentElement?.clientHeight || 0, bodyMinHeight, htmlMinHeight);
+}
+function getFinalWidth(doc) {
+    return Math.max(doc.body?.scrollWidth || 0, doc.body?.offsetWidth || 0, doc.documentElement?.scrollWidth || 0, doc.documentElement?.offsetWidth || 0, doc.documentElement?.clientWidth || 0);
+}
+
+/**
+ * Viewport fix pipeline runner.
+ *
+ * Executes the 4-phase pipeline for a given context:
+ *   Phase 1: beforeProcess  (global → shop)
+ *   Phase 2: process        (global fixes)
+ *   Phase 3: afterProcess   (shop → global)
+ *   Phase 4: getDimensions  (shop → global → default)
+ */
+const logger$2 = createLogger({ enabled: false, prefix: 'ViewportReplacer' });
+function configure(debug) {
+    logger$2.configure({ enabled: debug });
+}
+async function run$1(ctx, activeGlobal, shopFix) {
+    console.log(`🚀 🐥 ~ run ~ ctx:`, ctx);
+    // ── Phase 1: beforeProcess ────────────────────────────────────────────────
+    for (const fix of activeGlobal) {
+        if (fix.beforeProcess) {
+            logger$2.log(`[beforeProcess] ${fix.name}`);
+            await fix.beforeProcess(ctx);
+        }
+    }
+    if (shopFix?.beforeProcess) {
+        logger$2.log('[beforeProcess] shop');
+        await shopFix.beforeProcess(ctx);
+    }
+    // ── Phase 2: process ──────────────────────────────────────────────────────
+    for (const fix of activeGlobal) {
+        if (fix.process) {
+            logger$2.log(`[process] ${fix.name}`);
+            await fix.process(ctx);
+        }
+    }
+    // ── Phase 3: afterProcess ─────────────────────────────────────────────────
+    if (shopFix?.afterProcess) {
+        logger$2.log('[afterProcess] shop');
+        await shopFix.afterProcess(ctx);
+    }
+    for (const fix of activeGlobal) {
+        if (fix.afterProcess) {
+            logger$2.log(`[afterProcess] ${fix.name}`);
+            await fix.afterProcess(ctx);
+        }
+    }
+    // ── Phase 4: getDimensions ────────────────────────────────────────────────
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => {
+            let dimensions = null;
+            // Priority: shop → global → default
+            if (shopFix?.getDimensions) {
+                dimensions = shopFix.getDimensions(ctx);
+                if (dimensions)
+                    logger$2.log('Dimensions from shop fix:', dimensions);
+            }
+            if (!dimensions) {
+                for (const fix of activeGlobal) {
+                    if (fix.getDimensions) {
+                        dimensions = fix.getDimensions(ctx);
+                        if (dimensions) {
+                            logger$2.log(`Dimensions from global fix [${fix.name}]:`, dimensions);
+                            break;
+                        }
+                    }
+                }
+            }
+            if (!dimensions) {
+                dimensions = { height: getFinalHeight(ctx.doc, ctx.win), width: getFinalWidth(ctx.doc) };
+            }
+            logger$2.log('Final dimensions:', dimensions);
+            resolve(dimensions);
+        });
+    });
+}
+
+const registry = new Map();
+/**
+ * Register a viewport fix for a specific shop.
+ * Accepts a numeric shop ID or a myshopify domain string.
+ *
+ * @example
+ * register(1234, { description: 'Fix for My Shop', extraIgnoreSelectors: ['.hero'] });
+ * register('my-shop.myshopify.com', { afterProcess: ({ doc }) => { ... } });
+ */
+function register(shopId, fix) {
+    if (registry.has(shopId)) {
+        console.warn(`[ViewportShopFixes] Fix for shop "${shopId}" already registered — overwriting.`);
+    }
+    registry.set(shopId, fix);
+}
+function get(shopId) {
+    return registry.get(shopId) ?? null;
+}
+
+/**
+ * Shop 566240210141053597
+ *
+ * Known issues:
+ * - The hero section uses `height: 100vh` with a sticky internal element that
+ *   overflows the layout after viewport unit conversion → clamp it manually.
+ * - The mega-menu drawer holds `min-height: 100vh` which inflates the total
+ *   page height calculation → exclude it from dimension measurement.
+ */
+const HERO_SELECTOR = '#shopify-section-hero';
+const MEGA_MENU_SELECTOR = '.mega-menu__drawer';
+// ─── beforeProcess ────────────────────────────────────────────────────────────
+/**
+ * Hide the mega-menu drawer before processing so it doesn't affect layout.
+ * It will be restored in afterProcess.
+ */
+function hideMegaMenuDrawer({ doc }) {
+    const drawer = doc.querySelector(MEGA_MENU_SELECTOR);
+    if (!drawer)
+        return;
+    drawer.dataset.originalDisplay = drawer.style.display;
+    drawer.style.setProperty('display', 'none', 'important');
+}
+// ─── afterProcess ─────────────────────────────────────────────────────────────
+/**
+ * Restore mega-menu and clamp hero height to prevent overflow.
+ */
+function restoreAndFixLayout({ doc, targetHeight }) {
+    // Restore mega-menu
+    const drawer = doc.querySelector(MEGA_MENU_SELECTOR);
+    if (drawer) {
+        const original = drawer.dataset.originalDisplay ?? '';
+        drawer.style.removeProperty('display');
+        if (original)
+            drawer.style.display = original;
+        delete drawer.dataset.originalDisplay;
+    }
+    // Clamp hero height to targetHeight
+    const hero = doc.querySelector(HERO_SELECTOR);
+    if (hero) {
+        hero.style.setProperty('height', `${targetHeight}px`, 'important');
+        hero.style.setProperty('max-height', `${targetHeight}px`, 'important');
+    }
+}
+
+register(`566240210141053597`, {
+    description: 'Hero 100vh overflow + mega-menu drawer inflates page height',
+    extraIgnoreSelectors: ['.mega-menu__drawer'],
+    beforeProcess: hideMegaMenuDrawer,
+    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.');
+        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 });
+    configure(!!cfg.debug);
+    start$4(doc, win, cfg, { debug: !!cfg.debug });
+    attach(cfg.debug);
+    logger$1.log('Started');
+}
+function stop$3() {
+    if (!running$2)
+        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.');
+        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,
+    };
+    const activeGlobal = getActiveFixes(ctx);
+    if (activeGlobal.length > 0) {
+        logger$1.log(`Active global fixes: ${activeGlobal.map((f) => f.name).join(', ')}`);
+    }
+    try {
+        return await run$1(ctx, activeGlobal, shopFix);
+    }
+    catch (err) {
+        logger$1.error('Critical error:', err);
+        return { height: doc.body?.scrollHeight || 1000, width: doc.body?.scrollWidth || 1000 };
+    }
 }
 
 const logger = createLogger({
@@ -6214,9 +5105,8 @@ async function initialize() {
     }
 }
 async function process() {
-    if (!iframe || !config) {
+    if (!iframe || !config)
         return;
-    }
     if (!iframe.contentDocument || !iframe.contentWindow) {
         logger.error('Cannot access iframe document');
         config.onError?.(new Error('Cannot access iframe document'));
@@ -6224,11 +5114,8 @@ async function process() {
     }
     try {
         logger.log('Processing viewport units...');
-        // Start viewport replacer
         start$3(iframe, config);
-        // Setup navigation blocker
         start$5(iframe, { debug: config.debug });
-        // Run viewport replacement
         const result = await run();
         logger.log('Process completed:', result);
         config.onSuccess?.(result);
@@ -6265,91 +5152,30 @@ function enableNavigationBlocking$2() {
 
 /**
  * Iframe Helper Starter Module
- * Manages iframe helper initialization with event listeners
  * @module start
  */
 // ============================================================================
 // State
 // ============================================================================
 let running = false;
-let eventListenersAttached = false;
-// Event listener references for cleanup
-let dimensionsListener = null;
-let navigationListener = null;
-let formSubmitListener = null;
-// ============================================================================
-// Helper Functions
-// ============================================================================
-function attachEventListeners() {
-    if (eventListenersAttached) {
-        return;
-    }
-    dimensionsListener = ((e) => {
-        // console.log('[IframeHelper] Iframe dimensions finalized:', ev.detail);
-    });
-    navigationListener = ((e) => {
-        // console.warn('[IframeHelper] Iframe tried to navigate to:', ev.detail.url);
-    });
-    formSubmitListener = ((e) => {
-        // console.log('[IframeHelper] Iframe form submitted:', ev.detail.data);
-    });
-    window.addEventListener('iframe-dimensions-applied', dimensionsListener);
-    window.addEventListener('iframe-navigation-blocked', navigationListener);
-    window.addEventListener('iframe-form-submit', formSubmitListener);
-    eventListenersAttached = true;
-}
-function removeEventListeners() {
-    if (!eventListenersAttached) {
-        return;
-    }
-    if (dimensionsListener) {
-        window.removeEventListener('iframe-dimensions-applied', dimensionsListener);
-        dimensionsListener = null;
-    }
-    if (navigationListener) {
-        window.removeEventListener('iframe-navigation-blocked', navigationListener);
-        navigationListener = null;
-    }
-    if (formSubmitListener) {
-        window.removeEventListener('iframe-form-submit', formSubmitListener);
-        formSubmitListener = null;
-    }
-    eventListenersAttached = false;
-}
 // ============================================================================
 // Public API
 // ============================================================================
-/**
- * Start iframe helper with configuration
- * Initializes IframeFixer and attaches event listeners
- */
 function start$1(config) {
     if (running) {
         console.warn('[IframeHelperStarter] Already running. Call stop() first.');
         return;
     }
-    // Attach global event listeners
-    attachEventListeners();
-    // Start iframe fixer
     start$2(config);
     running = true;
 }
-/**
- * Stop iframe helper and cleanup
- */
 function stop$1() {
     if (!running) {
         return;
     }
-    // Stop iframe fixer
     stop$2();
-    // Remove event listeners
-    removeEventListeners();
     running = false;
 }
-/**
- * Enable navigation blocking
- */
 function enableNavigationBlocking$1() {
     if (!running) {
         console.warn('[IframeHelperStarter] Not running. Call start() first.');
@@ -6373,11 +5199,12 @@ function useVizLiveRender() {
     const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const wrapperWidth = useHeatmapVizRectContext((s) => s.wrapperWidth);
     const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
-    const contentWidth = useHeatmapWidthByDevice();
-    const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
-    const targetUrl = useHeatmapLiveStore((state) => state.targetUrl);
-    const renderMode = useHeatmapLiveStore((state) => state.renderMode);
-    const storefrontPassword = useHeatmapLiveStore((state) => state.storefrontPassword);
+    const htmlContent = useHeatmapLiveStore((s) => s.htmlContent);
+    const targetUrl = useHeatmapLiveStore((s) => s.targetUrl);
+    const deviceType = useHeatmapSettingContext((s) => s.deviceType);
+    const renderMode = useHeatmapLiveStore((s) => s.renderMode);
+    const storefrontPassword = useHeatmapLiveStore((s) => s.storefrontPassword);
+    useHeatmapWidthByDevice();
     const { iframeRef, isReady } = useVizLiveIframeMsg();
     // Handle iframe rendering based on mode
     useEffect(() => {
@@ -6418,14 +5245,14 @@ function useVizLiveRender() {
         if (!iframe || !hasContent)
             return;
         setIsRenderViz(true);
-        initIframeHelper$1(iframe, { width: wrapperWidth, height: wrapperHeight }, (height) => {
+        initIframeHelper$1(iframe, deviceType, { width: wrapperWidth, height: wrapperHeight }, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
         });
         return () => { };
     }, [
         isReady,
-        contentWidth,
+        deviceType,
         wrapperHeight,
         wrapperWidth,
         renderMode,
@@ -6451,9 +5278,10 @@ function buildPortalUrl(targetUrl, storefrontPassword) {
     const portalServiceUrl = getPortalServiceUrl();
     return `${portalServiceUrl}/?${params.toString()}`;
 }
-function initIframeHelper$1(iframe, rect, onSuccess) {
+function initIframeHelper$1(iframe, deviceType = EDeviceType.Desktop, rect, onSuccess) {
     stop();
     start({
+        deviceType: deviceType,
         targetWidth: rect.width,
         targetHeight: rect.height,
         iframe: iframe,
@@ -6676,24 +5504,17 @@ class AttentionMapRenderer {
 
 class GXVisualizer extends Visualizer {
     attentionMap;
-    originalHtml;
     originalClearmap;
     originalSetup;
     constructor() {
         super();
         this.attentionMap = new AttentionMapRenderer(null);
         // Save references to base implementations before overriding
-        this.originalHtml = this.html;
-        this.originalClearmap = this.clearmap;
         this.originalSetup = this.setup;
-        this.html = this.htmlOverride;
+        this.originalClearmap = this.clearmap;
         this.clearmap = this.clearmapOverride;
         this.setup = this.setupOverride;
     }
-    htmlOverride = async (decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy) => {
-        await this.originalHtml(decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy);
-        return this;
-    };
     setupOverride = async (target, options) => {
         // Clear existing custom renderers before re-initializing (null-safe)
         this.attentionMap?.clear();
@@ -6727,8 +5548,13 @@ const useHeatmapRender = () => {
     const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
     const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
+    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
+    const contentWidth = useHeatmapWidthByDevice();
+    const deviceType = useHeatmapSettingContext((s) => s.deviceType);
     const iframeRef = useRef(null);
     const renderHeatmap = useCallback(async (payloads) => {
+        if (contentWidth === 0 || wrapperHeight === 0)
+            return;
         if (!payloads || payloads.length === 0)
             return;
         const visualizer = vizRef ?? new GXVisualizer();
@@ -6739,12 +5565,13 @@ const useHeatmapRender = () => {
         if (!iframe?.contentWindow)
             return;
         await visualizer.html(payloads, iframe.contentWindow, viewId);
-        initIframeHelper(iframe, payloads, (height) => {
+        const size = { width: contentWidth, height: wrapperHeight };
+        initIframeHelper(iframe, deviceType, size, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
         });
         // setIsRenderViz(true);
-    }, []);
+    }, [wrapperHeight, contentWidth, deviceType]);
     useEffect(() => {
         if (!data || data.length === 0)
             return;
@@ -6753,23 +5580,23 @@ const useHeatmapRender = () => {
         return () => {
             setVizRef(null);
         };
-    }, [data]);
+    }, [data, renderHeatmap, setVizRef]);
     return {
         iframeRef,
     };
 };
-function initIframeHelper(iframe, 
-// size: { width: number; height: number },
-payloads, onSuccess) {
-    const { size } = findLastSizeOfDom(payloads);
+function initIframeHelper(iframe, deviceType = EDeviceType.Desktop, size, onSuccess) {
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
+    if (docHeight === 0)
+        return;
     stop();
     start({
+        deviceType: deviceType,
         targetWidth: docWidth,
         targetHeight: docHeight,
         iframe: iframe,
-        debug: false,
+        debug: true,
         onSuccess: (data) => {
             iframe.style.height = `${data.height}px`;
             onSuccess(data.height);
@@ -6778,16 +5605,6 @@ payloads, onSuccess) {
     // fixer.recalculate();
 }
 
-function isMobileDevice(userAgent) {
-    if (!userAgent)
-        return false;
-    return /android|webos|iphone|ipad|ipod|blackberry|windows phone|opera mini|iemobile|mobile|silk|fennec|bada|tizen|symbian|nokia|palmsource|meego|sailfish|kindle|playbook|bb10|rim/i.test(userAgent);
-}
-
-function sortEvents(a, b) {
-    return a.time - b.time;
-}
-
 const useReplayRender = () => {
     const data = useHeatmapDataContext((s) => s.data);
     const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
@@ -7189,30 +6006,6 @@ const useHeatmapScale = (props) => {
         handleScroll,
     };
 };
-const useIframeHeight = (props) => {
-    const { iframeRef } = props;
-    const iframeWidth = useHeatmapWidthByDevice();
-    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
-    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
-    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
-    useIframeHeightProcessor({
-        iframeRef: iframeRef,
-        iframeWidth: iframeWidth,
-        defaultHeight: wrapperHeight,
-        deviceType: 1,
-        autoProcess: true,
-        watchHeightChanges: true,
-        autoApplyHeight: false,
-        shouldProcess: isRenderViz && !!wrapperHeight,
-        onHeightChange: (height) => {
-            setIframeHeight(height);
-        },
-        onProcessComplete: (result) => {
-            console.trace(`🚀 🐥 ~ VizDomRenderer ~ result:`, result);
-            setIframeHeight(result.height);
-        },
-    });
-};
 
 const useWrapperRefHeight = (props) => {
     const setWrapperHeight = useHeatmapVizRectContext((s) => s.setWrapperHeight);
@@ -7412,10 +6205,10 @@ const useScrollmapZones = (options) => {
             const newZones = createZones(scrollmap);
             setZones(newZones);
             setIsReady(true);
-            logger$4.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
+            logger$9.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
         }
         catch (error) {
-            logger$4.error('[useScrollmap] Error:', error);
+            logger$9.error('[useScrollmap] Error:', error);
             setIsReady(false);
         }
     }, [enabled, scrollmap, mode, createZones]);
@@ -9055,16 +7848,16 @@ const ContentVizByMode = () => {
 ContentVizByMode.displayName = 'ContentVizByMode';
 
 const HeatmapPreview = () => {
-    return (jsxs(BoxStack, { id: "gx-hm-container", flexDirection: "row", overflow: "hidden", flex: "1", position: "relative", children: [jsx(ContentSidebar, {}), jsx(BoxStack, { flexDirection: "column", flex: "1", children: jsx(ContentRightPreview, {}) })] }));
+    return (jsxs(BoxStack, { id: "gx-hm-container", flexDirection: "row", overflow: "hidden", flex: "1", position: "relative", children: [jsx(ContentSidebar, {}), jsxs(BoxStack, { flexDirection: "column", flex: "1", children: [jsx(ContentRightPreview, {}), jsx(ContentToolbar, {})] })] }));
 };
 const ContentRightPreview = () => {
-    const data = useHeatmapDataContext((state) => state.data);
     const CompEmptyState = useHeatmapControlStore((state) => state.controls.EmptyState);
     const isLoadingDom = useHeatmapSettingContext((state) => state.isLoadingDom);
-    if (!isLoadingDom && (!data || data.length === 0)) {
+    const isEmptyData = useHeatmapDataContext((state) => state.isEmptyData);
+    if (!isLoadingDom && isEmptyData) {
         return CompEmptyState ? jsx(CompEmptyState, {}) : 'EmptyState not found';
     }
-    return (jsxs(Fragment, { children: [jsx(ContentMetricBar, {}), jsx(BoxStack, { flexDirection: "column", flex: "1", children: jsx(ContentVizByMode, {}) }), jsx(ContentToolbar, {})] }));
+    return (jsxs(Fragment, { children: [jsx(ContentMetricBar, {}), jsx(BoxStack, { flexDirection: "column", flex: "1", children: jsx(ContentVizByMode, {}) })] }));
 };
 
 const ContentTopBar = () => {
@@ -9108,4 +7901,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, useIframeHeight, useIframeHeightProcessor, 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, 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 };