@simon_he/vue-tui 1.1.4 → 1.1.5

package/dist/{mermaid-uEfRItDe.js → mermaid-N3kGTHFy.js}

@@ -1,128 +1,9 @@
 import { EventZIndexContextKey, intersectRect, padEndByCells$1 as padEndByCells, repeatChar, sanitizeInlineText, sanitizeTextBlock, sliceByCells, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility, withTextWidthProvider } from "./rect-JzWMJxxc.js";
 import { TMermaidText$1 as TMermaidText, isSimpleMermaidFlowchartSource, markMermaidRenderErrorFatal, tMermaidTextProps } from "./TMermaidText-wLnMMvVS.js";
-import { createTerminalGraphicPngSequence, getTerminalGraphicsOutput, getTerminalGraphicsOutputVersion, stableTerminalGraphicNumericId, subscribeTerminalGraphicsOutput } from "./terminal-graphics-DWZrl3oh.js";
+import { createTerminalGraphicPngSequence, getTerminalGraphicsOutput, getTerminalGraphicsOutputVersion, stableTerminalGraphicNumericId, subscribeTerminalGraphicsOutput } from "./terminal-graphics-2FTRg9x3.js";
 import { resolveMarkdownMathColor } from "./math-image-BZhmfUeu.js";
-import { computed, defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, shallowRef, watch } from "vue";
+import { computed, defineComponent, getCurrentInstance, h, inject, markRaw, onBeforeUnmount, shallowRef, watch } from "vue";
 
