@effect-tui/react 0.1.7 → 0.2.1

package/jsx-runtime.ts

@@ -3,17 +3,17 @@ export { Fragment, jsx, jsxs } from "react/jsx-runtime"
 
 // JSX types (namespace is type-only, but we export a dummy runtime value for bundlers)
 import type * as React from "react"
-import type { TextProps } from "./src/hosts/text.js"
-import type { SpacerProps } from "./src/hosts/spacer.js"
-import type { VStackProps } from "./src/hosts/vstack.js"
-import type { HStackProps } from "./src/hosts/hstack.js"
-import type { ZStackProps } from "./src/hosts/zstack.js"
 import type { BoxProps } from "./src/hosts/box.js"
 import type { CanvasProps } from "./src/hosts/canvas.js"
 import type { CodeBlockProps } from "./src/hosts/codeblock.js"
-import type { ScrollProps } from "./src/hosts/scroll.js"
+import type { HStackProps } from "./src/hosts/hstack.js"
 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 { TextProps } from "./src/hosts/text.js"
+import type { VStackProps } from "./src/hosts/vstack.js"
+import type { ZStackProps } from "./src/hosts/zstack.js"
 
 // Runtime placeholder (the actual JSX namespace below is type-only)
 const JSX = {}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.1.7",
+	"version": "0.2.1",
 	"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.1.7",
