@gemx-dev/heatmap-react 3.5.53 → 3.5.54

package/dist/esm/index.mjs

@@ -186,8 +186,20 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
     return {
         data: { [DEFAULT_VIEW_ID]: undefined },
         clickmap: { [DEFAULT_VIEW_ID]: undefined },
+        clickAreas: { [DEFAULT_VIEW_ID]: undefined },
         dataInfo: { [DEFAULT_VIEW_ID]: undefined },
         scrollmap: { [DEFAULT_VIEW_ID]: undefined },
+        setClickAreas: (clickAreas, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            clickAreas: { ...state.clickAreas, [viewId]: clickAreas },
+        })),
+        removeClickArea: (areaId, viewId = DEFAULT_VIEW_ID) => set((state) => {
+            const currentAreas = state.clickAreas[viewId] || [];
+            const filtered = currentAreas.filter((a) => a.id !== areaId);
+            console.log(`🚀 🐥 ~ filtered:`, filtered);
+            return {
+                clickAreas: { ...state.clickAreas, [viewId]: filtered },
+            };
+        }),
         setDataInfo: (dataInfo, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             dataInfo: { ...state.dataInfo, [viewId]: dataInfo },
         })),
@@ -203,21 +215,25 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
         copyView: (fromViewId, toViewId) => set((state) => ({
             data: { ...state.data, [toViewId]: state.data[fromViewId] },
             clickmap: { ...state.clickmap, [toViewId]: state.clickmap[fromViewId] },
+            clickAreas: { ...state.clickAreas, [toViewId]: state.clickAreas[fromViewId] },
             dataInfo: { ...state.dataInfo, [toViewId]: state.dataInfo[fromViewId] },
             scrollmap: { ...state.scrollmap, [toViewId]: state.scrollmap[fromViewId] },
         })),
         clearView: (viewId) => set((state) => {
             const newData = { ...state.data };
             const newClickmap = { ...state.clickmap };
+            const newClickAreas = { ...state.clickAreas };
             const newDataInfo = { ...state.dataInfo };
             const newScrollmap = { ...state.scrollmap };
             delete newData[viewId];
             delete newClickmap[viewId];
+            delete newClickAreas[viewId];
             delete newDataInfo[viewId];
             delete newScrollmap[viewId];
             return {
                 data: newData,
                 clickmap: newClickmap,
+                clickAreas: newClickAreas,
                 dataInfo: newDataInfo,
                 scrollmap: newScrollmap,
             };
@@ -225,6 +241,7 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
         resetAll: () => set({
             data: { [DEFAULT_VIEW_ID]: undefined },
             clickmap: { [DEFAULT_VIEW_ID]: undefined },
+            clickAreas: { [DEFAULT_VIEW_ID]: undefined },
             dataInfo: { [DEFAULT_VIEW_ID]: undefined },
             scrollmap: { [DEFAULT_VIEW_ID]: undefined },
         }),
@@ -787,13 +804,7 @@ const useHeatmapClick = (props) => {
         setSelectedElement: (element) => setSelectedElementStore(element, viewId),
         setHoveredElement: (element) => setHoveredElementStore(element, viewId),
         setShouldShowCallout: (value) => setShouldShowCalloutStore(value, viewId),
-    }), [
-        setStateStore,
-        setSelectedElementStore,
-        setHoveredElementStore,
-        setShouldShowCalloutStore,
-        viewId,
-    ]);
+    }), [setStateStore, setSelectedElementStore, setHoveredElementStore, setShouldShowCalloutStore, viewId]);
     return {
         state,
         selectedElement,
@@ -808,24 +819,29 @@ const useHeatmapData = (props) => {
     const viewId = props?.viewId || useViewIdContext();
     const data = useHeatmapDataStore((state) => state.data[viewId]);
     const clickmap = useHeatmapDataStore((state) => state.clickmap[viewId]);
+    const clickAreas = useHeatmapDataStore((state) => state.clickAreas[viewId]);
     const scrollmap = useHeatmapDataStore((state) => state.scrollmap[viewId]);
     const dataInfo = useHeatmapDataStore((state) => state.dataInfo[viewId]);
     const setData = useHeatmapDataStore((state) => state.setData);
     const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
+    const setClickAreas = useHeatmapDataStore((state) => state.setClickAreas);
     const setScrollmap = useHeatmapDataStore((state) => state.setScrollmap);
     const setDataInfo = useHeatmapDataStore((state) => state.setDataInfo);
+    const removeClickArea = useHeatmapDataStore((state) => state.removeClickArea);
     const memoizedSetters = useMemo(() => ({
         setData: (newData) => setData(newData, viewId),
         setClickmap: (newClickmap) => setClickmap(newClickmap, viewId),
+        setClickAreas: (newClickAreas) => setClickAreas(newClickAreas, viewId),
         setScrollmap: (newScrollmap) => setScrollmap(newScrollmap, viewId),
         setDataInfo: (newDataInfo) => setDataInfo(newDataInfo, viewId),
-    }), [setData, setClickmap, setScrollmap, setDataInfo, viewId]);
+        removeClickArea: (areaId) => removeClickArea(areaId, viewId),
+    }), [setData, setClickmap, setClickAreas, setScrollmap, setDataInfo, removeClickArea, viewId]);
     return {
         data,
         clickmap,
+        clickAreas,
         scrollmap,
         dataInfo,
-        // Setters (auto-inject viewId)
         ...memoizedSetters,
     };
 };
@@ -998,24 +1014,32 @@ const useRegisterData = (data, dataInfo) => {
     }, [dataInfo]);
 };
 
-const useRegisterHeatmap = ({ clickmap, scrollmap }) => {
-    const { setClickmap, setScrollmap } = useHeatmapData();
-    const handleSetClickmap = useCallback((clickmap) => {
+const useRegisterHeatmap = ({ clickmap, scrollmap, clickAreas }) => {
+    const { setClickmap, setScrollmap, setClickAreas } = useHeatmapData();
+    const handleSetClickmap = useCallback(() => {
         if (!clickmap)
             return;
         setClickmap(clickmap);
-    }, [clickmap]);
-    const handleSetScrollmap = useCallback((scrollmap) => {
+    }, [clickmap]); // eslint-disable-line react-hooks/exhaustive-deps
+    const handleSetClickAreas = useCallback(() => {
+        if (!clickAreas)
+            return;
+        setClickAreas(clickAreas);
+    }, [clickAreas]); // eslint-disable-line react-hooks/exhaustive-deps
+    const handleSetScrollmap = useCallback(() => {
         if (!scrollmap)
             return;
         setScrollmap(scrollmap);
-    }, [scrollmap]);
+    }, [scrollmap]); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(() => {
-        handleSetClickmap(clickmap);
-    }, [clickmap]);
+        handleSetClickmap();
+    }, [handleSetClickmap]);
     useEffect(() => {
-        handleSetScrollmap(scrollmap);
-    }, [scrollmap]);
+        handleSetClickAreas();
+    }, [handleSetClickAreas]);
+    useEffect(() => {
+        handleSetScrollmap();
+    }, [handleSetScrollmap]);
 };
 
 /**
@@ -1078,6 +1102,52 @@ function isIgnoredCanvas(element) {
     return false;
 }
 
+/**
+ * Get all elements at a specific point (x, y), with support for Shadow DOM
+ */
+function getElementsAtPoint(doc, x, y, options = {}) {
+    const { filterFn, ignoreCanvas = true, visitedShadowRoots = new Set() } = options;
+    // Get all elements at this point
+    let elementsAtPoint = doc.elementsFromPoint(x, y);
+    // Filter out canvas elements if requested
+    if (ignoreCanvas) {
+        elementsAtPoint = elementsAtPoint.filter((el) => !isIgnoredCanvas(el));
+    }
+    // Apply custom filter if provided
+    if (filterFn) {
+        const matchedElement = elementsAtPoint.find(filterFn);
+        // If matched element has Shadow DOM and we haven't visited it yet, recurse
+        if (matchedElement?.shadowRoot && !visitedShadowRoots.has(matchedElement.shadowRoot)) {
+            visitedShadowRoots.add(matchedElement.shadowRoot);
+            return getElementsAtPoint(matchedElement.shadowRoot, x, y, {
+                ...options,
+                visitedShadowRoots,
+            });
+        }
+    }
+    return elementsAtPoint;
+}
+/**
+ * Get the element at a specific point (x, y)
+ */
+const getElementAtPoint = (doc, x, y) => {
+    let el = null;
+    if ('caretPositionFromPoint' in doc) {
+        el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
+    }
+    el = el ?? doc.elementFromPoint(x, y);
+    let element = el;
+    while (element && element.nodeType === Node.TEXT_NODE) {
+        element = element.parentElement;
+    }
+    return element;
+};
+function getElementHash(element) {
+    return (element.getAttribute('data-clarity-hash') ||
+        element.getAttribute('data-clarity-hashalpha') ||
+        element.getAttribute('data-clarity-hashbeta'));
+}
+
 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';
@@ -1125,7 +1195,6 @@ const SECONDARY_HOVERED_ELEMENT_ID_BASE = 'gx-hm-secondary-hovered-element';
 function getColorFromClickDist(clickDist) {
     // Ensure clickDist is in range [0, 100]
     const normalizedDist = Math.max(0, Math.min(100, clickDist));
-    console.log(`🚀 🐥 ~ getColorFromClickDist ~ normalizedDist:`, normalizedDist);
     // Calculate gradient index
     const maxIndex = AREA_COLOR_GRADIENT.length - 1;
     const index = Math.floor((normalizedDist / 100) * maxIndex);
@@ -1253,21 +1322,46 @@ function getElementSelector(element) {
     }
     return element.tagName.toLowerCase();
 }
