@effect-tui/react 0.6.1 → 0.6.3

package/package.json

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

package/src/components/ListView.tsx

@@ -22,6 +22,12 @@ export interface ListViewProps<T> {
 	emptyContent?: ReactNode
 	/** Number of extra items to render above/below viewport for smooth scrolling (default: 3) */
 	overscan?: number
+	/** @internal */
+	__debugViewportMeasured?: boolean
+	/** @internal */
+	__debugViewportSize?: number
+	/** @internal */
+	__debugContentSize?: number
 }
 
 /**
@@ -72,11 +78,19 @@ export function ListView<T>({
 	showScrollbar = true,
 	emptyContent,
 	overscan = 3,
+	__debugViewportMeasured,
+	__debugViewportSize,
+	__debugContentSize,
 }: ListViewProps<T>) {
+	const totalHeight = items.length * itemHeight
 	const { state, scrollProps, scrollToVisible } = useScroll({
 		enableKeyboard: false, // Parent handles keyboard for selection
 		enableMouseWheel: true, // Free scroll with wheel
+		initialViewportSize: __debugViewportSize,
+		initialContentSize: __debugContentSize,
 	})
+	const viewportMeasured = __debugViewportMeasured ?? state.viewportMeasured
+	const viewportSize = __debugViewportSize ?? state.viewportSize
 
 	// Track previous selection to detect changes
 	const prevSelectedRef = useRef(selectedIndex)
@@ -103,13 +117,16 @@ export function ListView<T>({
 	}
 
 	// Calculate visible range for virtualization
-	const totalHeight = items.length * itemHeight
-	const startIndex = Math.max(0, Math.floor(state.offset / itemHeight) - overscan)
-	const endIndex = Math.min(items.length, Math.ceil((state.offset + state.viewportSize) / itemHeight) + overscan)
+	const startIndex = viewportMeasured
+		? Math.max(0, Math.floor(state.offset / itemHeight) - overscan)
+		: 0
+	const endIndex = viewportMeasured
+		? Math.min(items.length, Math.ceil((state.offset + viewportSize) / itemHeight) + overscan)
+		: items.length
 
 	// Calculate spacer heights for virtual scrolling
-	const topSpacerHeight = startIndex * itemHeight
-	const bottomSpacerHeight = Math.max(0, totalHeight - endIndex * itemHeight)
+	const topSpacerHeight = viewportMeasured ? startIndex * itemHeight : 0
+	const bottomSpacerHeight = viewportMeasured ? Math.max(0, totalHeight - endIndex * itemHeight) : 0
 
 	// Get visible slice of items
 	const visibleItems = items.slice(startIndex, endIndex)
@@ -118,7 +135,7 @@ export function ListView<T>({
 		<scroll {...scrollProps} showScrollbar={showScrollbar}>
 			<vstack>
 				{/* Virtual top spacer */}
-				{topSpacerHeight > 0 && <spacer height={topSpacerHeight} />}
+				{topSpacerHeight > 0 && <spacer minHeight={topSpacerHeight} />}
 
 				{/* Render only visible items */}
 				{visibleItems.map((item, i) => {
@@ -131,7 +148,7 @@ export function ListView<T>({
 				})}
 
 				{/* Virtual bottom spacer */}
-				{bottomSpacerHeight > 0 && <spacer height={bottomSpacerHeight} />}
+				{bottomSpacerHeight > 0 && <spacer minHeight={bottomSpacerHeight} />}
 			</vstack>
 		</scroll>
 	)

package/src/hooks/use-scroll.ts

@@ -91,6 +91,8 @@ export interface ScrollState {
 	maxOffset: number
 	/** Viewport height (or width for horizontal) */
 	viewportSize: number
+	/** Whether viewport size has been measured by the host */
+	viewportMeasured: boolean
 	/** Total content size */
 	contentSize: number
 	/** Whether we're at the start edge */
@@ -102,6 +104,10 @@ export interface ScrollState {
 export interface UseScrollOptions {
 	/** Scroll axis: "vertical" (default) or "horizontal" */
 	axis?: "vertical" | "horizontal"
+	/** Initial viewport size override (useful for tests) */
+	initialViewportSize?: number
+	/** Initial content size override (useful for tests) */
+	initialContentSize?: number
 	/** Initial scroll offset */
 	initialOffset?: number
 	/** Enable keyboard navigation (default: true) */
@@ -167,6 +173,8 @@ export interface UseScrollReturn {
 export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	const {
 		axis = "vertical",
+		initialViewportSize,
+		initialContentSize,
 		initialOffset = 0,
 		enableKeyboard = true,
 		enableMouseWheel = true,
@@ -177,12 +185,14 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	} = options
 
 	const { width: termWidth, height: termHeight } = useTerminalSize()
+	const baseViewportSize = initialViewportSize ?? (axis === "vertical" ? termHeight : termWidth)
 
 	// Scroll state
 	const [offset, setOffsetRaw] = useState(initialOffset)
-	const [contentSize, setContentSize] = useState(0)
+	const [contentSize, setContentSize] = useState(initialContentSize ?? 0)
 	// Use terminal size as initial estimate, but scroll component will report actual size
-	const [viewportSize, setViewportSize] = useState(axis === "vertical" ? termHeight : termWidth)
+	const [viewportSize, setViewportSize] = useState(baseViewportSize)
+	const [viewportMeasured, setViewportMeasured] = useState(false)
 
 	// Refs for sticky scroll behavior
 	const wasAtEndRef = useRef(sticky)
@@ -267,6 +277,7 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		(width: number, height: number) => {
 			const newSize = axis === "vertical" ? height : width
 			setViewportSize(newSize)
+			setViewportMeasured(true)
 		},
 		[axis],
 	)
@@ -351,6 +362,7 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		offset,
 		maxOffset,
 		viewportSize,
+		viewportMeasured,
 		contentSize,
 		atStart,
 		atEnd,

package/src/test/render-tui.ts

@@ -1,5 +1,5 @@
 import type { KeyMsg } from "@effect-tui/core"
-import type { ReactElement } from "react"
+import React, { type ReactElement, useState } from "react"
 import { flushPassiveEffects, flushSync } from "../reconciler/host-config.js"
 import { createRenderer, createRoot } from "../renderer.js"
 import { getVisibleLines, MockStdin, MockStdout, stripAnsi } from "./mock-streams.js"
@@ -69,7 +69,15 @@ export function renderTUI(element: ReactElement, options?: RenderTUIOptions): Re
 	})
 
 	const root = createRoot(renderer)
-	root.render(element, true) // sync mode
+	let bump: (() => void) | null = null
+	const Harness = ({ children }: { children: ReactElement }) => {
+		const [, setTick] = useState(0)
+		bump = () => setTick((value) => value + 1)
+		return children
+	}
+
+	const harnessed = React.createElement(Harness, null, element)
+	root.render(harnessed, true) // sync mode
 
 	// Flush effects
 	flushPassiveEffects()
@@ -79,12 +87,22 @@ export function renderTUI(element: ReactElement, options?: RenderTUIOptions): Re
 
 	const flush = () => {
 		// Flush React updates synchronously
-		flushSync(() => {})
+		flushSync(() => {
+			bump?.()
+		})
 		flushPassiveEffects()
 		// Clear buffer before re-render to get clean frame
 		stdout.clear()
 		renderer.requestRender()
 		renderer.flush()
+		// Flush updates scheduled during layout (e.g., viewport/content size callbacks)
+		flushSync(() => {
+			bump?.()
+		})
+		flushPassiveEffects()
+		stdout.clear()
+		renderer.requestRender()
+		renderer.flush()
 	}
 
 	return {