@simon_he/vue-tui 1.0.2 → 1.1.1

package/dist/experimental.js

@@ -1,12 +1,1493 @@
-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 "./width-GqllnV8C.js";
+import { sanitizeTerminalHref } from "./hyperlink-B35-O-cW.js";
+import { EventZIndexContextKey, forEachTextCellSegment, intersectRect, sanitizeInlineText, sliceByCells, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility } from "./rect-Ng-3eKzF.js";
+import { mergeStyle } from "./linkify-CuuquMQT.js";
+import "./frame-perf-BBhE-iuS.js";
+import "./terminal-selection-CQYr--26.js";
+import "./wheel-scroll-CQ22Hcyj.js";
+import { TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, TTranscriptView, TVirtualList, createAppendOnlyLogStore, createTLogDensityBucketsFromMarkers, createTLogLevelPlugin, createTLogLineMatcherPlugin, createTLogLinkActionPlugin, createTLogOsc8LinkPlugin, createTLogUrlPlugin, detectTLogUrls, dispatchTLogPluginLinkAction, getTLogPluginMetadata, handleTLogKeymapEvent, matchesTLogKeyBinding, parseTLogAnnotatedText, resolveTLogLinksPanelTheme, resolveTLogMinimapTheme, resolveTLogScrollbarTheme, resolveTLogSearchBarTheme, resolveTLogSearchPagerTheme, resolveTLogSearchResultsTheme, resolveTLogViewTheme, stripTLogAnsiText, tlogDarkPreset, tlogDarkTheme, tlogDefaultKeymap, tlogDefaultPreset, tlogDefaultTheme, tlogHighContrastKeymap, tlogHighContrastPreset, tlogHighContrastTheme, toTLogExternalLinkFromVisibleLink, useTLogLinkController, useTLogRetainedIndex, useTLogSearchController, useTLogSearchResultsPage, useTLogVirtualSearchResults } from "./tlog-theme-CopRt9SC.js";
+import { computed, defineComponent, h, inject, ref } from "vue";
 
+//#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 +1592,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 { TCandlestickChart, TContributionGraph, TLineChart, TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, TPieChart, TTranscriptView, TVirtualList, captureTLogViewSessionState, createAppendOnlyLogStore, createTLogDensityBucketsFromMarkers, createTLogLevelPlugin, createTLogLineMatcherPlugin, createTLogLinkActionPlugin, createTLogOsc8LinkPlugin, createTLogUrlPlugin, createTLogViewSessionStore, deserializeTLogViewSessionState, detectTLogUrls, dispatchTLogPluginLinkAction, getTLogPluginMetadata, handleTLogKeymapEvent, matchesTLogKeyBinding, parseTLogAnnotatedText, resolveTLogLinksPanelTheme, resolveTLogMinimapTheme, resolveTLogScrollbarTheme, resolveTLogSearchBarTheme, resolveTLogSearchPagerTheme, resolveTLogSearchResultsTheme, resolveTLogViewTheme, restoreTLogViewSessionState, sanitizeTerminalHref, serializeTLogViewSessionState, stripTLogAnsiText, tlogDarkPreset, tlogDarkTheme, tlogDefaultKeymap, tlogDefaultPreset, tlogDefaultTheme, tlogHighContrastKeymap, tlogHighContrastPreset, tlogHighContrastTheme, toTLogExternalLinkFromVisibleLink, useTLogLinkController, useTLogRetainedIndex, useTLogSearchController, useTLogSearchResultsPage, useTLogVirtualSearchResults };