@incremark/react 0.2.6 → 0.2.7

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ParserOptions, AnimationEffect, TransformerPlugin, ParsedBlock, Root, IncrementalUpdate, IncremarkParser, SourceBlock, TransformerOptions, DisplayBlock, BlockTransformer } from '@incremark/core';
 export { AnimationEffect, BlockTransformer, DisplayBlock, IncrementalUpdate, ParsedBlock, ParserOptions, Root, RootContent, SourceBlock, TransformerOptions, TransformerPlugin, TransformerState, allPlugins, cloneNode, codeBlockPlugin, countChars, createBlockTransformer, createPlugin, defaultPlugins, imagePlugin, mathPlugin, mermaidPlugin, sliceAst, thematicBreakPlugin } from '@incremark/core';
-import React, { ReactNode } from 'react';
+import React$1, { ReactNode, ComponentType } from 'react';
 import { Definition, FootnoteDefinition, RootContent, PhrasingContent } from 'mdast';
 import * as _incremark_devtools from '@incremark/devtools';
 import { DevToolsOptions } from '@incremark/devtools';
@@ -69,7 +69,7 @@ interface DefinitionsProviderProps {
  * }
  * ```
  */
-declare const DefinitionsProvider: React.FC<DefinitionsProviderProps>;
+declare const DefinitionsProvider: React$1.FC<DefinitionsProviderProps>;
 /**
  * useDefinitions Hook
  *
@@ -111,10 +111,9 @@ interface UseIncremarkOptions extends ParserOptions {
     /** 打字机配置，传入即创建 transformer（可通过 enabled 控制是否启用） */
     typewriter?: TypewriterOptions;
 }
-interface BlockWithStableId$1 extends ParsedBlock {
-    stableId: string;
+type RenderableBlock = ParsedBlock & {
     isLastPending?: boolean;
-}
+};
 /** 打字机控制对象 */
 interface TypewriterControls {
     /** 是否启用 */
@@ -175,7 +174,7 @@ declare function useIncremark(options?: UseIncremarkOptions): {
     /** 当前完整的 AST */
     ast: Root;
     /** 用于渲染的 blocks（根据打字机设置自动处理） */
-    blocks: BlockWithStableId$1[];
+    blocks: RenderableBlock[];
     /** 是否正在加载 */
     isLoading: boolean;
     /** 是否已完成（finalize） */
@@ -294,10 +293,41 @@ interface UseBlockTransformerReturn<T = unknown> {
  */
 declare function useBlockTransformer<T = unknown>(sourceBlocks: SourceBlock<T>[], options?: UseBlockTransformerOptions): UseBlockTransformerReturn<T>;
 
-interface BlockWithStableId extends ParsedBlock {
-    stableId: string;
-    isLastPending?: boolean;
+type ComponentMap = Partial<Record<string, ComponentType<{
+    node: any;
+}>>>;
+/**
+ * 代码块配置
+ */
+interface CodeBlockConfig$1 {
+    /** 是否从一开始就接管渲染，而不是等到 completed 状态 */
+    takeOver?: boolean;
+}
+interface IncremarkContentProps {
+    stream?: () => AsyncGenerator<string>;
+    content?: string;
+    components?: ComponentMap;
+    /** 自定义容器组件映射，key 为容器名称（如 'warning', 'info'） */
+    customContainers?: Record<string, ComponentType<{
+        name: string;
+        options?: Record<string, any>;
+        children?: React.ReactNode;
+    }>>;
+    /** 自定义代码块组件映射，key 为代码语言名称（如 'echart', 'mermaid'） */
+    customCodeBlocks?: Record<string, ComponentType<{
+        codeStr: string;
+        lang?: string;
+        completed?: boolean;
+        takeOver?: boolean;
+    }>>;
+    /** 代码块配置映射，key 为代码语言名称 */
+    codeBlockConfigs?: Record<string, CodeBlockConfig$1>;
+    isFinished?: boolean;
+    incremarkOptions?: UseIncremarkOptions;
+    pendingClass?: string;
+    showBlockStatus?: boolean;
 }
+
 /**
  * 代码块配置
  */
@@ -307,22 +337,22 @@ interface CodeBlockConfig {
 }
 interface IncremarkProps {
     /** 要渲染的块列表 */
-    blocks?: BlockWithStableId[];
+    blocks?: RenderableBlock[];
     /** 内容是否完全显示完成（用于控制脚注等需要在内容完全显示后才出现的元素）
      * 如果传入了 incremark，则会自动使用 incremark.isDisplayComplete，此 prop 被忽略 */
     isDisplayComplete?: boolean;
     /** 自定义组件映射 */
-    components?: Partial<Record<string, React.ComponentType<{
+    components?: Partial<Record<string, React$1.ComponentType<{
         node: any;
     }>>>;
     /** 自定义容器组件映射，key 为容器名称（如 'warning', 'info'） */
-    customContainers?: Record<string, React.ComponentType<{
+    customContainers?: Record<string, React$1.ComponentType<{
         name: string;
         options?: Record<string, any>;
-        children?: React.ReactNode;
+        children?: React$1.ReactNode;
     }>>;
     /** 自定义代码块组件映射，key 为代码语言名称（如 'echart', 'mermaid'） */
-    customCodeBlocks?: Record<string, React.ComponentType<{
+    customCodeBlocks?: Record<string, React$1.ComponentType<{
         codeStr: string;
         lang?: string | undefined;
         completed?: boolean | undefined;
@@ -334,6 +364,10 @@ interface IncremarkProps {
     showBlockStatus?: boolean;
     /** 自定义类名 */
     className?: string;
+    /** 待处理块的样式类名 */
+    pendingClass?: string;
+    /** 已完成块的样式类名 */
+    completedClass?: string;
     /** 可选：useIncremark 返回的对象（用于自动提供 context） */
     incremark?: UseIncremarkReturn;
 }
@@ -351,7 +385,26 @@ interface IncremarkProps {
  * }
  * ```
  */
