@gemx-dev/heatmap-react 3.5.50 → 3.5.51

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
-import { useEffect, createContext, useContext, useMemo, useCallback, useState, useRef, forwardRef, Fragment as Fragment$1 } from 'react';
+import { useEffect, useRef, useCallback, createContext, useContext, useMemo, useState, forwardRef, Fragment as Fragment$1 } from 'react';
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { decode } from '@gemx-dev/clarity-decode';
@@ -102,6 +102,36 @@ const Z_INDEX = {
     SIDEBAR_POPOVER: 4001,
 };
 
+/**
+ * Creates a debounced version of a callback that delays invoking until after
+ * wait milliseconds have elapsed since the last time it was invoked.
+ *
+ * @param callback - The function to debounce
+ * @param delay - The number of milliseconds to delay
+ * @returns A debounced version of the callback
+ *
+ * @example
+ * ```tsx
+ * const handleSearch = useDebounceCallback((query: string) => {
+ *   searchAPI(query);
+ * }, 300);
+ * ```
+ */
+function useDebounceCallback(callback, delay) {
+    const timeoutRef = useRef();
+    const callbackRef = useRef(callback);
+    // Update callback ref when callback changes
+    callbackRef.current = callback;
+    return useCallback((...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            callbackRef.current(...args);
+        }, delay);
+    }, [delay]);
+}
+
 const useHeatmapControlStore = create()((set, get) => {
     return {
         controls: {
@@ -145,7 +175,7 @@ var IScrollType;
     IScrollType["Revenue"] = "revenue-scroll";
 })(IScrollType || (IScrollType = {}));
 
-const useHeatmapConfigStore = create()((set, get) => {
+const useHeatmapConfigStore = create()((set) => {
     return {
         mode: 'single',
         width: 1440,
@@ -165,7 +195,7 @@ const useHeatmapConfigStore = create()((set, get) => {
     };
 });
 
-const useHeatmapDataStore = create()(subscribeWithSelector((set, get) => {
+const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
     return {
         data: { [DEFAULT_VIEW_ID]: undefined },
         clickmap: { [DEFAULT_VIEW_ID]: undefined },
@@ -217,7 +247,7 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set, get) => {
 const DEFAULT_STATE = {
     hideSidebar: false,
 };
-const useHeatmapInteractionStore = create()(subscribeWithSelector((set, get) => {
+const useHeatmapInteractionStore = create()(subscribeWithSelector((set) => {
     return {
         state: { [DEFAULT_VIEW_ID]: DEFAULT_STATE },
         selectedElement: { [DEFAULT_VIEW_ID]: null },
@@ -278,7 +308,7 @@ const useHeatmapInteractionStore = create()(subscribeWithSelector((set, get) =>
     };
 }));
 
-const useHeatmapVizStore = create()(subscribeWithSelector((set, get) => {
+const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
     return {
         isRenderViz: { [DEFAULT_VIEW_ID]: false },
         zoomRatio: { [DEFAULT_VIEW_ID]: 100 },
@@ -339,7 +369,7 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set, get) => {
     };
 }));
 
-const useHeatmapVizScrollmapStore = create()(subscribeWithSelector((set, get) => {
+const useHeatmapVizScrollmapStore = create()(subscribeWithSelector((set) => {
     return {
         zones: { [DEFAULT_VIEW_ID]: [] },
         hoveredZone: { [DEFAULT_VIEW_ID]: null },
@@ -392,7 +422,7 @@ const initialState = {
     payloads: [],
     htmlContent: '',
 };
-const useHeatmapLiveStore = create()((set, get) => {
+const useHeatmapLiveStore = create()((set) => {
     return {
         ...initialState,
         reset: () => set(initialState),
@@ -402,7 +432,7 @@ const useHeatmapLiveStore = create()((set, get) => {
     };
 });
 
-const useHeatmapSingleStore = create()(subscribeWithSelector((set, get) => {
+const useHeatmapSingleStore = create()(subscribeWithSelector((set) => {
     return {
         vizRef: { [DEFAULT_VIEW_ID]: null },
         iframeHeight: { [DEFAULT_VIEW_ID]: 0 },
@@ -873,23 +903,146 @@ const useRegisterHeatmap = ({ clickmap, scrollmap }) => {
     }, [scrollmap]);
 };
 
+function findLastSizeOfDom(data) {
+    const listDocs = data
+        .filter((item) => item.doc?.find((doc) => doc.data.width && doc.data.height))
+        .flatMap((item) => item.doc?.flatMap((doc) => doc.data));
+    const lastDoc = listDocs?.[listDocs.length - 1];
+    const docSize = {
+        width: lastDoc?.width,
+        height: lastDoc?.height,
+    };
+    const listResizes = data.filter((item) => !!item.resize).flatMap((item) => item.resize);
+    const lastResizeEvent = listResizes?.[listResizes.length - 1];
+    const resize = {
+        width: lastResizeEvent?.data.width,
+        height: lastResizeEvent?.data.height,
+    };
+    return {
+        doc: docSize,
+        resize: resize,
+        size: {
+            width: resize.width || docSize.width,
+            height: resize.height || docSize.height,
+        },
+    };
+}
+function decodePayloads(payload) {
+    try {
+        return decode(payload);
+    }
+    catch (error) {
+        return null;
+    }
+}
+
+function calculateRankPosition(rect, widthScale) {
+    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
+    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
+    return {
+        transform: `scale(${1.2 * widthScale})`,
+        top: Number.isNaN(top) ? undefined : top,
+        left: Number.isNaN(left) ? undefined : left,
+    };
+}
+function isElementInViewport(elementRect, visualRef, scale) {
+    if (!elementRect)
+        return false;
+    const visualRect = visualRef.current?.getBoundingClientRect();
+    if (!visualRect)
+        return false;
+    // Element position relative to the document (or container's content)
+    const elementTop = elementRect.top * scale;
+    const elementBottom = (elementRect.top + elementRect.height) * scale;
+    // Current scroll position
+    const scrollTop = visualRef.current?.scrollTop || 0;
+    const viewportHeight = visualRect.height;
+    // Visible viewport range in the scrollable content
+    const viewportTop = scrollTop;
+    const viewportBottom = scrollTop + viewportHeight;
+    // Check if element is within the visible viewport
+    // Element is visible if it overlaps with the viewport
+    return elementBottom > viewportTop && elementTop < viewportBottom;
+}
+
+function 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 getElementAtPoint = (doc, x, y) => {
+    let el = null;
+    if ('caretPositionFromPoint' in doc) {
+        el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
+    }
+    el = el ?? doc.elementFromPoint(x, y);
+    let element = el;
+    while (element && element.nodeType === Node.TEXT_NODE) {
+        element = element.parentElement;
+    }
+    return element;
+};
+function getElementHash(element) {
+    return (element.getAttribute('data-clarity-hash') ||
+        element.getAttribute('data-clarity-hashalpha') ||
+        element.getAttribute('data-clarity-hashbeta'));
+}
+const getElementRank = (hash, elements) => {
+    if (!elements)
+        return 0;
+    return elements.findIndex((e) => e.hash === hash) + 1;
+};
+const buildElementInfo = (hash, rect, heatmapInfo) => {
+    if (!rect || !heatmapInfo)
+        return null;
+    const info = heatmapInfo.elementMapInfo?.[hash];
+    if (!info)
+        return null;
+    const rank = getElementRank(hash, heatmapInfo.sortedElements);
+    const clicks = info.totalclicks ?? 0;
+    const selector = info.selector ?? '';
+    const baseInfo = {
+        hash,
+        clicks,
+        rank,
+        selector,
+    };
+    return {
+        ...baseInfo,
+        ...rect,
+    };
+};
+
 const PADDING = 0;
 const ARROW_SIZE = 8;
 const HORIZONTAL_OFFSET = 0;
-// ============================================================================
-// Viewport & Dimensions
-// ============================================================================
-const getViewportDimensions = () => ({
-    width: window.innerWidth,
-    height: window.innerHeight,
-});
+
+const getViewportDimensions = (containerElm) => {
+    if (containerElm) {
+        const containerRect = containerElm.getBoundingClientRect();
+        return {
+            width: containerRect.width,
+            height: containerRect.height,
+        };
+    }
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+};
 const getElementDimensions = (targetElm, calloutElm) => ({
     targetRect: targetElm.getBoundingClientRect(),
     calloutRect: calloutElm.getBoundingClientRect(),
 });
-// ============================================================================
-// Alignment Order
-// ============================================================================
+
 const getAlignmentOrder = (alignment) => {
     switch (alignment) {
         case 'center':
@@ -900,9 +1053,6 @@ const getAlignmentOrder = (alignment) => {
             return ['right', 'center', 'left'];
     }
 };
-// ============================================================================
-// Position Calculation
-// ============================================================================
 const calculateLeftPosition = ({ targetRect, calloutRect, hozOffset, align, }) => {
     switch (align) {
         case 'left':
@@ -926,31 +1076,40 @@ const calculateHorizontalPlacementPosition = (targetRect, calloutRect, placement
         : targetRect.left - calloutRect.width - padding - arrowSize;
     return { top, left };
 };
-// ============================================================================
-// Validation
-// ============================================================================
-const isLeftPositionValid = (leftPos, calloutWidth, viewportWidth, padding) => {
+
+const isLeftPositionValid = (leftPos, calloutWidth, viewportWidth, padding, containerRect) => {
+    if (containerRect) {
+        return leftPos >= containerRect.left + padding && leftPos + calloutWidth <= containerRect.right - padding;
+    }
     return leftPos >= padding && leftPos + calloutWidth <= viewportWidth - padding;
 };
-const isVerticalPositionValid = (targetRect, calloutRect, placement, viewportHeight, padding, arrowSize) => {
+const isVerticalPositionValid = (targetRect, calloutRect, placement, viewportHeight, padding, arrowSize, containerRect) => {
+    if (containerRect) {
+        return placement === 'top'
+            ? targetRect.top - calloutRect.height - padding - arrowSize >= containerRect.top
+            : targetRect.bottom + calloutRect.height + padding + arrowSize <= containerRect.bottom;
+    }
     return placement === 'top'
         ? targetRect.top - calloutRect.height - padding - arrowSize > 0
         : targetRect.bottom + calloutRect.height + padding + arrowSize < viewportHeight;
 };
-const isHorizontalPlacementValid = (targetRect, calloutRect, placement, viewportWidth, padding, arrowSize) => {
+const isHorizontalPlacementValid = (targetRect, calloutRect, placement, viewportWidth, padding, arrowSize, containerRect) => {
+    if (containerRect) {
+        return placement === 'right'
+            ? targetRect.right + calloutRect.width + padding + arrowSize <= containerRect.right
+            : targetRect.left - calloutRect.width - padding - arrowSize >= containerRect.left;
+    }
     return placement === 'right'
         ? targetRect.right + calloutRect.width + padding + arrowSize < viewportWidth
         : targetRect.left - calloutRect.width - padding - arrowSize > 0;
 };
-// ============================================================================
-// Position Candidates Generation
-// ============================================================================
-const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHeight, viewportWidth, alignment, hozOffset, padding, arrowSize) => {
+
+const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHeight, viewportWidth, alignment, hozOffset, padding, arrowSize, containerRect) => {
     const candidates = [];
     const placements = ['top', 'bottom'];
     placements.forEach((placement) => {
         const verticalPos = calculateVerticalPosition(targetRect, calloutRect, placement, padding, arrowSize);
-        const verticalValid = isVerticalPositionValid(targetRect, calloutRect, placement, viewportHeight, padding, arrowSize);
+        const verticalValid = isVerticalPositionValid(targetRect, calloutRect, placement, viewportHeight, padding, arrowSize, containerRect);
         const alignmentOrder = getAlignmentOrder(alignment);
         alignmentOrder.forEach((align) => {
             const horizontalPos = calculateLeftPosition({
@@ -965,13 +1124,13 @@ const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHei
                 left: horizontalPos,
                 horizontalAlign: align,
                 valid: verticalValid &&
-                    isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding),
+                    isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding, containerRect),
             });
         });
     });
     return candidates;
 };
-const generateHorizontalPositionCandidates = (targetRect, calloutRect, viewportWidth, padding, arrowSize) => {
+const generateHorizontalPositionCandidates = (targetRect, calloutRect, viewportWidth, padding, arrowSize, containerRect) => {
     const placements = ['left', 'right'];
     return placements.map((placement) => {
         const { top, left } = calculateHorizontalPlacementPosition(targetRect, calloutRect, placement, padding, arrowSize);
@@ -980,46 +1139,45 @@ const generateHorizontalPositionCandidates = (targetRect, calloutRect, viewportW
             top,
             left,
             horizontalAlign: 'center',
-            valid: isHorizontalPlacementValid(targetRect, calloutRect, placement, viewportWidth, padding, arrowSize),
+            valid: isHorizontalPlacementValid(targetRect, calloutRect, placement, viewportWidth, padding, arrowSize, containerRect),
         };
     });
 };
-const generateAllPositionCandidates = (rectDimensions, viewport, alignment, hozOffset, padding, arrowSize) => {
+const generateAllPositionCandidates = (rectDimensions, viewport, alignment, hozOffset, padding, arrowSize, containerRect) => {
     const { targetRect, calloutRect } = rectDimensions;
-    const verticalCandidates = generateVerticalPositionCandidates(targetRect, calloutRect, viewport.height, viewport.width, alignment, hozOffset, padding, arrowSize);
-    const horizontalCandidates = generateHorizontalPositionCandidates(targetRect, calloutRect, viewport.width, padding, arrowSize);
+    const verticalCandidates = generateVerticalPositionCandidates(targetRect, calloutRect, viewport.height, viewport.width, alignment, hozOffset, padding, arrowSize, containerRect);
+    const horizontalCandidates = generateHorizontalPositionCandidates(targetRect, calloutRect, viewport.width, padding, arrowSize, containerRect);
     return [...verticalCandidates, ...horizontalCandidates];
 };
-// ============================================================================
-// Position Selection
-// ============================================================================
+
 const selectBestPosition = (candidates) => {
     return candidates.find((p) => p.valid) || candidates[0];
 };
-// ============================================================================
-// Viewport Boundary Adjustment
-// ============================================================================
-const constrainToViewport = (position, calloutRect, viewport, padding) => {
+const constrainToViewport = (position, calloutRect, viewport, padding, containerRect) => {
+    if (containerRect) {
+        const left = Math.max(containerRect.left + padding, Math.min(position.left, containerRect.right - calloutRect.width - padding));
+        const top = Math.max(containerRect.top + padding, Math.min(position.top, containerRect.bottom - calloutRect.height - padding));
+        return { top, left };
+    }
     const left = Math.max(padding, Math.min(position.left, viewport.width - calloutRect.width - padding));
     const top = Math.max(padding, Math.min(position.top, viewport.height - calloutRect.height - padding));
     return { top, left };
 };
-// ============================================================================
-// Main Function
-// ============================================================================
-const calcCalloutPosition = ({ targetElm, calloutElm, setPosition, hozOffset = HORIZONTAL_OFFSET, alignment = 'center', }) => {
+
+const calcCalloutPosition = ({ targetElm, calloutElm, setPosition, hozOffset = HORIZONTAL_OFFSET, alignment = 'center', containerElm, }) => {
     return () => {
         // 1. Get dimensions
         const rectDimensions = getElementDimensions(targetElm, calloutElm);
-        const viewport = getViewportDimensions();
+        const viewport = getViewportDimensions(containerElm);
+        const containerRect = containerElm?.getBoundingClientRect();
         const padding = PADDING;
         const arrowSize = ARROW_SIZE;
         // 2. Generate all position candidates
-        const candidates = generateAllPositionCandidates(rectDimensions, viewport, alignment, hozOffset, padding, arrowSize);
+        const candidates = generateAllPositionCandidates(rectDimensions, viewport, alignment, hozOffset, padding, arrowSize, containerRect);
         // 3. Select best position
         const bestPosition = selectBestPosition(candidates);
         // 4. Constrain to viewport
-        const constrainedPosition = constrainToViewport({ top: bestPosition.top, left: bestPosition.left }, rectDimensions.calloutRect, viewport, padding);
+        const constrainedPosition = constrainToViewport({ top: bestPosition.top, left: bestPosition.left }, rectDimensions.calloutRect, viewport, padding, containerRect);
         // 5. Create final position object
         const finalPosition = {
             top: constrainedPosition.top,
@@ -1031,124 +1189,6 @@ const calcCalloutPosition = ({ targetElm, calloutElm, setPosition, hozOffset = H
     };
 };
 
-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 getElementAtPoint = (doc, x, y) => {
-    let el = null;
-    if ('caretPositionFromPoint' in doc) {
-        el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
-    }
-    el = el ?? doc.elementFromPoint(x, y);
-    let element = el;
-    while (element && element.nodeType === Node.TEXT_NODE) {
-        element = element.parentElement;
-    }
-    return element;
-};
-function getElementHash(element) {
-    return (element.getAttribute('data-clarity-hash') ||
-        element.getAttribute('data-clarity-hashalpha') ||
-        element.getAttribute('data-clarity-hashbeta'));
-}
-const getElementRank = (hash, elements) => {
-    if (!elements)
-        return 0;
-    return elements.findIndex((e) => e.hash === hash) + 1;
-};
-const buildElementInfo = (hash, rect, heatmapInfo) => {
-    if (!rect || !heatmapInfo)
-        return null;
-    const info = heatmapInfo.elementMapInfo?.[hash];
-    if (!info)
-        return null;
-    const rank = getElementRank(hash, heatmapInfo.sortedElements);
-    const clicks = info.totalclicks ?? 0;
-    const selector = info.selector ?? '';
-    const baseInfo = {
-        hash,
-        clicks,
-        rank,
-        selector,
-    };
-    return {
-        ...baseInfo,
-        ...rect,
-    };
-};
-
-function findLastSizeOfDom(data) {
-    const listDocs = data
-        .filter((item) => item.doc?.find((doc) => doc.data.width && doc.data.height))
-        .flatMap((item) => item.doc?.flatMap((doc) => doc.data));
-    const lastDoc = listDocs?.[listDocs.length - 1];
-    const docSize = {
-        width: lastDoc?.width,
-        height: lastDoc?.height,
-    };
-    const listResizes = data.filter((item) => !!item.resize).flatMap((item) => item.resize);
-    const lastResizeEvent = listResizes?.[listResizes.length - 1];
-    const resize = {
-        width: lastResizeEvent?.data.width,
-        height: lastResizeEvent?.data.height,
-    };
-    return {
-        doc: docSize,
-        resize: resize,
-        size: {
-            width: resize.width || docSize.width,
-            height: resize.height || docSize.height,
-        },
-    };
-}
-function decodePayloads(payload) {
-    try {
-        return decode(payload);
-    }
-    catch (error) {
-        return null;
-    }
-}
-
-function calculateRankPosition(rect, widthScale) {
-    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
-    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
-    return {
-        transform: `scale(${1.2 * widthScale})`,
-        top: Number.isNaN(top) ? undefined : top,
-        left: Number.isNaN(left) ? undefined : left,
-    };
-}
-function isElementInViewport(elementRect, visualRef, scale) {
-    if (!elementRect)
-        return false;
-    const visualRect = visualRef.current?.getBoundingClientRect();
-    if (!visualRect)
-        return false;
-    // Element position relative to the document (or container's content)
-    const elementTop = elementRect.top * scale;
-    const elementBottom = (elementRect.top + elementRect.height) * scale;
-    // Current scroll position
-    const scrollTop = visualRef.current?.scrollTop || 0;
-    const viewportHeight = visualRect.height;
-    // Visible viewport range in the scrollable content
-    const viewportTop = scrollTop;
-    const viewportBottom = scrollTop + viewportHeight;
-    // Check if element is within the visible viewport
-    // Element is visible if it overlaps with the viewport
-    return elementBottom > viewportTop && elementTop < viewportBottom;
-}
-
 class IframeNavigationBlockerV2 {
     doc;
     win;
@@ -2018,11 +2058,12 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             return;
         }
         const hash = getElementHash(targetElement);
-        if (!!hash)
+        if (hash)
             return hash;
         reset();
         return;
-    }, [dataInfo, iframeRef, getRect, widthScale, reset]);
+    }, [dataInfo, iframeRef, widthScale, reset]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleMouseMove = useCallback(debounce((event) => {
         if (!dataInfo) {
             reset();
@@ -2046,6 +2087,7 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         if (!hoveredElement?.hash)
             return;
         setSelectedElement(hoveredElement.hash);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hoveredElement?.hash]);
     return {
         hoveredElement,
@@ -2071,7 +2113,6 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
         const element = elementsAtPoint[i];
         const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
         if (elementHash && heatmapInfo.elementMapInfo?.[elementHash]) {
-            heatmapInfo.elementMapInfo[elementHash];
             const boundingBox = getBoundingBox(element);
             if (boundingBox) {
                 dataElement = element;
@@ -2079,7 +2120,7 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
             }
         }
     }
-    if (!!dataElement) {
+    if (dataElement) {
         return dataElement;
     }
     let targetElement = getElementAtPoint(doc, x, y);
@@ -2733,7 +2774,7 @@ const useWrapperRefHeight = (props) => {
     return {};
 };
 
-const useZonePositions = (options) => {
+const useZonePositions = (_options) => {
     const { iframeHeight } = useHeatmapViz();
     const getZonePosition = useCallback((zone) => {
         if (!iframeHeight) {
@@ -3188,7 +3229,7 @@ function withPerformanceTracking(Component, options = {}) {
         const name = componentName || Component.displayName || Component.name || 'Unknown';
         const viewId = viewIdProp in props ? props[viewIdProp] : undefined;
         if (trackProps) {
-            useWhyDidYouUpdate(name, props, viewId);
+            useWhyDidYouUpdate(name, props, viewId); // eslint-disable-line react-hooks/rules-of-hooks
         }
         return jsx(Component, { ...props });
     };
@@ -3261,16 +3302,10 @@ function trackStoreAction(storeName, action, viewId, metadata) {
     performanceLogger.log(metric);
 }
 
-/**
- * Get performance report as JSON string
- */
 function getPerformanceReportJSON() {
     const report = performanceLogger.generateReport();
     return JSON.stringify(report, null, 2);
 }
-/**
- * Download performance report as JSON file
- */
 function downloadPerformanceReport(filename = 'heatmap-performance-report.json') {
     const report = performanceLogger.generateReport();
     const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
@@ -3281,9 +3316,6 @@ function downloadPerformanceReport(filename = 'heatmap-performance-report.json')
     link.click();
     URL.revokeObjectURL(url);
 }
-/**
- * Send performance report to external endpoint
- */
 async function sendPerformanceReport(endpoint) {
     const report = performanceLogger.generateReport();
     try {
@@ -3303,9 +3335,6 @@ async function sendPerformanceReport(endpoint) {
         throw error;
     }
 }
-/**
- * Print performance summary to console
- */
 function printPerformanceSummary() {
     const report = performanceLogger.generateReport();
     console.group('📊 Performance Summary');
@@ -3331,9 +3360,6 @@ function printPerformanceSummary() {
     }
     console.groupEnd();
 }
-/**
- * Get performance metrics filtered by viewId
- */
 function getMetricsByViewId(viewId) {
     const allMetrics = performanceLogger.getMetrics();
     const filteredMetrics = allMetrics.filter((m) => {
@@ -3349,17 +3375,28 @@ function getMetricsByViewId(viewId) {
             totalHookCalls: filteredMetrics.filter((m) => m.type === 'hook').length,
             totalStoreUpdates: filteredMetrics.filter((m) => m.type === 'store').length,
             averageRenderTime: 0, // Recalculate if needed
-            viewMetrics: { [viewId]: report.summary.viewMetrics[viewId] || { renders: 0, hookCalls: 0, storeUpdates: 0 } },
+            viewMetrics: {
+                [viewId]: report.summary.viewMetrics[viewId] || {
+                    renders: 0,
+                    hookCalls: 0,
+                    storeUpdates: 0,
+                },
+            },
         },
     };
 }
-/**
- * Compare performance between two viewIds
- */
 function compareViewPerformance(viewId1, viewId2) {
     const report = performanceLogger.generateReport();
-    const view1Metrics = report.summary.viewMetrics[viewId1] || { renders: 0, hookCalls: 0, storeUpdates: 0 };
-    const view2Metrics = report.summary.viewMetrics[viewId2] || { renders: 0, hookCalls: 0, storeUpdates: 0 };
+    const view1Metrics = report.summary.viewMetrics[viewId1] || {
+        renders: 0,
+        hookCalls: 0,
+        storeUpdates: 0,
+    };
+    const view2Metrics = report.summary.viewMetrics[viewId2] || {
+        renders: 0,
+        hookCalls: 0,
+        storeUpdates: 0,
+    };
     return {
         view1: view1Metrics,
         view2: view2Metrics,
@@ -3382,7 +3419,7 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const style = props.style || {};
     const gap = props.gap || 0;
     const height = props.height || 'auto';
-    const isZIndexDefined = typeof props.zIndex !== undefined;
+    const isZIndexDefined = typeof props.zIndex !== 'undefined';
     const zIndex = props.zIndex;
     const backgroundColor = props.backgroundColor || 'transparent';
     const styleGap = useMemo(() => {
@@ -3413,6 +3450,7 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
     };
     return (jsx("div", { id: id, style: styleProps, ref: ref, children: children }));
 });
+BoxStack.displayName = 'BoxStack';
 
 const ContentTopBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
@@ -3638,6 +3676,7 @@ const ElementCallout = (props) => {
             setPosition,
             hozOffset,
             alignment,
+            containerElm: visualRef?.current,
         });
         positionFn();
         const handleUpdate = () => {
@@ -4214,4 +4253,4 @@ const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     }
 };
 
-export { DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getCompareViewIndex, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, isCompareViewId, performanceLogger, printPerformanceSummary, sendPerformanceReport, trackStoreAction, useClickedElement, useElementCalloutVisible, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapDataStore, useHeatmapEffects, useHeatmapElementPosition, useHeatmapInteraction, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapScale, useHeatmapSingleStore, useHeatmapViz, useHeatmapVizRender, useHeatmapVizScrollmap, useHeatmapVizScrollmapStore, useHeatmapVizStore, useHoveredElement, useIsCompareMode, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewId, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getCompareViewIndex, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, isCompareViewId, performanceLogger, printPerformanceSummary, sendPerformanceReport, trackStoreAction, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapDataStore, useHeatmapEffects, useHeatmapElementPosition, useHeatmapInteraction, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapScale, useHeatmapSingleStore, useHeatmapViz, useHeatmapVizRender, useHeatmapVizScrollmap, useHeatmapVizScrollmapStore, useHeatmapVizStore, useHoveredElement, useIsCompareMode, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewId, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };