@particle-academy/react-fancy 5.44.0 → 5.45.1

package/CHANGELOG.md

@@ -11,6 +11,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.45.1] - 2026-10-19
+
+### Changed
+
+- **`FauxClient`'s controls stay out of sight until wanted.** They are hidden,
+  and fade in when the pointer is over the frame or focus is inside it; on a
+  touch screen, which has no hover, they are always shown. In a browser frame
+  they sit inline in the address bar as ghost icons; on a device or bare frame
+  they are a slim pill in the top-right corner, leaving the bottom corners to
+  the content (a slide viewer's page count lives there). 5.45.0 drew them as a
+  bordered box over the content's bottom-right corner, permanently.
+  **Nothing to do:** same props, same `data-*` handles.
+
+## [5.45.0] - 2026-10-19
+
+### Added
+
+- **`FauxClient` zoom and full screen**, for content that has to be read rather
+  than glanced at, such as a slide or a sheet shrunk to fit a panel.
+  `<FauxClient variant="device" controls>` adds a zoom bar (−, percentage, +;
+  the same bar `ImageViewer` has) and a full-screen button in the frame's
+  corner. Zooming keeps the frame its size and scrolls the content inside it.
+  The zoom is controllable (`zoom` / `defaultZoom` / `onZoomChange`, bounded by
+  `minZoom` / `maxZoom`) so an agent can read and set it. Full screen follows
+  the browser's own state: Esc leaves the button telling the truth, and
+  `onFullscreenChange` and `data-fullscreen` report it.
+  **Nothing to do** unless you want them: `controls` defaults to `false`, and a
+  frame without it renders as before.
+
 ## [5.44.0] - 2026-10-19
 
 ### Added

package/dist/chunk-VDHHWSMT.js

@@ -0,0 +1,276 @@
+import { useControllableState } from './chunk-EDYAXGUM.js';
+import { cn } from './chunk-MMW2JGKZ.js';
+import { forwardRef, useRef, useState, useLayoutEffect, useEffect, useCallback } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var DOT_COLORS = ["bg-rose-300", "bg-amber-300", "bg-green-300"];
+var ZOOM_STEP = 1.25;
+var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+var FauxClient = forwardRef(
+  ({
+    variant = "browser",
+    url,
+    meta,
+    dots = true,
+    width,
+    scale = "fit",
+    controls = false,
+    zoom: controlledZoom,
+    defaultZoom = 1,
+    onZoomChange,
+    minZoom = 0.5,
+    maxZoom = 4,
+    onFullscreenChange,
+    className,
+    barClassName,
+    bodyClassName,
+    children,
+    ...rest
+  }, ref) => {
+    const scaled = typeof width === "number";
+    const rootRef = useRef(null);
+    const viewportRef = useRef(null);
+    const stageRef = useRef(null);
+    const [fit, setFit] = useState(typeof scale === "number" ? scale : 1);
+    const [naturalHeight, setNaturalHeight] = useState(void 0);
+    const showZoom = controls === true || typeof controls === "object" && controls.zoom !== false;
+    const showFullscreen = controls === true || typeof controls === "object" && controls.fullscreen !== false;
+    const [zoom, setZoom] = useControllableState(controlledZoom, defaultZoom, onZoomChange);
+    const [fullscreen, setFullscreen] = useState(false);
+    useLayoutEffect(() => {
+      if (!scaled) return;
+      const viewport = viewportRef.current;
+      const stage = stageRef.current;
+      if (!viewport || !stage) return;
+      if (typeof ResizeObserver === "undefined") return;
+      const measure = () => {
+        const avail = viewport.clientWidth;
+        setFit(scale === "fit" ? width && width > 0 ? avail / width : 1 : scale);
+        setNaturalHeight(stage.offsetHeight);
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(viewport);
+      ro.observe(stage);
+      return () => ro.disconnect();
+    }, [scaled, scale, width]);
+    useEffect(() => {
+      if (!showFullscreen || typeof document === "undefined") return;
+      const sync = () => {
+        const on = document.fullscreenElement != null && document.fullscreenElement === rootRef.current;
+        setFullscreen(on);
+        onFullscreenChange?.(on);
+      };
+      document.addEventListener("fullscreenchange", sync);
+      return () => document.removeEventListener("fullscreenchange", sync);
+    }, [showFullscreen, onFullscreenChange]);
+    const toggleFullscreen = useCallback(() => {
+      const el = rootRef.current;
+      if (!el || typeof document === "undefined") return;
+      if (document.fullscreenElement === el) void document.exitFullscreen?.();
+      else void el.requestFullscreen?.();
+    }, []);
+    const zoomBy = (factor) => {
+      setZoom(clamp(Math.round(zoom * factor * 100) / 100, minZoom, maxZoom));
+    };
+    const setRefs = (el) => {
+      rootRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    };
+    const isBrowser = variant === "browser";
+    const isDevice = variant === "device";
+    const effective = fit * zoom;
+    const zoomed = zoom !== 1;
+    const hasControls = showZoom || showFullscreen;
+    const controlsBar = hasControls ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-react-fancy-faux-client-controls": "",
+        className: cn(
+          "pointer-events-auto flex shrink-0 items-center gap-px opacity-0 transition-opacity duration-150",
+          "group-hover/faux-client:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100",
+          isBrowser ? "-my-1 text-zinc-400 dark:text-zinc-500" : "rounded-full bg-zinc-900/60 px-1 py-0.5 text-white/80 shadow-sm backdrop-blur-sm"
+        ),
+        children: [
+          showZoom && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-react-fancy-faux-client-zoom-out": "",
+                "aria-label": "Zoom out",
+                title: "Zoom out",
+                disabled: zoom <= minZoom,
+                onClick: () => zoomBy(1 / ZOOM_STEP),
+                className: controlButton(isBrowser),
+                children: /* @__PURE__ */ jsx(ZoomOutIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "data-react-fancy-faux-client-zoom-reset": "",
+                "aria-label": "Reset zoom",
+                title: "Reset zoom",
+                onClick: () => setZoom(1),
+                className: cn(controlButton(isBrowser), "w-auto min-w-[2.25rem] px-1 font-sans text-[10.5px] tabular-nums"),
+                children: [
+                  Math.round(zoom * 100),
+                  "%"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-react-fancy-faux-client-zoom-in": "",
+                "aria-label": "Zoom in",
+                title: "Zoom in",
+                disabled: zoom >= maxZoom,
+                onClick: () => zoomBy(ZOOM_STEP),
+                className: controlButton(isBrowser),
+                children: /* @__PURE__ */ jsx(ZoomInIcon, {})
+              }
+            )
+          ] }),
+          showFullscreen && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-react-fancy-faux-client-fullscreen": "",
+              "aria-label": fullscreen ? "Exit full screen" : "Full screen",
+              "aria-pressed": fullscreen,
+              title: fullscreen ? "Exit full screen" : "Full screen",
+              onClick: toggleFullscreen,
+              className: controlButton(isBrowser),
+              children: fullscreen ? /* @__PURE__ */ jsx(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
+            }
+          )
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setRefs,
+        "data-react-fancy-faux-client": "",
+        "data-fullscreen": showFullscreen ? String(fullscreen) : void 0,
+        className: cn(
+          "group/faux-client relative overflow-hidden bg-white dark:bg-zinc-900",
+          isBrowser && "rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800",
+          isDevice && "rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700",
+          variant === "bare" && "rounded-lg border border-zinc-200 dark:border-zinc-800",
+          // Full screen: the frame fills the screen and its body takes the room.
+          fullscreen && "flex flex-col rounded-none",
+          className
+        ),
+        ...rest,
+        children: [
+          isBrowser && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "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",
+                barClassName
+              ),
+              children: [
+                dots && /* @__PURE__ */ jsx("div", { className: "mr-1.5 flex gap-[5px]", children: DOT_COLORS.map((color, i) => /* @__PURE__ */ jsx("span", { className: cn("h-[9px] w-[9px] rounded-full", color) }, i)) }),
+                url != null && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: url }),
+                meta != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-zinc-400 dark:text-zinc-500", children: meta }),
+                hasControls && /* @__PURE__ */ jsx("div", { className: cn(url == null && meta == null && "ml-auto"), children: controlsBar })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: viewportRef,
+              className: cn(
+                "relative",
+                // Zoomed in, the content is bigger than the frame: scroll to it.
+                zoomed ? "overflow-auto" : "overflow-hidden",
+                fullscreen && "min-h-0 flex-1",
+                bodyClassName
+              ),
+              style: scaled && !fullscreen && naturalHeight !== void 0 ? { height: naturalHeight * fit } : void 0,
+              children: scaled ? (
+                // A sizer the size of the zoomed content, so the scrollbars are right.
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: naturalHeight !== void 0 && width !== void 0 ? { width: width * effective, height: naturalHeight * effective, position: "relative" } : void 0,
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: stageRef,
+                        "data-react-fancy-faux-client-content": "",
+                        className: "absolute left-0 top-0 origin-top-left",
+                        style: { width, transform: `scale(${effective})` },
+                        children
+                      }
+                    )
+                  }
+                )
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-react-fancy-faux-client-content": "",
+                  className: cn(fullscreen && "h-full"),
+                  style: zoomed ? { zoom: String(zoom) } : void 0,
+                  children
+                }
+              )
+            }
+          ),
+          hasControls && !isBrowser && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-2 top-2 z-10", children: controlsBar })
+        ]
+      }
+    );
+  }
+);
+FauxClient.displayName = "FauxClient";
+function controlButton(inBar) {
+  return cn(
+    "flex h-6 w-6 items-center justify-center rounded-full transition-colors disabled:pointer-events-none disabled:opacity-30",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50",
+    inBar ? "hover:bg-zinc-900/5 hover:text-zinc-700 dark:hover:bg-white/10 dark:hover:text-zinc-200" : "hover:bg-white/15 hover:text-white"
+  );
+}
+function ZoomOutIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 11h6" })
+  ] });
+}
+function ZoomInIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 11h6" }),
+    /* @__PURE__ */ jsx("path", { d: "M11 8v6" })
+  ] });
+}
+function FullscreenIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+  ] });
+}
+function ExitFullscreenIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
+  ] });
+}
+
+export { FauxClient };
+//# sourceMappingURL=chunk-VDHHWSMT.js.map
+//# sourceMappingURL=chunk-VDHHWSMT.js.map

