markstream-vue2 2.0.21 → 2.0.24

package/dist/index.js

@@ -54,8 +54,8 @@ import { sanitizeHtmlAttrs, hasCustomHtmlComponents, tokenizeHtml, BLOCKED_HTML_
 export * from "stream-markdown-parser";
 import { KATEX_COMMANDS, normalizeStandaloneBackslashT, setDefaultMathOptions as setDefaultMathOptions2 } from "stream-markdown-parser";
 import * as VueModule from "vue-demi";
-import { defineComponent, getCurrentInstance, computed, shallowRef, h, inject, ref, watch, readonly, useAttrs, onMounted, nextTick, onUpdated, onBeforeUnmount, provide, onUnmounted, getCurrentScope, onScopeDispose, markRaw, reactive } from "vue-demi";
-import { normalizeShikiLanguage, createSmoothMarkdownStream, createPanGesture, applyMermaidThemeDirective } from "markstream-core";
+import { defineComponent, getCurrentInstance, computed, shallowRef, h, inject, ref, onMounted, watch, onBeforeUnmount, readonly, useAttrs, nextTick, onUpdated, provide, onUnmounted, getCurrentScope, onScopeDispose, markRaw, reactive } from "vue-demi";
+import { createStreamingTextDom, normalizeShikiLanguage, createSmoothMarkdownStream, RENDERER_STREAM_DEFAULTS, createRendererStreamBridge, createStreamingTextScope, createPanGesture, applyMermaidThemeDirective } from "markstream-core";
 import { autoUpdate, offset, flip, shift, computePosition } from "@floating-ui/dom";
 function getVue2MinorVersion$1(version) {
   const raw = typeof version === "string" ? version : "";
@@ -633,20 +633,6 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    function settleAndMergeSegments(current, segmentId) {
-      return current.reduce((result, segment) => {
-        const nextSegment = segment.id === segmentId ? __spreadProps(__spreadValues({}, segment), { fading: false }) : segment;
-        const previousSegment = result[result.length - 1];
-        if (previousSegment && !previousSegment.fading && !nextSegment.fading) {
-          result[result.length - 1] = __spreadProps(__spreadValues({}, previousSegment), {
-            content: previousSegment.content + nextSegment.content
-          });
-        } else {
-          result.push(nextSegment);
-        }
-        return result;
-      }, []);
-    }
     const instance = getCurrentInstance();
     const attrs = computed(() => {
       var _a2, _b;
@@ -676,82 +662,29 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         return "";
       return String(raw);
     });
-    const segments = ref(props.node.code ? [{ id: 0, content: props.node.code, fading: false }] : []);
-    const renderedCode = ref(props.node.code);
-    let nextSegmentId = 1;
-    function setFullContent(next) {
-      var _a2;
-      if (segments.value.length === 1 && !((_a2 = segments.value[0]) == null ? void 0 : _a2.fading) && segments.value[0].content === next)
-        return;
-      segments.value = next ? [{ id: nextSegmentId++, content: next, fading: false }] : [];
-    }
-    function settleSegment(segmentId) {
-      if (!segments.value.some((segment) => segment.id === segmentId && segment.fading))
-        return;
-      segments.value = settleAndMergeSegments(segments.value, segmentId);
-    }
-    function streamedDeltaClass(segment) {
-      return segment.id % 2 === 0 ? "inline-code-stream-delta--a" : "inline-code-stream-delta--b";
+    const scope = inject("markstreamTextScope", void 0);
+    const host = ref();
+    const initial = props.node.code;
+    let binding;
+    function update() {
+      const content2 = props.node.code;
+      const key = streamStateKey.value;
+      binding == null ? void 0 : binding.update(content2, fadeEnabled.value, key ? inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.get(key) : void 0);
+      if (key)
+        inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.set(key, content2);
     }
-    watch(
-      [() => props.node.code, streamStateKey, fadeEnabled],
-      ([next]) => {
-        const normalized = String(next != null ? next : "");
-        const key = streamStateKey.value;
-        const previousPersisted = key ? inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.get(key) : void 0;
-        const previousContent = previousPersisted != null ? previousPersisted : renderedCode.value;
-        const resumeFromPersistedContent = previousPersisted !== void 0 && previousPersisted !== renderedCode.value;
-        if (!fadeEnabled.value) {
-          setFullContent(normalized);
-        } else if (normalized !== previousContent) {
-          if (previousContent && normalized.startsWith(previousContent)) {
-            const appendedContent = normalized.slice(previousContent.length);
-            const lastSegment = segments.value[segments.value.length - 1];
-            if (resumeFromPersistedContent) {
-              segments.value = [
-                { id: nextSegmentId++, content: previousContent, fading: false },
-                { id: nextSegmentId++, content: appendedContent, fading: true }
-              ];
-            } else if (lastSegment == null ? void 0 : lastSegment.fading) {
-              segments.value = [
-                ...segments.value.slice(0, -1),
-                __spreadProps(__spreadValues({}, lastSegment), { content: lastSegment.content + appendedContent })
-              ];
-            } else {
-              segments.value = [
-                ...segments.value,
-                { id: nextSegmentId++, content: appendedContent, fading: true }
-              ];
-            }
-          } else {
-            setFullContent(normalized);
-          }
-        }
-        renderedCode.value = normalized;
-        if (key)
-          inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.set(key, normalized);
-      },
-      { immediate: true }
-    );
-    watch(
-      fadeEnabled,
-      (enabled) => {
-        if (enabled)
-          return;
-        setFullContent(renderedCode.value);
-      }
-    );
-    return { __sfc: true, props, settleAndMergeSegments, instance, attrs, inheritedFade, inheritedTextStreamState, explicitFade, fadeEnabled, streamStateKey, segments, renderedCode, nextSegmentId, setFullContent, settleSegment, streamedDeltaClass };
+    onMounted(() => {
+      binding = createStreamingTextDom(host.value, initial, scope);
+      update();
+    });
+    watch([() => props.node.code, streamStateKey, fadeEnabled], update);
+    onBeforeUnmount(() => binding == null ? void 0 : binding.dispose());
+    return { __sfc: true, props, instance, attrs, inheritedFade, inheritedTextStreamState, explicitFade, fadeEnabled, streamStateKey, scope, host, initial, binding, update };
   }
 });
