@opentuah/react 0.1.77

package/jsx-dev-runtime.d.ts

@@ -0,0 +1,2 @@
+export { Fragment, jsxDEV } from "react/jsx-dev-runtime"
+export type * from "./jsx-namespace.d.ts"

package/jsx-dev-runtime.js

@@ -0,0 +1 @@
+export { Fragment, jsxDEV } from "react/jsx-dev-runtime"

package/jsx-namespace.d.ts

@@ -0,0 +1,62 @@
+import type * as React from "react"
+import type {
+  AsciiFontProps,
+  BoxProps,
+  CodeProps,
+  DiffProps,
+  ExtendedIntrinsicElements,
+  InputProps,
+  LineBreakProps,
+  LineNumberProps,
+  LinkProps,
+  MarkdownProps,
+  OpenTUIComponents,
+  ScrollBoxProps,
+  SelectProps,
+  SpanProps,
+  TabSelectProps,
+  TextareaProps,
+  TextProps,
+} from "./src/types/components"
+
+export namespace JSX {
+  type Element = React.ReactNode
+
+  interface ElementClass extends React.ComponentClass<any> {
+    render(): React.ReactNode
+  }
+
+  interface ElementAttributesProperty {
+    props: {}
+  }
+
+  interface ElementChildrenAttribute {
+    children: {}
+  }
+
+  interface IntrinsicAttributes extends React.Attributes {}
+
+  interface IntrinsicElements extends React.JSX.IntrinsicElements, ExtendedIntrinsicElements<OpenTUIComponents> {
+    box: BoxProps
+    text: TextProps
+    span: SpanProps
+    code: CodeProps
+    diff: DiffProps
+    markdown: MarkdownProps
+    input: InputProps
+    textarea: TextareaProps
+    select: SelectProps
+    scrollbox: ScrollBoxProps
+    "ascii-font": AsciiFontProps
+    "tab-select": TabSelectProps
+    "line-number": LineNumberProps
+    // Text modifiers
+    b: SpanProps
+    i: SpanProps
+    u: SpanProps
+    strong: SpanProps
+    em: SpanProps
+    br: LineBreakProps
+    a: LinkProps
+  }
+}

package/jsx-runtime.d.ts

@@ -0,0 +1,2 @@
+export { Fragment, jsx, jsxs } from "react/jsx-runtime"
+export type * from "./jsx-namespace.d.ts"

package/jsx-runtime.js

@@ -0,0 +1 @@
+export { Fragment, jsx, jsxs } from "react/jsx-runtime"

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@opentuah/react",
+  "module": "index.js",
+  "main": "index.js",
+  "types": "src/index.d.ts",
+  "type": "module",
+  "version": "0.1.77",
+  "description": "React renderer for building terminal user interfaces using OpenTUI core",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/anomalyco/opentui",
+    "directory": "packages/react"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./index.js",
+      "require": "./index.js"
+    },
+    "./renderer": {
+      "types": "./src/reconciler/renderer.d.ts",
+      "import": "./index.js",
+      "require": "./index.js"
+    },
+    "./test-utils": {
+      "types": "./src/test-utils.d.ts",
+      "import": "./test-utils.js",
+      "require": "./test-utils.js"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime.d.ts",
+      "import": "./jsx-runtime.js",
+      "require": "./jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx-dev-runtime.d.ts",
+      "import": "./jsx-dev-runtime.js",
+      "require": "./jsx-dev-runtime.js"
+    }
+  },
+  "dependencies": {
+    "@opentuah/core": "0.1.77",
+    "react-reconciler": "^0.32.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-reconciler": "^0.32.0",
+    "@types/ws": "^8.18.1",
+    "react": ">=19.0.0",
+    "react-devtools-core": "^7.0.1",
+    "typescript": "^5",
+    "ws": "^8.18.0"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-devtools-core": "^7.0.1",
+    "ws": "^8.18.0"
+  }
+}

package/src/components/app.d.ts

@@ -0,0 +1,8 @@
+import type { CliRenderer, KeyHandler } from "@opentui/core";
+interface AppContext {
+    keyHandler: KeyHandler | null;
+    renderer: CliRenderer | null;
+}
+export declare const AppContext: import("react").Context<AppContext>;
+export declare const useAppContext: () => AppContext;
+export {};

