@gemx-dev/heatmap-react 3.5.92-dev.39 → 3.5.92-dev.40

package/dist/esm/index.js

@@ -1758,1376 +1758,1444 @@ const HOVERED_ELEMENT_ID_BASE = 'gx-hm-hovered-element';
 const SECONDARY_HOVERED_ELEMENT_ID_BASE = 'gx-hm-secondary-hovered-element';
 const DEFAULT_POSITION_MODE = 'absolute';
 
-function isElementInViewport(elementRect, visualRef, scale) {
-    if (!elementRect)
-        return false;
-    const visualRect = visualRef.current?.getBoundingClientRect();
-    if (!visualRect)
-        return false;
-    // Element position relative to the document (or container's content)
-    const elementTop = elementRect.top * scale;
-    const elementBottom = (elementRect.top + elementRect.height) * scale;
-    // Current scroll position
-    const scrollTop = visualRef.current?.scrollTop || 0;
-    const viewportHeight = visualRect.height;
-    // Visible viewport range in the scrollable content
-    const viewportTop = scrollTop;
-    const viewportBottom = scrollTop + viewportHeight;
-    // Check if element is within the visible viewport
-    // Element is visible if it overlaps with the viewport
-    return elementBottom > viewportTop && elementTop < viewportBottom;
-}
-function isElementRectInViewport(params) {
-    const { candidate, options } = params;
-    const { rectDimensions, visualViewport: visualRect, widthScale: scale, containerRect } = options;
-    if (!visualRect)
-        return false;
-    const { calloutRect, targetAbsoluteRect } = rectDimensions;
-    const { placement, horizontalAlign } = candidate;
-    // candidate position (relative to element) scaled + element absolute position in iframe
-    const offsetTop = (targetAbsoluteRect?.top ?? 0) * scale;
-    const offsetLeft = (targetAbsoluteRect?.left ?? 0) * scale;
-    // Base position in scroll space
-    const baseTop = candidate.top * scale + offsetTop;
-    const baseLeft = candidate.left * scale + offsetLeft;
-    const { width: calloutWidth, height: calloutHeight } = calloutRect;
-    const transformOffsetY = placement === 'top' ? calloutHeight * (scale - 1) : 0;
-    const transformOffsetX = horizontalAlign !== 'left' ? calloutWidth * (scale - 1) : 0;
-    const visualTop = baseTop + transformOffsetY + CALLOUT_ARROW_SIZE;
-    const visualBottom = visualTop + calloutHeight;
-    const visualLeft = baseLeft + transformOffsetX;
-    const visualRight = visualLeft + calloutWidth;
-    // Viewport bounds
-    const scrollTop = visualRect?.scrollTop || 0;
-    const scrollLeft = visualRect?.scrollLeft || 0;
-    const viewportTop = scrollTop;
-    const viewportBottom = scrollTop + visualRect.height;
-    const viewportLeft = scrollLeft;
-    const viewportRight = scrollLeft + (containerRect?.width ?? visualRect.width);
-    // Check if element is fully within the visible viewport
-    const isInVertical = visualTop > viewportTop && visualBottom < viewportBottom;
-    const isInHorizontal = visualLeft > viewportLeft && visualRight < viewportRight;
-    return isInVertical && isInHorizontal;
-}
-
-function isMobileDevice(userAgent) {
-    if (!userAgent)
-        return false;
-    return /android|webos|iphone|ipad|ipod|blackberry|windows phone|opera mini|iemobile|mobile|silk|fennec|bada|tizen|symbian|nokia|palmsource|meego|sailfish|kindle|playbook|bb10|rim/i.test(userAgent);
+function getElementLayout(element) {
+    if (!element?.getBoundingClientRect)
+        return null;
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0)
+        return null;
+    return {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+    };
 }