-declare const Incremark: React.FC<IncremarkProps>;
+declare const Incremark: React$1.FC<IncremarkProps>;
+
+/**
+ * IncremarkContent 组件
+ *
+ * 提供开箱即用的 Markdown 渲染体验，自动处理流式内容和普通内容
+ *
+ * @example
+ * ```tsx
+ * // 普通内容
+ * <IncremarkContent content={markdownString} />
+ *
+ * // 流式内容
+ * <IncremarkContent stream={() => streamGenerator()} />
+ *
+ * // 增量更新内容
+ * <IncremarkContent content={partialContent} isFinished={false} />
+ * ```
+ */
+declare const IncremarkContent: React$1.FC<IncremarkContentProps>;
 
 /**
  * 容器节点类型定义
@@ -366,15 +419,15 @@ interface ContainerNode {
 
 interface IncremarkRendererProps {
     node: RootContent | ContainerNode;
-    components?: Partial<Record<string, React.ComponentType<{
+    components?: Partial<Record<string, React$1.ComponentType<{
         node: any;
     }>>>;
-    customContainers?: Record<string, React.ComponentType<{
+    customContainers?: Record<string, React$1.ComponentType<{
         name: string;
         options?: Record<string, any>;
         children?: ReactNode;
     }>>;
-    customCodeBlocks?: Record<string, React.ComponentType<{
+    customCodeBlocks?: Record<string, React$1.ComponentType<{
         codeStr: string;
         lang?: string;
         completed?: boolean;
@@ -388,11 +441,11 @@ interface IncremarkRendererProps {
 /**
  * 渲染单个 AST 节点
  */
