@valyrianjs/terminal 0.1.1 → 0.1.2

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.
Files changed (107) hide show
  1. package/README.md +105 -55
  2. package/dist/ansi.d.ts +20 -4
  3. package/dist/ansi.d.ts.map +1 -1
  4. package/dist/ansi.js +171 -47
  5. package/dist/ansi.js.map +1 -1
  6. package/dist/editor-state.d.ts +22 -0
  7. package/dist/editor-state.d.ts.map +1 -0
  8. package/dist/editor-state.js +110 -0
  9. package/dist/editor-state.js.map +1 -0
  10. package/dist/events.d.ts +1 -4
  11. package/dist/events.d.ts.map +1 -1
  12. package/dist/events.js +15 -38
  13. package/dist/events.js.map +1 -1
  14. package/dist/index.d.ts +4 -2
  15. package/dist/index.d.ts.map +1 -1
  16. package/dist/index.js +3 -1
  17. package/dist/index.js.map +1 -1
  18. package/dist/keymap.d.ts +7 -0
  19. package/dist/keymap.d.ts.map +1 -0
  20. package/dist/keymap.js +133 -0
  21. package/dist/keymap.js.map +1 -0
  22. package/dist/layout.d.ts +10 -1
  23. package/dist/layout.d.ts.map +1 -1
  24. package/dist/layout.js +97 -7
  25. package/dist/layout.js.map +1 -1
  26. package/dist/mouse.d.ts +1 -0
  27. package/dist/mouse.d.ts.map +1 -1
  28. package/dist/mouse.js +24 -1
  29. package/dist/mouse.js.map +1 -1
  30. package/dist/output-writer.d.ts +9 -0
  31. package/dist/output-writer.d.ts.map +1 -0
  32. package/dist/output-writer.js +79 -0
  33. package/dist/output-writer.js.map +1 -0
  34. package/dist/paste.d.ts +7 -0
  35. package/dist/paste.d.ts.map +1 -0
  36. package/dist/paste.js +18 -0
  37. package/dist/paste.js.map +1 -0
  38. package/dist/primitives.d.ts +8 -1
  39. package/dist/primitives.d.ts.map +1 -1
  40. package/dist/primitives.js +9 -1
  41. package/dist/primitives.js.map +1 -1
  42. package/dist/render.d.ts +8 -3
  43. package/dist/render.d.ts.map +1 -1
  44. package/dist/render.js +840 -67
  45. package/dist/render.js.map +1 -1
  46. package/dist/runtime.d.ts +29 -0
  47. package/dist/runtime.d.ts.map +1 -0
  48. package/dist/runtime.js +215 -0
  49. package/dist/runtime.js.map +1 -0
  50. package/dist/scheduler.d.ts +8 -0
  51. package/dist/scheduler.d.ts.map +1 -0
  52. package/dist/scheduler.js +24 -0
  53. package/dist/scheduler.js.map +1 -0
  54. package/dist/session.d.ts.map +1 -1
  55. package/dist/session.js +729 -199
  56. package/dist/session.js.map +1 -1
  57. package/dist/stream-log.d.ts +40 -0
  58. package/dist/stream-log.d.ts.map +1 -0
  59. package/dist/stream-log.js +73 -0
  60. package/dist/stream-log.js.map +1 -0
  61. package/dist/text.d.ts +3 -0
  62. package/dist/text.d.ts.map +1 -0
  63. package/dist/text.js +19 -0
  64. package/dist/text.js.map +1 -0
  65. package/dist/theme.d.ts +7 -0
  66. package/dist/theme.d.ts.map +1 -0
  67. package/dist/theme.js +254 -0
  68. package/dist/theme.js.map +1 -0
  69. package/dist/tree.d.ts +2 -0
  70. package/dist/tree.d.ts.map +1 -1
  71. package/dist/tree.js +42 -1
  72. package/dist/tree.js.map +1 -1
  73. package/dist/types.d.ts +183 -18
  74. package/dist/types.d.ts.map +1 -1
  75. package/docs/api-reference.md +302 -136
  76. package/docs/assets/quick-note.svg +13 -0
  77. package/docs/cookbook.md +296 -201
  78. package/docs/core-concepts.md +143 -55
  79. package/docs/getting-started.md +209 -90
  80. package/docs/interaction-model.md +86 -52
  81. package/docs/primitive-gallery.md +365 -0
  82. package/docs/session-runtime.md +131 -362
  83. package/docs/valyrian-modules.md +3196 -0
  84. package/llms-full.txt +5357 -0
  85. package/package.json +21 -8
  86. package/src/ansi.ts +269 -0
  87. package/src/clipboard.ts +76 -0
  88. package/src/editor-state.ts +162 -0
  89. package/src/events.ts +163 -0
  90. package/src/index.ts +92 -0
  91. package/src/keymap.ts +151 -0
  92. package/src/layout.ts +282 -0
  93. package/src/mouse.ts +68 -0
  94. package/src/output-writer.ts +93 -0
  95. package/src/paste.ts +23 -0
  96. package/src/primitives.ts +52 -0
  97. package/src/render.ts +1107 -0
  98. package/src/runtime.ts +273 -0
  99. package/src/scheduler.ts +33 -0
  100. package/src/session.ts +1260 -0
  101. package/src/stream-log.ts +96 -0
  102. package/src/text.ts +20 -0
  103. package/src/theme.ts +263 -0
  104. package/src/tree.ts +169 -0
  105. package/src/types.ts +523 -0
  106. package/tsconfig.json +4 -7
  107. package/docs/local-demo.md +0 -28
