giggles 0.3.16 → 0.4.0

package/README.md

@@ -14,11 +14,11 @@ inspired by the [charmbracelet](https://github.com/charmbracelet) ecosystem, it
 
 - no `useInput` hooks scattered across your app — focus, input routing, and keyboard navigation are handled for you
 - navigate between views with a simple API; the previously focused component is restored when you return
-- a full set of hooks and components — `useFocus`, `FocusGroup`, `FocusTrap`, `useNavigation`, and more — for building any interaction pattern without reimplementing the plumbing
+- a full set of hooks and components — `useFocus`, `useFocusNode`, `FocusGroup`, `FocusTrap`, `useNavigation`, and more — for building any interaction pattern without reimplementing the plumbing
 - built-in keybinding registry so your app can always show users what keys do what, in the current context — context-aware and accessible via a hook
 - a component library covering most TUI use cases, from text inputs and autocomplete to virtual lists for large datasets — with sensible defaults and render props for full customization
 - render markdown in the terminal, with full formatting and syntax-highlighted code block and diff support
-- hand off terminal control to external programs like `vim` or `less` and reclaim it cleanly when they exit (similar to `tea.ExecProcess` from charmbracelet/bubbletea)
+- hand off terminal control to external programs like `vim` or `less` and reclaim it cleanly when they exit, or spawn processes and stream their output directly into your UI
 - a consistent look out of the box, customizable from a single theme object
 
 ## your first TUI

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

@@ -1,6 +1,6 @@
 import {
   useTheme
-} from "./chunk-EVD6YPS3.js";
+} from "./chunk-R5I4YOOP.js";
 
 // src/ui/CodeBlock.tsx
 import { Box, Text } from "ink";

package/dist/{chunk-CKA5JJ4B.js → chunk-ET2WSMEF.js}

