@gemx-dev/heatmap-react 3.5.51 → 3.5.52

package/dist/esm/index.mjs

@@ -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;
@@ -244,10 +224,173 @@ 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,
+        };
+    }),
+    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 +451,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 +500,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 +517,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({
@@ -549,16 +546,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 +560,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 +604,188 @@ 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 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 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 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 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);
+    // 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),
+    }), [
+        setSelectedAreaStore,
+        setHoveredAreaStore,
+        setAreasStore,
+        setIsEditingModeStore,
+        addAreaStore,
+        removeAreaStore,
+        updateAreaStore,
+        clearAreasStore,
+        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 +810,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 +891,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 +898,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 +932,7 @@ const useHeatmapCopyView = () => {
         clearSingleView(viewId);
         clearInteractionView(viewId);
         clearVizScrollmapView(viewId);
+        clearAreaClickView(viewId);
     };
     const clearMultipleViews = (viewIds) => {
         viewIds.forEach((viewId) => {
@@ -851,6 +945,7 @@ const useHeatmapCopyView = () => {
         resetSingleAll();
         resetInteractionAll();
         resetVizScrollmapAll();
+        resetAreaClickAll();
     };
     return {
         copyView,
@@ -859,49 +954,497 @@ const useHeatmapCopyView = () => {
         clearMultipleViews,
         resetAll,
     };
-};
-
-const useRegisterData = (data, dataInfo) => {
-    const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
-    const { setData, setDataInfo } = useHeatmapData();
-    const handleSetData = useCallback((data) => {
-        if (!data)
-            return;
-        setData(data);
-        setIsRendering(false);
-    }, [data]);
-    const handleSetDataInfo = useCallback((dataInfo) => {
-        if (!dataInfo)
-            return;
-        setDataInfo(dataInfo);
-    }, [setDataInfo]);
-    useEffect(() => {
-        handleSetData(data);
-    }, [data]);
-    useEffect(() => {
-        handleSetDataInfo(dataInfo);
-    }, [dataInfo]);
-};
+};
+
+const useRegisterData = (data, dataInfo) => {
+    const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
+    const { setData, setDataInfo } = useHeatmapData();
+    const handleSetData = useCallback((data) => {
+        if (!data)
+            return;
+        setData(data);
+        setIsRendering(false);
+    }, [data]);
+    const handleSetDataInfo = useCallback((dataInfo) => {
+        if (!dataInfo)
+            return;
+        setDataInfo(dataInfo);
+    }, [setDataInfo]);
+    useEffect(() => {
+        handleSetData(data);
+    }, [data]);
+    useEffect(() => {
+        handleSetDataInfo(dataInfo);
+    }, [dataInfo]);
+};
+
+const useRegisterHeatmap = ({ clickmap, scrollmap }) => {
+    const { setClickmap, setScrollmap } = useHeatmapData();
+    const handleSetClickmap = useCallback((clickmap) => {
+        if (!clickmap)
+            return;
+        setClickmap(clickmap);
+    }, [clickmap]);
+    const handleSetScrollmap = useCallback((scrollmap) => {
+        if (!scrollmap)
+            return;
+        setScrollmap(scrollmap);
+    }, [scrollmap]);
+    useEffect(() => {
+        handleSetClickmap(clickmap);
+    }, [clickmap]);
+    useEffect(() => {
+        handleSetScrollmap(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 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 AREA_COLOR_GRADIENT = [
+    [0, 0, 255], // Blue
+    [0, 255, 255], // Cyan
+    [0, 255, 0], // Green
+    [255, 255, 0], // Yellow
+    [255, 0, 0], // Red
+];
+
+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));
+    // 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;
+}
+
+/**
+ * Get element position and dimensions for rendering inside iframe
+ *
+ * This function calculates position relative to the iframe's document,
+ * accounting for scroll position. Suitable for elements rendered in
+ * shadow DOM inside the iframe with absolute positioning.
+ */
+function getElementRect(element, _shadowRoot) {
+    const rect = element.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    // Get the document to access scroll position
+    const doc = element.ownerDocument || document;
+    // Get scroll offset from documentElement or body
+    const scrollTop = doc.documentElement?.scrollTop || doc.body?.scrollTop || 0;
+    const scrollLeft = doc.documentElement?.scrollLeft || doc.body?.scrollLeft || 0;
+    // Calculate position relative to document (not viewport)
+    // getBoundingClientRect() is relative to viewport, so add scroll offset
+    const top = rect.top + scrollTop;
+    const left = rect.left + scrollLeft;
+    // For absolute positioning calculations (overlap detection)
+    const absoluteLeft = left;
+    const absoluteTop = top;
+    const absoluteRight = absoluteLeft + width;
+    const absoluteBottom = absoluteTop + height;
+    return {
+        width,
+        height,
+        top,
+        left,
+        absoluteLeft,
+        absoluteTop,
+        absoluteRight,
+        absoluteBottom,
+        outOfBounds: false,
+    };
+}
+/**
+ * Check if element has CSS position: fixed
+ */
+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;
+}
+/**
+ * Check if two areas overlap
+ */
+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));
+}
+/**
+ * Check if area1 is completely inside area2
+ */
+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);
+}
+/**
+ * Check if element contains another element in DOM tree
+ */
+function isElementAncestorOf(ancestor, descendant, doc) {
+    return ancestor.contains(descendant);
+}
+/**
+ * Get all elements at a specific point, including shadow DOM
+ */
+function getElementsAtPoint$1(doc, x, y, filter, visited = new Set()) {
+    const elements = doc.elementsFromPoint(x, y);
+    const filtered = elements.find(filter);
+    // Check shadow DOM
+    if (filtered?.shadowRoot && !visited.has(filtered.shadowRoot)) {
+        visited.add(filtered.shadowRoot);
+        return getElementsAtPoint$1(filtered.shadowRoot, x, y, filter, visited);
+    }
+    return elements;
+}
+/**
+ * Check if element should be selectable for area creation
+ */
+function isElementSelectable(element, index, elements) {
+    // Skip if it's an area map div
+    if (element.hasAttribute(AREA_MAP_DIV_ATTRIBUTE)) {
+        return false;
+    }
+    // Skip first element if it's BODY and there are other elements
+    if (index === 0 && elements.length > 1 && element.nodeName === 'BODY') {
+        return false;
+    }
+    return true;
+}
+/**
+ * Sort areas by click distribution (descending)
+ */
+function sortAreasByClickDist(areas) {
+    return [...areas].sort((a, b) => {
+        // Higher clickDist first
+        if (a.clickDist !== b.clickDist) {
+            return b.clickDist - a.clickDist;
+        }
+        // Then by total clicks
+        return b.totalclicks - a.totalclicks;
+    });
+}
+/**
+ * Create shadow root or return existing one
+ */
+function getOrCreateShadowRoot(element) {
+    if (element.shadowRoot) {
+        return element.shadowRoot;
+    }
+    return element.attachShadow({ mode: 'open' });
+}
+/**
+ * Check if rect is too small to show label
+ */
+function isRectTooSmallForLabel(rect) {
+    return rect.width < 67 || rect.height < 30;
+}
+
+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, elementMapInfo, totalClicks, shadowRoot) {
+    const elementInfo = 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;
+}
 