+		"@effect-tui/core": "^0.2.1",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",
@@ -110,6 +110,7 @@
 		}
 	},
 	"devDependencies": {
+		"@effect-tui/emulator": "workspace:^",
 		"@effect/opentelemetry": "^0.60.0",
 		"@effect/vitest": "^0.27.0",
 		"@opentelemetry/api": "^1.9.0",

package/src/codeblock.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 import type { BundledLanguage, BundledTheme } from "shiki"
-import { highlightCode, toPlainLines, type HighlightLine } from "./highlight.js"
+import { type HighlightLine, highlightCode, toPlainLines } from "./highlight.js"
 import type { CodeBlockProps as HostCodeBlockProps } from "./hosts/codeblock.js"
 
 export interface CodeBlockProps extends Omit<HostCodeBlockProps, "lines"> {

package/src/components/Divider.tsx

@@ -1,5 +1,5 @@
+import { type Color, Colors } from "@effect-tui/core"
 import { useTerminalSize } from "../renderer-context.js"
-import { Colors, type Color } from "@effect-tui/core"
 
 export interface DividerProps {
 	/** Character to use for the divider (default: "─") */

package/src/components/Markdown.tsx

@@ -1,6 +1,6 @@
 import { Colors, type ColorValue } from "@effect-tui/core"
-import { CodeBlock } from "../codeblock.js"
 import type { BundledLanguage, BundledTheme } from "shiki"
+import { CodeBlock } from "../codeblock.js"
 
 export interface MarkdownTheme {
 	/** Header colors by level (h1, h2, h3+) */
@@ -115,7 +115,7 @@ function parseInline(text: string): MdSpan[] {
 		}
 
 		// Plain text until next special character
-		match = remaining.match(/^[^*_`\[]+/)
+		match = remaining.match(/^[^*_`[]+/)
 		if (match) {
 			spans.push({ type: "text", text: match[0] })
 			remaining = remaining.slice(match[0].length)

package/src/components/MultilineTextInput.tsx

@@ -1,19 +1,19 @@
-import { useState, useCallback, useEffect, useMemo, useRef } from "react"
-import { Colors, type Color, displayWidth, graphemes } from "@effect-tui/core"
+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 type { DrawContext } from "../hosts/canvas.js"
 import {
-	type MultilineState,
-	graphemeColToCharIdx,
+	deleteCharBackwardMultiline,
+	deleteCharForwardMultiline,
 	deleteWordBackwardMultiline,
+	graphemeColToCharIdx,
+	insertTextMultiline,
 	killToEndMultiline,
 	killToStartMultiline,
-	transposeCharsMultiline,
-	deleteCharForwardMultiline,
-	deleteCharBackwardMultiline,
-	insertTextMultiline,
-	matchPrevWord,
+	type MultilineState,
 	matchNextWord,
+	matchPrevWord,
+	transposeCharsMultiline,
 } from "./text-editing.js"
 
 export interface MultilineTextInputProps {

package/src/components/Static.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useLayoutEffect, type ReactNode } from "react"
+import { type ReactNode, useLayoutEffect, useMemo, useState } from "react"
 
 export interface StaticProps<T> {
 	/**

package/src/components/TextInput.tsx

@@ -1,18 +1,18 @@
-import { useState, useCallback, useEffect } from "react"
-import { Colors, type Color, displayWidth } from "@effect-tui/core"
+import { type Color, Colors, displayWidth } from "@effect-tui/core"
+import { useCallback, useEffect, useState } from "react"
 import { useKeyboard } from "../hooks/use-keyboard.js"
 import type { DrawContext } from "../hosts/canvas.js"
 import {
-	type TextState,
+	deleteCharBackward,
+	deleteCharForward,
 	deleteWordBackward,
+	insertText,
 	killToEnd,
 	killToStart,
-	deleteCharForward,
-	deleteCharBackward,
-	transposeChars,
-	insertText,
-	matchPrevWord,
 	matchNextWord,
+	matchPrevWord,
+	type TextState,
+	transposeChars,
 } from "./text-editing.js"
 
 export interface TextInputProps {

package/src/components/index.ts

@@ -1,6 +1,6 @@
-export { TextInput, type TextInputProps } from "./TextInput.js"
-export { MultilineTextInput, type MultilineTextInputProps } from "./MultilineTextInput.js"
+export { Divider, type DividerProps } from "./Divider.js"
 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 { Divider, type DividerProps } from "./Divider.js"
-export { Overlay, type OverlayProps, type OverlayItemProps } from "./Overlay.js"
+export { TextInput, type TextInputProps } from "./TextInput.js"

package/src/console/ConsoleCapture.ts

@@ -1,10 +1,10 @@
 // Console capture singleton for TUI debugging
 // Intercepts console.log/info/warn/error/debug and stores entries for display
 
-import { EventEmitter } from "events"
 import { Console } from "node:console"
 import { Writable } from "node:stream"
 import * as util from "node:util"
+import { EventEmitter } from "events"
 
 // ─────────────────────────────────────────────────────────────
 // Types

package/src/console/ConsolePopover.tsx

@@ -1,14 +1,14 @@
 // Console popover component for displaying captured console output
 // Shows logs in a scrollable overlay with text selection and copy functionality
 
-import { useState, useCallback, useEffect, useMemo, useRef } from "react"
 import { Colors, type ColorValue } from "@effect-tui/core"
-import { useTerminalSize } from "../renderer.js"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useKeyboard } from "../hooks/use-keyboard.js"
 import { useMouse } from "../hooks/use-mouse.js"
 import { useScroll } from "../hooks/use-scroll.js"
+import { useTerminalSize } from "../renderer.js"
 import { getConsoleCapture, type LogEntry, type LogLevel } from "./ConsoleCapture.js"
-import { copyToClipboardSync, copyToClipboard } from "./clipboard.js"
+import { copyToClipboard, copyToClipboardSync } from "./clipboard.js"
 
 // ─────────────────────────────────────────────────────────────
 // Types
@@ -97,10 +97,7 @@ function wrapLine(text: string, maxWidth: number): string[] {
 }
 
 /** Normalize selection so start is before end */
-function normalizeSelection(
-	anchor: SelectionPoint,
-	head: SelectionPoint,
-): [SelectionPoint, SelectionPoint] {
+function normalizeSelection(anchor: SelectionPoint, head: SelectionPoint): [SelectionPoint, SelectionPoint] {
 	if (anchor.line < head.line || (anchor.line === head.line && anchor.col <= head.col)) {
 		return [anchor, head]
 	}
@@ -156,13 +153,17 @@ export function ConsolePopover({
 	const [feedback, setFeedback] = useState<string | null>(null)
 
 	// Calculate dimensions - inline mode uses adjustable fixed height
-	const popoverHeight = mode === "inline"
-		? inlineHeight
-		: Math.max(5, Math.floor(termHeight * (sizePercent / 100)))
+	const popoverHeight = mode === "inline" ? inlineHeight : Math.max(5, Math.floor(termHeight * (sizePercent / 100)))
 	const contentStartY = termHeight - popoverHeight + 1 // +1 for title bar
 
 	// Use scroll hook for content scrolling
-	const { state: scrollState, scrollProps, scrollToEnd, scrollToStart, scrollBy } = useScroll({
+	const {
+		state: scrollState,
+		scrollProps,
+		scrollToEnd,
+		scrollToStart,
+		scrollBy,
+	} = useScroll({
 		axis: "vertical",
 		sticky: true,
 		enableKeyboard: false,
@@ -423,22 +424,22 @@ export function ConsolePopover({
 
 				return (
 					<hstack key={index}>
-					{before.length > 0 && (
-						<text fg={LOG_COLORS[line.level]} bg={CONTENT_BG}>
-							{before}
-						</text>
-					)}
-					<text fg={Colors.white} bg={SELECTION_BG}>
-						{selected}
-					</text>
-					{after.length > 0 && (
-						<text fg={LOG_COLORS[line.level]} bg={CONTENT_BG}>
-							{after}
+						{before.length > 0 && (
+							<text fg={LOG_COLORS[line.level]} bg={CONTENT_BG}>
+								{before}
+							</text>
+						)}
+						<text fg={Colors.white} bg={SELECTION_BG}>
+							{selected}
 						</text>
-					)}
-				</hstack>
-			)
-		}
+						{after.length > 0 && (
+							<text fg={LOG_COLORS[line.level]} bg={CONTENT_BG}>
+								{after}
+							</text>
+						)}
+					</hstack>
+				)
+			}
 		}
 
 		// No selection on this line

package/src/console/index.ts

@@ -36,7 +36,5 @@ export {
 } from "./ConsoleCapture.js"
 
 export { ConsolePopover, type ConsolePopoverProps } from "./ConsolePopover.js"
-
-export { useConsole, type UseConsoleOptions, type UseConsoleReturn } from "./useConsole.js"
-
 export { copyToClipboard, copyToClipboardSync } from "./clipboard.js"
+export { type UseConsoleOptions, type UseConsoleReturn, useConsole } from "./useConsole.js"

package/src/console/useConsole.ts

@@ -2,9 +2,9 @@
 // Uses ` (backtick) for toggle, ~ (tilde) for screenshot
 // Auto-show on error
 
-import { useState, useEffect, useCallback, useMemo } from "react"
-import { getConsoleCapture, type LogEntry } from "./ConsoleCapture.js"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { useKeyboard } from "../hooks/use-keyboard.js"
+import { getConsoleCapture, type LogEntry } from "./ConsoleCapture.js"
 
 // ─────────────────────────────────────────────────────────────
 // Types

package/src/debug/DebugOverlay.ts

@@ -1,9 +1,9 @@
 // Integrated debug overlay for all TUI apps
 // Provides console log viewer with Ctrl+Shift+D toggle and Ctrl+Shift+S screenshot
 
-import type { CellBuffer, Palette, KeyMsg, MouseMsg } from "@effect-tui/core"
+import type { CellBuffer, KeyMsg, MouseMsg, Palette } from "@effect-tui/core"
 import { getConsoleCapture, type LogLevel } from "../console/ConsoleCapture.js"
-import { copyToClipboardSync, copyToClipboard } from "../console/clipboard.js"
+import { copyToClipboard, copyToClipboardSync } from "../console/clipboard.js"
 
 // ─────────────────────────────────────────────────────────────
 // Types
@@ -433,10 +433,7 @@ export class DebugOverlay {
 		}
 	}
 
-	private getLineSelection(
-		lineIndex: number,
-		lineLength: number,
-	): { startCol: number; endCol: number } | null {
+	private getLineSelection(lineIndex: number, lineLength: number): { startCol: number; endCol: number } | null {
 		if (!this.selectionAnchor || !this.selectionHead) return null
 
 		const [start, end] = normalizeSelection(this.selectionAnchor, this.selectionHead)

package/src/dev/Toast.tsx

@@ -1,8 +1,8 @@
 // Toast notification system for dev mode
 // Beautiful, minimal notifications that appear at the top of the screen
 
-import { useState, useCallback, createContext, useContext, type ReactNode } from "react"
 import { Colors } from "@effect-tui/core"
+import { createContext, type ReactNode, useCallback, useContext, useState } from "react"
 import { useTerminalSize } from "../renderer-context.js"
 
 // ─────────────────────────────────────────────────────────────
@@ -41,7 +41,10 @@ export function useToast(): ToastContextValue {
 // Styling
 // ─────────────────────────────────────────────────────────────
 
-const TOAST_STYLES: Record<ToastType, { bg: ReturnType<typeof Colors.rgb>; fg: ReturnType<typeof Colors.rgb>; icon: string }> = {
+const TOAST_STYLES: Record<
+	ToastType,
+	{ bg: ReturnType<typeof Colors.rgb>; fg: ReturnType<typeof Colors.rgb>; icon: string }
+> = {
 	success: { bg: Colors.rgb(30, 70, 40), fg: Colors.rgb(140, 230, 140), icon: "✓" },
 	info: { bg: Colors.rgb(30, 50, 80), fg: Colors.rgb(140, 180, 230), icon: "ℹ" },
 	warning: { bg: Colors.rgb(80, 60, 20), fg: Colors.rgb(230, 200, 100), icon: "⚠" },
@@ -70,11 +73,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 		setToasts((prev) => prev.filter((t) => t.id !== id))
 	}, [])
 
-	return (
-		<ToastContext.Provider value={{ toasts, show, dismiss }}>
-			{children}
-		</ToastContext.Provider>
-	)
+	return <ToastContext.Provider value={{ toasts, show, dismiss }}>{children}</ToastContext.Provider>
 }
 
 // ─────────────────────────────────────────────────────────────
@@ -111,7 +110,10 @@ export function ToastContainer() {
 export function useScreenshotToast() {
 	const { show } = useToast()
 
-	return useCallback((path: string) => {
-		show(`Screenshot saved: ${path}`, "success", 2500)
-	}, [show])
+	return useCallback(
+		(path: string) => {
+			show(`Screenshot saved: ${path}`, "success", 2500)
+		},
+		[show],
+	)
 }

package/src/dev/index.ts

@@ -1,2 +1,2 @@
 // Dev mode utilities
-export { ToastProvider, ToastContainer, useToast, useScreenshotToast, type Toast, type ToastType } from "./Toast.js"
+export { type Toast, ToastContainer, ToastProvider, type ToastType, useScreenshotToast, useToast } from "./Toast.js"

package/src/dev.tsx

@@ -9,25 +9,24 @@
  * - Remote control when EFFECT_TUI_REMOTE=1
  */
 
-import { globalValue } from "effect/GlobalValue"
+import { Colors } from "@effect-tui/core"
 import * as watcher from "@parcel/watcher"
-import { dirname } from "path"
-import { stat } from "fs/promises"
+import { globalValue } from "effect/GlobalValue"
 import { readFileSync } from "fs"
+import { stat } from "fs/promises"
+import { dirname } from "path"
 import React from "react"
-import { Colors } from "@effect-tui/core"
-import { createRenderer, createRoot, type Root } from "./renderer.js"
-import type { RendererOptions } from "./renderer-types.js"
-import type { TuiRenderer } from "./renderer-types.js"
+import { Overlay } from "./components/Overlay.js"
 import { ConsolePopover } from "./console/ConsolePopover.js"
+import { copyToClipboard, copyToClipboardSync } from "./console/clipboard.js"
 import { useConsole } from "./console/useConsole.js"
-import { enableRemote } from "./remote/index.js"
-import { ToastProvider, ToastContainer, useToast } from "./dev/Toast.js"
+import { DiagnosticsPanel } from "./debug/DiagnosticsPanel.js"
+import { ToastContainer, ToastProvider, useToast } from "./dev/Toast.js"
 import { useKeyboard } from "./hooks/use-keyboard.js"
+import { enableRemote } from "./remote/index.js"
+import { createRenderer, createRoot, type Root } from "./renderer.js"
 import { useRenderer, useTerminalSize } from "./renderer-context.js"
-import { copyToClipboardSync, copyToClipboard } from "./console/clipboard.js"
-import { DiagnosticsPanel } from "./debug/DiagnosticsPanel.js"
-import { Overlay } from "./components/Overlay.js"
+import type { RendererOptions, TuiRenderer } from "./renderer-types.js"
 
 /**
  * Pipeable combinator that makes an atom persist across hot reloads.

package/src/highlight.ts

@@ -1,5 +1,5 @@
-import { createHighlighter, type Highlighter, type BundledLanguage, type BundledTheme } from "shiki"
 import type { Color } from "@effect-tui/core"
+import { type BundledLanguage, type BundledTheme, createHighlighter, type Highlighter } from "shiki"
 
 export interface HighlightTokenStyle {
 	fg?: Color

package/src/hooks/index.ts

@@ -1,7 +1,8 @@
-export { useKeyboard } from "./use-keyboard.js"
 export type { UseKeyboardOptions } from "./use-keyboard.js"
-export { useMouse } from "./use-mouse.js"
+export { useKeyboard } from "./use-keyboard.js"
 export type { UseMouseOptions } from "./use-mouse.js"
+export { useMouse } from "./use-mouse.js"
 export { usePaste } from "./use-paste.js"
+export { useQuit } from "./use-quit.js"
+export type { ScrollState, UseScrollOptions, UseScrollReturn } from "./use-scroll.js"
 export { useScroll } from "./use-scroll.js"
-export type { UseScrollOptions, UseScrollReturn, ScrollState } from "./use-scroll.js"

package/src/hooks/use-keyboard.ts

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from "react"
 import type { KeyMsg } from "@effect-tui/core"
+import { useEffect, useRef } from "react"
 import { useRenderer } from "../renderer.js"
 
 export type UseKeyboardOptions = {

package/src/hooks/use-mouse.ts

@@ -1,5 +1,5 @@
+import type { MouseButton, MouseMsg } from "@effect-tui/core"
 import { useEffect, useRef } from "react"
-import type { MouseMsg, MouseButton } from "@effect-tui/core"
 import { useRenderer } from "../renderer.js"
 
 export type UseMouseOptions = {

package/src/hooks/use-quit.ts

@@ -0,0 +1,33 @@
+import { useCallback } from "react"
+import { useRenderer } from "../renderer-context.js"
+
+/**
+ * Hook that returns a quit function for cleanly exiting the TUI application.
+ *
+ * This ensures terminal state is properly restored (alternate buffer exit,
+ * cursor shown, raw mode disabled) before the process exits.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const quit = useQuit()
+ *
+ *   useKeyboard((key) => {
+ *     if (key.text === "q") quit()
+ *   })
+ *
+ *   return <text>Press q to quit</text>
+ * }
+ * ```
+ */
+export function useQuit(): (code?: number) => void {
+	const renderer = useRenderer()
+
+	return useCallback(
+		(code = 0) => {
+			renderer.stop()
+			process.exit(code)
+		},
+		[renderer],
+	)
+}

package/src/hooks/use-scroll.ts

@@ -1,8 +1,9 @@
 // use-scroll.ts — Hook for managing scroll state with keyboard/mouse input
-import { useState, useCallback, useRef, useMemo, useLayoutEffect } from "react"
+
 import type { KeyMsg } from "@effect-tui/core"
-import { useKeyboard } from "./use-keyboard.js"
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { useTerminalSize } from "../renderer.js"
+import { useKeyboard } from "./use-keyboard.js"
 
 // ============================================================================
 // Scroll Acceleration (macOS-style)
@@ -356,15 +357,12 @@ export function useScroll(options: UseScrollOptions = {}): UseScrollReturn {
 	}
 
 	// Handle effective offset sync from host (when sticky adjusts the offset)
-	const handleEffectiveOffset = useCallback(
-		(effectiveOffset: number) => {
-			// Sync the ref so scrollToVisible uses the actual rendered position
-			offsetRef.current = effectiveOffset
-			// Also update state to keep in sync (but don't trigger wasAtEnd change)
-			setOffsetRaw(effectiveOffset)
-		},
-		[],
-	)
+	const handleEffectiveOffset = useCallback((effectiveOffset: number) => {
+		// Sync the ref so scrollToVisible uses the actual rendered position
+		offsetRef.current = effectiveOffset
+		// Also update state to keep in sync (but don't trigger wasAtEnd change)
+		setOffsetRaw(effectiveOffset)
+	}, [])
 
 	const scrollProps = {
 		offset,

package/src/hooks/useFrameStats.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
-import { useRenderer } from "../renderer.js"
 import type { FrameStats } from "../renderer.js"
+import { useRenderer } from "../renderer.js"
 
 /**
  * Subscribe to per-frame renderer stats (if enabled).

package/src/hosts/base.ts

@@ -1,5 +1,5 @@
-import type { CellBuffer, Palette, Color } from "@effect-tui/core"
-import type { HostInstance, Rect, Size, HostContext, CommonProps } from "../reconciler/types.js"
+import type { CellBuffer, Color, Palette } from "@effect-tui/core"
+import type { CommonProps, HostContext, HostInstance, Rect, Size } from "../reconciler/types.js"
 
 /** Host that may have a background color (e.g., BoxHost) */
 export interface HostWithBg extends HostInstance {
@@ -32,9 +32,11 @@ export abstract class BaseHost implements HostInstance {
 	children: HostInstance[] = []
 	rect: Rect | null = null
 
-	// Common flex props
-	flexGrow = 0
-	flexShrink = 1
+	// Greedy layout - expands to fill remaining space
+	// undefined = not greedy (hug content)
+	// true or 1 = 1 share
+	// number > 1 = proportionally more shares
+	greedy: boolean | number | undefined = undefined
 
 	// ─────────────────────────────────────────────────────────────
 	// Frame constraints (like SwiftUI's .frame modifier)
@@ -65,7 +67,20 @@ export abstract class BaseHost implements HostInstance {
 	abstract render(buffer: CellBuffer, palette: Palette): void
 
 	layout(rect: Rect): void {
-		this.rect = rect
+		// Apply frame constraints to the assigned rect
+		let { w, h } = rect
+
+		// Fixed width/height override
+		if (this.frameWidth !== undefined) w = this.frameWidth
+		if (this.frameHeight !== undefined) h = this.frameHeight
+
+		// Apply min/max clamps
+		if (this.frameMinWidth !== undefined) w = Math.max(this.frameMinWidth, w)
+		if (this.frameMaxWidth !== undefined) w = Math.min(this.frameMaxWidth, w)
+		if (this.frameMinHeight !== undefined) h = Math.max(this.frameMinHeight, h)
+		if (this.frameMaxHeight !== undefined) h = Math.min(this.frameMaxHeight, h)
+
+		this.rect = { x: rect.x, y: rect.y, w, h }
 	}
 
 	/**
@@ -144,8 +159,23 @@ export abstract class BaseHost implements HostInstance {
 	}
 
 	updateProps(props: Record<string, unknown>): void {
-		this.flexGrow = (props.flexGrow as number | undefined) ?? 0
-		this.flexShrink = (props.flexShrink as number | undefined) ?? 1
+		// Greedy layout - reset to undefined unless explicitly set
+		// Subclasses like Spacer/Scroll set their own default before calling super
+		if ("greedy" in props) {
+			const greedy = props.greedy
+			if (greedy === true) {
+				this.greedy = 1
+			} else if (typeof greedy === "number") {
+				this.greedy = greedy
+			} else {
+				// greedy is false, undefined, or null
+				this.greedy = undefined
+			}
+		} else {
+			// No greedy prop - reset to default (undefined)
+			// Subclasses like Spacer/Scroll handle this before calling super
+			this.greedy = undefined
+		}
 
 		// Frame constraints - only accept valid numbers (ignore strings like "100%")
 		this.frameWidth = typeof props.width === "number" ? props.width : undefined

package/src/hosts/box.ts

@@ -1,17 +1,17 @@
-import type { CellBuffer, Palette, Color } from "@effect-tui/core"
+import type { CellBuffer, Color, Palette } from "@effect-tui/core"
 import { Colors } from "@effect-tui/core"
-import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
-import { SingleChildHost } from "./single-child.js"
+import type { CommonProps, HostContext, Rect, Size } from "../reconciler/types.js"
 import {
 	type BorderKind,
 	borderChars,
 	drawBorder,
 	type Padding,
 	type PaddingInput,
-	resolvePadding,
 	resolveInheritedBgStyle,
+	resolvePadding,
 	toColorValue,
 } from "../utils/index.js"
+import { SingleChildHost } from "./single-child.js"
 
 export type { BorderKind }
 

package/src/hosts/canvas.ts

@@ -1,7 +1,6 @@
-import type { CellBuffer, Palette, Color } from "@effect-tui/core"
+import type { CellBuffer, Color, Palette } 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 { CommonProps, HostContext, Size } from "../reconciler/types.js"
 import {
 	type BorderKind,
 	borderChars,
@@ -10,6 +9,7 @@ import {
 	styleIdFromProps,
 	toColorValue,
 } from "../utils/index.js"
+import { BaseHost } from "./base.js"
 
 export type { BorderKind }
 

package/src/hosts/codeblock.ts

@@ -1,8 +1,8 @@
-import { Colors, displayWidth, type CellBuffer, type Color, type Palette } from "@effect-tui/core"
+import { type CellBuffer, type Color, Colors, displayWidth, type Palette } from "@effect-tui/core"
 import type { HighlightLine } from "../highlight.js"
-import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
+import type { CommonProps, HostContext, Rect, Size } from "../reconciler/types.js"
+import { type Padding, type PaddingInput, resolveBgStyle, resolvePadding, styleIdFromProps } from "../utils/index.js"
 import { BaseHost } from "./base.js"
-import { type Padding, type PaddingInput, resolvePadding, resolveBgStyle, styleIdFromProps } from "../utils/index.js"
 
 export interface CodeBlockProps extends CommonProps {
 	lines: HighlightLine[]