@@ -1,66 +1,102 @@
1
1
  # Interaction Model
2
2
 
3
- This guide describes how the package's interactive primitives respond. If the base model is not clear yet, start with `docs/core-concepts.md`. If you need session lifecycle, streams, or runtime details, continue with `docs/session-runtime.md`.
3
+ This guide explains how interactive primitives receive input and report events. For lifecycle and stream details, see [Session Runtime](./session-runtime.md).
4
4
 
5
5
  ## Shared rules
6
6
 
7
- - `Tab` moves to the next focusable element.
8
- - `Shift+Tab` moves back to the previous one.
9
- - Interactive nodes need an `id` if you want to focus or activate them programmatically.
10
- - `focusAt(x, y)` and `clickAt(x, y)` depend on the hitboxes in the current frame.
7
+ - Interactive nodes need stable `id` values for programmatic focus, click, and coordinate lookup.
8
+ - `Tab` moves to the next focusable node; `Shift+Tab` moves back.
9
+ - `focusAt(x, y)` and `clickAt(x, y)` use hitboxes from the current rendered frame.
10
+ - Components report events to your handlers; your app owns the resulting state changes.
11
+ - Connected streams, mouse input, clipboard integration, and modified keys follow terminal and runtime capabilities.
11
12
 
12
- ## `Input`
13
+ ## Input events
13
14
 
14
- `Input` is a single-line editing primitive with a cursor, selection, and submit support.
15
+ Keyboard dispatch uses normalized key names such as `ENTER`, `TAB`, `SHIFT_TAB`, `LEFT`, `RIGHT`, `CTRL_V`, and single-character strings. When a session is connected to `stdin`, terminal input is parsed and routed to the focused primitive.
15
16
 
16
- Observable behavior:
17
+ Pasted text is treated as text input for the focused primitive. Do not treat pasted strings or key sequences as terminal control instructions inside rendered content.
17
18
 
18
- - regular text: inserts characters
19
- - `Enter`: triggers `onsubmit`
20
- - `Left` / `Right`: moves the cursor
21
- - `Shift+Left` / `Shift+Right`: extends the selection
22
- - `Alt+Left` / `Alt+Right`: moves by word
23
- - `Home` / `End`: jumps to the start or end
24
- - `Ctrl+A`: selects all
25
- - `Ctrl+C`: copies the selection
26
- - `Ctrl+X`: cuts the selection
27
- - `Ctrl+V`: pastes from the clipboard
28
- - `Backspace` / `Delete`: removes content
19
+ ## Focus and ids
20
+
21
+ Focus is session state. The session can:
22
+
23
+ - focus by id with `focus(id)`
24
+ - move sequentially with `focusNext()` and `focusPrev()`
25
+ - dispatch keys to the focused primitive with `dispatchKey(key)`
26
+ - resolve coordinates with `focusAt(x, y)` and `clickAt(x, y)`
27
+
28
+ `FocusScope` bounds sequential focus traversal to a local group when focus is already inside that active scope. `Overlay trapFocus` keeps traversal inside an overlay-like region while the overlay is present. These primitives help compose popovers and lightweight dialog surfaces while routing and command execution stay in the app layer.
29
+
30
+ ## Component interaction
31
+
32
+ ### `Input`
33
+
34
+ `Input` is a single-line editing primitive.
35
+
36
+ Supported behavior includes:
37
+
38
+ - character insertion
39
+ - `ENTER` submit
40
+ - cursor movement with `LEFT`, `RIGHT`, `HOME`, and `END`
41
+ - selection with `SHIFT_LEFT`, `SHIFT_RIGHT`, and `CTRL_A`
42
+ - copy, cut, and paste through `CTRL_C`, `CTRL_X`, and `CTRL_V`
43
+ - deletion with `BACKSPACE` and `DELETE`
29
44
 
