@effect-tui/react 0.2.0 → 0.2.2

package/src/remote/Router.ts

@@ -1,7 +1,7 @@
 // RPC handlers for remote session control
 import type { Rpc } from "@effect/rpc"
-import { Effect, Layer, Context } from "effect"
 import type { KeyMsg } from "@effect-tui/core"
+import { Context, Effect, type Layer } from "effect"
 import { TuiRpcs } from "./Procedures.js"
 
 // Service interface for the TUI session
@@ -19,10 +19,7 @@ export interface TuiSessionImpl {
 	}
 }
 
-export class TuiSession extends Context.Tag("TuiSession")<
-	TuiSession,
-	TuiSessionImpl
->() {}
+export class TuiSession extends Context.Tag("TuiSession")<TuiSession, TuiSessionImpl>() {}
 
 // Create the RPC handlers layer
 export const HandlersLive: Layer.Layer<
@@ -55,8 +52,7 @@ export const HandlersLive: Layer.Layer<
 
 			Paste: ({ text }) => Effect.sync(() => session.dispatchPaste(text)),
 
-			Resize: ({ width, height }) =>
-				Effect.sync(() => session.dispatchResize(width, height)),
+			Resize: ({ width, height }) => Effect.sync(() => session.dispatchResize(width, height)),
 
 			Info: () => Effect.sync(() => session.getInfo()),
 		}

package/src/remote/Server.ts

@@ -1,9 +1,10 @@
 // Remote server that exposes TUI session via Unix socket
-import { Effect, Layer } from "effect"
-import { RpcSerialization, RpcServer } from "@effect/rpc"
-import { BunSocketServer } from "@effect/platform-bun"
+
 import * as fs from "node:fs"
 import * as path from "node:path"
+import { BunSocketServer } from "@effect/platform-bun"
+import { RpcSerialization, RpcServer } from "@effect/rpc"
+import { Effect, Layer } from "effect"
 import { TuiRpcs } from "./Procedures.js"
 import { HandlersLive, TuiSession, type TuiSessionImpl } from "./Router.js"
 
@@ -18,8 +19,7 @@ const ensureSocketDir = Effect.sync(() => {
 })
 
 // Get socket path for current process
-export const getSocketPath = (pid?: number) =>
-	path.join(SOCKET_DIR, `${pid ?? process.pid}.sock`)
+export const getSocketPath = (pid?: number) => path.join(SOCKET_DIR, `${pid ?? process.pid}.sock`)
 
 // Clean up socket file
 const cleanupSocket = (socketPath: string) =>
@@ -34,10 +34,7 @@ const cleanupSocket = (socketPath: string) =>
 	})
 
 // Create the server layer
