@opentui/react 0.1.63 → 0.1.64

package/README.md

@@ -83,6 +83,7 @@ For optimal TypeScript support, configure your `tsconfig.json`:
   - [System Monitor Animation](#system-monitor-animation)
   - [Styled Text Showcase](#styled-text-showcase)
 - [Component Extension](#component-extension)
+- [Using React DevTools](#using-react-devtools)
 
 ## Core Concepts
 
@@ -970,3 +971,31 @@ function App() {
 const renderer = await createCliRenderer()
 createRoot(renderer).render(<App />)
 ```
+
+## Using React DevTools
+
+OpenTUI React supports [React DevTools](https://github.com/facebook/react/tree/master/packages/react-devtools) for debugging your terminal applications. To enable DevTools integration:
+
+1. Install the optional peer dependency:
+
+```bash
+bun add --dev react-devtools-core@7
+```
+
+2. Start the standalone React DevTools:
+
+```bash
+npx npx react-devtools@7
+```
+
+3. Run your app with the `DEV` environment variable:
+
+```bash
+DEV=true bun run your-app.ts
+```
+
+After the app starts, you should see the component tree in React DevTools. You can inspect and modify props in real-time, and changes will be reflected immediately in your terminal UI.
+
+### Process Exit with DevTools
+
+When DevTools is connected, the WebSocket connection may prevent your process from exiting naturally.

package/chunk-e11q5a3p.js

@@ -0,0 +1,20 @@
+// @bun
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = import.meta.require;
+
+export { __toESM, __require };

package/chunk-fcedq94e.js

@@ -0,0 +1,29 @@
+// @bun
+import {
+  __require,
+  __toESM
+} from "./chunk-e11q5a3p.js";
+
+// src/reconciler/devtools-polyfill.ts
+var g = globalThis;
+if (typeof g.WebSocket === "undefined") {
+  try {
+    const ws = await import("ws");
+    g.WebSocket = ws.default;
+  } catch {}
+}
+g.window ||= globalThis;
+g.self ||= globalThis;
+g.window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = [
+  {
+    type: 2,
+    value: "ErrorBoundary",
+    isEnabled: true,
+    isValid: true
+  }
+];
+
+// src/reconciler/devtools.ts
+import devtools from "react-devtools-core";
+devtools.initialize();
+devtools.connectToDevTools();

package/index.js

@@ -1,4 +1,9 @@
 // @bun
+import {
+  __require,
+  __toESM
+} from "./chunk-e11q5a3p.js";
+
 // src/components/index.ts
 import {
   ASCIIFontRenderable,
@@ -16,7 +21,7 @@ import {
 
 // src/components/text.ts
 import { TextAttributes, TextNodeRenderable } from "@opentui/core";
-var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br"];
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br", "a"];
 
 class SpanRenderable extends TextNodeRenderable {
   ctx;
@@ -68,6 +73,16 @@ class LineBreakRenderable extends SpanRenderable {
   }
 }
 
+class LinkRenderable extends SpanRenderable {
+  constructor(_ctx, options) {
+    const linkOptions = {
+      ...options,
+      link: { url: options.href }
+    };
+    super(null, linkOptions);
+  }
+}
+
 // src/components/index.ts
 var baseComponents = {
   box: BoxRenderable,
@@ -87,7 +102,8 @@ var baseComponents = {
   strong: BoldSpanRenderable,
   i: ItalicSpanRenderable,
   em: ItalicSpanRenderable,
-  u: UnderlineSpanRenderable
+  u: UnderlineSpanRenderable,
+  a: LinkRenderable
 };
 var componentCatalogue = { ...baseComponents };
 function extend(objects) {
@@ -229,6 +245,76 @@ import { ConcurrentRoot } from "react-reconciler/constants";
 
 // src/reconciler/host-config.ts
 import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
+// package.json
+var package_default = {
+  name: "@opentui/react",
+  version: "0.1.64",
+  description: "React renderer for building terminal user interfaces using OpenTUI core",
+  license: "MIT",
+  repository: {
+    type: "git",
+    url: "https://github.com/sst/opentui",
+    directory: "packages/react"
+  },
+  module: "src/index.ts",
+  type: "module",
+  private: true,
+  main: "src/index.ts",
+  exports: {
+    ".": {
+      import: "./src/index.ts",
+      types: "./src/index.ts"
+    },
+    "./test-utils": {
+      import: "./src/test-utils.ts",
+      types: "./src/test-utils.d.ts"
+    },
+    "./jsx-runtime": {
+      import: "./jsx-runtime.js",
+      types: "./jsx-runtime.d.ts"
+    },
+    "./jsx-dev-runtime": {
+      import: "./jsx-dev-runtime.js",
+      types: "./jsx-dev-runtime.d.ts"
+    }
+  },
+  scripts: {
+    build: "bun run scripts/build.ts",
+    "build:dev": "bun run scripts/build.ts --dev",
+    publish: "bun run scripts/publish.ts",
+    test: "bun test"
+  },
+  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"
+  },
+  peerDependenciesMeta: {
+    "react-devtools-core": {
+      optional: true
+    },
+    ws: {
+      optional: true
+    }
+  },
+  dependencies: {
+    "@opentui/core": "workspace:*",
+    "react-reconciler": "^0.32.0"
+  }
+};
+
+// src/reconciler/host-config.ts
 import { createContext as createContext2 } from "react";
 import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
 
@@ -262,18 +348,21 @@ function initEventListeners(instance, eventName, listener, previousListener) {
   }
 }
 function setStyle(instance, styles, oldStyles) {
-  if (styles && typeof styles === "object") {
-    if (oldStyles != null) {
-      for (const styleName in styles) {
-        const value = styles[styleName];
-        if (styles.hasOwnProperty(styleName) && oldStyles[styleName] !== value) {
-          instance[styleName] = value;
+  if (oldStyles != null && typeof oldStyles === "object") {
+    for (const styleName in oldStyles) {
+      if (oldStyles.hasOwnProperty(styleName)) {
+        if (styles == null || !styles.hasOwnProperty(styleName)) {
+          instance[styleName] = null;
         }
       }
-    } else {
-      for (const styleName in styles) {
-        if (styles.hasOwnProperty(styleName)) {
-          const value = styles[styleName];
+    }
+  }
+  if (styles != null && typeof styles === "object") {
+    for (const styleName in styles) {
+      if (styles.hasOwnProperty(styleName)) {
+        const value = styles[styleName];
+        const oldValue = oldStyles?.[styleName];
+        if (value !== oldValue) {
           instance[styleName] = value;
         }
       }
@@ -506,12 +595,33 @@ var hostConfig = {
   prepareScopeUpdate() {},
   getInstanceFromScope() {
     return null;
-  }
+  },
+  rendererPackageName: "@opentui/react",
+  rendererVersion: package_default.version
 };
 
 // src/reconciler/reconciler.ts
 var reconciler = ReactReconciler(hostConfig);
-var flushSync = reconciler.flushSync;
+if (process.env["DEV"] === "true") {
+  try {
+    await import("./chunk-fcedq94e.js");
+  } catch (error) {
+    if (error.code === "ERR_MODULE_NOT_FOUND") {
+      console.warn(`
+The environment variable DEV is set to true, so opentui tried to import \`react-devtools-core\`,
+but this failed as it was not installed. Debugging with React DevTools requires it.
+
+To install use this command:
+
+$ bun add react-devtools-core@7 -d
+        `.trim() + `
+`);
+    } else {
+      throw error;
+    }
+  }
+}
+reconciler.injectIntoDevTools();
 function _render(element, root) {
   const container = reconciler.createContainer(root, ConcurrentRoot, null, false, null, "", console.error, console.error, console.error, console.error, null);
   reconciler.updateContainer(element, container, null, () => {});
@@ -519,6 +629,7 @@ function _render(element, root) {
 }
 
 // src/reconciler/renderer.ts
+var { flushSync, createPortal } = reconciler;
 function createRoot(renderer) {
   let container = null;
   return {
@@ -550,6 +661,7 @@ export {
   flushSync,
   extend,
   createRoot,
+  createPortal,
   createElement,
   componentCatalogue,
   baseComponents,

package/jsx-namespace.d.ts

@@ -8,6 +8,7 @@ import type {
   InputProps,
   LineBreakProps,
   LineNumberProps,
+  LinkProps,
   OpenTUIComponents,
   ScrollBoxProps,
   SelectProps,
@@ -54,5 +55,6 @@ export namespace JSX {
     strong: SpanProps
     em: SpanProps
     br: LineBreakProps
+    a: LinkProps
   }
 }

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.1.63",
+  "version": "0.1.64",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -40,7 +40,7 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.1.63",
+    "@opentui/core": "0.1.64",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {
@@ -48,9 +48,15 @@
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "@types/react-reconciler": "^0.32.0",
-    "typescript": "^5"
+    "@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": ">=19.0.0",
+    "react-devtools-core": "^7.0.1",
+    "ws": "^8.18.0"
   }
 }

package/src/components/index.d.ts

@@ -1,6 +1,6 @@
 import { ASCIIFontRenderable, BoxRenderable, CodeRenderable, DiffRenderable, InputRenderable, LineNumberRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextareaRenderable, TextRenderable } from "@opentui/core";
 import type { RenderableConstructor } from "../types/components";
-import { BoldSpanRenderable, ItalicSpanRenderable, LineBreakRenderable, SpanRenderable, UnderlineSpanRenderable } from "./text";
+import { BoldSpanRenderable, ItalicSpanRenderable, LineBreakRenderable, LinkRenderable, SpanRenderable, UnderlineSpanRenderable } from "./text";
 export declare const baseComponents: {
     box: typeof BoxRenderable;
     text: typeof TextRenderable;
@@ -20,6 +20,7 @@ export declare const baseComponents: {
     i: typeof ItalicSpanRenderable;
     em: typeof ItalicSpanRenderable;
     u: typeof UnderlineSpanRenderable;
+    a: typeof LinkRenderable;
 };
 type ComponentCatalogue = Record<string, RenderableConstructor>;
 export declare const componentCatalogue: ComponentCatalogue;

package/src/components/text.d.ts

@@ -1,5 +1,5 @@
 import { TextNodeRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
-export declare const textNodeKeys: readonly ["span", "b", "strong", "i", "em", "u", "br"];
+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;
@@ -21,4 +21,10 @@ 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/reconciler/chunk-e11q5a3p.js

@@ -0,0 +1,20 @@
+// @bun
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = import.meta.require;
+
+export { __toESM, __require };

package/src/reconciler/chunk-fcedq94e.js

@@ -0,0 +1,29 @@
+// @bun
+import {
+  __require,
+  __toESM
+} from "./chunk-e11q5a3p.js";
+
+// src/reconciler/devtools-polyfill.ts
+var g = globalThis;
+if (typeof g.WebSocket === "undefined") {
+  try {
+    const ws = await import("ws");
+    g.WebSocket = ws.default;
+  } catch {}
+}
+g.window ||= globalThis;
+g.self ||= globalThis;
+g.window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = [
+  {
+    type: 2,
+    value: "ErrorBoundary",
+    isEnabled: true,
+    isValid: true
+  }
+];
+
+// src/reconciler/devtools.ts
+import devtools from "react-devtools-core";
+devtools.initialize();
+devtools.connectToDevTools();

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/reconciler.d.ts

@@ -2,8 +2,4 @@ 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 const flushSync: {
-    (): void;
-    <R>(fn: () => R): R;
-};
 export declare function _render(element: React.ReactNode, root: RootRenderable): any;

package/src/reconciler/renderer.d.ts

@@ -1,7 +1,9 @@
 import { CliRenderer } from "@opentui/core";
 import { type ReactNode } from "react";
-import { flushSync } from "./reconciler";
-export { flushSync };
+declare const flushSync: {
+    (): void;
+    <R>(fn: () => R): R;
+}, createPortal: (children: ReactNode, containerInfo: any, implementation: any, key?: string | null) => import("react-reconciler").ReactPortal;
 export type Root = {
     render: (node: ReactNode) => void;
     unmount: () => void;
@@ -17,3 +19,4 @@ export type Root = {
  * ```
  */
 export declare function createRoot(renderer: CliRenderer): Root;
+export { createPortal, flushSync };

package/src/reconciler/renderer.js

@@ -1,4 +1,9 @@
 // @bun
+import {
+  __require,
+  __toESM
+} from "./chunk-e11q5a3p.js";
+
 // src/reconciler/renderer.ts
 import { engine } from "@opentui/core";
 import React2 from "react";
@@ -45,6 +50,76 @@ import { ConcurrentRoot } from "react-reconciler/constants";
 
 // src/reconciler/host-config.ts
 import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
+// package.json
+var package_default = {
+  name: "@opentui/react",
+  version: "0.1.64",
+  description: "React renderer for building terminal user interfaces using OpenTUI core",
+  license: "MIT",
+  repository: {
+    type: "git",
+    url: "https://github.com/sst/opentui",
+    directory: "packages/react"
+  },
+  module: "src/index.ts",
+  type: "module",
+  private: true,
+  main: "src/index.ts",
+  exports: {
+    ".": {
+      import: "./src/index.ts",
+      types: "./src/index.ts"
+    },
+    "./test-utils": {
+      import: "./src/test-utils.ts",
+      types: "./src/test-utils.d.ts"
+    },
+    "./jsx-runtime": {
+      import: "./jsx-runtime.js",
+      types: "./jsx-runtime.d.ts"
+    },
+    "./jsx-dev-runtime": {
+      import: "./jsx-dev-runtime.js",
+      types: "./jsx-dev-runtime.d.ts"
+    }
+  },
+  scripts: {
+    build: "bun run scripts/build.ts",
+    "build:dev": "bun run scripts/build.ts --dev",
+    publish: "bun run scripts/publish.ts",
+    test: "bun test"
+  },
+  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"
+  },
+  peerDependenciesMeta: {
+    "react-devtools-core": {
+      optional: true
+    },
+    ws: {
+      optional: true
+    }
+  },
+  dependencies: {
+    "@opentui/core": "workspace:*",
+    "react-reconciler": "^0.32.0"
+  }
+};
+
+// src/reconciler/host-config.ts
 import { createContext as createContext2 } from "react";
 import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
 
@@ -65,7 +140,7 @@ import {
 
 // src/components/text.ts
 import { TextAttributes, TextNodeRenderable } from "@opentui/core";
-var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br"];
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br", "a"];
 
 class SpanRenderable extends TextNodeRenderable {
   ctx;
@@ -117,6 +192,16 @@ class LineBreakRenderable extends SpanRenderable {
   }
 }
 
+class LinkRenderable extends SpanRenderable {
+  constructor(_ctx, options) {
+    const linkOptions = {
+      ...options,
+      link: { url: options.href }
+    };
+    super(null, linkOptions);
+  }
+}
+
 // src/components/index.ts
 var baseComponents = {
   box: BoxRenderable,
@@ -136,7 +221,8 @@ var baseComponents = {
   strong: BoldSpanRenderable,
   i: ItalicSpanRenderable,
   em: ItalicSpanRenderable,
-  u: UnderlineSpanRenderable
+  u: UnderlineSpanRenderable,
+  a: LinkRenderable
 };
 var componentCatalogue = { ...baseComponents };
 function getComponentCatalogue() {
@@ -173,18 +259,21 @@ function initEventListeners(instance, eventName, listener, previousListener) {
   }
 }
 function setStyle(instance, styles, oldStyles) {
-  if (styles && typeof styles === "object") {
-    if (oldStyles != null) {
-      for (const styleName in styles) {
-        const value = styles[styleName];
-        if (styles.hasOwnProperty(styleName) && oldStyles[styleName] !== value) {
-          instance[styleName] = value;
+  if (oldStyles != null && typeof oldStyles === "object") {
+    for (const styleName in oldStyles) {
+      if (oldStyles.hasOwnProperty(styleName)) {
+        if (styles == null || !styles.hasOwnProperty(styleName)) {
+          instance[styleName] = null;
         }
       }
-    } else {
-      for (const styleName in styles) {
-        if (styles.hasOwnProperty(styleName)) {
-          const value = styles[styleName];
+    }
+  }
+  if (styles != null && typeof styles === "object") {
+    for (const styleName in styles) {
+      if (styles.hasOwnProperty(styleName)) {
+        const value = styles[styleName];
+        const oldValue = oldStyles?.[styleName];
+        if (value !== oldValue) {
           instance[styleName] = value;
         }
       }
@@ -417,12 +506,33 @@ var hostConfig = {
   prepareScopeUpdate() {},
   getInstanceFromScope() {
     return null;
-  }
+  },
+  rendererPackageName: "@opentui/react",
+  rendererVersion: package_default.version
 };
 
 // src/reconciler/reconciler.ts
 var reconciler = ReactReconciler(hostConfig);
-var flushSync = reconciler.flushSync;
+if (process.env["DEV"] === "true") {
+  try {
+    await import("./chunk-fcedq94e.js");
+  } catch (error) {
+    if (error.code === "ERR_MODULE_NOT_FOUND") {
+      console.warn(`
+The environment variable DEV is set to true, so opentui tried to import \`react-devtools-core\`,
+but this failed as it was not installed. Debugging with React DevTools requires it.
+
+To install use this command:
+
+$ bun add react-devtools-core@7 -d
+        `.trim() + `
+`);
+    } else {
+      throw error;
+    }
+  }
+}
+reconciler.injectIntoDevTools();
 function _render(element, root) {
   const container = reconciler.createContainer(root, ConcurrentRoot, null, false, null, "", console.error, console.error, console.error, console.error, null);
   reconciler.updateContainer(element, container, null, () => {});
@@ -430,6 +540,7 @@ function _render(element, root) {
 }
 
 // src/reconciler/renderer.ts
+var { flushSync, createPortal } = reconciler;
 function createRoot(renderer) {
   let container = null;
   return {
@@ -449,5 +560,6 @@ function createRoot(renderer) {
 }
 export {
   flushSync,
-  createRoot
+  createRoot,
+  createPortal
 };

package/src/test-utils/chunk-e11q5a3p.js

@@ -0,0 +1,20 @@
+// @bun
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = import.meta.require;
+
+export { __toESM, __require };

package/src/test-utils/chunk-fcedq94e.js

@@ -0,0 +1,29 @@
+// @bun
+import {
+  __require,
+  __toESM
+} from "./chunk-e11q5a3p.js";
+
+// src/reconciler/devtools-polyfill.ts
+var g = globalThis;
+if (typeof g.WebSocket === "undefined") {
+  try {
+    const ws = await import("ws");
+    g.WebSocket = ws.default;
+  } catch {}
+}
+g.window ||= globalThis;
+g.self ||= globalThis;
+g.window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = [
+  {
+    type: 2,
+    value: "ErrorBoundary",
+    isEnabled: true,
+    isValid: true
+  }
+];
+
+// src/reconciler/devtools.ts
+import devtools from "react-devtools-core";
+devtools.initialize();
+devtools.connectToDevTools();

package/src/test-utils/test-utils.js

@@ -1,4 +1,9 @@
 // @bun
+import {
+  __require,
+  __toESM
+} from "./chunk-e11q5a3p.js";
+
 // src/test-utils.ts
 import { createTestRenderer } from "@opentui/core/testing";
 import { act } from "react";
@@ -49,6 +54,76 @@ import { ConcurrentRoot } from "react-reconciler/constants";
 
 // src/reconciler/host-config.ts
 import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
+// package.json
+var package_default = {
+  name: "@opentui/react",
+  version: "0.1.64",
+  description: "React renderer for building terminal user interfaces using OpenTUI core",
+  license: "MIT",
+  repository: {
+    type: "git",
+    url: "https://github.com/sst/opentui",
+    directory: "packages/react"
+  },
+  module: "src/index.ts",
+  type: "module",
+  private: true,
+  main: "src/index.ts",
+  exports: {
+    ".": {
+      import: "./src/index.ts",
+      types: "./src/index.ts"
+    },
+    "./test-utils": {
+      import: "./src/test-utils.ts",
+      types: "./src/test-utils.d.ts"
+    },
+    "./jsx-runtime": {
+      import: "./jsx-runtime.js",
+      types: "./jsx-runtime.d.ts"
+    },
+    "./jsx-dev-runtime": {
+      import: "./jsx-dev-runtime.js",
+      types: "./jsx-dev-runtime.d.ts"
+    }
+  },
+  scripts: {
+    build: "bun run scripts/build.ts",
+    "build:dev": "bun run scripts/build.ts --dev",
+    publish: "bun run scripts/publish.ts",
+    test: "bun test"
+  },
+  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"
+  },
+  peerDependenciesMeta: {
+    "react-devtools-core": {
+      optional: true
+    },
+    ws: {
+      optional: true
+    }
+  },
+  dependencies: {
+    "@opentui/core": "workspace:*",
+    "react-reconciler": "^0.32.0"
+  }
+};
+
+// src/reconciler/host-config.ts
 import { createContext as createContext2 } from "react";
 import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
 
@@ -69,7 +144,7 @@ import {
 
 // src/components/text.ts
 import { TextAttributes, TextNodeRenderable } from "@opentui/core";
-var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br"];
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br", "a"];
 
 class SpanRenderable extends TextNodeRenderable {
   ctx;
@@ -121,6 +196,16 @@ class LineBreakRenderable extends SpanRenderable {
   }
 }
 
+class LinkRenderable extends SpanRenderable {
+  constructor(_ctx, options) {
+    const linkOptions = {
+      ...options,
+      link: { url: options.href }
+    };
+    super(null, linkOptions);
+  }
+}
+
 // src/components/index.ts
 var baseComponents = {
   box: BoxRenderable,
@@ -140,7 +225,8 @@ var baseComponents = {
   strong: BoldSpanRenderable,
   i: ItalicSpanRenderable,
   em: ItalicSpanRenderable,
-  u: UnderlineSpanRenderable
+  u: UnderlineSpanRenderable,
+  a: LinkRenderable
 };
 var componentCatalogue = { ...baseComponents };
 function getComponentCatalogue() {
@@ -177,18 +263,21 @@ function initEventListeners(instance, eventName, listener, previousListener) {
   }
 }
 function setStyle(instance, styles, oldStyles) {
-  if (styles && typeof styles === "object") {
-    if (oldStyles != null) {
-      for (const styleName in styles) {
-        const value = styles[styleName];
-        if (styles.hasOwnProperty(styleName) && oldStyles[styleName] !== value) {
-          instance[styleName] = value;
+  if (oldStyles != null && typeof oldStyles === "object") {
+    for (const styleName in oldStyles) {
+      if (oldStyles.hasOwnProperty(styleName)) {
+        if (styles == null || !styles.hasOwnProperty(styleName)) {
+          instance[styleName] = null;
         }
       }
-    } else {
-      for (const styleName in styles) {
-        if (styles.hasOwnProperty(styleName)) {
-          const value = styles[styleName];
+    }
+  }
+  if (styles != null && typeof styles === "object") {
+    for (const styleName in styles) {
+      if (styles.hasOwnProperty(styleName)) {
+        const value = styles[styleName];
+        const oldValue = oldStyles?.[styleName];
+        if (value !== oldValue) {
           instance[styleName] = value;
         }
       }
@@ -421,12 +510,33 @@ var hostConfig = {
   prepareScopeUpdate() {},
   getInstanceFromScope() {
     return null;
-  }
+  },
+  rendererPackageName: "@opentui/react",
+  rendererVersion: package_default.version
 };
 
 // src/reconciler/reconciler.ts
 var reconciler = ReactReconciler(hostConfig);
-var flushSync = reconciler.flushSync;
+if (process.env["DEV"] === "true") {
+  try {
+    await import("./chunk-fcedq94e.js");
+  } catch (error) {
+    if (error.code === "ERR_MODULE_NOT_FOUND") {
+      console.warn(`
+The environment variable DEV is set to true, so opentui tried to import \`react-devtools-core\`,
+but this failed as it was not installed. Debugging with React DevTools requires it.
+
+To install use this command:
+
+$ bun add react-devtools-core@7 -d
+        `.trim() + `
+`);
+    } else {
+      throw error;
+    }
+  }
+}
+reconciler.injectIntoDevTools();
 function _render(element, root) {
   const container = reconciler.createContainer(root, ConcurrentRoot, null, false, null, "", console.error, console.error, console.error, console.error, null);
   reconciler.updateContainer(element, container, null, () => {});

package/src/types/components.d.ts

@@ -31,6 +31,9 @@ export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
 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>;
 export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {