@lobehub/ui 5.2.2 → 5.4.0

package/es/Markdown/SyntaxMarkdown/StreamdownRender.mjs

@@ -1,11 +1,13 @@
 'use client';
 
+import { useMarkdownContext } from "../components/MarkdownProvider.mjs";
 import { useMarkdownComponents } from "../../hooks/useMarkdown/useMarkdownComponents.mjs";
 import { useMarkdownContent } from "../../hooks/useMarkdown/useMarkdownContent.mjs";
 import { useMarkdownRehypePlugins } from "../../hooks/useMarkdown/useMarkdownRehypePlugins.mjs";
 import { useMarkdownRemarkPlugins } from "../../hooks/useMarkdown/useMarkdownRemarkPlugins.mjs";
 import { rehypeStreamAnimated } from "../plugins/rehypeStreamAnimated.mjs";
 import { styles } from "./style.mjs";
+import { useSmoothStreamContent } from "./useSmoothStreamContent.mjs";
 import { useStreamQueue } from "./useStreamQueue.mjs";
 import { createElement, memo, useEffect, useId, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -14,7 +16,7 @@ import { marked } from "marked";
 import remend from "remend";
 
 //#region src/Markdown/SyntaxMarkdown/StreamdownRender.tsx
-const STREAM_CHAR_DELAY = 15;
+const STREAM_FADE_DURATION = 280;
 function countChars(text) {
 	return [...text].length;
 }
@@ -61,14 +63,16 @@ const StreamdownBlock = memo(({ children, ...rest }) => {
 }, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components && isSamePlugins(prevProps.rehypePlugins, nextProps.rehypePlugins) && isSamePlugins(prevProps.remarkPlugins, nextProps.remarkPlugins));
 StreamdownBlock.displayName = "StreamdownBlock";
 const StreamdownRender = memo(({ children, ...rest }) => {
+	const { streamSmoothingPreset = "balanced" } = useMarkdownContext();
 	const escapedContent = useMarkdownContent(children || "");
 	const components = useMarkdownComponents();
 	const baseRehypePlugins = useStablePlugins(useMarkdownRehypePlugins());
 	const remarkPlugins = useStablePlugins(useMarkdownRemarkPlugins());
 	const generatedId = useId();
+	const smoothedContent = useSmoothStreamContent(typeof escapedContent === "string" ? escapedContent : "", { preset: streamSmoothingPreset });
 	const processedContent = useMemo(() => {
-		return remend(typeof escapedContent === "string" ? escapedContent : "");
-	}, [escapedContent]);
+		return remend(smoothedContent);
+	}, [smoothedContent]);
 	const blocks = useMemo(() => {
 		const tokens = marked.lexer(processedContent);
 		let offset = 0;
@@ -82,41 +86,63 @@ const StreamdownRender = memo(({ children, ...rest }) => {
 		});
 	}, [processedContent]);
 	const { getBlockState, charDelay } = useStreamQueue(blocks);
-	const staggerPlugins = useMemo(() => [...baseRehypePlugins, [rehypeStreamAnimated, {
-		baseCharCount: 0,
-		charDelay
-	}]], [baseRehypePlugins, charDelay]);
-	const revealedPlugins = useMemo(() => [...baseRehypePlugins, [rehypeStreamAnimated, { revealed: true }]], [baseRehypePlugins]);
-	const prevCharCountRef = useRef(0);
-	const prevStreamOffsetRef = useRef(-1);
-	useEffect(() => {
-		const tailIdx = blocks.length - 1;
-		if (tailIdx >= 0) {
-			const tail = blocks[tailIdx];
-			if (tail.startOffset !== prevStreamOffsetRef.current) {
-				prevStreamOffsetRef.current = tail.startOffset;
-				prevCharCountRef.current = 0;
+	const prevBlockCharCountRef = useRef(/* @__PURE__ */ new Map());
+	const blockTimelineRef = useRef(/* @__PURE__ */ new Map());
+	const lastRenderTsRef = useRef(null);
+	const renderTs = typeof performance === "undefined" ? Date.now() : performance.now();
+	const frameDt = lastRenderTsRef.current === null ? 0 : Math.max(0, Math.min(renderTs - lastRenderTsRef.current, 120));
+	const timelineForRender = useMemo(() => {
+		const next = /* @__PURE__ */ new Map();
+		const prevTimeline = blockTimelineRef.current;
+		const prevCharCounts = prevBlockCharCountRef.current;
+		for (const block of blocks) {
+			const blockCharCount = countChars(block.content);
+			const prevCharCount = prevCharCounts.get(block.startOffset) ?? 0;
+			const prevElapsed = prevTimeline.get(block.startOffset);
+			const latestCharStart = Math.max(0, (blockCharCount - 1) * charDelay);
+			if (prevElapsed === void 0 || blockCharCount < prevCharCount) {
+				next.set(block.startOffset, latestCharStart);
+				continue;
 			}
-			prevCharCountRef.current = countChars(tail.content);
-		} else {
-			prevCharCountRef.current = 0;
-			prevStreamOffsetRef.current = -1;
+			const elapsedByTime = prevElapsed + frameDt;
+			const minElapsed = Math.max(0, latestCharStart - charDelay * 2);
+			next.set(block.startOffset, Math.max(elapsedByTime, minElapsed));
 		}
-	}, [blocks]);
+		return next;
+	}, [
+		blocks,
+		charDelay,
+		frameDt
+	]);
+	useEffect(() => {
+		const nextCharCount = /* @__PURE__ */ new Map();
+		for (const block of blocks) nextCharCount.set(block.startOffset, countChars(block.content));
+		prevBlockCharCountRef.current = nextCharCount;
+		blockTimelineRef.current = timelineForRender;
+		lastRenderTsRef.current = typeof performance === "undefined" ? Date.now() : performance.now();
+	}, [blocks, timelineForRender]);
 	return /* @__PURE__ */ jsx("div", {
 		className: styles.animated,
 		children: blocks.map((block, index) => {
 			const state = getBlockState(index);
 			if (state === "queued") return null;
+			const timelineElapsedMs = timelineForRender.get(block.startOffset) ?? 0;
 			let plugins;
-			if (state === "streaming") {
-				const baseCharCount = block.startOffset === prevStreamOffsetRef.current ? prevCharCountRef.current : 0;
-				plugins = [...baseRehypePlugins, [rehypeStreamAnimated, {
-					baseCharCount,
-					charDelay: STREAM_CHAR_DELAY
-				}]];
-			} else if (state === "animating") plugins = staggerPlugins;
-			else plugins = revealedPlugins;
+			if (state === "streaming") plugins = [...baseRehypePlugins, [rehypeStreamAnimated, {
+				charDelay,
+				fadeDuration: STREAM_FADE_DURATION,
+				timelineElapsedMs
+			}]];
+			else if (state === "animating") plugins = [...baseRehypePlugins, [rehypeStreamAnimated, {
+				charDelay,
+				fadeDuration: STREAM_FADE_DURATION,
+				timelineElapsedMs
+			}]];
+			else plugins = [...baseRehypePlugins, [rehypeStreamAnimated, {
+				charDelay,
+				fadeDuration: STREAM_FADE_DURATION,
+				timelineElapsedMs
+			}]];
 			return /* @__PURE__ */ createElement(StreamdownBlock, {
 				...rest,
 				components,

package/es/Markdown/SyntaxMarkdown/StreamdownRender.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StreamdownRender.mjs","names":["blocks: BlockInfo[]","staggerPlugins: Pluggable[]","revealedPlugins: Pluggable[]","plugins: Pluggable[]"],"sources":["../../../src/Markdown/SyntaxMarkdown/StreamdownRender.tsx"],"sourcesContent":["'use client';\n\nimport { marked } from 'marked';\nimport { memo, useEffect, useId, useMemo, useRef } from 'react';\nimport Markdown, { type Options } from 'react-markdown';\nimport remend from 'remend';\nimport type { Pluggable, PluggableList } from 'unified';\n\nimport {\n  useMarkdownComponents,\n  useMarkdownContent,\n  useMarkdownRehypePlugins,\n  useMarkdownRemarkPlugins,\n} from '@/hooks/useMarkdown';\nimport { rehypeStreamAnimated } from '@/Markdown/plugins/rehypeStreamAnimated';\n\nimport { styles } from './style';\nimport { type BlockInfo, useStreamQueue } from './useStreamQueue';\n\nconst STREAM_CHAR_DELAY = 15;\n\nfunction countChars(text: string): number {\n  return [...text].length;\n}\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null;\n\nconst isDeepEqualValue = (a: unknown, b: unknown): boolean => {\n  if (a === b) return true;\n\n  if (Array.isArray(a) || Array.isArray(b)) {\n    if (!Array.isArray(a) || !Array.isArray(b)) return false;\n    if (a.length !== b.length) return false;\n    for (let i = 0; i < a.length; i++) {\n      if (!isDeepEqualValue(a[i], b[i])) return false;\n    }\n    return true;\n  }\n\n  if (!isRecord(a) || !isRecord(b)) return false;\n\n  const keysA = Object.keys(a);\n  const keysB = Object.keys(b);\n  if (keysA.length !== keysB.length) return false;\n\n  for (const key of keysA) {\n    if (!isDeepEqualValue(a[key], b[key])) return false;\n  }\n\n  return true;\n};\n\nconst isSamePlugin = (prevPlugin: Pluggable, nextPlugin: Pluggable): boolean => {\n  const prevTuple = Array.isArray(prevPlugin) ? prevPlugin : [prevPlugin];\n  const nextTuple = Array.isArray(nextPlugin) ? nextPlugin : [nextPlugin];\n\n  if (prevTuple.length !== nextTuple.length) return false;\n  if (prevTuple[0] !== nextTuple[0]) return false;\n\n  return isDeepEqualValue(prevTuple.slice(1), nextTuple.slice(1));\n};\n\nconst isSamePlugins = (\n  prevPlugins?: PluggableList | null,\n  nextPlugins?: PluggableList | null,\n): boolean => {\n  if (prevPlugins === nextPlugins) return true;\n  if (!prevPlugins || !nextPlugins) return !prevPlugins && !nextPlugins;\n  if (prevPlugins.length !== nextPlugins.length) return false;\n\n  for (let i = 0; i < prevPlugins.length; i++) {\n    if (!isSamePlugin(prevPlugins[i], nextPlugins[i])) return false;\n  }\n\n  return true;\n};\n\nconst useStablePlugins = (plugins: PluggableList): PluggableList => {\n  const stableRef = useRef<PluggableList>(plugins);\n\n  if (!isSamePlugins(stableRef.current, plugins)) {\n    stableRef.current = plugins;\n  }\n\n  return stableRef.current;\n};\n\nconst StreamdownBlock = memo<Options>(\n  ({ children, ...rest }) => {\n    return <Markdown {...rest}>{children}</Markdown>;\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children &&\n    prevProps.components === nextProps.components &&\n    isSamePlugins(prevProps.rehypePlugins, nextProps.rehypePlugins) &&\n    isSamePlugins(prevProps.remarkPlugins, nextProps.remarkPlugins),\n);\n\nStreamdownBlock.displayName = 'StreamdownBlock';\n\nexport const StreamdownRender = memo<Options>(({ children, ...rest }) => {\n  const escapedContent = useMarkdownContent(children || '');\n  const components = useMarkdownComponents();\n  const baseRehypePlugins = useStablePlugins(useMarkdownRehypePlugins());\n  const remarkPlugins = useStablePlugins(useMarkdownRemarkPlugins());\n  const generatedId = useId();\n\n  const processedContent = useMemo(() => {\n    const content = typeof escapedContent === 'string' ? escapedContent : '';\n    return remend(content);\n  }, [escapedContent]);\n\n  const blocks: BlockInfo[] = useMemo(() => {\n    const tokens = marked.lexer(processedContent);\n    let offset = 0;\n    return tokens.map((token) => {\n      const block = { content: token.raw, startOffset: offset };\n      offset += token.raw.length;\n      return block;\n    });\n  }, [processedContent]);\n\n  const { getBlockState, charDelay } = useStreamQueue(blocks);\n\n  const staggerPlugins: Pluggable[] = useMemo(\n    () => [...baseRehypePlugins, [rehypeStreamAnimated, { baseCharCount: 0, charDelay }]],\n    [baseRehypePlugins, charDelay],\n  );\n\n  const revealedPlugins: Pluggable[] = useMemo(\n    () => [...baseRehypePlugins, [rehypeStreamAnimated, { revealed: true }]],\n    [baseRehypePlugins],\n  );\n\n  // prevCharCount tracks the PREVIOUS render's streaming char count.\n  // Updated in useEffect (after render) to avoid stale reads during\n  // synchronous re-renders (e.g. useLayoutEffect auto-reveal).\n  const prevCharCountRef = useRef(0);\n  const prevStreamOffsetRef = useRef(-1);\n\n  useEffect(() => {\n    const tailIdx = blocks.length - 1;\n    if (tailIdx >= 0) {\n      const tail = blocks[tailIdx];\n      if (tail.startOffset !== prevStreamOffsetRef.current) {\n        prevStreamOffsetRef.current = tail.startOffset;\n        prevCharCountRef.current = 0;\n      }\n      prevCharCountRef.current = countChars(tail.content);\n    } else {\n      prevCharCountRef.current = 0;\n      prevStreamOffsetRef.current = -1;\n    }\n  }, [blocks]);\n\n  return (\n    <div className={styles.animated}>\n      {blocks.map((block, index) => {\n        const state = getBlockState(index);\n        if (state === 'queued') return null;\n\n        let plugins: Pluggable[];\n        if (state === 'streaming') {\n          const baseCharCount =\n            block.startOffset === prevStreamOffsetRef.current ? prevCharCountRef.current : 0;\n          plugins = [\n            ...baseRehypePlugins,\n            [rehypeStreamAnimated, { baseCharCount, charDelay: STREAM_CHAR_DELAY }],\n          ];\n        } else if (state === 'animating') {\n          plugins = staggerPlugins;\n        } else {\n          plugins = revealedPlugins;\n        }\n\n        return (\n          <StreamdownBlock\n            {...rest}\n            components={components}\n            key={`${generatedId}-${block.startOffset}`}\n            rehypePlugins={plugins}\n            remarkPlugins={remarkPlugins}\n          >\n            {block.content}\n          </StreamdownBlock>\n        );\n      })}\n    </div>\n  );\n});\n\nStreamdownRender.displayName = 'StreamdownRender';\n\nexport default StreamdownRender;\n"],"mappings":"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"}
+{"version":3,"file":"StreamdownRender.mjs","names":["blocks: BlockInfo[]","plugins: Pluggable[]"],"sources":["../../../src/Markdown/SyntaxMarkdown/StreamdownRender.tsx"],"sourcesContent":["'use client';\n\nimport { marked } from 'marked';\nimport { memo, useEffect, useId, useMemo, useRef } from 'react';\nimport Markdown, { type Options } from 'react-markdown';\nimport remend from 'remend';\nimport type { Pluggable, PluggableList } from 'unified';\n\nimport {\n  useMarkdownComponents,\n  useMarkdownContent,\n  useMarkdownRehypePlugins,\n  useMarkdownRemarkPlugins,\n} from '@/hooks/useMarkdown';\nimport { useMarkdownContext } from '@/Markdown/components/MarkdownProvider';\nimport { rehypeStreamAnimated } from '@/Markdown/plugins/rehypeStreamAnimated';\n\nimport { styles } from './style';\nimport { useSmoothStreamContent } from './useSmoothStreamContent';\nimport { type BlockInfo, useStreamQueue } from './useStreamQueue';\n\nconst STREAM_FADE_DURATION = 280;\n\nfunction countChars(text: string): number {\n  return [...text].length;\n}\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null;\n\nconst isDeepEqualValue = (a: unknown, b: unknown): boolean => {\n  if (a === b) return true;\n\n  if (Array.isArray(a) || Array.isArray(b)) {\n    if (!Array.isArray(a) || !Array.isArray(b)) return false;\n    if (a.length !== b.length) return false;\n    for (let i = 0; i < a.length; i++) {\n      if (!isDeepEqualValue(a[i], b[i])) return false;\n    }\n    return true;\n  }\n\n  if (!isRecord(a) || !isRecord(b)) return false;\n\n  const keysA = Object.keys(a);\n  const keysB = Object.keys(b);\n  if (keysA.length !== keysB.length) return false;\n\n  for (const key of keysA) {\n    if (!isDeepEqualValue(a[key], b[key])) return false;\n  }\n\n  return true;\n};\n\nconst isSamePlugin = (prevPlugin: Pluggable, nextPlugin: Pluggable): boolean => {\n  const prevTuple = Array.isArray(prevPlugin) ? prevPlugin : [prevPlugin];\n  const nextTuple = Array.isArray(nextPlugin) ? nextPlugin : [nextPlugin];\n\n  if (prevTuple.length !== nextTuple.length) return false;\n  if (prevTuple[0] !== nextTuple[0]) return false;\n\n  return isDeepEqualValue(prevTuple.slice(1), nextTuple.slice(1));\n};\n\nconst isSamePlugins = (\n  prevPlugins?: PluggableList | null,\n  nextPlugins?: PluggableList | null,\n): boolean => {\n  if (prevPlugins === nextPlugins) return true;\n  if (!prevPlugins || !nextPlugins) return !prevPlugins && !nextPlugins;\n  if (prevPlugins.length !== nextPlugins.length) return false;\n\n  for (let i = 0; i < prevPlugins.length; i++) {\n    if (!isSamePlugin(prevPlugins[i], nextPlugins[i])) return false;\n  }\n\n  return true;\n};\n\nconst useStablePlugins = (plugins: PluggableList): PluggableList => {\n  const stableRef = useRef<PluggableList>(plugins);\n\n  if (!isSamePlugins(stableRef.current, plugins)) {\n    stableRef.current = plugins;\n  }\n\n  return stableRef.current;\n};\n\nconst StreamdownBlock = memo<Options>(\n  ({ children, ...rest }) => {\n    return <Markdown {...rest}>{children}</Markdown>;\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children &&\n    prevProps.components === nextProps.components &&\n    isSamePlugins(prevProps.rehypePlugins, nextProps.rehypePlugins) &&\n    isSamePlugins(prevProps.remarkPlugins, nextProps.remarkPlugins),\n);\n\nStreamdownBlock.displayName = 'StreamdownBlock';\n\nexport const StreamdownRender = memo<Options>(({ children, ...rest }) => {\n  const { streamSmoothingPreset = 'balanced' } = useMarkdownContext();\n  const escapedContent = useMarkdownContent(children || '');\n  const components = useMarkdownComponents();\n  const baseRehypePlugins = useStablePlugins(useMarkdownRehypePlugins());\n  const remarkPlugins = useStablePlugins(useMarkdownRemarkPlugins());\n  const generatedId = useId();\n  const smoothedContent = useSmoothStreamContent(\n    typeof escapedContent === 'string' ? escapedContent : '',\n    { preset: streamSmoothingPreset },\n  );\n\n  const processedContent = useMemo(() => {\n    return remend(smoothedContent);\n  }, [smoothedContent]);\n\n  const blocks: BlockInfo[] = useMemo(() => {\n    const tokens = marked.lexer(processedContent);\n    let offset = 0;\n    return tokens.map((token) => {\n      const block = { content: token.raw, startOffset: offset };\n      offset += token.raw.length;\n      return block;\n    });\n  }, [processedContent]);\n\n  const { getBlockState, charDelay } = useStreamQueue(blocks);\n  const prevBlockCharCountRef = useRef<Map<number, number>>(new Map());\n  const blockTimelineRef = useRef<Map<number, number>>(new Map());\n  const lastRenderTsRef = useRef<number | null>(null);\n\n  const renderTs = typeof performance === 'undefined' ? Date.now() : performance.now();\n  const frameDt =\n    lastRenderTsRef.current === null\n      ? 0\n      : Math.max(0, Math.min(renderTs - lastRenderTsRef.current, 120));\n\n  const timelineForRender = useMemo(() => {\n    const next = new Map<number, number>();\n    const prevTimeline = blockTimelineRef.current;\n    const prevCharCounts = prevBlockCharCountRef.current;\n\n    for (const block of blocks) {\n      const blockCharCount = countChars(block.content);\n      const prevCharCount = prevCharCounts.get(block.startOffset) ?? 0;\n      const prevElapsed = prevTimeline.get(block.startOffset);\n      const latestCharStart = Math.max(0, (blockCharCount - 1) * charDelay);\n\n      if (prevElapsed === undefined || blockCharCount < prevCharCount) {\n        next.set(block.startOffset, latestCharStart);\n        continue;\n      }\n\n      const elapsedByTime = prevElapsed + frameDt;\n      // Avoid huge hidden backlog when stream updates in bursts.\n      const minElapsed = Math.max(0, latestCharStart - charDelay * 2);\n      next.set(block.startOffset, Math.max(elapsedByTime, minElapsed));\n    }\n\n    return next;\n  }, [blocks, charDelay, frameDt]);\n\n  useEffect(() => {\n    const nextCharCount = new Map<number, number>();\n    for (const block of blocks) {\n      nextCharCount.set(block.startOffset, countChars(block.content));\n    }\n    prevBlockCharCountRef.current = nextCharCount;\n    blockTimelineRef.current = timelineForRender;\n    lastRenderTsRef.current = typeof performance === 'undefined' ? Date.now() : performance.now();\n  }, [blocks, timelineForRender]);\n\n  return (\n    <div className={styles.animated}>\n      {blocks.map((block, index) => {\n        const state = getBlockState(index);\n        if (state === 'queued') return null;\n        const timelineElapsedMs = timelineForRender.get(block.startOffset) ?? 0;\n\n        let plugins: Pluggable[];\n        if (state === 'streaming') {\n          plugins = [\n            ...baseRehypePlugins,\n            [\n              rehypeStreamAnimated,\n              { charDelay, fadeDuration: STREAM_FADE_DURATION, timelineElapsedMs },\n            ],\n          ];\n        } else if (state === 'animating') {\n          // Continue from previously rendered progress instead of restarting\n          // or force-switching to fully revealed.\n          plugins = [\n            ...baseRehypePlugins,\n            [\n              rehypeStreamAnimated,\n              { charDelay, fadeDuration: STREAM_FADE_DURATION, timelineElapsedMs },\n            ],\n          ];\n        } else {\n          // Keep fade continuity for just-finished chars; avoid instant class\n          // switch to stream-char-revealed that would cancel in-flight fades.\n          plugins = [\n            ...baseRehypePlugins,\n            [\n              rehypeStreamAnimated,\n              { charDelay, fadeDuration: STREAM_FADE_DURATION, timelineElapsedMs },\n            ],\n          ];\n        }\n\n        return (\n          <StreamdownBlock\n            {...rest}\n            components={components}\n            key={`${generatedId}-${block.startOffset}`}\n            rehypePlugins={plugins}\n            remarkPlugins={remarkPlugins}\n          >\n            {block.content}\n          </StreamdownBlock>\n        );\n      })}\n    </div>\n  );\n});\n\nStreamdownRender.displayName = 'StreamdownRender';\n\nexport default StreamdownRender;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,MAAM,uBAAuB;AAE7B,SAAS,WAAW,MAAsB;AACxC,QAAO,CAAC,GAAG,KAAK,CAAC;;AAGnB,MAAM,YAAY,UAChB,OAAO,UAAU,YAAY,UAAU;AAEzC,MAAM,oBAAoB,GAAY,MAAwB;AAC5D,KAAI,MAAM,EAAG,QAAO;AAEpB,KAAI,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE,EAAE;AACxC,MAAI,CAAC,MAAM,QAAQ,EAAE,IAAI,CAAC,MAAM,QAAQ,EAAE,CAAE,QAAO;AACnD,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,OAAK,IAAI,IAAI,GAAG,IAAI,EAAE,QAAQ,IAC5B,KAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,GAAG,CAAE,QAAO;AAE5C,SAAO;;AAGT,KAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAE,QAAO;CAEzC,MAAM,QAAQ,OAAO,KAAK,EAAE;CAC5B,MAAM,QAAQ,OAAO,KAAK,EAAE;AAC5B,KAAI,MAAM,WAAW,MAAM,OAAQ,QAAO;AAE1C,MAAK,MAAM,OAAO,MAChB,KAAI,CAAC,iBAAiB,EAAE,MAAM,EAAE,KAAK,CAAE,QAAO;AAGhD,QAAO;;AAGT,MAAM,gBAAgB,YAAuB,eAAmC;CAC9E,MAAM,YAAY,MAAM,QAAQ,WAAW,GAAG,aAAa,CAAC,WAAW;CACvE,MAAM,YAAY,MAAM,QAAQ,WAAW,GAAG,aAAa,CAAC,WAAW;AAEvE,KAAI,UAAU,WAAW,UAAU,OAAQ,QAAO;AAClD,KAAI,UAAU,OAAO,UAAU,GAAI,QAAO;AAE1C,QAAO,iBAAiB,UAAU,MAAM,EAAE,EAAE,UAAU,MAAM,EAAE,CAAC;;AAGjE,MAAM,iBACJ,aACA,gBACY;AACZ,KAAI,gBAAgB,YAAa,QAAO;AACxC,KAAI,CAAC,eAAe,CAAC,YAAa,QAAO,CAAC,eAAe,CAAC;AAC1D,KAAI,YAAY,WAAW,YAAY,OAAQ,QAAO;AAEtD,MAAK,IAAI,IAAI,GAAG,IAAI,YAAY,QAAQ,IACtC,KAAI,CAAC,aAAa,YAAY,IAAI,YAAY,GAAG,CAAE,QAAO;AAG5D,QAAO;;AAGT,MAAM,oBAAoB,YAA0C;CAClE,MAAM,YAAY,OAAsB,QAAQ;AAEhD,KAAI,CAAC,cAAc,UAAU,SAAS,QAAQ,CAC5C,WAAU,UAAU;AAGtB,QAAO,UAAU;;AAGnB,MAAM,kBAAkB,MACrB,EAAE,UAAU,GAAG,WAAW;AACzB,QAAO,oBAAC;EAAS,GAAI;EAAO;GAAoB;IAEjD,WAAW,cACV,UAAU,aAAa,UAAU,YACjC,UAAU,eAAe,UAAU,cACnC,cAAc,UAAU,eAAe,UAAU,cAAc,IAC/D,cAAc,UAAU,eAAe,UAAU,cAAc,CAClE;AAED,gBAAgB,cAAc;AAE9B,MAAa,mBAAmB,MAAe,EAAE,UAAU,GAAG,WAAW;CACvE,MAAM,EAAE,wBAAwB,eAAe,oBAAoB;CACnE,MAAM,iBAAiB,mBAAmB,YAAY,GAAG;CACzD,MAAM,aAAa,uBAAuB;CAC1C,MAAM,oBAAoB,iBAAiB,0BAA0B,CAAC;CACtE,MAAM,gBAAgB,iBAAiB,0BAA0B,CAAC;CAClE,MAAM,cAAc,OAAO;CAC3B,MAAM,kBAAkB,uBACtB,OAAO,mBAAmB,WAAW,iBAAiB,IACtD,EAAE,QAAQ,uBAAuB,CAClC;CAED,MAAM,mBAAmB,cAAc;AACrC,SAAO,OAAO,gBAAgB;IAC7B,CAAC,gBAAgB,CAAC;CAErB,MAAMA,SAAsB,cAAc;EACxC,MAAM,SAAS,OAAO,MAAM,iBAAiB;EAC7C,IAAI,SAAS;AACb,SAAO,OAAO,KAAK,UAAU;GAC3B,MAAM,QAAQ;IAAE,SAAS,MAAM;IAAK,aAAa;IAAQ;AACzD,aAAU,MAAM,IAAI;AACpB,UAAO;IACP;IACD,CAAC,iBAAiB,CAAC;CAEtB,MAAM,EAAE,eAAe,cAAc,eAAe,OAAO;CAC3D,MAAM,wBAAwB,uBAA4B,IAAI,KAAK,CAAC;CACpE,MAAM,mBAAmB,uBAA4B,IAAI,KAAK,CAAC;CAC/D,MAAM,kBAAkB,OAAsB,KAAK;CAEnD,MAAM,WAAW,OAAO,gBAAgB,cAAc,KAAK,KAAK,GAAG,YAAY,KAAK;CACpF,MAAM,UACJ,gBAAgB,YAAY,OACxB,IACA,KAAK,IAAI,GAAG,KAAK,IAAI,WAAW,gBAAgB,SAAS,IAAI,CAAC;CAEpE,MAAM,oBAAoB,cAAc;EACtC,MAAM,uBAAO,IAAI,KAAqB;EACtC,MAAM,eAAe,iBAAiB;EACtC,MAAM,iBAAiB,sBAAsB;AAE7C,OAAK,MAAM,SAAS,QAAQ;GAC1B,MAAM,iBAAiB,WAAW,MAAM,QAAQ;GAChD,MAAM,gBAAgB,eAAe,IAAI,MAAM,YAAY,IAAI;GAC/D,MAAM,cAAc,aAAa,IAAI,MAAM,YAAY;GACvD,MAAM,kBAAkB,KAAK,IAAI,IAAI,iBAAiB,KAAK,UAAU;AAErE,OAAI,gBAAgB,UAAa,iBAAiB,eAAe;AAC/D,SAAK,IAAI,MAAM,aAAa,gBAAgB;AAC5C;;GAGF,MAAM,gBAAgB,cAAc;GAEpC,MAAM,aAAa,KAAK,IAAI,GAAG,kBAAkB,YAAY,EAAE;AAC/D,QAAK,IAAI,MAAM,aAAa,KAAK,IAAI,eAAe,WAAW,CAAC;;AAGlE,SAAO;IACN;EAAC;EAAQ;EAAW;EAAQ,CAAC;AAEhC,iBAAgB;EACd,MAAM,gCAAgB,IAAI,KAAqB;AAC/C,OAAK,MAAM,SAAS,OAClB,eAAc,IAAI,MAAM,aAAa,WAAW,MAAM,QAAQ,CAAC;AAEjE,wBAAsB,UAAU;AAChC,mBAAiB,UAAU;AAC3B,kBAAgB,UAAU,OAAO,gBAAgB,cAAc,KAAK,KAAK,GAAG,YAAY,KAAK;IAC5F,CAAC,QAAQ,kBAAkB,CAAC;AAE/B,QACE,oBAAC;EAAI,WAAW,OAAO;YACpB,OAAO,KAAK,OAAO,UAAU;GAC5B,MAAM,QAAQ,cAAc,MAAM;AAClC,OAAI,UAAU,SAAU,QAAO;GAC/B,MAAM,oBAAoB,kBAAkB,IAAI,MAAM,YAAY,IAAI;GAEtE,IAAIC;AACJ,OAAI,UAAU,YACZ,WAAU,CACR,GAAG,mBACH,CACE,sBACA;IAAE;IAAW,cAAc;IAAsB;IAAmB,CACrE,CACF;YACQ,UAAU,YAGnB,WAAU,CACR,GAAG,mBACH,CACE,sBACA;IAAE;IAAW,cAAc;IAAsB;IAAmB,CACrE,CACF;OAID,WAAU,CACR,GAAG,mBACH,CACE,sBACA;IAAE;IAAW,cAAc;IAAsB;IAAmB,CACrE,CACF;AAGH,UACE,8BAAC;IACC,GAAI;IACQ;IACZ,KAAK,GAAG,YAAY,GAAG,MAAM;IAC7B,eAAe;IACA;MAEd,MAAM,QACS;IAEpB;GACE;EAER;AAEF,iBAAiB,cAAc;AAE/B,+BAAe"}

package/es/Markdown/SyntaxMarkdown/style.mjs

@@ -8,8 +8,8 @@ const styles = createStaticStyles(({ css: css$1 }) => {
         opacity: 0;
 
         animation-name: ${fadeIn};
-        animation-duration: 150ms;
-        animation-timing-function: ease-out;
+        animation-duration: 280ms;
+        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
         animation-fill-mode: forwards;
       }
 

package/es/Markdown/SyntaxMarkdown/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Markdown/SyntaxMarkdown/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { fadeIn } from '@/styles/animations';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    animated: css`\n      .stream-char {\n        opacity: 0;\n\n        animation-name: ${fadeIn};\n        animation-duration: 150ms;\n        animation-timing-function: ease-out;\n        animation-fill-mode: forwards;\n      }\n\n      .stream-char-revealed {\n        opacity: 1;\n        animation: none;\n      }\n\n      .katex-display .katex-html span {\n        mask: none !important;\n        animation: none !important;\n      }\n    `,\n  };\n});\n"],"mappings":";;;;AAIA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO,EACL,UAAU,KAAG;;;;0BAIS,OAAO;;;;;;;;;;;;;;;OAgB9B;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Markdown/SyntaxMarkdown/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { fadeIn } from '@/styles/animations';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    animated: css`\n      .stream-char {\n        opacity: 0;\n\n        animation-name: ${fadeIn};\n        animation-duration: 280ms;\n        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);\n        animation-fill-mode: forwards;\n      }\n\n      .stream-char-revealed {\n        opacity: 1;\n        animation: none;\n      }\n\n      .katex-display .katex-html span {\n        mask: none !important;\n        animation: none !important;\n      }\n    `,\n  };\n});\n"],"mappings":";;;;AAIA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO,EACL,UAAU,KAAG;;;;0BAIS,OAAO;;;;;;;;;;;;;;;OAgB9B;EACD"}

package/es/Markdown/SyntaxMarkdown/useSmoothStreamContent.mjs

@@ -0,0 +1,229 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/Markdown/SyntaxMarkdown/useSmoothStreamContent.ts
+const PRESET_CONFIG = {
+	balanced: {
+		activeInputWindowMs: 220,
+		defaultCps: 38,
+		emaAlpha: .2,
+		flushCps: 120,
+		largeAppendChars: 120,
+		maxActiveCps: 132,
+		maxCps: 72,
+		maxFlushCps: 280,
+		minCps: 18,
+		settleAfterMs: 360,
+		settleDrainMaxMs: 520,
+		settleDrainMinMs: 180,
+		targetBufferMs: 120
+	},
+	realtime: {
+		activeInputWindowMs: 140,
+		defaultCps: 50,
+		emaAlpha: .3,
+		flushCps: 170,
+		largeAppendChars: 180,
+		maxActiveCps: 180,
+		maxCps: 96,
+		maxFlushCps: 360,
+		minCps: 24,
+		settleAfterMs: 260,
+		settleDrainMaxMs: 360,
+		settleDrainMinMs: 140,
+		targetBufferMs: 40
+	},
+	silky: {
+		activeInputWindowMs: 320,
+		defaultCps: 28,
+		emaAlpha: .14,
+		flushCps: 96,
+		largeAppendChars: 100,
+		maxActiveCps: 102,
+		maxCps: 56,
+		maxFlushCps: 220,
+		minCps: 14,
+		settleAfterMs: 460,
+		settleDrainMaxMs: 680,
+		settleDrainMinMs: 240,
+		targetBufferMs: 170
+	}
+};
+const clamp = (value, min, max) => {
+	return Math.min(max, Math.max(min, value));
+};
+const countChars = (text) => {
+	return [...text].length;
+};
+const useSmoothStreamContent = (content, { enabled = true, preset = "balanced" } = {}) => {
+	const config = PRESET_CONFIG[preset];
+	const [displayedContent, setDisplayedContent] = useState(content);
+	const displayedContentRef = useRef(content);
+	const displayedCountRef = useRef(countChars(content));
+	const targetContentRef = useRef(content);
+	const targetCharsRef = useRef([...content]);
+	const targetCountRef = useRef(targetCharsRef.current.length);
+	const emaCpsRef = useRef(config.defaultCps);
+	const lastInputTsRef = useRef(0);
+	const lastInputCountRef = useRef(targetCountRef.current);
+	const chunkSizeEmaRef = useRef(1);
+	const arrivalCpsEmaRef = useRef(config.defaultCps);
+	const rafRef = useRef(null);
+	const lastFrameTsRef = useRef(null);
+	const stopFrameLoop = useCallback(() => {
+		if (rafRef.current !== null) {
+			cancelAnimationFrame(rafRef.current);
+			rafRef.current = null;
+		}
+		lastFrameTsRef.current = null;
+	}, []);
+	const syncImmediate = useCallback((nextContent) => {
+		stopFrameLoop();
+		const chars = [...nextContent];
+		const now = performance.now();
+		targetContentRef.current = nextContent;
+		targetCharsRef.current = chars;
+		targetCountRef.current = chars.length;
+		displayedContentRef.current = nextContent;
+		displayedCountRef.current = chars.length;
+		setDisplayedContent(nextContent);
+		emaCpsRef.current = config.defaultCps;
+		chunkSizeEmaRef.current = 1;
+		arrivalCpsEmaRef.current = config.defaultCps;
+		lastInputTsRef.current = now;
+		lastInputCountRef.current = chars.length;
+	}, [config.defaultCps, stopFrameLoop]);
+	const startFrameLoop = useCallback(() => {
+		if (rafRef.current !== null) return;
+		const tick = (ts) => {
+			if (lastFrameTsRef.current === null) {
+				lastFrameTsRef.current = ts;
+				rafRef.current = requestAnimationFrame(tick);
+				return;
+			}
+			const dtSeconds = Math.max(.001, Math.min((ts - lastFrameTsRef.current) / 1e3, .05));
+			lastFrameTsRef.current = ts;
+			const targetCount = targetCountRef.current;
+			const displayedCount = displayedCountRef.current;
+			const backlog = targetCount - displayedCount;
+			if (backlog <= 0) {
+				stopFrameLoop();
+				return;
+			}
+			const idleMs = performance.now() - lastInputTsRef.current;
+			const inputActive = idleMs <= config.activeInputWindowMs;
+			const settling = !inputActive && idleMs >= config.settleAfterMs;
+			const baseCps = clamp(emaCpsRef.current, config.minCps, config.maxCps);
+			const baseLagChars = Math.max(1, Math.round(baseCps * config.targetBufferMs / 1e3));
+			const lagUpperBound = Math.max(baseLagChars + 2, baseLagChars * 3);
+			const targetLagChars = inputActive ? Math.round(clamp(baseLagChars + chunkSizeEmaRef.current * .35, baseLagChars, lagUpperBound)) : 0;
+			const desiredDisplayed = Math.max(0, targetCount - targetLagChars);
+			let currentCps;
+			if (inputActive) {
+				const backlogPressure = targetLagChars > 0 ? backlog / targetLagChars : 1;
+				const chunkPressure = targetLagChars > 0 ? chunkSizeEmaRef.current / targetLagChars : 1;
+				const arrivalPressure = arrivalCpsEmaRef.current / Math.max(baseCps, 1);
+				const combinedPressure = clamp(backlogPressure * .6 + chunkPressure * .25 + arrivalPressure * .15, 1, 4.5);
+				const activeCap = clamp(config.maxActiveCps + chunkSizeEmaRef.current * 6, config.maxActiveCps, config.maxFlushCps);
+				currentCps = clamp(baseCps * combinedPressure, config.minCps, activeCap);
+			} else if (settling) {
+				const drainTargetMs = clamp(backlog * 8, config.settleDrainMinMs, config.settleDrainMaxMs);
+				currentCps = clamp(backlog * 1e3 / drainTargetMs, config.flushCps, config.maxFlushCps);
+			} else currentCps = clamp(Math.max(config.flushCps, baseCps * 1.8, arrivalCpsEmaRef.current * .8), config.flushCps, config.maxFlushCps);
+			const urgentBacklog = inputActive && targetLagChars > 0 && backlog > targetLagChars * 2.2;
+			const burstyInput = inputActive && chunkSizeEmaRef.current >= targetLagChars * .9;
+			const minRevealChars = inputActive ? urgentBacklog || burstyInput ? 2 : 1 : 2;
+			let revealChars = Math.max(minRevealChars, Math.round(currentCps * dtSeconds));
+			if (inputActive) {
+				const shortfall = desiredDisplayed - displayedCount;
+				if (shortfall <= 0) {
+					rafRef.current = requestAnimationFrame(tick);
+					return;
+				}
+				revealChars = Math.min(revealChars, shortfall, backlog);
+			} else revealChars = Math.min(revealChars, backlog);
+			const nextCount = displayedCount + revealChars;
+			const segment = targetCharsRef.current.slice(displayedCount, nextCount).join("");
+			if (segment) {
+				const nextDisplayed = displayedContentRef.current + segment;
+				displayedContentRef.current = nextDisplayed;
+				displayedCountRef.current = nextCount;
+				setDisplayedContent(nextDisplayed);
+			} else {
+				displayedContentRef.current = targetContentRef.current;
+				displayedCountRef.current = targetCount;
+				setDisplayedContent(targetContentRef.current);
+			}
+			rafRef.current = requestAnimationFrame(tick);
+		};
+		rafRef.current = requestAnimationFrame(tick);
+	}, [
+		config.activeInputWindowMs,
+		config.flushCps,
+		config.maxActiveCps,
+		config.maxCps,
+		config.maxFlushCps,
+		config.minCps,
+		config.settleAfterMs,
+		config.settleDrainMaxMs,
+		config.settleDrainMinMs,
+		config.targetBufferMs,
+		stopFrameLoop
+	]);
+	useEffect(() => {
+		if (!enabled) {
+			syncImmediate(content);
+			return;
+		}
+		const prevTargetContent = targetContentRef.current;
+		if (content === prevTargetContent) return;
+		const now = performance.now();
+		if (!content.startsWith(prevTargetContent)) {
+			syncImmediate(content);
+			return;
+		}
+		const appendedChars = [...content.slice(prevTargetContent.length)];
+		const appendedCount = appendedChars.length;
+		if (appendedCount > config.largeAppendChars) {
+			syncImmediate(content);
+			return;
+		}
+		targetContentRef.current = content;
+		targetCharsRef.current = [...targetCharsRef.current, ...appendedChars];
+		targetCountRef.current += appendedCount;
+		const deltaChars = targetCountRef.current - lastInputCountRef.current;
+		const deltaMs = Math.max(1, now - lastInputTsRef.current);
+		if (deltaChars > 0) {
+			const instantCps = deltaChars * 1e3 / deltaMs;
+			const normalizedInstantCps = clamp(instantCps, config.minCps, config.maxFlushCps * 2);
+			const chunkEmaAlpha = .35;
+			chunkSizeEmaRef.current = chunkSizeEmaRef.current * (1 - chunkEmaAlpha) + appendedCount * chunkEmaAlpha;
+			arrivalCpsEmaRef.current = arrivalCpsEmaRef.current * (1 - chunkEmaAlpha) + normalizedInstantCps * chunkEmaAlpha;
+			const clampedCps = clamp(instantCps, config.minCps, config.maxActiveCps);
+			emaCpsRef.current = emaCpsRef.current * (1 - config.emaAlpha) + clampedCps * config.emaAlpha;
+		}
+		lastInputTsRef.current = now;
+		lastInputCountRef.current = targetCountRef.current;
+		startFrameLoop();
+	}, [
+		config.emaAlpha,
+		config.largeAppendChars,
+		config.maxActiveCps,
+		config.maxCps,
+		config.maxFlushCps,
+		config.minCps,
+		content,
+		enabled,
+		startFrameLoop,
+		syncImmediate
+	]);
+	useEffect(() => {
+		return () => {
+			stopFrameLoop();
+		};
+	}, [stopFrameLoop]);
+	return displayedContent;
+};
+
+//#endregion
+export { useSmoothStreamContent };
+//# sourceMappingURL=useSmoothStreamContent.mjs.map

package/es/Markdown/SyntaxMarkdown/useSmoothStreamContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSmoothStreamContent.mjs","names":["PRESET_CONFIG: Record<StreamSmoothingPreset, StreamSmoothingPresetConfig>","currentCps: number"],"sources":["../../../src/Markdown/SyntaxMarkdown/useSmoothStreamContent.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type StreamSmoothingPreset } from '@/Markdown/type';\n\ninterface StreamSmoothingPresetConfig {\n  activeInputWindowMs: number;\n  defaultCps: number;\n  emaAlpha: number;\n  flushCps: number;\n  largeAppendChars: number;\n  maxActiveCps: number;\n  maxCps: number;\n  maxFlushCps: number;\n  minCps: number;\n  settleAfterMs: number;\n  settleDrainMaxMs: number;\n  settleDrainMinMs: number;\n  targetBufferMs: number;\n}\n\nconst PRESET_CONFIG: Record<StreamSmoothingPreset, StreamSmoothingPresetConfig> = {\n  balanced: {\n    activeInputWindowMs: 220,\n    defaultCps: 38,\n    emaAlpha: 0.2,\n    flushCps: 120,\n    largeAppendChars: 120,\n    maxActiveCps: 132,\n    maxCps: 72,\n    maxFlushCps: 280,\n    minCps: 18,\n    settleAfterMs: 360,\n    settleDrainMaxMs: 520,\n    settleDrainMinMs: 180,\n    targetBufferMs: 120,\n  },\n  realtime: {\n    activeInputWindowMs: 140,\n    defaultCps: 50,\n    emaAlpha: 0.3,\n    flushCps: 170,\n    largeAppendChars: 180,\n    maxActiveCps: 180,\n    maxCps: 96,\n    maxFlushCps: 360,\n    minCps: 24,\n    settleAfterMs: 260,\n    settleDrainMaxMs: 360,\n    settleDrainMinMs: 140,\n    targetBufferMs: 40,\n  },\n  silky: {\n    activeInputWindowMs: 320,\n    defaultCps: 28,\n    emaAlpha: 0.14,\n    flushCps: 96,\n    largeAppendChars: 100,\n    maxActiveCps: 102,\n    maxCps: 56,\n    maxFlushCps: 220,\n    minCps: 14,\n    settleAfterMs: 460,\n    settleDrainMaxMs: 680,\n    settleDrainMinMs: 240,\n    targetBufferMs: 170,\n  },\n};\n\nconst clamp = (value: number, min: number, max: number): number => {\n  return Math.min(max, Math.max(min, value));\n};\n\nexport const countChars = (text: string): number => {\n  return [...text].length;\n};\n\ninterface UseSmoothStreamContentOptions {\n  enabled?: boolean;\n  preset?: StreamSmoothingPreset;\n}\n\nexport const useSmoothStreamContent = (\n  content: string,\n  { enabled = true, preset = 'balanced' }: UseSmoothStreamContentOptions = {},\n): string => {\n  const config = PRESET_CONFIG[preset];\n  const [displayedContent, setDisplayedContent] = useState(content);\n\n  const displayedContentRef = useRef(content);\n  const displayedCountRef = useRef(countChars(content));\n\n  const targetContentRef = useRef(content);\n  const targetCharsRef = useRef([...content]);\n  const targetCountRef = useRef(targetCharsRef.current.length);\n\n  const emaCpsRef = useRef(config.defaultCps);\n  const lastInputTsRef = useRef(0);\n  const lastInputCountRef = useRef(targetCountRef.current);\n  const chunkSizeEmaRef = useRef(1);\n  const arrivalCpsEmaRef = useRef(config.defaultCps);\n\n  const rafRef = useRef<number | null>(null);\n  const lastFrameTsRef = useRef<number | null>(null);\n\n  const stopFrameLoop = useCallback(() => {\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n    lastFrameTsRef.current = null;\n  }, []);\n\n  const syncImmediate = useCallback(\n    (nextContent: string) => {\n      stopFrameLoop();\n\n      const chars = [...nextContent];\n      const now = performance.now();\n\n      targetContentRef.current = nextContent;\n      targetCharsRef.current = chars;\n      targetCountRef.current = chars.length;\n\n      displayedContentRef.current = nextContent;\n      displayedCountRef.current = chars.length;\n      setDisplayedContent(nextContent);\n\n      emaCpsRef.current = config.defaultCps;\n      chunkSizeEmaRef.current = 1;\n      arrivalCpsEmaRef.current = config.defaultCps;\n      lastInputTsRef.current = now;\n      lastInputCountRef.current = chars.length;\n    },\n    [config.defaultCps, stopFrameLoop],\n  );\n\n  const startFrameLoop = useCallback(() => {\n    if (rafRef.current !== null) return;\n\n    const tick = (ts: number) => {\n      if (lastFrameTsRef.current === null) {\n        lastFrameTsRef.current = ts;\n        rafRef.current = requestAnimationFrame(tick);\n        return;\n      }\n\n      const dtSeconds = Math.max(0.001, Math.min((ts - lastFrameTsRef.current) / 1000, 0.05));\n      lastFrameTsRef.current = ts;\n\n      const targetCount = targetCountRef.current;\n      const displayedCount = displayedCountRef.current;\n      const backlog = targetCount - displayedCount;\n\n      if (backlog <= 0) {\n        stopFrameLoop();\n        return;\n      }\n\n      const now = performance.now();\n      const idleMs = now - lastInputTsRef.current;\n      const inputActive = idleMs <= config.activeInputWindowMs;\n      const settling = !inputActive && idleMs >= config.settleAfterMs;\n\n      const baseCps = clamp(emaCpsRef.current, config.minCps, config.maxCps);\n      const baseLagChars = Math.max(1, Math.round((baseCps * config.targetBufferMs) / 1000));\n      const lagUpperBound = Math.max(baseLagChars + 2, baseLagChars * 3);\n      const targetLagChars = inputActive\n        ? Math.round(\n            clamp(baseLagChars + chunkSizeEmaRef.current * 0.35, baseLagChars, lagUpperBound),\n          )\n        : 0;\n      const desiredDisplayed = Math.max(0, targetCount - targetLagChars);\n\n      let currentCps: number;\n      if (inputActive) {\n        const backlogPressure = targetLagChars > 0 ? backlog / targetLagChars : 1;\n        const chunkPressure = targetLagChars > 0 ? chunkSizeEmaRef.current / targetLagChars : 1;\n        const arrivalPressure = arrivalCpsEmaRef.current / Math.max(baseCps, 1);\n        const combinedPressure = clamp(\n          backlogPressure * 0.6 + chunkPressure * 0.25 + arrivalPressure * 0.15,\n          1,\n          4.5,\n        );\n        const activeCap = clamp(\n          config.maxActiveCps + chunkSizeEmaRef.current * 6,\n          config.maxActiveCps,\n          config.maxFlushCps,\n        );\n        currentCps = clamp(baseCps * combinedPressure, config.minCps, activeCap);\n      } else if (settling) {\n        // If upstream likely ended, cap the remaining tail duration so\n        // we do not keep replaying old backlog for seconds.\n        const drainTargetMs = clamp(backlog * 8, config.settleDrainMinMs, config.settleDrainMaxMs);\n        const settleCps = (backlog * 1000) / drainTargetMs;\n        currentCps = clamp(settleCps, config.flushCps, config.maxFlushCps);\n      } else {\n        const idleFlushCps = Math.max(\n          config.flushCps,\n          baseCps * 1.8,\n          arrivalCpsEmaRef.current * 0.8,\n        );\n        currentCps = clamp(idleFlushCps, config.flushCps, config.maxFlushCps);\n      }\n\n      const urgentBacklog = inputActive && targetLagChars > 0 && backlog > targetLagChars * 2.2;\n      const burstyInput = inputActive && chunkSizeEmaRef.current >= targetLagChars * 0.9;\n      const minRevealChars = inputActive ? (urgentBacklog || burstyInput ? 2 : 1) : 2;\n      let revealChars = Math.max(minRevealChars, Math.round(currentCps * dtSeconds));\n\n      if (inputActive) {\n        const shortfall = desiredDisplayed - displayedCount;\n        if (shortfall <= 0) {\n          rafRef.current = requestAnimationFrame(tick);\n          return;\n        }\n        revealChars = Math.min(revealChars, shortfall, backlog);\n      } else {\n        revealChars = Math.min(revealChars, backlog);\n      }\n\n      const nextCount = displayedCount + revealChars;\n      const segment = targetCharsRef.current.slice(displayedCount, nextCount).join('');\n\n      if (segment) {\n        const nextDisplayed = displayedContentRef.current + segment;\n        displayedContentRef.current = nextDisplayed;\n        displayedCountRef.current = nextCount;\n        setDisplayedContent(nextDisplayed);\n      } else {\n        displayedContentRef.current = targetContentRef.current;\n        displayedCountRef.current = targetCount;\n        setDisplayedContent(targetContentRef.current);\n      }\n\n      rafRef.current = requestAnimationFrame(tick);\n    };\n\n    rafRef.current = requestAnimationFrame(tick);\n  }, [\n    config.activeInputWindowMs,\n    config.flushCps,\n    config.maxActiveCps,\n    config.maxCps,\n    config.maxFlushCps,\n    config.minCps,\n    config.settleAfterMs,\n    config.settleDrainMaxMs,\n    config.settleDrainMinMs,\n    config.targetBufferMs,\n    stopFrameLoop,\n  ]);\n\n  useEffect(() => {\n    if (!enabled) {\n      syncImmediate(content);\n      return;\n    }\n\n    const prevTargetContent = targetContentRef.current;\n    if (content === prevTargetContent) return;\n\n    const now = performance.now();\n    const appendOnly = content.startsWith(prevTargetContent);\n\n    if (!appendOnly) {\n      syncImmediate(content);\n      return;\n    }\n\n    const appended = content.slice(prevTargetContent.length);\n    const appendedChars = [...appended];\n    const appendedCount = appendedChars.length;\n\n    if (appendedCount > config.largeAppendChars) {\n      syncImmediate(content);\n      return;\n    }\n\n    targetContentRef.current = content;\n    targetCharsRef.current = [...targetCharsRef.current, ...appendedChars];\n    targetCountRef.current += appendedCount;\n\n    const deltaChars = targetCountRef.current - lastInputCountRef.current;\n    const deltaMs = Math.max(1, now - lastInputTsRef.current);\n\n    if (deltaChars > 0) {\n      const instantCps = (deltaChars * 1000) / deltaMs;\n      const normalizedInstantCps = clamp(instantCps, config.minCps, config.maxFlushCps * 2);\n      const chunkEmaAlpha = 0.35;\n      chunkSizeEmaRef.current =\n        chunkSizeEmaRef.current * (1 - chunkEmaAlpha) + appendedCount * chunkEmaAlpha;\n      arrivalCpsEmaRef.current =\n        arrivalCpsEmaRef.current * (1 - chunkEmaAlpha) + normalizedInstantCps * chunkEmaAlpha;\n\n      const clampedCps = clamp(instantCps, config.minCps, config.maxActiveCps);\n      emaCpsRef.current = emaCpsRef.current * (1 - config.emaAlpha) + clampedCps * config.emaAlpha;\n    }\n\n    lastInputTsRef.current = now;\n    lastInputCountRef.current = targetCountRef.current;\n\n    startFrameLoop();\n  }, [\n    config.emaAlpha,\n    config.largeAppendChars,\n    config.maxActiveCps,\n    config.maxCps,\n    config.maxFlushCps,\n    config.minCps,\n    content,\n    enabled,\n    startFrameLoop,\n    syncImmediate,\n  ]);\n\n  useEffect(() => {\n    return () => {\n      stopFrameLoop();\n    };\n  }, [stopFrameLoop]);\n\n  return displayedContent;\n};\n"],"mappings":"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"}

package/es/Markdown/SyntaxMarkdown/useStreamQueue.mjs

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/Markdown/SyntaxMarkdown/useStreamQueue.ts
-const BASE_DELAY = 20;
+const BASE_DELAY = 18;
 const ACCELERATION_FACTOR = .3;
 const MAX_BLOCK_DURATION = 3e3;
-const FADE_DURATION = 150;
+const FADE_DURATION = 280;
 function countChars(text) {
 	return [...text].length;
 }
@@ -45,15 +45,17 @@ function useStreamQueue(blocks) {
 	const queueLength = Math.max(0, tailIndex - effectiveRevealedCount - 1);
 	const animatingIndex = effectiveRevealedCount < tailIndex ? effectiveRevealedCount : -1;
 	const animatingCharCount = animatingIndex >= 0 ? countChars(blocks[animatingIndex]?.content ?? "") : 0;
+	const activeIndex = animatingIndex >= 0 ? animatingIndex : animatingIndex < 0 && tailIndex >= effectiveRevealedCount ? tailIndex : -1;
+	const activeCharCount = activeIndex >= 0 ? countChars(blocks[activeIndex]?.content ?? "") : 0;
 	const frozenRef = useRef({
 		delay: BASE_DELAY,
 		index: -1
 	});
-	if (animatingIndex >= 0 && animatingIndex !== frozenRef.current.index) frozenRef.current = {
-		delay: computeCharDelay(queueLength, animatingCharCount),
-		index: animatingIndex
+	if (activeIndex >= 0 && activeIndex !== frozenRef.current.index) frozenRef.current = {
+		delay: computeCharDelay(queueLength, activeCharCount),
+		index: activeIndex
 	};
-	const charDelay = animatingIndex >= 0 ? frozenRef.current.delay : BASE_DELAY;
+	const charDelay = activeIndex >= 0 ? frozenRef.current.delay : BASE_DELAY;
 	const onAnimationDone = useCallback(() => {
 		setRevealedCount(effectiveRevealedCount + 1);
 	}, [effectiveRevealedCount]);

package/es/Markdown/SyntaxMarkdown/useStreamQueue.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useStreamQueue.mjs","names":[],"sources":["../../../src/Markdown/SyntaxMarkdown/useStreamQueue.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface BlockInfo {\n  content: string;\n  startOffset: number;\n}\n\nexport type BlockState = 'revealed' | 'animating' | 'streaming' | 'queued';\n\nconst BASE_DELAY = 20;\nconst ACCELERATION_FACTOR = 0.3;\nconst MAX_BLOCK_DURATION = 3000;\nconst FADE_DURATION = 150;\n\nfunction countChars(text: string): number {\n  return [...text].length;\n}\n\nfunction computeCharDelay(queueLength: number, charCount: number): number {\n  const acceleration = 1 + queueLength * ACCELERATION_FACTOR;\n  let delay = BASE_DELAY / acceleration;\n  delay = Math.min(delay, MAX_BLOCK_DURATION / Math.max(charCount, 1));\n  return delay;\n}\n\nexport interface UseStreamQueueReturn {\n  charDelay: number;\n  getBlockState: (index: number) => BlockState;\n  queueLength: number;\n}\n\nexport function useStreamQueue(blocks: BlockInfo[]): UseStreamQueueReturn {\n  const [revealedCount, setRevealedCount] = useState(0);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const prevBlocksLenRef = useRef(0);\n  const minRevealedRef = useRef(0);\n\n  // Synchronous auto-reveal during render.\n  // When blocks grow, the previous tail (streaming block) is instantly\n  // promoted to revealed — its chars are already visible via stream-mode\n  // animation. This runs during render (not in effect) so there is NO\n  // intermediate frame where the old streaming block enters 'animating'\n  // state and gets stagger plugins that would restart its animations.\n  if (blocks.length === 0 && prevBlocksLenRef.current !== 0) {\n    minRevealedRef.current = 0;\n  }\n  if (blocks.length > prevBlocksLenRef.current && prevBlocksLenRef.current > 0) {\n    const prevTail = prevBlocksLenRef.current - 1;\n    minRevealedRef.current = Math.max(minRevealedRef.current, prevTail + 1);\n  }\n  prevBlocksLenRef.current = blocks.length;\n\n  // State reset when stream restarts (blocks empty)\n  useEffect(() => {\n    if (blocks.length === 0) {\n      setRevealedCount(0);\n      minRevealedRef.current = 0;\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n    }\n  }, [blocks.length]);\n\n  const effectiveRevealedCount = Math.max(revealedCount, minRevealedRef.current);\n  const tailIndex = blocks.length - 1;\n\n  const getBlockState = useCallback(\n    (index: number): BlockState => {\n      if (index < effectiveRevealedCount) return 'revealed';\n      if (index === effectiveRevealedCount && index < tailIndex) return 'animating';\n      if (index === effectiveRevealedCount && index === tailIndex) return 'streaming';\n      return 'queued';\n    },\n    [effectiveRevealedCount, tailIndex],\n  );\n\n  const queueLength = Math.max(0, tailIndex - effectiveRevealedCount - 1);\n\n  const animatingIndex = effectiveRevealedCount < tailIndex ? effectiveRevealedCount : -1;\n  const animatingCharCount =\n    animatingIndex >= 0 ? countChars(blocks[animatingIndex]?.content ?? '') : 0;\n\n  // Freeze charDelay when a new block starts animating\n  const frozenRef = useRef({ delay: BASE_DELAY, index: -1 });\n  if (animatingIndex >= 0 && animatingIndex !== frozenRef.current.index) {\n    frozenRef.current = {\n      delay: computeCharDelay(queueLength, animatingCharCount),\n      index: animatingIndex,\n    };\n  }\n  const charDelay = animatingIndex >= 0 ? frozenRef.current.delay : BASE_DELAY;\n\n  const onAnimationDone = useCallback(() => {\n    setRevealedCount(effectiveRevealedCount + 1);\n  }, [effectiveRevealedCount]);\n\n  useEffect(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n\n    if (animatingIndex < 0) return;\n\n    const totalTime = Math.max(0, (animatingCharCount - 1) * charDelay) + FADE_DURATION;\n    timerRef.current = setTimeout(onAnimationDone, totalTime);\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n    };\n  }, [animatingIndex, animatingCharCount, charDelay, onAnimationDone]);\n\n  return { charDelay, getBlockState, queueLength };\n}\n"],"mappings":";;;AASA,MAAM,aAAa;AACnB,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AAEtB,SAAS,WAAW,MAAsB;AACxC,QAAO,CAAC,GAAG,KAAK,CAAC;;AAGnB,SAAS,iBAAiB,aAAqB,WAA2B;CAExE,IAAI,QAAQ,cADS,IAAI,cAAc;AAEvC,SAAQ,KAAK,IAAI,OAAO,qBAAqB,KAAK,IAAI,WAAW,EAAE,CAAC;AACpE,QAAO;;AAST,SAAgB,eAAe,QAA2C;CACxE,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CACrD,MAAM,WAAW,OAA6C,KAAK;CACnE,MAAM,mBAAmB,OAAO,EAAE;CAClC,MAAM,iBAAiB,OAAO,EAAE;AAQhC,KAAI,OAAO,WAAW,KAAK,iBAAiB,YAAY,EACtD,gBAAe,UAAU;AAE3B,KAAI,OAAO,SAAS,iBAAiB,WAAW,iBAAiB,UAAU,GAAG;EAC5E,MAAM,WAAW,iBAAiB,UAAU;AAC5C,iBAAe,UAAU,KAAK,IAAI,eAAe,SAAS,WAAW,EAAE;;AAEzE,kBAAiB,UAAU,OAAO;AAGlC,iBAAgB;AACd,MAAI,OAAO,WAAW,GAAG;AACvB,oBAAiB,EAAE;AACnB,kBAAe,UAAU;AACzB,OAAI,SAAS,SAAS;AACpB,iBAAa,SAAS,QAAQ;AAC9B,aAAS,UAAU;;;IAGtB,CAAC,OAAO,OAAO,CAAC;CAEnB,MAAM,yBAAyB,KAAK,IAAI,eAAe,eAAe,QAAQ;CAC9E,MAAM,YAAY,OAAO,SAAS;CAElC,MAAM,gBAAgB,aACnB,UAA8B;AAC7B,MAAI,QAAQ,uBAAwB,QAAO;AAC3C,MAAI,UAAU,0BAA0B,QAAQ,UAAW,QAAO;AAClE,MAAI,UAAU,0BAA0B,UAAU,UAAW,QAAO;AACpE,SAAO;IAET,CAAC,wBAAwB,UAAU,CACpC;CAED,MAAM,cAAc,KAAK,IAAI,GAAG,YAAY,yBAAyB,EAAE;CAEvE,MAAM,iBAAiB,yBAAyB,YAAY,yBAAyB;CACrF,MAAM,qBACJ,kBAAkB,IAAI,WAAW,OAAO,iBAAiB,WAAW,GAAG,GAAG;CAG5E,MAAM,YAAY,OAAO;EAAE,OAAO;EAAY,OAAO;EAAI,CAAC;AAC1D,KAAI,kBAAkB,KAAK,mBAAmB,UAAU,QAAQ,MAC9D,WAAU,UAAU;EAClB,OAAO,iBAAiB,aAAa,mBAAmB;EACxD,OAAO;EACR;CAEH,MAAM,YAAY,kBAAkB,IAAI,UAAU,QAAQ,QAAQ;CAElE,MAAM,kBAAkB,kBAAkB;AACxC,mBAAiB,yBAAyB,EAAE;IAC3C,CAAC,uBAAuB,CAAC;AAE5B,iBAAgB;AACd,MAAI,SAAS,SAAS;AACpB,gBAAa,SAAS,QAAQ;AAC9B,YAAS,UAAU;;AAGrB,MAAI,iBAAiB,EAAG;EAExB,MAAM,YAAY,KAAK,IAAI,IAAI,qBAAqB,KAAK,UAAU,GAAG;AACtE,WAAS,UAAU,WAAW,iBAAiB,UAAU;AAEzD,eAAa;AACX,OAAI,SAAS,SAAS;AACpB,iBAAa,SAAS,QAAQ;AAC9B,aAAS,UAAU;;;IAGtB;EAAC;EAAgB;EAAoB;EAAW;EAAgB,CAAC;AAEpE,QAAO;EAAE;EAAW;EAAe;EAAa"}
+{"version":3,"file":"useStreamQueue.mjs","names":[],"sources":["../../../src/Markdown/SyntaxMarkdown/useStreamQueue.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface BlockInfo {\n  content: string;\n  startOffset: number;\n}\n\nexport type BlockState = 'revealed' | 'animating' | 'streaming' | 'queued';\n\nconst BASE_DELAY = 18;\nconst ACCELERATION_FACTOR = 0.3;\nconst MAX_BLOCK_DURATION = 3000;\nconst FADE_DURATION = 280;\n\nfunction countChars(text: string): number {\n  return [...text].length;\n}\n\nfunction computeCharDelay(queueLength: number, charCount: number): number {\n  const acceleration = 1 + queueLength * ACCELERATION_FACTOR;\n  let delay = BASE_DELAY / acceleration;\n  delay = Math.min(delay, MAX_BLOCK_DURATION / Math.max(charCount, 1));\n  return delay;\n}\n\nexport interface UseStreamQueueReturn {\n  charDelay: number;\n  getBlockState: (index: number) => BlockState;\n  queueLength: number;\n}\n\nexport function useStreamQueue(blocks: BlockInfo[]): UseStreamQueueReturn {\n  const [revealedCount, setRevealedCount] = useState(0);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const prevBlocksLenRef = useRef(0);\n  const minRevealedRef = useRef(0);\n\n  // Synchronous auto-reveal during render.\n  // When blocks grow, the previous tail (streaming block) is instantly\n  // promoted to revealed — its chars are already visible via stream-mode\n  // animation. This runs during render (not in effect) so there is NO\n  // intermediate frame where the old streaming block enters 'animating'\n  // state and gets stagger plugins that would restart its animations.\n  if (blocks.length === 0 && prevBlocksLenRef.current !== 0) {\n    minRevealedRef.current = 0;\n  }\n  if (blocks.length > prevBlocksLenRef.current && prevBlocksLenRef.current > 0) {\n    const prevTail = prevBlocksLenRef.current - 1;\n    minRevealedRef.current = Math.max(minRevealedRef.current, prevTail + 1);\n  }\n  prevBlocksLenRef.current = blocks.length;\n\n  // State reset when stream restarts (blocks empty)\n  useEffect(() => {\n    if (blocks.length === 0) {\n      setRevealedCount(0);\n      minRevealedRef.current = 0;\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n    }\n  }, [blocks.length]);\n\n  const effectiveRevealedCount = Math.max(revealedCount, minRevealedRef.current);\n  const tailIndex = blocks.length - 1;\n\n  const getBlockState = useCallback(\n    (index: number): BlockState => {\n      if (index < effectiveRevealedCount) return 'revealed';\n      if (index === effectiveRevealedCount && index < tailIndex) return 'animating';\n      if (index === effectiveRevealedCount && index === tailIndex) return 'streaming';\n      return 'queued';\n    },\n    [effectiveRevealedCount, tailIndex],\n  );\n\n  const queueLength = Math.max(0, tailIndex - effectiveRevealedCount - 1);\n\n  const animatingIndex = effectiveRevealedCount < tailIndex ? effectiveRevealedCount : -1;\n  const animatingCharCount =\n    animatingIndex >= 0 ? countChars(blocks[animatingIndex]?.content ?? '') : 0;\n\n  const streamingIndex = animatingIndex < 0 && tailIndex >= effectiveRevealedCount ? tailIndex : -1;\n  const activeIndex = animatingIndex >= 0 ? animatingIndex : streamingIndex;\n  const activeCharCount = activeIndex >= 0 ? countChars(blocks[activeIndex]?.content ?? '') : 0;\n\n  // Freeze charDelay when entering a new active block (animating or streaming)\n  const frozenRef = useRef({ delay: BASE_DELAY, index: -1 });\n  if (activeIndex >= 0 && activeIndex !== frozenRef.current.index) {\n    frozenRef.current = {\n      delay: computeCharDelay(queueLength, activeCharCount),\n      index: activeIndex,\n    };\n  }\n  const charDelay = activeIndex >= 0 ? frozenRef.current.delay : BASE_DELAY;\n\n  const onAnimationDone = useCallback(() => {\n    setRevealedCount(effectiveRevealedCount + 1);\n  }, [effectiveRevealedCount]);\n\n  useEffect(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n\n    if (animatingIndex < 0) return;\n\n    const totalTime = Math.max(0, (animatingCharCount - 1) * charDelay) + FADE_DURATION;\n    timerRef.current = setTimeout(onAnimationDone, totalTime);\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n    };\n  }, [animatingIndex, animatingCharCount, charDelay, onAnimationDone]);\n\n  return { charDelay, getBlockState, queueLength };\n}\n"],"mappings":";;;AASA,MAAM,aAAa;AACnB,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AAEtB,SAAS,WAAW,MAAsB;AACxC,QAAO,CAAC,GAAG,KAAK,CAAC;;AAGnB,SAAS,iBAAiB,aAAqB,WAA2B;CAExE,IAAI,QAAQ,cADS,IAAI,cAAc;AAEvC,SAAQ,KAAK,IAAI,OAAO,qBAAqB,KAAK,IAAI,WAAW,EAAE,CAAC;AACpE,QAAO;;AAST,SAAgB,eAAe,QAA2C;CACxE,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CACrD,MAAM,WAAW,OAA6C,KAAK;CACnE,MAAM,mBAAmB,OAAO,EAAE;CAClC,MAAM,iBAAiB,OAAO,EAAE;AAQhC,KAAI,OAAO,WAAW,KAAK,iBAAiB,YAAY,EACtD,gBAAe,UAAU;AAE3B,KAAI,OAAO,SAAS,iBAAiB,WAAW,iBAAiB,UAAU,GAAG;EAC5E,MAAM,WAAW,iBAAiB,UAAU;AAC5C,iBAAe,UAAU,KAAK,IAAI,eAAe,SAAS,WAAW,EAAE;;AAEzE,kBAAiB,UAAU,OAAO;AAGlC,iBAAgB;AACd,MAAI,OAAO,WAAW,GAAG;AACvB,oBAAiB,EAAE;AACnB,kBAAe,UAAU;AACzB,OAAI,SAAS,SAAS;AACpB,iBAAa,SAAS,QAAQ;AAC9B,aAAS,UAAU;;;IAGtB,CAAC,OAAO,OAAO,CAAC;CAEnB,MAAM,yBAAyB,KAAK,IAAI,eAAe,eAAe,QAAQ;CAC9E,MAAM,YAAY,OAAO,SAAS;CAElC,MAAM,gBAAgB,aACnB,UAA8B;AAC7B,MAAI,QAAQ,uBAAwB,QAAO;AAC3C,MAAI,UAAU,0BAA0B,QAAQ,UAAW,QAAO;AAClE,MAAI,UAAU,0BAA0B,UAAU,UAAW,QAAO;AACpE,SAAO;IAET,CAAC,wBAAwB,UAAU,CACpC;CAED,MAAM,cAAc,KAAK,IAAI,GAAG,YAAY,yBAAyB,EAAE;CAEvE,MAAM,iBAAiB,yBAAyB,YAAY,yBAAyB;CACrF,MAAM,qBACJ,kBAAkB,IAAI,WAAW,OAAO,iBAAiB,WAAW,GAAG,GAAG;CAG5E,MAAM,cAAc,kBAAkB,IAAI,iBADnB,iBAAiB,KAAK,aAAa,yBAAyB,YAAY;CAE/F,MAAM,kBAAkB,eAAe,IAAI,WAAW,OAAO,cAAc,WAAW,GAAG,GAAG;CAG5F,MAAM,YAAY,OAAO;EAAE,OAAO;EAAY,OAAO;EAAI,CAAC;AAC1D,KAAI,eAAe,KAAK,gBAAgB,UAAU,QAAQ,MACxD,WAAU,UAAU;EAClB,OAAO,iBAAiB,aAAa,gBAAgB;EACrD,OAAO;EACR;CAEH,MAAM,YAAY,eAAe,IAAI,UAAU,QAAQ,QAAQ;CAE/D,MAAM,kBAAkB,kBAAkB;AACxC,mBAAiB,yBAAyB,EAAE;IAC3C,CAAC,uBAAuB,CAAC;AAE5B,iBAAgB;AACd,MAAI,SAAS,SAAS;AACpB,gBAAa,SAAS,QAAQ;AAC9B,YAAS,UAAU;;AAGrB,MAAI,iBAAiB,EAAG;EAExB,MAAM,YAAY,KAAK,IAAI,IAAI,qBAAqB,KAAK,UAAU,GAAG;AACtE,WAAS,UAAU,WAAW,iBAAiB,UAAU;AAEzD,eAAa;AACX,OAAI,SAAS,SAAS;AACpB,iBAAa,SAAS,QAAQ;AAC9B,aAAS,UAAU;;;IAGtB;EAAC;EAAgB;EAAoB;EAAW;EAAgB,CAAC;AAEpE,QAAO;EAAE;EAAW;EAAe;EAAa"}

package/es/Markdown/Typography.d.mts

@@ -1,8 +1,8 @@
 import { TypographyProps } from "./type.mjs";
-import * as react52 from "react";
+import * as react36 from "react";
 
 //#region src/Markdown/Typography.d.ts
-declare const Typography: react52.NamedExoticComponent<TypographyProps>;
+declare const Typography: react36.NamedExoticComponent<TypographyProps>;
 //#endregion
 export { Typography };
 //# sourceMappingURL=Typography.d.mts.map

package/es/Markdown/components/SearchResultCards/index.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../../Flex/type.mjs";
 import "../../../Flex/index.mjs";
-import * as react36 from "react";
+import * as react76 from "react";
 import { Ref } from "react";
 
 //#region src/Markdown/components/SearchResultCards/index.d.ts
@@ -14,7 +14,7 @@ interface SearchResultCardsProps extends FlexboxProps {
   dataSource: string[] | SearchResultItem[];
   ref?: Ref<HTMLDivElement>;
 }
-declare const SearchResultCards: react36.NamedExoticComponent<SearchResultCardsProps>;
+declare const SearchResultCards: react76.NamedExoticComponent<SearchResultCardsProps>;
 //#endregion
 export { SearchResultCards, SearchResultCardsProps };
 //# sourceMappingURL=index.d.mts.map

package/es/Markdown/index.d.mts

@@ -1,4 +1,4 @@
-import { MarkdownProps, SyntaxMarkdownProps, TypographyProps } from "./type.mjs";
+import { MarkdownProps, StreamSmoothingPreset, SyntaxMarkdownProps, TypographyProps } from "./type.mjs";
 import { Markdown } from "./Markdown.mjs";
 import { Typography } from "./Typography.mjs";
-export { MarkdownProps, SyntaxMarkdownProps, Typography, TypographyProps, Markdown as default };
+export { MarkdownProps, StreamSmoothingPreset, SyntaxMarkdownProps, Typography, TypographyProps, Markdown as default };

package/es/Markdown/plugins/rehypeStreamAnimated.d.mts

@@ -4,7 +4,9 @@ import { Root } from "hast";
 interface StreamAnimatedOptions {
   baseCharCount?: number;
   charDelay?: number;
+  fadeDuration?: number;
   revealed?: boolean;
+  timelineElapsedMs?: number;
 }
 declare const rehypeStreamAnimated: (options?: StreamAnimatedOptions) => (tree: Root) => void;
 //#endregion

package/es/Markdown/plugins/rehypeStreamAnimated.mjs

@@ -24,7 +24,8 @@ function hasClass(node, cls) {
 	return false;
 }
 const rehypeStreamAnimated = (options = {}) => {
-	const { charDelay = 20, baseCharCount = 0, revealed = false } = options;
+	const { charDelay = 20, fadeDuration = 150, baseCharCount = 0, revealed = false, timelineElapsedMs } = options;
+	const hasTimeline = typeof timelineElapsedMs === "number" && Number.isFinite(timelineElapsedMs);
 	return (tree) => {
 		let globalCharIndex = 0;
 		const shouldSkip = (node) => {
@@ -33,11 +34,22 @@ const rehypeStreamAnimated = (options = {}) => {
 		const wrapText = (node) => {
 			const newChildren = [];
 			for (const child of node.children) if (child.type === "text") for (const char of child.value) {
-				const properties = { className: revealed ? "stream-char stream-char-revealed" : "stream-char" };
-				if (!revealed) {
-					const delay = Math.max(0, globalCharIndex - baseCharCount) * charDelay;
-					if (delay > 0) properties.style = `animation-delay:${delay}ms`;
+				const relativeIndex = globalCharIndex - baseCharCount;
+				let className = "stream-char";
+				let delay;
+				if (revealed) className = "stream-char stream-char-revealed";
+				else if (hasTimeline) {
+					const progress = timelineElapsedMs - globalCharIndex * charDelay;
+					if (progress >= fadeDuration) className = "stream-char stream-char-revealed";
+					else delay = -progress;
+				} else if (relativeIndex >= 0) delay = relativeIndex * charDelay;
+				else {
+					const elapsed = -relativeIndex * charDelay;
+					if (elapsed >= fadeDuration) className = "stream-char stream-char-revealed";
+					else delay = -elapsed;
 				}
+				const properties = { className };
+				if (delay !== void 0 && delay !== 0) properties.style = `animation-delay:${delay}ms`;
 				newChildren.push({
 					children: [{
 						type: "text",