@effect-tui/react 0.1.7 → 0.2.1

package/src/remote/index.ts

@@ -8,14 +8,14 @@
 // 2. Connect using etui CLI or raw socket at /tmp/effect-tui-sessions/<pid>.sock
 
 export { TuiRpcs } from "./Procedures.js"
-export { TuiSession, HandlersLive } from "./Router.js"
-export { makeServerLayer, getSocketPath } from "./Server.js"
+export { HandlersLive, TuiSession } from "./Router.js"
+export { getSocketPath, makeServerLayer } from "./Server.js"
 
-import { Effect, Exit, Layer, Scope } from "effect"
 import * as fs from "node:fs"
+import { Effect, Exit, Layer, Scope } from "effect"
 import type { TuiRenderer } from "../renderer-types.js"
 import type { TuiSessionImpl } from "./Router.js"
-import { makeServerLayer, getSocketPath } from "./Server.js"
+import { getSocketPath, makeServerLayer } from "./Server.js"
 
 export interface EnableRemoteOptions {
 	/** Custom socket path (defaults to /tmp/effect-tui-sessions/<pid>.sock) */
@@ -55,13 +55,9 @@ function deriveSessionName(entryPath: string): string {
  * @param options - Socket path and entry path for session identification
  * @returns A cleanup function to stop the server
  */
-export function enableRemote(
-	renderer: TuiRenderer,
-	options?: EnableRemoteOptions | string,
-): () => void {
+export function enableRemote(renderer: TuiRenderer, options?: EnableRemoteOptions | string): () => void {
 	// Support old API: enableRemote(renderer, socketPath?)
-	const opts: EnableRemoteOptions =
-		typeof options === "string" ? { socketPath: options } : options ?? {}
+	const opts: EnableRemoteOptions = typeof options === "string" ? { socketPath: options } : (options ?? {})
 	const actualPath = opts.socketPath ?? getSocketPath()
 
 	// Derive session name from entry path

package/src/renderer/core/FrameBuilder.ts

@@ -1,7 +1,7 @@
 import { performance } from "node:perf_hooks"
 import type { CellBuffer, Palette } from "@effect-tui/core"
-import type { HostInstance } from "../../reconciler/types.js"
 import * as Prof from "../../profiler.js"
+import type { HostInstance } from "../../reconciler/types.js"
 
 export interface FrameTimings {
 	clear: number

package/src/renderer/input/InputProcessor.ts

@@ -1,4 +1,4 @@
-import { decodeInput, ANSI, type KeyMsg, type MouseMsg } from "@effect-tui/core"
+import { ANSI, decodeInput, type KeyMsg, type MouseMsg } from "@effect-tui/core"
 
 export interface InputProcessorConfig {
 	exitOnCtrlC: boolean
@@ -7,6 +7,7 @@ export interface InputProcessorConfig {
 	dispatchPaste: (text: string) => void
 	flushSync: <T>(fn: () => T) => T
 	onInputProcessed: () => void
+	onQuit?: () => void // Called instead of process.exit() for proper cleanup
 }
 
 /**
@@ -86,7 +87,11 @@ export class InputProcessor {
 				// Default Ctrl+C handling - exit unless user called preventDefault()
 				// Only match Ctrl+C (not Ctrl+Shift+C which should be available for copy)
 				if (this.config.exitOnCtrlC && !wrapped.defaultPrevented && event.ctrl && !event.shift && event.text === "c") {
-					process.exit(0)
+					if (this.config.onQuit) {
+						this.config.onQuit()
+					} else {
+						process.exit(0)
+					}
 				}
 			}
 		}

package/src/renderer/lifecycle/TerminalSetup.ts

@@ -1,5 +1,5 @@
 import { ANSI, Terminal } from "@effect-tui/core"
-import type { TuiWriteStream, TuiReadStream } from "../../renderer-types.js"
+import type { TuiReadStream, TuiWriteStream } from "../../renderer-types.js"
 
 export interface TerminalSetupConfig {
 	mode: "fullscreen" | "inline"
@@ -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/lifecycle/index.ts

@@ -1,3 +1,3 @@
 export { EventBus } from "./EventBus.js"
+export { ResizeManager, type ResizeResult, type ResizeState } from "./ResizeManager.js"
 export { TerminalSetup, type TerminalSetupConfig } from "./TerminalSetup.js"
-export { ResizeManager, type ResizeState, type ResizeResult } from "./ResizeManager.js"

package/src/renderer/modes/FullscreenRenderer.ts

@@ -1,5 +1,5 @@
 import { ANSI, emitRowWithReset, rowChanged } from "@effect-tui/core"
-import type { RendererMode, RenderContext, RenderOutput } from "./RendererMode.js"
+import type { RenderContext, RendererMode, RenderOutput } from "./RendererMode.js"
 
 /**
  * Fullscreen rendering mode using alternate buffer.

package/src/renderer/modes/InlineRenderer.ts

@@ -1,5 +1,5 @@
-import { ANSI, emitRowWithReset, rowContentWidth, findChangeWindow } from "@effect-tui/core"
-import type { RendererMode, RenderContext, RenderOutput } from "./RendererMode.js"
+import { ANSI, emitRowWithReset, findChangeWindow, rowContentWidth } from "@effect-tui/core"
+import type { RenderContext, RendererMode, RenderOutput } from "./RendererMode.js"
 
 /**
  * Inline rendering mode that renders in-place without alternate buffer.

package/src/renderer/modes/StaticContentRenderer.ts

@@ -1,4 +1,4 @@
-import { CellBuffer, emitRowWithReset, rowContentWidth, type Palette } from "@effect-tui/core"
+import { CellBuffer, emitRowWithReset, type Palette, rowContentWidth } from "@effect-tui/core"
 import type { HostInstance } from "../../reconciler/types.js"
 import type { TuiWriteStream } from "../../renderer-types.js"
 

package/src/renderer/modes/index.ts

@@ -1,4 +1,4 @@
-export type { RendererMode, RenderContext, RenderOutput } from "./RendererMode.js"
 export { FullscreenRenderer } from "./FullscreenRenderer.js"
 export { InlineRenderer } from "./InlineRenderer.js"
+export type { RenderContext, RendererMode, RenderOutput } from "./RendererMode.js"
 export { StaticContentRenderer } from "./StaticContentRenderer.js"

package/src/renderer-context.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useEffect } from "react"
+import { createContext, useContext, useEffect, useState } from "react"
 import type { TuiRenderer } from "./renderer-types.js"
 
 // Context for accessing renderer in components

package/src/renderer-types.ts

@@ -1,5 +1,5 @@
 import type { KeyMsg, MouseMsg } from "@effect-tui/core"
-import type { HostInstance, HostContext } from "./reconciler/types.js"
+import type { HostContext, HostInstance } from "./reconciler/types.js"
 
 /** Minimal write stream interface for renderer output */
 export interface TuiWriteStream {

package/src/renderer.ts

@@ -1,30 +1,29 @@
-import React, { type ReactNode } from "react"
 import { performance } from "node:perf_hooks"
-import { ANSI, type KeyMsg, type MouseMsg, bufferToString } from "@effect-tui/core"
-import { reconciler, flushSync } from "./reconciler/host-config.js"
-import type { HostContext } from "./reconciler/types.js"
-import * as Prof from "./profiler.js"
+import { ANSI, bufferToString, type KeyMsg, type MouseMsg } from "@effect-tui/core"
+import React, { type ReactNode } from "react"
 import { DEFAULT_FPS } from "./constants.js"
+import * as Prof from "./profiler.js"
+import { flushSync, reconciler } from "./reconciler/host-config.js"
+import type { HostContext } from "./reconciler/types.js"
+// Extracted modules
+import { FrameBuilder, RendererState } from "./renderer/core/index.js"
+import { InputProcessor } from "./renderer/input/index.js"
+import { EventBus, TerminalSetup } from "./renderer/lifecycle/index.js"
+import { FullscreenRenderer, InlineRenderer, StaticContentRenderer } from "./renderer/modes/index.js"
+import { RendererContext } from "./renderer-context.js"
 import type {
-	TuiWriteStream,
+	Container,
+	FrameStats,
+	RendererOptions,
 	TuiReadStream,
 	TuiRenderer,
 	TuiRendererInternal,
-	Container,
-	RendererOptions,
-	FrameStats,
+	TuiWriteStream,
 } from "./renderer-types.js"
-import { RendererContext } from "./renderer-context.js"
-
-// Extracted modules
-import { RendererState, FrameBuilder } from "./renderer/core/index.js"
-import { InputProcessor } from "./renderer/input/index.js"
-import { EventBus, TerminalSetup } from "./renderer/lifecycle/index.js"
-import { FullscreenRenderer, InlineRenderer, StaticContentRenderer } from "./renderer/modes/index.js"
 
-// Re-export types and context for backwards compatibility
-export type { TuiWriteStream, TuiReadStream, TuiRenderer, RendererOptions, FrameStats } from "./renderer-types.js"
 export { RendererContext, useRenderer, useTerminalSize } from "./renderer-context.js"
+// Re-export types and context for backwards compatibility
+export type { FrameStats, RendererOptions, TuiReadStream, TuiRenderer, TuiWriteStream } from "./renderer-types.js"
 
 export function createRenderer(options?: RendererOptions): TuiRenderer {
 	const fps = options?.fps ?? DEFAULT_FPS
@@ -71,6 +70,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
@@ -162,7 +166,7 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 			})
 
 			// Combine static + dynamic output for atomic write
-			let output = staticOutput + modeOutput + state.palette.sgr(0)
+			const output = staticOutput + modeOutput + state.palette.sgr(0)
 			contentH = contentHeight
 			const diffAnsiMs = performance.now() - diffStartMs
 			Prof.endPhase("diff+ansi", t)
@@ -300,6 +304,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 +390,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 +410,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 +431,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/index.ts

@@ -1,8 +1,8 @@
-export { renderTUI, type RenderTUIOptions, type RenderTUIResult } from "./render-tui.js"
 export {
-	MockStdout,
-	MockStdin,
 	encodeKey,
-	stripAnsi,
 	getVisibleLines,
+	MockStdin,
+	MockStdout,
+	stripAnsi,
 } from "./mock-streams.js"
+export { type RenderTUIOptions, type RenderTUIResult, renderTUI } from "./render-tui.js"

package/src/test/render-tui.ts

@@ -1,12 +1,14 @@
-import type { ReactElement } from "react"
 import type { KeyMsg } from "@effect-tui/core"
-import { createRenderer, createRoot } from "../renderer.js"
+import type { ReactElement } from "react"
 import { flushPassiveEffects, flushSync } from "../reconciler/host-config.js"
-import { MockStdout, MockStdin, stripAnsi, getVisibleLines } from "./mock-streams.js"
+import { createRenderer, createRoot } from "../renderer.js"
+import { getVisibleLines, MockStdin, MockStdout, stripAnsi } from "./mock-streams.js"
 
 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/flex-layout.ts

@@ -2,9 +2,9 @@
  * Generic flex layout algorithm for VStack and HStack.
  */
 
-import type { HostInstance, Rect, Size } from "../reconciler/types.js"
+import { type Axis, crossDim, crossPos, crossSize, mainDim, mainPos, mainSize, makeRect } from "@effect-tui/core"
 import type { BaseHost } from "../hosts/base.js"
-import { type Axis, mainSize, crossSize, mainPos, crossPos, mainDim, crossDim, makeRect } from "@effect-tui/core"
+import type { HostInstance, Rect, Size } from "../reconciler/types.js"
 
 export type FlexAxis = Axis
 export type FlexAlignment = "start" | "center" | "end"
@@ -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,13 +1,13 @@
-export { type HAlign, type VAlign, alignInRect } from "./alignment.js"
-export { type BorderKind, type BorderChars, borderChars, type ClipRect, drawBorder } from "./border.js"
+export { alignInRect, type HAlign, type VAlign } from "./alignment.js"
+export { type BorderChars, type BorderKind, borderChars, type ClipRect, drawBorder } from "./border.js"
+export { type FlexAlignment, type FlexAxis, type FlexMeasureResult, layoutFlex, measureFlex } from "./flex-layout.js"
 export { type Padding, type PaddingInput, resolvePadding } from "./padding.js"
 export {
-	type StyleOptions,
-	type StyleInput,
-	toColorValue,
-	styleSpecFromProps,
-	styleIdFromProps,
 	resolveBgStyle,
 	resolveInheritedBgStyle,
+	type StyleInput,
+	type StyleOptions,
+	styleIdFromProps,
+	styleSpecFromProps,
+	toColorValue,
 } from "./styles.js"
-export { type FlexAxis, type FlexAlignment, type FlexMeasureResult, measureFlex, layoutFlex } from "./flex-layout.js"

package/src/utils/styles.ts

@@ -2,7 +2,7 @@
  * Style utilities for building palette-compatible style objects.
  */
 
-import { parseColor, type Color, type ColorValue, type Palette, type StyleSpec } from "@effect-tui/core"
+import { type Color, type ColorValue, type Palette, parseColor, type StyleSpec } from "@effect-tui/core"
 
 export interface StyleOptions {
 	fg?: ColorValue
@@ -56,8 +56,8 @@ export function resolveBgStyle(palette: Palette, bg?: Color): { value?: ColorVal
 	return { value, styleId }
 }
 
-import type { HostInstance } from "../reconciler/types.js"
 import { getInheritedBg } from "../hosts/base.js"
+import type { HostInstance } from "../reconciler/types.js"
 
 /**
  * Resolve background style, inheriting from parent if not explicitly set.

package/src/visualize/index.tsx

@@ -1,9 +1,9 @@
 // Effect visualization wrapper using React
 // Uses Effect Layer for proper terminal state management across multiple calls
 
-import { useState, useEffect } from "react"
+import { ANSI, Colors } from "@effect-tui/core"
 import { Cause, Context, Duration, Effect, Exit, Fiber, Layer, Option } from "effect"
-import { Colors, ANSI } from "@effect-tui/core"
+import { useEffect, useState } from "react"
 import { createRenderer, createRoot } from "../renderer.js"
 
 const SPINNER_FRAMES = ["⠋", "⠙", "⠸", "⠴", "⠦", "⠇"] as const