@gemx-dev/heatmap-react 3.5.92-dev.10 → 3.5.92-dev.11

package/dist/esm/components/Layout/HeatmapLayout.d.ts

@@ -1,6 +1,7 @@
 import type { ClickMapPoint, EncodedPayload, IHeatmapInfo, IPersistedAreaData, ScrollMapPoint } from '../../types';
 import type { IHeatmapControl } from '../../types/control';
 interface HeatmapLayoutProps {
+    shopId?: string;
     data?: EncodedPayload[];
     clickmap?: ClickMapPoint[];
     clickAreas?: IPersistedAreaData[];

package/dist/esm/components/Layout/HeatmapLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeatmapLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/HeatmapLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAS3D,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAClC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,cAAc,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,QAAQ,EAAE,eAAe,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0DtD,CAAC"}
+{"version":3,"file":"HeatmapLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/HeatmapLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAS3D,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAClC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,cAAc,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,QAAQ,EAAE,eAAe,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2DtD,CAAC"}

package/dist/esm/hooks/common/useHeatmapWidthByDevice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapWidthByDevice.d.ts","sourceRoot":"","sources":["../../../src/hooks/common/useHeatmapWidthByDevice.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB,cAkBnC,CAAC"}
+{"version":3,"file":"useHeatmapWidthByDevice.d.ts","sourceRoot":"","sources":["../../../src/hooks/common/useHeatmapWidthByDevice.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB,cAoBnC,CAAC"}

package/dist/esm/hooks/register/useRegisterConfig.d.ts

@@ -1,4 +1,5 @@
-export declare const useRegisterConfig: ({ isLoading, isLoadingCanvas, }: {
+export declare const useRegisterConfig: ({ shopId, isLoading, isLoadingCanvas, }: {
+    shopId?: string;
     isLoading?: boolean;
     isLoadingCanvas?: boolean;
 }) => void;

package/dist/esm/hooks/register/useRegisterConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRegisterConfig.d.ts","sourceRoot":"","sources":["../../../src/hooks/register/useRegisterConfig.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,GAAI,iCAG/B;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,SAuBA,CAAC"}
+{"version":3,"file":"useRegisterConfig.d.ts","sourceRoot":"","sources":["../../../src/hooks/register/useRegisterConfig.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,GAAI,yCAI/B;IACD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,SA+BA,CAAC"}

package/dist/esm/hooks/view-context/useHeatmapDataContext.d.ts

@@ -1,6 +1,7 @@
 import type { ClickMapPoint, EncodedPayload, IHeatmapInfo, IPersistedAreaData, ScrollMapPoint } from '../../types';
 interface IHeatmapDataState {
     data: EncodedPayload[] | undefined;
+    dataHash: string | undefined;
     dataSnapshot: EncodedPayload[] | undefined;
     clickmap: ClickMapPoint[] | undefined;
     clickAreas: IPersistedAreaData[] | undefined;
@@ -12,6 +13,7 @@ interface IHeatmapDataState {
 interface IHeatmapDataActions {
     setData: (newData: EncodedPayload[]) => void;
     setDataSnapshot: (newData: EncodedPayload[]) => void;
+    setDataHash: (newHash: string | undefined) => void;
     setClickmap: (newClickmap: ClickMapPoint[]) => void;
     setClickAreas: (newClickAreas: IPersistedAreaData[]) => void;
     setScrollmap: (newScrollmap: ScrollMapPoint[]) => void;

package/dist/esm/hooks/view-context/useHeatmapDataContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapDataContext.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/useHeatmapDataContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKnH,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IACnC,YAAY,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAC3C,QAAQ,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC;IACtC,UAAU,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IACxC,YAAY,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAC3C,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,mBAAmB;IAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,CAAC,aAAa,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACvD,eAAe,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACzF,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,qBAAqB;;;;;;;CA0BhC,CAAC"}
+{"version":3,"file":"useHeatmapDataContext.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/useHeatmapDataContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKnH,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,YAAY,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAC3C,QAAQ,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC;IACtC,UAAU,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IACxC,YAAY,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAC3C,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,mBAAmB;IAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,CAAC,aAAa,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACvD,eAAe,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACzF,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,qBAAqB;;;;;;;CA4BhC,CAAC"}

package/dist/esm/hooks/viz-render/useHeatmapRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAgCA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAaD,eAAO,MAAM,gBAAgB,QAAO,uBA+EnC,CAAC"}
+{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAiCA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAcD,eAAO,MAAM,gBAAgB,QAAO,uBAiFnC,CAAC"}

package/dist/esm/index.js

@@ -152,6 +152,7 @@ function useDebounceCallback(callback, delay) {
 
 var EDeviceType;
 (function (EDeviceType) {
+    EDeviceType["DesktopLarge"] = "DESKTOP_LARGE";
     EDeviceType["Desktop"] = "DESKTOP";
     EDeviceType["Mobile"] = "MOBILE";
     EDeviceType["Tablet"] = "TABLET";
@@ -319,15 +320,18 @@ const useHeatmapConfigStore = create()((set) => {
     return {
         mode: EHeatmapMode.Single,
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
+        shopId: undefined,
         setMode: (mode) => set({ mode }),
         resetMode: () => set({ mode: EHeatmapMode.Single }),
         setSidebarWidth: (sidebarWidth) => set({ sidebarWidth }),
+        setShopId: (shopId) => set({ shopId }),
     };
 });
 
 const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
     return {
         data: new Map([[DEFAULT_VIEW_ID, undefined]]),
+        dataHash: new Map([[DEFAULT_VIEW_ID, undefined]]),
         dataSnapshot: new Map([[DEFAULT_VIEW_ID, undefined]]),
         clickmap: new Map([[DEFAULT_VIEW_ID, undefined]]),
         clickAreas: new Map([[DEFAULT_VIEW_ID, undefined]]),
@@ -361,6 +365,11 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             newData.set(viewId, data);
             return { data: newData };
         }),
+        setDataHash: (dataHash, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newDataHash = new Map(prev.dataHash);
+            newDataHash.set(viewId, dataHash);
+            return { dataHash: newDataHash };
+        }),
         setDataSnapshot: (data, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newDataSnapshot = new Map(prev.dataSnapshot);
             newDataSnapshot.set(viewId, data);
@@ -394,8 +403,10 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             const newDataInfo = new Map(prev.dataInfo);
             const newScrollmap = new Map(prev.scrollmap);
             const newAttentionMap = new Map(prev.attentionMap);
+            const newDataHash = new Map(prev.dataHash);
             newData.set(toViewId, prev.data.get(fromViewId));
             newDataSnapshot.set(toViewId, prev.dataSnapshot.get(fromViewId));
+            newDataHash.set(toViewId, prev.dataHash.get(fromViewId));
             newClickmap.set(toViewId, prev.clickmap.get(fromViewId));
             newClickAreas.set(toViewId, prev.clickAreas.get(fromViewId));
             newDataInfo.set(toViewId, prev.dataInfo.get(fromViewId));
@@ -409,6 +420,7 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
                 dataInfo: newDataInfo,
                 scrollmap: newScrollmap,
                 attentionMap: newAttentionMap,
+                dataHash: newDataHash,
             };
         }),
         clearView: (viewId) => set((prev) => {
@@ -419,8 +431,10 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             const newDataInfo = new Map(prev.dataInfo);
             const newScrollmap = new Map(prev.scrollmap);
             const newAttentionMap = new Map(prev.attentionMap);
+            const newDataHash = new Map(prev.dataHash);
             newData.delete(viewId);
             newDataSnapshot.delete(viewId);
+            newDataHash.delete(viewId);
             newClickmap.delete(viewId);
             newClickAreas.delete(viewId);
             newDataInfo.delete(viewId);
@@ -429,6 +443,7 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             return {
                 data: newData,
                 dataSnapshot: newDataSnapshot,
+                dataHash: newDataHash,
                 clickmap: newClickmap,
                 clickAreas: newClickAreas,
                 dataInfo: newDataInfo,
@@ -439,6 +454,7 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
         resetAll: () => set({
             data: new Map([[DEFAULT_VIEW_ID, undefined]]),
             dataSnapshot: new Map([[DEFAULT_VIEW_ID, undefined]]),
+            dataHash: new Map([[DEFAULT_VIEW_ID, undefined]]),
             clickmap: new Map([[DEFAULT_VIEW_ID, undefined]]),
             clickAreas: new Map([[DEFAULT_VIEW_ID, undefined]]),
             dataInfo: new Map([[DEFAULT_VIEW_ID, undefined]]),
@@ -1286,6 +1302,7 @@ const useHeatmapDataContext = createViewContextHook({
     useStore: useHeatmapDataStore,
     getState: (store, viewId) => ({
         data: store.data.get(viewId),
+        dataHash: store.dataHash.get(viewId),
         dataSnapshot: store.dataSnapshot.get(viewId),
         clickmap: store.clickmap.get(viewId),
         clickAreas: store.clickAreas.get(viewId),
@@ -1297,6 +1314,7 @@ const useHeatmapDataContext = createViewContextHook({
     getActions: (store, viewId) => ({
         setData: (newData) => store.setData(newData, viewId),
         setDataSnapshot: (newData) => store.setDataSnapshot(newData, viewId),
+        setDataHash: (newHash) => store.setDataHash(newHash, viewId),
         setClickmap: (newClickmap) => store.setClickmap(newClickmap, viewId),
         setClickAreas: (newClickAreas) => store.setClickAreas(newClickAreas, viewId),
         setDataInfoByKey: (key, value) => store.setDataInfoByKey(key, value, viewId),
@@ -1513,6 +1531,8 @@ const useHeatmapWidthByDevice = () => {
         if (!deviceType)
             return 1440;
         switch (deviceType) {
+            case EDeviceType.DesktopLarge:
+                return 1920;
             case EDeviceType.Desktop:
                 return 1440;
             case EDeviceType.Tablet:
@@ -1523,13 +1543,20 @@ const useHeatmapWidthByDevice = () => {
     }
 };
 
-const useRegisterConfig = ({ isLoading, isLoadingCanvas, }) => {
+const useRegisterConfig = ({ shopId, isLoading, isLoadingCanvas, }) => {
     const mode = useHeatmapConfigStore((state) => state.mode);
+    const shopIdStore = useHeatmapConfigStore((state) => state.shopId);
     const deviceType = useHeatmapSettingContext((state) => state.deviceType);
     const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
     const setIsRendering = useHeatmapSettingContext((state) => state.setIsRendering);
     const setIsLoadingDom = useHeatmapSettingContext((state) => state.setIsLoadingDom);
     const setIsLoadingCanvas = useHeatmapSettingContext((state) => state.setIsLoadingCanvas);
+    const setShopId = useHeatmapConfigStore((state) => state.setShopId);
+    useEffect(() => {
+        if (!shopId || !!shopIdStore || shopIdStore === shopId)
+            return;
+        setShopId(shopId);
+    }, [shopId, setShopId, shopIdStore]);
     useEffect(() => {
         setIsRendering(true);
         setTimeout(() => {
@@ -4031,18 +4058,27 @@ function useVizLiveIframeMsg(options = {}) {
 }
 
 /**
- * Performance tracker — measures render pipeline timings and stores results
- * in `window.__gemxPerf` for inspection in DevTools.
+ * Unified performance timing utility.
+ *
+ * Two complementary tools:
  *
- * Usage:
- *   perf.startSession('render-1');
- *   const t = perf.mark('viewport.run');
- *   perf.measure('viewport.run', t);
- *   perf.endSession();
+ * 1. `perf` — global DevTools session recorder.
+ *    Stores structured timing in `window.__gemxPerf` for inspection.
+ *    Used by the iframe-processor rendering pipeline.
  *
- *   // In DevTools:
- *   window.__gemxPerf.latest
- *   window.__gemxPerf.sessions
+ *    perf.startSession('render-1');
+ *    const t = perf.mark('viewport.run');
+ *    perf.measure('viewport.run', t);
+ *    perf.endSession();
+ *
+ * 2. `createPerfTimer` — per-module console logger factory.
+ *    Logs prefixed timings to the console AND records entries into the
+ *    active global session so they appear in `window.__gemxPerf` too.
+ *
+ *    const timer = createPerfTimer('Render');
+ *    const t0 = timer.mark('start');
+ *    await timer.wrap('visualizer.html', () => visualizer.html(...));
+ *    timer.measure('total', t0);
  */
 const s = {
     enabled: true,
@@ -4050,7 +4086,7 @@ const s = {
     sessions: [],
     maxSessions: 20,
 };
-// ── Functions ─────────────────────────────────────────────────────────────────
+// ── Global singleton functions ────────────────────────────────────────────────
 function startSession(id) {
     if (!s.enabled)
         return;
@@ -4067,7 +4103,7 @@ function endSession() {
     return session;
 }
 /** Record a point-in-time mark. Returns `performance.now()` for use with measure(). */
-function mark$1(label) {
+function globalMark(label) {
     const now = performance.now();
     if (s.enabled && s.current) {
         s.current.entries.push({ label, t: now - s.current.startedAt });
@@ -4075,7 +4111,7 @@ function mark$1(label) {
     return now;
 }
 /** Record a duration from a previous mark() timestamp. */
-function measure$1(label, t0) {
+function globalMeasure(label, t0) {
     const duration = performance.now() - t0;
     if (s.enabled && s.current) {
         s.current.entries.push({ label, t: t0 - s.current.startedAt, duration });
@@ -4088,26 +4124,34 @@ function getReport() {
         latest: s.sessions[0] ?? null,
     };
 }
-function clear$1() {
+function clearSessions() {
     s.current = null;
     s.sessions = [];
     if (typeof window !== 'undefined')
         delete window.__gemxPerf;
 }
-function enable$1() {
+function enableGlobal() {
     s.enabled = true;
 }
-function disable$1() {
+function disableGlobal() {
     s.enabled = false;
 }
-// ── Internal ──────────────────────────────────────────────────────────────────
 function flush() {
     if (typeof window === 'undefined')
         return;
     window.__gemxPerf = getReport();
 }
-// ── Singleton export ──────────────────────────────────────────────────────────
-const perf = { startSession, endSession, mark: mark$1, measure: measure$1, getReport, clear: clear$1, enable: enable$1, disable: disable$1 };
+// ── Global singleton export ───────────────────────────────────────────────────
+const perf = {
+    startSession,
+    endSession,
+    mark: globalMark,
+    measure: globalMeasure,
+    getReport,
+    clear: clearSessions,
+    enable: enableGlobal,
+    disable: disableGlobal,
+};
 
 /**
  * DOM observation setup — ResizeObserver + MutationObserver.
@@ -4845,6 +4889,25 @@ function getActiveFixes(ctx) {
 const logger$1 = createLogger({ enabled: false, prefix: 'ViewportUnitReplacer' });
 // ─── Constants ────────────────────────────────────────────────────────────────
 const HEIGHT_RELATED_PROPERTIES = ['height', 'min-height', 'max-height', 'top', 'bottom'];
+/**
+ * Number of top-level CSS rules to process before yielding to the browser.
+ * Keeps the main thread responsive during large stylesheets (prevents tab kill on mobile).
+ */
+const YIELD_EVERY_RULES = 100;
+// ─── Scheduler ────────────────────────────────────────────────────────────────
+/**
+ * Yield control back to the browser so it can handle input, paint frames, and
+ * avoid "page unresponsive" / tab-kill on mobile during heavy CSS processing.
+ *
+ * Uses `scheduler.yield()` (Chrome 115+) when available; falls back to a
+ * zero-timeout macrotask which is universally supported.
+ */
+function yieldToMain() {
+    if (typeof globalThis !== 'undefined' && 'scheduler' in globalThis) {
+        return globalThis.scheduler.yield();
+    }
+    return new Promise((resolve) => setTimeout(resolve, 0));
+}
 // ─── Per-run tracking state (reset on each process() call) ───────────────────
 let elementsWithViewportUnits = new Set();
 let originalValues = new WeakMap();
@@ -4984,8 +5047,9 @@ function processRule(rule, ctx) {
     return count;
 }
 /** Processes only inline <style> sheets. Linked sheets are handled by processLinkedStylesheets. */
-function processStylesheets(ctx) {
+async function processStylesheets(ctx) {
     let total = 0;
+    let rulesSinceYield = 0;
     const sheets = ctx.doc.styleSheets;
     for (let i = 0; i < sheets.length; i++) {
         const sheet = sheets[i];
@@ -4995,6 +5059,11 @@ function processStylesheets(ctx) {
             const rules = sheet.cssRules;
             for (let j = 0; j < rules.length; j++) {
                 total += processRule(rules[j], ctx);
+                rulesSinceYield++;
+                if (rulesSinceYield >= YIELD_EVERY_RULES) {
+                    rulesSinceYield = 0;
+                    await yieldToMain();
+                }
             }
         }
         catch (e) {
@@ -5042,7 +5111,7 @@ async function process$1(ctx) {
     originalValues = new WeakMap();
     processInlineStyles(ctx);
     processStyleTags(ctx);
-    processStylesheets(ctx);
+    await processStylesheets(ctx);
     await processLinkedStylesheets(ctx);
     // Wait for browser to apply the replaced styles
     await new Promise((resolve) => requestAnimationFrame(resolve));
@@ -6054,6 +6123,7 @@ function measure(label, startMs) {
 const useHeatmapRender = () => {
     const viewId = useViewIdContext();
     const data = useHeatmapDataContext((s) => s.data);
+    const shopId = useHeatmapConfigStore((s) => s.shopId);
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
@@ -6090,6 +6160,7 @@ const useHeatmapRender = () => {
         startIframe({
             helperRef,
             iframe,
+            shopId,
             deviceType,
             size: { width: contentWidth, height: wrapperHeight },
             t0,
@@ -6124,7 +6195,7 @@ const useHeatmapRender = () => {
     };
 };
 // ── Helpers ───────────────────────────────────────────────────────────────────
-function startIframe({ helperRef, iframe, deviceType = EDeviceType.Desktop, size, t0, onSuccess }) {
+function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Desktop, size, t0, onSuccess, }) {
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
     if (docHeight === 0)
@@ -6139,6 +6210,7 @@ function startIframe({ helperRef, iframe, deviceType = EDeviceType.Desktop, size
         targetHeight: docHeight,
         iframe,
         debug: true,
+        shopId,
         onSuccess: (data) => {
             measure('IframeHelper processing', tHelper);
             measure('Total render', t0);
@@ -8410,11 +8482,11 @@ const ContentTopBar = () => {
         }, children: CompTopBar && jsx(CompTopBar, {}) }));
 };
 
-const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, attentionMap, controls, dataInfo, isLoading, isLoadingCanvas, }) => {
+const HeatmapLayout = ({ shopId, data, clickmap, clickAreas, scrollmap, attentionMap, controls, dataInfo, isLoading, isLoadingCanvas, }) => {
     useRegisterControl(controls);
     useRegisterData(data, dataInfo);
     useRegisterHeatmap({ clickmap, scrollmap, clickAreas, attentionMap });
-    useRegisterConfig({ isLoading, isLoadingCanvas });
+    useRegisterConfig({ isLoading, isLoadingCanvas, shopId });
     // performanceLogger.configure({
     //   enabled: true,
     //   logToConsole: false,