streamdown-angular 0.4.0

package/fesm2022/streamdown-angular.mjs

@@ -0,0 +1,1936 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, Injectable, makeEnvironmentProviders, inject, RendererFactory2, input, ChangeDetectionStrategy, Component, ViewContainerRef, viewChild, computed, effect, Renderer2, ViewEncapsulation, ElementRef, provideEnvironmentInitializer } from '@angular/core';
+import { clsx } from 'clsx';
+import { DomSanitizer } from '@angular/platform-browser';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import remend from 'remend';
+import { marked } from 'marked';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+
+/**
+ * Merges class values into a single string (Streamdown `cn`).
+ * Accepts array/object/conditional values: `cn('a', cond && 'b', ['c'])`.
+ * (No Tailwind needed — styles now live as plain CSS in `streamdown.css`.)
+ */
+function cn(...inputs) {
+    return clsx(inputs);
+}
+/**
+ * HTML tagName → extra class. Empty (default) — because all typography is
+ * provided via element selectors in `streamdown.css` (`.ngx-streamdown h1` ...) and
+ * inlined automatically into `HastRendererComponent` (no Tailwind needed).
+ *
+ * Users can add their own extra classes for tags here, for example:
+ *   ELEMENT_CLASSES['h1'] = 'my-heading';
+ * This value is merged with the element's own `className` via `cn()`.
+ */
+const ELEMENT_CLASSES = {};
+/**
+ * Tags that require a dedicated Angular component (tagName → component class).
+ * Currently empty; in later stages `pre` → CodeBlock, `table` → Table will be added.
+ * Tags not in this map are rendered as generic DOM elements.
+ */
+const COMPONENT_MAP = new Map();
+
+/** Whether link safety is enabled (default: no). */
+const STREAMDOWN_LINK_SAFETY = new InjectionToken('STREAMDOWN_LINK_SAFETY');
+/**
+ * Manages the confirmation modal shown when an external link is clicked.
+ * Angular equivalent of the Streamdown `lib/link-modal.tsx` logic.
+ */
+class LinkModalService {
+    /** URL awaiting confirmation (modal is closed when null). */
+    pendingUrl = signal(null, ...(ngDevMode ? [{ debugName: "pendingUrl" }] : /* istanbul ignore next */ []));
+    /** Opens the modal with the given URL. */
+    request(url) {
+        this.pendingUrl.set(url);
+    }
+    /** Confirms: opens the link in a new window and closes the modal. */
+    confirm() {
+        const url = this.pendingUrl();
+        if (url && typeof window !== 'undefined') {
+            window.open(url, '_blank', 'noopener,noreferrer');
+        }
+        this.pendingUrl.set(null);
+    }
+    /** Cancels: closes the modal, the link is not opened. */
+    cancel() {
+        this.pendingUrl.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LinkModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LinkModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LinkModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Enables the confirmation modal for external links (safety UX).
+ * When enabled, clicking http(s) links first shows the modal.
+ */
+function provideStreamdownLinkSafety() {
+    return makeEnvironmentProviders([{ provide: STREAMDOWN_LINK_SAFETY, useValue: true }]);
+}
+
+/**
+ * Fade-in animation for new elements (those that appear during streaming).
+ * The styles must be global (the renderer creates DOM outside the Angular template),
+ * so we inject them into `document.head` once.
+ */
+const FADE_CLASS = 'ngx-sd-fade';
+let injected$1 = false;
+/** Injects the fade-in keyframe + class styles once. */
+function ensureFadeStyles() {
+    if (injected$1 || typeof document === 'undefined') {
+        return;
+    }
+    injected$1 = true;
+    const style = document.createElement('style');
+    style.textContent = `
+@keyframes ngx-sd-fadein { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
+.${FADE_CLASS} { animation: ngx-sd-fadein 0.4s ease-out; }
+@media (prefers-reduced-motion: reduce) { .${FADE_CLASS} { animation: none; } }
+`;
+    document.head.appendChild(style);
+}
+
+/** Add a fade-in animation to new elements (optional). */
+const STREAMDOWN_ANIMATE = new InjectionToken('STREAMDOWN_ANIMATE');
+/**
+ * The core of the HAST renderer. Turns a HAST tree into DOM and — most importantly —
+ * on subsequent renders **diffs (reconciles)** against the existing DOM instead of
+ * rebuilding the whole tree: only changed text/attributes/elements are updated. During streaming this:
+ *   - eliminates "flicker" (unchanged DOM is preserved),
+ *   - does not break scroll/selection/focus,
+ *   - updates the `node` input of special components (code-block, table) without recreating them,
+ *   - applies a fade-in animation naturally to new elements (only for new DOM).
+ */
+class HastRendererService {
+    // Renderer2 cannot be injected directly in a providedIn:'root' service — use RendererFactory2 instead
+    renderer = inject(RendererFactory2).createRenderer(null, null);
+    // link safety (optional): when enabled, external links are opened through a modal
+    linkModal = inject(LinkModalService);
+    linkSafety = inject(STREAMDOWN_LINK_SAFETY, { optional: true }) ?? false;
+    // fade-in animation for new elements (optional)
+    animate = inject(STREAMDOWN_ANIMATE, { optional: true }) ?? false;
+    /**
+     * Renders the `next` HAST nodes into `parent`, diffing against the `previous` records.
+     * On the first render `previous` is an empty array. Returns: the new tree of records
+     * (passed to the next reconcile).
+     */
+    reconcile(parent, previous, next, vcr) {
+        const result = [];
+        const length = Math.max(previous.length, next.length);
+        for (let i = 0; i < length; i++) {
+            const old = previous[i];
+            const node = next[i];
+            // no node — remove the old record
+            if (node === undefined) {
+                if (old) {
+                    this.destroyRendered(old, parent);
+                }
+                continue;
+            }
+            // no old — create the new one and append it at the end
+            if (old === undefined) {
+                const created = this.createRendered(node, vcr);
+                this.renderer.appendChild(parent, created.dom);
+                result.push(created);
+                continue;
+            }
+            // same type — update in place (patch)
+            if (sameType(old.hast, node)) {
+                result.push(this.patch(old, node, vcr));
+            }
+            else {
+                // different type — replace (put the new one in place of the old)
+                const created = this.createRendered(node, vcr);
+                this.renderer.insertBefore(parent, created.dom, old.dom);
+                this.destroyRendered(old, parent);
+                result.push(created);
+            }
+        }
+        return result;
+    }
+    /** Fully cleans up records rendered via reconcile (destroys component refs). */
+    destroyAll(rendered) {
+        for (const rec of rendered) {
+            rec.componentRef?.destroy();
+            if (rec.children) {
+                this.destroyAll(rec.children);
+            }
+        }
+    }
+    // ── simple (create-only) API — used by table/element components ──────────
+    /**
+     * Creates the `nodes` list into `parent` (without diffing). Returns: the ComponentRefs.
+     * Kept for special cases (recursive render inside a table).
+     */
+    renderNodes(nodes, parent, vcr) {
+        const refs = [];
+        for (const node of nodes) {
+            const created = this.createRendered(node, vcr);
+            this.renderer.appendChild(parent, created.dom);
+            collectRefs(created, refs);
+        }
+        return refs;
+    }
+    /** Removes the DOM children under `parent` and destroys the ComponentRefs. */
+    clear(parent, refs) {
+        for (const ref of refs) {
+            ref.destroy();
+        }
+        while (parent.firstChild) {
+            this.renderer.removeChild(parent, parent.firstChild);
+        }
+    }
+    // ── internal: create / patch / destroy ─────────────────────────────────────────
+    /** Creates a new DOM/component for a single HAST node (returns detached dom). */
+    createRendered(node, vcr) {
+        if (node.type === 'text') {
+            // text node — XSS-safe: only createText (NEVER innerHTML)
+            return { hast: node, dom: this.renderer.createText(node.value) };
+        }
+        if (node.type === 'element') {
+            const el = node;
+            const Cmp = COMPONENT_MAP.get(el.tagName);
+            // special tag — create the Angular component
+            if (Cmp) {
+                const ref = vcr.createComponent(Cmp);
+                ref.setInput('node', el);
+                ref.changeDetectorRef.detectChanges();
+                return { hast: node, dom: ref.location.nativeElement, componentRef: ref };
+            }
+            // generic tag — a real DOM element
+            const domEl = this.renderer.createElement(el.tagName);
+            this.applyProperties(domEl, el.properties);
+            this.applyClasses(domEl, el);
+            if (el.tagName === 'a') {
+                this.enhanceAnchor(domEl, el);
+            }
+            if (this.animate) {
+                ensureFadeStyles();
+                this.renderer.addClass(domEl, FADE_CLASS); // new element — fade-in
+            }
+            const children = [];
+            for (const child of el.children) {
+                const childRec = this.createRendered(child, vcr);
+                this.renderer.appendChild(domEl, childRec.dom);
+                children.push(childRec);
+            }
+            return { hast: node, dom: domEl, children };
+        }
+        // 'comment' | 'doctype' | 'raw' — hold the slot with an empty text node
+        return { hast: node, dom: this.renderer.createText('') };
+    }
+    /** Updates existing DOM in place with the new HAST node (without recreating). */
+    patch(old, node, vcr) {
+        if (node.type === 'text') {
+            const oldValue = old.hast.value;
+            const newValue = node.value;
+            if (oldValue !== newValue) {
+                old.dom.nodeValue = newValue;
+            }
+            return { hast: node, dom: old.dom };
+        }
+        const el = node;
+        const domEl = old.dom;
+        // special component — do not recreate, only update its `node` input (memoization)
+        if (old.componentRef) {
+            old.componentRef.setInput('node', el);
+            old.componentRef.changeDetectorRef.detectChanges();
+            return { hast: node, dom: domEl, componentRef: old.componentRef };
+        }
+        // generic element — apply the attribute/class diff and recursively reconcile children
+        this.updateAttributes(domEl, old.hast.properties, el.properties);
+        this.applyClasses(domEl, el);
+        const children = this.reconcile(domEl, old.children ?? [], el.children, vcr);
+        return { hast: node, dom: domEl, children };
+    }
+    /** Cleans up the record (and its children): destroy the component + remove from DOM. */
+    destroyRendered(rec, parent) {
+        rec.componentRef?.destroy();
+        if (rec.children) {
+            // child DOM is removed together with rec.dom; only destroy the component refs
+            this.destroyAll(rec.children);
+        }
+        if (rec.dom.parentNode === parent) {
+            this.renderer.removeChild(parent, rec.dom);
+        }
+    }
+    // ── attribute / class / anchor ─────────────────────────────────────────────────
+    /**
+     * For `a` tags: external links get `target=_blank` + `rel=noopener noreferrer`;
+     * when link safety is enabled, intercept the click and open through a modal.
+     */
+    enhanceAnchor(domEl, el) {
+        const href = el.properties?.['href'];
+        if (typeof href !== 'string') {
+            return;
+        }
+        if (/^https?:\/\//i.test(href)) {
+            this.renderer.setAttribute(domEl, 'target', '_blank');
+            this.renderer.setAttribute(domEl, 'rel', 'noopener noreferrer');
+            if (this.linkSafety) {
+                this.renderer.listen(domEl, 'click', (event) => {
+                    event.preventDefault();
+                    this.linkModal.request(href);
+                });
+            }
+        }
+    }
+    /** Merges the ELEMENT_CLASSES base with the element's own className. */
+    applyClasses(domEl, el) {
+        const base = ELEMENT_CLASSES[el.tagName] ?? '';
+        const own = el.properties?.['className'];
+        const ownStr = Array.isArray(own) ? own.join(' ') : typeof own === 'string' ? own : '';
+        const animateClass = this.animate && domEl.classList.contains(FADE_CLASS) ? FADE_CLASS : '';
+        const merged = cn(base, ownStr, animateClass);
+        if (merged) {
+            this.renderer.setAttribute(domEl, 'class', merged);
+        }
+        else {
+            this.renderer.removeAttribute(domEl, 'class');
+        }
+    }
+    /** HAST properties → DOM attributes (initial, full application). */
+    applyProperties(domEl, props) {
+        if (!props) {
+            return;
+        }
+        for (const [key, value] of Object.entries(props)) {
+            this.setProp(domEl, key, value);
+        }
+    }
+    /** Applies the attribute diff: removes the deleted ones, sets the new ones. */
+    updateAttributes(domEl, oldProps, newProps) {
+        const oldP = oldProps ?? {};
+        const newP = newProps ?? {};
+        // removed attributes
+        for (const key of Object.keys(oldP)) {
+            if (!(key in newP) && key !== 'className' && !key.toLowerCase().startsWith('on')) {
+                this.renderer.removeAttribute(domEl, attrName(key));
+            }
+        }
+        // new/changed attributes
+        for (const [key, value] of Object.entries(newP)) {
+            this.setProp(domEl, key, value);
+        }
+    }
+    /** Writes a single HAST property to a DOM attribute (with safe allowlist logic). */
+    setProp(domEl, key, value) {
+        // className is handled separately in applyClasses; event handlers (on*) — XSS risk, skip them
+        if (key === 'className' || key.toLowerCase().startsWith('on')) {
+            return;
+        }
+        const attr = attrName(key);
+        if (value === null || value === undefined || value === false) {
+            this.renderer.removeAttribute(domEl, attr);
+            return;
+        }
+        if (value === true) {
+            this.renderer.setAttribute(domEl, attr, '');
+            return;
+        }
+        this.renderer.setAttribute(domEl, attr, Array.isArray(value) ? value.join(' ') : String(value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HastRendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HastRendererService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HastRendererService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** Converts a HAST property name to a DOM attribute name. */
+function attrName(key) {
+    return key === 'htmlFor' ? 'for' : key.toLowerCase();
+}
+/** Are two HAST nodes the same type (text↔text or same tagName)? */
+function sameType(a, b) {
+    if (a.type === 'text' && b.type === 'text') {
+        return true;
+    }
+    if (a.type === 'element' && b.type === 'element') {
+        return a.tagName === b.tagName;
+    }
+    return false;
+}
+/** Collects all ComponentRefs in the record tree. */
+function collectRefs(rec, out) {
+    if (rec.componentRef) {
+        out.push(rec.componentRef);
+    }
+    if (rec.children) {
+        for (const child of rec.children) {
+            collectRefs(child, out);
+        }
+    }
+}
+
+/**
+ * Finds the inner `<code>` in a `<pre>` HAST element and extracts the language and raw code.
+ *
+ * The language is taken from the value starting with `language-...` in the `<code>`'s
+ * `className` (e.g. `language-ts` → `ts`). Returns `'text'` if not found.
+ * The code is built by concatenating all descendant text nodes of the `<code>`.
+ */
+function extractCodeInfo(pre) {
+    const codeEl = findCodeElement(pre);
+    const source = codeEl ?? pre;
+    return {
+        code: collectText$1(source),
+        language: extractLanguage(codeEl),
+    };
+}
+/** Converts a language name to a file extension (for the download button). Defaults to `'txt'`. */
+function languageToExtension(lang) {
+    return LANGUAGE_EXTENSIONS[lang.toLowerCase()] ?? 'txt';
+}
+// ── internal ─────────────────────────────────────────────────────────────────
+/** Finds the first `<code>` element among the direct children of `<pre>`. */
+function findCodeElement(pre) {
+    for (const child of pre.children) {
+        if (child.type === 'element' && child.tagName === 'code') {
+            return child;
+        }
+    }
+    return undefined;
+}
+/** Finds `language-XXX` in the `<code>`'s className and returns `XXX` (lowercase). */
+function extractLanguage(codeEl) {
+    const className = codeEl?.properties?.['className'];
+    const classes = Array.isArray(className)
+        ? className.map(String)
+        : typeof className === 'string'
+            ? className.split(/\s+/)
+            : [];
+    for (const cls of classes) {
+        if (cls.startsWith('language-')) {
+            const lang = cls.slice('language-'.length).trim().toLowerCase();
+            if (lang) {
+                return lang;
+            }
+        }
+    }
+    return 'text';
+}
+/** Recursively concatenates all text nodes under an element. */
+function collectText$1(node) {
+    let out = '';
+    const walk = (children) => {
+        for (const child of children) {
+            if (child.type === 'text') {
+                out += child.value;
+            }
+            else if (child.type === 'element') {
+                walk(child.children);
+            }
+        }
+    };
+    walk(node.children);
+    return out;
+}
+/** Language → extension table. */
+const LANGUAGE_EXTENSIONS = {
+    ts: 'ts',
+    typescript: 'ts',
+    tsx: 'tsx',
+    js: 'js',
+    javascript: 'js',
+    jsx: 'jsx',
+    json: 'json',
+    html: 'html',
+    css: 'css',
+    scss: 'scss',
+    sass: 'sass',
+    less: 'less',
+    python: 'py',
+    py: 'py',
+    ruby: 'rb',
+    rb: 'rb',
+    go: 'go',
+    rust: 'rs',
+    rs: 'rs',
+    java: 'java',
+    kotlin: 'kt',
+    kt: 'kt',
+    swift: 'swift',
+    c: 'c',
+    cpp: 'cpp',
+    'c++': 'cpp',
+    csharp: 'cs',
+    cs: 'cs',
+    php: 'php',
+    shell: 'sh',
+    bash: 'sh',
+    sh: 'sh',
+    zsh: 'sh',
+    yaml: 'yaml',
+    yml: 'yml',
+    toml: 'toml',
+    xml: 'xml',
+    sql: 'sql',
+    markdown: 'md',
+    md: 'md',
+    text: 'txt',
+};
+
+/**
+ * Language (lowercase) → component registry.
+ *
+ * Optional plugins (e.g. `mermaid`) can "claim" a specific code language:
+ * if a component is registered for that language, `CodeBlockComponent` creates
+ * that component instead of highlighting with Shiki.
+ *
+ * A registered component MUST accept a `code: string` (raw code) input.
+ */
+const CODE_LANGUAGE_COMPONENTS = new Map();
+
+/**
+ * Service that syntax-highlights code via Shiki.
+ *
+ * `shiki` is an OPTIONAL peer dependency — so the dynamic `import()` is run
+ * once (cached) inside a try/catch. If shiki is not installed, the import
+ * fails, or the language is unknown, we fall back to a plain escaped
+ * `<pre><code>`. This service NEVER throws.
+ */
+class ShikiHighlighterService {
+    /** Cached promise for loading the Shiki module once. */
+    shikiPromise = null;
+    /**
+     * Highlights `code` for the `lang` language and returns HTML.
+     * On error, falls back to an escaped `<pre><code>`.
+     */
+    async highlight(code, lang) {
+        const shiki = await this.loadShiki();
+        if (!shiki) {
+            return this.fallback(code);
+        }
+        try {
+            return await shiki.codeToHtml(code, {
+                lang,
+                themes: { light: 'github-light', dark: 'github-dark' },
+            });
+        }
+        catch {
+            // unknown language or other error — safe fallback
+            return this.fallback(code);
+        }
+    }
+    // ── internal ─────────────────────────────────────────────────────────────────
+    /** Lazily loads the Shiki module (once); returns `null` on failure. */
+    loadShiki() {
+        if (!this.shikiPromise) {
+            this.shikiPromise = (async () => {
+                try {
+                    const mod = (await import('shiki'));
+                    if (typeof mod.codeToHtml === 'function') {
+                        return { codeToHtml: mod.codeToHtml };
+                    }
+                    return null;
+                }
+                catch {
+                    // shiki not installed — fallback mode
+                    return null;
+                }
+            })();
+        }
+        return this.shikiPromise;
+    }
+    /** Plain escaped `<pre><code>` (XSS-safe fallback). */
+    fallback(code) {
+        return `<pre><code>${escapeHtml(code)}</code></pre>`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ShikiHighlighterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ShikiHighlighterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ShikiHighlighterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** Escapes HTML special characters. */
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+const svg = (paths) => `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+/** Default icons (minimal SVG in lucide style). */
+const DEFAULT_ICONS = {
+    copy: svg('<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>'),
+    check: svg('<polyline points="20 6 9 17 4 12"/>'),
+    download: svg('<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>'),
+    externalLink: svg('<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>'),
+    close: svg('<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>'),
+    chevronDown: svg('<polyline points="6 9 12 15 18 9"/>'),
+};
+const STREAMDOWN_ICONS = new InjectionToken('STREAMDOWN_ICONS');
+/** Components get icons through this service. */
+class IconService {
+    overrides = inject(STREAMDOWN_ICONS, { optional: true }) ?? {};
+    /** Merged icons (default + override). */
+    icons = { ...DEFAULT_ICONS, ...this.overrides };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** Overrides the icons. */
+function provideStreamdownIcons(icons) {
+    return makeEnvironmentProviders([{ provide: STREAMDOWN_ICONS, useValue: icons }]);
+}
+
+/** Default (English) strings. */
+const DEFAULT_TRANSLATIONS = {
+    copy: 'Copy',
+    copied: 'Copied',
+    download: 'Download',
+    copyMarkdown: 'Copy MD',
+    copyCsv: 'Copy CSV',
+    downloadCsv: 'Download CSV',
+    openLink: 'Open link',
+    cancel: 'Cancel',
+    open: 'Open',
+    linkWarningTitle: 'Open external link?',
+    linkWarningBody: 'You are about to open an external link:',
+    mermaidError: 'Mermaid render error',
+    renderingDiagram: 'Rendering diagram…',
+    imageError: 'Failed to load image',
+};
+const STREAMDOWN_TRANSLATIONS = new InjectionToken('STREAMDOWN_TRANSLATIONS');
+/** Components get UI strings through this service. */
+class TranslationsService {
+    overrides = inject(STREAMDOWN_TRANSLATIONS, { optional: true }) ?? {};
+    /** Merged strings (default + override). */
+    t = { ...DEFAULT_TRANSLATIONS, ...this.overrides };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Overrides the UI strings (i18n). For example, in Uzbek:
+ *   provideStreamdownTranslations({ copy: 'Nusxa', copied: 'Nusxalandi', download: 'Yuklab olish' })
+ */
+function provideStreamdownTranslations(translations) {
+    return makeEnvironmentProviders([
+        { provide: STREAMDOWN_TRANSLATIONS, useValue: translations },
+    ]);
+}
+
+/**
+ * Small button that copies code to the clipboard.
+ *
+ * On click, `navigator.clipboard.writeText(text())` is called and it briefly
+ * switches to the "copied" state (signal + setTimeout). The timeout is cleared in
+ * `ngOnDestroy`. Text (i18n) comes from `TranslationsService`, the icon from `IconService`.
+ */
+class CopyButtonComponent {
+    /** Text to copy to the clipboard. */
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    sanitizer = inject(DomSanitizer);
+    icons = inject(IconService).icons;
+    t = inject(TranslationsService).t;
+    copyIcon = this.sanitizer.bypassSecurityTrustHtml(this.icons.copy);
+    checkIcon = this.sanitizer.bypassSecurityTrustHtml(this.icons.check);
+    timeoutId = null;
+    async copy() {
+        try {
+            await navigator.clipboard.writeText(this.text());
+            this.copied.set(true);
+            this.clearTimer();
+            this.timeoutId = setTimeout(() => this.copied.set(false), 2000);
+        }
+        catch {
+            // clipboard unavailable / permission denied — silently ignore
+        }
+    }
+    ngOnDestroy() {
+        this.clearTimer();
+    }
+    clearTimer() {
+        if (this.timeoutId !== null) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CopyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: CopyButtonComponent, isStandalone: true, selector: "ngx-cb-copy", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="sd-btn"
+      [attr.aria-label]="copied() ? t.copied : t.copy"
+      [attr.title]="copied() ? t.copied : t.copy"
+      (click)="copy()"
+    >
+      <span [innerHTML]="copied() ? checkIcon : copyIcon"></span>
+      <span>{{ copied() ? t.copied : t.copy }}</span>
+    </button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CopyButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-cb-copy',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <button
+      type="button"
+      class="sd-btn"
+      [attr.aria-label]="copied() ? t.copied : t.copy"
+      [attr.title]="copied() ? t.copied : t.copy"
+      (click)="copy()"
+    >
+      <span [innerHTML]="copied() ? checkIcon : copyIcon"></span>
+      <span>{{ copied() ? t.copied : t.copy }}</span>
+    </button>
+  `,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }] } });
+
+/**
+ * Small button that downloads code as a file.
+ *
+ * On click, a `Blob` is created from the text and the download is triggered via a
+ * temporary `<a download>` (the object URL is revoked afterwards).
+ */
+class DownloadButtonComponent {
+    sanitizer = inject(DomSanitizer);
+    t = inject(TranslationsService).t;
+    downloadIcon = this.sanitizer.bypassSecurityTrustHtml(inject(IconService).icons.download);
+    /** Text to write to the file. */
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Name of the downloaded file. */
+    filename = input.required(...(ngDevMode ? [{ debugName: "filename" }] : /* istanbul ignore next */ []));
+    download() {
+        const blob = new Blob([this.text()], { type: 'text/plain;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = this.filename();
+        document.body.appendChild(anchor);
+        anchor.click();
+        document.body.removeChild(anchor);
+        URL.revokeObjectURL(url);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DownloadButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: DownloadButtonComponent, isStandalone: true, selector: "ngx-cb-download", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="sd-btn"
+      [attr.aria-label]="t.download"
+      [attr.title]="t.download"
+      (click)="download()"
+    >
+      <span [innerHTML]="downloadIcon"></span>
+      <span>{{ t.download }}</span>
+    </button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DownloadButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-cb-download',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <button
+      type="button"
+      class="sd-btn"
+      [attr.aria-label]="t.download"
+      [attr.title]="t.download"
+      (click)="download()"
+    >
+      <span [innerHTML]="downloadIcon"></span>
+      <span>{{ t.download }}</span>
+    </button>
+  `,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], filename: [{ type: i0.Input, args: [{ isSignal: true, alias: "filename", required: true }] }] } });
+
+/**
+ * MAIN component that renders a Markdown code block (`<pre>`).
+ *
+ * In COMPONENT_MAP this component is bound to the `pre` tag; the renderer
+ * calls `setInput('node', preElement)`.
+ *
+ * Logic:
+ *  1) First look up a component by language in `CODE_LANGUAGE_COMPONENTS`
+ *     (e.g. `mermaid`). If found, create it, pass the `code` input,
+ *     place it into the body and do NOT run Shiki.
+ *  2) Otherwise, show the code card: header (language + copy/download) and
+ *     body (Shiki output). Until highlighting is ready, plain escaped
+ *     code is shown (so it appears immediately during streaming).
+ */
+class CodeBlockComponent {
+    /** The `<pre>` HAST element to render. */
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    vcr = inject(ViewContainerRef);
+    highlighter = inject(ShikiHighlighterService);
+    sanitizer = inject(DomSanitizer);
+    /** Host where the plugin component is placed (for registered languages). */
+    pluginHost = viewChild.required('pluginHost');
+    /** Created plugin ComponentRefs (for cleanup). */
+    pluginRefs = [];
+    /** Code block info: {code, language}. */
+    info = computed(() => extractCodeInfo(this.node()), ...(ngDevMode ? [{ debugName: "info" }] : /* istanbul ignore next */ []));
+    code = computed(() => this.info().code, ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    language = computed(() => this.info().language, ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    /** Name of the downloadable file (e.g. `code.ts`). */
+    downloadName = computed(() => `code.${languageToExtension(this.language())}`, ...(ngDevMode ? [{ debugName: "downloadName" }] : /* istanbul ignore next */ []));
+    /** Is a dedicated component registered for this language? */
+    hasRegisteredComponent = computed(() => CODE_LANGUAGE_COMPONENTS.has(this.language()), ...(ngDevMode ? [{ debugName: "hasRegisteredComponent" }] : /* istanbul ignore next */ []));
+    /** Shiki-highlighted, sanitized HTML (null until loaded). */
+    highlighted = signal(null, ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Create/update the registered language component (such as mermaid).
+        effect(() => {
+            const lang = this.language();
+            const codeText = this.code();
+            const Cmp = CODE_LANGUAGE_COMPONENTS.get(lang);
+            // each time, dispose the previous plugin components
+            this.disposePlugins();
+            if (Cmp) {
+                const ref = this.vcr.createComponent(Cmp);
+                ref.setInput('code', codeText);
+                ref.changeDetectorRef.detectChanges();
+                this.pluginHost().nativeElement.appendChild(ref.location.nativeElement);
+                this.pluginRefs.push(ref);
+            }
+        });
+        // Shiki highlight (only for non-registered languages).
+        effect((onCleanup) => {
+            const lang = this.language();
+            const codeText = this.code();
+            if (CODE_LANGUAGE_COMPONENTS.has(lang)) {
+                this.highlighted.set(null);
+                return;
+            }
+            let cancelled = false;
+            // cancel the stale result if the effect re-runs or is destroyed
+            onCleanup(() => {
+                cancelled = true;
+            });
+            void this.highlighter.highlight(codeText, lang).then((html) => {
+                if (cancelled) {
+                    return;
+                }
+                // Shiki output is safe (it escapes the code itself) — trust directly.
+                this.highlighted.set(this.sanitizer.bypassSecurityTrustHtml(html));
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.disposePlugins();
+    }
+    disposePlugins() {
+        for (const ref of this.pluginRefs) {
+            ref.destroy();
+        }
+        this.pluginRefs = [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CodeBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CodeBlockComponent, isStandalone: true, selector: "ngx-code-block", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "pluginHost", first: true, predicate: ["pluginHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (!hasRegisteredComponent()) {
+      <div class="sd-codeblock">
+        <!-- header bar -->
+        <div class="sd-codeblock-header">
+          <span class="sd-codeblock-lang">{{ language() }}</span>
+          <span class="sd-codeblock-actions">
+            <ngx-cb-copy [text]="code()" />
+            <ngx-cb-download [text]="code()" [filename]="downloadName()" />
+          </span>
+        </div>
+
+        <!-- body: Shiki output or (until loaded) plain escaped code -->
+        <div class="sd-codeblock-body">
+          @if (highlighted(); as html) {
+            <div [innerHTML]="html"></div>
+          } @else {
+            <pre><code>{{ code() }}</code></pre>
+          }
+        </div>
+      </div>
+    }
+
+    <!-- registered language component (e.g. mermaid) is placed here -->
+    <div #pluginHost></div>
+  `, isInline: true, dependencies: [{ kind: "component", type: CopyButtonComponent, selector: "ngx-cb-copy", inputs: ["text"] }, { kind: "component", type: DownloadButtonComponent, selector: "ngx-cb-download", inputs: ["text", "filename"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CodeBlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-code-block',
+                    standalone: true,
+                    imports: [CopyButtonComponent, DownloadButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (!hasRegisteredComponent()) {
+      <div class="sd-codeblock">
+        <!-- header bar -->
+        <div class="sd-codeblock-header">
+          <span class="sd-codeblock-lang">{{ language() }}</span>
+          <span class="sd-codeblock-actions">
+            <ngx-cb-copy [text]="code()" />
+            <ngx-cb-download [text]="code()" [filename]="downloadName()" />
+          </span>
+        </div>
+
+        <!-- body: Shiki output or (until loaded) plain escaped code -->
+        <div class="sd-codeblock-body">
+          @if (highlighted(); as html) {
+            <div [innerHTML]="html"></div>
+          } @else {
+            <pre><code>{{ code() }}</code></pre>
+          }
+        </div>
+      </div>
+    }
+
+    <!-- registered language component (e.g. mermaid) is placed here -->
+    <div #pluginHost></div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], pluginHost: [{ type: i0.ViewChild, args: ['pluginHost', { isSignal: true }] }] } });
+
+/**
+ * Pure functions that extract plain-text data (rows × cells) from a HAST `table`
+ * element and convert it into various formats (CSV, TSV, Markdown).
+ *
+ * This file has no DOM dependency — it works only on the HAST tree, so it is
+ * fully testable and reusable.
+ */
+/** Type guard that selects only element nodes. */
+function isElement(node) {
+    return node.type === 'element';
+}
+/** Recursively collects the values of all text nodes under a node. */
+function collectText(node) {
+    if (node.type === 'text') {
+        return node.value;
+    }
+    if (node.type === 'element') {
+        let out = '';
+        for (const child of node.children) {
+            out += collectText(child);
+        }
+        return out;
+    }
+    // 'comment' and other node types — produce no text
+    return '';
+}
+/** Finds the given tags among the element's direct children. */
+function childrenByTag(parent, ...tags) {
+    const set = new Set(tags);
+    return parent.children.filter((c) => isElement(c) && set.has(c.tagName));
+}
+/**
+ * Walks a HAST `table` element and collects the text of each cell.
+ * Structure: table → (thead | tbody) → tr → (th | td). A `tr` placed directly
+ * under the table is also supported.
+ * Each cell's text is `trim()`-ed.
+ */
+function extractTableData(table) {
+    const rows = [];
+    // collect the trs: first from thead/tbody/tfoot, then the direct ones
+    const trElements = [];
+    const sections = childrenByTag(table, 'thead', 'tbody', 'tfoot');
+    if (sections.length > 0) {
+        for (const section of sections) {
+            trElements.push(...childrenByTag(section, 'tr'));
+        }
+    }
+    // in some HAST trees a tr can sit directly under the table
+    trElements.push(...childrenByTag(table, 'tr'));
+    for (const tr of trElements) {
+        const cells = childrenByTag(tr, 'th', 'td');
+        const row = cells.map((cell) => collectText(cell).trim());
+        rows.push(row);
+    }
+    return rows;
+}
+/**
+ * Escapes a single CSV cell per RFC 4180 rules.
+ * If it contains a comma, quote, or newline — it is wrapped in quotes and
+ * inner quotes are doubled.
+ */
+function escapeCsvCell(value) {
+    if (/[",\r\n]/.test(value)) {
+        return `"${value.replace(/"/g, '""')}"`;
+    }
+    return value;
+}
+/** Converts rows to RFC 4180 CSV text (CRLF row separator). */
+function toCsv(rows) {
+    return rows.map((row) => row.map(escapeCsvCell).join(',')).join('\r\n');
+}
+/**
+ * Converts rows to TSV (tab-separated) text.
+ * Tabs and newlines inside a cell are replaced with spaces (TSV has no escaping).
+ */
+function toTsv(rows) {
+    return rows
+        .map((row) => row.map((cell) => cell.replace(/[\t\r\n]+/g, ' ')).join('\t'))
+        .join('\n');
+}
+/** Escapes the `|` character for a Markdown table cell and removes newlines. */
+function escapeMarkdownCell(value) {
+    return value.replace(/\|/g, '\\|').replace(/[\r\n]+/g, ' ');
+}
+/**
+ * Converts rows to a GFM Markdown table.
+ * The first row is taken as the header and a `---` separator row is added after it.
+ * Returns an empty string for empty input.
+ */
+function toMarkdown(rows) {
+    if (rows.length === 0) {
+        return '';
+    }
+    // table width — the longest row (to pad ragged rows)
+    const colCount = rows.reduce((max, row) => Math.max(max, row.length), 0);
+    const renderRow = (row) => {
+        const cells = [];
+        for (let i = 0; i < colCount; i++) {
+            cells.push(escapeMarkdownCell(row[i] ?? ''));
+        }
+        return `| ${cells.join(' | ')} |`;
+    };
+    const header = renderRow(rows[0]);
+    const separator = `| ${Array.from({ length: colCount }, () => '---').join(' | ')} |`;
+    const body = rows.slice(1).map(renderRow);
+    return [header, separator, ...body].join('\n');
+}
+
+/**
+ * Custom component bound to `table` HAST tags (`table` → this in COMPONENT_MAP).
+ *
+ * Operating principle (AVOIDING RECURSION):
+ *   If we re-render the `table` node ITSELF, we get infinite recursion
+ *   (because `table` is in COMPONENT_MAP). So we create the `<table>` DOM
+ *   element ourselves with Renderer2 and render only the node's CHILDREN
+ *   (thead/tbody/tr ...) into that element.
+ *
+ * Additionally, a small toolbar is added for copying the table as Markdown/CSV
+ * and downloading it as CSV.
+ */
+class TableComponent {
+    /** HAST `table` element node to render */
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    t = inject(TranslationsService).t;
+    /** Temporary "copied" message for a toolbar action (`null` when none) */
+    copied = signal(null, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    // tableHost — target DOM element for imperatively building the `<table>`
+    hostElRef = viewChild.required('tableHost');
+    vcr = inject(ViewContainerRef);
+    renderer = inject(HastRendererService);
+    renderer2 = inject(Renderer2);
+    refs = [];
+    builtTable = null;
+    feedbackTimer = null;
+    constructor() {
+        // When node() changes, clear the old table and rebuild a new one
+        effect(() => {
+            const tableNode = this.node();
+            const host = this.hostElRef().nativeElement;
+            // clear the previous render (destroy ComponentRefs + remove DOM children)
+            this.cleanup(host);
+            // build the `<table>` ourselves — render the node's CHILDREN, not the node ITSELF
+            const tableEl = this.renderer2.createElement('table');
+            this.renderer2.setAttribute(tableEl, 'class', 'sd-table-el');
+            this.refs = this.renderer.renderNodes(tableNode.children, tableEl, this.vcr);
+            this.renderer2.appendChild(host, tableEl);
+            this.builtTable = tableEl;
+        });
+    }
+    ngOnDestroy() {
+        const host = this.hostElRef().nativeElement;
+        this.cleanup(host);
+        if (this.feedbackTimer !== null) {
+            clearTimeout(this.feedbackTimer);
+            this.feedbackTimer = null;
+        }
+    }
+    /** Copies the Markdown representation of the table to the clipboard. */
+    async copyMarkdown() {
+        await this.copyToClipboard(toMarkdown(extractTableData(this.node())), this.t.copied);
+    }
+    /** Copies the CSV representation of the table to the clipboard. */
+    async copyCsv() {
+        await this.copyToClipboard(toCsv(extractTableData(this.node())), this.t.copied);
+    }
+    /** Downloads the table as a `table.csv` file (via Blob). */
+    downloadCsv() {
+        const csv = toCsv(extractTableData(this.node()));
+        // add a BOM so Excel reads UTF-8 correctly
+        const blob = new Blob(['', csv], { type: 'text/csv;charset=utf-8;' });
+        const url = URL.createObjectURL(blob);
+        const a = this.renderer2.createElement('a');
+        a.href = url;
+        a.download = 'table.csv';
+        a.click();
+        URL.revokeObjectURL(url);
+        this.flashFeedback('Downloaded');
+    }
+    // ── internal ───────────────────────────────────────────────────────────
+    /** Writes text to the clipboard and shows a temporary message (when the Clipboard API is available). */
+    async copyToClipboard(text, message) {
+        try {
+            await navigator.clipboard.writeText(text);
+            this.flashFeedback(message);
+        }
+        catch {
+            // if the clipboard is unavailable (old browser / SSR) — fail silently
+            this.flashFeedback('Copy failed');
+        }
+    }
+    /** Sets a temporary feedback message visible for ~2s. */
+    flashFeedback(message) {
+        this.copied.set(message);
+        if (this.feedbackTimer !== null) {
+            clearTimeout(this.feedbackTimer);
+        }
+        this.feedbackTimer = setTimeout(() => {
+            this.copied.set(null);
+            this.feedbackTimer = null;
+        }, 2000);
+    }
+    /** Clears the built table and its ComponentRefs. */
+    cleanup(host) {
+        if (this.builtTable) {
+            this.renderer.clear(this.builtTable, this.refs);
+            this.renderer2.removeChild(host, this.builtTable);
+            this.builtTable = null;
+        }
+        else if (this.refs.length > 0) {
+            for (const ref of this.refs) {
+                ref.destroy();
+            }
+        }
+        this.refs = [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "ngx-table", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "hostElRef", first: true, predicate: ["tableHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="sd-table">
+      <div class="sd-table-toolbar">
+        <button type="button" class="sd-table-btn" (click)="copyMarkdown()">
+          📋 {{ t.copyMarkdown }}
+        </button>
+        <button type="button" class="sd-table-btn" (click)="copyCsv()">
+          📋 {{ t.copyCsv }}
+        </button>
+        <button type="button" class="sd-table-btn" (click)="downloadCsv()">
+          ⬇️ {{ t.downloadCsv }}
+        </button>
+        @if (copied()) {
+          <span class="sd-table-msg">{{ copied() }}</span>
+        }
+      </div>
+      <div #tableHost class="sd-table-scroll"></div>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-table',
+                    standalone: true,
+                    template: `
+    <div class="sd-table">
+      <div class="sd-table-toolbar">
+        <button type="button" class="sd-table-btn" (click)="copyMarkdown()">
+          📋 {{ t.copyMarkdown }}
+        </button>
+        <button type="button" class="sd-table-btn" (click)="copyCsv()">
+          📋 {{ t.copyCsv }}
+        </button>
+        <button type="button" class="sd-table-btn" (click)="downloadCsv()">
+          ⬇️ {{ t.downloadCsv }}
+        </button>
+        @if (copied()) {
+          <span class="sd-table-msg">{{ copied() }}</span>
+        }
+      </div>
+      <div #tableHost class="sd-table-scroll"></div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], hostElRef: [{ type: i0.ViewChild, args: ['tableHost', { isSignal: true }] }] } });
+
+/**
+ * Component for markdown images (`img`). Equivalent of Streamdown `lib/image.tsx`.
+ *
+ * Bound to the `img` tag in COMPONENT_MAP. Comes with a loading skeleton, error state and
+ * lazy-loading. The `node` input is the hast `img` element node.
+ */
+class ImageComponent {
+    /** hast `img` element node */
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    t = inject(TranslationsService).t;
+    loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+    errored = signal(false, ...(ngDevMode ? [{ debugName: "errored" }] : /* istanbul ignore next */ []));
+    src = computed(() => this.prop('src'), ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    alt = computed(() => this.prop('alt'), ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    title = computed(() => this.prop('title') || null, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    prop(name) {
+        const value = this.node().properties?.[name];
+        return typeof value === 'string' ? value : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ImageComponent, isStandalone: true, selector: "ngx-image", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (errored()) {
+      <span class="sd-img-error">🖼 {{ t.imageError }}</span>
+    } @else {
+      @if (!loaded()) {
+        <span class="sd-img-skeleton"></span>
+      }
+      <img
+        [src]="src()"
+        [alt]="alt()"
+        [attr.title]="title()"
+        loading="lazy"
+        class="sd-img"
+        [class.sd-img--hidden]="!loaded()"
+        (load)="loaded.set(true)"
+        (error)="errored.set(true)"
+      />
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-image',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (errored()) {
+      <span class="sd-img-error">🖼 {{ t.imageError }}</span>
+    } @else {
+      @if (!loaded()) {
+        <span class="sd-img-skeleton"></span>
+      }
+      <img
+        [src]="src()"
+        [alt]="alt()"
+        [attr.title]="title()"
+        loading="lazy"
+        class="sd-img"
+        [class.sd-img--hidden]="!loaded()"
+        (load)="loaded.set(true)"
+        (error)="errored.set(true)"
+      />
+    }
+  `,
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
+
+let registered = false;
+/**
+ * Registers the default custom components into COMPONENT_MAP (once).
+ *
+ * Called in the `HastRendererComponent` constructor (at runtime) — so the `pre` and
+ * `table` tags are bound to their components before any render begins.
+ * The runtime call is safe from bundler tree-shaking (not a side-effect import).
+ *
+ * After this call, users can add their own tags to COMPONENT_MAP or replace the
+ * defaults.
+ */
+function registerDefaultComponents() {
+    if (registered) {
+        return;
+    }
+    registered = true;
+    if (!COMPONENT_MAP.has('pre')) {
+        COMPONENT_MAP.set('pre', CodeBlockComponent); // code blocks (Shiki, copy/download)
+    }
+    if (!COMPONENT_MAP.has('table')) {
+        COMPONENT_MAP.set('table', TableComponent); // tables (copy/download MD/CSV)
+    }
+    if (!COMPONENT_MAP.has('img')) {
+        COMPONENT_MAP.set('img', ImageComponent); // images (loading/error states)
+    }
+}
+
+/**
+ * Streaming "caret" (typing cursor) animation. In the spirit of Streamdown `lib/animate.ts`.
+ *
+ * The caret is placed inside DOM dynamically created by the renderer (not an Angular
+ * template), so the styles must be global — we inject them into `document.head` once
+ * (to avoid requiring CSS from the consumer).
+ */
+const CARET_CLASS = 'ngx-sd-caret';
+let injected = false;
+/** Injects the global keyframe + class styles for the caret once. */
+function ensureCaretStyles() {
+    if (injected || typeof document === 'undefined') {
+        return;
+    }
+    injected = true;
+    const style = document.createElement('style');
+    style.textContent = `
+@keyframes ngx-sd-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+.${CARET_CLASS} {
+  display: inline-block;
+  width: 0.5em;
+  height: 1em;
+  margin-left: 1px;
+  vertical-align: text-bottom;
+  background: currentColor;
+  border-radius: 1px;
+  animation: ngx-sd-blink 1s step-start infinite;
+}
+`;
+    document.head.appendChild(style);
+}
+/** Creates the caret `<span>` element. */
+function createCaret() {
+    ensureCaretStyles();
+    const span = document.createElement('span');
+    span.className = CARET_CLASS;
+    span.setAttribute('aria-hidden', 'true');
+    return span;
+}
+
+/**
+ * The entry point of the HAST renderer.
+ *
+ * When the `hast` input (Root) changes, it does not rebuild the whole tree — it
+ * **diffs (reconciles)** against the previous render: only changed text/attributes/elements
+ * are updated. During streaming this eliminates flicker, preserves scroll/selection, and updates
+ * the `node` input of special components (code-block, table) without recreating them.
+ */
+class HastRendererComponent {
+    /** The HAST Root tree to render */
+    hast = input.required(...(ngDevMode ? [{ debugName: "hast" }] : /* istanbul ignore next */ []));
+    /** Append a streaming caret (text cursor) at the end */
+    caret = input(false, ...(ngDevMode ? [{ debugName: "caret" }] : /* istanbul ignore next */ []));
+    hostRef = viewChild.required('host');
+    vcr = inject(ViewContainerRef);
+    renderer = inject(HastRendererService);
+    rendered = [];
+    caretEl = null;
+    constructor() {
+        registerDefaultComponents(); // registers the pre/table/img components (once)
+        // diff when hast/caret changes (effect tracks signals automatically)
+        effect(() => {
+            const root = this.hast();
+            const showCaret = this.caret();
+            const host = this.hostRef().nativeElement;
+            this.removeCaret(); // remove the caret before diffing (it is not a hast node)
+            this.rendered = this.renderer.reconcile(host, this.rendered, root.children, this.vcr);
+            if (showCaret) {
+                this.addCaret(host);
+            }
+        });
+    }
+    ngOnDestroy() {
+        // clean up dynamic components (prevent memory leaks)
+        this.renderer.destroyAll(this.rendered);
+    }
+    /** Appends the caret inside the last block element (inline) or to the host. */
+    addCaret(host) {
+        const target = host.lastElementChild ?? host;
+        this.caretEl = createCaret();
+        target.appendChild(this.caretEl);
+    }
+    /** Removes the existing caret from the DOM. */
+    removeCaret() {
+        this.caretEl?.remove();
+        this.caretEl = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HastRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: HastRendererComponent, isStandalone: true, selector: "ngx-hast-renderer", inputs: { hast: { classPropertyName: "hast", publicName: "hast", isSignal: true, isRequired: true, transformFunction: null }, caret: { classPropertyName: "caret", publicName: "caret", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "hostRef", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: `<div #host class="ngx-streamdown"></div>`, isInline: true, styles: [".ngx-streamdown{color:#1f2937;line-height:1.7;word-wrap:break-word}.ngx-streamdown h1,.ngx-streamdown h2,.ngx-streamdown h3,.ngx-streamdown h4,.ngx-streamdown h5,.ngx-streamdown h6{margin:1.5rem 0 .75rem;font-weight:600;line-height:1.25}.ngx-streamdown h1{font-size:1.875rem}.ngx-streamdown h2{font-size:1.5rem}.ngx-streamdown h3{font-size:1.25rem}.ngx-streamdown h4{font-size:1.125rem}.ngx-streamdown h5{font-size:1rem}.ngx-streamdown h6{font-size:.875rem;color:#6b7280}.ngx-streamdown p{margin:1rem 0}.ngx-streamdown blockquote{margin:1rem 0;padding-left:1rem;border-left:3px solid #d1d5db;color:#6b7280;font-style:italic}.ngx-streamdown hr{margin:1.5rem 0;border:0;border-top:1px solid #e5e7eb}.ngx-streamdown ul,.ngx-streamdown ol{margin:1rem 0;padding-left:1.5rem}.ngx-streamdown ul{list-style:disc}.ngx-streamdown ol{list-style:decimal}.ngx-streamdown li{margin:.25rem 0}.ngx-streamdown li::marker{color:#9ca3af}.ngx-streamdown li>input[type=checkbox]{margin-right:.4rem}.ngx-streamdown a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;font-weight:500}.ngx-streamdown a:hover{color:#1e40af}.ngx-streamdown strong{font-weight:600}.ngx-streamdown em{font-style:italic}.ngx-streamdown del{text-decoration:line-through}.ngx-streamdown sup{vertical-align:super;font-size:.75em}.ngx-streamdown sub{vertical-align:sub;font-size:.75em}.ngx-streamdown mark{background:#fef08a;padding:0 .125rem}.ngx-streamdown abbr{cursor:help;text-decoration:underline dotted}.ngx-streamdown kbd{border:1px solid #d1d5db;background:#f9fafb;border-radius:.25rem;padding:.1rem .35rem;font:.8em monospace;box-shadow:0 1px #00000014}.ngx-streamdown :not(pre)>code{background:#f3f4f6;border-radius:.25rem;padding:.1rem .35rem;font:.85em monospace}.ngx-streamdown table,ngx-table .sd-table-el{width:100%;border-collapse:collapse;font-size:.875rem;border:1px solid #e5e7eb;border-radius:.5rem;overflow:hidden}.ngx-streamdown thead,ngx-table thead{background:#f9fafb}.ngx-streamdown th,ngx-table th{padding:.5rem 1rem;text-align:left;font-weight:500}.ngx-streamdown td,ngx-table td{padding:.5rem 1rem;border-top:1px solid #f3f4f6}.ngx-streamdown img{margin:1rem 0;max-width:100%;border-radius:.5rem}ngx-cb-copy .sd-btn,ngx-cb-download .sd-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .375rem;font-size:.75rem;color:#6b7280;background:transparent;border:0;border-radius:.25rem;cursor:pointer;transition:background-color .15s,color .15s}ngx-cb-copy .sd-btn:hover,ngx-cb-download .sd-btn:hover{background:#e5e7eb;color:#374151}ngx-cb-copy .sd-btn svg,ngx-cb-download .sd-btn svg{display:inline-flex}ngx-code-block{display:block}.sd-codeblock{margin:1rem 0;overflow:hidden;border:1px solid #e5e7eb;border-radius:.5rem}.sd-codeblock-header{display:flex;align-items:center;justify-content:space-between;padding:.375rem .75rem;background:#f3f4f6;font-size:.75rem;color:#4b5563}.sd-codeblock-lang{font-family:monospace;text-transform:lowercase}.sd-codeblock-actions{display:inline-flex;align-items:center;gap:.25rem}.sd-codeblock-body{overflow-x:auto;background:#fff;font-size:.875rem}.sd-codeblock-body pre{margin:0;padding:1rem;font-family:monospace;font-size:.85rem}.sd-codeblock-body .shiki{margin:0;padding:1rem;border-radius:0}ngx-table{display:block}.sd-table{margin:1rem 0}.sd-table-toolbar{display:flex;justify-content:flex-end;gap:.25rem;margin-bottom:.25rem}.sd-table-btn{font-size:.75rem;padding:.25rem .5rem;border:0;background:transparent;border-radius:.25rem;cursor:pointer;color:#4b5563}.sd-table-btn:hover{background:#f3f4f6}.sd-table-msg{font-size:.75rem;padding:.25rem .5rem;color:#16a34a}.sd-table-scroll{overflow-x:auto}ngx-image{display:inline-block}.sd-img{margin:1rem 0;max-width:100%;border-radius:.5rem}.sd-img--hidden{display:none}.sd-img-skeleton{display:inline-block;width:100%;max-width:24rem;height:8rem;margin:1rem 0;border-radius:.5rem;background:#e5e7eb;animation:ngx-sd-pulse 1.5s ease-in-out infinite}.sd-img-error{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:.25rem}@keyframes ngx-sd-pulse{0%,to{opacity:1}50%{opacity:.5}}ngx-mermaid{display:block}ngx-mermaid .ngx-mermaid svg{max-width:100%;height:auto}.sd-mermaid-loading{font-size:.875rem;color:#6b7280}.sd-mermaid-error{font-size:.875rem;color:#dc2626;border:1px solid #fecaca;border-radius:.25rem;padding:.5rem}.sd-mermaid-error pre{margin-top:.5rem;overflow-x:auto;white-space:pre-wrap}.sd-modal-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#0006;padding:1rem}.sd-modal{width:100%;max-width:28rem;background:#fff;border-radius:.5rem;padding:1.25rem;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.sd-modal-title{margin:0 0 .5rem;font-size:1.125rem;font-weight:600}.sd-modal-body{font-size:.875rem;color:#4b5563}.sd-modal-url{margin:.75rem 0;padding:.5rem;background:#f3f4f6;border-radius:.25rem;font:.75rem monospace;word-break:break-all}.sd-modal-actions{display:flex;justify-content:flex-end;gap:.5rem}.sd-modal-btn{padding:.375rem .75rem;font-size:.875rem;border:0;background:transparent;border-radius:.25rem;cursor:pointer}.sd-modal-btn:hover{background:#f3f4f6}.sd-modal-btn--primary{background:#2563eb;color:#fff;font-weight:500}.sd-modal-btn--primary:hover{background:#1d4ed8}.ngx-streamdown[dir=rtl] ul,.ngx-streamdown[dir=rtl] ol{padding-right:1.5rem;padding-left:0}.ngx-streamdown[dir=rtl] blockquote{border-left:0;border-right:3px solid #d1d5db;padding-left:0;padding-right:1rem}.ngx-streamdown[dir=rtl] li>input[type=checkbox]{margin-right:0;margin-left:.4rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HastRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-hast-renderer', standalone: true, template: `<div #host class="ngx-streamdown"></div>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ngx-streamdown{color:#1f2937;line-height:1.7;word-wrap:break-word}.ngx-streamdown h1,.ngx-streamdown h2,.ngx-streamdown h3,.ngx-streamdown h4,.ngx-streamdown h5,.ngx-streamdown h6{margin:1.5rem 0 .75rem;font-weight:600;line-height:1.25}.ngx-streamdown h1{font-size:1.875rem}.ngx-streamdown h2{font-size:1.5rem}.ngx-streamdown h3{font-size:1.25rem}.ngx-streamdown h4{font-size:1.125rem}.ngx-streamdown h5{font-size:1rem}.ngx-streamdown h6{font-size:.875rem;color:#6b7280}.ngx-streamdown p{margin:1rem 0}.ngx-streamdown blockquote{margin:1rem 0;padding-left:1rem;border-left:3px solid #d1d5db;color:#6b7280;font-style:italic}.ngx-streamdown hr{margin:1.5rem 0;border:0;border-top:1px solid #e5e7eb}.ngx-streamdown ul,.ngx-streamdown ol{margin:1rem 0;padding-left:1.5rem}.ngx-streamdown ul{list-style:disc}.ngx-streamdown ol{list-style:decimal}.ngx-streamdown li{margin:.25rem 0}.ngx-streamdown li::marker{color:#9ca3af}.ngx-streamdown li>input[type=checkbox]{margin-right:.4rem}.ngx-streamdown a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;font-weight:500}.ngx-streamdown a:hover{color:#1e40af}.ngx-streamdown strong{font-weight:600}.ngx-streamdown em{font-style:italic}.ngx-streamdown del{text-decoration:line-through}.ngx-streamdown sup{vertical-align:super;font-size:.75em}.ngx-streamdown sub{vertical-align:sub;font-size:.75em}.ngx-streamdown mark{background:#fef08a;padding:0 .125rem}.ngx-streamdown abbr{cursor:help;text-decoration:underline dotted}.ngx-streamdown kbd{border:1px solid #d1d5db;background:#f9fafb;border-radius:.25rem;padding:.1rem .35rem;font:.8em monospace;box-shadow:0 1px #00000014}.ngx-streamdown :not(pre)>code{background:#f3f4f6;border-radius:.25rem;padding:.1rem .35rem;font:.85em monospace}.ngx-streamdown table,ngx-table .sd-table-el{width:100%;border-collapse:collapse;font-size:.875rem;border:1px solid #e5e7eb;border-radius:.5rem;overflow:hidden}.ngx-streamdown thead,ngx-table thead{background:#f9fafb}.ngx-streamdown th,ngx-table th{padding:.5rem 1rem;text-align:left;font-weight:500}.ngx-streamdown td,ngx-table td{padding:.5rem 1rem;border-top:1px solid #f3f4f6}.ngx-streamdown img{margin:1rem 0;max-width:100%;border-radius:.5rem}ngx-cb-copy .sd-btn,ngx-cb-download .sd-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .375rem;font-size:.75rem;color:#6b7280;background:transparent;border:0;border-radius:.25rem;cursor:pointer;transition:background-color .15s,color .15s}ngx-cb-copy .sd-btn:hover,ngx-cb-download .sd-btn:hover{background:#e5e7eb;color:#374151}ngx-cb-copy .sd-btn svg,ngx-cb-download .sd-btn svg{display:inline-flex}ngx-code-block{display:block}.sd-codeblock{margin:1rem 0;overflow:hidden;border:1px solid #e5e7eb;border-radius:.5rem}.sd-codeblock-header{display:flex;align-items:center;justify-content:space-between;padding:.375rem .75rem;background:#f3f4f6;font-size:.75rem;color:#4b5563}.sd-codeblock-lang{font-family:monospace;text-transform:lowercase}.sd-codeblock-actions{display:inline-flex;align-items:center;gap:.25rem}.sd-codeblock-body{overflow-x:auto;background:#fff;font-size:.875rem}.sd-codeblock-body pre{margin:0;padding:1rem;font-family:monospace;font-size:.85rem}.sd-codeblock-body .shiki{margin:0;padding:1rem;border-radius:0}ngx-table{display:block}.sd-table{margin:1rem 0}.sd-table-toolbar{display:flex;justify-content:flex-end;gap:.25rem;margin-bottom:.25rem}.sd-table-btn{font-size:.75rem;padding:.25rem .5rem;border:0;background:transparent;border-radius:.25rem;cursor:pointer;color:#4b5563}.sd-table-btn:hover{background:#f3f4f6}.sd-table-msg{font-size:.75rem;padding:.25rem .5rem;color:#16a34a}.sd-table-scroll{overflow-x:auto}ngx-image{display:inline-block}.sd-img{margin:1rem 0;max-width:100%;border-radius:.5rem}.sd-img--hidden{display:none}.sd-img-skeleton{display:inline-block;width:100%;max-width:24rem;height:8rem;margin:1rem 0;border-radius:.5rem;background:#e5e7eb;animation:ngx-sd-pulse 1.5s ease-in-out infinite}.sd-img-error{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:.25rem}@keyframes ngx-sd-pulse{0%,to{opacity:1}50%{opacity:.5}}ngx-mermaid{display:block}ngx-mermaid .ngx-mermaid svg{max-width:100%;height:auto}.sd-mermaid-loading{font-size:.875rem;color:#6b7280}.sd-mermaid-error{font-size:.875rem;color:#dc2626;border:1px solid #fecaca;border-radius:.25rem;padding:.5rem}.sd-mermaid-error pre{margin-top:.5rem;overflow-x:auto;white-space:pre-wrap}.sd-modal-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#0006;padding:1rem}.sd-modal{width:100%;max-width:28rem;background:#fff;border-radius:.5rem;padding:1.25rem;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.sd-modal-title{margin:0 0 .5rem;font-size:1.125rem;font-weight:600}.sd-modal-body{font-size:.875rem;color:#4b5563}.sd-modal-url{margin:.75rem 0;padding:.5rem;background:#f3f4f6;border-radius:.25rem;font:.75rem monospace;word-break:break-all}.sd-modal-actions{display:flex;justify-content:flex-end;gap:.5rem}.sd-modal-btn{padding:.375rem .75rem;font-size:.875rem;border:0;background:transparent;border-radius:.25rem;cursor:pointer}.sd-modal-btn:hover{background:#f3f4f6}.sd-modal-btn--primary{background:#2563eb;color:#fff;font-weight:500}.sd-modal-btn--primary:hover{background:#1d4ed8}.ngx-streamdown[dir=rtl] ul,.ngx-streamdown[dir=rtl] ol{padding-right:1.5rem;padding-left:0}.ngx-streamdown[dir=rtl] blockquote{border-left:0;border-right:3px solid #d1d5db;padding-left:0;padding-right:1rem}.ngx-streamdown[dir=rtl] li>input[type=checkbox]{margin-right:0;margin-left:.4rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hast: [{ type: i0.Input, args: [{ isSignal: true, alias: "hast", required: true }] }], caret: [{ type: i0.Input, args: [{ isSignal: true, alias: "caret", required: false }] }], hostRef: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
+
+const STREAMDOWN_PIPELINE = new InjectionToken('STREAMDOWN_PIPELINE');
+/**
+ * Converts a markdown string into a HAST (HTML AST) tree.
+ * Matches the Streamdown `lib/markdown.ts` pipeline, but extensible via plugins:
+ *   remark-parse → remark-gfm → [remarkPlugins] → remark-rehype → rehype-raw
+ *     → [rehypePlugins] → rehype-sanitize
+ */
+class MarkdownService {
+    // Plugin configurations provided via DI (math, ...). Empty if none.
+    configs = inject(STREAMDOWN_PIPELINE, { optional: true }) ?? [];
+    processor = this.build();
+    /**
+     * Markdown → HAST tree (sync). Uses `runSync` so each render is fast during streaming.
+     * @param options.remend "close" incomplete markdown (default: true)
+     */
+    toHast(markdown, options) {
+        const source = options?.remend === false ? markdown : remend(markdown);
+        const mdast = this.processor.parse(source);
+        const hast = this.processor.runSync(mdast);
+        return hast;
+    }
+    /** Builds the pipeline with plugins (once). */
+    build() {
+        const processor = unified().use(remarkParse).use(remarkGfm);
+        for (const cfg of this.configs) {
+            if (cfg.remarkPlugins) {
+                processor.use(cfg.remarkPlugins);
+            }
+        }
+        processor.use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw);
+        for (const cfg of this.configs) {
+            if (cfg.rehypePlugins) {
+                processor.use(cfg.rehypePlugins);
+            }
+        }
+        const schema = this.configs.find((c) => c.sanitizeSchema)?.sanitizeSchema;
+        processor.use(rehypeSanitize, schema);
+        return processor;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MarkdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MarkdownService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MarkdownService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Renders a single markdown block (Streamdown `Block`, memoized).
+ *
+ * Thanks to `OnPush` + the parent's `@for track $index`, only the changed block
+ * re-renders — the streaming equivalent of React's `memo()`.
+ */
+class BlockComponent {
+    /** Markdown text of a single block */
+    content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    /** Fix incomplete markdown (remend) */
+    parseIncompleteMarkdown = input(true, ...(ngDevMode ? [{ debugName: "parseIncompleteMarkdown" }] : /* istanbul ignore next */ []));
+    /** Whether to append a streaming caret at the end of this block (last block only) */
+    caret = input(false, ...(ngDevMode ? [{ debugName: "caret" }] : /* istanbul ignore next */ []));
+    md = inject(MarkdownService);
+    // React's useMemo(unified.process) → computed
+    hast = computed(() => this.md.toHast(this.content(), { remend: this.parseIncompleteMarkdown() }), ...(ngDevMode ? [{ debugName: "hast" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: BlockComponent, isStandalone: true, selector: "ngx-block", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, parseIncompleteMarkdown: { classPropertyName: "parseIncompleteMarkdown", publicName: "parseIncompleteMarkdown", isSignal: true, isRequired: false, transformFunction: null }, caret: { classPropertyName: "caret", publicName: "caret", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ngx-hast-renderer [hast]="hast()" [caret]="caret()" />`, isInline: true, dependencies: [{ kind: "component", type: HastRendererComponent, selector: "ngx-hast-renderer", inputs: ["hast", "caret"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-block',
+                    standalone: true,
+                    imports: [HastRendererComponent],
+                    template: `<ngx-hast-renderer [hast]="hast()" [caret]="caret()" />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], parseIncompleteMarkdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseIncompleteMarkdown", required: false }] }], caret: [{ type: i0.Input, args: [{ isSignal: true, alias: "caret", required: false }] }] } });
+
+/**
+ * External link confirmation modal. Added to the `StreamdownComponent` template and
+ * shown when `LinkModalService.pendingUrl` is set. Otherwise renders nothing.
+ */
+class LinkModalComponent {
+    svc = inject(LinkModalService);
+    t = inject(TranslationsService).t;
+    url = this.svc.pendingUrl;
+    confirm() {
+        this.svc.confirm();
+    }
+    cancel() {
+        this.svc.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LinkModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LinkModalComponent, isStandalone: true, selector: "ngx-link-modal", ngImport: i0, template: `
+    @if (url(); as link) {
+      <div class="sd-modal-overlay" (click)="cancel()">
+        <div class="sd-modal" (click)="$event.stopPropagation()">
+          <h3 class="sd-modal-title">{{ t.linkWarningTitle }}</h3>
+          <p class="sd-modal-body">{{ t.linkWarningBody }}</p>
+          <p class="sd-modal-url">{{ link }}</p>
+          <div class="sd-modal-actions">
+            <button type="button" class="sd-modal-btn" (click)="cancel()">
+              {{ t.cancel }}
+            </button>
+            <button type="button" class="sd-modal-btn sd-modal-btn--primary" (click)="confirm()">
+              {{ t.open }}
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LinkModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-link-modal',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (url(); as link) {
+      <div class="sd-modal-overlay" (click)="cancel()">
+        <div class="sd-modal" (click)="$event.stopPropagation()">
+          <h3 class="sd-modal-title">{{ t.linkWarningTitle }}</h3>
+          <p class="sd-modal-body">{{ t.linkWarningBody }}</p>
+          <p class="sd-modal-url">{{ link }}</p>
+          <div class="sd-modal-actions">
+            <button type="button" class="sd-modal-btn" (click)="cancel()">
+              {{ t.cancel }}
+            </button>
+            <button type="button" class="sd-modal-btn sd-modal-btn--primary" (click)="confirm()">
+              {{ t.open }}
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * Splits markdown into top-level blocks (Streamdown `lib/parse-blocks.tsx`).
+ *
+ * The `marked` lexer breaks markdown into tokens; each token's `raw` text is one block.
+ * This matters for streaming: only the changed (last) block re-renders, while the
+ * rest stay unchanged thanks to `@for track $index` + OnPush.
+ */
+function parseMarkdownIntoBlocks(markdown) {
+    if (!markdown) {
+        return [];
+    }
+    const tokens = marked.lexer(markdown);
+    return tokens.map((token) => token.raw);
+}
+
+/**
+ * Detects text direction (Streamdown `lib/detect-direction.ts`).
+ * Returns 'rtl' if RTL characters (Arabic, Hebrew, Persian) are present, otherwise 'ltr'.
+ */
+const RTL_CHARS = /[֑-߿܀-ݏހ-޿ࢠ-ࣿיִ-﷽ﹰ-ﻼ]/;
+function detectDirection(text) {
+    return RTL_CHARS.test(text) ? 'rtl' : 'ltr';
+}
+
+/**
+ * Main public component (Streamdown `index.tsx`).
+ *
+ * Usage:
+ *   <ngx-streamdown [content]="markdown()" />
+ *
+ * Data flow (React useMemo chain → Angular computed):
+ *   content → parseMarkdownIntoBlocks → @for(block) → ngx-block → hast-renderer
+ */
+class StreamdownComponent {
+    /** Markdown text to render (grows during streaming) */
+    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    /** Fix incomplete markdown (such as `**bold` during streaming). Default: true */
+    parseIncompleteMarkdown = input(true, ...(ngDevMode ? [{ debugName: "parseIncompleteMarkdown" }] : /* istanbul ignore next */ []));
+    /** Show a streaming caret (typing cursor) at the end of the last block. Default: false */
+    caret = input(false, ...(ngDevMode ? [{ debugName: "caret" }] : /* istanbul ignore next */ []));
+    // Split into blocks — only the changed block re-renders
+    blocks = computed(() => parseMarkdownIntoBlocks(this.content() ?? ''), ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    // Automatic RTL/LTR detection
+    dir = computed(() => detectDirection(this.content() ?? ''), ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StreamdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StreamdownComponent, isStandalone: true, selector: "ngx-streamdown", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, parseIncompleteMarkdown: { classPropertyName: "parseIncompleteMarkdown", publicName: "parseIncompleteMarkdown", isSignal: true, isRequired: false, transformFunction: null }, caret: { classPropertyName: "caret", publicName: "caret", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.dir": "dir()" }, classAttribute: "ngx-streamdown" }, ngImport: i0, template: `
+    @for (block of blocks(); track $index) {
+      <ngx-block
+        [content]="block"
+        [parseIncompleteMarkdown]="parseIncompleteMarkdown()"
+        [caret]="caret() && $last"
+      />
+    }
+    <ngx-link-modal />
+  `, isInline: true, dependencies: [{ kind: "component", type: BlockComponent, selector: "ngx-block", inputs: ["content", "parseIncompleteMarkdown", "caret"] }, { kind: "component", type: LinkModalComponent, selector: "ngx-link-modal" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StreamdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-streamdown',
+                    standalone: true,
+                    imports: [BlockComponent, LinkModalComponent],
+                    template: `
+    @for (block of blocks(); track $index) {
+      <ngx-block
+        [content]="block"
+        [parseIncompleteMarkdown]="parseIncompleteMarkdown()"
+        [caret]="caret() && $last"
+      />
+    }
+    <ngx-link-modal />
+  `,
+                    host: {
+                        class: 'ngx-streamdown',
+                        '[attr.dir]': 'dir()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], parseIncompleteMarkdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseIncompleteMarkdown", required: false }] }], caret: [{ type: i0.Input, args: [{ isSignal: true, alias: "caret", required: false }] }] } });
+
+/**
+ * A standalone component that renders a single generic HAST element node.
+ *
+ * The main render path goes through `HastRendererService` directly with Renderer2
+ * (wrapper-free, for correct HTML semantics). This component serves as a reusable
+ * unit: for when special components want to render their HAST children, or to use it
+ * from a template as `<ngx-hast-element [node]="...">`.
+ *
+ * `:host { display: contents }` — the `<ngx-hast-element>` wrapper does not affect layout.
+ */
+class HastElementComponent {
+    /** The HAST element node to render */
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    hostRef = inject(ElementRef);
+    vcr = inject(ViewContainerRef);
+    renderer = inject(HastRendererService);
+    refs = [];
+    ngOnInit() {
+        // render the node itself (and its children) into the host element
+        this.refs = this.renderer.renderNodes([this.node()], this.hostRef.nativeElement, this.vcr);
+    }
+    ngOnDestroy() {
+        this.renderer.clear(this.hostRef.nativeElement, this.refs);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HastElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: HastElementComponent, isStandalone: true, selector: "ngx-hast-element", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HastElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-hast-element', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
+
+/**
+ * Enables the fade-in animation for elements that newly appear during streaming.
+ * Thanks to diffing (reconcile), only NEW DOM is animated — existing elements don't replay.
+ * `prefers-reduced-motion` is respected.
+ */
+function provideStreamdownAnimation() {
+    return makeEnvironmentProviders([{ provide: STREAMDOWN_ANIMATE, useValue: true }]);
+}
+
+/**
+ * Module-level counter that provides a stable, unique id for each diagram.
+ *
+ * Instead of `Math.random`/`Date` we use a simple incrementing counter — this is
+ * deterministic in SSR/test environments and guarantees the unique id mermaid requires.
+ */
+let diagramCounter = 0;
+/**
+ * Module-level flag for initializing the mermaid library only once.
+ *
+ * Since `mermaid` is an optional peer dependency, it is loaded via dynamic `import()`;
+ * therefore we also keep the init state at module level (shared across instances).
+ */
+let mermaidInitialized = false;
+/**
+ * Component that converts a `mermaid` language block into an SVG diagram.
+ *
+ * It is registered in the code-language registry via `provideStreamdownMermaid()`;
+ * after that, ```mermaid code blocks are rendered with this component instead of Shiki highlighting.
+ *
+ * Data flow:
+ *   code() changes → effect → renderDiagram() → dynamic import('mermaid') → m.render() → innerHTML
+ */
+class MermaidComponent {
+    /** Raw mermaid source to render (provided by the registry via the `code` input) */
+    code = input.required(...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    /** Container where the SVG is placed */
+    host = viewChild.required('host');
+    renderer = inject(Renderer2);
+    t = inject(TranslationsService).t;
+    /** Indicates a render is in progress (loading state) */
+    rendering = signal(false, ...(ngDevMode ? [{ debugName: "rendering" }] : /* istanbul ignore next */ []));
+    /** Error message (when non-empty, the error box is shown) */
+    errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /** Whether at least one successful render has occurred (for streaming UX) */
+    hasRendered = signal(false, ...(ngDevMode ? [{ debugName: "hasRendered" }] : /* istanbul ignore next */ []));
+    /**
+     * Sequence number of the most recent render request. Async renders may finish out of order —
+     * we only write the result of the latest request to the DOM (to avoid a race condition).
+     */
+    renderSeq = 0;
+    constructor() {
+        // re-render the diagram whenever code() or host() changes.
+        // the effect is created in an injection context (the constructor).
+        effect(() => {
+            // read the dependencies so the effect re-runs when a signal changes
+            this.code();
+            this.host();
+            // delegate the async work to a separate helper (the effect callback itself must not be async)
+            void this.renderDiagram();
+        });
+    }
+    /**
+     * Dynamically loads mermaid and renders the current `code()` to SVG.
+     *
+     * IMPORTANT: first we validate the syntax with `mermaid.parse(..., { suppressErrors: true })`.
+     * During streaming, when the code is not yet complete, parse returns `false` — in that case
+     * we do NOT call `m.render()` AT ALL (so mermaid's "Syntax error" bomb graphic does not
+     * appear) and we keep the previous diagram.
+     */
+    async renderDiagram() {
+        const source = this.code().trim();
+        const container = this.host().nativeElement;
+        const seq = ++this.renderSeq;
+        // empty source — do nothing
+        if (!source) {
+            this.rendering.set(false);
+            return;
+        }
+        this.rendering.set(true);
+        try {
+            // mermaid is an optional peer dependency — dynamic import keeps it out of the base bundle
+            const m = (await import('mermaid')).default;
+            if (seq !== this.renderSeq) {
+                return; // this request is stale — a newer one is in flight
+            }
+            // initialize only once; securityLevel 'strict' — output is trusted
+            if (!mermaidInitialized) {
+                m.initialize({ startOnLoad: false, securityLevel: 'strict', theme: 'default' });
+                mermaidInitialized = true;
+            }
+            // validate the syntax without throwing; if false — the code is not yet complete/invalid
+            const valid = await m.parse(source, { suppressErrors: true });
+            if (seq !== this.renderSeq) {
+                return;
+            }
+            if (!valid) {
+                // streaming is ongoing or the code is invalid — don't show the bomb, keep the previous state
+                this.errorMessage.set(null);
+                this.rendering.set(false);
+                return;
+            }
+            const id = `ngx-mermaid-${diagramCounter++}`;
+            const { svg } = await m.render(id, source);
+            if (seq !== this.renderSeq) {
+                return; // the result is stale — don't write it
+            }
+            // with securityLevel 'strict', mermaid's output is considered trusted
+            this.renderer.setProperty(container, 'innerHTML', svg);
+            this.errorMessage.set(null);
+            this.hasRendered.set(true);
+        }
+        catch (error) {
+            if (seq !== this.renderSeq) {
+                return;
+            }
+            // parse succeeded but render failed unexpectedly — show the error box
+            this.errorMessage.set(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            if (seq === this.renderSeq) {
+                this.rendering.set(false);
+            }
+            // on a render error mermaid may leave an orphan `#d<id>` element in the DOM — clean it up
+            removeOrphanMermaidNodes();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MermaidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MermaidComponent, isStandalone: true, selector: "ngx-mermaid", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (errorMessage(); as err) {
+      <div class="sd-mermaid-error">
+        <p><strong>{{ t.mermaidError }}</strong></p>
+        <p>{{ err }}</p>
+        <pre>{{ code() }}</pre>
+      </div>
+    } @else if (rendering() && !hasRendered()) {
+      <p class="sd-mermaid-loading">{{ t.renderingDiagram }}</p>
+    }
+    <!-- The diagram SVG is placed in this container (shown when there is no error) -->
+    <div #host class="ngx-mermaid" [hidden]="!!errorMessage()"></div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MermaidComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-mermaid',
+                    standalone: true,
+                    template: `
+    @if (errorMessage(); as err) {
+      <div class="sd-mermaid-error">
+        <p><strong>{{ t.mermaidError }}</strong></p>
+        <p>{{ err }}</p>
+        <pre>{{ code() }}</pre>
+      </div>
+    } @else if (rendering() && !hasRendered()) {
+      <p class="sd-mermaid-loading">{{ t.renderingDiagram }}</p>
+    }
+    <!-- The diagram SVG is placed in this container (shown when there is no error) -->
+    <div #host class="ngx-mermaid" [hidden]="!!errorMessage()"></div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: true }] }], host: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
+/**
+ * Cleans up temporary elements (`#dngx-mermaid-*` and `#ngx-mermaid-*`) left orphaned
+ * on `document.body` when mermaid `render()` fails — so the "bomb" graphic does not
+ * linger on the page.
+ */
+function removeOrphanMermaidNodes() {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const orphans = document.querySelectorAll('body > [id^="dngx-mermaid-"], body > [id^="ngx-mermaid-"]');
+    orphans.forEach((node) => node.remove());
+}
+
+/**
+ * Enables mermaid diagrams. Add `provideStreamdownMermaid()` in `app.config.ts`:
+ *
+ *   export const appConfig: ApplicationConfig = {
+ *     providers: [provideStreamdownMermaid()],
+ *   };
+ *
+ * This binds the `mermaid` language to the code-language registry, so ```mermaid code blocks
+ * are rendered as SVG diagrams via `MermaidComponent`.
+ */
+function provideStreamdownMermaid() {
+    return makeEnvironmentProviders([
+        provideEnvironmentInitializer(() => {
+            CODE_LANGUAGE_COMPONENTS.set('mermaid', MermaidComponent);
+        }),
+    ]);
+}
+
+/**
+ * Additional tags allowed for KaTeX MathML/SVG output.
+ * The MathML and SVG elements that rehype-katex produces, otherwise
+ * rehype-sanitize would strip them.
+ */
+const KATEX_TAG_NAMES = [
+    'span',
+    'div',
+    'math',
+    'semantics',
+    'annotation',
+    'mrow',
+    'mi',
+    'mo',
+    'mn',
+    'ms',
+    'mtext',
+    'msup',
+    'msub',
+    'msubsup',
+    'mfrac',
+    'msqrt',
+    'mroot',
+    'munder',
+    'mover',
+    'munderover',
+    'mtable',
+    'mtr',
+    'mtd',
+    'mspace',
+    'mpadded',
+    'mphantom',
+    'menclose',
+    'mstyle',
+    'mglyph',
+    'line',
+    'svg',
+    'path',
+    'g',
+];
+// `defaultSchema` is loosely typed (the token expects `unknown`), so we
+// cast it to a local type for convenient reading.
+const base = defaultSchema;
+// Take the existing `attributes['*']` list and allow `className` and `style`
+// (KaTeX uses inline styles) on all elements.
+const baseWildcardAttributes = base.attributes?.['*'] ?? [];
+const wildcardAttributes = [
+    ...baseWildcardAttributes,
+    'className',
+    'class',
+    'style',
+    'ariaHidden',
+    'aria-hidden',
+];
+// Merge the existing tagNames with the KaTeX tags and remove duplicates.
+const baseTagNames = base.tagNames ?? [];
+const tagNames = Array.from(new Set([...baseTagNames, ...KATEX_TAG_NAMES]));
+/**
+ * Sanitize schema that preserves KaTeX output.
+ * A deeply extended copy of `defaultSchema`:
+ *  - allows `className`/`style`/`aria-hidden` on all elements,
+ *  - adds MathML + SVG (katex) tags to `tagNames`.
+ * Loosely typed because the token expects `unknown`.
+ */
+const katexSanitizeSchema = {
+    ...base,
+    attributes: {
+        ...(base.attributes ?? {}),
+        '*': wildcardAttributes,
+    },
+    tagNames,
+};
+
+/**
+ * Enables KaTeX math formulas ($inline$ and $$block$$).
+ * IMPORTANT: the consuming app MUST import `katex/dist/katex.min.css`.
+ */
+function provideStreamdownMath() {
+    const config = {
+        remarkPlugins: [remarkMath],
+        rehypePlugins: [rehypeKatex],
+        sanitizeSchema: katexSanitizeSchema,
+    };
+    return makeEnvironmentProviders([
+        { provide: STREAMDOWN_PIPELINE, multi: true, useValue: config },
+    ]);
+}
+
+/**
+ * CSS class/data-attribute prefix. Equivalent of Streamdown `prefix-context.tsx`.
+ * Provides a stable "hook" for styling (e.g. `data-streamdown="code-block"`).
+ */
+const STREAMDOWN_PREFIX = new InjectionToken('STREAMDOWN_PREFIX');
+class PrefixService {
+    /** Default prefix 'streamdown'. */
+    prefix = inject(STREAMDOWN_PREFIX, { optional: true }) ?? 'streamdown';
+    /** `prefixed('code-block')` → `'streamdown-code-block'`. */
+    prefixed(name) {
+        return `${this.prefix}-${name}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PrefixService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PrefixService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PrefixService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** Overrides the class/data-attribute prefix. */
+function provideStreamdownPrefix(prefix) {
+    return makeEnvironmentProviders([{ provide: STREAMDOWN_PREFIX, useValue: prefix }]);
+}
+
+/*
+ * ngx-streamdown — Angular port of the Vercel Streamdown (React) library.
+ *
+ * Original source: github.com/vercel/streamdown (Apache-2.0, Copyright 2023 Vercel, Inc.)
+ * Public API surface of ngx-streamdown.
+ */
+// ── main public component ───────────────────────────────────────────────────
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BlockComponent, CODE_LANGUAGE_COMPONENTS, COMPONENT_MAP, CodeBlockComponent, DEFAULT_ICONS, DEFAULT_TRANSLATIONS, ELEMENT_CLASSES, HastElementComponent, HastRendererComponent, HastRendererService, IconService, ImageComponent, LinkModalComponent, LinkModalService, MarkdownService, MermaidComponent, PrefixService, STREAMDOWN_ANIMATE, STREAMDOWN_ICONS, STREAMDOWN_LINK_SAFETY, STREAMDOWN_PIPELINE, STREAMDOWN_PREFIX, STREAMDOWN_TRANSLATIONS, ShikiHighlighterService, StreamdownComponent, TableComponent, TranslationsService, cn, detectDirection, extractCodeInfo, extractTableData, katexSanitizeSchema, languageToExtension, parseMarkdownIntoBlocks, provideStreamdownAnimation, provideStreamdownIcons, provideStreamdownLinkSafety, provideStreamdownMath, provideStreamdownMermaid, provideStreamdownPrefix, provideStreamdownTranslations, toCsv, toMarkdown, toTsv };
+//# sourceMappingURL=streamdown-angular.mjs.map