the files you marked This cannot be undone. ``` The label comes from `label` or the body, painted as `[ Deploy ]`. A focused button fires `on:click` on `enter` or `space`, and on a mouse click. Show focus with `button:focus { reverse: true; }`. ## progress and sparkline [#progress-and-sparkline] A `progress` is a bar from 0 to 100, from `bind` or a literal `value`. A `sparkline` (version 2) draws the last values of a numeric array as bars, one column per value and eight levels per row. ```tui block eighths value ``` - `bar: eighths` (version 2) fills eighths of a cell for a smoother bar; `bar: block`, the default, fills whole cells. - A sparkline is naturally one column per value and one row tall; give it a `height` for more levels. Values are right-aligned in the width it gets, `null` is a gap, and `min` and `max` fix the range (otherwise the shown values set it). - The bar color is the widget's `color`. - **`scale="NAME"`** (`version="3"`) shares a range across every sparkline of one frame that carries the same name: they all take `lo`/`hi` from the smallest and largest of their shown values together, so a group of related gauges reads on one scale. A sparkline's own `min`/`max` still wins for that one; an inactive tab's sparkline is not in the group. ## table [#table] Rows of an array, in columns, with a cursor (version 2). Each `` has a header `title` and a body that is the cell template. ```tui {p.pid}{p.name}{p.cpu}{p.mem}

``` - It keeps a cursor like a list: `bind` holds the cursor row's key, `on:select` fires with the row in `keys`, and a focused table takes the arrow and paging keys. `checked`, `mark`, and the `check-*` built-ins work as on a list. - **Column widths**: a number of cells; a `%` of the table; an `fr` share of what is left, clamped by `min-width` and `max-width`; or, by default, the widest of the title and every cell. - **Styling**: a rule on a column styles its header cell. Body cells carry the column's `class` and its `class:NAME` guards, evaluated per row, so `.num { content-align: end; }` right-aligns a whole column and `#procs > item > text.hot` colors only the hot cells. One attribute-only `` styles whole rows. - Only the rows in view are laid out, painted, and dumped, so a table of thousands of rows costs what its visible rows cost. - Cells never wrap. `placeholder` shows on the first row when the array is empty. - `display: none` on a column hides it. Under `@media`, that is how a table drops columns on a narrow terminal. The same document at 30 columns: ```grid ╭────────────────────────────╮ │ PID NAME CPU%│ │ 412 WindowServer 87.3│ │ 8810 Code Helper 41.8│ │ 9921 node 18.2│ │ 15023 go 9.7│ ╰────────────────────────────╯ ``` A `column` with `on:click` fires when its header is clicked, the natural place for sorting. - **`priority="N"`** (`version="3"`) hides a column automatically when the visible columns no longer fit: the column with the smallest `N` hides first (a non-negative integer; the last one in document order breaks a tie), and it comes back once the table is wide enough again. A hidden column is exactly a `display: none` one — no header cell, no body cells — but it still counts toward the table's intrinsic width. Prefer `priority` to `@media` rules for column hiding; a column without `priority` never hides this way. ## tabs [#tabs] A strip of tab labels over the content of the active tab (version 2). ```tui panels the process table settings ``` - With `bind`, the active tab is the one whose id is the bound string, and activating a tab writes its id there; `on:select` fires with the id as the value. Without `bind`, the runtime remembers the tab. - Tabs switch with the `switch-to`, `move-next`, and `move-prev` built-ins, with `left` and `right` on a `focusable="true"` tabs, with a click on a label, and when focus moves into an inactive tab. - Only the active tab is laid out; widgets in the others keep their state (a list's cursor, an input's text). - When a tab becomes active while focus was in the old tab, on the strip, or nowhere, focus moves to the new tab's `focus="#id"` target, or its first focusable node. - **Labels always fit.** Every `label` when there is room, else every `short`, else only the active tab as `‹ label ›`. The same strip at 24 and 16 columns:

```grid 1 ovr ▸2 proc 3 cfg the process table ``` ```grid ▸‹ 2 processes › the process tabl ```

Labels are generated `text` nodes with the class `tab-label`, `:selected` on the active one; style them with `.tab-label`. In `version="3"`, `label` and `short` are templates, resolved every frame exactly like a `` body (`{path}`, no expressions), so a tab can show a live count: ``. A missing path resolves to empty, and any line break in the resolved value becomes a space, since a label is one row. In `version="1"`/`version="2"`, `{path}` in either attribute stays `V003`. ## hints [#hints] Key hints generated from the keymap (version 2). Every `` row with a `label` is a hint; `keycap` replaces the key text shown. ```tui {f.path} ``` By default (`scope="active"`), a hint shows only while one of its keys would actually fire, through the same key handling the app uses. Press `/` and focus moves to the input, which takes `q`, `/`, `space`, and `ctrl+a` for itself, so only the hint that still applies is left: ```grid / to filter ╭──────────────────────────────────────────╮ │cmd/app/main.go │ │internal/app.go │ │go.mod │ │README.md │ ╰──────────────────────────────────────────╯ esc done ``` `scope="all"` lists every hint, for a help screen. Items are laid out along the row (or down it with `layout: column`), and the ones that do not fit are dropped from the end. Style them with `.hint-key` and `.hint-label`. ## modal [#modal] A layer over the screen, open while `open` is truthy. ```tui the files you marked This cannot be undone.