@effect-tui/react 0.6.3 → 0.8.0

package/jsx-runtime.ts

@@ -11,7 +11,7 @@ import type { OverlayProps } from "./src/hosts/overlay.js"
 import type { OverlayItemProps } from "./src/hosts/overlay-item.js"
 import type { ScrollProps } from "./src/hosts/scroll.js"
 import type { SpacerProps } from "./src/hosts/spacer.js"
-import type { StyledTextProps, TextProps } from "./src/hosts/text.js"
+import type { SpanProps, StyledTextProps, TextProps } from "./src/hosts/text.js"
 import type { VStackProps } from "./src/hosts/vstack.js"
 import type { ZStackProps } from "./src/hosts/zstack.js"
 
@@ -40,6 +40,7 @@ export declare namespace JSX {
 	export interface IntrinsicElements extends React.JSX.IntrinsicElements {
 		// Our custom TUI elements (override any React conflicts)
 		text: TextProps & { children?: React.ReactNode }
+		span: SpanProps & { children?: React.ReactNode }
 		styledtext: StyledTextProps
 		spacer: SpacerProps
 		vstack: VStackProps & { children?: React.ReactNode; __static?: boolean }

package/package.json

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

package/src/components/ListView.tsx

@@ -1,6 +1,7 @@
 // ListView.tsx — Virtualized selection-aware scrolling list
 import type { ReactNode } from "react"
-import { useEffect, useRef } from "react"
+import { useEffect, useLayoutEffect, useRef } from "react"
+import { useMouse } from "../hooks/use-mouse.js"
 import { useScroll } from "../hooks/use-scroll.js"
 
 export interface ListViewProps<T> {
@@ -22,6 +23,8 @@ export interface ListViewProps<T> {
 	emptyContent?: ReactNode
 	/** Number of extra items to render above/below viewport for smooth scrolling (default: 3) */
 	overscan?: number
+	/** Called when an item is clicked. Receives the item index. */
+	onItemClick?: (index: number) => void
 	/** @internal */
 	__debugViewportMeasured?: boolean
 	/** @internal */
@@ -78,6 +81,7 @@ export function ListView<T>({
 	showScrollbar = true,
 	emptyContent,
 	overscan = 3,
+	onItemClick,
 	__debugViewportMeasured,
 	__debugViewportSize,
 	__debugContentSize,
@@ -92,21 +96,48 @@ export function ListView<T>({
 	const viewportMeasured = __debugViewportMeasured ?? state.viewportMeasured
 	const viewportSize = __debugViewportSize ?? state.viewportSize
 
+	// Track scroll container rect for hit testing
+	const rectRef = useRef<{ x: number; y: number; w: number; h: number } | null>(null)
+
+	// Handle mouse clicks on items
+	useMouse(
+		(mouse) => {
+			if (!onItemClick || !rectRef.current) return
+			const { x, y, w, h } = rectRef.current
+
+			// Check if click is inside the scroll container
+			if (mouse.x < x || mouse.x >= x + w || mouse.y < y || mouse.y >= y + h) return
+
+			// Calculate which item was clicked
+			const localY = mouse.y - y
+			const contentY = localY + state.offset
+			const clickedIndex = Math.floor(contentY / itemHeight)
+
+			// Validate index is in range
+			if (clickedIndex >= 0 && clickedIndex < items.length) {
+				onItemClick(clickedIndex)
+			}
+		},
+		{ action: "press", button: "left" },
+	)
+
 	// Track previous selection to detect changes
 	const prevSelectedRef = useRef(selectedIndex)
 
 	// Scroll to keep selection visible when it changes
-	useEffect(() => {
+	// useLayoutEffect runs before paint - prevents visible "jump" when navigating
+	useLayoutEffect(() => {
 		if (selectedIndex !== prevSelectedRef.current) {
 			prevSelectedRef.current = selectedIndex
-			scrollToVisible(selectedIndex, itemHeight, scrollPadding)
+			// Pass totalHeight to avoid stale contentSize issues when jumping to end
+			scrollToVisible(selectedIndex, itemHeight, scrollPadding, totalHeight)
 		}
-	}, [selectedIndex, itemHeight, scrollPadding, scrollToVisible])
+	}, [selectedIndex, itemHeight, scrollPadding, scrollToVisible, totalHeight])
 
 	// Also scroll on initial render if selection is not 0
 	useEffect(() => {
 		if (selectedIndex > 0) {
-			scrollToVisible(selectedIndex, itemHeight, scrollPadding)
+			scrollToVisible(selectedIndex, itemHeight, scrollPadding, totalHeight)
 		}
 		// Only run on mount
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -117,25 +148,31 @@ export function ListView<T>({
 	}
 
 	// Calculate visible range for virtualization
+	// Before viewport is measured, render a reasonable default (not all items!)
 	const startIndex = viewportMeasured
 		? Math.max(0, Math.floor(state.offset / itemHeight) - overscan)
 		: 0
 	const endIndex = viewportMeasured
 		? Math.min(items.length, Math.ceil((state.offset + viewportSize) / itemHeight) + overscan)
-		: items.length
+		: Math.min(items.length, 50)
 
 	// Calculate spacer heights for virtual scrolling
-	const topSpacerHeight = viewportMeasured ? startIndex * itemHeight : 0
-	const bottomSpacerHeight = viewportMeasured ? Math.max(0, totalHeight - endIndex * itemHeight) : 0
+	const topSpacerHeight = startIndex * itemHeight
+	const bottomSpacerHeight = Math.max(0, totalHeight - endIndex * itemHeight)
 
 	// Get visible slice of items
 	const visibleItems = items.slice(startIndex, endIndex)
 
+	// Handler to track scroll container rect for click detection
+	const handleRect = (x: number, y: number, w: number, h: number) => {
+		rectRef.current = { x, y, w, h }
+	}
+
 	return (
-		<scroll {...scrollProps} showScrollbar={showScrollbar}>
+		<scroll {...scrollProps} showScrollbar={showScrollbar} onRect={handleRect}>
 			<vstack>
-				{/* Virtual top spacer */}
-				{topSpacerHeight > 0 && <spacer minHeight={topSpacerHeight} />}
+				{/* Virtual top spacer - always render to maintain structure */}
+				<box key="top-spacer" height={topSpacerHeight} />
 
 				{/* Render only visible items */}
 				{visibleItems.map((item, i) => {
@@ -147,8 +184,8 @@ export function ListView<T>({
 					)
 				})}
 
-				{/* Virtual bottom spacer */}
-				{bottomSpacerHeight > 0 && <spacer minHeight={bottomSpacerHeight} />}
+				{/* Virtual bottom spacer - always render to maintain structure */}
+				<box key="bottom-spacer" height={bottomSpacerHeight} />
 			</vstack>
 		</scroll>
 	)

package/src/console/ConsoleCapture.ts

@@ -1,5 +1,6 @@
 // Console capture singleton for TUI debugging
-// Intercepts console.log/info/warn/error/debug and stores entries for display
+// Intercepts console.log/info/warn/error/debug AND process.stdout/stderr.write
+// to capture ALL output including Effect.log, third-party libraries, etc.
 
 import { Console } from "node:console"
 import { EventEmitter } from "node:events"
@@ -105,17 +106,39 @@ export interface ConsoleCaptureEvents {
 	error: (entry: LogEntry) => void
 }
 
+// Store the ORIGINAL stdout/stderr write functions at module load time
+// This ensures the renderer can always write to the terminal even when capture is active
+const originalStdoutWrite = process.stdout.write.bind(process.stdout)
+const originalStderrWrite = process.stderr.write.bind(process.stderr)
+
 export class ConsoleCapture extends EventEmitter {
 	private entries: LogEntry[] = []
 	private originalConsole: typeof console | null = null
 	private active = false
 	private maxEntries: number
+	// Track if current write is from our console methods (to avoid double-capture)
+	private inConsoleMethod = false
+	// Track if current write is from the TUI renderer (should bypass capture)
+	private inRendererWrite = false
 
 	constructor(options?: { maxEntries?: number }) {
 		super()
 		this.maxEntries = options?.maxEntries ?? 1000
 	}
 
+	/**
+	 * Write directly to stdout, bypassing capture.
+	 * Used by the TUI renderer to output to terminal.
+	 */
+	writeToTerminal(data: string | Uint8Array): boolean {
+		this.inRendererWrite = true
+		try {
+			return originalStdoutWrite(data)
+		} finally {
+			this.inRendererWrite = false
+		}
+	}
+
 	get isActive(): boolean {
 		return this.active
 	}
@@ -134,6 +157,45 @@ export class ConsoleCapture extends EventEmitter {
 		// Store original console
 		this.originalConsole = globalThis.console
 
+		// Intercept stdout.write - captures Effect.log, printf, etc.
+		process.stdout.write = ((
+			chunk: Uint8Array | string,
+			encodingOrCallback?: BufferEncoding | ((err?: Error | null) => void),
+			callback?: (err?: Error | null) => void,
+		): boolean => {
+			// If this write is from renderer or console methods, pass through
+			if (this.inRendererWrite) {
+				return originalStdoutWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+			}
+			// Capture if not from our console methods (avoid double-capture)
+			if (!this.inConsoleMethod) {
+				const text = typeof chunk === "string" ? chunk : chunk.toString()
+				this.captureRawOutput(text, "stdout")
+			}
+			// Don't write to real stdout - TUI owns the terminal
+			const cb = typeof encodingOrCallback === "function" ? encodingOrCallback : callback
+			if (cb) cb()
+			return true
+		}) as typeof process.stdout.write
+
+		// Intercept stderr.write
+		process.stderr.write = ((
+			chunk: Uint8Array | string,
+			encodingOrCallback?: BufferEncoding | ((err?: Error | null) => void),
+			callback?: (err?: Error | null) => void,
+		): boolean => {
+			if (this.inRendererWrite) {
+				return originalStderrWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+			}
+			if (!this.inConsoleMethod) {
+				const text = typeof chunk === "string" ? chunk : chunk.toString()
+				this.captureRawOutput(text, "stderr")
+			}
+			const cb = typeof encodingOrCallback === "function" ? encodingOrCallback : callback
+			if (cb) cb()
+			return true
+		}) as typeof process.stdout.write
+
 		// Create mock streams for the new console
 		const mockStdout = new CapturedWritableStream()
 		const mockStderr = new CapturedWritableStream()
@@ -197,37 +259,95 @@ export class ConsoleCapture extends EventEmitter {
 	deactivate(): void {
 		if (!this.active || !this.originalConsole) return
 
+		// Restore original stdout/stderr write methods
+		process.stdout.write = originalStdoutWrite
+		process.stderr.write = originalStderrWrite
+
 		globalThis.console = this.originalConsole
 		this.originalConsole = null
 		this.active = false
 	}
 
 	private appendToConsole(level: LogLevel, args: unknown[]): void {
-		const location = captureCallerLocation()
-		const message = util.format(...args)
+		// Mark that we're in a console method to avoid double-capture from stdout/stderr
+		this.inConsoleMethod = true
+		try {
+			const location = captureCallerLocation()
+			const message = util.format(...args)
+
+			const entry: LogEntry = {
+				timestamp: new Date(),
+				level,
+				message,
+				args,
+				location,
+			}
+
+			// Enforce max entries
+			if (this.entries.length >= this.maxEntries) {
+				this.entries.shift()
+			}
+			this.entries.push(entry)
+
+			// Emit events
+			this.emit("entry", entry)
+			// Only emit error event if there are listeners (avoid unhandled error exception)
+			if (level === "ERROR" && this.listenerCount("error") > 0) {
+				this.emit("error", entry)
+			}
+		} finally {
+			this.inConsoleMethod = false
+		}
+	}
+
+	// Capture raw output from stdout/stderr (for Effect.log, third-party libs, etc.)
+	private captureRawOutput(text: string, stream: "stdout" | "stderr"): void {
+		// Skip empty output
+		if (!text.trim()) return
+
+		// Parse Effect log format: timestamp level fiber message
+		// Example: "timestamp=2024-01-15T10:30:00.000Z level=INFO fiber=#0 message=Hello"
+		// Or the pretty format with ANSI colors
+		const level = this.detectLogLevel(text, stream)
+
+		// Strip ANSI codes for the stored message
+		const cleanText = text.replace(/\x1b\[[0-9;]*m/g, "").trim()
 
 		const entry: LogEntry = {
 			timestamp: new Date(),
 			level,
-			message,
-			args,
-			location,
+			message: cleanText,
+			args: [text], // Keep original with ANSI for potential future use
+			// No location for raw output - we can't get stack trace here
 		}
 
-		// Enforce max entries
 		if (this.entries.length >= this.maxEntries) {
 			this.entries.shift()
 		}
 		this.entries.push(entry)
 
-		// Emit events
 		this.emit("entry", entry)
-		// Only emit error event if there are listeners (avoid unhandled error exception)
 		if (level === "ERROR" && this.listenerCount("error") > 0) {
 			this.emit("error", entry)
 		}
 	}
 
+	// Detect log level from raw output text
+	private detectLogLevel(text: string, stream: "stdout" | "stderr"): LogLevel {
+		const upperText = text.toUpperCase()
+
+		// Effect log format detection
+		if (upperText.includes("LEVEL=ERROR") || upperText.includes("[ERROR]")) return "ERROR"
+		if (upperText.includes("LEVEL=WARN") || upperText.includes("[WARN]")) return "WARN"
+		if (upperText.includes("LEVEL=INFO") || upperText.includes("[INFO]")) return "INFO"
+		if (upperText.includes("LEVEL=DEBUG") || upperText.includes("[DEBUG]")) return "DEBUG"
+
+		// stderr is typically error output
+		if (stream === "stderr") return "ERROR"
+
+		return "LOG"
+	}
+
 	// Also expose write to original console for debugging the capture itself
 	writeToOriginal(level: LogLevel, ...args: unknown[]): void {
 		if (!this.originalConsole) return
@@ -264,6 +384,28 @@ export function getConsoleCapture(): ConsoleCapture {
 	return instance
 }
 
+/**
+ * Write directly to the terminal, bypassing console capture.
+ * Used by the TUI renderer to output to terminal without being captured.
+ */
+export function writeToTerminal(data: string | Uint8Array): boolean {
+	return originalStdoutWrite(data)
+}
+
+/**
+ * Create a wrapped stdout that bypasses console capture.
+ * Returns a write function compatible with TuiWriteStream.
+ */
+export function createTerminalWriter(): typeof process.stdout.write {
+	return ((
+		chunk: Uint8Array | string,
+		encodingOrCallback?: BufferEncoding | ((err?: Error | null) => void),
+		callback?: (err?: Error | null) => void,
+	): boolean => {
+		return originalStdoutWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+	}) as typeof process.stdout.write
+}
+
 // Clean up on process exit
 process.on("exit", () => {
 	if (instance?.isActive) {

package/src/hooks/use-scroll.ts

@@ -104,9 +104,9 @@ export interface ScrollState {
 export interface UseScrollOptions {
 	/** Scroll axis: "vertical" (default) or "horizontal" */
 	axis?: "vertical" | "horizontal"
-	/** Initial viewport size override (useful for tests) */
+	/** @internal Initial viewport size override (useful for tests) */
 	initialViewportSize?: number
-	/** Initial content size override (useful for tests) */
+	/** @internal Initial content size override (useful for tests) */
 	initialContentSize?: number
 	/** Initial scroll offset */
 	initialOffset?: number
@@ -141,14 +141,16 @@ export interface UseScrollReturn {
 	 * @param position - The position (row/col index or pixel offset)
 	 * @param itemSize - Size of each item (default: 1 for row-based lists)
 	 * @param padding - Extra padding around the item (default: 0)
+	 * @param totalSize - Optional known total content size (avoids stale state issues)
 	 */
-	scrollToVisible: (position: number, itemSize?: number, padding?: number) => void
+	scrollToVisible: (position: number, itemSize?: number, padding?: number, totalSize?: number) => void
 	/** Props to spread on <scroll> element */
 	scrollProps: {
 		offset: number
 		axis: "vertical" | "horizontal"
 		onContentSize: (width: number, height: number) => void
 		onViewportSize: (width: number, height: number) => void
+		onRect?: (x: number, y: number, w: number, h: number) => void
 	}
 }
 
@@ -340,10 +342,12 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	// Scroll to make a position visible (for keeping selection in view)
 	// Uses refs to avoid changing on every scroll - only triggers when selection changes
 	const scrollToVisible = useCallback(
-		(position: number, itemSize = 1, padding = 0) => {
+		(position: number, itemSize = 1, padding = 0, totalSize?: number) => {
 			const currentOffset = offsetRef.current
 			const itemStart = position * itemSize
 			const itemEnd = itemStart + itemSize
+			// Use provided totalSize if available (more accurate than potentially stale contentSize)
+			const effectiveContentSize = totalSize ?? contentSize
 
 			// If item is above viewport, scroll up to show it
 			if (itemStart < currentOffset + padding) {
@@ -351,7 +355,7 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 			}
 			// If item is below viewport, scroll down to show it
 			else if (itemEnd > currentOffset + viewportSize - padding) {
-				const currentMaxOffset = Math.max(0, contentSize - viewportSize)
+				const currentMaxOffset = Math.max(0, effectiveContentSize - viewportSize)
 				setOffset(Math.min(currentMaxOffset, itemEnd - viewportSize + padding))
 			}
 		},

package/src/hosts/index.ts

@@ -8,7 +8,7 @@ import { OverlayHost } from "./overlay.js"
 import { OverlayItemHost } from "./overlay-item.js"
 import { ScrollHost } from "./scroll.js"
 import { SpacerHost } from "./spacer.js"
-import { RawTextHost, StyledTextHost, TextHost } from "./text.js"
+import { RawTextHost, SpanHost, StyledTextHost, TextHost } from "./text.js"
 import { VStackHost } from "./vstack.js"
 import { ZStackHost } from "./zstack.js"
 
@@ -22,7 +22,17 @@ export { OverlayItemHost, type OverlayItemProps } from "./overlay-item.js"
 export { ScrollHost, type ScrollProps } from "./scroll.js"
 export { SingleChildHost } from "./single-child.js"
 export { SpacerHost, type SpacerProps } from "./spacer.js"
-export { RawTextHost, StyledTextHost, TextHost, type StyledSpan, type StyledTextProps, type TextProps } from "./text.js"
+export {
+	RawTextHost,
+	SpanHost,
+	StyledTextHost,
+	TextHost,
+	type SpanProps,
+	type SpanStyle,
+	type StyledSpan,
+	type StyledTextProps,
+	type TextProps,
+} from "./text.js"
 export { VStackHost, type VStackProps } from "./vstack.js"
 export { ZStackHost, type ZStackProps } from "./zstack.js"
 
@@ -30,6 +40,7 @@ export { ZStackHost, type ZStackProps } from "./zstack.js"
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const hostRegistry: Record<string, new (props: any, ctx: HostContext) => BaseHost> = {
 	text: TextHost,
+	span: SpanHost,
 	styledtext: StyledTextHost,
 	spacer: SpacerHost,
 	vstack: VStackHost,

package/src/hosts/scroll.ts

@@ -28,6 +28,8 @@ export interface ScrollProps extends CommonProps {
 	onViewportSize?: (width: number, height: number) => void
 	/** Called when effective offset changes (for syncing with useScroll when sticky adjusts) */
 	onEffectiveOffset?: (offset: number) => void
+	/** Called when layout rect changes (for hit testing) */
+	onRect?: (x: number, y: number, w: number, h: number) => void
 }
 
 export class ScrollHost extends SingleChildHost {
@@ -44,6 +46,7 @@ export class ScrollHost extends SingleChildHost {
 	onContentSize?: (width: number, height: number) => void
 	onViewportSize?: (width: number, height: number) => void
 	onEffectiveOffset?: (offset: number) => void
+	onRect?: (x: number, y: number, w: number, h: number) => void
 
 	// Measured content dimensions (full size before clipping)
 	private contentWidth = 0
@@ -53,6 +56,8 @@ export class ScrollHost extends SingleChildHost {
 	private lastViewportH = 0
 	private lastReportedContentW = 0
 	private lastReportedContentH = 0
+	private lastRectX = -1
+	private lastRectY = -1
 	// Track if we were at end (for sticky behavior)
 	private wasAtEnd = true
 	// Effective offset after sticky adjustment (used for rendering)
@@ -113,6 +118,13 @@ export class ScrollHost extends SingleChildHost {
 			this.onViewportSize?.(rect.w, rect.h)
 		}
 
+		// Report rect if position changed (for hit testing)
+		if (rect.x !== this.lastRectX || rect.y !== this.lastRectY) {
+			this.lastRectX = rect.x
+			this.lastRectY = rect.y
+			this.onRect?.(rect.x, rect.y, rect.w, rect.h)
+		}
+
 		const child = this.child
 		if (!child) return
 
@@ -260,5 +272,6 @@ export class ScrollHost extends SingleChildHost {
 		this.onContentSize = props.onContentSize as ScrollProps["onContentSize"]
 		this.onViewportSize = props.onViewportSize as ScrollProps["onViewportSize"]
 		this.onEffectiveOffset = props.onEffectiveOffset as ScrollProps["onEffectiveOffset"]
+		this.onRect = props.onRect as ScrollProps["onRect"]
 	}
 }