@incremark/react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,44 +1,167 @@
 // src/hooks/useIncremark.ts
-import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { useState as useState3, useCallback as useCallback3, useMemo as useMemo2, useRef as useRef2 } from "react";
+import {
+  createIncremarkParser
+} from "@incremark/core";
+
+// src/contexts/DefinitionsContext.tsx
+import { createContext, useContext, useState, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var DefinitionsContext = createContext(void 0);
+var DefinitionsProvider = ({ children }) => {
+  const [definitions, setDefinitionsState] = useState({});
+  const [footnoteDefinitions, setFootnoteDefinitionsState] = useState({});
+  const [footnoteReferenceOrder, setFootnoteReferenceOrderState] = useState([]);
+  const setDefinitions = useCallback((defs) => {
+    setDefinitionsState(defs);
+  }, []);
+  const setFootnoteDefinitions = useCallback((defs) => {
+    setFootnoteDefinitionsState(defs);
+  }, []);
+  const setFootnoteReferenceOrder = useCallback((order) => {
+    setFootnoteReferenceOrderState(order);
+  }, []);
+  const clearDefinitions = useCallback(() => {
+    setDefinitionsState({});
+  }, []);
+  const clearFootnoteDefinitions = useCallback(() => {
+    setFootnoteDefinitionsState({});
+  }, []);
+  const clearFootnoteReferenceOrder = useCallback(() => {
+    setFootnoteReferenceOrderState([]);
+  }, []);
+  const clearAllDefinitions = useCallback(() => {
+    setDefinitionsState({});
+    setFootnoteDefinitionsState({});
+    setFootnoteReferenceOrderState([]);
+  }, []);
+  const value = {
+    definitions,
+    footnoteDefinitions,
+    footnoteReferenceOrder,
+    setDefinitions,
+    setFootnoteDefinitions,
+    setFootnoteReferenceOrder,
+    clearDefinitions,
+    clearFootnoteDefinitions,
+    clearFootnoteReferenceOrder,
+    clearAllDefinitions
+  };
+  return /* @__PURE__ */ jsx(DefinitionsContext.Provider, { value, children });
+};
+function useDefinitions() {
+  const context = useContext(DefinitionsContext);
+  if (!context) {
+    throw new Error("useDefinitions must be used within a DefinitionsProvider");
+  }
+  return context;
+}
+function useProvideDefinitions() {
+  const [definitions, setDefinitionsState] = useState({});
+  const [footnoteDefinitions, setFootnoteDefinitionsState] = useState({});
+  const [footnoteReferenceOrder, setFootnoteReferenceOrderState] = useState([]);
+  const setDefinitions = useCallback((defs) => {
+    setDefinitionsState(defs);
+  }, []);
+  const setFootnoteDefinitions = useCallback((defs) => {
+    setFootnoteDefinitionsState(defs);
+  }, []);
+  const setFootnoteReferenceOrder = useCallback((order) => {
+    setFootnoteReferenceOrderState(order);
+  }, []);
+  const clearDefinitions = useCallback(() => {
+    setDefinitionsState({});
+  }, []);
+  const clearFootnoteDefinitions = useCallback(() => {
+    setFootnoteDefinitionsState({});
+  }, []);
+  const clearFootnoteReferenceOrder = useCallback(() => {
+    setFootnoteReferenceOrderState([]);
+  }, []);
+  const clearAllDefinitions = useCallback(() => {
+    setDefinitionsState({});
+    setFootnoteDefinitionsState({});
+    setFootnoteReferenceOrderState([]);
+  }, []);
+  const value = {
+    definitions,
+    footnoteDefinitions,
+    footnoteReferenceOrder,
+    setDefinitions,
+    setFootnoteDefinitions,
+    setFootnoteReferenceOrder,
+    clearDefinitions,
+    clearFootnoteDefinitions,
+    clearFootnoteReferenceOrder,
+    clearAllDefinitions
+  };
+  return { value, setDefinitions, setFootnoteDefinitions, setFootnoteReferenceOrder };
+}
+
+// src/hooks/useTypewriter.ts
+import { useState as useState2, useCallback as useCallback2, useMemo, useRef, useEffect } from "react";
 import {
-  createIncremarkParser,
   createBlockTransformer,
   defaultPlugins
 } from "@incremark/core";
-function useIncremark(options = {}) {
-  const parserRef = useRef(null);
-  const transformerRef = useRef(null);
-  const hasTypewriterConfig = !!options.typewriter;
-  const cursorRef = useRef(options.typewriter?.cursor ?? "|");
-  if (!parserRef.current) {
-    parserRef.current = createIncremarkParser(options);
+
+// src/utils/cursor.ts
+function addCursorToNode(node, cursor) {
+  const cloned = JSON.parse(JSON.stringify(node));
+  function addToLast(n) {
+    if (n.children && n.children.length > 0) {
+      for (let i = n.children.length - 1; i >= 0; i--) {
+        if (addToLast(n.children[i])) {
+          return true;
+        }
+      }
+      n.children.push({ type: "text", value: cursor });
+      return true;
+    }
+    if (n.type === "text" && typeof n.value === "string") {
+      n.value += cursor;
+      return true;
+    }
+    if (typeof n.value === "string") {
+      n.value += cursor;
+      return true;
+    }
+    return false;
   }
+  addToLast(cloned);
+  return cloned;
+}
+
+// src/hooks/useTypewriter.ts
+function useTypewriter(options) {
+  const { typewriter: typewriterConfig, completedBlocks, pendingBlocks } = options;
+  const hasTypewriterConfig = !!typewriterConfig;
+  const cursorRef = useRef(typewriterConfig?.cursor ?? "|");
+  const transformerRef = useRef(null);
+  const completedBlocksCacheRef = useRef(/* @__PURE__ */ new Map());
+  const [typewriterEnabled, setTypewriterEnabled] = useState2(typewriterConfig?.enabled ?? hasTypewriterConfig);
+  const [isTypewriterProcessing, setIsTypewriterProcessing] = useState2(false);
+  const [isTypewriterPaused, setIsTypewriterPaused] = useState2(false);
+  const [typewriterEffect, setTypewriterEffect] = useState2(
+    typewriterConfig?.effect ?? "none"
+  );
+  const [displayBlocks, setDisplayBlocks] = useState2([]);
   if (hasTypewriterConfig && !transformerRef.current) {
-    const twOptions = options.typewriter;
+    const twOptions = typewriterConfig;
     transformerRef.current = createBlockTransformer({
       charsPerTick: twOptions.charsPerTick ?? [1, 3],
       tickInterval: twOptions.tickInterval ?? 30,
       effect: twOptions.effect ?? "none",
       pauseOnHidden: twOptions.pauseOnHidden ?? true,
       plugins: twOptions.plugins ?? defaultPlugins,
-      onChange: () => {
-        setForceUpdateCount((c) => c + 1);
+      onChange: (blocks2) => {
+        setDisplayBlocks(blocks2);
+        setIsTypewriterProcessing(transformerRef.current?.isProcessing() ?? false);
+        setIsTypewriterPaused(transformerRef.current?.isPausedState() ?? false);
       }
     });
   }
-  const parser = parserRef.current;
   const transformer = transformerRef.current;
-  const [markdown, setMarkdown] = useState("");
-  const [completedBlocks, setCompletedBlocks] = useState([]);
-  const [pendingBlocks, setPendingBlocks] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [forceUpdateCount, setForceUpdateCount] = useState(0);
-  const [typewriterEnabled, setTypewriterEnabled] = useState(options.typewriter?.enabled ?? hasTypewriterConfig);
-  const [isTypewriterProcessing, setIsTypewriterProcessing] = useState(false);
-  const [isTypewriterPaused, setIsTypewriterPaused] = useState(false);
-  const [typewriterEffect, setTypewriterEffect] = useState(
-    options.typewriter?.effect ?? "none"
-  );
   const sourceBlocks = useMemo(
     () => completedBlocks.map((block) => ({
       id: block.id,
@@ -50,8 +173,8 @@ function useIncremark(options = {}) {
   useEffect(() => {
     if (!transformer) return;
     transformer.push(sourceBlocks);
-    const displayBlocks = transformer.getDisplayBlocks();
-    const currentDisplaying = displayBlocks.find((b) => !b.isDisplayComplete);
+    const displayBlocks2 = transformer.getDisplayBlocks();
+    const currentDisplaying = displayBlocks2.find((b) => !b.isDisplayComplete);
     if (currentDisplaying) {
       const updated = sourceBlocks.find((b) => b.id === currentDisplaying.id);
       if (updated) {
@@ -61,31 +184,6 @@ function useIncremark(options = {}) {
     setIsTypewriterProcessing(transformer.isProcessing());
     setIsTypewriterPaused(transformer.isPausedState());
   }, [sourceBlocks, transformer]);
-  const addCursorToNode = useCallback((node, cursor) => {
-    const cloned = JSON.parse(JSON.stringify(node));
-    function addToLast(n) {
-      if (n.children && n.children.length > 0) {
-        for (let i = n.children.length - 1; i >= 0; i--) {
-          if (addToLast(n.children[i])) {
-            return true;
-          }
-        }
-        n.children.push({ type: "text", value: cursor });
-        return true;
-      }
-      if (n.type === "text" && typeof n.value === "string") {
-        n.value += cursor;
-        return true;
-      }
-      if (typeof n.value === "string") {
-        n.value += cursor;
-        return true;
-      }
-      return false;
-    }
-    addToLast(cloned);
-    return cloned;
-  }, []);
   const blocks = useMemo(() => {
     if (!typewriterEnabled || !transformer) {
       const result = [];
@@ -100,15 +198,20 @@ function useIncremark(options = {}) {
       }
       return result;
     }
-    const displayBlocks = transformer.getDisplayBlocks();
     return displayBlocks.map((db, index) => {
       const isPending = !db.isDisplayComplete;
       const isLastPending = isPending && index === displayBlocks.length - 1;
+      if (db.isDisplayComplete) {
+        const cached = completedBlocksCacheRef.current.get(db.id);
+        if (cached) {
+          return cached;
+        }
+      }
       let node = db.displayNode;
       if (typewriterEffect === "typing" && isLastPending) {
         node = addCursorToNode(db.displayNode, cursorRef.current);
       }
-      return {
+      const block = {
         id: db.id,
         stableId: db.id,
         status: db.isDisplayComplete ? "completed" : "pending",
@@ -118,73 +221,25 @@ function useIncremark(options = {}) {
         endOffset: 0,
         rawText: ""
       };
-    });
-  }, [completedBlocks, pendingBlocks, typewriterEnabled, typewriterEffect, addCursorToNode, forceUpdateCount]);
-  const ast = useMemo(
-    () => ({
-      type: "root",
-      children: [...completedBlocks.map((b) => b.node), ...pendingBlocks.map((b) => b.node)]
-    }),
-    [completedBlocks, pendingBlocks]
-  );
-  const append = useCallback(
-    (chunk) => {
-      setIsLoading(true);
-      const update = parser.append(chunk);
-      setMarkdown(parser.getBuffer());
-      if (update.completed.length > 0) {
-        setCompletedBlocks((prev) => [...prev, ...update.completed]);
+      if (db.isDisplayComplete) {
+        completedBlocksCacheRef.current.set(db.id, block);
       }
-      setPendingBlocks(update.pending);
-      return update;
-    },
-    [parser]
-  );
-  const finalize = useCallback(() => {
-    const update = parser.finalize();
-    setMarkdown(parser.getBuffer());
-    if (update.completed.length > 0) {
-      setCompletedBlocks((prev) => [...prev, ...update.completed]);
-    }
-    setPendingBlocks([]);
-    setIsLoading(false);
-    return update;
-  }, [parser]);
-  const abort = useCallback(() => {
-    return finalize();
-  }, [finalize]);
-  const reset = useCallback(() => {
-    parser.reset();
-    setCompletedBlocks([]);
-    setPendingBlocks([]);
-    setMarkdown("");
-    setIsLoading(false);
-    transformer?.reset();
-  }, [parser, transformer]);
-  const render = useCallback(
-    (content) => {
-      const update = parser.render(content);
-      setMarkdown(parser.getBuffer());
-      setCompletedBlocks(parser.getCompletedBlocks());
-      setPendingBlocks([]);
-      setIsLoading(false);
-      return update;
-    },
-    [parser]
-  );
-  const skip = useCallback(() => {
+      return block;
+    });
+  }, [completedBlocks, pendingBlocks, typewriterEnabled, typewriterEffect, displayBlocks]);
+  const skip = useCallback2(() => {
     transformer?.skip();
     setIsTypewriterProcessing(false);
   }, [transformer]);
-  const pause = useCallback(() => {
+  const pause = useCallback2(() => {
     transformer?.pause();
     setIsTypewriterPaused(true);
   }, [transformer]);
-  const resume = useCallback(() => {
+  const resume = useCallback2(() => {
     transformer?.resume();
     setIsTypewriterPaused(false);
   }, [transformer]);
-  const setTypewriterOptions = useCallback(
+  const setTypewriterOptions = useCallback2(
     (opts) => {
       if (opts.enabled !== void 0) {
         setTypewriterEnabled(opts.enabled);
@@ -206,7 +261,7 @@ function useIncremark(options = {}) {
     },
     [transformer]
   );
-  const typewriter = useMemo(
+  const typewriterControls = useMemo(
     () => ({
       enabled: typewriterEnabled,
       setEnabled: setTypewriterEnabled,
@@ -225,6 +280,108 @@ function useIncremark(options = {}) {
       transformer?.destroy();
     };
   }, [transformer]);
+  return {
+    blocks,
+    typewriter: typewriterControls,
+    transformer
+  };
+}
+
+// src/hooks/useIncremark.ts
+function useIncremark(options = {}) {
+  const parserRef = useRef2(null);
+  const { value: definitionsContextValue, setDefinitions, setFootnoteDefinitions, setFootnoteReferenceOrder } = useProvideDefinitions();
+  const _definitionsContextValue = definitionsContextValue;
+  const lastDefinitionsEmptyRef = useRef2(true);
+  const lastFootnoteDefinitionsEmptyRef = useRef2(true);
+  if (!parserRef.current) {
+    parserRef.current = createIncremarkParser({
+      ...options,
+      onChange: (state) => {
+        const definitionsIsEmpty = Object.keys(state.definitions).length === 0;
+        const footnoteDefinitionsIsEmpty = Object.keys(state.footnoteDefinitions).length === 0;
+        if (!(definitionsIsEmpty && lastDefinitionsEmptyRef.current)) {
+          setDefinitions(state.definitions);
+          lastDefinitionsEmptyRef.current = definitionsIsEmpty;
+        }
+        if (!(footnoteDefinitionsIsEmpty && lastFootnoteDefinitionsEmptyRef.current)) {
+          setFootnoteDefinitions(state.footnoteDefinitions);
+          lastFootnoteDefinitionsEmptyRef.current = footnoteDefinitionsIsEmpty;
+        }
+        options.onChange?.(state);
+      }
+    });
+  }
+  const parser = parserRef.current;
+  const [markdown, setMarkdown] = useState3("");
+  const [completedBlocks, setCompletedBlocks] = useState3([]);
+  const [pendingBlocks, setPendingBlocks] = useState3([]);
+  const [isLoading, setIsLoading] = useState3(false);
+  const [isFinalized, setIsFinalized] = useState3(false);
+  const { blocks, typewriter, transformer } = useTypewriter({
+    typewriter: options.typewriter,
+    completedBlocks,
+    pendingBlocks
+  });
+  const ast = useMemo2(
+    () => ({
+      type: "root",
+      children: [...completedBlocks.map((b) => b.node), ...pendingBlocks.map((b) => b.node)]
+    }),
+    [completedBlocks, pendingBlocks]
+  );
+  const append = useCallback3(
+    (chunk) => {
+      setIsLoading(true);
+      const update = parser.append(chunk);
+      setMarkdown(parser.getBuffer());
+      if (update.completed.length > 0) {
+        setCompletedBlocks((prev) => [...prev, ...update.completed]);
+      }
+      setPendingBlocks(update.pending);
+      setFootnoteReferenceOrder(update.footnoteReferenceOrder);
+      return update;
+    },
+    [parser, setFootnoteReferenceOrder]
+  );
+  const finalize = useCallback3(() => {
+    const update = parser.finalize();
+    setMarkdown(parser.getBuffer());
+    if (update.completed.length > 0) {
+      setCompletedBlocks((prev) => [...prev, ...update.completed]);
+    }
+    setPendingBlocks([]);
+    setIsLoading(false);
+    setIsFinalized(true);
+    setFootnoteReferenceOrder(update.footnoteReferenceOrder);
+    return update;
+  }, [parser, setFootnoteReferenceOrder]);
+  const abort = useCallback3(() => {
+    return finalize();
+  }, [finalize]);
+  const reset = useCallback3(() => {
+    parser.reset();
+    setCompletedBlocks([]);
+    setPendingBlocks([]);
+    setMarkdown("");
+    setIsLoading(false);
+    setIsFinalized(false);
+    setFootnoteReferenceOrder([]);
+    transformer?.reset();
+  }, [parser, transformer, setFootnoteReferenceOrder]);
+  const render = useCallback3(
+    (content) => {
+      const update = parser.render(content);
+      setMarkdown(parser.getBuffer());
+      setCompletedBlocks(parser.getCompletedBlocks());
+      setPendingBlocks([]);
+      setIsLoading(false);
+      setIsFinalized(true);
+      setFootnoteReferenceOrder(update.footnoteReferenceOrder);
+      return update;
+    },
+    [parser, setFootnoteReferenceOrder]
+  );
   return {
     /** 已收集的完整 Markdown 字符串 */
     markdown,
@@ -238,6 +395,8 @@ function useIncremark(options = {}) {
     blocks,
     /** 是否正在加载 */
     isLoading,
+    /** 是否已完成（finalize） */
+    isFinalized,
     /** 追加内容 */
     append,
     /** 完成解析 */
@@ -251,16 +410,18 @@ function useIncremark(options = {}) {
     /** 解析器实例 */
     parser,
     /** 打字机控制 */
-    typewriter
+    typewriter,
+    /** @internal 提供给 Incremark 组件使用的 context value */
+    _definitionsContextValue
   };
 }
 
 // src/hooks/useDevTools.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
 import { createDevTools } from "@incremark/devtools";
 function useDevTools(incremark, options = {}) {
-  const devtoolsRef = useRef2(null);
-  const optionsRef = useRef2(options);
+  const devtoolsRef = useRef3(null);
+  const optionsRef = useRef3(options);
   useEffect2(() => {
     const devtools = createDevTools(optionsRef.current);
     devtoolsRef.current = devtools;
@@ -288,16 +449,16 @@ function useDevTools(incremark, options = {}) {
 }
 
 // src/hooks/useBlockTransformer.ts
-import { useState as useState2, useCallback as useCallback2, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { useState as useState4, useCallback as useCallback4, useRef as useRef4, useEffect as useEffect3 } from "react";
 import {
   createBlockTransformer as createBlockTransformer2
 } from "@incremark/core";
 function useBlockTransformer(sourceBlocks, options = {}) {
-  const [displayBlocks, setDisplayBlocks] = useState2([]);
-  const [isProcessing, setIsProcessing] = useState2(false);
-  const [isPaused, setIsPaused] = useState2(false);
-  const [effect, setEffect] = useState2(options.effect ?? "none");
-  const transformerRef = useRef3(null);
+  const [displayBlocks, setDisplayBlocks] = useState4([]);
+  const [isProcessing, setIsProcessing] = useState4(false);
+  const [isPaused, setIsPaused] = useState4(false);
+  const [effect, setEffect] = useState4(options.effect ?? "none");
+  const transformerRef = useRef4(null);
   if (!transformerRef.current) {
     transformerRef.current = createBlockTransformer2({
       ...options,
@@ -324,21 +485,21 @@ function useBlockTransformer(sourceBlocks, options = {}) {
       transformer.destroy();
     };
   }, [transformer]);
-  const skip = useCallback2(() => {
+  const skip = useCallback4(() => {
     transformer.skip();
   }, [transformer]);
-  const reset = useCallback2(() => {
+  const reset = useCallback4(() => {
     transformer.reset();
   }, [transformer]);
-  const pause = useCallback2(() => {
+  const pause = useCallback4(() => {
     transformer.pause();
     setIsPaused(true);
   }, [transformer]);
-  const resume = useCallback2(() => {
+  const resume = useCallback4(() => {
     transformer.resume();
     setIsPaused(false);
   }, [transformer]);
-  const setOptionsCallback = useCallback2(
+  const setOptionsCallback = useCallback4(
     (opts) => {
       transformer.setOptions(opts);
       if (opts.effect !== void 0) {
@@ -362,71 +523,617 @@ function useBlockTransformer(sourceBlocks, options = {}) {
 }
 
 // src/components/IncremarkRenderer.tsx
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function getStableText(node) {
-  if (!node.chunks || node.chunks.length === 0) {
-    return node.value;
+import React6 from "react";
+
+// src/components/IncremarkInline.tsx
+import React3 from "react";
+import {
+  hasChunks,
+  getStableText,
+  isHtmlNode
+} from "@incremark/shared";
+
+// src/components/IncremarkHtmlElement.tsx
+import React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var INLINE_ELEMENTS = [
+  "a",
+  "abbr",
+  "acronym",
+  "b",
+  "bdo",
+  "big",
+  "br",
+  "button",
+  "cite",
+  "code",
+  "dfn",
+  "em",
+  "i",
+  "img",
+  "input",
+  "kbd",
+  "label",
+  "map",
+  "object",
+  "output",
+  "q",
+  "samp",
+  "script",
+  "select",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "textarea",
+  "time",
+  "tt",
+  "var"
+];
+var VOID_ELEMENTS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+function isInlineElement(tagName) {
+  return INLINE_ELEMENTS.includes(tagName.toLowerCase());
+}
+function isVoidElement(tagName) {
+  return VOID_ELEMENTS.includes(tagName.toLowerCase());
+}
+function hasOnlyInlineChildren(children) {
+  if (!children || children.length === 0) return true;
+  return children.every((child) => {
+    const type = child.type;
+    const inlineTypes = ["text", "strong", "emphasis", "inlineCode", "link", "image", "break", "html", "htmlElement"];
+    if (inlineTypes.includes(type)) {
+      if (type === "htmlElement") {
+        return isInlineElement(child.tagName);
+      }
+      return true;
+    }
+    return false;
+  });
+}
+function filterAttrs(attrs) {
+  const result = {};
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key.toLowerCase().startsWith("on")) continue;
+    result[key] = value;
   }
-  return node.value.slice(0, node.stableLength ?? 0);
+  return result;
 }
-function renderInlineChildren(children) {
-  if (!children) return null;
-  return children.map((child, i) => {
-    switch (child.type) {
-      case "text": {
-        const textNode = child;
-        if (textNode.chunks && textNode.chunks.length > 0) {
-          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            getStableText(textNode),
-            textNode.chunks.map((chunk) => /* @__PURE__ */ jsx("span", { className: "incremark-fade-in", children: chunk.text }, chunk.createdAt))
-          ] }, i);
-        }
-        return /* @__PURE__ */ jsx(React.Fragment, { children: textNode.value }, i);
-      }
-      case "strong":
-        return /* @__PURE__ */ jsx("strong", { children: renderInlineChildren(child.children) }, i);
-      case "emphasis":
-        return /* @__PURE__ */ jsx("em", { children: renderInlineChildren(child.children) }, i);
-      case "inlineCode":
-        return /* @__PURE__ */ jsx("code", { className: "incremark-inline-code", children: child.value }, i);
-      case "link":
-        return /* @__PURE__ */ jsx("a", { href: child.url, target: "_blank", rel: "noopener noreferrer", children: renderInlineChildren(child.children) }, i);
-      case "image":
-        return /* @__PURE__ */ jsx("img", { src: child.url, alt: child.alt || "", loading: "lazy" }, i);
-      case "break":
-        return /* @__PURE__ */ jsx("br", {}, i);
-      case "delete":
-        return /* @__PURE__ */ jsx("del", { children: renderInlineChildren(child.children) }, i);
-      case "paragraph":
-        return /* @__PURE__ */ jsx(React.Fragment, { children: renderInlineChildren(child.children) }, i);
-      case "html":
-        return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: child.value } }, i);
-      default:
-        return /* @__PURE__ */ jsx("span", { children: child.value || "" }, i);
+function parseStyleString(styleStr) {
+  const result = {};
+  if (!styleStr || typeof styleStr !== "string") return result;
+  try {
+    const rules = styleStr.split(";");
+    for (const rule of rules) {
+      const trimmed = rule.trim();
+      if (!trimmed) continue;
+      const colonIndex = trimmed.indexOf(":");
+      if (colonIndex === -1) continue;
+      const property = trimmed.slice(0, colonIndex).trim();
+      const value = trimmed.slice(colonIndex + 1).trim();
+      if (!property || !value) continue;
+      if (!/^[a-zA-Z-][a-zA-Z0-9-]*$/.test(property)) continue;
+      const camelProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+      result[camelProperty] = value;
+    }
+  } catch {
+    console.warn("[IncremarkHtmlElement] Failed to parse style string:", styleStr);
+    return {};
+  }
+  return result;
+}
+function toReactProps(attrs) {
+  const filtered = filterAttrs(attrs);
+  const result = {};
+  for (const [key, value] of Object.entries(filtered)) {
+    if (key === "class") {
+      result.className = value;
+    } else if (key === "for") {
+      result.htmlFor = value;
+    } else if (key === "style") {
+      result.style = parseStyleString(value);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function renderChildren(children) {
+  if (!children || children.length === 0) return null;
+  if (hasOnlyInlineChildren(children)) {
+    return /* @__PURE__ */ jsx2(IncremarkInline, { nodes: children });
+  }
+  return children.map((child, idx) => {
+    if (child.type === "htmlElement") {
+      return /* @__PURE__ */ jsx2(IncremarkHtmlElement, { node: child }, idx);
+    }
+    if (child.type === "text") {
+      return /* @__PURE__ */ jsx2(React2.Fragment, { children: child.value }, idx);
+    }
+    if (["strong", "emphasis", "inlineCode", "link", "image", "break"].includes(child.type)) {
+      return /* @__PURE__ */ jsx2(IncremarkInline, { nodes: [child] }, idx);
     }
+    if (child.type === "paragraph") {
+      return /* @__PURE__ */ jsx2("p", { children: /* @__PURE__ */ jsx2(IncremarkInline, { nodes: child.children }) }, idx);
+    }
+    return /* @__PURE__ */ jsx2("div", { className: "incremark-unknown-child", children: child.type }, idx);
   });
 }
-var DefaultHeading = ({ node }) => {
+var IncremarkHtmlElement = ({ node }) => {
+  const { tagName, attrs, children } = 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__ */ jsx2(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";
+function isHtmlElementNode(node) {
+  return node.type === "htmlElement";
+}
+function isImageReference(node) {
+  return node.type === "imageReference";
+}
+function isLinkReference(node) {
+  return node.type === "linkReference";
+}
+var IncremarkInline = ({ nodes }) => {
+  if (!nodes || nodes.length === 0) return null;
+  const { definitions, footnoteDefinitions } = useDefinitions();
+  return /* @__PURE__ */ jsx3(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))
+        ] }, i);
+      }
+      return /* @__PURE__ */ jsx3(React3.Fragment, { children: node.value }, i);
+    }
+    if (isHtmlElementNode(node)) {
+      return /* @__PURE__ */ jsx3(IncremarkHtmlElement, { node }, i);
+    }
+    if (isHtmlNode(node)) {
+      return /* @__PURE__ */ jsx3(
+        "span",
+        {
+          style: { display: "contents" },
+          dangerouslySetInnerHTML: { __html: node.value }
+        },
+        i
+      );
+    }
+    if (node.type === "strong") {
+      return /* @__PURE__ */ jsx3("strong", { children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children }) }, i);
+    }
+    if (node.type === "emphasis") {
+      return /* @__PURE__ */ jsx3("em", { children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children }) }, i);
+    }
+    if (node.type === "inlineCode") {
+      return /* @__PURE__ */ jsx3("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);
+    }
+    if (node.type === "image") {
+      const imageNode = node;
+      return /* @__PURE__ */ jsx3(
+        "img",
+        {
+          src: imageNode.url,
+          alt: imageNode.alt || "",
+          title: imageNode.title || void 0,
+          loading: "lazy"
+        },
+        i
+      );
+    }
+    if (isImageReference(node)) {
+      const definition = definitions[node.identifier];
+      if (definition) {
+        return /* @__PURE__ */ jsx3(
+          "img",
+          {
+            src: definition.url,
+            alt: node.alt || "",
+            title: definition.title || void 0,
+            loading: "lazy"
+          },
+          i
+        );
+      }
+      return /* @__PURE__ */ jsxs("span", { className: "incremark-image-ref-missing", children: [
+        "![",
+        node.alt,
+        "][",
+        node.identifier || node.label,
+        "]"
+      ] }, i);
+    }
+    if (isLinkReference(node)) {
+      const definition = definitions[node.identifier];
+      if (definition) {
+        return /* @__PURE__ */ jsx3(
+          "a",
+          {
+            href: definition.url,
+            title: definition.title || void 0,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children })
+          },
+          i
+        );
+      }
+      return /* @__PURE__ */ jsxs("span", { className: "incremark-link-ref-missing", children: [
+        "[",
+        node.children.map((c) => c.value).join(""),
+        "][",
+        node.identifier || node.label,
+        "]"
+      ] }, i);
+    }
+    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);
+    }
+    if (node.type === "break") {
+      return /* @__PURE__ */ jsx3("br", {}, i);
+    }
+    if (node.type === "delete") {
+      return /* @__PURE__ */ jsx3("del", { children: /* @__PURE__ */ jsx3(IncremarkInline, { nodes: node.children }) }, i);
+    }
+    return /* @__PURE__ */ jsx3("span", { children: node.value || "" }, i);
+  }) });
+};
+
+// src/components/IncremarkHeading.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var IncremarkHeading = ({ node }) => {
   const Tag = `h${node.depth}`;
-  return /* @__PURE__ */ jsx(Tag, { className: "incremark-heading", children: renderInlineChildren(node.children) });
+  return /* @__PURE__ */ jsx4(Tag, { className: `incremark-heading h${node.depth}`, children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) });
+};
+
+// src/components/IncremarkParagraph.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var IncremarkParagraph = ({ node }) => {
+  return /* @__PURE__ */ jsx5("p", { className: "incremark-paragraph", children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) });
+};
+
+// src/components/IncremarkCode.tsx
+import { 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 = ({
+  node,
+  theme = "github-dark",
+  disableHighlight = false,
+  mermaidDelay = 500
+}) => {
+  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 toggleMermaidView = useCallback5(() => {
+    setMermaidViewMode((prev) => prev === "preview" ? "source" : "preview");
+  }, []);
+  const copyCode = useCallback5(async () => {
+    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"
+        });
+      }
+      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 = useCallback5(() => {
+    if (!isMermaid || !code) return;
+    if (mermaidTimerRef.current) {
+      clearTimeout(mermaidTimerRef.current);
+    }
+    setMermaidLoading(true);
+    mermaidTimerRef.current = setTimeout(() => {
+      doRenderMermaid();
+    }, mermaidDelay);
+  }, [isMermaid, code, mermaidDelay, doRenderMermaid]);
+  const highlight = useCallback5(async () => {
+    if (isMermaid) {
+      scheduleRenderMermaid();
+      return;
+    }
+    if (!code || disableHighlight) {
+      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 : "github-dark"
+      });
+      setHighlightedHtml(html);
+    } catch {
+      setHighlightedHtml("");
+    } finally {
+      setIsHighlighting(false);
+    }
+  }, [code, language, theme, disableHighlight, isMermaid, scheduleRenderMermaid]);
+  useEffect4(() => {
+    highlight();
+  }, [highlight]);
+  useEffect4(() => {
+    return () => {
+      if (mermaidTimerRef.current) {
+        clearTimeout(mermaidTimerRef.current);
+      }
+    };
+  }, []);
+  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__ */ 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 }) }) })
+  ] });
 };
-var DefaultParagraph = ({ node }) => /* @__PURE__ */ jsx("p", { className: "incremark-paragraph", children: renderInlineChildren(node.children) });
-var DefaultCode = ({ node }) => /* @__PURE__ */ jsxs("div", { className: "incremark-code", children: [
-  /* @__PURE__ */ jsx("div", { className: "code-header", children: /* @__PURE__ */ jsx("span", { className: "language", children: node.lang || "text" }) }),
-  /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: node.value }) })
-] });
-var DefaultList = ({ node }) => {
+
+// src/components/IncremarkList.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function getItemContent(item) {
+  const firstChild = item.children[0];
+  if (firstChild?.type === "paragraph") {
+    return firstChild.children;
+  }
+  return [];
+}
+var IncremarkList = ({ node }) => {
   const Tag = node.ordered ? "ol" : "ul";
-  return /* @__PURE__ */ jsx(Tag, { className: "incremark-list", children: node.children?.map((item, i) => /* @__PURE__ */ jsx("li", { children: renderInlineChildren(item.children) }, i)) });
+  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) => {
+    const isTaskItem = item.checked !== null && item.checked !== void 0;
+    const content = getItemContent(item);
+    if (isTaskItem) {
+      return /* @__PURE__ */ jsx7("li", { className: "incremark-list-item task-item", children: /* @__PURE__ */ jsxs3("label", { className: "task-label", children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "checkbox",
+            checked: item.checked || false,
+            disabled: true,
+            className: "checkbox"
+          }
+        ),
+        /* @__PURE__ */ jsx7("span", { className: "task-content", children: /* @__PURE__ */ jsx7(IncremarkInline, { nodes: content }) })
+      ] }) }, index);
+    }
+    return /* @__PURE__ */ jsx7("li", { className: "incremark-list-item", children: /* @__PURE__ */ jsx7(IncremarkInline, { nodes: content }) }, index);
+  }) });
+};
+
+// src/components/IncremarkBlockquote.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IncremarkBlockquote = ({ node }) => {
+  return /* @__PURE__ */ jsx8("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => {
+    if (child.type === "paragraph") {
+      return /* @__PURE__ */ jsx8(IncremarkParagraph, { node: child }, index);
+    }
+    return /* @__PURE__ */ jsx8("div", { className: "unknown-child", children: child.type }, index);
+  }) });
 };
