@simon_he/vue-tui 1.1.1 → 1.1.2

package/dist/experimental.js

@@ -1,13 +1,1528 @@
+import { sanitizeTerminalHref } from "./hyperlink-_1FAj7Wq.js";
 import "./width-GqllnV8C.js";
-import { sanitizeTerminalHref } from "./hyperlink-B35-O-cW.js";
-import { EventZIndexContextKey, forEachTextCellSegment, intersectRect, sanitizeInlineText, sliceByCells, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility } from "./rect-Ng-3eKzF.js";
-import { mergeStyle } from "./linkify-CuuquMQT.js";
-import "./frame-perf-BBhE-iuS.js";
-import "./terminal-selection-CQYr--26.js";
-import "./wheel-scroll-CQ22Hcyj.js";
-import { 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 } from "./tlog-theme-CopRt9SC.js";
-import { computed, defineComponent, h, inject, ref } from "vue";
+import { EventZIndexContextKey, TerminalGraphicsActivityKey, forEachTextCellSegment, intersectRect, sanitizeInlineText, sliceByCells, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility } from "./rect-DUpeDfBg.js";
+import { TText, TView, createFrameMailbox, mergeStyle } from "./linkify-D68T7rdW.js";
+import "./frame-perf-CHpWhbC4.js";
+import "./terminal-selection-4W1SJj4c.js";
+import "./wheel-scroll-DASkEZr-.js";
+import { createIterm2InlineImageSequence, createKittyDeleteGraphicsSequence, createKittyGraphicsSequence, createKittyPlacementSequence, getTerminalGraphicsOutput, getTerminalGraphicsOutputVersion, subscribeTerminalGraphicsOutput } from "./terminal-graphics-Bbe83wSr.js";
+import { 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 } from "./tlog-theme-Bul2Na3u.js";
+import { computed, defineComponent, getCurrentInstance, h, inject, markRaw, onBeforeUnmount, onUnmounted, ref, shallowRef, watch } from "vue";
 
