@effect-tui/react 0.1.1 → 0.1.4

package/src/hosts/codeblock.ts

@@ -1,145 +1,129 @@
-import {
-  Colors,
-  displayWidth,
-  parseColor,
-  type CellBuffer,
-  type ColorLike,
-  type Palette,
-  type ColorValue,
-} from "@effect-tui/core"
+import { Colors, displayWidth, type CellBuffer, type Color, type Palette } from "@effect-tui/core"
 import type { HighlightLine } from "../highlight.js"
 import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
 import { BaseHost } from "./base.js"
-import { type Padding, type PaddingInput, resolvePadding } from "../utils/index.js"
+import { type Padding, type PaddingInput, resolvePadding, resolveBgStyle, styleIdFromProps } from "../utils/index.js"
 
 export interface CodeBlockProps extends CommonProps {
-  lines: HighlightLine[]
-  lineNumbers?: boolean
-  padding?: PaddingInput
-  background?: ColorLike
-  lineNumberColor?: ColorLike
-  lineNumberBackground?: ColorLike
-}
-
-function normalizeColor(c: unknown): ColorValue | undefined {
-  if (c === undefined || c === null) return undefined
-  if (typeof c === "number" || typeof c === "object") return c as ColorValue
-  return parseColor(c as string)
+	lines: HighlightLine[]
+	lineNumbers?: boolean
+	padding?: PaddingInput
+	background?: Color
+	lineNumberColor?: Color
+	lineNumberBackground?: Color
 }
 
 function lineDisplayWidth(line: HighlightLine): number {
-  return line.reduce((w, token) => w + displayWidth(token.text), 0)
+	return line.reduce((w, token) => w + displayWidth(token.text), 0)
 }
 
 export class CodeBlockHost extends BaseHost {
-  lines: HighlightLine[] = [[]]
-  lineNumbers = false
-  padding: Padding = { top: 0, right: 0, bottom: 0, left: 0 }
-  background?: ColorLike
-  lineNumberColor?: ColorLike
-  lineNumberBackground?: ColorLike
-
-  private cachedLineWidths: number[] = []
-  private gutterWidth = 0
-
-  constructor(props: CodeBlockProps, ctx: HostContext) {
-    super("codeblock", props, ctx)
-    this.updateProps(props)
-  }
-
-  private computeGutterWidth(): number {
-    if (!this.lineNumbers) return 0
-    // Fix width so layout doesn't shift when moving from 1→2 digits.
-    const digits = Math.max(2, String(Math.max(1, this.lines.length)).length)
-    // digits plus a trailing space
-    return digits + 1
-  }
-
-  private get insetX(): number {
-    return this.padding.left + this.padding.right + this.gutterWidth
-  }
-
-  private get insetY(): number {
-    return this.padding.top + this.padding.bottom
-  }
-
-  measure(maxW: number, maxH: number): Size {
-    this.cachedLineWidths = this.lines.map((l) => lineDisplayWidth(l))
-    this.gutterWidth = this.computeGutterWidth()
-
-    const maxLineW = this.cachedLineWidths.reduce((max, w) => (w > max ? w : max), 0)
-    const contentW = maxLineW + this.insetX
-
-    const innerHeight = Math.max(1, this.lines.length) + this.insetY
-
-    return {
-      w: Math.min(maxW, contentW),
-      h: Math.min(maxH, innerHeight),
-    }
-  }
-
-  override layout(rect: Rect): void {
-    super.layout(rect)
-  }
-
-  render(buffer: CellBuffer, palette: Palette): void {
-    if (!this.rect) return
-
-    const { x, y, w, h } = this.rect
-    const contentWidth = Math.max(0, w - this.insetX)
-    const maxLines = Math.max(0, Math.min(this.lines.length, h - this.insetY))
-    const startX = x + this.padding.left + this.gutterWidth
-    const startY = y + this.padding.top
-
-    if (this.background !== undefined && w > 0 && h > 0) {
-      const bgStyle = palette.id({ bg: normalizeColor(this.background) })
-      buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyle)
-    }
-
-    for (let i = 0; i < maxLines; i++) {
-      const lineY = startY + i
-      let drawX = startX
-
-      if (this.lineNumbers) {
-        const gutterStyle = palette.id({
-          fg: normalizeColor(this.lineNumberColor) ?? Colors.gray(11),
-          bg: normalizeColor(this.lineNumberBackground ?? this.background),
-        })
-        const digits = String(i + 1).padStart(this.gutterWidth - 1, " ")
-        buffer.drawText(x + this.padding.left, lineY, `${digits} `, gutterStyle, this.gutterWidth)
-      }
-
-      const line = this.lines[i] ?? []
-      for (const token of line) {
-        if (contentWidth <= 0) break
-        const remaining = x + w - drawX
-        if (remaining <= 0) break
-
-        const style = token.style ?? {}
-        const fg = normalizeColor(style.fg)
-        const bg = normalizeColor(style.bg ?? this.background)
-        const styleId = palette.id({
-          fg,
-          bg,
-          bold: style.bold,
-          italic: style.italic,
-          underline: style.underline,
-        })
-
-        buffer.drawText(drawX, lineY, token.text, styleId, remaining)
-        drawX += displayWidth(token.text)
-        if (drawX >= x + w) break
-      }
-    }
-  }
-
-  override updateProps(props: Record<string, unknown>): void {
-    super.updateProps(props)
-    if (props.lines !== undefined) this.lines = props.lines as HighlightLine[]
-    if (props.lineNumbers !== undefined) this.lineNumbers = !!props.lineNumbers
-    if (props.padding !== undefined) this.padding = resolvePadding(props.padding as CodeBlockProps["padding"])
-    if (props.background !== undefined) this.background = props.background as ColorLike
-    if (props.lineNumberColor !== undefined) this.lineNumberColor = props.lineNumberColor as ColorLike
-    if (props.lineNumberBackground !== undefined) this.lineNumberBackground = props.lineNumberBackground as ColorLike
-  }
+	lines: HighlightLine[] = [[]]
+	lineNumbers = false
+	padding: Padding = { top: 0, right: 0, bottom: 0, left: 0 }
+	background?: Color
+	lineNumberColor?: Color
+	lineNumberBackground?: Color
+
+	private cachedLineWidths: number[] = []
+	private gutterWidth = 0
+
+	constructor(props: CodeBlockProps, ctx: HostContext) {
+		super("codeblock", props, ctx)
+		this.updateProps(props)
+	}
+
+	private computeGutterWidth(): number {
+		if (!this.lineNumbers) return 0
+		// Fix width so layout doesn't shift when moving from 1→2 digits.
+		const digits = Math.max(2, String(Math.max(1, this.lines.length)).length)
+		// digits plus a trailing space
+		return digits + 1
+	}
+
+	private get insetX(): number {
+		return this.padding.left + this.padding.right + this.gutterWidth
+	}
+
+	private get insetY(): number {
+		return this.padding.top + this.padding.bottom
+	}
+
+	measure(maxW: number, maxH: number): Size {
+		this.cachedLineWidths = this.lines.map((l) => lineDisplayWidth(l))
+		this.gutterWidth = this.computeGutterWidth()
+
+		const maxLineW = this.cachedLineWidths.reduce((max, w) => (w > max ? w : max), 0)
+		const contentW = maxLineW + this.insetX
+
+		const innerHeight = Math.max(1, this.lines.length) + this.insetY
+
+		return {
+			w: Math.min(maxW, contentW),
+			h: Math.min(maxH, innerHeight),
+		}
+	}
+
+	override layout(rect: Rect): void {
+		super.layout(rect)
+	}
+
+	render(buffer: CellBuffer, palette: Palette): void {
+		if (!this.rect) return
+
+		const { x, y, w, h } = this.rect
+		const contentWidth = Math.max(0, w - this.insetX)
+		const maxLines = Math.max(0, Math.min(this.lines.length, h - this.insetY))
+		const startX = x + this.padding.left + this.gutterWidth
+		const startY = y + this.padding.top
+
+		const { value: bgValue, styleId: bgStyleId } = resolveBgStyle(palette, this.background)
+		if (bgValue !== undefined && w > 0 && h > 0) {
+			buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
+		}
+
+		for (let i = 0; i < maxLines; i++) {
+			const lineY = startY + i
+			let drawX = startX
+
+			if (this.lineNumbers) {
+				const gutterStyle = styleIdFromProps(palette, {
+					fg: this.lineNumberColor ?? Colors.gray(11),
+					bg: this.lineNumberBackground ?? this.background,
+				})
+				const digits = String(i + 1).padStart(this.gutterWidth - 1, " ")
+				buffer.drawText(x + this.padding.left, lineY, `${digits} `, gutterStyle, this.gutterWidth)
+			}
+
+			const line = this.lines[i] ?? []
+			for (const token of line) {
+				if (contentWidth <= 0) break
+				const remaining = x + w - drawX
+				if (remaining <= 0) break
+
+				const style = token.style ?? {}
+				const styleId = styleIdFromProps(palette, {
+					fg: style.fg,
+					bg: style.bg ?? this.background,
+					bold: style.bold,
+					italic: style.italic,
+					underline: style.underline,
+				})
+
+				buffer.drawText(drawX, lineY, token.text, styleId, remaining)
+				drawX += displayWidth(token.text)
+				if (drawX >= x + w) break
+			}
+		}
+	}
+
+	override updateProps(props: Record<string, unknown>): void {
+		super.updateProps(props)
+		if (props.lines !== undefined) this.lines = props.lines as HighlightLine[]
+		if (props.lineNumbers !== undefined) this.lineNumbers = !!props.lineNumbers
+		if (props.padding !== undefined) this.padding = resolvePadding(props.padding as CodeBlockProps["padding"])
+		if (props.background !== undefined) this.background = props.background as Color
+		if (props.lineNumberColor !== undefined) this.lineNumberColor = props.lineNumberColor as Color
+		if (props.lineNumberBackground !== undefined) this.lineNumberBackground = props.lineNumberBackground as Color
+	}
 }

