@effect-tui/react 0.6.2 → 0.7.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.2",
+	"version": "0.7.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.2",
+		"@effect-tui/core": "^0.7.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,14 @@ 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 */
+	__debugViewportSize?: number
+	/** @internal */
+	__debugContentSize?: number
 }
 
 /**
@@ -72,27 +81,63 @@ export function ListView<T>({
 	showScrollbar = true,
 	emptyContent,
 	overscan = 3,
+	onItemClick,
+	__debugViewportMeasured,
+	__debugViewportSize,
+	__debugContentSize,
 }: ListViewProps<T>) {
+	const totalHeight = items.length * itemHeight
 	const { state, scrollProps, scrollToVisible } = useScroll({
 		enableKeyboard: false, // Parent handles keyboard for selection
 		enableMouseWheel: true, // Free scroll with wheel
+		initialViewportSize: __debugViewportSize,
+		initialContentSize: __debugContentSize,
 	})
+	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
@@ -103,9 +148,13 @@ export function ListView<T>({
 	}
 
 	// Calculate visible range for virtualization
-	const totalHeight = items.length * itemHeight
-	const startIndex = Math.max(0, Math.floor(state.offset / itemHeight) - overscan)
-	const endIndex = Math.min(items.length, Math.ceil((state.offset + state.viewportSize) / itemHeight) + overscan)
+	// 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)
+		: Math.min(items.length, 50)
 
 	// Calculate spacer heights for virtual scrolling
 	const topSpacerHeight = startIndex * itemHeight
@@ -114,11 +163,16 @@ export function ListView<T>({
 	// 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) => {
@@ -130,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/hooks/use-scroll.ts

@@ -91,6 +91,8 @@ export interface ScrollState {
 	maxOffset: number
 	/** Viewport height (or width for horizontal) */
 	viewportSize: number
+	/** Whether viewport size has been measured by the host */
+	viewportMeasured: boolean
 	/** Total content size */
 	contentSize: number
 	/** Whether we're at the start edge */
@@ -102,6 +104,10 @@ export interface ScrollState {
 export interface UseScrollOptions {
 	/** Scroll axis: "vertical" (default) or "horizontal" */
 	axis?: "vertical" | "horizontal"
+	/** @internal Initial viewport size override (useful for tests) */
+	initialViewportSize?: number
+	/** @internal Initial content size override (useful for tests) */
+	initialContentSize?: number
 	/** Initial scroll offset */
 	initialOffset?: number
 	/** Enable keyboard navigation (default: true) */
@@ -135,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
 	}
 }
 
@@ -167,6 +175,8 @@ export interface UseScrollReturn {
 export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	const {
 		axis = "vertical",
+		initialViewportSize,
+		initialContentSize,
 		initialOffset = 0,
 		enableKeyboard = true,
 		enableMouseWheel = true,
@@ -177,12 +187,14 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	} = options
 
 	const { width: termWidth, height: termHeight } = useTerminalSize()
+	const baseViewportSize = initialViewportSize ?? (axis === "vertical" ? termHeight : termWidth)
 
 	// Scroll state
 	const [offset, setOffsetRaw] = useState(initialOffset)
-	const [contentSize, setContentSize] = useState(0)
+	const [contentSize, setContentSize] = useState(initialContentSize ?? 0)
 	// Use terminal size as initial estimate, but scroll component will report actual size
-	const [viewportSize, setViewportSize] = useState(axis === "vertical" ? termHeight : termWidth)
+	const [viewportSize, setViewportSize] = useState(baseViewportSize)
+	const [viewportMeasured, setViewportMeasured] = useState(false)
 
 	// Refs for sticky scroll behavior
 	const wasAtEndRef = useRef(sticky)
@@ -267,6 +279,7 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		(width: number, height: number) => {
 			const newSize = axis === "vertical" ? height : width
 			setViewportSize(newSize)
+			setViewportMeasured(true)
 		},
 		[axis],
 	)
@@ -329,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) {
@@ -340,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))
 			}
 		},
