@effect-tui/react 0.1.3 → 0.1.4

package/src/test/index.ts

@@ -1,8 +1,8 @@
 export { renderTUI, type RenderTUIOptions, type RenderTUIResult } from "./render-tui.js"
 export {
-  MockStdout,
-  MockStdin,
-  encodeKey,
-  stripAnsi,
-  getVisibleLines,
+	MockStdout,
+	MockStdin,
+	encodeKey,
+	stripAnsi,
+	getVisibleLines,
 } from "./mock-streams.js"

package/src/test/mock-streams.ts

@@ -5,62 +5,62 @@ import type { KeyMsg } from "@effect-tui/core"
  * Mock stdout for testing. Captures all writes and simulates terminal properties.
  */
 export class MockStdout extends EventEmitter {
-  columns: number
-  rows: number
-  buf = ""
-
-  constructor(width = 80, height = 24) {
-    super()
-    this.columns = width
-    this.rows = height
-  }
-
-  write(s: string): boolean {
-    this.buf += s
-    return true
-  }
-
-  /** Clear captured output */
-  clear(): void {
-    this.buf = ""
-  }
-
-  /** Simulate terminal resize */
-  resize(width: number, height: number): void {
-    this.columns = width
-    this.rows = height
-    this.emit("resize")
-  }
+	columns: number
+	rows: number
+	buf = ""
+
+	constructor(width = 80, height = 24) {
+		super()
+		this.columns = width
+		this.rows = height
+	}
+
+	write(s: string): boolean {
+		this.buf += s
+		return true
+	}
+
+	/** Clear captured output */
+	clear(): void {
+		this.buf = ""
+	}
+
+	/** Simulate terminal resize */
+	resize(width: number, height: number): void {
+		this.columns = width
+		this.rows = height
+		this.emit("resize")
+	}
 }
 
 /**
  * Mock stdin for testing. Simulates TTY input with key event emission.
  */
 export class MockStdin extends EventEmitter {
-  isTTY = true
-
-  setRawMode(_mode: boolean): this {
-    return this
-  }
-
-  resume(): this {
-    return this
-  }
-
-  pause(): this {
-    return this
-  }
-
-  /** Send raw bytes (for testing decodeKeys directly) */
-  sendRaw(data: Buffer): void {
-    this.emit("data", data)
-  }
-
-  /** Send a key by encoding it to bytes */
-  sendKey(key: KeyMsg): void {
-    const encoded = encodeKey(key)
-    this.emit("data", encoded)
-  }
+	isTTY = true
+
+	setRawMode(_mode: boolean): this {
+		return this
+	}
+
+	resume(): this {
+		return this
+	}
+
+	pause(): this {
+		return this
+	}
+
+	/** Send raw bytes (for testing decodeKeys directly) */
+	sendRaw(data: Buffer): void {
+		this.emit("data", data)
+	}
+
+	/** Send a key by encoding it to bytes */
+	sendKey(key: KeyMsg): void {
+		const encoded = encodeKey(key)
+		this.emit("data", encoded)
+	}
 }
 
 /**
@@ -68,73 +68,73 @@ export class MockStdin extends EventEmitter {
  * This is the reverse of decodeKeys().
  */
 export function encodeKey(key: KeyMsg): Buffer {
-  const name = key.name
-  const text = key.text
-
-  // Control keys (Ctrl + printable character)
-  if (key.ctrl && text) {
-    const lower = text.toLowerCase()
-    if (lower === "c") return Buffer.from([0x03])
-    if (lower === "d") return Buffer.from([0x04])
-    if (lower === "z") return Buffer.from([0x1a])
-    if (lower === "w") return Buffer.from([0x17])
-    // Ctrl+letter = letter code - 0x60
-    if (text.length === 1) {
-      const code = lower.charCodeAt(0) - 0x60
-      if (code >= 1 && code <= 26) return Buffer.from([code])
-    }
-  }
-
-  // Special keys (escape sequences)
-  switch (name) {
-    case "up":
-      return Buffer.from([0x1b, 0x5b, 0x41])
-    case "down":
-      return Buffer.from([0x1b, 0x5b, 0x42])
-    case "right":
-      return Buffer.from([0x1b, 0x5b, 0x43])
-    case "left":
-      return Buffer.from([0x1b, 0x5b, 0x44])
-    case "home":
-      return Buffer.from([0x1b, 0x5b, 0x48])
-    case "end":
-      return Buffer.from([0x1b, 0x5b, 0x46])
-    case "pageup":
-      return Buffer.from([0x1b, 0x5b, 0x35, 0x7e])
-    case "pagedown":
-      return Buffer.from([0x1b, 0x5b, 0x36, 0x7e])
-    case "delete":
-      return Buffer.from([0x1b, 0x5b, 0x33, 0x7e])
-    case "insert":
-      return Buffer.from([0x1b, 0x5b, 0x32, 0x7e])
-    case "escape":
-      return Buffer.from([0x1b])
-    case "tab":
-      return Buffer.from([0x09])
-    case "enter":
-    case "return":
-      return Buffer.from([0x0d])
-    case "backspace":
-      return Buffer.from([0x7f])
-    case "space":
-      return Buffer.from([0x20])
-  }
-
-  // Regular character
-  if (text) {
-    return Buffer.from(text, "utf8")
-  }
-
-  // Unknown key, return empty
-  return Buffer.from([])
+	const name = key.name
+	const text = key.text
+
+	// Control keys (Ctrl + printable character)
+	if (key.ctrl && text) {
+		const lower = text.toLowerCase()
+		if (lower === "c") return Buffer.from([0x03])
+		if (lower === "d") return Buffer.from([0x04])
+		if (lower === "z") return Buffer.from([0x1a])
+		if (lower === "w") return Buffer.from([0x17])
+		// Ctrl+letter = letter code - 0x60
+		if (text.length === 1) {
+			const code = lower.charCodeAt(0) - 0x60
+			if (code >= 1 && code <= 26) return Buffer.from([code])
+		}
+	}
+
+	// Special keys (escape sequences)
+	switch (name) {
+		case "up":
+			return Buffer.from([0x1b, 0x5b, 0x41])
+		case "down":
+			return Buffer.from([0x1b, 0x5b, 0x42])
+		case "right":
+			return Buffer.from([0x1b, 0x5b, 0x43])
+		case "left":
+			return Buffer.from([0x1b, 0x5b, 0x44])
+		case "home":
+			return Buffer.from([0x1b, 0x5b, 0x48])
+		case "end":
+			return Buffer.from([0x1b, 0x5b, 0x46])
+		case "pageup":
+			return Buffer.from([0x1b, 0x5b, 0x35, 0x7e])
+		case "pagedown":
+			return Buffer.from([0x1b, 0x5b, 0x36, 0x7e])
+		case "delete":
+			return Buffer.from([0x1b, 0x5b, 0x33, 0x7e])
+		case "insert":
+			return Buffer.from([0x1b, 0x5b, 0x32, 0x7e])
+		case "escape":
+			return Buffer.from([0x1b])
+		case "tab":
+			return Buffer.from([0x09])
+		case "enter":
+		case "return":
+			return Buffer.from([0x0d])
+		case "backspace":
+			return Buffer.from([0x7f])
+		case "space":
+			return Buffer.from([0x20])
+	}
+
+	// Regular character
+	if (text) {
+		return Buffer.from(text, "utf8")
+	}
+
+	// Unknown key, return empty
+	return Buffer.from([])
 }
 
 /**
  * Strip ANSI escape codes from a string for easier assertions.
  */
 export function stripAnsi(str: string): string {
-  // eslint-disable-next-line no-control-regex
-  return str.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, "").replace(/\x1b\][^\x07]*\x07/g, "")
+	// eslint-disable-next-line no-control-regex
+	return str.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, "").replace(/\x1b\][^\x07]*\x07/g, "")
 }
 
 /**
@@ -142,8 +142,8 @@ export function stripAnsi(str: string): string {
  * Removes ANSI codes and splits by newlines.
  */
 export function getVisibleLines(output: string): string[] {
-  const stripped = stripAnsi(output)
-  // Replace carriage returns with newlines for consistency
-  const normalized = stripped.replace(/\r\n/g, "\n").replace(/\r/g, "\n")
-  return normalized.split("\n")
+	const stripped = stripAnsi(output)
+	// Replace carriage returns with newlines for consistency
+	const normalized = stripped.replace(/\r\n/g, "\n").replace(/\r/g, "\n")
+	return normalized.split("\n")
 }

