giggles 0.3.5 → 0.3.6

package/dist/{chunk-OYQZHF73.js → chunk-FEQYHTG7.js}

@@ -452,6 +452,30 @@ function FocusTrap({ children }) {
   return /* @__PURE__ */ jsx5(FocusNodeContext.Provider, { value: id, children });
 }
 
+// src/core/theme.tsx
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var defaultTheme = {
+  accentColor: "#6B9FD4",
+  selectedColor: "#8FBF7F",
+  hintColor: "#8A8A8A",
+  hintDimColor: "#5C5C5C",
+  hintHighlightColor: "#D4D4D4",
+  hintHighlightDimColor: "#A0A0A0",
+  indicator: "\u25B8",
+  checkedIndicator: "\u2713",
+  uncheckedIndicator: "\u25CB"
+};
+var ThemeContext = createContext4(defaultTheme);
+function ThemeProvider({ theme, children }) {
+  const parent = useContext4(ThemeContext);
+  const merged = { ...parent, ...theme };
+  return /* @__PURE__ */ jsx6(ThemeContext.Provider, { value: merged, children });
+}
+function useTheme() {
+  return useContext4(ThemeContext);
+}
+
 export {
   GigglesError,
   FocusProvider,
@@ -464,5 +488,7 @@ export {
   FocusTrap,
   useFocus,
   FocusGroup,
-  useFocusState
+  useFocusState,
+  ThemeProvider,
+  useTheme
 };

package/dist/index.d.ts

@@ -9,10 +9,29 @@ declare class GigglesError extends Error {
     constructor(message: string);
 }
 
+type GigglesTheme = {
+    accentColor: string;
+    selectedColor: string;
+    hintColor: string;
+    hintDimColor: string;
+    hintHighlightColor: string;
+    hintHighlightDimColor: string;
+    indicator: string;
+    checkedIndicator: string;
+    uncheckedIndicator: string;
+};
+type ThemeProviderProps = {
+    theme?: Partial<GigglesTheme>;
+    children: React__default.ReactNode;
+};
+declare function ThemeProvider({ theme, children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): GigglesTheme;
+
 type GigglesProviderProps = {
+    theme?: Partial<GigglesTheme>;
     children: React__default.ReactNode;
 };
-declare function GigglesProvider({ children }: GigglesProviderProps): react_jsx_runtime.JSX.Element;
+declare function GigglesProvider({ theme, children }: GigglesProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function useKeybindings(focus: FocusHandle, bindings: Keybindings, options?: KeybindingOptions): void;
 
@@ -79,4 +98,4 @@ type NavigationContextValue = {
 
 declare const useNavigation: () => NavigationContextValue;
 
-export { FocusGroup, type FocusHandle, FocusTrap, GigglesError, GigglesProvider, KeybindingOptions, type KeybindingRegistry, Keybindings, type NavigationContextValue, RegisteredKeybinding, Router, Screen, useFocus, useFocusState, useKeybindingRegistry, useKeybindings, useNavigation };
+export { FocusGroup, type FocusHandle, FocusTrap, GigglesError, GigglesProvider, type GigglesTheme, KeybindingOptions, type KeybindingRegistry, Keybindings, type NavigationContextValue, RegisteredKeybinding, Router, Screen, ThemeProvider, useFocus, useFocusState, useKeybindingRegistry, useKeybindings, useNavigation, useTheme };

package/dist/index.js

@@ -9,17 +9,19 @@ import {
   GigglesError,
   InputProvider,
   InputRouter,
+  ThemeProvider,
   useFocus,
   useFocusContext,
   useFocusState,
   useKeybindingRegistry,
-  useKeybindings
-} from "./chunk-OYQZHF73.js";
+  useKeybindings,
+  useTheme
+} from "./chunk-FEQYHTG7.js";
 
 // src/core/GigglesProvider.tsx
 import { jsx } from "react/jsx-runtime";
-function GigglesProvider({ children }) {
-  return /* @__PURE__ */ jsx(AlternateScreen, { children: /* @__PURE__ */ jsx(FocusProvider, { children: /* @__PURE__ */ jsx(InputProvider, { children: /* @__PURE__ */ jsx(InputRouter, { children }) }) }) });
+function GigglesProvider({ theme, children }) {
+  return /* @__PURE__ */ jsx(AlternateScreen, { children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx(FocusProvider, { children: /* @__PURE__ */ jsx(InputProvider, { children: /* @__PURE__ */ jsx(InputRouter, { children }) }) }) }) });
 }
 
 // src/core/router/Router.tsx
@@ -181,9 +183,11 @@ export {
   GigglesProvider,
   Router,
   Screen,
+  ThemeProvider,
   useFocus,
   useFocusState,
   useKeybindingRegistry,
   useKeybindings,
-  useNavigation
+  useNavigation,
+  useTheme
 };

package/dist/ui/index.d.ts

@@ -1,19 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
 import { R as RegisteredKeybinding } from '../types-Dmw9TKt4.js';
+import React__default from 'react';
 import 'ink';
 
-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 CommandPaletteRenderProps = {
     query: string;
     filtered: RegisteredKeybinding[];
@@ -21,12 +10,11 @@ type CommandPaletteRenderProps = {
     onSelect: (cmd: RegisteredKeybinding) => void;
 };
 type CommandPaletteProps = {
-    onClose: () => void;
-    maxVisible?: number;
-    paginatorStyle?: PaginatorStyle;
-    render?: (props: CommandPaletteRenderProps) => React__default.ReactNode;
+    onClose?: () => void;
+    interactive?: boolean;
+    render?: (props: CommandPaletteRenderProps) => React.ReactNode;
 };
-declare function CommandPalette({ onClose, maxVisible, paginatorStyle, render }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
+declare function CommandPalette({ onClose, interactive, render }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
 
 type TextInputRenderProps = {
     value: string;
@@ -45,6 +33,18 @@ type TextInputProps = {
 };
 declare function TextInput({ label, value, onChange, onSubmit, placeholder, render }: TextInputProps): react_jsx_runtime.JSX.Element;
 
+type PaginatorStyle = 'dots' | 'arrows' | 'scrollbar' | 'counter' | 'none';
+type PaginatorProps = {
+    total: number;
+    offset: number;
+    visible: number;
+    gap?: number;
+    style?: PaginatorStyle;
+    position?: 'above' | 'below';
+};
+
+declare function Paginator({ total, offset, visible, gap, style, position }: PaginatorProps): react_jsx_runtime.JSX.Element | null;
+
 type SelectOption<T> = {
     label: string;
     value: T;
@@ -64,12 +64,13 @@ type SelectProps<T> = {
     label?: string;
     immediate?: boolean;
     direction?: 'vertical' | 'horizontal';
+    gap?: number;
     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, 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 }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
 type MultiSelectRenderProps<T> = {
     option: SelectOption<T>;
@@ -85,12 +86,13 @@ type MultiSelectProps<T> = {
     onHighlight?: (value: T) => void;
     label?: string;
     direction?: 'vertical' | 'horizontal';
+    gap?: number;
     maxVisible?: number;
     paginatorStyle?: PaginatorStyle;
     wrap?: boolean;
     render?: (props: MultiSelectRenderProps<T>) => React__default.ReactNode;
 };
-declare function MultiSelect<T>({ options, value, onChange, onSubmit, onHighlight, label, direction, 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 }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 type ConfirmProps = {
     message: string;
@@ -114,12 +116,13 @@ type AutocompleteProps<T> = {
     label?: string;
     placeholder?: string;
     filter?: (query: string, option: SelectOption<T>) => boolean;
+    gap?: number;
     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;
+declare function Autocomplete<T>({ options, value, onChange, onSubmit, onHighlight, label, placeholder, filter, gap, maxVisible, paginatorStyle, wrap, render }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
 
 type VirtualListRenderProps<T> = {
     item: T;
@@ -127,6 +130,7 @@ type VirtualListRenderProps<T> = {
 };
 type VirtualListBase<T> = {
     items: T[];
+    gap?: number;
     maxVisible?: number;
     paginatorStyle?: PaginatorStyle;
     render: (props: VirtualListRenderProps<T>) => React__default.ReactNode;
@@ -138,7 +142,7 @@ type VirtualListProps<T> = VirtualListBase<T> & ({
     highlightIndex?: never;
     scrollOffset?: number;
 });
-declare function VirtualList<T>({ items, highlightIndex, scrollOffset: controlledOffset, maxVisible, paginatorStyle, render }: VirtualListProps<T>): react_jsx_runtime.JSX.Element;
+declare function VirtualList<T>({ items, highlightIndex, scrollOffset: controlledOffset, gap, maxVisible, paginatorStyle, render }: VirtualListProps<T>): react_jsx_runtime.JSX.Element;
 
 type ViewportRenderProps<T> = {
     item: T;
@@ -149,9 +153,10 @@ type ViewportProps<T> = {
     items: T[];
     maxVisible: number;
     showLineNumbers?: boolean;
+    gap?: number;
     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;
+declare function Viewport<T>({ items, maxVisible, showLineNumbers, gap, paginatorStyle, render }: ViewportProps<T>): react_jsx_runtime.JSX.Element;
 
 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

@@ -3,108 +3,14 @@ import {
   GigglesError,
   useFocus,
   useKeybindingRegistry,
-  useKeybindings
-} from "../chunk-OYQZHF73.js";
+  useKeybindings,
+  useTheme
+} from "../chunk-FEQYHTG7.js";
 
 // src/ui/CommandPalette.tsx
-import { useState as useState2 } from "react";
-import { Box as Box3, Text as Text2 } from "ink";
-
-// src/ui/VirtualList.tsx
-import React, { useState } from "react";
-import { Box as Box2 } from "ink";
-
-// src/ui/Paginator.tsx
+import { useState } from "react";
 import { Box, Text } from "ink";
-import { jsx, jsxs } 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__ */ jsx(Text, { dimColor: true, children: "\u2191" });
-    if (position === "below" && hasBelow) return /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2193" });
-    return null;
-  }
-  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 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__ */ jsx(Box, { flexDirection: "column", children: Array.from({ length: visible }, (_, i) => {
-    const isThumb = i >= thumbOffset && i < thumbOffset + thumbSize;
-    return /* @__PURE__ */ jsx(Text, { 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,
-  maxVisible,
-  paginatorStyle = "arrows",
-  render
-}) {
-  const [internalOffset, setInternalOffset] = useState(0);
-  if (maxVisible == null || items.length <= maxVisible) {
-    return /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: items.map((item, index) => /* @__PURE__ */ jsx2(React.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__ */ jsxs2(Box2, { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", 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", 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";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var EMPTY_KEY = {
   upArrow: false,
   downArrow: false,
@@ -137,12 +43,14 @@ function fuzzyMatch(name, query) {
   }
   return qi === lowerQuery.length;
 }
-function Inner({ onClose, maxVisible, paginatorStyle, render }) {
+function Inner({ onClose, render }) {
   const focus = useFocus();
-  const [query, setQuery] = useState2("");
-  const [selectedIndex, setSelectedIndex] = useState2(0);
+  const theme = useTheme();
+  const [query, setQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
   const registry = useKeybindingRegistry();
-  const filtered = registry.all.filter((cmd) => fuzzyMatch(cmd.name, query));
+  const named = registry.all.filter((cmd) => cmd.name != null);
+  const filtered = named.filter((cmd) => fuzzyMatch(cmd.name, query));
   const clampedIndex = Math.min(selectedIndex, Math.max(0, filtered.length - 1));
   const onSelect = (cmd) => {
     cmd.handler("", EMPTY_KEY);
@@ -156,8 +64,8 @@ function Inner({ onClose, maxVisible, paginatorStyle, render }) {
         const cmd = filtered[clampedIndex];
         if (cmd) onSelect(cmd);
       },
-      up: () => setSelectedIndex((i) => Math.max(0, i - 1)),
-      down: () => setSelectedIndex((i) => Math.max(0, Math.min(filtered.length - 1, i + 1))),
+      left: () => setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length),
+      right: () => setSelectedIndex((i) => (i + 1) % filtered.length),
       backspace: () => {
         setQuery((q) => q.slice(0, -1));
         setSelectedIndex(0);
@@ -174,37 +82,56 @@ function Inner({ onClose, maxVisible, paginatorStyle, render }) {
     }
   );
   if (render) {
-    return /* @__PURE__ */ jsx3(Fragment, { children: render({ query, filtered, selectedIndex: clampedIndex, onSelect }) });
+    return /* @__PURE__ */ jsx(Fragment, { children: render({ query, filtered, selectedIndex: clampedIndex, onSelect }) });
   }
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", borderStyle: "round", width: 40, children: [
-    /* @__PURE__ */ jsxs3(Box3, { paddingX: 1, children: [
-      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "> " }),
-      /* @__PURE__ */ jsx3(Text2, { children: query }),
-      /* @__PURE__ */ jsx3(Text2, { inverse: true, children: " " })
+  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: " " })
     ] }),
-    /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", children: filtered.length === 0 ? /* @__PURE__ */ jsx3(Box3, { paddingX: 1, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "No commands found" }) }) : /* @__PURE__ */ jsx3(
-      VirtualList,
-      {
-        items: filtered,
-        highlightIndex: clampedIndex,
-        maxVisible,
-        paginatorStyle,
-        render: ({ item: cmd, index }) => /* @__PURE__ */ jsxs3(Box3, { justifyContent: "space-between", paddingX: 1, children: [
-          /* @__PURE__ */ jsx3(Text2, { inverse: index === clampedIndex, children: cmd.name }),
-          /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: cmd.key })
-        ] }, `${cmd.nodeId}-${cmd.key}`)
-      }
-    ) })
+    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}`);
+    }) })
   ] });
 }
-function CommandPalette({ onClose, maxVisible, paginatorStyle, render }) {
-  return /* @__PURE__ */ jsx3(FocusTrap, { children: /* @__PURE__ */ jsx3(Inner, { onClose, maxVisible, paginatorStyle, render }) });
+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__ */ 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: [
+      " ",
+      cmd.name
+    ] }),
+    index < commands.length - 1 && /* @__PURE__ */ jsx(Text, { color: theme.hintDimColor, children: " \u2022 " })
+  ] }, `${cmd.nodeId}-${cmd.key}`)) });
+}
+var noop = () => {
+};
+function CommandPalette({ onClose, interactive = true, render }) {
+  if (!interactive) {
+    return /* @__PURE__ */ jsx(HintsBar, {});
+  }
+  return /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(Inner, { onClose: onClose ?? noop, render }) });
 }
 
 // src/ui/TextInput.tsx
 import { useReducer, useRef } from "react";
-import { Text as Text3 } from "ink";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+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);
@@ -261,28 +188,149 @@ function TextInput({ label, value, onChange, onSubmit, placeholder, render }) {
   const cursorChar = value[cursor] ?? " ";
   const after = value.slice(cursor + 1);
   if (render) {
-    return /* @__PURE__ */ jsx4(Fragment2, { children: render({ value, focused: focus.focused, before, cursorChar, after }) });
+    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__ */ jsxs4(Text3, { children: [
-      prefix,
+    return /* @__PURE__ */ jsxs2(Text2, { children: [
+      label != null && /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
+        label,
+        " "
+      ] }),
       before,
-      /* @__PURE__ */ jsx4(Text3, { inverse: true, children: cursorChar }),
+      /* @__PURE__ */ jsx2(Text2, { inverse: true, children: cursorChar }),
       after
     ] });
   }
-  return /* @__PURE__ */ jsxs4(Text3, { children: [
-    prefix,
-    /* @__PURE__ */ jsx4(Text3, { dimColor: isPlaceholder, children: displayValue })
+  return /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    label != null && /* @__PURE__ */ jsxs2(Text2, { children: [
+      label,
+      " "
+    ] }),
+    isPlaceholder ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: displayValue }) : displayValue
   ] });
 }
 
 // src/ui/Select.tsx
-import React4, { useEffect, useState as useState3 } from "react";
+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, { color: i === currentPage ? theme.accentColor : void 0, dimColor: i !== currentPage, children: [
+      i === currentPage ? "\u25CF" : "\u25CB",
+      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,
@@ -293,6 +341,7 @@ function Select({
   label,
   immediate,
   direction = "vertical",
+  gap,
   maxVisible,
   paginatorStyle,
   wrap = true,
@@ -307,9 +356,10 @@ function Select({
     seen.add(key);
   }
   const focus = useFocus();
+  const theme = useTheme();
   const [highlightIndex, setHighlightIndex] = useState3(0);
   const safeIndex = options.length === 0 ? -1 : Math.min(highlightIndex, options.length - 1);
-  useEffect(() => {
+  useEffect2(() => {
     if (safeIndex !== highlightIndex) {
       setHighlightIndex(Math.max(0, safeIndex));
     }
@@ -347,19 +397,17 @@ function Select({
     if (render) {
       return render({ option, focused: focus.focused, highlighted, selected });
     }
-    return /* @__PURE__ */ jsxs5(Text4, { dimColor: !focus.focused, children: [
-      highlighted ? ">" : " ",
-      " ",
-      option.label
-    ] }, String(option.value));
+    const active = highlighted && focus.focused;
+    return /* @__PURE__ */ jsx5(Box4, { children: /* @__PURE__ */ jsx5(Text4, { dimColor: !focus.focused && !highlighted, children: /* @__PURE__ */ jsx5(Text4, { color: active ? theme.accentColor : void 0, bold: highlighted, children: 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(
+    isHorizontal ? options.map((option, index) => /* @__PURE__ */ jsx5(React3.Fragment, { children: renderOption({ item: option, index }) }, String(option.value))) : /* @__PURE__ */ jsx5(
       VirtualList,
       {
         items: options,
         highlightIndex: safeIndex,
+        gap,
         maxVisible,
         paginatorStyle,
         render: renderOption
@@ -369,7 +417,7 @@ function Select({
 }
 
 // src/ui/MultiSelect.tsx
-import React5, { useEffect as useEffect2, useState as useState4 } from "react";
+import React4, { useEffect as useEffect3, 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({
@@ -380,6 +428,7 @@ function MultiSelect({
   onHighlight,
   label,
   direction = "vertical",
+  gap,
   maxVisible,
   paginatorStyle,
   wrap = true,
@@ -394,9 +443,10 @@ function MultiSelect({
     seen.add(key);
   }
   const focus = useFocus();
+  const theme = useTheme();
   const [highlightIndex, setHighlightIndex] = useState4(0);
   const safeIndex = options.length === 0 ? -1 : Math.min(highlightIndex, options.length - 1);
-  useEffect2(() => {
+  useEffect3(() => {
     if (safeIndex !== highlightIndex) {
       setHighlightIndex(Math.max(0, safeIndex));
     }
@@ -430,21 +480,21 @@ function MultiSelect({
     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));
+    const active = highlighted && focus.focused;
+    return /* @__PURE__ */ jsx6(Box5, { children: /* @__PURE__ */ jsxs6(Text5, { dimColor: !focus.focused && !highlighted, children: [
+      /* @__PURE__ */ jsx6(Text5, { color: selected ? theme.selectedColor : void 0, bold: selected, children: selected ? theme.checkedIndicator : theme.uncheckedIndicator }),
+      " ",
+      /* @__PURE__ */ jsx6(Text5, { color: active ? theme.accentColor : void 0, bold: highlighted, children: 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(
+    isHorizontal ? options.map((option, index) => /* @__PURE__ */ jsx6(React4.Fragment, { children: renderOption({ item: option, index }) }, String(option.value))) : /* @__PURE__ */ jsx6(
       VirtualList,
       {
         items: options,
         highlightIndex: safeIndex,
+        gap,
         maxVisible,
         paginatorStyle,
         render: renderOption
@@ -466,14 +516,17 @@ function Confirm({ message, defaultValue = true, onSubmit }) {
   const hint = defaultValue ? "Y/n" : "y/N";
   return /* @__PURE__ */ jsxs7(Text6, { dimColor: !focus.focused, children: [
     message,
-    " (",
-    hint,
-    ")"
+    " ",
+    /* @__PURE__ */ jsxs7(Text6, { dimColor: true, children: [
+      "(",
+      hint,
+      ")"
+    ] })
   ] });
 }
 
 // src/ui/Autocomplete.tsx
-import { useEffect as useEffect3, useMemo, useReducer as useReducer2, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect4, useMemo, useReducer as useReducer2, useRef as useRef3, 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) {
@@ -492,6 +545,7 @@ function Autocomplete({
   label,
   placeholder,
   filter = defaultFilter,
+  gap,
   maxVisible,
   paginatorStyle,
   wrap = true,
@@ -506,16 +560,17 @@ function Autocomplete({
     seen.add(key);
   }
   const focus = useFocus();
+  const theme = useTheme();
   const [query, setQuery] = useState5("");
   const [highlightIndex, setHighlightIndex] = useState5(0);
-  const cursorRef = useRef2(0);
+  const cursorRef = useRef3(0);
   const [, forceRender] = useReducer2((c) => c + 1, 0);
   const filtered = useMemo(
     () => query.length === 0 ? options : options.filter((opt) => filter(query, opt)),
     [options, query, filter]
   );
   const safeIndex = filtered.length === 0 ? -1 : Math.min(highlightIndex, filtered.length - 1);
-  useEffect3(() => {
+  useEffect4(() => {
     if (safeIndex >= 0 && safeIndex !== highlightIndex) {
       setHighlightIndex(safeIndex);
     }
@@ -590,15 +645,20 @@ function Autocomplete({
   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: [
+  return /* @__PURE__ */ jsxs8(Box6, { flexDirection: "column", gap: 1, children: [
     focus.focused ? /* @__PURE__ */ jsxs8(Text7, { children: [
-      prefix,
+      label != null && /* @__PURE__ */ jsxs8(Text7, { bold: true, children: [
+        label,
+        " "
+      ] }),
       before,
       /* @__PURE__ */ jsx7(Text7, { inverse: true, children: cursorChar }),
       after
     ] }) : /* @__PURE__ */ jsxs8(Text7, { dimColor: true, children: [
-      prefix,
+      label != null && /* @__PURE__ */ jsxs8(Text7, { children: [
+        label,
+        " "
+      ] }),
       query.length > 0 ? query : placeholder ?? ""
     ] }),
     /* @__PURE__ */ jsx7(
@@ -606,6 +666,7 @@ function Autocomplete({
       {
         items: filtered,
         highlightIndex: safeIndex,
+        gap,
         maxVisible,
         paginatorStyle,
         render: ({ item: option, index }) => {
@@ -614,11 +675,8 @@ function Autocomplete({
           if (render) {
             return render({ option, focused: focus.focused, highlighted, selected });
           }
-          return /* @__PURE__ */ jsxs8(Text7, { dimColor: !focus.focused, children: [
-            highlighted ? ">" : " ",
-            " ",
-            option.label
-          ] });
+          const active = highlighted && focus.focused;
+          return /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsx7(Text7, { dimColor: !focus.focused && !highlighted, children: /* @__PURE__ */ jsx7(Text7, { color: active ? theme.accentColor : void 0, bold: highlighted, children: option.label }) }) });
         }
       }
     )
@@ -629,7 +687,7 @@ function Autocomplete({
 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 }) {
+function Viewport({ items, maxVisible, showLineNumbers, gap, paginatorStyle, render }) {
   const focus = useFocus();
   const [scrollOffset, setScrollOffset] = useState6(0);
   const maxOffset = Math.max(0, items.length - maxVisible);
@@ -652,6 +710,7 @@ function Viewport({ items, maxVisible, showLineNumbers, paginatorStyle, render }
     {
       items,
       scrollOffset,
+      gap,
       maxVisible,
       paginatorStyle,
       render: ({ item, index }) => {

package/package.json

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