@effect-tui/react 0.12.3 → 0.14.0

package/src/hosts/base.ts

@@ -113,6 +113,21 @@ export abstract class BaseHost implements HostInstance {
 		// which would overwrite any values set here.
 	}
 
+	/**
+	 * Optional pre-frame hook. BaseHost will call prepareSelf() and then recurse into children.
+	 */
+	prepareFrame(): void {
+		this.prepareSelf()
+		for (const child of this.children) {
+			child.prepareFrame?.()
+		}
+	}
+
+	/** Override in subclasses to precompute caches once per frame. */
+	protected prepareSelf(): void {
+		// Default no-op
+	}
+
 	/**
 	 * Resolve a prop that may be a MotionValue/ColorMotionValue.
 	 * If it's a spring, subscribes to changes and returns current value.
@@ -193,6 +208,14 @@ export abstract class BaseHost implements HostInstance {
 	abstract render(buffer: CellBuffer, palette: Palette): void
 
 	layout(rect: Rect): void {
+		this.layoutWithConstraints(rect)
+	}
+
+	/**
+	 * Apply frame constraints and update this.rect.
+	 * Returns the constrained rect for convenience in subclasses.
+	 */
+	protected layoutWithConstraints(rect: Rect): Rect {
 		// Apply frame constraints to the assigned rect
 		let { w, h } = rect
 
@@ -214,6 +237,8 @@ export abstract class BaseHost implements HostInstance {
 			this._lastLayoutH = h
 			this.onLayout({ width: w, height: h, x: rect.x, y: rect.y })
 		}
+
+		return this.rect
 	}
 
 	/**
@@ -322,6 +347,16 @@ export abstract class BaseHost implements HostInstance {
 		this.onLayout = typeof props.onLayout === "function" ? (props.onLayout as typeof this.onLayout) : undefined
 	}
 
+	/**
+	 * Apply a default greedy value when the prop is omitted.
+	 * Subclasses with greedy defaults should call this after super.updateProps().
+	 */
+	protected applyGreedyDefault(props: Record<string, unknown>, fallback: number): void {
+		if (!("greedy" in props)) {
+			this.greedy = fallback
+		}
+	}
+
 	destroy(): void {
 		this.clearSpringSubscriptions()
 		// Override in subclasses if cleanup needed

package/src/hosts/box.ts

@@ -6,9 +6,9 @@ import {
 	type BorderKind,
 	borderChars,
 	drawBorder,
+	fillRectWithInheritedBg,
 	type Padding,
 	type PaddingInput,
-	resolveInheritedBgStyle,
 	resolvePadding,
 	toColorValue,
 } from "../utils/index.js"
@@ -82,14 +82,14 @@ export class BoxHost extends SingleChildHost {
 	}
 
 	override layout(rect: Rect): void {
-		super.layout(rect)
+		const layoutRect = this.layoutWithConstraints(rect)
 
 		const t = this.borderThickness
 		const innerRect: Rect = {
-			x: rect.x + t + this.padding.left,
-			y: rect.y + t + this.padding.top,
-			w: Math.max(0, rect.w - this.insetX),
-			h: Math.max(0, rect.h - this.insetY),
+			x: layoutRect.x + t + this.padding.left,
+			y: layoutRect.y + t + this.padding.top,
+			w: Math.max(0, layoutRect.w - this.insetX),
+			h: Math.max(0, layoutRect.h - this.insetY),
 		}
 
 		// Layout single child
@@ -105,8 +105,7 @@ export class BoxHost extends SingleChildHost {
 
 		// Always clear our rect to ensure stale backgrounds are removed.
 		// If no explicit bg, inherit from parent (so child boxes are transparent over parents)
-		const { styleId: bgStyleId } = resolveInheritedBgStyle(palette, this.bg, this.parent)
-		buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
+		fillRectWithInheritedBg(buffer, palette, { x, y, w, h }, this.bg, this.parent)
 
 		// Draw border
 		if (this.border !== "none" && w >= 2 && h >= 2) {

package/src/hosts/canvas.ts

@@ -79,10 +79,12 @@ export class CanvasHost extends BaseHost {
 	}
 
 	measure(maxW: number, maxH: number): Size {
-		return {
-			w: this.fixedWidth ?? maxW,
-			h: this.fixedHeight ?? maxH,
+		const constrained = this.constrainProposal(maxW, maxH)
+		const size = {
+			w: this.fixedWidth ?? constrained.w,
+			h: this.fixedHeight ?? constrained.h,
 		}
+		return this.constrainResult(size)
 	}
 
 	render(buffer: CellBuffer, palette: Palette): void {

package/src/hosts/codeblock.ts

@@ -50,6 +50,7 @@ export class CodeBlockHost extends BaseHost {
 	}
 
 	measure(maxW: number, maxH: number): Size {
+		const constrained = this.constrainProposal(maxW, maxH)
 		this.cachedLineWidths = this.lines.map((l) => lineDisplayWidth(l))
 		this.gutterWidth = this.computeGutterWidth()
 
@@ -58,10 +59,10 @@ export class CodeBlockHost extends BaseHost {
 
 		const innerHeight = Math.max(1, this.lines.length) + this.insetY
 
-		return {
-			w: Math.min(maxW, contentW),
-			h: Math.min(maxH, innerHeight),
-		}
+		return this.constrainResult({
+			w: Math.min(constrained.w, contentW),
+			h: Math.min(constrained.h, innerHeight),
+		})
 	}
 
 	override layout(rect: Rect): void {

package/src/hosts/flex-container.ts

@@ -103,17 +103,15 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 	}
 
 	override layout(rect: Rect): void {
-		super.layout(rect)
-		// Use this.rect (constrained) not rect (raw input)
-		if (!this.rect) return
+		const layoutRect = this.layoutWithConstraints(rect)
 		const stretchCross = this.axis === "vertical" ? this.alignment === "leading" : this.alignment === "top"
 		const insetX = this.padding.left + this.padding.right
 		const insetY = this.padding.top + this.padding.bottom
 		const innerRect: Rect = {
-			x: this.rect.x + this.padding.left,
-			y: this.rect.y + this.padding.top,
-			w: Math.max(0, this.rect.w - insetX),
-			h: Math.max(0, this.rect.h - insetY),
+			x: layoutRect.x + this.padding.left,
+			y: layoutRect.y + this.padding.top,
+			w: Math.max(0, layoutRect.w - insetX),
+			h: Math.max(0, layoutRect.h - insetY),
 		}
 		layoutFlex(
 			this.axis,

package/src/hosts/index.ts

@@ -8,7 +8,7 @@ import { OverlayHost } from "./overlay.js"
 import { OverlayItemHost } from "./overlay-item.js"
 import { ScrollHost } from "./scroll.js"
 import { SpacerHost } from "./spacer.js"
-import { RawTextHost, SpanHost, StyledTextHost, TextHost } from "./text.js"
+import { RawTextHost, SpanHost, TextHost } from "./text.js"
 import { VStackHost } from "./vstack.js"
 import { ZStackHost } from "./zstack.js"
 
@@ -25,12 +25,10 @@ export { SpacerHost, type SpacerProps } from "./spacer.js"
 export {
 	RawTextHost,
 	SpanHost,
-	StyledTextHost,
 	TextHost,
 	type SpanProps,
 	type SpanStyle,
 	type StyledSpan,
-	type StyledTextProps,
 	type TextProps,
 } from "./text.js"
 export { VStackHost, type VStackProps } from "./vstack.js"
@@ -41,7 +39,6 @@ export { ZStackHost, type ZStackProps } from "./zstack.js"
 export const hostRegistry: Record<string, new (props: any, ctx: HostContext) => BaseHost> = {
 	text: TextHost,
 	span: SpanHost,
-	styledtext: StyledTextHost,
 	spacer: SpacerHost,
 	vstack: VStackHost,
 	hstack: HStackHost,

package/src/hosts/overlay-item.ts

@@ -38,8 +38,8 @@ export class OverlayItemHost extends SingleChildHost {
 	}
 
 	override layout(rect: Rect): void {
-		this.rect = rect
-		this.child?.layout(rect)
+		const layoutRect = this.layoutWithConstraints(rect)
+		this.child?.layout(layoutRect)
 	}
 
 	override render(buffer: CellBuffer, palette: Palette): void {

package/src/hosts/overlay.ts

@@ -18,7 +18,7 @@
 
 import type { CellBuffer, Palette, Rect, Size } from "@effect-tui/core"
 import type { CommonProps, HostContext } from "../reconciler/types.js"
-import { alignInRect } from "../utils/index.js"
+import { alignedChildRect } from "../utils/index.js"
 import { BaseHost } from "./base.js"
 import type { OverlayItemHost } from "./overlay-item.js"
 
@@ -29,6 +29,7 @@ export class OverlayHost extends BaseHost {
 
 	constructor(props: OverlayProps, ctx: HostContext) {
 		super("overlay", props, ctx)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	override measure(maxW: number, maxH: number): Size {
@@ -56,29 +57,22 @@ export class OverlayHost extends BaseHost {
 	}
 
 	override layout(rect: Rect): void {
-		this.rect = rect
+		const layoutRect = this.layoutWithConstraints(rect)
 
 		// Layout base child to fill our rect
 		const baseChild = this.children[0]
 		if (baseChild) {
-			baseChild.layout(rect)
+			baseChild.layout(layoutRect)
 		}
 
 		// 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(rect.w, rect.h)
+			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 : {}
-			const { x, y } = alignInRect(rect, size, alignment.h ?? "center", alignment.v ?? "center")
-
-			child.layout({
-				x,
-				y,
-				w: Math.min(rect.w, size.w),
-				h: Math.min(rect.h, size.h),
-			})
+			child.layout(alignedChildRect(layoutRect, size, alignment.h ?? "center", alignment.v ?? "center"))
 		}
 	}
 

package/src/hosts/scroll.ts

@@ -1,7 +1,7 @@
 // scroll.ts — Scrollable container host
 import type { CellBuffer, Color, Palette } from "@effect-tui/core"
 import type { CommonProps, HostContext, Rect, Size } from "../reconciler/types.js"
-import { resolveInheritedBgStyle } from "../utils/index.js"
+import { fillRectWithInheritedBg } from "../utils/index.js"
 import { SingleChildHost } from "./single-child.js"
 
 export interface ScrollProps extends CommonProps {
@@ -28,6 +28,8 @@ export interface ScrollProps extends CommonProps {
 	onViewportSize?: (width: number, height: number) => void
 	/** Called when effective offset changes (for syncing with useScroll when sticky adjusts) */
 	onEffectiveOffset?: (offset: number) => void
+	/** Called when effective horizontal offset changes */
+	onEffectiveOffsetX?: (offsetX: number) => void
 	/** Called when layout rect changes (for hit testing) */
 	onRect?: (x: number, y: number, w: number, h: number) => void
 }
@@ -46,18 +48,24 @@ export class ScrollHost extends SingleChildHost {
 	onContentSize?: (width: number, height: number) => void
 	onViewportSize?: (width: number, height: number) => void
 	onEffectiveOffset?: (offset: number) => void
+	onEffectiveOffsetX?: (offsetX: number) => void
 	onRect?: (x: number, y: number, w: number, h: number) => void
 
 	// Measured content dimensions (full size before clipping)
 	private contentWidth = 0
 	private contentHeight = 0
 	// Track last reported sizes to avoid redundant callbacks
-	private lastReportedContentW = 0
-	private lastReportedContentH = 0
+	private lastReportedContentW = -1
+	private lastReportedContentH = -1
+	private lastViewportW = -1
+	private lastViewportH = -1
 	private lastRectX = -1
 	private lastRectY = -1
+	private lastRectW = -1
+	private lastRectH = -1
 	// Track if we were at end (for sticky behavior)
 	private wasAtEnd = true
+	private wasAtEndX = true
 	// Effective offset after sticky adjustment (used for rendering)
 	private effectiveOffset = 0
 	private effectiveOffsetX = 0
@@ -100,7 +108,7 @@ export class ScrollHost extends SingleChildHost {
 	}
 
 	override layout(rect: Rect): void {
-		super.layout(rect)
+		const layoutRect = this.layoutWithConstraints(rect)
 
 		// Report content size if changed (deferred from measure() to keep it pure)
 		if (this.contentWidth !== this.lastReportedContentW || this.contentHeight !== this.lastReportedContentH) {
@@ -110,33 +118,41 @@ export class ScrollHost extends SingleChildHost {
 		}
 
 		// Report viewport size if changed (for useScroll hook)
-		// Always report on every layout - React may have recreated the hook with stale refs
-		if (this.onViewportSize) {
-			this.onViewportSize(rect.w, rect.h)
+		if (this.onViewportSize && (layoutRect.w !== this.lastViewportW || layoutRect.h !== this.lastViewportH)) {
+			this.lastViewportW = layoutRect.w
+			this.lastViewportH = layoutRect.h
+			this.onViewportSize(layoutRect.w, layoutRect.h)
 		}
 
 		// Report rect if position changed (for hit testing)
-		if (rect.x !== this.lastRectX || rect.y !== this.lastRectY) {
-			this.lastRectX = rect.x
-			this.lastRectY = rect.y
-			this.onRect?.(rect.x, rect.y, rect.w, rect.h)
+		if (
+			layoutRect.x !== this.lastRectX ||
+			layoutRect.y !== this.lastRectY ||
+			layoutRect.w !== this.lastRectW ||
+			layoutRect.h !== this.lastRectH
+		) {
+			this.lastRectX = layoutRect.x
+			this.lastRectY = layoutRect.y
+			this.lastRectW = layoutRect.w
+			this.lastRectH = layoutRect.h
+			this.onRect?.(layoutRect.x, layoutRect.y, layoutRect.w, layoutRect.h)
 		}
 
 		const child = this.child
 		if (!child) return
 
 		// Calculate max scroll offsets
-		const maxScrollY = Math.max(0, this.contentHeight - rect.h)
-		const maxScrollX = Math.max(0, this.contentWidth - rect.w)
+		const maxScrollY = Math.max(0, this.contentHeight - layoutRect.h)
+		const maxScrollX = Math.max(0, this.contentWidth - layoutRect.w)
 
 		// Start with the offset from props (controlled by useScroll)
 		let scrollY = this.offset
 		let scrollX = this.offsetX
 
-		// Sticky scroll logic:
+		// Sticky scroll logic (vertical):
 		// - If user manually scrolled away from end (offset < effectiveOffset), unstick
 		// - If at end (or was at end and content grew), stay stuck
-		if (this.sticky) {
+		if (this.sticky && (this.axis === "vertical" || this.axis === "both")) {
 			// Detect if user scrolled away (offset prop is less than where we rendered)
 			const userScrolledAway = this.offset < this.effectiveOffset - 1
 
@@ -149,8 +165,20 @@ export class ScrollHost extends SingleChildHost {
 			}
 		}
 
+		// Sticky scroll logic (horizontal)
+		if (this.sticky && (this.axis === "horizontal" || this.axis === "both")) {
+			const userScrolledAway = this.offsetX < this.effectiveOffsetX - 1
+
+			if (userScrolledAway) {
+				this.wasAtEndX = false
+			} else if (this.wasAtEndX) {
+				scrollX = maxScrollX
+			}
+		}
+
 		// Track if we're at end for next frame
 		this.wasAtEnd = scrollY >= maxScrollY - 1
+		this.wasAtEndX = scrollX >= maxScrollX - 1
 
 		// Clamp offsets
 		scrollY = Math.max(0, Math.min(maxScrollY, scrollY))
@@ -161,25 +189,28 @@ export class ScrollHost extends SingleChildHost {
 		if (scrollY !== this.effectiveOffset || scrollY !== this.offset) {
 			this.onEffectiveOffset?.(scrollY)
 		}
+		if (scrollX !== this.effectiveOffsetX || scrollX !== this.offsetX) {
+			this.onEffectiveOffsetX?.(scrollX)
+		}
 		this.effectiveOffset = scrollY
 		this.effectiveOffsetX = scrollX
 
 		// Handle alignment when content is smaller than viewport
 		if (this.align === "end") {
-			if (this.contentHeight < rect.h && (this.axis === "vertical" || this.axis === "both")) {
+			if (this.contentHeight < layoutRect.h && (this.axis === "vertical" || this.axis === "both")) {
 				// Align to bottom
-				scrollY = -(rect.h - this.contentHeight)
+				scrollY = -(layoutRect.h - this.contentHeight)
 			}
-			if (this.contentWidth < rect.w && (this.axis === "horizontal" || this.axis === "both")) {
+			if (this.contentWidth < layoutRect.w && (this.axis === "horizontal" || this.axis === "both")) {
 				// Align to right
-				scrollX = -(rect.w - this.contentWidth)
+				scrollX = -(layoutRect.w - this.contentWidth)
 			}
 		}
 
 		// Layout child at offset position
 		const childRect: Rect = {
-			x: rect.x - scrollX,
-			y: rect.y - scrollY,
+			x: layoutRect.x - scrollX,
+			y: layoutRect.y - scrollY,
 			w: this.contentWidth,
 			h: this.contentHeight,
 		}
@@ -191,8 +222,7 @@ export class ScrollHost extends SingleChildHost {
 		const { x, y, w, h } = this.rect
 
 		// Fill background (inherit from parent if not explicitly set)
-		const { styleId: bgStyleId } = resolveInheritedBgStyle(palette, this.bg, this.parent)
-		buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
+		fillRectWithInheritedBg(buffer, palette, { x, y, w, h }, this.bg, this.parent)
 
 		// Render children with clipping
 		buffer.withClip(x, y, w, h, () => {
@@ -254,9 +284,7 @@ export class ScrollHost extends SingleChildHost {
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
 		// Scroll is greedy by default unless explicitly set to false
-		if (!("greedy" in props)) {
-			this.greedy = 1
-		}
+		this.applyGreedyDefault(props, 1)
 		if (props.axis !== undefined) this.axis = (props.axis as ScrollProps["axis"]) ?? "vertical"
 		if (props.offset !== undefined) this.offset = props.offset as number
 		if (props.offsetX !== undefined) this.offsetX = props.offsetX as number
@@ -267,6 +295,7 @@ export class ScrollHost extends SingleChildHost {
 		this.onContentSize = props.onContentSize as ScrollProps["onContentSize"]
 		this.onViewportSize = props.onViewportSize as ScrollProps["onViewportSize"]
 		this.onEffectiveOffset = props.onEffectiveOffset as ScrollProps["onEffectiveOffset"]
+		this.onEffectiveOffsetX = props.onEffectiveOffsetX as ScrollProps["onEffectiveOffsetX"]
 		this.onRect = props.onRect as ScrollProps["onRect"]
 	}
 }

package/src/hosts/spacer.ts

@@ -37,9 +37,7 @@ export class SpacerHost extends BaseHost {
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
 		// Spacer is greedy by default unless explicitly set to false
-		if (!("greedy" in props)) {
-			this.greedy = 1
-		}
+		this.applyGreedyDefault(props, 1)
 		if (props.minWidth !== undefined) this.minWidth = props.minWidth as number
 		if (props.minHeight !== undefined) this.minHeight = props.minHeight as number
 	}