Merge PR #382: word wrapping in Editor component

packages/tui/src/components/cancellable-loader.ts

@@ -0,0 +1,39 @@
+import { isEscape } from "../keys.js";
+import { Loader } from "./loader.js";
+
+/**
+ * Loader that can be cancelled with Escape.
+ * Extends Loader with an AbortSignal for cancelling async operations.
+ *
+ * @example
+ * const loader = new CancellableLoader(tui, cyan, dim, "Working...");
+ * loader.onAbort = () => done(null);
+ * doWork(loader.signal).then(done);
+ */
+export class CancellableLoader extends Loader {
+	private abortController = new AbortController();
+
+	/** Called when user presses Escape */
+	onAbort?: () => void;
+
+	/** AbortSignal that is aborted when user presses Escape */
+	get signal(): AbortSignal {
+		return this.abortController.signal;
+	}
+
+	/** Whether the loader was aborted */
+	get aborted(): boolean {
+		return this.abortController.signal.aborted;
+	}
+
+	handleInput(data: string): void {
+		if (isEscape(data)) {
+			this.abortController.abort();
+			this.onAbort?.();
+		}
+	}
+
+	dispose(): void {
+		this.stop();
+	}
+}

packages/tui/src/components/editor.ts

@@ -22,7 +22,10 @@ import {
 	isEnter,
 	isEscape,
 	isHome,
+	isShiftBackspace,
+	isShiftDelete,
 	isShiftEnter,
+	isShiftSpace,
 	isTab,
 } from "../keys.js";
 import type { Component } from "../tui.js";
@@ -637,8 +640,8 @@ export class Editor implements Component {
 				this.onSubmit(result);
 			}
 		}
-		// Backspace
-		else if (isBackspace(data)) {
+		// Backspace (including Shift+Backspace)
+		else if (isBackspace(data) || isShiftBackspace(data)) {
 			this.handleBackspace();
 		}
 		// Line navigation shortcuts (Home/End keys)
@@ -647,8 +650,8 @@ export class Editor implements Component {
 		} else if (isEnd(data)) {
 			this.moveToLineEnd();
 		}
-		// Forward delete (Fn+Backspace or Delete key)
-		else if (isDelete(data)) {
+		// Forward delete (Fn+Backspace or Delete key, including Shift+Delete)
+		else if (isDelete(data) || isShiftDelete(data)) {
 			this.handleForwardDelete();
 		}
 		// Word navigation (Option/Alt + Arrow or Ctrl + Arrow)
@@ -683,6 +686,10 @@ export class Editor implements Component {
 			// Left
 			this.moveCursor(0, -1);
 		}
+		// Shift+Space - insert regular space (Kitty protocol sends escape sequence)
+		else if (isShiftSpace(data)) {
+			this.insertCharacter(" ");
+		}
 		// Regular characters (printable characters and unicode, but not control characters)
 		else if (data.charCodeAt(0) >= 32) {
 			this.insertCharacter(data);

packages/tui/src/components/settings-list.ts

@@ -1,6 +1,6 @@
 import { isArrowDown, isArrowUp, isCtrlC, isEnter, isEscape } from "../keys.js";
 import type { Component } from "../tui.js";
-import { truncateToWidth, visibleWidth } from "../utils.js";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils.js";
 
 export interface SettingItem {
 	/** Unique identifier for this setting */
@@ -123,7 +123,10 @@ export class SettingsList implements Component {
 		const selectedItem = this.items[this.selectedIndex];
 		if (selectedItem?.description) {
 			lines.push("");
-			lines.push(this.theme.description(`  ${truncateToWidth(selectedItem.description, width - 4, "")}`));
+			const wrappedDesc = wrapTextWithAnsi(selectedItem.description, width - 4);
+			for (const line of wrappedDesc) {
+				lines.push(this.theme.description(`  ${line}`));
+			}
 		}
 
 		// Add hint