<AppCommandBar demo onSelect={(item) => console.log(item.label)} />

<AppCommandBar
  items={customItems}
  trigger={<Button variant="ghost" size="sm" iconRight={<Badge variant="neutral" size="sm">⌘K</Badge>}>Search…</Button>}
  onSelect={handleSelect}
/>

// Try typing "kbd", "asgn" or "rls" to exercise the subsequence matcher.
const fuzzyItems = [
  { icon: '⌨️', label: 'Open Keyboard Shortcuts',  shortcut: '?',   category: 'Help',        keywords: ['kbd'] },
  { icon: '📚', label: 'Browse Documentation',     shortcut: 'G H', category: 'Help' },
  { icon: '🔔', label: 'Notification Preferences', shortcut: 'G N', category: 'Preferences' },
  { icon: '🛠️', label: 'Assign Reviewer to PR-42', shortcut: 'A R', category: 'Workflows',   keywords: ['asgn'] },
  { icon: '🚀', label: 'Release & Tag v1.4.0',     shortcut: 'R T', category: 'Workflows',   keywords: ['rls'] },
];

<AppCommandBar items={fuzzyItems} />

// Any module adds commands to the shared registry; the palette lists them with its own items.
useEffect(() => registerCommands([
  { id: 'tel-call', label: 'Call a contact', group: 'Telephony', order: 30, hidden: !canCall },
  { id: 'tel-log', label: 'Open call log', group: 'Telephony', order: 31 },
]), [canCall]);

<AppCommandBar items={[
  { id: 'go-home', label: 'Go to dashboard', group: 'Navigation', order: 0 },
  { id: 'new-lead', label: 'New lead', group: 'Create', order: 10 },
]} />