30
45
  Main handlers:
31
46
 
32
47
  - `onchange`
33
48
  - `oninput`
34
49
  - `onsubmit`
35
- - `onChangeText`
36
50
 
37
- ## `Button`
51
+ ### `Editor`
52
+
53
+ `Editor` is a multiline editing primitive.
54
+
55
+ Supported behavior includes:
56
+
57
+ - character insertion
58
+ - `SHIFT_ENTER` newline when the terminal reports that modified key
59
+ - `ENTER` submit
60
+ - `ESCAPE` cancel
61
+ - line and cursor movement with arrow keys, `HOME`, and `END`
62
+ - paste through `CTRL_V` or terminal paste input
63
+ - deletion with `BACKSPACE` and `DELETE`
64
+
65
+ Main handlers:
66
+
67
+ - `onchange`
68
+ - `oninput`
69
+ - `onsubmit`
70
+ - `oncancel`
71
+
72
+ Cursor positions use JavaScript string columns for deterministic common-text editing. Keep specialized grapheme-width handling in app-level formatting when a workflow needs exact terminal cell width for complex character sequences.
73
+
74
+ ### `Button`
38
75
 
39
76
  `Button` represents a discrete action.
40
77
 
41
- Observable behavior:
78
+ Activation paths:
42
79
 
43
- - responds to `Enter` and `Space` when focused
44
- - responds to `session.click(id)`
45
- - responds to `session.clickAt(x, y)` when the hitbox lands on the button
80
+ - `ENTER` or `SPACE` when focused
81
+ - `session.click(id)`
82
+ - `session.clickAt(x, y)` when the coordinate lands on the button
46
83
 
47
84
  Main handlers:
48
85
 
49
86
  - `onpress`
50
87
  - `onclick`
51
88
  - `action`
52
- - `onPress`
53
89
 
54
- ## `List`
90
+ ### `List`
55
91
 
56
92
  `List` models row selection and activation.
57
93
 
58
- Observable behavior:
94
+ Supported behavior includes:
59
95
 
60
- - `Up` / `Left`: moves selection up
61
- - `Down` / `Right`: moves selection down
62
- - `Enter`: triggers `onpress`
63
- - mouse hover exposes the current row, index, and value
96
+ - `UP` and `LEFT` move selection up
97
+ - `DOWN` and `RIGHT` move selection down
98
+ - `ENTER` activates the selected row
99
+ - mouse hover reports row details when mouse input is connected
64
100
 
65
101
  Main handlers:
66
102
 
@@ -72,19 +108,18 @@ Main handlers:
72
108
  - `oncapturestart`
73
109
  - `oncaptureend`
74
110
 
75
- With `pointerCapture`, the list keeps the interaction during a drag even if the pointer leaves the initial hitbox.
111
+ `pointerCapture` lets a list keep drag interaction even when the pointer leaves the initial hitbox.
76
112
 
77
- ## `ScrollView`
113
+ ### `ScrollView`
78
114
 
79
115
  `ScrollView` clips vertical content and exposes viewport-based interaction.
80
116
 
81
- Observable behavior:
117
+ Supported behavior includes:
82
118
 
