@simon_he/vue-tui 1.0.2 → 1.1.0

package/dist/{tlog-theme-CvLFNMwk.js → tlog-theme-Bul2Na3u.js}

@@ -1,10 +1,11 @@
-import { sanitizeTerminalHref } from "./hyperlink-Bn02UXJb.js";
-import { applyAnsiSgrStyle, parseAnsiSgr } from "./sgr-BmzxEjAO.js";
-import { EventZIndexContextKey, LayoutContextKey, RenderPlaneContextKey, RenderStackKey, applyWheelScroll, createWheelScrollState, forEachTextCellSegment, formatInlineCellLine, intersectRect, normalizeCellRect, padEndByCells$1 as padEndByCells, resetWheelScrollState, sanitizeInlineText, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useRenderStack, useTerminal, useTerminalNode, useVisibility, wrapByCells } from "./wheel-scroll-vBRaQ7p-.js";
-import { TView, TuiThemeContextKey, createFrameMailbox, defaultActiveStyle, linkifyTextSegments, tuiDefaultTheme } from "./linkify-D_gzn9Xq.js";
-import { terminalSelectionRowSpans, terminalSelectionVisibleRowSpans } from "./terminal-selection-DBinO6p5.js";
-import { framePerfNow } from "./frame-perf-C6Xfg85O.js";
-import { computed, defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, provide, ref, shallowReactive, watch, watchEffect } from "vue";
+import { applyAnsiSgrStyle, parseAnsiSgr, sanitizeTerminalHref } from "./hyperlink-_1FAj7Wq.js";
+import { EventZIndexContextKey, LayoutContextKey, RenderPlaneContextKey, RenderStackKey, TerminalGraphicsActivityKey, createCombinedTerminalGraphicsActivity, createTerminalGraphicsActivity, forEachTextCellSegment, formatInlineCellLine, intersectRect, normalizeCellRect, nowTerminalGraphicTraceTime, padEndByCells$1 as padEndByCells, recordTerminalGraphicTrace, sanitizeInlineText, sanitizeTextBlock, sliceByCells, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useRenderStack, useTerminal, useTerminalNode, useVisibility, withTextWidthProvider, wrapByCells } from "./rect-DUpeDfBg.js";
+import { TView, TuiThemeContextKey, createFrameMailbox, defaultActiveStyle, linkifyTextSegments, tuiDefaultTheme } from "./linkify-D68T7rdW.js";
+import { framePerfNow } from "./frame-perf-CHpWhbC4.js";
+import { terminalSelectionRowSpans, terminalSelectionVisibleRowSpans } from "./terminal-selection-4W1SJj4c.js";
+import { applyWheelScroll, createWheelScrollState, resetWheelScrollState } from "./wheel-scroll-DASkEZr-.js";
+import { canDrawTerminalGraphicRect, createKittyDeleteGraphicsSequence, createKittyPlacementSequence, getTerminalGraphicsOutput, getTerminalGraphicsOutputVersion, isSafeTerminalGraphicsSequence, isTerminalGraphicsProtocol, normalizeTerminalGraphicSize, sanitizeTerminalFallbackText, stableTerminalGraphicNumericId, subscribeTerminalGraphicsOutput } from "./terminal-graphics-Bbe83wSr.js";
+import { computed, defineComponent, getCurrentInstance, h, inject, markRaw, onBeforeUnmount, provide, ref, shallowReactive, shallowRef, watch, watchEffect } from "vue";
 
 //#region src/vue/utils/row-scroll.ts
 function exposedRowsForDelta(y0, h$1, delta) {
@@ -143,6 +144,10 @@ const TVirtualList = defineComponent({
 		rowScrollMode: {
 			type: String,
 			default: "off"
+		},
+		terminalGraphicScrollIdleMs: {
+			type: Number,
+			default: 96
 		}
 	},
 	emits: [
@@ -165,6 +170,13 @@ const TVirtualList = defineComponent({
 		const eventZ = computed(() => (parentEventZ.value ?? 0) + (props.zIndex ?? 0));
 		const virtualListInstanceId = ++virtualListInstanceSeq;
 		const wheelTaskId = `TVirtualList:${virtualListInstanceId}:wheel`;
+		const parentTerminalGraphicsActivity = inject(TerminalGraphicsActivityKey, null);
+		const terminalGraphicsActivity = createTerminalGraphicsActivity({
+			scrollIdleMs: props.terminalGraphicScrollIdleMs,
+			traceId: `TVirtualList:${virtualListInstanceId}:terminal-graphics`
+		});
+		provide(TerminalGraphicsActivityKey, createCombinedTerminalGraphicsActivity(parentTerminalGraphicsActivity, terminalGraphicsActivity));
+		watch(() => props.terminalGraphicScrollIdleMs, (value) => terminalGraphicsActivity.setScrollIdleMs(value));
 		const focused = ref(false);
 		const active = ref(props.modelValue);
 		const scrollTop = ref(0);
@@ -381,6 +393,7 @@ const TVirtualList = defineComponent({
 			const changed = scrollTop.value !== nextTop;
 			scrollTop.value = nextTop;
 			if (!wasInitialized || !changed) return;
+			terminalGraphicsActivity.markScroll();
 			const remap = pendingSelectionScrollFocusRemap;
 			pendingSelectionScrollFocusRemap = false;
 			selection.refresh(remap ? { remapFocus: true } : void 0);
@@ -481,6 +494,7 @@ const TVirtualList = defineComponent({
 				if (nextTop === scrollTop.value) return false;
 				if (pendingSelectionScrollFocusRemap) return false;
 				pendingSelectionScrollFocusRemap = true;
+				terminalGraphicsActivity.markScroll();
 				emit("update:scrollTop", nextTop);
 				emit("scroll", nextTop);
 				return true;
@@ -621,6 +635,7 @@ const TVirtualList = defineComponent({
 			pendingWheelTop = null;
 			resetWheelScrollState(wheelState);
 			wheelMailbox.dispose();
+			terminalGraphicsActivity.dispose();
 		});
 		function viewportRows() {
 			const r = normalizedRect();
@@ -668,6 +683,7 @@ const TVirtualList = defineComponent({
 				controlled
 			};
 			if (controlled) {
+				terminalGraphicsActivity.markScroll();
 				if (options?.emitUpdate ?? true) emit("update:scrollTop", clampedTop);
 				if (options?.emitScroll) emit("scroll", clampedTop);
 				return {
@@ -677,6 +693,7 @@ const TVirtualList = defineComponent({
 					controlled
 				};
 			}
+			terminalGraphicsActivity.markScroll();
 			scrollTop.value = clampedTop;
 			if (options?.emitUpdate) emit("update:scrollTop", clampedTop);
 			const canUseTerminalRowScroll = rendererCapabilities.value.scrollOperations && rendererCapabilities.value.domRows !== true;
@@ -765,6 +782,1199 @@ const TVirtualList = defineComponent({
 	}
 });
 
+//#endregion
+//#region src/vue/components/TAgentTerminalGraphic.ts
+const NO_GRAPHICS_CAPABILITIES = Object.freeze({
+	supported: false,
+	kitty: false,
+	iterm2: false,
+	sixel: false,
+	preferredProtocol: null,
+	protocol: "unicode",
+	candidates: [],
+	stdoutIsTTY: false,
+	insideTmux: false,
+	insideScreen: false,
+	insideZellij: false,
+	multiplexer: null,
+	passthrough: false,
+	forced: false,
+	reason: "no-terminal-graphics-output"
+});
+function splitTextOutput(value) {
+	const normalized = sanitizeTextBlock(sanitizeTerminalFallbackText(value).replace(/\r\n?/g, "\n"));
+	const lines = normalized.split("\n");
+	return lines.length ? lines : [""];
+}
+function hasVisibleOutput(value) {
+	return value.some((line) => line.trim().length > 0);
+}
+function errorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+function positiveInt(value) {
+	const n = Math.floor(Number(value));
+	return Number.isFinite(n) && n > 0 ? n : void 0;
+}
+function finiteInt(value) {
+	const n = Math.floor(Number(value));
+	return Number.isFinite(n) ? n : void 0;
+}
+function clampNumber(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+function rectArea(rect) {
+	return Math.max(0, rect.w) * Math.max(0, rect.h);
+}
+function sameRect(a, b) {
+	return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+}
+function subtractRect(rect, cover) {
+	const hit = intersectRect(rect, cover);
+	if (!hit) return [rect];
+	const out = [];
+	const rectRight = rect.x + rect.w;
+	const rectBottom = rect.y + rect.h;
+	const hitRight = hit.x + hit.w;
+	const hitBottom = hit.y + hit.h;
+	if (hit.y > rect.y) out.push({
+		x: rect.x,
+		y: rect.y,
+		w: rect.w,
+		h: hit.y - rect.y
+	});
+	if (hitBottom < rectBottom) out.push({
+		x: rect.x,
+		y: hitBottom,
+		w: rect.w,
+		h: rectBottom - hitBottom
+	});
+	if (hit.x > rect.x) out.push({
+		x: rect.x,
+		y: hit.y,
+		w: hit.x - rect.x,
+		h: hit.h
+	});
+	if (hitRight < rectRight) out.push({
+		x: hitRight,
+		y: hit.y,
+		w: rectRight - hitRight,
+		h: hit.h
+	});
+	return out.filter((part) => part.w > 0 && part.h > 0);
+}
+function largestUncoveredRect(rect, covers) {
+	let parts = [rect];
+	for (const cover of covers) {
+		parts = parts.flatMap((part) => subtractRect(part, cover));
+		if (!parts.length) return null;
+	}
+	parts.sort((a, b) => rectArea(b) - rectArea(a) || a.y - b.y || a.x - b.x);
+	return parts[0] ?? null;
+}
+function parseKittyClearControls(sequence) {
+	const prefix = "\x1B_G";
+	const terminator = "\x1B\\";
+	if (!sequence.startsWith(prefix) || !sequence.endsWith(terminator)) return null;
+	const body = sequence.slice(prefix.length, -terminator.length);
+	if (body.includes(terminator) || body.includes("\x1B") || body.includes("\x07")) return null;
+	const semicolon = body.indexOf(";");
+	const rawControls = semicolon >= 0 ? body.slice(0, semicolon) : body;
+	const controls = new Map();
+	for (const part of rawControls.split(",")) {
+		const eq = part.indexOf("=");
+		if (eq <= 0) return null;
+		controls.set(part.slice(0, eq), part.slice(eq + 1));
+	}
+	return controls;
+}
+function kittyClearTargetsComponent(sequence, imageId, placementId) {
+	const controls = parseKittyClearControls(sequence);
+	if (!controls) return false;
+	const mode = controls.get("d");
+	if (mode !== "i" && mode !== "I") return false;
+	return controls.get("i") === String(imageId) && controls.get("p") === String(placementId);
+}
+function isSafeComponentClearSequence(sequence, protocol, imageId, placementId) {
+	if (!isSafeTerminalGraphicsSequence(sequence, protocol, "clear")) return false;
+	return protocol !== "kitty" || kittyClearTargetsComponent(sequence, imageId, placementId);
+}
+let textEncoder = null;
+function stringByteLength(value) {
+	if (typeof TextEncoder !== "undefined") {
+		textEncoder ?? (textEncoder = new TextEncoder());
+		return textEncoder.encode(value).length;
+	}
+	let bytes = 0;
+	for (let index = 0; index < value.length; index++) {
+		const code = value.charCodeAt(index);
+		if (code <= 127) bytes += 1;
+		else if (code <= 2047) bytes += 2;
+		else if (code >= 55296 && code <= 56319 && index + 1 < value.length) {
+			bytes += 4;
+			index++;
+		} else bytes += 3;
+	}
+	return bytes;
+}
+function smallHash(input) {
+	let hash = 2166136261;
+	for (let i = 0; i < input.length; i++) {
+		hash ^= input.charCodeAt(i);
+		hash = Math.imul(hash, 16777619);
+	}
+	return (hash >>> 0).toString(36);
+}
+const tAgentTerminalGraphicProps = {
+	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,
+		required: true
+	},
+	kind: {
+		type: String,
+		default: "image"
+	},
+	fallback: {
+		type: String,
+		default: void 0
+	},
+	style: {
+		type: Object,
+		default: void 0
+	},
+	loadingStyle: {
+		type: Object,
+		default: void 0
+	},
+	errorStyle: {
+		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
+	},
+	loadingText: {
+		type: String,
+		default: "Rendering terminal graphic..."
+	},
+	deferRenderUntilVisible: {
+		type: Boolean,
+		default: true
+	},
+	suspendRawWhileScrolling: {
+		type: Boolean,
+		default: true
+	},
+	suspendRenderWhileScrolling: {
+		type: Boolean,
+		default: true
+	},
+	scrolling: {
+		type: Boolean,
+		default: false
+	},
+	scrollVersion: {
+		type: Number,
+		default: 0
+	},
+	placementMoveWithoutClear: {
+		type: Boolean,
+		default: false
+	},
+	preserveRawWhileRendering: {
+		type: Boolean,
+		default: false
+	},
+	suspended: {
+		type: Boolean,
+		default: false
+	},
+	retainRawWhileCovered: {
+		type: Boolean,
+		default: false
+	},
+	ignoreRawCoverage: {
+		type: Boolean,
+		default: false
+	},
+	ignoreSamePlaneRawCoverage: {
+		type: Boolean,
+		default: false
+	},
+	cacheKey: {
+		type: String,
+		default: void 0
+	},
+	placementKey: {
+		type: String,
+		default: void 0
+	},
+	trace: {
+		type: Function,
+		default: void 0
+	}
+};
+function terminalDrawKey(current, rect, clearSequence, resizeSequence) {
+	return [
+		current.protocol,
+		rect.x,
+		rect.y,
+		rect.w,
+		rect.h,
+		current.sequenceHash,
+		clearSequence === current.clearSequence ? current.clearSequenceHash ?? "" : smallHash(clearSequence ?? ""),
+		resizeSequence === current.resizeSequence ? current.resizeSequenceHash ?? "" : smallHash(resizeSequence ?? "")
+	].join(":");
+}
+const TAgentTerminalGraphic = defineComponent({
+	name: "TAgentTerminalGraphic",
+	props: tAgentTerminalGraphicProps,
+	setup(props) {
+		const instance = getCurrentInstance();
+		const { terminal, defaultStyle, scheduler, widthProvider, render } = useTerminal();
+		const layout = useLayout();
+		const { visible, rootProps } = useVisibility();
+		const graphicsActivity = inject(TerminalGraphicsActivityKey, null);
+		const status = shallowRef("idle");
+		const error = shallowRef("");
+		const graphic = shallowRef(null);
+		const documentVersion = shallowRef(0);
+		let builtOnce = false;
+		let renderVersion = 0;
+		let renderAbort = null;
+		let alive = true;
+		let lastRenderedContent = "";
+		let lastRenderRawVisible = false;
+		let lastRenderProtocol = null;
+		let lastRenderGraphicsOutputVersion = 0;
+		const rawIdSeed = props.placementKey ? `placement:${props.placementKey}` : props.cacheKey ? `cache:${props.cacheKey}` : `instance:${instance?.uid ?? "unknown"}`;
+		const rawId = `TAgentTerminalGraphic:${smallHash(rawIdSeed)}`;
+		const frameTaskId = `${rawId}:render`;
+		const lastDrawnGraphic = shallowRef(null);
+		const rawClearPendingRepaint = shallowRef(null);
+		const rawDrawRejectedKey = shallowRef(null);
+		const reservedTerminalGraphicSize = shallowRef(null);
+		const terminalSizeVersion = shallowRef(0);
+		const renderNodeId = shallowRef(null);
+		let lastRawSkipScrollKey = "";
+		let lastDeferTraceKey = "";
+		const isParentScrolling = computed(() => props.scrolling || Boolean(graphicsActivity?.scrolling.value));
+		const graphicsActivityVersion = computed(() => (graphicsActivity?.version.value ?? 0) + Math.floor(Number(props.scrollVersion ?? 0)));
+		const graphicsOutput = () => getTerminalGraphicsOutput(terminal);
+		const graphicsOutputVersion = shallowRef(getTerminalGraphicsOutputVersion(terminal));
+		const unsubscribeGraphicsOutput = subscribeTerminalGraphicsOutput(terminal, () => {
+			graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal);
+		});
+		const unsubscribeTerminalResize = terminal.on("resize", () => {
+			terminalSizeVersion.value++;
+		});
+		const fallbackText = () => props.fallback ?? (props.kind === "math" ? props.content : "");
+		const contentIdentity = computed(() => `${props.content.length}:${smallHash(props.content)}`);
+		const stableGraphicKey = computed(() => [
+			rawIdSeed,
+			props.cacheKey ?? "",
+			props.kind,
+			contentIdentity.value,
+			props.w,
+			props.h ?? "",
+			props.final ? "final" : "draft"
+		].join(""));
+		const imageId = computed(() => stableTerminalGraphicNumericId(`image:${stableGraphicKey.value}`));
+		const placementId = computed(() => stableTerminalGraphicNumericId(`placement:${stableGraphicKey.value}`));
+		function rememberTerminalGraphicSize(current) {
+			if (current.type !== "terminal") return;
+			const rows = positiveInt(current.rows);
+			if (!rows) return;
+			reservedTerminalGraphicSize.value = {
+				key: stableGraphicKey.value,
+				rows
+			};
+		}
+		function bump() {
+			documentVersion.value++;
+		}
+		function currentCapabilities() {
+			return graphicsOutput()?.capabilities ?? NO_GRAPHICS_CAPABILITIES;
+		}
+		function trace(type, extra = {}) {
+			const capabilities = currentCapabilities();
+			try {
+				props.trace?.({
+					type,
+					id: rawId,
+					kind: props.kind,
+					protocol: capabilities.protocol,
+					contentHash: smallHash(props.content),
+					...extra
+				});
+			} catch {}
+			const protocol = isTerminalGraphicsProtocol(capabilities.protocol) ? capabilities.protocol : void 0;
+			const key = props.cacheKey ?? smallHash(props.content);
+			if (type === "render-start") recordTerminalGraphicTrace({
+				type: "renderer-start",
+				id: rawId,
+				key,
+				protocol
+			});
+			else if (type === "render-end") recordTerminalGraphicTrace({
+				type: extra.reason ? "renderer-error" : "renderer-end",
+				id: rawId,
+				key,
+				protocol,
+				durationMs: extra.durationMs,
+				bytes: extra.sequenceBytes,
+				error: extra.reason
+			});
+			else if (type === "defer") recordTerminalGraphicTrace({
+				type: extra.reason === "scrolling" ? "skip-scrolling" : "skip-hidden",
+				id: rawId,
+				key,
+				protocol,
+				reason: extra.reason
+			});
+			else if (type === "raw-draw") {} else if (type === "render-abort") recordTerminalGraphicTrace({
+				type: "renderer-abort",
+				id: rawId,
+				key,
+				protocol,
+				reason: extra.reason
+			});
+			else if (type === "raw-clear") recordTerminalGraphicTrace({
+				type: "clear",
+				id: rawId,
+				key,
+				protocol
+			});
+			else if (type === "raw-skip-scroll") recordTerminalGraphicTrace({
+				type: "skip-scrolling",
+				id: rawId,
+				key,
+				protocol,
+				reason: extra.reason
+			});
+		}
+		function traceDeferOnce(reason) {
+			const key = [
+				reason,
+				graphicsActivityVersion.value,
+				stableGraphicKey.value
+			].join(":");
+			if (lastDeferTraceKey === key) return;
+			lastDeferTraceKey = key;
+			trace("defer", { reason });
+		}
+		function abortCurrentRender(reason) {
+			if (!renderAbort) return;
+			renderAbort.abort();
+			renderAbort = null;
+			trace("render-abort", { reason });
+		}
+		function normalizeResult(result) {
+			if (result == null) return {
+				type: "text",
+				text: fallbackText()
+			};
+			if (typeof result === "string") return {
+				type: "text",
+				text: result
+			};
+			if (typeof result !== "object") return {
+				type: "text",
+				text: fallbackText()
+			};
+			if ("type" in result && result.type === "text") return {
+				type: "text",
+				text: result.text
+			};
+			const maybeRaw = result;
+			const isRawCandidate = maybeRaw.type === "sequence" || "sequence" in result || "protocol" in result;
+			if (!isRawCandidate && "text" in result) return {
+				type: "text",
+				text: result.text
+			};
+			const sequence = typeof maybeRaw.sequence === "string" ? maybeRaw.sequence : "";
+			const protocol = isTerminalGraphicsProtocol(maybeRaw.protocol) ? maybeRaw.protocol : null;
+			const fallback = typeof maybeRaw.fallback === "string" ? sanitizeTerminalFallbackText(maybeRaw.fallback) : fallbackText();
+			const fallbackFromProps = typeof maybeRaw.fallback !== "string";
+			if (!sequence || !protocol || !isSafeTerminalGraphicsSequence(sequence, protocol, "draw")) return {
+				type: "text",
+				text: fallback
+			};
+			const rawClear = typeof maybeRaw.clearSequence === "string" ? maybeRaw.clearSequence : void 0;
+			const clearSequence = rawClear && isSafeComponentClearSequence(rawClear, protocol, imageId.value, placementId.value) ? rawClear : void 0;
+			const rawResize = typeof maybeRaw.resizeSequence === "string" ? maybeRaw.resizeSequence : void 0;
+			const resizeSequence = rawResize && isSafeTerminalGraphicsSequence(rawResize, protocol, "draw") ? rawResize : void 0;
+			const declaredRows = positiveInt(maybeRaw.rows);
+			const declaredCols = positiveInt(maybeRaw.cols);
+			const sourceWidth = positiveInt(maybeRaw.sourceWidth);
+			const sourceHeight = positiveInt(maybeRaw.sourceHeight);
+			const zIndex = finiteInt(maybeRaw.zIndex);
+			const declaredSize = declaredRows == null ? null : normalizeTerminalGraphicSize(declaredCols ?? props.w, declaredRows);
+			return {
+				type: "terminal",
+				protocol,
+				sequence,
+				sequenceHash: smallHash(sequence),
+				sequenceBytes: stringByteLength(sequence),
+				fallback,
+				fallbackFromProps,
+				clearSequence,
+				clearSequenceHash: clearSequence ? smallHash(clearSequence) : void 0,
+				resizeSequence,
+				resizeSequenceHash: resizeSequence ? smallHash(resizeSequence) : void 0,
+				cols: declaredRows == null ? declaredCols : declaredSize?.width,
+				rows: declaredSize?.height,
+				sourceWidth,
+				sourceHeight,
+				zIndex
+			};
+		}
+		function defaultClearSequence(protocol) {
+			return protocol === "kitty" ? createKittyDeleteGraphicsSequence({
+				imageId: imageId.value,
+				placementId: placementId.value
+			}) : "";
+		}
+		function resolveClearSequence(current) {
+			if (current.clearSequence) return current.clearSequence;
+			const candidate = defaultClearSequence(current.protocol);
+			if (!candidate) return void 0;
+			return isSafeComponentClearSequence(candidate, current.protocol, imageId.value, placementId.value) ? candidate : void 0;
+		}
+		function resolveResizeSequence(current, rect, full) {
+			if (current.protocol !== "kitty") return current.resizeSequence;
+			const sourceWidth = positiveInt(current.sourceWidth);
+			const sourceHeight = positiveInt(current.sourceHeight);
+			if (!sourceWidth || !sourceHeight || full.w <= 0 || full.h <= 0) return current.resizeSequence;
+			const offsetX = Math.max(0, rect.x - full.x);
+			const offsetY = Math.max(0, rect.y - full.y);
+			const visibleW = Math.max(0, Math.min(rect.w, full.w - offsetX));
+			const visibleH = Math.max(0, Math.min(rect.h, full.h - offsetY));
+			const x0 = clampNumber(Math.floor(offsetX * sourceWidth / full.w), 0, sourceWidth - 1);
+			const y0 = clampNumber(Math.floor(offsetY * sourceHeight / full.h), 0, sourceHeight - 1);
+			const x1 = Math.max(x0 + 1, clampNumber(Math.ceil((offsetX + visibleW) * sourceWidth / full.w), 1, sourceWidth));
+			const y1 = Math.max(y0 + 1, clampNumber(Math.ceil((offsetY + visibleH) * sourceHeight / full.h), 1, sourceHeight));
+			return createKittyPlacementSequence({
+				imageId: imageId.value,
+				placementId: placementId.value,
+				columns: rect.w,
+				rows: rect.h,
+				sourceX: x0,
+				sourceY: y0,
+				sourceWidth: x1 - x0,
+				sourceHeight: y1 - y0,
+				zIndex: current.zIndex
+			});
+		}
+		function queueClearLastGraphic(options = {}) {
+			const previous = lastDrawnGraphic.value;
+			if (!previous) return false;
+			const output = graphicsOutput();
+			let accepted = false;
+			if (output?.clear && !previous.retainOnClear) try {
+				accepted = Boolean(output.clear(previous.id));
+			} catch {
+				accepted = false;
+			}
+			if (!accepted && output && previous.clearSequence) try {
+				accepted = output.queue({
+					id: previous.id,
+					x: previous.x,
+					y: previous.y,
+					w: previous.w,
+					h: previous.h,
+					protocol: previous.protocol,
+					sequence: previous.clearSequence,
+					deferFlush: true,
+					retainOnClear: previous.retainOnClear,
+					op: "clear"
+				});
+			} catch {
+				accepted = false;
+			}
+			if (accepted) {
+				if (options.markPendingRepaint ?? true) rawClearPendingRepaint.value = previous;
+				lastDrawnGraphic.value = null;
+				trace("raw-clear", {
+					x: previous.x,
+					y: previous.y,
+					w: previous.w,
+					h: previous.h
+				});
+			}
+			return accepted;
+		}
+		function queueDrawGraphic(output, current, rect, full = rect, options = {}) {
+			const clearSequence = resolveClearSequence(current);
+			const resizeSequence = resolveResizeSequence(current, rect, full);
+			const drawKey = terminalDrawKey(current, rect, clearSequence, resizeSequence);
+			const activePrevious = lastDrawnGraphic.value;
+			const retainedPrevious = rawClearPendingRepaint.value;
+			const previous = activePrevious ?? retainedPrevious;
+			const previousIsRetained = activePrevious == null && retainedPrevious != null;
+			const previousStillActive = previous ? typeof output.isActive === "function" ? output.isActive(previous.id) : true : false;
+			const preservePreviousForAtomicReplace = props.preserveRawWhileRendering && activePrevious != null && !previousIsRetained && previousStillActive;
+			if (!previousIsRetained && !options.force && previous?.drawKey === drawKey && previousStillActive) return false;
+			const canReusePlacementSequence = previousStillActive && previous?.protocol === current.protocol && previous.sequenceHash === current.sequenceHash && current.protocol === "kitty" && Boolean(resizeSequence);
+			const scrollVersion = Math.floor(Number(props.scrollVersion ?? 0));
+			const canMoveWithoutClear = canReusePlacementSequence && Boolean(options.placementMoveWithoutClear);
+			if (!previousIsRetained && previousStillActive && !resizeSequence && previous?.protocol === current.protocol && previous.sequenceHash === current.sequenceHash && previous.x === rect.x && previous.y === rect.y && rect.w <= previous.w && rect.h <= previous.h && (options.force || !sameRect(rect, full))) {
+				lastDrawnGraphic.value = {
+					...previous,
+					w: rect.w,
+					h: rect.h,
+					clearSequence,
+					resizeSequence,
+					drawKey,
+					activityVersion: graphicsActivityVersion.value,
+					scrollVersion
+				};
+				lastRawSkipScrollKey = "";
+				return false;
+			}
+			if (previousStillActive && !previousIsRetained && !canReusePlacementSequence && !preservePreviousForAtomicReplace) {
+				if (!queueClearLastGraphic({ markPendingRepaint: false })) return false;
+			} else if (previous) {
+				if (!previousStillActive) {
+					lastDrawnGraphic.value = null;
+					rawClearPendingRepaint.value = null;
+				}
+			}
+			let accepted = false;
+			try {
+				accepted = output.queue({
+					id: rawId,
+					x: rect.x,
+					y: rect.y,
+					w: rect.w,
+					h: rect.h,
+					protocol: current.protocol,
+					sequence: canReusePlacementSequence && resizeSequence ? resizeSequence : current.sequence,
+					resizeSequence,
+					clearSequence,
+					retainOnClear: Boolean(props.cacheKey && resizeSequence),
+					resizeRedraw: canReusePlacementSequence,
+					placementMoveWithoutClear: canMoveWithoutClear,
+					allowTextOverlay: options.allowTextOverlay,
+					forceDraw: options.force,
+					deferFlush: options.deferFlush ?? true,
+					fallbackText: current.fallback
+				});
+			} catch {
+				accepted = false;
+			}
+			if (!accepted) {
+				if (preservePreviousForAtomicReplace) {
+					lastDrawnGraphic.value = activePrevious;
+					queueClearLastGraphic({ markPendingRepaint: false });
+				} else lastDrawnGraphic.value = null;
+				if (rawDrawRejectedKey.value !== drawKey) {
+					rawDrawRejectedKey.value = drawKey;
+					scheduler.invalidate({
+						priority: "low",
+						reason: "data"
+					});
+				}
+				return false;
+			}
+			rawDrawRejectedKey.value = null;
+			rawClearPendingRepaint.value = null;
+			lastDrawnGraphic.value = {
+				id: rawId,
+				x: rect.x,
+				y: rect.y,
+				w: rect.w,
+				h: rect.h,
+				protocol: current.protocol,
+				sequenceHash: current.sequenceHash,
+				clearSequence,
+				resizeSequence,
+				retainOnClear: Boolean(props.cacheKey && resizeSequence),
+				allowTextOverlay: Boolean(options.allowTextOverlay),
+				drawKey,
+				activityVersion: graphicsActivityVersion.value,
+				scrollVersion
+			};
+			lastRawSkipScrollKey = "";
+			return true;
+		}
+		function hasRetainedActiveRawGraphic() {
+			const output = graphicsOutput();
+			return Boolean(status.value === "loading" && !graphic.value && output && typeof output.isActive === "function" && output.isActive(rawId));
+		}
+		const showingInitialLoadingText = computed(() => status.value === "loading" && !graphic.value && !hasRetainedActiveRawGraphic());
+		const fullRect = computed(() => {
+			const current = graphic.value;
+			const reserved = reservedTerminalGraphicSize.value;
+			const reservedRows = current?.type === "terminal" ? void 0 : status.value === "idle" && reserved?.key === stableGraphicKey.value ? reserved.rows : void 0;
+			const textLines = current?.type === "text" ? splitTextOutput(current.text) : splitTextOutput(fallbackText());
+			const height = props.h ?? (current?.type === "terminal" ? current.rows : void 0) ?? reservedRows ?? Math.max(1, textLines.length);
+			return translateRect({
+				x: props.x,
+				y: props.y,
+				w: props.w,
+				h: height
+			}, layout.originX, layout.originY);
+		});
+		const absRect = computed(() => {
+			terminalSizeVersion.value;
+			const translated = fullRect.value;
+			const size = terminal.size();
+			const terminalClip = {
+				x: 0,
+				y: 0,
+				w: Math.max(0, Math.floor(size.cols)),
+				h: Math.max(0, Math.floor(size.rows))
+			};
+			const clip = layout.clipRect ? intersectRect(layout.clipRect, terminalClip) : terminalClip;
+			if (!clip) return {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+			return intersectRect(translated, clip) ?? {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+		});
+		const renderRect = computed(() => absRect.value);
+		function rawRectFitsTerminalViewport(rect) {
+			return canDrawTerminalGraphicRect(rect, terminal.size());
+		}
+		function rawCoveredByHigherRenderNode(rect = fullRect.value) {
+			if (props.retainRawWhileCovered) return false;
+			const id = renderNodeId.value;
+			return !props.ignoreRawCoverage && id != null && render.isRectCoveredByHigherNode(id, rect, { ignoreSamePlane: props.ignoreSamePlaneRawCoverage });
+		}
+		function retainedRawCoveredByHigherRenderNode(rect) {
+			if (!props.retainRawWhileCovered) return false;
+			const id = renderNodeId.value;
+			return Boolean(id != null && render.isRectCoveredByHigherNode(id, rect, { ignoreSamePlane: props.ignoreSamePlaneRawCoverage }));
+		}
+		function rawUncoveredRenderRect(rect) {
+			if (props.retainRawWhileCovered) return rect;
+			const id = renderNodeId.value;
+			if (id == null) return rect;
+			const covers = render.higherNodeCoverageRects(id, rect, { ignoreSamePlane: props.ignoreSamePlaneRawCoverage });
+			if (!covers.length) return rect;
+			if (!props.ignoreRawCoverage) return null;
+			return largestUncoveredRect(rect, covers);
+		}
+		const rawCanRender = computed(() => {
+			graphicsOutputVersion.value;
+			terminalSizeVersion.value;
+			const current = graphic.value;
+			const output = graphicsOutput();
+			const rect = absRect.value;
+			return current?.type === "terminal" && rawRectFitsTerminalViewport(rect) && Boolean(output?.capabilities.supported) && output?.capabilities.preferredProtocol === current.protocol;
+		});
+		const rawOutputCanRenderValue = computed(() => {
+			graphicsOutputVersion.value;
+			terminalSizeVersion.value;
+			return rawOutputCanRender();
+		});
+		const rawSuppressedByScroll = computed(() => props.suspended || props.suspendRawWhileScrolling && isParentScrolling.value);
+		const rawCanQueue = computed(() => rawCanRender.value && !rawSuppressedByScroll.value);
+		function traceRawSkipScrollOnce(reason) {
+			const r = absRect.value;
+			const key = [
+				reason,
+				graphicsActivityVersion.value,
+				stableGraphicKey.value,
+				r.x,
+				r.y,
+				r.w,
+				r.h
+			].join(":");
+			if (lastRawSkipScrollKey === key) return;
+			lastRawSkipScrollKey = key;
+			trace("raw-skip-scroll", { reason });
+		}
+		function hasPaintableRect() {
+			const r = absRect.value;
+			return visible.value && r.w > 0 && r.h > 0;
+		}
+		function rawOutputCanRender() {
+			const output = graphicsOutput();
+			const rect = absRect.value;
+			return rawRectFitsTerminalViewport(rect) && Boolean(output?.capabilities.supported);
+		}
+		function renderDeferReason() {
+			if (props.suspended) return "suspended";
+			if (props.deferRenderUntilVisible && !hasPaintableRect()) return "not-visible";
+			if (props.suspendRenderWhileScrolling && isParentScrolling.value) return "scrolling";
+			return null;
+		}
+		function shouldDeferRender() {
+			return renderDeferReason() != null;
+		}
+		function shouldRerenderForGraphicsOutputChange() {
+			if (!props.renderer) return false;
+			if (!props.content.trim()) return false;
+			if (shouldDeferRender()) return false;
+			if (rawSuppressedByScroll.value) return false;
+			const protocol = currentCapabilities().protocol;
+			return lastRenderProtocol != null && (lastRenderProtocol !== protocol || lastRenderGraphicsOutputVersion !== graphicsOutputVersion.value);
+		}
+		function shouldRetryTemporaryRawFallback(rawCovered = rawCoveredByHigherRenderNode()) {
+			return Boolean(props.renderer) && props.content.trim().length > 0 && graphic.value?.type === "text" && status.value !== "loading" && !lastRenderRawVisible && rawOutputCanRenderValue.value && !rawSuppressedByScroll.value && !rawCovered;
+		}
+		function setDeferredFallback(content) {
+			graphic.value = {
+				type: "text",
+				text: content.trim() ? fallbackText() : ""
+			};
+			lastRenderedContent = content;
+			status.value = "idle";
+			error.value = "";
+			bump();
+		}
+		function resolveRendererContext(signal) {
+			const capabilities = currentCapabilities();
+			const visibleNow = hasPaintableRect();
+			const rawVisible = rawOutputCanRenderValue.value && !rawSuppressedByScroll.value && !rawCoveredByHigherRenderNode();
+			return {
+				kind: props.kind,
+				width: props.w,
+				height: props.h,
+				final: props.final,
+				streaming: props.streaming,
+				protocol: capabilities.protocol,
+				capabilities,
+				signal,
+				imageId: imageId.value,
+				placementId: placementId.value,
+				visible: visibleNow,
+				rawVisible,
+				scrolling: isParentScrolling.value,
+				cacheKey: props.cacheKey,
+				viewport: {
+					visible: visibleNow,
+					rawVisible,
+					scrolling: isParentScrolling.value,
+					rect: absRect.value,
+					fullRect: fullRect.value
+				}
+			};
+		}
+		async function renderNow(version) {
+			const protocol = currentCapabilities().protocol;
+			recordTerminalGraphicTrace({
+				type: "request",
+				id: rawId,
+				key: props.cacheKey ?? smallHash(props.content),
+				protocol: isTerminalGraphicsProtocol(protocol) ? protocol : void 0
+			});
+			const content = props.content;
+			if (!content.trim()) {
+				abortCurrentRender("superseded");
+				if (!alive || version !== renderVersion) return;
+				graphic.value = {
+					type: "text",
+					text: ""
+				};
+				lastRenderedContent = content;
+				status.value = "ready";
+				error.value = "";
+				bump();
+				return;
+			}
+			const renderer = props.renderer;
+			if (!renderer) {
+				abortCurrentRender("superseded");
+				if (!alive || version !== renderVersion) return;
+				graphic.value = {
+					type: "text",
+					text: fallbackText()
+				};
+				lastRenderedContent = content;
+				status.value = "ready";
+				error.value = "";
+				bump();
+				return;
+			}
+			const deferred = renderDeferReason();
+			if (deferred) {
+				abortCurrentRender(deferred);
+				if (!alive || version !== renderVersion) return;
+				setDeferredFallback(content);
+				traceDeferOnce(deferred);
+				return;
+			}
+			abortCurrentRender("superseded");
+			lastDeferTraceKey = "";
+			const abort = new AbortController();
+			renderAbort = abort;
+			const startedAt = nowTerminalGraphicTraceTime();
+			status.value = "loading";
+			error.value = "";
+			trace("render-start");
+			bump();
+			try {
+				const contextGraphicsOutputVersion = graphicsOutputVersion.value;
+				const context = resolveRendererContext(abort.signal);
+				lastRenderRawVisible = context.rawVisible;
+				lastRenderProtocol = context.protocol;
+				lastRenderGraphicsOutputVersion = contextGraphicsOutputVersion;
+				const result = await renderer(content, context);
+				if (abort.signal.aborted) return;
+				if (!alive || version !== renderVersion) return;
+				const normalized = normalizeResult(result);
+				rememberTerminalGraphicSize(normalized);
+				graphic.value = normalized;
+				lastRenderedContent = content;
+				status.value = "ready";
+				error.value = "";
+				trace("render-end", {
+					durationMs: nowTerminalGraphicTraceTime() - startedAt,
+					sequenceChars: normalized.type === "terminal" ? normalized.sequence.length : 0,
+					sequenceBytes: normalized.type === "terminal" ? normalized.sequenceBytes : 0
+				});
+				bump();
+				if (normalized.type === "terminal") scheduler.invalidate({
+					priority: "low",
+					reason: "data"
+				});
+			} catch (err) {
+				if (abort.signal.aborted) return;
+				if (!alive || version !== renderVersion) return;
+				graphic.value = {
+					type: "text",
+					text: fallbackText()
+				};
+				lastRenderedContent = content;
+				status.value = "ready";
+				error.value = errorMessage(err);
+				trace("render-end", {
+					durationMs: nowTerminalGraphicTraceTime() - startedAt,
+					reason: error.value
+				});
+				bump();
+			} finally {
+				if (renderAbort === abort) renderAbort = null;
+			}
+		}
+		function scheduleRender(options = {}) {
+			const version = ++renderVersion;
+			if (options.clearLastGraphic ?? !props.preserveRawWhileRendering) queueClearLastGraphic();
+			if (!builtOnce || !props.streaming) {
+				builtOnce = true;
+				renderNow(version);
+				return;
+			}
+			const accepted = scheduler.queueFrameTask({
+				id: frameTaskId,
+				reason: "stream",
+				priority: "low",
+				sync: false,
+				run: () => {
+					if (!alive) return;
+					if (version !== renderVersion) return;
+					renderNow(version);
+				}
+			});
+			if (accepted === false) renderNow(version);
+		}
+		watch([
+			() => props.content,
+			() => props.kind,
+			() => props.renderer,
+			() => props.w,
+			() => props.h,
+			() => props.streaming,
+			() => props.final,
+			() => props.deferRenderUntilVisible,
+			() => props.suspendRawWhileScrolling,
+			() => props.suspendRenderWhileScrolling,
+			() => props.scrolling,
+			() => props.preserveRawWhileRendering,
+			() => props.suspended,
+			() => props.retainRawWhileCovered,
+			() => props.ignoreRawCoverage,
+			() => props.ignoreSamePlaneRawCoverage,
+			() => props.cacheKey,
+			() => props.placementKey
+		], () => {
+			scheduleRender();
+		}, { immediate: true });
+		watch(() => props.fallback, () => {
+			const current = graphic.value;
+			if (current?.type === "terminal") {
+				if (current.fallbackFromProps) {
+					graphic.value = {
+						...current,
+						fallback: fallbackText()
+					};
+					bump();
+					scheduler.invalidate({
+						priority: "low",
+						reason: "data"
+					});
+					return;
+				}
+				scheduleRender({ clearLastGraphic: false });
+				return;
+			}
+			scheduleRender();
+		});
+		watch(() => [graphicsOutputVersion.value, rawOutputCanRenderValue.value], () => {
+			if (!props.renderer || !props.content.trim()) return;
+			if (graphic.value?.type === "terminal") return;
+			if (!rawOutputCanRenderValue.value || shouldDeferRender()) return;
+			scheduleRender({ clearLastGraphic: false });
+		});
+		watch(() => [
+			props.x,
+			props.y,
+			props.w,
+			props.h,
+			props.scrollVersion
+		], () => {
+			if (graphic.value?.type === "terminal") {
+				scheduler.invalidate({
+					priority: "low",
+					reason: "data"
+				});
+				return;
+			}
+			if (props.kind !== "image" || status.value !== "loading" || !props.renderer) return;
+			scheduleRender({ clearLastGraphic: false });
+		}, { flush: "sync" });
+		onBeforeUnmount(() => {
+			alive = false;
+			renderVersion++;
+			unsubscribeTerminalResize();
+			unsubscribeGraphicsOutput();
+			abortCurrentRender("unmount");
+			scheduler.cancelFrameTask?.(frameTaskId);
+			queueClearLastGraphic();
+		});
+		function resolveDisplayLines(rawPlaceholderAllowed) {
+			if (showingInitialLoadingText.value) return splitTextOutput(props.loadingText);
+			const current = graphic.value;
+			if (!current) return splitTextOutput(fallbackText());
+			if (current.type === "terminal" && rawPlaceholderAllowed) {
+				const clearSequence = resolveClearSequence(current);
+				const drawKey = terminalDrawKey(current, absRect.value, clearSequence, resolveResizeSequence(current, absRect.value, fullRect.value));
+				if (rawDrawRejectedKey.value !== drawKey) return markRaw([""]);
+			}
+			const text = current.type === "terminal" ? current.fallback : current.text;
+			const lines = splitTextOutput(text);
+			return text.trim().length > 0 && !hasVisibleOutput(lines) ? splitTextOutput(fallbackText()) : lines;
+		}
+		const displayLines = computed(() => {
+			return resolveDisplayLines(rawCanQueue.value);
+		});
+		const currentStyle = computed(() => {
+			if (error.value) return props.errorStyle ?? props.style ?? defaultStyle.value;
+			if (showingInitialLoadingText.value) return props.loadingStyle ?? props.style ?? defaultStyle.value;
+			return props.style ?? defaultStyle.value;
+		});
+		const renderNode = useRenderNode(() => ({
+			zIndex: props.zIndex,
+			rect: visible.value ? renderRect.value : {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			},
+			deps: [
+				visible.value,
+				renderRect.value,
+				fullRect.value,
+				displayLines.value,
+				currentStyle.value,
+				props.clear,
+				status.value,
+				error.value,
+				documentVersion.value,
+				rawOutputCanRenderValue.value,
+				rawCanRender.value,
+				rawCanQueue.value,
+				rawClearPendingRepaint.value,
+				rawDrawRejectedKey.value,
+				rawSuppressedByScroll.value,
+				props.placementMoveWithoutClear,
+				props.retainRawWhileCovered,
+				isParentScrolling.value,
+				graphicsActivityVersion.value,
+				graphicsOutputVersion.value
+			],
+			paint: (dirtyRows) => {
+				withTextWidthProvider(widthProvider, () => {
+					if (!visible.value) {
+						queueClearLastGraphic();
+						return;
+					}
+					const r = absRect.value;
+					const full = fullRect.value;
+					if (r.w <= 0 || r.h <= 0) {
+						queueClearLastGraphic();
+						return;
+					}
+					const style = currentStyle.value;
+					const dx = Math.max(0, Math.floor(r.x - full.x));
+					const fullY = Math.floor(full.y);
+					const current = graphic.value;
+					const output = graphicsOutput();
+					const retainedActiveRawGraphic = hasRetainedActiveRawGraphic();
+					const rawRectForPaint = rawUncoveredRenderRect(r);
+					const rawCoverageClipped = rawRectForPaint != null && props.ignoreRawCoverage && !sameRect(rawRectForPaint, r);
+					const rawCoveredForPaint = rawRectForPaint == null && rawCoveredByHigherRenderNode(r);
+					const rawCanQueueForPaint = current?.type === "terminal" && rawCanQueue.value && rawRectForPaint != null;
+					let preserveActiveRawGraphic = false;
+					let forceActiveRawRedraw = false;
+					let allowTextOverlay = false;
+					if (rawCanQueueForPaint && output) {
+						const previous = lastDrawnGraphic.value;
+						const previousStillActive = previous ? typeof output.isActive === "function" ? output.isActive(previous.id) : true : false;
+						if (previousStillActive && previous) {
+							const clearSequence = resolveClearSequence(current);
+							const resizeSequence = resolveResizeSequence(current, rawRectForPaint, full);
+							preserveActiveRawGraphic = rawClearPendingRepaint.value == null && previous.drawKey === terminalDrawKey(current, rawRectForPaint, clearSequence, resizeSequence);
+							allowTextOverlay = retainedRawCoveredByHigherRenderNode(r);
+							forceActiveRawRedraw = preserveActiveRawGraphic && (previous.activityVersion !== graphicsActivityVersion.value || previous.allowTextOverlay !== allowTextOverlay);
+						}
+					}
+					const preserveActiveRawGraphicForPaint = preserveActiveRawGraphic;
+					let out = rawCanQueueForPaint ? displayLines.value : resolveDisplayLines(false);
+					const clearingRawGraphic = rawClearPendingRepaint.value != null || lastDrawnGraphic.value != null && !preserveActiveRawGraphicForPaint;
+					const clearOwnedRegion = preserveActiveRawGraphicForPaint || retainedActiveRawGraphic ? false : props.clear || clearingRawGraphic || Boolean(rawCanQueueForPaint);
+					const blank = clearOwnedRegion ? spaces(r.w) : "";
+					const paintRow = (y) => {
+						if (y < r.y || y >= r.y + r.h) return;
+						const rowIndex = y - fullY;
+						if (rowIndex < 0 || rowIndex >= out.length) {
+							if (clearOwnedRegion) terminal.write(blank, {
+								x: r.x,
+								y,
+								style
+							});
+							return;
+						}
+						const src = out[rowIndex] ?? "";
+						const clipped = dx > 0 ? sliceByCellsRange(src, dx, dx + r.w) : sliceByCells(src, r.w);
+						const value = clearOwnedRegion ? padEndByCells(clipped, r.w) : clipped;
+						if (value || clearOwnedRegion) terminal.write(value, {
+							x: r.x,
+							y,
+							style
+						});
+					};
+					const paintRows = () => {
+						if (dirtyRows?.length) for (const y of dirtyRows) paintRow(y);
+						else for (let y = r.y; y < r.y + r.h; y++) paintRow(y);
+					};
+					paintRows();
+					if (current?.type === "terminal" && output?.capabilities.supported && output.capabilities.preferredProtocol === current.protocol && rawCanQueueForPaint) {
+						const drawKey = terminalDrawKey(current, rawRectForPaint, resolveClearSequence(current), resolveResizeSequence(current, rawRectForPaint, full));
+						const queued = queueDrawGraphic(output, current, rawRectForPaint, full, {
+							force: forceActiveRawRedraw,
+							deferFlush: preserveActiveRawGraphicForPaint,
+							placementMoveWithoutClear: props.placementMoveWithoutClear || rawCoverageClipped,
+							allowTextOverlay
+						});
+						if (queued) trace("raw-draw", {
+							sequenceChars: current.sequence.length,
+							sequenceBytes: current.sequenceBytes,
+							x: rawRectForPaint.x,
+							y: rawRectForPaint.y,
+							w: rawRectForPaint.w,
+							h: rawRectForPaint.h
+						});
+						else if (rawDrawRejectedKey.value === drawKey) {
+							out = resolveDisplayLines(false);
+							paintRows();
+						}
+					} else {
+						if (current?.type === "terminal" && rawSuppressedByScroll.value) traceRawSkipScrollOnce(isParentScrolling.value ? "scrolling" : "suspended");
+						queueClearLastGraphic({ markPendingRepaint: false });
+						if (!shouldDeferRender() && shouldRetryTemporaryRawFallback(rawCoveredForPaint)) scheduleRender({ clearLastGraphic: false });
+					}
+					if (clearingRawGraphic) rawClearPendingRepaint.value = null;
+				});
+			}
+		}));
+		watch(renderNode.id, (id) => {
+			renderNodeId.value = id;
+		}, { immediate: true });
+		watch([
+			visible,
+			rawOutputCanRenderValue,
+			rawCanRender,
+			rawCanQueue,
+			rawSuppressedByScroll,
+			isParentScrolling,
+			graphicsActivityVersion,
+			graphicsOutputVersion,
+			() => renderRect.value.x,
+			() => renderRect.value.y,
+			() => renderRect.value.w,
+			() => renderRect.value.h,
+			() => fullRect.value.x,
+			() => fullRect.value.y,
+			() => fullRect.value.w,
+			() => fullRect.value.h
+		], () => {
+			if (!alive) return;
+			const deferred = renderDeferReason();
+			if (deferred) {
+				abortCurrentRender(deferred);
+				if (status.value === "loading" || !graphic.value || lastRenderedContent !== props.content) setDeferredFallback(props.content);
+				traceDeferOnce(deferred);
+			}
+			if (!visible.value || !rawCanQueue.value) queueClearLastGraphic();
+			const shouldRetryTemporaryFallback = shouldRetryTemporaryRawFallback();
+			const shouldRerenderForOutputChange = shouldRerenderForGraphicsOutputChange();
+			if (!shouldDeferRender() && (!graphic.value || status.value === "idle" || shouldRetryTemporaryFallback || shouldRerenderForOutputChange)) {
+				scheduleRender();
+				return;
+			}
+			scheduler.invalidate({
+				priority: "low",
+				reason: "data"
+			});
+		}, { flush: "post" });
+		return () => h("span", rootProps);
+	}
+});
+
 //#endregion
 //#region src/vue/transcript/layout.ts
 function styleForAction(action) {
@@ -1126,6 +2336,10 @@ const TVirtualRows = defineComponent({
 		rowScrollMode: {
 			type: String,
 			default: "off"
+		},
+		terminalGraphicScrollIdleMs: {
+			type: Number,
+			default: 96
 		}
 	},
 	emits: [
@@ -1167,6 +2381,13 @@ const TVirtualRows = defineComponent({
 		provide(RenderStackKey, childStack);
 		provide(EventZIndexContextKey, eventZ);
 		const virtualRowsInstanceId = ++virtualRowsInstanceSeq;
+		const parentTerminalGraphicsActivity = inject(TerminalGraphicsActivityKey, null);
+		const terminalGraphicsActivity = createTerminalGraphicsActivity({
+			scrollIdleMs: props.terminalGraphicScrollIdleMs,
+			traceId: `TVirtualRows:${virtualRowsInstanceId}:terminal-graphics`
+		});
+		provide(TerminalGraphicsActivityKey, createCombinedTerminalGraphicsActivity(parentTerminalGraphicsActivity, terminalGraphicsActivity));
+		watch(() => props.terminalGraphicScrollIdleMs, (value) => terminalGraphicsActivity.setScrollIdleMs(value));
 		const frameTaskId = `TVirtualRows:${virtualRowsInstanceId}`;
 		const innerScrollTop = ref(0);
 		const controlledScrollTop = ref(0);
@@ -1305,10 +2526,12 @@ const TVirtualRows = defineComponent({
 			const delta = clampedTop - prevTop;
 			if (!delta) return false;
 			if (isScrollControlled()) {
+				terminalGraphicsActivity.markScroll();
 				if (options?.emitUpdate !== false) emit("update:scrollTop", clampedTop);
 				if (options?.emitScroll) emitScroll(clampedTop);
 				return true;
 			}
+			terminalGraphicsActivity.markScroll();
 			setCurrentScrollTop(clampedTop);
 			if (options?.emitUpdate !== false) emit("update:scrollTop", clampedTop);
 			markScrollDamage(prevTop, clampedTop, options?.strategy);
@@ -1607,6 +2830,7 @@ const TVirtualRows = defineComponent({
 			cancelWheelScrollFrame();
 			const prevTop = controlledScrollTop.value;
 			controlledScrollTop.value = nextTop;
+			terminalGraphicsActivity.markScroll();
 			markScrollDamage(prevTop, nextTop);
 			selection.refresh(pendingSelectionScrollFocusRemap ? { remapFocus: true } : void 0);
 			pendingSelectionScrollFocusRemap = false;
@@ -1655,6 +2879,7 @@ const TVirtualRows = defineComponent({
 			pendingWheelTop = null;
 			resetWheelScrollState(wheelState);
 			wheelMailbox.dispose();
+			terminalGraphicsActivity.dispose();
 		});
 		const renderNode = useRenderNode(() => ({
 			zIndex: props.zIndex,
@@ -8024,7 +9249,7 @@ const TLogLinksPanel = defineComponent({
 
 //#endregion
 //#region src/vue/components/TLogVirtualSearchResults.ts
-function sliceByCells(text, start, end) {
+function sliceByCells$1(text, start, end) {
 	let cells = 0;
 	let out = "";
 	for (const ch of text) {
@@ -8040,9 +9265,9 @@ function formatItem$1(item, width, showLineNumbers) {
 	if (!item) return "";
 	const currentPrefix = item.current ? "*" : " ";
 	const linePrefix = showLineNumbers ? `${String(item.absoluteLineIndex).padStart(5, " ")} ` : "";
-	const before = sliceByCells(item.text, 0, item.matchStartCell);
-	const match = sliceByCells(item.text, item.matchStartCell, item.matchEndCell);
-	const after = sliceByCells(item.text, item.matchEndCell, Number.MAX_SAFE_INTEGER);
+	const before = sliceByCells$1(item.text, 0, item.matchStartCell);
+	const match = sliceByCells$1(item.text, item.matchStartCell, item.matchEndCell);
+	const after = sliceByCells$1(item.text, item.matchEndCell, Number.MAX_SAFE_INTEGER);
 	const formatted = `${currentPrefix}${linePrefix}${before}[${match}]${after}`;
 	return formatted.slice(0, Math.max(0, width));
 }
@@ -9690,4 +10915,4 @@ function resolveTLogMinimapTheme(theme) {
 }
 
 //#endregion
-export { TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, TTranscriptView, TVirtualList, createAppendOnlyLogStore, createTLogDensityBucketsFromMarkers, createTLogLevelPlugin, createTLogLineMatcherPlugin, createTLogLinkActionPlugin, createTLogOsc8LinkPlugin, createTLogUrlPlugin, detectTLogUrls, dispatchTLogPluginLinkAction, getTLogPluginMetadata, handleTLogKeymapEvent, matchesTLogKeyBinding, parseTLogAnnotatedText, resolveTLogLinksPanelTheme, resolveTLogMinimapTheme, resolveTLogScrollbarTheme, resolveTLogSearchBarTheme, resolveTLogSearchPagerTheme, resolveTLogSearchResultsTheme, resolveTLogViewTheme, stripTLogAnsiText, tlogDarkPreset, tlogDarkTheme, tlogDefaultKeymap, tlogDefaultPreset, tlogDefaultTheme, tlogHighContrastKeymap, tlogHighContrastPreset, tlogHighContrastTheme, toTLogExternalLinkFromVisibleLink, useTLogLinkController, useTLogRetainedIndex, useTLogSearchController, useTLogSearchResultsPage, useTLogVirtualSearchResults };
+export { TAgentTerminalGraphic, TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, TTranscriptView, TVirtualList, createAppendOnlyLogStore, createTLogDensityBucketsFromMarkers, createTLogLevelPlugin, createTLogLineMatcherPlugin, createTLogLinkActionPlugin, createTLogOsc8LinkPlugin, createTLogUrlPlugin, detectTLogUrls, dispatchTLogPluginLinkAction, getTLogPluginMetadata, handleTLogKeymapEvent, matchesTLogKeyBinding, parseTLogAnnotatedText, resolveTLogLinksPanelTheme, resolveTLogMinimapTheme, resolveTLogScrollbarTheme, resolveTLogSearchBarTheme, resolveTLogSearchPagerTheme, resolveTLogSearchResultsTheme, resolveTLogViewTheme, stripTLogAnsiText, tlogDarkPreset, tlogDarkTheme, tlogDefaultKeymap, tlogDefaultPreset, tlogDefaultTheme, tlogHighContrastKeymap, tlogHighContrastPreset, tlogHighContrastTheme, toTLogExternalLinkFromVisibleLink, useTLogLinkController, useTLogRetainedIndex, useTLogSearchController, useTLogSearchResultsPage, useTLogVirtualSearchResults };