@effect-tui/react 0.1.1 → 0.1.4

package/src/motion/spring-math.ts

@@ -1,12 +1,17 @@
 /**
  * Spring physics calculations using analytical solutions.
- * Matches framer-motion's formulas.
+ * Matches framer-motion's formulas (stiffness/damping parameters).
+ *
+ * Note: @effect-tui/core also exports spring physics with frequency/dampingRatio
+ * parameters. Use that for functional/immutable APIs, use this for React hooks.
+ *
+ * @see @effect-tui/core for Spring, stepSpring1D, motionValue (functional API)
  */
 
 export interface SpringState {
-  value: number
-  velocity: number
-  done: boolean
+	value: number
+	velocity: number
+	done: boolean
 }
 
 export type SpringResolver = (t: number) => SpringState
@@ -16,77 +21,77 @@ export type SpringResolver = (t: number) => SpringState
  * Returns a function that computes position/velocity at any time t.
  */
 export function createSpringResolver(
-  from: number,
-  to: number,
-  initialVelocity: number,
-  stiffness: number,
-  damping: number,
-  mass: number,
-  restSpeed = 0.01,
-  restDelta = 0.01,
+	from: number,
+	to: number,
+	initialVelocity: number,
+	stiffness: number,
+	damping: number,
+	mass: number,
+	restSpeed = 0.01,
+	restDelta = 0.01,
 ): SpringResolver {
-  // Use same convention as framer-motion: initialDelta = from - to
-  const initialDelta = from - to
-  const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass))
-  const angularFreq = Math.sqrt(stiffness / mass)
-  const gamma = dampingRatio * angularFreq
-
-  if (dampingRatio < 1) {
-    // Underdamped (oscillates)
-    const dampedFreq = angularFreq * Math.sqrt(1 - dampingRatio * dampingRatio)
-    // Coefficients matching framer-motion's formula
-    const A = initialDelta
-    const B = (initialVelocity + gamma * initialDelta) / dampedFreq
-
-    return (t: number): SpringState => {
-      const envelope = Math.exp(-gamma * t)
-      const cos = Math.cos(dampedFreq * t)
-      const sin = Math.sin(dampedFreq * t)
-
-      // Position: to + envelope * (A*cos + B*sin)
-      const value = to + envelope * (A * cos + B * sin)
-
-      // Velocity: derivative of position
-      const velocity = envelope * ((B * dampedFreq - gamma * A) * cos + (-A * dampedFreq - gamma * B) * sin)
-
-      const done = Math.abs(velocity) < restSpeed && Math.abs(to - value) < restDelta
-
-      return { value, velocity, done }
-    }
-  } else if (dampingRatio === 1) {
-    // Critically damped (fastest without oscillation)
-    const A = initialDelta
-    const B = initialVelocity + angularFreq * initialDelta
-
-    return (t: number): SpringState => {
-      const envelope = Math.exp(-angularFreq * t)
-      const value = to + envelope * (A + B * t)
-      const velocity = envelope * (B - angularFreq * A - angularFreq * B * t)
-
-      const done = Math.abs(velocity) < restSpeed && Math.abs(to - value) < restDelta
-
-      return { value, velocity, done }
-    }
-  } else {
-    // Overdamped (slow, no oscillation)
-    const s = Math.sqrt(dampingRatio * dampingRatio - 1)
-    const r1 = -angularFreq * (dampingRatio - s)
-    const r2 = -angularFreq * (dampingRatio + s)
-    // Solve: A + B = initialDelta, A*r1 + B*r2 = initialVelocity
-    const A = (initialVelocity - r2 * initialDelta) / (r1 - r2)
-    const B = initialDelta - A
-
-    return (t: number): SpringState => {
-      const e1 = Math.exp(r1 * t)
-      const e2 = Math.exp(r2 * t)
-      const value = to + A * e1 + B * e2
-      const velocity = A * r1 * e1 + B * r2 * e2
-
-      const done = Math.abs(velocity) < restSpeed && Math.abs(to - value) < restDelta
-
-      return { value, velocity, done }
-    }
-  }
+	// Use same convention as framer-motion: initialDelta = from - to
+	const initialDelta = from - to
+	const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass))
+	const angularFreq = Math.sqrt(stiffness / mass)
+	const gamma = dampingRatio * angularFreq
+
+	if (dampingRatio < 1) {
+		// Underdamped (oscillates)
+		const dampedFreq = angularFreq * Math.sqrt(1 - dampingRatio * dampingRatio)
+		// Coefficients matching framer-motion's formula
+		const A = initialDelta
+		const B = (initialVelocity + gamma * initialDelta) / dampedFreq
+
+		return (t: number): SpringState => {
+			const envelope = Math.exp(-gamma * t)
+			const cos = Math.cos(dampedFreq * t)
+			const sin = Math.sin(dampedFreq * t)
+
+			// Position: to + envelope * (A*cos + B*sin)
+			const value = to + envelope * (A * cos + B * sin)
+
+			// Velocity: derivative of position
+			const velocity = envelope * ((B * dampedFreq - gamma * A) * cos + (-A * dampedFreq - gamma * B) * sin)
+
+			const done = Math.abs(velocity) < restSpeed && Math.abs(to - value) < restDelta
+
+			return { value, velocity, done }
+		}
+	} else if (dampingRatio === 1) {
+		// Critically damped (fastest without oscillation)
+		const A = initialDelta
+		const B = initialVelocity + angularFreq * initialDelta
+
+		return (t: number): SpringState => {
+			const envelope = Math.exp(-angularFreq * t)
+			const value = to + envelope * (A + B * t)
+			const velocity = envelope * (B - angularFreq * A - angularFreq * B * t)
+
+			const done = Math.abs(velocity) < restSpeed && Math.abs(to - value) < restDelta
+
+			return { value, velocity, done }
+		}
+	} else {
+		// Overdamped (slow, no oscillation)
+		const s = Math.sqrt(dampingRatio * dampingRatio - 1)
+		const r1 = -angularFreq * (dampingRatio - s)
+		const r2 = -angularFreq * (dampingRatio + s)
+		// Solve: A + B = initialDelta, A*r1 + B*r2 = initialVelocity
+		const A = (initialVelocity - r2 * initialDelta) / (r1 - r2)
+		const B = initialDelta - A
+
+		return (t: number): SpringState => {
+			const e1 = Math.exp(r1 * t)
+			const e2 = Math.exp(r2 * t)
+			const value = to + A * e1 + B * e2
+			const velocity = A * r1 * e1 + B * r2 * e2
+
+			const done = Math.abs(velocity) < restSpeed && Math.abs(to - value) < restDelta
+
+			return { value, velocity, done }
+		}
+	}
 }
 
 /**
@@ -94,21 +99,21 @@ export function createSpringResolver(
  * Uses Motion's formula from motion-dom.
  */
 export function springFromVisualDuration(
-  visualDuration: number,
-  bounce: number,
+	visualDuration: number,
+	bounce: number,
 ): { stiffness: number; damping: number } {
-  const root = (2 * Math.PI) / (visualDuration * 1.2)
-  const stiffness = root * root
-  // Clamp bounce to [0.05, 1], then invert: 0 bounce = damping ratio 1, 1 bounce = 0.05
-  const clampedBounce = Math.max(0.05, Math.min(1, 1 - bounce))
-  const damping = 2 * clampedBounce * Math.sqrt(stiffness)
+	const root = (2 * Math.PI) / (visualDuration * 1.2)
+	const stiffness = root * root
+	// Clamp bounce to [0.05, 1], then invert: 0 bounce = damping ratio 1, 1 bounce = 0.05
+	const clampedBounce = Math.max(0.05, Math.min(1, 1 - bounce))
+	const damping = 2 * clampedBounce * Math.sqrt(stiffness)
 
-  return { stiffness, damping }
+	return { stiffness, damping }
 }
 
 /**
  * Check if a spring has settled.
  */
 export function isSpringSettled(velocity: number, delta: number, restSpeed = 0.01, restDelta = 0.01): boolean {
-  return Math.abs(velocity) < restSpeed && Math.abs(delta) < restDelta
+	return Math.abs(velocity) < restSpeed && Math.abs(delta) < restDelta
 }

