@textui/widgets 0.3.0 → 0.5.0

package/dist/control/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/control/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAiB,YAAY,EAAE,MAAM,cAAc,CAAC;AAK1E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;CACxC;AAED,eAAO,MAAM,MAAM,sCAuLjB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/control/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAiB,YAAY,EAAE,MAAM,cAAc,CAAC;AAK1E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;CACxC;AAED,eAAO,MAAM,MAAM,sCAiMjB,CAAC"}

package/dist/control/select.js

@@ -146,6 +146,16 @@ export const Select = defineComponent('Select', (props) => {
         direction: 'column',
         border: { style: theme.border, color: focus.focused ? 'focus' : 'border' },
         padding: [0, 1],
+        /*
+         * The terminal cursor, parked at the start of the value.
+         *
+         * There is nothing to type here, so this is not a caret - it is the
+         * strongest "you are here" a terminal has, and a control that gives it up
+         * on focus is one whose only remaining signal is the colour of its border.
+         * Tabbing from a text field used to look like the focus had stayed behind
+         * in the field, because the cursor had.
+         */
+        cursor: focus.focused ? 0 : undefined,
         ...rest,
     }, h('box', {
         direction: 'row',

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;AAiB7C,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,2DAsOf,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,6 +1,7 @@
-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, FeedScrollbar } from './shared.js';
+import { FeedEntry } from './shared.js';
+import { ScrollThumb } from './scroll-thumb.js';
 /**
  * A viewport over entries of any height.
  *
@@ -19,7 +20,7 @@ import { FeedEntry, FeedScrollbar } from './shared.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,
@@ -102,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;
@@ -225,12 +262,46 @@ export const Feed = defineComponent('Feed', (props) => {
             y += height;
         }
     }
-    const drawn = entries.map((entry, i) => h(FeedEntry, {
-        key: i,
-        index: i,
-        onHeight: report.current,
-        ...(skipped[i] ? { placeholder: true, height: heights.current[i] } : {}),
-    }, skipped[i] ? null : entry));
+    /*
+     * A run of skipped entries is one box, not one box each.
+     *
+     * Skipping the *contents* of an entry took the wrapping away, which was the
+     * expensive part, and left everything else: an entry standing in for itself
+     * is still a component to reconcile and still a box to measure, four times a
+     * frame, at every level of the tree above it. Six hundred entries with
+     * thirty on screen was five hundred and seventy of those, and they cost the
+     * same whether or not anything in them had changed.
+     *
+     * The window is contiguous, so there are at most two runs - everything above
+     * it and everything below - and each collapses to a single box of exactly
+     * the height its entries had. The entries that *are* drawn keep their own
+     * index as their key, so scrolling moves the boundary without disturbing the
+     * identity of anything still on screen.
+     */
+    const drawn = [];
+    let gap = 0;
+    let gapFrom = 0;
+    const closeGap = () => {
+        if (gap <= 0)
+            return;
+        drawn.push(h('box', { key: `gap:${String(gapFrom)}`, height: gap }));
+        gap = 0;
+    };
+    for (let i = 0; i < count; i++) {
+        if (skipped[i]) {
+            if (gap === 0)
+                gapFrom = i;
+            gap += heights.current[i];
+            continue;
+        }
+        closeGap();
+        drawn.push(h(FeedEntry, {
+            key: i,
+            index: i,
+            onHeight: report.current,
+        }, entries[i]));
+    }
+    closeGap();
     // Content-sized: draw everything and let the box grow. Clamping to a
     // measurement here would clamp to how tall this happened to be last frame,
     // which for a box sized *by* its own content is nothing at all - the entries
@@ -256,7 +327,20 @@ export const Feed = defineComponent('Feed', (props) => {
             return true;
         },
     }, h('box', { flex: 1, direction: 'column', scrollTop: top, overflow: 'scroll' }, ...drawn), 
+    // `ScrollThumb`, the one every other viewport in the library draws. This
+    // one had its own: a column filled with the border glyph, taking no offset
+    // and saying nothing about where in the conversation you were or how much
+    // of it there is. Against the panel it sits inside, it read as a second
+    // border - and a bar that cannot be told from a frame is not a bar.
+    //
     // Only when there is somewhere to scroll. A track down the side of a feed
     // that fits is chrome that states something untrue.
-    scrollbar && limit > 0 ? h(FeedScrollbar, {}) : null);
+    scrollbar && limit > 0
+        ? h(ScrollThumb, {
+            total: total || measured.height,
+            rows: measured.height,
+            offset: top,
+            focused: focus.focused,
+        })
+        : null);
 });

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/data/shared.d.ts

