@effect-tui/react 0.15.2 → 2.0.0

package/src/utils/alignment.ts

@@ -4,7 +4,7 @@
 
 import type { Rect, Size } from "../reconciler/types.js"
 
-export type HAlign = "left" | "center" | "right" | "leading" | "trailing"
+export type HAlign = "left" | "center" | "right"
 export type VAlign = "top" | "center" | "bottom"
 
 /**
@@ -22,14 +22,12 @@ export function alignInRect(
 
 	switch (hAlign) {
 		case "left":
-		case "leading":
 			x = rect.x
 			break
 		case "center":
 			x = rect.x + Math.floor((rect.w - size.w) / 2)
 			break
 		case "right":
-		case "trailing":
 			x = rect.x + Math.max(0, rect.w - size.w)
 			break
 	}

package/src/utils/border.ts

@@ -4,7 +4,15 @@
 
 import type { CellBuffer } from "@effect-tui/core"
 
-export type BorderKind = "none" | "rounded" | "square" | "double" | "heavy" | "dashed" | "ascii"
+export type BorderKind =
+	| "none"
+	| "rounded"
+	| "round"
+	| "square"
+	| "double"
+	| "heavy"
+	| "dashed"
+	| "ascii"
 
 export interface BorderChars {
 	tl: string // top-left
@@ -33,6 +41,7 @@ export interface TableBorderChars extends BorderChars {
 export function borderChars(kind: BorderKind): BorderChars {
 	switch (kind) {
 		case "rounded":
+		case "round":
 			return { tl: "╭", tr: "╮", bl: "╰", br: "╯", h: "─", v: "│" }
 		case "square":
 			return { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│" }
@@ -55,6 +64,7 @@ export function borderChars(kind: BorderKind): BorderChars {
 export function tableBorderChars(kind: BorderKind): TableBorderChars {
 	switch (kind) {
 		case "rounded":
+		case "round":
 			return { tl: "╭", tr: "╮", bl: "╰", br: "╯", h: "─", v: "│", tt: "┬", bt: "┴", lt: "├", rt: "┤", cross: "┼" }
 		case "square":
 			return { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│", tt: "┬", bt: "┴", lt: "├", rt: "┤", cross: "┼" }

package/src/utils/console-helpers.ts

@@ -0,0 +1,86 @@
+export interface SelectionPoint {
+	line: number
+	col: number
+}
+
+export function formatTimestamp(date: Date): string {
+	const h = date.getHours().toString().padStart(2, "0")
+	const m = date.getMinutes().toString().padStart(2, "0")
+	const s = date.getSeconds().toString().padStart(2, "0")
+	return `${h}:${m}:${s}`
+}
+
+export function formatLocation(loc?: { file: string; line: number }): string {
+	if (!loc) return ""
+	const parts = loc.file.split("/")
+	const filename = parts[parts.length - 1]
+	return `${filename}:${loc.line}`
+}
+
+export function wrapLine(text: string, maxWidth: number): string[] {
+	if (text.length <= maxWidth) return [text]
+
+	const lines: string[] = []
+	let remaining = text
+
+	while (remaining.length > 0) {
+		if (remaining.length <= maxWidth) {
+			lines.push(remaining)
+			break
+		}
+
+		let breakAt = maxWidth
+		const lastSpace = remaining.lastIndexOf(" ", maxWidth)
+		if (lastSpace > maxWidth * 0.5) {
+			breakAt = lastSpace
+		}
+
+		lines.push(remaining.slice(0, breakAt))
+		remaining = remaining.slice(breakAt).trimStart()
+	}
+
+	return lines
+}
+
+/** Normalize selection so start is before end */
+export function normalizeSelection(
+	anchor: SelectionPoint,
+	head: SelectionPoint,
+): [SelectionPoint, SelectionPoint] {
+	if (anchor.line < head.line || (anchor.line === head.line && anchor.col <= head.col)) {
+		return [anchor, head]
+	}
+	return [head, anchor]
+}
+
+/** Get selection bounds for a specific line */
+export function getLineSelection(
+	lineIndex: number,
+	lineLength: number,
+	start: SelectionPoint,
+	end: SelectionPoint,
+): { startCol: number; endCol: number } | null {
+	if (lineIndex < start.line || lineIndex > end.line) return null
+
+	const startCol = lineIndex === start.line ? Math.min(start.col, lineLength) : 0
+	const endCol = lineIndex === end.line ? Math.min(end.col, lineLength) : lineLength
+
+	if (startCol >= endCol && lineIndex === start.line && lineIndex === end.line) return null
+
+	return { startCol, endCol }
+}
+
+export function getSelectionText(
+	lines: string[],
+	start: SelectionPoint,
+	end: SelectionPoint,
+): string {
+	const selected: string[] = []
+	for (let i = start.line; i <= end.line && i < lines.length; i++) {
+		const lineText = lines[i] ?? ""
+		const startCol = i === start.line ? Math.min(start.col, lineText.length) : 0
+		const endCol = i === end.line ? Math.min(end.col, lineText.length) : lineText.length
+		selected.push(lineText.slice(startCol, endCol))
+	}
+	return selected.join("\n")
+}

