@incremark/vue 0.0.4 → 0.1.0

package/dist/index.js

@@ -1,7 +1,9 @@
 // src/composables/useIncremark.ts
-import { ref, shallowRef, computed, markRaw } from "vue";
+import { ref, shallowRef, computed, markRaw, watch, onUnmounted } from "vue";
 import {
-  createIncremarkParser
+  createIncremarkParser,
+  createBlockTransformer,
+  defaultPlugins
 } from "@incremark/core";
 function useIncremark(options = {}) {
   const parser = createIncremarkParser(options);
@@ -9,6 +11,28 @@ function useIncremark(options = {}) {
   const pendingBlocks = shallowRef([]);
   const isLoading = ref(false);
   const markdown = ref("");
+  const typewriterEnabled = ref(options.typewriter?.enabled ?? !!options.typewriter);
+  const displayBlocksRef = shallowRef([]);
+  const isTypewriterProcessing = ref(false);
+  const isTypewriterPaused = ref(false);
+  const typewriterEffect = ref(options.typewriter?.effect ?? "none");
+  const typewriterCursor = ref(options.typewriter?.cursor ?? "|");
+  let transformer = null;
+  if (options.typewriter) {
+    const twOptions = options.typewriter;
+    transformer = createBlockTransformer({
+      charsPerTick: twOptions.charsPerTick ?? [1, 3],
+      tickInterval: twOptions.tickInterval ?? 30,
+      effect: twOptions.effect ?? "none",
+      pauseOnHidden: twOptions.pauseOnHidden ?? true,
+      plugins: twOptions.plugins ?? defaultPlugins,
+      onChange: (blocks2) => {
+        displayBlocksRef.value = blocks2;
+        isTypewriterProcessing.value = transformer?.isProcessing() ?? false;
+        isTypewriterPaused.value = transformer?.isPausedState() ?? false;
+      }
+    });
+  }
   const ast = computed(() => ({
     type: "root",
     children: [
@@ -16,7 +40,55 @@ function useIncremark(options = {}) {
       ...pendingBlocks.value.map((b) => b.node)
     ]
   }));
-  const blocks = computed(() => {
+  const sourceBlocks = computed(() => {
+    return completedBlocks.value.map((block) => ({
+      id: block.id,
+      node: block.node,
+      status: block.status
+    }));
+  });
+  if (transformer) {
+    watch(
+      sourceBlocks,
+      (blocks2) => {
+        transformer.push(blocks2);
+        const currentDisplaying = displayBlocksRef.value.find((b) => !b.isDisplayComplete);
+        if (currentDisplaying) {
+          const updated = blocks2.find((b) => b.id === currentDisplaying.id);
+          if (updated) {
+            transformer.update(updated);
+          }
+        }
+      },
+      { immediate: true, deep: true }
+    );
+  }
+  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;
+  }
+  const rawBlocks = computed(() => {
     const result = [];
     for (const block of completedBlocks.value) {
       result.push({ ...block, stableId: block.id });
@@ -29,6 +101,29 @@ function useIncremark(options = {}) {
     }
     return result;
   });
+  const blocks = computed(() => {
+    if (!typewriterEnabled.value || !transformer) {
+      return rawBlocks.value;
+    }
+    return displayBlocksRef.value.map((db, index) => {
+      const isPending = !db.isDisplayComplete;
+      const isLastPending = isPending && index === displayBlocksRef.value.length - 1;
+      let node = db.displayNode;
+      if (typewriterEffect.value === "typing" && isLastPending) {
+        node = addCursorToNode(db.displayNode, typewriterCursor.value);
+      }
+      return {
+        id: db.id,
+        stableId: db.id,
+        status: db.isDisplayComplete ? "completed" : "pending",
+        isLastPending,
+        node,
+        startOffset: 0,
+        endOffset: 0,
+        rawText: ""
+      };
+    });
+  });
   function append(chunk) {
     isLoading.value = true;
     const update = parser.append(chunk);
@@ -64,8 +159,9 @@ function useIncremark(options = {}) {
     pendingBlocks.value = [];
     markdown.value = "";
     isLoading.value = false;
+    transformer?.reset();
   }
-  function render13(content) {
+  function render14(content) {
     const update = parser.render(content);
     markdown.value = parser.getBuffer();
     completedBlocks.value = parser.getCompletedBlocks().map((b) => markRaw(b));
@@ -73,6 +169,43 @@ function useIncremark(options = {}) {
     isLoading.value = false;
     return update;
   }
+  const typewriter = {
+    enabled: typewriterEnabled,
+    isProcessing: computed(() => isTypewriterProcessing.value),
+    isPaused: computed(() => isTypewriterPaused.value),
+    effect: computed(() => typewriterEffect.value),
+    skip: () => transformer?.skip(),
+    pause: () => {
+      transformer?.pause();
+      isTypewriterPaused.value = true;
+    },
+    resume: () => {
+      transformer?.resume();
+      isTypewriterPaused.value = false;
+    },
+    setOptions: (opts) => {
+      if (opts.enabled !== void 0) {
+        typewriterEnabled.value = opts.enabled;
+      }
+      if (opts.charsPerTick !== void 0 || opts.tickInterval !== void 0 || opts.effect !== void 0 || opts.pauseOnHidden !== void 0) {
+        transformer?.setOptions({
+          charsPerTick: opts.charsPerTick,
+          tickInterval: opts.tickInterval,
+          effect: opts.effect,
+          pauseOnHidden: opts.pauseOnHidden
+        });
+      }
+      if (opts.effect !== void 0) {
+        typewriterEffect.value = opts.effect;
+      }
+      if (opts.cursor !== void 0) {
+        typewriterCursor.value = opts.cursor;
+      }
+    }
+  };
+  onUnmounted(() => {
+    transformer?.destroy();
+  });
   return {
     /** 已收集的完整 Markdown 字符串 */
     markdown,
@@ -82,7 +215,7 @@ function useIncremark(options = {}) {
     pendingBlocks,
     /** 当前完整的 AST */
     ast,
-    /** 所有块（完成 + 待处理），带稳定 ID */
+    /** 用于渲染的 blocks（根据打字机设置自动处理） */
     blocks,
     /** 是否正在加载 */
     isLoading,
@@ -92,12 +225,14 @@ function useIncremark(options = {}) {
     finalize,
     /** 强制中断 */
     abort,
-    /** 重置解析器 */
+    /** 重置解析器和打字机 */
     reset,
     /** 一次性渲染（reset + append + finalize） */
-    render: render13,
+    render: render14,
     /** 解析器实例 */
-    parser
+    parser,
+    /** 打字机控制 */
+    typewriter
   };
 }
 
@@ -126,7 +261,7 @@ function useStreamRenderer(options) {
 }
 
 // src/composables/useDevTools.ts
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted as onUnmounted2 } from "vue";
 import { createDevTools } from "@incremark/devtools";
 function useDevTools(incremark, options = {}) {
   const devtools = createDevTools(options);
@@ -147,27 +282,87 @@ function useDevTools(incremark, options = {}) {
   onMounted(() => {
     devtools.mount();
   });
-  onUnmounted(() => {
+  onUnmounted2(() => {
     devtools.unmount();
     incremark.parser.setOnChange(void 0);
   });
   return devtools;
 }
 
+// src/composables/useBlockTransformer.ts
+import { ref as ref3, watch as watch2, computed as computed3, onUnmounted as onUnmounted3 } from "vue";
+import {
+  createBlockTransformer as createBlockTransformer2
+} from "@incremark/core";
+function useBlockTransformer(sourceBlocks, options = {}) {
+  const displayBlocksRef = ref3([]);
+  const isProcessingRef = ref3(false);
+  const isPausedRef = ref3(false);
+  const effectRef = ref3(options.effect ?? "none");
+  const transformer = createBlockTransformer2({
+    ...options,
+    onChange: (blocks) => {
+      displayBlocksRef.value = blocks;
+      isProcessingRef.value = transformer.isProcessing();
+      isPausedRef.value = transformer.isPausedState();
+    }
+  });
+  watch2(
+    sourceBlocks,
+    (blocks) => {
+      transformer.push(blocks);
+      const currentDisplaying = displayBlocksRef.value.find((b) => !b.isDisplayComplete);
+      if (currentDisplaying) {
+        const updated = blocks.find((b) => b.id === currentDisplaying.id);
+        if (updated) {
+          transformer.update(updated);
+        }
+      }
+    },
+    { immediate: true, deep: true }
+  );
+  onUnmounted3(() => {
+    transformer.destroy();
+  });
+  return {
+    displayBlocks: computed3(() => displayBlocksRef.value),
+    isProcessing: computed3(() => isProcessingRef.value),
+    isPaused: computed3(() => isPausedRef.value),
+    effect: computed3(() => effectRef.value),
+    skip: () => transformer.skip(),
+    reset: () => transformer.reset(),
+    pause: () => {
+      transformer.pause();
+      isPausedRef.value = true;
+    },
+    resume: () => {
+      transformer.resume();
+      isPausedRef.value = false;
+    },
+    setOptions: (opts) => {
+      transformer.setOptions(opts);
+      if (opts.effect !== void 0) {
+        effectRef.value = opts.effect;
+      }
+    },
+    transformer
+  };
+}
+
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/Incremark.vue?type=script
 import { defineComponent as _defineComponent11 } from "vue";
-import { computed as computed7 } from "vue";
+import { computed as computed8 } from "vue";
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkHeading.vue?type=script
 import { defineComponent as _defineComponent3 } from "vue";
-import { computed as computed4 } from "vue";
+import { computed as computed5 } from "vue";
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkInline.vue?type=script
 import { defineComponent as _defineComponent2 } from "vue";
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkMath.vue?type=script
 import { defineComponent as _defineComponent } from "vue";
-import { computed as computed3, ref as ref3, watch, shallowRef as shallowRef2, onUnmounted as onUnmounted2 } from "vue";
+import { computed as computed4, ref as ref4, watch as watch3, shallowRef as shallowRef2, onUnmounted as onUnmounted4 } from "vue";
 var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
   __name: "IncremarkMath",
   props: {
@@ -177,13 +372,13 @@ var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const renderedHtml = ref3("");
-    const renderError = ref3("");
-    const isLoading = ref3(false);
+    const renderedHtml = ref4("");
+    const renderError = ref4("");
+    const isLoading = ref4(false);
     const katexRef = shallowRef2(null);
     let renderTimer = null;
-    const isInline = computed3(() => props.node.type === "inlineMath");
-    const formula = computed3(() => props.node.value);
+    const isInline = computed4(() => props.node.type === "inlineMath");
+    const formula = computed4(() => props.node.value);
     function scheduleRender() {
       if (!formula.value) {
         renderedHtml.value = "";
@@ -218,12 +413,12 @@ var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
         isLoading.value = false;
       }
     }
-    onUnmounted2(() => {
+    onUnmounted4(() => {
       if (renderTimer) {
         clearTimeout(renderTimer);
       }
     });
-    watch(formula, scheduleRender, { immediate: true });
+    watch3(formula, scheduleRender, { immediate: true });
     const __returned__ = { props, renderedHtml, renderError, isLoading, katexRef, get renderTimer() {
       return renderTimer;
     }, set renderTimer(v) {
@@ -326,10 +521,28 @@ var IncremarkInline_default = /* @__PURE__ */ _defineComponent2({
   },
   setup(__props, { expose: __expose }) {
     __expose();
-    function escapeHtml(str) {
-      return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    function getStableText(node) {
+      if (!node.chunks || node.chunks.length === 0) {
+        return node.value;
+      }
+      return node.value.slice(0, node.stableLength ?? 0);
+    }
+    function hasChunks(node) {
+      return node.type === "text" && "chunks" in node && Array.isArray(node.chunks);
     }
-    const __returned__ = { escapeHtml, IncremarkMath: IncremarkMath_default2 };
+    function getChunks(node) {
+      if (hasChunks(node)) {
+        return node.chunks;
+      }
+      return void 0;
+    }
+    function isHtmlNode(node) {
+      return node.type === "html";
+    }
+    function isInlineMath(node) {
+      return node.type === "inlineMath";
+    }
+    const __returned__ = { getStableText, hasChunks, getChunks, isHtmlNode, isInlineMath, IncremarkMath: IncremarkMath_default2 };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -340,6 +553,7 @@ import { renderList as _renderList, Fragment as _Fragment2, openBlock as _openBl
 var _hoisted_12 = { class: "incremark-inline-code" };
 var _hoisted_22 = ["href"];
 var _hoisted_32 = ["src", "alt"];
+var _hoisted_42 = ["innerHTML"];
 function render2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_IncremarkInline = _resolveComponent("IncremarkInline", true);
   return _openBlock2(true), _createElementBlock2(
@@ -350,20 +564,40 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
         _Fragment2,
         { key: idx },
         [
-          _createCommentVNode2(" \u6587\u672C "),
+          _createCommentVNode2(" \u6587\u672C\uFF08\u652F\u6301 chunks \u6E10\u5165\u52A8\u753B\uFF09 "),
           node.type === "text" ? (_openBlock2(), _createElementBlock2(
             _Fragment2,
             { key: 0 },
             [
+              _createCommentVNode2(" \u7A33\u5B9A\u6587\u672C\uFF08\u5DF2\u7ECF\u663E\u793A\u8FC7\u7684\u90E8\u5206\uFF0C\u65E0\u52A8\u753B\uFF09 "),
               _createTextVNode(
-                _toDisplayString2(node.value),
+                " " + _toDisplayString2($setup.getStableText(node)) + " ",
                 1
                 /* TEXT */
-              )
+              ),
+              _createCommentVNode2(" \u65B0\u589E\u7684 chunk \u90E8\u5206\uFF08\u5E26\u6E10\u5165\u52A8\u753B\uFF09 "),
+              (_openBlock2(true), _createElementBlock2(
+                _Fragment2,
+                null,
+                _renderList($setup.getChunks(node), (chunk) => {
+                  return _openBlock2(), _createElementBlock2(
+                    "span",
+                    {
+                      key: chunk.createdAt,
+                      class: "incremark-fade-in"
+                    },
+                    _toDisplayString2(chunk.text),
+                    1
+                    /* TEXT */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
             ],
             64
             /* STABLE_FRAGMENT */
-          )) : node.type === "inlineMath" ? (_openBlock2(), _createElementBlock2(
+          )) : $setup.isInlineMath(node) ? (_openBlock2(), _createElementBlock2(
             _Fragment2,
             { key: 1 },
             [
@@ -473,6 +707,17 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
             ],
             2112
             /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )) : $setup.isHtmlNode(node) ? (_openBlock2(), _createElementBlock2(
+            _Fragment2,
+            { key: 9 },
+            [
+              _createCommentVNode2(" \u539F\u59CB HTML "),
+              _createElementVNode2("span", {
+                innerHTML: node.value
+              }, null, 8, _hoisted_42)
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
           )) : _createCommentVNode2("v-if", true)
         ],
         64
@@ -498,7 +743,7 @@ var IncremarkHeading_default = /* @__PURE__ */ _defineComponent3({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const tag = computed4(() => `h${props.node.depth}`);
+    const tag = computed5(() => `h${props.node.depth}`);
     const __returned__ = { props, tag, IncremarkInline: IncremarkInline_default2 };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
@@ -559,7 +804,7 @@ var IncremarkParagraph_default2 = IncremarkParagraph_default;
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkCode.vue?type=script
 import { defineComponent as _defineComponent5 } from "vue";
-import { computed as computed5, ref as ref4, watch as watch2, shallowRef as shallowRef3, onUnmounted as onUnmounted3 } from "vue";
+import { computed as computed6, ref as ref5, watch as watch4, shallowRef as shallowRef3, onUnmounted as onUnmounted5 } from "vue";
 var IncremarkCode_default = /* @__PURE__ */ _defineComponent5({
   __name: "IncremarkCode",
   props: {
@@ -571,22 +816,22 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent5({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const copied = ref4(false);
-    const highlightedHtml = ref4("");
-    const isHighlighting = ref4(false);
-    const highlightError = ref4(false);
-    const mermaidSvg = ref4("");
-    const mermaidError = ref4("");
-    const mermaidLoading = ref4(false);
+    const copied = ref5(false);
+    const highlightedHtml = ref5("");
+    const isHighlighting = ref5(false);
+    const highlightError = ref5(false);
+    const mermaidSvg = ref5("");
+    const mermaidError = ref5("");
+    const mermaidLoading = ref5(false);
     const mermaidRef = shallowRef3(null);
     let mermaidTimer = null;
-    const mermaidViewMode = ref4("preview");
+    const mermaidViewMode = ref5("preview");
     function toggleMermaidView() {
       mermaidViewMode.value = mermaidViewMode.value === "preview" ? "source" : "preview";
     }
-    const language = computed5(() => props.node.lang || "text");
-    const code = computed5(() => props.node.value);
-    const isMermaid = computed5(() => language.value === "mermaid");
+    const language = computed6(() => props.node.lang || "text");
+    const code = computed6(() => props.node.value);
+    const isMermaid = computed6(() => language.value === "mermaid");
     const highlighterRef = shallowRef3(null);
     const loadedLanguages = /* @__PURE__ */ new Set();
     const loadedThemes = /* @__PURE__ */ new Set();
@@ -624,7 +869,7 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent5({
         mermaidLoading.value = false;
       }
     }
-    onUnmounted3(() => {
+    onUnmounted5(() => {
       if (mermaidTimer) {
         clearTimeout(mermaidTimer);
       }
@@ -677,7 +922,7 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent5({
         isHighlighting.value = false;
       }
     }
-    watch2([code, () => props.theme, isMermaid], highlight, { immediate: true });
+    watch4([code, () => props.theme, isMermaid], highlight, { immediate: true });
     async function copyCode() {
       try {
         await navigator.clipboard.writeText(code.value);
@@ -706,7 +951,7 @@ var _hoisted_14 = {
 };
 var _hoisted_23 = { class: "mermaid-header" };
 var _hoisted_33 = { class: "mermaid-actions" };
-var _hoisted_42 = ["disabled"];
+var _hoisted_43 = ["disabled"];
 var _hoisted_52 = { class: "mermaid-content" };
 var _hoisted_62 = {
   key: 0,
@@ -747,7 +992,7 @@ function render5(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: $setup.toggleMermaidView,
               type: "button",
               disabled: !$setup.mermaidSvg
-            }, _toDisplayString3($setup.mermaidViewMode === "preview" ? "\u6E90\u7801" : "\u9884\u89C8"), 9, _hoisted_42),
+            }, _toDisplayString3($setup.mermaidViewMode === "preview" ? "\u6E90\u7801" : "\u9884\u89C8"), 9, _hoisted_43),
             _createElementVNode3(
               "button",
               {
@@ -903,7 +1148,7 @@ var IncremarkCode_default2 = IncremarkCode_default;
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkList.vue?type=script
 import { defineComponent as _defineComponent6 } from "vue";
-import { computed as computed6 } from "vue";
+import { computed as computed7 } from "vue";
 var IncremarkList_default = /* @__PURE__ */ _defineComponent6({
   __name: "IncremarkList",
   props: {
@@ -912,7 +1157,7 @@ var IncremarkList_default = /* @__PURE__ */ _defineComponent6({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const tag = computed6(() => props.node.ordered ? "ol" : "ul");
+    const tag = computed7(() => props.node.ordered ? "ol" : "ul");
     function getItemContent(item) {
       const firstChild = item.children[0];
       if (firstChild?.type === "paragraph") {
@@ -1234,7 +1479,7 @@ var Incremark_default = /* @__PURE__ */ _defineComponent11({
       math: IncremarkMath_default2,
       inlineMath: IncremarkMath_default2
     };
-    const mergedComponents = computed7(() => ({
+    const mergedComponents = computed8(() => ({
       ...defaultComponents,
       ...props.components
     }));
@@ -1265,7 +1510,8 @@ function render11(_ctx, _cache, $props, $setup, $data, $options) {
                 class: _normalizeClass2([
                   "incremark-block",
                   block.status === "completed" ? $props.completedClass : $props.pendingClass,
-                  { "incremark-show-status": $props.showBlockStatus }
+                  { "incremark-show-status": $props.showBlockStatus },
+                  { "incremark-last-pending": block.isLastPending }
                 ])
               },
               [
@@ -1332,7 +1578,160 @@ function render12(_ctx, _cache, $props, $setup, $data, $options) {
 IncremarkRenderer_default.render = render12;
 IncremarkRenderer_default.__file = "src/components/IncremarkRenderer.vue";
 var IncremarkRenderer_default2 = IncremarkRenderer_default;
+
+// sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/AutoScrollContainer.vue?type=script
+import { defineComponent as _defineComponent13 } from "vue";
+import { ref as ref6, onMounted as onMounted2, onUnmounted as onUnmounted6, nextTick } from "vue";
+var AutoScrollContainer_default = /* @__PURE__ */ _defineComponent13({
+  __name: "AutoScrollContainer",
+  props: {
+    enabled: { type: Boolean, required: false, default: true },
+    threshold: { type: Number, required: false, default: 50 },
+    behavior: { type: null, required: false, default: "instant" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const containerRef = ref6(null);
+    const isUserScrolledUp = ref6(false);
+    let lastScrollTop = 0;
+    let lastScrollHeight = 0;
+    function isNearBottom() {
+      const container = containerRef.value;
+      if (!container) return true;
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      return scrollHeight - scrollTop - clientHeight <= props.threshold;
+    }
+    function scrollToBottom(force = false) {
+      const container = containerRef.value;
+      if (!container) return;
+      if (isUserScrolledUp.value && !force) return;
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: props.behavior
+      });
+    }
+    function hasScrollbar() {
+      const container = containerRef.value;
+      if (!container) return false;
+      return container.scrollHeight > container.clientHeight;
+    }
+    function handleScroll() {
+      const container = containerRef.value;
+      if (!container) return;
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      if (scrollHeight <= clientHeight) {
+        isUserScrolledUp.value = false;
+        lastScrollTop = 0;
+        lastScrollHeight = scrollHeight;
+        return;
+      }
+      if (isNearBottom()) {
+        isUserScrolledUp.value = false;
+      } else {
+        const isScrollingUp = scrollTop < lastScrollTop;
+        const isContentUnchanged = scrollHeight === lastScrollHeight;
+        if (isScrollingUp && isContentUnchanged) {
+          isUserScrolledUp.value = true;
+        }
+      }
+      lastScrollTop = scrollTop;
+      lastScrollHeight = scrollHeight;
+    }
+    let observer = null;
+    onMounted2(() => {
+      if (!containerRef.value) return;
+      lastScrollTop = containerRef.value.scrollTop;
+      lastScrollHeight = containerRef.value.scrollHeight;
+      observer = new MutationObserver(() => {
+        nextTick(() => {
+          if (!containerRef.value) return;
+          if (!hasScrollbar()) {
+            isUserScrolledUp.value = false;
+          }
+          lastScrollHeight = containerRef.value.scrollHeight;
+          if (props.enabled && !isUserScrolledUp.value) {
+            scrollToBottom();
+          }
+        });
+      });
+      observer.observe(containerRef.value, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    });
+    onUnmounted6(() => {
+      observer?.disconnect();
+    });
+    __expose({
+      /** 强制滚动到底部 */
+      scrollToBottom: () => scrollToBottom(true),
+      /** 是否用户手动向上滚动了 */
+      isUserScrolledUp: () => isUserScrolledUp.value,
+      /** 容器元素引用 */
+      container: containerRef
+    });
+    const __returned__ = { props, containerRef, isUserScrolledUp, get lastScrollTop() {
+      return lastScrollTop;
+    }, set lastScrollTop(v) {
+      lastScrollTop = v;
+    }, get lastScrollHeight() {
+      return lastScrollHeight;
+    }, set lastScrollHeight(v) {
+      lastScrollHeight = v;
+    }, isNearBottom, scrollToBottom, hasScrollbar, handleScroll, get observer() {
+      return observer;
+    }, set observer(v) {
+      observer = v;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+// sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/AutoScrollContainer.vue?type=template
+import { renderSlot as _renderSlot, openBlock as _openBlock13, createElementBlock as _createElementBlock11 } from "vue";
+function render13(_ctx, _cache, $props, $setup, $data, $options) {
+  return _openBlock13(), _createElementBlock11(
+    "div",
+    {
+      ref: "containerRef",
+      class: "auto-scroll-container",
+      onScroll: $setup.handleScroll
+    },
+    [
+      _renderSlot(_ctx.$slots, "default", {}, void 0, true)
+    ],
+    544
+    /* NEED_HYDRATION, NEED_PATCH */
+  );
+}
+
+// src/components/AutoScrollContainer.vue
+AutoScrollContainer_default.render = render13;
+AutoScrollContainer_default.__file = "src/components/AutoScrollContainer.vue";
+AutoScrollContainer_default.__scopeId = "data-v-e0d180b8";
+var AutoScrollContainer_default2 = AutoScrollContainer_default;
+
+// src/index.ts
+import {
+  BlockTransformer as BlockTransformer2,
+  createBlockTransformer as createBlockTransformer3,
+  countChars,
+  sliceAst,
+  cloneNode,
+  codeBlockPlugin,
+  mermaidPlugin,
+  imagePlugin,
+  mathPlugin,
+  thematicBreakPlugin,
+  defaultPlugins as defaultPlugins2,
+  allPlugins,
+  createPlugin
+} from "@incremark/core";
 export {
+  AutoScrollContainer_default2 as AutoScrollContainer,
+  BlockTransformer2 as BlockTransformer,
   Incremark_default2 as Incremark,
   IncremarkBlockquote_default2 as IncremarkBlockquote,
   IncremarkCode_default2 as IncremarkCode,
@@ -1345,6 +1744,19 @@ export {
   IncremarkRenderer_default2 as IncremarkRenderer,
   IncremarkTable_default2 as IncremarkTable,
   IncremarkThematicBreak_default2 as IncremarkThematicBreak,
+  allPlugins,
+  cloneNode,
+  codeBlockPlugin,
+  countChars,
+  createBlockTransformer3 as createBlockTransformer,
+  createPlugin,
+  defaultPlugins2 as defaultPlugins,
+  imagePlugin,
+  mathPlugin,
+  mermaidPlugin,
+  sliceAst,
+  thematicBreakPlugin,
+  useBlockTransformer,
   useDevTools,
   useIncremark,
   useStreamRenderer