+const getElementRank = (hash, elements) => {
+    if (!elements)
+        return 0;
+    return elements.findIndex((e) => e.hash === hash) + 1;
+};
+const buildElementInfo = (hash, rect, heatmapInfo) => {
+    if (!rect || !heatmapInfo)
+        return null;
+    const info = heatmapInfo.clickMapMetrics?.[hash];
+    if (!info)
+        return null;
+    const rank = getElementRank(hash, heatmapInfo.sortedElements);
+    const clicks = info.totalClicked.value ?? 0;
+    const selector = info.selector ?? '';
+    const baseInfo = {
+        hash,
+        clicks,
+        rank,
+        selector,
+    };
+    return {
+        ...baseInfo,
+        ...rect,
+    };
+};
+// GETTERS
+const getScaledCalloutRect = (_element, _widthScale) => {
+    return {
+        width: 230,
+        height: 268,
+    };
+};
+const getStyleFromCandidate = (candidate, widthScale) => {
+    const { horizontalAlign, placement, top, left } = candidate;
+    const yTransformAlign = placement === 'top' ? 'bottom' : 'top';
+    const xTransformAlign = horizontalAlign === 'left' ? 'left' : 'right';
+    return {
+        top,
+        left,
+        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}`,
+    };
+};
 
-/**
- * Get all elements at a specific point (x, y), with support for Shadow DOM
- */
-function getElementsAtPoint(doc, x, y, options = {}) {
-    const { filterFn, ignoreCanvas = true, visitedShadowRoots = new Set() } = options;
-    // Get all elements at this point
-    let elementsAtPoint = doc.elementsFromPoint(x, y);
-    // Filter out canvas elements if requested
-    if (ignoreCanvas) {
-        elementsAtPoint = elementsAtPoint.filter((el) => !isIgnoredCanvas(el));
+const getContainerViewport = (containerElm, _scale) => {
+    if (containerElm) {
+        const containerRect = containerElm.getBoundingClientRect();
+        const width = containerRect.width;
+        const height = containerRect.height;
+        return { width, height };
     }
-    // Apply custom filter if provided
-    if (filterFn) {
-        const matchedElement = elementsAtPoint.find(filterFn);
-        // If matched element has Shadow DOM and we haven't visited it yet, recurse
-        if (matchedElement?.shadowRoot && !visitedShadowRoots.has(matchedElement.shadowRoot)) {
-            visitedShadowRoots.add(matchedElement.shadowRoot);
-            return getElementsAtPoint(matchedElement.shadowRoot, x, y, {
-                ...options,
-                visitedShadowRoots,
-            });
-        }
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+};
+const getVisualDomViewport = (visualDomElm, scale = 1) => {
+    if (visualDomElm) {
+        const rect = visualDomElm.getBoundingClientRect();
+        return {
+            width: rect.width,
+            height: rect.height,
+            scrollTop: visualDomElm.scrollTop,
+            scrollLeft: visualDomElm.scrollLeft,
+        };
     }
-    return elementsAtPoint;
-}
-/**
- * Get the element at a specific point (x, y)
- */
-const getElementAtPoint = (doc, x, y) => {
-    let el = null;
-    if ('caretPositionFromPoint' in doc) {
-        el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        scrollTop: 0,
+        scrollLeft: 0,
+    };
+};
+const getElementDimensions = (options) => {
+    const { targetElm, calloutElm, scale, containerElm, visualViewport } = options;
+    const targetRect = targetElm.getBoundingClientRect();
+    const calloutRect = getScaledCalloutRect();
+    const containerRect = containerElm.getBoundingClientRect();
+    const scaledCalloutRect = getScaledCalloutRect();
+    if (scale && containerRect) {
+        const relativeTop = (targetRect.top - containerRect.top) / scale;
+        const relativeLeft = (targetRect.left - containerRect.left) / scale;
+        const scaledWidth = targetRect.width / scale;
+        const scaledHeight = targetRect.height / scale;
+        const hasSpaceForCallout = hasCalloutSpaceInViewport(targetElm, containerRect, visualViewport);
+        const bottom = hasSpaceForCallout ? relativeTop + scaledHeight : relativeTop + 1;
+        const left = hasSpaceForCallout ? relativeLeft : relativeLeft + 10;
+        return {
+            targetRect: {
+                ...targetRect,
+                top: relativeTop,
+                left: left,
+                right: relativeLeft + scaledWidth,
+                bottom,
+                width: scaledWidth,
+                height: scaledHeight,
+            },
+            calloutRect: scaledCalloutRect,
+        };
     }
-    el = el ?? doc.elementFromPoint(x, y);
-    let element = el;
-    while (element && element.nodeType === Node.TEXT_NODE) {
-        element = element.parentElement;
+    if (scale) {
+        return {
+            targetRect,
+            calloutRect: scaledCalloutRect,
+        };
     }
-    return element;
+    return { targetRect, calloutRect };
+};
+const hasCalloutSpaceInViewport = (targetElm, containerRect, visualViewport) => {
+    const targetRect = targetElm.getBoundingClientRect();
+    const calloutTotalHeight = getScaledCalloutRect().height + CALLOUT_ARROW_SIZE;
+    // Use visual viewport height (visible area), fallback to container
+    const viewportHeight = visualViewport?.height ?? containerRect.height;
+    // Screen pixels — element position relative to container top
+    const elementTop = targetRect.top - containerRect.top;
+    const elementBottom = elementTop + targetRect.height;
+    const fitsOnTop = elementTop >= calloutTotalHeight;
+    const fitsOnBottom = elementBottom + calloutTotalHeight <= viewportHeight;
+    return fitsOnTop || fitsOnBottom;
 };
-function getElementHash(element) {
-    if (!element)
-        return null;
-    return element.getAttribute('data-clarity-hashbeta') || element.getAttribute('data-clarity-hashalpha');
-}
 
-class Logger {
-    config = {
-        enabled: false,
-        prefix: '',
-        timestamp: false,
-    };
-    /**
-     * Cấu hình logger
-     * @param config - Cấu hình logger
-     */
-    configure(config) {
-        this.config = { ...this.config, ...config };
-    }
-    /**
-     * Lấy cấu hình hiện tại
-     */
-    getConfig() {
-        return { ...this.config };
+const getAlignmentOrder = (alignment) => {
+    switch (alignment) {
+        case 'center':
+            return ['center', 'left', 'right'];
+        case 'left':
+            return ['left', 'center', 'right'];
+        case 'right':
+            return ['right', 'center', 'left'];
     }
-    /**
-     * Bật logger
-     */
-    enable() {
-        this.config.enabled = true;
+};
+const calculateLeftPosition = (align, options) => {
+    const { rectDimensions, offset } = options;
+    const { targetRect, calloutRect } = rectDimensions;
+    const { x: hozOffset } = offset;
+    const relLeft = targetRect.left;
+    const relRight = targetRect.right;
+    const relWidth = targetRect.width;
+    const calloutWidth = calloutRect.width;
+    let left;
+    switch (align) {
+        case 'left':
+            left = relLeft + hozOffset;
+            break;
+        case 'right':
+            left = relRight - calloutWidth - hozOffset;
+            break;
+        case 'center':
+        default:
+            left = relLeft + relWidth / 2 - calloutWidth / 2;
+            break;
     }
-    /**
-     * Tắt logger
-     */
-    disable() {
-        this.config.enabled = false;
-    }
-    /**
-     * Format message với prefix và timestamp
-     */
-    formatMessage(...args) {
-        const parts = [];
-        if (this.config.timestamp) {
-            parts.push(`[${new Date().toISOString()}]`);
-        }
-        if (this.config.prefix) {
-            parts.push(`[${this.config.prefix}]`);
-        }
-        if (parts.length > 0) {
-            return [parts.join(' '), ...args];
-        }
-        return args;
-    }
-    /**
-     * Log message
-     */
-    log(...args) {
-        if (!this.config.enabled)
-            return;
-        console.log(...this.formatMessage(...args));
-    }
-    /**
-     * Log info message
-     */
-    info(...args) {
-        if (!this.config.enabled)
-            return;
-        console.info(...this.formatMessage(...args));
-    }
-    /**
-     * Log warning message
-     */
-    warn(...args) {
-        if (!this.config.enabled)
-            return;
-        console.warn(...this.formatMessage(...args));
-    }
-    /**
-     * Log error message
-     */
-    error(...args) {
-        if (!this.config.enabled)
-            return;
-        console.error(...this.formatMessage(...args));
-    }
-    /**
-     * Log debug message
-     */
-    debug(...args) {
-        if (!this.config.enabled)
-            return;
-        console.debug(...this.formatMessage(...args));
-    }
-    /**
-     * Log table data
-     */
-    table(data) {
-        if (!this.config.enabled)
-            return;
-        console.table(data);
-    }
-    /**
-     * Start a group
-     */
-    group(label) {
-        if (!this.config.enabled)
-            return;
-        console.group(...this.formatMessage(label));
-    }
-    /**
-     * Start a collapsed group
-     */
-    groupCollapsed(label) {
-        if (!this.config.enabled)
-            return;
-        console.groupCollapsed(...this.formatMessage(label));
-    }
-    /**
-     * End a group
-     */
-    groupEnd() {
-        if (!this.config.enabled)
-            return;
-        console.groupEnd();
-    }
-    /**
-     * Start a timer
-     */
-    time(label) {
-        if (!this.config.enabled)
-            return;
-        console.time(label);
+    // No clamping - let validation determine if position is valid
+    // If position would overflow, valid = false and system chooses different placement
+    return left;
+};
+const calculateVerticalPosition = (placement, options) => {
+    const { rectDimensions, padding, arrowSize, offset } = options;
+    const { targetRect, calloutRect } = rectDimensions;
+    const { y: offsetY } = offset;
+    return placement === 'top'
+        ? targetRect.top - calloutRect.height - padding - arrowSize + offsetY
+        : targetRect.bottom + padding + arrowSize + offsetY;
+};
+const calculateHorizontalPosition = (placement, options) => {
+    const { rectDimensions, padding, arrowSize } = options;
+    const { targetRect, calloutRect } = rectDimensions;
+    const top = targetRect.top + targetRect.height / 2 - calloutRect.height / 2;
+    const left = placement === 'right'
+        ? targetRect.right + padding + arrowSize
+        : targetRect.left - calloutRect.width - padding - arrowSize;
+    return { top, left };
+};
+
+const EPSILON = 0.1; // Tolerance for floating point errors
+const isLeftPositionValid = (leftPos, options) => {
+    const { rectDimensions, viewport, padding, offset } = options;
+    const { width: calloutWidth } = rectDimensions.calloutRect;
+    const { width: viewportWidth } = viewport;
+    const absLeft = rectDimensions.targetAbsoluteRect?.left ?? 0;
+    const relLeftPos = absLeft + leftPos - offset.x;
+    const calloutWidthScaled = calloutWidth / options.widthScale;
+    const maxViewportWidth = viewportWidth + EPSILON;
+    const isValidLeft = relLeftPos >= padding - EPSILON;
+    const isRectCalloutShowValid = relLeftPos + calloutWidthScaled - EPSILON <= maxViewportWidth / options.widthScale;
+    return isValidLeft && isRectCalloutShowValid;
+};
+const isRightPositionValid = (leftPos, options) => {
+    const { rectDimensions, viewport } = options;
+    const { width: calloutWidth } = rectDimensions.calloutRect;
+    const { width: viewportWidth } = viewport;
+    const calloutWidthScaled = calloutWidth / options.widthScale;
+    const absLeft = rectDimensions.targetAbsoluteRect?.left ?? 0;
+    const relLeftPos = absLeft + leftPos;
+    const maxViewportWidth = viewportWidth + EPSILON;
+    const isValidRight = relLeftPos - calloutWidthScaled - EPSILON <= maxViewportWidth / options.widthScale;
+    return isValidRight;
+};
+const isVerticalPositionValid = (placement, options) => {
+    const { rectDimensions, viewport, padding, arrowSize } = options;
+    const { targetRect, targetAbsoluteRect, calloutRect } = rectDimensions;
+    const { height: viewportHeight } = viewport;
+    const { height: calloutHeight } = calloutRect;
+    const relativeTop = (targetAbsoluteRect?.top ?? 0) + targetRect.top;
+    const calloutHeightScaled = calloutHeight / options.widthScale;
+    switch (placement) {
+        case 'top':
+            return relativeTop - calloutHeightScaled - padding - arrowSize > -EPSILON;
+        case 'bottom':
+            return targetRect.bottom + calloutHeight + padding + arrowSize < viewportHeight + EPSILON;
     }
-    /**
-     * End a timer
-     */
-    timeEnd(label) {
-        if (!this.config.enabled)
-            return;
-        console.timeEnd(label);
+};
+const isHorizontalPositionValid = (placement, options) => {
+    const { rectDimensions, viewport, padding, arrowSize } = options;
+    const { targetRect, targetAbsoluteRect, calloutRect } = rectDimensions;
+    const { width: viewportWidth } = viewport;
+    const { width: calloutWidth } = calloutRect;
+    const relativeLeft = (targetAbsoluteRect?.left ?? 0) + targetRect.left;
+    const relativeRight = relativeLeft + targetRect.width;
+    switch (placement) {
+        case 'right':
+            return relativeRight + calloutWidth + padding + arrowSize < viewportWidth + EPSILON;
+        case 'left':
+            return relativeLeft - calloutWidth - padding - arrowSize > -EPSILON;
     }
-}
-// Export singleton instance
-const logger$3 = new Logger();
-// Export factory function để tạo logger với config riêng
-function createLogger(config = {}) {
-    const instance = new Logger();
-    instance.configure(config);
-    return instance;
-}
+};
 
-/**
- * Create an observable value with subscribe/unsubscribe pattern
- */
-function createObservable(initialValue) {
-    const subscribers = new Set();
-    const observable = {
-        value: initialValue,
-        observe: (callback) => {
-            subscribers.add(callback);
-            // Immediately call with current value
-            if (observable.value !== undefined) {
-                callback(observable.value);
+const generateVerticalPositionCandidates = (options) => {
+    const { alignment } = options;
+    const candidates = [];
+    const placements = ['top', 'bottom'];
+    placements.forEach((placement) => {
+        const verticalPos = calculateVerticalPosition(placement, options);
+        const verticalValid = isVerticalPositionValid(placement, options);
+        const alignmentOrder = getAlignmentOrder(alignment);
+        alignmentOrder.forEach((align) => {
+            const leftPos = calculateLeftPosition(align, options);
+            const isValidLeft = isLeftPositionValid(leftPos, options);
+            const isValidRight = isRightPositionValid(leftPos, options);
+            const candidate = { placement, top: verticalPos, left: leftPos, horizontalAlign: align, valid: false };
+            switch (align) {
+                case 'left':
+                    candidate.valid = verticalValid && isValidLeft;
+                    break;
+                case 'right':
+                    candidate.valid = verticalValid && isValidRight;
+                    break;
             }
-        },
-        unobserve: (callback) => {
-            subscribers.delete(callback);
-        },
-        update: (newValue) => {
-            observable.value = newValue;
-            // Notify all subscribers
-            subscribers.forEach((callback) => {
-                callback(newValue);
-            });
-        },
-    };
-    return observable;
-}
-
-/**
- * Given a list of items where each item represents the START of a bucket,
- * returns each item enriched with `startY` (= position) and `endY` (= next position, or 100 for the last bucket).
- *
- * Works for any scroll data shape (depth, attention, revenue).
- */
-function buildBuckets(items, getPosition) {
-    const sorted = [...items].sort((a, b) => getPosition(a) - getPosition(b));
-    return sorted.map((item, i) => ({
-        ...item,
-        startY: getPosition(item),
-        endY: sorted[i + 1] !== undefined ? getPosition(sorted[i + 1]) : 100,
+            candidates.push(candidate);
+        });
+    });
+    return candidates;
+};
+const generateHorizontalPositionCandidates = (options) => {
+    const placements = ['left', 'right'];
+    return placements.map((placement) => {
+        const { top, left } = calculateHorizontalPosition(placement, options);
+        const isValidHorizontal = isHorizontalPositionValid(placement, options);
+        const candidate = { placement, top, left, horizontalAlign: 'center', valid: false };
+        candidate.valid = isValidHorizontal;
+        return candidate;
+    });
+};
+const generateAllCandidates = (options) => {
+    const verticalCandidates = generateVerticalPositionCandidates(options);
+    const horizontalCandidates = generateHorizontalPositionCandidates(options);
+    const allCandidates = [...verticalCandidates, ...horizontalCandidates];
+    return allCandidates.map((candidate) => ({
+        ...candidate,
+        isVisibleInViewport: isElementRectInViewport({ candidate, options }),
     }));
-}
+};
 
-function sortEvents(a, b) {
-    return a.time - b.time;
-}
+const selectBestPosition = (candidates) => {
+    // return candidates.find((p) => p.valid && p.isVisibleInViewport) || candidates[0];
+    return candidates.find((p) => p.valid) || candidates[0];
+};
+const selectBestPositionForClick = (candidates) => {
+    return candidates.find((p) => p.isVisibleInViewport) || candidates.find((p) => p.valid) || candidates[0];
+};
+const constrainToViewport = (candidate, options) => {
+    const { containerRect, padding, rectDimensions, viewport } = options;
+    const { calloutRect } = rectDimensions;
+    const { left: leftPos, top: topPos } = candidate;
+    if (containerRect) {
+        const containerTop = containerRect.top + padding;
+        const containerLeft = containerRect.left + padding;
+        const containerRight = containerRect.right - calloutRect.width - padding;
+        const containerBottom = containerRect.bottom - calloutRect.height - padding;
+        const left = Math.max(containerLeft, Math.min(leftPos, containerRight));
+        const top = Math.max(containerTop, Math.min(topPos, containerBottom));
+        return { top, left };
+    }
+    const viewportLeft = padding;
+    const viewportTop = padding;
+    const viewportRight = viewport.width - calloutRect.width - padding;
+    const viewportBottom = viewport.height - calloutRect.height - padding;
+    const left = Math.max(viewportLeft, Math.min(leftPos, viewportRight));
+    const top = Math.max(viewportTop, Math.min(topPos, viewportBottom));
+    return { top, left };
+};
 
+const getScrollOffset = (visualRef) => {
+    if (!visualRef?.current)
+        return;
+    return {
+        top: visualRef.current.scrollTop,
+        left: visualRef.current.scrollLeft,
+    };
+};
 /**
- * Throttle a function using requestAnimationFrame
- * Ensures the callback is called at most once per animation frame
+ * Create adjusted container rect for absolute positioning
+ * - With scroll: represents visible area in container coordinates
+ * - Without scroll: represents full container in container coordinates
  */
-const throttleRAF = (callback) => {
-    let rafId = null;
-    let latestArgs = null;
-    const throttled = (...args) => {
-        // Store the latest arguments
-        latestArgs = args;
-        // If already scheduled, do nothing
-        if (rafId !== null)
+const createAdjustedContainerRect = (options) => {
+    const { containerElm, scale, isAbsolute, visualRef } = options;
+    const containerRect = containerElm.getBoundingClientRect();
+    const scrollOffset = getScrollOffset(visualRef);
+    // No scale = fixed positioning, use raw rect
+    if (!scale)
+        return containerRect;
+    const scaledWidth = containerRect.width / scale;
+    const scaledHeight = containerRect.height / scale;
+    // Absolute positioning with scroll offset
+    if (isAbsolute && scrollOffset) {
+        return {
+            ...containerRect,
+            top: scrollOffset.top,
+            left: scrollOffset.left,
+            right: scrollOffset.left + scaledWidth,
+            bottom: scrollOffset.top + scaledHeight,
+            width: scaledWidth,
+            height: scaledHeight,
+        };
+    }
+    // Absolute positioning without scroll
+    return {
+        ...containerRect,
+        top: 0,
+        left: 0,
+        right: scaledWidth,
+        width: scaledWidth,
+        bottom: scaledHeight,
+        height: scaledHeight,
+    };
+};
+const calcCalloutPosition = (options) => {
+    const { targetElm, calloutElm, setPosition, positionMode, widthScale, visualRef } = options;
+    const offset = options.offset ?? CALLOUT_OFFSET;
+    const alignment = options.alignment ?? CALLOUT_ALIGNMENT;
+    const padding = CALLOUT_PADDING;
+    const arrowSize = CALLOUT_ARROW_SIZE;
+    return () => {
+        const isAbsolute = positionMode === 'absolute';
+        const scale = isAbsolute ? widthScale : 1;
+        // Determine container element based on positioning mode
+        // - Absolute: portal container (parent of callout)
+        // - Fixed: visual container (scrollable area)
+        const containerElm = isAbsolute ? calloutElm.parentElement : visualRef?.current;
+        if (!containerElm)
             return;
-        // Schedule the callback for the next animation frame
-        rafId = requestAnimationFrame(() => {
-            if (latestArgs !== null) {
-                callback(...latestArgs);
-                latestArgs = null;
-            }
-            rafId = null;
-        });
+        const viewport = getContainerViewport(containerElm);
+        const visualViewport = getVisualDomViewport(visualRef?.current, scale);
+        const rectDimensions = getElementDimensions({ targetElm, calloutElm, scale, containerElm, visualViewport });
+        const containerRect = createAdjustedContainerRect({ containerElm, scale, isAbsolute, visualRef });
+        const options = {
+            rectDimensions,
+            viewport,
+            visualViewport,
+            alignment,
+            offset,
+            padding,
+            arrowSize,
+            containerRect,
+            widthScale,
+        };
+        const candidates = generateAllCandidates(options);
+        const candidate = selectBestPosition(candidates);
+        // Constrain to viewport/container bounds
+        const constrainedCandidate = constrainToViewport(candidate, options);
+        // Final callout position
+        const finalPosition = {
+            top: constrainedCandidate.top,
+            left: constrainedCandidate.left,
+            placement: candidate.placement,
+            horizontalAlign: candidate.horizontalAlign,
+        };
+        setPosition(finalPosition);
+    };
+};
+const getClickTargetRect = (options) => {
+    const { mouseX, mouseY, element, widthScale } = options;
+    const scaledWidth = element.width * widthScale;
+    const scaledHeight = element.height * widthScale;
+    // Small elements: use element rect so callout aligns to the full element
+    // targetRect is relative to the overlay div (.heatmapElement), so origin = (0, 0)
+    if (scaledWidth < 500 && scaledHeight < 500) {
+        return {
+            top: 0,
+            left: 0,
+            right: element.width,
+            bottom: element.height,
+            width: element.width,
+            height: element.height,
+            x: 0,
+            y: 0,
+            toJSON: () => ({}),
+        };
+    }
+    // Large elements: use mouse position (also relative to overlay div)
+    return {
+        top: mouseY,
+        left: mouseX,
+        right: mouseX + 1,
+        bottom: mouseY + 1,
+        width: 1,
+        height: 1,
+        x: mouseX,
+        y: mouseY,
+        toJSON: () => ({}),
+    };
+};
+const calcCalloutPositionAbsolute = (props) => {
+    const { widthScale, calloutElm, containerElm, element, visualRef, setPosition } = props;
+    const mousePosition = element?.mousePosition;
+    if (!mousePosition)
+        return;
+    const padding = props.padding ?? CALLOUT_PADDING;
+    const arrowSize = props.arrowSize ?? CALLOUT_ARROW_SIZE;
+    const rawCalloutRect = calloutElm.getBoundingClientRect();
+    if (rawCalloutRect.width === 0 || rawCalloutRect.height === 0)
+        return;
+    const containerRect = containerElm.getBoundingClientRect();
+    const mouseX = mousePosition.x;
+    const mouseY = mousePosition.y;
+    const targetRect = getClickTargetRect({ mouseX, mouseY, element, widthScale });
+    const rectDimensions = {
+        targetRect,
+        calloutRect: getScaledCalloutRect(),
+        targetAbsoluteRect: {
+            top: element.top,
+            left: element.left,
+        },
+    };
+    const { viewportInfo } = calcPositionDetail({ element, widthScale, visualRef: visualRef ?? undefined });
+    const options = {
+        rectDimensions,
+        viewport: viewportInfo,
+        alignment: CALLOUT_ALIGNMENT,
+        offset: CALLOUT_OFFSET,
+        padding,
+        arrowSize,
+        containerRect,
+        widthScale,
+        visualViewport: viewportInfo,
+    };
+    const candidates = generateAllCandidates(options);
+    const bestPosition = selectBestPositionForClick(candidates);
+    setPosition(bestPosition);
+};
+const calcPositionDetail = ({ element, widthScale, visualRef }) => {
+    const mousePosition = element.mousePosition;
+    const visual = visualRef?.current;
+    const viewportInfo = getVisualDomViewport(visual, widthScale);
+    const elementInfo = {
+        ...element,
+        top: element.top * widthScale,
+        left: element.left * widthScale,
+        width: element.width * widthScale,
+        height: element.height * widthScale,
     };
-    // Add cancel method to clear pending RAF
-    throttled.cancel = () => {
-        if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-            rafId = null;
-            latestArgs = null;
-        }
+    const result = {
+        elementInfo,
+        viewportInfo,
+        elementToIframe: { x: elementInfo.left, y: elementInfo.top },
+        elementToViewport: { x: elementInfo.left - viewportInfo.scrollLeft, y: elementInfo.top - viewportInfo.scrollTop },
     };
-    return throttled;
+    if (mousePosition) {
+        // mousePosition is relative to the element (0,0 = top-left of element)
+        const mx = mousePosition.x;
+        const my = mousePosition.y;
+        // Convert to iframe coordinate space
+        const iframeMx = elementInfo.left + mx;
+        const iframeMy = elementInfo.top + my;
+        result.mouseToIframe = { x: iframeMx, y: iframeMy };
+        result.mouseToElement = { x: mx, y: my };
+        result.mouseToViewport = { x: iframeMx - viewportInfo.scrollLeft, y: iframeMy - viewportInfo.scrollTop };
+    }
+    return result;
 };
 
-/**
- * Get color from click distribution percentage (0-100)
- */
-function getColorFromClickDist(clickDist) {
-    // Ensure clickDist is in range [0, 100]
-    const normalizedDist = Math.max(0, Math.min(100, clickDist));
-    // Calculate gradient index
-    const maxIndex = AREA_COLOR_GRADIENT.length - 1;
-    const index = Math.floor((normalizedDist / 100) * maxIndex);
-    const clampedIndex = Math.min(index, maxIndex);
-    const [r, g, b] = AREA_COLOR_GRADIENT[clampedIndex];
-    // Return rgba with 60% opacity
-    return `rgba(${r}, ${g}, ${b}, 0.6)`;
-}
-/**
- * Get hover color (slightly lighter) from click distribution
- */
-function getHoverColorFromClickDist(clickDist) {
-    const normalizedDist = Math.max(0, Math.min(100, clickDist));
-    const maxIndex = AREA_COLOR_GRADIENT.length - 1;
-    const index = Math.floor((normalizedDist / 100) * maxIndex);
-    const clampedIndex = Math.min(index, maxIndex);
-    const [r, g, b] = AREA_COLOR_GRADIENT[clampedIndex];
-    // Return rgba with 80% opacity for hover
-    return `rgba(${r}, ${g}, ${b}, 0.8)`;
+function isElementInViewport(elementRect, visualRef, scale) {
+    if (!elementRect)
+        return false;
+    const viewport = getVisualDomViewport(visualRef.current, scale);
+    const elementTop = elementRect.top * scale;
+    const elementBottom = (elementRect.top + elementRect.height) * scale;
+    const viewportTop = viewport.scrollTop;
+    const viewportBottom = viewport.scrollTop + viewport.height;
+    return elementBottom > viewportTop && elementTop < viewportBottom;
 }
 /**
- * Calculate click distribution percentage from total clicks
+ * Check if element + callout fit entirely within the visible viewport.
+ * Used when deciding whether to scroll to an element on click.
  */
-function calculateClickDistribution(elementClicks, totalClicks) {
-    if (totalClicks === 0)
-        return 0;
-    return (elementClicks / totalClicks) * 100;
-}
-
-function getElementRect(element, _shadowRoot) {
-    const rect = element.getBoundingClientRect();
-    const width = rect.width;
-    const height = rect.height;
-    const doc = element.ownerDocument || document;
-    const scrollTop = doc.documentElement?.scrollTop || doc.body?.scrollTop || 0;
-    const scrollLeft = doc.documentElement?.scrollLeft || doc.body?.scrollLeft || 0;
-    const top = rect.top + scrollTop;
-    const left = rect.left + scrollLeft;
-    const absoluteLeft = left;
-    const absoluteTop = top;
-    const absoluteRight = absoluteLeft + width;
-    const absoluteBottom = absoluteTop + height;
-    return {
-        width,
-        height,
-        top,
-        left,
-        absoluteLeft,
-        absoluteTop,
-        absoluteRight,
-        absoluteBottom,
-        outOfBounds: false,
-    };
-}
-function isElementFixed(element) {
-    if (getComputedStyle(element).position === 'fixed') {
-        return true;
-    }
-    if (element.nodeName === 'HTML') {
+function isElementWithCalloutInViewport(element, visualRef, widthScale) {
+    if (!element)
         return false;
+    const { elementInfo, viewportInfo } = calcPositionDetail({ element, widthScale, visualRef });
+    const calloutTotalHeight = getScaledCalloutRect().height + CALLOUT_ARROW_SIZE;
+    const elementTop = elementInfo.top;
+    const elementBottom = elementInfo.top + elementInfo.height;
+    const viewportTop = viewportInfo.scrollTop;
+    const viewportBottom = viewportInfo.scrollTop + viewportInfo.height;
+    return elementTop - calloutTotalHeight >= viewportTop && elementBottom <= viewportBottom;
+}
+const scrollToPosition = (visualRef, scrollTop, onScrollComplete) => {
+    if (!visualRef.current)
+        return;
+    // Already at target position — no scroll will happen
+    if (Math.abs(visualRef.current.scrollTop - scrollTop) < 1) {
+        onScrollComplete?.();
+        return;
     }
-    const parent = element.parentElement;
-    return parent ? isElementFixed(parent) : false;
-}
-function doAreasOverlap(area1, area2) {
-    const r1 = area1.rect.value;
-    const r2 = area2.rect.value;
-    if (!r1 || !r2)
-        return false;
-    return ((r1.absoluteBottom > r2.absoluteTop &&
-        r1.absoluteTop < r2.absoluteBottom &&
-        r1.absoluteRight > r2.absoluteLeft &&
-        r1.absoluteLeft < r2.absoluteRight) ||
-        (r2.absoluteBottom > r1.absoluteTop &&
-            r2.absoluteTop < r1.absoluteBottom &&
-            r2.absoluteRight > r1.absoluteLeft &&
-            r2.absoluteLeft < r1.absoluteRight));
-}
-function isAreaContainedIn(area1, area2) {
-    const r1 = area1.rect.value;
-    const r2 = area2.rect.value;
-    if (!r1 || !r2)
-        return false;
-    return (r1.absoluteTop >= r2.absoluteTop &&
-        r1.absoluteBottom <= r2.absoluteBottom &&
-        r1.absoluteLeft >= r2.absoluteLeft &&
-        r1.absoluteRight <= r2.absoluteRight);
-}
-function isElementAncestorOf(ancestor, descendant, doc) {
-    return ancestor.contains(descendant);
-}
-function isElementSelectable(element, index, elements) {
-    if (isIgnoredCanvas(element)) {
-        return false;
+    if (onScrollComplete) {
+        let scrollTimeout;
+        const handleScroll = () => {
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(() => {
+                visualRef.current?.removeEventListener('scroll', handleScroll);
+                onScrollComplete();
+            }, 16);
+        };
+        visualRef.current.addEventListener('scroll', handleScroll);
     }
-    if (element.hasAttribute(AREA_MAP_DIV_ATTRIBUTE)) {
-        return false;
+    visualRef.current.scrollTo({ top: scrollTop });
+};
+const scrollToElementWithCallout = (visualRef, element, widthScale, onScrollComplete) => {
+    if (!visualRef.current)
+        return;
+    if (isElementWithCalloutInViewport(element, visualRef, widthScale)) {
+        onScrollComplete?.();
+        return;
     }
-    if (index === 0 && elements.length > 1 && element.nodeName === 'BODY') {
+    const { elementInfo } = calcPositionDetail({ element, widthScale, visualRef });
+    const calloutTotalHeight = getScaledCalloutRect().height + CALLOUT_ARROW_SIZE;
+    // Scroll so callout (top) + element fit in viewport, maximizing viewport usage
+    const targetScrollTop = Math.max(0, elementInfo.top - calloutTotalHeight);
+    scrollToPosition(visualRef, targetScrollTop, onScrollComplete);
+};
+function isElementRectInViewport(params) {
+    const { candidate, options } = params;
+    const { rectDimensions, visualViewport: visualRect, widthScale: scale, containerRect } = options;
+    if (!visualRect)
         return false;
-    }
-    return true;
-}
-function sortAreasByClickDist(areas) {
-    return [...areas].sort((a, b) => {
-        if (a.clickDist !== b.clickDist) {
-            return b.clickDist - a.clickDist;
-        }
-        return b.totalclicks - a.totalclicks;
-    });
-}
-function isRectTooSmallForLabel(rect) {
-    return rect.width < 67 || rect.height < 30;
-}
-
-function getElementSelector(element) {
-    if (element.id) {
-        return `#${element.id}`;
-    }
-    if (element.className) {
-        const classes = Array.from(element.classList).join('.');
-        if (classes) {
-            return `${element.tagName.toLowerCase()}.${classes}`;
-        }
-    }
-    return element.tagName.toLowerCase();
-}
-/**
- * Calculate total clicks for an element including all its child elements
- * @param element - The parent element
- * @param elementMapInfo - Map of hash to element click info
- * @returns Total clicks for element + all descendants
- */
-function calculateTotalClicksWithChildren(element, clickMapMetrics) {
-    let totalClicks = 0;
-    // Get clicks for the element itself
-    const elementHash = getElementHash(element);
-    if (elementHash) {
-        const elementInfo = clickMapMetrics[elementHash];
-        totalClicks += elementInfo?.totalClicked.value ?? 0;
-    }
-    const children = element.querySelectorAll('*');
-    children.forEach((child) => {
-        const childHash = getElementHash(child);
-        if (childHash) {
-            const childInfo = clickMapMetrics[childHash];
-            totalClicks += childInfo?.totalClicked.value ?? 0;
-        }
-    });
-    return totalClicks;
-}
-function buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData) {
-    if (!heatmapInfo.clickMapMetrics)
-        return;
-    const totalClicks = heatmapInfo.totalClicks || 0;
-    const elementInfo = heatmapInfo.clickMapMetrics[hash];
-    // Calculate total clicks including all child elements
-    const elementClicks = calculateTotalClicksWithChildren(element, heatmapInfo.clickMapMetrics);
-    const clickDist = calculateClickDistribution(elementClicks, totalClicks);
-    const rect = getElementRect(element);
-    const color = getColorFromClickDist(clickDist);
-    const hoverColor = getHoverColorFromClickDist(clickDist);
-    const areaNode = {
-        kind: persistedData?.kind || 'area',
-        id: persistedData?.id || `${hash}_${Date.now()}`,
-        hash,
-        selector: persistedData?.selector || elementInfo?.selector || getElementSelector(element),
-        // DOM references
-        element,
-        areaElement: null,
-        shadowElement: null,
-        shadowStyleElement: null,
-        // Graph structure
-        parentNode: null,
-        childNodes: new Set(),
-        // Position
-        rect: createObservable(rect),
-        isFixed: isElementFixed(element),
-        priority: false,
-        // Click tracking
-        totalclicks: elementClicks,
-        cumulativeClicks: elementClicks,
-        cumulativeMaxClicks: totalClicks,
-        clickDist,
-        hasClickInfo: true,
-        // Visual
-        color,
-        hoverColor,
-        // Lifecycle
-        changeObserver: null,
-    };
-    return areaNode;
+    const { calloutRect, targetAbsoluteRect } = rectDimensions;
+    const { placement, horizontalAlign } = candidate;
+    // candidate position (relative to element) scaled + element absolute position in iframe
+    const offsetTop = (targetAbsoluteRect?.top ?? 0) * scale;
+    const offsetLeft = (targetAbsoluteRect?.left ?? 0) * scale;
+    // Base position in scroll space
+    const baseTop = candidate.top * scale + offsetTop;
+    const baseLeft = candidate.left * scale + offsetLeft;
+    const { width: calloutWidth, height: calloutHeight } = calloutRect;
+    const transformOffsetY = placement === 'top' ? calloutHeight * (scale - 1) : 0;
+    const transformOffsetX = horizontalAlign !== 'left' ? calloutWidth * (scale - 1) : 0;
+    const visualTop = baseTop + transformOffsetY + CALLOUT_ARROW_SIZE;
+    const visualBottom = visualTop + calloutHeight;
+    const visualLeft = baseLeft + transformOffsetX;
+    const visualRight = visualLeft + calloutWidth;
+    // Viewport bounds
+    const scrollTop = visualRect?.scrollTop || 0;
+    const scrollLeft = visualRect?.scrollLeft || 0;
+    const viewportTop = scrollTop;
+    const viewportBottom = scrollTop + visualRect.height;
+    const viewportLeft = scrollLeft;
+    const viewportRight = scrollLeft + (containerRect?.width ?? visualRect.width);
+    // Check if element is fully within the visible viewport
+    const isInVertical = visualTop > viewportTop && visualBottom < viewportBottom;
+    const isInHorizontal = visualLeft > viewportLeft && visualRight < viewportRight;
+    return isInVertical && isInHorizontal;
 }
