@gemx-dev/heatmap-react 0.0.5 → 3.5.6

package/dist/esm/index.mjs

@@ -1,1072 +0,0 @@
-"use client"
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
-import require$$0, { useEffect, useMemo, useRef, useCallback, useState } from 'react';
-import { Visualizer } from '@gemx-dev/clarity-visualize';
-
-const initialNodes = { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } };
-const GraphView = ({ children, width, height }) => {
-    const [nodes, setNodes, onNodesChange] = useNodesState([
-        {
-            ...initialNodes,
-            width: width,
-            height: height,
-        },
-    ]);
-    const CustomNode = () => {
-        return jsx(Fragment, { children: children });
-    };
-    const nodeTypes = {
-        default: CustomNode,
-    };
-    useEffect(() => {
-        if (!width)
-            return;
-        setNodes((prev) => {
-            const node = prev.find((node) => node.id === '1');
-            const newNode = {
-                ...node,
-                measured: { height: height, width: width },
-                height: height,
-                width: width,
-            };
-            return [newNode];
-        });
-    }, [width, height, setNodes]);
-    return (jsxs(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, onNodesChange: onNodesChange, debug: true, minZoom: 0.5, maxZoom: 2, fitView: true, children: [jsx(Controls, {}), jsx(Background, {})] }));
-};
-
-const BoxStack = ({ children, ...props }) => {
-    const id = props.id;
-    const flexDirection = props.flexDirection;
-    const overflow = props.overflow || 'hidden';
-    const position = props.position || 'relative';
-    const flex = props.flex || 'none';
-    const justifyContent = props.justifyContent;
-    const alignItems = props.alignItems;
-    const style = props.style || {};
-    const gap = props.gap || 0;
-    const height = props.height || 'auto';
-    const styleGap = useMemo(() => {
-        switch (flexDirection) {
-            case 'row':
-                return {
-                    columnGap: gap,
-                };
-            case 'column':
-                return {
-                    rowGap: gap,
-                };
-        }
-    }, [gap, flexDirection]);
-    const styleProps = {
-        display: 'flex',
-        flexDirection,
-        overflow,
-        position,
-        flex,
-        justifyContent,
-        alignItems,
-        height,
-        ...styleGap,
-        ...style,
-    };
-    return (jsx("div", { id: id, style: styleProps, children: children }));
-};
-
-const ContentHeader = ({ children }) => {
-    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", children: children }));
-};
-
-const createStoreImpl = (createState) => {
-  let state;
-  const listeners = /* @__PURE__ */ new Set();
-  const setState = (partial, replace) => {
-    const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (!Object.is(nextState, state)) {
-      const previousState = state;
-      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
-      listeners.forEach((listener) => listener(state, previousState));
-    }
-  };
-  const getState = () => state;
-  const getInitialState = () => initialState;
-  const subscribe = (listener) => {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  };
-  const destroy = () => {
-    if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production") {
-      console.warn(
-        "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
-      );
-    }
-    listeners.clear();
-  };
-  const api = { setState, getState, getInitialState, subscribe, destroy };
-  const initialState = state = createState(setState, getState, api);
-  return api;
-};
-const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var withSelector = {exports: {}};
-
-var withSelector_production = {};
-
-var shim = {exports: {}};
-
-var useSyncExternalStoreShim_production = {};
-
-/**
- * @license React
- * use-sync-external-store-shim.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredUseSyncExternalStoreShim_production;
-
-function requireUseSyncExternalStoreShim_production () {
-	if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
-	hasRequiredUseSyncExternalStoreShim_production = 1;
-	var React = require$$0;
-	function is(x, y) {
-	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-	}
-	var objectIs = "function" === typeof Object.is ? Object.is : is,
-	  useState = React.useState,
-	  useEffect = React.useEffect,
-	  useLayoutEffect = React.useLayoutEffect,
-	  useDebugValue = React.useDebugValue;
-	function useSyncExternalStore$2(subscribe, getSnapshot) {
-	  var value = getSnapshot(),
-	    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
-	    inst = _useState[0].inst,
-	    forceUpdate = _useState[1];
-	  useLayoutEffect(
-	    function () {
-	      inst.value = value;
-	      inst.getSnapshot = getSnapshot;
-	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	    },
-	    [subscribe, value, getSnapshot]
-	  );
-	  useEffect(
-	    function () {
-	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	      return subscribe(function () {
-	        checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	      });
-	    },
-	    [subscribe]
-	  );
-	  useDebugValue(value);
-	  return value;
-	}
-	function checkIfSnapshotChanged(inst) {
-	  var latestGetSnapshot = inst.getSnapshot;
-	  inst = inst.value;
-	  try {
-	    var nextValue = latestGetSnapshot();
-	    return !objectIs(inst, nextValue);
-	  } catch (error) {
-	    return !0;
-	  }
-	}
-	function useSyncExternalStore$1(subscribe, getSnapshot) {
-	  return getSnapshot();
-	}
-	var shim =
-	  "undefined" === typeof window ||
-	  "undefined" === typeof window.document ||
-	  "undefined" === typeof window.document.createElement
-	    ? useSyncExternalStore$1
-	    : useSyncExternalStore$2;
-	useSyncExternalStoreShim_production.useSyncExternalStore =
-	  void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
-	return useSyncExternalStoreShim_production;
-}
-
-var useSyncExternalStoreShim_development = {};
-
-/**
- * @license React
- * use-sync-external-store-shim.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredUseSyncExternalStoreShim_development;
-
-function requireUseSyncExternalStoreShim_development () {
-	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
-	hasRequiredUseSyncExternalStoreShim_development = 1;
-	"production" !== process.env.NODE_ENV &&
-	  (function () {
-	    function is(x, y) {
-	      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-	    }
-	    function useSyncExternalStore$2(subscribe, getSnapshot) {
-	      didWarnOld18Alpha ||
-	        void 0 === React.startTransition ||
-	        ((didWarnOld18Alpha = !0),
-	        console.error(
-	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
-	        ));
-	      var value = getSnapshot();
-	      if (!didWarnUncachedGetSnapshot) {
-	        var cachedValue = getSnapshot();
-	        objectIs(value, cachedValue) ||
-	          (console.error(
-	            "The result of getSnapshot should be cached to avoid an infinite loop"
-	          ),
-	          (didWarnUncachedGetSnapshot = !0));
-	      }
-	      cachedValue = useState({
-	        inst: { value: value, getSnapshot: getSnapshot }
-	      });
-	      var inst = cachedValue[0].inst,
-	        forceUpdate = cachedValue[1];
-	      useLayoutEffect(
-	        function () {
-	          inst.value = value;
-	          inst.getSnapshot = getSnapshot;
-	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	        },
-	        [subscribe, value, getSnapshot]
-	      );
-	      useEffect(
-	        function () {
-	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	          return subscribe(function () {
-	            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	          });
-	        },
-	        [subscribe]
-	      );
-	      useDebugValue(value);
-	      return value;
-	    }
-	    function checkIfSnapshotChanged(inst) {
-	      var latestGetSnapshot = inst.getSnapshot;
-	      inst = inst.value;
-	      try {
-	        var nextValue = latestGetSnapshot();
-	        return !objectIs(inst, nextValue);
-	      } catch (error) {
-	        return !0;
-	      }
-	    }
-	    function useSyncExternalStore$1(subscribe, getSnapshot) {
-	      return getSnapshot();
-	    }
-	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-	      "function" ===
-	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
-	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-	    var React = require$$0,
-	      objectIs = "function" === typeof Object.is ? Object.is : is,
-	      useState = React.useState,
-	      useEffect = React.useEffect,
-	      useLayoutEffect = React.useLayoutEffect,
-	      useDebugValue = React.useDebugValue,
-	      didWarnOld18Alpha = !1,
-	      didWarnUncachedGetSnapshot = !1,
-	      shim =
-	        "undefined" === typeof window ||
-	        "undefined" === typeof window.document ||
-	        "undefined" === typeof window.document.createElement
-	          ? useSyncExternalStore$1
-	          : useSyncExternalStore$2;
-	    useSyncExternalStoreShim_development.useSyncExternalStore =
-	      void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
-	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-	      "function" ===
-	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
-	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-	  })();
-	return useSyncExternalStoreShim_development;
-}
-
-var hasRequiredShim;
-
-function requireShim () {
-	if (hasRequiredShim) return shim.exports;
-	hasRequiredShim = 1;
-
-	if (process.env.NODE_ENV === 'production') {
-	  shim.exports = requireUseSyncExternalStoreShim_production();
-	} else {
-	  shim.exports = requireUseSyncExternalStoreShim_development();
-	}
-	return shim.exports;
-}
-
-/**
- * @license React
- * use-sync-external-store-shim/with-selector.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredWithSelector_production;
-
-function requireWithSelector_production () {
-	if (hasRequiredWithSelector_production) return withSelector_production;
-	hasRequiredWithSelector_production = 1;
-	var React = require$$0,
-	  shim = requireShim();
-	function is(x, y) {
-	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-	}
-	var objectIs = "function" === typeof Object.is ? Object.is : is,
-	  useSyncExternalStore = shim.useSyncExternalStore,
-	  useRef = React.useRef,
-	  useEffect = React.useEffect,
-	  useMemo = React.useMemo,
-	  useDebugValue = React.useDebugValue;
-	withSelector_production.useSyncExternalStoreWithSelector = function (
-	  subscribe,
-	  getSnapshot,
-	  getServerSnapshot,
-	  selector,
-	  isEqual
-	) {
-	  var instRef = useRef(null);
-	  if (null === instRef.current) {
-	    var inst = { hasValue: !1, value: null };
-	    instRef.current = inst;
-	  } else inst = instRef.current;
-	  instRef = useMemo(
-	    function () {
-	      function memoizedSelector(nextSnapshot) {
-	        if (!hasMemo) {
-	          hasMemo = !0;
-	          memoizedSnapshot = nextSnapshot;
-	          nextSnapshot = selector(nextSnapshot);
-	          if (void 0 !== isEqual && inst.hasValue) {
-	            var currentSelection = inst.value;
-	            if (isEqual(currentSelection, nextSnapshot))
-	              return (memoizedSelection = currentSelection);
-	          }
-	          return (memoizedSelection = nextSnapshot);
-	        }
-	        currentSelection = memoizedSelection;
-	        if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
-	        var nextSelection = selector(nextSnapshot);
-	        if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
-	          return (memoizedSnapshot = nextSnapshot), currentSelection;
-	        memoizedSnapshot = nextSnapshot;
-	        return (memoizedSelection = nextSelection);
-	      }
-	      var hasMemo = !1,
-	        memoizedSnapshot,
-	        memoizedSelection,
-	        maybeGetServerSnapshot =
-	          void 0 === getServerSnapshot ? null : getServerSnapshot;
-	      return [
-	        function () {
-	          return memoizedSelector(getSnapshot());
-	        },
-	        null === maybeGetServerSnapshot
-	          ? void 0
-	          : function () {
-	              return memoizedSelector(maybeGetServerSnapshot());
-	            }
-	      ];
-	    },
-	    [getSnapshot, getServerSnapshot, selector, isEqual]
-	  );
-	  var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
-	  useEffect(
-	    function () {
-	      inst.hasValue = !0;
-	      inst.value = value;
-	    },
-	    [value]
-	  );
-	  useDebugValue(value);
-	  return value;
-	};
-	return withSelector_production;
-}
-
-var withSelector_development = {};
-
-/**
- * @license React
- * use-sync-external-store-shim/with-selector.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredWithSelector_development;
-
-function requireWithSelector_development () {
-	if (hasRequiredWithSelector_development) return withSelector_development;
-	hasRequiredWithSelector_development = 1;
-	"production" !== process.env.NODE_ENV &&
-	  (function () {
-	    function is(x, y) {
-	      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-	    }
-	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-	      "function" ===
-	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
-	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-	    var React = require$$0,
-	      shim = requireShim(),
-	      objectIs = "function" === typeof Object.is ? Object.is : is,
-	      useSyncExternalStore = shim.useSyncExternalStore,
-	      useRef = React.useRef,
-	      useEffect = React.useEffect,
-	      useMemo = React.useMemo,
-	      useDebugValue = React.useDebugValue;
-	    withSelector_development.useSyncExternalStoreWithSelector = function (
-	      subscribe,
-	      getSnapshot,
-	      getServerSnapshot,
-	      selector,
-	      isEqual
-	    ) {
-	      var instRef = useRef(null);
-	      if (null === instRef.current) {
-	        var inst = { hasValue: !1, value: null };
-	        instRef.current = inst;
-	      } else inst = instRef.current;
-	      instRef = useMemo(
-	        function () {
-	          function memoizedSelector(nextSnapshot) {
-	            if (!hasMemo) {
-	              hasMemo = !0;
-	              memoizedSnapshot = nextSnapshot;
-	              nextSnapshot = selector(nextSnapshot);
-	              if (void 0 !== isEqual && inst.hasValue) {
-	                var currentSelection = inst.value;
-	                if (isEqual(currentSelection, nextSnapshot))
-	                  return (memoizedSelection = currentSelection);
-	              }
-	              return (memoizedSelection = nextSnapshot);
-	            }
-	            currentSelection = memoizedSelection;
-	            if (objectIs(memoizedSnapshot, nextSnapshot))
-	              return currentSelection;
-	            var nextSelection = selector(nextSnapshot);
-	            if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
-	              return (memoizedSnapshot = nextSnapshot), currentSelection;
-	            memoizedSnapshot = nextSnapshot;
-	            return (memoizedSelection = nextSelection);
-	          }
-	          var hasMemo = !1,
-	            memoizedSnapshot,
-	            memoizedSelection,
-	            maybeGetServerSnapshot =
-	              void 0 === getServerSnapshot ? null : getServerSnapshot;
-	          return [
-	            function () {
-	              return memoizedSelector(getSnapshot());
-	            },
-	            null === maybeGetServerSnapshot
-	              ? void 0
-	              : function () {
-	                  return memoizedSelector(maybeGetServerSnapshot());
-	                }
-	          ];
-	        },
-	        [getSnapshot, getServerSnapshot, selector, isEqual]
-	      );
-	      var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
-	      useEffect(
-	        function () {
-	          inst.hasValue = !0;
-	          inst.value = value;
-	        },
-	        [value]
-	      );
-	      useDebugValue(value);
-	      return value;
-	    };
-	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-	      "function" ===
-	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
-	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-	  })();
-	return withSelector_development;
-}
-
-if (process.env.NODE_ENV === 'production') {
-  withSelector.exports = requireWithSelector_production();
-} else {
-  withSelector.exports = requireWithSelector_development();
-}
-
-var withSelectorExports = withSelector.exports;
-var useSyncExternalStoreExports = /*@__PURE__*/getDefaultExportFromCjs(withSelectorExports);
-
-const { useDebugValue } = require$$0;
-const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
-let didWarnAboutEqualityFn = false;
-const identity = (arg) => arg;
-function useStore(api, selector = identity, equalityFn) {
-  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && equalityFn && !didWarnAboutEqualityFn) {
-    console.warn(
-      "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
-    );
-    didWarnAboutEqualityFn = true;
-  }
-  const slice = useSyncExternalStoreWithSelector(
-    api.subscribe,
-    api.getState,
-    api.getServerState || api.getInitialState,
-    selector,
-    equalityFn
-  );
-  useDebugValue(slice);
-  return slice;
-}
-const createImpl = (createState) => {
-  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && typeof createState !== "function") {
-    console.warn(
-      "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
-    );
-  }
-  const api = typeof createState === "function" ? createStore(createState) : createState;
-  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
-  Object.assign(useBoundStore, api);
-  return useBoundStore;
-};
-const create = (createState) => createState ? createImpl(createState) : createImpl;
-
-const useHeatmapDataStore = create()((set, get) => ({
-    data: undefined,
-    config: undefined,
-    state: {
-        hideSidebar: false,
-    },
-    setData: (data) => set({ data }),
-    setExtraData: (extraData) => set({ extraData: { ...get().extraData, ...extraData } }),
-    setState: (state) => set({ state: { ...get().state, ...state } }),
-    setConfig: (config) => set({ config }),
-}));
-
-const SIDEBAR_WIDTH = 280;
-const LeftSidebar = ({ children }) => {
-    const isHideSidebar = useHeatmapDataStore((state) => state.state.hideSidebar);
-    if (isHideSidebar) {
-        return null;
-    }
-    return (jsx("div", { className: "gx-hm-sidebar", style: {
-            height: '100%',
-            display: 'flex',
-            ...(isHideSidebar
-                ? {
-                    width: '0',
-                    transform: 'translateX(-100%)',
-                    visibility: 'hidden',
-                }
-                : { width: `${SIDEBAR_WIDTH}px` }),
-        }, children: jsx("div", { className: "gx-hm-sidebar-wrapper", style: { height: '100%', width: `${SIDEBAR_WIDTH}px` }, children: children }) }));
-};
-
-const HEATMAP_CONFIG = {
-    paddingBlock: 0,
-};
-const HEATMAP_STYLE = {
-    wrapper: {
-        padding: `${HEATMAP_CONFIG.paddingBlock}px 0`,
-    },
-};
-
-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);
-}
-
-const useHeatmapRender = () => {
-    const data = useHeatmapDataStore((state) => state.data);
-    const setExtraData = useHeatmapDataStore((state) => state.setExtraData);
-    const visualizerRef = useRef(null);
-    const iframeRef = useRef(null);
-    // Initialize visualizer for heatmap
-    const initializeVisualizer = useCallback((envelope, userAgent) => {
-        const iframe = iframeRef.current;
-        if (!iframe?.contentWindow)
-            return null;
-        const visualizer = new Visualizer();
-        const mobile = isMobileDevice(userAgent);
-        visualizer.setup(iframe.contentWindow, {
-            version: envelope.version,
-            onresize: (width, height) => {
-                setExtraData({ width, height });
-            },
-            mobile,
-            vNext: true,
-            locale: 'en-us',
-        });
-        return visualizer;
-    }, [setExtraData]);
-    // Process and render heatmap HTML
-    const renderHeatmap = useCallback(async (payloads) => {
-        if (!payloads || payloads.length === 0)
-            return;
-        let visualizer = visualizerRef.current;
-        for (const decoded of payloads) {
-            // Initialize on first sequence
-            if (decoded.envelope.sequence === 1) {
-                const userAgent = decoded.dimension?.[0]?.data[0]?.[0] || '';
-                visualizer = initializeVisualizer(decoded.envelope, userAgent);
-                if (!visualizer)
-                    return;
-                visualizerRef.current = visualizer;
-            }
-            if (!visualizer)
-                continue;
-            // Merge and process DOM
-            const merged = visualizer.merge([decoded]);
-            visualizer.dom(merged.dom);
-        }
-        // Render static HTML
-        if (visualizer && iframeRef.current?.contentWindow) {
-            await visualizer.html(payloads, iframeRef.current.contentWindow);
-        }
-    }, [initializeVisualizer]);
-    // Main effect: Render heatmap when data changes
-    useEffect(() => {
-        if (!data || data.length === 0)
-            return;
-        renderHeatmap(data);
-        // Cleanup
-        return () => {
-            visualizerRef.current = null;
-        };
-    }, [data, renderHeatmap]);
-    return {
-        iframeRef,
-    };
-};
-
-function sortEvents(a, b) {
-    return a.time - b.time;
-}
-
-const useReplayRender = () => {
-    const data = useHeatmapDataStore((state) => state.data);
-    const setExtraData = useHeatmapDataStore((state) => state.setExtraData);
-    const visualizerRef = useRef(null);
-    const iframeRef = useRef(null);
-    const eventsRef = useRef([]);
-    const animationFrameRef = useRef(null);
-    const isPlayingRef = useRef(false);
-    // Initialize visualizer for replay
-    const initializeVisualizer = useCallback((envelope, userAgent) => {
-        const iframe = iframeRef.current;
-        if (!iframe?.contentWindow)
-            return null;
-        // Clear previous events
-        eventsRef.current = [];
-        const visualizer = new Visualizer();
-        const mobile = isMobileDevice(userAgent);
-        visualizer.setup(iframe.contentWindow, {
-            version: envelope.version,
-            onresize: (width, height) => {
-                setExtraData({ width, height });
-            },
-            mobile,
-            vNext: true,
-            locale: 'en-us',
-        });
-        return visualizer;
-    }, [setExtraData]);
-    // Animation loop for replay
-    const replayLoop = useCallback(() => {
-        if (!isPlayingRef.current)
-            return;
-        const events = eventsRef.current;
-        const visualizer = visualizerRef.current;
-        if (!visualizer || events.length === 0) {
-            animationFrameRef.current = requestAnimationFrame(replayLoop);
-            return;
-        }
-        const event = events[0];
-        const end = event.time + 16; // 60FPS => 16ms per frame
-        let index = 0;
-        // Get events within current frame
-        while (events[index] && events[index].time < end) {
-            index++;
-        }
-        // Render events for this frame
-        if (index > 0) {
-            visualizer.render(events.splice(0, index));
-        }
-        animationFrameRef.current = requestAnimationFrame(replayLoop);
-    }, []);
-    // Start replay
-    const startReplay = useCallback(async (payloads) => {
-        if (!payloads || payloads.length === 0)
-            return;
-        let visualizer = visualizerRef.current;
-        for (const decoded of payloads) {
-            // Initialize on first sequence
-            if (decoded.envelope.sequence === 1) {
-                const userAgent = decoded.dimension?.[0]?.data[0]?.[0] || '';
-                visualizer = initializeVisualizer(decoded.envelope, userAgent);
-                if (!visualizer)
-                    return;
-                visualizerRef.current = visualizer;
-            }
-            if (!visualizer)
-                continue;
-            // Merge events and DOM
-            const merged = visualizer.merge([decoded]);
-            eventsRef.current = eventsRef.current.concat(merged.events).sort(sortEvents);
-            visualizer.dom(merged.dom);
-        }
-        // Render HTML
-        if (visualizer && iframeRef.current?.contentWindow) {
-            await visualizer.html(payloads, iframeRef.current.contentWindow);
-        }
-        // Auto-start replay
-        isPlayingRef.current = true;
-        animationFrameRef.current = requestAnimationFrame(replayLoop);
-    }, [initializeVisualizer, replayLoop]);
-    // Play control
-    const play = useCallback(() => {
-        if (!isPlayingRef.current) {
-            isPlayingRef.current = true;
-            animationFrameRef.current = requestAnimationFrame(replayLoop);
-        }
-    }, [replayLoop]);
-    // Pause control
-    const pause = useCallback(() => {
-        isPlayingRef.current = false;
-        if (animationFrameRef.current) {
-            cancelAnimationFrame(animationFrameRef.current);
-            animationFrameRef.current = null;
-        }
-    }, []);
-    // Main effect: Start replay when data changes
-    useEffect(() => {
-        if (!data || data.length === 0)
-            return;
-        startReplay(data);
-        // Cleanup
-        return () => {
-            isPlayingRef.current = false;
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-                animationFrameRef.current = null;
-            }
-            eventsRef.current = [];
-            visualizerRef.current = null;
-        };
-    }, [data, startReplay]);
-    return {
-        iframeRef,
-        isPlaying: isPlayingRef.current,
-        play,
-        pause,
-    };
-};
-
-const useHeatmapByMode = (mode) => {
-    const heatmapResult = useMemo(() => {
-        switch (mode) {
-            case 'heatmap':
-                return useHeatmapRender;
-            case 'replay':
-                return useReplayRender;
-        }
-    }, [mode]);
-    return heatmapResult();
-};
-
-const useHeatmapScale = (props) => {
-    const { wrapperRef, iframeRef, config } = props;
-    const containerResizeObserverRef = useRef(null);
-    const iframeResizeObserverRef = useRef(null);
-    // Container dimensions (scrollable parent)
-    const [containerWidth, setContainerWidth] = useState(0);
-    const [containerHeight, setContainerHeight] = useState(0);
-    // Content dimensions from heatmap data
-    const [contentWidth, setContentWidth] = useState(0);
-    const [contentHeight, setContentHeight] = useState(0);
-    // Iframe body actual height (from ResizeObserver)
-    const [iframeHeight, setIframeHeight] = useState(0);
-    // Scale ratio
-    const [scale, setScale] = useState(1);
-    // Initialize content dimensions from heatmap data
-    useEffect(() => {
-        if (config?.width && config?.height) {
-            setContentWidth(config.width);
-            setContentHeight(config.height);
-            // Set initial iframe body height
-            setIframeHeight(config.height);
-        }
-    }, [config?.width, config?.height]);
-    // Update container dimensions
-    const updateContainerDimensions = useCallback(() => {
-        const scrollContainer = wrapperRef.current?.parentElement?.parentElement;
-        if (scrollContainer) {
-            setContainerWidth(scrollContainer.clientWidth);
-            setContainerHeight(scrollContainer.clientHeight);
-        }
-    }, [wrapperRef]);
-    // Setup ResizeObserver for container
-    useEffect(() => {
-        const scrollContainer = wrapperRef.current?.parentElement?.parentElement;
-        if (!scrollContainer || typeof window.ResizeObserver === 'undefined') {
-            return;
-        }
-        containerResizeObserverRef.current = new ResizeObserver(() => {
-            updateContainerDimensions();
-        });
-        containerResizeObserverRef.current.observe(scrollContainer);
-        updateContainerDimensions();
-        return () => {
-            if (containerResizeObserverRef.current && scrollContainer) {
-                containerResizeObserverRef.current.unobserve(scrollContainer);
-            }
-        };
-    }, [wrapperRef, updateContainerDimensions]);
-    // Setup ResizeObserver and MutationObserver for iframe body
-    useEffect(() => {
-        const iframe = iframeRef.current;
-        if (!iframe) {
-            return;
-        }
-        let mutationObserver = null;
-        const updateIframeHeight = () => {
-            try {
-                const iframeDocument = iframe.contentDocument;
-                const iframeBody = iframeDocument?.body;
-                if (!iframeBody) {
-                    return;
-                }
-                const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
-                if (bodyHeight > 0) {
-                    setIframeHeight(bodyHeight);
-                }
-            }
-            catch (error) {
-                console.warn('Cannot measure iframe content:', error);
-            }
-        };
-        const setupIframeObserver = () => {
-            try {
-                const iframeDocument = iframe.contentDocument;
-                const iframeBody = iframeDocument?.body;
-                if (!iframeBody) {
-                    return;
-                }
-                // ResizeObserver for size changes
-                if (typeof window.ResizeObserver !== 'undefined') {
-                    if (iframeResizeObserverRef.current) {
-                        iframeResizeObserverRef.current.disconnect();
-                    }
-                    iframeResizeObserverRef.current = new ResizeObserver(() => {
-                        updateIframeHeight();
-                    });
-                    iframeResizeObserverRef.current.observe(iframeBody);
-                }
-                // MutationObserver for DOM changes
-                if (typeof window.MutationObserver !== 'undefined') {
-                    mutationObserver = new MutationObserver(() => {
-                        updateIframeHeight();
-                    });
-                    mutationObserver.observe(iframeBody, {
-                        childList: true, // Watch for added/removed nodes
-                        subtree: true, // Watch entire subtree
-                        attributes: true, // Watch attribute changes
-                        characterData: true, // Watch text content changes
-                    });
-                }
-                // Initial measurement
-                updateIframeHeight();
-            }
-            catch (error) {
-                console.warn('Cannot access iframe content:', error);
-            }
-        };
-        if (iframe.contentDocument?.readyState === 'complete') {
-            setupIframeObserver();
-        }
-        else {
-            iframe.addEventListener('load', setupIframeObserver, { once: true });
-        }
-        return () => {
-            if (iframeResizeObserverRef.current) {
-                iframeResizeObserverRef.current.disconnect();
-            }
-            if (mutationObserver) {
-                mutationObserver.disconnect();
-            }
-            iframe.removeEventListener('load', setupIframeObserver);
-        };
-    }, [iframeRef]);
-    // Calculate scale based on container width and content width
-    useEffect(() => {
-        if (containerWidth > 0 && contentWidth > 0) {
-            const availableWidth = containerWidth - HEATMAP_CONFIG['paddingBlock'] * 2;
-            const calculatedScale = Math.min(availableWidth / contentWidth, 1);
-            setScale(calculatedScale);
-        }
-    }, [containerWidth, contentWidth]);
-    // Sync scroll position from container to iframe
-    const handleScroll = useCallback((scrollTop) => {
-        const iframe = iframeRef.current;
-        if (!iframe || scale <= 0)
-            return;
-        try {
-            const iframeWindow = iframe.contentWindow;
-            const iframeDocument = iframe.contentDocument;
-            if (iframeWindow && iframeDocument) {
-                const iframeScrollTop = scrollTop / scale;
-                iframeRef.current && (iframeRef.current.style.top = `${iframeScrollTop}px`);
-            }
-        }
-        catch (error) {
-            console.warn('Cannot sync scroll to iframe:', error);
-        }
-    }, [iframeRef, scale]);
-    return {
-        containerWidth,
-        containerHeight,
-        contentWidth,
-        contentHeight,
-        iframeHeight,
-        scale,
-        scaledWidth: contentWidth * scale,
-        scaledHeight: iframeHeight * scale,
-        handleScroll,
-    };
-};
-
-const ReplayControls = () => {
-    const replayResult = useReplayRender();
-    return (jsxs("div", { style: {
-            position: 'absolute',
-            bottom: 20,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            display: 'flex',
-            gap: 10,
-            backgroundColor: 'rgba(0, 0, 0, 0.7)',
-            padding: '10px 20px',
-            borderRadius: 8,
-        }, children: [jsx("button", { onClick: replayResult.play, style: {
-                    padding: '8px 16px',
-                    backgroundColor: '#4CAF50',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: 4,
-                    cursor: 'pointer',
-                }, children: "Play" }), jsx("button", { onClick: replayResult.pause, style: {
-                    padding: '8px 16px',
-                    backgroundColor: '#f44336',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: 4,
-                    cursor: 'pointer',
-                }, children: "Pause" })] }));
-};
-
-const VizDomRenderer = ({ mode = 'heatmap' }) => {
-    const config = useHeatmapDataStore((state) => state.config);
-    const wrapperRef = useRef(null);
-    const visualRef = useRef(null);
-    const { iframeRef } = useHeatmapByMode(mode);
-    const { contentWidth, iframeHeight, scale, scaledHeight, handleScroll } = useHeatmapScale({
-        wrapperRef,
-        iframeRef,
-        config,
-    });
-    const onScroll = (e) => {
-        const scrollTop = e.currentTarget.scrollTop;
-        handleScroll(scrollTop);
-    };
-    return (jsxs("div", { ref: visualRef, className: "gx-hm-visual", onScroll: onScroll, style: {
-            overflow: 'hidden auto',
-            display: 'flex',
-            position: 'relative',
-            justifyContent: 'center',
-            flex: 1,
-            backgroundColor: '#fff',
-        }, children: [jsx("div", { className: "gx-hm-visual-unscaled", style: {
-                    width: '100%',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'flex-start',
-                    height: scaledHeight > 0 ? `${scaledHeight + HEATMAP_CONFIG['paddingBlock']}px` : 'auto',
-                    padding: HEATMAP_STYLE['wrapper']['padding'],
-                }, children: jsx("div", { className: "gx-hm-wrapper", ref: wrapperRef, style: {
-                        width: contentWidth,
-                        height: iframeHeight,
-                        transform: `scale(${scale})`,
-                        transformOrigin: 'top center',
-                    }, children: jsx("iframe", { ref: iframeRef, id: "clarity-iframe", title: "Clarity Session Replay", sandbox: "allow-same-origin allow-scripts", width: contentWidth, height: iframeHeight, style: {
-                            border: 'none',
-                            display: 'block',
-                            width: `${contentWidth}px`,
-                            height: `${iframeHeight}px`,
-                        } }) }) }), mode === 'replay' && jsx(ReplayControls, {})] }));
-};
-
-const VizDomContainer = () => {
-    return (jsx(BoxStack, { id: "gx-hm-viz-container", flexDirection: "column", flex: "1 1 auto", overflow: "auto", children: jsx(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
-                // margin: '0px 16px 0px 12px',
-                borderRadius: '8px 8px 0 0',
-                minWidth: '394px',
-            }, children: jsx(VizDomRenderer, {}) }) }));
-};
-
-const WrapperPreview = ({ children }) => {
-    return (jsxs("div", { className: "gx-hm-container", style: { display: 'flex', overflowY: 'hidden', flex: '1', position: 'relative' }, children: [jsx(LeftSidebar, { children: children }), jsx(VizDomContainer, {})] }));
-};
-
-const WrapperLayout = ({ header, sidebar }) => {
-    return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentHeader, { children: header }), jsx(WrapperPreview, { children: sidebar })] }));
-};
-
-const HeatmapLayout = ({ header, sidebar }) => {
-    return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
-                    minHeight: '100%',
-                    display: 'flex',
-                }, children: jsx(WrapperLayout, { header: header, sidebar: sidebar }) }) }) }));
-};
-
-var PanelContent;
-(function (PanelContent) {
-    PanelContent["Sessions"] = "Sessions";
-    PanelContent["Timeline"] = "Timeline";
-    PanelContent["Area"] = "Area";
-    PanelContent["Click"] = "Click";
-    PanelContent["Scroll"] = "Scroll";
-    PanelContent["Attention"] = "Attention";
-})(PanelContent || (PanelContent = {}));
-var ErrorType;
-(function (ErrorType) {
-    ErrorType["NoResults"] = "NoResults";
-    ErrorType["NoClicks"] = "NoClicks";
-    ErrorType["NoScroll"] = "NoScroll";
-    ErrorType["ServerError"] = "ServerError";
-    ErrorType["DataError"] = "DataError";
-})(ErrorType || (ErrorType = {}));
-
-export { GraphView, HeatmapLayout, useHeatmapDataStore };