-declare const IncremarkRenderer: React.FC<IncremarkRendererProps>;
+declare const IncremarkRenderer: React$1.FC<IncremarkRendererProps>;
 
 interface AutoScrollContainerProps {
     /** 子元素 */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /** 是否启用自动滚动 */
     enabled?: boolean;
     /** 触发自动滚动的底部阈值（像素） */
@@ -400,7 +453,7 @@ interface AutoScrollContainerProps {
     /** 滚动行为 */
     behavior?: ScrollBehavior;
     /** 容器样式 */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     /** 容器类名 */
     className?: string;
 }
@@ -430,7 +483,7 @@ interface AutoScrollContainerRef {
  * scrollRef.current?.scrollToBottom()
  * ```
  */
-declare const AutoScrollContainer: React.ForwardRefExoticComponent<AutoScrollContainerProps & React.RefAttributes<AutoScrollContainerRef>>;
+declare const AutoScrollContainer: React$1.ForwardRefExoticComponent<AutoScrollContainerProps & React$1.RefAttributes<AutoScrollContainerRef>>;
 
 interface IncremarkInlineProps {
     nodes: PhrasingContent[];
@@ -450,7 +503,7 @@ interface IncremarkInlineProps {
  *
  * 注意：此组件与 Vue 版本保持完全一致的逻辑和结构
  */
-declare const IncremarkInline: React.FC<IncremarkInlineProps>;
+declare const IncremarkInline: React$1.FC<IncremarkInlineProps>;
 
 /**
  * HtmlElementNode 类型定义（与 @incremark/core 中的定义一致）
@@ -474,7 +527,7 @@ interface IncremarkHtmlElementProps {
  *
  * 渲染结构化的 HTML 元素节点
  */
-declare const IncremarkHtmlElement: React.FC<IncremarkHtmlElementProps>;
+declare const IncremarkHtmlElement: React$1.FC<IncremarkHtmlElementProps>;
 
 /**
  * 脚注列表组件
@@ -501,7 +554,7 @@ declare const IncremarkHtmlElement: React.FC<IncremarkHtmlElementProps>;
  * <IncremarkFootnotes />
  * ```
  */
-declare const IncremarkFootnotes: React.FC;
+declare const IncremarkFootnotes: React$1.FC;
 
 /**
  * @file IncremarkContainerProvider - Incremark 容器级 Provider
@@ -533,7 +586,7 @@ interface IncremarkContainerProviderProps {
  * @param props - 组件参数
  * @returns ReactElement
  */
-declare const IncremarkContainerProvider: React.FC<IncremarkContainerProviderProps>;
+declare const IncremarkContainerProvider: React$1.FC<IncremarkContainerProviderProps>;
 
 interface ThemeProviderProps {
     /** 主题配置，可以是：
@@ -565,6 +618,6 @@ interface ThemeProviderProps {
  * </ThemeProvider>
  * ```
  */
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
 
-export { AutoScrollContainer, type AutoScrollContainerProps, type AutoScrollContainerRef, type DefinitionsContextValue, DefinitionsProvider, type DefinitionsProviderProps, type HtmlElementNode, Incremark, IncremarkContainerProvider, type IncremarkContainerProviderProps, IncremarkFootnotes, IncremarkHtmlElement, type IncremarkHtmlElementProps, IncremarkInline, type IncremarkInlineProps, type IncremarkProps, IncremarkRenderer, type IncremarkRendererProps, ThemeProvider, type ThemeProviderProps, type TypewriterControls, type TypewriterOptions, type UseBlockTransformerOptions, type UseBlockTransformerReturn, type UseDevToolsOptions, type UseIncremarkOptions, type UseIncremarkReturn, useBlockTransformer, useDefinitions, useDevTools, useIncremark };
+export { AutoScrollContainer, type AutoScrollContainerProps, type AutoScrollContainerRef, type DefinitionsContextValue, DefinitionsProvider, type DefinitionsProviderProps, type HtmlElementNode, Incremark, IncremarkContainerProvider, type IncremarkContainerProviderProps, IncremarkContent, type IncremarkContentProps, IncremarkFootnotes, IncremarkHtmlElement, type IncremarkHtmlElementProps, IncremarkInline, type IncremarkInlineProps, type IncremarkProps, IncremarkRenderer, type IncremarkRendererProps, ThemeProvider, type ThemeProviderProps, type TypewriterControls, type TypewriterOptions, type UseBlockTransformerOptions, type UseBlockTransformerReturn, type UseDevToolsOptions, type UseIncremarkOptions, type UseIncremarkReturn, useBlockTransformer, useDefinitions, useDevTools, useIncremark };

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,
@@ -844,7 +833,135 @@ var IncremarkParagraph = ({ node }) => {
 };
 
 // src/components/IncremarkCode.tsx
-import React4, { useState as useState5, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
+import React5, { useState as useState5, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
+
+// src/hooks/useShiki.ts
+import React4 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();
+    }
+    return _ShikiManager.instance;
+  }
+  /**
+   * 获取或创建 highlighter
+   * @param theme 主题名称
+   * @returns highlighter 实例
+   */
+  async getHighlighter(theme) {
+    if (this.highlighters.has(theme)) {
+      return this.highlighters.get(theme);
+    }
+    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 {
+      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();
+      }
+    }
+    this.highlighters.clear();
+  }
+};
+var shikiManager = ShikiManager.getInstance();
+function useShiki(theme) {
+  const [isHighlighting, setIsHighlighting] = React4.useState(false);
+  const highlighterInfoRef = React4.useRef(null);
+  const getHighlighter = React4.useCallback(async () => {
+    if (!highlighterInfoRef.current) {
+      highlighterInfoRef.current = await shikiManager.getHighlighter(theme);
+    }
+    return highlighterInfoRef.current;
+  }, [theme]);
+  const highlight = React4.useCallback(async (code, lang, fallbackTheme) => {
+    setIsHighlighting(true);
+    try {
+      const info = await getHighlighter();
+      if (!info.loadedLanguages.has(lang) && lang !== "text") {
+        await shikiManager.loadLanguage(theme, lang);
+      }
+      if (!info.loadedThemes.has(theme)) {
+        await shikiManager.loadTheme(theme);
+      }
+      return await shikiManager.codeToHtml(theme, code, lang, fallbackTheme);
+    } catch (e) {
+      throw e;
+    } finally {
+      setIsHighlighting(false);
+    }
+  }, [getHighlighter, theme]);
+  return {
+    isHighlighting,
+    highlight
+  };
+}
+
+// src/components/IncremarkCode.tsx
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var IncremarkCode = ({
   node,
@@ -858,19 +975,16 @@ var IncremarkCode = ({
 }) => {
   const [copied, setCopied] = useState5(false);
   const [highlightedHtml, setHighlightedHtml] = useState5("");
-  const [isHighlighting, setIsHighlighting] = useState5(false);
   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 code = node.value;
   const isMermaid = language === "mermaid";
-  const CustomCodeBlock = React4.useMemo(() => {
+  const { isHighlighting, highlight } = useShiki(theme);
+  const CustomCodeBlock = React5.useMemo(() => {
     const component = customCodeBlocks?.[language];
     if (!component) return null;
     const config = codeBlockConfigs?.[language];
@@ -902,7 +1016,8 @@ var IncremarkCode = ({
         mermaidRef.current.initialize({
           startOnLoad: false,
           theme: "dark",
-          securityLevel: "loose"
+          securityLevel: "loose",
+          suppressErrorRendering: true
         });
       }
       const mermaid = mermaidRef.current;
@@ -925,7 +1040,7 @@ var IncremarkCode = ({
       doRenderMermaid();
     }, mermaidDelay);
   }, [isMermaid, code, mermaidDelay, doRenderMermaid]);
-  const highlight = useCallback5(async () => {
+  const doHighlight = useCallback5(async () => {
     if (isMermaid) {
       scheduleRenderMermaid();
       return;
@@ -934,46 +1049,16 @@ var IncremarkCode = ({
       setHighlightedHtml("");
       return;
     }
-    setIsHighlighting(true);
     try {
-      if (!highlighterRef.current) {
-        const { createHighlighter } = await import("shiki");
-        highlighterRef.current = await createHighlighter({
-          themes: [theme],
-          langs: []
-        });
-        loadedThemesRef.current.add(theme);
-      }
-      const highlighter = highlighterRef.current;
-      const lang = language;
-      if (!loadedLanguagesRef.current.has(lang) && lang !== "text") {
-        try {
-          await highlighter.loadLanguage(lang);
-          loadedLanguagesRef.current.add(lang);
-        } catch {
-        }
-      }
-      if (!loadedThemesRef.current.has(theme)) {
-        try {
-          await highlighter.loadTheme(theme);
-          loadedThemesRef.current.add(theme);
-        } catch {
-        }
-      }
-      const html = highlighter.codeToHtml(code, {
-        lang: loadedLanguagesRef.current.has(lang) ? lang : "text",
-        theme: loadedThemesRef.current.has(theme) ? theme : fallbackTheme
-      });
+      const html = await highlight(code, language, fallbackTheme);
       setHighlightedHtml(html);
     } catch {
       setHighlightedHtml("");
-    } finally {
-      setIsHighlighting(false);
     }
-  }, [code, language, theme, fallbackTheme, disableHighlight, isMermaid, scheduleRenderMermaid]);
+  }, [code, language, fallbackTheme, disableHighlight, isMermaid, highlight, scheduleRenderMermaid]);
   useEffect4(() => {
-    highlight();
-  }, [highlight]);
+    doHighlight();
+  }, [doHighlight]);
   useEffect4(() => {
     return () => {
       if (mermaidTimerRef.current) {
@@ -1024,7 +1109,7 @@ var IncremarkCode = ({
 };
 
 // src/components/IncremarkList.tsx
-import React5 from "react";
+import React6 from "react";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function getItemInlineContent(item) {
   const firstChild = item.children[0];
@@ -1044,7 +1129,7 @@ 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__ */ jsx7(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);
@@ -1064,16 +1149,16 @@ var IncremarkList = ({ node }) => {
     }
     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))
+      blockChildren.map((child, childIndex) => /* @__PURE__ */ jsx7(React6.Fragment, { children: /* @__PURE__ */ jsx7(IncremarkRenderer, { node: child }) }, childIndex))
     ] }, index);
   }) });
 };
 
 // src/components/IncremarkBlockquote.tsx
-import React6 from "react";
+import React7 from "react";
 import { jsx as jsx8 } 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__ */ jsx8("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx8(React7.Fragment, { children: /* @__PURE__ */ jsx8(IncremarkRenderer, { node: child }) }, index)) });
 };
 
 // src/components/IncremarkTable.tsx
@@ -1267,11 +1352,11 @@ var IncremarkRenderer = ({
 };
 
 // src/components/IncremarkFootnotes.tsx
-import React8 from "react";
+import React9 from "react";
 import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var IncremarkFootnotes = () => {
   const { footnoteDefinitions, footnoteReferenceOrder } = useDefinitions();
-  const orderedFootnotes = React8.useMemo(() => {
+  const orderedFootnotes = React9.useMemo(() => {
     return footnoteReferenceOrder.map((identifier) => ({
       identifier,
       definition: footnoteDefinitions[identifier]
@@ -1328,6 +1413,8 @@ var Incremark = (props) => {
     customCodeBlocks,
     showBlockStatus = true,
     className = "",
+    pendingClass = "incremark-pending",
+    completedClass = "incremark-completed",
     incremark
   } = props;
   if (incremark) {
@@ -1341,6 +1428,8 @@ var Incremark = (props) => {
         customCodeBlocks,
         showBlockStatus,
         className,
+        pendingClass,
+        completedClass,
         isDisplayComplete: isDisplayComplete2
       }
     ) });
@@ -1356,6 +1445,8 @@ var Incremark = (props) => {
       customCodeBlocks,
       showBlockStatus,
       className,
+      pendingClass,
+      completedClass,
       isDisplayComplete
     }
   );
@@ -1368,6 +1459,8 @@ var IncremarkInternal = ({
   codeBlockConfigs,
   showBlockStatus,
   className,
+  pendingClass,
+  completedClass,
   isDisplayComplete
 }) => {
   return /* @__PURE__ */ jsxs7("div", { className: `incremark ${className}`, children: [
@@ -1378,7 +1471,7 @@ 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(" ");
@@ -1392,22 +1485,112 @@ var IncremarkInternal = ({
           codeBlockConfigs,
           blockStatus: block.status
         }
-      ) }, block.stableId);
+      ) }, block.id);
     }),
     isDisplayComplete && /* @__PURE__ */ jsx17(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";
+var IncremarkContent = (props) => {
+  const {
+    stream,
+    content,
+    components,
+    customContainers,
+    customCodeBlocks,
+    codeBlockConfigs,
+    isFinished = false,
+    incremarkOptions,
+    showBlockStatus,
+    pendingClass
+  } = props;
+  const initialOptionsRef = useRef7({
+    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);
+    }
+  }, [incremarkOptions?.typewriter, typewriter]);
+  const isStreamMode = useMemo3(() => typeof stream === "function", [stream]);
+  const prevContentRef = useRef7(void 0);
+  const isStreamingRef = useRef7(false);
+  const handleStreamInput = useCallback7(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 = useCallback7((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]);
+  useEffect6(() => {
+    if (isStreamMode) {
+      handleStreamInput();
+    } else {
+      handleContentInput(content, prevContentRef.current);
+    }
+    prevContentRef.current = content;
+  }, [content, isStreamMode, handleStreamInput, handleContentInput]);
+  useEffect6(() => {
+    if (isFinished && content === markdown) {
+      finalize();
+    }
+  }, [isFinished, content, markdown, finalize]);
+  return /* @__PURE__ */ jsx18(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx18(
+    Incremark,
+    {
+      blocks,
+      isDisplayComplete,
+      showBlockStatus,
+      pendingClass,
+      components,
+      customContainers,
+      customCodeBlocks,
+      codeBlockConfigs
+    }
+  ) });
+};
+
 // src/components/AutoScrollContainer.tsx
 import {
-  useRef as useRef7,
-  useEffect as useEffect6,
-  useCallback as useCallback7,
+  useRef as useRef8,
+  useEffect as useEffect7,
+  useCallback as useCallback8,
   useState as useState7,
   forwardRef,
   useImperativeHandle
 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var AutoScrollContainer = forwardRef(
   ({
     children,
@@ -1417,17 +1600,17 @@ var AutoScrollContainer = forwardRef(
     style,
     className
   }, ref) => {
-    const containerRef = useRef7(null);
+    const containerRef = useRef8(null);
     const [isUserScrolledUp, setIsUserScrolledUp] = useState7(false);
-    const lastScrollTopRef = useRef7(0);
-    const lastScrollHeightRef = useRef7(0);
-    const isNearBottom = useCallback7(() => {
+    const lastScrollTopRef = useRef8(0);
+    const lastScrollHeightRef = useRef8(0);
+    const isNearBottom = useCallback8(() => {
       const container = containerRef.current;
       if (!container) return true;
       const { scrollTop, scrollHeight, clientHeight } = container;
       return scrollHeight - scrollTop - clientHeight <= threshold;
     }, [threshold]);
-    const scrollToBottom = useCallback7(
+    const scrollToBottom = useCallback8(
       (force = false) => {
         const container = containerRef.current;
         if (!container) return;
@@ -1439,12 +1622,12 @@ var AutoScrollContainer = forwardRef(
       },
       [isUserScrolledUp, behavior]
     );
-    const hasScrollbar = useCallback7(() => {
+    const hasScrollbar = useCallback8(() => {
       const container = containerRef.current;
       if (!container) return false;
       return container.scrollHeight > container.clientHeight;
     }, []);
-    const handleScroll = useCallback7(() => {
+    const handleScroll = useCallback8(() => {
       const container = containerRef.current;
       if (!container) return;
       const { scrollTop, scrollHeight, clientHeight } = container;
@@ -1466,14 +1649,14 @@ var AutoScrollContainer = forwardRef(
       lastScrollTopRef.current = scrollTop;
       lastScrollHeightRef.current = scrollHeight;
     }, [isNearBottom]);
-    useEffect6(() => {
+    useEffect7(() => {
       const container = containerRef.current;
       if (container) {
         lastScrollTopRef.current = container.scrollTop;
         lastScrollHeightRef.current = container.scrollHeight;
       }
     }, []);
-    useEffect6(() => {
+    useEffect7(() => {
       const container = containerRef.current;
       if (!container || !enabled) return;
       const observer = new MutationObserver(() => {
@@ -1505,7 +1688,7 @@ var AutoScrollContainer = forwardRef(
       }),
       [scrollToBottom, isUserScrolledUp]
     );
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         ref: containerRef,
@@ -1524,21 +1707,21 @@ var AutoScrollContainer = forwardRef(
 AutoScrollContainer.displayName = "AutoScrollContainer";
 
 // src/ThemeProvider.tsx
-import { useEffect as useEffect7, useRef as useRef8 } from "react";
+import { useEffect as useEffect8, useRef as useRef9 } from "react";
 import { applyTheme } from "@incremark/theme";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ThemeProvider = ({
   theme,
   children,
   className = ""
 }) => {
-  const containerRef = useRef8(null);
-  useEffect7(() => {
+  const containerRef = useRef9(null);
+  useEffect8(() => {
     if (containerRef.current) {
       applyTheme(containerRef.current, theme);
     }
   }, [theme]);
-  return /* @__PURE__ */ jsx19("div", { ref: containerRef, className: `incremark-theme-provider ${className}`.trim(), children });
+  return /* @__PURE__ */ jsx20("div", { ref: containerRef, className: `incremark-theme-provider ${className}`.trim(), children });
 };
 
 // src/index.ts
@@ -1570,6 +1753,7 @@ export {
   DefinitionsProvider,
   Incremark,
   IncremarkContainerProvider,
+  IncremarkContent,
   IncremarkFootnotes,
   IncremarkHtmlElement,
   IncremarkInline,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/react",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "license": "MIT",
   "description": "Incremark React integration - Incremental Markdown parser for AI streaming",
   "type": "module",
@@ -21,13 +21,13 @@
     "mermaid": "^10.0.0 || ^11.0.0",
     "katex": "^0.16.0",
     "react": ">=18.0.0",
-    "@incremark/core": "0.2.6"
+    "@incremark/core": "0.2.7"
   },
   "dependencies": {
     "shiki": "^3.20.0",
-    "@incremark/shared": "0.2.6",
-    "@incremark/theme": "0.2.6",
-    "@incremark/devtools": "0.2.6"
+    "@incremark/devtools": "0.2.7",
+    "@incremark/theme": "0.2.7",
+    "@incremark/shared": "0.2.7"
   },
   "devDependencies": {
     "@types/mdast": "^4.0.0",