@effect-tui/react 0.1.1 → 0.1.4

package/src/hosts/box.ts

@@ -1,105 +1,126 @@
-import type { CellBuffer, Palette, ColorValue } from "@effect-tui/core"
+import type { CellBuffer, Palette, Color } from "@effect-tui/core"
 import { Colors } from "@effect-tui/core"
 import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
-import { BaseHost } from "./base.js"
-import { type BorderKind, borderChars, drawBorder, type Padding, type PaddingInput, resolvePadding } from "../utils/index.js"
+import { getInheritedBg } from "./base.js"
+import { SingleChildHost } from "./single-child.js"
+import {
+	type BorderKind,
+	borderChars,
+	drawBorder,
+	type Padding,
+	type PaddingInput,
+	resolvePadding,
+	resolveBgStyle,
+	toColorValue,
+} from "../utils/index.js"
 
 export type { BorderKind }
 
 export interface BoxProps extends CommonProps {
-  padding?: PaddingInput
-  border?: BorderKind
-  borderColor?: ColorValue
-  bg?: ColorValue
+	padding?: PaddingInput
+	border?: BorderKind
+	borderColor?: Color
+	bg?: Color
 }
 
-export class BoxHost extends BaseHost {
-  padding: Padding = { top: 0, right: 0, bottom: 0, left: 0 }
-  border: BorderKind = "none"
-  borderColor?: ColorValue
-  bg?: ColorValue
-
-  constructor(props: BoxProps, ctx: HostContext) {
-    super("box", props, ctx)
-    this.updateProps(props)
-  }
-
-  private get borderThickness(): number {
-    return this.border === "none" ? 0 : 1
-  }
-
-  private get insetX(): number {
-    return this.borderThickness + this.padding.left + this.padding.right + this.borderThickness
-  }
-
-  private get insetY(): number {
-    return this.borderThickness + this.padding.top + this.padding.bottom + this.borderThickness
-  }
-
-  measure(maxW: number, maxH: number): Size {
-    const innerMaxW = Math.max(0, maxW - this.insetX)
-    const innerMaxH = Math.max(0, maxH - this.insetY)
-
-    // Measure single child (box should have at most one child)
-    let childW = 0
-    let childH = 0
-    if (this.children.length > 0) {
-      const childSize = this.children[0].measure(innerMaxW, innerMaxH)
-      childW = childSize.w
-      childH = childSize.h
-    }
-
-    return {
-      w: childW + this.insetX,
-      h: childH + this.insetY,
-    }
-  }
-
-  override layout(rect: Rect): void {
-    super.layout(rect)
-
-    const t = this.borderThickness
-    const innerRect: Rect = {
-      x: rect.x + t + this.padding.left,
-      y: rect.y + t + this.padding.top,
-      w: Math.max(0, rect.w - this.insetX),
-      h: Math.max(0, rect.h - this.insetY),
-    }
-
-    // Layout single child
-    if (this.children.length > 0) {
-      this.children[0].layout(innerRect)
-    }
-  }
-
-  render(buffer: CellBuffer, palette: Palette): void {
-    if (!this.rect) return
-    const { x, y, w, h } = this.rect
-
-    // Draw background if set
-    if (this.bg !== undefined) {
-      const bgStyle = palette.id({ bg: this.bg })
-      buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyle)
-    }
-
-    // Draw border
-    if (this.border !== "none" && w >= 2 && h >= 2) {
-      const chars = borderChars(this.border)
-      const borderStyle = palette.id({ fg: this.borderColor ?? Colors.gray(8) })
-      drawBorder(buffer, x, y, w, h, chars, borderStyle)
-    }
-
-    // Render children
-    for (const child of this.children) {
-      child.render(buffer, palette)
-    }
-  }
-
-  override updateProps(props: Record<string, unknown>): void {
-    super.updateProps(props)
-    if (props.padding !== undefined) this.padding = resolvePadding(props.padding as BoxProps["padding"])
-    if (props.border !== undefined) this.border = props.border as BorderKind
-    if (props.borderColor !== undefined) this.borderColor = props.borderColor as ColorValue
-    if (props.bg !== undefined) this.bg = props.bg as ColorValue
-  }
+export class BoxHost extends SingleChildHost {
+	padding: Padding = { top: 0, right: 0, bottom: 0, left: 0 }
+	border: BorderKind = "none"
+	borderColor?: Color
+	bg?: Color
+
+	constructor(props: BoxProps, ctx: HostContext) {
+		super("box", props, ctx)
+		this.updateProps(props)
+	}
+
+	private get borderThickness(): number {
+		return this.border === "none" ? 0 : 1
+	}
+
+	private get insetX(): number {
+		return this.borderThickness + this.padding.left + this.padding.right + this.borderThickness
+	}
+
+	private get insetY(): number {
+		return this.borderThickness + this.padding.top + this.padding.bottom + this.borderThickness
+	}
+
+	measure(maxW: number, maxH: number): Size {
+		// Apply frame constraints first
+		const constrained = this.constrainProposal(maxW, maxH)
+
+		const innerMaxW = Math.max(0, constrained.w - this.insetX)
+		const innerMaxH = Math.max(0, constrained.h - this.insetY)
+
+		// Measure single child (box should have at most one child)
+		let childW = 0
+		let childH = 0
+		const child = this.child
+		if (child) {
+			const childSize = child.measure(innerMaxW, innerMaxH)
+			childW = childSize.w
+			childH = childSize.h
+		}
+
+		const naturalSize = {
+			w: childW + this.insetX,
+			h: childH + this.insetY,
+		}
+
+		// Apply frame constraints to result
+		return this.constrainResult(naturalSize)
+	}
+
+	override layout(rect: Rect): void {
+		super.layout(rect)
+
+		const t = this.borderThickness
+		const innerRect: Rect = {
+			x: rect.x + t + this.padding.left,
+			y: rect.y + t + this.padding.top,
+			w: Math.max(0, rect.w - this.insetX),
+			h: Math.max(0, rect.h - this.insetY),
+		}
+
+		// Layout single child
+		const child = this.child
+		if (child) {
+			child.layout(innerRect)
+		}
+	}
+
+	render(buffer: CellBuffer, palette: Palette): void {
+		if (!this.rect) return
+		const { x, y, w, h } = this.rect
+
+		// If no explicit bg, inherit from parent (so child boxes are transparent over parents)
+		const rawBg: Color | undefined = this.bg ?? getInheritedBg(this.parent)
+
+		// Always clear our rect to ensure stale backgrounds are removed.
+		const { styleId: bgStyleId } = resolveBgStyle(palette, rawBg)
+		buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
+
+		// Draw border
+		if (this.border !== "none" && w >= 2 && h >= 2) {
+			const chars = borderChars(this.border)
+			const borderFg = toColorValue(this.borderColor) ?? Colors.gray(8)
+			const borderStyle = palette.id({ fg: borderFg })
+			drawBorder(buffer, x, y, w, h, chars, borderStyle)
+		}
+
+		// Render single child
+		const child = this.child
+		if (child) {
+			child.render(buffer, palette)
+		}
+	}
+
+	override updateProps(props: Record<string, unknown>): void {
+		super.updateProps(props)
+		this.padding = resolvePadding(props.padding as BoxProps["padding"])
+		this.border = (props.border as BorderKind | undefined) ?? "none"
+		this.borderColor = props.borderColor as Color | undefined
+		this.bg = props.bg as Color | undefined
+	}
 }