+//#region src/vue/components/TVideo.ts
+const DEFAULT_MAX_FPS$1 = 12;
+const DEFAULT_MAX_PIXEL_WIDTH = 640;
+const DEFAULT_MAX_PIXEL_HEIGHT = 360;
+const MAX_PIXEL_DIMENSION = 4096;
+const MAX_FRAME_BYTES = 8 * 1024 * 1024;
+const MAX_GRAY8_FPS = 10;
+const MAX_GRAY8_WIDTH = 512;
+const MAX_GRAY8_HEIGHT = 256;
+const ASCII_RAMP = " .:-=+*#%@";
+const CONTROL_REFRESH_MS = 250;
+const PLAYBACK_RATES = [
+	1,
+	2,
+	3
+];
+function positiveInt(value, fallback, max) {
+	const parsed = Math.floor(Number(value));
+	if (!Number.isFinite(parsed) || parsed <= 0) return Math.min(max, fallback);
+	return Math.min(max, parsed);
+}
+function positiveNumber(value, fallback, max) {
+	const parsed = Number(value);
+	if (!Number.isFinite(parsed) || parsed <= 0) return fallback;
+	return Math.min(max, parsed);
+}
+function playbackRate(value) {
+	return value === 2 || value === 3 ? value : 1;
+}
+function optionalDuration(value) {
+	const parsed = Number(value);
+	return Number.isFinite(parsed) && parsed > 0 ? parsed : void 0;
+}
+function formatPlaybackTime(valueMs, hourDigits = 0) {
+	if (valueMs == null) return "--:--";
+	const seconds = Math.max(0, Math.floor(valueMs / 1e3));
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor(seconds % 3600 / 60);
+	const remainder = seconds % 60;
+	if (hours > 0 || hourDigits > 0) return `${String(hours).padStart(Math.max(1, hourDigits), "0")}:${String(minutes).padStart(2, "0")}:${String(remainder).padStart(2, "0")}`;
+	return `${String(minutes).padStart(2, "0")}:${String(remainder).padStart(2, "0")}`;
+}
+function readUint32(bytes, offset) {
+	return bytes[offset] * 16777216 + (bytes[offset + 1] << 16) + (bytes[offset + 2] << 8) + bytes[offset + 3] >>> 0;
+}
+function normalizeFrame(frame) {
+	if (frame.format === "gray8") {
+		const pixelWidth$1 = Math.floor(Number(frame.pixelWidth));
+		const pixelHeight$1 = Math.floor(Number(frame.pixelHeight));
+		const pixels = frame.pixels;
+		if (!Number.isFinite(pixelWidth$1) || !Number.isFinite(pixelHeight$1) || pixelWidth$1 <= 0 || pixelHeight$1 <= 0 || pixelWidth$1 > MAX_GRAY8_WIDTH || pixelHeight$1 > MAX_GRAY8_HEIGHT || !(pixels instanceof Uint8Array) || pixels.length !== pixelWidth$1 * pixelHeight$1 || pixels.length > MAX_FRAME_BYTES) throw new Error("TVideo gray8 frame must match its bounded pixel dimensions");
+		return {
+			format: "gray8",
+			pixels,
+			timestampMs: Math.max(0, Number(frame.timestampMs) || 0),
+			pixelWidth: pixelWidth$1,
+			pixelHeight: pixelHeight$1,
+			fingerprint: frame.fingerprint,
+			durationMs: optionalDuration(frame.durationMs)
+		};
+	}
+	const png = frame.png;
+	if (!(png instanceof Uint8Array) || png.length < 24 || png.length > MAX_FRAME_BYTES) throw new Error("TVideo frame must contain a bounded PNG Uint8Array");
+	if (png[0] !== 137 || png[1] !== 80 || png[2] !== 78 || png[3] !== 71 || png[4] !== 13 || png[5] !== 10 || png[6] !== 26 || png[7] !== 10) throw new Error("TVideo frame source emitted invalid PNG data");
+	const pixelWidth = readUint32(png, 16);
+	const pixelHeight = readUint32(png, 20);
+	if (pixelWidth <= 0 || pixelHeight <= 0 || pixelWidth > MAX_PIXEL_DIMENSION || pixelHeight > MAX_PIXEL_DIMENSION) throw new Error(`TVideo frame has an unsupported size: ${pixelWidth}x${pixelHeight}`);
+	return {
+		format: "png",
+		png,
+		timestampMs: Math.max(0, Number(frame.timestampMs) || 0),
+		pixelWidth,
+		pixelHeight,
+		fingerprint: frame.fingerprint,
+		durationMs: optionalDuration(frame.durationMs)
+	};
+}
+function frameBytes(frame) {
+	return frame.format === "gray8" ? frame.pixels : frame.png;
+}
+function gray8ToAscii(frame, cellWidth) {
+	const lines = [];
+	const width = Math.max(1, Math.floor(cellWidth));
+	for (let y = 0; y < frame.pixelHeight; y++) {
+		let line = "";
+		const rowStart = y * frame.pixelWidth;
+		for (let x = 0; x < frame.pixelWidth; x++) {
+			const value = frame.pixels[rowStart + x];
+			const glyph = ASCII_RAMP[Math.min(ASCII_RAMP.length - 1, value * ASCII_RAMP.length >> 8)];
+			line += `${glyph}${glyph}`;
+		}
+		lines.push(line.slice(0, width));
+	}
+	return lines.join("\n");
+}
+function sameBytes(left, right) {
+	if (left.length !== right.length) return false;
+	for (let index = 0; index < left.length; index++) if (left[index] !== right[index]) return false;
+	return true;
+}
+function bytesToBase64(bytes) {
+	const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+	const chunks = [];
+	let chunk = "";
+	for (let index = 0; index < bytes.length; index += 3) {
+		const a = bytes[index];
+		const hasB = index + 1 < bytes.length;
+		const hasC = index + 2 < bytes.length;
+		const b = hasB ? bytes[index + 1] : 0;
+		const c = hasC ? bytes[index + 2] : 0;
+		chunk += alphabet[a >> 2] + alphabet[(a & 3) << 4 | b >> 4] + (hasB ? alphabet[(b & 15) << 2 | c >> 6] : "=") + (hasC ? alphabet[c & 63] : "=");
+		if (chunk.length >= 16384) {
+			chunks.push(chunk);
+			chunk = "";
+		}
+	}
+	if (chunk) chunks.push(chunk);
+	return chunks.join("");
+}
+function resolveKittyPlacement(frame, context) {
+	const rect = context.viewport.rect;
+	const full = context.viewport.fullRect;
+	const columns = Math.max(1, Math.floor(rect.w));
+	const rows = Math.max(1, Math.floor(rect.h));
+	if (full.w <= 0 || full.h <= 0) return {
+		columns,
+		rows
+	};
+	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));
+	if (offsetX <= 0 && offsetY <= 0 && visibleW >= full.w && visibleH >= full.h) return {
+		columns,
+		rows
+	};
+	const sourceX = Math.max(0, Math.min(frame.pixelWidth - 1, Math.floor(offsetX * frame.pixelWidth / full.w)));
+	const sourceY = Math.max(0, Math.min(frame.pixelHeight - 1, Math.floor(offsetY * frame.pixelHeight / full.h)));
+	const sourceRight = Math.max(sourceX + 1, Math.min(frame.pixelWidth, Math.ceil((offsetX + visibleW) * frame.pixelWidth / full.w)));
+	const sourceBottom = Math.max(sourceY + 1, Math.min(frame.pixelHeight, Math.ceil((offsetY + visibleH) * frame.pixelHeight / full.h)));
+	return {
+		columns,
+		rows,
+		sourceX,
+		sourceY,
+		sourceWidth: sourceRight - sourceX,
+		sourceHeight: sourceBottom - sourceY
+	};
+}
+function createFrameRenderer(frame, cellWidth) {
+	if (frame.format === "gray8") {
+		const text = gray8ToAscii(frame, cellWidth);
+		return () => ({
+			type: "text",
+			text
+		});
+	}
+	let base64;
+	return (_content, context) => {
+		if (!context.visible || !context.rawVisible) return null;
+		base64 ?? (base64 = bytesToBase64(frame.png));
+		if (context.protocol === "kitty") {
+			const placement = resolveKittyPlacement(frame, context);
+			return {
+				type: "sequence",
+				protocol: "kitty",
+				sequence: createKittyGraphicsSequence(base64, {
+					imageId: context.imageId,
+					placementId: context.placementId,
+					...placement
+				}),
+				resizeSequence: createKittyPlacementSequence({
+					imageId: context.imageId,
+					placementId: context.placementId,
+					...placement
+				}),
+				clearSequence: createKittyDeleteGraphicsSequence({
+					imageId: context.imageId,
+					placementId: context.placementId,
+					freeImageData: true
+				}),
+				cols: context.width,
+				rows: context.height,
+				sourceWidth: frame.pixelWidth,
+				sourceHeight: frame.pixelHeight
+			};
+		}
+		if (context.protocol === "iterm2") return {
+			type: "sequence",
+			protocol: "iterm2",
+			sequence: createIterm2InlineImageSequence(base64, {
+				width: context.width,
+				height: context.height,
+				preserveAspectRatio: true,
+				doNotMoveCursor: true
+			}),
+			cols: context.width,
+			rows: context.height,
+			sourceWidth: frame.pixelWidth,
+			sourceHeight: frame.pixelHeight
+		};
+		return null;
+	};
+}
+function errorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+const tVideoProps = {
+	x: {
+		type: Number,
+		required: true
+	},
+	y: {
+		type: Number,
+		required: true
+	},
+	w: {
+		type: Number,
+		required: true
+	},
+	h: {
+		type: Number,
+		required: true
+	},
+	zIndex: {
+		type: Number,
+		default: 0
+	},
+	src: {
+		type: String,
+		required: true
+	},
+	frameSource: {
+		type: Function,
+		required: true
+	},
+	paused: {
+		type: Boolean,
+		default: void 0
+	},
+	playbackRate: {
+		type: Number,
+		default: void 0
+	},
+	controls: {
+		type: Boolean,
+		default: false
+	},
+	controlsLayout: {
+		type: String,
+		default: "compact"
+	},
+	durationMs: {
+		type: Number,
+		default: void 0
+	},
+	loop: {
+		type: Boolean,
+		default: false
+	},
+	maxFps: {
+		type: Number,
+		default: DEFAULT_MAX_FPS$1
+	},
+	pixelWidth: {
+		type: Number,
+		default: void 0
+	},
+	pixelHeight: {
+		type: Number,
+		default: void 0
+	},
+	fallback: {
+		type: String,
+		default: "[video]"
+	},
+	style: {
+		type: Object,
+		default: void 0
+	},
+	clear: {
+		type: Boolean,
+		default: true
+	}
+};
+const TVideo = defineComponent({
+	name: "TVideo",
+	props: tVideoProps,
+	emits: {
+		frame: (_event) => true,
+		ended: () => true,
+		error: (_error) => true,
+		seek: (_event) => true,
+		"update:paused": (_paused) => true,
+		"update:playbackRate": (_rate) => true
+	},
+	setup(props, { emit }) {
+		const instance = getCurrentInstance();
+		const { terminal, scheduler } = useTerminal();
+		const layout = useLayout();
+		const { visible, rootProps } = useVisibility({ provide: true });
+		const graphicsActivity = inject(TerminalGraphicsActivityKey, null);
+		const frameRenderer = shallowRef();
+		const playbackError = shallowRef("");
+		const internalPaused = shallowRef(props.paused ?? false);
+		const internalPlaybackRate = shallowRef(playbackRate(props.playbackRate));
+		const discoveredDurationMs = shallowRef();
+		const displayedTimestampMs = shallowRef(0);
+		const seekPreviewMs = shallowRef();
+		const seeking = shallowRef(false);
+		const terminalSizeVersion = shallowRef(0);
+		const graphicsOutputVersion = shallowRef(getTerminalGraphicsOutputVersion(terminal));
+		const placementKey = `TVideo:${instance?.uid ?? "unknown"}`;
+		const mailboxId = `${placementKey}:frame`;
+		let alive = true;
+		let generation = 0;
+		let activeAbort = null;
+		let lastSourceBytes = null;
+		let lastQueuedBytes = null;
+		let lastQueuedFormat = null;
+		let lastQueuedFingerprint;
+		let lastTimestampMs = 0;
+		let droppedFrames = 0;
+		let pendingEndedGeneration = null;
+		let suppressNextVideoClick = false;
+		let controlPointerCapture = null;
+		const unsubscribeTerminalResize = terminal.on("resize", () => {
+			terminalSizeVersion.value++;
+		});
+		const unsubscribeGraphicsOutput = subscribeTerminalGraphicsOutput(terminal, () => {
+			graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal);
+		});
+		const showControls = computed(() => props.controls && Math.floor(props.w) >= 14 && Math.floor(props.h) >= 2);
+		const resolvedControlsLayout = computed(() => props.controlsLayout === "cinema" && Math.floor(props.h) >= 3 ? "cinema" : "compact");
+		const controlRows = computed(() => showControls.value ? resolvedControlsLayout.value === "cinema" ? 2 : 1 : 0);
+		const videoHeight = computed(() => Math.max(1, Math.floor(props.h) - controlRows.value));
+		const resolvedMaxFps = computed(() => positiveNumber(props.maxFps, DEFAULT_MAX_FPS$1, 60));
+		const resolvedPixelSize = computed(() => {
+			const desiredWidth = Math.max(2, Math.floor(props.w) * 8);
+			const desiredHeight = Math.max(2, videoHeight.value * 16);
+			if (props.pixelWidth == null && props.pixelHeight == null) {
+				const scale = Math.min(1, DEFAULT_MAX_PIXEL_WIDTH / desiredWidth, DEFAULT_MAX_PIXEL_HEIGHT / desiredHeight);
+				return {
+					width: Math.max(2, Math.floor(desiredWidth * scale)),
+					height: Math.max(2, Math.floor(desiredHeight * scale))
+				};
+			}
+			if (props.pixelWidth != null && props.pixelHeight == null) {
+				const width = positiveInt(props.pixelWidth, desiredWidth, MAX_PIXEL_DIMENSION);
+				const inferredHeight = width * desiredHeight / desiredWidth;
+				const scale = Math.min(1, MAX_PIXEL_DIMENSION / inferredHeight);
+				return {
+					width: Math.max(2, Math.floor(width * scale)),
+					height: Math.max(2, Math.floor(inferredHeight * scale))
+				};
+			}
+			if (props.pixelWidth == null && props.pixelHeight != null) {
+				const height = positiveInt(props.pixelHeight, desiredHeight, MAX_PIXEL_DIMENSION);
+				const inferredWidth = height * desiredWidth / desiredHeight;
+				const scale = Math.min(1, MAX_PIXEL_DIMENSION / inferredWidth);
+				return {
+					width: Math.max(2, Math.floor(inferredWidth * scale)),
+					height: Math.max(2, Math.floor(height * scale))
+				};
+			}
+			return {
+				width: positiveInt(props.pixelWidth, desiredWidth, MAX_PIXEL_DIMENSION),
+				height: positiveInt(props.pixelHeight, desiredHeight, MAX_PIXEL_DIMENSION)
+			};
+		});
+		const resolvedPixelWidth = computed(() => resolvedPixelSize.value.width);
+		const resolvedPixelHeight = computed(() => resolvedPixelSize.value.height);
+		const paintable = computed(() => {
+			terminalSizeVersion.value;
+			if (!visible.value) return false;
+			const size = terminal.size();
+			const terminalRect = {
+				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, terminalRect) : terminalRect;
+			if (!clip) return false;
+			const rect = translateRect({
+				x: props.x,
+				y: props.y,
+				w: props.w,
+				h: videoHeight.value
+			}, layout.originX, layout.originY);
+			const visibleRect = intersectRect(rect, clip);
+			return Boolean(visibleRect && visibleRect.w > 0 && visibleRect.h > 0);
+		});
+		const graphicsProtocol = computed(() => {
+			graphicsOutputVersion.value;
+			return getTerminalGraphicsOutput(terminal)?.capabilities.preferredProtocol ?? null;
+		});
+		const preferredFormat = computed(() => graphicsProtocol.value === "kitty" || graphicsProtocol.value === "iterm2" ? "png" : "gray8");
+		const resolvedDecodeFps = computed(() => preferredFormat.value === "gray8" ? Math.min(MAX_GRAY8_FPS, resolvedMaxFps.value) : resolvedMaxFps.value);
+		const resolvedDecodeWidth = computed(() => preferredFormat.value === "gray8" ? positiveInt(Math.ceil(props.w / 2), 1, MAX_GRAY8_WIDTH) : resolvedPixelWidth.value);
+		const resolvedDecodeHeight = computed(() => preferredFormat.value === "gray8" ? positiveInt(videoHeight.value, 1, MAX_GRAY8_HEIGHT) : resolvedPixelHeight.value);
+		const resolvedDurationMs = computed(() => optionalDuration(props.durationMs) ?? discoveredDurationMs.value);
+		const effectivePaused = computed(() => props.paused ?? internalPaused.value);
+		const effectivePlaybackRate = computed(() => props.playbackRate == null ? internalPlaybackRate.value : playbackRate(props.playbackRate));
+		const controlTimestampMs = computed(() => seekPreviewMs.value ?? displayedTimestampMs.value);
+		const timeHourDigits = computed(() => {
+			const duration = resolvedDurationMs.value;
+			if (!duration || duration < 36e5) return 0;
+			return String(Math.floor(duration / 36e5)).length;
+		});
+		const currentTimeText = computed(() => formatPlaybackTime(controlTimestampMs.value, timeHourDigits.value));
+		const durationTimeText = computed(() => formatPlaybackTime(resolvedDurationMs.value, timeHourDigits.value));
+		const controlLayout = computed(() => {
+			const width = Math.max(1, Math.floor(props.w));
+			const progressY = videoHeight.value;
+			const current = currentTimeText.value;
+			const duration = durationTimeText.value;
+			const timeWidth = Math.max(textCellWidth(current), textCellWidth(duration));
+			const ratesWidth = 8;
+			if (resolvedControlsLayout.value === "cinema") {
+				const ratesX$1 = Math.max(3, width - ratesWidth);
+				const timeText = `${current} / ${duration}`;
+				return {
+					width,
+					kind: "cinema",
+					progressX: 0,
+					progressY,
+					progressWidth: width,
+					actionY: progressY + 1,
+					ratesX: ratesX$1,
+					showAllRates: true,
+					showTimes: 3 + textCellWidth(timeText) < ratesX$1,
+					current,
+					duration,
+					timeText,
+					timeWidth,
+					currentX: 3,
+					totalX: 0
+				};
+			}
+			const ratesX = width - ratesWidth;
+			const progressX = timeWidth + 4;
+			const totalX = ratesX - timeWidth - 1;
+			const progressWidth = totalX - progressX - 1;
+			if (progressWidth >= 4) return {
+				width,
+				kind: "compact",
+				progressX,
+				progressY,
+				progressWidth,
+				actionY: progressY,
+				ratesX,
+				showAllRates: true,
+				showTimes: true,
+				current,
+				duration,
+				timeText: "",
+				timeWidth,
+				currentX: 3,
+				totalX
+			};
+			const compactRatesX = Math.max(4, width - 2);
+			return {
+				width,
+				kind: "compact",
+				progressX: 3,
+				progressY,
+				progressWidth: Math.max(1, compactRatesX - 4),
+				actionY: progressY,
+				ratesX: compactRatesX,
+				showAllRates: false,
+				showTimes: false,
+				current,
+				duration,
+				timeText: "",
+				timeWidth,
+				currentX: 0,
+				totalX: 0
+			};
+		});
+		const rateStyles = computed(() => PLAYBACK_RATES.map((rate) => rate === effectivePlaybackRate.value ? {
+			...props.style,
+			inverse: true
+		} : props.style));
+		const remainingProgressStyle = computed(() => ({
+			...props.style,
+			dim: true
+		}));
+		const progressThumbStyle = computed(() => ({
+			...props.style,
+			inverse: true
+		}));
+		const progressSegments = computed(() => {
+			const { progressWidth } = controlLayout.value;
+			const duration = resolvedDurationMs.value;
+			if (!duration) return {
+				playedWidth: 0,
+				thumbWidth: 0,
+				remainingWidth: progressWidth
+			};
+			const ratio = Math.max(0, Math.min(1, controlTimestampMs.value / duration));
+			const marker = Math.round(ratio * Math.max(0, progressWidth - 1));
+			return {
+				playedWidth: marker,
+				thumbWidth: 1,
+				remainingWidth: progressWidth - marker - 1
+			};
+		});
+		const controlFill = computed(() => " ".repeat(controlLayout.value.width));
+		const progressGlyphs = computed(() => ({
+			played: "━".repeat(progressSegments.value.playedWidth),
+			remaining: "─".repeat(progressSegments.value.remainingWidth)
+		}));
+		const playbackEnabled = computed(() => alive && !effectivePaused.value && !graphicsActivity?.scrolling.value && props.src.trim().length > 0 && paintable.value);
+		const shouldPlay = computed(() => playbackEnabled.value && !seeking.value);
+		const visibleFallback = computed(() => playbackError.value ? `${props.fallback}: ${playbackError.value}` : props.fallback);
+		function timelineTimestamp(timestampMs) {
+			const duration = resolvedDurationMs.value;
+			if (!duration) return Math.max(0, timestampMs);
+			if (props.loop) return Math.max(0, timestampMs) % duration;
+			return Math.max(0, Math.min(duration, timestampMs));
+		}
+		function seekTimestamp(timestampMs) {
+			const duration = resolvedDurationMs.value;
+			if (!duration) return Math.max(0, timestampMs);
+			const end = props.loop ? Math.max(0, duration - 1) : duration;
+			return Math.max(0, Math.min(end, timestampMs));
+		}
+		function updateTimestamp(timestampMs, force = false) {
+			const next = timelineTimestamp(timestampMs);
+			lastTimestampMs = next;
+			if (!showControls.value) return;
+			const threshold = CONTROL_REFRESH_MS * effectivePlaybackRate.value;
+			if (force || next < displayedTimestampMs.value || Math.abs(next - displayedTimestampMs.value) >= threshold) displayedTimestampMs.value = next;
+		}
+		function commitFrame(frame, dropped) {
+			if (!alive) return;
+			droppedFrames += dropped;
+			frameRenderer.value = markRaw(createFrameRenderer(frame, props.w));
+			updateTimestamp(frame.timestampMs);
+			const durationMs = resolvedDurationMs.value;
+			emit("frame", {
+				timestampMs: frame.timestampMs,
+				pixelWidth: frame.pixelWidth,
+				pixelHeight: frame.pixelHeight,
+				droppedFrames,
+				...durationMs ? { durationMs } : {},
+				playbackRate: effectivePlaybackRate.value
+			});
+		}
+		const mailbox = createFrameMailbox({
+			scheduler,
+			id: mailboxId,
+			reason: "stream",
+			priority: "low",
+			apply(frame, _context, meta) {
+				commitFrame(frame, meta.dropped);
+				if (pendingEndedGeneration === generation) {
+					pendingEndedGeneration = null;
+					emit("ended");
+				}
+			}
+		});
+		function stopPlayback() {
+			generation++;
+			pendingEndedGeneration = null;
+			const discardedPendingFrame = mailbox.hasPending();
+			mailbox.cancel();
+			if (discardedPendingFrame) {
+				lastQueuedBytes = null;
+				lastQueuedFormat = null;
+				lastQueuedFingerprint = void 0;
+			}
+			activeAbort?.abort();
+			activeAbort = null;
+		}
+		function resetQueuedFrameIdentity() {
+			lastSourceBytes = null;
+			lastQueuedBytes = null;
+			lastQueuedFormat = null;
+			lastQueuedFingerprint = void 0;
+		}
+		function setPaused(paused) {
+			if (effectivePaused.value === paused) return;
+			if (props.paused == null) internalPaused.value = paused;
+			emit("update:paused", paused);
+		}
+		function setPlaybackRate(rate) {
+			const next = playbackRate(rate);
+			if (effectivePlaybackRate.value === next) return;
+			if (props.playbackRate == null) internalPlaybackRate.value = next;
+			emit("update:playbackRate", next);
+		}
+		function applySeek(timestampMs, restart) {
+			const parsed = Number(timestampMs);
+			if (!Number.isFinite(parsed)) return;
+			stopPlayback();
+			resetQueuedFrameIdentity();
+			const next = seekTimestamp(parsed);
+			updateTimestamp(next, true);
+			seekPreviewMs.value = void 0;
+			const durationMs = resolvedDurationMs.value;
+			emit("seek", {
+				timestampMs: next,
+				...durationMs ? { durationMs } : {}
+			});
+			if (restart) startPlayback(effectivePaused.value);
+		}
+		function controlCell(event) {
+			return {
+				x: Math.floor(event.cellX - layout.originX - props.x),
+				y: Math.floor(event.cellY - layout.originY - props.y)
+			};
+		}
+		function previewSeekAt(cellX) {
+			const duration = resolvedDurationMs.value;
+			if (!duration) return;
+			const { progressX, progressWidth } = controlLayout.value;
+			const offset = Math.max(0, Math.min(progressWidth - 1, cellX - progressX));
+			seekPreviewMs.value = progressWidth <= 1 ? 0 : offset / Math.max(1, progressWidth - 1) * duration;
+		}
+		function captureControlPointer(event) {
+			const native = event.nativeEvent;
+			const pointerId = native?.pointerId;
+			const target = native?.target;
+			if (pointerId == null || !target?.setPointerCapture) return;
+			target.setPointerCapture(pointerId);
+			controlPointerCapture = {
+				pointerId,
+				target
+			};
+		}
+		function releaseControlPointer() {
+			if (!controlPointerCapture) return;
+			controlPointerCapture.target.releasePointerCapture?.(controlPointerCapture.pointerId);
+			controlPointerCapture = null;
+		}
+		function rateAt(cellX) {
+			const { ratesX, showAllRates } = controlLayout.value;
+			const offset = cellX - ratesX;
+			if (!showAllRates) {
+				if (offset < 0 || offset >= 2) return void 0;
+				const index = PLAYBACK_RATES.indexOf(effectivePlaybackRate.value);
+				return PLAYBACK_RATES[(index + 1) % PLAYBACK_RATES.length];
+			}
+			if (offset < 0 || offset % 3 >= 2) return void 0;
+			return PLAYBACK_RATES[Math.floor(offset / 3)];
+		}
+		function onInteractivePointerDown(event) {
+			if (event.button != null && event.button !== 0) return;
+			const { x: cellX, y: cellY } = controlCell(event);
+			if (cellY < videoHeight.value) {
+				suppressNextVideoClick = false;
+				return;
+			}
+			if (!showControls.value) return;
+			const { actionY, progressY, progressX, progressWidth } = controlLayout.value;
+			const rate = rateAt(cellX);
+			if (cellY === actionY && cellX <= 1) {
+				event.preventDefault();
+				event.stopPropagation();
+				suppressNextVideoClick = true;
+				setPaused(!effectivePaused.value);
+				return;
+			}
+			if (cellY === actionY && rate) {
+				event.preventDefault();
+				event.stopPropagation();
+				suppressNextVideoClick = true;
+				setPlaybackRate(rate);
+				return;
+			}
+			if (cellY !== progressY || !resolvedDurationMs.value || cellX < progressX || cellX >= progressX + progressWidth) return;
+			event.preventDefault();
+			event.stopPropagation();
+			suppressNextVideoClick = true;
+			seeking.value = true;
+			stopPlayback();
+			previewSeekAt(cellX);
+			captureControlPointer(event);
+		}
+		function onInteractivePointerMove(event) {
+			if (!seeking.value) return;
+			if (event.buttons === 0) {
+				onInteractivePointerUp(event);
+				return;
+			}
+			event.preventDefault();
+			event.stopPropagation();
+			previewSeekAt(controlCell(event).x);
+		}
+		function onInteractivePointerUp(event) {
+			if (!seeking.value) return;
+			event.preventDefault();
+			event.stopPropagation();
+			previewSeekAt(controlCell(event).x);
+			const timestampMs = seekPreviewMs.value ?? lastTimestampMs;
+			applySeek(timestampMs, false);
+			seeking.value = false;
+			releaseControlPointer();
+			startPlayback(effectivePaused.value);
+		}
+		function onVideoClick(event) {
+			if (event.button != null && event.button !== 0) return;
+			if (suppressNextVideoClick) {
+				suppressNextVideoClick = false;
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			if (controlCell(event).y >= videoHeight.value) return;
+			event.preventDefault();
+			event.stopPropagation();
+			setPaused(!effectivePaused.value);
+		}
+		function finishControlSeek() {
+			if (!seeking.value) return;
+			const timestampMs = seekPreviewMs.value ?? lastTimestampMs;
+			applySeek(timestampMs, false);
+			seeking.value = false;
+			releaseControlPointer();
+			startPlayback(effectivePaused.value);
+		}
+		function onControlKeydown(event) {
+			if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+				event.preventDefault();
+				event.stopPropagation();
+				setPaused(!effectivePaused.value);
+				return;
+			}
+			if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+				event.preventDefault();
+				event.stopPropagation();
+				const index = PLAYBACK_RATES.indexOf(effectivePlaybackRate.value);
+				const offset = event.key === "ArrowUp" ? 1 : -1;
+				setPlaybackRate(PLAYBACK_RATES[Math.max(0, Math.min(2, index + offset))]);
+				return;
+			}
+			if (!event.repeat && (event.key === "Home" || event.key === "End") && resolvedDurationMs.value) {
+				event.preventDefault();
+				event.stopPropagation();
+				applySeek(event.key === "Home" ? 0 : resolvedDurationMs.value, true);
+				return;
+			}
+			if (event.key === "1" || event.key === "2" || event.key === "3") {
+				event.preventDefault();
+				event.stopPropagation();
+				setPlaybackRate(Number(event.key));
+			}
+		}
+		function queueFrame(frame, expectedFormat) {
+			let normalized = normalizeFrame(frame);
+			if (normalized.format !== expectedFormat) throw new Error(`TVideo frame source did not provide requested ${expectedFormat} frames`);
+			if (normalized.durationMs != null && normalized.durationMs !== discoveredDurationMs.value) discoveredDurationMs.value = normalized.durationMs;
+			normalized = {
+				...normalized,
+				timestampMs: timelineTimestamp(normalized.timestampMs)
+			};
+			const sourceBytes = frameBytes(normalized);
+			const reusesSourceBuffer = sourceBytes === lastSourceBytes;
+			lastSourceBytes = sourceBytes;
+			const stableFrame = reusesSourceBuffer ? normalized.format === "gray8" ? {
+				...normalized,
+				pixels: new Uint8Array(normalized.pixels)
+			} : {
+				...normalized,
+				png: new Uint8Array(normalized.png)
+			} : normalized;
+			const bytes = frameBytes(stableFrame);
+			const sameFingerprint = normalized.format === lastQueuedFormat && normalized.fingerprint != null && lastQueuedFingerprint != null && normalized.fingerprint === lastQueuedFingerprint;
+			const canCompareBytes = normalized.fingerprint == null && lastQueuedFingerprint == null && !reusesSourceBuffer;
+			if (sameFingerprint || canCompareBytes && normalized.format === lastQueuedFormat && lastQueuedBytes && sameBytes(lastQueuedBytes, sourceBytes)) {
+				lastQueuedBytes = bytes;
+				lastQueuedFormat = normalized.format;
+				lastQueuedFingerprint = normalized.fingerprint;
+				updateTimestamp(normalized.timestampMs);
+				if (mailbox.hasPending()) mailbox.replacePending(stableFrame);
+				return;
+			}
+			lastQueuedBytes = bytes;
+			lastQueuedFormat = normalized.format;
+			lastQueuedFingerprint = normalized.fingerprint;
+			if (!mailbox.queue(stableFrame)) {
+				commitFrame(stableFrame, 0);
+				scheduler.invalidate({
+					priority: "low",
+					reason: "stream"
+				});
+			}
+		}
+		function startPlayback(oneFrame = false) {
+			stopPlayback();
+			if (!shouldPlay.value && !(oneFrame && alive && props.src.trim().length > 0 && paintable.value && !graphicsActivity?.scrolling.value)) return;
+			const currentGeneration = generation;
+			const abort = new AbortController();
+			activeAbort = abort;
+			playbackError.value = "";
+			const source = props.frameSource;
+			const format = preferredFormat.value;
+			const context = {
+				src: props.src,
+				signal: abort.signal,
+				maxFps: resolvedDecodeFps.value,
+				pixelWidth: resolvedDecodeWidth.value,
+				pixelHeight: resolvedDecodeHeight.value,
+				startAtMs: lastTimestampMs,
+				preferredFormat: format,
+				playbackRate: effectivePlaybackRate.value,
+				loop: props.loop
+			};
+			(async () => {
+				try {
+					const frames = await source(context);
+					for await (const frame of frames) {
+						if (!alive || abort.signal.aborted || currentGeneration !== generation) return;
+						queueFrame(frame, format);
+						if (oneFrame) return;
+					}
+					if (!alive || abort.signal.aborted || currentGeneration !== generation) return;
+					if (mailbox.hasPending()) pendingEndedGeneration = currentGeneration;
+					else emit("ended");
+				} catch (error) {
+					if (!alive || abort.signal.aborted || currentGeneration !== generation) return;
+					playbackError.value = errorMessage(error);
+					emit("error", error);
+					scheduler.invalidate({
+						priority: "low",
+						reason: "data"
+					});
+				} finally {
+					if (activeAbort === abort) activeAbort = null;
+				}
+			})();
+		}
+		watch(() => props.paused, (paused) => {
+			if (paused != null) internalPaused.value = paused;
+		});
+		watch(() => props.playbackRate, (rate) => {
+			if (rate != null) internalPlaybackRate.value = playbackRate(rate);
+		});
+		watch([
+			() => props.src,
+			() => props.frameSource,
+			playbackEnabled,
+			resolvedDecodeFps,
+			resolvedDecodeWidth,
+			resolvedDecodeHeight,
+			preferredFormat,
+			effectivePlaybackRate,
+			() => props.loop
+		], (next, previous) => {
+			const sourceChanged = !previous || next[0] !== previous[0] || next[1] !== previous[1];
+			const formatChanged = !previous || next[6] !== previous[6];
+			if (sourceChanged || formatChanged) {
+				resetQueuedFrameIdentity();
+				if (sourceChanged) {
+					lastTimestampMs = 0;
+					displayedTimestampMs.value = 0;
+					discoveredDurationMs.value = void 0;
+					seekPreviewMs.value = void 0;
+					seeking.value = false;
+					suppressNextVideoClick = false;
+					releaseControlPointer();
+					droppedFrames = 0;
+				}
+				playbackError.value = "";
+				frameRenderer.value = void 0;
+			}
+			startPlayback();
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		onBeforeUnmount(() => {
+			alive = false;
+			stopPlayback();
+			releaseControlPointer();
+			mailbox.dispose();
+			unsubscribeTerminalResize();
+			unsubscribeGraphicsOutput();
+		});
+		return () => {
+			const children = [h(TAgentTerminalGraphic, {
+				x: props.x,
+				y: props.y,
+				w: props.w,
+				h: videoHeight.value,
+				zIndex: props.zIndex,
+				content: props.src.trim() ? props.src : "video",
+				fallback: visibleFallback.value,
+				style: props.style,
+				clear: props.clear,
+				final: false,
+				streaming: true,
+				renderer: frameRenderer.value,
+				placementKey,
+				preserveRawWhileRendering: true,
+				ignoreSamePlaneRawCoverage: true,
+				suspended: !paintable.value
+			})];
+			if (props.controls) children.push(h(TView, {
+				x: props.x,
+				y: props.y,
+				w: Math.max(0, Math.floor(props.w)),
+				h: Math.max(0, Math.floor(props.h)),
+				zIndex: props.zIndex,
+				focusable: true,
+				selectable: false,
+				onClick: onVideoClick,
+				onPointerdown: onInteractivePointerDown,
+				onPointermove: onInteractivePointerMove,
+				onPointerup: onInteractivePointerUp,
+				onKeydown: onControlKeydown,
+				onBlur: finishControlSeek
+			}, () => {
+				if (!showControls.value) return [];
+				const layout$1 = controlLayout.value;
+				const segments = progressSegments.value;
+				const controls = Array.from({ length: controlRows.value }, (_, index) => h(TText, {
+					x: 0,
+					y: videoHeight.value + index,
+					w: layout$1.width,
+					value: controlFill.value,
+					style: props.style
+				}));
+				controls.push(h(TText, {
+					x: 0,
+					y: layout$1.actionY,
+					w: 2,
+					value: effectivePaused.value ? "> " : "||",
+					style: props.style
+				}));
+				if (layout$1.showTimes) if (layout$1.kind === "cinema") controls.push(h(TText, {
+					x: layout$1.currentX,
+					y: layout$1.actionY,
+					w: textCellWidth(layout$1.timeText),
+					value: layout$1.timeText,
+					style: props.style
+				}));
+				else controls.push(h(TText, {
+					x: layout$1.currentX,
+					y: layout$1.actionY,
+					w: layout$1.timeWidth,
+					value: layout$1.current,
+					style: props.style
+				}), h(TText, {
+					x: layout$1.totalX,
+					y: layout$1.actionY,
+					w: layout$1.timeWidth,
+					value: layout$1.duration,
+					style: props.style
+				}));
+				if (segments.playedWidth > 0) controls.push(h(TText, {
+					x: layout$1.progressX,
+					y: layout$1.progressY,
+					w: segments.playedWidth,
+					value: progressGlyphs.value.played,
+					style: props.style
+				}));
+				if (segments.thumbWidth > 0) controls.push(h(TText, {
+					x: layout$1.progressX + segments.playedWidth,
+					y: layout$1.progressY,
+					w: 1,
+					value: "╋",
+					style: progressThumbStyle.value
+				}));
+				if (segments.remainingWidth > 0) controls.push(h(TText, {
+					x: layout$1.progressX + segments.playedWidth + segments.thumbWidth,
+					y: layout$1.progressY,
+					w: segments.remainingWidth,
+					value: progressGlyphs.value.remaining,
+					style: remainingProgressStyle.value
+				}));
+				if (layout$1.showAllRates) controls.push(...PLAYBACK_RATES.map((rate, index) => h(TText, {
+					x: layout$1.ratesX + index * 3,
+					y: layout$1.actionY,
+					w: 2,
+					value: `${rate}x`,
+					style: rateStyles.value[index]
+				})));
+				else controls.push(h(TText, {
+					x: layout$1.ratesX,
+					y: layout$1.actionY,
+					w: 2,
+					value: `${effectivePlaybackRate.value}x`,
+					style: rateStyles.value[PLAYBACK_RATES.indexOf(effectivePlaybackRate.value)]
+				}));
+				return controls;
+			}));
+			return h("span", rootProps, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/vue/components/T3DViewport.ts
+const DEFAULT_MAX_FPS = 24;
+const DEFAULT_AUTO_ROTATE_SPEED = .35;
+const DEFAULT_POINTER_SENSITIVITY = .055;
+const VELOCITY_DAMPING_PER_SECOND = 5.5;
+const ZOOM_DAMPING_PER_SECOND = 7;
+const MAX_ZOOM_VELOCITY = 3;
+const DEFAULT_MIN_ZOOM = .65;
+const DEFAULT_MAX_ZOOM = 1.65;
+const DEFAULT_ZOOM_SENSITIVITY = .1;
+const MAX_PITCH = Math.PI * .42;
+const t3DViewportProps = {
+	x: {
+		type: Number,
+		required: true
+	},
+	y: {
+		type: Number,
+		required: true
+	},
+	w: {
+		type: Number,
+		required: true
+	},
+	h: {
+		type: Number,
+		required: true
+	},
+	zIndex: {
+		type: Number,
+		default: 0
+	},
+	renderer: {
+		type: Object,
+		required: true
+	},
+	paused: {
+		type: Boolean,
+		default: false
+	},
+	maxFps: {
+		type: Number,
+		default: DEFAULT_MAX_FPS
+	},
+	pixelWidth: {
+		type: Number,
+		default: void 0
+	},
+	pixelHeight: {
+		type: Number,
+		default: void 0
+	},
+	fallback: {
+		type: String,
+		default: "[3D viewport]"
+	},
+	style: {
+		type: Object,
+		default: void 0
+	},
+	clear: {
+		type: Boolean,
+		default: true
+	},
+	interactive: {
+		type: Boolean,
+		default: true
+	},
+	initialYaw: {
+		type: Number,
+		default: 0
+	},
+	initialPitch: {
+		type: Number,
+		default: 0
+	},
+	autoRotate: {
+		type: Boolean,
+		default: true
+	},
+	autoRotateSpeed: {
+		type: Number,
+		default: DEFAULT_AUTO_ROTATE_SPEED
+	},
+	pointerSensitivity: {
+		type: Number,
+		default: DEFAULT_POINTER_SENSITIVITY
+	},
+	initialZoom: {
+		type: Number,
+		default: 1
+	},
+	minZoom: {
+		type: Number,
+		default: DEFAULT_MIN_ZOOM
+	},
+	maxZoom: {
+		type: Number,
+		default: DEFAULT_MAX_ZOOM
+	},
+	zoomSensitivity: {
+		type: Number,
+		default: DEFAULT_ZOOM_SENSITIVITY
+	}
+};
+function finite(value, fallback) {
+	return Number.isFinite(value) ? value : fallback;
+}
+function clampPitch(value) {
+	return Math.max(-MAX_PITCH, Math.min(MAX_PITCH, value));
+}
+function zoomBounds(minZoom, maxZoom) {
+	const first = Math.max(.01, finite(minZoom, DEFAULT_MIN_ZOOM));
+	const second = Math.max(.01, finite(maxZoom, DEFAULT_MAX_ZOOM));
+	return first <= second ? {
+		min: first,
+		max: second
+	} : {
+		min: second,
+		max: first
+	};
+}
+function clampZoom(value, minZoom, maxZoom) {
+	const { min, max } = zoomBounds(minZoom, maxZoom);
+	return Math.max(min, Math.min(max, finite(value, 1)));
+}
+function normalizedWheelDelta(event) {
+	const deltaY = Number(event.deltaY ?? 0);
+	if (!Number.isFinite(deltaY) || deltaY === 0) return 0;
+	if (event.deltaMode === 1) return deltaY;
+	if (event.deltaMode === 2) return Math.max(-3, Math.min(3, deltaY * 3));
+	if (event.deltaMode === 0) return deltaY / 100;
+	return Number.isInteger(deltaY) && Math.abs(deltaY) <= 3 ? deltaY : deltaY / 100;
+}
+function nowMs() {
+	return typeof performance !== "undefined" ? performance.now() : Date.now();
+}
+function abortError() {
+	const error = new Error("T3D viewport render aborted");
+	error.name = "AbortError";
+	return error;
+}
+function warnDev(message) {
+	const nodeEnv = globalThis.process?.env?.NODE_ENV;
+	if (nodeEnv !== "production") console.warn(message);
+}
+function waitFor(ms, signal) {
+	if (signal.aborted || ms <= 0) return Promise.resolve();
+	return new Promise((resolve) => {
+		const timer = setTimeout(done, ms);
+		function done() {
+			clearTimeout(timer);
+			signal.removeEventListener("abort", done);
+			resolve();
+		}
+		signal.addEventListener("abort", done, { once: true });
+	});
+}
+/**
+* Browser-safe interactive 3D viewport. Frames are pulled from a renderer and
+* delegated directly to TVideo, which owns frame coalescing and terminal output.
+*
+* @event frame Emitted after TVideo commits a rendered frame.
+* @event error Emitted when the renderer or TVideo frame handling fails.
+*/
+const T3DViewport = defineComponent({
+	name: "T3DViewport",
+	props: t3DViewportProps,
+	emits: {
+		frame: (_event) => true,
+		error: (_error) => true,
+		objecthover: (_hit) => true,
+		objectselect: (_hit) => true
+	},
+	setup(props, { emit, expose }) {
+		const layout = useLayout();
+		const renderer = props.renderer;
+		let alive = true;
+		let yaw = finite(props.initialYaw, 0);
+		let pitch = clampPitch(finite(props.initialPitch, 0));
+		let yawVelocity = 0;
+		let pitchVelocity = 0;
+		let pointerX = 0;
+		let pointerY = 0;
+		let pointerSpeed = 0;
+		let hovering = false;
+		let zoom = clampZoom(props.initialZoom, props.minZoom, props.maxZoom);
+		let zoomVelocity = 0;
+		let hoveredObject = null;
+		let selectedObject = null;
+		let actualPixelWidth = Math.max(1, Math.floor(props.pixelWidth ?? props.w));
+		let actualPixelHeight = Math.max(1, Math.floor(props.pixelHeight ?? props.h));
+		let pointer = null;
+		let drag = null;
+		let renderTail = Promise.resolve();
+		function motionSnapshot() {
+			return {
+				yaw,
+				pitch,
+				yawVelocity,
+				pitchVelocity,
+				pointerX,
+				pointerY,
+				pointerSpeed,
+				hovering,
+				zoom,
+				zoomVelocity,
+				hoveredObjectId: hoveredObject?.objectId ?? null,
+				selectedObjectId: selectedObject?.objectId ?? null
+			};
+		}
+		async function renderFrame(context) {
+			const previous = renderTail;
+			let release = () => {};
+			renderTail = new Promise((resolve) => {
+				release = resolve;
+			});
+			await previous;
+			try {
+				if (!alive || context.signal.aborted) throw abortError();
+				return await renderer.render(context);
+			} finally {
+				release();
+			}
+		}
+		function sameHit(left, right) {
+			return left?.objectId === right?.objectId;
+		}
+		function setHoveredObject(hit) {
+			if (sameHit(hoveredObject, hit)) return;
+			hoveredObject = hit;
+			emit("objecthover", hit);
+		}
+		function setSelectedObject(hit) {
+			if (sameHit(selectedObject, hit)) return;
+			selectedObject = hit;
+			emit("objectselect", hit);
+		}
+		function resetMotion() {
+			yaw = finite(props.initialYaw, 0);
+			pitch = clampPitch(finite(props.initialPitch, 0));
+			yawVelocity = 0;
+			pitchVelocity = 0;
+			pointerX = 0;
+			pointerY = 0;
+			pointerSpeed = 0;
+			zoom = clampZoom(props.initialZoom, props.minZoom, props.maxZoom);
+			zoomVelocity = 0;
+			setHoveredObject(null);
+			setSelectedObject(null);
+			pointer = null;
+			drag = null;
+		}
+		expose({ resetMotion });
+		function localCell(event) {
+			return {
+				x: Math.floor(event.cellX - layout.originX - props.x),
+				y: Math.floor(event.cellY - layout.originY - props.y)
+			};
+		}
+		function eventTime(event) {
+			return Number.isFinite(event.timeStamp) ? event.timeStamp : nowMs();
+		}
+		function updatePointerPosition(point) {
+			const width = Math.max(1, Math.floor(props.w));
+			const height = Math.max(1, Math.floor(props.h));
+			pointerX = Math.max(-1, Math.min(1, (point.x + .5) / width * 2 - 1));
+			pointerY = Math.max(-1, Math.min(1, (point.y + .5) / height * 2 - 1));
+		}
+		function hitTest() {
+			if (!renderer.hitTest) return null;
+			try {
+				return renderer.hitTest({
+					pointerX,
+					pointerY,
+					pixelWidth: actualPixelWidth,
+					pixelHeight: actualPixelHeight,
+					cellWidth: Math.max(1, Math.floor(props.w)),
+					cellHeight: Math.max(1, Math.floor(props.h)),
+					motion: motionSnapshot()
+				});
+			} catch (error) {
+				emit("error", error);
+				return null;
+			}
+		}
+		function updateHoveredObject() {
+			if (renderer.hitTest) setHoveredObject(hitTest());
+		}
+		function onPointerEnter(event) {
+			if (!props.interactive) return;
+			const point = localCell(event);
+			hovering = true;
+			updatePointerPosition(point);
+			pointer = {
+				...point,
+				timeMs: eventTime(event)
+			};
+			updateHoveredObject();
+		}
+		function onPointerDown(event) {
+			if (!props.interactive || event.button != null && event.button !== 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const point = localCell(event);
+			const timeMs = eventTime(event);
+			hovering = true;
+			updatePointerPosition(point);
+			yawVelocity = 0;
+			pitchVelocity = 0;
+			pointerSpeed = 0;
+			pointer = {
+				...point,
+				timeMs
+			};
+			drag = {
+				...point,
+				timeMs,
+				moved: false
+			};
+			updateHoveredObject();
+		}
+		function onPointerMove(event) {
+			if (!props.interactive) return;
+			hovering = true;
+			const point = localCell(event);
+			updatePointerPosition(point);
+			const timeMs = eventTime(event);
+			const previous = drag ?? pointer;
+			pointer = {
+				...point,
+				timeMs
+			};
+			if (!previous) return;
+			const dtMs = Math.max(1, timeMs - previous.timeMs);
+			const dx = point.x - previous.x;
+			const dy = point.y - previous.y;
+			const sensitivity = finite(props.pointerSensitivity, DEFAULT_POINTER_SENSITIVITY);
+			const deltaYaw = dx * sensitivity;
+			const deltaPitch = dy * sensitivity;
+			pointerSpeed = Math.hypot(dx, dy) * 1e3 / dtMs;
+			if (!drag) {
+				if (renderer.hitTest) {
+					yawVelocity = 0;
+					pitchVelocity = 0;
+					updateHoveredObject();
+					return;
+				}
+				yawVelocity = deltaYaw * 650 / dtMs;
+				pitchVelocity = deltaPitch * 450 / dtMs;
+				return;
+			}
+			if (event.buttons === 0) {
+				drag = null;
+				return;
+			}
+			event.preventDefault();
+			event.stopPropagation();
+			yaw += deltaYaw;
+			pitch = clampPitch(pitch + deltaPitch);
+			yawVelocity = deltaYaw * 1e3 / dtMs;
+			pitchVelocity = deltaPitch * 1e3 / dtMs;
+			setHoveredObject(null);
+			drag = {
+				...point,
+				timeMs,
+				moved: drag.moved || dx !== 0 || dy !== 0
+			};
+		}
+		function onPointerUp(event) {
+			if (!drag) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const moved = drag.moved;
+			drag = null;
+			if (!moved && renderer.hitTest) {
+				const hit = hitTest();
+				setHoveredObject(hit);
+				setSelectedObject(hit);
+			} else updateHoveredObject();
+		}
+		function onPointerLeave(event) {
+			if (drag) {
+				event.preventDefault();
+				event.stopPropagation();
+				drag = null;
+			}
+			hovering = false;
+			pointer = null;
+			setHoveredObject(null);
+		}
+		function onWheel(event) {
+			if (!props.interactive) return;
+			const delta = normalizedWheelDelta(event);
+			const sensitivity = Math.max(0, finite(props.zoomSensitivity, DEFAULT_ZOOM_SENSITIVITY));
+			if (delta === 0 || sensitivity === 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			zoomVelocity = Math.max(-MAX_ZOOM_VELOCITY, Math.min(MAX_ZOOM_VELOCITY, zoomVelocity - delta * sensitivity * 6));
+		}
+		function advanceZoom(deltaMs) {
+			if (deltaMs <= 0 || zoomVelocity === 0) return;
+			const dt = Math.min(deltaMs, 100) / 1e3;
+			const next = zoom + zoomVelocity * dt;
+			zoom = clampZoom(next, props.minZoom, props.maxZoom);
+			if (zoom !== next) {
+				zoomVelocity = 0;
+				return;
+			}
+			zoomVelocity *= Math.exp(-ZOOM_DAMPING_PER_SECOND * dt);
+			if (Math.abs(zoomVelocity) < .001) zoomVelocity = 0;
+		}
+		function advanceMotion(deltaMs) {
+			if (deltaMs <= 0) return;
+			advanceZoom(deltaMs);
+			if (drag) return;
+			const dt = Math.min(deltaMs, 100) / 1e3;
+			if (hovering && !renderer.hitTest) {
+				const targetPitch = clampPitch(-pointerY * .36);
+				pitchVelocity += (targetPitch - pitch) * 4.5 * dt;
+			} else if (!hovering) {
+				pointerX *= Math.exp(-7 * dt);
+				pointerY *= Math.exp(-7 * dt);
+			}
+			yaw += yawVelocity * dt;
+			pitch = clampPitch(pitch + pitchVelocity * dt);
+			const inspectingObject = Boolean(renderer.hitTest && (hoveredObject || selectedObject));
+			if (props.autoRotate && !inspectingObject) {
+				const baseSpeed = finite(props.autoRotateSpeed, DEFAULT_AUTO_ROTATE_SPEED);
+				const steering = hovering ? .85 + pointerX * 1.75 : 1;
+				yaw += baseSpeed * steering * dt;
+			}
+			const decay = Math.exp(-VELOCITY_DAMPING_PER_SECOND * dt);
+			yawVelocity *= decay;
+			pitchVelocity *= decay;
+			pointerSpeed *= decay;
+		}
+		const frameSource = async function* (videoContext) {
+			const startedAt = nowMs();
+			let previousAt = startedAt;
+			let frame = 0;
+			const frameIntervalMs = 1e3 / Math.max(1, finite(videoContext.maxFps, DEFAULT_MAX_FPS));
+			while (alive && !videoContext.signal.aborted) {
+				const pulledAt = nowMs();
+				const deltaMs = frame === 0 ? 0 : Math.max(0, pulledAt - previousAt);
+				advanceMotion(deltaMs);
+				actualPixelWidth = videoContext.pixelWidth;
+				actualPixelHeight = videoContext.pixelHeight;
+				const result = await renderFrame({
+					timeMs: Math.max(0, pulledAt - startedAt),
+					deltaMs,
+					frame,
+					pixelWidth: videoContext.pixelWidth,
+					pixelHeight: videoContext.pixelHeight,
+					format: videoContext.preferredFormat,
+					signal: videoContext.signal,
+					motion: motionSnapshot()
+				});
+				if (!alive || videoContext.signal.aborted) return;
+				yield result;
+				frame++;
+				previousAt = pulledAt;
+				await waitFor(frameIntervalMs - (nowMs() - pulledAt), videoContext.signal);
+			}
+		};
+		watch(() => props.renderer, (next) => {
+			if (next === renderer) return;
+			warnDev("[vue-tui] T3DViewport renderer is init-only. Remount T3DViewport to replace it.");
+		});
+		watch(() => props.interactive, (interactive) => {
+			if (!interactive) {
+				hovering = false;
+				pointer = null;
+				drag = null;
+				setHoveredObject(null);
+				setSelectedObject(null);
+			}
+		});
+		onBeforeUnmount(() => {
+			alive = false;
+			pointer = null;
+			drag = null;
+		});
+		onUnmounted(() => renderer.dispose?.());
+		return () => h("span", [h(TVideo, {
+			x: props.x,
+			y: props.y,
+			w: props.w,
+			h: props.h,
+			zIndex: props.zIndex,
+			src: "t3d://viewport",
+			frameSource,
+			paused: props.paused,
+			maxFps: props.maxFps,
+			pixelWidth: props.pixelWidth,
+			pixelHeight: props.pixelHeight,
+			fallback: props.fallback,
+			style: props.style,
+			clear: props.clear,
+			onFrame: (event) => emit("frame", event),
+			onError: (error) => emit("error", error)
+		}), props.interactive ? h(TView, {
+			x: props.x,
+			y: props.y,
+			w: Math.max(0, Math.floor(props.w)),
+			h: Math.max(0, Math.floor(props.h)),
+			zIndex: props.zIndex + 1,
+			selectable: false,
+			onPointerenter: onPointerEnter,
+			onPointermove: onPointerMove,
+			onPointerleave: onPointerLeave,
+			onPointerdown: onPointerDown,
+			onPointerup: onPointerUp,
+			onWheel
+		}) : null]);
+	}
+});
+
+//#endregion
 //#region src/vue/components/TCharts.ts
 const DEFAULT_HEATMAP_LEVEL_STYLES = Object.freeze([
 	Object.freeze({ fg: "#9be9a8" }),
@@ -1592,4 +3107,4 @@ function restoreTLogViewSessionState(bindings, state) {
 }
 
 //#endregion
-export { TCandlestickChart, TContributionGraph, TLineChart, TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, TPieChart, TTranscriptView, TVirtualList, captureTLogViewSessionState, createAppendOnlyLogStore, createTLogDensityBucketsFromMarkers, createTLogLevelPlugin, createTLogLineMatcherPlugin, createTLogLinkActionPlugin, createTLogOsc8LinkPlugin, createTLogUrlPlugin, createTLogViewSessionStore, deserializeTLogViewSessionState, detectTLogUrls, dispatchTLogPluginLinkAction, getTLogPluginMetadata, handleTLogKeymapEvent, matchesTLogKeyBinding, parseTLogAnnotatedText, resolveTLogLinksPanelTheme, resolveTLogMinimapTheme, resolveTLogScrollbarTheme, resolveTLogSearchBarTheme, resolveTLogSearchPagerTheme, resolveTLogSearchResultsTheme, resolveTLogViewTheme, restoreTLogViewSessionState, sanitizeTerminalHref, serializeTLogViewSessionState, stripTLogAnsiText, tlogDarkPreset, tlogDarkTheme, tlogDefaultKeymap, tlogDefaultPreset, tlogDefaultTheme, tlogHighContrastKeymap, tlogHighContrastPreset, tlogHighContrastTheme, toTLogExternalLinkFromVisibleLink, useTLogLinkController, useTLogRetainedIndex, useTLogSearchController, useTLogSearchResultsPage, useTLogVirtualSearchResults };
+export { T3DViewport, TCandlestickChart, TContributionGraph, TLineChart, TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, TPieChart, TTranscriptView, TVideo, TVirtualList, captureTLogViewSessionState, createAppendOnlyLogStore, createTLogDensityBucketsFromMarkers, createTLogLevelPlugin, createTLogLineMatcherPlugin, createTLogLinkActionPlugin, createTLogOsc8LinkPlugin, createTLogUrlPlugin, createTLogViewSessionStore, deserializeTLogViewSessionState, detectTLogUrls, dispatchTLogPluginLinkAction, getTLogPluginMetadata, handleTLogKeymapEvent, matchesTLogKeyBinding, parseTLogAnnotatedText, resolveTLogLinksPanelTheme, resolveTLogMinimapTheme, resolveTLogScrollbarTheme, resolveTLogSearchBarTheme, resolveTLogSearchPagerTheme, resolveTLogSearchResultsTheme, resolveTLogViewTheme, restoreTLogViewSessionState, sanitizeTerminalHref, serializeTLogViewSessionState, stripTLogAnsiText, tlogDarkPreset, tlogDarkTheme, tlogDefaultKeymap, tlogDefaultPreset, tlogDefaultTheme, tlogHighContrastKeymap, tlogHighContrastPreset, tlogHighContrastTheme, toTLogExternalLinkFromVisibleLink, useTLogLinkController, useTLogRetainedIndex, useTLogSearchController, useTLogSearchResultsPage, useTLogVirtualSearchResults };