@effect-tui/react 0.2.0 → 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.2.0",
+	"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.2.0",
+		"@effect-tui/core": "^0.2.1",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.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,8 +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-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 {

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[]

package/src/hosts/flex-container.ts

@@ -1,9 +1,9 @@
 // flex-container.ts — Unified base class for VStackHost and HStackHost
-import type { CellBuffer, Palette, Color } from "@effect-tui/core"
+import type { CellBuffer, Color, Palette } from "@effect-tui/core"
 import { splitConstraints } from "@effect-tui/core"
-import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
+import type { CommonProps, HostContext, Rect, Size } from "../reconciler/types.js"
+import { type FlexAlignment, type FlexAxis, layoutFlex, measureFlex, resolveBgStyle } from "../utils/index.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"

package/src/hosts/hstack.ts

@@ -1,4 +1,4 @@
-import type { HostContext, CommonProps } from "../reconciler/types.js"
+import type { CommonProps, HostContext } from "../reconciler/types.js"
 import { FlexContainerHost, type FlexContainerProps } from "./flex-container.js"
 
 export interface HStackProps extends CommonProps {

package/src/hosts/index.ts

@@ -1,30 +1,30 @@
-import type { HostContext, CommonProps } from "../reconciler/types.js"
+import type { CommonProps, HostContext } from "../reconciler/types.js"
 import type { BaseHost } from "./base.js"
-import { TextHost, RawTextHost } from "./text.js"
-import { SpacerHost } from "./spacer.js"
-import { VStackHost } from "./vstack.js"
-import { HStackHost } from "./hstack.js"
-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 { HStackHost } from "./hstack.js"
 import { OverlayHost } from "./overlay.js"
 import { OverlayItemHost } from "./overlay-item.js"
-export { SingleChildHost } from "./single-child.js"
+import { ScrollHost } from "./scroll.js"
+import { SpacerHost } from "./spacer.js"
+import { RawTextHost, TextHost } from "./text.js"
+import { VStackHost } from "./vstack.js"
+import { ZStackHost } from "./zstack.js"
 
 export { BaseHost } from "./base.js"
-export { TextHost, RawTextHost, type TextProps } from "./text.js"
-export { SpacerHost, type SpacerProps } from "./spacer.js"
-export { VStackHost, type VStackProps } from "./vstack.js"
-export { HStackHost, type HStackProps } from "./hstack.js"
-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 { HStackHost, type HStackProps } from "./hstack.js"
 export { OverlayHost, type OverlayProps } from "./overlay.js"
 export { OverlayItemHost, type OverlayItemProps } from "./overlay-item.js"
+export { ScrollHost, type ScrollProps } from "./scroll.js"
+export { SingleChildHost } from "./single-child.js"
+export { SpacerHost, type SpacerProps } from "./spacer.js"
+export { RawTextHost, TextHost, type TextProps } from "./text.js"
+export { VStackHost, type VStackProps } from "./vstack.js"
+export { ZStackHost, type ZStackProps } from "./zstack.js"
 
 // Use any to allow specialized props on each host type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/hosts/overlay-item.ts

@@ -6,7 +6,7 @@
  */
 
 import type { CellBuffer, Palette, Rect, Size } from "@effect-tui/core"
-import type { HostContext, CommonProps } from "../reconciler/types.js"
+import type { CommonProps, HostContext } from "../reconciler/types.js"
 import { SingleChildHost } from "./single-child.js"
 
 type HAlign = "left" | "center" | "right"

package/src/hosts/overlay.ts

@@ -17,9 +17,9 @@
  */
 
 import type { CellBuffer, Palette, Rect, Size } from "@effect-tui/core"
-import type { HostContext, CommonProps } from "../reconciler/types.js"
-import { BaseHost } from "./base.js"
+import type { CommonProps, HostContext } from "../reconciler/types.js"
 import { alignInRect } from "../utils/index.js"
+import { BaseHost } from "./base.js"
 import type { OverlayItemHost } from "./overlay-item.js"
 
 export interface OverlayProps extends CommonProps {}