@effect-tui/react 0.2.4 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.2.4",
+	"version": "0.4.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.2.4",
+		"@effect-tui/core": "^0.4.0",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/components/Markdown.tsx

@@ -52,8 +52,8 @@ export interface MarkdownProps {
 	theme?: MarkdownTheme
 	/** Code block theme for syntax highlighting */
 	codeTheme?: BundledTheme
-	/** Maximum width for text wrapping (default: no wrap) */
-	maxWidth?: number
+	/** Enable text wrapping (default: false, text is truncated) */
+	wrap?: boolean
 }
 
 // Parsed markdown elements
@@ -226,39 +226,42 @@ function parseMarkdown(content: string): MdElement[] {
 }
 
 /**
- * Render inline spans as text elements
+ * Render inline spans as text elements.
+ * Uses <text wrap> for host-level wrapping when wrap=true.
  */
-function renderSpans(spans: MdSpan[], theme: Required<MarkdownTheme>) {
+function renderSpans(spans: MdSpan[], theme: Required<MarkdownTheme>, wrap = false) {
 	return spans.map((span, i) => {
 		switch (span.type) {
 			case "text":
 				return (
-					<text key={i} fg={theme.text}>
+					<text key={i} fg={theme.text} wrap={wrap}>
 						{span.text}
 					</text>
 				)
 			case "bold":
 				return (
-					<text key={i} fg={theme.bold} bold>
+					<text key={i} fg={theme.bold} bold wrap={wrap}>
 						{span.text}
 					</text>
 				)
 			case "italic":
 				return (
-					<text key={i} fg={theme.italic} italic>
+					<text key={i} fg={theme.italic} italic wrap={wrap}>
 						{span.text}
 					</text>
 				)
 			case "code":
 				return (
-					<text key={i} fg={theme.code} bg={theme.codeBg}>
+					<text key={i} fg={theme.code} bg={theme.codeBg} wrap={wrap}>
 						{span.text}
 					</text>
 				)
 			case "link":
 				return (
 					<hstack key={i}>
-						<text fg={theme.link}>{span.text}</text>
+						<text fg={theme.link} wrap={wrap}>
+							{span.text}
+						</text>
 						<text fg={theme.linkUrl}>{" ("}</text>
 						<text fg={theme.linkUrl}>{span.url}</text>
 						<text fg={theme.linkUrl}>{")"}</text>
@@ -294,7 +297,7 @@ function renderSpans(spans: MdSpan[], theme: Required<MarkdownTheme>) {
  * `} />
  * ```
  */
-export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }: MarkdownProps) {
+export function Markdown({ content, theme: themeOverrides, codeTheme = "nord", wrap = false }: MarkdownProps) {
 	const theme = { ...defaultTheme, ...themeOverrides }
 	const elements = parseMarkdown(content)
 
@@ -304,27 +307,27 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }:
 				switch (el.type) {
 					case "h1":
 						return (
-							<text key={i} fg={theme.h1} bold>
+							<text key={i} fg={theme.h1} bold wrap={wrap}>
 								{"# "}
 								{el.text}
 							</text>
 						)
 					case "h2":
 						return (
-							<text key={i} fg={theme.h2} bold>
+							<text key={i} fg={theme.h2} bold wrap={wrap}>
 								{"## "}
 								{el.text}
 							</text>
 						)
 					case "h3":
 						return (
-							<text key={i} fg={theme.h3} bold>
+							<text key={i} fg={theme.h3} bold wrap={wrap}>
 								{"### "}
 								{el.text}
 							</text>
 						)
 					case "paragraph":
-						return <hstack key={i}>{renderSpans(el.spans, theme)}</hstack>
+						return <hstack key={i}>{renderSpans(el.spans, theme, wrap)}</hstack>
 					case "code":
 						return (
 							<CodeBlock
@@ -340,7 +343,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }:
 						return (
 							<hstack key={i}>
 								<text fg={theme.quoteBorder}>{"│ "}</text>
-								{renderSpans(el.spans, theme)}
+								{renderSpans(el.spans, theme, wrap)}
 							</hstack>
 						)
 					case "ul":
@@ -349,7 +352,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }:
 								{el.items.map((item, j) => (
 									<hstack key={j}>
 										<text fg={theme.listMarker}>{"  • "}</text>
-										{renderSpans(item, theme)}
+										{renderSpans(item, theme, wrap)}
 									</hstack>
 								))}
 							</vstack>
@@ -360,7 +363,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }:
 								{el.items.map((item, j) => (
 									<hstack key={j}>
 										<text fg={theme.listMarker}>{`  ${el.start + j}. `}</text>
-										{renderSpans(item, theme)}
+										{renderSpans(item, theme, wrap)}
 									</hstack>
 								))}
 							</vstack>

package/src/components/Table.tsx

@@ -0,0 +1,326 @@
+/**
+ * Table component for rendering tabular data with box-drawing borders.
+ *
+ * @example
+ * ```tsx
+ * <Table data={users} border="square" headerSeparator>
+ *   <Table.Column header="Name" width={20}>
+ *     {(user) => <text fg={WHITE}>{user.name}</text>}
+ *   </Table.Column>
+ *   <Table.Column header="Score" width={5} align="right">
+ *     {(user) => <text fg={user.score > 80 ? GREEN : YELLOW}>{user.score}</text>}
+ *   </Table.Column>
+ * </Table>
+ * ```
+ */
+
+import { type Color, Colors } from "@effect-tui/core"
+import { Children, isValidElement, type ReactElement, type ReactNode } from "react"
+import { type BorderKind, tableBorderChars } from "../utils/border.js"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type Align = "left" | "center" | "right"
+
+export interface ColumnProps<T = unknown> {
+	/** Column header text or element */
+	header?: ReactNode
+	/** Fixed column width in characters */
+	width?: number
+	/** Minimum width when auto-sizing (default: header length) */
+	minWidth?: number
+	/** Maximum width when auto-sizing */
+	maxWidth?: number
+	/** Text alignment within cell (default: "left") */
+	align?: Align
+	/** Render function for cell content */
+	children: (item: T, index: number) => ReactNode
+}
+
+export interface TableProps<T> {
+	/** Data array to render rows from */
+	data: readonly T[]
+	/** Border style (default: "square") */
+	border?: BorderKind
+	/** Show separator line between header and body */
+	headerSeparator?: boolean
+	/** Show separator lines between all rows */
+	rowSeparator?: boolean
+	/** Cell padding in characters (default: 1) */
+	padding?: number
+	/** Border color (default: dim gray) */
+	borderColor?: Color
+	/** Header text color (default: dim gray) */
+	headerColor?: Color
+	/** Column definitions */
+	children: ReactNode
+}
+
+// ============================================================================
+// Column (data holder, not rendered directly)
+// ============================================================================
+
+function Column<T>(_props: ColumnProps<T>): ReactElement | null {
+	return null
+}
+
+// ============================================================================
+// Internal: Extract column configs from children
+// ============================================================================
+
+interface ColumnConfig<T> {
+	header?: ReactNode
+	width: number
+	align: Align
+	render: (item: T, index: number) => ReactNode
+}
+
+function extractColumns<T>(children: ReactNode, data: readonly T[]): ColumnConfig<T>[] {
+	const columns: ColumnConfig<T>[] = []
+
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) return
+		// Check if it's a Column element by checking the function name
+		if (typeof child.type === "function" && (child.type as { name?: string }).name === "Column") {
+			const props = child.props as ColumnProps<T>
+
+			// Calculate width
+			let width = props.width ?? 0
+			if (width === 0) {
+				// Auto-size: measure header + content
+				const headerLen = typeof props.header === "string" ? props.header.length : 0
+				const minFromHeader = Math.max(headerLen, props.minWidth ?? 0)
+
+				// Measure content from data (sample first few rows)
+				let maxContentLen = 0
+				for (let i = 0; i < Math.min(data.length, 10); i++) {
+					const rendered = props.children(data[i]!, i)
+					// Rough estimate - extract text content length
+					const textLen = estimateTextLength(rendered)
+					maxContentLen = Math.max(maxContentLen, textLen)
+				}
+
+				width = Math.max(minFromHeader, maxContentLen, 1)
+				if (props.maxWidth !== undefined) {
+					width = Math.min(width, props.maxWidth)
+				}
+			}
+
+			columns.push({
+				header: props.header,
+				width,
+				align: props.align ?? "left",
+				render: props.children,
+			})
+		}
+	})
+
+	return columns
+}
+
+function estimateTextLength(node: ReactNode): number {
+	if (node == null) return 0
+	if (typeof node === "string") return node.length
+	if (typeof node === "number") return String(node).length
+	if (Array.isArray(node)) return node.reduce((sum, n) => sum + estimateTextLength(n), 0)
+	if (isValidElement(node)) {
+		const children = (node.props as { children?: ReactNode }).children
+		return estimateTextLength(children)
+	}
+	return 0
+}
+
+// ============================================================================
+// Internal: Helpers
+// ============================================================================
+
+function alignText(text: string, width: number, align: Align): string {
+	if (text.length >= width) return text.slice(0, width)
+	const padding = width - text.length
+	switch (align) {
+		case "right":
+			return " ".repeat(padding) + text
+		case "center": {
+			const left = Math.floor(padding / 2)
+			const right = padding - left
+			return " ".repeat(left) + text + " ".repeat(right)
+		}
+		default:
+			return text + " ".repeat(padding)
+	}
+}
+
+function buildBorderLine(
+	widths: number[],
+	left: string,
+	mid: string,
+	right: string,
+	fill: string,
+	padding: number,
+): string {
+	return (
+		left + widths.map((w) => fill.repeat(w + padding * 2)).join(mid) + right
+	)
+}
+
+// ============================================================================
+// Table Component
+// ============================================================================
+
+function TableRoot<T>({
+	data,
+	border = "square",
+	headerSeparator = false,
+	rowSeparator = false,
+	padding = 1,
+	borderColor = Colors.gray(12),
+	headerColor = Colors.gray(12),
+	children,
+}: TableProps<T>) {
+	const columns = extractColumns<T>(children, data)
+	if (columns.length === 0) return null
+
+	const chars = tableBorderChars(border)
+	const widths = columns.map((c) => c.width)
+	const pad = " ".repeat(padding)
+	const noBorder = border === "none"
+
+	// Build border lines
+	const topLine = buildBorderLine(widths, chars.tl, chars.tt, chars.tr, chars.h, padding)
+	const midLine = buildBorderLine(widths, chars.lt, chars.cross, chars.rt, chars.h, padding)
+	const bottomLine = buildBorderLine(widths, chars.bl, chars.bt, chars.br, chars.h, padding)
+
+	// Check if any column has a header
+	const hasHeader = columns.some((c) => c.header !== undefined)
+
+	const rows: ReactNode[] = []
+
+	// Top border
+	if (!noBorder) {
+		rows.push(
+			<text key="border-top" fg={borderColor}>
+				{topLine}
+			</text>,
+		)
+	}
+
+	// Header row
+	if (hasHeader) {
+		const headerCells: ReactNode[] = []
+		columns.forEach((col, i) => {
+			// Left border or column separator
+			if (!noBorder) {
+				headerCells.push(
+					<text key={`h-sep-${i}`} fg={borderColor}>
+						{chars.v + pad}
+					</text>,
+				)
+			}
+			const headerText = typeof col.header === "string" ? col.header : ""
+			headerCells.push(
+				<text key={`h-${i}`} fg={headerColor}>
+					{alignText(headerText, col.width, col.align)}
+				</text>,
+			)
+			// Right padding (border comes from next column's left, or final border)
+			if (!noBorder) {
+				headerCells.push(
+					<text key={`h-pad-${i}`} fg={borderColor}>
+						{pad}
+					</text>,
+				)
+			}
+		})
+		// Final right border
+		if (!noBorder) {
+			headerCells.push(
+				<text key="h-sep-end" fg={borderColor}>
+					{chars.v}
+				</text>,
+			)
+		}
+		rows.push(<hstack key="header" spacing={0}>{headerCells}</hstack>)
+
+		// Header separator
+		if (headerSeparator && !noBorder) {
+			rows.push(
+				<text key="border-mid-header" fg={borderColor}>
+					{midLine}
+				</text>,
+			)
+		}
+	}
+
+	// Data rows
+	data.forEach((item, rowIdx) => {
+		// Row separator (between rows)
+		if (rowSeparator && rowIdx > 0 && !noBorder) {
+			rows.push(
+				<text key={`border-mid-${rowIdx}`} fg={borderColor}>
+					{midLine}
+				</text>,
+			)
+		}
+
+		const rowCells: ReactNode[] = []
+		columns.forEach((col, colIdx) => {
+			// Left border or column separator
+			if (!noBorder) {
+				rowCells.push(
+					<text key={`r${rowIdx}-sep-${colIdx}`} fg={borderColor}>
+						{chars.v + pad}
+					</text>,
+				)
+			}
+
+			// Cell content
+			const content = col.render(item, rowIdx)
+			rowCells.push(
+				<hstack key={`r${rowIdx}-c${colIdx}`} spacing={0} width={col.width}>
+					{content}
+				</hstack>,
+			)
+
+			// Right padding
+			if (!noBorder) {
+				rowCells.push(
+					<text key={`r${rowIdx}-pad-${colIdx}`} fg={borderColor}>
+						{pad}
+					</text>,
+				)
+			}
+		})
+		// Final right border
+		if (!noBorder) {
+			rowCells.push(
+				<text key={`r${rowIdx}-sep-end`} fg={borderColor}>
+					{chars.v}
+				</text>,
+			)
+		}
+		rows.push(<hstack key={`row-${rowIdx}`} spacing={0}>{rowCells}</hstack>)
+	})
+
+	// Bottom border
+	if (!noBorder) {
+		rows.push(
+			<text key="border-bottom" fg={borderColor}>
+				{bottomLine}
+			</text>,
+		)
+	}
+
+	return <vstack spacing={0}>{rows}</vstack>
+}
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export const Table = Object.assign(TableRoot, {
+	Column,
+})
+
+export type { Align as TableAlign }

package/src/components/TextInput.tsx

@@ -352,5 +352,5 @@ export function TextInput({
 		],
 	)
 
-	return <canvas draw={draw} width={width} height={1} />
+	return <canvas draw={draw} width={width} height={1} inheritBg={bg === undefined} />
 }

package/src/components/index.ts

@@ -3,4 +3,5 @@ export { Markdown, type MarkdownProps, type MarkdownTheme } from "./Markdown.js"
 export { MultilineTextInput, type MultilineTextInputProps } from "./MultilineTextInput.js"
 export { Overlay, type OverlayItemProps, type OverlayProps } from "./Overlay.js"
 export { Static, type StaticProps } from "./Static.js"
+export { Table, type TableAlign, type ColumnProps, type TableProps } from "./Table.js"
 export { TextInput, type TextInputProps } from "./TextInput.js"

package/src/hosts/canvas.ts

@@ -89,10 +89,14 @@ export class CanvasHost extends BaseHost {
 		if (!this.rect) return
 		const { x: ox, y: oy, w, h } = this.rect
 
+		// Get inherited background for use in drawing functions
+		const { value: inheritedBgValue, styleId: inheritedBgStyleId } = this.inheritBg
+			? resolveInheritedBgStyle(palette, undefined, this.parent)
+			: { value: undefined, styleId: 0 }
+
 		// Pre-fill with inherited background if requested
-		if (this.inheritBg) {
-			const { styleId } = resolveInheritedBgStyle(palette, undefined, this.parent)
-			buffer.fillRect(ox, oy, w, h, " ".codePointAt(0)!, styleId)
+		if (this.inheritBg && inheritedBgValue !== undefined) {
+			buffer.fillRect(ox, oy, w, h, " ".codePointAt(0)!, inheritedBgStyleId)
 		}
 
 		// Create draw context
@@ -103,9 +107,11 @@ export class CanvasHost extends BaseHost {
 			text: (x, y, str, opts) => {
 				const px = Math.round(ox + x)
 				const py = Math.round(oy + y)
+				// Use inherited bg when inheritBg is enabled and no explicit bg provided
+				const effectiveBg = opts?.bg ?? (this.inheritBg ? inheritedBgValue : undefined)
 				const style = styleIdFromProps(palette, {
 					fg: opts?.fg,
-					bg: opts?.bg,
+					bg: effectiveBg,
 					bold: opts?.bold,
 					italic: opts?.italic,
 					underline: opts?.underline,
@@ -123,9 +129,11 @@ export class CanvasHost extends BaseHost {
 				const px = Math.round(ox + x)
 				const py = Math.round(oy + y)
 				const cp = char.codePointAt(0)!
+				// Use inherited bg when inheritBg is enabled and no explicit bg provided
+				const effectiveBg = opts?.bg ?? (this.inheritBg ? inheritedBgValue : undefined)
 				const style = styleIdFromProps(palette, {
 					fg: opts?.fg,
-					bg: opts?.bg,
+					bg: effectiveBg,
 					bold: opts?.bold,
 					italic: opts?.italic,
 					underline: opts?.underline,

package/src/index.ts

@@ -5,6 +5,7 @@ export type { CodeBlockProps } from "./codeblock.js"
 export { CodeBlock } from "./codeblock.js"
 // Input components
 export {
+	type ColumnProps,
 	Markdown,
 	type MarkdownProps,
 	type MarkdownTheme,
@@ -15,6 +16,9 @@ export {
 	type OverlayProps,
 	Static,
 	type StaticProps,
+	Table,
+	type TableAlign,
+	type TableProps,
 	TextInput,
 	type TextInputProps,
 } from "./components/index.js"

package/src/utils/border.ts

@@ -15,6 +15,17 @@ export interface BorderChars {
 	v: string // vertical
 }
 
+/**
+ * Extended border chars for tables with T-connectors.
+ */
+export interface TableBorderChars extends BorderChars {
+	tt: string // top T (┬)
+	bt: string // bottom T (┴)
+	lt: string // left T (├)
+	rt: string // right T (┤)
+	cross: string // cross (┼)
+}
+
 /**
  * Get border characters for a given border style.
  * Returns empty strings for "none" (drawing code should skip when border is "none").
@@ -38,6 +49,28 @@ export function borderChars(kind: BorderKind): BorderChars {
 	}
 }
 
+/**
+ * Get table border characters (includes T-connectors and cross).
+ */
+export function tableBorderChars(kind: BorderKind): TableBorderChars {
+	switch (kind) {
+		case "rounded":
+			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: "┼" }
+		case "double":
+			return { tl: "╔", tr: "╗", bl: "╚", br: "╝", h: "═", v: "║", tt: "╦", bt: "╩", lt: "╠", rt: "╣", cross: "╬" }
+		case "heavy":
+			return { tl: "┏", tr: "┓", bl: "┗", br: "┛", h: "━", v: "┃", tt: "┳", bt: "┻", lt: "┣", rt: "┫", cross: "╋" }
+		case "dashed":
+			return { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "┄", v: "┆", tt: "┬", bt: "┴", lt: "├", rt: "┤", cross: "┼" }
+		case "ascii":
+			return { tl: "+", tr: "+", bl: "+", br: "+", h: "-", v: "|", tt: "+", bt: "+", lt: "+", rt: "+", cross: "+" }
+		default:
+			return { tl: "", tr: "", bl: "", br: "", h: "", v: "", tt: "", bt: "", lt: "", rt: "", cross: "" }
+	}
+}
+
 export interface ClipRect {
 	ox: number
 	oy: number

package/src/utils/index.ts

@@ -1,5 +1,13 @@
 export { alignInRect, type HAlign, type VAlign } from "./alignment.js"
-export { type BorderChars, type BorderKind, borderChars, type ClipRect, drawBorder } from "./border.js"
+export {
+	type BorderChars,
+	type BorderKind,
+	borderChars,
+	type ClipRect,
+	drawBorder,
+	type TableBorderChars,
+	tableBorderChars,
+} from "./border.js"
 export { type FlexAlignment, type FlexAxis, type FlexMeasureResult, layoutFlex, measureFlex } from "./flex-layout.js"
 export { type Padding, type PaddingInput, resolvePadding } from "./padding.js"
 export {