package/dist/chunk-VDHHWSMT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FauxClient/FauxClient.tsx"],"names":[],"mappings":"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","file":"chunk-VDHHWSMT.js","sourcesContent":["import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type { FauxClientProps } from \"./FauxClient.types\";\n\nconst DOT_COLORS = [\"bg-rose-300\", \"bg-amber-300\", \"bg-green-300\"];\n\n/** One click of the zoom bar. Matches `ImageViewer`, so the kit zooms one way. */\nconst ZOOM_STEP = 1.25;\n\nconst clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));\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 *\n * `controls` adds a zoom bar and a full-screen button, for content that has to be\n * READ rather than glanced at: a slide or a sheet shrunk to fit a panel.\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      controls = false,\n      zoom: controlledZoom,\n      defaultZoom = 1,\n      onZoomChange,\n      minZoom = 0.5,\n      maxZoom = 4,\n      onFullscreenChange,\n      className,\n      barClassName,\n      bodyClassName,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const scaled = typeof width === \"number\";\n    const rootRef = useRef<HTMLDivElement | null>(null);\n    const viewportRef = useRef<HTMLDivElement>(null);\n    const stageRef = useRef<HTMLDivElement>(null);\n    const [fit, setFit] = useState(typeof scale === \"number\" ? scale : 1);\n    const [naturalHeight, setNaturalHeight] = useState<number | undefined>(undefined);\n\n    const showZoom = controls === true || (typeof controls === \"object\" && controls.zoom !== false);\n    const showFullscreen = controls === true || (typeof controls === \"object\" && controls.fullscreen !== false);\n    const [zoom, setZoom] = useControllableState(controlledZoom, defaultZoom, onZoomChange);\n    const [fullscreen, setFullscreen] = useState(false);\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        setFit(scale === \"fit\" ? (width && width > 0 ? avail / width : 1) : scale);\n        // offsetHeight is the pre-transform layout height (CSS transforms don't affect it).\n        setNaturalHeight(stage.offsetHeight);\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    // Full screen is the browser's state, not ours: follow it, so Esc and the\n    // browser's own exit leave the button telling the truth.\n    useEffect(() => {\n      if (!showFullscreen || typeof document === \"undefined\") return;\n      const sync = () => {\n        const on = document.fullscreenElement != null && document.fullscreenElement === rootRef.current;\n        setFullscreen(on);\n        onFullscreenChange?.(on);\n      };\n      document.addEventListener(\"fullscreenchange\", sync);\n      return () => document.removeEventListener(\"fullscreenchange\", sync);\n    }, [showFullscreen, onFullscreenChange]);\n\n    const toggleFullscreen = useCallback(() => {\n      const el = rootRef.current;\n      if (!el || typeof document === \"undefined\") return;\n      if (document.fullscreenElement === el) void document.exitFullscreen?.();\n      else void el.requestFullscreen?.();\n    }, []);\n\n    const zoomBy = (factor: number) => {\n      // Rounded so ten clicks in and ten out land back on 100%, not 99.99%.\n      setZoom(clamp(Math.round(zoom * factor * 100) / 100, minZoom, maxZoom));\n    };\n\n    const setRefs = (el: HTMLDivElement | null) => {\n      rootRef.current = el;\n      if (typeof ref === \"function\") ref(el);\n      else if (ref) ref.current = el;\n    };\n\n    const isBrowser = variant === \"browser\";\n    const isDevice = variant === \"device\";\n    const effective = fit * zoom;\n    const zoomed = zoom !== 1;\n    const hasControls = showZoom || showFullscreen;\n\n    /*\n     * Out of the way until wanted: hidden, and revealed when the pointer is over\n     * the frame or focus is inside it (keyboard). Always shown where there is no\n     * hover to reveal it (touch), or it could never be reached.\n     *\n     * In the browser chrome it sits in the address bar, inline. On a device or a\n     * bare frame there is no chrome, so it floats top-right as a slim strip: the\n     * bottom corners belong to the content (a slide viewer's page count lives\n     * there).\n     */\n    const controlsBar = hasControls ? (\n      <div\n        data-react-fancy-faux-client-controls=\"\"\n        className={cn(\n          \"pointer-events-auto flex shrink-0 items-center gap-px opacity-0 transition-opacity duration-150\",\n          \"group-hover/faux-client:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100\",\n          isBrowser\n            ? \"-my-1 text-zinc-400 dark:text-zinc-500\"\n            : \"rounded-full bg-zinc-900/60 px-1 py-0.5 text-white/80 shadow-sm backdrop-blur-sm\",\n        )}\n      >\n        {showZoom && (\n          <>\n            <button\n              type=\"button\"\n              data-react-fancy-faux-client-zoom-out=\"\"\n              aria-label=\"Zoom out\"\n              title=\"Zoom out\"\n              disabled={zoom <= minZoom}\n              onClick={() => zoomBy(1 / ZOOM_STEP)}\n              className={controlButton(isBrowser)}\n            >\n              <ZoomOutIcon />\n            </button>\n            <button\n              type=\"button\"\n              data-react-fancy-faux-client-zoom-reset=\"\"\n              aria-label=\"Reset zoom\"\n              title=\"Reset zoom\"\n              onClick={() => setZoom(1)}\n              className={cn(controlButton(isBrowser), \"w-auto min-w-[2.25rem] px-1 font-sans text-[10.5px] tabular-nums\")}\n            >\n              {Math.round(zoom * 100)}%\n            </button>\n            <button\n              type=\"button\"\n              data-react-fancy-faux-client-zoom-in=\"\"\n              aria-label=\"Zoom in\"\n              title=\"Zoom in\"\n              disabled={zoom >= maxZoom}\n              onClick={() => zoomBy(ZOOM_STEP)}\n              className={controlButton(isBrowser)}\n            >\n              <ZoomInIcon />\n            </button>\n          </>\n        )}\n        {showFullscreen && (\n          <button\n            type=\"button\"\n            data-react-fancy-faux-client-fullscreen=\"\"\n            aria-label={fullscreen ? \"Exit full screen\" : \"Full screen\"}\n            aria-pressed={fullscreen}\n            title={fullscreen ? \"Exit full screen\" : \"Full screen\"}\n            onClick={toggleFullscreen}\n            className={controlButton(isBrowser)}\n          >\n            {fullscreen ? <ExitFullscreenIcon /> : <FullscreenIcon />}\n          </button>\n        )}\n      </div>\n    ) : null;\n\n    return (\n      <div\n        ref={setRefs}\n        data-react-fancy-faux-client=\"\"\n        data-fullscreen={showFullscreen ? String(fullscreen) : undefined}\n        className={cn(\n          \"group/faux-client relative 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          // Full screen: the frame fills the screen and its body takes the room.\n          fullscreen && \"flex flex-col rounded-none\",\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            {hasControls && <div className={cn(url == null && meta == null && \"ml-auto\")}>{controlsBar}</div>}\n          </div>\n        )}\n\n        <div\n          ref={viewportRef}\n          className={cn(\n            \"relative\",\n            // Zoomed in, the content is bigger than the frame: scroll to it.\n            zoomed ? \"overflow-auto\" : \"overflow-hidden\",\n            fullscreen && \"min-h-0 flex-1\",\n            bodyClassName,\n          )}\n          // The frame keeps its FIT height whatever the zoom; zooming scrolls.\n          style={scaled && !fullscreen && naturalHeight !== undefined ? { height: naturalHeight * fit } : undefined}\n        >\n          {scaled ? (\n            // A sizer the size of the zoomed content, so the scrollbars are right.\n            <div\n              style={\n                naturalHeight !== undefined && width !== undefined\n                  ? { width: width * effective, height: naturalHeight * effective, position: \"relative\" }\n                  : undefined\n              }\n            >\n              <div\n                ref={stageRef}\n                data-react-fancy-faux-client-content=\"\"\n                className=\"absolute left-0 top-0 origin-top-left\"\n                style={{ width, transform: `scale(${effective})` }}\n              >\n                {children}\n              </div>\n            </div>\n          ) : (\n            <div\n              data-react-fancy-faux-client-content=\"\"\n              className={cn(fullscreen && \"h-full\")}\n              // CSS `zoom` rather than a transform: it changes layout size, so the\n              // content reflows and the viewport scrolls to all of it.\n              style={zoomed ? { zoom: String(zoom) } : undefined}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n\n        {hasControls && !isBrowser && (\n          <div className=\"pointer-events-none absolute right-2 top-2 z-10\">{controlsBar}</div>\n        )}\n      </div>\n    );\n  },\n);\n\nFauxClient.displayName = \"FauxClient\";\n\n/** Ghost icon buttons: no box of their own, so the bar reads as part of the frame. */\nfunction controlButton(inBar: boolean): string {\n  return cn(\n    \"flex h-6 w-6 items-center justify-center rounded-full transition-colors disabled:pointer-events-none disabled:opacity-30\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50\",\n    inBar\n      ? \"hover:bg-zinc-900/5 hover:text-zinc-700 dark:hover:bg-white/10 dark:hover:text-zinc-200\"\n      : \"hover:bg-white/15 hover:text-white\",\n  );\n}\n\nfunction ZoomOutIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"m20 20-3.5-3.5\" />\n      <path d=\"M8 11h6\" />\n    </svg>\n  );\n}\n\nfunction ZoomInIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"m20 20-3.5-3.5\" />\n      <path d=\"M8 11h6\" />\n      <path d=\"M11 8v6\" />\n    </svg>\n  );\n}\n\n/** Inline, like `Input`'s reveal icons: a frame should not need an icon set configured. */\nfunction FullscreenIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M8 3H5a2 2 0 0 0-2 2v3\" />\n      <path d=\"M21 8V5a2 2 0 0 0-2-2h-3\" />\n      <path d=\"M3 16v3a2 2 0 0 0 2 2h3\" />\n      <path d=\"M16 21h3a2 2 0 0 0 2-2v-3\" />\n    </svg>\n  );\n}\n\nfunction ExitFullscreenIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M8 3v3a2 2 0 0 1-2 2H3\" />\n      <path d=\"M21 8h-3a2 2 0 0 1-2-2V3\" />\n      <path d=\"M3 16h3a2 2 0 0 1 2 2v3\" />\n      <path d=\"M16 21v-3a2 2 0 0 1 2-2h3\" />\n    </svg>\n  );\n}\n"]}

