@simon_he/vue-tui 1.1.2 → 1.1.4

package/dist/{block-source-CrlmaBM5.js → block-source-D3YGTErb.js}

@@ -1,11 +1,11 @@
-import { hasEncodedControl, sanitizeDomHref } from "./hyperlink-_1FAj7Wq.js";
-import { EventZIndexContextKey, currentTextWidthProvider, forEachTextCellSegment, intersectRect, normalizeCellRect, repeatChar, sanitizeInlineText, sanitizeTextBlock, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility, withTextWidthProvider } from "./rect-DUpeDfBg.js";
+import { hasEncodedControl, sanitizeDomHref } from "./hyperlink-clbb_ha_.js";
+import { EventZIndexContextKey, currentTextWidthProvider, forEachTextCellSegment, intersectRect, normalizeCellRect, repeatChar, sanitizeInlineText, sanitizeTextBlock, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility, withTextWidthProvider } from "./rect-JzWMJxxc.js";
 import { terminalSelectionRowSpans, terminalSelectionVisibleRowSpans } from "./terminal-selection-4W1SJj4c.js";
 import { createDebugLogger, isDebugEnabled } from "./debug-logger-CmsGI4of.js";
 import { applyWheelScroll, createWheelScrollState, resetWheelScrollState } from "./wheel-scroll-DASkEZr-.js";
-import { createIterm2InlineImageSequence, createKittyDeleteGraphicsSequence, createKittyGraphicsSequence, createKittyPlacementSequence, getTerminalGraphicsOutput, getTerminalGraphicsOutputVersion, isTerminalGraphicsProtocol, stableTerminalGraphicNumericId, subscribeTerminalGraphicsOutput } from "./terminal-graphics-Bbe83wSr.js";
+import { createIterm2InlineImageSequence, createKittyDeleteGraphicsSequence, createKittyGraphicsSequence, createKittyPlacementSequence, getTerminalGraphicsOutput, getTerminalGraphicsOutputVersion, isTerminalGraphicsProtocol, stableTerminalGraphicNumericId, subscribeTerminalGraphicsOutput } from "./terminal-graphics-DWZrl3oh.js";
+import { enqueueMarkdownMathImages, getCachedMarkdownMathImage, isMarkdownMathImageRendererReady, loadMarkdownMathImageRenderer, resolveMarkdownMathColor, subscribeMarkdownMathImage } from "./math-image-BZhmfUeu.js";
 import { computed, defineComponent, getCurrentInstance, h, inject, markRaw, onBeforeUnmount, ref, shallowRef, watch, watchEffect } from "vue";
-import katex from "katex";
 import { getMarkdown, parseMarkdownToStructure } from "stream-markdown-parser";
 
 //#region src/vue/markdown/image.ts
@@ -114,182 +114,6 @@ function readMarkdownImageDimensions(base64) {
 	return null;
 }
 
