@nick-skriabin/glyph 0.1.32 → 0.1.34

package/dist/index.cjs

@@ -2065,6 +2065,17 @@ function render(element, opts = {}) {
       return () => {
         focusChangeHandlers.delete(handler);
       };
+    },
+    getRegisteredElements() {
+      const result = [];
+      for (const id of focusOrder) {
+        if (skippableIds.has(id)) continue;
+        const node = focusRegistry.get(id);
+        if (node) {
+          result.push({ id, node });
+        }
+      }
+      return result;
     }
   };
   const layoutSubscriptions = /* @__PURE__ */ new Map();
@@ -2288,13 +2299,17 @@ function render(element, opts = {}) {
   };
   return handle;
 }
-function Box({ children, style, focusable }) {
-  return React15__default.default.createElement("box", { style, focusable }, children);
-}
-function Text({ children, style, wrap }) {
-  const mergedStyle = wrap ? { ...style, wrap } : style;
-  return React15__default.default.createElement("text", { style: mergedStyle }, children);
-}
+var Box = React15.forwardRef(
+  function Box2({ children, style, focusable }, ref) {
+    return React15__default.default.createElement("box", { style, focusable, ref }, children);
+  }
+);
+var Text = React15.forwardRef(
+  function Text2({ children, style, wrap }, ref) {
+    const mergedStyle = wrap ? { ...style, wrap } : style;
+    return React15__default.default.createElement("text", { style: mergedStyle, ref }, children);
+  }
+);
 function cursorToVisualLine(text, pos, width) {
   if (width <= 0) {
     return { visualLine: 0, visualCol: pos, totalVisualLines: 1, lineStartOffset: 0, lineLength: text.length };
@@ -2401,6 +2416,7 @@ function Input(props) {
   const [cursorPos, setCursorPos] = React15.useState(defaultValue.length);
   const [innerWidth, setInnerWidth] = React15.useState(0);
   const [isFocused, setIsFocused] = React15.useState(false);
+  const [nodeReady, setNodeReady] = React15.useState(false);
   const inputCtx = React15.useContext(InputContext);
   const focusCtx = React15.useContext(FocusContext);
   const layoutCtx = React15.useContext(LayoutContext);
@@ -2449,7 +2465,7 @@ function Input(props) {
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current || !nodeRef.current) return;
     return focusCtx.register(focusIdRef.current, nodeRef.current);
-  }, [focusCtx]);
+  }, [focusCtx, nodeReady]);
   const autoFocusedRef = React15.useRef(false);
   React15.useEffect(() => {
     if (autoFocus && !autoFocusedRef.current && focusCtx && focusIdRef.current) {
@@ -2459,7 +2475,7 @@ function Input(props) {
         focusCtx.requestFocus(fid);
       });
     }
-  }, [autoFocus, focusCtx]);
+  }, [autoFocus, focusCtx, nodeReady]);
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current) return;
     const fid = focusIdRef.current;
@@ -2467,7 +2483,7 @@ function Input(props) {
     return focusCtx.onFocusChange((newId) => {
       setIsFocused(newId === fid);
     });
-  }, [focusCtx]);
+  }, [focusCtx, nodeReady]);
   React15.useEffect(() => {
     if (!inputCtx || !focusIdRef.current) return;
     const fid = focusIdRef.current;
@@ -2677,7 +2693,7 @@ function Input(props) {
       return false;
     };
     return inputCtx.registerInputHandler(fid, handler);
-  }, [inputCtx]);
+  }, [inputCtx, nodeReady]);
   const mergedStyle = {
     ...style,
     ...isFocused && focusedStyle ? focusedStyle : {}
@@ -2695,6 +2711,11 @@ function Input(props) {
       if (node) {
         nodeRef.current = node;
         focusIdRef.current = node.focusId;
+        setNodeReady(true);
+      } else {
+        nodeRef.current = null;
+        focusIdRef.current = null;
+        setNodeReady(false);
       }
     }
   });
