@textui/widgets 0.1.0 → 0.3.0

package/dist/control/text-area.js

@@ -1,4 +1,4 @@
-import { defineComponent, graphemes, h, stringWidth, useEffect, useFocus, useInput, useMeasure, useState, useTicker, } from '@textui/core';
+import { defineComponent, graphemes, h, stringWidth, useClipboard, useEffect, useFocus, useInput, useMeasure, useRef, useState, useTheme, useTicker, } from '@textui/core';
 /**
  * A field that is a paragraph.
  *
@@ -17,7 +17,9 @@ import { defineComponent, graphemes, h, stringWidth, useEffect, useFocus, useInp
  * cannot have single-letter global commands, and why it does not need to.
  */
 export const TextArea = defineComponent('TextArea', (props) => {
-    const { value, onChange, onSubmit, onCancel, onOverflow, onEdge, placeholder, maxRows = 6, maxLength, autoFocus, focusId, disabled, caretTone, blink = true, wrap = 'word', caretStyle = 'underline', ...rest } = props;
+    const { value, onChange, onSubmit, onCancel, onOverflow, onEdge, placeholder, maxRows = 6, maxLength, autoFocus, focusId, disabled, caretTone, blink = true, wrap = 'word', caretStyle, copyOnSelect = true, ...rest } = props;
+    const theme = useTheme();
+    const clipboard = useClipboard();
     const focus = useFocus({
         ...(focusId ? { id: focusId } : {}),
         disabled,
@@ -25,6 +27,30 @@ export const TextArea = defineComponent('TextArea', (props) => {
     });
     const [caret, setCaret] = useState(value.length);
     const [lit, setLit] = useState(true);
+    /**
+     * Where the selection was started from; `null` when there is none.
+     *
+     * The caret is the other end, so a selection is a pair of offsets that
+     * remembers which way round it was made - which is what lets shift+left
+     * shrink a rightward selection instead of starting a new one.
+     *
+     * Kept in a ref as well because a drag can outrun the frame loop: `down`
+     * and `up` can both land inside one frame, and the handler that has to
+     * decide whether anything was selected would be reading last frame's state.
+     */
+    const anchorRef = useRef(null);
+    /**
+     * The last press, so a second one on the same cell can be told from a first.
+     *
+     * A terminal has no notion of a double click - it reports presses - so the
+     * count is kept here and reset by either moving or waiting.
+     */
+    const repeat = useRef({ at: Number.NEGATIVE_INFINITY, x: -1, y: -1, count: 0, dragged: false });
+    const [anchor, setAnchorState] = useState(null);
+    const setAnchor = (next) => {
+        anchorRef.current = next;
+        setAnchorState(next);
+    };
     // Only while it has the keyboard, and solid the moment it loses it: a caret
     // blinking in a field nobody is typing into is two carets on one screen.
     useTicker(() => setLit((on) => !on), { fps: 2, enabled: blink && focus.focused });
@@ -36,11 +62,38 @@ export const TextArea = defineComponent('TextArea', (props) => {
      * whatever the cell already had - a caret over selected or coloured text
      * stays legible instead of painting the theme's cursor colour over it.
      */
-    const mark = caretStyle === 'block'
+    // `bar` has no drawn form that does not occupy a cell of its own, so it
+    // marks the cell the way an underline does - which is what a bar caret
+    // looks like anyway once it has nowhere of its own to stand.
+    const shape = caretStyle ?? (theme.cursor === 'block' ? 'block' : 'underline');
+    const mark = shape === 'block'
         ? { inverse: true, fg: caretTone ?? 'cursor' }
         : { underline: true, fg: caretTone ?? 'cursor' };
     const chars = graphemes(value);
     const position = Math.min(caret, chars.length);
+    /*
+     * The selection, as the two offsets it covers.
+     *
+     * Clamped against the value the same way the caret is: `value` is a prop, so
+     * it can be replaced under a live selection - a history walked with up and
+     * down does exactly that - and an anchor past the end of the new text would
+     * select backwards into nothing.
+     */
+    const anchoredAt = anchor === null ? null : Math.min(anchor, chars.length);
+    const selectionStart = anchoredAt === null ? position : Math.min(anchoredAt, position);
+    const selectionEnd = anchoredAt === null ? position : Math.max(anchoredAt, position);
+    const selected = selectionEnd > selectionStart;
+    /**
+     * How a selected cell is drawn.
+     *
+     * The same pair a selected list row uses, and dimmer once the field loses
+     * the keyboard: a selection left visible in an unfocused field says what is
+     * on the clipboard, and saying it as loudly as the live one would put two
+     * selections on the screen.
+     */
+    const selectionStyle = focus.focused
+        ? { bg: 'selected', fg: 'inverted' }
+        : { bg: 'active' };
     const before = chars.slice(0, position).join('');
     const lines = value === '' ? [''] : value.split('\n');
     const caretLine = before.split('\n').length - 1;
@@ -62,7 +115,10 @@ export const TextArea = defineComponent('TextArea', (props) => {
      * 0 and nothing wraps, which is precisely the behaviour above - and the pass
      * that `useMeasure` schedules draws the wrapped version.
      */
-    const width = useMeasure().width;
+    // The content rect, not the border box: rows are drawn inside the padding,
+    // so this is the origin a pointer has to be measured against.
+    const rect = useMeasure();
+    const width = rect.width;
     const mode = width > 0 && (wrap === 'word' || wrap === 'char') ? wrap : 'none';
     const visual = [];
     lines.forEach((line, index) => {
@@ -100,40 +156,198 @@ export const TextArea = defineComponent('TextArea', (props) => {
         const column = Math.min(caretColumn - (visual[caretRow]?.start ?? 0), row.cells.length);
         return lineStart(row.line) + row.start + column;
     };
+    /**
+     * The offset a pointer landed on.
+     *
+     * Cells rather than characters: a wide glyph is two columns, so the column
+     * a click is in is not its index in the row. Past the end of a row the
+     * caret goes after its last character, which is where a click in the empty
+     * part of a line is asking for.
+     */
+    const offsetAt = (cellX, rowIndex) => {
+        const row = visual[Math.max(0, Math.min(rowIndex, visual.length - 1))];
+        if (!row)
+            return position;
+        let used = 0;
+        let column = row.cells.length;
+        for (let i = 0; i < row.cells.length; i++) {
+            const w = stringWidth(row.cells[i]);
+            // The half-way point: clicking the right half of a glyph puts the caret
+            // after it, which is what every other editor does.
+            if (cellX < used + w - (w > 1 ? 0 : 0.5)) {
+                column = i;
+                break;
+            }
+            used += w;
+        }
+        return lineStart(row.line) + row.start + column;
+    };
     const replace = (next, at) => {
         const capped = maxLength !== undefined ? next.slice(0, maxLength) : next;
+        setAnchor(null);
         onChange(capped);
         setCaret(Math.max(0, Math.min(graphemes(capped).length, at)));
     };
+    /** Typing over a selection replaces it - which is what deletes it, too. */
     const insert = (text) => {
         const inserted = graphemes(text);
-        replace([...chars.slice(0, position), ...inserted, ...chars.slice(position)].join(''), position + inserted.length);
+        replace([...chars.slice(0, selectionStart), ...inserted, ...chars.slice(selectionEnd)].join(''), selectionStart + inserted.length);
+    };
+    /**
+     * Move the caret, taking the selection with it when shift is held.
+     *
+     * Without shift the selection collapses, because that is what an arrow key
+     * means everywhere: stop selecting, and go here.
+     */
+    const move = (to, extend) => {
+        if (!extend) {
+            setAnchor(null);
+            setCaret(to);
+            return;
+        }
+        const from = anchorRef.current ?? position;
+        if (anchorRef.current === null)
+            setAnchor(from);
+        setCaret(to);
+        // A selection made with the keyboard is a selection, and goes the same
+        // place one made with the mouse goes. Copying only on a mouse release
+        // meant shift+right showed something highlighted that was not on the
+        // clipboard - which is a selection you have to redo with the mouse.
+        copy(chars.slice(Math.min(from, to), Math.max(from, to)).join(''));
+    };
+    const copy = (text) => {
+        if (copyOnSelect && text !== '')
+            clipboard.write(text);
+    };
+    /** Select `[from, to)`, and copy it - a word picked out is a word taken. */
+    const select = (from, to) => {
+        setAnchor(from);
+        setCaret(to);
+        copy(chars.slice(from, to).join(''));
+    };
+    /**
+     * The run a double click means.
+     *
+     * Letters with letters, spaces with spaces, punctuation with punctuation -
+     * so a double click in the gap between two words takes the gap rather than
+     * one of the words, which is what makes "select the word, then extend"
+     * behave. A newline is a class of its own and joins nothing: a word
+     * selection that ran across one would be a paragraph, and there is a
+     * separate gesture for that.
+     */
+    const runAt = (at) => {
+        if (chars.length === 0)
+            return [0, 0];
+        const index = Math.max(0, Math.min(at, chars.length - 1));
+        const kind = classOf(chars[index]);
+        if (kind === 'break')
+            return [index, index + 1];
+        let from = index;
+        while (from > 0 && classOf(chars[from - 1]) === kind)
+            from -= 1;
+        let to = index + 1;
+        while (to < chars.length && classOf(chars[to]) === kind)
+            to += 1;
+        return [from, to];
+    };
+    /**
+     * The offset one word away, in `step`'s direction.
+     *
+     * Skips whatever is under the caret to the far side of it, then any run of
+     * whitespace - so ctrl+right lands at the start of the next word rather than
+     * in the gap before it, which is where "skip the run you are in" alone would
+     * leave it.
+     *
+     * A newline is one step of its own. Walking right stops at the end of the
+     * line, and the next press crosses to the start of the one below - rather
+     * than the break and the first word going by together. The end of a line is
+     * somewhere people mean to be, which is why it costs a press to leave.
+     */
+    const wordStep = (from, step) => {
+        let at = from;
+        const peek = () => chars[step < 0 ? at - 1 : at];
+        if (step < 0) {
+            while (at > 0 && classOf(peek()) === 'space')
+                at -= 1;
+            if (at > 0 && classOf(peek()) === 'break')
+                return at - 1;
+            const kind = at > 0 ? classOf(peek()) : 'word';
+            while (at > 0 && classOf(peek()) === kind)
+                at -= 1;
+            return at;
+        }
+        if (at < chars.length && classOf(peek()) === 'break')
+            return at + 1;
+        const kind = at < chars.length ? classOf(peek()) : 'word';
+        while (at < chars.length && classOf(peek()) === kind)
+            at += 1;
+        while (at < chars.length && classOf(peek()) === 'space')
+            at += 1;
+        return at;
+    };
+    /**
+     * The logical line a triple click means - with its newline, when it has one.
+     *
+     * The line rather than the row: a wrapped paragraph is one thing somebody
+     * wrote, and taking the third of it that happened to fit on one row is not
+     * a selection anybody asked for.
+     */
+    const lineAt = (at) => {
+        const index = chars.slice(0, at).join('').split('\n').length - 1;
+        const start = lineStart(index);
+        const end = start + graphemes(lines[index] ?? '').length;
+        return [start, Math.min(chars.length, end + (index < lines.length - 1 ? 1 : 0))];
     };
     useInput((event) => {
         if (disabled)
             return false;
         switch (event.name) {
             case 'left':
+                // A word at a time, the way every field with a caret in it does.
+                if (event.ctrl || event.alt) {
+                    move(wordStep(position, -1), event.shift);
+                    return true;
+                }
+                // A plain arrow collapses to the edge it is moving towards rather
+                // than stepping one from the caret: with three words selected, left
+                // means "back to the start of that", not "one before wherever the
+                // drag happened to end".
+                if (selected && !event.shift) {
+                    move(selectionStart, false);
+                    return true;
+                }
                 // Off the front of the field is the caller's key, the same way up at
                 // the top is - so "left, left, left" walks out of the composer.
                 if (position === 0) {
+                    if (!event.shift)
+                        setAnchor(null);
                     onEdge?.('start');
                     return true;
                 }
-                setCaret(position - 1);
+                move(position - 1, event.shift);
                 return true;
             case 'right':
+                if (event.ctrl || event.alt) {
+                    move(wordStep(position, 1), event.shift);
+                    return true;
+                }
+                if (selected && !event.shift) {
+                    move(selectionEnd, false);
+                    return true;
+                }
                 if (position === chars.length) {
+                    if (!event.shift)
+                        setAnchor(null);
                     onEdge?.('end');
                     return true;
                 }
-                setCaret(position + 1);
+                move(position + 1, event.shift);
                 return true;
             case 'home':
-                setCaret(lineStart(caretLine));
+                move(lineStart(caretLine), event.shift);
                 return true;
             case 'end':
-                setCaret(lineStart(caretLine) + graphemes(lines[caretLine] ?? '').length);
+                move(lineStart(caretLine) + graphemes(lines[caretLine] ?? '').length, event.shift);
                 return true;
             // By *row*, not by line. In a wrapped paragraph moving by line jumps
             // the whole paragraph, and what is above the caret on the screen is
@@ -142,25 +356,39 @@ export const TextArea = defineComponent('TextArea', (props) => {
                 // At the top there is nowhere to go inside the field, so the caller
                 // gets the key - which is where "the last thing you sent" comes from.
                 if (caretRow === 0) {
+                    if (!event.shift)
+                        setAnchor(null);
                     onOverflow?.(-1);
                     return true;
                 }
-                setCaret(rowCaret(caretRow - 1));
+                move(rowCaret(caretRow - 1), event.shift);
                 return true;
             }
             case 'down': {
                 if (caretRow === visual.length - 1) {
+                    if (!event.shift)
+                        setAnchor(null);
                     onOverflow?.(1);
                     return true;
                 }
-                setCaret(rowCaret(caretRow + 1));
+                move(rowCaret(caretRow + 1), event.shift);
                 return true;
             }
             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;
+                }
                 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);
                 return true;
@@ -173,9 +401,17 @@ export const TextArea = defineComponent('TextArea', (props) => {
                     return true;
                 }
                 onSubmit(value);
+                setAnchor(null);
                 setCaret(0);
                 return true;
+            // `onCancel` is documented as escape *when there is nothing inside the
+            // field to cancel*, and a live selection is something inside the field
+            // to cancel.
             case 'escape':
+                if (selected) {
+                    setAnchor(null);
+                    return true;
+                }
                 onCancel?.();
                 return true;
             case 'paste':
@@ -206,11 +442,96 @@ export const TextArea = defineComponent('TextArea', (props) => {
     // nothing else, because one row is what the field asked for and the border
     // spent it. Nobody saw it because a field without a border looks the same
     // either way, and `TextInput` fixes no height at all.
+    /**
+     * A click puts the caret where it landed; a drag selects to where it got to.
+     *
+     * `onMouse` rather than `onClick` because a field that is not focused has to
+     * take the keyboard first - otherwise the caret moves somewhere the next
+     * keystroke will not go - and because `onClick` is the button going down,
+     * which is a third of a drag.
+     *
+     * The drag arrives at all because the application holds the pointer for
+     * whoever took the button down.
+     *
+     * The row is deliberately not clamped to what is on screen. Dragging below
+     * the field asks for a row below the field, the caret follows it there, and
+     * the scroll offset is computed from the caret - so a selection dragged off
+     * the bottom scrolls the field, which is the whole reason to drag off the
+     * bottom. `offsetAt` clamps to the text, and that is the only clamp there is.
+     */
+    const pointerOffset = (event) => {
+        const column = Math.max(0, event.x - rect.x);
+        return Math.max(0, Math.min(chars.length, offsetAt(column, first + (event.y - rect.y))));
+    };
+    const onMouse = (event) => {
+        if (disabled || event.button !== 'left' || rect.width <= 0)
+            return false;
+        switch (event.action) {
+            case 'down': {
+                // Only a press *inside* the field starts anything. Drags and releases
+                // are not tested that way: by then the pointer is wherever it has got
+                // to, and the gesture is this field's regardless.
+                if (event.x < rect.x || event.y < rect.y)
+                    return false;
+                if (!focus.focused)
+                    focus.focus();
+                const at = pointerOffset(event);
+                // One cell, one window, or it is a new gesture. Position matters as
+                // much as time: two clicks half a second apart on different words are
+                // two clicks, and a terminal that reports no timestamp gets `0` for
+                // both, which lands on "same instant" - so the cell is what saves it.
+                const stamp = event.at ?? 0;
+                const same = event.x === repeat.current.x && event.y === repeat.current.y;
+                const soon = stamp - repeat.current.at <= 450;
+                const count = same && soon ? (repeat.current.count % 3) + 1 : 1;
+                repeat.current = { at: stamp, x: event.x, y: event.y, count, dragged: false };
+                if (count === 2) {
+                    const [from, to] = runAt(at);
+                    select(from, to);
+                    return true;
+                }
+                if (count === 3) {
+                    const [from, to] = lineAt(at);
+                    select(from, to);
+                    return true;
+                }
+                // Anchored, but empty - so a click that never turns into a drag is a
+                // caret and nothing else.
+                setAnchor(at);
+                setCaret(at);
+                return true;
+            }
+            case 'drag':
+                repeat.current.dragged = true;
+                setCaret(pointerOffset(event));
+                return true;
+            case 'up': {
+                // A word or a line was decided when the button went down, and the
+                // release is the same press ending. Re-reading the pointer here would
+                // collapse the selection back to the cell it was made from - which is
+                // what "double click selects two letters" was.
+                if (repeat.current.count > 1 && !repeat.current.dragged)
+                    return true;
+                const at = pointerOffset(event);
+                const from = anchorRef.current;
+                setCaret(at);
+                if (from === null || from === at) {
+                    setAnchor(null);
+                    return true;
+                }
+                copy(chars.slice(Math.min(from, at), Math.max(from, at)).join(''));
+                return true;
+            }
+            default:
+                return false;
+        }
+    };
     return h('box', {
         id: focus.id,
         role: 'textbox',
         label: placeholder,
         direction: 'column',
+        onMouse,
         ...rest,
     }, h('box', { direction: 'column', height: rows }, value === ''
         // The placeholder stays while the field is focused and empty: it is the
@@ -232,19 +553,65 @@ export const TextArea = defineComponent('TextArea', (props) => {
         })()
         : shown.map((row, i) => {
             const index = first + i;
-            const text = row.cells.join('');
-            if (index !== caretRow || !focus.focused) {
-                return h('text', { key: index, content: text === '' ? ' ' : text, wrap: 'none', truncate: 'end' });
-            }
+            const base = lineStart(row.line) + row.start;
+            const end = base + row.cells.length;
             // The caret's column inside this row. The row has already been broken
             // to the width it will be drawn at, so the split lands where it looks.
-            //
-            // Three parts, and the middle one is the cell the caret is *on* - not
-            // an extra cell between them. Past the last character there is nothing
-            // to mark, so a space stands in; that is the one case where the caret
-            // adds a column, and it adds it at the end where nothing moves.
-            const at = caretColumn - row.start;
-            return h('box', { key: index, direction: 'row' }, h('text', { content: row.cells.slice(0, at).join('') }), h('text', { content: row.cells[at] ?? ' ', ...(lit ? mark : {}) }), h('text', { content: row.cells.slice(at + 1).join(''), flex: 1, truncate: 'end' }));
+            const at = index === caretRow && focus.focused ? caretColumn - row.start : -1;
+            // One entry per drawn cell, carrying what is true of it. The caret is
+            // a cell the row already has rather than an extra one between two of
+            // them - that is what keeps a wrapped row as wide as its own text.
+            const cells = row.cells.map((char, column) => ({
+                char,
+                selected: selected && base + column >= selectionStart && base + column < selectionEnd,
+                caret: column === at,
+            }));
+            // The cell after the last character. It exists when the caret is past
+            // the end and has nothing to mark, when the newline this row ends on
+            // is inside the selection - a selected line break has to show, or
+            // three selected lines read as three unrelated runs - and when the row
+            // is empty and needs something to occupy it.
+            const breaks = visual[index + 1]?.line !== row.line;
+            const tail = {
+                char: ' ',
+                selected: selected && breaks && end >= selectionStart && end < selectionEnd,
+                caret: at === row.cells.length,
+            };
+            if (tail.caret || tail.selected || cells.length === 0)
+                cells.push(tail);
+            if (!cells.some((cell) => cell.selected || cell.caret)) {
+                return h('text', { key: index, content: cells.map((c) => c.char).join(''), wrap: 'none', truncate: 'end' });
+            }
+            // Neighbouring cells that look the same are drawn as one run, so a
+            // selected row is a handful of nodes rather than one per column.
+            const runs = [];
+            let previous = '';
+            for (const cell of cells) {
+                const lift = `${cell.selected ? 's' : ''}${cell.caret && lit ? 'c' : ''}`;
+                const last = runs[runs.length - 1];
+                if (last && lift === previous)
+                    last.content += cell.char;
+                else {
+                    runs.push({
+                        content: cell.char,
+                        style: {
+                            ...(cell.selected ? selectionStyle : {}),
+                            ...(cell.caret && lit ? mark : {}),
+                        },
+                    });
+                    previous = lift;
+                }
+            }
+            return h('box', { key: index, direction: 'row' }, ...runs.map((run, r) => h('text', {
+                key: r,
+                content: run.content,
+                wrap: 'none',
+                truncate: 'end',
+                ...run.style,
+            })), 
+            // The rest of the row, unstyled: flexing the last run instead would
+            // drag a selection's background out to the edge of the field.
+            h('text', { key: 'rest', content: '', flex: 1, truncate: 'end' }));
         })));
 });
 /**
@@ -297,3 +664,16 @@ function rowWidth(cells) {
         width += stringWidth(cell);
     return width;
 }
+/**
+ * What kind of character this is, for the purpose of "the run around it".
+ *
+ * Four classes, and a newline is its own: joining it to the whitespace either
+ * side would make a double click in the margin select across two lines.
+ */
+function classOf(cell) {
+    if (cell === '\n')
+        return 'break';
+    if (/\s/.test(cell))
+        return 'space';
+    return /[\p{L}\p{N}_]/u.test(cell) ? 'word' : 'other';
+}

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

@@ -1 +1 @@
-{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../src/control/text-input.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,gEA+HpB,CAAC"}
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../src/control/text-input.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,gEAoKpB,CAAC"}

package/dist/control/text-input.js

@@ -109,9 +109,49 @@ export const TextInput = defineComponent('TextInput', (props) => {
         }
         return false;
     }, { focusId: focus.id });
+    /**
+     * A click takes the keyboard and puts the caret where it landed.
+     *
+     * Without it the field was the one control on the screen that did nothing
+     * when it was clicked - and an empty one has nothing in it to say it is a
+     * field, so what it looked like was a gap in the layout. `TextArea` has had
+     * this from the start; the two disagreeing is what made a form built out of
+     * the single-line one unusable with a mouse.
+     *
+     * `onMouse` rather than `onClick`, the same as there: a field that is not
+     * focused has to take the keyboard before the caret moves, or the caret is
+     * somewhere the next keystroke will not go.
+     *
+     * `measured` is the *content* rect - inside the border and the padding - so
+     * the value starts at `lead` cells into it, and `start` is what the field
+     * has scrolled past.
+     */
+    const onMouse = (event) => {
+        if (disabled || event.button !== 'left' || event.action !== 'down')
+            return false;
+        if (measured.width <= 0)
+            return false;
+        if (event.x < measured.x || event.y < measured.y)
+            return false;
+        if (!focus.focused)
+            focus.focus();
+        // Cells to characters. A wide glyph is two columns, and a click on its
+        // second column means the same character as a click on its first.
+        const column = event.x - measured.x - lead + start;
+        let index = 0;
+        for (let width = 0; index < chars.length; index++) {
+            const next = width + stringWidth(chars[index]);
+            if (next > column)
+                break;
+            width = next;
+        }
+        move(index);
+        return true;
+    };
     return h('box', {
         id: focus.id,
         role: search ? 'searchbox' : 'textbox',
+        onMouse,
         label,
         direction: 'row',
         gap: 1,

package/dist/data/feed.d.ts

@@ -17,6 +17,20 @@ export interface FeedProps extends BoxProps {
     onSelect?(index: number): void;
     onActivate?(index: number): void;
     scrollbar?: boolean;
+    /**
+     * Who `pageup` and `pagedown` belong to.
+     *
+     * `focused` is the ordinary answer: the keys go to whatever has the
+     * keyboard. `always` claims them even while something else does - for the
+     * feed that *is* the screen, with a text field under it. Somebody typing a
+     * message who presses page up means the conversation above them; there is
+     * nothing else on that screen those keys could be for, and taking the
+     * keyboard away from the field to use them is the thing they are avoiding.
+     *
+     * Only those two keys, and only when the focused node has declined them
+     * first - so a field that pages its own content keeps them.
+     */
+    pageKeys?: 'focused' | 'always';
     focusable?: boolean;
     autoFocus?: boolean;
     /** So a command can send the reader here by name. */

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,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,2DAiJf,CAAC"}
+{"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"}