@effect-tui/react 0.1.1 → 0.1.4

package/src/hosts/text.ts

@@ -1,175 +1,209 @@
-import { displayWidth, parseColor, type CellBuffer, type Palette, type ColorLike } from "@effect-tui/core"
+import { displayWidth, type CellBuffer, type Palette, type Color } from "@effect-tui/core"
 import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
-import { BaseHost } from "./base.js"
+import { BaseHost, getInheritedBg } from "./base.js"
+import { resolveBgStyle, styleIdFromProps } from "../utils/index.js"
 
 export interface TextProps extends CommonProps {
-  fg?: ColorLike
-  bg?: ColorLike
-  bold?: boolean
-  italic?: boolean
-  underline?: boolean
-  inverse?: boolean
-  /** If true, wrap text to multiple lines (default: false, text is truncated) */
-  wrap?: boolean
+	fg?: Color
+	bg?: Color
+	bold?: boolean
+	italic?: boolean
+	underline?: boolean
+	inverse?: boolean
+	/** If true, wrap text to multiple lines (default: false, text is truncated) */
+	wrap?: boolean
 }
 
 export class TextHost extends BaseHost {
-  fg?: ColorLike
-  bg?: ColorLike
-  bold = false
-  italic = false
-  underline = false
-  inverse = false
-  wrap = false // Default: truncate (no wrap)
-
-  // Cache wrapped lines between measure() and render()
-  private cachedLines: string[] | null = null
-  private cachedWidth = 0
-
-  constructor(props: TextProps, ctx: HostContext) {
-    super("text", props, ctx)
-    this.updateProps(props)
-  }
-
-  /** Get text content from RawTextHost children */
-  private getContent(): string {
-    return this.children
-      .filter((c): c is RawTextHost => c instanceof RawTextHost)
-      .map((c) => c.content)
-      .join("")
-  }
-
-  measure(maxW: number, maxH: number): Size {
-    const content = this.getContent()
-    const rawLines = content.split("\n")
-
-    if (this.wrap) {
-      // Wrap mode: may span multiple lines. Cache result for render()
-      this.cachedLines = rawLines.flatMap((line, idx) =>
-        idx < rawLines.length - 1 ? [...this.wrapText(line, maxW), ""] : this.wrapText(line, maxW),
-      )
-      this.cachedWidth = maxW
-      const w = this.cachedLines.reduce((max, line) => Math.max(max, displayWidth(line)), 0)
-      return { w, h: Math.min(this.cachedLines.length, maxH) }
-    }
-
-    // Default: respect explicit newlines but do not wrap long words
-    this.cachedLines = null
-    const widths = rawLines.map((line) => Math.min(displayWidth(line), maxW))
-    const w = widths.reduce((max, val) => Math.max(max, val), 0)
-    const h = Math.min(rawLines.length, maxH)
-    return { w, h }
-  }
-
-  /** Wrap text to fit within maxWidth */
-  private wrapText(text: string, maxWidth: number): string[] {
-    const result: string[] = []
-    for (const rawLine of text.split("\n")) {
-      if (rawLine === "") {
-        result.push("")
-        continue
-      }
-      let line = ""
-      let lineW = 0
-      for (const ch of rawLine) {
-        const w = displayWidth(ch)
-        if (lineW + w > maxWidth && line.length > 0) {
-          result.push(line)
-          line = ch
-          lineW = w
-        } else {
-          line += ch
-          lineW += w
-        }
-      }
-      if (line.length > 0) result.push(line)
-    }
-    return result.length > 0 ? result : [""]
-  }
-
-  override layout(rect: Rect): void {
-    super.layout(rect)
-    // Layout children (RawTextHost nodes) at same position
-    for (const child of this.children) {
-      child.layout(rect)
-    }
-  }
-
-  render(buffer: CellBuffer, palette: Palette): void {
-    if (!this.rect) return
-
-    const style: Record<string, unknown> = {}
-    if (this.fg !== undefined) style.fg = typeof this.fg === "string" ? parseColor(this.fg) : this.fg
-    if (this.bg !== undefined) style.bg = typeof this.bg === "string" ? parseColor(this.bg) : this.bg
-    if (this.bold) style.bold = true
-    if (this.italic) style.italic = true
-    if (this.underline) style.underline = true
-    if (this.inverse) style.inverse = true
-
-    const styleId = palette.id(style)
-    const content = this.getContent()
-    const rawLines = content.split("\n")
-
-    if (this.wrap) {
-      // Wrap mode: use cached lines if width matches, otherwise rewrap
-      const rectW = this.rect.w
-      const lines =
-        this.cachedLines && this.cachedWidth === rectW
-          ? this.cachedLines
-          : rawLines.flatMap((line, idx) =>
-              idx < rawLines.length - 1 ? [...this.wrapText(line, rectW), ""] : this.wrapText(line, rectW),
-            )
-      for (let i = 0; i < lines.length && i < this.rect.h; i++) {
-        buffer.drawText(this.rect.x, this.rect.y + i, lines[i], styleId, this.rect.w)
-      }
-      return
-    }
-
-    // Default: render explicit newlines, clip to width/height
-    const maxLines = Math.min(this.rect.h, rawLines.length)
-    for (let i = 0; i < maxLines; i++) {
-      buffer.drawText(this.rect.x, this.rect.y + i, rawLines[i], styleId, this.rect.w)
-    }
-  }
-
-  override updateProps(props: Record<string, unknown>): void {
-    super.updateProps(props)
-    // Always assign; props may be undefined when attribute is removed
-    this.fg = props.fg as ColorLike | undefined
-    this.bg = props.bg as ColorLike | undefined
-    this.bold = Boolean(props.bold)
-    this.italic = Boolean(props.italic)
-    this.underline = Boolean(props.underline)
-    this.inverse = Boolean(props.inverse)
-    this.wrap = Boolean(props.wrap)
-  }
+	fg?: Color
+	bg?: Color
+	bold = false
+	italic = false
+	underline = false
+	inverse = false
+	wrap = false // Default: truncate (no wrap)
+
+	// Cache wrapped lines between measure() and render()
+	private cachedLines: string[] | null = null
+	private cachedWidth = 0
+	// Cache content to avoid rescanning children each frame
+	private cachedContent: string | null = null
+
+	constructor(props: TextProps, ctx: HostContext) {
+		super("text", props, ctx)
+		this.updateProps(props)
+	}
+
+	/** Get text content from RawTextHost children (cached between measure and render) */
+	private getContent(): string {
+		if (this.cachedContent !== null) {
+			return this.cachedContent
+		}
+		this.cachedContent = this.children
+			.filter((c): c is RawTextHost => c instanceof RawTextHost)
+			.map((c) => c.content)
+			.join("")
+		return this.cachedContent
+	}
+
+	/** Invalidate content cache when children change */
+	private invalidateContent(): void {
+		this.cachedContent = null
+		this.cachedLines = null
+	}
+
+	measure(maxW: number, maxH: number): Size {
+		// Invalidate content cache at start of measure (will be recomputed on demand)
+		this.invalidateContent()
+		const content = this.getContent()
+		const rawLines = content.split("\n")
+
+		if (this.wrap) {
+			// Wrap mode: may span multiple lines. Cache result for render()
+			this.cachedLines = rawLines.flatMap((line, idx) =>
+				idx < rawLines.length - 1 ? [...this.wrapText(line, maxW), ""] : this.wrapText(line, maxW),
+			)
+			this.cachedWidth = maxW
+			const w = this.cachedLines.reduce((max, line) => Math.max(max, displayWidth(line)), 0)
+			return { w, h: Math.min(this.cachedLines.length, maxH) }
+		}
+
+		// Default: respect explicit newlines but do not wrap long words
+		this.cachedLines = null
+		const widths = rawLines.map((line) => Math.min(displayWidth(line), maxW))
+		const w = widths.reduce((max, val) => Math.max(max, val), 0)
+		const h = Math.min(rawLines.length, maxH)
+		return { w, h }
+	}
+
+	/** Wrap text to fit within maxWidth */
+	private wrapText(text: string, maxWidth: number): string[] {
+		const result: string[] = []
+		for (const rawLine of text.split("\n")) {
+			if (rawLine === "") {
+				result.push("")
+				continue
+			}
+			let line = ""
+			let lineW = 0
+			for (const ch of rawLine) {
+				const w = displayWidth(ch)
+				if (lineW + w > maxWidth && line.length > 0) {
+					result.push(line)
+					line = ch
+					lineW = w
+				} else {
+					line += ch
+					lineW += w
+				}
+			}
+			if (line.length > 0) result.push(line)
+		}
+		return result.length > 0 ? result : [""]
+	}
+
+	override layout(rect: Rect): void {
+		super.layout(rect)
+		// Layout children (RawTextHost nodes) at same position
+		for (const child of this.children) {
+			child.layout(rect)
+		}
+	}
+
+	render(buffer: CellBuffer, palette: Palette): void {
+		if (!this.rect) return
+
+		// If text has no bg, inherit from parent box for proper highlight rendering
+		const inheritedBg: Color | undefined = this.bg ?? getInheritedBg(this.parent)
+		const { value: bgValue, styleId: bgStyleId } = resolveBgStyle(palette, inheritedBg)
+
+		const styleId = styleIdFromProps(palette, {
+			fg: this.fg,
+			bg: inheritedBg,
+			bold: this.bold,
+			italic: this.italic,
+			underline: this.underline,
+			inverse: this.inverse,
+		})
+		const content = this.getContent()
+		const rawLines = content.split("\n")
+
+		if (this.wrap) {
+			// Wrap mode: use cached lines if width matches, otherwise rewrap
+			const rectW = this.rect.w
+			const lines =
+				this.cachedLines && this.cachedWidth === rectW
+					? this.cachedLines
+					: rawLines.flatMap((line, idx) =>
+							idx < rawLines.length - 1 ? [...this.wrapText(line, rectW), ""] : this.wrapText(line, rectW),
+						)
+			const visibleLines = Math.min(lines.length, this.rect.h)
+			// Explicitly paint background under text lines to clear stale styles (e.g., selection highlights).
+			if (bgValue !== undefined && visibleLines > 0) {
+				buffer.fillRect(this.rect.x, this.rect.y, this.rect.w, visibleLines, " ".codePointAt(0)!, bgStyleId)
+			}
+			for (let i = 0; i < lines.length && i < this.rect.h; i++) {
+				// Pass actual text width to avoid overwriting parent's bg with padding
+				const lineWidth = Math.min(displayWidth(lines[i]), this.rect.w)
+				buffer.drawText(this.rect.x, this.rect.y + i, lines[i], styleId, lineWidth)
+			}
+			return
+		}
+
+		// Default: render explicit newlines, clip to width/height
+		const maxLines = Math.min(this.rect.h, rawLines.length)
+		if (bgValue !== undefined && maxLines > 0) {
+			buffer.fillRect(this.rect.x, this.rect.y, this.rect.w, maxLines, " ".codePointAt(0)!, bgStyleId)
+		}
+		for (let i = 0; i < maxLines; i++) {
+			// Pass actual text width to avoid overwriting parent's bg with padding
+			const lineWidth = Math.min(displayWidth(rawLines[i]), this.rect.w)
+			buffer.drawText(this.rect.x, this.rect.y + i, rawLines[i], styleId, lineWidth)
+		}
+	}
+
+	override updateProps(props: Record<string, unknown>): void {
+		super.updateProps(props)
+		// Always assign; props may be undefined when attribute is removed
+		this.fg = props.fg as Color | undefined
+		this.bg = props.bg as Color | undefined
+		this.bold = Boolean(props.bold)
+		this.italic = Boolean(props.italic)
+		this.underline = Boolean(props.underline)
+		this.inverse = Boolean(props.inverse)
+		this.wrap = Boolean(props.wrap)
+	}
 }
 
 /** Special host for raw text nodes (React text children) */
 export class RawTextHost extends BaseHost {
-  content = ""
-
-  constructor(text: string, ctx: HostContext) {
-    super("rawtext", {}, ctx)
-    this.content = text
-  }
-
-  measure(maxW: number, _maxH: number): Size {
-    const w = Math.min(displayWidth(this.content), maxW)
-    return { w, h: 1 }
-  }
-
-  render(buffer: CellBuffer, palette: Palette): void {
-    if (!this.rect) return
-    const styleId = palette.id({})
-    buffer.drawText(this.rect.x, this.rect.y, this.content, styleId, this.rect.w)
-  }
-
-  updateText(text: string): void {
-    this.content = text
-  }
-
-  override updateProps(_props: Record<string, unknown>): void {
-    // Raw text has no props
-  }
+	content = ""
+
+	constructor(text: string, ctx: HostContext) {
+		super("rawtext", {}, ctx)
+		this.content = text
+	}
+
+	measure(maxW: number, _maxH: number): Size {
+		const w = Math.min(displayWidth(this.content), maxW)
+		return { w, h: 1 }
+	}
+
+	render(buffer: CellBuffer, palette: Palette): void {
+		if (!this.rect) return
+		// Inherit bg from parent for proper highlight rendering
+		const inheritedBg = getInheritedBg(this.parent)
+		const styleId = styleIdFromProps(palette, { bg: inheritedBg })
+		// Pass actual text width to avoid overwriting parent's bg with padding
+		const textWidth = Math.min(displayWidth(this.content), this.rect.w)
+		buffer.drawText(this.rect.x, this.rect.y, this.content, styleId, textWidth)
+	}
+
+	updateText(text: string): void {
+		this.content = text
+	}
+
+	override updateProps(_props: Record<string, unknown>): void {
+		// Raw text has no props
+	}
 }

