@effect-tui/react 0.1.1 → 0.1.4

package/src/visualize/index.tsx

@@ -3,9 +3,8 @@
 
 import { useState, useEffect } from "react"
 import { Cause, Context, Duration, Effect, Exit, Fiber, Layer, Option } from "effect"
-import { Colors } from "@effect-tui/core"
+import { Colors, ANSI } from "@effect-tui/core"
 import { createRenderer, createRoot } from "../renderer.js"
-import { ANSI } from "../terminal.js"
 
 const SPINNER_FRAMES = ["⠋", "⠙", "⠸", "⠴", "⠦", "⠇"] as const
 const SPIN_INTERVAL_MS = 80
@@ -15,180 +14,187 @@ const COMPLETION_DELAY_MS = 360
 type VisualizerStatus = "pending" | "success" | "failure"
 
 interface VisualizeOptions {
-  /** Show the result value below completion status */
-  showResult?: boolean
+	/** Show the result value below completion status */
+	showResult?: boolean
 }
 
 // Bridges Effect execution with React rendering
 class VisualizerState {
-  status: VisualizerStatus = "pending"
-  spinnerIndex = 0
-  elapsedMs = 0
-  errorSummary?: string
-  result?: unknown
-  showResult = false
-  private listeners = new Set<() => void>()
-
-  update(
-    patch: Partial<
-      Pick<VisualizerState, "status" | "spinnerIndex" | "elapsedMs" | "errorSummary" | "result" | "showResult">
-    >,
-  ) {
-    Object.assign(this, patch)
-    this.listeners.forEach((l) => l())
-  }
-
-  subscribe(listener: () => void): () => void {
-    this.listeners.add(listener)
-    return () => this.listeners.delete(listener)
-  }
+	status: VisualizerStatus = "pending"
+	spinnerIndex = 0
+	elapsedMs = 0
+	errorSummary?: string
+	result?: unknown
+	showResult = false
+	private listeners = new Set<() => void>()
+
+	update(
+		patch: Partial<
+			Pick<VisualizerState, "status" | "spinnerIndex" | "elapsedMs" | "errorSummary" | "result" | "showResult">
+		>,
+	) {
+		Object.assign(this, patch)
+		this.listeners.forEach((l) => l())
+	}
+
+	subscribe(listener: () => void): () => void {
+		this.listeners.add(listener)
+		return () => this.listeners.delete(listener)
+	}
 }
 
 const formatDuration = (ms: number): string => Duration.format(Duration.millis(Math.max(0, Math.round(ms))))
 
 const formatResult = (value: unknown): string => {
-  if (value === undefined) return "undefined"
-  if (value === null) return "null"
-  if (typeof value === "string") return JSON.stringify(value)
-  if (typeof value === "number" || typeof value === "boolean") return String(value)
-  try {
-    return JSON.stringify(value)
-  } catch {
-    return String(value)
-  }
+	if (value === undefined) return "undefined"
+	if (value === null) return "null"
+	if (typeof value === "string") return JSON.stringify(value)
+	if (typeof value === "number" || typeof value === "boolean") return String(value)
+	try {
+		return JSON.stringify(value)
+	} catch {
+		return String(value)
+	}
+}
+
+/** Type for Effect-style tagged errors */
+interface TaggedError {
+	readonly _tag: string
+	readonly message?: string
 }
 
 const summarizeCause = (cause: Cause.Cause<unknown>): string => {
-  const failure = Cause.failureOption(cause)
-  if (Option.isSome(failure)) {
-    const error = failure.value
-    if (error && typeof error === "object" && "_tag" in error && "message" in error) {
-      const message = String((error as any).message).trim()
-      return message ? `${(error as any)._tag}: ${message}` : String((error as any)._tag)
-    }
-    if (error && typeof error === "object" && "message" in error) {
-      return String((error as any).message)
-    }
-    return String(error)
-  }
-  const pretty = Cause.pretty(cause, { renderErrorCause: false })
-  const firstLine = pretty.split("\n").find((line: string) => line.trim().length > 0)
-  return firstLine ?? "Unknown failure"
+	const failure = Cause.failureOption(cause)
+	if (Option.isSome(failure)) {
+		const error = failure.value
+		if (error && typeof error === "object" && "_tag" in error && "message" in error) {
+			const tagged = error as TaggedError
+			const message = String(tagged.message ?? "").trim()
+			return message ? `${tagged._tag}: ${message}` : String(tagged._tag)
+		}
+		if (error && typeof error === "object" && "message" in error) {
+			return String((error as { message: unknown }).message)
+		}
+		return String(error)
+	}
+	const pretty = Cause.pretty(cause, { renderErrorCause: false })
+	const firstLine = pretty.split("\n").find((line: string) => line.trim().length > 0)
+	return firstLine ?? "Unknown failure"
 }
 
 function Visualizer({ state, label }: { state: VisualizerState; label: string }) {
-  const [, forceUpdate] = useState(0)
-
-  useEffect(() => {
-    return state.subscribe(() => forceUpdate((n) => n + 1))
-  }, [state])
-
-  const elapsed = formatDuration(state.elapsedMs)
-
-  if (state.status === "pending") {
-    return (
-      <vstack>
-        <hstack spacing={1}>
-          <text fg={Colors.brightCyan}>{SPINNER_FRAMES[state.spinnerIndex]}</text>
-          <text bold fg={Colors.brightWhite}>
-            {label}
-          </text>
-        </hstack>
-        <text fg={Colors.gray(10)}>└ Running… {elapsed}</text>
-      </vstack>
-    )
-  }
-
-  if (state.status === "success") {
-    const showingResult = state.showResult && state.result !== undefined
-    return (
-      <vstack>
-        <hstack spacing={1}>
-          <text bold fg={Colors.brightGreen}>
-            ✓
-          </text>
-          <text bold fg={Colors.brightGreen}>
-            {label}
-          </text>
-        </hstack>
-        {showingResult && <text fg={Colors.gray(20)}>├ {formatResult(state.result)}</text>}
-        <text fg={Colors.green}>
-          {showingResult ? "└" : "└"} Completed in {elapsed}
-        </text>
-      </vstack>
-    )
-  }
-
-  // failure
-  return (
-    <vstack>
-      <hstack spacing={1}>
-        <text bold fg={Colors.brightRed}>
-          ✗
-        </text>
-        <text bold fg={Colors.brightRed}>
-          {label}
-        </text>
-      </hstack>
-      <text fg={Colors.red}>├ {state.errorSummary ?? "Failed"}</text>
-      <text fg={Colors.red}>└ Failed after {elapsed}</text>
-    </vstack>
-  )
+	const [, forceUpdate] = useState(0)
+
+	useEffect(() => {
+		return state.subscribe(() => forceUpdate((n) => n + 1))
+	}, [state])
+
+	const elapsed = formatDuration(state.elapsedMs)
+
+	if (state.status === "pending") {
+		return (
+			<vstack>
+				<hstack spacing={1}>
+					<text fg={Colors.brightCyan}>{SPINNER_FRAMES[state.spinnerIndex]}</text>
+					<text bold fg={Colors.brightWhite}>
+						{label}
+					</text>
+				</hstack>
+				<text fg={Colors.gray(10)}>└ Running… {elapsed}</text>
+			</vstack>
+		)
+	}
+
+	if (state.status === "success") {
+		const showingResult = state.showResult && state.result !== undefined
+		return (
+			<vstack>
+				<hstack spacing={1}>
+					<text bold fg={Colors.brightGreen}>
+						✓
+					</text>
+					<text bold fg={Colors.brightGreen}>
+						{label}
+					</text>
+				</hstack>
+				{showingResult && <text fg={Colors.gray(20)}>├ {formatResult(state.result)}</text>}
+				<text fg={Colors.green}>
+					{showingResult ? "└" : "└"} Completed in {elapsed}
+				</text>
+			</vstack>
+		)
+	}
+
+	// failure
+	return (
+		<vstack>
+			<hstack spacing={1}>
+				<text bold fg={Colors.brightRed}>
+					✗
+				</text>
+				<text bold fg={Colors.brightRed}>
+					{label}
+				</text>
+			</hstack>
+			<text fg={Colors.red}>├ {state.errorSummary ?? "Failed"}</text>
+			<text fg={Colors.red}>└ Failed after {elapsed}</text>
+		</vstack>
+	)
 }
 
 // ============================================================================
