@effect-tui/react 0.10.0 → 0.10.2

package/package.json

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

package/src/components/ListView.tsx

@@ -123,12 +123,18 @@ export function ListView<T>({
 
 	// Track previous selection to detect changes
 	const prevSelectedRef = useRef(selectedIndex)
+	// Track previous scrollToVisible reference to detect viewport changes
+	const prevScrollToVisibleRef = useRef(scrollToVisible)
 
-	// Scroll to keep selection visible when it changes
+	// Scroll to keep selection visible when it changes OR when viewport size changes
 	// useLayoutEffect runs before paint - prevents visible "jump" when navigating
 	useLayoutEffect(() => {
-		if (selectedIndex !== prevSelectedRef.current) {
+		const selectionChanged = selectedIndex !== prevSelectedRef.current
+		const viewportChanged = scrollToVisible !== prevScrollToVisibleRef.current
+
+		if (selectionChanged || viewportChanged) {
 			prevSelectedRef.current = selectedIndex
+			prevScrollToVisibleRef.current = scrollToVisible
 			// Pass totalHeight to avoid stale contentSize issues when jumping to end
 			scrollToVisible(selectedIndex, itemHeight, scrollPadding, totalHeight)
 		}

package/src/hooks/use-scroll.ts

@@ -353,7 +353,9 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	useKeyboard(handleKey)
 
 	// Scroll to make a position visible (for keeping selection in view)
-	// Uses refs to avoid stale closures - only triggers when selection changes
+	// 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(
 		(position: number, itemSize = 1, padding = 0, totalSize?: number) => {
 			const currentOffset = offsetRef.current
@@ -367,15 +369,21 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 
 			// If item is above viewport, scroll up to show it
 			if (isAbove) {
-				setOffset(Math.max(0, itemStart - padding))
+				const newOffset = Math.max(0, itemStart - padding)
+				offsetRef.current = newOffset
+				wasAtEndRef.current = false
+				setOffsetRaw(newOffset)
 			}
 			// If item is below viewport, scroll down to show it
 			else if (isBelow) {
 				const currentMaxOffset = Math.max(0, effectiveContentSize - currentViewportSize)
-				setOffset(Math.min(currentMaxOffset, itemEnd - currentViewportSize + padding))
+				const newOffset = Math.min(currentMaxOffset, itemEnd - currentViewportSize + padding)
+				offsetRef.current = newOffset
+				wasAtEndRef.current = newOffset >= currentMaxOffset - 1
+				setOffsetRaw(newOffset)
 			}
 		},
-		[contentSize, setOffset],
+		[contentSize, viewportSize],
 	)
 
 	const state: ScrollState = {

package/src/hooks/use-timer.ts

@@ -33,8 +33,8 @@ export interface UseTimerReturn {
 	start: () => void
 	/** Pause the timer */
 	pause: () => void
-	/** Reset timer to initialTime and stop */
-	reset: () => void
+	/** Reset timer to initialTime (or provided time) and stop */
+	reset: (newTime?: number) => void
 	/** Current timer status */
 	status: TimerStatus
 }
@@ -101,10 +101,13 @@ export function useTimer(config: UseTimerConfig): UseTimerReturn {
 		setStatus((prev) => (prev === "RUNNING" ? "PAUSED" : prev))
 	}, [])
 
-	const reset = useCallback(() => {
-		setTime(initialTime)
-		setStatus("STOPPED")
-	}, [initialTime])
+	const reset = useCallback(
+		(newTime?: number) => {
+			setTime(newTime ?? initialTime)
+			setStatus("STOPPED")
+		},
+		[initialTime],
+	)
 
 	// Timer effect
 	useEffect(() => {

package/src/hosts/base.ts

@@ -88,6 +88,13 @@ export abstract class BaseHost implements HostInstance {
 	/** @internal Marks this node as static content (for Static component) */
 	__static?: boolean
 
+	// ─────────────────────────────────────────────────────────────
+	// onLayout callback - fires when layout size changes
+	// ─────────────────────────────────────────────────────────────
+	onLayout?: (size: { width: number; height: number; x: number; y: number }) => void
+	private _lastLayoutW = -1
+	private _lastLayoutH = -1
+
 	protected ctx: HostContext
 
 	// ─────────────────────────────────────────────────────────────
@@ -200,6 +207,13 @@ export abstract class BaseHost implements HostInstance {
 		if (this.frameMaxHeight !== undefined) h = Math.min(this.frameMaxHeight, h)
 
 		this.rect = { x: rect.x, y: rect.y, w, h }
+
+		// Fire onLayout callback if size changed (deduplicated)
+		if (this.onLayout && (w !== this._lastLayoutW || h !== this._lastLayoutH)) {
+			this._lastLayoutW = w
+			this._lastLayoutH = h
+			this.onLayout({ width: w, height: h, x: rect.x, y: rect.y })
+		}
 	}
 
 	/**
@@ -303,6 +317,9 @@ export abstract class BaseHost implements HostInstance {
 		this.frameMaxWidth = typeof props.maxWidth === "number" ? props.maxWidth : undefined
 		this.frameMinHeight = typeof props.minHeight === "number" ? props.minHeight : undefined
 		this.frameMaxHeight = typeof props.maxHeight === "number" ? props.maxHeight : undefined
+
+		// onLayout callback
+		this.onLayout = typeof props.onLayout === "function" ? (props.onLayout as typeof this.onLayout) : undefined
 	}
 
 	destroy(): void {

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)
+		this.updateProps(props 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)
+		this.updateProps(props 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)
+		this.updateProps(props as Record<string, unknown>)
 	}
 
 	private computeGutterWidth(): number {

package/src/hosts/flex-container.ts

@@ -46,7 +46,7 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 	) {
 		super(elementType, props, ctx)
 		this.alignment = defaultAlignment
-		this.updateProps(props)
+		this.updateProps(props as Record<string, unknown>)
 	}
 
 	/** Get children excluding __static nodes (which are rendered separately) */

package/src/hosts/hstack.ts

@@ -1,10 +1,7 @@
-import type { CommonProps, HostContext } from "../reconciler/types.js"
+import type { HostContext } from "../reconciler/types.js"
 import { FlexContainerHost, type FlexContainerProps } from "./flex-container.js"
 
-export interface HStackProps extends CommonProps {
-	spacing?: number
-	alignment?: "top" | "center" | "bottom"
-}
+export interface HStackProps extends FlexContainerProps<"horizontal"> {}
 
 /**
  * HStackHost lays out children horizontally with optional spacing and cross-axis alignment.

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)
+		this.updateProps(props 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)
+		this.updateProps(props as Record<string, unknown>)
 	}
 
 	measure(maxW: number, maxH: number): Size {

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)
+		this.updateProps(props as Record<string, unknown>)
 	}
 
 	measure(_maxW: number, _maxH: number): Size {

package/src/hosts/text.ts

@@ -38,7 +38,7 @@ export class TextHost extends BaseHost {
 
 	constructor(props: TextProps, ctx: HostContext) {
 		super("text", props, ctx)
-		this.updateProps(props)
+		this.updateProps(props as Record<string, unknown>)
 	}
 
 	/** Check if we have SpanHost children (requires styled rendering) */
@@ -447,7 +447,7 @@ export class SpanHost extends BaseHost {
 
 	constructor(props: SpanProps, ctx: HostContext) {
 		super("span", props, ctx)
-		this.updateProps(props)
+		this.updateProps(props as Record<string, unknown>)
 	}
 
 	/** Get text content from RawTextHost children */
@@ -523,7 +523,7 @@ export class StyledTextHost extends BaseHost {
 
 	constructor(props: StyledTextProps, ctx: HostContext) {
 		super("styledtext", props, ctx)
-		this.updateProps(props)
+		this.updateProps(props as Record<string, unknown>)
 	}
 
 	measure(maxW: number, maxH: number): Size {

package/src/hosts/vstack.ts

@@ -1,10 +1,7 @@
-import type { CommonProps, HostContext } from "../reconciler/types.js"
+import type { HostContext } from "../reconciler/types.js"
 import { FlexContainerHost, type FlexContainerProps } from "./flex-container.js"
 
-export interface VStackProps extends CommonProps {
-	spacing?: number
-	alignment?: "leading" | "center" | "trailing"
-}
+export interface VStackProps extends FlexContainerProps<"vertical"> {}
 
 /**
  * VStackHost lays out children vertically with optional spacing and cross-axis alignment.

package/src/hosts/zstack.ts

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

package/src/index.ts

@@ -48,13 +48,17 @@ export {
 } from "./highlight.js"
 export type {
 	ScrollState,
+	TimerStatus,
+	TimerType,
 	UseKeyboardOptions,
 	UseMouseOptions,
 	UseScrollOptions,
 	UseScrollReturn,
+	UseTimerConfig,
+	UseTimerReturn,
 } from "./hooks/index.js"
 // Hooks
-export { useKeyboard, useMouse, usePaste, useQuit, useScroll } from "./hooks/index.js"
+export { useKeyboard, useMouse, usePaste, useQuit, useScroll, useTimer } from "./hooks/index.js"
 export { useFrameStats } from "./hooks/useFrameStats.js"
 export type { BorderKind, BoxProps } from "./hosts/box.js"
 export type { CanvasProps, DrawContext } from "./hosts/canvas.js"

package/src/reconciler/types.ts

@@ -132,6 +132,26 @@ export interface CommonProps {
 	/** Maximum height - natural size won't exceed this */
 	maxHeight?: number
 
-	/** Index signature for Record<string, unknown> compatibility */
+	/**
+	 * Called after layout with the element's final dimensions.
+	 * Fires only when size changes (deduplicated).
+	 *
+	 * @example
+	 * ```tsx
+	 * const [size, setSize] = useState({ width: 0, height: 0 })
+	 * <vstack greedy onLayout={setSize}>
+	 *   <text>Width: {size.width}</text>
+	 * </vstack>
+	 * ```
+	 */
+	onLayout?: (size: { width: number; height: number; x: number; y: number }) => void
+
+	/** React key prop for list reconciliation */
+	key?: string | number
+
+	/**
+	 * Index signature for Record<string, unknown> compatibility.
+	 * TODO: Remove this and properly type all props to catch typos like "grow" instead of "greedy"
+	 */
 	[key: string]: unknown
 }