@textui/widgets 0.4.0 → 0.6.1

package/dist/control/text-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/control/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAwB,eAAe,EAAS,MAAM,cAAc,CAAC;AAiB3F,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,gEAAgE;IAChE,UAAU,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACrC;;;;;;;OAOG;IACH,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACnC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,+DA4jBnB,CAAC"}
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/control/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAwB,eAAe,EAAS,MAAM,cAAc,CAAC;AA0B3F,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,gEAAgE;IAChE,UAAU,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACrC;;;;;;;OAOG;IACH,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACnC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,+DA+rBnB,CAAC"}

package/dist/control/text-area.js

@@ -1,4 +1,6 @@
 import { defineComponent, graphemes, h, stringWidth, useClipboard, useEffect, useFocus, useInput, useMeasure, useRef, useState, useTheme, useTicker, } from '@textui/core';
+/** How many edits back a field remembers. */
+const MEMORY = 200;
 /**
  * A field that is a paragraph.
  *
@@ -27,6 +29,22 @@ export const TextArea = defineComponent('TextArea', (props) => {
     });
     const [caret, setCaret] = useState(value.length);
     const [lit, setLit] = useState(true);
+    /**
+     * What the field looked like before each edit, so one can be taken back.
+     *
+     * A ref rather than state: nothing here is drawn, and a render for a stack
+     * nobody can see is a render for nothing. `value` is the caller's, so an
+     * undo is an `onChange` back to a value this field held earlier - the same
+     * call any other edit makes.
+     *
+     * A run of typing is one step. Pushing a snapshot per character would make
+     * undo a backspace with extra ceremony, so the run is opened by the first
+     * character and closed by anything that is not another one: a delete, a
+     * newline, a caret move, a paste.
+     */
+    const edits = useRef({
+        past: [], future: [], typing: false,
+    });
     /**
      * Where the selection was started from; `null` when there is none.
      *
@@ -182,16 +200,58 @@ export const TextArea = defineComponent('TextArea', (props) => {
         }
         return lineStart(row.line) + row.start + column;
     };
-    const replace = (next, at) => {
+    /**
+     * Keep what is about to be overwritten.
+     *
+     * Three kinds, because undo is only useful at the granularity a person
+     * thinks in. `typing` opens a run and every character after joins it;
+     * `break` is the space or newline that finishes a word, which joins the run
+     * it ends rather than starting one of its own - so "one two" undone once
+     * leaves "one " and not "one". `edit` is everything else, and is always its
+     * own step: a kill somebody wants back is not part of the word before it.
+     */
+    const remember = (kind) => {
+        const state = edits.current;
+        // A run is open and this joins it, so there is nothing new to keep.
+        if (kind !== 'edit' && state.typing) {
+            state.typing = kind === 'typing';
+            state.future.length = 0;
+            return;
+        }
+        state.past.push({ value, caret: position });
+        // Bounded, because a field somebody has been typing in all afternoon
+        // should not be holding every version of itself.
+        if (state.past.length > MEMORY)
+            state.past.shift();
+        state.future.length = 0;
+        state.typing = kind === 'typing';
+    };
+    const replace = (next, at, kind = 'edit') => {
         const capped = maxLength !== undefined ? next.slice(0, maxLength) : next;
+        remember(kind);
         setAnchor(null);
         onChange(capped);
         setCaret(Math.max(0, Math.min(graphemes(capped).length, at)));
     };
+    /** Back one step, or forward again. `false` when there is nowhere to go. */
+    const step = (back) => {
+        const state = edits.current;
+        const from = back ? state.past : state.future;
+        const to = back ? state.future : state.past;
+        const found = from.pop();
+        if (!found)
+            return false;
+        to.push({ value, caret: position });
+        state.typing = false;
+        setAnchor(null);
+        onChange(found.value);
+        setCaret(Math.max(0, Math.min(graphemes(found.value).length, found.caret)));
+        return true;
+    };
     /** Typing over a selection replaces it - which is what deletes it, too. */
