giggles 0.3.1 → 0.3.3

package/dist/{chunk-4LED4GXQ.js → chunk-OYQZHF73.js}

@@ -27,6 +27,7 @@ var InputProvider = ({ children }) => {
       bindings: new Map(entries),
       capture: (options == null ? void 0 : options.capture) ?? false,
       onKeypress: options == null ? void 0 : options.onKeypress,
+      passthrough: (options == null ? void 0 : options.passthrough) ? new Set(options.passthrough) : void 0,
       layer: options == null ? void 0 : options.layer
     };
     bindingsRef.current.set(nodeId, registration);
@@ -281,7 +282,9 @@ function normalizeKey(input, key) {
   if (key.rightArrow) return "right";
   if (key.return) return "enter";
   if (key.escape) return "escape";
+  if (key.tab && key.shift) return "shift+tab";
   if (key.tab) return "tab";
+  if (input === "\x1B[3~") return "delete";
   if (key.backspace || key.delete) return "backspace";
   if (key.pageUp) return "pageup";
   if (key.pageDown) return "pagedown";
@@ -299,6 +302,7 @@ function InputRouter({ children }) {
   const { getFocusedId, getActiveBranchPath } = useFocusContext();
   const { getNodeBindings, getTrapNodeId, getAllBindings } = useInputContext();
   useInput((input, key) => {
+    var _a;
     const focusedId = getFocusedId();
     if (!focusedId) return;
     const path = getActiveBranchPath();
@@ -314,6 +318,9 @@ function InputRouter({ children }) {
         return;
       }
       if (nodeBindings.capture && nodeBindings.onKeypress) {
+        if ((_a = nodeBindings.passthrough) == null ? void 0 : _a.has(keyName)) {
+          continue;
+        }
         nodeBindings.onKeypress(input, key);
         return;
       }
@@ -396,7 +403,7 @@ function FocusGroup({
     if (!navigable) return {};
     const next = () => navigateSibling("next", wrap);
     const prev = () => navigateSibling("prev", wrap);
-    return direction === "vertical" ? {
+    const base = direction === "vertical" ? {
       j: next,
       k: prev,
       down: next,
@@ -407,6 +414,7 @@ function FocusGroup({
       right: next,
       left: prev
     };
+    return { ...base, tab: next, "shift+tab": prev };
   }, [navigable, direction, wrap, navigateSibling]);
   const mergedBindings = useMemo(
     () => ({ ...navigationKeys, ...customBindings }),

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default from 'react';
-import { K as Keybindings, a as KeybindingOptions, R as RegisteredKeybinding } from './types-ClgDW3fy.js';
-export { b as KeyHandler } from './types-ClgDW3fy.js';
+import { K as Keybindings, a as KeybindingOptions, R as RegisteredKeybinding } from './types-Dmw9TKt4.js';
+export { b as KeyHandler } from './types-Dmw9TKt4.js';
 export { Key } from 'ink';
 
 declare class GigglesError extends Error {

package/dist/index.js

@@ -14,7 +14,7 @@ import {
   useFocusState,
   useKeybindingRegistry,
   useKeybindings
-} from "./chunk-4LED4GXQ.js";
+} from "./chunk-OYQZHF73.js";
 
 // src/core/GigglesProvider.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{types-ClgDW3fy.d.ts → types-Dmw9TKt4.d.ts}

@@ -1,7 +1,7 @@
 import { Key } from 'ink';
 
 type KeyHandler = (input: string, key: Key) => void;
-type SpecialKey = 'up' | 'down' | 'left' | 'right' | 'enter' | 'escape' | 'tab' | 'backspace' | 'pageup' | 'pagedown' | 'home' | 'end';
+type SpecialKey = 'up' | 'down' | 'left' | 'right' | 'enter' | 'escape' | 'tab' | 'backspace' | 'delete' | 'pageup' | 'pagedown' | 'home' | 'end';
 type KeyName = SpecialKey | (string & {});
 type KeybindingDefinition = KeyHandler | {
     action: KeyHandler;
@@ -12,6 +12,7 @@ type Keybindings = Partial<Record<KeyName, KeybindingDefinition>>;
 type KeybindingOptions = {
     capture?: boolean;
     onKeypress?: (input: string, key: Key) => void;
+    passthrough?: string[];
     layer?: string;
 };
 type RegisteredKeybinding = {

package/dist/ui/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
-import { R as RegisteredKeybinding } from '../types-ClgDW3fy.js';
+import { R as RegisteredKeybinding } from '../types-Dmw9TKt4.js';
 import 'ink';
 
 type CommandPaletteRenderProps = {
@@ -15,4 +15,62 @@ type CommandPaletteProps = {
 };
 declare function CommandPalette({ onClose, render }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
 
-export { CommandPalette, type CommandPaletteRenderProps };
+type TextInputRenderProps = {
+    value: string;
+    focused: boolean;
+    before: string;
+    cursorChar: string;
+    after: string;
+};
+type TextInputProps = {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    placeholder?: string;
+    render?: (props: TextInputRenderProps) => React__default.ReactNode;
+};
+declare function TextInput({ label, value, onChange, onSubmit, placeholder, render }: TextInputProps): react_jsx_runtime.JSX.Element;
+
+type SelectOption<T> = {
+    label: string;
+    value: T;
+};
+type SelectRenderProps<T> = {
+    option: SelectOption<T>;
+    focused: boolean;
+    highlighted: boolean;
+    selected: boolean;
+};
+type SelectProps<T> = {
+    options: SelectOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    onSubmit?: (value: T) => void;
+    onHighlight?: (value: T) => void;
+    label?: string;
+    immediate?: boolean;
+    direction?: 'vertical' | 'horizontal';
+    render?: (props: SelectRenderProps<T>) => React__default.ReactNode;
+};
+declare function Select<T>({ options, value, onChange, onSubmit, onHighlight, label, immediate, direction, render }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+
+type MultiSelectRenderProps<T> = {
+    option: SelectOption<T>;
+    focused: boolean;
+    highlighted: boolean;
+    selected: boolean;
+};
+type MultiSelectProps<T> = {
+    options: SelectOption<T>[];
+    value: T[];
+    onChange: (value: T[]) => void;
+    onSubmit?: (value: T[]) => void;
+    onHighlight?: (value: T) => void;
+    label?: string;
+    direction?: 'vertical' | 'horizontal';
+    render?: (props: MultiSelectRenderProps<T>) => React__default.ReactNode;
+};
+declare function MultiSelect<T>({ options, value, onChange, onSubmit, onHighlight, label, direction, render }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+
+export { CommandPalette, type CommandPaletteRenderProps, MultiSelect, type MultiSelectRenderProps, Select, type SelectOption, type SelectRenderProps, TextInput, type TextInputRenderProps };

package/dist/ui/index.js

@@ -1,9 +1,10 @@
 import {
   FocusTrap,
+  GigglesError,
   useFocus,
   useKeybindingRegistry,
   useKeybindings
-} from "../chunk-4LED4GXQ.js";
+} from "../chunk-OYQZHF73.js";
 
 // src/ui/CommandPalette.tsx
 import { useState } from "react";
@@ -95,6 +96,231 @@ function Inner({ onClose, render }) {
 function CommandPalette({ onClose, render }) {
   return /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(Inner, { onClose, 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 = useFocus();
+  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) }
+    },
+    {
+      capture: true,
+      passthrough: ["tab", "shift+tab", "enter", "escape"],
+      onKeypress: (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));
+        }
+      }
+    }
+  );
+  const before = value.slice(0, cursor);
+  const cursorChar = value[cursor] ?? " ";
+  const after = value.slice(cursor + 1);
+  if (render) {
+    return /* @__PURE__ */ jsx2(Fragment2, { children: render({ value, focused: focus.focused, before, cursorChar, after }) });
+  }
+  const displayValue = value.length > 0 ? value : placeholder ?? "";
+  const isPlaceholder = value.length === 0;
+  const prefix = label != null ? `${label} ` : "";
+  if (focus.focused) {
+    return /* @__PURE__ */ jsxs2(Text2, { children: [
+      prefix,
+      before,
+      /* @__PURE__ */ jsx2(Text2, { inverse: true, children: cursorChar }),
+      after
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(Text2, { children: [
+    prefix,
+    /* @__PURE__ */ jsx2(Text2, { dimColor: isPlaceholder, children: displayValue })
+  ] });
+}
+
+// src/ui/Select.tsx
+import React3, { useState as useState2 } from "react";
+import { Box as Box2, Text as Text3 } from "ink";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Select({
+  options,
+  value,
+  onChange,
+  onSubmit,
+  onHighlight,
+  label,
+  immediate,
+  direction = "vertical",
+  render
+}) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const opt of options) {
+    const key = String(opt.value);
+    if (seen.has(key)) {
+      throw new GigglesError("Select options must have unique values");
+    }
+    seen.add(key);
+  }
+  const focus = useFocus();
+  const [highlightIndex, setHighlightIndex] = useState2(0);
+  const safeIndex = options.length === 0 ? -1 : Math.min(highlightIndex, options.length - 1);
+  if (safeIndex !== highlightIndex) {
+    setHighlightIndex(Math.max(0, safeIndex));
+  }
+  const moveHighlight = (delta) => {
+    if (options.length === 0) return;
+    const next2 = Math.max(0, Math.min(options.length - 1, safeIndex + delta));
+    if (next2 !== safeIndex) {
+      setHighlightIndex(next2);
+      onHighlight == null ? void 0 : onHighlight(options[next2].value);
+      if (immediate) {
+        onChange(options[next2].value);
+      }
+    }
+  };
+  const prev = () => moveHighlight(-1);
+  const next = () => moveHighlight(1);
+  const navBindings = direction === "vertical" ? { j: next, k: prev, down: next, up: prev } : { l: next, h: prev, right: next, left: prev };
+  useKeybindings(focus, {
+    ...navBindings,
+    enter: () => {
+      if (options.length === 0) return;
+      if (immediate) {
+        onSubmit == null ? void 0 : onSubmit(options[safeIndex].value);
+      } else {
+        onChange(options[safeIndex].value);
+        onSubmit == null ? void 0 : onSubmit(options[safeIndex].value);
+      }
+    }
+  });
+  const isHorizontal = direction === "horizontal";
+  return /* @__PURE__ */ jsxs3(Box2, { flexDirection: isHorizontal ? "row" : "column", gap: isHorizontal ? 1 : 0, children: [
+    label != null && /* @__PURE__ */ jsx3(Text3, { children: label }),
+    options.map((option, index) => {
+      const highlighted = index === safeIndex;
+      const selected = option.value === value;
+      if (render) {
+        return /* @__PURE__ */ jsx3(React3.Fragment, { children: render({ option, focused: focus.focused, highlighted, selected }) }, String(option.value));
+      }
+      return /* @__PURE__ */ jsxs3(Text3, { dimColor: !focus.focused, children: [
+        highlighted ? ">" : " ",
+        " ",
+        option.label
+      ] }, String(option.value));
+    })
+  ] });
+}
+
+// src/ui/MultiSelect.tsx
+import React4, { useState as useState3 } from "react";
+import { Box as Box3, Text as Text4 } from "ink";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function MultiSelect({
+  options,
+  value,
+  onChange,
+  onSubmit,
+  onHighlight,
+  label,
+  direction = "vertical",
+  render
+}) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const opt of options) {
+    const key = String(opt.value);
+    if (seen.has(key)) {
+      throw new GigglesError("MultiSelect options must have unique values");
+    }
+    seen.add(key);
+  }
+  const focus = useFocus();
+  const [highlightIndex, setHighlightIndex] = useState3(0);
+  const safeIndex = options.length === 0 ? -1 : Math.min(highlightIndex, options.length - 1);
+  if (safeIndex !== highlightIndex) {
+    setHighlightIndex(Math.max(0, safeIndex));
+  }
+  const moveHighlight = (delta) => {
+    if (options.length === 0) return;
+    const next2 = Math.max(0, Math.min(options.length - 1, safeIndex + delta));
+    if (next2 !== safeIndex) {
+      setHighlightIndex(next2);
+      onHighlight == null ? void 0 : onHighlight(options[next2].value);
+    }
+  };
+  const toggle = () => {
+    if (options.length === 0) return;
+    const item = options[safeIndex].value;
+    const exists = value.includes(item);
+    onChange(exists ? value.filter((v) => v !== item) : [...value, item]);
+  };
+  const prev = () => moveHighlight(-1);
+  const next = () => moveHighlight(1);
+  const navBindings = direction === "vertical" ? { j: next, k: prev, down: next, up: prev } : { l: next, h: prev, right: next, left: prev };
+  useKeybindings(focus, {
+    ...navBindings,
+    " ": toggle,
+    ...onSubmit && { enter: () => onSubmit(value) }
+  });
+  const isHorizontal = direction === "horizontal";
+  return /* @__PURE__ */ jsxs4(Box3, { flexDirection: isHorizontal ? "row" : "column", gap: isHorizontal ? 1 : 0, children: [
+    label != null && /* @__PURE__ */ jsx4(Text4, { children: label }),
+    options.map((option, index) => {
+      const highlighted = index === safeIndex;
+      const selected = value.includes(option.value);
+      if (render) {
+        return /* @__PURE__ */ jsx4(React4.Fragment, { children: render({ option, focused: focus.focused, highlighted, selected }) }, String(option.value));
+      }
+      return /* @__PURE__ */ jsxs4(Text4, { dimColor: !focus.focused, children: [
+        highlighted ? ">" : " ",
+        " [",
+        selected ? "x" : " ",
+        "] ",
+        option.label
+      ] }, String(option.value));
+    })
+  ] });
+}
 export {
-  CommandPalette
+  CommandPalette,
+  MultiSelect,
+  Select,
+  TextInput
 };

package/package.json

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