giggles 0.2.3 → 0.3.0

package/README.md

@@ -1,5 +1,5 @@
-[![npm version](https://img.shields.io/npm/v/giggles)](https://www.npmjs.com/package/giggles)
-[![npm downloads](https://img.shields.io/npm/dm/giggles)](https://www.npmjs.com/package/giggles)
+[![CI](https://github.com/zion-off/giggles/actions/workflows/giggles-lint.yml/badge.svg)](https://github.com/zion-off/giggles/actions/workflows/giggles-lint.yml)
+[![CD](https://github.com/zion-off/giggles/actions/workflows/giggles-cd.yml/badge.svg)](https://github.com/zion-off/giggles/actions/workflows/giggles-cd.yml)
 [![docs](https://img.shields.io/badge/docs-giggles.zzzzion.com-blue)](https://giggles.zzzzion.com)
 
 # giggles

package/dist/chunk-7PDVDYFB.js

@@ -0,0 +1,23 @@
+// 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
+};

package/dist/index.d.ts

@@ -13,14 +13,32 @@ type GigglesProviderProps = {
 };
 declare function GigglesProvider({ children }: GigglesProviderProps): react_jsx_runtime.JSX.Element;
 
+type KeyHandler = (input: string, key: Key) => void;
+type SpecialKey = 'up' | 'down' | 'left' | 'right' | 'enter' | 'escape' | 'tab' | 'backspace' | 'delete' | 'pageup' | 'pagedown' | 'home' | 'end';
+type KeyName = SpecialKey | (string & {});
+type Keybindings = Partial<Record<KeyName, KeyHandler>>;
+type KeybindingOptions = {
+    capture?: boolean;
+    onKeypress?: (input: string, key: Key) => void;
+    layer?: string;
+};
+
+declare function useKeybindings(focus: FocusHandle, bindings: Keybindings, options?: KeybindingOptions): void;
+
+type FocusTrapProps = {
+    children: React.ReactNode;
+};
+declare function FocusTrap({ children }: FocusTrapProps): react_jsx_runtime.JSX.Element;
+
 type FocusGroupProps = {
     children: React__default.ReactNode;
     direction?: 'vertical' | 'horizontal';
     value?: string;
     wrap?: boolean;
     navigable?: boolean;
+    keybindings?: Keybindings;
 };
-declare function FocusGroup({ children, direction, value, wrap, navigable }: FocusGroupProps): react_jsx_runtime.JSX.Element;
+declare function FocusGroup({ children, direction, value, wrap, navigable, keybindings: customBindings }: FocusGroupProps): react_jsx_runtime.JSX.Element;
 
 type FocusHandle = {
     id: string;
@@ -32,23 +50,6 @@ declare const useFocus: (id?: string) => FocusHandle;
 
 declare function useFocusState<T extends string>(initial: T): readonly [T, React$1.Dispatch<React$1.SetStateAction<T>>];
 
-type KeyHandler = (input: string, key: Key) => void;
-type SpecialKey = 'up' | 'down' | 'left' | 'right' | 'enter' | 'escape' | 'tab' | 'backspace' | 'delete' | 'pageup' | 'pagedown' | 'home' | 'end';
-type KeyName = SpecialKey | (string & {});
-type Keybindings = Partial<Record<KeyName, KeyHandler>>;
-type KeybindingOptions = {
-    capture?: boolean;
-    onKeypress?: (input: string, key: Key) => void;
-    layer?: string;
-};
-
-declare function useKeybindings(focus: FocusHandle, bindings: Keybindings, options?: KeybindingOptions): void;
-
-type FocusTrapProps = {
-    children: React.ReactNode;
-};
-declare function FocusTrap({ children }: FocusTrapProps): react_jsx_runtime.JSX.Element;
-
 type RouterProps = {
     children: React__default.ReactNode;
     initialScreen: string;

package/dist/index.js

@@ -1,3 +1,7 @@
+import {
+  AlternateScreen
+} from "./chunk-7PDVDYFB.js";
+
 // src/core/GigglesError.ts
 var GigglesError = class extends Error {
   constructor(message) {
@@ -14,24 +18,11 @@ var FocusProvider = ({ children }) => {
   const nodesRef = useRef(/* @__PURE__ */ new Map());
   const pendingFocusFirstChildRef = useRef(/* @__PURE__ */ new Set());
   const [focusedId, setFocusedId] = useState(null);
-  const [activeBranchNodes, setActiveBranchNodes] = useState(/* @__PURE__ */ new Set());
-  const [activeBranchPath, setActiveBranchPath] = useState([]);
   const focusNode = useCallback((id) => {
     const nodes = nodesRef.current;
     if (!nodes.has(id)) return;
     setFocusedId((current) => {
       if (current === id) return current;
-      const pathSet = /* @__PURE__ */ new Set();
-      const pathArray = [];
-      let currentNode = id;
-      while (currentNode) {
-        pathSet.add(currentNode);
-        pathArray.push(currentNode);
-        const node = nodes.get(currentNode);
-        currentNode = (node == null ? void 0 : node.parentId) ?? null;
-      }
-      setActiveBranchNodes(pathSet);
-      setActiveBranchPath(pathArray);
       return id;
     });
   }, []);
@@ -92,23 +83,7 @@ var FocusProvider = ({ children }) => {
     pendingFocusFirstChildRef.current.delete(id);
     setFocusedId((current) => {
       if (current !== id) return current;
-      if (node.parentId) {
-        const pathSet = /* @__PURE__ */ new Set();
-        const pathArray = [];
-        let currentNode = node.parentId;
-        while (currentNode) {
-          pathSet.add(currentNode);
-          pathArray.push(currentNode);
-          const n = nodes.get(currentNode);
-          currentNode = (n == null ? void 0 : n.parentId) ?? null;
-        }
-        setActiveBranchNodes(pathSet);
-        setActiveBranchPath(pathArray);
-        return node.parentId;
-      }
-      setActiveBranchNodes(/* @__PURE__ */ new Set());
-      setActiveBranchPath([]);
-      return null;
+      return node.parentId ?? null;
     });
   }, []);
   const isFocused = useCallback(
@@ -120,15 +95,18 @@ var FocusProvider = ({ children }) => {
   const getFocusedId = useCallback(() => {
     return focusedId;
   }, [focusedId]);
-  const isInActiveBranch = useCallback(
-    (id) => {
-      return activeBranchNodes.has(id);
-    },
-    [activeBranchNodes]
-  );
   const getActiveBranchPath = useCallback(() => {
-    return activeBranchPath;
-  }, [activeBranchPath]);
+    if (!focusedId) return [];
+    const nodes = nodesRef.current;
+    const pathArray = [];
+    let node = focusedId;
+    while (node) {
+      pathArray.push(node);
+      const n = nodes.get(node);
+      node = (n == null ? void 0 : n.parentId) ?? null;
+    }
+    return pathArray;
+  }, [focusedId]);
   const navigateSibling = useCallback(
     (direction, wrap = true) => {
       const currentId = focusedId;
@@ -161,7 +139,6 @@ var FocusProvider = ({ children }) => {
         focusFirstChild,
         isFocused,
         getFocusedId,
-        isInActiveBranch,
         getActiveBranchPath,
         navigateSibling
       },
@@ -179,7 +156,7 @@ var useFocusContext = () => {
 };
 
 // src/core/focus/FocusGroup.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef4 } from "react";
 
 // src/core/input/InputContext.tsx
 import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useRef as useRef2 } from "react";
@@ -257,6 +234,7 @@ import { useInput } from "ink";
 
 // src/core/input/normalizeKey.ts
 function normalizeKey(input, key) {
+  if (input === "\x1B[I" || input === "\x1B[O") return "";
   if (key.downArrow) return "down";
   if (key.upArrow) return "up";
   if (key.leftArrow) return "left";
@@ -284,6 +262,7 @@ function InputRouter({ children }) {
     const path = getActiveBranchPath();
     const trapNodeId = getTrapNodeId();
     const keyName = normalizeKey(input, key);
+    if (!keyName) return;
     for (const nodeId of path) {
       const nodeBindings = getNodeBindings(nodeId);
       if (!nodeBindings) continue;
@@ -315,16 +294,25 @@ function useKeybindings(focus, bindings, options) {
 }
 
 // src/core/input/FocusTrap.tsx
-import { useEffect as useEffect2 } from "react";
-import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function FocusTrap({ children }) {
   const { id } = useFocus();
   const { setTrap, clearTrap } = useInputContext();
+  const { focusFirstChild, getFocusedId, focusNode } = useFocusContext();
+  const previousFocusRef = useRef3(getFocusedId());
   useEffect2(() => {
+    const previousFocus = previousFocusRef.current;
     setTrap(id);
-    return () => clearTrap(id);
-  }, [id, setTrap, clearTrap]);
-  return /* @__PURE__ */ jsx4(Fragment2, { children });
+    focusFirstChild(id);
+    return () => {
+      clearTrap(id);
+      if (previousFocus) {
+        focusNode(previousFocus);
+      }
+    };
+  }, [id]);
+  return /* @__PURE__ */ jsx4(FocusNodeContext.Provider, { value: id, children });
 }
 
 // src/core/focus/FocusBindContext.tsx
@@ -364,11 +352,12 @@ function FocusGroup({
   direction = "vertical",
   value,
   wrap = true,
-  navigable = true
+  navigable = true,
+  keybindings: customBindings
 }) {
   const focus = useFocus();
   const { focusNode, navigateSibling } = useFocusContext();
-  const bindMapRef = useRef3(/* @__PURE__ */ new Map());
+  const bindMapRef = useRef4(/* @__PURE__ */ new Map());
   const register = useCallback3((logicalId, nodeId) => {
     if (bindMapRef.current.has(logicalId)) {
       throw new GigglesError(`FocusGroup: Duplicate id "${logicalId}". Each child must have a unique id.`);
@@ -386,7 +375,7 @@ function FocusGroup({
       }
     }
   }, [value, focusNode]);
-  const bindContextValue = value ? { register, unregister } : null;
+  const bindContextValue = useMemo(() => value ? { register, unregister } : null, [value, register, unregister]);
   const navigationKeys = useMemo(() => {
     if (!navigable) return {};
     const next = () => navigateSibling("next", wrap);
@@ -403,7 +392,11 @@ function FocusGroup({
       left: prev
     };
   }, [navigable, direction, wrap, navigateSibling]);
-  useKeybindings(focus, navigationKeys);
+  const mergedBindings = useMemo(
+    () => ({ ...navigationKeys, ...customBindings }),
+    [navigationKeys, customBindings]
+  );
+  useKeybindings(focus, mergedBindings);
   return /* @__PURE__ */ jsx5(FocusNodeContext.Provider, { value: focus.id, children: /* @__PURE__ */ jsx5(FocusBindContext.Provider, { value: bindContextValue, children }) });
 }
 
@@ -417,11 +410,11 @@ function useFocusState(initial) {
 // src/core/GigglesProvider.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 function GigglesProvider({ children }) {
-  return /* @__PURE__ */ jsx6(FocusProvider, { children: /* @__PURE__ */ jsx6(InputProvider, { children: /* @__PURE__ */ jsx6(InputRouter, { children }) }) });
+  return /* @__PURE__ */ jsx6(AlternateScreen, { children: /* @__PURE__ */ jsx6(FocusProvider, { children: /* @__PURE__ */ jsx6(InputProvider, { children: /* @__PURE__ */ jsx6(InputRouter, { children }) }) }) });
 }
 
 // src/core/router/Router.tsx
-import React4, { useCallback as useCallback4, useReducer, useRef as useRef5 } from "react";
+import React4, { useCallback as useCallback4, useReducer, useRef as useRef6 } from "react";
 
 // src/core/router/Screen.tsx
 function Screen(_props) {
@@ -429,7 +422,7 @@ function Screen(_props) {
 }
 
 // src/core/router/ScreenEntry.tsx
-import React3, { useEffect as useEffect5, useId as useId2, useMemo as useMemo2, useRef as useRef4 } from "react";
+import React3, { useEffect as useEffect5, useId as useId2, useMemo as useMemo2, useRef as useRef5 } from "react";
 import { Box } from "ink";
 
 // src/core/router/NavigationContext.tsx
@@ -459,8 +452,8 @@ function ScreenEntry({
   const screenNodeId = useId2();
   const parentId = React3.useContext(FocusNodeContext);
   const { registerNode, unregisterNode, focusFirstChild, focusNode, getFocusedId } = useFocusContext();
-  const lastFocusedChildRef = useRef4(null);
-  const wasTopRef = useRef4(isTop);
+  const lastFocusedChildRef = useRef5(null);
+  const wasTopRef = useRef5(isTop);
   useEffect5(() => {
     registerNode(screenNodeId, parentId);
     return () => {
@@ -490,7 +483,7 @@ function ScreenEntry({
 }
 
 // src/core/router/Router.tsx
-import { Fragment as Fragment3, jsx as jsx8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8 } from "react/jsx-runtime";
 function routerReducer(stack, action) {
   switch (action.type) {
     case "push":
@@ -504,9 +497,9 @@ function routerReducer(stack, action) {
   }
 }
 function Router({ children, initialScreen, initialParams, restoreFocus = true }) {
-  const screenId = useRef5(0);
+  const screenId = useRef6(0);
   const routes = React4.Children.toArray(children).filter((child) => React4.isValidElement(child) && child.type === Screen).map((child) => child.props);
-  const screenNamesRef = useRef5(/* @__PURE__ */ new Set());
+  const screenNamesRef = useRef6(/* @__PURE__ */ new Set());
   screenNamesRef.current = new Set(routes.map((r) => r.name));
   const assertScreen = useCallback4((name) => {
     if (!screenNamesRef.current.has(name)) {
@@ -552,7 +545,7 @@ function Router({ children, initialScreen, initialParams, restoreFocus = true })
     components.set(route.name, route.component);
   }
   const canGoBack = stack.length > 1;
-  return /* @__PURE__ */ jsx8(Fragment3, { children: stack.map((entry, i) => {
+  return /* @__PURE__ */ jsx8(Fragment2, { children: stack.map((entry, i) => {
     const Component = components.get(entry.name);
     if (!Component) return null;
     return /* @__PURE__ */ jsx8(

package/dist/terminal/index.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type TerminalSize = {
+    rows: number;
+    columns: number;
+};
+
+declare function useTerminalSize(): TerminalSize;
+
+declare function useTerminalFocus(callback: (focused: boolean) => void): void;
+
+declare function AlternateScreen({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function useShellOut(): {
+    run: (command: string) => Promise<{
+        exitCode: number;
+    }>;
+};
+
+export { AlternateScreen, type TerminalSize, useShellOut, useTerminalFocus, useTerminalSize };

package/dist/terminal/index.js

@@ -0,0 +1,83 @@
+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
+  };
+}
+export {
+  AlternateScreen,
+  useShellOut,
+  useTerminalFocus,
+  useTerminalSize
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "giggles",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -13,6 +13,10 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./terminal": {
+      "import": "./dist/terminal/index.js",
+      "types": "./dist/terminal/index.d.ts"
     }
   },
   "keywords": [
@@ -54,5 +58,8 @@
     "tsx": "^4.21.0",
     "typescript": "^5.0.3",
     "typescript-eslint": "^8.0.0"
+  },
+  "dependencies": {
+    "execa": "^9.6.1"
   }
 }