@effect-tui/react 0.9.0 → 0.9.1

package/package.json

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

package/src/dev/Toast.tsx

@@ -2,18 +2,20 @@
 // 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"
 
 // ─────────────────────────────────────────────────────────────
 // 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 +50,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 +64,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 +78,65 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 	return <ToastContext.Provider value={{ toasts, show, dismiss }}>{children}</ToastContext.Provider>
 }
 
+// ─────────────────────────────────────────────────────────────
+// Screenshot Toast Animation
+// ─────────────────────────────────────────────────────────────
+
+// Animation phases: camera → flash → success
+type ScreenshotPhase = "camera" | "flash" | "success"
+
+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, createdAt }: { message: string; createdAt: number }) {
+	const [phase, setPhase] = useState<ScreenshotPhase>("camera")
+
+	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)
+
+		return () => {
+			clearTimeout(flashTimer)
+			clearTimeout(successTimer)
+		}
+	}, [createdAt])
+
+	const style = SCREENSHOT_PHASES[phase]
+	const content = ` ${style.icon} ${message} `
+
+	return (
+		<hstack>
+			<spacer />
+			<box bg={style.bg} padding={{ x: 1 }}>
+				<text fg={style.fg}>{content}</text>
+			</box>
+		</hstack>
+	)
+}
+
 // ─────────────────────────────────────────────────────────────
 // Toast Display Component
 // ─────────────────────────────────────────────────────────────
@@ -86,6 +148,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} createdAt={toast.createdAt} />
+	}
+
 	const style = TOAST_STYLES[toast.type]
 
 	// Compact pill in upper right