@gemx-dev/heatmap-react 3.5.51 → 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 }) => {
@@ -48,6 +48,7 @@ const HEATMAP_IFRAME = {
     height: '100%',
 };
 
+const DEFAULT_SIDEBAR_WIDTH = 260;
 const HEATMAP_CONFIG = {
     padding: 8,
     borderWidth: 1,
@@ -66,32 +67,10 @@ const HEATMAP_STYLE = {
         paddingInline: `${HEATMAP_CONFIG.padding}px`,
     },
 };
-const DEFAULT_SIDEBAR_WIDTH = 260;
 
-/**
- * Default view ID for single mode
- */
 const DEFAULT_VIEW_ID = 'default';
-/**
- * Generate compare view ID
- * @param index - Zero-based index (0, 1, 2, 3)
- * @returns View ID string like 'view-0', 'view-1', etc.
- */
-const getCompareViewId = (index) => `view-${index}`;
-/**
- * Check if a view ID is a compare view
- */
-const isCompareViewId = (viewId) => viewId.startsWith('view-');
-/**
- * Extract index from compare view ID
- * @param viewId - View ID like 'view-0'
- * @returns Index number or -1 if invalid
- */
-const getCompareViewIndex = (viewId) => {
-    if (!isCompareViewId(viewId))
-        return -1;
-    const match = viewId.match(/^view-(\d+)$/);
-    return match ? parseInt(match[1], 10) : -1;
+const getCompareViewId = (viewId) => {
+    return `compare-${viewId}`;
 };
 
 const Z_INDEX = {
@@ -157,6 +136,7 @@ const useHeatmapControlStore = create()((set, get) => {
 var IHeatmapType;
 (function (IHeatmapType) {
     IHeatmapType["Click"] = "click";
+    IHeatmapType["ClickArea"] = "click-area";
     IHeatmapType["Scroll"] = "scroll";
 })(IHeatmapType || (IHeatmapType = {}));
 var IClickType;
@@ -168,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";
@@ -182,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 }),
@@ -190,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 }),
     };
@@ -244,10 +231,178 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
+const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
+    return {
+        isRenderViz: { [DEFAULT_VIEW_ID]: false },
+        zoomRatio: { [DEFAULT_VIEW_ID]: 100 },
+        minZoomRatio: { [DEFAULT_VIEW_ID]: 10 },
+        scale: { [DEFAULT_VIEW_ID]: 1 },
+        isScaledToFit: { [DEFAULT_VIEW_ID]: false },
+        setIsRenderViz: (isRenderViz, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            isRenderViz: { ...state.isRenderViz, [viewId]: isRenderViz },
+        })),
+        setZoomRatio: (zoomRatio, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            zoomRatio: { ...state.zoomRatio, [viewId]: zoomRatio },
+        })),
+        setMinZoomRatio: (minZoomRatio, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            minZoomRatio: { ...state.minZoomRatio, [viewId]: minZoomRatio },
+        })),
+        setScale: (scale, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            scale: { ...state.scale, [viewId]: scale },
+        })),
+        setIsScaledToFit: (isScaledToFit, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            isScaledToFit: { ...state.isScaledToFit, [viewId]: isScaledToFit },
+        })),
+        copyView: (fromViewId, toViewId) => set((state) => ({
+            isRenderViz: { ...state.isRenderViz, [toViewId]: state.isRenderViz[fromViewId] ?? false },
+            zoomRatio: { ...state.zoomRatio, [toViewId]: state.zoomRatio[fromViewId] ?? 100 },
+            minZoomRatio: { ...state.minZoomRatio, [toViewId]: state.minZoomRatio[fromViewId] ?? 10 },
+            scale: { ...state.scale, [toViewId]: state.scale[fromViewId] ?? 1 },
+            isScaledToFit: {
+                ...state.isScaledToFit,
+                [toViewId]: state.isScaledToFit[fromViewId] ?? false,
+            },
+        })),
+        clearView: (viewId) => set((state) => {
+            const newIsRenderViz = { ...state.isRenderViz };
+            const newZoomRatio = { ...state.zoomRatio };
+            const newMinZoomRatio = { ...state.minZoomRatio };
+            const newScale = { ...state.scale };
+            const newIsScaledToFit = { ...state.isScaledToFit };
+            delete newIsRenderViz[viewId];
+            delete newZoomRatio[viewId];
+            delete newMinZoomRatio[viewId];
+            delete newScale[viewId];
+            delete newIsScaledToFit[viewId];
+            return {
+                isRenderViz: newIsRenderViz,
+                zoomRatio: newZoomRatio,
+                minZoomRatio: newMinZoomRatio,
+                scale: newScale,
+                isScaledToFit: newIsScaledToFit,
+            };
+        }),
+        resetAll: () => set({
+            isRenderViz: { [DEFAULT_VIEW_ID]: false },
+            zoomRatio: { [DEFAULT_VIEW_ID]: 100 },
+            minZoomRatio: { [DEFAULT_VIEW_ID]: 10 },
+            scale: { [DEFAULT_VIEW_ID]: 1 },
+            isScaledToFit: { [DEFAULT_VIEW_ID]: false },
+        }),
+    };
+}));
+
+const useHeatmapAreaClickStore = create()(subscribeWithSelector((set) => ({
+    selectedArea: { [DEFAULT_VIEW_ID]: null },
+    hoveredArea: { [DEFAULT_VIEW_ID]: null },
+    areas: { [DEFAULT_VIEW_ID]: [] },
+    isEditingMode: { [DEFAULT_VIEW_ID]: false },
+    setSelectedArea: (area, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+        selectedArea: { ...state.selectedArea, [viewId]: area },
+    })),
+    setHoveredArea: (area, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+        hoveredArea: { ...state.hoveredArea, [viewId]: area },
+    })),
+    setAreas: (areas, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+        areas: { ...state.areas, [viewId]: areas },
+    })),
+    setIsEditingMode: (isEditing, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+        isEditingMode: { ...state.isEditingMode, [viewId]: isEditing },
+    })),
+    addArea: (area, viewId = DEFAULT_VIEW_ID) => set((state) => {
+        const currentAreas = state.areas[viewId] || [];
+        // Check if area already exists
+        const exists = currentAreas.some((a) => a.id === area.id);
+        if (exists)
+            return state;
+        return {
+            areas: {
+                ...state.areas,
+                [viewId]: [...currentAreas, area],
+            },
+        };
+    }),
+    removeArea: (areaId, viewId = DEFAULT_VIEW_ID) => set((state) => {
+        const currentAreas = state.areas[viewId] || [];
+        const filtered = currentAreas.filter((a) => a.id !== areaId);
+        // If removed area was selected/hovered, clear it
+        const selectedArea = state.selectedArea[viewId];
+        const hoveredArea = state.hoveredArea[viewId];
+        return {
+            areas: { ...state.areas, [viewId]: filtered },
+            selectedArea: {
+                ...state.selectedArea,
+                [viewId]: selectedArea?.id === areaId ? null : selectedArea,
+            },
+            hoveredArea: {
+                ...state.hoveredArea,
+                [viewId]: hoveredArea?.id === areaId ? null : hoveredArea,
+            },
+        };
+    }),
+    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));
+        return {
+            areas: { ...state.areas, [viewId]: updatedAreas },
+        };
+    }),
+    clearAreas: (viewId = DEFAULT_VIEW_ID) => set((state) => ({
+        areas: { ...state.areas, [viewId]: [] },
+        selectedArea: { ...state.selectedArea, [viewId]: null },
+        hoveredArea: { ...state.hoveredArea, [viewId]: null },
+    })),
+    copyView: (fromViewId, toViewId) => set((state) => ({
+        selectedArea: {
+            ...state.selectedArea,
+            [toViewId]: state.selectedArea[fromViewId] ?? null,
+        },
+        hoveredArea: {
+            ...state.hoveredArea,
+            [toViewId]: state.hoveredArea[fromViewId] ?? null,
+        },
+        areas: {
+            ...state.areas,
+            [toViewId]: state.areas[fromViewId] ?? [],
+        },
+        isEditingMode: {
+            ...state.isEditingMode,
+            [toViewId]: state.isEditingMode[fromViewId] ?? false,
+        },
+    })),
+    clearView: (viewId) => set((state) => {
+        const newSelectedArea = { ...state.selectedArea };
+        const newHoveredArea = { ...state.hoveredArea };
+        const newAreas = { ...state.areas };
+        const newIsEditingMode = { ...state.isEditingMode };
+        delete newSelectedArea[viewId];
+        delete newHoveredArea[viewId];
+        delete newAreas[viewId];
+        delete newIsEditingMode[viewId];
+        return {
+            selectedArea: newSelectedArea,
+            hoveredArea: newHoveredArea,
+            areas: newAreas,
+            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 },
+        areas: { [DEFAULT_VIEW_ID]: [] },
+        isEditingMode: { [DEFAULT_VIEW_ID]: false },
+    }),
+})));
+
 const DEFAULT_STATE = {
     hideSidebar: false,
 };
