@vertesia/ui 1.0.0 → 1.1.0-dev.20260427.060440Z

package/src/widgets/markdown/preprocessMathDelimiters.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from "vitest";
+import { preprocessMathDelimiters } from "./preprocessMathDelimiters";
+
+describe("preprocessMathDelimiters", () => {
+    it("preserves LaTeX patterns (commands, subscripts, superscripts, braces)", () => {
+        expect(preprocessMathDelimiters("$x = \\frac{-b}{2a}$")).toBe("$x = \\frac{-b}{2a}$");
+        expect(preprocessMathDelimiters("$n^2$")).toBe("$n^2$");
+        expect(preprocessMathDelimiters("$a_{ij}$")).toBe("$a_{ij}$");
+    });
+
+    it("preserves single-letter variables and variable assignments", () => {
+        expect(preprocessMathDelimiters("rate $r$ can be expressed")).toBe("rate $r$ can be expressed");
+        expect(preprocessMathDelimiters("where $r = 0.235$ (growth)")).toBe("where $r = 0.235$ (growth)");
+    });
+
+    it("preserves ion notation (^+ and ^-)", () => {
+        expect(preprocessMathDelimiters("$Ca^+$")).toBe("$Ca^+$");
+        expect(preprocessMathDelimiters("$Cl^-$")).toBe("$Cl^-$");
+        expect(preprocessMathDelimiters("$Ca^{2+}$")).toBe("$Ca^{2+}$");
+    });
+
+    it("preserves display math ($$...$$)", () => {
+        expect(preprocessMathDelimiters("$$E = mc^2$$")).toBe("$$E = mc^2$$");
+        expect(preprocessMathDelimiters("$$\nx = \\frac{-b}{2a}\n$$")).toBe("$$\nx = \\frac{-b}{2a}\n$$");
+    });
+
+    it("escapes currency amounts", () => {
+        expect(preprocessMathDelimiters("between $100M and $500M")).toBe("between \\$100M and \\$500M");
+        expect(preprocessMathDelimiters("all $ figures by $500k")).toBe("all \\$ figures by \\$500k");
+        expect(preprocessMathDelimiters("$100K-$500K range")).toBe("\\$100K-\\$500K range");
+    });
+
+    it("preserves uncertain content as fallback", () => {
+        expect(preprocessMathDelimiters("$100 + 200$")).toBe("$100 + 200$");
+    });
+
+    it("skips inline code and fenced code blocks", () => {
+        expect(preprocessMathDelimiters("use `$100 and $200` as values")).toBe("use `$100 and $200` as values");
+        const fenced = "costs $100M and $500M\n```\nprice = $200\n```";
+        expect(preprocessMathDelimiters(fenced)).toBe("costs \\$100M and \\$500M\n```\nprice = $200\n```");
+    });
+
+    it("no-ops on empty string and strings without $", () => {
+        expect(preprocessMathDelimiters("")).toBe("");
+        expect(preprocessMathDelimiters("no dollars here")).toBe("no dollars here");
+    });
+
+    it("does not double-escape already escaped \\$", () => {
+        expect(preprocessMathDelimiters("costs \\$100")).toBe("costs \\$100");
+    });
+
+    it("replaces \\$ inside LaTeX spans with \\text{\\textdollar}", () => {
+        expect(preprocessMathDelimiters("where $P = \\$2,847,500$ end"))
+            .toBe("where $P = \\text{\\textdollar}2,847,500$ end");
+    });
+
+    it("does not replace \\$ outside LaTeX spans", () => {
+        expect(preprocessMathDelimiters("costs \\$100")).toBe("costs \\$100");
+    });
+
+    it("escapes currency $ adjacent to LaTeX pairs", () => {
+        expect(preprocessMathDelimiters("costs $500M. Also $x = \\frac{1}{2}$ works"))
+            .toBe("costs \\$500M. Also $x = \\frac{1}{2}$ works");
+    });
+
+    it("handles currency and LaTeX on separate lines", () => {
+        expect(preprocessMathDelimiters("between $100M and $500M\nwhere $x = \\frac{1}{2}$"))
+            .toBe("between \\$100M and \\$500M\nwhere $x = \\frac{1}{2}$");
+    });
+
+    it("handles mixed currency, LaTeX, and \\$ in a financial report line", () => {
+        const input = "Where $F = \\$567,800$ (fixed costs), $P = \\$89.99$ (price), and $V = \\$0.42$ (variable). This yields $Q_{\\text{BE}} = 6,338$ units.";
+        const result = preprocessMathDelimiters(input);
+        expect(result).toContain("$F = \\text{\\textdollar}567,800$");
+        expect(result).toContain("$P = \\text{\\textdollar}89.99$");
+        expect(result).toContain("$V = \\text{\\textdollar}0.42$");
+        expect(result).toContain("$Q_{\\text{BE}} = 6,338$");
+    });
+
+    it("handles interleaved currency, inline LaTeX, and display math", () => {
+        const input = "The report for $500M shows that (given $sales = x*e^{y}$) we were off by $15M. This is from $$variance = x*v/2*e^(y-y`)$$";
+        const result = preprocessMathDelimiters(input);
+        expect(result).toContain("$sales = x*e^{y}$");
+        expect(result).toContain("$$variance = x*v/2*e^(y-y`)$$");
+        expect(result).toContain("\\$500M");
+    });
+});

