giggles 0.7.0 → 0.7.2

package/dist/{chunk-74PBSWEK.js → chunk-HHDMTIXE.js}

@@ -69,7 +69,7 @@ function useKeybindingRegistry(focus) {
 }
 
 // src/core/focus/useFocusNode.ts
-import { useContext as useContext2, useEffect as useEffect2, useId as useId2, useMemo, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useContext as useContext2, useId as useId2, useLayoutEffect, useMemo, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function useFocusNode(options) {
   var _a;
   const id = useId2();
@@ -78,24 +78,26 @@ function useFocusNode(options) {
   const parentId = ((_a = options == null ? void 0 : options.parent) == null ? void 0 : _a.id) ?? contextParentId;
   const focusKey = options == null ? void 0 : options.focusKey;
   const subscribe = useMemo(() => store.subscribe.bind(store), [store]);
-  useEffect2(() => {
-    store.registerNode(id, parentId, focusKey);
+  store.registerNode(id, parentId, focusKey, true);
+  useLayoutEffect(() => {
+    store.registerNode(id, parentId, focusKey, true);
+    store.flush();
     return () => {
       store.unregisterNode(id);
     };
-  }, [id, parentId, focusKey, store]);
+  }, [id, store]);
   const hasFocus = useSyncExternalStore2(subscribe, () => store.isFocused(id));
   return { id, hasFocus };
 }
 
 // src/core/input/FocusTrap.tsx
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx } from "react/jsx-runtime";
 function FocusTrap({ children }) {
   const { id } = useFocusNode();
   const store = useStore();
   const previousFocusRef = useRef2(store.getFocusedId());
-  useEffect3(() => {
+  useEffect2(() => {
     const previousFocus = previousFocusRef.current;
     store.setTrap(id);
     store.focusFirstChild(id);
@@ -121,7 +123,7 @@ function InputRouter({ children }) {
 }
 
 // src/core/focus/useFocusScope.ts
-import { useCallback, useContext as useContext3, useEffect as useEffect4, useId as useId3, useMemo as useMemo2, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback, useContext as useContext3, useEffect as useEffect3, useId as useId3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useSyncExternalStore as useSyncExternalStore3 } from "react";
 function useFocusScope(options) {
   var _a;
   const id = useId3();
@@ -131,12 +133,14 @@ function useFocusScope(options) {
   const parentId = ((_a = options == null ? void 0 : options.parent) == null ? void 0 : _a.id) ?? contextParentId;
   const focusKey = options == null ? void 0 : options.focusKey;
   const subscribe = useMemo2(() => store.subscribe.bind(store), [store]);
-  useEffect4(() => {
-    store.registerNode(id, parentId, focusKey);
+  store.registerNode(id, parentId, focusKey, true);
+  useLayoutEffect2(() => {
+    store.registerNode(id, parentId, focusKey, true);
+    store.flush();
     return () => {
       store.unregisterNode(id);
     };
-  }, [id, parentId, focusKey, store]);
+  }, [id, store]);
   const hasFocus = useSyncExternalStore3(subscribe, () => store.isFocused(id));
   const isPassive = useSyncExternalStore3(subscribe, () => store.isPassive(id));
   const next = useCallback(() => store.navigateSibling("next", true, id), [store, id]);
@@ -149,12 +153,12 @@ function useFocusScope(options) {
   const focusChildShallow = useCallback((key) => store.focusChildByKey(id, key, true), [store, id]);
   const resolvedBindings = typeof (options == null ? void 0 : options.keybindings) === "function" ? options.keybindings({ next, prev, nextShallow, prevShallow, escape, drillIn, focusChild, focusChildShallow }) : (options == null ? void 0 : options.keybindings) ?? {};
   store.registerKeybindings(id, keybindingRegistrationId, resolvedBindings);
-  useEffect4(() => {
+  useEffect3(() => {
     return () => {
       store.unregisterKeybindings(id, keybindingRegistrationId);
     };
   }, [id, keybindingRegistrationId, store]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!store.hasFocusScopeComponent(id)) {
       throw new GigglesError(
         "useFocusScope() was called but no <FocusScope handle={scope}> was rendered. Every useFocusScope() call requires a corresponding <FocusScope> in the render output \u2014 without it, child components register under the wrong parent scope and keyboard navigation silently breaks."
@@ -177,11 +181,11 @@ function useFocusScope(options) {
 }
 
 // src/core/focus/FocusScope.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect4 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function FocusScope({ handle, children }) {
   const store = useStore();
-  useEffect5(() => {
+  useEffect4(() => {
     store.registerFocusScopeComponent(handle.id);
     return () => store.unregisterFocusScopeComponent(handle.id);
   }, [handle.id, store]);
@@ -224,7 +228,7 @@ var FocusStore = class {
   listeners = /* @__PURE__ */ new Set();
   version = 0;
   // nodeId → registrationId → BindingRegistration
-  // Keybindings register synchronously during render; nodes register in useEffect.
+  // Both keybindings and nodes register synchronously during render.
   // A keybinding may exist for a node that has not yet appeared in the node tree —
   // this is safe because dispatch only walks nodes in the active branch path.
   keybindings = /* @__PURE__ */ new Map();
@@ -237,20 +241,43 @@ var FocusStore = class {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
   }
+  dirty = false;
   notify() {
     this.version++;
+    this.dirty = false;
     for (const listener of this.listeners) {
       listener();
     }
   }
+  // Mark the store as changed without notifying subscribers. Used when the
+  // store is mutated during React's render phase (e.g. silent node registration)
+  // where calling notify() would trigger subscription callbacks unsafely.
+  // Call flush() in a useLayoutEffect to deliver the notification before paint.
+  markDirty() {
+    this.dirty = true;
+  }
+  flush() {
+    if (this.dirty) {
+      this.notify();
+    }
+  }
   getVersion() {
     return this.version;
   }
   // ---------------------------------------------------------------------------
   // Registration
   // ---------------------------------------------------------------------------
-  registerNode(id, parentId, focusKey) {
-    const node = { id, parentId, childrenIds: [] };
+  registerNode(id, parentId, focusKey, silent = false) {
+    const existing = this.nodes.get(id);
+    if (existing && existing.parentId === parentId) {
+      if (focusKey !== existing.focusKey) {
+        this.updateFocusKey(id, parentId, existing.focusKey, focusKey);
+        existing.focusKey = focusKey;
+        this.markDirty();
+      }
+      return;
+    }
+    const node = { id, parentId, childrenIds: [], focusKey };
     this.nodes.set(id, node);
     this.parentMap.set(id, parentId);
     if (parentId) {
@@ -260,7 +287,11 @@ var FocusStore = class {
         parent.childrenIds.push(id);
         if (wasEmpty && this.pendingFocusFirstChild.has(parentId)) {
           this.pendingFocusFirstChild.delete(parentId);
-          this.focusNode(id);
+          if (silent) {
+            this.setFocusedIdSilently(id);
+          } else {
+            this.focusNode(id);
+          }
         }
       }
     }
@@ -276,9 +307,17 @@ var FocusStore = class {
       this.keyIndex.get(parentId).set(focusKey, id);
     }
     if (this.nodes.size === 1) {
-      this.focusNode(id);
+      if (silent) {
+        this.setFocusedIdSilently(id);
+      } else {
+        this.focusNode(id);
+      }
+    }
+    if (silent) {
+      this.markDirty();
+    } else {
+      this.notify();
     }
-    this.notify();
   }
   unregisterNode(id) {
     const node = this.nodes.get(id);
@@ -328,18 +367,18 @@ var FocusStore = class {
     const oldFocusedId = this.focusedId;
     if (oldFocusedId === id) return;
     this.focusedId = id;
-    for (const passiveId of this.passiveSet) {
-      const wasAncestor = this.isAncestorOf(passiveId, oldFocusedId);
-      const isAncestor = this.isAncestorOf(passiveId, id);
-      if (wasAncestor && !isAncestor) {
-        this.passiveSet.delete(passiveId);
-      }
-      if (isAncestor && id !== passiveId) {
-        this.passiveSet.delete(passiveId);
-      }
-    }
+    this.clearPassiveOnFocusChange(oldFocusedId, id);
     this.notify();
   }
+  // Set focusedId without notifying subscribers. Safe to call during React's
+  // render phase. Clears passive flags the same way focusNode() does.
+  setFocusedIdSilently(id) {
+    const oldFocusedId = this.focusedId;
+    if (oldFocusedId === id) return;
+    this.focusedId = id;
+    this.clearPassiveOnFocusChange(oldFocusedId, id);
+    this.markDirty();
+  }
   focusFirstChild(parentId) {
     const parent = this.nodes.get(parentId);
     if (parent && parent.childrenIds.length > 0) {
@@ -604,6 +643,38 @@ var FocusStore = class {
     }
     return false;
   }
+  // Clear passive flags when focus transitions between nodes.
+  clearPassiveOnFocusChange(oldFocusedId, newFocusedId) {
+    for (const passiveId of this.passiveSet) {
+      const wasAncestor = this.isAncestorOf(passiveId, oldFocusedId);
+      const isAncestor = this.isAncestorOf(passiveId, newFocusedId);
+      if (wasAncestor && !isAncestor) {
+        this.passiveSet.delete(passiveId);
+      }
+      if (isAncestor && newFocusedId !== passiveId) {
+        this.passiveSet.delete(passiveId);
+      }
+    }
+  }
+  // Update the keyIndex when a node's focusKey changes during a re-render.
+  updateFocusKey(id, parentId, oldKey, newKey) {
+    if (!parentId) return;
+    if (oldKey) {
+      const parentKeys = this.keyIndex.get(parentId);
+      if (parentKeys) {
+        parentKeys.delete(oldKey);
+        if (parentKeys.size === 0) {
+          this.keyIndex.delete(parentId);
+        }
+      }
+    }
+    if (newKey) {
+      if (!this.keyIndex.has(parentId)) {
+        this.keyIndex.set(parentId, /* @__PURE__ */ new Map());
+      }
+      this.keyIndex.get(parentId).set(newKey, id);
+    }
+  }
 };
 
 export {

package/dist/index.js

@@ -14,7 +14,7 @@ import {
   useKeybindingRegistry,
   useKeybindings,
   useStore
-} from "./chunk-74PBSWEK.js";
+} from "./chunk-HHDMTIXE.js";
 import {
   ThemeProvider,
   useTheme
@@ -68,7 +68,7 @@ function Screen(_props) {
 }
 
 // src/core/router/ScreenEntry.tsx
-import { useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+import { useLayoutEffect, useMemo, useRef as useRef2 } from "react";
 import { Box as Box2 } from "ink";
 
 // src/core/router/NavigationContext.tsx
@@ -99,7 +99,7 @@ function ScreenEntry({
   const store = useStore();
   const lastFocusedChildRef = useRef2(null);
   const wasTopRef = useRef2(isTop);
-  useEffect2(() => {
+  useLayoutEffect(() => {
     if (!wasTopRef.current && isTop) {
       const saved = restoreFocus ? lastFocusedChildRef.current : null;
       if (saved) {

package/dist/ui/index.d.ts

@@ -5,6 +5,7 @@ import { BoxProps } from 'ink';
 
 type CommandPaletteRenderProps = {
     query: string;
+    onChange: (query: string) => void;
     filtered: RegisteredKeybinding[];
     selectedIndex: number;
     onSelect: (cmd: RegisteredKeybinding) => void;
@@ -12,9 +13,10 @@ type CommandPaletteRenderProps = {
 type CommandPaletteProps = {
     onClose?: () => void;
     interactive?: boolean;
+    maxVisible?: number;
     render?: (props: CommandPaletteRenderProps) => React.ReactNode;
 };
-declare function CommandPalette({ onClose, interactive, render }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
+declare function CommandPalette({ onClose, interactive, maxVisible, render }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
 
 type TextInputRenderProps = {
     value: string;

package/dist/ui/index.js

@@ -1,10 +1,12 @@
 import {
+  FocusScope,
   FocusTrap,
   GigglesError,
   useFocusNode,
+  useFocusScope,
   useKeybindingRegistry,
   useKeybindings
-} from "../chunk-74PBSWEK.js";
+} from "../chunk-HHDMTIXE.js";
 import {
   CodeBlock
 } from "../chunk-SKSDNDQF.js";
@@ -13,129 +15,13 @@ import {
 } from "../chunk-C77VBSPK.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 = useFocusNode();
-  const theme = useTheme();
-  const [query, setQuery] = useState("");
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const registry = useKeybindingRegistry();
-  const named = registry.all.filter((cmd) => cmd.name != null);
-  const filtered = named.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);
-      },
-      left: () => setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length),
-      right: () => setSelectedIndex((i) => (i + 1) % filtered.length),
-      backspace: () => {
-        setQuery((q) => q.slice(0, -1));
-        setSelectedIndex(0);
-      }
-    },
-    {
-      fallback: (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", children: [
-    query.length > 0 && /* @__PURE__ */ jsxs(Text, { children: [
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "> " }),
-      /* @__PURE__ */ jsx(Text, { children: query }),
-      /* @__PURE__ */ jsx(Text, { inverse: true, children: " " })
-    ] }),
-    filtered.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "No commands found" }) : /* @__PURE__ */ jsx(Box, { flexWrap: "wrap", children: filtered.map((cmd, index) => {
-      const highlighted = index === clampedIndex;
-      const keyColor = highlighted ? theme.hintHighlightColor : theme.hintColor;
-      const labelColor = highlighted ? theme.hintHighlightDimColor : theme.hintDimColor;
-      return /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx(Text, { color: keyColor, bold: true, children: cmd.key }),
-        /* @__PURE__ */ jsxs(Text, { color: labelColor, children: [
-          " ",
-          cmd.name
-        ] }),
-        index < filtered.length - 1 && /* @__PURE__ */ jsx(Text, { color: theme.hintDimColor, children: " \u2022 " })
-      ] }, `${cmd.nodeId}-${cmd.key}`);
-    }) })
-  ] });
-}
-function HintsBar() {
-  const registry = useKeybindingRegistry();
-  const theme = useTheme();
-  const commands = registry.available.filter((cmd) => cmd.name != null);
-  if (commands.length === 0) return null;
-  return /* @__PURE__ */ jsx(Box, { flexWrap: "wrap", children: commands.map((cmd, index) => /* @__PURE__ */ jsxs(Text, { children: [
-    /* @__PURE__ */ jsx(Text, { color: theme.hintColor, bold: true, children: cmd.key }),
-    /* @__PURE__ */ jsxs(Text, { color: theme.hintDimColor, children: [
-      " ",
-      cmd.name
-    ] }),
-    index < commands.length - 1 && /* @__PURE__ */ jsx(Text, { color: theme.hintDimColor, children: " \u2022 " })
-  ] }, `${cmd.nodeId}-${cmd.key}`)) });
-}
-var noop = () => {
-};
-function CommandPalette({ onClose, interactive = true, render }) {
-  if (!interactive) {
-    return /* @__PURE__ */ jsx(HintsBar, {});
-  }
-  return /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(Inner, { onClose: onClose ?? noop, render }) });
-}
+import { useState as useState2 } from "react";
+import { Box as Box3, Text as Text3 } from "ink";
 
 // src/ui/TextInput.tsx
 import { useReducer, useRef } from "react";
-import { Text as Text2 } from "ink";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Text } from "ink";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function TextInput({ label, value, onChange, onSubmit, placeholder, render, focusKey }) {
   const focus = useFocusNode({ focusKey });
   const cursorRef = useRef(value.length);
@@ -191,7 +77,7 @@ function TextInput({ label, value, onChange, onSubmit, placeholder, render, focu
   const cursorChar = value[cursor] ?? " ";
   const after = value.slice(cursor + 1);
   if (render) {
-    return /* @__PURE__ */ jsx2(Fragment2, { children: render({ value, focused: focus.hasFocus, before, cursorChar, after, placeholder }) });
+    return /* @__PURE__ */ jsx(Fragment, { children: render({ value, focused: focus.hasFocus, before, cursorChar, after, placeholder }) });
   }
   const displayValue = value.length > 0 ? value : placeholder ?? "";
   const isPlaceholder = value.length === 0;
@@ -199,44 +85,40 @@ function TextInput({ label, value, onChange, onSubmit, placeholder, render, focu
     const isPlaceholderVisible = value.length === 0 && placeholder != null;
     const activeCursorChar = isPlaceholderVisible ? placeholder[0] ?? " " : cursorChar;
     const activeAfter = isPlaceholderVisible ? placeholder.slice(1) : after;
-    return /* @__PURE__ */ jsxs2(Text2, { children: [
-      label != null && /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
+    return /* @__PURE__ */ jsxs(Text, { children: [
+      label != null && /* @__PURE__ */ jsxs(Text, { bold: true, children: [
         label,
         " "
       ] }),
       before,
-      /* @__PURE__ */ jsx2(Text2, { inverse: true, children: activeCursorChar }),
-      isPlaceholderVisible ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: activeAfter }) : activeAfter
+      /* @__PURE__ */ jsx(Text, { inverse: true, children: activeCursorChar }),
+      isPlaceholderVisible ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: activeAfter }) : activeAfter
     ] });
   }
-  return /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
-    label != null && /* @__PURE__ */ jsxs2(Text2, { children: [
+  return /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+    label != null && /* @__PURE__ */ jsxs(Text, { children: [
       label,
       " "
     ] }),
-    isPlaceholder ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: displayValue }) : displayValue
+    isPlaceholder ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: displayValue }) : displayValue
   ] });
 }
 
-// src/ui/Select.tsx
-import React3, { useEffect as useEffect2, useState as useState3 } from "react";
-import { Box as Box4, Text as Text4 } from "ink";
-
 // src/ui/VirtualList.tsx
-import React2, { useEffect, useRef as useRef2, useState as useState2 } from "react";
-import { Box as Box3 } from "ink";
+import React2, { useEffect, useRef as useRef2, useState } from "react";
+import { Box as Box2 } from "ink";
 
 // src/ui/Paginator.tsx
-import { Box as Box2, Text as Text3 } from "ink";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Box, Text as Text2 } from "ink";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Paginator({ total, offset, visible, gap = 0, style = "arrows", position }) {
   const theme = useTheme();
   if (style === "none" || total <= visible) return null;
   const hasAbove = offset > 0;
   const hasBelow = offset + visible < total;
   if (style === "arrows") {
-    if (position === "above" && hasAbove) return /* @__PURE__ */ jsx3(Text3, { color: theme.accentColor, children: "\u2191" });
-    if (position === "below" && hasBelow) return /* @__PURE__ */ jsx3(Text3, { color: theme.accentColor, children: "\u2193" });
+    if (position === "above" && hasAbove) return /* @__PURE__ */ jsx2(Text2, { color: theme.accentColor, children: "\u2191" });
+    if (position === "below" && hasBelow) return /* @__PURE__ */ jsx2(Text2, { color: theme.accentColor, children: "\u2193" });
     return null;
   }
   if (style === "dots") {
@@ -244,14 +126,14 @@ function Paginator({ total, offset, visible, gap = 0, style = "arrows", position
     const totalPages = Math.ceil(total / visible);
     const maxOffset = Math.max(1, total - visible);
     const currentPage = Math.round(offset / maxOffset * (totalPages - 1));
-    return /* @__PURE__ */ jsx3(Text3, { children: Array.from({ length: totalPages }, (_, i) => /* @__PURE__ */ jsxs3(Text3, { dimColor: i !== currentPage, children: [
+    return /* @__PURE__ */ jsx2(Text2, { children: Array.from({ length: totalPages }, (_, i) => /* @__PURE__ */ jsxs2(Text2, { dimColor: i !== currentPage, children: [
       "\u25CF",
       i < totalPages - 1 ? " " : ""
     ] }, i)) });
   }
   if (style === "counter") {
     if (position === "above") return null;
-    return /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+    return /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
       offset + 1,
       "\u2013",
       Math.min(offset + visible, total),
@@ -264,14 +146,14 @@ function Paginator({ total, offset, visible, gap = 0, style = "arrows", position
   const maxThumbOffset = totalLines - thumbSize;
   const maxScrollOffset = total - visible;
   const thumbOffset = maxScrollOffset === 0 ? 0 : Math.round(offset / maxScrollOffset * maxThumbOffset);
-  return /* @__PURE__ */ jsx3(Box2, { flexDirection: "column", children: Array.from({ length: totalLines }, (_, i) => {
+  return /* @__PURE__ */ jsx2(Box, { flexDirection: "column", children: Array.from({ length: totalLines }, (_, i) => {
     const isThumb = i >= thumbOffset && i < thumbOffset + thumbSize;
-    return /* @__PURE__ */ jsx3(Text3, { color: isThumb ? theme.accentColor : void 0, dimColor: !isThumb, children: isThumb ? "\u2588" : "\u2502" }, i);
+    return /* @__PURE__ */ jsx2(Text2, { color: isThumb ? theme.accentColor : void 0, dimColor: !isThumb, children: isThumb ? "\u2588" : "\u2502" }, i);
   }) });
 }
 
 // src/ui/VirtualList.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function VirtualList({
   items,
   highlightIndex,
@@ -281,7 +163,7 @@ function VirtualList({
   paginatorStyle = "dots",
   render
 }) {
-  const [internalOffset, setInternalOffset] = useState2(0);
+  const [internalOffset, setInternalOffset] = useState(0);
   const offsetRef = useRef2(0);
   const windowed = maxVisible != null && items.length > maxVisible;
   let offset = 0;
@@ -307,7 +189,7 @@ function VirtualList({
     }
   }, [windowed, highlightIndex, controlledOffset, internalOffset]);
   if (!windowed) {
-    return /* @__PURE__ */ jsx4(Box3, { flexDirection: "column", gap, children: items.map((item, index) => /* @__PURE__ */ jsx4(React2.Fragment, { children: render({ item, index }) }, index)) });
+    return /* @__PURE__ */ jsx3(Box2, { flexDirection: "column", gap, children: items.map((item, index) => /* @__PURE__ */ jsx3(React2.Fragment, { children: render({ item, index }) }, index)) });
   }
   const visible = items.slice(offset, offset + maxVisible);
   const paginatorProps = {
@@ -318,25 +200,145 @@ function VirtualList({
     style: paginatorStyle
   };
   if (paginatorStyle === "scrollbar") {
-    return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx4(Box3, { flexDirection: "column", gap, flexGrow: 1, children: visible.map((item, i) => {
+    return /* @__PURE__ */ jsxs3(Box2, { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx3(Box2, { flexDirection: "column", gap, flexGrow: 1, children: visible.map((item, i) => {
         const index = offset + i;
-        return /* @__PURE__ */ jsx4(React2.Fragment, { children: render({ item, index }) }, index);
+        return /* @__PURE__ */ jsx3(React2.Fragment, { children: render({ item, index }) }, index);
       }) }),
-      /* @__PURE__ */ jsx4(Paginator, { ...paginatorProps })
+      /* @__PURE__ */ jsx3(Paginator, { ...paginatorProps })
     ] });
   }
-  return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", gap, children: [
-    /* @__PURE__ */ jsx4(Paginator, { ...paginatorProps, position: "above" }),
+  return /* @__PURE__ */ jsxs3(Box2, { flexDirection: "column", gap, children: [
+    /* @__PURE__ */ jsx3(Paginator, { ...paginatorProps, position: "above" }),
     visible.map((item, i) => {
       const index = offset + i;
-      return /* @__PURE__ */ jsx4(React2.Fragment, { children: render({ item, index }) }, index);
+      return /* @__PURE__ */ jsx3(React2.Fragment, { children: render({ item, index }) }, index);
     }),
-    /* @__PURE__ */ jsx4(Paginator, { ...paginatorProps, position: "below" })
+    /* @__PURE__ */ jsx3(Paginator, { ...paginatorProps, position: "below" })
   ] });
 }
 
+// src/ui/CommandPalette.tsx
+import { jsx as jsx4, jsxs as jsxs4 } 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,
+  maxVisible = 10,
+  render
+}) {
+  const theme = useTheme();
+  const [query, setQuery] = useState2("");
+  const [selectedIndex, setSelectedIndex] = useState2(0);
+  const registry = useKeybindingRegistry();
+  const named = registry.all.filter((cmd) => cmd.name != null);
+  const filtered = named.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();
+  };
+  const handleChange = (value) => {
+    setQuery(value);
+    setSelectedIndex(0);
+  };
+  const scope = useFocusScope({
+    keybindings: {
+      escape: onClose,
+      enter: () => {
+        const cmd = filtered[clampedIndex];
+        if (cmd) onSelect(cmd);
+      },
+      up: () => setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length),
+      down: () => setSelectedIndex((i) => (i + 1) % filtered.length)
+    }
+  });
+  if (render) {
+    return /* @__PURE__ */ jsx4(FocusScope, { handle: scope, children: render({ query, onChange: handleChange, filtered, selectedIndex: clampedIndex, onSelect }) });
+  }
+  return /* @__PURE__ */ jsx4(FocusScope, { handle: scope, children: /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx4(TextInput, { label: ">", value: query, onChange: handleChange, placeholder: "Search commands\u2026" }),
+    /* @__PURE__ */ jsx4(Box3, { flexDirection: "column", marginTop: 1, children: filtered.length === 0 ? /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "No commands found" }) : /* @__PURE__ */ jsx4(
+      VirtualList,
+      {
+        items: filtered,
+        highlightIndex: clampedIndex,
+        maxVisible,
+        paginatorStyle: "scrollbar",
+        render: ({ item: cmd, index }) => {
+          const highlighted = index === clampedIndex;
+          const keyColor = highlighted ? theme.hintHighlightColor : theme.hintColor;
+          const labelColor = highlighted ? theme.hintHighlightDimColor : theme.hintDimColor;
+          return /* @__PURE__ */ jsxs4(Text3, { children: [
+            /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: highlighted ? theme.indicator + " " : "  " }),
+            /* @__PURE__ */ jsx4(Text3, { color: keyColor, bold: true, children: cmd.key }),
+            /* @__PURE__ */ jsxs4(Text3, { color: labelColor, children: [
+              " ",
+              cmd.name
+            ] })
+          ] });
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx4(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "\u2191\u2193 navigate \xB7 \u21B5 run \xB7 esc close" }) })
+  ] }) });
+}
+function HintsBar() {
+  const registry = useKeybindingRegistry();
+  const theme = useTheme();
+  const commands = registry.available.filter((cmd) => cmd.name != null);
+  if (commands.length === 0) return null;
+  return /* @__PURE__ */ jsx4(Box3, { flexWrap: "wrap", children: commands.map((cmd, index) => /* @__PURE__ */ jsxs4(Text3, { children: [
+    /* @__PURE__ */ jsx4(Text3, { color: theme.hintColor, bold: true, children: cmd.key }),
+    /* @__PURE__ */ jsxs4(Text3, { color: theme.hintDimColor, children: [
+      " ",
+      cmd.name
+    ] }),
+    index < commands.length - 1 && /* @__PURE__ */ jsx4(Text3, { color: theme.hintDimColor, children: " \u2022 " })
+  ] }, `${cmd.nodeId}-${cmd.key}`)) });
+}
+var noop = () => {
+};
+function CommandPalette({ onClose, interactive = true, maxVisible, render }) {
+  if (!interactive) {
+    return /* @__PURE__ */ jsx4(HintsBar, {});
+  }
+  return /* @__PURE__ */ jsx4(FocusTrap, { children: /* @__PURE__ */ jsx4(Inner, { onClose: onClose ?? noop, maxVisible, render }) });
+}
+
 // src/ui/Select.tsx
+import React3, { useEffect as useEffect2, useState as useState3 } from "react";
+import { Box as Box4, Text as Text4 } from "ink";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function Select({
   options,
@@ -877,7 +879,7 @@ function Badge({ children, color, background, variant = "round" }) {
 // src/ui/Panel.tsx
 import { useState as useState7 } from "react";
 import { Box as Box9, Text as Text10, measureElement as measureElement2 } from "ink";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs12 } from "react/jsx-runtime";
 function Panel({ children, title, width, borderColor, footer, ...boxProps }) {
   const theme = useTheme();
   const color = borderColor ?? theme.borderColor;
@@ -930,7 +932,7 @@ function Panel({ children, title, width, borderColor, footer, ...boxProps }) {
             borderTop: false,
             borderColor: color,
             paddingX: 1,
-            children: footer ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
+            children: footer ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
               /* @__PURE__ */ jsx11(Box9, { flexDirection: "column", flexGrow: 1, children }),
               footer
             ] }) : children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "giggles",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "license": "MIT",
   "repository": {
     "type": "git",