package/src/test/render-tui.ts

@@ -1,33 +1,33 @@
 import type { ReactElement } from "react"
 import type { KeyMsg } from "@effect-tui/core"
 import { createRenderer, createRoot } from "../renderer.js"
-import { flushPassiveEffects, flushSync, discreteUpdates } from "../reconciler/host-config.js"
+import { flushPassiveEffects, flushSync } from "../reconciler/host-config.js"
 import { MockStdout, MockStdin, stripAnsi, getVisibleLines } from "./mock-streams.js"
 
 export interface RenderTUIOptions {
-  width?: number
-  height?: number
+	width?: number
+	height?: number
 }
 
 export interface RenderTUIResult {
-  /** Get last rendered frame as raw string (includes ANSI codes) */
-  lastFrameRaw(): string
-  /** Get last rendered frame with ANSI codes stripped */
-  lastFrame(): string
-  /** Get visible text lines from last frame */
-  lines(): string[]
-  /** Send a key event */
-  sendKey(key: KeyMsg): void
-  /** Trigger a render cycle and process React updates */
-  flush(): void
-  /** Unmount the component and stop the renderer */
-  unmount(): void
-  /** Access mock stdout for advanced assertions */
-  stdout: MockStdout
-  /** Access mock stdin for advanced input simulation */
-  stdin: MockStdin
-  /** Resize the terminal */
-  resize(width: number, height: number): void
+	/** Get last rendered frame as raw string (includes ANSI codes) */
+	lastFrameRaw(): string
+	/** Get last rendered frame with ANSI codes stripped */
+	lastFrame(): string
+	/** Get visible text lines from last frame */
+	lines(): string[]
+	/** Send a key event */
+	sendKey(key: KeyMsg): void
+	/** Trigger a render cycle and process React updates */
+	flush(): void
+	/** Unmount the component and stop the renderer */
+	unmount(): void
+	/** Access mock stdout for advanced assertions */
+	stdout: MockStdout
+	/** Access mock stdin for advanced input simulation */
+	stdin: MockStdin
+	/** Resize the terminal */
+	resize(width: number, height: number): void
 }
 
 /**
@@ -49,70 +49,67 @@ export interface RenderTUIResult {
  * ```
  */
 export function renderTUI(element: ReactElement, options?: RenderTUIOptions): RenderTUIResult {
-  const width = options?.width ?? 80
-  const height = options?.height ?? 24
-
-  const stdout = new MockStdout(width, height)
-  const stdin = new MockStdin()
-
-  const renderer = createRenderer({
-    stdout: stdout as any,
-    stdin: stdin as any,
-    manualMode: true,
-    skipTerminalSetup: true,
-  })
-
-  const root = createRoot(renderer)
-  root.render(element, true) // sync mode
-
-  // Flush effects
-  flushPassiveEffects()
-
-  // Initial render
-  renderer.flush()
-
-  const flush = () => {
-    // Flush React updates synchronously
-    flushSync(() => {})
-    flushPassiveEffects()
-    // Clear buffer before re-render to get clean frame
-    stdout.clear()
-    renderer.requestRender()
-    renderer.flush()
-  }
-
-  return {
-    lastFrameRaw() {
-      return stdout.buf
-    },
-
-    lastFrame() {
-      return stripAnsi(stdout.buf)
-    },
-
-    lines() {
-      return getVisibleLines(stdout.buf)
-    },
-
-    sendKey(key: KeyMsg) {
-      // Use discreteUpdates to ensure React processes state updates synchronously
-      discreteUpdates(() => {
-        stdin.sendKey(key)
-      })
-    },
-
-    flush,
-
-    unmount() {
-      root.unmount()
-    },
-
-    stdout,
-    stdin,
-
-    resize(w: number, h: number) {
-      stdout.resize(w, h)
-      flush()
-    },
-  }
+	const width = options?.width ?? 80
+	const height = options?.height ?? 24
+
+	const stdout = new MockStdout(width, height)
+	const stdin = new MockStdin()
+
+	const renderer = createRenderer({
+		stdout: stdout as any,
+		stdin: stdin as any,
+		manualMode: true,
+		skipTerminalSetup: true,
+	})
+
+	const root = createRoot(renderer)
+	root.render(element, true) // sync mode
+
+	// Flush effects
+	flushPassiveEffects()
+
+	// Initial render
+	renderer.flush()
+
+	const flush = () => {
+		// Flush React updates synchronously
+		flushSync(() => {})
+		flushPassiveEffects()
+		// Clear buffer before re-render to get clean frame
+		stdout.clear()
+		renderer.requestRender()
+		renderer.flush()
+	}
+
+	return {
+		lastFrameRaw() {
+			return stdout.buf
+		},
+
+		lastFrame() {
+			return stripAnsi(stdout.buf)
+		},
+
+		lines() {
+			return getVisibleLines(stdout.buf)
+		},
+
+		sendKey(key: KeyMsg) {
+			stdin.sendKey(key)
+		},
+
+		flush,
+
+		unmount() {
+			root.unmount()
+		},
+
+		stdout,
+		stdin,
+
+		resize(w: number, h: number) {
+			stdout.resize(w, h)
+			flush()
+		},
+	}
 }