-    const insert = (text) => {
+    const insert = (text, kind = 'edit') => {
         const inserted = graphemes(text);
-        replace([...chars.slice(0, selectionStart), ...inserted, ...chars.slice(selectionEnd)].join(''), selectionStart + inserted.length);
+        replace([...chars.slice(0, selectionStart), ...inserted, ...chars.slice(selectionEnd)].join(''), selectionStart + inserted.length, kind);
     };
     /**
      * Move the caret, taking the selection with it when shift is held.
@@ -374,16 +434,25 @@ export const TextArea = defineComponent('TextArea', (props) => {
                 move(rowCaret(caretRow + 1), event.shift);
                 return true;
             }
-            case 'backspace':
+            case 'backspace': {
                 // A selection is what gets deleted when there is one - the character
                 // before the caret is only the fallback.
                 if (selected) {
                     insert('');
                     return true;
                 }
+                // `alt+backspace` is the word, which is the one readline binding
+                // that is a modifier on a key this field already handles.
+                if (event.alt || event.ctrl) {
+                    const from = wordStep(position, -1);
+                    if (from !== position)
+                        replace([...chars.slice(0, from), ...chars.slice(position)].join(''), from);
+                    return true;
+                }
                 if (position > 0)
                     replace([...chars.slice(0, position - 1), ...chars.slice(position)].join(''), position - 1);
                 return true;
+            }
             case 'delete':
                 if (selected) {
                     insert('');
@@ -419,6 +488,86 @@ export const TextArea = defineComponent('TextArea', (props) => {
                 return true;
             default: break;
         }
+        /*
+         * The readline set, which is what a shell has taught everyone's hands.
+         *
+         * The line and not the row: `ctrl+a` in a shell goes to the start of
+         * what you typed, and a wrapped paragraph is still one line of that. The
+         * arrow keys are the ones that move by row, because on screen the row
+         * above is what is above.
+         *
+         * `ctrl+f` and `ctrl+b` are deliberately absent. They are character
+         * motion in readline and the arrows already are, and leaving them
+         * unclaimed lets an application above this field spend them - which is
+         * where a find command usually goes.
+         */
+        if (event.ctrl || event.alt) {
+            const home = lineStart(caretLine);
+            const away = home + graphemes(lines[caretLine] ?? '').length;
+            switch (event.name) {
+                case 'a':
+                    if (event.ctrl) {
+                        move(home, event.shift);
+                        return true;
+                    }
+                    break;
+                case 'e':
+                    if (event.ctrl) {
+                        move(away, event.shift);
+                        return true;
+                    }
+                    break;
+                case 'k':
+                    if (event.ctrl) {
+                        // At the end of a line the newline is what is killed, which is
+                        // how `ctrl+k` joins two lines in every shell.
+                        const to = position === away ? Math.min(chars.length, position + 1) : away;
+                        if (to !== position)
+                            replace([...chars.slice(0, position), ...chars.slice(to)].join(''), position);
+                        return true;
+                    }
+                    break;
+                case 'u':
+                    if (event.ctrl) {
+                        if (position !== home)
+                            replace([...chars.slice(0, home), ...chars.slice(position)].join(''), home);
+                        return true;
+                    }
+                    break;
+                case 'w':
+                    if (event.ctrl) {
+                        const from = wordStep(position, -1);
+                        if (from !== position)
+                            replace([...chars.slice(0, from), ...chars.slice(position)].join(''), from);
+                        return true;
+                    }
+                    break;
+                case 'd':
+                    // `alt+d` only: `ctrl+d` is end-of-input to a terminal and an
+                    // application above this field answers it.
+                    if (event.alt) {
+                        const to = wordStep(position, 1);
+                        if (to !== position)
+                            replace([...chars.slice(0, position), ...chars.slice(to)].join(''), position);
+                        return true;
+                    }
+                    break;
+                /*
+                 * Undo on `ctrl+z`, redo on `alt+z`.
+                 *
+                 * `ctrl+z` is the suspend key to a shell, but this field runs under
+                 * a terminal in raw mode, where the byte arrives as itself and no
+                 * signal is raised. Redo is an alt chord because the usual second
+                 * key is `ctrl+shift+z`, and shift with a control character is not
+                 * something most terminals can say.
+                 */
+                case 'z':
+                    if (event.ctrl || event.alt)
+                        return step(event.ctrl);
+                    break;
+                default: break;
+            }
+        }
         // ctrl+j, for the one case where it is a key of its own: with the kitty
         // protocol on it arrives as `CSI 106;5u` and is named `j`. Without it
         // ctrl+j is 0x0a, the same byte as ctrl+enter, and the case above has
@@ -428,7 +577,9 @@ export const TextArea = defineComponent('TextArea', (props) => {
             return true;
         }
         if (event.char && !event.ctrl && !event.alt && !event.meta) {
-            insert(event.char);
+            // A run of ordinary characters is one undo step, and the space that
+            // ends a word belongs to the word rather than to the next one.
+            insert(event.char, /\s/.test(event.char) ? 'break' : 'typing');
             return true;
         }
         return false;

package/dist/data/feed.d.ts

@@ -14,6 +14,17 @@ export interface FeedProps extends BoxProps {
      * wants.
      */
     selectedIndex?: number;
+    /**
+     * Keep the selection in view for as long as this is set.
+     *
+     * Revealing on a change of `selectedIndex` is not enough for a caller that
+     * lands on the entry the cursor is already on - a search whose first hit is
+     * the row the cursor happens to sit on moves nothing, and the feed stays
+     * where it was showing a selection somewhere else. While this is set the
+     * selection is brought back whenever it is off screen, whatever the index
+     * did, which is what "the cursor is the thing being read" means.
+     */
+    pinSelection?: boolean;
     onSelect?(index: number): void;
     onActivate?(index: number): void;
     scrollbar?: boolean;

package/dist/data/feed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feed.d.ts","sourceRoot":"","sources":["../../src/data/feed.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAkB7C,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI,2DAmRf,CAAC"}
+{"version":3,"file":"feed.d.ts","sourceRoot":"","sources":["../../src/data/feed.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAmB7C,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI,2DAqTf,CAAC"}

package/dist/data/feed.js

@@ -1,4 +1,4 @@
-import { chorded, defineComponent, h, useFocus, useInput, useMeasure, useRef, useScrollExtent, useState, } from '@textui/core';
+import { chorded, defineComponent, h, useEffect, useFocus, useInput, useMeasure, useRef, useScrollExtent, useState, } from '@textui/core';
 import { sizedByLayout } from '../viewport.js';
 import { FeedEntry } from './shared.js';
 import { ScrollThumb } from './scroll-thumb.js';
@@ -20,7 +20,7 @@ import { ScrollThumb } from './scroll-thumb.js';
  * list of things that are not one line tall".
  */
 export const Feed = defineComponent('Feed', (props) => {
-    const { children, follow: followProp, onFollowChange, selectedIndex, onSelect, onActivate, pageKeys = 'focused', scrollbar = true, focusable = true, autoFocus, focusId, id, ...rest } = props;
+    const { children, follow: followProp, onFollowChange, selectedIndex, pinSelection, onSelect, onActivate, pageKeys = 'focused', scrollbar = true, focusable = true, autoFocus, focusId, id, ...rest } = props;
     const focus = useFocus({
         ...(focusId ? { id: focusId } : {}),
         disabled: !focusable,
@@ -103,6 +103,42 @@ export const Feed = defineComponent('Feed', (props) => {
         else
             scrollTo(top);
     };
+    /*
+     * A selection moved from outside is scrolled to as well.
+     *
+     * `reveal` was reachable only from this feed's own arrow keys, so a caller
+     * that drove `selectedIndex` - a search jumping to its next hit, a link to
+     * an entry, a cursor restored on the way back to a screen - moved a
+     * highlight the viewport never followed. The row was selected and off
+     * screen, which reads as the key having done nothing.
+     *
+     * The first value is skipped rather than revealed. A feed opens at the tail
+     * and its caller usually passes an index of zero on the way there, so
+     * honouring the initial value would scroll every transcript to the top of
+     * the conversation instead of the end of it - and on that first frame there
+     * are no measured heights to scroll by anyway.
+     */
+    const revealed = useRef(null);
+    useEffect(() => {
+        if (selectedIndex === undefined)
+            return;
+        const first = revealed.current === null;
+        revealed.current = index;
+        if (!first)
+            reveal(index);
+    }, [selectedIndex]);
+    // And every frame while the selection is pinned, but only when it has
+    // actually gone off screen - `reveal` on an entry already in view is a
+    // scroll to where the feed already is, reported as a follow change once a
+    // frame for as long as the pin lasts.
+    useEffect(() => {
+        if (!pinSelection || selectedIndex === undefined)
+            return;
+        const start = startOf(index);
+        const height = heights.current[index] ?? 1;
+        if (start < top || start + height > top + Math.max(1, measured.height))
+            reveal(index);
+    });
     const move = (delta) => {
         if (count === 0)
             return;

package/dist/data/markdown-view.d.ts

@@ -13,6 +13,14 @@ export interface MarkdownViewProps extends BoxProps {
     maxLines?: number;
     /** Dim everything, for reasoning and other second-voice text. */
     quiet?: boolean;
+    /**
+     * Text to pick out wherever it appears in the document.
+     *
+     * Passed to every run, and the painter colours the cells that hold it. The
+     * runs are already split by emphasis, so a match that falls across a bold
+     * boundary is coloured in both halves.
+     */
+    match?: string;
 }
 /**
  * Markdown, drawn into the width it was given.

package/dist/data/markdown-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-view.d.ts","sourceRoot":"","sources":["../../src/data/markdown-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAA0C,MAAM,cAAc,CAAC;AAclG,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IACrB,+EAA+E;IAC/E,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,mEA8KvB,CAAC"}
+{"version":3,"file":"markdown-view.d.ts","sourceRoot":"","sources":["../../src/data/markdown-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAA0C,MAAM,cAAc,CAAC;AAclG,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IACrB,+EAA+E;IAC/E,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,mEAkLvB,CAAC"}

package/dist/data/markdown-view.js

@@ -14,7 +14,10 @@ import { CodeViewer } from './code-viewer.js';
  * person to read.
  */
 export const MarkdownView = defineComponent('MarkdownView', (props) => {
-    const { content = '', rows: given, window: slice, maxLines, quiet, ...rest } = props;
+    const { content = '', rows: given, window: slice, maxLines, quiet, match, ...rest } = props;
+    // Spread into every run's style. Empty when nothing is being looked for, so
+    // a document with no search over it carries no extra prop per run.
+    const hit = match ? { match } : {};
     const theme = useTheme();
     const measured = useMeasure();
     const width = measured.width > 0 ? measured.width : 0;
@@ -133,7 +136,7 @@ export const MarkdownView = defineComponent('MarkdownView', (props) => {
             // anything: a row is its cells with a rule between each pair.
             out.push(h('box', { key, direction: 'row', overflow: 'hidden' }, ...row.cells.flatMap((cell, c) => [
                 h('text', { key: `s${c}`, content: c === 0 ? `${chars.left} ` : ` ${chars.left} `, fg, wrap: 'none' }),
-                h('box', { key: `c${c}`, direction: 'row', overflow: 'hidden' }, ...runNodes(cell, quiet ? { fg: 'muted' } : {})),
+                h('box', { key: `c${c}`, direction: 'row', overflow: 'hidden' }, ...runNodes(cell, { ...(quiet ? { fg: 'muted' } : {}), ...hit })),
             ]), h('text', { key: 'end', content: ` ${chars.right}`, fg, wrap: 'none' })));
             i++;
             continue;
@@ -148,11 +151,12 @@ export const MarkdownView = defineComponent('MarkdownView', (props) => {
                 bold: row.level <= 2,
                 underline: row.level === 1,
                 fg: quiet ? 'muted' : row.level <= 2 ? 'text' : 'muted',
+                ...hit,
             })));
             i++;
             continue;
         }
-        const style = { ...(quiet ? { fg: 'muted' } : row.fg ? { fg: row.fg } : {}) };
+        const style = { ...(quiet ? { fg: 'muted' } : row.fg ? { fg: row.fg } : {}), ...hit };
         if (row.prefix !== undefined) {
             out.push(h('box', { key, direction: 'row', gap: 1, overflow: 'hidden' }, h('text', { content: row.prefix, fg: quiet ? 'subtle' : row.prefixFg ?? 'accent' }), h('box', { direction: 'row', flex: 1, overflow: 'hidden' }, ...runNodes(row.runs, style))));
             i++;

package/dist/overlay/command-palette.d.ts

@@ -58,20 +58,6 @@ export interface CommandPaletteProps extends BoxProps {
      */
     openAt?: string;
 }
-/**
- * The command palette.
- *
- * It searches the command registry rather than a list someone maintained, so
- * a command registered anywhere is reachable here the moment it exists - which
- * is the payoff for insisting actions are commands. It also *runs* what it
- * finds, so choosing "Open dialog" here and pressing the button that opens a
- * dialog are the same act, reaching the same code.
- *
- * A command that declares an argument with `choices` gets a second level:
- * choosing it lists the choices, and picking one runs the command with it.
- * That is where sub-items come from - the command says what it needs and the
- * palette asks, rather than every caller inventing its own submenu.
- */
 export declare const CommandPalette: (props: CommandPaletteProps) => import("@textui/core").RenderOutput;
 /**
  * The argument the palette should ask about, if there is one.

package/dist/overlay/command-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../src/overlay/command-palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAiB/F,MAAM,WAAW,mBAAoB,SAAQ,QAAQ;IACnD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,iBAAiB,EAAE,GAAG,CAAC,MAAM,iBAAiB,EAAE,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACzD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,qEAsZzB,CAAC;AAEH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GACtC,OAAO,GAAG,SAAS,CAKrB;AAqBD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAehG"}
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../src/overlay/command-palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAiB/F,MAAM,WAAW,mBAAoB,SAAQ,QAAQ;IACnD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,iBAAiB,EAAE,GAAG,CAAC,MAAM,iBAAiB,EAAE,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACzD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,eAAO,MAAM,cAAc,qEAqczB,CAAC;AAEH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GACtC,OAAO,GAAG,SAAS,CAKrB;AAyCD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAehG"}

package/dist/overlay/command-palette.js

@@ -2,20 +2,6 @@ import { defineComponent, h, stringWidth, useEffect, useFocusScope, useInput, us
 import { TextInput } from '../control/index.js';
 import { Menu } from '../navigation/index.js';
 import { hint } from './shared.js';
-/**
- * The command palette.
- *
- * It searches the command registry rather than a list someone maintained, so
- * a command registered anywhere is reachable here the moment it exists - which
- * is the payoff for insisting actions are commands. It also *runs* what it
- * finds, so choosing "Open dialog" here and pressing the button that opens a
- * dialog are the same act, reaching the same code.
- *
- * A command that declares an argument with `choices` gets a second level:
- * choosing it lists the choices, and picking one runs the command with it.
- * That is where sub-items come from - the command says what it needs and the
- * palette asks, rather than every caller inventing its own submenu.
- */
 export const CommandPalette = defineComponent('CommandPalette', (props) => {
     const theme = useTheme();
     const runtime = useRuntime();
@@ -80,6 +66,11 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
             shortcut: command.shortcut ?? app?.keybindings.forCommand(command.id)[0],
             // A chevron, from `Menu`, for anything that will ask a question.
             children: argumentOf(command) ? [] : undefined,
+            // A switch's state, and `undefined` for everything that is not one -
+            // which is what keeps the check column off a menu of plain commands.
+            // The clause is evaluated per read, so a row opened twice reports
+            // what the switch is now rather than what it was when registered.
+            checked: app?.commands.isChecked(command.id),
             // The heading goes on the first row of each group, including the
             // first - a group with no name over it is the one the reader has to
             // work out from the rows in it.
@@ -94,10 +85,29 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
                 ? { sectionBefore: command.category }
                 : {}),
         }));
+    /** The argument answered last, when this question came after one. */
+    const previousOf = (asked) => {
+        const last = Object.keys(asked.collected).at(-1);
+        return last === undefined ? undefined : (asked.command.args ?? []).find((arg) => arg.name === last);
+    };
+    /**
+     * One question back.
+     *
+     * After a first question the second is asked again from the start with
+     * the earlier answer withdrawn: a wrong provider is corrected by choosing
+     * another, not by closing the whole picker and opening it again. At the
+     * first question, the command list.
+     */
     const back = () => {
         // `null` is "never mind": whatever the preview did gets undone by whoever
         // did it, because only the command knows what it changed.
         pending?.arg.preview?.(null);
+        const previous = pending ? previousOf(pending) : undefined;
+        if (pending && previous) {
+            const { [previous.name]: _withdrawn, ...rest } = pending.collected;
+            drillInto(pending.command, previous, rest);
+            return;
+        }
         setPending(null);
         setChoices([]);
         setQuery('');
@@ -139,9 +149,16 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
             setRefresh((n) => n + 1);
         onRun?.(id, args);
     };
-    /** Ask about one command. `choices` may be a function, and may be async. */
+    /**
+     * Ask about one command. `choices` may be a function, and may be async.
+     *
+     * A resolver is handed what was answered before this argument - and an
+     * argument that was not asked because its `default` stood was answered by
+     * that default. Left out, "the models of the chosen provider" would see no
+     * provider exactly when there was only one to choose from.
+     */
     const drillInto = (command, arg, collected = {}) => {
-        const resolved = typeof arg.choices === 'function' ? arg.choices() : arg.choices ?? [];
+        const resolved = typeof arg.choices === 'function' ? arg.choices(answeredBefore(command, arg, collected)) : arg.choices ?? [];
         setPending({ command, arg, collected });
         setQuery('');
         /*
@@ -248,8 +265,10 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
             // anybody chose to be at: the caller drilled in on their behalf, and
             // the level underneath is a list of one. Backing out to it reads as
             // "escape did nothing", and the second escape - the one that would
-            // close it - is spent leaving a screen nobody asked to see.
-            if (pending && !openAt) {
+            // close it - is spent leaving a screen nobody asked to see. A question
+            // that came after one is different: there the level underneath is the
+            // earlier question, which somebody did choose to be at.
+            if (pending && (!openAt || previousOf(pending) !== undefined)) {
                 back();
                 return true;
             }
@@ -262,7 +281,7 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
             onClose?.();
             return true;
         }
-        if (event.name === 'left' && pending && query === '' && !openAt) {
+        if (event.name === 'left' && pending && query === '' && (!openAt || previousOf(pending) !== undefined)) {
             back();
             return true;
         }
@@ -292,6 +311,8 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
     // there - and a sentence about what a mode does is exactly the thing a
     // person needs whole. So the line under the list follows the highlight: the
     // choice's description while there is one, the question's otherwise.
+    // It is the one line in the panel that wraps rather than truncates,
+    // because it is the one place a sentence can be read whole.
     const chosen = pending ? offered[index] : undefined;
     const detail = pending
         ? chosen?.description
@@ -310,7 +331,14 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
      * the things that decide it: a question with two short answers still needs
      * somewhere to type and a line saying what the keys do.
      */
-    const content = Math.max(...items.map((item) => rowWidth(item, descriptions)), ...(pending ? [stringWidth(pending.command.title) + 12] : [stringWidth(placeholder ?? '') + 4]));
+    const content = Math.max(...items.map((item) => rowWidth(item, descriptions)), ...(pending ? [stringWidth(pending.command.title) + 12] : [stringWidth(placeholder ?? '') + 4]), 
+    // The sentences the line under the list may show, so a question with
+    // three one-word answers is not a panel 28 wide wrapping a sentence
+    // three times under them. Capped like everything else by `maxWidth`.
+    ...(pending
+        ? [pending.arg.description ?? '', ...offered.map((choice) => choice.description ?? '')]
+            .map((sentence) => (sentence === '' ? 0 : stringWidth(sentence) + 6))
+        : []));
     return h('box', {
         role: 'dialog',
         label: 'Commands',
@@ -356,10 +384,19 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
             if (command && argumentOf(command))
                 choose();
         },
+        // A typed answer's field is the answer, so its placeholder is the
+        // question. A list's field is a filter, and the question goes where
+        // there is room to say it once: here, while the line under the list
+        // is busy saying what each answer means; under the list, whole and
+        // wrapped, when the answers have nothing to say for themselves and
+        // that line would otherwise repeat this one, cut to whatever width
+        // three short answers gave the panel.
         placeholder: pending
-            ? (pending.arg.description ?? (pending.arg.choices === undefined
-                ? `${pending.command.title}${theme.glyphs.ellipsis}`
-                : `Choose ${pending.command.title.toLowerCase()}${theme.glyphs.ellipsis}`))
+            ? (pending.arg.choices === undefined
+                ? pending.arg.description ?? `${pending.command.title}${theme.glyphs.ellipsis}`
+                : offered.some((choice) => choice.description) && pending.arg.description
+                    ? pending.arg.description
+                    : `Choose ${pending.command.title.toLowerCase()}${theme.glyphs.ellipsis}`)
             : (placeholder ?? `Type a command${theme.glyphs.ellipsis}`),
         search: true,
         autoFocus: true,
@@ -381,7 +418,7 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
     }), h('box', { height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), 
     // What the highlighted row actually is, and how to move around. A palette
     // that shows only titles makes you run something to find out what it does.
-    h('box', { direction: 'row', gap: 1 }, h('text', { content: detail, fg: 'muted', flex: 1, truncate: 'end' }), h('text', { content: `${rows.length}`, fg: 'subtle' })), h('box', { direction: 'row', gap: 1 }, h('text', {
+    h('box', { direction: 'row', gap: 1, align: 'start' }, h('text', { content: detail, fg: 'muted', flex: 1, wrap: 'word' }), h('text', { content: `${rows.length}`, fg: 'subtle' })), h('box', { direction: 'row', gap: 1 }, h('text', {
         content: pending
             ? (pending.arg.choices === undefined
                 ? hint(theme, ['type it', 'enter confirm', 'esc back'])
@@ -413,6 +450,23 @@ export function argumentOf(command, collected = {}) {
     return (command.args ?? []).find((arg) => collected[arg.name] === undefined &&
         (arg.choices !== undefined || (arg.required === true && arg.default === undefined)));
 }
+/**
+ * What a `choices` resolver is told: the answers given, under the defaults
+ * of the arguments before this one that stood in for a question.
+ *
+ * Only the ones ahead of it in the declaration. An argument after this one
+ * has not been reached, and its default is not yet an answer to anything.
+ */
+function answeredBefore(command, arg, collected) {
+    const answered = {};
+    for (const spec of command.args ?? []) {
+        if (spec === arg)
+            break;
+        if (spec.default !== undefined)
+            answered[spec.name] = spec.default;
+    }
+    return { ...answered, ...collected };
+}
 /** The short form and the long one, as one shape. */
 function asChoice(choice) {
     return typeof choice === 'string' ? { value: choice } : choice;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/widgets",
-  "version": "0.4.0",
+  "version": "0.6.1",
   "description": "The TextUI component catalog - layout, display, controls, data, overlays and charts",
   "keywords": [
     "terminal",
@@ -46,7 +46,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@textui/core": "^0.4.0"
+    "@textui/core": "^0.6.1"
   },
   "publishConfig": {
     "access": "public"

package/src/control/text-area.ts

@@ -15,6 +15,15 @@ import {
   useTicker,
 } from '@textui/core';
 
+/** A version of the field, kept so an edit can be taken back. */
+interface Snapshot {
+  value: string;
+  caret: number;
+}
+
+/** How many edits back a field remembers. */
+const MEMORY = 200;
+
 export interface TextAreaProps extends BoxProps {
   value: string;
   onChange(value: string): void;
@@ -130,6 +139,23 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
   const [caret, setCaret] = useState(value.length);
   const [lit, setLit] = useState(true);
 
+  /**
+   * What the field looked like before each edit, so one can be taken back.
+   *
+   * A ref rather than state: nothing here is drawn, and a render for a stack
+   * nobody can see is a render for nothing. `value` is the caller's, so an
+   * undo is an `onChange` back to a value this field held earlier - the same
+   * call any other edit makes.
+   *
+   * A run of typing is one step. Pushing a snapshot per character would make
+   * undo a backspace with extra ceremony, so the run is opened by the first
+   * character and closed by anything that is not another one: a delete, a
+   * newline, a caret move, a paste.
+   */
+  const edits = useRef<{ past: Snapshot[]; future: Snapshot[]; typing: boolean }>({
+    past: [], future: [], typing: false,
+  });
+
   /**
    * Where the selection was started from; `null` when there is none.
    *
@@ -297,19 +323,58 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
     return lineStart(row.line) + row.start + column;
   };
 
-  const replace = (next: string, at: number): void => {
+  /**
+   * Keep what is about to be overwritten.
+   *
+   * Three kinds, because undo is only useful at the granularity a person
+   * thinks in. `typing` opens a run and every character after joins it;
+   * `break` is the space or newline that finishes a word, which joins the run
+   * it ends rather than starting one of its own - so "one two" undone once
+   * leaves "one " and not "one". `edit` is everything else, and is always its
+   * own step: a kill somebody wants back is not part of the word before it.
+   */
+  const remember = (kind: 'typing' | 'break' | 'edit'): void => {
+    const state = edits.current;
+    // A run is open and this joins it, so there is nothing new to keep.
+    if (kind !== 'edit' && state.typing) { state.typing = kind === 'typing'; state.future.length = 0; return; }
+    state.past.push({ value, caret: position });
+    // Bounded, because a field somebody has been typing in all afternoon
+    // should not be holding every version of itself.
+    if (state.past.length > MEMORY) state.past.shift();
+    state.future.length = 0;
+    state.typing = kind === 'typing';
+  };
+
+  const replace = (next: string, at: number, kind: 'typing' | 'break' | 'edit' = 'edit'): void => {
     const capped = maxLength !== undefined ? next.slice(0, maxLength) : next;
+    remember(kind);
     setAnchor(null);
     onChange(capped);
     setCaret(Math.max(0, Math.min(graphemes(capped).length, at)));
   };
 
+  /** Back one step, or forward again. `false` when there is nowhere to go. */
+  const step = (back: boolean): boolean => {
+    const state = edits.current;
+    const from = back ? state.past : state.future;
+    const to = back ? state.future : state.past;
+    const found = from.pop();
+    if (!found) return false;
+    to.push({ value, caret: position });
+    state.typing = false;
+    setAnchor(null);
+    onChange(found.value);
+    setCaret(Math.max(0, Math.min(graphemes(found.value).length, found.caret)));
+    return true;
+  };
+
   /** Typing over a selection replaces it - which is what deletes it, too. */
-  const insert = (text: string): void => {
+  const insert = (text: string, kind: 'typing' | 'break' | 'edit' = 'edit'): void => {
     const inserted = graphemes(text);
     replace(
       [...chars.slice(0, selectionStart), ...inserted, ...chars.slice(selectionEnd)].join(''),
       selectionStart + inserted.length,
+      kind,
     );
   };
 
@@ -457,12 +522,20 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
           return true;
         }
 
-        case 'backspace':
+        case 'backspace': {
           // A selection is what gets deleted when there is one - the character
           // before the caret is only the fallback.
           if (selected) { insert(''); return true; }
+          // `alt+backspace` is the word, which is the one readline binding
+          // that is a modifier on a key this field already handles.
+          if (event.alt || event.ctrl) {
+            const from = wordStep(position, -1);
+            if (from !== position) replace([...chars.slice(0, from), ...chars.slice(position)].join(''), from);
+            return true;
+          }
           if (position > 0) replace([...chars.slice(0, position - 1), ...chars.slice(position)].join(''), position - 1);
           return true;
+        }
         case 'delete':
           if (selected) { insert(''); return true; }
           if (position < chars.length) replace([...chars.slice(0, position), ...chars.slice(position + 1)].join(''), position);
@@ -489,6 +562,71 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
         default: break;
       }
 
+      /*
+       * The readline set, which is what a shell has taught everyone's hands.
+       *
+       * The line and not the row: `ctrl+a` in a shell goes to the start of
+       * what you typed, and a wrapped paragraph is still one line of that. The
+       * arrow keys are the ones that move by row, because on screen the row
+       * above is what is above.
+       *
+       * `ctrl+f` and `ctrl+b` are deliberately absent. They are character
+       * motion in readline and the arrows already are, and leaving them
+       * unclaimed lets an application above this field spend them - which is
+       * where a find command usually goes.
+       */
+      if (event.ctrl || event.alt) {
+        const home = lineStart(caretLine);
+        const away = home + graphemes(lines[caretLine] ?? '').length;
+        switch (event.name) {
+          case 'a': if (event.ctrl) { move(home, event.shift); return true; } break;
+          case 'e': if (event.ctrl) { move(away, event.shift); return true; } break;
+          case 'k':
+            if (event.ctrl) {
+              // At the end of a line the newline is what is killed, which is
+              // how `ctrl+k` joins two lines in every shell.
+              const to = position === away ? Math.min(chars.length, position + 1) : away;
+              if (to !== position) replace([...chars.slice(0, position), ...chars.slice(to)].join(''), position);
+              return true;
+            }
+            break;
+          case 'u':
+            if (event.ctrl) {
+              if (position !== home) replace([...chars.slice(0, home), ...chars.slice(position)].join(''), home);
+              return true;
+            }
+            break;
+          case 'w':
+            if (event.ctrl) {
+              const from = wordStep(position, -1);
+              if (from !== position) replace([...chars.slice(0, from), ...chars.slice(position)].join(''), from);
+              return true;
+            }
+            break;
+          case 'd':
+            // `alt+d` only: `ctrl+d` is end-of-input to a terminal and an
+            // application above this field answers it.
+            if (event.alt) {
+              const to = wordStep(position, 1);
+              if (to !== position) replace([...chars.slice(0, position), ...chars.slice(to)].join(''), position);
+              return true;
+            }
+            break;
+          /*
+           * Undo on `ctrl+z`, redo on `alt+z`.
+           *
+           * `ctrl+z` is the suspend key to a shell, but this field runs under
+           * a terminal in raw mode, where the byte arrives as itself and no
+           * signal is raised. Redo is an alt chord because the usual second
+           * key is `ctrl+shift+z`, and shift with a control character is not
+           * something most terminals can say.
+           */
+          case 'z': if (event.ctrl || event.alt) return step(event.ctrl);
+            break;
+          default: break;
+        }
+      }
+
       // ctrl+j, for the one case where it is a key of its own: with the kitty
       // protocol on it arrives as `CSI 106;5u` and is named `j`. Without it
       // ctrl+j is 0x0a, the same byte as ctrl+enter, and the case above has
@@ -496,7 +634,9 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
       if (event.name === 'j' && event.ctrl) { insert('\n'); return true; }
 
       if (event.char && !event.ctrl && !event.alt && !event.meta) {
-        insert(event.char);
+        // A run of ordinary characters is one undo step, and the space that
+        // ends a word belongs to the word rather than to the next one.
+        insert(event.char, /\s/.test(event.char) ? 'break' : 'typing');
         return true;
       }
       return false;

package/src/data/feed.ts

@@ -3,6 +3,7 @@ import {
   chorded,
   defineComponent,
   h,
+  useEffect,
   useFocus,
   useInput,
   useMeasure,
@@ -31,6 +32,17 @@ export interface FeedProps extends BoxProps {
    * wants.
    */
   selectedIndex?: number;
+  /**
+   * Keep the selection in view for as long as this is set.
+   *
+   * Revealing on a change of `selectedIndex` is not enough for a caller that
+   * lands on the entry the cursor is already on - a search whose first hit is
+   * the row the cursor happens to sit on moves nothing, and the feed stays
+   * where it was showing a selection somewhere else. While this is set the
+   * selection is brought back whenever it is off screen, whatever the index
+   * did, which is what "the cursor is the thing being read" means.
+   */
+  pinSelection?: boolean;
   onSelect?(index: number): void;
   onActivate?(index: number): void;
   scrollbar?: boolean;
@@ -73,7 +85,7 @@ export interface FeedProps extends BoxProps {
  */
 export const Feed = defineComponent<FeedProps>('Feed', (props) => {
   const {
-    children, follow: followProp, onFollowChange, selectedIndex, onSelect, onActivate,
+    children, follow: followProp, onFollowChange, selectedIndex, pinSelection, onSelect, onActivate,
     pageKeys = 'focused',
     scrollbar = true, focusable = true, autoFocus, focusId, id, ...rest
   } = props;
@@ -164,6 +176,40 @@ export const Feed = defineComponent<FeedProps>('Feed', (props) => {
     else scrollTo(top);
   };
 
+  /*
+   * A selection moved from outside is scrolled to as well.
+   *
+   * `reveal` was reachable only from this feed's own arrow keys, so a caller
+   * that drove `selectedIndex` - a search jumping to its next hit, a link to
+   * an entry, a cursor restored on the way back to a screen - moved a
+   * highlight the viewport never followed. The row was selected and off
+   * screen, which reads as the key having done nothing.
+   *
+   * The first value is skipped rather than revealed. A feed opens at the tail
+   * and its caller usually passes an index of zero on the way there, so
+   * honouring the initial value would scroll every transcript to the top of
+   * the conversation instead of the end of it - and on that first frame there
+   * are no measured heights to scroll by anyway.
+   */
+  const revealed = useRef<number | null>(null);
+  useEffect(() => {
+    if (selectedIndex === undefined) return;
+    const first = revealed.current === null;
+    revealed.current = index;
+    if (!first) reveal(index);
+  }, [selectedIndex]);
+
+  // And every frame while the selection is pinned, but only when it has
+  // actually gone off screen - `reveal` on an entry already in view is a
+  // scroll to where the feed already is, reported as a follow change once a
+  // frame for as long as the pin lasts.
+  useEffect(() => {
+    if (!pinSelection || selectedIndex === undefined) return;
+    const start = startOf(index);
+    const height = heights.current[index] ?? 1;
+    if (start < top || start + height > top + Math.max(1, measured.height)) reveal(index);
+  });
+
   const move = (delta: number): void => {
     if (count === 0) return;
     const next = Math.max(0, Math.min(count - 1, index + delta));

package/src/data/markdown-view.ts

@@ -23,6 +23,14 @@ export interface MarkdownViewProps extends BoxProps {
   maxLines?: number;
   /** Dim everything, for reasoning and other second-voice text. */
   quiet?: boolean;
+  /**
+   * Text to pick out wherever it appears in the document.
+   *
+   * Passed to every run, and the painter colours the cells that hold it. The
+   * runs are already split by emphasis, so a match that falls across a bold
+   * boundary is coloured in both halves.
+   */
+  match?: string;
 }
 
 /**
@@ -39,7 +47,10 @@ export interface MarkdownViewProps extends BoxProps {
  * person to read.
  */
 export const MarkdownView = defineComponent<MarkdownViewProps>('MarkdownView', (props) => {
-  const { content = '', rows: given, window: slice, maxLines, quiet, ...rest } = props;
+  const { content = '', rows: given, window: slice, maxLines, quiet, match, ...rest } = props;
+  // Spread into every run's style. Empty when nothing is being looked for, so
+  // a document with no search over it carries no extra prop per run.
+  const hit = match ? { match } : {};
   const theme = useTheme();
   const measured = useMeasure();
   const width = measured.width > 0 ? measured.width : 0;
@@ -169,7 +180,7 @@ export const MarkdownView = defineComponent<MarkdownViewProps>('MarkdownView', (
         ...row.cells.flatMap((cell, c) => [
           h('text', { key: `s${c}`, content: c === 0 ? `${chars.left} ` : ` ${chars.left} `, fg, wrap: 'none' }),
           h('box', { key: `c${c}`, direction: 'row', overflow: 'hidden' },
-            ...runNodes(cell, quiet ? { fg: 'muted' as StyleColor } : {})),
+            ...runNodes(cell, { ...(quiet ? { fg: 'muted' as StyleColor } : {}), ...hit })),
         ]),
         h('text', { key: 'end', content: ` ${chars.right}`, fg, wrap: 'none' })));
       i++;
@@ -188,12 +199,13 @@ export const MarkdownView = defineComponent<MarkdownViewProps>('MarkdownView', (
           bold: row.level <= 2,
           underline: row.level === 1,
           fg: quiet ? 'muted' : row.level <= 2 ? 'text' : 'muted',
+          ...hit,
         })));
       i++;
       continue;
     }
 
-    const style = { ...(quiet ? { fg: 'muted' as StyleColor } : row.fg ? { fg: row.fg } : {}) };
+    const style = { ...(quiet ? { fg: 'muted' as StyleColor } : row.fg ? { fg: row.fg } : {}), ...hit };
     if (row.prefix !== undefined) {
       out.push(h('box', { key, direction: 'row', gap: 1, overflow: 'hidden' },
         h('text', { content: row.prefix, fg: quiet ? 'subtle' : row.prefixFg ?? 'accent' }),

package/src/overlay/command-palette.ts

@@ -89,6 +89,15 @@ export interface CommandPaletteProps extends BoxProps {
  * That is where sub-items come from - the command says what it needs and the
  * palette asks, rather than every caller inventing its own submenu.
  */
+
+/** The question being asked: the command, the argument, and the answers given before it. */
+interface Pending {
+  command: CommandDefinition;
+  arg: ArgSpec;
+  /** Answers given so far, for a command that asks for more than one. */
+  collected: Record<string, unknown>;
+}
+
 export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalette', (props) => {
   const theme = useTheme();
   const runtime = useRuntime();
@@ -101,12 +110,7 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
   const [query, setQuery] = useState('');
   const [highlight, setHighlight] = useState(0);
   /** The command being asked about, when the palette has drilled in. */
-  const [pending, setPending] = useState<{
-    command: CommandDefinition;
-    arg: ArgSpec;
-    /** Answers given so far, for a command that asks for more than one. */
-    collected: Record<string, unknown>;
-  } | null>(null);
+  const [pending, setPending] = useState<Pending | null>(null);
   const [choices, setChoices] = useState<ArgChoice[]>([]);
   /**
    * Whether the answer to "what may I choose" is still on its way.
@@ -166,6 +170,11 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
         shortcut: command.shortcut ?? app?.keybindings.forCommand(command.id)[0],
         // A chevron, from `Menu`, for anything that will ask a question.
         children: argumentOf(command) ? [] : undefined,
+        // A switch's state, and `undefined` for everything that is not one -
+        // which is what keeps the check column off a menu of plain commands.
+        // The clause is evaluated per read, so a row opened twice reports
+        // what the switch is now rather than what it was when registered.
+        checked: app?.commands.isChecked(command.id),
         // The heading goes on the first row of each group, including the
         // first - a group with no name over it is the one the reader has to
         // work out from the rows in it.
@@ -181,10 +190,30 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
           : {}),
       }));
 
+  /** The argument answered last, when this question came after one. */
+  const previousOf = (asked: Pending): ArgSpec | undefined => {
+    const last = Object.keys(asked.collected).at(-1);
+    return last === undefined ? undefined : (asked.command.args ?? []).find((arg) => arg.name === last);
+  };
+
+  /**
+   * One question back.
+   *
+   * After a first question the second is asked again from the start with
+   * the earlier answer withdrawn: a wrong provider is corrected by choosing
+   * another, not by closing the whole picker and opening it again. At the
+   * first question, the command list.
+   */
   const back = (): void => {
     // `null` is "never mind": whatever the preview did gets undone by whoever
     // did it, because only the command knows what it changed.
     pending?.arg.preview?.(null);
+    const previous = pending ? previousOf(pending) : undefined;
+    if (pending && previous) {
+      const { [previous.name]: _withdrawn, ...rest } = pending.collected;
+      drillInto(pending.command, previous, rest);
+      return;
+    }
     setPending(null);
     setChoices([]);
     setQuery('');
@@ -228,13 +257,20 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
     onRun?.(id, args);
   };
 
-  /** Ask about one command. `choices` may be a function, and may be async. */
+  /**
+   * Ask about one command. `choices` may be a function, and may be async.
+   *
+   * A resolver is handed what was answered before this argument - and an
+   * argument that was not asked because its `default` stood was answered by
+   * that default. Left out, "the models of the chosen provider" would see no
+   * provider exactly when there was only one to choose from.
+   */
   const drillInto = (
     command: CommandDefinition,
     arg: ArgSpec,
     collected: Record<string, unknown> = {},
   ): void => {
-    const resolved = typeof arg.choices === 'function' ? arg.choices() : arg.choices ?? [];
+    const resolved = typeof arg.choices === 'function' ? arg.choices(answeredBefore(command, arg, collected)) : arg.choices ?? [];
     setPending({ command, arg, collected });
     setQuery('');
 
@@ -345,8 +381,10 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
         // anybody chose to be at: the caller drilled in on their behalf, and
         // the level underneath is a list of one. Backing out to it reads as
         // "escape did nothing", and the second escape - the one that would
-        // close it - is spent leaving a screen nobody asked to see.
-        if (pending && !openAt) { back(); return true; }
+        // close it - is spent leaving a screen nobody asked to see. A question
+        // that came after one is different: there the level underneath is the
+        // earlier question, which somebody did choose to be at.
+        if (pending && (!openAt || previousOf(pending) !== undefined)) { back(); return true; }
         // Whatever a highlighted choice previewed has to be put back on the
         // way out, and `null` is how the command is told to undo it - only it
         // knows what it changed. `back()` did that, so closing instead of
@@ -356,7 +394,7 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
         onClose?.();
         return true;
       }
-      if (event.name === 'left' && pending && query === '' && !openAt) { back(); return true; }
+      if (event.name === 'left' && pending && query === '' && (!openAt || previousOf(pending) !== undefined)) { back(); return true; }
       // Wrapping, both ways. A list you can walk off the end of makes you
       // check where you are before every press; one that comes round means the
       // last item is one key from the first.
@@ -384,6 +422,8 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
   // there - and a sentence about what a mode does is exactly the thing a
   // person needs whole. So the line under the list follows the highlight: the
   // choice's description while there is one, the question's otherwise.
+  // It is the one line in the panel that wraps rather than truncates,
+  // because it is the one place a sentence can be read whole.
   const chosen = pending ? offered[index] : undefined;
   const detail = pending
     ? chosen?.description
@@ -406,6 +446,13 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
   const content = Math.max(
     ...items.map((item) => rowWidth(item, descriptions)),
     ...(pending ? [stringWidth(pending.command.title) + 12] : [stringWidth(placeholder ?? '') + 4]),
+    // The sentences the line under the list may show, so a question with
+    // three one-word answers is not a panel 28 wide wrapping a sentence
+    // three times under them. Capped like everything else by `maxWidth`.
+    ...(pending
+      ? [pending.arg.description ?? '', ...offered.map((choice) => choice.description ?? '')]
+        .map((sentence) => (sentence === '' ? 0 : stringWidth(sentence) + 6))
+      : []),
   );
 
   return h('box', {
@@ -452,10 +499,19 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
         const command = matches[index];
         if (command && argumentOf(command)) choose();
       },
+      // A typed answer's field is the answer, so its placeholder is the
+      // question. A list's field is a filter, and the question goes where
+      // there is room to say it once: here, while the line under the list
+      // is busy saying what each answer means; under the list, whole and
+      // wrapped, when the answers have nothing to say for themselves and
+      // that line would otherwise repeat this one, cut to whatever width
+      // three short answers gave the panel.
       placeholder: pending
-        ? (pending.arg.description ?? (pending.arg.choices === undefined
-          ? `${pending.command.title}${theme.glyphs.ellipsis}`
-          : `Choose ${pending.command.title.toLowerCase()}${theme.glyphs.ellipsis}`))
+        ? (pending.arg.choices === undefined
+          ? pending.arg.description ?? `${pending.command.title}${theme.glyphs.ellipsis}`
+          : offered.some((choice) => choice.description) && pending.arg.description
+            ? pending.arg.description
+            : `Choose ${pending.command.title.toLowerCase()}${theme.glyphs.ellipsis}`)
         : (placeholder ?? `Type a command${theme.glyphs.ellipsis}`),
       search: true,
       autoFocus: true,
@@ -479,8 +535,8 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
     h('box', { height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }),
     // What the highlighted row actually is, and how to move around. A palette
     // that shows only titles makes you run something to find out what it does.
-    h('box', { direction: 'row', gap: 1 },
-      h('text', { content: detail, fg: 'muted', flex: 1, truncate: 'end' }),
+    h('box', { direction: 'row', gap: 1, align: 'start' },
+      h('text', { content: detail, fg: 'muted', flex: 1, wrap: 'word' }),
       h('text', { content: `${rows.length}`, fg: 'subtle' })),
     h('box', { direction: 'row', gap: 1 },
       h('text', {
@@ -523,6 +579,26 @@ export function argumentOf(
   );
 }
 
+/**
+ * What a `choices` resolver is told: the answers given, under the defaults
+ * of the arguments before this one that stood in for a question.
+ *
+ * Only the ones ahead of it in the declaration. An argument after this one
+ * has not been reached, and its default is not yet an answer to anything.
+ */
+function answeredBefore(
+  command: CommandDefinition,
+  arg: ArgSpec,
+  collected: Record<string, unknown>,
+): Record<string, unknown> {
+  const answered: Record<string, unknown> = {};
+  for (const spec of command.args ?? []) {
+    if (spec === arg) break;
+    if (spec.default !== undefined) answered[spec.name] = spec.default;
+  }
+  return { ...answered, ...collected };
+}
+
 /** The short form and the long one, as one shape. */
 function asChoice(choice: string | ArgChoice): ArgChoice {
   return typeof choice === 'string' ? { value: choice } : choice;