@draht/tui 2026.3.2-7 → 2026.3.2-9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -14
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @draht/tui
|
|
2
2
|
|
|
3
3
|
Minimal terminal UI framework with differential rendering and synchronized output for flicker-free interactive CLI applications.
|
|
4
4
|
|
|
@@ -16,7 +16,7 @@ Minimal terminal UI framework with differential rendering and synchronized outpu
|
|
|
16
16
|
## Quick Start
|
|
17
17
|
|
|
18
18
|
```typescript
|
|
19
|
-
import { TUI, Text, Editor, ProcessTerminal } from "@
|
|
19
|
+
import { TUI, Text, Editor, ProcessTerminal } from "@draht/tui";
|
|
20
20
|
|
|
21
21
|
// Create terminal
|
|
22
22
|
const terminal = new ProcessTerminal();
|
|
@@ -141,7 +141,7 @@ The TUI appends a full SGR reset and OSC 8 reset at the end of each rendered lin
|
|
|
141
141
|
Components that display a text cursor and need IME (Input Method Editor) support should implement the `Focusable` interface:
|
|
142
142
|
|
|
143
143
|
```typescript
|
|
144
|
-
import { CURSOR_MARKER, type Component, type Focusable } from "@
|
|
144
|
+
import { CURSOR_MARKER, type Component, type Focusable } from "@draht/tui";
|
|
145
145
|
|
|
146
146
|
class MyInput implements Component, Focusable {
|
|
147
147
|
focused: boolean = false; // Set by TUI when focus changes
|
|
@@ -165,7 +165,7 @@ This enables IME candidate windows to appear at the correct position for CJK inp
|
|
|
165
165
|
**Container components with embedded inputs:** When a container component (dialog, selector, etc.) contains an `Input` or `Editor` child, the container must implement `Focusable` and propagate the focus state to the child:
|
|
166
166
|
|
|
167
167
|
```typescript
|
|
168
|
-
import { Container, type Focusable, Input } from "@
|
|
168
|
+
import { Container, type Focusable, Input } from "@draht/tui";
|
|
169
169
|
|
|
170
170
|
class SearchDialog extends Container implements Focusable {
|
|
171
171
|
private searchInput: Input;
|
|
@@ -512,7 +512,7 @@ Supported formats: PNG, JPEG, GIF, WebP. Dimensions are parsed from the image he
|
|
|
512
512
|
Supports both slash commands and file paths.
|
|
513
513
|
|
|
514
514
|
```typescript
|
|
515
|
-
import { CombinedAutocompleteProvider } from "@
|
|
515
|
+
import { CombinedAutocompleteProvider } from "@draht/tui";
|
|
516
516
|
|
|
517
517
|
const provider = new CombinedAutocompleteProvider(
|
|
518
518
|
[
|
|
@@ -537,7 +537,7 @@ editor.setAutocompleteProvider(provider);
|
|
|
537
537
|
Use `matchesKey()` with the `Key` helper for detecting keyboard input (supports Kitty keyboard protocol):
|
|
538
538
|
|
|
539
539
|
```typescript
|
|
540
|
-
import { matchesKey, Key } from "@
|
|
540
|
+
import { matchesKey, Key } from "@draht/tui";
|
|
541
541
|
|
|
542
542
|
if (matchesKey(data, Key.ctrl("c"))) {
|
|
543
543
|
process.exit(0);
|
|
@@ -595,7 +595,7 @@ interface Terminal {
|
|
|
595
595
|
## Utilities
|
|
596
596
|
|
|
597
597
|
```typescript
|
|
598
|
-
import { visibleWidth, truncateToWidth, wrapTextWithAnsi } from "@
|
|
598
|
+
import { visibleWidth, truncateToWidth, wrapTextWithAnsi } from "@draht/tui";
|
|
599
599
|
|
|
600
600
|
// Get visible width of string (ignoring ANSI codes)
|
|
601
601
|
const width = visibleWidth("\x1b[31mHello\x1b[0m"); // 5
|
|
@@ -620,8 +620,8 @@ When creating custom components, **each line returned by `render()` must not exc
|
|
|
620
620
|
Use `matchesKey()` with the `Key` helper for keyboard input:
|
|
621
621
|
|
|
622
622
|
```typescript
|
|
623
|
-
import { matchesKey, Key, truncateToWidth } from "@
|
|
624
|
-
import type { Component } from "@
|
|
623
|
+
import { matchesKey, Key, truncateToWidth } from "@draht/tui";
|
|
624
|
+
import type { Component } from "@draht/tui";
|
|
625
625
|
|
|
626
626
|
class MyInteractiveComponent implements Component {
|
|
627
627
|
private selectedIndex = 0;
|
|
@@ -656,8 +656,8 @@ class MyInteractiveComponent implements Component {
|
|
|
656
656
|
Use the provided utilities to ensure lines fit:
|
|
657
657
|
|
|
658
658
|
```typescript
|
|
659
|
-
import { visibleWidth, truncateToWidth } from "@
|
|
660
|
-
import type { Component } from "@
|
|
659
|
+
import { visibleWidth, truncateToWidth } from "@draht/tui";
|
|
660
|
+
import type { Component } from "@draht/tui";
|
|
661
661
|
|
|
662
662
|
class MyComponent implements Component {
|
|
663
663
|
private text: string;
|
|
@@ -743,7 +743,7 @@ npx tsx test/chat-simple.ts
|
|
|
743
743
|
|
|
744
744
|
```bash
|
|
745
745
|
# Install dependencies (from monorepo root)
|
|
746
|
-
|
|
746
|
+
bun install
|
|
747
747
|
|
|
748
748
|
# Run type checking
|
|
749
749
|
npm run check
|
|
@@ -754,8 +754,8 @@ npx tsx test/chat-simple.ts
|
|
|
754
754
|
|
|
755
755
|
### Debug logging
|
|
756
756
|
|
|
757
|
-
Set `
|
|
757
|
+
Set `DRAHT_TUI_WRITE_LOG` to capture the raw ANSI stream written to stdout.
|
|
758
758
|
|
|
759
759
|
```bash
|
|
760
|
-
|
|
760
|
+
DRAHT_TUI_WRITE_LOG=/tmp/tui-ansi.log npx tsx test/chat-simple.ts
|
|
761
761
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draht/tui",
|
|
3
|
-
"version": "2026.3.2-
|
|
3
|
+
"version": "2026.3.2-9",
|
|
4
4
|
"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"repository": {
|
|
33
33
|
"type": "git",
|
|
34
|
-
"url": "git+https://github.com/
|
|
34
|
+
"url": "git+https://github.com/draht-dev/draht.git",
|
|
35
35
|
"directory": "packages/tui"
|
|
36
36
|
},
|
|
37
37
|
"engines": {
|