@puzzle-ui/ui 0.0.0-stage → 0.2.0

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

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

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

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+type PreviewDevice = "mobile" | "tablet" | "desktop";
+type PreviewAlign = "start" | "center" | "end" | "stretch";
+type PreviewJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+type PreviewProps = {
+  children: ReactNode;
+  className?: string;
+  defaultDevice?: PreviewDevice;
+  code?: string;
+  /** Frame height in pixels. Defaults to the selected device's height. */
+  height?: number;
+  /** Vertical alignment of the content within the frame. */
+  align?: PreviewAlign;
+  /** Horizontal distribution of the content within the frame. */
+  justify?: PreviewJustify;
+  /** 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;
+export { Preview, type PreviewAlign, type PreviewDevice, type PreviewJustify, type PreviewProps };

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

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+type PreviewDevice = "mobile" | "tablet" | "desktop";
+type PreviewAlign = "start" | "center" | "end" | "stretch";
+type PreviewJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+type PreviewProps = {
+  children: ReactNode;
+  className?: string;
+  defaultDevice?: PreviewDevice;
+  code?: string;
+  /** Frame height in pixels. Defaults to the selected device's height. */
+  height?: number;
+  /** Vertical alignment of the content within the frame. */
+  align?: PreviewAlign;
+  /** Horizontal distribution of the content within the frame. */
+  justify?: PreviewJustify;
+  /** 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;
+export { Preview, type PreviewAlign, type PreviewDevice, type PreviewJustify, type PreviewProps };

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

@@ -0,0 +1,391 @@
+"use client";
+import { Background } from "../../layout/background/index.js";
+import { highlightCode } from "./highlight.js";
+import "./preview.css";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+// src/components/utilities/preview/index.tsx
+const PREVIEW_DEVICES = {
+	mobile: {
+		label: "Mobile",
+		width: 390,
+		height: 844
+	},
+	tablet: {
+		label: "Tablet",
+		width: 768,
+		height: 1024
+	},
+	desktop: {
+		label: "Desktop",
+		width: 1024,
+		height: 768
+	}
+};
+const PREVIEW_DEVICE_ITEMS = Object.keys(PREVIEW_DEVICES).map((id) => ({ id }));
+const ALIGN_VALUES = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	stretch: "stretch"
+};
+const JUSTIFY_VALUES = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	between: "space-between",
+	around: "space-around",
+	evenly: "space-evenly"
+};
+const createPreviewDocument = (rootId) => `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="${rootId}"></div>
+  </body>
+</html>`;
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const PreviewBackground = (props) => /* @__PURE__ */ jsx(Background, {
+	pattern: "blueprint",
+	size: 20,
+	majorSize: 100,
+	lineWidth: 1,
+	patternOpacity: .25,
+	...props
+});
+const Preview = ({ children, className, defaultDevice = "mobile", code, height, align, justify, hideDevices = false }) => {
+	const generatedId = useId();
+	const frameRootId = `${generatedId}-root`;
+	const previewTabId = `${generatedId}-tab-preview`;
+	const codeTabId = `${generatedId}-tab-code`;
+	const panelId = `${generatedId}-panel`;
+	const themeScope = useThemeScope();
+	const [device, setDevice] = useState(defaultDevice);
+	const [activeTab, setActiveTab] = useState("preview");
+	const [frameRoot, setFrameRoot] = useState(null);
+	const [scale, setScale] = useState(1);
+	const [copied, setCopied] = useState(false);
+	const containerRef = useRef(null);
+	const iframeRef = useRef(null);
+	const copyTimeoutRef = useRef(null);
+	const config = PREVIEW_DEVICES[device];
+	const frameHeight = height ?? config.height;
+	const hasCode = code !== void 0;
+	const [direction, setDirection] = useState("ltr");
+	const sectionRef = useRef(null);
+	const isKeyboardNavigation = useRef(false);
+	useLayoutEffect(() => {
+		const section = sectionRef.current;
+		if (section) {
+			const isRtl = getComputedStyle(section).direction === "rtl" || section.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+			setDirection(isRtl ? "rtl" : "ltr");
+		}
+	}, []);
+	const rovingFocus = useRovingFocus({
+		items: hasCode ? [{ id: "preview" }, { id: "code" }] : [{ id: "preview" }],
+		dir: direction,
+		initialActiveId: activeTab
+	});
+	const deviceFocus = useRovingFocus({
+		items: PREVIEW_DEVICE_ITEMS,
+		dir: direction,
+		initialActiveId: device
+	});
+	const handleTabKeyDown = (event, tab) => {
+		isKeyboardNavigation.current = true;
+		try {
+			rovingFocus.onItemKeyDown(event, tab);
+		} finally {
+			isKeyboardNavigation.current = false;
+		}
+	};
+	const handleTabFocus = (tab) => {
+		rovingFocus.onItemFocus(tab);
+		if (isKeyboardNavigation.current) setActiveTab(tab);
+	};
+	const syncStyles = useCallback(() => {
+		const frameDocument = iframeRef.current?.contentDocument;
+		if (!frameDocument) return;
+		const frameHead = frameDocument.head;
+		frameHead.querySelectorAll("[data-puzzle-preview-style]").forEach((element) => element.remove());
+		document.querySelectorAll([
+			"head link[rel='stylesheet']",
+			"head style",
+			"style[data-puzzle-theme]",
+			"style[data-puzzle-theme-scope-style]"
+		].join(", ")).forEach((element) => {
+			const clone = element.cloneNode(true);
+			clone.setAttribute("data-puzzle-preview-style", "");
+			frameHead.appendChild(clone);
+		});
+		const sourceRoot = document.documentElement;
+		const targetRoot = frameDocument.documentElement;
+		targetRoot.style.cssText = sourceRoot.style.cssText;
+		targetRoot.className = sourceRoot.className;
+		Array.from(sourceRoot.attributes).forEach((attribute) => {
+			if (attribute.name === "style" || attribute.name === "class") return;
+			targetRoot.setAttribute(attribute.name, attribute.value);
+		});
+		const body = frameDocument.body;
+		body.className = document.body.className;
+		body.style.cssText = document.body.style.cssText;
+		targetRoot.style.setProperty("box-sizing", "border-box", "important");
+		targetRoot.style.setProperty("width", "100%", "important");
+		targetRoot.style.setProperty("height", "100%", "important");
+		targetRoot.style.setProperty("min-height", "100%", "important");
+		targetRoot.style.setProperty("margin", "0", "important");
+		targetRoot.style.setProperty("overflow-x", "hidden", "important");
+		targetRoot.style.setProperty("overflow-y", "auto", "important");
+		targetRoot.style.setProperty("scrollbar-width", "none", "important");
+		targetRoot.style.setProperty("-ms-overflow-style", "none", "important");
+		body.style.setProperty("display", "block", "important");
+		body.style.setProperty("position", "static", "important");
+		body.style.setProperty("box-sizing", "border-box", "important");
+		body.style.setProperty("width", "100%", "important");
+		body.style.setProperty("height", "auto", "important");
+		body.style.setProperty("min-height", "100%", "important");
+		body.style.setProperty("margin", "0", "important");
+		body.style.setProperty("overflow", "visible", "important");
+		frameDocument.getElementById(frameRootId)?.style.removeProperty("min-height");
+		const scrollbarStyle = frameDocument.createElement("style");
+		scrollbarStyle.setAttribute("data-puzzle-preview-style", "");
+		scrollbarStyle.textContent = `
+      html,
+      body {
+        scrollbar-width: none !important;
+        -ms-overflow-style: none !important;
+      }
+
+      html::-webkit-scrollbar,
+      body::-webkit-scrollbar {
+        display: none !important;
+        width: 0 !important;
+        height: 0 !important;
+      }
+    `;
+		frameHead.appendChild(scrollbarStyle);
+	}, [frameRootId]);
+	const updateScale = useCallback((availableWidth) => {
+		const nextScale = Math.min(1, Math.max(0, availableWidth) / config.width);
+		setScale((current) => Math.abs(current - nextScale) < .001 ? current : nextScale);
+	}, [config.width]);
+	useIsomorphicLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const measure = () => {
+			const styles = window.getComputedStyle(container);
+			const horizontalPadding = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
+			updateScale(container.clientWidth - horizontalPadding);
+		};
+		measure();
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) updateScale(entry.contentRect.width);
+		});
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, [updateScale]);
+	useEffect(() => {
+		const isStyleNode = (node) => node instanceof Element && (node.matches("style, link[rel='stylesheet']") || node.querySelector("style, link[rel='stylesheet']") !== null);
+		const headObserver = new MutationObserver(syncStyles);
+		headObserver.observe(document.head, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true
+		});
+		const bodyObserver = new MutationObserver((mutations) => {
+			if (mutations.some((mutation) => {
+				return (mutation.target instanceof Element ? mutation.target : mutation.target.parentElement)?.closest("style[data-puzzle-theme], style[data-puzzle-theme-scope-style]") != null || Array.from(mutation.addedNodes).some(isStyleNode) || Array.from(mutation.removedNodes).some(isStyleNode);
+			})) syncStyles();
+		});
+		bodyObserver.observe(document.body, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true,
+			attributeFilter: ["data-theme"]
+		});
+		return () => {
+			headObserver.disconnect();
+			bodyObserver.disconnect();
+		};
+	}, [syncStyles]);
+	const initializeFrame = useCallback(() => {
+		const root = (iframeRef.current?.contentDocument)?.getElementById(frameRootId);
+		if (!root) return;
+		syncStyles();
+		setFrameRoot(root);
+	}, [frameRootId, syncStyles]);
+	useEffect(() => {
+		initializeFrame();
+	}, [initializeFrame]);
+	const handleCopyCode = useCallback(async () => {
+		if (code === void 0) return;
+		try {
+			await navigator.clipboard.writeText(code);
+			setCopied(true);
+			if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current);
+			copyTimeoutRef.current = setTimeout(() => {
+				setCopied(false);
+			}, 2e3);
+		} catch {
+			setCopied(false);
+		}
+	}, [code]);
+	useEffect(() => () => {
+		if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current);
+	}, []);
+	useEffect(() => {
+		if (!hasCode && activeTab === "code") setActiveTab("preview");
+	}, [activeTab, hasCode]);
+	const frameStyle = {
+		width: config.width,
+		height: frameHeight,
+		transform: `scale(${scale})`,
+		transformOrigin: "top left"
+	};
+	const contentStyle = {
+		display: "flex",
+		boxSizing: "border-box",
+		minHeight: "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}`
+	};
+	const panelProps = {
+		id: panelId,
+		role: "tabpanel",
+		"aria-labelledby": activeTab === "preview" ? previewTabId : codeTabId
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		ref: sectionRef,
+		className: cn("puzzle-preview", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "puzzle-preview__toolbar",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "puzzle-preview__tabs",
+					role: "tablist",
+					"aria-label": "Preview view",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "tab",
+						id: previewTabId,
+						ref: rovingFocus.getItemRef("preview"),
+						tabIndex: activeTab === "preview" ? 0 : -1,
+						onFocus: () => handleTabFocus("preview"),
+						onKeyDown: (event) => handleTabKeyDown(event, "preview"),
+						"aria-selected": activeTab === "preview",
+						"aria-controls": panelId,
+						className: cn("puzzle-preview__tab", activeTab === "preview" && "puzzle-preview__tab--active"),
+						onClick: () => setActiveTab("preview"),
+						children: "Preview"
+					}), hasCode && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "tab",
+						id: codeTabId,
+						ref: rovingFocus.getItemRef("code"),
+						tabIndex: activeTab === "code" ? 0 : -1,
+						onFocus: () => handleTabFocus("code"),
+						onKeyDown: (event) => handleTabKeyDown(event, "code"),
+						"aria-selected": activeTab === "code",
+						"aria-controls": panelId,
+						className: cn("puzzle-preview__tab", activeTab === "code" && "puzzle-preview__tab--active"),
+						onClick: () => setActiveTab("code"),
+						children: "Code"
+					})]
+				}), activeTab === "preview" ? /* @__PURE__ */ jsxs("div", {
+					className: "puzzle-preview__toolbar-actions",
+					children: [!hideDevices && /* @__PURE__ */ jsx("div", {
+						className: "puzzle-preview__devices",
+						role: "group",
+						"aria-label": "Device size",
+						children: Object.keys(PREVIEW_DEVICES).map((item) => /* @__PURE__ */ jsx("button", {
+							ref: deviceFocus.getItemRef(item),
+							type: "button",
+							className: cn("puzzle-preview__device", device === item && "puzzle-preview__device--active"),
+							"aria-pressed": device === item,
+							tabIndex: deviceFocus.getItemTabIndex(item),
+							onFocus: () => deviceFocus.onItemFocus(item),
+							onKeyDown: (event) => deviceFocus.onItemKeyDown(event, item),
+							onClick: () => setDevice(item),
+							children: PREVIEW_DEVICES[item].label
+						}, item))
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "puzzle-preview__dimensions",
+						children: [
+							config.width,
+							" × ",
+							frameHeight
+						]
+					})]
+				}) : /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "puzzle-preview__copy",
+					onClick: handleCopyCode,
+					"aria-label": copied ? "Code copied" : "Copy code",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: copied ? "tabler:check" : "tabler:copy",
+						size: 16,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", { children: copied ? "Copied" : "Copy code" })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(PreviewBackground, {
+				...panelProps,
+				className: "puzzle-preview__panel",
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: containerRef,
+					className: "puzzle-preview__stage",
+					hidden: activeTab !== "preview",
+					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
+							})
+						}), frameRoot)]
+					})
+				}), activeTab === "code" && /* @__PURE__ */ jsx("div", {
+					className: "puzzle-preview__code",
+					children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", {
+						className: "language-tsx",
+						children: code === void 0 ? null : highlightCode(code)
+					}) })
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "puzzle-preview__copy-status",
+				role: "status",
+				"aria-live": "polite",
+				children: copied ? "Code copied to clipboard." : ""
+			})
+		]
+	});
+};
+export { Preview };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"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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"}