@effect-tui/react 0.1.1 → 0.1.4

package/src/index.ts

@@ -12,37 +12,43 @@ export {
 } from "./renderer.js"
 export type { TuiRenderer, RendererOptions, Root, FrameStats, RenderInstance } from "./renderer.js"
 
-// Components
+// CodeBlock (syntax highlighting)
 export { CodeBlock } from "./codeblock.js"
 export type { CodeBlockProps } from "./codeblock.js"
 
 // Highlight utilities
 export {
-  highlightCode,
-  toPlainLines,
-  type HighlightLine,
-  type HighlightToken,
-  type HighlightTokenStyle,
+	highlightCode,
+	toPlainLines,
+	type HighlightLine,
+	type HighlightToken,
+	type HighlightTokenStyle,
 } from "./highlight.js"
 
 // Hooks
-export { useKeyboard, usePaste } from "./hooks/index.js"
+export { useKeyboard, useMouse, usePaste, useScroll } from "./hooks/index.js"
 export { useFrameStats } from "./hooks/useFrameStats.js"
-export type { UseKeyboardOptions } from "./hooks/index.js"
+export type {
+	UseKeyboardOptions,
+	UseMouseOptions,
+	UseScrollOptions,
+	UseScrollReturn,
+	ScrollState,
+} from "./hooks/index.js"
 
 // Motion (spring animations)
 export {
-  useMotionValue,
-  useSpring,
-  useSprings,
-  useSpringRenderer,
-  useMotionValueEvent,
-  useAnimationFrame,
-  motionValue,
-  // Color springs
-  ColorMotionValue,
-  useColorMotionValue,
-  useColorSpring,
+	useMotionValue,
+	useSpring,
+	useSprings,
+	useSpringRenderer,
+	useMotionValueEvent,
+	useAnimationFrame,
+	motionValue,
+	// Color springs
+	ColorMotionValue,
+	useColorMotionValue,
+	useColorSpring,
 } from "./motion/index.js"
 export type { SpringOptions, MotionValue, RGBA, ColorInput } from "./motion/index.js"
 
@@ -55,9 +61,28 @@ export type { HStackProps } from "./hosts/hstack.js"
 export type { ZStackProps } from "./hosts/zstack.js"
 export type { BoxProps, BorderKind } from "./hosts/box.js"
 export type { CanvasProps, DrawContext } from "./hosts/canvas.js"
+export type { ScrollProps } from "./hosts/scroll.js"
 
 // Debug
 export { DiagnosticsPanel } from "./debug/DiagnosticsPanel.js"
 
+// Input components
+export { TextInput, type TextInputProps } from "./components/index.js"
+export { MultilineTextInput, type MultilineTextInputProps } from "./components/index.js"
+export { Markdown, type MarkdownProps, type MarkdownTheme } from "./components/index.js"
+export { Static, type StaticProps } from "./components/index.js"
+export { Overlay, type OverlayProps, type OverlayItemProps } from "./components/index.js"
+
+// Development utilities (HMR)
+export {
+	devRender,
+	devMain,
+	hmr,
+	hmrState,
+	autoHmr,
+	type DevRenderOptions,
+	type DevRenderResult,
+} from "./dev.js"
+
 // JSX types are provided via jsxImportSource: "@effect-tui/react"
 // See jsx-runtime.ts at package root for the JSX namespace

package/src/inline/index.tsx

