@effect-tui/react 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.1.4",
+	"version": "0.1.5",
 	"description": "React bindings for @effect-tui/core",
 	"type": "module",
 	"files": [
@@ -83,7 +83,7 @@
 		"prepublishOnly": "bun run typecheck && bun run build"
 	},
 	"dependencies": {
-		"@effect-tui/core": "workspace:^",
+		"@effect-tui/core": "^0.1.5",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/components/TextInput.tsx

@@ -28,9 +28,9 @@ export interface TextInputProps {
 	fg?: Color
 	/** Background color */
 	bg?: Color
-	/** Cursor foreground color */
+	/** Cursor foreground color (for block style) */
 	cursorFg?: Color
-	/** Cursor background color */
+	/** Cursor background color (for block style) or underline color (for underline style) */
 	cursorBg?: Color
 	/** Placeholder foreground color */
 	placeholderFg?: Color
@@ -42,6 +42,8 @@ export interface TextInputProps {
 	focused?: boolean
 	/** Show cursor even when not focused */
 	showCursor?: boolean
+	/** Cursor style: block (inverted colors) or underline */
+	cursorStyle?: "block" | "underline"
 }
 
 /**
@@ -80,9 +82,11 @@ export function TextInput({
 	onCancel,
 	focused = true,
 	showCursor = true,
+	cursorStyle = "block",
 }: TextInputProps) {
 	const [cursorPos, setCursorPos] = useState(value.length)
 	const [killRing, setKillRing] = useState("")
+	const [scrollOffset, setScrollOffset] = useState(0)
 
 	// Keep cursor in bounds when value changes externally
 	useEffect(() => {
@@ -108,18 +112,18 @@ export function TextInput({
 				}
 			}
 
-		// Helper for word boundary movement
-		const moveToPrevWord = () => {
-			const beforeCursor = value.slice(0, cursorPos)
-			const match = matchPrevWord(beforeCursor)
-			setCursorPos(match ? cursorPos - match.length : 0)
-		}
+			// Helper for word boundary movement
+			const moveToPrevWord = () => {
+				const beforeCursor = value.slice(0, cursorPos)
+				const match = matchPrevWord(beforeCursor)
+				setCursorPos(match ? cursorPos - match.length : 0)
+			}
 
-		const moveToNextWord = () => {
-			const afterCursor = value.slice(cursorPos)
-			const match = matchNextWord(afterCursor)
-			setCursorPos(match ? cursorPos + match.length : value.length)
-		}
+			const moveToNextWord = () => {
+				const afterCursor = value.slice(cursorPos)
+				const match = matchNextWord(afterCursor)
+				setCursorPos(match ? cursorPos + match.length : value.length)
+			}
 
 			switch (key.name) {
 				case "left":
@@ -146,16 +150,16 @@ export function TextInput({
 					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) {
+				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)
 						}
@@ -164,16 +168,16 @@ export function TextInput({
 					}
 					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))
-				}
+				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))
 					}
@@ -242,43 +246,110 @@ export function TextInput({
 			const displayText = value || placeholder
 			const isPlaceholder = !value
 			const textColor = isPlaceholder ? placeholderFg : fg
+			const maxLen = width ?? ctx.width
 
 			// Clear the line with background color
 			if (bg !== undefined) {
 				ctx.fill(0, 0, ctx.width, 1, " ", { bg })
 			}
 
-			// Draw text up to width
-			const maxLen = width ?? ctx.width
+			// Calculate scroll offset to keep cursor visible
+			let effectiveScrollOffset = scrollOffset
+
+			// Compute character positions (for variable-width chars)
+			const charPositions: number[] = []
+			let totalWidth = 0
+			for (let i = 0; i < value.length; i++) {
+				charPositions.push(totalWidth)
+				totalWidth += displayWidth(value[i])
+			}
+			charPositions.push(totalWidth) // Position after last char (for cursor at end)
+
+			if (!isPlaceholder) {
+				const cursorX = charPositions[cursorPos] ?? totalWidth
+
+				// Scroll right if cursor is past visible area
+				if (cursorX >= effectiveScrollOffset + maxLen) {
+					effectiveScrollOffset = cursorX - maxLen + 1
+				}
+				// Scroll left if cursor is before visible area
+				if (cursorX < effectiveScrollOffset) {
+					effectiveScrollOffset = cursorX
+				}
+
+				// Update scroll state if changed
+				if (effectiveScrollOffset !== scrollOffset) {
+					setScrollOffset(effectiveScrollOffset)
+				}
+			} else {
+				effectiveScrollOffset = 0
+			}
+
+			// Draw text starting from scroll offset
 			let x = 0
 			for (let i = 0; i < displayText.length && x < maxLen; i++) {
 				const ch = displayText[i]
 				const charWidth = displayWidth(ch)
+				const charX = isPlaceholder ? x : charPositions[i] - effectiveScrollOffset
 
-				if (x + charWidth > maxLen) break
+				// Skip characters before visible area
+				if (!isPlaceholder && charPositions[i] + charWidth <= effectiveScrollOffset) {
+					continue
+				}
+				// Stop if we're past the visible area
+				if (charX >= maxLen) break
 
-				// Draw cursor (inverted) at cursor position when focused
+				// Draw cursor at cursor position when focused
 				const isCursor = !isPlaceholder && i === cursorPos && focused && showCursor
 				if (isCursor) {
-					ctx.text(x, 0, ch, { fg: cursorFg, bg: cursorBg })
+					if (cursorStyle === "underline") {
+						ctx.text(charX, 0, ch, { fg: cursorBg, bg, underline: true })
+					} else {
+						ctx.text(charX, 0, ch, { fg: cursorFg, bg: cursorBg })
+					}
 				} else {
-					ctx.text(x, 0, ch, { fg: textColor, bg })
+					ctx.text(charX, 0, ch, { fg: textColor, bg })
 				}
 
-				x += charWidth
+				x = charX + charWidth
 			}
 
 			// Draw cursor at end if cursor is at end of text
-			if (!isPlaceholder && cursorPos >= value.length && focused && showCursor && x < maxLen) {
-				ctx.text(x, 0, " ", { fg: cursorFg, bg: cursorBg })
+			if (!isPlaceholder && cursorPos >= value.length && focused && showCursor) {
+				const cursorX = (charPositions[cursorPos] ?? totalWidth) - effectiveScrollOffset
+				if (cursorX >= 0 && cursorX < maxLen) {
+					if (cursorStyle === "underline") {
+						ctx.text(cursorX, 0, "_", { fg: cursorBg, bg })
+					} else {
+						ctx.text(cursorX, 0, " ", { fg: cursorFg, bg: cursorBg })
+					}
+				}
 			}
 
 			// If placeholder and focused, show cursor at start
 			if (isPlaceholder && focused && showCursor) {
-				ctx.text(0, 0, placeholder[0] || " ", { fg: cursorFg, bg: cursorBg })
+				if (cursorStyle === "underline") {
+					ctx.text(0, 0, placeholder[0] || "_", { fg: cursorBg, bg, underline: placeholder.length > 0 })
+				} else {
+					ctx.text(0, 0, placeholder[0] || " ", { fg: cursorFg, bg: cursorBg })
+				}
 			}
 		},
-		[value, placeholder, cursorPos, focused, showCursor, fg, bg, cursorFg, cursorBg, placeholderFg, width],
+		[
+			value,
+			placeholder,
+			cursorPos,
+			focused,
+			showCursor,
+			fg,
+			bg,
+			cursorFg,
+			cursorBg,
+			placeholderFg,
+			width,
+			cursorStyle,
+			scrollOffset,
+		],
 	)
 
 	return <canvas draw={draw} width={width} height={1} />

package/src/hosts/canvas.ts

@@ -2,7 +2,14 @@ import type { CellBuffer, Palette, Color } from "@effect-tui/core"
 import { Colors } from "@effect-tui/core"
 import type { HostContext, Size, CommonProps } from "../reconciler/types.js"
 import { BaseHost } from "./base.js"
-import { type BorderKind, borderChars, drawBorder, resolveBgStyle, styleIdFromProps, toColorValue } from "../utils/index.js"
+import {
+	type BorderKind,
+	borderChars,
+	drawBorder,
+	resolveBgStyle,
+	styleIdFromProps,
+	toColorValue,
+} from "../utils/index.js"
 
 export type { BorderKind }
 
@@ -13,10 +20,22 @@ export interface DrawContext {
 	height: number
 
 	/** Draw text at position */
-	text(x: number, y: number, str: string, opts?: { fg?: Color; bg?: Color }): void
+	text(
+		x: number,
+		y: number,
+		str: string,
+		opts?: { fg?: Color; bg?: Color; bold?: boolean; italic?: boolean; underline?: boolean; inverse?: boolean },
+	): void
 
 	/** Fill rectangle with character */
-	fill(x: number, y: number, w: number, h: number, char?: string, opts?: { fg?: Color; bg?: Color }): void
+	fill(
+		x: number,
+		y: number,
+		w: number,
+		h: number,
+		char?: string,
+		opts?: { fg?: Color; bg?: Color; bold?: boolean; italic?: boolean; underline?: boolean; inverse?: boolean },
+	): void
 
 	/** Draw box with optional border */
 	box(
@@ -74,7 +93,14 @@ export class CanvasHost extends BaseHost {
 			text: (x, y, str, opts) => {
 				const px = Math.round(ox + x)
 				const py = Math.round(oy + y)
-				const style = styleIdFromProps(palette, { fg: opts?.fg, bg: opts?.bg })
+				const style = styleIdFromProps(palette, {
+					fg: opts?.fg,
+					bg: opts?.bg,
+					bold: opts?.bold,
+					italic: opts?.italic,
+					underline: opts?.underline,
+					inverse: opts?.inverse,
+				})
 				let col = px
 				for (const char of str) {
 					if (col >= ox + w) break
@@ -87,7 +113,14 @@ export class CanvasHost extends BaseHost {
 				const px = Math.round(ox + x)
 				const py = Math.round(oy + y)
 				const cp = char.codePointAt(0)!
-				const style = styleIdFromProps(palette, { fg: opts?.fg, bg: opts?.bg })
+				const style = styleIdFromProps(palette, {
+					fg: opts?.fg,
+					bg: opts?.bg,
+					bold: opts?.bold,
+					italic: opts?.italic,
+					underline: opts?.underline,
+					inverse: opts?.inverse,
+				})
 				for (let row = 0; row < fh; row++) {
 					const yy = py + row
 					for (let col = 0; col < fw; col++) {

package/src/renderer/modes/InlineRenderer.ts

@@ -10,6 +10,7 @@ export class InlineRenderer implements RendererMode {
 	private previousStartRow = 0 // Track which row we started from (for truncation)
 	private _needsFullRerender = false
 	private printedWidths: number[] = []
+	private _forceFullOutput = false
 
 	generateOutput(ctx: RenderContext): RenderOutput {
 		const { prevBuffer, frameHeight, contentHeight } = ctx
@@ -40,10 +41,12 @@ export class InlineRenderer implements RendererMode {
 		}
 
 		// Generate output for visible region
-		if (prevBuffer && !needsFullRedraw) {
+		// Force full output after static content handling (diff mode cursor tracking gets desynchronized)
+		if (prevBuffer && !needsFullRedraw && !this._forceFullOutput) {
 			output += this.generateDiffOutput(ctx, visibleHeight, startRow)
 		} else {
 			output += this.generateFullOutput(ctx, visibleHeight, startRow, startRow + visibleHeight)
+			this._forceFullOutput = false
 		}
 
 		this.previousHeight = visibleHeight
@@ -172,6 +175,11 @@ export class InlineRenderer implements RendererMode {
 		this.printedWidths = []
 	}
 
+	/** Force full output on the next frame (needed after static content to resync cursor tracking) */
+	forceFullOutputOnce(): void {
+		this._forceFullOutput = true
+	}
+
 	getPreviousHeight(): number {
 		return this.previousHeight
 	}

package/src/renderer.ts

@@ -124,6 +124,7 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 
 				// Step 3: Reset previousHeight to 0 (we cleared dynamic, starting fresh)
 				inlineMode.reset()
+				inlineMode.forceFullOutputOnce() // Force full output to resync cursor tracking after static
 				state.invalidateBuffers()
 				container.staticDirty = false
 			}