package/dist/chunk-XL62UDVX.cjs

@@ -0,0 +1,278 @@
+'use strict';
+
+var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
+var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DOT_COLORS = ["bg-rose-300", "bg-amber-300", "bg-green-300"];
+var ZOOM_STEP = 1.25;
+var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+var FauxClient = react.forwardRef(
+  ({
+    variant = "browser",
+    url,
+    meta,
+    dots = true,
+    width,
+    scale = "fit",
+    controls = false,
+    zoom: controlledZoom,
+    defaultZoom = 1,
+    onZoomChange,
+    minZoom = 0.5,
+    maxZoom = 4,
+    onFullscreenChange,
+    className,
+    barClassName,
+    bodyClassName,
+    children,
+    ...rest
+  }, ref) => {
+    const scaled = typeof width === "number";
+    const rootRef = react.useRef(null);
+    const viewportRef = react.useRef(null);
+    const stageRef = react.useRef(null);
+    const [fit, setFit] = react.useState(typeof scale === "number" ? scale : 1);
+    const [naturalHeight, setNaturalHeight] = react.useState(void 0);
+    const showZoom = controls === true || typeof controls === "object" && controls.zoom !== false;
+    const showFullscreen = controls === true || typeof controls === "object" && controls.fullscreen !== false;
+    const [zoom, setZoom] = chunkSNHU2AI4_cjs.useControllableState(controlledZoom, defaultZoom, onZoomChange);
+    const [fullscreen, setFullscreen] = react.useState(false);
+    react.useLayoutEffect(() => {
+      if (!scaled) return;
+      const viewport = viewportRef.current;
+      const stage = stageRef.current;
+      if (!viewport || !stage) return;
+      if (typeof ResizeObserver === "undefined") return;
+      const measure = () => {
+        const avail = viewport.clientWidth;
+        setFit(scale === "fit" ? width && width > 0 ? avail / width : 1 : scale);
+        setNaturalHeight(stage.offsetHeight);
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(viewport);
+      ro.observe(stage);
+      return () => ro.disconnect();
+    }, [scaled, scale, width]);
+    react.useEffect(() => {
+      if (!showFullscreen || typeof document === "undefined") return;
+      const sync = () => {
+        const on = document.fullscreenElement != null && document.fullscreenElement === rootRef.current;
+        setFullscreen(on);
+        onFullscreenChange?.(on);
+      };
+      document.addEventListener("fullscreenchange", sync);
+      return () => document.removeEventListener("fullscreenchange", sync);
+    }, [showFullscreen, onFullscreenChange]);
+    const toggleFullscreen = react.useCallback(() => {
+      const el = rootRef.current;
+      if (!el || typeof document === "undefined") return;
+      if (document.fullscreenElement === el) void document.exitFullscreen?.();
+      else void el.requestFullscreen?.();
+    }, []);
+    const zoomBy = (factor) => {
+      setZoom(clamp(Math.round(zoom * factor * 100) / 100, minZoom, maxZoom));
+    };
+    const setRefs = (el) => {
+      rootRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    };
+    const isBrowser = variant === "browser";
+    const isDevice = variant === "device";
+    const effective = fit * zoom;
+    const zoomed = zoom !== 1;
+    const hasControls = showZoom || showFullscreen;
+    const controlsBar = hasControls ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-react-fancy-faux-client-controls": "",
+        className: chunkZU5Q77OT_cjs.cn(
+          "pointer-events-auto flex shrink-0 items-center gap-px opacity-0 transition-opacity duration-150",
+          "group-hover/faux-client:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100",
+          isBrowser ? "-my-1 text-zinc-400 dark:text-zinc-500" : "rounded-full bg-zinc-900/60 px-1 py-0.5 text-white/80 shadow-sm backdrop-blur-sm"
+        ),
+        children: [
+          showZoom && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "data-react-fancy-faux-client-zoom-out": "",
+                "aria-label": "Zoom out",
+                title: "Zoom out",
+                disabled: zoom <= minZoom,
+                onClick: () => zoomBy(1 / ZOOM_STEP),
+                className: controlButton(isBrowser),
+                children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOutIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                "data-react-fancy-faux-client-zoom-reset": "",
+                "aria-label": "Reset zoom",
+                title: "Reset zoom",
+                onClick: () => setZoom(1),
+                className: chunkZU5Q77OT_cjs.cn(controlButton(isBrowser), "w-auto min-w-[2.25rem] px-1 font-sans text-[10.5px] tabular-nums"),
+                children: [
+                  Math.round(zoom * 100),
+                  "%"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "data-react-fancy-faux-client-zoom-in": "",
+                "aria-label": "Zoom in",
+                title: "Zoom in",
+                disabled: zoom >= maxZoom,
+                onClick: () => zoomBy(ZOOM_STEP),
+                className: controlButton(isBrowser),
+                children: /* @__PURE__ */ jsxRuntime.jsx(ZoomInIcon, {})
+              }
+            )
+          ] }),
+          showFullscreen && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "data-react-fancy-faux-client-fullscreen": "",
+              "aria-label": fullscreen ? "Exit full screen" : "Full screen",
+              "aria-pressed": fullscreen,
+              title: fullscreen ? "Exit full screen" : "Full screen",
+              onClick: toggleFullscreen,
+              className: controlButton(isBrowser),
+              children: fullscreen ? /* @__PURE__ */ jsxRuntime.jsx(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(FullscreenIcon, {})
+            }
+          )
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: setRefs,
+        "data-react-fancy-faux-client": "",
+        "data-fullscreen": showFullscreen ? String(fullscreen) : void 0,
+        className: chunkZU5Q77OT_cjs.cn(
+          "group/faux-client relative overflow-hidden bg-white dark:bg-zinc-900",
+          isBrowser && "rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800",
+          isDevice && "rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700",
+          variant === "bare" && "rounded-lg border border-zinc-200 dark:border-zinc-800",
+          // Full screen: the frame fills the screen and its body takes the room.
+          fullscreen && "flex flex-col rounded-none",
+          className
+        ),
+        ...rest,
+        children: [
+          isBrowser && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: chunkZU5Q77OT_cjs.cn(
+                "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",
+                barClassName
+              ),
+              children: [
+                dots && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1.5 flex gap-[5px]", children: DOT_COLORS.map((color, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkZU5Q77OT_cjs.cn("h-[9px] w-[9px] rounded-full", color) }, i)) }),
+                url != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: url }),
+                meta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-zinc-400 dark:text-zinc-500", children: meta }),
+                hasControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkZU5Q77OT_cjs.cn(url == null && meta == null && "ml-auto"), children: controlsBar })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: viewportRef,
+              className: chunkZU5Q77OT_cjs.cn(
+                "relative",
+                // Zoomed in, the content is bigger than the frame: scroll to it.
+                zoomed ? "overflow-auto" : "overflow-hidden",
+                fullscreen && "min-h-0 flex-1",
+                bodyClassName
+              ),
+              style: scaled && !fullscreen && naturalHeight !== void 0 ? { height: naturalHeight * fit } : void 0,
+              children: scaled ? (
+                // A sizer the size of the zoomed content, so the scrollbars are right.
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: naturalHeight !== void 0 && width !== void 0 ? { width: width * effective, height: naturalHeight * effective, position: "relative" } : void 0,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        ref: stageRef,
+                        "data-react-fancy-faux-client-content": "",
+                        className: "absolute left-0 top-0 origin-top-left",
+                        style: { width, transform: `scale(${effective})` },
+                        children
+                      }
+                    )
+                  }
+                )
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-react-fancy-faux-client-content": "",
+                  className: chunkZU5Q77OT_cjs.cn(fullscreen && "h-full"),
+                  style: zoomed ? { zoom: String(zoom) } : void 0,
+                  children
+                }
+              )
+            }
+          ),
+          hasControls && !isBrowser && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute right-2 top-2 z-10", children: controlsBar })
+        ]
+      }
+    );
+  }
+);
+FauxClient.displayName = "FauxClient";
+function controlButton(inBar) {
+  return chunkZU5Q77OT_cjs.cn(
+    "flex h-6 w-6 items-center justify-center rounded-full transition-colors disabled:pointer-events-none disabled:opacity-30",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50",
+    inBar ? "hover:bg-zinc-900/5 hover:text-zinc-700 dark:hover:bg-white/10 dark:hover:text-zinc-200" : "hover:bg-white/15 hover:text-white"
+  );
+}
+function ZoomOutIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m20 20-3.5-3.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 11h6" })
+  ] });
+}
+function ZoomInIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m20 20-3.5-3.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 11h6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 8v6" })
+  ] });
+}
+function FullscreenIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+  ] });
+}
+function ExitFullscreenIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
+  ] });
+}
+
+exports.FauxClient = FauxClient;
+//# sourceMappingURL=chunk-XL62UDVX.cjs.map
+//# sourceMappingURL=chunk-XL62UDVX.cjs.map

