@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/HtmlPreview/HtmlPreview.mjs

@@ -1,137 +1,39 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
 import { stopPropagation } from "../utils/dom.mjs";
-import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
-import Spin from "../base-ui/Spin/Spin.mjs";
 import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter/index.mjs";
 import CopyButton from "../CopyButton/CopyButton.mjs";
 import { downloadBlob } from "../utils/downloadBlob.mjs";
-import { actionsHoverCls, variants } from "../Highlighter/style.mjs";
+import { actionsHoverCls, rootClassName, rootStyles } from "../Highlighter/style.mjs";
 import { containsScript, isFullHtmlDocument, isHtmlContentClosed } from "./const.mjs";
-import Segmented from "../base-ui/Segmented/Segmented.mjs";
+import Segmented from "../Segmented/Segmented.mjs";
+import Spin from "../Spin/Spin.mjs";
+import { styles } from "./style.mjs";
 import { HtmlPreviewIframe } from "./Iframe.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createStaticStyles, cx, keyframes } from "antd-style";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
 import { Download, Expand } from "lucide-react";
 //#region src/HtmlPreview/HtmlPreview.tsx
-const shimmer = keyframes`
-  0%   { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-`;
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	loadingBackdrop: css`
-    pointer-events: none;
-
-    position: absolute;
-    z-index: 1;
-    inset: 0;
-
-    /* Subtle moving sheen so it doesn't look frozen. */
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      color-mix(in srgb, ${cssVar.colorText} 4%, transparent) 50%,
-      transparent 100%
-    );
-    background-repeat: no-repeat;
-    background-size: 200% 100%;
-
-    animation: ${shimmer} 1.6s ${cssVar.motionEaseInOut} infinite;
-  `,
-	loadingBadge: css`
-    position: absolute;
-    z-index: 2;
-    inset-block-start: 12px;
-    inset-inline-start: 12px;
-
-    display: inline-flex;
-    gap: 8px;
-    align-items: center;
-
-    padding-block: 4px;
-    padding-inline: 6px 10px;
-    border-radius: 999px;
-
-    font-size: 12px;
-    color: ${cssVar.colorTextDescription};
-
-    background: ${cssVar.colorBgContainer};
-    backdrop-filter: blur(8px);
-    box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};
-  `,
-	loadingSource: css`
-    pointer-events: none;
-    overflow: hidden;
-    height: 100%;
-
-    /* Faded out so the iframe transition feels like content lighting up,
-       not like one document jump-cutting to another. */
-    opacity: 0.45;
-
-    /* SyntaxHighlighter sets its own background; flatten so the shimmer
-       overlay reads cleanly on top. */
-    & [data-code-type='highlighter'] {
-      background: transparent;
-      box-shadow: none;
-    }
-
-    /* Tail-follow is layout-only — we anchor the scrollable element to
-       its scrollHeight via the ref + effect; CSS just keeps the
-       overflow hidden. */
-    & pre,
-    & code {
-      background: transparent !important;
-    }
-  `,
-	loadingRoot: css`
-    position: relative;
-    overflow: hidden;
-    background: color-mix(in srgb, ${cssVar.colorText} 3%, ${cssVar.colorBgContainer});
-  `,
-	segmented: css`
-    && {
-      gap: 0;
-      padding: 2px;
-      border-radius: ${cssVar.borderRadiusSM};
-    }
-  `,
-	segmentedIndicator: css`
-    && {
-      border-radius: ${cssVar.borderRadiusXS};
-    }
-  `,
-	segmentedItem: css`
-    && {
-      height: 23px;
-      padding-inline: 7px;
-      border-radius: ${cssVar.borderRadiusXS};
-
-      font-size: 14px;
-      font-weight: 400;
-    }
-  `,
-	toolbar: cx(actionsHoverCls, css`
-      position: absolute;
-      z-index: 2;
-      inset-block-start: 8px;
-      inset-inline-end: 8px;
-
-      padding: 4px;
-      border-radius: ${cssVar.borderRadiusLG};
-
-      opacity: 0;
-      background: ${cssVar.colorBgContainer};
-      backdrop-filter: blur(8px);
-      box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};
-
-      transition: opacity 0.2s ${cssVar.motionEaseOut};
-
-      &:focus-within {
-        opacity: 1;
-      }
-    `)
-}));
+const segmentedStyles = {
+	indicator: { borderRadius: cssVar.borderRadiusXS },
+	item: {
+		borderRadius: cssVar.borderRadiusXS,
+		fontSize: 14,
+		fontWeight: 400,
+		height: 23,
+		paddingInline: 7
+	},
+	root: {
+		borderRadius: cssVar.borderRadiusSM,
+		gap: 0,
+		padding: 2
+	}
+};
 const themeBackground = (theme) => {
 	if (theme === "dark") return "#1f1f1f";
 	if (theme === "light") return "#ffffff";
@@ -291,12 +193,12 @@ const HtmlPreview = memo(({ actionIconSize, actionsRender, animated, bodyRender,
 		throttledContent
 	]);
 	const loadingBody = useMemo(() => /* @__PURE__ */ jsxs("div", {
-		className: styles.loadingRoot,
+		...stylex.props(styles.loadingRoot),
 		style: { height: defaultHeight ?? 400 },
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: styles.loadingSource,
 				ref: loadingSourceRef,
+				...styleProps(styles.loadingSource, "lobe-html-preview-loading-source"),
 				children: /* @__PURE__ */ jsx(SyntaxHighlighter, {
 					animated,
 					language: "html",
@@ -304,9 +206,9 @@ const HtmlPreview = memo(({ actionIconSize, actionsRender, animated, bodyRender,
 					children: trimmedChildren
 				})
 			}),
-			/* @__PURE__ */ jsx("div", { className: styles.loadingBackdrop }),
+			/* @__PURE__ */ jsx("div", { ...stylex.props(styles.loadingBackdrop) }),
 			/* @__PURE__ */ jsxs("div", {
-				className: styles.loadingBadge,
+				...stylex.props(styles.loadingBadge),
 				children: [/* @__PURE__ */ jsx(Spin, {
 					size: 16,
 					variant: "network"
@@ -344,12 +246,8 @@ const HtmlPreview = memo(({ actionIconSize, actionsRender, animated, bodyRender,
 		!isFragment && /* @__PURE__ */ jsx(Segmented, {
 			options: segmentOptions,
 			size: "small",
+			styles: segmentedStyles,
 			value: effectiveMode,
-			classNames: {
-				indicator: styles.segmentedIndicator,
-				item: styles.segmentedItem,
-				root: styles.segmented
-			},
 			onChange: (v) => setMode(v)
 		}),
 		copyable && /* @__PURE__ */ jsx(CopyButton, {
@@ -378,22 +276,21 @@ const HtmlPreview = memo(({ actionIconSize, actionsRender, animated, bodyRender,
 		setMode
 	}) : originalActions;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(variants({
-			shadow,
-			variant
-		}), className),
 		"data-code-type": "html-preview",
 		"data-html-preview-language": language,
-		style,
 		...rest,
+		...styleProps(rootStyles({
+			shadow,
+			variant
+		}), rootClassName(false, className), style),
 		children: [/* @__PURE__ */ jsx(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
-			className: cx(styles.toolbar, classNames?.header),
 			flex: "none",
 			gap: 4,
-			style: customStyles?.header,
+			padding: 4,
 			onClick: stopPropagation,
+			...styleProps(styles.toolbar, clsx$1(actionsHoverCls, classNames?.header), customStyles?.header),
 			children: actions
 		}), body]
 	});

package/es/HtmlPreview/HtmlPreview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HtmlPreview.mjs","names":["Flexbox"],"sources":["../../src/HtmlPreview/HtmlPreview.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx, keyframes } from 'antd-style';\nimport { Download, Expand } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport Segmented from '@/base-ui/Segmented';\nimport Spin from '@/base-ui/Spin';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { actionsHoverCls, variants } from '@/Highlighter/style';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport { stopPropagation } from '@/utils/dom';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { containsScript, DEFAULT_HEIGHT, isFullHtmlDocument, isHtmlContentClosed } from './const';\nimport HtmlPreviewIframe from './Iframe';\nimport type { HtmlPreviewMode, HtmlPreviewProps } from './type';\n\n// Sheen sweep direction: left → right.\n// `background-position` works inversely from \"where the image is drawn\":\n// at `200%` the over-sized gradient starts off to the left of the\n// container, at `-200%` it ends off to the right — so animating\n// 200% → -200% moves the visible bright spot from left to right.\nconst shimmer = keyframes`\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n`;\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n  loadingBackdrop: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n\n    /* Subtle moving sheen so it doesn't look frozen. */\n    background: linear-gradient(\n      90deg,\n      transparent 0%,\n      color-mix(in srgb, ${cssVar.colorText} 4%, transparent) 50%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 200% 100%;\n\n    animation: ${shimmer} 1.6s ${cssVar.motionEaseInOut} infinite;\n  `,\n  loadingBadge: css`\n    position: absolute;\n    z-index: 2;\n    inset-block-start: 12px;\n    inset-inline-start: 12px;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    padding-block: 4px;\n    padding-inline: 6px 10px;\n    border-radius: 999px;\n\n    font-size: 12px;\n    color: ${cssVar.colorTextDescription};\n\n    background: ${cssVar.colorBgContainer};\n    backdrop-filter: blur(8px);\n    box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n  `,\n  // The streaming source visible during Phase 1 — heavily faded so it\n  // reads as \"this is preview-pending content\" rather than the finished\n  // article. Auto-follows the tail so the user can see new tokens land\n  // even on slow models.\n  loadingSource: css`\n    pointer-events: none;\n    overflow: hidden;\n    height: 100%;\n\n    /* Faded out so the iframe transition feels like content lighting up,\n       not like one document jump-cutting to another. */\n    opacity: 0.45;\n\n    /* SyntaxHighlighter sets its own background; flatten so the shimmer\n       overlay reads cleanly on top. */\n    & [data-code-type='highlighter'] {\n      background: transparent;\n      box-shadow: none;\n    }\n\n    /* Tail-follow is layout-only — we anchor the scrollable element to\n       its scrollHeight via the ref + effect; CSS just keeps the\n       overflow hidden. */\n    & pre,\n    & code {\n      background: transparent !important;\n    }\n  `,\n  loadingRoot: css`\n    position: relative;\n    overflow: hidden;\n    background: color-mix(in srgb, ${cssVar.colorText} 3%, ${cssVar.colorBgContainer});\n  `,\n  segmented: css`\n    && {\n      gap: 0;\n      padding: 2px;\n      border-radius: ${cssVar.borderRadiusSM};\n    }\n  `,\n  segmentedIndicator: css`\n    && {\n      border-radius: ${cssVar.borderRadiusXS};\n    }\n  `,\n  segmentedItem: css`\n    && {\n      height: 23px;\n      padding-inline: 7px;\n      border-radius: ${cssVar.borderRadiusXS};\n\n      font-size: 14px;\n      font-weight: 400;\n    }\n  `,\n  // Inline top-right toolbar. Tagged with `actionsHoverCls` so the Highlighter\n  // container's `&:hover .${actionsHoverCls} { opacity: 1 }` rule flips it\n  // in/out as the user moves over the preview — same UX as the regular code\n  // block actions.\n  toolbar: cx(\n    actionsHoverCls,\n    css`\n      position: absolute;\n      z-index: 2;\n      inset-block-start: 8px;\n      inset-inline-end: 8px;\n\n      padding: 4px;\n      border-radius: ${cssVar.borderRadiusLG};\n\n      opacity: 0;\n      background: ${cssVar.colorBgContainer};\n      backdrop-filter: blur(8px);\n      box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n      transition: opacity 0.2s ${cssVar.motionEaseOut};\n\n      &:focus-within {\n        opacity: 1;\n      }\n    `,\n  ),\n}));\n\nconst themeBackground = (theme?: 'light' | 'dark') => {\n  if (theme === 'dark') return '#1f1f1f';\n  if (theme === 'light') return '#ffffff';\n  return undefined;\n};\n\nconst downloadHtml = async (content: string, fileName: string) => {\n  const blob = new Blob([content], { type: 'text/html;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  try {\n    await downloadBlob(url, fileName);\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n};\n\nconst HtmlPreview = memo<HtmlPreviewProps>(\n  ({\n    actionIconSize,\n    actionsRender,\n    animated,\n    bodyRender,\n    children,\n    className,\n    classNames,\n    copyable = true,\n    defaultHeight,\n    defaultMode = 'preview',\n    downloadable = true,\n    fileName,\n    language = 'html',\n    onExpand,\n    sandbox,\n    shadow,\n    streamingMode = 'auto',\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    // `fullFeatured` / `showLanguage` / `defaultExpand` are accepted for API\n    // compatibility with the rest of the Pre family but no longer drive a\n    // separate header — the inline toolbar is always rendered.\n    fullFeatured: _fullFeatured,\n    showLanguage: _showLanguage,\n    defaultExpand: _defaultExpand,\n    ...rest\n  }) => {\n    const trimmedChildren = useMemo(() => (children || '').trim(), [children]);\n    const isFragment = useMemo(() => !isFullHtmlDocument(trimmedChildren), [trimmedChildren]);\n\n    // Per-session tracking. Reset on `animated` edge false → true.\n    const [scriptLocked, setScriptLocked] = useState(false);\n    const [headClosed, setHeadClosed] = useState(false);\n    const [liveCommitted, setLiveCommitted] = useState(false);\n    const prevAnimatedRef = useRef(animated);\n    const lastCommitRef = useRef(0);\n    const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const latestContentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      latestContentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n    useEffect(() => {\n      if (animated && !prevAnimatedRef.current) {\n        setScriptLocked(false);\n        setHeadClosed(false);\n        setLiveCommitted(false);\n        lastCommitRef.current = 0;\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n      }\n      prevAnimatedRef.current = animated;\n    }, [animated]);\n\n    // Sticky script detection: once a `<script>` appears in this session,\n    // auto mode locks into defer.\n    useEffect(() => {\n      if (animated && !scriptLocked && containsScript(trimmedChildren)) {\n        setScriptLocked(true);\n      }\n    }, [trimmedChildren, animated, scriptLocked]);\n\n    // Track whether the head section has closed. Until it does, the iframe\n    // would render either nothing or invalid HTML (style tag mid-stream).\n    // After `</head>` (or `</style>` as a fallback for documents that skip\n    // an explicit head close) we know the visual baseline is locked in.\n    useEffect(() => {\n      if (animated && !headClosed) {\n        const lowered = trimmedChildren.toLowerCase();\n        if (lowered.includes('</head>') || lowered.includes('</style>')) {\n          setHeadClosed(true);\n        }\n      }\n    }, [trimmedChildren, animated, headClosed]);\n\n    // Two-phase streaming commit:\n    //   Phase 1 (head still streaming) — don't mount iframe at all. There's\n    //     nothing meaningful to render and styles aren't applied yet.\n    //   Phase 2 (head closed, body streaming) — commit at most once every\n    //     ~250ms. Important: this is a TRUE throttle, not a debounce. The\n    //     pending timer is held in a ref so it survives effect re-runs;\n    //     when it fires it commits the latest content (via another ref)\n    //     and clears itself, allowing a fresh schedule. If chunks come in\n    //     faster than the throttle window (which they do at ~50/sec) we\n    //     still get a commit every 250ms instead of waiting for streaming\n    //     to pause.\n    //   On streaming end → flush immediately, cancel any pending timer.\n    const [throttledContent, setThrottledContent] = useState(trimmedChildren);\n    useEffect(() => {\n      if (!animated) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = Date.now();\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n      if (!headClosed) return;\n\n      const throttleMs = 250;\n      const now = Date.now();\n      const elapsed = now - lastCommitRef.current;\n\n      if (elapsed >= throttleMs) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = now;\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n\n      // Schedule a future commit, but only if one isn't already pending —\n      // every chunk arrival re-runs this effect; we don't want to reset\n      // the timer each time (that's debounce, and during continuous\n      // streaming it would never fire).\n      if (pendingTimerRef.current === null) {\n        pendingTimerRef.current = setTimeout(() => {\n          lastCommitRef.current = Date.now();\n          pendingTimerRef.current = null;\n          setThrottledContent(latestContentRef.current);\n        }, throttleMs - elapsed);\n      }\n    }, [trimmedChildren, animated, headClosed]);\n    useEffect(\n      () => () => {\n        if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);\n      },\n      [],\n    );\n\n    // Live-streaming commitment is sticky for the rest of the session. The\n    // decision is made the moment the head seals:\n    //   • `live` → commit unconditionally\n    //   • `auto` → commit only if no `<script>` has appeared yet (script-\n    //     bearing docs go down the defer path to avoid running setup() on\n    //     partial source)\n    //   • `defer` → never commit; wait for `</html>`\n    // Sticky-ness matters for `auto`: if a `<script>` arrives *after* the\n    // head has already closed and we've started live-streaming, we keep\n    // streaming rather than yanking the rendered content back into a\n    // loading state mid-flight. The shell→static swap at end of streaming\n    // re-runs the document cleanly anyway.\n    useEffect(() => {\n      if (!animated || liveCommitted || !headClosed) return;\n      if (streamingMode === 'live' || (streamingMode === 'auto' && !scriptLocked)) {\n        setLiveCommitted(true);\n      }\n    }, [animated, headClosed, liveCommitted, scriptLocked, streamingMode]);\n\n    // Streaming gate. The iframe can mount in three situations:\n    //   1. content is no longer animating\n    //   2. `</html>` has arrived\n    //   3. live streaming has been committed this session\n    const isStable = !animated || isHtmlContentClosed(trimmedChildren) || liveCommitted;\n\n    const [mode, setMode] = useState<HtmlPreviewMode>(defaultMode);\n\n    // Fragments cannot meaningfully render in preview — force source view.\n    // For streaming content that's not yet stable we keep the user's mode\n    // choice and substitute a loading placeholder in the body instead, so\n    // the toggle UI doesn't flip back and forth as content arrives.\n    const effectiveMode: HtmlPreviewMode = isFragment ? 'source' : mode;\n\n    const contentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      contentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n\n    // Tail-follow the streaming source visible during Phase 1 — anchor\n    // the scroll position to the latest tokens so a slow model's output\n    // doesn't sit pinned to the document head while the user waits.\n    const loadingSourceRef = useRef<HTMLDivElement | null>(null);\n    useEffect(() => {\n      if (isStable) return;\n      const node = loadingSourceRef.current;\n      if (!node) return;\n      node.scrollTop = node.scrollHeight;\n    }, [trimmedChildren, isStable]);\n\n    const getCopyContent = useCallback(() => contentRef.current, []);\n\n    const handleDownload = useCallback(() => {\n      void downloadHtml(contentRef.current, fileName || 'preview.html');\n    }, [fileName]);\n\n    const handleExpand = useCallback(() => {\n      onExpand?.(contentRef.current);\n    }, [onExpand]);\n\n    const background = themeBackground(theme);\n\n    const sourceBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          language={'html'}\n          style={{ height: '100%', ...customStyles?.content }}\n          variant={variant}\n        >\n          {trimmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [animated, classNames?.content, customStyles?.content, trimmedChildren, variant],\n    );\n\n    const iframeBody = useMemo(\n      () => (\n        <HtmlPreviewIframe\n          animated={animated}\n          background={background}\n          className={classNames?.iframe}\n          content={throttledContent}\n          defaultHeight={defaultHeight}\n          sandbox={sandbox}\n          style={customStyles?.iframe}\n        />\n      ),\n      [\n        background,\n        classNames?.iframe,\n        customStyles?.iframe,\n        defaultHeight,\n        sandbox,\n        throttledContent,\n      ],\n    );\n\n    // Shown when the user is on preview mode but the iframe isn't ready\n    // yet (Phase 1 of streaming: head still arriving). Holds the eventual\n    // iframe height to avoid layout shift on mount.\n    //\n    // Stream the raw source through `SyntaxHighlighter` at low opacity so\n    // the user sees real progress on slow models (a 30-tps DeepSeek\n    // pumping a ~5 KB head can otherwise sit on a static spinner for\n    // 20+ seconds). A small \"Preparing preview…\" badge keeps the loading\n    // state unambiguous. Tail-follow keeps the visible region anchored\n    // to the latest tokens — see the `useEffect` below.\n    const loadingBody = useMemo(\n      () => (\n        <div className={styles.loadingRoot} style={{ height: defaultHeight ?? DEFAULT_HEIGHT }}>\n          <div className={styles.loadingSource} ref={loadingSourceRef}>\n            <SyntaxHighlighter animated={animated} language={'html'} variant={'borderless'}>\n              {trimmedChildren}\n            </SyntaxHighlighter>\n          </div>\n          <div className={styles.loadingBackdrop} />\n          <div className={styles.loadingBadge}>\n            <Spin size={16} variant=\"network\" />\n            <span>Preparing preview…</span>\n          </div>\n        </div>\n      ),\n      [animated, defaultHeight, trimmedChildren],\n    );\n\n    const previewBody = isStable ? iframeBody : loadingBody;\n\n    const defaultBody = effectiveMode === 'preview' ? previewBody : sourceBody;\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({\n        content: trimmedChildren,\n        mode: effectiveMode,\n        originalNode: defaultBody,\n      });\n    }, [bodyRender, defaultBody, effectiveMode, trimmedChildren]);\n\n    const segmentOptions = useMemo(\n      () => [\n        { label: 'Preview', value: 'preview' as const },\n        { label: 'Source', value: 'source' as const },\n      ],\n      [],\n    );\n\n    const iconSize = actionIconSize || 'small';\n\n    const originalActions: ReactNode = (\n      <>\n        {!isFragment && (\n          <Segmented\n            options={segmentOptions}\n            size={'small'}\n            value={effectiveMode}\n            classNames={{\n              indicator: styles.segmentedIndicator,\n              item: styles.segmentedItem,\n              root: styles.segmented,\n            }}\n            onChange={(v) => setMode(v as HtmlPreviewMode)}\n          />\n        )}\n        {copyable && <CopyButton content={getCopyContent} size={iconSize} />}\n        {downloadable && (\n          <ActionIcon\n            icon={Download}\n            size={iconSize}\n            title={'Download HTML'}\n            onClick={handleDownload}\n          />\n        )}\n        {onExpand && (\n          <ActionIcon\n            icon={Expand}\n            size={iconSize}\n            title={'Open full preview'}\n            onClick={handleExpand}\n          />\n        )}\n      </>\n    );\n\n    const actions = actionsRender\n      ? actionsRender({\n          actionIconSize: iconSize,\n          content: trimmedChildren,\n          getContent: getCopyContent,\n          mode: effectiveMode,\n          originalNode: originalActions,\n          setMode,\n        })\n      : originalActions;\n\n    return (\n      <div\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"html-preview\"\n        data-html-preview-language={language}\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.toolbar, classNames?.header)}\n          flex={'none'}\n          gap={4}\n          style={customStyles?.header}\n          onClick={stopPropagation}\n        >\n          {actions}\n        </Flexbox>\n        {body}\n      </div>\n    );\n  },\n);\n\nHtmlPreview.displayName = 'HtmlPreview';\n\nexport default HtmlPreview;\n"],"mappings":"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"}
+{"version":3,"file":"HtmlPreview.mjs","names":["Flexbox","clsx"],"sources":["../../src/HtmlPreview/HtmlPreview.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Download, Expand } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { actionsHoverCls, rootClassName, rootStyles } from '@/Highlighter/style';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport Segmented, { type SegmentedStyles } from '@/Segmented';\nimport Spin from '@/Spin';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stopPropagation } from '@/utils/dom';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { containsScript, DEFAULT_HEIGHT, isFullHtmlDocument, isHtmlContentClosed } from './const';\nimport HtmlPreviewIframe from './Iframe';\nimport { styles } from './style';\nimport type { HtmlPreviewMode, HtmlPreviewProps } from './type';\n\nconst segmentedStyles: SegmentedStyles = {\n  indicator: { borderRadius: cssVar.borderRadiusXS },\n  item: {\n    borderRadius: cssVar.borderRadiusXS,\n    fontSize: 14,\n    fontWeight: 400,\n    height: 23,\n    paddingInline: 7,\n  },\n  root: { borderRadius: cssVar.borderRadiusSM, gap: 0, padding: 2 },\n};\n\nconst themeBackground = (theme?: 'light' | 'dark') => {\n  if (theme === 'dark') return '#1f1f1f';\n  if (theme === 'light') return '#ffffff';\n  return undefined;\n};\n\nconst downloadHtml = async (content: string, fileName: string) => {\n  const blob = new Blob([content], { type: 'text/html;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  try {\n    await downloadBlob(url, fileName);\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n};\n\nconst HtmlPreview = memo<HtmlPreviewProps>(\n  ({\n    actionIconSize,\n    actionsRender,\n    animated,\n    bodyRender,\n    children,\n    className,\n    classNames,\n    copyable = true,\n    defaultHeight,\n    defaultMode = 'preview',\n    downloadable = true,\n    fileName,\n    language = 'html',\n    onExpand,\n    sandbox,\n    shadow,\n    streamingMode = 'auto',\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    // `fullFeatured` / `showLanguage` / `defaultExpand` are accepted for API\n    // compatibility with the rest of the Pre family but no longer drive a\n    // separate header — the inline toolbar is always rendered.\n    fullFeatured: _fullFeatured,\n    showLanguage: _showLanguage,\n    defaultExpand: _defaultExpand,\n    ...rest\n  }) => {\n    const trimmedChildren = useMemo(() => (children || '').trim(), [children]);\n    const isFragment = useMemo(() => !isFullHtmlDocument(trimmedChildren), [trimmedChildren]);\n\n    // Per-session tracking. Reset on `animated` edge false → true.\n    const [scriptLocked, setScriptLocked] = useState(false);\n    const [headClosed, setHeadClosed] = useState(false);\n    const [liveCommitted, setLiveCommitted] = useState(false);\n    const prevAnimatedRef = useRef(animated);\n    const lastCommitRef = useRef(0);\n    const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const latestContentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      latestContentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n    useEffect(() => {\n      if (animated && !prevAnimatedRef.current) {\n        setScriptLocked(false);\n        setHeadClosed(false);\n        setLiveCommitted(false);\n        lastCommitRef.current = 0;\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n      }\n      prevAnimatedRef.current = animated;\n    }, [animated]);\n\n    // Sticky script detection: once a `<script>` appears in this session,\n    // auto mode locks into defer.\n    useEffect(() => {\n      if (animated && !scriptLocked && containsScript(trimmedChildren)) {\n        setScriptLocked(true);\n      }\n    }, [trimmedChildren, animated, scriptLocked]);\n\n    // Track whether the head section has closed. Until it does, the iframe\n    // would render either nothing or invalid HTML (style tag mid-stream).\n    // After `</head>` (or `</style>` as a fallback for documents that skip\n    // an explicit head close) we know the visual baseline is locked in.\n    useEffect(() => {\n      if (animated && !headClosed) {\n        const lowered = trimmedChildren.toLowerCase();\n        if (lowered.includes('</head>') || lowered.includes('</style>')) {\n          setHeadClosed(true);\n        }\n      }\n    }, [trimmedChildren, animated, headClosed]);\n\n    // Two-phase streaming commit:\n    //   Phase 1 (head still streaming) — don't mount iframe at all. There's\n    //     nothing meaningful to render and styles aren't applied yet.\n    //   Phase 2 (head closed, body streaming) — commit at most once every\n    //     ~250ms. Important: this is a TRUE throttle, not a debounce. The\n    //     pending timer is held in a ref so it survives effect re-runs;\n    //     when it fires it commits the latest content (via another ref)\n    //     and clears itself, allowing a fresh schedule. If chunks come in\n    //     faster than the throttle window (which they do at ~50/sec) we\n    //     still get a commit every 250ms instead of waiting for streaming\n    //     to pause.\n    //   On streaming end → flush immediately, cancel any pending timer.\n    const [throttledContent, setThrottledContent] = useState(trimmedChildren);\n    useEffect(() => {\n      if (!animated) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = Date.now();\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n      if (!headClosed) return;\n\n      const throttleMs = 250;\n      const now = Date.now();\n      const elapsed = now - lastCommitRef.current;\n\n      if (elapsed >= throttleMs) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = now;\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n\n      // Schedule a future commit, but only if one isn't already pending —\n      // every chunk arrival re-runs this effect; we don't want to reset\n      // the timer each time (that's debounce, and during continuous\n      // streaming it would never fire).\n      if (pendingTimerRef.current === null) {\n        pendingTimerRef.current = setTimeout(() => {\n          lastCommitRef.current = Date.now();\n          pendingTimerRef.current = null;\n          setThrottledContent(latestContentRef.current);\n        }, throttleMs - elapsed);\n      }\n    }, [trimmedChildren, animated, headClosed]);\n    useEffect(\n      () => () => {\n        if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);\n      },\n      [],\n    );\n\n    // Live-streaming commitment is sticky for the rest of the session. The\n    // decision is made the moment the head seals:\n    //   • `live` → commit unconditionally\n    //   • `auto` → commit only if no `<script>` has appeared yet (script-\n    //     bearing docs go down the defer path to avoid running setup() on\n    //     partial source)\n    //   • `defer` → never commit; wait for `</html>`\n    // Sticky-ness matters for `auto`: if a `<script>` arrives *after* the\n    // head has already closed and we've started live-streaming, we keep\n    // streaming rather than yanking the rendered content back into a\n    // loading state mid-flight. The shell→static swap at end of streaming\n    // re-runs the document cleanly anyway.\n    useEffect(() => {\n      if (!animated || liveCommitted || !headClosed) return;\n      if (streamingMode === 'live' || (streamingMode === 'auto' && !scriptLocked)) {\n        setLiveCommitted(true);\n      }\n    }, [animated, headClosed, liveCommitted, scriptLocked, streamingMode]);\n\n    // Streaming gate. The iframe can mount in three situations:\n    //   1. content is no longer animating\n    //   2. `</html>` has arrived\n    //   3. live streaming has been committed this session\n    const isStable = !animated || isHtmlContentClosed(trimmedChildren) || liveCommitted;\n\n    const [mode, setMode] = useState<HtmlPreviewMode>(defaultMode);\n\n    // Fragments cannot meaningfully render in preview — force source view.\n    // For streaming content that's not yet stable we keep the user's mode\n    // choice and substitute a loading placeholder in the body instead, so\n    // the toggle UI doesn't flip back and forth as content arrives.\n    const effectiveMode: HtmlPreviewMode = isFragment ? 'source' : mode;\n\n    const contentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      contentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n\n    // Tail-follow the streaming source visible during Phase 1 — anchor\n    // the scroll position to the latest tokens so a slow model's output\n    // doesn't sit pinned to the document head while the user waits.\n    const loadingSourceRef = useRef<HTMLDivElement | null>(null);\n    useEffect(() => {\n      if (isStable) return;\n      const node = loadingSourceRef.current;\n      if (!node) return;\n      node.scrollTop = node.scrollHeight;\n    }, [trimmedChildren, isStable]);\n\n    const getCopyContent = useCallback(() => contentRef.current, []);\n\n    const handleDownload = useCallback(() => {\n      void downloadHtml(contentRef.current, fileName || 'preview.html');\n    }, [fileName]);\n\n    const handleExpand = useCallback(() => {\n      onExpand?.(contentRef.current);\n    }, [onExpand]);\n\n    const background = themeBackground(theme);\n\n    const sourceBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          language={'html'}\n          style={{ height: '100%', ...customStyles?.content }}\n          variant={variant}\n        >\n          {trimmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [animated, classNames?.content, customStyles?.content, trimmedChildren, variant],\n    );\n\n    const iframeBody = useMemo(\n      () => (\n        <HtmlPreviewIframe\n          animated={animated}\n          background={background}\n          className={classNames?.iframe}\n          content={throttledContent}\n          defaultHeight={defaultHeight}\n          sandbox={sandbox}\n          style={customStyles?.iframe}\n        />\n      ),\n      [\n        background,\n        classNames?.iframe,\n        customStyles?.iframe,\n        defaultHeight,\n        sandbox,\n        throttledContent,\n      ],\n    );\n\n    // Shown when the user is on preview mode but the iframe isn't ready\n    // yet (Phase 1 of streaming: head still arriving). Holds the eventual\n    // iframe height to avoid layout shift on mount.\n    //\n    // Stream the raw source through `SyntaxHighlighter` at low opacity so\n    // the user sees real progress on slow models (a 30-tps DeepSeek\n    // pumping a ~5 KB head can otherwise sit on a static spinner for\n    // 20+ seconds). A small \"Preparing preview…\" badge keeps the loading\n    // state unambiguous. Tail-follow keeps the visible region anchored\n    // to the latest tokens — see the `useEffect` below.\n    const loadingBody = useMemo(\n      () => (\n        <div\n          {...stylex.props(styles.loadingRoot)}\n          style={{ height: defaultHeight ?? DEFAULT_HEIGHT }}\n        >\n          <div\n            ref={loadingSourceRef}\n            {...styleProps(styles.loadingSource, 'lobe-html-preview-loading-source')}\n          >\n            <SyntaxHighlighter animated={animated} language={'html'} variant={'borderless'}>\n              {trimmedChildren}\n            </SyntaxHighlighter>\n          </div>\n          <div {...stylex.props(styles.loadingBackdrop)} />\n          <div {...stylex.props(styles.loadingBadge)}>\n            <Spin size={16} variant=\"network\" />\n            <span>Preparing preview…</span>\n          </div>\n        </div>\n      ),\n      [animated, defaultHeight, trimmedChildren],\n    );\n\n    const previewBody = isStable ? iframeBody : loadingBody;\n\n    const defaultBody = effectiveMode === 'preview' ? previewBody : sourceBody;\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({\n        content: trimmedChildren,\n        mode: effectiveMode,\n        originalNode: defaultBody,\n      });\n    }, [bodyRender, defaultBody, effectiveMode, trimmedChildren]);\n\n    const segmentOptions = useMemo(\n      () => [\n        { label: 'Preview', value: 'preview' as const },\n        { label: 'Source', value: 'source' as const },\n      ],\n      [],\n    );\n\n    const iconSize = actionIconSize || 'small';\n\n    const originalActions: ReactNode = (\n      <>\n        {!isFragment && (\n          <Segmented\n            options={segmentOptions}\n            size={'small'}\n            styles={segmentedStyles}\n            value={effectiveMode}\n            onChange={(v) => setMode(v as HtmlPreviewMode)}\n          />\n        )}\n        {copyable && <CopyButton content={getCopyContent} size={iconSize} />}\n        {downloadable && (\n          <ActionIcon\n            icon={Download}\n            size={iconSize}\n            title={'Download HTML'}\n            onClick={handleDownload}\n          />\n        )}\n        {onExpand && (\n          <ActionIcon\n            icon={Expand}\n            size={iconSize}\n            title={'Open full preview'}\n            onClick={handleExpand}\n          />\n        )}\n      </>\n    );\n\n    const actions = actionsRender\n      ? actionsRender({\n          actionIconSize: iconSize,\n          content: trimmedChildren,\n          getContent: getCopyContent,\n          mode: effectiveMode,\n          originalNode: originalActions,\n          setMode,\n        })\n      : originalActions;\n\n    return (\n      <div\n        data-code-type=\"html-preview\"\n        data-html-preview-language={language}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(false, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          flex={'none'}\n          gap={4}\n          padding={4}\n          onClick={stopPropagation}\n          {...styleProps(\n            styles.toolbar,\n            clsx(actionsHoverCls, classNames?.header),\n            customStyles?.header,\n          )}\n        >\n          {actions}\n        </Flexbox>\n        {body}\n      </div>\n    );\n  },\n);\n\nHtmlPreview.displayName = 'HtmlPreview';\n\nexport default HtmlPreview;\n"],"mappings":"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"}

package/es/HtmlPreview/Iframe.d.mts

@@ -1,6 +1,6 @@
 import { HtmlPreviewIframeProps } from "./type.mjs";
 //#region src/HtmlPreview/Iframe.d.ts
-declare const HtmlPreviewIframe: import("react").NamedExoticComponent<HtmlPreviewIframeProps>;
+export declare const HtmlPreviewIframe: import("react").NamedExoticComponent<HtmlPreviewIframeProps>;
 //#endregion
-export { HtmlPreviewIframe, HtmlPreviewIframe as default };
+export { HtmlPreviewIframe as default };
 //# sourceMappingURL=Iframe.d.mts.map

package/es/HtmlPreview/Iframe.mjs

@@ -1,25 +1,13 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
 import { DEFAULT_SANDBOX, SRCDOC_MAX_LENGTH } from "./const.mjs";
 import "./injectAutoHeightScript.mjs";
 import { SHELL_UPDATE_MESSAGE_TYPE, buildShellSrcDoc } from "./buildShellSrcDoc.mjs";
 import { buildStaticSrcDoc } from "./buildStaticSrcDoc.mjs";
+import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { createStaticStyles, cx } from "antd-style";
 //#region src/HtmlPreview/Iframe.tsx
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	fallback: css`
-    padding: 16px;
-    font-size: 13px;
-    color: ${cssVar.colorTextDescription};
-  `,
-	iframe: css`
-    display: block;
-    width: 100%;
-    border: none;
-    background: transparent;
-  `
-}));
 const headSealedPattern = /<\/head\s*>|<body[\s>]/i;
 const isHeadSealed = (raw) => headSealedPattern.test(raw);
 const parseContent = (() => {
@@ -133,22 +121,20 @@ const HtmlPreviewIframe = memo(({ animated, background, content, className, defa
 		else if (ref) ref.current = node;
 	}, [ref]);
 	if (tooLarge) return /* @__PURE__ */ jsx("div", {
-		className: cx(styles.fallback, className),
-		style,
+		...styleProps(styles.fallback, className, style),
 		children: "Content too large to preview inline."
 	});
 	const srcDoc = staticSrcDoc ?? shellSrcDoc ?? "";
 	const iframeKey = animated ? "shell" : "static";
 	return /* @__PURE__ */ jsx("iframe", {
-		className: cx(styles.iframe, className),
 		ref: setRef,
 		sandbox,
 		srcDoc,
-		style: {
+		title,
+		...styleProps(styles.iframe, className, {
 			height,
 			...style
-		},
-		title
+		})
 	}, iframeKey);
 });
 HtmlPreviewIframe.displayName = "HtmlPreviewIframe";

package/es/HtmlPreview/Iframe.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Iframe.mjs","names":[],"sources":["../../src/HtmlPreview/Iframe.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { buildShellSrcDoc, SHELL_UPDATE_MESSAGE_TYPE } from './buildShellSrcDoc';\nimport { buildStaticSrcDoc } from './buildStaticSrcDoc';\nimport { DEFAULT_HEIGHT, DEFAULT_SANDBOX, SRCDOC_MAX_LENGTH } from './const';\nimport { AUTO_HEIGHT_MESSAGE_TYPE } from './injectAutoHeightScript';\nimport type { HtmlPreviewIframeProps } from './type';\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n  fallback: css`\n    padding: 16px;\n    font-size: 13px;\n    color: ${cssVar.colorTextDescription};\n  `,\n  iframe: css`\n    display: block;\n    width: 100%;\n    border: none;\n    background: transparent;\n  `,\n}));\n\ninterface Payload {\n  bodyHtml: string;\n  /**\n   * Non-inline-style children of `<head>` serialised in document order:\n   * `<script src=…>`, `<script>…</script>`, `<link>`, `<meta>`, `<base>`,\n   * `<title>` etc. The shell appends/dedupes these into its own head so\n   * head-loaded resources (Tailwind CDN, p5.js, fonts, …) work for full\n   * documents. Inline `<style>` is intentionally excluded — those flow\n   * through `styleContent` so streaming partial CSS grows in place rather\n   * than stacking duplicate `<style>` blocks.\n   *\n   * Empty until the user's `<head>` is *sealed* (a `</head>` close tag has\n   * arrived, or `<body>` has opened — browsers auto-close head at that\n   * point). Holding off prevents partial `src=\"https://cd\"` URLs from\n   * being mounted and 404-ing while the model is still streaming.\n   */\n  headExtrasHtml: string;\n  styleContent: string;\n}\n\n// Head is \"sealed\" as soon as we see a close tag or the body has begun;\n// after that point, additional chunks land in body and head extras won't\n// change.\nconst headSealedPattern = /<\\/head\\s*>|<body[\\s>]/i;\nconst isHeadSealed = (raw: string): boolean => headSealedPattern.test(raw);\n\nconst parseContent = (() => {\n  // Lazy-init: only need one parser instance, and only in the browser.\n  let parser: DOMParser | null = null;\n  return (content: string): Payload | null => {\n    if (typeof window === 'undefined') return null;\n    if (!content) return { bodyHtml: '', headExtrasHtml: '', styleContent: '' };\n    if (!parser) parser = new DOMParser();\n    const doc = parser.parseFromString(content, 'text/html');\n\n    const styleParts: string[] = [];\n    const headExtras: string[] = [];\n\n    if (doc.head) {\n      for (const child of Array.from(doc.head.children)) {\n        if (child.tagName === 'STYLE') {\n          styleParts.push(child.textContent || '');\n        } else {\n          headExtras.push(child.outerHTML);\n        }\n      }\n    }\n\n    return {\n      bodyHtml: doc.body ? doc.body.innerHTML : '',\n      headExtrasHtml: isHeadSealed(content) ? headExtras.join('') : '',\n      styleContent: styleParts.join('\\n'),\n    };\n  };\n})();\n\nexport const HtmlPreviewIframe = memo<HtmlPreviewIframeProps>(\n  ({\n    animated,\n    background,\n    content,\n    className,\n    defaultHeight = DEFAULT_HEIGHT,\n    ref,\n    sandbox = DEFAULT_SANDBOX,\n    style,\n    title = 'HTML preview',\n  }) => {\n    const innerRef = useRef<HTMLIFrameElement | null>(null);\n    const frameId = useId();\n    const [height, setHeight] = useState<number>(defaultHeight);\n    // Track caller-supplied `defaultHeight` in a ref so the (frameId-keyed)\n    // message handler can floor auto-height updates without re-subscribing\n    // every render.\n    const defaultHeightRef = useRef(defaultHeight);\n    useEffect(() => {\n      defaultHeightRef.current = defaultHeight;\n    }, [defaultHeight]);\n\n    const tooLarge = content.length > SRCDOC_MAX_LENGTH;\n\n    // ── Static mode ─────────────────────────────────────────────────────\n    // When the content isn't being streamed we can hand the iframe the\n    // user's HTML directly. The browser's normal HTML parser runs:\n    //   <script src=…> tags fetch and execute as if on a regular page,\n    //   inline <script> blocks run in DOM order, MutationObservers (like\n    //   Tailwind Play CDN's) get the document at its expected lifecycle\n    //   stage. Anything that a model can produce as a standalone web\n    //   page works without special handling on our side.\n    const staticSrcDoc = useMemo(() => {\n      if (animated || tooLarge) return null;\n      return buildStaticSrcDoc({ background, content, frameId });\n    }, [animated, background, content, frameId, tooLarge]);\n\n    // ── Shell mode ─────────────────────────────────────────────────────\n    // For streaming we keep one shell iframe loaded for the lifetime of\n    // the session and pump content updates through postMessage. The\n    // shell's morph script handles in-place DOM diffing + fade-in for\n    // new nodes (see buildShellSrcDoc.ts). Tradeoff: external <script\n    // src> tags appended this way don't always integrate cleanly with\n    // class-engine CDNs, so static content is preferred when possible.\n    const shellSrcDoc = useMemo(() => {\n      if (!animated || tooLarge) return null;\n      return buildShellSrcDoc({ background, frameId });\n    }, [animated, background, frameId, tooLarge]);\n\n    const [shellReady, setShellReady] = useState(false);\n    useEffect(() => {\n      // Each time we swap between shell and static modes (or rebuild the\n      // shell because the theme changed) we need to wait for a fresh\n      // ready ping before posting content.\n      setShellReady(false);\n    }, [shellSrcDoc]);\n\n    const payload = useMemo<Payload | null>(() => {\n      if (!animated || tooLarge) return null;\n      return parseContent(content);\n    }, [animated, content, tooLarge]);\n\n    // Push content into the shell iframe whenever it changes — but only\n    // after the shell has signalled ready, so its listener exists.\n    useEffect(() => {\n      if (!animated) return;\n      if (!shellReady || !payload) return;\n      const win = innerRef.current?.contentWindow;\n      if (!win) return;\n      win.postMessage(\n        {\n          frameId,\n          payload,\n          type: SHELL_UPDATE_MESSAGE_TYPE,\n        },\n        '*',\n      );\n    }, [animated, payload, shellReady, frameId]);\n\n    useEffect(() => {\n      const handler = (event: MessageEvent) => {\n        const data = event.data;\n        if (!data || typeof data !== 'object') return;\n        if (data.frameId !== frameId) return;\n        if (event.source !== innerRef.current?.contentWindow) return;\n\n        if (data.type === `${SHELL_UPDATE_MESSAGE_TYPE}:ready`) {\n          setShellReady(true);\n          return;\n        }\n\n        if (data.type === AUTO_HEIGHT_MESSAGE_TYPE) {\n          const next = Number(data.height);\n          if (!Number.isFinite(next) || next <= 0) return;\n          // Floor at `defaultHeight`. During streaming the shell body\n          // briefly reports a small height between morph commits (empty\n          // body just after head closes, then partial body, etc.) and on\n          // every iframe remount the auto-height starts at body padding\n          // before climbing back to content height. Letting the iframe\n          // shrink to that interim height causes a visible up/down jitter\n          // that reads as flicker — especially under a Markdown wrapper\n          // that re-renders every chunk. Anchoring to the caller's stated\n          // minimum height eliminates that without affecting the final\n          // size: real content taller than `defaultHeight` grows the\n          // iframe; content shorter than it stays at the floor.\n          const floored = Math.max(next, defaultHeightRef.current);\n          setHeight((prev) => (Math.abs(prev - floored) < 1 ? prev : floored));\n        }\n      };\n\n      window.addEventListener('message', handler);\n      return () => window.removeEventListener('message', handler);\n    }, [frameId]);\n\n    const setRef = useCallback(\n      (node: HTMLIFrameElement | null) => {\n        innerRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as { current: HTMLIFrameElement | null }).current = node;\n      },\n      [ref],\n    );\n\n    if (tooLarge) {\n      return (\n        <div className={cx(styles.fallback, className)} style={style}>\n          Content too large to preview inline.\n        </div>\n      );\n    }\n\n    const srcDoc = staticSrcDoc ?? shellSrcDoc ?? '';\n\n    // Key the iframe by mode so React fully unmounts the previous DOM\n    // element when we switch from shell (streaming) to static (finalised).\n    // Setting iframe.srcdoc on an already-loaded element doesn't reliably\n    // re-navigate in Chromium when the previous document was also srcdoc-\n    // based — the new srcdoc attribute lands, but the document doesn't\n    // reload, so the user sees stale (often empty) shell content. A fresh\n    // element forces the browser to parse and load the new srcdoc.\n    const iframeKey = animated ? 'shell' : 'static';\n\n    return (\n      <iframe\n        className={cx(styles.iframe, className)}\n        key={iframeKey}\n        ref={setRef}\n        sandbox={sandbox}\n        srcDoc={srcDoc}\n        style={{ height, ...style }}\n        title={title}\n      />\n    );\n  },\n);\n\nHtmlPreviewIframe.displayName = 'HtmlPreviewIframe';\n\nexport default HtmlPreviewIframe;\n"],"mappings":"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"}
+{"version":3,"file":"Iframe.mjs","names":[],"sources":["../../src/HtmlPreview/Iframe.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { buildShellSrcDoc, SHELL_UPDATE_MESSAGE_TYPE } from './buildShellSrcDoc';\nimport { buildStaticSrcDoc } from './buildStaticSrcDoc';\nimport { DEFAULT_HEIGHT, DEFAULT_SANDBOX, SRCDOC_MAX_LENGTH } from './const';\nimport { AUTO_HEIGHT_MESSAGE_TYPE } from './injectAutoHeightScript';\nimport { styles } from './style';\nimport type { HtmlPreviewIframeProps } from './type';\n\ninterface Payload {\n  bodyHtml: string;\n  /**\n   * Non-inline-style children of `<head>` serialised in document order:\n   * `<script src=…>`, `<script>…</script>`, `<link>`, `<meta>`, `<base>`,\n   * `<title>` etc. The shell appends/dedupes these into its own head so\n   * head-loaded resources (Tailwind CDN, p5.js, fonts, …) work for full\n   * documents. Inline `<style>` is intentionally excluded — those flow\n   * through `styleContent` so streaming partial CSS grows in place rather\n   * than stacking duplicate `<style>` blocks.\n   *\n   * Empty until the user's `<head>` is *sealed* (a `</head>` close tag has\n   * arrived, or `<body>` has opened — browsers auto-close head at that\n   * point). Holding off prevents partial `src=\"https://cd\"` URLs from\n   * being mounted and 404-ing while the model is still streaming.\n   */\n  headExtrasHtml: string;\n  styleContent: string;\n}\n\n// Head is \"sealed\" as soon as we see a close tag or the body has begun;\n// after that point, additional chunks land in body and head extras won't\n// change.\nconst headSealedPattern = /<\\/head\\s*>|<body[\\s>]/i;\nconst isHeadSealed = (raw: string): boolean => headSealedPattern.test(raw);\n\nconst parseContent = (() => {\n  // Lazy-init: only need one parser instance, and only in the browser.\n  let parser: DOMParser | null = null;\n  return (content: string): Payload | null => {\n    if (typeof window === 'undefined') return null;\n    if (!content) return { bodyHtml: '', headExtrasHtml: '', styleContent: '' };\n    if (!parser) parser = new DOMParser();\n    const doc = parser.parseFromString(content, 'text/html');\n\n    const styleParts: string[] = [];\n    const headExtras: string[] = [];\n\n    if (doc.head) {\n      for (const child of Array.from(doc.head.children)) {\n        if (child.tagName === 'STYLE') {\n          styleParts.push(child.textContent || '');\n        } else {\n          headExtras.push(child.outerHTML);\n        }\n      }\n    }\n\n    return {\n      bodyHtml: doc.body ? doc.body.innerHTML : '',\n      headExtrasHtml: isHeadSealed(content) ? headExtras.join('') : '',\n      styleContent: styleParts.join('\\n'),\n    };\n  };\n})();\n\nexport const HtmlPreviewIframe = memo<HtmlPreviewIframeProps>(\n  ({\n    animated,\n    background,\n    content,\n    className,\n    defaultHeight = DEFAULT_HEIGHT,\n    ref,\n    sandbox = DEFAULT_SANDBOX,\n    style,\n    title = 'HTML preview',\n  }) => {\n    const innerRef = useRef<HTMLIFrameElement | null>(null);\n    const frameId = useId();\n    const [height, setHeight] = useState<number>(defaultHeight);\n    // Track caller-supplied `defaultHeight` in a ref so the (frameId-keyed)\n    // message handler can floor auto-height updates without re-subscribing\n    // every render.\n    const defaultHeightRef = useRef(defaultHeight);\n    useEffect(() => {\n      defaultHeightRef.current = defaultHeight;\n    }, [defaultHeight]);\n\n    const tooLarge = content.length > SRCDOC_MAX_LENGTH;\n\n    // ── Static mode ─────────────────────────────────────────────────────\n    // When the content isn't being streamed we can hand the iframe the\n    // user's HTML directly. The browser's normal HTML parser runs:\n    //   <script src=…> tags fetch and execute as if on a regular page,\n    //   inline <script> blocks run in DOM order, MutationObservers (like\n    //   Tailwind Play CDN's) get the document at its expected lifecycle\n    //   stage. Anything that a model can produce as a standalone web\n    //   page works without special handling on our side.\n    const staticSrcDoc = useMemo(() => {\n      if (animated || tooLarge) return null;\n      return buildStaticSrcDoc({ background, content, frameId });\n    }, [animated, background, content, frameId, tooLarge]);\n\n    // ── Shell mode ─────────────────────────────────────────────────────\n    // For streaming we keep one shell iframe loaded for the lifetime of\n    // the session and pump content updates through postMessage. The\n    // shell's morph script handles in-place DOM diffing + fade-in for\n    // new nodes (see buildShellSrcDoc.ts). Tradeoff: external <script\n    // src> tags appended this way don't always integrate cleanly with\n    // class-engine CDNs, so static content is preferred when possible.\n    const shellSrcDoc = useMemo(() => {\n      if (!animated || tooLarge) return null;\n      return buildShellSrcDoc({ background, frameId });\n    }, [animated, background, frameId, tooLarge]);\n\n    const [shellReady, setShellReady] = useState(false);\n    useEffect(() => {\n      // Each time we swap between shell and static modes (or rebuild the\n      // shell because the theme changed) we need to wait for a fresh\n      // ready ping before posting content.\n      setShellReady(false);\n    }, [shellSrcDoc]);\n\n    const payload = useMemo<Payload | null>(() => {\n      if (!animated || tooLarge) return null;\n      return parseContent(content);\n    }, [animated, content, tooLarge]);\n\n    // Push content into the shell iframe whenever it changes — but only\n    // after the shell has signalled ready, so its listener exists.\n    useEffect(() => {\n      if (!animated) return;\n      if (!shellReady || !payload) return;\n      const win = innerRef.current?.contentWindow;\n      if (!win) return;\n      win.postMessage(\n        {\n          frameId,\n          payload,\n          type: SHELL_UPDATE_MESSAGE_TYPE,\n        },\n        '*',\n      );\n    }, [animated, payload, shellReady, frameId]);\n\n    useEffect(() => {\n      const handler = (event: MessageEvent) => {\n        const data = event.data;\n        if (!data || typeof data !== 'object') return;\n        if (data.frameId !== frameId) return;\n        if (event.source !== innerRef.current?.contentWindow) return;\n\n        if (data.type === `${SHELL_UPDATE_MESSAGE_TYPE}:ready`) {\n          setShellReady(true);\n          return;\n        }\n\n        if (data.type === AUTO_HEIGHT_MESSAGE_TYPE) {\n          const next = Number(data.height);\n          if (!Number.isFinite(next) || next <= 0) return;\n          // Floor at `defaultHeight`. During streaming the shell body\n          // briefly reports a small height between morph commits (empty\n          // body just after head closes, then partial body, etc.) and on\n          // every iframe remount the auto-height starts at body padding\n          // before climbing back to content height. Letting the iframe\n          // shrink to that interim height causes a visible up/down jitter\n          // that reads as flicker — especially under a Markdown wrapper\n          // that re-renders every chunk. Anchoring to the caller's stated\n          // minimum height eliminates that without affecting the final\n          // size: real content taller than `defaultHeight` grows the\n          // iframe; content shorter than it stays at the floor.\n          const floored = Math.max(next, defaultHeightRef.current);\n          setHeight((prev) => (Math.abs(prev - floored) < 1 ? prev : floored));\n        }\n      };\n\n      window.addEventListener('message', handler);\n      return () => window.removeEventListener('message', handler);\n    }, [frameId]);\n\n    const setRef = useCallback(\n      (node: HTMLIFrameElement | null) => {\n        innerRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as { current: HTMLIFrameElement | null }).current = node;\n      },\n      [ref],\n    );\n\n    if (tooLarge) {\n      return (\n        <div {...styleProps(styles.fallback, className, style)}>\n          Content too large to preview inline.\n        </div>\n      );\n    }\n\n    const srcDoc = staticSrcDoc ?? shellSrcDoc ?? '';\n\n    // Key the iframe by mode so React fully unmounts the previous DOM\n    // element when we switch from shell (streaming) to static (finalised).\n    // Setting iframe.srcdoc on an already-loaded element doesn't reliably\n    // re-navigate in Chromium when the previous document was also srcdoc-\n    // based — the new srcdoc attribute lands, but the document doesn't\n    // reload, so the user sees stale (often empty) shell content. A fresh\n    // element forces the browser to parse and load the new srcdoc.\n    const iframeKey = animated ? 'shell' : 'static';\n\n    return (\n      <iframe\n        key={iframeKey}\n        ref={setRef}\n        sandbox={sandbox}\n        srcDoc={srcDoc}\n        title={title}\n        {...styleProps(styles.iframe, className, { height, ...style })}\n      />\n    );\n  },\n);\n\nHtmlPreviewIframe.displayName = 'HtmlPreviewIframe';\n\nexport default HtmlPreviewIframe;\n"],"mappings":"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"}

package/es/HtmlPreview/const.d.mts

@@ -15,19 +15,19 @@
  *
  * Override at your own risk via `sandbox` prop.
  */
-declare const DEFAULT_SANDBOX = "allow-scripts allow-forms allow-modals";
-declare const DEFAULT_HEIGHT = 400;
+export declare const DEFAULT_SANDBOX = "allow-scripts allow-forms allow-modals";
+export declare const DEFAULT_HEIGHT = 400;
 /**
  * Is the content a "full" HTML document (has `<html>` or `<!DOCTYPE html>`)?
  * Fragments without these markers render poorly inline and should not auto-mount.
  */
-declare const isFullHtmlDocument: (content: string) => boolean;
+export declare const isFullHtmlDocument: (content: string) => boolean;
 /**
  * Heuristic for whether streaming HTML is "stable enough to mount the iframe".
  * Re-mounting srcDoc on every token reboots scripts (p5.js setup runs each
  * time), so we wait for a clear closing signal.
  */
-declare const isHtmlContentClosed: (content: string) => boolean;
+export declare const isHtmlContentClosed: (content: string) => boolean;
 /**
  * Does the content contain a `<script>` tag?
  *
@@ -36,7 +36,6 @@ declare const isHtmlContentClosed: (content: string) => boolean;
  * don't re-run `setup()` on every token; script-less content (pure
  * markup + styles) streams live for a more responsive feel.
  */
-declare const containsScript: (content: string) => boolean;
+export declare const containsScript: (content: string) => boolean;
 //#endregion
-export { DEFAULT_HEIGHT, DEFAULT_SANDBOX, containsScript, isFullHtmlDocument, isHtmlContentClosed };
 //# sourceMappingURL=const.d.mts.map

package/es/HtmlPreview/injectAutoHeightScript.d.mts

@@ -1,5 +1,4 @@
 //#region src/HtmlPreview/injectAutoHeightScript.d.ts
-declare const AUTO_HEIGHT_MESSAGE_TYPE = "lobe-html-resize";
+export declare const AUTO_HEIGHT_MESSAGE_TYPE = "lobe-html-resize";
 //#endregion
-export { AUTO_HEIGHT_MESSAGE_TYPE };
 //# sourceMappingURL=injectAutoHeightScript.d.mts.map

package/es/HtmlPreview/style.mjs

@@ -0,0 +1,81 @@
+//#region src/HtmlPreview/style.ts
+const styles = {
+	fallback: {
+		kmVPX3: "lb1tamke2",
+		kMwMTN: "lb19ppog9",
+		kGuDYH: "lb4z9k3i",
+		$$css: true
+	},
+	iframe: {
+		kVAM5u: "lb181nr7w",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbfn42iu",
+		kWkggS: "lbjbqb8w",
+		k1xSpc: "lb1lliihq",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	loadingBackdrop: {
+		kpwlN0: "lb10a8y8t",
+		k44tkh: "lb18hd8ej",
+		ko0y90: "lba4qsjk",
+		kKVMdj: "lbq614ke",
+		kyAemX: "lb1c6cyjc",
+		kKwaWg: "lb16grttn",
+		kz484i: "lbiy17q3",
+		kgSjnq: "lbakli9p",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1vjfegm",
+		$$css: true
+	},
+	loadingBadge: {
+		kaIpWk: "lb1e6avla",
+		kOIVth: "lb167g77z",
+		k8WAf4: "lb12ulsxz",
+		kGNEyG: "lb6s0dn4",
+		k6WDB: "lb1dmgsgi",
+		kWkggS: "lb6yijhg",
+		kGVxlE: "lb1f3tbp9",
+		kMwMTN: "lb19ppog9",
+		k1xSpc: "lb3nfvp2",
+		kGuDYH: "lbfifm61",
+		k87sOh: "lb1tk7jg1",
+		kLqNvP: "lb1r4y97",
+		kwRFfy: "lb2vl965",
+		kZCmMZ: "lb25sj25",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lbhtitgo",
+		$$css: true
+	},
+	loadingRoot: {
+		kVQacm: "lbb3r6kr",
+		kWkggS: "lb1h1gsw",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	loadingSource: {
+		kVQacm: "lbb3r6kr",
+		kSiTet: "lbyd83as",
+		kfzvcC: "lb47corl",
+		kZKoxP: "lb5yr21d",
+		$$css: true
+	},
+	toolbar: {
+		kaIpWk: "lb1ndkxwp",
+		kmkexE: "lb1elzuot",
+		k6WDB: "lb1dmgsgi",
+		kWkggS: "lb6yijhg",
+		kGVxlE: "lb1f3tbp9",
+		k87sOh: "lbfr5jun",
+		kt4wiu: "lb11dcrhx",
+		kSiTet: "lbg01cxk lb1euntei",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lbhtitgo",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/HtmlPreview/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/HtmlPreview/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst shimmer = stylex.keyframes({\n  '0%': { backgroundPosition: '200% 0' },\n  '100%': { backgroundPosition: '-200% 0' },\n});\n\nexport const styles = stylex.create({\n  fallback: {\n    padding: 16,\n    color: cssVar.colorTextDescription,\n    fontSize: 13,\n  },\n  iframe: {\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    backgroundColor: 'transparent',\n    display: 'block',\n    width: '100%',\n  },\n  loadingBackdrop: {\n    inset: 0,\n    animationDuration: '1.6s',\n    animationIterationCount: 'infinite',\n    animationName: shimmer,\n    animationTimingFunction: cssVar.motionEaseInOut,\n    backgroundImage: `linear-gradient(90deg, transparent 0%, color-mix(in srgb, ${cssVar.colorText} 4%, transparent) 50%, transparent 100%)`,\n    backgroundRepeat: 'no-repeat',\n    backgroundSize: '200% 100%',\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 1,\n  },\n  loadingBadge: {\n    borderRadius: 999,\n    gap: 8,\n    paddingBlock: 4,\n    alignItems: 'center',\n    backdropFilter: 'blur(8px)',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: `0 0 0 1px ${cssVar.colorBorderSecondary}`,\n    color: cssVar.colorTextDescription,\n    display: 'inline-flex',\n    fontSize: 12,\n    insetBlockStart: 12,\n    insetInlineStart: 12,\n    paddingInlineEnd: 10,\n    paddingInlineStart: 6,\n    position: 'absolute',\n    zIndex: 2,\n  },\n  loadingRoot: {\n    overflow: 'hidden',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorText} 3%, ${cssVar.colorBgContainer})`,\n    position: 'relative',\n  },\n  loadingSource: {\n    overflow: 'hidden',\n    opacity: 0.45,\n    pointerEvents: 'none',\n    height: '100%',\n  },\n  toolbar: {\n    borderRadius: cssVar.borderRadiusLG,\n    transition: `opacity 0.2s ${cssVar.motionEaseOut}`,\n    backdropFilter: 'blur(8px)',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: `0 0 0 1px ${cssVar.colorBorderSecondary}`,\n    insetBlockStart: 8,\n    insetInlineEnd: 8,\n    opacity: { 'default': 0, ':focus-within': 1 },\n    position: 'absolute',\n    zIndex: 2,\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/HtmlPreview/type.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../types/index.mjs";
-import { ActionIconProps } from "../base-ui/ActionIcon/type.mjs";
-import "../base-ui/ActionIcon/index.mjs";
+import { ActionIconProps } from "../ActionIcon/type.mjs";
+import "../ActionIcon/index.mjs";
 import { CSSProperties, ReactNode, Ref } from "react";
 //#region src/HtmlPreview/type.d.ts
-type HtmlPreviewMode = 'preview' | 'source';
+export type HtmlPreviewMode = 'preview' | 'source';
 /**
  * How to handle the preview while content is still streaming (`animated`):
  *
@@ -17,8 +17,8 @@ type HtmlPreviewMode = 'preview' | 'source';
  * - `'auto'` (default) — `defer` if a `<script>` tag is present, otherwise
  *   `live`.
  */
-type HtmlPreviewStreamingMode = 'defer' | 'live' | 'auto';
-interface HtmlPreviewIframeProps {
+export type HtmlPreviewStreamingMode = 'defer' | 'live' | 'auto';
+export interface HtmlPreviewIframeProps {
   /**
    * When `true` the iframe stays mounted as a "shell" and content arrives
    * via postMessage + DOM morph — used during streaming so we can fade
@@ -38,7 +38,7 @@ interface HtmlPreviewIframeProps {
   style?: CSSProperties;
   title?: string;
 }
-interface HtmlPreviewProps extends Omit<DivProps, 'onCopy'> {
+export interface HtmlPreviewProps extends Omit<DivProps, 'onCopy'> {
   actionIconSize?: ActionIconProps['size'];
   actionsRender?: (props: {
     actionIconSize: ActionIconProps['size'];
@@ -110,5 +110,4 @@ interface HtmlPreviewProps extends Omit<DivProps, 'onCopy'> {
   variant?: 'filled' | 'outlined' | 'borderless';
 }
 //#endregion
-export { HtmlPreviewIframeProps, HtmlPreviewMode, HtmlPreviewProps, HtmlPreviewStreamingMode };
 //# sourceMappingURL=type.d.mts.map