@gemx-dev/heatmap-react 3.5.52 → 3.5.53

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 }),
     };
@@ -335,7 +342,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 +386,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 +545,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 +696,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 +739,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 +750,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 +760,7 @@ const useHeatmapAreaClick = (props) => {
         removeAreaStore,
         updateAreaStore,
         clearAreasStore,
+        resetViewStore,
         viewId,
     ]);
     return {
@@ -1046,9 +1066,37 @@ 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;
+}
+
 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 +1104,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;
@@ -1071,6 +1125,7 @@ const SECONDARY_HOVERED_ELEMENT_ID_BASE = 'gx-hm-secondary-hovered-element';
 function getColorFromClickDist(clickDist) {
     // Ensure clickDist is in range [0, 100]
     const normalizedDist = Math.max(0, Math.min(100, clickDist));
+    console.log(`🚀 🐥 ~ getColorFromClickDist ~ normalizedDist:`, normalizedDist);
     // Calculate gradient index
     const maxIndex = AREA_COLOR_GRADIENT.length - 1;
     const index = Math.floor((normalizedDist / 100) * maxIndex);
@@ -1100,27 +1155,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 +1180,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 +1190,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 +1204,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 +1214,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,8 +1253,11 @@ function getElementSelector(element) {
     }
     return element.tagName.toLowerCase();
 }
-function buildAreaNode(element, hash, elementMapInfo, totalClicks, shadowRoot) {
-    const elementInfo = elementMapInfo[hash];
+function buildAreaNode(element, hash, heatmapInfo, shadowRoot) {
+    if (!heatmapInfo.elementMapInfo)
+        return;
+    const totalClicks = heatmapInfo.totalClicks || 0;
+    const elementInfo = heatmapInfo.elementMapInfo[hash];
     const elementClicks = elementInfo?.totalclicks || 0;
     const clickDist = calculateClickDistribution(elementClicks, totalClicks);
     const rect = getElementRect(element);
@@ -1446,6 +1448,67 @@ function getVisibleAreas(areas, iframeDocument) {
     return sortAreasByClickDist(visible);
 }
 
+/**
+ * Helper functions for setting up area renderer
+ */
+/**
+ * Create the outer container for area rendering
+ */
+function createAreaContainer(iframeDocument) {
+    const container = iframeDocument.createElement('div');
+    container.setAttribute(AREA_MAP_DIV_ATTRIBUTE, 'true');
+    container.style.cssText = AREA_CONTAINER_STYLES;
+    return container;
+}
+/**
+ * Create the inner container for React portal
+ */
+function createInnerContainer(iframeDocument) {
+    const innerContainer = iframeDocument.createElement('div');
+    innerContainer.className = AREA_RENDERER_SELECTORS.innerContainerClass;
+    innerContainer.style.cssText = AREA_INNER_CONTAINER_STYLES;
+    return innerContainer;
+}
+/**
+ * Get or create the outer container element
+ */
+function getOrCreateAreaContainer(iframeDocument, customShadowRoot) {
+    let container = iframeDocument.querySelector(AREA_RENDERER_SELECTORS.containerSelector);
+    if (!container) {
+        container = createAreaContainer(iframeDocument);
+        const targetRoot = customShadowRoot || iframeDocument.body;
+        if (targetRoot) {
+            targetRoot.appendChild(container);
+        }
+    }
+    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);
+    }
+}
+
 function findLastSizeOfDom(data) {
     const listDocs = data
         .filter((item) => item.doc?.find((doc) => doc.data.width && doc.data.height))
@@ -1510,23 +1573,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;
@@ -1729,6 +1775,191 @@ const calcCalloutPosition = (options) => {
     };
 };
 