-const InlineCodeNode_vue_vue_type_style_index_0_scoped_8b374652_lang = "";
 var _sfc_render$D = function render6() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _c("code", { staticClass: "inline text-[85%] px-1 py-0.5 rounded font-mono bg-[hsl(var(--secondary))] whitespace-normal break-words max-w-full before:content-[''] after:content-['']" }, _vm._l(_setup.segments, function(segment) {
-    return _c("span", { key: segment.id, class: segment.fading ? ["inline-code-stream-delta", _setup.streamedDeltaClass(segment)] : void 0, on: { "animationend": function($event) {
-      segment.fading && _setup.settleSegment(segment.id);
-    } } }, [_vm._v(" " + _vm._s(segment.content) + " ")]);
-  }), 0);
+  return _c("code", { ref: "host", staticClass: "inline text-[85%] px-1 py-0.5 rounded font-mono bg-[hsl(var(--secondary))] whitespace-normal break-words max-w-full before:content-[''] after:content-['']" }, [_c("span", [_vm._v(_vm._s(_setup.initial))])]);
 };
 var _sfc_staticRenderFns$D = [];
 var __component__$D = /* @__PURE__ */ normalizeComponent(
@@ -760,7 +693,7 @@ var __component__$D = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns$D,
   false,
   null,
-  "8b374652",
+  null,
   null,
   null
 );
@@ -1144,23 +1077,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   props: {
     node: null
   },
-  emits: ["copy"],
   setup(__props) {
     const props = __props;
-    function settleAndMergeSegments(current, segmentId) {
-      return current.reduce((result, segment) => {
-        const nextSegment = segmentId == null || segment.id === segmentId ? __spreadProps(__spreadValues({}, segment), { fading: false }) : segment;
-        const previousSegment = result[result.length - 1];
-        if (previousSegment && !previousSegment.fading && !nextSegment.fading) {
-          result[result.length - 1] = __spreadProps(__spreadValues({}, previousSegment), {
-            content: previousSegment.content + nextSegment.content
-          });
-        } else {
-          result.push(nextSegment);
-        }
-        return result;
-      }, []);
-    }
     const katexReady = useKatexReady();
     const instance = getCurrentInstance();
     const attrs = computed(() => {
@@ -1169,7 +1087,6 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     });
     const inheritedFade = inject("markstreamFade", void 0);
     const inheritedTextStreamState = inject("markstreamTextStreamState", void 0);
-    const inheritedStreamVersion = inject("markstreamStreamVersion", void 0);
     const explicitFade = computed(() => {
       const raw = attrs.value.fade;
       if (raw === "" || raw === true || raw === "true")
@@ -1192,100 +1109,30 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         return "";
       return String(raw);
     });
-    const segments = ref(props.node.content ? [{ id: 0, content: props.node.content, fading: false }] : []);
-    const renderedContent = ref(props.node.content);
-    let nextSegmentId = 1;
-    function setFullContent(next) {
-      var _a2;
-      if (segments.value.length === 1 && !((_a2 = segments.value[0]) == null ? void 0 : _a2.fading) && segments.value[0].content === next)
-        return;
-      segments.value = next ? [{ id: nextSegmentId++, content: next, fading: false }] : [];
-    }
-    function settleSegment(segmentId) {
-      if (!segments.value.some((segment) => segment.id === segmentId && segment.fading))
-        return;
-      segments.value = settleAndMergeSegments(segments.value, segmentId);
-    }
-    function settleFadingSegments() {
-      if (!segments.value.some((segment) => segment.fading))
-        return;
-      segments.value = settleAndMergeSegments(segments.value);
-    }
-    function streamedDeltaClass(segment) {
-      return segment.id % 2 === 0 ? "text-node-stream-delta--a" : "text-node-stream-delta--b";
+    const scope = inject("markstreamTextScope", void 0);
+    const host = ref();
+    const initial = props.node.content;
+    let binding;
+    function update() {
+      const content2 = props.node.content;
+      const key = streamStateKey.value;
+      binding == null ? void 0 : binding.update(content2, fadeEnabled.value, key ? inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.get(key) : void 0);
+      if (key)
+        inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.set(key, content2);
     }
-    watch(
-      [() => props.node.content, streamStateKey, fadeEnabled, () => inheritedStreamVersion == null ? void 0 : inheritedStreamVersion.value],
-      ([next]) => {
-        const normalized = String(next != null ? next : "");
-        const key = streamStateKey.value;
-        const previousPersisted = key ? inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.get(key) : void 0;
-        const previousContent = previousPersisted != null ? previousPersisted : renderedContent.value;
-        const resumeFromPersistedContent = previousPersisted !== void 0 && previousPersisted !== renderedContent.value;
-        if (!fadeEnabled.value) {
-          setFullContent(normalized);
-          renderedContent.value = normalized;
-          if (key)
-            inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.set(key, normalized);
-          return;
-        }
-        if (normalized === previousContent) {
-          if (segments.value.some((segment) => segment.fading))
-            settleFadingSegments();
-          else if (renderedContent.value !== normalized)
-            setFullContent(normalized);
-          if (key)
-            inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.set(key, normalized);
-          renderedContent.value = normalized;
-          return;
-        }
-        if (previousContent && normalized.startsWith(previousContent)) {
-          const appendedContent = normalized.slice(previousContent.length);
-          const lastSegment = segments.value[segments.value.length - 1];
-          if (resumeFromPersistedContent) {
-            segments.value = [
-              { id: nextSegmentId++, content: previousContent, fading: false },
-              { id: nextSegmentId++, content: appendedContent, fading: true }
-            ];
-          } else if (lastSegment == null ? void 0 : lastSegment.fading) {
-            segments.value = [
-              ...segments.value.slice(0, -1),
-              __spreadProps(__spreadValues({}, lastSegment), { content: lastSegment.content + appendedContent })
-            ];
-          } else {
-            segments.value = [
-              ...segments.value,
-              { id: nextSegmentId++, content: appendedContent, fading: true }
-            ];
-          }
-        } else {
-          setFullContent(normalized);
-        }
-        renderedContent.value = normalized;
-        if (key)
-          inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.set(key, normalized);
-      },
-      { immediate: true }
-    );
-    watch(
-      fadeEnabled,
-      (enabled) => {
-        if (enabled)
-          return;
-        setFullContent(renderedContent.value);
-      }
-    );
-    return { __sfc: true, props, settleAndMergeSegments, katexReady, instance, attrs, inheritedFade, inheritedTextStreamState, inheritedStreamVersion, explicitFade, fadeEnabled, streamStateKey, segments, renderedContent, nextSegmentId, setFullContent, settleSegment, settleFadingSegments, streamedDeltaClass };
+    onMounted(() => {
+      binding = createStreamingTextDom(host.value, initial, scope);
+      update();
+    });
+    watch([() => props.node.content, streamStateKey, fadeEnabled], update);
+    onBeforeUnmount(() => binding == null ? void 0 : binding.dispose());
+    return { __sfc: true, props, katexReady, instance, attrs, inheritedFade, inheritedTextStreamState, explicitFade, fadeEnabled, streamStateKey, scope, host, initial, binding, update };
   }
 });
