giggles 0.3.3 → 0.3.4

package/dist/ui/index.d.ts

@@ -32,6 +32,17 @@ type TextInputProps = {
 };
 declare function TextInput({ label, value, onChange, onSubmit, placeholder, render }: TextInputProps): react_jsx_runtime.JSX.Element;
 
+type PaginatorStyle = 'arrows' | 'scrollbar' | 'counter';
+type PaginatorProps = {
+    total: number;
+    offset: number;
+    visible: number;
+    style?: PaginatorStyle;
+    position?: 'above' | 'below';
+};
+
+declare function Paginator({ total, offset, visible, style, position }: PaginatorProps): react_jsx_runtime.JSX.Element | null;
+
 type SelectOption<T> = {
     label: string;
     value: T;
@@ -51,9 +62,12 @@ type SelectProps<T> = {
     label?: string;
     immediate?: boolean;
     direction?: 'vertical' | 'horizontal';
+    maxVisible?: number;
+    paginatorStyle?: PaginatorStyle;
+    wrap?: boolean;
     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;
+declare function Select<T>({ options, value, onChange, onSubmit, onHighlight, label, immediate, direction, maxVisible, paginatorStyle, wrap, render }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
 type MultiSelectRenderProps<T> = {
     option: SelectOption<T>;
@@ -69,8 +83,73 @@ type MultiSelectProps<T> = {
     onHighlight?: (value: T) => void;
     label?: string;
     direction?: 'vertical' | 'horizontal';
+    maxVisible?: number;
+    paginatorStyle?: PaginatorStyle;
+    wrap?: boolean;
     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;
+declare function MultiSelect<T>({ options, value, onChange, onSubmit, onHighlight, label, direction, maxVisible, paginatorStyle, wrap, render }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+
+type ConfirmProps = {
+    message: string;
+    defaultValue?: boolean;
+    onSubmit: (value: boolean) => void;
+};
+declare function Confirm({ message, defaultValue, onSubmit }: ConfirmProps): react_jsx_runtime.JSX.Element;
+
+type AutocompleteRenderProps<T> = {
+    option: SelectOption<T>;
+    focused: boolean;
+    highlighted: boolean;
+    selected: boolean;
+};
+type AutocompleteProps<T> = {
+    options: SelectOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    onSubmit?: (value: T) => void;
+    onHighlight?: (value: T) => void;
+    label?: string;
+    placeholder?: string;
+    filter?: (query: string, option: SelectOption<T>) => boolean;
+    maxVisible?: number;
+    paginatorStyle?: PaginatorStyle;
+    wrap?: boolean;
+    render?: (props: AutocompleteRenderProps<T>) => React__default.ReactNode;
+};
+declare function Autocomplete<T>({ options, value, onChange, onSubmit, onHighlight, label, placeholder, filter, maxVisible, paginatorStyle, wrap, render }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+
+type VirtualListRenderProps<T> = {
+    item: T;
+    index: number;
+};
+type VirtualListBase<T> = {
+    items: T[];
+    maxVisible?: number;
+    paginatorStyle?: PaginatorStyle;
+    render: (props: VirtualListRenderProps<T>) => React__default.ReactNode;
+};
+type VirtualListProps<T> = VirtualListBase<T> & ({
+    highlightIndex?: number;
+    scrollOffset?: never;
+} | {
+    highlightIndex?: never;
+    scrollOffset?: number;
+});
+declare function VirtualList<T>({ items, highlightIndex, scrollOffset: controlledOffset, maxVisible, paginatorStyle, render }: VirtualListProps<T>): react_jsx_runtime.JSX.Element;
+
+type ViewportRenderProps<T> = {
+    item: T;
+    index: number;
+    focused: boolean;
+};
+type ViewportProps<T> = {
+    items: T[];
+    maxVisible: number;
+    showLineNumbers?: boolean;
+    paginatorStyle?: PaginatorStyle;
+    render?: (props: ViewportRenderProps<T>) => React__default.ReactNode;
+};
+declare function Viewport<T>({ items, maxVisible, showLineNumbers, paginatorStyle, render }: ViewportProps<T>): react_jsx_runtime.JSX.Element;
 
-export { CommandPalette, type CommandPaletteRenderProps, MultiSelect, type MultiSelectRenderProps, Select, type SelectOption, type SelectRenderProps, TextInput, type TextInputRenderProps };
+export { Autocomplete, type AutocompleteRenderProps, CommandPalette, type CommandPaletteRenderProps, Confirm, MultiSelect, type MultiSelectRenderProps, Paginator, type PaginatorStyle, Select, type SelectOption, type SelectRenderProps, TextInput, type TextInputRenderProps, Viewport, type ViewportRenderProps, VirtualList, type VirtualListRenderProps };

package/dist/ui/index.js

@@ -177,9 +177,104 @@ function TextInput({ label, value, onChange, onSubmit, placeholder, render }) {
 }
 
 // src/ui/Select.tsx
+import React4, { useState as useState3 } from "react";
+import { Box as Box4, Text as Text4 } from "ink";
+
+// src/ui/VirtualList.tsx
 import React3, { 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, style = "arrows", position }) {
+  if (total <= visible) return null;
+  const hasAbove = offset > 0;
+  const hasBelow = offset + visible < total;
+  if (style === "arrows") {
+    if (position === "above" && hasAbove) return /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "\u2191" });
+    if (position === "below" && hasBelow) return /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "\u2193" });
+    return null;
+  }
+  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 thumbSize = Math.max(1, Math.round(visible / total * visible));
+  const maxThumbOffset = visible - 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: visible }, (_, i) => {
+    const isThumb = i >= thumbOffset && i < thumbOffset + thumbSize;
+    return /* @__PURE__ */ jsx3(Text3, { 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,
+  maxVisible,
+  paginatorStyle = "arrows",
+  render
+}) {
+  const [internalOffset, setInternalOffset] = useState2(0);
+  if (maxVisible == null || items.length <= maxVisible) {
+    return /* @__PURE__ */ jsx4(Box3, { flexDirection: "column", children: items.map((item, index) => /* @__PURE__ */ jsx4(React3.Fragment, { children: render({ item, index }) }, index)) });
+  }
+  const maxOffset = Math.max(0, items.length - maxVisible);
+  let offset;
+  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;
+      }
+    }
+    if (offset !== internalOffset) {
+      setInternalOffset(offset);
+    }
+  }
+  const visible = items.slice(offset, offset + maxVisible);
+  const paginatorProps = {
+    total: items.length,
+    offset,
+    visible: maxVisible,
+    style: paginatorStyle
+  };
+  if (paginatorStyle === "scrollbar") {
+    return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx4(Box3, { flexDirection: "column", children: visible.map((item, i) => {
+        const index = offset + i;
+        return /* @__PURE__ */ jsx4(React3.Fragment, { children: render({ item, index }) }, index);
+      }) }),
+      /* @__PURE__ */ jsx4(Paginator, { ...paginatorProps })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx4(Paginator, { ...paginatorProps, position: "above" }),
+    visible.map((item, i) => {
+      const index = offset + i;
+      return /* @__PURE__ */ jsx4(React3.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,
   value,
@@ -189,6 +284,9 @@ function Select({
   label,
   immediate,
   direction = "vertical",
+  maxVisible,
+  paginatorStyle,
+  wrap = true,
   render
 }) {
   const seen = /* @__PURE__ */ new Set();
@@ -200,14 +298,14 @@ function Select({
     seen.add(key);
   }
   const focus = useFocus();
-  const [highlightIndex, setHighlightIndex] = useState2(0);
+  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));
+    const next2 = wrap ? (safeIndex + delta + options.length) % options.length : Math.max(0, Math.min(options.length - 1, safeIndex + delta));
     if (next2 !== safeIndex) {
       setHighlightIndex(next2);
       onHighlight == null ? void 0 : onHighlight(options[next2].value);
@@ -232,27 +330,37 @@ function Select({
     }
   });
   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));
+  const renderOption = ({ item: option, index }) => {
+    const highlighted = index === safeIndex;
+    const selected = option.value === value;
+    if (render) {
+      return render({ option, focused: focus.focused, highlighted, selected });
+    }
+    return /* @__PURE__ */ jsxs5(Text4, { dimColor: !focus.focused, children: [
+      highlighted ? ">" : " ",
+      " ",
+      option.label
+    ] }, String(option.value));
+  };
+  return /* @__PURE__ */ jsxs5(Box4, { flexDirection: isHorizontal ? "row" : "column", gap: isHorizontal ? 1 : 0, children: [
+    label != null && /* @__PURE__ */ jsx5(Text4, { children: label }),
+    isHorizontal ? options.map((option, index) => /* @__PURE__ */ jsx5(React4.Fragment, { children: renderOption({ item: option, index }) }, String(option.value))) : /* @__PURE__ */ jsx5(
+      VirtualList,
+      {
+        items: options,
+        highlightIndex: safeIndex,
+        maxVisible,
+        paginatorStyle,
+        render: renderOption
       }
-      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";
+import React5, { useState as useState4 } from "react";
+import { Box as Box5, Text as Text5 } from "ink";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function MultiSelect({
   options,
   value,
@@ -261,6 +369,9 @@ function MultiSelect({
   onHighlight,
   label,
   direction = "vertical",
+  maxVisible,
+  paginatorStyle,
+  wrap = true,
   render
 }) {
   const seen = /* @__PURE__ */ new Set();
@@ -272,14 +383,14 @@ function MultiSelect({
     seen.add(key);
   }
   const focus = useFocus();
-  const [highlightIndex, setHighlightIndex] = useState3(0);
+  const [highlightIndex, setHighlightIndex] = useState4(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));
+    const next2 = wrap ? (safeIndex + delta + options.length) % options.length : Math.max(0, Math.min(options.length - 1, safeIndex + delta));
     if (next2 !== safeIndex) {
       setHighlightIndex(next2);
       onHighlight == null ? void 0 : onHighlight(options[next2].value);
@@ -300,27 +411,254 @@ function MultiSelect({
     ...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));
+  const renderOption = ({ item: option, index }) => {
+    const highlighted = index === safeIndex;
+    const selected = value.includes(option.value);
+    if (render) {
+      return render({ option, focused: focus.focused, highlighted, selected });
+    }
+    return /* @__PURE__ */ jsxs6(Text5, { dimColor: !focus.focused, children: [
+      highlighted ? ">" : " ",
+      " [",
+      selected ? "x" : " ",
+      "] ",
+      option.label
+    ] }, String(option.value));
+  };
+  return /* @__PURE__ */ jsxs6(Box5, { flexDirection: isHorizontal ? "row" : "column", gap: isHorizontal ? 1 : 0, children: [
+    label != null && /* @__PURE__ */ jsx6(Text5, { children: label }),
+    isHorizontal ? options.map((option, index) => /* @__PURE__ */ jsx6(React5.Fragment, { children: renderOption({ item: option, index }) }, String(option.value))) : /* @__PURE__ */ jsx6(
+      VirtualList,
+      {
+        items: options,
+        highlightIndex: safeIndex,
+        maxVisible,
+        paginatorStyle,
+        render: renderOption
       }
-      return /* @__PURE__ */ jsxs4(Text4, { dimColor: !focus.focused, children: [
-        highlighted ? ">" : " ",
-        " [",
-        selected ? "x" : " ",
-        "] ",
-        option.label
-      ] }, String(option.value));
-    })
+    )
   ] });
 }
+
+// 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 = useFocus();
+  useKeybindings(focus, {
+    y: () => onSubmit(true),
+    n: () => onSubmit(false),
+    enter: () => onSubmit(defaultValue)
+  });
+  const hint = defaultValue ? "Y/n" : "y/N";
+  return /* @__PURE__ */ jsxs7(Text6, { dimColor: !focus.focused, children: [
+    message,
+    " (",
+    hint,
+    ")"
+  ] });
+}
+
+// src/ui/Autocomplete.tsx
+import { useReducer as useReducer2, useRef as useRef2, useState as useState5 } from "react";
+import { Box as Box6, Text as Text7 } from "ink";
+import { jsx as jsx7, jsxs as jsxs8 } from "react/jsx-runtime";
+function defaultFilter(query, option) {
+  const caseSensitive = query !== query.toLowerCase();
+  if (caseSensitive) {
+    return option.label.includes(query);
+  }
+  return option.label.toLowerCase().includes(query);
+}
+function Autocomplete({
+  options,
+  value,
+  onChange,
+  onSubmit,
+  onHighlight,
+  label,
+  placeholder,
+  filter = defaultFilter,
+  maxVisible,
+  paginatorStyle,
+  wrap = true,
+  render
+}) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const opt of options) {
+    const key = String(opt.value);
+    if (seen.has(key)) {
+      throw new GigglesError("Autocomplete options must have unique values");
+    }
+    seen.add(key);
+  }
+  const focus = useFocus();
+  const [query, setQuery] = useState5("");
+  const [highlightIndex, setHighlightIndex] = useState5(0);
+  const cursorRef = useRef2(0);
+  const [, forceRender] = useReducer2((c) => c + 1, 0);
+  const filtered = query.length === 0 ? options : options.filter((opt) => filter(query, opt));
+  const safeIndex = filtered.length === 0 ? -1 : Math.min(highlightIndex, filtered.length - 1);
+  if (safeIndex >= 0 && safeIndex !== highlightIndex) {
+    setHighlightIndex(safeIndex);
+  }
+  const cursor = Math.min(cursorRef.current, query.length);
+  cursorRef.current = cursor;
+  const moveHighlight = (delta) => {
+    if (filtered.length === 0) return;
+    const next = wrap ? (safeIndex + delta + filtered.length) % filtered.length : Math.max(0, Math.min(filtered.length - 1, safeIndex + delta));
+    if (next !== safeIndex) {
+      setHighlightIndex(next);
+      onHighlight == null ? void 0 : onHighlight(filtered[next].value);
+    }
+  };
+  const updateQuery = (newQuery) => {
+    setQuery(newQuery);
+    setHighlightIndex(0);
+  };
+  useKeybindings(
+    focus,
+    {
+      up: () => moveHighlight(-1),
+      down: () => moveHighlight(1),
+      left: () => {
+        cursorRef.current = Math.max(0, cursorRef.current - 1);
+        forceRender();
+      },
+      right: () => {
+        cursorRef.current = Math.min(query.length, cursorRef.current + 1);
+        forceRender();
+      },
+      home: () => {
+        cursorRef.current = 0;
+        forceRender();
+      },
+      end: () => {
+        cursorRef.current = query.length;
+        forceRender();
+      },
+      backspace: () => {
+        const c = cursorRef.current;
+        if (c > 0) {
+          cursorRef.current = c - 1;
+          updateQuery(query.slice(0, c - 1) + query.slice(c));
+        }
+      },
+      delete: () => {
+        const c = cursorRef.current;
+        if (c < query.length) {
+          updateQuery(query.slice(0, c) + query.slice(c + 1));
+        }
+      },
+      enter: () => {
+        if (filtered.length === 0) return;
+        const selected = filtered[safeIndex].value;
+        onChange(selected);
+        onSubmit == null ? void 0 : onSubmit(selected);
+      }
+    },
+    {
+      capture: true,
+      passthrough: ["tab", "shift+tab", "escape"],
+      onKeypress: (input, key) => {
+        if (input.length === 1 && !key.ctrl && !key.return && !key.escape && !key.tab) {
+          const c = cursorRef.current;
+          cursorRef.current = c + 1;
+          updateQuery(query.slice(0, c) + input + query.slice(c));
+        }
+      }
+    }
+  );
+  const before = query.slice(0, cursor);
+  const cursorChar = query[cursor] ?? " ";
+  const after = query.slice(cursor + 1);
+  const prefix = label != null ? `${label} ` : "";
+  return /* @__PURE__ */ jsxs8(Box6, { flexDirection: "column", children: [
+    focus.focused ? /* @__PURE__ */ jsxs8(Text7, { children: [
+      prefix,
+      before,
+      /* @__PURE__ */ jsx7(Text7, { inverse: true, children: cursorChar }),
+      after
+    ] }) : /* @__PURE__ */ jsxs8(Text7, { dimColor: true, children: [
+      prefix,
+      query.length > 0 ? query : placeholder ?? ""
+    ] }),
+    /* @__PURE__ */ jsx7(
+      VirtualList,
+      {
+        items: filtered,
+        highlightIndex: safeIndex,
+        maxVisible,
+        paginatorStyle,
+        render: ({ item: option, index }) => {
+          const highlighted = index === safeIndex;
+          const selected = option.value === value;
+          if (render) {
+            return render({ option, focused: focus.focused, highlighted, selected });
+          }
+          return /* @__PURE__ */ jsxs8(Text7, { dimColor: !focus.focused, children: [
+            highlighted ? ">" : " ",
+            " ",
+            option.label
+          ] });
+        }
+      }
+    )
+  ] });
+}
+
+// src/ui/Viewport.tsx
+import { useState as useState6 } from "react";
+import { Text as Text8 } from "ink";
+import { jsx as jsx8, jsxs as jsxs9 } from "react/jsx-runtime";
+function Viewport({ items, maxVisible, showLineNumbers, paginatorStyle, render }) {
+  const focus = useFocus();
+  const [scrollOffset, setScrollOffset] = useState6(0);
+  const maxOffset = Math.max(0, items.length - maxVisible);
+  const scroll = (delta) => {
+    setScrollOffset((prev) => Math.max(0, Math.min(maxOffset, prev + delta)));
+  };
+  useKeybindings(focus, {
+    j: () => scroll(1),
+    k: () => scroll(-1),
+    down: () => scroll(1),
+    up: () => scroll(-1),
+    pagedown: () => scroll(maxVisible),
+    pageup: () => scroll(-maxVisible),
+    g: () => setScrollOffset(0),
+    G: () => setScrollOffset(maxOffset)
+  });
+  const gutterWidth = showLineNumbers ? String(items.length).length + 1 : 0;
+  return /* @__PURE__ */ jsx8(
+    VirtualList,
+    {
+      items,
+      scrollOffset,
+      maxVisible,
+      paginatorStyle,
+      render: ({ item, index }) => {
+        if (render) {
+          return render({ item, index, focused: focus.focused });
+        }
+        return /* @__PURE__ */ jsxs9(Text8, { dimColor: !focus.focused, children: [
+          showLineNumbers && /* @__PURE__ */ jsxs9(Text8, { dimColor: true, children: [
+            String(index + 1).padStart(gutterWidth - 1),
+            " "
+          ] }),
+          String(item)
+        ] });
+      }
+    }
+  );
+}
 export {
+  Autocomplete,
   CommandPalette,
+  Confirm,
   MultiSelect,
+  Paginator,
   Select,
-  TextInput
+  TextInput,
+  Viewport,
+  VirtualList
 };

package/package.json

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