package/src/motion/types.ts

@@ -3,32 +3,32 @@
  */
 
 export interface SpringOptions {
-  /** Stiffness of the spring. Higher = snappier. Default: 100 */
-  stiffness?: number
-  /** Damping of the spring. Higher = less oscillation. Default: 10 */
-  damping?: number
-  /** Mass of the spring. Higher = more inertia. Default: 1 */
-  mass?: number
-  /**
-   * Visual duration in seconds. This is the perceptual duration of the animation.
-   * The spring will feel like it completes in this time, though it may technically
-   * continue settling. Overrides stiffness/damping when provided.
-   */
-  visualDuration?: number
-  /** Bounce amount 0-1 when using visualDuration. 0 = no bounce, 1 = full bounce. Default: 0 */
-  bounce?: number
-  /** Velocity threshold to consider settled. Default: 0.01 */
-  restSpeed?: number
-  /** Position threshold to consider settled. Default: 0.01 */
-  restDelta?: number
+	/** Stiffness of the spring. Higher = snappier. Default: 100 */
+	stiffness?: number
+	/** Damping of the spring. Higher = less oscillation. Default: 10 */
+	damping?: number
+	/** Mass of the spring. Higher = more inertia. Default: 1 */
+	mass?: number
+	/**
+	 * Visual duration in seconds. This is the perceptual duration of the animation.
+	 * The spring will feel like it completes in this time, though it may technically
+	 * continue settling. Overrides stiffness/damping when provided.
+	 */
+	visualDuration?: number
+	/** Bounce amount 0-1 when using visualDuration. 0 = no bounce, 1 = full bounce. Default: 0 */
+	bounce?: number
+	/** Velocity threshold to consider settled. Default: 0.01 */
+	restSpeed?: number
+	/** Position threshold to consider settled. Default: 0.01 */
+	restDelta?: number
 }
 
 export const DEFAULT_SPRING_OPTIONS: Required<SpringOptions> = {
-  stiffness: 100,
-  damping: 10,
-  mass: 1,
-  visualDuration: 0,
-  bounce: 0,
-  restSpeed: 0.01,
-  restDelta: 0.01,
+	stiffness: 100,
+	damping: 10,
+	mass: 1,
+	visualDuration: 0,
+	bounce: 0,
+	restSpeed: 0.01,
+	restDelta: 0.01,
 }

