@opentui/react 0.0.0-20260419-49f00f96 → 0.0.0-20260423-76a94f40

package/{chunk-mq7v1x2n.js → chunk-9fvvv225.js}

@@ -166,7 +166,7 @@ import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
 // package.json
 var package_default = {
   name: "@opentui/react",
-  version: "0.0.0-20260419-49f00f96",
+  version: "0.0.0-20260423-76a94f40",
   description: "React renderer for building terminal user interfaces using OpenTUI core",
   license: "MIT",
   repository: {
@@ -208,6 +208,7 @@ var package_default = {
     test: "bun test"
   },
   devDependencies: {
+    "@opentui/keymap": "workspace:*",
     "@types/bun": "latest",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./src/index.js";

package/index.js

@@ -11,158 +11,19 @@ import {
   getComponentCatalogue,
   jsxDEV,
   useAppContext
-} from "./chunk-mq7v1x2n.js";
+} from "./chunk-9fvvv225.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 as useEffect2 } from "react";
+import { useEffect } from "react";
 
 // src/hooks/use-event.ts
-import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { useCallback, useLayoutEffect, useRef } from "react";
 function useEffectEvent(handler) {
-  const handlerRef = useRef2(handler);
-  useLayoutEffect2(() => {
+  const handlerRef = useRef(handler);
+  useLayoutEffect(() => {
     handlerRef.current = handler;
   });
-  return useCallback2((...args) => {
+  return useCallback((...args) => {
     const fn = handlerRef.current;
     return fn(...args);
   }, []);
@@ -172,7 +33,7 @@ function useEffectEvent(handler) {
 var useKeyboard = (handler, options = { release: false }) => {
   const { keyHandler } = useAppContext();
   const stableHandler = useEffectEvent(handler);
-  useEffect2(() => {
+  useEffect(() => {
     keyHandler?.on("keypress", stableHandler);
     if (options?.release) {
       keyHandler?.on("keyrelease", stableHandler);
@@ -185,12 +46,20 @@ 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 useEffect3 } from "react";
+import { useEffect as useEffect2 } from "react";
 var useOnResize = (callback) => {
   const renderer = useRenderer();
   const stableCallback = useEffectEvent(callback);
-  useEffect3(() => {
+  useEffect2(() => {
     renderer.on("resize", stableCallback);
     return () => {
       renderer.off("resize", stableCallback);
@@ -214,10 +83,10 @@ var useTerminalDimensions = () => {
 };
 // src/hooks/use-timeline.ts
 import { engine, Timeline } from "@opentui/core";
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect3 } from "react";
 var useTimeline = (options = {}) => {
   const timeline = new Timeline(options);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!options.autoplay) {
       timeline.play();
     }
@@ -233,7 +102,7 @@ var useTimeline = (options = {}) => {
 import {
   createSlotRegistry
 } from "@opentui/core";
-import React, { Fragment as Fragment2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
+import React, { Fragment as Fragment2, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState2 } from "react";
 function createReactSlotRegistry(renderer, context, options = {}) {
   return createSlotRegistry(renderer, "react:slot-registry", context, options);
 }
@@ -310,14 +179,14 @@ function Slot(props) {
   const [version, setVersion] = useState2(0);
   const registry = props.registry;
   const slotName = String(props.name);
-  const renderFailuresByPluginRef = useRef3(new Map);
-  const pendingRenderReportsRef = useRef3(new Map);
-  useEffect5(() => {
+  const renderFailuresByPluginRef = useRef2(new Map);
+  const pendingRenderReportsRef = useRef2(new Map);
+  useEffect4(() => {
     return registry.subscribe(() => {
       setVersion((current) => current + 1);
     });
   }, [registry]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (pendingRenderReportsRef.current.size === 0) {
       return;
     }
@@ -334,7 +203,7 @@ function Slot(props) {
       renderFailuresByPluginRef.current.set(`${report.slot}:${report.pluginId}:render`, failure);
     }
   });
-  const entries = useMemo2(() => registry.resolveEntries(props.name), [registry, props.name, version]);
+  const entries = useMemo(() => registry.resolveEntries(props.name), [registry, props.name, version]);
   const slotProps = getSlotProps(props);
   const renderEntry = (entry, fallbackOnFailure) => {
     const key = `${slotName}:${entry.id}`;
@@ -450,14 +319,9 @@ 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-20260419-49f00f96",
+  "version": "0.0.0-20260423-76a94f40",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -44,10 +44,11 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.0.0-20260419-49f00f96",
+    "@opentui/core": "0.0.0-20260423-76a94f40",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {
+    "@opentui/keymap": "workspace:*",
     "@types/bun": "latest",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",

package/scripts/runtime-plugin-support.ts

@@ -4,7 +4,7 @@ import { createRuntimePlugin, type RuntimeModuleEntry } from "@opentui/core/runt
 import * as reactRuntime from "react"
 import * as reactJsxRuntime from "react/jsx-runtime"
 import * as reactJsxDevRuntime from "react/jsx-dev-runtime"
-import * as opentuiReactRuntime from "../src/index.js"
+import * as opentuiReactRuntime from "../index.js"
 
 const runtimePluginSupportInstalledKey = "__opentuiReactRuntimePluginSupportInstalled__"
 

package/src/hooks/index.d.ts

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

package/test-utils.js

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

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

@@ -1,36 +0,0 @@
-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 {};