@gemx-dev/heatmap-react 3.5.23 → 3.5.25

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

@@ -1,579 +0,0 @@
-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

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

package/src/configs/iframe.ts

@@ -1,15 +0,0 @@
-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

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

package/src/configs/style.ts

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

package/src/constants/index.ts

@@ -1,4 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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"}