-// InlineRenderer Service - manages terminal state across multiple visualize()
+// TerminalState Service - manages terminal state across multiple visualize()
 // ============================================================================
 
-interface InlineRendererService {
-  readonly stdout: NodeJS.WriteStream
-  readonly stdin: NodeJS.ReadStream
+interface TerminalStateService {
+	readonly stdout: NodeJS.WriteStream
+	readonly stdin: NodeJS.ReadStream
 }
 
 /**
  * Service that manages terminal state for inline rendering.
  * Hides cursor on acquire, shows cursor on release.
  */
-export class InlineRenderer extends Context.Tag("@effect-tui/react/InlineRenderer")<
-  InlineRenderer,
-  InlineRendererService
+export class TerminalState extends Context.Tag("@effect-tui/react/TerminalState")<
+	TerminalState,
+	TerminalStateService
 >() {}
 
 /**
- * Layer that provides InlineRenderer service.
+ * Layer that provides TerminalState service.
  * Manages terminal state: hides cursor on start, restores on finalize.
  */
-export const InlineRendererLive: Layer.Layer<InlineRenderer> = Layer.scoped(
-  InlineRenderer,
-  Effect.gen(function* () {
-    const stdout = process.stdout
-    const stdin = process.stdin
-
-    // Setup: hide cursor, enable raw mode
-    stdout.write(ANSI.cursor.hide)
-    if (stdin.isTTY && stdin.setRawMode) {
-      stdin.setRawMode(true)
-      stdin.resume()
-    }
-
-    // Teardown on scope close: show cursor, disable raw mode, pause stdin
-    yield* Effect.addFinalizer(() =>
-      Effect.sync(() => {
-        stdout.write(ANSI.cursor.show)
-        if (stdin.isTTY && stdin.setRawMode) {
-          stdin.setRawMode(false)
-        }
-        // Pause stdin so Node can exit
-        stdin.pause()
-      }),
-    )
-
-    return { stdout, stdin }
-  }),
+export const TerminalStateLive: Layer.Layer<TerminalState> = Layer.scoped(
+	TerminalState,
+	Effect.gen(function* () {
+		const stdout = process.stdout
+		const stdin = process.stdin
+
+		// Setup: hide cursor, enable raw mode
+		stdout.write(ANSI.cursor.hide)
+		if (stdin.isTTY && stdin.setRawMode) {
+			stdin.setRawMode(true)
+			stdin.resume()
+		}
+
+		// Teardown on scope close: show cursor, disable raw mode, pause stdin
+		yield* Effect.addFinalizer(() =>
+			Effect.sync(() => {
+				stdout.write(ANSI.cursor.show)
+				if (stdin.isTTY && stdin.setRawMode) {
+					stdin.setRawMode(false)
+				}
+				// Pause stdin so Node can exit
+				stdin.pause()
+			}),
+		)
+
+		return { stdout, stdin }
+	}),
 )
 
 // ============================================================================
-// visualize() - uses InlineRenderer service
+// visualize() - uses TerminalState service
 // ============================================================================
 
 /**
@@ -196,110 +202,89 @@ export const InlineRendererLive: Layer.Layer<InlineRenderer> = Layer.scoped(
  * Shows a spinner while running, then success/failure status.
  * Returns the effect's result or propagates its error.
  *
- * Requires InlineRenderer service (use InlineRendererLive layer).
+ * Requires TerminalState service (use TerminalStateLive layer).
  *
  * @example
  * ```ts
  * const program = Effect.gen(function* () {
  *   const result = yield* visualize("Fetching data", fetchData)
  *   yield* visualize("Processing", processData(result))
- * }).pipe(Effect.provide(InlineRendererLive))
+ * }).pipe(Effect.provide(TerminalStateLive))
  * ```
  */
 export const visualize = <A, E, R>(
-  label: string,
-  effect: Effect.Effect<A, E, R>,
-  options?: VisualizeOptions,
-): Effect.Effect<A, E, R | InlineRenderer> =>
-  Effect.gen(function* () {
-    const { stdout, stdin } = yield* InlineRenderer
-
-    // Create renderer with skipTerminalSetup (Layer manages terminal state)
-    const renderer = createRenderer({
-      mode: "inline",
-      stdout,
-      stdin,
-      skipTerminalSetup: true,
-    })
-    const root = createRoot(renderer)
-
-    const state = new VisualizerState()
-    state.showResult = options?.showResult ?? false
-
-    // Mount React component
-    root.render(<Visualizer state={state} label={label} />)
-
-    // Spinner tick fiber
-    const startTime = Date.now()
-    const spinnerFiber = yield* Effect.fork(
-      Effect.forever(
-        Effect.gen(function* () {
-          yield* Effect.sleep(SPIN_INTERVAL_MS)
-          state.update({
-            spinnerIndex: (state.spinnerIndex + 1) % SPINNER_FRAMES.length,
-          })
-          renderer.requestRender()
-        }),
-      ),
-    )
-
-    // High-frequency elapsed timer so duration display stays smooth
-    const elapsedFiber = yield* Effect.fork(
-      Effect.forever(
-        Effect.gen(function* () {
-          yield* Effect.sleep(ELAPSED_INTERVAL_MS)
-          state.update({ elapsedMs: Date.now() - startTime })
-          renderer.requestRender()
-        }),
-      ),
-    )
-
-    // Run the actual effect
-    const exit = yield* Effect.exit(effect)
-
-    // Stop spinner, update state to final
-    yield* Fiber.interrupt(spinnerFiber)
-    yield* Fiber.interrupt(elapsedFiber)
-    const isSuccess = Exit.isSuccess(exit)
-    state.update(
-      isSuccess
-        ? { status: "success", elapsedMs: Date.now() - startTime, result: exit.value }
-        : { status: "failure", elapsedMs: Date.now() - startTime, errorSummary: summarizeCause(exit.cause) },
-    )
-    renderer.requestRender()
-    renderer.flush() // Ensure final state is rendered
-
-    // Wait for completion animation
-    yield* Effect.sleep(COMPLETION_DELAY_MS)
-
-    // Stop renderer (doesn't touch terminal state since skipTerminalSetup)
-    renderer.stop()
-
-    // Write newline to advance cursor past the output
-    stdout.write("\n")
-
-    // Return result or propagate failure
-    if (Exit.isSuccess(exit)) return exit.value
-    return yield* Effect.failCause(exit.cause)
-  })
-
-// ============================================================================
-// Convenience: self-contained visualize that provides its own layer
-// ============================================================================
-
-/**
- * Self-contained visualize that manages its own terminal state.
- * Use this for single visualize() calls. For multiple sequential calls,
- * use visualize() with InlineRendererLive layer for better cursor handling.
- *
- * @example
- * ```ts
- * const result = yield* visualizeSingle("Fetching data", fetchData)
- * ```
- */
-export const visualizeSingle = <A, E, R>(
-  label: string,
-  effect: Effect.Effect<A, E, R>,
-  options?: VisualizeOptions,
-): Effect.Effect<A, E, R> =>
-  Effect.scoped(visualize(label, effect, options).pipe(Effect.provide(InlineRendererLive))) as Effect.Effect<A, E, R>
+	label: string,
+	effect: Effect.Effect<A, E, R>,
+	options?: VisualizeOptions,
+): Effect.Effect<A, E, R | TerminalState> =>
+	Effect.gen(function* () {
+		const { stdout, stdin } = yield* TerminalState
+
+		// Create renderer with skipTerminalSetup (Layer manages terminal state)
+		const renderer = createRenderer({
+			mode: "inline",
+			stdout,
+			stdin,
+			skipTerminalSetup: true,
+		})
+		const root = createRoot(renderer)
+
+		const state = new VisualizerState()
+		state.showResult = options?.showResult ?? false
+
+		// Mount React component
+		root.render(<Visualizer state={state} label={label} />)
+
+		// Spinner tick fiber
+		const startTime = Date.now()
+		const spinnerFiber = yield* Effect.fork(
+			Effect.forever(
+				Effect.gen(function* () {
+					yield* Effect.sleep(SPIN_INTERVAL_MS)
+					state.update({
+						spinnerIndex: (state.spinnerIndex + 1) % SPINNER_FRAMES.length,
+					})
+					renderer.requestRender()
+				}),
+			),
+		)
+
+		// High-frequency elapsed timer so duration display stays smooth
+		const elapsedFiber = yield* Effect.fork(
+			Effect.forever(
+				Effect.gen(function* () {
+					yield* Effect.sleep(ELAPSED_INTERVAL_MS)
+					state.update({ elapsedMs: Date.now() - startTime })
+					renderer.requestRender()
+				}),
+			),
+		)
+
+		// Run the actual effect
+		const exit = yield* Effect.exit(effect)
+
+		// Stop spinner, update state to final
+		yield* Fiber.interrupt(spinnerFiber)
+		yield* Fiber.interrupt(elapsedFiber)
+		const isSuccess = Exit.isSuccess(exit)
+		state.update(
+			isSuccess
+				? { status: "success", elapsedMs: Date.now() - startTime, result: exit.value }
+				: { status: "failure", elapsedMs: Date.now() - startTime, errorSummary: summarizeCause(exit.cause) },
+		)
+		renderer.requestRender()
+		renderer.flush() // Ensure final state is rendered
+
+		// Wait for completion animation
+		yield* Effect.sleep(COMPLETION_DELAY_MS)
+
+		// Stop renderer (doesn't touch terminal state since skipTerminalSetup)
+		renderer.stop()
+
+		// Write newline to advance cursor past the output
+		stdout.write("\n")
+
+		// Return result or propagate failure
+		if (Exit.isSuccess(exit)) return exit.value
+		return yield* Effect.failCause(exit.cause)
+	})

package/dist/src/output.d.ts

@@ -1,47 +0,0 @@
-/**
- * Output helpers for rendering CellBuffer to ANSI strings.
- * Extracts common logic from renderer.ts rendering paths.
- */
-import type { CellBuffer, Palette } from "@effect-tui/core";
-/**
- * Emit a row of cells as an ANSI string with run-length SGR encoding.
- * Handles wide characters (cellWidth=0 continuations) and style changes.
- *
- * @param buffer - The cell buffer to read from
- * @param palette - Palette for SGR code generation
- * @param y - Row index
- * @param width - Terminal width
- * @param startX - Start column (default 0)
- * @param endX - End column exclusive (default width)
- * @returns ANSI string for the row (no cursor positioning, no trailing reset)
- */
-export declare function emitRow(buffer: CellBuffer, palette: Palette, y: number, width: number, startX?: number, endX?: number): {
-    output: string;
-    lastStyle: number;
-};
-/**
- * Emit a row and reset style if needed.
- */
-export declare function emitRowWithReset(buffer: CellBuffer, palette: Palette, y: number, width: number, startX?: number, endX?: number): string;
-/**
- * Check if a row changed between two buffers.
- */
-export declare function rowChanged(prev: CellBuffer, next: CellBuffer, y: number, width: number): boolean;
-/**
- * Find the rightmost column with content (non-space or styled).
- * Returns 0 if row is empty.
- */
-export declare function rowContentWidth(buffer: CellBuffer, y: number, width: number): number;
-/**
- * Find the change window between two buffers for a row.
- * Returns the leftmost and rightmost changed columns, or null if no changes.
- */
-export declare function findChangeWindow(prev: CellBuffer, next: CellBuffer, y: number, width: number): {
-    left: number;
-    right: number;
-} | null;
-/**
- * Find the last row with content in a buffer.
- */
-export declare function contentHeight(buffer: CellBuffer, width: number, height: number): number;
-//# sourceMappingURL=output.d.ts.map

package/dist/src/output.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"output.d.ts","sourceRoot":"","sources":["../../src/output.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE3D;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,SAAI,EACV,IAAI,SAAQ,GACV;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CA6BvC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC/B,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,SAAI,EACV,IAAI,SAAQ,GACV,MAAM,CAGR;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAShG;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAYpF;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC/B,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,UAAU,EAChB,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,GACX;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA2BxC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAUvF"}