-//#endregion
-//#region src/vue/markdown/math.ts
-const KATEX_TEXT_OPTIONS = Object.freeze({
-	output: "mathml",
-	throwOnError: false,
-	strict: "ignore",
-	trust: false,
-	maxSize: 20,
-	maxExpand: 200
-});
-const KATEX_VALIDATE_OPTIONS = Object.freeze({
-	...KATEX_TEXT_OPTIONS,
-	throwOnError: true
-});
-const TEX_SYMBOLS = Object.freeze({
-	alpha: "α",
-	beta: "β",
-	gamma: "γ",
-	delta: "δ",
-	epsilon: "ε",
-	theta: "θ",
-	lambda: "λ",
-	mu: "μ",
-	pi: "π",
-	rho: "ρ",
-	sigma: "σ",
-	tau: "τ",
-	phi: "φ",
-	omega: "ω",
-	Gamma: "Γ",
-	Delta: "Δ",
-	Theta: "Θ",
-	Lambda: "Λ",
-	Pi: "Π",
-	Sigma: "Σ",
-	Phi: "Φ",
-	Omega: "Ω",
-	int: "∫",
-	sum: "∑",
-	prod: "∏",
-	infty: "∞",
-	infinity: "∞",
-	pm: "±",
-	times: "×",
-	cdot: "·",
-	div: "÷",
-	le: "≤",
-	leq: "≤",
-	ge: "≥",
-	geq: "≥",
-	neq: "≠",
-	ne: "≠",
-	approx: "≈",
-	equiv: "≡",
-	to: "→",
-	rightarrow: "→",
-	leftarrow: "←",
-	leftrightarrow: "↔",
-	partial: "∂",
-	nabla: "∇",
-	sqrt: "√"
-});
-const SUPPORTED_COMMANDS = new Set([
-	...Object.keys(TEX_SYMBOLS),
-	"frac",
-	"sqrt"
-]);
-function decodeXmlEntities(value) {
-	return value.replace(/&(?:#(\d+)|#x([0-9a-f]+)|([a-z]+));/gi, (match, dec, hex, named) => {
-		if (dec) return String.fromCodePoint(Number(dec));
-		if (hex) return String.fromCodePoint(Number.parseInt(hex, 16));
-		switch (String(named).toLowerCase()) {
-			case "amp": return "&";
-			case "lt": return "<";
-			case "gt": return ">";
-			case "quot": return "\"";
-			case "apos": return "'";
-			default: return match;
-		}
-	});
-}
-function mathmlTagName(tag) {
-	const start = tag.startsWith("/") ? 1 : 0;
-	let end = start;
-	while (end < tag.length) {
-		const ch = tag[end];
-		if (ch === " " || ch === "	" || ch === "\n" || ch === "\r" || ch === "/") break;
-		end++;
-	}
-	return tag.slice(start, end).toLowerCase();
-}
-function textFromKatexMathml(html) {
-	let readable = "";
-	let offset = 0;
-	const lowerHtml = html.toLowerCase();
-	while (offset < html.length) {
-		const tagStart = html.indexOf("<", offset);
-		if (tagStart < 0) {
-			readable += html.slice(offset);
-			break;
-		}
-		readable += html.slice(offset, tagStart);
-		const tagEnd = html.indexOf(">", tagStart + 1);
-		if (tagEnd < 0) break;
-		const tag = html.slice(tagStart + 1, tagEnd).trim();
-		const tagName = mathmlTagName(tag);
-		const closing = tag.startsWith("/");
-		if (!closing && tagName === "annotation") {
-			const annotationEnd = lowerHtml.indexOf("</annotation>", tagEnd + 1);
-			offset = annotationEnd < 0 ? tagEnd + 1 : annotationEnd + 13;
-			continue;
-		}
-		if (!closing && tagName === "mfrac") readable += "(";
-		else if (closing && tagName === "mfrac") readable += ")";
-		else if (!closing && tagName === "mspace") readable += " ";
-		offset = tagEnd + 1;
-	}
-	const text = sanitizeInlineText(decodeXmlEntities(readable).replace(/[<>]/g, "").replace(/\s+/g, " ").trim());
-	return text;
-}
-function approximateTexToUnicode(tex) {
-	let out = String(tex ?? "");
-	out = out.replace(/\\frac\s*\{([^{}]*)\}\s*\{([^{}]*)\}/g, "$1/$2");
-	out = out.replace(/\\sqrt\s*\{([^{}]*)\}/g, "√($1)");
-	out = out.replace(/\\([A-Za-z]+)\b/g, (_match, command) => TEX_SYMBOLS[command] ?? command);
-	out = out.replace(/\\([^A-Za-z])/g, "$1");
-	out = out.replace(/[{}]/g, "");
-	out = out.replace(/\s+/g, " ").trim();
-	return sanitizeInlineText(out.replace(/[<>]/g, ""));
-}
-function canRenderTerminalMath(tex) {
-	const source = String(tex ?? "").trim();
-	if (!source || source.length > 160) return false;
-	if (/\\(?:begin|end|left|right|matrix|cases|array|align|color|href|html|includegraphics|class|style|tag|text|operatorname)\b/.test(source)) return false;
-	const commands = source.matchAll(/\\([A-Za-z]+)\b/g);
-	for (const match of commands) if (!SUPPORTED_COMMANDS.has(match[1] ?? "")) return false;
-	try {
-		katex.renderToString(source, KATEX_VALIDATE_OPTIONS);
-	} catch {
-		return false;
-	}
-	return true;
-}
-function renderMarkdownInlineMathSegment(tex) {
-	const source = String(tex ?? "");
-	if (!source.trim()) return {
-		text: "",
-		supported: false
-	};
-	if (!canRenderTerminalMath(source)) return {
-		text: "",
-		supported: false
-	};
-	try {
-		const html = katex.renderToString(source, KATEX_TEXT_OPTIONS);
-		const rendered = /\\frac\b/.test(source) ? approximateTexToUnicode(source) : textFromKatexMathml(html);
-		if (rendered && !rendered.includes("\\")) return {
-			text: rendered,
-			supported: true
-		};
-	} catch {
-		return {
-			text: "",
-			supported: false
-		};
-	}
-	const approximate = approximateTexToUnicode(source);
-	return approximate && !approximate.includes("\\") ? {
-		text: approximate,
-		supported: true
-	} : {
-		text: "",
-		supported: false
-	};
-}
-
 //#endregion
 //#region src/vue/markdown/parser.ts
 const markdownInstanceCache = new Map();
@@ -370,6 +194,15 @@ function stringProp(node, key) {
 	const value = node[key];
 	return typeof value === "string" ? value : "";
 }