package/dist/chunk-XL62UDVX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FauxClient/FauxClient.tsx"],"names":["forwardRef","useRef","useState","useControllableState","useLayoutEffect","useEffect","useCallback","jsxs","cn","Fragment","jsx"],"mappings":"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","file":"chunk-XL62UDVX.cjs","sourcesContent":["import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type { FauxClientProps } from \"./FauxClient.types\";\n\nconst DOT_COLORS = [\"bg-rose-300\", \"bg-amber-300\", \"bg-green-300\"];\n\n/** One click of the zoom bar. Matches `ImageViewer`, so the kit zooms one way. */\nconst ZOOM_STEP = 1.25;\n\nconst clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));\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 *\n * `controls` adds a zoom bar and a full-screen button, for content that has to be\n * READ rather than glanced at: a slide or a sheet shrunk to fit a panel.\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      controls = false,\n      zoom: controlledZoom,\n      defaultZoom = 1,\n      onZoomChange,\n      minZoom = 0.5,\n      maxZoom = 4,\n      onFullscreenChange,\n      className,\n      barClassName,\n      bodyClassName,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const scaled = typeof width === \"number\";\n    const rootRef = useRef<HTMLDivElement | null>(null);\n    const viewportRef = useRef<HTMLDivElement>(null);\n    const stageRef = useRef<HTMLDivElement>(null);\n    const [fit, setFit] = useState(typeof scale === \"number\" ? scale : 1);\n    const [naturalHeight, setNaturalHeight] = useState<number | undefined>(undefined);\n\n    const showZoom = controls === true || (typeof controls === \"object\" && controls.zoom !== false);\n    const showFullscreen = controls === true || (typeof controls === \"object\" && controls.fullscreen !== false);\n    const [zoom, setZoom] = useControllableState(controlledZoom, defaultZoom, onZoomChange);\n    const [fullscreen, setFullscreen] = useState(false);\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        setFit(scale === \"fit\" ? (width && width > 0 ? avail / width : 1) : scale);\n        // offsetHeight is the pre-transform layout height (CSS transforms don't affect it).\n        setNaturalHeight(stage.offsetHeight);\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    // Full screen is the browser's state, not ours: follow it, so Esc and the\n    // browser's own exit leave the button telling the truth.\n    useEffect(() => {\n      if (!showFullscreen || typeof document === \"undefined\") return;\n      const sync = () => {\n        const on = document.fullscreenElement != null && document.fullscreenElement === rootRef.current;\n        setFullscreen(on);\n        onFullscreenChange?.(on);\n      };\n      document.addEventListener(\"fullscreenchange\", sync);\n      return () => document.removeEventListener(\"fullscreenchange\", sync);\n    }, [showFullscreen, onFullscreenChange]);\n\n    const toggleFullscreen = useCallback(() => {\n      const el = rootRef.current;\n      if (!el || typeof document === \"undefined\") return;\n      if (document.fullscreenElement === el) void document.exitFullscreen?.();\n      else void el.requestFullscreen?.();\n    }, []);\n\n    const zoomBy = (factor: number) => {\n      // Rounded so ten clicks in and ten out land back on 100%, not 99.99%.\n      setZoom(clamp(Math.round(zoom * factor * 100) / 100, minZoom, maxZoom));\n    };\n\n    const setRefs = (el: HTMLDivElement | null) => {\n      rootRef.current = el;\n      if (typeof ref === \"function\") ref(el);\n      else if (ref) ref.current = el;\n    };\n\n    const isBrowser = variant === \"browser\";\n    const isDevice = variant === \"device\";\n    const effective = fit * zoom;\n    const zoomed = zoom !== 1;\n    const hasControls = showZoom || showFullscreen;\n\n    /*\n     * Out of the way until wanted: hidden, and revealed when the pointer is over\n     * the frame or focus is inside it (keyboard). Always shown where there is no\n     * hover to reveal it (touch), or it could never be reached.\n     *\n     * In the browser chrome it sits in the address bar, inline. On a device or a\n     * bare frame there is no chrome, so it floats top-right as a slim strip: the\n     * bottom corners belong to the content (a slide viewer's page count lives\n     * there).\n     */\n    const controlsBar = hasControls ? (\n      <div\n        data-react-fancy-faux-client-controls=\"\"\n        className={cn(\n          \"pointer-events-auto flex shrink-0 items-center gap-px opacity-0 transition-opacity duration-150\",\n          \"group-hover/faux-client:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100\",\n          isBrowser\n            ? \"-my-1 text-zinc-400 dark:text-zinc-500\"\n            : \"rounded-full bg-zinc-900/60 px-1 py-0.5 text-white/80 shadow-sm backdrop-blur-sm\",\n        )}\n      >\n        {showZoom && (\n          <>\n            <button\n              type=\"button\"\n              data-react-fancy-faux-client-zoom-out=\"\"\n              aria-label=\"Zoom out\"\n              title=\"Zoom out\"\n              disabled={zoom <= minZoom}\n              onClick={() => zoomBy(1 / ZOOM_STEP)}\n              className={controlButton(isBrowser)}\n            >\n              <ZoomOutIcon />\n            </button>\n            <button\n              type=\"button\"\n              data-react-fancy-faux-client-zoom-reset=\"\"\n              aria-label=\"Reset zoom\"\n              title=\"Reset zoom\"\n              onClick={() => setZoom(1)}\n              className={cn(controlButton(isBrowser), \"w-auto min-w-[2.25rem] px-1 font-sans text-[10.5px] tabular-nums\")}\n            >\n              {Math.round(zoom * 100)}%\n            </button>\n            <button\n              type=\"button\"\n              data-react-fancy-faux-client-zoom-in=\"\"\n              aria-label=\"Zoom in\"\n              title=\"Zoom in\"\n              disabled={zoom >= maxZoom}\n              onClick={() => zoomBy(ZOOM_STEP)}\n              className={controlButton(isBrowser)}\n            >\n              <ZoomInIcon />\n            </button>\n          </>\n        )}\n        {showFullscreen && (\n          <button\n            type=\"button\"\n            data-react-fancy-faux-client-fullscreen=\"\"\n            aria-label={fullscreen ? \"Exit full screen\" : \"Full screen\"}\n            aria-pressed={fullscreen}\n            title={fullscreen ? \"Exit full screen\" : \"Full screen\"}\n            onClick={toggleFullscreen}\n            className={controlButton(isBrowser)}\n          >\n            {fullscreen ? <ExitFullscreenIcon /> : <FullscreenIcon />}\n          </button>\n        )}\n      </div>\n    ) : null;\n\n    return (\n      <div\n        ref={setRefs}\n        data-react-fancy-faux-client=\"\"\n        data-fullscreen={showFullscreen ? String(fullscreen) : undefined}\n        className={cn(\n          \"group/faux-client relative 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          // Full screen: the frame fills the screen and its body takes the room.\n          fullscreen && \"flex flex-col rounded-none\",\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            {hasControls && <div className={cn(url == null && meta == null && \"ml-auto\")}>{controlsBar}</div>}\n          </div>\n        )}\n\n        <div\n          ref={viewportRef}\n          className={cn(\n            \"relative\",\n            // Zoomed in, the content is bigger than the frame: scroll to it.\n            zoomed ? \"overflow-auto\" : \"overflow-hidden\",\n            fullscreen && \"min-h-0 flex-1\",\n            bodyClassName,\n          )}\n          // The frame keeps its FIT height whatever the zoom; zooming scrolls.\n          style={scaled && !fullscreen && naturalHeight !== undefined ? { height: naturalHeight * fit } : undefined}\n        >\n          {scaled ? (\n            // A sizer the size of the zoomed content, so the scrollbars are right.\n            <div\n              style={\n                naturalHeight !== undefined && width !== undefined\n                  ? { width: width * effective, height: naturalHeight * effective, position: \"relative\" }\n                  : undefined\n              }\n            >\n              <div\n                ref={stageRef}\n                data-react-fancy-faux-client-content=\"\"\n                className=\"absolute left-0 top-0 origin-top-left\"\n                style={{ width, transform: `scale(${effective})` }}\n              >\n                {children}\n              </div>\n            </div>\n          ) : (\n            <div\n              data-react-fancy-faux-client-content=\"\"\n              className={cn(fullscreen && \"h-full\")}\n              // CSS `zoom` rather than a transform: it changes layout size, so the\n              // content reflows and the viewport scrolls to all of it.\n              style={zoomed ? { zoom: String(zoom) } : undefined}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n\n        {hasControls && !isBrowser && (\n          <div className=\"pointer-events-none absolute right-2 top-2 z-10\">{controlsBar}</div>\n        )}\n      </div>\n    );\n  },\n);\n\nFauxClient.displayName = \"FauxClient\";\n\n/** Ghost icon buttons: no box of their own, so the bar reads as part of the frame. */\nfunction controlButton(inBar: boolean): string {\n  return cn(\n    \"flex h-6 w-6 items-center justify-center rounded-full transition-colors disabled:pointer-events-none disabled:opacity-30\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50\",\n    inBar\n      ? \"hover:bg-zinc-900/5 hover:text-zinc-700 dark:hover:bg-white/10 dark:hover:text-zinc-200\"\n      : \"hover:bg-white/15 hover:text-white\",\n  );\n}\n\nfunction ZoomOutIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"m20 20-3.5-3.5\" />\n      <path d=\"M8 11h6\" />\n    </svg>\n  );\n}\n\nfunction ZoomInIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"m20 20-3.5-3.5\" />\n      <path d=\"M8 11h6\" />\n      <path d=\"M11 8v6\" />\n    </svg>\n  );\n}\n\n/** Inline, like `Input`'s reveal icons: a frame should not need an icon set configured. */\nfunction FullscreenIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M8 3H5a2 2 0 0 0-2 2v3\" />\n      <path d=\"M21 8V5a2 2 0 0 0-2-2h-3\" />\n      <path d=\"M3 16v3a2 2 0 0 0 2 2h3\" />\n      <path d=\"M16 21h3a2 2 0 0 0 2-2v-3\" />\n    </svg>\n  );\n}\n\nfunction ExitFullscreenIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M8 3v3a2 2 0 0 1-2 2H3\" />\n      <path d=\"M21 8h-3a2 2 0 0 1-2-2V3\" />\n      <path d=\"M3 16h3a2 2 0 0 1 2 2v3\" />\n      <path d=\"M16 21v-3a2 2 0 0 1 2-2h3\" />\n    </svg>\n  );\n}\n"]}

