@effect-tui/react 0.1.3 → 0.1.4

package/src/highlight.ts

@@ -1,17 +1,17 @@
 import { createHighlighter, type Highlighter, type BundledLanguage, type BundledTheme } from "shiki"
-import type { ColorLike } from "@effect-tui/core"
+import type { Color } from "@effect-tui/core"
 
 export interface HighlightTokenStyle {
-  fg?: ColorLike
-  bg?: ColorLike
-  bold?: boolean
-  italic?: boolean
-  underline?: boolean
+	fg?: Color
+	bg?: Color
+	bold?: boolean
+	italic?: boolean
+	underline?: boolean
 }
 
 export interface HighlightToken {
-  text: string
-  style?: HighlightTokenStyle
+	text: string
+	style?: HighlightTokenStyle
 }
 
 export type HighlightLine = HighlightToken[]
@@ -22,55 +22,55 @@ const DEFAULT_THEME: BundledTheme = "nord"
 const highlighterCache = new Map<string, Promise<Highlighter>>()
 
 async function getCachedHighlighter(theme: BundledTheme): Promise<Highlighter> {
-  const key = String(theme)
-  let cached = highlighterCache.get(key)
-  if (!cached) {
-    cached = createHighlighter({
-      themes: [theme],
-      langs: DEFAULT_LANGS,
-    })
-    highlighterCache.set(key, cached)
-  }
-  return cached
+	const key = String(theme)
+	let cached = highlighterCache.get(key)
+	if (!cached) {
+		cached = createHighlighter({
+			themes: [theme],
+			langs: DEFAULT_LANGS,
+		})
+		highlighterCache.set(key, cached)
+	}
+	return cached
 }
 
 export async function highlightCode(
-  code: string,
-  opts?: { lang?: BundledLanguage; theme?: BundledTheme },
+	code: string,
+	opts?: { lang?: BundledLanguage; theme?: BundledTheme },
 ): Promise<HighlightLine[]> {
-  const lang = opts?.lang ?? ("ts" satisfies BundledLanguage)
-  const theme = opts?.theme ?? DEFAULT_THEME
+	const lang = opts?.lang ?? ("ts" satisfies BundledLanguage)
+	const theme = opts?.theme ?? DEFAULT_THEME
 
-  const highlighter = await getCachedHighlighter(theme)
+	const highlighter = await getCachedHighlighter(theme)
 
-  if (!highlighter.getLoadedLanguages().includes(lang)) {
-    await highlighter.loadLanguage(lang)
-  }
+	if (!highlighter.getLoadedLanguages().includes(lang)) {
+		await highlighter.loadLanguage(lang)
+	}
 
-  const tokensResult = await highlighter.codeToTokens(code, { lang, theme })
-  const tokenLines = Array.isArray(tokensResult)
-    ? tokensResult
-    : // Shiki v3 returns { tokens, theme }
-      (tokensResult as any).tokens
+	const tokensResult = await highlighter.codeToTokens(code, { lang, theme })
+	const tokenLines = Array.isArray(tokensResult)
+		? tokensResult
+		: // Shiki v3 returns { tokens, theme }
+			(tokensResult as any).tokens
 
-  if (!Array.isArray(tokenLines)) return toPlainLines(code)
+	if (!Array.isArray(tokenLines)) return toPlainLines(code)
 
-  return tokenLines.map((line: any[]) =>
-    line.map((token) => {
-      const style: HighlightTokenStyle = {}
-      if (token.color) style.fg = token.color
-      const fs = token.fontStyle ?? 0
-      // fontStyle bitmask is: 1 = Italic, 2 = Bold, 4 = Underline
-      if (fs & 2) style.bold = true
-      if (fs & 1) style.italic = true
-      if (fs & 4) style.underline = true
+	return tokenLines.map((line: any[]) =>
+		line.map((token) => {
+			const style: HighlightTokenStyle = {}
+			if (token.color) style.fg = token.color
+			const fs = token.fontStyle ?? 0
+			// fontStyle bitmask is: 1 = Italic, 2 = Bold, 4 = Underline
+			if (fs & 2) style.bold = true
+			if (fs & 1) style.italic = true
+			if (fs & 4) style.underline = true
 
-      return Object.keys(style).length > 0 ? { text: token.content, style } : { text: token.content }
-    }),
-  )
+			return Object.keys(style).length > 0 ? { text: token.content, style } : { text: token.content }
+		}),
+	)
 }
 
 export function toPlainLines(code: string): HighlightLine[] {
-  if (code.length === 0) return [[]]
-  return code.split(/\r?\n/).map((line) => [{ text: line }])
+	if (code.length === 0) return [[]]
+	return code.split(/\r?\n/).map((line) => [{ text: line }])
 }

