@simon_he/vue-tui 1.1.2 → 1.1.4

package/dist/mermaid-uEfRItDe.js

@@ -0,0 +1,1205 @@
+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 { resolveMarkdownMathColor } from "./math-image-BZhmfUeu.js";
+import { computed, defineComponent, getCurrentInstance, h, inject, 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,
+	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;
+}
+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 rendered = new Resvg(svgText, { 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
+	},
+	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
+	}
+};
+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 documentVersion = shallowRef(0);
+		const copied = shallowRef(false);
+		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;
+		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 {}
+		}
+		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 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, sourceLines.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 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 renderImage(version) {
+			const code = source.value;
+			if (!code.trim()) {
+				if (!alive || version !== renderVersion) return;
+				imageCells.value = null;
+				bump();
+				return;
+			}
+			if (waitingForStreamingSourceToFinish.value || shouldSkipRenderForSize(code)) {
+				if (!alive || version !== renderVersion) return;
+				imageCells.value = null;
+				bump();
+				return;
+			}
+			imageCells.value = null;
+			bump();
+			const protocol = graphicsProtocol.value;
+			if (!protocol) return;
+			const options = resolveImageOptions();
+			const cached = getCachedMermaidImage(code, options);
+			if (cached) {
+				if (!alive || version !== renderVersion) return;
+				imageCells.value = cached;
+				bump();
+				return;
+			}
+			if (!isMermaidImageRendererReady()) {
+				loadMermaidImageRenderer().then((ready) => {
+					if (!alive || version !== renderVersion || !ready) return;
+					renderImage(version);
+				});
+				return;
+			}
+			const result = await rasterizeWithTimeout(code, options);
+			if (!alive || version !== renderVersion) return;
+			imageCells.value = result;
+			bump();
+		}
+		function scheduleRender() {
+			const version = ++renderVersion;
+			resetCopyFeedback(false);
+			imageCells.value = null;
+			if (waitingForStreamingSourceToFinish.value) {
+				builtOnce = true;
+				scheduler.cancelFrameTask?.(frameTaskId);
+				bump();
+				return;
+			}
+			if (!builtOnce || !props.streaming) {
+				builtOnce = true;
+				renderImage(version);
+				return;
+			}
+			const accepted = scheduler.queueFrameTask({
+				id: frameTaskId,
+				reason: "stream",
+				priority: "low",
+				sync: false,
+				run: () => {
+					if (!alive) return;
+					if (version !== renderVersion) return;
+					renderImage(version);
+				}
+			});
+			if (accepted === false) renderImage(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,
+			graphicsOutputVersion
+		], () => {
+			scheduleRender();
+		}, {
+			immediate: true,
+			deep: true
+		});
+		const unsubscribeMermaidImage = subscribeMermaidImage(() => {
+			if (!alive) return;
+			scheduleRender();
+		});
+		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) : sourceLines.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 offsetX = inner.w > fit.displayW ? Math.floor((inner.w - fit.displayW) / 2) : 0;
+			const rect = {
+				x: inner.x + offsetX,
+				y: inner.y,
+				w: fit.displayW,
+				h: fit.displayH
+			};
+			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: fit.displayW,
+				placementRows: fit.displayH,
+				rect,
+				fullRect: rect,
+				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: fit.displayW,
+				h: fit.displayH,
+				protocol,
+				sequence: built.sequence,
+				resizeSequence: built.resizeSequence,
+				clearSequence: built.clearSequence,
+				fallbackText: source.value
+			});
+			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 || !props.copyOnClick) 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();
+			copySource();
+		}
+		function onCopyKeydown(event) {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			event.stopPropagation();
+			copySource();
+		}
+		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 && 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 } : {}
+		}));
+		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,
+				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
+export { TBeautifulMermaid, TBeautifulMermaidText, TMermaid, TMermaidImage, TMermaidText$1 as TMermaidText, beautifulMermaidRenderer, clearMermaidImageCache, createBeautifulMermaidRenderer, getCachedMermaidImage, getMermaidImage, isMermaidImageRendererReady, loadMermaidImageRenderer, normalizeMermaidImageOptions, resolveMermaidImageColor, setMermaidImageRasterizer, subscribeMermaidImage };