giggles 0.3.9 → 0.3.11

package/dist/{chunk-PVXJL6SX.js → chunk-EVD6YPS3.js}

@@ -9,9 +9,9 @@ var defaultTheme = {
   hintDimColor: "#5C5C5C",
   hintHighlightColor: "#D4D4D4",
   hintHighlightDimColor: "#A0A0A0",
-  indicator: "\u25B8",
-  checkedIndicator: "\u2713",
-  uncheckedIndicator: "\u25CB"
+  indicator: "\u25B6",
+  checkedIndicator: "\u25A3",
+  uncheckedIndicator: "\u25FB"
 };
 var ThemeContext = createContext(defaultTheme);
 function ThemeProvider({ theme, children }) {

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

@@ -1,6 +1,6 @@
 import {
   useTheme
-} from "./chunk-PVXJL6SX.js";
+} from "./chunk-EVD6YPS3.js";
 
 // src/ui/CodeBlock.tsx
 import Prism from "prismjs";
@@ -16,6 +16,9 @@ var defaultTokenColors = {
   punctuation: "#ABB2BF",
   builtin: "#E5C07B",
   className: "#E5C07B",
+  variable: "#E06C75",
+  property: "#E06C75",
+  regex: "#98C379",
   inserted: "#98C379",
   deleted: "#E06C75"
 };
@@ -72,9 +75,31 @@ function getTokenColor(type, colors) {
       return colors.builtin;
     case "class-name":
     case "maybe-class-name":
+    case "namespace":
       return colors.className;
+    case "variable":
+      return colors.variable;
+    case "property":
+    case "string-property":
+      return colors.property;
+    case "regex":
+    case "regex-source":
+    case "regex-delimiter":
+    case "regex-flags":
+      return colors.regex;
+    case "url":
+      return colors.string;
     case "attr-name":
       return colors.function;
+    case "entity":
+      return colors.builtin;
+    case "atrule":
+      return colors.keyword;
+    case "selector":
+      return colors.className;
+    case "bold":
+    case "italic":
+      return colors.keyword;
     case "inserted-sign":
     case "inserted":
       return colors.inserted;

package/dist/index.js

@@ -18,7 +18,7 @@ import {
 import {
   ThemeProvider,
   useTheme
-} from "./chunk-PVXJL6SX.js";
+} from "./chunk-EVD6YPS3.js";
 
 // src/core/GigglesProvider.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/markdown/index.js

@@ -1,9 +1,9 @@
 import {
   CodeBlock
-} from "../chunk-TFYBLNEZ.js";
+} from "../chunk-WJRBHS5J.js";
 import {
   useTheme
-} from "../chunk-PVXJL6SX.js";
+} from "../chunk-EVD6YPS3.js";
 
 // src/ui/Markdown.tsx
 import Table from "cli-table3";

package/dist/ui/index.d.ts

@@ -144,20 +144,23 @@ 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 = {
@@ -196,6 +199,9 @@ type TokenColors = {
     punctuation: string;
     builtin: string;
     className: string;
+    variable: string;
+    property: string;
+    regex: string;
     inserted: string;
     deleted: string;
 };
@@ -207,4 +213,64 @@ type CodeBlockProps = {
 };
 declare function CodeBlock({ children, language, showBorder, tokenColors }: CodeBlockProps): 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 };
+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, Spinner, type SpinnerDef, TextInput, type TextInputRenderProps, type TokenColors, Viewport, type ViewportRef, VirtualList, type VirtualListRenderProps, spinners };

package/dist/ui/index.js

@@ -7,10 +7,10 @@ import {
 } from "../chunk-CKA5JJ4B.js";
 import {
   CodeBlock
-} from "../chunk-TFYBLNEZ.js";
+} from "../chunk-WJRBHS5J.js";
 import {
   useTheme
-} from "../chunk-PVXJL6SX.js";
+} from "../chunk-EVD6YPS3.js";
 
 // src/ui/CommandPalette.tsx
 import { useState } from "react";
@@ -689,53 +689,137 @@ 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" }) {
   const focus = useFocus();
@@ -744,7 +828,7 @@ function ModalInner({ children, onClose, title, borderStyle = "round" }) {
     escape: onClose
   });
   return /* @__PURE__ */ jsxs10(
-    Box7,
+    Box8,
     {
       flexDirection: "column",
       alignSelf: "flex-start",
@@ -752,7 +836,7 @@ function ModalInner({ children, onClose, title, borderStyle = "round" }) {
       borderColor: theme.borderColor,
       paddingX: 1,
       children: [
-        title != null && /* @__PURE__ */ jsx9(Text9, { bold: true, children: title }),
+        title != null && /* @__PURE__ */ jsx9(Text8, { bold: true, children: title }),
         children
       ]
     }
@@ -763,7 +847,7 @@ function Modal({ children, onClose, title, borderStyle }) {
 }
 
 // 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,16 +860,16 @@ 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 }) {
   const theme = useTheme();
@@ -795,7 +879,7 @@ function Panel({ children, title, width, borderColor, footer }) {
   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 +889,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 +900,58 @@ 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);
+          const { width: w } = measureElement2(node);
           if (w !== measuredWidth) setMeasuredWidth(w);
         }
       },
       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 +963,9 @@ export {
   Paginator,
   Panel,
   Select,
+  Spinner,
   TextInput,
   Viewport,
-  VirtualList
+  VirtualList,
+  spinners
 };

package/package.json

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