@oh-my-pi/pi-tui 5.5.0 → 5.6.7

package/src/components/input.ts

@@ -1,5 +1,5 @@
 import { getEditorKeybindings } from "../keybindings";
-import type { Component } from "../tui";
+import { type Component, CURSOR_MARKER, type Focusable } from "../tui";
 import { getSegmenter, isPunctuationChar, isWhitespaceChar, visibleWidth } from "../utils";
 
 const segmenter = getSegmenter();
@@ -7,12 +7,15 @@ const segmenter = getSegmenter();
 /**
  * Input component - single-line text input with horizontal scrolling
  */
-export class Input implements Component {
+export class Input implements Component, Focusable {
 	private value: string = "";
 	private cursor: number = 0; // Cursor position in the value
 	public onSubmit?: (value: string) => void;
 	public onEscape?: () => void;
 
+	/** Focusable interface - set by TUI when focus changes */
+	focused: boolean = false;
+
 	// Bracketed paste mode buffering
 	private pasteBuffer: string = "";
 	private isInPaste: boolean = false;
@@ -325,9 +328,12 @@ export class Input implements Component {
 		const atCursor = visibleText[cursorDisplay] || " "; // Character at cursor, or space if at end
 		const afterCursor = visibleText.slice(cursorDisplay + 1);
 
+		// Hardware cursor marker (zero-width, emitted before fake cursor for IME positioning)
+		const marker = this.focused ? CURSOR_MARKER : "";
+
 		// Use inverse video to show cursor
 		const cursorChar = `\x1b[7m${atCursor}\x1b[27m`; // ESC[7m = reverse video, ESC[27m = normal
-		const textWithCursor = beforeCursor + cursorChar + afterCursor;
+		const textWithCursor = beforeCursor + marker + cursorChar + afterCursor;
 
 		// Calculate visual width
 		const visualLength = visibleWidth(textWithCursor);

package/src/components/select-list.ts

@@ -1,4 +1,4 @@
-import { isArrowDown, isArrowUp, isCtrlC, isEnter, isEscape } from "../keys";
+import { matchesKey } from "../keys";
 import type { SymbolTheme } from "../symbols";
 import type { Component } from "../tui";
 import { truncateToWidth, visibleWidth } from "../utils";
@@ -149,24 +149,24 @@ export class SelectList implements Component {
 
 	handleInput(keyData: string): void {
 		// Up arrow - wrap to bottom when at top
-		if (isArrowUp(keyData)) {
+		if (matchesKey(keyData, "up")) {
 			this.selectedIndex = this.selectedIndex === 0 ? this.filteredItems.length - 1 : this.selectedIndex - 1;
 			this.notifySelectionChange();
 		}
 		// Down arrow - wrap to top when at bottom
-		else if (isArrowDown(keyData)) {
+		else if (matchesKey(keyData, "down")) {
 			this.selectedIndex = this.selectedIndex === this.filteredItems.length - 1 ? 0 : this.selectedIndex + 1;
 			this.notifySelectionChange();
 		}
 		// Enter
-		else if (isEnter(keyData)) {
+		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selectedItem = this.filteredItems[this.selectedIndex];
 			if (selectedItem && this.onSelect) {
 				this.onSelect(selectedItem);
 			}
 		}
 		// Escape or Ctrl+C
-		else if (isEscape(keyData) || isCtrlC(keyData)) {
+		else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesKey(keyData, "ctrl+c")) {
 			if (this.onCancel) {
 				this.onCancel();
 			}

package/src/components/settings-list.ts

@@ -1,4 +1,4 @@
-import { isArrowDown, isArrowUp, isCtrlC, isEnter, isEscape } from "../keys";
+import { matchesKey } from "../keys";
 import type { Component } from "../tui";
 import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils";
 
@@ -145,13 +145,13 @@ export class SettingsList implements Component {
 		}
 
 		// Main list input handling
-		if (isArrowUp(data)) {
+		if (matchesKey(data, "up")) {
 			this.selectedIndex = this.selectedIndex === 0 ? this.items.length - 1 : this.selectedIndex - 1;
-		} else if (isArrowDown(data)) {
+		} else if (matchesKey(data, "down")) {
 			this.selectedIndex = this.selectedIndex === this.items.length - 1 ? 0 : this.selectedIndex + 1;
-		} else if (isEnter(data) || data === " ") {
+		} else if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n" || data === " ") {
 			this.activateItem();
-		} else if (isEscape(data) || isCtrlC(data)) {
+		} else if (matchesKey(data, "escape") || matchesKey(data, "esc") || matchesKey(data, "ctrl+c")) {
 			this.onCancel();
 		}
 	}

package/src/components/tab-bar.ts

@@ -9,8 +9,9 @@
  * - Shift+Tab / Arrow Left: Previous tab (wraps around)
  */
 
-import { isArrowLeft, isArrowRight, isShiftTab, isTab } from "../keys";
+import { matchesKey } from "../keys";
 import type { Component } from "../tui";
+import { wrapTextWithAnsi } from "../utils";
 
 /** Tab definition */
 export interface Tab {
@@ -99,19 +100,19 @@ export class TabBar implements Component {
 	 * @returns true if the input was handled, false otherwise
 	 */
 	handleInput(data: string): boolean {
-		if (isTab(data) || isArrowRight(data)) {
+		if (matchesKey(data, "tab") || matchesKey(data, "right")) {
 			this.nextTab();
 			return true;
 		}
-		if (isShiftTab(data) || isArrowLeft(data)) {
+		if (matchesKey(data, "shift+tab") || matchesKey(data, "left")) {
 			this.prevTab();
 			return true;
 		}
 		return false;
 	}
 
-	/** Render the tab bar as a single line */
-	render(_width: number): string[] {
+	/** Render the tab bar, wrapping to multiple lines if needed */
+	render(width: number): string[] {
 		const parts: string[] = [];
 
 		// Label prefix
@@ -135,6 +136,8 @@ export class TabBar implements Component {
 		parts.push("  ");
 		parts.push(this.theme.hint("(tab to cycle)"));
 
-		return [parts.join("")];
+		const line = parts.join("");
+		const maxWidth = Math.max(1, width);
+		return wrapTextWithAnsi(line, maxWidth);
 	}
 }

package/src/index.ts

@@ -36,57 +36,15 @@ export {
 } from "./keybindings";
 // Kitty keyboard protocol helpers
 export {
-	isAltBackspace,
-	isAltEnter,
-	isAltLeft,
-	isAltRight,
-	isArrowDown,
-	isArrowLeft,
-	isArrowRight,
-	isArrowUp,
-	isBackspace,
-	isCapsLock,
-	isCtrlA,
-	isCtrlC,
-	isCtrlD,
-	isCtrlE,
-	isCtrlG,
-	isCtrlK,
-	isCtrlL,
-	isCtrlLeft,
-	isCtrlO,
-	isCtrlP,
-	isCtrlRight,
-	isCtrlT,
-	isCtrlU,
-	isCtrlV,
-	isCtrlW,
-	isCtrlY,
-	isCtrlZ,
-	isDelete,
-	isEnd,
-	isEnter,
-	isEscape,
-	isHome,
 	isKeyRelease,
 	isKeyRepeat,
 	isKittyProtocolActive,
-	isPageDown,
-	isPageUp,
-	isShiftBackspace,
-	isShiftCtrlD,
-	isShiftCtrlO,
-	isShiftCtrlP,
-	isShiftDelete,
-	isShiftEnter,
-	isShiftSpace,
-	isShiftTab,
-	isTab,
 	Key,
 	type KeyEventType,
 	type KeyId,
 	matchesKey,
 	parseKey,
+	parseKittySequence,
 	setKittyProtocolActive,
 } from "./keys";
 // Input buffering for batch splitting

package/src/keybindings.ts

@@ -1,4 +1,4 @@
-import { type KeyId, matchesKey } from "./keys";
+import { type KeyId, matchesKey, parseKey } from "./keys";
 
 /**
  * Editor actions that can be bound to keys.
@@ -77,6 +77,29 @@ export const DEFAULT_EDITOR_KEYBINDINGS: Required<EditorKeybindingsConfig> = {
 	copy: "ctrl+c",
 };
 
+const SHIFTED_SYMBOL_KEYS = new Set<string>([
+	"!",
+	"@",
+	"#",
+	"$",
+	"%",
+	"^",
+	"&",
+	"*",
+	"(",
+	")",
+	"_",
+	"+",
+	"{",
+	"}",
+	"|",
+	":",
+	"<",
+	">",
+	"?",
+	"~",
+]);
+
 /**
  * Manages keybindings for the editor.
  */
@@ -114,7 +137,12 @@ export class EditorKeybindingsManager {
 		for (const key of keys) {
 			if (matchesKey(data, key)) return true;
 		}
-		return false;
+
+		const parsed = parseKey(data);
+		if (!parsed || !parsed.startsWith("shift+")) return false;
+		const keyName = parsed.slice("shift+".length);
+		if (!SHIFTED_SYMBOL_KEYS.has(keyName)) return false;
+		return keys.includes(keyName as KeyId);
 	}
 
 	/**