giggles 0.6.2 → 0.7.1

package/dist/{chunk-TWXBZE5C.js → chunk-HHDMTIXE.js}

@@ -69,32 +69,35 @@ 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();
   const store = useStore();
   const contextParentId = useContext2(ScopeIdContext);
   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);
+  store.registerNode(id, parentId, focusKey, true);
+  useLayoutEffect(() => {
+    store.registerNode(id, parentId, focusKey, true);
+    store.flush();
     return () => {
       store.unregisterNode(id);
     };
-  }, [id, parentId, 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);
@@ -120,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();
@@ -128,13 +131,16 @@ function useFocusScope(options) {
   const store = useStore();
   const contextParentId = useContext3(ScopeIdContext);
   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);
+  store.registerNode(id, parentId, focusKey, true);
+  useLayoutEffect2(() => {
+    store.registerNode(id, parentId, focusKey, true);
+    store.flush();
     return () => {
       store.unregisterNode(id);
     };
-  }, [id, parentId, 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]);
@@ -143,29 +149,43 @@ function useFocusScope(options) {
   const prevShallow = useCallback(() => store.navigateSibling("prev", true, id, true), [store, id]);
   const escape = useCallback(() => store.makePassive(id), [store, id]);
   const drillIn = useCallback(() => store.focusFirstChild(id), [store, id]);
-  const resolvedBindings = typeof (options == null ? void 0 : options.keybindings) === "function" ? options.keybindings({ next, prev, nextShallow, prevShallow, escape, drillIn }) : (options == null ? void 0 : options.keybindings) ?? {};
+  const focusChild = useCallback((key) => store.focusChildByKey(id, key, false), [store, id]);
+  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."
       );
     }
   }, [id, store]);
-  return { id, hasFocus, isPassive, next, prev, nextShallow, prevShallow, escape, drillIn };
+  return {
+    id,
+    hasFocus,
+    isPassive,
+    next,
+    prev,
+    nextShallow,
+    prevShallow,
+    escape,
+    drillIn,
+    focusChild,
+    focusChildShallow
+  };
 }
 
 // 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]);
@@ -208,10 +228,12 @@ 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();
+  // parentId → focusKey → childId
+  keyIndex = /* @__PURE__ */ new Map();
   // ---------------------------------------------------------------------------
   // Subscription
   // ---------------------------------------------------------------------------
@@ -219,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) {
-    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) {
@@ -242,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);
+          }
         }
       }
     }
@@ -251,10 +300,24 @@ var FocusStore = class {
         node.childrenIds.push(existingId);
       }
     }
