@effect-tui/react 0.2.1 → 0.2.3

package/package.json

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

package/src/components/MultilineTextInput.tsx

@@ -335,7 +335,7 @@ export function MultilineTextInput({
 		if (newRow !== cursor.row || newCol !== cursor.col) {
 			setCursor({ row: newRow, col: newCol })
 		}
-	}, [value, logicalLines, layout.lines, cursor.row, cursor.col])
+	}, [logicalLines, layout.lines, cursor.row, cursor.col])
 
 	// Keep scroll in bounds (visual lines)
 	useEffect(() => {

package/src/components/text-editing.ts

@@ -219,7 +219,7 @@ export function deleteWordBackwardMultiline(state: MultilineState): EditResult<M
 		const match = matchPrevWord(prevLine)
 
 		if (match) {
-			const killed = match + "\n"
+			const killed = `${match}\n`
 			const newPrevLine = prevLine.slice(0, prevLine.length - match.length)
 			const newLines = [...lines]
 			newLines[cursor.row - 1] = newPrevLine + currentLine

package/src/console/ConsoleCapture.ts

@@ -2,9 +2,9 @@
 // Intercepts console.log/info/warn/error/debug and stores entries for display
 
 import { Console } from "node:console"
+import { EventEmitter } from "node:events"
 import { Writable } from "node:stream"
 import * as util from "node:util"
-import { EventEmitter } from "events"
 
 // ─────────────────────────────────────────────────────────────
 // Types

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" },
 	)
 
@@ -459,11 +451,11 @@ export function ConsolePopover({
 				{/* Title bar */}
 				<hstack height={1} bg={TITLE_BG}>
 					<text fg={feedback ? Colors.green : TITLE_FG} bg={TITLE_BG}>
-						{" " + titleText}
+						{` ${titleText}`}
 					</text>
 					<spacer />
 					<text fg={Colors.gray(14)} bg={TITLE_BG}>
-						{(mode === "inline" ? inlineHints : hints) + " "}
+						{`${mode === "inline" ? inlineHints : hints} `}
 					</text>
 				</hstack>
 

package/src/debug/DebugOverlay.ts

@@ -162,7 +162,7 @@ export class DebugOverlay {
 	// Key handling - returns true if event was consumed
 	// ─────────────────────────────────────────────────────────────
 
-	handleKey(key: KeyMsg, width: number, height: number): boolean {
+	handleKey(key: KeyMsg, _width: number, height: number): boolean {
 		// Ctrl+Shift+D - toggle overlay (handled even when hidden)
 		if (key.ctrl && key.shift && key.name === "char" && key.text === "d") {
 			this.toggle()
@@ -246,7 +246,7 @@ export class DebugOverlay {
 	// Mouse handling - returns true if event was consumed
 	// ─────────────────────────────────────────────────────────────
 
-	handleMouse(mouse: MouseMsg, width: number, height: number): boolean {
+	handleMouse(mouse: MouseMsg, _width: number, height: number): boolean {
 		if (!this._visible) return false
 
 		const popoverHeight = this.getPopoverHeight(height)

package/src/dev.tsx

@@ -9,12 +9,12 @@
  * - Remote control when EFFECT_TUI_REMOTE=1
  */
 
+import { readFileSync } from "node:fs"
+import { stat } from "node:fs/promises"
+import { dirname } from "node:path"
 import { Colors } from "@effect-tui/core"
 import * as watcher from "@parcel/watcher"
 import { globalValue } from "effect/GlobalValue"
-import { readFileSync } from "fs"
-import { stat } from "fs/promises"
-import { dirname } from "path"
 import React from "react"
 import { Overlay } from "./components/Overlay.js"
 import { ConsolePopover } from "./console/ConsolePopover.js"
@@ -363,10 +363,10 @@ function DevWrapper({
 		<ToastProvider>
 			<Overlay>
 				{/* Base - determines container size */}
-				<>
-					<ScreenshotHandler />
-					{children}
-				</>
+
+				<ScreenshotHandler />
+				{children}
+
 				{/* Overlays */}
 				{visible && (
 					<Overlay.Item alignment={{ v: "bottom" }}>

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/highlight.ts

@@ -1,5 +1,5 @@
 import type { Color } from "@effect-tui/core"
-import { type BundledLanguage, type BundledTheme, createHighlighter, type Highlighter } from "shiki"
+import { type BundledLanguage, type BundledTheme, createHighlighter, type Highlighter, type ThemedToken } from "shiki"
 
 export interface HighlightTokenStyle {
 	fg?: Color
@@ -48,17 +48,15 @@ export async function highlightCode(
 	}
 
 	const tokensResult = await highlighter.codeToTokens(code, { lang, theme })
-	const tokenLines = Array.isArray(tokensResult)
-		? tokensResult
-		: // Shiki v3 returns { tokens, theme }
-			(tokensResult as any).tokens
+	// Shiki v3 returns { tokens: ThemedToken[][], ... }
+	const tokenLines: ThemedToken[][] = tokensResult.tokens
 
 	if (!Array.isArray(tokenLines)) return toPlainLines(code)
 
-	return tokenLines.map((line: any[]) =>
+	return tokenLines.map((line) =>
 		line.map((token) => {
 			const style: HighlightTokenStyle = {}
-			if (token.color) style.fg = token.color
+			if (token.color) style.fg = token.color as Color
 			const fs = token.fontStyle ?? 0
 			// fontStyle bitmask is: 1 = Italic, 2 = Bold, 4 = Underline
 			if (fs & 2) style.bold = true

package/src/hmr-plugin.ts

@@ -12,8 +12,9 @@
  *   [run]
  *   preload = ["./node_modules/@effect-tui/react/dist/hmr-plugin.js"]
  */
+
+import { relative } from "node:path"
 import { plugin } from "bun"
-import { relative } from "path"
 
 // Only enable in development
 if (process.env.NODE_ENV !== "production") {

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/base.ts

@@ -54,7 +54,7 @@ export abstract class BaseHost implements HostInstance {
 
 	protected ctx: HostContext
 
-	constructor(type: string, props: CommonProps, ctx: HostContext) {
+	constructor(type: string, _props: CommonProps, ctx: HostContext) {
 		this.id = `${type}-${idCounter++}`
 		this.type = type
 		this.ctx = ctx

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/hosts/single-child.ts

@@ -1,4 +1,4 @@
-import type { CommonProps, HostContext, HostInstance } from "../reconciler/types.js"
+import type { HostInstance } from "../reconciler/types.js"
 import { BaseHost } from "./base.js"
 
 /**
@@ -8,10 +8,6 @@ import { BaseHost } from "./base.js"
 export abstract class SingleChildHost extends BaseHost {
 	private warned = false
 
-	constructor(type: string, props: CommonProps, ctx: HostContext) {
-		super(type, props, ctx)
-	}
-
 	protected get child(): HostInstance | null {
 		return this.children[0] ?? null
 	}

package/src/motion/hooks.ts

@@ -34,8 +34,11 @@ export function useMotionValue<T>(initial: T): MotionValue<T> {
  * If no renderer is passed, it will use the nearest RendererContext (useRenderer()).
  */
 export function useSpringRenderer(renderer?: { requestRender: () => void }) {
-	// Prefer explicit renderer; otherwise pull from context
-	const inferred = renderer ?? useRenderer()
+	// Always call useRenderer to satisfy rules of hooks
+	const contextRenderer = useRenderer()
+	// Prefer explicit renderer; otherwise use context
+	const inferred = renderer ?? contextRenderer
+
 	useEffect(() => {
 		if (!inferred) return
 		// Store the bound function so we can compare for cleanup

package/src/renderer/modes/InlineRenderer.ts

@@ -139,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) + ANSI.line.clear + "\r\n"
+			output += `${palette.sgr(0) + ANSI.line.clear}\r\n`
 			this.printedWidths[screenY] = 0
 		}
 

package/src/renderer/modes/StaticContentRenderer.ts

@@ -45,7 +45,7 @@ export class StaticContentRenderer {
 		for (let y = 0; y < staticSize.h; y++) {
 			const trimmedWidth = rowContentWidth(staticBuffer, y, frameWidth)
 			const line = emitRowWithReset(staticBuffer, this.palette, y, frameWidth, 0, trimmedWidth)
-			contentLines += line + "\n"
+			contentLines += `${line}\n`
 		}
 
 		// Cache the content for replay on resize

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 {