-const TextNode_vue_vue_type_style_index_0_scoped_152fed75_lang = "";
+const TextNode_vue_vue_type_style_index_0_scoped_593a680b_lang = "";
 var _sfc_render$B = function render8() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _c("span", { staticClass: "whitespace-pre-wrap break-words text-node", class: [_setup.katexReady && _vm.node.center ? "text-node-center" : ""] }, _vm._l(_setup.segments, function(segment) {
-    return _c("span", { key: segment.id, class: segment.fading ? ["text-node-stream-delta", _setup.streamedDeltaClass(segment)] : void 0, on: { "animationend": function($event) {
-      segment.fading && _setup.settleSegment(segment.id);
-    } } }, [_vm._v(" " + _vm._s(segment.content) + " ")]);
-  }), 0);
+  return _c("span", { ref: "host", staticClass: "whitespace-pre-wrap break-words text-node", class: _setup.katexReady && _vm.node.center ? "text-node-center" : "" }, [_c("span", [_vm._v(_vm._s(_setup.initial))])]);
 };
 var _sfc_staticRenderFns$B = [];
 var __component__$B = /* @__PURE__ */ normalizeComponent(
@@ -1294,7 +1141,7 @@ var __component__$B = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns$B,
   false,
   null,
-  "152fed75",
+  "593a680b",
   null,
   null
 );
@@ -4126,9 +3973,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         return {
           index: index2,
           indexKey: `${indexPrefix.value}-${index2}`,
-          // Keep code blocks mounted during streaming so Shiki/stream-diffs renderers can
-          // preserve their last successful DOM instead of flashing back to <pre>.
-          renderKey: type === "code_block" ? `${indexPrefix.value}-${index2}-${type}` : `${indexPrefix.value}-${index2}-${type}-${String((rawNode == null ? void 0 : rawNode.raw) || "").length}`,
+          // Streaming updates must preserve word animations and selected text nodes.
+          renderKey: `${indexPrefix.value}-${index2}-${type}`,
           node,
           isCodeBlock: (node == null ? void 0 : node.type) === "code_block",
           component,
@@ -5789,8 +5635,8 @@ function useSmoothMarkdownStream(options = {}) {
     pendingChars,
     enqueue: (chunk) => controller.enqueue(chunk),
     finish: (options2) => controller.finish(options2),
-    flush: () => controller.flush(),
-    reset: (initialMarkdown) => controller.reset(initialMarkdown),
+    flush: (options2) => controller.flush(options2),
+    reset: (initialMarkdown, options2) => controller.reset(initialMarkdown, options2),
     pause: () => controller.pause(),
     resume: () => controller.resume()
   };
@@ -5889,7 +5735,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   },
   emits: ["copy", "copy-code", "handleArtifactClick", "click", "mouseover", "mouseout"],
   setup(__props, { emit }) {
-    var _a2, _b, _c;
+    var _a2, _b, _c, _d;
     const props = __props;
     function isNativeDomEvent(value) {
       return typeof Event !== "undefined" && value instanceof Event;
@@ -5919,7 +5765,25 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     });
     const textStreamState = /* @__PURE__ */ new Map();
     const streamRenderVersion = ref(0);
-    const smoothStream = useSmoothMarkdownStream(props.smoothStreamingOptions);
+    const smoothStream = useSmoothMarkdownStream(__spreadProps(__spreadValues(__spreadValues({}, RENDERER_STREAM_DEFAULTS), props.smoothStreamingOptions), { burstInitialContent: props.fade === false && !props.typewriter }));
+    const finalReady = ref(false);
+    const streamBridge = createRendererStreamBridge(__spreadProps(__spreadValues({}, smoothStream), {
+      getSnapshot: () => ({ source: smoothStream.source.value, pendingChars: smoothStream.pendingChars.value, caughtUp: smoothStream.caughtUp.value })
+    }), {
+      flushOnFinish: (_a2 = props.smoothStreamingOptions) == null ? void 0 : _a2.flushOnFinish,
+      commit: (work) => __async(this, null, function* () {
+        work();
+        yield nextTick();
+      }),
+      measure: () => {
+        var _a3;
+        void ((_a3 = containerRef.value) == null ? void 0 : _a3.offsetHeight);
+      },
+      onReady: (value) => {
+        finalReady.value = value;
+      }
+    });
+    onBeforeUnmount(streamBridge.dispose);
     const resolvedShowTooltips = computed(() => {
       var _a3;
       if (typeof props.showTooltips === "boolean")
@@ -5983,11 +5847,15 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       const base = (_a3 = props.parseOptions) != null ? _a3 : {};
       return (_b2 = props.final) != null ? _b2 : base.final;
     });
