@gemx-dev/heatmap-react 3.5.79 → 3.5.80

package/dist/esm/index.js

@@ -106,7 +106,7 @@ const getCompareViewId = (viewId) => {
     return `compare-${viewId}`;
 };
 
-const Z_INDEX = {
+const Z_INDEX$1 = {
     ELEMENTS: 1000,
     CALLOUT: 2000,
     MINIMAP: 3000,
@@ -324,6 +324,7 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
         clickAreas: new Map([[DEFAULT_VIEW_ID, undefined]]),
         dataInfo: new Map([[DEFAULT_VIEW_ID, undefined]]),
         scrollmap: new Map([[DEFAULT_VIEW_ID, undefined]]),
+        attentionMap: new Map([[DEFAULT_VIEW_ID, undefined]]),
         setClickAreas: (clickAreas, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newClickAreas = new Map(prev.clickAreas);
             newClickAreas.set(viewId, clickAreas);
@@ -336,6 +337,11 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             newClickAreas.set(viewId, filtered);
             return { clickAreas: newClickAreas };
         }),
+        setAttentionMap: (attentionMap, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newAttentionMap = new Map(prev.attentionMap);
+            newAttentionMap.set(viewId, attentionMap);
+            return { attentionMap: newAttentionMap };
+        }),
         setDataInfo: (dataInfo, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newDataInfo = new Map(prev.dataInfo);
             newDataInfo.set(viewId, dataInfo);
@@ -372,17 +378,20 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             const newClickAreas = new Map(prev.clickAreas);
             const newDataInfo = new Map(prev.dataInfo);
             const newScrollmap = new Map(prev.scrollmap);
+            const newAttentionMap = new Map(prev.attentionMap);
             newData.set(toViewId, prev.data.get(fromViewId));
             newClickmap.set(toViewId, prev.clickmap.get(fromViewId));
             newClickAreas.set(toViewId, prev.clickAreas.get(fromViewId));
             newDataInfo.set(toViewId, prev.dataInfo.get(fromViewId));
             newScrollmap.set(toViewId, prev.scrollmap.get(fromViewId));
+            newAttentionMap.set(toViewId, prev.attentionMap.get(fromViewId));
             return {
                 data: newData,
                 clickmap: newClickmap,
                 clickAreas: newClickAreas,
                 dataInfo: newDataInfo,
                 scrollmap: newScrollmap,
+                attentionMap: newAttentionMap,
             };
         }),
         clearView: (viewId) => set((prev) => {
@@ -391,17 +400,20 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             const newClickAreas = new Map(prev.clickAreas);
             const newDataInfo = new Map(prev.dataInfo);
             const newScrollmap = new Map(prev.scrollmap);
+            const newAttentionMap = new Map(prev.attentionMap);
             newData.delete(viewId);
             newClickmap.delete(viewId);
             newClickAreas.delete(viewId);
             newDataInfo.delete(viewId);
             newScrollmap.delete(viewId);
+            newAttentionMap.delete(viewId);
             return {
                 data: newData,
                 clickmap: newClickmap,
                 clickAreas: newClickAreas,
                 dataInfo: newDataInfo,
                 scrollmap: newScrollmap,
+                attentionMap: newAttentionMap,
             };
         }),
         resetAll: () => set({
@@ -410,6 +422,7 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             clickAreas: new Map([[DEFAULT_VIEW_ID, undefined]]),
             dataInfo: new Map([[DEFAULT_VIEW_ID, undefined]]),
             scrollmap: new Map([[DEFAULT_VIEW_ID, undefined]]),
+            attentionMap: new Map([[DEFAULT_VIEW_ID, undefined]]),
         }),
     };
 }));
