@reliverse/rempts-tui 2.3.1

package/README.md

@@ -0,0 +1,390 @@
+# rempts-tui
+
+A React-based Terminal User Interface library for Rempts CLI framework, powered by OpenTUI's React renderer.
+
+## Features
+
+- **React-based Components**: Build TUIs using familiar React patterns and JSX
+- **Component Library**: Pre-built form components like `Form`, `FormField`, `SelectField`, and `ProgressBar`
+- **OpenTUI Integration**: Full access to OpenTUI's React hooks and components
+- **Type Safety**: Complete TypeScript support with proper type inference
+- **Animation Support**: Built-in timeline system for smooth animations
+- **Keyboard Handling**: Easy keyboard event management with `useKeyboard`
+- **First-Class TUI Support**: TUI rendering is a first-class feature, not a plugin
+
+## Installation
+
+```bash
+bun add rempts-tui react
+```
+
+## Quick Start
+
+```typescript
+import { createCLI, defineCommand } from '@reliverse/rempts-core'
+import { registerTuiRenderer } from '@reliverse/rempts-tui'
+
+const cli = await createCLI({
+  name: 'my-app',
+  version: '1.0.0'
+})
+
+// Register TUI renderer to enable render() functions
+registerTuiRenderer()
+
+// Define a command with TUI using the render property
+const myCommand = defineCommand({
+  name: 'deploy',
+  description: 'Deploy application',
+  render: () => (
+    <box title="Deployment" style={{ border: true, padding: 2 }}>
+      <text>Deploying...</text>
+    </box>
+  ),
+  handler: async () => {
+    // CLI mode handler (used with --no-tui or in non-interactive environments)
+    console.log('Deploying application...')
+  }
+})
+
+cli.command(myCommand)
+await cli.run()
+```
+
+## Usage
+
+### Basic TUI Component
+
+```typescript
+import { defineCommand } from '@reliverse/rempts-core'
+
+function MyTUI() {
+  return (
+    <box title="My App" style={{ border: true, padding: 2 }}>
+      <text>Hello from My App!</text>
+    </box>
+  )
+}
+
+export const myCommand = defineCommand({
+  name: 'my-command',
+  description: 'My command with TUI',
+  render: () => <MyTUI />,
+  handler: async () => {
+    console.log('Running my-command in CLI mode')
+  }
+})
+```
+
+### Using Form Components
+
+```typescript
+import { defineCommand } from '@reliverse/rempts-core'
+import { FormField, SelectField } from '@reliverse/rempts-tui'
+import type { SelectOption } from '@opentui/core'
+import { useState } from 'react'
+
+function ConfigTUI() {
+  const [apiUrl, setApiUrl] = useState('')
+  const [region, setRegion] = useState('us-east')
+
+  const regions: SelectOption[] = [
+    { name: 'US East', value: 'us-east', description: 'US East region' },
+    { name: 'US West', value: 'us-west', description: 'US West region' }
+  ]
+
+  return (
+    <box title="Configure Settings" border padding={2} style={{ flexDirection: 'column' }}>
+      <FormField
+        label="API URL"
+        name="apiUrl"
+        placeholder="https://api.example.com"
+        required
+        value={apiUrl}
+        onChange={setApiUrl}
+      />
+      <SelectField
+        label="Region"
+        name="region"
+        options={regions}
+        onChange={setRegion}
+      />
+    </box>
+  )
+}
+
+export const configureCommand = defineCommand({
+  name: 'configure',
+  description: 'Configure application settings',
+  render: () => <ConfigTUI />
+})
+```
+
+### Using OpenTUI Hooks
+
+```typescript
+import { useKeyboard, useTimeline, useTerminalDimensions } from '@reliverse/rempts-tui'
+
+function InteractiveTUI({ command }) {
+  const [count, setCount] = useState(0)
+  const { width, height } = useTerminalDimensions()
+
+  const timeline = useTimeline({ duration: 2000 })
+
+  useKeyboard((key) => {
+    if (key.name === 'q') {
+      process.exit(0)
+    }
+    if (key.name === 'space') {
+      setCount(prev => prev + 1)
+    }
+  })
+
+  useEffect(() => {
+    timeline.add({ count: 0 }, {
+      count: 100,
+      duration: 2000,
+      onUpdate: (anim) => setCount(anim.targets[0].count)
+    })
+  }, [])
+
+  return (
+    <box title="Interactive Demo" style={{ border: true, padding: 2 }}>
+      <text>Count: {count}</text>
+      <text>Terminal: {width}x{height}</text>
+      <text>Press SPACE to increment, Q to quit</text>
+    </box>
+  )
+}
+```
+
+## Component Library
+
+### Form
+
+A container component for building forms with keyboard navigation.
+
+```typescript
+<Form
+  title="My Form"
+  onSubmit={(values) => console.log(values)}
+  onCancel={() => process.exit(0)}
+>
+  {/* Form fields */}
+</Form>
+```
+
+**Props:**
+
+- `title: string` - Form title
+- `onSubmit: (values: Record<string, any>) => void` - Submit handler
+- `onCancel?: () => void` - Cancel handler (optional)
+
+### FormField
+
+A text input field with label and validation.
+
+```typescript
+<FormField
+  label="Username"
+  name="username"
+  placeholder="Enter username"
+  required
+  value={username}
+  onChange={setUsername}
+  onSubmit={handleSubmit}
+/>
+```
+
+**Props:**
+
+- `label: string` - Field label
+- `name: string` - Field name
+- `placeholder?: string` - Placeholder text
+- `required?: boolean` - Whether field is required
+- `value?: string` - Current value
+- `onChange?: (value: string) => void` - Change handler
+- `onSubmit?: (value: string) => void` - Submit handler
+
+### SelectField
+
+A dropdown selection field.
+
+```typescript
+<SelectField
+  label="Environment"
+  name="env"
+  options={[
+    { name: 'Development', value: 'dev', description: 'Development environment' },
+    { name: 'Production', value: 'prod', description: 'Production environment' }
+  ]}
+  onChange={setEnvironment}
+/>
+```
+
+**Props:**
+
+- `label: string` - Field label
+- `name: string` - Field name
+- `options: SelectOption[]` - Available options
+- `required?: boolean` - Whether field is required
+- `onChange?: (value: string) => void` - Change handler
+
+### ProgressBar
+
+A progress bar component for showing completion status.
+
+```typescript
+<ProgressBar
+  value={75}
+  label="Upload Progress"
+  color="#00ff00"
+/>
+```
+
+**Props:**
+
+- `value: number` - Progress value (0-100)
+- `label?: string` - Progress label
+- `color?: string` - Progress bar color
+
+## OpenTUI Hooks
+
+The plugin re-exports useful OpenTUI React hooks:
+
+### useKeyboard
+
+Handle keyboard events.
+
+```typescript
+import { useKeyboard } from '@reliverse/rempts-tui'
+
+useKeyboard((key) => {
+  if (key.name === 'escape') {
+    process.exit(0)
+  }
+})
+```
+
+### useRenderer
+
+Access the OpenTUI renderer instance.
+
+```typescript
+import { useRenderer } from '@reliverse/rempts-tui'
+
+const renderer = useRenderer()
+renderer.console.show()
+```
+
+### useTerminalDimensions
+
+Get current terminal dimensions.
+
+```typescript
+import { useTerminalDimensions } from '@reliverse/rempts-tui'
+
+const { width, height } = useTerminalDimensions()
+```
+
+### useTimeline
+
+Create and manage animations.
+
+```typescript
+import { useTimeline } from '@reliverse/rempts-tui'
+
+const timeline = useTimeline({ duration: 2000 })
+
+timeline.add({ x: 0 }, {
+  x: 100,
+  duration: 2000,
+  onUpdate: (anim) => setX(anim.targets[0].x)
+})
+```
+
+### useOnResize
+
+Handle terminal resize events.
+
+```typescript
+import { useOnResize } from '@reliverse/rempts-tui'
+
+useOnResize((width, height) => {
+  console.log(`Terminal resized to ${width}x${height}`)
+})
+```
+
+## Plugin Configuration
+
+```typescript
+import { tuiPlugin } from '@reliverse/rempts-tui'
+
+const plugin = tuiPlugin({
+  renderer: {
+    exitOnCtrlC: false,
+    targetFps: 30,
+    enableMouseMovement: true
+  },
+  theme: 'dark',
+  autoForm: false
+})
+```
+
+**Options:**
+
+- `renderer?: CliRendererConfig` - OpenTUI renderer configuration
+- `theme?: 'light' | 'dark' | ThemeConfig` - Theme configuration
+- `autoForm?: boolean` - Enable auto-form generation (disabled for now)
+
+## OpenTUI Components
+
+You can use any OpenTUI React components directly:
+
+```typescript
+import { render } from '@opentui/react'
+
+function MyComponent() {
+  return (
+    <box style={{ border: true, padding: 2 }}>
+      <text>Hello World</text>
+      <input placeholder="Type here..." />
+      <select options={options} />
+    </box>
+  )
+}
+```
+
+Available components:
+
+- `<box>` - Container with borders and layout
+- `<text>` - Text display with styling
+- `<input>` - Text input field
+- `<select>` - Dropdown selection
+- `<scrollbox>` - Scrollable container
+- `<ascii-font>` - ASCII art text
+- `<tab-select>` - Tab-based selection
+
+## Examples
+
+See the `examples/tui-demo` directory for complete examples:
+
+- **Deploy Command**: Animated progress bar with timeline
+- **Configure Command**: Form with input and select fields
+
+## TypeScript Support
+
+The plugin provides full TypeScript support:
+
+```typescript
+import type { TuiComponent, TuiComponentProps } from '@reliverse/rempts-tui'
+
+const MyTUI: TuiComponent = ({ command, args, store }) => {
+  // Fully typed props
+  return <box>{command.name}</box>
+}
+```
+
+## License
+
+MIT

package/dist/components/Form.d.ts

@@ -0,0 +1,7 @@
+export interface FormProps {
+    title: string;
+    onSubmit: (values: Record<string, any>) => void;
+    onCancel?: () => void;
+    children: React.ReactNode;
+}
+export declare function Form({ title, onSubmit, onCancel, children }: FormProps): import("react").JSX.Element;

package/dist/components/Form.js

@@ -0,0 +1,35 @@
+import { useKeyboard } from "@opentui/react";
+import { useCallback, useState } from "react";
+
+export interface FormProps {
+  title: string;
+  onSubmit: (values: Record<string, any>) => void;
+  onCancel?: () => void;
+  children: React.ReactNode;
+}
+
+export function Form({ title, onSubmit, onCancel, children }: FormProps) {
+  const [formValues, setFormValues] = useState<Record<string, any>>({});
+
+  const _handleFieldChange = useCallback((name: string, value: any) => {
+    setFormValues((prev) => ({ ...prev, [name]: value }));
+  }, []);
+
+  useKeyboard((key) => {
+    if (key.name === "escape" && onCancel) {
+      onCancel();
+    }
+    if (key.name === "enter") {
+      onSubmit(formValues);
+    }
+  });
+
+  return (
+    <box border padding={2} style={{ flexDirection: "column" }} title={title}>
+      {children}
+      <box style={{ flexDirection: "row", gap: 2, marginTop: 2 }}>
+        <text content="Press Enter to submit, Esc to cancel" />
+      </box>
+    </box>
+  );
+}