-const useHeatmapInteractionStore = create()(subscribeWithSelector((set) => {
+const useHeatmapClickStore = create()(subscribeWithSelector((set) => {
     return {
         state: { [DEFAULT_VIEW_ID]: DEFAULT_STATE },
         selectedElement: { [DEFAULT_VIEW_ID]: null },
@@ -308,67 +463,6 @@ const useHeatmapInteractionStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
-const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
-    return {
-        isRenderViz: { [DEFAULT_VIEW_ID]: false },
-        zoomRatio: { [DEFAULT_VIEW_ID]: 100 },
-        minZoomRatio: { [DEFAULT_VIEW_ID]: 10 },
-        scale: { [DEFAULT_VIEW_ID]: 1 },
-        isScaledToFit: { [DEFAULT_VIEW_ID]: false },
-        setIsRenderViz: (isRenderViz, viewId = DEFAULT_VIEW_ID) => set((state) => ({
-            isRenderViz: { ...state.isRenderViz, [viewId]: isRenderViz },
-        })),
-        setZoomRatio: (zoomRatio, viewId = DEFAULT_VIEW_ID) => set((state) => ({
-            zoomRatio: { ...state.zoomRatio, [viewId]: zoomRatio },
-        })),
-        setMinZoomRatio: (minZoomRatio, viewId = DEFAULT_VIEW_ID) => set((state) => ({
-            minZoomRatio: { ...state.minZoomRatio, [viewId]: minZoomRatio },
-        })),
-        setScale: (scale, viewId = DEFAULT_VIEW_ID) => set((state) => ({
-            scale: { ...state.scale, [viewId]: scale },
-        })),
-        setIsScaledToFit: (isScaledToFit, viewId = DEFAULT_VIEW_ID) => set((state) => ({
-            isScaledToFit: { ...state.isScaledToFit, [viewId]: isScaledToFit },
-        })),
-        copyView: (fromViewId, toViewId) => set((state) => ({
-            isRenderViz: { ...state.isRenderViz, [toViewId]: state.isRenderViz[fromViewId] ?? false },
-            zoomRatio: { ...state.zoomRatio, [toViewId]: state.zoomRatio[fromViewId] ?? 100 },
-            minZoomRatio: { ...state.minZoomRatio, [toViewId]: state.minZoomRatio[fromViewId] ?? 10 },
-            scale: { ...state.scale, [toViewId]: state.scale[fromViewId] ?? 1 },
-            isScaledToFit: {
-                ...state.isScaledToFit,
-                [toViewId]: state.isScaledToFit[fromViewId] ?? false,
-            },
-        })),
-        clearView: (viewId) => set((state) => {
-            const newIsRenderViz = { ...state.isRenderViz };
-            const newZoomRatio = { ...state.zoomRatio };
-            const newMinZoomRatio = { ...state.minZoomRatio };
-            const newScale = { ...state.scale };
-            const newIsScaledToFit = { ...state.isScaledToFit };
-            delete newIsRenderViz[viewId];
-            delete newZoomRatio[viewId];
-            delete newMinZoomRatio[viewId];
-            delete newScale[viewId];
-            delete newIsScaledToFit[viewId];
-            return {
-                isRenderViz: newIsRenderViz,
-                zoomRatio: newZoomRatio,
-                minZoomRatio: newMinZoomRatio,
-                scale: newScale,
-                isScaledToFit: newIsScaledToFit,
-            };
-        }),
-        resetAll: () => set({
-            isRenderViz: { [DEFAULT_VIEW_ID]: false },
-            zoomRatio: { [DEFAULT_VIEW_ID]: 100 },
-            minZoomRatio: { [DEFAULT_VIEW_ID]: 10 },
-            scale: { [DEFAULT_VIEW_ID]: 1 },
-            isScaledToFit: { [DEFAULT_VIEW_ID]: false },
-        }),
-    };
-}));
-
 const useHeatmapVizScrollmapStore = create()(subscribeWithSelector((set) => {
     return {
         zones: { [DEFAULT_VIEW_ID]: [] },
@@ -418,94 +512,9 @@ const useHeatmapVizScrollmapStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
-const initialState = {
-    payloads: [],
-    htmlContent: '',
-};
-const useHeatmapLiveStore = create()((set) => {
-    return {
-        ...initialState,
-        reset: () => set(initialState),
-        setPayloads: (payloads) => set({ payloads }),
-        addPayload: (payload) => set((state) => ({ payloads: [...state.payloads, payload] })),
-        setHtmlContent: (htmlContent) => set({ htmlContent }),
-    };
-});
-
-const useHeatmapSingleStore = create()(subscribeWithSelector((set) => {
-    return {
-        vizRef: { [DEFAULT_VIEW_ID]: null },
-        iframeHeight: { [DEFAULT_VIEW_ID]: 0 },
-        wrapperHeight: { [DEFAULT_VIEW_ID]: 0 },
-        wrapperWidth: { [DEFAULT_VIEW_ID]: 0 },
-        setVizRef: (vizRef, viewId = DEFAULT_VIEW_ID) => set((state) => ({
-            vizRef: { ...state.vizRef, [viewId]: vizRef },
-        })),
-        setIframeHeight: (iframeHeight, viewId = DEFAULT_VIEW_ID) => {
-            set((state) => ({
-                iframeHeight: { ...state.iframeHeight, [viewId]: iframeHeight },
-            }));
-        },
-        setWrapperHeight: (wrapperHeight, viewId = DEFAULT_VIEW_ID) => {
-            set((state) => ({
-                wrapperHeight: { ...state.wrapperHeight, [viewId]: wrapperHeight },
-            }));
-        },
-        setWrapperWidth: (wrapperWidth, viewId = DEFAULT_VIEW_ID) => {
-            set((state) => ({
-                wrapperWidth: { ...state.wrapperWidth, [viewId]: wrapperWidth },
-            }));
-        },
-        copyView: (fromViewId, toViewId) => set((state) => ({
-            // Don't copy vizRef - each view needs its own visualizer instance
-            iframeHeight: { ...state.iframeHeight, [toViewId]: state.iframeHeight[fromViewId] ?? 0 },
-            wrapperHeight: {
-                ...state.wrapperHeight,
-                [toViewId]: state.wrapperHeight[fromViewId] ?? 0,
-            },
-        })),
-        clearView: (viewId) => set((state) => {
-            const newVizRef = { ...state.vizRef };
-            const newIframeHeight = { ...state.iframeHeight };
-            const newWrapperHeight = { ...state.wrapperHeight };
-            const newWrapperWidth = { ...state.wrapperWidth };
-            delete newVizRef[viewId];
-            delete newIframeHeight[viewId];
-            delete newWrapperHeight[viewId];
-            delete newWrapperWidth[viewId];
-            return {
-                vizRef: newVizRef,
-                iframeHeight: newIframeHeight,
-                wrapperHeight: newWrapperHeight,
-                wrapperWidth: newWrapperWidth,
-            };
-        }),
-        resetAll: () => set({
-            vizRef: { [DEFAULT_VIEW_ID]: null },
-            iframeHeight: { [DEFAULT_VIEW_ID]: 0 },
-            wrapperHeight: { [DEFAULT_VIEW_ID]: 0 },
-            wrapperWidth: { [DEFAULT_VIEW_ID]: 0 },
-        }),
-    };
-}));
-
-const createDefaultView = (id, label, options) => ({
+const createDefaultView = (id, label) => ({
     id,
     label,
-    heatmapType: options?.heatmapType ?? IHeatmapType.Scroll,
-    clickType: options?.clickType ?? IClickType.Total,
-    scrollType: options?.scrollType ?? IScrollType.Depth,
-    data: options?.data,
-    clickmap: undefined,
-    scrollmap: undefined,
-    dataInfo: undefined,
-    vizRef: null,
-    iframeHeight: 0,
-    zoomRatio: 100,
-    scale: 1,
-    isScaledToFit: false,
-    isRendering: true,
-    isRenderViz: false,
 });
 const useHeatmapCompareStore = create()((set, get) => {
     return {
@@ -520,9 +529,9 @@ const useHeatmapCompareStore = create()((set, get) => {
         viewIdCounter: 0,
         addView: (options) => {
             const state = get();
-            const viewId = `view-${state.viewIdCounter}`;
+            const viewId = getCompareViewId(state.viewIdCounter);
             const label = options?.label ?? `Version ${state.viewOrder.length + 1}`;
-            const newView = createDefaultView(viewId, label, options);
+            const newView = createDefaultView(viewId, label);
             const newViews = new Map(state.views);
             newViews.set(viewId, newView);
             set({
@@ -536,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) => {
@@ -549,16 +562,6 @@ const useHeatmapCompareStore = create()((set, get) => {
             const newViews = new Map(state.views);
             newViews.set(viewId, { ...view, ...updates });
             set({ views: newViews });
-            // Handle syncing
-            const { syncSettings } = state;
-            if (syncSettings.zoomRatio && 'zoomRatio' in updates && updates.zoomRatio !== undefined) {
-                get().syncProperty('zoomRatio', updates.zoomRatio);
-            }
-            if (syncSettings.heatmapType &&
-                'heatmapType' in updates &&
-                updates.heatmapType !== undefined) {
-                get().syncProperty('heatmapType', updates.heatmapType);
-            }
         },
         getView: (viewId) => {
             return get().views.get(viewId);
@@ -573,9 +576,9 @@ const useHeatmapCompareStore = create()((set, get) => {
             const viewIds = [];
             const newViews = new Map();
             for (let i = 0; i < count; i++) {
-                const viewId = `view-${i}`;
+                const viewId = getCompareViewId(i);
                 const label = options?.label ?? String.fromCharCode(65 + i); // A, B, C, D
-                newViews.set(viewId, createDefaultView(viewId, `Version ${label}`, options));
+                newViews.set(viewId, createDefaultView(viewId, `Version ${label}`));
                 viewIds.push(viewId);
             }
             const layoutMap = {
@@ -617,54 +620,192 @@ const useHeatmapCompareStore = create()((set, get) => {
     };
 });
 
-const useRegisterConfig = () => {
-    const mode = useHeatmapConfigStore((state) => state.mode);
-    const width = useHeatmapConfigStore((state) => state.width);
-    const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
-    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
-    useEffect(() => {
-        setIsRendering(true);
-        setTimeout(() => {
-            setIsRendering(false);
-        }, 1000);
-    }, [mode, width, sidebarWidth, heatmapType]);
+const initialState = {
+    payloads: [],
+    htmlContent: '',
 };
+const useHeatmapLiveStore = create()((set) => {
+    return {
+        ...initialState,
+        reset: () => set(initialState),
+        setPayloads: (payloads) => set({ payloads }),
+        addPayload: (payload) => set((state) => ({ payloads: [...state.payloads, payload] })),
+        setHtmlContent: (htmlContent) => set({ htmlContent }),
+    };
+});
 
-const useRegisterControl = (control) => {
-    const registerControl = useHeatmapControlStore((state) => state.registerControl);
-    registerControl('Sidebar', control.Sidebar);
-    registerControl('SidebarActivator', control.SidebarActivator);
-    registerControl('TopBar', control.TopBar);
-    registerControl('Toolbar', control.Toolbar);
-    registerControl('MetricBar', control.MetricBar);
-    registerControl('VizLoading', control.VizLoading);
-    registerControl('ElementCallout', control.ElementCallout);
-};
+const useHeatmapSingleStore = create()(subscribeWithSelector((set) => {
+    return {
+        vizRef: { [DEFAULT_VIEW_ID]: null },
+        iframeHeight: { [DEFAULT_VIEW_ID]: 0 },
+        wrapperHeight: { [DEFAULT_VIEW_ID]: 0 },
+        wrapperWidth: { [DEFAULT_VIEW_ID]: 0 },
+        setVizRef: (vizRef, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            vizRef: { ...state.vizRef, [viewId]: vizRef },
+        })),
+        setIframeHeight: (iframeHeight, viewId = DEFAULT_VIEW_ID) => {
+            set((state) => ({
+                iframeHeight: { ...state.iframeHeight, [viewId]: iframeHeight },
+            }));
+        },
+        setWrapperHeight: (wrapperHeight, viewId = DEFAULT_VIEW_ID) => {
+            set((state) => ({
+                wrapperHeight: { ...state.wrapperHeight, [viewId]: wrapperHeight },
+            }));
+        },
+        setWrapperWidth: (wrapperWidth, viewId = DEFAULT_VIEW_ID) => {
+            set((state) => ({
+                wrapperWidth: { ...state.wrapperWidth, [viewId]: wrapperWidth },
+            }));
+        },
+        copyView: (fromViewId, toViewId) => set((state) => ({
+            // Don't copy vizRef - each view needs its own visualizer instance
+            iframeHeight: { ...state.iframeHeight, [toViewId]: state.iframeHeight[fromViewId] ?? 0 },
+            wrapperHeight: {
+                ...state.wrapperHeight,
+                [toViewId]: state.wrapperHeight[fromViewId] ?? 0,
+            },
+        })),
+        clearView: (viewId) => set((state) => {
+            const newVizRef = { ...state.vizRef };
+            const newIframeHeight = { ...state.iframeHeight };
+            const newWrapperHeight = { ...state.wrapperHeight };
+            const newWrapperWidth = { ...state.wrapperWidth };
+            delete newVizRef[viewId];
+            delete newIframeHeight[viewId];
+            delete newWrapperHeight[viewId];
+            delete newWrapperWidth[viewId];
+            return {
+                vizRef: newVizRef,
+                iframeHeight: newIframeHeight,
+                wrapperHeight: newWrapperHeight,
+                wrapperWidth: newWrapperWidth,
+            };
+        }),
+        resetAll: () => set({
+            vizRef: { [DEFAULT_VIEW_ID]: null },
+            iframeHeight: { [DEFAULT_VIEW_ID]: 0 },
+            wrapperHeight: { [DEFAULT_VIEW_ID]: 0 },
+            wrapperWidth: { [DEFAULT_VIEW_ID]: 0 },
+        }),
+    };
+}));
+
+const useRegisterConfig = () => {
+    const mode = useHeatmapConfigStore((state) => state.mode);
+    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, clickMode]); // eslint-disable-line react-hooks/exhaustive-deps
+};
+
+const useRegisterControl = (control) => {
+    const registerControl = useHeatmapControlStore((state) => state.registerControl);
+    registerControl('Sidebar', control.Sidebar);
+    registerControl('SidebarActivator', control.SidebarActivator);
+    registerControl('TopBar', control.TopBar);
+    registerControl('Toolbar', control.Toolbar);
+    registerControl('MetricBar', control.MetricBar);
+    registerControl('VizLoading', control.VizLoading);
+    registerControl('ElementCallout', control.ElementCallout);
+};
 
-/**
- * Context to provide viewId to components
- * Used in compare mode to isolate data between views
- */
 const ViewIdContext = createContext(undefined);
-/**
- * Hook to get current viewId
- * Returns DEFAULT_VIEW_ID if not in a ViewIdContext (single mode)
- */
-const useViewId = () => {
+const useViewIdContext = () => {
     const viewId = useContext(ViewIdContext);
     return viewId || DEFAULT_VIEW_ID;
 };
-/**
- * Hook to check if currently in compare mode
- */
-const useIsCompareMode = () => {
-    const viewId = useContext(ViewIdContext);
-    return viewId !== undefined && viewId !== DEFAULT_VIEW_ID;
+
+const useHeatmapAreaClick = (props) => {
+    const viewId = props?.viewId || useViewIdContext();
+    // Optimized: Only subscribe to specific viewId slice
+    const selectedArea = useHeatmapAreaClickStore((state) => state.selectedArea[viewId] ?? null);
+    const hoveredArea = useHeatmapAreaClickStore((state) => state.hoveredArea[viewId] ?? null);
+    const areas = useHeatmapAreaClickStore((state) => state.areas[viewId] ?? []);
+    const isEditingMode = useHeatmapAreaClickStore((state) => state.isEditingMode[viewId] ?? false);
+    // Get setters from store
+    const setSelectedAreaStore = useHeatmapAreaClickStore((state) => state.setSelectedArea);
+    const setHoveredAreaStore = useHeatmapAreaClickStore((state) => state.setHoveredArea);
+    const setAreasStore = useHeatmapAreaClickStore((state) => state.setAreas);
+    const setIsEditingModeStore = useHeatmapAreaClickStore((state) => state.setIsEditingMode);
+    const addAreaStore = useHeatmapAreaClickStore((state) => state.addArea);
+    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),
+        setHoveredArea: (area) => setHoveredAreaStore(area, viewId),
+        setAreas: (areas) => setAreasStore(areas, viewId),
+        setIsEditingMode: (isEditing) => setIsEditingModeStore(isEditing, viewId),
+        addArea: (area) => addAreaStore(area, viewId),
+        removeArea: (areaId) => removeAreaStore(areaId, viewId),
+        updateArea: (areaId, updates) => updateAreaStore(areaId, updates, viewId),
+        clearAreas: () => clearAreasStore(viewId),
+        resetView: () => resetViewStore(viewId),
+    }), [
+        setSelectedAreaStore,
+        setHoveredAreaStore,
+        setAreasStore,
+        setIsEditingModeStore,
+        addAreaStore,
+        removeAreaStore,
+        updateAreaStore,
+        clearAreasStore,
+        resetViewStore,
+        viewId,
+    ]);
+    return {
+        selectedArea,
+        hoveredArea,
+        areas,
+        isEditingMode,
+        ...memoizedOperations,
+    };
+};
+
+const useHeatmapClick = (props) => {
+    const viewId = props?.viewId || useViewIdContext();
+    const state = useHeatmapClickStore((store) => store.state[viewId] ?? { hideSidebar: false });
+    const selectedElement = useHeatmapClickStore((store) => store.selectedElement[viewId] ?? null);
+    const hoveredElement = useHeatmapClickStore((store) => store.hoveredElement[viewId] ?? null);
+    const shouldShowCallout = useHeatmapClickStore((store) => store.shouldShowCallout[viewId] ?? false);
+    const setStateStore = useHeatmapClickStore((store) => store.setState);
+    const setSelectedElementStore = useHeatmapClickStore((store) => store.setSelectedElement);
+    const setHoveredElementStore = useHeatmapClickStore((store) => store.setHoveredElement);
+    const setShouldShowCalloutStore = useHeatmapClickStore((store) => store.setShouldShowCallout);
+    const memoizedSetters = useMemo(() => ({
+        setState: (newState) => setStateStore(newState, viewId),
+        setSelectedElement: (element) => setSelectedElementStore(element, viewId),
+        setHoveredElement: (element) => setHoveredElementStore(element, viewId),
+        setShouldShowCallout: (value) => setShouldShowCalloutStore(value, viewId),
+    }), [
+        setStateStore,
+        setSelectedElementStore,
+        setHoveredElementStore,
+        setShouldShowCalloutStore,
+        viewId,
+    ]);
+    return {
+        state,
+        selectedElement,
+        hoveredElement,
+        shouldShowCallout,
+        // Setters (auto-inject viewId)
+        ...memoizedSetters,
+    };
 };
 
 const useHeatmapData = (props) => {
-    const viewId = props?.viewId || useViewId();
+    const viewId = props?.viewId || useViewIdContext();
     const data = useHeatmapDataStore((state) => state.data[viewId]);
     const clickmap = useHeatmapDataStore((state) => state.clickmap[viewId]);
     const scrollmap = useHeatmapDataStore((state) => state.scrollmap[viewId]);
@@ -689,40 +830,30 @@ const useHeatmapData = (props) => {
     };
 };
 
-const useHeatmapInteraction = (props) => {
-    const viewId = props?.viewId || useViewId();
-    const state = useHeatmapInteractionStore((store) => store.state[viewId] ?? { hideSidebar: false });
-    const selectedElement = useHeatmapInteractionStore((store) => store.selectedElement[viewId] ?? null);
-    const hoveredElement = useHeatmapInteractionStore((store) => store.hoveredElement[viewId] ?? null);
-    const shouldShowCallout = useHeatmapInteractionStore((store) => store.shouldShowCallout[viewId] ?? false);
-    const setStateStore = useHeatmapInteractionStore((store) => store.setState);
-    const setSelectedElementStore = useHeatmapInteractionStore((store) => store.setSelectedElement);
-    const setHoveredElementStore = useHeatmapInteractionStore((store) => store.setHoveredElement);
-    const setShouldShowCalloutStore = useHeatmapInteractionStore((store) => store.setShouldShowCallout);
+const useHeatmapScroll = (props) => {
+    const viewId = props?.viewId || useViewIdContext();
+    const zones = useHeatmapVizScrollmapStore((store) => store.zones[viewId] ?? []);
+    const hoveredZone = useHeatmapVizScrollmapStore((store) => store.hoveredZone[viewId] ?? null);
+    const showMinimap = useHeatmapVizScrollmapStore((store) => store.showMinimap[viewId] ?? true);
+    const setZonesStore = useHeatmapVizScrollmapStore((store) => store.setZones);
+    const setHoveredZoneStore = useHeatmapVizScrollmapStore((store) => store.setHoveredZone);
+    const setShowMinimapStore = useHeatmapVizScrollmapStore((store) => store.setShowMinimap);
     const memoizedSetters = useMemo(() => ({
-        setState: (newState) => setStateStore(newState, viewId),
-        setSelectedElement: (element) => setSelectedElementStore(element, viewId),
-        setHoveredElement: (element) => setHoveredElementStore(element, viewId),
-        setShouldShowCallout: (value) => setShouldShowCalloutStore(value, viewId),
-    }), [
-        setStateStore,
-        setSelectedElementStore,
-        setHoveredElementStore,
-        setShouldShowCalloutStore,
-        viewId,
-    ]);
+        setZones: (newZones) => setZonesStore(newZones, viewId),
+        setHoveredZone: (zone) => setHoveredZoneStore(zone, viewId),
+        setShowMinimap: (value) => setShowMinimapStore(value, viewId),
+    }), [setZonesStore, setHoveredZoneStore, setShowMinimapStore, viewId]);
     return {
-        state,
-        selectedElement,
-        hoveredElement,
-        shouldShowCallout,
+        zones,
+        hoveredZone,
+        showMinimap,
         // Setters (auto-inject viewId)
         ...memoizedSetters,
     };
 };
 
 const useHeatmapViz = (props) => {
-    const viewId = props?.viewId || useViewId();
+    const viewId = props?.viewId || useViewIdContext();
     // Viz store
     const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz[viewId] ?? false);
     const zoomRatio = useHeatmapVizStore((state) => state.zoomRatio[viewId] ?? 100);
@@ -780,28 +911,6 @@ const useHeatmapViz = (props) => {
     };
 };
 
-const useHeatmapVizScrollmap = (props) => {
-    const viewId = props?.viewId || useViewId();
-    const zones = useHeatmapVizScrollmapStore((store) => store.zones[viewId] ?? []);
-    const hoveredZone = useHeatmapVizScrollmapStore((store) => store.hoveredZone[viewId] ?? null);
-    const showMinimap = useHeatmapVizScrollmapStore((store) => store.showMinimap[viewId] ?? true);
-    const setZonesStore = useHeatmapVizScrollmapStore((store) => store.setZones);
-    const setHoveredZoneStore = useHeatmapVizScrollmapStore((store) => store.setHoveredZone);
-    const setShowMinimapStore = useHeatmapVizScrollmapStore((store) => store.setShowMinimap);
-    const memoizedSetters = useMemo(() => ({
-        setZones: (newZones) => setZonesStore(newZones, viewId),
-        setHoveredZone: (zone) => setHoveredZoneStore(zone, viewId),
-        setShowMinimap: (value) => setShowMinimapStore(value, viewId),
-    }), [setZonesStore, setHoveredZoneStore, setShowMinimapStore, viewId]);
-    return {
-        zones,
-        hoveredZone,
-        showMinimap,
-        // Setters (auto-inject viewId)
-        ...memoizedSetters,
-    };
-};
-
 /**
  * Hook to handle copying and clearing view data across all stores
  */
@@ -809,24 +918,28 @@ const useHeatmapCopyView = () => {
     const copyDataView = useHeatmapDataStore((state) => state.copyView);
     const copyVizView = useHeatmapVizStore((state) => state.copyView);
     const copySingleView = useHeatmapSingleStore((state) => state.copyView);
-    const copyInteractionView = useHeatmapInteractionStore((state) => state.copyView);
+    const copyInteractionView = useHeatmapClickStore((state) => state.copyView);
     const copyVizScrollmapView = useHeatmapVizScrollmapStore((state) => state.copyView);
+    const copyAreaClickView = useHeatmapAreaClickStore((state) => state.copyView);
     const clearDataView = useHeatmapDataStore((state) => state.clearView);
     const clearVizView = useHeatmapVizStore((state) => state.clearView);
     const clearSingleView = useHeatmapSingleStore((state) => state.clearView);
-    const clearInteractionView = useHeatmapInteractionStore((state) => state.clearView);
+    const clearInteractionView = useHeatmapClickStore((state) => state.clearView);
     const clearVizScrollmapView = useHeatmapVizScrollmapStore((state) => state.clearView);
+    const clearAreaClickView = useHeatmapAreaClickStore((state) => state.clearView);
     const resetDataAll = useHeatmapDataStore((state) => state.resetAll);
     const resetVizAll = useHeatmapVizStore((state) => state.resetAll);
     const resetSingleAll = useHeatmapSingleStore((state) => state.resetAll);
-    const resetInteractionAll = useHeatmapInteractionStore((state) => state.resetAll);
+    const resetInteractionAll = useHeatmapClickStore((state) => state.resetAll);
     const resetVizScrollmapAll = useHeatmapVizScrollmapStore((state) => state.resetAll);
+    const resetAreaClickAll = useHeatmapAreaClickStore((state) => state.resetAll);
     const copyView = (fromViewId, toViewId) => {
         copyDataView(fromViewId, toViewId);
         copyVizView(fromViewId, toViewId);
         copySingleView(fromViewId, toViewId);
         copyInteractionView(fromViewId, toViewId);
         copyVizScrollmapView(fromViewId, toViewId);
+        copyAreaClickView(fromViewId, toViewId);
     };
     const copyViewToMultiple = (fromViewId, toViewIds) => {
         toViewIds.forEach((toViewId) => {
@@ -839,6 +952,7 @@ const useHeatmapCopyView = () => {
         clearSingleView(viewId);
         clearInteractionView(viewId);
         clearVizScrollmapView(viewId);
+        clearAreaClickView(viewId);
     };
     const clearMultipleViews = (viewIds) => {
         viewIds.forEach((viewId) => {
@@ -851,6 +965,7 @@ const useHeatmapCopyView = () => {
         resetSingleAll();
         resetInteractionAll();
         resetVizScrollmapAll();
+        resetAreaClickAll();
     };
     return {
         copyView,
@@ -903,6 +1018,497 @@ const useRegisterHeatmap = ({ clickmap, scrollmap }) => {
     }, [scrollmap]);
 };
 
+/**
+ * Create an observable value with subscribe/unsubscribe pattern
+ */
+function createObservable(initialValue) {
+    const subscribers = new Set();
+    const observable = {
+        value: initialValue,
+        observe: (callback) => {
+            subscribers.add(callback);
+            // Immediately call with current value
+            if (observable.value !== undefined) {
+                callback(observable.value);
+            }
+        },
+        unobserve: (callback) => {
+            subscribers.delete(callback);
+        },
+        update: (newValue) => {
+            observable.value = newValue;
+            // Notify all subscribers
+            subscribers.forEach((callback) => {
+                callback(newValue);
+            });
+        },
+    };
+    return observable;
+}
+
+function isElementInViewport(elementRect, visualRef, scale) {
+    if (!elementRect)
+        return false;
+    const visualRect = visualRef.current?.getBoundingClientRect();
+    if (!visualRect)
+        return false;
+    // Element position relative to the document (or container's content)
+    const elementTop = elementRect.top * scale;
+    const elementBottom = (elementRect.top + elementRect.height) * scale;
+    // Current scroll position
+    const scrollTop = visualRef.current?.scrollTop || 0;
+    const viewportHeight = visualRect.height;
+    // Visible viewport range in the scrollable content
+    const viewportTop = scrollTop;
+    const viewportBottom = scrollTop + viewportHeight;
+    // Check if element is within the visible viewport
+    // Element is visible if it overlaps with the viewport
+    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
+    [0, 255, 0], // Green
+    [255, 255, 0], // Yellow
+    [255, 0, 0], // Red
+];
+const AREA_RENDERER_SELECTORS = {
+    containerAttribute: AREA_MAP_DIV_ATTRIBUTE,
+    containerSelector: `[${AREA_MAP_DIV_ATTRIBUTE}]`,
+    innerContainerClass: HEATMAP_AREA_CONTAINER_CLASS,
+    innerContainerSelector: HEATMAP_AREA_CONTAINER_SELECTOR,
+};
+
+const CALLOUT_PADDING = 0;
+const CALLOUT_ARROW_SIZE = 8;
+const CALLOUT_HORIZONTAL_OFFSET = 0;
+const CLICKED_ELEMENT_ID_BASE = 'gx-hm-clicked-element';
+const SECONDARY_CLICKED_ELEMENT_ID_BASE = 'gx-hm-secondary-clicked-element';
+const HOVERED_ELEMENT_ID_BASE = 'gx-hm-hovered-element';
+const SECONDARY_HOVERED_ELEMENT_ID_BASE = 'gx-hm-secondary-hovered-element';
+
+/**
+ * Get color from click distribution percentage (0-100)
+ */
+function getColorFromClickDist(clickDist) {
+    // Ensure clickDist is in range [0, 100]
+    const normalizedDist = Math.max(0, Math.min(100, clickDist));
+    console.log(`🚀 🐥 ~ getColorFromClickDist ~ normalizedDist:`, normalizedDist);
+    // Calculate gradient index
+    const maxIndex = AREA_COLOR_GRADIENT.length - 1;
+    const index = Math.floor((normalizedDist / 100) * maxIndex);
+    const clampedIndex = Math.min(index, maxIndex);
+    const [r, g, b] = AREA_COLOR_GRADIENT[clampedIndex];
+    // Return rgba with 60% opacity
+    return `rgba(${r}, ${g}, ${b}, 0.6)`;
+}
+/**
+ * Get hover color (slightly lighter) from click distribution
+ */
+function getHoverColorFromClickDist(clickDist) {
+    const normalizedDist = Math.max(0, Math.min(100, clickDist));
+    const maxIndex = AREA_COLOR_GRADIENT.length - 1;
+    const index = Math.floor((normalizedDist / 100) * maxIndex);
+    const clampedIndex = Math.min(index, maxIndex);
+    const [r, g, b] = AREA_COLOR_GRADIENT[clampedIndex];
+    // Return rgba with 80% opacity for hover
+    return `rgba(${r}, ${g}, ${b}, 0.8)`;
+}
+/**
+ * Calculate click distribution percentage from total clicks
+ */
+function calculateClickDistribution(elementClicks, totalClicks) {
+    if (totalClicks === 0)
+        return 0;
+    return (elementClicks / totalClicks) * 100;
+}
+
+function getElementRect(element, _shadowRoot) {
+    const rect = element.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    const doc = element.ownerDocument || document;
+    const scrollTop = doc.documentElement?.scrollTop || doc.body?.scrollTop || 0;
+    const scrollLeft = doc.documentElement?.scrollLeft || doc.body?.scrollLeft || 0;
+    const top = rect.top + scrollTop;
+    const left = rect.left + scrollLeft;
+    const absoluteLeft = left;
+    const absoluteTop = top;
+    const absoluteRight = absoluteLeft + width;
+    const absoluteBottom = absoluteTop + height;
+    return {
+        width,
+        height,
+        top,
+        left,
+        absoluteLeft,
+        absoluteTop,
+        absoluteRight,
+        absoluteBottom,
+        outOfBounds: false,
+    };
+}
+function isElementFixed(element) {
+    if (getComputedStyle(element).position === 'fixed') {
+        return true;
+    }
+    if (element.nodeName === 'HTML') {
+        return false;
+    }
+    const parent = element.parentElement;
+    return parent ? isElementFixed(parent) : false;
+}
+function doAreasOverlap(area1, area2) {
+    const r1 = area1.rect.value;
+    const r2 = area2.rect.value;
+    if (!r1 || !r2)
+        return false;
+    return ((r1.absoluteBottom > r2.absoluteTop &&
+        r1.absoluteTop < r2.absoluteBottom &&
+        r1.absoluteRight > r2.absoluteLeft &&
+        r1.absoluteLeft < r2.absoluteRight) ||
+        (r2.absoluteBottom > r1.absoluteTop &&
+            r2.absoluteTop < r1.absoluteBottom &&
+            r2.absoluteRight > r1.absoluteLeft &&
+            r2.absoluteLeft < r1.absoluteRight));
+}
+function isAreaContainedIn(area1, area2) {
+    const r1 = area1.rect.value;
+    const r2 = area2.rect.value;
+    if (!r1 || !r2)
+        return false;
+    return (r1.absoluteTop >= r2.absoluteTop &&
+        r1.absoluteBottom <= r2.absoluteBottom &&
+        r1.absoluteLeft >= r2.absoluteLeft &&
+        r1.absoluteRight <= r2.absoluteRight);
+}
+function isElementAncestorOf(ancestor, descendant, doc) {
+    return ancestor.contains(descendant);
+}
+function isElementSelectable(element, index, elements) {
+    if (isIgnoredCanvas(element)) {
+        return false;
+    }
+    if (element.hasAttribute(AREA_MAP_DIV_ATTRIBUTE)) {
+        return false;
+    }
+    if (index === 0 && elements.length > 1 && element.nodeName === 'BODY') {
+        return false;
+    }
+    return true;
+}
+function sortAreasByClickDist(areas) {
+    return [...areas].sort((a, b) => {
+        if (a.clickDist !== b.clickDist) {
+            return b.clickDist - a.clickDist;
+        }
+        return b.totalclicks - a.totalclicks;
+    });
+}
+function isRectTooSmallForLabel(rect) {
+    return rect.width < 67 || rect.height < 30;
+}
+
+function getElementSelector(element) {
+    if (element.id) {
+        return `#${element.id}`;
+    }
+    if (element.className) {
+        const classes = Array.from(element.classList).join('.');
+        if (classes) {
+            return `${element.tagName.toLowerCase()}.${classes}`;
+        }
+    }
+    return element.tagName.toLowerCase();
+}
+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);
+    const color = getColorFromClickDist(clickDist);
+    const hoverColor = getHoverColorFromClickDist(clickDist);
+    const areaNode = {
+        kind: 'area',
+        id: `${hash}_${Date.now()}`,
+        hash,
+        selector: elementInfo?.selector || getElementSelector(element),
+        // DOM references
+        element,
+        areaElement: null,
+        shadowElement: null,
+        shadowStyleElement: null,
+        // Graph structure
+        parentNode: null,
+        childNodes: new Set(),
+        // Position
+        rect: createObservable(rect),
+        isFixed: isElementFixed(element),
+        priority: false,
+        // Click tracking
+        totalclicks: elementClicks,
+        cumulativeClicks: elementClicks,
+        cumulativeMaxClicks: totalClicks,
+        clickDist,
+        hasClickInfo: true,
+        // Visual
+        color,
+        hoverColor,
+        // Lifecycle
+        changeObserver: null,
+    };
+    return areaNode;
+}
+function getTopElementsByClicks(elementMapInfo, topN = 10) {
+    const elements = Object.entries(elementMapInfo)
+        .map(([hash, info]) => ({
+        hash,
+        totalclicks: info.totalclicks,
+        selector: info.selector || '',
+    }))
+        .sort((a, b) => b.totalclicks - a.totalclicks)
+        .slice(0, topN);
+    return elements;
+}
+
+/**
+ * Resolve overlapping areas by priority rules
+ *
+ * Priority Rules (in order):
+ * 1. Priority flag (manually set areas win)
+ * 2. Click distribution (higher % wins)
+ * 3. Total clicks (more clicks wins)
+ * 4. DOM containment (parent contains child, parent wins)
+ * 5. Size (smaller areas win - more specific)
+ */
+function resolveOverlaps(areas, iframeDocument) {
+    if (areas.length === 0)
+        return [];
+    // Group overlapping areas
+    const overlapGroups = findOverlapGroups(areas);
+    // Resolve each group
+    const visibleAreas = new Set();
+    overlapGroups.forEach((group) => {
+        const winner = resolveOverlapGroup(group, iframeDocument);
+        visibleAreas.add(winner);
+    });
+    // Add non-overlapping areas
+    areas.forEach((area) => {
+        const hasOverlap = overlapGroups.some((group) => group.areas.includes(area));
+        if (!hasOverlap) {
+            visibleAreas.add(area);
+        }
+    });
+    return Array.from(visibleAreas);
+}
+/**
+ * Find groups of overlapping areas
+ */
+function findOverlapGroups(areas) {
+    const groups = [];
+    const processed = new Set();
+    areas.forEach((area) => {
+        if (processed.has(area.id))
+            return;
+        // Find all areas that overlap with this one
+        const overlapping = areas.filter((other) => other.id !== area.id && doAreasOverlap(area, other));
+        if (overlapping.length === 0) {
+            // No overlap, skip grouping
+            return;
+        }
+        // Create group with this area and all overlapping
+        const groupAreas = [area, ...overlapping];
+        groupAreas.forEach((a) => processed.add(a.id));
+        // Placeholder - will be resolved later
+        groups.push({
+            areas: groupAreas,
+            winner: area,
+            hidden: [],
+        });
+    });
+    return groups;
+}
+/**
+ * Resolve a single overlap group to find the winner
+ */
+function resolveOverlapGroup(group, iframeDocument) {
+    const { areas } = group;
+    if (areas.length === 1)
+        return areas[0];
+    // Sort by priority rules
+    const sorted = [...areas].sort((a, b) => {
+        // Rule 1: Priority flag
+        if (a.priority !== b.priority) {
+            return a.priority ? -1 : 1;
+        }
+        // Rule 2: Click distribution
+        if (a.clickDist !== b.clickDist) {
+            return b.clickDist - a.clickDist;
+        }
+        // Rule 3: Total clicks
+        if (a.totalclicks !== b.totalclicks) {
+            return b.totalclicks - a.totalclicks;
+        }
+        // Rule 4: DOM containment - parent beats child
+        if (iframeDocument) {
+            const aContainsB = isElementAncestorOf(a.element, b.element);
+            const bContainsA = isElementAncestorOf(b.element, a.element);
+            if (aContainsB)
+                return -1; // a is parent, a wins
+            if (bContainsA)
+                return 1; // b is parent, b wins
+        }
+        // Rule 5: Size - smaller (more specific) wins
+        const aSize = (a.rect.value?.width || 0) * (a.rect.value?.height || 0);
+        const bSize = (b.rect.value?.width || 0) * (b.rect.value?.height || 0);
+        return aSize - bSize;
+    });
+    const winner = sorted[0];
+    group.winner = winner;
+    group.hidden = sorted.slice(1);
+    return winner;
+}
+/**
+ * Filter out areas that are completely contained within others
+ * and have lower priority
+ */
+function filterContainedAreas(areas) {
+    const visible = [];
+    areas.forEach((area) => {
+        // Check if this area is contained by a higher priority area
+        const isContained = areas.some((other) => {
+            if (other.id === area.id)
+                return false;
+            // Check containment
+            if (!isAreaContainedIn(area, other))
+                return false;
+            // Check priority
+            if (other.priority && !area.priority)
+                return true;
+            if (!other.priority && area.priority)
+                return false;
+            // Compare by click dist
+            if (other.clickDist > area.clickDist)
+                return true;
+            if (other.clickDist < area.clickDist)
+                return false;
+            // Compare by total clicks
+            return other.totalclicks > area.totalclicks;
+        });
+        if (!isContained) {
+            visible.push(area);
+        }
+    });
+    return visible;
+}
+/**
+ * Get visible areas after resolving overlaps
+ */
+function getVisibleAreas(areas, iframeDocument) {
+    // First pass: filter contained areas
+    let visible = filterContainedAreas(areas);
+    // Second pass: resolve overlaps
+    visible = resolveOverlaps(visible, iframeDocument);
+    // Sort by click dist for rendering order
+    return sortAreasByClickDist(visible);
+}
+
+/**
+ * Helper functions for setting up area renderer
+ */
+/**
+ * Create the outer container for area rendering
+ */
+function createAreaContainer(iframeDocument) {
+    const container = iframeDocument.createElement('div');
+    container.setAttribute(AREA_MAP_DIV_ATTRIBUTE, 'true');
+    container.style.cssText = AREA_CONTAINER_STYLES;
+    return container;
+}
+/**
+ * Create the inner container for React portal
+ */
+function createInnerContainer(iframeDocument) {
+    const innerContainer = iframeDocument.createElement('div');
+    innerContainer.className = AREA_RENDERER_SELECTORS.innerContainerClass;
+    innerContainer.style.cssText = AREA_INNER_CONTAINER_STYLES;
+    return innerContainer;
+}
+/**
+ * Get or create the outer container element
+ */
+function getOrCreateAreaContainer(iframeDocument, customShadowRoot) {
+    let container = iframeDocument.querySelector(AREA_RENDERER_SELECTORS.containerSelector);
+    if (!container) {
+        container = createAreaContainer(iframeDocument);
+        const targetRoot = customShadowRoot || iframeDocument.body;
+        if (targetRoot) {
+            targetRoot.appendChild(container);
+        }
+    }
+    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))
@@ -927,44 +1533,33 @@ function findLastSizeOfDom(data) {
         },
     };
 }
-function decodePayloads(payload) {
-    try {
-        return decode(payload);
-    }
-    catch (error) {
-        return null;
-    }
-}
-
-function calculateRankPosition(rect, widthScale) {
-    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
-    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
-    return {
-        transform: `scale(${1.2 * widthScale})`,
-        top: Number.isNaN(top) ? undefined : top,
-        left: Number.isNaN(left) ? undefined : left,
-    };
-}
-function isElementInViewport(elementRect, visualRef, scale) {
-    if (!elementRect)
-        return false;
-    const visualRect = visualRef.current?.getBoundingClientRect();
-    if (!visualRect)
-        return false;
-    // Element position relative to the document (or container's content)
-    const elementTop = elementRect.top * scale;
-    const elementBottom = (elementRect.top + elementRect.height) * scale;
-    // Current scroll position
-    const scrollTop = visualRef.current?.scrollTop || 0;
-    const viewportHeight = visualRect.height;
-    // Visible viewport range in the scrollable content
-    const viewportTop = scrollTop;
-    const viewportBottom = scrollTop + viewportHeight;
-    // Check if element is within the visible viewport
-    // Element is visible if it overlaps with the viewport
-    return elementBottom > viewportTop && elementTop < viewportBottom;
+function decodePayloads(payload) {
+    try {
+        return decode(payload);
+    }
+    catch (_error) {
+        return null;
+    }
 }
 
+/**
+ * Generate unique element ID for a specific view
+ * @param baseId - Base element ID
+ * @param viewId - View ID
+ * @returns Unique element ID (e.g., 'gx-hm-clicked-element-view-0')
+ */
+const getElementId = (baseId, viewId) => {
+    return `${baseId}-${viewId}`;
+};
+const getClickedElementId = (viewId, isSecondary = false) => {
+    const baseId = isSecondary ? SECONDARY_CLICKED_ELEMENT_ID_BASE : CLICKED_ELEMENT_ID_BASE;
+    return getElementId(baseId, viewId);
+};
+const getHoveredElementId = (viewId, isSecondary = false) => {
+    const baseId = isSecondary ? SECONDARY_HOVERED_ELEMENT_ID_BASE : HOVERED_ELEMENT_ID_BASE;
+    return getElementId(baseId, viewId);
+};
+
 function getElementLayout(element) {
     if (!element?.getBoundingClientRect)
         return null;
@@ -978,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;
@@ -1021,9 +1599,15 @@ const buildElementInfo = (hash, rect, heatmapInfo) => {
     };
 };
 
-const PADDING = 0;
-const ARROW_SIZE = 8;
-const HORIZONTAL_OFFSET = 0;
+function calculateRankPosition(rect, widthScale) {
+    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
+    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
+    return {
+        transform: `scale(${1.2 * widthScale})`,
+        top: Number.isNaN(top) ? undefined : top,
+        left: Number.isNaN(left) ? undefined : left,
+    };
+}
 
 const getViewportDimensions = (containerElm) => {
     if (containerElm) {
@@ -1079,7 +1663,8 @@ const calculateHorizontalPlacementPosition = (targetRect, calloutRect, placement
 
 const isLeftPositionValid = (leftPos, calloutWidth, viewportWidth, padding, containerRect) => {
     if (containerRect) {
-        return leftPos >= containerRect.left + padding && leftPos + calloutWidth <= containerRect.right - padding;
+        return (leftPos >= containerRect.left + padding &&
+            leftPos + calloutWidth <= containerRect.right - padding);
     }
     return leftPos >= padding && leftPos + calloutWidth <= viewportWidth - padding;
 };
@@ -1164,14 +1749,15 @@ const constrainToViewport = (position, calloutRect, viewport, padding, container
     return { top, left };
 };
 
-const calcCalloutPosition = ({ targetElm, calloutElm, setPosition, hozOffset = HORIZONTAL_OFFSET, alignment = 'center', containerElm, }) => {
+const calcCalloutPosition = (options) => {
+    const { targetElm, calloutElm, setPosition, hozOffset = CALLOUT_HORIZONTAL_OFFSET, alignment = 'center', containerElm, } = options;
     return () => {
         // 1. Get dimensions
         const rectDimensions = getElementDimensions(targetElm, calloutElm);
         const viewport = getViewportDimensions(containerElm);
         const containerRect = containerElm?.getBoundingClientRect();
-        const padding = PADDING;
-        const arrowSize = ARROW_SIZE;
+        const padding = CALLOUT_PADDING;
+        const arrowSize = CALLOUT_ARROW_SIZE;
         // 2. Generate all position candidates
         const candidates = generateAllPositionCandidates(rectDimensions, viewport, alignment, hozOffset, padding, arrowSize, containerRect);
         // 3. Select best position
@@ -1189,6 +1775,191 @@ const calcCalloutPosition = ({ targetElm, calloutElm, setPosition, hozOffset = H
     };
 };
 
+/**
+ * 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;
@@ -1196,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();
@@ -1222,7 +1994,7 @@ class IframeNavigationBlockerV2 {
             this.injectCSP();
         }
         catch (error) {
-            console.error('[NavigationBlocker] Init error:', error);
+            logger.error('Init error:', error);
         }
     }
     blockLinkNavigation() {
@@ -1236,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();
@@ -1256,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();
@@ -1289,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();
@@ -1309,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;
         });
@@ -1319,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 '';
@@ -1328,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);
@@ -1336,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);
@@ -1389,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) {
@@ -1402,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() },
         }));
@@ -1458,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;
@@ -1478,7 +2250,7 @@ class IframeNavigationBlockerV2 {
         // Cleanup observers
         this.observers.forEach((observer) => observer.disconnect());
         this.observers = [];
-        console.log('[NavigationBlocker] Destroyed');
+        logger.log('Destroyed');
     }
 }
 
@@ -1494,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`;
@@ -1527,7 +2300,7 @@ class IframeStyleReplacer {
                 count++;
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${count} inline style elements`);
+        logger.log(`Replaced ${count} inline style elements`);
         return count;
     }
     processStyleTags() {
@@ -1540,7 +2313,7 @@ class IframeStyleReplacer {
                 count++;
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${count} <style> tags`);
+        logger.log(`Replaced ${count} <style> tags`);
         return count;
     }
     processRule(rule) {
@@ -1571,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;
@@ -1582,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() {
@@ -1593,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 {
@@ -1611,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() {
@@ -1638,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();
@@ -1648,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,
@@ -1675,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;
         }
@@ -1692,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
@@ -1713,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) {
@@ -1743,27 +2517,291 @@ 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 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();
+    const iframeDocument = iframeRef.current?.contentDocument;
+    const isActive = enabled && isEditingMode;
+    const handleMouseMove = useCallback((e) => {
+        if (!isActive || !iframeDocument)
+            return;
+        const elements = getElementsAtPoint(iframeDocument, e.clientX, e.clientY);
+        const selectableElement = elements.find((el, index, arr) => isElementSelectable(el, index, arr));
+        const isSelectable = selectableElement && selectableElement !== hoveredElement;
+        if (isSelectable) {
+            setHoveredElement(selectableElement);
+            setIsHovering(true);
+            return;
+        }
+        setHoveredElement(null);
+        setIsHovering(false);
+    }, [isActive, iframeDocument, hoveredElement]);
+    const handleMouseLeave = useCallback(() => {
+        setHoveredElement(null);
+        setIsHovering(false);
+    }, []);
+    useCallback((e) => {
+        if (!isActive || !hoveredElement)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (!onAreaCreatedElement)
+            return;
+        onAreaCreatedElement(hoveredElement);
+    }, [isActive, hoveredElement]);
+    useEffect(() => {
+        if (!isActive || !iframeDocument) {
+            setHoveredElement(null);
+            setIsHovering(false);
+            return;
+        }
+        // Throttle mouse move
+        let rafId = null;
+        const throttledMouseMove = (e) => {
+            if (rafId)
+                return;
+            rafId = requestAnimationFrame(() => {
+                handleMouseMove(e);
+                rafId = null;
+            });
+        };
+        iframeDocument.addEventListener('mousemove', throttledMouseMove);
+        iframeDocument.addEventListener('scroll', handleMouseLeave);
+        iframeDocument.removeEventListener('mouseleave', handleMouseLeave);
+        // iframeDocument.addEventListener('click', handleClick);
+        return () => {
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+            }
+            iframeDocument.removeEventListener('mousemove', throttledMouseMove);
+            iframeDocument.removeEventListener('mouseleave', handleMouseLeave);
+            iframeDocument.removeEventListener('scroll', handleMouseLeave);
+            // iframeDocument.removeEventListener('click', handleClick);
+        };
+    }, [isActive, iframeDocument]);
+    return {
+        hoveredElement,
+        isHovering,
+    };
+}
+
+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 (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);
+        }
+    }, [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);
+        }
+    }, [isEditingMode, hoveredArea]);
+    return {
+        handleAreaClick,
+        handleAreaMouseEnter,
+        handleAreaMouseLeave,
+    };
+}
+
+function useAreaPortals(options) {
+    const { shadowContainer, isReady, iframeRef, customShadowRoot, onAreaClick, onAreaCreated } = options;
+    const { onAreaCreatedElement } = useAreaCreation({ customShadowRoot, onAreaCreated });
+    const { hoveredElement } = useAreaEditMode({ iframeRef, enabled: true, onAreaCreatedElement });
+    const { areas, selectedArea, hoveredArea, isEditingMode } = useHeatmapAreaClick();
+    const { handleAreaClick, handleAreaMouseEnter, handleAreaMouseLeave } = useAreaInteraction({
+        onAreaClick,
+    });
+    const isReadyPortal = shadowContainer && isReady;
+    const areasPortal = isReadyPortal
+        ? createPortal(jsx(Fragment, { children: areas.map((area) => (jsx(AreaOverlay, { area: area, onClick: handleAreaClick, onMouseEnter: handleAreaMouseEnter, onMouseLeave: handleAreaMouseLeave, isSelected: selectedArea?.id === area.id, isHovered: hoveredArea?.id === area.id }, area.id))) }), shadowContainer)
+        : null;
+    const isReadyEditHighlight = shadowContainer && isReady && isEditingMode && hoveredElement;
+    const editHighlightPortal = isReadyEditHighlight
+        ? createPortal(jsx(AreaEditHighlight, { element: hoveredElement, shadowRoot: customShadowRoot, onClick: onAreaCreatedElement }), shadowContainer)
+        : null;
+    return {
+        areasPortal: areasPortal,
+        editHighlightPortal: editHighlightPortal,
+    };
+}
+
+function useAreaRectSync(options) {
+    const { iframeDocument, shadowRoot, enabled = true } = options;
+    const { vizRef } = useHeatmapViz();
+    const { areas } = useHeatmapAreaClick();
+    useEffect(() => {
+        if (!enabled || !iframeDocument || areas.length === 0) {
+            return;
+        }
+        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]);
+}
+
+/**
+ * Hook to setup and manage the shadow DOM container for area rendering
+ *
+ * @param iframeDocument - The iframe document
+ * @param customShadowRoot - Optional custom shadow root element
+ * @returns Container element and ready state
+ */
+function useAreaRendererContainer(iframeDocument, customShadowRoot) {
+    const [shadowContainer, setShadowContainer] = useState(null);
+    const [isReady, setIsReady] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!iframeDocument) {
+            setIsReady(false);
+            return;
+        }
+        const innerContainer = setupAreaRenderingContainer(iframeDocument, customShadowRoot);
+        containerRef.current = innerContainer;
+        setShadowContainer(innerContainer);
+        setIsReady(true);
+        return () => {
+            // Cleanup on unmount
+            const container = innerContainer.parentElement?.parentElement;
+            cleanupAreaRenderingContainer(container);
+            containerRef.current = null;
+            setShadowContainer(null);
+            setIsReady(false);
+        };
+    }, [iframeDocument, customShadowRoot]);
+    return {
+        shadowContainer,
+        isReady,
+        containerRef,
+    };
+}
+
 const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     if (!visualRef.current)
         return;
@@ -1782,7 +2820,7 @@ const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     });
 };
 const useClickedElement = ({ visualRef, getRect }) => {
-    const { selectedElement, shouldShowCallout, setShouldShowCallout } = useHeatmapInteraction();
+    const { selectedElement, shouldShowCallout, setShouldShowCallout } = useHeatmapClick();
     const { widthScale } = useHeatmapViz();
     const { dataInfo } = useHeatmapData();
     const [clickedElement, setClickedElement] = useState(null);
@@ -1820,12 +2858,12 @@ 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 };
 };
 
 const useElementCalloutVisible = ({ visualRef, getRect }) => {
-    const { selectedElement, setShouldShowCallout } = useHeatmapInteraction();
+    const { selectedElement, setShouldShowCallout } = useHeatmapClick();
     const { widthScale } = useHeatmapViz();
     const { dataInfo } = useHeatmapData();
     useEffect(() => {
@@ -1856,7 +2894,7 @@ const useElementCalloutVisible = ({ visualRef, getRect }) => {
 };
 
 const useHeatmapEffects = ({ isVisible }) => {
-    useHeatmapInteraction();
+    useHeatmapClick();
     const resetAll = () => {
         // setShouldShowCallout(false);
     };
@@ -1876,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;
@@ -1912,6 +2950,7 @@ const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
             outOfBounds,
         };
     }, [iframeRef, wrapperRef, visualizer, heatmapWidth, iframeHeight, widthScale]);
+    return { getRect };
 };
 
 const debounce = (fn, delay) => {
@@ -1921,11 +2960,7 @@ const debounce = (fn, delay) => {
         timeout = setTimeout(() => fn(...args), 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;
@@ -1946,87 +2981,75 @@ 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 } = useHeatmapInteraction();
+    const { hoveredElement, setHoveredElement, setSelectedElement } = useHeatmapClick();
     const { widthScale } = useHeatmapViz();
     const { dataInfo } = useHeatmapData();
     const reset = useCallback(() => {
@@ -2106,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) {
@@ -2141,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";
@@ -2250,8 +3436,7 @@ function reset(iframe, rect, onSuccess) {
 
 const useHeatmapRender = () => {
     const { data } = useHeatmapData();
-    const { vizRef, setVizRef, setIsRenderViz, setIframeHeight, wrapperHeight, wrapperWidth } = useHeatmapViz();
-    console.log(`🚀 🐥 ~ useHeatmapRender ~ wrapperHeight:`, wrapperHeight);
+    const { vizRef, setVizRef, setIsRenderViz, setIframeHeight } = useHeatmapViz();
     const iframeRef = useRef(null);
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
@@ -2430,7 +3615,7 @@ const useReplayRender = () => {
     };
 };
 
-const useHeatmapVizRender = (mode) => {
+const useHeatmapRenderByMode = (mode) => {
     const heatmapResult = useMemo(() => {
         switch (mode) {
             case 'heatmap':
@@ -3452,19 +4637,6 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
 });
 BoxStack.displayName = 'BoxStack';
 
-const ContentTopBar = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    useHeatmapConfigStore((state) => state.mode);
-    const TopBar = controls.TopBar;
-    // In compare mode, hide individual top bars since we have a global header
-    // if (mode === 'compare') {
-    //   return null;
-    // }
-    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
-            borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
-        }, children: TopBar && jsx(TopBar, {}) }));
-};
-
 const ContentMetricBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const borderBottom = `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`;
@@ -3472,22 +4644,11 @@ const ContentMetricBar = () => {
             borderBottom,
         }, children: controls.MetricBar ?? null }));
 };
-
-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 }));
-};
+ContentMetricBar.displayName = 'ContentMetricBar';
 
 const ContentSidebar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
-    const { state } = useHeatmapInteraction();
+    const { state } = useHeatmapClick();
     const isHideSidebar = state.hideSidebar;
     const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
     const mode = useHeatmapConfigStore((state) => state.mode);
@@ -3521,7 +4682,7 @@ const PopoverSidebar = () => {
     const CompSidebarActivator = useHeatmapControlStore((state) => state.controls.SidebarActivator);
     const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const { state } = useHeatmapInteraction();
+    const { state } = useHeatmapClick();
     const isCompareMode = mode === 'compare';
     const isHideSidebar = state.hideSidebar;
     const stylePopover = {
@@ -3546,9 +4707,21 @@ const PopoverSidebar = () => {
                     }, 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 = useViewId();
+    const viewId = useViewIdContext();
     useWrapperRefHeight({
         isActive,
         wrapperRef,
@@ -3558,80 +4731,46 @@ const VizContainer = ({ children, isActive = false }) => {
                 }, children: children }), jsx(PopoverSidebar, {})] }));
 };
 
-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 };
-};
+function useAreaRenderer(options) {
+    const { iframeRef, visualRef, shadowRoot, onAreaCreated, onAreaClick } = options;
+    const iframeDocument = iframeRef.current?.contentDocument || undefined;
+    const { shadowContainer, isReady } = useAreaRendererContainer(iframeDocument, shadowRoot);
+    const { areasPortal, editHighlightPortal } = useAreaPortals({
+        iframeRef,
+        shadowContainer,
+        isReady,
+        onAreaClick,
+        onAreaCreated,
+    });
+    useAreaRectSync({ iframeDocument, shadowRoot, enabled: isReady });
+    useAreaScrollSync({ iframeRef, visualRef, enabled: isReady });
+    return {
+        areasPortal,
+        editHighlightPortal,
+        isReady,
+    };
+}
 
-const useHeatmapCanvas = () => {
-    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const { start: startClickmap } = useClickmap();
-    const { start: startScrollmap } = useScrollmap();
+const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, enableOverlapResolution = true, onAreaClick, }) => {
+    const { resetView } = useHeatmapAreaClick();
+    const { areasPortal, editHighlightPortal, isReady } = useAreaRenderer({
+        iframeRef,
+        visualRef,
+        shadowRoot,
+        onAreaClick,
+    });
+    useAreaTopAutoDetect({ iframeRef, autoCreateTopN, shadowRoot });
+    useAreaFilterVisible({ iframeRef, enableOverlapResolution });
     useEffect(() => {
-        switch (heatmapType) {
-            case IHeatmapType.Click:
-                startClickmap();
-                break;
-            case IHeatmapType.Scroll:
-                startScrollmap();
-                break;
-        }
-    }, [heatmapType, startClickmap, startScrollmap]);
-};
-
-// Base IDs for elements (without viewId suffix)
-const CLICKED_ELEMENT_ID_BASE = 'gx-hm-clicked-element';
-const SECONDARY_CLICKED_ELEMENT_ID_BASE = 'gx-hm-secondary-clicked-element';
-const HOVERED_ELEMENT_ID_BASE = 'gx-hm-hovered-element';
-const SECONDARY_HOVERED_ELEMENT_ID_BASE = 'gx-hm-secondary-hovered-element';
-/**
- * Generate unique element ID for a specific view
- * @param baseId - Base element ID
- * @param viewId - View ID
- * @returns Unique element ID (e.g., 'gx-hm-clicked-element-view-0')
- */
-const getElementId = (baseId, viewId) => {
-    return `${baseId}-${viewId}`;
-};
-const getClickedElementId = (viewId, isSecondary = false) => {
-    const baseId = isSecondary ? SECONDARY_CLICKED_ELEMENT_ID_BASE : CLICKED_ELEMENT_ID_BASE;
-    return getElementId(baseId, viewId);
-};
-const getHoveredElementId = (viewId, isSecondary = false) => {
-    const baseId = isSecondary ? SECONDARY_HOVERED_ELEMENT_ID_BASE : HOVERED_ELEMENT_ID_BASE;
-    return getElementId(baseId, viewId);
+        return () => {
+            resetView();
+        };
+    }, []);
+    if (!isReady)
+        return null;
+    return (jsxs(Fragment, { children: [areasPortal, editHighlightPortal] }));
 };
+VizAreaClick.displayName = 'VizAreaClick';
 
 const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
     const style = calculateRankPosition(elementRect, widthScale);
@@ -3661,7 +4800,7 @@ const DEFAULT_POSITION = {
 };
 const ElementCallout = (props) => {
     const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
-    const viewId = useViewId();
+    const viewId = useViewIdContext();
     const { element, target, visualRef, hozOffset, alignment = 'left' } = props;
     const calloutRef = useRef(null);
     const [position, setPosition] = useState(DEFAULT_POSITION);
@@ -3721,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))
@@ -3745,30 +4884,32 @@ const ELEMENT_CALLOUT = {
     alignment: 'left',
 };
 const HeatmapElements = (props) => {
-    const viewId = useViewId();
-    const { iframeHeight } = useHeatmapViz();
+    const viewId = useViewIdContext();
     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 }) => {
@@ -3785,130 +4926,34 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     // useRenderCount('VizElements');
     if (!iframeRef.current)
         return null;
-    return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, iframeDimensions: {
-            width: contentWidth,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            // pointerEvents: 'none',
-        } }));
-};
-
-const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
-    const { dataInfo } = useHeatmapData();
-    const { getZonePosition } = useZonePositions();
-    const averageFold = dataInfo?.averageFold || 50;
-    const position = getZonePosition({
-        startY: averageFold,
-        endY: averageFold,
-    });
-    if (!position)
-        return null;
-    return (jsx("div", { style: {
+    return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, iframeDimensions: {
+            width: contentWidth,
             position: 'absolute',
-            top: `${position.top}px`,
+            top: 0,
             left: 0,
-            width: '100%',
-            height: '2px',
-            backgroundColor: '#0078D4',
-            pointerEvents: 'none',
-            zIndex: 2,
-            boxShadow: '0 0 4px rgba(0,120,212,0.5)',
-            display: 'flex',
-            alignItems: 'center',
-        }, children: jsxs("div", { style: {
-                position: 'absolute',
-                padding: '8px',
-                backgroundColor: 'rgba(0, 120, 212, 0.9)',
-                color: 'white',
-                fontSize: '16px',
-                fontWeight: 600,
-                borderRadius: '4px',
-                whiteSpace: 'nowrap',
-                left: '12px',
-                minWidth: '120px',
-                textAlign: 'center',
-            }, children: ["Average fold - ", averageFold.toFixed(0), "%"] }) }));
+            // pointerEvents: 'none',
+        } }));
 };
 