@@ -104,6 +104,7 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var FocusContext = createContext2(null);
 var FocusProvider = ({ children }) => {
   const nodesRef = useRef2(/* @__PURE__ */ new Map());
+  const parentMapRef = useRef2(/* @__PURE__ */ new Map());
   const pendingFocusFirstChildRef = useRef2(/* @__PURE__ */ new Set());
   const [focusedId, setFocusedId] = useState(null);
   const focusNode = useCallback2((id) => {
@@ -141,6 +142,7 @@ var FocusProvider = ({ children }) => {
         childrenIds: []
       };
       nodes.set(id, node);
+      parentMapRef.current.set(id, parentId);
       if (parentId) {
         const parent = nodes.get(parentId);
         if (parent && !parent.childrenIds.includes(id)) {
@@ -177,12 +179,25 @@ var FocusProvider = ({ children }) => {
     pendingFocusFirstChildRef.current.delete(id);
     setFocusedId((current) => {
       if (current !== id) return current;
-      return node.parentId ?? null;
+      let candidate = node.parentId;
+      while (candidate !== null) {
+        if (nodesRef.current.has(candidate)) return candidate;
+        candidate = parentMapRef.current.get(candidate) ?? null;
+      }
+      return null;
     });
   }, []);
   const isFocused = useCallback2(
     (id) => {
-      return id === focusedId;
+      if (!focusedId) return false;
+      const nodes = nodesRef.current;
+      let cursor = focusedId;
+      while (cursor) {
+        if (cursor === id) return true;
+        const node = nodes.get(cursor);
+        cursor = (node == null ? void 0 : node.parentId) ?? null;
+      }
+      return false;
     },
     [focusedId]
   );
@@ -220,7 +235,16 @@ var FocusProvider = ({ children }) => {
           }
           cursor = (node == null ? void 0 : node.parentId) ?? null;
         }
-        if (!currentChildId) return;
+        if (!currentChildId) {
+          const targetId2 = direction === "next" ? siblings[0] : siblings[siblings.length - 1];
+          const target2 = nodes.get(targetId2);
+          if (target2 && target2.childrenIds.length > 0) {
+            focusFirstChild(targetId2);
+          } else {
+            focusNode(targetId2);
+          }
+          return;
+        }
       } else {
         const currentNode = nodes.get(focusedId);
         if (!(currentNode == null ? void 0 : currentNode.parentId)) return;
@@ -372,9 +396,9 @@ function InputRouter({ children }) {
 import { createContext as createContext3 } from "react";
 var FocusBindContext = createContext3(null);
 
-// src/core/focus/useFocus.ts
+// src/core/focus/useFocusNode.ts
 import { useContext as useContext3, useEffect as useEffect2, useId } from "react";
-var useFocus = (id) => {
+var useFocusNode = (id) => {
   const nodeId = useId();
   const parentId = useContext3(FocusNodeContext);
   const bindContext = useContext3(FocusBindContext);
@@ -400,15 +424,8 @@ var useFocus = (id) => {
 
 // src/core/focus/FocusGroup.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-function FocusGroup({
-  children,
-  direction = "vertical",
-  value,
-  wrap = true,
-  navigable = true,
-  keybindings: customBindings
-}) {
-  const focus = useFocus();
+function FocusGroup({ children, value, wrap = true, keybindings: customBindings }) {
+  const focus = useFocusNode();
   const { focusNode, navigateSibling } = useFocusContext();
   const bindMapRef = useRef3(/* @__PURE__ */ new Map());
   const register = useCallback3((logicalId, nodeId) => {
@@ -429,31 +446,35 @@ function FocusGroup({
     }
   }, [value, focusNode]);
   const bindContextValue = useMemo(() => value ? { register, unregister } : null, [value, register, unregister]);
-  const navigationKeys = useMemo(() => {
-    if (!navigable) return {};
-    const next = () => navigateSibling("next", wrap, focus.id);
-    const prev = () => navigateSibling("prev", wrap, focus.id);
-    const base = direction === "vertical" ? {
-      j: next,
-      k: prev,
-      down: next,
-      up: prev
-    } : {
-      l: next,
-      h: prev,
-      right: next,
-      left: prev
-    };
-    return { ...base, tab: next, "shift+tab": prev };
-  }, [navigable, direction, wrap, navigateSibling, focus.id]);
-  const mergedBindings = useMemo(
-    () => ({ ...navigationKeys, ...customBindings }),
-    [navigationKeys, customBindings]
-  );
-  useKeybindings(focus, mergedBindings);
+  const next = useCallback3(() => navigateSibling("next", wrap, focus.id), [navigateSibling, wrap, focus.id]);
+  const prev = useCallback3(() => navigateSibling("prev", wrap, focus.id), [navigateSibling, wrap, focus.id]);
+  const escape = useCallback3(() => focusNode(focus.id), [focusNode, focus.id]);
+  const resolvedBindings = useMemo(() => {
+    if (typeof customBindings === "function") {
+      return customBindings({ next, prev, escape });
+    }
+    return customBindings ?? {};
+  }, [customBindings, next, prev, escape]);
+  useKeybindings(focus, resolvedBindings);
   return /* @__PURE__ */ jsx4(FocusNodeContext.Provider, { value: focus.id, children: /* @__PURE__ */ jsx4(FocusBindContext.Provider, { value: bindContextValue, children }) });
 }
 
+// src/core/focus/useFocus.ts
+import { useContext as useContext4 } from "react";
+var useFocus = () => {
+  const parentId = useContext4(FocusNodeContext);
+  const { focusNode, isFocused } = useFocusContext();
+  if (parentId === null) {
+    return { id: "", focused: false, focus: () => {
+    } };
+  }
+  return {
+    id: parentId,
+    focused: isFocused(parentId),
+    focus: () => focusNode(parentId)
+  };
+};
+
 // src/core/focus/useFocusState.ts
 import { useState as useState2 } from "react";
 function useFocusState(initial) {
@@ -464,7 +485,7 @@ function useFocusState(initial) {
 // src/core/input/FocusTrap.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 function FocusTrap({ children }) {
-  const { id } = useFocus();
+  const { id } = useFocusNode();
   const { setTrap, clearTrap } = useInputContext();
   const { focusFirstChild, getFocusedId, focusNode } = useFocusContext();
   const previousFocusRef = useRef4(getFocusedId());
@@ -492,7 +513,8 @@ export {
   useKeybindings,
   useKeybindingRegistry,
   FocusTrap,
-  useFocus,
+  useFocusNode,
   FocusGroup,
+  useFocus,
   useFocusState
 };

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

@@ -10,6 +10,7 @@ var defaultTheme = {
   hintHighlightColor: "#D4D4D4",
   hintHighlightDimColor: "#A0A0A0",
   indicator: "\u25B6",
+  indicatorOpen: "\u25BC",
   checkedIndicator: "\u25A3",
   uncheckedIndicator: "\u25FB"
 };

package/dist/index.d.ts

@@ -18,6 +18,7 @@ type GigglesTheme = {
     hintHighlightColor: string;
     hintHighlightDimColor: string;
     indicator: string;
+    indicatorOpen: string;
     checkedIndicator: string;
     uncheckedIndicator: string;
 };
@@ -49,15 +50,18 @@ type FocusTrapProps = {
 };
 declare function FocusTrap({ children }: FocusTrapProps): react_jsx_runtime.JSX.Element;
 
+type FocusGroupHelpers = {
+    next: () => void;
+    prev: () => void;
+    escape: () => void;
+};
 type FocusGroupProps = {
     children: React__default.ReactNode;
-    direction?: 'vertical' | 'horizontal';
     value?: string;
     wrap?: boolean;
-    navigable?: boolean;
-    keybindings?: Keybindings;
+    keybindings?: Keybindings | ((helpers: FocusGroupHelpers) => Keybindings);
 };
-declare function FocusGroup({ children, direction, value, wrap, navigable, keybindings: customBindings }: FocusGroupProps): react_jsx_runtime.JSX.Element;
+declare function FocusGroup({ children, value, wrap, keybindings: customBindings }: FocusGroupProps): react_jsx_runtime.JSX.Element;
 
 type FocusHandle = {
     id: string;
@@ -65,7 +69,9 @@ type FocusHandle = {
     focus: () => void;
 };
 
-declare const useFocus: (id?: string) => FocusHandle;
+declare const useFocus: () => FocusHandle;
+
+declare const useFocusNode: (id?: string) => FocusHandle;
 
 declare function useFocusState<T extends string>(initial: T): readonly [T, React$1.Dispatch<React$1.SetStateAction<T>>];
 
@@ -100,4 +106,4 @@ type NavigationContextValue = {
 
 declare const useNavigation: () => NavigationContextValue;
 
-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 };
+export { FocusGroup, type FocusGroupHelpers, type FocusHandle, FocusTrap, GigglesError, GigglesProvider, type GigglesTheme, KeybindingOptions, type KeybindingRegistry, Keybindings, type NavigationContextValue, RegisteredKeybinding, Router, Screen, ThemeProvider, useFocus, useFocusNode, useFocusState, useKeybindingRegistry, useKeybindings, useNavigation, useTheme };

package/dist/index.js

@@ -11,14 +11,15 @@ import {
   InputRouter,
   useFocus,
   useFocusContext,
+  useFocusNode,
   useFocusState,
   useKeybindingRegistry,
   useKeybindings
-} from "./chunk-CKA5JJ4B.js";
+} from "./chunk-ET2WSMEF.js";
 import {
   ThemeProvider,
   useTheme
-} from "./chunk-EVD6YPS3.js";
+} from "./chunk-R5I4YOOP.js";
 
 // src/core/GigglesProvider.tsx
 import { jsx } from "react/jsx-runtime";
@@ -187,6 +188,7 @@ export {
   Screen,
   ThemeProvider,
   useFocus,
+  useFocusNode,
   useFocusState,
   useKeybindingRegistry,
   useKeybindings,

package/dist/markdown/index.js

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

package/dist/terminal/index.d.ts

@@ -1,3 +1,4 @@
+import { SpawnOptionsWithoutStdio } from 'child_process';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
@@ -5,6 +6,25 @@ type TerminalSize = {
     rows: number;
     columns: number;
 };
+type SpawnOptions = SpawnOptionsWithoutStdio & {
+    /**
+     * Inject FORCE_COLOR=1 and TERM=xterm-256color into the child process
+     * environment so tools that detect isTTY emit ANSI color codes.
+     */
+    pty?: boolean;
+};
+type SpawnOutputLine = {
+    type: 'stdout' | 'stderr';
+    data: string;
+};
+type SpawnHandle = {
+    output: SpawnOutputLine[];
+    running: boolean;
+    exitCode: number | null;
+    error: Error | null;
+    run: (command: string, args?: string[], options?: SpawnOptions) => void;
+    kill: () => void;
+};
 
 declare function useTerminalSize(): TerminalSize;
 
@@ -22,4 +42,6 @@ declare function useShellOut(): {
     }>;
 };
 
-export { AlternateScreen, type TerminalSize, useShellOut, useTerminalFocus, useTerminalSize };
+declare function useSpawn(): SpawnHandle;
+
+export { AlternateScreen, type SpawnHandle, type SpawnOptions, type SpawnOutputLine, type TerminalSize, useShellOut, useSpawn, useTerminalFocus, useTerminalSize };

package/dist/terminal/index.js

@@ -54,9 +54,88 @@ function useShellOut() {
     run
   };
 }
+
+// src/terminal/hooks/useSpawn.ts
+import { spawn } from "child_process";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+function useSpawn() {
+  const [output, setOutput] = useState2([]);
+  const [running, setRunning] = useState2(false);
+  const [exitCode, setExitCode] = useState2(null);
+  const [error, setError] = useState2(null);
+  const processRef = useRef2(null);
+  const cancelRef = useRef2(null);
+  useEffect2(() => {
+    return () => {
+      var _a, _b;
+      (_a = cancelRef.current) == null ? void 0 : _a.call(cancelRef);
+      (_b = processRef.current) == null ? void 0 : _b.kill();
+    };
+  }, []);
+  const run = useCallback2((command, args, options) => {
+    var _a, _b;
+    (_a = cancelRef.current) == null ? void 0 : _a.call(cancelRef);
+    (_b = processRef.current) == null ? void 0 : _b.kill();
+    processRef.current = null;
+    cancelRef.current = null;
+    let cancelled = false;
+    cancelRef.current = () => {
+      cancelled = true;
+    };
+    const { pty, ...spawnOptions } = options ?? {};
+    setOutput([]);
+    setRunning(true);
+    setExitCode(null);
+    setError(null);
+    const env = pty ? { ...process.env, FORCE_COLOR: "1", TERM: "xterm-256color", ...spawnOptions.env } : { ...process.env, ...spawnOptions.env };
+    let proc;
+    try {
+      proc = spawn(command, args ?? [], { ...spawnOptions, env, stdio: "pipe" });
+    } catch (err) {
+      setRunning(false);
+      setError(err instanceof Error ? err : new Error(String(err)));
+      cancelRef.current = null;
+      return;
+    }
+    processRef.current = proc;
+    proc.stdout.on("data", (data) => {
+      if (!cancelled) setOutput((prev) => [...prev, { type: "stdout", data: data.toString() }]);
+    });
+    proc.stderr.on("data", (data) => {
+      if (!cancelled) setOutput((prev) => [...prev, { type: "stderr", data: data.toString() }]);
+    });
+    proc.on("error", (err) => {
+      if (!cancelled) {
+        cancelled = true;
+        setError(err);
+        setRunning(false);
+        processRef.current = null;
+        cancelRef.current = null;
+      }
+    });
+    proc.on("close", (code) => {
+      if (!cancelled) {
+        setRunning(false);
+        setExitCode(code);
+        processRef.current = null;
+        cancelRef.current = null;
+      }
+    });
+  }, []);
+  const kill = useCallback2(() => {
+    var _a, _b;
+    (_a = cancelRef.current) == null ? void 0 : _a.call(cancelRef);
+    cancelRef.current = null;
+    (_b = processRef.current) == null ? void 0 : _b.kill();
+    processRef.current = null;
+    setRunning(false);
+  }, []);
+  return { output, running, exitCode, error, run, kill };
+}
 export {
   AlternateScreen,
   useShellOut,
+  useSpawn,
   useTerminalFocus,
   useTerminalSize
 };

package/dist/ui/index.js

@@ -1,16 +1,16 @@
 import {
   FocusTrap,
   GigglesError,
-  useFocus,
+  useFocusNode,
   useKeybindingRegistry,
   useKeybindings
-} from "../chunk-CKA5JJ4B.js";
+} from "../chunk-ET2WSMEF.js";
 import {
   CodeBlock
-} from "../chunk-JTJH45JR.js";
+} from "../chunk-DFB7V4OK.js";
 import {
   useTheme
-} from "../chunk-EVD6YPS3.js";
+} from "../chunk-R5I4YOOP.js";
 
 // src/ui/CommandPalette.tsx
 import { useState } from "react";
@@ -49,7 +49,7 @@ function fuzzyMatch(name, query) {
   return qi === lowerQuery.length;
 }
 function Inner({ onClose, render }) {
-  const focus = useFocus();
+  const focus = useFocusNode();
   const theme = useTheme();
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -138,7 +138,7 @@ import { useReducer, useRef } from "react";
 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 focus = useFocusNode();
   const cursorRef = useRef(value.length);
   const [, forceRender] = useReducer((c) => c + 1, 0);
   const cursor = Math.min(cursorRef.current, value.length);
@@ -360,7 +360,7 @@ function Select({
     }
     seen.add(key);
   }
-  const focus = useFocus();
+  const focus = useFocusNode();
   const theme = useTheme();
   const [highlightIndex, setHighlightIndex] = useState3(0);
   const safeIndex = options.length === 0 ? -1 : Math.min(highlightIndex, options.length - 1);
@@ -447,7 +447,7 @@ function MultiSelect({
     }
     seen.add(key);
   }
-  const focus = useFocus();
+  const focus = useFocusNode();
   const theme = useTheme();
   const [highlightIndex, setHighlightIndex] = useState4(0);
   const safeIndex = options.length === 0 ? -1 : Math.min(highlightIndex, options.length - 1);
@@ -512,7 +512,7 @@ function MultiSelect({
 import { Text as Text6 } from "ink";
 import { jsxs as jsxs7 } from "react/jsx-runtime";
 function Confirm({ message, defaultValue = true, onSubmit }) {
-  const focus = useFocus();
+  const focus = useFocusNode();
   useKeybindings(focus, {
     y: () => onSubmit(true),
     n: () => onSubmit(false),
@@ -564,7 +564,7 @@ function Autocomplete({
     }
     seen.add(key);
   }
-  const focus = useFocus();
+  const focus = useFocusNode();
   const theme = useTheme();
   const [query, setQuery] = useState5("");
   const [highlightIndex, setHighlightIndex] = useState5(0);
@@ -716,7 +716,7 @@ function MeasurableItem({
   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 focus = useFocusNode();
   const [scrollOffset, setScrollOffset] = useState6(0);
   const contentHeightRef = useRef4(0);
   const itemHeightsRef = useRef4({});
@@ -822,7 +822,7 @@ var Viewport = forwardRef(function Viewport2({ children, height, keybindings: en
 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, ...boxProps }) {
-  const focus = useFocus();
+  const focus = useFocusNode();
   const theme = useTheme();
   useKeybindings(focus, {
     escape: onClose

package/package.json

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