@@ -864,6 +877,7 @@ const useHeatmapVizScrollStore = create()(subscribeWithSelector((set) => {
         zones: new Map([[DEFAULT_VIEW_ID, []]]),
         hoveredZone: new Map([[DEFAULT_VIEW_ID, null]]),
         showMinimap: new Map([[DEFAULT_VIEW_ID, true]]),
+        selectedScrollY: new Map([[DEFAULT_VIEW_ID, null]]),
         setZones: (zones, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newZones = new Map(prev.zones);
             newZones.set(viewId, zones);
@@ -879,6 +893,11 @@ const useHeatmapVizScrollStore = create()(subscribeWithSelector((set) => {
             newShowMinimap.set(viewId, showMinimap);
             return { showMinimap: newShowMinimap };
         }),
+        setSelectedScrollY: (selectedScrollY, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newSelectedScrollY = new Map(prev.selectedScrollY);
+            newSelectedScrollY.set(viewId, selectedScrollY);
+            return { selectedScrollY: newSelectedScrollY };
+        }),
         copyView: (fromViewId, toViewId) => set((prev) => {
             const newZones = new Map(prev.zones);
             const newHoveredZone = new Map(prev.hoveredZone);
@@ -1130,26 +1149,7 @@ const useHeatmapAreaClickContext = createViewContextHook({
     }),
 });
 
-// ===========================
-// Constants
-// ===========================
 const DEFAULT_STATE = { hideSidebar: false };
-// ===========================
-// Hook
-// ===========================
-/**
- * Hook to access heatmap click state and actions with optional selector
- *
- * @example
- * ```tsx
- * // Get everything
- * const { state, selectedElement, setSelectedElement } = useHeatmapClickContext();
- *
- * // Get only what you need (no unnecessary re-renders)
- * const setSelectedElement = useHeatmapClickContext(s => s.setSelectedElement);
- * const selectedElement = useHeatmapClickContext(s => s.selectedElement);
- * ```
- */
 const useHeatmapClickContext = createViewContextHook({
     useStore: useHeatmapVizClickStore,
     getState: (store, viewId) => ({
@@ -1187,6 +1187,7 @@ const useHeatmapDataContext = createViewContextHook({
         clickmap: store.clickmap.get(viewId),
         clickAreas: store.clickAreas.get(viewId),
         scrollmap: store.scrollmap.get(viewId),
+        attentionMap: store.attentionMap.get(viewId),
         dataInfo: store.dataInfo.get(viewId),
     }),
     getActions: (store, viewId) => ({
@@ -1195,6 +1196,7 @@ const useHeatmapDataContext = createViewContextHook({
         setClickAreas: (newClickAreas) => store.setClickAreas(newClickAreas, viewId),
         setDataInfoByKey: (key, value) => store.setDataInfoByKey(key, value, viewId),
         setScrollmap: (newScrollmap) => store.setScrollmap(newScrollmap, viewId),
+        setAttentionMap: (newAttentionMap) => store.setAttentionMap(newAttentionMap, viewId),
         setDataInfo: (newDataInfo) => store.setDataInfo(newDataInfo, viewId),
         removeClickArea: (areaId) => store.removeClickArea(areaId, viewId),
         clearView: (viewId) => store.clearView(viewId),
@@ -1218,11 +1220,13 @@ const useHeatmapScrollContext = createViewContextHook({
         zones: store.zones.get(viewId) ?? [],
         hoveredZone: store.hoveredZone.get(viewId) ?? null,
         showMinimap: store.showMinimap.get(viewId) ?? true,
+        selectedScrollY: store.selectedScrollY.get(viewId) ?? 0,
     }),
     getActions: (store, viewId) => ({
         setZones: (zones) => store.setZones(zones, viewId),
         setHoveredZone: (zone) => store.setHoveredZone(zone, viewId),
         setShowMinimap: (value) => store.setShowMinimap(value, viewId),
+        setSelectedScrollY: (value) => store.setSelectedScrollY(value, viewId),
     }),
 });
 
@@ -1446,10 +1450,11 @@ const useRegisterData = (data, dataInfo) => {
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
-const useRegisterHeatmap = ({ clickmap, scrollmap, clickAreas }) => {
+const useRegisterHeatmap = ({ clickmap, scrollmap, clickAreas, attentionMap }) => {
     const setClickmap = useHeatmapDataContext((s) => s.setClickmap);
     const setScrollmap = useHeatmapDataContext((s) => s.setScrollmap);
     const setClickAreas = useHeatmapDataContext((s) => s.setClickAreas);
+    const setAttentionMap = useHeatmapDataContext((s) => s.setAttentionMap);
     const isRegistered = useRef(false);
     useEffect(() => {
         if (isRegistered.current)
@@ -1463,6 +1468,9 @@ const useRegisterHeatmap = ({ clickmap, scrollmap, clickAreas }) => {
         if (scrollmap) {
             setScrollmap(scrollmap);
         }
+        if (attentionMap) {
+            setAttentionMap(attentionMap);
+        }
         isRegistered.current = true;
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 };
@@ -2404,7 +2412,7 @@ const getStyleFromCandidate = (candidate, widthScale) => {
     return {
         top,
         left,
-        zIndex: Z_INDEX.CALLOUT,
+        zIndex: Z_INDEX$1.CALLOUT,
         transform: `scale(${1 / widthScale})`, // TODO: remove this when we have a better way to handle the scale
         transformOrigin: `${xTransformAlign} ${yTransformAlign}`,
     };
@@ -4471,27 +4479,43 @@ const useClickmap = () => {
 
 const useScrollmap = () => {
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
+    const scrollType = useHeatmapSettingContext((s) => s.scrollType);
     const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
+    const attentionMap = useHeatmapDataContext((s) => s.attentionMap);
+    const dataMap = useMemo(() => {
+        switch (scrollType) {
+            case EScrollType.Depth:
+                return scrollmap;
+            case EScrollType.Attention:
+                return attentionMap;
+            case EScrollType.Revenue:
+                return [];
+            default:
+                return scrollmap;
+        }
+    }, [scrollmap, attentionMap, scrollType]);
     const start = useCallback(() => {
-        if (!vizRef || !scrollmap || scrollmap.length === 0)
+        if (!vizRef || !dataMap || dataMap.length === 0)
             return;
         try {
             vizRef?.clearmap?.();
-            vizRef?.scrollmap?.(scrollmap);
+            vizRef?.scrollmap?.(dataMap);
         }
         catch (error) {
             logger$4.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
         }
-    }, [vizRef, scrollmap]);
+    }, [vizRef, dataMap]);
     return { start };
 };
 
 const useHeatmapCanvas = () => {
     const heatmapType = useHeatmapSettingContext((state) => state.heatmapType);
     const clickMode = useHeatmapSettingContext((state) => state.clickMode);
+    const scrollType = useHeatmapSettingContext((state) => state.scrollType);
     const { start: startClickmap } = useClickmap();
     const { start: startAreaClickmap } = useAreaClickmap();
     const { start: startScrollmap } = useScrollmap();
+    // const { start: startAttentionMap } = useAttentionMap();
     useEffect(() => {
         switch (heatmapType) {
             case EHeatmapType.Click:
@@ -4506,7 +4530,7 @@ const useHeatmapCanvas = () => {
                 startScrollmap();
                 break;
         }
-    }, [heatmapType, clickMode, startClickmap, startAreaClickmap, startScrollmap]);
+    }, [heatmapType, clickMode, startClickmap, startAreaClickmap, startScrollmap, scrollType]);
 };
 
 const scrollToElementIfNeeded = (visualRef, rect, scale, onScrollComplete) => {
@@ -6431,6 +6455,260 @@ function initIframeHelper$1(iframe, rect, onSuccess) {
     enableNavigationBlocking();
 }
 
+const CANVAS_ID = 'clarity-heatmap-canvas';
+const ATTENTION_HUES = [240, 210, 180, 150, 120, 90, 60, 30, 0];
+const CANVAS_MAX_HEIGHT = 65535;
+const Z_INDEX = 2147483647;
+const DEFAULT_IFRAME_ID = 'clarity-snapshot-heatmap-iframe';
+const SECONDARY_IFRAME_ID = 'clarity-snapshot-heatmap-iframe-secondary';
+const DEFAULT_VISUAL_DIV_ID = 'heatmapVisual';
+const SECONDARY_VISUAL_DIV_ID = 'heatmapVisual_sec';
+class AttentionMapRenderer {
+    attentionData = null;
+    attentionMapData = null;
+    observer = null;
+    visualizer = null;
+    avgFold = 0;
+    heatmapIframeId = DEFAULT_IFRAME_ID;
+    heatmapVisualDivId = DEFAULT_VISUAL_DIV_ID;
+    state;
+    constructor(state) {
+        this.state = state;
+    }
+    reset = () => {
+        this.attentionData = null;
+        this.attentionMapData = null;
+        this.avgFold = 0;
+        this.observer?.disconnect();
+        this.observer = null;
+        if (this.state?.window) {
+            this.state.window.removeEventListener('resize', this.reRender, true);
+        }
+    };
+    clear = () => {
+        if (!this.state?.window)
+            return;
+        const win = this.state.window;
+        const doc = win.document;
+        const de = doc.documentElement;
+        const canvas = doc.getElementById(CANVAS_ID);
+        if (canvas) {
+            canvas.width = de.clientWidth;
+            canvas.height = de.clientHeight;
+            canvas.style.left = `${win.pageXOffset}px`;
+            canvas.style.top = `${win.pageYOffset}px`;
+            canvas.getContext('2d')?.clearRect(0, 0, canvas.width, canvas.height);
+        }
+        this.reset();
+    };
+    attention = (attentionData, avgFold, visualizer, isSecondary = false) => {
+        this.attentionData = attentionData ?? this.attentionData;
+        this.visualizer = visualizer ?? this.visualizer;
+        this.avgFold = avgFold ?? this.avgFold;
+        if (isSecondary) {
+            this.heatmapIframeId = SECONDARY_IFRAME_ID;
+            this.heatmapVisualDivId = SECONDARY_VISUAL_DIV_ID;
+        }
+        return this.renderAttentionmap();
+    };
+    reRender = () => {
+        const doc = this.state?.window?.document;
+        if (!doc)
+            return;
+        const canvas = this.overlay();
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        const body = doc.body;
+        const de = doc.documentElement;
+        const contentHeight = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
+        canvas.height = Math.min(contentHeight, CANVAS_MAX_HEIGHT);
+        canvas.style.top = '0px';
+        if (canvas.width <= 0 || canvas.height <= 0 || !this.attentionMapData)
+            return;
+        const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+        for (let i = 0; i < 100; i++) {
+            gradient.addColorStop(i / 100, `hsla(${ATTENTION_HUES[this.attentionMapData[i].colorIndex]}, 100%, 50%, 0.6)`);
+        }
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    };
+    renderAttentionmap = () => {
+        const doc = this.state?.window?.document;
+        if (!doc)
+            return null;
+        const canvas = this.overlay();
+        if (!canvas)
+            return null;
+        const ctx = canvas.getContext('2d');
+        const body = doc.body;
+        const de = doc.documentElement;
+        const contentHeight = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
+        canvas.height = Math.min(contentHeight, CANVAS_MAX_HEIGHT);
+        canvas.style.top = '0px';
+        let iframeEl = document.getElementById(this.heatmapIframeId);
+        if (!iframeEl) {
+            iframeEl = document.getElementById('clarity-snapshot-iframe');
+        }
+        const visualDiv = document.getElementById(this.heatmapVisualDivId);
+        const visualWidth = visualDiv?.clientWidth ?? 0;
+        const visualHeight = visualDiv?.clientHeight ?? 0;
+        const maxCumulativeTime = this.buildAggregatedData(doc, contentHeight, iframeEl);
+        const colorStops = new Array(100);
+        if (canvas.width > 0 && canvas.height > 0 && this.attentionMapData) {
+            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+            for (const point of this.attentionMapData) {
+                const timePercent = Math.floor((100 * point.cumulativeTime) / maxCumulativeTime);
+                const colorIndex = timePercent <= 5 ? 0 : Math.min(Math.ceil(timePercent / 10), 8);
+                if (point.scrollPos / 100 <= 1) {
+                    point.colorIndex = colorIndex;
+                    colorStops[point.scrollPos] = colorIndex;
+                }
+            }
+            // Smooth the top portion based on the fold/viewport ratio
+            const foldPixels = visualWidth >= visualHeight ? 0.15 * visualHeight : 0.2 * visualHeight;
+            const smoothUntil = Math.min(Math.ceil((foldPixels / canvas.height) * 100), 98);
+            for (let i = 0; i < smoothUntil; i++) {
+                colorStops[i] = colorStops[smoothUntil + 1];
+                this.attentionMapData[i].colorIndex = colorStops[smoothUntil + 1];
+                this.attentionMapData[i].cumulativeTime = this.attentionMapData[smoothUntil + 1].cumulativeTime;
+            }
+            // Smooth isolated single-step outliers
+            for (let i = 0; i < 100; i++) {
+                let colorIndex = colorStops[i];
+                if (i > 0 && i < 99) {
+                    const prev = colorStops[i - 1];
+                    if (prev === colorStops[i + 1] && colorIndex !== prev && Math.abs(colorIndex - prev) === 1) {
+                        colorIndex = prev;
+                        this.attentionMapData[i].colorIndex = colorIndex;
+                    }
+                }
+                gradient.addColorStop(i / 100, `hsla(${ATTENTION_HUES[colorIndex]}, 100%, 50%, 0.6)`);
+            }
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+        return this.attentionMapData;
+    };
+    buildAggregatedData = (doc, contentHeight, iframeEl) => {
+        const elementCache = new Map();
+        this.attentionMapData = Array.from({ length: 100 }, (_, i) => ({
+            scrollPos: i,
+            cumulativeTime: 0,
+            colorIndex: 0,
+        }));
+        let maxTime = 0;
+        const htmlEl = iframeEl?.contentDocument?.getElementsByTagName('HTML')?.[0] ??
+            iframeEl?.ownerDocument?.getElementsByTagName('HTML')?.[0];
+        const scrollTop = htmlEl?.scrollTop ?? 0;
+        const foldPercent = ((this.avgFold ?? 0) / contentHeight) * 100;
+        for (const dataPoint of this.attentionData ?? []) {
+            const { startElementHash, endElementHash, timeSpent } = dataPoint;
+            if (!startElementHash || !endElementHash)
+                continue;
+            let startY = elementCache.get(startElementHash);
+            let endY = elementCache.get(endElementHash);
+            if (startY === undefined) {
+                const el = this.visualizer?.get(startElementHash) ??
+                    doc.querySelector(`[data-clarity-hashbeta='${startElementHash}']`);
+                startY = Math.max(scrollTop + (el?.getBoundingClientRect().y ?? 0), 10);
+                elementCache.set(startElementHash, startY);
+            }
+            if (endY === undefined) {
+                const el = this.visualizer?.get(endElementHash) ??
+                    doc.querySelector(`[data-clarity-hashbeta='${endElementHash}']`);
+                const rect = el?.getBoundingClientRect();
+                endY = Math.min(scrollTop + (rect?.y ?? 0) + (rect?.height ?? 0), contentHeight);
+                elementCache.set(endElementHash, endY);
+            }
+            if (startY && endY && endY >= startY) {
+                const startPercent = Math.max(Math.floor((100 * startY) / contentHeight), 0);
+                const endPercent = Math.min(Math.floor((100 * endY) / contentHeight), 99);
+                if (foldPercent === 0 || endPercent - startPercent <= 2 * foldPercent) {
+                    for (let i = startPercent; i < endPercent; i++) {
+                        this.attentionMapData[i].cumulativeTime += timeSpent;
+                        maxTime = Math.max(maxTime, this.attentionMapData[i].cumulativeTime);
+                    }
+                }
+            }
+        }
+        return maxTime;
+    };
+    overlay = () => {
+        if (!this.state?.window)
+            return null;
+        const win = this.state.window;
+        const doc = win.document;
+        const de = doc.documentElement;
+        let canvas = doc.getElementById(CANVAS_ID + '-single');
+        if (!canvas) {
+            canvas = doc.createElement('CANVAS');
+            canvas.id = CANVAS_ID + '-single';
+            canvas.width = 0;
+            canvas.height = 0;
+            canvas.style.position = 'absolute';
+            canvas.style.zIndex = `${Z_INDEX}`;
+            canvas.style.display = 'block';
+            de.appendChild(canvas);
+            win.addEventListener('resize', this.reRender, true);
+            this.observer = typeof window.ResizeObserver !== 'undefined' ? new ResizeObserver(this.reRender) : null;
+            this.observer?.observe(doc.body);
+        }
+        canvas.width = de.clientWidth;
+        canvas.height = de.clientHeight;
+        canvas.style.left = `${win.pageXOffset}px`;
+        canvas.style.top = `${win.pageYOffset}px`;
+        canvas.getContext('2d')?.clearRect(0, 0, canvas.width, canvas.height);
+        return canvas;
+    };
+}
+
+class GXVisualizer extends Visualizer {
+    attentionMap;
+    originalHtml;
+    originalClearmap;
+    originalSetup;
+    constructor() {
+        super();
+        this.attentionMap = new AttentionMapRenderer(null);
+        // Save references to base implementations before overriding
+        this.originalHtml = this.html;
+        this.originalClearmap = this.clearmap;
+        this.originalSetup = this.setup;
+        this.html = this.htmlOverride;
+        this.clearmap = this.clearmapOverride;
+        this.setup = this.setupOverride;
+    }
+    htmlOverride = async (decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy) => {
+        await this.originalHtml(decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy);
+        return this;
+    };
+    setupOverride = async (target, options) => {
+        // Clear existing custom renderers before re-initializing (null-safe)
+        this.attentionMap?.clear();
+        // Initialize base Visualizer (sets this.state, this.heatmap, this.layout, etc.)
+        await this.originalSetup(target, options);
+        // Re-create custom renderers with the newly initialized PlaybackState
+        const state = this.state;
+        this.attentionMap = new AttentionMapRenderer(state);
+        return this;
+    };
+    clearmapOverride = () => {
+        this.originalClearmap();
+        this.attentionMap?.clear();
+    };
+    /**
+     * Render attention/engagement map.
+     * @param attentionData - Array of attention data points with start/end element hashes and time spent
+     * @param avgFold - Average fold pixel position (used to scale top portion)
+     * @param isSecondary - Whether to use secondary comparison iframe IDs
+     */
+    attention = (attentionData, avgFold, isSecondary = false) => {
+        this.clearmapOverride();
+        this.attentionMap.attention(attentionData, avgFold, this, isSecondary);
+    };
+}
+
 const useHeatmapRender = () => {
     const viewId = useViewIdContext();
     const data = useHeatmapDataContext((s) => s.data);
@@ -6442,11 +6720,9 @@ const useHeatmapRender = () => {
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
             return;
-        let visualizer = vizRef;
-        if (!visualizer) {
-            visualizer = new Visualizer();
+        const visualizer = vizRef ?? new GXVisualizer();
+        if (!vizRef)
             setVizRef(visualizer);
-        }
         setIsRenderViz(false);
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
@@ -6998,6 +7274,29 @@ const useWrapperRefHeight = (props) => {
     return {};
 };
 
+const useHeatmapScroll = ({ visualRef }) => {
+    const selectedScrollY = useHeatmapScrollContext((s) => s.selectedScrollY);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
+    useEffect(() => {
+        if (!selectedScrollY || !iframeHeight || !visualRef.current)
+            return;
+        const container = visualRef.current;
+        // const visualRect = container.getBoundingClientRect();
+        // const viewportHeight = visualRect.height;
+        // selectedScrollY is a percentage (0-100) → convert to content pixels → scale to visual position
+        const contentPixelY = (selectedScrollY / 100) * iframeHeight;
+        const topScaled = contentPixelY * widthScale;
+        // Skip if already visible in the current viewport
+        // const currentScrollTop = container.scrollTop;
+        // const isVisible = topScaled >= currentScrollTop && topScaled <= currentScrollTop + viewportHeight;
+        // if (isVisible) return;
+        // Center the target position vertically in the viewport
+        const targetScrollTop = Math.max(0, topScaled);
+        container.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
+    }, [selectedScrollY, widthScale, iframeHeight]); // eslint-disable-line react-hooks/exhaustive-deps
+};
+
 const useZonePositions = (_options) => {
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const getZonePosition = useCallback((zone) => {
@@ -7212,7 +7511,7 @@ const PopoverSidebar = () => {
         position: 'absolute',
         top: '24px',
         left: '24px',
-        zIndex: Z_INDEX.SIDEBAR_POPOVER,
+        zIndex: Z_INDEX$1.SIDEBAR_POPOVER,
         height: `calc(100% - ${HEATMAP_CONFIG.heightToolbar}px - ${HEATMAP_CONFIG.padding}px - 24px)`,
         width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
     };
@@ -8361,11 +8660,12 @@ const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
     }
 };
 
-const ScrollMapMinimap = ({ zones, maxUsers }) => {
+const IS_ENABLE_MINIMAP = false;
+const Minimap = ({ zones, maxUsers }) => {
     const scrollType = useHeatmapSettingContext((s) => s.scrollType);
     const showMinimap = useHeatmapScrollContext((s) => s.showMinimap);
     const isScrollType = [EScrollType.Attention].includes(scrollType ?? EScrollType.Depth);
-    if (!showMinimap || !isScrollType)
+    if (!showMinimap || !isScrollType || !IS_ENABLE_MINIMAP)
         return null;
     return (jsx("div", { style: {
             position: 'fixed',
@@ -8434,10 +8734,10 @@ const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent }) =
         return null;
     if (!position)
         return null;
-    return (jsxs(Fragment, { children: [jsx(ScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap || [] }), jsx(ScrollMapMinimap, { zones: zones, maxUsers: maxUsers })] }));
+    return (jsxs(Fragment, { children: [jsx(ScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap || [] }), jsx(Minimap, { zones: zones, maxUsers: maxUsers })] }));
 };
 
-const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
+const ScrollOverlay = ({ wrapperRef, iframeRef }) => {
     const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const overlayRef = useRef(null);
@@ -8475,71 +8775,74 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
         }, children: jsx(HoverZones, { position: position, currentScrollPercent: currentScrollPercent, iframeRef: iframeRef, wrapperRef: wrapperRef }) }));
 };
 
-const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
-    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
-    const { getZonePosition } = useZonePositions();
-    const averageFold = dataInfo?.averageFold || 50;
-    const position = getZonePosition({
-        startY: averageFold,
-        endY: averageFold,
-    });
-    if (!position)
-        return null;
+const MarkerLine = ({ top, label, bgColor = 'white', lineColor = '#303030', labelColor = '#303030', variant = 'dashed', zIndex = 1, }) => {
     return (jsx("div", { style: {
             position: 'absolute',
-            top: `${position.top}px`,
+            top: `${top}px`,
             left: 0,
             width: '100%',
-            height: '2px',
-            backgroundColor: '#0078D4',
+            height: '0px',
+            borderBottom: `2px ${variant} ${lineColor}`,
+            // height: isSolid ? '2px' : '0px',
+            // boxShadow: isSolid ? `0 0 4px ${lineColor}40` : undefined,
             pointerEvents: 'none',
-            zIndex: 2,
-            boxShadow: '0 0 4px rgba(0,120,212,0.5)',
+            zIndex,
             display: 'flex',
             alignItems: 'center',
-        }, children: jsxs("div", { style: {
+        }, children: jsx("div", { style: {
                 position: 'absolute',
-                padding: '8px',
-                backgroundColor: 'rgba(0, 120, 212, 0.9)',
-                color: 'white',
-                fontSize: '16px',
-                fontWeight: 600,
+                padding: '6px 8px',
+                backgroundColor: bgColor,
+                color: labelColor,
+                fontSize: '14px',
+                fontWeight: 500,
                 borderRadius: '4px',
                 whiteSpace: 'nowrap',
-                left: '12px',
-                minWidth: '120px',
+                left: '16px',
+                minWidth: '100px',
                 textAlign: 'center',
-            }, children: ["Average fold - ", averageFold.toFixed(0), "%"] }) }));
+            }, children: label }) }));
 };
 
-const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
+const AverageFold = ({ iframeRef, wrapperRef }) => {
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
+    const { getZonePosition } = useZonePositions();
+    const averageFold = dataInfo?.averageFold || 50;
+    const position = getZonePosition({
+        startY: averageFold,
+        endY: averageFold,
+    });
+    if (!position)
+        return null;
+    return jsx(MarkerLine, { top: position.top, label: `Average fold`, zIndex: 2 });
+};
+
+const ScrollMarkers = ({ iframeRef, wrapperRef, visualRef }) => {
     const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
     const scrollType = useHeatmapSettingContext((s) => s.scrollType);
     const { getZonePosition } = useZonePositions();
+    useHeatmapScroll({ visualRef });
     if (!scrollmap || scrollmap.length === 0)
         return null;
-    const findScrollPositionForUserPercent = (targetPercent) => {
-        for (let i = 0; i < scrollmap.length; i++) {
-            if (scrollmap[i].percUsers <= targetPercent) {
-                if (i > 0) {
-                    return scrollmap[i - 1].scrollReachY;
-                }
-                return scrollmap[i].scrollReachY;
-            }
-        }
-        return scrollmap[scrollmap.length - 1]?.scrollReachY || null;
+    // Matches Clarity's addInfoMarkers logic:
+    // find the closest percUsers entry, then validate it's within ±MARKER_RANGE
+    const MARKER_RANGE = 2;
+    const findScrollReachY = (targetPercent) => {
+        const closest = scrollmap.reduce((prev, curr) => Math.abs(curr.percUsers - targetPercent) < Math.abs(prev.percUsers - targetPercent) ? curr : prev);
+        if (Math.abs(closest.percUsers - targetPercent) > MARKER_RANGE)
+            return null;
+        return closest.scrollReachY;
     };
     const boundaries = [
         { percent: 75, label: '75%', color: '#10B981' },
         { percent: 50, label: '50%', color: '#F59E0B' },
         { percent: 25, label: '25%', color: '#EF4444' },
-        { percent: 5, label: '5%', color: '#8B5CF6' },
     ];
     const isScrollDepth = scrollType === EScrollType.Depth;
     if (!isScrollDepth)
         return null;
     return (jsx(Fragment, { children: boundaries.map((boundary) => {
-            const scrollY = findScrollPositionForUserPercent(boundary.percent);
+            const scrollY = findScrollReachY(boundary.percent);
             if (scrollY === null)
                 return null;
             const position = getZonePosition({
@@ -8548,50 +8851,14 @@ const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
             });
             if (!position)
                 return null;
-            return (jsx("div", { className: `marker-boundary-line-${boundary.percent}`, style: {
-                    position: 'absolute',
-                    top: `${position.top}px`,
-                    left: 0,
-                    transformOrigin: 'left center',
-                    width: '100%',
-                    height: '0px',
-                    // borderBottom: `2px dashed #323130`,
-                    borderBottom: `2px solid ${boundary.color}`,
-                    // background: 'repeating-linear-gradient(90deg, #323130, transparent 2px 3px)',
-                    zIndex: 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                }, children: jsx("div", { style: {
-                        position: 'absolute',
-                        padding: '8px',
-                        backgroundColor: boundary.color,
-                        color: 'white',
-                        fontSize: '16px',
-                        fontWeight: 600,
-                        borderRadius: '4px',
-                        whiteSpace: 'nowrap',
-                        left: '12px',
-                        minWidth: '120px',
-                        textAlign: 'center',
-                        // textAlign: 'center',
-                        // padding: '8px',
-                        // paddingInline: '8px',
-                        // fontSize: '16px',
-                        // background: '#fff',
-                        // width: 'auto',
-                        // borderRadius: '4px',
-                        // position: 'absolute',
-                        // left: '12px',
-                        // minWidth: '120px',
-                    }, children: boundary.label }) }, boundary.label));
+            return jsx(MarkerLine, { top: position.top, label: boundary.label }, boundary.label);
         }) }));
 };
 
 const SCROLL_TYPES = [EHeatmapType.Scroll];
-const VizScrollMap = ({ iframeRef, wrapperRef }) => {
+const VizScrollMap = ({ iframeRef, wrapperRef, visualRef }) => {
     const heatmapType = useHeatmapSettingContext((s) => s.heatmapType);
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
-    // useRenderCount('VizScrollMap');
     const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType ?? EHeatmapType.Click);
     if (!iframeHeight || !isHeatmapScroll)
         return null;
@@ -8603,7 +8870,7 @@ const VizScrollMap = ({ iframeRef, wrapperRef }) => {
             height: '100%',
             transform: 'translateZ(0)',
             zIndex: 2,
-        }, children: [jsx(ScrollmapMarker, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(AverageFoldLine, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(ScrollMapOverlay, { wrapperRef: wrapperRef, iframeRef: iframeRef })] }));
+        }, children: [jsx(ScrollMarkers, { iframeRef: iframeRef, wrapperRef: wrapperRef, visualRef: visualRef }), jsx(AverageFold, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(ScrollOverlay, { iframeRef: iframeRef, wrapperRef: wrapperRef })] }));
 };
 
 const VizLoadingCanvas = () => {
@@ -8674,7 +8941,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizClickmap, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ...HEATMAP_IFRAME, id: `clarity-iframe-${viewId}`, ref: iframeRef, width: contentWidth, height: wrapperHeight }), jsx(VizLoadingCanvas, {}), jsx(VizScrollMap, { iframeRef: iframeRef, wrapperRef: visualRef })] }));
+    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizClickmap, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ...HEATMAP_IFRAME, id: `clarity-iframe-${viewId}`, ref: iframeRef, width: contentWidth, height: wrapperHeight }), jsx(VizLoadingCanvas, {}), jsx(VizScrollMap, { visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef })] }));
 };
 
 const VizLoading = () => {
@@ -8785,10 +9052,10 @@ const ContentTopBar = () => {
         }, children: CompTopBar && jsx(CompTopBar, {}) }));
 };
 
-const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataInfo, isLoading, isLoadingCanvas, }) => {
+const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, attentionMap, controls, dataInfo, isLoading, isLoadingCanvas, }) => {
     useRegisterControl(controls);
     useRegisterData(data, dataInfo);
-    useRegisterHeatmap({ clickmap, scrollmap, clickAreas });
+    useRegisterHeatmap({ clickmap, scrollmap, clickAreas, attentionMap });
     useRegisterConfig({ isLoading, isLoadingCanvas });
     // performanceLogger.configure({
     //   enabled: true,
@@ -8819,4 +9086,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapVizContext, useHeatmapVizRectContext, useHeatmapWidthByDevice, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX$1 as Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapVizContext, useHeatmapVizRectContext, useHeatmapWidthByDevice, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };