@effect-tui/react 0.1.3 → 0.1.5

package/jsx-dev-runtime.ts

@@ -0,0 +1,5 @@
+// Re-export React's jsx dev runtime functions
+export { Fragment, jsxDEV } from "react/jsx-dev-runtime"
+
+// Re-export JSX namespace from jsx-runtime
+export type { JSX } from "./jsx-runtime.js"

package/jsx-runtime.ts

@@ -0,0 +1,54 @@
+// Re-export React's jsx runtime functions
+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 { OverlayProps } from "./src/hosts/overlay.js"
+import type { OverlayItemProps } from "./src/hosts/overlay-item.js"
+
+// Runtime placeholder (the actual JSX namespace below is type-only)
+const JSX = {}
+export { JSX }
+
+export declare namespace JSX {
+	export type Element = React.ReactNode
+
+	export interface ElementClass extends React.ComponentClass<any> {
+		render(): React.ReactNode
+	}
+
+	export interface ElementAttributesProperty {
+		props: {}
+	}
+
+	export interface ElementChildrenAttribute {
+		children: {}
+	}
+
+	export interface IntrinsicAttributes extends React.Attributes {}
+
+	// Extend React's intrinsic elements but override our custom ones
+	export interface IntrinsicElements extends React.JSX.IntrinsicElements {
+		// Our custom TUI elements (override any React conflicts)
+		text: TextProps & { children?: React.ReactNode }
+		spacer: SpacerProps
+		vstack: VStackProps & { children?: React.ReactNode; __static?: boolean }
+		hstack: HStackProps & { children?: React.ReactNode }
+		zstack: ZStackProps & { children?: React.ReactNode }
+		box: BoxProps & { children?: React.ReactNode }
+		canvas: CanvasProps
+		codeblock: CodeBlockProps
+		scroll: ScrollProps & { children?: React.ReactNode }
+		overlay: OverlayProps & { children?: React.ReactNode }
+		overlayItem: OverlayItemProps & { children?: React.ReactNode }
+	}
+}

package/package.json

