giggles 0.6.2 → 0.7.0

package/dist/{chunk-TWXBZE5C.js → chunk-74PBSWEK.js}

@@ -76,13 +76,14 @@ function useFocusNode(options) {
   const store = useStore();
   const contextParentId = useContext2(ScopeIdContext);
   const parentId = ((_a = options == null ? void 0 : options.parent) == null ? void 0 : _a.id) ?? contextParentId;
+  const focusKey = options == null ? void 0 : options.focusKey;
   const subscribe = useMemo(() => store.subscribe.bind(store), [store]);
   useEffect2(() => {
-    store.registerNode(id, parentId);
+    store.registerNode(id, parentId, focusKey);
     return () => {
       store.unregisterNode(id);
     };
-  }, [id, parentId, store]);
+  }, [id, parentId, focusKey, store]);
   const hasFocus = useSyncExternalStore2(subscribe, () => store.isFocused(id));
   return { id, hasFocus };
 }
@@ -128,13 +129,14 @@ function useFocusScope(options) {
   const store = useStore();
   const contextParentId = useContext3(ScopeIdContext);
   const parentId = ((_a = options == null ? void 0 : options.parent) == null ? void 0 : _a.id) ?? contextParentId;
+  const focusKey = options == null ? void 0 : options.focusKey;
   const subscribe = useMemo2(() => store.subscribe.bind(store), [store]);
   useEffect4(() => {
-    store.registerNode(id, parentId);
+    store.registerNode(id, parentId, focusKey);
     return () => {
       store.unregisterNode(id);
     };
-  }, [id, parentId, store]);
+  }, [id, parentId, focusKey, store]);
   const hasFocus = useSyncExternalStore3(subscribe, () => store.isFocused(id));
   const isPassive = useSyncExternalStore3(subscribe, () => store.isPassive(id));
   const next = useCallback(() => store.navigateSibling("next", true, id), [store, id]);
@@ -143,7 +145,9 @@ function useFocusScope(options) {
   const prevShallow = useCallback(() => store.navigateSibling("prev", true, id, true), [store, id]);
   const escape = useCallback(() => store.makePassive(id), [store, id]);
   const drillIn = useCallback(() => store.focusFirstChild(id), [store, id]);
-  const resolvedBindings = typeof (options == null ? void 0 : options.keybindings) === "function" ? options.keybindings({ next, prev, nextShallow, prevShallow, escape, drillIn }) : (options == null ? void 0 : options.keybindings) ?? {};
+  const focusChild = useCallback((key) => store.focusChildByKey(id, key, false), [store, id]);
+  const focusChildShallow = useCallback((key) => store.focusChildByKey(id, key, true), [store, id]);
+  const resolvedBindings = typeof (options == null ? void 0 : options.keybindings) === "function" ? options.keybindings({ next, prev, nextShallow, prevShallow, escape, drillIn, focusChild, focusChildShallow }) : (options == null ? void 0 : options.keybindings) ?? {};
   store.registerKeybindings(id, keybindingRegistrationId, resolvedBindings);
   useEffect4(() => {
     return () => {
@@ -157,7 +161,19 @@ function useFocusScope(options) {
       );
     }
   }, [id, store]);
-  return { id, hasFocus, isPassive, next, prev, nextShallow, prevShallow, escape, drillIn };
+  return {
+    id,
+    hasFocus,
+    isPassive,
+    next,
+    prev,
+    nextShallow,
+    prevShallow,
+    escape,
+    drillIn,
+    focusChild,
+    focusChildShallow
+  };
 }
 
 // src/core/focus/FocusScope.tsx