-function buildAreaNode(element, hash, heatmapInfo, shadowRoot) {
+/**
+ * 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, elementMapInfo) {
+    let totalClicks = 0;
+    // Get clicks for the element itself
+    const elementHash = getElementHash(element);
+    if (elementHash) {
+        const elementInfo = elementMapInfo[elementHash];
+        totalClicks += elementInfo?.totalclicks || 0;
+    }
+    const children = element.querySelectorAll('*');
+    children.forEach((child) => {
+        const childHash = getElementHash(child);
+        if (childHash) {
+            const childInfo = elementMapInfo[childHash];
+            totalClicks += childInfo?.totalclicks || 0;
+        }
+    });
+    return totalClicks;
+}
+function buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData) {
     if (!heatmapInfo.elementMapInfo)
         return;
     const totalClicks = heatmapInfo.totalClicks || 0;
     const elementInfo = heatmapInfo.elementMapInfo[hash];
-    const elementClicks = elementInfo?.totalclicks || 0;
+    // Calculate total clicks including all child elements
+    const elementClicks = calculateTotalClicksWithChildren(element, heatmapInfo.elementMapInfo);
     const clickDist = calculateClickDistribution(elementClicks, totalClicks);
     const rect = getElementRect(element);
     const color = getColorFromClickDist(clickDist);
     const hoverColor = getHoverColorFromClickDist(clickDist);
     const areaNode = {
-        kind: 'area',
-        id: `${hash}_${Date.now()}`,
+        kind: persistedData?.kind || 'area',
+        id: persistedData?.id || `${hash}_${Date.now()}`,
         hash,
-        selector: elementInfo?.selector || getElementSelector(element),
+        selector: persistedData?.selector || elementInfo?.selector || getElementSelector(element),
         // DOM references
         element,
         areaElement: null,
@@ -1307,207 +1401,183 @@ function getTopElementsByClicks(elementMapInfo, topN = 10) {
 }
 
 /**
- * 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)
+ * Build parent-child relationships between areas based on DOM hierarchy
+ * @param areas - Array of area nodes to build relationships for
  */
-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
+function buildAreaGraph(areas) {
+    // Clear existing relationships
     areas.forEach((area) => {
-        const hasOverlap = overlapGroups.some((group) => group.areas.includes(area));
-        if (!hasOverlap) {
-            visibleAreas.add(area);
-        }
+        area.parentNode = null;
+        area.childNodes.clear();
     });
-    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;
+    // 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);
+                }
+            }
         }
