@gemx-dev/heatmap-react 3.5.92-dev.23 → 3.5.92-dev.25

package/dist/esm/index.mjs

@@ -1677,30 +1677,15 @@ const drawBackdropWithCutout = (options) => {
     const height = Math.min(canvasHeight - top, activeRect.height + cutoutExpansion * 2);
     // Clear previous drawing
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-    // Set backdrop style
+    // Draw backdrop as a single path with a cutout hole using evenodd fill rule.
+    // This avoids seam artifacts that appear when using 4 separate rectangles
+    // with fractional coordinates (sub-pixel gaps at rect boundaries).
     ctx.fillStyle = backdropColor;
     ctx.globalAlpha = backdropOpacity;
-    // Draw backdrop in 4 rectangles around the active element
-    // This creates a cutout effect
-    // Top rectangle (above active element)
-    if (top > 0) {
-        ctx.fillRect(0, 0, canvasWidth, top);
-    }
-    // Bottom rectangle (below active element)
-    const bottomY = top + height;
-    if (bottomY < canvasHeight) {
-        ctx.fillRect(0, bottomY, canvasWidth, canvasHeight - bottomY);
-    }
-    // Left rectangle (left of active element)
-    if (left > 0) {
-        ctx.fillRect(0, top, left, height);
-    }
-    // Right rectangle (right of active element)
-    const rightX = left + width;
-    if (rightX < canvasWidth) {
-        ctx.fillRect(rightX, top, canvasWidth - rightX, height);
-    }
-    // Reset alpha
+    ctx.beginPath();
+    ctx.rect(0, 0, canvasWidth, canvasHeight); // outer (full canvas)
+    ctx.rect(left, top, width, height); // inner (cutout hole)
+    ctx.fill('evenodd');
     ctx.globalAlpha = 1.0;
 };
 /**
@@ -3221,7 +3206,7 @@ function useAreaEditMode({ iframeRef, onAreaCreatedElement, enabled = false, })
         }
         iframeDocument.addEventListener('mousemove', handleMouseMove);
         iframeDocument.addEventListener('scroll', handleMouseLeave);
-        iframeDocument.removeEventListener('mouseleave', handleMouseLeave);
+        iframeDocument.addEventListener('mouseleave', handleMouseLeave);
         iframeDocument.addEventListener('click', handleClick);
         return () => {
             iframeDocument.removeEventListener('mousemove', handleMouseMove);
@@ -3596,6 +3581,7 @@ const useHeatmapCanvas = () => {
     const heatmapType = useHeatmapSettingContext((state) => state.heatmapType);
     const clickMode = useHeatmapSettingContext((state) => state.clickMode);
     const scrollType = useHeatmapSettingContext((state) => state.scrollType);
+    const setSelectedElement = useHeatmapClickContext((s) => s.setSelectedElement);
     const { start: startClickmap } = useClickmap();
     const { start: startAreaClickmap } = useAreaClickmap();
     const { start: startScrollmap } = useScrollmap();
@@ -3614,7 +3600,10 @@ const useHeatmapCanvas = () => {
                 startScrollmap();
                 break;
         }
-    }, [heatmapType, clickMode, startClickmap, startAreaClickmap, startScrollmap, scrollType]);
+        return () => {
+            setSelectedElement(null);
+        };
+    }, [heatmapType, clickMode, startClickmap, startAreaClickmap, startScrollmap, scrollType]); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
 const scrollToElementIfNeeded = (visualRef, rect, scale, onScrollComplete) => {
@@ -4235,6 +4224,30 @@ function createPerfTimer(config) {
     };
 }
 
+/**
+ * Default iframe dimension calculation.
+ * Used as fallback when no fix overrides getDimensions().
+ */
+function getFinalHeight(doc, win) {
+    void doc.body.offsetHeight; // trigger reflow
+    // const bodyMinHeight = parseFloat(win.getComputedStyle(doc.body).minHeight) || 0;
+    // const htmlMinHeight = parseFloat(win.getComputedStyle(doc.documentElement).minHeight) || 0;
+    return Math.max(
+    // doc.body?.scrollHeight || 0,
+    // doc.body?.offsetHeight || 0,
+    // doc.documentElement?.scrollHeight || 0,
+    // doc.documentElement?.offsetHeight || 0,
+    doc.documentElement?.clientHeight || 0);
+}
+function getFinalWidth(doc) {
+    return Math.max(
+    // doc.body?.scrollWidth || 0,
+    // doc.body?.offsetWidth || 0,
+    // doc.documentElement?.scrollWidth || 0,
+    // doc.documentElement?.offsetWidth || 0,
+    doc.documentElement?.clientWidth || 0);
+}
+
 /**
  * DOM observation setup — ResizeObserver + MutationObserver.
  * Returns a cleanup function that disconnects both observers.
@@ -4259,36 +4272,74 @@ function setup(doc, onChange) {
     };
 }
 
+// cspell:ignore cooldown
 /**
  * Height Observer Processor
  * Background observer — watches for iframe content height changes.
  */