package/dist/faux-client.cjs

@@ -1,13 +1,14 @@
 'use strict';
 
-var chunkWCWZADR2_cjs = require('./chunk-WCWZADR2.cjs');
+var chunkXL62UDVX_cjs = require('./chunk-XL62UDVX.cjs');
+require('./chunk-SNHU2AI4.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "FauxClient", {
   enumerable: true,
-  get: function () { return chunkWCWZADR2_cjs.FauxClient; }
+  get: function () { return chunkXL62UDVX_cjs.FauxClient; }
 });
 //# sourceMappingURL=faux-client.cjs.map
 //# sourceMappingURL=faux-client.cjs.map

package/dist/faux-client.d.cts

@@ -18,6 +18,29 @@ interface FauxClientProps extends Omit<HTMLAttributes<HTMLDivElement>, "children
     width?: number;
     /** `"fit"` scales the logical {@link FauxClientProps.width} to the frame; a number is a fixed scale. */
     scale?: number | "fit";
+    /**
+     * A zoom bar (−, percentage, +) and a full-screen button, in the frame's
+     * bottom-right corner. `true` for both; `{ zoom: false }` or
+     * `{ fullscreen: false }` to leave one out. Default `false`.
+     */
+    controls?: boolean | {
+        zoom?: boolean;
+        fullscreen?: boolean;
+    };
+    /** The zoom, 1 = fit. Controllable, so an agent can read and set it. */
+    zoom?: number;
+    defaultZoom?: number;
+    onZoomChange?: (zoom: number) => void;
+    /** Default 0.5. */
+    minZoom?: number;
+    /** Default 4. */
+    maxZoom?: number;
+    /**
+     * Called when the frame enters or leaves full screen, however it happened
+     * (the button, Esc, the browser). The frame also carries
+     * `data-fullscreen="true"` while it is, for styling the content.
+     */
+    onFullscreenChange?: (fullscreen: boolean) => void;
     className?: string;
     /** Class for the browser bar. */
     barClassName?: string;
