@effect-tui/react 0.9.2 → 0.9.3

package/package.json

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

package/src/dev.tsx

@@ -309,7 +309,7 @@ function ScreenshotHandler() {
 			const tmpPath = `/tmp/tui-screenshot-${Date.now()}.txt`
 			Bun.write(tmpPath, ansiOutput)
 
-			show("Screenshot copied!", "success", 1500)
+			show("Screenshot copied!", "screenshot", 2500)
 			key.preventDefault?.()
 		}
 	})
@@ -336,26 +336,31 @@ function StatsOverlay({ sampleMs, title }: { sampleMs?: number; title?: string }
 	)
 }
 
+export interface DevWrapperProps {
+	children?: React.ReactNode
+	showStats?: boolean
+	statsSampleMs?: number
+	statsTitle?: string
+	mode?: "fullscreen" | "inline"
+}
+
 /**
- * Internal wrapper component that provides dev mode features:
+ * Wrapper component that provides dev mode features:
  * - Debug console panel (` backtick to toggle)
  * - Screenshot support (~ tilde) with toast notification
  * - Auto-show console on errors
  * - Optional renderer stats overlay (showStats)
+ *
+ * Use this to wrap your app when you need dev features but can't use devRender
+ * (e.g., when you need to pass props to your App component).
  */
-function DevWrapper({
+export function DevWrapper({
 	children,
 	showStats,
 	statsSampleMs,
 	statsTitle,
 	mode,
-}: {
-	children?: React.ReactNode
-	showStats?: boolean
-	statsSampleMs?: number
-	statsTitle?: string
-	mode?: "fullscreen" | "inline"
-}) {
+}: DevWrapperProps) {
 	const { visible } = useConsole({ autoShowOnError: true, initiallyVisible: false })
 
 	// Inline mode: content flows naturally in vstack

package/src/hooks/use-scroll.ts

@@ -289,6 +289,7 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	const handleViewportSize = useCallback(
 		(width: number, height: number) => {
 			const newSize = axis === "vertical" ? height : width
+			console.log("[useScroll] viewport size reported", { width, height, axis, newSize })
 			// Sync ref immediately so scrollToVisible uses correct size
 			viewportSizeRef.current = newSize
 			setViewportSize(newSize)
@@ -362,13 +363,22 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 			const itemEnd = itemStart + itemSize
 			// Use provided totalSize if available (more accurate than potentially stale contentSize)
 			const effectiveContentSize = totalSize ?? contentSize
+			const isAbove = itemStart < currentOffset + padding
+			const isBelow = itemEnd > currentOffset + currentViewportSize - padding
+			console.log("[useScroll] scrollToVisible", {
+				currentViewportSize,
+				itemEnd,
+				currentOffset,
+				isAbove,
+				isBelow,
+			})
 
 			// If item is above viewport, scroll up to show it
-			if (itemStart < currentOffset + padding) {
+			if (isAbove) {
 				setOffset(Math.max(0, itemStart - padding))
 			}
 			// If item is below viewport, scroll down to show it
-			else if (itemEnd > currentOffset + currentViewportSize - padding) {
+			else if (isBelow) {
 				const currentMaxOffset = Math.max(0, effectiveContentSize - currentViewportSize)
 				setOffset(Math.min(currentMaxOffset, itemEnd - currentViewportSize + padding))
 			}

package/src/hosts/scroll.ts

@@ -103,6 +103,7 @@ export class ScrollHost extends SingleChildHost {
 
 	override layout(rect: Rect): void {
 		super.layout(rect)
+		console.log("[ScrollHost] layout rect", { x: rect.x, y: rect.y, w: rect.w, h: rect.h })
 
 		// Report content size if changed (deferred from measure() to keep it pure)
 		if (this.contentWidth !== this.lastReportedContentW || this.contentHeight !== this.lastReportedContentH) {

package/src/index.ts

@@ -33,6 +33,8 @@ export {
 	type DevRenderResult,
 	devMain,
 	devRender,
+	DevWrapper,
+	type DevWrapperProps,
 	hmr,
 	hmrState,
 } from "./dev.js"