@gemx-dev/heatmap-react 3.5.52 → 3.5.54

package/dist/esm/index.mjs

@@ -5,8 +5,8 @@ import { useEffect, useRef, useCallback, createContext, useContext, useMemo, use
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { decode } from '@gemx-dev/clarity-decode';
-import { Visualizer } from '@gemx-dev/clarity-visualize';
 import { createPortal } from 'react-dom';
+import { Visualizer } from '@gemx-dev/clarity-visualize';
 
 const initialNodes = { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } };
 const GraphView = ({ children, width, height }) => {
@@ -148,6 +148,11 @@ var IClickType;
     IClickType["First"] = "first-clicks";
     IClickType["Last"] = "last-clicks";
 })(IClickType || (IClickType = {}));
+var IClickMode;
+(function (IClickMode) {
+    IClickMode["Default"] = "default";
+    IClickMode["Area"] = "click-area";
+})(IClickMode || (IClickMode = {}));
 var IScrollType;
 (function (IScrollType) {
     IScrollType["Depth"] = "scroll-depth";
@@ -162,6 +167,7 @@ const useHeatmapConfigStore = create()((set) => {
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
         heatmapType: IHeatmapType.Click,
         clickType: IClickType.Total,
+        clickMode: IClickMode.Default,
         scrollType: IScrollType.Depth,
         isRendering: true,
         setMode: (mode) => set({ mode }),
@@ -170,6 +176,7 @@ const useHeatmapConfigStore = create()((set) => {
         setSidebarWidth: (sidebarWidth) => set({ sidebarWidth }),
         setHeatmapType: (heatmapType) => set({ heatmapType }),
         setClickType: (clickType) => set({ clickType }),
+        setClickMode: (clickMode) => set({ clickMode }),
         setScrollType: (scrollType) => set({ scrollType }),
         setIsRendering: (isRendering) => set({ isRendering }),
     };
@@ -179,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 },
         })),
@@ -196,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,
             };
@@ -218,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 },
         }),
