@effect-tui/react 0.15.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.15.0",
+	"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.15.0",
+		"@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

@@ -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/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()