@incremark/react 0.3.0 → 0.3.2

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/hooks/useIncremark.ts
-import { useState as useState3, useCallback as useCallback3, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { useState as useState3, useCallback as useCallback3, useMemo as useMemo2, useRef as useRef2, useEffect as useEffect2 } from "react";
 import {
   createIncremarkParser
 } from "@incremark/core";
@@ -102,13 +102,21 @@ function useProvideDefinitions() {
 import { useState as useState2, useCallback as useCallback2, useMemo, useRef, useEffect } from "react";
 import {
   createBlockTransformer,
-  defaultPlugins
+  defaultPlugins,
+  mathPlugin,
+  collectFootnoteReferences
 } from "@incremark/core";
 
 // src/utils/cursor.ts
 function addCursorToNode(node, cursor) {
+  if (node.type === "code") {
+    return node;
+  }
   const cloned = JSON.parse(JSON.stringify(node));
   function addToLast(n) {
+    if (n.type === "code") {
+      return false;
+    }
     if (n.children && n.children.length > 0) {
       for (let i = n.children.length - 1; i >= 0; i--) {
         if (addToLast(n.children[i])) {
@@ -154,14 +162,12 @@ function useTypewriter(options) {
       tickInterval: twOptions.tickInterval ?? 30,
       effect: twOptions.effect ?? "none",
       pauseOnHidden: twOptions.pauseOnHidden ?? true,
-      plugins: twOptions.plugins ?? defaultPlugins,
+      // 默认插件 + 数学公式插件（数学公式应该整体显示，不参与打字机逐字符效果）
+      plugins: twOptions.plugins ?? [...defaultPlugins, mathPlugin],
       onChange: (blocks2) => {
         setDisplayBlocks(blocks2);
         setIsTypewriterProcessing(transformerRef.current?.isProcessing() ?? false);
         setIsTypewriterPaused(transformerRef.current?.isPausedState() ?? false);
-        if (transformerRef.current?.isProcessing()) {
-          setIsAnimationComplete(false);
-        }
       },
       onAllComplete: () => {
         setIsAnimationComplete(true);
@@ -170,24 +176,23 @@ function useTypewriter(options) {
   }
   const transformer = transformerRef.current;
   const sourceBlocks = useMemo(
-    () => completedBlocks.map((block) => ({
-      id: block.id,
-      node: block.node,
-      status: block.status
-    })),
-    [completedBlocks]
+    () => [
+      ...completedBlocks.map((block) => ({
+        id: block.id,
+        node: block.node,
+        status: block.status
+      })),
+      ...pendingBlocks.map((block) => ({
+        id: block.id,
+        node: block.node,
+        status: block.status
+      }))
+    ],
+    [completedBlocks, pendingBlocks]
   );
   useEffect(() => {
     if (!transformer) return;
     transformer.push(sourceBlocks);
-    const displayBlocks2 = transformer.getDisplayBlocks();
-    const currentDisplaying = displayBlocks2.find((b) => !b.isDisplayComplete);
-    if (currentDisplaying) {
-      const updated = sourceBlocks.find((b) => b.id === currentDisplaying.id);
-      if (updated) {
-        transformer.update(updated);
-      }
-    }
     setIsTypewriterProcessing(transformer.isProcessing());
     setIsTypewriterPaused(transformer.isPausedState());
   }, [sourceBlocks, transformer]);
@@ -223,6 +228,37 @@ function useTypewriter(options) {
       return block;
     });
   }, [completedBlocks, pendingBlocks, typewriterEnabled, typewriterEffect, displayBlocks]);
+  const displayedFootnoteReferenceOrder = useMemo(() => {
+    if (!typewriterEnabled || !transformer) {
+      const references2 = [];
+      const seen2 = /* @__PURE__ */ new Set();
+      for (const block of [...completedBlocks, ...pendingBlocks]) {
+        const blockRefs = collectFootnoteReferences(block.node);
+        for (const ref of blockRefs) {
+          if (!seen2.has(ref)) {
+            seen2.add(ref);
+            references2.push(ref);
+          }
+        }
+      }
+      return references2;
+    }
+    if (!isAnimationComplete) {
+      return [];
+    }
+    const references = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const db of displayBlocks) {
+      const blockRefs = collectFootnoteReferences(db.displayNode);
+      for (const ref of blockRefs) {
+        if (!seen.has(ref)) {
+          seen.add(ref);
+          references.push(ref);
+        }
+      }
+    }
+    return references;
+  }, [typewriterEnabled, transformer, isAnimationComplete, completedBlocks, pendingBlocks, displayBlocks]);
   const skip = useCallback2(() => {
     transformer?.skip();
     setIsTypewriterProcessing(false);
@@ -280,7 +316,8 @@ function useTypewriter(options) {
     blocks,
     typewriter: typewriterControls,
     transformer,
-    isAnimationComplete
+    isAnimationComplete,
+    displayedFootnoteReferenceOrder
   };
 }
 
@@ -315,14 +352,26 @@ function useIncremark(options = {}) {
   const [pendingBlocks, setPendingBlocks] = useState3([]);
   const [isLoading, setIsLoading] = useState3(false);
   const [isFinalized, setIsFinalized] = useState3(false);
+  const [ast, setAst] = useState3({
+    type: "root",
+    children: []
+  });
   const handleUpdate = useCallback3(
     (update, isFinalize) => {
       setMarkdown(parser.getBuffer());
+      if (update.updated.length > 0) {
+        const idsToRemove = new Set(update.updated.map((b) => b.id));
+        setCompletedBlocks((prev) => prev.filter((b) => !idsToRemove.has(b.id)));
+      }
       if (update.completed.length > 0) {
         setCompletedBlocks((prev) => [...prev, ...update.completed]);
       }
       setPendingBlocks(update.pending);
       if (isFinalize) {
+        if (update.pending.length > 0) {
+          setCompletedBlocks((prev) => [...prev, ...update.pending]);
+          setPendingBlocks([]);
+        }
         setIsLoading(false);
         setIsFinalized(true);
       } else {
@@ -332,7 +381,7 @@ function useIncremark(options = {}) {
     },
     [parser, setFootnoteReferenceOrder]
   );
-  const { blocks, typewriter, transformer, isAnimationComplete } = useTypewriter({
+  const { blocks, typewriter, transformer, isAnimationComplete, displayedFootnoteReferenceOrder } = useTypewriter({
     typewriter: options.typewriter,
     completedBlocks,
     pendingBlocks
@@ -343,16 +392,10 @@ function useIncremark(options = {}) {
     }
     return isFinalized && isAnimationComplete;
   }, [options.typewriter, typewriter.enabled, isFinalized, isAnimationComplete]);
-  const ast = useMemo2(
-    () => ({
-      type: "root",
-      children: [...completedBlocks.map((b) => b.node), ...pendingBlocks.map((b) => b.node)]
-    }),
-    [completedBlocks, pendingBlocks]
-  );
   const append = useCallback3(
     (chunk) => {
       const update = parser.append(chunk);
+      setAst(update.ast);
       handleUpdate(update, false);
       return update;
     },
@@ -374,6 +417,7 @@ function useIncremark(options = {}) {
     setIsLoading(false);
     setIsFinalized(false);
     setFootnoteReferenceOrder([]);
+    setAst({ type: "root", children: [] });
     transformer?.reset();
   }, [parser, transformer, setFootnoteReferenceOrder]);
   const render = useCallback3(
@@ -389,6 +433,26 @@ function useIncremark(options = {}) {
     },
     [parser, setFootnoteReferenceOrder]
   );
+  const updateOptions = useCallback3(
+    (newOptions) => {
+      parser.updateOptions(newOptions);
+      setCompletedBlocks([]);
+      setPendingBlocks([]);
+      setMarkdown("");
+      setIsLoading(false);
+      setIsFinalized(false);
+      setFootnoteReferenceOrder([]);
+      setAst({ type: "root", children: [] });
+      transformer?.reset();
+    },
+    [parser, transformer, setFootnoteReferenceOrder]
+  );
+  useEffect2(
+    () => {
+      setFootnoteReferenceOrder(displayedFootnoteReferenceOrder);
+    },
+    [displayedFootnoteReferenceOrder, setFootnoteReferenceOrder]
+  );
   return {
     /** 已收集的完整 Markdown 字符串 */
     markdown,
@@ -421,6 +485,8 @@ function useIncremark(options = {}) {
     reset,
     /** 一次性渲染（reset + append + finalize） */
     render,
+    /** 更新解析器配置（动态更新，不需要重建实例） */
+    updateOptions,
     /** 解析器实例 */
     parser,
     /** 打字机控制 */
@@ -431,12 +497,12 @@ function useIncremark(options = {}) {
 }
 
 // src/hooks/useDevTools.ts
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 import { createDevTools } from "@incremark/devtools";
 function useDevTools(incremark, options = {}) {
   const devtoolsRef = useRef3(null);
   const optionsRef = useRef3(options);
-  useEffect2(() => {
+  useEffect3(() => {
     const devtools = createDevTools(optionsRef.current);
     devtoolsRef.current = devtools;
     incremark.parser.setOnChange((state) => {
@@ -463,7 +529,7 @@ function useDevTools(incremark, options = {}) {
 }
 
 // src/hooks/useBlockTransformer.ts
-import { useState as useState4, useCallback as useCallback4, useRef as useRef4, useEffect as useEffect3 } from "react";
+import { useState as useState4, useCallback as useCallback4, useRef as useRef4, useEffect as useEffect4 } from "react";
 import {
   createBlockTransformer as createBlockTransformer2
 } from "@incremark/core";
@@ -484,7 +550,7 @@ function useBlockTransformer(sourceBlocks, options = {}) {
     });
   }
   const transformer = transformerRef.current;
-  useEffect3(() => {
+  useEffect4(() => {
     transformer.push(sourceBlocks);
     const currentDisplaying = displayBlocks.find((b) => !b.isDisplayComplete);
     if (currentDisplaying) {
@@ -494,7 +560,7 @@ function useBlockTransformer(sourceBlocks, options = {}) {
       }
     }
   }, [sourceBlocks, transformer]);
-  useEffect3(() => {
+  useEffect4(() => {
     return () => {
       transformer.destroy();
     };
@@ -537,45 +603,39 @@ function useBlockTransformer(sourceBlocks, options = {}) {
 }
 
 // src/hooks/useLocale.ts
-import { useContext as useContext2 } from "react";
+import { useContext as useContext2, useMemo as useMemo4 } from "react";
+import { zhCN as zhCN2 } from "@incremark/shared";
 
 // src/components/ConfigProvider.tsx
 import { createContext as createContext2, useMemo as useMemo3 } from "react";
+import { zhCN } from "@incremark/shared";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var LocaleContext = createContext2(null);
-function ConfigProvider({ children, locale = enShared }) {
-  const contextValue = useMemo3(() => ({ locale }), [locale]);
+function ConfigProvider({ children, locale }) {
+  const contextValue = useMemo3(() => ({ locale: locale || zhCN }), [locale]);
   return /* @__PURE__ */ jsx2(LocaleContext.Provider, { value: contextValue, children });
 }
 
 // src/hooks/useLocale.ts
 function useLocale() {
   const context = useContext2(LocaleContext);
-  if (!context) {
-    const t2 = (key) => {
+  const { locale } = context || { locale: zhCN2 };
+  const t = useMemo4(
+    () => (key) => {
       const keys = key.split(".");
-      let value = enShared;
+      let value = locale;
       for (const k of keys) {
         value = value?.[k];
       }
       return value || key;
-    };
-    return { t: t2 };
-  }
-  const { locale } = context;
-  const t = (key) => {
-    const keys = key.split(".");
-    let value = locale;
-    for (const k of keys) {
-      value = value?.[k];
-    }
-    return value || key;
-  };
+    },
+    [locale]
+  );
   return { t };
 }
 
 // src/components/IncremarkInline.tsx
-import React3 from "react";
+import React4 from "react";
 import {
   hasChunks,
   getStableText,
@@ -734,8 +794,73 @@ var IncremarkHtmlElement = ({ node }) => {
   return /* @__PURE__ */ jsx3(Tag, { ...reactProps, className: `incremark-html-element incremark-${tagName} ${reactProps.className || ""}`, children: renderChildren(children) });
 };
 
+// src/components/IncremarkMath.tsx
+import { useState as useState5, useEffect as useEffect5, useRef as useRef5, useCallback as useCallback5 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var IncremarkMath = ({
+  node,
+  renderDelay = 300
+}) => {
+  const [renderedHtml, setRenderedHtml] = useState5("");
+  const [isLoading, setIsLoading] = useState5(false);
+  const katexRef = useRef5(null);
+  const renderTimerRef = useRef5(null);
+  const isInline = node.type === "inlineMath";
+  const formula = node.value;
+  const doRender = useCallback5(async () => {
+    if (!formula) return;
+    try {
+      if (!katexRef.current) {
+        const katexModule = await import("katex");
+        katexRef.current = katexModule.default;
+      }
+      const katex = katexRef.current;
+      const html = katex.renderToString(formula, {
+        displayMode: !isInline,
+        throwOnError: false,
+        strict: false
+      });
+      setRenderedHtml(html);
+    } catch {
+      setRenderedHtml("");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [formula, isInline]);
+  const scheduleRender = useCallback5(() => {
+    if (!formula) {
+      setRenderedHtml("");
+      return;
+    }
+    if (renderTimerRef.current) {
+      clearTimeout(renderTimerRef.current);
+    }
+    setIsLoading(true);
+    renderTimerRef.current = setTimeout(() => {
+      doRender();
+    }, renderDelay);
+  }, [formula, renderDelay, doRender]);
+  useEffect5(() => {
+    scheduleRender();
+  }, [scheduleRender]);
+  useEffect5(() => {
+    return () => {
+      if (renderTimerRef.current) {
+        clearTimeout(renderTimerRef.current);
+      }
+    };
+  }, []);
+  if (isInline) {
+    return /* @__PURE__ */ jsx4("span", { className: "incremark-math-inline", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx4("span", { dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx4("code", { className: "math-source", children: formula }) });
+  }
+  return /* @__PURE__ */ jsx4("div", { className: "incremark-math-block", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx4("div", { className: "math-rendered", dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx4("pre", { className: "math-source-block", children: /* @__PURE__ */ jsx4("code", { children: formula }) }) });
+};
+
 // src/components/IncremarkInline.tsx
-import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
+function isInlineMath(node) {
+  return node.type === "inlineMath";
+}
 function isHtmlElementNode(node) {
   return node.type === "htmlElement";
 }
@@ -748,22 +873,25 @@ function isLinkReference(node) {
 var IncremarkInline = ({ nodes }) => {
   if (!nodes || nodes.length === 0) return null;
   const { definitions, footnoteDefinitions } = useDefinitions();
-  return /* @__PURE__ */ jsx4(Fragment, { children: nodes.map((node, i) => {
+  return /* @__PURE__ */ jsx5(Fragment, { children: nodes.map((node, i) => {
     if (node.type === "text") {
       const textNode = node;
       if (hasChunks(node) && textNode.chunks && textNode.chunks.length > 0) {
-        return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
           getStableText(textNode),
-          textNode.chunks.map((chunk) => /* @__PURE__ */ jsx4("span", { "data-chunk-key": chunk.createdAt, className: "incremark-fade-in", children: chunk.text }, chunk.createdAt))
+          textNode.chunks.map((chunk) => /* @__PURE__ */ jsx5("span", { "data-chunk-key": chunk.createdAt, className: "incremark-fade-in", children: chunk.text }, chunk.createdAt))
         ] }, i);
       }
-      return /* @__PURE__ */ jsx4(React3.Fragment, { children: node.value }, i);
+      return /* @__PURE__ */ jsx5(React4.Fragment, { children: node.value }, i);
+    }
+    if (isInlineMath(node)) {
+      return /* @__PURE__ */ jsx5(IncremarkMath, { node }, i);
     }
     if (isHtmlElementNode(node)) {
-      return /* @__PURE__ */ jsx4(IncremarkHtmlElement, { node }, i);
+      return /* @__PURE__ */ jsx5(IncremarkHtmlElement, { node }, i);
     }
     if (isHtmlNode(node)) {
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         "span",
         {
           className: "incremark-inline-html",
@@ -773,20 +901,20 @@ var IncremarkInline = ({ nodes }) => {
       );
     }
     if (node.type === "strong") {
-      return /* @__PURE__ */ jsx4("strong", { children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("strong", { children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "emphasis") {
-      return /* @__PURE__ */ jsx4("em", { children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("em", { children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "inlineCode") {
-      return /* @__PURE__ */ jsx4("code", { className: "incremark-inline-code", children: node.value }, i);
+      return /* @__PURE__ */ jsx5("code", { className: "incremark-inline-code", children: node.value }, i);
     }
     if (node.type === "link") {
-      return /* @__PURE__ */ jsx4("a", { href: node.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("a", { href: node.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "image") {
       const imageNode = node;
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         "img",
         {
           src: imageNode.url,
@@ -800,7 +928,7 @@ var IncremarkInline = ({ nodes }) => {
     if (isImageReference(node)) {
       const definition = definitions[node.identifier];
       if (definition) {
-        return /* @__PURE__ */ jsx4(
+        return /* @__PURE__ */ jsx5(
           "img",
           {
             src: definition.url,
@@ -822,14 +950,14 @@ var IncremarkInline = ({ nodes }) => {
     if (isLinkReference(node)) {
       const definition = definitions[node.identifier];
       if (definition) {
-        return /* @__PURE__ */ jsx4(
+        return /* @__PURE__ */ jsx5(
           "a",
           {
             href: definition.url,
             title: definition.title || void 0,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children })
+            children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children })
           },
           i
         );
@@ -845,47 +973,47 @@ var IncremarkInline = ({ nodes }) => {
     if (node.type === "footnoteReference") {
       const footnoteRef = node;
       const hasDefinition = footnoteDefinitions[footnoteRef.identifier];
-      return /* @__PURE__ */ jsx4("sup", { className: "incremark-footnote-ref", children: /* @__PURE__ */ jsx4("a", { href: `#fn-${footnoteRef.identifier}`, id: `fnref-${footnoteRef.identifier}`, children: hasDefinition ? `[${footnoteRef.identifier}]` : `[^${footnoteRef.identifier}]` }) }, i);
+      return /* @__PURE__ */ jsx5("sup", { className: "incremark-footnote-ref", children: /* @__PURE__ */ jsx5("a", { href: `#fn-${footnoteRef.identifier}`, id: `fnref-${footnoteRef.identifier}`, children: hasDefinition ? `[${footnoteRef.identifier}]` : `[^${footnoteRef.identifier}]` }) }, i);
     }
     if (node.type === "break") {
-      return /* @__PURE__ */ jsx4("br", {}, i);
+      return /* @__PURE__ */ jsx5("br", {}, i);
     }
     if (node.type === "delete") {
-      return /* @__PURE__ */ jsx4("del", { children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("del", { children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
-    return /* @__PURE__ */ jsx4("span", { children: node.value || "" }, i);
+    return /* @__PURE__ */ jsx5("span", { children: node.value || "" }, i);
   }) });
 };
 
 // src/components/IncremarkHeading.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var IncremarkHeading = ({ node }) => {
   const Tag = `h${node.depth}`;
-  return /* @__PURE__ */ jsx5(Tag, { className: `incremark-heading h${node.depth}`, children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) });
+  return /* @__PURE__ */ jsx6(Tag, { className: `incremark-heading h${node.depth}`, children: /* @__PURE__ */ jsx6(IncremarkInline, { nodes: node.children }) });
 };
 
 // src/components/IncremarkParagraph.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var IncremarkParagraph = ({ node }) => {
-  return /* @__PURE__ */ jsx6("p", { className: "incremark-paragraph", children: /* @__PURE__ */ jsx6(IncremarkInline, { nodes: node.children }) });
+  return /* @__PURE__ */ jsx7("p", { className: "incremark-paragraph", children: /* @__PURE__ */ jsx7(IncremarkInline, { nodes: node.children }) });
 };
 
 // src/components/IncremarkCode.tsx
-import React7 from "react";
+import React9 from "react";
 
 // src/components/IncremarkCodeMermaid.tsx
-import { useState as useState5, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
+import { useState as useState6, useEffect as useEffect6, useRef as useRef6, useCallback as useCallback6 } from "react";
 import { GravityMermaid, LucideCode, LucideEye, LucideCopy, LucideCopyCheck } from "@incremark/icons";
 import { isClipboardAvailable } from "@incremark/shared";
 
 // src/components/SvgIcon.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var SvgIcon = ({
   svg,
   sizeClass,
   className
 }) => {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       className: `incremark-icon ${sizeClass || ""} ${className || ""}`.trim(),
@@ -896,24 +1024,24 @@ var SvgIcon = ({
 };
 
 // src/components/IncremarkCodeMermaid.tsx
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var IncremarkCodeMermaid = ({
   node,
   mermaidDelay = 500
 }) => {
-  const [copied, setCopied] = useState5(false);
+  const [copied, setCopied] = useState6(false);
   const { t } = useLocale();
-  const [mermaidSvg, setMermaidSvg] = useState5("");
-  const [mermaidLoading, setMermaidLoading] = useState5(false);
-  const [mermaidViewMode, setMermaidViewMode] = useState5("preview");
-  const mermaidRef = useRef5(null);
-  const mermaidTimerRef = useRef5(null);
-  const copyTimeoutRef = useRef5(null);
+  const [mermaidSvg, setMermaidSvg] = useState6("");
+  const [mermaidLoading, setMermaidLoading] = useState6(false);
+  const [mermaidViewMode, setMermaidViewMode] = useState6("preview");
+  const mermaidRef = useRef6(null);
+  const mermaidTimerRef = useRef6(null);
+  const copyTimeoutRef = useRef6(null);
   const code = node.value;
-  const toggleMermaidView = useCallback5(() => {
+  const toggleMermaidView = useCallback6(() => {
     setMermaidViewMode((prev) => prev === "preview" ? "source" : "preview");
   }, []);
-  const copyCode = useCallback5(async () => {
+  const copyCode = useCallback6(async () => {
     if (!isClipboardAvailable()) return;
     try {
       await navigator.clipboard.writeText(code);
@@ -925,7 +1053,7 @@ var IncremarkCodeMermaid = ({
     } catch {
     }
   }, [code]);
-  const doRenderMermaid = useCallback5(async () => {
+  const doRenderMermaid = useCallback6(async () => {
     if (!code) return;
     try {
       if (!mermaidRef.current) {
@@ -948,7 +1076,7 @@ var IncremarkCodeMermaid = ({
       setMermaidLoading(false);
     }
   }, [code]);
-  const scheduleRenderMermaid = useCallback5(() => {
+  const scheduleRenderMermaid = useCallback6(() => {
     if (!code) return;
     if (mermaidTimerRef.current) {
       clearTimeout(mermaidTimerRef.current);
@@ -958,10 +1086,10 @@ var IncremarkCodeMermaid = ({
       doRenderMermaid();
     }, mermaidDelay);
   }, [code, mermaidDelay, doRenderMermaid]);
-  useEffect4(() => {
+  useEffect6(() => {
     scheduleRenderMermaid();
   }, [scheduleRenderMermaid]);
-  useEffect4(() => {
+  useEffect6(() => {
     return () => {
       if (mermaidTimerRef.current) {
         clearTimeout(mermaidTimerRef.current);
@@ -974,11 +1102,11 @@ var IncremarkCodeMermaid = ({
   return /* @__PURE__ */ jsxs2("div", { className: "incremark-mermaid", children: [
     /* @__PURE__ */ jsxs2("div", { className: "mermaid-header", children: [
       /* @__PURE__ */ jsxs2("span", { className: "language", children: [
-        /* @__PURE__ */ jsx8(SvgIcon, { svg: GravityMermaid, className: "language-icon" }),
+        /* @__PURE__ */ jsx9(SvgIcon, { svg: GravityMermaid, className: "language-icon" }),
         "MERMAID"
       ] }),
       /* @__PURE__ */ jsxs2("div", { className: "mermaid-actions", children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "button",
           {
             className: "code-btn",
@@ -987,10 +1115,10 @@ var IncremarkCodeMermaid = ({
             disabled: !mermaidSvg,
             "aria-label": mermaidViewMode === "preview" ? t("mermaid.viewSource") : t("mermaid.preview"),
             title: mermaidViewMode === "preview" ? "View Source" : "Preview",
-            children: /* @__PURE__ */ jsx8(SvgIcon, { svg: mermaidViewMode === "preview" ? LucideCode : LucideEye })
+            children: /* @__PURE__ */ jsx9(SvgIcon, { svg: mermaidViewMode === "preview" ? LucideCode : LucideEye })
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "button",
           {
             className: "code-btn",
@@ -998,22 +1126,22 @@ var IncremarkCodeMermaid = ({
             type: "button",
             "aria-label": copied ? t("mermaid.copied") : t("mermaid.copy"),
             title: copied ? "Copied!" : "Copy",
-            children: /* @__PURE__ */ jsx8(SvgIcon, { svg: copied ? LucideCopyCheck : LucideCopy })
+            children: /* @__PURE__ */ jsx9(SvgIcon, { svg: copied ? LucideCopyCheck : LucideCopy })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "mermaid-content", children: mermaidLoading && !mermaidSvg ? /* @__PURE__ */ jsx8("div", { className: "mermaid-loading", children: /* @__PURE__ */ jsx8("pre", { className: "mermaid-source-code", children: code }) }) : mermaidViewMode === "source" ? /* @__PURE__ */ jsx8("pre", { className: "mermaid-source-code", children: code }) : mermaidSvg ? /* @__PURE__ */ jsx8("div", { className: "mermaid-svg", dangerouslySetInnerHTML: { __html: mermaidSvg } }) : /* @__PURE__ */ jsx8("pre", { className: "mermaid-source-code", children: code }) })
+    /* @__PURE__ */ jsx9("div", { className: "mermaid-content", children: mermaidLoading && !mermaidSvg ? /* @__PURE__ */ jsx9("div", { className: "mermaid-loading", children: /* @__PURE__ */ jsx9("pre", { className: "mermaid-source-code", children: code }) }) : mermaidViewMode === "source" ? /* @__PURE__ */ jsx9("pre", { className: "mermaid-source-code", children: code }) : mermaidSvg ? /* @__PURE__ */ jsx9("div", { className: "mermaid-svg", dangerouslySetInnerHTML: { __html: mermaidSvg } }) : /* @__PURE__ */ jsx9("pre", { className: "mermaid-source-code", children: code }) })
   ] });
 };
 
 // src/components/IncremarkCodeDefault.tsx
-import { useState as useState6, useEffect as useEffect5, useCallback as useCallback6, useRef as useRef6 } from "react";
+import { useState as useState8, useEffect as useEffect8, useCallback as useCallback7, useRef as useRef8, useMemo as useMemo5 } from "react";
 import { LucideCopy as LucideCopy2, LucideCopyCheck as LucideCopyCheck2 } from "@incremark/icons";
 import { isClipboardAvailable as isClipboardAvailable2 } from "@incremark/shared";
 
 // src/hooks/useShiki.ts
-import React5 from "react";
+import React6 from "react";
 var ShikiManager = class _ShikiManager {
   static instance = null;
   /** 存储 highlighter 实例，key 为主题名称 */
@@ -1113,15 +1241,30 @@ function getShikiManager() {
   return shikiManagerInstance;
 }
 function useShiki(theme) {
-  const [isHighlighting, setIsHighlighting] = React5.useState(false);
-  const highlighterInfoRef = React5.useRef(null);
-  const getHighlighter = React5.useCallback(async () => {
-    if (!highlighterInfoRef.current) {
-      highlighterInfoRef.current = await getShikiManager().getHighlighter(theme);
+  const [isHighlighting, setIsHighlighting] = React6.useState(false);
+  const [isReady, setIsReady] = React6.useState(false);
+  const [highlighterInfo, setHighlighterInfo] = React6.useState(null);
+  const initHighlighter = React6.useCallback(async () => {
+    if (isReady) return;
+    try {
+      const info = await getShikiManager().getHighlighter(theme);
+      setHighlighterInfo(info);
+      setIsReady(true);
+    } catch (e) {
+      console.warn("Failed to initialize Shiki highlighter:", e);
+      throw e;
     }
-    return highlighterInfoRef.current;
-  }, [theme]);
-  const highlight = React5.useCallback(async (code, lang, fallbackTheme) => {
+  }, [theme, isReady]);
+  const getHighlighter = React6.useCallback(async () => {
+    if (!highlighterInfo) {
+      const info = await getShikiManager().getHighlighter(theme);
+      setHighlighterInfo(info);
+      setIsReady(true);
+      return info;
+    }
+    return highlighterInfo;
+  }, [theme, highlighterInfo]);
+  const highlight = React6.useCallback(async (code, lang, fallbackTheme) => {
     setIsHighlighting(true);
     try {
       const info = await getHighlighter();
@@ -1140,27 +1283,788 @@ function useShiki(theme) {
     }
   }, [getHighlighter, theme]);
   return {
+    highlighterInfo,
     isHighlighting,
+    isReady,
+    initHighlighter,
     highlight
   };
 }
 
+// src/components/CachedCodeRenderer.tsx
+import { objectId } from "@antfu/utils";
+
+// ../../node_modules/.pnpm/@shikijs+vscode-textmate@10.0.2/node_modules/@shikijs/vscode-textmate/dist/index.js
+function escapeRegExpCharacters(value) {
+  return value.replace(/[\-\\\{\}\*\+\?\|\^\$\.\,\[\]\(\)\#\s]/g, "\\$&");
+}
+var CachedFn = class {
+  constructor(fn) {
+    this.fn = fn;
+  }
+  cache = /* @__PURE__ */ new Map();
+  get(key) {
+    if (this.cache.has(key)) {
+      return this.cache.get(key);
+    }
+    const value = this.fn(key);
+    this.cache.set(key, value);
+    return value;
+  }
+};
+var ScopeStack = class _ScopeStack {
+  constructor(parent, scopeName) {
+    this.parent = parent;
+    this.scopeName = scopeName;
+  }
+  static push(path, scopeNames) {
+    for (const name of scopeNames) {
+      path = new _ScopeStack(path, name);
+    }
+    return path;
+  }
+  static from(...segments) {
+    let result = null;
+    for (let i = 0; i < segments.length; i++) {
+      result = new _ScopeStack(result, segments[i]);
+    }
+    return result;
+  }
+  push(scopeName) {
+    return new _ScopeStack(this, scopeName);
+  }
+  getSegments() {
+    let item = this;
+    const result = [];
+    while (item) {
+      result.push(item.scopeName);
+      item = item.parent;
+    }
+    result.reverse();
+    return result;
+  }
+  toString() {
+    return this.getSegments().join(" ");
+  }
+  extends(other) {
+    if (this === other) {
+      return true;
+    }
+    if (this.parent === null) {
+      return false;
+    }
+    return this.parent.extends(other);
+  }
+  getExtensionIfDefined(base) {
+    const result = [];
+    let item = this;
+    while (item && item !== base) {
+      result.push(item.scopeName);
+      item = item.parent;
+    }
+    return item === base ? result.reverse() : void 0;
+  }
+};
+var FontStyle = /* @__PURE__ */ ((FontStyle2) => {
+  FontStyle2[FontStyle2["NotSet"] = -1] = "NotSet";
+  FontStyle2[FontStyle2["None"] = 0] = "None";
+  FontStyle2[FontStyle2["Italic"] = 1] = "Italic";
+  FontStyle2[FontStyle2["Bold"] = 2] = "Bold";
+  FontStyle2[FontStyle2["Underline"] = 4] = "Underline";
+  FontStyle2[FontStyle2["Strikethrough"] = 8] = "Strikethrough";
+  return FontStyle2;
+})(FontStyle || {});
+var emptyParentScopes = Object.freeze([]);
+var EncodedTokenMetadata = class _EncodedTokenMetadata {
+  static toBinaryStr(encodedTokenAttributes) {
+    return encodedTokenAttributes.toString(2).padStart(32, "0");
+  }
+  static print(encodedTokenAttributes) {
+    const languageId = _EncodedTokenMetadata.getLanguageId(encodedTokenAttributes);
+    const tokenType = _EncodedTokenMetadata.getTokenType(encodedTokenAttributes);
+    const fontStyle = _EncodedTokenMetadata.getFontStyle(encodedTokenAttributes);
+    const foreground = _EncodedTokenMetadata.getForeground(encodedTokenAttributes);
+    const background = _EncodedTokenMetadata.getBackground(encodedTokenAttributes);
+    console.log({
+      languageId,
+      tokenType,
+      fontStyle,
+      foreground,
+      background
+    });
+  }
+  static getLanguageId(encodedTokenAttributes) {
+    return (encodedTokenAttributes & 255) >>> 0;
+  }
+  static getTokenType(encodedTokenAttributes) {
+    return (encodedTokenAttributes & 768) >>> 8;
+  }
+  static containsBalancedBrackets(encodedTokenAttributes) {
+    return (encodedTokenAttributes & 1024) !== 0;
+  }
+  static getFontStyle(encodedTokenAttributes) {
+    return (encodedTokenAttributes & 30720) >>> 11;
+  }
+  static getForeground(encodedTokenAttributes) {
+    return (encodedTokenAttributes & 16744448) >>> 15;
+  }
+  static getBackground(encodedTokenAttributes) {
+    return (encodedTokenAttributes & 4278190080) >>> 24;
+  }
+  /**
+   * Updates the fields in `metadata`.
+   * A value of `0`, `NotSet` or `null` indicates that the corresponding field should be left as is.
+   */
+  static set(encodedTokenAttributes, languageId, tokenType, containsBalancedBrackets, fontStyle, foreground, background) {
+    let _languageId = _EncodedTokenMetadata.getLanguageId(encodedTokenAttributes);
+    let _tokenType = _EncodedTokenMetadata.getTokenType(encodedTokenAttributes);
+    let _containsBalancedBracketsBit = _EncodedTokenMetadata.containsBalancedBrackets(encodedTokenAttributes) ? 1 : 0;
+    let _fontStyle = _EncodedTokenMetadata.getFontStyle(encodedTokenAttributes);
+    let _foreground = _EncodedTokenMetadata.getForeground(encodedTokenAttributes);
+    let _background = _EncodedTokenMetadata.getBackground(encodedTokenAttributes);
+    if (languageId !== 0) {
+      _languageId = languageId;
+    }
+    if (tokenType !== 8) {
+      _tokenType = fromOptionalTokenType(tokenType);
+    }
+    if (containsBalancedBrackets !== null) {
+      _containsBalancedBracketsBit = containsBalancedBrackets ? 1 : 0;
+    }
+    if (fontStyle !== -1) {
+      _fontStyle = fontStyle;
+    }
+    if (foreground !== 0) {
+      _foreground = foreground;
+    }
+    if (background !== 0) {
+      _background = background;
+    }
+    return (_languageId << 0 | _tokenType << 8 | _containsBalancedBracketsBit << 10 | _fontStyle << 11 | _foreground << 15 | _background << 24) >>> 0;
+  }
+};
+function fromOptionalTokenType(standardType) {
+  return standardType;
+}
+function ruleIdFromNumber(id) {
+  return id;
+}
+function ruleIdToNumber(id) {
+  return id;
+}
+var BasicScopeAttributes = class {
+  constructor(languageId, tokenType) {
+    this.languageId = languageId;
+    this.tokenType = tokenType;
+  }
+};
+var BasicScopeAttributesProvider = class _BasicScopeAttributesProvider {
+  _defaultAttributes;
+  _embeddedLanguagesMatcher;
+  constructor(initialLanguageId, embeddedLanguages) {
+    this._defaultAttributes = new BasicScopeAttributes(
+      initialLanguageId,
+      8
+      /* NotSet */
+    );
+    this._embeddedLanguagesMatcher = new ScopeMatcher(Object.entries(embeddedLanguages || {}));
+  }
+  getDefaultAttributes() {
+    return this._defaultAttributes;
+  }
+  getBasicScopeAttributes(scopeName) {
+    if (scopeName === null) {
+      return _BasicScopeAttributesProvider._NULL_SCOPE_METADATA;
+    }
+    return this._getBasicScopeAttributes.get(scopeName);
+  }
+  static _NULL_SCOPE_METADATA = new BasicScopeAttributes(0, 0);
+  _getBasicScopeAttributes = new CachedFn((scopeName) => {
+    const languageId = this._scopeToLanguage(scopeName);
+    const standardTokenType = this._toStandardTokenType(scopeName);
+    return new BasicScopeAttributes(languageId, standardTokenType);
+  });
+  /**
+   * Given a produced TM scope, return the language that token describes or null if unknown.
+   * e.g. source.html => html, source.css.embedded.html => css, punctuation.definition.tag.html => null
+   */
+  _scopeToLanguage(scope) {
+    return this._embeddedLanguagesMatcher.match(scope) || 0;
+  }
+  _toStandardTokenType(scopeName) {
+    const m = scopeName.match(_BasicScopeAttributesProvider.STANDARD_TOKEN_TYPE_REGEXP);
+    if (!m) {
+      return 8;
+    }
+    switch (m[1]) {
+      case "comment":
+        return 1;
+      case "string":
+        return 2;
+      case "regex":
+        return 3;
+      case "meta.embedded":
+        return 0;
+    }
+    throw new Error("Unexpected match for standard token type!");
+  }
+  static STANDARD_TOKEN_TYPE_REGEXP = /\b(comment|string|regex|meta\.embedded)\b/;
+};
+var ScopeMatcher = class {
+  values;
+  scopesRegExp;
+  constructor(values) {
+    if (values.length === 0) {
+      this.values = null;
+      this.scopesRegExp = null;
+    } else {
+      this.values = new Map(values);
+      const escapedScopes = values.map(
+        ([scopeName, value]) => escapeRegExpCharacters(scopeName)
+      );
+      escapedScopes.sort();
+      escapedScopes.reverse();
+      this.scopesRegExp = new RegExp(
+        `^((${escapedScopes.join(")|(")}))($|\\.)`,
+        ""
+      );
+    }
+  }
+  match(scope) {
+    if (!this.scopesRegExp) {
+      return void 0;
+    }
+    const m = scope.match(this.scopesRegExp);
+    if (!m) {
+      return void 0;
+    }
+    return this.values.get(m[1]);
+  }
+};
+var DebugFlags = {
+  InDebugMode: typeof process !== "undefined" && !!process.env["VSCODE_TEXTMATE_DEBUG"]
+};
+var AttributedScopeStack = class _AttributedScopeStack {
+  /**
+   * Invariant:
+   * ```
+   * if (parent && !scopePath.extends(parent.scopePath)) {
+   * 	throw new Error();
+   * }
+   * ```
+   */
+  constructor(parent, scopePath, tokenAttributes) {
+    this.parent = parent;
+    this.scopePath = scopePath;
+    this.tokenAttributes = tokenAttributes;
+  }
+  static fromExtension(namesScopeList, contentNameScopesList) {
+    let current = namesScopeList;
+    let scopeNames = namesScopeList?.scopePath ?? null;
+    for (const frame of contentNameScopesList) {
+      scopeNames = ScopeStack.push(scopeNames, frame.scopeNames);
+      current = new _AttributedScopeStack(current, scopeNames, frame.encodedTokenAttributes);
+    }
+    return current;
+  }
+  static createRoot(scopeName, tokenAttributes) {
+    return new _AttributedScopeStack(null, new ScopeStack(null, scopeName), tokenAttributes);
+  }
+  static createRootAndLookUpScopeName(scopeName, tokenAttributes, grammar) {
+    const rawRootMetadata = grammar.getMetadataForScope(scopeName);
+    const scopePath = new ScopeStack(null, scopeName);
+    const rootStyle = grammar.themeProvider.themeMatch(scopePath);
+    const resolvedTokenAttributes = _AttributedScopeStack.mergeAttributes(
+      tokenAttributes,
+      rawRootMetadata,
+      rootStyle
+    );
+    return new _AttributedScopeStack(null, scopePath, resolvedTokenAttributes);
+  }
+  get scopeName() {
+    return this.scopePath.scopeName;
+  }
+  toString() {
+    return this.getScopeNames().join(" ");
+  }
+  equals(other) {
+    return _AttributedScopeStack.equals(this, other);
+  }
+  static equals(a, b) {
+    do {
+      if (a === b) {
+        return true;
+      }
+      if (!a && !b) {
+        return true;
+      }
+      if (!a || !b) {
+        return false;
+      }
+      if (a.scopeName !== b.scopeName || a.tokenAttributes !== b.tokenAttributes) {
+        return false;
+      }
+      a = a.parent;
+      b = b.parent;
+    } while (true);
+  }
+  static mergeAttributes(existingTokenAttributes, basicScopeAttributes, styleAttributes) {
+    let fontStyle = -1;
+    let foreground = 0;
+    let background = 0;
+    if (styleAttributes !== null) {
+      fontStyle = styleAttributes.fontStyle;
+      foreground = styleAttributes.foregroundId;
+      background = styleAttributes.backgroundId;
+    }
+    return EncodedTokenMetadata.set(
+      existingTokenAttributes,
+      basicScopeAttributes.languageId,
+      basicScopeAttributes.tokenType,
+      null,
+      fontStyle,
+      foreground,
+      background
+    );
+  }
+  pushAttributed(scopePath, grammar) {
+    if (scopePath === null) {
+      return this;
+    }
+    if (scopePath.indexOf(" ") === -1) {
+      return _AttributedScopeStack._pushAttributed(this, scopePath, grammar);
+    }
+    const scopes = scopePath.split(/ /g);
+    let result = this;
+    for (const scope of scopes) {
+      result = _AttributedScopeStack._pushAttributed(result, scope, grammar);
+    }
+    return result;
+  }
+  static _pushAttributed(target, scopeName, grammar) {
+    const rawMetadata = grammar.getMetadataForScope(scopeName);
+    const newPath = target.scopePath.push(scopeName);
+    const scopeThemeMatchResult = grammar.themeProvider.themeMatch(newPath);
+    const metadata = _AttributedScopeStack.mergeAttributes(
+      target.tokenAttributes,
+      rawMetadata,
+      scopeThemeMatchResult
+    );
+    return new _AttributedScopeStack(target, newPath, metadata);
+  }
+  getScopeNames() {
+    return this.scopePath.getSegments();
+  }
+  getExtensionIfDefined(base) {
+    const result = [];
+    let self = this;
+    while (self && self !== base) {
+      result.push({
+        encodedTokenAttributes: self.tokenAttributes,
+        scopeNames: self.scopePath.getExtensionIfDefined(self.parent?.scopePath ?? null)
+      });
+      self = self.parent;
+    }
+    return self === base ? result.reverse() : void 0;
+  }
+};
+var StateStackImpl = class _StateStackImpl {
+  /**
+   * Invariant:
+   * ```
+   * if (contentNameScopesList !== nameScopesList && contentNameScopesList?.parent !== nameScopesList) {
+   * 	throw new Error();
+   * }
+   * if (this.parent && !nameScopesList.extends(this.parent.contentNameScopesList)) {
+   * 	throw new Error();
+   * }
+   * ```
+   */
+  constructor(parent, ruleId, enterPos, anchorPos, beginRuleCapturedEOL, endRule, nameScopesList, contentNameScopesList) {
+    this.parent = parent;
+    this.ruleId = ruleId;
+    this.beginRuleCapturedEOL = beginRuleCapturedEOL;
+    this.endRule = endRule;
+    this.nameScopesList = nameScopesList;
+    this.contentNameScopesList = contentNameScopesList;
+    this.depth = this.parent ? this.parent.depth + 1 : 1;
+    this._enterPos = enterPos;
+    this._anchorPos = anchorPos;
+  }
+  _stackElementBrand = void 0;
+  // TODO remove me
+  static NULL = new _StateStackImpl(
+    null,
+    0,
+    0,
+    0,
+    false,
+    null,
+    null,
+    null
+  );
+  /**
+   * The position on the current line where this state was pushed.
+   * This is relevant only while tokenizing a line, to detect endless loops.
+   * Its value is meaningless across lines.
+   */
+  _enterPos;
+  /**
+   * The captured anchor position when this stack element was pushed.
+   * This is relevant only while tokenizing a line, to restore the anchor position when popping.
+   * Its value is meaningless across lines.
+   */
+  _anchorPos;
+  /**
+   * The depth of the stack.
+   */
+  depth;
+  equals(other) {
+    if (other === null) {
+      return false;
+    }
+    return _StateStackImpl._equals(this, other);
+  }
+  static _equals(a, b) {
+    if (a === b) {
+      return true;
+    }
+    if (!this._structuralEquals(a, b)) {
+      return false;
+    }
+    return AttributedScopeStack.equals(a.contentNameScopesList, b.contentNameScopesList);
+  }
+  /**
+   * A structural equals check. Does not take into account `scopes`.
+   */
+  static _structuralEquals(a, b) {
+    do {
+      if (a === b) {
+        return true;
+      }
+      if (!a && !b) {
+        return true;
+      }
+      if (!a || !b) {
+        return false;
+      }
+      if (a.depth !== b.depth || a.ruleId !== b.ruleId || a.endRule !== b.endRule) {
+        return false;
+      }
+      a = a.parent;
+      b = b.parent;
+    } while (true);
+  }
+  clone() {
+    return this;
+  }
+  static _reset(el) {
+    while (el) {
+      el._enterPos = -1;
+      el._anchorPos = -1;
+      el = el.parent;
+    }
+  }
+  reset() {
+    _StateStackImpl._reset(this);
+  }
+  pop() {
+    return this.parent;
+  }
+  safePop() {
+    if (this.parent) {
+      return this.parent;
+    }
+    return this;
+  }
+  push(ruleId, enterPos, anchorPos, beginRuleCapturedEOL, endRule, nameScopesList, contentNameScopesList) {
+    return new _StateStackImpl(
+      this,
+      ruleId,
+      enterPos,
+      anchorPos,
+      beginRuleCapturedEOL,
+      endRule,
+      nameScopesList,
+      contentNameScopesList
+    );
+  }
+  getEnterPos() {
+    return this._enterPos;
+  }
+  getAnchorPos() {
+    return this._anchorPos;
+  }
+  getRule(grammar) {
+    return grammar.getRule(this.ruleId);
+  }
+  toString() {
+    const r = [];
+    this._writeString(r, 0);
+    return "[" + r.join(",") + "]";
+  }
+  _writeString(res, outIndex) {
+    if (this.parent) {
+      outIndex = this.parent._writeString(res, outIndex);
+    }
+    res[outIndex++] = `(${this.ruleId}, ${this.nameScopesList?.toString()}, ${this.contentNameScopesList?.toString()})`;
+    return outIndex;
+  }
+  withContentNameScopesList(contentNameScopeStack) {
+    if (this.contentNameScopesList === contentNameScopeStack) {
+      return this;
+    }
+    return this.parent.push(
+      this.ruleId,
+      this._enterPos,
+      this._anchorPos,
+      this.beginRuleCapturedEOL,
+      this.endRule,
+      this.nameScopesList,
+      contentNameScopeStack
+    );
+  }
+  withEndRule(endRule) {
+    if (this.endRule === endRule) {
+      return this;
+    }
+    return new _StateStackImpl(
+      this.parent,
+      this.ruleId,
+      this._enterPos,
+      this._anchorPos,
+      this.beginRuleCapturedEOL,
+      endRule,
+      this.nameScopesList,
+      this.contentNameScopesList
+    );
+  }
+  // Used to warn of endless loops
+  hasSameRuleAs(other) {
+    let el = this;
+    while (el && el._enterPos === other._enterPos) {
+      if (el.ruleId === other.ruleId) {
+        return true;
+      }
+      el = el.parent;
+    }
+    return false;
+  }
+  toStateStackFrame() {
+    return {
+      ruleId: ruleIdToNumber(this.ruleId),
+      beginRuleCapturedEOL: this.beginRuleCapturedEOL,
+      endRule: this.endRule,
+      nameScopesList: this.nameScopesList?.getExtensionIfDefined(this.parent?.nameScopesList ?? null) ?? [],
+      contentNameScopesList: this.contentNameScopesList?.getExtensionIfDefined(this.nameScopesList) ?? []
+    };
+  }
+  static pushFrame(self, frame) {
+    const namesScopeList = AttributedScopeStack.fromExtension(self?.nameScopesList ?? null, frame.nameScopesList);
+    return new _StateStackImpl(
+      self,
+      ruleIdFromNumber(frame.ruleId),
+      frame.enterPos ?? -1,
+      frame.anchorPos ?? -1,
+      frame.beginRuleCapturedEOL,
+      frame.endRule,
+      namesScopeList,
+      AttributedScopeStack.fromExtension(namesScopeList, frame.contentNameScopesList)
+    );
+  }
+};
+var INITIAL = StateStackImpl.NULL;
+
+// ../../node_modules/.pnpm/@shikijs+core@3.21.0/node_modules/@shikijs/core/dist/index.mjs
+function getTokenStyleObject(token) {
+  const styles = {};
+  if (token.color)
+    styles.color = token.color;
+  if (token.bgColor)
+    styles["background-color"] = token.bgColor;
+  if (token.fontStyle) {
+    if (token.fontStyle & FontStyle.Italic)
+      styles["font-style"] = "italic";
+    if (token.fontStyle & FontStyle.Bold)
+      styles["font-weight"] = "bold";
+    const decorations = [];
+    if (token.fontStyle & FontStyle.Underline)
+      decorations.push("underline");
+    if (token.fontStyle & FontStyle.Strikethrough)
+      decorations.push("line-through");
+    if (decorations.length)
+      styles["text-decoration"] = decorations.join(" ");
+  }
+  return styles;
+}
+
+// src/components/CachedCodeRenderer.tsx
+import { useEffect as useEffect7, useRef as useRef7, useState as useState7, forwardRef, useImperativeHandle } from "react";
+import { CodeToTokenTransformStream } from "shiki-stream";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CachedCodeRenderer = forwardRef(
+  function CachedCodeRenderer2({ code, lang, theme, highlighter, onStreamStart, onStreamEnd, onStreamError }, ref) {
+    const [hasStreamError, setHasStreamError] = useState7(false);
+    const [tokens, setTokens] = useState7([]);
+    const streamRef = useRef7({
+      controller: null,
+      index: 0,
+      initialized: false,
+      streamConsumed: false
+    });
+    useImperativeHandle(ref, () => ({
+      reset: () => {
+        setHasStreamError(false);
+        setTokens([]);
+        streamRef.current.index = 0;
+      }
+    }));
+    useEffect7(() => {
+      if (streamRef.current.initialized) return;
+      streamRef.current.initialized = true;
+      const textStream = new ReadableStream({
+        start(controller) {
+          streamRef.current.controller = controller;
+        }
+      });
+      let tokenStream = null;
+      try {
+        tokenStream = textStream.pipeThrough(
+          new CodeToTokenTransformStream({
+            highlighter,
+            lang,
+            theme,
+            allowRecalls: true
+          })
+        );
+      } catch (error) {
+        console.error("Failed to create token stream:", error);
+        setHasStreamError(true);
+        onStreamError?.();
+        return;
+      }
+      let started = false;
+      let tokenCount = 0;
+      tokenStream.pipeTo(new WritableStream({
+        write(token) {
+          if (!started) {
+            started = true;
+            onStreamStart?.();
+          }
+          if ("recall" in token) {
+            setTokens((prev) => {
+              const newTokens = [...prev];
+              newTokens.splice(newTokens.length - token.recall, token.recall);
+              return newTokens;
+            });
+          } else {
+            setTokens((prev) => [...prev, token]);
+          }
+          tokenCount++;
+        },
+        close: () => {
+          console.log(`[React CodeRenderer] Stream completed, total tokens: ${tokenCount}`);
+          onStreamEnd?.();
+        }
+      })).catch((error) => {
+        console.error("Stream error:", error);
+        setHasStreamError(true);
+        onStreamError?.();
+      });
+      streamRef.current.streamConsumed = true;
+    }, []);
+    useEffect7(() => {
+      const { controller, index } = streamRef.current;
+      if (!controller || hasStreamError) return;
+      if (code.length > index) {
+        const incremental = code.slice(index);
+        try {
+          controller.enqueue(incremental);
+          streamRef.current.index = code.length;
+        } catch {
+        }
+      }
+    }, [code, hasStreamError]);
+    if (hasStreamError) {
+      return /* @__PURE__ */ jsx10("pre", { className: "shiki incremark-code-stream", children: /* @__PURE__ */ jsx10("code", { children: code }) });
+    }
+    return /* @__PURE__ */ jsx10("pre", { className: "shiki incremark-code-stream", children: /* @__PURE__ */ jsx10("code", { children: tokens.map((token) => {
+      const styleObj = token.htmlStyle || getTokenStyleObject(token);
+      const reactStyle = {};
+      if (typeof styleObj === "string") {
+        styleObj.split(";").forEach((rule) => {
+          const colonIndex = rule.indexOf(":");
+          if (colonIndex > 0) {
+            const key = rule.slice(0, colonIndex).trim();
+            const value = rule.slice(colonIndex + 1).trim();
+            if (key && value) {
+              const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+              reactStyle[camelKey] = value;
+            }
+          }
+        });
+      } else if (styleObj && typeof styleObj === "object") {
+        for (const [key, value] of Object.entries(styleObj)) {
+          const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+          reactStyle[camelKey] = value;
+        }
+      }
+      return /* @__PURE__ */ jsx10("span", { style: reactStyle, children: token.content }, objectId(token));
+    }) }) });
+  }
+);
+
 // src/components/IncremarkCodeDefault.tsx
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var IncremarkCodeDefault = ({
   node,
   theme = "github-dark",
   fallbackTheme = "github-dark",
-  disableHighlight = false
+  disableHighlight = false,
+  blockStatus = "pending"
 }) => {
-  const [copied, setCopied] = useState6(false);
-  const [highlightedHtml, setHighlightedHtml] = useState6("");
-  const language = node.lang || "text";
-  const code = node.value;
+  const [copied, setCopied] = useState8(false);
+  const [isLanguageLoaded, setIsLanguageLoaded] = useState8(false);
+  const language = useMemo5(() => node.lang || "text", [node.lang]);
+  const code = useMemo5(() => node.value, [node.value]);
   const { t } = useLocale();
-  const { isHighlighting, highlight } = useShiki(theme);
-  const copyTimeoutRef = useRef6(null);
-  const copyCode = useCallback6(async () => {
+  const { highlighterInfo, initHighlighter } = useShiki(theme);
+  const shouldEnableHighlight = useMemo5(() => {
+    return !disableHighlight && code && code.length > 0;
+  }, [disableHighlight, code]);
+  useEffect8(() => {
+    const loadLanguageIfNeeded = async () => {
+      if (!shouldEnableHighlight) {
+        return;
+      }
+      if (!highlighterInfo) {
+        await initHighlighter();
+      } else if (language && language !== "text") {
+        if (!highlighterInfo.loadedLanguages.has(language)) {
+          try {
+            setIsLanguageLoaded(false);
+            const supportedLangs = highlighterInfo.highlighter.getLoadedLanguages();
+            const bundledLangs = await import("shiki").then((m) => Object.keys(m.bundledLanguages || {}));
+            const isSupported = supportedLangs.includes(language) || bundledLangs.includes(language);
+            if (isSupported) {
+              await highlighterInfo.highlighter.loadLanguage(language);
+              highlighterInfo.loadedLanguages.add(language);
+            }
+            setIsLanguageLoaded(true);
+          } catch {
+            setIsLanguageLoaded(true);
+          }
+        } else {
+          setIsLanguageLoaded(true);
+        }
+      } else {
+        setIsLanguageLoaded(true);
+      }
+    };
+    loadLanguageIfNeeded();
+  }, [highlighterInfo, language, shouldEnableHighlight, initHighlighter]);
+  const copyTimeoutRef = useRef8(null);
+  const copyCode = useCallback7(async () => {
     if (!isClipboardAvailable2()) return;
     try {
       await navigator.clipboard.writeText(code);
@@ -1172,32 +2076,17 @@ var IncremarkCodeDefault = ({
     } catch {
     }
   }, [code]);
-  useEffect5(() => {
+  useEffect8(() => {
     return () => {
       if (copyTimeoutRef.current) {
         clearTimeout(copyTimeoutRef.current);
       }
     };
   }, []);
-  const doHighlight = useCallback6(async () => {
-    if (!code || disableHighlight) {
-      setHighlightedHtml("");
-      return;
-    }
-    try {
-      const html = await highlight(code, language, fallbackTheme);
-      setHighlightedHtml(html);
-    } catch {
-      setHighlightedHtml("");
-    }
-  }, [code, language, fallbackTheme, disableHighlight, highlight]);
-  useEffect5(() => {
-    doHighlight();
-  }, [doHighlight]);
   return /* @__PURE__ */ jsxs3("div", { className: "incremark-code", children: [
     /* @__PURE__ */ jsxs3("div", { className: "code-header", children: [
-      /* @__PURE__ */ jsx9("span", { className: "language", children: language }),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx11("span", { className: "language", children: language }),
+      /* @__PURE__ */ jsx11(
         "button",
         {
           className: "code-btn",
@@ -1205,16 +2094,27 @@ var IncremarkCodeDefault = ({
           type: "button",
           "aria-label": copied ? t("code.copied") : t("code.copy"),
           title: copied ? "Copied!" : "Copy",
-          children: /* @__PURE__ */ jsx9(SvgIcon, { svg: copied ? LucideCopyCheck2 : LucideCopy2 })
+          children: /* @__PURE__ */ jsx11(SvgIcon, { svg: copied ? LucideCopyCheck2 : LucideCopy2 })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "code-content", children: isHighlighting && !highlightedHtml ? /* @__PURE__ */ jsx9("div", { className: "code-loading", children: /* @__PURE__ */ jsx9("pre", { children: /* @__PURE__ */ jsx9("code", { children: code }) }) }) : highlightedHtml ? /* @__PURE__ */ jsx9("div", { className: "shiki-wrapper", dangerouslySetInnerHTML: { __html: highlightedHtml } }) : /* @__PURE__ */ jsx9("pre", { className: "code-fallback", children: /* @__PURE__ */ jsx9("code", { children: code }) }) })
+    /* @__PURE__ */ jsx11("div", { className: "code-content", children: /* @__PURE__ */ jsx11("div", { className: "shiki-wrapper", children: shouldEnableHighlight && highlighterInfo && isLanguageLoaded ? /* @__PURE__ */ jsx11(
+      CachedCodeRenderer,
+      {
+        code,
+        lang: language,
+        theme,
+        highlighter: highlighterInfo.highlighter
+      }
+    ) : (
+      // 无高亮模式（禁用高亮、无代码内容、或语言未加载完成时显示）
+      /* @__PURE__ */ jsx11("pre", { className: "code-fallback", children: /* @__PURE__ */ jsx11("code", { children: code }) })
+    ) }) })
   ] });
 };
 
 // src/components/IncremarkCode.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var IncremarkCode = ({
   node,
   theme = "github-dark",
@@ -1222,14 +2122,14 @@ var IncremarkCode = ({
   disableHighlight = false,
   mermaidDelay = 500,
   customCodeBlocks,
-  blockStatus = "completed",
+  blockStatus = "pending",
   codeBlockConfigs,
   defaultCodeComponent: DefaultCodeComponent = IncremarkCodeDefault
 }) => {
   const language = node.lang || "text";
   const code = node.value;
   const isMermaid = language === "mermaid";
-  const CustomCodeBlock = React7.useMemo(() => {
+  const CustomCodeBlock = React9.useMemo(() => {
     const component = customCodeBlocks?.[language];
     if (!component) return null;
     const config = codeBlockConfigs?.[language];
@@ -1243,7 +2143,7 @@ var IncremarkCode = ({
   }, [customCodeBlocks, language, blockStatus, codeBlockConfigs]);
   if (CustomCodeBlock) {
     const config = codeBlockConfigs?.[language];
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx12(
       CustomCodeBlock,
       {
         codeStr: code,
@@ -1254,7 +2154,7 @@ var IncremarkCode = ({
     );
   }
   if (isMermaid) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx12(
       IncremarkCodeMermaid,
       {
         node,
@@ -1262,20 +2162,21 @@ var IncremarkCode = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     DefaultCodeComponent,
     {
       node,
       theme,
       fallbackTheme,
-      disableHighlight
+      disableHighlight,
+      blockStatus
     }
   );
 };
 
 // src/components/IncremarkList.tsx
-import React8 from "react";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import React10 from "react";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 function getItemInlineContent(item) {
   const firstChild = item.children[0];
   if (firstChild?.type === "paragraph") {
@@ -1294,13 +2195,13 @@ function getItemBlockChildren(item) {
 var IncremarkList = ({ node }) => {
   const Tag = node.ordered ? "ol" : "ul";
   const isTaskList = node.children?.some((item) => item.checked !== null && item.checked !== void 0);
-  return /* @__PURE__ */ jsx11(Tag, { className: `incremark-list ${isTaskList ? "task-list" : ""}`, start: node.start || void 0, children: node.children?.map((item, index) => {
+  return /* @__PURE__ */ jsx13(Tag, { className: `incremark-list ${isTaskList ? "task-list" : ""}`, start: node.start || void 0, children: node.children?.map((item, index) => {
     const isTaskItem = item.checked !== null && item.checked !== void 0;
     const inlineContent = getItemInlineContent(item);
     const blockChildren = getItemBlockChildren(item);
     if (isTaskItem) {
-      return /* @__PURE__ */ jsx11("li", { className: "incremark-list-item task-item", children: /* @__PURE__ */ jsxs4("label", { className: "task-label", children: [
-        /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx13("li", { className: "incremark-list-item task-item", children: /* @__PURE__ */ jsxs4("label", { className: "task-label", children: [
+        /* @__PURE__ */ jsx13(
           "input",
           {
             type: "checkbox",
@@ -1309,43 +2210,43 @@ var IncremarkList = ({ node }) => {
             className: "checkbox"
           }
         ),
-        /* @__PURE__ */ jsx11("span", { className: "task-content", children: /* @__PURE__ */ jsx11(IncremarkInline, { nodes: inlineContent }) })
+        /* @__PURE__ */ jsx13("span", { className: "task-content", children: /* @__PURE__ */ jsx13(IncremarkInline, { nodes: inlineContent }) })
       ] }) }, index);
     }
     return /* @__PURE__ */ jsxs4("li", { className: "incremark-list-item", children: [
-      /* @__PURE__ */ jsx11(IncremarkInline, { nodes: inlineContent }),
-      blockChildren.map((child, childIndex) => /* @__PURE__ */ jsx11(React8.Fragment, { children: /* @__PURE__ */ jsx11(IncremarkRenderer, { node: child }) }, childIndex))
+      /* @__PURE__ */ jsx13(IncremarkInline, { nodes: inlineContent }),
+      blockChildren.map((child, childIndex) => /* @__PURE__ */ jsx13(React10.Fragment, { children: /* @__PURE__ */ jsx13(IncremarkRenderer, { node: child }) }, childIndex))
     ] }, index);
   }) });
 };
 
 // src/components/IncremarkBlockquote.tsx
-import React9 from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import React11 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var IncremarkBlockquote = ({ node }) => {
-  return /* @__PURE__ */ jsx12("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx12(React9.Fragment, { children: /* @__PURE__ */ jsx12(IncremarkRenderer, { node: child }) }, index)) });
+  return /* @__PURE__ */ jsx14("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx14(React11.Fragment, { children: /* @__PURE__ */ jsx14(IncremarkRenderer, { node: child }) }, index)) });
 };
 
 // src/components/IncremarkTable.tsx
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 function getCellContent(cell) {
   return cell.children;
 }
 var IncremarkTable = ({ node }) => {
-  return /* @__PURE__ */ jsx13("div", { className: "incremark-table-wrapper", children: /* @__PURE__ */ jsxs5("table", { className: "incremark-table", children: [
-    /* @__PURE__ */ jsx13("thead", { children: node.children?.[0] && /* @__PURE__ */ jsx13("tr", { children: node.children[0].children.map((cell, cellIndex) => /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15("div", { className: "incremark-table-wrapper", children: /* @__PURE__ */ jsxs5("table", { className: "incremark-table", children: [
+    /* @__PURE__ */ jsx15("thead", { children: node.children?.[0] && /* @__PURE__ */ jsx15("tr", { children: node.children[0].children.map((cell, cellIndex) => /* @__PURE__ */ jsx15(
       "th",
       {
         className: `incremark-table-align-${node.align?.[cellIndex] || "left"}`,
-        children: /* @__PURE__ */ jsx13(IncremarkInline, { nodes: getCellContent(cell) })
+        children: /* @__PURE__ */ jsx15(IncremarkInline, { nodes: getCellContent(cell) })
       },
       cellIndex
     )) }) }),
-    /* @__PURE__ */ jsx13("tbody", { children: node.children?.slice(1).map((row, rowIndex) => /* @__PURE__ */ jsx13("tr", { children: row.children.map((cell, cellIndex) => /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx15("tbody", { children: node.children?.slice(1).map((row, rowIndex) => /* @__PURE__ */ jsx15("tr", { children: row.children.map((cell, cellIndex) => /* @__PURE__ */ jsx15(
       "td",
       {
         className: `incremark-table-align-${node.align?.[cellIndex] || "left"}`,
-        children: /* @__PURE__ */ jsx13(IncremarkInline, { nodes: getCellContent(cell) })
+        children: /* @__PURE__ */ jsx15(IncremarkInline, { nodes: getCellContent(cell) })
       },
       cellIndex
     )) }, rowIndex)) })
@@ -1353,75 +2254,13 @@ var IncremarkTable = ({ node }) => {
 };
 
 // src/components/IncremarkThematicBreak.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var IncremarkThematicBreak = () => {
-  return /* @__PURE__ */ jsx14("hr", { className: "incremark-hr" });
-};
-
-// src/components/IncremarkMath.tsx
-import { useState as useState7, useEffect as useEffect6, useRef as useRef7, useCallback as useCallback7 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var IncremarkMath = ({
-  node,
-  renderDelay = 300
-}) => {
-  const [renderedHtml, setRenderedHtml] = useState7("");
-  const [isLoading, setIsLoading] = useState7(false);
-  const katexRef = useRef7(null);
-  const renderTimerRef = useRef7(null);
-  const isInline = node.type === "inlineMath";
-  const formula = node.value;
-  const doRender = useCallback7(async () => {
-    if (!formula) return;
-    try {
-      if (!katexRef.current) {
-        const katexModule = await import("katex");
-        katexRef.current = katexModule.default;
-      }
-      const katex = katexRef.current;
-      const html = katex.renderToString(formula, {
-        displayMode: !isInline,
-        throwOnError: false,
-        strict: false
-      });
-      setRenderedHtml(html);
-    } catch {
-      setRenderedHtml("");
-    } finally {
-      setIsLoading(false);
-    }
-  }, [formula, isInline]);
-  const scheduleRender = useCallback7(() => {
-    if (!formula) {
-      setRenderedHtml("");
-      return;
-    }
-    if (renderTimerRef.current) {
-      clearTimeout(renderTimerRef.current);
-    }
-    setIsLoading(true);
-    renderTimerRef.current = setTimeout(() => {
-      doRender();
-    }, renderDelay);
-  }, [formula, renderDelay, doRender]);
-  useEffect6(() => {
-    scheduleRender();
-  }, [scheduleRender]);
-  useEffect6(() => {
-    return () => {
-      if (renderTimerRef.current) {
-        clearTimeout(renderTimerRef.current);
-      }
-    };
-  }, []);
-  if (isInline) {
-    return /* @__PURE__ */ jsx15("span", { className: "incremark-math-inline", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx15("code", { className: "math-source", children: formula }) });
-  }
-  return /* @__PURE__ */ jsx15("div", { className: "incremark-math-block", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx15("div", { className: "math-rendered", dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx15("pre", { className: "math-source-block", children: /* @__PURE__ */ jsx15("code", { children: formula }) }) });
+  return /* @__PURE__ */ jsx16("hr", { className: "incremark-hr" });
 };
 
 // src/components/IncremarkContainer.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function parseOptions(attributes) {
   if (!attributes) return {};
   const options = {};
@@ -1439,22 +2278,22 @@ var IncremarkContainer = ({ node, customContainers }) => {
   const options = parseOptions(node.attributes);
   const CustomContainer = customContainers?.[containerName];
   if (CustomContainer) {
-    return /* @__PURE__ */ jsx16(CustomContainer, { name: containerName, options, children: node.children?.map((child, index) => /* @__PURE__ */ jsx16(IncremarkRenderer, { node: child }, index)) });
+    return /* @__PURE__ */ jsx17(CustomContainer, { name: containerName, options, children: node.children?.map((child, index) => /* @__PURE__ */ jsx17(IncremarkRenderer, { node: child }, index)) });
   }
-  return /* @__PURE__ */ jsx16("div", { className: `incremark-container incremark-container-${containerName}`, children: node.children && node.children.length > 0 && /* @__PURE__ */ jsx16("div", { className: "incremark-container-content", children: node.children.map((child, index) => /* @__PURE__ */ jsx16(IncremarkRenderer, { node: child }, index)) }) });
+  return /* @__PURE__ */ jsx17("div", { className: `incremark-container incremark-container-${containerName}`, children: node.children && node.children.length > 0 && /* @__PURE__ */ jsx17("div", { className: "incremark-container-content", children: node.children.map((child, index) => /* @__PURE__ */ jsx17(IncremarkRenderer, { node: child }, index)) }) });
 };
 
 // src/components/IncremarkDefault.tsx
-import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
 var IncremarkDefault = ({ node }) => {
   return /* @__PURE__ */ jsxs6("div", { className: "incremark-default", children: [
-    /* @__PURE__ */ jsx17("span", { className: "type-badge", children: node.type }),
-    /* @__PURE__ */ jsx17("pre", { children: JSON.stringify(node, null, 2) })
+    /* @__PURE__ */ jsx18("span", { className: "type-badge", children: node.type }),
+    /* @__PURE__ */ jsx18("pre", { children: JSON.stringify(node, null, 2) })
   ] });
 };
 
 // src/components/IncremarkRenderer.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var defaultComponents = {
   heading: IncremarkHeading,
   paragraph: IncremarkParagraph,
@@ -1490,10 +2329,10 @@ var IncremarkRenderer = ({
     return null;
   }
   if (isHtmlNode2(node)) {
-    return /* @__PURE__ */ jsx18("pre", { className: "incremark-html-code", children: /* @__PURE__ */ jsx18("code", { children: node.value }) });
+    return /* @__PURE__ */ jsx19("pre", { className: "incremark-html-code", children: /* @__PURE__ */ jsx19("code", { children: node.value }) });
   }
   if (isContainerNode(node)) {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       IncremarkContainer,
       {
         node,
@@ -1502,7 +2341,7 @@ var IncremarkRenderer = ({
     );
   }
   if (node.type === "code") {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       IncremarkCode,
       {
         node,
@@ -1514,15 +2353,15 @@ var IncremarkRenderer = ({
     );
   }
   const Component = getComponent(node.type, components);
-  return /* @__PURE__ */ jsx18(Component, { node });
+  return /* @__PURE__ */ jsx19(Component, { node });
 };
 
 // src/components/IncremarkFootnotes.tsx
-import React11 from "react";
-import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
+import React12 from "react";
+import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
 var IncremarkFootnotes = () => {
   const { footnoteDefinitions, footnoteReferenceOrder } = useDefinitions();
-  const orderedFootnotes = React11.useMemo(() => {
+  const orderedFootnotes = React12.useMemo(() => {
     return footnoteReferenceOrder.map((identifier) => ({
       identifier,
       definition: footnoteDefinitions[identifier]
@@ -1532,8 +2371,8 @@ var IncremarkFootnotes = () => {
     return null;
   }
   return /* @__PURE__ */ jsxs7("section", { className: "incremark-footnotes", children: [
-    /* @__PURE__ */ jsx19("hr", { className: "incremark-footnotes-divider" }),
-    /* @__PURE__ */ jsx19("ol", { className: "incremark-footnotes-list", children: orderedFootnotes.map((item, index) => /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx20("hr", { className: "incremark-footnotes-divider" }),
+    /* @__PURE__ */ jsx20("ol", { className: "incremark-footnotes-list", children: orderedFootnotes.map((item, index) => /* @__PURE__ */ jsxs7(
       "li",
       {
         id: `fn-${item.identifier}`,
@@ -1544,9 +2383,9 @@ var IncremarkFootnotes = () => {
               index + 1,
               "."
             ] }),
-            /* @__PURE__ */ jsx19("div", { className: "incremark-footnote-body", children: item.definition.children.map((child, childIndex) => /* @__PURE__ */ jsx19(IncremarkRenderer, { node: child }, childIndex)) })
+            /* @__PURE__ */ jsx20("div", { className: "incremark-footnote-body", children: item.definition.children.map((child, childIndex) => /* @__PURE__ */ jsx20(IncremarkRenderer, { node: child }, childIndex)) })
           ] }),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             "a",
             {
               href: `#fnref-${item.identifier}`,
@@ -1563,13 +2402,13 @@ var IncremarkFootnotes = () => {
 };
 
 // src/components/IncremarkContainerProvider.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var IncremarkContainerProvider = ({ children, definitions }) => {
-  return /* @__PURE__ */ jsx20(DefinitionsContext.Provider, { value: definitions, children });
+  return /* @__PURE__ */ jsx21(DefinitionsContext.Provider, { value: definitions, children });
 };
 
 // src/components/Incremark.tsx
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 var Incremark = (props) => {
   const {
     blocks: propsBlocks,
@@ -1585,7 +2424,7 @@ var Incremark = (props) => {
   } = props;
   if (incremark) {
     const { blocks: blocks2, isDisplayComplete: isDisplayComplete2, _definitionsContextValue } = incremark;
-    return /* @__PURE__ */ jsx21(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx22(
       IncremarkInternal,
       {
         blocks: blocks2,
@@ -1602,7 +2441,7 @@ var Incremark = (props) => {
   }
   const blocks = propsBlocks || [];
   const isDisplayComplete = propsIsDisplayComplete;
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     IncremarkInternal,
     {
       blocks,
@@ -1641,7 +2480,7 @@ var IncremarkInternal = ({
         showBlockStatus && "incremark-show-status",
         block.isLastPending && "incremark-last-pending"
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsx21("div", { className: classes, children: /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22("div", { className: classes, children: /* @__PURE__ */ jsx22(
         IncremarkRenderer,
         {
           node: block.node,
@@ -1653,13 +2492,13 @@ var IncremarkInternal = ({
         }
       ) }, block.id);
     }),
-    isDisplayComplete && /* @__PURE__ */ jsx21(IncremarkFootnotes, {})
+    isDisplayComplete && /* @__PURE__ */ jsx22(IncremarkFootnotes, {})
   ] });
 };
 
 // src/components/IncremarkContent.tsx
-import { useEffect as useEffect7, useRef as useRef8, useMemo as useMemo4, useCallback as useCallback8 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useRef as useRef9, useMemo as useMemo6, useCallback as useCallback8 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var IncremarkContent = (props) => {
   const {
     stream,
@@ -1673,22 +2512,40 @@ var IncremarkContent = (props) => {
     showBlockStatus,
     pendingClass
   } = props;
-  const initialOptionsRef = useRef8({
+  const initialOptionsRef = useRef9({
     gfm: true,
     htmlTree: true,
     containers: true,
     math: true,
     ...incremarkOptions
   });
-  const { blocks, append, finalize, render, reset, isDisplayComplete, markdown, typewriter, _definitionsContextValue } = useIncremark(initialOptionsRef.current);
-  useEffect7(() => {
-    if (incremarkOptions?.typewriter) {
-      typewriter.setOptions(incremarkOptions.typewriter);
-    }
-  }, [incremarkOptions?.typewriter, typewriter]);
-  const isStreamMode = useMemo4(() => typeof stream === "function", [stream]);
-  const prevContentRef = useRef8(void 0);
-  const isStreamingRef = useRef8(false);
+  const { blocks, append, finalize, render, reset, updateOptions, isDisplayComplete, markdown, typewriter, _definitionsContextValue } = useIncremark(initialOptionsRef.current);
+  const prevOptionsRef = useRef9(incremarkOptions);
+  useEffect9(() => {
+    const prev = prevOptionsRef.current;
+    const current = incremarkOptions;
+    if (prev === current) return;
+    prevOptionsRef.current = current;
+    const prevMath = typeof prev?.math === "object" ? JSON.stringify(prev.math) : String(prev?.math ?? true);
+    const currentMath = typeof current?.math === "object" ? JSON.stringify(current.math) : String(current?.math ?? true);
+    const prevAstBuilder = prev?.astBuilder?.name ?? "default";
+    const currentAstBuilder = current?.astBuilder?.name ?? "default";
+    if (prevMath !== currentMath || prev?.gfm !== current?.gfm || prev?.htmlTree !== current?.htmlTree || prev?.containers !== current?.containers || prevAstBuilder !== currentAstBuilder) {
+      updateOptions({
+        gfm: current?.gfm ?? true,
+        math: current?.math ?? true,
+        htmlTree: current?.htmlTree ?? true,
+        containers: current?.containers ?? true,
+        astBuilder: current?.astBuilder
+      });
+    }
+    if (current?.typewriter) {
+      typewriter.setOptions(current.typewriter);
+    }
+  }, [incremarkOptions, updateOptions, typewriter]);
+  const isStreamMode = useMemo6(() => typeof stream === "function", [stream]);
+  const prevContentRef = useRef9(void 0);
+  const isStreamingRef = useRef9(false);
   const handleStreamInput = useCallback8(async () => {
     if (!stream || isStreamingRef.current) return;
     isStreamingRef.current = true;
@@ -1719,7 +2576,7 @@ var IncremarkContent = (props) => {
       render(newContent);
     }
   }, [append, render, reset]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (isStreamMode) {
       handleStreamInput();
     } else {
@@ -1727,12 +2584,12 @@ var IncremarkContent = (props) => {
     }
     prevContentRef.current = content;
   }, [content, isStreamMode, handleStreamInput, handleContentInput]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (isFinished && content === markdown) {
       finalize();
     }
   }, [isFinished, content, markdown, finalize]);
-  return /* @__PURE__ */ jsx22(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx23(
     Incremark,
     {
       blocks,
@@ -1749,15 +2606,15 @@ var IncremarkContent = (props) => {
 
 // src/components/AutoScrollContainer.tsx
 import {
-  useRef as useRef9,
-  useEffect as useEffect8,
+  useRef as useRef10,
+  useEffect as useEffect10,
   useCallback as useCallback9,
-  useState as useState8,
-  forwardRef,
-  useImperativeHandle
+  useState as useState9,
+  forwardRef as forwardRef2,
+  useImperativeHandle as useImperativeHandle2
 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var AutoScrollContainer = forwardRef(
+import { jsx as jsx24 } from "react/jsx-runtime";
+var AutoScrollContainer = forwardRef2(
   ({
     children,
     enabled = true,
@@ -1766,10 +2623,10 @@ var AutoScrollContainer = forwardRef(
     style,
     className
   }, ref) => {
-    const containerRef = useRef9(null);
-    const [isUserScrolledUp, setIsUserScrolledUp] = useState8(false);
-    const lastScrollTopRef = useRef9(0);
-    const lastScrollHeightRef = useRef9(0);
+    const containerRef = useRef10(null);
+    const [isUserScrolledUp, setIsUserScrolledUp] = useState9(false);
+    const lastScrollTopRef = useRef10(0);
+    const lastScrollHeightRef = useRef10(0);
     const isNearBottom = useCallback9(() => {
       const container = containerRef.current;
       if (!container) return true;
@@ -1815,14 +2672,14 @@ var AutoScrollContainer = forwardRef(
       lastScrollTopRef.current = scrollTop;
       lastScrollHeightRef.current = scrollHeight;
     }, [isNearBottom]);
-    useEffect8(() => {
+    useEffect10(() => {
       const container = containerRef.current;
       if (container) {
         lastScrollTopRef.current = container.scrollTop;
         lastScrollHeightRef.current = container.scrollHeight;
       }
     }, []);
-    useEffect8(() => {
+    useEffect10(() => {
       const container = containerRef.current;
       if (!container || !enabled) return;
       const observer = new MutationObserver(() => {
@@ -1845,7 +2702,7 @@ var AutoScrollContainer = forwardRef(
       });
       return () => observer.disconnect();
     }, [enabled, isUserScrolledUp, scrollToBottom]);
-    useImperativeHandle(
+    useImperativeHandle2(
       ref,
       () => ({
         scrollToBottom: () => scrollToBottom(true),
@@ -1854,7 +2711,7 @@ var AutoScrollContainer = forwardRef(
       }),
       [scrollToBottom, isUserScrolledUp]
     );
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       "div",
       {
         ref: containerRef,
@@ -1869,21 +2726,21 @@ var AutoScrollContainer = forwardRef(
 AutoScrollContainer.displayName = "AutoScrollContainer";
 
 // src/ThemeProvider.tsx
-import { useEffect as useEffect9, useRef as useRef10 } from "react";
+import { useEffect as useEffect11, useRef as useRef11 } from "react";
 import { applyTheme } from "@incremark/theme";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var ThemeProvider = ({
   theme,
   children,
   className = ""
 }) => {
-  const containerRef = useRef10(null);
-  useEffect9(() => {
+  const containerRef = useRef11(null);
+  useEffect11(() => {
     if (containerRef.current) {
       applyTheme(containerRef.current, theme);
     }
   }, [theme]);
-  return /* @__PURE__ */ jsx24("div", { ref: containerRef, className: `incremark-theme-provider ${className}`.trim(), children });
+  return /* @__PURE__ */ jsx25("div", { ref: containerRef, className: `incremark-theme-provider ${className}`.trim(), children });
 };
 
 // src/index.ts
@@ -1896,7 +2753,7 @@ import {
   codeBlockPlugin,
   mermaidPlugin,
   imagePlugin,
-  mathPlugin,
+  mathPlugin as mathPlugin2,
   thematicBreakPlugin,
   defaultPlugins as defaultPlugins2,
   allPlugins,
@@ -1936,7 +2793,7 @@ export {
   enShared as en,
   generateCSSVars,
   imagePlugin,
-  mathPlugin,
+  mathPlugin2 as mathPlugin,
   mergeTheme,
   mermaidPlugin,
   sliceAst,