@effect-tui/react 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.7.0",
+	"version": "0.9.0",
 	"description": "React bindings for @effect-tui/core",
 	"type": "module",
 	"files": [
@@ -83,7 +83,7 @@
 		"prepublishOnly": "bun run typecheck && bun run build"
 	},
 	"dependencies": {
-		"@effect-tui/core": "^0.7.0",
+		"@effect-tui/core": "^0.9.0",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/components/Divider.tsx

@@ -17,7 +17,7 @@ export interface DividerProps {
  * <Divider char="═" fg={Colors.brightBlue} />
  * ```
  */
-export function Divider({ char = "─", fg = Colors.gray(12) }: DividerProps) {
+export function Divider({ char = "─", fg = Colors.ansi.gray(12) }: DividerProps) {
 	const { width } = useTerminalSize()
 	return <text fg={fg}>{char.repeat(width)}</text>
 }

package/src/components/Markdown.tsx

@@ -31,19 +31,19 @@ export interface MarkdownTheme {
 }
 
 const defaultTheme: Required<MarkdownTheme> = {
-	h1: Colors.brightCyan,
-	h2: Colors.cyan,
-	h3: Colors.brightBlue,
-	bold: Colors.brightWhite,
-	italic: Colors.brightYellow,
-	code: Colors.brightGreen,
-	codeBg: Colors.gray(2),
-	link: Colors.brightBlue,
-	linkUrl: Colors.gray(10),
-	quote: Colors.gray(14),
-	quoteBorder: Colors.gray(8),
-	listMarker: Colors.gray(12),
-	text: Colors.gray(18),
+	h1: Colors.ansi.brightCyan,
+	h2: Colors.cyan(500),
+	h3: Colors.ansi.brightBlue,
+	bold: Colors.ansi.brightWhite,
+	italic: Colors.ansi.brightYellow,
+	code: Colors.ansi.brightGreen,
+	codeBg: Colors.ansi.gray(2),
+	link: Colors.ansi.brightBlue,
+	linkUrl: Colors.ansi.gray(10),
+	quote: Colors.ansi.gray(14),
+	quoteBorder: Colors.ansi.gray(8),
+	listMarker: Colors.ansi.gray(12),
+	text: Colors.ansi.gray(18),
 }
 
 export interface MarkdownProps {

package/src/components/MultilineTextInput.tsx

@@ -262,12 +262,12 @@ export function MultilineTextInput({
 	placeholder = "",
 	width,
 	height = 5,
-	fg = Colors.brightWhite,
+	fg = Colors.ansi.brightWhite,
 	bg,
-	cursorFg = Colors.black,
-	cursorBg = Colors.brightWhite,
-	placeholderFg = Colors.gray(10),
-	lineNumberFg = Colors.gray(12),
+	cursorFg = Colors.ansi.black,
+	cursorBg = Colors.ansi.brightWhite,
+	placeholderFg = Colors.ansi.gray(10),
+	lineNumberFg = Colors.ansi.gray(12),
 	onCancel,
 	onSubmit,
 	focused = true,

package/src/components/Table.tsx

@@ -175,8 +175,8 @@ function TableRoot<T>({
 	headerSeparator = false,
 	rowSeparator = false,
 	padding = 1,
-	borderColor = Colors.gray(12),
-	headerColor = Colors.gray(12),
+	borderColor = Colors.ansi.gray(12),
+	headerColor = Colors.ansi.gray(12),
 	children,
 }: TableProps<T>) {
 	const columns = extractColumns<T>(children, data)

package/src/components/TextInput.tsx

@@ -73,11 +73,11 @@ export function TextInput({
 	onChange,
 	placeholder = "",
 	width,
-	fg = Colors.brightWhite,
+	fg = Colors.ansi.brightWhite,
 	bg,
-	cursorFg = Colors.black,
-	cursorBg = Colors.brightWhite,
-	placeholderFg = Colors.gray(10),
+	cursorFg = Colors.ansi.black,
+	cursorBg = Colors.ansi.brightWhite,
+	placeholderFg = Colors.ansi.gray(10),
 	onSubmit,
 	onCancel,
 	focused = true,

package/src/console/ConsoleCapture.ts

@@ -1,5 +1,6 @@
 // Console capture singleton for TUI debugging
-// Intercepts console.log/info/warn/error/debug and stores entries for display
+// Intercepts console.log/info/warn/error/debug AND process.stdout/stderr.write
+// to capture ALL output including Effect.log, third-party libraries, etc.
 
 import { Console } from "node:console"
 import { EventEmitter } from "node:events"
@@ -105,17 +106,50 @@ export interface ConsoleCaptureEvents {
 	error: (entry: LogEntry) => void
 }
 
+// Store the ORIGINAL stdout/stderr write functions at module load time
+// This ensures the renderer can always write to the terminal even when capture is active
+const originalStdoutWrite = process.stdout.write.bind(process.stdout)
+const originalStderrWrite = process.stderr.write.bind(process.stderr)
+
 export class ConsoleCapture extends EventEmitter {
 	private entries: LogEntry[] = []
 	private originalConsole: typeof console | null = null
 	private active = false
 	private maxEntries: number
+	// Track if current write is from our console methods (to avoid double-capture)
+	private inConsoleMethod = false
+	// Track if current write is from the TUI renderer (should bypass capture)
+	private inRendererWrite = false
+	// Block stdout/stderr writes only after renderer is ready
+	// Until then, pass through to avoid swallowing startup errors
+	private blockingEnabled = false
 
 	constructor(options?: { maxEntries?: number }) {
 		super()
 		this.maxEntries = options?.maxEntries ?? 1000
 	}
 
+	/**
+	 * Enable blocking of stdout/stderr writes.
+	 * Call this after the renderer is fully set up and rendering.
+	 */
+	enableBlocking(): void {
+		this.blockingEnabled = true
+	}
+
+	/**
+	 * Write directly to stdout, bypassing capture.
+	 * Used by the TUI renderer to output to terminal.
+	 */
+	writeToTerminal(data: string | Uint8Array): boolean {
+		this.inRendererWrite = true
+		try {
+			return originalStdoutWrite(data)
+		} finally {
+			this.inRendererWrite = false
+		}
+	}
+
 	get isActive(): boolean {
 		return this.active
 	}
@@ -134,6 +168,57 @@ export class ConsoleCapture extends EventEmitter {
 		// Store original console
 		this.originalConsole = globalThis.console
 
+		// Enable blocking immediately - TUI owns the terminal
+		// Any output will be captured in the console panel, not displayed
+		this.blockingEnabled = true
+
+		// Intercept stdout.write - captures Effect.log, printf, etc.
+		process.stdout.write = ((
+			chunk: Uint8Array | string,
+			encodingOrCallback?: BufferEncoding | ((err?: Error | null) => void),
+			callback?: (err?: Error | null) => void,
+		): boolean => {
+			// If this write is from renderer, pass through
+			if (this.inRendererWrite) {
+				return originalStdoutWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+			}
+			// Capture if not from our console methods (avoid double-capture)
+			if (!this.inConsoleMethod) {
+				const text = typeof chunk === "string" ? chunk : chunk.toString()
+				this.captureRawOutput(text, "stdout")
+			}
+			// If blocking not enabled yet, pass through (allows startup errors to show)
+			if (!this.blockingEnabled) {
+				return originalStdoutWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+			}
+			// Block write - TUI owns the terminal
+			const cb = typeof encodingOrCallback === "function" ? encodingOrCallback : callback
+			if (cb) cb()
+			return true
+		}) as typeof process.stdout.write
+
+		// Intercept stderr.write
+		process.stderr.write = ((
+			chunk: Uint8Array | string,
+			encodingOrCallback?: BufferEncoding | ((err?: Error | null) => void),
+			callback?: (err?: Error | null) => void,
+		): boolean => {
+			if (this.inRendererWrite) {
+				return originalStderrWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+			}
+			if (!this.inConsoleMethod) {
+				const text = typeof chunk === "string" ? chunk : chunk.toString()
+				this.captureRawOutput(text, "stderr")
+			}
+			// If blocking not enabled yet, pass through (allows startup errors to show)
+			if (!this.blockingEnabled) {
+				return originalStderrWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+			}
+			const cb = typeof encodingOrCallback === "function" ? encodingOrCallback : callback
+			if (cb) cb()
+			return true
+		}) as typeof process.stdout.write
+
 		// Create mock streams for the new console
 		const mockStdout = new CapturedWritableStream()
 		const mockStderr = new CapturedWritableStream()
@@ -197,37 +282,95 @@ export class ConsoleCapture extends EventEmitter {
 	deactivate(): void {
 		if (!this.active || !this.originalConsole) return
 
+		// Restore original stdout/stderr write methods
+		process.stdout.write = originalStdoutWrite
+		process.stderr.write = originalStderrWrite
+
 		globalThis.console = this.originalConsole
 		this.originalConsole = null
 		this.active = false
 	}
 
 	private appendToConsole(level: LogLevel, args: unknown[]): void {
-		const location = captureCallerLocation()
-		const message = util.format(...args)
+		// Mark that we're in a console method to avoid double-capture from stdout/stderr
+		this.inConsoleMethod = true
+		try {
+			const location = captureCallerLocation()
+			const message = util.format(...args)
+
+			const entry: LogEntry = {
+				timestamp: new Date(),
+				level,
+				message,
+				args,
+				location,
+			}
+
+			// Enforce max entries
+			if (this.entries.length >= this.maxEntries) {
+				this.entries.shift()
+			}
+			this.entries.push(entry)
+
+			// Emit events
+			this.emit("entry", entry)
+			// Only emit error event if there are listeners (avoid unhandled error exception)
+			if (level === "ERROR" && this.listenerCount("error") > 0) {
+				this.emit("error", entry)
+			}
+		} finally {
+			this.inConsoleMethod = false
+		}
+	}
+
+	// Capture raw output from stdout/stderr (for Effect.log, third-party libs, etc.)
+	private captureRawOutput(text: string, stream: "stdout" | "stderr"): void {
+		// Skip empty output
+		if (!text.trim()) return
+
+		// Parse Effect log format: timestamp level fiber message
+		// Example: "timestamp=2024-01-15T10:30:00.000Z level=INFO fiber=#0 message=Hello"
+		// Or the pretty format with ANSI colors
+		const level = this.detectLogLevel(text, stream)
+
+		// Strip ANSI codes for the stored message
+		const cleanText = text.replace(/\x1b\[[0-9;]*m/g, "").trim()
 
 		const entry: LogEntry = {
 			timestamp: new Date(),
 			level,
-			message,
-			args,
-			location,
+			message: cleanText,
+			args: [text], // Keep original with ANSI for potential future use
+			// No location for raw output - we can't get stack trace here
 		}
 
-		// Enforce max entries
 		if (this.entries.length >= this.maxEntries) {
 			this.entries.shift()
 		}
 		this.entries.push(entry)
 
-		// Emit events
 		this.emit("entry", entry)
-		// Only emit error event if there are listeners (avoid unhandled error exception)
 		if (level === "ERROR" && this.listenerCount("error") > 0) {
 			this.emit("error", entry)
 		}
 	}
 
+	// Detect log level from raw output text
+	private detectLogLevel(text: string, stream: "stdout" | "stderr"): LogLevel {
+		const upperText = text.toUpperCase()
+
+		// Effect log format detection
+		if (upperText.includes("LEVEL=ERROR") || upperText.includes("[ERROR]")) return "ERROR"
+		if (upperText.includes("LEVEL=WARN") || upperText.includes("[WARN]")) return "WARN"
+		if (upperText.includes("LEVEL=INFO") || upperText.includes("[INFO]")) return "INFO"
+		if (upperText.includes("LEVEL=DEBUG") || upperText.includes("[DEBUG]")) return "DEBUG"
+
+		// stderr is typically error output
+		if (stream === "stderr") return "ERROR"
+
+		return "LOG"
+	}
+
 	// Also expose write to original console for debugging the capture itself
 	writeToOriginal(level: LogLevel, ...args: unknown[]): void {
 		if (!this.originalConsole) return
@@ -264,6 +407,28 @@ export function getConsoleCapture(): ConsoleCapture {
 	return instance
 }
 
+/**
+ * Write directly to the terminal, bypassing console capture.
+ * Used by the TUI renderer to output to terminal without being captured.
+ */
+export function writeToTerminal(data: string | Uint8Array): boolean {
+	return originalStdoutWrite(data)
+}
+
+/**
+ * Create a wrapped stdout that bypasses console capture.
+ * Returns a write function compatible with TuiWriteStream.
+ */
+export function createTerminalWriter(): typeof process.stdout.write {
+	return ((
+		chunk: Uint8Array | string,
+		encodingOrCallback?: BufferEncoding | ((err?: Error | null) => void),
+		callback?: (err?: Error | null) => void,
+	): boolean => {
+		return originalStdoutWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+	}) as typeof process.stdout.write
+}
+
 // Clean up on process exit
 process.on("exit", () => {
 	if (instance?.isActive) {

package/src/console/ConsolePopover.tsx

@@ -41,16 +41,16 @@ interface SelectionPoint {
 // ─────────────────────────────────────────────────────────────
 
 const LOG_COLORS: Record<LogLevel, ColorValue> = {
-	LOG: Colors.white,
-	INFO: Colors.cyan,
-	WARN: Colors.yellow,
-	ERROR: Colors.red,
-	DEBUG: Colors.gray(12),
+	LOG: Colors.ansi.white,
+	INFO: Colors.cyan(500),
+	WARN: Colors.yellow(500),
+	ERROR: Colors.red(500),
+	DEBUG: Colors.ansi.gray(12),
 }
 
-const TITLE_BG = Colors.gray(4)
-const TITLE_FG = Colors.white
-const CONTENT_BG = Colors.gray(2)
+const TITLE_BG = Colors.ansi.gray(4)
+const TITLE_FG = Colors.ansi.white
+const CONTENT_BG = Colors.ansi.gray(2)
 const SELECTION_BG = Colors.rgb(60, 90, 140)
 
 // ─────────────────────────────────────────────────────────────
@@ -421,7 +421,7 @@ export function ConsolePopover({
 								{before}
 							</text>
 						)}
-						<text fg={Colors.white} bg={SELECTION_BG}>
+						<text fg={Colors.ansi.white} bg={SELECTION_BG}>
 							{selected}
 						</text>
 						{after.length > 0 && (
@@ -450,11 +450,11 @@ export function ConsolePopover({
 			<vstack width={termWidth} height={popoverHeight}>
 				{/* Title bar */}
 				<hstack height={1} bg={TITLE_BG}>
-					<text fg={feedback ? Colors.green : TITLE_FG} bg={TITLE_BG}>
+					<text fg={feedback ? Colors.green(500) : TITLE_FG} bg={TITLE_BG}>
 						{` ${titleText}`}
 					</text>
 					<spacer />
-					<text fg={Colors.gray(14)} bg={TITLE_BG}>
+					<text fg={Colors.ansi.gray(14)} bg={TITLE_BG}>
 						{`${mode === "inline" ? inlineHints : hints} `}
 					</text>
 				</hstack>
@@ -463,7 +463,7 @@ export function ConsolePopover({
 				<scroll {...scrollProps} sticky>
 					<vstack>
 						{displayLines.length === 0 ? (
-							<text fg={Colors.gray(10)} bg={CONTENT_BG}>
+							<text fg={Colors.ansi.gray(10)} bg={CONTENT_BG}>
 								No console output yet
 							</text>
 						) : (

package/src/console/useConsole.ts

@@ -65,16 +65,13 @@ export function useConsole(options: UseConsoleOptions = {}): UseConsoleReturn {
 	const [visible, setVisible] = useState(initiallyVisible)
 	const [entries, setEntries] = useState<LogEntry[]>(() => capture.getEntries())
 
-	// Activate capture on mount
+	// Activate capture on mount (blocking is enabled immediately in activate())
 	useEffect(() => {
 		if (!capture.isActive) {
 			capture.activate()
 		}
-
-		return () => {
-			// Don't deactivate on unmount - other components may still use it
-			// The singleton handles cleanup on process exit
-		}
+		// Don't deactivate on unmount - other components may still use it
+		// The singleton handles cleanup on process exit
 	}, [capture])
 
 	// Subscribe to entries and errors

package/src/debug/DiagnosticsPanel.tsx

@@ -17,21 +17,21 @@ export function DiagnosticsPanel({ sampleMs = 200, title = "Diagnostics" }: Diag
 
 	return (
 		<vstack spacing={1}>
-			<text fg={Colors.cyan} bold>
+			<text fg={Colors.cyan(500)} bold>
 				{title} ({stats?.mode ?? "?"})
 			</text>
 			{stats ? (
 				<>
-					<text fg={Colors.gray(12)}>
+					<text fg={Colors.ansi.gray(12)}>
 						size {stats.width}×{stats.height} content {h} rows — {bytes} bytes/frame — {fps} fps
 					</text>
-					<text fg={Colors.gray(12)}>
+					<text fg={Colors.ansi.gray(12)}>
 						clear {phases?.clear.toFixed(2)}ms · layout {phases?.layout.toFixed(2)}ms · render{" "}
 						{phases?.render.toFixed(2)}ms · diff {phases?.diffAnsi.toFixed(2)}ms · write {phases?.write.toFixed(2)}ms
 					</text>
 				</>
 			) : (
-				<text fg={Colors.gray(10)}>Waiting for first frame…</text>
+				<text fg={Colors.ansi.gray(10)}>Waiting for first frame…</text>
 			)}
 		</vstack>
 	)

package/src/dev/Toast.tsx

@@ -3,7 +3,6 @@
 
 import { Colors } from "@effect-tui/core"
 import { createContext, type ReactNode, useCallback, useContext, useState } from "react"
-import { useTerminalSize } from "../renderer-context.js"
 
 // ─────────────────────────────────────────────────────────────
 // Types
@@ -82,7 +81,6 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 
 export function ToastContainer() {
 	const { toasts } = useToast()
-	const { width } = useTerminalSize()
 
 	if (toasts.length === 0) return null
 
@@ -90,16 +88,17 @@ export function ToastContainer() {
 	const toast = toasts[toasts.length - 1]
 	const style = TOAST_STYLES[toast.type]
 
-	// Center the message with padding
+	// Compact pill in upper right
 	const content = ` ${style.icon} ${toast.message} `
-	const padding = Math.max(0, Math.floor((width - content.length) / 2))
-	const paddedContent = " ".repeat(padding) + content + " ".repeat(width - padding - content.length)
 
-	// Just render the toast line - parent zstack handles positioning
+	// Position in upper right corner
 	return (
-		<text bg={style.bg} fg={style.fg}>
-			{paddedContent}
-		</text>
+		<hstack>
+			<spacer />
+			<box bg={style.bg} padding={{ x: 1 }}>
+				<text fg={style.fg}>{content}</text>
+			</box>
+		</hstack>
 	)
 }
 

package/src/dev.tsx

@@ -327,7 +327,7 @@ function StatsOverlay({ sampleMs, title }: { sampleMs?: number; title?: string }
 		<vstack width={width} height={height}>
 			<hstack width={width}>
 				<spacer />
-				<box padding={1} border="rounded" borderColor={Colors.gray(8)} bg={Colors.gray(2)}>
+				<box padding={1} border="rounded" borderColor={Colors.ansi.gray(8)} bg={Colors.ansi.gray(2)}>
 					<DiagnosticsPanel sampleMs={sampleMs} title={title ?? "Renderer Stats"} />
 				</box>
 			</hstack>

package/src/hooks/use-scroll.ts

@@ -218,28 +218,37 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	const atStart = offset <= 0
 	const atEnd = offset >= maxOffset
 
+	const clampOffset = useCallback(
+		(value: number) => {
+			const clamped = Math.max(0, Math.min(maxOffset, value))
+			// Keep refs in sync so rapid events don't use stale state
+			offsetRef.current = clamped
+			wasAtEndRef.current = clamped >= maxOffset - 1
+			return clamped
+		},
+		[maxOffset],
+	)
+
 	// Clamp and set offset
 	const setOffset = useCallback(
 		(newOffset: number) => {
-			const clamped = Math.max(0, Math.min(maxOffset, newOffset))
-			setOffsetRaw(clamped)
-			// Track if we're at end for sticky behavior
-			wasAtEndRef.current = clamped >= maxOffset - 1
+			setOffsetRaw(() => clampOffset(newOffset))
 		},
-		[maxOffset],
+		[clampOffset],
 	)
 
 	// Scroll by delta with accumulator for fractional scrolling
+	// Uses functional state updates to avoid stale closures during rapid scrolling
 	const scrollBy = useCallback(
 		(delta: number) => {
 			accumulatorRef.current += delta
 			const integerDelta = Math.trunc(accumulatorRef.current)
 			if (integerDelta !== 0) {
-				setOffset(offset + integerDelta)
+				setOffsetRaw((prev) => clampOffset(prev + integerDelta))
 				accumulatorRef.current -= integerDelta
 			}
 		},
-		[offset, setOffset],
+		[clampOffset],
 	)
 
 	const scrollToStart = useCallback(() => {
@@ -270,9 +279,9 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 		if (!sticky) return
 		const newMaxOffset = Math.max(0, contentSize - viewportSize)
 		if (wasAtEndRef.current && contentSize > 0) {
-			setOffsetRaw(newMaxOffset)
+			setOffsetRaw(() => clampOffset(newMaxOffset))
 		}
-	}, [sticky, contentSize, viewportSize])
+	}, [sticky, contentSize, viewportSize, clampOffset])
 
 	// Handle viewport size changes (reported by scroll component)
 	const handleViewportSize = useCallback(

package/src/hosts/box.ts

@@ -20,6 +20,10 @@ export interface BoxProps extends CommonProps {
 	border?: BorderKind
 	borderColor?: Color
 	bg?: Color
+	/** Title displayed on the top border */
+	title?: string
+	/** Title text color (defaults to borderColor) */
+	titleColor?: Color
 }
 
 export class BoxHost extends SingleChildHost {
@@ -27,6 +31,8 @@ export class BoxHost extends SingleChildHost {
 	border: BorderKind = "none"
 	borderColor?: Color
 	bg?: Color
+	title?: string
+	titleColor?: Color
 
 	constructor(props: BoxProps, ctx: HostContext) {
 		super("box", props, ctx)
@@ -101,9 +107,21 @@ export class BoxHost extends SingleChildHost {
 		// Draw border
 		if (this.border !== "none" && w >= 2 && h >= 2) {
 			const chars = borderChars(this.border)
-			const borderFg = toColorValue(this.borderColor) ?? Colors.gray(8)
+			const borderFg = toColorValue(this.borderColor) ?? Colors.ansi.gray(8)
 			const borderStyle = palette.id({ fg: borderFg })
 			drawBorder(buffer, x, y, w, h, chars, borderStyle)
+
+			// Draw title on top border if present
+			if (this.title && w >= 5) {
+				const titleFg = toColorValue(this.titleColor) ?? borderFg
+				const titleStyle = palette.id({ fg: titleFg })
+				const maxTitleLen = w - 4 // Leave room for "─ " and " ─"
+				const displayTitle =
+					this.title.length > maxTitleLen ? this.title.slice(0, maxTitleLen - 1) + "…" : this.title
+				// Draw " Title " starting at x+2
+				const titleX = x + 2
+				buffer.drawText(titleX, y, ` ${displayTitle} `, titleStyle)
+			}
 		}
 
 		// Render single child
@@ -119,5 +137,7 @@ export class BoxHost extends SingleChildHost {
 		this.border = (props.border as BorderKind | undefined) ?? "none"
 		this.borderColor = props.borderColor as Color | undefined
 		this.bg = props.bg as Color | undefined
+		this.title = props.title as string | undefined
+		this.titleColor = props.titleColor as Color | undefined
 	}
 }

package/src/hosts/canvas.ts

@@ -168,7 +168,7 @@ export class CanvasHost extends BaseHost {
 				// Draw border (with clipping)
 				if (border !== "none" && bw >= 2 && bh >= 2) {
 					const chars = borderChars(border)
-					const borderFg = toColorValue(opts?.borderColor) ?? toColorValue(opts?.fg) ?? Colors.gray(8)
+					const borderFg = toColorValue(opts?.borderColor) ?? toColorValue(opts?.fg) ?? Colors.ansi.gray(8)
 					const borderStyle = palette.id({ fg: borderFg })
 					drawBorder(buffer, px, py, bw, bh, chars, borderStyle, { ox, oy, w, h })
 				}

package/src/hosts/codeblock.ts

@@ -88,7 +88,7 @@ export class CodeBlockHost extends BaseHost {
 
 			if (this.lineNumbers) {
 				const gutterStyle = styleIdFromProps(palette, {
-					fg: this.lineNumberColor ?? Colors.gray(11),
+					fg: this.lineNumberColor ?? Colors.ansi.gray(11),
 					bg: this.lineNumberBackground ?? this.background,
 				})
 				const digits = String(i + 1).padStart(this.gutterWidth - 1, " ")

package/src/inline/index.tsx

@@ -41,19 +41,19 @@ function TaskList({ tasks, spinnerIndex }: TaskListProps) {
 
 				const color =
 					task.status === "running"
-						? Colors.brightYellow
+						? Colors.ansi.brightYellow
 						: task.status === "success"
-							? Colors.brightGreen
+							? Colors.ansi.brightGreen
 							: task.status === "failure"
-								? Colors.brightRed
-								: Colors.gray(10)
+								? Colors.ansi.brightRed
+								: Colors.ansi.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>
+						<text fg={task.status === "pending" ? Colors.ansi.gray(10) : undefined}>{task.label}</text>
 					</hstack>
 				)
 			})}