ask-command-menu

Use the cmdk headless library for the accessible command menu primitives, then define a centralized typed command registry with groups, shortcuts, and actions. Add a global ⌘K/Ctrl+K keydown listener at the app root to toggle the palette.

cmdk is the recommended library because it is headless, accessible, and keyboard-first. Avoid building a custom input with manual filtering, which reinvents the wheel and introduces accessibility gaps.

Use Fuse.js with keys like label, description, and keywords, and a threshold around 0.3 for subsequence matching. Highlight matched characters in results by splitting the label text on the query and wrapping matches in a mark element.

Yes, command groups can be marked async with a loader function that fetches commands on demand. Show skeleton loading states while fetching, debounce search input, and abort stale requests when a new query arrives.

Focus traps happen when the palette does not restore focus to the triggering element on close. Return focus to the trigger after closing, and ensure Escape closes the palette so keyboard users are never stuck.

Define a route-specific command group, such as project actions on a project page, and merge it with the global command registry when rendering. This gives contextual commands without duplicating the palette component.