package/src/hmr-plugin.ts

@@ -0,0 +1,61 @@
+/**
+ * Bun plugin that transforms autoHmr calls at load time.
+ * Transforms:
+ *   const countAtom = Atom.make(0).pipe(autoHmr)
+ * Into:
+ *   const countAtom = Atom.make(0).pipe(hmr("src/counter.tsx:countAtom"))
+ *
+ * Usage:
+ *   bun --preload ./node_modules/@effect-tui/react/dist/hmr-plugin.js run src/app.tsx
+ *
+ * Or in bunfig.toml:
+ *   [run]
+ *   preload = ["./node_modules/@effect-tui/react/dist/hmr-plugin.js"]
+ */
+import { plugin } from "bun"
+import { relative } from "path"
+
+// Only enable in development
+if (process.env.NODE_ENV !== "production") {
+	plugin({
+		name: "auto-hmr",
+		setup(build) {
+			build.onLoad({ filter: /\.[tj]sx?$/ }, async (args) => {
+				const source = await Bun.file(args.path).text()
+
+				// Skip files that don't use autoHmr
+				if (!source.includes("autoHmr")) {
+					return undefined
+				}
+
+				// Get relative path for cleaner keys
+				const relativePath = relative(process.cwd(), args.path)
+
+				// Transform: const varName = ...pipe(autoHmr) → ...pipe(hmr("path:varName"))
+				// This regex handles the common case of variable declarations
+				const transformed = source.replace(
+					/(?:export\s+)?(?:const|let|var)\s+(\w+)\s*=\s*([^;]+)\.pipe\(\s*autoHmr\s*\)/g,
+					(match, varName, expr) => {
+						const key = `${relativePath}:${varName}`
+						// Preserve export if present
+						const exportPrefix = match.startsWith("export") ? "export " : ""
+						return `${exportPrefix}const ${varName} = ${expr}.pipe(hmr("${key}"))`
+					},
+				)
+
+				// Also handle: someAtom.pipe(autoHmr) without assignment (less common)
+				// For these, we use a counter-based key as fallback
+				let counter = 0
+				const finalTransformed = transformed.replace(/\.pipe\(\s*autoHmr\s*\)/g, () => {
+					counter++
+					return `.pipe(hmr("${relativePath}:anon${counter}"))`
+				})
+
+				return {
+					contents: finalTransformed,
+					loader: args.path.endsWith("x") ? "tsx" : "ts",
+				}
+			})
+		},
+	})
+}

package/src/hooks/index.ts

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

package/src/hooks/use-keyboard.ts

@@ -1,37 +1,57 @@
-import { useEffect } from "react"
+import { useEffect, useRef } from "react"
 import type { KeyMsg } from "@effect-tui/core"
 import { useRenderer } from "../renderer.js"
 
 export type UseKeyboardOptions = {
-  /** Which phase to listen for; defaults to "press" and treats missing phase as "press". */
-  phase?: "press" | "repeat" | "release" | "any"
-  /** Optional predicate to drop keys before they reach the handler. */
-  filter?: (key: KeyMsg) => boolean
-  /**
-   * If true, call preventDefault when available before invoking handler.
-   * This stops further renderer-level handlers (not a terminal effect).
-   */
-  stopPropagation?: boolean
+	/** Which phase to listen for; defaults to "press" and treats missing phase as "press". */
+	phase?: "press" | "repeat" | "release" | "any"
+	/** Optional predicate to drop keys before they reach the handler. */
+	filter?: (key: KeyMsg) => boolean
+	/**
+	 * If true, call preventDefault when available before invoking handler.
+	 * This stops further renderer-level handlers (not a terminal effect).
+	 */
+	stopPropagation?: boolean
 }
 
 /**
  * Subscribe to keyboard events.
  * Handler is called for every key press while mounted.
+ *
+ * Uses a ref internally so you don't need useCallback - the handler
+ * always sees the latest props/state without re-subscribing.
+ *
+ * @example
+ * ```tsx
+ * // No useCallback needed - just pass your handler directly
+ * useKeyboard((key) => {
+ *   if (key.name === "enter") submitForm(currentValue)
+ * })
+ * ```
  */
 export function useKeyboard(handler: (key: KeyMsg) => void, opts?: UseKeyboardOptions): void {
-  const renderer = useRenderer()
-  const phase = opts?.phase ?? "press"
-  const filter = opts?.filter
-  const stopPropagation = opts?.stopPropagation ?? false
+	const renderer = useRenderer()
+	const phase = opts?.phase ?? "press"
+	const filter = opts?.filter
+	const stopPropagation = opts?.stopPropagation ?? false
 
-  useEffect(() => {
-    const wrapped = (key: KeyMsg) => {
-      const keyPhase = key.phase ?? "press"
-      if (phase !== "any" && phase !== keyPhase) return
-      if (filter && !filter(key)) return
-      if (stopPropagation && key.preventDefault) key.preventDefault()
-      handler(key)
-    }
-    return renderer.onKey(wrapped)
-  }, [renderer, handler, phase, filter, stopPropagation])
+	// Store handler in ref so we always call the latest version
+	// without needing to re-subscribe on every render
+	const handlerRef = useRef(handler)
+	handlerRef.current = handler
+
+	// Store filter in ref too for same reason
+	const filterRef = useRef(filter)
+	filterRef.current = filter
+
+	useEffect(() => {
+		const wrapped = (key: KeyMsg) => {
+			const keyPhase = key.phase ?? "press"
+			if (phase !== "any" && phase !== keyPhase) return
+			if (filterRef.current && !filterRef.current(key)) return
+			if (stopPropagation && key.preventDefault) key.preventDefault()
+			handlerRef.current(key)
+		}
+		return renderer.onKey(wrapped)
+	}, [renderer, phase, stopPropagation])
 }