@@ -351,6 +366,7 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		offset,
 		maxOffset,
 		viewportSize,
+		viewportMeasured,
 		contentSize,
 		atStart,
 		atEnd,

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"]
 	}
 }

package/src/hosts/text.ts

@@ -28,33 +28,164 @@ export class TextHost extends BaseHost {
 	private cachedWidth = 0
 	// Cache content to avoid rescanning children each frame
 	private cachedContent: string | null = null
+	// Cache for styled mode
+	private cachedStyledLines: StyledSpan[][] | null = null
+	private hasSpans = false
 
 	constructor(props: TextProps, ctx: HostContext) {
 		super("text", props, ctx)
 		this.updateProps(props)
 	}
 
-	/** Get text content from RawTextHost children (cached between measure and render) */
+	/** Check if we have SpanHost children (requires styled rendering) */
+	private checkForSpans(): boolean {
+		return this.children.some((c) => c instanceof SpanHost)
+	}
+
+	/** Get text content from all children including SpanHost (cached between measure and render) */
 	private getContent(): string {
 		if (this.cachedContent !== null) {
 			return this.cachedContent
 		}
-		this.cachedContent = this.children
-			.filter((c): c is RawTextHost => c instanceof RawTextHost)
-			.map((c) => c.content)
-			.join("")
+		const parts: string[] = []
+		for (const child of this.children) {
+			if (child instanceof RawTextHost) {
+				parts.push(child.content)
+			} else if (child instanceof SpanHost) {
+				parts.push(child.getContent())
+			}
+		}
+		this.cachedContent = parts.join("")
 		return this.cachedContent
 	}
 
+	/** Collect children as styled spans for multi-style rendering */
+	private collectSpans(): StyledSpan[] {
+		const spans: StyledSpan[] = []
+
+		for (const child of this.children) {
+			if (child instanceof RawTextHost) {
+				if (child.content) {
+					spans.push({
+						text: child.content,
+						// Inherit TextHost's styles
+						fg: this.fg,
+						bg: this.bg,
+						bold: this.bold,
+						italic: this.italic,
+						underline: this.underline,
+					})
+				}
+			} else if (child instanceof SpanHost) {
+				const content = child.getContent()
+				if (content) {
+					spans.push({
+						text: content,
+						// Span's styles, falling back to TextHost's
+						fg: child.fg ?? this.fg,
+						bg: child.bg ?? this.bg,
+						bold: child.bold || this.bold,
+						italic: child.italic || this.italic,
+						underline: child.underline || this.underline,
+					})
+				}
+			}
+		}
+
+		return spans
+	}
+
+	/** Wrap spans into lines, breaking at word boundaries (same logic as StyledTextHost) */
+	private wrapSpans(spans: StyledSpan[], maxWidth: number): StyledSpan[][] {
+		const lines: StyledSpan[][] = [[]]
+		let lineWidth = 0
+
+		for (const span of spans) {
+			// Split span text into words (keeping whitespace as separate tokens)
+			const tokens = span.text.split(/(\s+)/)
+
+			for (const token of tokens) {
+				if (!token) continue
+				const tokenWidth = displayWidth(token)
+				const isWhitespace = /^\s+$/.test(token)
+
+				if (lineWidth + tokenWidth <= maxWidth) {
+					// Token fits on current line
+					lines[lines.length - 1].push({ ...span, text: token })
+					lineWidth += tokenWidth
+				} else if (isWhitespace) {
+					// Skip whitespace at line break
+					continue
+				} else if (tokenWidth <= maxWidth) {
+					// Start new line with this token
+					lines.push([{ ...span, text: token }])
+					lineWidth = tokenWidth
+				} else {
+					// Token is longer than maxWidth - break by character
+					let charLine = ""
+					let charLineWidth = 0
+					for (const ch of token) {
+						const chWidth = displayWidth(ch)
+						if (lineWidth + charLineWidth + chWidth > maxWidth && (charLine || lineWidth > 0)) {
+							if (charLine) {
+								lines[lines.length - 1].push({ ...span, text: charLine })
+							}
+							lines.push([])
+							lineWidth = 0
+							charLine = ch
+							charLineWidth = chWidth
+						} else {
+							charLine += ch
+							charLineWidth += chWidth
+						}
+					}
+					if (charLine) {
+						lines[lines.length - 1].push({ ...span, text: charLine })
+						lineWidth += charLineWidth
+					}
+				}
+			}
+		}
+
+		// Remove empty lines at the end
+		while (lines.length > 0 && lines[lines.length - 1].length === 0) {
+			lines.pop()
+		}
+
+		return lines.length > 0 ? lines : [[]]
+	}
+
 	/** Invalidate content cache when children change */
 	private invalidateContent(): void {
 		this.cachedContent = null
 		this.cachedLines = null
+		this.cachedStyledLines = null
 	}
 
 	measure(maxW: number, maxH: number): Size {
 		// Invalidate content cache at start of measure (will be recomputed on demand)
 		this.invalidateContent()
+		this.hasSpans = this.checkForSpans()
+
+		// Styled mode: use span-aware rendering
+		if (this.hasSpans) {
+			const spans = this.collectSpans()
+			if (this.wrap) {
+				this.cachedStyledLines = this.wrapSpans(spans, maxW)
+				this.cachedWidth = maxW
+				const h = Math.min(this.cachedStyledLines.length, maxH)
+				const w = this.cachedStyledLines.reduce(
+					(max, line) => Math.max(max, line.reduce((sum, span) => sum + displayWidth(span.text), 0)),
+					0,
+				)
+				return { w, h }
+			}
+			// Non-wrap styled mode
+			const totalWidth = spans.reduce((sum, span) => sum + displayWidth(span.text), 0)
+			return { w: Math.min(totalWidth, maxW), h: 1 }
+		}
+
+		// Simple mode: single style for all content
 		const content = this.getContent()
 		const rawLines = content.split("\n")
 
@@ -145,6 +276,37 @@ export class TextHost extends BaseHost {
 		const { value: bgValue, styleId: bgStyleId } = resolveInheritedBgStyle(palette, this.bg, this.parent)
 		const inheritedBg = this.bg ?? getInheritedBg(this.parent)
 
+		// Styled mode: render with per-span styles
+		if (this.hasSpans) {
+			const spans = this.collectSpans()
+			const lines =
+				this.wrap && this.cachedStyledLines && this.cachedWidth === this.rect.w
+					? this.cachedStyledLines
+					: this.wrap
+						? this.wrapSpans(spans, this.rect.w)
+						: [spans]
+
+			for (let y = 0; y < Math.min(lines.length, this.rect.h); y++) {
+				let x = this.rect.x
+				for (const span of lines[y]) {
+					const spanStyleId = styleIdFromProps(palette, {
+						fg: span.fg ?? this.fg,
+						bg: span.bg ?? inheritedBg,
+						bold: span.bold,
+						italic: span.italic,
+						underline: span.underline,
+					})
+					const availableWidth = this.rect.w - (x - this.rect.x)
+					if (availableWidth <= 0) break
+					const textWidth = Math.min(displayWidth(span.text), availableWidth)
+					buffer.drawText(x, this.rect.y + y, span.text, spanStyleId, textWidth)
+					x += displayWidth(span.text)
+				}
+			}
+			return
+		}
+
+		// Simple mode: single style for all content
 		const styleId = styleIdFromProps(palette, {
 			fg: this.fg,
 			bg: inheritedBg,
@@ -236,6 +398,81 @@ export class RawTextHost extends BaseHost {
 	}
 }
 
+// ============================================================================
+// Span Host - inline styled text within a TextHost
+// ============================================================================
+
+/** Reusable style object for spans */
+export interface SpanStyle {
+	fg?: Color
+	bg?: Color
+	bold?: boolean
+	italic?: boolean
+	underline?: boolean
+	inverse?: boolean
+}
+
+export interface SpanProps extends CommonProps {
+	fg?: Color
+	bg?: Color
+	bold?: boolean
+	italic?: boolean
+	underline?: boolean
+	inverse?: boolean
+	/** Reusable style object. Individual props override textStyle values. */
+	textStyle?: SpanStyle
+}
+
+/**
+ * Host for inline styled spans within a TextHost.
+ * Usage: <text>Hello <span fg={GREEN}>World</span></text>
+ *
+ * Does not render independently - parent TextHost handles rendering.
+ */
+export class SpanHost extends BaseHost {
+	fg?: Color
+	bg?: Color
+	bold = false
+	italic = false
+	underline = false
+	inverse = false
+
+	constructor(props: SpanProps, ctx: HostContext) {
+		super("span", props, ctx)
+		this.updateProps(props)
+	}
+
+	/** Get text content from RawTextHost children */
+	getContent(): string {
+		return this.children
+			.filter((c): c is RawTextHost => c instanceof RawTextHost)
+			.map((c) => c.content)
+			.join("")
+	}
+
+	measure(_maxW: number, _maxH: number): Size {
+		// Span doesn't measure independently - parent TextHost handles layout
+		return { w: 0, h: 0 }
+	}
+
+	render(_buffer: CellBuffer, _palette: Palette): void {
+		// Span doesn't render independently - parent TextHost handles rendering
+	}
+
+	override updateProps(props: Record<string, unknown>): void {
+		super.updateProps(props)
+		const textStyle = props.textStyle as SpanStyle | undefined
+
+		// Individual props override textStyle object
+		this.fg = props.fg !== undefined ? (props.fg as Color) : textStyle?.fg
+		this.bg = props.bg !== undefined ? (props.bg as Color) : textStyle?.bg
+		this.bold = props.bold !== undefined ? Boolean(props.bold) : Boolean(textStyle?.bold)
+		this.italic = props.italic !== undefined ? Boolean(props.italic) : Boolean(textStyle?.italic)
+		this.underline = props.underline !== undefined ? Boolean(props.underline) : Boolean(textStyle?.underline)
+		this.inverse = props.inverse !== undefined ? Boolean(props.inverse) : Boolean(textStyle?.inverse)
+	}
+}
+
 // ============================================================================
 // Styled Text Host - for inline formatted text that wraps as a unit
 // ============================================================================

package/src/index.ts

@@ -59,7 +59,7 @@ export type { CanvasProps, DrawContext } from "./hosts/canvas.js"
 export type { HStackProps } from "./hosts/hstack.js"
 export type { ScrollProps } from "./hosts/scroll.js"
 export type { SpacerProps } from "./hosts/spacer.js"
-export type { TextProps } from "./hosts/text.js"
+export type { SpanProps, SpanStyle, TextProps } from "./hosts/text.js"
 export type { VStackProps } from "./hosts/vstack.js"
 export type { ZStackProps } from "./hosts/zstack.js"
 export type { ColorInput, MotionValue, RGBA, SpringOptions } from "./motion/index.js"

package/src/remote/Procedures.ts

@@ -46,5 +46,23 @@ const Info = Rpc.make("Info", {
 	}),
 })
 
+// Log entry schema
+const LogEntrySchema = Schema.Struct({
+	timestamp: Schema.String,
+	level: Schema.String,
+	message: Schema.String,
+	file: Schema.optional(Schema.String),
+	line: Schema.optional(Schema.Number),
+})
+
+// GetLogs - get accumulated console logs
+const GetLogs = Rpc.make("GetLogs", {
+	payload: { limit: Schema.optional(Schema.Number) },
+	success: Schema.Struct({
+		entries: Schema.Array(LogEntrySchema),
+		total: Schema.Number,
+	}),
+})
+
 // Group all RPCs together
-export class TuiRpcs extends RpcGroup.make(Screenshot, SendKey, Paste, Resize, Info) {}
+export class TuiRpcs extends RpcGroup.make(Screenshot, SendKey, Paste, Resize, Info, GetLogs) {}