@@ -335,7 +359,7 @@ const useHeatmapAreaClickStore = create()(subscribeWithSelector((set) => ({
     }),
     updateArea: (areaId, updates, viewId = DEFAULT_VIEW_ID) => set((state) => {
         const currentAreas = state.areas[viewId] || [];
-        const updatedAreas = currentAreas.map((area) => area.id === areaId ? { ...area, ...updates } : area);
+        const updatedAreas = currentAreas.map((area) => (area.id === areaId ? { ...area, ...updates } : area));
         return {
             areas: { ...state.areas, [viewId]: updatedAreas },
         };
@@ -379,6 +403,11 @@ const useHeatmapAreaClickStore = create()(subscribeWithSelector((set) => ({
             isEditingMode: newIsEditingMode,
         };
     }),
+    resetView: (viewId) => set((state) => ({
+        selectedArea: { ...state.selectedArea, [viewId]: null },
+        hoveredArea: { ...state.hoveredArea, [viewId]: null },
+        isEditingMode: { ...state.isEditingMode, [viewId]: false },
+    })),
     resetAll: () => set({
         selectedArea: { [DEFAULT_VIEW_ID]: null },
         hoveredArea: { [DEFAULT_VIEW_ID]: null },
@@ -533,9 +562,13 @@ const useHeatmapCompareStore = create()((set, get) => {
             const state = get();
             const newViews = new Map(state.views);
             newViews.delete(viewId);
+            const newViewIdCounter = newViews.size;
+            const newLayout = newViews.size === 2 ? 'grid-2' : state.layout;
             set({
                 views: newViews,
                 viewOrder: state.viewOrder.filter((id) => id !== viewId),
+                viewIdCounter: newViewIdCounter,
+                layout: newLayout,
             });
         },
         updateView: (viewId, updates) => {
@@ -680,13 +713,14 @@ const useRegisterConfig = () => {
     const width = useHeatmapConfigStore((state) => state.width);
     const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const clickMode = useHeatmapConfigStore((state) => state.clickMode);
     const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
     useEffect(() => {
         setIsRendering(true);
         setTimeout(() => {
             setIsRendering(false);
         }, 1000);
-    }, [mode, width, sidebarWidth, heatmapType]);
+    }, [mode, width, sidebarWidth, heatmapType, clickMode]); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
 const useRegisterControl = (control) => {
@@ -722,6 +756,7 @@ const useHeatmapAreaClick = (props) => {
     const removeAreaStore = useHeatmapAreaClickStore((state) => state.removeArea);
     const updateAreaStore = useHeatmapAreaClickStore((state) => state.updateArea);
     const clearAreasStore = useHeatmapAreaClickStore((state) => state.clearAreas);
+    const resetViewStore = useHeatmapAreaClickStore((state) => state.resetView);
     // Memoize operations to prevent unnecessary re-renders
     const memoizedOperations = useMemo(() => ({
         setSelectedArea: (area) => setSelectedAreaStore(area, viewId),
@@ -732,6 +767,7 @@ const useHeatmapAreaClick = (props) => {
         removeArea: (areaId) => removeAreaStore(areaId, viewId),
         updateArea: (areaId, updates) => updateAreaStore(areaId, updates, viewId),
         clearAreas: () => clearAreasStore(viewId),
+        resetView: () => resetViewStore(viewId),
     }), [
         setSelectedAreaStore,
         setHoveredAreaStore,
@@ -741,6 +777,7 @@ const useHeatmapAreaClick = (props) => {
         removeAreaStore,
         updateAreaStore,
         clearAreasStore,
+        resetViewStore,
         viewId,
     ]);
     return {
@@ -767,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,
@@ -788,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,
     };
 };
@@ -978,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]);
 };
 
 /**
@@ -1046,9 +1090,83 @@ function isElementInViewport(elementRect, visualRef, scale) {
     return elementBottom > viewportTop && elementTop < viewportBottom;
 }
 
+const CLARITY_HEATMAP_CANVAS_ID = 'clarity-heatmap-canvas';
+const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
+function isIgnoredCanvas(element) {
+    if (element.tagName === 'CANVAS') {
+        return true;
+    }
+    if (element.id === CLARITY_HEATMAP_CANVAS_ID) {
+        return true;
+    }
+    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';
+const HEATMAP_AREA_CONTAINER_CLASS = 'heatmap-area-container';
+const HEATMAP_AREA_CONTAINER_SELECTOR = `.${HEATMAP_AREA_CONTAINER_CLASS}`;
+const AREA_CONTAINER_STYLES = `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 999999;
+`;
+const AREA_INNER_CONTAINER_STYLES = `
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
 const AREA_COLOR_GRADIENT = [
     [0, 0, 255], // Blue
     [0, 255, 255], // Cyan
@@ -1056,6 +1174,12 @@ const AREA_COLOR_GRADIENT = [
     [255, 255, 0], // Yellow
     [255, 0, 0], // Red
 ];
+const AREA_RENDERER_SELECTORS = {
+    containerAttribute: AREA_MAP_DIV_ATTRIBUTE,
+    containerSelector: `[${AREA_MAP_DIV_ATTRIBUTE}]`,
+    innerContainerClass: HEATMAP_AREA_CONTAINER_CLASS,
+    innerContainerSelector: HEATMAP_AREA_CONTAINER_SELECTOR,
+};
 
 const CALLOUT_PADDING = 0;
 const CALLOUT_ARROW_SIZE = 8;
@@ -1100,27 +1224,15 @@ function calculateClickDistribution(elementClicks, totalClicks) {
     return (elementClicks / totalClicks) * 100;
 }
 
-/**
- * Get element position and dimensions for rendering inside iframe
- *
- * This function calculates position relative to the iframe's document,
- * accounting for scroll position. Suitable for elements rendered in
- * shadow DOM inside the iframe with absolute positioning.
- */
 function getElementRect(element, _shadowRoot) {
     const rect = element.getBoundingClientRect();
     const width = rect.width;
     const height = rect.height;
-    // Get the document to access scroll position
     const doc = element.ownerDocument || document;
-    // Get scroll offset from documentElement or body
     const scrollTop = doc.documentElement?.scrollTop || doc.body?.scrollTop || 0;
     const scrollLeft = doc.documentElement?.scrollLeft || doc.body?.scrollLeft || 0;
-    // Calculate position relative to document (not viewport)
-    // getBoundingClientRect() is relative to viewport, so add scroll offset
     const top = rect.top + scrollTop;
     const left = rect.left + scrollLeft;
-    // For absolute positioning calculations (overlap detection)
     const absoluteLeft = left;
     const absoluteTop = top;
     const absoluteRight = absoluteLeft + width;
@@ -1137,9 +1249,6 @@ function getElementRect(element, _shadowRoot) {
         outOfBounds: false,
     };
 }
-/**
- * Check if element has CSS position: fixed
- */
 function isElementFixed(element) {
     if (getComputedStyle(element).position === 'fixed') {
         return true;
@@ -1150,9 +1259,6 @@ function isElementFixed(element) {
     const parent = element.parentElement;
     return parent ? isElementFixed(parent) : false;
 }
-/**
- * Check if two areas overlap
- */
 function doAreasOverlap(area1, area2) {
     const r1 = area1.rect.value;
     const r2 = area2.rect.value;
@@ -1167,9 +1273,6 @@ function doAreasOverlap(area1, area2) {
             r2.absoluteRight > r1.absoluteLeft &&
             r2.absoluteLeft < r1.absoluteRight));
 }
-/**
- * Check if area1 is completely inside area2
- */
 function isAreaContainedIn(area1, area2) {
     const r1 = area1.rect.value;
     const r2 = area2.rect.value;
@@ -1180,64 +1283,29 @@ function isAreaContainedIn(area1, area2) {
         r1.absoluteLeft >= r2.absoluteLeft &&
         r1.absoluteRight <= r2.absoluteRight);
 }
-/**
- * Check if element contains another element in DOM tree
- */
 function isElementAncestorOf(ancestor, descendant, doc) {
     return ancestor.contains(descendant);
 }
-/**
- * Get all elements at a specific point, including shadow DOM
- */
-function getElementsAtPoint$1(doc, x, y, filter, visited = new Set()) {
-    const elements = doc.elementsFromPoint(x, y);
-    const filtered = elements.find(filter);
-    // Check shadow DOM
-    if (filtered?.shadowRoot && !visited.has(filtered.shadowRoot)) {
-        visited.add(filtered.shadowRoot);
-        return getElementsAtPoint$1(filtered.shadowRoot, x, y, filter, visited);
-    }
-    return elements;
-}
-/**
- * Check if element should be selectable for area creation
- */
 function isElementSelectable(element, index, elements) {
-    // Skip if it's an area map div
+    if (isIgnoredCanvas(element)) {
+        return false;
+    }
     if (element.hasAttribute(AREA_MAP_DIV_ATTRIBUTE)) {
         return false;
     }
-    // Skip first element if it's BODY and there are other elements
     if (index === 0 && elements.length > 1 && element.nodeName === 'BODY') {
         return false;
     }
     return true;
 }
-/**
- * Sort areas by click distribution (descending)
- */
 function sortAreasByClickDist(areas) {
     return [...areas].sort((a, b) => {
-        // Higher clickDist first
         if (a.clickDist !== b.clickDist) {
             return b.clickDist - a.clickDist;
         }
-        // Then by total clicks
         return b.totalclicks - a.totalclicks;
     });
 }
-/**
- * Create shadow root or return existing one
- */
-function getOrCreateShadowRoot(element) {
-    if (element.shadowRoot) {
-        return element.shadowRoot;
-    }
-    return element.attachShadow({ mode: 'open' });
-}
-/**
- * Check if rect is too small to show label
- */
 function isRectTooSmallForLabel(rect) {
     return rect.width < 67 || rect.height < 30;
 }
@@ -1254,18 +1322,46 @@ function getElementSelector(element) {
     }
     return element.tagName.toLowerCase();
 }
-function buildAreaNode(element, hash, elementMapInfo, totalClicks, shadowRoot) {
-    const elementInfo = elementMapInfo[hash];
-    const elementClicks = elementInfo?.totalclicks || 0;
+/**
+ * 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];
+    // 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,
@@ -1304,6 +1400,294 @@ function getTopElementsByClicks(elementMapInfo, topN = 10) {
     return elements;
 }
 
+/**
+ * Build parent-child relationships between areas based on DOM hierarchy
+ * @param areas - Array of area nodes to build relationships for
+ */
+function buildAreaGraph(areas) {
+    // Clear existing relationships
+    areas.forEach((area) => {
+        area.parentNode = null;
+        area.childNodes.clear();
+    });
+    // Build relationships based on DOM containment
+    for (let i = 0; i < areas.length; i++) {
+        const area = areas[i];
+        for (let j = 0; j < areas.length; j++) {
+            if (i === j)
+                continue;
+            const otherArea = areas[j];
+            // Check if area's element is contained within otherArea's element
+            if (otherArea.element.contains(area.element)) {
+                // Find the closest parent (not just any ancestor)
+                if (!area.parentNode || area.parentNode.element.contains(otherArea.element)) {
+                    // Remove from old parent if exists
+                    if (area.parentNode) {
+                        area.parentNode.childNodes.delete(area);
+                    }
+                    // Set new parent
+                    area.parentNode = otherArea;
+                    otherArea.childNodes.add(area);
+                }
+            }
+        }
+    }
+}
+
+class Logger {
+    config = {
+        enabled: false,
+        prefix: '',
+        timestamp: false,
+    };
+    /**
+     * Cấu hình logger
+     * @param config - Cấu hình logger
+     */
+    configure(config) {
+        this.config = { ...this.config, ...config };
+    }
+    /**
+     * Lấy cấu hình hiện tại
+     */
+    getConfig() {
+        return { ...this.config };
+    }
+    /**
+     * Bật logger
+     */
+    enable() {
+        this.config.enabled = true;
+    }
+    /**
+     * Tắt logger
+     */
+    disable() {
+        this.config.enabled = false;
+    }
+    /**
+     * 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];
+        }
+        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));
+    }
+    /**
+     * 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
+        .filter((item) => item.doc?.find((doc) => doc.data.width && doc.data.height))
+        .flatMap((item) => item.doc?.flatMap((doc) => doc.data));
+    const lastDoc = listDocs?.[listDocs.length - 1];
+    const docSize = {
+        width: lastDoc?.width,
+        height: lastDoc?.height,
+    };
+    const listResizes = data.filter((item) => !!item.resize).flatMap((item) => item.resize);
+    const lastResizeEvent = listResizes?.[listResizes.length - 1];
+    const resize = {
+        width: lastResizeEvent?.data.width,
+        height: lastResizeEvent?.data.height,
+    };
+    return {
+        doc: docSize,
+        resize: resize,
+        size: {
+            width: resize.width || docSize.width,
+            height: resize.height || docSize.height,
+        },
+    };
+}
+function decodePayloads(payload) {
+    try {
+        return decode(payload);
+    }
+    catch (_error) {
+        return null;
+    }
+}
+
+function findElementByHash(props) {
+    const { hash, selector, iframeDocument, vizRef } = props;
+    if (vizRef) {
+        const element = vizRef.get(hash);
+        return element;
+    }
+    // Fallback
+    if (!iframeDocument)
+        return null;
+    try {
+        const element = selector ? iframeDocument.querySelector(selector) : null;
+        if (element) {
+            return element;
+        }
+    }
+    catch (error) {
+        logger$3.warn(`Invalid selector "${selector}":`, error);
+    }
+    const elementByHash = iframeDocument.querySelector(`[data-clarity-hashalpha="${hash}"], [data-clarity-hash="${hash}"], [data-clarity-hashbeta="${hash}"]`);
+    return elementByHash;
+}
+
+/**
+ * Hydrates persisted area data into full area node
+ * Finds element in DOM and calculates all runtime values
+ *
+ * @param persistedData - Minimal data from database
+ * @param iframeDocument - Document to find element in
+ * @param heatmapInfo - Heatmap data for click calculations
+ * @param vizRef - Map of hash to elements
+ * @param shadowRoot - Optional shadow root for rect calculation
+ * @returns Full area node or null if element not found
+ */
+function hydrateAreaNode(props) {
+    const { persistedData, iframeDocument, heatmapInfo, vizRef, shadowRoot } = props;
+    const { id, hash, selector } = persistedData;
+    const element = findElementByHash({ hash, selector, iframeDocument, vizRef });
+    if (!element) {
+        logger$3.warn(`Cannot hydrate area ${id}: element not found for hash ${hash} or selector ${selector}`);
+        return null;
+    }
+    const areaNode = buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData);
+    if (!areaNode)
+        return null;
+    return areaNode;
+}
+function hydrateAreas(props) {
+    const { clickAreas, iframeDocument, heatmapInfo, vizRef, shadowRoot } = props;
+    const hydratedAreas = [];
+    for (const persistedData of clickAreas) {
+        const area = hydrateAreaNode({ persistedData, iframeDocument, heatmapInfo, vizRef, shadowRoot });
+        if (area) {
+            hydratedAreas.push(area);
+        }
+    }
+    logger$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 {
+        kind: area.kind,
+        id: area.id,
+        hash: area.hash,
+        selector: area.selector,
+    };
+}
+/**
+ * Serializes multiple areas for database storage
+ */
+function serializeAreas(areas) {
+    return areas.map(serializeAreaNode);
+}
+
 /**
  * Resolve overlapping areas by priority rules
  *
@@ -1446,36 +1830,64 @@ function getVisibleAreas(areas, iframeDocument) {
     return sortAreasByClickDist(visible);
 }
 
-function findLastSizeOfDom(data) {
-    const listDocs = data
-        .filter((item) => item.doc?.find((doc) => doc.data.width && doc.data.height))
-        .flatMap((item) => item.doc?.flatMap((doc) => doc.data));
-    const lastDoc = listDocs?.[listDocs.length - 1];
-    const docSize = {
-        width: lastDoc?.width,
-        height: lastDoc?.height,
-    };
-    const listResizes = data.filter((item) => !!item.resize).flatMap((item) => item.resize);
-    const lastResizeEvent = listResizes?.[listResizes.length - 1];
-    const resize = {
-        width: lastResizeEvent?.data.width,
-        height: lastResizeEvent?.data.height,
-    };
-    return {
-        doc: docSize,
-        resize: resize,
-        size: {
-            width: resize.width || docSize.width,
-            height: resize.height || docSize.height,
-        },
-    };
+/**
+ * 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;
 }
-function decodePayloads(payload) {
-    try {
-        return decode(payload);
+/**
+ * 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);
+        }
     }
-    catch (_error) {
-        return null;
+    return container;
+}
+function getOrCreateContainerShadowRoot(container) {
+    if (container.shadowRoot) {
+        return container.shadowRoot;
+    }
+    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);
+    }
+    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);
     }
 }
 
@@ -1510,23 +1922,6 @@ function getElementLayout(element) {
         height: rect.height,
     };
 }
-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 getElementRank = (hash, elements) => {
     if (!elements)
         return 0;
@@ -1617,8 +2012,7 @@ const calculateHorizontalPlacementPosition = (targetRect, calloutRect, placement
 
 const isLeftPositionValid = (leftPos, calloutWidth, viewportWidth, padding, containerRect) => {
     if (containerRect) {
-        return (leftPos >= containerRect.left + padding &&
-            leftPos + calloutWidth <= containerRect.right - padding);
+        return leftPos >= containerRect.left + padding && leftPos + calloutWidth <= containerRect.right - padding;
     }
     return leftPos >= padding && leftPos + calloutWidth <= viewportWidth - padding;
 };
@@ -1662,8 +2056,7 @@ const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHei
                 top: verticalPos,
                 left: horizontalPos,
                 horizontalAlign: align,
-                valid: verticalValid &&
-                    isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding, containerRect),
+                valid: verticalValid && isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding, containerRect),
             });
         });
     });
@@ -1729,6 +2122,10 @@ const calcCalloutPosition = (options) => {
     };
 };
 
+const logger$2 = createLogger({
+    enabled: false,
+    prefix: 'IframeNavigationBlockerV2',
+});
 class IframeNavigationBlockerV2 {
     doc;
     win;
@@ -1736,17 +2133,18 @@ class IframeNavigationBlockerV2 {
     showMessage = false;
     originalWindowOpen;
     observers = [];
-    constructor(iframe) {
+    constructor(iframe, config) {
         if (!iframe.contentDocument || !iframe.contentWindow) {
             throw new Error('Iframe document or window not accessible');
         }
         this.doc = iframe.contentDocument;
         this.win = iframe.contentWindow;
         this.originalWindowOpen = this.win.open.bind(this.win);
+        logger$2.configure({ enabled: !!config?.debug });
         this.init();
     }
     init() {
-        console.log('[NavigationBlocker] Initializing...');
+        logger$2.log('Initializing...');
         try {
             // Chặn navigation qua links
             this.blockLinkNavigation();
@@ -1762,7 +2160,7 @@ class IframeNavigationBlockerV2 {
             this.injectCSP();
         }
         catch (error) {
-            console.error('[NavigationBlocker] Init error:', error);
+            logger$2.error('Init error:', error);
         }
     }
     blockLinkNavigation() {
@@ -1776,11 +2174,11 @@ class IframeNavigationBlockerV2 {
                 const href = link.getAttribute('href');
                 // Cho phép hash links và empty links
                 if (!href || href === '' || href === '#' || href.startsWith('#')) {
-                    console.log('[NavigationBlocker] Allowed hash navigation:', href);
+                    logger$2.log('Allowed hash navigation:', href);
                     return;
                 }
                 // Chặn tất cả các loại navigation
-                console.log('[NavigationBlocker] Blocked link navigation to:', href);
+                logger$2.log('Blocked link navigation to:', href);
                 e.preventDefault();
                 e.stopPropagation();
                 e.stopImmediatePropagation();
@@ -1796,7 +2194,7 @@ class IframeNavigationBlockerV2 {
             if (link) {
                 const href = link.getAttribute('href');
                 if (href && !href.startsWith('#')) {
-                    console.log('[NavigationBlocker] Blocked auxclick navigation');
+                    logger$2.log('Blocked auxclick navigation');
                     e.preventDefault();
                     e.stopPropagation();
                     e.stopImmediatePropagation();
@@ -1829,13 +2227,13 @@ class IframeNavigationBlockerV2 {
             const action = form.getAttribute('action');
             // Cho phép forms không có action
             if (!action || action === '' || action === '#') {
-                console.log('[NavigationBlocker] Allowed same-page form');
+                logger$2.log('Allowed same-page form');
                 e.preventDefault();
                 this.handleFormSubmit(form);
                 return;
             }
             // Chặn tất cả external submissions
-            console.log('[NavigationBlocker] Blocked form submission to:', action);
+            logger$2.log('Blocked form submission to:', action);
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
@@ -1849,7 +2247,7 @@ class IframeNavigationBlockerV2 {
                 return this.originalWindowOpen(...args);
             }
             const url = args[0]?.toString() || 'popup';
-            console.log('[NavigationBlocker] Blocked window.open:', url);
+            logger$2.log('Blocked window.open:', url);
             this.notifyBlockedNavigation(url);
             return null;
         });
@@ -1859,7 +2257,7 @@ class IframeNavigationBlockerV2 {
         this.win.addEventListener('beforeunload', (e) => {
             if (!this.isEnabled)
                 return;
-            console.log('[NavigationBlocker] Blocked beforeunload');
+            logger$2.log('Blocked beforeunload');
             e.preventDefault();
             e.returnValue = '';
             return '';
@@ -1868,7 +2266,7 @@ class IframeNavigationBlockerV2 {
         this.win.addEventListener('unload', (e) => {
             if (!this.isEnabled)
                 return;
-            console.log('[NavigationBlocker] Blocked unload');
+            logger$2.log('Blocked unload');
             e.preventDefault();
             e.stopPropagation();
         }, true);
@@ -1876,7 +2274,7 @@ class IframeNavigationBlockerV2 {
         this.win.addEventListener('popstate', (e) => {
             if (!this.isEnabled)
                 return;
-            console.log('[NavigationBlocker] Blocked popstate');
+            logger$2.log('Blocked popstate');
             e.preventDefault();
             e.stopPropagation();
         }, true);
@@ -1929,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);
-                console.log('[NavigationBlocker] Injected CSP');
+                logger$2.log('Injected CSP');
             }
         }
         catch (error) {
-            console.warn('[NavigationBlocker] Could not inject CSP:', error);
+            logger$2.warn('Could not inject CSP:', error);
         }
     }
     handleFormSubmit(form) {
@@ -1942,13 +2340,13 @@ class IframeNavigationBlockerV2 {
         formData.forEach((value, key) => {
             data[key] = value;
         });
-        console.log('[NavigationBlocker] Handling form data:', data);
+        logger$2.log('Handling form data:', data);
         window.dispatchEvent(new CustomEvent('iframe-form-submit', {
             detail: { form, data },
         }));
     }
     notifyBlockedNavigation(url) {
-        console.warn('[NavigationBlocker] Navigation blocked to:', url);
+        logger$2.warn('Navigation blocked to:', url);
         window.dispatchEvent(new CustomEvent('iframe-navigation-blocked', {
             detail: { url, timestamp: Date.now() },
         }));
@@ -1998,19 +2396,19 @@ class IframeNavigationBlockerV2 {
     }
     enable() {
         this.isEnabled = true;
-        console.log('[NavigationBlocker] Enabled');
+        logger$2.log('Enabled');
     }
     enableMessage() {
         this.showMessage = true;
-        console.log('[NavigationBlocker] Enabled message');
+        logger$2.log('Enabled message');
     }
     disable() {
         this.isEnabled = false;
-        console.log('[NavigationBlocker] Disabled');
+        logger$2.log('Disabled');
     }
     disableMessage() {
         this.showMessage = false;
-        console.log('[NavigationBlocker] Disabled message');
+        logger$2.log('Disabled message');
     }
     destroy() {
         this.isEnabled = false;
@@ -2018,10 +2416,14 @@ class IframeNavigationBlockerV2 {
         // Cleanup observers
         this.observers.forEach((observer) => observer.disconnect());
         this.observers = [];
-        console.log('[NavigationBlocker] Destroyed');
+        logger$2.log('Destroyed');
     }
 }
 
+const logger$1 = createLogger({
+    enabled: false,
+    prefix: 'IframeStyleReplacer',
+});
 class IframeStyleReplacer {
     doc;
     win;
@@ -2034,6 +2436,7 @@ class IframeStyleReplacer {
         this.doc = iframe.contentDocument;
         this.win = iframe.contentWindow;
         this.config = config;
+        logger$1.configure({ enabled: !!config?.debug });
     }
     px(value) {
         return `${value.toFixed(2)}px`;
@@ -2067,7 +2470,7 @@ class IframeStyleReplacer {
                 count++;
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${count} inline style elements`);
+        logger$1.log(`Replaced ${count} inline style elements`);
         return count;
     }
     processStyleTags() {
@@ -2080,7 +2483,7 @@ class IframeStyleReplacer {
                 count++;
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${count} <style> tags`);
+        logger$1.log(`Replaced ${count} <style> tags`);
         return count;
     }
     processRule(rule) {
@@ -2111,7 +2514,7 @@ class IframeStyleReplacer {
             try {
                 // Bỏ qua external CSS (cross-origin)
                 if (sheet.href && !sheet.href.startsWith(this.win.location.origin)) {
-                    console.log('[IframeStyleReplacer] Skipping external CSS:', sheet.href);
+                    logger$1.log('Skipping external CSS:', sheet.href);
                     return;
                 }
                 const rules = sheet.cssRules || sheet.rules;
@@ -2122,10 +2525,10 @@ class IframeStyleReplacer {
                 }
             }
             catch (e) {
-                console.warn('[IframeStyleReplacer] Cannot read stylesheet (CORS?):', e.message);
+                logger$1.warn('Cannot read stylesheet (CORS?):', e.message);
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${total} rules in stylesheets`);
+        logger$1.log(`Replaced ${total} rules in stylesheets`);
         return total;
     }
     async processLinkedStylesheets() {
@@ -2133,7 +2536,7 @@ class IframeStyleReplacer {
         let count = 0;
         for (const link of Array.from(links)) {
             if (!link.href.startsWith(this.win.location.origin)) {
-                console.log('[IframeStyleReplacer] Skipping external CSS:', link.href);
+                logger$1.log('Skipping external CSS:', link.href);
                 continue;
             }
             try {
@@ -2151,10 +2554,10 @@ class IframeStyleReplacer {
                 }
             }
             catch (e) {
-                console.warn('[IframeStyleReplacer] Cannot load CSS:', link.href, e);
+                logger$1.warn('Cannot load CSS:', link.href, e);
             }
         }
-        console.log(`[IframeStyleReplacer] Replaced ${count} linked CSS files`);
+        logger$1.log(`Replaced ${count} linked CSS files`);
         return count;
     }
     getFinalHeight() {
@@ -2178,7 +2581,7 @@ class IframeStyleReplacer {
     }
     async run() {
         try {
-            console.log('[IframeStyleReplacer] Starting viewport units replacement...');
+            logger$1.log('Starting viewport units replacement...');
             this.processInlineStyles();
             this.processStyleTags();
             this.processStylesheets();
@@ -2188,13 +2591,13 @@ class IframeStyleReplacer {
                 requestAnimationFrame(() => {
                     const height = this.getFinalHeight();
                     const width = this.getFinalWidth();
-                    console.log('[IframeStyleReplacer] Calculated dimensions:', { height, width });
+                    logger$1.log('Calculated dimensions:', { height, width });
                     resolve({ height, width });
                 });
             });
         }
         catch (err) {
-            console.error('[IframeStyleReplacer] Critical error:', err);
+            logger$1.error('Critical error:', err);
             return {
                 height: this.doc.body.scrollHeight || 1000,
                 width: this.doc.body.scrollWidth || 1000,
@@ -2206,6 +2609,10 @@ class IframeStyleReplacer {
     }
 }
 
+const logger = createLogger({
+    enabled: false,
+    prefix: 'IframeHelper',
+});
 class IframeHelperFixer {
     iframe;
     config;
@@ -2215,10 +2622,11 @@ class IframeHelperFixer {
         this.config = config;
         this.iframe = config.iframe;
         this.init();
+        logger.configure({ enabled: !!config?.debug });
     }
     async init() {
         if (!this.iframe) {
-            console.error('[IframeHelper] iframe not found');
+            logger.error('iframe not found');
             this.config.onError?.(new Error('iframe not found'));
             return;
         }
@@ -2232,19 +2640,19 @@ class IframeHelperFixer {
     }
     async process() {
         if (!this.iframe.contentDocument || !this.iframe.contentWindow) {
-            console.error('[IframeHelper] Cannot access iframe document');
+            logger.error('Cannot access iframe document');
             this.config.onError?.(new Error('Cannot access iframe document'));
             return;
         }
         try {
-            console.log('[IframeHelper] Processing viewport units...');
+            logger.log('Processing viewport units...');
             // 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();
-            console.log('[IframeHelper] Process completed:', result);
+            logger.log('Process completed:', result);
             // Trigger success callback
             this.config.onSuccess?.(result);
             // Dispatch custom event
@@ -2253,12 +2661,12 @@ class IframeHelperFixer {
             }));
         }
         catch (error) {
-            console.error('[IframeHelper] Failed to process:', error);
+            logger.error('Failed to process:', error);
             this.config.onError?.(error);
         }
     }
     async recalculate() {
-        console.log('[IframeHelper] Recalculating...');
+        logger.log('Recalculating...');
         await this.process();
     }
     updateConfig(config) {
@@ -2283,61 +2691,150 @@ class IframeHelperFixer {
         this.replacer = null;
         this.navigationBlocker?.destroy();
         this.navigationBlocker = null;
-        console.log('[IframeHelper] Destroyed');
+        logger.log('Destroyed');
     }
 }
 
 function initIframeHelperFixer(config) {
     const fixer = new IframeHelperFixer(config);
     window.addEventListener('iframe-dimensions-applied', ((e) => {
-        const ev = e;
-        console.log('[IframeHelper] Iframe dimensions finalized:', ev.detail);
+        // console.log('[IframeHelper] Iframe dimensions finalized:', ev.detail);
     }));
     window.addEventListener('iframe-navigation-blocked', ((e) => {
-        const ev = e;
-        console.warn('[IframeHelper] Iframe tried to navigate to:', ev.detail.url);
+        // console.warn('[IframeHelper] Iframe tried to navigate to:', ev.detail.url);
     }));
     window.addEventListener('iframe-form-submit', ((e) => {
-        const ev = e;
-        console.log('[IframeHelper] Iframe form submitted:', ev.detail.data);
+        // console.log('[IframeHelper] Iframe form submitted:', ev.detail.data);
     }));
     return fixer;
 }
 
-function useAreaEditMode({ iframeRef, onCreateArea, enabled = false, }) {
+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, removeArea } = useHeatmapAreaClick();
+    const onAreaCreatedElement = useCallback((element) => {
+        if (!dataInfo)
+            return;
+        const hash = getElementHash(element);
+        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$3.error('Failed to create area:', error);
+        }
+    }, [dataInfo, areas, addArea, removeArea, customShadowRoot, onAreaCreated]);
+    return {
+        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;
-        const elements = getElementsAtPoint$1(iframeDocument, e.clientX, e.clientY, isElementSelectable);
-        // Find first selectable element
+        const elements = getElementsAtPoint(iframeDocument, e.clientX, e.clientY);
         const selectableElement = elements.find((el, index, arr) => isElementSelectable(el, index, arr));
-        if (selectableElement && selectableElement !== hoveredElement) {
+        const isSelectable = selectableElement && selectableElement !== hoveredElement;
+        if (isSelectable) {
             setHoveredElement(selectableElement);
             setIsHovering(true);
-        }
-        else if (!selectableElement && hoveredElement) {
-            setHoveredElement(null);
-            setIsHovering(false);
-        }
-    }, [isActive, iframeDocument, hoveredElement]);
-    const handleClick = useCallback((e) => {
-        if (!isActive || !hoveredElement)
             return;
-        e.stopPropagation();
-        e.preventDefault();
-        if (onCreateArea) {
-            onCreateArea(hoveredElement);
         }
-    }, [isActive, hoveredElement]);
+        setHoveredElement(null);
+        setIsHovering(false);
+    }, [isActive, iframeDocument, hoveredElement]);
     const handleMouseLeave = useCallback(() => {
         setHoveredElement(null);
         setIsHovering(false);
     }, []);
+    const handleClick = useCallback((e) => {
+        const currentHoveredElement = hoveredElementRef.current;
+        const currentCallback = onAreaCreatedElementRef.current;
+        if (!isActive || !currentHoveredElement)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (!currentCallback)
+            return;
+        currentCallback(currentHoveredElement);
+    }, [isActive]);
     useEffect(() => {
         if (!isActive || !iframeDocument) {
             setHoveredElement(null);
@@ -2355,17 +2852,17 @@ function useAreaEditMode({ iframeRef, onCreateArea, enabled = false, }) {
             });
         };
         iframeDocument.addEventListener('mousemove', throttledMouseMove);
-        iframeDocument.addEventListener('click', handleClick);
-        iframeDocument.addEventListener('mouseleave', handleMouseLeave);
         iframeDocument.addEventListener('scroll', handleMouseLeave);
+        iframeDocument.removeEventListener('mouseleave', handleMouseLeave);
+        iframeDocument.addEventListener('click', handleClick);
         return () => {
             if (rafId) {
                 cancelAnimationFrame(rafId);
             }
             iframeDocument.removeEventListener('mousemove', throttledMouseMove);
-            iframeDocument.removeEventListener('click', handleClick);
             iframeDocument.removeEventListener('mouseleave', handleMouseLeave);
             iframeDocument.removeEventListener('scroll', handleMouseLeave);
+            iframeDocument.removeEventListener('click', handleClick);
         };
     }, [isActive, iframeDocument]);
     return {
@@ -2374,109 +2871,209 @@ function useAreaEditMode({ iframeRef, onCreateArea, enabled = false, }) {
     };
 }
 
-function useAreaScrollSync(options) {
-    const { areas, iframeRef, enabled = true } = options;
+const useAreaFilterVisible = (props) => {
+    const { iframeRef, enableOverlapResolution } = props;
     const iframeDocument = iframeRef.current?.contentDocument;
+    const { areas, setAreas } = useHeatmapAreaClick();
+    const visibleAreas = useMemo(() => {
+        if (!enableOverlapResolution)
+            return areas;
+        if (!iframeDocument)
+            return areas;
+        return getVisibleAreas(areas, iframeDocument);
+    }, [areas, iframeDocument]);
     useEffect(() => {
-        if (!enabled || !iframeDocument || areas.length === 0) {
-            return;
-        }
-        let rafId = null;
-        let isUpdating = false;
-        const updateAreaPositions = () => {
-            if (isUpdating)
-                return;
-            isUpdating = true;
-            rafId = requestAnimationFrame(() => {
-                areas.forEach((area) => {
-                    if (!area.element || !area.rect)
-                        return;
-                    try {
-                        const newRect = getElementRect(area.element);
-                        area.rect.update(newRect);
-                    }
-                    catch (error) {
-                        console.warn('[useAreaScrollSync] Failed to update area rect:', error);
-                    }
-                });
-                isUpdating = false;
-                rafId = null;
-            });
-        };
-        iframeDocument.addEventListener('scroll', updateAreaPositions, { passive: true });
-        const iframeWindow = iframeDocument.defaultView;
-        if (iframeWindow) {
-            iframeWindow.addEventListener('resize', updateAreaPositions, { passive: true });
+        if (enableOverlapResolution && visibleAreas.length !== areas.length) {
+            setAreas(visibleAreas);
         }
-        return () => {
-            if (rafId !== null) {
-                cancelAnimationFrame(rafId);
-            }
-            iframeDocument.removeEventListener('scroll', updateAreaPositions);
-            if (iframeWindow) {
-                iframeWindow.removeEventListener('resize', updateAreaPositions);
-            }
-        };
-    }, [areas, iframeDocument, enabled]);
-}
+    }, [visibleAreas, areas.length]);
+    return {};
+};
 
-const useClickmap = () => {
+function useAreaHydration(options) {
+    const { shadowRoot, enabled = true } = options;
+    const [isInitializing, setIsInitializing] = useState(false);
+    const { dataInfo, clickAreas } = useHeatmapData();
     const { vizRef } = useHeatmapViz();
-    const { clickmap } = useHeatmapData();
-    const start = useCallback(() => {
-        if (!vizRef || !clickmap || clickmap.length === 0)
+    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;
-        try {
-            vizRef?.clearmap?.();
-            vizRef?.clickmap?.(clickmap);
-        }
-        catch (error) {
-            console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
         }
-    }, [vizRef, clickmap]);
-    return { start };
-};
+        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,
+    };
+}
 
-const useScrollmap = () => {
-    const { vizRef } = useHeatmapViz();
-    const { scrollmap } = useHeatmapData();
-    const start = useCallback(() => {
-        // if (isInitialized) return;
-        if (!vizRef || !scrollmap || scrollmap.length === 0)
+function useAreaInteraction(options = {}) {
+    const { onAreaClick } = options;
+    const { selectedArea, hoveredArea, isEditingMode, setSelectedArea, setHoveredArea } = useHeatmapAreaClick();
+    const handleAreaClick = useCallback((area) => {
+        if (isEditingMode)
             return;
-        try {
-            vizRef?.clearmap?.();
-            vizRef?.scrollmap?.(scrollmap);
-            // setIsInitialized(true);
+        // Toggle selection
+        setSelectedArea(selectedArea?.id === area.id ? null : area);
+        // Trigger callback
+        if (onAreaClick) {
+            onAreaClick(area);
         }
-        catch (error) {
-            console.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+    }, [isEditingMode, selectedArea]);
+    const handleAreaMouseEnter = useCallback((area) => {
+        if (isEditingMode)
+            return;
+        setHoveredArea(area);
+    }, [isEditingMode]);
+    const handleAreaMouseLeave = useCallback((area) => {
+        if (isEditingMode)
+            return;
+        // Only clear if this is the currently hovered area
+        if (hoveredArea?.id === area.id) {
+            setHoveredArea(null);
         }
-    }, [vizRef, scrollmap]);
-    return { start };
-};
+    }, [isEditingMode, hoveredArea]);
+    return {
+        handleAreaClick,
+        handleAreaMouseEnter,
+        handleAreaMouseLeave,
+    };
+}
 
-const useHeatmapCanvas = () => {
-    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const { start: startClickmap } = useClickmap();
-    const { start: startScrollmap } = useScrollmap();
+function useAreaPortals(options) {
+    const { shadowContainer, isReady, iframeRef, customShadowRoot, onAreaClick, onAreaCreated } = options;
+    const { onAreaCreatedElement } = useAreaCreation({ customShadowRoot, onAreaCreated });
+    const { hoveredElement } = useAreaEditMode({ iframeRef, enabled: true, onAreaCreatedElement });
+    const { areas, selectedArea, hoveredArea, isEditingMode } = useHeatmapAreaClick();
+    const { handleAreaClick, handleAreaMouseEnter, handleAreaMouseLeave } = useAreaInteraction({
+        onAreaClick,
+    });
+    const isReadyPortal = shadowContainer && isReady;
+    const areasPortal = isReadyPortal
+        ? createPortal(jsx(Fragment, { children: areas.map((area) => (jsx(AreaOverlay, { area: area, onClick: handleAreaClick, onMouseEnter: handleAreaMouseEnter, onMouseLeave: handleAreaMouseLeave, isSelected: selectedArea?.id === area.id, isHovered: hoveredArea?.id === area.id }, area.id))) }), shadowContainer)
+        : null;
+    const isReadyEditHighlight = shadowContainer && isReady && isEditingMode && hoveredElement;
+    const editHighlightPortal = isReadyEditHighlight
+        ? createPortal(jsx(AreaEditHighlight, { element: hoveredElement, shadowRoot: customShadowRoot, onClick: onAreaCreatedElement }), shadowContainer)
+        : null;
+    return {
+        areasPortal: areasPortal,
+        editHighlightPortal: editHighlightPortal,
+    };
+}
+
+function useAreaRectSync(options) {
+    const { iframeDocument, shadowRoot, enabled = true } = options;
+    const { vizRef } = useHeatmapViz();
+    const { areas } = useHeatmapAreaClick();
     useEffect(() => {
-        switch (heatmapType) {
-            case IHeatmapType.Click:
-                startClickmap();
-                break;
-            case IHeatmapType.Scroll:
-                startScrollmap();
-                break;
+        if (!enabled || !iframeDocument || areas.length === 0) {
+            return;
         }
-    }, [heatmapType, startClickmap, startScrollmap]);
-};
+        areas.forEach((area) => {
+            try {
+                let targetElement = area.element;
+                if (!targetElement || !iframeDocument.contains(targetElement)) {
+                    if (area.hash) {
+                        const elementByHash = vizRef?.get(area.hash);
+                        if (elementByHash) {
+                            area.element = elementByHash;
+                            targetElement = elementByHash;
+                        }
+                    }
+                }
+                // // If we still can't find the element, set rect to zero
+                // if (!targetElement || !iframeDocument.contains(targetElement)) {
+                //   area.rect.update({
+                //     width: 0,
+                //     height: 0,
+                //     top: 0,
+                //     left: 0,
+                //     absoluteLeft: 0,
+                //     absoluteTop: 0,
+                //     absoluteRight: 0,
+                //     absoluteBottom: 0,
+                //     outOfBounds: true,
+                //   });
+                //   return;
+                // }
+                const newRect = getElementRect(targetElement, shadowRoot);
+                area.rect.update(newRect);
+            }
+            catch (error) {
+                logger$3.error(`Failed to update rect for area ${area.id}:`, error);
+            }
+        });
+        buildAreaGraph(areas);
+    }, [areas, iframeDocument, shadowRoot, enabled, vizRef]);
+}
 
-const scrollToElementIfNeeded = (visualRef, rect, scale) => {
-    if (!visualRef.current)
-        return;
-    const visualRect = visualRef.current.getBoundingClientRect();
-    if (isElementInViewport(rect, visualRef, scale)) {
+/**
+ * Hook to setup and manage the shadow DOM container for area rendering
+ *
+ * @param iframeDocument - The iframe document
+ * @param customShadowRoot - Optional custom shadow root element
+ * @returns Container element and ready state
+ */
+function useAreaRendererContainer(iframeDocument, customShadowRoot) {
+    const [shadowContainer, setShadowContainer] = useState(null);
+    const [isReady, setIsReady] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!iframeDocument) {
+            setIsReady(false);
+            return;
+        }
+        const innerContainer = setupAreaRenderingContainer(iframeDocument, customShadowRoot);
+        containerRef.current = innerContainer;
+        setShadowContainer(innerContainer);
+        setIsReady(true);
+        return () => {
+            // Cleanup on unmount
+            const container = innerContainer.parentElement?.parentElement;
+            cleanupAreaRenderingContainer(container);
+            containerRef.current = null;
+            setShadowContainer(null);
+            setIsReady(false);
+        };
+    }, [iframeDocument, customShadowRoot]);
+    return {
+        shadowContainer,
+        isReady,
+        containerRef,
+    };
+}
+
+const scrollToElementIfNeeded = (visualRef, rect, scale) => {
+    if (!visualRef.current)
+        return;
+    const visualRect = visualRef.current.getBoundingClientRect();
+    if (isElementInViewport(rect, visualRef, scale)) {
         return;
     }
     const topRaw = rect.top; // - visualRect.top
@@ -2528,7 +3125,7 @@ const useClickedElement = ({ visualRef, getRect }) => {
         requestAnimationFrame(() => {
             setClickedElement(elementInfo);
         });
-    }, [selectedElement, dataInfo, visualRef, widthScale]);
+    }, [selectedElement, dataInfo, visualRef, widthScale]); // eslint-disable-line react-hooks/exhaustive-deps
     return { clickedElement, showMissingElement, shouldShowCallout };
 };
 
@@ -2584,7 +3181,7 @@ const useHeatmapEffects = ({ isVisible }) => {
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
     const heatmapWidth = useHeatmapConfigStore((state) => state.width);
     const { iframeHeight, widthScale } = useHeatmapViz();
-    return useCallback((element) => {
+    const getRect = useCallback((element) => {
         const hash = element?.hash;
         if (!iframeRef.current?.contentDocument || !hash || !visualizer)
             return null;
@@ -2620,6 +3217,7 @@ const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
             outOfBounds,
         };
     }, [iframeRef, wrapperRef, visualizer, heatmapWidth, iframeHeight, widthScale]);
+    return { getRect };
 };
 
 const debounce = (fn, delay) => {
@@ -2630,10 +3228,6 @@ const debounce = (fn, delay) => {
     };
 };
 
-// ===================== UTILITY FUNCTIONS =====================
-/**
- * Lấy bounding box tuyệt đối của element (relative to document)
- */
 function getBoundingBox(element) {
     if (typeof element.getBoundingClientRect !== 'function') {
         return null;
@@ -2654,84 +3248,72 @@ function getBoundingBox(element) {
         height: Math.floor(rect.height),
     };
 }
-/**
- * Lấy tất cả elements tại tọa độ (x, y), hỗ trợ Shadow DOM
- */
-function getElementsAtPoint(documentOrShadowRoot, x, y, filterFunction, visitedShadowRoots = new Set()) {
-    // Lấy tất cả elements tại vị trí
-    const elementsAtPoint = documentOrShadowRoot.elementsFromPoint(x, y);
-    if (!filterFunction) {
-        return elementsAtPoint;
-    }
-    // Tìm element đầu tiên match với filter
-    const matchedElement = elementsAtPoint.find(filterFunction);
-    // Nếu element có Shadow DOM và chưa visit -> đệ quy vào
-    if (matchedElement?.shadowRoot && !visitedShadowRoots.has(matchedElement.shadowRoot)) {
-        visitedShadowRoots.add(matchedElement.shadowRoot);
-        return getElementsAtPoint(matchedElement.shadowRoot, x, y, filterFunction, visitedShadowRoots);
-    }
-    return elementsAtPoint;
-}
-// ===================== EXAMPLE USAGE =====================
-/*
-import { useRef, useState } from 'react';
-
-function HeatmapComponent() {
-  const heatmapWrapperRef = useRef<HTMLDivElement>(null);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  const [hoveredElement, setHoveredElement] = useState<HoveredElementInfo | null>(null);
-
-  const heatmapInfo = {
-    width: 1920,
-    elementMapInfo: {
-      'hash123': {
-        totalclicks: 45,
-        selector: 'button.submit'
-      }
-    },
-    sortedElements: [...]
-  };
-
-  const { handleMouseMove } = useHeatmapMouseHandler({
-    heatmapWrapperRef,
-    iframeRef,
-    parentRef,
-    heatmapInfo,
-    scaleRatio: 0.8, // 80% zoom
-    onElementHover: (info) => {
-      setHoveredElement(info);
-      console.log('Hovered element:', info);
-    }
-  });
-
-  return (
-    <div ref={parentRef}>
-      <div
-        ref={heatmapWrapperRef}
-        onMouseMove={handleMouseMove}
-      >
-        <iframe ref={iframeRef} />
-
-        {hoveredElement && (
-          <div className="tooltip" style={{
-            position: 'absolute',
-            left: hoveredElement.left,
-            top: hoveredElement.top
-          }}>
-            Clicks: {hoveredElement.clicks}
-            <br />
-            Rank: #{hoveredElement.rank}
-            <br />
-            Selector: {hoveredElement.selector}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-*/
+// export function useHeatmapMouseHandler(props: UseHeatmapMouseHandlerProps) {
+//   const { heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover } = props;
+//   const handleMouseMove = useCallback(
+//     (event: MouseEvent) => {
+//       if (
+//         !heatmapWrapperRef?.current ||
+//         !iframeRef?.current ||
+//         !iframeRef.current.contentDocument ||
+//         !heatmapInfo?.elementMapInfo ||
+//         !parentRef?.current
+//       ) {
+//         return;
+//       }
+//       try {
+//         // Calculate scroll position (scaled)
+//         const scrollTop = parentRef.current.scrollTop / scaleRatio;
+//         // Get position of heatmap wrapper
+//         const wrapperRect = heatmapWrapperRef.current.getBoundingClientRect();
+//         // Calculate mouse position in iframe (scaled)
+//         const mouseX = (event.clientX - wrapperRect.left) / scaleRatio;
+//         const mouseY = (event.clientY - wrapperRect.top) / scaleRatio - scrollTop;
+//         const elementsAtPoint = getElementsAtPoint(
+//           iframeRef.current.contentDocument,
+//           Math.round(mouseX),
+//           Math.round(mouseY),
+//           {
+//             filterFn: (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE),
+//             ignoreCanvas: true,
+//           },
+//         );
+//         if (!elementsAtPoint || elementsAtPoint.length === 0) {
+//           return;
+//         }
+//         for (let i = 0; i < elementsAtPoint.length; i++) {
+//           const element = elementsAtPoint[i] as HTMLElement;
+//           const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
+//           if (elementHash && heatmapInfo.elementMapInfo[elementHash]) {
+//             const elementData = heatmapInfo.elementMapInfo[elementHash];
+//             const boundingBox = getBoundingBox(element);
+//             if (boundingBox) {
+//               const rank =
+//                 Array.isArray(heatmapInfo.sortedElements) && elementData
+//                   ? heatmapInfo.sortedElements.indexOf(elementData) + 1
+//                   : NaN;
+//               onElementHover({
+//                 ...boundingBox,
+//                 width: Math.min(boundingBox.width, heatmapInfo.width || 0),
+//                 top: boundingBox.top + scrollTop,
+//                 // Metadata
+//                 hash: elementHash,
+//                 clicks: elementData.totalclicks,
+//                 rank: rank,
+//                 selector: elementData.selector || '',
+//               });
+//               break;
+//             }
+//           }
+//         }
+//       } catch (error) {
+//         console.warn('Error handling mouse move on heatmap:', error);
+//       }
+//     },
+//     [heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover],
+//   );
+//   return { handleMouseMove };
+// }
 
 const useHoveredElement = ({ iframeRef, getRect }) => {
     const { hoveredElement, setHoveredElement, setSelectedElement } = useHeatmapClick();
@@ -2814,12 +3396,14 @@ const convertViewportToIframeCoords = (clientX, clientY, iframeRect, scale) => {
     return { x, y };
 };
 const findTargetElement = (doc, x, y, heatmapInfo) => {
-    const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
-    const elementsAtPoint = getElementsAtPoint(doc, Math.round(x), Math.round(y), (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE));
+    const elementsAtPoint = getElementsAtPoint(doc, Math.round(x), Math.round(y), {
+        filterFn: (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE),
+        ignoreCanvas: true,
+    });
     let dataElement = null;
     for (let i = 0; i < elementsAtPoint.length; i++) {
         const element = elementsAtPoint[i];
-        const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
+        const elementHash = getElementHash(element);
         if (elementHash && heatmapInfo.elementMapInfo?.[elementHash]) {
             const boundingBox = getBoundingBox(element);
             if (boundingBox) {
@@ -2849,6 +3433,177 @@ const isValidElement = (element, heatmapInfo) => {
     return !!heatmapInfo?.elementMapInfo?.[hash];
 };
 
+function useAreaScrollSync(options) {
+    const { iframeRef, visualRef, enabled = true } = options;
+    const { widthScale } = useHeatmapViz();
+    const { areas, selectedArea } = useHeatmapAreaClick();
+    const iframeDocument = iframeRef.current?.contentDocument;
+    useEffect(() => {
+        if (!enabled || !iframeDocument || areas.length === 0) {
+            return;
+        }
+        let rafId = null;
+        let isUpdating = false;
+        const updateAreaPositions = () => {
+            if (isUpdating)
+                return;
+            isUpdating = true;
+            rafId = requestAnimationFrame(() => {
+                areas.forEach((area) => {
+                    if (!area.element || !area.rect)
+                        return;
+                    try {
+                        const newRect = getElementRect(area.element);
+                        area.rect.update(newRect);
+                    }
+                    catch (error) {
+                        console.warn('[useAreaScrollSync] Failed to update area rect:', error);
+                    }
+                });
+                isUpdating = false;
+                rafId = null;
+            });
+        };
+        iframeDocument.addEventListener('scroll', updateAreaPositions, { passive: true });
+        const iframeWindow = iframeDocument.defaultView;
+        if (iframeWindow) {
+            iframeWindow.addEventListener('resize', updateAreaPositions, { passive: true });
+        }
+        return () => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
+            iframeDocument.removeEventListener('scroll', updateAreaPositions);
+            if (iframeWindow) {
+                iframeWindow.removeEventListener('resize', updateAreaPositions);
+            }
+        };
+    }, [areas, iframeDocument, enabled]);
+    useEffect(() => {
+        if (!selectedArea)
+            return;
+        if (!visualRef)
+            return;
+        if (!selectedArea.rect.value)
+            return;
+        scrollToElementIfNeeded(visualRef, selectedArea.rect.value, widthScale);
+    }, [visualRef, selectedArea, widthScale]);
+}
+
+const useAreaTopAutoDetect = (props) => {
+    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)
+            return;
+        if (clickAreas?.length)
+            return;
+        if (areas?.length)
+            return;
+        const topElements = getTopElementsByClicks(dataInfo.elementMapInfo, autoCreateTopN);
+        const newAreas = [];
+        topElements.forEach(({ hash }) => {
+            const element = findElementByHash({ hash, vizRef });
+            if (!element)
+                return;
+            const area = buildAreaNode(element, hash, dataInfo);
+            if (!area)
+                return;
+            newAreas.push(area);
+        });
+        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 {};
+};
+
+const useAreaClickmap = () => {
+    const { vizRef } = useHeatmapViz();
+    const { clickmap } = useHeatmapData();
+    const start = useCallback(() => {
+        if (!vizRef || !clickmap || clickmap.length === 0)
+            return;
+        try {
+            vizRef?.clearmap?.();
+        }
+        catch (error) {
+            console.error(`🚀 🐥 ~ useAreaClickmap ~ error:`, error);
+        }
+    }, [vizRef, clickmap]);
+    return { start };
+};
+
+const useClickmap = () => {
+    const { vizRef } = useHeatmapViz();
+    const { clickmap } = useHeatmapData();
+    const start = useCallback(() => {
+        if (!vizRef || !clickmap || clickmap.length === 0)
+            return;
+        try {
+            vizRef?.clearmap?.();
+            vizRef?.clickmap?.(clickmap);
+        }
+        catch (error) {
+            console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
+        }
+    }, [vizRef, clickmap]);
+    return { start };
+};
+
+const useScrollmap = () => {
+    const { vizRef } = useHeatmapViz();
+    const { scrollmap } = useHeatmapData();
+    const start = useCallback(() => {
+        if (!vizRef || !scrollmap || scrollmap.length === 0)
+            return;
+        try {
+            vizRef?.clearmap?.();
+            vizRef?.scrollmap?.(scrollmap);
+        }
+        catch (error) {
+            logger$3.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+        }
+    }, [vizRef, scrollmap]);
+    return { start };
+};
+
+const useHeatmapCanvas = () => {
+    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const clickMode = useHeatmapConfigStore((state) => state.clickMode);
+    const { start: startClickmap } = useClickmap();
+    const { start: startAreaClickmap } = useAreaClickmap();
+    const { start: startScrollmap } = useScrollmap();
+    useEffect(() => {
+        switch (heatmapType) {
+            case IHeatmapType.Click:
+                if (clickMode === IClickMode.Default) {
+                    startClickmap();
+                }
+                else {
+                    startAreaClickmap();
+                }
+                break;
+            case IHeatmapType.Scroll:
+                startScrollmap();
+                break;
+        }
+    }, [heatmapType, clickMode, startClickmap, startAreaClickmap, startScrollmap]);
+};
+
 var MessageType;
 (function (MessageType) {
     MessageType["GX_DOM_TRACKING_PAYLOAD"] = "GX_DOM_TRACKING_PAYLOAD";
@@ -3000,6 +3755,7 @@ payloads, onSuccess) {
         targetWidth: docWidth,
         targetHeight: docHeight,
         iframe: iframe,
+        debug: false,
         onSuccess: (data) => {
             iframe.height = `${data.height}px`;
             onSuccess(data.height);
@@ -3137,7 +3893,7 @@ const useReplayRender = () => {
     };
 };
 
-const useHeatmapVizRender = (mode) => {
+const useHeatmapRenderByMode = (mode) => {
     const heatmapResult = useMemo(() => {
         switch (mode) {
             case 'heatmap':
@@ -3178,7 +3934,7 @@ const useContainerDimensions = (props) => {
     return { containerWidth, containerHeight };
 };
 
-const useContentDimensions = ({ iframeRef, }) => {
+const useContentDimensions = ({ iframeRef }) => {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
     useEffect(() => {
         if (!contentWidth)
@@ -3191,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);
@@ -3250,7 +4006,7 @@ const useObserveIframeHeight = (props) => {
     }, [updateIframeHeight]);
     useEffect(() => {
         const iframe = iframeRef.current;
-        if (!iframe || !isRenderViz)
+        if (!iframe || !iframeHeight || !isRenderViz)
             return;
         const setupObservers = () => {
             try {
@@ -3312,7 +4068,7 @@ const useObserveIframeHeight = (props) => {
             }
             iframe.removeEventListener('load', setupObservers);
         };
-    }, [iframeRef, isRenderViz, updateIframeHeight, debouncedUpdate, immediateUpdate]);
+    }, [iframeRef, iframeHeight, isRenderViz, updateIframeHeight, debouncedUpdate, immediateUpdate]);
     return {};
 };
 
@@ -3361,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)
@@ -3382,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,
@@ -3401,8 +4157,6 @@ const useHeatmapScale = (props) => {
     const scaledHeight = iframeHeight * widthScale;
     const scaledWidth = contentWidth * widthScale;
     return {
-        containerWidth,
-        containerHeight,
         scaledWidth,
         scaledHeight,
         handleScroll,
@@ -3583,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]);
@@ -3721,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) => {
@@ -4253,352 +5003,50 @@ const VizContainer = ({ children, isActive = false }) => {
                 }, children: children }), jsx(PopoverSidebar, {})] }));
 };
 
-/**
- * Controls for area click feature - toggle edit mode, clear areas, etc.
- */
-const AreaControls = ({ className, style }) => {
-    const { isEditingMode, setIsEditingMode, areas, clearAreas } = useHeatmapAreaClick();
-    return (jsxs("div", { className: className, style: {
-            display: 'flex',
-            gap: '8px',
-            alignItems: 'center',
-            ...style,
-        }, children: [jsx("button", { onClick: () => setIsEditingMode(!isEditingMode), style: {
-                    padding: '8px 16px',
-                    borderRadius: '4px',
-                    border: '1px solid #ccc',
-                    backgroundColor: isEditingMode ? '#0078D4' : 'white',
-                    color: isEditingMode ? 'white' : '#161514',
-                    cursor: 'pointer',
-                    fontWeight: 500,
-                    transition: 'all 0.2s',
-                }, children: isEditingMode ? 'Exit Edit Mode' : 'Edit Areas' }), areas.length > 0 && (jsxs(Fragment, { children: [jsxs("span", { style: { color: '#605E5C', fontSize: '14px' }, children: [areas.length, " area", areas.length !== 1 ? 's' : ''] }), jsx("button", { onClick: () => {
-                            if (confirm(`Clear all ${areas.length} areas?`)) {
-                                clearAreas();
-                            }
-                        }, style: {
-                            padding: '8px 16px',
-                            borderRadius: '4px',
-                            border: '1px solid #ccc',
-                            backgroundColor: 'white',
-                            color: '#A4262C',
-                            cursor: 'pointer',
-                            fontWeight: 500,
-                            transition: 'all 0.2s',
-                        }, children: "Clear All" })] }))] }));
-};
-AreaControls.displayName = 'AreaControls';
-
-const AreaEditHighlight = ({ element, shadowRoot, onClick, }) => {
-    const [rect, setRect] = useState(null);
-    const highlightRef = useRef(null);
-    useEffect(() => {
-        if (!element) {
-            setRect(null);
-            return;
-        }
-        // Calculate element position
-        const elementRect = getElementRect(element);
-        setRect(elementRect);
-    }, [element, shadowRoot]);
-    if (!rect) {
-        return null;
-    }
-    const handleClick = (e) => {
-        if (element && onClick) {
-            e.stopPropagation();
-            e.preventDefault();
-            onClick(element);
-        }
-    };
-    return (jsx("div", { ref: highlightRef, id: AREA_HOVER_ELEMENT_ID, [AREA_MAP_DIV_ATTRIBUTE]: '1', onClick: handleClick, style: {
-            position: 'absolute',
-            top: `${rect.absoluteTop}px`,
-            left: `${rect.absoluteLeft}px`,
-            width: `${rect.width}px`,
-            height: `${rect.height}px`,
-            zIndex: Number.MAX_SAFE_INTEGER,
-            boxShadow: AREA_HOVER_BOX_SHADOW,
-            backgroundColor: 'rgba(128, 128, 128, 0.4)',
-            backgroundImage: 'repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px)',
-            pointerEvents: 'auto',
-            cursor: 'pointer',
-            boxSizing: 'border-box',
-        } }));
-};
-AreaEditHighlight.displayName = 'AreaEditHighlight';
-
-const AreaLabel = ({ clickDist, totalClicks, kind }) => {
-    if (kind === 'money') {
-        return null;
-    }
-    return (jsxs("div", { style: {
-            color: '#161514',
-            backgroundColor: 'rgba(255, 255, 255, 0.86)',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            padding: '8px',
-            borderRadius: '4px',
-            fontSize: '16px',
-            lineHeight: '20px',
-            minWidth: '56px',
-            fontWeight: 600,
-            fontFamily: '"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
-            pointerEvents: 'none',
-        }, children: [jsxs("span", { children: [clickDist.toFixed(2), "%"] }), jsxs("span", { style: { fontSize: '12px', fontWeight: 400, opacity: 0.8 }, children: [totalClicks, " clicks"] })] }));
-};
-AreaLabel.displayName = 'AreaLabel';
-
-const AreaOverlay = ({ area, onClick, onMouseEnter, onMouseLeave, isSelected, isHovered, }) => {
-    const [rect, setRect] = useState(area.rect.value);
-    useEffect(() => {
-        const handleRectChange = (newRect) => {
-            if (newRect) {
-                setRect(newRect);
-            }
-        };
-        area.rect.observe(handleRectChange);
-        return () => {
-            area.rect.unobserve(handleRectChange);
-        };
-    }, [area.rect]);
-    if (!rect)
-        return null;
-    const position = area.isFixed ? 'fixed' : 'absolute';
-    const showLabel = !isRectTooSmallForLabel(rect);
-    const backgroundColor = isHovered ? area.hoverColor : area.color;
-    const boxShadow = isSelected
-        ? '0 0 0 3px #0078d4 inset'
-        : isHovered
-            ? AREA_HOVER_BOX_SHADOW
-            : '0 0 0 2px white inset';
-    return (jsx("div", { id: `area-${area.id}`, "data-area-id": area.id, [AREA_MAP_DIV_ATTRIBUTE]: '1', onClick: () => onClick?.(area), onMouseEnter: () => onMouseEnter?.(area), onMouseLeave: () => onMouseLeave?.(area), style: {
-            position,
-            top: `${rect.top}px`,
-            left: `${rect.left}px`,
-            width: `${rect.width}px`,
-            height: `${rect.height}px`,
-            backgroundColor,
-            boxShadow,
-            boxSizing: 'border-box',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: 'pointer',
-            transition: 'background-color 0.2s, box-shadow 0.2s',
-            pointerEvents: 'auto',
-        }, children: showLabel && (jsx(AreaLabel, { clickDist: area.clickDist, totalClicks: area.totalclicks, kind: area.kind })) }));
-};
-
 function useAreaRenderer(options) {
-    const { iframeRef, shadowRoot: customShadowRoot, onAreaCreated, onAreaClick } = options;
-    const iframeDocument = iframeRef.current?.contentDocument;
-    // Get heatmap data for building areas
-    const { dataInfo } = useHeatmapData();
-    const { areas, selectedArea, hoveredArea, isEditingMode, setSelectedArea, setHoveredArea, addArea, } = useHeatmapAreaClick();
-    const [shadowContainer, setShadowContainer] = useState(null);
-    const [isReady, setIsReady] = useState(false);
-    const containerRef = useRef(null);
-    useEffect(() => {
-        if (!iframeDocument) {
-            setIsReady(false);
-            return;
-        }
-        let container = iframeDocument.querySelector(`[${AREA_MAP_DIV_ATTRIBUTE}]`);
-        if (!container) {
-            container = iframeDocument.createElement('div');
-            container.setAttribute(AREA_MAP_DIV_ATTRIBUTE, 'true');
-            container.style.cssText = `
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        z-index: 999999;
-      `;
-            // Append to custom shadow root or body
-            const targetRoot = customShadowRoot || iframeDocument.body;
-            if (targetRoot) {
-                targetRoot.appendChild(container);
-            }
-        }
-        // Create shadow root if needed
-        let shadowRoot;
-        if (!container.shadowRoot) {
-            shadowRoot = getOrCreateShadowRoot(container);
-        }
-        else {
-            shadowRoot = container.shadowRoot;
-        }
-        // Create inner container for React portal
-        let innerContainer = shadowRoot.querySelector('.heatmap-area-container');
-        if (!innerContainer) {
-            innerContainer = iframeDocument.createElement('div');
-            innerContainer.className = 'heatmap-area-container';
-            innerContainer.style.cssText = `
-        position: relative;
-        width: 100%;
-        height: 100%;
-      `;
-            shadowRoot.appendChild(innerContainer);
-        }
-        containerRef.current = innerContainer;
-        setShadowContainer(innerContainer);
-        setIsReady(true);
-        return () => {
-            if (container && container.parentNode) {
-                container.parentNode.removeChild(container);
-            }
-            containerRef.current = null;
-            setShadowContainer(null);
-            setIsReady(false);
-        };
-    }, [iframeDocument, customShadowRoot]);
-    const handleCreateAreaFromElement = useCallback((element) => {
-        if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks) {
-            console.warn('[useAreaRenderer] Cannot create area: missing heatmap data');
-            return;
-        }
-        const hash = getElementHash(element);
-        if (!hash) {
-            console.warn('[useAreaRenderer] Cannot create area: missing hash');
-            return;
-        }
-        const alreadyExists = areas.some((area) => area.hash === hash);
-        if (alreadyExists) {
-            console.warn(`[useAreaRenderer] Area already exists for element: ${hash}`);
-            return;
-        }
-        try {
-            const area = buildAreaNode(element, hash, dataInfo.elementMapInfo, dataInfo.totalClicks, customShadowRoot);
-            addArea(area);
-            if (onAreaCreated) {
-                onAreaCreated(area);
-            }
-            console.log('[useAreaRenderer] Area created:', {
-                hash,
-                selector: area.selector,
-                clicks: area.totalclicks,
-                clickDist: area.clickDist,
-            });
-        }
-        catch (error) {
-            console.error('[useAreaRenderer] Failed to create area:', error);
-        }
-    }, [dataInfo, areas, customShadowRoot, addArea]);
-    const { hoveredElement } = useAreaEditMode({
-        iframeRef,
-        enabled: isEditingMode,
-        onCreateArea: handleCreateAreaFromElement,
-    });
-    useAreaScrollSync({
-        areas,
+    const { iframeRef, visualRef, shadowRoot, onAreaCreated, onAreaClick } = options;
+    const iframeDocument = iframeRef.current?.contentDocument || undefined;
+    const { shadowContainer, isReady } = useAreaRendererContainer(iframeDocument, shadowRoot);
+    const { areasPortal, editHighlightPortal } = useAreaPortals({
         iframeRef,
-        enabled: isReady,
+        shadowContainer,
+        isReady,
+        onAreaClick,
+        onAreaCreated,
     });
-    const handleAreaClick = (area) => {
-        if (isEditingMode)
-            return;
-        setSelectedArea(selectedArea?.id === area.id ? null : area);
-        if (onAreaClick) {
-            onAreaClick(area);
-        }
-    };
-    const handleAreaMouseEnter = (area) => {
-        if (isEditingMode)
-            return;
-        setHoveredArea(area);
-    };
-    const handleAreaMouseLeave = (area) => {
-        if (isEditingMode)
-            return;
-        if (hoveredArea?.id === area.id) {
-            setHoveredArea(null);
-        }
-    };
-    const areasPortal = shadowContainer && isReady
-        ? createPortal(jsx(Fragment, { children: areas.map((area) => (jsx(AreaOverlay, { area: area, onClick: handleAreaClick, onMouseEnter: handleAreaMouseEnter, onMouseLeave: handleAreaMouseLeave, isSelected: selectedArea?.id === area.id, isHovered: hoveredArea?.id === area.id }, area.id))) }), shadowContainer)
-        : null;
-    const editHighlightPortal = shadowContainer && isReady && isEditingMode && hoveredElement
-        ? createPortal(jsx(AreaEditHighlight, { element: hoveredElement, shadowRoot: customShadowRoot, onClick: handleCreateAreaFromElement }), shadowContainer)
-        : null;
+    useAreaRectSync({ iframeDocument, shadowRoot, enabled: isReady });
+    useAreaScrollSync({ iframeRef, visualRef, enabled: isReady });
     return {
-        areasPortal: areasPortal,
-        editHighlightPortal: editHighlightPortal,
-        shadowContainer,
+        areasPortal,
+        editHighlightPortal,
         isReady,
     };
 }
 
-const VizAreaClick = ({ iframeRef, shadowRoot, autoCreateTopN = 10, enableOverlapResolution = true, renderControls, onAreaClick, }) => {
-    const iframeDocument = iframeRef.current?.contentDocument;
-    const { dataInfo } = useHeatmapData();
-    const { areas, isEditingMode, setIsEditingMode, addArea, clearAreas, setAreas } = useHeatmapAreaClick();
+const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, enableOverlapResolution = true, onAreaClick, }) => {
+    const { clickAreas } = useHeatmapData();
+    const { resetView } = useHeatmapAreaClick();
     const { areasPortal, editHighlightPortal, isReady } = useAreaRenderer({
         iframeRef,
+        visualRef,
         shadowRoot,
         onAreaClick,
     });
-    // Auto-create areas from top elements
-    useEffect(() => {
-        if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks)
-            return;
-        if (autoCreateTopN <= 0)
-            return;
-        if (areas.length > 0)
-            return; // Already have areas
-        // Get top elements by clicks
-        const topElements = getTopElementsByClicks(dataInfo.elementMapInfo, autoCreateTopN);
-        // Build area nodes
-        const newAreas = [];
-        topElements.forEach(({ hash, selector }) => {
-            // Find element in DOM
-            const element = iframeDocument?.querySelector(selector);
-            if (!element || !(element instanceof HTMLElement))
-                return;
-            const area = buildAreaNode(element, hash, dataInfo.elementMapInfo, dataInfo.totalClicks);
-            newAreas.push(area);
-        });
-        // Add all areas
-        newAreas.forEach((area) => addArea(area));
-    }, [dataInfo, autoCreateTopN, areas.length, iframeDocument, shadowRoot]);
-    // Apply overlap resolution
-    const visibleAreas = useMemo(() => {
-        if (!enableOverlapResolution)
-            return areas;
-        if (!iframeDocument)
-            return areas;
-        return getVisibleAreas(areas, iframeDocument);
-    }, [areas, iframeDocument]);
-    // Update visible areas in store when resolution changes
+    useAreaTopAutoDetect({ autoCreateTopN, shadowRoot, disabled: !!clickAreas?.length });
+    useAreaFilterVisible({ iframeRef, enableOverlapResolution });
+    useAreaHydration({ shadowRoot });
     useEffect(() => {
-        if (enableOverlapResolution && visibleAreas.length !== areas.length) {
-            setAreas(visibleAreas);
-        }
-    }, [visibleAreas, areas.length]);
-    const handleToggleEdit = useCallback(() => {
-        setIsEditingMode(!isEditingMode);
-    }, [isEditingMode]);
-    const handleClearAll = useCallback(() => {
-        if (window.confirm(`Clear all ${areas.length} areas?`)) {
-            clearAreas();
-        }
-    }, [areas.length]);
-    const controlsElement = renderControls ? (renderControls({
-        isEditingMode,
-        areasCount: areas.length,
-        onToggleEdit: handleToggleEdit,
-        onClearAll: handleClearAll,
-    })) : (jsx(AreaControls, {}));
+        return () => {
+            resetView();
+        };
+    }, []);
     if (!isReady)
         return null;
-    return (jsxs(Fragment, { children: [areasPortal, editHighlightPortal, controlsElement] }));
+    return (jsxs(Fragment, { children: [areasPortal, editHighlightPortal] }));
 };
 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 }));
 };