package/src/widgets/markdown/preprocessMathDelimiters.ts

@@ -0,0 +1,229 @@
+/**
+ * Markdown math delimiter preprocessor.
+ *
+ * Disambiguates `$` characters in markdown so that remark-math correctly
+ * distinguishes LaTeX math (`$x = \frac{1}{2}$`) from currency (`$2,847,500`).
+ *
+ * Uses a three-pass priority algorithm over `$` positions:
+ *   1. Commit pairs matching LaTeX patterns (highest priority)
+ *   2. Pair remaining positions; escape currency patterns
+ *   3. Escape lone `$` adjacent to committed LaTeX pairs
+ *
+ * Also normalizes `\$` inside LaTeX spans into a KaTeX-compatible form,
+ * since remark-math does not treat `\$` as escaped within math delimiters.
+ *
+ * No-ops on input without `$`. Skips fenced code blocks and inline code spans.
+ */
+
+const FENCED_CODE_BLOCK_REGEX = /(^|\n)(`{3,}|~{3,})[^\n]*\n[\s\S]*?\n\2(?=\n|$)/g; // ```...``` or ~~~...~~~
+const INLINE_CODE_REGEX = /`[^`\n]*`/g; // `...`
+const ESCAPED_DOLLAR_REGEX = /\\\$/g;   // \$ inside LaTeX spans
+
+// LaTeX positive signals
+const RE_BACKSLASH_CMD = /\\[^\s]/;     // \command or \symbol (\frac, \%, \$, etc.)
+const RE_BRACE_GROUP = /[{}]/;          // brace groups
+const RE_SUB_SUPERSCRIPT = /[_^][\w{]/; // sub/superscript
+const RE_SINGLE_LETTER = /^[a-zA-Z]$/;  // single letter variable ($r$, $x$, $t$)
+const RE_VAR_ASSIGNMENT = /^[a-zA-Z]\s*=/; // variable assignment ($r = 0.235$, $n = 4$)
+
+// LaTeX negative signals
+const RE_LEADING_SPACE = /^\s/;         // space after opening $
+const RE_TRAILING_SPACE = /\s$/;        // space before closing $
+const RE_TRAILING_OPERATOR = /[+*/-]$/; // ends with bare operator
+const RE_ION_NOTATION = /\^[+-]$/;      // except ^+ or ^- (ion notation)
+
+/**
+ * Returns true if content between `$...$` contains LaTeX structural patterns.
+ */
+function hasLatexPattern(content: string): boolean {
+    return RE_BACKSLASH_CMD.test(content)
+        || RE_BRACE_GROUP.test(content)
+        || RE_SUB_SUPERSCRIPT.test(content)
+        || RE_SINGLE_LETTER.test(content)
+        || RE_VAR_ASSIGNMENT.test(content);
+}
+
+/**
+ * Returns true if content between `$...$` has structural tells of currency dollar signs.
+ */
+function hasCurrencyPattern(content: string): boolean {
+    if (RE_LEADING_SPACE.test(content)) return true;
+    if (RE_TRAILING_SPACE.test(content)) return true;
+    if (RE_TRAILING_OPERATOR.test(content) && !RE_ION_NOTATION.test(content)) return true;
+    return false;
+}
+
+/**
+ * Find all single-$ positions in text (skipping \$ and $$).
+ */
+function findSingleDollarPositions(text: string): number[] {
+    const positions: number[] = [];
+    for (let i = 0; i < text.length; i++) {
+        if (text[i] !== "$") continue;
+        if (i > 0 && text[i - 1] === "\\") continue;                         // skip \$
+        if (i + 1 < text.length && text[i + 1] === "$") { i++; continue; }   // skip $$ (first)
+        if (i > 0 && text[i - 1] === "$" && (i < 2 || text[i - 2] !== "\\")) continue; // skip $$ (second)
+        positions.push(i);
+    }
+    return positions;
+}
+
+/**
+ * Extract content between two $ positions. Returns null if the span is
+ * empty or crosses a line boundary (invalid for inline math).
+ */
+function inlineMathContent(text: string, openPos: number, closePos: number): string | null {
+    const content = text.slice(openPos + 1, closePos);
+    if (content.length === 0 || content.includes("\n")) return null;
+    return content;
+}
+
+/**
+ * Classify `$` positions in a text segment, escape currency dollar signs,
+ * and normalize `\$` inside LaTeX spans for remark-math compatibility.
+ */
+function processTextSegment(text: string): string {
+    const positions = findSingleDollarPositions(text);
+    if (positions.length < 2) return text;
+
+    const committed = new Set<number>();     // position indices that are paired
+    const toEscape = new Set<number>();      // character offsets in text to escape
+
+    // Pre-compute content for each adjacent pair (avoids redundant slicing in Pass 1 & 2)
+    const adjacentContent: (string | null)[] = new Array(positions.length - 1);
+    for (let i = 0; i < positions.length - 1; i++) {
+        adjacentContent[i] = inlineMathContent(text, positions[i], positions[i + 1]);
+    }
+
+    // Pass 1: commit definitely-LaTeX adjacent pairs and record their char boundaries
+    const latexSpans: [number, number][] = [];
+    for (let i = 0; i < positions.length - 1; i++) {
+        if (committed.has(i)) continue;
+        const content = adjacentContent[i];
+        if (content !== null && hasLatexPattern(content)) {
+            committed.add(i);
+            committed.add(i + 1);
+            latexSpans.push([positions[i], positions[i + 1]]);
+        }
+    }
+
+    // Pass 2: pair remaining positions left-to-right
+    let idx = 0;
+    while (idx < positions.length) {
+        if (committed.has(idx)) { idx++; continue; }
+
+        // Find next uncommitted position
+        let next = idx + 1;
+        while (next < positions.length && committed.has(next)) next++;
+        if (next >= positions.length) break;
+
+        // If committed positions sit between idx and next, remark-math would
+        // pair positions[idx] with the first committed $, breaking LaTeX.
+        if (next > idx + 1) {
+            toEscape.add(positions[idx]);
+            idx++;
+            continue;
+        }
+
+        // next === idx + 1, so we can reuse the pre-computed content
+        const content = adjacentContent[idx];
+        if (content === null) {
+            // Cross-line pair: remark-math processes per-paragraph, so these
+            // can't actually pair. Don't consume either position.
+            idx++;
+            continue;
+        }
+        if (hasCurrencyPattern(content)) {
+            toEscape.add(positions[idx]);
+            toEscape.add(positions[next]);
+        }
+        committed.add(idx);
+        committed.add(next);
+        idx = next + 1;
+    }
+
+    // Pass 3: escape lone $ adjacent to committed LaTeX pairs
+    for (let i = 0; i < positions.length; i++) {
+        if (committed.has(i)) continue;
+        if (i + 1 < positions.length && committed.has(i + 1)) {
+            toEscape.add(positions[i]);
+        }
+    }
+
+    if (toEscape.size === 0 && latexSpans.length === 0) return text;
+
+    // Build result: escape false-positive $ and replace \$ inside LaTeX spans
+    const parts: string[] = [];
+    let segStart = 0;
+    const escapePositions = Array.from(toEscape).sort((a, b) => a - b);
+    let escIdx = 0;
+    let spanIdx = 0;
+
+    while (escIdx < escapePositions.length || spanIdx < latexSpans.length) {
+        const escPos = escIdx < escapePositions.length ? escapePositions[escIdx] : Infinity;
+        const spanOpen = spanIdx < latexSpans.length ? latexSpans[spanIdx][0] : Infinity;
+
+        if (escPos < spanOpen) {
+            if (escPos > segStart) parts.push(text.slice(segStart, escPos));
+            parts.push("\\$");
+            segStart = escPos + 1;
+            escIdx++;
+        } else {
+            const [open, close] = latexSpans[spanIdx];
+            if (open > segStart) parts.push(text.slice(segStart, open));
+            const spanContent = text.slice(open, close + 1);
+            parts.push(spanContent.replace(ESCAPED_DOLLAR_REGEX, "\\text{\\textdollar}"));
+            segStart = close + 1;
+            while (escIdx < escapePositions.length && escapePositions[escIdx] <= close) escIdx++;
+            spanIdx++;
+        }
+    }
+
+    if (segStart < text.length) parts.push(text.slice(segStart));
+    return parts.join("");
+}
+
+/**
+ * Process text segments outside inline code spans.
+ */
+function processSkippingInlineCode(text: string): string {
+    const parts: string[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    INLINE_CODE_REGEX.lastIndex = 0;
+    while ((match = INLINE_CODE_REGEX.exec(text)) !== null) {
+        parts.push(processTextSegment(text.slice(lastIndex, match.index)));
+        parts.push(match[0]);
+        lastIndex = match.index + match[0].length;
+    }
+
+    parts.push(processTextSegment(text.slice(lastIndex)));
+    return parts.join("");
+}
+
+/**
+ * Preprocess markdown to disambiguate `$` math delimiters from currency signs.
+ *
+ * Classification priority: LaTeX (preserve) > currency (escape) > uncertain (preserve).
+ * Skips fenced code blocks and inline code spans.
+ */
+export function preprocessMathDelimiters(markdown: string): string {
+    if (!markdown || !markdown.includes("$")) {
+        return markdown;
+    }
+
+    const parts: string[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    FENCED_CODE_BLOCK_REGEX.lastIndex = 0;
+    while ((match = FENCED_CODE_BLOCK_REGEX.exec(markdown)) !== null) {
+        parts.push(processSkippingInlineCode(markdown.slice(lastIndex, match.index)));
+        parts.push(match[0]);
+        lastIndex = match.index + match[0].length;
+    }
+
+    parts.push(processSkippingInlineCode(markdown.slice(lastIndex)));
+    return parts.join("");
+}

package/src/widgets/monacoEditor/MonacoEditor.tsx

@@ -4,6 +4,7 @@ import debounce from 'debounce';
 import clsx from 'clsx';
 import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type * as monaco from 'monaco-editor';
+import { registerCustomFoldingProviders } from './foldingProviders.js';
 
 export type Monaco = typeof monaco;
 
@@ -47,6 +48,7 @@ interface MonacoEditorProps {
     beforeMount?: (monaco: typeof import('monaco-editor')) => void;
     onMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) => void;
     defaultValue?: string;
+    useCustomFolding?: boolean;
 }
 
 export function MonacoEditor({
@@ -60,10 +62,15 @@ export function MonacoEditor({
     beforeMount,
     onMount,
     defaultValue,
+    useCustomFolding = false,
 }: MonacoEditorProps) {
     const [editorValue, setEditorValue] = useState(value || defaultValue || '');
     const editorInstanceRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+    const monacoInstanceRef = useRef<typeof import('monaco-editor') | null>(null);
     const { theme } = useTheme();
+    const resolvedTheme = theme === 'system'
+        ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+        : theme;
 
     const getValueRef = useRef(() => editorValue);
     const setValueRef = useRef((newValue: string) => {
@@ -101,6 +108,22 @@ export function MonacoEditor({
         }
     }, [onChange, debounceTimeout]);
 
+    const foldAllCodeBlocks = useCallback(async (
+        editor: monaco.editor.IStandaloneCodeEditor,
+        monacoInstance: typeof import('monaco-editor'),
+    ) => {
+        const model = editor.getModel();
+        if (!model) return;
+        const codeBlockRegExp = /```[\s\S]*?```/g;
+        let match;
+        while ((match = codeBlockRegExp.exec(model.getValue())) !== null) {
+            const startLine = model.getPositionAt(match.index).lineNumber;
+            const endLine = model.getPositionAt(match.index + match[0].length).lineNumber;
+            editor.setSelection(new monacoInstance.Selection(startLine, 1, endLine, 1));
+            await editor.getAction('editor.createFoldingRangeFromSelection')?.run();
+        }
+    }, []);
+
     const handleEditorChange = useCallback((newValue: string | undefined) => {
         const actualValue = newValue || '';
         setEditorValue(actualValue);
@@ -123,6 +146,12 @@ export function MonacoEditor({
 
     const handleEditorDidMount = useCallback((editor: monaco.editor.IStandaloneCodeEditor, monacoInstance: typeof import('monaco-editor')) => {
         editorInstanceRef.current = editor;
+        monacoInstanceRef.current = monacoInstance;
+
+        if (useCustomFolding) {
+            registerCustomFoldingProviders(monacoInstance);
+        }
+
         // Update the setValue ref to use the actual editor instance
         setValueRef.current = (newValue: string) => {
             setEditorValue(newValue);
@@ -131,7 +160,7 @@ export function MonacoEditor({
 
         // Set up custom theme for better error line highlighting
         monacoInstance.editor.defineTheme('errorLineTheme', {
-            base: theme === 'dark' ? 'vs-dark' : 'vs',
+            base: resolvedTheme === 'dark' ? 'vs-dark' : 'vs',
             inherit: true,
             rules: [],
             colors: {
@@ -142,9 +171,13 @@ export function MonacoEditor({
 
         monacoInstance.editor.setTheme('errorLineTheme');
 
+        if (useCustomFolding) {
+            setTimeout(() => foldAllCodeBlocks(editor, monacoInstance), 300);
+        }
+
         // Call custom onMount if provided
         onMount?.(editor, monacoInstance);
-    }, [onMount, theme]);
+    }, [onMount, resolvedTheme, useCustomFolding, foldAllCodeBlocks]);
 
     // Update editor value when prop changes from outside
     useEffect(() => {
@@ -157,6 +190,15 @@ export function MonacoEditor({
         }
     }, [value]); // Only depend on value prop, not editorValue
 
+    // Re-fold code blocks when value prop changes externally
+    useEffect(() => {
+        if (!useCustomFolding || !editorInstanceRef.current || !monacoInstanceRef.current) return;
+        const editor = editorInstanceRef.current;
+        const monacoInstance = monacoInstanceRef.current;
+        const timer = setTimeout(() => foldAllCodeBlocks(editor, monacoInstance), 300);
+        return () => clearTimeout(timer);
+    }, [value, useCustomFolding, foldAllCodeBlocks]);
+
     const defaultOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
         fontSize: 14,
         fontFamily: 'monospace',
@@ -164,7 +206,7 @@ export function MonacoEditor({
         scrollBeyondLastLine: false,
         wordWrap: 'on' as const,
         lineNumbers: 'on' as const,
-        folding: false,
+        folding: true,
         lineDecorationsWidth: 10,
         lineNumbersMinChars: 3,
         automaticLayout: true,
@@ -172,6 +214,7 @@ export function MonacoEditor({
         formatOnType: true,
         tabSize: 2,
         insertSpaces: true,
+        fixedOverflowWidgets: true, // Hover/diagnostic popovers float outside the editor bounds
         glyphMargin: true, // Enable better error reporting
         renderValidationDecorations: 'on', // Show error squiggles
         renderLineHighlight: 'line', // Highlight entire line for errors
@@ -192,7 +235,7 @@ export function MonacoEditor({
             <Editor
                 className="h-full w-full"
                 height="100%"
-                theme={theme === 'dark' ? 'vs-dark' : 'light'}
+                theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
                 language={language}
                 value={editorValue}
                 onChange={handleEditorChange}

package/src/widgets/monacoEditor/foldingProviders.ts

@@ -0,0 +1,122 @@
+import type * as monaco from 'monaco-editor';
+
+const foldingProvidersRegistered = new Set<string>();
+
+export function registerCustomFoldingProviders(monacoInstance: typeof import('monaco-editor')): void {
+    // Markdown: fold by heading hierarchy (## sections)
+    if (!foldingProvidersRegistered.has('markdown')) {
+        foldingProvidersRegistered.add('markdown');
+        monacoInstance.languages.registerFoldingRangeProvider('markdown', {
+            provideFoldingRanges(model) {
+                const ranges: monaco.languages.FoldingRange[] = [];
+                const lines = model.getLinesContent();
+                const headingPattern = /^(#{1,6})\s/;
+                const stack: Array<{ level: number; line: number }> = [];
+
+                for (let i = 0; i < lines.length; i++) {
+                    const lineNumber = i + 1;
+                    const match = headingPattern.exec(lines[i]);
+                    if (match) {
+                        const level = match[1].length;
+                        while (stack.length > 0 && stack[stack.length - 1].level >= level) {
+                            const top = stack.pop()!;
+                            if (lineNumber - 1 > top.line) {
+                                ranges.push({ start: top.line, end: lineNumber - 1 });
+                            }
+                        }
+                        stack.push({ level, line: lineNumber });
+                    }
+                }
+                const lastLine = lines.length;
+                while (stack.length > 0) {
+                    const top = stack.pop()!;
+                    if (lastLine > top.line) {
+                        ranges.push({ start: top.line, end: lastLine });
+                    }
+                }
+                return ranges;
+            },
+        });
+    }
+
+    // JS/TS: brace folding (if/else, functions) takes priority, followed by
+    // markdown heading folding inside template literals. Brace ranges are
+    // returned first so Monaco resolves conflicts in their favour.
+    // Using registerFoldingRangeProvider (not createFoldingRangeFromSelection)
+    // so both live in the same range set and Monaco's overlap resolution is
+    // consistent — headings are always bounded by their template literal close.
+    for (const lang of ['javascript', 'typescript'] as const) {
+        if (!foldingProvidersRegistered.has(lang)) {
+            foldingProvidersRegistered.add(lang);
+            monacoInstance.languages.registerFoldingRangeProvider(lang, {
+                provideFoldingRanges(model) {
+                    const lines = model.getLinesContent();
+                    const headingPattern = /^(#{1,6})\s/;
+
+                    const braceRanges: monaco.languages.FoldingRange[] = [];
+                    const headingRanges: monaco.languages.FoldingRange[] = [];
+
+                    const braceStack: number[] = [];
+                    const headingStack: Array<{ level: number; line: number }> = [];
+
+                    let inTemplate = false;
+                    let inString = false;
+                    let stringChar = '';
+
+                    for (let i = 0; i < lines.length; i++) {
+                        const lineNumber = i + 1;
+                        const line = lines[i];
+                        const lineStartedInTemplate = inTemplate;
+
+                        for (let j = 0; j < line.length; j++) {
+                            const ch = line[j];
+                            if (ch === '\\') { j++; continue; }
+                            if (inString) { if (ch === stringChar) inString = false; continue; }
+                            if (inTemplate) { if (ch === '`') inTemplate = false; continue; }
+                            if (ch === '`') { inTemplate = true; continue; }
+                            if (ch === '"' || ch === "'") { inString = true; stringChar = ch; continue; }
+                            // Brace folding — only outside strings/templates
+                            if (ch === '{') { braceStack.push(lineNumber); }
+                            if (ch === '}' && braceStack.length > 0) {
+                                const start = braceStack.pop()!;
+                                // If there is non-whitespace content after `}` on this line
+                                // (e.g. "} else {"), end the fold at the previous line so
+                                // the continuation is not hidden inside the fold.
+                                const restOfLine = line.slice(j + 1).trimStart();
+                                const endLine = restOfLine.length > 0 ? lineNumber - 1 : lineNumber;
+                                if (endLine > start) braceRanges.push({ start, end: endLine });
+                            }
+                        }
+
+                        // Markdown heading folding — only inside template literals
+                        if (lineStartedInTemplate) {
+                            const match = headingPattern.exec(line);
+                            if (match) {
+                                const level = match[1].length;
+                                while (headingStack.length > 0 && headingStack[headingStack.length - 1].level >= level) {
+                                    const top = headingStack.pop()!;
+                                    if (lineNumber - 1 > top.line) {
+                                        headingRanges.push({ start: top.line, end: lineNumber - 1 });
+                                    }
+                                }
+                                headingStack.push({ level, line: lineNumber });
+                            }
+                            // Template just closed — seal all open heading sections here
+                            if (!inTemplate) {
+                                while (headingStack.length > 0) {
+                                    const top = headingStack.pop()!;
+                                    if (lineNumber > top.line) {
+                                        headingRanges.push({ start: top.line, end: lineNumber });
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    // Brace ranges first → Monaco resolves conflicts in their favour
+                    return [...braceRanges, ...headingRanges];
+                },
+            });
+        }
+    }
+}