@effect-tui/react 0.9.1 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.9.1",
+	"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.1",
+		"@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/Toast.tsx

@@ -3,6 +3,8 @@
 
 import { Colors } from "@effect-tui/core"
 import { createContext, type ReactNode, useCallback, useContext, useEffect, useState } from "react"
+import { useColorSpring } from "../motion/hooks.js"
+import { useSequence } from "../motion/use-sequence.js"
 
 // ─────────────────────────────────────────────────────────────
 // Types
@@ -82,56 +84,40 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 // Screenshot Toast Animation
 // ─────────────────────────────────────────────────────────────
 
-// Animation phases: camera → flash → success
-type ScreenshotPhase = "camera" | "flash" | "success"
+// Bright flash color for initial state
+const FLASH_COLOR = { r: 255, g: 255, b: 220, a: 1 }
+// Final green success color
+const SUCCESS_COLOR = { r: 30, g: 70, b: 40, a: 1 }
 
-const SCREENSHOT_PHASES: Record<
-	ScreenshotPhase,
-	{ icon: string; bg: ReturnType<typeof Colors.rgb>; fg: ReturnType<typeof Colors.rgb> }
-> = {
-	camera: {
-		icon: "📷",
-		bg: Colors.rgb(40, 50, 60),
-		fg: Colors.rgb(180, 200, 220),
-	},
-	flash: {
-		icon: "⚡",
-		bg: Colors.rgb(255, 255, 200), // Bright flash!
-		fg: Colors.rgb(60, 60, 40),
-	},
-	success: {
-		icon: "✓",
-		bg: Colors.rgb(30, 70, 40),
-		fg: Colors.rgb(140, 230, 140),
-	},
-}
+function ScreenshotToast({ message }: { message: string }) {
+	// Emoji sequence: 📷 → 📸 → 📷 (camera → flash → camera)
+	const emoji = useSequence({
+		keyframes: ["📷", "📸", "📷"],
+		times: [0, 0.08, 0.2], // Flash at 8%, back at 20%
+		duration: 2500,
+	})
 
-function ScreenshotToast({ message, createdAt }: { message: string; createdAt: number }) {
-	const [phase, setPhase] = useState<ScreenshotPhase>("camera")
+	// Background: bright flash → fade to green
+	const [bg, setBg] = useColorSpring(FLASH_COLOR, { visualDuration: 1.2, bounce: 0 })
 
+	// Trigger fade after flash phase
 	useEffect(() => {
-		// Phase timing: camera (0-120ms) → flash (120-280ms) → success (280ms+)
-		const elapsed = Date.now() - createdAt
-		const cameraDelay = Math.max(0, 120 - elapsed)
-		const flashDelay = Math.max(0, 280 - elapsed)
-
-		const flashTimer = setTimeout(() => setPhase("flash"), cameraDelay)
-		const successTimer = setTimeout(() => setPhase("success"), flashDelay)
+		const timer = setTimeout(() => {
+			setBg(SUCCESS_COLOR)
+		}, 200) // Start fade at 200ms
+		return () => clearTimeout(timer)
+	}, [setBg])
 
-		return () => {
-			clearTimeout(flashTimer)
-			clearTimeout(successTimer)
-		}
-	}, [createdAt])
-
-	const style = SCREENSHOT_PHASES[phase]
-	const content = ` ${style.icon} ${message} `
+	const bgValue = bg.get()
+	const isFlash = emoji === "📸"
 
 	return (
 		<hstack>
 			<spacer />
-			<box bg={style.bg} padding={{ x: 1 }}>
-				<text fg={style.fg}>{content}</text>
+			<box bg={Colors.rgb(bgValue.r, bgValue.g, bgValue.b)} padding={{ x: 1 }}>
+				<text fg={isFlash ? Colors.rgb(40, 40, 20) : Colors.rgb(140, 230, 140)}>
+					{` ${emoji} ${message} `}
+				</text>
 			</box>
 		</hstack>
 	)
@@ -151,7 +137,7 @@ export function ToastContainer() {
 
 	// Special animated toast for screenshots
 	if (toast.type === "screenshot") {
-		return <ScreenshotToast message={toast.message} createdAt={toast.createdAt} />
+		return <ScreenshotToast message={toast.message} />
 	}
 
 	const style = TOAST_STYLES[toast.type]
@@ -179,7 +165,7 @@ export function useScreenshotToast() {
 
 	return useCallback(
 		(path: string) => {
-			show(`Screenshot saved: ${path}`, "success", 2500)
+			show(`Screenshot copied!`, "screenshot", 2500)
 		},
 		[show],
 	)

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

@@ -209,9 +209,11 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	// Fractional accumulator for smooth sub-pixel scrolling
 	const accumulatorRef = useRef(0)
 
-	// Ref for scrollToVisible so it doesn't change on every scroll
+	// 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)
@@ -287,6 +289,9 @@ 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)
 			setViewportMeasured(true)
 		},