package/src/hosts/flex-container.ts

@@ -0,0 +1,124 @@
+// flex-container.ts — Unified base class for VStackHost and HStackHost
+import type { CellBuffer, Palette, Color } from "@effect-tui/core"
+import { splitConstraints } from "@effect-tui/core"
+import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
+import { BaseHost } from "./base.js"
+import { measureFlex, layoutFlex, type FlexAxis, type FlexAlignment, resolveBgStyle } from "../utils/index.js"
+
+export type CrossAlignment<A extends FlexAxis> = A extends "vertical"
+	? "leading" | "center" | "trailing"
+	: "top" | "center" | "bottom"
+
+export interface FlexContainerProps<A extends FlexAxis> extends CommonProps {
+	spacing?: number
+	alignment?: CrossAlignment<A>
+	/** Background color to fill the entire container rect */
+	bg?: Color
+}
+
+// Map alignment names to generic flex alignment
+function toFlexAlignment<A extends FlexAxis>(axis: A, alignment: CrossAlignment<A>): FlexAlignment {
+	if (alignment === "center") return "center"
+	if (axis === "vertical") {
+		return alignment === "leading" ? "start" : "end"
+	} else {
+		return alignment === "top" ? "start" : "end"
+	}
+}
+
+/**
+ * FlexContainerHost is a generic linear layout container.
+ * VStackHost and HStackHost extend this with their axis-specific defaults.
+ */
+export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
+	spacing = 0
+	alignment!: CrossAlignment<A> // Set in constructor before updateProps
+	bg?: Color
+	private cachedSizes: Size[] = []
+	private layoutChildren: typeof this.children = []
+
+	constructor(
+		protected readonly axis: A,
+		elementType: string,
+		props: FlexContainerProps<A>,
+		ctx: HostContext,
+		defaultAlignment: CrossAlignment<A>,
+	) {
+		super(elementType, props, ctx)
+		this.alignment = defaultAlignment
+		this.updateProps(props)
+	}
+
+	/** Get children excluding __static nodes (which are rendered separately) */
+	private getNonStaticChildren() {
+		return this.children.filter((c) => !c.__static)
+	}
+
+	/**
+	 * Measure this container's size given parent's proposed constraints.
+	 *
+	 * Frame constraints are applied in two places:
+	 * 1. constrainProposal() - limits what we tell children is available
+	 * 2. constrainResult() - limits what we report back to parent
+	 *
+	 * This enables patterns like:
+	 * ```tsx
+	 * <vstack height={10}>      // Reports 10, proposes 10 to children
+	 *   <scroll>...</scroll>    // Greedy, but only gets 10
+	 * </vstack>
+	 * ```
+	 */
+	measure(maxW: number, maxH: number): Size {
+		// Apply frame constraints to what we propose to children
+		const constrained = this.constrainProposal(maxW, maxH)
+
+		// Exclude __static children from normal layout - they're rendered to scrollback separately
+		this.layoutChildren = this.getNonStaticChildren()
+		const [maxMain, maxCross] = splitConstraints(this.axis, constrained.w, constrained.h)
+		const result = measureFlex(this.axis, this.layoutChildren, this.spacing, maxMain, maxCross)
+		this.cachedSizes = result.sizes
+
+		// Apply frame constraints to what we report to parent
+		return this.constrainResult(result.totalSize)
+	}
+
+	override layout(rect: Rect): void {
+		super.layout(rect)
+		const stretchCross = this.axis === "vertical" ? this.alignment === "leading" : this.alignment === "top"
+		layoutFlex(
+			this.axis,
+			this.layoutChildren,
+			this.cachedSizes,
+			rect,
+			this.spacing,
+			toFlexAlignment(this.axis, this.alignment),
+			stretchCross,
+		)
+	}
+
+	render(buffer: CellBuffer, palette: Palette): void {
+		// Fill background color if set
+		if (this.bg && this.rect) {
+			const { styleId } = resolveBgStyle(palette, this.bg)
+			buffer.fillRect(this.rect.x, this.rect.y, this.rect.w, this.rect.h, 32, styleId)
+		}
+
+		// Only render non-static children to buffer (static content goes to scrollback)
+		// Check __static at render time (not just measure time) to avoid race with React commit
+		for (const child of this.layoutChildren) {
+			if (!child.__static) {
+				child.render(buffer, palette)
+			}
+		}
+	}
+
+	override updateProps(props: Record<string, unknown>): void {
+		super.updateProps(props)
+		this.spacing = (props.spacing as number | undefined) ?? 0
+		// Reset to axis-specific default when undefined
+		this.alignment =
+			(props.alignment as CrossAlignment<A> | undefined) ??
+			((this.axis === "vertical" ? "leading" : "top") as CrossAlignment<A>)
+		this.bg = props.bg as Color | undefined
+	}
+}

