{"version":3,"sources":["../src/components/FauxClient/FauxClient.tsx"],"names":["forwardRef","useRef","useState","useLayoutEffect","jsxs","cn","jsx"],"mappings":"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","file":"chunk-WCWZADR2.cjs","sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { FauxClientProps } from \"./FauxClient.types\";\n\nconst DOT_COLORS = [\"bg-rose-300\", \"bg-amber-300\", \"bg-green-300\"];\n\n/**\n * A frame that mimics a browser window or device, rendering **real UI** inside.\n * With a logical `width` + `scale=\"fit\"` it renders a full-size page/app and\n * scales it down to fit any container (live thumbnails, device mockups) — the\n * content is real and interactive, just zoomed.\n *\n * Omit `width` for chrome around natural-size content (e.g. a code/preview card).\n */\nexport const FauxClient = forwardRef<HTMLDivElement, FauxClientProps>(\n  (\n    {\n      variant = \"browser\",\n      url,\n      meta,\n      dots = true,\n      width,\n      scale = \"fit\",\n      className,\n      barClassName,\n      bodyClassName,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const scaled = typeof width === \"number\";\n    const viewportRef = useRef<HTMLDivElement>(null);\n    const stageRef = useRef<HTMLDivElement>(null);\n    const [s, setS] = useState(typeof scale === \"number\" ? scale : 1);\n    const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);\n\n    useLayoutEffect(() => {\n      if (!scaled) return;\n      const viewport = viewportRef.current;\n      const stage = stageRef.current;\n      if (!viewport || !stage) return;\n      if (typeof ResizeObserver === \"undefined\") return;\n\n      const measure = () => {\n        const avail = viewport.clientWidth;\n        const next = scale === \"fit\" ? (width && width > 0 ? avail / width : 1) : scale;\n        // offsetHeight is the pre-transform layout height (CSS transforms don't affect it).\n        const naturalHeight = stage.offsetHeight;\n        setS(next);\n        setContentHeight(naturalHeight * next);\n      };\n\n      measure();\n      const ro = new ResizeObserver(measure);\n      ro.observe(viewport);\n      ro.observe(stage);\n      return () => ro.disconnect();\n    }, [scaled, scale, width]);\n\n    const isBrowser = variant === \"browser\";\n    const isDevice = variant === \"device\";\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-faux-client=\"\"\n        className={cn(\n          \"overflow-hidden bg-white dark:bg-zinc-900\",\n          isBrowser && \"rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800\",\n          isDevice && \"rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700\",\n          variant === \"bare\" && \"rounded-lg border border-zinc-200 dark:border-zinc-800\",\n          className,\n        )}\n        {...rest}\n      >\n        {isBrowser && (\n          <div\n            className={cn(\n              \"flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3.5 py-2.5 font-mono text-[11.5px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400\",\n              barClassName,\n            )}\n          >\n            {dots && (\n              <div className=\"mr-1.5 flex gap-[5px]\">\n                {DOT_COLORS.map((color, i) => (\n                  <span key={i} className={cn(\"h-[9px] w-[9px] rounded-full\", color)} />\n                ))}\n              </div>\n            )}\n            {url != null && <span className=\"min-w-0 flex-1 truncate\">{url}</span>}\n            {meta != null && <span className=\"shrink-0 text-zinc-400 dark:text-zinc-500\">{meta}</span>}\n          </div>\n        )}\n\n        <div\n          ref={viewportRef}\n          className={cn(\"relative overflow-hidden\", bodyClassName)}\n          style={scaled ? { height: contentHeight } : undefined}\n        >\n          {scaled ? (\n            <div\n              ref={stageRef}\n              className=\"absolute left-0 top-0 origin-top-left\"\n              style={{ width, transform: `scale(${s})` }}\n            >\n              {children}\n            </div>\n          ) : (\n            children\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nFauxClient.displayName = \"FauxClient\";\n"]}