@incremark/react 0.2.6 → 0.3.0

package/dist/index.js

@@ -193,17 +193,7 @@ function useTypewriter(options) {
   }, [sourceBlocks, transformer]);
   const blocks = useMemo(() => {
     if (!typewriterEnabled || !transformer) {
-      const result = [];
-      for (const block of completedBlocks) {
-        result.push({ ...block, stableId: block.id });
-      }
-      for (let i = 0; i < pendingBlocks.length; i++) {
-        result.push({
-          ...pendingBlocks[i],
-          stableId: `pending-${i}`
-        });
-      }
-      return result;
+      return [...completedBlocks, ...pendingBlocks];
     }
     return displayBlocks.map((db, index) => {
       const isPending = !db.isDisplayComplete;
@@ -220,7 +210,6 @@ function useTypewriter(options) {
       }
       const block = {
         id: db.id,
-        stableId: db.id,
         status: db.isDisplayComplete ? "completed" : "pending",
         isLastPending,
         node,
@@ -452,8 +441,8 @@ function useDevTools(incremark, options = {}) {
     devtoolsRef.current = devtools;
     incremark.parser.setOnChange((state) => {
       const blocks = [
-        ...state.completedBlocks.map((b) => ({ ...b, stableId: b.id })),
-        ...state.pendingBlocks.map((b, i) => ({ ...b, stableId: `pending-${i}` }))
+        ...state.completedBlocks,
+        ...state.pendingBlocks
       ];
       devtools.update({
         blocks,
@@ -547,6 +536,44 @@ 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 {
@@ -557,7 +584,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",
@@ -679,22 +706,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 }) => {
@@ -702,13 +729,13 @@ 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__ */ jsx2(Tag, { ...reactProps, className: `incremark-html-element incremark-${tagName} ${reactProps.className || ""}`, children: renderChildren(children) });
+  return /* @__PURE__ */ jsx3(Tag, { ...reactProps, className: `incremark-html-element incremark-${tagName} ${reactProps.className || ""}`, children: renderChildren(children) });
 };
 
 // src/components/IncremarkInline.tsx
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
 function isHtmlElementNode(node) {
   return node.type === "htmlElement";
 }
@@ -721,45 +748,45 @@ 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__ */ jsx4(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: [
           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__ */ jsx4("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__ */ jsx4(React3.Fragment, { children: node.value }, i);
     }
     if (isHtmlElementNode(node)) {
-      return /* @__PURE__ */ jsx3(IncremarkHtmlElement, { node }, i);
+      return /* @__PURE__ */ jsx4(IncremarkHtmlElement, { node }, i);
     }
     if (isHtmlNode(node)) {
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         "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__ */ jsx4("strong", { children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "emphasis") {
-      return /* @__PURE__ */ jsx3("em", { children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx4("em", { children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "inlineCode") {
-      return /* @__PURE__ */ jsx3("code", { className: "incremark-inline-code", children: node.value }, i);
+      return /* @__PURE__ */ jsx4("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__ */ jsx4("a", { href: node.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "image") {
       const imageNode = node;
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         "img",
         {
           src: imageNode.url,
@@ -773,7 +800,7 @@ var IncremarkInline = ({ nodes }) => {
     if (isImageReference(node)) {
       const definition = definitions[node.identifier];
       if (definition) {
-        return /* @__PURE__ */ jsx3(
+        return /* @__PURE__ */ jsx4(
           "img",
           {
             src: definition.url,
@@ -795,14 +822,14 @@ var IncremarkInline = ({ nodes }) => {
     if (isLinkReference(node)) {
       const definition = definitions[node.identifier];
       if (definition) {
-        return /* @__PURE__ */ jsx3(
+        return /* @__PURE__ */ jsx4(
           "a",
           {
             href: definition.url,
             title: definition.title || void 0,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children })
+            children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children })
           },
           i
         );
@@ -818,78 +845,83 @@ 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__ */ 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);
     }
     if (node.type === "break") {
-      return /* @__PURE__ */ jsx3("br", {}, i);
+      return /* @__PURE__ */ jsx4("br", {}, i);
     }
     if (node.type === "delete") {
-      return /* @__PURE__ */ jsx3("del", { children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx4("del", { children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
     }
-    return /* @__PURE__ */ jsx3("span", { children: node.value || "" }, i);
+    return /* @__PURE__ */ jsx4("span", { children: node.value || "" }, i);
   }) });
 };
 
 // src/components/IncremarkHeading.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } 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__ */ jsx5(Tag, { className: `incremark-heading h${node.depth}`, children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) });
 };
 
 // src/components/IncremarkParagraph.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var IncremarkParagraph = ({ node }) => {
-  return /* @__PURE__ */ jsx5("p", { className: "incremark-paragraph", children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) });
+  return /* @__PURE__ */ jsx6("p", { className: "incremark-paragraph", children: /* @__PURE__ */ jsx6(IncremarkInline, { nodes: node.children }) });
 };
 
 // src/components/IncremarkCode.tsx
-import React4, { useState as useState5, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-var IncremarkCode = ({
+import React7 from "react";
+
+// src/components/IncremarkCodeMermaid.tsx
+import { useState as useState5, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } 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";
+var SvgIcon = ({
+  svg,
+  sizeClass,
+  className
+}) => {
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      className: `incremark-icon ${sizeClass || ""} ${className || ""}`.trim(),
+      dangerouslySetInnerHTML: { __html: svg },
+      "aria-hidden": "true"
+    }
+  );
+};
+
+// src/components/IncremarkCodeMermaid.tsx
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var IncremarkCodeMermaid = ({
   node,
-  theme = "github-dark",
-  fallbackTheme = "github-dark",
-  disableHighlight = false,
-  mermaidDelay = 500,
-  customCodeBlocks,
-  blockStatus = "completed",
-  codeBlockConfigs
+  mermaidDelay = 500
 }) => {
   const [copied, setCopied] = useState5(false);
-  const [highlightedHtml, setHighlightedHtml] = useState5("");
-  const [isHighlighting, setIsHighlighting] = useState5(false);
+  const { t } = useLocale();
   const [mermaidSvg, setMermaidSvg] = useState5("");
   const [mermaidLoading, setMermaidLoading] = useState5(false);
   const [mermaidViewMode, setMermaidViewMode] = useState5("preview");
   const mermaidRef = useRef5(null);
-  const highlighterRef = useRef5(null);
   const mermaidTimerRef = useRef5(null);
-  const loadedLanguagesRef = useRef5(/* @__PURE__ */ new Set());
-  const loadedThemesRef = useRef5(/* @__PURE__ */ new Set());
-  const language = node.lang || "text";
+  const copyTimeoutRef = useRef5(null);
   const code = node.value;
-  const isMermaid = language === "mermaid";
-  const CustomCodeBlock = React4.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 () => {
+    if (!isClipboardAvailable()) return;
     try {
       await navigator.clipboard.writeText(code);
       setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 2e3);
     } catch {
     }
   }, [code]);
@@ -902,7 +934,8 @@ var IncremarkCode = ({
         mermaidRef.current.initialize({
           startOnLoad: false,
           theme: "dark",
-          securityLevel: "loose"
+          securityLevel: "loose",
+          suppressErrorRendering: true
         });
       }
       const mermaid = mermaidRef.current;
@@ -916,7 +949,7 @@ var IncremarkCode = ({
     }
   }, [code]);
   const scheduleRenderMermaid = useCallback5(() => {
-    if (!isMermaid || !code) return;
+    if (!code) return;
     if (mermaidTimerRef.current) {
       clearTimeout(mermaidTimerRef.current);
     }
@@ -924,66 +957,293 @@ var IncremarkCode = ({
     mermaidTimerRef.current = setTimeout(() => {
       doRenderMermaid();
     }, mermaidDelay);
-  }, [isMermaid, code, mermaidDelay, doRenderMermaid]);
-  const highlight = useCallback5(async () => {
-    if (isMermaid) {
-      scheduleRenderMermaid();
-      return;
+  }, [code, mermaidDelay, doRenderMermaid]);
+  useEffect4(() => {
+    scheduleRenderMermaid();
+  }, [scheduleRenderMermaid]);
+  useEffect4(() => {
+    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__ */ jsx8(SvgIcon, { svg: GravityMermaid, className: "language-icon" }),
+        "MERMAID"
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "mermaid-actions", children: [
+        /* @__PURE__ */ jsx8(
+          "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__ */ jsx8(SvgIcon, { svg: mermaidViewMode === "preview" ? LucideCode : LucideEye })
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            className: "code-btn",
+            onClick: copyCode,
+            type: "button",
+            "aria-label": copied ? t("mermaid.copied") : t("mermaid.copy"),
+            title: copied ? "Copied!" : "Copy",
+            children: /* @__PURE__ */ jsx8(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 }) })
+  ] });
+};
+
+// src/components/IncremarkCodeDefault.tsx
+import { useState as useState6, useEffect as useEffect5, useCallback as useCallback6, useRef as useRef6 } 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";
+var ShikiManager = class _ShikiManager {
+  static instance = null;
+  /** 存储 highlighter 实例，key 为主题名称 */
+  highlighters = /* @__PURE__ */ new Map();
+  constructor() {
+  }
+  static getInstance() {
+    if (!_ShikiManager.instance) {
+      _ShikiManager.instance = new _ShikiManager();
     }
-    if (!code || disableHighlight) {
-      setHighlightedHtml("");
-      return;
+    return _ShikiManager.instance;
+  }
+  /**
+   * 获取或创建 highlighter
+   * @param theme 主题名称
+   * @returns highlighter 实例
+   */
+  async getHighlighter(theme) {
+    if (this.highlighters.has(theme)) {
+      return this.highlighters.get(theme);
     }
-    setIsHighlighting(true);
+    const { createHighlighter } = await import("shiki");
+    const highlighter = await createHighlighter({
+      themes: [theme],
+      langs: []
+    });
+    const info = {
+      highlighter,
+      loadedLanguages: /* @__PURE__ */ new Set(),
+      loadedThemes: /* @__PURE__ */ new Set([theme])
+    };
+    this.highlighters.set(theme, info);
+    return info;
+  }
+  /**
+   * 加载语言（按需）
+   * @param theme 主题名称
+   * @param lang 语言名称
+   */
+  async loadLanguage(theme, lang) {
+    const info = this.highlighters.get(theme);
+    if (!info || info.loadedLanguages.has(lang)) return;
     try {
-      if (!highlighterRef.current) {
-        const { createHighlighter } = await import("shiki");
-        highlighterRef.current = await createHighlighter({
-          themes: [theme],
-          langs: []
-        });
-        loadedThemesRef.current.add(theme);
+      await info.highlighter.loadLanguage(lang);
+      info.loadedLanguages.add(lang);
+    } catch {
+    }
+  }
+  /**
+   * 加载主题（按需）
+   * @param theme 主题名称
+   */
+  async loadTheme(theme) {
+    const info = this.highlighters.get(theme);
+    if (!info || info.loadedThemes.has(theme)) return;
+    try {
+      await info.highlighter.loadTheme(theme);
+      info.loadedThemes.add(theme);
+    } catch {
+    }
+  }
+  /**
+   * 高亮代码
+   * @param theme 主题名称
+   * @param code 代码内容
+   * @param lang 语言名称
+   * @param fallbackTheme 回退主题
+   * @returns 高亮后的 HTML
+   */
+  async codeToHtml(theme, code, lang, fallbackTheme) {
+    const info = this.highlighters.get(theme);
+    if (!info) throw new Error("Highlighter not found");
+    const actualLang = info.loadedLanguages.has(lang) ? lang : "text";
+    const actualTheme = info.loadedThemes.has(theme) ? theme : fallbackTheme;
+    return info.highlighter.codeToHtml(code, {
+      lang: actualLang,
+      theme: actualTheme
+    });
+  }
+  /**
+   * 清理所有 highlighter（应用退出或需要重置时调用）
+   */
+  disposeAll() {
+    for (const [, info] of this.highlighters) {
+      if (info.highlighter?.dispose) {
+        info.highlighter.dispose();
       }
-      const highlighter = highlighterRef.current;
-      const lang = language;
-      if (!loadedLanguagesRef.current.has(lang) && lang !== "text") {
-        try {
-          await highlighter.loadLanguage(lang);
-          loadedLanguagesRef.current.add(lang);
-        } catch {
-        }
+    }
+    this.highlighters.clear();
+  }
+};
+var shikiManagerInstance = null;
+function getShikiManager() {
+  if (!shikiManagerInstance) {
+    shikiManagerInstance = ShikiManager.getInstance();
+  }
+  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);
+    }
+    return highlighterInfoRef.current;
+  }, [theme]);
+  const highlight = React5.useCallback(async (code, lang, fallbackTheme) => {
+    setIsHighlighting(true);
+    try {
+      const info = await getHighlighter();
+      const manager = getShikiManager();
+      if (!info.loadedLanguages.has(lang) && lang !== "text") {
+        await manager.loadLanguage(theme, lang);
       }
-      if (!loadedThemesRef.current.has(theme)) {
-        try {
-          await highlighter.loadTheme(theme);
-          loadedThemesRef.current.add(theme);
-        } catch {
-        }
+      if (!info.loadedThemes.has(theme)) {
+        await manager.loadTheme(theme);
       }
-      const html = highlighter.codeToHtml(code, {
-        lang: loadedLanguagesRef.current.has(lang) ? lang : "text",
-        theme: loadedThemesRef.current.has(theme) ? theme : fallbackTheme
-      });
-      setHighlightedHtml(html);
-    } catch {
-      setHighlightedHtml("");
+      return await manager.codeToHtml(theme, code, lang, fallbackTheme);
+    } catch (e) {
+      throw e;
     } finally {
       setIsHighlighting(false);
     }
-  }, [code, language, theme, fallbackTheme, disableHighlight, isMermaid, scheduleRenderMermaid]);
-  useEffect4(() => {
-    highlight();
-  }, [highlight]);
-  useEffect4(() => {
+  }, [getHighlighter, theme]);
+  return {
+    isHighlighting,
+    highlight
+  };
+}
+
+// src/components/IncremarkCodeDefault.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var IncremarkCodeDefault = ({
+  node,
+  theme = "github-dark",
+  fallbackTheme = "github-dark",
+  disableHighlight = false
+}) => {
+  const [copied, setCopied] = useState6(false);
+  const [highlightedHtml, setHighlightedHtml] = useState6("");
+  const language = node.lang || "text";
+  const code = node.value;
+  const { t } = useLocale();
+  const { isHighlighting, highlight } = useShiki(theme);
+  const copyTimeoutRef = useRef6(null);
+  const copyCode = useCallback6(async () => {
+    if (!isClipboardAvailable2()) return;
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [code]);
+  useEffect5(() => {
     return () => {
-      if (mermaidTimerRef.current) {
-        clearTimeout(mermaidTimerRef.current);
+      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(
+        "button",
+        {
+          className: "code-btn",
+          onClick: copyCode,
+          type: "button",
+          "aria-label": copied ? t("code.copied") : t("code.copy"),
+          title: copied ? "Copied!" : "Copy",
+          children: /* @__PURE__ */ jsx9(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 }) }) })
+  ] });
+};
+
+// src/components/IncremarkCode.tsx
+import { jsx as jsx10 } 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 = React7.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__ */ jsx10(
       CustomCodeBlock,
       {
         codeStr: code,
@@ -994,38 +1254,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__ */ jsx10(
+      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__ */ jsx10(
+    DefaultCodeComponent,
+    {
+      node,
+      theme,
+      fallbackTheme,
+      disableHighlight
+    }
+  );
 };
 
 // src/components/IncremarkList.tsx
-import React5 from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import React8 from "react";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 function getItemInlineContent(item) {
   const firstChild = item.children[0];
   if (firstChild?.type === "paragraph") {
@@ -1044,13 +1294,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" : ""}`, children: node.children?.map((item, index) => {
+  return /* @__PURE__ */ jsx11(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__ */ jsx11("li", { className: "incremark-list-item task-item", children: /* @__PURE__ */ jsxs4("label", { className: "task-label", children: [
+        /* @__PURE__ */ jsx11(
           "input",
           {
             type: "checkbox",
@@ -1059,43 +1309,43 @@ var IncremarkList = ({ node }) => {
             className: "checkbox"
           }
         ),
-        /* @__PURE__ */ jsx7("span", { className: "task-content", children: /* @__PURE__ */ jsx7(IncremarkInline, { nodes: inlineContent }) })
+        /* @__PURE__ */ jsx11("span", { className: "task-content", children: /* @__PURE__ */ jsx11(IncremarkInline, { nodes: inlineContent }) })
       ] }) }, index);
     }
-    return /* @__PURE__ */ jsxs3("li", { className: "incremark-list-item", children: [
-      /* @__PURE__ */ jsx7(IncremarkInline, { nodes: inlineContent }),
-      blockChildren.map((child, childIndex) => /* @__PURE__ */ jsx7(React5.Fragment, { children: /* @__PURE__ */ jsx7(IncremarkRenderer, { node: child }) }, childIndex))
+    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))
     ] }, index);
   }) });
 };
 
 // src/components/IncremarkBlockquote.tsx
-import React6 from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import React9 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var IncremarkBlockquote = ({ node }) => {
-  return /* @__PURE__ */ jsx8("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx8(React6.Fragment, { children: /* @__PURE__ */ jsx8(IncremarkRenderer, { node: child }) }, index)) });
+  return /* @__PURE__ */ jsx12("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx12(React9.Fragment, { children: /* @__PURE__ */ jsx12(IncremarkRenderer, { node: child }) }, index)) });
 };
 
 // src/components/IncremarkTable.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, 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__ */ 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(
       "th",
       {
-        style: { textAlign: node.align?.[cellIndex] || "left" },
-        children: /* @__PURE__ */ jsx9(IncremarkInline, { nodes: getCellContent(cell) })
+        className: `incremark-table-align-${node.align?.[cellIndex] || "left"}`,
+        children: /* @__PURE__ */ jsx13(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__ */ jsx13("tbody", { children: node.children?.slice(1).map((row, rowIndex) => /* @__PURE__ */ jsx13("tr", { children: row.children.map((cell, cellIndex) => /* @__PURE__ */ jsx13(
       "td",
       {
-        style: { textAlign: node.align?.[cellIndex] || "left" },
-        children: /* @__PURE__ */ jsx9(IncremarkInline, { nodes: getCellContent(cell) })
+        className: `incremark-table-align-${node.align?.[cellIndex] || "left"}`,
+        children: /* @__PURE__ */ jsx13(IncremarkInline, { nodes: getCellContent(cell) })
       },
       cellIndex
     )) }, rowIndex)) })
@@ -1103,25 +1353,25 @@ var IncremarkTable = ({ node }) => {
 };
 
 // src/components/IncremarkThematicBreak.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var IncremarkThematicBreak = () => {
-  return /* @__PURE__ */ jsx10("hr", { className: "incremark-hr" });
+  return /* @__PURE__ */ jsx14("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";
+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] = useState6("");
-  const [isLoading, setIsLoading] = useState6(false);
-  const katexRef = useRef6(null);
-  const renderTimerRef = useRef6(null);
+  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 = useCallback6(async () => {
+  const doRender = useCallback7(async () => {
     if (!formula) return;
     try {
       if (!katexRef.current) {
@@ -1141,7 +1391,7 @@ var IncremarkMath = ({
       setIsLoading(false);
     }
   }, [formula, isInline]);
-  const scheduleRender = useCallback6(() => {
+  const scheduleRender = useCallback7(() => {
     if (!formula) {
       setRenderedHtml("");
       return;
@@ -1154,10 +1404,10 @@ var IncremarkMath = ({
       doRender();
     }, renderDelay);
   }, [formula, renderDelay, doRender]);
-  useEffect5(() => {
+  useEffect6(() => {
     scheduleRender();
   }, [scheduleRender]);
-  useEffect5(() => {
+  useEffect6(() => {
     return () => {
       if (renderTimerRef.current) {
         clearTimeout(renderTimerRef.current);
@@ -1165,13 +1415,13 @@ var IncremarkMath = ({
     };
   }, []);
   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__ */ 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__ */ 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("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 }) }) });
 };
 
 // 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 = {};
@@ -1189,22 +1439,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,
@@ -1240,10 +1490,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,
@@ -1252,26 +1502,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 React8 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 = React8.useMemo(() => {
+  const orderedFootnotes = React11.useMemo(() => {
     return footnoteReferenceOrder.map((identifier) => ({
       identifier,
       definition: footnoteDefinitions[identifier]
@@ -1280,22 +1531,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}`,
@@ -1312,13 +1563,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,
@@ -1328,11 +1579,13 @@ var Incremark = (props) => {
     customCodeBlocks,
     showBlockStatus = true,
     className = "",
+    pendingClass = "incremark-pending",
+    completedClass = "incremark-completed",
     incremark
   } = 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,
@@ -1341,13 +1594,15 @@ var Incremark = (props) => {
         customCodeBlocks,
         showBlockStatus,
         className,
+        pendingClass,
+        completedClass,
         isDisplayComplete: isDisplayComplete2
       }
     ) });
   }
   const blocks = propsBlocks || [];
   const isDisplayComplete = propsIsDisplayComplete;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx21(
     IncremarkInternal,
     {
       blocks,
@@ -1356,6 +1611,8 @@ var Incremark = (props) => {
       customCodeBlocks,
       showBlockStatus,
       className,
+      pendingClass,
+      completedClass,
       isDisplayComplete
     }
   );
@@ -1368,9 +1625,11 @@ var IncremarkInternal = ({
   codeBlockConfigs,
   showBlockStatus,
   className,
+  pendingClass,
+  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;
@@ -1378,11 +1637,11 @@ var IncremarkInternal = ({
       const isPending = block.status === "pending";
       const classes = [
         "incremark-block",
-        isPending ? "incremark-pending" : "incremark-completed",
+        isPending ? pendingClass : completedClass,
         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,
@@ -1392,22 +1651,112 @@ var IncremarkInternal = ({
           codeBlockConfigs,
           blockStatus: block.status
         }
-      ) }, block.stableId);
+      ) }, block.id);
     }),
-    isDisplayComplete && /* @__PURE__ */ jsx17(IncremarkFootnotes, {})
+    isDisplayComplete && /* @__PURE__ */ jsx21(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";
+var IncremarkContent = (props) => {
+  const {
+    stream,
+    content,
+    components,
+    customContainers,
+    customCodeBlocks,
+    codeBlockConfigs,
+    isFinished = false,
+    incremarkOptions,
+    showBlockStatus,
+    pendingClass
+  } = props;
+  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);
+  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 handleStreamInput = useCallback8(async () => {
+    if (!stream || isStreamingRef.current) return;
+    isStreamingRef.current = true;
+    try {
+      const streamGen = stream();
+      for await (const chunk of streamGen) {
+        append(chunk);
+      }
+      finalize();
+    } catch (error) {
+      console.error("Stream error: ", error);
+      finalize();
+    } finally {
+      isStreamingRef.current = false;
+    }
+  }, [stream, append, finalize]);
+  const handleContentInput = useCallback8((newContent, oldContent) => {
+    if (!newContent) {
+      if (oldContent) {
+        reset();
+      }
+      return;
+    }
+    if (newContent?.startsWith(oldContent ?? "")) {
+      const delta = newContent.slice((oldContent || "").length);
+      append(delta);
+    } else {
+      render(newContent);
+    }
+  }, [append, render, reset]);
+  useEffect7(() => {
+    if (isStreamMode) {
+      handleStreamInput();
+    } else {
+      handleContentInput(content, prevContentRef.current);
+    }
+    prevContentRef.current = content;
+  }, [content, isStreamMode, handleStreamInput, handleContentInput]);
+  useEffect7(() => {
+    if (isFinished && content === markdown) {
+      finalize();
+    }
+  }, [isFinished, content, markdown, finalize]);
+  return /* @__PURE__ */ jsx22(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx22(
+    Incremark,
+    {
+      blocks,
+      isDisplayComplete,
+      showBlockStatus,
+      pendingClass,
+      components,
+      customContainers,
+      customCodeBlocks,
+      codeBlockConfigs
+    }
+  ) });
+};
+
 // src/components/AutoScrollContainer.tsx
 import {
-  useRef as useRef7,
-  useEffect as useEffect6,
-  useCallback as useCallback7,
-  useState as useState7,
+  useRef as useRef9,
+  useEffect as useEffect8,
+  useCallback as useCallback9,
+  useState as useState8,
   forwardRef,
   useImperativeHandle
 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var AutoScrollContainer = forwardRef(
   ({
     children,
@@ -1417,17 +1766,17 @@ var AutoScrollContainer = forwardRef(
     style,
     className
   }, ref) => {
-    const containerRef = useRef7(null);
-    const [isUserScrolledUp, setIsUserScrolledUp] = useState7(false);
-    const lastScrollTopRef = useRef7(0);
-    const lastScrollHeightRef = useRef7(0);
-    const isNearBottom = useCallback7(() => {
+    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 = useCallback7(
+    const scrollToBottom = useCallback9(
       (force = false) => {
         const container = containerRef.current;
         if (!container) return;
@@ -1439,12 +1788,12 @@ var AutoScrollContainer = forwardRef(
       },
       [isUserScrolledUp, behavior]
     );
-    const hasScrollbar = useCallback7(() => {
+    const hasScrollbar = useCallback9(() => {
       const container = containerRef.current;
       if (!container) return false;
       return container.scrollHeight > container.clientHeight;
     }, []);
-    const handleScroll = useCallback7(() => {
+    const handleScroll = useCallback9(() => {
       const container = containerRef.current;
       if (!container) return;
       const { scrollTop, scrollHeight, clientHeight } = container;
@@ -1466,14 +1815,14 @@ var AutoScrollContainer = forwardRef(
       lastScrollTopRef.current = scrollTop;
       lastScrollHeightRef.current = scrollHeight;
     }, [isNearBottom]);
-    useEffect6(() => {
+    useEffect8(() => {
       const container = containerRef.current;
       if (container) {
         lastScrollTopRef.current = container.scrollTop;
         lastScrollHeightRef.current = container.scrollHeight;
       }
     }, []);
-    useEffect6(() => {
+    useEffect8(() => {
       const container = containerRef.current;
       if (!container || !enabled) return;
       const observer = new MutationObserver(() => {
@@ -1505,16 +1854,12 @@ var AutoScrollContainer = forwardRef(
       }),
       [scrollToBottom, isUserScrolledUp]
     );
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         ref: containerRef,
         className: `auto-scroll-container ${className || ""}`.trim(),
-        style: {
-          overflowY: "auto",
-          height: "100%",
-          ...style
-        },
+        style,
         onScroll: handleScroll,
         children
       }
@@ -1524,21 +1869,21 @@ var AutoScrollContainer = forwardRef(
 AutoScrollContainer.displayName = "AutoScrollContainer";
 
 // src/ThemeProvider.tsx
-import { useEffect as useEffect7, useRef as useRef8 } from "react";
+import { useEffect as useEffect9, useRef as useRef10 } from "react";
 import { applyTheme } from "@incremark/theme";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ThemeProvider = ({
   theme,
   children,
   className = ""
 }) => {
-  const containerRef = useRef8(null);
-  useEffect7(() => {
+  const containerRef = useRef10(null);
+  useEffect9(() => {
     if (containerRef.current) {
       applyTheme(containerRef.current, theme);
     }
   }, [theme]);
-  return /* @__PURE__ */ jsx19("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
@@ -1564,12 +1909,15 @@ 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,
+  IncremarkContent,
   IncremarkFootnotes,
   IncremarkHtmlElement,
   IncremarkInline,
@@ -1585,6 +1933,7 @@ export {
   darkTheme,
   defaultPlugins2 as defaultPlugins,
   defaultTheme,
+  enShared as en,
   generateCSSVars,
   imagePlugin,
   mathPlugin,
@@ -1595,7 +1944,9 @@ export {
   useBlockTransformer,
   useDefinitions,
   useDevTools,
-  useIncremark
+  useIncremark,
+  useLocale,
+  zhCNShared as zhCN
 };
 /**
  * @file Definitions Context - 管理 Markdown 引用定义