@@ -349,26 +354,36 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	useKeyboard(handleKey)
 
 	// Scroll to make a position visible (for keeping selection in view)
-	// Uses refs to avoid changing on every scroll - only triggers when selection changes
+	// Uses refs to avoid stale closures - only triggers when selection changes
 	const scrollToVisible = useCallback(
 		(position: number, itemSize = 1, padding = 0, totalSize?: number) => {
 			const currentOffset = offsetRef.current
+			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 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 + viewportSize - padding) {
-				const currentMaxOffset = Math.max(0, effectiveContentSize - viewportSize)
-				setOffset(Math.min(currentMaxOffset, itemEnd - viewportSize + padding))
+			else if (isBelow) {
+				const currentMaxOffset = Math.max(0, effectiveContentSize - currentViewportSize)
+				setOffset(Math.min(currentMaxOffset, itemEnd - currentViewportSize + padding))
 			}
 		},
-		[viewportSize, contentSize, setOffset],
+		[contentSize, setOffset],
 	)
 
 	const state: ScrollState = {

package/src/hosts/box.ts

@@ -112,15 +112,17 @@ export class BoxHost extends SingleChildHost {
 			drawBorder(buffer, x, y, w, h, chars, borderStyle)
 
 			// Draw title on top border if present
-			if (this.title && w >= 5) {
+			if (this.title && w >= 7) {
 				const titleFg = toColorValue(this.titleColor) ?? borderFg
 				const titleStyle = palette.id({ fg: titleFg })
-				const maxTitleLen = w - 4 // Leave room for "─ " and " ─"
+				// Reserve: ┌─ (2) + space before (1) + space after (1) + ─┐ (2) = 6 chars
+				const maxTitleLen = w - 6
 				const displayTitle =
 					this.title.length > maxTitleLen ? this.title.slice(0, maxTitleLen - 1) + "…" : this.title
-				// Draw " Title " starting at x+2
+				// Draw " Title " starting at x+2, limiting width to just the title text
 				const titleX = x + 2
-				buffer.drawText(titleX, y, ` ${displayTitle} `, titleStyle)
+				const titleText = ` ${displayTitle} `
+				buffer.drawText(titleX, y, titleText, titleStyle, titleText.length)
 			}
 		}
 

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"

package/src/motion/index.ts

@@ -15,3 +15,4 @@ export {
 	useSpringRenderer,
 	useSprings,
 } from "./motion-value.js"
+export { useSequence, type SequenceOptions } from "./use-sequence.js"

package/src/motion/use-sequence.ts

@@ -0,0 +1,51 @@
+// useSequence - Timed discrete state sequences (motion.dev-style keyframes)
+// For animating through discrete values like emojis, strings, or any non-numeric state
+
+import { useEffect, useState } from "react"
+
+export interface SequenceOptions<T> {
+	/** Array of values to animate through */
+	keyframes: T[]
+	/** Position of each keyframe as 0-1 fraction (must match keyframes length) */
+	times: number[]
+	/** Total duration in milliseconds */
+	duration: number
+	/** Start automatically (default: true) */
+	autoPlay?: boolean
+}
+
+/**
+ * Animate through a sequence of discrete values with precise timing.
+ *
+ * @example
+ * ```tsx
+ * // Emoji sequence: camera → flash → camera
+ * const emoji = useSequence({
+ *   keyframes: ["📷", "📸", "📷"],
+ *   times: [0, 0.08, 0.2],  // Flash at 8%, back at 20%
+ *   duration: 2500,
+ * })
+ *
+ * return <text>{emoji}</text>
+ * ```
+ */
+export function useSequence<T>(options: SequenceOptions<T>): T {
+	const { keyframes, times, duration, autoPlay = true } = options
+	const [index, setIndex] = useState(0)
+
+	useEffect(() => {
+		if (!autoPlay || keyframes.length <= 1) return
+
+		const timers: NodeJS.Timeout[] = []
+
+		// Schedule each keyframe transition
+		for (let i = 1; i < keyframes.length; i++) {
+			const delayMs = times[i]! * duration
+			timers.push(setTimeout(() => setIndex(i), delayMs))
+		}
+
+		return () => timers.forEach(clearTimeout)
+	}, [keyframes, times, duration, autoPlay])
+
+	return keyframes[index]!
+}