package/src/hosts/vstack.ts

@@ -1,64 +1,16 @@
-import type { CellBuffer, Palette } from "@effect-tui/core"
-import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
-import { BaseHost } from "./base.js"
-import { measureFlex, layoutFlex, type FlexAlignment } from "../utils/index.js"
+import type { HostContext, CommonProps } from "../reconciler/types.js"
+import { FlexContainerHost, type FlexContainerProps } from "./flex-container.js"
 
 export interface VStackProps extends CommonProps {
-  spacing?: number
-  alignment?: "leading" | "center" | "trailing"
+	spacing?: number
+	alignment?: "leading" | "center" | "trailing"
 }
 
-// Map VStack alignment names to generic flex alignment
-function toFlexAlignment(alignment: "leading" | "center" | "trailing"): FlexAlignment {
-  switch (alignment) {
-    case "leading":
-      return "start"
-    case "center":
-      return "center"
-    case "trailing":
-      return "end"
-  }
-}
-
-export class VStackHost extends BaseHost {
-  spacing = 0
-  alignment: "leading" | "center" | "trailing" = "leading"
-  private cachedSizes: Size[] = []
-
-  constructor(props: VStackProps, ctx: HostContext) {
-    super("vstack", props, ctx)
-    this.updateProps(props)
-  }
-
-  measure(maxW: number, maxH: number): Size {
-    const result = measureFlex("vertical", this.children, this.spacing, maxH, maxW)
-    this.cachedSizes = result.sizes
-    return result.totalSize
-  }
-
-  override layout(rect: Rect): void {
-    super.layout(rect)
-    const stretchCross = this.alignment === "leading"
-    layoutFlex(
-      "vertical",
-      this.children,
-      this.cachedSizes,
-      rect,
-      this.spacing,
-      toFlexAlignment(this.alignment),
-      stretchCross,
-    )
-  }
-
-  render(buffer: CellBuffer, palette: Palette): void {
-    for (const child of this.children) {
-      child.render(buffer, palette)
-    }
-  }
-
-  override updateProps(props: Record<string, unknown>): void {
-    super.updateProps(props)
-    if (props.spacing !== undefined) this.spacing = props.spacing as number
-    if (props.alignment !== undefined) this.alignment = props.alignment as "leading" | "center" | "trailing"
-  }
+/**
+ * VStackHost lays out children vertically with optional spacing and cross-axis alignment.
+ */
+export class VStackHost extends FlexContainerHost<"vertical"> {
+	constructor(props: VStackProps, ctx: HostContext) {
+		super("vertical", "vstack", props as FlexContainerProps<"vertical">, ctx, "leading")
+	}
 }

package/src/hosts/zstack.ts

@@ -3,75 +3,87 @@ import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.j
 import { BaseHost } from "./base.js"
 
 export interface ZStackProps extends CommonProps {
-  alignment?: { h?: "leading" | "center" | "trailing"; v?: "top" | "center" | "bottom" }
+	alignment?: { h?: "leading" | "center" | "trailing"; v?: "top" | "center" | "bottom" }
 }
 
 // Overlay children in the same rect, honoring alignment for each child.
 export class ZStackHost extends BaseHost {
-  alignmentH: "leading" | "center" | "trailing" = "center"
-  alignmentV: "top" | "center" | "bottom" = "center"
-  private cachedSizes: Size[] = []
-
-  constructor(props: ZStackProps, ctx: HostContext) {
-    super("zstack", props, ctx)
-    this.updateProps(props)
-  }
-
-  measure(maxW: number, maxH: number): Size {
-    let maxChildW = 0
-    let maxChildH = 0
-    this.cachedSizes = []
-
-    for (const child of this.children) {
-      const size = child.measure(maxW, maxH)
-      this.cachedSizes.push(size)
-      maxChildW = Math.max(maxChildW, size.w)
-      maxChildH = Math.max(maxChildH, size.h)
-    }
-
-    return {
-      w: Math.min(maxW, maxChildW),
-      h: Math.min(maxH, maxChildH),
-    }
-  }
-
-  override layout(rect: Rect): void {
-    super.layout(rect)
-
-    for (let i = 0; i < this.children.length; i++) {
-      const child = this.children[i]
-      const size = this.cachedSizes[i] ?? child.measure(rect.w, rect.h)
-
-      let x = rect.x
-      let y = rect.y
-
-      if (this.alignmentH === "center") x += Math.floor((rect.w - size.w) / 2)
-      else if (this.alignmentH === "trailing") x += Math.max(0, rect.w - size.w)
-
-      if (this.alignmentV === "center") y += Math.floor((rect.h - size.h) / 2)
-      else if (this.alignmentV === "bottom") y += Math.max(0, rect.h - size.h)
-
-      child.layout({
-        x,
-        y,
-        w: Math.min(rect.w, size.w),
-        h: Math.min(rect.h, size.h),
-      })
-    }
-  }
-
-  render(buffer: CellBuffer, palette: Palette): void {
-    for (const child of this.children) {
-      child.render(buffer, palette)
-    }
-  }
-
-  override updateProps(props: Record<string, unknown>): void {
-    super.updateProps(props)
-    if (props.alignment !== undefined) {
-      const a = props.alignment as ZStackProps["alignment"]
-      if (a?.h) this.alignmentH = a.h
-      if (a?.v) this.alignmentV = a.v
-    }
-  }
+	alignmentH: "leading" | "center" | "trailing" = "center"
+	alignmentV: "top" | "center" | "bottom" = "center"
+	private cachedSizes: Size[] = []
+
+	constructor(props: ZStackProps, ctx: HostContext) {
+		super("zstack", props, ctx)
+		this.updateProps(props)
+	}
+
+	measure(maxW: number, maxH: number): Size {
+		// Apply frame constraints to what we propose to children
+		const constrained = this.constrainProposal(maxW, maxH)
+
+		let maxChildW = 0
+		let maxChildH = 0
+		this.cachedSizes = []
+
+		for (const child of this.children) {
+			const size = child.measure(constrained.w, constrained.h)
+			this.cachedSizes.push(size)
+			maxChildW = Math.max(maxChildW, size.w)
+			maxChildH = Math.max(maxChildH, size.h)
+		}
+
+		const naturalSize = {
+			w: Math.min(constrained.w, maxChildW),
+			h: Math.min(constrained.h, maxChildH),
+		}
+
+		// Apply frame constraints to what we report to parent
+		return this.constrainResult(naturalSize)
+	}
+
+	override layout(rect: Rect): void {
+		super.layout(rect)
+
+		for (let i = 0; i < this.children.length; i++) {
+			const child = this.children[i]
+			const size = this.cachedSizes[i] ?? child.measure(rect.w, rect.h)
+
+			let x = rect.x
+			let y = rect.y
+
+			if (this.alignmentH === "center") x += Math.floor((rect.w - size.w) / 2)
+			else if (this.alignmentH === "trailing") x += Math.max(0, rect.w - size.w)
+
+			if (this.alignmentV === "center") y += Math.floor((rect.h - size.h) / 2)
+			else if (this.alignmentV === "bottom") y += Math.max(0, rect.h - size.h)
+
+			child.layout({
+				x,
+				y,
+				w: Math.min(rect.w, size.w),
+				h: Math.min(rect.h, size.h),
+			})
+		}
+	}
+
+	render(buffer: CellBuffer, palette: Palette): void {
+		for (const child of this.children) {
+			if (child.rect) {
+				buffer.withClip(child.rect.x, child.rect.y, child.rect.w, child.rect.h, () => {
+					child.render(buffer, palette)
+				})
+			} else {
+				child.render(buffer, palette)
+			}
+		}
+	}
+
+	override updateProps(props: Record<string, unknown>): void {
+		super.updateProps(props)
+		if (props.alignment !== undefined) {
+			const a = props.alignment as ZStackProps["alignment"]
+			if (a?.h) this.alignmentH = a.h
+			if (a?.v) this.alignmentV = a.v
+		}
+	}
 }