@effect-tui/react 0.13.0 → 0.14.0

package/jsx-runtime.ts

@@ -11,7 +11,7 @@ import type { OverlayProps } from "./src/hosts/overlay.js"
 import type { OverlayItemProps } from "./src/hosts/overlay-item.js"
 import type { ScrollProps } from "./src/hosts/scroll.js"
 import type { SpacerProps } from "./src/hosts/spacer.js"
-import type { SpanProps, StyledTextProps, TextProps } from "./src/hosts/text.js"
+import type { SpanProps, TextProps } from "./src/hosts/text.js"
 import type { VStackProps } from "./src/hosts/vstack.js"
 import type { ZStackProps } from "./src/hosts/zstack.js"
 
@@ -40,7 +40,6 @@ export declare namespace JSX {
 	export interface IntrinsicElements {
 		text: TextProps & { children?: React.ReactNode }
 		span: SpanProps & { children?: React.ReactNode }
-		styledtext: StyledTextProps
 		spacer: SpacerProps
 		vstack: VStackProps & { children?: React.ReactNode; __static?: boolean }
 		hstack: HStackProps & { children?: React.ReactNode }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.13.0",
+	"version": "0.14.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.13.0",
+		"@effect-tui/core": "^0.14.0",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/components/Markdown.tsx

@@ -229,7 +229,7 @@ function parseMarkdown(content: string): MdElement[] {
 }
 
 /**
- * Convert markdown spans to styled spans for StyledTextHost
+ * Convert markdown spans to styled spans for TextHost spans prop.
  */
 function toStyledSpans(spans: MdSpan[], theme: Required<MarkdownTheme>): StyledSpan[] {
 	const result: StyledSpan[] = []
@@ -258,7 +258,7 @@ function toStyledSpans(spans: MdSpan[], theme: Required<MarkdownTheme>): StyledS
 
 /**
  * Render inline spans as text elements (used for non-wrapping contexts like lists).
- * For wrapping paragraphs, use <styledtext> instead.
+ * For wrapping paragraphs, use <text spans={...} wrap /> instead.
  */
 function renderSpans(spans: MdSpan[], theme: Required<MarkdownTheme>) {
 	return spans.map((span, i) => {
@@ -356,9 +356,9 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord", w
 							</text>
 						)
 					case "paragraph":
-						// Use styledtext for proper wrapping of styled inline text
+						// Use spans for proper wrapping of styled inline text
 						if (wrap) {
-							return <styledtext key={i} spans={toStyledSpans(el.spans, theme)} wrap />
+							return <text key={i} spans={toStyledSpans(el.spans, theme)} wrap />
 						}
 						return <hstack key={i}>{renderSpans(el.spans, theme)}</hstack>
 					case "code":
@@ -377,7 +377,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord", w
 							<hstack key={i}>
 								<text fg={theme.quoteBorder}>{"│ "}</text>
 								{wrap ? (
-									<styledtext spans={toStyledSpans(el.spans, theme)} wrap />
+									<text spans={toStyledSpans(el.spans, theme)} wrap />
 								) : (
 									renderSpans(el.spans, theme)
 								)}
@@ -390,7 +390,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord", w
 									<hstack key={j}>
 										<text fg={theme.listMarker}>{"  • "}</text>
 										{wrap ? (
-											<styledtext spans={toStyledSpans(item, theme)} wrap />
+											<text spans={toStyledSpans(item, theme)} wrap />
 										) : (
 											renderSpans(item, theme)
 										)}
@@ -405,7 +405,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord", w
 									<hstack key={j}>
 										<text fg={theme.listMarker}>{`  ${el.start + j}. `}</text>
 										{wrap ? (
-											<styledtext spans={toStyledSpans(item, theme)} wrap />
+											<text spans={toStyledSpans(item, theme)} wrap />
 										) : (
 											renderSpans(item, theme)
 										)}

package/src/components/MultilineTextInput.tsx

@@ -1,6 +1,7 @@
 import { type Color, Colors, displayWidth, graphemes } from "@effect-tui/core"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useKeyboard } from "../hooks/use-keyboard.js"
+import { usePaste } from "../hooks/use-paste.js"
 import type { DrawContext } from "../hosts/canvas.js"
 import {
 	deleteCharBackwardMultiline,
@@ -654,6 +655,19 @@ export function MultilineTextInput({
 
 	useKeyboard(handleKey, { phase: "any" })
 
+	usePaste(
+		(paste) => {
+			if (!focused) return
+			const state: MultilineState = { lines: logicalLines, cursor, killRing }
+			const result = insertTextMultiline(state, paste.text)
+			if (result.changed) {
+				onChange(result.state.lines.join("\n"))
+				setCursor(result.state.cursor)
+			}
+		},
+		{ stopPropagation: true },
+	)
+
 	const draw = useCallback(
 		(ctx: DrawContext) => {
 			// Update content width for layout calculations

package/src/components/TextInput.tsx

@@ -1,6 +1,7 @@
 import { type Color, Colors, displayWidth } from "@effect-tui/core"
 import { useCallback, useEffect, useState } from "react"
 import { useKeyboard } from "../hooks/use-keyboard.js"
+import { usePaste } from "../hooks/use-paste.js"
 import type { DrawContext } from "../hosts/canvas.js"
 import {
 	deleteCharBackward,
@@ -241,6 +242,23 @@ export function TextInput({
 
 	useKeyboard(handleKey, { phase: "any" })
 
+	usePaste(
+		(paste) => {
+			if (!focused) return
+			const normalized = paste.text.replace(/[\r\n]+/g, " ")
+			const state: TextState = { text: value, cursor: cursorPos, killRing }
+			const result = insertText(state, normalized)
+			if (result.changed) {
+				onChange(result.state.text)
+				setCursorPos(result.state.cursor)
+				if (result.state.killRing !== killRing) {
+					setKillRing(result.state.killRing)
+				}
+			}
+		},
+		{ stopPropagation: true },
+	)
+
 	const draw = useCallback(
 		(ctx: DrawContext) => {
 			const displayText = value || placeholder

package/src/hosts/base.ts

@@ -113,6 +113,21 @@ export abstract class BaseHost implements HostInstance {
 		// which would overwrite any values set here.
 	}
 
+	/**
+	 * Optional pre-frame hook. BaseHost will call prepareSelf() and then recurse into children.
+	 */
+	prepareFrame(): void {
+		this.prepareSelf()
+		for (const child of this.children) {
+			child.prepareFrame?.()
+		}
+	}
+
+	/** Override in subclasses to precompute caches once per frame. */
+	protected prepareSelf(): void {
+		// Default no-op
+	}
+
 	/**
 	 * Resolve a prop that may be a MotionValue/ColorMotionValue.
 	 * If it's a spring, subscribes to changes and returns current value.
@@ -193,6 +208,14 @@ export abstract class BaseHost implements HostInstance {
 	abstract render(buffer: CellBuffer, palette: Palette): void
 
 	layout(rect: Rect): void {
+		this.layoutWithConstraints(rect)
+	}
+
+	/**
+	 * Apply frame constraints and update this.rect.
+	 * Returns the constrained rect for convenience in subclasses.
+	 */
+	protected layoutWithConstraints(rect: Rect): Rect {
 		// Apply frame constraints to the assigned rect
 		let { w, h } = rect
 
@@ -214,6 +237,8 @@ export abstract class BaseHost implements HostInstance {
 			this._lastLayoutH = h
 			this.onLayout({ width: w, height: h, x: rect.x, y: rect.y })
 		}
+
+		return this.rect
 	}
 
 	/**
@@ -322,6 +347,16 @@ export abstract class BaseHost implements HostInstance {
 		this.onLayout = typeof props.onLayout === "function" ? (props.onLayout as typeof this.onLayout) : undefined
 	}
 
+	/**
+	 * Apply a default greedy value when the prop is omitted.
+	 * Subclasses with greedy defaults should call this after super.updateProps().
+	 */
+	protected applyGreedyDefault(props: Record<string, unknown>, fallback: number): void {
+		if (!("greedy" in props)) {
+			this.greedy = fallback
+		}
+	}
+
 	destroy(): void {
 		this.clearSpringSubscriptions()
 		// Override in subclasses if cleanup needed

package/src/hosts/box.ts

@@ -6,9 +6,9 @@ import {
 	type BorderKind,
 	borderChars,
 	drawBorder,
+	fillRectWithInheritedBg,
 	type Padding,
 	type PaddingInput,
-	resolveInheritedBgStyle,
 	resolvePadding,
 	toColorValue,
 } from "../utils/index.js"
@@ -82,14 +82,14 @@ export class BoxHost extends SingleChildHost {
 	}
 
 	override layout(rect: Rect): void {
-		super.layout(rect)
+		const layoutRect = this.layoutWithConstraints(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),
+			x: layoutRect.x + t + this.padding.left,
+			y: layoutRect.y + t + this.padding.top,
+			w: Math.max(0, layoutRect.w - this.insetX),
+			h: Math.max(0, layoutRect.h - this.insetY),
 		}
 
 		// Layout single child
@@ -105,8 +105,7 @@ export class BoxHost extends SingleChildHost {
 
 		// Always clear our rect to ensure stale backgrounds are removed.
 		// If no explicit bg, inherit from parent (so child boxes are transparent over parents)
-		const { styleId: bgStyleId } = resolveInheritedBgStyle(palette, this.bg, this.parent)
-		buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
+		fillRectWithInheritedBg(buffer, palette, { x, y, w, h }, this.bg, this.parent)
 
 		// Draw border
 		if (this.border !== "none" && w >= 2 && h >= 2) {

package/src/hosts/canvas.ts

@@ -79,10 +79,12 @@ export class CanvasHost extends BaseHost {
 	}
 
 	measure(maxW: number, maxH: number): Size {
-		return {
-			w: this.fixedWidth ?? maxW,
-			h: this.fixedHeight ?? maxH,
+		const constrained = this.constrainProposal(maxW, maxH)
+		const size = {
+			w: this.fixedWidth ?? constrained.w,
+			h: this.fixedHeight ?? constrained.h,
 		}
+		return this.constrainResult(size)
 	}
 
 	render(buffer: CellBuffer, palette: Palette): void {

package/src/hosts/codeblock.ts

@@ -50,6 +50,7 @@ export class CodeBlockHost extends BaseHost {
 	}
 
 	measure(maxW: number, maxH: number): Size {
+		const constrained = this.constrainProposal(maxW, maxH)
 		this.cachedLineWidths = this.lines.map((l) => lineDisplayWidth(l))
 		this.gutterWidth = this.computeGutterWidth()
 
@@ -58,10 +59,10 @@ export class CodeBlockHost extends BaseHost {
 
 		const innerHeight = Math.max(1, this.lines.length) + this.insetY
 
-		return {
-			w: Math.min(maxW, contentW),
-			h: Math.min(maxH, innerHeight),
-		}
+		return this.constrainResult({
+			w: Math.min(constrained.w, contentW),
+			h: Math.min(constrained.h, innerHeight),
+		})
 	}
 
 	override layout(rect: Rect): void {

package/src/hosts/flex-container.ts

@@ -103,17 +103,15 @@ export class FlexContainerHost<A extends FlexAxis> extends BaseHost {
 	}
 
 	override layout(rect: Rect): void {
-		super.layout(rect)
-		// Use this.rect (constrained) not rect (raw input)
-		if (!this.rect) return
+		const layoutRect = this.layoutWithConstraints(rect)
 		const stretchCross = this.axis === "vertical" ? this.alignment === "leading" : this.alignment === "top"
 		const insetX = this.padding.left + this.padding.right
 		const insetY = this.padding.top + this.padding.bottom
 		const innerRect: Rect = {
-			x: this.rect.x + this.padding.left,
-			y: this.rect.y + this.padding.top,
-			w: Math.max(0, this.rect.w - insetX),
-			h: Math.max(0, this.rect.h - insetY),
+			x: layoutRect.x + this.padding.left,
+			y: layoutRect.y + this.padding.top,
+			w: Math.max(0, layoutRect.w - insetX),
+			h: Math.max(0, layoutRect.h - insetY),
 		}
 		layoutFlex(
 			this.axis,

package/src/hosts/index.ts

@@ -8,7 +8,7 @@ import { OverlayHost } from "./overlay.js"
 import { OverlayItemHost } from "./overlay-item.js"
 import { ScrollHost } from "./scroll.js"
 import { SpacerHost } from "./spacer.js"
-import { RawTextHost, SpanHost, StyledTextHost, TextHost } from "./text.js"
+import { RawTextHost, SpanHost, TextHost } from "./text.js"
 import { VStackHost } from "./vstack.js"
 import { ZStackHost } from "./zstack.js"
 
@@ -25,12 +25,10 @@ export { SpacerHost, type SpacerProps } from "./spacer.js"
 export {
 	RawTextHost,
 	SpanHost,
-	StyledTextHost,
 	TextHost,
 	type SpanProps,
 	type SpanStyle,
 	type StyledSpan,
-	type StyledTextProps,
 	type TextProps,
 } from "./text.js"
 export { VStackHost, type VStackProps } from "./vstack.js"
@@ -41,7 +39,6 @@ export { ZStackHost, type ZStackProps } from "./zstack.js"
 export const hostRegistry: Record<string, new (props: any, ctx: HostContext) => BaseHost> = {
 	text: TextHost,
 	span: SpanHost,
-	styledtext: StyledTextHost,
 	spacer: SpacerHost,
 	vstack: VStackHost,
 	hstack: HStackHost,

package/src/hosts/overlay-item.ts

@@ -38,8 +38,8 @@ export class OverlayItemHost extends SingleChildHost {
 	}
 
 	override layout(rect: Rect): void {
-		this.rect = rect
-		this.child?.layout(rect)
+		const layoutRect = this.layoutWithConstraints(rect)
+		this.child?.layout(layoutRect)
 	}
 
 	override render(buffer: CellBuffer, palette: Palette): void {

package/src/hosts/overlay.ts

@@ -18,7 +18,7 @@
 
 import type { CellBuffer, Palette, Rect, Size } from "@effect-tui/core"
 import type { CommonProps, HostContext } from "../reconciler/types.js"
-import { alignInRect } from "../utils/index.js"
+import { alignedChildRect } from "../utils/index.js"
 import { BaseHost } from "./base.js"
 import type { OverlayItemHost } from "./overlay-item.js"
 
@@ -29,6 +29,7 @@ export class OverlayHost extends BaseHost {
 
 	constructor(props: OverlayProps, ctx: HostContext) {
 		super("overlay", props, ctx)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	override measure(maxW: number, maxH: number): Size {
@@ -56,29 +57,22 @@ export class OverlayHost extends BaseHost {
 	}
 
 	override layout(rect: Rect): void {
-		this.rect = rect
+		const layoutRect = this.layoutWithConstraints(rect)
 
 		// Layout base child to fill our rect
 		const baseChild = this.children[0]
 		if (baseChild) {
-			baseChild.layout(rect)
+			baseChild.layout(layoutRect)
 		}
 
 		// Layout overlay children with their alignment
 		for (let i = 1; i < this.children.length; i++) {
 			const child = this.children[i]
-			const size = this.cachedSizes[i] ?? child.measure(rect.w, rect.h)
+			const size = this.cachedSizes[i] ?? child.measure(layoutRect.w, layoutRect.h)
 
 			// Read alignment from OverlayItemHost (use type check, not instanceof, for bundler compatibility)
 			const alignment = child.type === "overlayItem" ? (child as OverlayItemHost).alignment : {}
-			const { x, y } = alignInRect(rect, size, alignment.h ?? "center", alignment.v ?? "center")
-
-			child.layout({
-				x,
-				y,
-				w: Math.min(rect.w, size.w),
-				h: Math.min(rect.h, size.h),
-			})
+			child.layout(alignedChildRect(layoutRect, size, alignment.h ?? "center", alignment.v ?? "center"))
 		}
 	}
 

package/src/hosts/scroll.ts

@@ -1,7 +1,7 @@
 // scroll.ts — Scrollable container host
 import type { CellBuffer, Color, Palette } from "@effect-tui/core"
 import type { CommonProps, HostContext, Rect, Size } from "../reconciler/types.js"
-import { resolveInheritedBgStyle } from "../utils/index.js"
+import { fillRectWithInheritedBg } from "../utils/index.js"
 import { SingleChildHost } from "./single-child.js"
 
 export interface ScrollProps extends CommonProps {
@@ -55,10 +55,14 @@ export class ScrollHost extends SingleChildHost {
 	private contentWidth = 0
 	private contentHeight = 0
 	// Track last reported sizes to avoid redundant callbacks
-	private lastReportedContentW = 0
-	private lastReportedContentH = 0
+	private lastReportedContentW = -1
+	private lastReportedContentH = -1
+	private lastViewportW = -1
+	private lastViewportH = -1
 	private lastRectX = -1
 	private lastRectY = -1
+	private lastRectW = -1
+	private lastRectH = -1
 	// Track if we were at end (for sticky behavior)
 	private wasAtEnd = true
 	private wasAtEndX = true
@@ -104,7 +108,7 @@ export class ScrollHost extends SingleChildHost {
 	}
 
 	override layout(rect: Rect): void {
-		super.layout(rect)
+		const layoutRect = this.layoutWithConstraints(rect)
 
 		// Report content size if changed (deferred from measure() to keep it pure)
 		if (this.contentWidth !== this.lastReportedContentW || this.contentHeight !== this.lastReportedContentH) {
@@ -114,24 +118,32 @@ export class ScrollHost extends SingleChildHost {
 		}
 
 		// Report viewport size if changed (for useScroll hook)
-		// Always report on every layout - React may have recreated the hook with stale refs
-		if (this.onViewportSize) {
-			this.onViewportSize(rect.w, rect.h)
+		if (this.onViewportSize && (layoutRect.w !== this.lastViewportW || layoutRect.h !== this.lastViewportH)) {
+			this.lastViewportW = layoutRect.w
+			this.lastViewportH = layoutRect.h
+			this.onViewportSize(layoutRect.w, layoutRect.h)
 		}
 
 		// Report rect if position changed (for hit testing)
-		if (rect.x !== this.lastRectX || rect.y !== this.lastRectY) {
-			this.lastRectX = rect.x
-			this.lastRectY = rect.y
-			this.onRect?.(rect.x, rect.y, rect.w, rect.h)
+		if (
+			layoutRect.x !== this.lastRectX ||
+			layoutRect.y !== this.lastRectY ||
+			layoutRect.w !== this.lastRectW ||
+			layoutRect.h !== this.lastRectH
+		) {
+			this.lastRectX = layoutRect.x
+			this.lastRectY = layoutRect.y
+			this.lastRectW = layoutRect.w
+			this.lastRectH = layoutRect.h
+			this.onRect?.(layoutRect.x, layoutRect.y, layoutRect.w, layoutRect.h)
 		}
 
 		const child = this.child
 		if (!child) return
 
 		// Calculate max scroll offsets
-		const maxScrollY = Math.max(0, this.contentHeight - rect.h)
-		const maxScrollX = Math.max(0, this.contentWidth - rect.w)
+		const maxScrollY = Math.max(0, this.contentHeight - layoutRect.h)
+		const maxScrollX = Math.max(0, this.contentWidth - layoutRect.w)
 
 		// Start with the offset from props (controlled by useScroll)
 		let scrollY = this.offset
@@ -185,20 +197,20 @@ export class ScrollHost extends SingleChildHost {
 
 		// Handle alignment when content is smaller than viewport
 		if (this.align === "end") {
-			if (this.contentHeight < rect.h && (this.axis === "vertical" || this.axis === "both")) {
+			if (this.contentHeight < layoutRect.h && (this.axis === "vertical" || this.axis === "both")) {
 				// Align to bottom
-				scrollY = -(rect.h - this.contentHeight)
+				scrollY = -(layoutRect.h - this.contentHeight)
 			}
-			if (this.contentWidth < rect.w && (this.axis === "horizontal" || this.axis === "both")) {
+			if (this.contentWidth < layoutRect.w && (this.axis === "horizontal" || this.axis === "both")) {
 				// Align to right
-				scrollX = -(rect.w - this.contentWidth)
+				scrollX = -(layoutRect.w - this.contentWidth)
 			}
 		}
 
 		// Layout child at offset position
 		const childRect: Rect = {
-			x: rect.x - scrollX,
-			y: rect.y - scrollY,
+			x: layoutRect.x - scrollX,
+			y: layoutRect.y - scrollY,
 			w: this.contentWidth,
 			h: this.contentHeight,
 		}
@@ -210,8 +222,7 @@ export class ScrollHost extends SingleChildHost {
 		const { x, y, w, h } = this.rect
 
 		// Fill background (inherit from parent if not explicitly set)
-		const { styleId: bgStyleId } = resolveInheritedBgStyle(palette, this.bg, this.parent)
-		buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
+		fillRectWithInheritedBg(buffer, palette, { x, y, w, h }, this.bg, this.parent)
 
 		// Render children with clipping
 		buffer.withClip(x, y, w, h, () => {
@@ -273,9 +284,7 @@ export class ScrollHost extends SingleChildHost {
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
 		// Scroll is greedy by default unless explicitly set to false
-		if (!("greedy" in props)) {
-			this.greedy = 1
-		}
+		this.applyGreedyDefault(props, 1)
 		if (props.axis !== undefined) this.axis = (props.axis as ScrollProps["axis"]) ?? "vertical"
 		if (props.offset !== undefined) this.offset = props.offset as number
 		if (props.offsetX !== undefined) this.offsetX = props.offsetX as number
@@ -286,6 +295,7 @@ export class ScrollHost extends SingleChildHost {
 		this.onContentSize = props.onContentSize as ScrollProps["onContentSize"]
 		this.onViewportSize = props.onViewportSize as ScrollProps["onViewportSize"]
 		this.onEffectiveOffset = props.onEffectiveOffset as ScrollProps["onEffectiveOffset"]
+		this.onEffectiveOffsetX = props.onEffectiveOffsetX as ScrollProps["onEffectiveOffsetX"]
 		this.onRect = props.onRect as ScrollProps["onRect"]
 	}
 }

package/src/hosts/spacer.ts

@@ -37,9 +37,7 @@ export class SpacerHost extends BaseHost {
 	override updateProps(props: Record<string, unknown>): void {
 		super.updateProps(props)
 		// Spacer is greedy by default unless explicitly set to false
-		if (!("greedy" in props)) {
-			this.greedy = 1
-		}
+		this.applyGreedyDefault(props, 1)
 		if (props.minWidth !== undefined) this.minWidth = props.minWidth as number
 		if (props.minHeight !== undefined) this.minHeight = props.minHeight as number
 	}