-const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
-    const scrollType = useHeatmapConfigStore((state) => state.scrollType);
-    const { scrollmap } = useHeatmapData();
-    const { getZonePosition } = useZonePositions();
-    if (!scrollmap || scrollmap.length === 0)
-        return null;
-    const findScrollPositionForUserPercent = (targetPercent) => {
-        for (let i = 0; i < scrollmap.length; i++) {
-            if (scrollmap[i].percUsers <= targetPercent) {
-                if (i > 0) {
-                    return scrollmap[i - 1].scrollReachY;
-                }
-                return scrollmap[i].scrollReachY;
-            }
-        }
-        return scrollmap[scrollmap.length - 1]?.scrollReachY || null;
-    };
-    const boundaries = [
-        { percent: 75, label: '75%', color: '#10B981' },
-        { percent: 50, label: '50%', color: '#F59E0B' },
-        { percent: 25, label: '25%', color: '#EF4444' },
-        { percent: 5, label: '5%', color: '#8B5CF6' },
-    ];
-    const isScrollDepth = scrollType === IScrollType.Depth;
-    if (!isScrollDepth)
+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;
-    return (jsx(Fragment, { children: boundaries.map((boundary) => {
-            const scrollY = findScrollPositionForUserPercent(boundary.percent);
-            if (scrollY === null)
-                return null;
-            const position = getZonePosition({
-                startY: scrollY,
-                endY: scrollY,
-            });
-            if (!position)
-                return null;
-            return (jsx("div", { className: `marker-boundary-line-${boundary.percent}`, style: {
-                    position: 'absolute',
-                    top: `${position.top}px`,
-                    left: 0,
-                    transformOrigin: 'left center',
-                    width: '100%',
-                    height: '0px',
-                    // borderBottom: `2px dashed #323130`,
-                    borderBottom: `2px solid ${boundary.color}`,
-                    // background: 'repeating-linear-gradient(90deg, #323130, transparent 2px 3px)',
-                    zIndex: 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                }, children: jsx("div", { style: {
-                        position: 'absolute',
-                        padding: '8px',
-                        backgroundColor: boundary.color,
-                        color: 'white',
-                        fontSize: '16px',
-                        fontWeight: 600,
-                        borderRadius: '4px',
-                        whiteSpace: 'nowrap',
-                        left: '12px',
-                        minWidth: '120px',
-                        textAlign: 'center',
-                        // textAlign: 'center',
-                        // padding: '8px',
-                        // paddingInline: '8px',
-                        // fontSize: '16px',
-                        // background: '#fff',
-                        // width: 'auto',
-                        // borderRadius: '4px',
-                        // position: 'absolute',
-                        // left: '12px',
-                        // minWidth: '120px',
-                    }, children: boundary.label }) }, boundary.label));
-        }) }));
+    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 } = useHeatmapVizScrollmap();
+    const { showMinimap } = useHeatmapScroll();
     const isScrollType = [IScrollType.Attention].includes(scrollType);
     if (!showMinimap || !isScrollType)
         return null;