@@ -33,6 +56,9 @@ interface FauxClientProps extends Omit<HTMLAttributes<HTMLDivElement>, "children
  * content is real and interactive, just zoomed.
  *
  * Omit `width` for chrome around natural-size content (e.g. a code/preview card).
+ *
+ * `controls` adds a zoom bar and a full-screen button, for content that has to be
+ * READ rather than glanced at: a slide or a sheet shrunk to fit a panel.
  */
 declare const FauxClient: react.ForwardRefExoticComponent<FauxClientProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/faux-client.d.ts

@@ -18,6 +18,29 @@ interface FauxClientProps extends Omit<HTMLAttributes<HTMLDivElement>, "children
     width?: number;
     /** `"fit"` scales the logical {@link FauxClientProps.width} to the frame; a number is a fixed scale. */
     scale?: number | "fit";
+    /**
+     * A zoom bar (−, percentage, +) and a full-screen button, in the frame's
+     * bottom-right corner. `true` for both; `{ zoom: false }` or
+     * `{ fullscreen: false }` to leave one out. Default `false`.
+     */
+    controls?: boolean | {
+        zoom?: boolean;
+        fullscreen?: boolean;
+    };
+    /** The zoom, 1 = fit. Controllable, so an agent can read and set it. */
+    zoom?: number;
+    defaultZoom?: number;
+    onZoomChange?: (zoom: number) => void;
+    /** Default 0.5. */
+    minZoom?: number;
+    /** Default 4. */
+    maxZoom?: number;
+    /**
+     * Called when the frame enters or leaves full screen, however it happened
+     * (the button, Esc, the browser). The frame also carries
+     * `data-fullscreen="true"` while it is, for styling the content.
+     */
+    onFullscreenChange?: (fullscreen: boolean) => void;
     className?: string;
     /** Class for the browser bar. */
     barClassName?: string;
