@effect-tui/react 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.11.0",
+	"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.11.0",
+		"@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/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 = []
 
@@ -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/scroll.ts

@@ -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/text.ts

@@ -11,8 +11,10 @@ export interface TextProps extends CommonProps {
 	fg?: ColorProp
 	bg?: ColorProp
 	bold?: boolean
+	dimmed?: boolean
 	italic?: boolean
 	underline?: boolean
+	strikethrough?: boolean
 	inverse?: boolean
 	/** If true, wrap text to multiple lines (default: false, text is truncated) */
 	wrap?: boolean
@@ -22,8 +24,10 @@ export class TextHost extends BaseHost {
 	fg?: Color
 	bg?: Color
 	bold = false
+	dimmed = false
 	italic = false
 	underline = false
+	strikethrough = false
 	inverse = false
 	wrap = false // Default: truncate (no wrap)
 
@@ -76,8 +80,11 @@ export class TextHost extends BaseHost {
 						fg: this.fg,
 						bg: this.bg,
 						bold: this.bold,
+						dimmed: this.dimmed,
 						italic: this.italic,
 						underline: this.underline,
+						strikethrough: this.strikethrough,
+						inverse: this.inverse,
 					})
 				}
 			} else if (child instanceof SpanHost) {
@@ -89,8 +96,11 @@ export class TextHost extends BaseHost {
 						fg: child.fg ?? this.fg,
 						bg: child.bg ?? this.bg,
 						bold: child.bold || this.bold,
+						dimmed: child.dimmed || this.dimmed,
 						italic: child.italic || this.italic,
 						underline: child.underline || this.underline,
+						strikethrough: child.strikethrough || this.strikethrough,
+						inverse: child.inverse || this.inverse,
 					})
 				}
 			}
@@ -297,8 +307,11 @@ export class TextHost extends BaseHost {
 						fg: span.fg ?? this.fg,
 						bg: span.bg ?? inheritedBg,
 						bold: span.bold,
+						dimmed: span.dimmed,
 						italic: span.italic,
 						underline: span.underline,
+						strikethrough: span.strikethrough,
+						inverse: span.inverse,
 					})
 					const availableWidth = this.rect.w - (x - this.rect.x)
 					if (availableWidth <= 0) break
@@ -315,8 +328,10 @@ export class TextHost extends BaseHost {
 			fg: this.fg,
 			bg: inheritedBg,
 			bold: this.bold,
+			dimmed: this.dimmed,
 			italic: this.italic,
 			underline: this.underline,
+			strikethrough: this.strikethrough,
 			inverse: this.inverse,
 		})
 		const content = this.getContent()
@@ -366,8 +381,10 @@ export class TextHost extends BaseHost {
 			this.bg = v as Color
 		}) as Color | undefined
 		this.bold = Boolean(props.bold)
+		this.dimmed = Boolean(props.dimmed)
 		this.italic = Boolean(props.italic)
 		this.underline = Boolean(props.underline)
+		this.strikethrough = Boolean(props.strikethrough)
 		this.inverse = Boolean(props.inverse)
 		this.wrap = Boolean(props.wrap)
 	}
@@ -415,8 +432,10 @@ export interface SpanStyle {
 	fg?: Color
 	bg?: Color
 	bold?: boolean
+	dimmed?: boolean
 	italic?: boolean
 	underline?: boolean
+	strikethrough?: boolean
 	inverse?: boolean
 }
 
@@ -424,8 +443,10 @@ export interface SpanProps extends CommonProps {
 	fg?: Color
 	bg?: Color
 	bold?: boolean
+	dimmed?: boolean
 	italic?: boolean
 	underline?: boolean
+	strikethrough?: boolean
 	inverse?: boolean
 	/** Reusable style object. Individual props override textStyle values. */
 	textStyle?: SpanStyle
@@ -441,8 +462,10 @@ export class SpanHost extends BaseHost {
 	fg?: Color
 	bg?: Color
 	bold = false
+	dimmed = false
 	italic = false
 	underline = false
+	strikethrough = false
 	inverse = false
 
 	constructor(props: SpanProps, ctx: HostContext) {
@@ -475,8 +498,11 @@ export class SpanHost extends BaseHost {
 		this.fg = props.fg !== undefined ? (props.fg as Color) : textStyle?.fg
 		this.bg = props.bg !== undefined ? (props.bg as Color) : textStyle?.bg
 		this.bold = props.bold !== undefined ? Boolean(props.bold) : Boolean(textStyle?.bold)
+		this.dimmed = props.dimmed !== undefined ? Boolean(props.dimmed) : Boolean(textStyle?.dimmed)
 		this.italic = props.italic !== undefined ? Boolean(props.italic) : Boolean(textStyle?.italic)
 		this.underline = props.underline !== undefined ? Boolean(props.underline) : Boolean(textStyle?.underline)
+		this.strikethrough =
+			props.strikethrough !== undefined ? Boolean(props.strikethrough) : Boolean(textStyle?.strikethrough)
 		this.inverse = props.inverse !== undefined ? Boolean(props.inverse) : Boolean(textStyle?.inverse)
 	}
 }
@@ -491,8 +517,11 @@ export interface StyledSpan {
 	fg?: Color
 	bg?: Color
 	bold?: boolean
+	dimmed?: boolean
 	italic?: boolean
 	underline?: boolean
+	strikethrough?: boolean
+	inverse?: boolean
 }
 
 export interface StyledTextProps extends CommonProps {
@@ -627,8 +656,11 @@ export class StyledTextHost extends BaseHost {
 					fg: span.fg ?? this.fg,
 					bg: span.bg ?? inheritedBg,
 					bold: span.bold,
+					dimmed: span.dimmed,
 					italic: span.italic,
 					underline: span.underline,
+					strikethrough: span.strikethrough,
+					inverse: span.inverse,
 				})
 				const availableWidth = this.rect.w - (x - this.rect.x)
 				if (availableWidth <= 0) break