@@ -17,145 +17,145 @@ const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇",
 type TaskStatus = "pending" | "running" | "success" | "failure"
 
 interface TaskEntry {
-  label: string
-  status: TaskStatus
+	label: string
+	status: TaskStatus
 }
 
 interface TaskListProps {
-  tasks: TaskEntry[]
-  spinnerIndex: number
+	tasks: TaskEntry[]
+	spinnerIndex: number
 }
 
 function TaskList({ tasks, spinnerIndex }: TaskListProps) {
-  return (
-    <vstack>
-      {tasks.map((task, i) => {
-        const icon =
-          task.status === "running"
-            ? SPINNER[spinnerIndex % SPINNER.length]
-            : task.status === "success"
-              ? "✓"
-              : task.status === "failure"
-                ? "✗"
-                : "○"
-
-        const color =
-          task.status === "running"
-            ? Colors.brightYellow
-            : task.status === "success"
-              ? Colors.brightGreen
-              : task.status === "failure"
-                ? Colors.brightRed
-                : Colors.gray(10)
-
-        return (
-          <hstack key={i} spacing={1}>
-            <text bold fg={color}>
-              {icon}
-            </text>
-            <text fg={task.status === "pending" ? Colors.gray(10) : undefined}>{task.label}</text>
-          </hstack>
-        )
-      })}
-    </vstack>
-  )
+	return (
+		<vstack>
+			{tasks.map((task, i) => {
+				const icon =
+					task.status === "running"
+						? SPINNER[spinnerIndex % SPINNER.length]
+						: task.status === "success"
+							? "✓"
+							: task.status === "failure"
+								? "✗"
+								: "○"
+
+				const color =
+					task.status === "running"
+						? Colors.brightYellow
+						: task.status === "success"
+							? Colors.brightGreen
+							: task.status === "failure"
+								? Colors.brightRed
+								: Colors.gray(10)
+
+				return (
+					<hstack key={i} spacing={1}>
+						<text bold fg={color}>
+							{icon}
+						</text>
+						<text fg={task.status === "pending" ? Colors.gray(10) : undefined}>{task.label}</text>
+					</hstack>
+				)
+			})}
+		</vstack>
+	)
 }
 
 export interface TaskOptions<A> {
-  /** Format the result to append to the label on success */
-  formatResult?: (result: A) => string
+	/** Format the result to append to the label on success */
+	formatResult?: (result: A) => string
 }
 
 // Service definition
 export interface InlineRenderer {
-  /**
-   * Wrap an effect with inline progress visualization.
-   * Shows a spinner while running, checkmark on success, X on failure.
-   */
-  readonly task: <A, E, R>(
-    label: string,
-    effect: Effect.Effect<A, E, R>,
-    options?: TaskOptions<A>,
-  ) => Effect.Effect<A, E, R>
+	/**
+	 * Wrap an effect with inline progress visualization.
+	 * Shows a spinner while running, checkmark on success, X on failure.
+	 */
+	readonly task: <A, E, R>(
+		label: string,
+		effect: Effect.Effect<A, E, R>,
+		options?: TaskOptions<A>,
+	) => Effect.Effect<A, E, R>
 }
 
 export const InlineRenderer = Context.GenericTag<InlineRenderer>("@effect-tui/react/InlineRenderer")
 
 // Create the live layer
 export const InlineRendererLive: Layer.Layer<InlineRenderer> = Layer.scoped(
-  InlineRenderer,
-  Effect.gen(function* () {
-    // Create renderer in inline mode
-    const renderer = createRenderer({ mode: "inline" })
-    const root = createRoot(renderer)
-
-    // Session state - accumulate all tasks
-    const tasks: TaskEntry[] = []
-    let spinnerIndex = 0
-    let intervalId: ReturnType<typeof setInterval> | null = null
-
-    const render = () => {
-      root.render(<TaskList tasks={[...tasks]} spinnerIndex={spinnerIndex} />)
-    }
-
-    const startSpinner = (label: string) => {
-      tasks.push({ label, status: "running" })
-      spinnerIndex = 0
-      render()
-
-      intervalId = setInterval(() => {
-        spinnerIndex = (spinnerIndex + 1) % SPINNER.length
-        render()
-      }, 80)
-    }
-
-    const stopSpinner = (status: "success" | "failure", labelSuffix?: string) => {
-      if (intervalId) {
-        clearInterval(intervalId)
-        intervalId = null
-      }
-      // Update last task status
-      if (tasks.length > 0) {
-        tasks[tasks.length - 1].status = status
-        if (labelSuffix) {
-          tasks[tasks.length - 1].label += labelSuffix
-        }
-        render()
-      }
-    }
-
-    // Cleanup on scope close
-    yield* Effect.addFinalizer(() =>
-      Effect.sync(() => {
-        if (intervalId) clearInterval(intervalId)
-        root.unmount()
-      }),
-    )
-
-    return InlineRenderer.of({
-      task: <A, E, R>(
-        label: string,
-        effect: Effect.Effect<A, E, R>,
-        options?: TaskOptions<A>,
-      ): Effect.Effect<A, E, R> =>
-        Effect.gen(function* () {
-          startSpinner(label)
-
-          const result = yield* effect.pipe(Effect.either)
-
-          if (Either.isRight(result)) {
-            const suffix = options?.formatResult ? ` → ${options.formatResult(result.right)}` : ""
-            stopSpinner("success", suffix)
-            yield* Effect.sleep(50)
-            return result.right
-          } else {
-            stopSpinner("failure")
-            yield* Effect.sleep(50)
-            return yield* Effect.fail(result.left)
-          }
-        }),
-    })
-  }),
+	InlineRenderer,
+	Effect.gen(function* () {
+		// Create renderer in inline mode
+		const renderer = createRenderer({ mode: "inline" })
+		const root = createRoot(renderer)
+
+		// Session state - accumulate all tasks
+		const tasks: TaskEntry[] = []
+		let spinnerIndex = 0
+		let intervalId: ReturnType<typeof setInterval> | null = null
+
+		const render = () => {
+			root.render(<TaskList tasks={[...tasks]} spinnerIndex={spinnerIndex} />)
+		}
+
+		const startSpinner = (label: string) => {
+			tasks.push({ label, status: "running" })
+			spinnerIndex = 0
+			render()
+
+			intervalId = setInterval(() => {
+				spinnerIndex = (spinnerIndex + 1) % SPINNER.length
+				render()
+			}, 80)
+		}
+
+		const stopSpinner = (status: "success" | "failure", labelSuffix?: string) => {
+			if (intervalId) {
+				clearInterval(intervalId)
+				intervalId = null
+			}
+			// Update last task status
+			if (tasks.length > 0) {
+				tasks[tasks.length - 1].status = status
+				if (labelSuffix) {
+					tasks[tasks.length - 1].label += labelSuffix
+				}
+				render()
+			}
+		}
+
+		// Cleanup on scope close
+		yield* Effect.addFinalizer(() =>
+			Effect.sync(() => {
+				if (intervalId) clearInterval(intervalId)
+				root.unmount()
+			}),
+		)
+
+		return InlineRenderer.of({
+			task: <A, E, R>(
+				label: string,
+				effect: Effect.Effect<A, E, R>,
+				options?: TaskOptions<A>,
+			): Effect.Effect<A, E, R> =>
+				Effect.gen(function* () {
+					startSpinner(label)
+
+					const result = yield* effect.pipe(Effect.either)
+
+					if (Either.isRight(result)) {
+						const suffix = options?.formatResult ? ` → ${options.formatResult(result.right)}` : ""
+						stopSpinner("success", suffix)
+						yield* Effect.sleep(50)
+						return result.right
+					} else {
+						stopSpinner("failure")
+						yield* Effect.sleep(50)
+						return yield* Effect.fail(result.left)
+					}
+				}),
+		})
+	}),
 )
 
 /**
@@ -175,7 +175,7 @@ export const InlineRendererLive: Layer.Layer<InlineRenderer> = Layer.scoped(
  * ```
  */
 export const task = <A, E, R>(
-  label: string,
-  effect: Effect.Effect<A, E, R>,
-  options?: TaskOptions<A>,
+	label: string,
+	effect: Effect.Effect<A, E, R>,
+	options?: TaskOptions<A>,
 ): Effect.Effect<A, E, R | InlineRenderer> => Effect.flatMap(InlineRenderer, (r) => r.task(label, effect, options))

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