@@ -2810,11 +2831,12 @@ function Button({
   const focusIdRef = React15.useRef(null);
   const onPressRef = React15.useRef(onPress);
   onPressRef.current = onPress;
+  const [nodeReady, setNodeReady] = React15.useState(false);
   const [isFocused, setIsFocused] = React15.useState(false);
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current || !nodeRef.current || disabled) return;
     return focusCtx.register(focusIdRef.current, nodeRef.current);
-  }, [focusCtx, disabled]);
+  }, [focusCtx, disabled, nodeReady]);
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current) return;
     const fid = focusIdRef.current;
@@ -2822,7 +2844,7 @@ function Button({
     return focusCtx.onFocusChange((newId) => {
       setIsFocused(newId === fid);
     });
-  }, [focusCtx]);
+  }, [focusCtx, nodeReady]);
   React15.useEffect(() => {
     if (!inputCtx || !focusIdRef.current || disabled) return;
     const fid = focusIdRef.current;
@@ -2835,7 +2857,7 @@ function Button({
       return false;
     };
     return inputCtx.registerInputHandler(fid, handler);
-  }, [inputCtx, focusCtx, disabled]);
+  }, [inputCtx, focusCtx, disabled, nodeReady]);
   const mergedStyle = {
     ...style,
     ...isFocused && focusedStyle ? focusedStyle : {}
@@ -2849,6 +2871,11 @@ function Button({
         if (node) {
           nodeRef.current = node;
           focusIdRef.current = node.focusId;
+          setNodeReady(true);
+        } else {
+          nodeRef.current = null;
+          focusIdRef.current = null;
+          setNodeReady(false);
         }
       }
     },
@@ -3124,6 +3151,7 @@ function List({
   const focusIdRef = React15.useRef(null);
   const onSelectRef = React15.useRef(onSelect);
   onSelectRef.current = onSelect;
+  const [nodeReady, setNodeReady] = React15.useState(false);
   const [isFocused, setIsFocused] = React15.useState(false);
   const lastKeyRef = React15.useRef(null);
   const setIndex = React15.useCallback(
@@ -3154,7 +3182,7 @@ function List({
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current || !nodeRef.current || !focusable) return;
     return focusCtx.register(focusIdRef.current, nodeRef.current);
-  }, [focusCtx, focusable]);
+  }, [focusCtx, focusable, nodeReady]);
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current) return;
     const fid = focusIdRef.current;
@@ -3162,7 +3190,7 @@ function List({
     return focusCtx.onFocusChange((newId) => {
       setIsFocused(newId === fid);
     });
-  }, [focusCtx]);
+  }, [focusCtx, nodeReady]);
   const findFirstEnabled = React15.useCallback(
     (fromEnd) => {
       const start = fromEnd ? count - 1 : 0;
@@ -3212,7 +3240,7 @@ function List({
       return false;
     };
     return inputCtx.registerInputHandler(fid, handler);
-  }, [inputCtx, focusCtx, focusable, selectedIndex, setIndex, findNextEnabled, findFirstEnabled, disabledIndices]);
+  }, [inputCtx, focusCtx, focusable, selectedIndex, setIndex, findNextEnabled, findFirstEnabled, disabledIndices, nodeReady]);
   const items = [];
   for (let i = 0; i < count; i++) {
     items.push(
@@ -3232,6 +3260,11 @@ function List({
         if (node) {
           nodeRef.current = node;
           focusIdRef.current = node.focusId;
+          setNodeReady(true);
+        } else {
+          nodeRef.current = null;
+          focusIdRef.current = null;
+          setNodeReady(false);
         }
       }
     },
@@ -3513,6 +3546,7 @@ function Select({
   const focusIdRef = React15.useRef(null);
   const onChangeRef = React15.useRef(onChange);
   onChangeRef.current = onChange;
+  const [nodeReady, setNodeReady] = React15.useState(false);
   const [isFocused, setIsFocused] = React15.useState(false);
   const [isOpen, setIsOpen] = React15.useState(false);
   const [highlightIndex, setHighlightIndex] = React15.useState(0);
@@ -3545,11 +3579,11 @@ function Select({
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current || !nodeRef.current) return;
     return focusCtx.register(focusIdRef.current, nodeRef.current);
-  }, [focusCtx]);
+  }, [focusCtx, nodeReady]);
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current) return;
     focusCtx.setSkippable(focusIdRef.current, !!disabled);
