giggles 0.3.10 → 0.3.12

package/dist/chunk-4LEJFY5C.js

@@ -0,0 +1,56 @@
+// src/terminal/hooks/useTerminalFocus.ts
+import { useEffect, useRef } from "react";
+function useTerminalFocus(callback) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    const handler = (data) => {
+      const str = data.toString();
+      if (str.includes("\x1B[I")) callbackRef.current(true);
+      if (str.includes("\x1B[O")) callbackRef.current(false);
+    };
+    process.stdin.on("data", handler);
+    const timer = setTimeout(() => {
+      process.stdout.write("\x1B[?1004h");
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      process.stdout.write("\x1B[?1004l");
+      process.stdin.off("data", handler);
+    };
+  }, []);
+}
+
+// src/terminal/hooks/useShellout.ts
+import { execa } from "execa";
+import { useCallback, useState } from "react";
+import { useStdin } from "ink";
+function useShellOut() {
+  const [, setRedrawCount] = useState(0);
+  const { setRawMode } = useStdin();
+  const run = useCallback(
+    async (command) => {
+      process.stdout.write("\x1B[?1049l");
+      setRawMode(false);
+      try {
+        const result = await execa(command, { stdio: "inherit", shell: true, reject: false });
+        return { exitCode: result.exitCode ?? 0 };
+      } finally {
+        setRawMode(true);
+        process.stdout.write("\x1B[?1049h");
+        process.stdout.write("\x1B[2J");
+        process.stdout.write("\x1B[H");
+        setRedrawCount((c) => c + 1);
+      }
+    },
+    [setRawMode]
+  );
+  return {
+    run
+  };
+}
+
+export {
+  useTerminalFocus,
+  useShellOut
+};

package/dist/chunk-5BONVNP7.js

