markstream-angular 2.0.21 → 2.0.24

package/dist/fesm2022/markstream-angular.mjs

@@ -1,9 +1,9 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component, forwardRef, inject, ChangeDetectorRef, ViewChild, ViewContainerRef, ElementRef, Renderer2, Directive, HostListener, Injectable, InjectionToken, EventEmitter, Output } from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component, forwardRef, inject, ChangeDetectorRef, ViewChild, ViewContainerRef, ElementRef, Renderer2, Directive, HostListener, InjectionToken, Optional, Inject, Injectable, EventEmitter, Output } from '@angular/core';
 import { normalizeCustomHtmlTags, normalizeCustomHtmlTagName, parseMarkdownToStructure, mergeCustomHtmlTags, getMarkdown, sanitizeHtmlAttrs, VOID_HTML_TAGS, BLOCKED_HTML_TAGS, isHtmlTagHardBlocked, isHtmlTagBlocked, isUnsafeHtmlUrl, shouldOpenLinkInNewTab, sanitizeImageSrc, NON_STRUCTURING_HTML_TAGS, toSafeMermaidSvgMarkup, getHtmlTagFromContent, stripCustomHtmlWrapper, STANDARD_HTML_TAGS, hasCompleteHtmlTagContent } from 'stream-markdown-parser';
-import { createPanGesture, applyMermaidThemeDirective, createSmoothMarkdownStream } from 'markstream-core';
+import { createPanGesture, createStreamingTextScope, createStreamingTextDom, applyMermaidThemeDirective, createSmoothMarkdownStream, RENDERER_STREAM_DEFAULTS, createRendererStreamBridge } from 'markstream-core';
 import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
 
 const TAG_TOKEN_RE = /<\/?([A-Z][\w:-]*)(?:\s[^<>]*)?>/gi;
@@ -5164,143 +5164,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                 args: ['window:keydown', ['$event']]
             }] } });
 