-const useRegisterHeatmap = ({ clickmap, scrollmap }) => {
-    const { setClickmap, setScrollmap } = useHeatmapData();
-    const handleSetClickmap = useCallback((clickmap) => {
-        if (!clickmap)
+/**
+ * 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;
-        setClickmap(clickmap);
-    }, [clickmap]);
-    const handleSetScrollmap = useCallback((scrollmap) => {
-        if (!scrollmap)
+        // 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;
-        setScrollmap(scrollmap);
-    }, [scrollmap]);
-    useEffect(() => {
-        handleSetClickmap(clickmap);
-    }, [clickmap]);
-    useEffect(() => {
-        handleSetScrollmap(scrollmap);
-    }, [scrollmap]);
-};
+        }
+        // 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);
+}
 
 function findLastSizeOfDom(data) {
     const listDocs = data
@@ -931,39 +1474,28 @@ function decodePayloads(payload) {
     try {
         return decode(payload);
     }
-    catch (error) {
+    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;
-}
+/**
+ * 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)
@@ -1021,9 +1553,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 +1617,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 +1703,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
@@ -1695,74 +2235,242 @@ class IframeHelperFixer {
             console.error('[IframeHelper] Cannot access iframe document');
             this.config.onError?.(new Error('Cannot access iframe document'));
             return;
-        }
+        }
+        try {
+            console.log('[IframeHelper] 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);
+            // Trigger success callback
+            this.config.onSuccess?.(result);
+            // Dispatch custom event
+            window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', {
+                detail: result,
+            }));
+        }
+        catch (error) {
+            console.error('[IframeHelper] Failed to process:', error);
+            this.config.onError?.(error);
+        }
+    }
+    async recalculate() {
+        console.log('[IframeHelper] Recalculating...');
+        await this.process();
+    }
+    updateConfig(config) {
+        this.config = { ...this.config, ...config };
+        if (this.replacer) {
+            this.replacer.updateConfig(config);
+        }
+    }
+    enableNavigationBlocking() {
+        this.navigationBlocker?.enable();
+    }
+    enableNavigationBlockingMessage() {
+        this.navigationBlocker?.enableMessage();
+    }
+    disableNavigationBlocking() {
+        this.navigationBlocker?.disable();
+    }
+    disableNavigationBlockingMessage() {
+        this.navigationBlocker?.disableMessage();
+    }
+    destroy() {
+        this.replacer = null;
+        this.navigationBlocker?.destroy();
+        this.navigationBlocker = null;
+        console.log('[IframeHelper] 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);
+    }));
+    window.addEventListener('iframe-navigation-blocked', ((e) => {
+        const ev = e;
+        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);
+    }));
+    return fixer;
+}
+
+function useAreaEditMode({ iframeRef, onCreateArea, 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$1(iframeDocument, e.clientX, e.clientY, isElementSelectable);
+        // Find first selectable element
+        const selectableElement = elements.find((el, index, arr) => isElementSelectable(el, index, arr));
+        if (selectableElement && selectableElement !== hoveredElement) {
+            setHoveredElement(selectableElement);
+            setIsHovering(true);
+        }
+        else if (!selectableElement && hoveredElement) {
+            setHoveredElement(null);
+            setIsHovering(false);
+        }
+    }, [isActive, iframeDocument, hoveredElement]);
+    const handleClick = useCallback((e) => {
+        if (!isActive || !hoveredElement)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (onCreateArea) {
+            onCreateArea(hoveredElement);
+        }
+    }, [isActive, hoveredElement]);
+    const handleMouseLeave = useCallback(() => {
+        setHoveredElement(null);
+        setIsHovering(false);
+    }, []);
+    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('click', handleClick);
+        iframeDocument.addEventListener('mouseleave', handleMouseLeave);
+        iframeDocument.addEventListener('scroll', handleMouseLeave);
+        return () => {
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+            }
+            iframeDocument.removeEventListener('mousemove', throttledMouseMove);
+            iframeDocument.removeEventListener('click', handleClick);
+            iframeDocument.removeEventListener('mouseleave', handleMouseLeave);
+            iframeDocument.removeEventListener('scroll', handleMouseLeave);
+        };
+    }, [isActive, iframeDocument]);
+    return {
+        hoveredElement,
+        isHovering,
+    };
+}
+
+function useAreaScrollSync(options) {
+    const { areas, iframeRef, enabled = true } = options;
+    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]);
+}
+
+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 {
-            console.log('[IframeHelper] 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);
-            // Trigger success callback
-            this.config.onSuccess?.(result);
-            // Dispatch custom event
-            window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', {
-                detail: result,
-            }));
+            vizRef?.clearmap?.();
+            vizRef?.scrollmap?.(scrollmap);
+            // setIsInitialized(true);
         }
         catch (error) {
-            console.error('[IframeHelper] Failed to process:', error);
-            this.config.onError?.(error);
-        }
-    }
-    async recalculate() {
-        console.log('[IframeHelper] Recalculating...');
-        await this.process();
-    }
-    updateConfig(config) {
-        this.config = { ...this.config, ...config };
-        if (this.replacer) {
-            this.replacer.updateConfig(config);
+            console.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
         }
-    }
-    enableNavigationBlocking() {
-        this.navigationBlocker?.enable();
-    }
-    enableNavigationBlockingMessage() {
-        this.navigationBlocker?.enableMessage();
-    }
-    disableNavigationBlocking() {
-        this.navigationBlocker?.disable();
-    }
-    disableNavigationBlockingMessage() {
-        this.navigationBlocker?.disableMessage();
-    }
-    destroy() {
-        this.replacer = null;
-        this.navigationBlocker?.destroy();
-        this.navigationBlocker = null;
-        console.log('[IframeHelper] Destroyed');
-    }
-}
+    }, [vizRef, scrollmap]);
+    return { start };
+};
 
-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);
-    }));
-    window.addEventListener('iframe-navigation-blocked', ((e) => {
-        const ev = e;
-        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);
-    }));
-    return fixer;
-}
+const useHeatmapCanvas = () => {
+    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const { start: startClickmap } = useClickmap();
+    const { start: startScrollmap } = useScrollmap();
+    useEffect(() => {
+        switch (heatmapType) {
+            case IHeatmapType.Click:
+                startClickmap();
+                break;
+            case IHeatmapType.Scroll:
+                startScrollmap();
+                break;
+        }
+    }, [heatmapType, startClickmap, startScrollmap]);
+};
 
 const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     if (!visualRef.current)
@@ -1782,7 +2490,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);
@@ -1825,7 +2533,7 @@ const useClickedElement = ({ visualRef, getRect }) => {
 };
 
 const useElementCalloutVisible = ({ visualRef, getRect }) => {
-    const { selectedElement, setShouldShowCallout } = useHeatmapInteraction();
+    const { selectedElement, setShouldShowCallout } = useHeatmapClick();
     const { widthScale } = useHeatmapViz();
     const { dataInfo } = useHeatmapData();
     useEffect(() => {
@@ -1856,7 +2564,7 @@ const useElementCalloutVisible = ({ visualRef, getRect }) => {
 };
 
 const useHeatmapEffects = ({ isVisible }) => {
-    useHeatmapInteraction();
+    useHeatmapClick();
     const resetAll = () => {
         // setShouldShowCallout(false);
     };
@@ -2026,7 +2734,7 @@ function HeatmapComponent() {
 */
 
 const useHoveredElement = ({ iframeRef, getRect }) => {
-    const { hoveredElement, setHoveredElement, setSelectedElement } = useHeatmapInteraction();
+    const { hoveredElement, setHoveredElement, setSelectedElement } = useHeatmapClick();
     const { widthScale } = useHeatmapViz();
     const { dataInfo } = useHeatmapData();
     const reset = useCallback(() => {
@@ -2250,8 +2958,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)
@@ -3452,19 +4159,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 +4166,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 +4204,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 +4229,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 +4253,350 @@ 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)
+/**
+ * Controls for area click feature - toggle edit mode, clear areas, etc.
+ */
+const AreaControls = ({ className, style }) => {
+    const { isEditingMode, setIsEditingMode, areas, clearAreas } = useHeatmapAreaClick();
+    return (jsxs("div", { className: className, style: {
+            display: 'flex',
+            gap: '8px',
+            alignItems: 'center',
+            ...style,
+        }, children: [jsx("button", { onClick: () => setIsEditingMode(!isEditingMode), style: {
+                    padding: '8px 16px',
+                    borderRadius: '4px',
+                    border: '1px solid #ccc',
+                    backgroundColor: isEditingMode ? '#0078D4' : 'white',
+                    color: isEditingMode ? 'white' : '#161514',
+                    cursor: 'pointer',
+                    fontWeight: 500,
+                    transition: 'all 0.2s',
+                }, children: isEditingMode ? 'Exit Edit Mode' : 'Edit Areas' }), areas.length > 0 && (jsxs(Fragment, { children: [jsxs("span", { style: { color: '#605E5C', fontSize: '14px' }, children: [areas.length, " area", areas.length !== 1 ? 's' : ''] }), jsx("button", { onClick: () => {
+                            if (confirm(`Clear all ${areas.length} areas?`)) {
+                                clearAreas();
+                            }
+                        }, style: {
+                            padding: '8px 16px',
+                            borderRadius: '4px',
+                            border: '1px solid #ccc',
+                            backgroundColor: 'white',
+                            color: '#A4262C',
+                            cursor: 'pointer',
+                            fontWeight: 500,
+                            transition: 'all 0.2s',
+                        }, children: "Clear All" })] }))] }));
+};
+AreaControls.displayName = 'AreaControls';
+
+const AreaEditHighlight = ({ element, shadowRoot, onClick, }) => {
+    const [rect, setRect] = useState(null);
+    const highlightRef = useRef(null);
+    useEffect(() => {
+        if (!element) {
+            setRect(null);
             return;
-        try {
-            vizRef?.clearmap?.();
-            vizRef?.clickmap?.(clickmap);
         }
-        catch (error) {
-            console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
+        // Calculate element position
+        const elementRect = getElementRect(element);
+        setRect(elementRect);
+    }, [element, shadowRoot]);
+    if (!rect) {
+        return null;
+    }
+    const handleClick = (e) => {
+        if (element && onClick) {
+            e.stopPropagation();
+            e.preventDefault();
+            onClick(element);
         }
-    }, [vizRef, clickmap]);
-    return { start };
+    };
+    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 useScrollmap = () => {
-    const { vizRef } = useHeatmapViz();
-    const { scrollmap } = useHeatmapData();
-    const start = useCallback(() => {
-        // if (isInitialized) return;
-        if (!vizRef || !scrollmap || scrollmap.length === 0)
+const AreaLabel = ({ clickDist, totalClicks, kind }) => {
+    if (kind === 'money') {
+        return null;
+    }
+    return (jsxs("div", { style: {
+            color: '#161514',
+            backgroundColor: 'rgba(255, 255, 255, 0.86)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: '8px',
+            borderRadius: '4px',
+            fontSize: '16px',
+            lineHeight: '20px',
+            minWidth: '56px',
+            fontWeight: 600,
+            fontFamily: '"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
+            pointerEvents: 'none',
+        }, children: [jsxs("span", { children: [clickDist.toFixed(2), "%"] }), jsxs("span", { style: { fontSize: '12px', fontWeight: 400, opacity: 0.8 }, children: [totalClicks, " clicks"] })] }));
+};
+AreaLabel.displayName = 'AreaLabel';
+
+const AreaOverlay = ({ area, onClick, onMouseEnter, onMouseLeave, isSelected, isHovered, }) => {
+    const [rect, setRect] = useState(area.rect.value);
+    useEffect(() => {
+        const handleRectChange = (newRect) => {
+            if (newRect) {
+                setRect(newRect);
+            }
+        };
+        area.rect.observe(handleRectChange);
+        return () => {
+            area.rect.unobserve(handleRectChange);
+        };
+    }, [area.rect]);
+    if (!rect)
+        return null;
+    const position = area.isFixed ? 'fixed' : 'absolute';
+    const showLabel = !isRectTooSmallForLabel(rect);
+    const backgroundColor = isHovered ? area.hoverColor : area.color;
+    const boxShadow = isSelected
+        ? '0 0 0 3px #0078d4 inset'
+        : isHovered
+            ? AREA_HOVER_BOX_SHADOW
+            : '0 0 0 2px white inset';
+    return (jsx("div", { id: `area-${area.id}`, "data-area-id": area.id, [AREA_MAP_DIV_ATTRIBUTE]: '1', onClick: () => onClick?.(area), onMouseEnter: () => onMouseEnter?.(area), onMouseLeave: () => onMouseLeave?.(area), style: {
+            position,
+            top: `${rect.top}px`,
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+            backgroundColor,
+            boxShadow,
+            boxSizing: 'border-box',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: 'pointer',
+            transition: 'background-color 0.2s, box-shadow 0.2s',
+            pointerEvents: 'auto',
+        }, children: showLabel && (jsx(AreaLabel, { clickDist: area.clickDist, totalClicks: area.totalclicks, kind: area.kind })) }));
+};
+
+function useAreaRenderer(options) {
+    const { iframeRef, shadowRoot: customShadowRoot, onAreaCreated, onAreaClick } = options;
+    const iframeDocument = iframeRef.current?.contentDocument;
+    // Get heatmap data for building areas
+    const { dataInfo } = useHeatmapData();
+    const { areas, selectedArea, hoveredArea, isEditingMode, setSelectedArea, setHoveredArea, addArea, } = useHeatmapAreaClick();
+    const [shadowContainer, setShadowContainer] = useState(null);
+    const [isReady, setIsReady] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!iframeDocument) {
+            setIsReady(false);
+            return;
+        }
+        let container = iframeDocument.querySelector(`[${AREA_MAP_DIV_ATTRIBUTE}]`);
+        if (!container) {
+            container = iframeDocument.createElement('div');
+            container.setAttribute(AREA_MAP_DIV_ATTRIBUTE, 'true');
+            container.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 999999;
+      `;
+            // Append to custom shadow root or body
+            const targetRoot = customShadowRoot || iframeDocument.body;
+            if (targetRoot) {
+                targetRoot.appendChild(container);
+            }
+        }
+        // Create shadow root if needed
+        let shadowRoot;
+        if (!container.shadowRoot) {
+            shadowRoot = getOrCreateShadowRoot(container);
+        }
+        else {
+            shadowRoot = container.shadowRoot;
+        }
+        // Create inner container for React portal
+        let innerContainer = shadowRoot.querySelector('.heatmap-area-container');
+        if (!innerContainer) {
+            innerContainer = iframeDocument.createElement('div');
+            innerContainer.className = 'heatmap-area-container';
+            innerContainer.style.cssText = `
+        position: relative;
+        width: 100%;
+        height: 100%;
+      `;
+            shadowRoot.appendChild(innerContainer);
+        }
+        containerRef.current = innerContainer;
+        setShadowContainer(innerContainer);
+        setIsReady(true);
+        return () => {
+            if (container && container.parentNode) {
+                container.parentNode.removeChild(container);
+            }
+            containerRef.current = null;
+            setShadowContainer(null);
+            setIsReady(false);
+        };
+    }, [iframeDocument, customShadowRoot]);
+    const handleCreateAreaFromElement = useCallback((element) => {
+        if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks) {
+            console.warn('[useAreaRenderer] Cannot create area: missing heatmap data');
+            return;
+        }
+        const hash = getElementHash(element);
+        if (!hash) {
+            console.warn('[useAreaRenderer] Cannot create area: missing hash');
+            return;
+        }
+        const alreadyExists = areas.some((area) => area.hash === hash);
+        if (alreadyExists) {
+            console.warn(`[useAreaRenderer] Area already exists for element: ${hash}`);
             return;
+        }
         try {
-            vizRef?.clearmap?.();
-            vizRef?.scrollmap?.(scrollmap);
-            // setIsInitialized(true);
+            const area = buildAreaNode(element, hash, dataInfo.elementMapInfo, dataInfo.totalClicks, customShadowRoot);
+            addArea(area);
+            if (onAreaCreated) {
+                onAreaCreated(area);
+            }
+            console.log('[useAreaRenderer] Area created:', {
+                hash,
+                selector: area.selector,
+                clicks: area.totalclicks,
+                clickDist: area.clickDist,
+            });
         }
         catch (error) {
-            console.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+            console.error('[useAreaRenderer] Failed to create area:', error);
         }
-    }, [vizRef, scrollmap]);
-    return { start };
-};
-
-const useHeatmapCanvas = () => {
-    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const { start: startClickmap } = useClickmap();
-    const { start: startScrollmap } = useScrollmap();
-    useEffect(() => {
-        switch (heatmapType) {
-            case IHeatmapType.Click:
-                startClickmap();
-                break;
-            case IHeatmapType.Scroll:
-                startScrollmap();
-                break;
+    }, [dataInfo, areas, customShadowRoot, addArea]);
+    const { hoveredElement } = useAreaEditMode({
+        iframeRef,
+        enabled: isEditingMode,
+        onCreateArea: handleCreateAreaFromElement,
+    });
+    useAreaScrollSync({
+        areas,
+        iframeRef,
+        enabled: isReady,
+    });
+    const handleAreaClick = (area) => {
+        if (isEditingMode)
+            return;
+        setSelectedArea(selectedArea?.id === area.id ? null : area);
+        if (onAreaClick) {
+            onAreaClick(area);
         }
-    }, [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);
+    };
+    const handleAreaMouseEnter = (area) => {
+        if (isEditingMode)
+            return;
+        setHoveredArea(area);
+    };
+    const handleAreaMouseLeave = (area) => {
+        if (isEditingMode)
+            return;
+        if (hoveredArea?.id === area.id) {
+            setHoveredArea(null);
+        }
+    };
+    const areasPortal = shadowContainer && isReady
+        ? createPortal(jsx(Fragment, { children: areas.map((area) => (jsx(AreaOverlay, { area: area, onClick: handleAreaClick, onMouseEnter: handleAreaMouseEnter, onMouseLeave: handleAreaMouseLeave, isSelected: selectedArea?.id === area.id, isHovered: hoveredArea?.id === area.id }, area.id))) }), shadowContainer)
+        : null;
+    const editHighlightPortal = shadowContainer && isReady && isEditingMode && hoveredElement
+        ? createPortal(jsx(AreaEditHighlight, { element: hoveredElement, shadowRoot: customShadowRoot, onClick: handleCreateAreaFromElement }), shadowContainer)
+        : null;
+    return {
+        areasPortal: areasPortal,
+        editHighlightPortal: editHighlightPortal,
+        shadowContainer,
+        isReady,
+    };
+}
+
+const VizAreaClick = ({ iframeRef, shadowRoot, autoCreateTopN = 10, enableOverlapResolution = true, renderControls, onAreaClick, }) => {
+    const iframeDocument = iframeRef.current?.contentDocument;
+    const { dataInfo } = useHeatmapData();
+    const { areas, isEditingMode, setIsEditingMode, addArea, clearAreas, setAreas } = useHeatmapAreaClick();
+    const { areasPortal, editHighlightPortal, isReady } = useAreaRenderer({
+        iframeRef,
+        shadowRoot,
+        onAreaClick,
+    });
+    // Auto-create areas from top elements
+    useEffect(() => {
+        if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks)
+            return;
+        if (autoCreateTopN <= 0)
+            return;
+        if (areas.length > 0)
+            return; // Already have areas
+        // Get top elements by clicks
+        const topElements = getTopElementsByClicks(dataInfo.elementMapInfo, autoCreateTopN);
+        // Build area nodes
+        const newAreas = [];
+        topElements.forEach(({ hash, selector }) => {
+            // Find element in DOM
+            const element = iframeDocument?.querySelector(selector);
+            if (!element || !(element instanceof HTMLElement))
+                return;
+            const area = buildAreaNode(element, hash, dataInfo.elementMapInfo, dataInfo.totalClicks);
+            newAreas.push(area);
+        });
+        // Add all areas
+        newAreas.forEach((area) => addArea(area));
+    }, [dataInfo, autoCreateTopN, areas.length, iframeDocument, shadowRoot]);
+    // Apply overlap resolution
+    const visibleAreas = useMemo(() => {
+        if (!enableOverlapResolution)
+            return areas;
+        if (!iframeDocument)
+            return areas;
+        return getVisibleAreas(areas, iframeDocument);
+    }, [areas, iframeDocument]);
+    // Update visible areas in store when resolution changes
+    useEffect(() => {
+        if (enableOverlapResolution && visibleAreas.length !== areas.length) {
+            setAreas(visibleAreas);
+        }
+    }, [visibleAreas, areas.length]);
+    const handleToggleEdit = useCallback(() => {
+        setIsEditingMode(!isEditingMode);
+    }, [isEditingMode]);
+    const handleClearAll = useCallback(() => {
+        if (window.confirm(`Clear all ${areas.length} areas?`)) {
+            clearAreas();
+        }
+    }, [areas.length]);
+    const controlsElement = renderControls ? (renderControls({
+        isEditingMode,
+        areasCount: areas.length,
+        onToggleEdit: handleToggleEdit,
+        onClearAll: handleClearAll,
+    })) : (jsx(AreaControls, {}));
+    if (!isReady)
+        return null;
+    return (jsxs(Fragment, { children: [areasPortal, editHighlightPortal, controlsElement] }));
 };
+VizAreaClick.displayName = 'VizAreaClick';
 
 const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
     const style = calculateRankPosition(elementRect, widthScale);
@@ -3661,7 +4626,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);
@@ -3745,7 +4710,7 @@ const ELEMENT_CALLOUT = {
     alignment: 'left',
 };
 const HeatmapElements = (props) => {
-    const viewId = useViewId();
+    const viewId = useViewIdContext();
     const { iframeHeight } = useHeatmapViz();
     const clickedElementId = getClickedElementId(viewId, props.isSecondary);
     const hoveredElementId = getHoveredElementId(viewId, props.isSecondary);
@@ -3794,121 +4759,9 @@ const VizElements = ({ iframeRef, visualRef, 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 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 +4917,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);
@@ -4122,7 +5087,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
     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 { scaledHeight, handleScroll } = useHeatmapScale({
@@ -4145,7 +5110,9 @@ 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: [heatmapType === IHeatmapType.Click && (jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef })), heatmapType === IHeatmapType.ClickArea && (jsx(VizAreaClick, { iframeRef: iframeRef, onAreaClick: (area) => {
+                    console.log('area clicked', area);
+                } })), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, scrolling: "no" }), jsx(VizScrollMap, { iframeRef: iframeRef, wrapperRef: visualRef })] }));
 };
 
 const VizLoading = () => {
@@ -4163,6 +5130,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 +5164,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 +5181,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 +5208,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 +5221,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 +5231,4 @@ 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 };
+export { DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, sendPerformanceReport, trackStoreAction, useAreaEditMode, useAreaScrollSync, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapLiveStore, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHeatmapVizRender, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };