@simon_he/vue-tui 1.1.6 → 1.1.7

package/dist/experimental.js

@@ -1,955 +1,17 @@
 import "./create-terminal-Db_-UGVQ.js";
 import { sanitizeTerminalHref } from "./hyperlink-clbb_ha_.js";
-import { EventZIndexContextKey, TerminalGraphicsActivityKey, forEachTextCellSegment, intersectRect, sanitizeInlineText, sliceByCells, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility } from "./rect-JzWMJxxc.js";
-import { TText, TView, createFrameMailbox, mergeStyle } from "./linkify-CL9wwnZN.js";
+import { EventZIndexContextKey, forEachTextCellSegment, intersectRect, sanitizeInlineText, sliceByCells, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility } from "./rect-JzWMJxxc.js";
+import { mergeStyle } from "./linkify-CklfA1vp.js";
 import "./frame-perf-CHpWhbC4.js";
 import "./terminal-selection-4W1SJj4c.js";
-import "./wheel-scroll-DASkEZr-.js";
-import { createTerminalGraphicPngSequence, getTerminalGraphicsOutput, getTerminalGraphicsOutputVersion, subscribeTerminalGraphicsOutput } from "./terminal-graphics-D6KErRBY.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-DIrlCw6m.js";
-import { computed, defineComponent, getCurrentInstance, h, inject, markRaw, onBeforeUnmount, onUnmounted, ref, shallowRef, watch } from "vue";
+import { TView } from "./frame-mailbox-DaTrfyaF.js";
+import "./wheel-scroll-CQ22Hcyj.js";
+import "./terminal-graphics-DpSL29OQ.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-BnILsD3n.js";
+import "./TAgentTerminalGraphic-B8-YZfuP.js";
+import { TVideo } from "./TVideo-D9AOiyq2.js";
+import { computed, defineComponent, h, inject, onBeforeUnmount, onUnmounted, ref, 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 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));
-		const protocol = context.protocol;
-		if (protocol !== "kitty" && protocol !== "iterm2") return null;
-		return createTerminalGraphicPngSequence({
-			protocol,
-			base64,
-			imageId: context.imageId,
-			placementId: context.placementId,
-			cols: context.width,
-			rows: context.height,
-			sourceWidth: frame.pixelWidth,
-			sourceHeight: frame.pixelHeight,
-			placementColumns: Math.max(1, Math.floor(context.viewport.rect.w)),
-			placementRows: Math.max(1, Math.floor(context.viewport.rect.h)),
-			rect: context.viewport.rect,
-			fullRect: context.viewport.fullRect,
-			freeImageData: true
-		});
-	};
-}
-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;