giggles 0.7.0 → 0.7.1

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

@@ -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;

package/dist/ui/index.js

@@ -4,7 +4,7 @@ import {
   useFocusNode,
   useKeybindingRegistry,
   useKeybindings
-} from "../chunk-74PBSWEK.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";
+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 = useRef(value.length);
+  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, 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__ */ 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, 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__ */ 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,

package/package.json

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