83
- - `Up`: scrolls up
84
- - `Down`: scrolls down
85
- - `height`: defines the visible viewport
86
- - `highlightRows`: highlights specific visible rows
87
- - mouse hover exposes the visible row and rendered text
119
+ - `UP` and `DOWN` scrolling when focused
120
+ - `height` as the visible viewport
121
+ - `highlightRows` for marking visible rows
122
+ - mouse hover details when mouse input is connected
88
123
 
89
124
  Main handlers:
90
125
 
@@ -94,22 +129,21 @@ Main handlers:
94
129
  - `oncapturestart`
95
130
  - `oncaptureend`
96
131
 
97
- With `pointerCapture`, scrolling keeps the interaction during a drag even if the pointer leaves the viewport.
132
+ `pointerCapture` lets a scroll view keep drag interaction even when the pointer leaves the viewport.
98
133
 
99
- ## Mouse and pointer capture
134
+ ## Mouse and pointer behavior
100
135
 
101
- When the session receives SGR mouse events:
136
+ When a connected session receives supported SGR mouse input:
102
137
 
103
- - `press`: focuses and activates the matching hitbox
104
- - `drag`: extends selection in `Input` or updates hover in `List` and `ScrollView`
105
- - `release`: ends capture and clears hover when needed
106
- - `wheel-up` / `wheel-down`: translate to vertical navigation
138
+ - press focuses or activates the matching hitbox
139
+ - drag extends input selection or updates list/scroll hover
140
+ - release ends capture when capture is active
141
+ - wheel input maps to vertical navigation
107
142
 
108
- `pointerCapture` currently applies only to `List` and `ScrollView`.
143
+ Mouse behavior follows supported terminal input sequences and the active session connection. Keep a keyboard path for important actions.
109
144
 
110
145
  ## Where to go next
111
146
 
