@effect-tui/react 0.1.1 → 0.1.4

package/src/motion/motion-value.test.ts

@@ -2,221 +2,221 @@ import { describe, it, expect } from "vitest"
 import { motionValue } from "./motion-value.js"
 
 describe("MotionValue", () => {
-  describe("basic operations", () => {
-    it("initializes with correct value", () => {
-      const mv = motionValue(100)
-      expect(mv.get()).toBe(100)
-    })
-
-    it("jump() sets value immediately", () => {
-      const mv = motionValue(0)
-      mv.jump(50)
-      expect(mv.get()).toBe(50)
-      expect(mv.getVelocity()).toBe(0)
-    })
-
-    it("jump() stops any active animation", () => {
-      const mv = motionValue(0)
-      mv.set(100) // Start animation
-      expect(mv.isAnimating()).toBe(true)
-      mv.jump(50)
-      expect(mv.isAnimating()).toBe(false)
-      expect(mv.get()).toBe(50)
-    })
-  })
-
-  describe("spring animation", () => {
-    it("set() starts animation toward target", () => {
-      const mv = motionValue(0)
-      mv.set(100)
-      expect(mv.isAnimating()).toBe(true)
-    })
-
-    it("notifies on change", () => {
-      const mv = motionValue(0)
-      const values: number[] = []
-      mv.on("change", (v) => values.push(v))
-      mv.jump(50)
-      expect(values).toContain(50)
-    })
-
-    it("notifies animationStart and animationComplete", async () => {
-      const mv = motionValue(0)
-      let started = false
-      let completed = false
-      mv.on("animationStart", () => {
-        started = true
-      })
-      mv.on("animationComplete", () => {
-        completed = true
-      })
-
-      mv.set(100, { stiffness: 1000, damping: 50 }) // Fast spring
-      expect(started).toBe(true)
-
-      // Wait for animation to complete
-      await new Promise((r) => setTimeout(r, 500))
-      expect(completed).toBe(true)
-    })
-
-    it("stop() halts animation", () => {
-      const mv = motionValue(0)
-      mv.set(100)
-      expect(mv.isAnimating()).toBe(true)
-      mv.stop()
-      expect(mv.isAnimating()).toBe(false)
-    })
-  })
-
-  describe("spring physics correctness", () => {
-    it("reaches target value when settled", async () => {
-      const mv = motionValue(0)
-      mv.set(100, { stiffness: 500, damping: 30 })
-
-      await new Promise((r) => setTimeout(r, 1000))
-      expect(mv.get()).toBeCloseTo(100, 1)
-    })
-
-    it("velocity is zero when settled", async () => {
-      const mv = motionValue(0)
-      mv.set(100, { stiffness: 500, damping: 30 })
-
-      await new Promise((r) => setTimeout(r, 1000))
-      expect(Math.abs(mv.getVelocity())).toBeLessThan(0.1)
-    })
-  })
-
-  describe("retargeting", () => {
-    it("preserves velocity when retargeting mid-animation", async () => {
-      const mv = motionValue(0)
-      mv.set(100, { stiffness: 100, damping: 10 })
-
-      // Wait a bit for velocity to build up
-      await new Promise((r) => setTimeout(r, 50))
-
-      const velocityBefore = mv.getVelocity()
-      const positionBefore = mv.get()
-
-      // Retarget to opposite direction
-      mv.set(0, { stiffness: 100, damping: 10 })
-
-      // Velocity should be preserved (same value, continuing momentum)
-      expect(mv.getVelocity()).toBeCloseTo(velocityBefore, 1)
-      expect(mv.get()).toBeCloseTo(positionBefore, 1)
-    })
-
-    it("curves smoothly when reversing direction", async () => {
-      const mv = motionValue(0)
-      mv.set(100, { stiffness: 100, damping: 15 })
-
-      // Wait for positive velocity
-      await new Promise((r) => setTimeout(r, 30))
-      const velBefore = mv.getVelocity()
-      expect(velBefore).toBeGreaterThan(0)
-
-      // Retarget back to 0
-      mv.set(0, { stiffness: 100, damping: 15 })
-
-      // Should still have positive velocity immediately after retarget
-      expect(mv.getVelocity()).toBeGreaterThan(0)
-
-      // Wait a bit - velocity should decrease and eventually reverse
-      await new Promise((r) => setTimeout(r, 100))
-      // Position should have moved past where it was (momentum carried it)
-      // or started moving back toward 0
-    })
-  })
-
-  describe("visualDuration/bounce API", () => {
-    it("visualDuration controls animation speed", async () => {
-      const fast = motionValue(0)
-      const slow = motionValue(0)
-
-      fast.set(100, { visualDuration: 0.1, bounce: 0 })
-      slow.set(100, { visualDuration: 0.5, bounce: 0 })
-
-      await new Promise((r) => setTimeout(r, 150))
-
-      // Fast should be closer to target
-      expect(Math.abs(100 - fast.get())).toBeLessThan(Math.abs(100 - slow.get()))
-    })
-
-    it("bounce: 0 means no overshoot (critically damped)", async () => {
-      const mv = motionValue(0)
-      mv.set(100, { visualDuration: 0.3, bounce: 0 })
-
-      const values: number[] = []
-      mv.on("change", (v) => values.push(v))
-
-      await new Promise((r) => setTimeout(r, 500))
-
-      // Should never exceed target
-      const max = Math.max(...values)
-      expect(max).toBeLessThanOrEqual(100.5) // Small tolerance for numerical precision
-    })
-
-    it("bounce > 0 allows overshoot", async () => {
-      const mv = motionValue(0)
-      mv.set(100, { visualDuration: 0.3, bounce: 0.3 })
-
-      const values: number[] = []
-      mv.on("change", (v) => values.push(v))
-
-      await new Promise((r) => setTimeout(r, 500))
-
-      // Should overshoot target
-      const max = Math.max(...values)
-      expect(max).toBeGreaterThan(100)
-    })
-  })
+	describe("basic operations", () => {
+		it("initializes with correct value", () => {
+			const mv = motionValue(100)
+			expect(mv.get()).toBe(100)
+		})
+
+		it("jump() sets value immediately", () => {
+			const mv = motionValue(0)
+			mv.jump(50)
+			expect(mv.get()).toBe(50)
+			expect(mv.getVelocity()).toBe(0)
+		})
+
+		it("jump() stops any active animation", () => {
+			const mv = motionValue(0)
+			mv.set(100) // Start animation
+			expect(mv.isAnimating()).toBe(true)
+			mv.jump(50)
+			expect(mv.isAnimating()).toBe(false)
+			expect(mv.get()).toBe(50)
+		})
+	})
+
+	describe("spring animation", () => {
+		it("set() starts animation toward target", () => {
+			const mv = motionValue(0)
+			mv.set(100)
+			expect(mv.isAnimating()).toBe(true)
+		})
+
+		it("notifies on change", () => {
+			const mv = motionValue(0)
+			const values: number[] = []
+			mv.on("change", (v) => values.push(v))
+			mv.jump(50)
+			expect(values).toContain(50)
+		})
+
+		it("notifies animationStart and animationComplete", async () => {
+			const mv = motionValue(0)
+			let started = false
+			let completed = false
+			mv.on("animationStart", () => {
+				started = true
+			})
+			mv.on("animationComplete", () => {
+				completed = true
+			})
+
+			mv.set(100, { stiffness: 1000, damping: 50 }) // Fast spring
+			expect(started).toBe(true)
+
+			// Wait for animation to complete
+			await new Promise((r) => setTimeout(r, 500))
+			expect(completed).toBe(true)
+		})
+
+		it("stop() halts animation", () => {
+			const mv = motionValue(0)
+			mv.set(100)
+			expect(mv.isAnimating()).toBe(true)
+			mv.stop()
+			expect(mv.isAnimating()).toBe(false)
+		})
+	})
+
+	describe("spring physics correctness", () => {
+		it("reaches target value when settled", async () => {
+			const mv = motionValue(0)
+			mv.set(100, { stiffness: 500, damping: 30 })
+
+			await new Promise((r) => setTimeout(r, 1000))
+			expect(mv.get()).toBeCloseTo(100, 1)
+		})
+
+		it("velocity is zero when settled", async () => {
+			const mv = motionValue(0)
+			mv.set(100, { stiffness: 500, damping: 30 })
+
+			await new Promise((r) => setTimeout(r, 1000))
+			expect(Math.abs(mv.getVelocity())).toBeLessThan(0.1)
+		})
+	})
+
+	describe("retargeting", () => {
+		it("preserves velocity when retargeting mid-animation", async () => {
+			const mv = motionValue(0)
+			mv.set(100, { stiffness: 100, damping: 10 })
+
+			// Wait a bit for velocity to build up
+			await new Promise((r) => setTimeout(r, 50))
+
+			const velocityBefore = mv.getVelocity()
+			const positionBefore = mv.get()
+
+			// Retarget to opposite direction
+			mv.set(0, { stiffness: 100, damping: 10 })
+
+			// Velocity should be preserved (same value, continuing momentum)
+			expect(mv.getVelocity()).toBeCloseTo(velocityBefore, 1)
+			expect(mv.get()).toBeCloseTo(positionBefore, 1)
+		})
+
+		it("curves smoothly when reversing direction", async () => {
+			const mv = motionValue(0)
+			mv.set(100, { stiffness: 100, damping: 15 })
+
+			// Wait for positive velocity
+			await new Promise((r) => setTimeout(r, 30))
+			const velBefore = mv.getVelocity()
+			expect(velBefore).toBeGreaterThan(0)
+
+			// Retarget back to 0
+			mv.set(0, { stiffness: 100, damping: 15 })
+
+			// Should still have positive velocity immediately after retarget
+			expect(mv.getVelocity()).toBeGreaterThan(0)
+
+			// Wait a bit - velocity should decrease and eventually reverse
+			await new Promise((r) => setTimeout(r, 100))
+			// Position should have moved past where it was (momentum carried it)
+			// or started moving back toward 0
+		})
+	})
+
+	describe("visualDuration/bounce API", () => {
+		it("visualDuration controls animation speed", async () => {
+			const fast = motionValue(0)
+			const slow = motionValue(0)
+
+			fast.set(100, { visualDuration: 0.1, bounce: 0 })
+			slow.set(100, { visualDuration: 0.5, bounce: 0 })
+
+			await new Promise((r) => setTimeout(r, 150))
+
+			// Fast should be closer to target
+			expect(Math.abs(100 - fast.get())).toBeLessThan(Math.abs(100 - slow.get()))
+		})
+
+		it("bounce: 0 means no overshoot (critically damped)", async () => {
+			const mv = motionValue(0)
+			mv.set(100, { visualDuration: 0.3, bounce: 0 })
+
+			const values: number[] = []
+			mv.on("change", (v) => values.push(v))
+
+			await new Promise((r) => setTimeout(r, 500))
+
+			// Should never exceed target
+			const max = Math.max(...values)
+			expect(max).toBeLessThanOrEqual(100.5) // Small tolerance for numerical precision
+		})
+
+		it("bounce > 0 allows overshoot", async () => {
+			const mv = motionValue(0)
+			mv.set(100, { visualDuration: 0.3, bounce: 0.3 })
+
+			const values: number[] = []
+			mv.on("change", (v) => values.push(v))
+
+			await new Promise((r) => setTimeout(r, 500))
+
+			// Should overshoot target
+			const max = Math.max(...values)
+			expect(max).toBeGreaterThan(100)
+		})
+	})
 
-  describe("cleanup", () => {
-    it("destroy() stops animation and clears subscribers", () => {
-      const mv = motionValue(0)
-      mv.on("change", () => {
-        // subscriber added
-      })
+	describe("cleanup", () => {
+		it("destroy() stops animation and clears subscribers", () => {
+			const mv = motionValue(0)
+			mv.on("change", () => {
+				// subscriber added
+			})
 
-      mv.set(100)
-      mv.destroy()
+			mv.set(100)
+			mv.destroy()
 
-      expect(mv.isAnimating()).toBe(false)
+			expect(mv.isAnimating()).toBe(false)
 
-      // After destroy, just verify it doesn't throw
-      mv.jump(50)
-    })
+			// After destroy, just verify it doesn't throw
+			mv.jump(50)
+		})
 
-    it("unsubscribe function works", () => {
-      const mv = motionValue(0)
-      const values: number[] = []
-      const unsub = mv.on("change", (v) => values.push(v))
+		it("unsubscribe function works", () => {
+			const mv = motionValue(0)
+			const values: number[] = []
+			const unsub = mv.on("change", (v) => values.push(v))
 
-      mv.jump(10)
-      expect(values).toContain(10)
+			mv.jump(10)
+			expect(values).toContain(10)
 
-      unsub()
-      mv.jump(20)
-      expect(values).not.toContain(20)
-    })
-  })
+			unsub()
+			mv.jump(20)
+			expect(values).not.toContain(20)
+		})
+	})
 })
 
 describe("createSpringResolver", () => {
-  // Test the analytical spring formulas directly
-  // These are internal but critical for correctness
-
-  it("initial position equals from", () => {
-    const mv = motionValue(50)
-    mv.set(100, { stiffness: 100, damping: 10 })
-    // At t=0, should still be at initial position
-    expect(mv.get()).toBe(50)
-  })
-
-  it("initial velocity is preserved", () => {
-    const mv = motionValue(0)
-    mv.set(100, { stiffness: 100, damping: 10 })
-
-    // Initial velocity should be 0 (starting from rest)
-    expect(mv.getVelocity()).toBe(0)
-  })
+	// Test the analytical spring formulas directly
+	// These are internal but critical for correctness
+
+	it("initial position equals from", () => {
+		const mv = motionValue(50)
+		mv.set(100, { stiffness: 100, damping: 10 })
+		// At t=0, should still be at initial position
+		expect(mv.get()).toBe(50)
+	})
+
+	it("initial velocity is preserved", () => {
+		const mv = motionValue(0)
+		mv.set(100, { stiffness: 100, damping: 10 })
+
+		// Initial velocity should be 0 (starting from rest)
+		expect(mv.getVelocity()).toBe(0)
+	})
 })