-function settleAndMergeSegments$1(segments, segmentId) {
-    return segments.reduce((result, segment) => {
-        const nextSegment = segment.id === segmentId
-            ? { ...segment, fading: false }
-            : segment;
-        const previousSegment = result[result.length - 1];
-        if (previousSegment && !previousSegment.fading && !nextSegment.fading) {
-            result[result.length - 1] = {
-                ...previousSegment,
-                content: previousSegment.content + nextSegment.content,
-            };
-        }
-        else {
-            result.push(nextSegment);
-        }
-        return result;
-    }, []);
-}
+const MARKSTREAM_SMOOTH_STREAMING_SCOPE = new InjectionToken('MARKSTREAM_SMOOTH_STREAMING_SCOPE');
+
 class InlineCodeNodeComponent {
-    constructor() {
-        this.segments = [];
-        this.renderedCode = '';
-        this.nextSegmentId = 0;
+    constructor(scope) {
+        this.scope = scope;
+        this.initial = '';
+        this.initialized = false;
+        this.localScope = createStreamingTextScope(work => work());
     }
     ngOnChanges() {
-        const nextCode = getString$1(this.node?.code);
-        const streamStateKey = getString$1(this.indexKey).trim();
-        const textStreamState = this.context?.textStreamState;
-        const previousPersisted = streamStateKey
-            ? textStreamState?.get(streamStateKey)
-            : undefined;
-        const previousCode = previousPersisted ?? this.renderedCode;
-        const resumeFromPersistedCode = previousPersisted !== undefined
-            && previousPersisted !== this.renderedCode;
-        if (!this.fadeEnabled) {
-            this.setFullCode(nextCode);
-        }
-        else if (nextCode !== previousCode) {
-            if (previousCode && nextCode.startsWith(previousCode)) {
-                const appendedCode = nextCode.slice(previousCode.length);
-                const lastSegment = this.segments[this.segments.length - 1];
-                if (resumeFromPersistedCode) {
-                    this.segments = [
-                        { id: this.nextSegmentId++, content: previousCode, fading: false },
-                        { id: this.nextSegmentId++, content: appendedCode, fading: true },
-                    ];
-                }
-                else if (lastSegment?.fading) {
-                    this.segments = [
-                        ...this.segments.slice(0, -1),
-                        { ...lastSegment, content: lastSegment.content + appendedCode },
-                    ];
-                }
-                else {
-                    this.segments = [
-                        ...this.segments,
-                        { id: this.nextSegmentId++, content: appendedCode, fading: true },
-                    ];
-                }
-            }
-            else {
-                this.setFullCode(nextCode);
-            }
+        if (!this.initialized) {
+            this.initial = getString$1(this.node.code);
+            this.initialized = true;
         }
-        this.renderedCode = nextCode;
-        if (streamStateKey)
-            textStreamState?.set(streamStateKey, nextCode);
-    }
-    get settledCode() {
-        return this.segments.filter(segment => !segment.fading).map(segment => segment.content).join('');
-    }
-    get streamedDelta() {
-        return this.segments.filter(segment => segment.fading).map(segment => segment.content).join('');
-    }
-    streamedDeltaClass(segment) {
-        return segment.id % 2 === 0
-            ? 'markstream-angular-text__stream-delta--a'
-            : 'markstream-angular-text__stream-delta--b';
-    }
-    get fadeEnabled() {
-        if (typeof this.fade === 'boolean')
-            return this.fade;
-        if (typeof this.context?.fade === 'boolean')
-            return this.context.fade;
-        return true;
-    }
-    get typewriterEnabled() {
-        if (typeof this.typewriter === 'boolean')
-            return this.typewriter;
-        if (typeof this.context?.typewriter === 'boolean')
-            return this.context.typewriter;
-        return false;
-    }
-    trackSegment(_index, segment) {
-        return segment.id;
+        this.update();
     }
-    settleSegment(segmentId) {
-        if (!this.segments.some(segment => segment.id === segmentId && segment.fading))
+    ngAfterViewInit() {
+        if (typeof window === 'undefined')
             return;
-        this.segments = settleAndMergeSegments$1(this.segments, segmentId);
+        this.binding = createStreamingTextDom(this.host.nativeElement, this.initial, this.scope?.textScope ?? this.localScope);
+        this.update();
     }
-    setFullCode(content) {
-        if (this.segments.length === 1 && !this.segments[0]?.fading && this.segments[0].content === content)
-            return;
-        this.segments = content
-            ? [{ id: this.nextSegmentId++, content, fading: false }]
-            : [];
+    ngOnDestroy() {
+        this.binding?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: InlineCodeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: InlineCodeNodeComponent, isStandalone: true, selector: "markstream-angular-inline-code-node", inputs: { node: "node", context: "context", indexKey: "indexKey", typewriter: "typewriter", fade: "fade" }, usesOnChanges: true, ngImport: i0, template: `
-    <code>
-      <span
-        *ngFor="let segment of segments; trackBy: trackSegment"
-        [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
-        (animationend)="segment.fading && settleSegment(segment.id)"
-      >{{ segment.content }}</span>
-    </code>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    update() {
+        if (!this.scope?.textScope)
+            this.localScope.setFinal(this.context?.final === true);
+        const content = getString$1(this.node.code);
+        const key = this.indexKey ?? '';
+        this.binding?.update(content, this.fade ?? this.context?.fade ?? true, key ? this.context?.textStreamState?.get(key) : undefined);
+        if (key)
+            this.context?.textStreamState?.set(key, content);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: InlineCodeNodeComponent, deps: [{ token: MARKSTREAM_SMOOTH_STREAMING_SCOPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: InlineCodeNodeComponent, isStandalone: true, selector: "markstream-angular-inline-code-node", inputs: { node: "node", context: "context", indexKey: "indexKey", typewriter: "typewriter", fade: "fade" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `<code #host><span>{{ initial }}</span></code>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: InlineCodeNodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'markstream-angular-inline-code-node',
                     standalone: true,
-                    imports: [CommonModule],
-                    template: `
-    <code>
-      <span
-        *ngFor="let segment of segments; trackBy: trackSegment"
-        [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
-        (animationend)="segment.fading && settleSegment(segment.id)"
-      >{{ segment.content }}</span>
-    </code>
-  `,
+                    template: `<code #host><span>{{ initial }}</span></code>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { node: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MARKSTREAM_SMOOTH_STREAMING_SCOPE]
+                }] }], propDecorators: { node: [{
                 type: Input,
                 args: [{ required: true }]
             }], context: [{
@@ -5311,6 +5225,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                 type: Input
             }], fade: [{
                 type: Input
+            }], host: [{
+                type: ViewChild,
+                args: ['host']
             }] } });
 
 class InsertNodeComponent {
@@ -5481,190 +5398,55 @@ function hideTooltip(immediate = false) {
         hideTimer = setTimeout(doHide, 120);
 }
 
-function settleAndMergeSegments(segments, segmentId) {
-    return segments.reduce((result, segment) => {
-        const nextSegment = segmentId == null || segment.id === segmentId
-            ? { ...segment, fading: false }
-            : segment;
-        const previousSegment = result[result.length - 1];
-        if (previousSegment && !previousSegment.fading && !nextSegment.fading) {
-            result[result.length - 1] = {
-                ...previousSegment,
-                content: previousSegment.content + nextSegment.content,
-            };
-        }
-        else {
-            result.push(nextSegment);
-        }
-        return result;
-    }, []);
-}
 class TextNodeComponent {
-    constructor() {
-        this.segments = [];
-        this.renderedText = '';
-        this.nextSegmentId = 0;
+    constructor(scope) {
+        this.scope = scope;
+        this.initial = '';
+        this.initialized = false;
+        this.localScope = createStreamingTextScope(work => work());
     }
     ngOnChanges() {
-        const nextText = getString$1(this.node?.content);
-        const streamStateKey = getString$1(this.indexKey).trim();
-        const textStreamState = this.context?.textStreamState;
-        const streamRenderVersion = this.context?.streamRenderVersion;
-        const streamRenderVersionChanged = streamRenderVersion !== this.lastStreamRenderVersion;
-        const previousPersisted = streamStateKey
-            ? textStreamState?.get(streamStateKey)
-            : undefined;
-        const previousText = previousPersisted ?? this.renderedText;
-        const resumeFromPersistedText = previousPersisted !== undefined
-            && previousPersisted !== this.renderedText;
-        if (!this.fadeEnabled) {
-            this.setFullText(nextText);
-            this.renderedText = nextText;
-            if (streamStateKey)
-                textStreamState?.set(streamStateKey, nextText);
-            this.lastStreamRenderVersion = streamRenderVersion;
-            return;
+        if (!this.initialized) {
+            this.initial = getString$1(this.node.content);
+            this.initialized = true;
         }
-        if (nextText === previousText) {
-            if (this.segments.some(segment => segment.fading) && streamRenderVersionChanged) {
-                this.settleFadingSegments();
-            }
-            else if (this.renderedText !== nextText) {
-                this.setFullText(nextText);
-            }
-            this.renderedText = nextText;
-            if (streamStateKey)
-                textStreamState?.set(streamStateKey, nextText);
-            this.lastStreamRenderVersion = streamRenderVersion;
-            return;
-        }
-        if (previousText && nextText.startsWith(previousText)) {
-            const appendedText = nextText.slice(previousText.length);
-            const lastSegment = this.segments[this.segments.length - 1];
-            if (resumeFromPersistedText) {
-                this.segments = [
-                    { id: this.nextSegmentId++, content: previousText, fading: false },
-                    { id: this.nextSegmentId++, content: appendedText, fading: true },
-                ];
-            }
-            else if (lastSegment?.fading) {
-                this.segments = [
-                    ...this.segments.slice(0, -1),
-                    { ...lastSegment, content: lastSegment.content + appendedText },
-                ];
-            }
-            else {
-                this.segments = [
-                    ...this.segments,
-                    { id: this.nextSegmentId++, content: appendedText, fading: true },
-                ];
-            }
-        }
-        else {
-            this.setFullText(nextText);
-        }
-        this.renderedText = nextText;
-        if (streamStateKey)
-            textStreamState?.set(streamStateKey, nextText);
-        this.lastStreamRenderVersion = streamRenderVersion;
-    }
-    get centered() {
-        return !!this.node?.center;
-    }
-    get settledText() {
-        return this.segments.filter(segment => !segment.fading).map(segment => segment.content).join('');
-    }
-    get streamedDelta() {
-        return this.segments.filter(segment => segment.fading).map(segment => segment.content).join('');
-    }
-    streamedDeltaClass(segment) {
-        return segment.id % 2 === 0
-            ? 'markstream-angular-text__stream-delta--a'
-            : 'markstream-angular-text__stream-delta--b';
+        this.update();
     }
-    get fadeEnabled() {
-        if (typeof this.fade === 'boolean')
-            return this.fade;
-        if (typeof this.context?.fade === 'boolean')
-            return this.context.fade;
-        return true;
-    }
-    get typewriterEnabled() {
-        if (typeof this.typewriter === 'boolean')
-            return this.typewriter;
-        if (typeof this.context?.typewriter === 'boolean')
-            return this.context.typewriter;
-        return false;
+    ngAfterViewInit() {
+        if (typeof window === 'undefined')
+            return;
+        this.binding = createStreamingTextDom(this.host.nativeElement, this.initial, this.scope?.textScope ?? this.localScope);
+        this.update();
     }
-    trackSegment(_index, segment) {
-        return segment.id;
+    ngOnDestroy() {
+        this.binding?.dispose();
     }
-    settleSegment(segmentId) {
-        if (!this.segments.some(segment => segment.id === segmentId && segment.fading))
-            return;
-        this.segments = settleAndMergeSegments(this.segments, segmentId);
+    update() {
+        if (!this.scope?.textScope)
+            this.localScope.setFinal(this.context?.final === true);
+        const content = getString$1(this.node.content);
+        const key = this.indexKey ?? '';
+        this.binding?.update(content, this.fade ?? this.context?.fade ?? true, key ? this.context?.textStreamState?.get(key) : undefined);
+        if (key)
+            this.context?.textStreamState?.set(key, content);
     }
-    setFullText(content) {
-        if (this.segments.length === 1 && !this.segments[0]?.fading && this.segments[0].content === content)
-            return;
-        this.segments = content
-            ? [{ id: this.nextSegmentId++, content, fading: false }]
-            : [];
-    }
-    settleFadingSegments() {
-        this.segments = settleAndMergeSegments(this.segments);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TextNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: TextNodeComponent, isStandalone: true, selector: "markstream-angular-text-node", inputs: { node: "node", context: "context", indexKey: "indexKey", typewriter: "typewriter", fade: "fade" }, usesOnChanges: true, ngImport: i0, template: `
-    <ng-container *ngIf="!centered; else centeredText">
-      <span class="markstream-angular-text-node">
-        <span
-          *ngFor="let segment of segments; trackBy: trackSegment"
-          [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
-          (animationend)="segment.fading && settleSegment(segment.id)"
-        >{{ segment.content }}</span>
-      </span>
-    </ng-container>
-    <ng-template #centeredText>
-      <span class="markstream-angular-text-node markstream-angular-text--centered">
-        <span
-          *ngFor="let segment of segments; trackBy: trackSegment"
-          [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
-          (animationend)="segment.fading && settleSegment(segment.id)"
-        >{{ segment.content }}</span>
-      </span>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TextNodeComponent, deps: [{ token: MARKSTREAM_SMOOTH_STREAMING_SCOPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: TextNodeComponent, isStandalone: true, selector: "markstream-angular-text-node", inputs: { node: "node", context: "context", indexKey: "indexKey", typewriter: "typewriter", fade: "fade" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `<span #host class="markstream-angular-text-node text-node" [class.markstream-angular-text--centered]="!!node.center"><span>{{ initial }}</span></span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TextNodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'markstream-angular-text-node',
                     standalone: true,
-                    imports: [CommonModule],
-                    template: `
-    <ng-container *ngIf="!centered; else centeredText">
-      <span class="markstream-angular-text-node">
-        <span
-          *ngFor="let segment of segments; trackBy: trackSegment"
-          [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
-          (animationend)="segment.fading && settleSegment(segment.id)"
-        >{{ segment.content }}</span>
-      </span>
-    </ng-container>
-    <ng-template #centeredText>
-      <span class="markstream-angular-text-node markstream-angular-text--centered">
-        <span
-          *ngFor="let segment of segments; trackBy: trackSegment"
-          [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
-          (animationend)="segment.fading && settleSegment(segment.id)"
-        >{{ segment.content }}</span>
-      </span>
-    </ng-template>
-  `,
+                    template: `<span #host class="markstream-angular-text-node text-node" [class.markstream-angular-text--centered]="!!node.center"><span>{{ initial }}</span></span>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { node: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MARKSTREAM_SMOOTH_STREAMING_SCOPE]
+                }] }], propDecorators: { node: [{
                 type: Input,
                 args: [{ required: true }]
             }], context: [{
@@ -5675,6 +5457,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                 type: Input
             }], fade: [{
                 type: Input
+            }], host: [{
+                type: ViewChild,
+                args: ['host']
             }] } });
 
 class LinkNodeComponent {
@@ -9829,6 +9614,7 @@ class SmoothMarkdownStreamService {
             final: false,
         };
         this.listeners = new Set();
+        this.getSnapshot = () => this.snapshot;
     }
     init(options = {}) {
         if (this.controller)
@@ -9866,8 +9652,8 @@ class SmoothMarkdownStreamService {
     get pendingChars() { return this.snapshot.pendingChars; }
     enqueue(chunk) { this.controller?.enqueue(chunk); }
     finish(options) { this.controller?.finish(options); }
-    flush() { this.controller?.flush(); }
-    reset(initialMarkdown) { this.controller?.reset(initialMarkdown); }
+    flush(options) { this.controller?.flush(options); }
+    reset(initialMarkdown, options) { this.controller?.reset(initialMarkdown, options); }
     pause() { this.controller?.pause(); }
     resume() { this.controller?.resume(); }
     syncSnapshot() {
@@ -9945,15 +9731,15 @@ function computeLiveRange(total, focusIndex, maxLiveNodes, liveNodeBuffer) {
     };
 }
 
-const MARKSTREAM_SMOOTH_STREAMING_SCOPE = new InjectionToken('MARKSTREAM_SMOOTH_STREAMING_SCOPE');
-
 const SCROLL_PARENT_OVERFLOW_RE = /auto|scroll|overlay/i;
 class NodeRendererComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
         this.hostRef = inject((ElementRef));
         this.smoothStream = new SmoothMarkdownStreamService();
+        this.finalReady = false;
         this.parentSmoothStreamingScope = inject(MARKSTREAM_SMOOTH_STREAMING_SCOPE, { optional: true, skipSelf: true });
+        this.ownTextScope = createStreamingTextScope(work => this.streamBridge.scheduleCleanup(work), this.parentSmoothStreamingScope?.textScope);
         this.content = '';
         this.htmlPolicy = 'safe';
         this.codeBlockStream = true;
@@ -10016,6 +9802,7 @@ class NodeRendererComponent {
             return `${this.resolvedIndexPrefix}-${entry.index}`;
         };
     }
+    get textScope() { return this.ownTextScope; }
     static { this.TYPEWRITER_CURSOR_EXCLUDED_NODE_TYPES = new Set(['code_block', 'admonition', 'table', 'math_block', 'html_block', 'image']); }
     get hasNodes() {
         return Array.isArray(this.nodes);
@@ -10060,7 +9847,7 @@ class NodeRendererComponent {
     }
     get effectiveFinal() {
         if (this.smoothStreamingEnabled && this.requestedFinal != null)
-            return Boolean(this.requestedFinal && this.smoothSourceSynced && this.smoothStream.caughtUp);
+            return Boolean(this.requestedFinal && this.finalReady && this.smoothSourceSynced && this.smoothStream.caughtUp);
         return this.requestedFinal;
     }
     get resolvedIndexPrefix() {
@@ -10135,7 +9922,7 @@ class NodeRendererComponent {
         this.rebuild();
     }
     ngOnInit() {
-        this.smoothStream.init(this.smoothStreamingOptions);
+        this.smoothStream.init({ ...RENDERER_STREAM_DEFAULTS, ...this.smoothStreamingOptions, burstInitialContent: this.fade === false && !this.typewriter });
         this.unsubscribeSmoothStream = this.smoothStream.subscribe(() => {
             if (this.isSyncingSmoothStream)
                 return;
@@ -10171,6 +9958,7 @@ class NodeRendererComponent {
         this.unsubscribeCustomComponents?.();
         this.unsubscribeCustomComponents = undefined;
         this.disconnectObserver();
+        this.streamBridge?.dispose();
         this.smoothStream.ngOnDestroy();
         if (this.enhancementTimer != null && typeof window !== 'undefined') {
             window.clearTimeout(this.enhancementTimer);
@@ -10193,39 +9981,36 @@ class NodeRendererComponent {
     }
     ensureSmoothStreamInitialized() {
         if (this.smoothStream)
-            this.smoothStream.init(this.smoothStreamingOptions);
+            this.smoothStream.init({ ...RENDERER_STREAM_DEFAULTS, ...this.smoothStreamingOptions, burstInitialContent: this.fade === false && !this.typewriter });
     }
     syncSmoothStream() {
         if (!this.smoothStream)
             return;
+        this.ownTextScope.setFinal(this.requestedFinal === true);
         this.isSyncingSmoothStream = true;
         try {
-            const nextContent = this.content ?? '';
-            if (this.hasNodes) {
-                this.smoothStream.reset('');
-                return;
-            }
-            if (!this.smoothStreamingEnabled) {
-                this.smoothStream.reset(nextContent);
-                if (this.requestedFinal)
-                    this.smoothStream.finish({ flush: true });
-                return;
-            }
-            const source = this.smoothStream.source;
-            if (!nextContent) {
-                this.smoothStream.reset('');
-            }
-            else if (nextContent === source) {
-                // no-op
-            }
-            else if (nextContent.startsWith(source)) {
-                this.smoothStream.enqueue(nextContent.slice(source.length));
-            }
-            else {
-                this.smoothStream.reset(nextContent);
-            }
-            if (this.requestedFinal)
-                this.smoothStream.finish();
+            this.streamBridge ??= createRendererStreamBridge({
+                getSnapshot: this.smoothStream.getSnapshot,
+                enqueue: chunk => this.smoothStream.enqueue(chunk),
+                finish: options => this.smoothStream.finish(options),
+                flush: options => this.smoothStream.flush(options),
+                reset: (content, options) => this.smoothStream.reset(content, options),
+                pause: () => this.smoothStream.pause(),
+                resume: () => this.smoothStream.resume(),
+            }, {
+                flushOnFinish: this.smoothStreamingOptions?.flushOnFinish,
+                commit: (work) => {
+                    work();
+                    this.cdr.detectChanges();
+                },
+                measure: () => { void this.rootRef?.nativeElement.offsetHeight; },
+                onReady: (value) => {
+                    this.finalReady = value;
+                    if (!this.isSyncingSmoothStream)
+                        this.rebuild();
+                },
+            });
+            this.streamBridge.update(this.content ?? '', this.hasNodes, this.smoothStreamingEnabled, this.requestedFinal, this.fade !== false);
         }
         finally {
             this.isSyncingSmoothStream = false;
@@ -10771,6 +10556,7 @@ class NodeRendererComponent {
         ], viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["root"], descendants: true }, { propertyName: "typewriterCursorRef", first: true, predicate: ["typewriterCursor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div
       #root
+      [attr.data-stream-final]="requestedFinal === true ? '' : null"
       class="markstream-angular markdown-renderer"
       [class.dark]="isDark"
       [class.virtualized]="virtualizationEnabled"
@@ -10841,6 +10627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                     template: `
     <div
       #root
+      [attr.data-stream-final]="requestedFinal === true ? '' : null"
       class="markstream-angular markdown-renderer"
       [class.dark]="isDark"
       [class.virtualized]="virtualizationEnabled"