@gemx-dev/heatmap-react 3.5.48 → 3.5.50

package/dist/esm/index.mjs

@@ -1,8 +1,9 @@
 "use client"
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
-import { useEffect, useCallback, useState, useRef, useMemo, forwardRef, Fragment as Fragment$1 } from 'react';
+import { useEffect, createContext, useContext, useMemo, useCallback, useState, useRef, forwardRef, Fragment as Fragment$1 } from 'react';
 import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
 import { decode } from '@gemx-dev/clarity-decode';
 import { Visualizer } from '@gemx-dev/clarity-visualize';
 import { createPortal } from 'react-dom';
@@ -67,15 +68,50 @@ const HEATMAP_STYLE = {
 };
 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 Z_INDEX = {
+    ELEMENTS: 1000,
+    CALLOUT: 2000,
+    MINIMAP: 3000,
+    SIDEBAR: 4000,
+    SIDEBAR_POPOVER: 4001,
+};
+
 const useHeatmapControlStore = create()((set, get) => {
     return {
         controls: {
-            Sidebar: null,
-            TopBar: null,
+            Sidebar: undefined,
+            SidebarActivator: undefined,
             Toolbar: null,
             MetricBar: null,
             VizLoading: null,
-            ElementCallout: null,
+            TopBar: undefined,
+            ElementCallout: undefined,
         },
         registerControl: (key, control) => {
             set({
@@ -114,9 +150,10 @@ const useHeatmapConfigStore = create()((set, get) => {
         mode: 'single',
         width: 1440,
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
-        heatmapType: IHeatmapType.Scroll,
+        heatmapType: IHeatmapType.Click,
         clickType: IClickType.Total,
         scrollType: IScrollType.Depth,
+        isRendering: true,
         setMode: (mode) => set({ mode }),
         resetMode: () => set({ mode: 'single' }),
         setWidth: (width) => set({ width }),
@@ -124,70 +161,236 @@ const useHeatmapConfigStore = create()((set, get) => {
         setHeatmapType: (heatmapType) => set({ heatmapType }),
         setClickType: (clickType) => set({ clickType }),
         setScrollType: (scrollType) => set({ scrollType }),
+        setIsRendering: (isRendering) => set({ isRendering }),
     };
 });
 
-const useHeatmapDataStore = create()((set, get) => {
+const useHeatmapDataStore = create()(subscribeWithSelector((set, get) => {
     return {
-        data: undefined,
-        clickmap: undefined,
-        dataInfo: undefined,
-        scrollmap: undefined,
-        isRendering: true,
-        setIsRendering: (isRendering) => set({ isRendering }),
-        setDataInfo: (dataInfo) => set({ dataInfo }),
-        setData: (data) => set({ data }),
-        setClickmap: (clickmap) => set({ clickmap }),
-        setScrollmap: (scrollmap) => set({ scrollmap }),
+        data: { [DEFAULT_VIEW_ID]: undefined },
+        clickmap: { [DEFAULT_VIEW_ID]: undefined },
+        dataInfo: { [DEFAULT_VIEW_ID]: undefined },
+        scrollmap: { [DEFAULT_VIEW_ID]: undefined },
+        setDataInfo: (dataInfo, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            dataInfo: { ...state.dataInfo, [viewId]: dataInfo },
+        })),
+        setData: (data, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            data: { ...state.data, [viewId]: data },
+        })),
+        setClickmap: (clickmap, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            clickmap: { ...state.clickmap, [viewId]: clickmap },
+        })),
+        setScrollmap: (scrollmap, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            scrollmap: { ...state.scrollmap, [viewId]: scrollmap },
+        })),
+        copyView: (fromViewId, toViewId) => set((state) => ({
+            data: { ...state.data, [toViewId]: state.data[fromViewId] },
+            clickmap: { ...state.clickmap, [toViewId]: state.clickmap[fromViewId] },
+            dataInfo: { ...state.dataInfo, [toViewId]: state.dataInfo[fromViewId] },
+            scrollmap: { ...state.scrollmap, [toViewId]: state.scrollmap[fromViewId] },
+        })),
+        clearView: (viewId) => set((state) => {
+            const newData = { ...state.data };
+            const newClickmap = { ...state.clickmap };
+            const newDataInfo = { ...state.dataInfo };
+            const newScrollmap = { ...state.scrollmap };
+            delete newData[viewId];
+            delete newClickmap[viewId];
+            delete newDataInfo[viewId];
+            delete newScrollmap[viewId];
+            return {
+                data: newData,
+                clickmap: newClickmap,
+                dataInfo: newDataInfo,
+                scrollmap: newScrollmap,
+            };
+        }),
+        resetAll: () => set({
+            data: { [DEFAULT_VIEW_ID]: undefined },
+            clickmap: { [DEFAULT_VIEW_ID]: undefined },
+            dataInfo: { [DEFAULT_VIEW_ID]: undefined },
+            scrollmap: { [DEFAULT_VIEW_ID]: undefined },
+        }),
     };
-});
+}));
 
-const useHeatmapInteractionStore = create()((set, get) => {
+const DEFAULT_STATE = {
+    hideSidebar: false,
+};
+const useHeatmapInteractionStore = create()(subscribeWithSelector((set, get) => {
     return {
-        state: {
-            hideSidebar: false,
-        },
-        setState: (state) => set({ state }),
-        selectedElement: null,
-        setSelectedElement: (selectedElement) => set({ selectedElement }),
-        hoveredElement: null,
-        setHoveredElement: (hoveredElement) => set({ hoveredElement }),
-        shouldShowCallout: false,
-        setShouldShowCallout: (shouldShowCallout) => set({ shouldShowCallout }),
+        state: { [DEFAULT_VIEW_ID]: DEFAULT_STATE },
+        selectedElement: { [DEFAULT_VIEW_ID]: null },
+        hoveredElement: { [DEFAULT_VIEW_ID]: null },
+        shouldShowCallout: { [DEFAULT_VIEW_ID]: false },
+        setState: (state, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            state: { ...prev.state, [viewId]: state },
+        })),
+        setSelectedElement: (selectedElement, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            selectedElement: { ...prev.selectedElement, [viewId]: selectedElement },
+        })),
+        setHoveredElement: (hoveredElement, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            hoveredElement: { ...prev.hoveredElement, [viewId]: hoveredElement },
+        })),
+        setShouldShowCallout: (shouldShowCallout, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            shouldShowCallout: { ...prev.shouldShowCallout, [viewId]: shouldShowCallout },
+        })),
+        copyView: (fromViewId, toViewId) => set((state) => ({
+            state: {
+                ...state.state,
+                [toViewId]: state.state[fromViewId] ?? DEFAULT_STATE,
+            },
+            selectedElement: {
+                ...state.selectedElement,
+                [toViewId]: state.selectedElement[fromViewId] ?? null,
+            },
+            hoveredElement: {
+                ...state.hoveredElement,
+                [toViewId]: state.hoveredElement[fromViewId] ?? null,
+            },
+            shouldShowCallout: {
+                ...state.shouldShowCallout,
+                [toViewId]: state.shouldShowCallout[fromViewId] ?? false,
+            },
+        })),
+        clearView: (viewId) => set((state) => {
+            const newState = { ...state.state };
+            const newSelectedElement = { ...state.selectedElement };
+            const newHoveredElement = { ...state.hoveredElement };
+            const newShouldShowCallout = { ...state.shouldShowCallout };
+            delete newState[viewId];
+            delete newSelectedElement[viewId];
+            delete newHoveredElement[viewId];
+            delete newShouldShowCallout[viewId];
+            return {
+                state: newState,
+                selectedElement: newSelectedElement,
+                hoveredElement: newHoveredElement,
+                shouldShowCallout: newShouldShowCallout,
+            };
+        }),
+        resetAll: () => set({
+            state: { default: DEFAULT_STATE },
+            selectedElement: { default: null },
+            hoveredElement: { default: null },
+            shouldShowCallout: { default: false },
+        }),
     };
-});
+}));
 
