@puzzle-ui/ui 0.3.0 → 0.5.0

package/dist/components/utilities/preview/index.cjs

@@ -9,6 +9,7 @@ let _puzzle_ui_hooks = require("@puzzle-ui/hooks");
 let react_dom = require("react-dom");
 let _puzzle_ui_icons = require("@puzzle-ui/icons");
 let _puzzle_ui_theme_scope_context = require("@puzzle-ui/theme/scope-context");
+let _puzzle_ui_theme = require("@puzzle-ui/theme");
 // src/components/utilities/preview/index.tsx
 const PREVIEW_DEVICES = {
 	mobile: {
@@ -61,7 +62,7 @@ const PreviewBackground = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
 	patternOpacity: .25,
 	...props
 });
-const Preview = ({ children, className, defaultDevice = "mobile", code, height, align, justify, hideDevices = false }) => {
+const Preview = ({ children, className, defaultDevice = "mobile", code, fit = "content", height, padding = "var(--puzzle-space-8, 2rem)", align = "center", justify = "center", hideDevices = false }) => {
 	const generatedId = (0, react.useId)();
 	const frameRootId = `${generatedId}-root`;
 	const previewTabId = `${generatedId}-tab-preview`;
@@ -73,15 +74,28 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 	const [frameRoot, setFrameRoot] = (0, react.useState)(null);
 	const [scale, setScale] = (0, react.useState)(1);
 	const [copied, setCopied] = (0, react.useState)(false);
+	const [contentHeight, setContentHeight] = (0, react.useState)(PREVIEW_DEVICES.mobile.height);
+	const [contentMeasured, setContentMeasured] = (0, react.useState)(false);
 	const containerRef = (0, react.useRef)(null);
+	const contentRef = (0, react.useRef)(null);
 	const iframeRef = (0, react.useRef)(null);
 	const copyTimeoutRef = (0, react.useRef)(null);
 	const config = PREVIEW_DEVICES[device];
-	const frameHeight = height ?? config.height;
+	const fitsContent = height === void 0 && fit === "content";
+	const frameHeight = height ?? (fitsContent ? contentHeight : config.height);
+	const showPlaceholder = fitsContent && !contentMeasured;
 	const hasCode = code !== void 0;
 	const [direction, setDirection] = (0, react.useState)("ltr");
+	const [desktopControlsVisible, setDesktopControlsVisible] = (0, react.useState)(true);
 	const sectionRef = (0, react.useRef)(null);
 	const isKeyboardNavigation = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		const query = window.matchMedia(`(min-width: ${_puzzle_ui_theme.BREAKPOINTS.desktop}px)`);
+		const update = () => setDesktopControlsVisible(query.matches);
+		update();
+		query.addEventListener("change", update);
+		return () => query.removeEventListener("change", update);
+	}, []);
 	(0, react.useLayoutEffect)(() => {
 		const section = sectionRef.current;
 		if (section) {
@@ -95,7 +109,10 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		initialActiveId: activeTab
 	});
 	const deviceFocus = (0, _puzzle_ui_hooks.useRovingFocus)({
-		items: PREVIEW_DEVICE_ITEMS,
+		items: PREVIEW_DEVICE_ITEMS.map((item) => ({
+			...item,
+			disabled: item.id === "desktop" && !desktopControlsVisible
+		})),
 		dir: direction,
 		initialActiveId: device
 	});
@@ -142,6 +159,7 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		targetRoot.style.setProperty("height", "100%", "important");
 		targetRoot.style.setProperty("min-height", "100%", "important");
 		targetRoot.style.setProperty("margin", "0", "important");
+		targetRoot.style.setProperty("padding", "0", "important");
 		targetRoot.style.setProperty("overflow-x", "hidden", "important");
 		targetRoot.style.setProperty("overflow-y", "auto", "important");
 		targetRoot.style.setProperty("scrollbar-width", "none", "important");
@@ -153,6 +171,7 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		body.style.setProperty("height", "auto", "important");
 		body.style.setProperty("min-height", "100%", "important");
 		body.style.setProperty("margin", "0", "important");
+		body.style.setProperty("padding", "0", "important");
 		body.style.setProperty("overflow", "visible", "important");
 		frameDocument.getElementById(frameRootId)?.style.removeProperty("min-height");
 		const scrollbarStyle = frameDocument.createElement("style");
@@ -174,6 +193,7 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		frameHead.appendChild(scrollbarStyle);
 	}, [frameRootId]);
 	const updateScale = (0, react.useCallback)((availableWidth) => {
+		if (availableWidth <= 0) return;
 		const nextScale = Math.min(1, Math.max(0, availableWidth) / config.width);
 		setScale((current) => Math.abs(current - nextScale) < .001 ? current : nextScale);
 	}, [config.width]);
@@ -182,7 +202,7 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		if (!container) return;
 		const measure = () => {
 			const styles = window.getComputedStyle(container);
-			const horizontalPadding = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
+			const horizontalPadding = (Number.parseFloat(styles.paddingLeft) || 0) + (Number.parseFloat(styles.paddingRight) || 0);
 			updateScale(container.clientWidth - horizontalPadding);
 		};
 		measure();
@@ -228,6 +248,33 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 	(0, react.useEffect)(() => {
 		initializeFrame();
 	}, [initializeFrame]);
+	useIsomorphicLayoutEffect(() => {
+		const content = contentRef.current;
+		if (!fitsContent || !frameRoot || !content || activeTab !== "preview") return;
+		const measure = () => {
+			const measuredHeight = Math.ceil(Math.max(content.getBoundingClientRect().height, content.scrollHeight));
+			setContentHeight(Math.min(PREVIEW_DEVICES.mobile.height, Math.max(1, measuredHeight)));
+			setContentMeasured(true);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(content);
+		const mutations = new MutationObserver(measure);
+		mutations.observe(content, {
+			subtree: true,
+			childList: true,
+			characterData: true,
+			attributes: true
+		});
+		return () => {
+			observer.disconnect();
+			mutations.disconnect();
+		};
+	}, [
+		activeTab,
+		fitsContent,
+		frameRoot
+	]);
 	const handleCopyCode = (0, react.useCallback)(async () => {
 		if (code === void 0) return;
 		try {
@@ -251,18 +298,26 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		width: config.width,
 		height: frameHeight,
 		transform: `scale(${scale})`,
-		transformOrigin: "top left"
+		transformOrigin: "top left",
+		visibility: showPlaceholder ? "hidden" : void 0
 	};
 	const contentStyle = {
 		display: "flex",
 		boxSizing: "border-box",
-		minHeight: "100vh",
+		padding,
+		minHeight: fitsContent ? void 0 : "100vh",
 		alignItems: align ? ALIGN_VALUES[align] : void 0,
 		justifyContent: justify ? JUSTIFY_VALUES[justify] : void 0
 	};
 	const viewportStyle = {
 		width: config.width * scale,
-		aspectRatio: `${config.width} / ${frameHeight}`
+		height: showPlaceholder ? void 0 : frameHeight * scale,
+		maxHeight: showPlaceholder ? PREVIEW_DEVICES.mobile.height * scale : void 0
+	};
+	const placeholderStyle = {
+		...contentStyle,
+		width: config.width,
+		zoom: scale === 1 ? void 0 : scale
 	};
 	const panelProps = {
 		id: panelId,
@@ -313,6 +368,7 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 						role: "group",
 						"aria-label": "Device size",
 						children: Object.keys(PREVIEW_DEVICES).map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							"data-device": item,
 							ref: deviceFocus.getItemRef(item),
 							type: "button",
 							className: (0, _puzzle_ui_core.cn)("puzzle-preview__device", device === item && "puzzle-preview__device--active"),
@@ -353,21 +409,33 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "puzzle-preview__viewport",
 						style: viewportStyle,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
-							ref: iframeRef,
-							className: "puzzle-preview__frame",
-							srcDoc: createPreviewDocument(frameRootId),
-							title: `${config.label} component preview`,
-							onLoad: initializeFrame,
-							style: frameStyle
-						}), frameRoot && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_theme_scope_context.ThemeScopeProvider, {
-							scopeId: themeScope?.scopeId ?? null,
-							theme: themeScope?.theme ?? "system",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								style: contentStyle,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+								ref: iframeRef,
+								className: "puzzle-preview__frame",
+								srcDoc: createPreviewDocument(frameRootId),
+								title: `${config.label} component preview`,
+								onLoad: initializeFrame,
+								style: frameStyle
+							}),
+							showPlaceholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "puzzle-preview__placeholder",
+								style: placeholderStyle,
+								"aria-hidden": "true",
+								inert: true,
+								"data-preview-placeholder": "",
 								children
-							})
-						}), frameRoot)]
+							}),
+							frameRoot && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_theme_scope_context.ThemeScopeProvider, {
+								scopeId: themeScope?.scopeId ?? null,
+								theme: themeScope?.theme ?? "system",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									ref: contentRef,
+									style: contentStyle,
+									children
+								})
+							}), frameRoot)
+						]
 					})
 				}), activeTab === "code" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "puzzle-preview__code",

