@effect-tui/react 0.6.3 → 0.8.0

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) {}

package/src/remote/Router.ts

@@ -4,6 +4,15 @@ import type { KeyMsg } from "@effect-tui/core"
 import { Context, Effect, type Layer } from "effect"
 import { TuiRpcs } from "./Procedures.js"
 
+// Log entry result type
+export interface LogEntryResult {
+	timestamp: string
+	level: string
+	message: string
+	file?: string
+	line?: number
+}
+
 // Service interface for the TUI session
 export interface TuiSessionImpl {
 	readonly getScreenshot: () => string
@@ -17,6 +26,7 @@ export interface TuiSessionImpl {
 		entryPath?: string
 		name?: string
 	}
+	readonly getLogEntries: (limit?: number) => { entries: LogEntryResult[]; total: number }
 }
 
 export class TuiSession extends Context.Tag("TuiSession")<TuiSession, TuiSessionImpl>() {}
@@ -27,7 +37,8 @@ export const HandlersLive: Layer.Layer<
 	| Rpc.Handler<"SendKey">
 	| Rpc.Handler<"Paste">
 	| Rpc.Handler<"Resize">
-	| Rpc.Handler<"Info">,
+	| Rpc.Handler<"Info">
+	| Rpc.Handler<"GetLogs">,
 	never,
 	TuiSession
 > = TuiRpcs.toLayer(
@@ -55,6 +66,8 @@ export const HandlersLive: Layer.Layer<
 			Resize: ({ width, height }) => Effect.sync(() => session.dispatchResize(width, height)),
 
 			Info: () => Effect.sync(() => session.getInfo()),
+
+			GetLogs: ({ limit }) => Effect.sync(() => session.getLogEntries(limit)),
 		}
 	}),
 )

package/src/remote/index.ts

@@ -13,8 +13,9 @@ export { getSocketPath, makeServerLayer } from "./Server.js"
 
 import * as fs from "node:fs"
 import { Effect, Exit, Layer, Scope } from "effect"
+import { getConsoleCapture } from "../console/ConsoleCapture.js"
 import type { TuiRenderer } from "../renderer-types.js"
-import type { TuiSessionImpl } from "./Router.js"
+import type { LogEntryResult, TuiSessionImpl } from "./Router.js"
 import { getSocketPath, makeServerLayer } from "./Server.js"
 
 export interface EnableRemoteOptions {
@@ -76,6 +77,19 @@ export function enableRemote(renderer: TuiRenderer, options?: EnableRemoteOption
 			entryPath: opts.entryPath,
 			name,
 		}),
+		getLogEntries: (limit?: number): { entries: LogEntryResult[]; total: number } => {
+			const all = getConsoleCapture().getEntries()
+			const total = all.length
+			const sliced = limit ? all.slice(-limit) : all
+			const entries: LogEntryResult[] = sliced.map((e) => ({
+				timestamp: e.timestamp.toISOString(),
+				level: e.level,
+				message: e.message,
+				file: e.location?.file,
+				line: e.location?.line,
+			}))
+			return { entries, total }
+		},
 	}
 
 	// Build and run the server layer

package/src/renderer.ts

@@ -1,6 +1,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 { createTerminalWriter } from "./console/ConsoleCapture.js"
 import { DEFAULT_FPS } from "./constants.js"
 import { requestExit } from "./exit.js"
 import * as Prof from "./profiler.js"
@@ -30,7 +31,14 @@ type HandledSignal = "SIGINT" | "SIGTERM"
 
 export function createRenderer(options?: RendererOptions): TuiRenderer {
 	const fps = options?.fps ?? DEFAULT_FPS
-	const stdout: TuiWriteStream = options?.stdout ?? process.stdout
+	// Use custom stdout if provided, otherwise use process.stdout with bypassed capture
+	const baseStdout: TuiWriteStream = options?.stdout ?? process.stdout
+	// Wrap write method to bypass console capture (so Effect.log etc. don't corrupt TUI)
+	const terminalWrite = createTerminalWriter()
+	const stdout: TuiWriteStream = {
+		...baseStdout,
+		write: terminalWrite,
+	} as TuiWriteStream
 	const stdin: TuiReadStream = options?.stdin ?? process.stdin
 	const mode = options?.mode ?? "fullscreen"
 	const exitOnCtrlC = options?.exitOnCtrlC ?? true

package/src/test/render-tui.ts

@@ -71,9 +71,9 @@ export function renderTUI(element: ReactElement, options?: RenderTUIOptions): Re
 	const root = createRoot(renderer)
 	let bump: (() => void) | null = null
 	const Harness = ({ children }: { children: ReactElement }) => {
-		const [, setTick] = useState(0)
+		const [tick, setTick] = useState(0)
 		bump = () => setTick((value) => value + 1)
-		return children
+		return React.cloneElement(children, { __renderTick: tick } as Record<string, unknown>)
 	}
 
 	const harnessed = React.createElement(Harness, null, element)