@effect-tui/react 0.15.2 → 2.0.0

package/src/hosts/canvas.ts

@@ -1,16 +1,17 @@
 import type { CellBuffer, Color, Palette } from "@effect-tui/core"
-import { Colors } from "@effect-tui/core"
+import { Colors, displayWidth } from "@effect-tui/core"
 import type { CommonProps, HostContext, Size } from "../reconciler/types.js"
+import * as Prof from "../profiler.js"
 import {
 	type BorderKind,
 	borderChars,
 	drawBorder,
+	fillRectWithInheritedBg,
 	resolveBgStyle,
-	resolveInheritedBgStyle,
 	styleIdFromProps,
 	toColorValue,
 } from "../utils/index.js"
-import { BaseHost } from "./base.js"
+import { LeafHost } from "./leaf.js"
 
 export type { BorderKind }
 
@@ -20,6 +21,9 @@ export interface DrawContext {
 	/** Canvas height in cells */
 	height: number
 
+	/** Resolve a style id for reuse across many draw calls */
+	style(opts?: { fg?: Color; bg?: Color; bold?: boolean; italic?: boolean; underline?: boolean; inverse?: boolean }): number
+
 	/** Draw text at position */
 	text(
 		x: number,
@@ -29,7 +33,7 @@ export interface DrawContext {
 	): void
 
 	/** Fill rectangle with character */
-	fill(
+	fillRect(
 		x: number,
 		y: number,
 		w: number,
@@ -54,6 +58,20 @@ export interface DrawContext {
 
 	/** Clear entire canvas */
 	clear(): void
+
+	/** Draw a single cell with a codepoint */
+	cell(x: number, y: number, cp: number, style?: number, width?: number): void
+
+	/** Draw many single-cell codepoints efficiently */
+	cells(cells: Array<CanvasCell>): void
+}
+
+export interface CanvasCell {
+	x: number
+	y: number
+	cp: number
+	style?: number
+	width?: number
 }
 
 export interface CanvasProps extends CommonProps {
@@ -67,7 +85,7 @@ export interface CanvasProps extends CommonProps {
 	inheritBg?: boolean
 }
 
-export class CanvasHost extends BaseHost {
+export class CanvasHost extends LeafHost {
 	draw: CanvasProps["draw"] = () => {}
 	fixedWidth?: number
 	fixedHeight?: number
@@ -78,7 +96,7 @@ export class CanvasHost extends BaseHost {
 		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
-	measure(maxW: number, maxH: number): Size {
+	protected measureSelf(maxW: number, maxH: number): Size {
 		const constrained = this.constrainProposal(maxW, maxH)
 		const size = {
 			w: this.fixedWidth ?? constrained.w,
@@ -91,26 +109,36 @@ export class CanvasHost extends BaseHost {
 		if (!this.rect) return
 		const { x: ox, y: oy, w, h } = this.rect
 
-		// Get inherited background for use in drawing functions
-		const { value: inheritedBgValue, styleId: inheritedBgStyleId } = this.inheritBg
-			? resolveInheritedBgStyle(palette, undefined, this.parent)
-			: { value: undefined, styleId: 0 }
-
 		// Pre-fill with inherited background if requested
-		if (this.inheritBg && inheritedBgValue !== undefined) {
-			buffer.fillRect(ox, oy, w, h, " ".codePointAt(0)!, inheritedBgStyleId)
-		}
+		const inheritedBgValue = this.inheritBg
+			? fillRectWithInheritedBg(buffer, palette, { x: ox, y: oy, w, h }, undefined, this.parent, {
+					skipWhenUndefined: true,
+				}).value
+			: undefined
 
 		// Create draw context
 		const ctx: DrawContext = {
 			width: w,
 			height: h,
 
+			style: (opts) => {
+				const effectiveBg = opts?.bg ?? (this.inheritBg ? inheritedBgValue : undefined)
+				return styleIdFromProps(palette, {
+					fg: opts?.fg,
+					bg: effectiveBg,
+					bold: opts?.bold,
+					italic: opts?.italic,
+					underline: opts?.underline,
+					inverse: opts?.inverse,
+				})
+			},
+
 			text: (x, y, str, opts) => {
 				const px = Math.round(ox + x)
 				const py = Math.round(oy + y)
 				// Use inherited bg when inheritBg is enabled and no explicit bg provided
 				const effectiveBg = opts?.bg ?? (this.inheritBg ? inheritedBgValue : undefined)
+				const styleT = Prof.startPhase()
 				const style = styleIdFromProps(palette, {
 					fg: opts?.fg,
 					bg: effectiveBg,
@@ -119,20 +147,40 @@ export class CanvasHost extends BaseHost {
 					underline: opts?.underline,
 					inverse: opts?.inverse,
 				})
-				let col = px
-				for (const char of str) {
-					if (col >= ox + w) break
-					buffer.drawCP(col, py, char.codePointAt(0)!, style)
-					col++
+				Prof.endPhase("canvas.text.style", styleT)
+				const widthT = Prof.startPhase()
+				let textWidth = 0
+				let asciiCp: number | null = null
+				if (str.length === 1) {
+					const code = str.charCodeAt(0)
+					if (code >= 0x20 && code <= 0x7e) {
+						textWidth = 1
+						asciiCp = code
+					} else {
+						textWidth = displayWidth(str)
+					}
+				} else {
+					textWidth = displayWidth(str)
+				}
+				Prof.endPhase("canvas.text.width", widthT)
+				if (textWidth > 0) {
+					const drawT = Prof.startPhase()
+					if (asciiCp !== null) {
+						buffer.drawCP(px, py, asciiCp, style, 1)
+					} else {
+						buffer.drawText(px, py, str, style, textWidth)
+					}
+					Prof.endPhase("canvas.text.draw", drawT)
 				}
 			},
 
-			fill: (x, y, fw, fh, char = " ", opts) => {
+			fillRect: (x, y, fw, fh, char = " ", opts) => {
 				const px = Math.round(ox + x)
 				const py = Math.round(oy + y)
-				const cp = char.codePointAt(0)!
+				const cp = char.length > 0 ? char.codePointAt(0)! : " ".codePointAt(0)!
 				// Use inherited bg when inheritBg is enabled and no explicit bg provided
 				const effectiveBg = opts?.bg ?? (this.inheritBg ? inheritedBgValue : undefined)
+				const styleT = Prof.startPhase()
 				const style = styleIdFromProps(palette, {
 					fg: opts?.fg,
 					bg: effectiveBg,
@@ -141,65 +189,103 @@ export class CanvasHost extends BaseHost {
 					underline: opts?.underline,
 					inverse: opts?.inverse,
 				})
-				for (let row = 0; row < fh; row++) {
-					const yy = py + row
-					for (let col = 0; col < fw; col++) {
-						const xx = px + col
-						buffer.drawCP(xx, yy, cp, style)
-					}
-				}
+				Prof.endPhase("canvas.fillRect.style", styleT)
+				const fillW = Math.ceil(fw)
+				const fillH = Math.ceil(fh)
+				const drawT = Prof.startPhase()
+				buffer.fillRect(px, py, fillW, fillH, cp, style)
+				Prof.endPhase("canvas.fillRect.draw", drawT)
 			},
 
 			box: (x, y, bw, bh, opts) => {
 				const px = Math.round(ox + x)
 				const py = Math.round(oy + y)
+				const boxW = Math.ceil(bw)
+				const boxH = Math.ceil(bh)
 				const border = opts?.border ?? "none"
+				const bgStyleT = Prof.startPhase()
 				const { value: bgValue, styleId: bgStyleId } = resolveBgStyle(palette, opts?.bg)
+				Prof.endPhase("canvas.box.bg.style", bgStyleT)
 
 				// Fill background (with clipping)
 				if (bgValue !== undefined) {
-					for (let row = 0; row < bh; row++) {
-						const yy = py + row
-						for (let col = 0; col < bw; col++) {
-							const xx = px + col
-							buffer.drawCP(xx, yy, " ".codePointAt(0)!, bgStyleId)
-						}
-					}
+					const bgDrawT = Prof.startPhase()
+					buffer.fillRect(px, py, boxW, boxH, " ".codePointAt(0)!, bgStyleId)
+					Prof.endPhase("canvas.box.bg.draw", bgDrawT)
 				}
 
 				// Draw border (with clipping)
-				if (border !== "none" && bw >= 2 && bh >= 2) {
+				if (border !== "none" && boxW >= 2 && boxH >= 2) {
+					const borderStyleT = Prof.startPhase()
 					const chars = borderChars(border)
 					const borderFg = toColorValue(opts?.borderColor) ?? toColorValue(opts?.fg) ?? Colors.ansi.gray(8)
 					const borderStyle = palette.id({ fg: borderFg })
-					drawBorder(buffer, px, py, bw, bh, chars, borderStyle, { ox, oy, w, h })
+					Prof.endPhase("canvas.box.border.style", borderStyleT)
+					const borderDrawT = Prof.startPhase()
+					drawBorder(buffer, px, py, boxW, boxH, chars, borderStyle, { ox, oy, w, h })
+					Prof.endPhase("canvas.box.border.draw", borderDrawT)
 				}
 			},
 
 			clear: () => {
+				const clearT = Prof.startPhase()
 				const style = palette.id({})
-				for (let row = 0; row < h; row++) {
-					for (let col = 0; col < w; col++) {
-						buffer.drawCP(ox + col, oy + row, " ".codePointAt(0)!, style)
-					}
+				buffer.fillRect(ox, oy, w, h, " ".codePointAt(0)!, style)
+				Prof.endPhase("canvas.clear", clearT)
+			},
+
+			cell: (x, y, cp, style = 0, width) => {
+				const px = Math.round(ox + x)
+				const py = Math.round(oy + y)
+				const drawT = Prof.startPhase()
+				buffer.drawCP(px, py, cp, style, width)
+				Prof.endPhase("canvas.cell.draw", drawT)
+			},
+
+			cells: (cells) => {
+				const drawT = Prof.startPhase()
+				const baseX = ox
+				const baseY = oy
+				for (const cell of cells) {
+					const px = Math.round(baseX + cell.x)
+					const py = Math.round(baseY + cell.y)
+					buffer.drawCP(px, py, cell.cp, cell.style ?? 0, cell.width)
 				}
+				Prof.endPhase("canvas.cells.draw", drawT)
 			},
 		}
 
 		buffer.withClip(ox, oy, w, h, () => {
 			// Call user's draw function within the canvas clip region
+			const drawT = Prof.startPhase()
 			this.draw(ctx)
+			Prof.endPhase("canvas.draw", drawT)
 		})
 	}
 
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
+		const prevDraw = this.draw
+		const prevWidth = this.fixedWidth
+		const prevHeight = this.fixedHeight
+		const prevInheritBg = this.inheritBg
+
 		if (props.draw !== undefined) {
 			this.draw = props.draw as CanvasProps["draw"]
-			this.ctx.requestRender() // trigger repaint when draw function changes
 		}
 		if (props.width !== undefined) this.fixedWidth = props.width as number
 		if (props.height !== undefined) this.fixedHeight = props.height as number
 		if (props.inheritBg !== undefined) this.inheritBg = props.inheritBg as boolean
+
+		const layoutChanged = prevWidth !== this.fixedWidth || prevHeight !== this.fixedHeight
+		if (layoutChanged) {
+			this.invalidateLayout()
+			return
+		}
+
+		const renderChanged = prevDraw !== this.draw || prevInheritBg !== this.inheritBg
+		if (renderChanged) {
+			this.invalidateRender()
+		}
 	}
 }

package/src/hosts/codeblock.ts

@@ -1,33 +1,35 @@
 import { type CellBuffer, type Color, Colors, displayWidth, type Palette } from "@effect-tui/core"
 import type { HighlightLine } from "../highlight.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"
+import {
+	type Padding,
+	type PaddingInput,
+	resolveBgStyle,
+	resolvePadding,
+	spansDisplayWidth,
+	styleIdFromProps,
+} from "../utils/index.js"
+import { LeafHost } from "./leaf.js"
 
 export interface CodeBlockProps extends CommonProps {
 	lines: HighlightLine[]
 	lineNumbers?: boolean
 	padding?: PaddingInput
-	background?: Color
-	lineNumberColor?: Color
-	lineNumberBackground?: Color
+	bg?: Color
+	lineNumberFg?: Color
+	lineNumberBg?: Color
 }
 
-function lineDisplayWidth(line: HighlightLine): number {
-	return line.reduce((w, token) => w + displayWidth(token.text), 0)
-}
-
-export class CodeBlockHost extends BaseHost {
+export class CodeBlockHost extends LeafHost {
 	lines: HighlightLine[] = [[]]
 	lineNumbers = false
 	padding: Padding = { top: 0, right: 0, bottom: 0, left: 0 }
-	background?: Color
-	lineNumberColor?: Color
-	lineNumberBackground?: Color
+	bg?: Color
+	lineNumberFg?: Color
+	lineNumberBg?: Color
 
 	private cachedLineWidths: number[] = []
 	private gutterWidth = 0
-	private prepared = false
 
 	constructor(props: CodeBlockProps, ctx: HostContext) {
 		super("codeblock", props, ctx)
@@ -51,21 +53,15 @@ export class CodeBlockHost extends BaseHost {
 	}
 
 	private prepareMetrics(): void {
-		this.cachedLineWidths = this.lines.map((line) => lineDisplayWidth(line))
+		this.cachedLineWidths = this.lines.map((line) => spansDisplayWidth(line))
 		this.gutterWidth = this.computeGutterWidth()
-		this.prepared = true
 	}
 
-	private ensurePrepared(): void {
-		if (this.prepared) return
+	protected override prepareSelf(_layoutDirty: boolean, _renderDirty: boolean): void {
 		this.prepareMetrics()
 	}
 
-	protected override prepareSelf(): void {
-		this.ensurePrepared()
-	}
-
-	measure(maxW: number, maxH: number): Size {
+	protected measureSelf(maxW: number, maxH: number): Size {
 		const constrained = this.constrainProposal(maxW, maxH)
 		this.ensurePrepared()
 
@@ -89,7 +85,7 @@ export class CodeBlockHost extends BaseHost {
 		const startX = x + this.padding.left + this.gutterWidth
 		const startY = y + this.padding.top
 
-		const { value: bgValue, styleId: bgStyleId } = resolveBgStyle(palette, this.background)
+		const { value: bgValue, styleId: bgStyleId } = resolveBgStyle(palette, this.bg)
 		if (bgValue !== undefined && w > 0 && h > 0) {
 			buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
 		}
@@ -100,8 +96,8 @@ export class CodeBlockHost extends BaseHost {
 
 			if (this.lineNumbers) {
 				const gutterStyle = styleIdFromProps(palette, {
-					fg: this.lineNumberColor ?? Colors.ansi.gray(11),
-					bg: this.lineNumberBackground ?? this.background,
+					fg: this.lineNumberFg ?? Colors.ansi.gray(11),
+					bg: this.lineNumberBg ?? this.bg,
 				})
 				const digits = String(i + 1).padStart(this.gutterWidth - 1, " ")
 				buffer.drawText(x + this.padding.left, lineY, `${digits} `, gutterStyle, this.gutterWidth)
@@ -116,7 +112,7 @@ export class CodeBlockHost extends BaseHost {
 				const style = token.style ?? {}
 				const styleId = styleIdFromProps(palette, {
 					fg: style.fg,
-					bg: style.bg ?? this.background,
+					bg: style.bg ?? this.bg,
 					bold: style.bold,
 					italic: style.italic,
 					underline: style.underline,
@@ -131,19 +127,36 @@ export class CodeBlockHost extends BaseHost {
 
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
-		let invalidate = false
+		let layoutChanged = false
+		let renderChanged = false
 		if (props.lines !== undefined) {
 			this.lines = props.lines as HighlightLine[]
-			invalidate = true
+			layoutChanged = true
 		}
 		if (props.lineNumbers !== undefined) {
 			this.lineNumbers = !!props.lineNumbers
-			invalidate = true
+			layoutChanged = true
+		}
+		if (props.padding !== undefined) {
+			this.padding = resolvePadding(props.padding as CodeBlockProps["padding"])
+			layoutChanged = true
+		}
+		if (props.bg !== undefined) {
+			this.bg = props.bg as Color
+			renderChanged = true
+		}
+		if (props.lineNumberFg !== undefined) {
+			this.lineNumberFg = props.lineNumberFg as Color
+			renderChanged = true
+		}
+		if (props.lineNumberBg !== undefined) {
+			this.lineNumberBg = props.lineNumberBg as Color
+			renderChanged = true
+		}
+		if (layoutChanged) {
+			this.invalidateLayout()
+		} else if (renderChanged) {
+			this.invalidateRender()
 		}
-		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/flex-container.ts

@@ -15,7 +15,7 @@ import {
 import { BaseHost } from "./base.js"
 
 export type CrossAlignment<A extends FlexAxis> = A extends "vertical"
-	? "leading" | "center" | "trailing"
+	? "left" | "center" | "right"
 	: "top" | "center" | "bottom"
 
 export interface FlexContainerProps<A extends FlexAxis> extends CommonProps {
@@ -30,7 +30,7 @@ export interface FlexContainerProps<A extends FlexAxis> extends CommonProps {
 function toFlexAlignment<A extends FlexAxis>(axis: A, alignment: CrossAlignment<A>): FlexAlignment {
 	if (alignment === "center") return "center"
 	if (axis === "vertical") {
-		return alignment === "leading" ? "start" : "end"
+		return alignment === "left" ? "start" : "end"
 	} else {
 		return alignment === "top" ? "start" : "end"
 	}
@@ -79,7 +79,7 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 	 * </vstack>
 	 * ```
 	 */
-	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)
 		const insetX = this.padding.left + this.padding.right
@@ -102,9 +102,9 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 		return this.constrainResult(paddedSize)
 	}
 
-	override layout(rect: Rect): void {
+	protected override layoutSelf(rect: Rect): void {
 		const layoutRect = this.layoutWithConstraints(rect)
-		const stretchCross = this.axis === "vertical" ? this.alignment === "leading" : this.alignment === "top"
+		const stretchCross = this.axis === "vertical" ? this.alignment === "left" : this.alignment === "top"
 		const insetX = this.padding.left + this.padding.right
 		const insetY = this.padding.top + this.padding.bottom
 		const innerRect: Rect = {
@@ -142,12 +142,31 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
+		const prevSpacing = this.spacing
+		const prevAlignment = this.alignment
+		const prevPadding = this.padding
+		const prevBg = this.bg
+
 		this.spacing = (props.spacing as number | undefined) ?? 0
 		// Reset to axis-specific default when undefined
 		this.alignment =
 			(props.alignment as CrossAlignment<A> | undefined) ??
-			((this.axis === "vertical" ? "leading" : "top") as CrossAlignment<A>)
+			((this.axis === "vertical" ? "left" : "top") as CrossAlignment<A>)
 		this.padding = resolvePadding(props.padding as FlexContainerProps<A>["padding"])
 		this.bg = props.bg as Color | undefined
+
+		const paddingChanged =
+			prevPadding.top !== this.padding.top ||
+			prevPadding.right !== this.padding.right ||
+			prevPadding.bottom !== this.padding.bottom ||
+			prevPadding.left !== this.padding.left
+
+		const layoutChanged = prevSpacing !== this.spacing || prevAlignment !== this.alignment || paddingChanged
+
+		if (layoutChanged) {
+			this.invalidateLayout()
+		} else if (prevBg !== this.bg) {
+			this.invalidateRender()
+		}
 	}
 }

package/src/hosts/index.ts

@@ -14,13 +14,22 @@ import { ZStackHost } from "./zstack.js"
 
 export { BaseHost } from "./base.js"
 export { BoxHost, type BoxProps } from "./box.js"
-export { CanvasHost, type CanvasProps, type DrawContext } from "./canvas.js"
+export { CanvasHost, type CanvasCell, type CanvasProps, type DrawContext } from "./canvas.js"
 export { CodeBlockHost, type CodeBlockProps } from "./codeblock.js"
 export { HStackHost, type HStackProps } from "./hstack.js"
 export { OverlayHost, type OverlayProps } from "./overlay.js"
 export { OverlayItemHost, type OverlayItemProps } from "./overlay-item.js"
-export { ScrollHost, type ScrollProps } from "./scroll.js"
+export {
+	ScrollHost,
+	type ScrollAlign,
+	type ScrollAlignX,
+	type ScrollAlignY,
+	type ScrollAxis,
+	type ScrollLayoutChange,
+	type ScrollProps,
+} from "./scroll.js"
 export { SingleChildHost } from "./single-child.js"
+export { LeafHost } from "./leaf.js"
 export { SpacerHost, type SpacerProps } from "./spacer.js"
 export {
 	RawTextHost,

package/src/hosts/layout-helpers.ts

@@ -0,0 +1,20 @@
+import type { Rect, Size } from "../reconciler/types.js"
+import type { HostInstance } from "../reconciler/types.js"
+import { alignedChildRect, type HAlign, type VAlign } from "../utils/index.js"
+
+type Alignment = { h?: HAlign; v?: VAlign }
+
+export function layoutAlignedChildren(
+	layoutRect: Rect,
+	children: HostInstance[],
+	cachedSizes: Size[],
+	alignmentForChild: (child: HostInstance, index: number) => Alignment,
+	startIndex = 0,
+): void {
+	for (let i = startIndex; i < children.length; i++) {
+		const child = children[i]
+		const size = cachedSizes[i] ?? child.measure(layoutRect.w, layoutRect.h)
+		const alignment = alignmentForChild(child, i)
+		child.layout(alignedChildRect(layoutRect, size, alignment.h ?? "center", alignment.v ?? "center"))
+	}
+}

package/src/hosts/leaf.ts

@@ -0,0 +1,36 @@
+import type { HostInstance } from "../reconciler/types.js"
+import { BaseHost } from "./base.js"
+
+/**
+ * Base host that rejects children.
+ * Any attempted child insertion is ignored with a warning (once).
+ */
+export abstract class LeafHost extends BaseHost {
+	private warned = false
+
+	override appendChild(child: HostInstance): void {
+		this.rejectChild(child)
+	}
+
+	override insertBefore(child: HostInstance, _before: HostInstance): void {
+		this.rejectChild(child)
+	}
+
+	override removeChild(child: HostInstance): void {
+		const idx = this.children.indexOf(child)
+		if (idx >= 0) {
+			this.children.splice(idx, 1)
+		}
+		if (child.parent === this) {
+			child.parent = null
+		}
+	}
+
+	private rejectChild(child: HostInstance): void {
+		if (!this.warned) {
+			console.warn(`[effect-tui] <${this.type}> does not support children; child ignored.`)
+			this.warned = true
+		}
+		child.parent = null
+	}
+}

package/src/hosts/overlay-item.ts

@@ -26,7 +26,7 @@ export class OverlayItemHost extends SingleChildHost {
 		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
-	override measure(maxW: number, maxH: number): Size {
+	protected override measureSelf(maxW: number, maxH: number): Size {
 		const constrained = this.constrainProposal(maxW, maxH)
 
 		if (!this.child) {
@@ -37,7 +37,7 @@ export class OverlayItemHost extends SingleChildHost {
 		return this.constrainResult(childSize)
 	}
 
-	override layout(rect: Rect): void {
+	protected override layoutSelf(rect: Rect): void {
 		const layoutRect = this.layoutWithConstraints(rect)
 		this.child?.layout(layoutRect)
 	}
@@ -50,8 +50,14 @@ export class OverlayItemHost extends SingleChildHost {
 
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
+		const prevAlignment = this.alignment
 		if (props.alignment !== undefined) {
 			this.alignment = props.alignment as { h?: HAlign; v?: VAlign }
 		}
+		const layoutChanged =
+			prevAlignment.h !== this.alignment.h || prevAlignment.v !== this.alignment.v
+		if (layoutChanged) {
+			this.invalidateLayout()
+		}
 	}
 }

package/src/hosts/overlay.ts

@@ -18,8 +18,8 @@
 
 import type { CellBuffer, Palette, Rect, Size } from "@effect-tui/core"
 import type { CommonProps, HostContext } from "../reconciler/types.js"
-import { alignedChildRect } from "../utils/index.js"
 import { BaseHost } from "./base.js"
+import { layoutAlignedChildren } from "./layout-helpers.js"
 import type { OverlayItemHost } from "./overlay-item.js"
 
 export interface OverlayProps extends CommonProps {}
@@ -32,7 +32,7 @@ export class OverlayHost extends BaseHost {
 		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
-	override measure(maxW: number, maxH: number): Size {
+	protected override measureSelf(maxW: number, maxH: number): Size {
 		// Apply frame constraints to what we propose to children
 		const constrained = this.constrainProposal(maxW, maxH)
 
@@ -56,7 +56,7 @@ export class OverlayHost extends BaseHost {
 		return this.constrainResult(baseSize)
 	}
 
-	override layout(rect: Rect): void {
+	protected override layoutSelf(rect: Rect): void {
 		const layoutRect = this.layoutWithConstraints(rect)
 
 		// Layout base child to fill our rect
@@ -66,14 +66,16 @@ export class OverlayHost extends BaseHost {
 		}
 
 		// Layout overlay children with their alignment
-		for (let i = 1; i < this.children.length; i++) {
-			const child = this.children[i]
-			const size = this.cachedSizes[i] ?? child.measure(layoutRect.w, layoutRect.h)
-
-			// Read alignment from OverlayItemHost (use type check, not instanceof, for bundler compatibility)
-			const alignment = child.type === "overlayItem" ? (child as OverlayItemHost).alignment : {}
-			child.layout(alignedChildRect(layoutRect, size, alignment.h ?? "center", alignment.v ?? "center"))
-		}
+		layoutAlignedChildren(
+			layoutRect,
+			this.children,
+			this.cachedSizes,
+			(child) => {
+				// Read alignment from OverlayItemHost (use type check, not instanceof, for bundler compatibility)
+				return child.type === "overlayItem" ? (child as OverlayItemHost).alignment : {}
+			},
+			1,
+		)
 	}
 
 	override render(buffer: CellBuffer, palette: Palette): void {