@@ -0,0 +1,49 @@
+// src/terminal/hooks/useTerminalSize.ts
+import { useEffect, useState } from "react";
+function useTerminalSize() {
+  const [size, setSize] = useState({
+    rows: process.stdout.rows,
+    columns: process.stdout.columns
+  });
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        rows: process.stdout.rows,
+        columns: process.stdout.columns
+      });
+    };
+    process.stdout.on("resize", handleResize);
+    return () => {
+      process.stdout.off("resize", handleResize);
+    };
+  }, []);
+  return size;
+}
+
+// src/terminal/components/AlternateScreen.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { Box } from "ink";
+import { Fragment, jsx } from "react/jsx-runtime";
+var _a;
+var isTTY = typeof process !== "undefined" && ((_a = process.stdout) == null ? void 0 : _a.write);
+function AlternateScreen({ children, fullScreen = true }) {
+  const [ready, setReady] = useState2(!isTTY);
+  const { rows, columns } = useTerminalSize();
+  useEffect2(() => {
+    if (!isTTY) return;
+    process.stdout.write("\x1B[?1049h");
+    process.stdout.write("\x1B[2J");
+    process.stdout.write("\x1B[H");
+    setReady(true);
+    return () => {
+      process.stdout.write("\x1B[?1049l");
+    };
+  }, []);
+  if (!ready) return null;
+  return fullScreen ? /* @__PURE__ */ jsx(Box, { height: rows, width: columns, children }) : /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+export {
+  useTerminalSize,
+  AlternateScreen
+};

package/dist/{chunk-WJRBHS5J.js → chunk-JTJH45JR.js}

@@ -3,8 +3,8 @@ import {
 } from "./chunk-EVD6YPS3.js";
 
 // src/ui/CodeBlock.tsx
-import Prism from "prismjs";
 import { Box, Text } from "ink";
+import Prism from "prismjs";
 import { jsx } from "react/jsx-runtime";
 var defaultTokenColors = {
   keyword: "#C678DD",
@@ -22,15 +22,12 @@ var defaultTokenColors = {
   inserted: "#98C379",
   deleted: "#E06C75"
 };
-function CodeBlock({ children, language, showBorder = true, tokenColors }) {
+function CodeBlock({ children, language, tokenColors, ...boxProps }) {
   const theme = useTheme();
   const colors = { ...defaultTokenColors, ...tokenColors };
   const grammar = language ? Prism.languages[language] : void 0;
   const content = grammar ? renderTokens(Prism.tokenize(children, grammar), colors) : /* @__PURE__ */ jsx(Text, { children });
-  if (!showBorder) {
-    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { children: content }) });
-  }
-  return /* @__PURE__ */ jsx(Box, { paddingX: 1, borderStyle: "single", borderColor: theme.borderColor, children: /* @__PURE__ */ jsx(Text, { children: content }) });
+  return /* @__PURE__ */ jsx(Box, { paddingX: 1, borderStyle: "round", borderColor: theme.borderColor, ...boxProps, children: /* @__PURE__ */ jsx(Text, { children: content }) });
 }
 function renderTokens(tokens, colors) {
   return tokens.map((token, idx) => {

package/dist/index.d.ts

@@ -30,9 +30,10 @@ declare function useTheme(): GigglesTheme;
 
 type GigglesProviderProps = {
     theme?: Partial<GigglesTheme>;
+    fullScreen?: boolean;
     children: React__default.ReactNode;
 };
-declare function GigglesProvider({ theme, children }: GigglesProviderProps): react_jsx_runtime.JSX.Element;
+declare function GigglesProvider({ theme, fullScreen, children }: GigglesProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function useKeybindings(focus: FocusHandle, bindings: Keybindings, options?: KeybindingOptions): void;
 

package/dist/index.js

@@ -1,6 +1,3 @@
-import {
-  AlternateScreen
-} from "./chunk-7PDVDYFB.js";
 import {
   FocusGroup,
   FocusNodeContext,
@@ -19,11 +16,14 @@ import {
   ThemeProvider,
   useTheme
 } from "./chunk-EVD6YPS3.js";
+import {
+  AlternateScreen
+} from "./chunk-5BONVNP7.js";
 
 // src/core/GigglesProvider.tsx
 import { jsx } from "react/jsx-runtime";
-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 }) }) }) }) });
+function GigglesProvider({ theme, fullScreen, children }) {
+  return /* @__PURE__ */ jsx(AlternateScreen, { fullScreen, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx(FocusProvider, { children: /* @__PURE__ */ jsx(InputProvider, { children: /* @__PURE__ */ jsx(InputRouter, { children }) }) }) }) });
 }
 
 // src/core/router/Router.tsx

package/dist/markdown/index.js

@@ -1,6 +1,6 @@
 import {
   CodeBlock
-} from "../chunk-WJRBHS5J.js";
+} from "../chunk-JTJH45JR.js";
 import {
   useTheme
 } from "../chunk-EVD6YPS3.js";

package/dist/terminal/index.d.ts

@@ -10,9 +10,11 @@ declare function useTerminalSize(): TerminalSize;
 
 declare function useTerminalFocus(callback: (focused: boolean) => void): void;
 