package/dist/components/FormField.d.ts

@@ -0,0 +1,10 @@
+export interface FormFieldProps {
+    label: string;
+    name: string;
+    placeholder?: string;
+    required?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+}
+export declare function FormField({ label, name, placeholder, required, value: initialValue, onChange, onSubmit, }: FormFieldProps): import("react").JSX.Element;

package/dist/components/FormField.js

@@ -0,0 +1,47 @@
+import { useState } from "react";
+
+export interface FormFieldProps {
+  label: string;
+  name: string;
+  placeholder?: string;
+  required?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+}
+
+export function FormField({
+  label,
+  name,
+  placeholder,
+  required,
+  value: initialValue = "",
+  onChange,
+  onSubmit,
+}: FormFieldProps) {
+  const [_value, setValue] = useState(initialValue);
+
+  const handleInput = (newValue: string) => {
+    setValue(newValue);
+    onChange?.(newValue);
+  };
+
+  const handleSubmit = (submittedValue: string) => {
+    onSubmit?.(submittedValue);
+  };
+
+  return (
+    <box style={{ flexDirection: "column", marginBottom: 1 }}>
+      <text content={`${label}${required ? " *" : ""}`} />
+      <box border height={3} style={{ marginTop: 0.5 }} title={label}>
+        <input
+          focused={true}
+          onInput={handleInput}
+          onSubmit={handleSubmit}
+          placeholder={placeholder}
+          style={{ focusedBackgroundColor: "#000000" }}
+        />
+      </box>
+    </box>
+  );
+}

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,6 @@
+export interface ProgressBarProps {
+    value: number;
+    label?: string;
+    color?: string;
+}
+export declare function ProgressBar({ value, label, color }: ProgressBarProps): import("react").JSX.Element;