-  }, [focusCtx, disabled]);
+  }, [focusCtx, disabled, nodeReady]);
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current) return;
     const fid = focusIdRef.current;
@@ -3557,7 +3591,7 @@ function Select({
     return focusCtx.onFocusChange((newId) => {
       setIsFocused(newId === fid);
     });
-  }, [focusCtx]);
+  }, [focusCtx, nodeReady]);
   const findNextEnabled = React15.useCallback(
     (from, direction) => {
       let next = from + direction;
@@ -3669,7 +3703,8 @@ function Select({
     searchable,
     searchText,
     findNextEnabled,
-    ensureVisible
+    ensureVisible,
+    nodeReady
   ]);
   const useDefaultBorder = !style?.bg && style?.border === void 0;
   const triggerStyle = {
@@ -3846,6 +3881,11 @@ function Select({
           if (node) {
             nodeRef.current = node;
             focusIdRef.current = node.focusId;
+            setNodeReady(true);
+          } else {
+            nodeRef.current = null;
+            focusIdRef.current = null;
+            setNodeReady(false);
           }
         }
       },
@@ -3873,11 +3913,12 @@ function Checkbox({
   onChangeRef.current = onChange;
   const checkedRef = React15.useRef(checked);
   checkedRef.current = checked;
+  const [nodeReady, setNodeReady] = React15.useState(false);
   const [isFocused, setIsFocused] = React15.useState(false);
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current || !nodeRef.current || disabled) return;
     return focusCtx.register(focusIdRef.current, nodeRef.current);
-  }, [focusCtx, disabled]);
+  }, [focusCtx, disabled, nodeReady]);
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current) return;
     const fid = focusIdRef.current;
@@ -3885,7 +3926,7 @@ function Checkbox({
     return focusCtx.onFocusChange((newId) => {
       setIsFocused(newId === fid);
     });
-  }, [focusCtx]);
+  }, [focusCtx, nodeReady]);
   React15.useEffect(() => {
     if (!inputCtx || !focusIdRef.current || disabled) return;
     const fid = focusIdRef.current;
@@ -3898,7 +3939,7 @@ function Checkbox({
       return false;
     };
     return inputCtx.registerInputHandler(fid, handler);
-  }, [inputCtx, focusCtx, disabled]);
+  }, [inputCtx, focusCtx, disabled, nodeReady]);
   const mergedStyle = {
     flexDirection: "row",
     gap: 1,
@@ -3921,6 +3962,11 @@ function Checkbox({
         if (node) {
           nodeRef.current = node;
           focusIdRef.current = node.focusId;
+          setNodeReady(true);
+        } else {
+          nodeRef.current = null;
+          focusIdRef.current = null;
+          setNodeReady(false);
         }
       }
     },
@@ -3956,6 +4002,7 @@ function Radio({
   const focusIdRef = React15.useRef(null);
   const onChangeRef = React15.useRef(onChange);
   onChangeRef.current = onChange;
+  const [nodeReady, setNodeReady] = React15.useState(false);
   const [isFocused, setIsFocused] = React15.useState(false);
   const [highlightedIndex, setHighlightedIndex] = React15.useState(() => {
     const selectedIdx = items.findIndex((item) => item.value === value);
@@ -3976,7 +4023,7 @@ function Radio({
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current || !nodeRef.current || disabled) return;
     return focusCtx.register(focusIdRef.current, nodeRef.current);
-  }, [focusCtx, disabled]);
+  }, [focusCtx, disabled, nodeReady]);
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current) return;
     const fid = focusIdRef.current;
@@ -3984,7 +4031,7 @@ function Radio({
     return focusCtx.onFocusChange((newId) => {
       setIsFocused(newId === fid);
     });
-  }, [focusCtx]);
+  }, [focusCtx, nodeReady]);
   React15.useEffect(() => {
     if (!inputCtx || !focusIdRef.current || disabled) return;
     const fid = focusIdRef.current;
@@ -4008,7 +4055,7 @@ function Radio({
       return false;
     };
     return inputCtx.registerInputHandler(fid, handler);
-  }, [inputCtx, focusCtx, disabled, items, highlightedIndex, findNextEnabled]);
+  }, [inputCtx, focusCtx, disabled, items, highlightedIndex, findNextEnabled, nodeReady]);
   React15.useEffect(() => {
     const selectedIdx = items.findIndex((item) => item.value === value);
     if (selectedIdx >= 0) {
@@ -4061,6 +4108,11 @@ function Radio({
         if (node) {
           nodeRef.current = node;
           focusIdRef.current = node.focusId;
+          setNodeReady(true);
+        } else {
+          nodeRef.current = null;
+          focusIdRef.current = null;
+          setNodeReady(false);
         }
       }
     },
@@ -4295,6 +4347,221 @@ function DialogOverlay({ dialog, onDismiss }) {
     )
   );
 }
+var JumpNavContext = React15.createContext(null);
+function generateHints(count, chars) {
+  const hints = [];
+  const charList = chars.split("");
+  if (count <= charList.length) {
+    for (let i = 0; i < count; i++) {
+      hints.push(charList[i]);
+    }
+  } else {
+    for (let i = 0; i < charList.length && hints.length < count; i++) {
+      for (let j = 0; j < charList.length && hints.length < count; j++) {
+        hints.push(charList[i] + charList[j]);
+      }
+    }
+  }
+  return hints;
+}
+function JumpNav({
+  children,
+  activationKey = "ctrl+o",
+  hintStyle,
+  hintBg = "yellow",
+  hintFg = "black",
+  hintChars = "asdfghjklqwertyuiopzxcvbnm",
+  enabled = true
+}) {
+  const [isActive, setIsActive] = React15.useState(false);
+  const [inputBuffer, setInputBuffer] = React15.useState("");
+  const [hasChildJumpNav, setHasChildJumpNav] = React15.useState(false);
+  const [elements, setElements] = React15.useState([]);
+  const inputCtx = React15.useContext(InputContext);
+  const focusCtx = React15.useContext(FocusContext);
+  const layoutCtx = React15.useContext(LayoutContext);
+  const parentJumpNav = React15.useContext(JumpNavContext);
+  const wrapperRef = React15.useRef(null);
+  React15.useEffect(() => {
+    if (parentJumpNav) {
+      return parentJumpNav.registerChildJumpNav();
+    }
+  }, [parentJumpNav]);
+  const contextValue = React15.useMemo(() => ({
+    isChildActive: hasChildJumpNav,
+    registerChildJumpNav: () => {
+      setHasChildJumpNav(true);
+      return () => setHasChildJumpNav(false);
+    }
+  }), [hasChildJumpNav]);
+  const parseKey = React15.useCallback((keyStr) => {
+    const parts = keyStr.toLowerCase().split("+");
+    return {
+      ctrl: parts.includes("ctrl"),
+      alt: parts.includes("alt"),
+      shift: parts.includes("shift"),
+      meta: parts.includes("meta"),
+      name: parts[parts.length - 1] ?? ""
+    };
+  }, []);
+  const activationKeyParsed = parseKey(activationKey);
+  const findFocusableDescendants = React15.useCallback((node) => {
+    const result = [];
+    function walk(n) {
+      if (n.focusId) {
+        result.push({
+          id: n.focusId,
+          node: n,
+          layout: layoutCtx?.getLayout(n) ?? n.layout
+        });
+      }
+      for (const child of n.children) {
+        walk(child);
+      }
+    }
+    walk(node);
+    return result;
+  }, [layoutCtx]);
+  const refreshElements = React15.useCallback(() => {
+    if (!wrapperRef.current) return;
+    const descendants = findFocusableDescendants(wrapperRef.current);
+    descendants.sort((a, b) => {
+      if (a.layout.y !== b.layout.y) {
+        return a.layout.y - b.layout.y;
+      }
+      return a.layout.x - b.layout.x;
+    });
+    setElements(descendants);
+  }, [findFocusableDescendants]);
+  const wasActiveRef = React15.useRef(false);
+  React15.useEffect(() => {
+    if (isActive && !wasActiveRef.current) {
+      refreshElements();
+    }
+    wasActiveRef.current = isActive;
+  }, [isActive, refreshElements]);
+  const visibleElements = elements.filter(
+    (el) => el.layout.width > 0 && el.layout.height > 0
+  );
+  const visibleHints = generateHints(visibleElements.length, hintChars);
+  const visibleHintMap = React15.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    visibleElements.forEach((el, i) => {
+      if (visibleHints[i]) {
+        map.set(visibleHints[i], el.id);
+      }
+    });
+    return map;
+  }, [visibleElements, visibleHints]);
+  React15.useEffect(() => {
+    if (!inputCtx || !enabled) return;
+    const handler = (key) => {
+      if (!isActive && !hasChildJumpNav && key.name === activationKeyParsed.name && !!key.ctrl === activationKeyParsed.ctrl && !!key.alt === activationKeyParsed.alt && !!key.shift === activationKeyParsed.shift && !!key.meta === activationKeyParsed.meta) {
+        setIsActive(true);
+        setInputBuffer("");
+        return true;
+      }
+      if (isActive) {
+        if (key.name === "escape") {
+          setIsActive(false);
+          setInputBuffer("");
+          return true;
+        }
+        if (key.name === "backspace") {
+          setInputBuffer("");
+          return true;
+        }
+        if (key.sequence && key.sequence.length === 1 && /[a-z]/i.test(key.sequence)) {
+          const newBuffer = inputBuffer + key.sequence.toLowerCase();
+          const targetId = visibleHintMap.get(newBuffer);
+          if (targetId) {
+            focusCtx?.requestFocus(targetId);
+            setIsActive(false);
+            setInputBuffer("");
+            return true;
+          }
+          const hasPartialMatch = [...visibleHintMap.keys()].some((h) => h.startsWith(newBuffer));
+          if (hasPartialMatch) {
+            setInputBuffer(newBuffer);
+            return true;
+          }
+          setInputBuffer("");
+          return true;
+        }
+        return true;
+      }
+      return false;
+    };
+    return inputCtx.subscribePriority(handler);
+  }, [inputCtx, enabled, isActive, activationKeyParsed, inputBuffer, visibleHintMap, focusCtx, hasChildJumpNav]);
+  const hintsOverlay = isActive ? React15__default.default.createElement(
+    React15__default.default.Fragment,
+    null,
+    ...visibleElements.map((el, i) => {
+      const hint = visibleHints[i];
+      if (!hint) return null;
+      const { x, y } = el.layout;
+      const isPartialMatch = hint.startsWith(inputBuffer) && inputBuffer.length > 0;
+      return React15__default.default.createElement(
+        "box",
+        {
+          key: el.id,
+          style: {
+            position: "absolute",
+            top: y,
+            left: Math.max(0, x - hint.length - 2),
+            bg: isPartialMatch ? "cyan" : hintBg,
+            color: hintFg,
+            paddingX: 1,
+            zIndex: 99999,
+            ...hintStyle
+          }
+        },
+        React15__default.default.createElement("text", {
+          style: { bold: true, color: hintFg }
+        }, hint)
+      );
+    }),
+    // Status bar at bottom
+    React15__default.default.createElement(
+      "box",
+      {
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          bg: "blackBright",
+          paddingX: 1,
+          zIndex: 99999
+        }
+      },
+      React15__default.default.createElement("text", {
+        style: { color: "white" }
+      }, inputBuffer ? `Jump: ${inputBuffer}_` : "Press a key to jump \u2022 ESC to cancel")
+    )
+  ) : null;
+  const wrappedChildren = React15__default.default.createElement(
+    "box",
+    {
+      ref: (node) => {
+        wrapperRef.current = node;
+      },
+      style: {
+        // Invisible wrapper - takes full size of parent
+        flexGrow: 1,
+        flexDirection: "column"
+      }
+    },
+    children
+  );
+  return React15__default.default.createElement(
+    JumpNavContext.Provider,
+    { value: contextValue },
+    wrappedChildren,
+    hintsOverlay
+  );
+}
 function useFocus(nodeRef) {
   const focusCtx = React15.useContext(FocusContext);
   const [id] = React15.useState(() => `focus-${Math.random().toString(36).slice(2, 9)}`);
@@ -4393,6 +4660,52 @@ function useApp() {
     }
   };
 }
