@effect-tui/react 0.10.2 → 0.12.0

package/jsx-runtime.ts

@@ -36,9 +36,8 @@ export declare namespace JSX {
 
 	export interface IntrinsicAttributes extends React.Attributes {}
 
-	// Extend React's intrinsic elements but override our custom ones
-	export interface IntrinsicElements extends React.JSX.IntrinsicElements {
-		// Our custom TUI elements (override any React conflicts)
+	// Custom TUI elements only - no React DOM elements
+	export interface IntrinsicElements {
 		text: TextProps & { children?: React.ReactNode }
 		span: SpanProps & { children?: React.ReactNode }
 		styledtext: StyledTextProps

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.10.2",
+	"version": "0.12.0",
 	"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.10.2",
+		"@effect-tui/core": "^0.12.0",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/components/ListView.tsx

@@ -90,8 +90,8 @@ export function ListView<T>({
 	const { state, scrollProps, scrollToVisible } = useScroll({
 		enableKeyboard: false, // Parent handles keyboard for selection
 		enableMouseWheel: true, // Free scroll with wheel
+		contentSize: __debugContentSize ?? totalHeight,
 		initialViewportSize: __debugViewportSize,
-		initialContentSize: __debugContentSize,
 	})
 	const viewportMeasured = __debugViewportMeasured ?? state.viewportMeasured
 	const viewportSize = __debugViewportSize ?? state.viewportSize
@@ -121,24 +121,24 @@ export function ListView<T>({
 		{ action: "press", button: "left" },
 	)
 
-	// Track previous selection to detect changes
+	// Track previous selection and viewport to detect changes
 	const prevSelectedRef = useRef(selectedIndex)
-	// Track previous scrollToVisible reference to detect viewport changes
-	const prevScrollToVisibleRef = useRef(scrollToVisible)
+	const prevViewportRef = useRef({ measured: viewportMeasured, size: viewportSize })
 
 	// Scroll to keep selection visible when it changes OR when viewport size changes
 	// useLayoutEffect runs before paint - prevents visible "jump" when navigating
 	useLayoutEffect(() => {
 		const selectionChanged = selectedIndex !== prevSelectedRef.current
-		const viewportChanged = scrollToVisible !== prevScrollToVisibleRef.current
+		const viewportChanged =
+			viewportMeasured !== prevViewportRef.current.measured || viewportSize !== prevViewportRef.current.size
 
 		if (selectionChanged || viewportChanged) {
 			prevSelectedRef.current = selectedIndex
-			prevScrollToVisibleRef.current = scrollToVisible
+			prevViewportRef.current = { measured: viewportMeasured, size: viewportSize }
 			// Pass totalHeight to avoid stale contentSize issues when jumping to end
 			scrollToVisible(selectedIndex, itemHeight, scrollPadding, totalHeight)
 		}
-	}, [selectedIndex, itemHeight, scrollPadding, scrollToVisible, totalHeight])
+	}, [selectedIndex, itemHeight, scrollPadding, scrollToVisible, totalHeight, viewportMeasured, viewportSize])
 
 	// Also scroll on initial render if selection is not 0
 	useEffect(() => {

package/src/hooks/use-scroll.ts

@@ -1,7 +1,7 @@
 // use-scroll.ts — Hook for managing scroll state with keyboard/mouse input
 
 import type { KeyMsg } from "@effect-tui/core"
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useLayoutEffect, useMemo, useReducer, useRef } from "react"
 import { useTerminalSize } from "../renderer.js"
 import { useKeyboard } from "./use-keyboard.js"
 
@@ -104,6 +104,8 @@ export interface ScrollState {
 export interface UseScrollOptions {
 	/** Scroll axis: "vertical" (default) or "horizontal" */
 	axis?: "vertical" | "horizontal"
+	/** Controlled content size (skips host measurement when provided) */
+	contentSize?: number
 	/** @internal Initial viewport size override (useful for tests) */
 	initialViewportSize?: number
 	/** @internal Initial content size override (useful for tests) */
@@ -150,10 +152,79 @@ export interface UseScrollReturn {
 		axis: "vertical" | "horizontal"
 		onContentSize: (width: number, height: number) => void
 		onViewportSize: (width: number, height: number) => void
+		onEffectiveOffset?: (offset: number) => void
 		onRect?: (x: number, y: number, w: number, h: number) => void
 	}
 }
 
+type ScrollInternalState = {
+	offset: number
+	contentSize: number
+	viewportSize: number
+	viewportMeasured: boolean
+	sticky: boolean
+}
+
+type ScrollAction =
+	| { type: "set-viewport"; size: number }
+	| { type: "set-content"; size: number }
+	| { type: "set-offset"; offset: number }
+	| { type: "scroll-by"; delta: number }
+	| { type: "sync-effective-offset"; offset: number }
+	| { type: "set-sticky"; sticky: boolean }
+
+const clampOffset = (offset: number, contentSize: number, viewportSize: number): number => {
+	const maxOffset = Math.max(0, contentSize - viewportSize)
+	return Math.max(0, Math.min(maxOffset, offset))
+}
+
+const reduceScroll = (state: ScrollInternalState, action: ScrollAction): ScrollInternalState => {
+	switch (action.type) {
+		case "set-viewport": {
+			if (state.viewportSize === action.size && state.viewportMeasured) return state
+			const next = {
+				...state,
+				viewportSize: action.size,
+				viewportMeasured: true,
+			}
+			const clamped = clampOffset(state.offset, next.contentSize, next.viewportSize)
+			return clamped === next.offset ? next : { ...next, offset: clamped }
+		}
+		case "set-content": {
+			if (state.contentSize === action.size) return state
+			const prevMaxOffset = Math.max(0, state.contentSize - state.viewportSize)
+			const wasAtEnd = state.offset >= prevMaxOffset - 1
+			const next = { ...state, contentSize: action.size }
+			if (state.sticky && wasAtEnd) {
+				const maxOffset = Math.max(0, action.size - state.viewportSize)
+				return maxOffset === next.offset ? next : { ...next, offset: maxOffset }
+			}
+			const clamped = clampOffset(state.offset, action.size, state.viewportSize)
+			return clamped === next.offset ? next : { ...next, offset: clamped }
+		}
+		case "set-offset": {
+			const clamped = clampOffset(action.offset, state.contentSize, state.viewportSize)
+			if (clamped === state.offset) return state
+			return { ...state, offset: clamped }
+		}
+		case "scroll-by": {
+			if (action.delta === 0) return state
+			const clamped = clampOffset(state.offset + action.delta, state.contentSize, state.viewportSize)
+			if (clamped === state.offset) return state
+			return { ...state, offset: clamped }
+		}
+		case "sync-effective-offset": {
+			const clamped = clampOffset(action.offset, state.contentSize, state.viewportSize)
+			if (clamped === state.offset) return state
+			return { ...state, offset: clamped }
+		}
+		case "set-sticky": {
+			if (state.sticky === action.sticky) return state
+			return { ...state, sticky: action.sticky }
+		}
+	}
+}
+
 /**
  * Hook for managing scroll state with keyboard/mouse input.
  *
@@ -175,6 +246,7 @@ export interface UseScrollReturn {
 export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	const {
 		axis = "vertical",
+		contentSize: controlledContentSize,
 		initialViewportSize,
 		initialContentSize,
 		initialOffset = 0,
@@ -188,17 +260,18 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 
 	const { width: termWidth, height: termHeight } = useTerminalSize()
 	const baseViewportSize = initialViewportSize ?? (axis === "vertical" ? termHeight : termWidth)
-
-	// Scroll state
-	const [offset, setOffsetRaw] = useState(initialOffset)
-	const [contentSize, setContentSize] = useState(initialContentSize ?? 0)
-	// Use terminal size as initial estimate, but scroll component will report actual size
-	const [viewportSize, setViewportSize] = useState(baseViewportSize)
-	const [viewportMeasured, setViewportMeasured] = useState(false)
-
-	// Refs for sticky scroll behavior
-	const wasAtEndRef = useRef(sticky)
-	const prevContentSizeRef = useRef(0)
+	const baseContentSize = controlledContentSize ?? initialContentSize ?? 0
+
+	const [internal, dispatch] = useReducer(reduceScroll, {
+		offset: clampOffset(initialOffset, baseContentSize, baseViewportSize),
+		contentSize: baseContentSize,
+		viewportSize: baseViewportSize,
+		viewportMeasured: false,
+		sticky,
+	})
+	const stateRef = useRef(internal)
+	stateRef.current = internal
+	const viewportSizeRef = useRef(baseViewportSize)
 
 	// Scroll acceleration
 	const accel = useMemo(
@@ -209,35 +282,10 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	// Fractional accumulator for smooth sub-pixel scrolling
 	const accumulatorRef = useRef(0)
 
-	// Refs for scrollToVisible so it doesn't change on every scroll
-	const offsetRef = useRef(offset)
-	offsetRef.current = offset
-	// viewportSizeRef is ONLY updated by handleViewportSize to avoid stale state overwriting
-	const viewportSizeRef = useRef(viewportSize)
-
-	// Calculate derived state
-	const maxOffset = Math.max(0, contentSize - viewportSize)
-	const atStart = offset <= 0
-	const atEnd = offset >= maxOffset
-
-	const clampOffset = useCallback(
-		(value: number) => {
-			const clamped = Math.max(0, Math.min(maxOffset, value))
-			// Keep refs in sync so rapid events don't use stale state
-			offsetRef.current = clamped
-			wasAtEndRef.current = clamped >= maxOffset - 1
-			return clamped
-		},
-		[maxOffset],
-	)
-
-	// Clamp and set offset
-	const setOffset = useCallback(
-		(newOffset: number) => {
-			setOffsetRaw(() => clampOffset(newOffset))
-		},
-		[clampOffset],
-	)
+	// Keep sticky state in sync when options change
+	useLayoutEffect(() => {
+		dispatch({ type: "set-sticky", sticky })
+	}, [sticky])
 
 	// Scroll by delta with accumulator for fractional scrolling
 	// Uses functional state updates to avoid stale closures during rapid scrolling
@@ -246,55 +294,50 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 			accumulatorRef.current += delta
 			const integerDelta = Math.trunc(accumulatorRef.current)
 			if (integerDelta !== 0) {
-				setOffsetRaw((prev) => clampOffset(prev + integerDelta))
+				dispatch({ type: "scroll-by", delta: integerDelta })
 				accumulatorRef.current -= integerDelta
 			}
 		},
-		[clampOffset],
+		[dispatch],
 	)
 
 	const scrollToStart = useCallback(() => {
-		setOffset(0)
+		dispatch({ type: "set-offset", offset: 0 })
 		accumulatorRef.current = 0
 		accel.reset()
-	}, [setOffset, accel])
+	}, [dispatch, accel])
 
 	const scrollToEnd = useCallback(() => {
-		setOffset(maxOffset)
+		const current = stateRef.current
+		const maxOffset = Math.max(0, current.contentSize - current.viewportSize)
+		dispatch({ type: "set-offset", offset: maxOffset })
 		accumulatorRef.current = 0
 		accel.reset()
-	}, [setOffset, maxOffset, accel])
+	}, [dispatch, accel])
 
 	// Handle content size changes (for sticky scroll)
 	const handleContentSize = useCallback(
 		(width: number, height: number) => {
+			if (controlledContentSize !== undefined) return
 			const newSize = axis === "vertical" ? height : width
-			setContentSize(newSize)
-			prevContentSizeRef.current = newSize
+			dispatch({ type: "set-content", size: newSize })
 		},
-		[axis],
+		[axis, controlledContentSize],
 	)
 
-	// Synchronous sticky scroll: snap to end when content grows
-	// useLayoutEffect runs synchronously after React commit but before paint
 	useLayoutEffect(() => {
-		if (!sticky) return
-		const newMaxOffset = Math.max(0, contentSize - viewportSize)
-		if (wasAtEndRef.current && contentSize > 0) {
-			setOffsetRaw(() => clampOffset(newMaxOffset))
-		}
-	}, [sticky, contentSize, viewportSize, clampOffset])
+		if (controlledContentSize === undefined) return
+		dispatch({ type: "set-content", size: controlledContentSize })
+	}, [controlledContentSize])
 
 	// Handle viewport size changes (reported by scroll component)
 	const handleViewportSize = useCallback(
 		(width: number, height: number) => {
 			const newSize = axis === "vertical" ? height : width
-			// Sync ref immediately so scrollToVisible uses correct size
 			viewportSizeRef.current = newSize
-			setViewportSize(newSize)
-			setViewportMeasured(true)
+			dispatch({ type: "set-viewport", size: newSize })
 		},
-		[axis],
+		[axis, dispatch],
 	)
 
 	// Keyboard handler
@@ -323,10 +366,10 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 					scrollBy(arrowSpeed)
 					break
 				case "pageup":
-					scrollBy(-Math.floor(viewportSize * pageSpeed))
+					scrollBy(-Math.floor(viewportSizeRef.current * pageSpeed))
 					break
 				case "pagedown":
-					scrollBy(Math.floor(viewportSize * pageSpeed))
+					scrollBy(Math.floor(viewportSizeRef.current * pageSpeed))
 					break
 				case "home":
 					scrollToStart()
@@ -341,7 +384,6 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 			axis,
 			arrowSpeed,
 			pageSpeed,
-			viewportSize,
 			enableMouseWheel,
 			accel,
 			scrollBy,
@@ -358,54 +400,60 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	// Bypasses clampOffset because it uses totalSize for accurate clamping
 	const scrollToVisible = useCallback(
 		(position: number, itemSize = 1, padding = 0, totalSize?: number) => {
-			const currentOffset = offsetRef.current
+			const current = stateRef.current
+			const currentOffset = current.offset
 			const currentViewportSize = viewportSizeRef.current
 			const itemStart = position * itemSize
 			const itemEnd = itemStart + itemSize
 			// Use provided totalSize if available (more accurate than potentially stale contentSize)
-			const effectiveContentSize = totalSize ?? contentSize
+			const effectiveContentSize = totalSize ?? current.contentSize
 			const isAbove = itemStart < currentOffset + padding
 			const isBelow = itemEnd > currentOffset + currentViewportSize - padding
 
 			// If item is above viewport, scroll up to show it
 			if (isAbove) {
 				const newOffset = Math.max(0, itemStart - padding)
-				offsetRef.current = newOffset
-				wasAtEndRef.current = false
-				setOffsetRaw(newOffset)
+				dispatch({ type: "set-offset", offset: newOffset })
 			}
 			// If item is below viewport, scroll down to show it
 			else if (isBelow) {
 				const currentMaxOffset = Math.max(0, effectiveContentSize - currentViewportSize)
 				const newOffset = Math.min(currentMaxOffset, itemEnd - currentViewportSize + padding)
-				offsetRef.current = newOffset
-				wasAtEndRef.current = newOffset >= currentMaxOffset - 1
-				setOffsetRaw(newOffset)
+				dispatch({ type: "set-offset", offset: newOffset })
 			}
 		},
-		[contentSize, viewportSize],
+		[dispatch],
+	)
+
+	const setOffset = useCallback(
+		(newOffset: number) => {
+			dispatch({ type: "set-offset", offset: newOffset })
+		},
+		[dispatch],
 	)
 
+	// Calculate derived state
+	const maxOffset = Math.max(0, internal.contentSize - internal.viewportSize)
+	const atStart = internal.offset <= 0
+	const atEnd = internal.offset >= maxOffset
+
 	const state: ScrollState = {
-		offset,
+		offset: internal.offset,
 		maxOffset,
-		viewportSize,
-		viewportMeasured,
-		contentSize,
+		viewportSize: internal.viewportSize,
+		viewportMeasured: internal.viewportMeasured,
+		contentSize: internal.contentSize,
 		atStart,
 		atEnd,
 	}
 
 	// Handle effective offset sync from host (when sticky adjusts the offset)
 	const handleEffectiveOffset = useCallback((effectiveOffset: number) => {
-		// Sync the ref so scrollToVisible uses the actual rendered position
-		offsetRef.current = effectiveOffset
-		// Also update state to keep in sync (but don't trigger wasAtEnd change)
-		setOffsetRaw(effectiveOffset)
-	}, [])
+		dispatch({ type: "sync-effective-offset", offset: effectiveOffset })
+	}, [dispatch])
 
 	const scrollProps = {
-		offset,
+		offset: internal.offset,
 		axis,
 		onContentSize: handleContentSize,
 		onViewportSize: handleViewportSize,

package/src/hosts/box.ts

@@ -40,7 +40,7 @@ export class BoxHost extends SingleChildHost {
 
 	constructor(props: BoxProps, ctx: HostContext) {
 		super("box", props, ctx)
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	private get borderThickness(): number {

package/src/hosts/canvas.ts

@@ -75,7 +75,7 @@ export class CanvasHost extends BaseHost {
 
 	constructor(props: CanvasProps, ctx: HostContext) {
 		super("canvas", props, ctx)
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	measure(maxW: number, maxH: number): Size {

package/src/hosts/codeblock.ts

@@ -30,7 +30,7 @@ export class CodeBlockHost extends BaseHost {
 
 	constructor(props: CodeBlockProps, ctx: HostContext) {
 		super("codeblock", props, ctx)
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	private computeGutterWidth(): number {

package/src/hosts/flex-container.ts

@@ -2,7 +2,16 @@
 import type { CellBuffer, Color, Palette } from "@effect-tui/core"
 import { splitConstraints } from "@effect-tui/core"
 import type { CommonProps, HostContext, Rect, Size } from "../reconciler/types.js"
-import { type FlexAlignment, type FlexAxis, layoutFlex, measureFlex, resolveBgStyle } from "../utils/index.js"
+import {
+	type FlexAlignment,
+	type FlexAxis,
+	layoutFlex,
+	measureFlex,
+	type Padding,
+	type PaddingInput,
+	resolveBgStyle,
+	resolvePadding,
+} from "../utils/index.js"
 import { BaseHost } from "./base.js"
 
 export type CrossAlignment<A extends FlexAxis> = A extends "vertical"
@@ -12,6 +21,7 @@ export type CrossAlignment<A extends FlexAxis> = A extends "vertical"
 export interface FlexContainerProps<A extends FlexAxis> extends CommonProps {
 	spacing?: number
 	alignment?: CrossAlignment<A>
+	padding?: PaddingInput
 	/** Background color to fill the entire container rect */
 	bg?: Color
 }
@@ -34,6 +44,7 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 	spacing = 0
 	alignment!: CrossAlignment<A> // Set in constructor before updateProps
 	bg?: Color
+	padding: Padding = { top: 0, right: 0, bottom: 0, left: 0 }
 	private cachedSizes: Size[] = []
 	private layoutChildren: typeof this.children = []
 
@@ -46,7 +57,7 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 	) {
 		super(elementType, props, ctx)
 		this.alignment = defaultAlignment
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	/** Get children excluding __static nodes (which are rendered separately) */
@@ -71,15 +82,24 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 	measure(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
+		const insetY = this.padding.top + this.padding.bottom
+		const innerW = Math.max(0, constrained.w - insetX)
+		const innerH = Math.max(0, constrained.h - insetY)
 
 		// Exclude __static children from normal layout - they're rendered to scrollback separately
 		this.layoutChildren = this.getNonStaticChildren()
-		const [maxMain, maxCross] = splitConstraints(this.axis, constrained.w, constrained.h)
+		const [maxMain, maxCross] = splitConstraints(this.axis, innerW, innerH)
 		const result = measureFlex(this.axis, this.layoutChildren, this.spacing, maxMain, maxCross)
 		this.cachedSizes = result.sizes
 
+		const paddedSize: Size = {
+			w: result.totalSize.w + insetX,
+			h: result.totalSize.h + insetY,
+		}
+
 		// Apply frame constraints to what we report to parent
-		return this.constrainResult(result.totalSize)
+		return this.constrainResult(paddedSize)
 	}
 
 	override layout(rect: Rect): void {
@@ -87,11 +107,19 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 		// Use this.rect (constrained) not rect (raw input)
 		if (!this.rect) return
 		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),
+		}
 		layoutFlex(
 			this.axis,
 			this.layoutChildren,
 			this.cachedSizes,
-			this.rect,
+			innerRect,
 			this.spacing,
 			toFlexAlignment(this.axis, this.alignment),
 			stretchCross,
@@ -121,6 +149,7 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 		this.alignment =
 			(props.alignment as CrossAlignment<A> | undefined) ??
 			((this.axis === "vertical" ? "leading" : "top") as CrossAlignment<A>)
+		this.padding = resolvePadding(props.padding as FlexContainerProps<A>["padding"])
 		this.bg = props.bg as Color | undefined
 	}
 }

package/src/hosts/overlay-item.ts

@@ -23,7 +23,7 @@ export class OverlayItemHost extends SingleChildHost {
 
 	constructor(props: OverlayItemProps, ctx: HostContext) {
 		super("overlayItem", props, ctx)
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	override measure(maxW: number, maxH: number): Size {

package/src/hosts/scroll.ts

@@ -64,7 +64,7 @@ export class ScrollHost extends SingleChildHost {
 
 	constructor(props: ScrollProps, ctx: HostContext) {
 		super("scroll", props, ctx)
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	measure(maxW: number, maxH: number): Size {
@@ -157,8 +157,8 @@ export class ScrollHost extends SingleChildHost {
 		scrollX = Math.max(0, Math.min(maxScrollX, scrollX))
 
 		// Store effective offsets for rendering (scrollbar position)
-		// Report back if changed (for useScroll to sync its state)
-		if (scrollY !== this.effectiveOffset) {
+		// Report back if clamped or changed (keep controller in sync)
+		if (scrollY !== this.effectiveOffset || scrollY !== this.offset) {
 			this.onEffectiveOffset?.(scrollY)
 		}
 		this.effectiveOffset = scrollY
@@ -191,10 +191,8 @@ export class ScrollHost extends SingleChildHost {
 		const { x, y, w, h } = this.rect
 
 		// Fill background (inherit from parent if not explicitly set)
-		const { value: bgValue, styleId: bgStyleId } = resolveInheritedBgStyle(palette, this.bg, this.parent)
-		if (bgValue !== undefined) {
-			buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
-		}
+		const { styleId: bgStyleId } = resolveInheritedBgStyle(palette, this.bg, this.parent)
+		buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
 
 		// Render children with clipping
 		buffer.withClip(x, y, w, h, () => {

package/src/hosts/spacer.ts

@@ -18,7 +18,7 @@ export class SpacerHost extends BaseHost {
 
 	constructor(props: SpacerProps, ctx: HostContext) {
 		super("spacer", props, ctx)
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	measure(_maxW: number, _maxH: number): Size {