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

package/src/components/editor.ts

@@ -1,35 +1,7 @@
 import type { AutocompleteProvider, CombinedAutocompleteProvider } from "../autocomplete";
-import {
-	isAltBackspace,
-	isAltEnter,
-	isAltLeft,
-	isAltRight,
-	isArrowDown,
-	isArrowLeft,
-	isArrowRight,
-	isArrowUp,
-	isBackspace,
-	isCtrlA,
-	isCtrlC,
-	isCtrlE,
-	isCtrlK,
-	isCtrlLeft,
-	isCtrlRight,
-	isCtrlU,
-	isCtrlW,
-	isDelete,
-	isEnd,
-	isEnter,
-	isEscape,
-	isHome,
-	isShiftBackspace,
-	isShiftDelete,
-	isShiftEnter,
-	isShiftSpace,
-	isTab,
-} from "../keys";
+import { matchesKey } from "../keys";
 import type { SymbolTheme } from "../symbols";
-import type { Component } from "../tui";
+import { type Component, CURSOR_MARKER, type Focusable } from "../tui";
 import { getSegmenter, isPunctuationChar, isWhitespaceChar, truncateToWidth, visibleWidth } from "../utils";
 import { SelectList, type SelectListTheme } from "./select-list";
 
@@ -215,6 +187,44 @@ function wordWrapLine(line: string, maxWidth: number): TextChunk[] {
 	return chunks.length > 0 ? chunks : [{ text: "", startIndex: 0, endIndex: 0 }];
 }
 
