@opentui/react 0.0.0-20260412-2fcfd0af → 0.0.0-20260419-49f00f96

package/{chunk-cecjmcj8.js → chunk-mq7v1x2n.js}

@@ -166,7 +166,7 @@ import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
 // package.json
 var package_default = {
   name: "@opentui/react",
-  version: "0.0.0-20260412-2fcfd0af",
+  version: "0.0.0-20260419-49f00f96",
   description: "React renderer for building terminal user interfaces using OpenTUI core",
   license: "MIT",
   repository: {
@@ -260,7 +260,8 @@ import {
   SelectRenderable as SelectRenderable2,
   SelectRenderableEvents,
   TabSelectRenderable as TabSelectRenderable2,
-  TabSelectRenderableEvents
+  TabSelectRenderableEvents,
+  TextareaRenderable as TextareaRenderable2
 } from "@opentui/core";
 function initEventListeners(instance, eventName, listener, previousListener) {
   if (previousListener) {
@@ -311,6 +312,8 @@ function setProperty(instance, type, propKey, propValue, oldPropValue) {
     case "onSubmit":
       if (instance instanceof InputRenderable2) {
         initEventListeners(instance, InputRenderableEvents.ENTER, propValue, oldPropValue);
+      } else if (instance instanceof TextareaRenderable2) {
+        instance.onSubmit = propValue;
       }
       break;
     case "onSelect":

package/index.js

@@ -11,19 +11,158 @@ import {
   getComponentCatalogue,
   jsxDEV,
   useAppContext
-} from "./chunk-cecjmcj8.js";
+} from "./chunk-mq7v1x2n.js";
 import"./chunk-2mx7fq49.js";
+// src/hooks/use-keymap.ts
+import {
+  getKeymap
+} from "@opentui/core/extras";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
+
+// src/hooks/use-renderer.ts
+var useRenderer = () => {
+  const { renderer } = useAppContext();
+  if (!renderer) {
+    throw new Error("Renderer not found.");
+  }
+  return renderer;
+};
+
+// src/hooks/use-keymap.ts
+function resolveBindingsTarget(target) {
+  if (typeof target === "function") {
+    return target() ?? undefined;
+  }
+  return target ?? undefined;
+}
+var useKeymap = () => {
+  const renderer = useRenderer();
+  return useMemo(() => getKeymap(renderer), [renderer]);
+};
+function useKeymapStateVersion(keymap) {
+  const [version, bumpVersion] = useReducer((value) => value + 1, 0);
+  useLayoutEffect(() => {
+    const dispose = keymap.on("state", () => {
+      bumpVersion();
+    });
+    return () => {
+      dispose();
+    };
+  }, [keymap]);
+  return version;
+}
+var useActiveKeys = (options) => {
+  const keymap = useKeymap();
+  const version = useKeymapStateVersion(keymap);
+  return useMemo(() => {
+    return keymap.getActiveKeys(options);
+  }, [keymap, options, version]);
+};
+var usePendingSequence = () => {
+  const keymap = useKeymap();
+  const version = useKeymapStateVersion(keymap);
+  return useMemo(() => {
+    return keymap.getPendingSequence();
+  }, [keymap, version]);
+};
+function useBindings(createLayer, deps = []) {
+  const keymap = useKeymap();
+  const layer = useMemo(createLayer, deps);
+  const layerRef = useRef(layer);
+  const refTargetRef = useRef(undefined);
+  const disposeRef = useRef(undefined);
+  const mountedRef = useRef(false);
+  const registeredScopeRef = useRef(undefined);
+  const registeredTargetRef = useRef(undefined);
+  layerRef.current = layer;
+  const unregister = useCallback(() => {
+    disposeRef.current?.();
+    disposeRef.current = undefined;
+    registeredScopeRef.current = undefined;
+    registeredTargetRef.current = undefined;
+  }, []);
+  const register = useCallback(() => {
+    if (disposeRef.current) {
+      return;
+    }
+    const currentLayer = layerRef.current;
+    const explicitTarget = resolveBindingsTarget(currentLayer.target);
+    const resolvedTarget = explicitTarget ?? refTargetRef.current;
+    const resolvedScope = currentLayer.scope ?? (resolvedTarget ? "focus-within" : "global");
+    if (currentLayer.target !== undefined && !explicitTarget) {
+      throw new Error("useBindings target was not available during mount");
+    }
+    if (resolvedScope !== "global" && !resolvedTarget) {
+      throw new Error("useBindings local bindings need a target or the returned ref callback attached to a renderable");
+    }
+    const { scope: _scope, target: _target, ...baseLayer } = currentLayer;
+    const resolvedLayer = resolvedScope === "global" ? {
+      ...baseLayer,
+      scope: "global"
+    } : {
+      ...baseLayer,
+      scope: resolvedScope,
+      target: resolvedTarget
+    };
+    disposeRef.current = keymap.registerLayer(resolvedLayer);
+    registeredScopeRef.current = resolvedScope;
+    registeredTargetRef.current = resolvedScope === "global" ? undefined : resolvedTarget;
+  }, [keymap]);
+  const ref = useCallback((value) => {
+    refTargetRef.current = value ?? undefined;
+  }, []);
+  useEffect(() => {
+    mountedRef.current = true;
+    unregister();
+    register();
+    return () => {
+      mountedRef.current = false;
+      unregister();
+    };
+  }, [layer, register, unregister]);
+  useEffect(() => {
+    if (!mountedRef.current) {
+      return;
+    }
+    const currentLayer = layerRef.current;
+    if (currentLayer.target !== undefined || currentLayer.scope === "global") {
+      return;
+    }
+    const resolvedTarget = refTargetRef.current;
+    const resolvedScope = currentLayer.scope ?? (resolvedTarget ? "focus-within" : "global");
+    const nextTarget = resolvedScope === "global" ? undefined : resolvedTarget;
+    if (registeredScopeRef.current === resolvedScope && registeredTargetRef.current === nextTarget) {
+      return;
+    }
+    unregister();
+    if (!nextTarget && currentLayer.scope !== undefined) {
+      return;
+    }
+    register();
+  });
+  return ref;
+}
+function reactiveMatcherFromStore(subscribe, getSnapshot, predicate) {
+  return {
+    get() {
+      return predicate ? predicate(getSnapshot()) : Boolean(getSnapshot());
+    },
+    subscribe(onChange) {
+      return subscribe(onChange);
+    }
+  };
+}
 // src/hooks/use-keyboard.ts
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 
 // src/hooks/use-event.ts
-import { useCallback, useLayoutEffect, useRef } from "react";
+import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
 function useEffectEvent(handler) {
-  const handlerRef = useRef(handler);
-  useLayoutEffect(() => {
+  const handlerRef = useRef2(handler);
+  useLayoutEffect2(() => {
     handlerRef.current = handler;
   });
-  return useCallback((...args) => {
+  return useCallback2((...args) => {
     const fn = handlerRef.current;
     return fn(...args);
   }, []);
@@ -33,7 +172,7 @@ function useEffectEvent(handler) {
 var useKeyboard = (handler, options = { release: false }) => {
   const { keyHandler } = useAppContext();
   const stableHandler = useEffectEvent(handler);
-  useEffect(() => {
+  useEffect2(() => {
     keyHandler?.on("keypress", stableHandler);
     if (options?.release) {
       keyHandler?.on("keyrelease", stableHandler);
@@ -46,20 +185,12 @@ 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-resize.ts
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 var useOnResize = (callback) => {
   const renderer = useRenderer();
   const stableCallback = useEffectEvent(callback);
-  useEffect2(() => {
+  useEffect3(() => {
     renderer.on("resize", stableCallback);
     return () => {
       renderer.off("resize", stableCallback);
@@ -83,10 +214,10 @@ var useTerminalDimensions = () => {
 };
 // src/hooks/use-timeline.ts
 import { engine, Timeline } from "@opentui/core";
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 var useTimeline = (options = {}) => {
   const timeline = new Timeline(options);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!options.autoplay) {
       timeline.play();
     }
@@ -102,7 +233,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 useEffect5, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
 function createReactSlotRegistry(renderer, context, options = {}) {
   return createSlotRegistry(renderer, "react:slot-registry", context, options);
 }
@@ -179,14 +310,14 @@ function Slot(props) {
   const [version, setVersion] = useState2(0);
   const registry = props.registry;
   const slotName = String(props.name);
-  const renderFailuresByPluginRef = useRef2(new Map);
-  const pendingRenderReportsRef = useRef2(new Map);
-  useEffect4(() => {
+  const renderFailuresByPluginRef = useRef3(new Map);
+  const pendingRenderReportsRef = useRef3(new Map);
+  useEffect5(() => {
     return registry.subscribe(() => {
       setVersion((current) => current + 1);
     });
   }, [registry]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (pendingRenderReportsRef.current.size === 0) {
       return;
     }
@@ -203,7 +334,7 @@ function Slot(props) {
       renderFailuresByPluginRef.current.set(`${report.slot}:${report.pluginId}:render`, failure);
     }
   });
-  const entries = useMemo(() => registry.resolveEntries(props.name), [registry, props.name, version]);
+  const entries = useMemo2(() => registry.resolveEntries(props.name), [registry, props.name, version]);
   const slotProps = getSlotProps(props);
   const renderEntry = (entry, fallbackOnFailure) => {
     const key = `${slotName}:${entry.id}`;
@@ -319,9 +450,14 @@ export {
   useTimeline,
   useTerminalDimensions,
   useRenderer,
+  usePendingSequence,
   useOnResize,
+  useKeymap,
   useKeyboard,
+  useBindings,
   useAppContext,
+  useActiveKeys,
+  reactiveMatcherFromStore,
   getComponentCatalogue,
   flushSync,
   extend,

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.0.0-20260412-2fcfd0af",
+  "version": "0.0.0-20260419-49f00f96",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -44,7 +44,7 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.0.0-20260412-2fcfd0af",
+    "@opentui/core": "0.0.0-20260419-49f00f96",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {

package/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./use-keymap.js";
 export * from "./use-keyboard.js";
 export * from "./use-renderer.js";
 export * from "./use-resize.js";

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

@@ -0,0 +1,36 @@
+import type { Renderable } from "@opentui/core";
+import { type ActiveKey, type ActiveKeyOptions, type LayerFields, type Keymap, type ReactiveMatcher, type KeySequencePart } from "@opentui/core/extras";
+import { type DependencyList } from "react";
+export type UseBindingsTarget<TRenderable extends Renderable = Renderable> = TRenderable | null | undefined | (() => TRenderable | null | undefined);
+type UseBindingsLayerBase = LayerFields;
+export type BindingsRef<TRenderable extends Renderable = Renderable> = (value: TRenderable | null) => void;
+export interface UseGlobalBindingsLayer extends UseBindingsLayerBase {
+    scope?: "global";
+    target?: undefined;
+}
+export interface UseFocusBindingsLayer<TRenderable extends Renderable = Renderable> extends UseBindingsLayerBase {
+    scope: "focus";
+    target?: UseBindingsTarget<TRenderable>;
+}
+export interface UseFocusWithinBindingsLayer<TRenderable extends Renderable = Renderable> extends UseBindingsLayerBase {
+    scope: "focus-within";
+    target?: UseBindingsTarget<TRenderable>;
+}
+export interface UseInferredFocusWithinBindingsLayer<TRenderable extends Renderable = Renderable> extends UseBindingsLayerBase {
+    scope?: undefined;
+    target: UseBindingsTarget<TRenderable>;
+}
+export type UseTargetBindingsLayer<TRenderable extends Renderable = Renderable> = UseFocusBindingsLayer<TRenderable> | UseFocusWithinBindingsLayer<TRenderable> | UseInferredFocusWithinBindingsLayer<TRenderable>;
+export type UseBindingsLayer<TRenderable extends Renderable = Renderable> = UseGlobalBindingsLayer | UseTargetBindingsLayer<TRenderable>;
+export declare const useKeymap: () => Keymap;
+export declare const useActiveKeys: (options?: ActiveKeyOptions) => readonly ActiveKey[];
+export declare const usePendingSequence: () => readonly KeySequencePart[];
+export declare function useBindings<TRenderable extends Renderable = Renderable>(createLayer: () => UseGlobalBindingsLayer, deps?: DependencyList): BindingsRef<TRenderable>;
+export declare function useBindings<TRenderable extends Renderable = Renderable>(createLayer: () => UseTargetBindingsLayer<TRenderable>, deps?: DependencyList): BindingsRef<TRenderable>;
+/**
+ * Adapts any `subscribe` + `getSnapshot` store to
+ * `ReactiveMatcher`. Pass `predicate` when the snapshot value is not
+ * already boolean.
+ */
+export declare function reactiveMatcherFromStore<T>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => T, predicate?: (value: T) => boolean): ReactiveMatcher;
+export {};

package/src/types/components.d.ts

@@ -1,4 +1,4 @@
-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 { 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, CursorChangeEvent, ContentChangeEvent, KeyEvent } 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}`;
@@ -46,6 +46,10 @@ export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable>
 };
 export type TextareaProps = ComponentProps<TextareaOptions, TextareaRenderable> & {
     focused?: boolean;
+    onSubmit?: () => void;
+    onContentChange?: (event: ContentChangeEvent) => void;
+    onCursorChange?: (event: CursorChangeEvent) => void;
+    onKeyDown?: (event: KeyEvent) => void;
 };
 export type CodeProps = ComponentProps<CodeOptions, CodeRenderable>;
 export type MarkdownProps = ComponentProps<MarkdownOptions, MarkdownRenderable>;

package/test-utils.js

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