package/src/components/error-boundary.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export declare class ErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+}, {
+    hasError: boolean;
+    error: Error | null;
+}> {
+    constructor(props: {
+        children: React.ReactNode;
+    });
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+        error: Error;
+    };
+    render(): any;
+}

package/src/components/index.d.ts

@@ -0,0 +1,42 @@
+import { ASCIIFontRenderable, BoxRenderable, CodeRenderable, DiffRenderable, InputRenderable, LineNumberRenderable, MarkdownRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextareaRenderable, TextRenderable } from "@opentui/core";
+import type { RenderableConstructor } from "../types/components";
+import { BoldSpanRenderable, ItalicSpanRenderable, LineBreakRenderable, LinkRenderable, SpanRenderable, UnderlineSpanRenderable } from "./text";
+export declare const baseComponents: {
+    box: typeof BoxRenderable;
+    text: typeof TextRenderable;
+    code: typeof CodeRenderable;
+    diff: typeof DiffRenderable;
+    markdown: typeof MarkdownRenderable;
+    input: typeof InputRenderable;
+    select: typeof SelectRenderable;
+    textarea: typeof TextareaRenderable;
+    scrollbox: typeof ScrollBoxRenderable;
+    "ascii-font": typeof ASCIIFontRenderable;
+    "tab-select": typeof TabSelectRenderable;
+    "line-number": typeof LineNumberRenderable;
+    span: typeof SpanRenderable;
+    br: typeof LineBreakRenderable;
+    b: typeof BoldSpanRenderable;
+    strong: typeof BoldSpanRenderable;
+    i: typeof ItalicSpanRenderable;
+    em: typeof ItalicSpanRenderable;
+    u: typeof UnderlineSpanRenderable;
+    a: typeof LinkRenderable;
+};
+type ComponentCatalogue = Record<string, RenderableConstructor>;
+export declare const componentCatalogue: ComponentCatalogue;
+/**
+ * Extend the component catalogue with new renderable components
+ *
+ * @example
+ * ```tsx
+ * // Extend with an object of components
+ * extend({
+ *   consoleButton: ConsoleButtonRenderable,
+ *   customBox: CustomBoxRenderable
+ * })
+ * ```
+ */
+export declare function extend<T extends ComponentCatalogue>(objects: T): void;
+export declare function getComponentCatalogue(): ComponentCatalogue;
+export type { ExtendedComponentProps, ExtendedIntrinsicElements, RenderableConstructor } from "../types/components";

package/src/components/text.d.ts

@@ -0,0 +1,30 @@
+import { TextNodeRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
+export declare const textNodeKeys: readonly ["span", "b", "strong", "i", "em", "u", "br", "a"];
+export type TextNodeKey = (typeof textNodeKeys)[number];
+export declare class SpanRenderable extends TextNodeRenderable {
+    private readonly ctx;
+    constructor(ctx: RenderContext | null, options: TextNodeOptions);
+}
+declare class TextModifierRenderable extends SpanRenderable {
+    constructor(options: TextNodeOptions, modifier?: TextNodeKey);
+}
+export declare class BoldSpanRenderable extends TextModifierRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+}
+export declare class ItalicSpanRenderable extends TextModifierRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+}
+export declare class UnderlineSpanRenderable extends TextModifierRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+}
+export declare class LineBreakRenderable extends SpanRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+    add(): number;
+}
+export interface LinkOptions extends TextNodeOptions {
+    href: string;
+}
+export declare class LinkRenderable extends SpanRenderable {
+    constructor(_ctx: RenderContext | null, options: LinkOptions);
+}
+export {};

package/src/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./use-keyboard";
+export * from "./use-renderer";
+export * from "./use-resize";
+export * from "./use-terminal-dimensions";
+export * from "./use-timeline";

package/src/hooks/use-event.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns a stable callback that always calls the latest version of the provided handler.
+ * This prevents unnecessary re-renders and effect re-runs while ensuring the callback
+ * always has access to the latest props and state.
+ *
+ * Useful for event handlers that need to be passed to effects with empty dependency arrays
+ * or memoized child components.
+ */
+export declare function useEffectEvent<T extends (...args: any[]) => any>(handler: T): T;

package/src/hooks/use-keyboard.d.ts

@@ -0,0 +1,22 @@
+import type { KeyEvent } from "@opentui/core";
+export interface UseKeyboardOptions {
+    /** Include release events - callback receives events with eventType: "release" */
+    release?: boolean;
+}
+/**
+ * Subscribe to keyboard events.
+ *
+ * By default, only receives press events (including key repeats with `repeated: true`).
+ * Use `options.release` to also receive release events.
+ *
+ * @example
+ * // Basic press handling (includes repeats)
+ * useKeyboard((e) => console.log(e.name, e.repeated ? "(repeat)" : ""))
+ *
+ * // With release events
+ * useKeyboard((e) => {
+ *   if (e.eventType === "release") keys.delete(e.name)
+ *   else keys.add(e.name)
+ * }, { release: true })
+ */
+export declare const useKeyboard: (handler: (key: KeyEvent) => void, options?: UseKeyboardOptions) => void;

package/src/hooks/use-renderer.d.ts

@@ -0,0 +1 @@
+export declare const useRenderer: () => import("node_modules/@opentuah/core/dist").CliRenderer;

package/src/hooks/use-resize.d.ts

@@ -0,0 +1 @@
+export declare const useOnResize: (callback: (width: number, height: number) => void) => import("node_modules/@opentuah/core/dist").CliRenderer;

package/src/hooks/use-terminal-dimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const useTerminalDimensions: () => {
+    width: number;
+    height: number;
+};

package/src/hooks/use-timeline.d.ts

@@ -0,0 +1,2 @@
+import { Timeline, type TimelineOptions } from "@opentui/core";
+export declare const useTimeline: (options?: TimelineOptions) => Timeline;

package/src/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./components";
+export * from "./components/app";
+export * from "./hooks";
+export * from "./reconciler/renderer";
+export * from "./types/components";
+export { createElement } from "react";

package/src/reconciler/devtools-polyfill.d.ts

@@ -0,0 +1 @@
+export {};

package/src/reconciler/devtools.d.ts

@@ -0,0 +1 @@
+import "./devtools-polyfill";

package/src/reconciler/host-config.d.ts

@@ -0,0 +1,9 @@
+import type { HostConfig } from "react-reconciler";
+import type { Container, HostContext, Instance, Props, PublicInstance, TextInstance, Type } from "../types/host";
+export declare const hostConfig: HostConfig<Type, Props, Container, Instance, TextInstance, unknown, // SuspenseInstance
+unknown, // HydratableInstance
+unknown, // FormInstance
+PublicInstance, HostContext, unknown, // ChildSet
+unknown, // TimeoutHandle
+unknown, // NoTimeout
+unknown>;

package/src/reconciler/reconciler.d.ts

@@ -0,0 +1,5 @@
+import type { RootRenderable } from "@opentui/core";
+import React from "react";
+import ReactReconciler from "react-reconciler";
+export declare const reconciler: ReactReconciler.Reconciler<RootRenderable, import("@opentui/core").BaseRenderable, import("@opentui/core").TextNodeRenderable, unknown, unknown, import("@opentui/core").BaseRenderable>;
+export declare function _render(element: React.ReactNode, root: RootRenderable): any;

package/src/reconciler/renderer.d.ts

@@ -0,0 +1,23 @@
+import { CliRenderer } from "@opentui/core";
+import { type ReactNode } from "react";
+declare const flushSync: {
+    (): void;
+    <R>(fn: () => R): R;
+};
+declare const createPortal: (children: ReactNode, containerInfo: any, implementation: any, key?: string | null) => import("react-reconciler").ReactPortal;
+export type Root = {
+    render: (node: ReactNode) => void;
+    unmount: () => void;
+};
+/**
+ * Creates a root for rendering a React tree with the given CLI renderer.
+ * @param renderer The CLI renderer to use
+ * @returns A root object with a `render` method
+ * @example
+ * ```tsx
+ * const renderer = await createCliRenderer()
+ * createRoot(renderer).render(<App />)
+ * ```
+ */
+export declare function createRoot(renderer: CliRenderer): Root;
+export { createPortal, flushSync };

package/src/test-utils.d.ts

@@ -0,0 +1,11 @@
+import { type TestRendererOptions } from "@opentui/core/testing";
+import { type ReactNode } from "react";
+export declare function testRender(node: ReactNode, testRendererOptions: TestRendererOptions): Promise<{
+    renderer: import("@opentui/core/testing").TestRenderer;
+    mockInput: import("@opentui/core/testing").MockInput;
+    mockMouse: import("@opentui/core/testing").MockMouse;
+    renderOnce: () => Promise<void>;
+    captureCharFrame: () => string;
+    captureSpans: () => import("node_modules/@opentuah/core/dist").CapturedFrame;
+    resize: (width: number, height: number) => void;
+}>;

package/src/types/components.d.ts

@@ -0,0 +1,86 @@
+import type { ASCIIFontOptions, ASCIIFontRenderable, BaseRenderable, BoxOptions, BoxRenderable, CodeOptions, CodeRenderable, DiffRenderable, DiffRenderableOptions, InputRenderable, InputRenderableOptions, LineNumberOptions, LineNumberRenderable, MarkdownOptions, MarkdownRenderable, RenderableOptions, RenderContext, ScrollBoxOptions, ScrollBoxRenderable, SelectOption, SelectRenderable, SelectRenderableOptions, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextareaOptions, TextareaRenderable, TextNodeOptions, TextNodeRenderable, TextOptions, TextRenderable } from "@opentui/core";
+import type React from "react";
+/** Properties that should not be included in the style prop */
+export type NonStyledProps = "id" | "buffered" | "live" | "enableLayout" | "selectable" | "renderAfter" | "renderBefore" | `on${string}`;
+/** React-specific props for all components */
+export type ReactProps<TRenderable = unknown> = {
+    key?: React.Key;
+    ref?: React.Ref<TRenderable>;
+};
+/** Base type for any renderable constructor */
+export type RenderableConstructor<TRenderable extends BaseRenderable = BaseRenderable> = new (ctx: RenderContext, options: any) => TRenderable;
+/** Extract the options type from a renderable constructor */
+type ExtractRenderableOptions<TConstructor> = TConstructor extends new (ctx: RenderContext, options: infer TOptions) => any ? TOptions : never;
+/** Extract the renderable type from a constructor */
+type ExtractRenderable<TConstructor> = TConstructor extends new (ctx: RenderContext, options: any) => infer TRenderable ? TRenderable : never;
+/** Determine which properties should be excluded from styling for different renderable types */
+export type GetNonStyledProperties<TConstructor> = TConstructor extends RenderableConstructor<TextRenderable> ? NonStyledProps | "content" : TConstructor extends RenderableConstructor<BoxRenderable> ? NonStyledProps | "title" : TConstructor extends RenderableConstructor<ASCIIFontRenderable> ? NonStyledProps | "text" | "selectable" : TConstructor extends RenderableConstructor<InputRenderable> ? NonStyledProps | "placeholder" | "value" : TConstructor extends RenderableConstructor<TextareaRenderable> ? NonStyledProps | "placeholder" | "initialValue" : TConstructor extends RenderableConstructor<CodeRenderable> ? NonStyledProps | "content" | "filetype" | "syntaxStyle" | "treeSitterClient" | "conceal" | "drawUnstyledText" : TConstructor extends RenderableConstructor<MarkdownRenderable> ? NonStyledProps | "content" | "syntaxStyle" | "treeSitterClient" | "conceal" | "renderNode" : NonStyledProps;
+/** Base props for container components that accept children */
+type ContainerProps<TOptions> = TOptions & {
+    children?: React.ReactNode;
+};
+/** Smart component props that automatically determine excluded properties */
+type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable extends BaseRenderable> = TOptions & {
+    style?: Partial<Omit<TOptions, GetNonStyledProperties<RenderableConstructor<TRenderable>>>>;
+} & ReactProps<TRenderable>;
+/** Valid text content types for Text component children */
+type TextChildren = string | number | boolean | null | undefined | React.ReactNode;
+export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
+    children?: TextChildren;
+};
+export type SpanProps = ComponentProps<TextNodeOptions, TextNodeRenderable> & {
+    children?: TextChildren;
+};
+export type LinkProps = SpanProps & {
+    href: string;
+};
+export type LineBreakProps = Pick<SpanProps, "id">;
+export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable> & {
+    focused?: boolean;
+};
+export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
+    focused?: boolean;
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+};
+export type TextareaProps = ComponentProps<TextareaOptions, TextareaRenderable> & {
+    focused?: boolean;
+};
+export type CodeProps = ComponentProps<CodeOptions, CodeRenderable>;
+export type MarkdownProps = ComponentProps<MarkdownOptions, MarkdownRenderable>;
+export type DiffProps = ComponentProps<DiffRenderableOptions, DiffRenderable>;
+export type SelectProps = ComponentProps<SelectRenderableOptions, SelectRenderable> & {
+    focused?: boolean;
+    onChange?: (index: number, option: SelectOption | null) => void;
+    onSelect?: (index: number, option: SelectOption | null) => void;
+};
+export type ScrollBoxProps = ComponentProps<ContainerProps<ScrollBoxOptions>, ScrollBoxRenderable> & {
+    focused?: boolean;
+};
+export type AsciiFontProps = ComponentProps<ASCIIFontOptions, ASCIIFontRenderable>;
+export type TabSelectProps = ComponentProps<TabSelectRenderableOptions, TabSelectRenderable> & {
+    focused?: boolean;
+    onChange?: (index: number, option: TabSelectOption | null) => void;
+    onSelect?: (index: number, option: TabSelectOption | null) => void;
+};
+export type LineNumberProps = ComponentProps<ContainerProps<LineNumberOptions>, LineNumberRenderable> & {
+    focused?: boolean;
+};
+/** Convert renderable constructor to component props with proper style exclusions */
+export type ExtendedComponentProps<TConstructor extends RenderableConstructor, TOptions = ExtractRenderableOptions<TConstructor>> = TOptions & {
+    children?: React.ReactNode;
+    style?: Partial<Omit<TOptions, GetNonStyledProperties<TConstructor>>>;
+} & ReactProps<ExtractRenderable<TConstructor>>;
+/** Helper type to create JSX element properties from a component catalogue */
+export type ExtendedIntrinsicElements<TComponentCatalogue extends Record<string, RenderableConstructor>> = {
+    [TComponentName in keyof TComponentCatalogue]: ExtendedComponentProps<TComponentCatalogue[TComponentName]>;
+};
+/**
+ * Global augmentation interface for extended components
+ * This will be augmented by user code using module augmentation
+ */
+export interface OpenTUIComponents {
+    [componentName: string]: RenderableConstructor;
+}
+export {};

package/src/types/host.d.ts

@@ -0,0 +1,11 @@
+import type { BaseRenderable, RootRenderable, TextNodeRenderable } from "@opentui/core";
+import { baseComponents } from "../components";
+export type Type = keyof typeof baseComponents;
+export type Props = Record<string, any>;
+export type Container = RootRenderable;
+export type Instance = BaseRenderable;
+export type TextInstance = TextNodeRenderable;
+export type PublicInstance = Instance;
+export type HostContext = Record<string, any> & {
+    isInsideText?: boolean;
+};

package/src/utils/id.d.ts

@@ -0,0 +1,2 @@
+import type { Type } from "../types/host";
+export declare function getNextId(type: Type): string;

package/src/utils/index.d.ts

@@ -0,0 +1,3 @@
+import type { Instance, Props, Type } from "../types/host";
+export declare function setInitialProperties(instance: Instance, type: Type, props: Props): void;
+export declare function updateProperties(instance: Instance, type: Type, oldProps: Props, newProps: Props): void;

package/test-utils.js

@@ -0,0 +1,39 @@
+// @bun
+import {
+  createRoot
+} from "./chunk-7627c4s7.js";
+import"./chunk-eecw9x2f.js";
+
+// src/test-utils.ts
+import { createTestRenderer } from "@opentui/core/testing";
+import { act } from "react";
+function setIsReactActEnvironment(isReactActEnvironment) {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
+}
+async function testRender(node, testRendererOptions) {
+  let root = null;
+  setIsReactActEnvironment(true);
+  const testSetup = await createTestRenderer({
+    ...testRendererOptions,
+    onDestroy() {
+      act(() => {
+        if (root) {
+          root.unmount();
+          root = null;
+        }
+      });
+      testRendererOptions.onDestroy?.();
+      setIsReactActEnvironment(false);
+    }
+  });
+  root = createRoot(testSetup.renderer);
+  act(() => {
+    if (root) {
+      root.render(node);
+    }
+  });
+  return testSetup;
+}
+export {
+  testRender
+};