@@ -13,17 +13,6 @@ import type { BoxProps } from '@textui/core';
  */
 export declare const FeedEntry: (props: BoxProps & {
     index: number;
-    /**
-     * Standing in for an entry that is not drawn, at the height it had.
-     *
-     * A stand-in must not answer the question it is an answer to. Its height is
-     * one the feed already knows - it is where it came from - and reporting it
-     * back is how a measurement gets to depend on itself: a round where a
-     * stand-in came out any shorter would teach the feed that it *was* shorter,
-     * and the next round would place the rest of them on top of each other.
-     */
-    placeholder?: boolean;
     onHeight(index: number, height: number): void;
 }) => import("@textui/core").RenderOutput;
-export declare const FeedScrollbar: (props: Record<string, never>) => import("@textui/core").RenderOutput;
 //# sourceMappingURL=shared.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/data/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS;WACb,MAAM;IACb;;;;;;;;OAQG;kBACW,OAAO;oBACL,MAAM,UAAU,MAAM,GAAG,IAAI;yCAY9C,CAAC;AAEF,eAAO,MAAM,aAAa,uEAGxB,CAAC"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/data/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS;WACb,MAAM;oBACG,MAAM,UAAU,MAAM,GAAG,IAAI;yCAW9C,CAAC"}

package/dist/data/shared.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/core';
+import { defineComponent, h, useEffect, useMeasure } from '@textui/core';
 /**
  * An entry that reports how tall it turned out to be.
  *
@@ -12,16 +12,10 @@ import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/cor
  * along with it, however little any of them had changed.
  */
 export const FeedEntry = defineComponent('FeedEntry', (props) => {
-    const { index, placeholder, onHeight, children, ...rest } = props;
+    const { index, onHeight, children, ...rest } = props;
     const measured = useMeasure();
     useEffect(() => {
-        if (placeholder)
-            return;
         onHeight(index, measured.height);
-    }, [measured.height, placeholder]);
+    }, [measured.height]);
     return h('box', { direction: 'column', ...rest }, children);
 });
-export const FeedScrollbar = defineComponent('FeedScrollbar', () => {
-    const theme = useTheme();
-    return h('box', { width: 1, fill: theme.borderChars().left, fg: 'borderSubtle' });
-});

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;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,qEA2ZzB,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"}

package/dist/overlay/command-palette.js