-const useHeatmapVizStore = create()((set, get) => {
+const useHeatmapVizStore = create()(subscribeWithSelector((set, get) => {
     return {
-        isRenderViz: false,
-        setIsRenderViz: (isRenderViz) => set({ isRenderViz }),
-        zoomRatio: 100,
-        minZoomRatio: 10,
-        setMinZoomRatio: (minZoomRatio) => set({ minZoomRatio }),
-        setZoomRatio: (zoomRatio) => set({ zoomRatio }),
-        scale: 1,
-        setScale: (scale) => set({ scale }),
-        isScaledToFit: false,
-        setIsScaledToFit: (isScaledToFit) => set({ isScaledToFit }),
+        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()((set, get) => {
+const useHeatmapVizScrollmapStore = create()(subscribeWithSelector((set, get) => {
     return {
-        zones: [],
-        hoveredZone: null,
-        showMinimap: true,
-        setZones: (zones) => set({ zones }),
-        setHoveredZone: (hoveredZone) => set({ hoveredZone }),
-        setShowMinimap: (showMinimap) => set({ showMinimap }),
+        zones: { [DEFAULT_VIEW_ID]: [] },
+        hoveredZone: { [DEFAULT_VIEW_ID]: null },
+        showMinimap: { [DEFAULT_VIEW_ID]: true },
+        setZones: (zones, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            zones: { ...prev.zones, [viewId]: zones },
+        })),
+        setHoveredZone: (hoveredZone, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            hoveredZone: { ...prev.hoveredZone, [viewId]: hoveredZone },
+        })),
+        setShowMinimap: (showMinimap, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            showMinimap: { ...prev.showMinimap, [viewId]: showMinimap },
+        })),
+        copyView: (fromViewId, toViewId) => set((state) => ({
+            zones: {
+                ...state.zones,
+                [toViewId]: state.zones[fromViewId] ?? [],
+            },
+            hoveredZone: {
+                ...state.hoveredZone,
+                [toViewId]: state.hoveredZone[fromViewId] ?? null,
+            },
+            showMinimap: {
+                ...state.showMinimap,
+                [toViewId]: state.showMinimap[fromViewId] ?? true,
+            },
+        })),
+        clearView: (viewId) => set((state) => {
+            const newZones = { ...state.zones };
+            const newHoveredZone = { ...state.hoveredZone };
+            const newShowMinimap = { ...state.showMinimap };
+            delete newZones[viewId];
+            delete newHoveredZone[viewId];
+            delete newShowMinimap[viewId];
+            return {
+                zones: newZones,
+                hoveredZone: newHoveredZone,
+                showMinimap: newShowMinimap,
+            };
+        }),
+        resetAll: () => set({
+            zones: { default: [] },
+            hoveredZone: { default: null },
+            showMinimap: { default: true },
+        }),
     };
-});
+}));
 
 const initialState = {
     payloads: [],
     htmlContent: '',
-    wrapperHeight: 0,
-    iframeHeight: 0,
 };
 const useHeatmapLiveStore = create()((set, get) => {
     return {
@@ -196,17 +399,191 @@ const useHeatmapLiveStore = create()((set, get) => {
         setPayloads: (payloads) => set({ payloads }),
         addPayload: (payload) => set((state) => ({ payloads: [...state.payloads, payload] })),
         setHtmlContent: (htmlContent) => set({ htmlContent }),
-        setWrapperHeight: (wrapperHeight) => set({ wrapperHeight }),
-        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
     };
 });
 
-const useHeatmapSingleStore = create()((set, get) => {
+const useHeatmapSingleStore = create()(subscribeWithSelector((set, get) => {
     return {
-        vizRef: null,
-        iframeHeight: 0,
-        setVizRef: (vizRef) => set({ vizRef }),
-        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
+        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) => ({
+    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 {
+        views: new Map(),
+        viewOrder: [],
+        layout: 'grid-2',
+        syncSettings: {
+            zoomRatio: false,
+            scrolling: false,
+            heatmapType: false,
+        },
+        viewIdCounter: 0,
+        addView: (options) => {
+            const state = get();
+            const viewId = `view-${state.viewIdCounter}`;
+            const label = options?.label ?? `Version ${state.viewOrder.length + 1}`;
+            const newView = createDefaultView(viewId, label, options);
+            const newViews = new Map(state.views);
+            newViews.set(viewId, newView);
+            set({
+                views: newViews,
+                viewOrder: [...state.viewOrder, viewId],
+                viewIdCounter: state.viewIdCounter + 1,
+            });
+            return viewId;
+        },
+        removeView: (viewId) => {
+            const state = get();
+            const newViews = new Map(state.views);
+            newViews.delete(viewId);
+            set({
+                views: newViews,
+                viewOrder: state.viewOrder.filter((id) => id !== viewId),
+            });
+        },
+        updateView: (viewId, updates) => {
+            const state = get();
+            const view = state.views.get(viewId);
+            if (!view)
+                return;
+            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);
+        },
+        setLayout: (layout) => {
+            set({ layout });
+        },
+        setSyncSettings: (settings) => {
+            set({ syncSettings: { ...get().syncSettings, ...settings } });
+        },
+        initializeCompare: (count, options) => {
+            const viewIds = [];
+            const newViews = new Map();
+            for (let i = 0; i < count; i++) {
+                const viewId = `view-${i}`;
+                const label = options?.label ?? String.fromCharCode(65 + i); // A, B, C, D
+                newViews.set(viewId, createDefaultView(viewId, `Version ${label}`, options));
+                viewIds.push(viewId);
+            }
+            const layoutMap = {
+                2: 'grid-2',
+                3: 'grid-3',
+                4: 'grid-4',
+            };
+            set({
+                views: newViews,
+                viewOrder: viewIds,
+                layout: layoutMap[count],
+                viewIdCounter: count,
+            });
+        },
+        resetCompare: () => {
+            set({
+                views: new Map(),
+                viewOrder: [],
+                layout: 'grid-2',
+                viewIdCounter: 0,
+                syncSettings: {
+                    zoomRatio: false,
+                    scrolling: false,
+                    heatmapType: false,
+                },
+            });
+        },
+        syncProperty: (property, value) => {
+            const state = get();
+            const newViews = new Map(state.views);
+            state.viewOrder.forEach((viewId) => {
+                const view = newViews.get(viewId);
+                if (view) {
+                    newViews.set(viewId, { ...view, [property]: value });
+                }
+            });
+            set({ views: newViews });
+        },
     };
 });
 
@@ -215,7 +592,7 @@ const useRegisterConfig = () => {
     const width = useHeatmapConfigStore((state) => state.width);
     const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const setIsRendering = useHeatmapDataStore((state) => state.setIsRendering);
+    const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
     useEffect(() => {
         setIsRendering(true);
         setTimeout(() => {
@@ -227,6 +604,7 @@ const useRegisterConfig = () => {
 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);
@@ -234,10 +612,228 @@ const useRegisterControl = (control) => {
     registerControl('ElementCallout', control.ElementCallout);
 };
 
-const useRegisterData = (data, dataInfo) => {
+/**
+ * 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 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 useHeatmapData = (props) => {
+    const viewId = props?.viewId || useViewId();
+    const data = useHeatmapDataStore((state) => state.data[viewId]);
+    const clickmap = useHeatmapDataStore((state) => state.clickmap[viewId]);
+    const scrollmap = useHeatmapDataStore((state) => state.scrollmap[viewId]);
+    const dataInfo = useHeatmapDataStore((state) => state.dataInfo[viewId]);
     const setData = useHeatmapDataStore((state) => state.setData);
-    const setIsRendering = useHeatmapDataStore((state) => state.setIsRendering);
+    const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
+    const setScrollmap = useHeatmapDataStore((state) => state.setScrollmap);
     const setDataInfo = useHeatmapDataStore((state) => state.setDataInfo);
+    const memoizedSetters = useMemo(() => ({
+        setData: (newData) => setData(newData, viewId),
+        setClickmap: (newClickmap) => setClickmap(newClickmap, viewId),
+        setScrollmap: (newScrollmap) => setScrollmap(newScrollmap, viewId),
+        setDataInfo: (newDataInfo) => setDataInfo(newDataInfo, viewId),
+    }), [setData, setClickmap, setScrollmap, setDataInfo, viewId]);
+    return {
+        data,
+        clickmap,
+        scrollmap,
+        dataInfo,
+        // Setters (auto-inject viewId)
+        ...memoizedSetters,
+    };
+};
+
+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 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 useHeatmapViz = (props) => {
+    const viewId = props?.viewId || useViewId();
+    // Viz store
+    const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz[viewId] ?? false);
+    const zoomRatio = useHeatmapVizStore((state) => state.zoomRatio[viewId] ?? 100);
+    const minZoomRatio = useHeatmapVizStore((state) => state.minZoomRatio[viewId] ?? 10);
+    const widthScale = useHeatmapVizStore((state) => state.scale[viewId] ?? 1);
+    const isScaledToFit = useHeatmapVizStore((state) => state.isScaledToFit[viewId] ?? false);
+    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
+    const setZoomRatio = useHeatmapVizStore((state) => state.setZoomRatio);
+    const setMinZoomRatio = useHeatmapVizStore((state) => state.setMinZoomRatio);
+    const setScale = useHeatmapVizStore((state) => state.setScale);
+    const setIsScaledToFit = useHeatmapVizStore((state) => state.setIsScaledToFit);
+    // Single store
+    const vizRef = useHeatmapSingleStore((state) => state.vizRef[viewId] ?? null);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight[viewId] ?? 0);
+    const wrapperHeight = useHeatmapSingleStore((state) => state.wrapperHeight[viewId] ?? 0);
+    const wrapperWidth = useHeatmapSingleStore((state) => state.wrapperWidth[viewId] ?? 0);
+    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
+    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
+    const setWrapperHeight = useHeatmapSingleStore((state) => state.setWrapperHeight);
+    const setWrapperWidth = useHeatmapSingleStore((state) => state.setWrapperWidth);
+    const memoizedSetters = useMemo(() => ({
+        setIsRenderViz: (value) => setIsRenderViz(value, viewId),
+        setZoomRatio: (value) => setZoomRatio(value, viewId),
+        setMinZoomRatio: (value) => setMinZoomRatio(value, viewId),
+        setScale: (value) => setScale(value, viewId),
+        setIsScaledToFit: (value) => setIsScaledToFit(value, viewId),
+        setVizRef: (value) => setVizRef(value, viewId),
+        setIframeHeight: (value) => setIframeHeight(value, viewId),
+        setWrapperHeight: (value) => setWrapperHeight(value, viewId),
+        setWrapperWidth: (value) => setWrapperWidth(value, viewId),
+    }), [
+        setIsRenderViz,
+        setZoomRatio,
+        setMinZoomRatio,
+        setScale,
+        setIsScaledToFit,
+        setVizRef,
+        setIframeHeight,
+        setWrapperHeight,
+        setWrapperWidth,
+        viewId,
+    ]);
+    return {
+        isRenderViz,
+        zoomRatio,
+        minZoomRatio,
+        widthScale,
+        isScaledToFit,
+        vizRef,
+        iframeHeight,
+        wrapperHeight,
+        wrapperWidth,
+        // Setters (auto-inject viewId)
+        ...memoizedSetters,
+    };
+};
+
+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
+ */
+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 copyVizScrollmapView = useHeatmapVizScrollmapStore((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 clearVizScrollmapView = useHeatmapVizScrollmapStore((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 resetVizScrollmapAll = useHeatmapVizScrollmapStore((state) => state.resetAll);
+    const copyView = (fromViewId, toViewId) => {
+        copyDataView(fromViewId, toViewId);
+        copyVizView(fromViewId, toViewId);
+        copySingleView(fromViewId, toViewId);
+        copyInteractionView(fromViewId, toViewId);
+        copyVizScrollmapView(fromViewId, toViewId);
+    };
+    const copyViewToMultiple = (fromViewId, toViewIds) => {
+        toViewIds.forEach((toViewId) => {
+            copyView(fromViewId, toViewId);
+        });
+    };
+    const clearView = (viewId) => {
+        clearDataView(viewId);
+        clearVizView(viewId);
+        clearSingleView(viewId);
+        clearInteractionView(viewId);
+        clearVizScrollmapView(viewId);
+    };
+    const clearMultipleViews = (viewIds) => {
+        viewIds.forEach((viewId) => {
+            clearView(viewId);
+        });
+    };
+    const resetAll = () => {
+        resetDataAll();
+        resetVizAll();
+        resetSingleAll();
+        resetInteractionAll();
+        resetVizScrollmapAll();
+    };
+    return {
+        copyView,
+        copyViewToMultiple,
+        clearView,
+        clearMultipleViews,
+        resetAll,
+    };
+};
+
+const useRegisterData = (data, dataInfo) => {
+    const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
+    const { setData, setDataInfo } = useHeatmapData();
     const handleSetData = useCallback((data) => {
         if (!data)
             return;
@@ -258,8 +854,7 @@ const useRegisterData = (data, dataInfo) => {
 };
 
 const useRegisterHeatmap = ({ clickmap, scrollmap }) => {
-    const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
-    const setScrollmap = useHeatmapDataStore((state) => state.setScrollmap);
+    const { setClickmap, setScrollmap } = useHeatmapData();
     const handleSetClickmap = useCallback((clickmap) => {
         if (!clickmap)
             return;
@@ -493,33 +1088,29 @@ const buildElementInfo = (hash, rect, heatmapInfo) => {
 };
 
 function findLastSizeOfDom(data) {
-    const firstDoc = data.find((item) => item.envelope.sequence === 1)?.doc;
-    const docSorted = firstDoc?.sort(sort);
-    const firstEvent = docSorted?.[0];
+    const listDocs = data
+        .filter((item) => item.doc?.find((doc) => doc.data.width && doc.data.height))
+        .flatMap((item) => item.doc?.flatMap((doc) => doc.data));
+    const lastDoc = listDocs?.[listDocs.length - 1];
     const docSize = {
-        width: firstEvent?.data.width,
-        height: firstEvent?.data.height,
+        width: lastDoc?.width,
+        height: lastDoc?.height,
     };
-    const newData = JSON.parse(JSON.stringify(data));
-    const reversedData = newData.reverse();
-    const lastResizeEvent = reversedData.find((item) => !!item.resize);
-    const firstEventResize = lastResizeEvent?.resize?.[0];
+    const listResizes = data.filter((item) => !!item.resize).flatMap((item) => item.resize);
+    const lastResizeEvent = listResizes?.[listResizes.length - 1];
     const resize = {
-        width: firstEventResize?.data.width,
-        height: firstEventResize?.data.height,
+        width: lastResizeEvent?.data.width,
+        height: lastResizeEvent?.data.height,
     };
     return {
         doc: docSize,
         resize: resize,
         size: {
-            width: resize.width ?? docSize.width,
-            height: resize.height ?? docSize.height,
+            width: resize.width || docSize.width,
+            height: resize.height || docSize.height,
         },
     };
 }
-function sort(a, b) {
-    return a.time - b.time;
-}
 function decodePayloads(payload) {
     try {
         return decode(payload);
@@ -855,7 +1446,7 @@ class IframeStyleReplacer {
     doc;
     win;
     config;
-    regex = /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
+    regex = /([-.\d]+)(vh|svh|lvh|dvh)/gi; //vw|svw|lvw|dvw
     constructor(iframe, config) {
         if (!iframe.contentDocument || !iframe.contentWindow) {
             throw new Error('Iframe document or window not accessible');
@@ -1151,11 +1742,9 @@ const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     });
 };
 const useClickedElement = ({ visualRef, getRect }) => {
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
-    const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
-    const shouldShowCallout = useHeatmapInteractionStore((state) => state.shouldShowCallout);
-    const setShouldShowCallout = useHeatmapInteractionStore((state) => state.setShouldShowCallout);
-    const scale = useHeatmapVizStore((state) => state.scale);
+    const { selectedElement, shouldShowCallout, setShouldShowCallout } = useHeatmapInteraction();
+    const { widthScale } = useHeatmapViz();
+    const { dataInfo } = useHeatmapData();
     const [clickedElement, setClickedElement] = useState(null);
     const [showMissingElement, setShowMissingElement] = useState(false);
     const reset = () => {
@@ -1164,11 +1753,13 @@ const useClickedElement = ({ visualRef, getRect }) => {
         setShouldShowCallout(false);
     };
     useEffect(() => {
-        if (!selectedElement || !heatmapInfo?.elementMapInfo) {
+        if (selectedElement === clickedElement?.hash)
+            return;
+        if (!selectedElement || !dataInfo?.elementMapInfo) {
             reset();
             return;
         }
-        const info = heatmapInfo.elementMapInfo[selectedElement];
+        const info = dataInfo.elementMapInfo[selectedElement];
         if (!info) {
             setClickedElement(null);
             return;
@@ -1176,7 +1767,7 @@ const useClickedElement = ({ visualRef, getRect }) => {
         const hash = selectedElement;
         const selector = info.selector;
         const rect = getRect({ hash: selectedElement, selector });
-        const elementInfo = buildElementInfo(hash, rect, heatmapInfo);
+        const elementInfo = buildElementInfo(hash, rect, dataInfo);
         if (!rect) {
             setClickedElement(elementInfo);
             setShowMissingElement(true);
@@ -1184,29 +1775,28 @@ const useClickedElement = ({ visualRef, getRect }) => {
             return;
         }
         setShowMissingElement(false);
-        scrollToElementIfNeeded(visualRef, rect, scale);
+        scrollToElementIfNeeded(visualRef, rect, widthScale);
         setShouldShowCallout(true);
         requestAnimationFrame(() => {
             setClickedElement(elementInfo);
         });
-    }, [selectedElement, heatmapInfo, getRect, visualRef, scale]);
-    return { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout };
+    }, [selectedElement, dataInfo, visualRef, widthScale]);
+    return { clickedElement, showMissingElement, shouldShowCallout };
 };
 
 const useElementCalloutVisible = ({ visualRef, getRect }) => {
-    const scale = useHeatmapVizStore((state) => state.scale);
-    const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
-    const setShouldShowCallout = useHeatmapInteractionStore((state) => state.setShouldShowCallout);
+    const { selectedElement, setShouldShowCallout } = useHeatmapInteraction();
+    const { widthScale } = useHeatmapViz();
+    const { dataInfo } = useHeatmapData();
     useEffect(() => {
         if (!selectedElement)
             return;
         const elementIsInViewportFn = () => {
-            const elementInfo = heatmapInfo?.elementMapInfo?.[selectedElement];
+            const elementInfo = dataInfo?.elementMapInfo?.[selectedElement];
             if (!elementInfo)
                 return;
             const rect = getRect({ hash: selectedElement, selector: elementInfo.selector });
-            const isInViewport = isElementInViewport(rect, visualRef, scale);
+            const isInViewport = isElementInViewport(rect, visualRef, widthScale);
             setShouldShowCallout(isInViewport);
         };
         elementIsInViewportFn();
@@ -1221,32 +1811,31 @@ const useElementCalloutVisible = ({ visualRef, getRect }) => {
             window.removeEventListener('resize', handleUpdate);
             visualRef?.current?.removeEventListener('scroll', handleUpdate);
         };
-    }, [selectedElement, visualRef, getRect, scale, heatmapInfo, setShouldShowCallout]);
+    }, [selectedElement, visualRef, widthScale, dataInfo]);
     return {};
 };
 
-const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, setShouldShowCallout, resetAll, }) => {
-    const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
+const useHeatmapEffects = ({ isVisible }) => {
+    useHeatmapInteraction();
+    const resetAll = () => {
+        // setShouldShowCallout(false);
+    };
     // Reset khi ẩn
     useEffect(() => {
-        if (!isVisible)
-            resetAll();
     }, [isVisible, resetAll]);
     // Ẩn callout khi sidebar mở
-    useEffect(() => {
-        if (isElementSidebarOpen && selectedElement) {
-            setShouldShowCallout(false);
-        }
-        else if (!isElementSidebarOpen && selectedElement) {
-            setShouldShowCallout(true);
-        }
-    }, [isElementSidebarOpen, selectedElement, setShouldShowCallout]);
+    // useEffect(() => {
+    //   if (isElementSidebarOpen && selectedElement) {
+    //     setShouldShowCallout(false);
+    //   } else if (!isElementSidebarOpen && selectedElement) {
+    //     setShouldShowCallout(true);
+    //   }
+    // }, [isElementSidebarOpen, selectedElement]);
 };
 
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
-    const widthScale = useHeatmapVizStore((state) => state.scale);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
     const heatmapWidth = useHeatmapConfigStore((state) => state.width);
+    const { iframeHeight, widthScale } = useHeatmapViz();
     return useCallback((element) => {
         const hash = element?.hash;
         if (!iframeRef.current?.contentDocument || !hash || !visualizer)
@@ -1397,11 +1986,9 @@ function HeatmapComponent() {
 */
 
 const useHoveredElement = ({ iframeRef, getRect }) => {
-    const hoveredElement = useHeatmapInteractionStore((state) => state.hoveredElement);
-    const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
-    const onSelect = useHeatmapInteractionStore((state) => state.setSelectedElement);
-    const widthScale = useHeatmapVizStore((state) => state.scale);
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+    const { hoveredElement, setHoveredElement, setSelectedElement } = useHeatmapInteraction();
+    const { widthScale } = useHeatmapViz();
+    const { dataInfo } = useHeatmapData();
     const reset = useCallback(() => {
         setHoveredElement(null);
     }, [setHoveredElement]);
@@ -1409,16 +1996,24 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         reset();
     }, [reset]);
     const getHashFromEvent = useCallback((event) => {
-        if (!heatmapInfo || !isIframeReady(iframeRef, heatmapInfo)) {
+        if (!dataInfo || !isIframeReady(iframeRef, dataInfo)) {
             reset();
             return;
         }
         const iframe = iframeRef.current;
+        if (!iframe) {
+            reset();
+            return;
+        }
         const doc = iframe.contentDocument;
+        if (!doc) {
+            reset();
+            return;
+        }
         const iframeRect = iframe.getBoundingClientRect();
         const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
-        const targetElement = findTargetElement(doc, x, y, heatmapInfo);
-        if (!targetElement || !isValidElement(targetElement, heatmapInfo)) {
+        const targetElement = findTargetElement(doc, x, y, dataInfo);
+        if (!targetElement || !isValidElement(targetElement, dataInfo)) {
             reset();
             return;
         }
@@ -1427,9 +2022,9 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             return hash;
         reset();
         return;
-    }, [heatmapInfo, iframeRef, getRect, widthScale, reset]);
+    }, [dataInfo, iframeRef, getRect, widthScale, reset]);
     const handleMouseMove = useCallback(debounce((event) => {
-        if (!heatmapInfo) {
+        if (!dataInfo) {
             reset();
             return;
         }
@@ -1438,19 +2033,19 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             reset();
             return;
         }
-        const selector = heatmapInfo?.elementMapInfo?.[hash];
+        const selector = dataInfo?.elementMapInfo?.[hash];
         const rect = getRect({ hash, selector });
-        const elementInfo = buildElementInfo(hash, rect, heatmapInfo);
+        const elementInfo = buildElementInfo(hash, rect, dataInfo);
         if (!elementInfo) {
             reset();
             return;
         }
         setHoveredElement(elementInfo);
-    }, 16), [heatmapInfo, getRect, reset, getHashFromEvent]);
+    }, 16), [dataInfo, getRect, reset, getHashFromEvent]);
     const handleClick = useCallback(() => {
         if (!hoveredElement?.hash)
             return;
-        onSelect(hoveredElement.hash);
+        setSelectedElement(hoveredElement.hash);
     }, [hoveredElement?.hash]);
     return {
         hoveredElement,
@@ -1562,11 +2157,9 @@ function useVizLiveIframeMsg(options = {}) {
 }
 
 function useVizLiveRender() {
-    const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
-    const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
+    const { setIframeHeight, wrapperHeight, setIsRenderViz, wrapperWidth } = useHeatmapViz();
     const contentWidth = useHeatmapConfigStore((state) => state.width);
     const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
-    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
     const { iframeRef, isReady } = useVizLiveIframeMsg();
     useEffect(() => {
         if (!htmlContent || !iframeRef.current)
@@ -1582,17 +2175,20 @@ function useVizLiveRender() {
     useEffect(() => {
         if (!isReady)
             return;
+        if (!wrapperHeight)
+            return;
         if (!iframeRef.current)
             return;
+        console.log(`🚀 🐥 ~ useVizLiveRender ~ wrapperHeight:`, wrapperHeight);
         const iframe = iframeRef.current;
         if (!iframe || !htmlContent)
             return;
         setIsRenderViz(false);
-        reset(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
+        reset(iframe, { width: wrapperWidth, height: wrapperHeight }, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
         });
-    }, [isReady, contentWidth, wrapperHeight]);
+    }, [isReady, contentWidth, wrapperHeight, wrapperWidth]);
     return {
         iframeRef,
     };
@@ -1611,16 +2207,19 @@ function reset(iframe, rect, onSuccess) {
     fixer.enableNavigationBlocking();
 }
 
-let visualizer = new Visualizer();
 const useHeatmapRender = () => {
-    const data = useHeatmapDataStore((state) => state.data);
-    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
-    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
-    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
+    const { data } = useHeatmapData();
+    const { vizRef, setVizRef, setIsRenderViz, setIframeHeight, wrapperHeight, wrapperWidth } = useHeatmapViz();
+    console.log(`🚀 🐥 ~ useHeatmapRender ~ wrapperHeight:`, wrapperHeight);
     const iframeRef = useRef(null);
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
             return;
+        let visualizer = vizRef;
+        if (!visualizer) {
+            visualizer = new Visualizer();
+            setVizRef(visualizer);
+        }
         setIsRenderViz(false);
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
@@ -1629,7 +2228,6 @@ const useHeatmapRender = () => {
         initIframe(iframe, payloads, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
-            setVizRef(visualizer);
         });
     }, []);
     useEffect(() => {
@@ -1644,7 +2242,9 @@ const useHeatmapRender = () => {
         iframeRef,
     };
 };
-function initIframe(iframe, payloads, onSuccess) {
+function initIframe(iframe, 
+// size: { width: number; height: number },
+payloads, onSuccess) {
     const { size } = findLastSizeOfDom(payloads);
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
@@ -1671,8 +2271,8 @@ function sortEvents(a, b) {
 }
 
 const useReplayRender = () => {
-    const data = useHeatmapDataStore((state) => state.data);
     const setWidth = useHeatmapConfigStore((state) => state.setWidth);
+    const { data } = useHeatmapData();
     const visualizerRef = useRef(null);
     const iframeRef = useRef(null);
     const eventsRef = useRef([]);
@@ -1843,8 +2443,8 @@ const useContentDimensions = ({ iframeRef, }) => {
 };
 
 const useObserveIframeHeight = (props) => {
-    const { iframeRef, setIframeHeight } = props;
-    const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
+    const { iframeRef, isRenderViz } = props;
+    const { setIframeHeight } = useHeatmapViz();
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
     const debounceTimerRef = useRef(null);
@@ -1852,7 +2452,7 @@ const useObserveIframeHeight = (props) => {
     const animationFrameRef = useRef(null);
     const updateIframeHeight = useCallback(() => {
         const iframe = iframeRef.current;
-        if (!iframe || !setIframeHeight)
+        if (!iframe)
             return;
         try {
             const iframeDocument = iframe.contentDocument;
@@ -1860,7 +2460,7 @@ const useObserveIframeHeight = (props) => {
             const iframeDocumentElement = iframeDocument?.documentElement;
             if (!iframeBody || !iframeDocumentElement)
                 return;
-            iframe.style.height = 'auto';
+            // iframe.style.height = 'auto'; // TODO: check if this is needed
             requestAnimationFrame(() => {
                 const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
                 const documentHeight = Math.max(iframeDocumentElement.scrollHeight, iframeDocumentElement.offsetHeight, iframeDocumentElement.clientHeight);
@@ -1876,7 +2476,7 @@ const useObserveIframeHeight = (props) => {
         catch (error) {
             console.warn('Cannot measure iframe content:', error);
         }
-    }, [iframeRef, setIframeHeight]);
+    }, [iframeRef]);
     const debouncedUpdate = useCallback(() => {
         // Cancel pending updates
         if (debounceTimerRef.current) {
@@ -1969,13 +2569,8 @@ const useObserveIframeHeight = (props) => {
 };
 
 const useScaleCalculation = (props) => {
-    const scale = useHeatmapVizStore((state) => state.scale);
-    const zoomRatio = useHeatmapVizStore((state) => state.zoomRatio);
-    const setScale = useHeatmapVizStore((state) => state.setScale);
-    const isScaledToFit = useHeatmapVizStore((state) => state.isScaledToFit);
-    const setIsScaledToFit = useHeatmapVizStore((state) => state.setIsScaledToFit);
-    const minZoomRatio = useHeatmapVizStore((state) => state.minZoomRatio);
-    const setMinZoomRatio = useHeatmapVizStore((state) => state.setMinZoomRatio);
+    const { widthScale, zoomRatio, isScaledToFit, minZoomRatio } = useHeatmapViz();
+    const { setScale, setIsScaledToFit, setMinZoomRatio } = useHeatmapViz();
     const { containerWidth, containerHeight, contentWidth, contentHeight } = props;
     const calculateScaleResult = useCallback(() => {
         if (containerWidth > 0 && contentWidth > 0 && containerHeight > 0 && contentHeight > 0) {
@@ -1983,7 +2578,7 @@ const useScaleCalculation = (props) => {
             const availableWidth = containerWidth - HEATMAP_CONFIG['padding'] * 2;
             const widthScale = Math.min(availableWidth / contentWidth, 1);
             // 2. Calculate available height
-            const toolbarHeight = HEATMAP_CONFIG['heightToolbar'] ;
+            const toolbarHeight = HEATMAP_CONFIG['heightToolbar'] || 0;
             const paddingTotal = HEATMAP_CONFIG['padding'] * 2;
             const availableHeight = containerHeight - toolbarHeight - paddingTotal; // 10px buffer to avoid scroll bar
             // 3. Calculate minZoomRatio (zoom ratio minimum to fit iframe in container)
@@ -2015,11 +2610,10 @@ const useScaleCalculation = (props) => {
     useEffect(() => {
         calculateScaleResult();
     }, [calculateScaleResult]);
-    return { scale, isScaledToFit, minZoomRatio };
+    return { widthScale, isScaledToFit, minZoomRatio };
 };
 
-const useScrollSync = ({ iframeRef }) => {
-    const widthScale = useHeatmapVizStore((state) => state.scale);
+const useScrollSync = ({ widthScale, iframeRef, }) => {
     const handleScroll = useCallback((scrollTop) => {
         const iframe = iframeRef.current;
         if (!iframe || widthScale <= 0)
@@ -2040,24 +2634,24 @@ const useScrollSync = ({ iframeRef }) => {
 };
 
 const useHeatmapScale = (props) => {
-    const { wrapperRef, iframeRef, iframeHeight, setIframeHeight } = props;
+    const { wrapperRef, iframeRef, iframeHeight, isRenderViz } = props;
     // 1. Observe container dimensions
     const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
     // 2. Get content dimensions from config
     const { contentWidth } = useContentDimensions({ iframeRef });
     // 3. Observe iframe height (now reacts to width changes)
-    useObserveIframeHeight({ iframeRef, setIframeHeight });
+    useObserveIframeHeight({ iframeRef, isRenderViz });
     // 4. Calculate scale
-    const { scale } = useScaleCalculation({
+    const { widthScale } = useScaleCalculation({
         containerWidth,
         containerHeight,
         contentWidth,
         contentHeight: iframeHeight,
     });
     // 5. Setup scroll sync
-    const { handleScroll } = useScrollSync({ iframeRef });
-    const scaledHeight = iframeHeight * scale;
-    const scaledWidth = contentWidth * scale;
+    const { handleScroll } = useScrollSync({ widthScale, iframeRef });
+    const scaledHeight = iframeHeight * widthScale;
+    const scaledWidth = contentWidth * widthScale;
     return {
         containerWidth,
         containerHeight,
@@ -2068,27 +2662,29 @@ const useHeatmapScale = (props) => {
 };
 
 const useWrapperRefHeight = (props) => {
-    const { isActive, wrapperRef, setWrapperHeight } = props;
-    const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
+    const { isActive, wrapperRef } = props;
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
+    const { setWrapperHeight, setWrapperWidth } = useHeatmapViz();
     const updateWrapperHeight = useCallback(() => {
         const wrapper = wrapperRef.current;
         if (!wrapper)
             return;
         try {
             const wrapperHeight = wrapper.offsetHeight;
+            const wrapperWidth = wrapper.offsetWidth;
             if (wrapperHeight > 0) {
-                setWrapperHeight?.(wrapperHeight);
+                setWrapperHeight(wrapperHeight);
+                setWrapperWidth(wrapperWidth);
             }
         }
         catch (error) {
             console.warn('Cannot measure iframe content:', error);
         }
-    }, [wrapperRef, setWrapperHeight]);
+    }, [wrapperRef]);
     useEffect(() => {
         const wrapper = wrapperRef.current;
-        if (!wrapper || !isRenderViz)
+        if (!wrapper)
             return;
         const setupObservers = () => {
             try {
@@ -2118,6 +2714,7 @@ const useWrapperRefHeight = (props) => {
                 updateWrapperHeight();
             }
             catch (error) {
+                console.log(`🚀 🐥 ~ setupObservers ~ error:`, error);
                 console.warn('Cannot access wrapper content:', error);
             }
         };
@@ -2132,12 +2729,12 @@ const useWrapperRefHeight = (props) => {
                 mutationObserverRef.current.disconnect();
             }
         };
-    }, [wrapperRef, isRenderViz, updateWrapperHeight, isActive]);
+    }, [wrapperRef, updateWrapperHeight, isActive]);
     return {};
 };
 
 const useZonePositions = (options) => {
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const { iframeHeight } = useHeatmapViz();
     const getZonePosition = useCallback((zone) => {
         if (!iframeHeight) {
             return null;
@@ -2163,12 +2760,13 @@ const useScrollmapZones = (options) => {
     const { mode = 'basic', enabled = true, iframeRef, wrapperRef } = options;
     const [isReady, setIsReady] = useState(false);
     const [zones, setZones] = useState([]);
-    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
-    const scrollMapInfo = useHeatmapDataStore((state) => state.dataInfo?.scrollMapInfo);
+    const { scrollmap } = useHeatmapData();
+    const { dataInfo } = useHeatmapData();
     const { getZonePosition } = useZonePositions();
+    const scrollMapInfo = dataInfo?.scrollMapInfo;
     const maxUsers = useMemo(() => {
         if (!scrollmap || scrollmap.length === 0)
-            return 100;
+            return 0;
         return Math.max(...scrollmap.map((d) => d.percUsers));
     }, [scrollmap]);
     const createZones = useCallback((data) => {
@@ -2265,6 +2863,514 @@ const getScrollGradientColor = (normalized) => {
     return `rgb(${r}, ${g}, ${b})`;
 };
 
+class PerformanceLogger {
+    static instance;
+    metrics = [];
+    sessionId;
+    sessionStartTime;
+    config;
+    constructor() {
+        this.sessionId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        this.sessionStartTime = Date.now();
+        this.config = {
+            enabled: false,
+            logToConsole: false,
+            logLevel: 'normal',
+            thresholds: {
+                slowRenderMs: 16, // > 16ms = slower than 60fps
+                slowHookMs: 5,
+                excessiveRenderCount: 10,
+            },
+        };
+    }
+    static getInstance() {
+        if (!PerformanceLogger.instance) {
+            PerformanceLogger.instance = new PerformanceLogger();
+        }
+        return PerformanceLogger.instance;
+    }
+    configure(config) {
+        this.config = { ...this.config, ...config };
+        if (this.config.enabled && this.config.logToConsole) {
+            console.log('[Performance Monitor] Enabled', {
+                sessionId: this.sessionId,
+                config: this.config,
+            });
+        }
+    }
+    log(metric) {
+        if (!this.config.enabled)
+            return;
+        this.metrics.push(metric);
+        // Log to console based on level
+        if (this.config.logToConsole) {
+            this.logToConsole(metric);
+        }
+        // Send to external logger if configured
+        if (this.config.externalLogger) {
+            this.config.externalLogger(metric);
+        }
+        // Check thresholds and warn
+        this.checkThresholds(metric);
+    }
+    logToConsole(metric) {
+        const { logLevel } = this.config;
+        if (logLevel === 'minimal') {
+            // Only log warnings
+            return;
+        }
+        const style = this.getConsoleStyle(metric.type);
+        const label = `[${metric.type.toUpperCase()}] ${metric.name}`;
+        if (logLevel === 'verbose') {
+            console.log(`%c${label}`, style, metric);
+        }
+        else {
+            // Normal: Log compact info
+            const info = { name: metric.name };
+            if (metric.duration)
+                info.duration = `${metric.duration.toFixed(2)}ms`;
+            if ('viewId' in metric && metric.viewId)
+                info.viewId = metric.viewId;
+            if ('renderCount' in metric)
+                info.renderCount = metric.renderCount;
+            console.log(`%c${label}`, style, info);
+        }
+    }
+    getConsoleStyle(type) {
+        const styles = {
+            render: 'color: #61dafb; font-weight: bold',
+            hook: 'color: #ffa500; font-weight: bold',
+            store: 'color: #9c27b0; font-weight: bold',
+            function: 'color: #4caf50; font-weight: bold',
+        };
+        return styles[type] || '';
+    }
+    checkThresholds(metric) {
+        const { thresholds } = this.config;
+        // Check slow render
+        if (metric.type === 'render' && metric.duration && metric.duration > thresholds.slowRenderMs) {
+            console.warn(`[Performance] Slow render detected: ${metric.name} took ${metric.duration.toFixed(2)}ms`, metric);
+        }
+        // Check slow hook
+        if (metric.type === 'hook' && metric.duration && metric.duration > thresholds.slowHookMs) {
+            console.warn(`[Performance] Slow hook detected: ${metric.name} took ${metric.duration.toFixed(2)}ms`, metric);
+        }
+        // Check excessive renders
+        if (metric.type === 'render' && 'renderCount' in metric) {
+            const renderMetric = metric;
+            if (renderMetric.renderCount > thresholds.excessiveRenderCount) {
+                console.warn(`[Performance] Excessive renders: ${metric.name} has rendered ${renderMetric.renderCount} times`, metric);
+            }
+        }
+    }
+    generateReport() {
+        const now = Date.now();
+        const duration = now - this.sessionStartTime;
+        // Calculate summary
+        const renderMetrics = this.metrics.filter((m) => m.type === 'render');
+        const hookMetrics = this.metrics.filter((m) => m.type === 'hook');
+        const storeMetrics = this.metrics.filter((m) => m.type === 'store');
+        const totalRenders = renderMetrics.length;
+        const totalHookCalls = hookMetrics.length;
+        const totalStoreUpdates = storeMetrics.length;
+        const renderDurations = renderMetrics
+            .filter((m) => m.duration)
+            .map((m) => m.duration);
+        const averageRenderTime = renderDurations.length > 0
+            ? renderDurations.reduce((a, b) => a + b, 0) / renderDurations.length
+            : 0;
+        // View-specific metrics
+        const viewMetrics = {};
+        this.metrics.forEach((metric) => {
+            const viewId = 'viewId' in metric && metric.viewId ? metric.viewId : DEFAULT_VIEW_ID;
+            if (!viewMetrics[viewId]) {
+                viewMetrics[viewId] = { renders: 0, hookCalls: 0, storeUpdates: 0 };
+            }
+            if (metric.type === 'render')
+                viewMetrics[viewId].renders++;
+            if (metric.type === 'hook')
+                viewMetrics[viewId].hookCalls++;
+            if (metric.type === 'store')
+                viewMetrics[viewId].storeUpdates++;
+        });
+        // Find warnings
+        const renderCounts = new Map();
+        renderMetrics.forEach((m) => {
+            const key = `${m.name}-${'viewId' in m ? m.viewId : DEFAULT_VIEW_ID}`;
+            renderCounts.set(key, (renderCounts.get(key) || 0) + 1);
+        });
+        const excessiveRenders = Array.from(renderCounts.entries())
+            .filter(([, count]) => count > this.config.thresholds.excessiveRenderCount)
+            .map(([key, count]) => {
+            const [component, viewId] = key.split('-');
+            return { component, count, viewId: viewId !== DEFAULT_VIEW_ID ? viewId : undefined };
+        });
+        const slowOperations = this.metrics
+            .filter((m) => m.duration &&
+            ((m.type === 'render' && m.duration > this.config.thresholds.slowRenderMs) ||
+                (m.type === 'hook' && m.duration > this.config.thresholds.slowHookMs)))
+            .map((m) => ({
+            name: m.name,
+            duration: m.duration,
+            type: m.type,
+        }));
+        return {
+            session: {
+                id: this.sessionId,
+                startTime: this.sessionStartTime,
+                endTime: now,
+                duration,
+            },
+            summary: {
+                totalRenders,
+                totalHookCalls,
+                totalStoreUpdates,
+                averageRenderTime,
+                viewMetrics,
+            },
+            metrics: this.metrics,
+            warnings: {
+                excessiveRenders,
+                slowOperations,
+            },
+        };
+    }
+    clearMetrics() {
+        this.metrics = [];
+        this.sessionId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        this.sessionStartTime = Date.now();
+    }
+    getMetrics() {
+        return [...this.metrics];
+    }
+    isEnabled() {
+        return this.config.enabled;
+    }
+}
+const performanceLogger = PerformanceLogger.getInstance();
+
+/**
+ * Hook to track render count of a component
+ * @param componentName - Name of the component
+ * @param viewId - Optional viewId for compare mode
+ */
+function useRenderCount(componentName, viewId) {
+    const renderCount = useRef(0);
+    const startTime = useRef(0);
+    // Increment before render
+    renderCount.current += 1;
+    startTime.current = performance.now();
+    useEffect(() => {
+        const duration = performance.now() - startTime.current;
+        const metric = {
+            id: `render-${componentName}-${Date.now()}`,
+            type: 'render',
+            name: componentName,
+            componentName,
+            renderCount: renderCount.current,
+            timestamp: Date.now(),
+            duration,
+            viewId,
+        };
+        performanceLogger.log(metric);
+    });
+    return renderCount.current;
+}
+/**
+ * Hook to detect why a component re-rendered (which props changed)
+ * @param componentName - Name of the component
+ * @param props - Props object to track
+ * @param viewId - Optional viewId
+ */
+function useWhyDidYouUpdate(componentName, props, viewId) {
+    const previousProps = useRef();
+    const renderCount = useRef(0);
+    const startTime = useRef(0);
+    renderCount.current += 1;
+    startTime.current = performance.now();
+    useEffect(() => {
+        if (previousProps.current) {
+            const duration = performance.now() - startTime.current;
+            const allKeys = Object.keys({ ...previousProps.current, ...props });
+            const changedProps = [];
+            allKeys.forEach((key) => {
+                if (previousProps.current[key] !== props[key]) {
+                    changedProps.push(key);
+                }
+            });
+            if (changedProps.length > 0) {
+                const metric = {
+                    id: `render-${componentName}-${Date.now()}`,
+                    type: 'render',
+                    name: componentName,
+                    componentName,
+                    renderCount: renderCount.current,
+                    timestamp: Date.now(),
+                    duration,
+                    viewId,
+                    reason: 'Props changed',
+                    propsChanged: changedProps,
+                    metadata: {
+                        changes: changedProps.reduce((acc, key) => {
+                            acc[key] = {
+                                from: previousProps.current[key],
+                                to: props[key],
+                            };
+                            return acc;
+                        }, {}),
+                    },
+                };
+                performanceLogger.log(metric);
+            }
+        }
+        previousProps.current = props;
+    });
+}
+/**
+ * Hook to measure execution time of a function
+ * @param functionName - Name of the function
+ * @param fn - Function to measure
+ * @param viewId - Optional viewId
+ */
+function useMeasureFunction(functionName, fn, viewId) {
+    const measuredFn = ((...args) => {
+        const startTime = performance.now();
+        const result = fn(...args);
+        const duration = performance.now() - startTime;
+        performanceLogger.log({
+            id: `function-${functionName}-${Date.now()}`,
+            type: 'function',
+            name: functionName,
+            functionName,
+            timestamp: Date.now(),
+            duration,
+            viewId,
+            metadata: {
+                args: args.length,
+            },
+        });
+        return result;
+    });
+    return measuredFn;
+}
+/**
+ * Hook to track when a hook is called
+ * @param hookName - Name of the hook
+ * @param viewId - Optional viewId
+ * @param storeSlice - Optional store slice being accessed
+ */
+function useTrackHookCall(hookName, viewId, storeSlice) {
+    const startTime = useRef(0);
+    startTime.current = performance.now();
+    useEffect(() => {
+        const duration = performance.now() - startTime.current;
+        performanceLogger.log({
+            id: `hook-${hookName}-${Date.now()}`,
+            type: 'hook',
+            name: hookName,
+            hookName,
+            timestamp: Date.now(),
+            duration,
+            viewId,
+            storeSlice,
+        });
+    });
+}
+
+/**
+ * HOC to track component performance
+ * @param Component - Component to wrap
+ * @param options - Tracking options
+ */
+function withPerformanceTracking(Component, options = {}) {
+    const { trackProps = true, componentName, viewIdProp = 'viewId' } = options;
+    const WrappedComponent = (props) => {
+        const name = componentName || Component.displayName || Component.name || 'Unknown';
+        const viewId = viewIdProp in props ? props[viewIdProp] : undefined;
+        if (trackProps) {
+            useWhyDidYouUpdate(name, props, viewId);
+        }
+        return jsx(Component, { ...props });
+    };
+    WrappedComponent.displayName = `withPerformanceTracking(${componentName || Component.displayName || Component.name})`;
+    return WrappedComponent;
+}
+
+/**
+ * Middleware để track store updates
+ */
+function createStorePerformanceTracker(storeName) {
+    return (config) => (set, get, api) => {
+        const wrappedSet = (partial, replace) => {
+            const startTime = performance.now();
+            const prevState = get();
+            // Call original set
+            set(partial, replace);
+            const duration = performance.now() - startTime;
+            const nextState = get();
+            // Detect which viewIds were affected
+            const affectedViews = new Set();
+            // Check Record<string, any> properties for viewId keys
+            Object.keys(nextState).forEach((key) => {
+                if (typeof prevState[key] === 'object' &&
+                    typeof nextState[key] === 'object' &&
+                    prevState[key] !== nextState[key]) {
+                    // Check if this is a Record<viewId, value> structure
+                    const prevKeys = Object.keys(prevState[key] || {});
+                    const nextKeys = Object.keys(nextState[key] || {});
+                    const allKeys = new Set([...prevKeys, ...nextKeys]);
+                    allKeys.forEach((viewId) => {
+                        if (prevState[key]?.[viewId] !== nextState[key]?.[viewId]) {
+                            affectedViews.add(viewId);
+                        }
+                    });
+                }
+            });
+            const metric = {
+                id: `store-${storeName}-${Date.now()}`,
+                type: 'store',
+                name: `${storeName} update`,
+                storeName,
+                action: typeof partial === 'function' ? 'function update' : 'direct update',
+                timestamp: Date.now(),
+                duration,
+                affectedViews: Array.from(affectedViews),
+                metadata: {
+                    stateKeys: Object.keys(nextState),
+                },
+            };
+            performanceLogger.log(metric);
+        };
+        return config(wrappedSet, get, api);
+    };
+}
+/**
+ * Track specific store action
+ */
+function trackStoreAction(storeName, action, viewId, metadata) {
+    const metric = {
+        id: `store-${storeName}-${action}-${Date.now()}`,
+        type: 'store',
+        name: `${storeName}.${action}`,
+        storeName,
+        action,
+        timestamp: Date.now(),
+        viewId,
+        metadata,
+    };
+    performanceLogger.log(metric);
+}
+
+/**
+ * Get performance report as JSON string
+ */
+function getPerformanceReportJSON() {
+    const report = performanceLogger.generateReport();
+    return JSON.stringify(report, null, 2);
+}
+/**
+ * Download performance report as JSON file
+ */
+function downloadPerformanceReport(filename = 'heatmap-performance-report.json') {
+    const report = performanceLogger.generateReport();
+    const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+    URL.revokeObjectURL(url);
+}
+/**
+ * Send performance report to external endpoint
+ */
+async function sendPerformanceReport(endpoint) {
+    const report = performanceLogger.generateReport();
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(report),
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to send report: ${response.statusText}`);
+        }
+    }
+    catch (error) {
+        console.error('[Performance] Failed to send report:', error);
+        throw error;
+    }
+}
+/**
+ * Print performance summary to console
+ */
+function printPerformanceSummary() {
+    const report = performanceLogger.generateReport();
+    console.group('📊 Performance Summary');
+    console.log('Session:', report.session);
+    console.log('Total Renders:', report.summary.totalRenders);
+    console.log('Total Hook Calls:', report.summary.totalHookCalls);
+    console.log('Total Store Updates:', report.summary.totalStoreUpdates);
+    console.log('Average Render Time:', `${report.summary.averageRenderTime.toFixed(2)}ms`);
+    console.log('View Metrics:', report.summary.viewMetrics);
+    if (report.warnings.excessiveRenders.length > 0) {
+        console.group('⚠️ Excessive Renders');
+        report.warnings.excessiveRenders.forEach((warning) => {
+            console.warn(`${warning.component}${warning.viewId ? ` (${warning.viewId})` : ''}: ${warning.count} renders`);
+        });
+        console.groupEnd();
+    }
+    if (report.warnings.slowOperations.length > 0) {
+        console.group('🐌 Slow Operations');
+        report.warnings.slowOperations.forEach((warning) => {
+            console.warn(`${warning.name} (${warning.type}): ${warning.duration.toFixed(2)}ms`);
+        });
+        console.groupEnd();
+    }
+    console.groupEnd();
+}
+/**
+ * Get performance metrics filtered by viewId
+ */
+function getMetricsByViewId(viewId) {
+    const allMetrics = performanceLogger.getMetrics();
+    const filteredMetrics = allMetrics.filter((m) => {
+        return 'viewId' in m && m.viewId === viewId;
+    });
+    const report = performanceLogger.generateReport();
+    return {
+        ...report,
+        metrics: filteredMetrics,
+        summary: {
+            ...report.summary,
+            totalRenders: filteredMetrics.filter((m) => m.type === 'render').length,
+            totalHookCalls: filteredMetrics.filter((m) => m.type === 'hook').length,
+            totalStoreUpdates: filteredMetrics.filter((m) => m.type === 'store').length,
+            averageRenderTime: 0, // Recalculate if needed
+            viewMetrics: { [viewId]: report.summary.viewMetrics[viewId] || { renders: 0, hookCalls: 0, storeUpdates: 0 } },
+        },
+    };
+}
+/**
+ * Compare performance between two viewIds
+ */
+function compareViewPerformance(viewId1, viewId2) {
+    const report = performanceLogger.generateReport();
+    const view1Metrics = report.summary.viewMetrics[viewId1] || { renders: 0, hookCalls: 0, storeUpdates: 0 };
+    const view2Metrics = report.summary.viewMetrics[viewId2] || { renders: 0, hookCalls: 0, storeUpdates: 0 };
+    return {
+        view1: view1Metrics,
+        view2: view2Metrics,
+        difference: {
+            renders: view1Metrics.renders - view2Metrics.renders,
+            hookCalls: view1Metrics.hookCalls - view2Metrics.hookCalls,
+            storeUpdates: view1Metrics.storeUpdates - view2Metrics.storeUpdates,
+        },
+    };
+}
+
 const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const id = props.id;
     const flexDirection = props.flexDirection;
@@ -2310,7 +3416,12 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
 
 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, {}) }));
@@ -2318,8 +3429,9 @@ const ContentTopBar = () => {
 
 const ContentMetricBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
+    const borderBottom = `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`;
     return (jsx(BoxStack, { id: "gx-hm-content-metric-bar", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
-            borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+            borderBottom,
         }, children: controls.MetricBar ?? null }));
 };
 
@@ -2335,31 +3447,88 @@ const ContentToolbar = () => {
         }, children: controls.Toolbar ?? null }));
 };
 
-const VizContainer = ({ children, setWrapperHeight }) => {
+const ContentSidebar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    const { state } = useHeatmapInteraction();
+    const isHideSidebar = state.hideSidebar;
+    const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
+    const mode = useHeatmapConfigStore((state) => state.mode);
+    const SidebarComponent = controls.Sidebar ?? null;
+    const isCompareMode = mode === 'compare';
+    if (isCompareMode)
+        return null;
+    if (!SidebarComponent)
+        return null;
+    return (jsx("div", { className: "gx-hm-sidebar", style: {
+            height: '100%',
+            display: 'flex',
+            zIndex: 1,
+            ...(isHideSidebar
+                ? {
+                    width: '0',
+                    transform: 'translateX(-100%)',
+                    visibility: 'hidden',
+                }
+                : { width: `${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px` }),
+        }, children: jsx("div", { className: "gx-hm-sidebar-wrapper", style: {
+                height: '100%',
+                width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
+                borderRight: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+            }, children: jsx(SidebarComponent, {}) }) }));
+};
+
+const PopoverSidebar = () => {
+    const mode = useHeatmapConfigStore((state) => state.mode);
+    const CompSidebar = useHeatmapControlStore((state) => state.controls.Sidebar);
+    const CompSidebarActivator = useHeatmapControlStore((state) => state.controls.SidebarActivator);
+    const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const { state } = useHeatmapInteraction();
+    const isCompareMode = mode === 'compare';
+    const isHideSidebar = state.hideSidebar;
+    const stylePopover = {
+        position: 'absolute',
+        top: '24px',
+        left: '24px',
+        zIndex: Z_INDEX.SIDEBAR_POPOVER,
+        height: `calc(100% - ${HEATMAP_CONFIG.heightToolbar}px - ${HEATMAP_CONFIG.padding}px - 24px)`,
+        width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
+    };
+    if (isHideSidebar || !isCompareMode)
+        return null;
+    if (!CompSidebar || !CompSidebarActivator)
+        return null;
+    return (jsxs("div", { children: [!isPopoverOpen && (jsx("div", { style: { ...stylePopover, width: 'auto', height: 'auto' }, children: jsx(CompSidebarActivator, { onClick: () => setIsPopoverOpen(true) }) })), isPopoverOpen && (jsx(Fragment, { children: jsx("div", { className: "gx-hm-sidebar-popover", style: {
+                        ...stylePopover,
+                        backgroundColor: '#fff',
+                        borderRight: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+                        borderRadius: '8px',
+                        boxShadow: '4px 0 12px rgba(0, 0, 0, 0.15)',
+                        overflow: 'auto',
+                    }, children: jsx(CompSidebar, { closeAction: { onClick: () => setIsPopoverOpen(false) } }) }) }))] }));
+};
+
+const VizContainer = ({ children, isActive = false }) => {
     const wrapperRef = useRef(null);
+    const viewId = useViewId();
     useWrapperRefHeight({
-        isActive: !!setWrapperHeight,
+        isActive,
         wrapperRef,
-        setWrapperHeight,
     });
-    return (jsx(BoxStack, { ref: wrapperRef, id: "gx-hm-viz-container", flexDirection: "column", flex: "1 1 auto", overflow: "auto", zIndex: 1, children: jsx(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
-                minWidth: '394px',
-            }, children: children }) }));
+    return (jsxs(BoxStack, { ref: wrapperRef, id: `gx-hm-viz-container-${viewId}`, flexDirection: "column", flex: "1 1 auto", overflow: "auto", zIndex: 1, children: [jsx(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
+                    minWidth: '394px',
+                }, children: children }), jsx(PopoverSidebar, {})] }));
 };
 
 const useClickmap = () => {
-    const [isInitialized, setIsInitialized] = useState(false);
-    const clickmap = useHeatmapDataStore((state) => state.clickmap);
-    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+    const { vizRef } = useHeatmapViz();
+    const { clickmap } = useHeatmapData();
     const start = useCallback(() => {
-        if (isInitialized)
-            return;
         if (!vizRef || !clickmap || clickmap.length === 0)
             return;
         try {
             vizRef?.clearmap?.();
             vizRef?.clickmap?.(clickmap);
-            setIsInitialized(true);
         }
         catch (error) {
             console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
@@ -2369,8 +3538,8 @@ const useClickmap = () => {
 };
 
 const useScrollmap = () => {
-    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
-    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    const { vizRef } = useHeatmapViz();
+    const { scrollmap } = useHeatmapData();
     const start = useCallback(() => {
         // if (isInitialized) return;
         if (!vizRef || !scrollmap || scrollmap.length === 0)
@@ -2387,7 +3556,7 @@ const useScrollmap = () => {
     return { start };
 };
 
-const useHeatmapCanvas = ({ iframeRef, }) => {
+const useHeatmapCanvas = () => {
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
     const { start: startClickmap } = useClickmap();
     const { start: startScrollmap } = useScrollmap();
@@ -2403,10 +3572,28 @@ const useHeatmapCanvas = ({ iframeRef, }) => {
     }, [heatmapType, startClickmap, startScrollmap]);
 };
 
-const CLICKED_ELEMENT_ID = 'gx-hm-clicked-element';
-const SECONDARY_CLICKED_ELEMENT_ID = 'gx-hm-secondary-clicked-element';
-const HOVERED_ELEMENT_ID = 'gx-hm-hovered-element';
-const SECONDARY_HOVERED_ELEMENT_ID = 'gx-hm-secondary-hovered-element';
+// 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 RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
     const style = calculateRankPosition(elementRect, widthScale);
@@ -2415,9 +3602,9 @@ const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
 
 const NUMBER_OF_TOP_ELEMENTS = 10;
 const DefaultRankBadges = ({ getRect, hidden }) => {
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
-    const widthScale = useHeatmapVizStore((state) => state.scale);
-    const elements = heatmapInfo?.sortedElements?.slice(0, NUMBER_OF_TOP_ELEMENTS) ?? [];
+    const { dataInfo } = useHeatmapData();
+    const { widthScale } = useHeatmapViz();
+    const elements = dataInfo?.sortedElements?.slice(0, NUMBER_OF_TOP_ELEMENTS) ?? [];
     if (hidden || elements.length === 0)
         return null;
     return (jsx(Fragment, { children: elements.map((element, index) => {
@@ -2436,6 +3623,7 @@ const DEFAULT_POSITION = {
 };
 const ElementCallout = (props) => {
     const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
+    const viewId = useViewId();
     const { element, target, visualRef, hozOffset, alignment = 'left' } = props;
     const calloutRef = useRef(null);
     const [position, setPosition] = useState(DEFAULT_POSITION);
@@ -2468,15 +3656,15 @@ const ElementCallout = (props) => {
             position: 'fixed',
             top: position.top,
             left: position.left,
-            zIndex: 2147483647,
+            zIndex: Z_INDEX.CALLOUT,
         }, "aria-live": "assertive", role: "tooltip", children: CompElementCallout && jsx(CompElementCallout, { elementHash: element.hash }) }));
-    return createPortal(calloutContent, document.getElementById('gx-hm-viz-container'));
+    return createPortal(calloutContent, document.getElementById(`gx-hm-viz-container-${viewId}`));
 };
 
 const ElementMissing = ({ show = true }) => {
+    const { widthScale } = useHeatmapViz();
     if (!show)
         return null;
-    const widthScale = useHeatmapVizStore((state) => state.scale);
     return (jsx("div", { className: "missingElement", style: {
             position: 'fixed',
             top: '50%',
@@ -2494,18 +3682,9 @@ const ElementMissing = ({ show = true }) => {
         }, "aria-live": "assertive", children: "Element not visible on current screen" }));
 };
 
-const TARGET_ID_BY_TYPE = {
-    hovered: {
-        default: HOVERED_ELEMENT_ID,
-        secondary: SECONDARY_HOVERED_ELEMENT_ID,
-    },
-    clicked: {
-        default: CLICKED_ELEMENT_ID,
-        secondary: SECONDARY_CLICKED_ELEMENT_ID,
-    },
-};
-const ElementOverlay = ({ type, element, onClick, isSecondary }) => {
-    const widthScale = useHeatmapVizStore((state) => state.scale);
+const ElementOverlay = ({ type, element, onClick, isSecondary, elementId, }) => {
+    // useRenderCount('ElementOverlay');
+    const { widthScale } = useHeatmapViz();
     if (!element || (element.width === 0 && element.height === 0))
         return null;
     // Iframe has border, so we need to add it to the top position
@@ -2513,8 +3692,7 @@ const ElementOverlay = ({ type, element, onClick, isSecondary }) => {
     const left = element.left + HEATMAP_CONFIG['borderWidthIframe'];
     const width = element.width;
     const height = element.height;
-    const targetId = TARGET_ID_BY_TYPE[type][isSecondary ? 'secondary' : 'default'];
-    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: "heatmapElement", id: targetId, style: {
+    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: "heatmapElement", id: elementId, style: {
                     top,
                     left,
                     width,
@@ -2528,14 +3706,17 @@ const ELEMENT_CALLOUT = {
     alignment: 'left',
 };
 const HeatmapElements = (props) => {
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-    const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, } = props;
+    const viewId = useViewId();
+    const { iframeHeight } = useHeatmapViz();
+    const clickedElementId = getClickedElementId(viewId, props.isSecondary);
+    const hoveredElementId = getHoveredElementId(viewId, props.isSecondary);
+    const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isVisible = true, areDefaultRanksHidden, isSecondary, } = props;
     const getRect = useHeatmapElementPosition({
         iframeRef,
         wrapperRef,
         visualizer,
     });
-    const { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout } = useClickedElement({
+    const { clickedElement, showMissingElement, shouldShowCallout } = useClickedElement({
         visualRef,
         getRect,
     });
@@ -2543,53 +3724,29 @@ const HeatmapElements = (props) => {
         iframeRef,
         getRect,
     });
-    useElementCalloutVisible({
-        visualRef,
-        getRect,
-    });
-    const resetAll = () => {
-        // setShouldShowCallout(false);
-    };
-    useHeatmapEffects({
-        isVisible,
-        isElementSidebarOpen,
-        setShouldShowCallout,
-        resetAll,
-    });
+    useElementCalloutVisible({ visualRef, getRect });
+    useHeatmapEffects({ isVisible });
+    useRenderCount('HeatmapElements');
     if (!isVisible)
         return null;
-    return (jsxs("div", { onMouseMove: (event) => {
-            handleMouseMove(event);
-            // handleMouseMove2(event as any);
-        }, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, isSecondary: isSecondary }), jsx(ElementOverlay, { type: "hovered", element: hoveredElement, isSecondary: isSecondary, onClick: handleClick }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${HOVERED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT })), shouldShowCallout && clickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${CLICKED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT }))] }));
+    return (jsxs("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, isSecondary: isSecondary, elementId: clickedElementId }), jsx(ElementOverlay, { type: "hovered", element: hoveredElement, isSecondary: isSecondary, onClick: handleClick, elementId: hoveredElementId }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${hoveredElementId}`, visualRef: visualRef, ...ELEMENT_CALLOUT })), shouldShowCallout && clickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${clickedElementId}`, visualRef: visualRef, ...ELEMENT_CALLOUT }))] }));
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const contentWidth = useHeatmapConfigStore((state) => state.width);
-    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+    const { dataInfo } = useHeatmapData();
+    const { vizRef } = useHeatmapViz();
     const visualizer = {
         get: (hash) => {
-            if (vizRef) {
-                return vizRef.get(hash);
-            }
-            const doc = iframeRef.current?.contentDocument;
-            if (!doc)
+            if (!vizRef)
                 return null;
-            const elmHashAlpha = doc.querySelector(`[data-clarity-hashalpha="${hash}"]`);
-            if (elmHashAlpha) {
-                return elmHashAlpha;
-            }
-            const elmHash = doc.querySelector(`[data-clarity-hash="${hash}"]`);
-            if (elmHash) {
-                return elmHash;
-            }
-            return null;
+            return vizRef.get(hash);
         },
     };
+    // useRenderCount('VizElements');
     if (!iframeRef.current)
         return null;
-    return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: heatmapInfo, isVisible: true, iframeDimensions: {
+    return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, iframeDimensions: {
             width: contentWidth,
             position: 'absolute',
             top: 0,
@@ -2599,8 +3756,9 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
 };
 
 const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
-    const averageFold = useHeatmapDataStore((state) => state.dataInfo?.averageFold || 50);
+    const { dataInfo } = useHeatmapData();
     const { getZonePosition } = useZonePositions();
+    const averageFold = dataInfo?.averageFold || 50;
     const position = getZonePosition({
         startY: averageFold,
         endY: averageFold,
@@ -2635,8 +3793,8 @@ const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
 };
 
 const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
-    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
     const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const { scrollmap } = useHeatmapData();
     const { getZonePosition } = useZonePositions();
     if (!scrollmap || scrollmap.length === 0)
         return null;
@@ -2710,8 +3868,8 @@ const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
 };
 
 const ScrollMapMinimap = ({ zones, maxUsers }) => {
-    const showMinimap = useHeatmapVizScrollmapStore((state) => state.showMinimap);
     const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const { showMinimap } = useHeatmapVizScrollmap();
     const isScrollType = [IScrollType.Attention].includes(scrollType);
     if (!showMinimap || !isScrollType)
         return null;
@@ -2816,7 +3974,7 @@ const MetricsTooltipContent = ({ zone }) => {
 const MetricRow = ({ label, value }) => (jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [jsxs("span", { style: { color: '#605E5C' }, children: [label, ":"] }), jsx("span", { style: { fontWeight: 600 }, children: value })] }));
 
 const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent, }) => {
-    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    const { scrollmap } = useHeatmapData();
     // const hoveredZone = useHeatmapVizScrollmapStore((state) => state.hoveredZone);
     // const setHoveredZone = useHeatmapVizScrollmapStore((state) => state.setHoveredZone);
     const { zones, isReady, maxUsers } = useScrollmapZones({
@@ -2834,8 +3992,7 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
     const overlayRef = useRef(null);
     const [position, setPosition] = useState();
     const [currentScrollPercent, setCurrentScrollPercent] = useState(0);
-    const widthScale = useHeatmapVizStore((state) => state.scale);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const { widthScale, iframeHeight } = useHeatmapViz();
     const handleMouseMove = (event) => {
         if (!iframeRef.current || !wrapperRef.current)
             return;
@@ -2870,8 +4027,9 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
 
 const SCROLL_TYPES = [IHeatmapType.Scroll];
 const VizScrollMap = ({ iframeRef, wrapperRef }) => {
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const { iframeHeight } = useHeatmapViz();
+    // useRenderCount('VizScrollMap');
     const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType);
     if (!iframeHeight || !isHeatmapScroll)
         return null;
@@ -2887,10 +4045,8 @@ const VizScrollMap = ({ iframeRef, wrapperRef }) => {
 
 const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHeight, onScroll, }) => {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
-    const widthScale = useHeatmapVizStore((state) => state.scale);
-    const contentHeight = scaledHeight > 0
-        ? `${scaledHeight + HEATMAP_CONFIG['heightToolbar'] + HEATMAP_CONFIG['padding'] * 2}px`
-        : 'auto';
+    const { widthScale } = useHeatmapViz();
+    const contentHeight = calcContentHeight();
     return (jsx("div", { ref: visualRef, className: "gx-hm-visual", onScroll: onScroll, style: {
             overflow: 'hidden scroll',
             display: 'flex',
@@ -2915,29 +4071,34 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
                     transformOrigin: 'top center',
                     paddingBlockEnd: '0',
                 }, children: children }) }) }));
+    function calcContentHeight() {
+        return scaledHeight > 0
+            ? `${scaledHeight + HEATMAP_CONFIG['heightToolbar'] + HEATMAP_CONFIG['padding'] * 2}px`
+            : 'auto';
+    }
 };
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
-    const width = useHeatmapConfigStore((state) => state.width);
+    const contentWidth = useHeatmapConfigStore((state) => state.width || 0);
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
-    const setSelectedElement = useHeatmapInteractionStore((state) => state.setSelectedElement);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
+    const { setSelectedElement } = useHeatmapInteraction();
+    const { iframeHeight, setIframeHeight, isRenderViz } = useHeatmapViz();
     const { iframeRef } = useHeatmapVizRender(mode);
     const { scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
         iframeRef,
         visualRef,
         iframeHeight,
+        isRenderViz,
     });
-    const contentWidth = width ?? 0;
+    useHeatmapCanvas();
+    useRenderCount('VizDomRenderer');
     const onScroll = (e) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    useHeatmapCanvas({ iframeRef: iframeRef });
     const cleanUp = () => {
         setIframeHeight(0);
         setSelectedElement(null);
@@ -2953,26 +4114,20 @@ const VizLoading = () => {
 };
 
 const VizDomHeatmap = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    const isRendering = useHeatmapDataStore((state) => state.isRendering);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
-    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
+    const { iframeHeight, setIframeHeight } = useHeatmapViz();
+    useRenderCount('VizDomHeatmap');
     useEffect(() => {
         return () => {
-            setVizRef(null);
+            console.log('🚀 🐥 ~ useEffect ~ return:');
             setIframeHeight(0);
         };
     }, []);
-    if (isRendering)
-        return controls.VizLoading ?? null;
-    return (jsxs(VizContainer, { children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && jsx(VizLoading, {})] }));
+    return (jsxs(VizContainer, { isActive: true, children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && jsx(VizLoading, {})] }));
 };
 
 const VizLiveRenderer = () => {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
-    const iframeHeight = useHeatmapLiveStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
+    const { isRenderViz, iframeHeight, setIframeHeight } = useHeatmapViz();
     const visualRef = useRef(null);
     const wrapperRef = useRef(null);
     const { iframeRef } = useVizLiveRender();
@@ -2981,7 +4136,7 @@ const VizLiveRenderer = () => {
         iframeRef,
         visualRef,
         iframeHeight,
-        setIframeHeight,
+        isRenderViz,
     });
     const onScroll = (e) => {
         const scrollTop = e.currentTarget.scrollTop;
@@ -2993,62 +4148,38 @@ const VizLiveRenderer = () => {
 };
 
 const VizLiveHeatmap = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    const isRendering = useHeatmapDataStore((state) => state.isRendering);
-    const iframeHeight = useHeatmapLiveStore((state) => state.iframeHeight);
-    const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
-    const setWrapperHeight = useHeatmapLiveStore((state) => state.setWrapperHeight);
+    const { iframeHeight, wrapperHeight } = useHeatmapViz();
     const reset = useHeatmapLiveStore((state) => state.reset);
     useEffect(() => {
         return () => {
             reset();
         };
-    }, [reset]);
-    if (isRendering)
-        return controls.VizLoading ?? null;
-    return (jsxs(VizContainer, { setWrapperHeight: setWrapperHeight, children: [jsx(VizLiveRenderer, {}), (!iframeHeight || !wrapperHeight) && jsx(VizLoading, {})] }));
+    }, []);
+    return (jsxs(VizContainer, { isActive: true, children: [jsx(VizLiveRenderer, {}), (!iframeHeight || !wrapperHeight) && jsx(VizLoading, {})] }));
 };
 
 const ContentVizByMode = () => {
     const mode = useHeatmapConfigStore((state) => state.mode);
+    const isRendering = useHeatmapConfigStore((state) => state.isRendering);
+    const controls = useHeatmapControlStore((state) => state.controls);
+    if (isRendering)
+        return controls.VizLoading ?? null;
     switch (mode) {
         case 'live':
             return jsx(VizLiveHeatmap, {});
+        // case 'compare':
+        //   return <VizCompareHeatmap />;
         default:
             return jsx(VizDomHeatmap, {});
     }
 };
 
-const LeftSidebar = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    const isHideSidebar = useHeatmapInteractionStore((state) => state.state.hideSidebar);
-    const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
-    if (isHideSidebar) {
-        return null;
-    }
-    return (jsx("div", { className: "gx-hm-sidebar", style: {
-            height: '100%',
-            display: 'flex',
-            zIndex: 1,
-            ...(isHideSidebar
-                ? {
-                    width: '0',
-                    transform: 'translateX(-100%)',
-                    visibility: 'hidden',
-                }
-                : { width: `${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px` }),
-        }, children: jsx("div", { className: "gx-hm-sidebar-wrapper", style: {
-                height: '100%',
-                width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
-                borderRight: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
-            }, children: controls.Sidebar ?? null }) }));
-};
-
 const WrapperPreview = () => {
-    return (jsxs(BoxStack, { id: "gx-hm-container", flexDirection: "row", overflow: "hidden", flex: "1", position: "relative", children: [jsx(LeftSidebar, {}), jsxs(BoxStack, { flexDirection: "column", flex: "1", children: [jsx(ContentMetricBar, {}), jsx(ContentVizByMode, {}), jsx(ContentToolbar, {})] })] }));
+    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, {})] }));
 };
 
@@ -3057,6 +4188,19 @@ const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     useRegisterData(data, dataInfo);
     useRegisterHeatmap({ clickmap, scrollmap });
     useRegisterConfig();
+    performanceLogger.configure({
+        enabled: true,
+        logToConsole: false,
+        logLevel: 'normal', // 'verbose' | 'normal' | 'minimal'
+        thresholds: {
+            slowRenderMs: 16, // Warn if render > 16ms (60fps)
+            slowHookMs: 5, // Warn if hook > 5ms
+            excessiveRenderCount: 10, // Warn if component renders > 10 times
+        },
+        externalLogger: (metric) => {
+            if (metric.name === 'VizDomRenderer') ;
+        },
+    });
     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',
@@ -3070,4 +4214,4 @@ const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     }
 };
 
-export { GraphView, HeatmapLayout, IClickType, IHeatmapType, IScrollType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapVizStore };
+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, 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 };