@@ -4064,6 +5109,118 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
         }, children: jsx(HoverZones, { position: position, currentScrollPercent: currentScrollPercent, iframeRef: iframeRef, wrapperRef: wrapperRef }) }));
 };
 
+const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
+    const { dataInfo } = useHeatmapData();
+    const { getZonePosition } = useZonePositions();
+    const averageFold = dataInfo?.averageFold || 50;
+    const position = getZonePosition({
+        startY: averageFold,
+        endY: averageFold,
+    });
+    if (!position)
+        return null;
+    return (jsx("div", { style: {
+            position: 'absolute',
+            top: `${position.top}px`,
+            left: 0,
+            width: '100%',
+            height: '2px',
+            backgroundColor: '#0078D4',
+            pointerEvents: 'none',
+            zIndex: 2,
+            boxShadow: '0 0 4px rgba(0,120,212,0.5)',
+            display: 'flex',
+            alignItems: 'center',
+        }, children: jsxs("div", { style: {
+                position: 'absolute',
+                padding: '8px',
+                backgroundColor: 'rgba(0, 120, 212, 0.9)',
+                color: 'white',
+                fontSize: '16px',
+                fontWeight: 600,
+                borderRadius: '4px',
+                whiteSpace: 'nowrap',
+                left: '12px',
+                minWidth: '120px',
+                textAlign: 'center',
+            }, children: ["Average fold - ", averageFold.toFixed(0), "%"] }) }));
+};
+
+const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
+    const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const { scrollmap } = useHeatmapData();
+    const { getZonePosition } = useZonePositions();
+    if (!scrollmap || scrollmap.length === 0)
+        return null;
+    const findScrollPositionForUserPercent = (targetPercent) => {
+        for (let i = 0; i < scrollmap.length; i++) {
+            if (scrollmap[i].percUsers <= targetPercent) {
+                if (i > 0) {
+                    return scrollmap[i - 1].scrollReachY;
+                }
+                return scrollmap[i].scrollReachY;
+            }
+        }
+        return scrollmap[scrollmap.length - 1]?.scrollReachY || null;
+    };
+    const boundaries = [
+        { percent: 75, label: '75%', color: '#10B981' },
+        { percent: 50, label: '50%', color: '#F59E0B' },
+        { percent: 25, label: '25%', color: '#EF4444' },
+        { percent: 5, label: '5%', color: '#8B5CF6' },
+    ];
+    const isScrollDepth = scrollType === IScrollType.Depth;
+    if (!isScrollDepth)
+        return null;
+    return (jsx(Fragment, { children: boundaries.map((boundary) => {
+            const scrollY = findScrollPositionForUserPercent(boundary.percent);
+            if (scrollY === null)
+                return null;
+            const position = getZonePosition({
+                startY: scrollY,
+                endY: scrollY,
+            });
+            if (!position)
+                return null;
+            return (jsx("div", { className: `marker-boundary-line-${boundary.percent}`, style: {
+                    position: 'absolute',
+                    top: `${position.top}px`,
+                    left: 0,
+                    transformOrigin: 'left center',
+                    width: '100%',
+                    height: '0px',
+                    // borderBottom: `2px dashed #323130`,
+                    borderBottom: `2px solid ${boundary.color}`,
+                    // background: 'repeating-linear-gradient(90deg, #323130, transparent 2px 3px)',
+                    zIndex: 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                }, children: jsx("div", { style: {
+                        position: 'absolute',
+                        padding: '8px',
+                        backgroundColor: boundary.color,
+                        color: 'white',
+                        fontSize: '16px',
+                        fontWeight: 600,
+                        borderRadius: '4px',
+                        whiteSpace: 'nowrap',
+                        left: '12px',
+                        minWidth: '120px',
+                        textAlign: 'center',
+                        // textAlign: 'center',
+                        // padding: '8px',
+                        // paddingInline: '8px',
+                        // fontSize: '16px',
+                        // background: '#fff',
+                        // width: 'auto',
+                        // borderRadius: '4px',
+                        // position: 'absolute',
+                        // left: '12px',
+                        // minWidth: '120px',
+                    }, children: boundary.label }) }, boundary.label));
+        }) }));
+};
+
 const SCROLL_TYPES = [IHeatmapType.Scroll];
 const VizScrollMap = ({ iframeRef, wrapperRef }) => {
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
@@ -4119,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 } = useHeatmapInteraction();
+    const { setSelectedElement } = useHeatmapClick();
     const { iframeHeight, setIframeHeight, isRenderViz } = useHeatmapViz();