@@ -33,6 +56,9 @@ interface FauxClientProps extends Omit<HTMLAttributes<HTMLDivElement>, "children
  * content is real and interactive, just zoomed.
  *
  * Omit `width` for chrome around natural-size content (e.g. a code/preview card).
+ *
+ * `controls` adds a zoom bar and a full-screen button, for content that has to be
+ * READ rather than glanced at: a slide or a sheet shrunk to fit a panel.
  */
 declare const FauxClient: react.ForwardRefExoticComponent<FauxClientProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/faux-client.js

@@ -1,4 +1,5 @@
-export { FauxClient } from './chunk-FA4IG5RB.js';
+export { FauxClient } from './chunk-VDHHWSMT.js';
+import './chunk-EDYAXGUM.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=faux-client.js.map
 //# sourceMappingURL=faux-client.js.map

package/dist/index.cjs

@@ -61,7 +61,7 @@ var chunkZMD3PIYF_cjs = require('./chunk-ZMD3PIYF.cjs');
 var chunkTH7VP4CL_cjs = require('./chunk-TH7VP4CL.cjs');
 var chunkV35A6B7A_cjs = require('./chunk-V35A6B7A.cjs');
 var chunkRPVCMW64_cjs = require('./chunk-RPVCMW64.cjs');
-var chunkWCWZADR2_cjs = require('./chunk-WCWZADR2.cjs');
+var chunkXL62UDVX_cjs = require('./chunk-XL62UDVX.cjs');
 var chunkT45XK5GN_cjs = require('./chunk-T45XK5GN.cjs');
 var chunkVKXNCYLE_cjs = require('./chunk-VKXNCYLE.cjs');
 var chunkOOZCJLEF_cjs = require('./chunk-OOZCJLEF.cjs');