package/dist/components/utilities/preview/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["useEffect","useLayoutEffect","Background","useId","useThemeScope","useState","useRef","useRovingFocus","useCallback","cn","Icon","createPortal","ThemeScopeProvider","highlightCode"],"sources":["../../../../src/components/utilities/preview/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentProps,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { useRovingFocus } from \"@puzzle-ui/hooks\";\nimport { Icon } from \"@puzzle-ui/icons\";\nimport { ThemeScopeProvider, useThemeScope } from \"@puzzle-ui/theme/scope-context\";\n\nimport { Background } from \"../../layout/background\";\nimport { highlightCode } from \"./highlight\";\n\nimport \"./preview.css\";\n\ntype PreviewDevice = \"mobile\" | \"tablet\" | \"desktop\";\ntype PreviewTab = \"preview\" | \"code\";\n\ntype DeviceConfig = {\n  label: string;\n  width: number;\n  height: number;\n};\n\ntype PreviewAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\ntype PreviewJustify =\n  | \"start\"\n  | \"center\"\n  | \"end\"\n  | \"between\"\n  | \"around\"\n  | \"evenly\";\n\ntype PreviewProps = {\n  children: ReactNode;\n  className?: string;\n  defaultDevice?: PreviewDevice;\n  code?: string;\n  /** Frame height in pixels. Defaults to the selected device's height. */\n  height?: number;\n  /** Vertical alignment of the content within the frame. */\n  align?: PreviewAlign;\n  /** Horizontal distribution of the content within the frame. */\n  justify?: PreviewJustify;\n  /** Hides the device selector. The default device is still used. */\n  hideDevices?: boolean;\n};\n\nconst PREVIEW_DEVICES: Record<PreviewDevice, DeviceConfig> = {\n  mobile: { label: \"Mobile\", width: 390, height: 844 },\n  tablet: { label: \"Tablet\", width: 768, height: 1024 },\n  desktop: { label: \"Desktop\", width: 1024, height: 768 },\n};\n\nconst PREVIEW_DEVICE_ITEMS = (\n  Object.keys(PREVIEW_DEVICES) as PreviewDevice[]\n).map((id) => ({ id }));\n\nconst ALIGN_VALUES: Record<PreviewAlign, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  stretch: \"stretch\",\n};\n\nconst JUSTIFY_VALUES: Record<PreviewJustify, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  between: \"space-between\",\n  around: \"space-around\",\n  evenly: \"space-evenly\",\n};\n\nconst createPreviewDocument = (rootId: string) => `<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  </head>\n  <body>\n    <div id=\"${rootId}\"></div>\n  </body>\n</html>`;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nconst PreviewBackground = (props: ComponentProps<\"div\">) => (\n  <Background\n    pattern=\"blueprint\"\n    size={20}\n    majorSize={100}\n    lineWidth={1}\n    patternOpacity={0.25}\n    {...props}\n  />\n);\n\nconst Preview = ({\n  children,\n  className,\n  defaultDevice = \"mobile\",\n  code,\n  height,\n  align,\n  justify,\n  hideDevices = false,\n}: PreviewProps) => {\n  const generatedId = useId();\n  const frameRootId = `${generatedId}-root`;\n  const previewTabId = `${generatedId}-tab-preview`;\n  const codeTabId = `${generatedId}-tab-code`;\n  const panelId = `${generatedId}-panel`;\n\n  const themeScope = useThemeScope();\n\n  const [device, setDevice] = useState<PreviewDevice>(defaultDevice);\n  const [activeTab, setActiveTab] = useState<PreviewTab>(\"preview\");\n  const [frameRoot, setFrameRoot] = useState<HTMLElement | null>(null);\n  const [scale, setScale] = useState(1);\n  const [copied, setCopied] = useState(false);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const config = PREVIEW_DEVICES[device];\n  const frameHeight = height ?? config.height;\n  const hasCode = code !== undefined;\n  const [direction, setDirection] = useState<\"ltr\" | \"rtl\">(\"ltr\");\n  const sectionRef = useRef<HTMLElement>(null);\n  const isKeyboardNavigation = useRef(false);\n\n  useLayoutEffect(() => {\n    const section = sectionRef.current;\n\n    if (section) {\n      const isRtl =\n        getComputedStyle(section).direction === \"rtl\" ||\n        section.closest(\"[dir]\")?.getAttribute(\"dir\")?.toLowerCase() === \"rtl\";\n\n      setDirection(isRtl ? \"rtl\" : \"ltr\");\n    }\n  }, []);\n\n  const rovingFocus = useRovingFocus<HTMLButtonElement>({\n    items: hasCode ? [{ id: \"preview\" }, { id: \"code\" }] : [{ id: \"preview\" }],\n    dir: direction,\n    initialActiveId: activeTab,\n  });\n\n  const deviceFocus = useRovingFocus<HTMLButtonElement>({\n    items: PREVIEW_DEVICE_ITEMS,\n    dir: direction,\n    initialActiveId: device,\n  });\n\n  const handleTabKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    tab: PreviewTab,\n  ) => {\n    isKeyboardNavigation.current = true;\n\n    try {\n      rovingFocus.onItemKeyDown(event, tab);\n    } finally {\n      isKeyboardNavigation.current = false;\n    }\n  };\n\n  const handleTabFocus = (tab: PreviewTab) => {\n    rovingFocus.onItemFocus(tab);\n\n    if (isKeyboardNavigation.current) {\n      setActiveTab(tab);\n    }\n  };\n\n  const syncStyles = useCallback(() => {\n    const frameDocument = iframeRef.current?.contentDocument;\n\n    if (!frameDocument) return;\n\n    const frameHead = frameDocument.head;\n\n    frameHead\n      .querySelectorAll(\"[data-puzzle-preview-style]\")\n      .forEach((element) => element.remove());\n\n    document\n      .querySelectorAll(\n        [\n          \"head link[rel='stylesheet']\",\n          \"head style\",\n          \"style[data-puzzle-theme]\",\n          \"style[data-puzzle-theme-scope-style]\",\n        ].join(\", \"),\n      )\n      .forEach((element) => {\n        const clone = element.cloneNode(true) as HTMLElement;\n\n        clone.setAttribute(\"data-puzzle-preview-style\", \"\");\n        frameHead.appendChild(clone);\n      });\n\n    const sourceRoot = document.documentElement;\n    const targetRoot = frameDocument.documentElement;\n\n    targetRoot.style.cssText = sourceRoot.style.cssText;\n    targetRoot.className = sourceRoot.className;\n\n    Array.from(sourceRoot.attributes).forEach((attribute) => {\n      if (attribute.name === \"style\" || attribute.name === \"class\") {\n        return;\n      }\n\n      targetRoot.setAttribute(attribute.name, attribute.value);\n    });\n\n    const body = frameDocument.body;\n\n    body.className = document.body.className;\n    body.style.cssText = document.body.style.cssText;\n\n    targetRoot.style.setProperty(\"box-sizing\", \"border-box\", \"important\");\n    targetRoot.style.setProperty(\"width\", \"100%\", \"important\");\n    targetRoot.style.setProperty(\"height\", \"100%\", \"important\");\n    targetRoot.style.setProperty(\"min-height\", \"100%\", \"important\");\n    targetRoot.style.setProperty(\"margin\", \"0\", \"important\");\n    targetRoot.style.setProperty(\"overflow-x\", \"hidden\", \"important\");\n    targetRoot.style.setProperty(\"overflow-y\", \"auto\", \"important\");\n    targetRoot.style.setProperty(\"scrollbar-width\", \"none\", \"important\");\n    targetRoot.style.setProperty(\"-ms-overflow-style\", \"none\", \"important\");\n\n    body.style.setProperty(\"display\", \"block\", \"important\");\n    body.style.setProperty(\"position\", \"static\", \"important\");\n    body.style.setProperty(\"box-sizing\", \"border-box\", \"important\");\n    body.style.setProperty(\"width\", \"100%\", \"important\");\n    body.style.setProperty(\"height\", \"auto\", \"important\");\n    body.style.setProperty(\"min-height\", \"100%\", \"important\");\n    body.style.setProperty(\"margin\", \"0\", \"important\");\n    body.style.setProperty(\"overflow\", \"visible\", \"important\");\n\n    const previewRoot = frameDocument.getElementById(frameRootId);\n\n    previewRoot?.style.removeProperty(\"min-height\");\n\n    const scrollbarStyle = frameDocument.createElement(\"style\");\n\n    scrollbarStyle.setAttribute(\"data-puzzle-preview-style\", \"\");\n    scrollbarStyle.textContent = `\n      html,\n      body {\n        scrollbar-width: none !important;\n        -ms-overflow-style: none !important;\n      }\n\n      html::-webkit-scrollbar,\n      body::-webkit-scrollbar {\n        display: none !important;\n        width: 0 !important;\n        height: 0 !important;\n      }\n    `;\n\n    frameHead.appendChild(scrollbarStyle);\n  }, [frameRootId]);\n\n  const updateScale = useCallback(\n    (availableWidth: number) => {\n      const nextScale = Math.min(1, Math.max(0, availableWidth) / config.width);\n\n      setScale((current) =>\n        Math.abs(current - nextScale) < 0.001 ? current : nextScale,\n      );\n    },\n    [config.width],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n\n    if (!container) return;\n\n    const measure = () => {\n      const styles = window.getComputedStyle(container);\n      const horizontalPadding =\n        parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);\n\n      updateScale(container.clientWidth - horizontalPadding);\n    };\n\n    measure();\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (entry) {\n        updateScale(entry.contentRect.width);\n      }\n    });\n\n    observer.observe(container);\n\n    return () => observer.disconnect();\n  }, [updateScale]);\n\n  useEffect(() => {\n    const isStyleNode = (node: Node) =>\n      node instanceof Element &&\n      (node.matches(\"style, link[rel='stylesheet']\") ||\n        node.querySelector(\"style, link[rel='stylesheet']\") !== null);\n\n    const headObserver = new MutationObserver(syncStyles);\n\n    headObserver.observe(document.head, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n      attributes: true,\n    });\n\n    const bodyObserver = new MutationObserver((mutations) => {\n      const affectsStyles = mutations.some((mutation) => {\n        const target =\n          mutation.target instanceof Element\n            ? mutation.target\n            : mutation.target.parentElement;\n\n        return (\n          target?.closest(\n            \"style[data-puzzle-theme], style[data-puzzle-theme-scope-style]\",\n          ) != null ||\n          Array.from(mutation.addedNodes).some(isStyleNode) ||\n          Array.from(mutation.removedNodes).some(isStyleNode)\n        );\n      });\n\n      if (affectsStyles) {\n        syncStyles();\n      }\n    });\n\n    bodyObserver.observe(document.body, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n      attributes: true,\n      attributeFilter: [\"data-theme\"],\n    });\n\n    return () => {\n      headObserver.disconnect();\n      bodyObserver.disconnect();\n    };\n  }, [syncStyles]);\n\n  const initializeFrame = useCallback(() => {\n    const frameDocument = iframeRef.current?.contentDocument;\n    const root = frameDocument?.getElementById(frameRootId);\n\n    if (!root) return;\n\n    syncStyles();\n    setFrameRoot(root);\n  }, [frameRootId, syncStyles]);\n\n  useEffect(() => {\n    initializeFrame();\n  }, [initializeFrame]);\n\n  const handleCopyCode = useCallback(async () => {\n    if (code === undefined) return;\n\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n\n      if (copyTimeoutRef.current) {\n        clearTimeout(copyTimeoutRef.current);\n      }\n\n      copyTimeoutRef.current = setTimeout(() => {\n        setCopied(false);\n      }, 2000);\n    } catch {\n      setCopied(false);\n    }\n  }, [code]);\n\n  useEffect(\n    () => () => {\n      if (copyTimeoutRef.current) {\n        clearTimeout(copyTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (!hasCode && activeTab === \"code\") {\n      setActiveTab(\"preview\");\n    }\n  }, [activeTab, hasCode]);\n\n  const frameStyle: CSSProperties = {\n    width: config.width,\n    height: frameHeight,\n    transform: `scale(${scale})`,\n    transformOrigin: \"top left\",\n  };\n\n  const contentStyle: CSSProperties = {\n    display: \"flex\",\n    boxSizing: \"border-box\",\n    minHeight: \"100vh\",\n    alignItems: align ? ALIGN_VALUES[align] : undefined,\n    justifyContent: justify ? JUSTIFY_VALUES[justify] : undefined,\n  };\n\n  const viewportStyle: CSSProperties = {\n    width: config.width * scale,\n    aspectRatio: `${config.width} / ${frameHeight}`,\n  };\n\n  const panelProps = {\n    id: panelId,\n    role: \"tabpanel\",\n    \"aria-labelledby\": activeTab === \"preview\" ? previewTabId : codeTabId,\n  };\n\n  return (\n    <section ref={sectionRef} className={cn(\"puzzle-preview\", className)}>\n      <div className=\"puzzle-preview__toolbar\">\n        <div\n          className=\"puzzle-preview__tabs\"\n          role=\"tablist\"\n          aria-label=\"Preview view\"\n        >\n          <button\n            type=\"button\"\n            role=\"tab\"\n            id={previewTabId}\n            ref={rovingFocus.getItemRef(\"preview\")}\n            tabIndex={activeTab === \"preview\" ? 0 : -1}\n            onFocus={() => handleTabFocus(\"preview\")}\n            onKeyDown={(event) => handleTabKeyDown(event, \"preview\")}\n            aria-selected={activeTab === \"preview\"}\n            aria-controls={panelId}\n            className={cn(\n              \"puzzle-preview__tab\",\n              activeTab === \"preview\" && \"puzzle-preview__tab--active\",\n            )}\n            onClick={() => setActiveTab(\"preview\")}\n          >\n            Preview\n          </button>\n\n          {hasCode && (\n            <button\n              type=\"button\"\n              role=\"tab\"\n              id={codeTabId}\n              ref={rovingFocus.getItemRef(\"code\")}\n              tabIndex={activeTab === \"code\" ? 0 : -1}\n              onFocus={() => handleTabFocus(\"code\")}\n              onKeyDown={(event) => handleTabKeyDown(event, \"code\")}\n              aria-selected={activeTab === \"code\"}\n              aria-controls={panelId}\n              className={cn(\n                \"puzzle-preview__tab\",\n                activeTab === \"code\" && \"puzzle-preview__tab--active\",\n              )}\n              onClick={() => setActiveTab(\"code\")}\n            >\n              Code\n            </button>\n          )}\n        </div>\n\n        {activeTab === \"preview\" ? (\n          <div className=\"puzzle-preview__toolbar-actions\">\n            {!hideDevices && (\n              <div\n                className=\"puzzle-preview__devices\"\n                role=\"group\"\n                aria-label=\"Device size\"\n              >\n                {(Object.keys(PREVIEW_DEVICES) as PreviewDevice[]).map(\n                  (item) => (\n                    <button\n                      key={item}\n                      ref={deviceFocus.getItemRef(item)}\n                      type=\"button\"\n                      className={cn(\n                        \"puzzle-preview__device\",\n                        device === item && \"puzzle-preview__device--active\",\n                      )}\n                      aria-pressed={device === item}\n                      tabIndex={deviceFocus.getItemTabIndex(item)}\n                      onFocus={() => deviceFocus.onItemFocus(item)}\n                      onKeyDown={(event) =>\n                        deviceFocus.onItemKeyDown(event, item)\n                      }\n                      onClick={() => setDevice(item)}\n                    >\n                      {PREVIEW_DEVICES[item].label}\n                    </button>\n                  ),\n                )}\n              </div>\n            )}\n\n            <span className=\"puzzle-preview__dimensions\">\n              {config.width} × {frameHeight}\n            </span>\n          </div>\n        ) : (\n          <button\n            type=\"button\"\n            className=\"puzzle-preview__copy\"\n            onClick={handleCopyCode}\n            aria-label={copied ? \"Code copied\" : \"Copy code\"}\n          >\n            <Icon\n              name={copied ? \"tabler:check\" : \"tabler:copy\"}\n              size={16}\n              aria-hidden=\"true\"\n            />\n            <span>{copied ? \"Copied\" : \"Copy code\"}</span>\n          </button>\n        )}\n      </div>\n\n      <PreviewBackground {...panelProps} className=\"puzzle-preview__panel\">\n        <div\n          ref={containerRef}\n          className=\"puzzle-preview__stage\"\n          hidden={activeTab !== \"preview\"}\n        >\n          <div className=\"puzzle-preview__viewport\" style={viewportStyle}>\n            <iframe\n              ref={iframeRef}\n              className=\"puzzle-preview__frame\"\n              srcDoc={createPreviewDocument(frameRootId)}\n              title={`${config.label} component preview`}\n              onLoad={initializeFrame}\n              style={frameStyle}\n            />\n\n            {frameRoot &&\n              createPortal(\n                <ThemeScopeProvider\n                  scopeId={themeScope?.scopeId ?? null}\n                  theme={themeScope?.theme ?? \"system\"}\n                >\n                  <div style={contentStyle}>{children}</div>\n                </ThemeScopeProvider>,\n                frameRoot,\n              )}\n          </div>\n        </div>\n\n        {activeTab === \"code\" && (\n          <div className=\"puzzle-preview__code\">\n            <pre>\n              <code className=\"language-tsx\">\n                {code === undefined ? null : highlightCode(code)}\n              </code>\n            </pre>\n          </div>\n        )}\n      </PreviewBackground>\n\n      <span\n        className=\"puzzle-preview__copy-status\"\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        {copied ? \"Code copied to clipboard.\" : \"\"}\n      </span>\n    </section>\n  );\n};\n\nexport {\n  Preview,\n  type PreviewProps,\n  type PreviewDevice,\n  type PreviewAlign,\n  type PreviewJustify,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["useEffect","useLayoutEffect","Background","useId","useThemeScope","useState","useRef","BREAKPOINTS","useRovingFocus","useCallback","cn","Icon","createPortal","ThemeScopeProvider","highlightCode"],"sources":["../../../../src/components/utilities/preview/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentProps,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { useRovingFocus } from \"@puzzle-ui/hooks\";\nimport { Icon } from \"@puzzle-ui/icons\";\nimport { BREAKPOINTS } from \"@puzzle-ui/theme\";\nimport {\n  ThemeScopeProvider,\n  useThemeScope,\n} from \"@puzzle-ui/theme/scope-context\";\n\nimport { Background } from \"../../layout/background\";\nimport { highlightCode } from \"./highlight\";\n\nimport \"./preview.css\";\n\ntype PreviewDevice = \"mobile\" | \"tablet\" | \"desktop\";\ntype PreviewTab = \"preview\" | \"code\";\n\ntype DeviceConfig = {\n  label: string;\n  width: number;\n  height: number;\n};\n\ntype PreviewAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\ntype PreviewJustify =\n  | \"start\"\n  | \"center\"\n  | \"end\"\n  | \"between\"\n  | \"around\"\n  | \"evenly\";\n\ntype PreviewProps = {\n  children: ReactNode;\n  className?: string;\n  defaultDevice?: PreviewDevice;\n  code?: string;\n  /** Size to content (capped at mobile height) or the selected device. */\n  fit?: \"content\" | \"device\";\n  /** Frame height in pixels. Overrides fit. */\n  height?: number;\n  /** Space inside the preview frame, around the content. Numbers are pixels. */\n  padding?: number | string;\n  /** Vertical alignment of the content within the frame. */\n  align?: PreviewAlign;\n  /** Horizontal distribution of the content within the frame. */\n  justify?: PreviewJustify;\n  /** Hides the device selector. The default device is still used. */\n  hideDevices?: boolean;\n};\n\nconst PREVIEW_DEVICES: Record<PreviewDevice, DeviceConfig> = {\n  mobile: { label: \"Mobile\", width: 390, height: 844 },\n  tablet: { label: \"Tablet\", width: 768, height: 1024 },\n  desktop: { label: \"Desktop\", width: 1024, height: 768 },\n};\n\nconst PREVIEW_DEVICE_ITEMS = (\n  Object.keys(PREVIEW_DEVICES) as PreviewDevice[]\n).map((id) => ({ id }));\n\nconst ALIGN_VALUES: Record<PreviewAlign, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  stretch: \"stretch\",\n};\n\nconst JUSTIFY_VALUES: Record<PreviewJustify, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  between: \"space-between\",\n  around: \"space-around\",\n  evenly: \"space-evenly\",\n};\n\nconst createPreviewDocument = (rootId: string) => `<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  </head>\n  <body>\n    <div id=\"${rootId}\"></div>\n  </body>\n</html>`;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nconst PreviewBackground = (props: ComponentProps<\"div\">) => (\n  <Background\n    pattern=\"blueprint\"\n    size={20}\n    majorSize={100}\n    lineWidth={1}\n    patternOpacity={0.25}\n    {...props}\n  />\n);\n\nconst Preview = ({\n  children,\n  className,\n  defaultDevice = \"mobile\",\n  code,\n  fit = \"content\",\n  height,\n  padding = \"var(--puzzle-space-8, 2rem)\",\n  align = \"center\",\n  justify = \"center\",\n  hideDevices = false,\n}: PreviewProps) => {\n  const generatedId = useId();\n  const frameRootId = `${generatedId}-root`;\n  const previewTabId = `${generatedId}-tab-preview`;\n  const codeTabId = `${generatedId}-tab-code`;\n  const panelId = `${generatedId}-panel`;\n\n  const themeScope = useThemeScope();\n\n  const [device, setDevice] = useState<PreviewDevice>(defaultDevice);\n  const [activeTab, setActiveTab] = useState<PreviewTab>(\"preview\");\n  const [frameRoot, setFrameRoot] = useState<HTMLElement | null>(null);\n  const [scale, setScale] = useState(1);\n  const [copied, setCopied] = useState(false);\n  const [contentHeight, setContentHeight] = useState(PREVIEW_DEVICES.mobile.height);\n  const [contentMeasured, setContentMeasured] = useState(false);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const config = PREVIEW_DEVICES[device];\n  const fitsContent = height === undefined && fit === \"content\";\n  const frameHeight = height ?? (fitsContent ? contentHeight : config.height);\n  // Until the iframe content is measured, an inert inline copy sizes the viewport so SSR has no height jump.\n  const showPlaceholder = fitsContent && !contentMeasured;\n  const hasCode = code !== undefined;\n  const [direction, setDirection] = useState<\"ltr\" | \"rtl\">(\"ltr\");\n  const [desktopControlsVisible, setDesktopControlsVisible] = useState(true);\n  const sectionRef = useRef<HTMLElement>(null);\n  const isKeyboardNavigation = useRef(false);\n\n  useEffect(() => {\n    const query = window.matchMedia(`(min-width: ${BREAKPOINTS.desktop}px)`);\n    const update = () => setDesktopControlsVisible(query.matches);\n    update();\n    query.addEventListener(\"change\", update);\n    return () => query.removeEventListener(\"change\", update);\n  }, []);\n\n  useLayoutEffect(() => {\n    const section = sectionRef.current;\n\n    if (section) {\n      const isRtl =\n        getComputedStyle(section).direction === \"rtl\" ||\n        section.closest(\"[dir]\")?.getAttribute(\"dir\")?.toLowerCase() === \"rtl\";\n\n      setDirection(isRtl ? \"rtl\" : \"ltr\");\n    }\n  }, []);\n\n  const rovingFocus = useRovingFocus<HTMLButtonElement>({\n    items: hasCode ? [{ id: \"preview\" }, { id: \"code\" }] : [{ id: \"preview\" }],\n    dir: direction,\n    initialActiveId: activeTab,\n  });\n\n  const deviceFocus = useRovingFocus<HTMLButtonElement>({\n    items: PREVIEW_DEVICE_ITEMS.map((item) => ({\n      ...item,\n      disabled: item.id === \"desktop\" && !desktopControlsVisible,\n    })),\n    dir: direction,\n    initialActiveId: device,\n  });\n\n  const handleTabKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    tab: PreviewTab,\n  ) => {\n    isKeyboardNavigation.current = true;\n\n    try {\n      rovingFocus.onItemKeyDown(event, tab);\n    } finally {\n      isKeyboardNavigation.current = false;\n    }\n  };\n\n  const handleTabFocus = (tab: PreviewTab) => {\n    rovingFocus.onItemFocus(tab);\n\n    if (isKeyboardNavigation.current) {\n      setActiveTab(tab);\n    }\n  };\n\n  const syncStyles = useCallback(() => {\n    const frameDocument = iframeRef.current?.contentDocument;\n\n    if (!frameDocument) return;\n\n    const frameHead = frameDocument.head;\n\n    frameHead\n      .querySelectorAll(\"[data-puzzle-preview-style]\")\n      .forEach((element) => element.remove());\n\n    document\n      .querySelectorAll(\n        [\n          \"head link[rel='stylesheet']\",\n          \"head style\",\n          \"style[data-puzzle-theme]\",\n          \"style[data-puzzle-theme-scope-style]\",\n        ].join(\", \"),\n      )\n      .forEach((element) => {\n        const clone = element.cloneNode(true) as HTMLElement;\n\n        clone.setAttribute(\"data-puzzle-preview-style\", \"\");\n        frameHead.appendChild(clone);\n      });\n\n    const sourceRoot = document.documentElement;\n    const targetRoot = frameDocument.documentElement;\n\n    targetRoot.style.cssText = sourceRoot.style.cssText;\n    targetRoot.className = sourceRoot.className;\n\n    Array.from(sourceRoot.attributes).forEach((attribute) => {\n      if (attribute.name === \"style\" || attribute.name === \"class\") {\n        return;\n      }\n\n      targetRoot.setAttribute(attribute.name, attribute.value);\n    });\n\n    const body = frameDocument.body;\n\n    body.className = document.body.className;\n    body.style.cssText = document.body.style.cssText;\n\n    targetRoot.style.setProperty(\"box-sizing\", \"border-box\", \"important\");\n    targetRoot.style.setProperty(\"width\", \"100%\", \"important\");\n    targetRoot.style.setProperty(\"height\", \"100%\", \"important\");\n    targetRoot.style.setProperty(\"min-height\", \"100%\", \"important\");\n    targetRoot.style.setProperty(\"margin\", \"0\", \"important\");\n    targetRoot.style.setProperty(\"padding\", \"0\", \"important\");\n    targetRoot.style.setProperty(\"overflow-x\", \"hidden\", \"important\");\n    targetRoot.style.setProperty(\"overflow-y\", \"auto\", \"important\");\n    targetRoot.style.setProperty(\"scrollbar-width\", \"none\", \"important\");\n    targetRoot.style.setProperty(\"-ms-overflow-style\", \"none\", \"important\");\n\n    body.style.setProperty(\"display\", \"block\", \"important\");\n    body.style.setProperty(\"position\", \"static\", \"important\");\n    body.style.setProperty(\"box-sizing\", \"border-box\", \"important\");\n    body.style.setProperty(\"width\", \"100%\", \"important\");\n    body.style.setProperty(\"height\", \"auto\", \"important\");\n    body.style.setProperty(\"min-height\", \"100%\", \"important\");\n    body.style.setProperty(\"margin\", \"0\", \"important\");\n    body.style.setProperty(\"padding\", \"0\", \"important\");\n    body.style.setProperty(\"overflow\", \"visible\", \"important\");\n\n    const previewRoot = frameDocument.getElementById(frameRootId);\n\n    previewRoot?.style.removeProperty(\"min-height\");\n\n    const scrollbarStyle = frameDocument.createElement(\"style\");\n\n    scrollbarStyle.setAttribute(\"data-puzzle-preview-style\", \"\");\n    scrollbarStyle.textContent = `\n      html,\n      body {\n        scrollbar-width: none !important;\n        -ms-overflow-style: none !important;\n      }\n\n      html::-webkit-scrollbar,\n      body::-webkit-scrollbar {\n        display: none !important;\n        width: 0 !important;\n        height: 0 !important;\n      }\n    `;\n\n    frameHead.appendChild(scrollbarStyle);\n  }, [frameRootId]);\n\n  const updateScale = useCallback(\n    (availableWidth: number) => {\n      if (availableWidth <= 0) return;\n\n      const nextScale = Math.min(1, Math.max(0, availableWidth) / config.width);\n\n      setScale((current) =>\n        Math.abs(current - nextScale) < 0.001 ? current : nextScale,\n      );\n    },\n    [config.width],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n\n    if (!container) return;\n\n    const measure = () => {\n      const styles = window.getComputedStyle(container);\n      const horizontalPadding =\n        (Number.parseFloat(styles.paddingLeft) || 0) +\n        (Number.parseFloat(styles.paddingRight) || 0);\n\n      updateScale(container.clientWidth - horizontalPadding);\n    };\n\n    measure();\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (entry) {\n        updateScale(entry.contentRect.width);\n      }\n    });\n\n    observer.observe(container);\n\n    return () => observer.disconnect();\n  }, [updateScale]);\n\n  useEffect(() => {\n    const isStyleNode = (node: Node) =>\n      node instanceof Element &&\n      (node.matches(\"style, link[rel='stylesheet']\") ||\n        node.querySelector(\"style, link[rel='stylesheet']\") !== null);\n\n    const headObserver = new MutationObserver(syncStyles);\n\n    headObserver.observe(document.head, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n      attributes: true,\n    });\n\n    const bodyObserver = new MutationObserver((mutations) => {\n      const affectsStyles = mutations.some((mutation) => {\n        const target =\n          mutation.target instanceof Element\n            ? mutation.target\n            : mutation.target.parentElement;\n\n        return (\n          target?.closest(\n            \"style[data-puzzle-theme], style[data-puzzle-theme-scope-style]\",\n          ) != null ||\n          Array.from(mutation.addedNodes).some(isStyleNode) ||\n          Array.from(mutation.removedNodes).some(isStyleNode)\n        );\n      });\n\n      if (affectsStyles) {\n        syncStyles();\n      }\n    });\n\n    bodyObserver.observe(document.body, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n      attributes: true,\n      attributeFilter: [\"data-theme\"],\n    });\n\n    return () => {\n      headObserver.disconnect();\n      bodyObserver.disconnect();\n    };\n  }, [syncStyles]);\n\n  const initializeFrame = useCallback(() => {\n    const frameDocument = iframeRef.current?.contentDocument;\n    const root = frameDocument?.getElementById(frameRootId);\n\n    if (!root) return;\n\n    syncStyles();\n    setFrameRoot(root);\n  }, [frameRootId, syncStyles]);\n\n  useEffect(() => {\n    initializeFrame();\n  }, [initializeFrame]);\n\n  useIsomorphicLayoutEffect(() => {\n    const content = contentRef.current;\n\n    if (!fitsContent || !frameRoot || !content || activeTab !== \"preview\") return;\n\n    const measure = () => {\n      const measuredHeight = Math.ceil(\n        Math.max(content.getBoundingClientRect().height, content.scrollHeight),\n      );\n\n      setContentHeight(\n        Math.min(PREVIEW_DEVICES.mobile.height, Math.max(1, measuredHeight)),\n      );\n      setContentMeasured(true);\n    };\n\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n\n    const mutations = new MutationObserver(measure);\n    mutations.observe(content, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n      attributes: true,\n    });\n\n    return () => {\n      observer.disconnect();\n      mutations.disconnect();\n    };\n  }, [activeTab, fitsContent, frameRoot]);\n\n  const handleCopyCode = useCallback(async () => {\n    if (code === undefined) return;\n\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n\n      if (copyTimeoutRef.current) {\n        clearTimeout(copyTimeoutRef.current);\n      }\n\n      copyTimeoutRef.current = setTimeout(() => {\n        setCopied(false);\n      }, 2000);\n    } catch {\n      setCopied(false);\n    }\n  }, [code]);\n\n  useEffect(\n    () => () => {\n      if (copyTimeoutRef.current) {\n        clearTimeout(copyTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (!hasCode && activeTab === \"code\") {\n      setActiveTab(\"preview\");\n    }\n  }, [activeTab, hasCode]);\n\n  const frameStyle: CSSProperties = {\n    width: config.width,\n    height: frameHeight,\n    transform: `scale(${scale})`,\n    transformOrigin: \"top left\",\n    visibility: showPlaceholder ? \"hidden\" : undefined,\n  };\n\n  const contentStyle: CSSProperties = {\n    display: \"flex\",\n    boxSizing: \"border-box\",\n    padding,\n    minHeight: fitsContent ? undefined : \"100vh\",\n    alignItems: align ? ALIGN_VALUES[align] : undefined,\n    justifyContent: justify ? JUSTIFY_VALUES[justify] : undefined,\n  };\n\n  const viewportStyle: CSSProperties = {\n    width: config.width * scale,\n    height: showPlaceholder ? undefined : frameHeight * scale,\n    maxHeight: showPlaceholder\n      ? PREVIEW_DEVICES.mobile.height * scale\n      : undefined,\n  };\n\n  const placeholderStyle: CSSProperties = {\n    ...contentStyle,\n    width: config.width,\n    zoom: scale === 1 ? undefined : scale,\n  };\n\n  const panelProps = {\n    id: panelId,\n    role: \"tabpanel\",\n    \"aria-labelledby\": activeTab === \"preview\" ? previewTabId : codeTabId,\n  };\n\n  return (\n    <section ref={sectionRef} className={cn(\"puzzle-preview\", className)}>\n      <div className=\"puzzle-preview__toolbar\">\n        <div\n          className=\"puzzle-preview__tabs\"\n          role=\"tablist\"\n          aria-label=\"Preview view\"\n        >\n          <button\n            type=\"button\"\n            role=\"tab\"\n            id={previewTabId}\n            ref={rovingFocus.getItemRef(\"preview\")}\n            tabIndex={activeTab === \"preview\" ? 0 : -1}\n            onFocus={() => handleTabFocus(\"preview\")}\n            onKeyDown={(event) => handleTabKeyDown(event, \"preview\")}\n            aria-selected={activeTab === \"preview\"}\n            aria-controls={panelId}\n            className={cn(\n              \"puzzle-preview__tab\",\n              activeTab === \"preview\" && \"puzzle-preview__tab--active\",\n            )}\n            onClick={() => setActiveTab(\"preview\")}\n          >\n            Preview\n          </button>\n\n          {hasCode && (\n            <button\n              type=\"button\"\n              role=\"tab\"\n              id={codeTabId}\n              ref={rovingFocus.getItemRef(\"code\")}\n              tabIndex={activeTab === \"code\" ? 0 : -1}\n              onFocus={() => handleTabFocus(\"code\")}\n              onKeyDown={(event) => handleTabKeyDown(event, \"code\")}\n              aria-selected={activeTab === \"code\"}\n              aria-controls={panelId}\n              className={cn(\n                \"puzzle-preview__tab\",\n                activeTab === \"code\" && \"puzzle-preview__tab--active\",\n              )}\n              onClick={() => setActiveTab(\"code\")}\n            >\n              Code\n            </button>\n          )}\n        </div>\n\n        {activeTab === \"preview\" ? (\n          <div className=\"puzzle-preview__toolbar-actions\">\n            {!hideDevices && (\n              <div\n                className=\"puzzle-preview__devices\"\n                role=\"group\"\n                aria-label=\"Device size\"\n              >\n                {(Object.keys(PREVIEW_DEVICES) as PreviewDevice[]).map(\n                  (item) => (\n                    <button\n                      key={item}\n                      data-device={item}\n                      ref={deviceFocus.getItemRef(item)}\n                      type=\"button\"\n                      className={cn(\n                        \"puzzle-preview__device\",\n                        device === item && \"puzzle-preview__device--active\",\n                      )}\n                      aria-pressed={device === item}\n                      tabIndex={deviceFocus.getItemTabIndex(item)}\n                      onFocus={() => deviceFocus.onItemFocus(item)}\n                      onKeyDown={(event) =>\n                        deviceFocus.onItemKeyDown(event, item)\n                      }\n                      onClick={() => setDevice(item)}\n                    >\n                      {PREVIEW_DEVICES[item].label}\n                    </button>\n                  ),\n                )}\n              </div>\n            )}\n\n            <span className=\"puzzle-preview__dimensions\">\n              {config.width} × {frameHeight}\n            </span>\n          </div>\n        ) : (\n          <button\n            type=\"button\"\n            className=\"puzzle-preview__copy\"\n            onClick={handleCopyCode}\n            aria-label={copied ? \"Code copied\" : \"Copy code\"}\n          >\n            <Icon\n              name={copied ? \"tabler:check\" : \"tabler:copy\"}\n              size={16}\n              aria-hidden=\"true\"\n            />\n            <span>{copied ? \"Copied\" : \"Copy code\"}</span>\n          </button>\n        )}\n      </div>\n\n      <PreviewBackground {...panelProps} className=\"puzzle-preview__panel\">\n        <div\n          ref={containerRef}\n          className=\"puzzle-preview__stage\"\n          hidden={activeTab !== \"preview\"}\n        >\n          <div className=\"puzzle-preview__viewport\" style={viewportStyle}>\n            <iframe\n              ref={iframeRef}\n              className=\"puzzle-preview__frame\"\n              srcDoc={createPreviewDocument(frameRootId)}\n              title={`${config.label} component preview`}\n              onLoad={initializeFrame}\n              style={frameStyle}\n            />\n\n            {showPlaceholder && (\n              <div\n                className=\"puzzle-preview__placeholder\"\n                style={placeholderStyle}\n                aria-hidden=\"true\"\n                inert\n                data-preview-placeholder=\"\"\n              >\n                {children}\n              </div>\n            )}\n\n            {frameRoot &&\n              createPortal(\n                <ThemeScopeProvider\n                  scopeId={themeScope?.scopeId ?? null}\n                  theme={themeScope?.theme ?? \"system\"}\n                >\n                  <div ref={contentRef} style={contentStyle}>{children}</div>\n                </ThemeScopeProvider>,\n                frameRoot,\n              )}\n          </div>\n        </div>\n\n        {activeTab === \"code\" && (\n          <div className=\"puzzle-preview__code\">\n            <pre>\n              <code className=\"language-tsx\">\n                {code === undefined ? null : highlightCode(code)}\n              </code>\n            </pre>\n          </div>\n        )}\n      </PreviewBackground>\n\n      <span\n        className=\"puzzle-preview__copy-status\"\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        {copied ? \"Code copied to clipboard.\" : \"\"}\n      </span>\n    </section>\n  );\n};\n\nexport {\n  Preview,\n  type PreviewProps,\n  type PreviewDevice,\n  type PreviewAlign,\n  type PreviewJustify,\n};\n"],"mappings":"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"}

