@simon_he/vue-tui 0.0.8 → 1.0.0

package/dist/dom-renderer-BqGijQID.js

@@ -0,0 +1,1173 @@
+import { TERMINAL_RENDER_PLANES, getPlaneTerminal } from "./create-terminal-C2oiWFJU.js";
+import { sanitizeDomHref } from "./hyperlink-Bn02UXJb.js";
+import { ansiColorHex, ansiCssVar, installAnsiPaletteCssVars, isAnsiColorName } from "./ansi-palette-CNXqFciC.js";
+
+//#region src/renderer/capabilities.ts
+const DOM_RENDERER_CAPABILITIES = Object.freeze({
+	syncFlush: true,
+	scrollOperations: true,
+	domRows: true
+});
+const HEADLESS_RENDERER_CAPABILITIES = Object.freeze({
+	syncFlush: false,
+	scrollOperations: true,
+	domRows: false
+});
+const STDOUT_RENDERER_CAPABILITIES = Object.freeze({
+	syncFlush: true,
+	scrollOperations: true,
+	domRows: false
+});
+
+//#endregion
+//#region src/renderer/dom/dom-renderer.ts
+const DEFAULT_FONT_FAMILY = [
+	"ui-monospace",
+	"SFMono-Regular",
+	"Menlo",
+	"Monaco",
+	"Consolas",
+	"\"Sarasa Mono SC\"",
+	"\"Noto Sans Mono CJK SC\"",
+	"\"Source Han Mono SC\"",
+	"\"Liberation Mono\"",
+	"\"Courier New\"",
+	"monospace"
+].join(", ");
+const DEFAULT_SYNC_FLUSH_MAX_ROWS = 32;
+const DEFAULT_SYNC_FLUSH_CELL_BUDGET = 4096;
+const PREPASS_SAMPLE_ROWS = 512;
+const PREPASS_ENABLE_HIT_RATIO = .5;
+const PREPASS_DISABLE_HIT_RATIO = .25;
+const ACCESSIBILITY_ATTRS = [
+	"role",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-live",
+	"aria-multiline",
+	"aria-readonly"
+];
+function createEmptyRowStats() {
+	return {
+		rows: 0,
+		cacheHits: 0,
+		rowKeyPrepassChecks: 0,
+		rowKeyPrepassHits: 0,
+		rowKeyPrepassMisses: 0,
+		transparentBlankRows: 0,
+		plainTextRows: 0,
+		singleStyledRows: 0,
+		segmentReuseRows: 0,
+		fragmentRows: 0,
+		spansCreated: 0,
+		spansReused: 0,
+		textNodeUpdates: 0,
+		replaceChildren: 0
+	};
+}
+function freezeRowStats(stats) {
+	return Object.freeze({ ...stats });
+}
+function addRowStats(target, source) {
+	target.rows += source.rows;
+	target.cacheHits += source.cacheHits;
+	target.rowKeyPrepassChecks += source.rowKeyPrepassChecks;
+	target.rowKeyPrepassHits += source.rowKeyPrepassHits;
+	target.rowKeyPrepassMisses += source.rowKeyPrepassMisses;
+	target.transparentBlankRows += source.transparentBlankRows;
+	target.plainTextRows += source.plainTextRows;
+	target.singleStyledRows += source.singleStyledRows;
+	target.segmentReuseRows += source.segmentReuseRows;
+	target.fragmentRows += source.fragmentRows;
+	target.spansCreated += source.spansCreated;
+	target.spansReused += source.spansReused;
+	target.textNodeUpdates += source.textNodeUpdates;
+	target.replaceChildren += source.replaceChildren;
+}
+function applyAccessibilityOptions(container, options) {
+	if (options === false) return;
+	for (const attr of ACCESSIBILITY_ATTRS) container.removeAttribute(attr);
+	const role = options?.role ?? "application";
+	container.setAttribute("role", role);
+	container.setAttribute("aria-live", options?.live ?? "off");
+	if (options?.labelledBy) container.setAttribute("aria-labelledby", options.labelledBy);
+	else container.setAttribute("aria-label", options?.label ?? "Terminal");
+	if (options?.describedBy) container.setAttribute("aria-describedby", options.describedBy);
+	if (role === "textbox" || options?.multiline != null) container.setAttribute("aria-multiline", String(options?.multiline ?? true));
+	if (role === "textbox" || options?.readonly != null) container.setAttribute("aria-readonly", String(options?.readonly ?? true));
+}
+function visualStyleKey(style, linkOptions) {
+	const href = renderableHref(style, linkOptions) ?? "";
+	const key = [
+		style.fg ?? "",
+		style.bg ?? "",
+		style.bold ? "1" : "0",
+		style.dim ? "1" : "0",
+		style.italic ? "1" : "0",
+		style.underline ? "1" : "0",
+		style.inverse ? "1" : "0",
+		href
+	].join("|");
+	return key;
+}
+function resolveColorHex(color, palette) {
+	if (!color) return void 0;
+	if (color === "transparent") return void 0;
+	if (color.startsWith("#")) return color;
+	return ansiColorHex(color, palette);
+}
+function resolveColorCss(color) {
+	if (!color) return void 0;
+	if (color === "transparent") return void 0;
+	if (color.startsWith("#")) return color;
+	if (!isAnsiColorName(color)) return void 0;
+	return ansiCssVar(color);
+}
+function parseColorToRgb(color) {
+	if (color.startsWith("#")) {
+		const hex = color.slice(1);
+		if (hex.length === 3) {
+			const r = Number.parseInt(hex[0] + hex[0], 16);
+			const g = Number.parseInt(hex[1] + hex[1], 16);
+			const b = Number.parseInt(hex[2] + hex[2], 16);
+			return Number.isFinite(r) && Number.isFinite(g) && Number.isFinite(b) ? {
+				r,
+				g,
+				b
+			} : null;
+		}
+		if (hex.length === 6) {
+			const r = Number.parseInt(hex.slice(0, 2), 16);
+			const g = Number.parseInt(hex.slice(2, 4), 16);
+			const b = Number.parseInt(hex.slice(4, 6), 16);
+			return Number.isFinite(r) && Number.isFinite(g) && Number.isFinite(b) ? {
+				r,
+				g,
+				b
+			} : null;
+		}
+	}
+	const m = color.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+	if (m) {
+		const r = Number.parseInt(m[1], 10);
+		const g = Number.parseInt(m[2], 10);
+		const b = Number.parseInt(m[3], 10);
+		return {
+			r,
+			g,
+			b
+		};
+	}
+	return null;
+}
+function luminance({ r, g, b }) {
+	const srgb = [
+		r,
+		g,
+		b
+	].map((v) => {
+		const c = v / 255;
+		return c <= .03928 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * srgb[0] + .7152 * srgb[1] + .0722 * srgb[2];
+}
+function contrastText(bgColor) {
+	const rgb = parseColorToRgb(bgColor);
+	if (!rgb) return "#111827";
+	return luminance(rgb) > .6 ? "#111827" : "#e5e7eb";
+}
+function applyStyle(span, style, palette) {
+	const fgHex = resolveColorHex(style.fg, palette);
+	const bgHex = resolveColorHex(style.bg, palette);
+	const fgCss = resolveColorCss(style.fg);
+	const bgCss = resolveColorCss(style.bg);
+	const effectiveFg = style.inverse ? bgCss : fgCss;
+	const effectiveBg = style.inverse ? fgCss : bgCss;
+	const effectiveFgHex = style.inverse ? bgHex : fgHex;
+	const effectiveBgHex = style.inverse ? fgHex : bgHex;
+	if (span.tagName === "A") {
+		span.style.pointerEvents = "auto";
+		span.style.cursor = "pointer";
+		span.style.color = "inherit";
+		span.style.textDecoration = "inherit";
+	}
+	if (effectiveFg) {
+		span.style.color = effectiveFg;
+		if (!span.style.color && effectiveFgHex) span.style.color = effectiveFgHex;
+	}
+	if (effectiveBg) {
+		span.style.backgroundColor = effectiveBg;
+		if (!span.style.backgroundColor && effectiveBgHex) span.style.backgroundColor = effectiveBgHex;
+	}
+	if (!effectiveFg && style.inverse && effectiveBg && effectiveBgHex) span.style.color = contrastText(effectiveBgHex);
+	if (style.bold) span.style.fontWeight = "700";
+	if (style.italic) span.style.fontStyle = "italic";
+	if (style.dim) span.style.opacity = "0.75";
+	if (style.underline) span.style.textDecoration = "underline";
+}
+function measureCell(container) {
+	const probe = container.ownerDocument.createElement("span");
+	probe.textContent = "M";
+	probe.style.position = "absolute";
+	probe.style.visibility = "hidden";
+	probe.style.whiteSpace = "pre";
+	container.appendChild(probe);
+	const rect = probe.getBoundingClientRect();
+	probe.remove();
+	return {
+		cellWidth: Math.max(1, rect.width),
+		cellHeight: Math.max(1, rect.height)
+	};
+}
+function measureCharWidth(container, ch) {
+	const probe = container.ownerDocument.createElement("span");
+	probe.textContent = ch;
+	probe.style.position = "absolute";
+	probe.style.visibility = "hidden";
+	probe.style.whiteSpace = "pre";
+	container.appendChild(probe);
+	const rect = probe.getBoundingClientRect();
+	probe.remove();
+	return Math.max(0, rect.width);
+}
+function formatRowSegmentKeyPart(key, text, cols, wide) {
+	return `${key}:${text}:${cols}:${wide ? 1 : 0}`;
+}
+function formatSingleRowKey(key, text, cols, wide, style, linkOptions) {
+	const plain = isPlainVisualStyle(style, linkOptions);
+	const hasRenderableHref = renderableHref(style, linkOptions) != null;
+	if (!wide && plain) return `p:${text}:${cols}`;
+	if (!wide && !hasRenderableHref && !plain) return `s:${key}:${text}:${cols}`;
+	return `1:${formatRowSegmentKeyPart(key, text, cols, wide)}`;
+}
+function computeRowSegmentsWithKey(terminal, y, linkOptions) {
+	const cells = terminal.getRow(y);
+	let currentKey = null;
+	let currentStyle = null;
+	let currentText = "";
+	let currentCols = 0;
+	let currentWide = false;
+	const segments = [];
+	let keyBody = "";
+	let segmentCount = 0;
+	function pushSegment(segment) {
+		if (segmentCount === 1) {
+			const first = segments[0];
+			keyBody += `|${formatRowSegmentKeyPart(first.key, first.text, first.cols, first.wide)}`;
+		}
+		segments.push(segment);
+		segmentCount++;
+		if (segmentCount > 1) keyBody += `|${formatRowSegmentKeyPart(segment.key, segment.text, segment.cols, segment.wide)}`;
+	}
+	for (const cell of cells) {
+		if (cell.continuation) continue;
+		const ch = cell.ch || " ";
+		const cols = cell.width || 1;
+		const wide = cols === 2;
+		const nextStyle = cell.style;
+		const key = nextStyle === currentStyle && currentKey != null ? currentKey : visualStyleKey(nextStyle, linkOptions);
+		if (currentKey == null) {
+			currentKey = key;
+			currentStyle = nextStyle;
+			currentText = ch;
+			currentCols = cols;
+			currentWide = wide;
+			continue;
+		}
+		if (key === currentKey && wide === currentWide) {
+			currentText += ch;
+			currentCols += cols;
+			continue;
+		}
+		pushSegment({
+			text: currentText,
+			cols: currentCols,
+			wide: currentWide,
+			style: currentStyle,
+			key: currentKey
+		});
+		currentKey = key;
+		currentStyle = nextStyle;
+		currentText = ch;
+		currentCols = cols;
+		currentWide = wide;
+	}
+	if (currentKey != null) pushSegment({
+		text: currentText,
+		cols: currentCols,
+		wide: currentWide,
+		style: currentStyle,
+		key: currentKey
+	});
+	if (segmentCount === 0) return {
+		segments,
+		key: "0"
+	};
+	if (segmentCount === 1) {
+		const s = segments[0];
+		return {
+			segments,
+			key: formatSingleRowKey(s.key, s.text, s.cols, s.wide, s.style, linkOptions)
+		};
+	}
+	return {
+		segments,
+		key: `${segmentCount}${keyBody}`
+	};
+}
+function computeRowKey(terminal, y, linkOptions) {
+	const cells = terminal.getRow(y);
+	let currentKey = null;
+	let currentStyle = null;
+	let currentText = "";
+	let currentCols = 0;
+	let currentWide = false;
+	let firstKey = "";
+	let firstStyle = null;
+	let firstText = "";
+	let firstCols = 0;
+	let firstWide = false;
+	let keyBody = "";
+	let segmentCount = 0;
+	function pushSegment(key, text, cols, wide, style) {
+		if (segmentCount === 0) {
+			firstKey = key;
+			firstStyle = style;
+			firstText = text;
+			firstCols = cols;
+			firstWide = wide;
+		} else {
+			if (segmentCount === 1) keyBody += `|${formatRowSegmentKeyPart(firstKey, firstText, firstCols, firstWide)}`;
+			keyBody += `|${formatRowSegmentKeyPart(key, text, cols, wide)}`;
+		}
+		segmentCount++;
+	}
+	for (const cell of cells) {
+		if (cell.continuation) continue;
+		const ch = cell.ch || " ";
+		const cols = cell.width || 1;
+		const wide = cols === 2;
+		const nextStyle = cell.style;
+		const key = nextStyle === currentStyle && currentKey != null ? currentKey : visualStyleKey(nextStyle, linkOptions);
+		if (currentKey == null) {
+			currentKey = key;
+			currentStyle = nextStyle;
+			currentText = ch;
+			currentCols = cols;
+			currentWide = wide;
+			continue;
+		}
+		if (key === currentKey && wide === currentWide) {
+			currentText += ch;
+			currentCols += cols;
+			continue;
+		}
+		pushSegment(currentKey, currentText, currentCols, currentWide, currentStyle);
+		currentKey = key;
+		currentStyle = nextStyle;
+		currentText = ch;
+		currentCols = cols;
+		currentWide = wide;
+	}
+	if (currentKey != null) pushSegment(currentKey, currentText, currentCols, currentWide, currentStyle);
+	if (segmentCount === 0) return "0";
+	if (segmentCount === 1) return formatSingleRowKey(firstKey, firstText, firstCols, firstWide, firstStyle, linkOptions);
+	return `${segmentCount}${keyBody}`;
+}
+const rowCache = new WeakMap();
+function nowMs() {
+	const p = globalThis.performance;
+	if (p && typeof p.now === "function") return p.now();
+	return Date.now();
+}
+function isPlainVisualStyle(style, linkOptions) {
+	const hasRenderableHref = renderableHref(style, linkOptions) != null;
+	return !style.fg && !style.bg && !style.bold && !style.dim && !style.italic && !style.underline && !style.inverse && !hasRenderableHref;
+}
+function isTransparentBlankRow(segments, linkOptions) {
+	return segments.length === 1 && isPlainVisualStyle(segments[0].style, linkOptions) && segments[0].text.trim().length === 0;
+}
+function isPlainTextRow(segments, linkOptions) {
+	return segments.length === 1 && !segments[0].wide && isPlainVisualStyle(segments[0].style, linkOptions);
+}
+function normalizeLinkOptions(value) {
+	if (value === true) return {};
+	if (value === false || value == null) return false;
+	const activation = value.activation ?? (typeof value.onActivate === "function" ? "event" : "native");
+	if (activation === "event" && typeof value.onActivate !== "function") return {
+		...value,
+		activation: "native"
+	};
+	return {
+		...value,
+		activation
+	};
+}
+function linkOptionsKey(options) {
+	if (!options) return "disabled";
+	return JSON.stringify({
+		allowRelative: options.allowRelative !== false,
+		externalTarget: options.externalTarget ?? "_blank",
+		tabIndex: options.tabIndex ?? -1,
+		activation: options.activation ?? "native",
+		hasOnActivate: typeof options.onActivate === "function"
+	});
+}
+function renderableHref(style, linkOptions) {
+	if (!linkOptions) return null;
+	if (linkOptions.activation === "none") return null;
+	return sanitizeDomHref(style.href, { allowRelative: linkOptions.allowRelative !== false });
+}
+function isSingleStyledTextRow(segments, linkOptions) {
+	return segments.length === 1 && !segments[0].wide && !renderableHref(segments[0].style, linkOptions) && !isPlainVisualStyle(segments[0].style, linkOptions);
+}
+function canReuseSegmentSpans(segments, linkOptions) {
+	return segments.length > 1 && segments.every((segment) => !segment.wide && !renderableHref(segment.style, linkOptions));
+}
+function resetSpanStyle(span) {
+	span.removeAttribute("style");
+	if (span.tagName === "A") {
+		span.removeAttribute("href");
+		span.removeAttribute("target");
+		span.removeAttribute("rel");
+		delete span.dataset.vtHref;
+	}
+}
+function createSegmentElement(doc, style, options) {
+	const linkOptions = options.links;
+	if (!linkOptions) return doc.createElement("span");
+	const href = renderableHref(style, linkOptions);
+	if (!href) return doc.createElement("span");
+	const anchor = doc.createElement("a");
+	anchor.href = href;
+	anchor.dataset.vtHref = href;
+	const protocol = href.match(/^[a-z][a-z0-9+.-]*:/i)?.[0].toLowerCase() ?? null;
+	if (protocol === "http:" || protocol === "https:") {
+		anchor.target = linkOptions.externalTarget ?? "_blank";
+		anchor.rel = "noopener noreferrer";
+	}
+	anchor.tabIndex = linkOptions.tabIndex ?? -1;
+	anchor.draggable = false;
+	anchor.addEventListener("pointerdown", options.onAnchorPointerDown);
+	anchor.addEventListener("click", options.onAnchorClick);
+	return anchor;
+}
+function isSpanNode(node, lineEl) {
+	const SpanCtor = lineEl.ownerDocument.defaultView?.HTMLSpanElement ?? globalThis.HTMLSpanElement;
+	return typeof SpanCtor === "function" && node instanceof SpanCtor;
+}
+function textNodeType(lineEl) {
+	return lineEl.ownerDocument.defaultView?.Node.TEXT_NODE ?? 3;
+}
+function tryUpdateSegmentSpans(lineEl, segments, metrics, palette) {
+	if (lineEl.childNodes.length !== segments.length) return false;
+	for (let i = 0; i < segments.length; i++) {
+		const node = lineEl.childNodes[i];
+		if (!isSpanNode(node, lineEl)) return false;
+		if (node.dataset.vtFastRow !== "segment") return false;
+		if (node.dataset.vtSegmentIndex !== String(i)) return false;
+	}
+	for (let i = 0; i < segments.length; i++) {
+		const span = lineEl.childNodes[i];
+		const seg = segments[i];
+		span.textContent = seg.text;
+		resetSpanStyle(span);
+		span.style.cssText = `display:inline-block;width:${seg.cols * metrics.cellWidth}px;height:${metrics.cellHeight}px;overflow:hidden;white-space:pre;vertical-align:top`;
+		applyStyle(span, seg.style, palette);
+	}
+	return true;
+}
+function renderRow(terminal, metrics, wideScaleX, y, lineEl, stats, enableRowKeyPrepass, palette, linkOptions, onAnchorClick, onAnchorPointerDown, linkVersion) {
+	stats.rows++;
+	const doc = lineEl.ownerDocument;
+	const rowModeKey = `links:${linkVersion}`;
+	const cachedKey = rowCache.get(lineEl);
+	if (enableRowKeyPrepass && cachedKey != null) {
+		stats.rowKeyPrepassChecks++;
+		const prepassKey = `${rowModeKey}|${computeRowKey(terminal, y, linkOptions)}`;
+		if (cachedKey === prepassKey) {
+			stats.rowKeyPrepassHits++;
+			stats.cacheHits++;
+			return;
+		}
+		stats.rowKeyPrepassMisses++;
+	}
+	const { segments, key } = computeRowSegmentsWithKey(terminal, y, linkOptions);
+	const newKey = `${rowModeKey}|${key}`;
+	if (cachedKey === newKey) {
+		stats.cacheHits++;
+		return;
+	}
+	rowCache.set(lineEl, newKey);
+	if (isTransparentBlankRow(segments, linkOptions)) {
+		stats.transparentBlankRows++;
+		stats.replaceChildren++;
+		lineEl.replaceChildren();
+		return;
+	}
+	if (isPlainTextRow(segments, linkOptions)) {
+		stats.plainTextRows++;
+		stats.textNodeUpdates++;
+		const text = segments[0].text;
+		const firstChild = lineEl.firstChild;
+		if (lineEl.childNodes.length === 1 && firstChild?.nodeType === textNodeType(lineEl)) firstChild.nodeValue = text;
+		else lineEl.textContent = text;
+		return;
+	}
+	if (isSingleStyledTextRow(segments, linkOptions)) {
+		const seg = segments[0];
+		const firstChild = lineEl.firstChild;
+		let span;
+		if (lineEl.childNodes.length === 1 && isSpanNode(firstChild, lineEl) && firstChild.dataset.vtFastRow === "styled") {
+			span = firstChild;
+			stats.spansReused++;
+		} else {
+			span = createSegmentElement(doc, seg.style, {
+				links: linkOptions,
+				onAnchorClick,
+				onAnchorPointerDown
+			});
+			span.dataset.vtFastRow = "styled";
+			stats.spansCreated++;
+			stats.replaceChildren++;
+			lineEl.replaceChildren(span);
+		}
+		stats.singleStyledRows++;
+		span.textContent = seg.text;
+		resetSpanStyle(span);
+		span.style.cssText = `display:inline-block;width:${seg.cols * metrics.cellWidth}px;height:${metrics.cellHeight}px;overflow:hidden;white-space:pre;vertical-align:top`;
+		applyStyle(span, seg.style, palette);
+		return;
+	}
+	const canReuseSpans = canReuseSegmentSpans(segments, linkOptions);
+	if (canReuseSpans && tryUpdateSegmentSpans(lineEl, segments, metrics, palette)) {
+		stats.segmentReuseRows++;
+		stats.spansReused += segments.length;
+		return;
+	}
+	stats.fragmentRows++;
+	stats.spansCreated += segments.length;
+	stats.replaceChildren++;
+	const fragment = doc.createDocumentFragment();
+	for (let i = 0; i < segments.length; i++) {
+		const seg = segments[i];
+		const span = createSegmentElement(doc, seg.style, {
+			links: linkOptions,
+			onAnchorClick,
+			onAnchorPointerDown
+		});
+		if (canReuseSpans) {
+			span.dataset.vtFastRow = "segment";
+			span.dataset.vtSegmentIndex = String(i);
+		}
+		if (seg.wide && wideScaleX > 1.01) {
+			const inner = doc.createElement("span");
+			inner.textContent = seg.text;
+			inner.style.cssText = `display:inline-block;white-space:pre;transform:scaleX(${wideScaleX});transform-origin:left`;
+			span.appendChild(inner);
+		} else span.textContent = seg.text;
+		span.style.cssText = `display:inline-block;width:${seg.cols * metrics.cellWidth}px;height:${metrics.cellHeight}px;overflow:hidden;white-space:pre;vertical-align:top`;
+		applyStyle(span, seg.style, palette);
+		fragment.appendChild(span);
+	}
+	lineEl.replaceChildren(fragment);
+}
+function createDomRenderer(terminal, container, options = {}) {
+	const doc = container.ownerDocument;
+	let rendererLinkOptions = normalizeLinkOptions(options.links);
+	let rendererOnLinkClick = options.onLinkClick;
+	let rendererLinkOptionsKey = linkOptionsKey(rendererLinkOptions);
+	let rendererLinkVersion = 0;
+	const onAnchorClick = (event) => {
+		const anchor = event.currentTarget;
+		const href = anchor.dataset.vtHref;
+		if (!href || !rendererLinkOptions) return;
+		const linkClickResult = rendererOnLinkClick?.(event, href);
+		if (linkClickResult === false) {
+			event.preventDefault();
+			return;
+		}
+		if (rendererLinkOptions.activation === "event") {
+			event.preventDefault();
+			const activateResult = rendererLinkOptions.onActivate?.(href, event);
+			if (activateResult === false) event.preventDefault();
+			return;
+		}
+	};
+	const onAnchorPointerDown = () => {
+		if (!rendererLinkOptions || rendererLinkOptions.activation !== "event") return;
+		try {
+			container.focus({ preventScroll: true });
+		} catch {
+			container.focus();
+		}
+	};
+	container.style.fontFamily = DEFAULT_FONT_FAMILY;
+	container.style.whiteSpace = "pre";
+	container.style.display = "inline-block";
+	container.style.overflow = "hidden";
+	container.style.position = "relative";
+	container.style.userSelect = "text";
+	container.style.outline = "none";
+	container.style.contain = "layout style";
+	if (options.accessibility !== false && !container.hasAttribute("tabindex")) container.tabIndex = 0;
+	applyAccessibilityOptions(container, options.accessibility);
+	let palette = options.palette ?? null;
+	installAnsiPaletteCssVars(container, palette);
+	let metrics = measureCell(container);
+	let wideScaleX = 1;
+	const planeLayers = new Map();
+	let raf = 0;
+	const pending = new Map();
+	let disposed = false;
+	const syncFlushMaxRows = Math.max(0, Math.floor(options.syncFlushMaxRows ?? DEFAULT_SYNC_FLUSH_MAX_ROWS));
+	const syncFlushCellBudget = Math.max(0, Math.floor(options.syncFlushCellBudget ?? DEFAULT_SYNC_FLUSH_CELL_BUDGET));
+	const rowKeyPrepassMode = options.enableRowKeyPrepass ?? "auto";
+	const capabilities = Object.freeze({
+		...DOM_RENDERER_CAPABILITIES,
+		scrollOperations: options.enableScrollOperations !== false
+	});
+	let syncFlushRequested = 0;
+	let syncFlushPerformed = 0;
+	let syncFlushDeferred = 0;
+	let lastSyncFlushDecision = null;
+	let domFlushCount = 0;
+	let lastDomFlush = null;
+	const rowRenderTotal = createEmptyRowStats();
+	let lastRowRenderStats = null;
+	let rowKeyPrepassAutoReady = false;
+	let rowKeyPrepassAutoDecision = "sampling";
+	let rowKeyPrepassSampleRows = 0;
+	let rowKeyPrepassSampleHits = 0;
+	let rowKeyPrepassSampleMisses = 0;
+	let rowKeyPrepassLastSampleRows = 0;
+	let rowKeyPrepassLastSampleHitRatio = null;
+	function rowKeyPrepassDecision() {
+		if (rowKeyPrepassMode === true) return "forced-enabled";
+		if (rowKeyPrepassMode === false) return "forced-disabled";
+		return rowKeyPrepassAutoDecision;
+	}
+	const debugStats = {
+		get syncFlush() {
+			return {
+				requested: syncFlushRequested,
+				performed: syncFlushPerformed,
+				deferred: syncFlushDeferred,
+				last: lastSyncFlushDecision
+			};
+		},
+		get flush() {
+			return {
+				count: domFlushCount,
+				last: lastDomFlush
+			};
+		},
+		get rowRender() {
+			return {
+				total: freezeRowStats(rowRenderTotal),
+				lastFlush: lastRowRenderStats
+			};
+		},
+		get rowKeyPrepass() {
+			const sampleHitRatio = rowKeyPrepassSampleRows > 0 ? rowKeyPrepassSampleHits / rowKeyPrepassSampleRows : null;
+			return {
+				mode: rowKeyPrepassMode,
+				decision: rowKeyPrepassDecision(),
+				sampleRows: rowKeyPrepassSampleRows,
+				sampleHits: rowKeyPrepassSampleHits,
+				sampleMisses: rowKeyPrepassSampleMisses,
+				sampleHitRatio,
+				lastSampleRows: rowKeyPrepassLastSampleRows,
+				lastSampleHitRatio: rowKeyPrepassLastSampleHitRatio
+			};
+		}
+	};
+	function shouldUseRowKeyPrepass() {
+		if (rowKeyPrepassMode === true) return true;
+		if (rowKeyPrepassMode === false) return false;
+		return rowKeyPrepassAutoReady && rowKeyPrepassAutoDecision !== "disabled";
+	}
+	function recordRowKeyPrepassAutoStats(stats) {
+		if (rowKeyPrepassMode !== "auto") return;
+		if (stats.rowKeyPrepassChecks === 0) return;
+		rowKeyPrepassSampleRows += stats.rowKeyPrepassChecks;
+		rowKeyPrepassSampleHits += stats.rowKeyPrepassHits;
+		rowKeyPrepassSampleMisses += stats.rowKeyPrepassMisses;
+		if (rowKeyPrepassSampleRows < PREPASS_SAMPLE_ROWS) return;
+		const hitRatio = rowKeyPrepassSampleHits / rowKeyPrepassSampleRows;
+		rowKeyPrepassLastSampleRows = rowKeyPrepassSampleRows;
+		rowKeyPrepassLastSampleHitRatio = hitRatio;
+		if (rowKeyPrepassAutoDecision === "enabled") {
+			if (hitRatio < PREPASS_DISABLE_HIT_RATIO) rowKeyPrepassAutoDecision = "disabled";
+		} else if (hitRatio >= PREPASS_ENABLE_HIT_RATIO) rowKeyPrepassAutoDecision = "enabled";
+		else rowKeyPrepassAutoDecision = "disabled";
+		rowKeyPrepassSampleRows = 0;
+		rowKeyPrepassSampleHits = 0;
+		rowKeyPrepassSampleMisses = 0;
+	}
+	function recordRowRenderStats(stats) {
+		if (stats.rows === 0) return;
+		addRowStats(rowRenderTotal, stats);
+		lastRowRenderStats = freezeRowStats(stats);
+	}
+	function applyPlaneOffset(plane, offsetPx) {
+		const layer = planeLayers.get(plane);
+		if (!layer) return;
+		const next = Number.isFinite(offsetPx) ? offsetPx : 0;
+		if (layer.offsetPx === next) return;
+		layer.offsetPx = next;
+		layer.contentEl.style.transform = next ? `translateY(${next}px)` : "translateY(0px)";
+	}
+	function applyPlaneViewport(plane, viewport) {
+		const layer = planeLayers.get(plane);
+		if (!layer) return;
+		const totalHeight = terminal.size().rows * metrics.cellHeight;
+		if (!viewport) {
+			layer.viewportTopPx = 0;
+			layer.viewportHeightPx = null;
+			layer.el.style.clipPath = "none";
+			return;
+		}
+		const topPx = Math.max(0, Math.min(totalHeight, Math.floor(viewport.topPx)));
+		const heightPx = Math.max(0, Math.min(totalHeight - topPx, Math.floor(viewport.heightPx)));
+		layer.viewportTopPx = topPx;
+		layer.viewportHeightPx = heightPx;
+		if (topPx === 0 && heightPx >= totalHeight) {
+			layer.el.style.clipPath = "none";
+			return;
+		}
+		const bottomPx = Math.max(0, totalHeight - topPx - heightPx);
+		layer.el.style.clipPath = `inset(${topPx}px 0px ${bottomPx}px 0px)`;
+	}
+	function rebuildLines() {
+		const { rows, cols } = terminal.size();
+		container.style.width = `${cols * metrics.cellWidth}px`;
+		container.style.height = `${rows * metrics.cellHeight}px`;
+		const fragment = doc.createDocumentFragment();
+		for (let i = 0; i < TERMINAL_RENDER_PLANES.length; i++) {
+			const plane = TERMINAL_RENDER_PLANES[i];
+			const planeTerminal = getPlaneTerminal(terminal, plane);
+			let layer = planeLayers.get(plane);
+			if (!layer) {
+				const el = doc.createElement("div");
+				const contentEl = doc.createElement("div");
+				el.dataset.vtPlane = plane;
+				el.style.pointerEvents = "none";
+				contentEl.style.position = "absolute";
+				contentEl.style.left = "0";
+				contentEl.style.top = "0";
+				layer = {
+					el,
+					contentEl,
+					lines: [],
+					offsetPx: 0,
+					terminal: planeTerminal,
+					viewportTopPx: 0,
+					viewportHeightPx: null
+				};
+				planeLayers.set(plane, layer);
+			}
+			layer.terminal = planeTerminal;
+			layer.el.style.position = "absolute";
+			layer.el.style.left = "0";
+			layer.el.style.top = "0";
+			layer.el.style.width = `${cols * metrics.cellWidth}px`;
+			layer.el.style.height = `${rows * metrics.cellHeight}px`;
+			layer.el.style.overflow = "hidden";
+			layer.el.style.zIndex = String(i);
+			layer.contentEl.style.width = `${cols * metrics.cellWidth}px`;
+			layer.contentEl.style.height = `${rows * metrics.cellHeight}px`;
+			applyPlaneOffset(plane, layer.offsetPx);
+			applyPlaneViewport(plane, layer.viewportHeightPx == null ? null : {
+				topPx: layer.viewportTopPx,
+				heightPx: layer.viewportHeightPx
+			});
+			const lineFragment = doc.createDocumentFragment();
+			layer.lines = Array.from({ length: rows }, () => {
+				const line = doc.createElement("div");
+				line.style.cssText = `height:${metrics.cellHeight}px;width:${cols * metrics.cellWidth}px;overflow:hidden;contain:layout style`;
+				lineFragment.appendChild(line);
+				return line;
+			});
+			layer.contentEl.replaceChildren(lineFragment);
+			layer.el.replaceChildren(layer.contentEl);
+			fragment.appendChild(layer.el);
+		}
+		container.replaceChildren(fragment);
+	}
+	function refresh() {
+		cancelPendingRaf();
+		clearPendingRows();
+		metrics = measureCell(container);
+		const wideW = measureCharWidth(container, "中");
+		wideScaleX = wideW > 0 ? Math.max(1, Math.min(2, metrics.cellWidth * 2 / wideW)) : 1;
+		rebuildLines();
+		const size = terminal.size();
+		const rowStats = createEmptyRowStats();
+		for (const plane of TERMINAL_RENDER_PLANES) {
+			const layer = planeLayers.get(plane);
+			if (!layer) continue;
+			for (let y = 0; y < size.rows; y++) renderRow(layer.terminal, metrics, wideScaleX, y, layer.lines[y], rowStats, shouldUseRowKeyPrepass(), palette, rendererLinkOptions, onAnchorClick, onAnchorPointerDown, rendererLinkVersion);
+		}
+		recordRowKeyPrepassAutoStats(rowStats);
+		recordRowRenderStats(rowStats);
+	}
+	const pendingRowCountsByPlane = new Map();
+	let pendingTotalRowCount = 0;
+	let lastSyncFlushWarnAt = 0;
+	function cancelPendingRaf() {
+		if (raf > 0) cancelAnimationFrame(raf);
+		raf = 0;
+	}
+	function clearPendingRows() {
+		pending.clear();
+		pendingRowCountsByPlane.clear();
+		pendingTotalRowCount = 0;
+	}
+	function addPendingRow(plane, rows, y) {
+		if (rows.has(y)) return;
+		rows.add(y);
+		pendingTotalRowCount++;
+		pendingRowCountsByPlane.set(plane, (pendingRowCountsByPlane.get(plane) ?? 0) + 1);
+	}
+	function deletePendingRow(plane, rows, y) {
+		if (!rows.delete(y)) return;
+		pendingTotalRowCount--;
+		const nextCount = (pendingRowCountsByPlane.get(plane) ?? 1) - 1;
+		if (nextCount > 0) pendingRowCountsByPlane.set(plane, nextCount);
+		else pendingRowCountsByPlane.delete(plane);
+	}
+	function hasPendingRowsInRange(plane, startY, endY) {
+		const rows = pending.get(plane);
+		if (!rows?.size) return false;
+		for (const y of rows) if (y >= startY && y < endY) return true;
+		return false;
+	}
+	function addPendingRowRange(plane, startY, endY) {
+		let rows = pending.get(plane);
+		if (!rows) {
+			rows = new Set();
+			pending.set(plane, rows);
+		}
+		for (let y = startY; y < endY; y++) addPendingRow(plane, rows, y);
+	}
+	function invalidateRowCacheRange(layer, startY, endY) {
+		for (let y = startY; y < endY; y++) {
+			const line = layer.lines[y];
+			if (line) rowCache.delete(line);
+		}
+	}
+	function reorderLayerDomRows(layer, startY, endY) {
+		const before = layer.lines[endY] ?? null;
+		const fragment = layer.contentEl.ownerDocument.createDocumentFragment();
+		for (let y = startY; y < endY; y++) {
+			const line = layer.lines[y];
+			if (line) fragment.appendChild(line);
+		}
+		layer.contentEl.insertBefore(fragment, before);
+	}
+	function scrollOperationRange(op) {
+		const { rows } = terminal.size();
+		const startY = Math.max(0, Math.min(rows, Math.floor(op.startY)));
+		const endY = Math.max(0, Math.min(rows, Math.floor(op.endY)));
+		return {
+			startY,
+			endY
+		};
+	}
+	function addFallbackRows(rows, startY, endY) {
+		for (let y = startY; y < endY; y++) rows.add(y);
+	}
+	function unionRows(a, b) {
+		if (a === null) return null;
+		if (!b.length) return a;
+		const rows = new Set(a);
+		for (const y of b) rows.add(y);
+		return Array.from(rows).sort((left, right) => left - right);
+	}
+	function invalidateAndRepaintScrollRange(plane, layer, startY, endY) {
+		invalidateRowCacheRange(layer, startY, endY);
+		addPendingRowRange(plane, startY, endY);
+	}
+	function applyScrollOperationToLayer(layer, op) {
+		const { startY, endY } = scrollOperationRange(op);
+		const delta = Math.trunc(op.delta);
+		const height = endY - startY;
+		const region = layer.lines.slice(startY, endY);
+		const nextRegion = delta > 0 ? [...region.slice(delta), ...region.slice(0, delta)] : [...region.slice(height + delta), ...region.slice(0, height + delta)];
+		for (let i = 0; i < height; i++) {
+			const line = nextRegion[i];
+			if (!line) continue;
+			layer.lines[startY + i] = line;
+			rowCache.delete(line);
+		}
+		reorderLayerDomRows(layer, startY, endY);
+	}
+	function canApplyScrollOperations(planes, operations) {
+		if (!capabilities.scrollOperations || planes.length !== 1 || !operations?.length) return false;
+		const plane = planes[0];
+		const layer = planeLayers.get(plane);
+		if (!layer) return false;
+		for (const op of operations) {
+			const { startY, endY } = scrollOperationRange(op);
+			const delta = Math.trunc(op.delta);
+			const height = endY - startY;
+			if (height <= 0 || delta === 0 || Math.abs(delta) >= height) return false;
+			if (hasPendingRowsInRange(plane, startY, endY)) return false;
+		}
+		return true;
+	}
+	function applyScrollOperations(planes, operations) {
+		if (!operations?.length) return;
+		for (const plane of planes) {
+			const layer = planeLayers.get(plane);
+			if (!layer) continue;
+			for (const op of operations) applyScrollOperationToLayer(layer, op);
+		}
+	}
+	function markScrollOperationRangesPending(planes, operations) {
+		if (!operations?.length) return [];
+		const fallbackRows = new Set();
+		for (const plane of planes) {
+			const layer = planeLayers.get(plane);
+			if (!layer) continue;
+			for (const op of operations) {
+				const { startY, endY } = scrollOperationRange(op);
+				invalidateAndRepaintScrollRange(plane, layer, startY, endY);
+				addFallbackRows(fallbackRows, startY, endY);
+			}
+		}
+		return Array.from(fallbackRows).sort((a, b) => a - b);
+	}
+	function estimateSyncFlushWork(scope) {
+		const size = terminal.size();
+		const rowCount = scope.rows == null ? size.rows : scope.rows.length;
+		const planeCount = scope.planes.length || TERMINAL_RENDER_PLANES.length;
+		const cellWork = rowCount * size.cols * planeCount;
+		return {
+			rowCount,
+			planeCount,
+			cellWork
+		};
+	}
+	function estimateScrollOperationWork(planes, operations) {
+		const size = terminal.size();
+		const planeCount = planes.length || TERMINAL_RENDER_PLANES.length;
+		let rowCount = 0;
+		for (const op of operations ?? []) {
+			const { startY, endY } = scrollOperationRange(op);
+			rowCount += Math.max(0, endY - startY);
+		}
+		return {
+			rowCount,
+			planeCount,
+			cellWork: rowCount * size.cols * planeCount
+		};
+	}
+	function combineSyncFlushWork(repaintWork, scrollWork) {
+		return {
+			rowCount: Math.max(repaintWork.rowCount, scrollWork.rowCount),
+			planeCount: Math.max(repaintWork.planeCount, scrollWork.planeCount),
+			cellWork: repaintWork.cellWork + scrollWork.cellWork
+		};
+	}
+	function recordSyncFlushDecision(work, performed, deferredReason) {
+		syncFlushRequested++;
+		if (performed) syncFlushPerformed++;
+		else syncFlushDeferred++;
+		lastSyncFlushDecision = {
+			performed,
+			deferredReason,
+			rows: work.rowCount,
+			planes: work.planeCount,
+			cells: work.cellWork,
+			maxRows: syncFlushMaxRows,
+			maxCells: syncFlushCellBudget
+		};
+	}
+	function recordLargeSyncFlush(work) {
+		if (!globalThis.__VT_DEBUG_PERF__) return;
+		if (work.rowCount <= syncFlushMaxRows && work.cellWork <= syncFlushCellBudget) return;
+		const size = terminal.size();
+		const now = Date.now();
+		if (now - lastSyncFlushWarnAt < 1e3) return;
+		lastSyncFlushWarnAt = now;
+		console.warn(`[vue-tui] sync DOM flush request deferred to rAF: rows=${work.rowCount} maxRows=${syncFlushMaxRows} cols=${size.cols} planes=${work.planeCount} cells=${work.cellWork} maxCells=${syncFlushCellBudget}`);
+	}
+	function shouldSyncFlush(work) {
+		return work.rowCount <= syncFlushMaxRows && work.cellWork <= syncFlushCellBudget;
+	}
+	function scopeWillDrainAllPending(scope) {
+		if (pendingTotalRowCount === 0) return true;
+		if (scope.rows !== null && pendingTotalRowCount > scope.rows.length * scope.planes.length) return false;
+		const scopePlanes = new Set(scope.planes);
+		for (const plane of pendingRowCountsByPlane.keys()) if (!scopePlanes.has(plane)) return false;
+		if (scope.rows === null) return true;
+		const scopeRows = new Set(scope.rows);
+		for (const [plane, rows] of pending) {
+			if (!scopePlanes.has(plane)) return false;
+			if (rows.size > scopeRows.size) return false;
+			for (const y of rows) if (!scopeRows.has(y)) return false;
+		}
+		return true;
+	}
+	function flushPending(scope, options$1) {
+		if (options$1?.clearRaf !== false) raf = 0;
+		if (disposed) return;
+		const startedAt = nowMs();
+		const planesToFlush = scope?.planes ?? TERMINAL_RENDER_PLANES;
+		let flushedRows = 0;
+		const rowStats = createEmptyRowStats();
+		const useRowKeyPrepass = shouldUseRowKeyPrepass();
+		for (const plane of planesToFlush) {
+			const layer = planeLayers.get(plane);
+			const rows = pending.get(plane);
+			if (!layer || !rows?.size) continue;
+			const flushRow = (y) => {
+				if (!rows.has(y)) return;
+				const line = layer.lines[y];
+				if (line) renderRow(layer.terminal, metrics, wideScaleX, y, line, rowStats, useRowKeyPrepass, palette, rendererLinkOptions, onAnchorClick, onAnchorPointerDown, rendererLinkVersion);
+				deletePendingRow(plane, rows, y);
+				flushedRows++;
+			};
+			if (scope?.rows == null) for (const y of rows) flushRow(y);
+			else for (const y of scope.rows) flushRow(y);
+			if (rows.size === 0) pending.delete(plane);
+		}
+		if (flushedRows > 0) {
+			recordRowKeyPrepassAutoStats(rowStats);
+			recordRowRenderStats(rowStats);
+			rowKeyPrepassAutoReady = true;
+			domFlushCount++;
+			lastDomFlush = {
+				mode: options$1?.mode ?? "deferred",
+				startedAt,
+				durationMs: nowMs() - startedAt,
+				planeRows: flushedRows,
+				planes: planesToFlush.length
+			};
+		}
+		if (pending.size > 0) scheduleRafIfNeeded();
+	}
+	function scheduleRafIfNeeded() {
+		if (raf || disposed) return;
+		raf = -1;
+		const id = requestAnimationFrame(() => {
+			flushPending(void 0, { mode: "deferred" });
+		});
+		if (raf === -1) raf = id;
+	}
+	const offCommit = terminal.on("commit", ({ dirtyRows, planes, sync, scrollOperations }) => {
+		const activePlanes = planes?.length ? planes : TERMINAL_RENDER_PLANES;
+		const dirtyCommitRows = dirtyRows === null ? null : [...dirtyRows];
+		const initialSyncWork = estimateSyncFlushWork({
+			planes: activePlanes,
+			rows: dirtyCommitRows
+		});
+		const scrollWork = estimateScrollOperationWork(activePlanes, scrollOperations);
+		const combinedSyncWork = combineSyncFlushWork(initialSyncWork, scrollWork);
+		const shouldApplyScrollOperations = Boolean(sync) && shouldSyncFlush(combinedSyncWork) && canApplyScrollOperations(activePlanes, scrollOperations);
+		const fallbackRows = shouldApplyScrollOperations ? [] : markScrollOperationRangesPending(activePlanes, scrollOperations);
+		if (shouldApplyScrollOperations) applyScrollOperations(activePlanes, scrollOperations);
+		const commitRows = unionRows(dirtyCommitRows, fallbackRows);
+		if (dirtyRows === null) {
+			const size = terminal.size();
+			for (const plane of activePlanes) {
+				let rows = pending.get(plane);
+				if (!rows) {
+					rows = new Set();
+					pending.set(plane, rows);
+				}
+				for (let y = 0; y < size.rows; y++) addPendingRow(plane, rows, y);
+			}
+		} else for (const plane of activePlanes) {
+			let rows = pending.get(plane);
+			if (!rows) {
+				rows = new Set();
+				pending.set(plane, rows);
+			}
+			for (const y of commitRows ?? dirtyRows) addPendingRow(plane, rows, y);
+		}
+		if (sync) {
+			const scope = {
+				planes: activePlanes,
+				rows: commitRows
+			};
+			const syncWork = estimateSyncFlushWork(scope);
+			recordLargeSyncFlush(syncWork);
+			if (!shouldSyncFlush(syncWork)) {
+				recordSyncFlushDecision(syncWork, false, "budget");
+				scheduleRafIfNeeded();
+				return;
+			}
+			recordSyncFlushDecision(syncWork, true);
+			const drainedAll = scopeWillDrainAllPending(scope);
+			if (raf > 0 && drainedAll) {
+				cancelAnimationFrame(raf);
+				raf = 0;
+			}
+			flushPending(scope, {
+				clearRaf: drainedAll,
+				mode: "sync"
+			});
+			if (!drainedAll) scheduleRafIfNeeded();
+		} else if (!raf) scheduleRafIfNeeded();
+	});
+	const offResize = terminal.on("resize", () => {
+		refresh();
+	});
+	function updateTheme(next) {
+		if (disposed) return;
+		let changed = false;
+		if ("palette" in next) {
+			palette = next.palette ?? null;
+			installAnsiPaletteCssVars(container, palette);
+			changed = true;
+		}
+		if (changed) refresh();
+	}
+	function updateOptions(next) {
+		if (disposed) return;
+		if (Object.prototype.hasOwnProperty.call(next, "onLinkClick")) rendererOnLinkClick = next.onLinkClick;
+		if (!Object.prototype.hasOwnProperty.call(next, "links")) return;
+		const normalized = normalizeLinkOptions(next.links);
+		const nextKey = linkOptionsKey(normalized);
+		rendererLinkOptions = normalized;
+		if (nextKey === rendererLinkOptionsKey) return;
+		rendererLinkOptionsKey = nextKey;
+		rendererLinkVersion++;
+		refresh();
+	}
+	refresh();
+	terminal.commit();
+	return {
+		container,
+		capabilities,
+		debugStats,
+		get metrics() {
+			return metrics;
+		},
+		refresh,
+		updateTheme,
+		updateOptions,
+		dispose() {
+			disposed = true;
+			offCommit();
+			offResize();
+			cancelPendingRaf();
+			clearPendingRows();
+			planeLayers.clear();
+			container.replaceChildren();
+		},
+		setPlaneOffset(plane, offsetPx) {
+			applyPlaneOffset(plane, offsetPx);
+		},
+		setPlaneViewport(plane, viewport) {
+			applyPlaneViewport(plane, viewport);
+		}
+	};
+}
+
+//#endregion
+export { DOM_RENDERER_CAPABILITIES, createDomRenderer };