giggles 0.7.1 → 0.7.2

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;

package/dist/ui/index.js

@@ -1,7 +1,9 @@
 import {
+  FocusScope,
   FocusTrap,
   GigglesError,
   useFocusNode,
+  useFocusScope,
   useKeybindingRegistry,
   useKeybindings
 } from "../chunk-HHDMTIXE.js";
@@ -14,23 +16,109 @@ import {
 
 // src/ui/CommandPalette.tsx
 import { useState as useState2 } from "react";
-import { Box as Box3, Text as Text2 } from "ink";
+import { Box as Box3, Text as Text3 } from "ink";
+
+// src/ui/TextInput.tsx
+import { useReducer, useRef } from "react";
+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);
+  const [, forceRender] = useReducer((c) => c + 1, 0);
+  const cursor = Math.min(cursorRef.current, value.length);
+  cursorRef.current = cursor;
+  useKeybindings(
+    focus,
+    {
+      left: () => {
+        cursorRef.current = Math.max(0, cursorRef.current - 1);
+        forceRender();
+      },
+      right: () => {
+        cursorRef.current = Math.min(value.length, cursorRef.current + 1);
+        forceRender();
+      },
+      home: () => {
+        cursorRef.current = 0;
+        forceRender();
+      },
+      end: () => {
+        cursorRef.current = value.length;
+        forceRender();
+      },
+      backspace: () => {
+        const c = cursorRef.current;
+        if (c > 0) {
+          cursorRef.current = c - 1;
+          onChange(value.slice(0, c - 1) + value.slice(c));
+        }
+      },
+      delete: () => {
+        const c = cursorRef.current;
+        if (c < value.length) {
+          onChange(value.slice(0, c) + value.slice(c + 1));
+        }
+      },
+      ...onSubmit && { enter: () => onSubmit(value) }
+    },
+    {
+      fallback: (input, key) => {
+        if (input.length === 1 && !key.ctrl && !key.return && !key.escape && !key.tab) {
+          const c = cursorRef.current;
+          cursorRef.current = c + 1;
+          onChange(value.slice(0, c) + input + value.slice(c));
+        }
+      },
+      bubble: ["tab", "shift+tab", "enter", "escape", "backspace", "delete", "left", "right", "home", "end"]
+    }
+  );
+  const before = value.slice(0, cursor);
+  const cursorChar = value[cursor] ?? " ";
+  const after = value.slice(cursor + 1);
+  if (render) {
+    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;
+  if (focus.hasFocus) {
+    const isPlaceholderVisible = value.length === 0 && placeholder != null;
+    const activeCursorChar = isPlaceholderVisible ? placeholder[0] ?? " " : cursorChar;
+    const activeAfter = isPlaceholderVisible ? placeholder.slice(1) : after;
+    return /* @__PURE__ */ jsxs(Text, { children: [
+      label != null && /* @__PURE__ */ jsxs(Text, { bold: true, children: [
+        label,
+        " "
+      ] }),
+      before,
+      /* @__PURE__ */ jsx(Text, { inverse: true, children: activeCursorChar }),
+      isPlaceholderVisible ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: activeAfter }) : activeAfter
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+    label != null && /* @__PURE__ */ jsxs(Text, { children: [
+      label,
+      " "
+    ] }),
+    isPlaceholder ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: displayValue }) : displayValue
+  ] });
+}
 
 // src/ui/VirtualList.tsx
-import React, { useEffect, useRef, useState } from "react";
+import React2, { useEffect, useRef as useRef2, useState } from "react";
 import { Box as Box2 } from "ink";
 
 // src/ui/Paginator.tsx
-import { Box, Text } from "ink";
-import { jsx, jsxs } 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__ */ jsx(Text, { color: theme.accentColor, children: "\u2191" });
-    if (position === "below" && hasBelow) return /* @__PURE__ */ jsx(Text, { 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") {
@@ -38,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__ */ jsx(Text, { children: Array.from({ length: totalPages }, (_, i) => /* @__PURE__ */ jsxs(Text, { 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__ */ jsxs(Text, { dimColor: true, children: [
+    return /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
       offset + 1,
       "\u2013",
       Math.min(offset + visible, total),
@@ -58,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__ */ jsx(Box, { 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__ */ jsx(Text, { 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 jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function VirtualList({
   items,
   highlightIndex,
@@ -76,7 +164,7 @@ function VirtualList({
   render
 }) {
   const [internalOffset, setInternalOffset] = useState(0);
-  const offsetRef = useRef(0);
+  const offsetRef = useRef2(0);
   const windowed = maxVisible != null && items.length > maxVisible;
   let offset = 0;
   if (windowed) {
@@ -101,7 +189,7 @@ function VirtualList({
     }
   }, [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)) });
+    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 = {
@@ -112,26 +200,26 @@ function VirtualList({
     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) => {
+    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__ */ jsx2(React.Fragment, { children: render({ item, index }) }, index);
+        return /* @__PURE__ */ jsx3(React2.Fragment, { children: render({ item, index }) }, index);
       }) }),
-      /* @__PURE__ */ jsx2(Paginator, { ...paginatorProps })
+      /* @__PURE__ */ jsx3(Paginator, { ...paginatorProps })
     ] });
   }
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", gap, children: [
-    /* @__PURE__ */ jsx2(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__ */ jsx2(React.Fragment, { children: render({ item, index }) }, index);
+      return /* @__PURE__ */ jsx3(React2.Fragment, { children: render({ item, index }) }, index);
     }),
-    /* @__PURE__ */ jsx2(Paginator, { ...paginatorProps, position: "below" })
+    /* @__PURE__ */ jsx3(Paginator, { ...paginatorProps, position: "below" })
   ] });
 }
 
 // src/ui/CommandPalette.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var EMPTY_KEY = {
   upArrow: false,
   downArrow: false,
@@ -169,7 +257,6 @@ function Inner({
   maxVisible = 10,
   render
 }) {
-  const focus = useFocusNode();
   const theme = useTheme();
   const [query, setQuery] = useState2("");
   const [selectedIndex, setSelectedIndex] = useState2(0);
@@ -181,40 +268,27 @@ function Inner({
     cmd.handler("", EMPTY_KEY);
     onClose();
   };
-  useKeybindings(
-    focus,
-    {
+  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),
-      backspace: () => {
-        setQuery((q) => q.slice(0, -1));
-        setSelectedIndex(0);
-      }
-    },
-    {
-      fallback: (input, key) => {
-        if (input.length === 1 && !key.ctrl) {
-          setQuery((q) => q + input);
-          setSelectedIndex(0);
-        }
-      }
+      down: () => setSelectedIndex((i) => (i + 1) % filtered.length)
     }
-  );
+  });
   if (render) {
-    return /* @__PURE__ */ jsx3(Fragment, { children: render({ query, filtered, selectedIndex: clampedIndex, onSelect }) });
+    return /* @__PURE__ */ jsx4(FocusScope, { handle: scope, children: render({ query, onChange: handleChange, filtered, selectedIndex: clampedIndex, onSelect }) });
   }
-  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: " " })
-    ] }),
-    /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", marginTop: 1, children: filtered.length === 0 ? /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "No commands found" }) : /* @__PURE__ */ jsx3(
+  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,
@@ -225,10 +299,10 @@ function Inner({
           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: [
+          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
             ] })