@@ -4614,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);
         }) }));
 };
 
@@ -4686,7 +5134,7 @@ const ElementMissing = ({ show = true }) => {
         }, "aria-live": "assertive", children: "Element not visible on current screen" }));
 };
 
-const ElementOverlay = ({ type, element, onClick, isSecondary, elementId, }) => {
+const ElementOverlay = ({ type, element, onClick, elementId }) => {
     // useRenderCount('ElementOverlay');
     const { widthScale } = useHeatmapViz();
     if (!element || (element.width === 0 && element.height === 0))
@@ -4711,29 +5159,31 @@ const ELEMENT_CALLOUT = {
 };
 const HeatmapElements = (props) => {
     const viewId = useViewIdContext();
-    const { iframeHeight } = useHeatmapViz();
     const clickedElementId = getClickedElementId(viewId, props.isSecondary);
     const hoveredElementId = getHoveredElementId(viewId, props.isSecondary);
-    const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isVisible = true, areDefaultRanksHidden, isSecondary, } = props;
-    const getRect = useHeatmapElementPosition({
-        iframeRef,
-        wrapperRef,
-        visualizer,
+    const { iframeDimensions, isVisible = true, areDefaultRanksHidden } = props;
+    const { iframeHeight } = useHeatmapViz();
+    const { getRect } = useHeatmapElementPosition({
+        iframeRef: props.iframeRef,
+        wrapperRef: props.wrapperRef,
+        visualizer: props.visualizer,
     });
     const { clickedElement, showMissingElement, shouldShowCallout } = useClickedElement({
-        visualRef,
+        visualRef: props.visualRef,
         getRect,
     });
     const { hoveredElement, handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
-        iframeRef,
+        iframeRef: props.iframeRef,
         getRect,
     });
-    useElementCalloutVisible({ visualRef, getRect });
+    useElementCalloutVisible({ visualRef: props.visualRef, getRect });
     useHeatmapEffects({ isVisible });
     useRenderCount('HeatmapElements');
     if (!isVisible)
         return null;
-    return (jsxs("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, isSecondary: isSecondary, elementId: clickedElementId }), jsx(ElementOverlay, { type: "hovered", element: hoveredElement, isSecondary: isSecondary, onClick: handleClick, elementId: hoveredElementId }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${hoveredElementId}`, visualRef: visualRef, ...ELEMENT_CALLOUT })), shouldShowCallout && clickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${clickedElementId}`, visualRef: visualRef, ...ELEMENT_CALLOUT }))] }));
+    const isShowHoveredElement = hoveredElement && hoveredElement.hash !== clickedElement?.hash;
+    const isShowClickedElement = shouldShowCallout && clickedElement;
+    return (jsxs("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, elementId: clickedElementId }), jsx(ElementOverlay, { type: "hovered", element: hoveredElement, elementId: hoveredElementId, onClick: handleClick }), isShowHoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${hoveredElementId}`, visualRef: props.visualRef, ...ELEMENT_CALLOUT })), isShowClickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${clickedElementId}`, visualRef: props.visualRef, ...ELEMENT_CALLOUT }))] }));
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
@@ -4759,6 +5209,22 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
         } }));
 };
 
+const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
+    const clickMode = useHeatmapConfigStore((state) => state.clickMode);
+    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const isClickType = heatmapType === IHeatmapType.Click;
+    if (!isClickType)
+        return null;
+    switch (clickMode) {
+        case IClickMode.Default:
+            return jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef });
+        case IClickMode.Area:
+            return (jsx(VizAreaClick, { iframeRef: iframeRef, visualRef: visualRef, autoCreateTopN: 10, onAreaClick: (area) => {
+                    console.log('area clicked', area);
+                } }));
+    }
+};
+
 const ScrollMapMinimap = ({ zones, maxUsers }) => {
     const scrollType = useHeatmapConfigStore((state) => state.scrollType);
     const { showMinimap } = useHeatmapScroll();
@@ -4851,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)
@@ -4861,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);
@@ -5084,18 +5550,15 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const contentWidth = useHeatmapConfigStore((state) => state.width || 0);
-    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
-    const { setSelectedElement } = useHeatmapClick();
-    const { iframeHeight, setIframeHeight, isRenderViz } = useHeatmapViz();
-    const { iframeRef } = useHeatmapVizRender(mode);
+    const { iframeRef } = useHeatmapRenderByMode(mode);
+    const { iframeHeight } = useHeatmapViz();
     const { scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
         iframeRef,
         visualRef,
         iframeHeight,
-        isRenderViz,
     });
     useHeatmapCanvas();
     useRenderCount('VizDomRenderer');