+/**
+* Temporary fallback: stream-markdown-parser only recovers `![alt](file:///X:/...)`
+* destinations (Windows drive letters, fixed in 1.1.8). Unix-style `file:///...`
+* destinations at inline start are still emitted as `text("!") + link`. Remove this
+* once the parser covers all `file://` destinations.
+*/
+function isUnixFileUrlNeedingImageFallback(href) {
+	return /^file:\/\//i.test(href) && !/^file:\/\/\/[a-z]:\//i.test(href);
+}
 function imageSourceFromRaw(raw) {
 	if (!raw.startsWith("![")) return "";
 	const marker = raw.indexOf("](");
@@ -466,132 +299,172 @@ function codeBlockLanguage(node) {
 }
 function inlineNodeSegments(nodes, theme, inheritedStyle, options = {}) {
 	const out = [];
-	for (const node of nodes) switch (node.type) {
-		case "text":
-			pushTextSegments(out, stringProp(node, "content"), inheritedStyle);
-			break;
-		case "inline":
-		case "paragraph":
-		case "heading":
-		case "list_item":
-		case "blockquote":
-			out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle, options));
-			break;
-		case "strong":
-			out.push(...inlineNodeSegments(nodeChildren(node), theme, mergeStyle$1(inheritedStyle, theme.strong), options));
-			break;
-		case "emphasis":
-			out.push(...inlineNodeSegments(nodeChildren(node), theme, mergeStyle$1(inheritedStyle, theme.emphasis), options));
-			break;
-		case "strikethrough":
-			out.push(...inlineNodeSegments(nodeChildren(node), theme, mergeStyle$1(inheritedStyle, theme.strikethrough), options));
-			break;
-		case "highlight":
-		case "insert":
-		case "subscript":
-		case "superscript":
-			out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle, options));
-			break;
-		case "inline_code":
-			pushTextSegments(out, stringProp(node, "code"), mergeStyle$1(inheritedStyle, theme.inlineCode));
-			break;
-		case "hardbreak":
-			out.push(HARD_BREAK_SEGMENT);
-			break;
-		case "link": {
-			const href = stringProp(node, "href");
-			const safeHref = href ? sanitizeMarkdownLink(href) : null;
-			const linkStyle = safeHref ? mergeStyle$1(inheritedStyle, {
-				...theme.link,
-				href: safeHref
-			}) : inheritedStyle;
-			const children = nodeChildren(node);
-			if (children.length) out.push(...inlineNodeSegments(children, theme, linkStyle, options));
-			else pushTextSegments(out, stringProp(node, "text"), linkStyle);
-			break;
+	for (let index = 0; index < nodes.length; index++) {
+		let node = nodes[index];
+		const next = nodes[index + 1];
+		const text = node.type === "text" ? stringProp(node, "content") : "";
+		if (node.type === "text" && text.endsWith("!") && stringProp(node, "raw").endsWith("!") && next?.type === "link" && isUnixFileUrlNeedingImageFallback(stringProp(next, "href"))) {
+			const src = stringProp(next, "href");
+			if (sanitizeMarkdownImageSource(src)) {
+				pushTextSegments(out, text.slice(0, -1), inheritedStyle);
+				node = {
+					type: "image",
+					src,
+					alt: stringProp(next, "text"),
+					raw: `!${stringProp(next, "raw")}`
+				};
+				index++;
+			}
 		}
-		case "image": {
-			const raw = stringProp(node, "raw");
-			const rawSource = stringProp(node, "src") || imageSourceFromRaw(raw);
-			const source = sanitizeMarkdownImageSource(rawSource);
-			const alt = stringProp(node, "alt") || imageFallbackText(raw, rawSource, source?.src);
-			if (source) {
-				const size = options.imageSize;
-				const imageLinkStyle = mergeStyle$1(inheritedStyle, {
+		switch (node.type) {
+			case "text":
+				pushTextSegments(out, stringProp(node, "content"), inheritedStyle);
+				break;
+			case "inline":
+			case "paragraph":
+			case "heading":
+			case "list_item":
+			case "blockquote":
+				out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle, options));
+				break;
+			case "strong":
+				out.push(...inlineNodeSegments(nodeChildren(node), theme, mergeStyle$1(inheritedStyle, theme.strong), options));
+				break;
+			case "emphasis":
+				out.push(...inlineNodeSegments(nodeChildren(node), theme, mergeStyle$1(inheritedStyle, theme.emphasis), options));
+				break;
+			case "strikethrough":
+				out.push(...inlineNodeSegments(nodeChildren(node), theme, mergeStyle$1(inheritedStyle, theme.strikethrough), options));
+				break;
+			case "highlight":
+			case "insert":
+			case "subscript":
+			case "superscript":
+				out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle, options));
+				break;
+			case "inline_code":
+				pushTextSegments(out, stringProp(node, "code"), mergeStyle$1(inheritedStyle, theme.inlineCode));
+				break;
+			case "hardbreak":
+				out.push(HARD_BREAK_SEGMENT);
+				break;
+			case "link": {
+				const href = stringProp(node, "href");
+				const safeHref = href ? sanitizeMarkdownLink(href) : null;
+				const linkStyle = safeHref ? mergeStyle$1(inheritedStyle, {
 					...theme.link,
-					href: source.src
-				});
-				const sourceDimensions = readMarkdownImageDimensions(source.base64);
-				const graphicBase = {
-					kind: "image",
-					src: source.src,
-					alt,
-					...source.mime ? { mime: source.mime } : {},
-					...source.base64 ? { base64: source.base64 } : {},
-					...sourceDimensions ? {
-						naturalWidth: sourceDimensions.width,
-						naturalHeight: sourceDimensions.height
-					} : {},
-					...resolveImageDisplaySize(alt, size, sourceDimensions?.width, sourceDimensions?.height)
-				};
-				const resolved = normalizeImageResolverResult(options.imageResolver?.(graphicBase));
-				const base64 = resolved.base64 || source.base64;
-				if (base64) {
-					const dimensions = readMarkdownImageDimensions(base64) ?? sourceDimensions;
-					const graphic = {
-						...graphicBase,
-						base64,
-						...resolved.originalBase64 ? { originalBase64: resolved.originalBase64 } : {},
-						...resolved.mime ? { mime: resolved.mime } : {},
-						...resolved.originalMime ? { originalMime: resolved.originalMime } : {},
-						...dimensions ? {
-							naturalWidth: dimensions.width,
-							naturalHeight: dimensions.height
+					href: safeHref
+				}) : inheritedStyle;
+				const children = nodeChildren(node);
+				if (children.length) out.push(...inlineNodeSegments(children, theme, linkStyle, options));
+				else pushTextSegments(out, stringProp(node, "text"), linkStyle);
+				break;
+			}
+			case "image": {
+				const raw = stringProp(node, "raw");
+				const rawSource = stringProp(node, "src") || imageSourceFromRaw(raw);
+				const source = sanitizeMarkdownImageSource(rawSource);
+				const alt = stringProp(node, "alt") || imageFallbackText(raw, rawSource, source?.src);
+				if (source) {
+					const size = options.imageSize;
+					const imageLinkStyle = mergeStyle$1(inheritedStyle, {
+						...theme.link,
+						href: source.src
+					});
+					const sourceDimensions = readMarkdownImageDimensions(source.base64);
+					const graphicBase = {
+						kind: "image",
+						src: source.src,
+						alt,
+						...source.mime ? { mime: source.mime } : {},
+						...source.base64 ? { base64: source.base64 } : {},
+						...sourceDimensions ? {
+							naturalWidth: sourceDimensions.width,
+							naturalHeight: sourceDimensions.height
 						} : {},
-						...resolveImageDisplaySize(alt, size, dimensions?.width, dimensions?.height)
+						...resolveImageDisplaySize(alt, size, sourceDimensions?.width, sourceDimensions?.height)
 					};
-					pushTextSegments(out, alt, imageLinkStyle, graphic);
-				} else pushTextSegments(out, alt, imageLinkStyle);
-			} else pushTextSegments(out, alt, mergeStyle$1(inheritedStyle, theme.link));
-			break;
-		}
-		case "checkbox":
-		case "checkbox_input":
-			pushTextSegments(out, booleanProp(node, "checked") ? "[x]" : "[ ]", inheritedStyle);
-			break;
-		case "emoji":
-			pushTextSegments(out, stringProp(node, "markup") || stringProp(node, "name"), inheritedStyle);
-			break;
-		case "math_inline":
-			{
-				const source = stringProp(node, "content");
-				const raw = stringProp(node, "raw") || `$${source}$`;
-				const rendered = renderMarkdownInlineMathSegment(source);
-				pushTextSegments(out, rendered.supported ? rendered.text : raw, mergeStyle$1(inheritedStyle, theme.inlineCode), void 0, {
-					source,
-					raw,
-					rendered: rendered.supported
-				});
-			}
-			break;
-		case "reference":
-		case "footnote_reference":
-		case "footnote_anchor":
-			pushTextSegments(out, stringProp(node, "raw"), inheritedStyle);
-			break;
-		case "html_inline":
-			pushTextSegments(out, stringProp(node, "content"), mergeStyle$1(inheritedStyle, theme.html));
-			break;
-		case "html_block":
-			pushTextSegments(out, stringProp(node, "content"), mergeStyle$1(inheritedStyle, theme.html));
-			break;
-		default:
-			if (nodeChildren(node).length) {
-				out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle, options));
+					const resolved = normalizeImageResolverResult(options.imageResolver?.(graphicBase));
+					const base64 = resolved.base64 || source.base64;
+					if (base64) {
+						const dimensions = readMarkdownImageDimensions(base64) ?? sourceDimensions;
+						const graphic = {
+							...graphicBase,
+							base64,
+							...resolved.originalBase64 ? { originalBase64: resolved.originalBase64 } : {},
+							...resolved.mime ? { mime: resolved.mime } : {},
+							...resolved.originalMime ? { originalMime: resolved.originalMime } : {},
+							...dimensions ? {
+								naturalWidth: dimensions.width,
+								naturalHeight: dimensions.height
+							} : {},
+							...resolveImageDisplaySize(alt, size, dimensions?.width, dimensions?.height)
+						};
+						pushTextSegments(out, alt, imageLinkStyle, graphic);
+					} else pushTextSegments(out, alt, imageLinkStyle);
+				} else pushTextSegments(out, alt, mergeStyle$1(inheritedStyle, theme.link));
 				break;
 			}
