@effect-tui/react 0.2.0 → 0.2.2

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.2",
 	"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.2",
 		"@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 {
@@ -352,5 +352,5 @@ export function TextInput({
 		],
 	)
 
-	return <canvas draw={draw} width={width} height={1} />
+	return <canvas draw={draw} width={width} height={1} inheritBg />
 }

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,
@@ -299,107 +300,99 @@ export function ConsolePopover({
 		[contentStartY, scrollState.offset, displayLines.length],
 	)
 
-	// Keyboard handler
-	useKeyboard(
-		useCallback(
-			(key) => {
-				// Ctrl+Y or Ctrl+C - Copy selection
-				if (key.ctrl && !key.shift && key.name === "char" && (key.text === "y" || key.text === "c")) {
-					handleCopy()
-					return
-				}
+	// Keyboard handler - no useCallback needed, useKeyboard uses ref internally
+	useKeyboard((key) => {
+		// Ctrl+Y or Ctrl+C - Copy selection
+		if (key.ctrl && !key.shift && key.name === "char" && (key.text === "y" || key.text === "c")) {
+			handleCopy()
+			return
+		}
 
-				// Ctrl+S - Save logs to file
-				if (key.ctrl && !key.shift && key.name === "char" && key.text === "s") {
-					handleSave()
-					return
-				}
+		// Ctrl+S - Save logs to file
+		if (key.ctrl && !key.shift && key.name === "char" && key.text === "s") {
+			handleSave()
+			return
+		}
 
-				// Size controls
-				if (key.name === "char" && (key.text === "+" || key.text === "=")) {
-					if (mode === "inline") {
-						setInlineHeight((prev) => Math.min(30, prev + 2))
-					} else {
-						setSizePercent((prev) => Math.min(maxHeightPercent, prev + 5))
-					}
-					return
-				}
-				if (key.name === "char" && key.text === "-") {
-					if (mode === "inline") {
-						setInlineHeight((prev) => Math.max(4, prev - 2))
-					} else {
-						setSizePercent((prev) => Math.max(minHeightPercent, prev - 5))
-					}
-					return
-				}
+		// Size controls
+		if (key.name === "char" && (key.text === "+" || key.text === "=")) {
+			if (mode === "inline") {
+				setInlineHeight((prev) => Math.min(30, prev + 2))
+			} else {
+				setSizePercent((prev) => Math.min(maxHeightPercent, prev + 5))
+			}
+			return
+		}
+		if (key.name === "char" && key.text === "-") {
+			if (mode === "inline") {
+				setInlineHeight((prev) => Math.max(4, prev - 2))
+			} else {
+				setSizePercent((prev) => Math.max(minHeightPercent, prev - 5))
+			}
+			return
+		}
 
-				// Shift+up/down - jump to top/bottom
-				if (key.shift && key.name === "up") {
-					scrollToStart()
-					return
-				}
-				if (key.shift && key.name === "down") {
-					scrollToEnd()
-					return
-				}
+		// Shift+up/down - jump to top/bottom
+		if (key.shift && key.name === "up") {
+			scrollToStart()
+			return
+		}
+		if (key.shift && key.name === "down") {
+			scrollToEnd()
+			return
+		}
 
-				// Regular up/down - scroll
-				if (key.name === "up") {
-					scrollBy(-1)
-					return
-				}
-				if (key.name === "down") {
-					scrollBy(1)
-					return
-				}
+		// Regular up/down - scroll
+		if (key.name === "up") {
+			scrollBy(-1)
+			return
+		}
+		if (key.name === "down") {
+			scrollBy(1)
+			return
+		}
 
-				// Home/End
-				if (key.name === "home") {
-					scrollToStart()
-					return
-				}
-				if (key.name === "end") {
-					scrollToEnd()
-					return
-				}
-			},
-			[handleCopy, handleSave, maxHeightPercent, minHeightPercent, scrollToStart, scrollToEnd, scrollBy],
-		),
-	)
+		// Home/End
+		if (key.name === "home") {
+			scrollToStart()
+			return
+		}
+		if (key.name === "end") {
+			scrollToEnd()
+			return
+		}
+	})
 
-	// Mouse handler for text selection
+	// Mouse handler for text selection - no useCallback needed, useMouse uses ref internally
 	useMouse(
-		useCallback(
-			(mouse) => {
-				// Only handle events in content area
-				if (mouse.y < contentStartY || mouse.y >= termHeight) return
-
-				const point = mouseToSelectionPoint(mouse.x, mouse.y)
-				if (!point) return
-
-				if (mouse.action === "press") {
-					// Start new selection
-					setSelectionAnchor(point)
-					setSelectionHead(point)
-					isSelectingRef.current = true
-				} else if (mouse.action === "drag" && isSelectingRef.current) {
-					// Extend selection
-					setSelectionHead(point)
-
-					// Auto-scroll when dragging near edges
-					const relativeY = mouse.y - contentStartY
-					const viewportHeight = popoverHeight - 1 // -1 for title
-					if (relativeY <= 1) {
-						scrollBy(-1)
-					} else if (relativeY >= viewportHeight - 2) {
-						scrollBy(1)
-					}
-				} else if (mouse.action === "release") {
-					isSelectingRef.current = false
+		(mouse) => {
+			// Only handle events in content area
+			if (mouse.y < contentStartY || mouse.y >= termHeight) return
+
+			const point = mouseToSelectionPoint(mouse.x, mouse.y)
+			if (!point) return
+
+			if (mouse.action === "press") {
+				// Start new selection
+				setSelectionAnchor(point)
+				setSelectionHead(point)
+				isSelectingRef.current = true
+			} else if (mouse.action === "drag" && isSelectingRef.current) {
+				// Extend selection
+				setSelectionHead(point)
+
+				// Auto-scroll when dragging near edges
+				const relativeY = mouse.y - contentStartY
+				const viewportHeight = popoverHeight - 1 // -1 for title
+				if (relativeY <= 1) {
+					scrollBy(-1)
+				} else if (relativeY >= viewportHeight - 2) {
+					scrollBy(1)
 				}
-			},
-			[contentStartY, termHeight, mouseToSelectionPoint, popoverHeight, scrollBy],
-		),
+			} else if (mouse.action === "release") {
+				isSelectingRef.current = false
+			}
+		},
 		{ action: "any", button: "left" },
 	)
 
@@ -423,22 +416,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/exit.ts

@@ -0,0 +1,8 @@
+/**
+ * Request a clean process exit.
+ * This schedules process.exit() on the next tick to allow
+ * pending cleanup operations to complete.
+ */
+export function requestExit(code = 0): void {
+	setImmediate(() => process.exit(code))
+}

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 = {