package/src/hosts/hstack.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 HStackProps extends CommonProps {
-  spacing?: number
-  alignment?: "top" | "center" | "bottom"
+	spacing?: number
+	alignment?: "top" | "center" | "bottom"
 }
 
-// Map HStack alignment names to generic flex alignment
-function toFlexAlignment(alignment: "top" | "center" | "bottom"): FlexAlignment {
-  switch (alignment) {
-    case "top":
-      return "start"
-    case "center":
-      return "center"
-    case "bottom":
-      return "end"
-  }
-}
-
-export class HStackHost extends BaseHost {
-  spacing = 0
-  alignment: "top" | "center" | "bottom" = "top"
-  private cachedSizes: Size[] = []
-
-  constructor(props: HStackProps, ctx: HostContext) {
-    super("hstack", props, ctx)
-    this.updateProps(props)
-  }
-
-  measure(maxW: number, maxH: number): Size {
-    const result = measureFlex("horizontal", this.children, this.spacing, maxW, maxH)
-    this.cachedSizes = result.sizes
-    return result.totalSize
-  }
-
-  override layout(rect: Rect): void {
-    super.layout(rect)
-    const stretchCross = this.alignment === "top"
-    layoutFlex(
-      "horizontal",
-      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 "top" | "center" | "bottom"
-  }
+/**
+ * HStackHost lays out children horizontally with optional spacing and cross-axis alignment.
+ */
+export class HStackHost extends FlexContainerHost<"horizontal"> {
+	constructor(props: HStackProps, ctx: HostContext) {
+		super("horizontal", "hstack", props as FlexContainerProps<"horizontal">, ctx, "top")
+	}
 }

package/src/hosts/index.ts

@@ -8,6 +8,10 @@ import { ZStackHost } from "./zstack.js"
 import { BoxHost } from "./box.js"
 import { CanvasHost } from "./canvas.js"
 import { CodeBlockHost } from "./codeblock.js"
+import { ScrollHost } from "./scroll.js"
+import { OverlayHost } from "./overlay.js"
+import { OverlayItemHost } from "./overlay-item.js"
+export { SingleChildHost } from "./single-child.js"
 
 export { BaseHost } from "./base.js"
 export { TextHost, RawTextHost, type TextProps } from "./text.js"
@@ -18,28 +22,34 @@ export { ZStackHost, type ZStackProps } from "./zstack.js"
 export { BoxHost, type BoxProps } from "./box.js"
 export { CanvasHost, type CanvasProps, type DrawContext } from "./canvas.js"
 export { CodeBlockHost, type CodeBlockProps } from "./codeblock.js"
+export { ScrollHost, type ScrollProps } from "./scroll.js"
+export { OverlayHost, type OverlayProps } from "./overlay.js"
+export { OverlayItemHost, type OverlayItemProps } from "./overlay-item.js"
 
 // Use any to allow specialized props on each host type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const hostRegistry: Record<string, new (props: any, ctx: HostContext) => BaseHost> = {
-  text: TextHost,
-  spacer: SpacerHost,
-  vstack: VStackHost,
-  hstack: HStackHost,
-  zstack: ZStackHost,
-  box: BoxHost,
-  canvas: CanvasHost,
-  codeblock: CodeBlockHost,
+	text: TextHost,
+	spacer: SpacerHost,
+	vstack: VStackHost,
+	hstack: HStackHost,
+	zstack: ZStackHost,
+	box: BoxHost,
+	canvas: CanvasHost,
+	codeblock: CodeBlockHost,
+	scroll: ScrollHost,
+	overlay: OverlayHost,
+	overlayItem: OverlayItemHost,
 }
 
 export function createHostInstance(type: string, props: CommonProps, ctx: HostContext): BaseHost {
-  const Host = hostRegistry[type]
-  if (!Host) {
-    throw new Error(`Unknown host component type: ${type}`)
-  }
-  return new Host(props, ctx)
+	const Host = hostRegistry[type]
+	if (!Host) {
+		throw new Error(`Unknown host component type: ${type}`)
+	}
+	return new Host(props, ctx)
 }
 
 export function createTextInstance(text: string, ctx: HostContext): RawTextHost {
-  return new RawTextHost(text, ctx)
+	return new RawTextHost(text, ctx)
 }

package/src/hosts/overlay-item.ts

@@ -0,0 +1,72 @@
+/**
+ * OverlayItem host - wrapper for overlay children with alignment
+ *
+ * This is a pass-through container that holds alignment props.
+ * Used by Overlay to position non-base children.
+ */
+
+import type { CellBuffer, Palette, Rect, Size } from "@effect-tui/core"
+import type { HostContext, CommonProps } from "../reconciler/types.js"
+import { BaseHost } from "./base.js"
+
+type HAlign = "left" | "center" | "right"
+type VAlign = "top" | "center" | "bottom"
+
+export interface OverlayItemProps extends CommonProps {
+	/** Alignment within the overlay container */
+	alignment?: { h?: HAlign; v?: VAlign }
+}
+
+export class OverlayItemHost extends BaseHost {
+	/** Stored alignment for parent Overlay to read */
+	alignment: { h?: HAlign; v?: VAlign } = {}
+
+	constructor(props: OverlayItemProps, ctx: HostContext) {
+		super("overlayItem", props, ctx)
+		this.updateProps(props)
+	}
+
+	override measure(maxW: number, maxH: number): Size {
+		const constrained = this.constrainProposal(maxW, maxH)
+
+		// Size is determined by single child
+		const child = this.children[0]
+		if (!child) {
+			return this.constrainResult({ w: 0, h: 0 })
+		}
+
+		const childSize = child.measure(constrained.w, constrained.h)
+		return this.constrainResult(childSize)
+	}
+
+	override layout(rect: Rect): void {
+		this.rect = rect
+
+		// Pass rect to child
+		const child = this.children[0]
+		if (child) {
+			child.layout(rect)
+		}
+	}
+
+	override render(buffer: CellBuffer, palette: Palette): void {
+		// Render child
+		const child = this.children[0]
+		if (child) {
+			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) {
+			this.alignment = props.alignment as { h?: HAlign; v?: VAlign }
+		}
+	}
+}