@@ -1,94 +1,126 @@
 {
-  "name": "@effect-tui/react",
-  "version": "0.1.3",
-  "description": "React bindings for @effect-tui/core",
-  "type": "module",
-  "files": [
-    "dist",
-    "src",
-    "README.md",
-    "LICENSE"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/src/index.js",
-      "types": "./dist/src/index.d.ts"
-    },
-    "./test": {
-      "import": "./dist/src/test/index.js",
-      "types": "./dist/src/test/index.d.ts"
-    },
-    "./visualize": {
-      "import": "./dist/src/visualize/index.js",
-      "types": "./dist/src/visualize/index.d.ts"
-    },
-    "./trace": {
-      "import": "./dist/src/trace/index.js",
-      "types": "./dist/src/trace/index.d.ts"
-    },
-    "./inline": {
-      "import": "./dist/src/inline/index.js",
-      "types": "./dist/src/inline/index.d.ts"
-    },
-    "./jsx-runtime": {
-      "import": "./dist/jsx-runtime.js",
-      "types": "./dist/jsx-runtime.d.ts"
-    },
-    "./jsx-dev-runtime": {
-      "import": "./dist/jsx-dev-runtime.js",
-      "types": "./dist/jsx-dev-runtime.d.ts"
-    }
-  },
-  "types": "./dist/src/index.d.ts",
-  "keywords": [
-    "terminal",
-    "tui",
-    "effect",
-    "react",
-    "cli"
-  ],
-  "author": "Kit Langton",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/kitlangton/effect-tui.git",
-    "directory": "packages/effect-tui-react"
-  },
-  "homepage": "https://github.com/kitlangton/effect-tui",
-  "bugs": "https://github.com/kitlangton/effect-tui/issues",
-  "publishConfig": {
-    "access": "public",
-    "tag": "alpha"
-  },
-  "scripts": {
-    "build": "tsc -p .",
-    "typecheck": "tsc -p . --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "format": "biome format --write .",
-    "format:check": "biome format .",
-    "prepublishOnly": "bun run typecheck && bun run build"
-  },
-  "dependencies": {
-    "@effect/opentelemetry": "^0.59.1",
-    "@opentelemetry/api": "^1.9.0",
-    "@opentelemetry/sdk-trace-base": "^2.2.0",
-    "@effect-tui/core": "^0.1.0-alpha.1",
-    "react-reconciler": "^0.33.0",
-    "shiki": "^3.17.0"
-  },
-  "peerDependencies": {
-    "effect": "^3.0.0",
-    "react": "^18.0.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@effect/vitest": "^0.27.0",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.0.0",
-    "@types/react-reconciler": "^0.32.3",
-    "effect": "^3.19.8",
-    "react": "^19.0.0",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.14"
-  }
+	"name": "@effect-tui/react",
+	"version": "0.1.5",
+	"description": "React bindings for @effect-tui/core",
+	"type": "module",
+	"files": [
+		"dist",
+		"src",
+		"jsx-runtime.ts",
+		"jsx-dev-runtime.ts",
+		"README.md",
+		"LICENSE"
+	],
+	"exports": {
+		".": {
+			"bun": "./src/index.ts",
+			"import": "./dist/src/index.js",
+			"types": "./dist/src/index.d.ts"
+		},
+		"./test": {
+			"bun": "./src/test/index.ts",
+			"import": "./dist/src/test/index.js",
+			"types": "./dist/src/test/index.d.ts"
+		},
+		"./visualize": {
+			"bun": "./src/visualize/index.tsx",
+			"import": "./dist/src/visualize/index.js",
+			"types": "./dist/src/visualize/index.d.ts"
+		},
+		"./inline": {
+			"bun": "./src/inline/index.tsx",
+			"import": "./dist/src/inline/index.js",
+			"types": "./dist/src/inline/index.d.ts"
+		},
+		"./console": {
+			"bun": "./src/console/index.ts",
+			"import": "./dist/src/console/index.js",
+			"types": "./dist/src/console/index.d.ts"
+		},
+		"./remote": {
+			"bun": "./src/remote/index.ts",
+			"import": "./dist/src/remote/index.js",
+			"types": "./dist/src/remote/index.d.ts"
+		},
+		"./jsx-runtime": {
+			"bun": "./jsx-runtime.ts",
+			"import": "./dist/jsx-runtime.js",
+			"types": "./dist/jsx-runtime.d.ts"
+		},
+		"./jsx-dev-runtime": {
+			"bun": "./jsx-dev-runtime.ts",
+			"import": "./dist/jsx-dev-runtime.js",
+			"types": "./dist/jsx-dev-runtime.d.ts"
+		}
+	},
+	"types": "./dist/src/index.d.ts",
+	"keywords": [
+		"terminal",
+		"tui",
+		"effect",
+		"react",
+		"cli"
+	],
+	"author": "Kit Langton",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/kitlangton/effect-tui.git",
+		"directory": "packages/effect-tui-react"
+	},
+	"homepage": "https://github.com/kitlangton/effect-tui",
+	"bugs": "https://github.com/kitlangton/effect-tui/issues",
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "tsc -p .",
+		"typecheck": "tsc -p . --noEmit",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"format": "biome format --write .",
+		"format:check": "biome format .",
+		"prepublishOnly": "bun run typecheck && bun run build"
+	},
+	"dependencies": {
+		"@effect-tui/core": "^0.1.5",
+		"@effect/platform": "^0.94.0",
+		"@effect/platform-bun": "^0.87.0",
+		"@effect/rpc": "^0.73.0",
+		"@parcel/watcher": "^2.5.1",
+		"react-reconciler": "^0.33.0",
+		"shiki": "^3.20.0"
+	},
+	"peerDependencies": {
+		"effect": "^3.19.13",
+		"react": "^19.2.3",
+		"@effect/opentelemetry": "^0.60.0",
+		"@opentelemetry/api": "^1.9.0",
+		"@opentelemetry/sdk-trace-base": "^2.2.0"
+	},
+	"peerDependenciesMeta": {
+		"@effect/opentelemetry": {
+			"optional": true
+		},
+		"@opentelemetry/api": {
+			"optional": true
+		},
+		"@opentelemetry/sdk-trace-base": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@effect/opentelemetry": "^0.60.0",
+		"@effect/vitest": "^0.27.0",
+		"@opentelemetry/api": "^1.9.0",
+		"@opentelemetry/sdk-trace-base": "^2.2.0",
+		"@types/bun": "^1.3.5",
+		"@types/node": "^25.0.3",
+		"@types/react": "^19.0.0",
+		"@types/react-reconciler": "^0.32.3",
+		"effect": "^3.19.13",
+		"react": "^19.2.3",
+		"typescript": "^5.9.3",
+		"vitest": "^4.0.16"
+	}
 }