+    if (focusKey && parentId) {
+      if (!this.keyIndex.has(parentId)) {
+        this.keyIndex.set(parentId, /* @__PURE__ */ new Map());
+      }
+      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);
@@ -268,6 +331,21 @@ var FocusStore = class {
     this.nodes.delete(id);
     this.passiveSet.delete(id);
     this.pendingFocusFirstChild.delete(id);
+    if (node.parentId) {
+      const parentKeys = this.keyIndex.get(node.parentId);
+      if (parentKeys) {
+        for (const [key, childId] of parentKeys) {
+          if (childId === id) {
+            parentKeys.delete(key);
+            break;
+          }
+        }
+        if (parentKeys.size === 0) {
+          this.keyIndex.delete(node.parentId);
+        }
+      }
+    }
+    this.keyIndex.delete(id);
     if (this.focusedId === id) {
       let candidate = node.parentId;
       while (candidate !== null) {
@@ -289,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) {
@@ -315,6 +393,21 @@ var FocusStore = class {
       this.pendingFocusFirstChild.add(parentId);
     }
   }
+  focusChildByKey(parentId, key, shallow) {
+    var _a;
+    const childId = (_a = this.keyIndex.get(parentId)) == null ? void 0 : _a.get(key);
+    if (!childId || !this.nodes.has(childId)) return;
+    if (shallow) {
+      this.focusNode(childId);
+    } else {
+      const child = this.nodes.get(childId);
+      if (child.childrenIds.length > 0) {
+        this.focusFirstChild(childId);
+      } else {
+        this.focusNode(childId);
+      }
+    }
+  }
   // ---------------------------------------------------------------------------
   // Navigation
   // ---------------------------------------------------------------------------
@@ -550,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.d.ts

@@ -47,10 +47,13 @@ type FocusScopeHandle = {
     prevShallow: () => void;
     escape: () => void;
     drillIn: () => void;
+    focusChild: (key: string) => void;
+    focusChildShallow: (key: string) => void;
 };
-type FocusScopeHelpers = Pick<FocusScopeHandle, 'next' | 'prev' | 'nextShallow' | 'prevShallow' | 'escape' | 'drillIn'>;
+type FocusScopeHelpers = Pick<FocusScopeHandle, 'next' | 'prev' | 'nextShallow' | 'prevShallow' | 'escape' | 'drillIn' | 'focusChild' | 'focusChildShallow'>;
 type FocusScopeOptions = {
     parent?: FocusScopeHandle;
+    focusKey?: string;
     keybindings?: Keybindings | ((helpers: FocusScopeHelpers) => Keybindings);
 };
 declare function useFocusScope(options?: FocusScopeOptions): FocusScopeHandle;
@@ -67,6 +70,7 @@ type FocusNodeHandle = {
 };
 type FocusNodeOptions = {
     parent?: FocusScopeHandle;
+    focusKey?: string;
 };
 declare function useFocusNode(options?: FocusNodeOptions): FocusNodeHandle;
 

package/dist/index.js

@@ -14,7 +14,7 @@ import {
   useKeybindingRegistry,
   useKeybindings,
   useStore
-} from "./chunk-TWXBZE5C.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

@@ -12,9 +12,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;
@@ -31,8 +32,9 @@ type TextInputProps = {
     onSubmit?: (value: string) => void;
     placeholder?: string;
     render?: (props: TextInputRenderProps) => React$1.ReactNode;
+    focusKey?: string;
 };
-declare function TextInput({ label, value, onChange, onSubmit, placeholder, render }: TextInputProps): react_jsx_runtime.JSX.Element;
+declare function TextInput({ label, value, onChange, onSubmit, placeholder, render, focusKey }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 type PaginatorStyle = 'dots' | 'arrows' | 'scrollbar' | 'counter' | 'none';
 type PaginatorProps = {
@@ -70,8 +72,9 @@ type SelectProps<T> = {
     paginatorStyle?: PaginatorStyle;
     wrap?: boolean;
     render?: (props: SelectRenderProps<T>) => React$1.ReactNode;
+    focusKey?: string;
 };
-declare function Select<T>({ options, value, onChange, onSubmit, onHighlight, label, immediate, direction, gap, maxVisible, paginatorStyle, wrap, render }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function Select<T>({ options, value, onChange, onSubmit, onHighlight, label, immediate, direction, gap, maxVisible, paginatorStyle, wrap, render, focusKey }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
 type MultiSelectRenderProps<T> = {
     option: SelectOption<T>;
@@ -92,15 +95,17 @@ type MultiSelectProps<T> = {
     paginatorStyle?: PaginatorStyle;
     wrap?: boolean;
     render?: (props: MultiSelectRenderProps<T>) => React$1.ReactNode;
+    focusKey?: string;
 };
-declare function MultiSelect<T>({ options, value, onChange, onSubmit, onHighlight, label, direction, gap, maxVisible, paginatorStyle, wrap, render }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiSelect<T>({ options, value, onChange, onSubmit, onHighlight, label, direction, gap, maxVisible, paginatorStyle, wrap, render, focusKey }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 type ConfirmProps = {
     message: string;
     defaultValue?: boolean;
     onSubmit: (value: boolean) => void;
+    focusKey?: string;
 };
-declare function Confirm({ message, defaultValue, onSubmit }: ConfirmProps): react_jsx_runtime.JSX.Element;
+declare function Confirm({ message, defaultValue, onSubmit, focusKey }: ConfirmProps): react_jsx_runtime.JSX.Element;
 
 type AutocompleteRenderProps<T> = {
     option: SelectOption<T>;
@@ -122,8 +127,9 @@ type AutocompleteProps<T> = {
     paginatorStyle?: PaginatorStyle;
     wrap?: boolean;
     render?: (props: AutocompleteRenderProps<T>) => React$1.ReactNode;
+    focusKey?: string;
 };
-declare function Autocomplete<T>({ options, value, onChange, onSubmit, onHighlight, label, placeholder, filter, gap, maxVisible, paginatorStyle, wrap, render }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+declare function Autocomplete<T>({ options, value, onChange, onSubmit, onHighlight, label, placeholder, filter, gap, maxVisible, paginatorStyle, wrap, render, focusKey }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
 
 type VirtualListRenderProps<T> = {
     item: T;
@@ -160,6 +166,7 @@ declare const Viewport: React$1.ForwardRefExoticComponent<Omit<BoxProps, "flexDi
     height: number;
     keybindings?: boolean;
     footer?: React$1.ReactNode;
+    focusKey?: string;
 } & React$1.RefAttributes<ViewportRef>>;
 
 type ModalProps = Omit<BoxProps, 'children'> & {

package/dist/ui/index.js

@@ -4,7 +4,7 @@ import {
   useFocusNode,
   useKeybindingRegistry,
   useKeybindings
-} from "../chunk-TWXBZE5C.js";
+} from "../chunk-HHDMTIXE.js";
 import {
   CodeBlock
 } from "../chunk-SKSDNDQF.js";
@@ -13,9 +13,125 @@ import {
 } from "../chunk-C77VBSPK.js";
 
 // src/ui/CommandPalette.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
+import { Box as Box3, Text as Text2 } from "ink";
+
+// src/ui/VirtualList.tsx
+import React, { useEffect, useRef, useState } from "react";
+import { Box as Box2 } from "ink";
+
+// src/ui/Paginator.tsx
 import { Box, Text } from "ink";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } 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__ */ jsx(Text, { color: theme.accentColor, children: "\u2191" });
+    if (position === "below" && hasBelow) return /* @__PURE__ */ jsx(Text, { color: theme.accentColor, children: "\u2193" });
+    return null;
+  }
+  if (style === "dots") {
+    if (position === "above") return null;
+    const totalPages = Math.ceil(total / visible);
+    const maxOffset = Math.max(1, total - visible);
+    const currentPage = Math.round(offset / maxOffset * (totalPages - 1));
+    return /* @__PURE__ */ jsx(Text, { children: Array.from({ length: totalPages }, (_, i) => /* @__PURE__ */ jsxs(Text, { dimColor: i !== currentPage, children: [
+      "\u25CF",
+      i < totalPages - 1 ? " " : ""
+    ] }, i)) });
+  }
+  if (style === "counter") {
+    if (position === "above") return null;
+    return /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+      offset + 1,
+      "\u2013",
+      Math.min(offset + visible, total),
+      " of ",
+      total
+    ] });
+  }
+  const totalLines = visible + gap * (visible - 1);
+  const thumbSize = Math.max(1, Math.round(visible / total * totalLines));
+  const maxThumbOffset = totalLines - thumbSize;
+  const maxScrollOffset = total - visible;
+  const thumbOffset = maxScrollOffset === 0 ? 0 : Math.round(offset / maxScrollOffset * maxThumbOffset);
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: Array.from({ length: totalLines }, (_, i) => {
+    const isThumb = i >= thumbOffset && i < thumbOffset + thumbSize;
+    return /* @__PURE__ */ jsx(Text, { color: isThumb ? theme.accentColor : void 0, dimColor: !isThumb, children: isThumb ? "\u2588" : "\u2502" }, i);
+  }) });
+}
+
+// src/ui/VirtualList.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function VirtualList({
+  items,
+  highlightIndex,
+  scrollOffset: controlledOffset,
+  gap = 0,
+  maxVisible,
+  paginatorStyle = "dots",
+  render
+}) {
+  const [internalOffset, setInternalOffset] = useState(0);
+  const offsetRef = useRef(0);
+  const windowed = maxVisible != null && items.length > maxVisible;
+  let offset = 0;
+  if (windowed) {
+    const maxOffset = Math.max(0, items.length - maxVisible);
+    if (controlledOffset != null) {
+      offset = Math.min(controlledOffset, maxOffset);
+    } else {
+      offset = Math.min(internalOffset, maxOffset);
+      if (highlightIndex != null && highlightIndex >= 0) {
+        if (highlightIndex < offset) {
+          offset = highlightIndex;
+        } else if (highlightIndex >= offset + maxVisible) {
+          offset = highlightIndex - maxVisible + 1;
+        }
+      }
+    }
+  }
+  offsetRef.current = offset;
+  useEffect(() => {
+    if (windowed && offsetRef.current !== internalOffset) {
+      setInternalOffset(offsetRef.current);
+    }
+  }, [windowed, highlightIndex, controlledOffset, internalOffset]);
+  if (!windowed) {
+    return /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", gap, children: items.map((item, index) => /* @__PURE__ */ jsx2(React.Fragment, { children: render({ item, index }) }, index)) });
+  }
+  const visible = items.slice(offset, offset + maxVisible);
+  const paginatorProps = {
+    total: items.length,
+    offset,
+    visible: maxVisible,
+    gap,
+    style: paginatorStyle
+  };
+  if (paginatorStyle === "scrollbar") {
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", gap, flexGrow: 1, children: visible.map((item, i) => {
+        const index = offset + i;
+        return /* @__PURE__ */ jsx2(React.Fragment, { children: render({ item, index }) }, index);
+      }) }),
+      /* @__PURE__ */ jsx2(Paginator, { ...paginatorProps })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", gap, children: [
+    /* @__PURE__ */ jsx2(Paginator, { ...paginatorProps, position: "above" }),
+    visible.map((item, i) => {
+      const index = offset + i;
+      return /* @__PURE__ */ jsx2(React.Fragment, { children: render({ item, index }) }, index);
+    }),
+    /* @__PURE__ */ jsx2(Paginator, { ...paginatorProps, position: "below" })
+  ] });
+}
+
+// src/ui/CommandPalette.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var EMPTY_KEY = {
   upArrow: false,
   downArrow: false,
