@effect-tui/react 0.15.2 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.15.2",
+	"version": "2.0.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.15.2",
+		"@effect-tui/core": "^2.0.0",
 		"@effect/platform": "^0.94.1",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/codeblock.tsx

@@ -15,7 +15,7 @@ export function CodeBlock({
 	theme = "nord",
 	lineNumbers = true,
 	padding = 1,
-	background,
+	bg,
 	...rest
 }: CodeBlockProps) {
 	const [lines, setLines] = useState<HighlightLine[]>(() => toPlainLines(code))
@@ -41,7 +41,7 @@ export function CodeBlock({
 			lines={lines}
 			lineNumbers={lineNumbers as boolean}
 			padding={padding as HostCodeBlockProps["padding"]}
-			background={background as HostCodeBlockProps["background"]}
+			bg={bg as HostCodeBlockProps["bg"]}
 		/>
 	)
 }

package/src/components/ListView.tsx

@@ -26,11 +26,11 @@ export interface ListViewProps<T> {
 	/** Called when an item is clicked. Receives the item index. */
 	onItemClick?: (index: number) => void
 	/** @internal */
-	__debugViewportMeasured?: boolean
+	__debugViewportMeasuredY?: boolean
 	/** @internal */
-	__debugViewportSize?: number
+	__debugViewportSizeY?: number
 	/** @internal */
-	__debugContentSize?: number
+	__debugContentSizeY?: number
 }
 
 /**
@@ -82,19 +82,22 @@ export function ListView<T>({
 	emptyContent,
 	overscan = 3,
 	onItemClick,
-	__debugViewportMeasured,
-	__debugViewportSize,
-	__debugContentSize,
+	__debugViewportMeasuredY,
+	__debugViewportSizeY,
+	__debugContentSizeY,
 }: ListViewProps<T>) {
 	const totalHeight = items.length * itemHeight
-	const { state, scrollProps, scrollToVisible } = useScroll({
+	const { state, scrollProps, scrollIntoView } = useScroll({
 		enableKeyboard: false, // Parent handles keyboard for selection
 		enableMouseWheel: true, // Free scroll with wheel
-		contentSize: __debugContentSize ?? totalHeight,
-		initialViewportSize: __debugViewportSize,
+		contentHeight: __debugContentSizeY ?? totalHeight,
+		initialViewportHeight: __debugViewportSizeY,
+		onScrollLayoutChange: (event) => {
+			rectRef.current = event.rect
+		},
 	})
-	const viewportMeasured = __debugViewportMeasured ?? state.viewportMeasured
-	const viewportSize = __debugViewportSize ?? state.viewportSize
+	const viewportMeasured = __debugViewportMeasuredY ?? state.viewportMeasuredY
+	const viewportSize = __debugViewportSizeY ?? state.viewportSizeY
 
 	// Track scroll container rect for hit testing
 	const rectRef = useRef<{ x: number; y: number; w: number; h: number } | null>(null)
@@ -110,7 +113,7 @@ export function ListView<T>({
 
 			// Calculate which item was clicked
 			const localY = mouse.y - y
-			const contentY = localY + state.offset
+			const contentY = localY + state.offsetY
 			const clickedIndex = Math.floor(contentY / itemHeight)
 
 			// Validate index is in range
@@ -136,14 +139,14 @@ export function ListView<T>({
 			prevSelectedRef.current = selectedIndex
 			prevViewportRef.current = { measured: viewportMeasured, size: viewportSize }
 			// Pass totalHeight to avoid stale contentSize issues when jumping to end
-			scrollToVisible(selectedIndex, itemHeight, scrollPadding, totalHeight)
+			scrollIntoView(selectedIndex, itemHeight, scrollPadding, totalHeight)
 		}
-	}, [selectedIndex, itemHeight, scrollPadding, scrollToVisible, totalHeight, viewportMeasured, viewportSize])
+	}, [selectedIndex, itemHeight, scrollPadding, scrollIntoView, totalHeight, viewportMeasured, viewportSize])
 
 	// Also scroll on initial render if selection is not 0
 	useEffect(() => {
 		if (selectedIndex > 0) {
-			scrollToVisible(selectedIndex, itemHeight, scrollPadding, totalHeight)
+			scrollIntoView(selectedIndex, itemHeight, scrollPadding, totalHeight)
 		}
 		// Only run on mount
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -156,10 +159,10 @@ export function ListView<T>({
 	// Calculate visible range for virtualization
 	// Before viewport is measured, render a reasonable default (not all items!)
 	const startIndex = viewportMeasured
-		? Math.max(0, Math.floor(state.offset / itemHeight) - overscan)
+		? Math.max(0, Math.floor(state.offsetY / itemHeight) - overscan)
 		: 0
 	const endIndex = viewportMeasured
-		? Math.min(items.length, Math.ceil((state.offset + viewportSize) / itemHeight) + overscan)
+		? Math.min(items.length, Math.ceil((state.offsetY + viewportSize) / itemHeight) + overscan)
 		: Math.min(items.length, 50)
 
 	// Calculate spacer heights for virtual scrolling
@@ -169,13 +172,8 @@ export function ListView<T>({
 	// Get visible slice of items
 	const visibleItems = items.slice(startIndex, endIndex)
 
-	// Handler to track scroll container rect for click detection
-	const handleRect = (x: number, y: number, w: number, h: number) => {
-		rectRef.current = { x, y, w, h }
-	}
-
 	return (
-		<scroll {...scrollProps} showScrollbar={showScrollbar} onRect={handleRect}>
+		<scroll {...scrollProps} showScrollbar={showScrollbar}>
 			<vstack>
 				{/* Virtual top spacer - always render to maintain structure */}
 				<box key="top-spacer" height={topSpacerHeight} />

package/src/components/Markdown.tsx

@@ -377,7 +377,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord", w
 							<hstack key={i}>
 								<text fg={theme.quoteBorder}>{"│ "}</text>
 								{wrap ? (
-									<text spans={toStyledSpans(el.spans, theme)} wrap />
+									<text spans={toStyledSpans(el.spans, theme)} wrap greedy />
 								) : (
 									renderSpans(el.spans, theme)
 								)}
@@ -390,7 +390,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord", w
 									<hstack key={j}>
 										<text fg={theme.listMarker}>{"  • "}</text>
 										{wrap ? (
-											<text spans={toStyledSpans(item, theme)} wrap />
+											<text spans={toStyledSpans(item, theme)} wrap greedy />
 										) : (
 											renderSpans(item, theme)
 										)}
@@ -405,7 +405,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord", w
 									<hstack key={j}>
 										<text fg={theme.listMarker}>{`  ${el.start + j}. `}</text>
 										{wrap ? (
-											<text spans={toStyledSpans(item, theme)} wrap />
+											<text spans={toStyledSpans(item, theme)} wrap greedy />
 										) : (
 											renderSpans(item, theme)
 										)}