@gemx-dev/heatmap-react 3.5.19 → 3.5.23

package/src/components/VizElement/temp/VizElementRank.tsx

@@ -0,0 +1,579 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+// import './HeatmapElements.css'; // You'll need to create corresponding CSS
+
+// ============================================================================
+// Types & Interfaces
+// ============================================================================
+
+export enum HeatmapType {
+  Sessions = 0,
+  Timeline = 1,
+  Click = 2,
+  Scroll = 3,
+  Area = 4,
+  Attention = 5,
+}
+
+export enum DeviceType {
+  Desktop = 'desktop',
+  Mobile = 'mobile',
+  Tablet = 'tablet',
+}
+
+interface ElementRect {
+  hash: string;
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+interface ElementInfo extends ElementRect {
+  hash: string;
+  clicks: number;
+  rank: number;
+  selector: string;
+}
+
+interface AndroidNode extends ElementRect {
+  x: number;
+  y: number;
+}
+
+interface ElementMapInfo {
+  totalclicks: number;
+  selector?: string;
+  hash: string;
+}
+
+interface SortedElement {
+  hash?: string;
+  selector?: string;
+}
+
+export interface HeatmapInfo {
+  sortedElements?: SortedElement[];
+  elementMapInfo?: Record<string, ElementMapInfo>;
+  totalClicks?: number;
+}
+
+interface ClarityVisualizer {
+  getAndroidNode: (hash: string, flag1: boolean, flag2: boolean) => AndroidNode | null;
+  getAndroidElements: (x: number, y: number, flag: boolean) => AndroidNode[];
+  setAndroidClickmapScrolledCallback: (callback: () => void) => void;
+}
+
+interface DivDimensions {
+  width?: number;
+  height?: number;
+}
+
+// ============================================================================
+// Props Interface
+// ============================================================================
+
+export interface HeatmapElementsProps {
+  // Dimensions & Transform
+  widthScale: number;
+  divDimensions: DivDimensions;
+  transform: string;
+
+  // Data
+  heatmapInfo?: HeatmapInfo;
+  selectedElement?: string;
+  selectedFrameElements?: SortedElement[];
+  clarityVisualizer?: ClarityVisualizer;
+
+  // Refs
+  heatmapWrapperRef: React.RefObject<HTMLDivElement>;
+  parentRef: React.RefObject<HTMLElement>;
+
+  // Flags
+  isVisible: boolean;
+  isElementSidebarOpen: boolean;
+  showScreenElementsOnly: boolean;
+  areDefaultRanksHidden: boolean;
+  showMissingElementMessage: boolean;
+  isRecordingView: boolean;
+  isCompareMode: boolean;
+  isSecondary?: boolean;
+
+  // Callbacks
+  selectElement: (hash: string) => void;
+
+  // Device
+  deviceType: DeviceType;
+
+  // Feature flags (from config)
+  enableAdvancedSelection?: boolean; // Corresponds to c.sLk
+  enableMobileOptimization?: boolean; // Corresponds to c.rEk
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export const HeatmapElements: React.FC<HeatmapElementsProps> = (props) => {
+  const {
+    widthScale,
+    divDimensions,
+    transform,
+    heatmapInfo,
+    selectedElement,
+    selectedFrameElements,
+    clarityVisualizer,
+    heatmapWrapperRef,
+    parentRef,
+    isVisible,
+    isElementSidebarOpen,
+    showScreenElementsOnly,
+    areDefaultRanksHidden,
+    showMissingElementMessage,
+    isRecordingView,
+    isCompareMode,
+    isSecondary = false,
+    selectElement,
+    deviceType,
+    enableAdvancedSelection = false,
+    enableMobileOptimization = false,
+  } = props;
+
+  // ============================================================================
+  // State
+  // ============================================================================
+
+  const [hoveredElement, setHoveredElement] = useState<ElementInfo | null>(null);
+  const [clickedElement, setClickedElement] = useState<ElementInfo | null>(null);
+  const [isInitialLoad, setIsInitialLoad] = useState(false);
+  const [showClickedCallout, setShowClickedCallout] = useState(false);
+  const [showMissingElement, setShowMissingElement] = useState(false);
+  const [displayElements, setDisplayElements] = useState<SortedElement[] | undefined>(
+    heatmapInfo?.sortedElements,
+  );
+
+  // ============================================================================
+  // Refs
+  // ============================================================================
+
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  // ============================================================================
+  // Constants
+  // ============================================================================
+
+  const rankScale = 0.8 / widthScale;
+  const scale = widthScale;
+
+  // IDs for callout targets
+  const clickedElementId = isSecondary ? 'secondaryClickedElementID' : 'clickedElement';
+  const hoveredElementId = isSecondary ? 'secondaryhoveredElementID' : 'hoveredElement';
+
+  // ============================================================================
+  // Helper Functions
+  // ============================================================================
+
+  const clearSelection = useCallback(() => {
+    setHoveredElement(null);
+    setClickedElement(null);
+    setShowClickedCallout(false);
+    setShowMissingElement(false);
+  }, []);
+
+  const getAndroidNodeRect = useCallback(
+    (
+      element?: SortedElement,
+      flag1: boolean = false,
+      flag2: boolean = false,
+    ): ElementRect | undefined => {
+      if (element?.hash) {
+        const node = clarityVisualizer?.getAndroidNode(element.hash, flag1, flag2);
+        if (node === null) return undefined;
+        return {
+          hash: element.hash,
+          top: node?.y ?? 0,
+          left: node?.x ?? 0,
+          width: node?.width ?? 0,
+          height: node?.height ?? 0,
+        };
+      }
+      return undefined;
+    },
+    [clarityVisualizer],
+  );
+
+  const calculateRankPosition = (rect: ElementRect, scale: number) => {
+    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
+    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
+    return {
+      transform: `scale(${1.2 * scale})`,
+      top: Number.isNaN(top) ? undefined : top,
+      left: Number.isNaN(left) ? undefined : left,
+    };
+  };
+
+  // ============================================================================
+  // Effects
+  // ============================================================================
+
+  // Handle sidebar state changes
+  useEffect(() => {
+    if (isElementSidebarOpen && enableMobileOptimization && selectedElement) {
+      setShowClickedCallout(false);
+    }
+    if (!isElementSidebarOpen && enableMobileOptimization && selectedElement) {
+      setShowClickedCallout(true);
+    }
+  }, [isElementSidebarOpen, selectedElement, enableMobileOptimization]);
+
+  // Setup scroll callback
+  useEffect(() => {
+    const handleScrollCallback = () => {
+      updateSelectedElement(false);
+    };
+    clarityVisualizer?.setAndroidClickmapScrolledCallback(handleScrollCallback);
+  }, [clarityVisualizer, selectedElement, selectedFrameElements, heatmapInfo]);
+
+  // Clear on visibility change
+  useEffect(() => {
+    if (!isVisible) {
+      clearSelection();
+    }
+  }, [isVisible, clearSelection]);
+
+  // Update display elements based on filter
+  useEffect(() => {
+    if (showScreenElementsOnly) {
+      setDisplayElements(selectedFrameElements);
+    } else {
+      setDisplayElements(heatmapInfo?.sortedElements);
+    }
+  }, [showScreenElementsOnly, selectedFrameElements, heatmapInfo]);
+
+  // Cleanup on heatmap info change
+  useEffect(() => {
+    clearSelection();
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+  }, [heatmapInfo, clearSelection]);
+
+  // ============================================================================
+  // Selected Element Handler
+  // ============================================================================
+
+  const tryUpdateSelectedElement = useCallback(
+    (scrollFlag: boolean): boolean => {
+      const elementInfo = selectedElement
+        ? heatmapInfo?.elementMapInfo?.[selectedElement]
+        : undefined;
+      const rect = getAndroidNodeRect(
+        elementInfo ? { hash: selectedElement, selector: elementInfo.selector } : undefined,
+        false,
+        scrollFlag,
+      );
+
+      if (rect && elementInfo && displayElements) {
+        setClickedElement({
+          ...rect,
+          hash: selectedElement!,
+          clicks: elementInfo.totalclicks,
+          rank: displayElements.map((e) => e.hash).indexOf(elementInfo.hash) + 1,
+          selector: displayElements.filter((e) => e.hash === elementInfo.hash)?.[0]?.selector ?? '',
+        });
+        setShowClickedCallout(true);
+        return true;
+      }
+      return false;
+    },
+    [selectedElement, heatmapInfo, displayElements, getAndroidNodeRect],
+  );
+
+  const updateSelectedElement = useCallback(
+    (scrollFlag: boolean) => {
+      if (selectedElement && selectedFrameElements) {
+        if (!isInitialLoad) {
+          setShowClickedCallout(false);
+          if (tryUpdateSelectedElement(scrollFlag)) {
+            setIsInitialLoad(false);
+            setShowClickedCallout(true);
+          } else {
+            const elementInfo = heatmapInfo?.elementMapInfo?.[selectedElement];
+            if (elementInfo && displayElements) {
+              setClickedElement({
+                hash: selectedElement,
+                clicks: elementInfo.totalclicks,
+                rank: displayElements.map((e) => e.hash).indexOf(elementInfo.hash) + 1,
+                selector: elementInfo.selector ?? '',
+                left: 0,
+                top: 0,
+                width: 0,
+                height: 0,
+              });
+            }
+            setShowMissingElement(true);
+          }
+        }
+        setIsInitialLoad(false);
+      } else {
+        setHoveredElement(null);
+        setClickedElement(null);
+        setShowClickedCallout(false);
+        setIsInitialLoad(false);
+      }
+      setIsInitialLoad(false);
+    },
+    [
+      selectedElement,
+      selectedFrameElements,
+      isInitialLoad,
+      tryUpdateSelectedElement,
+      heatmapInfo,
+      displayElements,
+    ],
+  );
+
+  useEffect(() => {
+    updateSelectedElement(true);
+  }, [selectedElement, heatmapInfo, selectedFrameElements, isRecordingView, displayElements]);
+
+  // ============================================================================
+  // Mouse Event Handlers
+  // ============================================================================
+
+  const handleMouseMove = useCallback(
+    (event: React.MouseEvent) => {
+      if (!heatmapWrapperRef.current || !heatmapInfo?.elementMapInfo || !parentRef.current) {
+        return;
+      }
+
+      const wrapperRect = heatmapWrapperRef.current.getBoundingClientRect();
+      const x = (event.clientX - wrapperRect.left) / scale;
+      const y = (event.clientY - wrapperRect.top) / scale;
+
+      const elements = clarityVisualizer
+        ?.getAndroidElements(x, y, !enableAdvancedSelection)
+        .reverse();
+
+      if (!enableAdvancedSelection) {
+        // Simple selection mode
+        if (elements) {
+          for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            const hash = element.hash;
+            if (hash && heatmapInfo.elementMapInfo[hash] && displayElements) {
+              const info = heatmapInfo.elementMapInfo[hash];
+              setHoveredElement({
+                top: element.y,
+                left: element.x,
+                width: element.width,
+                height: element.height,
+                hash,
+                clicks: info.totalclicks,
+                rank: displayElements.map((e) => e.hash).indexOf(info.hash) + 1,
+                selector: info.selector ?? '',
+              });
+              break;
+            }
+          }
+        }
+        return;
+      }
+
+      // Advanced selection mode with click sorting
+      const validElements: Array<AndroidNode & { totalClicks: number; hash: string }> = [];
+      for (const element of elements ?? []) {
+        const info = heatmapInfo.elementMapInfo?.[element.hash];
+        if (info) {
+          validElements.push({
+            ...element,
+            x: element.x,
+            y: element.y,
+            totalClicks: info.totalclicks,
+            hash: element.hash,
+          });
+        }
+      }
+
+      if (validElements.length > 0) {
+        validElements.sort((a, b) => b.totalClicks - a.totalClicks);
+        let selectedElement = validElements[0];
+
+        // Find smallest element within wrapper bounds
+        for (let i = 0; i < validElements.length; i++) {
+          const element = validElements[i];
+          if (element.width < wrapperRect.width && element.height < wrapperRect.height) {
+            selectedElement = element;
+            break;
+          }
+        }
+
+        const hash = selectedElement.hash;
+        const info = heatmapInfo.elementMapInfo[hash];
+        if (displayElements) {
+          setHoveredElement({
+            top: selectedElement.y,
+            left: selectedElement.x,
+            width: selectedElement.width,
+            height: selectedElement.height,
+            hash,
+            clicks: info.totalclicks,
+            rank: displayElements.map((e) => e.hash).indexOf(info.hash) + 1,
+            selector: info.selector ?? '',
+          });
+        }
+      }
+    },
+    [
+      heatmapInfo,
+      heatmapWrapperRef,
+      parentRef,
+      displayElements,
+      clarityVisualizer,
+      scale,
+      enableAdvancedSelection,
+    ],
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    setHoveredElement(null);
+  }, []);
+
+  const handleHoveredElementClick = useCallback(() => {
+    setIsInitialLoad(true);
+    setShowClickedCallout(true);
+    setClickedElement(hoveredElement);
+    if (hoveredElement) {
+      selectElement(hoveredElement.hash);
+    }
+  }, [hoveredElement, selectElement]);
+
+  // ============================================================================
+  // Render Helpers
+  // ============================================================================
+
+  const renderRankBadge = (index: number, elementRect?: ElementRect, clickHandler?: () => void) => {
+    const style = elementRect ? calculateRankPosition(elementRect, rankScale) : undefined;
+    return elementRect ? (
+      <div
+        className="element-rank-badge"
+        style={style}
+        onClick={clickHandler}
+        data-testid="elementRank"
+      >
+        {index}
+      </div>
+    ) : null;
+  };
+
+  const renderCallout = (element: ElementInfo, targetId: string, isHovered: boolean = false) => {
+    const clickPercentage = ((element.clicks / (heatmapInfo?.totalClicks ?? 1)) * 100).toFixed(2);
+
+    return (
+      <div
+        className={`callout ${isHovered ? 'callout-hovered' : 'callout-clicked'}`}
+        data-target={targetId}
+      >
+        <div className="callout-content">
+          <div className={`rank-badge ${isSecondary ? 'secondary' : ''}`}>{element.rank}</div>
+          <div className="callout-info">
+            <div>
+              <span>Clicks</span>
+              <div className="click-stats">
+                <span className="click-count">{element.clicks?.toLocaleString()}</span>
+                <span className="click-percentage">({clickPercentage}%)</span>
+              </div>
+            </div>
+          </div>
+          {!isRecordingView && !isCompareMode && (
+            <button
+              className="view-recording-btn"
+              data-clarity-id="viewRecordingClickedFromHeatmapIframe"
+            >
+              View Recording
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  // ============================================================================
+  // Render
+  // ============================================================================
+
+  return (
+    <div
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      className="heatmapElements"
+      style={{
+        ...divDimensions,
+        transform,
+        transformOrigin: '0px 0px',
+        zIndex: 2147483647,
+      }}
+    >
+      {/* Default rank badges (top 10) */}
+      {displayElements &&
+        !areDefaultRanksHidden &&
+        displayElements
+          .slice(0, 10)
+          .map((element, index) => (
+            <React.Fragment key={element.hash}>
+              {renderRankBadge(index + 1, getAndroidNodeRect(element, true, false))}
+            </React.Fragment>
+          ))}
+
+      {/* Clicked element highlight */}
+      {clickedElement && (clickedElement.height > 0 || clickedElement.width > 0) && (
+        <>
+          <div
+            className="heatmapElement clicked"
+            id={clickedElementId}
+            style={{
+              top: clickedElement.top,
+              left: clickedElement.left,
+              width: clickedElement.width,
+              height: clickedElement.height,
+            }}
+          />
+          {renderRankBadge(clickedElement.rank, clickedElement)}
+          {showClickedCallout && renderCallout(clickedElement, clickedElementId)}
+        </>
+      )}
+
+      {/* Missing element message */}
+      {(showMissingElementMessage || showMissingElement) &&
+        (!clickedElement || (clickedElement.height === 0 && clickedElement.width === 0)) && (
+          <div
+            className="missingElement"
+            style={{
+              transform: `scale(${rankScale}) translateX(-50%)`,
+            }}
+          >
+            Element not visible in current view
+          </div>
+        )}
+
+      {/* Hovered element highlight */}
+      {hoveredElement && (
+        <>
+          <div
+            onClick={handleHoveredElementClick}
+            className="heatmapElement hovered"
+            id={hoveredElementId}
+            style={{
+              top: hoveredElement.top,
+              left: hoveredElement.left,
+              width: hoveredElement.width,
+              height: hoveredElement.height,
+            }}
+          />
+          {renderRankBadge(hoveredElement.rank, hoveredElement, handleHoveredElementClick)}
+          {hoveredElement !== clickedElement &&
+            renderCallout(hoveredElement, hoveredElementId, true)}
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/index.tsx

@@ -0,0 +1,4 @@
+export { GraphView } from './GraphView';
+export { HeatmapLayout } from './Layout';
+
+export * from './Test';

package/src/configs/iframe.ts

@@ -0,0 +1,15 @@
+interface IFrameAttrs {
+  id: string;
+  title: string;
+  sandbox: string;
+  scrolling: string;
+  height: string;
+}
+
+export const HEATMAP_IFRAME: IFrameAttrs = {
+  id: 'clarity-iframe',
+  title: 'Clarity Session Replay',
+  sandbox: 'allow-same-origin allow-scripts',
+  scrolling: 'no',
+  height: '100%',
+};

package/src/configs/index.ts

@@ -0,0 +1,2 @@
+export * from './iframe';
+export * from './style';

package/src/configs/style.ts

@@ -0,0 +1,9 @@
+export const HEATMAP_CONFIG = {
+  paddingBlock: 0,
+};
+
+export const HEATMAP_STYLE = {
+  wrapper: {
+    padding: `${HEATMAP_CONFIG.paddingBlock}px 0`,
+  },
+};

package/src/constants/index.ts

@@ -0,0 +1,4 @@
+export const CLICKED_ELEMENT_ID = 'clickedElement';
+export const SECONDARY_CLICKED_ELEMENT_ID = 'secondaryClickedElementID';
+export const HOVERED_ELEMENT_ID = 'hoveredElement';
+export const SECONDARY_HOVERED_ELEMENT_ID = 'secondaryhoveredElementID';

package/src/dist/components/GraphView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface GraphViewProps {
+    children: React.ReactNode;
+    width: number;
+    height: number;
+}
+export declare const GraphView: React.FC<GraphViewProps>;
+export {};
+//# sourceMappingURL=GraphView.d.ts.map

package/src/dist/components/GraphView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphView.d.ts","sourceRoot":"","sources":["../../src/components/GraphView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4C9C,CAAC"}

package/src/dist/components/Layout/ContentHeader.d.ts

@@ -0,0 +1,4 @@
+export declare const ContentHeader: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=ContentHeader.d.ts.map

package/src/dist/components/Layout/ContentHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/ContentHeader.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAYjE,CAAC"}

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

@@ -0,0 +1,11 @@
+import { ClickMapPoint, DecodedPayload } from '../../types';
+interface HeatmapLayoutProps {
+    data?: DecodedPayload[];
+    clickmap?: ClickMapPoint[];
+    header: React.ReactNode;
+    sidebar: React.ReactNode;
+    toolbar: React.ReactNode;
+}
+export declare const HeatmapLayout: React.FC<HeatmapLayoutProps>;
+export {};
+//# sourceMappingURL=HeatmapLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/HeatmapLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI5D,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiDtD,CAAC"}

package/src/dist/components/Layout/LeftSidebar.d.ts

@@ -0,0 +1,4 @@
+export declare const LeftSidebar: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=LeftSidebar.d.ts.map

package/src/dist/components/Layout/LeftSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/LeftSidebar.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA4B/D,CAAC"}

package/src/dist/components/Layout/WrapperLayout.d.ts

@@ -0,0 +1,8 @@
+interface WrapperLayoutProps {
+    header: React.ReactNode;
+    toolbar: React.ReactNode;
+    sidebar: React.ReactNode;
+}
+export declare const WrapperLayout: React.FC<WrapperLayoutProps>;
+export {};
+//# sourceMappingURL=WrapperLayout.d.ts.map

package/src/dist/components/Layout/WrapperLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrapperLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/WrapperLayout.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAQtD,CAAC"}

package/src/dist/components/Layout/WrapperPreview.d.ts

@@ -0,0 +1,4 @@
+export declare const WrapperPreview: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=WrapperPreview.d.ts.map

package/src/dist/components/Layout/WrapperPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrapperPreview.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/WrapperPreview.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAUlE,CAAC"}