package/src/utils/index.ts

@@ -20,5 +20,19 @@ export {
 	styleSpecFromProps,
 	toColorValue,
 } from "./styles.js"
-export { wrapSpans } from "./text-wrap.js"
+export {
+	buildTextLayout,
+	type LineLayout,
+	type TextLayout,
+	type TextLayoutOptions,
+	type VisualLine,
+} from "./text-layout.js"
+export {
+	splitSpansByNewline,
+	spansDisplayWidth,
+	wrapLineWithRanges,
+	wrapSpans,
+	wrapSpansByLine,
+	wrapText,
+} from "./text-wrap.js"
 export { isWhitespace, matchNextWord, matchPrevWord, splitWords } from "./word-boundaries.js"

package/src/utils/styles.ts

@@ -83,14 +83,26 @@ export function resolveInheritedBgStyle(
 /**
  * Fill a rect with background color, inheriting from parent if needed.
  */
+export interface FillRectWithInheritedBgOptions {
+	/** Skip filling when there is no inherited background value. */
+	skipWhenUndefined?: boolean
+}
+
 export function fillRectWithInheritedBg(
 	buffer: CellBuffer,
 	palette: Palette,
 	rect: Rect,
 	explicitBg: Color | undefined,
 	parent: HostInstance | null,
-): void {
-	if (rect.w <= 0 || rect.h <= 0) return
-	const { styleId } = resolveInheritedBgStyle(palette, explicitBg, parent)
-	buffer.fillRect(rect.x, rect.y, rect.w, rect.h, " ".codePointAt(0)!, styleId)
+	options?: FillRectWithInheritedBgOptions,
+): { value?: ColorValue; styleId: number } {
+	if (rect.w <= 0 || rect.h <= 0) {
+		return { value: undefined, styleId: 0 }
+	}
+	const resolved = resolveInheritedBgStyle(palette, explicitBg, parent)
+	if (options?.skipWhenUndefined && resolved.value === undefined) {
+		return resolved
+	}
+	buffer.fillRect(rect.x, rect.y, rect.w, rect.h, " ".codePointAt(0)!, resolved.styleId)
+	return resolved
 }

package/src/utils/text-layout.ts

@@ -0,0 +1,65 @@
+import { displayWidth, graphemes } from "@effect-tui/core"
+import { wrapLineWithRanges } from "./text-wrap.js"
+
+export type VisualLine = {
+	logicalRow: number
+	startCol: number
+	endCol: number
+	text: string
+}
+
+export type LineLayout = {
+	graphemeList: string[]
+	widths: number[]
+	prefixWidths: number[]
+	visualLines: VisualLine[]
+}
+
+export type TextLayout = {
+	lines: LineLayout[]
+	allVisualLines: VisualLine[]
+}
+
+export type TextLayoutOptions = {
+	wrap?: boolean
+	preserveWhitespace?: boolean
+}
+
+export function buildTextLayout(text: string, maxWidth: number, options?: TextLayoutOptions): TextLayout {
+	const logicalLines = text.split("\n")
+	const wrap = options?.wrap ?? true
+	const preserveWhitespace = options?.preserveWhitespace ?? false
+	const lines: LineLayout[] = []
+	const allVisualLines: VisualLine[] = []
+
+	for (let row = 0; row < logicalLines.length; row++) {
+		const line = logicalLines[row]
+		const graphemeList = graphemes(line)
+		const widths = graphemeList.map((g) => displayWidth(g))
+		const prefixWidths: number[] = [0]
+		for (let i = 0; i < widths.length; i++) {
+			prefixWidths.push(prefixWidths[i] + widths[i])
+		}
+
+		const visualLines: VisualLine[] = wrap
+			? wrapLineWithRanges(line, maxWidth, { preserveWhitespace }).map((range) => ({
+					logicalRow: row,
+					startCol: range.startCol,
+					endCol: range.endCol,
+					text: range.text,
+				}))
+			: [
+					{
+						logicalRow: row,
+						startCol: 0,
+						endCol: graphemeList.length,
+						text: line,
+					},
+				]
+
+		lines.push({ graphemeList, widths, prefixWidths, visualLines })
+		allVisualLines.push(...visualLines)
+	}
+
+	return { lines, allVisualLines }
+}

package/src/utils/text-wrap.ts

@@ -1,60 +1,123 @@
-import { displayWidth } from "@effect-tui/core"
+import { displayWidth, graphemes } from "@effect-tui/core"
 import { isWhitespace, splitWords } from "./word-boundaries.js"
 
 type SpanLike = { text: string }
 
-/**
- * Wrap spans into lines, breaking at word boundaries.
- * Preserves span styling by cloning span objects with updated text.
- */
-export function wrapSpans<T extends SpanLike>(spans: T[], maxWidth: number): T[][] {
-	const lines: T[][] = [[]]
+type TokenSpec<T> = {
+	text: string
+	width: number
+	graphemeCount: number
+	isWhitespace: boolean
+	startCol?: number
+	segments?: string[]
+	make: (text: string, segmentStart: number, segmentEnd: number) => T
+}
+
+type LineToken<T> = {
+	value: T
+	width: number
+	isWhitespace: boolean
+}
+
+export type WrapOptions = {
+	trimTrailingWhitespace?: boolean
+	preserveWhitespace?: boolean
+}
+
+export function spansDisplayWidth<T extends { text: string }>(spans: T[]): number {
+	return spans.reduce((sum, span) => sum + displayWidth(span.text), 0)
+}
+
+function wrapTokens<T>(tokens: TokenSpec<T>[], maxWidth: number, options?: WrapOptions): T[][] {
+	const lines: LineToken<T>[][] = [[]]
 	let lineWidth = 0
 
-	for (const span of spans) {
-		// Split span text into words (keeping whitespace as separate tokens)
-		const tokens = splitWords(span.text)
+	const trimLine = () => {
+		if (!options?.trimTrailingWhitespace) return
+		const line = lines[lines.length - 1]
+		while (line.length > 0 && line[line.length - 1].isWhitespace) {
+			const removed = line.pop()
+			if (removed) {
+				lineWidth -= removed.width
+			}
+		}
+	}
 
-		for (const token of tokens) {
-			if (!token) continue
-			const tokenWidth = displayWidth(token)
-			const isWs = isWhitespace(token)
-
-			if (lineWidth + tokenWidth <= maxWidth) {
-				// Token fits on current line
-				lines[lines.length - 1].push({ ...span, text: token })
-				lineWidth += tokenWidth
-			} else if (isWs) {
-				// Skip whitespace at line break
-				continue
-			} else if (tokenWidth <= maxWidth) {
-				// Start new line with this token
-				lines.push([{ ...span, text: token }])
-				lineWidth = tokenWidth
-			} else {
-				// Token is longer than maxWidth - break by character
-				let charLine = ""
-				let charLineWidth = 0
-				for (const ch of token) {
-					const chWidth = displayWidth(ch)
-					if (lineWidth + charLineWidth + chWidth > maxWidth && (charLine || lineWidth > 0)) {
-						if (charLine) {
-							lines[lines.length - 1].push({ ...span, text: charLine })
-						}
-						lines.push([])
-						lineWidth = 0
-						charLine = ch
-						charLineWidth = chWidth
-					} else {
-						charLine += ch
-						charLineWidth += chWidth
-					}
-				}
-				if (charLine) {
-					lines[lines.length - 1].push({ ...span, text: charLine })
-					lineWidth += charLineWidth
+	const startNewLine = () => {
+		lines.push([])
+		lineWidth = 0
+	}
+
+	const addToken = (
+		token: TokenSpec<T>,
+		text: string,
+		width: number,
+		isWhitespace: boolean,
+		segmentStart: number,
+		segmentEnd: number,
+	) => {
+		lines[lines.length - 1].push({ value: token.make(text, segmentStart, segmentEnd), width, isWhitespace })
+		lineWidth += width
+	}
+
+	for (const token of tokens) {
+		if (!token.text) continue
+		const tokenWidth = token.width
+		const isWs = token.isWhitespace
+
+		if (lineWidth + tokenWidth <= maxWidth) {
+			const start = token.startCol ?? 0
+			addToken(token, token.text, tokenWidth, isWs, start, start + token.graphemeCount)
+			continue
+		}
+
+		if (isWs && !options?.preserveWhitespace) {
+			// Skip whitespace at line break
+			continue
+		}
+
+		if (tokenWidth <= maxWidth) {
+			trimLine()
+			if (lines[lines.length - 1].length > 0) {
+				startNewLine()
+			}
+			const start = token.startCol ?? 0
+			addToken(token, token.text, tokenWidth, isWs, start, start + token.graphemeCount)
+			continue
+		}
+
+		// Token is longer than maxWidth - break by character
+		trimLine()
+		if (lines[lines.length - 1].length > 0) {
+			startNewLine()
+		}
+
+		const segments = token.segments ?? Array.from(token.text)
+		const tokenStart = token.startCol ?? 0
+		let segment = ""
+		let segmentWidth = 0
+		let segmentStartOffset = 0
+		let segmentOffset = 0
+
+		for (const ch of segments) {
+			const chWidth = displayWidth(ch)
+			if (lineWidth + segmentWidth + chWidth > maxWidth && (segment || lineWidth > 0)) {
+				if (segment) {
+					addToken(token, segment, segmentWidth, false, tokenStart + segmentStartOffset, tokenStart + segmentOffset)
 				}
+				startNewLine()
+				segment = ch
+				segmentWidth = chWidth
+				segmentStartOffset = segmentOffset
+			} else {
+				segment += ch
+				segmentWidth += chWidth
 			}
+			segmentOffset += 1
+		}
+
+		if (segment) {
+			addToken(token, segment, segmentWidth, false, tokenStart + segmentStartOffset, tokenStart + segmentOffset)
 		}
 	}
 
@@ -63,5 +126,155 @@ export function wrapSpans<T extends SpanLike>(spans: T[], maxWidth: number): T[]
 		lines.pop()
 	}
 
+	return lines.length > 0 ? lines.map((line) => line.map((token) => token.value)) : [[]]
+}
+
+export type WrappedLineRange = {
+	text: string
+	startCol: number
+	endCol: number
+}
+
+/**
+ * Wrap a single line into visual lines with grapheme ranges.
+ */
+export function wrapLineWithRanges(line: string, maxWidth: number, options?: WrapOptions): WrappedLineRange[] {
+	if (line === "") {
+		return [{ text: "", startCol: 0, endCol: 0 }]
+	}
+
+	const tokens: Array<TokenSpec<WrappedLineRange>> = []
+	let col = 0
+	for (const token of splitWords(line)) {
+		if (!token) continue
+		const segments = graphemes(token)
+		const graphemeCount = segments.length
+		const startCol = col
+		tokens.push({
+			text: token,
+			width: displayWidth(token),
+			graphemeCount,
+			startCol,
+			segments,
+			isWhitespace: isWhitespace(token),
+			make: (text, segmentStart, segmentEnd) => ({ text, startCol: segmentStart, endCol: segmentEnd }),
+		})
+		col += graphemeCount
+	}
+
+	const wrapped = wrapTokens(tokens, maxWidth, options)
+	const lines: WrappedLineRange[] = []
+
+	for (const lineTokens of wrapped) {
+		if (lineTokens.length === 0) {
+			lines.push({ text: "", startCol: 0, endCol: 0 })
+			continue
+		}
+		lines.push({
+			text: lineTokens.map((token) => token.text).join(""),
+			startCol: lineTokens[0].startCol,
+			endCol: lineTokens[lineTokens.length - 1].endCol,
+		})
+	}
+
+	return lines.length > 0 ? lines : [{ text: "", startCol: 0, endCol: 0 }]
+}
+
+/**
+ * Wrap spans into lines, breaking at word boundaries.
+ * Preserves span styling by cloning span objects with updated text.
+ */
+export function wrapSpans<T extends SpanLike>(spans: T[], maxWidth: number, options?: WrapOptions): T[][] {
+	const tokens: Array<TokenSpec<T>> = []
+	for (const span of spans) {
+		for (const token of splitWords(span.text)) {
+			if (!token) continue
+			const segments = graphemes(token)
+			tokens.push({
+				text: token,
+				width: displayWidth(token),
+				graphemeCount: segments.length,
+				segments,
+				isWhitespace: isWhitespace(token),
+				make: (text) => ({ ...span, text }),
+			})
+		}
+	}
+
+	return wrapTokens(tokens, maxWidth, options)
+}
+
+/**
+ * Split spans into logical lines at newline boundaries.
+ * Preserves empty lines.
+ */
+export function splitSpansByNewline<T extends SpanLike>(spans: T[]): T[][] {
+	const lines: T[][] = [[]]
+
+	for (const span of spans) {
+		if (!span.text) continue
+		const parts = span.text.split("\n")
+		for (let i = 0; i < parts.length; i++) {
+			if (i > 0) {
+				lines.push([])
+			}
+			const part = parts[i]
+			if (part) {
+				lines[lines.length - 1].push({ ...span, text: part })
+			}
+		}
+	}
+
 	return lines.length > 0 ? lines : [[]]
 }
+
+/**
+ * Wrap spans per logical line (newline-aware).
+ */
+export function wrapSpansByLine<T extends SpanLike>(spans: T[], maxWidth: number, options?: WrapOptions): T[][] {
+	const logicalLines = splitSpansByNewline(spans)
+	const lines: T[][] = []
+
+	for (const line of logicalLines) {
+		if (line.length === 0) {
+			lines.push([])
+			continue
+		}
+		lines.push(...wrapSpans(line, maxWidth, options))
+	}
+
+	return lines.length > 0 ? lines : [[]]
+}
+
+/**
+ * Wrap plain text into lines, breaking at word boundaries.
+ * Trims trailing whitespace when a line breaks.
+ */
+export function wrapText(text: string, maxWidth: number): string[] {
+	const lines: string[] = []
+	for (const rawLine of text.split("\n")) {
+		if (rawLine === "") {
+			lines.push("")
+			continue
+		}
+		const tokens: Array<TokenSpec<string>> = []
+		for (const token of splitWords(rawLine)) {
+			if (!token) continue
+			const segments = graphemes(token)
+			tokens.push({
+				text: token,
+				width: displayWidth(token),
+				graphemeCount: segments.length,
+				segments,
+				isWhitespace: isWhitespace(token),
+				make: (segment) => segment,
+			})
+		}
+		const wrapped = wrapTokens(tokens, maxWidth, { trimTrailingWhitespace: true })
+		for (const line of wrapped) {
+			lines.push(line.join(""))
+		}
+	}
+
+	return lines.length > 0 ? lines : [""]
+}

package/src/visualize/index.tsx

@@ -273,7 +273,7 @@ export const visualize = <A, E, R>(
 				: { status: "failure", elapsedMs: Date.now() - startTime, errorSummary: summarizeCause(exit.cause) },
 		)
 		renderer.requestRender()
-		renderer.flush() // Ensure final state is rendered
+		renderer.renderNow() // Ensure final state is rendered
 
 		// Wait for completion animation
 		yield* Effect.sleep(COMPLETION_DELAY_MS)

package/src/renderer/lifecycle/ResizeManager.ts

@@ -1,65 +0,0 @@
-import type { TuiWriteStream } from "../../renderer-types.js"
-
-export interface ResizeState {
-	width: number
-	height: number
-	lastWidth: number
-	previousHeight: number // For inline mode
-	inlineClearHeight: number
-}
-
-export interface ResizeResult {
-	newWidth: number
-	newHeight: number
-	needsFullClear: boolean // Fullscreen mode
-	inlineClearHeight: number // Inline mode
-}
-
-/**
- * Handles terminal resize events and calculates necessary clear/redraw actions.
- */
-export class ResizeManager {
-	constructor(
-		private stdout: TuiWriteStream,
-		private mode: "fullscreen" | "inline",
-	) {}
-
-	/**
-	 * Process a resize event and determine what actions are needed.
-	 */
-	handleResize(currentState: ResizeState): ResizeResult {
-		const newWidth = this.stdout.columns || 80
-		const newHeight = this.stdout.rows || 24
-
-		let needsFullClear = false
-		let inlineClearHeight = currentState.inlineClearHeight
-
-		if (this.mode === "fullscreen") {
-			// Fullscreen: defer clear to renderFrame so it's written atomically with content
-			needsFullClear = true
-		} else if (newWidth !== currentState.lastWidth || newHeight !== currentState.height) {
-			// Inline: on dimension change, request clear on next render
-			const clearHeight = Math.max(currentState.previousHeight, currentState.height, newHeight)
-			if (clearHeight > inlineClearHeight) {
-				inlineClearHeight = clearHeight
-			}
-		}
-
-		return {
-			newWidth,
-			newHeight,
-			needsFullClear,
-			inlineClearHeight,
-		}
-	}
-
-	/**
-	 * Get current terminal dimensions.
-	 */
-	getDimensions(): { width: number; height: number } {
-		return {
-			width: this.stdout.columns || 80,
-			height: this.stdout.rows || 24,
-		}
-	}
-}

package/src/renderer/lifecycle/index.ts

@@ -1,4 +0,0 @@
-export { EventBus } from "./EventBus.js"
-export { getRenderCache, type RenderCache } from "./RenderCache.js"
-export { ResizeManager, type ResizeResult, type ResizeState } from "./ResizeManager.js"
-export { TerminalSetup, type TerminalSetupConfig } from "./TerminalSetup.js"