@effect-tui/react 0.15.2 → 2.0.0

package/src/hooks/use-scroll.ts

@@ -2,7 +2,7 @@
 
 import type { KeyMsg } from "@effect-tui/core"
 import { useCallback, useLayoutEffect, useMemo, useReducer, useRef } from "react"
-import type { ScrollProps } from "../hosts/scroll.js"
+import type { ScrollAlign, ScrollAxis, ScrollLayoutChange, ScrollProps } from "../hosts/scroll.js"
 import { useTerminalSize } from "../renderer.js"
 import { useKeyboard } from "./use-keyboard.js"
 
@@ -86,21 +86,21 @@ class MacOSScrollAccel implements ScrollAcceleration {
 // ============================================================================
 
 export interface ScrollState {
-	/** Current scroll offset (pixels from start) for the primary axis */
-	offset: number
-	/** Maximum scroll offset for the primary axis */
-	maxOffset: number
-	/** Viewport size for the primary axis */
-	viewportSize: number
-	/** Whether viewport size has been measured by the host (primary axis) */
-	viewportMeasured: boolean
-	/** Total content size for the primary axis */
-	contentSize: number
-	/** Whether we're at the start edge (primary axis) */
-	atStart: boolean
-	/** Whether we're at the end edge (primary axis) */
-	atEnd: boolean
-	/** Current horizontal offset (pixels from start) */
+	/** Current vertical offset (pixels from top) */
+	offsetY: number
+	/** Maximum vertical offset */
+	maxOffsetY: number
+	/** Vertical viewport size */
+	viewportSizeY: number
+	/** Whether vertical viewport size has been measured by the host */
+	viewportMeasuredY: boolean
+	/** Total vertical content size */
+	contentSizeY: number
+	/** Whether we're at the top edge */
+	atStartY: boolean
+	/** Whether we're at the bottom edge */
+	atEndY: boolean
+	/** Current horizontal offset (pixels from left) */
 	offsetX: number
 	/** Maximum horizontal offset */
 	maxOffsetX: number
@@ -118,31 +118,25 @@ export interface ScrollState {
 
 export interface UseScrollOptions {
 	/** Scroll axis: "vertical" (default), "horizontal", or "both" */
-	axis?: "vertical" | "horizontal" | "both"
-	/** Controlled content size for the primary axis (skips host measurement when provided) */
-	contentSize?: number
+	axis?: ScrollAxis
 	/** Controlled content width (skips host measurement when provided) */
 	contentWidth?: number
 	/** Controlled content height (skips host measurement when provided) */
 	contentHeight?: number
-	/** @internal Initial viewport size override (useful for tests) */
-	initialViewportSize?: number
 	/** @internal Initial viewport width override (useful for tests) */
 	initialViewportWidth?: number
 	/** @internal Initial viewport height override (useful for tests) */
 	initialViewportHeight?: number
-	/** @internal Initial content size override (useful for tests) */
-	initialContentSize?: number
 	/** @internal Initial content width override (useful for tests) */
 	initialContentWidth?: number
 	/** @internal Initial content height override (useful for tests) */
 	initialContentHeight?: number
-	/** Initial scroll offset for the primary axis */
-	initialOffset?: number
+	/** Initial vertical scroll offset */
+	initialOffsetY?: number
 	/** Initial horizontal scroll offset */
 	initialOffsetX?: number
 	/** Alignment when content is smaller than viewport */
-	align?: "start" | "end"
+	align?: ScrollAlign
 	/** Whether to show scrollbars */
 	showScrollbar?: boolean
 	/** Enable keyboard navigation (default: true) */
@@ -157,23 +151,25 @@ export interface UseScrollOptions {
 	arrowSpeed?: number
 	/** Scroll speed for page up/down (fraction of viewport, default: 0.5) */
 	pageSpeed?: number
+	/** Optional layout callback (content/viewport/offset/rect). */
+	onScrollLayoutChange?: (event: ScrollLayoutChange) => void
 }
 
 export interface UseScrollReturn {
 	/** Current scroll state */
 	state: ScrollState
-	/** Set scroll offset directly (primary axis) */
-	setOffset: (offset: number) => void
+	/** Set vertical scroll offset directly */
+	setOffsetY: (offsetY: number) => void
 	/** Set horizontal scroll offset directly */
 	setOffsetX: (offsetX: number) => void
-	/** Scroll by delta pixels (primary axis) */
-	scrollBy: (delta: number) => void
+	/** Scroll by delta pixels vertically */
+	scrollByY: (delta: number) => void
 	/** Scroll by delta pixels horizontally */
 	scrollByX: (delta: number) => void
-	/** Scroll to start (primary axis) */
-	scrollToStart: () => void
-	/** Scroll to end (primary axis) */
-	scrollToEnd: () => void
+	/** Scroll to top */
+	scrollToStartY: () => void
+	/** Scroll to bottom */
+	scrollToEndY: () => void
 	/** Scroll to horizontal start */
 	scrollToStartX: () => void
 	/** Scroll to horizontal end */
@@ -187,7 +183,7 @@ export interface UseScrollReturn {
 	 * @param totalSize - Optional known total content size (avoids stale state issues)
 	 * @param axis - Axis to scroll (defaults to vertical)
 	 */
-	scrollToVisible: (
+	scrollIntoView: (
 		position: number,
 		itemSize?: number,
 		padding?: number,
@@ -287,18 +283,15 @@ const reduceScroll = (state: ScrollInternalState, action: ScrollAction): ScrollI
 export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	const {
 		axis = "vertical",
-		contentSize,
 		contentWidth,
 		contentHeight,
-		initialViewportSize,
 		initialViewportWidth,
 		initialViewportHeight,
-		initialContentSize,
 		initialContentWidth,
 		initialContentHeight,
-		initialOffset = 0,
+		initialOffsetY = 0,
 		initialOffsetX = 0,
-		align = "start",
+		align,
 		showScrollbar = true,
 		enableKeyboard = true,
 		enableMouseWheel = true,
@@ -306,31 +299,30 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		sticky = false,
 		arrowSpeed = 1,
 		pageSpeed = 0.5,
+		onScrollLayoutChange,
 	} = options
 
 	const { width: termWidth, height: termHeight } = useTerminalSize()
 	const enableY = axis === "vertical" || axis === "both"
 	const enableX = axis === "horizontal" || axis === "both"
-	const primaryAxis: "vertical" | "horizontal" = axis === "horizontal" ? "horizontal" : "vertical"
+	const useHorizontalPrimary = axis === "horizontal"
 
-	const controlledContentHeight = contentHeight ?? (axis !== "horizontal" ? contentSize : undefined)
-	const controlledContentWidth = contentWidth ?? (axis === "horizontal" ? contentSize : undefined)
+	const controlledContentHeight = contentHeight
+	const controlledContentWidth = contentWidth
 
-	const baseViewportHeight =
-		initialViewportHeight ?? (axis !== "horizontal" ? initialViewportSize : undefined) ?? termHeight
-	const baseViewportWidth =
-		initialViewportWidth ?? (axis === "horizontal" ? initialViewportSize : undefined) ?? termWidth
+	const baseViewportHeight = initialViewportHeight ?? termHeight
+	const baseViewportWidth = initialViewportWidth ?? termWidth
 
 	const baseContentHeight =
-		controlledContentHeight ?? initialContentHeight ?? (axis !== "horizontal" ? initialContentSize : undefined) ?? 0
+		controlledContentHeight ?? initialContentHeight ?? 0
 	const baseContentWidth =
-		controlledContentWidth ?? initialContentWidth ?? (axis === "horizontal" ? initialContentSize : undefined) ?? 0
+		controlledContentWidth ?? initialContentWidth ?? 0
 
-	const initialOffsetY = axis === "horizontal" ? 0 : initialOffset
-	const initialOffsetXResolved = axis === "horizontal" ? initialOffset : initialOffsetX
+	const initialOffsetYResolved = axis === "horizontal" ? 0 : initialOffsetY
+	const initialOffsetXResolved = axis === "vertical" ? 0 : initialOffsetX
 
 	const [internalY, dispatchY] = useReducer(reduceScroll, {
-		offset: clampOffset(initialOffsetY, baseContentHeight, baseViewportHeight),
+		offset: clampOffset(initialOffsetYResolved, baseContentHeight, baseViewportHeight),
 		contentSize: baseContentHeight,
 		viewportSize: baseViewportHeight,
 		viewportMeasured: false,
@@ -398,17 +390,6 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		[dispatchX, enableX],
 	)
 
-	const scrollBy = useCallback(
-		(delta: number) => {
-			if (primaryAxis === "horizontal") {
-				scrollByX(delta)
-			} else {
-				scrollByY(delta)
-			}
-		},
-		[primaryAxis, scrollByX, scrollByY],
-	)
-
 	const scrollToStartY = useCallback(() => {
 		dispatchY({ type: "set-offset", offset: 0 })
 		accumulatorYRef.current = 0
@@ -421,14 +402,6 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		accelX.reset()
 	}, [dispatchX, accelX])
 
-	const scrollToStart = useCallback(() => {
-		if (primaryAxis === "horizontal") {
-			scrollToStartX()
-		} else {
-			scrollToStartY()
-		}
-	}, [primaryAxis, scrollToStartX, scrollToStartY])
-
 	const scrollToEndY = useCallback(() => {
 		const current = stateYRef.current
 		const maxOffset = Math.max(0, current.contentSize - current.viewportSize)
@@ -445,27 +418,6 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		accelX.reset()
 	}, [dispatchX, accelX])
 
-	const scrollToEnd = useCallback(() => {
-		if (primaryAxis === "horizontal") {
-			scrollToEndX()
-		} else {
-			scrollToEndY()
-		}
-	}, [primaryAxis, scrollToEndX, scrollToEndY])
-
-	// Handle content size changes (for sticky scroll)
-	const handleContentSize = useCallback(
-		(width: number, height: number) => {
-			if (enableY && controlledContentHeight === undefined) {
-				dispatchY({ type: "set-content", size: height })
-			}
-			if (enableX && controlledContentWidth === undefined) {
-				dispatchX({ type: "set-content", size: width })
-			}
-		},
-		[controlledContentHeight, controlledContentWidth, dispatchX, dispatchY, enableX, enableY],
-	)
-
 	useLayoutEffect(() => {
 		if (!enableY || controlledContentHeight === undefined) return
 		dispatchY({ type: "set-content", size: controlledContentHeight })
@@ -476,19 +428,35 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		dispatchX({ type: "set-content", size: controlledContentWidth })
 	}, [controlledContentWidth, dispatchX, enableX])
 
-	// Handle viewport size changes (reported by scroll component)
-	const handleViewportSize = useCallback(
-		(width: number, height: number) => {
+	const handleScrollLayout = useCallback(
+		(event: ScrollLayoutChange) => {
 			if (enableY) {
-				viewportYRef.current = height
-				dispatchY({ type: "set-viewport", size: height })
+				viewportYRef.current = event.viewport.height
+				dispatchY({ type: "set-viewport", size: event.viewport.height })
+				if (controlledContentHeight === undefined) {
+					dispatchY({ type: "set-content", size: event.content.height })
+				}
+				dispatchY({ type: "sync-effective-offset", offset: event.offset.y })
 			}
 			if (enableX) {
-				viewportXRef.current = width
-				dispatchX({ type: "set-viewport", size: width })
+				viewportXRef.current = event.viewport.width
+				dispatchX({ type: "set-viewport", size: event.viewport.width })
+				if (controlledContentWidth === undefined) {
+					dispatchX({ type: "set-content", size: event.content.width })
+				}
+				dispatchX({ type: "sync-effective-offset", offset: event.offset.x })
 			}
+			onScrollLayoutChange?.(event)
 		},
-		[dispatchX, dispatchY, enableX, enableY],
+		[
+			controlledContentHeight,
+			controlledContentWidth,
+			dispatchX,
+			dispatchY,
+			enableX,
+			enableY,
+			onScrollLayoutChange,
+		],
 	)
 
 	// Keyboard handler
@@ -497,7 +465,7 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 			// Mouse wheel comes as pageup/pagedown with meta=true
 			// Handle separately from keyboard since enableKeyboard shouldn't disable mouse
 			if (key.meta && enableMouseWheel && (key.name === "pageup" || key.name === "pagedown")) {
-				const multiplier = primaryAxis === "horizontal" && !enableY ? accelX.tick() : accelY.tick()
+				const multiplier = useHorizontalPrimary && !enableY ? accelX.tick() : accelY.tick()
 				const delta = Math.ceil(arrowSpeed * multiplier)
 				if (axis === "horizontal") {
 					scrollByX(key.name === "pageup" ? -delta : delta)
@@ -569,7 +537,7 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 			accelX,
 			accelY,
 			enableY,
-			primaryAxis,
+			useHorizontalPrimary,
 			scrollByX,
 			scrollByY,
 			scrollToEndX,
@@ -585,7 +553,7 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	// Uses refs to avoid stale closures, but re-creates when viewport size changes
 	// so selection effects can re-run after measurement updates.
 	// Bypasses clampOffset because it uses totalSize for accurate clamping
-	const scrollToVisible = useCallback(
+	const scrollIntoView = useCallback(
 		(
 			position: number,
 			itemSize = 1,
@@ -633,17 +601,6 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		[dispatchX],
 	)
 
-	const setOffset = useCallback(
-		(newOffset: number) => {
-			if (primaryAxis === "horizontal") {
-				setOffsetX(newOffset)
-			} else {
-				setOffsetY(newOffset)
-			}
-		},
-		[primaryAxis, setOffsetX, setOffsetY],
-	)
-
 	// Calculate derived state
 	const maxOffsetY = Math.max(0, internalY.contentSize - internalY.viewportSize)
 	const maxOffsetX = Math.max(0, internalX.contentSize - internalX.viewportSize)
@@ -652,19 +609,14 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	const atStartX = internalX.offset <= 0
 	const atEndX = internalX.offset >= maxOffsetX
 
-	const primaryState = primaryAxis === "horizontal" ? internalX : internalY
-	const primaryMaxOffset = primaryAxis === "horizontal" ? maxOffsetX : maxOffsetY
-	const primaryAtStart = primaryAxis === "horizontal" ? atStartX : atStartY
-	const primaryAtEnd = primaryAxis === "horizontal" ? atEndX : atEndY
-
 	const state: ScrollState = {
-		offset: primaryState.offset,
-		maxOffset: primaryMaxOffset,
-		viewportSize: primaryState.viewportSize,
-		viewportMeasured: primaryState.viewportMeasured,
-		contentSize: primaryState.contentSize,
-		atStart: primaryAtStart,
-		atEnd: primaryAtEnd,
+		offsetY: internalY.offset,
+		maxOffsetY,
+		viewportSizeY: internalY.viewportSize,
+		viewportMeasuredY: internalY.viewportMeasured,
+		contentSizeY: internalY.contentSize,
+		atStartY,
+		atEndY,
 		offsetX: internalX.offset,
 		maxOffsetX,
 		viewportSizeX: internalX.viewportSize,
@@ -674,39 +626,27 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		atEndX,
 	}
 
-	// Handle effective offset sync from host (when sticky adjusts the offset)
-	const handleEffectiveOffset = useCallback((effectiveOffset: number) => {
-		dispatchY({ type: "sync-effective-offset", offset: effectiveOffset })
-	}, [dispatchY])
-
-	const handleEffectiveOffsetX = useCallback((effectiveOffsetX: number) => {
-		dispatchX({ type: "sync-effective-offset", offset: effectiveOffsetX })
-	}, [dispatchX])
-
 	const scrollProps: ScrollProps = {
-		offset: enableY ? internalY.offset : 0,
+		offsetY: enableY ? internalY.offset : 0,
 		offsetX: enableX ? internalX.offset : 0,
 		axis,
 		align,
 		sticky,
 		showScrollbar,
-		onContentSize: handleContentSize,
-		onViewportSize: handleViewportSize,
-		onEffectiveOffset: enableY ? handleEffectiveOffset : undefined,
-		onEffectiveOffsetX: enableX ? handleEffectiveOffsetX : undefined,
+		onScrollLayoutChange: handleScrollLayout,
 	}
 
 	return {
 		state,
-		setOffset,
+		setOffsetY,
 		setOffsetX,
-		scrollBy,
+		scrollByY,
 		scrollByX,
-		scrollToStart,
-		scrollToEnd,
+		scrollToStartY,
+		scrollToEndY,
 		scrollToStartX,
 		scrollToEndX,
-		scrollToVisible,
+		scrollIntoView,
 		scrollProps,
 	}
 }

package/src/hosts/base.ts

@@ -67,6 +67,12 @@ export abstract class BaseHost implements HostInstance {
 	parent: HostInstance | null = null
 	children: HostInstance[] = []
 	rect: Rect | null = null
+	private _layoutDirty = true
+	private _renderDirty = true
+	private _lastMeasureW = -1
+	private _lastMeasureH = -1
+	private _lastMeasuredSize: Size | null = null
+	private _lastLayoutRect: Rect | null = null
 
 	// Greedy layout - expands to fill remaining space
 	// undefined = not greedy (hug content)
@@ -117,17 +123,38 @@ export abstract class BaseHost implements HostInstance {
 	 * Optional pre-frame hook. BaseHost will call prepareSelf() and then recurse into children.
 	 */
 	prepareFrame(): void {
-		this.prepareSelf()
+		this.ensurePrepared()
 		for (const child of this.children) {
 			child.prepareFrame?.()
 		}
 	}
 
 	/** Override in subclasses to precompute caches once per frame. */
-	protected prepareSelf(): void {
+	protected prepareSelf(_layoutDirty: boolean, _renderDirty: boolean): void {
 		// Default no-op
 	}
 
+	protected ensurePrepared(): void {
+		if (!this._layoutDirty && !this._renderDirty) return
+		const layoutDirty = this._layoutDirty
+		const renderDirty = this._renderDirty
+		this._renderDirty = false
+		this.prepareSelf(layoutDirty, renderDirty)
+	}
+
+	invalidateLayout(): void {
+		this._layoutDirty = true
+		this._renderDirty = true
+		this._lastMeasuredSize = null
+		this.ctx.requestRender()
+		this.parent?.invalidateLayout?.()
+	}
+
+	invalidateRender(): void {
+		this._renderDirty = true
+		this.ctx.requestRender()
+	}
+
 	/**
 	 * Resolve a prop that may be a MotionValue/ColorMotionValue.
 	 * If it's a spring, subscribes to changes and returns current value.
@@ -204,10 +231,39 @@ export abstract class BaseHost implements HostInstance {
 		this._springSubscriptions.clear()
 	}
 
-	abstract measure(maxW: number, maxH: number): Size
+	measure(maxW: number, maxH: number): Size {
+		const constraintsUnchanged = this._lastMeasureW === maxW && this._lastMeasureH === maxH
+		if (!this._layoutDirty && constraintsUnchanged && this._lastMeasuredSize) {
+			return this._lastMeasuredSize
+		}
+
+		if (!constraintsUnchanged) {
+			this._layoutDirty = true
+		}
+
+		const size = this.measureSelf(maxW, maxH)
+		this._lastMeasureW = maxW
+		this._lastMeasureH = maxH
+		this._lastMeasuredSize = size
+		return size
+	}
+
+	protected abstract measureSelf(maxW: number, maxH: number): Size
 	abstract render(buffer: CellBuffer, palette: Palette): void
 
 	layout(rect: Rect): void {
+		const prev = this._lastLayoutRect
+		const rectUnchanged =
+			prev?.x === rect.x && prev?.y === rect.y && prev?.w === rect.w && prev?.h === rect.h
+
+		if (!this._layoutDirty && rectUnchanged) return
+
+		this.layoutSelf(rect)
+		this._layoutDirty = false
+		this._lastLayoutRect = this.rect ?? rect
+	}
+
+	protected layoutSelf(rect: Rect): void {
 		this.layoutWithConstraints(rect)
 	}
 
@@ -319,6 +375,7 @@ export abstract class BaseHost implements HostInstance {
 	updateProps(props: Record<string, unknown>): void {
 		// Greedy layout - reset to undefined unless explicitly set
 		// Subclasses like Spacer/Scroll set their own default before calling super
+		const prevGreedy = this.greedy
 		if ("greedy" in props) {
 			const greedy = props.greedy
 			if (greedy === true) {
@@ -336,6 +393,12 @@ export abstract class BaseHost implements HostInstance {
 		}
 
 		// Frame constraints - only accept valid numbers (ignore strings like "100%")
+		const prevFrameWidth = this.frameWidth
+		const prevFrameHeight = this.frameHeight
+		const prevFrameMinWidth = this.frameMinWidth
+		const prevFrameMaxWidth = this.frameMaxWidth
+		const prevFrameMinHeight = this.frameMinHeight
+		const prevFrameMaxHeight = this.frameMaxHeight
 		this.frameWidth = typeof props.width === "number" ? props.width : undefined
 		this.frameHeight = typeof props.height === "number" ? props.height : undefined
 		this.frameMinWidth = typeof props.minWidth === "number" ? props.minWidth : undefined
@@ -345,6 +408,19 @@ export abstract class BaseHost implements HostInstance {
 
 		// onLayout callback
 		this.onLayout = typeof props.onLayout === "function" ? (props.onLayout as typeof this.onLayout) : undefined
+
+		const layoutChanged =
+			prevGreedy !== this.greedy ||
+			prevFrameWidth !== this.frameWidth ||
+			prevFrameHeight !== this.frameHeight ||
+			prevFrameMinWidth !== this.frameMinWidth ||
+			prevFrameMaxWidth !== this.frameMaxWidth ||
+			prevFrameMinHeight !== this.frameMinHeight ||
+			prevFrameMaxHeight !== this.frameMaxHeight
+
+		if (layoutChanged) {
+			this.invalidateLayout()
+		}
 	}
 
 	/**
@@ -353,7 +429,11 @@ export abstract class BaseHost implements HostInstance {
 	 */
 	protected applyGreedyDefault(props: Record<string, unknown>, fallback: number): void {
 		if (!("greedy" in props)) {
+			const prevGreedy = this.greedy
 			this.greedy = fallback
+			if (prevGreedy !== this.greedy) {
+				this.invalidateLayout()
+			}
 		}
 	}
 
@@ -366,6 +446,7 @@ export abstract class BaseHost implements HostInstance {
 	appendChild(child: HostInstance): void {
 		this.children.push(child)
 		child.parent = this
+		this.invalidateLayout()
 	}
 
 	removeChild(child: HostInstance): void {
@@ -374,6 +455,7 @@ export abstract class BaseHost implements HostInstance {
 			this.children.splice(idx, 1)
 			child.parent = null
 		}
+		this.invalidateLayout()
 	}
 
 	insertBefore(child: HostInstance, before: HostInstance): void {
@@ -388,6 +470,7 @@ export abstract class BaseHost implements HostInstance {
 			this.children.push(child)
 		}
 		child.parent = this
+		this.invalidateLayout()
 	}
 
 	/**

package/src/hosts/box.ts

@@ -65,7 +65,7 @@ export class BoxHost extends SingleChildHost {
 		return this.borderThickness + titleHeight + this.padding.top + this.padding.bottom + this.borderThickness
 	}
 
-	measure(maxW: number, maxH: number): Size {
+	protected measureSelf(maxW: number, maxH: number): Size {
 		// Apply frame constraints first
 		const constrained = this.constrainProposal(maxW, maxH)
 
@@ -91,7 +91,7 @@ export class BoxHost extends SingleChildHost {
 		return this.constrainResult(naturalSize)
 	}
 
-	override layout(rect: Rect): void {
+	protected override layoutSelf(rect: Rect): void {
 		const layoutRect = this.layoutWithConstraints(rect)
 
 		const t = this.borderThickness
@@ -173,6 +173,15 @@ export class BoxHost extends SingleChildHost {
 
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
+		const prevPadding = this.padding
+		const prevBorder = this.border
+		const prevBorderColor = this.borderColor
+		const prevBg = this.bg
+		const prevTitle = this.title
+		const prevTitleColor = this.titleColor
+		const prevTitleBold = this.titleBold
+		const prevTitleDivider = this.titleDivider
+
 		this.padding = resolvePadding(props.padding as BoxProps["padding"])
 		this.border = (props.border as BorderKind | undefined) ?? "none"
 		// Color props support MotionValue/ColorMotionValue - auto-subscribe and animate
@@ -188,5 +197,31 @@ export class BoxHost extends SingleChildHost {
 		}) as Color | undefined
 		this.titleBold = Boolean(props.titleBold)
 		this.titleDivider = Boolean(props.titleDivider)
+
+		const paddingChanged =
+			prevPadding.top !== this.padding.top ||
+			prevPadding.right !== this.padding.right ||
+			prevPadding.bottom !== this.padding.bottom ||
+			prevPadding.left !== this.padding.left
+		const layoutChanged =
+			paddingChanged ||
+			prevBorder !== this.border ||
+			prevTitle !== this.title ||
+			prevTitleDivider !== this.titleDivider
+
+		if (layoutChanged) {
+			this.invalidateLayout()
+			return
+		}
+
+		const renderChanged =
+			prevBorderColor !== this.borderColor ||
+			prevBg !== this.bg ||
+			prevTitleColor !== this.titleColor ||
+			prevTitleBold !== this.titleBold
+
+		if (renderChanged) {
+			this.invalidateRender()
+		}
 	}
 }