-			pushTextSegments(out, stringProp(node, "raw"), inheritedStyle);
-			break;
+			case "checkbox":
+			case "checkbox_input":
+				pushTextSegments(out, booleanProp(node, "checked") ? "[x]" : "[ ]", inheritedStyle);
+				break;
+			case "emoji":
+				pushTextSegments(out, stringProp(node, "markup") || stringProp(node, "name"), inheritedStyle);
+				break;
+			case "math_inline":
+				{
+					const source = stringProp(node, "content");
+					const markup = stringProp(node, "markup") || "$";
+					const raw = stringProp(node, "raw") || `${markup}${source}${markup}`;
+					const mathStyle = mergeStyle$1(inheritedStyle, theme.inlineCode);
+					const tex = sanitizeInlineText(source);
+					const mathEnabled = options.math?.enabled !== false;
+					const cached = tex && mathEnabled ? getCachedMarkdownMathImage(tex, "inline", options.math) : null;
+					if (cached) pushTextSegments(out, raw, mathStyle, {
+						kind: "math",
+						tex,
+						raw,
+						base64: cached.base64,
+						displayWidth: cached.widthCells,
+						displayHeight: cached.heightCells
+					}, {
+						source: tex,
+						raw,
+						rendered: true
+					});
+					else pushTextSegments(out, raw, mathStyle, void 0, tex && mathEnabled ? {
+						source: tex,
+						raw,
+						rendered: false,
+						pendingImage: true,
+						mode: "inline"
+					} : {
+						source,
+						raw,
+						rendered: false
+					});
+				}
+				break;
+			case "reference":
+			case "footnote_reference":
+			case "footnote_anchor":
+				pushTextSegments(out, stringProp(node, "raw"), inheritedStyle);
+				break;
+			case "html_inline":
+				pushTextSegments(out, stringProp(node, "content"), mergeStyle$1(inheritedStyle, theme.html));
+				break;
+			case "html_block":
+				pushTextSegments(out, stringProp(node, "content"), mergeStyle$1(inheritedStyle, theme.html));
+				break;
+			default:
+				if (nodeChildren(node).length) {
+					out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle, options));
+					break;
+				}
+				pushTextSegments(out, stringProp(node, "raw"), inheritedStyle);
+				break;
+		}
 	}
 	return out;
 }
