Command Palette

Build a command palette (Cmd+K / Ctrl+K) using vanilla HTML, CSS, and JavaScript. No libraries, no frameworks — zero dependencies.

VISUAL DESIGN
- Full-page backdrop overlay: rgba(0,0,0,0.6) with backdrop-filter blur(4px)
- Dialog card: max-width 520px, background rgba(22,22,22,0.98), 1px border at rgba(255,255,255,0.1), border-radius 14px
- Heavy box-shadow: 0 24px 80px rgba(0,0,0,0.5) outer, 0 4px 16px rgba(0,0,0,0.3) inner
- Search input area: 15px system font, search icon (16px) on the left, "ESC" badge on the right
- Divider below input: 1px solid rgba(255,255,255,0.08)
- Results grouped by category with uppercase 11px section labels at rgba(255,255,255,0.35)
- Each result row: 16px icon, label text, optional keyboard shortcut badges on the right
- Active/hovered row: background rgba(0,196,255,0.08), text at full white
- Matched search characters highlighted in cyan (#00c4ff) with font-weight 600
- Footer bar with navigation hints: arrow keys to navigate, Enter to select, Esc to close

LAYOUT
- Dialog anchored near the top of its container, 72px from the top
- Max height 400px with overflow-y auto for scrollable results
- Results area scrolls; input and footer stay fixed
- 8px padding around the results list
- 12px gap between icon and label in each row, 8px border-radius on hover background

TRIGGER
- Open via Cmd+K (macOS) or Ctrl+K (Windows/Linux)
- Also openable via a search button in the UI with placeholder text and shortcut hint
- Detect platform (navigator.platform or navigator.userAgentData) to display the correct modifier key

KEYBOARD NAVIGATION
- Arrow Up / Arrow Down to move through results; active item highlighted
- Enter to select the active item (fires the item's action callback)
- Escape closes the palette and returns focus to the previous element
- Active item scrolls into view when navigated off-screen
- Typing filters results instantly (no debounce needed for small datasets)
- Home/End keys jump to first/last result

SEARCH / FILTERING
- Case-insensitive substring matching against item labels
- Highlight matching characters in the result label using <mark> tags
- Groups with no matching items are hidden entirely
- Show "No results found" message when the query matches nothing
- Empty query shows all items grouped by category

SAMPLE COMMANDS (organize into 3 groups)

Pages:
- Dashboard (grid icon)
- Projects (folder icon)
- Settings (gear icon)
- Team Members (users icon)

Actions:
- Create New Project (plus icon), shortcut: Cmd/Ctrl+N
- Import Data (upload icon), shortcut: Cmd/Ctrl+I
- Export as PDF (download icon)
- Toggle Dark Mode (moon icon)

Help:
- Documentation (book icon)
- Keyboard Shortcuts (keyboard icon), shortcut: Cmd/Ctrl+/
- Contact Support (message-circle icon)

FOCUS MANAGEMENT
- On open: immediately focus the search input
- Focus trap inside the dialog — Tab cycles through input and close affordance only
- On close: restore focus to the element that triggered the palette
- Clicking the backdrop closes the palette

ANIMATIONS
- Backdrop: fade in 150ms ease
- Dialog: scale from 0.96 + translateY(-8px) to 1.0 at 200ms using cubic-bezier(0.16, 1, 0.3, 1)
- prefers-reduced-motion: disable all animations

ACCESSIBILITY
- Dialog: role="dialog", aria-modal="true", aria-label="Command palette"
- Input: role="combobox", aria-expanded, aria-controls, aria-activedescendant
- Results list: role="listbox"
- Each result: role="option", unique id, aria-selected on active item
- Search icon is decorative: aria-hidden="true"

OUTPUT
- Single HTML file with embedded <style> and <script>
- Palette contained within a parent element (position absolute) for demo embedding
- Clean, polished aesthetic — should feel like a professional developer tool's command palette