@effect-tui/react 0.14.3 → 0.15.1

package/package.json

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

package/src/hosts/box.ts

@@ -10,6 +10,7 @@ import {
 	type Padding,
 	type PaddingInput,
 	resolvePadding,
+	tableBorderChars,
 	toColorValue,
 } from "../utils/index.js"
 import { SingleChildHost } from "./single-child.js"
@@ -28,6 +29,10 @@ export interface BoxProps extends CommonProps {
 	title?: string
 	/** Title text color (defaults to borderColor) */
 	titleColor?: ColorProp
+	/** Make title bold */
+	titleBold?: boolean
+	/** Show a divider line below the title (├──────┤) */
+	titleDivider?: boolean
 }
 
 export class BoxHost extends SingleChildHost {
@@ -37,6 +42,8 @@ export class BoxHost extends SingleChildHost {
 	bg?: Color
 	title?: string
 	titleColor?: Color
+	titleBold = false
+	titleDivider = false
 
 	constructor(props: BoxProps, ctx: HostContext) {
 		super("box", props, ctx)
@@ -52,7 +59,10 @@ export class BoxHost extends SingleChildHost {
 	}
 
 	private get insetY(): number {
-		return this.borderThickness + 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 {
@@ -85,9 +95,11 @@ export class BoxHost extends SingleChildHost {
 		const layoutRect = this.layoutWithConstraints(rect)
 
 		const t = this.borderThickness
+		// 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 + 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),
 		}
@@ -114,18 +126,41 @@ 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 })
-				// Reserve: ┌─ (2) + space before (1) + space after (1) + ─┐ (2) = 6 chars
-				const maxTitleLen = w - 6
+				const titleStyle = palette.id({ fg: titleFg, bold: this.titleBold })
+				// 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)
+
+				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)
+					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)
+				}
 			}
 		}
 
@@ -151,5 +186,7 @@ export class BoxHost extends SingleChildHost {
 		this.titleColor = this.resolveSpringProp("titleColor", props.titleColor, (v) => {
 			this.titleColor = v as Color
 		}) as Color | undefined
+		this.titleBold = Boolean(props.titleBold)
+		this.titleDivider = Boolean(props.titleDivider)
 	}
 }

package/src/renderer.ts

@@ -120,10 +120,57 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		},
 	})
 
+	const handleInlineFullRerender = () => {
+		if (mode !== "inline" || !staticRenderer) return
+		const inlineMode = renderMode as InlineRenderer
+		if (!inlineMode.needsFullRerender()) return
+
+		// Clear screen + scrollback + cursor home
+		stdout.write(ANSI.screen.clear + ANSI.screen.clearScrollback + ANSI.cursor.home)
+		// Replay all cached static content
+		const cachedStatic = staticRenderer.getCachedOutput()
+		if (cachedStatic) {
+			stdout.write(cachedStatic)
+		}
+
+		// Reset state
+		inlineMode.clearFullRerenderFlag()
+		state.invalidateBuffers()
+	}
+
+	const flushInlineStatic = (container: Container | null, frameWidth: number) => {
+		if (mode !== "inline" || !container?.staticDirty || !container.staticRoot || !staticRenderer) {
+			return ""
+		}
+
+		const inlineMode = renderMode as InlineRenderer
+		const prevHeight = inlineMode.getPreviousHeight()
+		let output = ""
+
+		// Step 1: Clear the dynamic area (move up + clear to end of screen)
+		if (prevHeight > 0) {
+			output += ANSI.cursor.up(prevHeight) + ANSI.cursor.startOfLine + ANSI.screen.clearToEnd
+		}
+
+		// Step 2: Append static content (cursor ends at bottom of static)
+		output += staticRenderer.render(container.staticRoot, frameWidth)
+
+		// Step 3: Reset previousHeight to 0 (we cleared dynamic, starting fresh)
+		inlineMode.reset()
+		inlineMode.forceFullOutputOnce() // Force full output to resync cursor tracking after static
+		state.invalidateBuffers()
+		container.staticDirty = false
+
+		return output
+	}
+
 	// The render frame logic
 	const renderFrame = () => {
 		const frameStart = Prof.startFrame()
 		const frameStartMs = performance.now()
+		// Flush any pending React updates before measuring/layout.
+		// Ensures resize-driven state (useTerminalSize) is reflected in the host tree.
+		flushSync(() => {})
 		const frameWidth = state.width
 		const frameHeight = state.height
 		let contentH = frameHeight
@@ -137,44 +184,12 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 
 		try {
 			// Handle full rerender on resize (Ink-style: clear everything + replay static)
-			if (mode === "inline" && staticRenderer) {
-				const inlineMode = renderMode as InlineRenderer
-				if (inlineMode.needsFullRerender()) {
-					// Clear screen + scrollback + cursor home
-					stdout.write(ANSI.screen.clear + ANSI.screen.clearScrollback + ANSI.cursor.home)
-					// Replay all cached static content
-					const cachedStatic = staticRenderer.getCachedOutput()
-					if (cachedStatic) {
-						stdout.write(cachedStatic)
-					}
-					// Reset state
-					inlineMode.clearFullRerenderFlag()
-					state.invalidateBuffers()
-				}
-			}
+			handleInlineFullRerender()
 
 			// Handle static content: clear dynamic area, append static, then fresh dynamic render
 			// Note: IL (insert lines) won't work here because inline mode uses relative positioning
 			// and IL would desync the screen state from our buffer tracking.
-			let staticOutput = ""
-			if (mode === "inline" && container?.staticDirty && container?.staticRoot && staticRenderer) {
-				const inlineMode = renderMode as InlineRenderer
-				const prevHeight = inlineMode.getPreviousHeight()
-
-				// Step 1: Clear the dynamic area (move up + clear to end of screen)
-				if (prevHeight > 0) {
-					staticOutput += ANSI.cursor.up(prevHeight) + ANSI.cursor.startOfLine + ANSI.screen.clearToEnd
-				}
-
-				// Step 2: Append static content (cursor ends at bottom of static)
-				staticOutput += staticRenderer.render(container.staticRoot, frameWidth)
-
-				// Step 3: Reset previousHeight to 0 (we cleared dynamic, starting fresh)
-				inlineMode.reset()
-				inlineMode.forceFullOutputOnce() // Force full output to resync cursor tracking after static
-				state.invalidateBuffers()
-				container.staticDirty = false
-			}
+			const staticOutput = flushInlineStatic(container ?? null, frameWidth)
 
 			// For inline mode, measure content unconstrained to handle overflow
 			let actualContentHeight = frameHeight
@@ -321,7 +336,9 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 			state.updateDimensions(width, height)
 			state.invalidateBuffers()
 			state.markDirty()
-			events.dispatchResize(width, height)
+			flushSync(() => {
+				events.dispatchResize(width, height)
+			})
 			if (!manualMode) renderFrame()
 		},
 	}
@@ -344,7 +361,9 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		state.invalidateBuffers()
 		state.markDirty()
 
-		events.dispatchResize(newWidth, newHeight)
+		flushSync(() => {
+			events.dispatchResize(newWidth, newHeight)
+		})
 	}
 	stdout.on("resize", state.resizeHandler)