@effect-tui/react 0.1.6 → 0.2.0

package/src/renderer/lifecycle/TerminalSetup.ts

@@ -70,36 +70,47 @@ export class TerminalSetup {
 	/**
 	 * Restore terminal to normal state.
 	 * Call this when stopping the renderer.
+	 * Uses a single write call to ensure atomic output and reliable flushing.
 	 */
 	teardown(): void {
 		if (this.config.skipTerminalSetup) return
 
-		if (this.config.mode === "fullscreen") {
-			this.stdout.write(Terminal.exitFullscreen)
-		} else {
-			// Re-enable reflow on exit
-			this.stdout.write(ANSI.reflow.enable)
-			this.stdout.write("\r\n")
+		// Disable raw mode FIRST - this is critical for proper terminal restoration
+		// Must happen before writing escape sequences so the terminal processes them correctly
+		if (this.stdin.isTTY && this.stdin.setRawMode) {
+			this.stdin.setRawMode(false)
 		}
 
-		if (this.config.enablePaste) {
-			this.stdout.write(ANSI.paste.disable)
+		// Build all escape sequences into a single string for atomic write
+		// This ensures all sequences are flushed together before process exit
+		let output = ""
+
+		// Disable enhanced keyboard protocols first
+		if (this.config.enableKittyKeyboard !== false) {
+			output += ANSI.keyboard.disable
+			output += ANSI.modifyOtherKeys.disable
 		}
 
 		if (this.config.enableMouse) {
-			this.stdout.write(ANSI.mouse.disable)
+			output += ANSI.mouse.disable
 		}
 
-		// Disable enhanced keyboard protocols
-		if (this.config.enableKittyKeyboard !== false) {
-			this.stdout.write(ANSI.keyboard.disable)
-			this.stdout.write(ANSI.modifyOtherKeys.disable)
+		if (this.config.enablePaste) {
+			output += ANSI.paste.disable
 		}
 
-		this.stdout.write(Terminal.showCursor)
-
-		if (this.stdin.isTTY && this.stdin.setRawMode) {
-			this.stdin.setRawMode(false)
+		// Exit fullscreen or re-enable reflow
+		if (this.config.mode === "fullscreen") {
+			output += Terminal.exitFullscreen
+		} else {
+			output += ANSI.reflow.enable
+			output += "\r\n"
 		}
+
+		// Always show cursor at the end
+		output += Terminal.showCursor
+
+		// Single atomic write - more reliable for process exit scenarios
+		this.stdout.write(output)
 	}
 }

package/src/renderer/modes/FullscreenRenderer.ts

@@ -1,4 +1,4 @@
-import { ANSI, emitRowWithReset, findChangeWindow } from "@effect-tui/core"
+import { ANSI, emitRowWithReset, rowChanged } from "@effect-tui/core"
 import type { RendererMode, RenderContext, RenderOutput } from "./RendererMode.js"
 
 /**
@@ -15,20 +15,22 @@ export class FullscreenRenderer implements RendererMode {
 		// If a full clear was requested (e.g., on resize), prepend it to output
 		// so clear + content are written atomically (no visible flash)
 		if (this.needsFullClear) {
-			output += ANSI.cursor.to(1, 1)
+			output += ANSI.screen.clear + ANSI.cursor.to(1, 1)
 			this.needsFullClear = false
 			// After clear, we must redraw everything - can't rely on diff
 			for (let y = 0; y < frameHeight; y++) {
 				if (y > 0) output += ANSI.cursor.to(1, y + 1)
+				output += palette.sgr(0) + ANSI.line.clear
 				output += emitRowWithReset(nextBuffer, palette, y, frameWidth)
 			}
 		} else if (enableDiff && prevBuffer) {
 			// Diff per line for minimal writes
 			for (let y = 0; y < frameHeight; y++) {
-				const change = findChangeWindow(prevBuffer, nextBuffer, y, frameWidth)
-				if (!change) continue
-				output += ANSI.cursor.to(change.left + 1, y + 1)
-				output += emitRowWithReset(nextBuffer, palette, y, frameWidth, change.left, change.right + 1)
+				if (!rowChanged(prevBuffer, nextBuffer, y, frameWidth)) continue
+				output += ANSI.cursor.to(1, y + 1)
+				// Clear the row using default style to avoid carrying stale backgrounds
+				output += palette.sgr(0) + ANSI.line.clear
+				output += emitRowWithReset(nextBuffer, palette, y, frameWidth)
 			}
 		} else {
 			// Full redraw (tests/manual mode)

package/src/renderer/modes/InlineRenderer.ts

@@ -32,6 +32,7 @@ export class InlineRenderer implements RendererMode {
 				output += ANSI.cursor.up(this.previousHeight)
 			}
 			output += ANSI.cursor.startOfLine
+			output += ANSI.screen.clearToEnd
 			this.previousStartRow = startRow
 			this.printedWidths = []
 		} else if (this.previousHeight > 0) {
@@ -80,7 +81,7 @@ export class InlineRenderer implements RendererMode {
 				const prevW = this.printedWidths[screenY] ?? 0
 				if (prevW > 0) {
 					moveToRow(screenY)
-					output += ANSI.cursor.toCol(1) + palette.sgr(0) + " ".repeat(prevW)
+					output += ANSI.cursor.toCol(1) + palette.sgr(0) + ANSI.line.clear
 					this.printedWidths[screenY] = 0
 				}
 				continue
@@ -94,7 +95,7 @@ export class InlineRenderer implements RendererMode {
 				// No change; maybe need to clear tail if content shrunk
 				if (prevW > newW) {
 					moveToRow(screenY)
-					output += ANSI.cursor.toCol(newW + 1) + palette.sgr(0) + " ".repeat(prevW - newW)
+					output += ANSI.cursor.toCol(newW + 1) + palette.sgr(0) + ANSI.line.clearToEnd
 					this.printedWidths[screenY] = newW
 				}
 				continue
@@ -108,9 +109,9 @@ export class InlineRenderer implements RendererMode {
 			// Clear tail if shrunk
 			const effectiveW = Math.max(newW, change.right + 1)
 			if (prevW > effectiveW) {
-				output += ANSI.cursor.toCol(effectiveW + 1) + palette.sgr(0) + " ".repeat(prevW - effectiveW)
+				output += ANSI.cursor.toCol(effectiveW + 1) + ANSI.line.clearToEnd
 			}
-			this.printedWidths[screenY] = newW
+			this.printedWidths[screenY] = effectiveW
 		}
 
 		// Ensure cursor ends just after the dynamic block for next frame positioning
@@ -128,8 +129,9 @@ export class InlineRenderer implements RendererMode {
 		for (let bufferY = startRow; bufferY < endRow; bufferY++) {
 			const screenY = bufferY - startRow
 			const trimmedWidth = rowContentWidth(nextBuffer, bufferY, frameWidth)
-			// Full-width emit avoids reliance on line clears.
-			output += emitRowWithReset(nextBuffer, palette, bufferY, frameWidth, 0, frameWidth)
+			// Clear ENTIRE line first to handle resize artifacts
+			output += ANSI.line.clear
+			output += emitRowWithReset(nextBuffer, palette, bufferY, frameWidth, 0, trimmedWidth)
 			output += "\r\n"
 			// Track line widths for resize reflow calculation
 			this.printedWidths[screenY] = trimmedWidth
@@ -137,7 +139,7 @@ export class InlineRenderer implements RendererMode {
 
 		// Clear any extra lines if content shrank
 		for (let screenY = rowCount; screenY < this.previousHeight; screenY++) {
-			output += palette.sgr(0) + " ".repeat(frameWidth) + "\r\n"
+			output += palette.sgr(0) + ANSI.line.clear + "\r\n"
 			this.printedWidths[screenY] = 0
 		}
 

package/src/renderer.ts

@@ -71,6 +71,11 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		onInputProcessed: () => {
 			if (!manualMode) renderFrame()
 		},
+		onQuit: () => {
+			// Clean up terminal state before exiting
+			renderer.stop()
+			process.exit(0)
+		},
 	})
 
 	// The render frame logic
@@ -300,6 +305,27 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		}, frameMs)
 	}
 
+	// Process exit handlers - ensure terminal is restored on any exit
+	// These handlers are critical for proper cleanup when process.exit() is called
+	let cleanedUp = false
+	const cleanup = () => {
+		if (cleanedUp) return
+		cleanedUp = true
+		renderer.stop()
+	}
+
+	// Handle normal process exit (synchronous - runs before exit completes)
+	const onExit = () => cleanup()
+	process.on("exit", onExit)
+
+	// Handle SIGINT (Ctrl+C from shell, not from TUI input) and SIGTERM
+	const onSignal = () => {
+		cleanup()
+		process.exit(0)
+	}
+	process.on("SIGINT", onSignal)
+	process.on("SIGTERM", onSignal)
+
 	;(renderer as TuiRendererInternal)._container = null
 	return renderer
 }
@@ -365,6 +391,8 @@ export interface RenderInstance {
 	rerender(element: ReactNode): void
 	unmount(): void
 	waitUntilExit(): Promise<void>
+	/** Cleanly exit the application, restoring terminal state before process.exit() */
+	quit(code?: number): void
 }
 
 export function render(element: ReactNode, options?: RendererOptions): RenderInstance {
@@ -383,18 +411,20 @@ export function render(element: ReactNode, options?: RendererOptions): RenderIns
 		}
 	})
 
+	// Resolve the exit promise on process exit
+	// Note: Terminal cleanup is handled by createRenderer's exit handlers
 	const onExit = () => {
-		if (!resolved) {
-			renderer.stop()
-			resolveExit?.()
-		}
+		resolveExit?.()
 	}
 	process.once("exit", onExit)
 
 	const unmount = () => {
 		process.off("exit", onExit)
-		renderer.stop()
-		resolveExit?.()
+		if (!resolved) {
+			resolved = true
+			renderer.stop()
+			resolveExit?.()
+		}
 	}
 
 	const rerender = (next: ReactNode) => {
@@ -402,11 +432,19 @@ export function render(element: ReactNode, options?: RendererOptions): RenderIns
 		root.render(next)
 	}
 
+	// Clean quit function - renderer.stop() + process.exit()
+	// The createRenderer exit handler will also run, but it's idempotent
+	const quit = (code = 0) => {
+		renderer.stop()
+		process.exit(code)
+	}
+
 	return {
 		renderer,
 		root,
 		rerender,
 		unmount,
 		waitUntilExit: () => exitPromise,
+		quit,
 	}
 }