package/src/codeblock.tsx

@@ -4,44 +4,44 @@ import { highlightCode, toPlainLines, type HighlightLine } from "./highlight.js"
 import type { CodeBlockProps as HostCodeBlockProps } from "./hosts/codeblock.js"
 
 export interface CodeBlockProps extends Omit<HostCodeBlockProps, "lines"> {
-  code: string
-  language?: BundledLanguage
-  theme?: BundledTheme
+	code: string
+	language?: BundledLanguage
+	theme?: BundledTheme
 }
 
 export function CodeBlock({
-  code,
-  language = "ts",
-  theme = "nord",
-  lineNumbers = true,
-  padding = 1,
-  background,
-  ...rest
+	code,
+	language = "ts",
+	theme = "nord",
+	lineNumbers = true,
+	padding = 1,
+	background,
+	...rest
 }: CodeBlockProps) {
-  const [lines, setLines] = useState<HighlightLine[]>(() => toPlainLines(code))
+	const [lines, setLines] = useState<HighlightLine[]>(() => toPlainLines(code))
 
-  useEffect(() => {
-    let cancelled = false
-    highlightCode(code, { lang: language, theme })
-      .then((result) => {
-        if (!cancelled) setLines(result)
-      })
-      .catch((err) => {
-        console.warn("CodeBlock: highlighting failed, falling back to plain text", err)
-        if (!cancelled) setLines(toPlainLines(code))
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [code, language, theme])
+	useEffect(() => {
+		let cancelled = false
+		highlightCode(code, { lang: language, theme })
+			.then((result) => {
+				if (!cancelled) setLines(result)
+			})
+			.catch((err) => {
+				console.warn("CodeBlock: highlighting failed, falling back to plain text", err)
+				if (!cancelled) setLines(toPlainLines(code))
+			})
+		return () => {
+			cancelled = true
+		}
+	}, [code, language, theme])
 
-  return (
-    <codeblock
-      {...(rest as Record<string, unknown>)}
-      lines={lines}
-      lineNumbers={lineNumbers as boolean}
-      padding={padding as HostCodeBlockProps["padding"]}
-      background={background as HostCodeBlockProps["background"]}
-    />
-  )
+	return (
+		<codeblock
+			{...(rest as Record<string, unknown>)}
+			lines={lines}
+			lineNumbers={lineNumbers as boolean}
+			padding={padding as HostCodeBlockProps["padding"]}
+			background={background as HostCodeBlockProps["background"]}
+		/>
+	)
 }

package/src/components/Divider.tsx

@@ -0,0 +1,23 @@
+import { useTerminalSize } from "../renderer-context.js"
+import { Colors, type Color } from "@effect-tui/core"
+
+export interface DividerProps {
+	/** Character to use for the divider (default: "─") */
+	char?: string
+	/** Foreground color (default: gray) */
+	fg?: Color
+}
+
+/**
+ * A full-width horizontal divider line.
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider char="═" fg={Colors.brightBlue} />
+ * ```
+ */
+export function Divider({ char = "─", fg = Colors.gray(12) }: DividerProps) {
+	const { width } = useTerminalSize()
+	return <text fg={fg}>{char.repeat(width)}</text>
+}