@effect-tui/react 0.16.0 → 2.0.1

package/src/components/TextInput.tsx

@@ -7,12 +7,15 @@ import {
 	deleteCharBackward,
 	deleteCharForward,
 	deleteWordBackward,
+	deleteWordForward,
 	insertText,
 	killToEnd,
 	killToStart,
 	matchNextWord,
 	matchPrevWord,
+	resolveTextInputAction,
 	type TextState,
+	type TextKeyEvent,
 	transposeChars,
 } from "./text-editing.js"
 
@@ -97,17 +100,20 @@ export function TextInput({
 	}, [value, cursorPos])
 
 	const handleKey = useCallback(
-		(key: { name: string; text?: string; ctrl?: boolean; meta?: boolean; shift?: boolean }) => {
+		(key: TextKeyEvent) => {
 			if (!focused) return
 
+			const action = resolveTextInputAction(key)
+			if (!action) return
+
 			const state: TextState = { text: value, cursor: cursorPos, killRing }
 
 			// Helper to apply an edit result
-			const applyEdit = (result: { state: TextState; changed: boolean }) => {
+			const applyEdit = (result: { state: TextState; changed: boolean }, options?: { keepKillRing?: boolean }) => {
 				if (result.changed) {
 					onChange(result.state.text)
 					setCursorPos(result.state.cursor)
-					if (result.state.killRing !== killRing) {
+					if (!options?.keepKillRing && result.state.killRing !== killRing) {
 						setKillRing(result.state.killRing)
 					}
 				}
@@ -126,114 +132,63 @@ export function TextInput({
 				setCursorPos(match ? cursorPos + match.length : value.length)
 			}
 
-			switch (key.name) {
-				case "left":
-					if (key.meta) {
-						moveToPrevWord()
-					} else {
-						setCursorPos(Math.max(0, cursorPos - 1))
-					}
+			switch (action.type) {
+				case "move-left":
+					setCursorPos(Math.max(0, cursorPos - 1))
 					break
-
-				case "right":
-					if (key.meta) {
-						moveToNextWord()
-					} else {
-						setCursorPos(Math.min(value.length, cursorPos + 1))
-					}
+				case "move-right":
+					setCursorPos(Math.min(value.length, cursorPos + 1))
 					break
-
-				case "home":
+				case "move-word-left":
+					moveToPrevWord()
+					break
+				case "move-word-right":
+					moveToNextWord()
+					break
+				case "move-start":
+				case "move-doc-start":
 					setCursorPos(0)
 					break
-
-				case "end":
+				case "move-end":
+				case "move-doc-end":
 					setCursorPos(value.length)
 					break
-
-				case "backspace":
-					if (key.meta) {
-						// Option+Backspace: Delete to previous word boundary
-						const beforeCursor = value.slice(0, cursorPos)
-						const match = matchPrevWord(beforeCursor)
-						if (match) {
-							const newPos = cursorPos - match.length
-							onChange(value.slice(0, newPos) + value.slice(cursorPos))
-							setCursorPos(newPos)
-						} else if (cursorPos > 0) {
-							onChange(value.slice(cursorPos))
-							setCursorPos(0)
-						}
-					} else {
-						applyEdit(deleteCharBackward(state))
-					}
+				case "delete-backward":
+					applyEdit(deleteCharBackward(state))
 					break
-
-				case "delete":
-					if (key.meta) {
-						// Option+Delete: Delete to next word boundary
-						const afterCursor = value.slice(cursorPos)
-						const match = matchNextWord(afterCursor)
-						if (match) {
-							onChange(value.slice(0, cursorPos) + value.slice(cursorPos + match.length))
-						} else if (cursorPos < value.length) {
-							onChange(value.slice(0, cursorPos))
-						}
-					} else {
-						applyEdit(deleteCharForward(state))
-					}
+				case "delete-forward":
+					applyEdit(deleteCharForward(state))
+					break
+				case "delete-word-backward":
+					applyEdit(deleteWordBackward(state), { keepKillRing: action.scope === "line" })
+					break
+				case "delete-word-forward":
+					applyEdit(deleteWordForward(state), { keepKillRing: action.scope === "line" })
+					break
+				case "kill-to-end":
+					applyEdit(killToEnd(state))
+					break
+				case "kill-to-start":
+					applyEdit(killToStart(state))
+					break
+				case "transpose":
+					applyEdit(transposeChars(state))
+					break
+				case "yank":
+					applyEdit(insertText(state, killRing))
+					break
+				case "insert":
+					applyEdit(insertText(state, action.text))
 					break
-
 				case "enter":
+				case "submit":
 					onSubmit?.(value)
 					break
-
-				case "escape":
+				case "cancel":
 					onCancel?.()
 					break
-
-				case "char":
-				case "space":
-					if (key.ctrl && key.text) {
-						// Emacs-style keybindings
-						switch (key.text) {
-							case "a":
-								setCursorPos(0)
-								break
-							case "e":
-								setCursorPos(value.length)
-								break
-							case "b":
-								setCursorPos(Math.max(0, cursorPos - 1))
-								break
-							case "f":
-								setCursorPos(Math.min(value.length, cursorPos + 1))
-								break
-							case "d":
-								applyEdit(deleteCharForward(state))
-								break
-							case "h":
-								applyEdit(deleteCharBackward(state))
-								break
-							case "k":
-								applyEdit(killToEnd(state))
-								break
-							case "u":
-								applyEdit(killToStart(state))
-								break
-							case "w":
-								applyEdit(deleteWordBackward(state))
-								break
-							case "t":
-								applyEdit(transposeChars(state))
-								break
-							case "y":
-								applyEdit(insertText(state, killRing))
-								break
-						}
-					} else if (key.text && !key.meta) {
-						applyEdit(insertText(state, key.text))
-					}
+				case "move-up":
+				case "move-down":
 					break
 			}
 		},
@@ -268,7 +223,7 @@ export function TextInput({
 
 			// Clear the line with background color
 			if (bg !== undefined) {
-				ctx.fill(0, 0, ctx.width, 1, " ", { bg })
+				ctx.fillRect(0, 0, ctx.width, 1, " ", { bg })
 			}
 
 			// Calculate scroll offset to keep cursor visible

package/src/components/text-editing.ts

@@ -25,6 +25,40 @@ export interface MultilineState {
 	killRing: string
 }
 
+export interface TextKeyEvent {
+	name: string
+	text?: string
+	ctrl?: boolean
+	meta?: boolean
+	shift?: boolean
+}
+
+export type WordScope = "line" | "document"
+
+export type TextInputAction =
+	| { type: "move-left" }
+	| { type: "move-right" }
+	| { type: "move-up" }
+	| { type: "move-down" }
+	| { type: "move-start" }
+	| { type: "move-end" }
+	| { type: "move-doc-start" }
+	| { type: "move-doc-end" }
+	| { type: "move-word-left" }
+	| { type: "move-word-right" }
+	| { type: "delete-backward" }
+	| { type: "delete-forward" }
+	| { type: "delete-word-backward"; scope: WordScope }
+	| { type: "delete-word-forward"; scope: WordScope }
+	| { type: "kill-to-end" }
+	| { type: "kill-to-start" }
+	| { type: "transpose" }
+	| { type: "yank" }
+	| { type: "insert"; text: string }
+	| { type: "enter" }
+	| { type: "submit" }
+	| { type: "cancel" }
+
 /** Result of an edit operation */
 export interface EditResult<T> {
 	state: T
@@ -37,6 +71,79 @@ export interface EditResult<T> {
 
 export { matchNextWord, matchPrevWord }
 
+// ============================================================================
+// Keybinding resolution (shared by TextInput and MultilineTextInput)
+// ============================================================================
+
+export function resolveTextInputAction(key: TextKeyEvent): TextInputAction | null {
+	switch (key.name) {
+		case "left":
+			return key.meta ? { type: "move-word-left" } : { type: "move-left" }
+		case "right":
+			return key.meta ? { type: "move-word-right" } : { type: "move-right" }
+		case "up":
+			return key.meta ? { type: "move-doc-start" } : { type: "move-up" }
+		case "down":
+			return key.meta ? { type: "move-doc-end" } : { type: "move-down" }
+		case "home":
+			return { type: "move-start" }
+		case "end":
+			return { type: "move-end" }
+		case "backspace":
+			return key.meta
+				? { type: "delete-word-backward", scope: "line" }
+				: { type: "delete-backward" }
+		case "delete":
+			return key.meta
+				? { type: "delete-word-forward", scope: "line" }
+				: { type: "delete-forward" }
+		case "enter":
+			return key.ctrl || key.meta ? { type: "submit" } : { type: "enter" }
+		case "escape":
+			return { type: "cancel" }
+		case "char":
+		case "space": {
+			if (key.ctrl && key.text) {
+				switch (key.text) {
+					case "a":
+						return { type: "move-start" }
+					case "e":
+						return { type: "move-end" }
+					case "b":
+						return { type: "move-left" }
+					case "f":
+						return { type: "move-right" }
+					case "n":
+						return { type: "move-down" }
+					case "p":
+						return { type: "move-up" }
+					case "d":
+						return { type: "delete-forward" }
+					case "h":
+						return { type: "delete-backward" }
+					case "k":
+						return { type: "kill-to-end" }
+					case "u":
+						return { type: "kill-to-start" }
+					case "w":
+						return { type: "delete-word-backward", scope: "document" }
+					case "t":
+						return { type: "transpose" }
+					case "y":
+						return { type: "yank" }
+				}
+			}
+
+			if (key.text && !key.meta) {
+				return { type: "insert", text: key.text }
+			}
+			break
+		}
+	}
+
+	return null
+}
+
 // ============================================================================
 // Single-line operations (for TextInput)
 // ============================================================================
@@ -64,6 +171,35 @@ export function deleteWordBackward(state: TextState): EditResult<TextState> {
 	}
 }
 
+/** Delete word forward */
+export function deleteWordForward(state: TextState): EditResult<TextState> {
+	const { text, cursor } = state
+	if (cursor >= text.length) {
+		return { state, changed: false }
+	}
+
+	const afterCursor = text.slice(cursor)
+	const match = matchNextWord(afterCursor)
+
+	if (match) {
+		const newText = text.slice(0, cursor) + text.slice(cursor + match.length)
+		return {
+			state: { text: newText, cursor, killRing: match },
+			changed: true,
+		}
+	}
+
+	const killed = text.slice(cursor)
+	if (!killed) {
+		return { state, changed: false }
+	}
+
+	return {
+		state: { text: text.slice(0, cursor), cursor, killRing: killed },
+		changed: true,
+	}
+}
+
 /** Kill to end of line */
 export function killToEnd(state: TextState): EditResult<TextState> {
 	const { text, cursor } = state
@@ -247,6 +383,50 @@ export function deleteWordBackwardMultiline(state: MultilineState): EditResult<M
 	return { state, changed: false }
 }
 
+/** Delete word forward in multiline (line-scoped) */
+export function deleteWordForwardMultiline(state: MultilineState): EditResult<MultilineState> {
+	const { lines, cursor } = state
+	const line = lines[cursor.row]
+	const lineLen = graphemes(line).length
+
+	if (cursor.col < lineLen) {
+		const charIdx = graphemeColToCharIdx(line, cursor.col)
+		const afterCursor = line.slice(charIdx)
+		const match = matchNextWord(afterCursor)
+		const newLines = [...lines]
+
+		if (match) {
+			const newLine = line.slice(0, charIdx) + line.slice(charIdx + match.length)
+			newLines[cursor.row] = newLine
+			return {
+				state: {
+					lines: newLines,
+					cursor,
+					killRing: match,
+				},
+				changed: true,
+			}
+		}
+
+		const killed = line.slice(charIdx)
+		if (!killed) {
+			return { state, changed: false }
+		}
+
+		newLines[cursor.row] = line.slice(0, charIdx)
+		return {
+			state: {
+				lines: newLines,
+				cursor,
+				killRing: killed,
+			},
+			changed: true,
+		}
+	}
+
+	return { state, changed: false }
+}
+
 /** Kill to end of line in multiline */
 export function killToEndMultiline(state: MultilineState): EditResult<MultilineState> {
 	const { lines, cursor } = state

package/src/hosts/base.ts

@@ -67,6 +67,12 @@ export abstract class BaseHost implements HostInstance {
 	parent: HostInstance | null = null
 	children: HostInstance[] = []
 	rect: Rect | null = null
+	private _layoutDirty = true
+	private _renderDirty = true
+	private _lastMeasureW = -1
+	private _lastMeasureH = -1
+	private _lastMeasuredSize: Size | null = null
+	private _lastLayoutRect: Rect | null = null
 
 	// Greedy layout - expands to fill remaining space
 	// undefined = not greedy (hug content)
@@ -117,17 +123,38 @@ export abstract class BaseHost implements HostInstance {
 	 * Optional pre-frame hook. BaseHost will call prepareSelf() and then recurse into children.
 	 */
 	prepareFrame(): void {
-		this.prepareSelf()
+		this.ensurePrepared()
 		for (const child of this.children) {
 			child.prepareFrame?.()
 		}
 	}
 
 	/** Override in subclasses to precompute caches once per frame. */
-	protected prepareSelf(): void {
+	protected prepareSelf(_layoutDirty: boolean, _renderDirty: boolean): void {
 		// Default no-op
 	}
 
+	protected ensurePrepared(): void {
+		if (!this._layoutDirty && !this._renderDirty) return
+		const layoutDirty = this._layoutDirty
+		const renderDirty = this._renderDirty
+		this._renderDirty = false
+		this.prepareSelf(layoutDirty, renderDirty)
+	}
+
+	invalidateLayout(): void {
+		this._layoutDirty = true
+		this._renderDirty = true
+		this._lastMeasuredSize = null
+		this.ctx.requestRender()
+		this.parent?.invalidateLayout?.()
+	}
+
+	invalidateRender(): void {
+		this._renderDirty = true
+		this.ctx.requestRender()
+	}
+
 	/**
 	 * Resolve a prop that may be a MotionValue/ColorMotionValue.
 	 * If it's a spring, subscribes to changes and returns current value.
@@ -204,10 +231,39 @@ export abstract class BaseHost implements HostInstance {
 		this._springSubscriptions.clear()
 	}
 
-	abstract measure(maxW: number, maxH: number): Size
+	measure(maxW: number, maxH: number): Size {
+		const constraintsUnchanged = this._lastMeasureW === maxW && this._lastMeasureH === maxH
+		if (!this._layoutDirty && constraintsUnchanged && this._lastMeasuredSize) {
+			return this._lastMeasuredSize
+		}
+
+		if (!constraintsUnchanged) {
+			this._layoutDirty = true
+		}
+
+		const size = this.measureSelf(maxW, maxH)
+		this._lastMeasureW = maxW
+		this._lastMeasureH = maxH
+		this._lastMeasuredSize = size
+		return size
+	}
+
+	protected abstract measureSelf(maxW: number, maxH: number): Size
 	abstract render(buffer: CellBuffer, palette: Palette): void
 
 	layout(rect: Rect): void {
+		const prev = this._lastLayoutRect
+		const rectUnchanged =
+			prev?.x === rect.x && prev?.y === rect.y && prev?.w === rect.w && prev?.h === rect.h
+
+		if (!this._layoutDirty && rectUnchanged) return
+
+		this.layoutSelf(rect)
+		this._layoutDirty = false
+		this._lastLayoutRect = this.rect ?? rect
+	}
+
+	protected layoutSelf(rect: Rect): void {
 		this.layoutWithConstraints(rect)
 	}
 
@@ -319,6 +375,7 @@ export abstract class BaseHost implements HostInstance {
 	updateProps(props: Record<string, unknown>): void {
 		// Greedy layout - reset to undefined unless explicitly set
 		// Subclasses like Spacer/Scroll set their own default before calling super
+		const prevGreedy = this.greedy
 		if ("greedy" in props) {
 			const greedy = props.greedy
 			if (greedy === true) {
@@ -336,6 +393,12 @@ export abstract class BaseHost implements HostInstance {
 		}
 
 		// Frame constraints - only accept valid numbers (ignore strings like "100%")
+		const prevFrameWidth = this.frameWidth
+		const prevFrameHeight = this.frameHeight
+		const prevFrameMinWidth = this.frameMinWidth
+		const prevFrameMaxWidth = this.frameMaxWidth
+		const prevFrameMinHeight = this.frameMinHeight
+		const prevFrameMaxHeight = this.frameMaxHeight
 		this.frameWidth = typeof props.width === "number" ? props.width : undefined
 		this.frameHeight = typeof props.height === "number" ? props.height : undefined
 		this.frameMinWidth = typeof props.minWidth === "number" ? props.minWidth : undefined
@@ -345,6 +408,19 @@ export abstract class BaseHost implements HostInstance {
 
 		// onLayout callback
 		this.onLayout = typeof props.onLayout === "function" ? (props.onLayout as typeof this.onLayout) : undefined
+
+		const layoutChanged =
+			prevGreedy !== this.greedy ||
+			prevFrameWidth !== this.frameWidth ||
+			prevFrameHeight !== this.frameHeight ||
+			prevFrameMinWidth !== this.frameMinWidth ||
+			prevFrameMaxWidth !== this.frameMaxWidth ||
+			prevFrameMinHeight !== this.frameMinHeight ||
+			prevFrameMaxHeight !== this.frameMaxHeight
+
+		if (layoutChanged) {
+			this.invalidateLayout()
+		}
 	}
 
 	/**
@@ -353,7 +429,11 @@ export abstract class BaseHost implements HostInstance {
 	 */
 	protected applyGreedyDefault(props: Record<string, unknown>, fallback: number): void {
 		if (!("greedy" in props)) {
+			const prevGreedy = this.greedy
 			this.greedy = fallback
+			if (prevGreedy !== this.greedy) {
+				this.invalidateLayout()
+			}
 		}
 	}
 
@@ -366,6 +446,7 @@ export abstract class BaseHost implements HostInstance {
 	appendChild(child: HostInstance): void {
 		this.children.push(child)
 		child.parent = this
+		this.invalidateLayout()
 	}
 
 	removeChild(child: HostInstance): void {
@@ -374,6 +455,7 @@ export abstract class BaseHost implements HostInstance {
 			this.children.splice(idx, 1)
 			child.parent = null
 		}
+		this.invalidateLayout()
 	}
 
 	insertBefore(child: HostInstance, before: HostInstance): void {
@@ -388,6 +470,7 @@ export abstract class BaseHost implements HostInstance {
 			this.children.push(child)
 		}
 		child.parent = this
+		this.invalidateLayout()
 	}
 
 	/**

package/src/hosts/box.ts

@@ -65,7 +65,7 @@ export class BoxHost extends SingleChildHost {
 		return this.borderThickness + titleHeight + this.padding.top + this.padding.bottom + this.borderThickness
 	}
 
-	measure(maxW: number, maxH: number): Size {
+	protected measureSelf(maxW: number, maxH: number): Size {
 		// Apply frame constraints first
 		const constrained = this.constrainProposal(maxW, maxH)
 
@@ -91,7 +91,7 @@ export class BoxHost extends SingleChildHost {
 		return this.constrainResult(naturalSize)
 	}
 
-	override layout(rect: Rect): void {
+	protected override layoutSelf(rect: Rect): void {
 		const layoutRect = this.layoutWithConstraints(rect)
 
 		const t = this.borderThickness
@@ -173,6 +173,15 @@ export class BoxHost extends SingleChildHost {
 
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
+		const prevPadding = this.padding
+		const prevBorder = this.border
+		const prevBorderColor = this.borderColor
+		const prevBg = this.bg
+		const prevTitle = this.title
+		const prevTitleColor = this.titleColor
+		const prevTitleBold = this.titleBold
+		const prevTitleDivider = this.titleDivider
+
 		this.padding = resolvePadding(props.padding as BoxProps["padding"])
 		this.border = (props.border as BorderKind | undefined) ?? "none"
 		// Color props support MotionValue/ColorMotionValue - auto-subscribe and animate
@@ -188,5 +197,31 @@ export class BoxHost extends SingleChildHost {
 		}) as Color | undefined
 		this.titleBold = Boolean(props.titleBold)
 		this.titleDivider = Boolean(props.titleDivider)
+
+		const paddingChanged =
+			prevPadding.top !== this.padding.top ||
+			prevPadding.right !== this.padding.right ||
+			prevPadding.bottom !== this.padding.bottom ||
+			prevPadding.left !== this.padding.left
+		const layoutChanged =
+			paddingChanged ||
+			prevBorder !== this.border ||
+			prevTitle !== this.title ||
+			prevTitleDivider !== this.titleDivider
+
+		if (layoutChanged) {
+			this.invalidateLayout()
+			return
+		}
+
+		const renderChanged =
+			prevBorderColor !== this.borderColor ||
+			prevBg !== this.bg ||
+			prevTitleColor !== this.titleColor ||
+			prevTitleBold !== this.titleBold
+
+		if (renderChanged) {
+			this.invalidateRender()
+		}
 	}
 }