package/src/hosts/canvas.ts

@@ -1,155 +1,151 @@
-import type { CellBuffer, Palette, ColorValue } from "@effect-tui/core"
+import type { CellBuffer, Palette, Color } from "@effect-tui/core"
 import { Colors } from "@effect-tui/core"
 import type { HostContext, Size, CommonProps } from "../reconciler/types.js"
 import { BaseHost } from "./base.js"
-import { type BorderKind, borderChars, drawBorder } from "../utils/index.js"
+import { type BorderKind, borderChars, drawBorder, resolveBgStyle, styleIdFromProps, toColorValue } from "../utils/index.js"
 
 export type { BorderKind }
 
 export interface DrawContext {
-  /** Canvas width in cells */
-  width: number
-  /** Canvas height in cells */
-  height: number
-
-  /** Draw text at position */
-  text(x: number, y: number, str: string, opts?: { fg?: ColorValue; bg?: ColorValue }): void
-
-  /** Fill rectangle with character */
-  fill(x: number, y: number, w: number, h: number, char?: string, opts?: { fg?: ColorValue; bg?: ColorValue }): void
-
-  /** Draw box with optional border */
-  box(
-    x: number,
-    y: number,
-    w: number,
-    h: number,
-    opts?: {
-      border?: BorderKind
-      borderColor?: ColorValue
-      bg?: ColorValue
-      fg?: ColorValue
-    },
-  ): void
-
-  /** Clear entire canvas */
-  clear(): void
+	/** Canvas width in cells */
+	width: number
+	/** Canvas height in cells */
+	height: number
+
+	/** Draw text at position */
+	text(x: number, y: number, str: string, opts?: { fg?: Color; bg?: Color }): void
+
+	/** Fill rectangle with character */
+	fill(x: number, y: number, w: number, h: number, char?: string, opts?: { fg?: Color; bg?: Color }): void
+
+	/** Draw box with optional border */
+	box(
+		x: number,
+		y: number,
+		w: number,
+		h: number,
+		opts?: {
+			border?: BorderKind
+			borderColor?: Color
+			bg?: Color
+			fg?: Color
+		},
+	): void
+
+	/** Clear entire canvas */
+	clear(): void
 }
 
 export interface CanvasProps extends CommonProps {
-  /** Draw function called each render */
-  draw: (ctx: DrawContext) => void
-  /** Fixed width (default: fill available) */
-  width?: number
-  /** Fixed height (default: fill available) */
-  height?: number
+	/** Draw function called each render */
+	draw: (ctx: DrawContext) => void
+	/** Fixed width (default: fill available) */
+	width?: number
+	/** Fixed height (default: fill available) */
+	height?: number
 }
 
 export class CanvasHost extends BaseHost {
-  draw: CanvasProps["draw"] = () => {}
-  fixedWidth?: number
-  fixedHeight?: number
-
-  constructor(props: CanvasProps, ctx: HostContext) {
-    super("canvas", props, ctx)
-    this.updateProps(props)
-  }
-
-  measure(maxW: number, maxH: number): Size {
-    return {
-      w: this.fixedWidth ?? maxW,
-      h: this.fixedHeight ?? maxH,
-    }
-  }
-
-  render(buffer: CellBuffer, palette: Palette): void {
-    if (!this.rect) return
-    const { x: ox, y: oy, w, h } = this.rect
-
-    // Create draw context
-    const ctx: DrawContext = {
-      width: w,
-      height: h,
-
-      text: (x, y, str, opts) => {
-        const px = Math.round(ox + x)
-        const py = Math.round(oy + y)
-        if (py < oy || py >= oy + h) return
-        const style = palette.id({ fg: opts?.fg, bg: opts?.bg })
-        let col = px
-        for (const char of str) {
-          if (col >= ox + w) break
-          if (col >= ox) {
-            buffer.drawCP(col, py, char.codePointAt(0)!, style)
-          }
-          col++
-        }
-      },
-
-      fill: (x, y, fw, fh, char = " ", opts) => {
-        const px = Math.round(ox + x)
-        const py = Math.round(oy + y)
-        const cp = char.codePointAt(0)!
-        const style = palette.id({ fg: opts?.fg, bg: opts?.bg })
-        for (let row = 0; row < fh; row++) {
-          const yy = py + row
-          if (yy < oy || yy >= oy + h) continue
-          for (let col = 0; col < fw; col++) {
-            const xx = px + col
-            if (xx < ox || xx >= ox + w) continue
-            buffer.drawCP(xx, yy, cp, style)
-          }
-        }
-      },
-
-      box: (x, y, bw, bh, opts) => {
-        const px = Math.round(ox + x)
-        const py = Math.round(oy + y)
-        const border = opts?.border ?? "none"
-        const bgStyle = opts?.bg !== undefined ? palette.id({ bg: opts.bg }) : undefined
-
-        // Fill background (with clipping)
-        if (bgStyle !== undefined) {
-          for (let row = 0; row < bh; row++) {
-            const yy = py + row
-            if (yy < oy || yy >= oy + h) continue
-            for (let col = 0; col < bw; col++) {
-              const xx = px + col
-              if (xx < ox || xx >= ox + w) continue
-              buffer.drawCP(xx, yy, " ".codePointAt(0)!, bgStyle)
-            }
-          }
-        }
-
-        // Draw border (with clipping)
-        if (border !== "none" && bw >= 2 && bh >= 2) {
-          const chars = borderChars(border)
-          const borderStyle = palette.id({ fg: opts?.borderColor ?? opts?.fg ?? Colors.gray(8) })
-          drawBorder(buffer, px, py, bw, bh, chars, borderStyle, { ox, oy, w, h })
-        }
-      },
-
-      clear: () => {
-        const style = palette.id({})
-        for (let row = 0; row < h; row++) {
-          for (let col = 0; col < w; col++) {
-            buffer.drawCP(ox + col, oy + row, " ".codePointAt(0)!, style)
-          }
-        }
-      },
-    }
-
-    // Call user's draw function
-    this.draw(ctx)
-  }
-
-  override updateProps(props: Record<string, unknown>): void {
-    super.updateProps(props)
-    if (props.draw !== undefined) {
-      this.draw = props.draw as CanvasProps["draw"]
-      this.ctx.requestRender() // trigger repaint when draw function changes
-    }
-    if (props.width !== undefined) this.fixedWidth = props.width as number
-    if (props.height !== undefined) this.fixedHeight = props.height as number
-  }
+	draw: CanvasProps["draw"] = () => {}
+	fixedWidth?: number
+	fixedHeight?: number
+
+	constructor(props: CanvasProps, ctx: HostContext) {
+		super("canvas", props, ctx)
+		this.updateProps(props)
+	}
+
+	measure(maxW: number, maxH: number): Size {
+		return {
+			w: this.fixedWidth ?? maxW,
+			h: this.fixedHeight ?? maxH,
+		}
+	}
+
+	render(buffer: CellBuffer, palette: Palette): void {
+		if (!this.rect) return
+		const { x: ox, y: oy, w, h } = this.rect
+
+		// Create draw context
+		const ctx: DrawContext = {
+			width: w,
+			height: h,
+
+			text: (x, y, str, opts) => {
+				const px = Math.round(ox + x)
+				const py = Math.round(oy + y)
+				const style = styleIdFromProps(palette, { fg: opts?.fg, bg: opts?.bg })
+				let col = px
+				for (const char of str) {
+					if (col >= ox + w) break
+					buffer.drawCP(col, py, char.codePointAt(0)!, style)
+					col++
+				}
+			},
+
+			fill: (x, y, fw, fh, char = " ", opts) => {
+				const px = Math.round(ox + x)
+				const py = Math.round(oy + y)
+				const cp = char.codePointAt(0)!
+				const style = styleIdFromProps(palette, { fg: opts?.fg, bg: opts?.bg })
+				for (let row = 0; row < fh; row++) {
+					const yy = py + row
+					for (let col = 0; col < fw; col++) {
+						const xx = px + col
+						buffer.drawCP(xx, yy, cp, style)
+					}
+				}
+			},
+
+			box: (x, y, bw, bh, opts) => {
+				const px = Math.round(ox + x)
+				const py = Math.round(oy + y)
+				const border = opts?.border ?? "none"
+				const { value: bgValue, styleId: bgStyleId } = resolveBgStyle(palette, opts?.bg)
+
+				// Fill background (with clipping)
+				if (bgValue !== undefined) {
+					for (let row = 0; row < bh; row++) {
+						const yy = py + row
+						for (let col = 0; col < bw; col++) {
+							const xx = px + col
+							buffer.drawCP(xx, yy, " ".codePointAt(0)!, bgStyleId)
+						}
+					}
+				}
+
+				// 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 borderStyle = palette.id({ fg: borderFg })
+					drawBorder(buffer, px, py, bw, bh, chars, borderStyle, { ox, oy, w, h })
+				}
+			},
+
+			clear: () => {
+				const style = palette.id({})
+				for (let row = 0; row < h; row++) {
+					for (let col = 0; col < w; col++) {
+						buffer.drawCP(ox + col, oy + row, " ".codePointAt(0)!, style)
+					}
+				}
+			},
+		}
+
+		buffer.withClip(ox, oy, w, h, () => {
+			// Call user's draw function within the canvas clip region
+			this.draw(ctx)
+		})
+	}
+
+	override updateProps(props: Record<string, unknown>): void {
+		super.updateProps(props)
+		if (props.draw !== undefined) {
+			this.draw = props.draw as CanvasProps["draw"]
+			this.ctx.requestRender() // trigger repaint when draw function changes
+		}
+		if (props.width !== undefined) this.fixedWidth = props.width as number
+		if (props.height !== undefined) this.fixedHeight = props.height as number
+	}
 }