@textui/widgets 0.1.0 → 0.2.0

package/src/control/text-area.ts

@@ -1,14 +1,17 @@
-import type { BoxProps, KeyEvent, SemanticVariant } from '@textui/core';
+import type { BoxProps, KeyEvent, MouseEvent, SemanticVariant, Style } from '@textui/core';
 import {
   defineComponent,
   graphemes,
   h,
   stringWidth,
+  useClipboard,
   useEffect,
   useFocus,
   useInput,
   useMeasure,
+  useRef,
   useState,
+  useTheme,
   useTicker,
 } from '@textui/core';
 
@@ -60,16 +63,29 @@ export interface TextAreaProps extends BoxProps {
    */
   caretTone?: SemanticVariant;
   /**
-   * What the caret looks like. An underline under the character it is on by
-   * default; `block` fills the cell instead.
+   * What the caret looks like. **The theme's `cursor` by default**, so the
+   * drawn caret and the terminal's own are the same shape, and an underline
+   * when the theme leaves it to the terminal.
    *
    * Both **mark a cell rather than occupying one**. The caret used to be a
    * glyph pushed in between the text before it and the text after, so every
    * character to its right sat one column off from where it would be once the
    * caret moved on, and the row was a cell wider than its own text. On a
    * wrapped row that extra cell is the one that does not fit.
+   *
+   * That is also why the theme's `bar` arrives here as an underline: a bar
+   * *between* two characters is exactly the caret this one is not.
    */
   caretStyle?: 'underline' | 'block';
+  /**
+   * Put a selection on the system clipboard as it is made. On by default.
+   *
+   * Selecting with the mouse is how text leaves a terminal, and an application
+   * that reports mouse events has taken the terminal's own select-and-copy
+   * away - so it owes one back. The copy goes out over OSC 52 and into the
+   * store, which is the half a paste inside the application can read.
+   */
+  copyOnSelect?: boolean;
   /**
    * Blink the caret while the field has the keyboard. On by default.
    *
@@ -101,9 +117,11 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
   const {
     value, onChange, onSubmit, onCancel, onOverflow, onEdge, placeholder, maxRows = 6,
     maxLength, autoFocus, focusId, disabled, caretTone, blink = true, wrap = 'word',
-    caretStyle = 'underline', ...rest
+    caretStyle, copyOnSelect = true, ...rest
   } = props;
 
+  const theme = useTheme();
+  const clipboard = useClipboard();
   const focus = useFocus({
     ...(focusId ? { id: focusId } : {}),
     disabled,
@@ -112,6 +130,33 @@ export const TextArea = defineComponent<TextAreaProps>('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<number | null>(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; x: number; y: number; count: number; dragged: boolean }>(
+    { at: Number.NEGATIVE_INFINITY, x: -1, y: -1, count: 0, dragged: false },
+  );
+  const [anchor, setAnchorState] = useState<number | null>(null);
+  const setAnchor = (next: number | null): void => {
+    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 });
@@ -124,12 +169,42 @@ export const TextArea = defineComponent<TextAreaProps>('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: Style = 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: Style = 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;
@@ -152,7 +227,10 @@ export const TextArea = defineComponent<TextAreaProps>('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: { line: number; start: number; cells: string[] }[] = [];
@@ -196,15 +274,142 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
     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: number, rowIndex: number): number => {
+    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] as string);
+      // 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: string, at: number): void => {
     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: string): void => {
     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: number, extend: boolean): void => {
+    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: string): void => {
+    if (copyOnSelect && text !== '') clipboard.write(text);
+  };
+
+  /** Select `[from, to)`, and copy it - a word picked out is a word taken. */
+  const select = (from: number, to: number): void => {
+    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: number): [number, number] => {
+    if (chars.length === 0) return [0, 0];
+    const index = Math.max(0, Math.min(at, chars.length - 1));
+    const kind = classOf(chars[index] as string);
+    if (kind === 'break') return [index, index + 1];
+
+    let from = index;
+    while (from > 0 && classOf(chars[from - 1] as string) === kind) from -= 1;
+    let to = index + 1;
+    while (to < chars.length && classOf(chars[to] as string) === 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: number, step: -1 | 1): number => {
+    let at = from;
+    const peek = (): string | undefined => chars[step < 0 ? at - 1 : at];
+
+    if (step < 0) {
+      while (at > 0 && classOf(peek() as string) === 'space') at -= 1;
+      if (at > 0 && classOf(peek() as string) === 'break') return at - 1;
+      const kind = at > 0 ? classOf(peek() as string) : 'word';
+      while (at > 0 && classOf(peek() as string) === kind) at -= 1;
+      return at;
+    }
+
+    if (at < chars.length && classOf(peek() as string) === 'break') return at + 1;
+    const kind = at < chars.length ? classOf(peek() as string) : 'word';
+    while (at < chars.length && classOf(peek() as string) === kind) at += 1;
+    while (at < chars.length && classOf(peek() as string) === '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: number): [number, number] => {
+    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(
@@ -213,17 +418,28 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
 
       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) { onEdge?.('start'); return true; }
-          setCaret(position - 1);
+          if (position === 0) { if (!event.shift) setAnchor(null); onEdge?.('start'); return true; }
+          move(position - 1, event.shift);
           return true;
         case 'right':
-          if (position === chars.length) { onEdge?.('end'); return true; }
-          setCaret(position + 1);
+          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; }
+          move(position + 1, event.shift);
+          return true;
+        case 'home': move(lineStart(caretLine), event.shift); return true;
+        case 'end':
+          move(lineStart(caretLine) + graphemes(lines[caretLine] ?? '').length, event.shift);
           return true;
-        case 'home': setCaret(lineStart(caretLine)); return true;
-        case 'end': setCaret(lineStart(caretLine) + graphemes(lines[caretLine] ?? '').length); 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
@@ -231,20 +447,24 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
         case 'up': {
           // 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) { onOverflow?.(-1); return true; }
-          setCaret(rowCaret(caretRow - 1));
+          if (caretRow === 0) { if (!event.shift) setAnchor(null); onOverflow?.(-1); return true; }
+          move(rowCaret(caretRow - 1), event.shift);
           return true;
         }
         case 'down': {
-          if (caretRow === visual.length - 1) { onOverflow?.(1); return true; }
-          setCaret(rowCaret(caretRow + 1));
+          if (caretRow === visual.length - 1) { if (!event.shift) setAnchor(null); onOverflow?.(1); return true; }
+          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;
 
@@ -254,10 +474,17 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
           // binding it produces a key that works on one machine.
           if (!onSubmit || event.alt || event.ctrl) { insert('\n'); return true; }
           onSubmit(value);
+          setAnchor(null);
           setCaret(0);
           return true;
 
-        case 'escape': onCancel?.(); 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': insert(event.char ?? ''); return true;
         default: break;
       }
@@ -287,11 +514,88 @@ export const TextArea = defineComponent<TextAreaProps>('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: MouseEvent): number => {
+    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: MouseEvent): boolean => {
+    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 === ''
@@ -316,22 +620,69 @@ export const TextArea = defineComponent<TextAreaProps>('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;
+        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: { content: string; style: Style }[] = [];
+        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' },
-          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' }));
+          ...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' }));
       }),
   ));
 });
@@ -388,3 +739,15 @@ function rowWidth(cells: string[]): number {
   for (const cell of 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: string): 'word' | 'space' | 'break' | 'other' {
+  if (cell === '\n') return 'break';
+  if (/\s/.test(cell)) return 'space';
+  return /[\p{L}\p{N}_]/u.test(cell) ? 'word' : 'other';
+}

package/src/control/text-input.ts

@@ -1,4 +1,4 @@
-import type { KeyEvent } from '@textui/core';
+import type { KeyEvent, MouseEvent } from '@textui/core';
 import {
   defineComponent,
   graphemes,
@@ -126,9 +126,46 @@ export const TextInput = defineComponent<TextInputProps>('TextInput', (props) =>
     { 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: MouseEvent): boolean => {
+    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] as string);
+      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,