-function getTopElementsByClicks(clickMapMetrics, topN = 10) {
-    const elements = Object.entries(clickMapMetrics)
-        .map(([hash, info]) => ({
-        hash,
-        totalclicks: info.totalClicked.value ?? 0,
-        selector: info.selector || '',
-    }))
-        .sort((a, b) => b.totalclicks - a.totalclicks)
-        .slice(0, topN);
-    return elements;
+
+function isMobileDevice(userAgent) {
+    if (!userAgent)
+        return false;
+    return /android|webos|iphone|ipad|ipod|blackberry|windows phone|opera mini|iemobile|mobile|silk|fennec|bada|tizen|symbian|nokia|palmsource|meego|sailfish|kindle|playbook|bb10|rim/i.test(userAgent);
 }
 
 /**
- * Build parent-child relationships between areas based on DOM hierarchy
- * @param areas - Array of area nodes to build relationships for
+ * Get all elements at a specific point (x, y), with support for Shadow DOM
  */
-function buildAreaGraph(areas) {
-    // Clear existing relationships
-    areas.forEach((area) => {
-        area.parentNode = null;
-        area.childNodes.clear();
-    });
-    // Build relationships based on DOM containment
-    for (let i = 0; i < areas.length; i++) {
-        const area = areas[i];
-        for (let j = 0; j < areas.length; j++) {
-            if (i === j)
-                continue;
-            const otherArea = areas[j];
-            // Check if area's element is contained within otherArea's element
-            if (otherArea.element.contains(area.element)) {
-                // Find the closest parent (not just any ancestor)
-                if (!area.parentNode || area.parentNode.element.contains(otherArea.element)) {
-                    // Remove from old parent if exists
-                    if (area.parentNode) {
-                        area.parentNode.childNodes.delete(area);
-                    }
-                    // Set new parent
-                    area.parentNode = otherArea;
-                    otherArea.childNodes.add(area);
-                }
-            }
+function getElementsAtPoint(doc, x, y, options = {}) {
+    const { filterFn, ignoreCanvas = true, visitedShadowRoots = new Set() } = options;
+    // Get all elements at this point
+    let elementsAtPoint = doc.elementsFromPoint(x, y);
+    // Filter out canvas elements if requested
+    if (ignoreCanvas) {
+        elementsAtPoint = elementsAtPoint.filter((el) => !isIgnoredCanvas(el));
+    }
+    // Apply custom filter if provided
+    if (filterFn) {
+        const matchedElement = elementsAtPoint.find(filterFn);
+        // If matched element has Shadow DOM and we haven't visited it yet, recurse
+        if (matchedElement?.shadowRoot && !visitedShadowRoots.has(matchedElement.shadowRoot)) {
+            visitedShadowRoots.add(matchedElement.shadowRoot);
+            return getElementsAtPoint(matchedElement.shadowRoot, x, y, {
+                ...options,
+                visitedShadowRoots,
+            });
         }
     }
+    return elementsAtPoint;
 }
-
-function decodeClarity(payload) {
-    try {
-        return decode(payload);
+/**
+ * Get the element at a specific point (x, y)
+ */
+const getElementAtPoint = (doc, x, y) => {
+    let el = null;
+    if ('caretPositionFromPoint' in doc) {
+        el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
     }
-    catch (_error) {
-        return null;
+    el = el ?? doc.elementFromPoint(x, y);
+    let element = el;
+    while (element && element.nodeType === Node.TEXT_NODE) {
+        element = element.parentElement;
     }
-}
-function decodeArrayClarity(items) {
-    return items.map((item) => decodeClarity(item)).filter((item) => item !== null);
+    return element;
+};
+function getElementHash(element) {
+    if (!element)
+        return null;
+    return element.getAttribute('data-clarity-hashbeta') || element.getAttribute('data-clarity-hashalpha');
 }
 
-function findElementByHash(props) {
-    const { hash, selector, iframeDocument, vizRef } = props;
-    if (vizRef) {
-        const element = vizRef.get(hash);
-        return element;
+class Logger {
+    config = {
+        enabled: false,
+        prefix: '',
+        timestamp: false,
+    };
+    /**
+     * Cấu hình logger
+     * @param config - Cấu hình logger
+     */
+    configure(config) {
+        this.config = { ...this.config, ...config };
     }
-    // Fallback
-    if (!iframeDocument)
-        return null;
-    try {
-        const element = selector ? iframeDocument.querySelector(selector) : null;
-        if (element) {
-            return element;
+    /**
+     * Lấy cấu hình hiện tại
+     */
+    getConfig() {
+        return { ...this.config };
+    }
+    /**
+     * Bật logger
+     */
+    enable() {
+        this.config.enabled = true;
+    }
+    /**
+     * Tắt logger
+     */
+    disable() {
+        this.config.enabled = false;
+    }
+    /**
+     * Format message với prefix và timestamp
+     */
+    formatMessage(...args) {
+        const parts = [];
+        if (this.config.timestamp) {
+            parts.push(`[${new Date().toISOString()}]`);
+        }
+        if (this.config.prefix) {
+            parts.push(`[${this.config.prefix}]`);
         }
+        if (parts.length > 0) {
+            return [parts.join(' '), ...args];
+        }
+        return args;
     }
-    catch (error) {
-        logger$3.warn(`Invalid selector "${selector}":`, error);
+    /**
+     * Log message
+     */
+    log(...args) {
+        if (!this.config.enabled)
+            return;
+        console.log(...this.formatMessage(...args));
     }
-    const elementByHash = iframeDocument.querySelector(`[data-clarity-hashalpha="${hash}"], [data-clarity-hash="${hash}"], [data-clarity-hashbeta="${hash}"]`);
-    return elementByHash;
-}
-
-/**
- * Hydrates persisted area data into full area node
- * Finds element in DOM and calculates all runtime values
- *
- * @param persistedData - Minimal data from database
- * @param iframeDocument - Document to find element in
- * @param heatmapInfo - Heatmap data for click calculations
- * @param vizRef - Map of hash to elements
- * @param shadowRoot - Optional shadow root for rect calculation
- * @returns Full area node or null if element not found
- */
-function hydrateAreaNode(props) {
-    const { persistedData, iframeDocument, heatmapInfo, vizRef, shadowRoot } = props;
-    const { id, hash, selector } = persistedData;
-    const element = findElementByHash({ hash, selector, iframeDocument, vizRef });
-    if (!element) {
-        logger$3.warn(`Cannot hydrate area ${id}: element not found for hash ${hash} or selector ${selector}`);
-        return null;
+    /**
+     * Log info message
+     */
+    info(...args) {
+        if (!this.config.enabled)
+            return;
+        console.info(...this.formatMessage(...args));
+    }
+    /**
+     * Log warning message
+     */
+    warn(...args) {
+        if (!this.config.enabled)
+            return;
+        console.warn(...this.formatMessage(...args));
+    }
+    /**
+     * Log error message
+     */
+    error(...args) {
+        if (!this.config.enabled)
+            return;
+        console.error(...this.formatMessage(...args));
+    }
+    /**
+     * Log debug message
+     */
+    debug(...args) {
+        if (!this.config.enabled)
+            return;
+        console.debug(...this.formatMessage(...args));
+    }
+    /**
+     * Log table data
+     */
+    table(data) {
+        if (!this.config.enabled)
+            return;
+        console.table(data);
+    }
+    /**
+     * Start a group
+     */
+    group(label) {
+        if (!this.config.enabled)
+            return;
+        console.group(...this.formatMessage(label));
+    }
+    /**
+     * Start a collapsed group
+     */
+    groupCollapsed(label) {
+        if (!this.config.enabled)
+            return;
+        console.groupCollapsed(...this.formatMessage(label));
+    }
+    /**
+     * End a group
+     */
+    groupEnd() {
+        if (!this.config.enabled)
+            return;
+        console.groupEnd();
+    }
+    /**
+     * Start a timer
+     */
+    time(label) {
+        if (!this.config.enabled)
+            return;
+        console.time(label);
     }
-    const areaNode = buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData);
-    if (!areaNode)
-        return null;
-    return areaNode;
-}
-function hydrateAreas(props) {
-    const { clickAreas, iframeDocument, heatmapInfo, vizRef, shadowRoot } = props;
-    const hydratedAreas = [];
-    for (const persistedData of clickAreas) {
-        const area = hydrateAreaNode({ persistedData, iframeDocument, heatmapInfo, vizRef, shadowRoot });
-        if (area) {
-            hydratedAreas.push(area);
-        }
+    /**
+     * End a timer
+     */
+    timeEnd(label) {
+        if (!this.config.enabled)
+            return;
+        console.timeEnd(label);
     }
-    logger$3.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
-    return hydratedAreas;
 }
-/**
- * Serializes area node to persisted data for database storage
- */
-function serializeAreaNode(area) {
-    return {
-        kind: area.kind,
-        id: area.id,
-        hash: area.hash,
-        selector: area.selector,
-    };
+// Export singleton instance
+const logger$3 = new Logger();
+// Export factory function để tạo logger với config riêng
+function createLogger(config = {}) {
+    const instance = new Logger();
+    instance.configure(config);
+    return instance;
 }
+
 /**
- * Serializes multiple areas for database storage
+ * Create an observable value with subscribe/unsubscribe pattern
  */
-function serializeAreas(areas) {
-    return areas.map(serializeAreaNode);
+function createObservable(initialValue) {
+    const subscribers = new Set();
+    const observable = {
+        value: initialValue,
+        observe: (callback) => {
+            subscribers.add(callback);
+            // Immediately call with current value
+            if (observable.value !== undefined) {
+                callback(observable.value);
+            }
+        },
+        unobserve: (callback) => {
+            subscribers.delete(callback);
+        },
+        update: (newValue) => {
+            observable.value = newValue;
+            // Notify all subscribers
+            subscribers.forEach((callback) => {
+                callback(newValue);
+            });
+        },
+    };
+    return observable;
 }
 
 /**
- * Resolve overlapping areas by priority rules
+ * Given a list of items where each item represents the START of a bucket,
+ * returns each item enriched with `startY` (= position) and `endY` (= next position, or 100 for the last bucket).
  *
- * Priority Rules (in order):
- * 1. Priority flag (manually set areas win)
- * 2. Click distribution (higher % wins)
- * 3. Total clicks (more clicks wins)
- * 4. DOM containment (parent contains child, parent wins)
- * 5. Size (smaller areas win - more specific)
- */
-function resolveOverlaps(areas, iframeDocument) {
-    if (areas.length === 0)
-        return [];
-    // Group overlapping areas
-    const overlapGroups = findOverlapGroups(areas);
-    // Resolve each group
-    const visibleAreas = new Set();
-    overlapGroups.forEach((group) => {
-        const winner = resolveOverlapGroup(group, iframeDocument);
-        visibleAreas.add(winner);
-    });
-    // Add non-overlapping areas
-    areas.forEach((area) => {
-        const hasOverlap = overlapGroups.some((group) => group.areas.includes(area));
-        if (!hasOverlap) {
-            visibleAreas.add(area);
-        }
-    });
-    return Array.from(visibleAreas);
-}
-/**
- * Find groups of overlapping areas
+ * Works for any scroll data shape (depth, attention, revenue).
  */
-function findOverlapGroups(areas) {
-    const groups = [];
-    const processed = new Set();
-    areas.forEach((area) => {
-        if (processed.has(area.id))
-            return;
-        // Find all areas that overlap with this one
-        const overlapping = areas.filter((other) => other.id !== area.id && doAreasOverlap(area, other));
-        if (overlapping.length === 0) {
-            // No overlap, skip grouping
-            return;
-        }
-        // Create group with this area and all overlapping
-        const groupAreas = [area, ...overlapping];
-        groupAreas.forEach((a) => processed.add(a.id));
-        // Placeholder - will be resolved later
-        groups.push({
-            areas: groupAreas,
-            winner: area,
-            hidden: [],
-        });
-    });
-    return groups;
+function buildBuckets(items, getPosition) {
+    const sorted = [...items].sort((a, b) => getPosition(a) - getPosition(b));
+    return sorted.map((item, i) => ({
+        ...item,
+        startY: getPosition(item),
+        endY: sorted[i + 1] !== undefined ? getPosition(sorted[i + 1]) : 100,
+    }));
 }
-/**
- * Resolve a single overlap group to find the winner
- */
-function resolveOverlapGroup(group, iframeDocument) {
-    const { areas } = group;
-    if (areas.length === 1)
-        return areas[0];
-    // Sort by priority rules
-    const sorted = [...areas].sort((a, b) => {
-        // Rule 1: Priority flag
-        if (a.priority !== b.priority) {
-            return a.priority ? -1 : 1;
-        }
-        // Rule 2: Click distribution
-        if (a.clickDist !== b.clickDist) {
-            return b.clickDist - a.clickDist;
-        }
-        // Rule 3: Total clicks
-        if (a.totalclicks !== b.totalclicks) {
-            return b.totalclicks - a.totalclicks;
-        }
-        // Rule 4: DOM containment - parent beats child
-        if (iframeDocument) {
-            const aContainsB = isElementAncestorOf(a.element, b.element);
-            const bContainsA = isElementAncestorOf(b.element, a.element);
-            if (aContainsB)
-                return -1; // a is parent, a wins
-            if (bContainsA)
-                return 1; // b is parent, b wins
-        }
-        // Rule 5: Size - smaller (more specific) wins
-        const aSize = (a.rect.value?.width || 0) * (a.rect.value?.height || 0);
-        const bSize = (b.rect.value?.width || 0) * (b.rect.value?.height || 0);
-        return aSize - bSize;
-    });
-    const winner = sorted[0];
-    group.winner = winner;
-    group.hidden = sorted.slice(1);
-    return winner;
+
+function sortEvents(a, b) {
+    return a.time - b.time;
 }
+
 /**
- * Filter out areas that are completely contained within others
- * and have lower priority
+ * Throttle a function using requestAnimationFrame
+ * Ensures the callback is called at most once per animation frame
  */
-function filterContainedAreas(areas) {
-    const visible = [];
-    areas.forEach((area) => {
-        // Check if this area is contained by a higher priority area
-        const isContained = areas.some((other) => {
-            if (other.id === area.id)
-                return false;
-            // Check containment
-            if (!isAreaContainedIn(area, other))
-                return false;
-            // Check priority
-            if (other.priority && !area.priority)
-                return true;
-            if (!other.priority && area.priority)
-                return false;
-            // Compare by click dist
-            if (other.clickDist > area.clickDist)
-                return true;
-            if (other.clickDist < area.clickDist)
-                return false;
-            // Compare by total clicks
-            return other.totalclicks > area.totalclicks;
+const throttleRAF = (callback) => {
+    let rafId = null;
+    let latestArgs = null;
+    const throttled = (...args) => {
+        // Store the latest arguments
+        latestArgs = args;
+        // If already scheduled, do nothing
+        if (rafId !== null)
+            return;
+        // Schedule the callback for the next animation frame
+        rafId = requestAnimationFrame(() => {
+            if (latestArgs !== null) {
+                callback(...latestArgs);
+                latestArgs = null;
+            }
+            rafId = null;
         });
-        if (!isContained) {
-            visible.push(area);
+    };
+    // Add cancel method to clear pending RAF
+    throttled.cancel = () => {
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+            latestArgs = null;
         }
-    });
-    return visible;
-}
+    };
+    return throttled;
+};
+
 /**
- * Get visible areas after resolving overlaps
+ * Get color from click distribution percentage (0-100)
  */
-function getVisibleAreas(areas, iframeDocument) {
-    // First pass: filter contained areas
-    let visible = filterContainedAreas(areas);
-    // Second pass: resolve overlaps
-    visible = resolveOverlaps(visible, iframeDocument);
-    // Sort by click dist for rendering order
-    return sortAreasByClickDist(visible);
+function getColorFromClickDist(clickDist) {
+    // Ensure clickDist is in range [0, 100]
+    const normalizedDist = Math.max(0, Math.min(100, clickDist));
+    // Calculate gradient index
+    const maxIndex = AREA_COLOR_GRADIENT.length - 1;
+    const index = Math.floor((normalizedDist / 100) * maxIndex);
+    const clampedIndex = Math.min(index, maxIndex);
+    const [r, g, b] = AREA_COLOR_GRADIENT[clampedIndex];
+    // Return rgba with 60% opacity
+    return `rgba(${r}, ${g}, ${b}, 0.6)`;
 }
-
-/**
- * Helper functions for setting up area renderer
- */
 /**
- * Create the outer container for area rendering
+ * Get hover color (slightly lighter) from click distribution
  */
-function createAreaContainer(iframeDocument) {
-    const container = iframeDocument.createElement('div');
-    container.setAttribute(AREA_MAP_DIV_ATTRIBUTE, 'true');
-    container.style.cssText = AREA_CONTAINER_STYLES;
-    return container;
+function getHoverColorFromClickDist(clickDist) {
+    const normalizedDist = Math.max(0, Math.min(100, clickDist));
+    const maxIndex = AREA_COLOR_GRADIENT.length - 1;
+    const index = Math.floor((normalizedDist / 100) * maxIndex);
+    const clampedIndex = Math.min(index, maxIndex);
+    const [r, g, b] = AREA_COLOR_GRADIENT[clampedIndex];
+    // Return rgba with 80% opacity for hover
+    return `rgba(${r}, ${g}, ${b}, 0.8)`;
 }
 /**
- * Create the inner container for React portal
+ * Calculate click distribution percentage from total clicks
  */
-function createInnerContainer(iframeDocument) {
-    const innerContainer = iframeDocument.createElement('div');
-    innerContainer.className = AREA_RENDERER_SELECTORS.innerContainerClass;
-    innerContainer.style.cssText = AREA_INNER_CONTAINER_STYLES;
-    return innerContainer;
+function calculateClickDistribution(elementClicks, totalClicks) {
+    if (totalClicks === 0)
+        return 0;
+    return (elementClicks / totalClicks) * 100;
 }
-/**
- * Get or create the outer container element
- */
-function getOrCreateAreaContainer(iframeDocument, customShadowRoot) {
-    let container = iframeDocument.querySelector(AREA_RENDERER_SELECTORS.containerSelector);
-    if (!container) {
-        container = createAreaContainer(iframeDocument);
-        const targetRoot = customShadowRoot || iframeDocument.body;
-        if (targetRoot) {
-            targetRoot.appendChild(container);
-        }
-    }
-    return container;
+
+function getElementRect(element, _shadowRoot) {
+    const rect = element.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    const doc = element.ownerDocument || document;
+    const scrollTop = doc.documentElement?.scrollTop || doc.body?.scrollTop || 0;
+    const scrollLeft = doc.documentElement?.scrollLeft || doc.body?.scrollLeft || 0;
+    const top = rect.top + scrollTop;
+    const left = rect.left + scrollLeft;
+    const absoluteLeft = left;
+    const absoluteTop = top;
+    const absoluteRight = absoluteLeft + width;
+    const absoluteBottom = absoluteTop + height;
+    return {
+        width,
+        height,
+        top,
+        left,
+        absoluteLeft,
+        absoluteTop,
+        absoluteRight,
+        absoluteBottom,
+        outOfBounds: false,
+    };
 }
-function getOrCreateContainerShadowRoot(container) {
-    if (container.shadowRoot) {
-        return container.shadowRoot;
+function isElementFixed(element) {
+    if (getComputedStyle(element).position === 'fixed') {
+        return true;
     }
-    return container.attachShadow({ mode: 'open' });
-}
-function getOrCreateInnerContainer(shadowRoot, iframeDocument) {
-    let innerContainer = shadowRoot.querySelector(AREA_RENDERER_SELECTORS.innerContainerSelector);
-    if (!innerContainer) {
-        innerContainer = createInnerContainer(iframeDocument);
-        shadowRoot.appendChild(innerContainer);
+    if (element.nodeName === 'HTML') {
+        return false;
     }
-    return innerContainer;
+    const parent = element.parentElement;
+    return parent ? isElementFixed(parent) : false;
 }
-function setupAreaRenderingContainer(iframeDocument, customShadowRoot) {
-    const container = getOrCreateAreaContainer(iframeDocument, customShadowRoot);
-    const shadowRoot = getOrCreateContainerShadowRoot(container);
-    const innerContainer = getOrCreateInnerContainer(shadowRoot, iframeDocument);
-    return innerContainer;
+function doAreasOverlap(area1, area2) {
+    const r1 = area1.rect.value;
+    const r2 = area2.rect.value;
+    if (!r1 || !r2)
+        return false;
+    return ((r1.absoluteBottom > r2.absoluteTop &&
+        r1.absoluteTop < r2.absoluteBottom &&
+        r1.absoluteRight > r2.absoluteLeft &&
+        r1.absoluteLeft < r2.absoluteRight) ||
+        (r2.absoluteBottom > r1.absoluteTop &&
+            r2.absoluteTop < r1.absoluteBottom &&
+            r2.absoluteRight > r1.absoluteLeft &&
+            r2.absoluteLeft < r1.absoluteRight));
 }
-function cleanupAreaRenderingContainer(container) {
-    if (container && container.parentNode) {
-        container.parentNode.removeChild(container);
+function isAreaContainedIn(area1, area2) {
+    const r1 = area1.rect.value;
+    const r2 = area2.rect.value;
+    if (!r1 || !r2)
+        return false;
+    return (r1.absoluteTop >= r2.absoluteTop &&
+        r1.absoluteBottom <= r2.absoluteBottom &&
+        r1.absoluteLeft >= r2.absoluteLeft &&
+        r1.absoluteRight <= r2.absoluteRight);
+}
+function isElementAncestorOf(ancestor, descendant, doc) {
+    return ancestor.contains(descendant);
+}
+function isElementSelectable(element, index, elements) {
+    if (isIgnoredCanvas(element)) {
+        return false;
+    }
+    if (element.hasAttribute(AREA_MAP_DIV_ATTRIBUTE)) {
+        return false;
+    }
+    if (index === 0 && elements.length > 1 && element.nodeName === 'BODY') {
+        return false;
     }
+    return true;
+}
+function sortAreasByClickDist(areas) {
+    return [...areas].sort((a, b) => {
+        if (a.clickDist !== b.clickDist) {
+            return b.clickDist - a.clickDist;
+        }
+        return b.totalclicks - a.totalclicks;
+    });
+}
+function isRectTooSmallForLabel(rect) {
+    return rect.width < 67 || rect.height < 30;
 }
 
+function getElementSelector(element) {
+    if (element.id) {
+        return `#${element.id}`;
+    }
+    if (element.className) {
+        const classes = Array.from(element.classList).join('.');
+        if (classes) {
+            return `${element.tagName.toLowerCase()}.${classes}`;
+        }
+    }
+    return element.tagName.toLowerCase();
+}
 /**
- * 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')
+ * Calculate total clicks for an element including all its child elements
+ * @param element - The parent element
+ * @param elementMapInfo - Map of hash to element click info
+ * @returns Total clicks for element + all descendants
  */
-const getElementId = (baseId, viewId) => {
-    return `${baseId}-${viewId}`;
-};
-const getClickedElementId = (viewId, isSecondary = false) => {
-    const baseId = isSecondary ? SECONDARY_CLICKED_ELEMENT_ID_BASE : CLICKED_ELEMENT_ID_BASE;
-    return getElementId(baseId, viewId);
-};
-const getHoveredElementId = (viewId, isSecondary = false) => {
-    const baseId = isSecondary ? SECONDARY_HOVERED_ELEMENT_ID_BASE : HOVERED_ELEMENT_ID_BASE;
-    return getElementId(baseId, viewId);
-};
-
-function getElementLayout(element) {
-    if (!element?.getBoundingClientRect)
-        return null;
-    const rect = element.getBoundingClientRect();
-    if (rect.width === 0 && rect.height === 0)
-        return null;
-    return {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-    };
+function calculateTotalClicksWithChildren(element, clickMapMetrics) {
+    let totalClicks = 0;
+    // Get clicks for the element itself
+    const elementHash = getElementHash(element);
+    if (elementHash) {
+        const elementInfo = clickMapMetrics[elementHash];
+        totalClicks += elementInfo?.totalClicked.value ?? 0;
+    }
+    const children = element.querySelectorAll('*');
+    children.forEach((child) => {
+        const childHash = getElementHash(child);
+        if (childHash) {
+            const childInfo = clickMapMetrics[childHash];
+            totalClicks += childInfo?.totalClicked.value ?? 0;
+        }
+    });
+    return totalClicks;
 }
-const getElementRank = (hash, elements) => {
-    if (!elements)
-        return 0;
-    return elements.findIndex((e) => e.hash === hash) + 1;
-};
-const buildElementInfo = (hash, rect, heatmapInfo) => {
-    if (!rect || !heatmapInfo)
-        return null;
-    const info = heatmapInfo.clickMapMetrics?.[hash];
-    if (!info)
-        return null;
-    const rank = getElementRank(hash, heatmapInfo.sortedElements);
-    const clicks = info.totalClicked.value ?? 0;
-    const selector = info.selector ?? '';
-    const baseInfo = {
-        hash,
-        clicks,
-        rank,
-        selector,
-    };
-    return {
-        ...baseInfo,
-        ...rect,
-    };
-};
-// GETTERS
-const getScaledCalloutRect = (_element, _widthScale) => {
-    return {
-        width: 230,
-        height: 268,
-    };
-};
-const getStyleFromCandidate = (candidate, widthScale) => {
-    const { horizontalAlign, placement, top, left } = candidate;
-    const yTransformAlign = placement === 'top' ? 'bottom' : 'top';
-    const xTransformAlign = horizontalAlign === 'left' ? 'left' : 'right';
-    return {
-        top,
-        left,
-        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}`,
-    };
-};
-
-function calculateRankPosition(rect, widthScale) {
-    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
-    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
-    return {
-        transform: `scale(${1.2 * widthScale})`,
-        top: Number.isNaN(top) ? undefined : top,
-        left: Number.isNaN(left) ? undefined : left,
+function buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData) {
+    if (!heatmapInfo.clickMapMetrics)
+        return;
+    const totalClicks = heatmapInfo.totalClicks || 0;
+    const elementInfo = heatmapInfo.clickMapMetrics[hash];
+    // Calculate total clicks including all child elements
+    const elementClicks = calculateTotalClicksWithChildren(element, heatmapInfo.clickMapMetrics);
+    const clickDist = calculateClickDistribution(elementClicks, totalClicks);
+    const rect = getElementRect(element);
+    const color = getColorFromClickDist(clickDist);
+    const hoverColor = getHoverColorFromClickDist(clickDist);
+    const areaNode = {
+        kind: persistedData?.kind || 'area',
+        id: persistedData?.id || `${hash}_${Date.now()}`,
+        hash,
+        selector: persistedData?.selector || elementInfo?.selector || getElementSelector(element),
+        // DOM references
+        element,
+        areaElement: null,
+        shadowElement: null,
+        shadowStyleElement: null,
+        // Graph structure
+        parentNode: null,
+        childNodes: new Set(),
+        // Position
+        rect: createObservable(rect),
+        isFixed: isElementFixed(element),
+        priority: false,
+        // Click tracking
+        totalclicks: elementClicks,
+        cumulativeClicks: elementClicks,
+        cumulativeMaxClicks: totalClicks,
+        clickDist,
+        hasClickInfo: true,
+        // Visual
+        color,
+        hoverColor,
+        // Lifecycle
+        changeObserver: null,
     };
+    return areaNode;
+}
+function getTopElementsByClicks(clickMapMetrics, topN = 10) {
+    const elements = Object.entries(clickMapMetrics)
+        .map(([hash, info]) => ({
+        hash,
+        totalclicks: info.totalClicked.value ?? 0,
+        selector: info.selector || '',
+    }))
+        .sort((a, b) => b.totalclicks - a.totalclicks)
+        .slice(0, topN);
+    return elements;
 }
 
-const getContainerViewport = (containerElm, _scale) => {
-    if (containerElm) {
-        const containerRect = containerElm.getBoundingClientRect();
-        const width = containerRect.width;
-        const height = containerRect.height;
-        return { width, height };
-    }
-    return {
-        width: window.innerWidth,
-        height: window.innerHeight,
-    };
-};
-const getVisualDomViewport = (visualDomElm, scale = 1) => {
-    if (visualDomElm) {
-        const rect = visualDomElm.getBoundingClientRect();
-        return {
-            width: rect.width,
-            height: rect.height,
-            scrollTop: visualDomElm.scrollTop,
-            scrollLeft: visualDomElm.scrollLeft,
-        };
+/**
+ * Build parent-child relationships between areas based on DOM hierarchy
+ * @param areas - Array of area nodes to build relationships for
+ */
+function buildAreaGraph(areas) {
+    // Clear existing relationships
+    areas.forEach((area) => {
+        area.parentNode = null;
+        area.childNodes.clear();
+    });
+    // Build relationships based on DOM containment
+    for (let i = 0; i < areas.length; i++) {
+        const area = areas[i];
+        for (let j = 0; j < areas.length; j++) {
+            if (i === j)
+                continue;
+            const otherArea = areas[j];
+            // Check if area's element is contained within otherArea's element
+            if (otherArea.element.contains(area.element)) {
+                // Find the closest parent (not just any ancestor)
+                if (!area.parentNode || area.parentNode.element.contains(otherArea.element)) {
+                    // Remove from old parent if exists
+                    if (area.parentNode) {
+                        area.parentNode.childNodes.delete(area);
+                    }
+                    // Set new parent
+                    area.parentNode = otherArea;
+                    otherArea.childNodes.add(area);
+                }
+            }
+        }
     }
-    return {
-        width: window.innerWidth,
-        height: window.innerHeight,
-        scrollTop: 0,
-        scrollLeft: 0,
-    };
-};
-const getElementDimensions = (options) => {
-    const { targetElm, calloutElm, scale, containerElm } = options;
-    const targetRect = targetElm.getBoundingClientRect();
-    const calloutRect = getScaledCalloutRect();
-    const containerRect = containerElm.getBoundingClientRect();
-    const scaledCalloutRect = getScaledCalloutRect();
-    if (scale && containerRect) {
-        const relativeTop = (targetRect.top - containerRect.top) / scale;
-        const relativeLeft = (targetRect.left - containerRect.left) / scale;
-        const scaledWidth = targetRect.width / scale;
-        const scaledHeight = targetRect.height / scale;
-        return {
-            targetRect: {
-                ...targetRect,
-                top: relativeTop,
-                left: relativeLeft,
-                right: relativeLeft + scaledWidth,
-                bottom: relativeTop + scaledHeight,
-                width: scaledWidth,
-                height: scaledHeight,
-            },
-            calloutRect: scaledCalloutRect,
-        };
+}
+
+function decodeClarity(payload) {
+    try {
+        return decode(payload);
     }
-    if (scale) {
-        return {
-            targetRect,
-            calloutRect: scaledCalloutRect,
-        };
+    catch (_error) {
+        return null;
     }
-    return { targetRect, calloutRect };
-};
+}
+function decodeArrayClarity(items) {
+    return items.map((item) => decodeClarity(item)).filter((item) => item !== null);
+}
 
-const getAlignmentOrder = (alignment) => {
-    switch (alignment) {
-        case 'center':
-            return ['center', 'left', 'right'];
-        case 'left':
-            return ['left', 'center', 'right'];
-        case 'right':
-            return ['right', 'center', 'left'];
+function findElementByHash(props) {
+    const { hash, selector, iframeDocument, vizRef } = props;
+    if (vizRef) {
+        const element = vizRef.get(hash);
+        return element;
     }
-};
-const calculateLeftPosition = (align, options) => {
-    const { rectDimensions, offset } = options;
-    const { targetRect, calloutRect } = rectDimensions;
-    const { x: hozOffset } = offset;
-    const relLeft = targetRect.left;
-    const relRight = targetRect.right;
-    const relWidth = targetRect.width;
-    const calloutWidth = calloutRect.width;
-    let left;
-    switch (align) {
-        case 'left':
-            left = relLeft + hozOffset;
-            break;
-        case 'right':
-            left = relRight - calloutWidth - hozOffset;
-            break;
-        case 'center':
-        default:
-            left = relLeft + relWidth / 2 - calloutWidth / 2;
-            break;
+    // Fallback
+    if (!iframeDocument)
+        return null;
+    try {
+        const element = selector ? iframeDocument.querySelector(selector) : null;
+        if (element) {
+            return element;
+        }
     }
-    // No clamping - let validation determine if position is valid
-    // If position would overflow, valid = false and system chooses different placement
-    return left;
-};
-const calculateVerticalPosition = (placement, options) => {
-    const { rectDimensions, padding, arrowSize, offset } = options;
-    const { targetRect, calloutRect } = rectDimensions;
-    const { y: offsetY } = offset;
-    return placement === 'top'
-        ? targetRect.top - calloutRect.height - padding - arrowSize + offsetY
-        : targetRect.bottom + padding + arrowSize + offsetY;
-};
-const calculateHorizontalPosition = (placement, options) => {
-    const { rectDimensions, padding, arrowSize } = options;
-    const { targetRect, calloutRect } = rectDimensions;
-    const top = targetRect.top + targetRect.height / 2 - calloutRect.height / 2;
-    const left = placement === 'right'
-        ? targetRect.right + padding + arrowSize
-        : targetRect.left - calloutRect.width - padding - arrowSize;
-    return { top, left };
-};
+    catch (error) {
+        logger$3.warn(`Invalid selector "${selector}":`, error);
+    }
+    const elementByHash = iframeDocument.querySelector(`[data-clarity-hashalpha="${hash}"], [data-clarity-hash="${hash}"], [data-clarity-hashbeta="${hash}"]`);
+    return elementByHash;
+}
 
-const EPSILON = 0.1; // Tolerance for floating point errors
-const isLeftPositionValid = (leftPos, options) => {
-    const { rectDimensions, viewport, padding, offset } = options;
-    const { width: calloutWidth } = rectDimensions.calloutRect;
-    const { width: viewportWidth } = viewport;
-    const absLeft = rectDimensions.targetAbsoluteRect?.left ?? 0;
-    const relLeftPos = absLeft + leftPos - offset.x;
-    const calloutWidthScaled = calloutWidth / options.widthScale;
-    const maxViewportWidth = viewportWidth + EPSILON;
-    const isValidLeft = relLeftPos >= padding - EPSILON;
-    const isRectCalloutShowValid = relLeftPos + calloutWidthScaled - EPSILON <= maxViewportWidth / options.widthScale;
-    return isValidLeft && isRectCalloutShowValid;
-};
-const isRightPositionValid = (leftPos, options) => {
-    const { rectDimensions, viewport } = options;
-    const { width: calloutWidth } = rectDimensions.calloutRect;
-    const { width: viewportWidth } = viewport;
-    const calloutWidthScaled = calloutWidth / options.widthScale;
-    const absLeft = rectDimensions.targetAbsoluteRect?.left ?? 0;
-    const relLeftPos = absLeft + leftPos;
-    const maxViewportWidth = viewportWidth + EPSILON;
-    const isValidRight = relLeftPos - calloutWidthScaled - EPSILON <= maxViewportWidth / options.widthScale;
-    return isValidRight;
-};
-const isVerticalPositionValid = (placement, options) => {
-    const { rectDimensions, viewport, padding, arrowSize } = options;
-    const { targetRect, targetAbsoluteRect, calloutRect } = rectDimensions;
-    const { height: viewportHeight } = viewport;
-    const { height: calloutHeight } = calloutRect;
-    const relativeTop = (targetAbsoluteRect?.top ?? 0) + targetRect.top;
-    const calloutHeightScaled = calloutHeight / options.widthScale;
-    switch (placement) {
-        case 'top':
-            return relativeTop - calloutHeightScaled - padding - arrowSize > -EPSILON;
-        case 'bottom':
-            return targetRect.bottom + calloutHeight + padding + arrowSize < viewportHeight + EPSILON;
+/**
+ * Hydrates persisted area data into full area node
+ * Finds element in DOM and calculates all runtime values
+ *
+ * @param persistedData - Minimal data from database
+ * @param iframeDocument - Document to find element in
+ * @param heatmapInfo - Heatmap data for click calculations
+ * @param vizRef - Map of hash to elements
+ * @param shadowRoot - Optional shadow root for rect calculation
+ * @returns Full area node or null if element not found
+ */
+function hydrateAreaNode(props) {
+    const { persistedData, iframeDocument, heatmapInfo, vizRef, shadowRoot } = props;
+    const { id, hash, selector } = persistedData;
+    const element = findElementByHash({ hash, selector, iframeDocument, vizRef });
+    if (!element) {
+        logger$3.warn(`Cannot hydrate area ${id}: element not found for hash ${hash} or selector ${selector}`);
+        return null;
     }
-};
-const isHorizontalPositionValid = (placement, options) => {
-    const { rectDimensions, viewport, padding, arrowSize } = options;
-    const { targetRect, targetAbsoluteRect, calloutRect } = rectDimensions;
-    const { width: viewportWidth } = viewport;
-    const { width: calloutWidth } = calloutRect;
-    const relativeLeft = (targetAbsoluteRect?.left ?? 0) + targetRect.left;
-    const relativeRight = relativeLeft + targetRect.width;
-    switch (placement) {
-        case 'right':
-            return relativeRight + calloutWidth + padding + arrowSize < viewportWidth + EPSILON;
-        case 'left':
-            return relativeLeft - calloutWidth - padding - arrowSize > -EPSILON;
+    const areaNode = buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData);
+    if (!areaNode)
+        return null;
+    return areaNode;
+}
+function hydrateAreas(props) {
+    const { clickAreas, iframeDocument, heatmapInfo, vizRef, shadowRoot } = props;
+    const hydratedAreas = [];
+    for (const persistedData of clickAreas) {
+        const area = hydrateAreaNode({ persistedData, iframeDocument, heatmapInfo, vizRef, shadowRoot });
+        if (area) {
+            hydratedAreas.push(area);
+        }
     }
-};
+    logger$3.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
+    return hydratedAreas;
+}
+/**
+ * Serializes area node to persisted data for database storage
+ */
+function serializeAreaNode(area) {
+    return {
+        kind: area.kind,
+        id: area.id,
+        hash: area.hash,
+        selector: area.selector,
+    };
+}
+/**
+ * Serializes multiple areas for database storage
+ */
+function serializeAreas(areas) {
+    return areas.map(serializeAreaNode);
+}
 
-const generateVerticalPositionCandidates = (options) => {
-    const { alignment } = options;
-    const candidates = [];
-    const placements = ['top', 'bottom'];
-    placements.forEach((placement) => {
-        const verticalPos = calculateVerticalPosition(placement, options);
-        const verticalValid = isVerticalPositionValid(placement, options);
-        const alignmentOrder = getAlignmentOrder(alignment);
-        alignmentOrder.forEach((align) => {
-            const leftPos = calculateLeftPosition(align, options);
-            const isValidLeft = isLeftPositionValid(leftPos, options);
-            const isValidRight = isRightPositionValid(leftPos, options);
-            const candidate = { placement, top: verticalPos, left: leftPos, horizontalAlign: align, valid: false };
-            switch (align) {
-                case 'left':
-                    candidate.valid = verticalValid && isValidLeft;
-                    break;
-                case 'right':
-                    candidate.valid = verticalValid && isValidRight;
-                    break;
-            }
-            candidates.push(candidate);
+/**
+ * Resolve overlapping areas by priority rules
+ *
+ * Priority Rules (in order):
+ * 1. Priority flag (manually set areas win)
+ * 2. Click distribution (higher % wins)
+ * 3. Total clicks (more clicks wins)
+ * 4. DOM containment (parent contains child, parent wins)
+ * 5. Size (smaller areas win - more specific)
+ */
+function resolveOverlaps(areas, iframeDocument) {
+    if (areas.length === 0)
+        return [];
+    // Group overlapping areas
+    const overlapGroups = findOverlapGroups(areas);
+    // Resolve each group
+    const visibleAreas = new Set();
+    overlapGroups.forEach((group) => {
+        const winner = resolveOverlapGroup(group, iframeDocument);
+        visibleAreas.add(winner);
+    });
+    // Add non-overlapping areas
+    areas.forEach((area) => {
+        const hasOverlap = overlapGroups.some((group) => group.areas.includes(area));
+        if (!hasOverlap) {
+            visibleAreas.add(area);
+        }
+    });
+    return Array.from(visibleAreas);
+}
+/**
+ * Find groups of overlapping areas
+ */
+function findOverlapGroups(areas) {
+    const groups = [];
+    const processed = new Set();
+    areas.forEach((area) => {
+        if (processed.has(area.id))
+            return;
+        // Find all areas that overlap with this one
+        const overlapping = areas.filter((other) => other.id !== area.id && doAreasOverlap(area, other));
+        if (overlapping.length === 0) {
+            // No overlap, skip grouping
+            return;
+        }
+        // Create group with this area and all overlapping
+        const groupAreas = [area, ...overlapping];
+        groupAreas.forEach((a) => processed.add(a.id));
+        // Placeholder - will be resolved later
+        groups.push({
+            areas: groupAreas,
+            winner: area,
+            hidden: [],
         });
     });
-    return candidates;
-};
-const generateHorizontalPositionCandidates = (options) => {
-    const placements = ['left', 'right'];
-    return placements.map((placement) => {
-        const { top, left } = calculateHorizontalPosition(placement, options);
-        const isValidHorizontal = isHorizontalPositionValid(placement, options);
-        const candidate = { placement, top, left, horizontalAlign: 'center', valid: false };
-        candidate.valid = isValidHorizontal;
-        return candidate;
+    return groups;
+}
+/**
+ * Resolve a single overlap group to find the winner
+ */
+function resolveOverlapGroup(group, iframeDocument) {
+    const { areas } = group;
+    if (areas.length === 1)
+        return areas[0];
+    // Sort by priority rules
+    const sorted = [...areas].sort((a, b) => {
+        // Rule 1: Priority flag
+        if (a.priority !== b.priority) {
+            return a.priority ? -1 : 1;
+        }
+        // Rule 2: Click distribution
+        if (a.clickDist !== b.clickDist) {
+            return b.clickDist - a.clickDist;
+        }
+        // Rule 3: Total clicks
+        if (a.totalclicks !== b.totalclicks) {
+            return b.totalclicks - a.totalclicks;
+        }
+        // Rule 4: DOM containment - parent beats child
+        if (iframeDocument) {
+            const aContainsB = isElementAncestorOf(a.element, b.element);
+            const bContainsA = isElementAncestorOf(b.element, a.element);
+            if (aContainsB)
+                return -1; // a is parent, a wins
+            if (bContainsA)
+                return 1; // b is parent, b wins
+        }
+        // Rule 5: Size - smaller (more specific) wins
+        const aSize = (a.rect.value?.width || 0) * (a.rect.value?.height || 0);
+        const bSize = (b.rect.value?.width || 0) * (b.rect.value?.height || 0);
+        return aSize - bSize;
     });
-};
-const generateAllCandidates = (options) => {
-    const verticalCandidates = generateVerticalPositionCandidates(options);
-    const horizontalCandidates = generateHorizontalPositionCandidates(options);
-    const allCandidates = [...verticalCandidates, ...horizontalCandidates];
-    return allCandidates.map((candidate) => ({
-        ...candidate,
-        isVisibleInViewport: isElementRectInViewport({ candidate, options }),
-    }));
-};
-
-const selectBestPosition = (candidates) => {
-    // return candidates.find((p) => p.valid && p.isVisibleInViewport) || candidates[0];
-    return candidates.find((p) => p.valid) || candidates[0];
-};
-const selectBestPositionForClick = (candidates) => {
-    return (candidates.find((p) => p.valid && p.isVisibleInViewport) ||
-        candidates.find((p) => p.isVisibleInViewport) ||
-        candidates.find((p) => p.valid) ||
-        candidates[0]);
-};
-const constrainToViewport = (candidate, options) => {
-    const { containerRect, padding, rectDimensions, viewport } = options;
-    const { calloutRect } = rectDimensions;
-    const { left: leftPos, top: topPos } = candidate;
-    if (containerRect) {
-        const containerTop = containerRect.top + padding;
-        const containerLeft = containerRect.left + padding;
-        const containerRight = containerRect.right - calloutRect.width - padding;
-        const containerBottom = containerRect.bottom - calloutRect.height - padding;
-        const left = Math.max(containerLeft, Math.min(leftPos, containerRight));
-        const top = Math.max(containerTop, Math.min(topPos, containerBottom));
-        return { top, left };
-    }
-    const viewportLeft = padding;
-    const viewportTop = padding;
-    const viewportRight = viewport.width - calloutRect.width - padding;
-    const viewportBottom = viewport.height - calloutRect.height - padding;
-    const left = Math.max(viewportLeft, Math.min(leftPos, viewportRight));
-    const top = Math.max(viewportTop, Math.min(topPos, viewportBottom));
-    return { top, left };
-};
+    const winner = sorted[0];
+    group.winner = winner;
+    group.hidden = sorted.slice(1);
+    return winner;
+}
+/**
+ * Filter out areas that are completely contained within others
+ * and have lower priority
+ */
+function filterContainedAreas(areas) {
+    const visible = [];
+    areas.forEach((area) => {
+        // Check if this area is contained by a higher priority area
+        const isContained = areas.some((other) => {
+            if (other.id === area.id)
+                return false;
+            // Check containment
+            if (!isAreaContainedIn(area, other))
+                return false;
+            // Check priority
+            if (other.priority && !area.priority)
+                return true;
+            if (!other.priority && area.priority)
+                return false;
+            // Compare by click dist
+            if (other.clickDist > area.clickDist)
+                return true;
+            if (other.clickDist < area.clickDist)
+                return false;
+            // Compare by total clicks
+            return other.totalclicks > area.totalclicks;
+        });
+        if (!isContained) {
+            visible.push(area);
+        }
+    });
+    return visible;
+}
+/**
+ * Get visible areas after resolving overlaps
+ */
+function getVisibleAreas(areas, iframeDocument) {
+    // First pass: filter contained areas
+    let visible = filterContainedAreas(areas);
+    // Second pass: resolve overlaps
+    visible = resolveOverlaps(visible, iframeDocument);
+    // Sort by click dist for rendering order
+    return sortAreasByClickDist(visible);
+}
 
-const getScrollOffset = (visualRef) => {
-    if (!visualRef?.current)
-        return;
-    return {
-        top: visualRef.current.scrollTop,
-        left: visualRef.current.scrollLeft,
-    };
-};
 /**
- * Create adjusted container rect for absolute positioning
- * - With scroll: represents visible area in container coordinates
- * - Without scroll: represents full container in container coordinates
+ * Helper functions for setting up area renderer
  */
-const createAdjustedContainerRect = (options) => {
-    const { containerElm, scale, isAbsolute, visualRef } = options;
-    const containerRect = containerElm.getBoundingClientRect();
-    const scrollOffset = getScrollOffset(visualRef);
-    // No scale = fixed positioning, use raw rect
-    if (!scale)
-        return containerRect;
-    const scaledWidth = containerRect.width / scale;
-    const scaledHeight = containerRect.height / scale;
-    // Absolute positioning with scroll offset
-    if (isAbsolute && scrollOffset) {
-        return {
-            ...containerRect,
-            top: scrollOffset.top,
-            left: scrollOffset.left,
-            right: scrollOffset.left + scaledWidth,
-            bottom: scrollOffset.top + scaledHeight,
-            width: scaledWidth,
-            height: scaledHeight,
-        };
+/**
+ * Create the outer container for area rendering
+ */
+function createAreaContainer(iframeDocument) {
+    const container = iframeDocument.createElement('div');
+    container.setAttribute(AREA_MAP_DIV_ATTRIBUTE, 'true');
+    container.style.cssText = AREA_CONTAINER_STYLES;
+    return container;
+}
+/**
+ * Create the inner container for React portal
+ */
+function createInnerContainer(iframeDocument) {
+    const innerContainer = iframeDocument.createElement('div');
+    innerContainer.className = AREA_RENDERER_SELECTORS.innerContainerClass;
+    innerContainer.style.cssText = AREA_INNER_CONTAINER_STYLES;
+    return innerContainer;
+}
+/**
+ * Get or create the outer container element
+ */
+function getOrCreateAreaContainer(iframeDocument, customShadowRoot) {
+    let container = iframeDocument.querySelector(AREA_RENDERER_SELECTORS.containerSelector);
+    if (!container) {
+        container = createAreaContainer(iframeDocument);
+        const targetRoot = customShadowRoot || iframeDocument.body;
+        if (targetRoot) {
+            targetRoot.appendChild(container);
+        }
     }
-    // Absolute positioning without scroll
-    return {
-        ...containerRect,
-        top: 0,
-        left: 0,
-        right: scaledWidth,
-        width: scaledWidth,
-        bottom: scaledHeight,
-        height: scaledHeight,
-    };
+    return container;
+}
+function getOrCreateContainerShadowRoot(container) {
+    if (container.shadowRoot) {
+        return container.shadowRoot;
+    }
+    return container.attachShadow({ mode: 'open' });
+}
+function getOrCreateInnerContainer(shadowRoot, iframeDocument) {
+    let innerContainer = shadowRoot.querySelector(AREA_RENDERER_SELECTORS.innerContainerSelector);
+    if (!innerContainer) {
+        innerContainer = createInnerContainer(iframeDocument);
+        shadowRoot.appendChild(innerContainer);
+    }
+    return innerContainer;
+}
+function setupAreaRenderingContainer(iframeDocument, customShadowRoot) {
+    const container = getOrCreateAreaContainer(iframeDocument, customShadowRoot);
+    const shadowRoot = getOrCreateContainerShadowRoot(container);
+    const innerContainer = getOrCreateInnerContainer(shadowRoot, iframeDocument);
+    return innerContainer;
+}
+function cleanupAreaRenderingContainer(container) {
+    if (container && container.parentNode) {
+        container.parentNode.removeChild(container);
+    }
+}
+
+/**
+ * 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 calcCalloutPosition = (options) => {
-    const { targetElm, calloutElm, setPosition, positionMode, widthScale, visualRef } = options;
-    const offset = options.offset ?? CALLOUT_OFFSET;
-    const alignment = options.alignment ?? CALLOUT_ALIGNMENT;
-    const padding = CALLOUT_PADDING;
-    const arrowSize = CALLOUT_ARROW_SIZE;
-    return () => {
-        const isAbsolute = positionMode === 'absolute';
-        const scale = isAbsolute ? widthScale : 1;
-        // Determine container element based on positioning mode
-        // - Absolute: portal container (parent of callout)
-        // - Fixed: visual container (scrollable area)
-        const containerElm = isAbsolute ? calloutElm.parentElement : visualRef?.current;
-        if (!containerElm)
-            return;
-        const viewport = getContainerViewport(containerElm);
-        const visualViewport = getVisualDomViewport(visualRef?.current, scale);
-        const rectDimensions = getElementDimensions({ targetElm, calloutElm, scale, containerElm });
-        const containerRect = createAdjustedContainerRect({ containerElm, scale, isAbsolute, visualRef });
-        const options = {
-            rectDimensions,
-            viewport,
-            visualViewport,
-            alignment,
-            offset,
-            padding,
-            arrowSize,
-            containerRect,
-            widthScale,
-        };
-        const candidates = generateAllCandidates(options);
-        const candidate = selectBestPosition(candidates);
-        // Constrain to viewport/container bounds
-        const constrainedCandidate = constrainToViewport(candidate, options);
-        // Final callout position
-        const finalPosition = {
-            top: constrainedCandidate.top,
-            left: constrainedCandidate.left,
-            placement: candidate.placement,
-            horizontalAlign: candidate.horizontalAlign,
-        };
-        setPosition(finalPosition);
-    };
+const getClickedElementId = (viewId, isSecondary = false) => {
+    const baseId = isSecondary ? SECONDARY_CLICKED_ELEMENT_ID_BASE : CLICKED_ELEMENT_ID_BASE;
+    return getElementId(baseId, viewId);
 };
-const calcCalloutPositionAbsolute = (props) => {
-    const { widthScale, calloutElm, containerElm, element, visualRef, setPosition } = props;
-    const mousePosition = element?.mousePosition;
-    if (!mousePosition)
-        return;
-    const padding = props.padding ?? CALLOUT_PADDING;
-    const arrowSize = props.arrowSize ?? CALLOUT_ARROW_SIZE;
-    const rawCalloutRect = calloutElm.getBoundingClientRect();
-    if (rawCalloutRect.width === 0 || rawCalloutRect.height === 0)
-        return;
-    const containerRect = containerElm.getBoundingClientRect();
-    const mouseX = mousePosition.x;
-    const mouseY = mousePosition.y;
-    const targetRect = {
-        top: mouseY,
-        left: mouseX,
-        right: mouseX + 1,
-        bottom: mouseY + 1,
-        width: 1,
-        height: 1,
-        x: mouseX,
-        y: mouseY,
-        toJSON: () => ({}),
-    };
-    const rectDimensions = {
-        targetRect,
-        calloutRect: getScaledCalloutRect(),
-        targetAbsoluteRect: {
-            top: element.top,
-            left: element.left,
-        },
-    };
-    const { viewportInfo } = calcPositionDetail({ element, widthScale, visualRef: visualRef ?? undefined });
-    const options = {
-        rectDimensions,
-        viewport: viewportInfo,
-        alignment: CALLOUT_ALIGNMENT,
-        offset: CALLOUT_OFFSET,
-        padding,
-        arrowSize,
-        containerRect,
-        widthScale,
-        visualViewport: viewportInfo,
-    };
-    const candidates = generateAllCandidates(options);
-    const bestPosition = selectBestPositionForClick(candidates);
-    setPosition(bestPosition);
+const getHoveredElementId = (viewId, isSecondary = false) => {
+    const baseId = isSecondary ? SECONDARY_HOVERED_ELEMENT_ID_BASE : HOVERED_ELEMENT_ID_BASE;
+    return getElementId(baseId, viewId);
 };
-const calcPositionDetail = ({ element, widthScale, visualRef }) => {
-    const mousePosition = element.mousePosition;
-    // visualRef = scrollable viewport (gx-hm-visual), clientWidth/Height = visible area
-    const visual = visualRef?.current;
-    const viewportInfo = {
-        width: visual?.clientWidth ?? 0,
-        height: visual?.clientHeight ?? 0,
-        scrollTop: visual?.scrollTop ?? 0,
-        scrollLeft: visual?.scrollLeft ?? 0,
-    };
-    const elementInfo = {
-        ...element,
-        top: element.top * widthScale,
-        left: element.left * widthScale,
-        width: element.width * widthScale,
-        height: element.height * widthScale,
-    };
-    const result = {
-        elementInfo,
-        viewportInfo,
-        elementToIframe: { x: elementInfo.left, y: elementInfo.top },
-        elementToViewport: { x: elementInfo.left - viewportInfo.scrollLeft, y: elementInfo.top - viewportInfo.scrollTop },
+
+function calculateRankPosition(rect, widthScale) {
+    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
+    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
+    return {
+        transform: `scale(${1.2 * widthScale})`,
+        top: Number.isNaN(top) ? undefined : top,
+        left: Number.isNaN(left) ? undefined : left,
     };
-    if (mousePosition) {
-        // mousePosition is relative to the element (0,0 = top-left of element)
-        const mx = mousePosition.x;
-        const my = mousePosition.y;
-        // Convert to iframe coordinate space
-        const iframeMx = elementInfo.left + mx;
-        const iframeMy = elementInfo.top + my;
-        result.mouseToIframe = { x: iframeMx, y: iframeMy };
-        result.mouseToElement = { x: mx, y: my };
-        result.mouseToViewport = { x: iframeMx - viewportInfo.scrollLeft, y: iframeMy - viewportInfo.scrollTop };
-    }
-    return result;
-};
+}
 
 function validateAreaCreation(dataInfo, hash, areas) {
     if (!dataInfo?.clickMapMetrics || !dataInfo?.totalClicks) {
@@ -3752,10 +3820,16 @@ const useClickedElement = ({ visualRef, getRect }) => {
         }
         setShowMissingElement(false);
         setShouldShowCallout(true);
-        // Scroll to element and set clicked element after scroll completes
-        scrollToElementIfNeeded(visualRef, rect, widthScale, () => {
+        if (mousePosition) {
+            // Clicked directly on element — already visible, no scroll needed
             setClickedElement(elementInfo);
-        });
+        }
+        else {
+            // Clicked from sidebar — scroll to element with space for callout
+            scrollToElementWithCallout(visualRef, elementInfo, widthScale, () => {
+                setClickedElement(elementInfo);
+            });
+        }
     }, [selectedElement, dataInfo, visualRef, widthScale]); // eslint-disable-line react-hooks/exhaustive-deps
     return { clickedElement, showMissingElement, shouldShowCallout };
 };