@effect-tui/react 0.2.2 → 0.2.4

package/package.json

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

package/src/components/MultilineTextInput.tsx

@@ -335,7 +335,7 @@ export function MultilineTextInput({
 		if (newRow !== cursor.row || newCol !== cursor.col) {
 			setCursor({ row: newRow, col: newCol })
 		}
-	}, [value, logicalLines, layout.lines, cursor.row, cursor.col])
+	}, [logicalLines, layout.lines, cursor.row, cursor.col])
 
 	// Keep scroll in bounds (visual lines)
 	useEffect(() => {

package/src/components/TextInput.tsx

@@ -352,5 +352,5 @@ export function TextInput({
 		],
 	)
 
-	return <canvas draw={draw} width={width} height={1} inheritBg />
+	return <canvas draw={draw} width={width} height={1} />
 }

package/src/components/text-editing.ts

@@ -219,7 +219,7 @@ export function deleteWordBackwardMultiline(state: MultilineState): EditResult<M
 		const match = matchPrevWord(prevLine)
 
 		if (match) {
-			const killed = match + "\n"
+			const killed = `${match}\n`
 			const newPrevLine = prevLine.slice(0, prevLine.length - match.length)
 			const newLines = [...lines]
 			newLines[cursor.row - 1] = newPrevLine + currentLine

package/src/console/ConsoleCapture.ts

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

package/src/console/ConsolePopover.tsx

@@ -451,11 +451,11 @@ export function ConsolePopover({
 				{/* Title bar */}
 				<hstack height={1} bg={TITLE_BG}>
 					<text fg={feedback ? Colors.green : TITLE_FG} bg={TITLE_BG}>
-						{" " + titleText}
+						{` ${titleText}`}
 					</text>
 					<spacer />
 					<text fg={Colors.gray(14)} bg={TITLE_BG}>
-						{(mode === "inline" ? inlineHints : hints) + " "}
+						{`${mode === "inline" ? inlineHints : hints} `}
 					</text>
 				</hstack>
 

package/src/debug/DebugOverlay.ts

@@ -162,7 +162,7 @@ export class DebugOverlay {
 	// Key handling - returns true if event was consumed
 	// ─────────────────────────────────────────────────────────────
 
-	handleKey(key: KeyMsg, width: number, height: number): boolean {
+	handleKey(key: KeyMsg, _width: number, height: number): boolean {
 		// Ctrl+Shift+D - toggle overlay (handled even when hidden)
 		if (key.ctrl && key.shift && key.name === "char" && key.text === "d") {
 			this.toggle()
@@ -246,7 +246,7 @@ export class DebugOverlay {
 	// Mouse handling - returns true if event was consumed
 	// ─────────────────────────────────────────────────────────────
 
-	handleMouse(mouse: MouseMsg, width: number, height: number): boolean {
+	handleMouse(mouse: MouseMsg, _width: number, height: number): boolean {
 		if (!this._visible) return false
 
 		const popoverHeight = this.getPopoverHeight(height)

package/src/dev.tsx

@@ -9,12 +9,12 @@
  * - Remote control when EFFECT_TUI_REMOTE=1
  */
 
+import { readFileSync } from "node:fs"
+import { stat } from "node:fs/promises"
+import { dirname } from "node:path"
 import { Colors } from "@effect-tui/core"
 import * as watcher from "@parcel/watcher"
 import { globalValue } from "effect/GlobalValue"
-import { readFileSync } from "fs"
-import { stat } from "fs/promises"
-import { dirname } from "path"
 import React from "react"
 import { Overlay } from "./components/Overlay.js"
 import { ConsolePopover } from "./console/ConsolePopover.js"
@@ -222,6 +222,20 @@ export interface DevRenderResult {
 	stop: () => Promise<void>
 }
 
+/**
+ * Clear require.cache for project files to ensure fresh imports.
+ * Bun uses require.cache internally even for ESM modules.
+ * This is necessary because query-string cache-busting only affects
+ * the entry point, not transitive dependencies.
+ */
+function clearProjectCache(projectRoot: string): void {
+	for (const file of Object.keys(require.cache)) {
+		if (file.startsWith(projectRoot) && !file.includes("node_modules")) {
+			delete require.cache[file]
+		}
+	}
+}
+
 /**
  * Wait for a file to stabilize (no size changes) before proceeding.
  * This avoids importing partially-written files.
@@ -363,10 +377,10 @@ function DevWrapper({
 		<ToastProvider>
 			<Overlay>
 				{/* Base - determines container size */}
-				<>
-					<ScreenshotHandler />
-					{children}
-				</>
+
+				<ScreenshotHandler />
+				{children}
+
 				{/* Overlays */}
 				{visible && (
 					<Overlay.Item alignment={{ v: "bottom" }}>
@@ -401,11 +415,17 @@ export async function devRender(entryPath: string, options?: DevRenderOptions):
 	let version = 0
 	let subscription: watcher.AsyncSubscription | null = null
 
+	// Determine project root for cache clearing
+	const projectRoot = options?.watchDirs?.[0] ?? dirname(entryPath)
+
 	// Import and render the module
 	const render = async () => {
 		const thisVersion = ++version
 
 		try {
+			// Clear module cache for project files before re-importing
+			clearProjectCache(projectRoot)
+
 			// Cache-bust by adding query string with version
 			const mod = await import(`${entryPath}?v=${thisVersion}`)
 
@@ -445,10 +465,8 @@ export async function devRender(entryPath: string, options?: DevRenderOptions):
 	await render()
 
 	// Watch for changes using @parcel/watcher
-	const watchDir = options?.watchDirs?.[0] ?? dirname(entryPath)
-
 	try {
-		subscription = await watcher.subscribe(watchDir, async (err, events) => {
+		subscription = await watcher.subscribe(projectRoot, async (err, events) => {
 			if (err) {
 				options?.onError?.(err)
 				console.error("[devRender] Watcher error:", err)
@@ -472,7 +490,7 @@ export async function devRender(entryPath: string, options?: DevRenderOptions):
 			}, debounceMs)
 		})
 	} catch (err) {
-		console.error(`[devRender] Failed to watch ${watchDir}:`, err)
+		console.error(`[devRender] Failed to watch ${projectRoot}:`, err)
 	}
 
 	const stop = async () => {

package/src/highlight.ts

@@ -1,5 +1,5 @@
 import type { Color } from "@effect-tui/core"
-import { type BundledLanguage, type BundledTheme, createHighlighter, type Highlighter } from "shiki"
+import { type BundledLanguage, type BundledTheme, createHighlighter, type Highlighter, type ThemedToken } from "shiki"
 
 export interface HighlightTokenStyle {
 	fg?: Color
@@ -48,17 +48,15 @@ export async function highlightCode(
 	}
 
 	const tokensResult = await highlighter.codeToTokens(code, { lang, theme })
-	const tokenLines = Array.isArray(tokensResult)
-		? tokensResult
-		: // Shiki v3 returns { tokens, theme }
-			(tokensResult as any).tokens
+	// Shiki v3 returns { tokens: ThemedToken[][], ... }
+	const tokenLines: ThemedToken[][] = tokensResult.tokens
 
 	if (!Array.isArray(tokenLines)) return toPlainLines(code)
 
-	return tokenLines.map((line: any[]) =>
+	return tokenLines.map((line) =>
 		line.map((token) => {
 			const style: HighlightTokenStyle = {}
-			if (token.color) style.fg = token.color
+			if (token.color) style.fg = token.color as Color
 			const fs = token.fontStyle ?? 0
 			// fontStyle bitmask is: 1 = Italic, 2 = Bold, 4 = Underline
 			if (fs & 2) style.bold = true

package/src/hmr-plugin.ts

@@ -12,8 +12,9 @@
  *   [run]
  *   preload = ["./node_modules/@effect-tui/react/dist/hmr-plugin.js"]
  */
+
+import { relative } from "node:path"
 import { plugin } from "bun"
-import { relative } from "path"
 
 // Only enable in development
 if (process.env.NODE_ENV !== "production") {

package/src/hosts/base.ts

@@ -54,7 +54,7 @@ export abstract class BaseHost implements HostInstance {
 
 	protected ctx: HostContext
 
-	constructor(type: string, props: CommonProps, ctx: HostContext) {
+	constructor(type: string, _props: CommonProps, ctx: HostContext) {
 		this.id = `${type}-${idCounter++}`
 		this.type = type
 		this.ctx = ctx

package/src/hosts/single-child.ts

@@ -1,4 +1,4 @@
-import type { CommonProps, HostContext, HostInstance } from "../reconciler/types.js"
+import type { HostInstance } from "../reconciler/types.js"
 import { BaseHost } from "./base.js"
 
 /**
@@ -8,10 +8,6 @@ import { BaseHost } from "./base.js"
 export abstract class SingleChildHost extends BaseHost {
 	private warned = false
 
-	constructor(type: string, props: CommonProps, ctx: HostContext) {
-		super(type, props, ctx)
-	}
-
 	protected get child(): HostInstance | null {
 		return this.children[0] ?? null
 	}

package/src/motion/hooks.ts

@@ -34,8 +34,11 @@ export function useMotionValue<T>(initial: T): MotionValue<T> {
  * If no renderer is passed, it will use the nearest RendererContext (useRenderer()).
  */
 export function useSpringRenderer(renderer?: { requestRender: () => void }) {
-	// Prefer explicit renderer; otherwise pull from context
-	const inferred = renderer ?? useRenderer()
+	// Always call useRenderer to satisfy rules of hooks
+	const contextRenderer = useRenderer()
+	// Prefer explicit renderer; otherwise use context
+	const inferred = renderer ?? contextRenderer
+
 	useEffect(() => {
 		if (!inferred) return
 		// Store the bound function so we can compare for cleanup

package/src/renderer/modes/InlineRenderer.ts

@@ -139,7 +139,7 @@ export class InlineRenderer implements RendererMode {
 
 		// Clear any extra lines if content shrank
 		for (let screenY = rowCount; screenY < this.previousHeight; screenY++) {
-			output += palette.sgr(0) + ANSI.line.clear + "\r\n"
+			output += `${palette.sgr(0) + ANSI.line.clear}\r\n`
 			this.printedWidths[screenY] = 0
 		}
 

package/src/renderer/modes/StaticContentRenderer.ts

@@ -45,7 +45,7 @@ export class StaticContentRenderer {
 		for (let y = 0; y < staticSize.h; y++) {
 			const trimmedWidth = rowContentWidth(staticBuffer, y, frameWidth)
 			const line = emitRowWithReset(staticBuffer, this.palette, y, frameWidth, 0, trimmedWidth)
-			contentLines += line + "\n"
+			contentLines += `${line}\n`
 		}
 
 		// Cache the content for replay on resize

package/src/renderer.ts

@@ -176,7 +176,9 @@ export function createRenderer(options?: RendererOptions): TuiRenderer {
 			})
 
 			// Combine static + dynamic output for atomic write
-			const output = staticOutput + modeOutput + state.palette.sgr(0)
+			// Wrap in synchronized output mode (DECSET 2026) to prevent tearing
+			// Terminals that don't support it will safely ignore these sequences
+			const output = ANSI.sync.begin + staticOutput + modeOutput + state.palette.sgr(0) + ANSI.sync.end
 			contentH = contentHeight
 			const diffAnsiMs = performance.now() - diffStartMs
 			Prof.endPhase("diff+ansi", t)

package/src/test/mock-streams.ts

@@ -134,7 +134,8 @@ export function encodeKey(key: KeyMsg): Buffer {
  */
 export function stripAnsi(str: string): string {
 	// eslint-disable-next-line no-control-regex
-	return str.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, "").replace(/\x1b\][^\x07]*\x07/g, "")
+	// Pattern handles: CSI sequences (including DEC private modes like ?2026h), OSC sequences
+	return str.replace(/\x1b\[[\?0-9;]*[a-zA-Z]/g, "").replace(/\x1b\][^\x07]*\x07/g, "")
 }
 
 /**

package/src/utils/flex-layout.ts

@@ -68,9 +68,8 @@ export function measureFlex(
 
 		if (greedyWeight > 0) {
 			// Greedy: measure with proportional share of remaining space
-			const greedyMain = totalGreedyWeight > 0
-				? (remainingForGreedy * greedyWeight) / totalGreedyWeight
-				: remainingForGreedy
+			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)
@@ -82,7 +81,7 @@ export function measureFlex(
 
 	// Calculate total main dimension
 	// Use actual measured sizes, not the constraint
-	let totalMain = nonGreedyTotal + greedyMeasuredTotal + totalSpacing
+	const totalMain = nonGreedyTotal + greedyMeasuredTotal + totalSpacing
 
 	// Build total size from main/cross dimensions
 	const totalW = axis === "vertical" ? maxChildCross : totalMain