@effect-tui/react 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"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": "^0.2.1",
+		"@effect-tui/core": "^0.2.2",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/components/TextInput.tsx

@@ -352,5 +352,5 @@ export function TextInput({
 		],
 	)
 
-	return <canvas draw={draw} width={width} height={1} />
+	return <canvas draw={draw} width={width} height={1} inheritBg />
 }

package/src/console/ConsolePopover.tsx

@@ -300,107 +300,99 @@ export function ConsolePopover({
 		[contentStartY, scrollState.offset, displayLines.length],
 	)
 
-	// Keyboard handler
-	useKeyboard(
-		useCallback(
-			(key) => {
-				// Ctrl+Y or Ctrl+C - Copy selection
-				if (key.ctrl && !key.shift && key.name === "char" && (key.text === "y" || key.text === "c")) {
-					handleCopy()
-					return
-				}
+	// Keyboard handler - no useCallback needed, useKeyboard uses ref internally
+	useKeyboard((key) => {
+		// Ctrl+Y or Ctrl+C - Copy selection
+		if (key.ctrl && !key.shift && key.name === "char" && (key.text === "y" || key.text === "c")) {
+			handleCopy()
+			return
+		}
 
-				// Ctrl+S - Save logs to file
-				if (key.ctrl && !key.shift && key.name === "char" && key.text === "s") {
-					handleSave()
-					return
-				}
+		// Ctrl+S - Save logs to file
+		if (key.ctrl && !key.shift && key.name === "char" && key.text === "s") {
+			handleSave()
+			return
+		}
 
-				// Size controls
-				if (key.name === "char" && (key.text === "+" || key.text === "=")) {
-					if (mode === "inline") {
-						setInlineHeight((prev) => Math.min(30, prev + 2))
-					} else {
-						setSizePercent((prev) => Math.min(maxHeightPercent, prev + 5))
-					}
-					return
-				}
-				if (key.name === "char" && key.text === "-") {
-					if (mode === "inline") {
-						setInlineHeight((prev) => Math.max(4, prev - 2))
-					} else {
-						setSizePercent((prev) => Math.max(minHeightPercent, prev - 5))
-					}
-					return
-				}
+		// Size controls
+		if (key.name === "char" && (key.text === "+" || key.text === "=")) {
+			if (mode === "inline") {
+				setInlineHeight((prev) => Math.min(30, prev + 2))
+			} else {
+				setSizePercent((prev) => Math.min(maxHeightPercent, prev + 5))
+			}
+			return
+		}
+		if (key.name === "char" && key.text === "-") {
+			if (mode === "inline") {
+				setInlineHeight((prev) => Math.max(4, prev - 2))
+			} else {
+				setSizePercent((prev) => Math.max(minHeightPercent, prev - 5))
+			}
+			return
+		}
 
-				// Shift+up/down - jump to top/bottom
-				if (key.shift && key.name === "up") {
-					scrollToStart()
-					return
-				}
-				if (key.shift && key.name === "down") {
-					scrollToEnd()
-					return
-				}
+		// Shift+up/down - jump to top/bottom
+		if (key.shift && key.name === "up") {
+			scrollToStart()
+			return
+		}
+		if (key.shift && key.name === "down") {
+			scrollToEnd()
+			return
+		}
 
-				// Regular up/down - scroll
-				if (key.name === "up") {
-					scrollBy(-1)
-					return
-				}
-				if (key.name === "down") {
-					scrollBy(1)
-					return
-				}
+		// Regular up/down - scroll
+		if (key.name === "up") {
+			scrollBy(-1)
+			return
+		}
+		if (key.name === "down") {
+			scrollBy(1)
+			return
+		}
 
-				// Home/End
-				if (key.name === "home") {
-					scrollToStart()
-					return
-				}
-				if (key.name === "end") {
-					scrollToEnd()
-					return
-				}
-			},
-			[handleCopy, handleSave, maxHeightPercent, minHeightPercent, scrollToStart, scrollToEnd, scrollBy],
-		),
-	)
+		// Home/End
+		if (key.name === "home") {
+			scrollToStart()
+			return
+		}
+		if (key.name === "end") {
+			scrollToEnd()
+			return
+		}
+	})
 
-	// Mouse handler for text selection
+	// Mouse handler for text selection - no useCallback needed, useMouse uses ref internally
 	useMouse(
-		useCallback(
-			(mouse) => {
-				// Only handle events in content area
-				if (mouse.y < contentStartY || mouse.y >= termHeight) return
-
-				const point = mouseToSelectionPoint(mouse.x, mouse.y)
-				if (!point) return
-
-				if (mouse.action === "press") {
-					// Start new selection
-					setSelectionAnchor(point)
-					setSelectionHead(point)
-					isSelectingRef.current = true
-				} else if (mouse.action === "drag" && isSelectingRef.current) {
-					// Extend selection
-					setSelectionHead(point)
-
-					// Auto-scroll when dragging near edges
-					const relativeY = mouse.y - contentStartY
-					const viewportHeight = popoverHeight - 1 // -1 for title
-					if (relativeY <= 1) {
-						scrollBy(-1)
-					} else if (relativeY >= viewportHeight - 2) {
-						scrollBy(1)
-					}
-				} else if (mouse.action === "release") {
-					isSelectingRef.current = false
+		(mouse) => {
+			// Only handle events in content area
+			if (mouse.y < contentStartY || mouse.y >= termHeight) return
+
+			const point = mouseToSelectionPoint(mouse.x, mouse.y)
+			if (!point) return
+
+			if (mouse.action === "press") {
+				// Start new selection
+				setSelectionAnchor(point)
+				setSelectionHead(point)
+				isSelectingRef.current = true
+			} else if (mouse.action === "drag" && isSelectingRef.current) {
+				// Extend selection
+				setSelectionHead(point)
+
+				// Auto-scroll when dragging near edges
+				const relativeY = mouse.y - contentStartY
+				const viewportHeight = popoverHeight - 1 // -1 for title
+				if (relativeY <= 1) {
+					scrollBy(-1)
+				} else if (relativeY >= viewportHeight - 2) {
+					scrollBy(1)
 				}
-			},
-			[contentStartY, termHeight, mouseToSelectionPoint, popoverHeight, scrollBy],
-		),
+			} else if (mouse.action === "release") {
+				isSelectingRef.current = false
+			}
+		},
 		{ action: "any", button: "left" },
 	)
 

package/src/exit.ts

@@ -0,0 +1,8 @@
+/**
+ * Request a clean process exit.
+ * This schedules process.exit() on the next tick to allow
+ * pending cleanup operations to complete.
+ */
+export function requestExit(code = 0): void {
+	setImmediate(() => process.exit(code))
+}

package/src/hooks/use-quit.ts

@@ -1,4 +1,5 @@
 import { useCallback } from "react"
+import { requestExit } from "../exit.js"
 import { useRenderer } from "../renderer-context.js"
 
 /**
@@ -26,7 +27,7 @@ export function useQuit(): (code?: number) => void {
 	return useCallback(
 		(code = 0) => {
 			renderer.stop()
-			process.exit(code)
+			requestExit(code)
 		},
 		[renderer],
 	)

package/src/hosts/canvas.ts

@@ -6,6 +6,7 @@ import {
 	borderChars,
 	drawBorder,
 	resolveBgStyle,
+	resolveInheritedBgStyle,
 	styleIdFromProps,
 	toColorValue,
 } from "../utils/index.js"
@@ -62,12 +63,15 @@ export interface CanvasProps extends CommonProps {
 	width?: number
 	/** Fixed height (default: fill available) */
 	height?: number
+	/** Inherit background color from parent and pre-fill canvas (default: false) */
+	inheritBg?: boolean
 }
 
 export class CanvasHost extends BaseHost {
 	draw: CanvasProps["draw"] = () => {}
 	fixedWidth?: number
 	fixedHeight?: number
+	inheritBg = false
 
 	constructor(props: CanvasProps, ctx: HostContext) {
 		super("canvas", props, ctx)
@@ -85,6 +89,12 @@ export class CanvasHost extends BaseHost {
 		if (!this.rect) return
 		const { x: ox, y: oy, w, h } = this.rect
 
+		// Pre-fill with inherited background if requested
+		if (this.inheritBg) {
+			const { styleId } = resolveInheritedBgStyle(palette, undefined, this.parent)
+			buffer.fillRect(ox, oy, w, h, " ".codePointAt(0)!, styleId)
+		}
+
 		// Create draw context
 		const ctx: DrawContext = {
 			width: w,
@@ -180,5 +190,6 @@ export class CanvasHost extends BaseHost {
 		}
 		if (props.width !== undefined) this.fixedWidth = props.width as number
 		if (props.height !== undefined) this.fixedHeight = props.height as number
+		if (props.inheritBg !== undefined) this.inheritBg = props.inheritBg as boolean
 	}
 }

package/src/renderer-types.ts

@@ -75,6 +75,12 @@ export interface RendererOptions {
 	mode?: "fullscreen" | "inline"
 	/** Exit the process on Ctrl+C unless preventDefault was called. Defaults to true. */
 	exitOnCtrlC?: boolean
+	/** Handle SIGINT/SIGTERM and restore terminal. Defaults to true. */
+	handleSignals?: boolean
+	/** Exit the process after handling SIGINT/SIGTERM. Defaults to true. */
+	exitOnSignal?: boolean
+	/** Override exit codes for signals. Defaults: SIGINT=130, SIGTERM=143. */
+	signalExitCodes?: Partial<Record<"SIGINT" | "SIGTERM", number>>
 	/** Enable diffed rendering (per-line). Defaults to true in runtime, false in manualMode (tests). */
 	diff?: boolean
 	/** Skip automatic render loop. Call flush() manually to render frames. */

package/src/renderer.ts

@@ -2,6 +2,7 @@ import { performance } from "node:perf_hooks"
 import { ANSI, bufferToString, type KeyMsg, type MouseMsg } from "@effect-tui/core"
 import React, { type ReactNode } from "react"
 import { DEFAULT_FPS } from "./constants.js"
+import { requestExit } from "./exit.js"
 import * as Prof from "./profiler.js"
 import { flushSync, reconciler } from "./reconciler/host-config.js"
 import type { HostContext } from "./reconciler/types.js"
@@ -25,12 +26,21 @@ export { RendererContext, useRenderer, useTerminalSize } from "./renderer-contex
 // Re-export types and context for backwards compatibility
 export type { FrameStats, RendererOptions, TuiReadStream, TuiRenderer, TuiWriteStream } from "./renderer-types.js"
 
+type HandledSignal = "SIGINT" | "SIGTERM"
+
 export function createRenderer(options?: RendererOptions): TuiRenderer {
 	const fps = options?.fps ?? DEFAULT_FPS
 	const stdout: TuiWriteStream = options?.stdout ?? process.stdout
 	const stdin: TuiReadStream = options?.stdin ?? process.stdin
 	const mode = options?.mode ?? "fullscreen"
 	const exitOnCtrlC = options?.exitOnCtrlC ?? true
+	const handleSignals = options?.handleSignals ?? true
+	const exitOnSignal = options?.exitOnSignal ?? true
+	const signalExitCodes: Record<HandledSignal, number> = {
+		SIGINT: 130,
+		SIGTERM: 143,
+		...options?.signalExitCodes,
+	}
 	const manualMode = options?.manualMode ?? false
 	const enableDiff = options?.diff ?? !manualMode
 	const skipTerminalSetup = options?.skipTerminalSetup ?? false
@@ -73,7 +83,7 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		onQuit: () => {
 			// Clean up terminal state before exiting
 			renderer.stop()
-			process.exit(0)
+			requestExit(0)
 		},
 	})
 
@@ -210,6 +220,9 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		}
 	}
 
+	let onExit: (() => void) | null = null
+	let onSignal: ((signal: NodeJS.Signals) => void) | null = null
+
 	// Build renderer object
 	const renderer: TuiRenderer = {
 		get width() {
@@ -228,6 +241,15 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		onFrameStats: (handler: (stats: FrameStats) => void) => events.onFrameStats(handler),
 		stop() {
 			state.running = false
+			if (onExit) {
+				process.off("exit", onExit)
+				onExit = null
+			}
+			if (onSignal) {
+				process.off("SIGINT", onSignal)
+				process.off("SIGTERM", onSignal)
+				onSignal = null
+			}
 			if (state.loop) {
 				clearInterval(state.loop)
 				state.loop = null
@@ -314,16 +336,20 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 	}
 
 	// Handle normal process exit (synchronous - runs before exit completes)
-	const onExit = () => cleanup()
+	onExit = () => cleanup()
 	process.on("exit", onExit)
 
-	// Handle SIGINT (Ctrl+C from shell, not from TUI input) and SIGTERM
-	const onSignal = () => {
-		cleanup()
-		process.exit(0)
+	if (handleSignals) {
+		// Handle SIGINT (Ctrl+C from shell, not from TUI input) and SIGTERM
+		onSignal = (signal: NodeJS.Signals) => {
+			cleanup()
+			if (!exitOnSignal) return
+			const code = signalExitCodes[signal as HandledSignal] ?? 0
+			requestExit(code)
+		}
+		process.on("SIGINT", onSignal)
+		process.on("SIGTERM", onSignal)
 	}
-	process.on("SIGINT", onSignal)
-	process.on("SIGTERM", onSignal)
 
 	;(renderer as TuiRendererInternal)._container = null
 	return renderer
@@ -435,7 +461,7 @@ export function render(element: ReactNode, options?: RendererOptions): RenderIns
 	// The createRenderer exit handler will also run, but it's idempotent
 	const quit = (code = 0) => {
 		renderer.stop()
-		process.exit(code)
+		requestExit(code)
 	}
 
 	return {

package/src/utils/flex-layout.ts

@@ -17,6 +17,13 @@ export interface FlexMeasureResult {
 /**
  * Measure children along a flex axis.
  * Returns cached sizes and total size.
+ *
+ * SwiftUI-style measure:
+ * 1. First measure all non-greedy children with full available space
+ * 2. Then measure greedy children with remaining space
+ *
+ * This ensures non-greedy elements always get their natural size,
+ * even when sibling greedy elements have large content.
  */
 export function measureFlex(
 	axis: FlexAxis,
@@ -25,26 +32,58 @@ export function measureFlex(
 	maxMain: number,
 	maxCross: number,
 ): FlexMeasureResult {
-	const sizes: Size[] = []
-	let totalMain = 0
+	const sizes: Size[] = new Array(children.length)
 	let maxChildCross = 0
+	const totalSpacing = Math.max(0, (children.length - 1) * spacing)
 
+	// Pass 1: Measure non-greedy children first with full available space
+	let nonGreedyTotal = 0
 	for (let i = 0; i < children.length; i++) {
 		const child = children[i]
-		const remainingMain = Math.max(0, maxMain - totalMain)
+		const greedyWeight = getGreedyWeight(child)
+
+		if (greedyWeight === 0) {
+			// Non-greedy: measure with full available space
+			const childMaxW = axis === "vertical" ? maxCross : maxMain
+			const childMaxH = axis === "vertical" ? maxMain : maxCross
+			const size = child.measure(childMaxW, childMaxH)
+			sizes[i] = size
+			nonGreedyTotal += mainSize(axis, size)
+			maxChildCross = Math.max(maxChildCross, crossSize(axis, size))
+		}
+	}
 
-		// Convert main/cross back to width/height for child measure
-		const childMaxW = axis === "vertical" ? maxCross : remainingMain
-		const childMaxH = axis === "vertical" ? remainingMain : maxCross
+	// Pass 2: Measure greedy children with remaining space
+	const remainingForGreedy = Math.max(0, maxMain - nonGreedyTotal - totalSpacing)
+	let totalGreedyWeight = 0
+	for (let i = 0; i < children.length; i++) {
+		const greedyWeight = getGreedyWeight(children[i])
+		if (greedyWeight > 0) totalGreedyWeight += greedyWeight
+	}
 
-		const size = child.measure(childMaxW, childMaxH)
-		sizes.push(size)
+	let greedyMeasuredTotal = 0
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i]
+		const greedyWeight = getGreedyWeight(child)
 
-		totalMain += mainSize(axis, size)
-		if (i < children.length - 1) totalMain += spacing
-		maxChildCross = Math.max(maxChildCross, crossSize(axis, size))
+		if (greedyWeight > 0) {
+			// Greedy: measure with proportional share of remaining space
+			const greedyMain = totalGreedyWeight > 0
+				? (remainingForGreedy * greedyWeight) / totalGreedyWeight
+				: remainingForGreedy
+			const childMaxW = axis === "vertical" ? maxCross : greedyMain
+			const childMaxH = axis === "vertical" ? greedyMain : maxCross
+			const size = child.measure(childMaxW, childMaxH)
+			sizes[i] = size
+			greedyMeasuredTotal += mainSize(axis, size)
+			maxChildCross = Math.max(maxChildCross, crossSize(axis, size))
+		}
 	}
 
+	// Calculate total main dimension
+	// Use actual measured sizes, not the constraint
+	let totalMain = nonGreedyTotal + greedyMeasuredTotal + totalSpacing
+
 	// Build total size from main/cross dimensions
 	const totalW = axis === "vertical" ? maxChildCross : totalMain
 	const totalH = axis === "vertical" ? totalMain : maxChildCross
@@ -68,6 +107,13 @@ function getGreedyWeight(child: HostInstance): number {
 
 /**
  * Layout children along a flex axis using cached sizes.
+ *
+ * SwiftUI-style layout:
+ * 1. Non-greedy children get their natural (measured) size
+ * 2. Greedy children share the REMAINING space proportionally
+ *
+ * This ensures non-greedy elements (like footers) are always visible,
+ * even when greedy elements (like scroll views) have overflowing content.
  */
 export function layoutFlex(
 	axis: FlexAxis,
@@ -78,23 +124,29 @@ export function layoutFlex(
 	alignment: FlexAlignment,
 	stretchCross: boolean,
 ): void {
-	// Calculate totals
-	let totalNaturalMain = 0
-	let totalGreedyWeight = 0
 	const totalSpacing = Math.max(0, (children.length - 1) * spacing)
+	const availableMain = mainDim(axis, rect)
+
+	// Pass 1: Calculate space needed by non-greedy children
+	let nonGreedyTotal = 0
+	let totalGreedyWeight = 0
 
 	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)
-		totalGreedyWeight += getGreedyWeight(child)
+		const greedyWeight = getGreedyWeight(child)
+
+		if (greedyWeight === 0) {
+			// Non-greedy: use natural size
+			nonGreedyTotal += mainSize(axis, size)
+		}
+		totalGreedyWeight += greedyWeight
 	}
 
-	// Calculate extra space to distribute to greedy children
-	const availableMain = mainDim(axis, rect)
-	const extraSpace = Math.max(0, availableMain - totalNaturalMain - totalSpacing)
+	// Remaining space for greedy children (after non-greedy + spacing)
+	const remainingForGreedy = Math.max(0, availableMain - nonGreedyTotal - totalSpacing)
 
-	// Layout children
+	// Pass 2: Layout all children
 	let curMainPos = mainPos(axis, rect)
 	const crossStartPos = crossPos(axis, rect)
 	const crossDimVal = crossDim(axis, rect)
@@ -103,9 +155,16 @@ export function layoutFlex(
 		const child = children[i]
 		const size = cachedSizes[i] ?? { w: 0, h: 0 }
 		const greedyWeight = getGreedyWeight(child)
-		const greedyExtra = totalGreedyWeight > 0 ? (extraSpace * greedyWeight) / totalGreedyWeight : 0
 
-		const childMainDim = mainSize(axis, size) + greedyExtra
+		let childMainDim: number
+		if (greedyWeight > 0 && totalGreedyWeight > 0) {
+			// Greedy: gets proportional share of remaining space
+			childMainDim = (remainingForGreedy * greedyWeight) / totalGreedyWeight
+		} else {
+			// Non-greedy: gets natural size
+			childMainDim = mainSize(axis, size)
+		}
+
 		const childCrossDim = crossSize(axis, size)
 
 		// Calculate cross position based on alignment