Command Palette
A search button for the top bar and a ⌘K / Ctrl K window with grouped results that the keyboard moves through. Enter opens a page through the router or runs an action.
A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks.
Basic
A fixed list filtered by the palette itself (localFilter): the pages of a sidebar menu turned into items with menuPaletteItems, and a group of actions that run a command. Press ⌘K / Ctrl K anywhere on the page, or the button.
In an app the page items keep their routerLink and the palette navigates; here they only report the pick.
Server search
For a server search listen to searchChange: it sends the term after debounceTime, or '' while it is shorter than minQueryLength. Show loading while the request runs; with no results the palette says so. Try "shop" or "example".
Each palette on this page has its own shortcutKey (⌘I / Ctrl I here) so they do not open together.
Compact
compact keeps only the icon, as the button does by itself below 768px — for a crowded top bar.
Design tokens
dt changes the tokens of one palette: here a rounder button and a narrower window with a lighter mask.