markstream-angular 0.0.9-beta.1 → 0.0.9

package/dist/fesm2022/markstream-angular.mjs

@@ -622,22 +622,35 @@ async function getUseMonaco() {
     if (importAttempted$2)
         return null;
     pendingImport$3 = (async () => {
-        try {
-            const imported = await import('stream-monaco');
-            monacoModule = imported?.default ?? imported;
-            await preloadWorkers(monacoModule);
-            const ready = await warmupShikiTokenizer(monacoModule);
-            if (!ready) {
-                monacoModule = null;
-                importAttempted$2 = true;
-                return null;
+        // Prefer `stream-diffs`: smaller runtime without the heavy
+        // `monaco-editor` dependency. `stream-monaco` remains supported as a
+        // fallback for consumers who install it.
+        const candidates = [
+            async () => (await import('stream-diffs')),
+            async () => (await import('stream-monaco')),
+        ];
+        for (const load of candidates) {
+            try {
+                const candidate = await load();
+                const resolved = candidate?.default ?? candidate;
+                if (typeof resolved?.useMonaco !== 'function')
+                    continue;
+                monacoModule = resolved;
+                await preloadWorkers(monacoModule);
+                const ready = await warmupShikiTokenizer(monacoModule);
+                if (!ready) {
+                    monacoModule = null;
+                    importAttempted$2 = true;
+                    return null;
+                }
+                return monacoModule;
+            }
+            catch {
+                // Try the next candidate runtime.
             }
-            return monacoModule;
-        }
-        catch {
-            importAttempted$2 = true;
-            return null;
         }
+        importAttempted$2 = true;
+        return null;
     })();
     try {
         return await pendingImport$3;
@@ -647,47 +660,23 @@ async function getUseMonaco() {
     }
 }
 
-const DEFAULT_ICON = `
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-  <path d="M14 3h5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" />
-  <path d="M8 11l-3 3l3 3" />
-  <path d="M16 11l3 3l-3 3" />
-  <path d="M13 9l-2 10" />
-</svg>`;
-const MERMAID_ICON = `
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-  <rect x="3" y="4" width="7" height="5" rx="1.5" />
-  <rect x="14" y="4" width="7" height="5" rx="1.5" />
-  <rect x="8.5" y="15" width="7" height="5" rx="1.5" />
-  <path d="M10 6.5h4" />
-  <path d="M12 9v2.5" />
-  <path d="M12 11.5l-3.5 3.5" />
-  <path d="M12 11.5l3.5 3.5" />
-</svg>`;
-const HTML_ICON = `
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-  <path d="M8 7l-4 5l4 5" />
-  <path d="M16 7l4 5l-4 5" />
-  <path d="M14 4l-4 16" />
-</svg>`;
-const MARKDOWN_ICON = `
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-  <rect x="3" y="4" width="18" height="16" rx="2" />
-  <path d="M7 15V9l3 3l3-3v6" />
-  <path d="M16 9v6" />
-  <path d="M14 13l2 2l2-2" />
-</svg>`;
-const JSON_ICON = `
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-  <path d="M9 4c-2 0-3 1.5-3 3.5v2c0 1.1-.4 1.8-1.5 2.5C5.6 12.7 6 13.4 6 14.5v2C6 18.5 7 20 9 20" />
-  <path d="M15 4c2 0 3 1.5 3 3.5v2c0 1.1.4 1.8 1.5 2.5c-1.1.7-1.5 1.4-1.5 2.5v2c0 2-1 3.5-3 3.5" />
-</svg>`;
-const TEXT_ICON = `
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-  <path d="M5 6h14" />
-  <path d="M12 6v12" />
-  <path d="M8 18h8" />
-</svg>`;
+// Keep Angular's default language icons visually identical to the Vue 3 Material theme.
+const MATERIAL_FALLBACK_ICON = '<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#ff7043" d="M2 2a1 1 0 0 0-1 1v10c0 .554.446 1 1 1h12c.554 0 1-.446 1-1V3a1 1 0 0 0-1-1zm0 3h12v8H2zm1 2 2 2-2 2 1 1 3-3-3-3zm5 3.5V12h5v-1.5z"/></svg>';
+const MATERIAL_TEXT_ICON = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/><path fill="#42a5f5" d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z"/></svg>';
+const MATERIAL_PLAIN_ICON = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/><path fill="#42a5f5" d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z"/></svg>';
+const MATERIAL_HTML_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#e65100" d="m4 4 2 22 10 2 10-2 2-22Zm19.72 7H11.28l.29 3h11.86l-.802 9.335L15.99 25l-6.635-1.646L8.93 19h3.02l.19 2 3.86.77 3.84-.77.29-4H8.84L8 8h16Z"/></svg>';
+const MATERIAL_CSS_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#7e57c2" d="M20 18h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 20 22h2v2h2v-2c0-.388-.562-.851-1.254-1.034C20.356 20.34 20 18.84 20 18m-3.254 2.966C14.356 20.34 14 18.84 14 18h-2v-2h-2v8h2v-2h4v2h2v-2c0-.388-.562-.851-1.254-1.034"/><path fill="#7e57c2" d="M24 4H4v20a4 4 0 0 0 4 4h16.16A3.84 3.84 0 0 0 28 24.16V8a4 4 0 0 0-4-4m2 14h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 26 22v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2 2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2 2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 2 2 0 0 1 2-2h2a2 2 0 0 1 2 2Z"/></svg>';
+const MATERIAL_JAVASCRIPT_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#ffca28" d="M2 2v12h12V2zm6 6h1v4a1.003 1.003 0 0 1-1 1H7a1.003 1.003 0 0 1-1-1v-1h1v1h1zm3 0h2v1h-2v1h1a1.003 1.003 0 0 1 1 1v1a1.003 1.003 0 0 1-1 1h-2v-1h2v-1h-1a1.003 1.003 0 0 1-1-1V9a1.003 1.003 0 0 1 1-1"/></svg>';
+const MATERIAL_TYPESCRIPT_ICON = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><path fill="#0288d1" d="M2 2v12h12V2zm4 6h3v1H8v4H7V9H6zm5 0h2v1h-2v1h1a1.003 1.003 0 0 1 1 1v1a1.003 1.003 0 0 1-1 1h-2v-1h2v-1h-1a1.003 1.003 0 0 1-1-1V9a1.003 1.003 0 0 1 1-1"/></svg>';
+const MATERIAL_JSX_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#00bcd4" d="M16 12c7.444 0 12 2.59 12 4s-4.556 4-12 4-12-2.59-12-4 4.556-4 12-4m0-2c-7.732 0-14 2.686-14 6s6.268 6 14 6 14-2.686 14-6-6.268-6-14-6"/><path fill="#00bcd4" d="M16 14a2 2 0 1 0 2 2 2 2 0 0 0-2-2"/><path fill="#00bcd4" d="M10.458 5.507c2.017 0 5.937 3.177 9.006 8.493 3.722 6.447 3.757 11.687 2.536 12.392a.9.9 0 0 1-.457.1c-2.017 0-5.938-3.176-9.007-8.492C8.814 11.553 8.779 6.313 10 5.608a.9.9 0 0 1 .458-.1m-.001-2A2.87 2.87 0 0 0 9 3.875C6.13 5.532 6.938 12.304 10.804 19c3.284 5.69 7.72 9.493 10.74 9.493A2.87 2.87 0 0 0 23 28.124c2.87-1.656 2.062-8.428-1.804-15.124-3.284-5.69-7.72-9.493-10.74-9.493Z"/><path fill="#00bcd4" d="M21.543 5.507a.9.9 0 0 1 .457.1c1.221.706 1.186 5.946-2.536 12.393-3.07 5.316-6.99 8.493-9.007 8.493a.9.9 0 0 1-.457-.1C8.779 25.686 8.814 20.446 12.536 14c3.07-5.316 6.99-8.493 9.007-8.493m0-2c-3.02 0-7.455 3.804-10.74 9.493C6.939 19.696 6.13 26.468 9 28.124a2.87 2.87 0 0 0 1.457.369c3.02 0 7.455-3.804 10.74-9.493C25.061 12.304 25.87 5.532 23 3.876a2.87 2.87 0 0 0-1.457-.369"/></svg>';
+const MATERIAL_TSX_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M16 12c7.444 0 12 2.59 12 4s-4.556 4-12 4-12-2.59-12-4 4.556-4 12-4m0-2c-7.732 0-14 2.686-14 6s6.268 6 14 6 14-2.686 14-6-6.268-6-14-6"/><path fill="#0288d1" d="M16 14a2 2 0 1 0 2 2 2 2 0 0 0-2-2"/><path fill="#0288d1" d="M10.458 5.507c2.017 0 5.937 3.177 9.006 8.493 3.722 6.447 3.757 11.687 2.536 12.392a.9.9 0 0 1-.457.1c-2.017 0-5.938-3.176-9.007-8.492C8.814 11.553 8.779 6.313 10 5.608a.9.9 0 0 1 .458-.1m-.001-2A2.87 2.87 0 0 0 9 3.875C6.13 5.532 6.938 12.304 10.804 19c3.284 5.69 7.72 9.493 10.74 9.493A2.87 2.87 0 0 0 23 28.124c2.87-1.656 2.062-8.428-1.804-15.124-3.284-5.69-7.72-9.493-10.74-9.493Z"/><path fill="#0288d1" d="M21.543 5.507a.9.9 0 0 1 .457.1c1.221.706 1.186 5.946-2.536 12.393-3.07 5.316-6.99 8.493-9.007 8.493a.9.9 0 0 1-.457-.1C8.779 25.686 8.814 20.446 12.536 14c3.07-5.316 6.99-8.493 9.007-8.493m0-2c-3.02 0-7.455 3.804-10.74 9.493C6.939 19.696 6.13 26.468 9 28.124a2.87 2.87 0 0 0 1.457.369c3.02 0 7.455-3.804 10.74-9.493C25.061 12.304 25.87 5.532 23 3.876a2.87 2.87 0 0 0-1.457-.369"/></svg>';
+const MATERIAL_JSON_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="#f9a825" d="M560-160v-80h120q17 0 28.5-11.5T720-280v-80q0-38 22-69t58-44v-14q-36-13-58-44t-22-69v-80q0-17-11.5-28.5T680-720H560v-80h120q50 0 85 35t35 85v80q0 17 11.5 28.5T840-560h40v160h-40q-17 0-28.5 11.5T800-360v80q0 50-35 85t-85 35zm-280 0q-50 0-85-35t-35-85v-80q0-17-11.5-28.5T120-400H80v-160h40q17 0 28.5-11.5T160-600v-80q0-50 35-85t85-35h120v80H280q-17 0-28.5 11.5T240-680v80q0 38-22 69t-58 44v14q36 13 58 44t22 69v80q0 17 11.5 28.5T280-240h120v80z"/></svg>';
+const MATERIAL_MARKDOWN_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#42a5f5" d="m14 10-4 3.5L6 10H4v12h4v-6l2 2 2-2v6h4V10zm12 6v-6h-4v6h-4l6 8 6-8z"/></svg>';
+const MATERIAL_MERMAID_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="none" stroke="#26c6da" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 5c0 12 4.5 11.5 8 14 1.66 1.33 2.34 4 2 8h6c-.34-4 .34-6.67 2-8 3.5-2.5 8-2 8-14-4 0-8 1-12 9-4-8-8-9-12-9z"/></svg>';
+const MATERIAL_PYTHON_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#0288d1" d="M9.86 2A2.86 2.86 0 0 0 7 4.86v1.68h4.29c.39 0 .71.57.71.96H4.86A2.86 2.86 0 0 0 2 10.36v3.781a2.86 2.86 0 0 0 2.86 2.86h1.18v-2.68a2.85 2.85 0 0 1 2.85-2.86h5.25c1.58 0 2.86-1.271 2.86-2.851V4.86A2.86 2.86 0 0 0 14.14 2zm-.72 1.61c.4 0 .72.12.72.71s-.32.891-.72.891c-.39 0-.71-.3-.71-.89s.32-.711.71-.711"/><path fill="#fdd835" d="M17.959 7v2.68a2.85 2.85 0 0 1-2.85 2.859H9.86A2.85 2.85 0 0 0 7 15.389v3.75a2.86 2.86 0 0 0 2.86 2.86h4.28A2.86 2.86 0 0 0 17 19.14v-1.68h-4.291c-.39 0-.709-.57-.709-.96h7.14A2.86 2.86 0 0 0 22 13.64V9.86A2.86 2.86 0 0 0 19.14 7zM8.32 11.513l-.004.004.038-.004zm6.54 7.276c.39 0 .71.3.71.89a.71.71 0 0 1-.71.71c-.4 0-.72-.12-.72-.71s.32-.89.72-.89"/></svg>';
+const MATERIAL_SHELL_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#ff7043" d="M2 2a1 1 0 0 0-1 1v10c0 .554.446 1 1 1h12c.554 0 1-.446 1-1V3a1 1 0 0 0-1-1zm0 3h12v8H2zm1 2 2 2-2 2 1 1 3-3-3-3zm5 3.5V12h5v-1.5z"/></svg>';
+const MATERIAL_SVG_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#8bc34a" d="M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m.12 13.5 3.74 3.74 1.42-1.41-2.33-2.33 2.33-2.33-1.42-1.41zm11.16 0-3.74-3.74-1.42 1.41 2.33 2.33-2.33 2.33 1.42 1.41z"/></svg>';
+const MATERIAL_VUE_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#41b883" d="M1.791 3.851 12 21.471 22.209 3.936V3.85H18.24l-6.18 10.616L5.906 3.851z"/><path fill="#35495e" d="m5.907 3.851 6.152 10.617L18.24 3.851h-3.723L12.084 8.03 9.66 3.85z"/></svg>';
 const LANGUAGE_ALIAS_MAP = {
     '': '',
     'cjs': 'javascript',
@@ -724,19 +713,21 @@ const LANGUAGE_LABEL_MAP = {
     'vue': 'Vue',
 };
 const LANGUAGE_ICON_MAP = {
-    '': TEXT_ICON,
-    'html': HTML_ICON,
-    'javascript': DEFAULT_ICON,
-    'json': JSON_ICON,
-    'jsx': DEFAULT_ICON,
-    'markdown': MARKDOWN_ICON,
-    'mermaid': MERMAID_ICON,
-    'plain': TEXT_ICON,
-    'python': DEFAULT_ICON,
-    'shell': DEFAULT_ICON,
-    'svg': HTML_ICON,
-    'tsx': DEFAULT_ICON,
-    'typescript': DEFAULT_ICON,
+    '': MATERIAL_TEXT_ICON,
+    'css': MATERIAL_CSS_ICON,
+    'html': MATERIAL_HTML_ICON,
+    'javascript': MATERIAL_JAVASCRIPT_ICON,
+    'json': MATERIAL_JSON_ICON,
+    'jsx': MATERIAL_JSX_ICON,
+    'markdown': MATERIAL_MARKDOWN_ICON,
+    'mermaid': MATERIAL_MERMAID_ICON,
+    'plain': MATERIAL_PLAIN_ICON,
+    'python': MATERIAL_PYTHON_ICON,
+    'shell': MATERIAL_SHELL_ICON,
+    'svg': MATERIAL_SVG_ICON,
+    'tsx': MATERIAL_TSX_ICON,
+    'typescript': MATERIAL_TYPESCRIPT_ICON,
+    'vue': MATERIAL_VUE_ICON,
 };
 let userLanguageIconResolver = null;
 function extractLanguageToken(lang) {
@@ -775,17 +766,49 @@ function getLanguageIcon(lang) {
             return hit;
     }
     const normalized = normalizeLanguageIdentifier(lang);
-    return LANGUAGE_ICON_MAP[normalized] || DEFAULT_ICON;
+    return LANGUAGE_ICON_MAP[normalized] || MATERIAL_FALLBACK_ICON;
 }
 const languageMap = LANGUAGE_LABEL_MAP;
 
+function countCodeLines(code) {
+    let count = 1;
+    for (let index = 0; index < code.length; index++) {
+        if (code[index] === '\n') {
+            count++;
+        }
+        else if (code[index] === '\r') {
+            count++;
+            if (code[index + 1] === '\n')
+                index++;
+        }
+    }
+    return count;
+}
+function getDisplayCode(code, loading) {
+    const value = getString$1(code);
+    return loading ? value : value.replace(/\r\n$|\n$|\r$/, '');
+}
 class PreCodeNodeComponent {
+    constructor() {
+        this.showLineNumbers = false;
+        // ─── Line-count caching (mirrors the vue3 PreCodeNode) ─────────────────────
+        this.cachedCode = '';
+        this.cachedCount = 1;
+        this.textCount = 0;
+        this.textCache = '';
+    }
     get language() {
         return normalizeCodeLanguage(this.node?.language);
     }
     get languageClass() {
         return `language-${this.language}`;
     }
+    get preClasses() {
+        return {
+            [this.languageClass]: true,
+            'markstream-pre--line-numbers': this.showLineNumbers === true,
+        };
+    }
     get ariaLabel() {
         return this.language ? `Code block: ${this.language}` : 'Code block';
     }
@@ -795,20 +818,74 @@ class PreCodeNodeComponent {
     get loading() {
         return this.node?.loading === true;
     }
+    get displayCode() {
+        return getDisplayCode(this.node?.code, this.loading);
+    }
+    get codeLineCount() {
+        const code = this.displayCode;
+        if (code === this.cachedCode)
+            return this.cachedCount;
+        this.cachedCount = countCodeLines(code);
+        this.cachedCode = code;
+        return this.cachedCount;
+    }
+    get lineNumbersText() {
+        const count = this.codeLineCount;
+        if (count < this.textCount) {
+            this.textCount = 0;
+            this.textCache = '';
+        }
+        for (let line = this.textCount + 1; line <= count; line++)
+            this.textCache += `${this.textCache ? '\n' : ''}${line}`;
+        this.textCount = count;
+        return this.textCache;
+    }
+    get lineNumberLayoutStyle() {
+        if (this.showLineNumbers !== true)
+            return null;
+        const maximumLineNumber = this.codeLineCount;
+        const width = `${Math.max(4, String(maximumLineNumber).length)}ch`;
+        return {
+            '--markstream-pre-line-number-width': width,
+            '--markstream-pre-diff-line-number-width': width,
+            '--markstream-code-padding-left': 'calc(var(--markstream-pre-line-number-padding-left, 2ch) + var(--markstream-pre-line-number-width, 2ch) + var(--markstream-pre-line-number-padding-right, 1ch) + var(--markstream-pre-line-number-separator-width, 2px) + var(--markstream-pre-line-number-gap-to-code, 1ch))',
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PreCodeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: PreCodeNodeComponent, isStandalone: true, selector: "markstream-angular-pre-code-node", inputs: { node: "node" }, ngImport: i0, template: `<pre [class]="languageClass" [attr.aria-busy]="loading" [attr.aria-label]="ariaLabel" [attr.data-language]="language" tabindex="0"><code translate="no" [textContent]="code"></code></pre>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: PreCodeNodeComponent, isStandalone: true, selector: "markstream-angular-pre-code-node", inputs: { node: "node", showLineNumbers: "showLineNumbers" }, ngImport: i0, template: `<pre
+    [ngClass]="preClasses"
+    [ngStyle]="lineNumberLayoutStyle"
+    [attr.aria-busy]="loading"
+    [attr.aria-label]="ariaLabel"
+    [attr.data-language]="language"
+    [attr.data-markstream-line-numbers]="showLineNumbers ? '1' : null"
+    data-markstream-pre="1"
+    tabindex="0"
+  ><ng-container *ngIf="showLineNumbers"><span class="markstream-pre__line-numbers" aria-hidden="true"><span class="markstream-pre__line-numbers-text">{{ lineNumbersText }}</span></span></ng-container><code translate="no" class="markstream-pre__code" [textContent]="displayCode"></code></pre>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PreCodeNodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'markstream-angular-pre-code-node',
                     standalone: true,
-                    template: `<pre [class]="languageClass" [attr.aria-busy]="loading" [attr.aria-label]="ariaLabel" [attr.data-language]="language" tabindex="0"><code translate="no" [textContent]="code"></code></pre>`,
+                    imports: [CommonModule],
+                    template: `<pre
+    [ngClass]="preClasses"
+    [ngStyle]="lineNumberLayoutStyle"
+    [attr.aria-busy]="loading"
+    [attr.aria-label]="ariaLabel"
+    [attr.data-language]="language"
+    [attr.data-markstream-line-numbers]="showLineNumbers ? '1' : null"
+    data-markstream-pre="1"
+    tabindex="0"
+  ><ng-container *ngIf="showLineNumbers"><span class="markstream-pre__line-numbers" aria-hidden="true"><span class="markstream-pre__line-numbers-text">{{ lineNumbersText }}</span></span></ng-container><code translate="no" class="markstream-pre__code" [textContent]="displayCode"></code></pre>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { node: [{
                 type: Input,
                 args: [{ required: true }]
+            }], showLineNumbers: [{
+                type: Input
             }] } });
 
 const isDevEnv = typeof globalThis !== 'undefined' && globalThis.ngDevMode !== false;
@@ -975,6 +1052,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                 type: Input
             }] } });
 
+const defaultCodeFontFamily = '"SF Mono", Monaco, Consolas, "Ubuntu Mono", "Liberation Mono", "Courier New", monospace';
+const defaultCodeFontSize = 12;
+const defaultCodeLineHeight = 18;
+function readPositiveCodeMetric(value) {
+    return typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : undefined;
+}
+function parseCodeFenceInfo(raw) {
+    const firstLine = String(raw ?? '').split(/\r?\n/, 1)[0]?.trim() ?? '';
+    if (firstLine.length < 3)
+        return '';
+    const marker = firstLine[0];
+    if ((marker !== '`' && marker !== '~') || firstLine[1] !== marker || firstLine[2] !== marker)
+        return '';
+    let index = 3;
+    while (firstLine[index] === marker)
+        index += 1;
+    return firstLine.slice(index).trim();
+}
+function extractCodeBlockFileLabel(raw) {
+    const info = parseCodeFenceInfo(getString$1(raw));
+    if (!info)
+        return '';
+    const tokens = info.split(/\s+/).filter(Boolean);
+    if (!tokens.length)
+        return '';
+    const candidates = tokens[0] === 'diff' ? tokens.slice(1) : tokens;
+    for (const token of candidates) {
+        const value = token.includes(':')
+            ? token.slice(token.indexOf(':') + 1)
+            : token;
+        if (value && /[./\\-]/.test(value))
+            return value;
+    }
+    return '';
+}
 class CodeBlockNodeComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
@@ -985,12 +1097,15 @@ class CodeBlockNodeComponent {
         this.expanded = false;
         this.inlinePreviewOpen = false;
         this.editorReady = false;
-        this.defaultFontSize = 14;
-        this.fontSize = 14;
+        this.defaultFontSize = defaultCodeFontSize;
+        this.fontSize = defaultCodeFontSize;
         this.helpers = null;
+        this.runtimeMonacoOptions = null;
         this.createPromise = null;
         this.syncPromise = null;
         this.editorKind = null;
+        this.editorStreamMode = null;
+        this.lifecycleId = 0;
         this.viewReady = false;
         this.destroyed = false;
         this.copyTimer = null;
@@ -1122,10 +1237,19 @@ class CodeBlockNodeComponent {
             : this.t('artifacts.svgPreviewTitle');
     }
     get headerForeground() {
-        return `var(--vscode-editor-foreground, ${this.resolvedIsDark ? '#e5e7eb' : '#111827'})`;
+        return 'var(--code-action-fg, var(--code-fg))';
     }
     get headerBackground() {
-        return `var(--vscode-editor-background, ${this.resolvedIsDark ? '#111827' : '#ffffff'})`;
+        return 'var(--code-header-bg, var(--code-bg))';
+    }
+    get headerTitle() {
+        return this.fileLabel || this.displayLanguage;
+    }
+    get headerCaption() {
+        return this.fileLabel ? (this.isDiff ? `Diff / ${this.displayLanguage}` : this.displayLanguage) : '';
+    }
+    get fileLabel() {
+        return extractCodeBlockFileLabel(this.node?.raw);
     }
     get ariaLabel() {
         return `Code block: ${this.displayLanguage}`;
@@ -1146,6 +1270,31 @@ class CodeBlockNodeComponent {
             style.maxWidth = max;
         return style;
     }
+    get preFallbackStyle() {
+        const options = this.resolvedMonacoOptions;
+        const fontSize = readPositiveCodeMetric(this.fontSize) ?? defaultCodeFontSize;
+        const lineHeight = readPositiveCodeMetric(options.lineHeight)
+            ?? (fontSize === defaultCodeFontSize ? defaultCodeLineHeight : Math.max(12, Math.round(fontSize * 1.5)));
+        const padding = options.padding && typeof options.padding === 'object'
+            ? options.padding
+            : null;
+        const defaultPadding = this.isDiff ? 0 : 8;
+        const paddingTop = readPositiveCodeMetric(padding?.top) ?? (padding?.top === 0 ? 0 : defaultPadding);
+        const paddingBottom = readPositiveCodeMetric(padding?.bottom) ?? (padding?.bottom === 0 ? 0 : defaultPadding);
+        const fontFamily = typeof options.fontFamily === 'string' && options.fontFamily.trim()
+            ? options.fontFamily.trim()
+            : defaultCodeFontFamily;
+        return {
+            '--markstream-code-font-family': fontFamily,
+            '--markstream-code-padding-y': `${paddingTop}px`,
+            '--markstream-code-padding-bottom': `${paddingBottom}px`,
+            '--vscode-editor-font-size': `${fontSize}px`,
+            '--vscode-editor-line-height': `${lineHeight}px`,
+            'font-family': fontFamily,
+            'font-size': `${fontSize}px`,
+            'line-height': `${lineHeight}px`,
+        };
+    }
     ngAfterViewInit() {
         this.viewReady = true;
         this.applyInitialFontSize();
@@ -1159,6 +1308,7 @@ class CodeBlockNodeComponent {
     }
     ngOnDestroy() {
         this.destroyed = true;
+        this.lifecycleId += 1;
         if (this.copyTimer != null && typeof window !== 'undefined')
             window.clearTimeout(this.copyTimer);
         this.cancelDeferredHeightSync();
@@ -1233,12 +1383,15 @@ class CodeBlockNodeComponent {
         this.cdr.markForCheck();
     }
     applyInitialFontSize() {
+        const previousDefault = this.defaultFontSize;
         const initial = Number(this.resolvedMonacoOptions.fontSize);
-        this.defaultFontSize = Number.isFinite(initial) && initial > 0 ? initial : 14;
-        if (!(typeof this.fontSize === 'number' && Number.isFinite(this.fontSize) && this.fontSize > 0))
-            this.fontSize = this.defaultFontSize;
-        if (this.fontSize < 10 || this.fontSize > 36)
+        this.defaultFontSize = Number.isFinite(initial) && initial > 0 ? initial : defaultCodeFontSize;
+        if (!(typeof this.fontSize === 'number' && Number.isFinite(this.fontSize) && this.fontSize > 0)
+            || this.fontSize === previousDefault
+            || this.fontSize < 10
+            || this.fontSize > 36) {
             this.fontSize = this.defaultFontSize;
+        }
     }
     async syncEditorState() {
         if (this.destroyed || !this.viewReady)
@@ -1263,16 +1416,20 @@ class CodeBlockNodeComponent {
         this.syncPromise = (async () => {
             try {
                 const desiredKind = this.isDiff && typeof this.helpers?.createDiffEditor === 'function' ? 'diff' : 'single';
-                if (this.editorKind !== desiredKind) {
-                    await this.recreateEditor(desiredKind);
+                const desiredStreamMode = this.resolvedLoading !== false;
+                if (this.editorKind !== desiredKind
+                    || this.editorStreamMode !== desiredStreamMode
+                    || !this.hasRenderedEditorDom(desiredKind)) {
+                    await this.recreateEditor(desiredKind, desiredStreamMode);
                 }
                 else {
                     await this.updateEditor();
                 }
                 await Promise.resolve(this.helpers?.setTheme?.(this.resolvedIsDark ? this.resolvedDarkTheme : this.resolvedLightTheme));
                 this.applyEditorFontSize();
-                if (this.expanded || !this.resolvedLoading || !this.editorReady)
-                    this.applyEditorHeight();
+                const creationId = this.lifecycleId;
+                if (!await this.prepareEditorHandoff(desiredKind, creationId))
+                    return;
                 this.editorReady = true;
                 this.scheduleDeferredHeightSync();
             }
@@ -1299,19 +1456,32 @@ class CodeBlockNodeComponent {
                 this.useFallback = true;
                 return;
             }
+            const configuredUnsafeCSS = typeof this.resolvedMonacoOptions.unsafeCSS === 'string'
+                ? this.resolvedMonacoOptions.unsafeCSS
+                : '';
             const options = {
                 wordWrap: 'on',
+                stream: this.resolvedLoading !== false,
                 wrappingIndent: 'same',
                 readOnly: true,
                 minimap: { enabled: false },
                 lineNumbers: 'on',
                 revealDebounceMs: 75,
                 MAX_HEIGHT: 500,
+                fontFamily: defaultCodeFontFamily,
                 fontSize: this.defaultFontSize,
+                lineHeight: defaultCodeLineHeight,
+                padding: this.isDiff ? { top: 0, bottom: 0 } : { top: 8, bottom: 8 },
                 themes: this.resolvedThemes,
                 theme: this.resolvedIsDark ? this.resolvedDarkTheme : this.resolvedLightTheme,
                 ...(this.resolvedMonacoOptions || {}),
+                // The Angular shell already owns the language/file header. Keep the
+                // enhanced surface headerless so it matches the Vue 3 handoff contract.
+                disableFileHeader: true,
+                unsafeCSS: `[data-file], [data-diff] { --diffs-min-number-column-width-default: 4ch !important; }
+${configuredUnsafeCSS}`.trim(),
             };
+            this.runtimeMonacoOptions = options;
             this.helpers = monacoModule.useMonaco(options);
         })();
         try {
@@ -1321,18 +1491,47 @@ class CodeBlockNodeComponent {
             this.createPromise = null;
         }
     }
-    async recreateEditor(kind) {
+    async recreateEditor(kind, streamMode) {
         const host = this.editorHost?.nativeElement;
         if (!host || !this.helpers)
             return;
+        this.editorReady = false;
+        this.lifecycleId += 1;
         this.cleanupEditor();
         host.innerHTML = '';
         this.editorKind = kind;
+        this.editorStreamMode = streamMode;
+        if (this.runtimeMonacoOptions)
+            this.runtimeMonacoOptions.stream = streamMode;
         if (kind === 'diff') {
             await Promise.resolve(this.helpers.createDiffEditor?.(host, this.originalCode, this.resolvedCode, this.monacoLanguage));
+            this.syncEditorGeometryVars();
             return;
         }
         await Promise.resolve(this.helpers.createEditor?.(host, this.resolvedCode, this.monacoLanguage));
+        this.syncEditorGeometryVars();
+    }
+    // Align the enhanced surface with the pre-fallback geometry. stream-diffs /
+    // pierre honor these CSS variables on the editor host (custom properties
+    // inherit across the pierre shadow boundary):
+    // - `--diffs-tab-size`: fallback defaults to 4, pierre defaults to 2.
+    // - `--diffs-gap-block`: only set when padding is present; the default 8px
+    //   gap already matches the fallback.
+    syncEditorGeometryVars() {
+        const host = this.editorHost?.nativeElement;
+        if (!host)
+            return;
+        const tabSize = readPositiveCodeMetric(this.resolvedMonacoOptions.tabSize) ?? 4;
+        host.style.setProperty('--diffs-tab-size', String(tabSize));
+        const rawPadding = this.resolvedMonacoOptions.padding;
+        const hasConfiguredPadding = Boolean(rawPadding && typeof rawPadding === 'object');
+        if (hasConfiguredPadding) {
+            const top = readPositiveCodeMetric(rawPadding.top) ?? 0;
+            host.style.setProperty('--diffs-gap-block', `${top}px`);
+        }
+        else {
+            host.style.removeProperty('--diffs-gap-block');
+        }
     }
     async updateEditor() {
         if (!this.helpers)
@@ -1343,6 +1542,66 @@ class CodeBlockNodeComponent {
         }
         await Promise.resolve(this.helpers.updateCode?.(this.resolvedCode, this.monacoLanguage));
     }
+    hasRenderedEditorDom(kind) {
+        const host = this.editorHost?.nativeElement;
+        if (!host)
+            return false;
+        const monacoSelector = kind === 'diff' ? '.monaco-diff-editor' : '.monaco-editor';
+        return !!host.querySelector([
+            monacoSelector,
+            'diffs-container',
+            '.stream-diffs-shell',
+            '[data-stream-diffs-state]',
+        ].join(','));
+    }
+    getVisualEditorSurface() {
+        return this.editorHost?.nativeElement.querySelector([
+            '.monaco-diff-editor',
+            '.monaco-editor',
+            'diffs-container',
+            '[data-stream-diffs-state]',
+            '.stream-diffs-shell',
+        ].join(',')) ?? null;
+    }
+    isEditorVisuallyReady(kind) {
+        const host = this.editorHost?.nativeElement;
+        if (!host || !this.hasRenderedEditorDom(kind) || typeof window === 'undefined')
+            return false;
+        const surface = this.getVisualEditorSurface();
+        if (!surface)
+            return false;
+        const rect = surface.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            return false;
+        const style = window.getComputedStyle(surface);
+        return style.display !== 'none'
+            && Number.parseFloat(style.opacity || '1') > 0.01;
+    }
+    async prepareEditorHandoff(kind, creationId) {
+        // Time-box the handoff: if visual readiness can't be confirmed (e.g. a
+        // hidden/zero-size container), reveal the editor anyway once its DOM is
+        // mounted so the block never strands in the pre-fallback forever.
+        const deadline = Date.now() + 1500;
+        let attempt = 0;
+        while (Date.now() < deadline && attempt < 30) {
+            attempt += 1;
+            if (this.destroyed || creationId !== this.lifecycleId)
+                return false;
+            this.applyEditorHeight(true);
+            await this.nextAnimationFrame();
+            if (this.isEditorVisuallyReady(kind)) {
+                this.applyEditorHeight(true);
+                await this.nextAnimationFrame();
+                return this.isEditorVisuallyReady(kind);
+            }
+        }
+        return !this.destroyed && creationId === this.lifecycleId && this.hasRenderedEditorDom(kind);
+    }
+    nextAnimationFrame() {
+        if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function')
+            return Promise.resolve();
+        return new Promise(resolve => window.requestAnimationFrame(() => resolve()));
+    }
     applyEditorFontSize() {
         const view = this.editorKind === 'diff'
             ? this.helpers?.getDiffEditorView?.()
@@ -1354,7 +1613,7 @@ class CodeBlockNodeComponent {
         }
         catch { }
     }
-    applyEditorHeight() {
+    applyEditorHeight(_preparing = false) {
         const host = this.editorHost?.nativeElement;
         if (!host)
             return;
@@ -1449,6 +1708,7 @@ class CodeBlockNodeComponent {
         });
     }
     cleanupEditor() {
+        this.cancelDeferredHeightSync();
         try {
             this.helpers?.safeClean?.();
         }
@@ -1504,7 +1764,10 @@ class CodeBlockNodeComponent {
           <span class="icon-slot code-block-language-icon">
             <img class="code-block-language-icon__image" [src]="languageIconDataUrl" alt="" />
           </span>
-          <span class="code-block-header__label">{{ displayLanguage }}</span>
+          <span class="code-header-copy">
+            <span class="code-header-title">{{ headerTitle }}</span>
+            <span *ngIf="headerCaption" class="code-header-caption">{{ headerCaption }}</span>
+          </span>
         </div>
         <div class="code-block-header__actions">
           <button
@@ -1626,13 +1889,28 @@ class CodeBlockNodeComponent {
         [class.code-block-body--expanded]="expanded"
       >
         <ng-container *ngIf="!showLoadingPlaceholder; else loadingTpl">
-          <markstream-angular-pre-code-node *ngIf="useFallback; else editorTpl" [node]="node" />
+          <markstream-angular-pre-code-node
+            *ngIf="useFallback; else editorTpl"
+            class="code-editor-fallback-surface"
+            [node]="node"
+            [ngStyle]="preFallbackStyle"
+            [showLineNumbers]="true"
+          />
 
           <ng-template #editorTpl>
-            <div #editorHost class="code-editor-container" [style.visibility]="editorReady ? 'visible' : 'hidden'"></div>
-            <div *ngIf="!editorReady" style="position:absolute; inset:0; overflow:auto; padding:1rem;">
-              <pre class="code-fallback-plain m-0" [attr.aria-busy]="resolvedLoading" [attr.aria-label]="ariaLabel" tabindex="0"><code translate="no" [style.fontSize.px]="fontSize" [textContent]="resolvedCode"></code></pre>
-            </div>
+            <div
+              #editorHost
+              class="code-editor-container"
+              [style.visibility]="editorReady ? 'visible' : 'hidden'"
+              [attr.aria-hidden]="editorReady ? null : 'true'"
+            ></div>
+            <markstream-angular-pre-code-node
+              *ngIf="!editorReady"
+              class="code-editor-fallback-surface"
+              [node]="node"
+              [ngStyle]="preFallbackStyle"
+              [showLineNumbers]="true"
+            />
           </ng-template>
         </ng-container>
       </div>
@@ -1659,7 +1937,7 @@ class CodeBlockNodeComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PreCodeNodeComponent, selector: "markstream-angular-pre-code-node", inputs: ["node"] }, { kind: "component", type: HtmlPreviewFrameComponent, selector: "markstream-angular-html-preview-frame", inputs: ["code", "isDark", "htmlPreviewAllowScripts", "htmlPreviewSandbox", "title", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PreCodeNodeComponent, selector: "markstream-angular-pre-code-node", inputs: ["node", "showLineNumbers"] }, { kind: "component", type: HtmlPreviewFrameComponent, selector: "markstream-angular-html-preview-frame", inputs: ["code", "isDark", "htmlPreviewAllowScripts", "htmlPreviewSandbox", "title", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CodeBlockNodeComponent, decorators: [{
             type: Component,
@@ -1687,7 +1965,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
           <span class="icon-slot code-block-language-icon">
             <img class="code-block-language-icon__image" [src]="languageIconDataUrl" alt="" />
           </span>
-          <span class="code-block-header__label">{{ displayLanguage }}</span>
+          <span class="code-header-copy">
+            <span class="code-header-title">{{ headerTitle }}</span>
+            <span *ngIf="headerCaption" class="code-header-caption">{{ headerCaption }}</span>
+          </span>
         </div>
         <div class="code-block-header__actions">
           <button
@@ -1809,13 +2090,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
         [class.code-block-body--expanded]="expanded"
       >
         <ng-container *ngIf="!showLoadingPlaceholder; else loadingTpl">
-          <markstream-angular-pre-code-node *ngIf="useFallback; else editorTpl" [node]="node" />
+          <markstream-angular-pre-code-node
+            *ngIf="useFallback; else editorTpl"
+            class="code-editor-fallback-surface"
+            [node]="node"
+            [ngStyle]="preFallbackStyle"
+            [showLineNumbers]="true"
+          />
 
           <ng-template #editorTpl>
-            <div #editorHost class="code-editor-container" [style.visibility]="editorReady ? 'visible' : 'hidden'"></div>
-            <div *ngIf="!editorReady" style="position:absolute; inset:0; overflow:auto; padding:1rem;">
-              <pre class="code-fallback-plain m-0" [attr.aria-busy]="resolvedLoading" [attr.aria-label]="ariaLabel" tabindex="0"><code translate="no" [style.fontSize.px]="fontSize" [textContent]="resolvedCode"></code></pre>
-            </div>
+            <div
+              #editorHost
+              class="code-editor-container"
+              [style.visibility]="editorReady ? 'visible' : 'hidden'"
+              [attr.aria-hidden]="editorReady ? null : 'true'"
+            ></div>
+            <markstream-angular-pre-code-node
+              *ngIf="!editorReady"
+              class="code-editor-fallback-surface"
+              [node]="node"
+              [ngStyle]="preFallbackStyle"
+              [showLineNumbers]="true"
+            />
           </ng-template>
         </ng-container>
       </div>
@@ -7942,6 +8238,7 @@ class NodeOutletComponent {
             <markstream-angular-pre-code-node
               *ngIf="codeMode === 'pre'; else enhancedCode"
               [node]="node"
+              [showLineNumbers]="true"
             />
           </ng-template>
           <ng-template #enhancedCode>
@@ -7952,7 +8249,7 @@ class NodeOutletComponent {
         <markstream-angular-fallback-node *ngSwitchDefault [node]="fallbackNode" [context]="context" [indexKey]="indexKey" />
       </ng-container>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchCase), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchDefault), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(() => AdmonitionNodeComponent), selector: "markstream-angular-admonition-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => BlockquoteNodeComponent), selector: "markstream-angular-blockquote-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => CheckboxNodeComponent), selector: "markstream-angular-checkbox-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => CodeBlockNodeComponent), selector: "markstream-angular-code-block-node", inputs: ["node", "context", "props"] }, { kind: "component", type: i0.forwardRef(() => D2BlockNodeComponent), selector: "markstream-angular-d2-block-node", inputs: ["node", "context", "props"] }, { kind: "component", type: i0.forwardRef(() => DefinitionListNodeComponent), selector: "markstream-angular-definition-list-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => DynamicNodeHostComponent), selector: "markstream-angular-dynamic-node-host", inputs: ["component", "node", "context", "indexKey", "inputs"] }, { kind: "component", type: i0.forwardRef(() => EmojiNodeComponent), selector: "markstream-angular-emoji-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => EmphasisNodeComponent), selector: "markstream-angular-emphasis-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => FallbackComponent), selector: "markstream-angular-fallback-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => FootnoteAnchorNodeComponent), selector: "markstream-angular-footnote-anchor-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => FootnoteNodeComponent), selector: "markstream-angular-footnote-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => FootnoteReferenceNodeComponent), selector: "markstream-angular-footnote-reference-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => HardBreakNodeComponent), selector: "markstream-angular-hardbreak-node" }, { kind: "component", type: i0.forwardRef(() => HeadingNodeComponent), selector: "markstream-angular-heading-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => HighlightNodeComponent), selector: "markstream-angular-highlight-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => HtmlBlockNodeComponent), selector: "markstream-angular-html-block-node", inputs: ["node", "context"] }, { kind: "component", type: i0.forwardRef(() => HtmlInlineNodeComponent), selector: "markstream-angular-html-inline-node", inputs: ["node", "context"] }, { kind: "component", type: i0.forwardRef(() => ImageNodeComponent), selector: "markstream-angular-image-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => InfographicBlockNodeComponent), selector: "markstream-angular-infographic-block-node", inputs: ["node", "context", "props"] }, { kind: "component", type: i0.forwardRef(() => InlineCodeNodeComponent), selector: "markstream-angular-inline-code-node", inputs: ["node", "context", "indexKey", "typewriter", "fade"] }, { kind: "component", type: i0.forwardRef(() => InsertNodeComponent), selector: "markstream-angular-insert-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => LinkNodeComponent), selector: "markstream-angular-link-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => ListItemNodeComponent), selector: "markstream-angular-list-item-node", inputs: ["node", "context", "indexKey", "value"] }, { kind: "component", type: i0.forwardRef(() => ListNodeComponent), selector: "markstream-angular-list-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => MathBlockNodeComponent), selector: "markstream-angular-math-block-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => MathInlineNodeComponent), selector: "markstream-angular-math-inline-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => MermaidBlockNodeComponent), selector: "markstream-angular-mermaid-block-node", inputs: ["node", "context", "props"] }, { kind: "component", type: i0.forwardRef(() => ParagraphNodeComponent), selector: "markstream-angular-paragraph-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => PreCodeNodeComponent), selector: "markstream-angular-pre-code-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => ReferenceNodeComponent), selector: "markstream-angular-reference-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => StrikethroughNodeComponent), selector: "markstream-angular-strikethrough-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => StrongNodeComponent), selector: "markstream-angular-strong-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => SubscriptNodeComponent), selector: "markstream-angular-subscript-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => SuperscriptNodeComponent), selector: "markstream-angular-superscript-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => TableNodeComponent), selector: "markstream-angular-table-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => TextNodeComponent), selector: "markstream-angular-text-node", inputs: ["node", "context", "indexKey", "typewriter", "fade"] }, { kind: "component", type: i0.forwardRef(() => ThematicBreakNodeComponent), selector: "markstream-angular-thematic-break-node" }, { kind: "component", type: i0.forwardRef(() => VmrContainerNodeComponent), selector: "markstream-angular-vmr-container-node", inputs: ["node", "context", "indexKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchCase), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchDefault), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(() => AdmonitionNodeComponent), selector: "markstream-angular-admonition-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => BlockquoteNodeComponent), selector: "markstream-angular-blockquote-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => CheckboxNodeComponent), selector: "markstream-angular-checkbox-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => CodeBlockNodeComponent), selector: "markstream-angular-code-block-node", inputs: ["node", "context", "props"] }, { kind: "component", type: i0.forwardRef(() => D2BlockNodeComponent), selector: "markstream-angular-d2-block-node", inputs: ["node", "context", "props"] }, { kind: "component", type: i0.forwardRef(() => DefinitionListNodeComponent), selector: "markstream-angular-definition-list-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => DynamicNodeHostComponent), selector: "markstream-angular-dynamic-node-host", inputs: ["component", "node", "context", "indexKey", "inputs"] }, { kind: "component", type: i0.forwardRef(() => EmojiNodeComponent), selector: "markstream-angular-emoji-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => EmphasisNodeComponent), selector: "markstream-angular-emphasis-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => FallbackComponent), selector: "markstream-angular-fallback-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => FootnoteAnchorNodeComponent), selector: "markstream-angular-footnote-anchor-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => FootnoteNodeComponent), selector: "markstream-angular-footnote-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => FootnoteReferenceNodeComponent), selector: "markstream-angular-footnote-reference-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => HardBreakNodeComponent), selector: "markstream-angular-hardbreak-node" }, { kind: "component", type: i0.forwardRef(() => HeadingNodeComponent), selector: "markstream-angular-heading-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => HighlightNodeComponent), selector: "markstream-angular-highlight-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => HtmlBlockNodeComponent), selector: "markstream-angular-html-block-node", inputs: ["node", "context"] }, { kind: "component", type: i0.forwardRef(() => HtmlInlineNodeComponent), selector: "markstream-angular-html-inline-node", inputs: ["node", "context"] }, { kind: "component", type: i0.forwardRef(() => ImageNodeComponent), selector: "markstream-angular-image-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => InfographicBlockNodeComponent), selector: "markstream-angular-infographic-block-node", inputs: ["node", "context", "props"] }, { kind: "component", type: i0.forwardRef(() => InlineCodeNodeComponent), selector: "markstream-angular-inline-code-node", inputs: ["node", "context", "indexKey", "typewriter", "fade"] }, { kind: "component", type: i0.forwardRef(() => InsertNodeComponent), selector: "markstream-angular-insert-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => LinkNodeComponent), selector: "markstream-angular-link-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => ListItemNodeComponent), selector: "markstream-angular-list-item-node", inputs: ["node", "context", "indexKey", "value"] }, { kind: "component", type: i0.forwardRef(() => ListNodeComponent), selector: "markstream-angular-list-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => MathBlockNodeComponent), selector: "markstream-angular-math-block-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => MathInlineNodeComponent), selector: "markstream-angular-math-inline-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => MermaidBlockNodeComponent), selector: "markstream-angular-mermaid-block-node", inputs: ["node", "context", "props"] }, { kind: "component", type: i0.forwardRef(() => ParagraphNodeComponent), selector: "markstream-angular-paragraph-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => PreCodeNodeComponent), selector: "markstream-angular-pre-code-node", inputs: ["node", "showLineNumbers"] }, { kind: "component", type: i0.forwardRef(() => ReferenceNodeComponent), selector: "markstream-angular-reference-node", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => StrikethroughNodeComponent), selector: "markstream-angular-strikethrough-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => StrongNodeComponent), selector: "markstream-angular-strong-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => SubscriptNodeComponent), selector: "markstream-angular-subscript-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => SuperscriptNodeComponent), selector: "markstream-angular-superscript-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => TableNodeComponent), selector: "markstream-angular-table-node", inputs: ["node", "context", "indexKey"] }, { kind: "component", type: i0.forwardRef(() => TextNodeComponent), selector: "markstream-angular-text-node", inputs: ["node", "context", "indexKey", "typewriter", "fade"] }, { kind: "component", type: i0.forwardRef(() => ThematicBreakNodeComponent), selector: "markstream-angular-thematic-break-node" }, { kind: "component", type: i0.forwardRef(() => VmrContainerNodeComponent), selector: "markstream-angular-vmr-container-node", inputs: ["node", "context", "indexKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NodeOutletComponent, decorators: [{
             type: Component,
@@ -8083,6 +8380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
             <markstream-angular-pre-code-node
               *ngIf="codeMode === 'pre'; else enhancedCode"
               [node]="node"
+              [showLineNumbers]="true"
             />
           </ng-template>
           <ng-template #enhancedCode>
@@ -8805,6 +9103,11 @@ async function renderMonaco(root, cleanupFns, options, isActive) {
         }
         const originalPre = pre.cloneNode(true);
         pre.replaceWith(shell.wrapper);
+        const configuredUnsafeCSS = typeof options.monacoOptions?.unsafeCSS === 'string'
+            ? options.monacoOptions.unsafeCSS
+            : '';
+        const runtimeUnsafeCSS = `[data-file], [data-diff] { --diffs-min-number-column-width-default: 4ch !important; }
+${configuredUnsafeCSS}`.trim();
         const helpers = monacoModule.useMonaco({
             themes: ['vitesse-dark', 'vitesse-light'],
             languages: Array.from(new Set([monacoLanguage, 'plaintext'])),
@@ -8821,6 +9124,10 @@ async function renderMonaco(root, cleanupFns, options, isActive) {
                 ? { padding: { top: paddingTop ?? 0, bottom: paddingBottom ?? 0 } }
                 : {}),
             ...(options.monacoOptions || {}),
+            // createEnhancedBlockShell already renders the code header. Prevent the
+            // enhanced runtime from adding a second `code.<language>` file header.
+            disableFileHeader: true,
+            unsafeCSS: runtimeUnsafeCSS,
         });
         try {
             if (diff && typeof helpers.createDiffEditor === 'function') {