@simon_he/vue-tui 1.0.0 → 1.0.2

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

@@ -1008,6 +1008,15 @@ function normalizeInt$9(value) {
 	const n = Math.floor(Number(value));
 	return Number.isFinite(n) ? n : 0;
 }
+function normalizeChangedRange(range, count) {
+	if (!range) return null;
+	const start = clamp$10(normalizeInt$9(range.start), 0, count);
+	const end = clamp$10(normalizeInt$9(range.end), start, count);
+	return {
+		start,
+		end
+	};
+}
 function getWheelScrollInput$1(e) {
 	const deltaY = Number(e.deltaY ?? 0);
 	const deltaMode = typeof e.deltaMode === "number" ? e.deltaMode : void 0;
@@ -1066,6 +1075,10 @@ const TVirtualRows = defineComponent({
 			type: Number,
 			required: true
 		},
+		itemChangedRange: {
+			type: Function,
+			default: void 0
+		},
 		getItem: {
 			type: Function,
 			required: true
@@ -1269,6 +1282,20 @@ const TVirtualRows = defineComponent({
 				reason: "scroll"
 			});
 		}
+		function markScrollDamage(prevTop, nextTop, strategy = "auto") {
+			const r = normalizedRect();
+			const h$1 = r.h;
+			const delta = nextTop - prevTop;
+			if (h$1 <= 0 || !delta) return;
+			const size = terminal.size();
+			const ownsFullRows = Math.floor(r.x) === 0 && Math.floor(r.w) >= size.cols;
+			const withinTerminalRows = r.y >= 0 && r.y + h$1 <= size.rows;
+			const canUseScrollPlane = strategy === "auto" && props.rowScrollMode === "unsafe-full-row" && rendererCapabilities.value.scrollOperations && ownsFullRows && withinTerminalRows && !isClipped() && Math.abs(delta) < h$1 && !dirtyRowsHint?.length;
+			if (canUseScrollPlane) {
+				render.unsafeScrollPlaneRows(plane.value, r.y, r.y + h$1, delta);
+				markRowsDirty(exposedRowsForDelta$1(r.y, h$1, delta));
+			} else markViewportDirty();
+		}
 		function applyScrollTop(nextTop, options) {
 			const r = normalizedRect();
 			const h$1 = r.h;
@@ -1284,14 +1311,7 @@ const TVirtualRows = defineComponent({
 			}
 			setCurrentScrollTop(clampedTop);
 			if (options?.emitUpdate !== false) emit("update:scrollTop", clampedTop);
-			const size = terminal.size();
-			const ownsFullRows = Math.floor(r.x) === 0 && Math.floor(r.w) >= size.cols;
-			const withinTerminalRows = r.y >= 0 && r.y + h$1 <= size.rows;
-			const canUseScrollPlane = (options?.strategy ?? "auto") === "auto" && props.rowScrollMode === "unsafe-full-row" && rendererCapabilities.value.scrollOperations && ownsFullRows && withinTerminalRows && !isClipped() && Math.abs(delta) < h$1 && !dirtyRowsHint?.length;
-			if (canUseScrollPlane) {
-				render.unsafeScrollPlaneRows(plane.value, r.y, r.y + h$1, delta);
-				markRowsDirty(exposedRowsForDelta$1(r.y, h$1, delta));
-			} else markViewportDirty();
+			markScrollDamage(prevTop, clampedTop, options?.strategy);
 			if (options?.emitScroll) emitScroll(clampedTop);
 			return true;
 		}
@@ -1359,7 +1379,10 @@ const TVirtualRows = defineComponent({
 			invalidateSelf("normal");
 		}
 		function invalidateRange(start, end) {
-			if (!hasPaintableViewport()) return;
+			markItemRangeDirty(start, end);
+		}
+		function markItemRangeDirty(start, end) {
+			if (!hasPaintableViewport()) return false;
 			const r = normalizedRect();
 			const { y: clipY } = clipOffsets();
 			const top = currentScrollTop() + clipY;
@@ -1370,9 +1393,10 @@ const TVirtualRows = defineComponent({
 				const y = r.y + (index - top);
 				if (y >= r.y && y < r.y + r.h) rows.push(y);
 			}
-			if (!rows.length) return;
+			if (!rows.length) return true;
 			markRowsDirty(rows);
 			invalidateSelf("normal");
+			return true;
 		}
 		function invalidateIndex(index) {
 			const n = normalizeInt$9(index);
@@ -1581,8 +1605,9 @@ const TVirtualRows = defineComponent({
 				return;
 			}
 			cancelWheelScrollFrame();
+			const prevTop = controlledScrollTop.value;
 			controlledScrollTop.value = nextTop;
-			markViewportDirty();
+			markScrollDamage(prevTop, nextTop);
 			selection.refresh(pendingSelectionScrollFocusRemap ? { remapFocus: true } : void 0);
 			pendingSelectionScrollFocusRemap = false;
 			invalidateSelf("high");
@@ -1602,7 +1627,7 @@ const TVirtualRows = defineComponent({
 			() => absRect.value.y,
 			() => absRect.value.w,
 			() => absRect.value.h
-		], () => {
+		], (next, prev) => {
 			resetWheelScrollState(wheelState);
 			const nextTop = clampScrollTop(currentScrollTop());
 			if (isScrollControlled()) {
@@ -1611,6 +1636,14 @@ const TVirtualRows = defineComponent({
 					emitScroll(nextTop);
 				}
 			} else setCurrentScrollTop(nextTop);
+			const onlyItemVersionChanged = Boolean(prev && next[0] === prev[0] && next[1] !== prev[1] && next[2] === prev[2] && next[3] === prev[3] && next[4] === prev[4] && next[5] === prev[5] && next[6] === prev[6] && next[7] === prev[7] && next[8] === prev[8] && next[9] === prev[9]);
+			if (onlyItemVersionChanged) {
+				const changedRange = normalizeChangedRange(props.itemChangedRange?.(), itemCount.value);
+				if (changedRange) {
+					markItemRangeDirty(changedRange.start, changedRange.end);
+					return;
+				}
+			}
 			markViewportDirty();
 			invalidateSelf("normal");
 		}, { immediate: true });
@@ -1632,7 +1665,6 @@ const TVirtualRows = defineComponent({
 				absRect.value,
 				fullRect.value,
 				itemCount.value,
-				props.itemVersion,
 				props.getItem,
 				props.paintItem,
 				props.selectionSpanText,
@@ -1717,8 +1749,11 @@ const EMPTY_LAYOUT = Object.freeze({
 	visualRows: Object.freeze([]),
 	rowStarts: new Map(),
 	rowEnds: new Map(),
-	regions: Object.freeze([])
+	regions: Object.freeze([]),
+	fixedRows: false,
+	rowCount: 0
 });
+const MAX_KEYED_ROW_LAYOUT_CACHE_ENTRIES = 2048;
 function clamp$9(n, min, max) {
 	return Math.max(min, Math.min(max, n));
 }
@@ -1726,6 +1761,15 @@ function normalizeInt$8(value) {
 	const n = Math.floor(Number(value));
 	return Number.isFinite(n) ? n : 0;
 }
+function normalizedChangedRange(range, count) {
+	if (!range) return null;
+	const start = clamp$9(normalizeInt$8(range.start), 0, count);
+	const end = clamp$9(normalizeInt$8(range.end), start, count);
+	return {
+		start,
+		end
+	};
+}
 function sourceSegmentsForRegion(row) {
 	if (row.kind === "message") return row.segments;
 	if (row.kind === "approval") {
@@ -1756,8 +1800,26 @@ function rowHasRegionId(row, rowKey, id) {
 	}
 	return false;
 }
-function sameCachedLayout(entry, next) {
-	return Boolean(entry) && (next.usesSourceRowVersion || entry.version === next.version) && entry.rowVersion === next.rowVersion && entry.usesSourceRowVersion === next.usesSourceRowVersion && (next.usesSourceRowVersion || entry.row === next.row) && entry.rowIndex === next.rowIndex && entry.rowKey === next.rowKey && entry.width === next.width && entry.wrap === next.wrap && entry.baseStyle === next.baseStyle && entry.hoverStyle === next.hoverStyle && entry.focusStyle === next.focusStyle && entry.hoverRegionId === next.hoverRegionId && entry.focusedRegionId === next.focusedRegionId;
+function cachedLayoutHasRegionId(entry, id) {
+	if (!entry || !id) return false;
+	for (const visualRow of entry.visualRows) if (visualRow.hitRegions.some((region) => region.id === id)) return true;
+	return false;
+}
+function rowLayoutIdentityKey(rowKey, rowVersion) {
+	return JSON.stringify([rowKey, rowVersion]);
+}
+function reindexVisualRows(rows, rowIndex) {
+	return rows.map((visualRow) => ({
+		...visualRow,
+		rowIndex,
+		hitRegions: visualRow.hitRegions.map((region) => ({
+			...region,
+			rowIndex
+		}))
+	}));
+}
+function sameCachedLayout(entry, next, matchRowIndex = true) {
+	return Boolean(entry) && (next.usesSourceRowVersion || entry.version === next.version) && entry.rowVersion === next.rowVersion && entry.usesSourceRowVersion === next.usesSourceRowVersion && (next.usesSourceRowVersion || entry.row === next.row) && (!matchRowIndex || entry.rowIndex === next.rowIndex) && entry.rowKey === next.rowKey && entry.width === next.width && entry.wrap === next.wrap && entry.baseStyle === next.baseStyle && entry.hoverStyle === next.hoverStyle && entry.focusStyle === next.focusStyle && entry.hoverRegionId === next.hoverRegionId && entry.focusedRegionId === next.focusedRegionId;
 }
 const TTranscriptView = defineComponent({
 	name: "TTranscriptView",
@@ -1861,6 +1923,10 @@ const TTranscriptView = defineComponent({
 		const hoveredRegion = ref(null);
 		const focusedRegion = ref(null);
 		const rowLayoutCache = new Map();
+		const keyedRowLayoutCache = new Map();
+		let previousWrappedLayout = null;
+		let previousWrappedDeps = null;
+		let canUseWrappedChangedRangeRepaint = false;
 		let warnedLargeFlattenedRows = false;
 		function isScrollControlled() {
 			return Object.prototype.hasOwnProperty.call(instance?.vnode.props ?? {}, "scrollTop");
@@ -1868,14 +1934,176 @@ const TTranscriptView = defineComponent({
 		function currentScrollTop() {
 			return normalizeInt$8(isScrollControlled() ? props.scrollTop : innerScrollTop.value);
 		}
+		function currentScrollTopForRowCount(count) {
+			const viewportRows = Math.max(0, normalizeInt$8(props.h));
+			const maxTop = Math.max(0, count - viewportRows);
+			return clamp$9(currentScrollTop(), 0, maxTop);
+		}
+		function rememberKeyedRowLayout(entry) {
+			if (!entry.usesSourceRowVersion) return;
+			keyedRowLayoutCache.set(rowLayoutIdentityKey(entry.rowKey, entry.rowVersion), entry);
+			if (keyedRowLayoutCache.size <= MAX_KEYED_ROW_LAYOUT_CACHE_ENTRIES) return;
+			const first = keyedRowLayoutCache.keys().next().value;
+			if (first != null) keyedRowLayoutCache.delete(first);
+		}
+		function layoutSourceRow(rowIndex, options) {
+			const sourceRowVersion = props.source.getRowVersion?.(rowIndex);
+			let cached = rowLayoutCache.get(rowIndex);
+			const usesSourceRowVersion = sourceRowVersion != null;
+			let row = cached?.row;
+			let rowKey = cached?.rowKey;
+			let canUseCachedRow = false;
+			if (usesSourceRowVersion && cached?.usesSourceRowVersion && cached.rowVersion === sourceRowVersion) if (props.source.getRowKey) {
+				rowKey = props.source.getRowKey(rowIndex);
+				canUseCachedRow = rowKey === cached.rowKey;
+			} else {
+				rowKey = cached.rowKey;
+				canUseCachedRow = true;
+			}
+			if (!canUseCachedRow && usesSourceRowVersion && props.source.getRowKey) {
+				rowKey = props.source.getRowKey(rowIndex);
+				cached = keyedRowLayoutCache.get(rowLayoutIdentityKey(rowKey, sourceRowVersion));
+				if (cached) {
+					row = cached.row;
+					canUseCachedRow = true;
+				}
+			}
+			if (!canUseCachedRow || row == null || rowKey == null) {
+				row = props.source.getRow(rowIndex);
+				rowKey = props.source.getRowKey?.(rowIndex) ?? row.key;
+				canUseCachedRow = false;
+			}
+			const nextHoverRegionId = canUseCachedRow ? cachedLayoutHasRegionId(cached, options.hoverRegionId) ? options.hoverRegionId : null : rowHasRegionId(row, rowKey, options.hoverRegionId) ? options.hoverRegionId : null;
+			const nextFocusedRegionId = canUseCachedRow ? cachedLayoutHasRegionId(cached, options.focusedRegionId) ? options.focusedRegionId : null : rowHasRegionId(row, rowKey, options.focusedRegionId) ? options.focusedRegionId : null;
+			const cacheKey = {
+				version: props.version,
+				rowVersion: sourceRowVersion ?? props.version,
+				usesSourceRowVersion,
+				row,
+				rowIndex,
+				rowKey,
+				width: options.width,
+				wrap: props.wrap,
+				baseStyle: options.baseStyle,
+				hoverStyle: props.hoverStyle,
+				focusStyle: props.focusStyle,
+				hoverRegionId: nextHoverRegionId,
+				focusedRegionId: nextFocusedRegionId
+			};
+			const cacheMatches = sameCachedLayout(cached, cacheKey);
+			const reindexableCacheMatches = !cacheMatches && canUseCachedRow && sameCachedLayout(cached, cacheKey, false);
+			const rows = cacheMatches ? cached.visualRows : reindexableCacheMatches ? reindexVisualRows(cached.visualRows, rowIndex) : layoutTranscriptRow({
+				row,
+				rowIndex,
+				rowKey,
+				width: options.width,
+				baseStyle: options.baseStyle,
+				hoverRegionId: nextHoverRegionId,
+				focusedRegionId: nextFocusedRegionId,
+				hoverStyle: props.hoverStyle,
+				focusStyle: props.focusStyle,
+				wrap: props.wrap
+			});
+			if (rows !== cached?.visualRows) {
+				const entry = {
+					...cacheKey,
+					visualRows: rows
+				};
+				rowLayoutCache.set(rowIndex, entry);
+				rememberKeyedRowLayout(entry);
+			}
+			return {
+				rows,
+				cacheHit: cacheMatches || reindexableCacheMatches
+			};
+		}
+		function pruneRowLayoutCache(count) {
+			for (const rowIndex of rowLayoutCache.keys()) if (rowIndex >= count) rowLayoutCache.delete(rowIndex);
+		}
+		function sameWrappedDeps(a, b) {
+			return Boolean(a) && a.width === b.width && a.baseStyle === b.baseStyle && a.hoverStyle === b.hoverStyle && a.focusStyle === b.focusStyle && a.hoverRegionId === b.hoverRegionId && a.focusedRegionId === b.focusedRegionId;
+		}
+		function visibleRegionsForVisualRows(visualRows) {
+			const top = clamp$9(currentScrollTop(), 0, visualRows.length);
+			const bottom = Math.min(visualRows.length, top + Math.max(0, normalizeInt$8(props.h)));
+			const regions = [];
+			for (let index = top; index < bottom; index++) regions.push(...visualRows[index]?.hitRegions ?? []);
+			return regions;
+		}
+		function tryUpdateWrappedLayoutFromChangedRange(count, changedRange, deps) {
+			const previous = previousWrappedLayout;
+			if (!previous || previous.fixedRows || previous.rowCount !== count) return null;
+			if (!changedRange || !sameWrappedDeps(previousWrappedDeps, deps)) return null;
+			const changedCount = changedRange.end - changedRange.start;
+			if (changedCount <= 0) {
+				canUseWrappedChangedRangeRepaint = true;
+				return {
+					state: {
+						...previous,
+						regions: visibleRegionsForVisualRows(previous.visualRows)
+					},
+					cacheHit: count,
+					cacheMiss: 0
+				};
+			}
+			const oldVisualStart = previous.rowStarts.get(changedRange.start);
+			const oldVisualEnd = previous.rowEnds.get(changedRange.end - 1);
+			if (oldVisualStart == null || oldVisualEnd == null) return null;
+			const nextRows = [];
+			const changedRowHeights = [];
+			let cacheHit = count - changedCount;
+			let cacheMiss = 0;
+			for (let rowIndex = changedRange.start; rowIndex < changedRange.end; rowIndex++) {
+				const result = layoutSourceRow(rowIndex, {
+					width: deps.width,
+					baseStyle: deps.baseStyle,
+					hoverRegionId: deps.hoverRegionId,
+					focusedRegionId: deps.focusedRegionId
+				});
+				if (result.cacheHit) cacheHit++;
+				else cacheMiss++;
+				changedRowHeights.push(result.rows.length);
+				nextRows.push(...result.rows);
+			}
+			if (nextRows.length !== oldVisualEnd - oldVisualStart) return null;
+			canUseWrappedChangedRangeRepaint = true;
+			const visualRows = previous.visualRows;
+			for (let index = 0; index < nextRows.length; index++) visualRows[oldVisualStart + index] = nextRows[index];
+			const rowStarts = previous.rowStarts;
+			const rowEnds = previous.rowEnds;
+			let visualCursor = oldVisualStart;
+			for (let rowIndex = changedRange.start, offset = 0; rowIndex < changedRange.end; rowIndex++, offset++) {
+				rowStarts.set(rowIndex, visualCursor);
+				visualCursor += changedRowHeights[offset] ?? 0;
+				rowEnds.set(rowIndex, visualCursor);
+			}
+			const state = {
+				visualRows,
+				rowStarts,
+				rowEnds,
+				regions: visibleRegionsForVisualRows(visualRows),
+				fixedRows: false,
+				rowCount: count
+			};
+			previousWrappedLayout = state;
+			return {
+				state,
+				cacheHit,
+				cacheMiss
+			};
+		}
 		const layoutState = computed(() => {
 			props.version;
+			canUseWrappedChangedRangeRepaint = false;
 			const perfEnabled = observability.framePerf.enabled.value;
 			const perfStartedAt = perfEnabled ? framePerfNow() : 0;
 			const width = Math.max(1, Math.floor(props.w));
 			const count = Math.max(0, normalizeInt$8(props.source.rowCount()));
 			if (!count) {
 				rowLayoutCache.clear();
+				keyedRowLayoutCache.clear();
+				previousWrappedLayout = null;
+				previousWrappedDeps = null;
 				if (perfEnabled) observability.framePerf.recordComponent({
 					name: "TTranscriptView",
 					id: instance?.uid == null ? void 0 : String(instance.uid),
@@ -1890,7 +2118,9 @@ const TTranscriptView = defineComponent({
 				});
 				return EMPTY_LAYOUT;
 			}
+			const fixedRows = props.wrap === false;
 			const visualRows = [];
+			if (fixedRows) visualRows.length = count;
 			const rowStarts = new Map();
 			const rowEnds = new Map();
 			const regions = [];
@@ -1899,56 +2129,71 @@ const TTranscriptView = defineComponent({
 			const focusedRegionId = focusedRegion.value?.id ?? null;
 			let cacheHit = 0;
 			let cacheMiss = 0;
-			for (let rowIndex = 0; rowIndex < count; rowIndex++) {
-				const row = props.source.getRow(rowIndex);
-				const rowKey = props.source.getRowKey?.(rowIndex) ?? row.key;
-				const sourceRowVersion = props.source.getRowVersion?.(rowIndex);
-				const localHoverRegionId = rowHasRegionId(row, rowKey, hoverRegionId) ? hoverRegionId : null;
-				const localFocusedRegionId = rowHasRegionId(row, rowKey, focusedRegionId) ? focusedRegionId : null;
-				const cacheKey = {
-					version: props.version,
-					rowVersion: sourceRowVersion ?? props.version,
-					usesSourceRowVersion: sourceRowVersion != null,
-					row,
-					rowIndex,
-					rowKey,
-					width,
-					wrap: props.wrap,
-					baseStyle,
-					hoverStyle: props.hoverStyle,
-					focusStyle: props.focusStyle,
-					hoverRegionId: localHoverRegionId,
-					focusedRegionId: localFocusedRegionId
-				};
-				rowStarts.set(rowIndex, visualRows.length);
-				const cached = rowLayoutCache.get(rowIndex);
-				const cacheMatches = sameCachedLayout(cached, cacheKey);
-				if (cacheMatches) cacheHit++;
-				else cacheMiss++;
-				const rows = cacheMatches ? cached.visualRows : layoutTranscriptRow({
-					row,
-					rowIndex,
-					rowKey,
-					width,
-					baseStyle,
-					hoverRegionId: localHoverRegionId,
-					focusedRegionId: localFocusedRegionId,
-					hoverStyle: props.hoverStyle,
-					focusStyle: props.focusStyle,
-					wrap: props.wrap
-				});
-				if (rows !== cached?.visualRows) rowLayoutCache.set(rowIndex, {
-					...cacheKey,
-					visualRows: rows
-				});
-				for (const visualRow of rows) {
-					visualRows.push(visualRow);
-					regions.push(...visualRow.hitRegions);
+			const sourceChangedRange = normalizedChangedRange(props.source.getChangedRange?.(), count);
+			const wrappedDeps = {
+				width,
+				baseStyle,
+				hoverStyle: props.hoverStyle,
+				focusStyle: props.focusStyle,
+				hoverRegionId,
+				focusedRegionId
+			};
+			if (fixedRows) {
+				previousWrappedLayout = null;
+				previousWrappedDeps = null;
+				const top = currentScrollTopForRowCount(count);
+				const bottom = Math.min(count, top + Math.max(0, normalizeInt$8(props.h)));
+				for (let rowIndex = top; rowIndex < bottom; rowIndex++) {
+					rowStarts.set(rowIndex, rowIndex);
+					rowEnds.set(rowIndex, rowIndex + 1);
+					const result = layoutSourceRow(rowIndex, {
+						width,
+						baseStyle,
+						hoverRegionId,
+						focusedRegionId
+					});
+					if (result.cacheHit) cacheHit++;
+					else cacheMiss++;
+					const row = result.rows[0];
+					visualRows[rowIndex] = row;
+					regions.push(...row.hitRegions);
+				}
+			} else {
+				const incremental = tryUpdateWrappedLayoutFromChangedRange(count, sourceChangedRange, wrappedDeps);
+				if (incremental) {
+					if (perfEnabled) observability.framePerf.recordComponent({
+						name: "TTranscriptView",
+						id: instance?.uid == null ? void 0 : String(instance.uid),
+						phase: "layout",
+						durationMs: framePerfNow() - perfStartedAt,
+						itemCount: count,
+						renderedCount: incremental.state.visualRows.length,
+						cacheHit: incremental.cacheHit,
+						cacheMiss: incremental.cacheMiss,
+						width,
+						version: props.version
+					});
+					return incremental.state;
+				}
+				for (let rowIndex = 0; rowIndex < count; rowIndex++) {
+					rowStarts.set(rowIndex, visualRows.length);
+					const result = layoutSourceRow(rowIndex, {
+						width,
+						baseStyle,
+						hoverRegionId,
+						focusedRegionId
+					});
+					if (result.cacheHit) cacheHit++;
+					else cacheMiss++;
+					for (const visualRow of result.rows) {
+						visualRows.push(visualRow);
+						regions.push(...visualRow.hitRegions);
+					}
+					rowEnds.set(rowIndex, visualRows.length);
 				}
-				rowEnds.set(rowIndex, visualRows.length);
 			}
-			for (const rowIndex of rowLayoutCache.keys()) if (rowIndex >= count) rowLayoutCache.delete(rowIndex);
-			if (!warnedLargeFlattenedRows && globalThis.__VT_DEBUG_PERF__ && visualRows.length > 5e3) {
+			pruneRowLayoutCache(count);
+			if (!warnedLargeFlattenedRows && !fixedRows && globalThis.__VT_DEBUG_PERF__ && visualRows.length > 5e3) {
 				warnedLargeFlattenedRows = true;
 				console.warn("[vue-tui] TTranscriptView flattens all transcript rows; use TLogView or windowed source for large retained output.");
 			}
@@ -1958,18 +2203,28 @@ const TTranscriptView = defineComponent({
 				phase: "layout",
 				durationMs: framePerfNow() - perfStartedAt,
 				itemCount: count,
-				renderedCount: visualRows.length,
+				renderedCount: fixedRows ? cacheHit + cacheMiss : visualRows.length,
 				cacheHit,
 				cacheMiss,
 				width,
 				version: props.version
 			});
-			return {
+			const state = {
 				visualRows,
 				rowStarts,
 				rowEnds,
-				regions
+				regions,
+				fixedRows,
+				rowCount: count
 			};
+			if (fixedRows) {
+				previousWrappedLayout = null;
+				previousWrappedDeps = null;
+			} else {
+				previousWrappedLayout = state;
+				previousWrappedDeps = wrappedDeps;
+			}
+			return state;
 		});
 		const maxScrollTop = computed(() => Math.max(0, layoutState.value.visualRows.length - Math.max(0, normalizeInt$8(props.h))));
 		function setScrollTop(top) {
@@ -2007,7 +2262,12 @@ const TTranscriptView = defineComponent({
 			if (!region) return [];
 			const rows = layoutState.value.visualRows;
 			const indexes = [];
-			for (let i = 0; i < rows.length; i++) if (rows[i].hitRegions.some((candidate) => candidate.id === region.id)) indexes.push(i);
+			const top = layoutState.value.fixedRows ? clamp$9(currentScrollTop(), 0, rows.length) : 0;
+			const bottom = layoutState.value.fixedRows ? Math.min(rows.length, top + Math.max(0, normalizeInt$8(props.h))) : rows.length;
+			for (let i = top; i < bottom; i++) {
+				const row = getVisualRow(i);
+				if (row?.hitRegions.some((candidate) => candidate.id === region.id)) indexes.push(i);
+			}
 			return indexes;
 		}
 		function invalidateRegion(region) {
@@ -2034,7 +2294,7 @@ const TTranscriptView = defineComponent({
 			const bottom = Math.min(rows.length, top + Math.max(0, normalizeInt$8(props.h)));
 			const seen = new Set();
 			const regions = [];
-			for (let i = top; i < bottom; i++) for (const region of rows[i]?.hitRegions ?? []) {
+			for (let i = top; i < bottom; i++) for (const region of getVisualRow(i)?.hitRegions ?? []) {
 				if (seen.has(region.id)) continue;
 				seen.add(region.id);
 				regions.push(region);
@@ -2045,7 +2305,7 @@ const TTranscriptView = defineComponent({
 			const rows = layoutState.value.visualRows;
 			const top = clamp$9(currentScrollTop(), 0, rows.length);
 			const bottom = Math.min(rows.length, top + Math.max(0, normalizeInt$8(props.h)));
-			for (let i = top; i < bottom; i++) if (rows[i]?.hitRegions.some((region) => region.id === id)) return true;
+			for (let i = top; i < bottom; i++) if (getVisualRow(i)?.hitRegions.some((region) => region.id === id)) return true;
 			return false;
 		}
 		function reconcileActiveRegions() {
@@ -2102,8 +2362,8 @@ const TTranscriptView = defineComponent({
 		}
 		function scrollToRow(index, options) {
 			const rowIndex = clamp$9(normalizeInt$8(index), 0, Math.max(0, props.source.rowCount() - 1));
-			const visualIndex = layoutState.value.rowStarts.get(rowIndex) ?? 0;
-			const rowEnd = layoutState.value.rowEnds.get(rowIndex) ?? visualIndex + 1;
+			const visualIndex = layoutState.value.fixedRows ? rowIndex : layoutState.value.rowStarts.get(rowIndex) ?? 0;
+			const rowEnd = layoutState.value.fixedRows ? rowIndex + 1 : layoutState.value.rowEnds.get(rowIndex) ?? visualIndex + 1;
 			const viewportRows = Math.max(1, normalizeInt$8(props.h));
 			const rowHeight = Math.max(1, rowEnd - visualIndex);
 			let top = visualIndex;
@@ -2114,19 +2374,33 @@ const TTranscriptView = defineComponent({
 			setScrollTop(top);
 		}
 		function invalidateRow(index) {
-			const start = layoutState.value.rowStarts.get(index);
-			const end = layoutState.value.rowEnds.get(index);
+			const start = layoutState.value.fixedRows ? index : layoutState.value.rowStarts.get(index);
+			const end = layoutState.value.fixedRows ? index + 1 : layoutState.value.rowEnds.get(index);
 			if (start == null || end == null) return;
 			rowsRef.value?.invalidateRange(start, end);
 		}
 		function invalidateRange(start, end) {
 			const first = clamp$9(normalizeInt$8(start), 0, props.source.rowCount());
 			const last = clamp$9(normalizeInt$8(end), first, props.source.rowCount());
-			const visualStart = layoutState.value.rowStarts.get(first);
-			const visualEnd = layoutState.value.rowEnds.get(last - 1);
+			const visualStart = layoutState.value.fixedRows ? first : layoutState.value.rowStarts.get(first);
+			const visualEnd = layoutState.value.fixedRows ? last : layoutState.value.rowEnds.get(last - 1);
 			if (visualStart == null || visualEnd == null) return;
 			rowsRef.value?.invalidateRange(visualStart, visualEnd);
 		}
+		function virtualRowsChangedRange() {
+			const state = layoutState.value;
+			const changedRange = normalizedChangedRange(props.source.getChangedRange?.(), state.rowCount);
+			if (!changedRange) return null;
+			if (state.fixedRows || changedRange.end <= changedRange.start) return changedRange;
+			if (!canUseWrappedChangedRangeRepaint) return null;
+			const visualStart = state.rowStarts.get(changedRange.start);
+			const visualEnd = state.rowEnds.get(changedRange.end - 1);
+			if (visualStart == null || visualEnd == null) return null;
+			return {
+				start: visualStart,
+				end: visualEnd
+			};
+		}
 		expose({
 			scrollToBottom,
 			scrollToTop,
@@ -2209,7 +2483,19 @@ const TTranscriptView = defineComponent({
 			return text;
 		}
 		function getVisualRow(index) {
-			return layoutState.value.visualRows[index];
+			const state = layoutState.value;
+			const cached = state.visualRows[index];
+			if (cached || !state.fixedRows) return cached;
+			if (index < 0 || index >= state.visualRows.length) return void 0;
+			const result = layoutSourceRow(index, {
+				width: Math.max(1, Math.floor(props.w)),
+				baseStyle: props.style ?? defaultStyle.value,
+				hoverRegionId: hoveredRegion.value?.id ?? null,
+				focusedRegionId: focusedRegion.value?.id ?? null
+			});
+			const row = result.rows[0];
+			if (row) state.visualRows[index] = row;
+			return row;
 		}
 		function selectionTextForVisualRow(visualRow) {
 			if (!visualRow) return "";
@@ -2234,6 +2520,7 @@ const TTranscriptView = defineComponent({
 			zIndex: props.zIndex,
 			itemCount: layoutState.value.visualRows.length,
 			itemVersion: props.version,
+			itemChangedRange: virtualRowsChangedRange,
 			getItem: getVisualRow,
 			paintItem: paintVisualRow,
 			renderItemNodes: renderVisualRowNodes,
@@ -2632,12 +2919,128 @@ function wrapStyledSegmentsByCells(segments, width) {
 		});
 		rowCells += cells;
 	};
-	for (const seg of segments) forEachTextCellSegment(seg.text, (piece) => {
+	for (const seg of segments) {
+		const cells = textCellWidth(seg.text);
+		if (cells === seg.text.length) {
+			for (let i = 0; i < seg.text.length;) {
+				if (rowCells >= width) openRow();
+				const take = Math.min(width - rowCells, seg.text.length - i);
+				if (take <= 0) break;
+				row.push({
+					text: seg.text.slice(i, i + take),
+					cells: take,
+					style: seg.style
+				});
+				rowCells += take;
+				i += take;
+			}
+			continue;
+		}
+		forEachTextCellSegment(seg.text, (piece) => {
+			if (!piece.text || piece.cells <= 0) return;
+			pushWrappedPiece(piece.text, piece.cells, seg.style);
+		});
+	}
+	return rows;
+}
+function countWrappedTextRows(text, width) {
+	width = Math.max(1, Math.floor(width));
+	if (!text) return 1;
+	const cells = textCellWidth(text);
+	if (cells <= 0) return 1;
+	if (cells === text.length) return Math.max(1, Math.ceil(cells / width));
+	let rows = 1;
+	let rowCells = 0;
+	forEachTextCellSegment(text, (piece) => {
 		if (!piece.text || piece.cells <= 0) return;
-		pushWrappedPiece(piece.text, piece.cells, seg.style);
+		const pieceCells = piece.cells;
+		if (rowCells > 0 && rowCells + pieceCells > width) {
+			rows++;
+			rowCells = 0;
+		}
+		if (pieceCells > width) {
+			let remaining = pieceCells;
+			while (remaining > 0) {
+				if (rowCells >= width) {
+					rows++;
+					rowCells = 0;
+				}
+				const take = Math.min(width - rowCells, remaining);
+				rowCells += take;
+				remaining -= take;
+			}
+			return;
+		}
+		if (rowCells >= width) {
+			rows++;
+			rowCells = 0;
+		}
+		rowCells += pieceCells;
 	});
 	return rows;
 }
+function countWrappedPlainTextRows(text, width) {
+	width = Math.max(1, Math.floor(width));
+	if (!text) return 1;
+	let rows = 0;
+	let rowCells = 0;
+	let sawText = false;
+	forEachTextCellSegment(text, (piece) => {
+		if (!piece.text || piece.cells <= 0) return;
+		sawText = true;
+		const cells = piece.cells;
+		if (rowCells > 0 && rowCells + cells > width) {
+			rows++;
+			rowCells = 0;
+		}
+		rowCells += cells;
+		if (rowCells >= width) {
+			rows++;
+			rowCells = 0;
+		}
+	});
+	return Math.max(1, rows + (rowCells > 0 || !sawText ? 1 : 0));
+}
+function countAsciiAnsiTextCells(text) {
+	let cells = 0;
+	for (let i = 0; i < text.length; i++) {
+		const code = text.charCodeAt(i);
+		if (code > 127) return null;
+		if (code === 27) {
+			const next = text[i + 1];
+			if (next === "[") {
+				let j = i + 2;
+				while (j < text.length) {
+					const c = text.charCodeAt(j);
+					if (c >= 64 && c <= 126) break;
+					j++;
+				}
+				if (j >= text.length) return null;
+				i = j;
+				continue;
+			}
+			if (next === "]") {
+				let j = i + 2;
+				while (j < text.length) {
+					const c = text.charCodeAt(j);
+					if (c === 7) break;
+					if (c === 27 && text[j + 1] === "\\") {
+						j++;
+						break;
+					}
+					j++;
+				}
+				if (j >= text.length) return null;
+				i = j;
+				continue;
+			}
+			return null;
+		}
+		if (code <= 31 || code === 127) return null;
+		cells++;
+	}
+	return cells;
+}
 const TLogView = defineComponent({
 	name: "TLogView",
 	props: {
@@ -2806,6 +3209,7 @@ const TLogView = defineComponent({
 		const renderLineCache = new Map();
 		const wrapLineCache = new Map();
 		const ansiLineCache = new Map();
+		const ansiTextCache = new Map();
 		const ansiWrapCache = new Map();
 		const ansiRowCache = new Map();
 		const linkifyLineCache = new Map();
@@ -2946,6 +3350,9 @@ const TLogView = defineComponent({
 				linkKey
 			]);
 		}
+		function ansiTextCacheKey(key) {
+			return JSON.stringify(["ansi-text", key]);
+		}
 		function linkifyLineCacheKey(key, baseStyleKey, linkKey, optionsKey) {
 			return JSON.stringify([
 				"linkify-line",
@@ -3014,6 +3421,12 @@ const TLogView = defineComponent({
 			const entries = Array.from(ansiLineCache.values()).sort((a, b) => a.touchedAt - b.touchedAt);
 			for (const entry of entries.slice(0, ansiLineCache.size - max)) ansiLineCache.delete(entry.key);
 		}
+		function trimAnsiTextCache() {
+			const max = DEFAULT_LOG_RENDER_CACHE_SIZE;
+			if (ansiTextCache.size <= max) return;
+			const entries = Array.from(ansiTextCache.values()).sort((a, b) => a.touchedAt - b.touchedAt);
+			for (const entry of entries.slice(0, ansiTextCache.size - max)) ansiTextCache.delete(entry.key);
+		}
 		function trimAnsiWrapCache() {
 			const max = DEFAULT_LOG_WRAP_CACHE_SIZE;
 			if (ansiWrapCache.size <= max) return;
@@ -3048,6 +3461,7 @@ const TLogView = defineComponent({
 			renderLineCache.clear();
 			wrapLineCache.clear();
 			ansiLineCache.clear();
+			ansiTextCache.clear();
 			ansiWrapCache.clear();
 			ansiRowCache.clear();
 			linkifyLineCache.clear();
@@ -3125,6 +3539,23 @@ const TLogView = defineComponent({
 			});
 			return segments;
 		}
+		function ansiPlainTextForLine(index, count) {
+			if (index < 0 || index >= count) return "";
+			const rawKey = lineKey(index);
+			const key = ansiTextCacheKey(rawKey);
+			const cached = ansiTextCache.get(key);
+			if (cached) {
+				cached.touchedAt = ++cacheClock;
+				return cached.value;
+			}
+			const text = sanitizeAnsiInlineText(props.source.getLine(index));
+			ansiTextCache.set(key, {
+				key,
+				value: text,
+				touchedAt: ++cacheClock
+			});
+			return text;
+		}
 		function ansiWrappedRowsForLine(index, count, width, baseStyle, baseStyleKey, linkKey = linkStyleCacheKey()) {
 			if (index < 0 || index >= count) return [[]];
 			width = Math.max(1, Math.floor(width));
@@ -3481,8 +3912,8 @@ const TLogView = defineComponent({
 			lineMatches.push(matchIndex);
 			invalidateSearchMarkers();
 		}
-		function searchableTextForLine(index, count, baseStyle, baseStyleKey) {
-			if (props.ansi) return ansiSegmentsForLine(index, count, baseStyle, baseStyleKey).map((seg) => seg.text).join("");
+		function searchableTextForLine(index, count) {
+			if (props.ansi) return ansiPlainTextForLine(index, count);
 			return sanitizeInlineText(props.source.getLine(index));
 		}
 		function normalizeSearchResultPreviewWidth(value) {
@@ -3495,8 +3926,8 @@ const TLogView = defineComponent({
 			if (!Number.isFinite(n)) return DEFAULT_SEARCH_RESULTS_CONTEXT_CELLS;
 			return Math.max(0, n);
 		}
-		function previewForMatch(match, count, baseStyle, baseStyleKey, options) {
-			const text = searchableTextForLine(match.index, count, baseStyle, baseStyleKey);
+		function previewForMatch(match, count, options) {
+			const text = searchableTextForLine(match.index, count);
 			const totalCells = textCellWidth(text);
 			const matchCells = Math.max(1, match.endCell - match.startCell);
 			const previewWidth = Math.max(options.previewWidth, matchCells);
@@ -3526,7 +3957,7 @@ const TLogView = defineComponent({
 				matchEndCell
 			};
 		}
-		function cachedLineSearchMatches(index, count, search, baseStyle, baseStyleKey) {
+		function cachedLineSearchMatches(index, count, search) {
 			const rawKey = lineKey(index);
 			const key = searchLineCacheKey(rawKey, search.key);
 			const cached = searchLineCache.get(key);
@@ -3534,7 +3965,7 @@ const TLogView = defineComponent({
 				cached.touchedAt = ++cacheClock;
 				return cached.matches;
 			}
-			const matches = search.findLineMatches(searchableTextForLine(index, count, baseStyle, baseStyleKey));
+			const matches = search.findLineMatches(searchableTextForLine(index, count));
 			searchLineCache.set(key, {
 				key,
 				matches,
@@ -3542,9 +3973,9 @@ const TLogView = defineComponent({
 			});
 			return matches;
 		}
-		function scanSearchLine(index, count, search, baseStyle, baseStyleKey, maxMatches, absoluteBase) {
+		function scanSearchLine(index, count, search, maxMatches, absoluteBase) {
 			if (searchMatches.length >= maxMatches) return;
-			const lineMatches = cachedLineSearchMatches(index, count, search, baseStyle, baseStyleKey);
+			const lineMatches = cachedLineSearchMatches(index, count, search);
 			for (const match of lineMatches) {
 				if (searchMatches.length >= maxMatches) return;
 				addSearchMatch({
@@ -3572,11 +4003,9 @@ const TLogView = defineComponent({
 			const count = lineCount();
 			const maxMatches = maxSearchMatches();
 			const absoluteBase = firstLineIndex();
-			const base = props.style ?? defaultStyle.value;
-			const baseStyleKey = styleCacheKey(base);
 			let scanned = 0;
 			while (searchCursor < count && searchMatches.length < maxMatches && (scanned === 0 || ctx.now() - started < budget)) {
-				scanSearchLine(searchCursor, count, compiledSearch, base, baseStyleKey, maxMatches, absoluteBase);
+				scanSearchLine(searchCursor, count, compiledSearch, maxMatches, absoluteBase);
 				searchCursor++;
 				scanned++;
 			}
@@ -3601,6 +4030,7 @@ const TLogView = defineComponent({
 				plane: plane.value,
 				reason: "data"
 			});
+			trimAnsiTextCache();
 			trimSearchLineCache();
 		}
 		function requestSearchScan() {
@@ -3846,14 +4276,22 @@ const TLogView = defineComponent({
 			}
 			if (count > visualIndexLineCount) appendEstimatedVisualLines(visualIndexLineCount, count);
 		}
-		function measureVisualLine(index) {
+		function measureVisualLine(index, options) {
 			ensureVisualIndex();
 			if (index < 0 || index >= visualIndexLineCount) return 0;
 			const key = lineKey(index);
 			if (visualKeys[index] === key) return 0;
-			const base = props.style ?? defaultStyle.value;
-			const rows = props.ansi ? ansiWrappedRowsForLine(index, visualIndexLineCount, visualIndexWidth, base, styleCacheKey(base)) : wrappedRowsForLine(index, visualIndexLineCount, visualIndexWidth);
-			const nextCount = Math.max(1, rows.length);
+			let nextCount;
+			if (options?.countOnly === true) if (props.ansi) {
+				const raw = props.source.getLine(index);
+				const asciiCells = countAsciiAnsiTextCells(raw);
+				nextCount = asciiCells == null ? countWrappedTextRows(ansiPlainTextForLine(index, visualIndexLineCount), visualIndexWidth) : Math.max(1, Math.ceil(asciiCells / visualIndexWidth));
+			} else nextCount = countWrappedPlainTextRows(sanitizeInlineText(props.source.getLine(index)), visualIndexWidth);
+			else {
+				const base = props.style ?? defaultStyle.value;
+				const rows = props.ansi ? ansiWrappedRowsForLine(index, visualIndexLineCount, visualIndexWidth, base, styleCacheKey(base)) : wrappedRowsForLine(index, visualIndexLineCount, visualIndexWidth);
+				nextCount = Math.max(1, rows.length);
+			}
 			const prevCount = visualCounts[index] ?? 1;
 			if (nextCount !== prevCount) {
 				visualCounts[index] = nextCount;
@@ -3896,6 +4334,7 @@ const TLogView = defineComponent({
 			if (visualMeasureCursor >= target) {
 				syncVisualIndexStatus();
 				emitVisualIndex();
+				trimAnsiTextCache();
 				return;
 			}
 			const started = ctx.now();
@@ -3907,7 +4346,7 @@ const TLogView = defineComponent({
 				const effectiveTop = currentScrollTop() + topAdjustment;
 				const start = visualStartForLine(index);
 				const prevCount = visualCounts[index] ?? 1;
-				const delta = measureVisualLine(index);
+				const delta = measureVisualLine(index, { countOnly: true });
 				if (delta !== 0 && effectiveTop >= start + prevCount) topAdjustment += delta;
 				visualMeasureCursor++;
 				measuredLineCount = visualMeasureCursor;
@@ -3940,6 +4379,7 @@ const TLogView = defineComponent({
 			}
 			syncVisualIndexStatus();
 			emitVisualIndex();
+			trimAnsiTextCache();
 		}
 		function requestVisualIndexMeasurement(restartFrom = measuredLineCount) {
 			if (!props.wrap) {
@@ -3953,6 +4393,7 @@ const TLogView = defineComponent({
 			if (measuredLineCount >= target) {
 				syncVisualIndexStatus();
 				emitVisualIndex();
+				trimAnsiTextCache();
 				return;
 			}
 			const generation = ++visualMeasureGeneration;
@@ -4490,7 +4931,7 @@ const TLogView = defineComponent({
 				if (options?.emitScroll) emitScroll(clampedTop);
 				return true;
 			}
-			const scrollPlan = !props.wrap ? prepareUnsafeFullRowScroll({
+			const scrollPlan = prepareUnsafeFullRowScroll({
 				render,
 				plane: plane.value,
 				rect: r,
@@ -4501,7 +4942,7 @@ const TLogView = defineComponent({
 				isClipped: isClipped(),
 				hasPendingDirtyRows: Boolean(dirtyRowsHint?.length),
 				strategy
-			}) : null;
+			});
 			if (scrollPlan) {
 				const rows = options?.extraDirtyRows?.length ? [...scrollPlan.exposedRows, ...options.extraDirtyRows] : scrollPlan.exposedRows;
 				if (markRowsDirty(rows)) {
@@ -4981,14 +5422,12 @@ const TLogView = defineComponent({
 				match: copySearchMatch(match)
 			}));
 			const count = lineCount();
-			const base = props.style ?? defaultStyle.value;
-			const baseStyleKey = styleCacheKey(base);
 			const previewWidth = normalizeSearchResultPreviewWidth(options?.previewWidth);
 			const contextCells = normalizeSearchResultContextCells(options?.contextCells);
 			return searchMatches.slice(offset, offset + limit).map((match, index) => ({
 				matchIndex: offset + index,
 				match: copySearchMatch(match),
-				preview: previewForMatch(match, count, base, baseStyleKey, {
+				preview: previewForMatch(match, count, {
 					previewWidth,
 					contextCells
 				})