@arthony/keybook 0.8.0 → 0.9.0

package/README.md

@@ -44,8 +44,9 @@ In the TUI: type to fuzzy-search, ↑/↓ to move, ⏎ to copy the shortcut (or
 recipe's command) to the clipboard, ⎋ to quit.
 
 Manage entries without leaving the search screen: `⌃O` to add, `⌃E` to edit the
-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`
+selected entry (pre-filled form), `⌃X` to delete it (with a `y/n` confirm). In
+the form, the App picker jumps as you type (`vs` lands on VS Code; `↑`/`↓` still
+step through it). 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

package/dist/cli.js

@@ -553,7 +553,7 @@ function Field({ label, value, focused, pos, width }) {
 		focused
 	})] });
 }
-function FormFields({ draft, apps, appIndex, focused, pos, width, existingTags, stepCursor, grabbed, editingStep, editBuffer }) {
+function FormFields({ draft, apps, appIndex, appPrefix = "", 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, {
@@ -567,7 +567,7 @@ function FormFields({ draft, apps, appIndex, focused, pos, width, existingTags,
 				pos,
 				width,
 				focused: focused === 0
-			}) : /* @__PURE__ */ jsxs(Text, { children: [appChoices[appIndex] ?? "—", focused === 0 ? "  (↑/↓)" : ""] })] }),
+			}) : /* @__PURE__ */ jsxs(Text, { children: [appChoices[appIndex] ?? "—", focused === 0 ? appPrefix ? `  (↑/↓ · "${appPrefix}")` : "  (↑/↓ or type)" : ""] })] }),
 			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
 				color: focused === 1 ? "cyan" : "gray",
 				children: "Type".padEnd(8)
@@ -1030,6 +1030,35 @@ function fieldValue(d, focused) {
 	return "";
 }
 //#endregion
+//#region src/tui/useTerminalSize.ts
+/**
+* The terminal's current size, re-read whenever stdout fires `resize`.
+*
+* Ink reacts to a resize by re-running Yoga layout and repainting, but it
+* never re-renders React, so any width or height computed from
+* `stdout.columns`/`stdout.rows` during render would stay frozen at the last
+* keystroke. Holding the size in state turns a resize into a render.
+*/
+function useTerminalSize() {
+	const { stdout } = useStdout();
+	const [size, setSize] = useState(() => ({
+		columns: stdout?.columns,
+		rows: stdout?.rows
+	}));
+	useEffect(() => {
+		if (!stdout) return;
+		const onResize = () => setSize({
+			columns: stdout.columns,
+			rows: stdout.rows
+		});
+		stdout.on("resize", onResize);
+		return () => {
+			stdout.off("resize", onResize);
+		};
+	}, [stdout]);
+	return size;
+}
+//#endregion
 //#region src/tui/AddEntryForm.tsx
 const TYPES = [
 	"shortcut",
@@ -1039,7 +1068,7 @@ 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 { columns } = useTerminalSize();
 	const [focused, setFocused] = useState(initialFocus ?? 0);
 	const [pos, setPos] = useState(() => [...fieldValue(draft, initialFocus ?? 0)].length);
 	const [stepCursor, setStepCursor] = useState(initial?.steps?.length ?? 0);
@@ -1050,6 +1079,7 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 		const i = apps.indexOf(initial?.app ?? apps[0] ?? "");
 		return i >= 0 ? i : 0;
 	});
+	const [appPrefix, setAppPrefix] = useState("");
 	const [screen, setScreen] = useState("form");
 	const [hint, setHint] = useState("");
 	const [writeError, setWriteError] = useState("");
@@ -1059,6 +1089,8 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 	posRef.current = pos;
 	const focusedRef = useRef(focused);
 	focusedRef.current = focused;
+	const appPrefixRef = useRef(appPrefix);
+	appPrefixRef.current = appPrefix;
 	const editingStepRef = useRef(editingStep);
 	editingStepRef.current = editingStep;
 	const editBufferRef = useRef(editBuffer);
@@ -1080,9 +1112,15 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 	* after the batch is committed and rendered, i.e. too late for that second
 	* keystroke).
 	*/
+	/** Set the type-to-jump prefix, keeping the ref in sync for same-batch reads. */
+	const setPrefix = (p) => {
+		appPrefixRef.current = p;
+		setAppPrefix(p);
+	};
 	const focusField = (f) => {
 		focusedRef.current = f;
 		setFocused(f);
+		setPrefix("");
 		const next = [...fieldValue(draftRef.current, f)].length;
 		posRef.current = next;
 		setPos(next);
@@ -1147,6 +1185,15 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 			});
 		}
 	}
+	/** Highlight the first app whose name starts with `prefix`; false if none does. */
+	function jumpToApp(prefix) {
+		const needle = prefix.toLowerCase();
+		const i = apps.findIndex((a) => a.toLowerCase().startsWith(needle));
+		if (i < 0) return false;
+		setAppIndex(i);
+		commitAppSelection(i);
+		return true;
+	}
 	function goReview() {
 		const d = flushStep(draftRef.current);
 		const v = validateDraft(d);
@@ -1188,11 +1235,13 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 		if (key.ctrl && input === "p") return focusField(Math.max(focusedRef.current - 1, 0));
 		if (focusedRef.current === 0) {
 			if (key.upArrow) {
+				setPrefix("");
 				const next = Math.max(appIndex - 1, 0);
 				setAppIndex(next);
 				return commitAppSelection(next);
 			}
 			if (key.downArrow) {
+				setPrefix("");
 				const next = Math.min(appIndex + 1, appChoices.length - 1);
 				setAppIndex(next);
 				return commitAppSelection(next);
@@ -1215,6 +1264,16 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 				return;
 			}
 			if (key.return) return focusField(1);
+			if (key.backspace || key.delete) {
+				const shorter = [...appPrefixRef.current].slice(0, -1).join("");
+				setPrefix(shorter);
+				if (shorter) jumpToApp(shorter);
+				return;
+			}
+			if (input && !key.ctrl && !key.meta) {
+				const longer = appPrefixRef.current + input;
+				if (jumpToApp(longer)) setPrefix(longer);
+			}
 			return;
 		}
 		if (focusedRef.current === 1) {
@@ -1399,9 +1458,10 @@ function AddEntryForm({ apps, existingTags, onSubmit, onComplete, onCancel, reso
 					draft,
 					apps,
 					appIndex,
+					appPrefix,
 					focused,
 					pos,
-					width: formFieldWidth(stdout?.columns),
+					width: formFieldWidth(columns),
 					existingTags,
 					stepCursor,
 					grabbed,
@@ -1600,12 +1660,55 @@ 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})`;
+/**
+* Hints in display order. Terminals narrower than the budget cannot show them
+* all, so `hintLine` drops them by `priority` (highest number first) until
+* the row fits. The quit / clear-filter hint and the result count are never
+* dropped: the count is what a narrow terminal used to lose, and ⎋ is the only
+* way out.
+*/
+const HINTS = [
+	{
+		text: "↑↓ move",
+		priority: 7
+	},
+	{
+		text: "⏎ copy",
+		priority: 1
+	},
+	{
+		text: "⌃O add",
+		priority: 2
+	},
+	{
+		text: "⌃E edit",
+		priority: 4
+	},
+	{
+		text: "⌃X del",
+		priority: 3
+	},
+	{
+		text: "⌃F filter",
+		priority: 5
+	},
+	{
+		text: "⌃S star",
+		priority: 6
+	}
+];
+function hintLine(filterActive, resultCount, columns = 80) {
+	const tail = `${filterActive ? "⎋ clear filter" : "⎋ quit"} (${resultCount})`;
+	const fit = Math.min(columns, 80);
+	const hints = [...HINTS];
+	for (;;) {
+		const line = [...hints.map((h) => h.text), tail].join(" ");
+		if ([...line].length <= fit || hints.length === 0) return line;
+		const drop = hints.reduce((a, b) => b.priority > a.priority ? b : a);
+		hints.splice(hints.indexOf(drop), 1);
+	}
 }
-function Footer({ flash, errorCount, resultCount, confirm, filterActive = false }) {
+function Footer({ flash, errorCount, resultCount, confirm, filterActive = false, columns }) {
 	if (confirm) return /* @__PURE__ */ jsxs(Box, {
 		marginTop: 1,
 		justifyContent: "space-between",
@@ -1625,7 +1728,7 @@ function Footer({ flash, errorCount, resultCount, confirm, filterActive = false
 		children: [/* @__PURE__ */ jsx(Text, {
 			color: "gray",
 			wrap: "truncate-end",
-			children: hintLine(filterActive, resultCount)
+			children: hintLine(filterActive, resultCount, columns)
 		}), flash ? /* @__PURE__ */ jsx(Text, {
 			color: "green",
 			wrap: "truncate-end",
@@ -1757,7 +1860,7 @@ function SearchInput({ query, pos, width, filterLabel }) {
 const sameApp = (a, b) => a.trim().toLowerCase() === b.trim().toLowerCase();
 function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboard }) {
 	const { exit } = useApp();
-	const { stdout } = useStdout();
+	const { columns, rows } = useTerminalSize();
 	const [entries, setEntries] = useState(initial);
 	const [mode, setMode] = useState("search");
 	const [filter, setFilter] = useState({ type: "all" });
@@ -1786,8 +1889,8 @@ function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboa
 	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);
+	const listHeight = visibleListHeight(rows);
+	const { left, right } = columnWidths(columns);
 	useInput((input, key) => {
 		if (key.ctrl && input === "c") {
 			exit();
@@ -1919,7 +2022,7 @@ function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboa
 			/* @__PURE__ */ jsx(SearchInput, {
 				query: query.text,
 				pos: query.pos,
-				width: searchFieldWidth(stdout?.columns, filterLabelText?.length ?? 0),
+				width: searchFieldWidth(columns, filterLabelText?.length ?? 0),
 				filterLabel: filterLabelText
 			}),
 			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(ResultList, {
@@ -1939,6 +2042,7 @@ function App({ entries: initial, errorCount = 0, dataDir, onCopy = copyToClipboa
 				errorCount,
 				resultCount: results.length,
 				filterActive: filter.type !== "all",
+				columns,
 				confirm: pendingDelete ? `Delete '${pendingDelete.app}: ${pendingDelete.action}'?` : void 0
 			})
 		]

package/package.json

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