-//#region src/vue/mermaid/beautiful-mermaid.ts
-const BEAUTIFUL_MERMAID_INSTALL_HINT = "Install beautiful-mermaid and use TMermaidText from @simon_he/vue-tui/mermaid or @simon_he/vue-tui/agent/mermaid, or pass a custom renderer prop.";
-const MISSING_BEAUTIFUL_MERMAID_ERROR_CODE = "VUE_TUI_MISSING_BEAUTIFUL_MERMAID";
-const INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE = "VUE_TUI_INVALID_BEAUTIFUL_MERMAID_EXPORT";
-let cachedBeautifulMermaid = null;
-function functionValue(value) {
-	return typeof value === "function" ? value : null;
-}
-function functionProp(target, key) {
-	if (!target || typeof target !== "object") return null;
-	if (!(key in target)) return null;
-	const value = target[key];
-	return typeof value === "function" ? value : null;
-}
-function errorMessage(error) {
-	return error instanceof Error ? error.message : String(error);
-}
-function codedError(message, code) {
-	const error = new Error(message);
-	error.code = code;
-	return error;
-}
-function missingBeautifulMermaidError(error) {
-	if (error && typeof error === "object" && errorCode(error) === MISSING_BEAUTIFUL_MERMAID_ERROR_CODE) return markMermaidRenderErrorFatal(error);
-	const detail = errorMessage(error);
-	return markMermaidRenderErrorFatal(codedError(`${BEAUTIFUL_MERMAID_INSTALL_HINT} (${detail})`, MISSING_BEAUTIFUL_MERMAID_ERROR_CODE));
-}
-function errorCode(error) {
-	if (!error || typeof error !== "object") return "";
-	const value = error.code;
-	return typeof value === "string" ? value : "";
-}
-function errorCause(error) {
-	if (!error || typeof error !== "object") return void 0;
-	return error.cause;
-}
-function isMissingBeautifulMermaid(error) {
-	return isMissingBeautifulMermaidWithSeen(error, new WeakSet());
-}
-function isMissingBeautifulMermaidWithSeen(error, seen) {
-	if (error && typeof error === "object") {
-		if (seen.has(error)) return false;
-		seen.add(error);
-	}
-	const message = errorMessage(error);
-	const code = errorCode(error);
-	if (code === MISSING_BEAUTIFUL_MERMAID_ERROR_CODE) return true;
-	const mentionsBeautifulMermaid = /Cannot find package ['"]beautiful-mermaid['"]/.test(message) || /Cannot find module ['"]beautiful-mermaid['"]/.test(message) || /Cannot resolve module ['"]beautiful-mermaid['"]/.test(message) || /Can't resolve ['"]beautiful-mermaid['"]/.test(message) || /Failed to resolve module specifier ['"]beautiful-mermaid['"]/.test(message) || /Failed to resolve import ['"]beautiful-mermaid['"]/.test(message) || /Could not resolve ['"]beautiful-mermaid['"]/.test(message);
-	if (mentionsBeautifulMermaid && (code === "" || code === "ERR_MODULE_NOT_FOUND" || code === "MODULE_NOT_FOUND" || code === "UNRESOLVED_IMPORT")) return true;
-	const cause = errorCause(error);
-	return cause !== void 0 && isMissingBeautifulMermaidWithSeen(cause, seen);
-}
-function resolveBeautifulMermaidRenderer(mod) {
-	const renderer = functionProp(mod, "renderMermaidASCII") ?? functionProp(mod, "renderMermaidAscii") ?? functionValue(mod.default) ?? functionProp(mod.default, "renderMermaidASCII") ?? functionProp(mod.default, "renderMermaidAscii");
-	if (!renderer) throw markMermaidRenderErrorFatal(codedError("beautiful-mermaid is installed but does not export renderMermaidASCII.", INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE));
-	return renderer;
-}
-function hasErrorCode(error, code, seen = new WeakSet()) {
-	if (!error || typeof error !== "object") return false;
-	if (seen.has(error)) return false;
-	seen.add(error);
-	if (errorCode(error) === code) return true;
-	const cause = errorCause(error);
-	return cause !== void 0 && hasErrorCode(cause, code, seen);
-}
-function isBeautifulMermaidExportError(error) {
-	return hasErrorCode(error, INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE);
-}
-const isTransientBeautifulMermaidRenderError = (error) => {
-	if (isMissingBeautifulMermaid(error)) return false;
-	if (isBeautifulMermaidExportError(error)) return false;
-	return true;
-};
-async function loadBeautifulMermaid() {
-	if (!cachedBeautifulMermaid) cachedBeautifulMermaid = import("beautiful-mermaid").then((mod) => mod).catch((error) => {
-		cachedBeautifulMermaid = null;
-		if (isMissingBeautifulMermaid(error)) throw missingBeautifulMermaidError(error);
-		throw markMermaidRenderErrorFatal(error);
-	});
-	return cachedBeautifulMermaid;
-}
-const beautifulMermaidRenderer = async (code, options) => {
-	try {
-		const mod = await loadBeautifulMermaid();
-		const renderer = resolveBeautifulMermaidRenderer(mod);
-		return await renderer(code, options);
-	} catch (error) {
-		if (isMissingBeautifulMermaid(error)) throw missingBeautifulMermaidError(error);
-		throw error;
-	}
-};
-function createBeautifulMermaidRenderer() {
-	return beautifulMermaidRenderer;
-}
-const TMermaidText$1 = defineComponent({
-	name: "TMermaidText",
-	inheritAttrs: false,
-	props: tMermaidTextProps,
-	emits: { copy: (_payload) => true },
-	setup(props, { attrs, emit, slots }) {
-		return () => {
-			const renderer = props.renderer ?? beautifulMermaidRenderer;
-			const shouldRenderSource = props.shouldRenderSource ?? isSimpleMermaidFlowchartSource;
-			return h(TMermaidText, {
-				...attrs,
-				...props,
-				renderer,
-				shouldRenderSource,
-				isTransientError: props.isTransientError ?? isTransientBeautifulMermaidRenderError,
-				onCopy: (payload) => emit("copy", payload)
-			}, slots);
-		};
-	}
-});
-const TMermaid = TMermaidText$1;
-const TBeautifulMermaidText = TMermaidText$1;
-const TBeautifulMermaid = TMermaidText$1;
-
-//#endregion
 //#region src/vue/mermaid/mermaid-image.ts
 const DEFAULT_MERMAID_IMAGE_OPTIONS = Object.freeze({
 	cellWidthPx: 8,
@@ -323,6 +204,139 @@ function svgRenderFunction(mod) {
 	for (const candidate of candidates) if (typeof candidate === "function") return candidate;
 	return null;
 }
+/**
+* @resvg/resvg-js (usvg) does not support CSS custom properties (`var()`) or
+* `color-mix()`. beautiful-mermaid 1.x emits both, so feeding the raw SVG to
+* resvg renders every shape black. This resolver inlines all `var(--x)` /
+* `color-mix(in srgb, ...)` color expressions into concrete hex values before
+* rasterization. Exported for tests.
+*/
+function resolveMermaidSvgForResvg(svg, fallbackBg, fallbackFg) {
+	const { bg, fg } = extractSvgRootStyleColors(svg, fallbackBg, fallbackFg);
+	const variables = extractSvgCssVariables(svg);
+	const root = {
+		bg,
+		fg
+	};
+	let resolved = svg;
+	let guard = 0;
+	while ((resolved.includes("var(") || resolved.includes("color-mix(")) && guard++ < 500) {
+		const varIndex = resolved.lastIndexOf("var(");
+		const mixIndex = resolved.lastIndexOf("color-mix(");
+		const at = Math.max(varIndex, mixIndex);
+		if (at < 0) break;
+		const open = resolved.indexOf("(", at);
+		const close = findMatchingSvgParen(resolved, open);
+		if (open < 0 || close < 0) break;
+		const expr = resolved.slice(at, close + 1);
+		const color = resolveSvgColorExpr(expr, root, variables);
+		resolved = resolved.slice(0, at) + color + resolved.slice(close + 1);
+	}
+	return stripSvgStyleBlocks(resolved);
+}
+function extractSvgRootStyleColors(svg, fallbackBg, fallbackFg) {
+	let bg = fallbackBg;
+	let fg = fallbackFg;
+	const styleMatch = /<svg\b[^>]*\bstyle="([^"]*)"/i.exec(svg);
+	if (styleMatch?.[1]) {
+		const bgMatch = /(?:^|;)\s*--bg\s*:\s*([^;]+)/i.exec(styleMatch[1]);
+		const fgMatch = /(?:^|;)\s*--fg\s*:\s*([^;]+)/i.exec(styleMatch[1]);
+		if (bgMatch?.[1]) bg = bgMatch[1].trim();
+		if (fgMatch?.[1]) fg = fgMatch[1].trim();
+	}
+	return {
+		bg,
+		fg
+	};
+}
+function extractSvgCssVariables(svg) {
+	const map = new Map();
+	const styleMatch = /<style[^>]*>([\s\S]*?)<\/style>/i.exec(svg);
+	if (!styleMatch?.[1]) return map;
+	const declaration = /(--[A-Za-z0-9_-]+)\s*:\s*([^;{}]+);/g;
+	let match;
+	while ((match = declaration.exec(styleMatch[1])) !== null) map.set(match[1], match[2].trim());
+	return map;
+}
+function stripSvgStyleBlocks(svg) {
+	return svg.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
+}
+function findMatchingSvgParen(input, openIndex) {
+	let depth = 0;
+	for (let i = openIndex; i < input.length; i++) {
+		const ch = input[i];
+		if (ch === "(") depth++;
+		else if (ch === ")") {
+			depth--;
+			if (depth === 0) return i;
+		}
+	}
+	return -1;
+}
+function findTopLevelSvgComma(input) {
+	let depth = 0;
+	for (let i = 0; i < input.length; i++) {
+		const ch = input[i];
+		if (ch === "(") depth++;
+		else if (ch === ")") depth--;
+		else if (ch === "," && depth === 0) return i;
+	}
+	return -1;
+}
+function normalizeHexColor(value) {
+	const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value.trim());
+	if (!match) return null;
+	let hex = match[1];
+	if (hex.length === 3) hex = hex.split("").map((ch) => ch + ch).join("");
+	return `#${hex.toLowerCase()}`;
+}
+function mixSrgbColors(aHex, bHex, percent) {
+	const a = parseHexRgb(aHex);
+	const b = parseHexRgb(bHex);
+	const p = Math.max(0, Math.min(100, percent)) / 100;
+	const mix = (x, y) => Math.round(x * p + y * (1 - p));
+	const toHex = (value) => value.toString(16).padStart(2, "0");
+	return `#${toHex(mix(a[0], b[0]))}${toHex(mix(a[1], b[1]))}${toHex(mix(a[2], b[2]))}`;
+}
+function parseHexRgb(hex) {
+	return [
+		parseInt(hex.slice(1, 3), 16),
+		parseInt(hex.slice(3, 5), 16),
+		parseInt(hex.slice(5, 7), 16)
+	];
+}
+function resolveSvgColorExpr(expr, root, variables) {
+	const value = expr.trim();
+	if (value.startsWith("var(")) {
+		const close = findMatchingSvgParen(value, 3);
+		if (close < 0) return value;
+		const inner = value.slice(4, close).trim();
+		const comma = findTopLevelSvgComma(inner);
+		const name = (comma < 0 ? inner : inner.slice(0, comma)).trim();
+		const fallback = comma < 0 ? "" : inner.slice(comma + 1).trim();
+		const direct = name === "--fg" ? root.fg : name === "--bg" ? root.bg : variables.get(name);
+		if (direct != null) return resolveSvgColorExpr(direct, root, variables);
+		if (fallback) return resolveSvgColorExpr(fallback, root, variables);
+		return value;
+	}
+	if (value.startsWith("color-mix(")) {
+		const close = findMatchingSvgParen(value, 9);
+		if (close < 0) return value;
+		const inner = value.slice(10, close).trim();
+		const afterMethod = inner.replace(/^in\s+srgb\s*,\s*/i, "");
+		const comma = findTopLevelSvgComma(afterMethod);
+		if (comma < 0) return value;
+		const left = afterMethod.slice(0, comma).trim();
+		const right = afterMethod.slice(comma + 1).trim();
+		const leftMatch = /^([^%\s]+)\s+([\d.]+)%$/.exec(left) ?? /^([\d.]+)%\s+([^%\s]+)$/.exec(left);
+		if (!leftMatch) return value;
+		const a = normalizeHexColor(resolveSvgColorExpr(leftMatch[1], root, variables));
+		const b = normalizeHexColor(resolveSvgColorExpr(right, root, variables));
+		if (!a || !b) return value;
+		return mixSrgbColors(a, b, Number(leftMatch[2]));
+	}
+	return normalizeHexColor(value) ?? value;
+}
 function loadBuiltinMermaidRasterizer() {
 	if (!builtinRasterizerLoad) builtinRasterizerLoad = (async () => {
 		try {
@@ -339,7 +353,8 @@ function loadBuiltinMermaidRasterizer() {
 				});
 				const svgText = String(svg ?? "");
 				if (!svgText.includes("<svg")) return null;
-				const rendered = new Resvg(svgText, { background: "rgba(0,0,0,0)" }).render();
+				const resolvedSvg = resolveMermaidSvgForResvg(svgText, options.bg, options.fg);
+				const rendered = new Resvg(resolvedSvg, { background: "rgba(0,0,0,0)" }).render();
 				const naturalWidth = positiveInt(rendered?.width);
 				const naturalHeight = positiveInt(rendered?.height);
 				const png = typeof rendered?.asPng === "function" ? rendered.asPng() : void 0;
@@ -514,6 +529,18 @@ const tMermaidImageProps = {
 		type: Number,
 		default: void 0
 	},
+	textRenderer: {
+		type: Function,
+		default: void 0
+	},
+	shouldRenderSource: {
+		type: Function,
+		default: void 0
+	},
+	textOptions: {
+		type: Object,
+		default: void 0
+	},
 	box: {
 		type: Boolean,
 		default: true
@@ -557,6 +584,26 @@ const tMermaidImageProps = {
 	ascii: {
 		type: Boolean,
 		default: false
+	},
+	zoomOnWheel: {
+		type: Boolean,
+		default: true
+	},
+	zoomModifier: {
+		type: String,
+		default: "metaCtrl"
+	},
+	minZoom: {
+		type: Number,
+		default: 1
+	},
+	maxZoom: {
+		type: Number,
+		default: 6
+	},
+	zoomSensitivity: {
+		type: Number,
+		default: .002
 	}
 };
 const TMermaidImage = defineComponent({
@@ -571,8 +618,16 @@ const TMermaidImage = defineComponent({
 		const { visible, rootProps } = useVisibility();
 		const parentEventZ = inject(EventZIndexContextKey, computed(() => 0));
 		const imageCells = shallowRef(null);
+		const textSnapshot = shallowRef(null);
+		const zoomScale = shallowRef(1);
+		const panX = shallowRef(0);
+		const panY = shallowRef(0);
 		const documentVersion = shallowRef(0);
 		const copied = shallowRef(false);
+		let dragState = null;
+		let dragMoved = false;
+		let lastDragAt = 0;
+		const DRAG_CLICK_SUPPRESS_MS = 250;
 		let builtOnce = false;
 		let renderVersion = 0;
 		let alive = true;
@@ -581,6 +636,7 @@ const TMermaidImage = defineComponent({
 		let copiedTimer = null;
 		let copyRequestVersion = 0;
 		let activeGraphicId = null;
+		let activeImageSignature = "";
 		const source = computed(() => props.code ?? props.content ?? "");
 		const waitingForStreamingSourceToFinish = computed(() => props.streaming && !props.final);
 		const graphicsOutputVersion = shallowRef(getTerminalGraphicsOutputVersion(terminal));
@@ -635,6 +691,73 @@ const TMermaidImage = defineComponent({
 				graphicsOutput.value?.clear?.(id);
 			} catch {}
 		}
+		function clampZoom(zoom) {
+			const min = Number.isFinite(Number(props.minZoom)) ? Math.max(.05, Number(props.minZoom)) : 1;
+			const max = Number.isFinite(Number(props.maxZoom)) ? Math.max(min, Number(props.maxZoom)) : Math.max(min, 6);
+			return Math.min(max, Math.max(min, zoom));
+		}
+		function zoomSensitivity() {
+			const value = Number(props.zoomSensitivity);
+			return Number.isFinite(value) && value > 0 ? value : .002;
+		}
+		/**
+		* Wheel delta -> multiplicative zoom factor. Discrete notches (CLI wheel
+		* reporting and browser line-mode deltas) map to one step each; trackpad
+		* pixel deltas use a continuous exponential so small movements stay smooth.
+		*/
+		function wheelZoomFactor(deltaY, deltaMode) {
+			const sign = deltaY > 0 ? -1 : 1;
+			const sensitivity = zoomSensitivity();
+			const abs = Math.abs(deltaY);
+			const mode = deltaMode ?? 0;
+			const isNotch = mode === 1 || abs > 0 && abs <= 3 && Number.isInteger(deltaY);
+			const magnitude = isNotch ? 100 : abs;
+			return Math.exp(sign * magnitude * sensitivity);
+		}
+		function resetZoomState() {
+			if (zoomScale.value === 1 && panX.value === 0 && panY.value === 0) return;
+			zoomScale.value = 1;
+			panX.value = 0;
+			panY.value = 0;
+			dragState = null;
+		}
+		function hasZoomModifier(event) {
+			const modifier = props.zoomModifier ?? "metaCtrl";
+			if (modifier === "none") return true;
+			if (modifier === "meta") return event.metaKey === true;
+			if (modifier === "ctrl") return event.ctrlKey === true;
+			return event.ctrlKey === true || event.metaKey === true;
+		}
+		/**
+		* Clamp the pan so the zoomed image always covers the container area
+		* (no empty gaps, no over-scroll beyond the image edges).
+		*/
+		function clampPan() {
+			const inner = innerRectFrom(fullRect.value);
+			const fit = displayFit.value;
+			if (!fit || inner.w <= 0 || inner.h <= 0) return;
+			const zoom = clampZoom(zoomScale.value);
+			const fullW = fit.displayW * zoom;
+			const fullH = fit.displayH * zoom;
+			const fitOriginX = inner.x + (inner.w > fit.displayW ? Math.floor((inner.w - fit.displayW) / 2) : 0);
+			let nextX = panX.value;
+			let nextY = panY.value;
+			if (fullW <= inner.w) nextX = 0;
+			else nextX = Math.min(inner.x - fitOriginX, Math.max(inner.x + inner.w - fullW - fitOriginX, nextX));
+			if (fullH <= inner.h) nextY = 0;
+			else nextY = Math.min(0, Math.max(inner.h - fullH, nextY));
+			if (nextX !== panX.value) panX.value = nextX;
+			if (nextY !== panY.value) panY.value = nextY;
+		}
+		/** Set the current image, resetting wheel zoom whenever the PNG changes. */
+		function setImageCells(cells) {
+			const signature = cells ? cells.base64 : "";
+			if (signature !== activeImageSignature) {
+				activeImageSignature = signature;
+				resetZoomState();
+			}
+			imageCells.value = cells;
+		}
 		const hasBox = computed(() => props.box !== false);
 		const normalizedWidth = computed(() => {
 			const width = Math.floor(Number(props.w));
@@ -643,6 +766,11 @@ const TMermaidImage = defineComponent({
 		const reservesBoxRows = computed(() => hasBox.value && normalizedWidth.value >= 2);
 		const boxChars = computed(() => props.ascii ? ASCII_MERMAID_IMAGE_BOX_CHARS : UNICODE_MERMAID_IMAGE_BOX_CHARS);
 		const sourceLines = computed(() => splitRenderedOutput(source.value));
+		const displayLines = computed(() => {
+			const snapshot = textSnapshot.value;
+			if (snapshot && snapshot.source === source.value && hasVisibleTextOutput(snapshot.lines)) return snapshot.lines;
+			return sourceLines.value;
+		});
 		const currentStyle = computed(() => props.style ?? defaultStyle.value);
 		const innerWidth = computed(() => {
 			const w = normalizedWidth.value;
@@ -664,7 +792,7 @@ const TMermaidImage = defineComponent({
 		});
 		const contentHeight = computed(() => {
 			if (!autoHeight.value) return fixedInnerHeight.value;
-			return displayFit.value?.displayH ?? Math.max(1, sourceLines.value.length);
+			return displayFit.value?.displayH ?? Math.max(1, displayLines.value.length);
 		});
 		const fullHeight = computed(() => {
 			if (props.h != null) {
@@ -717,6 +845,53 @@ const TMermaidImage = defineComponent({
 				padding: props.padding
 			});
 		}
+		function hasVisibleTextOutput(lines) {
+			return lines.some((line) => line.trim().length > 0);
+		}
+		function resolveTextOptions() {
+			const base = props.textOptions ?? {};
+			return {
+				...base,
+				useAscii: props.ascii,
+				colorMode: "none"
+			};
+		}
+		function textRenderSignature(code) {
+			return [
+				code,
+				props.ascii ? "a" : "",
+				JSON.stringify(props.textOptions ?? null),
+				props.textRenderer != null ? "r" : "",
+				props.shouldRenderSource != null ? "g" : ""
+			].join("");
+		}
+		async function renderTextWithTimeout(renderer, code, options) {
+			const timeoutMs = normalizeNonNegativeInt(props.renderTimeoutMs, 0);
+			if (timeoutMs <= 0) return await renderer(code, options);
+			let timer = null;
+			try {
+				return await Promise.race([Promise.resolve().then(() => renderer(code, options)), new Promise((_resolve, reject) => {
+					timer = setTimeout(() => reject(new Error("Mermaid text render timeout")), timeoutMs);
+				})]);
+			} finally {
+				if (timer != null) clearTimeout(timer);
+			}
+		}
+		async function runCustomRasterizer(code, options) {
+			const renderer = props.renderer;
+			if (!renderer) return null;
+			const timeoutMs = normalizeNonNegativeInt(props.renderTimeoutMs, 0);
+			const run = () => renderer(code, options);
+			if (timeoutMs <= 0) return await run() ?? null;
+			let timer = null;
+			try {
+				return await Promise.race([run(), new Promise((resolve) => {
+					timer = setTimeout(() => resolve(null), timeoutMs);
+				})]) ?? null;
+			} finally {
+				if (timer != null) clearTimeout(timer);
+			}
+		}
 		function shouldSkipRenderForSize(code) {
 			const maxChars = normalizeNonNegativeInt(props.maxRenderSourceChars, DEFAULT_MERMAID_IMAGE_MAX_RENDER_SOURCE_CHARS);
 			if (maxChars > 0 && code.length > maxChars) return true;
@@ -736,48 +911,107 @@ const TMermaidImage = defineComponent({
 				if (timer != null) clearTimeout(timer);
 			}
 		}
-		async function renderImage(version) {
+		async function renderTextFallback(version) {
+			const code = source.value;
+			const renderer = props.textRenderer;
+			if (!renderer) return;
+			const guard = props.shouldRenderSource;
+			if (guard) {
+				let eligible = false;
+				try {
+					eligible = guard(code, {
+						final: props.final,
+						streaming: props.streaming
+					});
+				} catch {
+					eligible = false;
+				}
+				if (!eligible) return;
+			}
+			try {
+				const rendered = await renderTextWithTimeout(renderer, code, resolveTextOptions());
+				if (!alive || version !== renderVersion) return;
+				const lines = splitRenderedOutput(rendered);
+				if (!hasVisibleTextOutput(lines)) return;
+				textSnapshot.value = markRaw({
+					source: code,
+					signature: textRenderSignature(code),
+					lines: markRaw(lines)
+				});
+				bump();
+			} catch {}
+		}
+		/**
+		* Adaptive presentation state machine:
+		*
+		*   raw source
+		*     -> image (terminal supports Kitty/iTerm2 graphics and the PNG
+		*        rasterizer succeeds), else
+		*     -> ANSI text (a textRenderer is available and the source passes the
+		*        eligibility guard), else
+		*     -> raw source
+		*
+		* While any pipeline is pending the raw source stays visible (source-first).
+		*/
+		async function renderPresentation(version) {
 			const code = source.value;
 			if (!code.trim()) {
 				if (!alive || version !== renderVersion) return;
-				imageCells.value = null;
+				setImageCells(null);
+				textSnapshot.value = null;
 				bump();
 				return;
 			}
 			if (waitingForStreamingSourceToFinish.value || shouldSkipRenderForSize(code)) {
 				if (!alive || version !== renderVersion) return;
-				imageCells.value = null;
+				setImageCells(null);
+				textSnapshot.value = null;
 				bump();
 				return;
 			}
-			imageCells.value = null;
-			bump();
 			const protocol = graphicsProtocol.value;
-			if (!protocol) return;
 			const options = resolveImageOptions();
-			const cached = getCachedMermaidImage(code, options);
+			const cached = protocol && !props.renderer ? getCachedMermaidImage(code, options) : null;
 			if (cached) {
 				if (!alive || version !== renderVersion) return;
-				imageCells.value = cached;
+				setImageCells(cached);
+				textSnapshot.value = null;
 				bump();
 				return;
 			}
-			if (!isMermaidImageRendererReady()) {
-				loadMermaidImageRenderer().then((ready) => {
-					if (!alive || version !== renderVersion || !ready) return;
-					renderImage(version);
-				});
-				return;
+			const currentSignature = textRenderSignature(code);
+			const keepText = textSnapshot.value != null && textSnapshot.value.source === code && textSnapshot.value.signature === currentSignature;
+			if (!keepText) {
+				setImageCells(null);
+				textSnapshot.value = null;
+				bump();
 			}
-			const result = await rasterizeWithTimeout(code, options);
-			if (!alive || version !== renderVersion) return;
-			imageCells.value = result;
-			bump();
+			if (protocol) {
+				let result = null;
+				if (props.renderer) result = await runCustomRasterizer(code, options);
+				else if (isMermaidImageRendererReady()) result = await rasterizeWithTimeout(code, options);
+				else {
+					loadMermaidImageRenderer().then((ready) => {
+						if (!alive || version !== renderVersion || !ready) return;
+						renderPresentation(version);
+					});
+					return;
+				}
+				if (!alive || version !== renderVersion) return;
+				if (result) {
+					setImageCells(result);
+					textSnapshot.value = null;
+					bump();
+					return;
+				}
+			}
+			if (keepText) return;
+			await renderTextFallback(version);
 		}
 		function scheduleRender() {
 			const version = ++renderVersion;
 			resetCopyFeedback(false);
-			imageCells.value = null;
+			setImageCells(null);
 			if (waitingForStreamingSourceToFinish.value) {
 				builtOnce = true;
 				scheduler.cancelFrameTask?.(frameTaskId);
@@ -786,7 +1020,7 @@ const TMermaidImage = defineComponent({
 			}
 			if (!builtOnce || !props.streaming) {
 				builtOnce = true;
-				renderImage(version);
+				renderPresentation(version);
 				return;
 			}
 			const accepted = scheduler.queueFrameTask({
@@ -797,10 +1031,10 @@ const TMermaidImage = defineComponent({
 				run: () => {
 					if (!alive) return;
 					if (version !== renderVersion) return;
-					renderImage(version);
+					renderPresentation(version);
 				}
 			});
-			if (accepted === false) renderImage(version);
+			if (accepted === false) renderPresentation(version);
 		}
 		watch([
 			source,
@@ -817,7 +1051,11 @@ const TMermaidImage = defineComponent({
 			() => props.final,
 			() => props.maxRenderSourceChars,
 			() => props.maxRenderSourceLines,
-			graphicsOutputVersion
+			() => props.textRenderer,
+			() => props.shouldRenderSource,
+			() => props.textOptions,
+			() => props.ascii,
+			() => props.zoomModifier
 		], () => {
 			scheduleRender();
 		}, {
@@ -826,7 +1064,13 @@ const TMermaidImage = defineComponent({
 		});
 		const unsubscribeMermaidImage = subscribeMermaidImage(() => {
 			if (!alive) return;
-			scheduleRender();
+			if (!graphicsProtocol.value || props.renderer) return;
+			const cached = getCachedMermaidImage(source.value, resolveImageOptions());
+			if (!cached) return;
+			if (!alive) return;
+			setImageCells(cached);
+			textSnapshot.value = null;
+			bump();
 		});
 		const unsubscribeGraphicsOutput = subscribeTerminalGraphicsOutput(terminal, () => {
 			if (!alive) return;
@@ -909,7 +1153,7 @@ const TMermaidImage = defineComponent({
 		}
 		function contentLine(rowIndex, width, pad) {
 			const showImage = imageCells.value != null && displayFit.value != null && graphicsProtocol.value != null;
-			const src = showImage ? spaces(width) : sourceLines.value[rowIndex] ?? "";
+			const src = showImage ? spaces(width) : displayLines.value[rowIndex] ?? "";
 			const clipped = sliceCells(src, width);
 			return pad ? padCells(clipped, width) : clipped;
 		}
@@ -937,12 +1181,28 @@ const TMermaidImage = defineComponent({
 				queueClearGraphic();
 				return;
 			}
-			const offsetX = inner.w > fit.displayW ? Math.floor((inner.w - fit.displayW) / 2) : 0;
+			const zoom = clampZoom(zoomScale.value);
+			const fitW = fit.displayW;
+			const fitH = fit.displayH;
+			const fitOriginX = inner.x + (inner.w > fitW ? Math.floor((inner.w - fitW) / 2) : 0);
+			const fullRect$1 = {
+				x: fitOriginX + panX.value,
+				y: inner.y + panY.value,
+				w: fitW * zoom,
+				h: fitH * zoom
+			};
+			const visible$1 = intersectRect(fullRect$1, inner);
+			if (!visible$1 || visible$1.w < 1 || visible$1.h < 1) {
+				queueClearGraphic();
+				return;
+			}
+			const rectX = Math.max(inner.x, Math.round(visible$1.x));
+			const rectY = Math.max(inner.y, Math.round(visible$1.y));
 			const rect = {
-				x: inner.x + offsetX,
-				y: inner.y,
-				w: fit.displayW,
-				h: fit.displayH
+				x: rectX,
+				y: rectY,
+				w: Math.max(1, Math.min(inner.x + inner.w, rectX + Math.round(visible$1.w)) - rectX),
+				h: Math.max(1, Math.min(inner.y + inner.h, rectY + Math.round(visible$1.h)) - rectY)
 			};
 			const imageId = stableTerminalGraphicNumericId(`mermaid-image:${uid}:${renderVersion}:img`);
 			const placementId = stableTerminalGraphicNumericId(`mermaid-image:${uid}:${renderVersion}:plc`);
@@ -955,10 +1215,13 @@ const TMermaidImage = defineComponent({
 				rows: cells.heightCells,
 				sourceWidth: cells.naturalWidth,
 				sourceHeight: cells.naturalHeight,
-				placementColumns: fit.displayW,
-				placementRows: fit.displayH,
+				placementColumns: rect.w,
+				placementRows: rect.h,
+				transmissionColumns: fitW,
+				transmissionRows: fitH,
+				cropTransmission: false,
 				rect,
-				fullRect: rect,
+				fullRect: fullRect$1,
 				zIndex: -1,
 				fallback: source.value
 			});
@@ -982,13 +1245,14 @@ const TMermaidImage = defineComponent({
 				id,
 				x: rect.x,
 				y: rect.y,
-				w: fit.displayW,
-				h: fit.displayH,
+				w: rect.w,
+				h: rect.h,
 				protocol,
 				sequence: built.sequence,
 				resizeSequence: built.resizeSequence,
 				clearSequence: built.clearSequence,
-				fallbackText: source.value
+				fallbackText: source.value,
+				placementMoveWithoutClear: protocol === "kitty"
 			});
 			if (accepted) activeGraphicId = id;
 			else queueClearGraphic();
@@ -1023,7 +1287,7 @@ const TMermaidImage = defineComponent({
 			};
 		});
 		const contentHitRect = computed(() => {
-			if (!visible.value || !props.copyOnClick) return {
+			if (!visible.value) return {
 				x: 0,
 				y: 0,
 				w: 0,
@@ -1095,6 +1359,7 @@ const TMermaidImage = defineComponent({
 		function onCopyClick(event) {
 			event.preventDefault();
 			event.stopPropagation();
+			if (Date.now() - lastDragAt < DRAG_CLICK_SUPPRESS_MS) return;
 			copySource();
 		}
 		function onCopyKeydown(event) {
@@ -1103,6 +1368,78 @@ const TMermaidImage = defineComponent({
 			event.stopPropagation();
 			copySource();
 		}
+		const zoomEnabled = computed(() => props.zoomOnWheel !== false && imageCells.value != null && displayFit.value != null && graphicsProtocol.value === "kitty" && contentHitRect.value.w > 0 && contentHitRect.value.h > 0);
+		const dragEnabled = computed(() => props.zoomOnWheel !== false && imageCells.value != null && displayFit.value != null && graphicsProtocol.value === "kitty" && zoomScale.value > 1 && contentHitRect.value.w > 0 && contentHitRect.value.h > 0);
+		function onWheel(event) {
+			if (!zoomEnabled.value) return;
+			if (!hasZoomModifier(event)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const deltaY = event.deltaY ?? 0;
+			if (!Number.isFinite(deltaY) || deltaY === 0) return;
+			const inner = innerRectFrom(fullRect.value);
+			const fit = displayFit.value;
+			if (!fit || inner.w <= 0 || inner.h <= 0) return;
+			const currentZoom = clampZoom(zoomScale.value);
+			const fitW = fit.displayW;
+			const fitH = fit.displayH;
+			const fitOriginX = inner.x + (inner.w > fitW ? Math.floor((inner.w - fitW) / 2) : 0);
+			const fullX = fitOriginX + panX.value;
+			const fullY = inner.y + panY.value;
+			const mouseX = event.cellX;
+			const mouseY = event.cellY;
+			const fx = currentZoom > 0 ? (mouseX - fullX) / (fitW * currentZoom) : .5;
+			const fy = currentZoom > 0 ? (mouseY - fullY) / (fitH * currentZoom) : .5;
+			const nextZoom = clampZoom(currentZoom * wheelZoomFactor(deltaY, event.deltaMode));
+			if (nextZoom === currentZoom) return;
+			const nextW = fitW * nextZoom;
+			const nextH = fitH * nextZoom;
+			let nextX = mouseX - fx * nextW;
+			let nextY = mouseY - fy * nextH;
+			if (nextW <= inner.w) nextX = inner.x + (inner.w - nextW) / 2;
+			else nextX = Math.min(inner.x, Math.max(inner.x + inner.w - nextW, nextX));
+			if (nextH <= inner.h) nextY = inner.y + (inner.h - nextH) / 2;
+			else nextY = Math.min(inner.y, Math.max(inner.y + inner.h - nextH, nextY));
+			zoomScale.value = nextZoom;
+			panX.value = nextX - fitOriginX;
+			panY.value = nextY - inner.y;
+			clampPan();
+			bump();
+		}
+		function onPointerDown(event) {
+			if (!dragEnabled.value) return;
+			event.preventDefault();
+			event.stopPropagation();
+			dragState = {
+				startX: event.cellX,
+				startY: event.cellY,
+				panStartX: panX.value,
+				panStartY: panY.value
+			};
+			dragMoved = false;
+		}
+		function onPointerMove(event) {
+			const drag = dragState;
+			if (!drag) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const dx = event.cellX - drag.startX;
+			const dy = event.cellY - drag.startY;
+			if (!dragMoved && Math.abs(dx) + Math.abs(dy) >= 1) dragMoved = true;
+			if (!dragMoved) return;
+			panX.value = drag.panStartX + dx;
+			panY.value = drag.panStartY + dy;
+			clampPan();
+			bump();
+		}
+		function onPointerUp(event) {
+			const drag = dragState;
+			if (!drag) return;
+			event.preventDefault();
+			event.stopPropagation();
+			dragState = null;
+			if (dragMoved) lastDragAt = Date.now();
+		}
 		const copyNodeActive = computed(() => visible.value && props.copyButton && copyHitRect.value.w > 0 && copyHitRect.value.h > 0);
 		useTerminalNode(() => ({
 			rect: copyHitRect.value,
@@ -1115,14 +1452,20 @@ const TMermaidImage = defineComponent({
 				keydown: onCopyKeydown
 			} : {}
 		}));
-		const contentNodeActive = computed(() => visible.value && props.copyOnClick && contentHitRect.value.w > 0 && contentHitRect.value.h > 0);
+		const contentNodeActive = computed(() => visible.value && (props.copyOnClick || zoomEnabled.value || dragEnabled.value) && contentHitRect.value.w > 0 && contentHitRect.value.h > 0);
 		useTerminalNode(() => ({
 			rect: contentHitRect.value,
 			zIndex: (parentEventZ.value ?? 0) + props.zIndex,
 			visible: contentNodeActive.value,
 			focusable: false,
 			selectable: false,
-			handlers: contentNodeActive.value ? { click: onCopyClick } : {}
+			handlers: contentNodeActive.value ? {
+				click: props.copyOnClick ? onCopyClick : void 0,
+				wheel: zoomEnabled.value ? onWheel : void 0,
+				pointerdown: dragEnabled.value ? onPointerDown : void 0,
+				pointermove: dragEnabled.value ? onPointerMove : void 0,
+				pointerup: dragEnabled.value ? onPointerUp : void 0
+			} : {}
 		}));
 		useRenderNode(() => ({
 			zIndex: props.zIndex,
@@ -1138,6 +1481,11 @@ const TMermaidImage = defineComponent({
 				fullRect.value,
 				imageCells.value,
 				displayFit.value,
+				zoomScale.value,
+				panX.value,
+				panY.value,
+				textSnapshot.value,
+				displayLines.value,
 				sourceLines.value,
 				currentStyle.value,
 				props.clear,
@@ -1202,4 +1550,148 @@ const TMermaidImage = defineComponent({
 });
 
 //#endregion
-export { TBeautifulMermaid, TBeautifulMermaidText, TMermaid, TMermaidImage, TMermaidText$1 as TMermaidText, beautifulMermaidRenderer, clearMermaidImageCache, createBeautifulMermaidRenderer, getCachedMermaidImage, getMermaidImage, isMermaidImageRendererReady, loadMermaidImageRenderer, normalizeMermaidImageOptions, resolveMermaidImageColor, setMermaidImageRasterizer, subscribeMermaidImage };
+//#region src/vue/mermaid/beautiful-mermaid.ts
+const BEAUTIFUL_MERMAID_INSTALL_HINT = "Install beautiful-mermaid and use TMermaidText from @simon_he/vue-tui/mermaid or @simon_he/vue-tui/agent/mermaid, or pass a custom renderer prop.";
+const MISSING_BEAUTIFUL_MERMAID_ERROR_CODE = "VUE_TUI_MISSING_BEAUTIFUL_MERMAID";
+const INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE = "VUE_TUI_INVALID_BEAUTIFUL_MERMAID_EXPORT";
+let cachedBeautifulMermaid = null;
+function functionValue(value) {
+	return typeof value === "function" ? value : null;
+}
+function functionProp(target, key) {
+	if (!target || typeof target !== "object") return null;
+	if (!(key in target)) return null;
+	const value = target[key];
+	return typeof value === "function" ? value : null;
+}
+function errorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+function codedError(message, code) {
+	const error = new Error(message);
+	error.code = code;
+	return error;
+}
+function missingBeautifulMermaidError(error) {
+	if (error && typeof error === "object" && errorCode(error) === MISSING_BEAUTIFUL_MERMAID_ERROR_CODE) return markMermaidRenderErrorFatal(error);
+	const detail = errorMessage(error);
+	return markMermaidRenderErrorFatal(codedError(`${BEAUTIFUL_MERMAID_INSTALL_HINT} (${detail})`, MISSING_BEAUTIFUL_MERMAID_ERROR_CODE));
+}
+function errorCode(error) {
+	if (!error || typeof error !== "object") return "";
+	const value = error.code;
+	return typeof value === "string" ? value : "";
+}
+function errorCause(error) {
+	if (!error || typeof error !== "object") return void 0;
+	return error.cause;
+}
+function isMissingBeautifulMermaid(error) {
+	return isMissingBeautifulMermaidWithSeen(error, new WeakSet());
+}
+function isMissingBeautifulMermaidWithSeen(error, seen) {
+	if (error && typeof error === "object") {
+		if (seen.has(error)) return false;
+		seen.add(error);
+	}
+	const message = errorMessage(error);
+	const code = errorCode(error);
+	if (code === MISSING_BEAUTIFUL_MERMAID_ERROR_CODE) return true;
+	const mentionsBeautifulMermaid = /Cannot find package ['"]beautiful-mermaid['"]/.test(message) || /Cannot find module ['"]beautiful-mermaid['"]/.test(message) || /Cannot resolve module ['"]beautiful-mermaid['"]/.test(message) || /Can't resolve ['"]beautiful-mermaid['"]/.test(message) || /Failed to resolve module specifier ['"]beautiful-mermaid['"]/.test(message) || /Failed to resolve import ['"]beautiful-mermaid['"]/.test(message) || /Could not resolve ['"]beautiful-mermaid['"]/.test(message);
+	if (mentionsBeautifulMermaid && (code === "" || code === "ERR_MODULE_NOT_FOUND" || code === "MODULE_NOT_FOUND" || code === "UNRESOLVED_IMPORT")) return true;
+	const cause = errorCause(error);
+	return cause !== void 0 && isMissingBeautifulMermaidWithSeen(cause, seen);
+}
+function resolveBeautifulMermaidRenderer(mod) {
+	const renderer = functionProp(mod, "renderMermaidASCII") ?? functionProp(mod, "renderMermaidAscii") ?? functionValue(mod.default) ?? functionProp(mod.default, "renderMermaidASCII") ?? functionProp(mod.default, "renderMermaidAscii");
+	if (!renderer) throw markMermaidRenderErrorFatal(codedError("beautiful-mermaid is installed but does not export renderMermaidASCII.", INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE));
+	return renderer;
+}
+function hasErrorCode(error, code, seen = new WeakSet()) {
+	if (!error || typeof error !== "object") return false;
+	if (seen.has(error)) return false;
+	seen.add(error);
+	if (errorCode(error) === code) return true;
+	const cause = errorCause(error);
+	return cause !== void 0 && hasErrorCode(cause, code, seen);
+}
+function isBeautifulMermaidExportError(error) {
+	return hasErrorCode(error, INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE);
+}
+const isTransientBeautifulMermaidRenderError = (error) => {
+	if (isMissingBeautifulMermaid(error)) return false;
+	if (isBeautifulMermaidExportError(error)) return false;
+	return true;
+};
+async function loadBeautifulMermaid() {
+	if (!cachedBeautifulMermaid) cachedBeautifulMermaid = import("beautiful-mermaid").then((mod) => mod).catch((error) => {
+		cachedBeautifulMermaid = null;
+		if (isMissingBeautifulMermaid(error)) throw missingBeautifulMermaidError(error);
+		throw markMermaidRenderErrorFatal(error);
+	});
+	return cachedBeautifulMermaid;
+}
+const beautifulMermaidRenderer = async (code, options) => {
+	try {
+		const mod = await loadBeautifulMermaid();
+		const renderer = resolveBeautifulMermaidRenderer(mod);
+		return await renderer(code, options);
+	} catch (error) {
+		if (isMissingBeautifulMermaid(error)) throw missingBeautifulMermaidError(error);
+		throw error;
+	}
+};
+function createBeautifulMermaidRenderer() {
+	return beautifulMermaidRenderer;
+}
+const TMermaidText$1 = defineComponent({
+	name: "TMermaidText",
+	inheritAttrs: false,
+	props: tMermaidTextProps,
+	emits: { copy: (_payload) => true },
+	setup(props, { attrs, emit, slots }) {
+		return () => {
+			const renderer = props.renderer ?? beautifulMermaidRenderer;
+			const shouldRenderSource = props.shouldRenderSource ?? isSimpleMermaidFlowchartSource;
+			return h(TMermaidText, {
+				...attrs,
+				...props,
+				renderer,
+				shouldRenderSource,
+				isTransientError: props.isTransientError ?? isTransientBeautifulMermaidRenderError,
+				onCopy: (payload) => emit("copy", payload)
+			}, slots);
+		};
+	}
+});
+/**
+* Adaptive default mermaid component: renders the diagram as a terminal image
+* (Kitty/iTerm2 graphics) when the terminal supports it, otherwise falls back
+* to the beautiful-mermaid ASCII renderer, otherwise shows the raw source.
+* While any pipeline is pending the raw source stays visible (source-first);
+* streaming sources are only rendered once `final` is true.
+*/
+const TMermaid = defineComponent({
+	name: "TMermaid",
+	inheritAttrs: false,
+	props: tMermaidImageProps,
+	emits: { copy: (_payload) => true },
+	setup(props, { attrs, emit, slots }) {
+		return () => {
+			const { renderer: _legacyTextRenderer,...rest } = props;
+			const textRenderer = props.textRenderer ?? props.renderer ?? beautifulMermaidRenderer;
+			return h(TMermaidImage, {
+				...attrs,
+				...rest,
+				textRenderer,
+				shouldRenderSource: props.shouldRenderSource ?? isSimpleMermaidFlowchartSource,
+				onCopy: (payload) => emit("copy", payload)
+			}, slots);
+		};
+	}
+});
+const TBeautifulMermaidText = TMermaidText$1;
+const TBeautifulMermaid = TMermaid;
+
+//#endregion
+export { TBeautifulMermaid, TBeautifulMermaidText, TMermaid, TMermaidImage, TMermaidText$1 as TMermaidText, beautifulMermaidRenderer, clearMermaidImageCache, createBeautifulMermaidRenderer, getCachedMermaidImage, getMermaidImage, isMermaidImageRendererReady, loadMermaidImageRenderer, normalizeMermaidImageOptions, resolveMermaidImageColor, resolveMermaidSvgForResvg, setMermaidImageRasterizer, subscribeMermaidImage };