@simon_he/vue-tui 1.0.0 → 1.0.2

package/dist/experimental.cjs

@@ -2533,6 +2533,13 @@ function normalizeInt(value) {
   const n = Math.floor(Number(value));
   return Number.isFinite(n) ? n : 0;
 }
+function normalizeChangedRange(range, count) {
+  if (!range)
+    return null;
+  const start = clamp3(normalizeInt(range.start), 0, count);
+  const end = clamp3(normalizeInt(range.end), start, count);
+  return { start, end };
+}
 function getWheelScrollInput2(e) {
   const deltaY = Number(e.deltaY ?? 0);
   const deltaMode = typeof e.deltaMode === "number" ? e.deltaMode : void 0;
@@ -2557,6 +2564,10 @@ var TVirtualRows = (0, import_vue10.defineComponent)({
     zIndex: { type: Number, default: 0 },
     itemCount: { type: Number, required: true },
     itemVersion: { type: Number, required: true },
+    itemChangedRange: {
+      type: Function,
+      default: void 0
+    },
     getItem: { type: Function, required: true },
     paintItem: {
       type: Function,
@@ -2756,6 +2767,23 @@ var TVirtualRows = (0, import_vue10.defineComponent)({
     function invalidateSelf(priority = "normal") {
       scheduler.invalidate({ priority, plane: plane.value, reason: "scroll" });
     }
+    function markScrollDamage(prevTop, nextTop, strategy = "auto") {
+      const r = normalizedRect();
+      const h14 = r.h;
+      const delta = nextTop - prevTop;
+      if (h14 <= 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 + h14 <= size.rows;
+      const canUseScrollPlane = strategy === "auto" && props.rowScrollMode === "unsafe-full-row" && rendererCapabilities.value.scrollOperations && ownsFullRows && withinTerminalRows && !isClipped() && Math.abs(delta) < h14 && !dirtyRowsHint?.length;
+      if (canUseScrollPlane) {
+        render.unsafeScrollPlaneRows(plane.value, r.y, r.y + h14, delta);
+        markRowsDirty(exposedRowsForDelta2(r.y, h14, delta));
+      } else {
+        markViewportDirty();
+      }
+    }
     function applyScrollTop(nextTop, options) {
       const r = normalizedRect();
       const h14 = r.h;
@@ -2776,16 +2804,7 @@ var TVirtualRows = (0, import_vue10.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 + h14 <= size.rows;
-      const canUseScrollPlane = (options?.strategy ?? "auto") === "auto" && props.rowScrollMode === "unsafe-full-row" && rendererCapabilities.value.scrollOperations && ownsFullRows && withinTerminalRows && !isClipped() && Math.abs(delta) < h14 && !dirtyRowsHint?.length;
-      if (canUseScrollPlane) {
-        render.unsafeScrollPlaneRows(plane.value, r.y, r.y + h14, delta);
-        markRowsDirty(exposedRowsForDelta2(r.y, h14, delta));
-      } else {
-        markViewportDirty();
-      }
+      markScrollDamage(prevTop, clampedTop, options?.strategy);
       if (options?.emitScroll)
         emitScroll(clampedTop);
       return true;
@@ -2852,8 +2871,11 @@ var TVirtualRows = (0, import_vue10.defineComponent)({
       invalidateSelf("normal");
     }
     function invalidateRange(start, end) {
+      markItemRangeDirty(start, end);
+    }
+    function markItemRangeDirty(start, end) {
       if (!hasPaintableViewport())
-        return;
+        return false;
       const r = normalizedRect();
       const { y: clipY } = clipOffsets();
       const top = currentScrollTop() + clipY;
@@ -2866,9 +2888,10 @@ var TVirtualRows = (0, import_vue10.defineComponent)({
           rows.push(y);
       }
       if (!rows.length)
-        return;
+        return true;
       markRowsDirty(rows);
       invalidateSelf("normal");
+      return true;
     }
     function invalidateIndex(index) {
       const n = normalizeInt(index);
@@ -3108,8 +3131,9 @@ var TVirtualRows = (0, import_vue10.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");
@@ -3133,7 +3157,7 @@ var TVirtualRows = (0, import_vue10.defineComponent)({
         () => absRect.value.w,
         () => absRect.value.h
       ],
-      () => {
+      (next, prev) => {
         resetWheelScrollState(wheelState);
         const nextTop = clampScrollTop(currentScrollTop());
         if (isScrollControlled()) {
@@ -3144,6 +3168,16 @@ var TVirtualRows = (0, import_vue10.defineComponent)({
         } 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");
       },
@@ -3171,7 +3205,6 @@ var TVirtualRows = (0, import_vue10.defineComponent)({
         absRect.value,
         fullRect.value,
         itemCount.value,
-        props.itemVersion,
         props.getItem,
         props.paintItem,
         props.selectionSpanText,
@@ -3260,8 +3293,11 @@ var EMPTY_LAYOUT = Object.freeze({
   visualRows: Object.freeze([]),
   rowStarts: /* @__PURE__ */ new Map(),
   rowEnds: /* @__PURE__ */ new Map(),
-  regions: Object.freeze([])
+  regions: Object.freeze([]),
+  fixedRows: false,
+  rowCount: 0
 });
+var MAX_KEYED_ROW_LAYOUT_CACHE_ENTRIES = 2048;
 function clamp4(n, min, max) {
   return Math.max(min, Math.min(max, n));
 }
@@ -3269,6 +3305,13 @@ function normalizeInt2(value) {
   const n = Math.floor(Number(value));
   return Number.isFinite(n) ? n : 0;
 }
+function normalizedChangedRange(range, count) {
+  if (!range)
+    return null;
+  const start = clamp4(normalizeInt2(range.start), 0, count);
+  const end = clamp4(normalizeInt2(range.end), start, count);
+  return { start, end };
+}
 function sourceSegmentsForRegion(row) {
   if (row.kind === "message")
     return row.segments;
@@ -3305,8 +3348,27 @@ 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;
 }
 var TTranscriptView = (0, import_vue11.defineComponent)({
   name: "TTranscriptView",
@@ -3356,6 +3418,10 @@ var TTranscriptView = (0, import_vue11.defineComponent)({
     const hoveredRegion = (0, import_vue11.ref)(null);
     const focusedRegion = (0, import_vue11.ref)(null);
     const rowLayoutCache = /* @__PURE__ */ new Map();
+    const keyedRowLayoutCache = /* @__PURE__ */ 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");
@@ -3363,14 +3429,181 @@ var TTranscriptView = (0, import_vue11.defineComponent)({
     function currentScrollTop() {
       return normalizeInt2(isScrollControlled() ? props.scrollTop : innerScrollTop.value);
     }
+    function currentScrollTopForRowCount(count) {
+      const viewportRows = Math.max(0, normalizeInt2(props.h));
+      const maxTop = Math.max(0, count - viewportRows);
+      return clamp4(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 = clamp4(currentScrollTop(), 0, visualRows.length);
+      const bottom = Math.min(visualRows.length, top + Math.max(0, normalizeInt2(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 = (0, import_vue11.computed)(() => {
       void 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, normalizeInt2(props.source.rowCount()));
       if (!count) {
         rowLayoutCache.clear();
+        keyedRowLayoutCache.clear();
+        previousWrappedLayout = null;
+        previousWrappedDeps = null;
         if (perfEnabled) {
           observability.framePerf.recordComponent({
             name: "TTranscriptView",
@@ -3387,7 +3620,10 @@ var TTranscriptView = (0, import_vue11.defineComponent)({
         }
         return EMPTY_LAYOUT;
       }
+      const fixedRows = props.wrap === false;
       const visualRows = [];
+      if (fixedRows)
+        visualRows.length = count;
       const rowStarts = /* @__PURE__ */ new Map();
       const rowEnds = /* @__PURE__ */ new Map();
       const regions = [];
@@ -3396,59 +3632,81 @@ var TTranscriptView = (0, import_vue11.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, normalizeInt2(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."
@@ -3461,14 +3719,22 @@ var TTranscriptView = (0, import_vue11.defineComponent)({
           phase: "layout",
           durationMs: framePerfNow() - perfStartedAt,
           itemCount: count,
-          renderedCount: visualRows.length,
+          renderedCount: fixedRows ? cacheHit + cacheMiss : visualRows.length,
           cacheHit,
           cacheMiss,
           width,
           version: props.version
         });
       }
-      return { visualRows, rowStarts, rowEnds, regions };
+      const state = { visualRows, rowStarts, rowEnds, regions, fixedRows, rowCount: count };
+      if (fixedRows) {
+        previousWrappedLayout = null;
+        previousWrappedDeps = null;
+      } else {
+        previousWrappedLayout = state;
+        previousWrappedDeps = wrappedDeps;
+      }
+      return state;
     });
     const maxScrollTop = (0, import_vue11.computed)(
       () => Math.max(0, layoutState.value.visualRows.length - Math.max(0, normalizeInt2(props.h)))
@@ -3517,8 +3783,11 @@ var TTranscriptView = (0, import_vue11.defineComponent)({
         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))
+      const top = layoutState.value.fixedRows ? clamp4(currentScrollTop(), 0, rows.length) : 0;
+      const bottom = layoutState.value.fixedRows ? Math.min(rows.length, top + Math.max(0, normalizeInt2(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;
@@ -3551,7 +3820,7 @@ var TTranscriptView = (0, import_vue11.defineComponent)({
       const seen = /* @__PURE__ */ new Set();
       const regions = [];
       for (let i = top; i < bottom; i++) {
-        for (const region of rows[i]?.hitRegions ?? []) {
+        for (const region of getVisualRow(i)?.hitRegions ?? []) {
           if (seen.has(region.id))
             continue;
           seen.add(region.id);
@@ -3565,7 +3834,7 @@ var TTranscriptView = (0, import_vue11.defineComponent)({
       const top = clamp4(currentScrollTop(), 0, rows.length);
       const bottom = Math.min(rows.length, top + Math.max(0, normalizeInt2(props.h)));
       for (let i = top; i < bottom; i++) {
-        if (rows[i]?.hitRegions.some((region) => region.id === id))
+        if (getVisualRow(i)?.hitRegions.some((region) => region.id === id))
           return true;
       }
       return false;
@@ -3632,8 +3901,8 @@ var TTranscriptView = (0, import_vue11.defineComponent)({
     }
     function scrollToRow(index, options) {
       const rowIndex = clamp4(normalizeInt2(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, normalizeInt2(props.h));
       const rowHeight = Math.max(1, rowEnd - visualIndex);
       let top = visualIndex;
@@ -3646,8 +3915,8 @@ var TTranscriptView = (0, import_vue11.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);
@@ -3655,12 +3924,27 @@ var TTranscriptView = (0, import_vue11.defineComponent)({
     function invalidateRange(start, end) {
       const first = clamp4(normalizeInt2(start), 0, props.source.rowCount());
       const last = clamp4(normalizeInt2(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,
@@ -3764,7 +4048,22 @@ var TTranscriptView = (0, import_vue11.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)
@@ -3792,6 +4091,7 @@ var TTranscriptView = (0, import_vue11.defineComponent)({
       zIndex: props.zIndex,
       itemCount: layoutState.value.visualRows.length,
       itemVersion: props.version,
+      itemChangedRange: virtualRowsChangedRange,
       getItem: getVisualRow,
       paintItem: paintVisualRow,
       renderItemNodes: renderVisualRowNodes,
@@ -4675,6 +4975,20 @@ function wrapStyledSegmentsByCells(segments, width) {
     rowCells += cells;
   };
   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;
@@ -4683,6 +4997,116 @@ function wrapStyledSegmentsByCells(segments, width) {
   }
   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;
+    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;
+}
 var TLogView = (0, import_vue12.defineComponent)({
   name: "TLogView",
   props: {
@@ -4821,6 +5245,7 @@ var TLogView = (0, import_vue12.defineComponent)({
     const renderLineCache = /* @__PURE__ */ new Map();
     const wrapLineCache = /* @__PURE__ */ new Map();
     const ansiLineCache = /* @__PURE__ */ new Map();
+    const ansiTextCache = /* @__PURE__ */ new Map();
     const ansiWrapCache = /* @__PURE__ */ new Map();
     const ansiRowCache = /* @__PURE__ */ new Map();
     const linkifyLineCache = /* @__PURE__ */ new Map();
@@ -4942,6 +5367,9 @@ var TLogView = (0, import_vue12.defineComponent)({
     function ansiLineCacheKey(key, baseStyleKey, linkKey) {
       return JSON.stringify(["ansi-line", key, baseStyleKey, linksEnabled() ? 1 : 0, linkKey]);
     }
+    function ansiTextCacheKey(key) {
+      return JSON.stringify(["ansi-text", key]);
+    }
     function linkifyLineCacheKey(key, baseStyleKey, linkKey, optionsKey) {
       return JSON.stringify(["linkify-line", key, baseStyleKey, linkKey, optionsKey]);
     }
@@ -5004,6 +5432,15 @@ var TLogView = (0, import_vue12.defineComponent)({
         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)
@@ -5059,6 +5496,7 @@ var TLogView = (0, import_vue12.defineComponent)({
       renderLineCache.clear();
       wrapLineCache.clear();
       ansiLineCache.clear();
+      ansiTextCache.clear();
       ansiWrapCache.clear();
       ansiRowCache.clear();
       linkifyLineCache.clear();
@@ -5144,6 +5582,24 @@ var TLogView = (0, import_vue12.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 [[]];
@@ -5539,10 +5995,9 @@ var TLogView = (0, import_vue12.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) {
@@ -5557,8 +6012,8 @@ var TLogView = (0, import_vue12.defineComponent)({
         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);
@@ -5593,7 +6048,7 @@ var TLogView = (0, import_vue12.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);
@@ -5601,9 +6056,7 @@ var TLogView = (0, import_vue12.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,
@@ -5611,10 +6064,10 @@ var TLogView = (0, import_vue12.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;
@@ -5644,19 +6097,9 @@ var TLogView = (0, import_vue12.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++;
       }
@@ -5677,6 +6120,7 @@ var TLogView = (0, import_vue12.defineComponent)({
       emitSearchMarkers(true);
       markViewportDirty();
       ctx.invalidate({ priority: "low", plane: plane.value, reason: "data" });
+      trimAnsiTextCache();
       trimSearchLineCache();
     }
     function requestSearchScan() {
@@ -5948,22 +6392,39 @@ var TLogView = (0, import_vue12.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;
@@ -6009,6 +6470,7 @@ var TLogView = (0, import_vue12.defineComponent)({
       if (visualMeasureCursor >= target) {
         syncVisualIndexStatus();
         emitVisualIndex();
+        trimAnsiTextCache();
         return;
       }
       const started = ctx.now();
@@ -6020,7 +6482,7 @@ var TLogView = (0, import_vue12.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++;
@@ -6056,6 +6518,7 @@ var TLogView = (0, import_vue12.defineComponent)({
       }
       syncVisualIndexStatus();
       emitVisualIndex();
+      trimAnsiTextCache();
     }
     function requestVisualIndexMeasurement(restartFrom = measuredLineCount) {
       if (!props.wrap) {
@@ -6069,6 +6532,7 @@ var TLogView = (0, import_vue12.defineComponent)({
       if (measuredLineCount >= target) {
         syncVisualIndexStatus();
         emitVisualIndex();
+        trimAnsiTextCache();
         return;
       }
       const generation = ++visualMeasureGeneration;
@@ -6661,7 +7125,7 @@ var TLogView = (0, import_vue12.defineComponent)({
           emitScroll(clampedTop);
         return true;
       }
-      const scrollPlan = !props.wrap ? prepareUnsafeFullRowScroll({
+      const scrollPlan = prepareUnsafeFullRowScroll({
         render,
         plane: plane.value,
         rect: r,
@@ -6672,7 +7136,7 @@ var TLogView = (0, import_vue12.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)) {
@@ -7237,14 +7701,12 @@ var TLogView = (0, import_vue12.defineComponent)({
         }));
       }
       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
         })