package/dist/components/utilities/preview/index.d.cts

@@ -7,8 +7,12 @@ type PreviewProps = {
   className?: string;
   defaultDevice?: PreviewDevice;
   code?: string;
-  /** Frame height in pixels. Defaults to the selected device's height. */
+  /** Size to content (capped at mobile height) or the selected device. */
+  fit?: "content" | "device";
+  /** Frame height in pixels. Overrides fit. */
   height?: number;
+  /** Space inside the preview frame, around the content. Numbers are pixels. */
+  padding?: number | string;
   /** Vertical alignment of the content within the frame. */
   align?: PreviewAlign;
   /** Horizontal distribution of the content within the frame. */
@@ -16,5 +20,5 @@ type PreviewProps = {
   /** Hides the device selector. The default device is still used. */
   hideDevices?: boolean;
 };
-declare const Preview: ({ children, className, defaultDevice, code, height, align, justify, hideDevices }: PreviewProps) => import("react").JSX.Element;
+declare const Preview: ({ children, className, defaultDevice, code, fit, height, padding, align, justify, hideDevices }: PreviewProps) => import("react").JSX.Element;
 export { Preview, type PreviewAlign, type PreviewDevice, type PreviewJustify, type PreviewProps };

package/dist/components/utilities/preview/index.d.ts

@@ -7,8 +7,12 @@ type PreviewProps = {
   className?: string;
   defaultDevice?: PreviewDevice;
   code?: string;
-  /** Frame height in pixels. Defaults to the selected device's height. */
+  /** Size to content (capped at mobile height) or the selected device. */
+  fit?: "content" | "device";
+  /** Frame height in pixels. Overrides fit. */
   height?: number;
+  /** Space inside the preview frame, around the content. Numbers are pixels. */
+  padding?: number | string;
   /** Vertical alignment of the content within the frame. */
   align?: PreviewAlign;
   /** Horizontal distribution of the content within the frame. */
@@ -16,5 +20,5 @@ type PreviewProps = {
   /** Hides the device selector. The default device is still used. */
   hideDevices?: boolean;
 };
-declare const Preview: ({ children, className, defaultDevice, code, height, align, justify, hideDevices }: PreviewProps) => import("react").JSX.Element;
+declare const Preview: ({ children, className, defaultDevice, code, fit, height, padding, align, justify, hideDevices }: PreviewProps) => import("react").JSX.Element;
 export { Preview, type PreviewAlign, type PreviewDevice, type PreviewJustify, type PreviewProps };

package/dist/components/utilities/preview/index.js

@@ -9,6 +9,7 @@ import { useRovingFocus } from "@puzzle-ui/hooks";
 import { createPortal } from "react-dom";
 import { Icon } from "@puzzle-ui/icons";
 import { ThemeScopeProvider, useThemeScope } from "@puzzle-ui/theme/scope-context";
+import { BREAKPOINTS as BREAKPOINTS$1 } from "@puzzle-ui/theme";
 // src/components/utilities/preview/index.tsx
 const PREVIEW_DEVICES = {
 	mobile: {
@@ -61,7 +62,7 @@ const PreviewBackground = (props) => /* @__PURE__ */ jsx(Background, {
 	patternOpacity: .25,
 	...props
 });
-const Preview = ({ children, className, defaultDevice = "mobile", code, height, align, justify, hideDevices = false }) => {
+const Preview = ({ children, className, defaultDevice = "mobile", code, fit = "content", height, padding = "var(--puzzle-space-8, 2rem)", align = "center", justify = "center", hideDevices = false }) => {
 	const generatedId = useId();
 	const frameRootId = `${generatedId}-root`;
 	const previewTabId = `${generatedId}-tab-preview`;
@@ -73,15 +74,28 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 	const [frameRoot, setFrameRoot] = useState(null);
 	const [scale, setScale] = useState(1);
 	const [copied, setCopied] = useState(false);
+	const [contentHeight, setContentHeight] = useState(PREVIEW_DEVICES.mobile.height);
+	const [contentMeasured, setContentMeasured] = useState(false);
 	const containerRef = useRef(null);
+	const contentRef = useRef(null);
 	const iframeRef = useRef(null);
 	const copyTimeoutRef = useRef(null);
 	const config = PREVIEW_DEVICES[device];
-	const frameHeight = height ?? config.height;
+	const fitsContent = height === void 0 && fit === "content";
+	const frameHeight = height ?? (fitsContent ? contentHeight : config.height);
+	const showPlaceholder = fitsContent && !contentMeasured;
 	const hasCode = code !== void 0;
 	const [direction, setDirection] = useState("ltr");
+	const [desktopControlsVisible, setDesktopControlsVisible] = useState(true);
 	const sectionRef = useRef(null);
 	const isKeyboardNavigation = useRef(false);
+	useEffect(() => {
+		const query = window.matchMedia(`(min-width: ${BREAKPOINTS$1.desktop}px)`);
+		const update = () => setDesktopControlsVisible(query.matches);
+		update();
+		query.addEventListener("change", update);
+		return () => query.removeEventListener("change", update);
+	}, []);
 	useLayoutEffect(() => {
 		const section = sectionRef.current;
 		if (section) {
@@ -95,7 +109,10 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		initialActiveId: activeTab
 	});
 	const deviceFocus = useRovingFocus({
-		items: PREVIEW_DEVICE_ITEMS,
+		items: PREVIEW_DEVICE_ITEMS.map((item) => ({
+			...item,
+			disabled: item.id === "desktop" && !desktopControlsVisible
+		})),
 		dir: direction,
 		initialActiveId: device
 	});
@@ -142,6 +159,7 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		targetRoot.style.setProperty("height", "100%", "important");
 		targetRoot.style.setProperty("min-height", "100%", "important");
 		targetRoot.style.setProperty("margin", "0", "important");
+		targetRoot.style.setProperty("padding", "0", "important");
 		targetRoot.style.setProperty("overflow-x", "hidden", "important");
 		targetRoot.style.setProperty("overflow-y", "auto", "important");
 		targetRoot.style.setProperty("scrollbar-width", "none", "important");
@@ -153,6 +171,7 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		body.style.setProperty("height", "auto", "important");
 		body.style.setProperty("min-height", "100%", "important");
 		body.style.setProperty("margin", "0", "important");
+		body.style.setProperty("padding", "0", "important");
 		body.style.setProperty("overflow", "visible", "important");
 		frameDocument.getElementById(frameRootId)?.style.removeProperty("min-height");
 		const scrollbarStyle = frameDocument.createElement("style");
@@ -174,6 +193,7 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		frameHead.appendChild(scrollbarStyle);
 	}, [frameRootId]);
 	const updateScale = useCallback((availableWidth) => {
+		if (availableWidth <= 0) return;
 		const nextScale = Math.min(1, Math.max(0, availableWidth) / config.width);
 		setScale((current) => Math.abs(current - nextScale) < .001 ? current : nextScale);
 	}, [config.width]);
@@ -182,7 +202,7 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		if (!container) return;
 		const measure = () => {
 			const styles = window.getComputedStyle(container);
-			const horizontalPadding = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
+			const horizontalPadding = (Number.parseFloat(styles.paddingLeft) || 0) + (Number.parseFloat(styles.paddingRight) || 0);
 			updateScale(container.clientWidth - horizontalPadding);
 		};
 		measure();
@@ -228,6 +248,33 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 	useEffect(() => {
 		initializeFrame();
 	}, [initializeFrame]);
+	useIsomorphicLayoutEffect(() => {
+		const content = contentRef.current;
+		if (!fitsContent || !frameRoot || !content || activeTab !== "preview") return;
+		const measure = () => {
+			const measuredHeight = Math.ceil(Math.max(content.getBoundingClientRect().height, content.scrollHeight));
+			setContentHeight(Math.min(PREVIEW_DEVICES.mobile.height, Math.max(1, measuredHeight)));
+			setContentMeasured(true);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(content);
+		const mutations = new MutationObserver(measure);
+		mutations.observe(content, {
+			subtree: true,
+			childList: true,
+			characterData: true,
+			attributes: true
+		});
+		return () => {
+			observer.disconnect();
+			mutations.disconnect();
+		};
+	}, [
+		activeTab,
+		fitsContent,
+		frameRoot
+	]);
 	const handleCopyCode = useCallback(async () => {
 		if (code === void 0) return;
 		try {
@@ -251,18 +298,26 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 		width: config.width,
 		height: frameHeight,
 		transform: `scale(${scale})`,
-		transformOrigin: "top left"
+		transformOrigin: "top left",
+		visibility: showPlaceholder ? "hidden" : void 0
 	};
 	const contentStyle = {
 		display: "flex",
 		boxSizing: "border-box",
-		minHeight: "100vh",
+		padding,
+		minHeight: fitsContent ? void 0 : "100vh",
 		alignItems: align ? ALIGN_VALUES[align] : void 0,
 		justifyContent: justify ? JUSTIFY_VALUES[justify] : void 0
 	};
 	const viewportStyle = {
 		width: config.width * scale,
-		aspectRatio: `${config.width} / ${frameHeight}`
+		height: showPlaceholder ? void 0 : frameHeight * scale,
+		maxHeight: showPlaceholder ? PREVIEW_DEVICES.mobile.height * scale : void 0
+	};
+	const placeholderStyle = {
+		...contentStyle,
+		width: config.width,
+		zoom: scale === 1 ? void 0 : scale
 	};
 	const panelProps = {
 		id: panelId,
@@ -313,6 +368,7 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 						role: "group",
 						"aria-label": "Device size",
 						children: Object.keys(PREVIEW_DEVICES).map((item) => /* @__PURE__ */ jsx("button", {
+							"data-device": item,
 							ref: deviceFocus.getItemRef(item),
 							type: "button",
 							className: cn("puzzle-preview__device", device === item && "puzzle-preview__device--active"),
@@ -353,21 +409,33 @@ const Preview = ({ children, className, defaultDevice = "mobile", code, height,
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "puzzle-preview__viewport",
 						style: viewportStyle,
-						children: [/* @__PURE__ */ jsx("iframe", {
-							ref: iframeRef,
-							className: "puzzle-preview__frame",
-							srcDoc: createPreviewDocument(frameRootId),
-							title: `${config.label} component preview`,
-							onLoad: initializeFrame,
-							style: frameStyle
-						}), frameRoot && createPortal(/* @__PURE__ */ jsx(ThemeScopeProvider, {
-							scopeId: themeScope?.scopeId ?? null,
-							theme: themeScope?.theme ?? "system",
-							children: /* @__PURE__ */ jsx("div", {
-								style: contentStyle,
+						children: [
+							/* @__PURE__ */ jsx("iframe", {
+								ref: iframeRef,
+								className: "puzzle-preview__frame",
+								srcDoc: createPreviewDocument(frameRootId),
+								title: `${config.label} component preview`,
+								onLoad: initializeFrame,
+								style: frameStyle
+							}),
+							showPlaceholder && /* @__PURE__ */ jsx("div", {
+								className: "puzzle-preview__placeholder",
+								style: placeholderStyle,
+								"aria-hidden": "true",
+								inert: true,
+								"data-preview-placeholder": "",
 								children
-							})
-						}), frameRoot)]
+							}),
+							frameRoot && createPortal(/* @__PURE__ */ jsx(ThemeScopeProvider, {
+								scopeId: themeScope?.scopeId ?? null,
+								theme: themeScope?.theme ?? "system",
+								children: /* @__PURE__ */ jsx("div", {
+									ref: contentRef,
+									style: contentStyle,
+									children
+								})
+							}), frameRoot)
+						]
 					})
 				}), activeTab === "code" && /* @__PURE__ */ jsx("div", {
 					className: "puzzle-preview__code",