+/**
+ * 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'));
+}
+
+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 = new Logger();
+
 class IframeNavigationBlockerV2 {
     doc;
     win;
@@ -1736,17 +1967,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.configure({ enabled: !!config?.debug, prefix: '[IframeNavigationBlockerV2]' });
         this.init();
     }
     init() {
-        console.log('[NavigationBlocker] Initializing...');
+        logger.log('Initializing...');
         try {
             // Chặn navigation qua links
             this.blockLinkNavigation();
@@ -1762,7 +1994,7 @@ class IframeNavigationBlockerV2 {
             this.injectCSP();
         }
         catch (error) {
-            console.error('[NavigationBlocker] Init error:', error);
+            logger.error('Init error:', error);
         }
     }
     blockLinkNavigation() {
@@ -1776,11 +2008,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.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.log('Blocked link navigation to:', href);
                 e.preventDefault();
                 e.stopPropagation();
                 e.stopImmediatePropagation();
@@ -1796,7 +2028,7 @@ class IframeNavigationBlockerV2 {
             if (link) {
                 const href = link.getAttribute('href');
                 if (href && !href.startsWith('#')) {
-                    console.log('[NavigationBlocker] Blocked auxclick navigation');
+                    logger.log('Blocked auxclick navigation');
                     e.preventDefault();
                     e.stopPropagation();
                     e.stopImmediatePropagation();
@@ -1829,13 +2061,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.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.log('Blocked form submission to:', action);
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
@@ -1849,7 +2081,7 @@ class IframeNavigationBlockerV2 {
                 return this.originalWindowOpen(...args);
             }
             const url = args[0]?.toString() || 'popup';
-            console.log('[NavigationBlocker] Blocked window.open:', url);
+            logger.log('Blocked window.open:', url);
             this.notifyBlockedNavigation(url);
             return null;
         });
@@ -1859,7 +2091,7 @@ class IframeNavigationBlockerV2 {
         this.win.addEventListener('beforeunload', (e) => {
             if (!this.isEnabled)
                 return;
-            console.log('[NavigationBlocker] Blocked beforeunload');
+            logger.log('Blocked beforeunload');
             e.preventDefault();
             e.returnValue = '';
             return '';
@@ -1868,7 +2100,7 @@ class IframeNavigationBlockerV2 {
         this.win.addEventListener('unload', (e) => {
             if (!this.isEnabled)
                 return;
-            console.log('[NavigationBlocker] Blocked unload');
+            logger.log('Blocked unload');
             e.preventDefault();
             e.stopPropagation();
         }, true);
@@ -1876,7 +2108,7 @@ class IframeNavigationBlockerV2 {
         this.win.addEventListener('popstate', (e) => {
             if (!this.isEnabled)
                 return;
-            console.log('[NavigationBlocker] Blocked popstate');
+            logger.log('Blocked popstate');
             e.preventDefault();
             e.stopPropagation();
         }, true);
@@ -1929,11 +2161,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.log('Injected CSP');
             }
         }
         catch (error) {
-            console.warn('[NavigationBlocker] Could not inject CSP:', error);
+            logger.warn('Could not inject CSP:', error);
         }
     }
     handleFormSubmit(form) {
@@ -1942,13 +2174,13 @@ class IframeNavigationBlockerV2 {
         formData.forEach((value, key) => {
             data[key] = value;
         });
-        console.log('[NavigationBlocker] Handling form data:', data);
+        logger.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.warn('Navigation blocked to:', url);
         window.dispatchEvent(new CustomEvent('iframe-navigation-blocked', {
             detail: { url, timestamp: Date.now() },
         }));
@@ -1998,19 +2230,19 @@ class IframeNavigationBlockerV2 {
     }
     enable() {
         this.isEnabled = true;
-        console.log('[NavigationBlocker] Enabled');
+        logger.log('Enabled');
     }
     enableMessage() {
         this.showMessage = true;
-        console.log('[NavigationBlocker] Enabled message');
+        logger.log('Enabled message');
     }
     disable() {
         this.isEnabled = false;
-        console.log('[NavigationBlocker] Disabled');
+        logger.log('Disabled');
     }
     disableMessage() {
         this.showMessage = false;
-        console.log('[NavigationBlocker] Disabled message');
+        logger.log('Disabled message');
     }
     destroy() {
         this.isEnabled = false;
@@ -2018,7 +2250,7 @@ class IframeNavigationBlockerV2 {
         // Cleanup observers
         this.observers.forEach((observer) => observer.disconnect());
         this.observers = [];
-        console.log('[NavigationBlocker] Destroyed');
+        logger.log('Destroyed');
     }
 }
 
@@ -2034,6 +2266,7 @@ class IframeStyleReplacer {
         this.doc = iframe.contentDocument;
         this.win = iframe.contentWindow;
         this.config = config;
+        logger.configure({ enabled: !!config?.debug, prefix: '[IframeStyleReplacer]' });
     }
     px(value) {
         return `${value.toFixed(2)}px`;
@@ -2067,7 +2300,7 @@ class IframeStyleReplacer {
                 count++;
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${count} inline style elements`);
+        logger.log(`Replaced ${count} inline style elements`);
         return count;
     }
     processStyleTags() {
@@ -2080,7 +2313,7 @@ class IframeStyleReplacer {
                 count++;
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${count} <style> tags`);
+        logger.log(`Replaced ${count} <style> tags`);
         return count;
     }
     processRule(rule) {
@@ -2111,7 +2344,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.log('Skipping external CSS:', sheet.href);
                     return;
                 }
                 const rules = sheet.cssRules || sheet.rules;
@@ -2122,10 +2355,10 @@ class IframeStyleReplacer {
                 }
             }
             catch (e) {
-                console.warn('[IframeStyleReplacer] Cannot read stylesheet (CORS?):', e.message);
+                logger.warn('Cannot read stylesheet (CORS?):', e.message);
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${total} rules in stylesheets`);
+        logger.log(`Replaced ${total} rules in stylesheets`);
         return total;
     }
     async processLinkedStylesheets() {
@@ -2133,7 +2366,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.log('Skipping external CSS:', link.href);
                 continue;
             }
             try {
@@ -2151,10 +2384,10 @@ class IframeStyleReplacer {
                 }
             }
             catch (e) {
-                console.warn('[IframeStyleReplacer] Cannot load CSS:', link.href, e);
+                logger.warn('Cannot load CSS:', link.href, e);
             }
         }
-        console.log(`[IframeStyleReplacer] Replaced ${count} linked CSS files`);
+        logger.log(`Replaced ${count} linked CSS files`);
         return count;
     }
     getFinalHeight() {
@@ -2178,7 +2411,7 @@ class IframeStyleReplacer {
     }
     async run() {
         try {
-            console.log('[IframeStyleReplacer] Starting viewport units replacement...');
+            logger.log('Starting viewport units replacement...');
             this.processInlineStyles();
             this.processStyleTags();
             this.processStylesheets();
@@ -2188,13 +2421,13 @@ class IframeStyleReplacer {
                 requestAnimationFrame(() => {
                     const height = this.getFinalHeight();
                     const width = this.getFinalWidth();
-                    console.log('[IframeStyleReplacer] Calculated dimensions:', { height, width });
+                    logger.log('Calculated dimensions:', { height, width });
                     resolve({ height, width });
                 });
             });
         }
         catch (err) {
-            console.error('[IframeStyleReplacer] Critical error:', err);
+            logger.error('Critical error:', err);
             return {
                 height: this.doc.body.scrollHeight || 1000,
                 width: this.doc.body.scrollWidth || 1000,
@@ -2215,10 +2448,11 @@ class IframeHelperFixer {
         this.config = config;
         this.iframe = config.iframe;
         this.init();
+        logger.configure({ enabled: !!config?.debug, prefix: '[IframeHelper]' });
     }
     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 +2466,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);
             // 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 +2487,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,28 +2517,62 @@ 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 useAreaCreation(options = {}) {
+    const { customShadowRoot, onAreaCreated } = options;
+    const { dataInfo } = useHeatmapData();
+    const { areas, addArea } = useHeatmapAreaClick();
+    const handleCreateAreaFromElement = useCallback((element) => {
+        if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks) {
+            logger.warn('Cannot create area: missing heatmap data');
+            return;
+        }
+        const hash = getElementHash(element);
+        if (!hash) {
+            logger.warn('Cannot create area: missing hash');
+            return;
+        }
+        const alreadyExists = areas.some((area) => area.hash === hash);
+        if (alreadyExists) {
+            logger.warn(`Area already exists for element: ${hash}`);
+            return;
+        }
+        try {
+            const area = buildAreaNode(element, hash, dataInfo, customShadowRoot);
+            if (!area)
+                return;
+            addArea(area);
+            if (onAreaCreated) {
+                onAreaCreated(area);
+            }
+        }
+        catch (error) {
+            logger.error('Failed to create area:', error);
+        }
+    }, [dataInfo, areas, addArea, customShadowRoot]);
+    return {
+        onAreaCreatedElement: handleCreateAreaFromElement,
+    };
+}
+
+function useAreaEditMode({ iframeRef, onAreaCreatedElement, enabled = false, }) {
     const [hoveredElement, setHoveredElement] = useState(null);
     const [isHovering, setIsHovering] = useState(false);
     const { isEditingMode } = useHeatmapAreaClick();
@@ -2313,31 +2581,30 @@ function useAreaEditMode({ iframeRef, onCreateArea, enabled = false, }) {
     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);
+            return;
         }
-        else if (!selectableElement && hoveredElement) {
-            setHoveredElement(null);
-            setIsHovering(false);
-        }
+        setHoveredElement(null);
+        setIsHovering(false);
     }, [isActive, iframeDocument, hoveredElement]);
-    const handleClick = useCallback((e) => {
+    const handleMouseLeave = useCallback(() => {
+        setHoveredElement(null);
+        setIsHovering(false);
+    }, []);
+    useCallback((e) => {
         if (!isActive || !hoveredElement)
             return;
         e.stopPropagation();
         e.preventDefault();
-        if (onCreateArea) {
-            onCreateArea(hoveredElement);
-        }
+        if (!onAreaCreatedElement)
+            return;
+        onAreaCreatedElement(hoveredElement);
     }, [isActive, hoveredElement]);
-    const handleMouseLeave = useCallback(() => {
-        setHoveredElement(null);
-        setIsHovering(false);
-    }, []);
     useEffect(() => {
         if (!isActive || !iframeDocument) {
             setHoveredElement(null);
@@ -2355,17 +2622,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,103 +2641,166 @@ 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) {
+        if (enableOverlapResolution && visibleAreas.length !== areas.length) {
+            setAreas(visibleAreas);
+        }
+    }, [visibleAreas, areas.length]);
+    return {};
+};
+
+/**
+ * Hook to handle area interaction (click, hover)
+ *
+ * @param options - Configuration options
+ * @returns Event handlers for area interactions
+ */
+function useAreaInteraction(options = {}) {
+    const { onAreaClick } = options;
+    const { selectedArea, hoveredArea, isEditingMode, setSelectedArea, setHoveredArea } = useHeatmapAreaClick();
+    const handleAreaClick = useCallback((area) => {
+        if (isEditingMode)
             return;
+        // Toggle selection
+        setSelectedArea(selectedArea?.id === area.id ? null : area);
+        // Trigger callback
+        if (onAreaClick) {
+            onAreaClick(area);
         }
-        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 });
+    }, [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);
         }