package/src/hooks/use-mouse.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from "react"
+import type { MouseMsg, MouseButton } from "@effect-tui/core"
+import { useRenderer } from "../renderer.js"
+
+export type UseMouseOptions = {
+	/** Filter by action type */
+	action?: "press" | "release" | "drag" | "move" | "any"
+	/** Filter by button */
+	button?: MouseButton | MouseButton[]
+}
+
+/**
+ * Subscribe to mouse events.
+ * Handler is called for mouse clicks, drags, and scroll while mounted.
+ *
+ * Uses a ref internally so you don't need useCallback - the handler
+ * always sees the latest props/state without re-subscribing.
+ *
+ * @example
+ * ```tsx
+ * // No useCallback needed - just pass your handler directly
+ * useMouse((mouse) => {
+ *   if (mouse.action === "press") handleClick(mouse.x, mouse.y)
+ * })
+ * ```
+ */
+export function useMouse(handler: (mouse: MouseMsg) => void, opts?: UseMouseOptions): void {
+	const renderer = useRenderer()
+	const action = opts?.action ?? "any"
+	const button = opts?.button
+
+	// Store handler in ref so we always call the latest version
+	const handlerRef = useRef(handler)
+	handlerRef.current = handler
+
+	useEffect(() => {
+		const wrapped = (mouse: MouseMsg) => {
+			// Filter by action
+			if (action !== "any" && action !== mouse.action) return
+
+			// Filter by button
+			if (button !== undefined) {
+				const buttons = Array.isArray(button) ? button : [button]
+				if (!buttons.includes(mouse.button)) return
+			}
+
+			handlerRef.current(mouse)
+		}
+		return renderer.onMouse(wrapped)
+	}, [renderer, action, button])
+}

package/src/hooks/use-paste.ts

@@ -1,14 +1,29 @@
-import { useEffect } from "react"
+import { useEffect, useRef } from "react"
 import { useRenderer } from "../renderer.js"
 
 /**
  * Subscribe to bracketed paste events (if supported by renderer/terminal).
+ *
+ * Uses a ref internally so you don't need useCallback - the handler
+ * always sees the latest props/state without re-subscribing.
+ *
+ * @example
+ * ```tsx
+ * // No useCallback needed - just pass your handler directly
+ * usePaste((text) => {
+ *   insertText(text, cursorPosition)
+ * })
+ * ```
  */
 export function usePaste(handler: (text: string) => void): void {
-  const renderer = useRenderer()
+	const renderer = useRenderer()
 
-  useEffect(() => {
-    if (!renderer.onPaste) return
-    return renderer.onPaste(handler)
-  }, [renderer, handler])
+	// Store handler in ref so we always call the latest version
+	const handlerRef = useRef(handler)
+	handlerRef.current = handler
+
+	useEffect(() => {
+		if (!renderer.onPaste) return
+		return renderer.onPaste((text) => handlerRef.current(text))
+	}, [renderer])
 }