package/dist/components/ProgressBar.js

@@ -0,0 +1,25 @@
+export interface ProgressBarProps {
+  value: number; // 0-100
+  label?: string;
+  color?: string;
+}
+
+export function ProgressBar({ value, label, color = "#00ff00" }: ProgressBarProps) {
+  const clampedValue = Math.max(0, Math.min(100, value));
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {label && <text content={label} />}
+      <box style={{ backgroundColor: "#333", height: 3, marginTop: 0.5 }}>
+        <box
+          style={{
+            width: `${clampedValue}%`,
+            backgroundColor: color,
+            height: 1,
+          }}
+        />
+      </box>
+      <text content={`${Math.floor(clampedValue)}%`} style={{ marginTop: 0.5 }} />
+    </box>
+  );
+}

package/dist/components/SelectField.d.ts

@@ -0,0 +1,9 @@
+import type { SelectOption } from "@opentui/core";
+export interface SelectFieldProps {
+    label: string;
+    name: string;
+    options: SelectOption[];
+    required?: boolean;
+    onChange?: (value: string) => void;
+}
+export declare function SelectField({ label, name, options, required, onChange }: SelectFieldProps): import("react").JSX.Element;

package/dist/components/SelectField.js

@@ -0,0 +1,30 @@
+import type { SelectOption } from "@opentui/core";
+import { useState } from "react";
+
+export interface SelectFieldProps {
+  label: string;
+  name: string;
+  options: SelectOption[];
+  required?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export function SelectField({ label, name, options, required, onChange }: SelectFieldProps) {
+  const [_selectedIndex, setSelectedIndex] = useState(0);
+
+  const handleChange = (index: number, option: SelectOption | null) => {
+    setSelectedIndex(index);
+    if (option) {
+      onChange?.(option.value);
+    }
+  };
+
+  return (
+    <box style={{ flexDirection: "column", marginBottom: 1 }}>
+      <text content={`${label}${required ? " *" : ""}`} />
+      <box border height={8} style={{ marginTop: 0.5 }}>
+        <select focused={true} onChange={handleChange} options={options} />
+      </box>
+    </box>
+  );
+}

package/dist/components/mod.d.ts

@@ -0,0 +1,6 @@
+export { bold, fg, italic, TextAttributes, t } from "@opentui/core";
+export { useKeyboard, useOnResize, useRenderer, useTerminalDimensions, useTimeline, } from "@opentui/react";
+export * from "./Form.js";
+export * from "./FormField.js";
+export * from "./ProgressBar.js";
+export * from "./SelectField.js";

package/dist/components/mod.js

@@ -0,0 +1,12 @@
+export { bold, fg, italic, TextAttributes, t } from "@opentui/core";
+export {
+  useKeyboard,
+  useOnResize,
+  useRenderer,
+  useTerminalDimensions,
+  useTimeline
+} from "@opentui/react";
+export * from "./Form.js";
+export * from "./FormField.js";
+export * from "./ProgressBar.js";
+export * from "./SelectField.js";

package/dist/mod.d.ts

@@ -0,0 +1,5 @@
+export type { CliRendererConfig, KeyEvent, SelectOption } from "@opentui/core";
+export { bold, fg, italic, TextAttributes, t } from "@opentui/core";
+export { useKeyboard, useOnResize, useRenderer, useTerminalDimensions, useTimeline, } from "@opentui/react";
+export * from "./components/mod.js";
+export { registerTuiRenderer } from "./renderer.js";

package/dist/mod.js

@@ -0,0 +1,10 @@
+export { bold, fg, italic, TextAttributes, t } from "@opentui/core";
+export {
+  useKeyboard,
+  useOnResize,
+  useRenderer,
+  useTerminalDimensions,
+  useTimeline
+} from "@opentui/react";
+export * from "./components/mod.js";
+export { registerTuiRenderer } from "./renderer.js";

package/dist/register.d.ts

@@ -0,0 +1 @@
+export { registerTuiRenderer as registerTui } from "./renderer.js";

package/dist/register.js

@@ -0,0 +1 @@
+export { registerTuiRenderer as registerTui } from "./renderer.js";

package/dist/renderer.d.ts

@@ -0,0 +1 @@
+export declare function registerTuiRenderer(): void;

package/dist/renderer.js

@@ -0,0 +1,24 @@
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import type { RenderArgs } from "@reliverse/rempts-core";
+import { registerTuiRenderer as coreRegisterTuiRenderer } from "@reliverse/rempts-core";
+import type { ReactElement } from "react";
+
+export function registerTuiRenderer(): void {
+  coreRegisterTuiRenderer(async (args: RenderArgs<any, any>) => {
+    const component = args.command.render?.(args);
+
+    if (!component) {
+      throw new Error("TUI render result is missing. Ensure command.render returns JSX.");
+    }
+
+    const renderer = await createCliRenderer({
+      exitOnCtrlC: args.rendererOptions?.exitOnCtrlC ?? true,
+      targetFps: args.rendererOptions?.targetFps ?? 30,
+      enableMouseMovement: args.rendererOptions?.enableMouseMovement ?? true,
+      ...args.rendererOptions,
+    });
+
+    createRoot(renderer).render(component as ReactElement);
+  });
+}

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+export interface TuiRendererOptions {
+    exitOnCtrlC?: boolean;
+    targetFps?: number;
+    enableMouseMovement?: boolean;
+    [key: string]: unknown;
+}
+export interface TuiConfig {
+    renderer?: TuiRendererOptions;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@reliverse/rempts-tui",
+  "version": "2.3.1",
+  "description": "Terminal User Interface plugin for Rempts CLI framework",
+  "keywords": [
+    "cli",
+    "interactive",
+    "rempts",
+    "terminal",
+    "tui",
+    "ui"
+  ],
+  "license": "MIT",
+  "author": "bun dler Contributors",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "main": "src/mod.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/mod.d.ts",
+      "default": "./dist/mod.js"
+    }
+  },
+  "dependencies": {
+    "@opentui/core": "^0.1.72",
+    "@opentui/react": "^0.1.72",
+    "@reliverse/rempts-core": "2.3.1"
+  },
+  "peerDependencies": {
+    "@opentui/core": "^0.1.72",
+    "react": "^19.2.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/Form.tsx

@@ -0,0 +1,35 @@
+import { useKeyboard } from "@opentui/react";
+import { useCallback, useState } from "react";
+
+export interface FormProps {
+  title: string;
+  onSubmit: (values: Record<string, any>) => void;
+  onCancel?: () => void;
+  children: React.ReactNode;
+}
+
+export function Form({ title, onSubmit, onCancel, children }: FormProps) {
+  const [formValues, setFormValues] = useState<Record<string, any>>({});
+
+  const _handleFieldChange = useCallback((name: string, value: any) => {
+    setFormValues((prev) => ({ ...prev, [name]: value }));
+  }, []);
+
+  useKeyboard((key) => {
+    if (key.name === "escape" && onCancel) {
+      onCancel();
+    }
+    if (key.name === "enter") {
+      onSubmit(formValues);
+    }
+  });
+
+  return (
+    <box border padding={2} style={{ flexDirection: "column" }} title={title}>
+      {children}
+      <box style={{ flexDirection: "row", gap: 2, marginTop: 2 }}>
+        <text content="Press Enter to submit, Esc to cancel" />
+      </box>
+    </box>
+  );
+}

package/src/components/FormField.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+
+export interface FormFieldProps {
+  label: string;
+  name: string;
+  placeholder?: string;
+  required?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+}
+
+export function FormField({
+  label,
+  name,
+  placeholder,
+  required,
+  value: initialValue = "",
+  onChange,
+  onSubmit,
+}: FormFieldProps) {
+  const [_value, setValue] = useState(initialValue);
+
+  const handleInput = (newValue: string) => {
+    setValue(newValue);
+    onChange?.(newValue);
+  };
+
+  const handleSubmit = (submittedValue: string) => {
+    onSubmit?.(submittedValue);
+  };
+
+  return (
+    <box style={{ flexDirection: "column", marginBottom: 1 }}>
+      <text content={`${label}${required ? " *" : ""}`} />
+      <box border height={3} style={{ marginTop: 0.5 }} title={label}>
+        <input
+          focused={true}
+          onInput={handleInput}
+          onSubmit={handleSubmit}
+          placeholder={placeholder}
+          style={{ focusedBackgroundColor: "#000000" }}
+        />
+      </box>
+    </box>
+  );
+}

package/src/components/ProgressBar.tsx

@@ -0,0 +1,25 @@
+export interface ProgressBarProps {
+  value: number; // 0-100
+  label?: string;
+  color?: string;
+}
+
+export function ProgressBar({ value, label, color = "#00ff00" }: ProgressBarProps) {
+  const clampedValue = Math.max(0, Math.min(100, value));
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {label && <text content={label} />}
+      <box style={{ backgroundColor: "#333", height: 3, marginTop: 0.5 }}>
+        <box
+          style={{
+            width: `${clampedValue}%`,
+            backgroundColor: color,
+            height: 1,
+          }}
+        />
+      </box>
+      <text content={`${Math.floor(clampedValue)}%`} style={{ marginTop: 0.5 }} />
+    </box>
+  );
+}

