@opentui/react 0.2.2 → 0.2.4

package/README.md

@@ -60,6 +60,10 @@ For optimal TypeScript support, configure your `tsconfig.json`:
   - [Hooks](#hooks)
     - [useRenderer()](#userenderer)
     - [useKeyboard(handler, options?)](#usekeyboardhandler-options)
+    - [usePaste(handler)](#usepastehandler)
+    - [useFocus(handler)](#usefocushandler)
+    - [useBlur(handler)](#useblurhandler)
+    - [useSelectionHandler(handler)](#useselectionhandlerhandler)
     - [useOnResize(callback)](#useonresizecallback)
     - [useTerminalDimensions()](#useterminaldimensions)
     - [useTimeline(options?)](#usetimelineoptions)
@@ -239,6 +243,89 @@ function App() {
 }
 ```
 
+#### `usePaste(handler)`
+
+Handle terminal paste events (bracketed paste).
+
+```tsx
+import { decodePasteBytes } from "@opentui/core"
+import { usePaste } from "@opentui/react"
+
+function App() {
+  usePaste((event) => {
+    const text = decodePasteBytes(event.bytes)
+    console.log("Pasted text:", text)
+  })
+
+  return <text>Paste something into the terminal</text>
+}
+```
+
+**Parameters:**
+
+- `handler`: Callback function that receives a `PasteEvent` object with `bytes: Uint8Array` (decode with `decodePasteBytes` from `@opentui/core`)
+
+#### `useFocus(handler)`
+
+Subscribe to terminal window focus events. Fires when the terminal window gains focus.
+
+```tsx
+import { useFocus } from "@opentui/react"
+
+function App() {
+  useFocus(() => {
+    console.log("Terminal gained focus")
+  })
+
+  return <text>Focus-aware component</text>
+}
+```
+
+**Parameters:**
+
+- `handler`: Callback function invoked when the terminal gains focus
+
+#### `useBlur(handler)`
+
+Subscribe to terminal window blur events. Fires when the terminal window loses focus.
+
+```tsx
+import { useBlur } from "@opentui/react"
+
+function App() {
+  useBlur(() => {
+    console.log("Terminal lost focus")
+  })
+
+  return <text>Blur-aware component</text>
+}
+```
+
+**Parameters:**
+
+- `handler`: Callback function invoked when the terminal loses focus
+
+#### `useSelectionHandler(handler)`
+
+Handle text selection events (e.g., when the user selects text via mouse drag).
+
+```tsx
+import { useSelectionHandler } from "@opentui/react"
+
+function App() {
+  useSelectionHandler((selection) => {
+    const text = selection.getSelectedText()
+    console.log("Selected:", text)
+  })
+
+  return <text selectable>Select this text with your mouse</text>
+}
+```
+
+**Parameters:**
+
+- `handler`: Callback function that receives a `Selection` object with methods like `getSelectedText()`
+
 #### `useOnResize(callback)`
 
 Handle terminal resize events.

package/{chunk-42jvgte5.js → chunk-wfd0ft37.js}

@@ -166,7 +166,7 @@ import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
 // package.json
 var package_default = {
   name: "@opentui/react",
-  version: "0.2.2",
+  version: "0.2.4",
   description: "React renderer for building terminal user interfaces using OpenTUI core",
   license: "MIT",
   repository: {
@@ -215,16 +215,16 @@ var package_default = {
     "@opentui/keymap": "workspace:*",
     "@types/bun": "latest",
     "@types/node": "^24.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-reconciler": "^0.32.0",
+    "@types/react": "^19.2.0",
+    "@types/react-reconciler": "^0.33.0",
     "@types/ws": "^8.18.1",
-    react: ">=19.0.0",
+    react: ">=19.2.0",
     "react-devtools-core": "^7.0.1",
     typescript: "^5",
     ws: "^8.18.0"
   },
   peerDependencies: {
-    react: ">=19.0.0",
+    react: ">=19.2.0",
     "react-devtools-core": "^7.0.1",
     ws: "^8.18.0"
   },
@@ -238,7 +238,7 @@ var package_default = {
   },
   dependencies: {
     "@opentui/core": "workspace:*",
-    "react-reconciler": "^0.32.0"
+    "react-reconciler": "^0.33.0"
   }
 };
 
@@ -380,6 +380,8 @@ var hostConfig = {
   supportsMutation: true,
   supportsPersistence: false,
   supportsHydration: false,
+  supportsMicrotasks: true,
+  scheduleMicrotask: queueMicrotask,
   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`);
@@ -435,7 +437,7 @@ var hostConfig = {
   cancelTimeout: clearTimeout,
   noTimeout: -1,
   shouldAttemptEagerTransition() {
-    return false;
+    return true;
   },
   finalizeInitialChildren(instance, type, props, rootContainerInstance, hostContext) {
     setInitialProperties(instance, type, props);
@@ -444,11 +446,9 @@ var hostConfig = {
   commitMount(instance, type, props, internalInstanceHandle) {},
   commitUpdate(instance, type, oldProps, newProps, internalInstanceHandle) {
     updateProperties(instance, type, oldProps, newProps);
-    instance.requestRender();
   },
   commitTextUpdate(textInstance, oldText, newText) {
     textInstance.children = [newText];
-    textInstance.requestRender();
   },
   appendChildToContainer(container, child) {
     container.add(child);
@@ -458,19 +458,15 @@ var hostConfig = {
   },
   hideInstance(instance) {
     instance.visible = false;
-    instance.requestRender();
   },
   unhideInstance(instance, props) {
     instance.visible = true;
-    instance.requestRender();
   },
   hideTextInstance(textInstance) {
     textInstance.visible = false;
-    textInstance.requestRender();
   },
   unhideTextInstance(textInstance, text) {
     textInstance.visible = true;
-    textInstance.requestRender();
   },
   clearContainer(container) {
     const children = container.getChildren();
@@ -489,6 +485,12 @@ var hostConfig = {
   maySuspendCommit() {
     return false;
   },
+  maySuspendCommitOnUpdate() {
+    return false;
+  },
+  maySuspendCommitInSyncRender() {
+    return false;
+  },
   NotPendingTransition: null,
   HostTransitionContext: createContext2(null),
   resetFormInstance() {},
@@ -554,7 +556,7 @@ $ bun add react-devtools-core@7 -d
 }
 reconciler.injectIntoDevTools();
 function _render(element, root) {
-  const container = reconciler.createContainer(root, ConcurrentRoot, null, false, null, "", console.error, console.error, console.error, console.error, null);
+  const container = reconciler.createContainer(root, ConcurrentRoot, null, false, null, "", console.error, console.error, console.error, () => {});
   reconciler.updateContainer(element, container, null, () => {});
   return container;
 }

package/index.js

@@ -11,9 +11,9 @@ import {
   getComponentCatalogue,
   jsxDEV,
   useAppContext
-} from "./chunk-42jvgte5.js";
+} from "./chunk-wfd0ft37.js";
 import"./chunk-2mx7fq49.js";
-// src/hooks/use-keyboard.ts
+// src/hooks/use-blur.ts
 import { useEffect } from "react";
 
 // src/hooks/use-event.ts
@@ -29,11 +29,44 @@ function useEffectEvent(handler) {
   }, []);
 }
 
+// src/hooks/use-renderer.ts
+var useRenderer = () => {
+  const { renderer } = useAppContext();
+  if (!renderer) {
+    throw new Error("Renderer not found.");
+  }
+  return renderer;
+};
+
+// src/hooks/use-blur.ts
+var useBlur = (handler) => {
+  const renderer = useRenderer();
+  const stableHandler = useEffectEvent(handler);
+  useEffect(() => {
+    renderer.on("blur", stableHandler);
+    return () => {
+      renderer.off("blur", stableHandler);
+    };
+  }, [renderer]);
+};
+// src/hooks/use-focus.ts
+import { useEffect as useEffect2 } from "react";
+var useFocus = (handler) => {
+  const renderer = useRenderer();
+  const stableHandler = useEffectEvent(handler);
+  useEffect2(() => {
+    renderer.on("focus", stableHandler);
+    return () => {
+      renderer.off("focus", stableHandler);
+    };
+  }, [renderer]);
+};
 // src/hooks/use-keyboard.ts
+import { useEffect as useEffect3 } from "react";
 var useKeyboard = (handler, options = { release: false }) => {
   const { keyHandler } = useAppContext();
   const stableHandler = useEffectEvent(handler);
-  useEffect(() => {
+  useEffect3(() => {
     keyHandler?.on("keypress", stableHandler);
     if (options?.release) {
       keyHandler?.on("keyrelease", stableHandler);
@@ -46,20 +79,24 @@ var useKeyboard = (handler, options = { release: false }) => {
     };
   }, [keyHandler, options.release]);
 };
-// src/hooks/use-renderer.ts
-var useRenderer = () => {
-  const { renderer } = useAppContext();
-  if (!renderer) {
-    throw new Error("Renderer not found.");
-  }
-  return renderer;
+// src/hooks/use-paste.ts
+import { useEffect as useEffect4 } from "react";
+var usePaste = (handler) => {
+  const { keyHandler } = useAppContext();
+  const stableHandler = useEffectEvent(handler);
+  useEffect4(() => {
+    keyHandler?.on("paste", stableHandler);
+    return () => {
+      keyHandler?.off("paste", stableHandler);
+    };
+  }, [keyHandler]);
 };
 // src/hooks/use-resize.ts
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect5 } from "react";
 var useOnResize = (callback) => {
   const renderer = useRenderer();
   const stableCallback = useEffectEvent(callback);
-  useEffect2(() => {
+  useEffect5(() => {
     renderer.on("resize", stableCallback);
     return () => {
       renderer.off("resize", stableCallback);
@@ -67,6 +104,18 @@ var useOnResize = (callback) => {
   }, [renderer]);
   return renderer;
 };
+// src/hooks/use-selection.ts
+import { useEffect as useEffect6 } from "react";
+var useSelectionHandler = (handler) => {
+  const renderer = useRenderer();
+  const stableHandler = useEffectEvent(handler);
+  useEffect6(() => {
+    renderer.on("selection", stableHandler);
+    return () => {
+      renderer.off("selection", stableHandler);
+    };
+  }, [renderer]);
+};
 // src/hooks/use-terminal-dimensions.ts
 import { useState } from "react";
 var useTerminalDimensions = () => {
@@ -83,10 +132,10 @@ var useTerminalDimensions = () => {
 };
 // src/hooks/use-timeline.ts
 import { engine, Timeline } from "@opentui/core";
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect7 } from "react";
 var useTimeline = (options = {}) => {
   const timeline = new Timeline(options);
-  useEffect3(() => {
+  useEffect7(() => {
     if (!options.autoplay) {
       timeline.play();
     }
@@ -102,7 +151,7 @@ var useTimeline = (options = {}) => {
 import {
   createSlotRegistry
 } from "@opentui/core";
-import React, { Fragment as Fragment2, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import React, { Fragment as Fragment2, useEffect as useEffect8, useMemo, useRef as useRef2, useState as useState2 } from "react";
 function createReactSlotRegistry(renderer, context, options = {}) {
   return createSlotRegistry(renderer, "react:slot-registry", context, options);
 }
@@ -181,12 +230,12 @@ function Slot(props) {
   const slotName = String(props.name);
   const renderFailuresByPluginRef = useRef2(new Map);
   const pendingRenderReportsRef = useRef2(new Map);
-  useEffect4(() => {
+  useEffect8(() => {
     return registry.subscribe(() => {
       setVersion((current) => current + 1);
     });
   }, [registry]);
-  useEffect4(() => {
+  useEffect8(() => {
     if (pendingRenderReportsRef.current.size === 0) {
       return;
     }
@@ -318,9 +367,13 @@ import { createElement as createElement2 } from "react";
 export {
   useTimeline,
   useTerminalDimensions,
+  useSelectionHandler,
   useRenderer,
+  usePaste,
   useOnResize,
   useKeyboard,
+  useFocus,
+  useBlur,
   useAppContext,
   getComponentCatalogue,
   flushSync,

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -48,23 +48,23 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.2.2",
-    "react-reconciler": "^0.32.0"
+    "@opentui/core": "0.2.4",
+    "react-reconciler": "^0.33.0"
   },
   "devDependencies": {
     "@opentui/keymap": "workspace:*",
     "@types/bun": "latest",
     "@types/node": "^24.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-reconciler": "^0.32.0",
+    "@types/react": "^19.2.0",
+    "@types/react-reconciler": "^0.33.0",
     "@types/ws": "^8.18.1",
-    "react": ">=19.0.0",
+    "react": ">=19.2.0",
     "react-devtools-core": "^7.0.1",
     "typescript": "^5",
     "ws": "^8.18.0"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
+    "react": ">=19.2.0",
     "react-devtools-core": "^7.0.1",
     "ws": "^8.18.0"
   }

package/src/hooks/index.d.ts

@@ -1,5 +1,9 @@
+export * from "./use-blur.js";
+export * from "./use-focus.js";
 export * from "./use-keyboard.js";
+export * from "./use-paste.js";
 export * from "./use-renderer.js";
 export * from "./use-resize.js";
+export * from "./use-selection.js";
 export * from "./use-terminal-dimensions.js";
 export * from "./use-timeline.js";

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

@@ -0,0 +1,10 @@
+/**
+ * Subscribe to terminal window blur events.
+ * Fires when the terminal window loses focus.
+ *
+ * @example
+ * useBlur(() => {
+ *   console.log("Terminal lost focus")
+ * })
+ */
+export declare const useBlur: (handler: () => void) => void;

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

@@ -0,0 +1,10 @@
+/**
+ * Subscribe to terminal window focus events.
+ * Fires when the terminal window gains focus.
+ *
+ * @example
+ * useFocus(() => {
+ *   console.log("Terminal gained focus")
+ * })
+ */
+export declare const useFocus: (handler: () => void) => void;

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

@@ -0,0 +1,10 @@
+import type { PasteEvent } from "@opentui/core";
+/**
+ * Subscribe to terminal paste events (bracketed paste).
+ *
+ * @example
+ * usePaste((event) => {
+ *   console.log("Pasted:", event.text)
+ * })
+ */
+export declare const usePaste: (handler: (event: PasteEvent) => void) => void;

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

@@ -0,0 +1,12 @@
+import type { Selection } from "@opentui/core";
+/**
+ * Subscribe to text selection events.
+ * Fires when the user selects text in the terminal (e.g., via mouse drag).
+ *
+ * @example
+ * useSelectionHandler((selection) => {
+ *   const text = selection.getSelectedText()
+ *   console.log("Selected:", text)
+ * })
+ */
+export declare const useSelectionHandler: (handler: (selection: Selection) => void) => void;

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

@@ -1,9 +1,16 @@
 import type { HostConfig } from "react-reconciler";
 import type { Container, HostContext, Instance, Props, PublicInstance, TextInstance, Type } from "../types/host.js";
+type ReconcilerExtensions = {
+    maySuspendCommitOnUpdate(type: Type, oldProps: Props, newProps: Props): boolean;
+    maySuspendCommitInSyncRender(type: Type, props: Props): boolean;
+    rendererPackageName: string;
+    rendererVersion: string;
+};
 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>;
+unknown> & ReconcilerExtensions;
+export {};

package/src/reconciler/renderer.d.ts

@@ -3,6 +3,9 @@ import { type ReactNode } from "react";
 declare const flushSync: {
     (): void;
     <R>(fn: () => R): R;
+} & {
+    (): void;
+    <R>(fn: () => R): R;
 };
 declare const createPortal: (children: ReactNode, containerInfo: any, implementation: any, key?: string | null) => import("react-reconciler").ReactPortal;
 export type Root = {

package/test-utils.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   createRoot
-} from "./chunk-42jvgte5.js";
+} from "./chunk-wfd0ft37.js";
 import"./chunk-2mx7fq49.js";
 
 // src/test-utils.ts