@simon_he/vue-tui 1.0.1 → 1.1.0

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

@@ -1,9 +1,296 @@
-import { sanitizeDomHref } from "./hyperlink-Bn02UXJb.js";
-import { EventZIndexContextKey, applyWheelScroll, createWheelScrollState, currentTextWidthProvider, forEachTextCellSegment, intersectRect, normalizeCellRect, repeatChar, resetWheelScrollState, sanitizeInlineText, sanitizeTextBlock, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility, withTextWidthProvider } from "./wheel-scroll-vBRaQ7p-.js";
-import { terminalSelectionRowSpans, terminalSelectionVisibleRowSpans } from "./terminal-selection-DBinO6p5.js";
+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 { 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 { 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
+const DATA_IMAGE_RE = /^data:(image\/[A-Za-z0-9.+-]+);base64,([A-Za-z0-9+/=\s]+)$/i;
+const SAFE_IMAGE_MIME_RE = /^image\/(?:png|jpeg|jpg|gif|webp)$/i;
+function sanitizeMarkdownImageSource(src) {
+	if (typeof src !== "string") return null;
+	const raw = src.trim();
+	if (!raw || raw !== src) return null;
+	const data = raw.match(DATA_IMAGE_RE);
+	if (data) {
+		const mime = data[1].toLowerCase();
+		const base64 = data[2].replace(/\s+/g, "");
+		if (!SAFE_IMAGE_MIME_RE.test(mime)) return null;
+		if (!/^[A-Za-z0-9+/=]+$/.test(base64)) return null;
+		return {
+			src: raw,
+			mime,
+			base64
+		};
+	}
+	if (/^(?:blob|file):/i.test(raw)) {
+		if (raw.includes("\\") || /\s/u.test(raw) || hasEncodedControl(raw)) return null;
+		try {
+			const url = new URL(raw);
+			if (url.protocol === "blob:" || url.protocol === "file:") return { src: url.toString() };
+		} catch {
+			return null;
+		}
+	}
+	const safe = sanitizeDomHref(raw, { allowRelative: true });
+	return safe ? { src: safe } : null;
+}
+const BASE64_TABLE = (() => {
+	const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+	const table = new Map();
+	for (let i = 0; i < chars.length; i++) table.set(chars[i], i);
+	return table;
+})();
+function decodeBase64Prefix(value, maxBytes) {
+	const bytes = [];
+	let buffer = 0;
+	let bits = 0;
+	for (const ch of value.replace(/\s+/g, "")) {
+		if (ch === "=") break;
+		const sextet = BASE64_TABLE.get(ch);
+		if (sextet == null) continue;
+		buffer = buffer << 6 | sextet;
+		bits += 6;
+		while (bits >= 8) {
+			bits -= 8;
+			bytes.push(buffer >> bits & 255);
+			if (bytes.length >= maxBytes) return Uint8Array.from(bytes);
+		}
+	}
+	return Uint8Array.from(bytes);
+}
+function u16be(bytes, offset) {
+	return (bytes[offset] ?? 0) << 8 | (bytes[offset + 1] ?? 0);
+}
+function u16le(bytes, offset) {
+	return (bytes[offset] ?? 0) | (bytes[offset + 1] ?? 0) << 8;
+}
+function u24le(bytes, offset) {
+	return (bytes[offset] ?? 0) | (bytes[offset + 1] ?? 0) << 8 | (bytes[offset + 2] ?? 0) << 16;
+}
+function u32be(bytes, offset) {
+	return (bytes[offset] ?? 0) * 16777216 + ((bytes[offset + 1] ?? 0) << 16 | (bytes[offset + 2] ?? 0) << 8 | (bytes[offset + 3] ?? 0));
+}
+function validDimensions(width, height) {
+	return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0 ? {
+		width,
+		height
+	} : null;
+}
+function readMarkdownImageDimensions(base64) {
+	if (!base64) return null;
+	const bytes = decodeBase64Prefix(base64, 4096);
+	if (bytes.length < 10) return null;
+	if (bytes[0] === 137 && bytes[1] === 80 && bytes[2] === 78 && bytes[3] === 71 && bytes[12] === 73 && bytes[13] === 72 && bytes[14] === 68 && bytes[15] === 82) return validDimensions(u32be(bytes, 16), u32be(bytes, 20));
+	if (bytes[0] === 71 && bytes[1] === 73 && bytes[2] === 70) return validDimensions(u16le(bytes, 6), u16le(bytes, 8));
+	if (bytes[0] === 255 && bytes[1] === 216) for (let offset = 2; offset + 8 < bytes.length;) {
+		if (bytes[offset] !== 255) {
+			offset++;
+			continue;
+		}
+		const marker = bytes[offset + 1] ?? 0;
+		if (marker === 217 || marker === 218) break;
+		const length = u16be(bytes, offset + 2);
+		if (length < 2) break;
+		if (marker >= 192 && marker <= 195 || marker >= 197 && marker <= 199 || marker >= 201 && marker <= 203 || marker >= 205 && marker <= 207) return validDimensions(u16be(bytes, offset + 7), u16be(bytes, offset + 5));
+		offset += 2 + length;
+	}
+	if (bytes[0] === 82 && bytes[1] === 73 && bytes[2] === 70 && bytes[3] === 70 && bytes[8] === 87 && bytes[9] === 69 && bytes[10] === 66 && bytes[11] === 80) {
+		const format = String.fromCharCode(bytes[12] ?? 0, bytes[13] ?? 0, bytes[14] ?? 0, bytes[15] ?? 0);
+		if (format === "VP8X" && bytes.length >= 30) return validDimensions(u24le(bytes, 24) + 1, u24le(bytes, 27) + 1);
+		if (format === "VP8 " && bytes.length >= 30) return validDimensions(u16le(bytes, 26) & 16383, u16le(bytes, 28) & 16383);
+		if (format === "VP8L" && bytes.length >= 25 && bytes[20] === 47) {
+			const b0 = bytes[21] ?? 0;
+			const b1 = bytes[22] ?? 0;
+			const b2 = bytes[23] ?? 0;
+			const b3 = bytes[24] ?? 0;
+			return validDimensions(1 + ((b1 & 63) << 8 | b0), 1 + (b3 << 6 | b2 >> 2));
+		}
+	}
+	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();
 const MAX_MARKDOWN_INSTANCE_CACHE = 32;
@@ -13,6 +300,9 @@ function sanitizeMarkdownLink(url) {
 function isSafeMarkdownLink(url) {
 	return sanitizeMarkdownLink(url) != null;
 }
+function isSafeMarkdownDestination(url) {
+	return isSafeMarkdownLink(url) || sanitizeMarkdownImageSource(url) != null;
+}
 function normalizeCustomHtmlTags(config) {
 	return Array.from(new Set(config?.customHtmlTags?.filter(Boolean) ?? [])).sort();
 }
@@ -44,7 +334,7 @@ function createTuiMarkdownParser(config) {
 			final,
 			customHtmlTags,
 			requireClosingStrong: final || !config?.streaming,
-			validateLink: isSafeMarkdownLink
+			validateLink: isSafeMarkdownDestination
 		});
 	}
 	return { parse };
@@ -57,6 +347,7 @@ const HARD_BREAK_SEGMENT = Object.freeze({
 	text: "",
 	hardBreak: true
 });
+const TERMINAL_CELL_WIDTH_TO_HEIGHT_RATIO = .5;
 function mergeStyle$1(base, overlay) {
 	if (!base) return overlay;
 	if (!overlay) return base;
@@ -79,6 +370,32 @@ function stringProp(node, key) {
 	const value = node[key];
 	return typeof value === "string" ? value : "";
 }
+function imageSourceFromRaw(raw) {
+	if (!raw.startsWith("![")) return "";
+	const marker = raw.indexOf("](");
+	if (marker < 0 || !raw.endsWith(")")) return "";
+	const destination = raw.slice(marker + 2, -1).trim();
+	if (destination.startsWith("<")) {
+		const end = destination.indexOf(">");
+		return end > 1 ? destination.slice(1, end) : "";
+	}
+	return destination.split(/\s+/u)[0] ?? "";
+}
+function imageFallbackText(raw, rawSource, sourceSrc) {
+	if (raw) return raw;
+	const src = rawSource || sourceSrc;
+	return src ? `![](${src})` : "image";
+}
+function normalizeImageResolverResult(result) {
+	if (typeof result === "string") return { base64: result.replace(/\s+/g, "") };
+	if (!result) return {};
+	return {
+		base64: result.base64.replace(/\s+/g, ""),
+		...result.originalBase64 ? { originalBase64: result.originalBase64.replace(/\s+/g, "") } : {},
+		...result.mime ? { mime: result.mime } : {},
+		...result.originalMime ? { originalMime: result.originalMime } : {}
+	};
+}
 function booleanProp(node, key) {
 	return node[key] === true;
 }
@@ -90,17 +407,51 @@ function nodeItems(node) {
 	const value = node.items;
 	return Array.isArray(value) ? value : [];
 }
-function pushTextSegments(out, text, style) {
+function clampImageCells(value, min, max) {
+	return Math.max(min, Math.min(max, Math.round(value)));
+}
+function resolveImageDisplaySize(alt, size, naturalWidth, naturalHeight) {
+	if (size?.minWidth == null && size?.maxWidth == null && size?.minHeight == null && size?.maxHeight == null) return {};
+	const minWidth = Math.max(1, Math.floor(size?.minWidth ?? 1));
+	const maxWidth = Math.max(minWidth, Math.floor(size?.maxWidth ?? Number.MAX_SAFE_INTEGER));
+	const minHeight = Math.max(1, Math.floor(size?.minHeight ?? 1));
+	const maxHeight = Math.max(minHeight, Math.floor(size?.maxHeight ?? Number.MAX_SAFE_INTEGER));
+	if (size?.preserveAspectRatio !== false && naturalWidth != null && naturalHeight != null && naturalWidth > 0 && naturalHeight > 0) {
+		const cellRatio = naturalWidth / naturalHeight / TERMINAL_CELL_WIDTH_TO_HEIGHT_RATIO;
+		let width = minWidth;
+		let height = Math.max(minHeight, Math.ceil(width / cellRatio));
+		width = Math.max(width, Math.ceil(height * cellRatio));
+		if (width > maxWidth) {
+			width = maxWidth;
+			height = Math.max(minHeight, Math.ceil(width / cellRatio));
+		}
+		if (height > maxHeight) {
+			height = maxHeight;
+			width = Math.max(minWidth, Math.floor(height * cellRatio));
+		}
+		return {
+			displayWidth: clampImageCells(width, minWidth, maxWidth),
+			displayHeight: clampImageCells(height, minHeight, maxHeight)
+		};
+	}
+	return {
+		displayWidth: size?.maxWidth != null ? Math.min(maxWidth, Math.max(minWidth, textCellWidth(alt))) : Math.max(minWidth, textCellWidth(alt)),
+		displayHeight: size?.maxHeight != null ? Math.min(maxHeight, Math.max(minHeight, 1)) : minHeight
+	};
+}
+function pushTextSegments(out, text, style, graphic, mathAction) {
 	if (!text) return;
 	const normalized = sanitizeTextBlock(text);
 	if (!normalized) return;
 	const parts = normalized.split("\n");
 	for (let i = 0; i < parts.length; i++) {
 		const part = sanitizeInlineText(parts[i] ?? "");
-		if (part) out.push(style ? {
+		if (part) out.push({
 			text: part,
-			style
-		} : { text: part });
+			...style ? { style } : {},
+			...i === 0 && graphic ? { graphic } : {},
+			...mathAction ? { mathAction } : {}
+		});
 		if (i < parts.length - 1) out.push(HARD_BREAK_SEGMENT);
 	}
 }
@@ -108,7 +459,12 @@ function sanitizeCodeBlockText(text, tabSize = 4) {
 	const normalized = String(text ?? "").replace(/\r\n?/g, "\n").replace(/\t/g, spaces(tabSize)).replace(/\u00a0/g, " ");
 	return sanitizeTextBlock(normalized);
 }
-function inlineNodeSegments(nodes, theme, inheritedStyle) {
+function codeBlockLanguage(node) {
+	const raw = stringProp(node, "lang") || stringProp(node, "language") || stringProp(node, "info") || stringProp(node, "meta");
+	const language = raw.trim().split(/\s+/)[0]?.toLowerCase() ?? "";
+	return language || void 0;
+}
+function inlineNodeSegments(nodes, theme, inheritedStyle, options = {}) {
 	const out = [];
 	for (const node of nodes) switch (node.type) {
 		case "text":
@@ -119,22 +475,22 @@ function inlineNodeSegments(nodes, theme, inheritedStyle) {
 		case "heading":
 		case "list_item":
 		case "blockquote":
-			out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle));
+			out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle, options));
 			break;
 		case "strong":
-			out.push(...inlineNodeSegments(nodeChildren(node), theme, mergeStyle$1(inheritedStyle, theme.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)));
+			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)));
+			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));
+			out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle, options));
 			break;
 		case "inline_code":
 			pushTextSegments(out, stringProp(node, "code"), mergeStyle$1(inheritedStyle, theme.inlineCode));