package/src/test/render-tui.ts

@@ -7,6 +7,8 @@ import { MockStdout, MockStdin, stripAnsi, getVisibleLines } from "./mock-stream
 export interface RenderTUIOptions {
 	width?: number
 	height?: number
+	mode?: "fullscreen" | "inline"
+	diff?: boolean
 }
 
 export interface RenderTUIResult {
@@ -26,6 +28,8 @@ export interface RenderTUIResult {
 	stdout: MockStdout
 	/** Access mock stdin for advanced input simulation */
 	stdin: MockStdin
+	/** Access renderer for advanced assertions */
+	renderer: ReturnType<typeof createRenderer>
 	/** Resize the terminal */
 	resize(width: number, height: number): void
 }
@@ -60,6 +64,8 @@ export function renderTUI(element: ReactElement, options?: RenderTUIOptions): Re
 		stdin: stdin as any,
 		manualMode: true,
 		skipTerminalSetup: true,
+		mode: options?.mode,
+		diff: options?.diff,
 	})
 
 	const root = createRoot(renderer)
@@ -106,6 +112,7 @@ export function renderTUI(element: ReactElement, options?: RenderTUIOptions): Re
 
 		stdout,
 		stdin,
+		renderer,
 
 		resize(w: number, h: number) {
 			stdout.resize(w, h)

package/src/utils/alignment.ts

@@ -0,0 +1,50 @@
+/**
+ * Alignment utilities for layout positioning.
+ */
+
+import type { Rect, Size } from "../reconciler/types.js"
+
+export type HAlign = "left" | "center" | "right" | "leading" | "trailing"
+export type VAlign = "top" | "center" | "bottom"
+
+/**
+ * Calculate position to align a child size within a container rect.
+ * Returns the x,y coordinates for the child's top-left corner.
+ */
+export function alignInRect(
+	rect: Rect,
+	size: Size,
+	hAlign: HAlign = "center",
+	vAlign: VAlign = "center",
+): { x: number; y: number } {
+	let x = rect.x
+	let y = rect.y
+
+	switch (hAlign) {
+		case "left":
+		case "leading":
+			x = rect.x
+			break
+		case "center":
+			x = rect.x + Math.floor((rect.w - size.w) / 2)
+			break
+		case "right":
+		case "trailing":
+			x = rect.x + Math.max(0, rect.w - size.w)
+			break
+	}
+
+	switch (vAlign) {
+		case "top":
+			y = rect.y
+			break
+		case "center":
+			y = rect.y + Math.floor((rect.h - size.h) / 2)
+			break
+		case "bottom":
+			y = rect.y + Math.max(0, rect.h - size.h)
+			break
+	}
+
+	return { x, y }
+}

package/src/utils/flex-layout.ts

@@ -53,6 +53,19 @@ export function measureFlex(
 	return { sizes, totalSize }
 }
 
+/**
+ * Get the greedy weight for a child.
+ * - undefined/false = 0 (not greedy, hugs content)
+ * - true = 1
+ * - number = that weight
+ */
+function getGreedyWeight(child: HostInstance): number {
+	const greedy = (child as BaseHost).greedy
+	if (greedy === undefined || greedy === false) return 0
+	if (greedy === true) return 1
+	return greedy
+}
+
 /**
  * Layout children along a flex axis using cached sizes.
  */
@@ -67,17 +80,17 @@ export function layoutFlex(
 ): void {
 	// Calculate totals
 	let totalNaturalMain = 0
-	let totalFlexGrow = 0
+	let totalGreedyWeight = 0
 	const totalSpacing = Math.max(0, (children.length - 1) * spacing)
 
 	for (let i = 0; i < children.length; i++) {
 		const child = children[i]
 		const size = cachedSizes[i] ?? child.measure(rect.w, rect.h)
 		totalNaturalMain += mainSize(axis, size)
-		totalFlexGrow += (child as BaseHost).flexGrow ?? 0
+		totalGreedyWeight += getGreedyWeight(child)
 	}
 
-	// Calculate extra space to distribute
+	// Calculate extra space to distribute to greedy children
 	const availableMain = mainDim(axis, rect)
 	const extraSpace = Math.max(0, availableMain - totalNaturalMain - totalSpacing)
 
@@ -89,10 +102,10 @@ export function layoutFlex(
 	for (let i = 0; i < children.length; i++) {
 		const child = children[i]
 		const size = cachedSizes[i] ?? { w: 0, h: 0 }
-		const flexGrow = (child as BaseHost).flexGrow ?? 0
-		const flexExtra = totalFlexGrow > 0 ? (extraSpace * flexGrow) / totalFlexGrow : 0
+		const greedyWeight = getGreedyWeight(child)
+		const greedyExtra = totalGreedyWeight > 0 ? (extraSpace * greedyWeight) / totalGreedyWeight : 0
 
-		const childMainDim = mainSize(axis, size) + flexExtra
+		const childMainDim = mainSize(axis, size) + greedyExtra
 		const childCrossDim = crossSize(axis, size)
 
 		// Calculate cross position based on alignment

package/src/utils/index.ts

@@ -1,4 +1,13 @@
+export { type HAlign, type VAlign, alignInRect } from "./alignment.js"
 export { type BorderKind, type BorderChars, borderChars, type ClipRect, drawBorder } from "./border.js"
 export { type Padding, type PaddingInput, resolvePadding } from "./padding.js"
-export { type StyleOptions, type StyleInput, toColorValue, styleSpecFromProps, styleIdFromProps, resolveBgStyle } from "./styles.js"
+export {
+	type StyleOptions,
+	type StyleInput,
+	toColorValue,
+	styleSpecFromProps,
+	styleIdFromProps,
+	resolveBgStyle,
+	resolveInheritedBgStyle,
+} from "./styles.js"
 export { type FlexAxis, type FlexAlignment, type FlexMeasureResult, measureFlex, layoutFlex } from "./flex-layout.js"

package/src/utils/styles.ts

@@ -55,3 +55,19 @@ export function resolveBgStyle(palette: Palette, bg?: Color): { value?: ColorVal
 	const styleId = value === undefined ? 0 : palette.id({ bg: value })
 	return { value, styleId }
 }
+
+import type { HostInstance } from "../reconciler/types.js"
+import { getInheritedBg } from "../hosts/base.js"
+
+/**
+ * Resolve background style, inheriting from parent if not explicitly set.
+ * Common pattern used by hosts that need background color inheritance.
+ */
+export function resolveInheritedBgStyle(
+	palette: Palette,
+	explicitBg: Color | undefined,
+	parent: HostInstance | null,
+): { value?: ColorValue; styleId: number } {
+	const bg = explicitBg ?? getInheritedBg(parent)
+	return resolveBgStyle(palette, bg)
+}