giggles 0.3.0 → 0.3.1

package/README.md

@@ -1,4 +1,4 @@
-[![CI](https://github.com/zion-off/giggles/actions/workflows/giggles-lint.yml/badge.svg)](https://github.com/zion-off/giggles/actions/workflows/giggles-lint.yml)
+[![CI](https://github.com/zion-off/giggles/actions/workflows/giggles-ci.yml/badge.svg)](https://github.com/zion-off/giggles/actions/workflows/giggles-ci.yml)
 [![CD](https://github.com/zion-off/giggles/actions/workflows/giggles-cd.yml/badge.svg)](https://github.com/zion-off/giggles/actions/workflows/giggles-cd.yml)
 [![docs](https://img.shields.io/badge/docs-giggles.zzzzion.com-blue)](https://giggles.zzzzion.com)
 

package/dist/chunk-4LED4GXQ.js

@@ -0,0 +1,460 @@
+// src/core/GigglesError.ts
+var GigglesError = class extends Error {
+  constructor(message) {
+    super(`[giggles] ${message}`);
+    this.name = "GigglesError";
+  }
+};
+
+// src/core/input/useKeybindings.tsx
+import { useEffect } from "react";
+
+// src/core/input/InputContext.tsx
+import { createContext, useCallback, useContext, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var InputContext = createContext(null);
+var InputProvider = ({ children }) => {
+  const bindingsRef = useRef(/* @__PURE__ */ new Map());
+  const trapNodeIdRef = useRef(null);
+  const registerKeybindings = useCallback((nodeId, bindings, options) => {
+    const entries = Object.entries(bindings).filter((entry) => entry[1] != null).map(([key, def]) => {
+      if (typeof def === "function") {
+        return [key, { handler: def }];
+      }
+      return [key, { handler: def.action, name: def.name, when: def.when }];
+    });
+    const registration = {
+      bindings: new Map(entries),
+      capture: (options == null ? void 0 : options.capture) ?? false,
+      onKeypress: options == null ? void 0 : options.onKeypress,
+      layer: options == null ? void 0 : options.layer
+    };
+    bindingsRef.current.set(nodeId, registration);
+  }, []);
+  const unregisterKeybindings = useCallback((nodeId) => {
+    bindingsRef.current.delete(nodeId);
+  }, []);
+  const getNodeBindings = useCallback((nodeId) => {
+    return bindingsRef.current.get(nodeId);
+  }, []);
+  const setTrap = useCallback((nodeId) => {
+    trapNodeIdRef.current = nodeId;
+  }, []);
+  const clearTrap = useCallback((nodeId) => {
+    if (trapNodeIdRef.current === nodeId) {
+      trapNodeIdRef.current = null;
+    }
+  }, []);
+  const getTrapNodeId = useCallback(() => {
+    return trapNodeIdRef.current;
+  }, []);
+  const getAllBindings = useCallback(() => {
+    const allBindings = [];
+    bindingsRef.current.forEach((nodeBindings, nodeId) => {
+      nodeBindings.bindings.forEach((entry, key) => {
+        allBindings.push({
+          nodeId,
+          key,
+          handler: entry.handler,
+          name: entry.name,
+          when: entry.when,
+          layer: nodeBindings.layer
+        });
+      });
+    });
+    return allBindings;
+  }, []);
+  return /* @__PURE__ */ jsx(
+    InputContext.Provider,
+    {
+      value: {
+        registerKeybindings,
+        unregisterKeybindings,
+        getNodeBindings,
+        setTrap,
+        clearTrap,
+        getTrapNodeId,
+        getAllBindings
+      },
+      children
+    }
+  );
+};
+function useInputContext() {
+  const context = useContext(InputContext);
+  if (!context) {
+    throw new GigglesError("useInputContext must be used within an InputProvider");
+  }
+  return context;
+}
+
+// src/core/input/useKeybindings.tsx
+function useKeybindings(focus, bindings, options) {
+  const { registerKeybindings, unregisterKeybindings } = useInputContext();
+  registerKeybindings(focus.id, bindings, options);
+  useEffect(() => {
+    return () => unregisterKeybindings(focus.id);
+  }, [focus.id, unregisterKeybindings]);
+}
+
+// src/core/focus/FocusContext.tsx
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useRef as useRef2, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FocusContext = createContext2(null);
+var FocusProvider = ({ children }) => {
+  const nodesRef = useRef2(/* @__PURE__ */ new Map());
+  const pendingFocusFirstChildRef = useRef2(/* @__PURE__ */ new Set());
+  const [focusedId, setFocusedId] = useState(null);
+  const focusNode = useCallback2((id) => {
+    const nodes = nodesRef.current;
+    if (!nodes.has(id)) return;
+    setFocusedId((current) => {
+      if (current === id) return current;
+      return id;
+    });
+  }, []);
+  const focusFirstChild = useCallback2(
+    (parentId) => {
+      const nodes = nodesRef.current;
+      const parent = nodes.get(parentId);
+      if (parent && parent.childrenIds.length > 0) {
+        focusNode(parent.childrenIds[0]);
+      } else {
+        pendingFocusFirstChildRef.current.add(parentId);
+      }
+    },
+    [focusNode]
+  );
+  const registerNode = useCallback2(
+    (id, parentId) => {
+      const nodes = nodesRef.current;
+      const node = {
+        id,
+        parentId,
+        childrenIds: []
+      };
+      nodes.set(id, node);
+      if (parentId) {
+        const parent = nodes.get(parentId);
+        if (parent && !parent.childrenIds.includes(id)) {
+          const wasEmpty = parent.childrenIds.length === 0;
+          parent.childrenIds.push(id);
+          if (wasEmpty && pendingFocusFirstChildRef.current.has(parentId)) {
+            pendingFocusFirstChildRef.current.delete(parentId);
+            focusNode(id);
+          }
+        }
+      }
+      nodes.forEach((existingNode) => {
+        if (existingNode.parentId === id && !node.childrenIds.includes(existingNode.id)) {
+          node.childrenIds.push(existingNode.id);
+        }
+      });
+      if (nodes.size === 1) {
+        focusNode(id);
+      }
+    },
+    [focusNode]
+  );
+  const unregisterNode = useCallback2((id) => {
+    const nodes = nodesRef.current;
+    const node = nodes.get(id);
+    if (!node) return;
+    if (node.parentId) {
+      const parent = nodes.get(node.parentId);
+      if (parent) {
+        parent.childrenIds = parent.childrenIds.filter((childId) => childId !== id);
+      }
+    }
+    nodes.delete(id);
+    pendingFocusFirstChildRef.current.delete(id);
+    setFocusedId((current) => {
+      if (current !== id) return current;
+      return node.parentId ?? null;
+    });
+  }, []);
+  const isFocused = useCallback2(
+    (id) => {
+      return id === focusedId;
+    },
+    [focusedId]
+  );
+  const getFocusedId = useCallback2(() => {
+    return focusedId;
+  }, [focusedId]);
+  const getActiveBranchPath = useCallback2(() => {
+    if (!focusedId) return [];
+    const nodes = nodesRef.current;
+    const pathArray = [];
+    let node = focusedId;
+    while (node) {
+      pathArray.push(node);
+      const n = nodes.get(node);
+      node = (n == null ? void 0 : n.parentId) ?? null;
+    }
+    return pathArray;
+  }, [focusedId]);
+  const navigateSibling = useCallback2(
+    (direction, wrap = true) => {
+      const currentId = focusedId;
+      if (!currentId) return;
+      const nodes = nodesRef.current;
+      const currentNode = nodes.get(currentId);
+      if (!(currentNode == null ? void 0 : currentNode.parentId)) return;
+      const parent = nodes.get(currentNode.parentId);
+      if (!parent || parent.childrenIds.length === 0) return;
+      const siblings = parent.childrenIds;
+      const currentIndex = siblings.indexOf(currentId);
+      if (currentIndex === -1) return;
+      let nextIndex;
+      if (wrap) {
+        nextIndex = direction === "next" ? (currentIndex + 1) % siblings.length : (currentIndex - 1 + siblings.length) % siblings.length;
+      } else {
+        nextIndex = direction === "next" ? Math.min(currentIndex + 1, siblings.length - 1) : Math.max(currentIndex - 1, 0);
+      }
+      focusNode(siblings[nextIndex]);
+    },
+    [focusedId, focusNode]
+  );
+  return /* @__PURE__ */ jsx2(
+    FocusContext.Provider,
+    {
+      value: {
+        registerNode,
+        unregisterNode,
+        focusNode,
+        focusFirstChild,
+        isFocused,
+        getFocusedId,
+        getActiveBranchPath,
+        navigateSibling
+      },
+      children
+    }
+  );
+};
+var FocusNodeContext = createContext2(null);
+var useFocusContext = () => {
+  const context = useContext2(FocusContext);
+  if (!context) {
+    throw new GigglesError("useFocusContext must be used within a FocusProvider");
+  }
+  return context;
+};
+
+// src/core/input/useKeybindingRegistry.ts
+function useKeybindingRegistry(focus) {
+  const { getAllBindings, getTrapNodeId } = useInputContext();
+  const { getActiveBranchPath } = useFocusContext();
+  const all = getAllBindings().filter((b) => b.name != null);
+  const branchPath = getActiveBranchPath();
+  const branchSet = new Set(branchPath);
+  const trapNodeId = getTrapNodeId();
+  const withinTrapSet = (() => {
+    if (!trapNodeId) return null;
+    const trapIndex = branchPath.indexOf(trapNodeId);
+    return trapIndex >= 0 ? new Set(branchPath.slice(0, trapIndex + 1)) : null;
+  })();
+  const available = all.filter((b) => {
+    if (b.when === "mounted") return withinTrapSet ? withinTrapSet.has(b.nodeId) : true;
+    return (withinTrapSet ?? branchSet).has(b.nodeId);
+  });
+  const local = focus ? all.filter((b) => b.nodeId === focus.id) : [];
+  return { all, available, local };
+}
+
+// src/core/input/FocusTrap.tsx
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
+
+// src/core/focus/FocusGroup.tsx
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef3 } from "react";
+
+// src/core/input/InputRouter.tsx
+import { useInput } from "ink";
+
+// src/core/input/normalizeKey.ts
+function normalizeKey(input, key) {
+  if (input === "\x1B[I" || input === "\x1B[O") return "";
+  if (key.downArrow) return "down";
+  if (key.upArrow) return "up";
+  if (key.leftArrow) return "left";
+  if (key.rightArrow) return "right";
+  if (key.return) return "enter";
+  if (key.escape) return "escape";
+  if (key.tab) return "tab";
+  if (key.backspace || key.delete) return "backspace";
+  if (key.pageUp) return "pageup";
+  if (key.pageDown) return "pagedown";
+  if (key.home) return "home";
+  if (key.end) return "end";
+  if (key.ctrl && input.length === 1) {
+    return `ctrl+${input}`;
+  }
+  return input;
+}
+
+// src/core/input/InputRouter.tsx
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+function InputRouter({ children }) {
+  const { getFocusedId, getActiveBranchPath } = useFocusContext();
+  const { getNodeBindings, getTrapNodeId, getAllBindings } = useInputContext();
+  useInput((input, key) => {
+    const focusedId = getFocusedId();
+    if (!focusedId) return;
+    const path = getActiveBranchPath();
+    const trapNodeId = getTrapNodeId();
+    const keyName = normalizeKey(input, key);
+    if (!keyName) return;
+    for (const nodeId of path) {
+      const nodeBindings = getNodeBindings(nodeId);
+      if (!nodeBindings) continue;
+      const entry = nodeBindings.bindings.get(keyName);
+      if (entry && entry.when !== "mounted") {
+        entry.handler(input, key);
+        return;
+      }
+      if (nodeBindings.capture && nodeBindings.onKeypress) {
+        nodeBindings.onKeypress(input, key);
+        return;
+      }
+      if (nodeId === trapNodeId) {
+        return;
+      }
+    }
+    for (const binding of getAllBindings()) {
+      if (binding.key === keyName && binding.when === "mounted") {
+        binding.handler(input, key);
+        return;
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx3(Fragment, { children });
+}
+
+// src/core/focus/FocusBindContext.tsx
+import { createContext as createContext3 } from "react";
+var FocusBindContext = createContext3(null);
+
+// src/core/focus/useFocus.ts
+import { useContext as useContext3, useEffect as useEffect2, useId } from "react";
+var useFocus = (id) => {
+  const nodeId = useId();
+  const parentId = useContext3(FocusNodeContext);
+  const bindContext = useContext3(FocusBindContext);
+  const { focusNode, registerNode, unregisterNode, isFocused } = useFocusContext();
+  useEffect2(() => {
+    registerNode(nodeId, parentId);
+    if (id && bindContext) {
+      bindContext.register(id, nodeId);
+    }
+    return () => {
+      unregisterNode(nodeId);
+      if (id && bindContext) {
+        bindContext.unregister(id);
+      }
+    };
+  }, [nodeId, parentId, id, bindContext, registerNode, unregisterNode]);
+  return {
+    id: nodeId,
+    focused: isFocused(nodeId),
+    focus: () => focusNode(nodeId)
+  };
+};
+
+// src/core/focus/FocusGroup.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function FocusGroup({
+  children,
+  direction = "vertical",
+  value,
+  wrap = true,
+  navigable = true,
+  keybindings: customBindings
+}) {
+  const focus = useFocus();
+  const { focusNode, navigateSibling } = useFocusContext();
+  const bindMapRef = useRef3(/* @__PURE__ */ new Map());
+  const register = useCallback3((logicalId, nodeId) => {
+    if (bindMapRef.current.has(logicalId)) {
+      throw new GigglesError(`FocusGroup: Duplicate id "${logicalId}". Each child must have a unique id.`);
+    }
+    bindMapRef.current.set(logicalId, nodeId);
+  }, []);
+  const unregister = useCallback3((logicalId) => {
+    bindMapRef.current.delete(logicalId);
+  }, []);
+  useEffect3(() => {
+    if (value) {
+      const nodeId = bindMapRef.current.get(value);
+      if (nodeId) {
+        focusNode(nodeId);
+      }
+    }
+  }, [value, focusNode]);
+  const bindContextValue = useMemo(() => value ? { register, unregister } : null, [value, register, unregister]);
+  const navigationKeys = useMemo(() => {
+    if (!navigable) return {};
+    const next = () => navigateSibling("next", wrap);
+    const prev = () => navigateSibling("prev", wrap);
+    return direction === "vertical" ? {
+      j: next,
+      k: prev,
+      down: next,
+      up: prev
+    } : {
+      l: next,
+      h: prev,
+      right: next,
+      left: prev
+    };
+  }, [navigable, direction, wrap, navigateSibling]);
+  const mergedBindings = useMemo(
+    () => ({ ...navigationKeys, ...customBindings }),
+    [navigationKeys, customBindings]
+  );
+  useKeybindings(focus, mergedBindings);
+  return /* @__PURE__ */ jsx4(FocusNodeContext.Provider, { value: focus.id, children: /* @__PURE__ */ jsx4(FocusBindContext.Provider, { value: bindContextValue, children }) });
+}
+
+// src/core/focus/useFocusState.ts
+import { useState as useState2 } from "react";
+function useFocusState(initial) {
+  const [focused, setFocused] = useState2(initial);
+  return [focused, setFocused];
+}
+
+// src/core/input/FocusTrap.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function FocusTrap({ children }) {
+  const { id } = useFocus();
+  const { setTrap, clearTrap } = useInputContext();
+  const { focusFirstChild, getFocusedId, focusNode } = useFocusContext();
+  const previousFocusRef = useRef4(getFocusedId());
+  useEffect4(() => {
+    const previousFocus = previousFocusRef.current;
+    setTrap(id);
+    focusFirstChild(id);
+    return () => {
+      clearTrap(id);
+      if (previousFocus) {
+        focusNode(previousFocus);
+      }
+    };
+  }, [id]);
+  return /* @__PURE__ */ jsx5(FocusNodeContext.Provider, { value: id, children });
+}
+
+export {
+  GigglesError,
+  FocusProvider,
+  FocusNodeContext,
+  useFocusContext,
+  InputProvider,
+  InputRouter,
+  useKeybindings,
+  useKeybindingRegistry,
+  FocusTrap,
+  useFocus,
+  FocusGroup,
+  useFocusState
+};

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default from 'react';
-import { Key } from 'ink';
+import { K as Keybindings, a as KeybindingOptions, R as RegisteredKeybinding } from './types-ClgDW3fy.js';
+export { b as KeyHandler } from './types-ClgDW3fy.js';
 export { Key } from 'ink';
 
 declare class GigglesError extends Error {
@@ -13,18 +14,15 @@ type GigglesProviderProps = {
 };
 declare function GigglesProvider({ children }: GigglesProviderProps): react_jsx_runtime.JSX.Element;
 
-type KeyHandler = (input: string, key: Key) => void;
-type SpecialKey = 'up' | 'down' | 'left' | 'right' | 'enter' | 'escape' | 'tab' | 'backspace' | 'delete' | 'pageup' | 'pagedown' | 'home' | 'end';
-type KeyName = SpecialKey | (string & {});
-type Keybindings = Partial<Record<KeyName, KeyHandler>>;
-type KeybindingOptions = {
-    capture?: boolean;
-    onKeypress?: (input: string, key: Key) => void;
-    layer?: string;
-};
-
 declare function useKeybindings(focus: FocusHandle, bindings: Keybindings, options?: KeybindingOptions): void;
 
+type KeybindingRegistry = {
+    all: RegisteredKeybinding[];
+    available: RegisteredKeybinding[];
+    local: RegisteredKeybinding[];
+};
+declare function useKeybindingRegistry(focus?: FocusHandle): KeybindingRegistry;
+
 type FocusTrapProps = {
     children: React.ReactNode;
 };
@@ -81,4 +79,4 @@ type NavigationContextValue = {
 
 declare const useNavigation: () => NavigationContextValue;
 
-export { FocusGroup, type FocusHandle, FocusTrap, GigglesError, GigglesProvider, type KeyHandler, type KeybindingOptions, type Keybindings, type NavigationContextValue, Router, Screen, useFocus, useFocusState, useKeybindings, useNavigation };
+export { FocusGroup, type FocusHandle, FocusTrap, GigglesError, GigglesProvider, KeybindingOptions, type KeybindingRegistry, Keybindings, type NavigationContextValue, RegisteredKeybinding, Router, Screen, useFocus, useFocusState, useKeybindingRegistry, useKeybindings, useNavigation };

package/dist/index.js

@@ -1,420 +1,29 @@
 import {
   AlternateScreen
 } from "./chunk-7PDVDYFB.js";
-
-// src/core/GigglesError.ts
-var GigglesError = class extends Error {
-  constructor(message) {
-    super(`[giggles] ${message}`);
-    this.name = "GigglesError";
-  }
-};
-
-// src/core/focus/FocusContext.tsx
-import { createContext, useCallback, useContext, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-var FocusContext = createContext(null);
-var FocusProvider = ({ children }) => {
-  const nodesRef = useRef(/* @__PURE__ */ new Map());
-  const pendingFocusFirstChildRef = useRef(/* @__PURE__ */ new Set());
-  const [focusedId, setFocusedId] = useState(null);
-  const focusNode = useCallback((id) => {
-    const nodes = nodesRef.current;
-    if (!nodes.has(id)) return;
-    setFocusedId((current) => {
-      if (current === id) return current;
-      return id;
-    });
-  }, []);
-  const focusFirstChild = useCallback(
-    (parentId) => {
-      const nodes = nodesRef.current;
-      const parent = nodes.get(parentId);
-      if (parent && parent.childrenIds.length > 0) {
-        focusNode(parent.childrenIds[0]);
-      } else {
-        pendingFocusFirstChildRef.current.add(parentId);
-      }
-    },
-    [focusNode]
-  );
-  const registerNode = useCallback(
-    (id, parentId) => {
-      const nodes = nodesRef.current;
-      const node = {
-        id,
-        parentId,
-        childrenIds: []
-      };
-      nodes.set(id, node);
-      if (parentId) {
-        const parent = nodes.get(parentId);
-        if (parent && !parent.childrenIds.includes(id)) {
-          const wasEmpty = parent.childrenIds.length === 0;
-          parent.childrenIds.push(id);
-          if (wasEmpty && pendingFocusFirstChildRef.current.has(parentId)) {
-            pendingFocusFirstChildRef.current.delete(parentId);
-            focusNode(id);
-          }
-        }
-      }
-      nodes.forEach((existingNode) => {
-        if (existingNode.parentId === id && !node.childrenIds.includes(existingNode.id)) {
-          node.childrenIds.push(existingNode.id);
-        }
-      });
-      if (nodes.size === 1) {
-        focusNode(id);
-      }
-    },
-    [focusNode]
-  );
-  const unregisterNode = useCallback((id) => {
-    const nodes = nodesRef.current;
-    const node = nodes.get(id);
-    if (!node) return;
-    if (node.parentId) {
-      const parent = nodes.get(node.parentId);
-      if (parent) {
-        parent.childrenIds = parent.childrenIds.filter((childId) => childId !== id);
-      }
-    }
-    nodes.delete(id);
-    pendingFocusFirstChildRef.current.delete(id);
-    setFocusedId((current) => {
-      if (current !== id) return current;
-      return node.parentId ?? null;
-    });
-  }, []);
-  const isFocused = useCallback(
-    (id) => {
-      return id === focusedId;
-    },
-    [focusedId]
-  );
-  const getFocusedId = useCallback(() => {
-    return focusedId;
-  }, [focusedId]);
-  const getActiveBranchPath = useCallback(() => {
-    if (!focusedId) return [];
-    const nodes = nodesRef.current;
-    const pathArray = [];
-    let node = focusedId;
-    while (node) {
-      pathArray.push(node);
-      const n = nodes.get(node);
-      node = (n == null ? void 0 : n.parentId) ?? null;
-    }
-    return pathArray;
-  }, [focusedId]);
-  const navigateSibling = useCallback(
-    (direction, wrap = true) => {
-      const currentId = focusedId;
-      if (!currentId) return;
-      const nodes = nodesRef.current;
-      const currentNode = nodes.get(currentId);
-      if (!(currentNode == null ? void 0 : currentNode.parentId)) return;
-      const parent = nodes.get(currentNode.parentId);
-      if (!parent || parent.childrenIds.length === 0) return;
-      const siblings = parent.childrenIds;
-      const currentIndex = siblings.indexOf(currentId);
-      if (currentIndex === -1) return;
-      let nextIndex;
-      if (wrap) {
-        nextIndex = direction === "next" ? (currentIndex + 1) % siblings.length : (currentIndex - 1 + siblings.length) % siblings.length;
-      } else {
-        nextIndex = direction === "next" ? Math.min(currentIndex + 1, siblings.length - 1) : Math.max(currentIndex - 1, 0);
-      }
-      focusNode(siblings[nextIndex]);
-    },
-    [focusedId, focusNode]
-  );
-  return /* @__PURE__ */ jsx(
-    FocusContext.Provider,
-    {
-      value: {
-        registerNode,
-        unregisterNode,
-        focusNode,
-        focusFirstChild,
-        isFocused,
-        getFocusedId,
-        getActiveBranchPath,
-        navigateSibling
-      },
-      children
-    }
-  );
-};
-var FocusNodeContext = createContext(null);
-var useFocusContext = () => {
-  const context = useContext(FocusContext);
-  if (!context) {
-    throw new GigglesError("useFocusContext must be used within a FocusProvider");
-  }
-  return context;
-};
-
-// src/core/focus/FocusGroup.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef4 } from "react";
-
-// src/core/input/InputContext.tsx
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useRef as useRef2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var InputContext = createContext2(null);
-var InputProvider = ({ children }) => {
-  const bindingsRef = useRef2(/* @__PURE__ */ new Map());
-  const trapNodeIdRef = useRef2(null);
-  const registerKeybindings = useCallback2((nodeId, bindings, options) => {
-    const registration = {
-      bindings: new Map(Object.entries(bindings).filter((entry) => entry[1] != null)),
-      capture: (options == null ? void 0 : options.capture) ?? false,
-      onKeypress: options == null ? void 0 : options.onKeypress,
-      layer: options == null ? void 0 : options.layer
-    };
-    bindingsRef.current.set(nodeId, registration);
-  }, []);
-  const unregisterKeybindings = useCallback2((nodeId) => {
-    bindingsRef.current.delete(nodeId);
-  }, []);
-  const getNodeBindings = useCallback2((nodeId) => {
-    return bindingsRef.current.get(nodeId);
-  }, []);
-  const setTrap = useCallback2((nodeId) => {
-    trapNodeIdRef.current = nodeId;
-  }, []);
-  const clearTrap = useCallback2((nodeId) => {
-    if (trapNodeIdRef.current === nodeId) {
-      trapNodeIdRef.current = null;
-    }
-  }, []);
-  const getTrapNodeId = useCallback2(() => {
-    return trapNodeIdRef.current;
-  }, []);
-  const getAllBindings = useCallback2(() => {
-    const allBindings = [];
-    bindingsRef.current.forEach((nodeBindings, nodeId) => {
-      nodeBindings.bindings.forEach((handler, key) => {
-        allBindings.push({
-          nodeId,
-          key,
-          handler,
-          layer: nodeBindings.layer
-        });
-      });
-    });
-    return allBindings;
-  }, []);
-  return /* @__PURE__ */ jsx2(
-    InputContext.Provider,
-    {
-      value: {
-        registerKeybindings,
-        unregisterKeybindings,
-        getNodeBindings,
-        setTrap,
-        clearTrap,
-        getTrapNodeId,
-        getAllBindings
-      },
-      children
-    }
-  );
-};
-function useInputContext() {
-  const context = useContext2(InputContext);
-  if (!context) {
-    throw new GigglesError("useInputContext must be used within an InputProvider");
-  }
-  return context;
-}
-
-// src/core/input/InputRouter.tsx
-import { useInput } from "ink";
-
-// src/core/input/normalizeKey.ts
-function normalizeKey(input, key) {
-  if (input === "\x1B[I" || input === "\x1B[O") return "";
-  if (key.downArrow) return "down";
-  if (key.upArrow) return "up";
-  if (key.leftArrow) return "left";
-  if (key.rightArrow) return "right";
-  if (key.return) return "enter";
-  if (key.escape) return "escape";
-  if (key.tab) return "tab";
-  if (key.backspace) return "backspace";
-  if (key.delete) return "delete";
-  if (key.pageUp) return "pageup";
-  if (key.pageDown) return "pagedown";
-  if (key.home) return "home";
-  if (key.end) return "end";
-  return input;
-}
-
-// src/core/input/InputRouter.tsx
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
-function InputRouter({ children }) {
-  const { getFocusedId, getActiveBranchPath } = useFocusContext();
-  const { getNodeBindings, getTrapNodeId } = useInputContext();
-  useInput((input, key) => {
-    const focusedId = getFocusedId();
-    if (!focusedId) return;
-    const path = getActiveBranchPath();
-    const trapNodeId = getTrapNodeId();
-    const keyName = normalizeKey(input, key);
-    if (!keyName) return;
-    for (const nodeId of path) {
-      const nodeBindings = getNodeBindings(nodeId);
-      if (!nodeBindings) continue;
-      const handler = nodeBindings.bindings.get(keyName);
-      if (handler) {
-        handler(input, key);
-        return;
-      }
-      if (nodeBindings.capture && nodeBindings.onKeypress) {
-        nodeBindings.onKeypress(input, key);
-        return;
-      }
-      if (nodeId === trapNodeId) {
-        return;
-      }
-    }
-  });
-  return /* @__PURE__ */ jsx3(Fragment, { children });
-}
-
-// src/core/input/useKeybindings.tsx
-import { useEffect } from "react";
-function useKeybindings(focus, bindings, options) {
-  const { registerKeybindings, unregisterKeybindings } = useInputContext();
-  registerKeybindings(focus.id, bindings, options);
-  useEffect(() => {
-    return () => unregisterKeybindings(focus.id);
-  }, [focus.id, unregisterKeybindings]);
-}
-
-// src/core/input/FocusTrap.tsx
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function FocusTrap({ children }) {
-  const { id } = useFocus();
-  const { setTrap, clearTrap } = useInputContext();
-  const { focusFirstChild, getFocusedId, focusNode } = useFocusContext();
-  const previousFocusRef = useRef3(getFocusedId());
-  useEffect2(() => {
-    const previousFocus = previousFocusRef.current;
-    setTrap(id);
-    focusFirstChild(id);
-    return () => {
-      clearTrap(id);
-      if (previousFocus) {
-        focusNode(previousFocus);
-      }
-    };
-  }, [id]);
-  return /* @__PURE__ */ jsx4(FocusNodeContext.Provider, { value: id, children });
-}
-
-// src/core/focus/FocusBindContext.tsx
-import { createContext as createContext3 } from "react";
-var FocusBindContext = createContext3(null);
-
-// src/core/focus/useFocus.ts
-import { useContext as useContext3, useEffect as useEffect3, useId } from "react";
-var useFocus = (id) => {
-  const nodeId = useId();
-  const parentId = useContext3(FocusNodeContext);
-  const bindContext = useContext3(FocusBindContext);
-  const { focusNode, registerNode, unregisterNode, isFocused } = useFocusContext();
-  useEffect3(() => {
-    registerNode(nodeId, parentId);
-    if (id && bindContext) {
-      bindContext.register(id, nodeId);
-    }
-    return () => {
-      unregisterNode(nodeId);
-      if (id && bindContext) {
-        bindContext.unregister(id);
-      }
-    };
-  }, [nodeId, parentId, id, bindContext, registerNode, unregisterNode]);
-  return {
-    id: nodeId,
-    focused: isFocused(nodeId),
-    focus: () => focusNode(nodeId)
-  };
-};
-
-// src/core/focus/FocusGroup.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function FocusGroup({
-  children,
-  direction = "vertical",
-  value,
-  wrap = true,
-  navigable = true,
-  keybindings: customBindings
-}) {
-  const focus = useFocus();
-  const { focusNode, navigateSibling } = useFocusContext();
-  const bindMapRef = useRef4(/* @__PURE__ */ new Map());
-  const register = useCallback3((logicalId, nodeId) => {
-    if (bindMapRef.current.has(logicalId)) {
-      throw new GigglesError(`FocusGroup: Duplicate id "${logicalId}". Each child must have a unique id.`);
-    }
-    bindMapRef.current.set(logicalId, nodeId);
-  }, []);
-  const unregister = useCallback3((logicalId) => {
-    bindMapRef.current.delete(logicalId);
-  }, []);
-  useEffect4(() => {
-    if (value) {
-      const nodeId = bindMapRef.current.get(value);
-      if (nodeId) {
-        focusNode(nodeId);
-      }
-    }
-  }, [value, focusNode]);
-  const bindContextValue = useMemo(() => value ? { register, unregister } : null, [value, register, unregister]);
-  const navigationKeys = useMemo(() => {
-    if (!navigable) return {};
-    const next = () => navigateSibling("next", wrap);
-    const prev = () => navigateSibling("prev", wrap);
-    return direction === "vertical" ? {
-      j: next,
-      k: prev,
-      down: next,
-      up: prev
-    } : {
-      l: next,
-      h: prev,
-      right: next,
-      left: prev
-    };
-  }, [navigable, direction, wrap, navigateSibling]);
-  const mergedBindings = useMemo(
-    () => ({ ...navigationKeys, ...customBindings }),
-    [navigationKeys, customBindings]
-  );
-  useKeybindings(focus, mergedBindings);
-  return /* @__PURE__ */ jsx5(FocusNodeContext.Provider, { value: focus.id, children: /* @__PURE__ */ jsx5(FocusBindContext.Provider, { value: bindContextValue, children }) });
-}
-
-// src/core/focus/useFocusState.ts
-import { useState as useState2 } from "react";
-function useFocusState(initial) {
-  const [focused, setFocused] = useState2(initial);
-  return [focused, setFocused];
-}
+import {
+  FocusGroup,
+  FocusNodeContext,
+  FocusProvider,
+  FocusTrap,
+  GigglesError,
+  InputProvider,
+  InputRouter,
+  useFocus,
+  useFocusContext,
+  useFocusState,
+  useKeybindingRegistry,
+  useKeybindings
+} from "./chunk-4LED4GXQ.js";
 
 // src/core/GigglesProvider.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function GigglesProvider({ children }) {
-  return /* @__PURE__ */ jsx6(AlternateScreen, { children: /* @__PURE__ */ jsx6(FocusProvider, { children: /* @__PURE__ */ jsx6(InputProvider, { children: /* @__PURE__ */ jsx6(InputRouter, { children }) }) }) });
+  return /* @__PURE__ */ jsx(AlternateScreen, { children: /* @__PURE__ */ jsx(FocusProvider, { children: /* @__PURE__ */ jsx(InputProvider, { children: /* @__PURE__ */ jsx(InputRouter, { children }) }) }) });
 }
 
 // src/core/router/Router.tsx
-import React4, { useCallback as useCallback4, useReducer, useRef as useRef6 } from "react";
+import React2, { useCallback, useReducer, useRef as useRef2 } from "react";
 
 // src/core/router/Screen.tsx
 function Screen(_props) {
@@ -422,14 +31,14 @@ function Screen(_props) {
 }
 
 // src/core/router/ScreenEntry.tsx
-import React3, { useEffect as useEffect5, useId as useId2, useMemo as useMemo2, useRef as useRef5 } from "react";
+import React, { useEffect, useId, useMemo, useRef } from "react";
 import { Box } from "ink";
 
 // src/core/router/NavigationContext.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
-var NavigationContext = createContext4(null);
+import { createContext, useContext } from "react";
+var NavigationContext = createContext(null);
 var useNavigation = () => {
-  const context = useContext4(NavigationContext);
+  const context = useContext(NavigationContext);
   if (!context) {
     throw new GigglesError("useNavigation must be used within a Router");
   }
@@ -437,7 +46,7 @@ var useNavigation = () => {
 };
 
 // src/core/router/ScreenEntry.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function ScreenEntry({
   entry,
   isTop,
@@ -449,18 +58,18 @@ function ScreenEntry({
   replace,
   reset
 }) {
-  const screenNodeId = useId2();
-  const parentId = React3.useContext(FocusNodeContext);
+  const screenNodeId = useId();
+  const parentId = React.useContext(FocusNodeContext);
   const { registerNode, unregisterNode, focusFirstChild, focusNode, getFocusedId } = useFocusContext();
-  const lastFocusedChildRef = useRef5(null);
-  const wasTopRef = useRef5(isTop);
-  useEffect5(() => {
+  const lastFocusedChildRef = useRef(null);
+  const wasTopRef = useRef(isTop);
+  useEffect(() => {
     registerNode(screenNodeId, parentId);
     return () => {
       unregisterNode(screenNodeId);
     };
   }, [screenNodeId, parentId, registerNode, unregisterNode]);
-  useEffect5(() => {
+  useEffect(() => {
     if (!wasTopRef.current && isTop) {
       const saved = restoreFocus ? lastFocusedChildRef.current : null;
       if (saved) {
@@ -475,15 +84,15 @@ function ScreenEntry({
     }
     wasTopRef.current = isTop;
   }, [isTop, screenNodeId, restoreFocus, focusFirstChild, focusNode, getFocusedId]);
-  const value = useMemo2(
+  const value = useMemo(
     () => ({ currentRoute: entry, active: isTop, canGoBack, push, pop, replace, reset }),
     [entry, isTop, canGoBack, push, pop, replace, reset]
   );
-  return /* @__PURE__ */ jsx7(NavigationContext.Provider, { value, children: /* @__PURE__ */ jsx7(FocusNodeContext.Provider, { value: screenNodeId, children: /* @__PURE__ */ jsx7(Box, { display: isTop ? "flex" : "none", children: /* @__PURE__ */ jsx7(Component, { ...entry.params }) }) }) });
+  return /* @__PURE__ */ jsx2(NavigationContext.Provider, { value, children: /* @__PURE__ */ jsx2(FocusNodeContext.Provider, { value: screenNodeId, children: /* @__PURE__ */ jsx2(Box, { display: isTop ? "flex" : "none", children: /* @__PURE__ */ jsx2(Component, { ...entry.params }) }) }) });
 }
 
 // src/core/router/Router.tsx
-import { Fragment as Fragment2, jsx as jsx8 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 function routerReducer(stack, action) {
   switch (action.type) {
     case "push":
@@ -497,11 +106,11 @@ function routerReducer(stack, action) {
   }
 }
 function Router({ children, initialScreen, initialParams, restoreFocus = true }) {
-  const screenId = useRef6(0);
-  const routes = React4.Children.toArray(children).filter((child) => React4.isValidElement(child) && child.type === Screen).map((child) => child.props);
-  const screenNamesRef = useRef6(/* @__PURE__ */ new Set());
+  const screenId = useRef2(0);
+  const routes = React2.Children.toArray(children).filter((child) => React2.isValidElement(child) && child.type === Screen).map((child) => child.props);
+  const screenNamesRef = useRef2(/* @__PURE__ */ new Set());
   screenNamesRef.current = new Set(routes.map((r) => r.name));
-  const assertScreen = useCallback4((name) => {
+  const assertScreen = useCallback((name) => {
     if (!screenNamesRef.current.has(name)) {
       throw new GigglesError(
         `Screen "${name}" is not registered. Available screens: ${[...screenNamesRef.current].join(", ")}`
@@ -516,24 +125,24 @@ function Router({ children, initialScreen, initialParams, restoreFocus = true })
     }
     return [{ id: screenId.current++, name, params: initialParams }];
   });
-  const push = useCallback4(
+  const push = useCallback(
     (name, params) => {
       assertScreen(name);
       dispatch({ type: "push", route: { id: screenId.current++, name, params } });
     },
     [assertScreen]
   );
-  const pop = useCallback4(() => {
+  const pop = useCallback(() => {
     dispatch({ type: "pop" });
   }, []);
-  const replace = useCallback4(
+  const replace = useCallback(
     (name, params) => {
       assertScreen(name);
       dispatch({ type: "replace", route: { id: screenId.current++, name, params } });
     },
     [assertScreen]
   );
-  const reset = useCallback4(
+  const reset = useCallback(
     (name, params) => {
       assertScreen(name);
       dispatch({ type: "reset", route: { id: screenId.current++, name, params } });
@@ -545,10 +154,10 @@ function Router({ children, initialScreen, initialParams, restoreFocus = true })
     components.set(route.name, route.component);
   }
   const canGoBack = stack.length > 1;
-  return /* @__PURE__ */ jsx8(Fragment2, { children: stack.map((entry, i) => {
+  return /* @__PURE__ */ jsx3(Fragment, { children: stack.map((entry, i) => {
     const Component = components.get(entry.name);
     if (!Component) return null;
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx3(
       ScreenEntry,
       {
         entry,
@@ -574,6 +183,7 @@ export {
   Screen,
   useFocus,
   useFocusState,
+  useKeybindingRegistry,
   useKeybindings,
   useNavigation
 };

package/dist/types-ClgDW3fy.d.ts

@@ -0,0 +1,26 @@
+import { Key } from 'ink';
+
+type KeyHandler = (input: string, key: Key) => void;
+type SpecialKey = 'up' | 'down' | 'left' | 'right' | 'enter' | 'escape' | 'tab' | 'backspace' | 'pageup' | 'pagedown' | 'home' | 'end';
+type KeyName = SpecialKey | (string & {});
+type KeybindingDefinition = KeyHandler | {
+    action: KeyHandler;
+    name: string;
+    when?: 'focused' | 'mounted';
+};
+type Keybindings = Partial<Record<KeyName, KeybindingDefinition>>;
+type KeybindingOptions = {
+    capture?: boolean;
+    onKeypress?: (input: string, key: Key) => void;
+    layer?: string;
+};
+type RegisteredKeybinding = {
+    nodeId: string;
+    key: string;
+    handler: KeyHandler;
+    name?: string;
+    when?: 'focused' | 'mounted';
+    layer?: string;
+};
+
+export type { Keybindings as K, RegisteredKeybinding as R, KeybindingOptions as a, KeyHandler as b };

package/dist/ui/index.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { R as RegisteredKeybinding } from '../types-ClgDW3fy.js';
+import 'ink';
+
+type CommandPaletteRenderProps = {
+    query: string;
+    filtered: RegisteredKeybinding[];
+    selectedIndex: number;
+    onSelect: (cmd: RegisteredKeybinding) => void;
+};
+type CommandPaletteProps = {
+    onClose: () => void;
+    render?: (props: CommandPaletteRenderProps) => React__default.ReactNode;
+};
+declare function CommandPalette({ onClose, render }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
+
+export { CommandPalette, type CommandPaletteRenderProps };

package/dist/ui/index.js

@@ -0,0 +1,100 @@
+import {
+  FocusTrap,
+  useFocus,
+  useKeybindingRegistry,
+  useKeybindings
+} from "../chunk-4LED4GXQ.js";
+
+// src/ui/CommandPalette.tsx
+import { useState } from "react";
+import { Box, Text } from "ink";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var EMPTY_KEY = {
+  upArrow: false,
+  downArrow: false,
+  leftArrow: false,
+  rightArrow: false,
+  pageDown: false,
+  pageUp: false,
+  home: false,
+  end: false,
+  return: false,
+  escape: false,
+  ctrl: false,
+  shift: false,
+  tab: false,
+  backspace: false,
+  delete: false,
+  meta: false,
+  super: false,
+  hyper: false,
+  capsLock: false,
+  numLock: false
+};
+function fuzzyMatch(name, query) {
+  if (!query) return true;
+  const lowerName = name.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+  let qi = 0;
+  for (let i = 0; i < lowerName.length && qi < lowerQuery.length; i++) {
+    if (lowerName[i] === lowerQuery[qi]) qi++;
+  }
+  return qi === lowerQuery.length;
+}
+function Inner({ onClose, render }) {
+  const focus = useFocus();
+  const [query, setQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const registry = useKeybindingRegistry();
+  const filtered = registry.all.filter((cmd) => fuzzyMatch(cmd.name, query));
+  const clampedIndex = Math.min(selectedIndex, Math.max(0, filtered.length - 1));
+  const onSelect = (cmd) => {
+    cmd.handler("", EMPTY_KEY);
+    onClose();
+  };
+  useKeybindings(
+    focus,
+    {
+      escape: onClose,
+      enter: () => {
+        const cmd = filtered[clampedIndex];
+        if (cmd) onSelect(cmd);
+      },
+      up: () => setSelectedIndex((i) => Math.max(0, i - 1)),
+      down: () => setSelectedIndex((i) => Math.max(0, Math.min(filtered.length - 1, i + 1))),
+      backspace: () => {
+        setQuery((q) => q.slice(0, -1));
+        setSelectedIndex(0);
+      }
+    },
+    {
+      capture: true,
+      onKeypress: (input, key) => {
+        if (input.length === 1 && !key.ctrl) {
+          setQuery((q) => q + input);
+          setSelectedIndex(0);
+        }
+      }
+    }
+  );
+  if (render) {
+    return /* @__PURE__ */ jsx(Fragment, { children: render({ query, filtered, selectedIndex: clampedIndex, onSelect }) });
+  }
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", width: 40, children: [
+    /* @__PURE__ */ jsxs(Box, { paddingX: 1, children: [
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "> " }),
+      /* @__PURE__ */ jsx(Text, { children: query }),
+      /* @__PURE__ */ jsx(Text, { inverse: true, children: " " })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: filtered.length === 0 ? /* @__PURE__ */ jsx(Box, { paddingX: 1, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "No commands found" }) }) : filtered.map((cmd, i) => /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", paddingX: 1, children: [
+      /* @__PURE__ */ jsx(Text, { inverse: i === clampedIndex, children: cmd.name }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: cmd.key })
+    ] }, `${cmd.nodeId}-${cmd.key}`)) })
+  ] });
+}
+function CommandPalette({ onClose, render }) {
+  return /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(Inner, { onClose, render }) });
+}
+export {
+  CommandPalette
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "giggles",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -17,6 +17,10 @@
     "./terminal": {
       "import": "./dist/terminal/index.js",
       "types": "./dist/terminal/index.d.ts"
+    },
+    "./ui": {
+      "import": "./dist/ui/index.js",
+      "types": "./dist/ui/index.d.ts"
     }
   },
   "keywords": [