112
- - `docs/core-concepts.md` for the package mental model
113
- - `docs/session-runtime.md` for lifecycle, streams, clipboard, and runtime
114
- - `docs/cookbook.md` for practical recipes
115
- - `docs/api-reference.md` for quick lookup of props, payloads, and types
147
+ - [Cookbook](./cookbook.md) for recipes that combine primitives.
148
+ - [Session Runtime](./session-runtime.md) for streams, clipboard adapters, mouse input, and cleanup.
149
+ - [API Reference](./api-reference.md) for props and event payloads.
@@ -0,0 +1,365 @@
1
+ # Primitive Gallery
2
+
3
+ Build complete terminal interfaces from focused primitives.
4
+
5
+ Use this gallery to choose primitives, see their main props, and compose terminal mini apps. The gallery teaches what each primitive does and how it fits with the others. Use API Reference for prop-level details.
6
+
7
+ | Primitive | Use it for | Demo |
8
+ | --- | --- | --- |
9
+ | `Screen` | the top-level surface of a terminal app | [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx) |
10
+ | `Text` | copy that should render as terminal text | [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx) |
11
+ | `Box` | small surfaces, cards, and stacked sections | [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx) |
12
+ | `View` | named regions that help app code describe purpose | [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx) |
13
+ | `Pane` | sidebars, detail panels, and app sections | [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx) |
14
+ | `Split` | resizable app shells and master/detail layouts | [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx) |
15
+ | `Fixed` | headers, footers, rails, and persistent status bars | [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx) |
16
+ | `Input` | names, filters, prompts, and short commands | [`examples/docs/primitive-input-workbench.tsx`](../examples/docs/primitive-input-workbench.tsx) |
17
+ | `Editor` | notes, descriptions, and longer messages | [`examples/docs/primitive-input-workbench.tsx`](../examples/docs/primitive-input-workbench.tsx) |
18
+ | `Button` | save actions, confirmations, command triggers, and app actions | [`examples/docs/primitive-input-workbench.tsx`](../examples/docs/primitive-input-workbench.tsx) |
19
+ | `FocusScope` | forms, panels, and overlays where Tab should stay within a focused area | [`examples/docs/primitive-input-workbench.tsx`](../examples/docs/primitive-input-workbench.tsx) |
20
+ | `List` | menus, choosers, command lists, and item browsers | [`examples/docs/primitive-data-explorer.tsx`](../examples/docs/primitive-data-explorer.tsx) |
21
+ | `Table` | compact data detail and aligned text pairs | [`examples/docs/primitive-data-explorer.tsx`](../examples/docs/primitive-data-explorer.tsx) |
22
+ | `Row` | one record line inside a `Table` | [`examples/docs/primitive-data-explorer.tsx`](../examples/docs/primitive-data-explorer.tsx) |
23
+ | `Td` | styled or padded data cells | [`examples/docs/primitive-data-explorer.tsx`](../examples/docs/primitive-data-explorer.tsx) |
24
+ | `ScrollView` | long instructions, timelines, and scrollable panels | [`examples/docs/primitive-activity-console.tsx`](../examples/docs/primitive-activity-console.tsx) |
25
+ | `LogView` | activity feeds, status streams, and event output | [`examples/docs/primitive-activity-console.tsx`](../examples/docs/primitive-activity-console.tsx) |
26
+ | `Overlay` | command panels, dialogs, palettes, and focused chooser surfaces | [`examples/docs/primitive-command-panel.tsx`](../examples/docs/primitive-command-panel.tsx) |
27
+
28
+ ## Start with the shell
29
+
30
+ Use `Screen` and `Text` to establish the app root and clear terminal copy.
31
+
32
+ ### `Screen`
33
+
34
+ Use `Screen` as the top-level surface for a terminal app.
35
+
36
+ **What it is:** A screen root that gives the terminal tree a title and viewport context.
37
+ **Use it for:** the top-level surface of a terminal app.
38
+ **Core props:** `title`, `id`, `focusable`.
39
+
40
+ **Minimal example:**
41
+
42
+ ```tsx
43
+ <Screen title="Desk"><Text>Ready</Text></Screen>
44
+ ```
45
+
46
+ **Complete demo:** [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx). Run it with `bun examples/docs/primitive-layout-shell.tsx` and quit with `Ctrl+C`.
47
+
48
+ ### `Text`
49
+
50
+ Use `Text` for labels, status lines, and short terminal copy.
51
+
52
+ **What it is:** A text node for labels, status lines, and short messages.
53
+ **Use it for:** copy that should render as terminal text.
54
+ **Core props:** `value`, `style`, `styles`, `state`.
55
+
56
+ **Minimal example:**
57
+
58
+ ```tsx
59
+ <Text>Status: ready</Text>
60
+ ```
61
+
62
+ **Complete demo:** [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx). Run it with `bun examples/docs/primitive-layout-shell.tsx` and quit with `Ctrl+C`.
63
+
64
+ ## Compose layout surfaces
65
+
66
+ Use `Split` to compose responsive rows and columns, then fill each region with `Pane`, `Box`, or `View`.
67
+
68
+ ### `Box`
69
+
70
+ Use `Box` for cards, stacked sections, and grouped content.
71
+
72
+ **What it is:** A layout container for grouped content.
73
+ **Use it for:** small surfaces, cards, and stacked sections.
74
+ **Core props:** `direction`, `gap`, `padding`, `width`, `height`, `fill`, `style`.
75
+
76
+ **Minimal example:**
77
+
78
+ ```tsx
79
+ <Box direction="column" gap={1}><Text>Summary</Text></Box>
80
+ ```
81
+
82
+ **Complete demo:** [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx). Run it with `bun examples/docs/primitive-layout-shell.tsx` and quit with `Ctrl+C`.
83
+
84
+ ### `View`
85
+
86
+ Use `View` to name semantic regions in your terminal layout.
87
+
88
+ **What it is:** A semantic layout container with the same layout behavior as `Box`.
89
+ **Use it for:** named regions that help app code describe purpose.
90
+ **Core props:** `role`, plus Box layout props.
91
+
92
+ **Minimal example:**
93
+
94
+ ```tsx
95
+ <View role="main"><Text>Work area</Text></View>
96
+ ```
97
+
98
+ **Complete demo:** [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx). Run it with `bun examples/docs/primitive-layout-shell.tsx` and quit with `Ctrl+C`.
99
+
100
+ ### `Pane`
101
+
102
+ Use `Pane` for sidebars, detail panels, and app sections.
103
+
104
+ **What it is:** A layout boundary for a terminal region.
105
+ **Use it for:** sidebars, detail panels, and app sections.
106
+ **Core props:** `direction`, `gap`, `padding`, `fill`, `style`, `id`, `focusable`.
107
+
108
+ **Minimal example:**
109
+
110
+ ```tsx
111
+ <Pane style={{ background: "#111827" }}><Text>Inbox</Text></Pane>
112
+ ```
113
+
114
+ **Complete demo:** [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx). Run it with `bun examples/docs/primitive-layout-shell.tsx` and quit with `Ctrl+C`.
115
+
116
+ ### `Split`
117
+
118
+ Use `Split` for resizable shells and master/detail layouts.
119
+
120
+ **What it is:** A split layout primitive for rows and columns.
121
+ **Use it for:** resizable app shells and master/detail layouts.
122
+ **Core props:** `direction`, `sizes`, `breakpoints`, `gap`, `width`, `height`, `fill`.
123
+
124
+ **Minimal example:**
125
+
126
+ ```tsx
127
+ <Split sizes={["30%", "1fr"]}><Pane><Text>List</Text></Pane><Pane><Text>Detail</Text></Pane></Split>
128
+ ```
129
+
130
+ **Complete demo:** [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx). Run it with `bun examples/docs/primitive-layout-shell.tsx` and quit with `Ctrl+C`.
131
+
132
+ ### `Fixed`
133
+
134
+ Use `Fixed` for headers, footers, rails, and persistent status bars.
135
+
136
+ **What it is:** A reserved region attached to an edge of `Screen` or `Pane`.
137
+ **Use it for:** headers, footers, rails, and persistent status bars.
138
+ **Core props:** `position`, `size`.
139
+
140
+ **Minimal example:**
141
+
142
+ ```tsx
143
+ <Fixed position="bottom" size={1}><Text>Ctrl+C: quit</Text></Fixed>
144
+ ```
145
+
146
+ **Complete demo:** [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx). Run it with `bun examples/docs/primitive-layout-shell.tsx` and quit with `Ctrl+C`.
147
+
148
+ ## Collect input
149
+
150
+ Use `Input`, `Editor`, `Button`, and `FocusScope` to collect intent and move it into app state.
151
+
152
+ ### `Input`
153
+
154
+ Use `Input` for names, filters, prompts, and short commands.
155
+
156
+ **What it is:** A single-line editable field.
157
+ **Use it for:** names, filters, prompts, and short commands.
158
+ **Core props:** `id`, `value`, `placeholder`, `onchange`, `oninput`, `onsubmit`.
159
+
160
+ **Minimal example:**
161
+
162
+ ```tsx
163
+ <Input id="name" value={name} placeholder="Name" onchange={(event) => { name = event.value; }} />
164
+ ```
165
+
166
+ **Complete demo:** [`examples/docs/primitive-input-workbench.tsx`](../examples/docs/primitive-input-workbench.tsx). Run it with `bun examples/docs/primitive-input-workbench.tsx` and quit with `Ctrl+C`.
167
+
168
+ ### `Editor`
169
+
170
+ Use `Editor` for notes, descriptions, and longer messages.
171
+
172
+ **What it is:** A multi-line editable field.
173
+ **Use it for:** notes, descriptions, and longer messages.
174
+ **Core props:** `id`, `value`, `placeholder`, `height`, `onchange`, `oninput`, `onsubmit`, `oncancel`.
175
+
176
+ **Minimal example:**
177
+
178
+ ```tsx
179
+ <Editor id="details" height={4} value={details} onchange={(event) => { details = event.value; }} />
180
+ ```
181
+
182
+ **Complete demo:** [`examples/docs/primitive-input-workbench.tsx`](../examples/docs/primitive-input-workbench.tsx). Run it with `bun examples/docs/primitive-input-workbench.tsx` and quit with `Ctrl+C`.
183
+
184
+ ### `Button`
185
+
186
+ Use `Button` for save actions, confirmations, command triggers, and app actions.
187
+
188
+ **What it is:** A focusable action control.
189
+ **Use it for:** save actions, confirmations, command triggers, and app actions.
190
+ **Core props:** `id`, `label`, `onpress`, `onclick`, `action`, `style`, `styles`, `state`.
191
+
192
+ **Minimal example:**
193
+
194
+ ```tsx
195
+ <Button id="save" onpress={() => save()}>Save</Button>
196
+ ```
197
+
198
+ **Complete demo:** [`examples/docs/primitive-input-workbench.tsx`](../examples/docs/primitive-input-workbench.tsx). Run it with `bun examples/docs/primitive-input-workbench.tsx` and quit with `Ctrl+C`.
199
+
200
+ ### `FocusScope`
201
+
202
+ Use `FocusScope` to keep input, lists, and actions together inside a panel.
203
+
204
+ **What it is:** A focus boundary for a local group.
205
+ **Use it for:** forms, panels, and overlays where Tab should stay within a focused area.
206
+ **Core props:** `active`.
207
+
208
+ **Minimal example:**
209
+
210
+ ```tsx
211
+ <FocusScope><Input id="query" /><Button id="run">Run</Button></FocusScope>
212
+ ```
213
+
214
+ **Complete demo:** [`examples/docs/primitive-input-workbench.tsx`](../examples/docs/primitive-input-workbench.tsx). Run it with `bun examples/docs/primitive-input-workbench.tsx` and quit with `Ctrl+C`.
215
+
216
+ ## Navigate collections
217
+
218
+ Use `List` for selection and `Table`, `Row`, and `Td` for compact detail views.
219
+
220
+ ### `List`
221
+
222
+ Use `List` for menus, choosers, command lists, and item browsers.
223
+
224
+ **What it is:** A focusable collection control with selection and press events.
225
+ **Use it for:** menus, choosers, command lists, and item browsers.
226
+ **Core props:** `id`, `items`, `renderItem`, `virtualized`, `onchange`, `onpress`.
227
+
228
+ **Minimal example:**
229
+
230
+ ```tsx
231
+ <List id="menu" items={["Inbox", "Done"]} onchange={(event) => { selected = event.value; }} />
232
+ ```
233
+
234
+ **Complete demo:** [`examples/docs/primitive-data-explorer.tsx`](../examples/docs/primitive-data-explorer.tsx). Run it with `bun examples/docs/primitive-data-explorer.tsx` and quit with `Ctrl+C`.
235
+
236
+ ### `Table`
237
+
238
+ Use `Table` for compact data detail and aligned text pairs.
239
+
240
+ **What it is:** A table container for rows and cells.
241
+ **Use it for:** compact data detail and aligned text pairs.
242
+ **Core props:** `v-for` when Valyrian loop helpers fit your app.
243
+
244
+ **Minimal example:**
245
+
246
+ ```tsx
247
+ <Table><Row><Td><Text>Name</Text></Td><Td><Text>Ada</Text></Td></Row></Table>
248
+ ```
249
+
250
+ **Complete demo:** [`examples/docs/primitive-data-explorer.tsx`](../examples/docs/primitive-data-explorer.tsx). Run it with `bun examples/docs/primitive-data-explorer.tsx` and quit with `Ctrl+C`.
251
+
252
+ ### `Row`
253
+
254
+ Use `Row` for one record line inside a `Table`.
255
+
256
+ **What it is:** A table row that separates child cells.
257
+ **Use it for:** one record line inside a `Table`.
258
+ **Core props:** `separator`.
259
+
260
+ **Minimal example:**
261
+
262
+ ```tsx
263
+ <Row separator=" "><Td><Text>Status</Text></Td><Td><Text>Ready</Text></Td></Row>
264
+ ```
265
+
266
+ **Complete demo:** [`examples/docs/primitive-data-explorer.tsx`](../examples/docs/primitive-data-explorer.tsx). Run it with `bun examples/docs/primitive-data-explorer.tsx` and quit with `Ctrl+C`.
267
+
268
+ ### `Td`
269
+
270
+ Use `Td` for styled or padded data cells.
271
+
272
+ **What it is:** A table cell that can carry padding and styles.
273
+ **Use it for:** styled or padded data cells.
274
+ **Core props:** `padding`, `style`, `styles`, `state`.
275
+
276
+ **Minimal example:**
277
+
278
+ ```tsx
279
+ <Td padding={{ x: 1 }}><Text>Ready</Text></Td>
280
+ ```
281
+
282
+ **Complete demo:** [`examples/docs/primitive-data-explorer.tsx`](../examples/docs/primitive-data-explorer.tsx). Run it with `bun examples/docs/primitive-data-explorer.tsx` and quit with `Ctrl+C`.
283
+
284
+ ## Show scrollable activity
285
+
286
+ Use `ScrollView` and `LogView` when content grows past the visible region.
287
+
288
+ ### `ScrollView`
289
+
290
+ Use `ScrollView` for long instructions, timelines, and scrollable panels.
291
+
292
+ **What it is:** A bounded viewport for child content.
293
+ **Use it for:** long instructions, timelines, and scrollable panels.
294
+ **Core props:** `id`, `height`, `highlightRows`, `pointerCapture`, row pointer events.
295
+
296
+ **Minimal example:**
297
+
298
+ ```tsx
299
+ <ScrollView id="activity" height={6}><Text>One</Text><Text>Two</Text></ScrollView>
300
+ ```
301
+
302
+ **Complete demo:** [`examples/docs/primitive-activity-console.tsx`](../examples/docs/primitive-activity-console.tsx). Run it with `bun examples/docs/primitive-activity-console.tsx` and quit with `Ctrl+C`.
303
+
304
+ ### `LogView`
305
+
306
+ Use `LogView` for activity feeds, status streams, and event output.
307
+
308
+ **What it is:** A log renderer for growing activity streams.
309
+ **Use it for:** activity feeds, status streams, and event output.
310
+ **Core props:** `entries`, `followTail`, `emptyText`, `renderEntry`.
311
+
312
+ **Minimal example:**
313
+
314
+ ```tsx
315
+ <LogView entries={[{ id: "1", content: "ready" }]} followTail />
316
+ ```
317
+
318
+ **Complete demo:** [`examples/docs/primitive-activity-console.tsx`](../examples/docs/primitive-activity-console.tsx). Run it with `bun examples/docs/primitive-activity-console.tsx` and quit with `Ctrl+C`.
319
+
320
+ ## Layer focused panels
321
+
322
+ Use `Overlay` with `FocusScope` to place a focused chooser over the current screen.
323
+
324
+ ### `Overlay`
325
+
326
+ Use `Overlay` for command panels, dialogs, palettes, and focused chooser surfaces.
327
+
328
+ **What it is:** A positioned layer over the current frame.
329
+ **Use it for:** command panels, dialogs, palettes, and focused chooser surfaces.
330
+ **Core props:** `id`, `x`, `y`, `width`, `height`, `trapFocus`, `style`.
331
+
332
+ **Minimal example:**
333
+
334
+ ```tsx
335
+ <Overlay x={4} y={2} width={40} height={8} trapFocus><Text>Command Panel</Text></Overlay>
336
+ ```
337
+
338
+ **Complete demo:** [`examples/docs/primitive-command-panel.tsx`](../examples/docs/primitive-command-panel.tsx). Run it with `bun examples/docs/primitive-command-panel.tsx` and quit with `Ctrl+C`.
339
+
340
+ ### `FocusScope`
341
+
342
+ Use `FocusScope` to keep input, lists, and actions together inside a panel.
343
+
344
+ **What it is:** A focus boundary that pairs well with overlay content.
345
+ **Use it for:** keeping input, lists, and actions together inside a panel.
346
+ **Core props:** `active`.
347
+
348
+ **Minimal example:**
349
+
350
+ ```tsx
351
+ <Overlay x={2} y={2} width={32} height={8} trapFocus><FocusScope><Input id="query" /><List id="commands" items={commands} /></FocusScope></Overlay>
352
+ ```
353
+
354
+ **Complete demo:** [`examples/docs/primitive-command-panel.tsx`](../examples/docs/primitive-command-panel.tsx). Run it with `bun examples/docs/primitive-command-panel.tsx` and quit with `Ctrl+C`.
355
+
356
+ ## Primitive map
357
+
358
+ - Shell: `Screen`, `Text`.
359
+ - Layout: `Box`, `View`, `Pane`, `Split`, `Fixed`.
360
+ - Input: `Input`, `Editor`, `Button`, `FocusScope`.
361
+ - Collections: `List`, `Table`, `Row`, `Td`.
362
+ - Activity: `ScrollView`, `LogView`.
363
+ - Layers: `Overlay`, `FocusScope`.
364
+
365
+ Start with a shell, divide the screen into layout regions, add input or navigation, then layer focused panels when a local task needs priority. Use API Reference for prop-level details: [`docs/api-reference.md`](./api-reference.md).