package/src/components/SelectField.tsx

@@ -0,0 +1,30 @@
+import type { SelectOption } from "@opentui/core";
+import { useState } from "react";
+
+export interface SelectFieldProps {
+  label: string;
+  name: string;
+  options: SelectOption[];
+  required?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export function SelectField({ label, name, options, required, onChange }: SelectFieldProps) {
+  const [_selectedIndex, setSelectedIndex] = useState(0);
+
+  const handleChange = (index: number, option: SelectOption | null) => {
+    setSelectedIndex(index);
+    if (option) {
+      onChange?.(option.value);
+    }
+  };
+
+  return (
+    <box style={{ flexDirection: "column", marginBottom: 1 }}>
+      <text content={`${label}${required ? " *" : ""}`} />
+      <box border height={8} style={{ marginTop: 0.5 }}>
+        <select focused={true} onChange={handleChange} options={options} />
+      </box>
+    </box>
+  );
+}

package/src/components/mod.ts

@@ -0,0 +1,12 @@
+export { bold, fg, italic, TextAttributes, t } from "@opentui/core";
+export {
+  useKeyboard,
+  useOnResize,
+  useRenderer,
+  useTerminalDimensions,
+  useTimeline,
+} from "@opentui/react";
+export * from "./Form";
+export * from "./FormField";
+export * from "./ProgressBar";
+export * from "./SelectField";

package/src/mod.ts

@@ -0,0 +1,18 @@
+// Export TUI renderer registration
+
+// Re-export useful OpenTUI core types and utilities
+export type { CliRendererConfig, KeyEvent, SelectOption } from "@opentui/core";
+// Re-export text styling utilities
+export { bold, fg, italic, TextAttributes, t } from "@opentui/core";
+
+// Re-export useful OpenTUI React hooks and types
+export {
+  useKeyboard,
+  useOnResize,
+  useRenderer,
+  useTerminalDimensions,
+  useTimeline,
+} from "@opentui/react";
+// Export component library
+export * from "./components/mod";
+export { registerTuiRenderer } from "./renderer";

package/src/register.ts

@@ -0,0 +1 @@
+export { registerTuiRenderer as registerTui } from "./renderer";

package/src/renderer.tsx

@@ -0,0 +1,24 @@
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import type { RenderArgs } from "@reliverse/rempts-core";
+import { registerTuiRenderer as coreRegisterTuiRenderer } from "@reliverse/rempts-core";
+import type { ReactElement } from "react";
+
+export function registerTuiRenderer(): void {
+  coreRegisterTuiRenderer(async (args: RenderArgs<any, any>) => {
+    const component = args.command.render?.(args);
+
+    if (!component) {
+      throw new Error("TUI render result is missing. Ensure command.render returns JSX.");
+    }
+
+    const renderer = await createCliRenderer({
+      exitOnCtrlC: args.rendererOptions?.exitOnCtrlC ?? true,
+      targetFps: args.rendererOptions?.targetFps ?? 30,
+      enableMouseMovement: args.rendererOptions?.enableMouseMovement ?? true,
+      ...args.rendererOptions,
+    });
+
+    createRoot(renderer).render(component as ReactElement);
+  });
+}

package/src/types.ts

@@ -0,0 +1,10 @@
+export interface TuiRendererOptions {
+  exitOnCtrlC?: boolean;
+  targetFps?: number;
+  enableMouseMovement?: boolean;
+  [key: string]: unknown;
+}
+
+export interface TuiConfig {
+  renderer?: TuiRendererOptions;
+}