@valyrianjs/terminal 0.1.0 → 0.1.1
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 +22 -22
- package/docs/api-reference.md +103 -103
- package/docs/cookbook.md +23 -23
- package/docs/core-concepts.md +50 -50
- package/docs/getting-started.md +22 -22
- package/docs/interaction-model.md +55 -55
- package/docs/local-demo.md +10 -10
- package/docs/session-runtime.md +97 -97
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
# valyrianjs-terminal
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Terminal-first adapter for `valyrian.js`. It lets you render text UIs with its own primitives and, when needed, mount interactive sessions on top of `stdin` and `stdout`.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## What It Solves
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
- runtime
|
|
7
|
+
- terminal-first layout with `Screen`, `Box`, `View`, `Text`, `Table`, `Row`, and `Td`
|
|
8
|
+
- interactive primitives with `Input`, `Button`, `List`, and `ScrollView`
|
|
9
|
+
- static text rendering with `renderTerminal()`
|
|
10
|
+
- interactive runtime with `mountTerminal()`
|
|
11
11
|
|
|
12
|
-
##
|
|
12
|
+
## Installation
|
|
13
13
|
|
|
14
14
|
```bash
|
|
15
15
|
npm install valyrianjs-terminal valyrian.js
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
##
|
|
18
|
+
## Choose the Right Entrypoint
|
|
19
19
|
|
|
20
|
-
-
|
|
21
|
-
-
|
|
20
|
+
- Use `renderTerminal()` for snapshots, tests, or non-interactive output.
|
|
21
|
+
- Use `mountTerminal()` when you need focus, keyboard, mouse, clipboard, or writes to `stdout`.
|
|
22
22
|
|
|
23
|
-
##
|
|
23
|
+
## Minimal Example
|
|
24
24
|
|
|
25
25
|
```tsx
|
|
26
26
|
/** @jsx v */
|
|
@@ -48,21 +48,21 @@ const session = mountTerminal(() => (
|
|
|
48
48
|
session.focus("note");
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
##
|
|
51
|
+
## Docs Map
|
|
52
52
|
|
|
53
|
-
- `docs/getting-started.md` -
|
|
54
|
-
- `docs/core-concepts.md` -
|
|
55
|
-
- `docs/interaction-model.md` -
|
|
56
|
-
- `docs/session-runtime.md` - lifecycle
|
|
57
|
-
- `docs/cookbook.md` -
|
|
58
|
-
- `docs/api-reference.md` -
|
|
59
|
-
- `docs/local-demo.md` -
|
|
53
|
+
- `docs/getting-started.md` - first complete flow, from static rendering to an interactive session
|
|
54
|
+
- `docs/core-concepts.md` - mental model: ids, focus, hitboxes, plain output, ANSI, and cleanup
|
|
55
|
+
- `docs/interaction-model.md` - behavior of each primitive and interaction events
|
|
56
|
+
- `docs/session-runtime.md` - session lifecycle, streams, clipboard, coordinates, and runtime
|
|
57
|
+
- `docs/cookbook.md` - short recipes for concrete tasks
|
|
58
|
+
- `docs/api-reference.md` - reference for the public surface and published subpaths
|
|
59
|
+
- `docs/local-demo.md` - repo-local demo, not part of the published package
|
|
60
60
|
|
|
61
|
-
##
|
|
61
|
+
## Published Package Scope
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
The published package includes the compiled adapter in `dist/`, this documentation, and supporting metadata. Files in `examples/` live only in the repo and are not part of the distributed package.
|
|
64
64
|
|
|
65
|
-
##
|
|
65
|
+
## Local Development
|
|
66
66
|
|
|
67
67
|
```bash
|
|
68
68
|
bun test
|
package/docs/api-reference.md
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
1
|
# API Reference
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Reference for the actual public surface published by `valyrianjs-terminal`.
|
|
4
4
|
|
|
5
|
-
## Entrypoints
|
|
5
|
+
## Published Entrypoints
|
|
6
6
|
|
|
7
7
|
### `valyrianjs-terminal`
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Main entrypoint. At a high level, it exposes:
|
|
10
10
|
|
|
11
11
|
- `renderTerminal()`
|
|
12
12
|
- `mountTerminal()`
|
|
13
|
-
-
|
|
14
|
-
-
|
|
13
|
+
- primitives `Screen`, `Box`, `View`, `Text`, `Input`, `Button`, `ScrollView`, `List`, `Table`, `Row`, `Td`
|
|
14
|
+
- prop, event, node, and session types
|
|
15
15
|
|
|
16
16
|
### `valyrianjs-terminal/render`
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
Published subpath for lower-level rendering utilities.
|
|
19
19
|
|
|
20
20
|
- `renderTerminal(input): string`
|
|
21
21
|
- `renderTerminalNode(node): string`
|
|
22
22
|
- `renderTerminalFrame(node): TerminalFrame`
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
Use this subpath when you only need to transform terminal nodes into text or a `TerminalFrame`, without mounting an interactive session.
|
|
25
25
|
|
|
26
|
-
##
|
|
26
|
+
## Main Functions
|
|
27
27
|
|
|
28
28
|
### `renderTerminal(input): string`
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
Resolves the provided root and returns terminal output as plain text.
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
Use cases supported by the current implementation:
|
|
33
33
|
|
|
34
|
-
- snapshots
|
|
35
|
-
-
|
|
36
|
-
-
|
|
34
|
+
- snapshots and tests
|
|
35
|
+
- layout validation without `stdin` or `stdout`
|
|
36
|
+
- content inspection in non-interactive mode
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
Notes:
|
|
39
39
|
|
|
40
|
-
-
|
|
41
|
-
-
|
|
42
|
-
-
|
|
40
|
+
- concatenates root nodes with newlines
|
|
41
|
+
- removes only trailing whitespace with `trimEnd()`
|
|
42
|
+
- does not create listeners or interactive state
|
|
43
43
|
|
|
44
44
|
### `mountTerminal(input, options?): TerminalSession`
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
Mounts an interactive session on the terminal tree and returns a `TerminalSession`.
|
|
47
47
|
|
|
48
|
-
|
|
48
|
+
High-level behavior:
|
|
49
49
|
|
|
50
|
-
-
|
|
51
|
-
-
|
|
52
|
-
-
|
|
53
|
-
-
|
|
54
|
-
-
|
|
50
|
+
- resolves the current tree and re-renders it with `session.update()`
|
|
51
|
+
- manages focus by `id`
|
|
52
|
+
- handles keyboard, mouse, selection, and clipboard interaction
|
|
53
|
+
- can write to `stdout` automatically when provided
|
|
54
|
+
- if it receives `stdin`, it enables raw mode on mount and restores it in `destroy()`
|
|
55
55
|
|
|
56
56
|
## `TerminalMountOptions`
|
|
57
57
|
|
|
58
|
-
- `ansi?: boolean` -
|
|
59
|
-
- `clipboard?: TerminalClipboardAdapter | false` - adapter
|
|
60
|
-
- `stdin?` - stream
|
|
61
|
-
- `stdout?` - writer
|
|
58
|
+
- `ansi?: boolean` - if `stdout` is present, writes ANSI diffs instead of plain text
|
|
59
|
+
- `clipboard?: TerminalClipboardAdapter | false` - custom adapter or disables the system clipboard
|
|
60
|
+
- `stdin?` - stream with `on("data")`; `off()`, `removeListener()`, `setRawMode()`, `resume()`, and `pause()` are optional
|
|
61
|
+
- `stdout?` - writer with `write(chunk: string)`
|
|
62
62
|
|
|
63
|
-
##
|
|
63
|
+
## Layout Primitives
|
|
64
64
|
|
|
65
65
|
### `Screen`
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
`TerminalScreenProps` props:
|
|
68
68
|
|
|
69
69
|
- `title?: string`
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
Role: root container. If `title` exists, it renders as the first line of the frame.
|
|
72
72
|
|
|
73
73
|
### `Box`
|
|
74
74
|
|
|
75
|
-
|
|
75
|
+
`TerminalBoxProps` props:
|
|
76
76
|
|
|
77
77
|
- `direction?: "row" | "column"`
|
|
78
78
|
- `gap?: number`
|
|
@@ -83,56 +83,56 @@ Props de `TerminalBoxProps`:
|
|
|
83
83
|
- `id?: string`
|
|
84
84
|
- `focusable?: boolean`
|
|
85
85
|
|
|
86
|
-
|
|
86
|
+
Role: layout container. In `row`, it composes horizontally; in `column`, vertically.
|
|
87
87
|
|
|
88
88
|
### `View`
|
|
89
89
|
|
|
90
|
-
|
|
90
|
+
`TerminalViewProps` props:
|
|
91
91
|
|
|
92
|
-
-
|
|
92
|
+
- all layout props from `Box`
|
|
93
93
|
- `role?: string`
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
Role: semantic container equivalent to `terminal-view`.
|
|
96
96
|
|
|
97
97
|
### `Text`
|
|
98
98
|
|
|
99
|
-
|
|
99
|
+
`TerminalTextProps` props:
|
|
100
100
|
|
|
101
101
|
- `value?: any`
|
|
102
102
|
|
|
103
|
-
|
|
103
|
+
Role: renders `value` or the concatenated text from its children. If there are line breaks, they are preserved.
|
|
104
104
|
|
|
105
105
|
### `Table`
|
|
106
106
|
|
|
107
|
-
|
|
107
|
+
`TerminalTableProps` props:
|
|
108
108
|
|
|
109
109
|
- `v-for?: any[]`
|
|
110
110
|
|
|
111
|
-
|
|
111
|
+
Role: composes rows and automatically calculates the maximum width for each column.
|
|
112
112
|
|
|
113
113
|
### `Row`
|
|
114
114
|
|
|
115
|
-
|
|
115
|
+
`TerminalRowProps` props:
|
|
116
116
|
|
|
117
117
|
- `separator?: string`
|
|
118
118
|
|
|
119
|
-
|
|
119
|
+
Role: joins cells using `separator` or `" | "` by default.
|
|
120
120
|
|
|
121
121
|
### `Td`
|
|
122
122
|
|
|
123
|
-
|
|
123
|
+
`TerminalTdProps` props:
|
|
124
124
|
|
|
125
125
|
- `padding?: number`
|
|
126
126
|
|
|
127
|
-
|
|
127
|
+
Role: wraps cell content and applies internal padding when defined.
|
|
128
128
|
|
|
129
|
-
##
|
|
129
|
+
## Interactive Primitives
|
|
130
130
|
|
|
131
|
-
|
|
131
|
+
All of them depend on `id` to fully participate in focus, hitboxes, coordinate lookup, and several `TerminalSession` helpers.
|
|
132
132
|
|
|
133
133
|
### `Input`
|
|
134
134
|
|
|
135
|
-
|
|
135
|
+
`TerminalInputProps` props:
|
|
136
136
|
|
|
137
137
|
- `id?: string`
|
|
138
138
|
- `focusable?: boolean`
|
|
@@ -143,22 +143,22 @@ Props de `TerminalInputProps`:
|
|
|
143
143
|
- `onsubmit?(event)`
|
|
144
144
|
- `onChangeText?(value)`
|
|
145
145
|
|
|
146
|
-
|
|
146
|
+
Current interaction support:
|
|
147
147
|
|
|
148
|
-
- cursor
|
|
148
|
+
- cursor movement and text selection
|
|
149
149
|
- `LEFT`, `RIGHT`, `SHIFT_LEFT`, `SHIFT_RIGHT`
|
|
150
150
|
- `ALT_LEFT`, `ALT_RIGHT`, `HOME`, `END`
|
|
151
151
|
- `CTRL_A`, `CTRL_C`, `CTRL_X`, `CTRL_V`
|
|
152
|
-
- `BACKSPACE`, `DELETE`,
|
|
152
|
+
- `BACKSPACE`, `DELETE`, character input, and `ENTER`
|
|
153
153
|
|
|
154
|
-
|
|
154
|
+
Important payloads:
|
|
155
155
|
|
|
156
156
|
- `TerminalInputChangeEventPayload` - `{ type: "change" | "input", id, value }`
|
|
157
157
|
- `TerminalInputSubmitEventPayload` - `{ type: "submit", id, value }`
|
|
158
158
|
|
|
159
159
|
### `Button`
|
|
160
160
|
|
|
161
|
-
|
|
161
|
+
`TerminalButtonProps` props:
|
|
162
162
|
|
|
163
163
|
- `id?: string`
|
|
164
164
|
- `focusable?: boolean`
|
|
@@ -168,19 +168,19 @@ Props de `TerminalButtonProps`:
|
|
|
168
168
|
- `action?(event)`
|
|
169
169
|
- `onPress?(event)`
|
|
170
170
|
|
|
171
|
-
|
|
171
|
+
Current activation paths:
|
|
172
172
|
|
|
173
173
|
- `session.click(id?)`
|
|
174
174
|
- `session.clickAt(x, y)`
|
|
175
|
-
- `dispatchKey("ENTER")`
|
|
175
|
+
- `dispatchKey("ENTER")` or `dispatchKey("SPACE")` when focus is on the button
|
|
176
176
|
|
|
177
|
-
|
|
177
|
+
Important payload:
|
|
178
178
|
|
|
179
179
|
- `TerminalButtonPressEventPayload` - `{ type: "press" | "click", id }`
|
|
180
180
|
|
|
181
181
|
### `List<T>`
|
|
182
182
|
|
|
183
|
-
|
|
183
|
+
`TerminalListProps<T>` props:
|
|
184
184
|
|
|
185
185
|
- `id?: string`
|
|
186
186
|
- `focusable?: boolean`
|
|
@@ -195,14 +195,14 @@ Props de `TerminalListProps<T>`:
|
|
|
195
195
|
- `oncapturestart?(event)`
|
|
196
196
|
- `oncaptureend?(event)`
|
|
197
197
|
|
|
198
|
-
|
|
198
|
+
Current interaction:
|
|
199
199
|
|
|
200
|
-
- `UP`
|
|
201
|
-
- `DOWN`
|
|
202
|
-
- `ENTER`
|
|
203
|
-
-
|
|
200
|
+
- `UP` and `LEFT` move selection up
|
|
201
|
+
- `DOWN` and `RIGHT` move selection down
|
|
202
|
+
- `ENTER` triggers `onpress`
|
|
203
|
+
- mouse hover exposes row, index, and value
|
|
204
204
|
|
|
205
|
-
|
|
205
|
+
Important payloads:
|
|
206
206
|
|
|
207
207
|
- `TerminalListChangeEventPayload<T>` - `{ type: "change", id, index, value }`
|
|
208
208
|
- `TerminalListPressEventPayload<T>` - `{ type: "press", id, index, value }`
|
|
@@ -211,9 +211,9 @@ Payloads importantes:
|
|
|
211
211
|
|
|
212
212
|
### `ScrollView`
|
|
213
213
|
|
|
214
|
-
|
|
214
|
+
`TerminalScrollViewProps` props:
|
|
215
215
|
|
|
216
|
-
- props
|
|
216
|
+
- layout props (`direction`, `gap`, `padding`, `border`, `width`, `height`, `id`, `focusable`)
|
|
217
217
|
- `pointerCapture?: boolean`
|
|
218
218
|
- `highlightRows?: number[]`
|
|
219
219
|
- `onhover?(event)`
|
|
@@ -222,52 +222,52 @@ Props de `TerminalScrollViewProps`:
|
|
|
222
222
|
- `oncapturestart?(event)`
|
|
223
223
|
- `oncaptureend?(event)`
|
|
224
224
|
|
|
225
|
-
|
|
225
|
+
Current interaction:
|
|
226
226
|
|
|
227
|
-
- `UP`
|
|
228
|
-
-
|
|
229
|
-
- `highlightRows`
|
|
230
|
-
-
|
|
227
|
+
- `UP` and `DOWN` adjust the vertical offset when it has focus
|
|
228
|
+
- rendering clips visible content based on `height`
|
|
229
|
+
- `highlightRows` marks specific visible rows
|
|
230
|
+
- mouse hover exposes the visible row and rendered text
|
|
231
231
|
|
|
232
|
-
|
|
232
|
+
Important payloads:
|
|
233
233
|
|
|
234
234
|
- `TerminalScrollPointerEventPayload` - `{ type: "hover" | "rowenter" | "rowleave", id, row, value, x, y }`
|
|
235
235
|
- `TerminalCaptureEventPayload` - `{ type: "capturestart" | "captureend", id, source, row, x, y }`
|
|
236
236
|
|
|
237
237
|
## `TerminalSession`
|
|
238
238
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
- `update(): string` -
|
|
242
|
-
- `output(): string` -
|
|
243
|
-
- `ansiOutput(): string` -
|
|
244
|
-
- `tree(): TerminalNode[]` -
|
|
245
|
-
- `focus(id: string): boolean` -
|
|
246
|
-
- `focusAt(x: number, y: number): boolean` -
|
|
247
|
-
- `focusNext(): boolean` -
|
|
248
|
-
- `focusPrev(): boolean` -
|
|
249
|
-
- `dispatchKey(key: string): string` -
|
|
250
|
-
- `click(id?: string): string` -
|
|
251
|
-
- `clickAt(x: number, y: number): string` -
|
|
252
|
-
- `clipboard(): string` -
|
|
253
|
-
- `setClipboard(value: string): string` -
|
|
254
|
-
- `selectAll(): string` -
|
|
255
|
-
- `destroy(): void` -
|
|
256
|
-
|
|
257
|
-
##
|
|
258
|
-
|
|
259
|
-
- `TerminalMountOptions` -
|
|
260
|
-
- `TerminalClipboardAdapter` -
|
|
261
|
-
- `TerminalFrame` - frame
|
|
262
|
-
- `TerminalHitbox` - region
|
|
263
|
-
- `TerminalStyleSpan` -
|
|
264
|
-
- `TerminalNode`, `TerminalElementNode`, `TerminalTextNode` -
|
|
265
|
-
- `TerminalLayoutProps` - base
|
|
266
|
-
- `TerminalFocusableProps` - `id`
|
|
267
|
-
- `TerminalPointerCaptureProps` - `pointerCapture`
|
|
268
|
-
- `InputInteractionState` -
|
|
269
|
-
- `TerminalChangeEventPayload` - union
|
|
270
|
-
- `TerminalPressEventPayload` - union
|
|
271
|
-
- `TerminalPointerCoordinates` -
|
|
239
|
+
Public contract for the interactive session.
|
|
240
|
+
|
|
241
|
+
- `update(): string` - resolves the root again and returns the current plain-text output
|
|
242
|
+
- `output(): string` - returns the last rendered plain frame
|
|
243
|
+
- `ansiOutput(): string` - returns the current frame serialized as ANSI
|
|
244
|
+
- `tree(): TerminalNode[]` - exposes the current resolved terminal tree
|
|
245
|
+
- `focus(id: string): boolean` - focuses an interactive node by `id`
|
|
246
|
+
- `focusAt(x: number, y: number): boolean` - focuses by computed hitbox
|
|
247
|
+
- `focusNext(): boolean` - moves focus forward in render order
|
|
248
|
+
- `focusPrev(): boolean` - moves focus backward in render order
|
|
249
|
+
- `dispatchKey(key: string): string` - injects a normalized key and returns the current output
|
|
250
|
+
- `click(id?: string): string` - activates the focused button or a specific one by `id`
|
|
251
|
+
- `clickAt(x: number, y: number): string` - activates or focuses using coordinates
|
|
252
|
+
- `clipboard(): string` - returns the last clipboard value known by the session
|
|
253
|
+
- `setClipboard(value: string): string` - updates the internal clipboard and, if present, the adapter
|
|
254
|
+
- `selectAll(): string` - selects all content in the focused `Input`
|
|
255
|
+
- `destroy(): void` - removes `stdin` listeners, exits raw mode, and pauses the stream when applicable
|
|
256
|
+
|
|
257
|
+
## Relevant Utility Types
|
|
258
|
+
|
|
259
|
+
- `TerminalMountOptions` - options for mounting the session
|
|
260
|
+
- `TerminalClipboardAdapter` - minimum contract for integrating an external clipboard
|
|
261
|
+
- `TerminalFrame` - rendered frame with `lines`, `hitboxes`, `cursor`, and `spans`
|
|
262
|
+
- `TerminalHitbox` - computed interactive region for focus and coordinate-based clicks
|
|
263
|
+
- `TerminalStyleSpan` - visual marker such as `selection`, `focus`, or `highlight`
|
|
264
|
+
- `TerminalNode`, `TerminalElementNode`, `TerminalTextNode` - resolved terminal tree
|
|
265
|
+
- `TerminalLayoutProps` - shared base for `Box`, `View`, and `ScrollView`
|
|
266
|
+
- `TerminalFocusableProps` - `id` and `focusable`
|
|
267
|
+
- `TerminalPointerCaptureProps` - `pointerCapture` for lists and scroll views
|
|
268
|
+
- `InputInteractionState` - cursor position and selection anchor
|
|
269
|
+
- `TerminalChangeEventPayload` - union of `Input` and `List` change events
|
|
270
|
+
- `TerminalPressEventPayload` - union of `Button` and `List` press events
|
|
271
|
+
- `TerminalPointerCoordinates` - optional `x` and `y` coordinates in mouse payloads
|
|
272
272
|
- `TerminalMouseEventType` - `"hover" | "rowenter" | "rowleave"`
|
|
273
273
|
- `TerminalPointerSource` - `"press" | "drag" | "release"`
|
package/docs/cookbook.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# Cookbook
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Short, copyable recipes for `valyrianjs-terminal`. This guide complements `docs/getting-started.md`, `docs/interaction-model.md`, and `docs/api-reference.md`.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Static rendering for snapshots
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Use this when you want to validate layout or generate plain text without opening an interactive session.
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
10
|
/** @jsx v */
|
|
@@ -23,9 +23,9 @@ const output = renderTerminal(
|
|
|
23
23
|
console.log(output);
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
##
|
|
26
|
+
## Controlled input with submit
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
Use this when you need an editable field that stores the final value when `Enter` is pressed.
|
|
29
29
|
|
|
30
30
|
```tsx
|
|
31
31
|
/** @jsx v */
|
|
@@ -62,9 +62,9 @@ console.log(state.submitted);
|
|
|
62
62
|
console.log(session.output());
|
|
63
63
|
```
|
|
64
64
|
|
|
65
|
-
##
|
|
65
|
+
## Button that mutates state
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
Use this when you want to trigger simple actions from the keyboard or by programmatic click.
|
|
68
68
|
|
|
69
69
|
```tsx
|
|
70
70
|
/** @jsx v */
|
|
@@ -95,9 +95,9 @@ session.click("increment");
|
|
|
95
95
|
console.log(session.output());
|
|
96
96
|
```
|
|
97
97
|
|
|
98
|
-
##
|
|
98
|
+
## Interactive list with `onchange` and `onpress`
|
|
99
99
|
|
|
100
|
-
|
|
100
|
+
Use this when you want to separate the currently selected item from the item activated with `Enter`.
|
|
101
101
|
|
|
102
102
|
```tsx
|
|
103
103
|
/** @jsx v */
|
|
@@ -134,9 +134,9 @@ console.log(state.selected);
|
|
|
134
134
|
console.log(state.opened);
|
|
135
135
|
```
|
|
136
136
|
|
|
137
|
-
## Scroll view
|
|
137
|
+
## Scroll view with `height` and `highlightRows`
|
|
138
138
|
|
|
139
|
-
|
|
139
|
+
Use this to clip vertical content and mark relevant rows inside the viewport.
|
|
140
140
|
|
|
141
141
|
```tsx
|
|
142
142
|
/** @jsx v */
|
|
@@ -164,9 +164,9 @@ console.log(session.output());
|
|
|
164
164
|
console.log(session.ansiOutput());
|
|
165
165
|
```
|
|
166
166
|
|
|
167
|
-
##
|
|
167
|
+
## Custom clipboard adapter
|
|
168
168
|
|
|
169
|
-
|
|
169
|
+
Use this when you want to connect copy and paste to your own clipboard implementation instead of the session's internal state.
|
|
170
170
|
|
|
171
171
|
```tsx
|
|
172
172
|
/** @jsx v */
|
|
@@ -212,9 +212,9 @@ console.log(session.clipboard());
|
|
|
212
212
|
console.log(state.value);
|
|
213
213
|
```
|
|
214
214
|
|
|
215
|
-
##
|
|
215
|
+
## Coordinate-based interaction with `focusAt` and `clickAt`
|
|
216
216
|
|
|
217
|
-
|
|
217
|
+
Use this in tests or adapters where the real entry point is frame coordinates rather than known ids.
|
|
218
218
|
|
|
219
219
|
```tsx
|
|
220
220
|
/** @jsx v */
|
|
@@ -243,9 +243,9 @@ console.log(session.output());
|
|
|
243
243
|
console.log(state.clicks);
|
|
244
244
|
```
|
|
245
245
|
|
|
246
|
-
##
|
|
246
|
+
## Inspect ANSI output with `ansiOutput`
|
|
247
247
|
|
|
248
|
-
|
|
248
|
+
Use this when you need to verify cursor position, styles, or ANSI sequences in tests and integrations.
|
|
249
249
|
|
|
250
250
|
```tsx
|
|
251
251
|
/** @jsx v */
|
|
@@ -277,10 +277,10 @@ console.log(ansi);
|
|
|
277
277
|
console.log(/\u001b\[[0-9]+;[0-9]+H/.test(ansi));
|
|
278
278
|
```
|
|
279
279
|
|
|
280
|
-
##
|
|
280
|
+
## See also
|
|
281
281
|
|
|
282
|
-
- `docs/getting-started.md`
|
|
283
|
-
- `docs/core-concepts.md`
|
|
284
|
-
- `docs/interaction-model.md`
|
|
285
|
-
- `docs/session-runtime.md`
|
|
286
|
-
- `docs/api-reference.md`
|
|
282
|
+
- `docs/getting-started.md` for the minimal mounting flow
|
|
283
|
+
- `docs/core-concepts.md` for the package mental model
|
|
284
|
+
- `docs/interaction-model.md` for focus, keyboard, mouse, and clipboard
|
|
285
|
+
- `docs/session-runtime.md` for lifecycle, streams, and session runtime
|
|
286
|
+
- `docs/api-reference.md` for the full public surface
|