-    const { iframeRef } = useHeatmapVizRender(mode);
+    const { iframeRef } = useHeatmapRenderByMode(mode);
     const { scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
         iframeRef,
@@ -4145,7 +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 })), 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 = () => {
@@ -4163,6 +5319,7 @@ const VizDomHeatmap = () => {
     }, []);
     return (jsxs(VizContainer, { isActive: true, children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && jsx(VizLoading, {})] }));
 };
+VizDomHeatmap.displayName = 'VizDomHeatmap';
 
 const VizLiveRenderer = () => {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
@@ -4196,6 +5353,7 @@ const VizLiveHeatmap = () => {
     }, []);
     return (jsxs(VizContainer, { isActive: true, children: [jsx(VizLiveRenderer, {}), (!iframeHeight || !wrapperHeight) && jsx(VizLoading, {})] }));
 };
+VizLiveHeatmap.displayName = 'VizLiveHeatmap';
 
 const ContentVizByMode = () => {
     const mode = useHeatmapConfigStore((state) => state.mode);
@@ -4212,14 +5370,23 @@ const ContentVizByMode = () => {
             return jsx(VizDomHeatmap, {});
     }
 };
+ContentVizByMode.displayName = 'ContentVizByMode';
 
-const WrapperPreview = () => {
+const HeatmapPreview = () => {
     return (jsxs(BoxStack, { id: "gx-hm-container", flexDirection: "row", overflow: "hidden", flex: "1", position: "relative", children: [jsx(ContentSidebar, {}), jsxs(BoxStack, { flexDirection: "column", flex: "1", children: [jsx(ContentMetricBar, {}), jsx(ContentVizByMode, {}), jsx(ContentToolbar, {})] })] }));
 };
 
-const WrapperLayout = () => {
-    useRenderCount('WrapperLayout');
-    return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentTopBar, {}), jsx(WrapperPreview, {})] }));
+const ContentTopBar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    useHeatmapConfigStore((state) => state.mode);
+    const TopBar = controls.TopBar;
+    // In compare mode, hide individual top bars since we have a global header
+    // if (mode === 'compare') {
+    //   return null;
+    // }
+    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
+            borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+        }, children: TopBar && jsx(TopBar, {}) }));
 };
 
 const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