+// Kitty CSI-u sequences for printable keys, including optional shifted/base codepoints.
+const KITTY_CSI_U_REGEX = /^\x1b\[(\d+)(?::(\d*))?(?::(\d+))?(?:;(\d+))?(?::(\d+))?u$/;
+const KITTY_MOD_SHIFT = 1;
+const KITTY_MOD_ALT = 2;
+const KITTY_MOD_CTRL = 4;
+
+// Decode a printable CSI-u sequence, preferring the shifted key when present.
+function decodeKittyPrintable(data: string): string | undefined {
+	const match = data.match(KITTY_CSI_U_REGEX);
+	if (!match) return undefined;
+
+	// CSI-u groups: <codepoint>[:<shifted>[:<base>]];<mod>u
+	const codepoint = Number.parseInt(match[1] ?? "", 10);
+	if (!Number.isFinite(codepoint)) return undefined;
+
+	const shiftedKey = match[2] && match[2].length > 0 ? Number.parseInt(match[2], 10) : undefined;
+	const modValue = match[4] ? Number.parseInt(match[4], 10) : 1;
+	// Modifiers are 1-indexed in CSI-u; normalize to our bitmask.
+	const modifier = Number.isFinite(modValue) ? modValue - 1 : 0;
+
+	// Ignore CSI-u sequences used for Alt/Ctrl shortcuts.
+	if (modifier & (KITTY_MOD_ALT | KITTY_MOD_CTRL)) return undefined;
+
+	// Prefer the shifted keycode when Shift is held.
+	let effectiveCodepoint = codepoint;
+	if (modifier & KITTY_MOD_SHIFT && typeof shiftedKey === "number") {
+		effectiveCodepoint = shiftedKey;
+	}
+	// Drop control characters or invalid codepoints.
+	if (!Number.isFinite(effectiveCodepoint) || effectiveCodepoint < 32) return undefined;
+
+	try {
+		return String.fromCodePoint(effectiveCodepoint);
+	} catch {
+		return undefined;
+	}
+}
+
 interface EditorState {
 	lines: string[];
 	cursorLine: number;
@@ -231,6 +241,7 @@ export interface EditorTheme {
 	borderColor: (str: string) => string;
 	selectList: SelectListTheme;
 	symbols: SymbolTheme;
+	editorPaddingX?: number;
 }
 
 export interface EditorTopBorder {
@@ -249,18 +260,27 @@ interface HistoryStorage {
 	getRecent(limit: number): HistoryEntry[];
 }
 
-export class Editor implements Component {
+export class Editor implements Component, Focusable {
 	private state: EditorState = {
 		lines: [""],
 		cursorLine: 0,
 		cursorCol: 0,
 	};
 
+	/** Focusable interface - set by TUI when focus changes */
+	focused: boolean = false;
+
 	private theme: EditorTheme;
 	private useTerminalCursor = false;
 
 	// Store last render width for cursor navigation
 	private lastWidth: number = 80;
+	private maxHeight?: number;
+	private scrollOffset: number = 0;
+
+	// Emacs-style kill ring
+	private killRing: string[] = [];
+	private lastKillWasKillCommand: boolean = false;
 
 	// Border color (can be changed dynamically)
 	public borderColor: (str: string) => string;
@@ -318,6 +338,11 @@ export class Editor implements Component {
 		this.useTerminalCursor = useTerminalCursor;
 	}
 
+	setMaxHeight(maxHeight: number | undefined): void {
+		this.maxHeight = maxHeight;
+		this.scrollOffset = 0;
+	}
+
 	setHistoryStorage(storage: HistoryStorage): void {
 		this.historyStorage = storage;
 		const recent = storage.getRecent(100);
@@ -348,18 +373,21 @@ export class Editor implements Component {
 	}
 
 	private isOnFirstVisualLine(): boolean {
-		const visualLines = this.buildVisualLineMap(this.lastWidth);
+		const contentWidth = this.getContentWidth(this.lastWidth, this.getEditorPaddingX());
+		const visualLines = this.buildVisualLineMap(contentWidth);
 		const currentVisualLine = this.findCurrentVisualLine(visualLines);
 		return currentVisualLine === 0;
 	}
 
 	private isOnLastVisualLine(): boolean {
-		const visualLines = this.buildVisualLineMap(this.lastWidth);
+		const contentWidth = this.getContentWidth(this.lastWidth, this.getEditorPaddingX());
+		const visualLines = this.buildVisualLineMap(contentWidth);
 		const currentVisualLine = this.findCurrentVisualLine(visualLines);
 		return currentVisualLine === visualLines.length - 1;
 	}
 
 	private navigateHistory(direction: 1 | -1): void {
+		this.resetKillSequence();
 		if (this.history.length === 0) return;
 
 		const newIndex = this.historyIndex - direction; // Up(-1) increases index, Down(1) decreases
@@ -391,27 +419,65 @@ export class Editor implements Component {
 		// No cached state to invalidate currently
 	}
 
+	private getEditorPaddingX(): number {
+		const padding = this.theme.editorPaddingX ?? 2;
+		return Math.max(1, padding);
+	}
+
+	private getContentWidth(width: number, paddingX: number): number {
+		return Math.max(0, width - 2 * (paddingX + 1));
+	}
+
+	private getVisibleContentHeight(contentLines: number): number {
+		if (this.maxHeight === undefined) return contentLines;
+		return Math.max(1, this.maxHeight - 2);
+	}
+
+	private updateScrollOffset(contentWidth: number, layoutLines: LayoutLine[], visibleHeight: number): void {
+		if (layoutLines.length <= visibleHeight) {
+			this.scrollOffset = 0;
+			return;
+		}
+
+		const visualLines = this.buildVisualLineMap(contentWidth);
+		const cursorLine = this.findCurrentVisualLine(visualLines);
+		if (cursorLine < this.scrollOffset) {
+			this.scrollOffset = cursorLine;
+		} else if (cursorLine >= this.scrollOffset + visibleHeight) {
+			this.scrollOffset = cursorLine - visibleHeight + 1;
+		}
+
+		const maxOffset = Math.max(0, layoutLines.length - visibleHeight);
+		this.scrollOffset = Math.min(this.scrollOffset, maxOffset);
+	}
+
 	render(width: number): string[] {
 		// Store width for cursor navigation
 		this.lastWidth = width;
 
 		// Box-drawing characters for rounded corners
 		const box = this.theme.symbols.boxRound;
-		const topLeft = this.borderColor(`${box.topLeft}${box.horizontal}`);
-		const topRight = this.borderColor(`${box.horizontal}${box.topRight}`);
-		const bottomLeft = this.borderColor(`${box.bottomLeft}${box.horizontal}`);
-		const bottomRight = this.borderColor(`${box.horizontal}${box.bottomRight}`);
+		const paddingX = this.getEditorPaddingX();
+		const borderWidth = paddingX + 1;
+		const topLeft = this.borderColor(`${box.topLeft}${box.horizontal.repeat(paddingX)}`);
+		const topRight = this.borderColor(`${box.horizontal.repeat(paddingX)}${box.topRight}`);
+		const bottomLeft = this.borderColor(`${box.bottomLeft}${box.horizontal}${" ".repeat(Math.max(0, paddingX - 1))}`);
+		const bottomRight = this.borderColor(
+			`${" ".repeat(Math.max(0, paddingX - 1))}${box.horizontal}${box.bottomRight}`,
+		);
 		const horizontal = this.borderColor(box.horizontal);
 
-		// Layout the text - content area is width minus 6 for borders (3 left + 3 right)
-		const contentAreaWidth = width - 6;
+		// Layout the text
+		const contentAreaWidth = this.getContentWidth(width, paddingX);
 		const layoutLines = this.layoutText(contentAreaWidth);
+		const visibleContentHeight = this.getVisibleContentHeight(layoutLines.length);
+		this.updateScrollOffset(contentAreaWidth, layoutLines, visibleContentHeight);
+		const visibleLayoutLines = layoutLines.slice(this.scrollOffset, this.scrollOffset + visibleContentHeight);
 
 		const result: string[] = [];
 
 		// Render top border: ╭─ [status content] ────────────────╮
-		// Reserve: 2 for "╭─", 2 for "─╮" = 4 total for corners
-		const topFillWidth = width - 4;
+		const topFillWidth = width - borderWidth * 2;
 		if (this.topBorderContent) {
 			const { content, width: statusWidth } = this.topBorderContent;
 			if (statusWidth <= topFillWidth) {
@@ -430,9 +496,11 @@ export class Editor implements Component {
 		}
 
 		// Render each layout line
-		// Content area is width - 6 (for "│  " prefix and "  │" suffix borders)
-		const lineContentWidth = width - 6;
-		for (const layoutLine of layoutLines) {
+		// Emit hardware cursor marker only when focused and not showing autocomplete
+		const emitCursorMarker = this.focused && !this.isAutocompleting;
+		const lineContentWidth = contentAreaWidth;
+
+		for (const layoutLine of visibleLayoutLines) {
 			let displayText = layoutLine.text;
 			let displayWidth = visibleWidth(layoutLine.text);
 
@@ -441,6 +509,9 @@ export class Editor implements Component {
 				const before = displayText.slice(0, layoutLine.cursorPos);
 				const after = displayText.slice(layoutLine.cursorPos);
 
+				// Hardware cursor marker (zero-width, emitted before fake cursor for IME positioning)
+				const marker = emitCursorMarker ? CURSOR_MARKER : "";
+
 				if (after.length > 0) {
 					// Cursor is on a character (grapheme) - replace it with highlighted version
 					// Get the first grapheme from 'after'
@@ -448,13 +519,13 @@ export class Editor implements Component {
 					const firstGrapheme = afterGraphemes[0]?.segment || "";
 					const restAfter = after.slice(firstGrapheme.length);
 					const cursor = `\x1b[7m${firstGrapheme}\x1b[0m`;
-					displayText = before + cursor + restAfter;
+					displayText = before + marker + cursor + restAfter;
 					// displayWidth stays the same - we're replacing, not adding
 				} else {
 					// Cursor is at the end - add thin blinking bar cursor
 					const cursorChar = this.theme.symbols.inputCursor;
 					const cursor = `\x1b[5m${cursorChar}\x1b[0m`;
-					displayText = before + cursor;
+					displayText = before + marker + cursor;
 					displayWidth += visibleWidth(cursorChar);
 					if (displayWidth > lineContentWidth) {
 						// Line is at full width - use reverse video on last grapheme if possible
@@ -468,23 +539,22 @@ export class Editor implements Component {
 								.slice(0, -1)
 								.map((g) => g.segment)
 								.join("");
-							displayText = beforeWithoutLast + cursor;
+							displayText = beforeWithoutLast + marker + cursor;
 							displayWidth -= 1; // Back to original width (reverse video replaces, doesn't add)
 						}
 					}
 				}
 			}
 
-			// All lines have consistent 6-char borders (3 left + 3 right)
-			const isLastLine = layoutLine === layoutLines[layoutLines.length - 1];
+			// All lines have consistent borders based on padding
+			const isLastLine = layoutLine === visibleLayoutLines[visibleLayoutLines.length - 1];
 			const padding = " ".repeat(Math.max(0, lineContentWidth - displayWidth));
 
 			if (isLastLine) {
-				// Last line: "╰─ " (3) + content + padding + " ─╯" (3) = 6 chars border
-				result.push(`${bottomLeft} ${displayText}${padding} ${bottomRight}`);
+				result.push(`${bottomLeft}${displayText}${padding}${bottomRight}`);
 			} else {
-				const leftBorder = this.borderColor(`${box.vertical}  `);
-				const rightBorder = this.borderColor(`  ${box.vertical}`);
+				const leftBorder = this.borderColor(`${box.vertical}${" ".repeat(paddingX)}`);
+				const rightBorder = this.borderColor(`${" ".repeat(paddingX)}${box.vertical}`);
 				result.push(leftBorder + displayText + padding + rightBorder);
 			}
 		}
@@ -501,11 +571,17 @@ export class Editor implements Component {
 	getCursorPosition(width: number): { row: number; col: number } | null {
 		if (!this.useTerminalCursor) return null;
 
-		const contentWidth = width - 6;
+		const paddingX = this.getEditorPaddingX();
+		const borderWidth = paddingX + 1;
+		const contentWidth = this.getContentWidth(width, paddingX);
 		if (contentWidth <= 0) return null;
 
 		const layoutLines = this.layoutText(contentWidth);
+		const visibleContentHeight = this.getVisibleContentHeight(layoutLines.length);
+		this.updateScrollOffset(contentWidth, layoutLines, visibleContentHeight);
+
 		for (let i = 0; i < layoutLines.length; i++) {
+			if (i < this.scrollOffset || i >= this.scrollOffset + visibleContentHeight) continue;
 			const layoutLine = layoutLines[i];
 			if (!layoutLine || !layoutLine.hasCursor || layoutLine.cursorPos === undefined) continue;
 
@@ -516,13 +592,13 @@ export class Editor implements Component {
 				const graphemes = [...segmenter.segment(layoutLine.text)];
 				const lastGrapheme = graphemes[graphemes.length - 1]?.segment || "";
 				const lastWidth = visibleWidth(lastGrapheme) || 1;
-				const colOffset = 3 + Math.max(0, lineWidth - lastWidth);
-				return { row: 1 + i, col: colOffset };
+				const colOffset = borderWidth + Math.max(0, lineWidth - lastWidth);
+				return { row: 1 + i - this.scrollOffset, col: colOffset };
 			}
 
 			const before = layoutLine.text.slice(0, layoutLine.cursorPos);
-			const colOffset = 3 + visibleWidth(before);
-			return { row: 1 + i, col: colOffset };
+			const colOffset = borderWidth + visibleWidth(before);
+			return { row: 1 + i - this.scrollOffset, col: colOffset };
 		}
 
 		return null;
@@ -590,27 +666,34 @@ export class Editor implements Component {
 		}
 
 		// Ctrl+C - Exit (let parent handle this)
-		if (isCtrlC(data)) {
+		if (matchesKey(data, "ctrl+c")) {
 			return;
 		}
 
 		// Handle autocomplete special keys first (but don't block other input)
 		if (this.isAutocompleting && this.autocompleteList) {
 			// Escape - cancel autocomplete
-			if (isEscape(data)) {
+			if (matchesKey(data, "escape") || matchesKey(data, "esc")) {
 				this.cancelAutocomplete(true);
 				return;
 			}
 			// Let the autocomplete list handle navigation and selection
-			else if (isArrowUp(data) || isArrowDown(data) || isEnter(data) || isTab(data)) {
+			else if (
+				matchesKey(data, "up") ||
+				matchesKey(data, "down") ||
+				matchesKey(data, "enter") ||
+				matchesKey(data, "return") ||
+				data === "\n" ||
+				matchesKey(data, "tab")
+			) {
 				// Only pass arrow keys to the list, not Enter/Tab (we handle those directly)
-				if (isArrowUp(data) || isArrowDown(data)) {
+				if (matchesKey(data, "up") || matchesKey(data, "down")) {
 					this.autocompleteList.handleInput(data);
 					return;
 				}
 
 				// If Tab was pressed, always apply the selection
-				if (isTab(data)) {
+				if (matchesKey(data, "tab")) {
 					const selected = this.autocompleteList.getSelectedItem();
 					if (selected && this.autocompleteProvider) {
 						const result = this.autocompleteProvider.applyCompletion(
@@ -635,7 +718,10 @@ export class Editor implements Component {
 				}
 
 				// If Enter was pressed on a slash command, apply completion and submit
-				if (isEnter(data) && this.autocompletePrefix.startsWith("/")) {
+				if (
+					(matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") &&
+					this.autocompletePrefix.startsWith("/")
+				) {
 					const selected = this.autocompleteList.getSelectedItem();
 					if (selected && this.autocompleteProvider) {
 						const result = this.autocompleteProvider.applyCompletion(
@@ -654,7 +740,7 @@ export class Editor implements Component {
 					// Don't return - fall through to submission logic
 				}
 				// If Enter was pressed on a file path, apply completion
-				else if (isEnter(data)) {
+				else if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
 					const selected = this.autocompleteList.getSelectedItem();
 					if (selected && this.autocompleteProvider) {
 						const result = this.autocompleteProvider.applyCompletion(
@@ -683,38 +769,46 @@ export class Editor implements Component {
 		}
 
 		// Tab key - context-aware completion (but not when already autocompleting)
-		if (isTab(data) && !this.isAutocompleting) {
+		if (matchesKey(data, "tab") && !this.isAutocompleting) {
 			this.handleTabCompletion();
 			return;
 		}
 
 		// Continue with rest of input handling
 		// Ctrl+K - Delete to end of line
-		if (isCtrlK(data)) {
+		if (matchesKey(data, "ctrl+k")) {
 			this.deleteToEndOfLine();
 		}
 		// Ctrl+U - Delete to start of line
-		else if (isCtrlU(data)) {
+		else if (matchesKey(data, "ctrl+u")) {
 			this.deleteToStartOfLine();
 		}
 		// Ctrl+W - Delete word backwards
-		else if (isCtrlW(data)) {
+		else if (matchesKey(data, "ctrl+w")) {
 			this.deleteWordBackwards();
 		}
 		// Option/Alt+Backspace - Delete word backwards
-		else if (isAltBackspace(data)) {
+		else if (matchesKey(data, "alt+backspace")) {
 			this.deleteWordBackwards();
 		}
+		// Option/Alt+D - Delete word forwards
+		else if (matchesKey(data, "alt+d")) {
+			this.deleteWordForwards();
+		}
+		// Ctrl+Y - Yank from kill ring
+		else if (matchesKey(data, "ctrl+y")) {
+			this.yankFromKillRing();
+		}
 		// Ctrl+A - Move to start of line
-		else if (isCtrlA(data)) {
+		else if (matchesKey(data, "ctrl+a")) {
 			this.moveToLineStart();
 		}
 		// Ctrl+E - Move to end of line
-		else if (isCtrlE(data)) {
+		else if (matchesKey(data, "ctrl+e")) {
 			this.moveToLineEnd();
 		}
 		// Alt+Enter - special handler if callback exists, otherwise new line
-		else if (isAltEnter(data)) {
+		else if (matchesKey(data, "alt+enter")) {
 			if (this.onAltEnter) {
 				this.onAltEnter(this.getText());
 			} else {
@@ -728,7 +822,7 @@ export class Editor implements Component {
 			data === "\x1b[27;5;13~" || // Ctrl+Enter (legacy format)
 			data === "\x1b\r" || // Option+Enter in some terminals (legacy)
 			data === "\x1b[13;2~" || // Shift+Enter in some terminals (legacy format)
-			isShiftEnter(data) || // Shift+Enter (Kitty protocol, handles lock bits)
+			matchesKey(data, "shift+enter") || // Shift+Enter (Kitty protocol, handles lock bits)
 			(data.length > 1 && data.includes("\x1b") && data.includes("\r")) ||
 			(data === "\n" && data.length === 1) || // Shift+Enter from iTerm2 mapping
 			data === "\\\r" // Shift+Enter in VS Code terminal
@@ -737,12 +831,14 @@ export class Editor implements Component {
 			this.addNewLine();
 		}
 		// Plain Enter - submit (handles both legacy \r and Kitty protocol with lock bits)
-		else if (isEnter(data)) {
+		else if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
 			// If submit is disabled, do nothing
 			if (this.disableSubmit) {
 				return;
 			}
 
+			this.resetKillSequence();
+
 			// Get text and substitute paste markers with actual content
 			let result = this.state.lines.join("\n").trim();
 
@@ -773,29 +869,31 @@ export class Editor implements Component {
 			}
 		}
 		// Backspace (including Shift+Backspace)
-		else if (isBackspace(data) || isShiftBackspace(data)) {
+		else if (matchesKey(data, "backspace") || matchesKey(data, "shift+backspace")) {
 			this.handleBackspace();
 		}
 		// Line navigation shortcuts (Home/End keys)
-		else if (isHome(data)) {
+		else if (matchesKey(data, "home")) {
 			this.moveToLineStart();
-		} else if (isEnd(data)) {
+		} else if (matchesKey(data, "end")) {
 			this.moveToLineEnd();
 		}
 		// Forward delete (Fn+Backspace or Delete key, including Shift+Delete)
-		else if (isDelete(data) || isShiftDelete(data)) {
+		else if (matchesKey(data, "delete") || matchesKey(data, "shift+delete")) {
 			this.handleForwardDelete();
 		}
 		// Word navigation (Option/Alt + Arrow or Ctrl + Arrow)
-		else if (isAltLeft(data) || isCtrlLeft(data)) {
+		else if (matchesKey(data, "alt+left") || matchesKey(data, "ctrl+left")) {
 			// Word left
+			this.resetKillSequence();
 			this.moveWordBackwards();
-		} else if (isAltRight(data) || isCtrlRight(data)) {
+		} else if (matchesKey(data, "alt+right") || matchesKey(data, "ctrl+right")) {
 			// Word right
+			this.resetKillSequence();
 			this.moveWordForwards();
 		}
 		// Arrow keys
-		else if (isArrowUp(data)) {
+		else if (matchesKey(data, "up")) {
 			// Up - history navigation or cursor movement
 			if (this.isEditorEmpty()) {
 				this.navigateHistory(-1); // Start browsing history
@@ -804,27 +902,35 @@ export class Editor implements Component {
 			} else {
 				this.moveCursor(-1, 0); // Cursor movement (within text or history entry)
 			}
-		} else if (isArrowDown(data)) {
+		} else if (matchesKey(data, "down")) {
 			// Down - history navigation or cursor movement
 			if (this.historyIndex > -1 && this.isOnLastVisualLine()) {
 				this.navigateHistory(1); // Navigate to newer history entry or clear
 			} else {
 				this.moveCursor(1, 0); // Cursor movement (within text or history entry)
 			}
-		} else if (isArrowRight(data)) {
+		} else if (matchesKey(data, "right")) {
 			// Right
 			this.moveCursor(0, 1);
-		} else if (isArrowLeft(data)) {
+		} else if (matchesKey(data, "left")) {
 			// Left
 			this.moveCursor(0, -1);
 		}
 		// Shift+Space - insert regular space (Kitty protocol sends escape sequence)
-		else if (isShiftSpace(data)) {
+		else if (matchesKey(data, "shift+space")) {
 			this.insertCharacter(" ");
 		}
-		// Regular characters (printable characters and unicode, but not control characters)
-		else if (data.charCodeAt(0) >= 32) {
-			this.insertCharacter(data);
+		// Kitty CSI-u printable characters (shifted symbols like @, ?, {, })
+		else {
+			const kittyChar = decodeKittyPrintable(data);
+			if (kittyChar) {
+				this.insertText(kittyChar);
+				return;
+			}
+			// Regular characters (printable characters and unicode, but not control characters)
+			if (data.charCodeAt(0) >= 32) {
+				this.insertCharacter(data);
+			}
 		}
 	}
 
@@ -943,12 +1049,14 @@ export class Editor implements Component {
 
 	setText(text: string): void {
 		this.historyIndex = -1; // Exit history browsing mode
+		this.resetKillSequence();
 		this.setTextInternal(text);
 	}
 
 	/** Insert text at the current cursor position */
 	insertText(text: string): void {
 		this.historyIndex = -1;
+		this.resetKillSequence();
 
 		const line = this.state.lines[this.state.cursorLine] || "";
 		const before = line.slice(0, this.state.cursorCol);
@@ -965,6 +1073,7 @@ export class Editor implements Component {
 	// All the editor methods from before...
 	private insertCharacter(char: string): void {
 		this.historyIndex = -1; // Exit history browsing mode
+		this.resetKillSequence();
 
 		const line = this.state.lines[this.state.cursorLine] || "";
 
@@ -1014,6 +1123,7 @@ export class Editor implements Component {
 
 	private handlePaste(pastedText: string): void {
 		this.historyIndex = -1; // Exit history browsing mode
+		this.resetKillSequence();
 
 		// Clean the pasted text
 		const cleanText = pastedText.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
@@ -1114,6 +1224,7 @@ export class Editor implements Component {
 
 	private addNewLine(): void {
 		this.historyIndex = -1; // Exit history browsing mode
+		this.resetKillSequence();
 
 		const currentLine = this.state.lines[this.state.cursorLine] || "";
 
@@ -1135,6 +1246,7 @@ export class Editor implements Component {
 
 	private handleBackspace(): void {
 		this.historyIndex = -1; // Exit history browsing mode
+		this.resetKillSequence();
 
 		if (this.state.cursorCol > 0) {
 			// Delete grapheme before cursor (handles emojis, combining characters, etc.)
@@ -1186,25 +1298,96 @@ export class Editor implements Component {
 	}
 
 	private moveToLineStart(): void {
+		this.resetKillSequence();
 		this.state.cursorCol = 0;
 	}
 
 	private moveToLineEnd(): void {
+		this.resetKillSequence();
 		const currentLine = this.state.lines[this.state.cursorLine] || "";
 		this.state.cursorCol = currentLine.length;
 	}
 
+	private resetKillSequence(): void {
+		this.lastKillWasKillCommand = false;
+	}
+
+	private recordKill(text: string, direction: "forward" | "backward"): void {
+		if (!text) return;
+		if (this.lastKillWasKillCommand && this.killRing.length > 0) {
+			if (direction === "backward") {
+				this.killRing[0] = text + this.killRing[0];
+			} else {
+				this.killRing[0] = this.killRing[0] + text;
+			}
+		} else {
+			this.killRing.unshift(text);
+		}
+		this.lastKillWasKillCommand = true;
+	}
+
+	private insertTextAtCursor(text: string): void {
+		this.historyIndex = -1;
+		this.resetKillSequence();
+
+		const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+		const lines = normalized.split("\n");
+
+		if (lines.length === 1) {
+			const line = this.state.lines[this.state.cursorLine] || "";
+			const before = line.slice(0, this.state.cursorCol);
+			const after = line.slice(this.state.cursorCol);
+			this.state.lines[this.state.cursorLine] = before + normalized + after;
+			this.state.cursorCol += normalized.length;
+		} else {
+			const currentLine = this.state.lines[this.state.cursorLine] || "";
+			const beforeCursor = currentLine.slice(0, this.state.cursorCol);
+			const afterCursor = currentLine.slice(this.state.cursorCol);
+
+			const newLines: string[] = [];
+			for (let i = 0; i < this.state.cursorLine; i++) {
+				newLines.push(this.state.lines[i] || "");
+			}
+
+			newLines.push(beforeCursor + (lines[0] || ""));
+			for (let i = 1; i < lines.length - 1; i++) {
+				newLines.push(lines[i] || "");
+			}
+			newLines.push((lines[lines.length - 1] || "") + afterCursor);
+
+			for (let i = this.state.cursorLine + 1; i < this.state.lines.length; i++) {
+				newLines.push(this.state.lines[i] || "");
+			}
+
+			this.state.lines = newLines;
+			this.state.cursorLine += lines.length - 1;
+			this.state.cursorCol = (lines[lines.length - 1] || "").length;
+		}
+
+		if (this.onChange) {
+			this.onChange(this.getText());
+		}
+	}
+
+	private yankFromKillRing(): void {
+		if (this.killRing.length === 0) return;
+		this.insertTextAtCursor(this.killRing[0] || "");
+	}
+
 	private deleteToStartOfLine(): void {
 		this.historyIndex = -1; // Exit history browsing mode
 
 		const currentLine = this.state.lines[this.state.cursorLine] || "";
+		let deletedText = "";
 
 		if (this.state.cursorCol > 0) {
 			// Delete from start of line up to cursor
+			deletedText = currentLine.slice(0, this.state.cursorCol);
 			this.state.lines[this.state.cursorLine] = currentLine.slice(this.state.cursorCol);
 			this.state.cursorCol = 0;
 		} else if (this.state.cursorLine > 0) {
 			// At start of line - merge with previous line
+			deletedText = "\n";
 			const previousLine = this.state.lines[this.state.cursorLine - 1] || "";
 			this.state.lines[this.state.cursorLine - 1] = previousLine + currentLine;
 			this.state.lines.splice(this.state.cursorLine, 1);
@@ -1212,6 +1395,8 @@ export class Editor implements Component {
 			this.state.cursorCol = previousLine.length;
 		}
 
+		this.recordKill(deletedText, "backward");
+
 		if (this.onChange) {
 			this.onChange(this.getText());
 		}
@@ -1221,17 +1406,22 @@ export class Editor implements Component {
 		this.historyIndex = -1; // Exit history browsing mode
 
 		const currentLine = this.state.lines[this.state.cursorLine] || "";
+		let deletedText = "";
 
 		if (this.state.cursorCol < currentLine.length) {
 			// Delete from cursor to end of line
+			deletedText = currentLine.slice(this.state.cursorCol);
 			this.state.lines[this.state.cursorLine] = currentLine.slice(0, this.state.cursorCol);
 		} else if (this.state.cursorLine < this.state.lines.length - 1) {
 			// At end of line - merge with next line
 			const nextLine = this.state.lines[this.state.cursorLine + 1] || "";
+			deletedText = `\n${nextLine}`;
 			this.state.lines[this.state.cursorLine] = currentLine + nextLine;
 			this.state.lines.splice(this.state.cursorLine + 1, 1);
 		}
 
+		this.recordKill(deletedText, "forward");
+
 		if (this.onChange) {
 			this.onChange(this.getText());
 		}
@@ -1245,6 +1435,7 @@ export class Editor implements Component {
 		// If at start of line, behave like backspace at column 0 (merge with previous line)
 		if (this.state.cursorCol === 0) {
 			if (this.state.cursorLine > 0) {
+				this.recordKill("\n", "backward");
 				const previousLine = this.state.lines[this.state.cursorLine - 1] || "";
 				this.state.lines[this.state.cursorLine - 1] = previousLine + currentLine;
 				this.state.lines.splice(this.state.cursorLine, 1);
@@ -1257,9 +1448,39 @@ export class Editor implements Component {
 			const deleteFrom = this.state.cursorCol;
 			this.state.cursorCol = oldCursorCol;
 
+			const deletedText = currentLine.slice(deleteFrom, oldCursorCol);
 			this.state.lines[this.state.cursorLine] =
 				currentLine.slice(0, deleteFrom) + currentLine.slice(this.state.cursorCol);
 			this.state.cursorCol = deleteFrom;
+			this.recordKill(deletedText, "backward");
+		}
+
+		if (this.onChange) {
+			this.onChange(this.getText());
+		}
+	}
+
+	private deleteWordForwards(): void {
+		this.historyIndex = -1; // Exit history browsing mode
+
+		const currentLine = this.state.lines[this.state.cursorLine] || "";
+
+		if (this.state.cursorCol >= currentLine.length) {
+			if (this.state.cursorLine < this.state.lines.length - 1) {
+				this.recordKill("\n", "forward");
+				const nextLine = this.state.lines[this.state.cursorLine + 1] || "";
+				this.state.lines[this.state.cursorLine] = currentLine + nextLine;
+				this.state.lines.splice(this.state.cursorLine + 1, 1);
+			}
+		} else {
+			const oldCursorCol = this.state.cursorCol;
+			this.moveWordForwards();
+			const deleteTo = this.state.cursorCol;
+			this.state.cursorCol = oldCursorCol;
+
+			const deletedText = currentLine.slice(oldCursorCol, deleteTo);
+			this.state.lines[this.state.cursorLine] = currentLine.slice(0, oldCursorCol) + currentLine.slice(deleteTo);
+			this.recordKill(deletedText, "forward");
 		}
 
 		if (this.onChange) {
@@ -1269,6 +1490,7 @@ export class Editor implements Component {
 
 	private handleForwardDelete(): void {
 		this.historyIndex = -1; // Exit history browsing mode
+		this.resetKillSequence();
 
 		const currentLine = this.state.lines[this.state.cursorLine] || "";
 
@@ -1371,11 +1593,12 @@ export class Editor implements Component {
 	}
 
 	private moveCursor(deltaLine: number, deltaCol: number): void {
-		const width = this.lastWidth;
+		this.resetKillSequence();
+		const contentWidth = this.getContentWidth(this.lastWidth, this.getEditorPaddingX());
 
 		if (deltaLine !== 0) {
 			// Build visual line map for navigation
-			const visualLines = this.buildVisualLineMap(width);
+			const visualLines = this.buildVisualLineMap(contentWidth);
 			const currentVisualLine = this.findCurrentVisualLine(visualLines);
 
 			// Calculate column position within current visual line