+    const inheritedTextScope = inject("markstreamTextScope", void 0);
+    const ownTextScope = createStreamingTextScope(streamBridge.scheduleCleanup, inheritedTextScope);
+    provide("markstreamTextScope", ownTextScope);
+    watch(requestedFinal, (value) => ownTextScope.setFinal(value === true), { immediate: true, flush: "sync" });
     const effectiveFinal = computed(() => {
       const finalRequested = requestedFinal.value;
       if (smoothStreamingEnabled.value && finalRequested != null) {
         return Boolean(
-          finalRequested && smoothSourceSynced.value && smoothStream.caughtUp.value
+          finalRequested && finalReady.value && smoothSourceSynced.value && smoothStream.caughtUp.value
         );
       }
       return finalRequested;
@@ -6001,29 +5869,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     watch(
       [() => props.content, () => props.nodes, smoothStreamingEnabled, requestedFinal],
       ([content2, nodes, enabled, finalRequested]) => {
-        if (nodes == null ? void 0 : nodes.length) {
-          smoothStream.reset("");
-          return;
-        }
-        const nextContent = content2 != null ? content2 : "";
-        if (!enabled) {
-          smoothStream.reset(nextContent);
-          if (finalRequested)
-            smoothStream.finish({ flush: true });
-          return;
-        }
-        const source = smoothStream.source.value;
-        if (!nextContent) {
-          smoothStream.reset("");
-        } else if (nextContent === source)
-          ;
-        else if (nextContent.startsWith(source)) {
-          smoothStream.enqueue(nextContent.slice(source.length));
-        } else {
-          smoothStream.reset(nextContent);
-        }
-        if (finalRequested)
-          smoothStream.finish();
+        streamBridge.update(content2 != null ? content2 : "", !!(nodes == null ? void 0 : nodes.length), enabled, finalRequested, props.fade !== false);
       },
       { immediate: true }
     );
@@ -6116,8 +5962,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       const arr = (_a3 = mergedParseOptions.value.customHtmlTags) != null ? _a3 : [];
       return new Set(arr.map((t) => String(t).trim().toLowerCase()).filter(Boolean));
     });
+    const parsedSnapshots = /* @__PURE__ */ new WeakMap();
     const parsedNodes = computed(() => {
-      var _a3;
+      var _a3, _b2;
       if (isLegacyVue26Vm(instance == null ? void 0 : instance.proxy) && !props.content && Array.isArray(props.nodes))
         return EMPTY_PARSED_NODES;
       if ((_a3 = props.nodes) == null ? void 0 : _a3.length)
@@ -6125,7 +5972,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       const contentToParse = renderContent.value;
       if (contentToParse) {
         const parseStart = debugPerformanceEnabled.value ? performance.now() : 0;
-        const parsed = parseMarkdownToStructure(contentToParse, mdInstance.value, mergedParseOptions.value);
+        const base = mergedParseOptions.value;
+        const reuse = !props.customMarkdownIt && !base.preTransformTokens && !base.postTransformTokens && !base.postTransformNodes;
+        const parsed = parseMarkdownToStructure(contentToParse, mdInstance.value, __spreadProps(__spreadValues({}, base), {
+          streamParse: (_b2 = base.streamParse) != null ? _b2 : true,
+          reuseStableTopLevelNodes: reuse
+        }));
         if (debugPerformanceEnabled.value) {
           logPerf("parse(sync)", {
             ms: Math.round(performance.now() - parseStart),
@@ -6133,7 +5985,15 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             contentLength: contentToParse.length
           });
         }
-        return markRaw(cloneParsedNodeList(parsed));
+        return markRaw(parsed.map((node) => {
+          const cached = reuse ? parsedSnapshots.get(node) : void 0;
+          if (cached)
+            return cached;
+          const snapshot = cloneNodeValue(node);
+          if (reuse)
+            parsedSnapshots.set(node, snapshot);
+          return snapshot;
+        }));
       }
       return [];
     });
@@ -6163,7 +6023,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     );
     const requestFrame = isClient && typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame.bind(window) : null;
     const cancelFrame = isClient && typeof window.cancelAnimationFrame === "function" ? window.cancelAnimationFrame.bind(window) : null;
-    const isTestEnv = typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" && ((_b = (_a2 = globalThis.process) == null ? void 0 : _a2.env) == null ? void 0 : _b.NODE_ENV) === "test";
+    const isTestEnv = typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" && ((_c = (_b = globalThis.process) == null ? void 0 : _b.env) == null ? void 0 : _c.NODE_ENV) === "test";
     const hasIdleCallback = isClient && typeof window.requestIdleCallback === "function";
     const resolvedBatchSize = computed(() => {
       var _a3;
@@ -6235,7 +6095,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const previousBatchConfig = ref({
       batchSize: resolvedBatchSize.value,
       initial: resolvedInitialBatch.value,
-      delay: (_c = props.renderBatchDelay) != null ? _c : 16,
+      delay: (_d = props.renderBatchDelay) != null ? _d : 16,
       enabled: incrementalRenderingActive.value
     });
     const shouldObserveSlots = computed(() => !!registerNodeVisibility && (deferNodes.value || virtualizationEnabled.value));
@@ -6299,11 +6159,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       return Math.max(renderedCount.value, target);
     });
     function resolveScrollContainer(node) {
-      var _a3, _b2, _c2, _d;
+      var _a3, _b2, _c2, _d2;
       const resolved = resolveViewportRoot((_a3 = node != null ? node : containerRef.value) != null ? _a3 : null);
       if (resolved)
         return resolved;
-      const host = (_d = (_c2 = node == null ? void 0 : node.ownerDocument) != null ? _c2 : (_b2 = containerRef.value) == null ? void 0 : _b2.ownerDocument) != null ? _d : typeof document !== "undefined" ? document : null;
+      const host = (_d2 = (_c2 = node == null ? void 0 : node.ownerDocument) != null ? _c2 : (_b2 = containerRef.value) == null ? void 0 : _b2.ownerDocument) != null ? _d2 : typeof document !== "undefined" ? document : null;
       return (host == null ? void 0 : host.scrollingElement) || (host == null ? void 0 : host.documentElement) || null;
     }
     function isReverseFlexScrollRoot(root) {
@@ -6321,9 +6181,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
     }
     function getNormalizedScrollTop(root, doc, isViewportRoot) {
-      var _a3, _b2, _c2, _d, _e, _f;
+      var _a3, _b2, _c2, _d2, _e, _f;
       if (isViewportRoot)
-        return (_d = (_c2 = (_a3 = doc == null ? void 0 : doc.documentElement) == null ? void 0 : _a3.scrollTop) != null ? _c2 : (_b2 = doc == null ? void 0 : doc.body) == null ? void 0 : _b2.scrollTop) != null ? _d : 0;
+        return (_d2 = (_c2 = (_a3 = doc == null ? void 0 : doc.documentElement) == null ? void 0 : _a3.scrollTop) != null ? _c2 : (_b2 = doc == null ? void 0 : doc.body) == null ? void 0 : _b2.scrollTop) != null ? _d2 : 0;
       const raw = root.scrollTop;
       if (!isReverseFlexScrollRoot(root))
         return raw;
@@ -6401,7 +6261,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
     }
     function syncFocusToScroll(force = false) {
-      var _a3, _b2, _c2, _d, _e, _f, _g;
+      var _a3, _b2, _c2, _d2, _e, _f, _g;
       if (!virtualizationEnabled.value)
         return;
       const root = scrollRootElement.value || resolveScrollContainer();
@@ -6453,7 +6313,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           const offsetTop = getOffsetTopWithinRoot(container, root);
           return Math.max(0, rootScrollTop - offsetTop);
         })();
