use-kbd 0.4.0 → 0.5.0

package/dist/index.js

@@ -70,9 +70,7 @@ function useActionsRegistry(options = {}) {
   const filterRedundantOverrides = useCallback((overrides2) => {
     const filtered = {};
     for (const [key, actionOrActions] of Object.entries(overrides2)) {
-      if (actionOrActions === "") {
-        continue;
-      } else if (Array.isArray(actionOrActions)) {
+      if (actionOrActions === "") ; else if (Array.isArray(actionOrActions)) {
         const nonDefaultActions = actionOrActions.filter((a) => !isDefaultBinding(key, a));
         if (nonDefaultActions.length > 0) {
           filtered[key] = nonDefaultActions.length === 1 ? nonDefaultActions[0] : nonDefaultActions;
@@ -136,10 +134,10 @@ function useActionsRegistry(options = {}) {
     actionsRef.current.delete(id);
     setActionsVersion((v) => v + 1);
   }, []);
-  const execute = useCallback((id) => {
+  const execute = useCallback((id, captures) => {
     const action = actionsRef.current.get(id);
     if (action && (action.config.enabled ?? true)) {
-      action.config.handler();
+      action.config.handler(void 0, captures);
     }
   }, []);
   const keymap = useMemo(() => {
@@ -163,9 +161,7 @@ function useActionsRegistry(options = {}) {
       }
     }
     for (const [key, actionOrActions] of Object.entries(overrides)) {
-      if (actionOrActions === "") {
-        continue;
-      } else {
+      if (actionOrActions === "") ; else {
         const actions2 = Array.isArray(actionOrActions) ? actionOrActions : [actionOrActions];
         for (const actionId of actions2) {
           addToKey(key, actionId);
@@ -281,6 +277,70 @@ function useActionsRegistry(options = {}) {
     resetOverrides
   ]);
 }
+var OmnibarEndpointsRegistryContext = createContext(null);
+function useOmnibarEndpointsRegistry() {
+  const endpointsRef = useRef(/* @__PURE__ */ new Map());
+  const [endpointsVersion, setEndpointsVersion] = useState(0);
+  const register = useCallback((id, config) => {
+    endpointsRef.current.set(id, {
+      id,
+      config,
+      registeredAt: Date.now()
+    });
+    setEndpointsVersion((v) => v + 1);
+  }, []);
+  const unregister = useCallback((id) => {
+    endpointsRef.current.delete(id);
+    setEndpointsVersion((v) => v + 1);
+  }, []);
+  const queryEndpoint = useCallback(async (endpointId, query, pagination, signal) => {
+    const ep = endpointsRef.current.get(endpointId);
+    if (!ep) return null;
+    if (ep.config.enabled === false) return null;
+    if (query.length < (ep.config.minQueryLength ?? 2)) return null;
+    try {
+      const response = await ep.config.fetch(query, signal, pagination);
+      const entriesWithGroup = response.entries.map((entry) => ({
+        ...entry,
+        group: entry.group ?? ep.config.group
+      }));
+      return {
+        endpointId: ep.id,
+        entries: entriesWithGroup,
+        total: response.total,
+        hasMore: response.hasMore
+      };
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        return { endpointId: ep.id, entries: [] };
+      }
+      return {
+        endpointId: ep.id,
+        entries: [],
+        error: error instanceof Error ? error : new Error(String(error))
+      };
+    }
+  }, []);
+  const queryAll = useCallback(async (query, signal) => {
+    const endpoints2 = Array.from(endpointsRef.current.values());
+    const promises = endpoints2.filter((ep) => ep.config.enabled !== false).filter((ep) => query.length >= (ep.config.minQueryLength ?? 2)).map(async (ep) => {
+      const pageSize = ep.config.pageSize ?? 10;
+      const result = await queryEndpoint(ep.id, query, { offset: 0, limit: pageSize }, signal);
+      return result ?? { endpointId: ep.id, entries: [] };
+    });
+    return Promise.all(promises);
+  }, [queryEndpoint]);
+  const endpoints = useMemo(() => {
+    return new Map(endpointsRef.current);
+  }, [endpointsVersion]);
+  return useMemo(() => ({
+    register,
+    unregister,
+    endpoints,
+    queryAll,
+    queryEndpoint
+  }), [register, unregister, endpoints, queryAll, queryEndpoint]);
+}
 
 // src/constants.ts
 var DEFAULT_SEQUENCE_TIMEOUT = Infinity;
@@ -318,7 +378,11 @@ function isShiftedSymbol(key) {
 }
 function isMac() {
   if (typeof navigator === "undefined") return false;
-  return /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+  const platform = navigator.userAgentData?.platform;
+  if (platform) {
+    return platform === "macOS" || platform === "iOS";
+  }
+  return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
 }
 function normalizeKey(key) {
   const keyMap = {
@@ -353,7 +417,7 @@ function formatKeyForDisplay(key) {
     "space": "Space",
     "escape": "Esc",
     "enter": "\u21B5",
-    "tab": "Tab",
+    "tab": "\u21E5",
     "backspace": "\u232B",
     "delete": "Del",
     "arrowup": "\u2191",
@@ -493,13 +557,6 @@ function parseHotkeyString(hotkeyStr) {
   const parts = hotkeyStr.trim().split(/\s+/);
   return parts.map(parseSingleCombination);
 }
-function parseCombinationId(id) {
-  const sequence = parseHotkeyString(id);
-  if (sequence.length === 0) {
-    return { key: "", modifiers: { ctrl: false, alt: false, shift: false, meta: false } };
-  }
-  return sequence[0];
-}
 var NO_MODIFIERS = { ctrl: false, alt: false, shift: false, meta: false };
 function parseSeqElem(str) {
   if (str === "\\d") {
@@ -615,6 +672,13 @@ function isPrefix(a, b) {
 function combinationsEqual(a, b) {
   return a.key === b.key && a.modifiers.ctrl === b.modifiers.ctrl && a.modifiers.alt === b.modifiers.alt && a.modifiers.shift === b.modifiers.shift && a.modifiers.meta === b.modifiers.meta;
 }
+function keyMatchesPattern(pending, pattern) {
+  if (pending.modifiers.ctrl !== pattern.modifiers.ctrl || pending.modifiers.alt !== pattern.modifiers.alt || pending.modifiers.shift !== pattern.modifiers.shift || pending.modifiers.meta !== pattern.modifiers.meta) {
+    return false;
+  }
+  if (pending.key === pattern.key) return true;
+  return /^[0-9]$/.test(pending.key) && (pattern.key === DIGIT_PLACEHOLDER || pattern.key === DIGITS_PLACEHOLDER);
+}
 function isDigitKey(key) {
   return /^[0-9]$/.test(key);
 }
@@ -735,28 +799,77 @@ function getSequenceCompletions(pendingKeys, keymap) {
   if (pendingKeys.length === 0) return [];
   const completions = [];
   for (const [hotkeyStr, actionOrActions] of Object.entries(keymap)) {
-    const sequence = parseHotkeyString(hotkeyStr);
     const keySeq = parseKeySeq(hotkeyStr);
-    if (sequence.length <= pendingKeys.length) continue;
-    let isPrefix2 = true;
-    for (let i = 0; i < pendingKeys.length; i++) {
-      if (!combinationsEqual(pendingKeys[i], sequence[i])) {
-        isPrefix2 = false;
-        break;
+    const hasDigitsPlaceholder = keySeq.some((e) => e.type === "digits");
+    if (!hasDigitsPlaceholder && keySeq.length < pendingKeys.length) continue;
+    let keySeqIdx = 0;
+    let pendingIdx = 0;
+    let isMatch = true;
+    const captures = [];
+    let currentDigits = "";
+    for (; pendingIdx < pendingKeys.length && keySeqIdx < keySeq.length; pendingIdx++) {
+      const elem = keySeq[keySeqIdx];
+      if (elem.type === "digits") {
+        if (!/^[0-9]$/.test(pendingKeys[pendingIdx].key)) {
+          isMatch = false;
+          break;
+        }
+        currentDigits += pendingKeys[pendingIdx].key;
+        if (pendingIdx + 1 < pendingKeys.length && /^[0-9]$/.test(pendingKeys[pendingIdx + 1].key)) {
+          continue;
+        }
+        captures.push(parseInt(currentDigits, 10));
+        currentDigits = "";
+        keySeqIdx++;
+      } else if (elem.type === "digit") {
+        if (!/^[0-9]$/.test(pendingKeys[pendingIdx].key)) {
+          isMatch = false;
+          break;
+        }
+        captures.push(parseInt(pendingKeys[pendingIdx].key, 10));
+        keySeqIdx++;
+      } else {
+        const keyElem = elem;
+        const targetCombo = { key: keyElem.key, modifiers: keyElem.modifiers };
+        if (!keyMatchesPattern(pendingKeys[pendingIdx], targetCombo)) {
+          isMatch = false;
+          break;
+        }
+        keySeqIdx++;
       }
     }
-    if (isPrefix2) {
-      const remainingKeySeq = keySeq.slice(pendingKeys.length);
+    if (pendingIdx < pendingKeys.length) {
+      isMatch = false;
+    }
+    if (!isMatch) continue;
+    const actions = Array.isArray(actionOrActions) ? actionOrActions : [actionOrActions];
+    if (keySeqIdx === keySeq.length) {
+      completions.push({
+        nextKeys: "",
+        fullSequence: hotkeyStr,
+        display: formatKeySeq(keySeq),
+        actions,
+        isComplete: true,
+        captures: captures.length > 0 ? captures : void 0
+      });
+    } else {
+      const remainingKeySeq = keySeq.slice(keySeqIdx);
       const nextKeys = formatKeySeq(remainingKeySeq).display;
-      const actions = Array.isArray(actionOrActions) ? actionOrActions : [actionOrActions];
       completions.push({
         nextKeys,
+        nextKeySeq: remainingKeySeq,
         fullSequence: hotkeyStr,
         display: formatKeySeq(keySeq),
-        actions
+        actions,
+        isComplete: false,
+        captures: captures.length > 0 ? captures : void 0
       });
     }
   }
+  completions.sort((a, b) => {
+    if (a.isComplete !== b.isComplete) return a.isComplete ? -1 : 1;
+    return a.fullSequence.localeCompare(b.fullSequence);
+  });
   return completions;
 }
 function getActionBindings(keymap) {
@@ -847,7 +960,7 @@ function searchActions(query, actions, keymap) {
     }
     const matched = labelMatch.matched || descMatch.matched || groupMatch.matched || idMatch.matched || keywordScore > 0;
     if (!matched && query) continue;
-    const score = (labelMatch.matched ? labelMatch.score * 3 : 0) + (descMatch.matched ? descMatch.score * 1.5 : 0) + (groupMatch.matched ? groupMatch.score * 1 : 0) + (idMatch.matched ? idMatch.score * 0.5 : 0) + keywordScore * 2;
+    const score = (labelMatch.matched ? labelMatch.score * 3 : 0) + (descMatch.matched ? descMatch.score * 1.5 : 0) + (groupMatch.matched ? groupMatch.score : 0) + (idMatch.matched ? idMatch.score * 0.5 : 0) + keywordScore * 2;
     results.push({
       id,
       action,
@@ -925,6 +1038,9 @@ function advanceMatchState(state, pattern, combo) {
         const digitValue = parseInt(elem.partial, 10);
         newState[i] = { type: "digits", value: digitValue };
         pos = i + 1;
+        if (pos >= pattern.length) {
+          return { status: "failed" };
+        }
         break;
       }
     }
@@ -1047,7 +1163,7 @@ function useHotkeys(keymap, handlers, options = {}) {
     }
     return false;
   }, [preventDefault, stopPropagation]);
-  const tryExecuteKeySeq = useCallback((matchKey, matchState, captures, e) => {
+  const tryExecuteKeySeq = useCallback((matchKey, captures, e) => {
     for (const entry of parsedKeymapRef.current) {
       if (entry.key === matchKey) {
         for (const action of entry.actions) {
@@ -1103,7 +1219,24 @@ function useHotkeys(keymap, handlers, options = {}) {
       }
       if (e.key === "Enter" && pendingKeysRef.current.length > 0) {
         e.preventDefault();
-        const executed = tryExecute(pendingKeysRef.current, e);
+        let executed = false;
+        for (const [key, state] of matchStatesRef.current.entries()) {
+          const finalizedState = isCollectingDigits(state) ? finalizeDigits(state) : state;
+          const isComplete = finalizedState.every((elem) => {
+            if (elem.type === "key") return elem.matched === true;
+            if (elem.type === "digit") return elem.value !== void 0;
+            if (elem.type === "digits") return elem.value !== void 0;
+            return false;
+          });
+          if (isComplete) {
+            const captures = extractMatchCaptures(finalizedState);
+            executed = tryExecuteKeySeq(key, captures, e);
+            if (executed) break;
+          }
+        }
+        if (!executed) {
+          executed = tryExecute(pendingKeysRef.current, e);
+        }
         clearPending();
         if (!executed) {
           onSequenceCancel?.();
@@ -1116,14 +1249,57 @@ function useHotkeys(keymap, handlers, options = {}) {
         return;
       }
       const currentCombo = eventToCombination(e);
+      if (e.key === "Backspace" && pendingKeysRef.current.length > 0) {
+        let backspaceMatches = false;
+        for (const entry of parsedKeymapRef.current) {
+          let state = matchStatesRef.current.get(entry.key);
+          if (!state) {
+            state = initMatchState(entry.keySeq);
+          }
+          if (isCollectingDigits(state)) {
+            continue;
+          }
+          const result = advanceMatchState(state, entry.keySeq, currentCombo);
+          if (result.status === "matched" || result.status === "partial") {
+            backspaceMatches = true;
+            break;
+          }
+        }
+        if (!backspaceMatches) {
+          e.preventDefault();
+          const newPending = pendingKeysRef.current.slice(0, -1);
+          if (newPending.length === 0) {
+            clearPending();
+            onSequenceCancel?.();
+          } else {
+            setPendingKeys(newPending);
+            matchStatesRef.current.clear();
+            for (const combo of newPending) {
+              for (const entry of parsedKeymapRef.current) {
+                let state = matchStatesRef.current.get(entry.key);
+                if (!state) {
+                  state = initMatchState(entry.keySeq);
+                }
+                const result = advanceMatchState(state, entry.keySeq, combo);
+                if (result.status === "partial") {
+                  matchStatesRef.current.set(entry.key, result.state);
+                } else {
+                  matchStatesRef.current.delete(entry.key);
+                }
+              }
+            }
+          }
+          return;
+        }
+      }
       const newSequence = [...pendingKeysRef.current, currentCombo];
-      let keySeqMatched = false;
-      let keySeqPartial = false;
+      const completeMatches = [];
+      let hasPartials = false;
       const matchStates = matchStatesRef.current;
-      const hasPartialMatches = matchStates.size > 0;
+      const hadPartialMatches = matchStates.size > 0;
       for (const entry of parsedKeymapRef.current) {
         let state = matchStates.get(entry.key);
-        if (hasPartialMatches && !state) {
+        if (hadPartialMatches && !state) {
           continue;
         }
         if (!state) {
@@ -1132,22 +1308,27 @@ function useHotkeys(keymap, handlers, options = {}) {
         }
         const result = advanceMatchState(state, entry.keySeq, currentCombo);
         if (result.status === "matched") {
-          if (tryExecuteKeySeq(entry.key, result.state, result.captures, e)) {
-            clearPending();
-            keySeqMatched = true;
-            break;
-          }
+          completeMatches.push({
+            key: entry.key,
+            state: result.state,
+            captures: result.captures
+          });
+          matchStates.delete(entry.key);
         } else if (result.status === "partial") {
           matchStates.set(entry.key, result.state);
-          keySeqPartial = true;
+          hasPartials = true;
         } else {
           matchStates.delete(entry.key);
         }
       }
-      if (keySeqMatched) {
-        return;
+      if (completeMatches.length === 1 && !hasPartials) {
+        const match = completeMatches[0];
+        if (tryExecuteKeySeq(match.key, match.captures, e)) {
+          clearPending();
+          return;
+        }
       }
-      if (keySeqPartial) {
+      if (completeMatches.length > 0 || hasPartials) {
         setPendingKeys(newSequence);
         setIsAwaitingSequence(true);
         if (pendingKeysRef.current.length === 0) {
@@ -1230,8 +1411,11 @@ function useHotkeys(keymap, handlers, options = {}) {
         }
       }
       if (pendingKeysRef.current.length > 0) {
-        clearPending();
-        onSequenceCancel?.();
+        setPendingKeys(newSequence);
+        if (preventDefault) {
+          e.preventDefault();
+        }
+        return;
       }
       const singleMatch = tryExecute([currentCombo], e);
       if (!singleMatch) {
@@ -1293,7 +1477,8 @@ var HotkeysContext = createContext(null);
 var DEFAULT_CONFIG = {
   storageKey: "use-kbd",
   sequenceTimeout: DEFAULT_SEQUENCE_TIMEOUT,
-  disableConflicts: true,
+  disableConflicts: false,
+  // Keep conflicting bindings active; SeqM handles disambiguation
   minViewportWidth: 768,
   enableOnTouch: false
 };
@@ -1306,6 +1491,7 @@ function HotkeysProvider({
     ...configProp
   }), [configProp]);
   const registry = useActionsRegistry({ storageKey: config.storageKey });
+  const endpointsRegistry = useOmnibarEndpointsRegistry();
   const [isEnabled, setIsEnabled] = useState(true);
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -1397,6 +1583,7 @@ function HotkeysProvider({
   );
   const value = useMemo(() => ({
     registry,
+    endpointsRegistry,
     isEnabled,
     isModalOpen,
     openModal,
@@ -1424,6 +1611,7 @@ function HotkeysProvider({
     getCompletions
   }), [
     registry,
+    endpointsRegistry,
     isEnabled,
     isModalOpen,
     openModal,
@@ -1448,7 +1636,7 @@ function HotkeysProvider({
     searchActionsHelper,
     getCompletions
   ]);
-  return /* @__PURE__ */ jsx(ActionsRegistryContext.Provider, { value: registry, children: /* @__PURE__ */ jsx(HotkeysContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsx(ActionsRegistryContext.Provider, { value: registry, children: /* @__PURE__ */ jsx(OmnibarEndpointsRegistryContext.Provider, { value: endpointsRegistry, children: /* @__PURE__ */ jsx(HotkeysContext.Provider, { value, children }) }) });
 }
 function useHotkeysContext() {
   const context = useContext(HotkeysContext);
@@ -1536,6 +1724,38 @@ function useActions(actions) {
     )
   ]);
 }
+function useOmnibarEndpoint(id, config) {
+  const registry = useContext(OmnibarEndpointsRegistryContext);
+  if (!registry) {
+    throw new Error("useOmnibarEndpoint must be used within a HotkeysProvider");
+  }
+  const registryRef = useRef(registry);
+  registryRef.current = registry;
+  const fetchRef = useRef(config.fetch);
+  fetchRef.current = config.fetch;
+  const enabledRef = useRef(config.enabled ?? true);
+  enabledRef.current = config.enabled ?? true;
+  useEffect(() => {
+    registryRef.current.register(id, {
+      ...config,
+      fetch: async (query, signal, pagination) => {
+        if (!enabledRef.current) return { entries: [] };
+        return fetchRef.current(query, signal, pagination);
+      }
+    });
+    return () => {
+      registryRef.current.unregister(id);
+    };
+  }, [
+    id,
+    config.group,
+    config.priority,
+    config.minQueryLength,
+    config.pageSize,
+    config.pagination
+    // Note: we use refs for fetch and enabled, so they don't cause re-registration
+  ]);
+}
 function useEventCallback(fn) {
   const ref = useRef(fn);
   ref.current = fn;
@@ -1784,7 +2004,6 @@ function useRecordHotkey(options = {}) {
     };
   }, [isRecording, preventDefault, sequenceTimeout, clearTimeout_, submit, cancel, onCapture, onTab, onShiftTab]);
   const display = sequence ? formatCombination(sequence) : null;
-  const combination = sequence && sequence.length > 0 ? sequence[0] : null;
   return {
     isRecording,
     startRecording,
@@ -1794,13 +2013,11 @@ function useRecordHotkey(options = {}) {
     display,
     pendingKeys,
     activeKeys,
-    sequenceTimeout,
-    combination
-    // deprecated
+    sequenceTimeout
   };
 }
 function useEditableHotkeys(defaults, handlers, options = {}) {
-  const { storageKey, disableConflicts = true, ...hotkeyOptions } = options;
+  const { storageKey, disableConflicts = false, ...hotkeyOptions } = options;
   const [overrides, setOverrides] = useState(() => {
     if (!storageKey || typeof window === "undefined") return {};
     try {
@@ -1896,6 +2113,7 @@ function useEditableHotkeys(defaults, handlers, options = {}) {
   };
 }
 var { max: max2, min } = Math;
+var DEFAULT_DEBOUNCE_MS = 150;
 function useOmnibar(options) {
   const {
     actions,
@@ -1904,17 +2122,27 @@ function useOmnibar(options) {
     openKey = "meta+k",
     enabled = true,
     onExecute,
+    onExecuteRemote,
     onOpen,
     onClose,
-    maxResults = 10
+    maxResults = 10,
+    endpointsRegistry,
+    debounceMs = DEFAULT_DEBOUNCE_MS
   } = options;
   const [isOpen, setIsOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [endpointStates, setEndpointStates] = useState(/* @__PURE__ */ new Map());
   const handlersRef = useRef(handlers);
   handlersRef.current = handlers;
   const onExecuteRef = useRef(onExecute);
   onExecuteRef.current = onExecute;
+  const onExecuteRemoteRef = useRef(onExecuteRemote);
+  onExecuteRemoteRef.current = onExecuteRemote;
+  const abortControllerRef = useRef(null);
+  const debounceTimerRef = useRef(null);
+  const currentQueryRef = useRef(query);
+  currentQueryRef.current = query;
   const omnibarKeymap = useMemo(() => {
     if (!enabled) return {};
     return { [openKey]: "omnibar:toggle" };
@@ -1940,12 +2168,189 @@ function useOmnibar(options) {
     const allResults = searchActions(query, actions, keymap);
     return allResults.slice(0, maxResults);
   }, [query, actions, keymap, maxResults]);
+  useEffect(() => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = null;
+    }
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    if (!endpointsRegistry || !query.trim()) {
+      setEndpointStates(/* @__PURE__ */ new Map());
+      return;
+    }
+    setEndpointStates((prev) => {
+      const next = new Map(prev);
+      for (const [id] of endpointsRegistry.endpoints) {
+        next.set(id, { entries: [], offset: 0, isLoading: true });
+      }
+      return next;
+    });
+    debounceTimerRef.current = setTimeout(async () => {
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      try {
+        const endpointResults = await endpointsRegistry.queryAll(query, controller.signal);
+        if (controller.signal.aborted) return;
+        setEndpointStates(() => {
+          const next = /* @__PURE__ */ new Map();
+          for (const epResult of endpointResults) {
+            const ep = endpointsRegistry.endpoints.get(epResult.endpointId);
+            const pageSize = ep?.config.pageSize ?? 10;
+            next.set(epResult.endpointId, {
+              entries: epResult.entries,
+              offset: pageSize,
+              total: epResult.total,
+              hasMore: epResult.hasMore ?? (epResult.total !== void 0 ? epResult.entries.length < epResult.total : void 0),
+              isLoading: false
+            });
+          }
+          return next;
+        });
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") return;
+        console.error("Omnibar endpoint query failed:", error);
+        setEndpointStates((prev) => {
+          const next = new Map(prev);
+          for (const [id, state] of next) {
+            next.set(id, { ...state, isLoading: false });
+          }
+          return next;
+        });
+      }
+    }, debounceMs);
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, [query, endpointsRegistry, debounceMs]);
+  const loadMore = useCallback(async (endpointId) => {
+    if (!endpointsRegistry) return;
+    const currentState = endpointStates.get(endpointId);
+    if (!currentState || currentState.isLoading) return;
+    if (currentState.hasMore === false) return;
+    const ep = endpointsRegistry.endpoints.get(endpointId);
+    if (!ep) return;
+    const pageSize = ep.config.pageSize ?? 10;
+    setEndpointStates((prev) => {
+      const next = new Map(prev);
+      const state = next.get(endpointId);
+      if (state) {
+        next.set(endpointId, { ...state, isLoading: true });
+      }
+      return next;
+    });
+    try {
+      const controller = new AbortController();
+      const result = await endpointsRegistry.queryEndpoint(
+        endpointId,
+        currentQueryRef.current,
+        { offset: currentState.offset, limit: pageSize },
+        controller.signal
+      );
+      if (!result) return;
+      setEndpointStates((prev) => {
+        const next = new Map(prev);
+        const state = next.get(endpointId);
+        if (state) {
+          next.set(endpointId, {
+            entries: [...state.entries, ...result.entries],
+            offset: state.offset + pageSize,
+            total: result.total ?? state.total,
+            hasMore: result.hasMore ?? (result.total !== void 0 ? state.entries.length + result.entries.length < result.total : void 0),
+            isLoading: false
+          });
+        }
+        return next;
+      });
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") return;
+      console.error(`Omnibar loadMore failed for ${endpointId}:`, error);
+      setEndpointStates((prev) => {
+        const next = new Map(prev);
+        const state = next.get(endpointId);
+        if (state) {
+          next.set(endpointId, { ...state, isLoading: false });
+        }
+        return next;
+      });
+    }
+  }, [endpointsRegistry, endpointStates]);
+  const remoteResults = useMemo(() => {
+    if (!endpointsRegistry) return [];
+    const processed = [];
+    for (const [endpointId, state] of endpointStates) {
+      const endpoint = endpointsRegistry.endpoints.get(endpointId);
+      const priority = endpoint?.config.priority ?? 0;
+      for (const entry of state.entries) {
+        const labelMatch = fuzzyMatch(query, entry.label);
+        const descMatch = entry.description ? fuzzyMatch(query, entry.description) : null;
+        const keywordsMatch = entry.keywords?.map((k) => fuzzyMatch(query, k)) ?? [];
+        let score = 0;
+        let labelMatches = [];
+        if (labelMatch.matched) {
+          score = Math.max(score, labelMatch.score * 3);
+          labelMatches = labelMatch.ranges;
+        }
+        if (descMatch?.matched) {
+          score = Math.max(score, descMatch.score * 1.5);
+        }
+        for (const km of keywordsMatch) {
+          if (km.matched) {
+            score = Math.max(score, km.score * 2);
+          }
+        }
+        processed.push({
+          id: `${endpointId}:${entry.id}`,
+          entry,
+          endpointId,
+          priority,
+          score: score || 1,
+          labelMatches
+        });
+      }
+    }
+    processed.sort((a, b) => {
+      if (a.priority !== b.priority) return b.priority - a.priority;
+      return b.score - a.score;
+    });
+    return processed;
+  }, [endpointStates, endpointsRegistry, query]);
+  const isLoadingRemote = useMemo(() => {
+    for (const [, state] of endpointStates) {
+      if (state.isLoading) return true;
+    }
+    return false;
+  }, [endpointStates]);
+  const endpointPagination = useMemo(() => {
+    const info = /* @__PURE__ */ new Map();
+    if (!endpointsRegistry) return info;
+    for (const [endpointId, state] of endpointStates) {
+      const ep = endpointsRegistry.endpoints.get(endpointId);
+      info.set(endpointId, {
+        endpointId,
+        loaded: state.entries.length,
+        total: state.total,
+        hasMore: state.hasMore ?? false,
+        isLoading: state.isLoading,
+        mode: ep?.config.pagination ?? "none"
+      });
+    }
+    return info;
+  }, [endpointStates, endpointsRegistry]);
+  const totalResults = results.length + remoteResults.length;
   const completions = useMemo(() => {
     return getSequenceCompletions(pendingKeys, keymap);
   }, [pendingKeys, keymap]);
   useEffect(() => {
     setSelectedIndex(0);
-  }, [results]);
+  }, [results, remoteResults]);
   const open = useCallback(() => {
     setIsOpen(true);
     setQuery("");
@@ -1972,8 +2377,8 @@ function useOmnibar(options) {
     });
   }, [onOpen, onClose]);
   const selectNext = useCallback(() => {
-    setSelectedIndex((prev) => min(prev + 1, results.length - 1));
-  }, [results.length]);
+    setSelectedIndex((prev) => min(prev + 1, totalResults - 1));
+  }, [totalResults]);
   const selectPrev = useCallback(() => {
     setSelectedIndex((prev) => max2(prev - 1, 0));
   }, []);
@@ -1981,15 +2386,47 @@ function useOmnibar(options) {
     setSelectedIndex(0);
   }, []);
   const execute = useCallback((actionId) => {
-    const id = actionId ?? results[selectedIndex]?.id;
-    if (!id) return;
-    close();
-    if (handlersRef.current?.[id]) {
-      const event = new KeyboardEvent("keydown", { key: "Enter" });
-      handlersRef.current[id](event);
-    }
-    onExecuteRef.current?.(id);
-  }, [results, selectedIndex, close]);
+    const localCount = results.length;
+    if (actionId) {
+      const remoteResult = remoteResults.find((r) => r.id === actionId);
+      if (remoteResult) {
+        close();
+        const entry = remoteResult.entry;
+        if ("handler" in entry && entry.handler) {
+          entry.handler();
+        }
+        onExecuteRemoteRef.current?.(entry);
+        return;
+      }
+      close();
+      if (handlersRef.current?.[actionId]) {
+        const event = new KeyboardEvent("keydown", { key: "Enter" });
+        handlersRef.current[actionId](event);
+      }
+      onExecuteRef.current?.(actionId);
+      return;
+    }
+    if (selectedIndex < localCount) {
+      const id = results[selectedIndex]?.id;
+      if (!id) return;
+      close();
+      if (handlersRef.current?.[id]) {
+        const event = new KeyboardEvent("keydown", { key: "Enter" });
+        handlersRef.current[id](event);
+      }
+      onExecuteRef.current?.(id);
+    } else {
+      const remoteIndex = selectedIndex - localCount;
+      const remoteResult = remoteResults[remoteIndex];
+      if (!remoteResult) return;
+      close();
+      const entry = remoteResult.entry;
+      if ("handler" in entry && entry.handler) {
+        entry.handler();
+      }
+      onExecuteRemoteRef.current?.(entry);
+    }
+  }, [results, remoteResults, selectedIndex, close]);
   useEffect(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
@@ -2031,7 +2468,12 @@ function useOmnibar(options) {
     query,
     setQuery,
     results,
+    remoteResults,
+    isLoadingRemote,
+    endpointPagination,
+    loadMore,
     selectedIndex,
+    totalResults,
     selectNext,
     selectPrev,
     execute,
@@ -2149,6 +2591,26 @@ function Backspace({ className, style }) {
     }
   );
 }
+function Tab({ className, style }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      style: { ...baseStyle, ...style },
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "16", y2: "12" }),
+        /* @__PURE__ */ jsx("polyline", { points: "12 8 16 12 12 16" }),
+        /* @__PURE__ */ jsx("line", { x1: "20", y1: "6", x2: "20", y2: "18" })
+      ]
+    }
+  );
+}
 function getKeyIcon(key) {
   switch (key.toLowerCase()) {
     case "arrowup":
@@ -2163,6 +2625,8 @@ function getKeyIcon(key) {
       return Enter;
     case "backspace":
       return Backspace;
+    case "tab":
+      return Tab;
     default:
       return null;
   }
@@ -2267,7 +2731,6 @@ var Alt = forwardRef(
   )
 );
 Alt.displayName = "Alt";
-var isMac2 = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 function getModifierIcon(modifier) {
   switch (modifier) {
     case "meta":
@@ -2279,7 +2742,7 @@ function getModifierIcon(modifier) {
     case "opt":
       return Option;
     case "alt":
-      return isMac2 ? Option : Alt;
+      return isMac() ? Option : Alt;
   }
 }
 var ModifierIcon = forwardRef(
@@ -2289,28 +2752,47 @@ var ModifierIcon = forwardRef(
   }
 );
 ModifierIcon.displayName = "ModifierIcon";
-function KeyCombo({ combo }) {
-  const { key, modifiers } = combo;
-  const parts = [];
+function renderModifierIcons(modifiers, className = "kbd-modifier-icon") {
+  const icons = [];
   if (modifiers.meta) {
-    parts.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "meta", className: "kbd-modifier-icon" }, "meta"));
+    icons.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "meta", className }, "meta"));
   }
   if (modifiers.ctrl) {
-    parts.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "ctrl", className: "kbd-modifier-icon" }, "ctrl"));
+    icons.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "ctrl", className }, "ctrl"));
   }
   if (modifiers.alt) {
-    parts.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "alt", className: "kbd-modifier-icon" }, "alt"));
+    icons.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "alt", className }, "alt"));
   }
   if (modifiers.shift) {
-    parts.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "shift", className: "kbd-modifier-icon" }, "shift"));
+    icons.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "shift", className }, "shift"));
   }
-  const KeyIcon = getKeyIcon(key);
-  if (KeyIcon) {
-    parts.push(/* @__PURE__ */ jsx(KeyIcon, { className: "kbd-key-icon" }, "key"));
-  } else {
-    parts.push(/* @__PURE__ */ jsx("span", { children: formatKeyForDisplay(key) }, "key"));
+  return icons;
+}
+function renderKeyContent(key, iconClassName = "kbd-key-icon") {
+  const Icon = getKeyIcon(key);
+  const displayKey = formatKeyForDisplay(key);
+  return Icon ? /* @__PURE__ */ jsx(Icon, { className: iconClassName }) : /* @__PURE__ */ jsx(Fragment, { children: displayKey });
+}
+function renderSeqElem(elem, index, kbdClassName = "kbd-kbd") {
+  if (elem.type === "digit") {
+    return /* @__PURE__ */ jsx("kbd", { className: kbdClassName, children: "\u27E8#\u27E9" }, index);
+  }
+  if (elem.type === "digits") {
+    return /* @__PURE__ */ jsx("kbd", { className: kbdClassName, children: "\u27E8##\u27E9" }, index);
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: parts });
+  return /* @__PURE__ */ jsxs("kbd", { className: kbdClassName, children: [
+    renderModifierIcons(elem.modifiers),
+    renderKeyContent(elem.key)
+  ] }, index);
+}
+function renderKeySeq(keySeq, kbdClassName = "kbd-kbd") {
+  return keySeq.map((elem, i) => renderSeqElem(elem, i, kbdClassName));
+}
+function KeyCombo({ combo }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderModifierIcons(combo.modifiers),
+    renderKeyContent(combo.key)
+  ] });
 }
 function SeqElemDisplay({ elem }) {
   if (elem.type === "digit") {
@@ -2462,7 +2944,7 @@ function KeybindingEditor({
     return Array.from(allActions).map((action) => {
       const key = actionMap.get(action) ?? defaultActionMap.get(action) ?? "";
       const defaultKey = defaultActionMap.get(action) ?? "";
-      const combo = parseCombinationId(key);
+      const combo = parseHotkeyString(key);
       const display = formatCombination(combo);
       const conflictActions = conflicts.get(key);
       return {
@@ -2619,15 +3101,30 @@ function LookupModal({ defaultBinding = "meta+shift+k" } = {}) {
   const filteredBindings = useMemo(() => {
     if (pendingKeys.length === 0) return allBindings;
     return allBindings.filter((result) => {
-      if (result.sequence.length < pendingKeys.length) return false;
-      for (let i = 0; i < pendingKeys.length; i++) {
+      const keySeq = result.keySeq;
+      if (keySeq.length < pendingKeys.length) return false;
+      let keySeqIdx = 0;
+      for (let i = 0; i < pendingKeys.length && keySeqIdx < keySeq.length; i++) {
         const pending = pendingKeys[i];
-        const target = result.sequence[i];
-        if (pending.key !== target.key) return false;
-        if (pending.modifiers.ctrl !== target.modifiers.ctrl) return false;
-        if (pending.modifiers.alt !== target.modifiers.alt) return false;
-        if (pending.modifiers.shift !== target.modifiers.shift) return false;
-        if (pending.modifiers.meta !== target.modifiers.meta) return false;
+        const elem = keySeq[keySeqIdx];
+        const isDigit2 = /^[0-9]$/.test(pending.key);
+        if (elem.type === "digits") {
+          if (!isDigit2) return false;
+          if (i + 1 < pendingKeys.length && /^[0-9]$/.test(pendingKeys[i + 1].key)) {
+            continue;
+          }
+          keySeqIdx++;
+        } else if (elem.type === "digit") {
+          if (!isDigit2) return false;
+          keySeqIdx++;
+        } else {
+          if (pending.key !== elem.key) return false;
+          if (pending.modifiers.ctrl !== elem.modifiers.ctrl) return false;
+          if (pending.modifiers.alt !== elem.modifiers.alt) return false;
+          if (pending.modifiers.shift !== elem.modifiers.shift) return false;
+          if (pending.modifiers.meta !== elem.modifiers.meta) return false;
+          keySeqIdx++;
+        }
       }
       return true;
     });
@@ -2739,7 +3236,7 @@ function LookupModal({ defaultBinding = "meta+shift+k" } = {}) {
         },
         onMouseEnter: () => setSelectedIndex(index),
         children: [
-          /* @__PURE__ */ jsx("kbd", { className: "kbd-kbd", children: result.display }),
+          /* @__PURE__ */ jsx("span", { className: "kbd-lookup-binding", children: renderKeySeq(result.keySeq) }),
           /* @__PURE__ */ jsx("span", { className: "kbd-lookup-labels", children: result.labels.join(", ") })
         ]
       },
@@ -2783,6 +3280,7 @@ function Omnibar({
   onOpen: onOpenProp,
   onClose: onCloseProp,
   onExecute: onExecuteProp,
+  onExecuteRemote: onExecuteRemoteProp,
   maxResults = 10,
   placeholder = "Type a command...",
   children,
@@ -2820,13 +3318,25 @@ function Omnibar({
       ctx.openOmnibar();
     }
   }, [onOpenProp, ctx]);
+  const handleExecuteRemote = useCallback((entry) => {
+    if (onExecuteRemoteProp) {
+      onExecuteRemoteProp(entry);
+    } else if ("href" in entry && entry.href) {
+      window.location.href = entry.href;
+    }
+  }, [onExecuteRemoteProp]);
   const {
     isOpen: internalIsOpen,
     close,
     query,
     setQuery,
     results,
+    remoteResults,
+    isLoadingRemote,
+    endpointPagination,
+    loadMore,
     selectedIndex,
+    totalResults,
     selectNext,
     selectPrev,
     execute,
@@ -2843,9 +3353,22 @@ function Omnibar({
     onOpen: handleOpen,
     onClose: handleClose,
     onExecute: handleExecute,
-    maxResults
+    onExecuteRemote: handleExecuteRemote,
+    maxResults,
+    endpointsRegistry: ctx?.endpointsRegistry
   });
   const isOpen = isOpenProp ?? ctx?.isOmnibarOpen ?? internalIsOpen;
+  const resultsContainerRef = useRef(null);
+  const sentinelRefs = useRef(/* @__PURE__ */ new Map());
+  const remoteResultsByEndpoint = useMemo(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    for (const result of remoteResults) {
+      const existing = grouped.get(result.endpointId) ?? [];
+      existing.push(result);
+      grouped.set(result.endpointId, existing);
+    }
+    return grouped;
+  }, [remoteResults]);
   useEffect(() => {
     if (isOpen) {
       requestAnimationFrame(() => {
@@ -2853,6 +3376,38 @@ function Omnibar({
       });
     }
   }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const container = resultsContainerRef.current;
+    if (!container) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          const endpointId = entry.target.dataset.endpointId;
+          if (!endpointId) continue;
+          const paginationInfo = endpointPagination.get(endpointId);
+          if (!paginationInfo) continue;
+          if (paginationInfo.mode !== "scroll") continue;
+          if (!paginationInfo.hasMore) continue;
+          if (paginationInfo.isLoading) continue;
+          loadMore(endpointId);
+        }
+      },
+      {
+        root: container,
+        rootMargin: "100px",
+        // Trigger slightly before sentinel is visible
+        threshold: 0
+      }
+    );
+    for (const [_endpointId, sentinel] of sentinelRefs.current) {
+      if (sentinel) {
+        observer.observe(sentinel);
+      }
+    }
+    return () => observer.disconnect();
+  }, [isOpen, endpointPagination, loadMore]);
   useEffect(() => {
     if (!isOpen) return;
     const handleGlobalKeyDown = (e) => {
@@ -2902,7 +3457,12 @@ function Omnibar({
       query,
       setQuery,
       results,
+      remoteResults,
+      isLoadingRemote,
+      endpointPagination,
+      loadMore,
       selectedIndex,
+      totalResults,
       selectNext,
       selectPrev,
       execute,
@@ -2930,21 +3490,61 @@ function Omnibar({
         spellCheck: false
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "kbd-omnibar-results", children: results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "kbd-omnibar-no-results", children: query ? "No matching commands" : "Start typing to search commands..." }) : results.map((result, i) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `kbd-omnibar-result ${i === selectedIndex ? "selected" : ""}`,
-        onClick: () => execute(result.id),
-        onMouseEnter: () => {
+    /* @__PURE__ */ jsx("div", { className: "kbd-omnibar-results", ref: resultsContainerRef, children: totalResults === 0 && !isLoadingRemote ? /* @__PURE__ */ jsx("div", { className: "kbd-omnibar-no-results", children: query ? "No matching commands" : "Start typing to search commands..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      results.map((result, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `kbd-omnibar-result ${i === selectedIndex ? "selected" : ""}`,
+          onClick: () => execute(result.id),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "kbd-omnibar-result-label", children: result.action.label }),
+            result.action.group && /* @__PURE__ */ jsx("span", { className: "kbd-omnibar-result-category", children: result.action.group }),
+            result.bindings.length > 0 && /* @__PURE__ */ jsx("div", { className: "kbd-omnibar-result-bindings", children: result.bindings.slice(0, 2).map((binding) => /* @__PURE__ */ jsx(BindingBadge, { binding }, binding)) })
+          ]
         },
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "kbd-omnibar-result-label", children: result.action.label }),
-          result.action.group && /* @__PURE__ */ jsx("span", { className: "kbd-omnibar-result-category", children: result.action.group }),
-          result.bindings.length > 0 && /* @__PURE__ */ jsx("div", { className: "kbd-omnibar-result-bindings", children: result.bindings.slice(0, 2).map((binding) => /* @__PURE__ */ jsx(BindingBadge, { binding }, binding)) })
-        ]
-      },
-      result.id
-    )) })
+        result.id
+      )),
+      (() => {
+        let remoteIndex = 0;
+        return Array.from(remoteResultsByEndpoint.entries()).map(([endpointId, endpointResults]) => {
+          const paginationInfo = endpointPagination.get(endpointId);
+          const showPagination = paginationInfo?.mode === "scroll" && paginationInfo.total !== void 0;
+          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            endpointResults.map((result) => {
+              const absoluteIndex = results.length + remoteIndex;
+              remoteIndex++;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `kbd-omnibar-result ${absoluteIndex === selectedIndex ? "selected" : ""}`,
+                  onClick: () => execute(result.id),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "kbd-omnibar-result-label", children: result.entry.label }),
+                    result.entry.group && /* @__PURE__ */ jsx("span", { className: "kbd-omnibar-result-category", children: result.entry.group }),
+                    result.entry.description && /* @__PURE__ */ jsx("span", { className: "kbd-omnibar-result-description", children: result.entry.description })
+                  ]
+                },
+                result.id
+              );
+            }),
+            paginationInfo?.mode === "scroll" && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "kbd-omnibar-pagination",
+                ref: (el) => sentinelRefs.current.set(endpointId, el),
+                "data-endpoint-id": endpointId,
+                children: paginationInfo.isLoading ? /* @__PURE__ */ jsx("span", { className: "kbd-omnibar-pagination-loading", children: "Loading more..." }) : showPagination ? /* @__PURE__ */ jsxs("span", { className: "kbd-omnibar-pagination-info", children: [
+                  paginationInfo.loaded,
+                  " of ",
+                  paginationInfo.total
+                ] }) : paginationInfo.hasMore ? /* @__PURE__ */ jsx("span", { className: "kbd-omnibar-pagination-more", children: "Scroll for more..." }) : null
+              }
+            )
+          ] }, endpointId);
+        });
+      })(),
+      isLoadingRemote && remoteResults.length === 0 && /* @__PURE__ */ jsx("div", { className: "kbd-omnibar-loading", children: "Searching..." })
+    ] }) })
   ] }) });
 }
 function SequenceModal() {
@@ -2955,41 +3555,99 @@ function SequenceModal() {
     sequenceTimeoutStartedAt: timeoutStartedAt,
     sequenceTimeout,
     getCompletions,
-    registry
+    registry,
+    executeAction
   } = useHotkeysContext();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [hasInteracted, setHasInteracted] = useState(false);
   const completions = useMemo(() => {
     if (pendingKeys.length === 0) return [];
     return getCompletions(pendingKeys);
   }, [getCompletions, pendingKeys]);
-  const formattedPendingKeys = useMemo(() => {
-    if (pendingKeys.length === 0) return "";
-    return formatCombination(pendingKeys).display;
-  }, [pendingKeys]);
-  const getActionLabel = (actionId) => {
-    const action = registry.actions.get(actionId);
-    return action?.config.label || actionId;
-  };
-  const groupedCompletions = useMemo(() => {
-    const byNextKey = /* @__PURE__ */ new Map();
+  const flatCompletions = useMemo(() => {
+    const items = [];
     for (const c of completions) {
-      const existing = byNextKey.get(c.nextKeys);
-      if (existing) {
-        existing.push(c);
-      } else {
-        byNextKey.set(c.nextKeys, [c]);
+      for (const action of c.actions) {
+        const displayKey = c.isComplete ? "\u21B5" : c.nextKeys;
+        items.push({
+          completion: c,
+          action,
+          displayKey,
+          isComplete: c.isComplete
+        });
       }
     }
-    return byNextKey;
+    return items;
   }, [completions]);
+  const itemCount = flatCompletions.length;
+  const shouldShowTimeout = timeoutStartedAt !== null && completions.length === 1 && !hasInteracted;
+  useEffect(() => {
+    setSelectedIndex(0);
+    setHasInteracted(false);
+  }, [pendingKeys]);
+  const executeSelected = useCallback(() => {
+    if (selectedIndex >= 0 && selectedIndex < flatCompletions.length) {
+      const item = flatCompletions[selectedIndex];
+      executeAction(item.action, item.completion.captures);
+      cancelSequence();
+    }
+  }, [selectedIndex, flatCompletions, executeAction, cancelSequence]);
+  useEffect(() => {
+    if (!isAwaitingSequence || pendingKeys.length === 0) return;
+    const handleKeyDown = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          e.stopPropagation();
+          setSelectedIndex((prev) => Math.min(prev + 1, itemCount - 1));
+          setHasInteracted(true);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          e.stopPropagation();
+          setSelectedIndex((prev) => Math.max(prev - 1, 0));
+          setHasInteracted(true);
+          break;
+        case "Enter":
+          e.preventDefault();
+          e.stopPropagation();
+          executeSelected();
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  }, [isAwaitingSequence, pendingKeys.length, itemCount, executeSelected]);
+  const renderKey = useCallback((combo, index) => {
+    const { key, modifiers } = combo;
+    return /* @__PURE__ */ jsxs("kbd", { className: "kbd-kbd", children: [
+      renderModifierIcons(modifiers),
+      renderKeyContent(key)
+    ] }, index);
+  }, []);
+  const getActionLabel = (actionId, captures) => {
+    const action = registry.actions.get(actionId);
+    let label = action?.config.label || actionId;
+    if (captures && captures.length > 0) {
+      let captureIdx = 0;
+      label = label.replace(/\bN\b/g, () => {
+        if (captureIdx < captures.length) {
+          return String(captures[captureIdx++]);
+        }
+        return "N";
+      });
+    }
+    return label;
+  };
   if (!isAwaitingSequence || pendingKeys.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx("div", { className: "kbd-sequence-backdrop", onClick: cancelSequence, children: /* @__PURE__ */ jsxs("div", { className: "kbd-sequence", onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxs("div", { className: "kbd-sequence-current", children: [
-      /* @__PURE__ */ jsx("kbd", { className: "kbd-sequence-keys", children: formattedPendingKeys }),
+      /* @__PURE__ */ jsx("div", { className: "kbd-sequence-keys", children: pendingKeys.map((combo, i) => renderKey(combo, i)) }),
       /* @__PURE__ */ jsx("span", { className: "kbd-sequence-ellipsis", children: "\u2026" })
     ] }),
-    timeoutStartedAt && /* @__PURE__ */ jsx(
+    shouldShowTimeout && /* @__PURE__ */ jsx(
       "div",
       {
         className: "kbd-sequence-timeout",
@@ -2997,15 +3655,19 @@ function SequenceModal() {
       },
       timeoutStartedAt
     ),
-    completions.length > 0 && /* @__PURE__ */ jsx("div", { className: "kbd-sequence-completions", children: Array.from(groupedCompletions.entries()).map(([nextKey, comps]) => /* @__PURE__ */ jsxs("div", { className: "kbd-sequence-completion", children: [
-      /* @__PURE__ */ jsx("kbd", { className: "kbd-kbd", children: nextKey }),
-      /* @__PURE__ */ jsx("span", { className: "kbd-sequence-arrow", children: "\u2192" }),
-      /* @__PURE__ */ jsx("span", { className: "kbd-sequence-actions", children: comps.flatMap((c) => c.actions).map((action, i) => /* @__PURE__ */ jsxs("span", { children: [
-        i > 0 && ", ",
-        getActionLabel(action)
-      ] }, action)) })
-    ] }, nextKey)) }),
-    completions.length === 0 && /* @__PURE__ */ jsx("div", { className: "kbd-sequence-empty", children: "No matching shortcuts" })
+    flatCompletions.length > 0 && /* @__PURE__ */ jsx("div", { className: "kbd-sequence-completions", children: flatCompletions.map((item, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `kbd-sequence-completion ${index === selectedIndex ? "selected" : ""} ${item.isComplete ? "complete" : ""}`,
+        children: [
+          item.isComplete ? /* @__PURE__ */ jsx("kbd", { className: "kbd-kbd", children: "\u21B5" }) : item.completion.nextKeySeq ? renderKeySeq(item.completion.nextKeySeq) : /* @__PURE__ */ jsx("kbd", { className: "kbd-kbd", children: item.displayKey }),
+          /* @__PURE__ */ jsx("span", { className: "kbd-sequence-arrow", children: "\u2192" }),
+          /* @__PURE__ */ jsx("span", { className: "kbd-sequence-actions", children: getActionLabel(item.action, item.completion.captures) })
+        ]
+      },
+      `${item.completion.fullSequence}-${item.action}`
+    )) }),
+    flatCompletions.length === 0 && /* @__PURE__ */ jsx("div", { className: "kbd-sequence-empty", children: "No matching shortcuts" })
   ] }) });
 }
 var DefaultTooltip = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
@@ -3028,6 +3690,7 @@ function organizeShortcuts(keymap, labels, descriptions, groupNames, groupOrder,
     return groupNames?.[groupKey] ?? groupKey;
   };
   for (const [actionId, bindings] of actionBindings) {
+    if (actionRegistry?.[actionId]?.hideFromModal) continue;
     includedActions.add(actionId);
     const { name } = parseActionId(actionId);
     const groupName = getGroupName(actionId);
@@ -3044,6 +3707,7 @@ function organizeShortcuts(keymap, labels, descriptions, groupNames, groupOrder,
   if (actionRegistry && showUnbound) {
     for (const [actionId, action] of Object.entries(actionRegistry)) {
       if (includedActions.has(actionId)) continue;
+      if (action.hideFromModal) continue;
       const { name } = parseActionId(actionId);
       const groupName = getGroupName(actionId);
       if (!groupMap.has(groupName)) {
@@ -3084,27 +3748,10 @@ function KeyDisplay({
   combo,
   className
 }) {
-  const { key, modifiers } = combo;
-  const parts = [];
-  if (modifiers.meta) {
-    parts.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "meta", className: "kbd-modifier-icon" }, "meta"));
-  }
-  if (modifiers.ctrl) {
-    parts.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "ctrl", className: "kbd-modifier-icon" }, "ctrl"));
-  }
-  if (modifiers.alt) {
-    parts.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "alt", className: "kbd-modifier-icon" }, "alt"));
-  }
-  if (modifiers.shift) {
-    parts.push(/* @__PURE__ */ jsx(ModifierIcon, { modifier: "shift", className: "kbd-modifier-icon" }, "shift"));
-  }
-  const KeyIcon = getKeyIcon(key);
-  if (KeyIcon) {
-    parts.push(/* @__PURE__ */ jsx(KeyIcon, { className: "kbd-key-icon" }, "key"));
-  } else {
-    parts.push(/* @__PURE__ */ jsx("span", { children: formatKeyForDisplay(key) }, "key"));
-  }
-  return /* @__PURE__ */ jsx("span", { className, children: parts });
+  return /* @__PURE__ */ jsxs("span", { className, children: [
+    renderModifierIcons(combo.modifiers),
+    renderKeyContent(combo.key)
+  ] });
 }
 function SeqElemDisplay2({ elem, className }) {
   const Tooltip = useContext(TooltipContext);
@@ -3132,7 +3779,6 @@ function BindingDisplay2({
 }) {
   const sequence = parseHotkeyString(binding);
   const keySeq = parseKeySeq(binding);
-  formatKeySeq(keySeq);
   let kbdClassName = "kbd-kbd";
   if (editable && !isEditing) kbdClassName += " editable";
   if (isEditing) kbdClassName += " editing";
@@ -3305,18 +3951,17 @@ function ShortcutsModal({
       ctx.closeModal();
     }
   }, [onCloseProp, ctx]);
-  useCallback(() => {
-    if (ctx?.openModal) {
-      ctx.openModal();
-    } else {
-      setInternalIsOpen(true);
-    }
-  }, [ctx]);
   useAction(ACTION_MODAL, {
     label: "Show shortcuts",
     group: "Global",
     defaultBindings: defaultBinding ? [defaultBinding] : [],
-    handler: useCallback(() => ctx?.toggleModal() ?? setInternalIsOpen((prev) => !prev), [ctx?.toggleModal])
+    handler: useCallback(() => {
+      if (ctx) {
+        ctx.toggleModal();
+      } else {
+        setInternalIsOpen((prev) => !prev);
+      }
+    }, [ctx])
   });
   const checkConflict = useCallback((newKey, forAction) => {
     const existingActions = keymap[newKey];
@@ -3760,6 +4405,6 @@ function ShortcutsModal({
   ] }) }) });
 }
 
-export { ACTION_LOOKUP, ACTION_MODAL, ACTION_OMNIBAR, ActionsRegistryContext, Alt, Backspace, Command, Ctrl, DEFAULT_SEQUENCE_TIMEOUT, DIGITS_PLACEHOLDER, DIGIT_PLACEHOLDER, Down, Enter, HotkeysProvider, Kbd, KbdLookup, KbdModal, KbdOmnibar, Kbds, Key, KeybindingEditor, Left, LookupModal, ModifierIcon, Omnibar, Option, Right, SequenceModal, Shift, ShortcutsModal, Up, countPlaceholders, createTwoColumnRenderer, extractCaptures, findConflicts, formatBinding, formatCombination, formatKeyForDisplay, formatKeySeq, fuzzyMatch, getActionBindings, getConflictsArray, getKeyIcon, getModifierIcon, getSequenceCompletions, hasConflicts, hasDigitPlaceholders, hotkeySequenceToKeySeq, isDigitPlaceholder, isMac, isModifierKey, isPlaceholderSentinel, isSequence, isShiftedSymbol, keySeqToHotkeySequence, normalizeKey, parseCombinationId, parseHotkeyString, parseKeySeq, searchActions, useAction, useActions, useActionsRegistry, useEditableHotkeys, useHotkeys, useHotkeysContext, useMaybeHotkeysContext, useOmnibar, useRecordHotkey };
+export { ACTION_LOOKUP, ACTION_MODAL, ACTION_OMNIBAR, ActionsRegistryContext, Alt, Backspace, Command, Ctrl, DEFAULT_SEQUENCE_TIMEOUT, DIGITS_PLACEHOLDER, DIGIT_PLACEHOLDER, Down, Enter, HotkeysProvider, Kbd, KbdLookup, KbdModal, KbdOmnibar, Kbds, Key, KeybindingEditor, Left, LookupModal, ModifierIcon, Omnibar, OmnibarEndpointsRegistryContext, Option, Right, SequenceModal, Shift, ShortcutsModal, Up, countPlaceholders, createTwoColumnRenderer, extractCaptures, findConflicts, formatBinding, formatCombination, formatKeyForDisplay, formatKeySeq, fuzzyMatch, getActionBindings, getConflictsArray, getKeyIcon, getModifierIcon, getSequenceCompletions, hasConflicts, hasDigitPlaceholders, hotkeySequenceToKeySeq, isDigitPlaceholder, isMac, isModifierKey, isPlaceholderSentinel, isSequence, isShiftedSymbol, keySeqToHotkeySequence, normalizeKey, parseHotkeyString, parseKeySeq, searchActions, useAction, useActions, useActionsRegistry, useEditableHotkeys, useHotkeys, useHotkeysContext, useMaybeHotkeysContext, useOmnibar, useOmnibarEndpoint, useOmnibarEndpointsRegistry, useRecordHotkey };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map