package/src/profiler.ts

@@ -8,10 +8,10 @@ const ENABLED = process.env.PROFILE_TUI === "1"
 const OUTPUT_FILE = "tui-profile.txt"
 
 interface PhaseStats {
-  total: number
-  count: number
-  min: number
-  max: number
+	total: number
+	count: number
+	min: number
+	max: number
 }
 
 const phases = new Map<string, PhaseStats>()
@@ -19,70 +19,70 @@ let frameCount = 0
 let frameTotal = 0
 
 export function startFrame(): number {
-  if (!ENABLED) return 0
-  return performance.now()
+	if (!ENABLED) return 0
+	return performance.now()
 }
 
 export function endFrame(start: number): void {
-  if (!ENABLED) return
-  const elapsed = performance.now() - start
-  frameCount++
-  frameTotal += elapsed
+	if (!ENABLED) return
+	const elapsed = performance.now() - start
+	frameCount++
+	frameTotal += elapsed
 }
 
 export function startPhase(): number {
-  if (!ENABLED) return 0
-  return performance.now()
+	if (!ENABLED) return 0
+	return performance.now()
 }
 
 export function endPhase(name: string, start: number): void {
-  if (!ENABLED) return
-  const elapsed = performance.now() - start
-  let stats = phases.get(name)
-  if (!stats) {
-    stats = { total: 0, count: 0, min: Infinity, max: 0 }
-    phases.set(name, stats)
-  }
-  stats.total += elapsed
-  stats.count++
-  stats.min = Math.min(stats.min, elapsed)
-  stats.max = Math.max(stats.max, elapsed)
+	if (!ENABLED) return
+	const elapsed = performance.now() - start
+	let stats = phases.get(name)
+	if (!stats) {
+		stats = { total: 0, count: 0, min: Infinity, max: 0 }
+		phases.set(name, stats)
+	}
+	stats.total += elapsed
+	stats.count++
+	stats.min = Math.min(stats.min, elapsed)
+	stats.max = Math.max(stats.max, elapsed)
 }
 
 export function dumpStats(): void {
-  if (!ENABLED || frameCount === 0) return
+	if (!ENABLED || frameCount === 0) return
 
-  const lines: string[] = []
-  const avgFrame = frameTotal / frameCount
-  lines.push(`=== TUI Profile (${frameCount} frames, avg ${avgFrame.toFixed(2)}ms) ===`)
+	const lines: string[] = []
+	const avgFrame = frameTotal / frameCount
+	lines.push(`=== TUI Profile (${frameCount} frames, avg ${avgFrame.toFixed(2)}ms) ===`)
 
-  // Sort by total time descending
-  const sorted = [...phases.entries()].sort((a, b) => b[1].total - a[1].total)
+	// Sort by total time descending
+	const sorted = [...phases.entries()].sort((a, b) => b[1].total - a[1].total)
 
-  for (const [name, stats] of sorted) {
-    const avg = stats.total / stats.count
-    const pct = ((stats.total / frameTotal) * 100).toFixed(1)
-    lines.push(
-      `  ${name.padEnd(12)} ${avg.toFixed(3)}ms avg  ${stats.min.toFixed(3)}-${stats.max.toFixed(3)}ms  ${pct}%`,
-    )
-  }
-  lines.push("")
+	for (const [name, stats] of sorted) {
+		const avg = stats.total / stats.count
+		const pct = ((stats.total / frameTotal) * 100).toFixed(1)
+		lines.push(
+			`  ${name.padEnd(12)} ${avg.toFixed(3)}ms avg  ${stats.min.toFixed(3)}-${stats.max.toFixed(3)}ms  ${pct}%`,
+		)
+	}
+	lines.push("")
 
-  try {
-    writeFileSync(OUTPUT_FILE, lines.join("\n"))
-    // Also print path after alt buffer exit
-    setTimeout(() => console.log(`Profile written to ${OUTPUT_FILE}`), 50)
-  } catch {
-    // Fallback to stderr if file write fails
-    console.error(lines.join("\n"))
-  }
+	try {
+		writeFileSync(OUTPUT_FILE, lines.join("\n"))
+		// Also print path after alt buffer exit
+		setTimeout(() => console.log(`Profile written to ${OUTPUT_FILE}`), 50)
+	} catch {
+		// Fallback to stderr if file write fails
+		console.error(lines.join("\n"))
+	}
 }
 
 // Auto-dump on exit
 if (ENABLED) {
-  process.on("exit", dumpStats)
-  process.on("SIGINT", () => {
-    dumpStats()
-    process.exit(0)
-  })
+	process.on("exit", dumpStats)
+	process.on("SIGINT", () => {
+		dumpStats()
+		process.exit(0)
+	})
 }