package/src/motion/motion-value.ts

@@ -10,117 +10,117 @@ import { type SpringOptions, DEFAULT_SPRING_OPTIONS } from "./types.js"
 
 /** Create a MotionValue. Factory function like Motion's motionValue(). */
 export function motionValue<T>(initial: T): MotionValue<T> {
-  return new MotionValue(initial)
+	return new MotionValue(initial)
 }
 
 /**
  * MotionValue tracks a value and its velocity, supporting spring animations.
  */
 export class MotionValue<T = number> extends EventEmitter<T> {
-  private current: T
-  private target: T
-  private velocity = 0
-  private animation: { stop: () => void } | null = null
-
-  constructor(initial: T) {
-    super()
-    this.current = initial
-    this.target = initial
-  }
-
-  /** Get the current value */
-  get(): T {
-    return this.current
-  }
-
-  /** Set value immediately (no animation) */
-  jump(value: T) {
-    this.stop()
-    this.current = value
-    this.target = value
-    this.velocity = 0
-    this.notify("change", value)
-  }
-
-  /** Set target and animate with spring */
-  set(value: T, options?: SpringOptions) {
-    if (typeof value !== "number" || typeof this.current !== "number") {
-      // Non-numeric: jump immediately
-      this.jump(value)
-      return
-    }
-    this.target = value
-    this.animateSpring(options)
-  }
-
-  /** Get current velocity */
-  getVelocity(): number {
-    return this.velocity
-  }
-
-  /** Check if currently animating */
-  isAnimating(): boolean {
-    return this.animation !== null
-  }
-
-  /** Stop any active animation */
-  stop() {
-    if (this.animation) {
-      this.animation.stop()
-      this.animation = null
-    }
-  }
-
-  /** Destroy and clean up */
-  destroy() {
-    this.stop()
-    this.clearSubscribers()
-  }
-
-  private animateSpring(options?: SpringOptions) {
-    this.stop()
-
-    const opts = { ...DEFAULT_SPRING_OPTIONS, ...options }
-    const from = this.current as number
-    const to = this.target as number
-
-    if (from === to) return
-
-    // Derive stiffness/damping from visualDuration/bounce if provided
-    let { stiffness, damping, mass } = opts
-    if (opts.visualDuration && opts.visualDuration > 0) {
-      const derived = springFromVisualDuration(opts.visualDuration, opts.bounce)
-      stiffness = derived.stiffness
-      damping = derived.damping
-    }
-
-    // Create spring resolver (analytical solution)
-    const resolver = createSpringResolver(from, to, this.velocity, stiffness, damping, mass)
-
-    this.notify("animationStart", undefined)
-    const startTime = Date.now()
-
-    const unsubscribe = subscribeFrame(() => {
-      const elapsed = (Date.now() - startTime) / 1000 // seconds
-
-      const state = resolver(elapsed)
-      this.current = state.value as T
-      this.velocity = state.velocity
-
-      this.notify("change", this.current)
-
-      if (state.done) {
-        this.current = to as T
-        this.velocity = 0
-        this.animation = null
-        this.notify("change", this.current)
-        this.notify("animationComplete", undefined)
-        unsubscribe()
-      }
-    })
-
-    this.animation = { stop: unsubscribe }
-  }
+	private current: T
+	private target: T
+	private velocity = 0
+	private animation: { stop: () => void } | null = null
+
+	constructor(initial: T) {
+		super()
+		this.current = initial
+		this.target = initial
+	}
+
+	/** Get the current value */
+	get(): T {
+		return this.current
+	}
+
+	/** Set value immediately (no animation) */
+	jump(value: T) {
+		this.stop()
+		this.current = value
+		this.target = value
+		this.velocity = 0
+		this.notify("change", value)
+	}
+
+	/** Set target and animate with spring */
+	set(value: T, options?: SpringOptions) {
+		if (typeof value !== "number" || typeof this.current !== "number") {
+			// Non-numeric: jump immediately
+			this.jump(value)
+			return
+		}
+		this.target = value
+		this.animateSpring(options)
+	}
+
+	/** Get current velocity */
+	getVelocity(): number {
+		return this.velocity
+	}
+
+	/** Check if currently animating */
+	isAnimating(): boolean {
+		return this.animation !== null
+	}
+
+	/** Stop any active animation */
+	stop() {
+		if (this.animation) {
+			this.animation.stop()
+			this.animation = null
+		}
+	}
+
+	/** Destroy and clean up */
+	destroy() {
+		this.stop()
+		this.clearSubscribers()
+	}
+
+	private animateSpring(options?: SpringOptions) {
+		this.stop()
+
+		const opts = { ...DEFAULT_SPRING_OPTIONS, ...options }
+		const from = this.current as number
+		const to = this.target as number
+
+		if (from === to) return
+
+		// Derive stiffness/damping from visualDuration/bounce if provided
+		let { stiffness, damping, mass } = opts
+		if (opts.visualDuration && opts.visualDuration > 0) {
+			const derived = springFromVisualDuration(opts.visualDuration, opts.bounce)
+			stiffness = derived.stiffness
+			damping = derived.damping
+		}
+
+		// Create spring resolver (analytical solution)
+		const resolver = createSpringResolver(from, to, this.velocity, stiffness, damping, mass)
+
+		this.notify("animationStart", undefined)
+		const startTime = Date.now()
+
+		const unsubscribe = subscribeFrame(() => {
+			const elapsed = (Date.now() - startTime) / 1000 // seconds
+
+			const state = resolver(elapsed)
+			this.current = state.value as T
+			this.velocity = state.velocity
+
+			this.notify("change", this.current)
+
+			if (state.done) {
+				this.current = to as T
+				this.velocity = 0
+				this.animation = null
+				this.notify("change", this.current)
+				this.notify("animationComplete", undefined)
+				unsubscribe()
+			}
+		})
+
+		this.animation = { stop: unsubscribe }
+	}
 }
 
 // Re-export everything for backwards compatibility
@@ -129,12 +129,12 @@ export type { EventName, Subscriber } from "./event-emitter.js"
 export { createSpringResolver, springFromVisualDuration, isSpringSettled } from "./spring-math.js"
 export { ColorMotionValue } from "./color-motion-value.js"
 export {
-  useMotionValue,
-  useSpring,
-  useSprings,
-  useSpringRenderer,
-  useMotionValueEvent,
-  useColorMotionValue,
-  useColorSpring,
+	useMotionValue,
+	useSpring,
+	useSprings,
+	useSpringRenderer,
+	useMotionValueEvent,
+	useColorMotionValue,
+	useColorSpring,
 } from "./hooks.js"
 export type { RGBA, ColorInput } from "./color.js"