-        // 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
- */
-function resolveOverlapGroup(group, iframeDocument) {
-    const { areas } = group;
-    if (areas.length === 1)
-        return areas[0];
-    // Sort by priority rules
-    const sorted = [...areas].sort((a, b) => {
-        // Rule 1: Priority flag
-        if (a.priority !== b.priority) {
-            return a.priority ? -1 : 1;
-        }
-        // Rule 2: Click distribution
-        if (a.clickDist !== b.clickDist) {
-            return b.clickDist - a.clickDist;
-        }
-        // Rule 3: Total clicks
-        if (a.totalclicks !== b.totalclicks) {
-            return b.totalclicks - a.totalclicks;
+
+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;
+    }
+    /**
+     * Format message với prefix và timestamp
+     */
+    formatMessage(...args) {
+        const parts = [];
+        if (this.config.timestamp) {
+            parts.push(`[${new Date().toISOString()}]`);
         }
-        // Rule 4: DOM containment - parent beats child
-        if (iframeDocument) {
-            const aContainsB = isElementAncestorOf(a.element, b.element);
-            const bContainsA = isElementAncestorOf(b.element, a.element);
-            if (aContainsB)
-                return -1; // a is parent, a wins
-            if (bContainsA)
-                return 1; // b is parent, b wins
+        if (this.config.prefix) {
+            parts.push(`[${this.config.prefix}]`);
         }
-        // Rule 5: Size - smaller (more specific) wins
-        const aSize = (a.rect.value?.width || 0) * (a.rect.value?.height || 0);
-        const bSize = (b.rect.value?.width || 0) * (b.rect.value?.height || 0);
-        return aSize - bSize;
-    });
-    const winner = sorted[0];
-    group.winner = winner;
-    group.hidden = sorted.slice(1);
-    return winner;
-}
-/**
- * Filter out areas that are completely contained within others
- * and have lower priority
- */
-function filterContainedAreas(areas) {
-    const visible = [];
-    areas.forEach((area) => {
-        // Check if this area is contained by a higher priority area
-        const isContained = areas.some((other) => {
-            if (other.id === area.id)
-                return false;
-            // Check containment
-            if (!isAreaContainedIn(area, other))
-                return false;
-            // Check priority
-            if (other.priority && !area.priority)
-                return true;
-            if (!other.priority && area.priority)
-                return false;
-            // Compare by click dist
-            if (other.clickDist > area.clickDist)
-                return true;
-            if (other.clickDist < area.clickDist)
-                return false;
-            // Compare by total clicks
-            return other.totalclicks > area.totalclicks;
-        });
-        if (!isContained) {
-            visible.push(area);
-        }
-    });
-    return visible;
-}
-/**
- * Get visible areas after resolving overlaps
- */
-function getVisibleAreas(areas, iframeDocument) {
-    // First pass: filter contained areas
-    let visible = filterContainedAreas(areas);
-    // Second pass: resolve overlaps
-    visible = resolveOverlaps(visible, iframeDocument);
-    // Sort by click dist for rendering order
-    return sortAreasByClickDist(visible);
-}
-
-/**
- * Helper functions for setting up area renderer
- */
-/**
- * Create the outer container for area rendering
- */
-function createAreaContainer(iframeDocument) {
-    const container = iframeDocument.createElement('div');
-    container.setAttribute(AREA_MAP_DIV_ATTRIBUTE, 'true');
-    container.style.cssText = AREA_CONTAINER_STYLES;
-    return container;
-}
-/**
- * Create the inner container for React portal
- */
-function createInnerContainer(iframeDocument) {
-    const innerContainer = iframeDocument.createElement('div');
-    innerContainer.className = AREA_RENDERER_SELECTORS.innerContainerClass;
-    innerContainer.style.cssText = AREA_INNER_CONTAINER_STYLES;
-    return innerContainer;
-}
-/**
- * Get or create the outer container element
- */
-function getOrCreateAreaContainer(iframeDocument, customShadowRoot) {
-    let container = iframeDocument.querySelector(AREA_RENDERER_SELECTORS.containerSelector);
-    if (!container) {
-        container = createAreaContainer(iframeDocument);
-        const targetRoot = customShadowRoot || iframeDocument.body;
-        if (targetRoot) {
-            targetRoot.appendChild(container);
+        if (parts.length > 0) {
+            return [parts.join(' '), ...args];
         }
+        return args;
     }
-    return container;
-}
-function getOrCreateContainerShadowRoot(container) {
-    if (container.shadowRoot) {
-        return container.shadowRoot;
+    /**
+     * Log message
+     */
+    log(...args) {
+        if (!this.config.enabled)
+            return;
+        console.log(...this.formatMessage(...args));
     }
-    return container.attachShadow({ mode: 'open' });
-}
-function getOrCreateInnerContainer(shadowRoot, iframeDocument) {
-    let innerContainer = shadowRoot.querySelector(AREA_RENDERER_SELECTORS.innerContainerSelector);
-    if (!innerContainer) {
-        innerContainer = createInnerContainer(iframeDocument);
-        shadowRoot.appendChild(innerContainer);
+    /**
+     * Log info message
+     */
+    info(...args) {
+        if (!this.config.enabled)
+            return;
+        console.info(...this.formatMessage(...args));
     }
-    return innerContainer;
-}
-function setupAreaRenderingContainer(iframeDocument, customShadowRoot) {
-    const container = getOrCreateAreaContainer(iframeDocument, customShadowRoot);
-    const shadowRoot = getOrCreateContainerShadowRoot(container);
-    const innerContainer = getOrCreateInnerContainer(shadowRoot, iframeDocument);
-    return innerContainer;
-}
-function cleanupAreaRenderingContainer(container) {
-    if (container && container.parentNode) {
-        container.parentNode.removeChild(container);
+    /**
+     * Log warning message
+     */
+    warn(...args) {
+        if (!this.config.enabled)
+            return;
+        console.warn(...this.formatMessage(...args));
+    }
+    /**
+     * Log error message
+     */
+    error(...args) {
+        if (!this.config.enabled)
+            return;
+        console.error(...this.formatMessage(...args));
+    }
+    /**
+     * Log debug message
+     */
+    debug(...args) {
+        if (!this.config.enabled)
+            return;
+        console.debug(...this.formatMessage(...args));
+    }
+    /**
+     * Log table data
+     */
+    table(data) {
+        if (!this.config.enabled)
+            return;
+        console.table(data);
+    }
+    /**
+     * Start a group
+     */
+    group(label) {
+        if (!this.config.enabled)
+            return;
+        console.group(...this.formatMessage(label));
+    }
+    /**
+     * Start a collapsed group
+     */
+    groupCollapsed(label) {
+        if (!this.config.enabled)
+            return;
+        console.groupCollapsed(...this.formatMessage(label));
+    }
+    /**
+     * End a group
+     */
+    groupEnd() {
+        if (!this.config.enabled)
+            return;
+        console.groupEnd();
+    }
+    /**
+     * Start a timer
+     */
+    time(label) {
+        if (!this.config.enabled)
+            return;
+        console.time(label);
+    }
+    /**
+     * End a timer
+     */
+    timeEnd(label) {
+        if (!this.config.enabled)
+            return;
+        console.timeEnd(label);
     }
 }
+// Export singleton instance
+const logger$3 = new Logger();
+// Export factory function để tạo logger với config riêng
+function createLogger(config = {}) {
+    const instance = new Logger();
+    instance.configure(config);
+    return instance;
+}
 
 function findLastSizeOfDom(data) {
     const listDocs = data
@@ -1542,424 +1612,520 @@ function decodePayloads(payload) {
     }
 }
 
-/**
- * Generate unique element ID for a specific view
- * @param baseId - Base element ID
- * @param viewId - View ID
- * @returns Unique element ID (e.g., 'gx-hm-clicked-element-view-0')
- */
-const getElementId = (baseId, viewId) => {
-    return `${baseId}-${viewId}`;
-};
-const getClickedElementId = (viewId, isSecondary = false) => {
-    const baseId = isSecondary ? SECONDARY_CLICKED_ELEMENT_ID_BASE : CLICKED_ELEMENT_ID_BASE;
-    return getElementId(baseId, viewId);
-};
-const getHoveredElementId = (viewId, isSecondary = false) => {
-    const baseId = isSecondary ? SECONDARY_HOVERED_ELEMENT_ID_BASE : HOVERED_ELEMENT_ID_BASE;
-    return getElementId(baseId, viewId);
-};
-
-function getElementLayout(element) {
-    if (!element?.getBoundingClientRect)
-        return null;
-    const rect = element.getBoundingClientRect();
-    if (rect.width === 0 && rect.height === 0)
+function findElementByHash(props) {
+    const { hash, selector, iframeDocument, vizRef } = props;
+    if (vizRef) {
+        const element = vizRef.get(hash);
+        return element;
+    }
+    // Fallback
+    if (!iframeDocument)
         return null;
-    return {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-    };
+    try {
+        const element = selector ? iframeDocument.querySelector(selector) : null;
+        if (element) {
+            return element;
+        }
+    }
+    catch (error) {
+        logger$3.warn(`Invalid selector "${selector}":`, error);
+    }
+    const elementByHash = iframeDocument.querySelector(`[data-clarity-hashalpha="${hash}"], [data-clarity-hash="${hash}"], [data-clarity-hashbeta="${hash}"]`);
+    return elementByHash;
 }
-const getElementRank = (hash, elements) => {
-    if (!elements)
-        return 0;
-    return elements.findIndex((e) => e.hash === hash) + 1;
-};
-const buildElementInfo = (hash, rect, heatmapInfo) => {
-    if (!rect || !heatmapInfo)
+
+/**
+ * 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$3.warn(`Cannot hydrate area ${id}: element not found for hash ${hash} or selector ${selector}`);
         return null;
-    const info = heatmapInfo.elementMapInfo?.[hash];
-    if (!info)
+    }
+    const areaNode = buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData);
+    if (!areaNode)
         return null;
-    const rank = getElementRank(hash, heatmapInfo.sortedElements);
-    const clicks = info.totalclicks ?? 0;
-    const selector = info.selector ?? '';
-    const baseInfo = {
-        hash,
-        clicks,
-        rank,
-        selector,
-    };
-    return {
-        ...baseInfo,
-        ...rect,
-    };
-};
-
-function calculateRankPosition(rect, widthScale) {
-    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
-    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
-    return {
-        transform: `scale(${1.2 * widthScale})`,
-        top: Number.isNaN(top) ? undefined : top,
-        left: Number.isNaN(left) ? undefined : left,
-    };
+    return areaNode;
 }
-
-const getViewportDimensions = (containerElm) => {
-    if (containerElm) {
-        const containerRect = containerElm.getBoundingClientRect();
-        return {
-            width: containerRect.width,
-            height: containerRect.height,
-        };
+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$3.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
+    return hydratedAreas;
+}
+/**
+ * Serializes area node to persisted data for database storage
+ */
+function serializeAreaNode(area) {
     return {
-        width: window.innerWidth,
-        height: window.innerHeight,
+        kind: area.kind,
+        id: area.id,
+        hash: area.hash,
+        selector: area.selector,
     };
-};
-const getElementDimensions = (targetElm, calloutElm) => ({
-    targetRect: targetElm.getBoundingClientRect(),
-    calloutRect: calloutElm.getBoundingClientRect(),
-});
+}
+/**
+ * Serializes multiple areas for database storage
+ */
+function serializeAreas(areas) {
+    return areas.map(serializeAreaNode);
+}
 
-const getAlignmentOrder = (alignment) => {
-    switch (alignment) {
-        case 'center':
-            return ['center', 'left', 'right'];
-        case 'left':
-            return ['left', 'center', 'right'];
-        case 'right':
-            return ['right', 'center', 'left'];
-    }
-};
-const calculateLeftPosition = ({ targetRect, calloutRect, hozOffset, align, }) => {
-    switch (align) {
-        case 'left':
-            return targetRect.left + hozOffset;
-        case 'right':
-            return targetRect.right - calloutRect.width - hozOffset;
-        case 'center':
-        default:
-            return targetRect.left + targetRect.width / 2 - calloutRect.width / 2;
-    }
-};
-const calculateVerticalPosition = (targetRect, calloutRect, placement, padding, arrowSize) => {
-    return placement === 'top'
-        ? targetRect.top - calloutRect.height - padding - arrowSize
-        : targetRect.bottom + padding + arrowSize;
-};
-const calculateHorizontalPlacementPosition = (targetRect, calloutRect, placement, padding, arrowSize) => {
-    const top = targetRect.top + targetRect.height / 2 - calloutRect.height / 2;
-    const left = placement === 'right'
-        ? targetRect.right + padding + arrowSize
-        : targetRect.left - calloutRect.width - padding - arrowSize;
-    return { top, left };
-};
-
-const isLeftPositionValid = (leftPos, calloutWidth, viewportWidth, padding, containerRect) => {
-    if (containerRect) {
-        return (leftPos >= containerRect.left + padding &&
-            leftPos + calloutWidth <= containerRect.right - padding);
-    }
-    return leftPos >= padding && leftPos + calloutWidth <= viewportWidth - padding;
-};
-const isVerticalPositionValid = (targetRect, calloutRect, placement, viewportHeight, padding, arrowSize, containerRect) => {
-    if (containerRect) {
-        return placement === 'top'
-            ? targetRect.top - calloutRect.height - padding - arrowSize >= containerRect.top
-            : targetRect.bottom + calloutRect.height + padding + arrowSize <= containerRect.bottom;
-    }
-    return placement === 'top'
-        ? targetRect.top - calloutRect.height - padding - arrowSize > 0
-        : targetRect.bottom + calloutRect.height + padding + arrowSize < viewportHeight;
-};
-const isHorizontalPlacementValid = (targetRect, calloutRect, placement, viewportWidth, padding, arrowSize, containerRect) => {
-    if (containerRect) {
-        return placement === 'right'
-            ? targetRect.right + calloutRect.width + padding + arrowSize <= containerRect.right
-            : targetRect.left - calloutRect.width - padding - arrowSize >= containerRect.left;
-    }
-    return placement === 'right'
-        ? targetRect.right + calloutRect.width + padding + arrowSize < viewportWidth
-        : targetRect.left - calloutRect.width - padding - arrowSize > 0;
-};
-
-const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHeight, viewportWidth, alignment, hozOffset, padding, arrowSize, containerRect) => {
-    const candidates = [];
-    const placements = ['top', 'bottom'];
-    placements.forEach((placement) => {
-        const verticalPos = calculateVerticalPosition(targetRect, calloutRect, placement, padding, arrowSize);
-        const verticalValid = isVerticalPositionValid(targetRect, calloutRect, placement, viewportHeight, padding, arrowSize, containerRect);
-        const alignmentOrder = getAlignmentOrder(alignment);
-        alignmentOrder.forEach((align) => {
-            const horizontalPos = calculateLeftPosition({
-                targetRect,
-                calloutRect,
-                hozOffset,
-                align,
-            });
-            candidates.push({
-                placement,
-                top: verticalPos,
-                left: horizontalPos,
-                horizontalAlign: align,
-                valid: verticalValid &&
-                    isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding, containerRect),
-            });
+/**
+ * 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 candidates;
-};
-const generateHorizontalPositionCandidates = (targetRect, calloutRect, viewportWidth, padding, arrowSize, containerRect) => {
-    const placements = ['left', 'right'];
-    return placements.map((placement) => {
-        const { top, left } = calculateHorizontalPlacementPosition(targetRect, calloutRect, placement, padding, arrowSize);
-        return {
-            placement,
-            top,
-            left,
-            horizontalAlign: 'center',
-            valid: isHorizontalPlacementValid(targetRect, calloutRect, placement, viewportWidth, padding, arrowSize, containerRect),
-        };
+    return groups;
+}
+/**
+ * Resolve a single overlap group to find the winner
+ */
+function resolveOverlapGroup(group, iframeDocument) {
+    const { areas } = group;
+    if (areas.length === 1)
+        return areas[0];
+    // Sort by priority rules
+    const sorted = [...areas].sort((a, b) => {
+        // Rule 1: Priority flag
+        if (a.priority !== b.priority) {
+            return a.priority ? -1 : 1;
+        }
+        // Rule 2: Click distribution
+        if (a.clickDist !== b.clickDist) {
+            return b.clickDist - a.clickDist;
+        }
+        // Rule 3: Total clicks
+        if (a.totalclicks !== b.totalclicks) {
+            return b.totalclicks - a.totalclicks;
+        }
+        // Rule 4: DOM containment - parent beats child
+        if (iframeDocument) {
+            const aContainsB = isElementAncestorOf(a.element, b.element);
+            const bContainsA = isElementAncestorOf(b.element, a.element);
+            if (aContainsB)
+                return -1; // a is parent, a wins
+            if (bContainsA)
+                return 1; // b is parent, b wins
+        }
+        // Rule 5: Size - smaller (more specific) wins
+        const aSize = (a.rect.value?.width || 0) * (a.rect.value?.height || 0);
+        const bSize = (b.rect.value?.width || 0) * (b.rect.value?.height || 0);
+        return aSize - bSize;
     });
-};
-const generateAllPositionCandidates = (rectDimensions, viewport, alignment, hozOffset, padding, arrowSize, containerRect) => {
-    const { targetRect, calloutRect } = rectDimensions;
-    const verticalCandidates = generateVerticalPositionCandidates(targetRect, calloutRect, viewport.height, viewport.width, alignment, hozOffset, padding, arrowSize, containerRect);
-    const horizontalCandidates = generateHorizontalPositionCandidates(targetRect, calloutRect, viewport.width, padding, arrowSize, containerRect);
-    return [...verticalCandidates, ...horizontalCandidates];
-};
-
-const selectBestPosition = (candidates) => {
-    return candidates.find((p) => p.valid) || candidates[0];
-};
-const constrainToViewport = (position, calloutRect, viewport, padding, containerRect) => {
-    if (containerRect) {
-        const left = Math.max(containerRect.left + padding, Math.min(position.left, containerRect.right - calloutRect.width - padding));
-        const top = Math.max(containerRect.top + padding, Math.min(position.top, containerRect.bottom - calloutRect.height - padding));
-        return { top, left };
-    }
-    const left = Math.max(padding, Math.min(position.left, viewport.width - calloutRect.width - padding));
-    const top = Math.max(padding, Math.min(position.top, viewport.height - calloutRect.height - padding));
-    return { top, left };
-};
-
-const calcCalloutPosition = (options) => {
-    const { targetElm, calloutElm, setPosition, hozOffset = CALLOUT_HORIZONTAL_OFFSET, alignment = 'center', containerElm, } = options;
-    return () => {
-        // 1. Get dimensions
-        const rectDimensions = getElementDimensions(targetElm, calloutElm);
-        const viewport = getViewportDimensions(containerElm);
-        const containerRect = containerElm?.getBoundingClientRect();
-        const padding = CALLOUT_PADDING;
-        const arrowSize = CALLOUT_ARROW_SIZE;
-        // 2. Generate all position candidates
-        const candidates = generateAllPositionCandidates(rectDimensions, viewport, alignment, hozOffset, padding, arrowSize, containerRect);
-        // 3. Select best position
-        const bestPosition = selectBestPosition(candidates);
-        // 4. Constrain to viewport
-        const constrainedPosition = constrainToViewport({ top: bestPosition.top, left: bestPosition.left }, rectDimensions.calloutRect, viewport, padding, containerRect);
-        // 5. Create final position object
-        const finalPosition = {
-            top: constrainedPosition.top,
-            left: constrainedPosition.left,
-            placement: bestPosition.placement,
-            horizontalAlign: bestPosition.horizontalAlign,
-        };
-        setPosition(finalPosition);
-    };
-};
-
+    const winner = sorted[0];
+    group.winner = winner;
+    group.hidden = sorted.slice(1);
+    return winner;
+}
 /**
- * Get all elements at a specific point (x, y), with support for Shadow DOM
+ * Filter out areas that are completely contained within others
+ * and have lower priority
  */
-function getElementsAtPoint(doc, x, y, options = {}) {
-    const { filterFn, ignoreCanvas = true, visitedShadowRoots = new Set() } = options;
-    // Get all elements at this point
-    let elementsAtPoint = doc.elementsFromPoint(x, y);
-    // Filter out canvas elements if requested
-    if (ignoreCanvas) {
-        elementsAtPoint = elementsAtPoint.filter((el) => !isIgnoredCanvas(el));
-    }
-    // Apply custom filter if provided
-    if (filterFn) {
-        const matchedElement = elementsAtPoint.find(filterFn);
-        // If matched element has Shadow DOM and we haven't visited it yet, recurse
-        if (matchedElement?.shadowRoot && !visitedShadowRoots.has(matchedElement.shadowRoot)) {
-            visitedShadowRoots.add(matchedElement.shadowRoot);
-            return getElementsAtPoint(matchedElement.shadowRoot, x, y, {
-                ...options,
-                visitedShadowRoots,
-            });
+function filterContainedAreas(areas) {
+    const visible = [];
+    areas.forEach((area) => {
+        // Check if this area is contained by a higher priority area
+        const isContained = areas.some((other) => {
+            if (other.id === area.id)
+                return false;
+            // Check containment
+            if (!isAreaContainedIn(area, other))
+                return false;
+            // Check priority
+            if (other.priority && !area.priority)
+                return true;
+            if (!other.priority && area.priority)
+                return false;
+            // Compare by click dist
+            if (other.clickDist > area.clickDist)
+                return true;
+            if (other.clickDist < area.clickDist)
+                return false;
+            // Compare by total clicks
+            return other.totalclicks > area.totalclicks;
+        });
+        if (!isContained) {
+            visible.push(area);
         }
-    }
-    return elementsAtPoint;
+    });
+    return visible;
 }
 /**
- * Get the element at a specific point (x, y)
+ * Get visible areas after resolving overlaps
  */
-const getElementAtPoint = (doc, x, y) => {
-    let el = null;
-    if ('caretPositionFromPoint' in doc) {
-        el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
-    }
-    el = el ?? doc.elementFromPoint(x, y);
-    let element = el;
-    while (element && element.nodeType === Node.TEXT_NODE) {
-        element = element.parentElement;
-    }
-    return element;
-};
-function getElementHash(element) {
-    return (element.getAttribute('data-clarity-hash') ||
-        element.getAttribute('data-clarity-hashalpha') ||
-        element.getAttribute('data-clarity-hashbeta'));
+function getVisibleAreas(areas, iframeDocument) {
+    // First pass: filter contained areas
+    let visible = filterContainedAreas(areas);
+    // Second pass: resolve overlaps
+    visible = resolveOverlaps(visible, iframeDocument);
+    // Sort by click dist for rendering order
+    return sortAreasByClickDist(visible);
 }
 
-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;
-    }
-    /**
-     * Format message với prefix và timestamp
-     */
-    formatMessage(...args) {
-        const parts = [];
-        if (this.config.timestamp) {
-            parts.push(`[${new Date().toISOString()}]`);
-        }
-        if (this.config.prefix) {
-            parts.push(`[${this.config.prefix}]`);
-        }
-        if (parts.length > 0) {
-            return [parts.join(' '), ...args];
+/**
+ * Helper functions for setting up area renderer
+ */
+/**
+ * Create the outer container for area rendering
+ */
+function createAreaContainer(iframeDocument) {
+    const container = iframeDocument.createElement('div');
+    container.setAttribute(AREA_MAP_DIV_ATTRIBUTE, 'true');
+    container.style.cssText = AREA_CONTAINER_STYLES;
+    return container;
+}
+/**
+ * Create the inner container for React portal
+ */
+function createInnerContainer(iframeDocument) {
+    const innerContainer = iframeDocument.createElement('div');
+    innerContainer.className = AREA_RENDERER_SELECTORS.innerContainerClass;
+    innerContainer.style.cssText = AREA_INNER_CONTAINER_STYLES;
+    return innerContainer;
+}
+/**
+ * Get or create the outer container element
+ */
+function getOrCreateAreaContainer(iframeDocument, customShadowRoot) {
+    let container = iframeDocument.querySelector(AREA_RENDERER_SELECTORS.containerSelector);
+    if (!container) {
+        container = createAreaContainer(iframeDocument);
+        const targetRoot = customShadowRoot || iframeDocument.body;
+        if (targetRoot) {
+            targetRoot.appendChild(container);
         }
-        return args;
-    }
-    /**
-     * Log message
-     */
-    log(...args) {
-        if (!this.config.enabled)
-            return;
-        console.log(...this.formatMessage(...args));
     }
-    /**
-     * Log info message
-     */
-    info(...args) {
-        if (!this.config.enabled)
-            return;
-        console.info(...this.formatMessage(...args));
+    return container;
+}
+function getOrCreateContainerShadowRoot(container) {
+    if (container.shadowRoot) {
+        return container.shadowRoot;
     }
-    /**
-     * Log warning message
-     */
-    warn(...args) {
-        if (!this.config.enabled)
-            return;
-        console.warn(...this.formatMessage(...args));
+    return container.attachShadow({ mode: 'open' });
+}
+function getOrCreateInnerContainer(shadowRoot, iframeDocument) {
+    let innerContainer = shadowRoot.querySelector(AREA_RENDERER_SELECTORS.innerContainerSelector);
+    if (!innerContainer) {
+        innerContainer = createInnerContainer(iframeDocument);
+        shadowRoot.appendChild(innerContainer);
     }
-    /**
-     * Log error message
-     */
-    error(...args) {
-        if (!this.config.enabled)
-            return;
-        console.error(...this.formatMessage(...args));
+    return innerContainer;
+}
+function setupAreaRenderingContainer(iframeDocument, customShadowRoot) {
+    const container = getOrCreateAreaContainer(iframeDocument, customShadowRoot);
+    const shadowRoot = getOrCreateContainerShadowRoot(container);
+    const innerContainer = getOrCreateInnerContainer(shadowRoot, iframeDocument);
+    return innerContainer;
+}
+function cleanupAreaRenderingContainer(container) {
+    if (container && container.parentNode) {
+        container.parentNode.removeChild(container);
     }
-    /**
-     * Log debug message
-     */
-    debug(...args) {
-        if (!this.config.enabled)
-            return;
-        console.debug(...this.formatMessage(...args));
+}
+
+/**
+ * Generate unique element ID for a specific view
+ * @param baseId - Base element ID
+ * @param viewId - View ID
+ * @returns Unique element ID (e.g., 'gx-hm-clicked-element-view-0')
+ */
+const getElementId = (baseId, viewId) => {
+    return `${baseId}-${viewId}`;
+};
+const getClickedElementId = (viewId, isSecondary = false) => {
+    const baseId = isSecondary ? SECONDARY_CLICKED_ELEMENT_ID_BASE : CLICKED_ELEMENT_ID_BASE;
+    return getElementId(baseId, viewId);
+};
+const getHoveredElementId = (viewId, isSecondary = false) => {
+    const baseId = isSecondary ? SECONDARY_HOVERED_ELEMENT_ID_BASE : HOVERED_ELEMENT_ID_BASE;
+    return getElementId(baseId, viewId);
+};
+
+function getElementLayout(element) {
+    if (!element?.getBoundingClientRect)
+        return null;
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0)
+        return null;
+    return {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+const getElementRank = (hash, elements) => {
+    if (!elements)
+        return 0;
+    return elements.findIndex((e) => e.hash === hash) + 1;
+};
+const buildElementInfo = (hash, rect, heatmapInfo) => {
+    if (!rect || !heatmapInfo)
+        return null;
+    const info = heatmapInfo.elementMapInfo?.[hash];
+    if (!info)
+        return null;
+    const rank = getElementRank(hash, heatmapInfo.sortedElements);
+    const clicks = info.totalclicks ?? 0;
+    const selector = info.selector ?? '';
+    const baseInfo = {
+        hash,
+        clicks,
+        rank,
+        selector,
+    };
+    return {
+        ...baseInfo,
+        ...rect,
+    };
+};
+
+function calculateRankPosition(rect, widthScale) {
+    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
+    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
+    return {
+        transform: `scale(${1.2 * widthScale})`,
+        top: Number.isNaN(top) ? undefined : top,
+        left: Number.isNaN(left) ? undefined : left,
+    };
+}
+
+const getViewportDimensions = (containerElm) => {
+    if (containerElm) {
+        const containerRect = containerElm.getBoundingClientRect();
+        return {
+            width: containerRect.width,
+            height: containerRect.height,
+        };
     }
-    /**
-     * Log table data
-     */
-    table(data) {
-        if (!this.config.enabled)
-            return;
-        console.table(data);
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+};
+const getElementDimensions = (targetElm, calloutElm) => ({
+    targetRect: targetElm.getBoundingClientRect(),
+    calloutRect: calloutElm.getBoundingClientRect(),
+});
+
+const getAlignmentOrder = (alignment) => {
+    switch (alignment) {
+        case 'center':
+            return ['center', 'left', 'right'];
+        case 'left':
+            return ['left', 'center', 'right'];
+        case 'right':
+            return ['right', 'center', 'left'];
     }
-    /**
-     * Start a group
-     */
-    group(label) {
-        if (!this.config.enabled)
-            return;
-        console.group(...this.formatMessage(label));
+};
+const calculateLeftPosition = ({ targetRect, calloutRect, hozOffset, align, }) => {
+    switch (align) {
+        case 'left':
+            return targetRect.left + hozOffset;
+        case 'right':
+            return targetRect.right - calloutRect.width - hozOffset;
+        case 'center':
+        default:
+            return targetRect.left + targetRect.width / 2 - calloutRect.width / 2;
     }
-    /**
-     * Start a collapsed group
-     */
-    groupCollapsed(label) {
-        if (!this.config.enabled)
-            return;
-        console.groupCollapsed(...this.formatMessage(label));
+};
+const calculateVerticalPosition = (targetRect, calloutRect, placement, padding, arrowSize) => {
+    return placement === 'top'
+        ? targetRect.top - calloutRect.height - padding - arrowSize
+        : targetRect.bottom + padding + arrowSize;
+};
+const calculateHorizontalPlacementPosition = (targetRect, calloutRect, placement, padding, arrowSize) => {
+    const top = targetRect.top + targetRect.height / 2 - calloutRect.height / 2;
+    const left = placement === 'right'
+        ? targetRect.right + padding + arrowSize
+        : targetRect.left - calloutRect.width - padding - arrowSize;
+    return { top, left };
+};
+
+const isLeftPositionValid = (leftPos, calloutWidth, viewportWidth, padding, containerRect) => {
+    if (containerRect) {
+        return leftPos >= containerRect.left + padding && leftPos + calloutWidth <= containerRect.right - padding;
     }
-    /**
-     * End a group
-     */
-    groupEnd() {
-        if (!this.config.enabled)
-            return;
-        console.groupEnd();
+    return leftPos >= padding && leftPos + calloutWidth <= viewportWidth - padding;
+};
+const isVerticalPositionValid = (targetRect, calloutRect, placement, viewportHeight, padding, arrowSize, containerRect) => {
+    if (containerRect) {
+        return placement === 'top'
+            ? targetRect.top - calloutRect.height - padding - arrowSize >= containerRect.top
+            : targetRect.bottom + calloutRect.height + padding + arrowSize <= containerRect.bottom;
     }
-    /**
-     * Start a timer
-     */
-    time(label) {
-        if (!this.config.enabled)
-            return;
-        console.time(label);
+    return placement === 'top'
+        ? targetRect.top - calloutRect.height - padding - arrowSize > 0
+        : targetRect.bottom + calloutRect.height + padding + arrowSize < viewportHeight;
+};
+const isHorizontalPlacementValid = (targetRect, calloutRect, placement, viewportWidth, padding, arrowSize, containerRect) => {
+    if (containerRect) {
+        return placement === 'right'
+            ? targetRect.right + calloutRect.width + padding + arrowSize <= containerRect.right
+            : targetRect.left - calloutRect.width - padding - arrowSize >= containerRect.left;
     }
-    /**
-     * End a timer
-     */
-    timeEnd(label) {
-        if (!this.config.enabled)
-            return;
-        console.timeEnd(label);
+    return placement === 'right'
+        ? targetRect.right + calloutRect.width + padding + arrowSize < viewportWidth
+        : targetRect.left - calloutRect.width - padding - arrowSize > 0;
+};
+
+const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHeight, viewportWidth, alignment, hozOffset, padding, arrowSize, containerRect) => {
+    const candidates = [];
+    const placements = ['top', 'bottom'];
+    placements.forEach((placement) => {
+        const verticalPos = calculateVerticalPosition(targetRect, calloutRect, placement, padding, arrowSize);
+        const verticalValid = isVerticalPositionValid(targetRect, calloutRect, placement, viewportHeight, padding, arrowSize, containerRect);
+        const alignmentOrder = getAlignmentOrder(alignment);
+        alignmentOrder.forEach((align) => {
+            const horizontalPos = calculateLeftPosition({
+                targetRect,
+                calloutRect,
+                hozOffset,
+                align,
+            });
+            candidates.push({
+                placement,
+                top: verticalPos,
+                left: horizontalPos,
+                horizontalAlign: align,
+                valid: verticalValid && isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding, containerRect),
+            });
+        });
+    });
+    return candidates;
+};
+const generateHorizontalPositionCandidates = (targetRect, calloutRect, viewportWidth, padding, arrowSize, containerRect) => {
+    const placements = ['left', 'right'];
+    return placements.map((placement) => {
+        const { top, left } = calculateHorizontalPlacementPosition(targetRect, calloutRect, placement, padding, arrowSize);
+        return {
+            placement,
+            top,
+            left,
+            horizontalAlign: 'center',
+            valid: isHorizontalPlacementValid(targetRect, calloutRect, placement, viewportWidth, padding, arrowSize, containerRect),
+        };
+    });
+};
+const generateAllPositionCandidates = (rectDimensions, viewport, alignment, hozOffset, padding, arrowSize, containerRect) => {
+    const { targetRect, calloutRect } = rectDimensions;
+    const verticalCandidates = generateVerticalPositionCandidates(targetRect, calloutRect, viewport.height, viewport.width, alignment, hozOffset, padding, arrowSize, containerRect);
+    const horizontalCandidates = generateHorizontalPositionCandidates(targetRect, calloutRect, viewport.width, padding, arrowSize, containerRect);
+    return [...verticalCandidates, ...horizontalCandidates];
+};
+
+const selectBestPosition = (candidates) => {
+    return candidates.find((p) => p.valid) || candidates[0];
+};
+const constrainToViewport = (position, calloutRect, viewport, padding, containerRect) => {
+    if (containerRect) {
+        const left = Math.max(containerRect.left + padding, Math.min(position.left, containerRect.right - calloutRect.width - padding));
+        const top = Math.max(containerRect.top + padding, Math.min(position.top, containerRect.bottom - calloutRect.height - padding));
+        return { top, left };
     }
-}
-// Export singleton instance
-const logger = new Logger();
+    const left = Math.max(padding, Math.min(position.left, viewport.width - calloutRect.width - padding));
+    const top = Math.max(padding, Math.min(position.top, viewport.height - calloutRect.height - padding));
+    return { top, left };
+};
+
+const calcCalloutPosition = (options) => {
+    const { targetElm, calloutElm, setPosition, hozOffset = CALLOUT_HORIZONTAL_OFFSET, alignment = 'center', containerElm, } = options;
+    return () => {
+        // 1. Get dimensions
+        const rectDimensions = getElementDimensions(targetElm, calloutElm);
+        const viewport = getViewportDimensions(containerElm);
+        const containerRect = containerElm?.getBoundingClientRect();
+        const padding = CALLOUT_PADDING;
+        const arrowSize = CALLOUT_ARROW_SIZE;
+        // 2. Generate all position candidates
+        const candidates = generateAllPositionCandidates(rectDimensions, viewport, alignment, hozOffset, padding, arrowSize, containerRect);
+        // 3. Select best position
+        const bestPosition = selectBestPosition(candidates);
+        // 4. Constrain to viewport
+        const constrainedPosition = constrainToViewport({ top: bestPosition.top, left: bestPosition.left }, rectDimensions.calloutRect, viewport, padding, containerRect);
+        // 5. Create final position object
+        const finalPosition = {
+            top: constrainedPosition.top,
+            left: constrainedPosition.left,
+            placement: bestPosition.placement,
+            horizontalAlign: bestPosition.horizontalAlign,
+        };
+        setPosition(finalPosition);
+    };
+};
 
+const logger$2 = createLogger({
+    enabled: false,
+    prefix: 'IframeNavigationBlockerV2',
+});
 class IframeNavigationBlockerV2 {
     doc;
     win;
@@ -1974,11 +2140,11 @@ class IframeNavigationBlockerV2 {
         this.doc = iframe.contentDocument;
         this.win = iframe.contentWindow;
         this.originalWindowOpen = this.win.open.bind(this.win);
-        logger.configure({ enabled: !!config?.debug, prefix: '[IframeNavigationBlockerV2]' });
+        logger$2.configure({ enabled: !!config?.debug });
         this.init();
     }
     init() {
-        logger.log('Initializing...');
+        logger$2.log('Initializing...');
         try {
             // Chặn navigation qua links
             this.blockLinkNavigation();
@@ -1994,7 +2160,7 @@ class IframeNavigationBlockerV2 {
             this.injectCSP();
         }
         catch (error) {
-            logger.error('Init error:', error);
+            logger$2.error('Init error:', error);
         }
     }
     blockLinkNavigation() {
@@ -2008,11 +2174,11 @@ class IframeNavigationBlockerV2 {
                 const href = link.getAttribute('href');
                 // Cho phép hash links và empty links
                 if (!href || href === '' || href === '#' || href.startsWith('#')) {
-                    logger.log('Allowed hash navigation:', href);
+                    logger$2.log('Allowed hash navigation:', href);
                     return;
                 }
                 // Chặn tất cả các loại navigation
-                logger.log('Blocked link navigation to:', href);
+                logger$2.log('Blocked link navigation to:', href);
                 e.preventDefault();
                 e.stopPropagation();
                 e.stopImmediatePropagation();
@@ -2028,7 +2194,7 @@ class IframeNavigationBlockerV2 {
             if (link) {
                 const href = link.getAttribute('href');
                 if (href && !href.startsWith('#')) {
-                    logger.log('Blocked auxclick navigation');
+                    logger$2.log('Blocked auxclick navigation');
                     e.preventDefault();
                     e.stopPropagation();
                     e.stopImmediatePropagation();
@@ -2061,13 +2227,13 @@ class IframeNavigationBlockerV2 {
             const action = form.getAttribute('action');
             // Cho phép forms không có action
             if (!action || action === '' || action === '#') {
-                logger.log('Allowed same-page form');
+                logger$2.log('Allowed same-page form');
                 e.preventDefault();
                 this.handleFormSubmit(form);
                 return;
             }
             // Chặn tất cả external submissions
-            logger.log('Blocked form submission to:', action);
+            logger$2.log('Blocked form submission to:', action);
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
@@ -2081,7 +2247,7 @@ class IframeNavigationBlockerV2 {
                 return this.originalWindowOpen(...args);
             }
             const url = args[0]?.toString() || 'popup';
-            logger.log('Blocked window.open:', url);
+            logger$2.log('Blocked window.open:', url);
             this.notifyBlockedNavigation(url);
             return null;
         });
@@ -2091,7 +2257,7 @@ class IframeNavigationBlockerV2 {
         this.win.addEventListener('beforeunload', (e) => {
             if (!this.isEnabled)
                 return;
-            logger.log('Blocked beforeunload');
+            logger$2.log('Blocked beforeunload');
             e.preventDefault();
             e.returnValue = '';
             return '';
@@ -2100,7 +2266,7 @@ class IframeNavigationBlockerV2 {
         this.win.addEventListener('unload', (e) => {
             if (!this.isEnabled)
                 return;
-            logger.log('Blocked unload');
+            logger$2.log('Blocked unload');
             e.preventDefault();
             e.stopPropagation();
         }, true);
@@ -2108,7 +2274,7 @@ class IframeNavigationBlockerV2 {
         this.win.addEventListener('popstate', (e) => {
             if (!this.isEnabled)
                 return;
-            logger.log('Blocked popstate');
+            logger$2.log('Blocked popstate');
             e.preventDefault();
             e.stopPropagation();
         }, true);
@@ -2161,11 +2327,11 @@ class IframeNavigationBlockerV2 {
                 meta.httpEquiv = 'Content-Security-Policy';
                 meta.content = "navigate-to 'none'"; // Chặn tất cả navigation
                 this.doc.head.appendChild(meta);
-                logger.log('Injected CSP');
+                logger$2.log('Injected CSP');
             }
         }
         catch (error) {
-            logger.warn('Could not inject CSP:', error);
+            logger$2.warn('Could not inject CSP:', error);
         }
     }
     handleFormSubmit(form) {
@@ -2174,13 +2340,13 @@ class IframeNavigationBlockerV2 {
         formData.forEach((value, key) => {
             data[key] = value;
         });
-        logger.log('Handling form data:', data);
+        logger$2.log('Handling form data:', data);
         window.dispatchEvent(new CustomEvent('iframe-form-submit', {
             detail: { form, data },
         }));
     }
     notifyBlockedNavigation(url) {
-        logger.warn('Navigation blocked to:', url);
+        logger$2.warn('Navigation blocked to:', url);
         window.dispatchEvent(new CustomEvent('iframe-navigation-blocked', {
             detail: { url, timestamp: Date.now() },
         }));
@@ -2230,19 +2396,19 @@ class IframeNavigationBlockerV2 {
     }
     enable() {
         this.isEnabled = true;
-        logger.log('Enabled');
+        logger$2.log('Enabled');
     }
     enableMessage() {
         this.showMessage = true;
-        logger.log('Enabled message');
+        logger$2.log('Enabled message');
     }
     disable() {
         this.isEnabled = false;
-        logger.log('Disabled');
+        logger$2.log('Disabled');
     }
     disableMessage() {
         this.showMessage = false;
-        logger.log('Disabled message');
+        logger$2.log('Disabled message');
     }
     destroy() {
         this.isEnabled = false;
@@ -2250,10 +2416,14 @@ class IframeNavigationBlockerV2 {
         // Cleanup observers
         this.observers.forEach((observer) => observer.disconnect());
         this.observers = [];
-        logger.log('Destroyed');
+        logger$2.log('Destroyed');
     }
 }
 
+const logger$1 = createLogger({
+    enabled: false,
+    prefix: 'IframeStyleReplacer',
+});
 class IframeStyleReplacer {
     doc;
     win;
@@ -2266,7 +2436,7 @@ class IframeStyleReplacer {
         this.doc = iframe.contentDocument;
         this.win = iframe.contentWindow;
         this.config = config;
-        logger.configure({ enabled: !!config?.debug, prefix: '[IframeStyleReplacer]' });
+        logger$1.configure({ enabled: !!config?.debug });
     }
     px(value) {
         return `${value.toFixed(2)}px`;
@@ -2300,7 +2470,7 @@ class IframeStyleReplacer {
                 count++;
             }
         });
-        logger.log(`Replaced ${count} inline style elements`);
+        logger$1.log(`Replaced ${count} inline style elements`);
         return count;
     }
     processStyleTags() {
@@ -2313,7 +2483,7 @@ class IframeStyleReplacer {
                 count++;
             }
         });
-        logger.log(`Replaced ${count} <style> tags`);
+        logger$1.log(`Replaced ${count} <style> tags`);
         return count;
     }
     processRule(rule) {
@@ -2344,7 +2514,7 @@ class IframeStyleReplacer {
             try {
                 // Bỏ qua external CSS (cross-origin)
                 if (sheet.href && !sheet.href.startsWith(this.win.location.origin)) {
-                    logger.log('Skipping external CSS:', sheet.href);
+                    logger$1.log('Skipping external CSS:', sheet.href);
                     return;
                 }
                 const rules = sheet.cssRules || sheet.rules;
@@ -2355,10 +2525,10 @@ class IframeStyleReplacer {
                 }
             }
             catch (e) {
-                logger.warn('Cannot read stylesheet (CORS?):', e.message);
+                logger$1.warn('Cannot read stylesheet (CORS?):', e.message);
             }
         });
-        logger.log(`Replaced ${total} rules in stylesheets`);
+        logger$1.log(`Replaced ${total} rules in stylesheets`);
         return total;
     }
     async processLinkedStylesheets() {
@@ -2366,7 +2536,7 @@ class IframeStyleReplacer {
         let count = 0;
         for (const link of Array.from(links)) {
             if (!link.href.startsWith(this.win.location.origin)) {
-                logger.log('Skipping external CSS:', link.href);
+                logger$1.log('Skipping external CSS:', link.href);
                 continue;
             }
             try {
@@ -2384,10 +2554,10 @@ class IframeStyleReplacer {
                 }
             }
             catch (e) {
-                logger.warn('Cannot load CSS:', link.href, e);
+                logger$1.warn('Cannot load CSS:', link.href, e);
             }
         }
-        logger.log(`Replaced ${count} linked CSS files`);
+        logger$1.log(`Replaced ${count} linked CSS files`);
         return count;
     }
     getFinalHeight() {
@@ -2411,7 +2581,7 @@ class IframeStyleReplacer {
     }
     async run() {
         try {
-            logger.log('Starting viewport units replacement...');
+            logger$1.log('Starting viewport units replacement...');
             this.processInlineStyles();
             this.processStyleTags();
             this.processStylesheets();
@@ -2421,13 +2591,13 @@ class IframeStyleReplacer {
                 requestAnimationFrame(() => {
                     const height = this.getFinalHeight();
                     const width = this.getFinalWidth();
-                    logger.log('Calculated dimensions:', { height, width });
+                    logger$1.log('Calculated dimensions:', { height, width });
                     resolve({ height, width });
                 });
             });
         }
         catch (err) {
-            logger.error('Critical error:', err);
+            logger$1.error('Critical error:', err);
             return {
                 height: this.doc.body.scrollHeight || 1000,
                 width: this.doc.body.scrollWidth || 1000,
@@ -2439,6 +2609,10 @@ class IframeStyleReplacer {
     }
 }
 
+const logger = createLogger({
+    enabled: false,
+    prefix: 'IframeHelper',
+});
 class IframeHelperFixer {
     iframe;
     config;
@@ -2448,7 +2622,7 @@ class IframeHelperFixer {
         this.config = config;
         this.iframe = config.iframe;
         this.init();
-        logger.configure({ enabled: !!config?.debug, prefix: '[IframeHelper]' });
+        logger.configure({ enabled: !!config?.debug });
     }
     async init() {
         if (!this.iframe) {
@@ -2475,7 +2649,7 @@ class IframeHelperFixer {
             // Create replacer instance
             this.replacer = new IframeStyleReplacer(this.iframe, this.config);
             // Create navigation blocker
-            this.navigationBlocker = new IframeNavigationBlockerV2(this.iframe);
+            this.navigationBlocker = new IframeNavigationBlockerV2(this.iframe, { debug: this.config.debug });
             // Run replacement
             const result = await this.replacer.run();
             logger.log('Process completed:', result);
@@ -2535,49 +2709,103 @@ function initIframeHelperFixer(config) {
     return fixer;
 }
 
+function validateAreaCreation(dataInfo, hash, areas) {
+    if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks) {
+        logger$3.warn('Cannot create area: missing heatmap data');
+        return false;
+    }
+    if (!hash) {
+        logger$3.warn('Cannot create area: missing hash');
+        return false;
+    }
+    const alreadyExists = areas.some((area) => area.hash === hash);
+    if (alreadyExists) {
+        logger$3.warn(`Area already exists for element: ${hash}`);
+        return false;
+    }
+    return true;
+}
+function identifyConflictingAreas(area) {
+    const conflicts = {
+        parentId: null,
+        childrenIds: [],
+    };
+    // Case 1: New area is a child of an existing area
+    if (area.parentNode) {
+        conflicts.parentId = area.parentNode.id;
+        logger$3.info(`New area "${area.selector}" is a child of existing area "${area.parentNode.selector}". Will remove parent.`);
+    }
+    // Case 2: New area is a parent of existing area(s)
+    if (area.childNodes.size > 0) {
+        area.childNodes.forEach((childArea) => {
+            conflicts.childrenIds.push(childArea.id);
+        });
+        logger$3.info(`New area "${area.selector}" is a parent of ${area.childNodes.size} existing area(s). Will remove children.`);
+    }
+    return conflicts;
+}
+function clearGraphRelationships(area) {
+    area.parentNode = null;
+    area.childNodes.clear();
+}
+function removeConflictingAreas(conflicts, removeArea) {
+    if (conflicts.parentId) {
+        removeArea(conflicts.parentId);
+    }
+    conflicts.childrenIds.forEach((childId) => {
+        removeArea(childId);
+    });
+}
 function useAreaCreation(options = {}) {
     const { customShadowRoot, onAreaCreated } = options;
     const { dataInfo } = useHeatmapData();
-    const { areas, addArea } = useHeatmapAreaClick();
-    const handleCreateAreaFromElement = useCallback((element) => {
-        if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks) {
-            logger.warn('Cannot create area: missing heatmap data');
+    const { areas, addArea, removeArea } = useHeatmapAreaClick();
+    const onAreaCreatedElement = useCallback((element) => {
+        if (!dataInfo)
             return;
-        }
         const hash = getElementHash(element);
-        if (!hash) {
-            logger.warn('Cannot create area: missing hash');
-            return;
-        }
-        const alreadyExists = areas.some((area) => area.hash === hash);
-        if (alreadyExists) {
-            logger.warn(`Area already exists for element: ${hash}`);
+        if (!validateAreaCreation(dataInfo, hash, areas)) {
             return;
         }
         try {
             const area = buildAreaNode(element, hash, dataInfo, customShadowRoot);
             if (!area)
                 return;
+            const tempAreas = [...areas, area];
+            buildAreaGraph(tempAreas);
+            const conflicts = identifyConflictingAreas(area);
+            clearGraphRelationships(area);
             addArea(area);
+            removeConflictingAreas(conflicts, removeArea);
             if (onAreaCreated) {
                 onAreaCreated(area);
             }
         }
         catch (error) {
-            logger.error('Failed to create area:', error);
+            logger$3.error('Failed to create area:', error);
         }
-    }, [dataInfo, areas, addArea, customShadowRoot]);
+    }, [dataInfo, areas, addArea, removeArea, customShadowRoot, onAreaCreated]);
     return {
-        onAreaCreatedElement: handleCreateAreaFromElement,
+        onAreaCreatedElement,
     };
 }
 
 function useAreaEditMode({ iframeRef, onAreaCreatedElement, enabled = false, }) {
     const [hoveredElement, setHoveredElement] = useState(null);
     const [isHovering, setIsHovering] = useState(false);
+    // Use ref to always get latest hoveredElement without causing re-renders
+    const hoveredElementRef = useRef(null);
+    const onAreaCreatedElementRef = useRef(onAreaCreatedElement);
     const { isEditingMode } = useHeatmapAreaClick();
     const iframeDocument = iframeRef.current?.contentDocument;
     const isActive = enabled && isEditingMode;
+    // Keep refs in sync
+    useEffect(() => {
+        hoveredElementRef.current = hoveredElement;
+    }, [hoveredElement]);
+    useEffect(() => {
+        onAreaCreatedElementRef.current = onAreaCreatedElement;
+    }, [onAreaCreatedElement]);
     const handleMouseMove = useCallback((e) => {
         if (!isActive || !iframeDocument)
             return;
@@ -2596,15 +2824,17 @@ function useAreaEditMode({ iframeRef, onAreaCreatedElement, enabled = false, })
         setHoveredElement(null);
         setIsHovering(false);
     }, []);
-    useCallback((e) => {
-        if (!isActive || !hoveredElement)
+    const handleClick = useCallback((e) => {
+        const currentHoveredElement = hoveredElementRef.current;
+        const currentCallback = onAreaCreatedElementRef.current;
+        if (!isActive || !currentHoveredElement)
             return;
         e.stopPropagation();
         e.preventDefault();
-        if (!onAreaCreatedElement)
+        if (!currentCallback)
             return;
-        onAreaCreatedElement(hoveredElement);
-    }, [isActive, hoveredElement]);
+        currentCallback(currentHoveredElement);
+    }, [isActive]);
     useEffect(() => {
         if (!isActive || !iframeDocument) {
             setHoveredElement(null);
@@ -2624,7 +2854,7 @@ function useAreaEditMode({ iframeRef, onAreaCreatedElement, enabled = false, })
         iframeDocument.addEventListener('mousemove', throttledMouseMove);
         iframeDocument.addEventListener('scroll', handleMouseLeave);
         iframeDocument.removeEventListener('mouseleave', handleMouseLeave);
-        // iframeDocument.addEventListener('click', handleClick);
+        iframeDocument.addEventListener('click', handleClick);
         return () => {
             if (rafId) {
                 cancelAnimationFrame(rafId);
@@ -2632,7 +2862,7 @@ function useAreaEditMode({ iframeRef, onAreaCreatedElement, enabled = false, })
             iframeDocument.removeEventListener('mousemove', throttledMouseMove);
             iframeDocument.removeEventListener('mouseleave', handleMouseLeave);
             iframeDocument.removeEventListener('scroll', handleMouseLeave);
-            // iframeDocument.removeEventListener('click', handleClick);
+            iframeDocument.removeEventListener('click', handleClick);
         };
     }, [isActive, iframeDocument]);
     return {
@@ -2660,12 +2890,48 @@ const useAreaFilterVisible = (props) => {
     return {};
 };
 
-/**
- * Hook to handle area interaction (click, hover)
- *
- * @param options - Configuration options
- * @returns Event handlers for area interactions
- */
+function useAreaHydration(options) {
+    const { shadowRoot, enabled = true } = options;
+    const [isInitializing, setIsInitializing] = useState(false);
+    const { dataInfo, clickAreas } = useHeatmapData();
+    const { vizRef } = useHeatmapViz();
+    const { areas, setAreas } = useHeatmapAreaClick();
+    const hydratePersistedAreas = useCallback(() => {
+        if (isInitializing)
+            return;
+        if (!vizRef)
+            return;
+        if (!clickAreas)
+            return;
+        if (!dataInfo)
+            return;
+        logger$3.info(`Hydrating ${clickAreas.length} persisted areas...`);
+        const hydratedAreas = hydrateAreas({ clickAreas, heatmapInfo: dataInfo, vizRef, shadowRoot });
+        if (!hydratedAreas?.length) {
+            logger$3.warn('No areas could be hydrated - all elements may have been removed from DOM');
+            return;
+        }
+        setIsInitializing(true);
+        buildAreaGraph(hydratedAreas);
+        setAreas(hydratedAreas);
+        logger$3.info(`Successfully hydrated ${hydratedAreas.length} areas`);
+    }, [dataInfo, vizRef, isInitializing, clickAreas]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        if (!dataInfo)
+            return;
+        if (!clickAreas)
+            return;
+        if (areas.length)
+            return;
+        hydratePersistedAreas();
+    }, [enabled, dataInfo, clickAreas, areas.length, hydratePersistedAreas]);
+    return {
+        hydratePersistedAreas,
+    };
+}
+
 function useAreaInteraction(options = {}) {
     const { onAreaClick } = options;
     const { selectedArea, hoveredArea, isEditingMode, setSelectedArea, setHoveredArea } = useHeatmapAreaClick();
@@ -2760,9 +3026,10 @@ function useAreaRectSync(options) {
                 area.rect.update(newRect);
             }
             catch (error) {
-                logger.error(`Failed to update rect for area ${area.id}:`, error);
+                logger$3.error(`Failed to update rect for area ${area.id}:`, error);
             }
         });
+        buildAreaGraph(areas);
     }, [areas, iframeDocument, shadowRoot, enabled, vizRef]);
 }
 
@@ -3224,22 +3491,26 @@ function useAreaScrollSync(options) {
 }
 
 const useAreaTopAutoDetect = (props) => {
-    const { iframeRef, autoCreateTopN, shadowRoot } = props;
-    const iframeDocument = iframeRef.current?.contentDocument;
-    const { dataInfo } = useHeatmapData();
+    const { autoCreateTopN, shadowRoot, disabled = false } = props;
+    const [isInitializing, setIsInitializing] = useState(disabled);
+    const { dataInfo, clickAreas } = useHeatmapData();
     const { vizRef } = useHeatmapViz();
     const { areas, addArea } = useHeatmapAreaClick();
     useEffect(() => {
+        if (isInitializing)
+            return;
         if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks)
             return;
-        if (autoCreateTopN <= 0)
+        if (!autoCreateTopN)
+            return;
+        if (clickAreas?.length)
             return;
-        if (areas.length > 0)
+        if (areas?.length)
             return;
         const topElements = getTopElementsByClicks(dataInfo.elementMapInfo, autoCreateTopN);
         const newAreas = [];
         topElements.forEach(({ hash }) => {
-            const element = vizRef?.get(hash);
+            const element = findElementByHash({ hash, vizRef });
             if (!element)
                 return;
             const area = buildAreaNode(element, hash, dataInfo);
@@ -3247,8 +3518,16 @@ const useAreaTopAutoDetect = (props) => {
                 return;
             newAreas.push(area);
         });
-        newAreas.forEach((area) => addArea(area));
-    }, [dataInfo, autoCreateTopN, areas.length, iframeDocument, shadowRoot]); // eslint-disable-line react-hooks/exhaustive-deps
+        buildAreaGraph(newAreas);
+        const areasToAdd = newAreas.filter((area) => {
+            if (area.parentNode) {
+                return false;
+            }
+            return true;
+        });
+        setIsInitializing(true);
+        areasToAdd.forEach((area) => addArea(area));
+    }, [dataInfo, autoCreateTopN, areas.length, shadowRoot, vizRef, isInitializing, clickAreas]); // eslint-disable-line react-hooks/exhaustive-deps
     return {};
 };
 
@@ -3289,16 +3568,14 @@ const useScrollmap = () => {
     const { vizRef } = useHeatmapViz();
     const { scrollmap } = useHeatmapData();
     const start = useCallback(() => {
-        // if (isInitialized) return;
         if (!vizRef || !scrollmap || scrollmap.length === 0)
             return;
         try {
             vizRef?.clearmap?.();
             vizRef?.scrollmap?.(scrollmap);
-            // setIsInitialized(true);
         }
         catch (error) {
-            console.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+            logger$3.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
         }
     }, [vizRef, scrollmap]);
     return { start };
@@ -3478,6 +3755,7 @@ payloads, onSuccess) {
         targetWidth: docWidth,
         targetHeight: docHeight,
         iframe: iframe,
+        debug: false,
         onSuccess: (data) => {
             iframe.height = `${data.height}px`;
             onSuccess(data.height);
@@ -3656,7 +3934,7 @@ const useContainerDimensions = (props) => {
     return { containerWidth, containerHeight };
 };
 
-const useContentDimensions = ({ iframeRef, }) => {
+const useContentDimensions = ({ iframeRef }) => {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
     useEffect(() => {
         if (!contentWidth)
@@ -3669,8 +3947,8 @@ const useContentDimensions = ({ iframeRef, }) => {
 };
 
 const useObserveIframeHeight = (props) => {
-    const { iframeRef, isRenderViz } = props;
-    const { setIframeHeight } = useHeatmapViz();
+    const { iframeRef } = props;
+    const { iframeHeight, setIframeHeight, isRenderViz } = useHeatmapViz();
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
     const debounceTimerRef = useRef(null);
@@ -3728,7 +4006,7 @@ const useObserveIframeHeight = (props) => {
     }, [updateIframeHeight]);
     useEffect(() => {
         const iframe = iframeRef.current;
-        if (!iframe || !isRenderViz)
+        if (!iframe || !iframeHeight || !isRenderViz)
             return;
         const setupObservers = () => {
             try {
@@ -3790,7 +4068,7 @@ const useObserveIframeHeight = (props) => {
             }
             iframe.removeEventListener('load', setupObservers);
         };
-    }, [iframeRef, isRenderViz, updateIframeHeight, debouncedUpdate, immediateUpdate]);
+    }, [iframeRef, iframeHeight, isRenderViz, updateIframeHeight, debouncedUpdate, immediateUpdate]);
     return {};
 };
 
@@ -3839,7 +4117,7 @@ const useScaleCalculation = (props) => {
     return { widthScale, isScaledToFit, minZoomRatio };
 };
 
-const useScrollSync = ({ widthScale, iframeRef, }) => {
+const useScrollSync = ({ widthScale, iframeRef }) => {
     const handleScroll = useCallback((scrollTop) => {
         const iframe = iframeRef.current;
         if (!iframe || widthScale <= 0)
@@ -3860,13 +4138,13 @@ const useScrollSync = ({ widthScale, iframeRef, }) => {
 };
 
 const useHeatmapScale = (props) => {
-    const { wrapperRef, iframeRef, iframeHeight, isRenderViz } = props;
+    const { wrapperRef, iframeRef, iframeHeight } = props;
     // 1. Observe container dimensions
     const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
     // 2. Get content dimensions from config
     const { contentWidth } = useContentDimensions({ iframeRef });
     // 3. Observe iframe height (now reacts to width changes)
-    useObserveIframeHeight({ iframeRef, isRenderViz });
+    useObserveIframeHeight({ iframeRef });
     // 4. Calculate scale
     const { widthScale } = useScaleCalculation({
         containerWidth,
@@ -3879,8 +4157,6 @@ const useHeatmapScale = (props) => {
     const scaledHeight = iframeHeight * widthScale;
     const scaledWidth = contentWidth * widthScale;
     return {
-        containerWidth,
-        containerHeight,
         scaledWidth,
         scaledHeight,
         handleScroll,
@@ -4061,10 +4337,10 @@ const useScrollmapZones = (options) => {
             const newZones = createZones(scrollmap);
             setZones(newZones);
             setIsReady(true);
-            console.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
+            logger$3.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
         }
         catch (error) {
-            console.error('[useScrollmap] Error:', error);
+            logger$3.error('[useScrollmap] Error:', error);
             setIsReady(false);
         }
     }, [enabled, scrollmap, mode, createZones]);
@@ -4199,12 +4475,8 @@ class PerformanceLogger {
         const totalRenders = renderMetrics.length;
         const totalHookCalls = hookMetrics.length;
         const totalStoreUpdates = storeMetrics.length;
-        const renderDurations = renderMetrics
-            .filter((m) => m.duration)
-            .map((m) => m.duration);
-        const averageRenderTime = renderDurations.length > 0
-            ? renderDurations.reduce((a, b) => a + b, 0) / renderDurations.length
-            : 0;
+        const renderDurations = renderMetrics.filter((m) => m.duration).map((m) => m.duration);
+        const averageRenderTime = renderDurations.length > 0 ? renderDurations.reduce((a, b) => a + b, 0) / renderDurations.length : 0;
         // View-specific metrics
         const viewMetrics = {};
         this.metrics.forEach((metric) => {
@@ -4752,6 +5024,7 @@ function useAreaRenderer(options) {
 }
 
 const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, enableOverlapResolution = true, onAreaClick, }) => {
+    const { clickAreas } = useHeatmapData();
     const { resetView } = useHeatmapAreaClick();
     const { areasPortal, editHighlightPortal, isReady } = useAreaRenderer({
         iframeRef,
@@ -4759,8 +5032,9 @@ const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, e
         shadowRoot,
         onAreaClick,
     });
-    useAreaTopAutoDetect({ iframeRef, autoCreateTopN, shadowRoot });
+    useAreaTopAutoDetect({ autoCreateTopN, shadowRoot, disabled: !!clickAreas?.length });
     useAreaFilterVisible({ iframeRef, enableOverlapResolution });
+    useAreaHydration({ shadowRoot });
     useEffect(() => {
         return () => {
             resetView();
@@ -4772,7 +5046,7 @@ const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, e
 };
 VizAreaClick.displayName = 'VizAreaClick';
 
-const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
+const RankBadge = ({ index, elementRect, widthScale, clickOnElement }) => {
     const style = calculateRankPosition(elementRect, widthScale);
     return (jsx("div", { className: "gx-hm-rank-badge", style: style, onClick: clickOnElement, children: index }));
 };
@@ -4788,7 +5062,7 @@ const DefaultRankBadges = ({ getRect, hidden }) => {
             const rect = getRect(element);
             if (!rect)
                 return null;
-            return (jsx(RankBadge, { index: index + 1, elementRect: rect, widthScale: widthScale }, element.hash));
+            return jsx(RankBadge, { index: index + 1, elementRect: rect, widthScale: widthScale }, element.hash);
         }) }));
 };
 
@@ -4945,7 +5219,7 @@ const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
         case IClickMode.Default:
             return jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef });
         case IClickMode.Area:
-            return (jsx(VizAreaClick, { iframeRef: iframeRef, visualRef: visualRef, autoCreateTopN: 0, onAreaClick: (area) => {
+            return (jsx(VizAreaClick, { iframeRef: iframeRef, visualRef: visualRef, autoCreateTopN: 10, onAreaClick: (area) => {
                     console.log('area clicked', area);
                 } }));
     }
@@ -5043,7 +5317,7 @@ const TooltipByZone = ({ zone }) => {
                 return jsx(BasicTooltipContent, { zone: zone });
         }
     };
-    return (jsx("div", { style: { paddingTop: '12px', borderTop: '1px solid #E5E7EB' }, children: contentMarkup() }));
+    return jsx("div", { style: { paddingTop: '12px', borderTop: '1px solid #E5E7EB' }, children: contentMarkup() });
 };
 const BasicTooltipContent = ({ zone }) => {
     if (!zone)
@@ -5053,11 +5327,11 @@ const BasicTooltipContent = ({ zone }) => {
 const MetricsTooltipContent = ({ zone }) => {
     if (!zone)
         return null;
-    return (jsxs(Fragment, { children: [jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: zone.label }), jsxs("div", { style: { fontSize: '20px', fontWeight: 700, marginBottom: '8px' }, children: [zone.percUsers.toFixed(2), "% users"] }), zone.metrics && (jsxs("div", { style: { display: 'grid', gap: '6px', fontSize: '13px' }, children: [zone.metrics.revenue !== undefined && (jsx(MetricRow, { label: "Revenue", value: `$${zone.metrics.revenue.toFixed(2)}` })), zone.metrics.conversionRate !== undefined && (jsx(MetricRow, { label: "Conversion", value: `${zone.metrics.conversionRate.toFixed(2)}%` })), zone.metrics.orders !== undefined && (jsx(MetricRow, { label: "Orders", value: zone.metrics.orders.toString() }))] }))] }));
+    return (jsxs(Fragment, { children: [jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: zone.label }), jsxs("div", { style: { fontSize: '20px', fontWeight: 700, marginBottom: '8px' }, children: [zone.percUsers.toFixed(2), "% users"] }), zone.metrics && (jsxs("div", { style: { display: 'grid', gap: '6px', fontSize: '13px' }, children: [zone.metrics.revenue !== undefined && (jsx(MetricRow, { label: "Revenue", value: `$${zone.metrics.revenue.toFixed(2)}` })), zone.metrics.conversionRate !== undefined && (jsx(MetricRow, { label: "Conversion", value: `${zone.metrics.conversionRate.toFixed(2)}%` })), zone.metrics.orders !== undefined && jsx(MetricRow, { label: "Orders", value: zone.metrics.orders.toString() })] }))] }));
 };
 const MetricRow = ({ label, value }) => (jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [jsxs("span", { style: { color: '#605E5C' }, children: [label, ":"] }), jsx("span", { style: { fontWeight: 600 }, children: value })] }));
 
-const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent, }) => {
+const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent }) => {
     const { scrollmap } = useHeatmapData();
     // const hoveredZone = useHeatmapVizScrollmapStore((state) => state.hoveredZone);
     // const setHoveredZone = useHeatmapVizScrollmapStore((state) => state.setHoveredZone);
@@ -5278,15 +5552,13 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const contentWidth = useHeatmapConfigStore((state) => state.width || 0);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
-    const { setSelectedElement } = useHeatmapClick();
-    const { iframeHeight, setIframeHeight, isRenderViz } = useHeatmapViz();
     const { iframeRef } = useHeatmapRenderByMode(mode);
+    const { iframeHeight } = useHeatmapViz();
     const { scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
         iframeRef,
         visualRef,
         iframeHeight,
-        isRenderViz,
     });
     useHeatmapCanvas();
     useRenderCount('VizDomRenderer');
@@ -5294,13 +5566,6 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    const cleanUp = () => {
-        setIframeHeight(0);
-        setSelectedElement(null);
-    };
-    useEffect(() => {
-        return cleanUp;
-    }, []);
     return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizClickmap, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, scrolling: "no" }), jsx(VizScrollMap, { iframeRef: iframeRef, wrapperRef: visualRef })] }));
 };
 
@@ -5309,13 +5574,22 @@ const VizLoading = () => {
 };
 
 const VizDomHeatmap = () => {
-    const { iframeHeight, setIframeHeight } = useHeatmapViz();
+    const { iframeHeight, setIframeHeight, setVizRef, setIsRenderViz } = useHeatmapViz();
+    const { setSelectedElement, setHoveredElement } = useHeatmapClick();
+    const { setSelectedArea, setHoveredArea, setAreas } = useHeatmapAreaClick();
     useRenderCount('VizDomHeatmap');
+    const cleanUp = () => {
+        setVizRef(null);
+        setIframeHeight(0);
+        setIsRenderViz(false);
+        setSelectedElement(null);
+        setHoveredElement(null);
+        setSelectedArea(null);
+        setHoveredArea(null);
+        setAreas([]);
+    };
     useEffect(() => {
-        return () => {
-            console.log('🚀 🐥 ~ useEffect ~ return:');
-            setIframeHeight(0);
-        };
+        return cleanUp;
     }, []);
     return (jsxs(VizContainer, { isActive: true, children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && jsx(VizLoading, {})] }));
 };
@@ -5378,21 +5652,16 @@ const HeatmapPreview = () => {
 
 const ContentTopBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
-    useHeatmapConfigStore((state) => state.mode);
     const TopBar = controls.TopBar;
-    // In compare mode, hide individual top bars since we have a global header
-    // if (mode === 'compare') {
-    //   return null;
-    // }
     return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
             borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
         }, children: TopBar && jsx(TopBar, {}) }));
 };
 
-const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
+const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataInfo, }) => {
     useRegisterControl(controls);
     useRegisterData(data, dataInfo);
-    useRegisterHeatmap({ clickmap, scrollmap });
+    useRegisterHeatmap({ clickmap, scrollmap, clickAreas });
     useRegisterConfig();
     performanceLogger.configure({
         enabled: true,
@@ -5520,4 +5789,4 @@ const AreaOverlay = ({ area, onClick, onMouseEnter, onMouseLeave, isSelected, is
         ` }), showLabel && jsx(AreaLabel, { clickDist: area.clickDist, totalClicks: area.totalclicks, kind: area.kind })] }));
 };
 
-export { AreaEditHighlight, AreaOverlay, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaInteraction, useAreaPortals, useAreaRectSync, useAreaRendererContainer, useAreaScrollSync, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { AreaEditHighlight, AreaOverlay, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPortals, useAreaRectSync, useAreaRendererContainer, useAreaScrollSync, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };