giggles 0.3.4 → 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,6 +1,6 @@
 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 CommandPaletteRenderProps = {
@@ -10,10 +10,11 @@ type CommandPaletteRenderProps = {
     onSelect: (cmd: RegisteredKeybinding) => void;
 };
 type CommandPaletteProps = {
-    onClose: () => void;
-    render?: (props: CommandPaletteRenderProps) => React__default.ReactNode;
+    onClose?: () => void;
+    interactive?: boolean;
+    render?: (props: CommandPaletteRenderProps) => React.ReactNode;
 };
-declare function CommandPalette({ onClose, render }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
+declare function CommandPalette({ onClose, interactive, render }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
 
 type TextInputRenderProps = {
     value: string;
@@ -32,16 +33,17 @@ type TextInputProps = {
 };
 declare function TextInput({ label, value, onChange, onSubmit, placeholder, render }: TextInputProps): react_jsx_runtime.JSX.Element;
 
-type PaginatorStyle = 'arrows' | 'scrollbar' | 'counter';
+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, style, position }: PaginatorProps): react_jsx_runtime.JSX.Element | null;
+declare function Paginator({ total, offset, visible, gap, style, position }: PaginatorProps): react_jsx_runtime.JSX.Element | null;
 
 type SelectOption<T> = {
     label: string;
@@ -62,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>;
@@ -83,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;
@@ -112,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;
@@ -125,6 +130,7 @@ type VirtualListRenderProps<T> = {
 };
 type VirtualListBase<T> = {
     items: T[];
+    gap?: number;
     maxVisible?: number;
     paginatorStyle?: PaginatorStyle;
     render: (props: VirtualListRenderProps<T>) => React__default.ReactNode;
@@ -136,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;
@@ -147,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,8 +3,9 @@ import {
   GigglesError,
   useFocus,
   useKeybindingRegistry,
-  useKeybindings
-} from "../chunk-OYQZHF73.js";
+  useKeybindings,
+  useTheme
+} from "../chunk-FEQYHTG7.js";
 
 // src/ui/CommandPalette.tsx
 import { useState } from "react";
@@ -44,10 +45,12 @@ function fuzzyMatch(name, query) {
 }
 function Inner({ onClose, render }) {
   const focus = useFocus();
+  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);
@@ -61,8 +64,8 @@ function Inner({ onClose, 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);
@@ -81,20 +84,48 @@ function Inner({ onClose, render }) {
   if (render) {
     return /* @__PURE__ */ jsx(Fragment, { children: render({ query, filtered, selectedIndex: clampedIndex, onSelect }) });
   }
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", width: 40, children: [
-    /* @__PURE__ */ jsxs(Box, { paddingX: 1, 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__ */ jsx(Box, { flexDirection: "column", children: filtered.length === 0 ? /* @__PURE__ */ jsx(Box, { paddingX: 1, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "No commands found" }) }) : filtered.map((cmd, i) => /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", paddingX: 1, children: [
-      /* @__PURE__ */ jsx(Text, { inverse: i === clampedIndex, children: cmd.name }),
-      /* @__PURE__ */ jsx(Text, { 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, render }) {
-  return /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(Inner, { onClose, 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
@@ -161,41 +192,57 @@ function TextInput({ label, value, onChange, onSubmit, placeholder, render }) {
   }
   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,
+      label != null && /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
+        label,
+        " "
+      ] }),
       before,
       /* @__PURE__ */ jsx2(Text2, { inverse: true, children: cursorChar }),
       after
     ] });
   }
-  return /* @__PURE__ */ jsxs2(Text2, { children: [
-    prefix,
-    /* @__PURE__ */ jsx2(Text2, { 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, { 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 React3, { useState as useState2 } from "react";
+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, style = "arrows", position }) {
-  if (total <= visible) return null;
+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, { dimColor: true, children: "\u2191" });
-    if (position === "below" && hasBelow) return /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "\u2193" });
+    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: [
@@ -206,13 +253,14 @@ function Paginator({ total, offset, visible, style = "arrows", position }) {
       total
     ] });
   }
-  const thumbSize = Math.max(1, Math.round(visible / total * visible));
-  const maxThumbOffset = visible - thumbSize;
+  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: visible }, (_, i) => {
+  return /* @__PURE__ */ jsx3(Box2, { flexDirection: "column", children: Array.from({ length: totalLines }, (_, i) => {
     const isThumb = i >= thumbOffset && i < thumbOffset + thumbSize;
-    return /* @__PURE__ */ jsx3(Text3, { dimColor: !isThumb, children: isThumb ? "\u2588" : "\u2502" }, i);
+    return /* @__PURE__ */ jsx3(Text3, { color: isThumb ? theme.accentColor : void 0, dimColor: !isThumb, children: isThumb ? "\u2588" : "\u2502" }, i);
   }) });
 }
 
@@ -222,52 +270,61 @@ function VirtualList({
   items,
   highlightIndex,
   scrollOffset: controlledOffset,
+  gap = 0,
   maxVisible,
-  paginatorStyle = "arrows",
+  paginatorStyle = "dots",
   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;
+  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;
+        }
       }
     }
-    if (offset !== internalOffset) {
-      setInternalOffset(offset);
+  }
+  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", children: visible.map((item, i) => {
+      /* @__PURE__ */ jsx4(Box3, { flexDirection: "column", gap, flexGrow: 1, children: visible.map((item, i) => {
         const index = offset + i;
-        return /* @__PURE__ */ jsx4(React3.Fragment, { children: render({ item, index }) }, index);
+        return /* @__PURE__ */ jsx4(React2.Fragment, { children: render({ item, index }) }, index);
       }) }),
       /* @__PURE__ */ jsx4(Paginator, { ...paginatorProps })
     ] });
   }
-  return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", children: [
+  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(React3.Fragment, { children: render({ item, index }) }, index);
+      return /* @__PURE__ */ jsx4(React2.Fragment, { children: render({ item, index }) }, index);
     }),
     /* @__PURE__ */ jsx4(Paginator, { ...paginatorProps, position: "below" })
   ] });
@@ -284,6 +341,7 @@ function Select({
   label,
   immediate,
   direction = "vertical",
+  gap,
   maxVisible,
   paginatorStyle,
   wrap = true,
@@ -298,11 +356,14 @@ 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);
-  if (safeIndex !== highlightIndex) {
-    setHighlightIndex(Math.max(0, safeIndex));
-  }
+  useEffect2(() => {
+    if (safeIndex !== highlightIndex) {
+      setHighlightIndex(Math.max(0, safeIndex));
+    }
+  }, [safeIndex, highlightIndex]);
   const moveHighlight = (delta) => {
     if (options.length === 0) return;
     const next2 = wrap ? (safeIndex + delta + options.length) % options.length : Math.max(0, Math.min(options.length - 1, safeIndex + delta));
@@ -336,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
@@ -358,7 +417,7 @@ function Select({
 }
 
 // src/ui/MultiSelect.tsx
-import React5, { 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({
@@ -369,6 +428,7 @@ function MultiSelect({
   onHighlight,
   label,
   direction = "vertical",
+  gap,
   maxVisible,
   paginatorStyle,
   wrap = true,
@@ -383,11 +443,14 @@ 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);
-  if (safeIndex !== highlightIndex) {
-    setHighlightIndex(Math.max(0, safeIndex));
-  }
+  useEffect3(() => {
+    if (safeIndex !== highlightIndex) {
+      setHighlightIndex(Math.max(0, safeIndex));
+    }
+  }, [safeIndex, highlightIndex]);
   const moveHighlight = (delta) => {
     if (options.length === 0) return;
     const next2 = wrap ? (safeIndex + delta + options.length) % options.length : Math.max(0, Math.min(options.length - 1, safeIndex + delta));
@@ -417,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
@@ -453,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 { 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) {
@@ -479,6 +545,7 @@ function Autocomplete({
   label,
   placeholder,
   filter = defaultFilter,
+  gap,
   maxVisible,
   paginatorStyle,
   wrap = true,
@@ -493,15 +560,21 @@ 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 = query.length === 0 ? options : options.filter((opt) => filter(query, opt));
+  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);
-  if (safeIndex >= 0 && safeIndex !== highlightIndex) {
-    setHighlightIndex(safeIndex);
-  }
+  useEffect4(() => {
+    if (safeIndex >= 0 && safeIndex !== highlightIndex) {
+      setHighlightIndex(safeIndex);
+    }
+  }, [safeIndex, highlightIndex]);
   const cursor = Math.min(cursorRef.current, query.length);
   cursorRef.current = cursor;
   const moveHighlight = (delta) => {
@@ -572,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(
@@ -588,6 +666,7 @@ function Autocomplete({
       {
         items: filtered,
         highlightIndex: safeIndex,
+        gap,
         maxVisible,
         paginatorStyle,
         render: ({ item: option, index }) => {
@@ -596,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 }) }) });
         }
       }
     )
@@ -611,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);
@@ -634,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.4",
+  "version": "0.3.6",
   "license": "MIT",
   "repository": {
     "type": "git",