@incremark/react 0.2.7 → 0.3.1

package/dist/index.js

@@ -389,6 +389,19 @@ function useIncremark(options = {}) {
     },
     [parser, setFootnoteReferenceOrder]
   );
+  const updateOptions = useCallback3(
+    (newOptions) => {
+      parser.updateOptions(newOptions);
+      setCompletedBlocks([]);
+      setPendingBlocks([]);
+      setMarkdown("");
+      setIsLoading(false);
+      setIsFinalized(false);
+      setFootnoteReferenceOrder([]);
+      transformer?.reset();
+    },
+    [parser, transformer, setFootnoteReferenceOrder]
+  );
   return {
     /** 已收集的完整 Markdown 字符串 */
     markdown,
@@ -421,6 +434,8 @@ function useIncremark(options = {}) {
     reset,
     /** 一次性渲染（reset + append + finalize） */
     render,
+    /** 更新解析器配置（动态更新，不需要重建实例） */
+    updateOptions,
     /** 解析器实例 */
     parser,
     /** 打字机控制 */
@@ -536,8 +551,46 @@ function useBlockTransformer(sourceBlocks, options = {}) {
   };
 }
 
+// src/hooks/useLocale.ts
+import { useContext as useContext2 } from "react";
+
+// src/components/ConfigProvider.tsx
+import { createContext as createContext2, useMemo as useMemo3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LocaleContext = createContext2(null);
+function ConfigProvider({ children, locale = enShared }) {
+  const contextValue = useMemo3(() => ({ locale }), [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 keys = key.split(".");
+      let value = enShared;
+      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;
+  };
+  return { t };
+}
+
 // src/components/IncremarkInline.tsx
-import React3 from "react";
+import React4 from "react";
 import {
   hasChunks,
   getStableText,
@@ -546,7 +599,7 @@ import {
 
 // src/components/IncremarkHtmlElement.tsx
 import React2 from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var INLINE_ELEMENTS = [
   "a",
   "abbr",
@@ -668,22 +721,22 @@ function toReactProps(attrs) {
 function renderChildren(children) {
   if (!children || children.length === 0) return null;
   if (hasOnlyInlineChildren(children)) {
-    return /* @__PURE__ */ jsx2(IncremarkInline, { nodes: children });
+    return /* @__PURE__ */ jsx3(IncremarkInline, { nodes: children });
   }
   return children.map((child, idx) => {
     if (child.type === "htmlElement") {
-      return /* @__PURE__ */ jsx2(IncremarkHtmlElement, { node: child }, idx);
+      return /* @__PURE__ */ jsx3(IncremarkHtmlElement, { node: child }, idx);
     }
     if (child.type === "text") {
-      return /* @__PURE__ */ jsx2(React2.Fragment, { children: child.value }, idx);
+      return /* @__PURE__ */ jsx3(React2.Fragment, { children: child.value }, idx);
     }
     if (["strong", "emphasis", "inlineCode", "link", "image", "break"].includes(child.type)) {
-      return /* @__PURE__ */ jsx2(IncremarkInline, { nodes: [child] }, idx);
+      return /* @__PURE__ */ jsx3(IncremarkInline, { nodes: [child] }, idx);
     }
     if (child.type === "paragraph") {
-      return /* @__PURE__ */ jsx2("p", { children: /* @__PURE__ */ jsx2(IncremarkInline, { nodes: child.children }) }, idx);
+      return /* @__PURE__ */ jsx3("p", { children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: child.children }) }, idx);
     }
-    return /* @__PURE__ */ jsx2("div", { className: "incremark-unknown-child", children: child.type }, idx);
+    return /* @__PURE__ */ jsx3("div", { className: "incremark-unknown-child", children: child.type }, idx);
   });
 }
 var IncremarkHtmlElement = ({ node }) => {
@@ -691,13 +744,78 @@ var IncremarkHtmlElement = ({ node }) => {
   const Tag = tagName;
   const reactProps = toReactProps(attrs);
   if (isVoidElement(tagName)) {
-    return /* @__PURE__ */ jsx2(Tag, { ...reactProps, className: `incremark-html-element incremark-${tagName} ${reactProps.className || ""}` });
+    return /* @__PURE__ */ jsx3(Tag, { ...reactProps, className: `incremark-html-element incremark-${tagName} ${reactProps.className || ""}` });
+  }
+  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 useEffect4, 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]);
+  useEffect4(() => {
+    scheduleRender();
+  }, [scheduleRender]);
+  useEffect4(() => {
+    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__ */ jsx2(Tag, { ...reactProps, className: `incremark-html-element incremark-${tagName} ${reactProps.className || ""}`, children: renderChildren(children) });
+  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 jsx3, 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";
 }
@@ -710,45 +828,48 @@ function isLinkReference(node) {
 var IncremarkInline = ({ nodes }) => {
   if (!nodes || nodes.length === 0) return null;
   const { definitions, footnoteDefinitions } = useDefinitions();
-  return /* @__PURE__ */ jsx3(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__ */ jsx3("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__ */ jsx3(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__ */ jsx3(IncremarkHtmlElement, { node }, i);
+      return /* @__PURE__ */ jsx5(IncremarkHtmlElement, { node }, i);
     }
     if (isHtmlNode(node)) {
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx5(
         "span",
         {
-          style: { display: "contents" },
+          className: "incremark-inline-html",
           dangerouslySetInnerHTML: { __html: node.value }
         },
         i
       );
     }
     if (node.type === "strong") {
-      return /* @__PURE__ */ jsx3("strong", { children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("strong", { children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "emphasis") {
-      return /* @__PURE__ */ jsx3("em", { children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("em", { children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "inlineCode") {
-      return /* @__PURE__ */ jsx3("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__ */ jsx3("a", { href: node.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx3(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__ */ jsx3(
+      return /* @__PURE__ */ jsx5(
         "img",
         {
           src: imageNode.url,
@@ -762,7 +883,7 @@ var IncremarkInline = ({ nodes }) => {
     if (isImageReference(node)) {
       const definition = definitions[node.identifier];
       if (definition) {
-        return /* @__PURE__ */ jsx3(
+        return /* @__PURE__ */ jsx5(
           "img",
           {
             src: definition.url,
@@ -784,14 +905,14 @@ var IncremarkInline = ({ nodes }) => {
     if (isLinkReference(node)) {
       const definition = definitions[node.identifier];
       if (definition) {
-        return /* @__PURE__ */ jsx3(
+        return /* @__PURE__ */ jsx5(
           "a",
           {
             href: definition.url,
             title: definition.title || void 0,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children })
+            children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children })
           },
           i
         );
@@ -807,36 +928,175 @@ var IncremarkInline = ({ nodes }) => {
     if (node.type === "footnoteReference") {
       const footnoteRef = node;
       const hasDefinition = footnoteDefinitions[footnoteRef.identifier];
-      return /* @__PURE__ */ jsx3("sup", { className: "incremark-footnote-ref", children: /* @__PURE__ */ jsx3("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__ */ jsx3("br", {}, i);
+      return /* @__PURE__ */ jsx5("br", {}, i);
     }
     if (node.type === "delete") {
-      return /* @__PURE__ */ jsx3("del", { children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("del", { children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
-    return /* @__PURE__ */ jsx3("span", { children: node.value || "" }, i);
+    return /* @__PURE__ */ jsx5("span", { children: node.value || "" }, i);
   }) });
 };
 
 // src/components/IncremarkHeading.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var IncremarkHeading = ({ node }) => {
   const Tag = `h${node.depth}`;
-  return /* @__PURE__ */ jsx4(Tag, { className: `incremark-heading h${node.depth}`, children: /* @__PURE__ */ jsx4(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 jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var IncremarkParagraph = ({ node }) => {
-  return /* @__PURE__ */ jsx5("p", { className: "incremark-paragraph", children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) });
+  return /* @__PURE__ */ jsx7("p", { className: "incremark-paragraph", children: /* @__PURE__ */ jsx7(IncremarkInline, { nodes: node.children }) });
 };
 
 // src/components/IncremarkCode.tsx
-import React5, { useState as useState5, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
+import React8 from "react";
+
+// src/components/IncremarkCodeMermaid.tsx
+import { useState as useState6, useEffect as useEffect5, 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 jsx8 } from "react/jsx-runtime";
+var SvgIcon = ({
+  svg,
+  sizeClass,
+  className
+}) => {
+  return /* @__PURE__ */ jsx8(
+    "span",
+    {
+      className: `incremark-icon ${sizeClass || ""} ${className || ""}`.trim(),
+      dangerouslySetInnerHTML: { __html: svg },
+      "aria-hidden": "true"
+    }
+  );
+};
+
+// src/components/IncremarkCodeMermaid.tsx
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var IncremarkCodeMermaid = ({
+  node,
+  mermaidDelay = 500
+}) => {
+  const [copied, setCopied] = useState6(false);
+  const { t } = useLocale();
+  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 = useCallback6(() => {
+    setMermaidViewMode((prev) => prev === "preview" ? "source" : "preview");
+  }, []);
+  const copyCode = useCallback6(async () => {
+    if (!isClipboardAvailable()) return;
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [code]);
+  const doRenderMermaid = useCallback6(async () => {
+    if (!code) return;
+    try {
+      if (!mermaidRef.current) {
+        const mermaidModule = await import("mermaid");
+        mermaidRef.current = mermaidModule.default;
+        mermaidRef.current.initialize({
+          startOnLoad: false,
+          theme: "dark",
+          securityLevel: "loose",
+          suppressErrorRendering: true
+        });
+      }
+      const mermaid = mermaidRef.current;
+      const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      const { svg } = await mermaid.render(id, code);
+      setMermaidSvg(svg);
+    } catch {
+      setMermaidSvg("");
+    } finally {
+      setMermaidLoading(false);
+    }
+  }, [code]);
+  const scheduleRenderMermaid = useCallback6(() => {
+    if (!code) return;
+    if (mermaidTimerRef.current) {
+      clearTimeout(mermaidTimerRef.current);
+    }
+    setMermaidLoading(true);
+    mermaidTimerRef.current = setTimeout(() => {
+      doRenderMermaid();
+    }, mermaidDelay);
+  }, [code, mermaidDelay, doRenderMermaid]);
+  useEffect5(() => {
+    scheduleRenderMermaid();
+  }, [scheduleRenderMermaid]);
+  useEffect5(() => {
+    return () => {
+      if (mermaidTimerRef.current) {
+        clearTimeout(mermaidTimerRef.current);
+      }
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs2("div", { className: "incremark-mermaid", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mermaid-header", children: [
+      /* @__PURE__ */ jsxs2("span", { className: "language", children: [
+        /* @__PURE__ */ jsx9(SvgIcon, { svg: GravityMermaid, className: "language-icon" }),
+        "MERMAID"
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "mermaid-actions", children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            className: "code-btn",
+            onClick: toggleMermaidView,
+            type: "button",
+            disabled: !mermaidSvg,
+            "aria-label": mermaidViewMode === "preview" ? t("mermaid.viewSource") : t("mermaid.preview"),
+            title: mermaidViewMode === "preview" ? "View Source" : "Preview",
+            children: /* @__PURE__ */ jsx9(SvgIcon, { svg: mermaidViewMode === "preview" ? LucideCode : LucideEye })
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            className: "code-btn",
+            onClick: copyCode,
+            type: "button",
+            "aria-label": copied ? t("mermaid.copied") : t("mermaid.copy"),
+            title: copied ? "Copied!" : "Copy",
+            children: /* @__PURE__ */ jsx9(SvgIcon, { svg: copied ? LucideCopyCheck : LucideCopy })
+          }
+        )
+      ] })
+    ] }),
+    /* @__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 useState7, useEffect as useEffect6, useCallback as useCallback7, useRef as useRef7 } from "react";
+import { LucideCopy as LucideCopy2, LucideCopyCheck as LucideCopyCheck2 } from "@incremark/icons";
+import { isClipboardAvailable as isClipboardAvailable2 } from "@incremark/shared";
 
 // src/hooks/useShiki.ts
-import React4 from "react";
+import React6 from "react";
 var ShikiManager = class _ShikiManager {
   static instance = null;
   /** 存储 highlighter 实例，key 为主题名称 */
@@ -928,27 +1188,34 @@ var ShikiManager = class _ShikiManager {
     this.highlighters.clear();
   }
 };
-var shikiManager = ShikiManager.getInstance();
+var shikiManagerInstance = null;
+function getShikiManager() {
+  if (!shikiManagerInstance) {
+    shikiManagerInstance = ShikiManager.getInstance();
+  }
+  return shikiManagerInstance;
+}
 function useShiki(theme) {
-  const [isHighlighting, setIsHighlighting] = React4.useState(false);
-  const highlighterInfoRef = React4.useRef(null);
-  const getHighlighter = React4.useCallback(async () => {
+  const [isHighlighting, setIsHighlighting] = React6.useState(false);
+  const highlighterInfoRef = React6.useRef(null);
+  const getHighlighter = React6.useCallback(async () => {
     if (!highlighterInfoRef.current) {
-      highlighterInfoRef.current = await shikiManager.getHighlighter(theme);
+      highlighterInfoRef.current = await getShikiManager().getHighlighter(theme);
     }
     return highlighterInfoRef.current;
   }, [theme]);
-  const highlight = React4.useCallback(async (code, lang, fallbackTheme) => {
+  const highlight = React6.useCallback(async (code, lang, fallbackTheme) => {
     setIsHighlighting(true);
     try {
       const info = await getHighlighter();
+      const manager = getShikiManager();
       if (!info.loadedLanguages.has(lang) && lang !== "text") {
-        await shikiManager.loadLanguage(theme, lang);
+        await manager.loadLanguage(theme, lang);
       }
       if (!info.loadedThemes.has(theme)) {
-        await shikiManager.loadTheme(theme);
+        await manager.loadTheme(theme);
       }
-      return await shikiManager.codeToHtml(theme, code, lang, fallbackTheme);
+      return await manager.codeToHtml(theme, code, lang, fallbackTheme);
     } catch (e) {
       throw e;
     } finally {
@@ -961,90 +1228,41 @@ function useShiki(theme) {
   };
 }
 
-// src/components/IncremarkCode.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-var IncremarkCode = ({
+// src/components/IncremarkCodeDefault.tsx
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var IncremarkCodeDefault = ({
   node,
   theme = "github-dark",
   fallbackTheme = "github-dark",
-  disableHighlight = false,
-  mermaidDelay = 500,
-  customCodeBlocks,
-  blockStatus = "completed",
-  codeBlockConfigs
+  disableHighlight = false
 }) => {
-  const [copied, setCopied] = useState5(false);
-  const [highlightedHtml, setHighlightedHtml] = useState5("");
-  const [mermaidSvg, setMermaidSvg] = useState5("");
-  const [mermaidLoading, setMermaidLoading] = useState5(false);
-  const [mermaidViewMode, setMermaidViewMode] = useState5("preview");
-  const mermaidRef = useRef5(null);
-  const mermaidTimerRef = useRef5(null);
+  const [copied, setCopied] = useState7(false);
+  const [highlightedHtml, setHighlightedHtml] = useState7("");
   const language = node.lang || "text";
   const code = node.value;
-  const isMermaid = language === "mermaid";
+  const { t } = useLocale();
   const { isHighlighting, highlight } = useShiki(theme);
-  const CustomCodeBlock = React5.useMemo(() => {
-    const component = customCodeBlocks?.[language];
-    if (!component) return null;
-    const config = codeBlockConfigs?.[language];
-    if (config?.takeOver) {
-      return component;
-    }
-    if (blockStatus !== "completed") {
-      return null;
-    }
-    return component;
-  }, [customCodeBlocks, language, blockStatus, codeBlockConfigs]);
-  const toggleMermaidView = useCallback5(() => {
-    setMermaidViewMode((prev) => prev === "preview" ? "source" : "preview");
-  }, []);
-  const copyCode = useCallback5(async () => {
+  const copyTimeoutRef = useRef7(null);
+  const copyCode = useCallback7(async () => {
+    if (!isClipboardAvailable2()) return;
     try {
       await navigator.clipboard.writeText(code);
       setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-    }
-  }, [code]);
-  const doRenderMermaid = useCallback5(async () => {
-    if (!code) return;
-    try {
-      if (!mermaidRef.current) {
-        const mermaidModule = await import("mermaid");
-        mermaidRef.current = mermaidModule.default;
-        mermaidRef.current.initialize({
-          startOnLoad: false,
-          theme: "dark",
-          securityLevel: "loose",
-          suppressErrorRendering: true
-        });
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
       }
-      const mermaid = mermaidRef.current;
-      const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-      const { svg } = await mermaid.render(id, code);
-      setMermaidSvg(svg);
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 2e3);
     } catch {
-      setMermaidSvg("");
-    } finally {
-      setMermaidLoading(false);
     }
   }, [code]);
-  const scheduleRenderMermaid = useCallback5(() => {
-    if (!isMermaid || !code) return;
-    if (mermaidTimerRef.current) {
-      clearTimeout(mermaidTimerRef.current);
-    }
-    setMermaidLoading(true);
-    mermaidTimerRef.current = setTimeout(() => {
-      doRenderMermaid();
-    }, mermaidDelay);
-  }, [isMermaid, code, mermaidDelay, doRenderMermaid]);
-  const doHighlight = useCallback5(async () => {
-    if (isMermaid) {
-      scheduleRenderMermaid();
-      return;
-    }
+  useEffect6(() => {
+    return () => {
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+  const doHighlight = useCallback7(async () => {
     if (!code || disableHighlight) {
       setHighlightedHtml("");
       return;
@@ -1055,20 +1273,60 @@ var IncremarkCode = ({
     } catch {
       setHighlightedHtml("");
     }
-  }, [code, language, fallbackTheme, disableHighlight, isMermaid, highlight, scheduleRenderMermaid]);
-  useEffect4(() => {
+  }, [code, language, fallbackTheme, disableHighlight, highlight]);
+  useEffect6(() => {
     doHighlight();
   }, [doHighlight]);
-  useEffect4(() => {
-    return () => {
-      if (mermaidTimerRef.current) {
-        clearTimeout(mermaidTimerRef.current);
-      }
-    };
-  }, []);
+  return /* @__PURE__ */ jsxs3("div", { className: "incremark-code", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "code-header", children: [
+      /* @__PURE__ */ jsx10("span", { className: "language", children: language }),
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          className: "code-btn",
+          onClick: copyCode,
+          type: "button",
+          "aria-label": copied ? t("code.copied") : t("code.copy"),
+          title: copied ? "Copied!" : "Copy",
+          children: /* @__PURE__ */ jsx10(SvgIcon, { svg: copied ? LucideCopyCheck2 : LucideCopy2 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "code-content", children: isHighlighting && !highlightedHtml ? /* @__PURE__ */ jsx10("div", { className: "code-loading", children: /* @__PURE__ */ jsx10("pre", { children: /* @__PURE__ */ jsx10("code", { children: code }) }) }) : highlightedHtml ? /* @__PURE__ */ jsx10("div", { className: "shiki-wrapper", dangerouslySetInnerHTML: { __html: highlightedHtml } }) : /* @__PURE__ */ jsx10("pre", { className: "code-fallback", children: /* @__PURE__ */ jsx10("code", { children: code }) }) })
+  ] });
+};
+
+// src/components/IncremarkCode.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var IncremarkCode = ({
+  node,
+  theme = "github-dark",
+  fallbackTheme = "github-dark",
+  disableHighlight = false,
+  mermaidDelay = 500,
+  customCodeBlocks,
+  blockStatus = "completed",
+  codeBlockConfigs,
+  defaultCodeComponent: DefaultCodeComponent = IncremarkCodeDefault
+}) => {
+  const language = node.lang || "text";
+  const code = node.value;
+  const isMermaid = language === "mermaid";
+  const CustomCodeBlock = React8.useMemo(() => {
+    const component = customCodeBlocks?.[language];
+    if (!component) return null;
+    const config = codeBlockConfigs?.[language];
+    if (config?.takeOver) {
+      return component;
+    }
+    if (blockStatus !== "completed") {
+      return null;
+    }
+    return component;
+  }, [customCodeBlocks, language, blockStatus, codeBlockConfigs]);
   if (CustomCodeBlock) {
     const config = codeBlockConfigs?.[language];
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx11(
       CustomCodeBlock,
       {
         codeStr: code,
@@ -1079,38 +1337,28 @@ var IncremarkCode = ({
     );
   }
   if (isMermaid) {
-    return /* @__PURE__ */ jsxs2("div", { className: "incremark-mermaid", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "mermaid-header", children: [
-        /* @__PURE__ */ jsx6("span", { className: "language", children: "MERMAID" }),
-        /* @__PURE__ */ jsxs2("div", { className: "mermaid-actions", children: [
-          /* @__PURE__ */ jsx6(
-            "button",
-            {
-              className: "code-btn",
-              onClick: toggleMermaidView,
-              type: "button",
-              disabled: !mermaidSvg,
-              children: mermaidViewMode === "preview" ? "\u6E90\u7801" : "\u9884\u89C8"
-            }
-          ),
-          /* @__PURE__ */ jsx6("button", { className: "code-btn", onClick: copyCode, type: "button", children: copied ? "\u2713 \u5DF2\u590D\u5236" : "\u590D\u5236" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx6("div", { className: "mermaid-content", children: mermaidLoading && !mermaidSvg ? /* @__PURE__ */ jsx6("div", { className: "mermaid-loading", children: /* @__PURE__ */ jsx6("pre", { className: "mermaid-source-code", children: code }) }) : mermaidViewMode === "source" ? /* @__PURE__ */ jsx6("pre", { className: "mermaid-source-code", children: code }) : mermaidSvg ? /* @__PURE__ */ jsx6("div", { className: "mermaid-svg", dangerouslySetInnerHTML: { __html: mermaidSvg } }) : /* @__PURE__ */ jsx6("pre", { className: "mermaid-source-code", children: code }) })
-    ] });
+    return /* @__PURE__ */ jsx11(
+      IncremarkCodeMermaid,
+      {
+        node,
+        mermaidDelay
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "incremark-code", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "code-header", children: [
-      /* @__PURE__ */ jsx6("span", { className: "language", children: language }),
-      /* @__PURE__ */ jsx6("button", { className: "code-btn", onClick: copyCode, type: "button", children: copied ? "\u2713 \u5DF2\u590D\u5236" : "\u590D\u5236" })
-    ] }),
-    /* @__PURE__ */ jsx6("div", { className: "code-content", children: isHighlighting && !highlightedHtml ? /* @__PURE__ */ jsx6("div", { className: "code-loading", children: /* @__PURE__ */ jsx6("pre", { children: /* @__PURE__ */ jsx6("code", { children: code }) }) }) : highlightedHtml ? /* @__PURE__ */ jsx6("div", { className: "shiki-wrapper", dangerouslySetInnerHTML: { __html: highlightedHtml } }) : /* @__PURE__ */ jsx6("pre", { className: "code-fallback", children: /* @__PURE__ */ jsx6("code", { children: code }) }) })
-  ] });
+  return /* @__PURE__ */ jsx11(
+    DefaultCodeComponent,
+    {
+      node,
+      theme,
+      fallbackTheme,
+      disableHighlight
+    }
+  );
 };
 
 // src/components/IncremarkList.tsx
-import React6 from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import React9 from "react";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 function getItemInlineContent(item) {
   const firstChild = item.children[0];
   if (firstChild?.type === "paragraph") {
@@ -1129,13 +1377,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__ */ jsx7(Tag, { className: `incremark-list ${isTaskList ? "task-list" : ""}`, start: node.start || void 0, children: node.children?.map((item, index) => {
+  return /* @__PURE__ */ jsx12(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__ */ jsx7("li", { className: "incremark-list-item task-item", children: /* @__PURE__ */ jsxs3("label", { className: "task-label", children: [
-        /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx12("li", { className: "incremark-list-item task-item", children: /* @__PURE__ */ jsxs4("label", { className: "task-label", children: [
+        /* @__PURE__ */ jsx12(
           "input",
           {
             type: "checkbox",
@@ -1144,43 +1392,43 @@ var IncremarkList = ({ node }) => {
             className: "checkbox"
           }
         ),
-        /* @__PURE__ */ jsx7("span", { className: "task-content", children: /* @__PURE__ */ jsx7(IncremarkInline, { nodes: inlineContent }) })
+        /* @__PURE__ */ jsx12("span", { className: "task-content", children: /* @__PURE__ */ jsx12(IncremarkInline, { nodes: inlineContent }) })
       ] }) }, index);
     }
-    return /* @__PURE__ */ jsxs3("li", { className: "incremark-list-item", children: [
-      /* @__PURE__ */ jsx7(IncremarkInline, { nodes: inlineContent }),
-      blockChildren.map((child, childIndex) => /* @__PURE__ */ jsx7(React6.Fragment, { children: /* @__PURE__ */ jsx7(IncremarkRenderer, { node: child }) }, childIndex))
+    return /* @__PURE__ */ jsxs4("li", { className: "incremark-list-item", children: [
+      /* @__PURE__ */ jsx12(IncremarkInline, { nodes: inlineContent }),
+      blockChildren.map((child, childIndex) => /* @__PURE__ */ jsx12(React9.Fragment, { children: /* @__PURE__ */ jsx12(IncremarkRenderer, { node: child }) }, childIndex))
     ] }, index);
   }) });
 };
 
 // src/components/IncremarkBlockquote.tsx
-import React7 from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import React10 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var IncremarkBlockquote = ({ node }) => {
-  return /* @__PURE__ */ jsx8("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx8(React7.Fragment, { children: /* @__PURE__ */ jsx8(IncremarkRenderer, { node: child }) }, index)) });
+  return /* @__PURE__ */ jsx13("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx13(React10.Fragment, { children: /* @__PURE__ */ jsx13(IncremarkRenderer, { node: child }) }, index)) });
 };
 
 // src/components/IncremarkTable.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 function getCellContent(cell) {
   return cell.children;
 }
 var IncremarkTable = ({ node }) => {
-  return /* @__PURE__ */ jsx9("div", { className: "incremark-table-wrapper", children: /* @__PURE__ */ jsxs4("table", { className: "incremark-table", children: [
-    /* @__PURE__ */ jsx9("thead", { children: node.children?.[0] && /* @__PURE__ */ jsx9("tr", { children: node.children[0].children.map((cell, cellIndex) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx14("div", { className: "incremark-table-wrapper", children: /* @__PURE__ */ jsxs5("table", { className: "incremark-table", children: [
+    /* @__PURE__ */ jsx14("thead", { children: node.children?.[0] && /* @__PURE__ */ jsx14("tr", { children: node.children[0].children.map((cell, cellIndex) => /* @__PURE__ */ jsx14(
       "th",
       {
-        style: { textAlign: node.align?.[cellIndex] || "left" },
-        children: /* @__PURE__ */ jsx9(IncremarkInline, { nodes: getCellContent(cell) })
+        className: `incremark-table-align-${node.align?.[cellIndex] || "left"}`,
+        children: /* @__PURE__ */ jsx14(IncremarkInline, { nodes: getCellContent(cell) })
       },
       cellIndex
     )) }) }),
-    /* @__PURE__ */ jsx9("tbody", { children: node.children?.slice(1).map((row, rowIndex) => /* @__PURE__ */ jsx9("tr", { children: row.children.map((cell, cellIndex) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx14("tbody", { children: node.children?.slice(1).map((row, rowIndex) => /* @__PURE__ */ jsx14("tr", { children: row.children.map((cell, cellIndex) => /* @__PURE__ */ jsx14(
       "td",
       {
-        style: { textAlign: node.align?.[cellIndex] || "left" },
-        children: /* @__PURE__ */ jsx9(IncremarkInline, { nodes: getCellContent(cell) })
+        className: `incremark-table-align-${node.align?.[cellIndex] || "left"}`,
+        children: /* @__PURE__ */ jsx14(IncremarkInline, { nodes: getCellContent(cell) })
       },
       cellIndex
     )) }, rowIndex)) })
@@ -1188,75 +1436,13 @@ var IncremarkTable = ({ node }) => {
 };
 
 // src/components/IncremarkThematicBreak.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var IncremarkThematicBreak = () => {
-  return /* @__PURE__ */ jsx10("hr", { className: "incremark-hr" });
-};
-
-// src/components/IncremarkMath.tsx
-import { useState as useState6, useEffect as useEffect5, useRef as useRef6, useCallback as useCallback6 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var IncremarkMath = ({
-  node,
-  renderDelay = 300
-}) => {
-  const [renderedHtml, setRenderedHtml] = useState6("");
-  const [isLoading, setIsLoading] = useState6(false);
-  const katexRef = useRef6(null);
-  const renderTimerRef = useRef6(null);
-  const isInline = node.type === "inlineMath";
-  const formula = node.value;
-  const doRender = useCallback6(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 = useCallback6(() => {
-    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__ */ jsx11("span", { className: "incremark-math-inline", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx11("span", { dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx11("code", { className: "math-source", children: formula }) });
-  }
-  return /* @__PURE__ */ jsx11("div", { className: "incremark-math-block", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx11("div", { className: "math-rendered", dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx11("pre", { className: "math-source-block", children: /* @__PURE__ */ jsx11("code", { children: formula }) }) });
+  return /* @__PURE__ */ jsx15("hr", { className: "incremark-hr" });
 };
 
 // src/components/IncremarkContainer.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function parseOptions(attributes) {
   if (!attributes) return {};
   const options = {};
@@ -1274,22 +1460,22 @@ var IncremarkContainer = ({ node, customContainers }) => {
   const options = parseOptions(node.attributes);
   const CustomContainer = customContainers?.[containerName];
   if (CustomContainer) {
-    return /* @__PURE__ */ jsx12(CustomContainer, { name: containerName, options, children: node.children?.map((child, index) => /* @__PURE__ */ jsx12(IncremarkRenderer, { node: child }, index)) });
+    return /* @__PURE__ */ jsx16(CustomContainer, { name: containerName, options, children: node.children?.map((child, index) => /* @__PURE__ */ jsx16(IncremarkRenderer, { node: child }, index)) });
   }
-  return /* @__PURE__ */ jsx12("div", { className: `incremark-container incremark-container-${containerName}`, children: node.children && node.children.length > 0 && /* @__PURE__ */ jsx12("div", { className: "incremark-container-content", children: node.children.map((child, index) => /* @__PURE__ */ jsx12(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)) }) });
 };
 
 // src/components/IncremarkDefault.tsx
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
 var IncremarkDefault = ({ node }) => {
-  return /* @__PURE__ */ jsxs5("div", { className: "incremark-default", children: [
-    /* @__PURE__ */ jsx13("span", { className: "type-badge", children: node.type }),
-    /* @__PURE__ */ jsx13("pre", { children: JSON.stringify(node, null, 2) })
+  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) })
   ] });
 };
 
 // src/components/IncremarkRenderer.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var defaultComponents = {
   heading: IncremarkHeading,
   paragraph: IncremarkParagraph,
@@ -1325,10 +1511,10 @@ var IncremarkRenderer = ({
     return null;
   }
   if (isHtmlNode2(node)) {
-    return /* @__PURE__ */ jsx14("pre", { className: "incremark-html-code", children: /* @__PURE__ */ jsx14("code", { children: node.value }) });
+    return /* @__PURE__ */ jsx18("pre", { className: "incremark-html-code", children: /* @__PURE__ */ jsx18("code", { children: node.value }) });
   }
   if (isContainerNode(node)) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx18(
       IncremarkContainer,
       {
         node,
@@ -1337,26 +1523,27 @@ var IncremarkRenderer = ({
     );
   }
   if (node.type === "code") {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx18(
       IncremarkCode,
       {
         node,
         customCodeBlocks,
         codeBlockConfigs,
-        blockStatus
+        blockStatus,
+        defaultCodeComponent: components?.["code"]
       }
     );
   }
   const Component = getComponent(node.type, components);
-  return /* @__PURE__ */ jsx14(Component, { node });
+  return /* @__PURE__ */ jsx18(Component, { node });
 };
 
 // src/components/IncremarkFootnotes.tsx
-import React9 from "react";
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import React11 from "react";
+import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
 var IncremarkFootnotes = () => {
   const { footnoteDefinitions, footnoteReferenceOrder } = useDefinitions();
-  const orderedFootnotes = React9.useMemo(() => {
+  const orderedFootnotes = React11.useMemo(() => {
     return footnoteReferenceOrder.map((identifier) => ({
       identifier,
       definition: footnoteDefinitions[identifier]
@@ -1365,22 +1552,22 @@ var IncremarkFootnotes = () => {
   if (orderedFootnotes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs6("section", { className: "incremark-footnotes", children: [
-    /* @__PURE__ */ jsx15("hr", { className: "incremark-footnotes-divider" }),
-    /* @__PURE__ */ jsx15("ol", { className: "incremark-footnotes-list", children: orderedFootnotes.map((item, index) => /* @__PURE__ */ jsxs6(
+  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(
       "li",
       {
         id: `fn-${item.identifier}`,
         className: "incremark-footnote-item",
         children: [
-          /* @__PURE__ */ jsxs6("div", { className: "incremark-footnote-content", children: [
-            /* @__PURE__ */ jsxs6("span", { className: "incremark-footnote-number", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "incremark-footnote-content", children: [
+            /* @__PURE__ */ jsxs7("span", { className: "incremark-footnote-number", children: [
               index + 1,
               "."
             ] }),
-            /* @__PURE__ */ jsx15("div", { className: "incremark-footnote-body", children: item.definition.children.map((child, childIndex) => /* @__PURE__ */ jsx15(IncremarkRenderer, { node: child }, childIndex)) })
+            /* @__PURE__ */ jsx19("div", { className: "incremark-footnote-body", children: item.definition.children.map((child, childIndex) => /* @__PURE__ */ jsx19(IncremarkRenderer, { node: child }, childIndex)) })
           ] }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx19(
             "a",
             {
               href: `#fnref-${item.identifier}`,
@@ -1397,13 +1584,13 @@ var IncremarkFootnotes = () => {
 };
 
 // src/components/IncremarkContainerProvider.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var IncremarkContainerProvider = ({ children, definitions }) => {
-  return /* @__PURE__ */ jsx16(DefinitionsContext.Provider, { value: definitions, children });
+  return /* @__PURE__ */ jsx20(DefinitionsContext.Provider, { value: definitions, children });
 };
 
 // src/components/Incremark.tsx
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
 var Incremark = (props) => {
   const {
     blocks: propsBlocks,
@@ -1419,7 +1606,7 @@ var Incremark = (props) => {
   } = props;
   if (incremark) {
     const { blocks: blocks2, isDisplayComplete: isDisplayComplete2, _definitionsContextValue } = incremark;
-    return /* @__PURE__ */ jsx17(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx21(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx21(
       IncremarkInternal,
       {
         blocks: blocks2,
@@ -1436,7 +1623,7 @@ var Incremark = (props) => {
   }
   const blocks = propsBlocks || [];
   const isDisplayComplete = propsIsDisplayComplete;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx21(
     IncremarkInternal,
     {
       blocks,
@@ -1463,7 +1650,7 @@ var IncremarkInternal = ({
   completedClass,
   isDisplayComplete
 }) => {
-  return /* @__PURE__ */ jsxs7("div", { className: `incremark ${className}`, children: [
+  return /* @__PURE__ */ jsxs8("div", { className: `incremark ${className}`, children: [
     blocks.map((block) => {
       if (block.node.type === "definition" || block.node.type === "footnoteDefinition") {
         return null;
@@ -1475,7 +1662,7 @@ var IncremarkInternal = ({
         showBlockStatus && "incremark-show-status",
         block.isLastPending && "incremark-last-pending"
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsx17("div", { className: classes, children: /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx21("div", { className: classes, children: /* @__PURE__ */ jsx21(
         IncremarkRenderer,
         {
           node: block.node,
@@ -1487,13 +1674,13 @@ var IncremarkInternal = ({
         }
       ) }, block.id);
     }),
-    isDisplayComplete && /* @__PURE__ */ jsx17(IncremarkFootnotes, {})
+    isDisplayComplete && /* @__PURE__ */ jsx21(IncremarkFootnotes, {})
   ] });
 };
 
 // src/components/IncremarkContent.tsx
-import { useEffect as useEffect6, useRef as useRef7, useMemo as useMemo3, useCallback as useCallback7 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef8, useMemo as useMemo4, useCallback as useCallback8 } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var IncremarkContent = (props) => {
   const {
     stream,
@@ -1507,23 +1694,41 @@ var IncremarkContent = (props) => {
     showBlockStatus,
     pendingClass
   } = props;
-  const initialOptionsRef = useRef7({
+  const initialOptionsRef = useRef8({
     gfm: true,
     htmlTree: true,
     containers: true,
     math: true,
     ...incremarkOptions
   });
-  const { blocks, append, finalize, render, reset, isDisplayComplete, markdown, typewriter, _definitionsContextValue } = useIncremark(initialOptionsRef.current);
-  useEffect6(() => {
-    if (incremarkOptions?.typewriter) {
-      typewriter.setOptions(incremarkOptions.typewriter);
+  const { blocks, append, finalize, render, reset, updateOptions, isDisplayComplete, markdown, typewriter, _definitionsContextValue } = useIncremark(initialOptionsRef.current);
+  const prevOptionsRef = useRef8(incremarkOptions);
+  useEffect7(() => {
+    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
+      });
     }
-  }, [incremarkOptions?.typewriter, typewriter]);
-  const isStreamMode = useMemo3(() => typeof stream === "function", [stream]);
-  const prevContentRef = useRef7(void 0);
-  const isStreamingRef = useRef7(false);
-  const handleStreamInput = useCallback7(async () => {
+    if (current?.typewriter) {
+      typewriter.setOptions(current.typewriter);
+    }
+  }, [incremarkOptions, updateOptions, typewriter]);
+  const isStreamMode = useMemo4(() => typeof stream === "function", [stream]);
+  const prevContentRef = useRef8(void 0);
+  const isStreamingRef = useRef8(false);
+  const handleStreamInput = useCallback8(async () => {
     if (!stream || isStreamingRef.current) return;
     isStreamingRef.current = true;
     try {
@@ -1539,7 +1744,7 @@ var IncremarkContent = (props) => {
       isStreamingRef.current = false;
     }
   }, [stream, append, finalize]);
-  const handleContentInput = useCallback7((newContent, oldContent) => {
+  const handleContentInput = useCallback8((newContent, oldContent) => {
     if (!newContent) {
       if (oldContent) {
         reset();
@@ -1553,7 +1758,7 @@ var IncremarkContent = (props) => {
       render(newContent);
     }
   }, [append, render, reset]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (isStreamMode) {
       handleStreamInput();
     } else {
@@ -1561,12 +1766,12 @@ var IncremarkContent = (props) => {
     }
     prevContentRef.current = content;
   }, [content, isStreamMode, handleStreamInput, handleContentInput]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (isFinished && content === markdown) {
       finalize();
     }
   }, [isFinished, content, markdown, finalize]);
-  return /* @__PURE__ */ jsx18(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx22(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx22(
     Incremark,
     {
       blocks,
@@ -1583,14 +1788,14 @@ var IncremarkContent = (props) => {
 
 // src/components/AutoScrollContainer.tsx
 import {
-  useRef as useRef8,
-  useEffect as useEffect7,
-  useCallback as useCallback8,
-  useState as useState7,
+  useRef as useRef9,
+  useEffect as useEffect8,
+  useCallback as useCallback9,
+  useState as useState8,
   forwardRef,
   useImperativeHandle
 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var AutoScrollContainer = forwardRef(
   ({
     children,
@@ -1600,17 +1805,17 @@ var AutoScrollContainer = forwardRef(
     style,
     className
   }, ref) => {
-    const containerRef = useRef8(null);
-    const [isUserScrolledUp, setIsUserScrolledUp] = useState7(false);
-    const lastScrollTopRef = useRef8(0);
-    const lastScrollHeightRef = useRef8(0);
-    const isNearBottom = useCallback8(() => {
+    const containerRef = useRef9(null);
+    const [isUserScrolledUp, setIsUserScrolledUp] = useState8(false);
+    const lastScrollTopRef = useRef9(0);
+    const lastScrollHeightRef = useRef9(0);
+    const isNearBottom = useCallback9(() => {
       const container = containerRef.current;
       if (!container) return true;
       const { scrollTop, scrollHeight, clientHeight } = container;
       return scrollHeight - scrollTop - clientHeight <= threshold;
     }, [threshold]);
-    const scrollToBottom = useCallback8(
+    const scrollToBottom = useCallback9(
       (force = false) => {
         const container = containerRef.current;
         if (!container) return;
@@ -1622,12 +1827,12 @@ var AutoScrollContainer = forwardRef(
       },
       [isUserScrolledUp, behavior]
     );
-    const hasScrollbar = useCallback8(() => {
+    const hasScrollbar = useCallback9(() => {
       const container = containerRef.current;
       if (!container) return false;
       return container.scrollHeight > container.clientHeight;
     }, []);
-    const handleScroll = useCallback8(() => {
+    const handleScroll = useCallback9(() => {
       const container = containerRef.current;
       if (!container) return;
       const { scrollTop, scrollHeight, clientHeight } = container;
@@ -1649,14 +1854,14 @@ var AutoScrollContainer = forwardRef(
       lastScrollTopRef.current = scrollTop;
       lastScrollHeightRef.current = scrollHeight;
     }, [isNearBottom]);
-    useEffect7(() => {
+    useEffect8(() => {
       const container = containerRef.current;
       if (container) {
         lastScrollTopRef.current = container.scrollTop;
         lastScrollHeightRef.current = container.scrollHeight;
       }
     }, []);
-    useEffect7(() => {
+    useEffect8(() => {
       const container = containerRef.current;
       if (!container || !enabled) return;
       const observer = new MutationObserver(() => {
@@ -1688,16 +1893,12 @@ var AutoScrollContainer = forwardRef(
       }),
       [scrollToBottom, isUserScrolledUp]
     );
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         ref: containerRef,
         className: `auto-scroll-container ${className || ""}`.trim(),
-        style: {
-          overflowY: "auto",
-          height: "100%",
-          ...style
-        },
+        style,
         onScroll: handleScroll,
         children
       }
@@ -1707,21 +1908,21 @@ var AutoScrollContainer = forwardRef(
 AutoScrollContainer.displayName = "AutoScrollContainer";
 
 // src/ThemeProvider.tsx
-import { useEffect as useEffect8, useRef as useRef9 } from "react";
+import { useEffect as useEffect9, useRef as useRef10 } from "react";
 import { applyTheme } from "@incremark/theme";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ThemeProvider = ({
   theme,
   children,
   className = ""
 }) => {
-  const containerRef = useRef9(null);
-  useEffect8(() => {
+  const containerRef = useRef10(null);
+  useEffect9(() => {
     if (containerRef.current) {
       applyTheme(containerRef.current, theme);
     }
   }, [theme]);
-  return /* @__PURE__ */ jsx20("div", { ref: containerRef, className: `incremark-theme-provider ${className}`.trim(), children });
+  return /* @__PURE__ */ jsx24("div", { ref: containerRef, className: `incremark-theme-provider ${className}`.trim(), children });
 };
 
 // src/index.ts
@@ -1747,9 +1948,11 @@ import {
   mergeTheme,
   applyTheme as applyTheme2
 } from "@incremark/theme";
+import { en as enShared, zhCN as zhCNShared } from "@incremark/shared";
 export {
   AutoScrollContainer,
   BlockTransformer2 as BlockTransformer,
+  ConfigProvider,
   DefinitionsProvider,
   Incremark,
   IncremarkContainerProvider,
@@ -1769,6 +1972,7 @@ export {
   darkTheme,
   defaultPlugins2 as defaultPlugins,
   defaultTheme,
+  enShared as en,
   generateCSSVars,
   imagePlugin,
   mathPlugin,
@@ -1779,7 +1983,9 @@ export {
   useBlockTransformer,
   useDefinitions,
   useDevTools,
-  useIncremark
+  useIncremark,
+  useLocale,
+  zhCNShared as zhCN
 };
 /**
  * @file Definitions Context - 管理 Markdown 引用定义