-        return () => {
-            if (rafId !== null) {
-                cancelAnimationFrame(rafId);
-            }
-            iframeDocument.removeEventListener('scroll', updateAreaPositions);
-            if (iframeWindow) {
-                iframeWindow.removeEventListener('resize', updateAreaPositions);
-            }
-        };
-    }, [areas, iframeDocument, enabled]);
+    }, [isEditingMode, hoveredArea]);
+    return {
+        handleAreaClick,
+        handleAreaMouseEnter,
+        handleAreaMouseLeave,
+    };
 }
 
-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 };
-};
+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,
+    };
+}
 
-const useScrollmap = () => {
+function useAreaRectSync(options) {
+    const { iframeDocument, shadowRoot, enabled = true } = options;
     const { vizRef } = useHeatmapViz();
-    const { scrollmap } = useHeatmapData();
-    const start = useCallback(() => {
-        // if (isInitialized) return;
-        if (!vizRef || !scrollmap || scrollmap.length === 0)
+    const { areas } = useHeatmapAreaClick();
+    useEffect(() => {
+        if (!enabled || !iframeDocument || areas.length === 0) {
             return;
-        try {
-            vizRef?.clearmap?.();
-            vizRef?.scrollmap?.(scrollmap);
-            // setIsInitialized(true);
-        }
-        catch (error) {
-            console.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
         }
-    }, [vizRef, scrollmap]);
-    return { start };
-};
+        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.error(`Failed to update rect for area ${area.id}:`, error);
+            }
+        });
+    }, [areas, iframeDocument, shadowRoot, enabled, vizRef]);
+}
 
