@effect-tui/react 0.15.0 → 0.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.15.0",
+	"version": "0.15.2",
 	"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.15.0",
+		"@effect-tui/core": "^0.15.2",
 		"@effect/platform": "^0.94.1",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/hosts/box.ts

@@ -59,8 +59,10 @@ export class BoxHost extends SingleChildHost {
 	}
 
 	private get insetY(): number {
-		const dividerHeight = this.titleDivider && this.title && this.border !== "none" ? 1 : 0
-		return this.borderThickness + dividerHeight + this.padding.top + this.padding.bottom + this.borderThickness
+		// When titleDivider is enabled: top border + title row + divider line = 3
+		// When title but no divider: title embedded in top border = 1
+		const titleHeight = this.titleDivider && this.title && this.border !== "none" ? 2 : 0 // title row + divider
+		return this.borderThickness + titleHeight + this.padding.top + this.padding.bottom + this.borderThickness
 	}
 
 	measure(maxW: number, maxH: number): Size {
@@ -93,10 +95,11 @@ export class BoxHost extends SingleChildHost {
 		const layoutRect = this.layoutWithConstraints(rect)
 
 		const t = this.borderThickness
-		const dividerHeight = this.titleDivider && this.title && this.border !== "none" ? 1 : 0
+		// When titleDivider: title row (1) + divider line (1) = 2
+		const titleHeight = this.titleDivider && this.title && this.border !== "none" ? 2 : 0
 		const innerRect: Rect = {
 			x: layoutRect.x + t + this.padding.left,
-			y: layoutRect.y + t + dividerHeight + this.padding.top,
+			y: layoutRect.y + t + titleHeight + this.padding.top,
 			w: Math.max(0, layoutRect.w - this.insetX),
 			h: Math.max(0, layoutRect.h - this.insetY),
 		}
@@ -123,29 +126,40 @@ export class BoxHost extends SingleChildHost {
 			const borderStyle = palette.id({ fg: borderFg })
 			drawBorder(buffer, x, y, w, h, chars, borderStyle)
 
-			// Draw title on top border if present
+			// Draw title if present
 			if (this.title && w >= 7) {
 				const titleFg = toColorValue(this.titleColor) ?? borderFg
 				const titleStyle = palette.id({ fg: titleFg, bold: this.titleBold })
-				// Reserve: ┌─ (2) + space before (1) + space after (1) + ─┐ (2) = 6 chars
-				const maxTitleLen = w - 6
+				// Reserve space for borders and padding: 4 chars (│ + space + space + │)
+				const maxTitleLen = w - 4
 				const displayTitle =
 					this.title.length > maxTitleLen ? this.title.slice(0, maxTitleLen - 1) + "…" : this.title
-				// Draw " Title " starting at x+2, limiting width to just the title text
-				const titleX = x + 2
-				const titleText = ` ${displayTitle} `
-				buffer.drawText(titleX, y, titleText, titleStyle, titleText.length)
-
-				// Draw divider line below title if enabled
-				if (this.titleDivider && h >= 3) {
-					const dividerY = y + 1
+
+				if (this.titleDivider && h >= 4) {
+					// Title in its own row: │ Title │
+					const titleRowY = y + 1
+					const titleText = ` ${displayTitle}`
+					buffer.drawText(x, titleRowY, chars.v, borderStyle, 1)
+					buffer.drawText(x + 1, titleRowY, titleText, titleStyle, titleText.length)
+					// Fill remaining space and draw right border
+					for (let dx = 1 + titleText.length; dx < w - 1; dx++) {
+						buffer.drawText(x + dx, titleRowY, " ", borderStyle, 1)
+					}
+					buffer.drawText(x + w - 1, titleRowY, chars.v, borderStyle, 1)
+
+					// Divider line: ├───┤
+					const dividerY = y + 2
 					const tableChars = tableBorderChars(this.border)
-					// Draw ├ at left, ─ across, ┤ at right
 					buffer.drawText(x, dividerY, tableChars.lt, borderStyle, 1)
 					for (let dx = 1; dx < w - 1; dx++) {
 						buffer.drawText(x + dx, dividerY, tableChars.h, borderStyle, 1)
 					}
 					buffer.drawText(x + w - 1, dividerY, tableChars.rt, borderStyle, 1)
+				} else {
+					// Title embedded in top border: ┌─ Title ─┐
+					const titleX = x + 2
+					const titleText = ` ${displayTitle} `
+					buffer.drawText(titleX, y, titleText, titleStyle, titleText.length)
 				}
 			}
 		}

package/src/hosts/codeblock.ts

@@ -1,6 +1,6 @@
 import { type CellBuffer, type Color, Colors, displayWidth, type Palette } from "@effect-tui/core"
 import type { HighlightLine } from "../highlight.js"
-import type { CommonProps, HostContext, Rect, Size } from "../reconciler/types.js"
+import type { CommonProps, HostContext, Size } from "../reconciler/types.js"
 import { type Padding, type PaddingInput, resolveBgStyle, resolvePadding, styleIdFromProps } from "../utils/index.js"
 import { BaseHost } from "./base.js"
 
@@ -27,6 +27,7 @@ export class CodeBlockHost extends BaseHost {
 
 	private cachedLineWidths: number[] = []
 	private gutterWidth = 0
+	private prepared = false
 
 	constructor(props: CodeBlockProps, ctx: HostContext) {
 		super("codeblock", props, ctx)
@@ -49,10 +50,24 @@ export class CodeBlockHost extends BaseHost {
 		return this.padding.top + this.padding.bottom
 	}
 
+	private prepareMetrics(): void {
+		this.cachedLineWidths = this.lines.map((line) => lineDisplayWidth(line))
+		this.gutterWidth = this.computeGutterWidth()
+		this.prepared = true
+	}
+
+	private ensurePrepared(): void {
+		if (this.prepared) return
+		this.prepareMetrics()
+	}
+
+	protected override prepareSelf(): void {
+		this.ensurePrepared()
+	}
+
 	measure(maxW: number, maxH: number): Size {
 		const constrained = this.constrainProposal(maxW, maxH)
-		this.cachedLineWidths = this.lines.map((l) => lineDisplayWidth(l))
-		this.gutterWidth = this.computeGutterWidth()
+		this.ensurePrepared()
 
 		const maxLineW = this.cachedLineWidths.reduce((max, w) => (w > max ? w : max), 0)
 		const contentW = maxLineW + this.insetX
@@ -65,10 +80,6 @@ export class CodeBlockHost extends BaseHost {
 		})
 	}
 
-	override layout(rect: Rect): void {
-		super.layout(rect)
-	}
-
 	render(buffer: CellBuffer, palette: Palette): void {
 		if (!this.rect) return
 
@@ -120,11 +131,19 @@ export class CodeBlockHost extends BaseHost {
 
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
-		if (props.lines !== undefined) this.lines = props.lines as HighlightLine[]
-		if (props.lineNumbers !== undefined) this.lineNumbers = !!props.lineNumbers
+		let invalidate = false
+		if (props.lines !== undefined) {
+			this.lines = props.lines as HighlightLine[]
+			invalidate = true
+		}
+		if (props.lineNumbers !== undefined) {
+			this.lineNumbers = !!props.lineNumbers
+			invalidate = true
+		}
 		if (props.padding !== undefined) this.padding = resolvePadding(props.padding as CodeBlockProps["padding"])
 		if (props.background !== undefined) this.background = props.background as Color
 		if (props.lineNumberColor !== undefined) this.lineNumberColor = props.lineNumberColor as Color
 		if (props.lineNumberBackground !== undefined) this.lineNumberBackground = props.lineNumberBackground as Color
+		if (invalidate) this.prepared = false
 	}
 }

package/src/hosts/spacer.ts

@@ -1,5 +1,5 @@
 import type { CellBuffer, Palette } from "@effect-tui/core"
-import type { CommonProps, HostContext, Rect, Size } from "../reconciler/types.js"
+import type { CommonProps, HostContext, Size } from "../reconciler/types.js"
 import { BaseHost } from "./base.js"
 
 export interface SpacerProps extends CommonProps {
@@ -26,10 +26,6 @@ export class SpacerHost extends BaseHost {
 		return { w: this.minWidth, h: this.minHeight }
 	}
 
-	override layout(rect: Rect): void {
-		super.layout(rect)
-	}
-
 	render(_buffer: CellBuffer, _palette: Palette): void {
 		// Spacers render nothing
 	}

package/src/reconciler/host-config.ts

@@ -57,9 +57,6 @@ const hostConfig = {
 	supportsHydration: false,
 
 	createInstance(type: Type, props: Props, rootContainer: Container) {
-		if (type === "vstack") {
-			console.log("createInstance vstack props", props)
-		}
 		const instance = createHostInstance(type, props, rootContainer.ctx)
 
 		// Track static content (from <Static> component)
@@ -67,7 +64,6 @@ const hostConfig = {
 			instance.__static = true
 			rootContainer.staticRoot = instance
 			rootContainer.staticDirty = true
-			console.log("set staticRoot", Boolean(rootContainer.staticRoot))
 		}
 
 		return instance
@@ -98,9 +94,6 @@ const hostConfig = {
 	},
 
 	removeChildFromContainer(container: Container, child: Instance) {
-		if (child.__static) {
-			console.log("removeChildFromContainer static")
-		}
 		if (container.root) {
 			container.root.removeChild(child)
 			child.destroy()

package/src/renderer.ts

@@ -2,7 +2,7 @@ import { performance } from "node:perf_hooks"
 import { fileURLToPath } from "node:url"
 import { ANSI, bufferToString, type KeyMsg, type MouseMsg } from "@effect-tui/core"
 import React, { type ReactNode } from "react"
-import { createTerminalWriter } from "./console/ConsoleCapture.js"
+import { createTerminalWriter, writeToTerminal } from "./console/ConsoleCapture.js"
 import { DEFAULT_FPS } from "./constants.js"
 import { requestExit } from "./exit.js"
 import * as Prof from "./profiler.js"
@@ -272,6 +272,8 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 
 	let onExit: (() => void) | null = null
 	let onSignal: ((signal: NodeJS.Signals) => void) | null = null
+	let onUncaughtException: ((err: Error) => void) | null = null
+	let onUnhandledRejection: ((reason: unknown) => void) | null = null
 
 	// Build renderer object
 	const renderer: TuiRenderer = {
@@ -300,6 +302,14 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 				process.off("SIGTERM", onSignal)
 				onSignal = null
 			}
+			if (onUncaughtException) {
+				process.off("uncaughtException", onUncaughtException)
+				onUncaughtException = null
+			}
+			if (onUnhandledRejection) {
+				process.off("unhandledRejection", onUnhandledRejection)
+				onUnhandledRejection = null
+			}
 			if (state.loop) {
 				clearInterval(state.loop)
 				state.loop = null
@@ -333,6 +343,7 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 			if (!manualMode) renderFrame()
 		},
 		dispatchResize(width: number, height: number) {
+			renderMode.handleResize(width, height, state.lastWidth)
 			state.updateDimensions(width, height)
 			state.invalidateBuffers()
 			state.markDirty()
@@ -403,6 +414,24 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		}
 		process.on("SIGINT", onSignal)
 		process.on("SIGTERM", onSignal)
+
+		// Handle uncaught exceptions - ensure error is visible before exit
+		onUncaughtException = (err: Error) => {
+			cleanup()
+			// Write directly to terminal, bypassing console capture
+			writeToTerminal(`\n[effect-tui] Uncaught exception:\n${err.stack || err.message}\n`)
+			process.exit(1)
+		}
+		process.on("uncaughtException", onUncaughtException)
+
+		// Handle unhandled promise rejections
+		onUnhandledRejection = (reason: unknown) => {
+			cleanup()
+			const message = reason instanceof Error ? reason.stack || reason.message : String(reason)
+			writeToTerminal(`\n[effect-tui] Unhandled rejection:\n${message}\n`)
+			process.exit(1)
+		}
+		process.on("unhandledRejection", onUnhandledRejection)
 	}
 
 	;(renderer as TuiRendererInternal)._container = null