-// ── Module-level functions ────────────────────────────────────────────────────
-function clearTimers(s) {
-    if (s.throttleTimeout) {
-        clearTimeout(s.throttleTimeout);
-        s.throttleTimeout = null;
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function readCurrentHeight(s) {
+    if (!s.iframe?.contentDocument || !s.iframe?.contentWindow)
+        return 0;
+    const height = getFinalHeight(s.iframe.contentDocument, s.iframe.contentWindow);
+    s.logger.log('Height:', height);
+    return height;
+}
+function isBlocked(s) {
+    return s.isProcessing || s.isCoolingDown || s.throttleTimeout !== null;
+}
+function hasHeightChanged(s, height) {
+    return height !== s.lastHeight;
+}
+// ── Cooldown ──────────────────────────────────────────────────────────────────
+function startCooldown(s) {
+    s.isCoolingDown = true;
+    s.cooldownTimeout = setTimeout(() => {
+        s.cooldownTimeout = null;
+        s.isCoolingDown = false;
+    }, s.cooldownMs);
+}
+function stopCooldown(s) {
+    if (s.cooldownTimeout) {
+        clearTimeout(s.cooldownTimeout);
+        s.cooldownTimeout = null;
     }
+    s.isCoolingDown = false;
+}
+// ── Debounce ──────────────────────────────────────────────────────────────────
+function cancelPendingDebounce(s) {
     if (s.debounceTimeout) {
         clearTimeout(s.debounceTimeout);
         s.debounceTimeout = null;
     }
 }
-function getActualHeight(s) {
-    if (!s.iframe?.contentDocument)
-        return 0;
-    const { documentElement: docEl, body } = s.iframe.contentDocument;
-    const heights = [docEl.scrollHeight, docEl.offsetHeight, body.scrollHeight, body.offsetHeight];
-    const maxHeight = Math.max(...heights.filter((h) => h > 0));
-    s.logger.log('Height sources:', {
-        'documentElement.scrollHeight': docEl.scrollHeight,
-        'documentElement.offsetHeight': docEl.offsetHeight,
-        'body.scrollHeight': body.scrollHeight,
-        'body.offsetHeight': body.offsetHeight,
-        maxHeight,
-    });
-    return maxHeight;
+function processCurrentHeightIfChanged(s) {
+    const height = readCurrentHeight(s);
+    if (hasHeightChanged(s, height)) {
+        processHeightChange(s, height);
+    }
 }
+function scheduleDebounce(s) {
+    cancelPendingDebounce(s);
+    s.debounceTimeout = setTimeout(() => {
+        s.debounceTimeout = null;
+        processCurrentHeightIfChanged(s);
+    }, s.debounceMs);
+}
+// ── Throttle ──────────────────────────────────────────────────────────────────
+function scheduleThrottledCheck(s) {
+    s.throttleTimeout = setTimeout(() => {
+        s.throttleTimeout = null;
+        const height = readCurrentHeight(s);
+        if (!hasHeightChanged(s, height)) {
+            cancelPendingDebounce(s);
+            return;
+        }
+        s.logger.log(`Height changed: ${s.lastHeight}px -> ${height}px`);
+        scheduleDebounce(s);
+    }, s.throttleMs);
+}
+// ── Core ──────────────────────────────────────────────────────────────────────
 async function processHeightChange(s, newHeight) {
     if (!s.iframe || !s.config)
         return;
@@ -4300,7 +4351,6 @@ async function processHeightChange(s, newHeight) {
             width: s.iframe.contentWindow?.innerWidth ?? 0,
         };
         s.lastHeight = newHeight;
-        s.logger.log('Height change processed:', result);
         s.config.onHeightChange?.(result);
         window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', { detail: result }));
     }
@@ -4310,46 +4360,59 @@ async function processHeightChange(s, newHeight) {
     }
     finally {
         s.isProcessing = false;
+        if (s.cooldownMs > 0)
+            startCooldown(s);
     }
 }
 function handleHeightChange(s) {
-    if (s.isProcessing || s.throttleTimeout)
+    if (isBlocked(s))
         return;
-    s.throttleTimeout = setTimeout(() => {
-        s.throttleTimeout = null;
-        const currentHeight = getActualHeight(s);
-        if (currentHeight === s.lastHeight) {
-            // Height returned to known state — cancel any stale pending debounce
-            // to prevent it from firing with an outdated height and corrupting lastHeight.
-            if (s.debounceTimeout) {
-                clearTimeout(s.debounceTimeout);
-                s.debounceTimeout = null;
-            }
-            return;
-        }
-        s.logger.log(`Height changed: ${s.lastHeight}px -> ${currentHeight}px`);
-        if (s.debounceTimeout)
-            clearTimeout(s.debounceTimeout);
-        s.debounceTimeout = setTimeout(() => {
-            s.debounceTimeout = null;
-            // Re-read height at dispatch time to avoid using a stale closure value.
-            const finalHeight = getActualHeight(s);
-            if (finalHeight !== s.lastHeight) {
-                processHeightChange(s, finalHeight);
-            }
-        }, s.debounceMs);
-    }, s.throttleMs);
+    scheduleThrottledCheck(s);
 }
-function observe(s) {
+function attachObserver(s) {
     if (!s.iframe?.contentDocument?.body) {
         s.logger.warn('Cannot observe height changes: iframe body not found');
         return;
     }
     s.observerCleanup?.();
-    s.lastHeight = getActualHeight(s);
+    s.lastHeight = readCurrentHeight(s);
     s.logger.log('Initial height:', s.lastHeight);
     s.observerCleanup = setup(s.iframe.contentDocument, () => handleHeightChange(s));
 }
+function detachObserver(s) {
+    s.observerCleanup?.();
+    s.observerCleanup = null;
+}
+function clearAllTimers(s) {
+    if (s.throttleTimeout) {
+        clearTimeout(s.throttleTimeout);
+        s.throttleTimeout = null;
+    }
+    if (s.debounceTimeout) {
+        clearTimeout(s.debounceTimeout);
+        s.debounceTimeout = null;
+    }
+    if (s.startDelayTimeout) {
+        clearTimeout(s.startDelayTimeout);
+        s.startDelayTimeout = null;
+    }
+    stopCooldown(s);
+}
+// ── Lifecycle ─────────────────────────────────────────────────────────────────
+function observeImmediately(s) {
+    attachObserver(s);
+    s.logger.log('Height observer started');
+}
+function observeAfterDelay(s, delayMs) {
+    s.logger.log(`Height observer will start in ${delayMs}ms`);
+    s.startDelayTimeout = setTimeout(() => {
+        s.startDelayTimeout = null;
+        if (!s.running)
+            return;
+        attachObserver(s);
+        s.logger.log('Height observer started (after delay)');
+    }, delayMs);
+}
 function start$5(s, iframe, cfg) {
     if (s.running) {
         s.logger.warn('Observer is already running. Call stop() first.');
@@ -4359,27 +4422,32 @@ function start$5(s, iframe, cfg) {
     s.config = cfg;
     s.throttleMs = cfg.throttleMs ?? 25;
     s.debounceMs = cfg.debounceMs ?? 500;
+    s.cooldownMs = cfg.cooldownMs ?? 0;
     s.running = true;
-    observe(s);
-    s.logger.log('Height observer started');
+    const startDelayMs = cfg.startDelayMs ?? 0;
+    if (startDelayMs > 0) {
+        observeAfterDelay(s, startDelayMs);
+    }
+    else {
+        observeImmediately(s);
+    }
 }
 function stop$5(s) {
     if (!s.running)
         return;
-    s.observerCleanup?.();
-    s.observerCleanup = null;
-    clearTimers(s);
+    detachObserver(s);
+    clearAllTimers(s);
     s.iframe = null;
     s.config = null;
     s.lastHeight = 0;
     s.isProcessing = false;
+    s.isCoolingDown = false;
     s.running = false;
     s.logger.log('Height observer stopped');
 }
 function clear(s) {
-    s.observerCleanup?.();
-    s.observerCleanup = null;
-    clearTimers(s);
+    detachObserver(s);
+    clearAllTimers(s);
     s.lastHeight = 0;
     s.isProcessing = false;
 }
@@ -4393,6 +4461,8 @@ function updateConfig$3(s, cfg) {
         s.throttleMs = cfg.throttleMs;
     if (cfg.debounceMs !== undefined)
         s.debounceMs = cfg.debounceMs;
+    if (cfg.cooldownMs !== undefined)
+        s.cooldownMs = cfg.cooldownMs;
     s.logger.configure({ enabled: !!s.config.debug });
     s.logger.log('Config updated');
 }
@@ -4406,15 +4476,19 @@ function createHeightObserver() {
         lastHeight: 0,
         throttleTimeout: null,
         debounceTimeout: null,
+        startDelayTimeout: null,
+        cooldownTimeout: null,
         isProcessing: false,
+        isCoolingDown: false,
         throttleMs: 25,
         debounceMs: 500,
+        cooldownMs: 0,
         running: false,
     };
     return {
         start: (iframe, cfg) => start$5(s, iframe, cfg),
         stop: () => stop$5(s),
-        observe: () => observe(s),
+        observe: () => attachObserver(s),
         clear: () => clear(s),
         updateConfig: (cfg) => updateConfig$3(s, cfg),
         getCurrentHeight: () => s.lastHeight,
@@ -5161,20 +5235,6 @@ register$1({
     afterProcess,
 });
 
-/**
- * Default iframe dimension calculation.
- * Used as fallback when no fix overrides getDimensions().
- */
-function getFinalHeight(doc, win) {
-    void doc.body.offsetHeight; // trigger reflow
-    const bodyMinHeight = parseFloat(win.getComputedStyle(doc.body).minHeight) || 0;
-    const htmlMinHeight = parseFloat(win.getComputedStyle(doc.documentElement).minHeight) || 0;
-    return Math.max(doc.body?.scrollHeight || 0, doc.body?.offsetHeight || 0, doc.documentElement?.scrollHeight || 0, doc.documentElement?.offsetHeight || 0, doc.documentElement?.clientHeight || 0, bodyMinHeight, htmlMinHeight);
-}
-function getFinalWidth(doc) {
-    return Math.max(doc.body?.scrollWidth || 0, doc.body?.offsetWidth || 0, doc.documentElement?.scrollWidth || 0, doc.documentElement?.offsetWidth || 0, doc.documentElement?.clientWidth || 0);
-}
-
 /**
  * Viewport fix pipeline runner.
  *
@@ -5456,20 +5516,6 @@ async function process(s) {
         perf$3.endSession();
         s.logger.groupEnd();
         s.logger.log('Process completed:', result);
-        s.heightObserver.stop();
-        s.heightObserver.start(s.iframe, {
-            iframe: s.iframe,
-            debug: s.config.debug,
-            throttleMs: 25,
-            debounceMs: 500,
-            onHeightChange: (result) => {
-                s.config?.onSuccess?.(result);
-                dispatchDimensionsEvent(result);
-            },
-            onError: (error) => {
-                s.config?.onError?.(error);
-            },
-        });
         s.config.onSuccess?.(result);
         dispatchDimensionsEvent(result);
     }
@@ -5521,6 +5567,26 @@ function stop$1(s) {
     s.running = false;
     s.logger.log('Stopped');
 }
+function startHeightObserver(s) {
+    if (!s.iframe || !s.config)
+        return;
+    s.heightObserver.stop();
+    s.heightObserver.start(s.iframe, {
+        iframe: s.iframe,
+        debug: s.config.debug,
+        throttleMs: 25,
+        debounceMs: 500,
+        cooldownMs: 1000,
+        startDelayMs: s.config.heightObserverStartDelayMs,
+        onHeightChange: (result) => {
+            s.config?.onSuccess?.(result);
+            dispatchDimensionsEvent(result);
+        },
+        onError: (error) => {
+            s.config?.onError?.(error);
+        },
+    });
+}
 async function recalculate$1(s) {
     if (!s.running) {
         s.logger.warn('Fixer is not running.');
@@ -5559,6 +5625,7 @@ function createOrchestrator() {
         enableNavigationBlockingMessage: () => s.navigationBlocker.enableMessage(),
         disableNavigationBlocking: () => s.navigationBlocker.disable(),
         disableNavigationBlockingMessage: () => s.navigationBlocker.disableMessage(),
+        startHeightObserver: () => startHeightObserver(s),
         isRunning: () => s.running,
         getStateInfo: () => ({
             isRunning: s.running,
@@ -5617,6 +5684,7 @@ function createIframeHelper() {
         stop: () => stop(s),
         recalculate: () => recalculate(s),
         enableNavigationBlocking: () => enableNavigationBlocking(s),
+        startHeightObserver: () => s.fixer.startHeightObserver(),
         isRunning: () => s.running,
     };
 }
@@ -6648,6 +6716,7 @@ const useHeatmapIframeProcessor = () => {
                 if (height)
                     setIframeHeight(height);
                 setIsDomLoaded(true);
+                helperRef.current?.startHeightObserver();
             },
         });
     }, [deviceType]);
@@ -6674,6 +6743,7 @@ const useHeatmapIframeProcessor = () => {
                 if (height)
                     setIframeHeight(height);
                 setIsDomLoaded(true);
+                helperRef.current?.startHeightObserver();
             },
         });
     }, [viewport]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -6702,6 +6772,7 @@ function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Deskt
         iframe,
         debug: true,
         shopId,
+        heightObserverStartDelayMs: 1000,
         onSuccess: (data) => {
             perf$1.measure('IframeHelper processing', tHelper);
             perf$1.measure('Total render', t0);
@@ -8490,45 +8561,6 @@ const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
     }
 };
 
-const IS_ENABLE_MINIMAP = false;
-const Minimap = ({ zones, maxUsers }) => {
-    const scrollType = useHeatmapSettingContext((s) => s.scrollType);
-    const showMinimap = useHeatmapScrollContext((s) => s.showMinimap);
-    const isScrollType = [EScrollType.Attention].includes(scrollType ?? EScrollType.Depth);
-    if (!showMinimap || !isScrollType || !IS_ENABLE_MINIMAP)
-        return null;
-    return (jsx("div", { style: {
-            position: 'fixed',
-            left: '20px',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            width: '60px',
-            height: '400px',
-            backgroundColor: 'white',
-            borderRadius: '8px',
-            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
-            zIndex: 10002,
-            padding: '8px',
-            boxSizing: 'border-box',
-        }, children: jsx("div", { style: {
-                width: '100%',
-                height: '100%',
-                borderRadius: '4px',
-                overflow: 'hidden',
-                display: 'flex',
-                flexDirection: 'column',
-            }, children: zones.map((zone) => {
-                const normalized = maxUsers > 0 ? zone.percUsers / maxUsers : 0;
-                const color = getScrollGradientColor(normalized);
-                return (jsx("div", { title: `${zone.label}: ${zone.percUsers.toFixed(2)}%`, style: {
-                        width: '100%',
-                        flex: `${zone.endY - zone.startY}`,
-                        backgroundColor: color,
-                        borderBottom: '1px solid rgba(255,255,255,0.2)',
-                    } }, zone.id));
-            }) }) }));
-};
-
 const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, }) => {
     const CompScrollZoneTooltip = useHeatmapControlStore((state) => state.controls.ScrollZoneTooltip);
     const tooltipRef = useRef(null);
@@ -8554,17 +8586,9 @@ const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, })
 
 const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent }) => {
     const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
-    // const hoveredZone = useHeatmapVizScrollStore((state) => state.hoveredZone);
-    // const setHoveredZone = useHeatmapVizScrollStore((state) => state.setHoveredZone);
-    const { zones, isReady, maxUsers } = useScrollmapZones({
-        iframeRef,
-        wrapperRef,
-    });
-    if (!isReady || !zones.length)
-        return null;
     if (!position)
         return null;
-    return (jsxs(Fragment, { children: [jsx(ScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap || [] }), jsx(Minimap, { zones: zones, maxUsers: maxUsers })] }));
+    return (jsx(Fragment, { children: jsx(ScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap || [] }) }));
 };
 
 const ScrollOverlay = ({ wrapperRef, iframeRef }) => {

package/dist/esm/libs/iframe-processor/lifecycle.d.ts

@@ -11,6 +11,7 @@ export interface IframeHelperFactory extends LifecycleFactory {
     stop(): void;
     recalculate(): Promise<void>;
     enableNavigationBlocking(): void;
+    startHeightObserver(): void;
     isRunning(): boolean;
 }
 export declare function createIframeHelper(): IframeHelperFactory;

package/dist/esm/libs/iframe-processor/lifecycle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lifecycle.d.ts","sourceRoot":"","sources":["../../../src/libs/iframe-processor/lifecycle.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAM/D,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,KAAK,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACvC,IAAI,IAAI,IAAI,CAAC;IACb,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,wBAAwB,IAAI,IAAI,CAAC;IACjC,SAAS,IAAI,OAAO,CAAC;CACtB;AA4CD,wBAAgB,kBAAkB,IAAI,mBAAmB,CAaxD;AAED,MAAM,MAAM,YAAY,GAAG,mBAAmB,CAAC"}
+{"version":3,"file":"lifecycle.d.ts","sourceRoot":"","sources":["../../../src/libs/iframe-processor/lifecycle.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAM/D,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,KAAK,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACvC,IAAI,IAAI,IAAI,CAAC;IACb,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,wBAAwB,IAAI,IAAI,CAAC;IACjC,mBAAmB,IAAI,IAAI,CAAC;IAC5B,SAAS,IAAI,OAAO,CAAC;CACtB;AA4CD,wBAAgB,kBAAkB,IAAI,mBAAmB,CAcxD;AAED,MAAM,MAAM,YAAY,GAAG,mBAAmB,CAAC"}

package/dist/esm/libs/iframe-processor/orchestrator.d.ts

@@ -7,6 +7,7 @@ export interface OrchestratorFactory extends LifecycleFactory {
     enableNavigationBlockingMessage(): void;
     disableNavigationBlocking(): void;
     disableNavigationBlockingMessage(): void;
+    startHeightObserver(): void;
     getStateInfo(): Record<string, unknown>;
 }
 export declare function createOrchestrator(): OrchestratorFactory;

package/dist/esm/libs/iframe-processor/orchestrator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"orchestrator.d.ts","sourceRoot":"","sources":["../../../src/libs/iframe-processor/orchestrator.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAA0B,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAWvF,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;IACpD,wBAAwB,IAAI,IAAI,CAAC;IACjC,+BAA+B,IAAI,IAAI,CAAC;IACxC,yBAAyB,IAAI,IAAI,CAAC;IAClC,gCAAgC,IAAI,IAAI,CAAC;IACzC,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAqID,wBAAgB,kBAAkB,IAAI,mBAAmB,CA+BxD;AAED,MAAM,MAAM,YAAY,GAAG,mBAAmB,CAAC"}
+{"version":3,"file":"orchestrator.d.ts","sourceRoot":"","sources":["../../../src/libs/iframe-processor/orchestrator.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAA0B,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAWvF,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;IACpD,wBAAwB,IAAI,IAAI,CAAC;IACjC,+BAA+B,IAAI,IAAI,CAAC;IACxC,yBAAyB,IAAI,IAAI,CAAC;IAClC,gCAAgC,IAAI,IAAI,CAAC;IACzC,mBAAmB,IAAI,IAAI,CAAC;IAC5B,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AA0ID,wBAAgB,kBAAkB,IAAI,mBAAmB,CAgCxD;AAED,MAAM,MAAM,YAAY,GAAG,mBAAmB,CAAC"}

package/dist/esm/libs/iframe-processor/processors/height-observer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/libs/iframe-processor/processors/height-observer/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA8J3E,wBAAgB,oBAAoB,IAAI,qBAAqB,CA8B5D;AAED,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC;AACnD,YAAY,EAAE,oBAAoB,EAAE,CAAC;AAErC,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACpD,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/libs/iframe-processor/processors/height-observer/index.ts"],"names":[],"mappings":"AACA;;;GAGG;AAGH,OAAO,KAAK,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAyO3E,wBAAgB,oBAAoB,IAAI,qBAAqB,CAkC5D;AAED,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC;AACnD,YAAY,EAAE,oBAAoB,EAAE,CAAC;AAErC,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACpD,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC"}

package/dist/esm/libs/iframe-processor/processors/height-observer/types.d.ts

@@ -5,6 +5,10 @@ export interface HeightObserverConfig {
     debug?: boolean;
     throttleMs?: number;
     debounceMs?: number;
+    /** Delay (ms) before the observer starts watching after start() is called */
+    startDelayMs?: number;
+    /** Cooldown (ms) after a height change is processed before the next one can trigger */
+    cooldownMs?: number;
     onHeightChange?: (result: IframeDimensionsDetail) => void;
     onError?: (error: Error) => void;
 }

package/dist/esm/libs/iframe-processor/processors/height-observer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/libs/iframe-processor/processors/height-observer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAExE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,KAAK,CAAC,MAAM,EAAE,iBAAiB,EAAE,GAAG,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClE,IAAI,IAAI,IAAI,CAAC;IACb,OAAO,IAAI,IAAI,CAAC;IAChB,KAAK,IAAI,IAAI,CAAC;IACd,gBAAgB,IAAI,MAAM,CAAC;IAC3B,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;IACvD,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,MAAM,CAAC,MAAM,EAAE,iBAAiB,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC1D"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/libs/iframe-processor/processors/height-observer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAExE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,KAAK,CAAC,MAAM,EAAE,iBAAiB,EAAE,GAAG,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClE,IAAI,IAAI,IAAI,CAAC;IACb,OAAO,IAAI,IAAI,CAAC;IAChB,KAAK,IAAI,IAAI,CAAC;IACd,gBAAgB,IAAI,MAAM,CAAC;IAC3B,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;IACvD,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,MAAM,CAAC,MAAM,EAAE,iBAAiB,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC1D"}

package/dist/esm/libs/iframe-processor/shared/iframe-types.d.ts

@@ -7,6 +7,8 @@ export interface IframeStyleConfig {
     targetHeight: number;
     /** Shop identifier (numeric ID or myshopify domain) used for per-shop viewport fixes */
     shopId?: string | number;
+    /** Delay (ms) before the height observer starts after DOM is loaded */
+    heightObserverStartDelayMs?: number;
     onSuccess?: (result: {
         height: number;
         width: number;

package/dist/esm/libs/iframe-processor/shared/iframe-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iframe-types.d.ts","sourceRoot":"","sources":["../../../../src/libs/iframe-processor/shared/iframe-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"iframe-types.d.ts","sourceRoot":"","sources":["../../../../src/libs/iframe-processor/shared/iframe-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,uEAAuE;IACvE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/esm/types/viz-elm-callout.d.ts

@@ -1,4 +1,5 @@
 import type { ICalloutPositionMode } from '../components/VizElement/ElementCallout';
+import type { IHeatmapRef } from './heatmap-ref';
 import type { ElementInfo } from './viz-elm';
 export type IVerticalPlacement = 'top' | 'bottom';
 export type IHorizontalPlacement = 'left' | 'right';
@@ -72,7 +73,7 @@ export interface ICalcCalloutPositionProps {
     };
     alignment?: IHorizontalAlignment;
     positionMode?: ICalloutPositionMode;
-    visualRef?: React.RefObject<HTMLDivElement> | null;
+    visualRef?: IHeatmapRef['Visual'] | null;
 }
 export interface ICalcCalloutPositionAbsoluteProps {
     widthScale: number;

package/dist/esm/types/viz-elm-callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viz-elm-callout.d.ts","sourceRoot":"","sources":["../../src/types/viz-elm-callout.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"viz-elm-callout.d.ts","sourceRoot":"","sources":["../../src/types/viz-elm-callout.ts"],"names":[],"mappings":"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"}

package/dist/umd/components/VizElement/ElementCallout.d.ts

@@ -1,9 +1,9 @@
-import type { ElementInfo, IHorizontalAlignment } from '../../types';
+import type { ElementInfo, IHeatmapRef, IHorizontalAlignment } from '../../types';
 export type ICalloutPositionMode = 'absolute' | 'fixed';
 export interface ElementCalloutProps {
     element: ElementInfo;
     target: string;
-    visualRef: React.RefObject<HTMLDivElement>;
+    visualRef: IHeatmapRef['Visual'];
     alignment?: IHorizontalAlignment;
     offset?: {
         x: number;

package/dist/umd/components/VizElement/ElementCallout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAiBvF,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkDxD,CAAC"}
+{"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,WAAW,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAiBpG,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkDxD,CAAC"}

package/dist/umd/components/VizElement/ElementCalloutClicked.d.ts

@@ -1,8 +1,8 @@
-import type { ElementRect } from '../../types';
+import type { ElementRect, IHeatmapRef } from '../../types';
 import type { ICalloutPositionMode } from './ElementCallout';
 interface ElementCalloutClickedProps {
     isSecondary?: boolean;
-    visualRef: React.RefObject<HTMLDivElement>;
+    visualRef: IHeatmapRef['Visual'];
     positionMode?: ICalloutPositionMode;
     containerRef?: React.RefObject<HTMLDivElement>;
     getRect: (el?: any) => ElementRect | null;