@simon_he/vue-tui 1.0.0 → 1.0.2

package/README.md

@@ -1,18 +1,47 @@
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./docs/public/brand/vue-tui-logo-on-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="./docs/public/brand/vue-tui-logo-on-light.svg">
+    <img alt="Vue TUI" src="./docs/public/brand/vue-tui-logo-on-light.svg" width="360">
+  </picture>
+</p>
+
 # @simon_he/vue-tui
 
-Vue TUI is a Vue 3 terminal UI toolkit for building terminal-style interfaces that can render in a browser or in a real CLI. It gives you Vue components, terminal cell rendering, event dispatch, markdown rendering, and high-throughput primitives for lists, logs, and streaming transcripts.
+[![npm version](https://img.shields.io/npm/v/@simon_he/vue-tui?style=flat-square)](https://www.npmjs.com/package/@simon_he/vue-tui)
+[![npm downloads](https://img.shields.io/npm/dm/@simon_he/vue-tui?style=flat-square)](https://www.npmjs.com/package/@simon_he/vue-tui)
+[![CI](https://github.com/Simon-He95/vue-tui/actions/workflows/ci.yml/badge.svg)](https://github.com/Simon-He95/vue-tui/actions/workflows/ci.yml)
+[![Runtime compatibility](https://github.com/Simon-He95/vue-tui/actions/workflows/runtime-compat.yml/badge.svg)](https://github.com/Simon-He95/vue-tui/actions/workflows/runtime-compat.yml)
+[![Security](https://github.com/Simon-He95/vue-tui/actions/workflows/security.yml/badge.svg)](https://github.com/Simon-He95/vue-tui/actions/workflows/security.yml)
+![TypeScript types](https://img.shields.io/npm/types/@simon_he/vue-tui?style=flat-square)
+![Node version](https://img.shields.io/node/v/@simon_he/vue-tui?style=flat-square)
+[![MIT License](https://img.shields.io/github/license/Simon-He95/vue-tui?style=flat-square)](./license)
+
+[Docs](https://vue-tui.pages.dev/) | [npm](https://www.npmjs.com/package/@simon_he/vue-tui) | [GitHub](https://github.com/Simon-He95/vue-tui) | [Issues](https://github.com/Simon-He95/vue-tui/issues)
+
+Vue TUI is a Vue 3 terminal UI toolkit for building terminal-style interfaces that render to browser DOM, real CLI stdout, and headless tests.
+
+Use it to build browser terminal dashboards, Vue-powered CLI apps, streaming markdown transcripts, log viewers, virtual lists, and AI agent consoles with one shared component model.
+
+## Why Vue TUI?
+
+- **Vue component model for terminal UIs**: build with `TerminalProvider`, `TBox`, `TInput`, `TList`, `TTable`, and more.
+- **Browser + CLI renderers**: render the same UI model to browser DOM or real stdout.
+- **High-throughput surfaces**: virtual lists, append-only logs, streaming markdown, and agent transcripts.
+- **Clear host boundaries**: browser-safe root entrypoint, CLI-only APIs under `/cli`, sanitized links, and explicit host permissions.
+
+## Agent UI Showcase
+
+A real agent console built on `@simon_he/vue-tui` can stream agent output, markdown content, tool-call status, and input chrome in one terminal surface.
 
-Use it when you want:
+[![Agent console rendering built with vue-tui](./docs/public/agent-console-rendering-poster.png)](./docs/public/agent-console-rendering.mp4)
 
-- Browser-hosted terminal interfaces, dashboards, demos, and playgrounds.
-- CLI apps that use Vue component composition instead of imperative stdout drawing.
-- Shared UI code that can run against a DOM renderer, a stdout renderer, or headless tests.
-- Large terminal surfaces such as virtual lists, append-only logs, markdown transcripts, and agent console UIs.
+[Watch the rendering demo](./docs/public/agent-console-rendering.mp4)
 
 ## Install
 
 ```bash
-pnpm add @simon_he/vue-tui@rc vue
+pnpm add @simon_he/vue-tui vue
 ```
 
 Vue is a peer dependency. The current package supports Vue `>=3.3.0 <4`.
@@ -217,19 +246,25 @@ This table is a category overview. The generated API reference for root, `/vue`,
 
 ## Documentation
 
-| Page                                                             | Purpose                                                              |
-| ---------------------------------------------------------------- | -------------------------------------------------------------------- |
-| [Docs home](./docs/index.md)                                     | Product overview and reading path                                    |
-| [Examples index](./docs/examples.md)                             | Browser, terminal, and smoke example commands                        |
-| [Core API](./docs/api.md)                                        | Terminal, renderer, events, runtime, planes, and scheduler contracts |
-| [Performance](./docs/performance.md)                             | Practical performance guidance                                       |
-| [Benchmarks](./docs/benchmarks.md)                               | Release benchmark budgets, sample results, and comparison boundaries |
-| [OpenTUI Solid comparison](./docs/compare-opentui-solid.md)      | Same-scenario comparison protocol and public claim boundaries        |
-| [High-throughput rendering](./docs/high-throughput-rendering.md) | Scheduler, dirty rows, mailbox, log, and renderer architecture       |
-| [Component acceptance](./docs/components-acceptance.md)          | Release readiness checks for component API and behavior              |
-| [Agent Console](./docs/agent-console.md)                         | Streaming transcript example stack                                   |
-| [Release candidate](./docs/release-candidate.md)                 | 1.0 RC validation, package export checks, and migration notes        |
-| [Security policy](./SECURITY.md)                                 | Vulnerability reporting and terminal permission boundaries           |
+| Page                                                               | Purpose                                                              |
+| ------------------------------------------------------------------ | -------------------------------------------------------------------- |
+| [Docs home](./docs/index.md)                                       | Product overview and reading path                                    |
+| [Vue Terminal UI](./docs/guide/vue-terminal-ui.md)                 | English landing page for terminal-style Vue interfaces               |
+| [Vue CLI UI](./docs/guide/vue-cli-ui.md)                           | CLI app model with Vue component composition                         |
+| [CLI stdout renderer](./docs/guide/cli-stdout-renderer.md)         | Stdout renderer, stdin driver, cleanup, and terminal output          |
+| [Terminal log viewer](./docs/guide/terminal-log-viewer.md)         | Append-only logs, retained windows, wrapping, links, and search      |
+| [Markdown transcripts](./docs/guide/markdown-transcript.md)        | Static and streaming markdown transcript rendering                   |
+| [Examples index](./docs/examples.md)                               | Browser, terminal, and smoke example commands                        |
+| [Core API](./docs/api.md)                                          | Terminal, renderer, events, runtime, planes, and scheduler contracts |
+| [Terminal UI best practices](./docs/terminal-ui-best-practices.md) | Cell layout, input focus, render invalidation, transcripts, tests    |
+| [Performance](./docs/performance.md)                               | Practical performance guidance                                       |
+| [Benchmarks](./docs/benchmarks.md)                                 | Release benchmark budgets, sample results, and comparison boundaries |
+| [OpenTUI Solid comparison](./docs/compare-opentui-solid.md)        | Same-scenario comparison protocol and public claim boundaries        |
+| [High-throughput rendering](./docs/high-throughput-rendering.md)   | Scheduler, dirty rows, mailbox, log, and renderer architecture       |
+| [Component acceptance](./docs/components-acceptance.md)            | Release readiness checks for component API and behavior              |
+| [Agent Console](./docs/agent-console.md)                           | Streaming transcript example stack                                   |
+| [Release candidate](./docs/release-candidate.md)                   | 1.0 RC validation, package export checks, and migration notes        |
+| [Security policy](./SECURITY.md)                                   | Vulnerability reporting and terminal permission boundaries           |
 
 Run the docs locally:
 

package/dist/{TSelect-BwJJbuTt.js → TSelect-DR0FomSu.js}

@@ -1,4 +1,4 @@
-import { getPlaneTerminal } from "./create-terminal-C2oiWFJU.js";
+import { getPlaneTerminal } from "./create-terminal-DBFNYr8f.js";
 import { charCellWidth, hasEncodedControl } from "./hyperlink-Bn02UXJb.js";
 import { DialogContextKey, EventZIndexContextKey, ImeAnchorContextKey, LayoutContextKey, RenderPlaneContextKey, RenderStackKey, TInputPluginsContextKey, TerminalContextKey, forEachTextCellSegment, graphemeRangeAt, hasTextWidthAsciiFastPath, intersectRect, padEndByCells$1 as padEndByCells, repeatChar, sanitizeInlineText, sanitizeTextBlock, sliceByCells, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useRenderStack, useTerminal, useTerminalNode, useVisibility, withTextWidthProvider, wrapByCells } from "./wheel-scroll-vBRaQ7p-.js";
 import { TView } from "./linkify-D_gzn9Xq.js";
@@ -4466,18 +4466,45 @@ function normalizeVisibleLimit$1(value) {
 function isCommandPaletteRowSelectable(item) {
 	return Boolean(item && item.kind !== "separator" && item.kind !== "group" && !item.disabled);
 }
-function substringMatcher(item, query) {
-	const q = query.trim().toLowerCase();
-	if (!q) return { score: 0 };
-	const labelRanges = computeCommandPaletteMatchRanges(item.label, q);
-	const detailRanges = item.detail ? computeCommandPaletteMatchRanges(item.detail, q) : [];
-	const keywordMatch = (item.keywords ?? []).some((keyword) => String(keyword ?? "").toLowerCase().includes(q));
-	if (!labelRanges.length && !detailRanges.length && !keywordMatch) return null;
-	return {
-		score: labelRanges.length ? 100 : detailRanges.length ? 50 : 10,
-		labelRanges,
-		detailRanges
-	};
+function defaultSubstringEntries(sourceItems, query) {
+	const q = query.trim();
+	if (!q) return sourceItems.map((item, sourceIndex) => ({
+		item,
+		sourceIndex,
+		match: { score: 0 }
+	}));
+	const needle = q.toLowerCase();
+	const labelMatches = [];
+	const detailMatches = [];
+	const keywordMatches = [];
+	for (let sourceIndex = 0; sourceIndex < sourceItems.length; sourceIndex++) {
+		const item = sourceItems[sourceIndex];
+		if (item.kind === "separator" || item.kind === "group") continue;
+		const label = String(item.label ?? "");
+		const detail = item.detail == null ? "" : String(item.detail);
+		if (label.toLowerCase().includes(needle)) {
+			labelMatches.push({
+				item,
+				sourceIndex,
+				match: { score: 100 }
+			});
+			continue;
+		}
+		if (detail.toLowerCase().includes(needle)) {
+			detailMatches.push({
+				item,
+				sourceIndex,
+				match: { score: 50 }
+			});
+			continue;
+		}
+		if ((item.keywords ?? []).some((keyword) => String(keyword ?? "").toLowerCase().includes(needle))) keywordMatches.push({
+			item,
+			sourceIndex,
+			match: { score: 10 }
+		});
+	}
+	return labelMatches.concat(detailMatches, keywordMatches);
 }
 function fuzzyMatcher(item, query) {
 	const q = query.trim().toLowerCase();
@@ -4732,20 +4759,26 @@ const TCommandPalette = defineComponent({
 		const filteredEntries = computed(() => {
 			const q = query.value.trim();
 			const sourceItems = props.itemsProvider ? providerItems.value ?? [] : props.items;
-			const matcher = props.matcher ?? (props.filterStrategy === "fuzzy" ? fuzzyMatcher : substringMatcher);
-			const entries = sourceItems.flatMap((item, sourceIndex) => {
-				if (item.kind === "separator" || item.kind === "group") return q ? [] : [{
-					item,
-					sourceIndex,
-					match: { score: 0 }
-				}];
+			if (!props.matcher && props.filterStrategy === "substring") return defaultSubstringEntries(sourceItems, q);
+			const matcher = props.matcher ?? fuzzyMatcher;
+			const entries = [];
+			for (let sourceIndex = 0; sourceIndex < sourceItems.length; sourceIndex++) {
+				const item = sourceItems[sourceIndex];
+				if (item.kind === "separator" || item.kind === "group") {
+					if (!q) entries.push({
+						item,
+						sourceIndex,
+						match: { score: 0 }
+					});
+					continue;
+				}
 				const match = matcher(item, q);
-				return match ? [{
+				if (match) entries.push({
 					item,
 					sourceIndex,
 					match
-				}] : [];
-			});
+				});
+			}
 			entries.sort((a, b) => b.match.score - a.match.score || a.sourceIndex - b.sourceIndex);
 			return entries;
 		});
@@ -5383,6 +5416,40 @@ const TSelect = defineComponent({
 		const typeaheadQuery = ref("");
 		const query = computed(() => props.query ?? innerQuery.value);
 		const options = computed(() => providerOptions.value ?? props.options);
+		function getOptionLabel(opt) {
+			return isOptionObject(opt) ? opt.label : opt;
+		}
+		function getOptionKind(opt) {
+			return isOptionObject(opt) ? opt.kind : void 0;
+		}
+		function getOptionValue(opt, index) {
+			if (props.valueMode === "index") return index;
+			if (props.valueMode === "option") return opt;
+			return isOptionObject(opt) && "value" in opt ? opt.value : getOptionLabel(opt);
+		}
+		const optionValueIndex = computed(() => {
+			if (props.valueMode === "index") return null;
+			const indexed = new Map();
+			const opts = options.value;
+			for (let index = 0; index < opts.length; index++) {
+				const value = getOptionValue(opts[index], index);
+				if (typeof value === "number" && value === 0) continue;
+				if (!indexed.has(value)) indexed.set(value, index);
+			}
+			return indexed;
+		});
+		function valuesEqual(a, b) {
+			return Object.is(a, b);
+		}
+		function modelIndex(value, useValueIndex = props.multiple) {
+			if (props.valueMode === "index") return normalizeModelIndex(value);
+			if (useValueIndex) {
+				const indexed = optionValueIndex.value;
+				const cached = indexed?.get(value);
+				if (cached != null) return cached;
+			}
+			return options.value.findIndex((opt, optIndex) => valuesEqual(getOptionValue(opt, optIndex), value));
+		}
 		const initialActive = (() => {
 			const max = Math.max(0, options.value.length - 1);
 			if (!props.multiple) {
@@ -5442,24 +5509,6 @@ const TSelect = defineComponent({
 			}
 			innerActive.value = clamp(active.value, 0, max);
 		});
-		function getOptionLabel(opt) {
-			return isOptionObject(opt) ? opt.label : opt;
-		}
-		function getOptionKind(opt) {
-			return isOptionObject(opt) ? opt.kind : void 0;
-		}
-		function getOptionValue(opt, index) {
-			if (props.valueMode === "index") return index;
-			if (props.valueMode === "option") return opt;
-			return isOptionObject(opt) && "value" in opt ? opt.value : getOptionLabel(opt);
-		}
-		function valuesEqual(a, b) {
-			return Object.is(a, b);
-		}
-		function modelIndex(value) {
-			if (props.valueMode === "index") return normalizeModelIndex(value);
-			return options.value.findIndex((opt, optIndex) => valuesEqual(getOptionValue(opt, optIndex), value));
-		}
 		function isOptionInteractive(opt) {
 			if (!opt) return false;
 			const kind = getOptionKind(opt);

package/dist/{TTree-DK_DQBYm.js → TTree-kzhlB5P0.js}

@@ -1,13 +1,13 @@
-import { TERMINAL_RENDER_PLANES, createTerminal, getPlaneTerminal, resetPlaneRowsForRender, scrollPlaneRows } from "./create-terminal-C2oiWFJU.js";
+import { TERMINAL_RENDER_PLANES, createTerminal, getPlaneTerminal, resetPlaneRowsForRender, scrollPlaneRows } from "./create-terminal-DBFNYr8f.js";
 import { sanitizeDomHref } from "./hyperlink-Bn02UXJb.js";
-import { DOM_RENDERER_CAPABILITIES, createDomRenderer } from "./dom-renderer-BqGijQID.js";
+import { DOM_RENDERER_CAPABILITIES, createDomRenderer } from "./dom-renderer-BniJSQyX.js";
 import { EventZIndexContextKey, ImeAnchorContextKey, LayoutContextKey, RenderStackKey, TInputPluginsContextKey, TPathPickerProviderContextKey, TerminalContextKey, VisibilityContextKey, applyWheelScroll, clearTextCaches, createWheelScrollState, forEachTextCellSegment, formatInlineCellLine, injectionKey, intersectRect, normalizeCellRect, padEndByCells$1 as padEndByCells, resetWheelScrollState, sanitizeInlineText, sanitizeTextBlock, sliceByCells, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility, withTextRenderPass } from "./wheel-scroll-vBRaQ7p-.js";
 import { TView, TuiThemeContextKey, createFrameMailbox, createTheme, defaultActiveStyle, defaultDimStyle, linkifyTextSegments, tuiDefaultTheme } from "./linkify-D_gzn9Xq.js";
 import { SUPPRESS_TERMINAL_POINTER_DOWN, SUPPRESS_TERMINAL_POINTER_MOVE, SUPPRESS_TERMINAL_POINTER_UP, createEventManager, createRuntime } from "./runtime-rfcZCyJq.js";
 import { createFramePerfStore, createTraceStore } from "./trace-CjzYeIxN.js";
 import { envFlag, envString, firstNonEmptyEnv } from "./env-Cl8qmNFN.js";
 import { createTerminalSelectionController } from "./terminal-selection-DBinO6p5.js";
-import { TBox, TInput, TRenderPlane, TText, clamp, fitCellText, mergeStyle, repeatToCells, resolveOverlayPlacement } from "./TSelect-BwJJbuTt.js";
+import { TBox, TInput, TRenderPlane, TText, clamp, fitCellText, mergeStyle, repeatToCells, resolveOverlayPlacement } from "./TSelect-DR0FomSu.js";
 import { framePerfNow, mergeFramePerfReason } from "./frame-perf-C6Xfg85O.js";
 import { computed, defineComponent, effectScope, getCurrentInstance, h, inject, nextTick, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, provide, ref, shallowReactive, shallowRef, toRef, watch, watchEffect } from "vue";
 
@@ -2991,6 +2991,17 @@ function rowKey$1(row, index, key) {
 function sameRowKey(a, b) {
 	return Object.is(a, b);
 }
+function selectedRowKeyIndex(keys) {
+	if (!keys?.length) return null;
+	const indexed = new Set();
+	for (let index = 0; index < keys.length; index++) {
+		if (!(index in keys)) continue;
+		const key = keys[index];
+		if (typeof key === "number" && key === 0) return null;
+		indexed.add(key);
+	}
+	return indexed;
+}
 const TTable = defineComponent({
 	name: "TTable",
 	props: {
@@ -3099,10 +3110,19 @@ const TTable = defineComponent({
 		const rowStyle = computed(() => mergeStyle(defaultStyle.value, theme.value.components.TTable?.rowStyle, props.style));
 		const selectedRowStyle = computed(() => mergeStyle(rowStyle.value, theme.value.components.TTable?.selectedStyle, props.selectedStyle));
 		const activeRowStyle = computed(() => mergeStyle(theme.value.components.TTable?.activeStyle, props.activeStyle));
+		const selectedRowKeysIndex = computed(() => selectedRowKeyIndex(props.selectedRowKeys));
 		const bodyRows = computed(() => {
 			const top = props.header ? 2 : 0;
 			return props.rows.slice(0, Math.max(0, props.h - top));
 		});
+		function isRowSelected(key) {
+			if (props.selectedRowKey !== void 0 && sameRowKey(key, props.selectedRowKey)) return true;
+			const selectedKeys = props.selectedRowKeys;
+			if (!selectedKeys?.length) return false;
+			const indexed = selectedRowKeysIndex.value;
+			if (indexed) return indexed.has(key);
+			return selectedKeys.some((candidate) => sameRowKey(candidate, key));
+		}
 		return () => {
 			const children = [];
 			if (props.header && props.h > 0) {
@@ -3169,7 +3189,7 @@ const TTable = defineComponent({
 				const row = bodyRows.value[index];
 				const y = (props.header ? 2 : 0) + index;
 				const key = rowKey$1(row, index, props.rowKey);
-				const selected = props.selectedRowKey !== void 0 && sameRowKey(key, props.selectedRowKey) || Boolean(props.selectedRowKeys?.some((candidate) => sameRowKey(candidate, key)));
+				const selected = isRowSelected(key);
 				const active = props.activeRowKey !== void 0 && sameRowKey(key, props.activeRowKey);
 				children.push(h(TView, {
 					key: `row:${String(key)}`,
@@ -3387,34 +3407,45 @@ const TDataTable = defineComponent({
 	},
 	setup(props, { emit }) {
 		const innerScrollTop = ref(0);
-		const indexedRows = computed(() => props.rows.map((row, originalIndex) => ({
-			row,
-			originalIndex
-		})));
+		const hasLocalFilter = computed(() => !props.manualFilter && props.filterable && Boolean(props.filter.trim()));
+		const hasLocalSort = computed(() => !props.manualSort && props.sortable && Boolean(props.sortBy));
+		const indexedRows = computed(() => {
+			if (!hasLocalFilter.value && !hasLocalSort.value) return null;
+			return props.rows.map((row, originalIndex) => ({
+				row,
+				originalIndex
+			}));
+		});
 		const filteredRows = computed(() => {
-			if (props.manualFilter) return indexedRows.value;
-			if (!props.filterable || !props.filter.trim()) return indexedRows.value;
+			const rows = indexedRows.value;
+			if (!rows) return null;
+			if (!hasLocalFilter.value) return rows;
 			const query = props.filter.trim().toLowerCase();
-			if (props.filterPredicate) return indexedRows.value.filter(({ row, originalIndex }) => props.filterPredicate(row, query, props.columns, originalIndex));
-			return indexedRows.value.filter(({ row, originalIndex }) => props.columns.some((column) => displayValue(column, row, originalIndex).toLowerCase().includes(query)));
+			if (props.filterPredicate) return rows.filter(({ row, originalIndex }) => props.filterPredicate(row, query, props.columns, originalIndex));
+			return rows.filter(({ row, originalIndex }) => props.columns.some((column) => displayValue(column, row, originalIndex).toLowerCase().includes(query)));
 		});
 		const sortedRows = computed(() => {
-			const rows = [...filteredRows.value];
-			if (props.manualSort || !props.sortable || !props.sortBy) return rows;
+			const rows = filteredRows.value;
+			if (!rows) return null;
+			if (!hasLocalSort.value) return rows;
+			const sorted = [...rows];
 			const column = props.columns.find((candidate) => candidate.key === props.sortBy);
-			rows.sort((a, b) => {
+			sorted.sort((a, b) => {
 				const result = props.sorter && column ? props.sorter(a.row, b.row, column) : compareValues(a.row[props.sortBy], b.row[props.sortBy]);
 				return props.sortDirection === "desc" ? -result : result;
 			});
-			return rows;
+			return sorted;
 		});
 		function nonNegativeInteger(value) {
 			const n = Math.floor(Number(value));
 			return Number.isFinite(n) ? Math.max(0, n) : 0;
 		}
 		const visibleRowCapacity = computed(() => Math.max(0, nonNegativeInteger(props.h) - 2));
+		function processedRowCount() {
+			return sortedRows.value?.length ?? props.rows.length;
+		}
 		function maxScrollTop$1() {
-			return Math.max(0, sortedRows.value.length - visibleRowCapacity.value);
+			return Math.max(0, processedRowCount() - visibleRowCapacity.value);
 		}
 		function clampScrollTop$1(value) {
 			return Math.min(maxScrollTop$1(), nonNegativeInteger(value));
@@ -3430,7 +3461,28 @@ const TDataTable = defineComponent({
 		watch(() => [normalizedScrollTop.value, requestedScrollTop.value], ([next, requested]) => {
 			if (next !== requested) setScrollTop(next);
 		}, { immediate: true });
-		const visibleRows = computed(() => sortedRows.value.slice(normalizedScrollTop.value, normalizedScrollTop.value + visibleRowCapacity.value));
+		function dataEntryAt(absoluteIndex) {
+			const rows = sortedRows.value;
+			if (rows) return rows[absoluteIndex];
+			const row = props.rows[absoluteIndex];
+			return row ? {
+				row,
+				originalIndex: absoluteIndex
+			} : void 0;
+		}
+		function originalIndexForAbsoluteIndex(absoluteIndex) {
+			return dataEntryAt(absoluteIndex)?.originalIndex ?? absoluteIndex;
+		}
+		const visibleRows = computed(() => {
+			const top = normalizedScrollTop.value;
+			const bottom = top + visibleRowCapacity.value;
+			const rows = sortedRows.value;
+			if (rows) return rows.slice(top, bottom);
+			return props.rows.slice(top, bottom).map((row, index) => ({
+				row,
+				originalIndex: top + index
+			}));
+		});
 		const tableRows = computed(() => visibleRows.value.map(({ row }) => row));
 		const activeAbsoluteIndex = ref(null);
 		const activeRowIdentity = ref(NO_ACTIVE_ROW);
@@ -3438,7 +3490,7 @@ const TDataTable = defineComponent({
 		const columns = computed(() => props.columns.map((column) => {
 			const format = column.format ? (value, row, visibleIndex) => {
 				const absoluteIndex = normalizedScrollTop.value + visibleIndex;
-				const originalIndex = sortedRows.value[absoluteIndex]?.originalIndex ?? absoluteIndex;
+				const originalIndex = originalIndexForAbsoluteIndex(absoluteIndex);
 				return column.format(value, row, originalIndex);
 			} : void 0;
 			if (!props.sortable || column.key !== props.sortBy) return format ? {
@@ -3454,7 +3506,7 @@ const TDataTable = defineComponent({
 		}));
 		function originalIndexAt(index) {
 			const absoluteIndex = normalizedScrollTop.value + index;
-			return sortedRows.value[absoluteIndex]?.originalIndex ?? absoluteIndex;
+			return originalIndexForAbsoluteIndex(absoluteIndex);
 		}
 		function dataTableRowKey(row, index) {
 			return rowKey(row, originalIndexAt(index), props.rowKey);
@@ -3472,18 +3524,42 @@ const TDataTable = defineComponent({
 			return new Set(props.selectedRowKey === void 0 ? [] : [props.selectedRowKey]);
 		}
 		const activeRowKey = computed(() => activeRowIdentity.value === NO_ACTIVE_ROW ? void 0 : activeRowIdentity.value);
-		watch(() => [props.rowKey, ...sortedRows.value.map((entry) => dataRowKey(entry))], () => {
+		const activeRawRowKey = computed(() => {
+			if (activeAbsoluteIndex.value == null || sortedRows.value) return NO_ACTIVE_ROW;
+			const index = activeAbsoluteIndex.value;
+			const row = props.rows[index];
+			return row ? rowKey(row, index, props.rowKey) : NO_ACTIVE_ROW;
+		});
+		function findDataIndexByKey(key) {
+			const rows = sortedRows.value;
+			if (rows) return rows.findIndex((entry) => Object.is(dataRowKey(entry), key));
+			return props.rows.findIndex((row, index) => Object.is(rowKey(row, index, props.rowKey), key));
+		}
+		watch(() => [
+			props.rowKey,
+			props.rows,
+			sortedRows.value,
+			activeRowIdentity.value
+		], () => {
 			if (activeRowIdentity.value === NO_ACTIVE_ROW) return;
-			const nextIndex = sortedRows.value.findIndex((entry) => Object.is(dataRowKey(entry), activeRowIdentity.value));
+			const nextIndex = findDataIndexByKey(activeRowIdentity.value);
 			if (nextIndex < 0) {
 				clearActiveRow();
 				return;
 			}
 			activeAbsoluteIndex.value = nextIndex;
 		});
+		watch(() => [props.rowKey, activeRawRowKey.value], ([, key]) => {
+			if (activeRowIdentity.value === NO_ACTIVE_ROW) return;
+			if (key === NO_ACTIVE_ROW) {
+				clearActiveRow();
+				return;
+			}
+			if (!Object.is(activeRowIdentity.value, key)) activeRowIdentity.value = key;
+		});
 		function setActiveAbsoluteIndex(absoluteIndex) {
-			const clamped = Math.max(0, Math.min(sortedRows.value.length - 1, absoluteIndex));
-			const entry = sortedRows.value[clamped];
+			const clamped = Math.max(0, Math.min(processedRowCount() - 1, absoluteIndex));
+			const entry = dataEntryAt(clamped);
 			if (!entry) {
 				clearActiveRow();
 				return null;
@@ -3550,7 +3626,7 @@ const TDataTable = defineComponent({
 			if (event.key === "Enter" || event.key === " ") {
 				const active = setActiveAbsoluteIndex(current);
 				if (!active) return;
-				const entry = sortedRows.value[active.dataIndex];
+				const entry = dataEntryAt(active.dataIndex);
 				if (!entry) return;
 				const visibleIndex = active.dataIndex - active.scrollTop;
 				commitSelection(entry, Math.max(0, Math.min(Math.max(0, visibleRowCapacity.value - 1), visibleIndex)), active.dataIndex);
@@ -6315,8 +6391,10 @@ const TLinkifyText = defineComponent({
 
 //#endregion
 //#region src/vue/components/TTree.ts
-function flattenTree(nodes, expanded, depth = 0, out = []) {
+function flattenTree(nodes, expanded, limit, depth = 0, out = []) {
+	if (out.length >= limit) return out;
 	for (const node of nodes) {
+		if (out.length >= limit) break;
 		const expandable = Boolean(node.children?.length);
 		const isExpanded = expanded.has(node.id);
 		out.push({
@@ -6325,10 +6403,14 @@ function flattenTree(nodes, expanded, depth = 0, out = []) {
 			expandable,
 			expanded: isExpanded
 		});
-		if (expandable && isExpanded) flattenTree(node.children, expanded, depth + 1, out);
+		if (expandable && isExpanded) flattenTree(node.children, expanded, limit, depth + 1, out);
 	}
 	return out;
 }
+function visibleRowLimit(height) {
+	const limit = Math.floor(height);
+	return Number.isFinite(limit) ? Math.max(0, limit) : 0;
+}
 const TTree = defineComponent({
 	name: "TTree",
 	props: {
@@ -6395,7 +6477,7 @@ const TTree = defineComponent({
 		const { defaultStyle } = useTerminal();
 		const baseStyle = computed(() => mergeStyle(defaultStyle.value, props.style));
 		const expandedSet = computed(() => new Set(props.expandedIds));
-		const rows = computed(() => flattenTree(props.nodes, expandedSet.value).slice(0, props.h));
+		const rows = computed(() => flattenTree(props.nodes, expandedSet.value, visibleRowLimit(props.h)));
 		function toggle(item) {
 			if (item.node.disabled || !item.expandable) return;
 			const ids = new Set(props.expandedIds);