@puzzle-ui/ui 0.3.0 → 0.4.0

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","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        (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  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":";;;;;;;;;;;;AA2DA,MAAM,kBAAuD;CAC3D,QAAQ;EAAE,OAAO;EAAU,OAAO;EAAK,QAAQ;CAAI;CACnD,QAAQ;EAAE,OAAO;EAAU,OAAO;EAAK,QAAQ;CAAK;CACpD,SAAS;EAAE,OAAO;EAAW,OAAO;EAAM,QAAQ;CAAI;AACxD;AAEA,MAAM,uBACJ,OAAO,KAAK,eAAe,CAAC,CAC5B,KAAK,QAAQ,EAAE,GAAG,EAAE;AAEtB,MAAM,eAA6C;CACjD,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;AACX;AAEA,MAAM,iBAAiD;CACrD,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;AACV;AAEA,MAAM,yBAAyB,WAAmB;;;;;;;eAOnC,OAAO;;;AAItB,MAAM,4BACJ,OAAO,WAAW,cAAcA,MAAAA,YAAYC,MAAAA;AAE9C,MAAM,qBAAqB,UACzB,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,YAAD;CACE,SAAQ;CACR,MAAM;CACN,WAAW;CACX,WAAW;CACX,gBAAgB;CAChB,GAAI;AACL,CAAA;AAGH,MAAM,WAAW,EACf,UACA,WACA,gBAAgB,UAChB,MACA,QACA,OACA,SACA,cAAc,YACI;CAClB,MAAM,eAAA,GAAcC,MAAAA,MAAAA,CAAM;CAC1B,MAAM,cAAc,GAAG,YAAY;CACnC,MAAM,eAAe,GAAG,YAAY;CACpC,MAAM,YAAY,GAAG,YAAY;CACjC,MAAM,UAAU,GAAG,YAAY;CAE/B,MAAM,cAAA,GAAaC,+BAAAA,cAAAA,CAAc;CAEjC,MAAM,CAAC,QAAQ,cAAA,GAAaC,MAAAA,SAAAA,CAAwB,aAAa;CACjE,MAAM,CAAC,WAAW,iBAAA,GAAgBA,MAAAA,SAAAA,CAAqB,SAAS;CAChE,MAAM,CAAC,WAAW,iBAAA,GAAgBA,MAAAA,SAAAA,CAA6B,IAAI;CACnE,MAAM,CAAC,OAAO,aAAA,GAAYA,MAAAA,SAAAA,CAAS,CAAC;CACpC,MAAM,CAAC,QAAQ,cAAA,GAAaA,MAAAA,SAAAA,CAAS,KAAK;CAE1C,MAAM,gBAAA,GAAeC,MAAAA,OAAAA,CAAuB,IAAI;CAChD,MAAM,aAAA,GAAYA,MAAAA,OAAAA,CAA0B,IAAI;CAChD,MAAM,kBAAA,GAAiBA,MAAAA,OAAAA,CAA6C,IAAI;CAExE,MAAM,SAAS,gBAAgB;CAC/B,MAAM,cAAc,UAAU,OAAO;CACrC,MAAM,UAAU,SAAS,KAAA;CACzB,MAAM,CAAC,WAAW,iBAAA,GAAgBD,MAAAA,SAAAA,CAAwB,KAAK;CAC/D,MAAM,cAAA,GAAaC,MAAAA,OAAAA,CAAoB,IAAI;CAC3C,MAAM,wBAAA,GAAuBA,MAAAA,OAAAA,CAAO,KAAK;CAEzC,CAAA,GAAA,MAAA,gBAAA,OAAsB;EACpB,MAAM,UAAU,WAAW;EAE3B,IAAI,SAAS;GACX,MAAM,QACJ,iBAAiB,OAAO,CAAC,CAAC,cAAc,SACxC,QAAQ,QAAQ,OAAO,CAAC,EAAE,aAAa,KAAK,CAAC,EAAE,YAAY,MAAM;GAEnE,aAAa,QAAQ,QAAQ,KAAK;EACpC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAA,GAAcC,iBAAAA,eAAAA,CAAkC;EACpD,OAAO,UAAU,CAAC,EAAE,IAAI,UAAU,GAAG,EAAE,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,UAAU,CAAC;EACzE,KAAK;EACL,iBAAiB;CACnB,CAAC;CAED,MAAM,eAAA,GAAcA,iBAAAA,eAAAA,CAAkC;EACpD,OAAO;EACP,KAAK;EACL,iBAAiB;CACnB,CAAC;CAED,MAAM,oBACJ,OACA,QACG;EACH,qBAAqB,UAAU;EAE/B,IAAI;GACF,YAAY,cAAc,OAAO,GAAG;EACtC,UAAU;GACR,qBAAqB,UAAU;EACjC;CACF;CAEA,MAAM,kBAAkB,QAAoB;EAC1C,YAAY,YAAY,GAAG;EAE3B,IAAI,qBAAqB,SACvB,aAAa,GAAG;CAEpB;CAEA,MAAM,cAAA,GAAaC,MAAAA,YAAAA,OAAkB;EACnC,MAAM,gBAAgB,UAAU,SAAS;EAEzC,IAAI,CAAC,eAAe;EAEpB,MAAM,YAAY,cAAc;EAEhC,UACG,iBAAiB,6BAA6B,CAAC,CAC/C,SAAS,YAAY,QAAQ,OAAO,CAAC;EAExC,SACG,iBACC;GACE;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,IAAI,CACb,CAAC,CACA,SAAS,YAAY;GACpB,MAAM,QAAQ,QAAQ,UAAU,IAAI;GAEpC,MAAM,aAAa,6BAA6B,EAAE;GAClD,UAAU,YAAY,KAAK;EAC7B,CAAC;EAEH,MAAM,aAAa,SAAS;EAC5B,MAAM,aAAa,cAAc;EAEjC,WAAW,MAAM,UAAU,WAAW,MAAM;EAC5C,WAAW,YAAY,WAAW;EAElC,MAAM,KAAK,WAAW,UAAU,CAAC,CAAC,SAAS,cAAc;GACvD,IAAI,UAAU,SAAS,WAAW,UAAU,SAAS,SACnD;GAGF,WAAW,aAAa,UAAU,MAAM,UAAU,KAAK;EACzD,CAAC;EAED,MAAM,OAAO,cAAc;EAE3B,KAAK,YAAY,SAAS,KAAK;EAC/B,KAAK,MAAM,UAAU,SAAS,KAAK,MAAM;EAEzC,WAAW,MAAM,YAAY,cAAc,cAAc,WAAW;EACpE,WAAW,MAAM,YAAY,SAAS,QAAQ,WAAW;EACzD,WAAW,MAAM,YAAY,UAAU,QAAQ,WAAW;EAC1D,WAAW,MAAM,YAAY,cAAc,QAAQ,WAAW;EAC9D,WAAW,MAAM,YAAY,UAAU,KAAK,WAAW;EACvD,WAAW,MAAM,YAAY,cAAc,UAAU,WAAW;EAChE,WAAW,MAAM,YAAY,cAAc,QAAQ,WAAW;EAC9D,WAAW,MAAM,YAAY,mBAAmB,QAAQ,WAAW;EACnE,WAAW,MAAM,YAAY,sBAAsB,QAAQ,WAAW;EAEtE,KAAK,MAAM,YAAY,WAAW,SAAS,WAAW;EACtD,KAAK,MAAM,YAAY,YAAY,UAAU,WAAW;EACxD,KAAK,MAAM,YAAY,cAAc,cAAc,WAAW;EAC9D,KAAK,MAAM,YAAY,SAAS,QAAQ,WAAW;EACnD,KAAK,MAAM,YAAY,UAAU,QAAQ,WAAW;EACpD,KAAK,MAAM,YAAY,cAAc,QAAQ,WAAW;EACxD,KAAK,MAAM,YAAY,UAAU,KAAK,WAAW;EACjD,KAAK,MAAM,YAAY,YAAY,WAAW,WAAW;EAIzD,cAFkC,eAAe,WAEvC,CAAC,EAAE,MAAM,eAAe,YAAY;EAE9C,MAAM,iBAAiB,cAAc,cAAc,OAAO;EAE1D,eAAe,aAAa,6BAA6B,EAAE;EAC3D,eAAe,cAAc;;;;;;;;;;;;;;EAe7B,UAAU,YAAY,cAAc;CACtC,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,eAAA,GAAcA,MAAAA,YAAAA,EACjB,mBAA2B;EAC1B,MAAM,YAAY,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,cAAc,IAAI,OAAO,KAAK;EAExE,UAAU,YACR,KAAK,IAAI,UAAU,SAAS,IAAI,OAAQ,UAAU,SACpD;CACF,GACA,CAAC,OAAO,KAAK,CACf;CAEA,gCAAgC;EAC9B,MAAM,YAAY,aAAa;EAE/B,IAAI,CAAC,WAAW;EAEhB,MAAM,gBAAgB;GACpB,MAAM,SAAS,OAAO,iBAAiB,SAAS;GAChD,MAAM,qBACH,OAAO,WAAW,OAAO,WAAW,KAAK,MACzC,OAAO,WAAW,OAAO,YAAY,KAAK;GAE7C,YAAY,UAAU,cAAc,iBAAiB;EACvD;EAEA,QAAQ;EAER,MAAM,WAAW,IAAI,gBAAgB,YAAY;GAC/C,MAAM,QAAQ,QAAQ;GAEtB,IAAI,OACF,YAAY,MAAM,YAAY,KAAK;EAEvC,CAAC;EAED,SAAS,QAAQ,SAAS;EAE1B,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,WAAW,CAAC;CAEhB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,eAAe,SACnB,gBAAgB,YACf,KAAK,QAAQ,+BAA+B,KAC3C,KAAK,cAAc,+BAA+B,MAAM;EAE5D,MAAM,eAAe,IAAI,iBAAiB,UAAU;EAEpD,aAAa,QAAQ,SAAS,MAAM;GAClC,WAAW;GACX,SAAS;GACT,eAAe;GACf,YAAY;EACd,CAAC;EAED,MAAM,eAAe,IAAI,kBAAkB,cAAc;GAgBvD,IAfsB,UAAU,MAAM,aAAa;IAMjD,QAJE,SAAS,kBAAkB,UACvB,SAAS,SACT,SAAS,OAAO,cAAA,EAGZ,QACN,gEACF,KAAK,QACL,MAAM,KAAK,SAAS,UAAU,CAAC,CAAC,KAAK,WAAW,KAChD,MAAM,KAAK,SAAS,YAAY,CAAC,CAAC,KAAK,WAAW;GAEtD,CAEgB,GACd,WAAW;EAEf,CAAC;EAED,aAAa,QAAQ,SAAS,MAAM;GAClC,WAAW;GACX,SAAS;GACT,eAAe;GACf,YAAY;GACZ,iBAAiB,CAAC,YAAY;EAChC,CAAC;EAED,aAAa;GACX,aAAa,WAAW;GACxB,aAAa,WAAW;EAC1B;CACF,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,mBAAA,GAAkBA,MAAAA,YAAAA,OAAkB;EAExC,MAAM,QADgB,UAAU,SAAS,gBAAA,EACb,eAAe,WAAW;EAEtD,IAAI,CAAC,MAAM;EAEX,WAAW;EACX,aAAa,IAAI;CACnB,GAAG,CAAC,aAAa,UAAU,CAAC;CAE5B,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,gBAAgB;CAClB,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,kBAAA,GAAiBA,MAAAA,YAAAA,CAAY,YAAY;EAC7C,IAAI,SAAS,KAAA,GAAW;EAExB,IAAI;GACF,MAAM,UAAU,UAAU,UAAU,IAAI;GACxC,UAAU,IAAI;GAEd,IAAI,eAAe,SACjB,aAAa,eAAe,OAAO;GAGrC,eAAe,UAAU,iBAAiB;IACxC,UAAU,KAAK;GACjB,GAAG,GAAI;EACT,QAAQ;GACN,UAAU,KAAK;EACjB;CACF,GAAG,CAAC,IAAI,CAAC;CAET,CAAA,GAAA,MAAA,UAAA,aACc;EACV,IAAI,eAAe,SACjB,aAAa,eAAe,OAAO;CAEvC,GACA,CAAC,CACH;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,WAAW,cAAc,QAC5B,aAAa,SAAS;CAE1B,GAAG,CAAC,WAAW,OAAO,CAAC;CAEvB,MAAM,aAA4B;EAChC,OAAO,OAAO;EACd,QAAQ;EACR,WAAW,SAAS,MAAM;EAC1B,iBAAiB;CACnB;CAEA,MAAM,eAA8B;EAClC,SAAS;EACT,WAAW;EACX,WAAW;EACX,YAAY,QAAQ,aAAa,SAAS,KAAA;EAC1C,gBAAgB,UAAU,eAAe,WAAW,KAAA;CACtD;CAEA,MAAM,gBAA+B;EACnC,OAAO,OAAO,QAAQ;EACtB,aAAa,GAAG,OAAO,MAAM,KAAK;CACpC;CAEA,MAAM,aAAa;EACjB,IAAI;EACJ,MAAM;EACN,mBAAmB,cAAc,YAAY,eAAe;CAC9D;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EAAS,KAAK;EAAY,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,kBAAkB,SAAS;EAAnE,UAAA;GACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,cAAW;KAHb,UAAA,CAKE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;MACE,MAAK;MACL,MAAK;MACL,IAAI;MACJ,KAAK,YAAY,WAAW,SAAS;MACrC,UAAU,cAAc,YAAY,IAAI;MACxC,eAAe,eAAe,SAAS;MACvC,YAAY,UAAU,iBAAiB,OAAO,SAAS;MACvD,iBAAe,cAAc;MAC7B,iBAAe;MACf,YAAA,GAAWA,gBAAAA,GAAAA,CACT,uBACA,cAAc,aAAa,6BAC7B;MACA,eAAe,aAAa,SAAS;MACtC,UAAA;KAEO,CAAA,GAEP,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;MACE,MAAK;MACL,MAAK;MACL,IAAI;MACJ,KAAK,YAAY,WAAW,MAAM;MAClC,UAAU,cAAc,SAAS,IAAI;MACrC,eAAe,eAAe,MAAM;MACpC,YAAY,UAAU,iBAAiB,OAAO,MAAM;MACpD,iBAAe,cAAc;MAC7B,iBAAe;MACf,YAAA,GAAWA,gBAAAA,GAAAA,CACT,uBACA,cAAc,UAAU,6BAC1B;MACA,eAAe,aAAa,MAAM;MACnC,UAAA;KAEO,CAAA,CAEP;IAEJ,CAAA,GAAA,cAAc,YACb,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,CAAC,eACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,cAAW;MAET,UAAA,OAAO,KAAK,eAAe,CAAC,CAAqB,KAChD,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;OAEE,KAAK,YAAY,WAAW,IAAI;OAChC,MAAK;OACL,YAAA,GAAWA,gBAAAA,GAAAA,CACT,0BACA,WAAW,QAAQ,gCACrB;OACA,gBAAc,WAAW;OACzB,UAAU,YAAY,gBAAgB,IAAI;OAC1C,eAAe,YAAY,YAAY,IAAI;OAC3C,YAAY,UACV,YAAY,cAAc,OAAO,IAAI;OAEvC,eAAe,UAAU,IAAI;OAE5B,UAAA,gBAAgB,KAAK,CAAC;MACjB,GAhBD,IAgBC,CAEZ;KACG,CAAA,GAGP,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACG,OAAO;OAAM;OAAI;MACd;KACH,CAAA,CAAA;IAEL,CAAA,IAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,SAAS;KACT,cAAY,SAAS,gBAAgB;KAJvC,UAAA,CAME,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,MAAD;MACE,MAAM,SAAS,iBAAiB;MAChC,MAAM;MACN,eAAY;KACb,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,SAAS,WAAW,YAAkB,CAAA,CACvC;IAEP,CAAA,CAAA;;GAEL,iBAAA,GAAA,kBAAA,KAAA,CAAC,mBAAD;IAAmB,GAAI;IAAY,WAAU;IAA7C,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,KAAK;KACL,WAAU;KACV,QAAQ,cAAc;KAEtB,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,WAAU;MAA2B,OAAO;MAAjD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;OACE,KAAK;OACL,WAAU;OACV,QAAQ,sBAAsB,WAAW;OACzC,OAAO,GAAG,OAAO,MAAM;OACvB,QAAQ;OACR,OAAO;MACR,CAAA,GAEA,cAAA,GACCC,UAAAA,aAAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,oBAAD;OACE,SAAS,YAAY,WAAW;OAChC,OAAO,YAAY,SAAS;OAE5B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;QAAK,OAAO;QAAe;OAAc,CAAA;MACvB,CAAA,GACpB,SACF,CACC;;IACF,CAAA,GAEJ,cAAc,UACb,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MACb,UAAA,SAAS,KAAA,IAAY,OAAOC,kBAAAA,cAAc,IAAI;KAC3C,CAAA,EACH,CAAA;IACF,CAAA,CAEU;;GAEnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,WAAU;IACV,MAAK;IACL,aAAU;IAET,UAAA,SAAS,8BAA8B;GACpC,CAAA;EACC;;AAEb"}

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

@@ -182,7 +182,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();

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

@@ -1 +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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"}
+{"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        (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  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/index.cjs

@@ -6,55 +6,59 @@ const require_index$3 = require("./components/data-display/alert/index.cjs");
 const require_index$4 = require("./components/data-display/avatar/index.cjs");
 const require_index$5 = require("./components/data-display/badge/index.cjs");
 const require_index$6 = require("./components/data-display/card/index.cjs");
-const require_index$7 = require("./components/data-display/image/index.cjs");
-const require_index$8 = require("./components/data-display/paper/index.cjs");
+const require_index$7 = require("./components/data-display/empty-state/index.cjs");
+const require_index$8 = require("./components/data-display/image/index.cjs");
+const require_index$9 = require("./components/data-display/paper/index.cjs");
 const require_circular_progress = require("./components/data-display/progress/circular-progress.cjs");
 const require_linear_progress = require("./components/data-display/progress/linear-progress.cjs");
-const require_index$9 = require("./components/data-display/skeleton/index.cjs");
-const require_index$10 = require("./components/editors/text-editor/index.cjs");
+const require_index$10 = require("./components/data-display/skeleton/index.cjs");
+const require_index$11 = require("./components/editors/text-editor/index.cjs");
 const require_text_editor_toolbar = require("./components/editors/text-editor/text-editor-toolbar.cjs");
 const require_text_renderer = require("./components/editors/text-editor/text-renderer.cjs");
-const require_index$11 = require("./components/forms/autocomplete/index.cjs");
-const require_index$12 = require("./components/forms/checkbox/index.cjs");
-const require_index$13 = require("./components/forms/date-picker/index.cjs");
-const require_index$14 = require("./components/forms/file-upload/index.cjs");
-const require_index$15 = require("./components/forms/form-field/index.cjs");
+const require_index$12 = require("./components/forms/autocomplete/index.cjs");
+const require_index$13 = require("./components/forms/checkbox/index.cjs");
+const require_index$14 = require("./components/forms/color-picker/index.cjs");
+const require_index$15 = require("./components/forms/date-picker/index.cjs");
+const require_index$16 = require("./components/forms/file-upload/index.cjs");
+const require_index$17 = require("./components/forms/form-field/index.cjs");
+const require_input_group = require("./components/forms/input-group/input-group.cjs");
 const require_number_input = require("./components/forms/input/number-input.cjs");
 const require_text_area_input = require("./components/forms/input/text-area-input.cjs");
 const require_text_input = require("./components/forms/input/text-input.cjs");
-const require_index$16 = require("./components/forms/label/index.cjs");
-const require_index$17 = require("./components/forms/radio-group/index.cjs");
-const require_index$18 = require("./components/forms/select/index.cjs");
-const require_index$19 = require("./components/forms/slider/index.cjs");
-const require_index$20 = require("./components/forms/stepper/index.cjs");
-const require_index$21 = require("./components/forms/switch/index.cjs");
-const require_index$22 = require("./components/layout/app-bar/index.cjs");
-const require_index$23 = require("./components/layout/background/index.cjs");
-const require_index$24 = require("./components/layout/bottom-navigation/index.cjs");
-const require_index$25 = require("./components/layout/breadcrumbs/index.cjs");
-const require_index$26 = require("./components/layout/collapsable-sidebar/index.cjs");
-const require_index$27 = require("./components/layout/container/index.cjs");
-const require_index$28 = require("./components/layout/page-layout/index.cjs");
-const require_index$29 = require("./components/layout/resizable-panels/index.cjs");
-const require_index$30 = require("./components/layout/section/index.cjs");
-const require_index$31 = require("./components/layout/section-stack/index.cjs");
-const require_index$32 = require("./components/layout/sidebar/index.cjs");
-const require_index$33 = require("./components/layout/stack/index.cjs");
-const require_index$34 = require("./components/navigation/accordion/index.cjs");
-const require_index$35 = require("./components/navigation/carousel/index.cjs");
+const require_index$18 = require("./components/forms/label/index.cjs");
+const require_index$19 = require("./components/forms/radio-group/index.cjs");
+const require_index$20 = require("./components/forms/select/index.cjs");
+const require_index$21 = require("./components/forms/slider/index.cjs");
+const require_index$22 = require("./components/forms/stepper/index.cjs");
+const require_index$23 = require("./components/forms/switch/index.cjs");
+const require_index$24 = require("./components/layout/app-bar/index.cjs");
+const require_index$25 = require("./components/layout/background/index.cjs");
+const require_index$26 = require("./components/layout/bottom-navigation/index.cjs");
+const require_index$27 = require("./components/layout/breadcrumbs/index.cjs");
+const require_index$28 = require("./components/layout/collapsable-sidebar/index.cjs");
+const require_index$29 = require("./components/layout/container/index.cjs");
+const require_index$30 = require("./components/layout/page-layout/index.cjs");
+const require_index$31 = require("./components/layout/resizable-panels/index.cjs");
+const require_index$32 = require("./components/layout/section/index.cjs");
+const require_index$33 = require("./components/layout/section-stack/index.cjs");
+const require_index$34 = require("./components/layout/sidebar/index.cjs");
+const require_index$35 = require("./components/layout/stack/index.cjs");
+const require_index$36 = require("./components/navigation/accordion/index.cjs");
+const require_index$37 = require("./components/navigation/carousel/index.cjs");
 const require_controller = require("./components/navigation/carousel/controller.cjs");
-const require_index$36 = require("./components/navigation/link/index.cjs");
-const require_index$37 = require("./components/navigation/tabs/index.cjs");
-const require_index$38 = require("./components/navigation/tree-view/index.cjs");
-const require_index$39 = require("./components/overlays/backdrop/index.cjs");
-const require_index$40 = require("./components/overlays/command/index.cjs");
-const require_index$41 = require("./components/overlays/dialog/index.cjs");
-const require_index$42 = require("./components/overlays/drawer/index.cjs");
-const require_index$43 = require("./components/overlays/dropdown-menu/index.cjs");
-const require_index$44 = require("./components/overlays/notification/index.cjs");
-const require_index$45 = require("./components/overlays/popout/index.cjs");
-const require_index$46 = require("./components/overlays/portal/index.cjs");
-const require_index$47 = require("./components/overlays/popover/index.cjs");
+const require_index$38 = require("./components/navigation/link/index.cjs");
+const require_index$39 = require("./components/navigation/pagination/index.cjs");
+const require_index$40 = require("./components/navigation/tabs/index.cjs");
+const require_index$41 = require("./components/navigation/tree-view/index.cjs");
+const require_index$42 = require("./components/overlays/backdrop/index.cjs");
+const require_index$43 = require("./components/overlays/command/index.cjs");
+const require_index$44 = require("./components/overlays/dialog/index.cjs");
+const require_index$45 = require("./components/overlays/drawer/index.cjs");
+const require_index$46 = require("./components/overlays/dropdown-menu/index.cjs");
+const require_index$47 = require("./components/overlays/notification/index.cjs");
+const require_index$48 = require("./components/overlays/popout/index.cjs");
+const require_index$49 = require("./components/overlays/portal/index.cjs");
+const require_index$50 = require("./components/overlays/popover/index.cjs");
 const require_dropdown_menu_content = require("./components/overlays/dropdown-menu/dropdown-menu-content.cjs");
 const require_dropdown_menu_trigger = require("./components/overlays/dropdown-menu/dropdown-menu-trigger.cjs");
 const require_dropdown_menu_items = require("./components/overlays/dropdown-menu/dropdown-menu-items.cjs");
@@ -62,23 +66,23 @@ const require_dropdown_menu_radio = require("./components/overlays/dropdown-menu
 const require_target = require("./components/overlays/portal/target.cjs");
 const require_notification_provider = require("./components/overlays/notification/notification-provider.cjs");
 const require_use_notification = require("./components/overlays/notification/use-notification.cjs");
-const require_index$48 = require("./components/overlays/tooltip/index.cjs");
+const require_index$51 = require("./components/overlays/tooltip/index.cjs");
 const require_text = require("./components/typography/text.cjs");
 const require_heading = require("./components/typography/heading.cjs");
-const require_index$49 = require("./components/utilities/preview/index.cjs");
-const require_index$50 = require("./components/utilities/scroll-lock/index.cjs");
-const require_index$51 = require("./components/utilities/transition/index.cjs");
-exports.Accordion = require_index$34.Accordion;
+const require_index$52 = require("./components/utilities/preview/index.cjs");
+const require_index$53 = require("./components/utilities/scroll-lock/index.cjs");
+const require_index$54 = require("./components/utilities/transition/index.cjs");
+exports.Accordion = require_index$36.Accordion;
 exports.Alert = require_index$3.Alert;
-exports.AppBar = require_index$22.AppBar;
-exports.Autocomplete = require_index$11.Autocomplete;
+exports.AppBar = require_index$24.AppBar;
+exports.Autocomplete = require_index$12.Autocomplete;
 exports.Avatar = require_index$4.Avatar;
-exports.Backdrop = require_index$39.Backdrop;
-exports.Background = require_index$23.Background;
+exports.Backdrop = require_index$42.Backdrop;
+exports.Background = require_index$25.Background;
 exports.Badge = require_index$5.Badge;
-exports.BottomNavigation = require_index$24.BottomNavigation;
-exports.BottomNavigationItem = require_index$24.BottomNavigationItem;
-exports.Breadcrumbs = require_index$25.Breadcrumbs;
+exports.BottomNavigation = require_index$26.BottomNavigation;
+exports.BottomNavigationItem = require_index$26.BottomNavigationItem;
+exports.Breadcrumbs = require_index$27.Breadcrumbs;
 exports.Button = require_index.Button;
 exports.ButtonGroup = require_index$1.ButtonGroup;
 exports.Card = require_index$6.Card;
@@ -89,18 +93,19 @@ exports.CardFooter = require_index$6.CardFooter;
 exports.CardHeader = require_index$6.CardHeader;
 exports.CardMedia = require_index$6.CardMedia;
 exports.CardTitle = require_index$6.CardTitle;
-exports.Carousel = require_index$35.Carousel;
+exports.Carousel = require_index$37.Carousel;
 exports.CarouselController = require_controller.CarouselController;
-exports.Checkbox = require_index$12.Checkbox;
+exports.Checkbox = require_index$13.Checkbox;
 exports.CircularProgress = require_circular_progress.CircularProgress;
-exports.CollapsableSidebar = require_index$26.CollapsableSidebar;
-exports.Command = require_index$40.Command;
-exports.CommandDialog = require_index$40.CommandDialog;
-exports.Container = require_index$27.Container;
-exports.DatePicker = require_index$13.DatePicker;
-exports.Dialog = require_index$41.Dialog;
-exports.Drawer = require_index$42.Drawer;
-exports.DropdownMenu = require_index$43.DropdownMenu;
+exports.CollapsableSidebar = require_index$28.CollapsableSidebar;
+exports.ColorPicker = require_index$14.ColorPicker;
+exports.Command = require_index$43.Command;
+exports.CommandDialog = require_index$43.CommandDialog;
+exports.Container = require_index$29.Container;
+exports.DatePicker = require_index$15.DatePicker;
+exports.Dialog = require_index$44.Dialog;
+exports.Drawer = require_index$45.Drawer;
+exports.DropdownMenu = require_index$46.DropdownMenu;
 exports.DropdownMenuCheckboxItem = require_dropdown_menu_items.DropdownMenuCheckboxItem;
 exports.DropdownMenuContent = require_dropdown_menu_content.DropdownMenuContent;
 exports.DropdownMenuGroup = require_dropdown_menu_items.DropdownMenuGroup;
@@ -110,50 +115,58 @@ exports.DropdownMenuRadioGroup = require_dropdown_menu_radio.DropdownMenuRadioGr
 exports.DropdownMenuRadioItem = require_dropdown_menu_radio.DropdownMenuRadioItem;
 exports.DropdownMenuSeparator = require_dropdown_menu_items.DropdownMenuSeparator;
 exports.DropdownMenuTrigger = require_dropdown_menu_trigger.DropdownMenuTrigger;
-exports.FileUpload = require_index$14.FileUpload;
-exports.FormField = require_index$15.FormField;
+exports.EmptyState = require_index$7.EmptyState;
+exports.EmptyStateContent = require_index$7.EmptyStateContent;
+exports.EmptyStateDescription = require_index$7.EmptyStateDescription;
+exports.EmptyStateHeader = require_index$7.EmptyStateHeader;
+exports.EmptyStateMedia = require_index$7.EmptyStateMedia;
+exports.EmptyStateTitle = require_index$7.EmptyStateTitle;
+exports.FileUpload = require_index$16.FileUpload;
+exports.FormField = require_index$17.FormField;
 exports.Heading = require_heading.Heading;
-exports.Image = require_index$7.Image;
-exports.Label = require_index$16.Label;
+exports.Image = require_index$8.Image;
+exports.InputGroup = require_input_group.InputGroup;
+exports.Label = require_index$18.Label;
 exports.LinearProgress = require_linear_progress.LinearProgress;
-exports.Link = require_index$36.Link;
-exports.Notification = require_index$44.Notification;
+exports.Link = require_index$38.Link;
+exports.Notification = require_index$47.Notification;
 exports.NotificationProvider = require_notification_provider.NotificationProvider;
-exports.NotificationViewport = require_index$44.NotificationViewport;
+exports.NotificationViewport = require_index$47.NotificationViewport;
 exports.NumberInput = require_number_input.NumberInput;
-exports.PageLayout = require_index$28.PageLayout;
-exports.Paper = require_index$8.Paper;
-exports.Popout = require_index$45.Popout;
-exports.Popover = require_index$47.Popover;
-exports.Portal = require_index$46.Portal;
+exports.PageLayout = require_index$30.PageLayout;
+exports.Pagination = require_index$39.Pagination;
+exports.Paper = require_index$9.Paper;
+exports.Popout = require_index$48.Popout;
+exports.Popover = require_index$50.Popover;
+exports.Portal = require_index$49.Portal;
 exports.PortalTarget = require_target.PortalTarget;
-exports.Preview = require_index$49.Preview;
-exports.Radio = require_index$17.Radio;
-exports.RadioGroup = require_index$17.RadioGroup;
-exports.ResizableHandle = require_index$29.ResizableHandle;
-exports.ResizablePanel = require_index$29.ResizablePanel;
-exports.ResizablePanels = require_index$29.ResizablePanels;
-exports.ScrollLock = require_index$50.ScrollLock;
-exports.Section = require_index$30.Section;
-exports.SectionStack = require_index$31.SectionStack;
-exports.Select = require_index$18.Select;
-exports.Sidebar = require_index$32.Sidebar;
-exports.Skeleton = require_index$9.Skeleton;
-exports.Slider = require_index$19.Slider;
-exports.Stack = require_index$33.Stack;
-exports.Stepper = require_index$20.Stepper;
-exports.Switch = require_index$21.Switch;
-exports.Tabs = require_index$37.Tabs;
-exports.TabsTab = require_index$37.TabsTab;
+exports.Preview = require_index$52.Preview;
+exports.Radio = require_index$19.Radio;
+exports.RadioGroup = require_index$19.RadioGroup;
+exports.ResizableHandle = require_index$31.ResizableHandle;
+exports.ResizablePanel = require_index$31.ResizablePanel;
+exports.ResizablePanels = require_index$31.ResizablePanels;
+exports.ScrollLock = require_index$53.ScrollLock;
+exports.Section = require_index$32.Section;
+exports.SectionStack = require_index$33.SectionStack;
+exports.Select = require_index$20.Select;
+exports.Sidebar = require_index$34.Sidebar;
+exports.Skeleton = require_index$10.Skeleton;
+exports.Slider = require_index$21.Slider;
+exports.Stack = require_index$35.Stack;
+exports.Stepper = require_index$22.Stepper;
+exports.Switch = require_index$23.Switch;
+exports.Tabs = require_index$40.Tabs;
+exports.TabsTab = require_index$40.TabsTab;
 exports.Text = require_text.Text;
 exports.TextAreaInput = require_text_area_input.TextAreaInput;
-exports.TextEditor = require_index$10.TextEditor;
+exports.TextEditor = require_index$11.TextEditor;
 exports.TextEditorToolbar = require_text_editor_toolbar.TextEditorToolbar;
 exports.TextInput = require_text_input.TextInput;
 exports.TextRenderer = require_text_renderer.TextRenderer;
 exports.ToggleGroup = require_index$2.ToggleGroup;
-exports.Tooltip = require_index$48.Tooltip;
-exports.Transition = require_index$51.Transition;
-exports.TreeView = require_index$38.TreeView;
+exports.Tooltip = require_index$51.Tooltip;
+exports.Transition = require_index$54.Transition;
+exports.TreeView = require_index$41.TreeView;
 exports.useCarouselContext = require_controller.useCarouselContext;
 exports.useNotification = require_use_notification.useNotification;