@@ -80,6 +80,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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/widgets",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "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.3.0"
+    "@textui/core": "^0.5.0"
   },
   "publishConfig": {
     "access": "public"

package/src/control/select.ts

@@ -202,6 +202,16 @@ export const Select = defineComponent<SelectProps>('Select', (props) => {
     direction: 'column',
     border: { style: theme.border, color: focus.focused ? 'focus' : 'border' },
     padding: [0, 1],
+    /*
+     * The terminal cursor, parked at the start of the value.
+     *
+     * There is nothing to type here, so this is not a caret - it is the
+     * strongest "you are here" a terminal has, and a control that gives it up
+     * on focus is one whose only remaining signal is the colour of its border.
+     * Tabbing from a text field used to look like the focus had stayed behind
+     * in the field, because the cursor had.
+     */
+    cursor: focus.focused ? 0 : undefined,
     ...rest,
   },
     h('box', {

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,
@@ -11,7 +12,8 @@ import {
   useState,
 } from '@textui/core';
 import { sizedByLayout } from '../viewport.js';
-import { FeedEntry, FeedScrollbar } from './shared.js';
+import { FeedEntry } from './shared.js';
+import { ScrollThumb } from './scroll-thumb.js';
 
 // ---------------------------------------------------------------------- feed
 
@@ -30,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;
@@ -72,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;
@@ -163,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));
@@ -263,12 +310,44 @@ export const Feed = defineComponent<FeedProps>('Feed', (props) => {
       y += height;
     }
   }
-  const drawn = entries.map((entry, i) => h(FeedEntry, {
-    key: i,
-    index: i,
-    onHeight: report.current,
-    ...(skipped[i] ? { placeholder: true, height: heights.current[i] as number } : {}),
-  }, skipped[i] ? null : entry));
+  /*
+   * A run of skipped entries is one box, not one box each.
+   *
+   * Skipping the *contents* of an entry took the wrapping away, which was the
+   * expensive part, and left everything else: an entry standing in for itself
+   * is still a component to reconcile and still a box to measure, four times a
+   * frame, at every level of the tree above it. Six hundred entries with
+   * thirty on screen was five hundred and seventy of those, and they cost the
+   * same whether or not anything in them had changed.
+   *
+   * The window is contiguous, so there are at most two runs - everything above
+   * it and everything below - and each collapses to a single box of exactly
+   * the height its entries had. The entries that *are* drawn keep their own
+   * index as their key, so scrolling moves the boundary without disturbing the
+   * identity of anything still on screen.
+   */
+  const drawn: unknown[] = [];
+  let gap = 0;
+  let gapFrom = 0;
+  const closeGap = (): void => {
+    if (gap <= 0) return;
+    drawn.push(h('box', { key: `gap:${String(gapFrom)}`, height: gap }));
+    gap = 0;
+  };
+  for (let i = 0; i < count; i++) {
+    if (skipped[i]) {
+      if (gap === 0) gapFrom = i;
+      gap += heights.current[i] as number;
+      continue;
+    }
+    closeGap();
+    drawn.push(h(FeedEntry, {
+      key: i,
+      index: i,
+      onHeight: report.current,
+    }, entries[i]));
+  }
+  closeGap();
 
   // Content-sized: draw everything and let the box grow. Clamping to a
   // measurement here would clamp to how tall this happened to be last frame,
@@ -296,8 +375,21 @@ export const Feed = defineComponent<FeedProps>('Feed', (props) => {
     },
   },
     h('box', { flex: 1, direction: 'column', scrollTop: top, overflow: 'scroll' }, ...drawn),
+    // `ScrollThumb`, the one every other viewport in the library draws. This
+    // one had its own: a column filled with the border glyph, taking no offset
+    // and saying nothing about where in the conversation you were or how much
+    // of it there is. Against the panel it sits inside, it read as a second
+    // border - and a bar that cannot be told from a frame is not a bar.
+    //
     // Only when there is somewhere to scroll. A track down the side of a feed
     // that fits is chrome that states something untrue.
-    scrollbar && limit > 0 ? h(FeedScrollbar, {}) : null,
+    scrollbar && limit > 0
+      ? h(ScrollThumb, {
+          total: total || measured.height,
+          rows: measured.height,
+          offset: top,
+          focused: focus.focused,
+        })
+      : null,
   );
 });

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/data/shared.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@textui/core';
-import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/core';
+import { defineComponent, h, useEffect, useMeasure } from '@textui/core';
 
 /**
  * An entry that reports how tall it turned out to be.
@@ -15,31 +15,15 @@ import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/cor
  */
 export const FeedEntry = defineComponent<BoxProps & {
   index: number;
-  /**
-   * Standing in for an entry that is not drawn, at the height it had.
-   *
-   * A stand-in must not answer the question it is an answer to. Its height is
-   * one the feed already knows - it is where it came from - and reporting it
-   * back is how a measurement gets to depend on itself: a round where a
-   * stand-in came out any shorter would teach the feed that it *was* shorter,
-   * and the next round would place the rest of them on top of each other.
-   */
-  placeholder?: boolean;
   onHeight(index: number, height: number): void;
 }>(
   'FeedEntry',
   (props) => {
-    const { index, placeholder, onHeight, children, ...rest } = props;
+    const { index, onHeight, children, ...rest } = props;
     const measured = useMeasure();
     useEffect(() => {
-      if (placeholder) return;
       onHeight(index, measured.height);
-    }, [measured.height, placeholder]);
+    }, [measured.height]);
     return h('box', { direction: 'column', ...rest }, children);
   },
 );
-
-export const FeedScrollbar = defineComponent<Record<string, never>>('FeedScrollbar', () => {
-  const theme = useTheme();
-  return h('box', { width: 1, fill: theme.borderChars().left, fg: 'borderSubtle' });
-});

package/src/overlay/command-palette.ts

@@ -166,6 +166,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.