@@ -4230,11 +5397,11 @@ const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     performanceLogger.configure({
         enabled: true,
         logToConsole: false,
-        logLevel: 'normal', // 'verbose' | 'normal' | 'minimal'
+        logLevel: 'normal',
         thresholds: {
-            slowRenderMs: 16, // Warn if render > 16ms (60fps)
-            slowHookMs: 5, // Warn if hook > 5ms
-            excessiveRenderCount: 10, // Warn if component renders > 10 times
+            slowRenderMs: 16,
+            slowHookMs: 5,
+            excessiveRenderCount: 10,
         },
         externalLogger: (metric) => {
             if (metric.name === 'VizDomRenderer') ;
@@ -4243,7 +5410,7 @@ const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", style: getVariableStyle(), children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
                     minHeight: '100%',
                     display: 'flex',
-                }, children: jsx(WrapperLayout, {}) }) }) }));
+                }, children: jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentTopBar, {}), jsx(HeatmapPreview, {})] }) }) }) }));
     function getVariableStyle() {
         return {
             '--gx-hm-border-width': `${HEATMAP_CONFIG.borderWidth}px`,
@@ -4253,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, getCompareViewIndex, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, isCompareViewId, performanceLogger, printPerformanceSummary, sendPerformanceReport, trackStoreAction, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapDataStore, useHeatmapEffects, useHeatmapElementPosition, useHeatmapInteraction, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapScale, useHeatmapSingleStore, useHeatmapViz, useHeatmapVizRender, useHeatmapVizScrollmap, useHeatmapVizScrollmapStore, useHeatmapVizStore, useHoveredElement, useIsCompareMode, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewId, 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 };