@@ -467,7 +467,7 @@ Object.defineProperty(exports, "useMenu", {
 });
 Object.defineProperty(exports, "FauxClient", {
   enumerable: true,
-  get: function () { return chunkWCWZADR2_cjs.FauxClient; }
+  get: function () { return chunkXL62UDVX_cjs.FauxClient; }
 });
 Object.defineProperty(exports, "FileBrowser", {
   enumerable: true,

package/dist/index.js

@@ -59,7 +59,7 @@ export { MediaViewer, resolveMediaType } from './chunk-KO2HLNBB.js';
 export { VideoViewer } from './chunk-VOGI7GX3.js';
 export { PdfViewer } from './chunk-SOYORSLZ.js';
 export { Menu, useMenu } from './chunk-RA2VOQ46.js';
-export { FauxClient } from './chunk-FA4IG5RB.js';
+export { FauxClient } from './chunk-VDHHWSMT.js';
 export { FileBrowser, FileBrowserNewFolder, useFileBrowser, validateFolderName } from './chunk-2KAJ4L7C.js';
 export { FileUpload, useFileUpload } from './chunk-W6RDAZJC.js';
 export { Grid } from './chunk-TM3RTWKI.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "5.44.0",
+  "version": "5.45.1",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",

package/dist/chunk-FA4IG5RB.js

@@ -1,100 +0,0 @@
-import { cn } from './chunk-MMW2JGKZ.js';
-import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DOT_COLORS = ["bg-rose-300", "bg-amber-300", "bg-green-300"];
-var FauxClient = forwardRef(
-  ({
-    variant = "browser",
-    url,
-    meta,
-    dots = true,
-    width,
-    scale = "fit",
-    className,
-    barClassName,
-    bodyClassName,
-    children,
-    ...rest
-  }, ref) => {
-    const scaled = typeof width === "number";
-    const viewportRef = useRef(null);
-    const stageRef = useRef(null);
-    const [s, setS] = useState(typeof scale === "number" ? scale : 1);
-    const [contentHeight, setContentHeight] = useState(void 0);
-    useLayoutEffect(() => {
-      if (!scaled) return;
-      const viewport = viewportRef.current;
-      const stage = stageRef.current;
-      if (!viewport || !stage) return;
-      if (typeof ResizeObserver === "undefined") return;
-      const measure = () => {
-        const avail = viewport.clientWidth;
-        const next = scale === "fit" ? width && width > 0 ? avail / width : 1 : scale;
-        const naturalHeight = stage.offsetHeight;
-        setS(next);
-        setContentHeight(naturalHeight * next);
-      };
-      measure();
-      const ro = new ResizeObserver(measure);
-      ro.observe(viewport);
-      ro.observe(stage);
-      return () => ro.disconnect();
-    }, [scaled, scale, width]);
-    const isBrowser = variant === "browser";
-    const isDevice = variant === "device";
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        "data-react-fancy-faux-client": "",
-        className: cn(
-          "overflow-hidden bg-white dark:bg-zinc-900",
-          isBrowser && "rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800",
-          isDevice && "rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700",
-          variant === "bare" && "rounded-lg border border-zinc-200 dark:border-zinc-800",
-          className
-        ),
-        ...rest,
-        children: [
-          isBrowser && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "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",
-                barClassName
-              ),
-              children: [
-                dots && /* @__PURE__ */ jsx("div", { className: "mr-1.5 flex gap-[5px]", children: DOT_COLORS.map((color, i) => /* @__PURE__ */ jsx("span", { className: cn("h-[9px] w-[9px] rounded-full", color) }, i)) }),
-                url != null && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: url }),
-                meta != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-zinc-400 dark:text-zinc-500", children: meta })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: viewportRef,
-              className: cn("relative overflow-hidden", bodyClassName),
-              style: scaled ? { height: contentHeight } : void 0,
-              children: scaled ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ref: stageRef,
-                  className: "absolute left-0 top-0 origin-top-left",
-                  style: { width, transform: `scale(${s})` },
-                  children
-                }
-              ) : children
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-FauxClient.displayName = "FauxClient";
-
-export { FauxClient };
-//# sourceMappingURL=chunk-FA4IG5RB.js.map
-//# sourceMappingURL=chunk-FA4IG5RB.js.map

package/dist/chunk-FA4IG5RB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/FauxClient/FauxClient.tsx"],"names":[],"mappings":"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","file":"chunk-FA4IG5RB.js","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"]}

package/dist/chunk-WCWZADR2.cjs

@@ -1,102 +0,0 @@
-'use strict';
-
-var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-var DOT_COLORS = ["bg-rose-300", "bg-amber-300", "bg-green-300"];
-var FauxClient = react.forwardRef(
-  ({
-    variant = "browser",
-    url,
-    meta,
-    dots = true,
-    width,
-    scale = "fit",
-    className,
-    barClassName,
-    bodyClassName,
-    children,
-    ...rest
-  }, ref) => {
-    const scaled = typeof width === "number";
-    const viewportRef = react.useRef(null);
-    const stageRef = react.useRef(null);
-    const [s, setS] = react.useState(typeof scale === "number" ? scale : 1);
-    const [contentHeight, setContentHeight] = react.useState(void 0);
-    react.useLayoutEffect(() => {
-      if (!scaled) return;
-      const viewport = viewportRef.current;
-      const stage = stageRef.current;
-      if (!viewport || !stage) return;
-      if (typeof ResizeObserver === "undefined") return;
-      const measure = () => {
-        const avail = viewport.clientWidth;
-        const next = scale === "fit" ? width && width > 0 ? avail / width : 1 : scale;
-        const naturalHeight = stage.offsetHeight;
-        setS(next);
-        setContentHeight(naturalHeight * next);
-      };
-      measure();
-      const ro = new ResizeObserver(measure);
-      ro.observe(viewport);
-      ro.observe(stage);
-      return () => ro.disconnect();
-    }, [scaled, scale, width]);
-    const isBrowser = variant === "browser";
-    const isDevice = variant === "device";
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        "data-react-fancy-faux-client": "",
-        className: chunkZU5Q77OT_cjs.cn(
-          "overflow-hidden bg-white dark:bg-zinc-900",
-          isBrowser && "rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800",
-          isDevice && "rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700",
-          variant === "bare" && "rounded-lg border border-zinc-200 dark:border-zinc-800",
-          className
-        ),
-        ...rest,
-        children: [
-          isBrowser && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: chunkZU5Q77OT_cjs.cn(
-                "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",
-                barClassName
-              ),
-              children: [
-                dots && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1.5 flex gap-[5px]", children: DOT_COLORS.map((color, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkZU5Q77OT_cjs.cn("h-[9px] w-[9px] rounded-full", color) }, i)) }),
-                url != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: url }),
-                meta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-zinc-400 dark:text-zinc-500", children: meta })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ref: viewportRef,
-              className: chunkZU5Q77OT_cjs.cn("relative overflow-hidden", bodyClassName),
-              style: scaled ? { height: contentHeight } : void 0,
-              children: scaled ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  ref: stageRef,
-                  className: "absolute left-0 top-0 origin-top-left",
-                  style: { width, transform: `scale(${s})` },
-                  children
-                }
-              ) : children
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-FauxClient.displayName = "FauxClient";
-
-exports.FauxClient = FauxClient;
-//# sourceMappingURL=chunk-WCWZADR2.cjs.map
-//# sourceMappingURL=chunk-WCWZADR2.cjs.map

package/dist/chunk-WCWZADR2.cjs.map

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