@simon_he/vue-tui 1.0.2 → 1.1.0

package/dist/experimental.js

@@ -1,12 +1,3008 @@
-import { sanitizeTerminalHref } from "./hyperlink-Bn02UXJb.js";
-import "./sgr-BmzxEjAO.js";
-import "./wheel-scroll-vBRaQ7p-.js";
-import "./linkify-D_gzn9Xq.js";
-import "./terminal-selection-DBinO6p5.js";
-import "./frame-perf-C6Xfg85O.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-CvLFNMwk.js";
-import { ref } from "vue";
+import { sanitizeTerminalHref } from "./hyperlink-_1FAj7Wq.js";
+import "./width-GqllnV8C.js";
+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" }),
+	Object.freeze({ fg: "#40c463" }),
+	Object.freeze({ fg: "#30a14e" }),
+	Object.freeze({ fg: "#216e39" })
+]);
+const DEFAULT_PIE_SEGMENT_STYLES = Object.freeze([
+	Object.freeze({ fg: "cyanBright" }),
+	Object.freeze({ fg: "magentaBright" }),
+	Object.freeze({ fg: "yellowBright" }),
+	Object.freeze({ fg: "greenBright" }),
+	Object.freeze({ fg: "blueBright" }),
+	Object.freeze({ fg: "redBright" })
+]);
+const TERMINAL_CELL_HEIGHT_TO_WIDTH = 1.8;
+const PIE_QUADRANT_BLOCKS = Object.freeze([
+	" ",
+	"▘",
+	"▝",
+	"▀",
+	"▖",
+	"▌",
+	"▞",
+	"▛",
+	"▗",
+	"▚",
+	"▐",
+	"▜",
+	"▄",
+	"▙",
+	"▟",
+	"█"
+]);
+const PIE_CELL_SAMPLES = Object.freeze([
+	Object.freeze({
+		dx: .25,
+		dy: .25,
+		bit: 1
+	}),
+	Object.freeze({
+		dx: .75,
+		dy: .25,
+		bit: 2
+	}),
+	Object.freeze({
+		dx: .25,
+		dy: .75,
+		bit: 4
+	}),
+	Object.freeze({
+		dx: .75,
+		dy: .75,
+		bit: 8
+	})
+]);
+function cellCount(value, fallback) {
+	const n = Math.floor(Number(value ?? fallback));
+	return Number.isFinite(n) ? Math.max(0, n) : Math.max(0, Math.floor(fallback));
+}
+function finiteRange(values) {
+	let min = Number.POSITIVE_INFINITY;
+	let max = Number.NEGATIVE_INFINITY;
+	for (const raw of values) {
+		const value = Number(raw);
+		if (!Number.isFinite(value)) continue;
+		if (value < min) min = value;
+		if (value > max) max = value;
+	}
+	return min === Number.POSITIVE_INFINITY ? null : {
+		min,
+		max
+	};
+}
+function maxPositive(values) {
+	let max = 0;
+	for (const raw of values) {
+		const value = Number(raw);
+		if (Number.isFinite(value) && value > max) max = value;
+	}
+	return max;
+}
+function domainFromValues(values, minValue, maxValue) {
+	const range = finiteRange(values);
+	const fallbackMin = range?.min ?? 0;
+	const fallbackMax = range?.max ?? 0;
+	const hasMin = Number.isFinite(Number(minValue));
+	const hasMax = Number.isFinite(Number(maxValue));
+	const min = hasMin ? Number(minValue) : fallbackMin;
+	const max = hasMax ? Number(maxValue) : fallbackMax;
+	if (max < min) {
+		if (hasMin && !hasMax) return {
+			min,
+			max: min
+		};
+		if (!hasMin && hasMax) return {
+			min: max,
+			max
+		};
+	}
+	return max >= min ? {
+		min,
+		max
+	} : {
+		min: max,
+		max: min
+	};
+}
+function normalizeCandlestick(candle) {
+	const open = Number(candle.open);
+	const high = Number(candle.high);
+	const low = Number(candle.low);
+	const close = Number(candle.close);
+	if (!Number.isFinite(open) || !Number.isFinite(high) || !Number.isFinite(low) || !Number.isFinite(close)) return null;
+	return {
+		open,
+		high,
+		low,
+		close
+	};
+}
+function candlestickDomainValues(candles) {
+	return candles.flatMap((candle) => {
+		const values = normalizeCandlestick(candle);
+		return values ? [
+			values.open,
+			values.low,
+			values.high,
+			values.close
+		] : [];
+	});
+}
+function finiteLineRuns(values) {
+	const runs = [];
+	let points = [];
+	for (let originalIndex = 0; originalIndex < values.length; originalIndex++) {
+		const raw = values[originalIndex];
+		const value = Number(raw);
+		if (Number.isFinite(value)) {
+			points.push({
+				value,
+				originalIndex
+			});
+			continue;
+		}
+		if (points.length > 0) {
+			runs.push({ points });
+			points = [];
+		}
+	}
+	if (points.length > 0) runs.push({ points });
+	return runs;
+}
+function valueToY(value, min, max, height) {
+	if (height <= 1) return 0;
+	if (max === min) {
+		if (value < min) return height - 1;
+		if (value > max) return 0;
+		return Math.floor((height - 1) / 2);
+	}
+	const scale = Math.max(Math.abs(min), Math.abs(max), Math.abs(value), 1);
+	const scaledMin = min / scale;
+	const scaledMax = max / scale;
+	const ratio = (value / scale - scaledMin) / (scaledMax - scaledMin);
+	return Math.max(0, Math.min(height - 1, Math.round((1 - ratio) * (height - 1))));
+}
+function yToValue(y, min, max, height) {
+	if (height <= 1 || max === min) return max;
+	const ratio = 1 - Math.max(0, Math.min(height - 1, y)) / (height - 1);
+	const scale = Math.max(Math.abs(min), Math.abs(max), 1);
+	const scaledMin = min / scale;
+	const scaledMax = max / scale;
+	return (scaledMin + ratio * (scaledMax - scaledMin)) * scale;
+}
+function emptyChartRows(height) {
+	return Array.from({ length: height }, () => []);
+}
+function samplePositionAtX(x, width, sourceLength) {
+	if (width <= 1 || sourceLength <= 1) return 0;
+	return x / (width - 1) * (sourceLength - 1);
+}
+function lineXForOriginalIndex(originalIndex, plotX, plotW, sourceLength) {
+	if (plotW <= 1 || sourceLength <= 1) return plotX;
+	return plotX + Math.round(originalIndex / (sourceLength - 1) * (plotW - 1));
+}
+function lineBucketIndexRange(plotX, plotW, sourceLength) {
+	if (sourceLength <= 0) return {
+		startIndex: 0,
+		endIndex: -1
+	};
+	if (plotW <= 1 || sourceLength <= 1) return {
+		startIndex: 0,
+		endIndex: sourceLength - 1
+	};
+	let startIndex = 0;
+	let high = sourceLength;
+	while (startIndex < high) {
+		const mid = Math.floor((startIndex + high) / 2);
+		if (lineXForOriginalIndex(mid, 0, plotW, sourceLength) < plotX) startIndex = mid + 1;
+		else high = mid;
+	}
+	let endExclusive = startIndex;
+	high = sourceLength;
+	while (endExclusive < high) {
+		const mid = Math.floor((endExclusive + high) / 2);
+		if (lineXForOriginalIndex(mid, 0, plotW, sourceLength) <= plotX) endExclusive = mid + 1;
+		else high = mid;
+	}
+	return endExclusive <= startIndex ? {
+		startIndex: 0,
+		endIndex: -1
+	} : {
+		startIndex,
+		endIndex: endExclusive - 1
+	};
+}
+function lowerBoundLinePoint(points, position) {
+	let low = 0;
+	let high = points.length;
+	while (low < high) {
+		const mid = Math.floor((low + high) / 2);
+		if (points[mid].originalIndex < position) low = mid + 1;
+		else high = mid;
+	}
+	return low;
+}
+function lineValueAtPosition(points, position) {
+	if (!points.length) return null;
+	const first = points[0];
+	const last = points[points.length - 1];
+	if (position < first.originalIndex || position > last.originalIndex) return null;
+	if (points.length === 1) return first.value;
+	const index = Math.min(Math.max(1, lowerBoundLinePoint(points, position)), points.length - 1);
+	const previous = points[index - 1];
+	const current = points[index];
+	const span = current.originalIndex - previous.originalIndex;
+	if (span <= 0) return current.value;
+	const ratio = (position - previous.originalIndex) / span;
+	return previous.value * (1 - ratio) + current.value * ratio;
+}
+function lowerBoundLineRun(runs, position) {
+	let low = 0;
+	let high = runs.length;
+	while (low < high) {
+		const mid = Math.floor((low + high) / 2);
+		const points = runs[mid].points;
+		if (points[points.length - 1].originalIndex < position) low = mid + 1;
+		else high = mid;
+	}
+	return low;
+}
+function lineRunAtPosition(runs, position) {
+	const run = runs[lowerBoundLineRun(runs, position)];
+	if (!run) return null;
+	const first = run.points[0];
+	const last = run.points[run.points.length - 1];
+	return position >= first.originalIndex && position <= last.originalIndex ? run : null;
+}
+function nearestLinePoint(points, position) {
+	if (!points.length) return null;
+	const index = lowerBoundLinePoint(points, position);
+	if (index <= 0) return points[0];
+	if (index >= points.length) return points[points.length - 1];
+	const previous = points[index - 1];
+	const current = points[index];
+	return position - previous.originalIndex <= current.originalIndex - position ? previous : current;
+}
+function nearestLinePointAtPlotX(runs, plotX, plotW, sourceLength, position) {
+	const { startIndex, endIndex } = lineBucketIndexRange(plotX, plotW, sourceLength);
+	if (endIndex < startIndex) return null;
+	let best = null;
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (let runIndex = lowerBoundLineRun(runs, startIndex); runIndex < runs.length; runIndex++) {
+		const points = runs[runIndex].points;
+		const first = points[0];
+		const last = points[points.length - 1];
+		if (first.originalIndex > endIndex) break;
+		if (last.originalIndex < startIndex) continue;
+		for (let pointIndex = lowerBoundLinePoint(points, startIndex); pointIndex < points.length; pointIndex++) {
+			const point = points[pointIndex];
+			if (point.originalIndex > endIndex) break;
+			if (lineXForOriginalIndex(point.originalIndex, 0, plotW, sourceLength) !== plotX) continue;
+			const distance = Math.abs(point.originalIndex - position);
+			if (distance < bestDistance) {
+				best = point;
+				bestDistance = distance;
+			}
+		}
+	}
+	return best;
+}
+function nearestLinePointInRuns(runs, position, plotX, plotW, sourceLength) {
+	const run = lineRunAtPosition(runs, position);
+	if (run && run.points.length > 1) return nearestLinePoint(run.points, position);
+	return nearestLinePointAtPlotX(runs, plotX, plotW, sourceLength, position);
+}
+function lineBucketsForRun(points, plotW, sourceLength) {
+	const buckets = [];
+	let current = null;
+	for (const point of points) {
+		const x = lineXForOriginalIndex(point.originalIndex, 0, plotW, sourceLength);
+		if (x < 0 || x >= plotW) continue;
+		if (!current || current.x !== x) {
+			if (current) buckets.push(current);
+			current = {
+				x,
+				minValue: point.value,
+				maxValue: point.value,
+				firstIndex: point.originalIndex,
+				firstValue: point.value,
+				lastIndex: point.originalIndex,
+				lastValue: point.value
+			};
+			continue;
+		}
+		if (point.value < current.minValue) current.minValue = point.value;
+		if (point.value > current.maxValue) current.maxValue = point.value;
+		current.lastIndex = point.originalIndex;
+		current.lastValue = point.value;
+	}
+	if (current) buckets.push(current);
+	return buckets;
+}
+function lineBucketRepresentativeValue(points, bucket, plotW, sourceLength) {
+	const position = samplePositionAtX(bucket.x, plotW, sourceLength);
+	if (position <= bucket.firstIndex) return bucket.firstValue;
+	if (position >= bucket.lastIndex) return bucket.lastValue;
+	return lineValueAtPosition(points, position) ?? bucket.lastValue;
+}
+function lineSegmentPointsForRun(points, buckets, plotW, sourceLength) {
+	const valuesByX = new Map();
+	const first = points[0];
+	const last = points[points.length - 1];
+	if (first && last) if (plotW <= 1 || sourceLength <= 1) {
+		const value = lineValueAtPosition(points, 0);
+		if (value != null) valuesByX.set(0, value);
+	} else {
+		const scale = (sourceLength - 1) / (plotW - 1);
+		const startX = Math.max(0, Math.ceil(first.originalIndex / scale));
+		const endX = Math.min(plotW - 1, Math.floor(last.originalIndex / scale));
+		for (let x = startX; x <= endX; x++) {
+			const value = lineValueAtPosition(points, samplePositionAtX(x, plotW, sourceLength));
+			if (value != null) valuesByX.set(x, value);
+		}
+	}
+	for (const bucket of buckets) if (!valuesByX.has(bucket.x)) valuesByX.set(bucket.x, lineBucketRepresentativeValue(points, bucket, plotW, sourceLength));
+	return Array.from(valuesByX, ([x, value]) => ({
+		x,
+		value
+	})).sort((a, b) => a.x - b.x);
+}
+function putLineGlyph(cells, x, y, ch, style, width, height, occupied) {
+	if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+	if (x < 0 || x >= width || y < 0 || y >= height) return;
+	cells.push({
+		x,
+		y,
+		ch,
+		style
+	});
+	occupied?.add(y * width + x);
+}
+function pushLineBucketExtrema(cells, bucket, layout, min, max, style, width, height, occupied) {
+	const x = layout.plotX + bucket.x;
+	const minY = valueToY(bucket.minValue, min, max, layout.plotH);
+	const maxY = valueToY(bucket.maxValue, min, max, layout.plotH);
+	const top = Math.min(minY, maxY);
+	const bottom = Math.max(minY, maxY);
+	if (top === bottom) {
+		const y = layout.plotY + top;
+		if (!occupied.has(y * width + x)) putLineGlyph(cells, x, y, "●", style, width, height, occupied);
+		return;
+	}
+	for (let y = top; y <= bottom; y++) {
+		const cellY = layout.plotY + y;
+		if (!occupied.has(cellY * width + x)) putLineGlyph(cells, x, cellY, "│", style, width, height, occupied);
+	}
+}
+function drawSteppedLineSegment(cells, fromX, fromY, toX, toY, style, width, height, occupied) {
+	if (toY === fromY) {
+		for (let x = fromX + 1; x <= toX; x++) putLineGlyph(cells, x, toY, "─", style, width, height, occupied);
+		return;
+	}
+	const rising = toY < fromY;
+	for (let x = fromX + 1; x < toX; x++) putLineGlyph(cells, x, fromY, "─", style, width, height, occupied);
+	putLineGlyph(cells, toX, fromY, rising ? "╯" : "╮", style, width, height, occupied);
+	const top = Math.min(fromY, toY);
+	const bottom = Math.max(fromY, toY);
+	for (let y = top + 1; y < bottom; y++) putLineGlyph(cells, toX, y, "│", style, width, height, occupied);
+	putLineGlyph(cells, toX, toY, rising ? "╭" : "╰", style, width, height, occupied);
+}
+function chartGlyph(value, fallback) {
+	const text = sliceByCells(sanitizeInlineText(value || fallback), 1);
+	return text && textCellWidth(text) === 1 ? text : fallback;
+}
+function formatChartValue(value) {
+	if (!Number.isFinite(value)) return "0";
+	const abs = Math.abs(value);
+	if (abs >= 1e6) return `${(value / 1e6).toFixed(1)}m`;
+	if (abs >= 1e4) return `${Math.round(value / 1e3)}k`;
+	if (abs >= 1e3) return `${(value / 1e3).toFixed(1)}k`;
+	if (Number.isInteger(value)) return String(value);
+	if (abs >= 100) return value.toFixed(0);
+	if (abs >= 10) return value.toFixed(1);
+	if (abs > 0 && abs < .01) return Number(value.toPrecision(2)).toString();
+	return Number(value.toFixed(2)).toString();
+}
+function fitLabel(value, width) {
+	return sliceByCells(sanitizeInlineText(value), Math.max(0, width));
+}
+function pushTextCells(cells, x, y, text, style, maxWidth = Number.POSITIVE_INFINITY) {
+	const clipped = fitLabel(text, maxWidth);
+	let cursor = x;
+	forEachTextCellSegment(clipped, (segment) => {
+		if (segment.cells <= 0) return;
+		cells.push({
+			x: cursor,
+			y,
+			ch: segment.text,
+			style
+		});
+		cursor += segment.cells;
+	});
+}
+function chooseTooltipPlacement(cells, width, height, anchorX, anchorY, textWidth, preferredY, bounds) {
+	const boundsX = Math.max(0, Math.min(width, Math.floor(bounds?.x ?? 0)));
+	const boundsY = Math.max(0, Math.min(height, Math.floor(bounds?.y ?? 0)));
+	const boundsRight = Math.max(boundsX, Math.min(width, Math.floor((bounds?.x ?? 0) + (bounds?.w ?? width))));
+	const boundsBottom = Math.max(boundsY, Math.min(height, Math.floor((bounds?.y ?? 0) + (bounds?.h ?? height))));
+	const availableW = boundsRight - boundsX;
+	if (availableW <= 0 || boundsBottom <= boundsY) return {
+		x: 0,
+		y: 0
+	};
+	const tooltipWidth = Math.min(availableW, Math.max(1, textWidth));
+	const clampX = (x) => Math.max(boundsX, Math.min(x, Math.max(boundsX, boundsRight - tooltipWidth)));
+	const xCandidates = [
+		anchorX + 2,
+		anchorX - tooltipWidth - 2,
+		boundsX,
+		boundsRight - tooltipWidth
+	].map(clampX).filter((x, index, values) => values.indexOf(x) === index);
+	const yCandidates = [
+		preferredY,
+		anchorY > 0 ? anchorY - 1 : anchorY + 1,
+		anchorY + 1,
+		anchorY - 2,
+		anchorY + 2,
+		boundsY,
+		boundsBottom - 1
+	].filter((y) => y != null && y >= boundsY && y < boundsBottom);
+	let best = {
+		x: xCandidates[0] ?? 0,
+		y: yCandidates[0] ?? 0,
+		score: Number.POSITIVE_INFINITY
+	};
+	for (const y of yCandidates) for (const x of xCandidates) {
+		let overlap = 0;
+		for (const cell of cells) {
+			if (cell.y !== y) continue;
+			const cellW = Math.max(1, textCellWidth(cell.ch));
+			if (cell.x < x + tooltipWidth && cell.x + cellW > x) overlap++;
+		}
+		const score = overlap * 1e3 + Math.abs(y - anchorY) + Math.abs(x - anchorX) / Math.max(1, availableW);
+		if (score < best.score) best = {
+			x,
+			y,
+			score
+		};
+	}
+	return {
+		x: best.x,
+		y: best.y
+	};
+}
+function useChartVisibleRect(props, size) {
+	const layout = useLayout();
+	return computed(() => {
+		const full = translateRect({
+			x: Math.floor(props.x),
+			y: Math.floor(props.y),
+			w: size.value.width,
+			h: size.value.height
+		}, layout.originX, layout.originY);
+		const abs = layout.clipRect ? intersectRect(full, layout.clipRect) : full;
+		if (!abs) return {
+			x: 0,
+			y: 0,
+			w: 0,
+			h: 0
+		};
+		return {
+			x: abs.x - full.x,
+			y: abs.y - full.y,
+			w: abs.w,
+			h: abs.h
+		};
+	});
+}
+function resolveAxisLayout(width, height, min, max, showAxes) {
+	if (!showAxes || width < 12 || height < 5) return {
+		enabled: false,
+		plotX: 0,
+		plotY: 0,
+		plotW: width,
+		plotH: height,
+		axisX: -1,
+		axisY: height,
+		minLabel: formatChartValue(min),
+		maxLabel: formatChartValue(max)
+	};
+	const minLabel = fitLabel(formatChartValue(min), 7);
+	const maxLabel = fitLabel(formatChartValue(max), 7);
+	const labelW = Math.max(2, textCellWidth(minLabel), textCellWidth(maxLabel));
+	const plotX = labelW + 1;
+	const plotY = 0;
+	const plotW = Math.max(0, width - plotX);
+	const plotH = Math.max(0, height - 2);
+	if (plotW < 2 || plotH < 2) return {
+		enabled: false,
+		plotX: 0,
+		plotY: 0,
+		plotW: width,
+		plotH: height,
+		axisX: -1,
+		axisY: height,
+		minLabel,
+		maxLabel
+	};
+	return {
+		enabled: true,
+		plotX,
+		plotY,
+		plotW,
+		plotH,
+		axisX: plotX - 1,
+		axisY: plotY + plotH,
+		minLabel,
+		maxLabel
+	};
+}
+function pushAxes(cells, layout, style, labelStyle, xLabel, yLabel, startLabel, endLabel) {
+	if (!layout.enabled) return;
+	pushTextCells(cells, 0, layout.plotY, layout.maxLabel, labelStyle, layout.axisX);
+	pushTextCells(cells, 0, Math.max(layout.plotY, layout.axisY - 1), layout.minLabel, labelStyle, layout.axisX);
+	for (let y = layout.plotY; y < layout.axisY; y++) cells.push({
+		x: layout.axisX,
+		y,
+		ch: "│",
+		style
+	});
+	cells.push({
+		x: layout.axisX,
+		y: layout.axisY,
+		ch: "└",
+		style
+	});
+	for (let x = layout.plotX; x < layout.plotX + layout.plotW; x++) cells.push({
+		x,
+		y: layout.axisY,
+		ch: "─",
+		style
+	});
+	if (yLabel) pushTextCells(cells, layout.plotX, layout.plotY, yLabel, labelStyle, layout.plotW);
+	if (xLabel) {
+		const xLabelW = textCellWidth(sanitizeInlineText(xLabel));
+		const x = layout.plotX + Math.max(0, Math.floor((layout.plotW - xLabelW) / 2));
+		pushTextCells(cells, x, layout.axisY + 1, xLabel, labelStyle, layout.plotW);
+	} else {
+		pushTextCells(cells, layout.plotX, layout.axisY + 1, startLabel, labelStyle, layout.plotW);
+		const endW = textCellWidth(sanitizeInlineText(endLabel));
+		const endX = layout.plotX + Math.max(0, layout.plotW - endW);
+		pushTextCells(cells, endX, layout.axisY + 1, endLabel, labelStyle, layout.plotW);
+	}
+}
+function createSurface(width, height, clearStyle, cells) {
+	const rows = emptyChartRows(height);
+	for (const cell of cells) {
+		if (!Number.isFinite(cell.x) || !Number.isFinite(cell.y)) continue;
+		if (cell.y < 0 || cell.y >= height || cell.x < 0 || cell.x >= width) continue;
+		rows[cell.y].push(cell);
+	}
+	return {
+		width,
+		height,
+		clearStyle,
+		rows
+	};
+}
+function useChartRender(props, surface, options) {
+	const { terminal } = useTerminal();
+	const layout = useLayout();
+	const { visible, rootProps } = useVisibility();
+	const parentEventZ = inject(EventZIndexContextKey, computed(() => 0));
+	const eventZ = computed(() => (parentEventZ.value ?? 0) + (props.zIndex ?? 0));
+	const fullRect = computed(() => translateRect({
+		x: Math.floor(props.x),
+		y: Math.floor(props.y),
+		w: surface.value.width,
+		h: surface.value.height
+	}, layout.originX, layout.originY));
+	const absRect = computed(() => {
+		const translated = fullRect.value;
+		if (!layout.clipRect) return translated;
+		return intersectRect(translated, layout.clipRect) ?? {
+			x: 0,
+			y: 0,
+			w: 0,
+			h: 0
+		};
+	});
+	const dirtyRowsHint = computed(() => {
+		if (!visible.value) return [];
+		const r = absRect.value;
+		if (r.w <= 0 || r.h <= 0) return [];
+		return Array.from({ length: r.h }, (_, index) => r.y + index);
+	});
+	if (options?.handlers) {
+		const handlers = options.handlers({
+			fullRect,
+			absRect
+		});
+		useTerminalNode(() => ({
+			rect: visible.value ? absRect.value : {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			},
+			zIndex: eventZ.value,
+			visible: visible.value,
+			selectable: options.selectable ?? false,
+			handlers
+		}));
+	}
+	useRenderNode(() => ({
+		zIndex: props.zIndex,
+		rect: visible.value ? absRect.value : {
+			x: 0,
+			y: 0,
+			w: 0,
+			h: 0
+		},
+		dirtyRowsHint: dirtyRowsHint.value,
+		deps: [
+			visible.value,
+			absRect.value,
+			fullRect.value,
+			surface.value
+		],
+		paint: (dirtyRows) => {
+			if (!visible.value) return;
+			const r = absRect.value;
+			if (r.w <= 0 || r.h <= 0) return;
+			const full = fullRect.value;
+			const current = surface.value;
+			const blank = spaces(r.w);
+			const paintRow = (y) => {
+				if (y < r.y || y >= r.y + r.h) return;
+				const localY = y - full.y;
+				if (localY < 0 || localY >= current.height) return;
+				terminal.write(blank, {
+					x: r.x,
+					y,
+					style: current.clearStyle
+				});
+				for (const cell of current.rows[localY] ?? []) {
+					const x = full.x + cell.x;
+					const cellWidth = Math.max(1, textCellWidth(cell.ch));
+					if (x < r.x || x + cellWidth > r.x + r.w) continue;
+					terminal.put(x, y, cell.ch, cell.style);
+				}
+			};
+			if (!dirtyRows) {
+				for (let y = r.y; y < r.y + r.h; y++) paintRow(y);
+				return;
+			}
+			for (const y of dirtyRows) paintRow(y);
+		}
+	}));
+	return () => h("span", rootProps);
+}
+function positiveHeatmapStyle(value, max, styles) {
+	if (!styles.length) return {};
+	if (max <= 0) return styles[0] ?? {};
+	const ratio = Math.max(0, Math.min(1, value / max));
+	const index = Math.max(0, Math.min(styles.length - 1, Math.ceil(ratio * styles.length) - 1));
+	return styles[index] ?? {};
+}
+const TContributionGraph = defineComponent({
+	name: "TContributionGraph",
+	props: {
+		x: {
+			type: Number,
+			required: true
+		},
+		y: {
+			type: Number,
+			required: true
+		},
+		w: {
+			type: Number,
+			default: void 0
+		},
+		h: {
+			type: Number,
+			default: void 0
+		},
+		zIndex: {
+			type: Number,
+			default: 0
+		},
+		values: {
+			type: Array,
+			required: true
+		},
+		rows: {
+			type: Number,
+			default: 7
+		},
+		columns: {
+			type: Number,
+			default: void 0
+		},
+		max: {
+			type: Number,
+			default: void 0
+		},
+		labels: {
+			type: Array,
+			default: void 0
+		},
+		unit: {
+			type: String,
+			default: ""
+		},
+		showTooltip: {
+			type: Boolean,
+			default: true
+		},
+		emptyStyle: {
+			type: Object,
+			default: () => ({
+				fg: "blackBright",
+				dim: true
+			})
+		},
+		levelStyles: {
+			type: Array,
+			default: () => DEFAULT_HEATMAP_LEVEL_STYLES
+		},
+		cell: {
+			type: String,
+			default: "■"
+		},
+		gap: {
+			type: Number,
+			default: 1
+		},
+		hoverStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		tooltipStyle: {
+			type: Object,
+			default: () => ({ fg: "whiteBright" })
+		},
+		style: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props) {
+		const { defaultStyle } = useTerminal();
+		const baseStyle = computed(() => mergeStyle(defaultStyle.value, props.style));
+		const hoverPointer = ref(null);
+		const graphLayout = computed(() => {
+			const rowCount = cellCount(props.rows, 7);
+			if (rowCount <= 0) return {
+				rowCount,
+				gap: 0,
+				columnWidth: 1,
+				columns: 0,
+				width: 0,
+				height: 0,
+				startIndex: 0,
+				maxValue: 0
+			};
+			const gap = cellCount(props.gap, 1);
+			const dataColumns = Math.ceil(props.values.length / rowCount);
+			const requestedColumns = props.columns == null ? dataColumns : cellCount(props.columns, 0);
+			const columnWidth = 1 + gap;
+			const maxColumnsFromWidth = props.w == null ? requestedColumns : Math.floor((cellCount(props.w, 0) + gap) / columnWidth);
+			const columns = Math.max(0, Math.min(requestedColumns, maxColumnsFromWidth));
+			const width = props.w == null ? Math.max(0, columns * columnWidth - gap) : cellCount(props.w, 0);
+			const height = props.h == null ? rowCount + (props.showTooltip ? 1 : 0) : cellCount(props.h, rowCount);
+			const maxValue = props.max == null ? maxPositive(props.values) : Math.max(0, Number(props.max) || 0);
+			const startIndex = Math.max(0, (dataColumns - columns) * rowCount);
+			return {
+				rowCount,
+				gap,
+				columnWidth,
+				columns,
+				width,
+				height,
+				startIndex,
+				maxValue
+			};
+		});
+		const visibleRect = useChartVisibleRect(props, graphLayout);
+		function hitCell(localX, localY) {
+			const current = graphLayout.value;
+			if (current.width <= 0 || current.height <= 0 || current.columns <= 0) return null;
+			const graphHeight = Math.min(current.rowCount, current.height);
+			if (localX < 0 || localX >= current.width || localY < 0 || localY >= graphHeight) return null;
+			const col = Math.floor(localX / current.columnWidth);
+			const cellX = col * current.columnWidth;
+			if (col < 0 || col >= current.columns) return null;
+			if (localX !== cellX) return null;
+			const index = current.startIndex + col * current.rowCount + localY;
+			if (index < 0 || index >= props.values.length) return null;
+			const value = Number(props.values[index]);
+			if (!Number.isFinite(value)) return null;
+			const label = props.labels?.[index] ?? `#${index + 1}`;
+			return {
+				x: cellX,
+				y: localY,
+				index,
+				value,
+				label
+			};
+		}
+		const surface = computed(() => {
+			const current = graphLayout.value;
+			if (current.rowCount <= 0) return createSurface(0, 0, baseStyle.value, []);
+			const clearStyle = mergeStyle(baseStyle.value, props.emptyStyle);
+			const levelStyles = props.levelStyles.map((style) => mergeStyle(baseStyle.value, style));
+			const cells = [];
+			const glyph = chartGlyph(props.cell, "■");
+			const pointer = hoverPointer.value;
+			const hovered = pointer ? hitCell(pointer.x, pointer.y) : null;
+			for (let col = 0; col < current.columns; col++) {
+				const cellX = col * current.columnWidth;
+				for (let row = 0; row < current.rowCount && row < current.height; row++) {
+					const index = current.startIndex + col * current.rowCount + row;
+					const value = Number(props.values[index] ?? 0);
+					const positive = Number.isFinite(value) && value > 0;
+					const baseCellStyle = positive ? levelStyles.length ? positiveHeatmapStyle(value, current.maxValue, levelStyles) : baseStyle.value : clearStyle;
+					const style = hovered?.index === index ? mergeStyle(baseCellStyle, props.hoverStyle) : baseCellStyle;
+					cells.push({
+						x: cellX,
+						y: row,
+						ch: glyph,
+						style
+					});
+				}
+			}
+			const visible = visibleRect.value;
+			if (props.showTooltip && hovered && current.width > 0 && current.height > 0 && visible.w > 0 && visible.h > 0) {
+				const unit = sanitizeInlineText(props.unit);
+				const value = unit ? `${formatChartValue(hovered.value)} ${unit}` : formatChartValue(hovered.value);
+				const text = `${sanitizeInlineText(hovered.label)} ${value}`;
+				const textWidth = textCellWidth(text);
+				const graphHeight = Math.min(current.rowCount, current.height);
+				const placement = chooseTooltipPlacement(cells, current.width, current.height, hovered.x, hovered.y, textWidth, current.height > graphHeight ? graphHeight : void 0, visible);
+				pushTextCells(cells, placement.x, placement.y, text, mergeStyle(baseStyle.value, props.tooltipStyle), visible.x + visible.w - placement.x);
+			}
+			return createSurface(current.width, current.height, clearStyle, cells);
+		});
+		return useChartRender(props, surface, { handlers: ({ fullRect }) => ({
+			pointermove: (event) => {
+				const next = {
+					x: Math.floor(event.cellX - fullRect.value.x),
+					y: Math.floor(event.cellY - fullRect.value.y)
+				};
+				const current = hoverPointer.value;
+				if (!current || current.x !== next.x || current.y !== next.y) hoverPointer.value = next;
+			},
+			pointerleave: () => {
+				if (hoverPointer.value != null) hoverPointer.value = null;
+			}
+		}) });
+	}
+});
+const TLineChart = defineComponent({
+	name: "TLineChart",
+	props: {
+		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
+		},
+		values: {
+			type: Array,
+			required: true
+		},
+		labels: {
+			type: Array,
+			default: void 0
+		},
+		unit: {
+			type: String,
+			default: ""
+		},
+		min: {
+			type: Number,
+			default: void 0
+		},
+		max: {
+			type: Number,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			default: void 0
+		},
+		lineStyle: {
+			type: Object,
+			default: () => ({ fg: "cyanBright" })
+		},
+		showAxes: {
+			type: Boolean,
+			default: true
+		},
+		axisStyle: {
+			type: Object,
+			default: () => ({
+				fg: "white",
+				dim: true
+			})
+		},
+		labelStyle: {
+			type: Object,
+			default: () => ({ fg: "whiteBright" })
+		},
+		xLabel: {
+			type: String,
+			default: ""
+		},
+		yLabel: {
+			type: String,
+			default: ""
+		},
+		startLabel: {
+			type: String,
+			default: ""
+		},
+		endLabel: {
+			type: String,
+			default: ""
+		},
+		showTooltip: {
+			type: Boolean,
+			default: true
+		},
+		hoverStyle: {
+			type: Object,
+			default: () => ({
+				fg: "whiteBright",
+				bold: true
+			})
+		},
+		tooltipStyle: {
+			type: Object,
+			default: () => ({ fg: "whiteBright" })
+		}
+	},
+	setup(props) {
+		const { defaultStyle } = useTerminal();
+		const clearStyle = computed(() => mergeStyle(defaultStyle.value, props.style));
+		const lineStyle = computed(() => mergeStyle(clearStyle.value, props.lineStyle));
+		const axisStyle = computed(() => mergeStyle(clearStyle.value, props.axisStyle));
+		const labelStyle = computed(() => mergeStyle(clearStyle.value, props.labelStyle));
+		const hoverPointer = ref(null);
+		const lineLayout = computed(() => {
+			const width = cellCount(props.w, 0);
+			const height = cellCount(props.h, 0);
+			const runs = finiteLineRuns(props.values);
+			const sourceLength = props.values.length;
+			const { min, max } = domainFromValues(props.values, props.min, props.max);
+			const layout = resolveAxisLayout(width, height, min, max, props.showAxes);
+			return {
+				width,
+				height,
+				layout,
+				runs,
+				sourceLength,
+				min,
+				max
+			};
+		});
+		const visibleRect = useChartVisibleRect(props, lineLayout);
+		function hitLine(localX, localY) {
+			const current = lineLayout.value;
+			const { layout, runs, sourceLength, min, max } = current;
+			if (!runs.length || layout.plotW <= 0 || layout.plotH <= 0) return null;
+			const plotX = localX - layout.plotX;
+			const plotY = localY - layout.plotY;
+			if (plotX < 0 || plotX >= layout.plotW || plotY < 0 || plotY >= layout.plotH) return null;
+			const position = samplePositionAtX(plotX, layout.plotW, sourceLength);
+			const point = nearestLinePointInRuns(runs, position, plotX, layout.plotW, sourceLength);
+			if (!point) return null;
+			const value = point.value;
+			const x = lineXForOriginalIndex(point.originalIndex, layout.plotX, layout.plotW, sourceLength);
+			const y = layout.plotY + valueToY(value, min, max, layout.plotH);
+			const label = props.labels?.[point.originalIndex] ?? `#${point.originalIndex + 1}`;
+			return {
+				x,
+				y,
+				index: point.originalIndex,
+				label,
+				value
+			};
+		}
+		const baseCells = computed(() => {
+			const { width, height, layout, runs, sourceLength, min, max } = lineLayout.value;
+			const cells = [];
+			if (layout.plotW > 0 && layout.plotH > 0 && runs.length > 0) {
+				const occupiedLineCells = new Set();
+				for (const run of runs) {
+					const buckets = lineBucketsForRun(run.points, layout.plotW, sourceLength);
+					let prevX = null;
+					let prevY = null;
+					for (const point of lineSegmentPointsForRun(run.points, buckets, layout.plotW, sourceLength)) {
+						const x = layout.plotX + point.x;
+						const y = layout.plotY + valueToY(point.value, min, max, layout.plotH);
+						if (prevX == null || prevY == null) putLineGlyph(cells, x, y, "●", lineStyle.value, width, height, occupiedLineCells);
+						else drawSteppedLineSegment(cells, prevX, prevY, x, y, lineStyle.value, width, height, occupiedLineCells);
+						prevX = x;
+						prevY = y;
+					}
+					for (const bucket of buckets) pushLineBucketExtrema(cells, bucket, layout, min, max, lineStyle.value, width, height, occupiedLineCells);
+				}
+			}
+			pushAxes(cells, layout, axisStyle.value, labelStyle.value, props.xLabel, props.yLabel, props.startLabel || (sourceLength > 0 ? "1" : ""), props.endLabel || (sourceLength > 0 ? String(sourceLength) : ""));
+			return cells;
+		});
+		const surface = computed(() => {
+			const { width, height, layout } = lineLayout.value;
+			const cells = baseCells.value.slice();
+			const pointer = hoverPointer.value;
+			const hovered = pointer ? hitLine(pointer.x, pointer.y) : null;
+			if (hovered) cells.push({
+				x: hovered.x,
+				y: hovered.y,
+				ch: "●",
+				style: mergeStyle(lineStyle.value, props.hoverStyle)
+			});
+			const visible = visibleRect.value;
+			if (props.showTooltip && hovered && width > 0 && height > 0 && visible.w > 0 && visible.h > 0) {
+				const unit = sanitizeInlineText(props.unit);
+				const yValue = unit ? `${formatChartValue(hovered.value)} ${unit}` : formatChartValue(hovered.value);
+				const text = `${sanitizeInlineText(hovered.label)} x=${hovered.index + 1} y=${yValue}`;
+				const textWidth = textCellWidth(text);
+				const placement = chooseTooltipPlacement(cells, width, height, hovered.x, hovered.y, textWidth, layout.enabled ? layout.axisY + 1 : void 0, visible);
+				pushTextCells(cells, placement.x, placement.y, text, mergeStyle(clearStyle.value, props.tooltipStyle), visible.x + visible.w - placement.x);
+			}
+			return createSurface(width, height, clearStyle.value, cells);
+		});
+		return useChartRender(props, surface, { handlers: ({ fullRect }) => ({
+			pointermove: (event) => {
+				const next = {
+					x: Math.floor(event.cellX - fullRect.value.x),
+					y: Math.floor(event.cellY - fullRect.value.y)
+				};
+				const current = hoverPointer.value;
+				if (!current || current.x !== next.x || current.y !== next.y) hoverPointer.value = next;
+			},
+			pointerleave: () => {
+				if (hoverPointer.value != null) hoverPointer.value = null;
+			}
+		}) });
+	}
+});
+const TCandlestickChart = defineComponent({
+	name: "TCandlestickChart",
+	props: {
+		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
+		},
+		candles: {
+			type: Array,
+			required: true
+		},
+		labels: {
+			type: Array,
+			default: void 0
+		},
+		min: {
+			type: Number,
+			default: void 0
+		},
+		max: {
+			type: Number,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			default: void 0
+		},
+		upStyle: {
+			type: Object,
+			default: () => ({ fg: "greenBright" })
+		},
+		downStyle: {
+			type: Object,
+			default: () => ({ fg: "redBright" })
+		},
+		wickStyle: {
+			type: Object,
+			default: void 0
+		},
+		showAxes: {
+			type: Boolean,
+			default: true
+		},
+		axisStyle: {
+			type: Object,
+			default: () => ({
+				fg: "white",
+				dim: true
+			})
+		},
+		labelStyle: {
+			type: Object,
+			default: () => ({ fg: "whiteBright" })
+		},
+		xLabel: {
+			type: String,
+			default: ""
+		},
+		yLabel: {
+			type: String,
+			default: ""
+		},
+		startLabel: {
+			type: String,
+			default: ""
+		},
+		endLabel: {
+			type: String,
+			default: ""
+		},
+		showTooltip: {
+			type: Boolean,
+			default: true
+		},
+		hoverStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		tooltipStyle: {
+			type: Object,
+			default: () => ({ fg: "whiteBright" })
+		}
+	},
+	setup(props) {
+		const { defaultStyle } = useTerminal();
+		const baseStyle = computed(() => mergeStyle(defaultStyle.value, props.style));
+		const axisStyle = computed(() => mergeStyle(baseStyle.value, props.axisStyle));
+		const labelStyle = computed(() => mergeStyle(baseStyle.value, props.labelStyle));
+		const hoverPointer = ref(null);
+		const candleLayout = computed(() => {
+			const width = cellCount(props.w, 0);
+			const height = cellCount(props.h, 0);
+			let min = 0;
+			let max = 0;
+			let layout = resolveAxisLayout(width, height, min, max, props.showAxes);
+			let startIndex = props.candles.length;
+			let visibleCandles = [];
+			for (let capacity = Math.min(props.candles.length, width); capacity >= 0; capacity--) {
+				startIndex = Math.max(0, props.candles.length - capacity);
+				visibleCandles = props.candles.slice(startIndex);
+				({min, max} = domainFromValues(candlestickDomainValues(visibleCandles), props.min, props.max));
+				layout = resolveAxisLayout(width, height, min, max, props.showAxes);
+				if (visibleCandles.length <= layout.plotW) break;
+			}
+			const candleOffsetX = Math.max(0, layout.plotW - visibleCandles.length);
+			return {
+				width,
+				height,
+				layout,
+				visibleCandles,
+				startIndex,
+				candleOffsetX,
+				min,
+				max
+			};
+		});
+		const visibleRect = useChartVisibleRect(props, candleLayout);
+		function hitCandle(localX, localY) {
+			const current = candleLayout.value;
+			const { layout } = current;
+			if (current.width <= 0 || current.height <= 0 || layout.plotW <= 0 || layout.plotH <= 0) return null;
+			const plotX = localX - layout.plotX - current.candleOffsetX;
+			const plotY = localY - layout.plotY;
+			if (plotX < 0 || plotX >= current.visibleCandles.length || current.visibleCandles.length <= 0) return null;
+			if (plotY < 0 || plotY >= layout.plotH) return null;
+			const candleX = plotX;
+			const candle = current.visibleCandles[candleX];
+			const values = normalizeCandlestick(candle);
+			if (!values) return null;
+			const { open, high, low, close } = values;
+			const index = current.startIndex + candleX;
+			const label = props.labels?.[index] ?? `#${index + 1}`;
+			return {
+				x: layout.plotX + current.candleOffsetX + candleX,
+				y: localY,
+				index,
+				label,
+				value: yToValue(plotY, current.min, current.max, layout.plotH),
+				open,
+				high,
+				low,
+				close
+			};
+		}
+		const surface = computed(() => {
+			const current = candleLayout.value;
+			const { width, height, layout, visibleCandles, candleOffsetX, min, max } = current;
+			const cells = [];
+			const upStyle = mergeStyle(baseStyle.value, props.upStyle);
+			const downStyle = mergeStyle(baseStyle.value, props.downStyle);
+			const upWickStyle = mergeStyle(baseStyle.value, props.upStyle, props.wickStyle);
+			const downWickStyle = mergeStyle(baseStyle.value, props.downStyle, props.wickStyle);
+			const pointer = hoverPointer.value;
+			const hovered = pointer ? hitCandle(pointer.x, pointer.y) : null;
+			for (let x = 0; x < visibleCandles.length; x++) {
+				const candle = visibleCandles[x];
+				const values = normalizeCandlestick(candle);
+				if (!values) continue;
+				const { open, high, low, close } = values;
+				const up = close >= open;
+				const baseBodyStyle = up ? upStyle : downStyle;
+				const baseWickStyle = up ? upWickStyle : downWickStyle;
+				const hoveredCandle = hovered?.index === current.startIndex + x;
+				const bodyStyle = hoveredCandle ? mergeStyle(baseBodyStyle, props.hoverStyle) : baseBodyStyle;
+				const wickStyle = hoveredCandle ? mergeStyle(baseWickStyle, props.hoverStyle) : baseWickStyle;
+				const highY = valueToY(Math.max(high, low, open, close), min, max, layout.plotH);
+				const lowY = valueToY(Math.min(high, low, open, close), min, max, layout.plotH);
+				const openY = valueToY(open, min, max, layout.plotH);
+				const closeY = valueToY(close, min, max, layout.plotH);
+				const bodyTop = Math.min(openY, closeY);
+				const bodyBottom = Math.max(openY, closeY);
+				for (let y = highY; y <= lowY; y++) {
+					const inBody = y >= bodyTop && y <= bodyBottom;
+					cells.push({
+						x: layout.plotX + candleOffsetX + x,
+						y: layout.plotY + y,
+						ch: inBody ? "█" : "│",
+						style: inBody ? bodyStyle : wickStyle
+					});
+				}
+			}
+			const firstVisible = props.candles.length - visibleCandles.length + 1;
+			pushAxes(cells, layout, axisStyle.value, labelStyle.value, props.xLabel, props.yLabel, props.startLabel || (visibleCandles.length > 0 ? String(firstVisible) : ""), props.endLabel || (visibleCandles.length > 0 ? String(props.candles.length) : ""));
+			const visible = visibleRect.value;
+			if (props.showTooltip && hovered && width > 0 && height > 0 && visible.w > 0 && visible.h > 0) {
+				const text = `${sanitizeInlineText(hovered.label)} x=${hovered.index + 1} y=${formatChartValue(hovered.value)} O:${formatChartValue(hovered.open)} H:${formatChartValue(hovered.high)} L:${formatChartValue(hovered.low)} C:${formatChartValue(hovered.close)}`;
+				const textWidth = textCellWidth(text);
+				const placement = chooseTooltipPlacement(cells, width, height, hovered.x, hovered.y, textWidth, void 0, visible);
+				pushTextCells(cells, placement.x, placement.y, text, mergeStyle(baseStyle.value, props.tooltipStyle), visible.x + visible.w - placement.x);
+			}
+			return createSurface(width, height, baseStyle.value, cells);
+		});
+		return useChartRender(props, surface, { handlers: ({ fullRect }) => ({
+			pointermove: (event) => {
+				const next = {
+					x: Math.floor(event.cellX - fullRect.value.x),
+					y: Math.floor(event.cellY - fullRect.value.y)
+				};
+				const current = hoverPointer.value;
+				if (!current || current.x !== next.x || current.y !== next.y) hoverPointer.value = next;
+			},
+			pointerleave: () => {
+				if (hoverPointer.value != null) hoverPointer.value = null;
+			}
+		}) });
+	}
+});
+const TPieChart = defineComponent({
+	name: "TPieChart",
+	props: {
+		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
+		},
+		values: {
+			type: Array,
+			required: true
+		},
+		labels: {
+			type: Array,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			default: void 0
+		},
+		segmentStyles: {
+			type: Array,
+			default: () => DEFAULT_PIE_SEGMENT_STYLES
+		},
+		cell: {
+			type: String,
+			default: "█"
+		},
+		showLegend: {
+			type: Boolean,
+			default: true
+		},
+		legendStyle: {
+			type: Object,
+			default: () => ({ fg: "whiteBright" })
+		}
+	},
+	setup(props) {
+		const { defaultStyle } = useTerminal();
+		const baseStyle = computed(() => mergeStyle(defaultStyle.value, props.style));
+		const legendStyle = computed(() => mergeStyle(baseStyle.value, props.legendStyle));
+		const surface = computed(() => {
+			const width = cellCount(props.w, 0);
+			const height = cellCount(props.h, 0);
+			const values = props.values.map((value) => {
+				const n = Number(value);
+				return Number.isFinite(n) ? Math.max(0, n) : 0;
+			});
+			const scale = maxPositive(values);
+			const normalizedValues = scale > 0 ? values.map((value) => value / scale) : values;
+			const total = normalizedValues.reduce((sum, value) => sum + value, 0);
+			const cells = [];
+			const glyph = chartGlyph(props.cell, "█");
+			const segmentStyles = props.segmentStyles.map((style) => mergeStyle(baseStyle.value, style));
+			const visibleSegments = values.map((value, index) => ({
+				value,
+				normalizedValue: normalizedValues[index] ?? 0,
+				index
+			})).filter((segment) => segment.value > 0);
+			const legendItems = visibleSegments.map((segment) => {
+				const label = props.labels?.[segment.index] ?? `S${segment.index + 1}`;
+				const percent = total > 0 ? Math.round(segment.normalizedValue / total * 100) : 0;
+				const text = `${label} ${formatChartValue(segment.value)} ${percent}%`;
+				return {
+					...segment,
+					text
+				};
+			});
+			const showLegend = props.showLegend && visibleSegments.length > 0 && width >= 18 && height >= 3;
+			const desiredLegendWidth = legendItems.reduce((maxWidth, item) => Math.max(maxWidth, textCellWidth(sanitizeInlineText(item.text)) + 2), 0) || 12;
+			const rightLegendWidth = showLegend ? Math.min(Math.max(12, desiredLegendWidth), Math.max(0, width - 6)) : 0;
+			const rightPlotWidth = Math.max(0, width - rightLegendWidth - 1);
+			const legendRows = Math.min(legendItems.length, height);
+			const rightLegend = showLegend && rightPlotWidth >= 8;
+			const bottomLegend = showLegend && !rightLegend && height >= legendRows + 4;
+			const legendPlacement = rightLegend ? "right" : bottomLegend ? "bottom" : "none";
+			const plotWidth = legendPlacement === "right" ? rightPlotWidth : width;
+			const plotHeight = legendPlacement === "bottom" ? Math.max(0, height - legendRows - 1) : height;
+			if (plotWidth > 0 && plotHeight > 0 && total > 0) {
+				const segments = [];
+				let cursor = 0;
+				for (let i = 0; i < normalizedValues.length; i++) {
+					const value = normalizedValues[i];
+					if (value <= 0) continue;
+					cursor += value / total * Math.PI * 2;
+					segments.push({
+						end: cursor,
+						index: i,
+						style: segmentStyles[i % Math.max(1, segmentStyles.length)] ?? baseStyle.value
+					});
+				}
+				const cx = plotWidth / 2;
+				const cy = plotHeight / 2;
+				const maxRx = plotWidth / 2;
+				const maxRy = plotHeight / 2;
+				const ry = Math.max(.5, Math.min(maxRy, maxRx / TERMINAL_CELL_HEIGHT_TO_WIDTH));
+				const rx = Math.max(.5, Math.min(maxRx, ry * TERMINAL_CELL_HEIGHT_TO_WIDTH));
+				const smoothEdge = glyph === "█";
+				const segmentAt = (nx, ny) => {
+					let angle = Math.atan2(ny, nx) + Math.PI / 2;
+					if (angle < 0) angle += Math.PI * 2;
+					return segments.find((candidate) => angle <= candidate.end) ?? segments.at(-1);
+				};
+				for (let y = 0; y < plotHeight; y++) for (let x = 0; x < plotWidth; x++) {
+					let mask = 0;
+					const hits = new Map();
+					for (const sample of PIE_CELL_SAMPLES) {
+						const nx = (x + sample.dx - cx) / rx;
+						const ny = (y + sample.dy - cy) / ry;
+						if (nx * nx + ny * ny > 1) continue;
+						mask |= sample.bit;
+						const segment = segmentAt(nx, ny);
+						if (!segment) continue;
+						const previous = hits.get(segment.index);
+						hits.set(segment.index, {
+							segment,
+							count: (previous?.count ?? 0) + 1
+						});
+					}
+					if (!mask) continue;
+					const selected = Array.from(hits.values()).sort((a, b) => b.count - a.count)[0];
+					const ch = smoothEdge ? PIE_QUADRANT_BLOCKS[mask] ?? glyph : glyph;
+					cells.push({
+						x,
+						y,
+						ch,
+						style: selected?.segment.style ?? baseStyle.value
+					});
+				}
+			}
+			if (legendPlacement !== "none") {
+				const legendX = legendPlacement === "right" ? plotWidth + 1 : 0;
+				const legendY = legendPlacement === "right" ? 0 : plotHeight + 1;
+				const maxTextWidth = legendPlacement === "right" ? Math.max(0, width - legendX - 2) : Math.max(0, width - 2);
+				for (let row = 0; row < legendItems.length && legendY + row < height; row++) {
+					const segment = legendItems[row];
+					const style = segmentStyles[segment.index % Math.max(1, segmentStyles.length)] ?? baseStyle.value;
+					cells.push({
+						x: legendX,
+						y: legendY + row,
+						ch: glyph,
+						style
+					});
+					pushTextCells(cells, legendX + 2, legendY + row, segment.text, legendStyle.value, maxTextWidth);
+				}
+			}
+			return createSurface(width, height, baseStyle.value, cells);
+		});
+		return useChartRender(props, surface);
+	}
+});
+
+//#endregion
 //#region src/vue/log/tlog-session.ts
 function clamp(n, min, max) {
 	return Math.max(min, Math.min(max, n));
@@ -111,4 +3107,4 @@ function restoreTLogViewSessionState(bindings, state) {
 }
 
 //#endregion
-export { TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, 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 };