@effect-tui/react 0.9.0 → 0.9.2

package/package.json

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

package/src/dev/Toast.tsx

@@ -2,18 +2,22 @@
 // Beautiful, minimal notifications that appear at the top of the screen
 
 import { Colors } from "@effect-tui/core"
-import { createContext, type ReactNode, useCallback, useContext, useState } from "react"
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useState } from "react"
+import { useColorSpring } from "../motion/hooks.js"
+import { useSequence } from "../motion/use-sequence.js"
 
 // ─────────────────────────────────────────────────────────────
 // Types
 // ─────────────────────────────────────────────────────────────
 
-export type ToastType = "success" | "info" | "warning" | "error"
+export type ToastType = "success" | "info" | "warning" | "error" | "screenshot"
 
 export interface Toast {
 	id: number
 	message: string
 	type: ToastType
+	/** Timestamp when the toast was created (for animations) */
+	createdAt: number
 }
 
 export interface ToastContextValue {
@@ -48,6 +52,7 @@ const TOAST_STYLES: Record<
 	info: { bg: Colors.rgb(30, 50, 80), fg: Colors.rgb(140, 180, 230), icon: "ℹ" },
 	warning: { bg: Colors.rgb(80, 60, 20), fg: Colors.rgb(230, 200, 100), icon: "⚠" },
 	error: { bg: Colors.rgb(80, 30, 30), fg: Colors.rgb(230, 140, 140), icon: "✗" },
+	screenshot: { bg: Colors.rgb(30, 70, 40), fg: Colors.rgb(140, 230, 140), icon: "📷" },
 }
 
 // ─────────────────────────────────────────────────────────────
@@ -61,7 +66,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 
 	const show = useCallback((message: string, type: ToastType = "info", durationMs = 2000) => {
 		const id = ++toastId
-		setToasts((prev) => [...prev, { id, message, type }])
+		setToasts((prev) => [...prev, { id, message, type, createdAt: Date.now() }])
 
 		setTimeout(() => {
 			setToasts((prev) => prev.filter((t) => t.id !== id))
@@ -75,6 +80,49 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 	return <ToastContext.Provider value={{ toasts, show, dismiss }}>{children}</ToastContext.Provider>
 }
 
+// ─────────────────────────────────────────────────────────────
+// Screenshot Toast Animation
+// ─────────────────────────────────────────────────────────────
+
+// 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 }
+
+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,
+	})
+
+	// Background: bright flash → fade to green
+	const [bg, setBg] = useColorSpring(FLASH_COLOR, { visualDuration: 1.2, bounce: 0 })
+
+	// Trigger fade after flash phase
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setBg(SUCCESS_COLOR)
+		}, 200) // Start fade at 200ms
+		return () => clearTimeout(timer)
+	}, [setBg])
+
+	const bgValue = bg.get()
+	const isFlash = emoji === "📸"
+
+	return (
+		<hstack>
+			<spacer />
+			<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>
+	)
+}
+
 // ─────────────────────────────────────────────────────────────
 // Toast Display Component
 // ─────────────────────────────────────────────────────────────
@@ -86,6 +134,12 @@ export function ToastContainer() {
 
 	// Show only the most recent toast
 	const toast = toasts[toasts.length - 1]
+
+	// Special animated toast for screenshots
+	if (toast.type === "screenshot") {
+		return <ScreenshotToast message={toast.message} />
+	}
+
 	const style = TOAST_STYLES[toast.type]
 
 	// Compact pill in upper right
@@ -111,7 +165,7 @@ export function useScreenshotToast() {
 
 	return useCallback(
 		(path: string) => {
-			show(`Screenshot saved: ${path}`, "success", 2500)
+			show(`Screenshot copied!`, "screenshot", 2500)
 		},
 		[show],
 	)

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,8 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	const handleViewportSize = useCallback(
 		(width: number, height: number) => {
 			const newSize = axis === "vertical" ? height : width
+			// Sync ref immediately so scrollToVisible uses correct size
+			viewportSizeRef.current = newSize
 			setViewportSize(newSize)
 			setViewportMeasured(true)
 		},
@@ -349,10 +353,11 @@ 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)
@@ -363,12 +368,12 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 				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 (itemEnd > currentOffset + currentViewportSize - padding) {
+				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/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]!
+}