@opentui/react 0.0.0-20250908-4906ddad → 0.0.0-20250915-f5db043a

package/README.md

@@ -4,6 +4,14 @@ A React renderer for building terminal user interfaces using [OpenTUI core](http
 
 ## Installation
 
+Quick start with [bun](https://bun.sh) and [create-tui](https://github.com/msmps/create-tui):
+
+```bash
+bun create tui --template react
+```
+
+Manual installation:
+
 ```bash
 bun install @opentui/react @opentui/core react
 ```
@@ -14,14 +22,7 @@ bun install @opentui/react @opentui/core react
 import { render } from "@opentui/react"
 
 function App() {
-  return (
-    <box>
-      <text fg="#00FF00">Hello, Terminal!</text>
-      <box title="Welcome" padding={2}>
-        <text>Welcome to OpenTUI with React!</text>
-      </box>
-    </box>
-  )
+  return <text>Hello, world!</text>
 }
 
 render(<App />)
@@ -56,20 +57,27 @@ OpenTUI React provides several built-in components that map to OpenTUI core rend
 - **`<box>`** - Container with borders and layout
 - **`<input>`** - Text input field
 - **`<select>`** - Selection dropdown
+- **`<scrollbox>`** - A scrollable box
 - **`<tab-select>`** - Tab-based selection
 - **`<ascii-font>`** - Display ASCII art text with different font styles
 
+Helpers:
+
+- **`<span>`, `<strong>`, `<em>`, `<u>`, `<b>`, `<i>`, `<br>`** - Text modifiers (_must be used inside of the text component_)
+
 ### Styling
 
 Components can be styled using props or the `style` prop:
 
 ```tsx
 // Direct props
-<text fg="#FF0000">Hello</text>
+<box backgroundColor="blue" padding={2}>
+  <text>Hello, world!</text>
+</box>
 
 // Style prop
 <box style={{ backgroundColor: "blue", padding: 2 }}>
-  <text>Styled content</text>
+  <text>Hello, world!</text>
 </box>
 ```
 
@@ -102,14 +110,15 @@ Access the OpenTUI renderer instance.
 ```tsx
 import { useRenderer } from "@opentui/react"
 
-function MyComponent() {
+function App() {
   const renderer = useRenderer()
 
   useEffect(() => {
-    renderer.toggleDebugOverlay()
+    renderer.console.show()
+    console.log("Hello, from the console!")
   }, [])
 
-  return <text>Debug available</text>
+  return <box />
 }
 ```
 
@@ -120,7 +129,7 @@ Handle keyboard events.
 ```tsx
 import { useKeyboard } from "@opentui/react"
 
-function MyComponent() {
+function App() {
   useKeyboard((key) => {
     if (key.name === "escape") {
       process.exit(0)
@@ -139,7 +148,7 @@ Handle terminal resize events.
 import { useOnResize, useRenderer } from "@opentui/react"
 import { useEffect } from "react"
 
-function MyComponent() {
+function App() {
   const renderer = useRenderer()
 
   useEffect(() => {
@@ -161,7 +170,7 @@ Get current terminal dimensions and automatically update when the terminal is re
 ```tsx
 import { useTerminalDimensions } from "@opentui/react"
 
-function MyComponent() {
+function App() {
   const { width, height } = useTerminalDimensions()
 
   return (
@@ -186,19 +195,21 @@ function MyComponent() {
 Display text with rich formatting.
 
 ```tsx
-import { bold, fg, t } from "@opentui/core"
-
-function TextExample() {
+function App() {
   return (
     <box>
       {/* Simple text */}
       <text>Hello World</text>
 
       {/* Rich text with children */}
-      <text>{bold(fg("red")("Bold Red Text"))}</text>
+      <text>
+        <span fg="red">Red Text</span>
+      </text>
 
-      {/* Template literals */}
-      <text>{t`${bold("Bold")} and ${fg("blue")("Blue")}`}</text>
+      {/* Text modifiers */}
+      <text>
+        <strong>Bold</strong>, <em>Italic</em>, and <u>Underlined</u>
+      </text>
     </box>
   )
 }
@@ -209,22 +220,23 @@ function TextExample() {
 Container with borders and layout capabilities.
 
 ```tsx
-function BoxExample() {
+function App() {
   return (
     <box flexDirection="column">
       {/* Basic box */}
-      <box>
+      <box border>
         <text>Simple box</text>
       </box>
 
       {/* Box with title and styling */}
-      <box title="Settings" borderStyle="double" padding={2} backgroundColor="blue">
+      <box title="Settings" border borderStyle="double" padding={2} backgroundColor="blue">
         <text>Box content</text>
       </box>
 
       {/* Styled box */}
       <box
         style={{
+          border: true,
           width: 40,
           height: 10,
           margin: 1,
@@ -246,20 +258,16 @@ Text input field with event handling.
 ```tsx
 import { useState } from "react"
 
-function InputExample() {
+function App() {
   const [value, setValue] = useState("")
-  const [focused, setFocused] = useState(true)
 
   return (
-    <box title="Enter your name" style={{ height: 3 }}>
+    <box title="Enter your name" style={{ border: true, height: 3 }}>
       <input
         placeholder="Type here..."
-        focused={focused}
+        focused
         onInput={setValue}
         onSubmit={(value) => console.log("Submitted:", value)}
-        style={{
-          focusedBackgroundColor: "#333333",
-        }}
       />
     </box>
   )
@@ -274,7 +282,7 @@ Dropdown selection component.
 import type { SelectOption } from "@opentui/core"
 import { useState } from "react"
 
-function SelectExample() {
+function App() {
   const [selectedIndex, setSelectedIndex] = useState(0)
 
   const options: SelectOption[] = [
@@ -284,7 +292,7 @@ function SelectExample() {
   ]
 
   return (
-    <box style={{ height: 24 }}>
+    <box style={{ border: true, height: 24 }}>
       <select
         style={{ height: 22 }}
         options={options}
@@ -299,6 +307,50 @@ function SelectExample() {
 }
 ```
 
+### Scrollbox Component
+
+A scrollable box.
+
+```tsx
+function App() {
+  return (
+    <scrollbox
+      style={{
+        rootOptions: {
+          backgroundColor: "#24283b",
+        },
+        wrapperOptions: {
+          backgroundColor: "#1f2335",
+        },
+        viewportOptions: {
+          backgroundColor: "#1a1b26",
+        },
+        contentOptions: {
+          backgroundColor: "#16161e",
+        },
+        scrollbarOptions: {
+          showArrows: true,
+          trackOptions: {
+            foregroundColor: "#7aa2f7",
+            backgroundColor: "#414868",
+          },
+        },
+      }}
+      focused
+    >
+      {Array.from({ length: 1000 }).map((_, i) => (
+        <box
+          key={i}
+          style={{ width: "100%", padding: 1, marginBottom: 1, backgroundColor: i % 2 === 0 ? "#292e42" : "#2f3449" }}
+        >
+          <text content={`Box ${i}`} />
+        </box>
+      ))}
+    </scrollbox>
+  )
+}
+```
+
 ### ASCII Font Component
 
 Display ASCII art text with different font styles.
@@ -307,7 +359,7 @@ Display ASCII art text with different font styles.
 import { measureText } from "@opentui/core"
 import { useState } from "react"
 
-function ASCIIFontExample() {
+function App() {
   const text = "ASCII"
   const [font, setFont] = useState<"block" | "shade" | "slick" | "tiny">("tiny")
 
@@ -317,10 +369,11 @@ function ASCIIFontExample() {
   })
 
   return (
-    <box style={{ paddingLeft: 1, paddingRight: 1 }}>
+    <box style={{ border: true, paddingLeft: 1, paddingRight: 1 }}>
       <box
         style={{
           height: 8,
+          border: true,
           marginBottom: 1,
         }}
       >
@@ -365,10 +418,10 @@ function ASCIIFontExample() {
 ### Login Form
 
 ```tsx
-import { useState, useCallback } from "react"
 import { render, useKeyboard } from "@opentui/react"
+import { useCallback, useState } from "react"
 
-function LoginForm() {
+function App() {
   const [username, setUsername] = useState("")
   const [password, setPassword] = useState("")
   const [focused, setFocused] = useState<"username" | "password">("username")
@@ -389,10 +442,10 @@ function LoginForm() {
   }, [username, password])
 
   return (
-    <box style={{ padding: 2, flexDirection: "column" }}>
+    <box style={{ border: true, padding: 2, flexDirection: "column", gap: 1 }}>
       <text fg="#FFFF00">Login Form</text>
 
-      <box title="Username" style={{ width: 40, height: 3, marginTop: 1 }}>
+      <box title="Username" style={{ border: true, width: 40, height: 3 }}>
         <input
           placeholder="Enter username..."
           onInput={setUsername}
@@ -401,7 +454,7 @@ function LoginForm() {
         />
       </box>
 
-      <box title="Password" style={{ width: 40, height: 3, marginTop: 1 }}>
+      <box title="Password" style={{ border: true, width: 40, height: 3 }}>
         <input
           placeholder="Enter password..."
           onInput={setPassword}
@@ -421,16 +474,16 @@ function LoginForm() {
   )
 }
 
-render(<LoginForm />)
+render(<App />)
 ```
 
 ### Counter with Timer
 
 ```tsx
-import { useState, useEffect } from "react"
 import { render } from "@opentui/react"
+import { useEffect, useState } from "react"
 
-function Counter() {
+function App() {
   const [count, setCount] = useState(0)
 
   useEffect(() => {
@@ -448,48 +501,66 @@ function Counter() {
   )
 }
 
-render(<Counter />)
+render(<App />)
 ```
 
 ### Styled Text Showcase
 
 ```tsx
-import { blue, bold, red, t, underline } from "@opentui/core"
 import { render } from "@opentui/react"
 
-function StyledTextShowcase() {
+function App() {
   return (
-    <box style={{ flexDirection: "column" }}>
+    <>
       <text>Simple text</text>
-      <text>{bold("Bold text")}</text>
-      <text>{underline("Underlined text")}</text>
-      <text>{red("Red text")}</text>
-      <text>{blue("Blue text")}</text>
-      <text>{bold(red("Bold red text"))}</text>
-      <text>{t`${bold("Bold")} and ${blue("blue")} combined`}</text>
-    </box>
+      <text>
+        <strong>Bold text</strong>
+      </text>
+      <text>
+        <u>Underlined text</u>
+      </text>
+      <text>
+        <span fg="red">Red text</span>
+      </text>
+      <text>
+        <span fg="blue">Blue text</span>
+      </text>
+      <text>
+        <strong fg="red">Bold red text</strong>
+      </text>
+      <text>
+        <strong>Bold</strong> and <span fg="blue">blue</span> combined
+      </text>
+    </>
   )
 }
 
-render(<StyledTextShowcase />)
+render(<App />)
 ```
 
 ## Component Extension
 
-You can create custom components by extending OpenTUI's base renderables:
+You can create custom components by extending OpenTUIs base renderables:
 
 ```tsx
-import { BoxRenderable, OptimizedBuffer, RGBA } from "@opentui/core"
+import { BoxRenderable, OptimizedBuffer, RGBA, type BoxOptions, type RenderContext } from "@opentui/core"
 import { extend, render } from "@opentui/react"
 
 // Create custom component class
 class ButtonRenderable extends BoxRenderable {
   private _label: string = "Button"
 
-  constructor(id: string, options: any) {
-    super(id, options)
-    this.borderStyle = "single"
-    this.padding = 1
+  constructor(ctx: RenderContext, options: BoxOptions & { label?: string }) {
+    super(ctx, {
+      border: true,
+      borderStyle: "single",
+      minHeight: 3,
+      ...options,
+    })
+
+    if (options.label) {
+      this._label = options.label
+    }
   }
 
   protected renderSelf(buffer: OptimizedBuffer): void {
@@ -510,19 +581,19 @@ class ButtonRenderable extends BoxRenderable {
 // Add TypeScript support
 declare module "@opentui/react" {
   interface OpenTUIComponents {
-    button: typeof ButtonRenderable
+    consoleButton: typeof ButtonRenderable
   }
 }
 
 // Register the component
-extend({ button: ButtonRenderable })
+extend({ consoleButton: ButtonRenderable })
 
 // Use in JSX
 function App() {
   return (
     <box>
-      <button label="Click me!" style={{ backgroundColor: "blue" }} />
-      <button label="Another button" style={{ backgroundColor: "green" }} />
+      <consoleButton label="Click me!" style={{ backgroundColor: "blue" }} />
+      <consoleButton label="Another button" style={{ backgroundColor: "green" }} />
     </box>
   )
 }

package/index.js

@@ -9,6 +9,62 @@ import {
   TabSelectRenderable,
   TextRenderable
 } from "@opentui/core";
+
+// src/components/text.ts
+import { TextAttributes, TextNodeRenderable } from "@opentui/core";
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br"];
+
+class SpanRenderable extends TextNodeRenderable {
+  ctx;
+  constructor(ctx, options) {
+    super(options);
+    this.ctx = ctx;
+  }
+}
+
+class TextModifierRenderable extends SpanRenderable {
+  constructor(options, modifier) {
+    super(null, options);
+    if (modifier === "b" || modifier === "strong") {
+      this.attributes = (this.attributes || 0) | TextAttributes.BOLD;
+    } else if (modifier === "i" || modifier === "em") {
+      this.attributes = (this.attributes || 0) | TextAttributes.ITALIC;
+    } else if (modifier === "u") {
+      this.attributes = (this.attributes || 0) | TextAttributes.UNDERLINE;
+    }
+  }
+}
+
+class BoldSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "b");
+  }
+}
+
+class ItalicSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "i");
+  }
+}
+
+class UnderlineSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "u");
+  }
+}
+
+class LineBreakRenderable extends SpanRenderable {
+  constructor(_ctx, options) {
+    super(null, options);
+    this.add();
+  }
+  add() {
+    return super.add(`
+`);
+  }
+}
+
+// src/components/index.ts
 var baseComponents = {
   box: BoxRenderable,
   text: TextRenderable,
@@ -16,7 +72,14 @@ var baseComponents = {
   select: SelectRenderable,
   scrollbox: ScrollBoxRenderable,
   "ascii-font": ASCIIFontRenderable,
-  "tab-select": TabSelectRenderable
+  "tab-select": TabSelectRenderable,
+  span: SpanRenderable,
+  br: LineBreakRenderable,
+  b: BoldSpanRenderable,
+  strong: BoldSpanRenderable,
+  i: ItalicSpanRenderable,
+  em: ItalicSpanRenderable,
+  u: UnderlineSpanRenderable
 };
 var componentCatalogue = { ...baseComponents };
 function extend(objects) {
@@ -104,6 +167,7 @@ import ReactReconciler from "react-reconciler";
 import { ConcurrentRoot } from "react-reconciler/constants";
 
 // src/reconciler/host-config.ts
+import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
 import { createContext as createContext2 } from "react";
 import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
 
@@ -122,13 +186,11 @@ function getNextId(type) {
 import {
   InputRenderable as InputRenderable2,
   InputRenderableEvents,
+  isRenderable,
   SelectRenderable as SelectRenderable2,
   SelectRenderableEvents,
-  StyledText,
   TabSelectRenderable as TabSelectRenderable2,
-  TabSelectRenderableEvents,
-  TextRenderable as TextRenderable2,
-  stringToStyledText
+  TabSelectRenderableEvents
 } from "@opentui/core";
 function initEventListeners(instance, eventName, listener, previousListener) {
   if (previousListener) {
@@ -138,46 +200,6 @@ function initEventListeners(instance, eventName, listener, previousListener) {
     instance.on(eventName, listener);
   }
 }
-function handleTextChildren(textInstance, children) {
-  if (children == null) {
-    textInstance.content = stringToStyledText("");
-    return;
-  }
-  if (Array.isArray(children)) {
-    const chunks = [];
-    for (const child of children) {
-      if (typeof child === "string") {
-        chunks.push({
-          __isChunk: true,
-          text: new TextEncoder().encode(child),
-          plainText: child
-        });
-      } else if (child && typeof child === "object" && "__isChunk" in child) {
-        chunks.push(child);
-      } else if (child instanceof StyledText) {
-        chunks.push(...child.chunks);
-      } else if (child != null) {
-        const stringValue = String(child);
-        chunks.push({
-          __isChunk: true,
-          text: new TextEncoder().encode(stringValue),
-          plainText: stringValue
-        });
-      }
-    }
-    textInstance.content = new StyledText(chunks);
-    return;
-  }
-  if (typeof children === "string") {
-    textInstance.content = stringToStyledText(children);
-  } else if (children && typeof children === "object" && "__isChunk" in children) {
-    textInstance.content = new StyledText([children]);
-  } else if (children instanceof StyledText) {
-    textInstance.content = children;
-  } else {
-    textInstance.content = stringToStyledText(String(children));
-  }
-}
 function setStyle(instance, styles, oldStyles) {
   if (styles && typeof styles === "object") {
     if (oldStyles != null) {
@@ -226,19 +248,18 @@ function setProperty(instance, type, propKey, propValue, oldPropValue) {
       }
       break;
     case "focused":
-      if (!!propValue) {
-        instance.focus();
-      } else {
-        instance.blur();
+      if (isRenderable(instance)) {
+        if (!!propValue) {
+          instance.focus();
+        } else {
+          instance.blur();
+        }
       }
       break;
     case "style":
       setStyle(instance, propValue, oldPropValue);
       break;
     case "children":
-      if (type === "text" && instance instanceof TextRenderable2) {
-        handleTextChildren(instance, propValue);
-      }
       break;
     default:
       instance[propKey] = propValue;
@@ -279,10 +300,13 @@ var hostConfig = {
   supportsPersistence: false,
   supportsHydration: false,
   createInstance(type, props, rootContainerInstance, hostContext) {
+    if (textNodeKeys.includes(type) && !hostContext.isInsideText) {
+      throw new Error(`Component of type "${type}" must be created inside of a text node`);
+    }
     const id = getNextId(type);
     const components = getComponentCatalogue();
     if (!components[type]) {
-      throw new Error(`[Reconciler] Unknown component type: ${type}`);
+      throw new Error(`Unknown component type: ${type}`);
     }
     return new components[type](rootContainerInstance.ctx, {
       id,
@@ -311,23 +335,20 @@ var hostConfig = {
     containerInfo.requestRender();
   },
   getRootHostContext(rootContainerInstance) {
-    return {};
+    return { isInsideText: false };
   },
   getChildHostContext(parentHostContext, type, rootContainerInstance) {
-    return parentHostContext;
+    const isInsideText = ["text", ...textNodeKeys].includes(type);
+    return { ...parentHostContext, isInsideText };
   },
   shouldSetTextContent(type, props) {
-    if (type === "text") {
-      return true;
-    }
     return false;
   },
   createTextInstance(text, rootContainerInstance, hostContext) {
-    const components = getComponentCatalogue();
-    return new components["text"](rootContainerInstance.ctx, {
-      id: getNextId("text"),
-      content: text
-    });
+    if (!hostContext.isInsideText) {
+      throw new Error("Text must be created inside of a text node");
+    }
+    return TextNodeRenderable2.fromString(text);
   },
   scheduleTimeout: setTimeout,
   cancelTimeout: clearTimeout,
@@ -345,7 +366,7 @@ var hostConfig = {
     instance.requestRender();
   },
   commitTextUpdate(textInstance, oldText, newText) {
-    textInstance.content = newText;
+    textInstance.children = [newText];
     textInstance.requestRender();
   },
   appendChildToContainer(container, child) {
@@ -408,7 +429,7 @@ var hostConfig = {
   },
   detachDeletedInstance(instance) {
     if (!instance.parent) {
-      instance.destroy();
+      instance.destroyRecursively();
     }
   },
   getPublicInstance(instance) {

package/jsx-namespace.d.ts

@@ -4,9 +4,11 @@ import type {
   BoxProps,
   ExtendedIntrinsicElements,
   InputProps,
+  LineBreakProps,
   OpenTUIComponents,
   ScrollBoxProps,
   SelectProps,
+  SpanProps,
   TabSelectProps,
   TextProps,
 } from "./src/types/components"
@@ -29,10 +31,18 @@ export namespace JSX {
   interface IntrinsicElements extends React.JSX.IntrinsicElements, ExtendedIntrinsicElements<OpenTUIComponents> {
     box: BoxProps
     text: TextProps
+    span: SpanProps
     input: InputProps
     select: SelectProps
     scrollbox: ScrollBoxProps
     "ascii-font": AsciiFontProps
     "tab-select": TabSelectProps
+    // Text modifiers
+    b: SpanProps
+    i: SpanProps
+    u: SpanProps
+    strong: SpanProps
+    em: SpanProps
+    br: LineBreakProps
   }
 }

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.0.0-20250908-4906ddad",
+  "version": "0.0.0-20250915-f5db043a",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.0.0-20250908-4906ddad",
+    "@opentui/core": "0.0.0-20250915-f5db043a",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {

package/src/components/index.d.ts

@@ -1,5 +1,6 @@
 import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
 import type { RenderableConstructor } from "../types/components";
+import { BoldSpanRenderable, ItalicSpanRenderable, LineBreakRenderable, SpanRenderable, UnderlineSpanRenderable } from "./text";
 export declare const baseComponents: {
     box: typeof BoxRenderable;
     text: typeof TextRenderable;
@@ -8,6 +9,13 @@ export declare const baseComponents: {
     scrollbox: typeof ScrollBoxRenderable;
     "ascii-font": typeof ASCIIFontRenderable;
     "tab-select": typeof TabSelectRenderable;
+    span: typeof SpanRenderable;
+    br: typeof LineBreakRenderable;
+    b: typeof BoldSpanRenderable;
+    strong: typeof BoldSpanRenderable;
+    i: typeof ItalicSpanRenderable;
+    em: typeof ItalicSpanRenderable;
+    u: typeof UnderlineSpanRenderable;
 };
 type ComponentCatalogue = Record<string, RenderableConstructor>;
 export declare const componentCatalogue: ComponentCatalogue;

package/src/components/text.d.ts

@@ -0,0 +1,24 @@
+import { TextNodeRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
+export declare const textNodeKeys: readonly ["span", "b", "strong", "i", "em", "u", "br"];
+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 {};

package/src/reconciler/reconciler.d.ts

@@ -1,5 +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").Renderable, import("@opentui/core").TextRenderable, unknown, unknown, import("@opentui/core").Renderable>;
+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): void;

package/src/reconciler/renderer.js

@@ -15,6 +15,7 @@ import ReactReconciler from "react-reconciler";
 import { ConcurrentRoot } from "react-reconciler/constants";
 
 // src/reconciler/host-config.ts
+import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
 import { createContext as createContext2 } from "react";
 import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
 
@@ -28,6 +29,62 @@ import {
   TabSelectRenderable,
   TextRenderable
 } from "@opentui/core";
+
+// src/components/text.ts
+import { TextAttributes, TextNodeRenderable } from "@opentui/core";
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br"];
+
+class SpanRenderable extends TextNodeRenderable {
+  ctx;
+  constructor(ctx, options) {
+    super(options);
+    this.ctx = ctx;
+  }
+}
+
+class TextModifierRenderable extends SpanRenderable {
+  constructor(options, modifier) {
+    super(null, options);
+    if (modifier === "b" || modifier === "strong") {
+      this.attributes = (this.attributes || 0) | TextAttributes.BOLD;
+    } else if (modifier === "i" || modifier === "em") {
+      this.attributes = (this.attributes || 0) | TextAttributes.ITALIC;
+    } else if (modifier === "u") {
+      this.attributes = (this.attributes || 0) | TextAttributes.UNDERLINE;
+    }
+  }
+}
+
+class BoldSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "b");
+  }
+}
+
+class ItalicSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "i");
+  }
+}
+
+class UnderlineSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "u");
+  }
+}
+
+class LineBreakRenderable extends SpanRenderable {
+  constructor(_ctx, options) {
+    super(null, options);
+    this.add();
+  }
+  add() {
+    return super.add(`
+`);
+  }
+}
+
+// src/components/index.ts
 var baseComponents = {
   box: BoxRenderable,
   text: TextRenderable,
@@ -35,7 +92,14 @@ var baseComponents = {
   select: SelectRenderable,
   scrollbox: ScrollBoxRenderable,
   "ascii-font": ASCIIFontRenderable,
-  "tab-select": TabSelectRenderable
+  "tab-select": TabSelectRenderable,
+  span: SpanRenderable,
+  br: LineBreakRenderable,
+  b: BoldSpanRenderable,
+  strong: BoldSpanRenderable,
+  i: ItalicSpanRenderable,
+  em: ItalicSpanRenderable,
+  u: UnderlineSpanRenderable
 };
 var componentCatalogue = { ...baseComponents };
 function getComponentCatalogue() {
@@ -57,13 +121,11 @@ function getNextId(type) {
 import {
   InputRenderable as InputRenderable2,
   InputRenderableEvents,
+  isRenderable,
   SelectRenderable as SelectRenderable2,
   SelectRenderableEvents,
-  StyledText,
   TabSelectRenderable as TabSelectRenderable2,
-  TabSelectRenderableEvents,
-  TextRenderable as TextRenderable2,
-  stringToStyledText
+  TabSelectRenderableEvents
 } from "@opentui/core";
 function initEventListeners(instance, eventName, listener, previousListener) {
   if (previousListener) {
@@ -73,46 +135,6 @@ function initEventListeners(instance, eventName, listener, previousListener) {
     instance.on(eventName, listener);
   }
 }
-function handleTextChildren(textInstance, children) {
-  if (children == null) {
-    textInstance.content = stringToStyledText("");
-    return;
-  }
-  if (Array.isArray(children)) {
-    const chunks = [];
-    for (const child of children) {
-      if (typeof child === "string") {
-        chunks.push({
-          __isChunk: true,
-          text: new TextEncoder().encode(child),
-          plainText: child
-        });
-      } else if (child && typeof child === "object" && "__isChunk" in child) {
-        chunks.push(child);
-      } else if (child instanceof StyledText) {
-        chunks.push(...child.chunks);
-      } else if (child != null) {
-        const stringValue = String(child);
-        chunks.push({
-          __isChunk: true,
-          text: new TextEncoder().encode(stringValue),
-          plainText: stringValue
-        });
-      }
-    }
-    textInstance.content = new StyledText(chunks);
-    return;
-  }
-  if (typeof children === "string") {
-    textInstance.content = stringToStyledText(children);
-  } else if (children && typeof children === "object" && "__isChunk" in children) {
-    textInstance.content = new StyledText([children]);
-  } else if (children instanceof StyledText) {
-    textInstance.content = children;
-  } else {
-    textInstance.content = stringToStyledText(String(children));
-  }
-}
 function setStyle(instance, styles, oldStyles) {
   if (styles && typeof styles === "object") {
     if (oldStyles != null) {
@@ -161,19 +183,18 @@ function setProperty(instance, type, propKey, propValue, oldPropValue) {
       }
       break;
     case "focused":
-      if (!!propValue) {
-        instance.focus();
-      } else {
-        instance.blur();
+      if (isRenderable(instance)) {
+        if (!!propValue) {
+          instance.focus();
+        } else {
+          instance.blur();
+        }
       }
       break;
     case "style":
       setStyle(instance, propValue, oldPropValue);
       break;
     case "children":
-      if (type === "text" && instance instanceof TextRenderable2) {
-        handleTextChildren(instance, propValue);
-      }
       break;
     default:
       instance[propKey] = propValue;
@@ -214,10 +235,13 @@ var hostConfig = {
   supportsPersistence: false,
   supportsHydration: false,
   createInstance(type, props, rootContainerInstance, hostContext) {
+    if (textNodeKeys.includes(type) && !hostContext.isInsideText) {
+      throw new Error(`Component of type "${type}" must be created inside of a text node`);
+    }
     const id = getNextId(type);
     const components = getComponentCatalogue();
     if (!components[type]) {
-      throw new Error(`[Reconciler] Unknown component type: ${type}`);
+      throw new Error(`Unknown component type: ${type}`);
     }
     return new components[type](rootContainerInstance.ctx, {
       id,
@@ -246,23 +270,20 @@ var hostConfig = {
     containerInfo.requestRender();
   },
   getRootHostContext(rootContainerInstance) {
-    return {};
+    return { isInsideText: false };
   },
   getChildHostContext(parentHostContext, type, rootContainerInstance) {
-    return parentHostContext;
+    const isInsideText = ["text", ...textNodeKeys].includes(type);
+    return { ...parentHostContext, isInsideText };
   },
   shouldSetTextContent(type, props) {
-    if (type === "text") {
-      return true;
-    }
     return false;
   },
   createTextInstance(text, rootContainerInstance, hostContext) {
-    const components = getComponentCatalogue();
-    return new components["text"](rootContainerInstance.ctx, {
-      id: getNextId("text"),
-      content: text
-    });
+    if (!hostContext.isInsideText) {
+      throw new Error("Text must be created inside of a text node");
+    }
+    return TextNodeRenderable2.fromString(text);
   },
   scheduleTimeout: setTimeout,
   cancelTimeout: clearTimeout,
@@ -280,7 +301,7 @@ var hostConfig = {
     instance.requestRender();
   },
   commitTextUpdate(textInstance, oldText, newText) {
-    textInstance.content = newText;
+    textInstance.children = [newText];
     textInstance.requestRender();
   },
   appendChildToContainer(container, child) {
@@ -343,7 +364,7 @@ var hostConfig = {
   },
   detachDeletedInstance(instance) {
     if (!instance.parent) {
-      instance.destroy();
+      instance.destroyRecursively();
     }
   },
   getPublicInstance(instance) {

package/src/types/components.d.ts

@@ -1,4 +1,4 @@
-import type { ASCIIFontOptions, ASCIIFontRenderable, BoxOptions, BoxRenderable, InputRenderable, InputRenderableOptions, Renderable, RenderableOptions, RenderContext, ScrollBoxOptions, ScrollBoxRenderable, SelectOption, SelectRenderable, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextChunk, TextOptions, TextRenderable } from "@opentui/core";
+import type { ASCIIFontOptions, ASCIIFontRenderable, BaseRenderable, BoxOptions, BoxRenderable, InputRenderable, InputRenderableOptions, RenderableOptions, RenderContext, ScrollBoxOptions, ScrollBoxRenderable, SelectOption, SelectRenderable, SelectRenderableOptions, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, 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}`;
@@ -8,7 +8,7 @@ export type ReactProps<TRenderable = unknown> = {
     ref?: React.Ref<TRenderable>;
 };
 /** Base type for any renderable constructor */
-export type RenderableConstructor<TRenderable extends Renderable = Renderable> = new (ctx: RenderContext, options: any) => TRenderable;
+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 */
@@ -20,14 +20,18 @@ type ContainerProps<TOptions> = TOptions & {
     children?: React.ReactNode;
 };
 /** Smart component props that automatically determine excluded properties */
-type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable extends Renderable> = TOptions & {
+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;
+type TextChildren = string | number | boolean | null | undefined | React.ReactNode;
 export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
-    children?: TextChildren | StyledText | TextChunk | Array<TextChildren | StyledText | TextChunk>;
+    children?: TextChildren;
 };
+export type SpanProps = ComponentProps<TextNodeOptions, TextNodeRenderable> & {
+    children?: TextChildren;
+};
+export type LineBreakProps = Pick<SpanProps, "id">;
 export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable>;
 export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
     focused?: boolean;

package/src/types/host.d.ts

@@ -1,9 +1,11 @@
-import type { Renderable, RootRenderable, TextRenderable } from "@opentui/core";
+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 = Renderable;
-export type TextInstance = TextRenderable;
+export type Instance = BaseRenderable;
+export type TextInstance = TextNodeRenderable;
 export type PublicInstance = Instance;
-export type HostContext = Record<string, any>;
+export type HostContext = Record<string, any> & {
+    isInsideText?: boolean;
+};