@jinmi/ui 0.0.0-stage → 6.0.1

package/es/HtmlPreview/HtmlPreview.mjs

@@ -0,0 +1,405 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.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 { containsScript, isFullHtmlDocument, isHtmlContentClosed } from "./const.mjs";
+import Segmented from "../base-ui/Segmented/Segmented.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 { 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 themeBackground = (theme) => {
+	if (theme === "dark") return "#1f1f1f";
+	if (theme === "light") return "#ffffff";
+};
+const downloadHtml = async (content, fileName) => {
+	const blob = new Blob([content], { type: "text/html;charset=utf-8" });
+	const url = URL.createObjectURL(blob);
+	try {
+		await downloadBlob(url, fileName);
+	} finally {
+		URL.revokeObjectURL(url);
+	}
+};
+const HtmlPreview = memo(({ actionIconSize, actionsRender, animated, bodyRender, children, className, classNames, copyable = true, defaultHeight, defaultMode = "preview", downloadable = true, fileName, language = "html", onExpand, sandbox, shadow, streamingMode = "auto", style, styles: customStyles, theme, variant = "filled", fullFeatured: _fullFeatured, showLanguage: _showLanguage, defaultExpand: _defaultExpand, ...rest }) => {
+	const trimmedChildren = useMemo(() => (children || "").trim(), [children]);
+	const isFragment = useMemo(() => !isFullHtmlDocument(trimmedChildren), [trimmedChildren]);
+	const [scriptLocked, setScriptLocked] = useState(false);
+	const [headClosed, setHeadClosed] = useState(false);
+	const [liveCommitted, setLiveCommitted] = useState(false);
+	const prevAnimatedRef = useRef(animated);
+	const lastCommitRef = useRef(0);
+	const pendingTimerRef = useRef(null);
+	const latestContentRef = useRef(trimmedChildren);
+	useEffect(() => {
+		latestContentRef.current = trimmedChildren;
+	}, [trimmedChildren]);
+	useEffect(() => {
+		if (animated && !prevAnimatedRef.current) {
+			setScriptLocked(false);
+			setHeadClosed(false);
+			setLiveCommitted(false);
+			lastCommitRef.current = 0;
+			if (pendingTimerRef.current) {
+				clearTimeout(pendingTimerRef.current);
+				pendingTimerRef.current = null;
+			}
+		}
+		prevAnimatedRef.current = animated;
+	}, [animated]);
+	useEffect(() => {
+		if (animated && !scriptLocked && containsScript(trimmedChildren)) setScriptLocked(true);
+	}, [
+		trimmedChildren,
+		animated,
+		scriptLocked
+	]);
+	useEffect(() => {
+		if (animated && !headClosed) {
+			const lowered = trimmedChildren.toLowerCase();
+			if (lowered.includes("</head>") || lowered.includes("</style>")) setHeadClosed(true);
+		}
+	}, [
+		trimmedChildren,
+		animated,
+		headClosed
+	]);
+	const [throttledContent, setThrottledContent] = useState(trimmedChildren);
+	useEffect(() => {
+		if (!animated) {
+			if (pendingTimerRef.current) {
+				clearTimeout(pendingTimerRef.current);
+				pendingTimerRef.current = null;
+			}
+			lastCommitRef.current = Date.now();
+			setThrottledContent(trimmedChildren);
+			return;
+		}
+		if (!headClosed) return;
+		const throttleMs = 250;
+		const now = Date.now();
+		const elapsed = now - lastCommitRef.current;
+		if (elapsed >= throttleMs) {
+			if (pendingTimerRef.current) {
+				clearTimeout(pendingTimerRef.current);
+				pendingTimerRef.current = null;
+			}
+			lastCommitRef.current = now;
+			setThrottledContent(trimmedChildren);
+			return;
+		}
+		if (pendingTimerRef.current === null) pendingTimerRef.current = setTimeout(() => {
+			lastCommitRef.current = Date.now();
+			pendingTimerRef.current = null;
+			setThrottledContent(latestContentRef.current);
+		}, throttleMs - elapsed);
+	}, [
+		trimmedChildren,
+		animated,
+		headClosed
+	]);
+	useEffect(() => () => {
+		if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);
+	}, []);
+	useEffect(() => {
+		if (!animated || liveCommitted || !headClosed) return;
+		if (streamingMode === "live" || streamingMode === "auto" && !scriptLocked) setLiveCommitted(true);
+	}, [
+		animated,
+		headClosed,
+		liveCommitted,
+		scriptLocked,
+		streamingMode
+	]);
+	const isStable = !animated || isHtmlContentClosed(trimmedChildren) || liveCommitted;
+	const [mode, setMode] = useState(defaultMode);
+	const effectiveMode = isFragment ? "source" : mode;
+	const contentRef = useRef(trimmedChildren);
+	useEffect(() => {
+		contentRef.current = trimmedChildren;
+	}, [trimmedChildren]);
+	const loadingSourceRef = useRef(null);
+	useEffect(() => {
+		if (isStable) return;
+		const node = loadingSourceRef.current;
+		if (!node) return;
+		node.scrollTop = node.scrollHeight;
+	}, [trimmedChildren, isStable]);
+	const getCopyContent = useCallback(() => contentRef.current, []);
+	const handleDownload = useCallback(() => {
+		downloadHtml(contentRef.current, fileName || "preview.html");
+	}, [fileName]);
+	const handleExpand = useCallback(() => {
+		onExpand?.(contentRef.current);
+	}, [onExpand]);
+	const background = themeBackground(theme);
+	const sourceBody = useMemo(() => /* @__PURE__ */ jsx(SyntaxHighlighter, {
+		animated,
+		className: classNames?.content,
+		language: "html",
+		style: {
+			height: "100%",
+			...customStyles?.content
+		},
+		variant,
+		children: trimmedChildren
+	}), [
+		animated,
+		classNames?.content,
+		customStyles?.content,
+		trimmedChildren,
+		variant
+	]);
+	const iframeBody = useMemo(() => /* @__PURE__ */ jsx(HtmlPreviewIframe, {
+		animated,
+		background,
+		className: classNames?.iframe,
+		content: throttledContent,
+		defaultHeight,
+		sandbox,
+		style: customStyles?.iframe
+	}), [
+		background,
+		classNames?.iframe,
+		customStyles?.iframe,
+		defaultHeight,
+		sandbox,
+		throttledContent
+	]);
+	const loadingBody = useMemo(() => /* @__PURE__ */ jsxs("div", {
+		className: styles.loadingRoot,
+		style: { height: defaultHeight ?? 400 },
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: styles.loadingSource,
+				ref: loadingSourceRef,
+				children: /* @__PURE__ */ jsx(SyntaxHighlighter, {
+					animated,
+					language: "html",
+					variant: "borderless",
+					children: trimmedChildren
+				})
+			}),
+			/* @__PURE__ */ jsx("div", { className: styles.loadingBackdrop }),
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.loadingBadge,
+				children: [/* @__PURE__ */ jsx(Spin, {
+					size: 16,
+					variant: "network"
+				}), /* @__PURE__ */ jsx("span", { children: "Preparing preview…" })]
+			})
+		]
+	}), [
+		animated,
+		defaultHeight,
+		trimmedChildren
+	]);
+	const defaultBody = effectiveMode === "preview" ? isStable ? iframeBody : loadingBody : sourceBody;
+	const body = useMemo(() => {
+		if (!bodyRender) return defaultBody;
+		return bodyRender({
+			content: trimmedChildren,
+			mode: effectiveMode,
+			originalNode: defaultBody
+		});
+	}, [
+		bodyRender,
+		defaultBody,
+		effectiveMode,
+		trimmedChildren
+	]);
+	const segmentOptions = useMemo(() => [{
+		label: "Preview",
+		value: "preview"
+	}, {
+		label: "Source",
+		value: "source"
+	}], []);
+	const iconSize = actionIconSize || "small";
+	const originalActions = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		!isFragment && /* @__PURE__ */ jsx(Segmented, {
+			options: segmentOptions,
+			size: "small",
+			value: effectiveMode,
+			classNames: {
+				indicator: styles.segmentedIndicator,
+				item: styles.segmentedItem,
+				root: styles.segmented
+			},
+			onChange: (v) => setMode(v)
+		}),
+		copyable && /* @__PURE__ */ jsx(CopyButton, {
+			content: getCopyContent,
+			size: iconSize
+		}),
+		downloadable && /* @__PURE__ */ jsx(ActionIcon, {
+			icon: Download,
+			size: iconSize,
+			title: "Download HTML",
+			onClick: handleDownload
+		}),
+		onExpand && /* @__PURE__ */ jsx(ActionIcon, {
+			icon: Expand,
+			size: iconSize,
+			title: "Open full preview",
+			onClick: handleExpand
+		})
+	] });
+	const actions = actionsRender ? actionsRender({
+		actionIconSize: iconSize,
+		content: trimmedChildren,
+		getContent: getCopyContent,
+		mode: effectiveMode,
+		originalNode: originalActions,
+		setMode
+	}) : originalActions;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(variants({
+			shadow,
+			variant
+		}), className),
+		"data-code-type": "html-preview",
+		"data-html-preview-language": language,
+		style,
+		...rest,
+		children: [/* @__PURE__ */ jsx(FlexBasic_default, {
+			horizontal: true,
+			align: "center",
+			className: cx(styles.toolbar, classNames?.header),
+			flex: "none",
+			gap: 4,
+			style: customStyles?.header,
+			onClick: stopPropagation,
+			children: actions
+		}), body]
+	});
+});
+HtmlPreview.displayName = "HtmlPreview";
+//#endregion
+export { HtmlPreview as default };
+
+//# sourceMappingURL=HtmlPreview.mjs.map

package/es/HtmlPreview/HtmlPreview.mjs.map

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

package/es/HtmlPreview/Iframe.d.mts

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

package/es/HtmlPreview/Iframe.mjs

@@ -0,0 +1,158 @@
+"use client";
+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 { 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 = (() => {
+	let parser = null;
+	return (content) => {
+		if (typeof window === "undefined") return null;
+		if (!content) return {
+			bodyHtml: "",
+			headExtrasHtml: "",
+			styleContent: ""
+		};
+		if (!parser) parser = new DOMParser();
+		const doc = parser.parseFromString(content, "text/html");
+		const styleParts = [];
+		const headExtras = [];
+		if (doc.head) for (const child of Array.from(doc.head.children)) if (child.tagName === "STYLE") styleParts.push(child.textContent || "");
+		else headExtras.push(child.outerHTML);
+		return {
+			bodyHtml: doc.body ? doc.body.innerHTML : "",
+			headExtrasHtml: isHeadSealed(content) ? headExtras.join("") : "",
+			styleContent: styleParts.join("\n")
+		};
+	};
+})();
+const HtmlPreviewIframe = memo(({ animated, background, content, className, defaultHeight = 400, ref, sandbox = DEFAULT_SANDBOX, style, title = "HTML preview" }) => {
+	const innerRef = useRef(null);
+	const frameId = useId();
+	const [height, setHeight] = useState(defaultHeight);
+	const defaultHeightRef = useRef(defaultHeight);
+	useEffect(() => {
+		defaultHeightRef.current = defaultHeight;
+	}, [defaultHeight]);
+	const tooLarge = content.length > SRCDOC_MAX_LENGTH;
+	const staticSrcDoc = useMemo(() => {
+		if (animated || tooLarge) return null;
+		return buildStaticSrcDoc({
+			background,
+			content,
+			frameId
+		});
+	}, [
+		animated,
+		background,
+		content,
+		frameId,
+		tooLarge
+	]);
+	const shellSrcDoc = useMemo(() => {
+		if (!animated || tooLarge) return null;
+		return buildShellSrcDoc({
+			background,
+			frameId
+		});
+	}, [
+		animated,
+		background,
+		frameId,
+		tooLarge
+	]);
+	const [shellReady, setShellReady] = useState(false);
+	useEffect(() => {
+		setShellReady(false);
+	}, [shellSrcDoc]);
+	const payload = useMemo(() => {
+		if (!animated || tooLarge) return null;
+		return parseContent(content);
+	}, [
+		animated,
+		content,
+		tooLarge
+	]);
+	useEffect(() => {
+		if (!animated) return;
+		if (!shellReady || !payload) return;
+		const win = innerRef.current?.contentWindow;
+		if (!win) return;
+		win.postMessage({
+			frameId,
+			payload,
+			type: SHELL_UPDATE_MESSAGE_TYPE
+		}, "*");
+	}, [
+		animated,
+		payload,
+		shellReady,
+		frameId
+	]);
+	useEffect(() => {
+		const handler = (event) => {
+			const data = event.data;
+			if (!data || typeof data !== "object") return;
+			if (data.frameId !== frameId) return;
+			if (event.source !== innerRef.current?.contentWindow) return;
+			if (data.type === `jinmi-html-shell-update:ready`) {
+				setShellReady(true);
+				return;
+			}
+			if (data.type === "jinmi-html-resize") {
+				const next = Number(data.height);
+				if (!Number.isFinite(next) || next <= 0) return;
+				const floored = Math.max(next, defaultHeightRef.current);
+				setHeight((prev) => Math.abs(prev - floored) < 1 ? prev : floored);
+			}
+		};
+		window.addEventListener("message", handler);
+		return () => window.removeEventListener("message", handler);
+	}, [frameId]);
+	const setRef = useCallback((node) => {
+		innerRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	if (tooLarge) return /* @__PURE__ */ jsx("div", {
+		className: cx(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: {
+			height,
+			...style
+		},
+		title
+	}, iframeKey);
+});
+HtmlPreviewIframe.displayName = "HtmlPreviewIframe";
+//#endregion
+export { HtmlPreviewIframe, HtmlPreviewIframe as default };
+
+//# sourceMappingURL=Iframe.mjs.map

package/es/HtmlPreview/Iframe.mjs.map

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