@arthony/keybook 0.7.0 → 0.8.0

package/README.md

@@ -25,9 +25,10 @@ Requires macOS. The Homebrew tap installs Node 22 automatically; the npm
 route assumes you already have Node 22+. Both install the `keybook`
 command and the `kb` alias.
 
-**Terminal.app users:** if `⌥⌫` doesn't delete a word in the search input,
-enable *Terminal → Settings → Profiles → Keyboard → "Use Option as Meta
-key"*, or use `⌃W` (works in any terminal).
+**Terminal.app users:** if `⌥⌫`, `⌥←` or `⌥→` don't work in the search
+input, enable *Terminal → Settings → Profiles → Keyboard → "Use Option as
+Meta key"*. `⌃W` (delete word back) works in any terminal; there is no
+Option-free equivalent for word-wise cursor movement.
 
 ## Usage
 
@@ -47,6 +48,24 @@ selected entry (pre-filled form), `⌃X` to delete it (with a `y/n` confirm). Or
 script an add: `keybook add --app Fork --action 'Push' --keys 'shift cmd p' --tags push`
 (`--keys` accepts glyphs or words; recipes use repeatable `--step`).
 
+### Text editing
+
+Every text input — the search box and each field of the add/edit form — takes
+the same readline-style bindings:
+
+| Key | Does |
+|---|---|
+| `←` / `→` | move one character |
+| `⌥←` / `⌥→` | move one word |
+| `⌃A` / `⌃E` | jump to start / end of the line |
+| `⌫` / `⌃D` | delete before / at the cursor |
+| `⌥⌫` / `⌃W` | delete the word before the cursor |
+| `⌃U` / `⌃K` | delete to the start / end of the line |
+
+`⌃E` is the one exception: in the **search box** it opens the edit form for the
+selected entry (there is no conflict for `⌃A`, which works everywhere), and on
+a **selected recipe step** it opens that step for in-place editing.
+
 ## Your data
 
 Shortcuts live in plain YAML files you own — by default `~/.config/keybook/`

package/dist/cli.js

@@ -5,11 +5,11 @@ import { basename, dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { Command } from "commander";
 import { Box, Text, render, useApp, useInput, useStdout } from "ink";
-import { createElement, useCallback, useEffect, useMemo, useState } from "react";
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { homedir } from "node:os";
 import { Document, isMap, isSeq, parse, parseDocument } from "yaml";
 import { z } from "zod";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Fzf, extendedMatch } from "fzf";
 //#region src/config.ts
 const YAML_RE$2 = /\.ya?ml$/;
@@ -428,38 +428,106 @@ function runAdd(dir, draft) {
 	};
 }
 //#endregion
+//#region src/tui/CursorText.tsx
+/**
+* Renders a value with a block cursor at `pos`, windowed horizontally so the
+* cursor is always visible and the row NEVER wraps.
+*
+* Window rule (stateless): the view stays anchored at the left until the
+* cursor would fall off the right edge, then scrolls one character at a time.
+* A pure function of (pos, width) — no stored scroll offset to keep in sync.
+*
+* There is deliberately no clipped-content indicator: rendering a marker plus
+* `width` cells is width+1 columns, which wraps — the exact failure this
+* component exists to prevent. See the design spec §7.
+*
+* `key={chars.length}` is load-bearing, not decorative. Ink's Yoga layout
+* measures a `wrap="truncate-end"` Text node's width incrementally, and that
+* measurement is one render stale relative to a code-point-count change: the
+* FIRST render after this Text's content grows (e.g. typing a character into
+* an empty focused field) uses the PRIOR frame's — too-narrow — measured
+* width, so it clips to a bare "…" and, since nothing re-renders without
+* another keystroke, a real terminal would leave that "…" on screen
+* indefinitely. Keying on the code-point count forces React (and Ink's host
+* reconciler) to unmount the old node and mount a fresh one whenever the
+* length changes, so there is no stale prior measurement to be wrong: a
+* fresh node's first layout pass measures the current content correctly.
+* `wrap="truncate-end"` is kept as the defensive backstop (matches the
+* "windowed content never exceeds `width` cells" invariant above); without
+* the key, it is the thing that makes the staleness visible as clipping
+* instead of silently wrapping onto a second row and corrupting whatever
+* renders below.
+*/
+function CursorText({ value, pos, width, focused }) {
+	const chars = [...value];
+	const w = Math.max(1, width);
+	if (!focused) return /* @__PURE__ */ jsx(Text, {
+		wrap: "truncate-end",
+		children: chars.slice(0, w).join("")
+	}, chars.length);
+	const p = Math.max(0, Math.min(pos, chars.length));
+	const start = p < w ? 0 : p - w + 1;
+	return /* @__PURE__ */ jsxs(Text, {
+		wrap: "truncate-end",
+		children: [
+			chars.slice(start, p).join(""),
+			/* @__PURE__ */ jsx(Text, {
+				inverse: true,
+				children: chars[p] ?? " "
+			}),
+			chars.slice(p + 1, start + w).join("")
+		]
+	}, chars.length);
+}
+//#endregion
 //#region src/tui/StepsBuilder.tsx