@@ -48,11 +164,15 @@ function fuzzyMatch(name, query) {
   }
   return qi === lowerQuery.length;
 }
-function Inner({ onClose, render }) {
+function Inner({
+  onClose,
+  maxVisible = 10,
+  render
+}) {
   const focus = useFocusNode();
   const theme = useTheme();
-  const [query, setQuery] = useState("");
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  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));
@@ -69,8 +189,8 @@ function Inner({ onClose, render }) {
         const cmd = filtered[clampedIndex];
         if (cmd) onSelect(cmd);
       },
-      left: () => setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length),
-      right: () => setSelectedIndex((i) => (i + 1) % filtered.length),
+      up: () => setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length),
+      down: () => setSelectedIndex((i) => (i + 1) % filtered.length),
       backspace: () => {
         setQuery((q) => q.slice(0, -1));
         setSelectedIndex(0);
@@ -86,27 +206,37 @@ function Inner({ onClose, render }) {
     }
   );
   if (render) {
-    return /* @__PURE__ */ jsx(Fragment, { children: render({ query, filtered, selectedIndex: clampedIndex, onSelect }) });
+    return /* @__PURE__ */ jsx3(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: " " })
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs3(Text2, { children: [
+      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "> " }),
+      query.length > 0 ? /* @__PURE__ */ jsx3(Text2, { children: query }) : /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "Search commands\u2026" }),
+      /* @__PURE__ */ jsx3(Text2, { 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}`);
-    }) })
+    /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", marginTop: 1, children: filtered.length === 0 ? /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "No commands found" }) : /* @__PURE__ */ jsx3(
+      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__ */ jsxs3(Text2, { children: [
+            /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: highlighted ? theme.indicator + " " : "  " }),
+            /* @__PURE__ */ jsx3(Text2, { color: keyColor, bold: true, children: cmd.key }),
+            /* @__PURE__ */ jsxs3(Text2, { color: labelColor, children: [
+              " ",
+              cmd.name
+            ] })
+          ] });
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "\u2191\u2193 navigate \xB7 \u21B5 run \xB7 esc close" }) })
   ] });
 }
 function HintsBar() {
@@ -114,31 +244,31 @@ function HintsBar() {
   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: [
+  return /* @__PURE__ */ jsx3(Box3, { flexWrap: "wrap", children: commands.map((cmd, index) => /* @__PURE__ */ jsxs3(Text2, { children: [
+    /* @__PURE__ */ jsx3(Text2, { color: theme.hintColor, bold: true, children: cmd.key }),
+    /* @__PURE__ */ jsxs3(Text2, { color: theme.hintDimColor, children: [
       " ",
       cmd.name
     ] }),
-    index < commands.length - 1 && /* @__PURE__ */ jsx(Text, { color: theme.hintDimColor, children: " \u2022 " })
+    index < commands.length - 1 && /* @__PURE__ */ jsx3(Text2, { color: theme.hintDimColor, children: " \u2022 " })
   ] }, `${cmd.nodeId}-${cmd.key}`)) });
 }
 var noop = () => {
 };
-function CommandPalette({ onClose, interactive = true, render }) {
+function CommandPalette({ onClose, interactive = true, maxVisible, render }) {
   if (!interactive) {
-    return /* @__PURE__ */ jsx(HintsBar, {});
+    return /* @__PURE__ */ jsx3(HintsBar, {});
   }
-  return /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(Inner, { onClose: onClose ?? noop, render }) });
+  return /* @__PURE__ */ jsx3(FocusTrap, { children: /* @__PURE__ */ jsx3(Inner, { onClose: onClose ?? noop, maxVisible, render }) });
 }
 
 // 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";
-function TextInput({ label, value, onChange, onSubmit, placeholder, render }) {
-  const focus = useFocusNode();
-  const cursorRef = useRef(value.length);
+import { useReducer, useRef as useRef2 } from "react";
+import { Text as Text3 } from "ink";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function TextInput({ label, value, onChange, onSubmit, placeholder, render, focusKey }) {
+  const focus = useFocusNode({ focusKey });
+  const cursorRef = useRef2(value.length);
   const [, forceRender] = useReducer((c) => c + 1, 0);
   const cursor = Math.min(cursorRef.current, value.length);
   cursorRef.current = cursor;
@@ -191,7 +321,7 @@ function TextInput({ label, value, onChange, onSubmit, placeholder, render }) {
   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__ */ jsx4(Fragment2, { children: render({ value, focused: focus.hasFocus, before, cursorChar, after, placeholder }) });
   }
   const displayValue = value.length > 0 ? value : placeholder ?? "";
   const isPlaceholder = value.length === 0;
@@ -199,144 +329,28 @@ function TextInput({ label, value, onChange, onSubmit, placeholder, render }) {
     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__ */ jsxs4(Text3, { children: [
+      label != null && /* @__PURE__ */ jsxs4(Text3, { bold: true, children: [
         label,
         " "
       ] }),
       before,
-      /* @__PURE__ */ jsx2(Text2, { inverse: true, children: activeCursorChar }),
-      isPlaceholderVisible ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: activeAfter }) : activeAfter
+      /* @__PURE__ */ jsx4(Text3, { inverse: true, children: activeCursorChar }),
+      isPlaceholderVisible ? /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: activeAfter }) : activeAfter
     ] });
   }
-  return /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
-    label != null && /* @__PURE__ */ jsxs2(Text2, { children: [
+  return /* @__PURE__ */ jsxs4(Text3, { dimColor: true, children: [
+    label != null && /* @__PURE__ */ jsxs4(Text3, { children: [
       label,
       " "
     ] }),
-    isPlaceholder ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: displayValue }) : displayValue
+    isPlaceholder ? /* @__PURE__ */ jsx4(Text3, { 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";
-
-// src/ui/Paginator.tsx
-import { Box as Box2, Text as Text3 } from "ink";
-import { jsx as jsx3, jsxs as jsxs3 } 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" });
-    return null;
-  }
-  if (style === "dots") {
-    if (position === "above") return null;
-    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: [
-      "\u25CF",
-      i < totalPages - 1 ? " " : ""
-    ] }, i)) });
-  }
-  if (style === "counter") {
-    if (position === "above") return null;
-    return /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-      offset + 1,
-      "\u2013",
-      Math.min(offset + visible, total),
-      " of ",
-      total
-    ] });
-  }
-  const totalLines = visible + gap * (visible - 1);
-  const thumbSize = Math.max(1, Math.round(visible / total * totalLines));
-  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) => {
-    const isThumb = i >= thumbOffset && i < thumbOffset + thumbSize;
-    return /* @__PURE__ */ jsx3(Text3, { 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";
-function VirtualList({
-  items,
-  highlightIndex,
-  scrollOffset: controlledOffset,
-  gap = 0,
-  maxVisible,
-  paginatorStyle = "dots",
-  render
-}) {
-  const [internalOffset, setInternalOffset] = useState2(0);
-  const offsetRef = useRef2(0);
-  const windowed = maxVisible != null && items.length > maxVisible;
-  let offset = 0;
-  if (windowed) {
-    const maxOffset = Math.max(0, items.length - maxVisible);
-    if (controlledOffset != null) {
-      offset = Math.min(controlledOffset, maxOffset);
-    } else {
-      offset = Math.min(internalOffset, maxOffset);
-      if (highlightIndex != null && highlightIndex >= 0) {
-        if (highlightIndex < offset) {
-          offset = highlightIndex;
-        } else if (highlightIndex >= offset + maxVisible) {
-          offset = highlightIndex - maxVisible + 1;
-        }
-      }
-    }
-  }
-  offsetRef.current = offset;
-  useEffect(() => {
-    if (windowed && offsetRef.current !== internalOffset) {
-      setInternalOffset(offsetRef.current);
-    }
-  }, [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)) });
-  }
-  const visible = items.slice(offset, offset + maxVisible);
-  const paginatorProps = {
-    total: items.length,
-    offset,
-    visible: maxVisible,
-    gap,
-    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) => {
-        const index = offset + i;
-        return /* @__PURE__ */ jsx4(React2.Fragment, { children: render({ item, index }) }, index);
-      }) }),
-      /* @__PURE__ */ jsx4(Paginator, { ...paginatorProps })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", gap, children: [
-    /* @__PURE__ */ jsx4(Paginator, { ...paginatorProps, position: "above" }),
-    visible.map((item, i) => {
-      const index = offset + i;
-      return /* @__PURE__ */ jsx4(React2.Fragment, { children: render({ item, index }) }, index);
-    }),
-    /* @__PURE__ */ jsx4(Paginator, { ...paginatorProps, position: "below" })
-  ] });
-}
-
-// src/ui/Select.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function Select({
   options,
@@ -351,7 +365,8 @@ function Select({
   maxVisible,
   paginatorStyle,
   wrap = true,
-  render
+  render,
+  focusKey
 }) {
   const seen = /* @__PURE__ */ new Set();
   for (const opt of options) {
@@ -361,7 +376,7 @@ function Select({
     }
     seen.add(key);
   }
-  const focus = useFocusNode();
+  const focus = useFocusNode({ focusKey });
   const theme = useTheme();
   const [highlightIndex, setHighlightIndex] = useState3(0);
   const safeIndex = options.length === 0 ? -1 : Math.min(highlightIndex, options.length - 1);
@@ -438,7 +453,8 @@ function MultiSelect({
   maxVisible,
   paginatorStyle,
   wrap = true,
-  render
+  render,
+  focusKey
 }) {
   const seen = /* @__PURE__ */ new Set();
   for (const opt of options) {
@@ -448,7 +464,7 @@ function MultiSelect({
     }
     seen.add(key);
   }
-  const focus = useFocusNode();
+  const focus = useFocusNode({ focusKey });
   const theme = useTheme();
   const [highlightIndex, setHighlightIndex] = useState4(0);
   const [internalSelected, setInternalSelected] = useState4([]);
@@ -515,8 +531,8 @@ function MultiSelect({
 // src/ui/Confirm.tsx
 import { Text as Text6 } from "ink";
 import { jsxs as jsxs7 } from "react/jsx-runtime";
-function Confirm({ message, defaultValue = true, onSubmit }) {
-  const focus = useFocusNode();
+function Confirm({ message, defaultValue = true, onSubmit, focusKey }) {
+  const focus = useFocusNode({ focusKey });
   useKeybindings(focus, {
     y: () => onSubmit(true),
     n: () => onSubmit(false),
@@ -558,7 +574,8 @@ function Autocomplete({
   maxVisible,
   paginatorStyle,
   wrap = true,
-  render
+  render,
+  focusKey
 }) {
   const seen = /* @__PURE__ */ new Set();
   for (const opt of options) {
@@ -568,7 +585,7 @@ function Autocomplete({
     }
     seen.add(key);
   }
-  const focus = useFocusNode();
+  const focus = useFocusNode({ focusKey });
   const theme = useTheme();
   const [query, setQuery] = useState5("");
   const [highlightIndex, setHighlightIndex] = useState5(0);
@@ -718,8 +735,8 @@ function MeasurableItem({
   }, [index, onMeasure, children]);
   return /* @__PURE__ */ jsx8(Box7, { ref, flexShrink: 0, width: "100%", flexDirection: "column", children });
 }
-var Viewport = forwardRef(function Viewport2({ children, height, keybindings: enableKeybindings = true, footer, ...boxProps }, ref) {
-  const focus = useFocusNode();
+var Viewport = forwardRef(function Viewport2({ children, height, keybindings: enableKeybindings = true, footer, focusKey, ...boxProps }, ref) {
+  const focus = useFocusNode({ focusKey });
   const [scrollOffset, setScrollOffset] = useState6(0);
   const contentHeightRef = useRef4(0);
   const itemHeightsRef = useRef4({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "giggles",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "play": "f() { tsx --watch playground/examples/$1.tsx; }; f",
     "record": "f() { vhs playground/tapes/$1.tape; }; f",
     "dev:docs": "pnpm build && concurrently --kill-others \"pnpm build:watch\" \"pnpm --filter documentation dev\"",
-    "lint": "prettier --write . && eslint . --fix"
+    "lint": "prettier --write --loglevel warn . && eslint . --fix --quiet"
   },
   "files": [
     "dist"