+function useFocusRegistry() {
+  const focusCtx = React15.useContext(FocusContext);
+  const layoutCtx = React15.useContext(LayoutContext);
+  const [elements, setElements] = React15.useState([]);
+  const updateRef = React15.useRef(() => {
+  });
+  const updateElements = React15.useCallback(() => {
+    if (!focusCtx) return;
+    const registered = focusCtx.getRegisteredElements?.() ?? [];
+    const mapped = registered.map(({ id, node }) => ({
+      id,
+      node,
+      layout: layoutCtx?.getLayout(node) ?? node.layout,
+      type: node.type
+    }));
+    mapped.sort((a, b) => {
+      if (a.layout.y !== b.layout.y) {
+        return a.layout.y - b.layout.y;
+      }
+      return a.layout.x - b.layout.x;
+    });
+    setElements(mapped);
+  }, [focusCtx, layoutCtx]);
+  updateRef.current = updateElements;
+  React15.useEffect(() => {
+    if (!focusCtx) return;
+    updateElements();
+    const unsubscribe = focusCtx.onFocusChange(() => {
+      updateElements();
+    });
+    const timer = setTimeout(updateElements, 50);
+    return () => {
+      unsubscribe();
+      clearTimeout(timer);
+    };
+  }, [focusCtx, layoutCtx, updateElements]);
+  if (!focusCtx) return null;
+  return {
+    elements,
+    focusedId: focusCtx.focusedId,
+    requestFocus: focusCtx.requestFocus,
+    focusNext: focusCtx.focusNext,
+    focusPrev: focusCtx.focusPrev,
+    refresh: () => updateRef.current()
+  };
+}
 
 // src/utils/mask.ts
 function parseMask(mask) {
@@ -4500,6 +4813,7 @@ exports.Checkbox = Checkbox;
 exports.DialogHost = DialogHost;
 exports.FocusScope = FocusScope;
 exports.Input = Input;
+exports.JumpNav = JumpNav;
 exports.Keybind = Keybind;
 exports.List = List;
 exports.Menu = Menu;
@@ -4518,6 +4832,7 @@ exports.render = render;
 exports.useApp = useApp;
 exports.useDialog = useDialog;
 exports.useFocus = useFocus;
+exports.useFocusRegistry = useFocusRegistry;
 exports.useFocusable = useFocusable;
 exports.useInput = useInput;
 exports.useLayout = useLayout;