package/src/utils/border.ts

@@ -4,15 +4,15 @@
 
 import type { CellBuffer } from "@effect-tui/core"
 
-export type BorderKind = "none" | "rounded" | "square" | "ascii"
+export type BorderKind = "none" | "rounded" | "square" | "double" | "heavy" | "dashed" | "ascii"
 
 export interface BorderChars {
-  tl: string // top-left
-  tr: string // top-right
-  bl: string // bottom-left
-  br: string // bottom-right
-  h: string // horizontal
-  v: string // vertical
+	tl: string // top-left
+	tr: string // top-right
+	bl: string // bottom-left
+	br: string // bottom-right
+	h: string // horizontal
+	v: string // vertical
 }
 
 /**
@@ -20,23 +20,29 @@ export interface BorderChars {
  * Returns empty strings for "none" (drawing code should skip when border is "none").
  */
 export function borderChars(kind: BorderKind): BorderChars {
-  switch (kind) {
-    case "rounded":
-      return { tl: "╭", tr: "╮", bl: "╰", br: "╯", h: "─", v: "│" }
-    case "square":
-      return { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│" }
-    case "ascii":
-      return { tl: "+", tr: "+", bl: "+", br: "+", h: "-", v: "|" }
-    default:
-      return { tl: "", tr: "", bl: "", br: "", h: "", v: "" }
-  }
+	switch (kind) {
+		case "rounded":
+			return { tl: "╭", tr: "╮", bl: "╰", br: "╯", h: "─", v: "│" }
+		case "square":
+			return { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│" }
+		case "double":
+			return { tl: "╔", tr: "╗", bl: "╚", br: "╝", h: "═", v: "║" }
+		case "heavy":
+			return { tl: "┏", tr: "┓", bl: "┗", br: "┛", h: "━", v: "┃" }
+		case "dashed":
+			return { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "┄", v: "┆" }
+		case "ascii":
+			return { tl: "+", tr: "+", bl: "+", br: "+", h: "-", v: "|" }
+		default:
+			return { tl: "", tr: "", bl: "", br: "", h: "", v: "" }
+	}
 }
 
 export interface ClipRect {
-  ox: number
-  oy: number
-  w: number
-  h: number
+	ox: number
+	oy: number
+	w: number
+	h: number
 }
 
 /**
@@ -45,64 +51,64 @@ export interface ClipRect {
  * If clip is not provided, draws the full border (for box).
  */
 export function drawBorder(
-  buffer: CellBuffer,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  chars: BorderChars,
-  style: number,
-  clip?: ClipRect,
+	buffer: CellBuffer,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+	chars: BorderChars,
+	style: number,
+	clip?: ClipRect,
 ): void {
-  if (w < 2 || h < 2) return
+	if (w < 2 || h < 2) return
 
-  const tlcp = chars.tl.codePointAt(0)!
-  const trcp = chars.tr.codePointAt(0)!
-  const blcp = chars.bl.codePointAt(0)!
-  const brcp = chars.br.codePointAt(0)!
-  const hcp = chars.h.codePointAt(0)!
-  const vcp = chars.v.codePointAt(0)!
+	const tlcp = chars.tl.codePointAt(0)!
+	const trcp = chars.tr.codePointAt(0)!
+	const blcp = chars.bl.codePointAt(0)!
+	const brcp = chars.br.codePointAt(0)!
+	const hcp = chars.h.codePointAt(0)!
+	const vcp = chars.v.codePointAt(0)!
 
-  if (clip) {
-    // Clipped drawing (for canvas)
-    const { ox, oy, w: cw, h: ch } = clip
-    const inBounds = (px: number, py: number) => px >= ox && px < ox + cw && py >= oy && py < oy + ch
+	if (clip) {
+		// Clipped drawing (for canvas)
+		const { ox, oy, w: cw, h: ch } = clip
+		const inBounds = (px: number, py: number) => px >= ox && px < ox + cw && py >= oy && py < oy + ch
 
-    // Corners
-    if (inBounds(x, y)) buffer.drawCP(x, y, tlcp, style)
-    if (inBounds(x + w - 1, y)) buffer.drawCP(x + w - 1, y, trcp, style)
-    if (inBounds(x, y + h - 1)) buffer.drawCP(x, y + h - 1, blcp, style)
-    if (inBounds(x + w - 1, y + h - 1)) buffer.drawCP(x + w - 1, y + h - 1, brcp, style)
+		// Corners
+		if (inBounds(x, y)) buffer.drawCP(x, y, tlcp, style)
+		if (inBounds(x + w - 1, y)) buffer.drawCP(x + w - 1, y, trcp, style)
+		if (inBounds(x, y + h - 1)) buffer.drawCP(x, y + h - 1, blcp, style)
+		if (inBounds(x + w - 1, y + h - 1)) buffer.drawCP(x + w - 1, y + h - 1, brcp, style)
 
-    // Horizontal lines
-    for (let col = 1; col < w - 1; col++) {
-      const xx = x + col
-      if (inBounds(xx, y)) buffer.drawCP(xx, y, hcp, style)
-      if (inBounds(xx, y + h - 1)) buffer.drawCP(xx, y + h - 1, hcp, style)
-    }
+		// Horizontal lines
+		for (let col = 1; col < w - 1; col++) {
+			const xx = x + col
+			if (inBounds(xx, y)) buffer.drawCP(xx, y, hcp, style)
+			if (inBounds(xx, y + h - 1)) buffer.drawCP(xx, y + h - 1, hcp, style)
+		}
 
-    // Vertical lines
-    for (let row = 1; row < h - 1; row++) {
-      const yy = y + row
-      if (inBounds(x, yy)) buffer.drawCP(x, yy, vcp, style)
-      if (inBounds(x + w - 1, yy)) buffer.drawCP(x + w - 1, yy, vcp, style)
-    }
-  } else {
-    // Full drawing (for box)
-    // Corners
-    buffer.drawCP(x, y, tlcp, style)
-    buffer.drawCP(x + w - 1, y, trcp, style)
-    buffer.drawCP(x, y + h - 1, blcp, style)
-    buffer.drawCP(x + w - 1, y + h - 1, brcp, style)
+		// Vertical lines
+		for (let row = 1; row < h - 1; row++) {
+			const yy = y + row
+			if (inBounds(x, yy)) buffer.drawCP(x, yy, vcp, style)
+			if (inBounds(x + w - 1, yy)) buffer.drawCP(x + w - 1, yy, vcp, style)
+		}
+	} else {
+		// Full drawing (for box)
+		// Corners
+		buffer.drawCP(x, y, tlcp, style)
+		buffer.drawCP(x + w - 1, y, trcp, style)
+		buffer.drawCP(x, y + h - 1, blcp, style)
+		buffer.drawCP(x + w - 1, y + h - 1, brcp, style)
 
-    // Horizontal lines
-    buffer.fillRect(x + 1, y, w - 2, 1, hcp, style)
-    buffer.fillRect(x + 1, y + h - 1, w - 2, 1, hcp, style)
+		// Horizontal lines
+		buffer.fillRect(x + 1, y, w - 2, 1, hcp, style)
+		buffer.fillRect(x + 1, y + h - 1, w - 2, 1, hcp, style)
 
-    // Vertical lines
-    for (let yy = y + 1; yy < y + h - 1; yy++) {
-      buffer.drawCP(x, yy, vcp, style)
-      buffer.drawCP(x + w - 1, yy, vcp, style)
-    }
-  }
+		// Vertical lines
+		for (let yy = y + 1; yy < y + h - 1; yy++) {
+			buffer.drawCP(x, yy, vcp, style)
+			buffer.drawCP(x + w - 1, yy, vcp, style)
+		}
+	}
 }