@textui/widgets 0.4.0 → 0.5.0

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.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.4.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.4.0"
+    "@textui/core": "^0.5.0"
   },
   "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

@@ -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.