-        const viewportHeight = isViewportRoot ? (_g = (_f = (_e = view == null ? void 0 : view.innerHeight) != null ? _e : (_d = doc == null ? void 0 : doc.documentElement) == null ? void 0 : _d.clientHeight) != null ? _f : root.clientHeight) != null ? _g : 0 : root.clientHeight;
+        const viewportHeight = isViewportRoot ? (_g = (_f = (_e = view == null ? void 0 : view.innerHeight) != null ? _e : (_d2 = doc == null ? void 0 : doc.documentElement) == null ? void 0 : _d2.clientHeight) != null ? _f : root.clientHeight) != null ? _g : 0 : root.clientHeight;
         const targetOffset = relativeScrollTop + Math.max(0, viewportHeight) * 0.5;
         const estimated = estimateIndexForOffset(targetOffset);
         focusIndex.value = clamp(estimated, 0, Math.max(0, parsedNodes.value.length - 1));
@@ -7400,14 +7260,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       return code ? code.split(/\r\n|\n|\r/).length : 1;
     }
     function estimateBuiltinCodeBlockHeight(node) {
-      var _a3, _b2, _c2, _d, _e, _f, _g;
+      var _a3, _b2, _c2, _d2, _e, _f, _g;
       const lineHeight = (_b2 = (_a3 = props.codeBlockOptions) == null ? void 0 : _a3.lineHeight) != null ? _b2 : 18;
       const isDiff = Boolean(node.diff);
       const configuredDiffInline = pickBoolean(builtinCodeBlockExtraProps.value.diffInline);
       const diffInline = isDiff && (configuredDiffInline != null ? configuredDiffInline : ((_c2 = props.codeBlockOptions) == null ? void 0 : _c2.diffStyle) === "unified");
       const lineCount = isDiff ? diffInline ? countCodeLines(node.originalCode) + countCodeLines(node.updatedCode) : Math.max(countCodeLines(node.originalCode), countCodeLines(node.updatedCode)) : countCodeLines(node.code);
       const defaultPadding = isDiff ? 0 : 8;
-      const padding = (_e = (_d = props.codeBlockOptions) == null ? void 0 : _d.padding) != null ? _e : defaultPadding;
+      const padding = (_e = (_d2 = props.codeBlockOptions) == null ? void 0 : _d2.padding) != null ? _e : defaultPadding;
       const paddingTop = padding;
       const paddingBottom = padding;
       const maxHeight = (_g = (_f = props.codeBlockOptions) == null ? void 0 : _f.maxHeight) != null ? _g : 500;
@@ -7459,7 +7319,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const listBindings = computed(() => __spreadValues(__spreadValues({}, nonCodeBindings.value), typeof props.showTooltips === "boolean" ? { showTooltips: props.showTooltips } : {}));
     const legacyRenderedItems = computed(() => {
       return legacyNodeItems.value.map((item, index2) => {
-        var _a3, _b2, _c2, _d;
+        var _a3, _b2, _c2, _d2;
         const node = getCodeBlockRenderNode(item, index2);
         const language = getCodeBlockLanguage(node);
         let resolvedNode = node;
@@ -7479,7 +7339,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 });
               }
             } else if (shouldRenderUnknownHtmlTagAsText((_b2 = node.content) != null ? _b2 : node.raw, tag)) {
-              const rawContent2 = String((_d = (_c2 = node.content) != null ? _c2 : node.raw) != null ? _d : "");
+              const rawContent2 = String((_d2 = (_c2 = node.content) != null ? _c2 : node.raw) != null ? _d2 : "");
               if (node.type === "html_inline") {
                 component = TextNode;
                 resolvedNode = {
@@ -7516,7 +7376,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     });
     const renderedItems = computed(() => {
       return visibleNodes.value.map((item) => {
-        var _a3, _b2, _c2, _d;
+        var _a3, _b2, _c2, _d2;
         let node = getCodeBlockRenderNode(item.node, item.index);
         const language = getCodeBlockLanguage(node);
         let component = getNodeComponent(node, language);
@@ -7535,7 +7395,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 });
               }
             } else if (shouldRenderUnknownHtmlTagAsText((_b2 = node.content) != null ? _b2 : node.raw, tag)) {
-              const rawContent2 = String((_d = (_c2 = node.content) != null ? _c2 : node.raw) != null ? _d : "");
+              const rawContent2 = String((_d2 = (_c2 = node.content) != null ? _c2 : node.raw) != null ? _d2 : "");
               if (node.type === "html_inline") {
                 component = TextNode;
                 node = {
@@ -7887,14 +7747,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }),
       { flush: "post" }
     );
-    return { __sfc: true, props, emit, isNativeDomEvent, emitCodeCopy, MAX_DEFERRED_NODE_COUNT, MAX_VIEWPORT_OBSERVER_TARGETS, VIEWPORT_PRIORITY_RECOVERY_COUNT, containerRef, viewportPriorityAutoDisabled, SCROLL_PARENT_OVERFLOW_RE, isClient, instance, debugPerformanceEnabled, attrs, textStreamState, streamRenderVersion, smoothStream, resolvedShowTooltips, inheritedHtmlPolicy, inheritedSmoothStreaming, inheritedClipboardWriter, resolvedHtmlPolicy, smoothStreamingEligible, hasMountedForSmoothStreaming, smoothStreamingEnabled, renderContent, rawContent, smoothSourceSynced, requestedFinal, effectiveFinal, renderVersionSource, logPerf, resolveViewportRoot, instanceMsgId, defaultMd, customTagCache, EMPTY_PARSED_NODES, customComponentsMap, effectiveCustomHtmlTags, mdBase, mdInstance, cloneNodeValue, cloneParsedNodeList, mergedParseOptions, effectiveCustomHtmlTagsSet, parsedNodes, maxLiveNodesResolved, virtualizationEnabled, viewportPriorityEnabled, registerNodeVisibility, requestFrame, cancelFrame, isTestEnv, hasIdleCallback, resolvedBatchSize, resolvedInitialBatch, batchingEnabled, renderedCount, previousRenderContext, adaptiveBatchSize, nodeVisibilityState, nodeVisibilityHandles, nodeVisibilityFallbackTimers, nodeSlotElements, codeBlockRenderCache, nodeSlotVersion, sortedNodeSlots, scrollRootElement, detachScrollHandler, pendingFocusSync, liveRange, visibleNodes, deferNodes, incrementalRenderingActive, previousBatchConfig, shouldObserveSlots, liveNodeBufferResolved, focusIndex, nodeContentElements, legacyVue26, legacyNodesMode, legacyNodeItems, syncNodeRefs, resolveTemplateRef, desiredRenderedCount, resolveScrollContainer, isReverseFlexScrollRoot, getNormalizedScrollTop, getOffsetTopWithinRoot, cleanupScrollListener, setupScrollListener, cancelScheduledFocusSync, scheduleFocusSync, syncFocusToScroll, clamp, updateLiveRange, nodeHeights, heightStats, heightTreeSize, heightSumTree, heightKnownTree, resetHeightMeasurements, pruneHeightMeasurements, fenwickUpdate, fenwickQuery, fenwickRangeSum, rebuildHeightTrees, recordNodeHeight, averageNodeHeight, estimateHeightRange, topSpacerHeight, bottomSpacerHeight, estimateIndexForOffset, estimateIndexForOffsetFromEnd, cleanupNodeVisibility, markNodeVisible, shouldRenderNode, destroyNodeHandle, setNodeSlotElement, bumpNodeSlotVersion, setNodeContentRef, batchRaf, batchTimeout, batchPending, pendingIncrement, batchIdle, VIEWPORT_FALLBACK_DELAY, VIEWPORT_FALLBACK_MARGIN_PX, cancelBatchTimers, clearVisibilityFallback, scheduleVisibilityFallback, autoDisableViewportPriority, scheduleBatch, queueNextBatch, adjustAdaptiveBatchSize, MermaidBlockNodeLoading, mermaidBlockNodeComponent, mermaidBlockNodeImport, loadMermaidBlockNode, resolveMermaidBlockNodeComponent, InfographicBlockNodeLoading, infographicBlockNodeComponent, infographicBlockNodeImport, loadInfographicBlockNode, resolveInfographicBlockNodeComponent, D2BlockNodeAsync, codeBlockComponent, nodeComponents, indexPrefix, codeBlockExtraProps, builtinCodeBlockExtraProps, codeBlockBindings, customCodeBlockBindings, countCodeLines, estimateBuiltinCodeBlockHeight, pickBoolean, preCodeBlockBindings, mermaidBindings, d2Bindings, infographicBindings, nonCodeBindings, linkBindings, listBindings, legacyRenderedItems, legacyStructuredContentMode, renderedItems, getCodeBlockRenderNode, getCodeBlockLanguage, getCustomCodeLanguageComponent, isLegacyStructuredNode, getRenderKey, getMermaidBindingsFor, getInfographicBindingsFor, getNodeComponent, isCustomCodeBlockComponent, isCustomLanguageCodeBlockComponent, getBindingsFor, handleContainerClick, handleContainerMouseover, handleContainerMouseout, hasExplicitNodes, typewriterCursorRef, showTypewriterCursor, typewriterCursorTimeout, lastTypewriterContentLength, TYPEWRITER_CURSOR_EXCLUDED_NODE_TYPES, shouldSkipTypewriterCursorForNode, shouldShowTypewriterCursorForCurrentNodes, getNodeTextLength, getTypewriterContentLength, clearTypewriterCursorTimeout, getLastTextNode, updateTypewriterCursorPosition, LegacyNodesRenderer };
+    return { __sfc: true, props, emit, isNativeDomEvent, emitCodeCopy, MAX_DEFERRED_NODE_COUNT, MAX_VIEWPORT_OBSERVER_TARGETS, VIEWPORT_PRIORITY_RECOVERY_COUNT, containerRef, viewportPriorityAutoDisabled, SCROLL_PARENT_OVERFLOW_RE, isClient, instance, debugPerformanceEnabled, attrs, textStreamState, streamRenderVersion, smoothStream, finalReady, streamBridge, resolvedShowTooltips, inheritedHtmlPolicy, inheritedSmoothStreaming, inheritedClipboardWriter, resolvedHtmlPolicy, smoothStreamingEligible, hasMountedForSmoothStreaming, smoothStreamingEnabled, renderContent, rawContent, smoothSourceSynced, requestedFinal, inheritedTextScope, ownTextScope, effectiveFinal, renderVersionSource, logPerf, resolveViewportRoot, instanceMsgId, defaultMd, customTagCache, EMPTY_PARSED_NODES, customComponentsMap, effectiveCustomHtmlTags, mdBase, mdInstance, cloneNodeValue, cloneParsedNodeList, mergedParseOptions, effectiveCustomHtmlTagsSet, parsedSnapshots, parsedNodes, maxLiveNodesResolved, virtualizationEnabled, viewportPriorityEnabled, registerNodeVisibility, requestFrame, cancelFrame, isTestEnv, hasIdleCallback, resolvedBatchSize, resolvedInitialBatch, batchingEnabled, renderedCount, previousRenderContext, adaptiveBatchSize, nodeVisibilityState, nodeVisibilityHandles, nodeVisibilityFallbackTimers, nodeSlotElements, codeBlockRenderCache, nodeSlotVersion, sortedNodeSlots, scrollRootElement, detachScrollHandler, pendingFocusSync, liveRange, visibleNodes, deferNodes, incrementalRenderingActive, previousBatchConfig, shouldObserveSlots, liveNodeBufferResolved, focusIndex, nodeContentElements, legacyVue26, legacyNodesMode, legacyNodeItems, syncNodeRefs, resolveTemplateRef, desiredRenderedCount, resolveScrollContainer, isReverseFlexScrollRoot, getNormalizedScrollTop, getOffsetTopWithinRoot, cleanupScrollListener, setupScrollListener, cancelScheduledFocusSync, scheduleFocusSync, syncFocusToScroll, clamp, updateLiveRange, nodeHeights, heightStats, heightTreeSize, heightSumTree, heightKnownTree, resetHeightMeasurements, pruneHeightMeasurements, fenwickUpdate, fenwickQuery, fenwickRangeSum, rebuildHeightTrees, recordNodeHeight, averageNodeHeight, estimateHeightRange, topSpacerHeight, bottomSpacerHeight, estimateIndexForOffset, estimateIndexForOffsetFromEnd, cleanupNodeVisibility, markNodeVisible, shouldRenderNode, destroyNodeHandle, setNodeSlotElement, bumpNodeSlotVersion, setNodeContentRef, batchRaf, batchTimeout, batchPending, pendingIncrement, batchIdle, VIEWPORT_FALLBACK_DELAY, VIEWPORT_FALLBACK_MARGIN_PX, cancelBatchTimers, clearVisibilityFallback, scheduleVisibilityFallback, autoDisableViewportPriority, scheduleBatch, queueNextBatch, adjustAdaptiveBatchSize, MermaidBlockNodeLoading, mermaidBlockNodeComponent, mermaidBlockNodeImport, loadMermaidBlockNode, resolveMermaidBlockNodeComponent, InfographicBlockNodeLoading, infographicBlockNodeComponent, infographicBlockNodeImport, loadInfographicBlockNode, resolveInfographicBlockNodeComponent, D2BlockNodeAsync, codeBlockComponent, nodeComponents, indexPrefix, codeBlockExtraProps, builtinCodeBlockExtraProps, codeBlockBindings, customCodeBlockBindings, countCodeLines, estimateBuiltinCodeBlockHeight, pickBoolean, preCodeBlockBindings, mermaidBindings, d2Bindings, infographicBindings, nonCodeBindings, linkBindings, listBindings, legacyRenderedItems, legacyStructuredContentMode, renderedItems, getCodeBlockRenderNode, getCodeBlockLanguage, getCustomCodeLanguageComponent, isLegacyStructuredNode, getRenderKey, getMermaidBindingsFor, getInfographicBindingsFor, getNodeComponent, isCustomCodeBlockComponent, isCustomLanguageCodeBlockComponent, getBindingsFor, handleContainerClick, handleContainerMouseover, handleContainerMouseout, hasExplicitNodes, typewriterCursorRef, showTypewriterCursor, typewriterCursorTimeout, lastTypewriterContentLength, TYPEWRITER_CURSOR_EXCLUDED_NODE_TYPES, shouldSkipTypewriterCursorForNode, shouldShowTypewriterCursorForCurrentNodes, getNodeTextLength, getTypewriterContentLength, clearTypewriterCursorTimeout, getLastTextNode, updateTypewriterCursorPosition, LegacyNodesRenderer };
   }
 });