@@ -236,116 +310,30 @@ function Inner({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "\u2191\u2193 navigate \xB7 \u21B5 run \xB7 esc close" }) })
-  ] });
+    /* @__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__ */ 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: [
+  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__ */ jsx3(Text2, { color: theme.hintDimColor, children: " \u2022 " })
+    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__ */ jsx3(HintsBar, {});
+    return /* @__PURE__ */ jsx4(HintsBar, {});
   }
-  return /* @__PURE__ */ jsx3(FocusTrap, { children: /* @__PURE__ */ jsx3(Inner, { onClose: onClose ?? noop, maxVisible, render }) });
-}
-
-// src/ui/TextInput.tsx
-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;
-  useKeybindings(
-    focus,
-    {
-      left: () => {
-        cursorRef.current = Math.max(0, cursorRef.current - 1);
-        forceRender();
-      },
-      right: () => {
-        cursorRef.current = Math.min(value.length, cursorRef.current + 1);
-        forceRender();
-      },
-      home: () => {
-        cursorRef.current = 0;
-        forceRender();
-      },
-      end: () => {
-        cursorRef.current = value.length;
-        forceRender();
-      },
-      backspace: () => {
-        const c = cursorRef.current;
-        if (c > 0) {
-          cursorRef.current = c - 1;
-          onChange(value.slice(0, c - 1) + value.slice(c));
-        }
-      },
-      delete: () => {
-        const c = cursorRef.current;
-        if (c < value.length) {
-          onChange(value.slice(0, c) + value.slice(c + 1));
-        }
-      },
-      ...onSubmit && { enter: () => onSubmit(value) }
-    },
-    {
-      fallback: (input, key) => {
-        if (input.length === 1 && !key.ctrl && !key.return && !key.escape && !key.tab) {
-          const c = cursorRef.current;
-          cursorRef.current = c + 1;
-          onChange(value.slice(0, c) + input + value.slice(c));
-        }
-      },
-      bubble: ["tab", "shift+tab", "enter", "escape", "backspace", "delete", "left", "right", "home", "end"]
-    }
-  );
-  const before = value.slice(0, cursor);
-  const cursorChar = value[cursor] ?? " ";
-  const after = value.slice(cursor + 1);
-  if (render) {
-    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;
-  if (focus.hasFocus) {
-    const isPlaceholderVisible = value.length === 0 && placeholder != null;
-    const activeCursorChar = isPlaceholderVisible ? placeholder[0] ?? " " : cursorChar;
-    const activeAfter = isPlaceholderVisible ? placeholder.slice(1) : after;
-    return /* @__PURE__ */ jsxs4(Text3, { children: [
-      label != null && /* @__PURE__ */ jsxs4(Text3, { bold: true, children: [
-        label,
-        " "
-      ] }),
-      before,
-      /* @__PURE__ */ jsx4(Text3, { inverse: true, children: activeCursorChar }),
-      isPlaceholderVisible ? /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: activeAfter }) : activeAfter
-    ] });
-  }
-  return /* @__PURE__ */ jsxs4(Text3, { dimColor: true, children: [
-    label != null && /* @__PURE__ */ jsxs4(Text3, { children: [
-      label,
-      " "
-    ] }),
-    isPlaceholder ? /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: displayValue }) : displayValue
-  ] });
+  return /* @__PURE__ */ jsx4(FocusTrap, { children: /* @__PURE__ */ jsx4(Inner, { onClose: onClose ?? noop, maxVisible, render }) });
 }
 
 // src/ui/Select.tsx
@@ -891,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;
@@ -944,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.1",
+  "version": "0.7.2",
   "license": "MIT",
   "repository": {
     "type": "git",