@@ -5103,16 +5566,7 @@ 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: [heatmapType === IHeatmapType.Click && (jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef })), heatmapType === IHeatmapType.ClickArea && (jsx(VizAreaClick, { iframeRef: iframeRef, onAreaClick: (area) => {
-                    console.log('area clicked', area);
-                } })), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, scrolling: "no" }), jsx(VizScrollMap, { iframeRef: iframeRef, wrapperRef: visualRef })] }));
+    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 })] }));
 };
 
 const VizLoading = () => {
@@ -5120,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, {})] }));
 };
@@ -5189,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,
@@ -5231,4 +5689,104 @@ const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     }
 };
 
-export { DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, sendPerformanceReport, trackStoreAction, useAreaEditMode, useAreaScrollSync, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapLiveStore, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHeatmapVizRender, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+const AreaEditHighlight = ({ element, shadowRoot, onClick }) => {
+    const [rect, setRect] = useState(null);
+    const highlightRef = useRef(null);
+    useEffect(() => {
+        if (!element) {
+            setRect(null);
+            return;
+        }
+        const elementRect = getElementRect(element);
+        setRect(elementRect);
+    }, [element, shadowRoot]);
+    if (!rect) {
+        return null;
+    }
+    const handleClick = (e) => {
+        if (element && onClick) {
+            e.stopPropagation();
+            e.preventDefault();
+            onClick(element);
+        }
+    };
+    return (jsx("div", { ref: highlightRef, id: AREA_HOVER_ELEMENT_ID, [AREA_MAP_DIV_ATTRIBUTE]: '1', onClick: handleClick, style: {
+            position: 'absolute',
+            top: `${rect.absoluteTop}px`,
+            left: `${rect.absoluteLeft}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+            zIndex: Number.MAX_SAFE_INTEGER,
+            boxShadow: AREA_HOVER_BOX_SHADOW,
+            backgroundColor: 'rgba(128, 128, 128, 0.4)',
+            backgroundImage: 'repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px)',
+            pointerEvents: 'auto',
+            cursor: 'pointer',
+            boxSizing: 'border-box',
+        } }));
+};
+AreaEditHighlight.displayName = 'AreaEditHighlight';
+
+const AreaLabel = ({ clickDist, totalClicks, kind }) => {
+    if (kind === 'money') {
+        return null;
+    }
+    return (jsxs("div", { style: {
+            color: '#161514',
+            backgroundColor: 'rgba(255, 255, 255, 0.86)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: '8px',
+            borderRadius: '4px',
+            fontSize: '16px',
+            lineHeight: '20px',
+            minWidth: '56px',
+            fontWeight: 600,
+            fontFamily: '"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
+            pointerEvents: 'none',
+        }, children: [jsxs("span", { children: [clickDist.toFixed(2), "%"] }), jsxs("span", { style: { fontSize: '12px', fontWeight: 400, opacity: 0.8 }, children: [totalClicks, " clicks"] })] }));
+};
+AreaLabel.displayName = 'AreaLabel';
+
+const AreaOverlay = ({ area, onClick, onMouseEnter, onMouseLeave, isSelected, isHovered, }) => {
+    const [rect, setRect] = useState(area.rect.value);
+    useEffect(() => {
+        const handleRectChange = (newRect) => {
+            if (newRect) {
+                setRect(newRect);
+            }
+        };
+        area.rect.observe(handleRectChange);
+        return () => {
+            area.rect.unobserve(handleRectChange);
+        };
+    }, [area.rect]);
+    if (!rect)
+        return null;
+    const position = area.isFixed ? 'fixed' : 'absolute';
+    const showLabel = !isRectTooSmallForLabel(rect);
+    const backgroundColor = isHovered ? area.hoverColor : area.color;
+    const boxShadow = isSelected ? '0 0 0 3px red inset' : isHovered ? AREA_HOVER_BOX_SHADOW : '0 0 0 2px white inset';
+    return (jsxs("div", { id: `area-${area.id}`, "data-area-id": area.id, [AREA_MAP_DIV_ATTRIBUTE]: '1', onClick: () => onClick?.(area), onMouseEnter: () => onMouseEnter?.(area), onMouseLeave: () => onMouseLeave?.(area), children: [jsx("style", { children: `
+          #area-${area.id} {
+            position: ${position};
+            top: ${rect.top}px;
+            left: ${rect.left}px;
+            width: ${rect.width}px;
+            height: ${rect.height}px;
+            background-color: ${backgroundColor};
+            box-shadow: ${boxShadow};
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.2s, box-shadow 0.2s;
+            pointer-events: auto;
+            z-index: ${Number.MAX_SAFE_INTEGER};
+          }
+        ` }), 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, 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 };