@effect-tui/react 0.16.0 → 2.0.0

package/src/hosts/text.ts

@@ -1,7 +1,14 @@
 import { type CellBuffer, type Color, displayWidth, type Palette } from "@effect-tui/core"
 import type { ColorMotionValue } from "../motion/color-motion-value.js"
 import type { CommonProps, HostContext, HostInstance, Rect, Size } from "../reconciler/types.js"
-import { resolveInheritedBgStyle, styleIdFromProps, wrapSpans, wrapText } from "../utils/index.js"
+import {
+	resolveInheritedBgStyle,
+	splitSpansByNewline,
+	spansDisplayWidth,
+	styleIdFromProps,
+	wrapSpansByLine,
+	wrapText,
+} from "../utils/index.js"
 import { BaseHost, getInheritedBg } from "./base.js"
 import { LeafHost } from "./leaf.js"
 
@@ -50,6 +57,7 @@ export class TextHost extends BaseHost {
 	// Cache wrapped lines between measure() and render()
 	private cachedLines: string[] | null = null
 	private cachedWidth = 0
+	private cachedStyledWrap = false
 	// Cache content to avoid rescanning children each frame
 	private cachedContent: string | null = null
 	// Cache for styled mode
@@ -57,7 +65,6 @@ export class TextHost extends BaseHost {
 	private cachedSpans: StyledSpan[] | null = null
 	private hasSpans = false
 	private explicitSpans: StyledSpan[] | null = null
-	private prepared = false
 
 	constructor(props: TextProps, ctx: HostContext) {
 		super("text", props, ctx)
@@ -95,15 +102,6 @@ export class TextHost extends BaseHost {
 				if (child.content) {
 					spans.push({
 						text: child.content,
-						// Inherit TextHost's styles
-						fg: this.fg,
-						bg: this.bg,
-						bold: this.bold,
-						dimmed: this.dimmed,
-						italic: this.italic,
-						underline: this.underline,
-						strikethrough: this.strikethrough,
-						inverse: this.inverse,
 					})
 				}
 			} else if (child instanceof SpanHost) {
@@ -111,15 +109,15 @@ export class TextHost extends BaseHost {
 				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,
-						dimmed: child.dimmed || this.dimmed,
-						italic: child.italic || this.italic,
-						underline: child.underline || this.underline,
-						strikethrough: child.strikethrough || this.strikethrough,
-						inverse: child.inverse || this.inverse,
+						// Span's styles (TextHost applies fallbacks at render time)
+						fg: child.fg,
+						bg: child.bg,
+						bold: child.bold,
+						dimmed: child.dimmed,
+						italic: child.italic,
+						underline: child.underline,
+						strikethrough: child.strikethrough,
+						inverse: child.inverse,
 					})
 				}
 			}
@@ -129,54 +127,51 @@ export class TextHost extends BaseHost {
 	}
 
 	private prepareContent(): void {
-		this.invalidateContent()
 		const useExplicitSpans = this.explicitSpans !== null
 		if (useExplicitSpans) {
 			this.hasSpans = false
 			this.cachedSpans = null
-			this.prepared = true
 			return
 		}
 
 		this.hasSpans = this.checkForSpans()
 		this.cachedSpans = this.hasSpans ? this.collectSpans() : null
-		this.prepared = true
 	}
 
-	private ensurePrepared(): void {
-		if (this.prepared) return
-		this.prepareContent()
-	}
-
-	/** Invalidate content cache when children change */
-	private invalidateContent(): void {
+	/** Reset content-related caches (text/spans/wrap). */
+	private resetContentCaches(): void {
 		this.cachedContent = null
 		this.cachedLines = null
 		this.cachedStyledLines = null
+		this.cachedStyledWrap = false
 		this.cachedSpans = null
-		this.prepared = false
 	}
 
-	protected override prepareSelf(): void {
+	protected override prepareSelf(_layoutDirty: boolean, _renderDirty: boolean): void {
 		this.prepareContent()
 	}
 
+	override invalidateLayout(): void {
+		this.resetContentCaches()
+		super.invalidateLayout()
+	}
+
 	override appendChild(child: HostInstance): void {
+		this.resetContentCaches()
 		super.appendChild(child)
-		this.invalidateContent()
 	}
 
 	override removeChild(child: HostInstance): void {
+		this.resetContentCaches()
 		super.removeChild(child)
-		this.invalidateContent()
 	}
 
 	override insertBefore(child: HostInstance, before: HostInstance): void {
+		this.resetContentCaches()
 		super.insertBefore(child, before)
-		this.invalidateContent()
 	}
 
-	measure(maxW: number, maxH: number): Size {
+	protected measureSelf(maxW: number, maxH: number): Size {
 		const constrained = this.constrainProposal(maxW, maxH)
 		this.ensurePrepared()
 		const useExplicitSpans = this.explicitSpans !== null
@@ -185,18 +180,21 @@ export class TextHost extends BaseHost {
 		if (useExplicitSpans || this.hasSpans) {
 			const spans = useExplicitSpans ? this.explicitSpans! : (this.cachedSpans ?? this.collectSpans())
 			if (this.wrap) {
-				this.cachedStyledLines = wrapSpans(spans, constrained.w)
+				this.cachedStyledLines = wrapSpansByLine(spans, constrained.w)
 				this.cachedWidth = constrained.w
+				this.cachedStyledWrap = true
 				const h = Math.min(this.cachedStyledLines.length, constrained.h)
-				const w = this.cachedStyledLines.reduce(
-					(max, line) => Math.max(max, line.reduce((sum, span) => sum + displayWidth(span.text), 0)),
-					0,
-				)
+				const w = this.cachedStyledLines.reduce((max, line) => Math.max(max, spansDisplayWidth(line)), 0)
 				return this.constrainResult({ w, h })
 			}
-			// Non-wrap styled mode
-			const totalWidth = spans.reduce((sum, span) => sum + displayWidth(span.text), 0)
-			return this.constrainResult({ w: Math.min(totalWidth, constrained.w), h: 1 })
+			// Non-wrap styled mode (preserve explicit newlines)
+			const lines = splitSpansByNewline(spans)
+			this.cachedStyledLines = lines
+			this.cachedWidth = constrained.w
+			this.cachedStyledWrap = false
+			const maxLineWidth = lines.reduce((max, line) => Math.max(max, spansDisplayWidth(line)), 0)
+			const h = Math.min(lines.length, constrained.h)
+			return this.constrainResult({ w: Math.min(maxLineWidth, constrained.w), h })
 		}
 
 		// Simple mode: single style for all content
@@ -221,7 +219,7 @@ export class TextHost extends BaseHost {
 		return this.constrainResult({ w, h })
 	}
 
-	override layout(rect: Rect): void {
+	protected override layoutSelf(rect: Rect): void {
 		const layoutRect = this.layoutWithConstraints(rect)
 		// Layout children (RawTextHost nodes) at same position
 		for (const child of this.children) {
@@ -230,10 +228,7 @@ export class TextHost extends BaseHost {
 	}
 
 	render(buffer: CellBuffer, palette: Palette): void {
-		if (!this.rect) {
-			this.prepared = false
-			return
-		}
+		if (!this.rect) return
 		this.ensurePrepared()
 
 		// If text has no bg, inherit from parent box for proper highlight rendering
@@ -244,11 +239,11 @@ export class TextHost extends BaseHost {
 		// Styled mode: render with per-span styles
 		if (useExplicitSpans || this.hasSpans) {
 			const lines =
-				this.wrap && this.cachedStyledLines && this.cachedWidth === this.rect.w
+				this.cachedStyledLines && this.cachedWidth === this.rect.w && this.cachedStyledWrap === this.wrap
 					? this.cachedStyledLines
 					: (() => {
 							const spans = useExplicitSpans ? this.explicitSpans! : (this.cachedSpans ?? this.collectSpans())
-							return this.wrap ? wrapSpans(spans, this.rect.w) : [spans]
+							return this.wrap ? wrapSpansByLine(spans, this.rect.w) : splitSpansByNewline(spans)
 						})()
 
 			for (let y = 0; y < Math.min(lines.length, this.rect.h); y++) {
@@ -257,12 +252,12 @@ export class TextHost extends BaseHost {
 					const spanStyleId = styleIdFromProps(palette, {
 						fg: span.fg ?? this.fg,
 						bg: span.bg ?? inheritedBg,
-						bold: span.bold,
-						dimmed: span.dimmed,
-						italic: span.italic,
-						underline: span.underline,
-						strikethrough: span.strikethrough,
-						inverse: span.inverse,
+						bold: span.bold ?? this.bold,
+						dimmed: span.dimmed ?? this.dimmed,
+						italic: span.italic ?? this.italic,
+						underline: span.underline ?? this.underline,
+						strikethrough: span.strikethrough ?? this.strikethrough,
+						inverse: span.inverse ?? this.inverse,
 					})
 					const availableWidth = this.rect.w - (x - this.rect.x)
 					if (availableWidth <= 0) break
@@ -271,7 +266,6 @@ export class TextHost extends BaseHost {
 					x += displayWidth(span.text)
 				}
 			}
-			this.prepared = false
 			return
 		}
 
@@ -308,7 +302,6 @@ export class TextHost extends BaseHost {
 				const lineWidth = Math.min(displayWidth(lines[i]), this.rect.w)
 				buffer.drawText(this.rect.x, this.rect.y + i, lines[i], styleId, lineWidth)
 			}
-			this.prepared = false
 			return
 		}
 
@@ -322,11 +315,21 @@ export class TextHost extends BaseHost {
 			const lineWidth = Math.min(displayWidth(rawLines[i]), this.rect.w)
 			buffer.drawText(this.rect.x, this.rect.y + i, rawLines[i], styleId, lineWidth)
 		}
-		this.prepared = false
 	}
 
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
+		const prevFg = this.fg
+		const prevBg = this.bg
+		const prevBold = this.bold
+		const prevDimmed = this.dimmed
+		const prevItalic = this.italic
+		const prevUnderline = this.underline
+		const prevStrikethrough = this.strikethrough
+		const prevInverse = this.inverse
+		const prevWrap = this.wrap
+		const prevExplicitSpans = this.explicitSpans
+
 		// Color props support MotionValue/ColorMotionValue - auto-subscribe and animate
 		this.fg = this.resolveSpringProp("fg", props.fg, (v) => {
 			this.fg = v as Color
@@ -342,6 +345,26 @@ export class TextHost extends BaseHost {
 		this.inverse = Boolean(props.inverse)
 		this.wrap = Boolean(props.wrap)
 		this.explicitSpans = "spans" in props ? ((props.spans as StyledSpan[] | undefined) ?? []) : null
+
+		const layoutChanged = prevWrap !== this.wrap || prevExplicitSpans !== this.explicitSpans
+		if (layoutChanged) {
+			this.invalidateLayout()
+			return
+		}
+
+		const renderChanged =
+			prevFg !== this.fg ||
+			prevBg !== this.bg ||
+			prevBold !== this.bold ||
+			prevDimmed !== this.dimmed ||
+			prevItalic !== this.italic ||
+			prevUnderline !== this.underline ||
+			prevStrikethrough !== this.strikethrough ||
+			prevInverse !== this.inverse
+
+		if (renderChanged) {
+			this.invalidateRender()
+		}
 	}
 }
 
@@ -354,7 +377,7 @@ export class RawTextHost extends LeafHost {
 		this.content = text
 	}
 
-	measure(maxW: number, _maxH: number): Size {
+	protected measureSelf(maxW: number, _maxH: number): Size {
 		const w = Math.min(displayWidth(this.content), maxW)
 		return { w, h: 1 }
 	}
@@ -371,6 +394,7 @@ export class RawTextHost extends LeafHost {
 
 	updateText(text: string): void {
 		this.content = text
+		this.parent?.invalidateLayout?.()
 	}
 
 	override updateProps(_props: Record<string, unknown>): void {
@@ -416,12 +440,12 @@ export interface SpanProps extends CommonProps {
 export class SpanHost extends BaseHost {
 	fg?: Color
 	bg?: Color
-	bold = false
-	dimmed = false
-	italic = false
-	underline = false
-	strikethrough = false
-	inverse = false
+	bold?: boolean
+	dimmed?: boolean
+	italic?: boolean
+	underline?: boolean
+	strikethrough?: boolean
+	inverse?: boolean
 
 	constructor(props: SpanProps, ctx: HostContext) {
 		super("span", props, ctx)
@@ -436,7 +460,22 @@ export class SpanHost extends BaseHost {
 			.join("")
 	}
 
-	measure(_maxW: number, _maxH: number): Size {
+	override appendChild(child: HostInstance): void {
+		super.appendChild(child)
+		this.parent?.invalidateLayout?.()
+	}
+
+	override removeChild(child: HostInstance): void {
+		super.removeChild(child)
+		this.parent?.invalidateLayout?.()
+	}
+
+	override insertBefore(child: HostInstance, before: HostInstance): void {
+		super.insertBefore(child, before)
+		this.parent?.invalidateLayout?.()
+	}
+
+	protected measureSelf(_maxW: number, _maxH: number): Size {
 		// Span doesn't measure independently - parent TextHost handles layout
 		return { w: 0, h: 0 }
 	}
@@ -452,12 +491,20 @@ export class SpanHost extends BaseHost {
 		// 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.dimmed = props.dimmed !== undefined ? Boolean(props.dimmed) : Boolean(textStyle?.dimmed)
-		this.italic = props.italic !== undefined ? Boolean(props.italic) : Boolean(textStyle?.italic)
-		this.underline = props.underline !== undefined ? Boolean(props.underline) : Boolean(textStyle?.underline)
-		this.strikethrough =
-			props.strikethrough !== undefined ? Boolean(props.strikethrough) : Boolean(textStyle?.strikethrough)
-		this.inverse = props.inverse !== undefined ? Boolean(props.inverse) : Boolean(textStyle?.inverse)
+		this.bold = props.bold !== undefined ? Boolean(props.bold) : textStyle?.bold
+		this.dimmed = props.dimmed !== undefined ? Boolean(props.dimmed) : textStyle?.dimmed
+		this.italic = props.italic !== undefined ? Boolean(props.italic) : textStyle?.italic
+		this.underline = props.underline !== undefined ? Boolean(props.underline) : textStyle?.underline
+		this.strikethrough = props.strikethrough !== undefined ? Boolean(props.strikethrough) : textStyle?.strikethrough
+		this.inverse = props.inverse !== undefined ? Boolean(props.inverse) : textStyle?.inverse
+		this.invalidateLayout()
+	}
+
+	override invalidateLayout(): void {
+		this.parent?.invalidateLayout?.()
+	}
+
+	override invalidateRender(): void {
+		this.parent?.invalidateRender?.()
 	}
 }

package/src/hosts/zstack.ts

@@ -19,7 +19,7 @@ export class ZStackHost extends BaseHost {
 		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
-	measure(maxW: number, maxH: number): Size {
+	protected measureSelf(maxW: number, maxH: number): Size {
 		// Apply frame constraints to what we propose to children
 		const constrained = this.constrainProposal(maxW, maxH)
 
@@ -43,7 +43,7 @@ export class ZStackHost extends BaseHost {
 		return this.constrainResult(naturalSize)
 	}
 
-	override layout(rect: Rect): void {
+	protected override layoutSelf(rect: Rect): void {
 		const layoutRect = this.layoutWithConstraints(rect)
 
 		layoutAlignedChildren(layoutRect, this.children, this.cachedSizes, () => ({
@@ -60,10 +60,15 @@ export class ZStackHost extends BaseHost {
 
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
+		const prevH = this.alignmentH
+		const prevV = this.alignmentV
 		if (props.alignment !== undefined) {
 			const a = props.alignment as ZStackProps["alignment"]
 			if (a?.h) this.alignmentH = a.h
 			if (a?.v) this.alignmentV = a.v
 		}
+		if (prevH !== this.alignmentH || prevV !== this.alignmentV) {
+			this.invalidateLayout()
+		}
 	}
 }

package/src/index.ts

@@ -65,7 +65,7 @@ export { useKeyboard, useMouse, usePaste, useQuit, useScroll, useShortcut, useTi
 export { isKey } from "./shortcuts.js"
 export { useFrameStats } from "./hooks/useFrameStats.js"
 export type { BorderKind, BoxProps } from "./hosts/box.js"
-export type { CanvasProps, DrawContext } from "./hosts/canvas.js"
+export type { CanvasCell, CanvasProps, DrawContext } from "./hosts/canvas.js"
 export type { HStackProps } from "./hosts/hstack.js"
 export type { ScrollAlign, ScrollAlignX, ScrollAlignY, ScrollAxis, ScrollLayoutChange, ScrollProps } from "./hosts/scroll.js"
 export type { SpacerProps } from "./hosts/spacer.js"

package/src/internal/renderer/index.ts

@@ -1,6 +1,12 @@
 import { performance } from "node:perf_hooks"
 import { fileURLToPath } from "node:url"
-import { ANSI, bufferToString, type KeyMsg, type MouseMsg } from "@effect-tui/core"
+import {
+	ANSI,
+	bufferToString,
+	setEmojiWidth,
+	type KeyMsg,
+	type MouseMsg,
+} from "@effect-tui/core"
 import React, { type ReactNode } from "react"
 import { createTerminalWriter, writeToTerminal } from "../../console/ConsoleCapture.js"
 import { DEFAULT_FPS } from "../../constants.js"
@@ -42,6 +48,7 @@ type HandledSignal = "SIGINT" | "SIGTERM"
 
 export function createRenderer(options?: RendererOptions): TuiRenderer {
 	const fps = options?.fps ?? DEFAULT_FPS
+	const exitOnRenderError = options?.exitOnRenderError ?? true
 	// Use custom stdout if provided, otherwise use process.stdout with bypassed capture
 	let stdout: TuiWriteStream
 	if (options?.stdout) {
@@ -82,6 +89,9 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 	const enableMouse = options?.enableMouse ?? mode === "fullscreen"
 	const enableKittyKeyboard = options?.enableKittyKeyboard
 	const debugHook = options?.debug?.onFrame
+	const emojiWidthOption = options?.emojiWidth
+	const envEmojiWidth =
+		process.env.TUI_EMOJI_WIDTH ?? process.env.EFFECT_TUI_EMOJI_WIDTH ?? process.env.EMOJI_WIDTH
 
 	const keyboardProbe =
 		!skipTerminalSetup && enableKittyKeyboard !== false
@@ -98,6 +108,12 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 				})
 			: null
 
+	if (emojiWidthOption === 1 || emojiWidthOption === 2) {
+		setEmojiWidth(emojiWidthOption)
+	} else if (envEmojiWidth === "1" || envEmojiWidth === "2") {
+		setEmojiWidth(envEmojiWidth === "1" ? 1 : 2)
+	}
+
 	// Initialize state
 	const state = new RendererState(stdout.columns || 80, stdout.rows || 24)
 	const events = new EventBus()
@@ -117,6 +133,29 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 	// Static content renderer (inline mode only)
 	const staticRenderer = mode === "inline" ? new StaticContentRenderer(stdout, state.palette) : null
 
+	let renderer!: TuiRenderer
+	let cleanedUp = false
+	const cleanup = () => {
+		if (cleanedUp) return
+		cleanedUp = true
+		renderer.stop()
+	}
+
+	const handleRenderError = (err: unknown) => {
+		const error = err instanceof Error ? err : new Error(String(err))
+		cleanup()
+		writeToTerminal(`\n[effect-tui] Render error:\n${error.stack || error.message}\n`)
+		if (exitOnRenderError) process.exit(1)
+	}
+
+	const filterInput = keyboardProbe
+		? (input: string) => {
+				let output = input
+				if (keyboardProbe) output = keyboardProbe.handleInput(output)
+				return output
+			}
+		: undefined
+
 	// Input processing
 	const inputProcessor = new InputProcessor({
 		exitOnCtrlC,
@@ -135,7 +174,7 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 			renderer.stop()
 			requestExit(0)
 		},
-		filterInput: keyboardProbe ? (input) => keyboardProbe.handleInput(input) : undefined,
+		filterInput,
 	})
 
 	const handleInlineFullRerender = (): string => {
@@ -201,9 +240,9 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		const container = (renderer as TuiRendererInternal)._container
 		const root = container?.root ?? null
 
-		// Must render if dirty OR if static content needs flushing
-		if ((!state.dirty && !container?.staticDirty) || !root) return
-		state.dirty = false
+			// Must render if dirty OR if static content needs flushing
+			if ((!state.dirty && !container?.staticDirty) || !root) return
+			state.dirty = false
 
 		try {
 			// Handle full rerender on resize (Ink-style: clear everything + replay static)
@@ -294,8 +333,7 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 			if (debugHook) debugHook(stats)
 			if (events.hasFrameHandlers) events.dispatchFrame(stats)
 		} catch (err) {
-			console.error("[effect-tui] Render error:", err)
-			state.markDirty()
+			handleRenderError(err)
 		}
 	}
 
@@ -318,7 +356,7 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 	let unregisterProcessHandlers: (() => void) | null = null
 
 	// Build renderer object
-	const renderer: TuiRenderer = {
+	renderer = {
 		get width() {
 			return state.width
 		},
@@ -383,15 +421,17 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 
 	// Terminal setup
 	terminal.setup()
-	keyboardProbe?.start()
-	if (!keyboardProbe && !skipTerminalSetup) {
-		stdout.write(ANSI.modifyOtherKeys.enable)
-	}
 
 	// Input handling
 	state.inputHandler = (data: Buffer) => inputProcessor.process(data)
 	stdin.on("data", state.inputHandler)
 
+	keyboardProbe?.start()
+	// No emoji width probing.
+	if (!keyboardProbe && !skipTerminalSetup) {
+		stdout.write(ANSI.modifyOtherKeys.enable)
+	}
+
 	// Resize handling
 	state.resizeHandler = () => {
 		const newWidth = stdout.columns || 80
@@ -415,13 +455,6 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 
 	// Process exit handlers - ensure terminal is restored on any exit
 	// These handlers are critical for proper cleanup when process.exit() is called
-	let cleanedUp = false
-	const cleanup = () => {
-		if (cleanedUp) return
-		cleanedUp = true
-		renderer.stop()
-	}
-
 	if (handleSignals) {
 		// Handle normal process exit (synchronous - runs before exit completes)
 		onExit = () => cleanup()
@@ -470,7 +503,7 @@ export interface Root {
 export function createRoot(renderer: TuiRenderer): Root {
 	const hostContext: HostContext = {
 		requestRender: () => renderer.requestRender(),
-		requestImmediateRender: () => renderer.renderNow(),
+		requestRenderNow: () => renderer.renderNow(),
 	}
 
 	const container: Container = {

package/src/internal/renderer/types.ts

@@ -87,6 +87,8 @@ export interface RendererOptions {
 	handleSignals?: boolean
 	/** Exit the process after handling SIGINT/SIGTERM. Defaults to true. */
 	exitOnSignal?: boolean
+	/** Exit the process on render errors after logging to terminal. Defaults to true. */
+	exitOnRenderError?: 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). */
@@ -101,6 +103,8 @@ export interface RendererOptions {
 	enableMouse?: boolean
 	/** Enable Kitty/xterm keyboard protocols for enhanced modifier detection (default true). */
 	enableKittyKeyboard?: boolean
+	/** Emoji width handling: 1 or 2 forces width. */
+	emojiWidth?: 1 | 2
 	/** Optional per-frame diagnostics hook. Called after each frame is written. */
 	debug?: {
 		onFrame?: (stats: FrameStats) => void

package/src/motion/hooks.ts

@@ -221,7 +221,7 @@ export function useColorMotionValue(initial: ColorInput): ColorMotionValue {
  * // In canvas draw callback
  * <canvas draw={(ctx) => {
  *   const { r, g, b } = colorMv.get()
- *   ctx.fill(0, 0, 10, 5, "█", { fg: Colors.rgb(r, g, b) })
+ *   ctx.fillRect(0, 0, 10, 5, "█", { fg: Colors.rgb(r, g, b) })
  * }} />
  */
 export function useColorSpring(

package/src/reconciler/host-config.ts

@@ -110,8 +110,8 @@ const hostConfig = {
 
 	resetAfterCommit(container: Container) {
 		// If static content is dirty, flush immediately (bypassing throttle)
-		if (container.staticDirty && container.ctx.requestImmediateRender) {
-			container.ctx.requestImmediateRender()
+		if (container.staticDirty && container.ctx.requestRenderNow) {
+			container.ctx.requestRenderNow()
 		} else {
 			container.ctx.requestRender()
 		}

package/src/reconciler/types.ts

@@ -32,6 +32,12 @@ export interface HostInstance {
 	/** Optional pre-frame hook for cache prep (called before measure/layout/render). */
 	prepareFrame?(): void
 
+	/** @internal Mark layout-related caches dirty. */
+	invalidateLayout?(): void
+
+	/** @internal Mark render-related caches dirty. */
+	invalidateRender?(): void
+
 	/** Update props from React */
 	updateProps(props: Record<string, unknown>): void
 
@@ -51,7 +57,7 @@ export interface HostInstance {
 export interface HostContext {
 	requestRender(): void
 	/** @internal Trigger immediate render (bypasses throttling) for static content */
-	requestImmediateRender?(): void
+	requestRenderNow?(): void
 }
 
 /**

package/src/utils/border.ts

@@ -4,7 +4,15 @@
 
 import type { CellBuffer } from "@effect-tui/core"
 
-export type BorderKind = "none" | "rounded" | "square" | "double" | "heavy" | "dashed" | "ascii"
+export type BorderKind =
+	| "none"
+	| "rounded"
+	| "round"
+	| "square"
+	| "double"
+	| "heavy"
+	| "dashed"
+	| "ascii"
 
 export interface BorderChars {
 	tl: string // top-left
@@ -33,6 +41,7 @@ export interface TableBorderChars extends BorderChars {
 export function borderChars(kind: BorderKind): BorderChars {
 	switch (kind) {
 		case "rounded":
+		case "round":
 			return { tl: "╭", tr: "╮", bl: "╰", br: "╯", h: "─", v: "│" }
 		case "square":
 			return { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│" }
@@ -55,6 +64,7 @@ export function borderChars(kind: BorderKind): BorderChars {
 export function tableBorderChars(kind: BorderKind): TableBorderChars {
 	switch (kind) {
 		case "rounded":
+		case "round":
 			return { tl: "╭", tr: "╮", bl: "╰", br: "╯", h: "─", v: "│", tt: "┬", bt: "┴", lt: "├", rt: "┤", cross: "┼" }
 		case "square":
 			return { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│", tt: "┬", bt: "┴", lt: "├", rt: "┤", cross: "┼" }