-const useHeatmapCanvas = () => {
-    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const { start: startClickmap } = useClickmap();
-    const { start: startScrollmap } = useScrollmap();
+/**
+ * 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(() => {
-        switch (heatmapType) {
-            case IHeatmapType.Click:
-                startClickmap();
-                break;
-            case IHeatmapType.Scroll:
-                startScrollmap();
-                break;
+        if (!iframeDocument) {
+            setIsReady(false);
+            return;
         }
-    }, [heatmapType, startClickmap, startScrollmap]);
-};
+        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)
@@ -2528,7 +2858,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 +2914,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 +2950,7 @@ const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
             outOfBounds,
         };
     }, [iframeRef, wrapperRef, visualizer, heatmapWidth, iframeHeight, widthScale]);
+    return { getRect };
 };
 
 const debounce = (fn, delay) => {
@@ -2630,10 +2961,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 +2981,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 +3129,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 +3166,167 @@ 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 { iframeRef, autoCreateTopN, shadowRoot } = props;
+    const iframeDocument = iframeRef.current?.contentDocument;
+    const { dataInfo } = useHeatmapData();
+    const { vizRef } = useHeatmapViz();
+    const { areas, addArea } = useHeatmapAreaClick();
+    useEffect(() => {
+        if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks)
+            return;
+        if (autoCreateTopN <= 0)
+            return;
+        if (areas.length > 0)
+            return;
+        const topElements = getTopElementsByClicks(dataInfo.elementMapInfo, autoCreateTopN);
+        const newAreas = [];
+        topElements.forEach(({ hash }) => {
+            const element = vizRef?.get(hash);
+            if (!element)
+                return;
+            const area = buildAreaNode(element, hash, dataInfo);
+            if (!area)
+                return;
+            newAreas.push(area);
+        });
+        newAreas.forEach((area) => addArea(area));
+    }, [dataInfo, autoCreateTopN, areas.length, iframeDocument, shadowRoot]); // 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 (isInitialized) return;
+        if (!vizRef || !scrollmap || scrollmap.length === 0)
+            return;
+        try {
+            vizRef?.clearmap?.();
+            vizRef?.scrollmap?.(scrollmap);
+            // setIsInitialized(true);
+        }
+        catch (error) {
+            console.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";
@@ -3137,7 +3615,7 @@ const useReplayRender = () => {
     };
 };
 
-const useHeatmapVizRender = (mode) => {
+const useHeatmapRenderByMode = (mode) => {
     const heatmapResult = useMemo(() => {
         switch (mode) {
             case 'heatmap':
@@ -4228,373 +4706,69 @@ const PopoverSidebar = () => {
                         overflow: 'auto',
                     }, children: jsx(CompSidebar, { closeAction: { onClick: () => setIsPopoverOpen(false) } }) }) }))] }));
 };
-
-const ContentToolbar = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    return (jsx("div", { id: "gx-hm-content-toolbar", style: {
-            position: 'absolute',
-            bottom: 0,
-            left: '8px',
-            right: '24px',
-            padding: '8px',
-            paddingBlock: '16px',
-        }, children: controls.Toolbar ?? null }));
-};
-
-const VizContainer = ({ children, isActive = false }) => {
-    const wrapperRef = useRef(null);
-    const viewId = useViewIdContext();
-    useWrapperRefHeight({
-        isActive,
-        wrapperRef,
-    });
-    return (jsxs(BoxStack, { ref: wrapperRef, id: `gx-hm-viz-container-${viewId}`, flexDirection: "column", flex: "1 1 auto", overflow: "auto", zIndex: 1, children: [jsx(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
-                    minWidth: '394px',
-                }, 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',
+
+const ContentToolbar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    return (jsx("div", { id: "gx-hm-content-toolbar", style: {
+            position: 'absolute',
+            bottom: 0,
+            left: '8px',
+            right: '24px',
             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"] })] }));
+            paddingBlock: '16px',
+        }, children: controls.Toolbar ?? null }));
 };
-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 })) }));
+const VizContainer = ({ children, isActive = false }) => {
+    const wrapperRef = useRef(null);
+    const viewId = useViewIdContext();
+    useWrapperRefHeight({
+        isActive,
+        wrapperRef,
+    });
+    return (jsxs(BoxStack, { ref: wrapperRef, id: `gx-hm-viz-container-${viewId}`, flexDirection: "column", flex: "1 1 auto", overflow: "auto", zIndex: 1, children: [jsx(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
+                    minWidth: '394px',
+                }, children: children }), jsx(PopoverSidebar, {})] }));
 };
 
 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 { 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({ iframeRef, autoCreateTopN, shadowRoot });
+    useAreaFilterVisible({ iframeRef, enableOverlapResolution });
     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';
 
@@ -4686,7 +4860,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 +4885,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 +4935,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: 0, onAreaClick: (area) => {
+                    console.log('area clicked', area);
+                } }));
+    }
+};
+
 const ScrollMapMinimap = ({ zones, maxUsers }) => {
     const scrollType = useHeatmapConfigStore((state) => state.scrollType);
     const { showMinimap } = useHeatmapScroll();
@@ -5084,12 +5276,11 @@ 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 { scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
         iframeRef,
@@ -5110,9 +5301,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
     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 = () => {
@@ -5231,4 +5420,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, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaInteraction, useAreaPortals, useAreaRectSync, useAreaRendererContainer, useAreaScrollSync, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };