@opentui/react 0.0.0-20260829-c2e7cb1b → 0.0.0-20260929-c138f0f8

package/README.md

@@ -684,16 +684,23 @@ function App() {
 
 #### Code Component
 
+Create a theme once for its renderer, not during a component render. Release it after its consumers are destroyed.
+
 ```tsx
-import { RGBA, SyntaxStyle } from "@opentui/core"
-
-const syntaxStyle = SyntaxStyle.fromStyles({
-  keyword: { fg: RGBA.fromHex("#ff6b6b"), bold: true }, // red, bold
-  string: { fg: RGBA.fromHex("#51cf66") }, // green
-  comment: { fg: RGBA.fromHex("#868e96"), italic: true }, // gray, italic
-  number: { fg: RGBA.fromHex("#ffd43b") }, // yellow
-  default: { fg: RGBA.fromHex("#ffffff") }, // white
-})
+import { createCliRenderer, RGBA, SyntaxStyle } from "@opentui/core"
+import { createRoot } from "@opentui/react"
+
+const renderer = await createCliRenderer()
+const syntaxStyle = SyntaxStyle.fromStyles(
+  {
+    keyword: { fg: RGBA.fromHex("#ff6b6b"), bold: true }, // red, bold
+    string: { fg: RGBA.fromHex("#51cf66") }, // green
+    comment: { fg: RGBA.fromHex("#868e96"), italic: true }, // gray, italic
+    number: { fg: RGBA.fromHex("#ffd43b") }, // yellow
+    default: { fg: RGBA.fromHex("#ffffff") }, // white
+  },
+  renderer.nativeScene!,
+)
 
 const codeExample = `function hello() {
   // This is a comment
@@ -711,6 +718,14 @@ function App() {
     </box>
   )
 }
+
+try {
+  createRoot(renderer).render(<App />)
+  await renderer.closed
+} finally {
+  renderer.destroy()
+  syntaxStyle.destroy()
+}
 ```
 
 #### Line Number Component
@@ -719,18 +734,23 @@ Display code with line numbers, and optionally add diff highlights or diagnostic
 
 ```tsx
 import type { LineNumberRenderable } from "@opentui/core"
-import { RGBA, SyntaxStyle } from "@opentui/core"
+import { createCliRenderer, RGBA, SyntaxStyle } from "@opentui/core"
+import { createRoot } from "@opentui/react"
 import { useEffect, useRef } from "react"
 
-function App() {
-  const lineNumberRef = useRef<LineNumberRenderable>(null)
-
-  const syntaxStyle = SyntaxStyle.fromStyles({
+const renderer = await createCliRenderer()
+const syntaxStyle = SyntaxStyle.fromStyles(
+  {
     keyword: { fg: RGBA.fromHex("#C792EA") },
     string: { fg: RGBA.fromHex("#C3E88D") },
     number: { fg: RGBA.fromHex("#F78C6C") },
     default: { fg: RGBA.fromHex("#A6ACCD") },
-  })
+  },
+  renderer.nativeScene!,
+)
+
+function App() {
+  const lineNumberRef = useRef<LineNumberRenderable>(null)
 
   const codeContent = `function fibonacci(n: number): number {
   if (n <= 1) return n
@@ -765,6 +785,14 @@ console.log(fibonacci(10))`
     </box>
   )
 }
+
+try {
+  createRoot(renderer).render(<App />)
+  await renderer.closed
+} finally {
+  renderer.destroy()
+  syntaxStyle.destroy()
+}
 ```
 
 For a more complete example with interactive diff highlights and diagnostics, see [`examples/line-number.tsx`](examples/line-number.tsx).

package/{chunk-c3qd75wx.js → chunk-tc772gtx.js}

@@ -1,8 +1,4 @@
 // @bun
-import {
-  __require
-} from "./chunk-2mx7fq49.js";
-
 // src/components/index.ts
 import {
   ASCIIFontRenderable,
@@ -85,7 +81,7 @@ class LinkRenderable extends SpanRenderable {
 }
 
 // src/components/index.ts
-var baseComponents = {
+var baseComponents2 = {
   box: BoxRenderable,
   text: TextRenderable,
   code: CodeRenderable,
@@ -108,26 +104,26 @@ var baseComponents = {
   u: UnderlineSpanRenderable,
   a: LinkRenderable
 };
-var componentCatalogue = { ...baseComponents };
-function extend(objects) {
-  Object.assign(componentCatalogue, objects);
+var componentCatalogue2 = { ...baseComponents2 };
+function extend2(objects) {
+  Object.assign(componentCatalogue2, objects);
 }
-function getComponentCatalogue() {
-  return componentCatalogue;
+function getComponentCatalogue2() {
+  return componentCatalogue2;
 }
 
 // src/components/app.tsx
 import { createContext, useContext } from "react";
-var AppContext = createContext({
+var AppContext2 = createContext({
   keyHandler: null,
   renderer: null
 });
-var useAppContext = () => {
-  return useContext(AppContext);
+var useAppContext2 = () => {
+  return useContext(AppContext2);
 };
 
 // src/reconciler/renderer.ts
-import { CliRenderEvents, engine } from "@opentui/core";
+import { CliRenderEvents } from "@opentui/core";
 import React2 from "react";
 
 // src/components/error-boundary.tsx
@@ -168,7 +164,7 @@ import { ImageRenderable as ImageRenderable2, TextNodeRenderable as TextNodeRend
 // package.json
 var package_default = {
   name: "@opentui/react",
-  version: "0.0.0-20260829-c2e7cb1b",
+  version: "0.0.0-20260929-c138f0f8",
   description: "React renderer for building terminal user interfaces using OpenTUI core",
   license: "MIT",
   repository: {
@@ -215,7 +211,7 @@ var package_default = {
   },
   devDependencies: {
     "@opentui/keymap": "workspace:*",
-    "@types/bun": "1.3.14",
+    "@types/bun": "1.4.1",
     "@types/node": "^24.0.0",
     "@types/react": "^19.2.0",
     "@types/react-reconciler": "^0.33.0",
@@ -394,7 +390,7 @@ var hostConfig = {
       throw new Error(`Component of type "${type}" must be created inside of a text node`);
     }
     const id = getNextId(type);
-    const components = getComponentCatalogue();
+    const components = getComponentCatalogue2();
     if (!components[type]) {
       throw new Error(`Unknown component type: ${type}`);
     }
@@ -551,7 +547,7 @@ var hostConfig = {
 var reconciler = ReactReconciler(hostConfig);
 if (process.env["DEV"] === "true") {
   try {
-    await import("./chunk-bdqvmfwv.js");
+    await import("./chunk-z62dbhvj.js");
   } catch (error) {
     if (error.code === "ERR_MODULE_NOT_FOUND") {
       console.warn(`
@@ -577,9 +573,9 @@ function _render(element, root) {
 
 // src/reconciler/renderer.ts
 var _r = reconciler;
-var flushSync = _r.flushSyncFromReconciler ?? _r.flushSync;
-var { createPortal } = reconciler;
-function createRoot(renderer) {
+var flushSync2 = _r.flushSyncFromReconciler ?? _r.flushSync;
+var { createPortal: createPortal2 } = reconciler;
+function createRoot2(renderer) {
   let container = null;
   const cleanup = () => {
     if (container) {
@@ -591,11 +587,10 @@ function createRoot(renderer) {
   renderer.once(CliRenderEvents.DESTROY, cleanup);
   return {
     render: (node) => {
-      engine.attach(renderer);
-      container = _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
+      container = _render(React2.createElement(AppContext2.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
     },
     unmount: cleanup
   };
 }
 
-export { baseComponents, componentCatalogue, extend, getComponentCatalogue, AppContext, useAppContext, Fragment, jsxDEV, flushSync, createPortal, createRoot };
+export { baseComponents2, componentCatalogue2, extend2, getComponentCatalogue2, AppContext2, useAppContext2, Fragment, jsxDEV, flushSync2, createPortal2, createRoot2 };

package/{chunk-bdqvmfwv.js → chunk-z62dbhvj.js}

@@ -1,8 +1,4 @@
 // @bun
-import {
-  __require
-} from "./chunk-2mx7fq49.js";
-
 // src/reconciler/devtools-polyfill.ts
 var g = globalThis;
 if (typeof g.WebSocket === "undefined") {

package/index.js

@@ -1,18 +1,17 @@
 // @bun
 import {
-  AppContext,
+  baseComponents2,
+  componentCatalogue2,
+  extend2,
+  getComponentCatalogue2,
+  AppContext2,
+  useAppContext2,
   Fragment,
-  baseComponents,
-  componentCatalogue,
-  createPortal,
-  createRoot,
-  extend,
-  flushSync,
-  getComponentCatalogue,
   jsxDEV,
-  useAppContext
-} from "./chunk-c3qd75wx.js";
-import"./chunk-2mx7fq49.js";
+  flushSync2,
+  createPortal2,
+  createRoot2
+} from "./chunk-tc772gtx.js";
 // src/hooks/use-blur.ts
 import { useEffect } from "react";
 
@@ -31,7 +30,7 @@ function useEffectEvent(handler) {
 
 // src/hooks/use-renderer.ts
 var useRenderer = () => {
-  const { renderer } = useAppContext();
+  const { renderer } = useAppContext2();
   if (!renderer) {
     throw new Error("Renderer not found.");
   }
@@ -64,7 +63,7 @@ var useFocus = (handler) => {
 // src/hooks/use-keyboard.ts
 import { useEffect as useEffect3 } from "react";
 var useKeyboard = (handler, options = { release: false }) => {
-  const { keyHandler } = useAppContext();
+  const { keyHandler } = useAppContext2();
   const stableHandler = useEffectEvent(handler);
   useEffect3(() => {
     keyHandler?.on("keypress", stableHandler);
@@ -82,7 +81,7 @@ var useKeyboard = (handler, options = { release: false }) => {
 // src/hooks/use-paste.ts
 import { useEffect as useEffect4 } from "react";
 var usePaste = (handler) => {
-  const { keyHandler } = useAppContext();
+  const { keyHandler } = useAppContext2();
   const stableHandler = useEffectEvent(handler);
   useEffect4(() => {
     keyHandler?.on("paste", stableHandler);
@@ -131,21 +130,26 @@ var useTerminalDimensions = () => {
   return dimensions;
 };
 // src/hooks/use-timeline.ts
-import { engine, Timeline } from "@opentui/core";
+import { getTimelineEngine, Timeline } from "@opentui/core";
 import { useEffect as useEffect7, useState as useState2 } from "react";
 var useTimeline = (options = {}) => {
+  const renderer = useRenderer();
   const [timeline] = useState2(() => new Timeline(options));
   const [autoplay] = useState2(options.autoplay !== false);
   useEffect7(() => {
+    const engine = getTimelineEngine(renderer);
     if (autoplay) {
       timeline.play();
     }
     engine.register(timeline);
     return () => {
-      timeline.pause();
-      engine.unregister(timeline);
+      try {
+        timeline.pause();
+      } finally {
+        engine.unregister(timeline);
+      }
     };
-  }, [autoplay, timeline]);
+  }, [autoplay, timeline, renderer]);
   return timeline;
 };
 // src/plugins/slot.tsx
@@ -358,7 +362,7 @@ function Slot(props) {
 // src/time-to-first-draw.tsx
 import { TimeToFirstDrawRenderable } from "@opentui/core";
 import { createElement } from "react";
-extend({ "time-to-first-draw": TimeToFirstDrawRenderable });
+extend2({ "time-to-first-draw": TimeToFirstDrawRenderable });
 var TimeToFirstDraw = (props) => {
   return createElement("time-to-first-draw", props);
 };
@@ -366,27 +370,27 @@ var TimeToFirstDraw = (props) => {
 // src/index.ts
 import { createElement as createElement2 } from "react";
 export {
-  useTimeline,
-  useTerminalDimensions,
-  useSelectionHandler,
-  useRenderer,
-  usePaste,
-  useOnResize,
-  useKeyboard,
-  useFocus,
-  useBlur,
-  useAppContext,
-  getComponentCatalogue,
-  flushSync,
-  extend,
-  createSlot,
-  createRoot,
-  createReactSlotRegistry,
-  createPortal,
-  createElement2 as createElement,
-  componentCatalogue,
-  baseComponents,
-  TimeToFirstDraw,
+  AppContext2 as AppContext,
   Slot,
-  AppContext
+  TimeToFirstDraw,
+  baseComponents2 as baseComponents,
+  componentCatalogue2 as componentCatalogue,
+  createElement2 as createElement,
+  createPortal2 as createPortal,
+  createReactSlotRegistry,
+  createRoot2 as createRoot,
+  createSlot,
+  extend2 as extend,
+  flushSync2 as flushSync,
+  getComponentCatalogue2 as getComponentCatalogue,
+  useAppContext2 as useAppContext,
+  useBlur,
+  useFocus,
+  useKeyboard,
+  useOnResize,
+  usePaste,
+  useRenderer,
+  useSelectionHandler,
+  useTerminalDimensions,
+  useTimeline
 };

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.0.0-20260829-c2e7cb1b",
+  "version": "0.0.0-20260929-c138f0f8",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -52,12 +52,12 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.0.0-20260829-c2e7cb1b",
+    "@opentui/core": "0.0.0-20260929-c138f0f8",
     "react-reconciler": "^0.33.0"
   },
   "devDependencies": {
     "@opentui/keymap": "workspace:*",
-    "@types/bun": "1.3.14",
+    "@types/bun": "1.4.1",
     "@types/node": "^24.0.0",
     "@types/react": "^19.2.0",
     "@types/react-reconciler": "^0.33.0",

package/test-utils.js

@@ -1,8 +1,7 @@
 // @bun
 import {
-  createRoot
-} from "./chunk-c3qd75wx.js";
-import"./chunk-2mx7fq49.js";
+  createRoot2
+} from "./chunk-tc772gtx.js";
 
 // src/test-utils.ts
 import { createTestRenderer } from "@opentui/core/testing";
@@ -26,7 +25,7 @@ async function testRender(node, testRendererOptions) {
       setIsReactActEnvironment(false);
     }
   });
-  root = createRoot(testSetup.renderer);
+  root = createRoot2(testSetup.renderer);
   act(() => {
     if (root) {
       root.render(node);

package/chunk-2mx7fq49.js

@@ -1,4 +0,0 @@
-// @bun
-var __require = import.meta.require;
-
-export { __require };