-function StepsBuilder({ steps, line, active, cursor, grabbed = false }) {
+function StepsBuilder({ steps, line, active, cursor, grabbed = false, pos, width, editingIndex, editBuffer }) {
 	const cur = cursor ?? steps.length;
 	const onAppendLine = cur >= steps.length;
-	const hint = grabbed ? "↑↓ move · Space/⏎ drop" : steps.length === 0 ? "⏎ adds a step · ⌫ on an empty line removes the last" : onAppendLine ? "⏎ adds a step · ↑ select a step to reorder" : "↑↓ select · Space grab · ⌫ delete";
+	const isEditing = editingIndex !== void 0;
+	const w = width ?? 71;
+	const hint = isEditing ? "⏎ save · esc cancel" : grabbed ? "↑↓ move · Space/⏎ drop" : steps.length === 0 ? "⏎ adds a step · ⌫ on an empty line removes the last" : onAppendLine ? "⏎ adds a step · ↑ select a step to reorder" : "↑↓ select · Space grab · ⌫ delete · ⌃E edit";
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		children: [
-			steps.map((s, i) => {
-				return /* @__PURE__ */ jsxs(Text, { children: [
-					active && cur === i ? grabbed ? "⇅ " : "> " : "  ",
+			steps.map((s, i) => i === editingIndex ? /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Text, {
+				color: "cyan",
+				children: [
+					"  ",
 					i + 1,
-					". ",
-					s
-				] }, i);
-			}),
-			/* @__PURE__ */ jsxs(Box, { children: [
-				/* @__PURE__ */ jsxs(Text, {
-					color: active && onAppendLine ? "cyan" : "gray",
-					children: [
-						"  ",
-						steps.length + 1,
-						".",
-						" "
-					]
-				}),
-				/* @__PURE__ */ jsx(Text, { children: line }),
-				active && onAppendLine ? /* @__PURE__ */ jsx(Text, {
-					inverse: true,
-					children: " "
-				}) : null
-			] }),
+					".",
+					" "
+				]
+			}), /* @__PURE__ */ jsx(CursorText, {
+				value: editBuffer ?? "",
+				pos: pos ?? [...editBuffer ?? ""].length,
+				width: w,
+				focused: true
+			})] }, `${i}-edit`) : /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Text, { children: [
+				active && cur === i ? grabbed ? "⇅ " : "> " : "  ",
+				i + 1,
+				".",
+				" "
+			] }), /* @__PURE__ */ jsx(CursorText, {
+				value: s,
+				pos: 0,
+				width: w,
+				focused: false
+			})] }, i)),
+			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Text, {
+				color: active && onAppendLine ? "cyan" : "gray",
+				children: [
+					"  ",
+					steps.length + 1,
+					".",
+					" "
+				]
+			}), /* @__PURE__ */ jsx(CursorText, {
+				value: line,
+				pos: pos ?? [...line].length,
+				width: w,
+				focused: active && onAppendLine
+			})] }),
 			active ? /* @__PURE__ */ jsx(Text, {
 				color: "gray",
 				children: hint
@@ -474,31 +542,32 @@ const TYPES$1 = [
 	"command",
 	"recipe"
 ];
-function Field({ label, value, focused }) {
-	return /* @__PURE__ */ jsxs(Box, { children: [
-		/* @__PURE__ */ jsx(Text, {
-			color: focused ? "cyan" : "gray",
-			children: label.padEnd(8)
-		}),
-		/* @__PURE__ */ jsx(Text, { children: value }),
-		focused ? /* @__PURE__ */ jsx(Text, {
-			inverse: true,
-			children: " "
-		}) : null
-	] });
-}
-function FormFields({ draft, apps, appIndex, focused, existingTags, stepCursor, grabbed }) {
+function Field({ label, value, focused, pos, width }) {
+	return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+		color: focused ? "cyan" : "gray",
+		children: label.padEnd(8)
+	}), /* @__PURE__ */ jsx(CursorText, {
+		value,
+		pos,
+		width,
+		focused
+	})] });
+}
+function FormFields({ draft, apps, appIndex, focused, pos, width, existingTags, stepCursor, grabbed, editingStep, editBuffer }) {
 	const appChoices = [...apps, "Create new app…"];
+	const keysPreview = draft.keys.trim() ? `  →  ${normalizeKeys(draft.keys)}` : "";
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		children: [
 			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
 				color: focused === 0 ? "cyan" : "gray",
 				children: "App".padEnd(8)
-			}), draft.creatingApp ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, { children: draft.newApp }), focused === 0 ? /* @__PURE__ */ jsx(Text, {
-				inverse: true,
-				children: " "
-			}) : null] }) : /* @__PURE__ */ jsxs(Text, { children: [appChoices[appIndex] ?? "—", focused === 0 ? "  (↑/↓)" : ""] })] }),
+			}), draft.creatingApp ? /* @__PURE__ */ jsx(CursorText, {
+				value: draft.newApp,
+				pos,
+				width,
+				focused: focused === 0
+			}) : /* @__PURE__ */ jsxs(Text, { children: [appChoices[appIndex] ?? "—", focused === 0 ? "  (↑/↓)" : ""] })] }),
 			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
 				color: focused === 1 ? "cyan" : "gray",
 				children: "Type".padEnd(8)
@@ -506,27 +575,38 @@ function FormFields({ draft, apps, appIndex, focused, existingTags, stepCursor,
 			/* @__PURE__ */ jsx(Field, {
 				label: "Action",
 				value: draft.action,
-				focused: focused === 2
+				focused: focused === 2,
+				pos,
+				width
 			}),
 			draft.type === "shortcut" ? /* @__PURE__ */ jsxs(Box, { children: [
 				/* @__PURE__ */ jsx(Text, {
 					color: focused === 3 ? "cyan" : "gray",
 					children: "Keys".padEnd(8)
 				}),
-				/* @__PURE__ */ jsx(Text, { children: draft.keys }),
-				focused === 3 ? /* @__PURE__ */ jsx(Text, {
-					inverse: true,
-					children: " "
-				}) : null,
-				draft.keys.trim() ? /* @__PURE__ */ jsxs(Text, {
+				/* @__PURE__ */ jsx(CursorText, {
+					value: draft.keys,
+					pos,
+					width: Math.max(8, width - keysPreview.length),
+					focused: focused === 3
+				}),
+				keysPreview ? /* @__PURE__ */ jsx(Text, {
 					color: "gray",
-					children: ["  →  ", normalizeKeys(draft.keys)]
+					children: keysPreview
 				}) : null
-			] }) : draft.type === "command" ? /* @__PURE__ */ jsx(Field, {
-				label: "Command",
-				value: `$ ${draft.command}`,
-				focused: focused === 3
-			}) : /* @__PURE__ */ jsxs(Box, {
+			] }) : draft.type === "command" ? /* @__PURE__ */ jsxs(Box, { children: [
+				/* @__PURE__ */ jsx(Text, {
+					color: focused === 3 ? "cyan" : "gray",
+					children: "Command".padEnd(8)
+				}),
+				/* @__PURE__ */ jsx(Text, { children: "$ " }),
+				/* @__PURE__ */ jsx(CursorText, {
+					value: draft.command,
+					pos,
+					width: width - 2,
+					focused: focused === 3
+				})
+			] }) : /* @__PURE__ */ jsxs(Box, {
 				flexDirection: "column",
 				children: [/* @__PURE__ */ jsx(Text, {
 					color: focused === 3 ? "cyan" : "gray",
@@ -536,13 +616,19 @@ function FormFields({ draft, apps, appIndex, focused, existingTags, stepCursor,
 					line: draft.stepLine,
 					active: focused === 3,
 					cursor: stepCursor,
-					grabbed
+					grabbed,
+					pos,
+					width,
+					editingIndex: editingStep ?? void 0,
+					editBuffer
 				})]
 			}),
 			/* @__PURE__ */ jsx(Field, {
 				label: "Tags",
 				value: draft.tags,
-				focused: focused === 4
+				focused: focused === 4,
+				pos,
+				width
 			}),
 			focused === 4 && existingTags && existingTags.length > 0 ? /* @__PURE__ */ jsx(Text, {
 				color: "gray",
@@ -551,7 +637,9 @@ function FormFields({ draft, apps, appIndex, focused, existingTags, stepCursor,
 			/* @__PURE__ */ jsx(Field, {
 				label: "Notes",
 				value: draft.notes,
-				focused: focused === 5
+				focused: focused === 5,
+				pos,
+				width
 			})
 		]
 	});
@@ -666,6 +754,170 @@ function ReviewScreen({ app, entry, targetPath, error }) {
 	});
 }
 //#endregion
+//#region src/tui/cursor.ts
+const cp = (s) => [...s];
+const isSpace = (c) => c !== void 0 && /\s/.test(c);
+function build(chars, pos) {
+	return {
+		text: chars.join(""),
+		pos: Math.max(0, Math.min(pos, chars.length))
+	};
+}
+/** Seed a state with the cursor after the last character — the focus convention. */
+function atEnd(text) {
+	return {
+		text,
+		pos: cp(text).length
+	};
+}
+function insert(s, chars) {
+	const a = cp(s.text);
+	const ins = cp(chars);
+	a.splice(s.pos, 0, ...ins);
+	return build(a, s.pos + ins.length);
+}
+function backspace(s) {
+	if (s.pos <= 0) return s;
+	const a = cp(s.text);
+	a.splice(s.pos - 1, 1);
+	return build(a, s.pos - 1);
+}
+function forwardDelete(s) {
+	const a = cp(s.text);
+	if (s.pos >= a.length) return s;
+	a.splice(s.pos, 1);
+	return build(a, s.pos);
+}
+function left(s) {
+	return s.pos <= 0 ? s : {
+		text: s.text,
+		pos: s.pos - 1
+	};
+}
+function right(s) {
+	return s.pos >= cp(s.text).length ? s : {
+		text: s.text,
+		pos: s.pos + 1
+	};
+}
+function home(s) {
+	return s.pos === 0 ? s : {
+		text: s.text,
+		pos: 0
+	};
+}
+function end(s) {
+	const len = cp(s.text).length;
+	return s.pos === len ? s : {
+		text: s.text,
+		pos: len
+	};
+}
+/**
+* Start of the word before `pos`: skip the run of whitespace, then the run of
+* non-whitespace. Mirrors readline's `backward-kill-word`, and reproduces the
+* v0.2 Phase A `deleteWordBack` semantics when pos is at end-of-string.
+*/
+function wordStartBefore(a, pos) {
+	let i = pos;
+	while (i > 0 && isSpace(a[i - 1])) i--;
+	while (i > 0 && !isSpace(a[i - 1])) i--;
+	return i;
+}
+/** End of the word after `pos`: skip whitespace, then non-whitespace. */
+function wordEndAfter(a, pos) {
+	let i = pos;
+	while (i < a.length && isSpace(a[i])) i++;
+	while (i < a.length && !isSpace(a[i])) i++;
+	return i;
+}
+function wordLeft(s) {
+	const start = wordStartBefore(cp(s.text), s.pos);
+	return start === s.pos ? s : {
+		text: s.text,
+		pos: start
+	};
+}
+function wordRight(s) {
+	const stop = wordEndAfter(cp(s.text), s.pos);
+	return stop === s.pos ? s : {
+		text: s.text,
+		pos: stop
+	};
+}
+function deleteWordBack(s) {
+	const a = cp(s.text);
+	const start = wordStartBefore(a, s.pos);
+	if (start === s.pos) return s;
+	a.splice(start, s.pos - start);
+	return build(a, start);
+}
+function killToStart(s) {
+	if (s.pos <= 0) return s;
+	return build(cp(s.text).slice(s.pos), 0);
+}
+function killToEnd(s) {
+	const a = cp(s.text);
+	if (s.pos >= a.length) return s;
+	return build(a.slice(0, s.pos), s.pos);
+}
+const same = (a, b) => a.text === b.text && a.pos === b.pos;
+function route(s, input, key, opts) {
+	if (key.leftArrow) return key.meta ? wordLeft(s) : left(s);
+	if (key.rightArrow) return key.meta ? wordRight(s) : right(s);
+	if (key.meta && (key.backspace || key.delete) || key.ctrl && input === "w") return deleteWordBack(s);
+	if (key.backspace || key.delete) return backspace(s);
+	if (key.ctrl && input === "u") return killToStart(s);
+	if (key.ctrl && input === "k") return killToEnd(s);
+	if (key.ctrl && input === "d") return forwardDelete(s);
+	if (key.ctrl && input === "a") return home(s);
+	if (opts.lineKeys && key.ctrl && input === "e") return end(s);
+	if (input && !key.ctrl && !key.meta) return insert(s, input);
+	return null;
+}
+/**
+* Route a keypress to an op. Returns null when the key is not a text-editing
+* key, OR when the op would leave the state unchanged — callers rely on that
+* to keep their own fallback branches reachable (see AddEntryForm's
+* empty-step-line backspace).
+*/
+function applyTextKey(s, input, key, opts) {
+	const next = route(s, input, key, opts);
+	if (next === null) return null;
+	return same(next, s) ? null : next;
+}
+/**
+* Rows to give the windowed result list, sized to the terminal height so the
+* whole frame fits the viewport. Ink can only redraw in place while the frame
+* stays within the terminal; an oversized frame duplicates on every keypress.
+*/
+function visibleListHeight(terminalRows) {
+	return Math.max(1, (terminalRows && terminalRows > 0 ? terminalRows : 24) - 4);
+}
+/**
+* Integer widths for the two side-by-side panes. They MUST sum to the exact
+* terminal width: two `width="50%"` siblings each round up on an odd-width
+* terminal (58 + 58 = 116 at 115 cols), overflowing by a column. The terminal
+* then soft-wraps the full-width rows, Ink miscounts the frame height, and its
+* redraw leaves stale lines stacked on every keystroke.
+*/
+function columnWidths(terminalCols) {
+	const cols = terminalCols && terminalCols > 0 ? terminalCols : 80;
+	const left = Math.floor(cols / 2);
+	return {
+		left,
+		right: cols - left
+	};
+}
+/** Columns available to the search query, after "search: " and the filter label. */
+function searchFieldWidth(terminalCols, filterLabelLength) {
+	return Math.max(8, (terminalCols && terminalCols > 0 ? terminalCols : 80) - 8 - filterLabelLength - 1);
+}
+/** Columns available to a form field, after its 8-column label plus one safety column. */
+function formFieldWidth(terminalCols) {
+	return Math.max(8, (terminalCols && terminalCols > 0 ? terminalCols : 80) - 8 - 1);
+}
+//#endregion
 //#region src/tui/useAddForm.ts
 const emptyDraft = {
 	app: "",
@@ -760,6 +1012,23 @@ function useAddForm(initial = {}) {
 		setDraft
 	};
 }
+/**
+* The text currently being edited for a given focus index. Chooser fields
+* (0 when not creating an app, 1) have no text and return "".
+* Used to place the cursor at end-of-value whenever focus changes.
+*/
+function fieldValue(d, focused) {
+	if (focused === 0) return d.creatingApp ? d.newApp : "";
+	if (focused === 2) return d.action;
+	if (focused === 3) {
+		if (d.type === "command") return d.command;
+		if (d.type === "shortcut") return d.keys;
+		return d.stepLine;
+	}
+	if (focused === 4) return d.tags;
+	if (focused === 5) return d.notes;
+	return "";
+}
 //#endregion
 //#region src/tui/AddEntryForm.tsx
 const TYPES = [
@@ -770,9 +1039,13 @@ const TYPES = [
 const LAST_FIELD = 5;
 function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, resolveTarget, initial, initialFocus, title }) {
 	const { draft, update, setDraft } = useAddForm(initial ?? { app: apps[0] ?? "" });
+	const { stdout } = useStdout();
 	const [focused, setFocused] = useState(initialFocus ?? 0);
+	const [pos, setPos] = useState(() => [...fieldValue(draft, initialFocus ?? 0)].length);
 	const [stepCursor, setStepCursor] = useState(initial?.steps?.length ?? 0);
 	const [grabbed, setGrabbed] = useState(false);
+	const [editingStep, setEditingStep] = useState(null);
+	const [editBuffer, setEditBuffer] = useState("");
 	const [appIndex, setAppIndex] = useState(() => {
 		const i = apps.indexOf(initial?.app ?? apps[0] ?? "");
 		return i >= 0 ? i : 0;
@@ -780,10 +1053,73 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 	const [screen, setScreen] = useState("form");
 	const [hint, setHint] = useState("");
 	const [writeError, setWriteError] = useState("");
+	const draftRef = useRef(draft);
+	draftRef.current = draft;
+	const posRef = useRef(pos);
+	posRef.current = pos;
+	const focusedRef = useRef(focused);
+	focusedRef.current = focused;
+	const editingStepRef = useRef(editingStep);
+	editingStepRef.current = editingStep;
+	const editBufferRef = useRef(editBuffer);
+	editBufferRef.current = editBuffer;
+	const stepCursorRef = useRef(stepCursor);
+	stepCursorRef.current = stepCursor;
+	const grabbedRef = useRef(grabbed);
+	grabbedRef.current = grabbed;
+	/**
+	* Change focus AND place the cursor at the end of the newly-focused field.
+	* Done here rather than in a useEffect: an effect runs after render, leaving
+	* one frame drawn with the previous field's pos.
+	*
+	* Also synchronously clears any open step edit OR grab. ⌃N/⌃P are handled
+	* above the field-3 block, so they fire even while `editingStepRef.current`
+	* is set or `grabbedRef.current` is true — if a SECOND keystroke (e.g. esc)
+	* arrives in the same batch right after, it must see the edit/grab as
+	* already closed, not wait for the cleanup effect below (which only runs
+	* after the batch is committed and rendered, i.e. too late for that second
+	* keystroke).
+	*/
+	const focusField = (f) => {
+		focusedRef.current = f;
+		setFocused(f);
+		const next = [...fieldValue(draftRef.current, f)].length;
+		posRef.current = next;
+		setPos(next);
+		editingStepRef.current = null;
+		setEditingStep(null);
+		editBufferRef.current = "";
+		setEditBuffer("");
+		grabbedRef.current = false;
+		setGrabbed(false);
+		stepCursorRef.current = draftRef.current.steps.length;
+		setStepCursor(draftRef.current.steps.length);
+	};
+	/** Enter/exit step-edit mode, keeping the ref in sync for same-batch reads. */
+	const setEditing = (step) => {
+		editingStepRef.current = step;
+		setEditingStep(step);
+	};
+	/** Move the step cursor, keeping the ref in sync for same-batch reads. */
+	const setStep = (cursor) => {
+		stepCursorRef.current = cursor;
+		setStepCursor(cursor);
+	};
+	/** Toggle grab, keeping the ref in sync for same-batch reads. */
+	const setGrab = (g) => {
+		grabbedRef.current = g;
+		setGrabbed(g);
+	};
 	useEffect(() => {
 		if (!(focused === 3 && draft.type === "recipe")) {
+			grabbedRef.current = false;
 			setGrabbed(false);
+			stepCursorRef.current = draft.steps.length;
 			setStepCursor(draft.steps.length);
+			editingStepRef.current = null;
+			setEditingStep(null);
+			editBufferRef.current = "";
+			setEditBuffer("");
 		}
 	}, [
 		focused,
@@ -792,20 +1128,34 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 	]);
 	const appChoices = [...apps, "Create new app…"];
 	function commitAppSelection(index) {
-		if (index === apps.length) update({ creatingApp: true });
-		else update({
-			creatingApp: false,
-			app: apps[index] ?? ""
-		});
+		if (index === apps.length) {
+			draftRef.current = {
+				...draftRef.current,
+				creatingApp: true
+			};
+			update({ creatingApp: true });
+		} else {
+			const app = apps[index] ?? "";
+			draftRef.current = {
+				...draftRef.current,
+				creatingApp: false,
+				app
+			};
+			update({
+				creatingApp: false,
+				app
+			});
+		}
 	}
 	function goReview() {
-		const d = flushStep(draft);
+		const d = flushStep(draftRef.current);
 		const v = validateDraft(d);
 		if (v) {
 			setHint(v);
 			return;
 		}
 		setHint("");
+		draftRef.current = d;
 		setDraft(d);
 		setScreen("review");
 	}
@@ -823,11 +1173,20 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 			}
 			return;
 		}
-		if (grabbed && key.escape) return setGrabbed(false);
+		if (grabbedRef.current && key.escape) return setGrab(false);
+		if (editingStepRef.current !== null && key.escape) {
+			setEditing(null);
+			editBufferRef.current = "";
+			setEditBuffer("");
+			const appendEndPos = [...draftRef.current.stepLine].length;
+			posRef.current = appendEndPos;
+			setPos(appendEndPos);
+			return;
+		}
 		if (key.escape) return onCancel();
-		if (key.ctrl && input === "n") return setFocused((f) => Math.min(f + 1, LAST_FIELD));
-		if (key.ctrl && input === "p") return setFocused((f) => Math.max(f - 1, 0));
-		if (focused === 0) {
+		if (key.ctrl && input === "n") return focusField(Math.min(focusedRef.current + 1, LAST_FIELD));
+		if (key.ctrl && input === "p") return focusField(Math.max(focusedRef.current - 1, 0));
+		if (focusedRef.current === 0) {
 			if (key.upArrow) {
 				const next = Math.max(appIndex - 1, 0);
 				setAppIndex(next);
@@ -838,75 +1197,187 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 				setAppIndex(next);
 				return commitAppSelection(next);
 			}
-			if (draft.creatingApp) {
-				if (key.return) return setFocused(1);
-				if (key.backspace || key.delete) return update({ newApp: draft.newApp.slice(0, -1) });
-				if (input && !key.ctrl && !key.meta) return update({ newApp: draft.newApp + input });
+			if (draftRef.current.creatingApp) {
+				if (key.return) return focusField(1);
+				const nextApp = applyTextKey({
+					text: draftRef.current.newApp,
+					pos: posRef.current
+				}, input, key, { lineKeys: true });
+				if (nextApp) {
+					draftRef.current = {
+						...draftRef.current,
+						newApp: nextApp.text
+					};
+					update({ newApp: nextApp.text });
+					posRef.current = nextApp.pos;
+					setPos(nextApp.pos);
+				}
 				return;
 			}
-			if (key.return) return setFocused(1);
+			if (key.return) return focusField(1);
 			return;
 		}
-		if (focused === 1) {
+		if (focusedRef.current === 1) {
 			if (key.leftArrow || key.rightArrow || input === " ") {
-				const idx = TYPES.indexOf(draft.type);
-				return update({ type: TYPES[key.leftArrow ? (idx + TYPES.length - 1) % TYPES.length : (idx + 1) % TYPES.length] });
+				const idx = TYPES.indexOf(draftRef.current.type);
+				const nextType = TYPES[key.leftArrow ? (idx + TYPES.length - 1) % TYPES.length : (idx + 1) % TYPES.length] ?? "shortcut";
+				draftRef.current = {
+					...draftRef.current,
+					type: nextType
+				};
+				return update({ type: nextType });
 			}
-			if (key.return) return setFocused(2);
+			if (key.return) return focusField(2);
 			return;
 		}
-		if (focused === 3 && draft.type === "recipe") {
-			const steps = draft.steps;
-			const onAppendLine = stepCursor >= steps.length;
-			if (grabbed) {
-				if (key.upArrow && stepCursor > 0) {
-					update({ steps: moveStep(steps, stepCursor, stepCursor - 1) });
-					return setStepCursor(stepCursor - 1);
+		if (focusedRef.current === 3 && draftRef.current.type === "recipe") {
+			const steps = draftRef.current.steps;
+			const onAppendLine = stepCursorRef.current >= steps.length;
+			if (grabbedRef.current) {
+				if (key.upArrow && stepCursorRef.current > 0) {
+					const nextSteps = moveStep(steps, stepCursorRef.current, stepCursorRef.current - 1);
+					draftRef.current = {
+						...draftRef.current,
+						steps: nextSteps
+					};
+					update({ steps: nextSteps });
+					return setStep(stepCursorRef.current - 1);
 				}
-				if (key.downArrow && stepCursor < steps.length - 1) {
-					update({ steps: moveStep(steps, stepCursor, stepCursor + 1) });
-					return setStepCursor(stepCursor + 1);
+				if (key.downArrow && stepCursorRef.current < steps.length - 1) {
+					const nextSteps = moveStep(steps, stepCursorRef.current, stepCursorRef.current + 1);
+					draftRef.current = {
+						...draftRef.current,
+						steps: nextSteps
+					};
+					update({ steps: nextSteps });
+					return setStep(stepCursorRef.current + 1);
+				}
+				if (key.return || input === " " || key.escape) return setGrab(false);
+				return;
+			}
+			if (editingStepRef.current !== null) {
+				const idx = editingStepRef.current;
+				if (key.return) {
+					const trimmed = editBufferRef.current.trim();
+					if (trimmed) {
+						const next = [...steps];
+						next[idx] = trimmed;
+						draftRef.current = {
+							...draftRef.current,
+							steps: next
+						};
+						update({ steps: next });
+					}
+					setEditing(null);
+					editBufferRef.current = "";
+					setEditBuffer("");
+					const appendEndPos = [...draftRef.current.stepLine].length;
+					posRef.current = appendEndPos;
+					setPos(appendEndPos);
+					setStep(steps.length);
+					return;
+				}
+				const nextEdit = applyTextKey({
+					text: editBufferRef.current,
+					pos: posRef.current
+				}, input, key, { lineKeys: true });
+				if (nextEdit) {
+					editBufferRef.current = nextEdit.text;
+					setEditBuffer(nextEdit.text);
+					posRef.current = nextEdit.pos;
+					setPos(nextEdit.pos);
+					return;
 				}
-				if (key.return || input === " " || key.escape) return setGrabbed(false);
 				return;
 			}
 			if (onAppendLine) {
+				if ((key.backspace || key.delete) && !draftRef.current.stepLine) {
+					if (steps.length) return setStep(steps.length - 1);
+					return;
+				}
+				if (key.upArrow && !draftRef.current.stepLine) {
+					if (steps.length) return setStep(steps.length - 1);
+					return;
+				}
 				if (key.return) {
-					if (draft.stepLine.trim()) {
+					const trimmed = draftRef.current.stepLine.trim();
+					if (trimmed) {
+						const nextSteps = [...steps, trimmed];
+						draftRef.current = {
+							...draftRef.current,
+							steps: nextSteps,
+							stepLine: ""
+						};
 						update({
-							steps: [...steps, draft.stepLine.trim()],
+							steps: nextSteps,
 							stepLine: ""
 						});
-						setStepCursor(steps.length + 1);
+						setStep(steps.length + 1);
+						posRef.current = 0;
+						setPos(0);
 					}
 					return;
 				}
-				if (key.backspace || key.delete) {
-					if (draft.stepLine) return update({ stepLine: draft.stepLine.slice(0, -1) });
-					if (steps.length) return setStepCursor(steps.length - 1);
+				const nextLine = applyTextKey({
+					text: draftRef.current.stepLine,
+					pos: posRef.current
+				}, input, key, { lineKeys: true });
+				if (nextLine) {
+					draftRef.current = {
+						...draftRef.current,
+						stepLine: nextLine.text
+					};
+					update({ stepLine: nextLine.text });
+					posRef.current = nextLine.pos;
+					setPos(nextLine.pos);
 					return;
 				}
 				if (key.upArrow) {
-					if (steps.length) return setStepCursor(steps.length - 1);
+					if (steps.length) return setStep(steps.length - 1);
 					return;
 				}
-				if (input && !key.ctrl && !key.meta) return update({ stepLine: draft.stepLine + input });
 				return;
 			}
-			if (key.upArrow) return setStepCursor(Math.max(0, stepCursor - 1));
-			if (key.downArrow) return setStepCursor(stepCursor + 1);
-			if (key.return || input === " ") return setGrabbed(true);
+			if (key.ctrl && input === "e") {
+				const target = steps[stepCursorRef.current];
+				if (target === void 0) return;
+				setEditing(stepCursorRef.current);
+				editBufferRef.current = target;
+				setEditBuffer(target);
+				const endPos = [...target].length;
+				posRef.current = endPos;
+				setPos(endPos);
+				return;
+			}
+			if (key.upArrow) return setStep(Math.max(0, stepCursorRef.current - 1));
+			if (key.downArrow) return setStep(stepCursorRef.current + 1);
+			if (key.return || input === " ") return setGrab(true);
 			if (key.backspace || key.delete) {
-				const next = deleteStep(steps, stepCursor);
+				const next = deleteStep(steps, stepCursorRef.current);
+				draftRef.current = {
+					...draftRef.current,
+					steps: next
+				};
 				update({ steps: next });
-				return setStepCursor(Math.min(stepCursor, next.length));
+				return setStep(Math.min(stepCursorRef.current, next.length));
 			}
 			return;
 		}
 		if (key.return) return goReview();
-		const fieldKey = focused === 2 ? "action" : focused === 3 ? draft.type === "command" ? "command" : "keys" : focused === 4 ? "tags" : "notes";
-		if (key.backspace || key.delete) return update({ [fieldKey]: draft[fieldKey].slice(0, -1) });
-		if (input && !key.ctrl && !key.meta) return update({ [fieldKey]: draft[fieldKey] + input });
+		const fieldKey = focusedRef.current === 2 ? "action" : focusedRef.current === 3 ? draftRef.current.type === "command" ? "command" : "keys" : focusedRef.current === 4 ? "tags" : "notes";
+		const nextText = applyTextKey({
+			text: draftRef.current[fieldKey],
+			pos: posRef.current
+		}, input, key, { lineKeys: true });
+		if (nextText) {
+			draftRef.current = {
+				...draftRef.current,
+				[fieldKey]: nextText.text
+			};
+			update({ [fieldKey]: nextText.text });
+			posRef.current = nextText.pos;
+			setPos(nextText.pos);
+		}
 	});
 	const enterHint = focused <= 1 ? "next" : focused === 3 && draft.type === "recipe" ? "add step" : "review";
 	if (screen === "review") return /* @__PURE__ */ jsx(ReviewScreen, {
@@ -929,9 +1400,13 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 					apps,
 					appIndex,
 					focused,
+					pos,
+					width: formFieldWidth(stdout?.columns),
 					existingTags,
 					stepCursor,
-					grabbed
+					grabbed,
+					editingStep,
+					editBuffer
 				})
 			}),
 			/* @__PURE__ */ jsxs(Box, {
@@ -1127,6 +1602,9 @@ function FilterPicker({ apps, onSelect, onCancel, height = 16, width = 40 }) {
 }
 //#endregion
 //#region src/tui/Footer.tsx
+function hintLine(filterActive, resultCount) {
+	return `↑↓ move ⏎ copy ⌃O add ⌃E edit ⌃X del ⌃F filter ⌃S star ${filterActive ? "⎋ clear filter" : "⎋ quit"} (${resultCount})`;
+}
 function Footer({ flash, errorCount, resultCount, confirm, filterActive = false }) {
 	if (confirm) return /* @__PURE__ */ jsxs(Box, {
 		marginTop: 1,
@@ -1147,7 +1625,7 @@ function Footer({ flash, errorCount, resultCount, confirm, filterActive = false
 		children: [/* @__PURE__ */ jsx(Text, {
 			color: "gray",
 			wrap: "truncate-end",
-			children: `↑↓ move ⏎ copy ⌃O add ⌃E edit ⌃X del ⌃F filter ⌃S star ${filterActive ? "⎋ clear filter" : "⎋ quit"} ⌃U clear (${resultCount})`
+			children: hintLine(filterActive, resultCount)
 		}), flash ? /* @__PURE__ */ jsx(Text, {
 			color: "green",
 			wrap: "truncate-end",
@@ -1253,22 +1731,20 @@ function ResultList({ results, selected, query, height = 12, width = "50%", favo
 }
 //#endregion
 //#region src/tui/SearchInput.tsx
-function SearchInput({ query, filterLabel }) {
+function SearchInput({ query, pos, width, filterLabel }) {
 	return /* @__PURE__ */ jsxs(Box, {
 		justifyContent: "space-between",
 		children: [/* @__PURE__ */ jsxs(Text, {
 			wrap: "truncate-end",
-			children: [
-				/* @__PURE__ */ jsx(Text, {
-					color: "cyan",
-					children: "search: "
-				}),
-				/* @__PURE__ */ jsx(Text, { children: query }),
-				/* @__PURE__ */ jsx(Text, {
-					inverse: true,
-					children: " "
-				})
-			]
+			children: [/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "search: "
+			}), /* @__PURE__ */ jsx(CursorText, {
+				value: query,
+				pos,
+				width,
+				focused: true
+			})]
 		}), filterLabel ? /* @__PURE__ */ jsx(Text, {
 			color: "gray",
 			wrap: "truncate-end",
@@ -1277,42 +1753,6 @@ function SearchInput({ query, filterLabel }) {
 	});
 }
 //#endregion
-//#region src/tui/input.ts
-/**
-* Drop the run of trailing whitespace, then the run of trailing non-whitespace.
-* Mirrors readline's `unix-word-rubout` / `backward-kill-word` behavior so a
-* single press eats both the spaces and the word immediately before them.
-*/
-function deleteWordBack(query) {
-	const trimmed = query.replace(/\s+$/, "");
-	const lastSpace = trimmed.lastIndexOf(" ");
-	if (lastSpace === -1) return "";
-	return trimmed.slice(0, lastSpace + 1);
-}
-/**
-* Rows to give the windowed result list, sized to the terminal height so the
-* whole frame fits the viewport. Ink can only redraw in place while the frame
-* stays within the terminal; an oversized frame duplicates on every keypress.
-*/
-function visibleListHeight(terminalRows) {
-	return Math.max(1, (terminalRows && terminalRows > 0 ? terminalRows : 24) - 4);
-}
-/**
-* Integer widths for the two side-by-side panes. They MUST sum to the exact
-* terminal width: two `width="50%"` siblings each round up on an odd-width
-* terminal (58 + 58 = 116 at 115 cols), overflowing by a column. The terminal
-* then soft-wraps the full-width rows, Ink miscounts the frame height, and its
-* redraw leaves stale lines stacked on every keystroke.
-*/
-function columnWidths(terminalCols) {
-	const cols = terminalCols && terminalCols > 0 ? terminalCols : 80;
-	const left = Math.floor(cols / 2);
-	return {
-		left,
-		right: cols - left
-	};
-}
-//#endregion
 //#region src/tui/App.tsx
 const sameApp = (a, b) => a.trim().toLowerCase() === b.trim().toLowerCase();
 function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboard }) {
@@ -1324,9 +1764,12 @@ function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboa
 	const [favorites, setFavorites] = useState(() => dataDir ? loadFavorites(dataDir) : /* @__PURE__ */ new Set());
 	const [editTarget, setEditTarget] = useState(null);
 	const [pendingDelete, setPendingDelete] = useState(null);
-	const [query, setQuery] = useState("");
+	const [query, setQuery] = useState(() => atEnd(""));
 	const [selected, setSelected] = useState(0);
 	const [flash, setFlash] = useState("");
+	const queryRef = useRef(query);
+	queryRef.current = query;
+	const currentRef = useRef(void 0);
 	const reload = useCallback(() => {
 		if (dataDir) setEntries(loadEntries(dataDir).entries);
 	}, [dataDir]);
@@ -1339,9 +1782,10 @@ function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboa
 		filter,
 		favorites
 	]);
-	const results = useMemo(() => search(scoped, query), [scoped, query]);
+	const results = useMemo(() => search(scoped, query.text), [scoped, query.text]);
 	const sel = results.length ? Math.min(selected, results.length - 1) : 0;
 	const current = results[sel];
+	currentRef.current = current;
 	const listHeight = visibleListHeight(stdout?.rows);
 	const { left, right } = columnWidths(stdout?.columns);
 	useInput((input, key) => {
@@ -1362,6 +1806,7 @@ function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboa
 			return;
 		}
 		if (!key.return && flash) setFlash("");
+		const curEntry = currentRef.current;
 		if (key.escape) {
 			if (filter.type !== "all") {
 				setFilter({ type: "all" });
@@ -1375,23 +1820,23 @@ function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboa
 			setMode("add");
 			return;
 		}
-		if (dataDir && current && key.ctrl && input === "e") {
-			setEditTarget(current);
+		if (dataDir && curEntry && key.ctrl && input === "e") {
+			setEditTarget(curEntry);
 			setMode("edit");
 			return;
 		}
-		if (dataDir && current && key.ctrl && input === "x") {
-			setPendingDelete(current);
+		if (dataDir && curEntry && key.ctrl && input === "x") {
+			setPendingDelete(curEntry);
 			return;
 		}
 		if (key.ctrl && input === "f") {
 			setMode("filter");
 			return;
 		}
-		if (dataDir && current && key.ctrl && input === "s") {
-			const next = toggleFavorite(dataDir, current.app, current.action);
+		if (dataDir && curEntry && key.ctrl && input === "s") {
+			const next = toggleFavorite(dataDir, curEntry.app, curEntry.action);
 			setFavorites(next);
-			setFlash(next.has(favKey(current.app, current.action)) ? "★ starred" : "☆ unstarred");
+			setFlash(next.has(favKey(curEntry.app, curEntry.action)) ? "★ starred" : "☆ unstarred");
 			return;
 		}
 		if (key.downArrow || key.ctrl && input === "n") {
@@ -1403,28 +1848,17 @@ function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboa
 			return;
 		}
 		if (key.return) {
-			if (current) setFlash(onCopy(current.keys ?? current.command ?? `${current.app}: ${current.action}`) ? "✓ copied!" : "✗ copy failed");
-			return;
-		}
-		if (key.meta && (key.backspace || key.delete) || key.ctrl && input === "w") {
-			setQuery(deleteWordBack);
-			setSelected(0);
+			if (curEntry) setFlash(onCopy(curEntry.keys ?? curEntry.command ?? `${curEntry.app}: ${curEntry.action}`) ? "✓ copied!" : "✗ copy failed");
 			return;
 		}
-		if (key.ctrl && input === "u") {
-			setQuery("");
-			setSelected(0);
+		const cur = queryRef.current;
+		const next = applyTextKey(cur, input, key, { lineKeys: false });
+		if (next) {
+			if (next.text !== cur.text) setSelected(0);
+			queryRef.current = next;
+			setQuery(next);
 			return;
 		}
-		if (key.backspace || key.delete) {
-			setQuery((q) => q.slice(0, -1));
-			setSelected(0);
-			return;
-		}
-		if (input && !key.ctrl && !key.meta) {
-			setQuery((q) => q + input);
-			setSelected(0);
-		}
 	}, { isActive: mode === "search" });
 	const existingTags = [...new Set(entries.flatMap((e) => e.tags ?? []))].sort();
 	if (mode === "filter") return /* @__PURE__ */ jsx(FilterPicker, {
@@ -1478,17 +1912,20 @@ function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboa
 			setEditTarget(null);
 		}
 	});
+	const filterLabelText = filter.type === "app" ? `(filter: ${filter.app})` : filter.type === "favorites" ? "(★ Favorites)" : void 0;
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		children: [
 			/* @__PURE__ */ jsx(SearchInput, {
-				query,
-				filterLabel: filter.type === "app" ? `(filter: ${filter.app})` : filter.type === "favorites" ? "(★ Favorites)" : void 0
+				query: query.text,
+				pos: query.pos,
+				width: searchFieldWidth(stdout?.columns, filterLabelText?.length ?? 0),
+				filterLabel: filterLabelText
 			}),
 			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(ResultList, {
 				results,
 				selected: sel,
-				query,
+				query: query.text,
 				height: listHeight,
 				width: left,
 				favorites,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arthony/keybook",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "publishConfig": {
     "access": "public"
   },