-declare function AlternateScreen({ children }: {
+type AlternateScreenProps = {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element | null;
+    fullScreen?: boolean;
+};
+declare function AlternateScreen({ children, fullScreen }: AlternateScreenProps): react_jsx_runtime.JSX.Element | null;
 
 declare function useShellOut(): {
     run: (command: string) => Promise<{

package/dist/terminal/index.js

@@ -1,80 +1,11 @@
 import {
-  AlternateScreen
-} from "../chunk-7PDVDYFB.js";
-
-// src/terminal/hooks/useTerminalSize.ts
-import { useEffect, useState } from "react";
-function useTerminalSize() {
-  const [size, setSize] = useState({
-    rows: process.stdout.rows,
-    columns: process.stdout.columns
-  });
-  useEffect(() => {
-    const handleResize = () => {
-      setSize({
-        rows: process.stdout.rows,
-        columns: process.stdout.columns
-      });
-    };
-    process.stdout.on("resize", handleResize);
-    return () => {
-      process.stdout.off("resize", handleResize);
-    };
-  }, []);
-  return size;
-}
-
-// src/terminal/hooks/useTerminalFocus.ts
-import { useEffect as useEffect2, useRef } from "react";
-function useTerminalFocus(callback) {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-  useEffect2(() => {
-    const handler = (data) => {
-      const str = data.toString();
-      if (str.includes("\x1B[I")) callbackRef.current(true);
-      if (str.includes("\x1B[O")) callbackRef.current(false);
-    };
-    process.stdin.on("data", handler);
-    const timer = setTimeout(() => {
-      process.stdout.write("\x1B[?1004h");
-    }, 0);
-    return () => {
-      clearTimeout(timer);
-      process.stdout.write("\x1B[?1004l");
-      process.stdin.off("data", handler);
-    };
-  }, []);
-}
-
-// src/terminal/hooks/useShellout.ts
-import { execa } from "execa";
-import { useCallback, useState as useState2 } from "react";
-import { useStdin } from "ink";
-function useShellOut() {
-  const [, setRedrawCount] = useState2(0);
-  const { setRawMode } = useStdin();
-  const run = useCallback(
-    async (command) => {
-      process.stdout.write("\x1B[?1049l");
-      setRawMode(false);
-      try {
-        const result = await execa(command, { stdio: "inherit", shell: true, reject: false });
-        return { exitCode: result.exitCode ?? 0 };
-      } finally {
-        setRawMode(true);
-        process.stdout.write("\x1B[?1049h");
-        process.stdout.write("\x1B[2J");
-        process.stdout.write("\x1B[H");
-        setRedrawCount((c) => c + 1);
-      }
-    },
-    [setRawMode]
-  );
-  return {
-    run
-  };
-}
+  useShellOut,
+  useTerminalFocus
+} from "../chunk-4LEJFY5C.js";
+import {
+  AlternateScreen,
+  useTerminalSize
+} from "../chunk-5BONVNP7.js";
 export {
   AlternateScreen,
   useShellOut,

package/dist/ui/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { R as RegisteredKeybinding } from '../types-Dmw9TKt4.js';
 import React__default from 'react';
-import 'ink';
+import { BoxProps } from 'ink';
 
 type CommandPaletteRenderProps = {
     query: string;
@@ -144,29 +144,30 @@ type VirtualListProps<T> = VirtualListBase<T> & ({
 });
 declare function VirtualList<T>({ items, highlightIndex, scrollOffset: controlledOffset, gap, maxVisible, paginatorStyle, render }: VirtualListProps<T>): react_jsx_runtime.JSX.Element;
 
-type ViewportRenderProps<T> = {
-    item: T;
-    index: number;
-    focused: boolean;
+type ViewportRef = {
+    scrollTo: (offset: number) => void;
+    scrollBy: (delta: number) => void;
+    scrollToTop: () => void;
+    scrollToBottom: () => void;
+    scrollToItem: (index: number) => void;
+    getScrollOffset: () => number;
+    getContentHeight: () => number;
+    getViewportHeight: () => number;
 };
-type ViewportProps<T> = {
-    items: T[];
-    maxVisible: number;
-    showLineNumbers?: boolean;
-    gap?: number;
-    paginatorStyle?: PaginatorStyle;
-    render?: (props: ViewportRenderProps<T>) => React__default.ReactNode;
+type ViewportProps = {
+    children?: React__default.ReactNode;
+    height: number;
+    keybindings?: boolean;
+    footer?: React__default.ReactNode;
 };
-declare function Viewport<T>({ items, maxVisible, showLineNumbers, gap, paginatorStyle, render }: ViewportProps<T>): react_jsx_runtime.JSX.Element;
+declare const Viewport: React__default.ForwardRefExoticComponent<ViewportProps & React__default.RefAttributes<ViewportRef>>;
 
-type BorderStyle = 'single' | 'double' | 'round' | 'bold' | 'singleDouble' | 'doubleSingle' | 'classic' | 'arrow';
-type ModalProps = {
+type ModalProps = Omit<BoxProps, 'children'> & {
     children: React__default.ReactNode;
     onClose: () => void;
     title?: string;
-    borderStyle?: BorderStyle;
 };
-declare function Modal({ children, onClose, title, borderStyle }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, onClose, title, ...boxProps }: ModalProps): react_jsx_runtime.JSX.Element;
 
 type BadgeVariant = 'round' | 'arrow' | 'plain';
 type BadgeProps = {
@@ -177,14 +178,12 @@ type BadgeProps = {
 };
 declare function Badge({ children, color, background, variant }: BadgeProps): react_jsx_runtime.JSX.Element;
 
-type PanelProps = {
+type PanelProps = Omit<BoxProps, 'children'> & {
     children: React__default.ReactNode;
     title?: string;
-    width?: number;
-    borderColor?: string;
     footer?: React__default.ReactNode;
 };
-declare function Panel({ children, title, width, borderColor, footer }: PanelProps): react_jsx_runtime.JSX.Element;
+declare function Panel({ children, title, width, borderColor, footer, ...boxProps }: PanelProps): react_jsx_runtime.JSX.Element;
 
 type TokenColors = {
     keyword: string;
@@ -202,12 +201,71 @@ type TokenColors = {
     inserted: string;
     deleted: string;
 };
-type CodeBlockProps = {
+type CodeBlockProps = Omit<BoxProps, 'children'> & {
     children: string;
     language?: string;
-    showBorder?: boolean;
     tokenColors?: Partial<TokenColors>;
 };
-declare function CodeBlock({ children, language, showBorder, tokenColors }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+declare function CodeBlock({ children, language, tokenColors, ...boxProps }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+type SpinnerDef = {
+    frames: string[];
+    interval: number;
+};
+declare const spinners: {
+    line: {
+        frames: string[];
+        interval: number;
+    };
+    dot: {
+        frames: string[];
+        interval: number;
+    };
+    miniDot: {
+        frames: string[];
+        interval: number;
+    };
+    jump: {
+        frames: string[];
+        interval: number;
+    };
+    pulse: {
+        frames: string[];
+        interval: number;
+    };
+    points: {
+        frames: string[];
+        interval: number;
+    };
+    clock: {
+        frames: string[];
+        interval: number;
+    };
+    hearts: {
+        frames: string[];
+        interval: number;
+    };
+    moon: {
+        frames: string[];
+        interval: number;
+    };
+    meter: {
+        frames: string[];
+        interval: number;
+    };
+    hamburger: {
+        frames: string[];
+        interval: number;
+    };
+    ellipsis: {
+        frames: string[];
+        interval: number;
+    };
+};
+type SpinnerProps = {
+    spinner?: SpinnerDef;
+    color?: string;
+};
+declare function Spinner({ spinner, color }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
-export { Autocomplete, type AutocompleteRenderProps, Badge, type BadgeProps, type BadgeVariant, CodeBlock, CommandPalette, type CommandPaletteRenderProps, Confirm, Modal, MultiSelect, type MultiSelectRenderProps, Paginator, type PaginatorStyle, Panel, type PanelProps, Select, type SelectOption, type SelectRenderProps, TextInput, type TextInputRenderProps, type TokenColors, Viewport, type ViewportRenderProps, VirtualList, type VirtualListRenderProps };
+export { Autocomplete, type AutocompleteRenderProps, Badge, type BadgeProps, type BadgeVariant, CodeBlock, CommandPalette, type CommandPaletteRenderProps, Confirm, Modal, MultiSelect, type MultiSelectRenderProps, Paginator, type PaginatorStyle, Panel, type PanelProps, Select, type SelectOption, type SelectRenderProps, Spinner, type SpinnerDef, TextInput, type TextInputRenderProps, type TokenColors, Viewport, type ViewportRef, VirtualList, type VirtualListRenderProps, spinners };

package/dist/ui/index.js

@@ -7,10 +7,14 @@ import {
 } from "../chunk-CKA5JJ4B.js";
 import {
   CodeBlock
-} from "../chunk-WJRBHS5J.js";
+} from "../chunk-JTJH45JR.js";
 import {
   useTheme
 } from "../chunk-EVD6YPS3.js";
+import "../chunk-4LEJFY5C.js";
+import {
+  useTerminalSize
+} from "../chunk-5BONVNP7.js";
 
 // src/ui/CommandPalette.tsx
 import { useState } from "react";
@@ -689,81 +693,166 @@ function Autocomplete({
 }
 
 // src/ui/Viewport.tsx
-import { useState as useState6 } from "react";
-import { Text as Text8 } from "ink";
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef as useRef4,
+  useState as useState6
+} from "react";
+import { Box as Box7, measureElement } from "ink";
 import { jsx as jsx8, jsxs as jsxs9 } from "react/jsx-runtime";
-function Viewport({ items, maxVisible, showLineNumbers, gap, paginatorStyle, render }) {
+function MeasurableItem({
+  children,
+  index,
+  onMeasure
+}) {
+  const ref = useRef4(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const { height } = measureElement(ref.current);
+      onMeasure(index, height);
+    }
+  }, [index, onMeasure, children]);
+  return /* @__PURE__ */ jsx8(Box7, { ref, flexShrink: 0, width: "100%", flexDirection: "column", children });
+}
+var Viewport = forwardRef(function Viewport2({ children, height, keybindings: enableKeybindings = true, footer }, ref) {
   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 contentHeightRef = useRef4(0);
+  const itemHeightsRef = useRef4({});
+  const itemKeysRef = useRef4([]);
+  const scrollOffsetRef = useRef4(0);
+  scrollOffsetRef.current = scrollOffset;
+  const childKeys = [];
+  Children.forEach(children, (child, index) => {
+    if (!child) return;
+    const key = isValidElement(child) ? child.key : null;
+    childKeys[index] = key !== null ? key : index;
   });
-  const gutterWidth = showLineNumbers ? String(items.length).length + 1 : 0;
-  return /* @__PURE__ */ jsx8(
-    VirtualList,
-    {
-      items,
-      scrollOffset,
-      gap,
-      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)
-        ] });
+  itemKeysRef.current = childKeys;
+  const getMaxOffset = useCallback(() => Math.max(0, contentHeightRef.current - height), [height]);
+  const clampAndSetOffset = useCallback(
+    (offset) => {
+      const clamped = Math.max(0, Math.min(offset, getMaxOffset()));
+      setScrollOffset(clamped);
+    },
+    [getMaxOffset]
+  );
+  const handleItemMeasure = useCallback(
+    (index, measuredHeight) => {
+      const key = itemKeysRef.current[index] ?? index;
+      if (itemHeightsRef.current[key] === measuredHeight) return;
+      itemHeightsRef.current[key] = measuredHeight;
+      let total = 0;
+      for (const k of itemKeysRef.current) {
+        total += itemHeightsRef.current[k] ?? 0;
+      }
+      contentHeightRef.current = total;
+      const maxOffset = Math.max(0, total - height);
+      if (scrollOffsetRef.current > maxOffset) {
+        setScrollOffset(maxOffset);
       }
+    },
+    [height]
+  );
+  const getItemTop = useCallback((index) => {
+    let top = 0;
+    for (let i = 0; i < index && i < itemKeysRef.current.length; i++) {
+      const key = itemKeysRef.current[i] ?? i;
+      top += itemHeightsRef.current[key] ?? 0;
     }
+    return top;
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollTo: (offset) => clampAndSetOffset(offset),
+      scrollBy: (delta) => clampAndSetOffset(scrollOffsetRef.current + delta),
+      scrollToTop: () => setScrollOffset(0),
+      scrollToBottom: () => setScrollOffset(getMaxOffset()),
+      scrollToItem: (index) => {
+        const itemTop = getItemTop(index);
+        const key = itemKeysRef.current[index] ?? index;
+        const itemHeight = itemHeightsRef.current[key] ?? 0;
+        const itemBottom = itemTop + itemHeight;
+        const current = scrollOffsetRef.current;
+        if (itemTop < current) {
+          clampAndSetOffset(itemTop);
+        } else if (itemBottom > current + height) {
+          clampAndSetOffset(itemBottom - height);
+        }
+      },
+      getScrollOffset: () => scrollOffsetRef.current,
+      getContentHeight: () => contentHeightRef.current,
+      getViewportHeight: () => height
+    }),
+    [clampAndSetOffset, getMaxOffset, getItemTop, height]
   );
-}
+  useKeybindings(
+    focus,
+    enableKeybindings ? {
+      j: () => clampAndSetOffset(scrollOffsetRef.current + 1),
+      k: () => clampAndSetOffset(scrollOffsetRef.current - 1),
+      down: () => clampAndSetOffset(scrollOffsetRef.current + 1),
+      up: () => clampAndSetOffset(scrollOffsetRef.current - 1),
+      pagedown: () => clampAndSetOffset(scrollOffsetRef.current + height),
+      pageup: () => clampAndSetOffset(scrollOffsetRef.current - height),
+      g: () => setScrollOffset(0),
+      G: () => setScrollOffset(getMaxOffset())
+    } : {}
+  );
+  return /* @__PURE__ */ jsxs9(Box7, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx8(Box7, { height, overflow: "hidden", children: /* @__PURE__ */ jsx8(Box7, { marginTop: -scrollOffset, flexDirection: "column", width: "100%", children: Children.map(children, (child, index) => {
+      if (!child) return null;
+      return /* @__PURE__ */ jsx8(
+        MeasurableItem,
+        {
+          index,
+          onMeasure: handleItemMeasure,
+          children: child
+        },
+        isValidElement(child) ? child.key ?? index : index
+      );
+    }) }) }),
+    footer
+  ] });
+});
 
 // src/ui/Modal.tsx
-import { Box as Box7, Text as Text9 } from "ink";
+import { Box as Box8, Text as Text8 } from "ink";
 import { jsx as jsx9, jsxs as jsxs10 } from "react/jsx-runtime";
-function ModalInner({ children, onClose, title, borderStyle = "round" }) {
+function ModalInner({ children, onClose, title, ...boxProps }) {
   const focus = useFocus();
   const theme = useTheme();
   useKeybindings(focus, {
     escape: onClose
   });
   return /* @__PURE__ */ jsxs10(
-    Box7,
+    Box8,
     {
       flexDirection: "column",
       alignSelf: "flex-start",
-      borderStyle,
+      borderStyle: "round",
       borderColor: theme.borderColor,
       paddingX: 1,
+      ...boxProps,
       children: [
-        title != null && /* @__PURE__ */ jsx9(Text9, { bold: true, children: title }),
+        title != null && /* @__PURE__ */ jsx9(Text8, { bold: true, children: title }),
         children
       ]
     }
   );
 }
-function Modal({ children, onClose, title, borderStyle }) {
-  return /* @__PURE__ */ jsx9(FocusTrap, { children: /* @__PURE__ */ jsx9(ModalInner, { onClose, title, borderStyle, children }) });
+function Modal({ children, onClose, title, ...boxProps }) {
+  return /* @__PURE__ */ jsx9(FocusTrap, { children: /* @__PURE__ */ jsx9(ModalInner, { onClose, title, ...boxProps, children }) });
 }
 
 // src/ui/Badge.tsx
-import { Text as Text10 } from "ink";
+import { Text as Text9 } from "ink";
 import { jsx as jsx10, jsxs as jsxs11 } from "react/jsx-runtime";
 var glyphs = {
   round: ["\uE0B6", "\uE0B4"],
@@ -776,26 +865,32 @@ function Badge({ children, color, background, variant = "round" }) {
   const fg = color ?? "#000000";
   const [left, right] = glyphs[variant];
   const label = variant === "plain" ? ` ${children} ` : children;
-  return /* @__PURE__ */ jsxs11(Text10, { children: [
-    left && /* @__PURE__ */ jsx10(Text10, { color: bg, children: left }),
-    /* @__PURE__ */ jsx10(Text10, { color: fg, backgroundColor: bg, bold: true, children: label }),
-    right && /* @__PURE__ */ jsx10(Text10, { color: bg, children: right })
+  return /* @__PURE__ */ jsxs11(Text9, { children: [
+    left && /* @__PURE__ */ jsx10(Text9, { color: bg, children: left }),
+    /* @__PURE__ */ jsx10(Text9, { color: fg, backgroundColor: bg, bold: true, children: label }),
+    right && /* @__PURE__ */ jsx10(Text9, { color: bg, children: right })
   ] });
 }
 
 // src/ui/Panel.tsx
 import { useState as useState7 } from "react";
-import { Box as Box8, Text as Text11, measureElement } from "ink";
+import { Box as Box9, Text as Text10, measureElement as measureElement2 } from "ink";
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs12 } from "react/jsx-runtime";
-function Panel({ children, title, width, borderColor, footer }) {
+function parsePercentage(value, total) {
+  const pct = parseFloat(value);
+  return isNaN(pct) ? 0 : Math.floor(pct / 100 * total);
+}
+function Panel({ children, title, width, borderColor, footer, ...boxProps }) {
   const theme = useTheme();
+  const { columns } = useTerminalSize();
   const color = borderColor ?? theme.borderColor;
-  const [measuredWidth, setMeasuredWidth] = useState7(width ?? 0);
-  const effectiveWidth = width ?? measuredWidth;
+  const initialWidth = typeof width === "number" ? width : typeof width === "string" && width.endsWith("%") ? parsePercentage(width, columns) : 0;
+  const [measuredWidth, setMeasuredWidth] = useState7(initialWidth);
+  const effectiveWidth = typeof width === "number" ? width : measuredWidth;
   const renderTopBorder = () => {
     if (effectiveWidth === 0) return null;
     if (title == null) {
-      return /* @__PURE__ */ jsxs12(Text11, { color, children: [
+      return /* @__PURE__ */ jsxs12(Text10, { color, children: [
         "\u256D",
         "\u2500".repeat(Math.max(0, effectiveWidth - 2)),
         "\u256E"
@@ -805,10 +900,10 @@ function Panel({ children, title, width, borderColor, footer }) {
     const displayTitle = title.length > maxTitleWidth ? title.slice(0, maxTitleWidth - 1) + "\u2026" : title;
     const titlePart = `\u256D ${displayTitle} `;
     const totalDashes = Math.max(1, effectiveWidth - titlePart.length - 1);
-    return /* @__PURE__ */ jsxs12(Text11, { children: [
-      /* @__PURE__ */ jsx11(Text11, { color, children: "\u256D " }),
-      /* @__PURE__ */ jsx11(Text11, { color, bold: true, children: displayTitle }),
-      /* @__PURE__ */ jsxs12(Text11, { color, children: [
+    return /* @__PURE__ */ jsxs12(Text10, { children: [
+      /* @__PURE__ */ jsx11(Text10, { color, children: "\u256D " }),
+      /* @__PURE__ */ jsx11(Text10, { color, bold: true, children: displayTitle }),
+      /* @__PURE__ */ jsxs12(Text10, { color, children: [
         " ",
         "\u2500".repeat(totalDashes),
         "\u256E"
@@ -816,27 +911,59 @@ function Panel({ children, title, width, borderColor, footer }) {
     ] });
   };
   return /* @__PURE__ */ jsxs12(
-    Box8,
+    Box9,
     {
       flexDirection: "column",
       width,
       flexGrow: width == null ? 1 : void 0,
       ref: (node) => {
         if (node) {
-          const { width: w } = measureElement(node);
-          if (w !== measuredWidth) setMeasuredWidth(w);
+          const { width: w } = measureElement2(node);
+          if (w > 0 && w !== measuredWidth) setMeasuredWidth(w);
         }
       },
+      ...boxProps,
       children: [
         renderTopBorder(),
-        /* @__PURE__ */ jsx11(Box8, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderTop: false, borderColor: color, paddingX: 1, children: footer ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
-          /* @__PURE__ */ jsx11(Box8, { flexDirection: "column", flexGrow: 1, children }),
+        /* @__PURE__ */ jsx11(Box9, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderTop: false, borderColor: color, paddingX: 1, children: footer ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
+          /* @__PURE__ */ jsx11(Box9, { flexDirection: "column", flexGrow: 1, children }),
           footer
         ] }) : children })
       ]
     }
   );
 }
+
+// src/ui/Spinner.tsx
+import { useEffect as useEffect5, useState as useState8 } from "react";
+import { Text as Text11 } from "ink";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var spinners = {
+  line: { frames: ["-", "\\", "|", "/"], interval: 130 },
+  dot: { frames: ["\u28FE", "\u28FD", "\u28FB", "\u28BF", "\u287F", "\u28DF", "\u28EF", "\u28F7"], interval: 130 },
+  miniDot: { frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"], interval: 80 },
+  jump: { frames: ["\u2884", "\u2882", "\u2881", "\u2841", "\u2848", "\u2850", "\u2860"], interval: 100 },
+  pulse: { frames: ["\u2588", "\u2593", "\u2592", "\u2591"], interval: 120 },
+  points: { frames: ["\u2219\u2219\u2219", "\u25CF\u2219\u2219", "\u2219\u25CF\u2219", "\u2219\u2219\u25CF"], interval: 200 },
+  clock: { frames: ["\u{1F55B}", "\u{1F550}", "\u{1F551}", "\u{1F552}", "\u{1F553}", "\u{1F554}", "\u{1F555}", "\u{1F556}", "\u{1F557}", "\u{1F558}", "\u{1F559}", "\u{1F55A}"], interval: 100 },
+  hearts: { frames: ["\u2764\uFE0F", "\u{1F9E1}", "\u{1F49B}", "\u{1F49A}", "\u{1F499}", "\u{1F49C}"], interval: 120 },
+  moon: { frames: ["\u{1F311}", "\u{1F312}", "\u{1F313}", "\u{1F314}", "\u{1F315}", "\u{1F316}", "\u{1F317}", "\u{1F318}"], interval: 180 },
+  meter: { frames: ["\u25B1\u25B1\u25B1", "\u25B0\u25B1\u25B1", "\u25B0\u25B0\u25B1", "\u25B0\u25B0\u25B0", "\u25B0\u25B0\u25B1", "\u25B0\u25B1\u25B1", "\u25B1\u25B1\u25B1"], interval: 100 },
+  hamburger: { frames: ["\u2631", "\u2632", "\u2634"], interval: 100 },
+  ellipsis: { frames: [".  ", ".. ", "...", "   "], interval: 300 }
+};
+function Spinner({ spinner = spinners.line, color }) {
+  const theme = useTheme();
+  const [frame, setFrame] = useState8(0);
+  useEffect5(() => {
+    setFrame(0);
+    const id = setInterval(() => {
+      setFrame((f) => (f + 1) % spinner.frames.length);
+    }, spinner.interval);
+    return () => clearInterval(id);
+  }, [spinner]);
+  return /* @__PURE__ */ jsx12(Text11, { color: color ?? theme.accentColor, children: spinner.frames[frame] });
+}
 export {
   Autocomplete,
   Badge,
@@ -848,7 +975,9 @@ export {
   Paginator,
   Panel,
   Select,
+  Spinner,
   TextInput,
   Viewport,
-  VirtualList
+  VirtualList,
+  spinners
 };

package/package.json

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

package/dist/chunk-7PDVDYFB.js

@@ -1,23 +0,0 @@
-// src/terminal/components/AlternateScreen.tsx
-import { useEffect, useState } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var _a;
-var isTTY = typeof process !== "undefined" && ((_a = process.stdout) == null ? void 0 : _a.write);
-function AlternateScreen({ children }) {
-  const [ready, setReady] = useState(!isTTY);
-  useEffect(() => {
-    if (!isTTY) return;
-    process.stdout.write("\x1B[?1049h");
-    process.stdout.write("\x1B[2J");
-    process.stdout.write("\x1B[H");
-    setReady(true);
-    return () => {
-      process.stdout.write("\x1B[?1049l");
-    };
-  }, []);
-  return ready ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
-}
-
-export {
-  AlternateScreen
-};