-const NodeRenderer_vue_vue_type_style_index_0_scoped_095485e0_lang = "";
+const NodeRenderer_vue_vue_type_style_index_0_scoped_a9d123de_lang = "";
 const NodeRenderer_vue_vue_type_style_index_1_lang = "";
 var _sfc_render$9 = function render36() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _c("div", { ref: "containerRef", staticClass: "markstream-vue2 markdown-renderer", class: [{ dark: _setup.props.isDark }, { virtualized: _setup.virtualizationEnabled }], attrs: { "data-custom-id": _setup.props.customId }, on: { "click": _setup.handleContainerClick, "mouseover": _setup.handleContainerMouseover, "mouseout": _setup.handleContainerMouseout } }, [_setup.legacyNodesMode ? _vm._l(_setup.legacyRenderedItems, function(item) {
+  return _c("div", { ref: "containerRef", staticClass: "markstream-vue2 markdown-renderer", class: [{ dark: _setup.props.isDark }, { virtualized: _setup.virtualizationEnabled }], attrs: { "data-stream-final": _setup.requestedFinal === true ? "" : void 0, "data-custom-id": _setup.props.customId }, on: { "click": _setup.handleContainerClick, "mouseover": _setup.handleContainerMouseover, "mouseout": _setup.handleContainerMouseout } }, [_setup.legacyNodesMode ? _vm._l(_setup.legacyRenderedItems, function(item) {
     return _c("div", { key: item.renderKey, staticClass: "node-slot", attrs: { "data-node-index": item.index, "data-node-type": item.node.type } }, [_c("div", { staticClass: "node-content" }, [!item.isCodeBlock && _setup.props.fade !== false ? _c("transition", { attrs: { "name": "fade", "appear": "" } }, [_c(item.component, _vm._b({ tag: "component", attrs: { "node": item.node, "loading": item.node.loading, "index-key": item.indexKey, "custom-id": _setup.props.customId, "is-dark": _setup.props.isDark }, on: { "copy": function($event) {
       return _setup.emitCodeCopy($event);
     }, "handle-artifact-click": function($event) {
@@ -7928,7 +7788,7 @@ var __component__$9 = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns$9,
   false,
   null,
-  "095485e0",
+  "a9d123de",
   null,
   null
 );
@@ -9072,10 +8932,25 @@ const _sfc_main$5 = defineComponent({
     LegacyNodesRenderer,
     NodeRenderer
   },
+  inject: {
+    inheritedSmooth: { from: "markstreamSmoothStreaming", default: void 0 },
+    inheritedTextScope: { from: "markstreamTextScope", default: void 0 }
+  },
+  provide() {
+    if (!this.legacyVue26)
+      return {};
+    const pacing = () => this.legacyPacing;
+    return {
+      markstreamTextScope: this.legacyTextScope,
+      markstreamSmoothStreaming: { get value() {
+        return pacing();
+      } }
+    };
+  },
   props: {
     content: String,
     nodes: Array,
-    final: Boolean,
+    final: { type: Boolean, default: void 0 },
     parseOptions: Object,
     customMarkdownIt: Function,
     debugPerformance: Boolean,
@@ -9102,6 +8977,8 @@ const _sfc_main$5 = defineComponent({
       type: Boolean,
       default: true
     },
+    smoothStreaming: { type: [Boolean, String], default: "auto" },
+    smoothStreamingOptions: Object,
     batchRendering: Boolean,
     initialRenderBatchSize: Number,
     renderBatchSize: Number,
@@ -9114,17 +8991,30 @@ const _sfc_main$5 = defineComponent({
   },
   data() {
     return {
+      legacyVisible: "",
+      legacyReady: false,
+      legacyStream: null,
+      legacyBridge: null,
+      legacyTextScope: createStreamingTextScope((work) => {
+        var _a2;
+        return (_a2 = this.legacyBridge) == null ? void 0 : _a2.scheduleCleanup(work);
+      }, this.inheritedTextScope),
       instanceMsgId: this.customId ? `renderer-${this.customId}` : `renderer-${Date.now()}-${Math.random().toString(36).slice(2)}`
     };
   },
   computed: {
+    legacyPacing() {
+      var _a2, _b, _c;
+      return this.smoothStreaming !== false && !((_a2 = this.nodes) == null ? void 0 : _a2.length) && (this.smoothStreaming === true || !((_b = this.inheritedSmooth) == null ? void 0 : _b.value) && (this.typewriter || ((_c = this.maxLiveNodes) != null ? _c : 0) <= 0));
+    },
     legacyVue26() {
       return isLegacyVue26Vm(this);
     },
     mergedParseOptions() {
-      var _a2, _b;
+      var _a2, _b, _c;
       const base = (_a2 = this.parseOptions) != null ? _a2 : {};
-      const resolvedFinal = (_b = this.final) != null ? _b : base.final;
+      const requestedFinal = (_b = this.final) != null ? _b : base.final;
+      const resolvedFinal = this.legacyVue26 && this.legacyPacing && requestedFinal === true ? this.legacyReady && this.legacyVisible === ((_c = this.content) != null ? _c : "") : requestedFinal;
       const merged = mergeCustomHtmlTags(this.customHtmlTags, base.customHtmlTags);
       const hasFinal = resolvedFinal != null;
       const hasCustom = merged.length > 0;
@@ -9133,17 +9023,22 @@ const _sfc_main$5 = defineComponent({
       return __spreadValues(__spreadValues(__spreadValues({}, base), hasFinal ? { final: resolvedFinal } : {}), hasCustom ? { customHtmlTags: merged } : {});
     },
     parsedLegacyNodes() {
-      var _a2;
+      var _a2, _b, _c;
       if (Array.isArray(this.nodes) && this.nodes.length > 0)
         return this.nodes;
-      if (!this.content)
+      const content2 = this.legacyPacing ? this.legacyVisible : this.content;
+      if (!content2)
         return [];
       const { key, tags } = resolveCustomHtmlTags((_a2 = this.mergedParseOptions) == null ? void 0 : _a2.customHtmlTags);
       const markdown = getMarkdown(key ? `${this.instanceMsgId}:${key}` : this.instanceMsgId, {
         customHtmlTags: tags
       });
       const md = this.customMarkdownIt ? this.customMarkdownIt(markdown) : markdown;
-      return parseMarkdownToStructure(this.content, md, this.mergedParseOptions);
+      const options = (_b = this.mergedParseOptions) != null ? _b : {};
+      return markRaw(parseMarkdownToStructure(content2, md, __spreadProps(__spreadValues({}, options), {
+        streamParse: (_c = options.streamParse) != null ? _c : true,
+        reuseStableTopLevelNodes: !this.customMarkdownIt && !options.preTransformTokens && !options.postTransformTokens && !options.postTransformNodes
+      })));
     },
     forwardedProps() {
       return {
@@ -9170,6 +9065,8 @@ const _sfc_main$5 = defineComponent({
         indexKey: this.indexKey,
         typewriter: this.typewriter,
         fade: this.fade,
+        smoothStreaming: this.smoothStreaming,
+        smoothStreamingOptions: this.smoothStreamingOptions,
         batchRendering: this.batchRendering,
         initialRenderBatchSize: this.initialRenderBatchSize,
         renderBatchSize: this.renderBatchSize,
@@ -9182,6 +9079,53 @@ const _sfc_main$5 = defineComponent({
       };
     }
   },
+  watch: {
+    content: "syncLegacyStream",
+    nodes: "syncLegacyStream",
+    final: "syncLegacyStream",
+    parseOptions: "syncLegacyStream",
+    smoothStreaming: "syncLegacyStream"
+  },
+  created() {
+    var _a2;
+    if (!this.legacyVue26)
+      return;
+    const stream = createSmoothMarkdownStream(__spreadValues(__spreadValues({}, RENDERER_STREAM_DEFAULTS), this.smoothStreamingOptions));
+    this.legacyStream = stream;
+    stream.subscribe(() => {
+      this.legacyVisible = stream.getSnapshot().visible;
+    });
+    this.legacyBridge = createRendererStreamBridge(stream, {
+      flushOnFinish: (_a2 = this.smoothStreamingOptions) == null ? void 0 : _a2.flushOnFinish,
+      commit: (work) => __async(this, null, function* () {
+        work();
+        yield this.$nextTick();
+      }),
+      measure: () => {
+        var _a3;
+        void ((_a3 = this.$el) == null ? void 0 : _a3.offsetHeight);
+      },
+      onReady: (ready) => {
+        this.legacyReady = ready;
+      }
+    });
+    this.syncLegacyStream();
+  },
+  beforeUnmount() {
+    var _a2, _b;
+    (_a2 = this.legacyBridge) == null ? void 0 : _a2.dispose();
+    (_b = this.legacyStream) == null ? void 0 : _b.destroy();
+  },
+  methods: {
+    syncLegacyStream() {
+      var _a2, _b, _c, _d;
+      if (!this.legacyBridge)
+        return;
+      const final = (_b = this.final) != null ? _b : (_a2 = this.parseOptions) == null ? void 0 : _a2.final;
+      this.legacyTextScope.setFinal(final === true);
+      this.legacyBridge.update((_c = this.content) != null ? _c : "", !!((_d = this.nodes) == null ? void 0 : _d.length), this.legacyPacing, final, this.fade !== false);
+    }
+  },
   render(h2) {
     const listeners = resolveVueListeners(this);
     if (this.legacyVue26) {