@@ -12,79 +12,79 @@ import type { SpringOptions } from "./types.js"
  * Each channel (r, g, b, a) is animated independently with the same spring config.
  */
 export class ColorMotionValue extends EventEmitter<RGBA> {
-  private rMv: MotionValue<number>
-  private gMv: MotionValue<number>
-  private bMv: MotionValue<number>
-  private aMv: MotionValue<number>
+	private rMv: MotionValue<number>
+	private gMv: MotionValue<number>
+	private bMv: MotionValue<number>
+	private aMv: MotionValue<number>
 
-  constructor(initial: ColorInput) {
-    super()
-    const rgba = parseColor(initial)
-    this.rMv = new MotionValue(rgba.r)
-    this.gMv = new MotionValue(rgba.g)
-    this.bMv = new MotionValue(rgba.b)
-    this.aMv = new MotionValue(rgba.a)
-  }
+	constructor(initial: ColorInput) {
+		super()
+		const rgba = parseColor(initial)
+		this.rMv = new MotionValue(rgba.r)
+		this.gMv = new MotionValue(rgba.g)
+		this.bMv = new MotionValue(rgba.b)
+		this.aMv = new MotionValue(rgba.a)
+	}
 
-  /** Get current RGBA value */
-  get(): RGBA {
-    return {
-      r: Math.round(Math.max(0, Math.min(255, this.rMv.get()))),
-      g: Math.round(Math.max(0, Math.min(255, this.gMv.get()))),
-      b: Math.round(Math.max(0, Math.min(255, this.bMv.get()))),
-      a: Math.max(0, Math.min(1, this.aMv.get())),
-    }
-  }
+	/** Get current RGBA value */
+	get(): RGBA {
+		return {
+			r: Math.round(Math.max(0, Math.min(255, this.rMv.get()))),
+			g: Math.round(Math.max(0, Math.min(255, this.gMv.get()))),
+			b: Math.round(Math.max(0, Math.min(255, this.bMv.get()))),
+			a: Math.max(0, Math.min(1, this.aMv.get())),
+		}
+	}
 
-  /** Set color immediately (no animation) */
-  jump(color: ColorInput) {
-    const rgba = parseColor(color)
-    this.rMv.jump(rgba.r)
-    this.gMv.jump(rgba.g)
-    this.bMv.jump(rgba.b)
-    this.aMv.jump(rgba.a)
-    this.notify("change", this.get())
-  }
+	/** Set color immediately (no animation) */
+	jump(color: ColorInput) {
+		const rgba = parseColor(color)
+		this.rMv.jump(rgba.r)
+		this.gMv.jump(rgba.g)
+		this.bMv.jump(rgba.b)
+		this.aMv.jump(rgba.a)
+		this.notify("change", this.get())
+	}
 
-  /** Set target color and animate with spring */
-  set(color: ColorInput, options?: SpringOptions) {
-    const rgba = parseColor(color)
-    this.rMv.set(rgba.r, options)
-    this.gMv.set(rgba.g, options)
-    this.bMv.set(rgba.b, options)
-    this.aMv.set(rgba.a, options)
-  }
+	/** Set target color and animate with spring */
+	set(color: ColorInput, options?: SpringOptions) {
+		const rgba = parseColor(color)
+		this.rMv.set(rgba.r, options)
+		this.gMv.set(rgba.g, options)
+		this.bMv.set(rgba.b, options)
+		this.aMv.set(rgba.a, options)
+	}
 
-  /** Check if any channel is animating */
-  isAnimating(): boolean {
-    return this.rMv.isAnimating() || this.gMv.isAnimating() || this.bMv.isAnimating() || this.aMv.isAnimating()
-  }
+	/** Check if any channel is animating */
+	isAnimating(): boolean {
+		return this.rMv.isAnimating() || this.gMv.isAnimating() || this.bMv.isAnimating() || this.aMv.isAnimating()
+	}
 
-  /** Stop all channel animations */
-  stop() {
-    this.rMv.stop()
-    this.gMv.stop()
-    this.bMv.stop()
-    this.aMv.stop()
-  }
+	/** Stop all channel animations */
+	stop() {
+		this.rMv.stop()
+		this.gMv.stop()
+		this.bMv.stop()
+		this.aMv.stop()
+	}
 
-  /** Destroy and clean up */
-  destroy() {
-    this.rMv.destroy()
-    this.gMv.destroy()
-    this.bMv.destroy()
-    this.aMv.destroy()
-    this.clearSubscribers()
-  }
+	/** Destroy and clean up */
+	destroy() {
+		this.rMv.destroy()
+		this.gMv.destroy()
+		this.bMv.destroy()
+		this.aMv.destroy()
+		this.clearSubscribers()
+	}
 
-  /** Subscribe internal motion values to a callback (used by hooks) */
-  _subscribeChannels(callback: () => void): () => void {
-    const unsubs = [
-      this.rMv.on("change", callback),
-      this.gMv.on("change", callback),
-      this.bMv.on("change", callback),
-      this.aMv.on("change", callback),
-    ]
-    return () => unsubs.forEach((u) => u())
-  }
+	/** Subscribe internal motion values to a callback (used by hooks) */
+	_subscribeChannels(callback: () => void): () => void {
+		const unsubs = [
+			this.rMv.on("change", callback),
+			this.gMv.on("change", callback),
+			this.bMv.on("change", callback),
+			this.aMv.on("change", callback),
+		]
+		return () => unsubs.forEach((u) => u())
+	}
 }