@@ -212,6 +228,8 @@ var FocusStore = class {
   // A keybinding may exist for a node that has not yet appeared in the node tree —
   // this is safe because dispatch only walks nodes in the active branch path.
   keybindings = /* @__PURE__ */ new Map();
+  // parentId → focusKey → childId
+  keyIndex = /* @__PURE__ */ new Map();
   // ---------------------------------------------------------------------------
   // Subscription
   // ---------------------------------------------------------------------------
@@ -231,7 +249,7 @@ var FocusStore = class {
   // ---------------------------------------------------------------------------
   // Registration
   // ---------------------------------------------------------------------------
-  registerNode(id, parentId) {
+  registerNode(id, parentId, focusKey) {
     const node = { id, parentId, childrenIds: [] };
     this.nodes.set(id, node);
     this.parentMap.set(id, parentId);
@@ -251,6 +269,12 @@ var FocusStore = class {
         node.childrenIds.push(existingId);
       }
     }
+    if (focusKey && parentId) {
+      if (!this.keyIndex.has(parentId)) {
+        this.keyIndex.set(parentId, /* @__PURE__ */ new Map());
+      }
+      this.keyIndex.get(parentId).set(focusKey, id);
+    }
     if (this.nodes.size === 1) {
       this.focusNode(id);
     }
@@ -268,6 +292,21 @@ var FocusStore = class {
     this.nodes.delete(id);
     this.passiveSet.delete(id);
     this.pendingFocusFirstChild.delete(id);
+    if (node.parentId) {
+      const parentKeys = this.keyIndex.get(node.parentId);
+      if (parentKeys) {
+        for (const [key, childId] of parentKeys) {
+          if (childId === id) {
+            parentKeys.delete(key);
+            break;
+          }
+        }
+        if (parentKeys.size === 0) {
+          this.keyIndex.delete(node.parentId);
+        }
+      }
+    }
+    this.keyIndex.delete(id);
     if (this.focusedId === id) {
       let candidate = node.parentId;
       while (candidate !== null) {
@@ -315,6 +354,21 @@ var FocusStore = class {
       this.pendingFocusFirstChild.add(parentId);
     }
   }
+  focusChildByKey(parentId, key, shallow) {
+    var _a;
+    const childId = (_a = this.keyIndex.get(parentId)) == null ? void 0 : _a.get(key);
+    if (!childId || !this.nodes.has(childId)) return;
+    if (shallow) {
+      this.focusNode(childId);
+    } else {
+      const child = this.nodes.get(childId);
+      if (child.childrenIds.length > 0) {
+        this.focusFirstChild(childId);
+      } else {
+        this.focusNode(childId);
+      }
+    }
+  }
   // ---------------------------------------------------------------------------
   // Navigation
   // ---------------------------------------------------------------------------

package/dist/index.d.ts

@@ -47,10 +47,13 @@ type FocusScopeHandle = {
     prevShallow: () => void;
     escape: () => void;
     drillIn: () => void;
+    focusChild: (key: string) => void;
+    focusChildShallow: (key: string) => void;
 };
-type FocusScopeHelpers = Pick<FocusScopeHandle, 'next' | 'prev' | 'nextShallow' | 'prevShallow' | 'escape' | 'drillIn'>;
+type FocusScopeHelpers = Pick<FocusScopeHandle, 'next' | 'prev' | 'nextShallow' | 'prevShallow' | 'escape' | 'drillIn' | 'focusChild' | 'focusChildShallow'>;
 type FocusScopeOptions = {
     parent?: FocusScopeHandle;
+    focusKey?: string;
     keybindings?: Keybindings | ((helpers: FocusScopeHelpers) => Keybindings);
 };
 declare function useFocusScope(options?: FocusScopeOptions): FocusScopeHandle;
@@ -67,6 +70,7 @@ type FocusNodeHandle = {
 };
 type FocusNodeOptions = {
     parent?: FocusScopeHandle;
+    focusKey?: string;
 };
 declare function useFocusNode(options?: FocusNodeOptions): FocusNodeHandle;
 

package/dist/index.js

@@ -14,7 +14,7 @@ import {
   useKeybindingRegistry,
   useKeybindings,
   useStore
-} from "./chunk-TWXBZE5C.js";
+} from "./chunk-74PBSWEK.js";
 import {
   ThemeProvider,
   useTheme

package/dist/ui/index.d.ts

@@ -31,8 +31,9 @@ type TextInputProps = {
     onSubmit?: (value: string) => void;
     placeholder?: string;
     render?: (props: TextInputRenderProps) => React$1.ReactNode;
+    focusKey?: string;
 };
-declare function TextInput({ label, value, onChange, onSubmit, placeholder, render }: TextInputProps): react_jsx_runtime.JSX.Element;
+declare function TextInput({ label, value, onChange, onSubmit, placeholder, render, focusKey }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 type PaginatorStyle = 'dots' | 'arrows' | 'scrollbar' | 'counter' | 'none';
 type PaginatorProps = {
@@ -70,8 +71,9 @@ type SelectProps<T> = {
     paginatorStyle?: PaginatorStyle;
     wrap?: boolean;
     render?: (props: SelectRenderProps<T>) => React$1.ReactNode;
+    focusKey?: string;
 };
-declare function Select<T>({ options, value, onChange, onSubmit, onHighlight, label, immediate, direction, gap, 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, focusKey }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
 type MultiSelectRenderProps<T> = {
     option: SelectOption<T>;
@@ -92,15 +94,17 @@ type MultiSelectProps<T> = {
     paginatorStyle?: PaginatorStyle;
     wrap?: boolean;
     render?: (props: MultiSelectRenderProps<T>) => React$1.ReactNode;
+    focusKey?: string;
 };
-declare function MultiSelect<T>({ options, value, onChange, onSubmit, onHighlight, label, direction, gap, 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, focusKey }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 type ConfirmProps = {
     message: string;
     defaultValue?: boolean;
     onSubmit: (value: boolean) => void;
+    focusKey?: string;
 };
-declare function Confirm({ message, defaultValue, onSubmit }: ConfirmProps): react_jsx_runtime.JSX.Element;
+declare function Confirm({ message, defaultValue, onSubmit, focusKey }: ConfirmProps): react_jsx_runtime.JSX.Element;
 
 type AutocompleteRenderProps<T> = {
     option: SelectOption<T>;
@@ -122,8 +126,9 @@ type AutocompleteProps<T> = {
     paginatorStyle?: PaginatorStyle;
     wrap?: boolean;
     render?: (props: AutocompleteRenderProps<T>) => React$1.ReactNode;
+    focusKey?: string;
 };
-declare function Autocomplete<T>({ options, value, onChange, onSubmit, onHighlight, label, placeholder, filter, gap, 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, focusKey }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
 
 type VirtualListRenderProps<T> = {
     item: T;
@@ -160,6 +165,7 @@ declare const Viewport: React$1.ForwardRefExoticComponent<Omit<BoxProps, "flexDi
     height: number;
     keybindings?: boolean;
     footer?: React$1.ReactNode;
+    focusKey?: string;
 } & React$1.RefAttributes<ViewportRef>>;
 
 type ModalProps = Omit<BoxProps, 'children'> & {

package/dist/ui/index.js

@@ -4,7 +4,7 @@ import {
   useFocusNode,
   useKeybindingRegistry,
   useKeybindings
-} from "../chunk-TWXBZE5C.js";
+} from "../chunk-74PBSWEK.js";
 import {
   CodeBlock
 } from "../chunk-SKSDNDQF.js";
@@ -136,8 +136,8 @@ function CommandPalette({ onClose, interactive = true, render }) {
 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 = useFocusNode();
+function TextInput({ label, value, onChange, onSubmit, placeholder, render, focusKey }) {
+  const focus = useFocusNode({ focusKey });
   const cursorRef = useRef(value.length);
   const [, forceRender] = useReducer((c) => c + 1, 0);
   const cursor = Math.min(cursorRef.current, value.length);
@@ -351,7 +351,8 @@ function Select({
   maxVisible,
   paginatorStyle,
   wrap = true,
-  render
+  render,
+  focusKey
 }) {
   const seen = /* @__PURE__ */ new Set();
   for (const opt of options) {
@@ -361,7 +362,7 @@ function Select({
     }
     seen.add(key);
   }
-  const focus = useFocusNode();
+  const focus = useFocusNode({ focusKey });
   const theme = useTheme();
   const [highlightIndex, setHighlightIndex] = useState3(0);
   const safeIndex = options.length === 0 ? -1 : Math.min(highlightIndex, options.length - 1);
@@ -438,7 +439,8 @@ function MultiSelect({
   maxVisible,
   paginatorStyle,
   wrap = true,
-  render
+  render,
+  focusKey
 }) {
   const seen = /* @__PURE__ */ new Set();
   for (const opt of options) {
@@ -448,7 +450,7 @@ function MultiSelect({
     }
     seen.add(key);
   }
-  const focus = useFocusNode();
+  const focus = useFocusNode({ focusKey });
   const theme = useTheme();
   const [highlightIndex, setHighlightIndex] = useState4(0);
   const [internalSelected, setInternalSelected] = useState4([]);
@@ -515,8 +517,8 @@ function MultiSelect({
 // src/ui/Confirm.tsx
 import { Text as Text6 } from "ink";
 import { jsxs as jsxs7 } from "react/jsx-runtime";
-function Confirm({ message, defaultValue = true, onSubmit }) {
-  const focus = useFocusNode();
+function Confirm({ message, defaultValue = true, onSubmit, focusKey }) {
+  const focus = useFocusNode({ focusKey });
   useKeybindings(focus, {
     y: () => onSubmit(true),
     n: () => onSubmit(false),
@@ -558,7 +560,8 @@ function Autocomplete({
   maxVisible,
   paginatorStyle,
   wrap = true,
-  render
+  render,
+  focusKey
 }) {
   const seen = /* @__PURE__ */ new Set();
   for (const opt of options) {
@@ -568,7 +571,7 @@ function Autocomplete({
     }
     seen.add(key);
   }
-  const focus = useFocusNode();
+  const focus = useFocusNode({ focusKey });
   const theme = useTheme();
   const [query, setQuery] = useState5("");
   const [highlightIndex, setHighlightIndex] = useState5(0);
@@ -718,8 +721,8 @@ function MeasurableItem({
   }, [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, ...boxProps }, ref) {
-  const focus = useFocusNode();
+var Viewport = forwardRef(function Viewport2({ children, height, keybindings: enableKeybindings = true, footer, focusKey, ...boxProps }, ref) {
+  const focus = useFocusNode({ focusKey });
   const [scrollOffset, setScrollOffset] = useState6(0);
   const contentHeightRef = useRef4(0);
   const itemHeightsRef = useRef4({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "giggles",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "play": "f() { tsx --watch playground/examples/$1.tsx; }; f",
     "record": "f() { vhs playground/tapes/$1.tape; }; f",
     "dev:docs": "pnpm build && concurrently --kill-others \"pnpm build:watch\" \"pnpm --filter documentation dev\"",
-    "lint": "prettier --write . && eslint . --fix"
+    "lint": "prettier --write --loglevel warn . && eslint . --fix --quiet"
   },
   "files": [
     "dist"