@@ -150,13 +506,55 @@ function inlineNodeSegments(nodes, theme, inheritedStyle) {
 				href: safeHref
 			}) : inheritedStyle;
 			const children = nodeChildren(node);
-			if (children.length) out.push(...inlineNodeSegments(children, theme, linkStyle));
+			if (children.length) out.push(...inlineNodeSegments(children, theme, linkStyle, options));
 			else pushTextSegments(out, stringProp(node, "text"), linkStyle);
 			break;
 		}
-		case "image":
-			pushTextSegments(out, stringProp(node, "alt") || stringProp(node, "src"), mergeStyle$1(inheritedStyle, theme.link));
+		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, 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
+						} : {},
+						...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;
+		}
 		case "checkbox":
 		case "checkbox_input":
 			pushTextSegments(out, booleanProp(node, "checked") ? "[x]" : "[ ]", inheritedStyle);
@@ -165,7 +563,16 @@ function inlineNodeSegments(nodes, theme, inheritedStyle) {
 			pushTextSegments(out, stringProp(node, "markup") || stringProp(node, "name"), inheritedStyle);
 			break;
 		case "math_inline":
-			pushTextSegments(out, stringProp(node, "content"), mergeStyle$1(inheritedStyle, theme.inlineCode));
+			{
+				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":
@@ -180,7 +587,7 @@ function inlineNodeSegments(nodes, theme, inheritedStyle) {
 			break;
 		default:
 			if (nodeChildren(node).length) {
-				out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle));
+				out.push(...inlineNodeSegments(nodeChildren(node), theme, inheritedStyle, options));
 				break;
 			}
 			pushTextSegments(out, stringProp(node, "raw"), inheritedStyle);
@@ -198,16 +605,23 @@ function inlineBlock(key, segments, context) {
 	};
 }
 function blockFromParagraph(node, key, context, theme) {
-	return inlineBlock(key, inlineNodeSegments(nodeChildren(node), theme), context);
+	return inlineBlock(key, inlineNodeSegments(nodeChildren(node), theme, void 0, {
+		imageResolver: context.imageResolver,
+		imageSize: context.imageSize
+	}), 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]), context);
+	return inlineBlock(key, inlineNodeSegments(nodeChildren(node), theme, theme.heading[level - 1], {
+		imageResolver: context.imageResolver,
+		imageSize: context.imageSize
+	}), context);
 }
 function blockFromCodeBlock(node, key, context, theme) {
 	return {
 		type: "code_block",
 		key,
+		language: codeBlockLanguage(node),
 		lines: sanitizeCodeBlockText(stringProp(node, "code")).split("\n"),
 		style: theme.codeBlock,
 		prefixSegments: context.prefixSegments,
@@ -219,7 +633,7 @@ function blockFromHtmlBlock(node, key, context, theme) {
 		type: "html_block",
 		raw: stringProp(node, "raw"),
 		content: stringProp(node, "content")
-	}], theme), context);
+	}], theme, void 0, { imageResolver: context.imageResolver }), context);
 }
 function tableRows$1(node, key) {
 	const value = node[key];
@@ -237,11 +651,17 @@ function tableCellAlign(cell) {
 function blockFromTable(node, key, context, theme) {
 	const headerRow = tableRows$1(node, "header")[0];
 	const header = tableCells(headerRow ?? { type: "table_row" }).map((cell) => ({
-		segments: inlineNodeSegments(nodeChildren(cell), theme, theme.strong),
+		segments: inlineNodeSegments(nodeChildren(cell), theme, theme.strong, {
+			imageResolver: context.imageResolver,
+			imageSize: context.imageSize
+		}),
 		align: tableCellAlign(cell)
 	}));
 	const rows = tableRows$1(node, "rows").map((row) => tableCells(row).map((cell) => ({
-		segments: inlineNodeSegments(nodeChildren(cell), theme),
+		segments: inlineNodeSegments(nodeChildren(cell), theme, void 0, {
+			imageResolver: context.imageResolver,
+			imageSize: context.imageSize
+		}),
 		align: tableCellAlign(cell)
 	})));
 	return {
@@ -339,7 +759,9 @@ function nodeToBlocks(node, context, theme, keyPrefix) {
 			};
 			const quoteContext = {
 				prefixSegments: [...context.prefixSegments, quoteSegment],
-				continuationPrefixSegments: [...context.continuationPrefixSegments, quoteSegment]
+				continuationPrefixSegments: [...context.continuationPrefixSegments, quoteSegment],
+				imageResolver: context.imageResolver,
+				imageSize: context.imageSize
 			};
 			return childSequenceToBlocks(nodeChildren(node), quoteContext, theme, keyPrefix);
 		}
@@ -347,19 +769,24 @@ function nodeToBlocks(node, context, theme, keyPrefix) {
 			if ("items" in node && Array.isArray(node.items)) return listBlocks(node, context, theme, keyPrefix);
 			break;
 		case "table": return [blockFromTable(node, keyPrefix, context, theme)];
-		case "inline": return [inlineBlock(keyPrefix, inlineNodeSegments(nodeChildren(node), theme), context)];
+		case "inline": return [inlineBlock(keyPrefix, inlineNodeSegments(nodeChildren(node), theme, void 0, {
+			imageResolver: context.imageResolver,
+			imageSize: context.imageSize
+		}), context)];
 		case "html_block":
 			if ("content" in node) return [blockFromHtmlBlock(node, keyPrefix, context, theme)];
 			break;
-		case "text": return [inlineBlock(keyPrefix, inlineNodeSegments([node], theme), context)];
+		case "text": return [inlineBlock(keyPrefix, inlineNodeSegments([node], theme, void 0, { imageResolver: context.imageResolver }), context)];
 	}
 	if (nodeChildren(node).length) return childSequenceToBlocks(nodeChildren(node), context, theme, keyPrefix);
-	return [inlineBlock(keyPrefix, inlineNodeSegments([node], theme), context)];
+	return [inlineBlock(keyPrefix, inlineNodeSegments([node], theme, void 0, { imageResolver: context.imageResolver }), context)];
 }
-function markdownAstToBlocks(nodes, theme) {
+function markdownAstToBlocks(nodes, theme, options = {}) {
 	const blocks = trimBlockArray(childSequenceToBlocks(nodes, {
 		prefixSegments: EMPTY_PREFIX,
-		continuationPrefixSegments: EMPTY_PREFIX
+		continuationPrefixSegments: EMPTY_PREFIX,
+		imageResolver: options.imageResolver,
+		imageSize: options.imageSize
 	}, theme, "md"));
 	return blocks.length ? blocks : [{
 		type: "blank",
@@ -376,11 +803,21 @@ function toVisualSegment(segment) {
 	return {
 		text: segment.text,
 		style: segment.style,
-		cells
+		cells,
+		...segment.graphic ? { graphic: segment.graphic } : {},
+		...segment.mathAction ? { mathAction: segment.mathAction } : {}
 	};
 }
 function segmentsPlainText(segments) {
-	return segments.map((segment) => segment.text).join("");
+	return segments.map((segment) => segment.fallbackText ?? segment.text).join("");
+}
+function segmentsVisualHeight(segments) {
+	let height = 1;
+	for (const segment of segments) {
+		if (!segment.graphic) continue;
+		height = Math.max(height, Math.max(1, Math.floor(segment.graphic.displayHeight ?? 1)));
+	}
+	return height;
 }
 function segmentsCellWidth(segments) {
 	let cells = 0;
@@ -410,10 +847,15 @@ function clipInlineSegmentsToWidth(segments, width) {
 		const piece = sliceByCellsRange(segment.text, 0, remaining);
 		const cells = textCellWidth(piece);
 		if (!piece || cells <= 0) continue;
-		out.push(segment.style ? {
+		const clipped = {
 			text: piece,
-			style: segment.style
-		} : { text: piece });
+			...segment.style ? { style: segment.style } : {},
+			...segment.mathAction ? { mathAction: segment.mathAction } : {}
+		};
+		out.push(piece === segment.text && segment.graphic ? {
+			...clipped,
+			graphic: segment.graphic
+		} : clipped);
 		remaining -= cells;
 	}
 	return out;
@@ -435,7 +877,9 @@ function clipVisualSegmentsToWidth(segments, width) {
 		out.push({
 			text,
 			style: segment.style,
-			cells
+			cells,
+			...text === segment.text && segment.graphic ? { graphic: segment.graphic } : {},
+			...segment.mathAction ? { mathAction: segment.mathAction } : {}
 		});
 		remaining -= cells;
 	}
@@ -477,6 +921,25 @@ function wrapLineSegments(source, prefixSegments, continuationPrefixSegments, wi
 	const prefixLengthForRow = () => row.useContinuation ? continuationPrefix.length : firstPrefix.length;
 	const rowHasBody = () => row.segments.length > prefixLengthForRow();
 	for (const segment of source) {
+		if (segment.graphic) {
+			const displayCells = Math.max(1, Math.floor(segment.graphic.displayWidth ?? 1));
+			if (row.remaining <= 0 && !rowHasBody()) {
+				if (!row.useContinuation) {
+					rows.push(row.segments);
+					row = openDegradedRow();
+				}
+			}
+			const cells = Math.min(displayCells, Math.max(1, row.remaining || width));
+			row.segments.push({
+				text: spaces(cells),
+				style: segment.style,
+				cells,
+				graphic: segment.graphic,
+				fallbackText: segment.text
+			});
+			row.remaining -= cells;
+			continue;
+		}
 		let aborted = false;
 		forEachTextCellSegment(segment.text, (piece) => {
 			while (true) {
@@ -504,7 +967,8 @@ function wrapLineSegments(source, prefixSegments, continuationPrefixSegments, wi
 				row.segments.push({
 					text: piece.text,
 					style: segment.style,
-					cells: piece.cells
+					cells: piece.cells,
+					...segment.mathAction ? { mathAction: segment.mathAction } : {}
 				});
 				row.remaining -= piece.cells;
 				return void 0;
@@ -532,6 +996,17 @@ function inlineBlockRows(block, width) {
 				segments: visualSegments
 			});
 			rowInBlock++;
+			const height = segmentsVisualHeight(visualSegments);
+			for (let extra = 1; extra < height; extra++) {
+				rows.push({
+					key: `${block.key}:${rowInBlock}`,
+					blockKey: block.key,
+					rowInBlock,
+					plainText: "",
+					segments: []
+				});
+				rowInBlock++;
+			}
 		}
 	}
 	return rows.length ? rows : [{
@@ -609,23 +1084,26 @@ function tableColumnWidths(block, columns, width) {
 	}
 	return widths;
 }
-function appendVisualSegment(segments, text, style) {
+function appendVisualSegment(segments, text, style, graphic, mathAction) {
 	if (!text) return;
 	const cells = textCellWidth(text);
 	if (cells <= 0) return;
 	const prev = segments[segments.length - 1];
-	if (prev && prev.style === style) {
+	if (prev && prev.style === style && prev.mathAction === mathAction && !prev.graphic && !graphic) {
 		segments[segments.length - 1] = {
 			text: `${prev.text}${text}`,
 			style,
-			cells: prev.cells + cells
+			cells: prev.cells + cells,
+			...mathAction ? { mathAction } : {}
 		};
 		return;
 	}
 	segments.push({
 		text,
 		style,
-		cells
+		cells,
+		...graphic ? { graphic } : {},
+		...mathAction ? { mathAction } : {}
 	});
 }
 function appendInlineVisualSegments(out, segments) {
@@ -634,7 +1112,7 @@ function appendInlineVisualSegments(out, segments) {
 			appendVisualSegment(out, " ");
 			continue;
 		}
-		appendVisualSegment(out, segment.text, segment.style);
+		appendVisualSegment(out, segment.text, segment.style, segment.graphic, segment.mathAction);
 	}
 }
 function tableBorderRow(block, widths, width, rowInBlock, left, join, right) {
@@ -723,10 +1201,26 @@ function styleSignature(style) {
 	].join("
");
 }
 function inlineSegmentSignature(segment) {
+	const graphic = segment.graphic ? [
+		segment.graphic.kind,
+		segment.graphic.src,
+		segment.graphic.alt ?? "",
+		segment.graphic.mime ?? "",
+		segment.graphic.base64 ?? "",
+		segment.graphic.displayWidth ?? "",
+		segment.graphic.displayHeight ?? ""
+	].join("") : "";
+	const mathAction = segment.mathAction ? [
+		segment.mathAction.source,
+		segment.mathAction.raw,
+		segment.mathAction.rendered ? "1" : "0"
+	].join("") : "";
 	return [
 		segment.text,
 		segment.hardBreak ? "1" : "0",
-		styleSignature(segment.style)
+		styleSignature(segment.style),
+		graphic,
+		mathAction
 	].join("");
 }
 function inlineSegmentsSignature(segments) {
@@ -742,6 +1236,7 @@ function blockLayoutSignature(block) {
 		].join("");
 		case "code_block": return [
 			block.type,
+			block.language ?? "",
 			block.lines.join(""),
 			styleSignature(block.style),
 			inlineSegmentsSignature(block.prefixSegments),
@@ -923,7 +1418,10 @@ function buildMarkdownBlocks(content, parser, options) {
 	const theme = resolveTuiMarkdownTheme(options?.theme);
 	try {
 		const nodes = parser.parse(content, options?.final ?? true);
-		const blocks = markdownAstToBlocks(nodes, theme);
+		const blocks = markdownAstToBlocks(nodes, theme, {
+			imageResolver: options?.imageResolver,
+			imageSize: options?.imageSize
+		});
 		return {
 			nodes,
 			blocks
@@ -966,9 +1464,177 @@ function plainTextFallbackBlocks(content) {
 	}];
 }
 
+//#endregion
+//#region src/vue/markdown/image-actions.ts
+function imageDisplayWidth(segment) {
+	return Math.max(1, Math.floor(segment.graphic?.displayWidth ?? segment.cells));
+}
+function imageDisplayHeight(segment) {
+	return Math.max(1, Math.floor(segment.graphic?.displayHeight ?? 1));
+}
+function findMarkdownImageActionAt(rows, point, options) {
+	const r = options.screenRect;
+	if (r.w <= 0 || r.h <= 0) return null;
+	if (point.cellX < r.x || point.cellY < r.y || point.cellX >= r.x + r.w || point.cellY >= r.y + r.h) return null;
+	const clipStart = Math.max(0, Math.floor(options.clipStart));
+	const clipEnd = clipStart + r.w;
+	const firstRow = Math.max(0, Math.floor(options.rowOffset));
+	const lastRow = Math.min(rows.length, firstRow + r.h);
+	for (let rowIndex = firstRow; rowIndex < lastRow; rowIndex++) {
+		const row = rows[rowIndex];
+		if (!row) continue;
+		let logicalX = 0;
+		for (let segmentIndex = 0; segmentIndex < row.segments.length; segmentIndex++) {
+			const segment = row.segments[segmentIndex];
+			const segmentStart = logicalX;
+			const segmentEnd = logicalX + segment.cells;
+			logicalX = segmentEnd;
+			const image = segment.graphic;
+			if (!image) continue;
+			if (segmentEnd <= clipStart || segmentStart >= clipEnd) continue;
+			const imageX = r.x + segmentStart - clipStart;
+			const imageY = r.y + rowIndex - firstRow;
+			const imageRect = {
+				x: imageX,
+				y: imageY,
+				w: imageDisplayWidth(segment),
+				h: imageDisplayHeight(segment)
+			};
+			const visibleLeft = Math.max(r.x, imageRect.x);
+			const visibleTop = Math.max(r.y, imageRect.y);
+			const visibleRight = Math.min(r.x + r.w, imageRect.x + imageRect.w);
+			const visibleBottom = Math.min(r.y + r.h, imageRect.y + imageRect.h);
+			if (point.cellX < visibleLeft || point.cellY < visibleTop || point.cellX >= visibleRight || point.cellY >= visibleBottom) continue;
+			return {
+				image,
+				rect: imageRect,
+				cellX: point.cellX,
+				cellY: point.cellY,
+				rowIndex,
+				segmentIndex
+			};
+		}
+	}
+	return null;
+}
+
+//#endregion
+//#region src/vue/markdown/link-actions.ts
+function findMarkdownLinkActionAt(rows, point, options) {
+	const r = options.screenRect;
+	if (r.w <= 0 || r.h <= 0) return null;
+	if (point.cellX < r.x || point.cellY < r.y || point.cellX >= r.x + r.w || point.cellY >= r.y + r.h) return null;
+	const clipStart = Math.max(0, Math.floor(options.clipStart));
+	const clipEnd = clipStart + r.w;
+	const firstRow = Math.max(0, Math.floor(options.rowOffset));
+	const lastRow = Math.min(rows.length, firstRow + r.h);
+	for (let rowIndex = firstRow; rowIndex < lastRow; rowIndex++) {
+		const row = rows[rowIndex];
+		if (!row) continue;
+		let logicalX = 0;
+		for (let segmentIndex = 0; segmentIndex < row.segments.length; segmentIndex++) {
+			const segment = row.segments[segmentIndex];
+			const segmentStart = logicalX;
+			const segmentEnd = logicalX + segment.cells;
+			logicalX = segmentEnd;
+			const href = segment.style?.href;
+			if (!href || segmentEnd <= clipStart || segmentStart >= clipEnd) continue;
+			const visibleStart = Math.max(segmentStart, clipStart);
+			const visibleEnd = Math.min(segmentEnd, clipEnd);
+			const rect = {
+				x: r.x + visibleStart - clipStart,
+				y: r.y + rowIndex - firstRow,
+				w: visibleEnd - visibleStart,
+				h: 1
+			};
+			if (point.cellX < rect.x || point.cellY < rect.y || point.cellX >= rect.x + rect.w || point.cellY >= rect.y + rect.h) continue;
+			let groupStart = segmentStart;
+			let groupEnd = segmentEnd;
+			const textParts = [segment.fallbackText ?? segment.text];
+			for (let index = segmentIndex - 1; index >= 0; index--) {
+				const previous = row.segments[index];
+				if (previous.style?.href !== href) break;
+				groupStart -= previous.cells;
+				textParts.unshift(previous.fallbackText ?? previous.text);
+			}
+			for (let index = segmentIndex + 1; index < row.segments.length; index++) {
+				const next = row.segments[index];
+				if (next.style?.href !== href) break;
+				groupEnd += next.cells;
+				textParts.push(next.fallbackText ?? next.text);
+			}
+			const visibleGroupStart = Math.max(groupStart, clipStart);
+			const visibleGroupEnd = Math.min(groupEnd, clipEnd);
+			return {
+				href,
+				text: textParts.join(""),
+				rect: {
+					x: r.x + visibleGroupStart - clipStart,
+					y: rect.y,
+					w: visibleGroupEnd - visibleGroupStart,
+					h: 1
+				},
+				cellX: point.cellX,
+				cellY: point.cellY,
+				rowIndex,
+				segmentIndex
+			};
+		}
+	}
+	return null;
+}
+
+//#endregion
+//#region src/vue/markdown/math-actions.ts
+function findMarkdownMathActionAt(rows, point, options) {
+	const r = options.screenRect;
+	if (r.w <= 0 || r.h <= 0) return null;
+	if (point.cellX < r.x || point.cellY < r.y || point.cellX >= r.x + r.w || point.cellY >= r.y + r.h) return null;
+	const clipStart = Math.max(0, Math.floor(options.clipStart));
+	const clipEnd = clipStart + r.w;
+	const firstRow = Math.max(0, Math.floor(options.rowOffset));
+	const lastRow = Math.min(rows.length, firstRow + r.h);
+	for (let rowIndex = firstRow; rowIndex < lastRow; rowIndex++) {
+		const row = rows[rowIndex];
+		if (!row) continue;
+		let logicalX = 0;
+		for (let segmentIndex = 0; segmentIndex < row.segments.length; segmentIndex++) {
+			const segment = row.segments[segmentIndex];
+			const segmentStart = logicalX;
+			const segmentEnd = logicalX + segment.cells;
+			logicalX = segmentEnd;
+			const math = segment.mathAction;
+			if (!math || segmentEnd <= clipStart || segmentStart >= clipEnd) continue;
+			const visibleStart = Math.max(segmentStart, clipStart);
+			const visibleEnd = Math.min(segmentEnd, clipEnd);
+			const rect = {
+				x: r.x + visibleStart - clipStart,
+				y: r.y + rowIndex - firstRow,
+				w: visibleEnd - visibleStart,
+				h: 1
+			};
+			if (point.cellX < rect.x || point.cellY < rect.y || point.cellX >= rect.x + rect.w || point.cellY >= rect.y + rect.h) continue;
+			return {
+				math,
+				rect,
+				cellX: point.cellX,
+				cellY: point.cellY,
+				rowIndex,
+				segmentIndex
+			};
+		}
+	}
+	return null;
+}
+
 //#endregion
 //#region src/vue/markdown/render.ts
 const mergedStyleCache = new WeakMap();
+const markdownImageDebugLog = createDebugLogger(isDebugEnabled());
+const markdownImageDebug = (...parts) => {
+	if (!isDebugEnabled()) return;
+	markdownImageDebugLog.render(`markdown image ${parts.join(" ")}`);
+};
 function mergeStyle(base, overlay) {
 	if (!overlay) return base;
 	let bucket = mergedStyleCache.get(base);
@@ -985,20 +1651,153 @@ function mergeStyle(base, overlay) {
 	bucket.set(overlay, merged);
 	return merged;
 }
+const activeMarkdownImageGraphics = new WeakMap();
+function markdownImageGraphicId(segment, identity) {
+	return `md-image:${stableTerminalGraphicNumericId(`${identity}:${segment.src}:${segment.displayWidth ?? 0}:${segment.displayHeight ?? 0}:${segment.base64 ?? ""}`)}`;
+}
+function rememberMarkdownImageGraphic(terminal, id, rect) {
+	let active = activeMarkdownImageGraphics.get(terminal);
+	if (!active) {
+		active = new Map();
+		activeMarkdownImageGraphics.set(terminal, active);
+	}
+	active.set(id, rect);
+}
+function clearTrackedMarkdownImageGraphic(terminal, id) {
+	activeMarkdownImageGraphics.get(terminal)?.delete(id);
+	try {
+		getTerminalGraphicsOutput(terminal)?.clear?.(id);
+	} catch {}
+}
+function clearStaleMarkdownImageGraphicsForRow(terminal, y, keepIds, keepVisibleIds) {
+	const active = activeMarkdownImageGraphics.get(terminal);
+	if (!active?.size) return;
+	for (const [id, rect] of active) {
+		const intersectsRow = keepVisibleIds ? y >= rect.y && y < rect.y + rect.h : rect.y === y;
+		if (!intersectsRow || keepIds.has(id) || keepVisibleIds?.has(id)) continue;
+		clearTrackedMarkdownImageGraphic(terminal, id);
+	}
+}
+function canAttemptMarkdownImageGraphic(terminal, segment) {
+	if (segment.kind !== "image" || !segment.base64) return false;
+	const output = getTerminalGraphicsOutput(terminal);
+	const protocol = output?.capabilities.preferredProtocol;
+	return Boolean(output?.capabilities.supported && isTerminalGraphicsProtocol(protocol));
+}
+function clearMarkdownImageGraphics(terminal, rect) {
+	const active = activeMarkdownImageGraphics.get(terminal);
+	if (!active?.size) return;
+	for (const [id, item] of active) {
+		if (rect && (item.x >= rect.x + rect.w || item.x + item.w <= rect.x || item.y >= rect.y + rect.h || item.y + item.h <= rect.y)) continue;
+		clearTrackedMarkdownImageGraphic(terminal, id);
+	}
+}
+function queueMarkdownImageGraphic(terminal, segment, identity, rect) {
+	if (segment.kind !== "image" || !segment.base64) return "unavailable";
+	const output = getTerminalGraphicsOutput(terminal);
+	const protocol = output?.capabilities.preferredProtocol;
+	if (!output?.capabilities.supported || !isTerminalGraphicsProtocol(protocol)) return "unavailable";
+	const width = Math.max(1, Math.floor(segment.displayWidth ?? rect.w));
+	const height = Math.max(1, Math.floor(segment.displayHeight ?? 1));
+	const id = markdownImageGraphicId(segment, identity);
+	const imageId = stableTerminalGraphicNumericId(`image:${id}`);
+	const placementId = stableTerminalGraphicNumericId(`placement:${id}`);
+	const sequence = protocol === "kitty" ? createKittyGraphicsSequence(segment.base64, {
+		imageId,
+		placementId,
+		columns: width,
+		rows: height,
+		zIndex: -1
+	}) : protocol === "iterm2" ? createIterm2InlineImageSequence(segment.base64, {
+		width,
+		height,
+		preserveAspectRatio: true,
+		doNotMoveCursor: true
+	}) : "";
+	if (!sequence) return "unavailable";
+	const clearSequence = protocol === "kitty" ? createKittyDeleteGraphicsSequence({
+		imageId,
+		placementId
+	}) : void 0;
+	const resizeSequence = protocol === "kitty" ? createKittyPlacementSequence({
+		imageId,
+		placementId,
+		columns: width,
+		rows: height
+	}) : void 0;
+	const accepted = output.queue({
+		id,
+		x: rect.x,
+		y: rect.y,
+		w: width,
+		h: height,
+		protocol,
+		sequence,
+		resizeSequence,
+		clearSequence,
+		fallbackText: segment.alt ?? "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, {
+		x: rect.x,
+		y: rect.y,
+		w: width,
+		h: height
+	});
+	return accepted ? "queued" : "rejected";
+}
+function collectVisibleMarkdownImageGraphicIds(rows, options) {
+	const keepIds = new Set();
+	if (options.w <= 0 || options.h <= 0) return keepIds;
+	const clipStart = Math.max(0, Math.floor(options.clipStart));
+	const clipEnd = clipStart + options.w;
+	const firstRow = Math.min(rows.length, Math.max(0, Math.floor(options.rowOffset)));
+	const lastRow = Math.min(rows.length, firstRow + Math.max(0, Math.floor(options.h)));
+	let scanStart = firstRow;
+	while (scanStart > 0 && (rows[scanStart]?.segments.length ?? 0) === 0) scanStart--;
+	for (let rowIndex = scanStart; rowIndex < lastRow; rowIndex++) {
+		const row = rows[rowIndex];
+		if (!row) continue;
+		let logicalX = 0;
+		for (const [segmentIndex, segment] of row.segments.entries()) {
+			const segmentStart = logicalX;
+			const segmentEnd = logicalX + segment.cells;
+			logicalX = segmentEnd;
+			if (!segment.graphic) continue;
+			if (segmentEnd <= clipStart || segmentStart >= clipEnd) continue;
+			if (Math.max(segmentStart, clipStart) !== segmentStart) continue;
+			const height = Math.max(1, Math.floor(segment.graphic.displayHeight ?? 1));
+			if (rowIndex + height <= firstRow || rowIndex >= lastRow) continue;
+			const rect = {
+				x: options.x + segmentStart - clipStart,
+				y: options.y + rowIndex - firstRow,
+				w: Math.max(1, Math.floor(segment.graphic.displayWidth ?? segment.cells)),
+				h: height
+			};
+			if (options.isGraphicCovered?.(rect)) continue;
+			keepIds.add(markdownImageGraphicId(segment.graphic, `${row.key}:${segmentIndex}`));
+		}
+	}
+	return keepIds;
+}
 function paintMarkdownVisualRow(terminal, row, options) {
 	const clipStart = Math.max(0, Math.floor(options.clipStart ?? 0));
 	const clipEnd = clipStart + options.w;
 	if (!row) {
-		if (options.clear !== false) terminal.write(spaces(options.w), {
-			x: options.x,
-			y: options.y,
-			style: options.baseStyle
-		});
+		if (options.clear !== false) {
+			terminal.write(spaces(options.w), {
+				x: options.x,
+				y: options.y,
+				style: options.baseStyle
+			});
+			clearStaleMarkdownImageGraphicsForRow(terminal, options.y, new Set(), options.keepGraphicIds);
+		}
 		return;
 	}
 	let logicalX = 0;
 	let used = 0;
-	for (const segment of row.segments) {
+	const queuedGraphics = new Set();
+	for (const [segmentIndex, segment] of row.segments.entries()) {
 		if (used >= options.w || !segment.text) {
 			logicalX += segment.cells;
 			continue;
@@ -1008,6 +1807,46 @@ function paintMarkdownVisualRow(terminal, row, options) {
 		logicalX += segment.cells;
 		if (segmentEnd <= clipStart || segmentStart >= clipEnd) continue;
 		const segmentStyle = mergeStyle(options.baseStyle, segment.style);
+		if (segment.graphic) {
+			const visibleStart = Math.max(segmentStart, clipStart);
+			const visibleEnd = Math.min(segmentEnd, clipEnd);
+			const visibleCells = visibleEnd - visibleStart;
+			if (visibleCells <= 0) continue;
+			const expectedUsed = visibleStart - clipStart;
+			if (expectedUsed > used) {
+				const pad = Math.min(expectedUsed - used, options.w - used);
+				terminal.write(spaces(pad), {
+					x: options.x + used,
+					y: options.y,
+					style: options.baseStyle
+				});
+				used += pad;
+			}
+			const cellX = options.x + used;
+			const graphicRect = {
+				x: cellX,
+				y: options.y,
+				w: Math.max(1, Math.floor(segment.graphic.displayWidth ?? visibleCells)),
+				h: Math.max(1, Math.floor(segment.graphic.displayHeight ?? 1))
+			};
+			const graphicCovered = options.isGraphicCovered?.(graphicRect) === true;
+			const queueResult = !graphicCovered && visibleStart === segmentStart && visibleCells > 0 && queueMarkdownImageGraphic(terminal, segment.graphic, `${row.key}:${segmentIndex}`, {
+				x: cellX,
+				y: options.y,
+				w: visibleCells
+			});
+			const graphicAvailable = queueResult || canAttemptMarkdownImageGraphic(terminal, segment.graphic);
+			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), {
+				x: cellX,
+				y: options.y,
+				style: suppressFallback ? options.baseStyle : segmentStyle
+			});
+			used += visibleCells;
+			continue;
+		}
 		let pieceStart = segmentStart;
 		forEachTextCellSegment(segment.text, (piece) => {
 			if (used >= options.w) return false;
@@ -1037,7 +1876,8 @@ function paintMarkdownVisualRow(terminal, row, options) {
 			}
 			const pad = Math.min(visibleEnd - visibleStart, options.w - used);
 			if (pad > 0) {
-				terminal.write(spaces(pad), {
+				const fallback = sliceByCellsRange(piece.text, visibleStart - (pieceStart - piece.cells), visibleEnd - (pieceStart - piece.cells));
+				terminal.write(fallback || spaces(pad), {
 					x: options.x + used,
 					y: options.y,
 					style: segmentStyle
@@ -1046,6 +1886,7 @@ function paintMarkdownVisualRow(terminal, row, options) {
 			}
 		});
 	}
+	clearStaleMarkdownImageGraphicsForRow(terminal, options.y, queuedGraphics, options.keepGraphicIds);
 	if (used < options.w && options.clear !== false) terminal.write(spaces(options.w - used), {
 		x: options.x + used,
 		y: options.y,
@@ -1076,7 +1917,7 @@ function markdownRowSignature(row) {
 	return [
 		row.key,
 		row.plainText,
-		row.segments.map((segment) => `${segment.text}\u0001${segment.cells}\u0001${markdownStyleSignature(segment.style)}`).join("")
+		row.segments.map((segment) => `${segment.text}\u0001${segment.cells}\u0001${markdownStyleSignature(segment.style)}\u0001${segment.graphic?.src ?? ""}\u0001${segment.graphic?.base64 ?? ""}\u0001${segment.fallbackText ?? ""}`).join("")
 	].join("");
 }
 function getWheelScrollInput(e) {
@@ -1099,6 +1940,10 @@ function getWheelScrollInput(e) {
 		mode: "auto"
 	};
 }
+function rowGraphicSignature(row) {
+	if (!row) return "";
+	return row.segments.map((segment) => segment.graphic ? `${segment.graphic.kind}\u0001${segment.graphic.src}\u0001${segment.graphic.base64 ?? ""}` : "").join("");
+}
 const TVirtualMarkdown = defineComponent({
 	name: "TVirtualMarkdown",
 	props: {
@@ -1161,15 +2006,58 @@ const TVirtualMarkdown = defineComponent({
 		theme: {
 			type: Object,
 			default: void 0
+		},
+		imageRenderer: {
+			type: Function,
+			default: void 0
+		},
+		imageMinWidth: {
+			type: Number,
+			default: void 0
+		},
+		imageMaxWidth: {
+			type: Number,
+			default: void 0
+		},
+		imageMinHeight: {
+			type: Number,
+			default: void 0
+		},
+		imageMaxHeight: {
+			type: Number,
+			default: void 0
+		},
+		imagePreserveAspectRatio: {
+			type: Boolean,
+			default: true
+		},
+		imageActions: {
+			type: Boolean,
+			default: false
+		},
+		mathActions: {
+			type: Boolean,
+			default: false
+		},
+		linkActions: {
+			type: Boolean,
+			default: false
+		},
+		imageOcclusionRects: {
+			type: Array,
+			default: void 0
 		}
 	},
-	emits: [
-		"update:scrollTop",
-		"scroll",
-		"focus",
-		"blur",
-		"keydown"
-	],
+	emits: {
+		"update:scrollTop": (_value) => true,
+		scroll: (_value) => true,
+		focus: () => true,
+		blur: () => true,
+		keydown: (_event) => true,
+		imageAction: (_payload) => true,
+		mathAction: (_payload) => true,
+		linkAction: (_payload) => true
+	},
 	setup(props, { emit }) {
 		const instance = getCurrentInstance();
 		const { terminal, defaultStyle, events, scheduler, selection, widthProvider } = useTerminal();
@@ -1190,6 +2078,10 @@ const TVirtualMarkdown = defineComponent({
 			streaming: props.streaming,
 			customHtmlTags: props.customHtmlTags
 		})));
+		const graphicsOutputVersion = shallowRef(getTerminalGraphicsOutputVersion(terminal));
+		const unsubscribeGraphicsOutput = subscribeTerminalGraphicsOutput(terminal, () => {
+			graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal);
+		});
 		watch(() => `${props.streaming ? 1 : 0}:${(props.customHtmlTags ?? []).join("\0")}`, () => {
 			parser.value = markRaw(createTuiMarkdownParser({
 				streaming: props.streaming,
@@ -1199,10 +2091,19 @@ const TVirtualMarkdown = defineComponent({
 		function rebuildRows() {
 			const prevScrollTop = internalScrollTop.value;
 			const prevVisibleRows = visibleRowSignatures(rows.value, prevScrollTop);
+			const prevVisibleGraphics = visibleRowGraphics(rows.value, prevScrollTop);
 			const nextLayout = withTextWidthProvider(widthProvider, () => {
 				const blocks = props.blocks ?? buildMarkdownBlocks(props.content, parser.value, {
 					final: props.final,
-					theme: props.theme
+					theme: props.theme,
+					imageResolver: props.imageRenderer,
+					imageSize: {
+						minWidth: props.imageMinWidth,
+						maxWidth: props.imageMaxWidth,
+						minHeight: props.imageMinHeight,
+						maxHeight: props.imageMaxHeight,
+						preserveAspectRatio: props.imagePreserveAspectRatio
+					}
 				}).blocks;
 				return layoutMarkdownBlocksCached(blocks, props.w, layoutCache);
 			});
@@ -1212,7 +2113,8 @@ const TVirtualMarkdown = defineComponent({
 			reconcileScrollTop();
 			const nextScrollTop = internalScrollTop.value;
 			const nextVisibleRows = visibleRowSignatures(nextRows, nextScrollTop);
-			const visibleChanged = prevVisibleRows.length !== nextVisibleRows.length || prevVisibleRows.some((row, index) => row !== nextVisibleRows[index]);
+			const nextVisibleGraphics = visibleRowGraphics(nextRows, nextScrollTop);
+			const visibleChanged = prevVisibleRows.length !== nextVisibleRows.length || prevVisibleRows.some((row, index) => row !== nextVisibleRows[index]) || prevVisibleGraphics.some((row, index) => row !== nextVisibleGraphics[index]);
 			if (!builtOnce || prevScrollTop !== nextScrollTop || visibleChanged) {
 				documentVersion.value++;
 				selection.refresh();
@@ -1281,6 +2183,15 @@ const TVirtualMarkdown = defineComponent({
 			for (let index = start; index < end; index++) out.push(markdownRowSignature(sourceRows[index]));
 			return out;
 		}
+		function visibleRowGraphics(sourceRows, scrollTop) {
+			const clip = normalizedRect();
+			const { y: clipY } = clipOffsets();
+			const start = Math.max(0, scrollTop + clipY);
+			const end = Math.max(start, start + clip.h);
+			const out = [];
+			for (let index = start; index < end; index++) out.push(rowGraphicSignature(sourceRows[index]));
+			return out;
+		}
 		function hasControlledScrollTop() {
 			return Object.prototype.hasOwnProperty.call(instance?.vnode.props ?? {}, "scrollTop");
 		}
@@ -1329,7 +2240,13 @@ const TVirtualMarkdown = defineComponent({
 			() => props.w,
 			() => parser.value,
 			() => props.final,
-			() => markdownThemeSignature(props.theme)
+			() => props.imageRenderer,
+			() => markdownThemeSignature(props.theme),
+			() => props.imageMinWidth,
+			() => props.imageMaxWidth,
+			() => props.imageMinHeight,
+			() => props.imageMaxHeight,
+			() => props.imagePreserveAspectRatio
 		], () => {
 			scheduleRebuild();
 		}, { immediate: true });
@@ -1462,7 +2379,45 @@ const TVirtualMarkdown = defineComponent({
 			selectable: props.selectable,
 			selectionScrollBy: scrollSelectionBy,
 			handlers: {
-				click: (_event) => {},
+				click: (event) => {
+					const r = normalizedRect();
+					const { x: clipX, y: clipY } = clipOffsets();
+					const hitOptions = {
+						screenRect: r,
+						rowOffset: internalScrollTop.value + clipY,
+						clipStart: clipX
+					};
+					if (props.imageActions) {
+						const hit = findMarkdownImageActionAt(rows.value, {
+							cellX: event.cellX,
+							cellY: event.cellY
+						}, hitOptions);
+						if (hit) {
+							event.preventDefault();
+							emit("imageAction", hit);
+							return;
+						}
+					}
+					if (props.mathActions) {
+						const math = findMarkdownMathActionAt(rows.value, {
+							cellX: event.cellX,
+							cellY: event.cellY
+						}, hitOptions);
+						if (math) {
+							event.preventDefault();
+							emit("mathAction", math);
+							return;
+						}
+					}
+					if (!props.linkActions) return;
+					const link = findMarkdownLinkActionAt(rows.value, {
+						cellX: event.cellX,
+						cellY: event.cellY
+					}, hitOptions);
+					if (!link) return;
+					event.preventDefault();
+					emit("linkAction", link);
+				},
 				wheel: (event) => {
 					const { deltaY, mode } = getWheelScrollInput(event);
 					if (!deltaY) return;
@@ -1493,6 +2448,8 @@ const TVirtualMarkdown = defineComponent({
 		onBeforeUnmount(() => {
 			alive = false;
 			rebuildVersion++;
+			unsubscribeGraphicsOutput();
+			clearMarkdownImageGraphics(terminal, fullRect.value);
 		});
 		useRenderNode(() => ({
 			zIndex: props.zIndex,
@@ -1509,7 +2466,9 @@ const TVirtualMarkdown = defineComponent({
 				internalScrollTop.value,
 				props.style,
 				defaultStyle.value,
-				documentVersion.value
+				documentVersion.value,
+				graphicsOutputVersion.value,
+				props.imageOcclusionRects
 			],
 			paint: (dirtyRows) => {
 				withTextWidthProvider(widthProvider, () => {
@@ -1518,6 +2477,18 @@ const TVirtualMarkdown = defineComponent({
 					if (r.w <= 0 || r.h <= 0) return;
 					const baseStyle = props.style ?? defaultStyle.value;
 					const { x: clipX, y: clipY } = clipOffsets();
+					const isGraphicCovered = (rect) => {
+						return props.imageOcclusionRects?.some((item) => intersectRect(rect, item)) === true;
+					};
+					const keepGraphicIds = collectVisibleMarkdownImageGraphicIds(rows.value, {
+						x: r.x,
+						y: r.y,
+						w: r.w,
+						h: r.h,
+						rowOffset: internalScrollTop.value + clipY,
+						clipStart: clipX,
+						isGraphicCovered
+					});
 					const paintRow = (y) => {
 						if (y < r.y || y >= r.y + r.h) return;
 						const visualIndex = internalScrollTop.value + clipY + (y - r.y);
@@ -1527,7 +2498,9 @@ const TVirtualMarkdown = defineComponent({
 							w: r.w,
 							clipStart: clipX,
 							baseStyle,
-							clear: true
+							clear: true,
+							keepGraphicIds,
+							isGraphicCovered
 						});
 					};
 					if (dirtyRows?.length) {
@@ -1660,4 +2633,4 @@ function createMarkdownBlockSource(options) {
 }
 
 //#endregion
-export { TVirtualMarkdown, buildMarkdownBlocks, buildMarkdownVisualRows, createMarkdownBlockSource, createTuiMarkdownParser, isSafeMarkdownLink, layoutMarkdownBlocks, markdownThemeSignature, paintMarkdownVisualRow };
+export { TVirtualMarkdown, buildMarkdownBlocks, buildMarkdownVisualRows, clearMarkdownImageGraphics, collectVisibleMarkdownImageGraphicIds, createMarkdownBlockSource, createTuiMarkdownParser, findMarkdownImageActionAt, findMarkdownLinkActionAt, findMarkdownMathActionAt, isSafeMarkdownLink, layoutMarkdownBlocks, markdownThemeSignature, paintMarkdownVisualRow };