-export const makeServerLayer = (
-	sessionImpl: TuiSessionImpl,
-	socketPath?: string,
-) => {
+export const makeServerLayer = (sessionImpl: TuiSessionImpl, socketPath?: string) => {
 	const actualPath = socketPath ?? getSocketPath()
 
 	// Setup layer - creates directory, cleans stale socket
@@ -52,9 +49,7 @@ export const makeServerLayer = (
 	)
 
 	// RPC handlers layer (needs TuiSession)
-	const HandlersLayer = HandlersLive.pipe(
-		Layer.provide(Layer.succeed(TuiSession, sessionImpl)),
-	)
+	const HandlersLayer = HandlersLive.pipe(Layer.provide(Layer.succeed(TuiSession, sessionImpl)))
 
 	// Full RPC server stack:
 	// 1. RpcServer.layer creates the RPC server, needs handlers

package/src/remote/index.ts

@@ -8,14 +8,14 @@
 // 2. Connect using etui CLI or raw socket at /tmp/effect-tui-sessions/<pid>.sock
 
 export { TuiRpcs } from "./Procedures.js"
-export { TuiSession, HandlersLive } from "./Router.js"
-export { makeServerLayer, getSocketPath } from "./Server.js"
+export { HandlersLive, TuiSession } from "./Router.js"
+export { getSocketPath, makeServerLayer } from "./Server.js"
 
-import { Effect, Exit, Layer, Scope } from "effect"
 import * as fs from "node:fs"
+import { Effect, Exit, Layer, Scope } from "effect"
 import type { TuiRenderer } from "../renderer-types.js"
 import type { TuiSessionImpl } from "./Router.js"
-import { makeServerLayer, getSocketPath } from "./Server.js"
+import { getSocketPath, makeServerLayer } from "./Server.js"
 
 export interface EnableRemoteOptions {
 	/** Custom socket path (defaults to /tmp/effect-tui-sessions/<pid>.sock) */
@@ -55,13 +55,9 @@ function deriveSessionName(entryPath: string): string {
  * @param options - Socket path and entry path for session identification
  * @returns A cleanup function to stop the server
  */
-export function enableRemote(
-	renderer: TuiRenderer,
-	options?: EnableRemoteOptions | string,
-): () => void {
+export function enableRemote(renderer: TuiRenderer, options?: EnableRemoteOptions | string): () => void {
 	// Support old API: enableRemote(renderer, socketPath?)
-	const opts: EnableRemoteOptions =
-		typeof options === "string" ? { socketPath: options } : options ?? {}
+	const opts: EnableRemoteOptions = typeof options === "string" ? { socketPath: options } : (options ?? {})
 	const actualPath = opts.socketPath ?? getSocketPath()
 
 	// Derive session name from entry path

package/src/renderer/core/FrameBuilder.ts

@@ -1,7 +1,7 @@
 import { performance } from "node:perf_hooks"
 import type { CellBuffer, Palette } from "@effect-tui/core"
-import type { HostInstance } from "../../reconciler/types.js"
 import * as Prof from "../../profiler.js"
+import type { HostInstance } from "../../reconciler/types.js"
 
 export interface FrameTimings {
 	clear: number

package/src/renderer/input/InputProcessor.ts

@@ -1,4 +1,4 @@
-import { decodeInput, ANSI, type KeyMsg, type MouseMsg } from "@effect-tui/core"
+import { ANSI, decodeInput, type KeyMsg, type MouseMsg } from "@effect-tui/core"
 
 export interface InputProcessorConfig {
 	exitOnCtrlC: boolean

package/src/renderer/lifecycle/TerminalSetup.ts

@@ -1,5 +1,5 @@
 import { ANSI, Terminal } from "@effect-tui/core"
-import type { TuiWriteStream, TuiReadStream } from "../../renderer-types.js"
+import type { TuiReadStream, TuiWriteStream } from "../../renderer-types.js"
 
 export interface TerminalSetupConfig {
 	mode: "fullscreen" | "inline"

package/src/renderer/lifecycle/index.ts

@@ -1,3 +1,3 @@
 export { EventBus } from "./EventBus.js"
+export { ResizeManager, type ResizeResult, type ResizeState } from "./ResizeManager.js"
 export { TerminalSetup, type TerminalSetupConfig } from "./TerminalSetup.js"
-export { ResizeManager, type ResizeState, type ResizeResult } from "./ResizeManager.js"

package/src/renderer/modes/FullscreenRenderer.ts

@@ -1,5 +1,5 @@
 import { ANSI, emitRowWithReset, rowChanged } from "@effect-tui/core"
-import type { RendererMode, RenderContext, RenderOutput } from "./RendererMode.js"
+import type { RenderContext, RendererMode, RenderOutput } from "./RendererMode.js"
 
 /**
  * Fullscreen rendering mode using alternate buffer.

package/src/renderer/modes/InlineRenderer.ts

@@ -1,5 +1,5 @@
-import { ANSI, emitRowWithReset, rowContentWidth, findChangeWindow } from "@effect-tui/core"
-import type { RendererMode, RenderContext, RenderOutput } from "./RendererMode.js"
+import { ANSI, emitRowWithReset, findChangeWindow, rowContentWidth } from "@effect-tui/core"
+import type { RenderContext, RendererMode, RenderOutput } from "./RendererMode.js"
 
 /**
  * Inline rendering mode that renders in-place without alternate buffer.

package/src/renderer/modes/StaticContentRenderer.ts

@@ -1,4 +1,4 @@
-import { CellBuffer, emitRowWithReset, rowContentWidth, type Palette } from "@effect-tui/core"
+import { CellBuffer, emitRowWithReset, type Palette, rowContentWidth } from "@effect-tui/core"
 import type { HostInstance } from "../../reconciler/types.js"
 import type { TuiWriteStream } from "../../renderer-types.js"
 

package/src/renderer/modes/index.ts

@@ -1,4 +1,4 @@
-export type { RendererMode, RenderContext, RenderOutput } from "./RendererMode.js"
 export { FullscreenRenderer } from "./FullscreenRenderer.js"
 export { InlineRenderer } from "./InlineRenderer.js"
+export type { RenderContext, RendererMode, RenderOutput } from "./RendererMode.js"
 export { StaticContentRenderer } from "./StaticContentRenderer.js"

package/src/renderer-context.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useEffect } from "react"
+import { createContext, useContext, useEffect, useState } from "react"
 import type { TuiRenderer } from "./renderer-types.js"
 
 // Context for accessing renderer in components

package/src/renderer-types.ts

@@ -1,5 +1,5 @@
 import type { KeyMsg, MouseMsg } from "@effect-tui/core"
-import type { HostInstance, HostContext } from "./reconciler/types.js"
+import type { HostContext, HostInstance } from "./reconciler/types.js"
 
 /** Minimal write stream interface for renderer output */
 export interface TuiWriteStream {
@@ -75,6 +75,12 @@ export interface RendererOptions {
 	mode?: "fullscreen" | "inline"
 	/** Exit the process on Ctrl+C unless preventDefault was called. Defaults to true. */
 	exitOnCtrlC?: boolean
+	/** Handle SIGINT/SIGTERM and restore terminal. Defaults to true. */
+	handleSignals?: boolean
+	/** Exit the process after handling SIGINT/SIGTERM. Defaults to true. */
+	exitOnSignal?: boolean
+	/** Override exit codes for signals. Defaults: SIGINT=130, SIGTERM=143. */
+	signalExitCodes?: Partial<Record<"SIGINT" | "SIGTERM", number>>
 	/** Enable diffed rendering (per-line). Defaults to true in runtime, false in manualMode (tests). */
 	diff?: boolean
 	/** Skip automatic render loop. Call flush() manually to render frames. */

package/src/renderer.ts

@@ -1,30 +1,32 @@
-import React, { type ReactNode } from "react"
 import { performance } from "node:perf_hooks"
-import { ANSI, type KeyMsg, type MouseMsg, bufferToString } from "@effect-tui/core"
-import { reconciler, flushSync } from "./reconciler/host-config.js"
-import type { HostContext } from "./reconciler/types.js"
-import * as Prof from "./profiler.js"
+import { ANSI, bufferToString, type KeyMsg, type MouseMsg } from "@effect-tui/core"
+import React, { type ReactNode } from "react"
 import { DEFAULT_FPS } from "./constants.js"
+import { requestExit } from "./exit.js"
+import * as Prof from "./profiler.js"
+import { flushSync, reconciler } from "./reconciler/host-config.js"
+import type { HostContext } from "./reconciler/types.js"
+// Extracted modules
+import { FrameBuilder, RendererState } from "./renderer/core/index.js"
+import { InputProcessor } from "./renderer/input/index.js"
+import { EventBus, TerminalSetup } from "./renderer/lifecycle/index.js"
+import { FullscreenRenderer, InlineRenderer, StaticContentRenderer } from "./renderer/modes/index.js"
+import { RendererContext } from "./renderer-context.js"
 import type {
-	TuiWriteStream,
+	Container,
+	FrameStats,
+	RendererOptions,
 	TuiReadStream,
 	TuiRenderer,
 	TuiRendererInternal,
-	Container,
-	RendererOptions,
-	FrameStats,
+	TuiWriteStream,
 } from "./renderer-types.js"
-import { RendererContext } from "./renderer-context.js"
-
-// Extracted modules
-import { RendererState, FrameBuilder } from "./renderer/core/index.js"
-import { InputProcessor } from "./renderer/input/index.js"
-import { EventBus, TerminalSetup } from "./renderer/lifecycle/index.js"
-import { FullscreenRenderer, InlineRenderer, StaticContentRenderer } from "./renderer/modes/index.js"
 
-// Re-export types and context for backwards compatibility
-export type { TuiWriteStream, TuiReadStream, TuiRenderer, RendererOptions, FrameStats } from "./renderer-types.js"
 export { RendererContext, useRenderer, useTerminalSize } from "./renderer-context.js"
+// Re-export types and context for backwards compatibility
+export type { FrameStats, RendererOptions, TuiReadStream, TuiRenderer, TuiWriteStream } from "./renderer-types.js"
+
+type HandledSignal = "SIGINT" | "SIGTERM"
 
 export function createRenderer(options?: RendererOptions): TuiRenderer {
 	const fps = options?.fps ?? DEFAULT_FPS
@@ -32,6 +34,13 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 	const stdin: TuiReadStream = options?.stdin ?? process.stdin
 	const mode = options?.mode ?? "fullscreen"
 	const exitOnCtrlC = options?.exitOnCtrlC ?? true
+	const handleSignals = options?.handleSignals ?? true
+	const exitOnSignal = options?.exitOnSignal ?? true
+	const signalExitCodes: Record<HandledSignal, number> = {
+		SIGINT: 130,
+		SIGTERM: 143,
+		...options?.signalExitCodes,
+	}
 	const manualMode = options?.manualMode ?? false
 	const enableDiff = options?.diff ?? !manualMode
 	const skipTerminalSetup = options?.skipTerminalSetup ?? false
@@ -74,7 +83,7 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		onQuit: () => {
 			// Clean up terminal state before exiting
 			renderer.stop()
-			process.exit(0)
+			requestExit(0)
 		},
 	})
 
@@ -167,7 +176,7 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 			})
 
 			// Combine static + dynamic output for atomic write
-			let output = staticOutput + modeOutput + state.palette.sgr(0)
+			const output = staticOutput + modeOutput + state.palette.sgr(0)
 			contentH = contentHeight
 			const diffAnsiMs = performance.now() - diffStartMs
 			Prof.endPhase("diff+ansi", t)
@@ -211,6 +220,9 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		}
 	}
 
+	let onExit: (() => void) | null = null
+	let onSignal: ((signal: NodeJS.Signals) => void) | null = null
+
 	// Build renderer object
 	const renderer: TuiRenderer = {
 		get width() {
@@ -229,6 +241,15 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 		onFrameStats: (handler: (stats: FrameStats) => void) => events.onFrameStats(handler),
 		stop() {
 			state.running = false
+			if (onExit) {
+				process.off("exit", onExit)
+				onExit = null
+			}
+			if (onSignal) {
+				process.off("SIGINT", onSignal)
+				process.off("SIGTERM", onSignal)
+				onSignal = null
+			}
 			if (state.loop) {
 				clearInterval(state.loop)
 				state.loop = null
@@ -315,16 +336,20 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 	}
 
 	// Handle normal process exit (synchronous - runs before exit completes)
-	const onExit = () => cleanup()
+	onExit = () => cleanup()
 	process.on("exit", onExit)
 
-	// Handle SIGINT (Ctrl+C from shell, not from TUI input) and SIGTERM
-	const onSignal = () => {
-		cleanup()
-		process.exit(0)
+	if (handleSignals) {
+		// Handle SIGINT (Ctrl+C from shell, not from TUI input) and SIGTERM
+		onSignal = (signal: NodeJS.Signals) => {
+			cleanup()
+			if (!exitOnSignal) return
+			const code = signalExitCodes[signal as HandledSignal] ?? 0
+			requestExit(code)
+		}
+		process.on("SIGINT", onSignal)
+		process.on("SIGTERM", onSignal)
 	}
-	process.on("SIGINT", onSignal)
-	process.on("SIGTERM", onSignal)
 
 	;(renderer as TuiRendererInternal)._container = null
 	return renderer
@@ -436,7 +461,7 @@ export function render(element: ReactNode, options?: RendererOptions): RenderIns
 	// The createRenderer exit handler will also run, but it's idempotent
 	const quit = (code = 0) => {
 		renderer.stop()
-		process.exit(code)
+		requestExit(code)
 	}
 
 	return {

package/src/test/index.ts

@@ -1,8 +1,8 @@
-export { renderTUI, type RenderTUIOptions, type RenderTUIResult } from "./render-tui.js"
 export {
-	MockStdout,
-	MockStdin,
 	encodeKey,
-	stripAnsi,
 	getVisibleLines,
+	MockStdin,
+	MockStdout,
+	stripAnsi,
 } from "./mock-streams.js"
+export { type RenderTUIOptions, type RenderTUIResult, renderTUI } from "./render-tui.js"

package/src/test/render-tui.ts

@@ -1,8 +1,8 @@
-import type { ReactElement } from "react"
 import type { KeyMsg } from "@effect-tui/core"
-import { createRenderer, createRoot } from "../renderer.js"
+import type { ReactElement } from "react"
 import { flushPassiveEffects, flushSync } from "../reconciler/host-config.js"
-import { MockStdout, MockStdin, stripAnsi, getVisibleLines } from "./mock-streams.js"
+import { createRenderer, createRoot } from "../renderer.js"
+import { getVisibleLines, MockStdin, MockStdout, stripAnsi } from "./mock-streams.js"
 
 export interface RenderTUIOptions {
 	width?: number

package/src/utils/flex-layout.ts

@@ -2,9 +2,9 @@
  * Generic flex layout algorithm for VStack and HStack.
  */
 
-import type { HostInstance, Rect, Size } from "../reconciler/types.js"
+import { type Axis, crossDim, crossPos, crossSize, mainDim, mainPos, mainSize, makeRect } from "@effect-tui/core"
 import type { BaseHost } from "../hosts/base.js"
-import { type Axis, mainSize, crossSize, mainPos, crossPos, mainDim, crossDim, makeRect } from "@effect-tui/core"
+import type { HostInstance, Rect, Size } from "../reconciler/types.js"
 
 export type FlexAxis = Axis
 export type FlexAlignment = "start" | "center" | "end"
@@ -17,6 +17,13 @@ export interface FlexMeasureResult {
 /**
  * Measure children along a flex axis.
  * Returns cached sizes and total size.
+ *
+ * SwiftUI-style measure:
+ * 1. First measure all non-greedy children with full available space
+ * 2. Then measure greedy children with remaining space
+ *
+ * This ensures non-greedy elements always get their natural size,
+ * even when sibling greedy elements have large content.
  */
 export function measureFlex(
 	axis: FlexAxis,
@@ -25,26 +32,58 @@ export function measureFlex(
 	maxMain: number,
 	maxCross: number,
 ): FlexMeasureResult {
-	const sizes: Size[] = []
-	let totalMain = 0
+	const sizes: Size[] = new Array(children.length)
 	let maxChildCross = 0
+	const totalSpacing = Math.max(0, (children.length - 1) * spacing)
 
+	// Pass 1: Measure non-greedy children first with full available space
+	let nonGreedyTotal = 0
 	for (let i = 0; i < children.length; i++) {
 		const child = children[i]
-		const remainingMain = Math.max(0, maxMain - totalMain)
+		const greedyWeight = getGreedyWeight(child)
 
-		// Convert main/cross back to width/height for child measure
-		const childMaxW = axis === "vertical" ? maxCross : remainingMain
-		const childMaxH = axis === "vertical" ? remainingMain : maxCross
+		if (greedyWeight === 0) {
+			// Non-greedy: measure with full available space
+			const childMaxW = axis === "vertical" ? maxCross : maxMain
+			const childMaxH = axis === "vertical" ? maxMain : maxCross
+			const size = child.measure(childMaxW, childMaxH)
+			sizes[i] = size
+			nonGreedyTotal += mainSize(axis, size)
+			maxChildCross = Math.max(maxChildCross, crossSize(axis, size))
+		}
+	}
 
-		const size = child.measure(childMaxW, childMaxH)
-		sizes.push(size)
+	// Pass 2: Measure greedy children with remaining space
+	const remainingForGreedy = Math.max(0, maxMain - nonGreedyTotal - totalSpacing)
+	let totalGreedyWeight = 0
+	for (let i = 0; i < children.length; i++) {
+		const greedyWeight = getGreedyWeight(children[i])
+		if (greedyWeight > 0) totalGreedyWeight += greedyWeight
+	}
+
+	let greedyMeasuredTotal = 0
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i]
+		const greedyWeight = getGreedyWeight(child)
 
-		totalMain += mainSize(axis, size)
-		if (i < children.length - 1) totalMain += spacing
-		maxChildCross = Math.max(maxChildCross, crossSize(axis, size))
+		if (greedyWeight > 0) {
+			// Greedy: measure with proportional share of remaining space
+			const greedyMain = totalGreedyWeight > 0
+				? (remainingForGreedy * greedyWeight) / totalGreedyWeight
+				: remainingForGreedy
+			const childMaxW = axis === "vertical" ? maxCross : greedyMain
+			const childMaxH = axis === "vertical" ? greedyMain : maxCross
+			const size = child.measure(childMaxW, childMaxH)
+			sizes[i] = size
+			greedyMeasuredTotal += mainSize(axis, size)
+			maxChildCross = Math.max(maxChildCross, crossSize(axis, size))
+		}
 	}
 
+	// Calculate total main dimension
+	// Use actual measured sizes, not the constraint
+	let totalMain = nonGreedyTotal + greedyMeasuredTotal + totalSpacing
+
 	// Build total size from main/cross dimensions
 	const totalW = axis === "vertical" ? maxChildCross : totalMain
 	const totalH = axis === "vertical" ? totalMain : maxChildCross
@@ -68,6 +107,13 @@ function getGreedyWeight(child: HostInstance): number {
 
 /**
  * Layout children along a flex axis using cached sizes.
+ *
+ * SwiftUI-style layout:
+ * 1. Non-greedy children get their natural (measured) size
+ * 2. Greedy children share the REMAINING space proportionally
+ *
+ * This ensures non-greedy elements (like footers) are always visible,
+ * even when greedy elements (like scroll views) have overflowing content.
  */
 export function layoutFlex(
 	axis: FlexAxis,
@@ -78,23 +124,29 @@ export function layoutFlex(
 	alignment: FlexAlignment,
 	stretchCross: boolean,
 ): void {
-	// Calculate totals
-	let totalNaturalMain = 0
-	let totalGreedyWeight = 0
 	const totalSpacing = Math.max(0, (children.length - 1) * spacing)
+	const availableMain = mainDim(axis, rect)
+
+	// Pass 1: Calculate space needed by non-greedy children
+	let nonGreedyTotal = 0
+	let totalGreedyWeight = 0
 
 	for (let i = 0; i < children.length; i++) {
 		const child = children[i]
 		const size = cachedSizes[i] ?? child.measure(rect.w, rect.h)
-		totalNaturalMain += mainSize(axis, size)
-		totalGreedyWeight += getGreedyWeight(child)
+		const greedyWeight = getGreedyWeight(child)
+
+		if (greedyWeight === 0) {
+			// Non-greedy: use natural size
+			nonGreedyTotal += mainSize(axis, size)
+		}
+		totalGreedyWeight += greedyWeight
 	}
 
-	// Calculate extra space to distribute to greedy children
-	const availableMain = mainDim(axis, rect)
-	const extraSpace = Math.max(0, availableMain - totalNaturalMain - totalSpacing)
+	// Remaining space for greedy children (after non-greedy + spacing)
+	const remainingForGreedy = Math.max(0, availableMain - nonGreedyTotal - totalSpacing)
 
-	// Layout children
+	// Pass 2: Layout all children
 	let curMainPos = mainPos(axis, rect)
 	const crossStartPos = crossPos(axis, rect)
 	const crossDimVal = crossDim(axis, rect)
@@ -103,9 +155,16 @@ export function layoutFlex(
 		const child = children[i]
 		const size = cachedSizes[i] ?? { w: 0, h: 0 }
 		const greedyWeight = getGreedyWeight(child)
-		const greedyExtra = totalGreedyWeight > 0 ? (extraSpace * greedyWeight) / totalGreedyWeight : 0
 
-		const childMainDim = mainSize(axis, size) + greedyExtra
+		let childMainDim: number
+		if (greedyWeight > 0 && totalGreedyWeight > 0) {
+			// Greedy: gets proportional share of remaining space
+			childMainDim = (remainingForGreedy * greedyWeight) / totalGreedyWeight
+		} else {
+			// Non-greedy: gets natural size
+			childMainDim = mainSize(axis, size)
+		}
+
 		const childCrossDim = crossSize(axis, size)
 
 		// Calculate cross position based on alignment

package/src/utils/index.ts

@@ -1,13 +1,13 @@
-export { type HAlign, type VAlign, alignInRect } from "./alignment.js"
-export { type BorderKind, type BorderChars, borderChars, type ClipRect, drawBorder } from "./border.js"
+export { alignInRect, type HAlign, type VAlign } from "./alignment.js"
+export { type BorderChars, type BorderKind, borderChars, type ClipRect, drawBorder } from "./border.js"
+export { type FlexAlignment, type FlexAxis, type FlexMeasureResult, layoutFlex, measureFlex } from "./flex-layout.js"
 export { type Padding, type PaddingInput, resolvePadding } from "./padding.js"
 export {
-	type StyleOptions,
-	type StyleInput,
-	toColorValue,
-	styleSpecFromProps,
-	styleIdFromProps,
 	resolveBgStyle,
 	resolveInheritedBgStyle,
+	type StyleInput,
+	type StyleOptions,
+	styleIdFromProps,
+	styleSpecFromProps,
+	toColorValue,
 } from "./styles.js"
-export { type FlexAxis, type FlexAlignment, type FlexMeasureResult, measureFlex, layoutFlex } from "./flex-layout.js"

package/src/utils/styles.ts

@@ -2,7 +2,7 @@
  * Style utilities for building palette-compatible style objects.
  */
 
-import { parseColor, type Color, type ColorValue, type Palette, type StyleSpec } from "@effect-tui/core"
+import { type Color, type ColorValue, type Palette, parseColor, type StyleSpec } from "@effect-tui/core"
 
 export interface StyleOptions {
 	fg?: ColorValue
@@ -56,8 +56,8 @@ export function resolveBgStyle(palette: Palette, bg?: Color): { value?: ColorVal
 	return { value, styleId }
 }
 
-import type { HostInstance } from "../reconciler/types.js"
 import { getInheritedBg } from "../hosts/base.js"
+import type { HostInstance } from "../reconciler/types.js"
 
 /**
  * Resolve background style, inheriting from parent if not explicitly set.

package/src/visualize/index.tsx

@@ -1,9 +1,9 @@
 // Effect visualization wrapper using React
 // Uses Effect Layer for proper terminal state management across multiple calls
 
-import { useState, useEffect } from "react"
+import { ANSI, Colors } from "@effect-tui/core"
 import { Cause, Context, Duration, Effect, Exit, Fiber, Layer, Option } from "effect"
-import { Colors, ANSI } from "@effect-tui/core"
+import { useEffect, useState } from "react"
 import { createRenderer, createRoot } from "../renderer.js"
 
 const SPINNER_FRAMES = ["⠋", "⠙", "⠸", "⠴", "⠦", "⠇"] as const