@simon_he/vue-tui 1.1.3 → 1.1.5

package/dist/mermaid-N3kGTHFy.js

@@ -0,0 +1,1697 @@
+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-2FTRg9x3.js";
+import { resolveMarkdownMathColor } from "./math-image-BZhmfUeu.js";
+import { computed, defineComponent, getCurrentInstance, h, inject, markRaw, onBeforeUnmount, shallowRef, watch } from "vue";
+
+//#region src/vue/mermaid/mermaid-image.ts
+const DEFAULT_MERMAID_IMAGE_OPTIONS = Object.freeze({
+	cellWidthPx: 8,
+	cellHeightPx: 16,
+	scale: 2,
+	bg: "#1e1e2e",
+	fg: "#f8f8f2",
+	maxWidthCells: 0,
+	maxHeightCells: 0,
+	padding: 40
+});
+const MAX_CACHE_ENTRIES = 48;
+const MAX_FAILED_ENTRIES = 96;
+const mermaidImageCache = new Map();
+const mermaidImageFailed = new Set();
+const mermaidImageInflight = new Map();
+const mermaidImageListeners = new Set();
+let customRasterizer = null;
+let builtinRasterizerLoad = null;
+let builtinRasterizerReady = false;
+function normalizeMermaidImageOptions(options) {
+	return {
+		cellWidthPx: Math.max(1, Math.floor(options?.cellWidthPx ?? DEFAULT_MERMAID_IMAGE_OPTIONS.cellWidthPx)),
+		cellHeightPx: Math.max(1, Math.floor(options?.cellHeightPx ?? DEFAULT_MERMAID_IMAGE_OPTIONS.cellHeightPx)),
+		scale: Math.max(1, Math.floor(options?.scale ?? DEFAULT_MERMAID_IMAGE_OPTIONS.scale)),
+		bg: options?.bg ?? DEFAULT_MERMAID_IMAGE_OPTIONS.bg,
+		fg: options?.fg ?? DEFAULT_MERMAID_IMAGE_OPTIONS.fg,
+		maxWidthCells: Math.max(0, Math.floor(options?.maxWidthCells ?? 0)),
+		maxHeightCells: Math.max(0, Math.floor(options?.maxHeightCells ?? 0)),
+		padding: Math.max(0, Math.floor(options?.padding ?? DEFAULT_MERMAID_IMAGE_OPTIONS.padding))
+	};
+}
+/**
+* Resolve a diagram foreground/background from a terminal style value.
+* Reuses the named-color table shared with the math rasterizer.
+*/
+function resolveMermaidImageColor(fg) {
+	return resolveMarkdownMathColor(fg);
+}
+/**
+* Install a custom mermaid -> PNG rasterizer (e.g. consumers that render
+* mermaid through their own pipeline). Passing `null` restores the built-in
+* lazy loader (beautiful-mermaid SVG + @resvg/resvg-js).
+*/
+function setMermaidImageRasterizer(rasterizer) {
+	customRasterizer = rasterizer;
+}
+function subscribeMermaidImage(listener) {
+	mermaidImageListeners.add(listener);
+	return () => mermaidImageListeners.delete(listener);
+}
+/**
+* True when a rasterizer is confirmed available (custom one installed, or the
+* built-in beautiful-mermaid + resvg stack finished loading). Components gate
+* image production on this so they never re-rasterize while the engine is
+* still loading or missing.
+*/
+function isMermaidImageRendererReady() {
+	return customRasterizer != null || builtinRasterizerReady;
+}
+/**
+* Ensure the mermaid rasterizer is loaded (or resolved as unavailable).
+* Resolves `true` once a rasterizer is usable. Safe to call repeatedly; the
+* underlying load is shared and its outcome is cached.
+*/
+async function loadMermaidImageRenderer() {
+	if (isMermaidImageRendererReady()) return true;
+	const rasterizer = customRasterizer ?? await loadBuiltinMermaidRasterizer();
+	builtinRasterizerReady = rasterizer != null;
+	return builtinRasterizerReady;
+}
+function hashMermaidImageKey(value) {
+	let hash = 2166136261;
+	for (let i = 0; i < value.length; i++) {
+		hash ^= value.charCodeAt(i);
+		hash = Math.imul(hash, 16777619);
+	}
+	return (hash >>> 0).toString(36);
+}
+function mermaidImageCacheKey(code, options) {
+	return hashMermaidImageKey([
+		code,
+		options.cellWidthPx,
+		options.cellHeightPx,
+		options.scale,
+		options.bg,
+		options.fg,
+		options.maxWidthCells,
+		options.maxHeightCells,
+		options.padding
+	].join(""));
+}
+function notifyMermaidImageListeners() {
+	for (const listener of mermaidImageListeners) try {
+		listener();
+	} catch {}
+}
+/** Synchronous cache lookup used by components before deciding to re-render. */
+function getCachedMermaidImage(code, options) {
+	return mermaidImageCache.get(mermaidImageCacheKey(code, normalizeMermaidImageOptions(options))) ?? null;
+}
+/**
+* Drop all cached mermaid images (PNG + failed lookups). Useful for long
+* running processes that change cell metrics, and for tests.
+*/
+function clearMermaidImageCache() {
+	mermaidImageCache.clear();
+	mermaidImageFailed.clear();
+}
+function evictOldestMermaidImageEntry() {
+	const oldest = mermaidImageCache.keys().next().value;
+	if (oldest != null) mermaidImageCache.delete(oldest);
+}
+/**
+* Resolve a mermaid diagram to a PNG base64 + cell size. Cached per
+* (code, cell metrics, colors). In-flight requests are deduped. When a new
+* image finishes, `subscribeMermaidImage` listeners are notified so components
+* can rebuild/re-paint with the real size.
+*/
+async function getMermaidImage(code, options) {
+	const source = String(code ?? "").trim();
+	if (!source) return null;
+	const normalized = normalizeMermaidImageOptions(options);
+	const key = mermaidImageCacheKey(source, normalized);
+	const cached = mermaidImageCache.get(key);
+	if (cached) return cached;
+	if (mermaidImageFailed.has(key)) return null;
+	const inflight = mermaidImageInflight.get(key);
+	if (inflight) return inflight;
+	const pending = (async () => {
+		try {
+			const rasterizer = customRasterizer ?? await loadBuiltinMermaidRasterizer();
+			if (!rasterizer) return null;
+			const result = await rasterizer(source, normalized);
+			if (result && result.base64) {
+				mermaidImageCache.set(key, result);
+				if (mermaidImageCache.size > MAX_CACHE_ENTRIES) evictOldestMermaidImageEntry();
+				notifyMermaidImageListeners();
+			} else if (result === null) {
+				mermaidImageFailed.add(key);
+				if (mermaidImageFailed.size > MAX_FAILED_ENTRIES) {
+					const oldest = mermaidImageFailed.values().next().value;
+					if (oldest != null) mermaidImageFailed.delete(oldest);
+				}
+			}
+			return result;
+		} catch {
+			return null;
+		} finally {
+			mermaidImageInflight.delete(key);
+		}
+	})();
+	mermaidImageInflight.set(key, pending);
+	return pending;
+}
+function base64FromBytes(bytes) {
+	const chunk = 32768;
+	let binary = "";
+	for (let offset = 0; offset < bytes.length; offset += chunk) binary += String.fromCharCode(...bytes.subarray(offset, offset + chunk));
+	return typeof btoa === "function" ? btoa(binary) : Buffer.from(bytes).toString("base64");
+}
+function positiveInt(value) {
+	const n = Math.floor(Number(value));
+	return Number.isFinite(n) && n > 0 ? n : void 0;
+}
+function clampCellsToLimits(widthCells, heightCells, maxWidthCells, maxHeightCells) {
+	let w = widthCells;
+	let h$1 = heightCells;
+	if (maxWidthCells > 0 && w > maxWidthCells) {
+		h$1 = Math.max(1, Math.round(h$1 * maxWidthCells / w));
+		w = maxWidthCells;
+	}
+	if (maxHeightCells > 0 && h$1 > maxHeightCells) {
+		w = Math.max(1, Math.round(w * maxHeightCells / h$1));
+		h$1 = maxHeightCells;
+	}
+	return {
+		widthCells: Math.max(1, w),
+		heightCells: Math.max(1, h$1)
+	};
+}
+/**
+* @resvg/resvg-js is a Node-only native addon. Keeping the specifier in a
+* variable (a non-literal dynamic import) stops browser bundlers
+* (vite/rolldown) from statically resolving it and failing on its platform
+* `.node` binding; at runtime a browser load fails and the rasterizer falls
+* back to raw source.
+*/
+const RESVG_MODULE_ID = "@resvg/resvg-js";
+function svgRenderFunction(mod) {
+	const candidates = [
+		mod.renderMermaidSVGAsync,
+		mod.renderMermaidSVG,
+		mod.renderMermaid,
+		mod.default?.renderMermaidSVGAsync,
+		mod.default?.renderMermaidSVG
+	];
+	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 {
+			const [mermaidMod, resvgMod] = await Promise.all([import("beautiful-mermaid").then((mod) => mod, () => null), import(RESVG_MODULE_ID).then((mod) => mod, () => null)]);
+			const renderSvg = svgRenderFunction(mermaidMod ?? {});
+			const Resvg = resvgMod?.Resvg;
+			if (!renderSvg || typeof Resvg !== "function") return null;
+			return async (code, options) => {
+				const svg = await renderSvg(code, {
+					bg: options.bg,
+					fg: options.fg,
+					padding: options.padding,
+					transparent: true
+				});
+				const svgText = String(svg ?? "");
+				if (!svgText.includes("<svg")) return null;
+				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;
+				if (!png || png.length < 8 || naturalWidth == null || naturalHeight == null) return null;
+				const rawWidthCells = Math.max(1, Math.round(naturalWidth / (options.cellWidthPx * options.scale)));
+				const rawHeightCells = Math.max(1, Math.round(naturalHeight / (options.cellHeightPx * options.scale)));
+				const { widthCells, heightCells } = clampCellsToLimits(rawWidthCells, rawHeightCells, options.maxWidthCells, options.maxHeightCells);
+				return {
+					base64: base64FromBytes(png),
+					widthCells,
+					heightCells,
+					naturalWidth,
+					naturalHeight
+				};
+			};
+		} catch {
+			return null;
+		}
+	})();
+	return builtinRasterizerLoad;
+}
+
+//#endregion
+//#region src/vue/components/TMermaidImage.ts
+const UNICODE_MERMAID_IMAGE_BOX_CHARS = Object.freeze({
+	tl: "┌",
+	tr: "┐",
+	bl: "└",
+	br: "┘",
+	h: "─",
+	v: "│"
+});
+const ASCII_MERMAID_IMAGE_BOX_CHARS = Object.freeze({
+	tl: "+",
+	tr: "+",
+	bl: "+",
+	br: "+",
+	h: "-",
+	v: "|"
+});
+const DEFAULT_MERMAID_IMAGE_COPIED_DURATION_MS = 1200;
+const DEFAULT_MERMAID_IMAGE_MAX_RENDER_SOURCE_CHARS = 2e4;
+const DEFAULT_MERMAID_IMAGE_MAX_RENDER_SOURCE_LINES = 400;
+const ESC = String.fromCharCode(27);
+const BEL = String.fromCharCode(7);
+const TERMINAL_ESCAPE_RE = new RegExp([
+	`${ESC}\\][\\s\\S]*?(?:${BEL}|${ESC}\\\\)`,
+	`${ESC}[PX^_][\\s\\S]*?${ESC}\\\\`,
+	`${ESC}\\[[0-?]*[ -/]*[@-~]`,
+	`${ESC}[@-Z\\\\-_]`
+].join("|"), "g");
+function stripTerminalEscapes(value) {
+	return value.replace(TERMINAL_ESCAPE_RE, "");
+}
+function normalizeNonNegativeInt(value, fallback) {
+	const n = Number(value);
+	if (!Number.isFinite(n)) return fallback;
+	return Math.max(0, Math.floor(n));
+}
+function countLinesUpTo(value, max) {
+	if (max <= 0) return 0;
+	let lines = 1;
+	for (let index = 0; index < value.length; index++) {
+		const code = value.charCodeAt(index);
+		if (code !== 10 && code !== 13) continue;
+		lines++;
+		if (code === 13 && value.charCodeAt(index + 1) === 10) index++;
+		if (lines > max) return lines;
+	}
+	return lines;
+}
+function splitRenderedOutput(value) {
+	const normalized = sanitizeTextBlock(stripTerminalEscapes(String(value ?? "")).replace(/\r\n?/g, "\n"));
+	const lines = normalized.split("\n");
+	return lines.length ? lines : [""];
+}
+function fitImageCells(cells, maxW, maxH) {
+	if (maxW <= 0 || maxH <= 0) return null;
+	let w = Math.max(1, Math.floor(cells.widthCells));
+	let h$1 = Math.max(1, Math.floor(cells.heightCells));
+	if (w > maxW) {
+		h$1 = Math.max(1, Math.round(h$1 * maxW / w));
+		w = maxW;
+	}
+	if (h$1 > maxH) {
+		w = Math.max(1, Math.round(w * maxH / h$1));
+		h$1 = maxH;
+	}
+	return {
+		displayW: Math.max(1, w),
+		displayH: Math.max(1, h$1)
+	};
+}
+const tMermaidImageProps = {
+	x: {
+		type: Number,
+		required: true
+	},
+	y: {
+		type: Number,
+		required: true
+	},
+	w: {
+		type: Number,
+		required: true
+	},
+	h: {
+		type: Number,
+		default: void 0
+	},
+	zIndex: {
+		type: Number,
+		default: 0
+	},
+	content: {
+		type: String,
+		default: ""
+	},
+	code: {
+		type: String,
+		default: void 0
+	},
+	style: {
+		type: Object,
+		default: void 0
+	},
+	clear: {
+		type: Boolean,
+		default: true
+	},
+	final: {
+		type: Boolean,
+		default: true
+	},
+	streaming: {
+		type: Boolean,
+		default: false
+	},
+	renderer: {
+		type: Function,
+		default: void 0
+	},
+	cellWidthPx: {
+		type: Number,
+		default: void 0
+	},
+	cellHeightPx: {
+		type: Number,
+		default: void 0
+	},
+	scale: {
+		type: Number,
+		default: void 0
+	},
+	bg: {
+		type: String,
+		default: void 0
+	},
+	fg: {
+		type: String,
+		default: void 0
+	},
+	maxWidthCells: {
+		type: Number,
+		default: void 0
+	},
+	maxHeightCells: {
+		type: Number,
+		default: void 0
+	},
+	padding: {
+		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
+	},
+	title: {
+		type: String,
+		default: "mermaid"
+	},
+	copyButton: {
+		type: Boolean,
+		default: true
+	},
+	copyText: {
+		type: String,
+		default: "copy"
+	},
+	copiedText: {
+		type: String,
+		default: "copied"
+	},
+	copiedDurationMs: {
+		type: Number,
+		default: DEFAULT_MERMAID_IMAGE_COPIED_DURATION_MS
+	},
+	renderTimeoutMs: {
+		type: Number,
+		default: 0
+	},
+	maxRenderSourceChars: {
+		type: Number,
+		default: DEFAULT_MERMAID_IMAGE_MAX_RENDER_SOURCE_CHARS
+	},
+	maxRenderSourceLines: {
+		type: Number,
+		default: DEFAULT_MERMAID_IMAGE_MAX_RENDER_SOURCE_LINES
+	},
+	copyOnClick: {
+		type: Boolean,
+		default: true
+	},
+	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({
+	name: "TMermaidImage",
+	props: tMermaidImageProps,
+	emits: { copy: (_payload) => true },
+	setup(props, { emit }) {
+		const instance = getCurrentInstance();
+		const terminalContext = useTerminal();
+		const { terminal, defaultStyle, scheduler, widthProvider } = terminalContext;
+		const layout = useLayout();
+		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;
+		const frameTaskId = `TMermaidImage:${instance?.uid ?? "unknown"}:mermaid-image`;
+		const uid = instance?.uid ?? 0;
+		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));
+		const graphicsOutput = computed(() => {
+			graphicsOutputVersion.value;
+			return getTerminalGraphicsOutput(terminal);
+		});
+		const graphicsProtocol = computed(() => {
+			const output = graphicsOutput.value;
+			if (!output?.capabilities.supported) return null;
+			const protocol = output.capabilities.preferredProtocol;
+			if (protocol === "kitty" || protocol === "iterm2") return protocol;
+			return null;
+		});
+		function bump() {
+			documentVersion.value++;
+		}
+		function clearCopiedTimer() {
+			if (copiedTimer == null) return;
+			clearTimeout(copiedTimer);
+			copiedTimer = null;
+		}
+		function setCopied(next, repaint = true) {
+			if (!next) clearCopiedTimer();
+			if (copied.value === next) return;
+			copied.value = next;
+			if (repaint) bump();
+		}
+		function resetCopyFeedback(repaint = true) {
+			copyRequestVersion++;
+			setCopied(false, repaint);
+		}
+		function showCopiedFeedback() {
+			clearCopiedTimer();
+			const duration = normalizeNonNegativeInt(props.copiedDurationMs, DEFAULT_MERMAID_IMAGE_COPIED_DURATION_MS);
+			if (duration <= 0) {
+				setCopied(false);
+				return;
+			}
+			setCopied(true);
+			copiedTimer = setTimeout(() => {
+				copiedTimer = null;
+				if (!alive) return;
+				setCopied(false);
+			}, duration);
+		}
+		function queueClearGraphic() {
+			if (activeGraphicId == null) return;
+			const id = activeGraphicId;
+			activeGraphicId = null;
+			try {
+				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));
+			return Number.isFinite(width) ? Math.max(0, width) : 0;
+		});
+		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;
+			return reservesBoxRows.value ? Math.max(0, w - 2) : w;
+		});
+		const fixedInnerHeight = computed(() => {
+			if (props.h == null) return 0;
+			const h$1 = Math.floor(Number(props.h));
+			if (!Number.isFinite(h$1)) return 0;
+			const value = Math.max(0, h$1);
+			return reservesBoxRows.value ? Math.max(0, value - 2) : value;
+		});
+		const autoHeight = computed(() => props.h == null);
+		const displayFit = computed(() => {
+			const cells = imageCells.value;
+			if (!cells) return null;
+			if (autoHeight.value) return fitImageCells(cells, innerWidth.value, Number.MAX_SAFE_INTEGER);
+			return fitImageCells(cells, innerWidth.value, fixedInnerHeight.value);
+		});
+		const contentHeight = computed(() => {
+			if (!autoHeight.value) return fixedInnerHeight.value;
+			return displayFit.value?.displayH ?? Math.max(1, displayLines.value.length);
+		});
+		const fullHeight = computed(() => {
+			if (props.h != null) {
+				const h$1 = Math.floor(Number(props.h));
+				return Number.isFinite(h$1) ? Math.max(0, h$1) : 0;
+			}
+			return reservesBoxRows.value ? contentHeight.value + 2 : contentHeight.value;
+		});
+		const fullRect = computed(() => {
+			return translateRect({
+				x: props.x,
+				y: props.y,
+				w: props.w,
+				h: fullHeight.value
+			}, layout.originX, layout.originY);
+		});
+		const absRect = computed(() => {
+			const translated = fullRect.value;
+			if (!layout.clipRect) return translated;
+			return intersectRect(translated, layout.clipRect) ?? {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+		});
+		const copyLabel = computed(() => copied.value ? props.copiedText : props.copyText);
+		function cellWidth(value) {
+			return withTextWidthProvider(widthProvider, () => textCellWidth(value));
+		}
+		function sliceCells(text, maxCells) {
+			return withTextWidthProvider(widthProvider, () => sliceByCells(text, maxCells));
+		}
+		function sliceCellsRange(text, startCells, endCells) {
+			return withTextWidthProvider(widthProvider, () => sliceByCellsRange(text, startCells, endCells));
+		}
+		function padCells(text, width) {
+			return withTextWidthProvider(widthProvider, () => padEndByCells(text, width));
+		}
+		function resolveImageOptions() {
+			const resolvedFg = props.fg ?? resolveMermaidImageColor(currentStyle.value.fg) ?? void 0;
+			return normalizeMermaidImageOptions({
+				cellWidthPx: props.cellWidthPx,
+				cellHeightPx: props.cellHeightPx,
+				scale: props.scale,
+				bg: props.bg,
+				fg: resolvedFg,
+				maxWidthCells: props.maxWidthCells,
+				maxHeightCells: props.maxHeightCells,
+				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;
+			const maxLines = normalizeNonNegativeInt(props.maxRenderSourceLines, DEFAULT_MERMAID_IMAGE_MAX_RENDER_SOURCE_LINES);
+			if (maxLines > 0 && countLinesUpTo(code, maxLines) > maxLines) return true;
+			return false;
+		}
+		async function rasterizeWithTimeout(code, options) {
+			const timeoutMs = normalizeNonNegativeInt(props.renderTimeoutMs, 0);
+			if (timeoutMs <= 0) return await getMermaidImage(code, options);
+			let timer = null;
+			try {
+				return await Promise.race([getMermaidImage(code, options), new Promise((resolve) => {
+					timer = setTimeout(() => resolve(null), timeoutMs);
+				})]);
+			} finally {
+				if (timer != null) clearTimeout(timer);
+			}
+		}
+		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;
+				setImageCells(null);
+				textSnapshot.value = null;
+				bump();
+				return;
+			}
+			if (waitingForStreamingSourceToFinish.value || shouldSkipRenderForSize(code)) {
+				if (!alive || version !== renderVersion) return;
+				setImageCells(null);
+				textSnapshot.value = null;
+				bump();
+				return;
+			}
+			const protocol = graphicsProtocol.value;
+			const options = resolveImageOptions();
+			const cached = protocol && !props.renderer ? getCachedMermaidImage(code, options) : null;
+			if (cached) {
+				if (!alive || version !== renderVersion) return;
+				setImageCells(cached);
+				textSnapshot.value = null;
+				bump();
+				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();
+			}
+			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);
+			setImageCells(null);
+			if (waitingForStreamingSourceToFinish.value) {
+				builtOnce = true;
+				scheduler.cancelFrameTask?.(frameTaskId);
+				bump();
+				return;
+			}
+			if (!builtOnce || !props.streaming) {
+				builtOnce = true;
+				renderPresentation(version);
+				return;
+			}
+			const accepted = scheduler.queueFrameTask({
+				id: frameTaskId,
+				reason: "stream",
+				priority: "low",
+				sync: false,
+				run: () => {
+					if (!alive) return;
+					if (version !== renderVersion) return;
+					renderPresentation(version);
+				}
+			});
+			if (accepted === false) renderPresentation(version);
+		}
+		watch([
+			source,
+			() => props.renderer,
+			() => props.cellWidthPx,
+			() => props.cellHeightPx,
+			() => props.scale,
+			() => props.bg,
+			() => props.fg,
+			() => props.maxWidthCells,
+			() => props.maxHeightCells,
+			() => props.padding,
+			() => props.streaming,
+			() => props.final,
+			() => props.maxRenderSourceChars,
+			() => props.maxRenderSourceLines,
+			() => props.textRenderer,
+			() => props.shouldRenderSource,
+			() => props.textOptions,
+			() => props.ascii,
+			() => props.zoomModifier
+		], () => {
+			scheduleRender();
+		}, {
+			immediate: true,
+			deep: true
+		});
+		const unsubscribeMermaidImage = subscribeMermaidImage(() => {
+			if (!alive) return;
+			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;
+			graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal);
+			scheduleRender();
+		});
+		onBeforeUnmount(() => {
+			alive = false;
+			renderVersion++;
+			clearCopiedTimer();
+			queueClearGraphic();
+			unsubscribeMermaidImage();
+			unsubscribeGraphicsOutput();
+			scheduler.cancelFrameTask?.(frameTaskId);
+		});
+		function canDrawBox(width, height) {
+			return hasBox.value && Math.floor(width) >= 2 && Math.floor(height) >= 2;
+		}
+		function headerCopySegment(width) {
+			if (!hasBox.value || !props.copyButton) return null;
+			const rowWidth = Math.max(0, Math.floor(width));
+			if (rowWidth < 4) return null;
+			const label = sanitizeInlineText(copyLabel.value);
+			if (!label) return null;
+			const maxCells = Math.max(0, rowWidth - 2);
+			const text = sliceCells(` ${label} `, maxCells);
+			const cells = cellWidth(text);
+			if (!text || cells <= 0) return null;
+			return {
+				text,
+				start: Math.max(1, rowWidth - cells - 1),
+				cells
+			};
+		}
+		function headerTitleSegment(width, copy) {
+			if (!hasBox.value) return null;
+			const rowWidth = Math.max(0, Math.floor(width));
+			if (rowWidth < 4) return null;
+			const title = sanitizeInlineText(props.title);
+			if (!title) return null;
+			const titleStart = 1;
+			const titleEnd = copy ? Math.max(titleStart, copy.start - 1) : rowWidth - 1;
+			const maxCells = Math.max(0, titleEnd - titleStart);
+			if (maxCells <= 0) return null;
+			const text = sliceCells(` ${title} `, maxCells);
+			const cells = cellWidth(text);
+			if (!text || cells <= 0) return null;
+			return {
+				text,
+				start: titleStart,
+				cells
+			};
+		}
+		function overlayCells(row, segment, width) {
+			const rowWidth = Math.max(0, Math.floor(width));
+			const start = Math.max(0, Math.floor(segment.start));
+			if (rowWidth <= 1 || start >= rowWidth - 1 || segment.cells <= 0) return row;
+			const maxCells = Math.max(0, rowWidth - 1 - start);
+			const text = sliceCells(segment.text, maxCells);
+			const cells = cellWidth(text);
+			if (!text || cells <= 0) return row;
+			return `${sliceCells(row, start)}${text}${sliceCellsRange(row, start + cells, rowWidth)}`;
+		}
+		function boxRow(rowIndex, width, height) {
+			const rowWidth = Math.max(0, Math.floor(width));
+			const rowHeight = Math.max(0, Math.floor(height));
+			if (!canDrawBox(rowWidth, rowHeight)) return contentLine(rowIndex, rowWidth, props.clear);
+			const chars = boxChars.value;
+			const innerW = Math.max(0, rowWidth - 2);
+			if (rowIndex === 0) {
+				let row = `${chars.tl}${repeatChar(chars.h, innerW)}${chars.tr}`;
+				const copy = headerCopySegment(rowWidth);
+				const title = headerTitleSegment(rowWidth, copy);
+				if (title) row = overlayCells(row, title, rowWidth);
+				if (copy) row = overlayCells(row, copy, rowWidth);
+				return row;
+			}
+			if (rowIndex === rowHeight - 1) return `${chars.bl}${repeatChar(chars.h, innerW)}${chars.br}`;
+			return `${chars.v}${contentLine(rowIndex - 1, innerW, true)}${chars.v}`;
+		}
+		function contentLine(rowIndex, width, pad) {
+			const showImage = imageCells.value != null && displayFit.value != null && graphicsProtocol.value != null;
+			const src = showImage ? spaces(width) : displayLines.value[rowIndex] ?? "";
+			const clipped = sliceCells(src, width);
+			return pad ? padCells(clipped, width) : clipped;
+		}
+		function innerRectFrom(full) {
+			const x = Math.floor(full.x) + (reservesBoxRows.value ? 1 : 0);
+			const y = Math.floor(full.y) + (reservesBoxRows.value ? 1 : 0);
+			const w = Math.max(0, Math.floor(full.w) - (reservesBoxRows.value ? 2 : 0));
+			const h$1 = Math.max(0, Math.floor(full.h) - (reservesBoxRows.value ? 2 : 0));
+			return {
+				x,
+				y,
+				w,
+				h: h$1
+			};
+		}
+		function queueImageGraphic(full, fit) {
+			const protocol = graphicsProtocol.value;
+			const cells = imageCells.value;
+			if (!protocol || !cells) {
+				queueClearGraphic();
+				return;
+			}
+			const inner = innerRectFrom(full);
+			if (inner.w <= 0 || inner.h <= 0) {
+				queueClearGraphic();
+				return;
+			}
+			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: 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`);
+			const built = createTerminalGraphicPngSequence({
+				protocol,
+				base64: cells.base64,
+				imageId,
+				placementId,
+				cols: cells.widthCells,
+				rows: cells.heightCells,
+				sourceWidth: cells.naturalWidth,
+				sourceHeight: cells.naturalHeight,
+				placementColumns: rect.w,
+				placementRows: rect.h,
+				transmissionColumns: fitW,
+				transmissionRows: fitH,
+				cropTransmission: false,
+				rect,
+				fullRect: fullRect$1,
+				zIndex: -1,
+				fallback: source.value
+			});
+			if (!built) {
+				queueClearGraphic();
+				return;
+			}
+			const id = `mermaid-image:${uid}:${renderVersion}`;
+			const output = graphicsOutput.value;
+			if (!output) {
+				queueClearGraphic();
+				return;
+			}
+			if (activeGraphicId != null && activeGraphicId !== id) {
+				try {
+					output.clear?.(activeGraphicId);
+				} catch {}
+				activeGraphicId = null;
+			}
+			const accepted = output.queue({
+				id,
+				x: rect.x,
+				y: rect.y,
+				w: rect.w,
+				h: rect.h,
+				protocol,
+				sequence: built.sequence,
+				resizeSequence: built.resizeSequence,
+				clearSequence: built.clearSequence,
+				fallbackText: source.value,
+				placementMoveWithoutClear: protocol === "kitty"
+			});
+			if (accepted) activeGraphicId = id;
+			else queueClearGraphic();
+		}
+		const copyHitRect = computed(() => {
+			const full = fullRect.value;
+			if (!visible.value || !props.copyButton || !canDrawBox(full.w, full.h)) return {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+			const copy = headerCopySegment(Math.max(0, Math.floor(full.w)));
+			if (!copy) return {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+			const raw = {
+				x: Math.floor(full.x) + copy.start,
+				y: Math.floor(full.y),
+				w: copy.cells,
+				h: 1
+			};
+			if (!layout.clipRect) return raw;
+			return intersectRect(raw, layout.clipRect) ?? {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+		});
+		const contentHitRect = computed(() => {
+			if (!visible.value) return {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+			const full = fullRect.value;
+			if (full.w <= 0 || full.h <= 0) return {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+			const inner = innerRectFrom(full);
+			if (inner.w <= 0 || inner.h <= 0) return {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+			if (!layout.clipRect) return inner;
+			return intersectRect(inner, layout.clipRect) ?? {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+		});
+		function clipboardCanWrite(api) {
+			return api.canWrite ?? api.supported;
+		}
+		async function writeClipboardText(text) {
+			const contextClipboard = terminalContext.clipboard;
+			if (contextClipboard) {
+				if (!clipboardCanWrite(contextClipboard)) throw new Error("Clipboard write not available in this runtime");
+				await contextClipboard.writeText(text);
+				return;
+			}
+			const navClipboard = globalThis.navigator?.clipboard;
+			if (navClipboard && typeof navClipboard.writeText === "function") {
+				await navClipboard.writeText(text);
+				return;
+			}
+			throw new Error("Clipboard write not available in this runtime");
+		}
+		async function copySource() {
+			const text = source.value;
+			const requestVersion = ++copyRequestVersion;
+			let ok = false;
+			let copyError;
+			try {
+				await writeClipboardText(text);
+				ok = true;
+			} catch (err) {
+				copyError = err;
+			}
+			if (!alive) return;
+			const isLatestForCurrentSource = requestVersion === copyRequestVersion && source.value === text;
+			if (isLatestForCurrentSource) if (ok) showCopiedFeedback();
+			else setCopied(false);
+			emit("copy", ok ? {
+				text,
+				ok
+			} : {
+				text,
+				ok,
+				error: copyError
+			});
+		}
+		function onCopyClick(event) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (Date.now() - lastDragAt < DRAG_CLICK_SUPPRESS_MS) return;
+			copySource();
+		}
+		function onCopyKeydown(event) {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			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,
+			zIndex: (parentEventZ.value ?? 0) + props.zIndex + 1,
+			visible: copyNodeActive.value,
+			focusable: copyNodeActive.value,
+			selectable: false,
+			handlers: copyNodeActive.value ? {
+				click: onCopyClick,
+				keydown: onCopyKeydown
+			} : {}
+		}));
+		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: 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,
+			rect: visible.value ? absRect.value : {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			},
+			deps: [
+				visible.value,
+				absRect.value,
+				fullRect.value,
+				imageCells.value,
+				displayFit.value,
+				zoomScale.value,
+				panX.value,
+				panY.value,
+				textSnapshot.value,
+				displayLines.value,
+				sourceLines.value,
+				currentStyle.value,
+				props.clear,
+				hasBox.value,
+				boxChars.value,
+				props.title,
+				props.copyButton,
+				copyLabel.value,
+				graphicsOutputVersion.value,
+				documentVersion.value
+			],
+			paint: (dirtyRows) => {
+				withTextWidthProvider(widthProvider, () => {
+					if (!visible.value) {
+						queueClearGraphic();
+						return;
+					}
+					const r = absRect.value;
+					const full = fullRect.value;
+					if (r.w <= 0 || r.h <= 0) {
+						queueClearGraphic();
+						return;
+					}
+					const style = currentStyle.value;
+					const dx = Math.max(0, Math.floor(r.x - full.x));
+					const fullY = Math.floor(full.y);
+					const fullW = Math.max(0, Math.floor(full.w));
+					const fullH = Math.max(0, Math.floor(full.h));
+					const blank = props.clear ? spaces(r.w) : "";
+					const paintRow = (y) => {
+						if (y < r.y || y >= r.y + r.h) return;
+						const rowIndex = y - fullY;
+						if (rowIndex < 0 || rowIndex >= fullH) {
+							if (props.clear) terminal.write(blank, {
+								x: r.x,
+								y,
+								style
+							});
+							return;
+						}
+						const src = boxRow(rowIndex, fullW, fullH);
+						const clipped = dx > 0 ? sliceCellsRange(src, dx, dx + r.w) : sliceCells(src, r.w);
+						const value = props.clear ? padCells(clipped, r.w) : clipped;
+						if (value || props.clear) terminal.write(value, {
+							x: r.x,
+							y,
+							style
+						});
+					};
+					if (imageCells.value && displayFit.value) queueImageGraphic(full, displayFit.value);
+					else queueClearGraphic();
+					if (dirtyRows?.length) {
+						for (const y of dirtyRows) paintRow(y);
+						return;
+					}
+					for (let y = r.y; y < r.y + r.h; y++) paintRow(y);
+				});
+			}
+		}));
+		return () => h("span", rootProps);
+	}
+});
+
+//#endregion
+//#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 };