-var DefaultBlockquote = ({ node }) => /* @__PURE__ */ jsx("blockquote", { className: "incremark-blockquote", children: node.children?.map((child, i) => /* @__PURE__ */ jsx(React.Fragment, { children: child.type === "paragraph" ? /* @__PURE__ */ jsx("p", { children: renderInlineChildren(child.children) }) : "children" in child && Array.isArray(child.children) ? renderInlineChildren(child.children) : null }, i)) });
-var DefaultTable = ({ node }) => /* @__PURE__ */ jsx("div", { className: "incremark-table-wrapper", children: /* @__PURE__ */ jsxs("table", { className: "incremark-table", children: [
-  /* @__PURE__ */ jsx("thead", { children: node.children?.[0] && /* @__PURE__ */ jsx("tr", { children: node.children[0].children?.map((cell, i) => /* @__PURE__ */ jsx("th", { children: renderInlineChildren(cell.children) }, i)) }) }),
-  /* @__PURE__ */ jsx("tbody", { children: node.children?.slice(1).map((row, i) => /* @__PURE__ */ jsx("tr", { children: row.children?.map((cell, j) => /* @__PURE__ */ jsx("td", { children: renderInlineChildren(cell.children) }, j)) }, i)) })
-] }) });
-var DefaultThematicBreak = () => /* @__PURE__ */ jsx("hr", { className: "incremark-hr" });
-var DefaultDefault = ({ node }) => /* @__PURE__ */ jsx("div", { className: "incremark-unknown", "data-type": node.type, children: /* @__PURE__ */ jsx("pre", { children: JSON.stringify(node, null, 2) }) });
+
+// src/components/IncremarkTable.tsx
+import { jsx as jsx9, jsxs as jsxs4 } 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(
+      "th",
+      {
+        style: { textAlign: node.align?.[cellIndex] || "left" },
+        children: /* @__PURE__ */ jsx9(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(
+      "td",
+      {
+        style: { textAlign: node.align?.[cellIndex] || "left" },
+        children: /* @__PURE__ */ jsx9(IncremarkInline, { nodes: getCellContent(cell) })
+      },
+      cellIndex
+    )) }, rowIndex)) })
+  ] }) });
+};
+
+// src/components/IncremarkThematicBreak.tsx
+import { jsx as jsx10 } 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 }) }) });
+};
+
+// src/components/IncremarkDefault.tsx
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var IncremarkDefault = ({ node }) => {
+  return /* @__PURE__ */ jsxs5("div", { className: "incremark-default", children: [
+    /* @__PURE__ */ jsx12("span", { className: "type-badge", children: node.type }),
+    /* @__PURE__ */ jsx12("pre", { children: JSON.stringify(node, null, 2) })
+  ] });
+};
+
+// src/components/IncremarkRenderer.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var DefaultHeading = ({ node }) => {
+  return /* @__PURE__ */ jsx13(IncremarkHeading, { node });
+};
+var DefaultParagraph = ({ node }) => /* @__PURE__ */ jsx13(IncremarkParagraph, { node });
+var DefaultCode = ({ node }) => /* @__PURE__ */ jsx13(IncremarkCode, { node });
+var DefaultList = ({ node }) => /* @__PURE__ */ jsx13(IncremarkList, { node });
+var DefaultBlockquote = ({ node }) => /* @__PURE__ */ jsx13(IncremarkBlockquote, { node });
+var DefaultTable = ({ node }) => /* @__PURE__ */ jsx13(IncremarkTable, { node });
+var DefaultThematicBreak = () => /* @__PURE__ */ jsx13(IncremarkThematicBreak, {});
+var DefaultMath = ({ node }) => /* @__PURE__ */ jsx13(IncremarkMath, { node });
+var DefaultHtmlElement = ({ node }) => /* @__PURE__ */ jsx13(IncremarkHtmlElement, { node });
+var DefaultDefault = ({ node }) => /* @__PURE__ */ jsx13(IncremarkDefault, { node });
 var defaultComponents = {
   heading: DefaultHeading,
   paragraph: DefaultParagraph,
@@ -434,43 +1141,146 @@ var defaultComponents = {
   list: DefaultList,
   blockquote: DefaultBlockquote,
   table: DefaultTable,
-  thematicBreak: DefaultThematicBreak
+  thematicBreak: DefaultThematicBreak,
+  math: DefaultMath,
+  inlineMath: DefaultMath,
+  htmlElement: DefaultHtmlElement,
+  default: DefaultDefault
 };
 var IncremarkRenderer = ({ node, components = {} }) => {
+  if (node.type === "footnoteDefinition") {
+    return null;
+  }
+  if (node.type === "html") {
+    return /* @__PURE__ */ jsx13("pre", { className: "incremark-html-code", children: /* @__PURE__ */ jsx13("code", { children: node.value }) });
+  }
   const mergedComponents = { ...defaultComponents, ...components };
   const Component = mergedComponents[node.type] || DefaultDefault;
-  return /* @__PURE__ */ jsx(Component, { node });
+  return /* @__PURE__ */ jsx13(Component, { node });
+};
+
+// src/components/IncremarkFootnotes.tsx
+import React7 from "react";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var IncremarkFootnotes = () => {
+  const { footnoteDefinitions, footnoteReferenceOrder } = useDefinitions();
+  const orderedFootnotes = React7.useMemo(() => {
+    return footnoteReferenceOrder.map((identifier) => ({
+      identifier,
+      definition: footnoteDefinitions[identifier]
+    })).filter((item) => item.definition !== void 0);
+  }, [footnoteReferenceOrder, footnoteDefinitions]);
+  if (orderedFootnotes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs7("section", { className: "incremark-footnotes", children: [
+    /* @__PURE__ */ jsx14("hr", { className: "incremark-footnotes-divider" }),
+    /* @__PURE__ */ jsx14("ol", { className: "incremark-footnotes-list", children: orderedFootnotes.map((item, index) => /* @__PURE__ */ jsxs7(
+      "li",
+      {
+        id: `fn-${item.identifier}`,
+        className: "incremark-footnote-item",
+        children: [
+          /* @__PURE__ */ jsxs7("div", { className: "incremark-footnote-content", children: [
+            /* @__PURE__ */ jsxs7("span", { className: "incremark-footnote-number", children: [
+              index + 1,
+              "."
+            ] }),
+            /* @__PURE__ */ jsx14("div", { className: "incremark-footnote-body", children: item.definition.children.map((child, childIndex) => /* @__PURE__ */ jsx14(IncremarkRenderer, { node: child }, childIndex)) })
+          ] }),
+          /* @__PURE__ */ jsx14(
+            "a",
+            {
+              href: `#fnref-${item.identifier}`,
+              className: "incremark-footnote-backref",
+              "aria-label": "\u8FD4\u56DE\u5F15\u7528\u4F4D\u7F6E",
+              children: "\u21A9"
+            }
+          )
+        ]
+      },
+      item.identifier
+    )) })
+  ] });
+};
+
+// src/components/IncremarkContainerProvider.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var IncremarkContainerProvider = ({ children, definitions }) => {
+  return /* @__PURE__ */ jsx15(DefinitionsContext.Provider, { value: definitions, children });
 };
 
 // src/components/Incremark.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Incremark = ({
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var Incremark = (props) => {
+  const {
+    blocks: propsBlocks,
+    components,
+    showBlockStatus = true,
+    className = "",
+    incremark
+  } = props;
+  if (incremark) {
+    const { blocks: blocks2, isFinalized: isFinalized2, _definitionsContextValue } = incremark;
+    return /* @__PURE__ */ jsx16(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx16(
+      IncremarkInternal,
+      {
+        blocks: blocks2,
+        components,
+        showBlockStatus,
+        className,
+        isFinalized: isFinalized2
+      }
+    ) });
+  }
+  const blocks = propsBlocks || [];
+  const isFinalized = blocks.length > 0 && blocks.every((b) => b.status === "completed");
+  return /* @__PURE__ */ jsx16(
+    IncremarkInternal,
+    {
+      blocks,
+      components,
+      showBlockStatus,
+      className,
+      isFinalized
+    }
+  );
+};
+var IncremarkInternal = ({
   blocks,
   components,
-  showBlockStatus = true,
-  className = ""
+  showBlockStatus,
+  className,
+  isFinalized
 }) => {
-  return /* @__PURE__ */ jsx2("div", { className: `incremark ${className}`, children: blocks.map((block) => {
-    const isPending = block.status === "pending";
-    const classes = [
-      "incremark-block",
-      isPending ? "incremark-pending" : "incremark-completed",
-      block.isLastPending ? "incremark-last-pending" : ""
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx2("div", { className: classes, children: /* @__PURE__ */ jsx2(IncremarkRenderer, { node: block.node, components }) }, block.stableId);
-  }) });
+  return /* @__PURE__ */ jsxs8("div", { className: `incremark ${className}`, children: [
+    blocks.map((block) => {
+      if (block.node.type === "definition" || block.node.type === "footnoteDefinition") {
+        return null;
+      }
+      const isPending = block.status === "pending";
+      const classes = [
+        "incremark-block",
+        isPending ? "incremark-pending" : "incremark-completed",
+        showBlockStatus && "incremark-show-status",
+        block.isLastPending && "incremark-last-pending"
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx16("div", { className: classes, children: /* @__PURE__ */ jsx16(IncremarkRenderer, { node: block.node, components }) }, block.stableId);
+    }),
+    isFinalized && /* @__PURE__ */ jsx16(IncremarkFootnotes, {})
+  ] });
 };
 
 // src/components/AutoScrollContainer.tsx
 import {
-  useRef as useRef4,
-  useEffect as useEffect4,
-  useCallback as useCallback3,
-  useState as useState3,
+  useRef as useRef7,
+  useEffect as useEffect6,
+  useCallback as useCallback7,
+  useState as useState7,
   forwardRef,
   useImperativeHandle
 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var AutoScrollContainer = forwardRef(
   ({
     children,
@@ -480,17 +1290,17 @@ var AutoScrollContainer = forwardRef(
     style,
     className
   }, ref) => {
-    const containerRef = useRef4(null);
-    const [isUserScrolledUp, setIsUserScrolledUp] = useState3(false);
-    const lastScrollTopRef = useRef4(0);
-    const lastScrollHeightRef = useRef4(0);
-    const isNearBottom = useCallback3(() => {
+    const containerRef = useRef7(null);
+    const [isUserScrolledUp, setIsUserScrolledUp] = useState7(false);
+    const lastScrollTopRef = useRef7(0);
+    const lastScrollHeightRef = useRef7(0);
+    const isNearBottom = useCallback7(() => {
       const container = containerRef.current;
       if (!container) return true;
       const { scrollTop, scrollHeight, clientHeight } = container;
       return scrollHeight - scrollTop - clientHeight <= threshold;
     }, [threshold]);
-    const scrollToBottom = useCallback3(
+    const scrollToBottom = useCallback7(
       (force = false) => {
         const container = containerRef.current;
         if (!container) return;
@@ -502,12 +1312,12 @@ var AutoScrollContainer = forwardRef(
       },
       [isUserScrolledUp, behavior]
     );
-    const hasScrollbar = useCallback3(() => {
+    const hasScrollbar = useCallback7(() => {
       const container = containerRef.current;
       if (!container) return false;
       return container.scrollHeight > container.clientHeight;
     }, []);
-    const handleScroll = useCallback3(() => {
+    const handleScroll = useCallback7(() => {
       const container = containerRef.current;
       if (!container) return;
       const { scrollTop, scrollHeight, clientHeight } = container;
@@ -529,14 +1339,14 @@ var AutoScrollContainer = forwardRef(
       lastScrollTopRef.current = scrollTop;
       lastScrollHeightRef.current = scrollHeight;
     }, [isNearBottom]);
-    useEffect4(() => {
+    useEffect6(() => {
       const container = containerRef.current;
       if (container) {
         lastScrollTopRef.current = container.scrollTop;
         lastScrollHeightRef.current = container.scrollHeight;
       }
     }, []);
-    useEffect4(() => {
+    useEffect6(() => {
       const container = containerRef.current;
       if (!container || !enabled) return;
       const observer = new MutationObserver(() => {
@@ -568,7 +1378,7 @@ var AutoScrollContainer = forwardRef(
       }),
       [scrollToBottom, isUserScrolledUp]
     );
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx17(
       "div",
       {
         ref: containerRef,
@@ -586,6 +1396,24 @@ var AutoScrollContainer = forwardRef(
 );
 AutoScrollContainer.displayName = "AutoScrollContainer";
 
+// src/ThemeProvider.tsx
+import { useEffect as useEffect7, useRef as useRef8 } from "react";
+import { applyTheme } from "@incremark/theme";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ThemeProvider = ({
+  theme,
+  children,
+  className = ""
+}) => {
+  const containerRef = useRef8(null);
+  useEffect7(() => {
+    if (containerRef.current) {
+      applyTheme(containerRef.current, theme);
+    }
+  }, [theme]);
+  return /* @__PURE__ */ jsx18("div", { ref: containerRef, className, children });
+};
+
 // src/index.ts
 import {
   BlockTransformer as BlockTransformer2,
@@ -602,24 +1430,84 @@ import {
   allPlugins,
   createPlugin
 } from "@incremark/core";
+import {
+  defaultTheme,
+  darkTheme,
+  generateCSSVars,
+  mergeTheme,
+  applyTheme as applyTheme2
+} from "@incremark/theme";
 export {
   AutoScrollContainer,
   BlockTransformer2 as BlockTransformer,
+  DefinitionsProvider,
   Incremark,
+  IncremarkContainerProvider,
+  IncremarkFootnotes,
+  IncremarkHtmlElement,
   IncremarkRenderer,
+  ThemeProvider,
   allPlugins,
+  applyTheme2 as applyTheme,
   cloneNode,
   codeBlockPlugin,
   countChars,
   createBlockTransformer3 as createBlockTransformer,
   createPlugin,
+  darkTheme,
   defaultPlugins2 as defaultPlugins,
+  defaultTheme,
+  generateCSSVars,
   imagePlugin,
   mathPlugin,
+  mergeTheme,
   mermaidPlugin,
   sliceAst,
   thematicBreakPlugin,
   useBlockTransformer,
+  useDefinitions,
   useDevTools,
   useIncremark
 };
+/**
+ * @file Definitions Context - 管理 Markdown 引用定义
+ * 
+ * @description
+ * 提供 definitions 和 footnoteDefinitions 的 Context，
+ * 用于支持引用式图片/链接的解析和渲染。
+ * 
+ * @author Incremark Team
+ * @license MIT
+ */
+/**
+ * @file Cursor Utils - 光标工具函数
+ *
+ * @description
+ * 用于在 AST 节点末尾添加光标的工具函数。
+ *
+ * @author Incremark Team
+ * @license MIT
+ */
+/**
+ * @file useTypewriter Hook - 打字机效果管理
+ *
+ * @description
+ * 管理打字机效果的状态和控制逻辑，从 useIncremark 中拆分出来以简化代码。
+ *
+ * @author Incremark Team
+ * @license MIT
+ */
+/**
+ * @file IncremarkContainerProvider - Incremark 容器级 Provider
+ *
+ * @description
+ * 用于在 Incremark 的渲染树根部统一注入各种 Context / 全局能力。
+ * 目前主要用于注入 DefinitionsContext（引用定义、脚注定义等）。
+ *
+ * 设计目标：
+ * - **对用户隐藏实现细节**：用户只需 `<Incremark incremark={incremark} />`
+ * - **为未来扩展留空间**：后续可在这里统一添加更多 Provider（主题、滚动、性能开关等）
+ *
+ * @author Incremark Team
+ * @license MIT
+ */