@@ -607,14 +480,16 @@ function inlineBlock(key, segments, context) {
 function blockFromParagraph(node, key, context, theme) {
 	return inlineBlock(key, inlineNodeSegments(nodeChildren(node), theme, void 0, {
 		imageResolver: context.imageResolver,
-		imageSize: context.imageSize
+		imageSize: context.imageSize,
+		math: context.math
 	}), context);
 }
 function blockFromHeading(node, key, context, theme) {
 	const level = Math.min(6, Math.max(1, Math.floor(numberProp(node, "level") ?? 1)));
 	return inlineBlock(key, inlineNodeSegments(nodeChildren(node), theme, theme.heading[level - 1], {
 		imageResolver: context.imageResolver,
-		imageSize: context.imageSize
+		imageSize: context.imageSize,
+		math: context.math
 	}), context);
 }
 function blockFromCodeBlock(node, key, context, theme) {
@@ -633,7 +508,10 @@ function blockFromHtmlBlock(node, key, context, theme) {
 		type: "html_block",
 		raw: stringProp(node, "raw"),
 		content: stringProp(node, "content")
-	}], theme, void 0, { imageResolver: context.imageResolver }), context);
+	}], theme, void 0, {
+		imageResolver: context.imageResolver,
+		math: context.math
+	}), context);
 }
 function tableRows$1(node, key) {
 	const value = node[key];
@@ -653,14 +531,16 @@ function blockFromTable(node, key, context, theme) {
 	const header = tableCells(headerRow ?? { type: "table_row" }).map((cell) => ({
 		segments: inlineNodeSegments(nodeChildren(cell), theme, theme.strong, {
 			imageResolver: context.imageResolver,
-			imageSize: context.imageSize
+			imageSize: context.imageSize,
+			math: context.math
 		}),
 		align: tableCellAlign(cell)
 	}));
 	const rows = tableRows$1(node, "rows").map((row) => tableCells(row).map((cell) => ({
 		segments: inlineNodeSegments(nodeChildren(cell), theme, void 0, {
 			imageResolver: context.imageResolver,
-			imageSize: context.imageSize
+			imageSize: context.imageSize,
+			math: context.math
 		}),
 		align: tableCellAlign(cell)
 	})));
@@ -698,11 +578,13 @@ function listItemBlocks(item, index, ordered, start, context, theme, keyPrefix)
 	const indentSegment = { text: spaces(markerCells) };
 	const firstContext = {
 		prefixSegments: [...context.prefixSegments, markerSegment],
-		continuationPrefixSegments: [...context.continuationPrefixSegments, indentSegment]
+		continuationPrefixSegments: [...context.continuationPrefixSegments, indentSegment],
+		math: context.math
 	};
 	const nestedContext = {
 		prefixSegments: [...context.continuationPrefixSegments, indentSegment],
-		continuationPrefixSegments: [...context.continuationPrefixSegments, indentSegment]
+		continuationPrefixSegments: [...context.continuationPrefixSegments, indentSegment],
+		math: context.math
 	};
 	const children = nodeChildren(item);
 	if (!children.length) return [inlineBlock(`${keyPrefix}-empty`, [], firstContext)];
@@ -734,6 +616,61 @@ function listBlocks(node, context, theme, keyPrefix) {
 	for (let i = 0; i < items.length; i++) out.push(...listItemBlocks(items[i], i, booleanProp(node, "ordered"), numberProp(node, "start") ?? 1, context, theme, `${keyPrefix}-${i}`));
 	return out;
 }
+/**
+* Block-level display math (`$...$`). When a rasterized PNG is available this
+* becomes a graphic segment rendered through the terminal graphics pipeline
+* (Kitty/iTerm2/Sixel); otherwise it is wrapped in a box with the raw TeX text
+* (also the permanent presentation when graphics/raster support is missing).
+* Clicking either form emits `mathAction` so consumers can copy the raw content.
+*/
+function blockMathSegments(source, raw, math, theme) {
+	const tex = sanitizeInlineText(source);
+	const canUseImage = Boolean(tex) && math.enabled !== false;
+	const cached = canUseImage ? getCachedMarkdownMathImage(tex, "display", math) : null;
+	if (canUseImage && cached) return [{
+		text: raw,
+		style: theme.math,
+		graphic: {
+			kind: "math",
+			tex,
+			raw,
+			base64: cached.base64,
+			displayWidth: cached.widthCells,
+			displayHeight: cached.heightCells
+		},
+		mathAction: {
+			source: tex,
+			raw,
+			rendered: true
+		}
+	}];
+	const maxWidth = Math.max(8, Math.floor(math.maxWidthCells ?? 0) || 40);
+	const rawCells = textCellWidth(raw);
+	const inner = Math.min(Math.max(1, rawCells + 2), maxWidth);
+	const pad = Math.max(0, inner - rawCells);
+	return [
+		{
+			text: `┌${"─".repeat(inner)}┐`,
+			style: theme.math
+		},
+		HARD_BREAK_SEGMENT,
+		{
+			text: `│ ${raw}${" ".repeat(pad)}│`,
+			style: theme.math,
+			mathAction: {
+				source: tex,
+				raw,
+				rendered: false,
+				pendingImage: true
+			}
+		},
+		HARD_BREAK_SEGMENT,
+		{
+			text: `└${"─".repeat(inner)}┘`,
+			style: theme.math
+		}
+	];
+}
 function nodeToBlocks(node, context, theme, keyPrefix) {
 	switch (node.type) {
 		case "paragraph":
@@ -752,6 +689,7 @@ function nodeToBlocks(node, context, theme, keyPrefix) {
 			style: theme.thematicBreak,
 			prefixSegments: context.prefixSegments
 		}];
+		case "math_block": return [inlineBlock(keyPrefix, blockMathSegments(stringProp(node, "content"), stringProp(node, "raw") || `$${stringProp(node, "content")}$`, context.math ?? { enabled: true }, theme), context)];
 		case "blockquote": {
 			const quoteSegment = {
 				text: "│ ",
@@ -761,7 +699,8 @@ function nodeToBlocks(node, context, theme, keyPrefix) {
 				prefixSegments: [...context.prefixSegments, quoteSegment],
 				continuationPrefixSegments: [...context.continuationPrefixSegments, quoteSegment],
 				imageResolver: context.imageResolver,
-				imageSize: context.imageSize
+				imageSize: context.imageSize,
+				math: context.math
 			};
 			return childSequenceToBlocks(nodeChildren(node), quoteContext, theme, keyPrefix);
 		}
@@ -771,22 +710,30 @@ function nodeToBlocks(node, context, theme, keyPrefix) {
 		case "table": return [blockFromTable(node, keyPrefix, context, theme)];
 		case "inline": return [inlineBlock(keyPrefix, inlineNodeSegments(nodeChildren(node), theme, void 0, {
 			imageResolver: context.imageResolver,
-			imageSize: context.imageSize
+			imageSize: context.imageSize,
+			math: context.math
 		}), context)];
 		case "html_block":
 			if ("content" in node) return [blockFromHtmlBlock(node, keyPrefix, context, theme)];
 			break;
-		case "text": return [inlineBlock(keyPrefix, inlineNodeSegments([node], theme, void 0, { imageResolver: context.imageResolver }), context)];
+		case "text": return [inlineBlock(keyPrefix, inlineNodeSegments([node], theme, void 0, {
+			imageResolver: context.imageResolver,
+			math: context.math
+		}), context)];
 	}
 	if (nodeChildren(node).length) return childSequenceToBlocks(nodeChildren(node), context, theme, keyPrefix);
-	return [inlineBlock(keyPrefix, inlineNodeSegments([node], theme, void 0, { imageResolver: context.imageResolver }), context)];
+	return [inlineBlock(keyPrefix, inlineNodeSegments([node], theme, void 0, {
+		imageResolver: context.imageResolver,
+		math: context.math
+	}), context)];
 }
 function markdownAstToBlocks(nodes, theme, options = {}) {
 	const blocks = trimBlockArray(childSequenceToBlocks(nodes, {
 		prefixSegments: EMPTY_PREFIX,
 		continuationPrefixSegments: EMPTY_PREFIX,
 		imageResolver: options.imageResolver,
-		imageSize: options.imageSize
+		imageSize: options.imageSize,
+		math: options.math
 	}, theme, "md"));
 	return blocks.length ? blocks : [{
 		type: "blank",
@@ -935,7 +882,8 @@ function wrapLineSegments(source, prefixSegments, continuationPrefixSegments, wi
 				style: segment.style,
 				cells,
 				graphic: segment.graphic,
-				fallbackText: segment.text
+				fallbackText: segment.text,
+				...segment.mathAction ? { mathAction: segment.mathAction } : {}
 			});
 			row.remaining -= cells;
 			continue;
@@ -1203,7 +1151,8 @@ function styleSignature(style) {
 function inlineSegmentSignature(segment) {
 	const graphic = segment.graphic ? [
 		segment.graphic.kind,
-		segment.graphic.src,
+		segment.graphic.src ?? "",
+		segment.graphic.tex ?? "",
 		segment.graphic.alt ?? "",
 		segment.graphic.mime ?? "",
 		segment.graphic.base64 ?? "",
@@ -1378,7 +1327,8 @@ const DEFAULT_TUI_MARKDOWN_THEME = Object.freeze({
 	}),
 	codeBlock: freezeStyle({ fg: "yellowBright" }),
 	thematicBreak: freezeStyle({ dim: true }),
-	html: freezeStyle({ dim: true })
+	html: freezeStyle({ dim: true }),
+	math: freezeStyle({ fg: "cyanBright" })
 });
 function stableSerialize(value) {
 	if (value == null) return "null";
@@ -1404,7 +1354,8 @@ function resolveTuiMarkdownTheme(overrides) {
 		listMarker: mergeFrozenStyle(DEFAULT_TUI_MARKDOWN_THEME.listMarker, overrides.listMarker),
 		codeBlock: mergeFrozenStyle(DEFAULT_TUI_MARKDOWN_THEME.codeBlock, overrides.codeBlock),
 		thematicBreak: mergeFrozenStyle(DEFAULT_TUI_MARKDOWN_THEME.thematicBreak, overrides.thematicBreak),
-		html: mergeFrozenStyle(DEFAULT_TUI_MARKDOWN_THEME.html, overrides.html)
+		html: mergeFrozenStyle(DEFAULT_TUI_MARKDOWN_THEME.html, overrides.html),
+		math: mergeFrozenStyle(DEFAULT_TUI_MARKDOWN_THEME.math, overrides.math)
 	});
 }
 
@@ -1420,7 +1371,8 @@ function buildMarkdownBlocks(content, parser, options) {
 		const nodes = parser.parse(content, options?.final ?? true);
 		const blocks = markdownAstToBlocks(nodes, theme, {
 			imageResolver: options?.imageResolver,
-			imageSize: options?.imageSize
+			imageSize: options?.imageSize,
+			math: options?.math
 		});
 		return {
 			nodes,
@@ -1607,11 +1559,12 @@ function findMarkdownMathActionAt(rows, point, options) {
 			if (!math || segmentEnd <= clipStart || segmentStart >= clipEnd) continue;
 			const visibleStart = Math.max(segmentStart, clipStart);
 			const visibleEnd = Math.min(segmentEnd, clipEnd);
+			const graphicHeight = segment.graphic ? Math.max(1, Math.floor(segment.graphic.displayHeight ?? 1)) : 1;
 			const rect = {
 				x: r.x + visibleStart - clipStart,
 				y: r.y + rowIndex - firstRow,
 				w: visibleEnd - visibleStart,
-				h: 1
+				h: graphicHeight
 			};
 			if (point.cellX < rect.x || point.cellY < rect.y || point.cellX >= rect.x + rect.w || point.cellY >= rect.y + rect.h) continue;
 			return {
@@ -1627,6 +1580,97 @@ function findMarkdownMathActionAt(rows, point, options) {
 	return null;
 }
 
+//#endregion
+//#region src/vue/markdown/math.ts
+let loadedKatex = null;
+let katexLoad = null;
+const katexListeners = new Set();
+function resolveKatexRenderer(value) {
+	if (!value || typeof value !== "object") return null;
+	const renderToString = value.renderToString;
+	return typeof renderToString === "function" ? { renderToString } : null;
+}
+function subscribeMarkdownMathRenderer(listener) {
+	katexListeners.add(listener);
+	return () => katexListeners.delete(listener);
+}
+async function loadMarkdownMathRenderer() {
+	if (loadedKatex) return true;
+	if (!katexLoad) katexLoad = import("katex").then((mod) => {
+		const renderer = resolveKatexRenderer(mod.default) ?? resolveKatexRenderer(mod);
+		if (!renderer) return false;
+		loadedKatex = renderer;
+		for (const listener of katexListeners) listener();
+		return true;
+	}).catch(() => false);
+	return katexLoad;
+}
+const KATEX_TEXT_OPTIONS = Object.freeze({
+	output: "mathml",
+	throwOnError: false,
+	strict: "ignore",
+	trust: false,
+	maxSize: 20,
+	maxExpand: 200
+});
+const KATEX_VALIDATE_OPTIONS = Object.freeze({
+	...KATEX_TEXT_OPTIONS,
+	throwOnError: true
+});
+const TEX_SYMBOLS = Object.freeze({
+	alpha: "α",
+	beta: "β",
+	gamma: "γ",
+	delta: "δ",
+	epsilon: "ε",
+	theta: "θ",
+	lambda: "λ",
+	mu: "μ",
+	pi: "π",
+	rho: "ρ",
+	sigma: "σ",
+	tau: "τ",
+	phi: "φ",
+	omega: "ω",
+	Gamma: "Γ",
+	Delta: "Δ",
+	Theta: "Θ",
+	Lambda: "Λ",
+	Pi: "Π",
+	Sigma: "Σ",
+	Phi: "Φ",
+	Omega: "Ω",
+	int: "∫",
+	sum: "∑",
+	prod: "∏",
+	infty: "∞",
+	infinity: "∞",
+	pm: "±",
+	times: "×",
+	cdot: "·",
+	div: "÷",
+	le: "≤",
+	leq: "≤",
+	ge: "≥",
+	geq: "≥",
+	neq: "≠",
+	ne: "≠",
+	approx: "≈",
+	equiv: "≡",
+	to: "→",
+	rightarrow: "→",
+	leftarrow: "←",
+	leftrightarrow: "↔",
+	partial: "∂",
+	nabla: "∇",
+	sqrt: "√"
+});
+const SUPPORTED_COMMANDS = new Set([
+	...Object.keys(TEX_SYMBOLS),
+	"frac",
+	"sqrt"
+]);
+
 //#endregion
 //#region src/vue/markdown/render.ts
 const mergedStyleCache = new WeakMap();
@@ -1653,7 +1697,7 @@ function mergeStyle(base, overlay) {
 }
 const activeMarkdownImageGraphics = new WeakMap();
 function markdownImageGraphicId(segment, identity) {
-	return `md-image:${stableTerminalGraphicNumericId(`${identity}:${segment.src}:${segment.displayWidth ?? 0}:${segment.displayHeight ?? 0}:${segment.base64 ?? ""}`)}`;
+	return `md-image:${stableTerminalGraphicNumericId(`${identity}:${segment.src ?? segment.tex ?? ""}:${segment.displayWidth ?? 0}:${segment.displayHeight ?? 0}:${segment.base64 ?? ""}`)}`;
 }
 function rememberMarkdownImageGraphic(terminal, id, rect) {
 	let active = activeMarkdownImageGraphics.get(terminal);
@@ -1679,7 +1723,7 @@ function clearStaleMarkdownImageGraphicsForRow(terminal, y, keepIds, keepVisible
 	}
 }
 function canAttemptMarkdownImageGraphic(terminal, segment) {
-	if (segment.kind !== "image" || !segment.base64) return false;
+	if (!segment.base64) return false;
 	const output = getTerminalGraphicsOutput(terminal);
 	const protocol = output?.capabilities.preferredProtocol;
 	return Boolean(output?.capabilities.supported && isTerminalGraphicsProtocol(protocol));
@@ -1693,7 +1737,7 @@ function clearMarkdownImageGraphics(terminal, rect) {
 	}
 }
 function queueMarkdownImageGraphic(terminal, segment, identity, rect) {
-	if (segment.kind !== "image" || !segment.base64) return "unavailable";
+	if (!segment.base64) return "unavailable";
 	const output = getTerminalGraphicsOutput(terminal);
 	const protocol = output?.capabilities.preferredProtocol;
 	if (!output?.capabilities.supported || !isTerminalGraphicsProtocol(protocol)) return "unavailable";
@@ -1735,7 +1779,7 @@ function queueMarkdownImageGraphic(terminal, segment, identity, rect) {
 		sequence,
 		resizeSequence,
 		clearSequence,
-		fallbackText: segment.alt ?? "image"
+		fallbackText: segment.alt ?? (segment.kind === "math" ? segment.raw ?? segment.tex ?? "math" : "image")
 	});
 	markdownImageDebug(`queue id=${id}`, `accepted=${accepted ? "true" : "false"}`, `x=${rect.x}`, `y=${rect.y}`, `w=${width}`, `h=${height}`, `visibleW=${rect.w}`, `displayW=${segment.displayWidth ?? ""}`, `displayH=${segment.displayHeight ?? ""}`);
 	if (accepted) rememberMarkdownImageGraphic(terminal, id, {
@@ -1839,7 +1883,7 @@ function paintMarkdownVisualRow(terminal, row, options) {
 			const queuedGraphic = queueResult === "queued";
 			const suppressFallback = queuedGraphic || queueResult === "rejected" || graphicAvailable === true;
 			if (queuedGraphic) queuedGraphics.add(markdownImageGraphicId(segment.graphic, `${row.key}:${segmentIndex}`));
-			terminal.write(suppressFallback ? spaces(visibleCells) : sliceByCellsRange(segment.fallbackText ?? segment.graphic.alt ?? "image", 0, visibleCells) || spaces(visibleCells), {
+			terminal.write(suppressFallback ? spaces(visibleCells) : sliceByCellsRange(segment.fallbackText ?? segment.graphic.alt ?? (segment.graphic.kind === "math" ? segment.graphic.raw ?? segment.graphic.tex ?? "math" : "image"), 0, visibleCells) || spaces(visibleCells), {
 				x: cellX,
 				y: options.y,
 				style: suppressFallback ? options.baseStyle : segmentStyle
@@ -2031,6 +2075,34 @@ const TVirtualMarkdown = defineComponent({
 			type: Boolean,
 			default: true
 		},
+		mathImages: {
+			type: Boolean,
+			default: true
+		},
+		mathCellWidthPx: {
+			type: Number,
+			default: void 0
+		},
+		mathCellHeightPx: {
+			type: Number,
+			default: void 0
+		},
+		mathScale: {
+			type: Number,
+			default: void 0
+		},
+		mathColor: {
+			type: String,
+			default: void 0
+		},
+		mathMaxWidthCells: {
+			type: Number,
+			default: void 0
+		},
+		mathBaselineRatio: {
+			type: Number,
+			default: void 0
+		},
 		imageActions: {
 			type: Boolean,
 			default: false
@@ -2081,7 +2153,42 @@ const TVirtualMarkdown = defineComponent({
 		const graphicsOutputVersion = shallowRef(getTerminalGraphicsOutputVersion(terminal));
 		const unsubscribeGraphicsOutput = subscribeTerminalGraphicsOutput(terminal, () => {
 			graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal);
+			enqueuePendingMathImages();
+		});
+		const unsubscribeMathRenderer = subscribeMarkdownMathRenderer(() => {
+			scheduleRebuild();
 		});
+		const unsubscribeMathImage = subscribeMarkdownMathImage(() => {
+			scheduleRebuild();
+		});
+		function mathOptions() {
+			if (props.mathImages === false) return { enabled: false };
+			const resolvedColor = props.mathColor ?? resolveMarkdownMathColor(defaultStyle.value.fg);
+			return {
+				enabled: true,
+				...props.mathCellWidthPx != null ? { cellWidthPx: props.mathCellWidthPx } : {},
+				...props.mathCellHeightPx != null ? { cellHeightPx: props.mathCellHeightPx } : {},
+				...props.mathScale != null ? { scale: props.mathScale } : {},
+				...resolvedColor != null ? { color: resolvedColor } : {},
+				...props.mathBaselineRatio != null ? { baselineRatio: props.mathBaselineRatio } : {},
+				maxWidthCells: props.mathMaxWidthCells ?? props.w
+			};
+		}
+		function enqueuePendingMathImages() {
+			if (props.mathImages === false) return;
+			if (!getTerminalGraphicsOutput(terminal)?.capabilities.supported) return;
+			if (!isMarkdownMathImageRendererReady()) {
+				loadMarkdownMathImageRenderer().then((ready) => {
+					if (ready && alive) scheduleRebuild();
+				});
+				return;
+			}
+			const h$1 = Math.max(0, Math.floor(props.h ?? absRect.value.h));
+			enqueueMarkdownMathImages(rows.value, mathOptions(), {
+				firstRow: internalScrollTop.value,
+				lastRow: internalScrollTop.value + h$1
+			});
+		}
 		watch(() => `${props.streaming ? 1 : 0}:${(props.customHtmlTags ?? []).join("\0")}`, () => {
 			parser.value = markRaw(createTuiMarkdownParser({
 				streaming: props.streaming,
@@ -2103,13 +2210,15 @@ const TVirtualMarkdown = defineComponent({
 						minHeight: props.imageMinHeight,
 						maxHeight: props.imageMaxHeight,
 						preserveAspectRatio: props.imagePreserveAspectRatio
-					}
+					},
+					math: mathOptions()
 				}).blocks;
 				return layoutMarkdownBlocksCached(blocks, props.w, layoutCache);
 			});
 			layoutCache = markRaw(nextLayout.cache);
 			const nextRows = nextLayout.rows;
 			rows.value = markRaw(nextRows);
+			enqueuePendingMathImages();
 			reconcileScrollTop();
 			const nextScrollTop = internalScrollTop.value;
 			const nextVisibleRows = visibleRowSignatures(nextRows, nextScrollTop);
@@ -2234,6 +2343,9 @@ const TVirtualMarkdown = defineComponent({
 			pendingSelectionScrollFocusRemap = false;
 			applyControlledScrollTop(props.scrollTop, remap);
 		});
+		watch(internalScrollTop, () => {
+			enqueuePendingMathImages();
+		});
 		watch([
 			() => props.content,
 			() => props.blocks,
@@ -2246,7 +2358,14 @@ const TVirtualMarkdown = defineComponent({
 			() => props.imageMaxWidth,
 			() => props.imageMinHeight,
 			() => props.imageMaxHeight,
-			() => props.imagePreserveAspectRatio
+			() => props.imagePreserveAspectRatio,
+			() => props.mathImages,
+			() => props.mathCellWidthPx,
+			() => props.mathCellHeightPx,
+			() => props.mathScale,
+			() => props.mathColor,
+			() => props.mathMaxWidthCells,
+			() => props.mathBaselineRatio
 		], () => {
 			scheduleRebuild();
 		}, { immediate: true });
@@ -2449,6 +2568,8 @@ const TVirtualMarkdown = defineComponent({
 			alive = false;
 			rebuildVersion++;
 			unsubscribeGraphicsOutput();
+			unsubscribeMathRenderer();
+			unsubscribeMathImage();
 			clearMarkdownImageGraphics(terminal, fullRect.value);
 		});
 		useRenderNode(() => ({
@@ -2633,4 +2754,4 @@ function createMarkdownBlockSource(options) {
 }
 
 //#endregion
-export { TVirtualMarkdown, buildMarkdownBlocks, buildMarkdownVisualRows, clearMarkdownImageGraphics, collectVisibleMarkdownImageGraphicIds, createMarkdownBlockSource, createTuiMarkdownParser, findMarkdownImageActionAt, findMarkdownLinkActionAt, findMarkdownMathActionAt, isSafeMarkdownLink, layoutMarkdownBlocks, markdownThemeSignature, paintMarkdownVisualRow };
+export { TVirtualMarkdown, buildMarkdownBlocks, buildMarkdownVisualRows, clearMarkdownImageGraphics, collectVisibleMarkdownImageGraphicIds, createMarkdownBlockSource, createTuiMarkdownParser, findMarkdownImageActionAt, findMarkdownLinkActionAt, findMarkdownMathActionAt, isSafeMarkdownLink, layoutMarkdownBlocks, loadMarkdownMathRenderer, markdownThemeSignature, paintMarkdownVisualRow, subscribeMarkdownMathRenderer };