<!-- Trigger Button -->
<button class="button" data-command-menu="basic-menu">Open Command Menu</button>

<!-- Keyboard Shortcut Hint -->
<span class="text-sm text-gray-500 ml-2"
  >or press <kbd class="px-2 py-1 text-xs bg-gray-100 border rounded">Cmd+K</kbd></span
>

<!-- Command Menu HTML -->
<div id="basic-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input
        type="text"
        class="search"
        placeholder="Type a command or search..."
        aria-label="Search commands"
      />
    </div>
    <div class="list">
      <div class="item" data-command="new-file">
        <svg
          class="icon"
          viewBox="0 0 24 24"
          width="20"
          height="20"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
          <polyline points="14 2 14 8 20 8" />
        </svg>
        <span class="label">New File</span>
        <kbd class="shortcut">Cmd+N</kbd>
      </div>
      <div class="item" data-command="open-file">
        <svg
          class="icon"
          viewBox="0 0 24 24"
          width="20"
          height="20"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
        </svg>
        <span class="label">Open File</span>
        <kbd class="shortcut">Cmd+O</kbd>
      </div>
      <div class="item" data-command="save">
        <svg
          class="icon"
          viewBox="0 0 24 24"
          width="20"
          height="20"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
          <polyline points="17 21 17 13 7 13 7 21" />
          <polyline points="7 3 7 8 15 8" />
        </svg>
        <span class="label">Save</span>
        <kbd class="shortcut">Cmd+S</kbd>
      </div>
    </div>
  </div>
</div>

<!-- Trigger Button -->
<button class="button primary" data-command-menu="grouped-menu">
  <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M3 12h18m-9-9v18" />
  </svg>
  Command Palette
</button>

<!-- Command Menu with Groups -->
<div id="grouped-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input
        type="text"
        class="search"
        placeholder="Search for commands..."
        aria-label="Search commands"
      />
    </div>
    <div class="list">
      <!-- File Commands Group -->
      <div class="group">
        <div class="group-label">File</div>
        <div class="item" data-command="new-file">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
            <polyline points="14 2 14 8 20 8" />
            <line x1="12" y1="18" x2="12" y2="12" />
            <line x1="9" y1="15" x2="15" y2="15" />
          </svg>
          <span class="label">New File</span>
          <kbd class="shortcut">Cmd+N</kbd>
        </div>
        <div class="item" data-command="new-folder">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
            <line x1="12" y1="11" x2="12" y2="17" />
            <line x1="9" y1="14" x2="15" y2="14" />
          </svg>
          <span class="label">New Folder</span>
          <kbd class="shortcut">Shift+Cmd+N</kbd>
        </div>
        <div class="item" data-command="save-all">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
            <polyline points="17 21 17 13 7 13 7 21" />
            <polyline points="7 3 7 8 15 8" />
          </svg>
          <span class="label">Save All Files</span>
          <kbd class="shortcut">Cmd+Alt+S</kbd>
        </div>
      </div>

      <!-- Edit Commands Group -->
      <div class="group">
        <div class="group-label">Edit</div>
        <div class="item" data-command="undo">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <polyline points="1 4 1 10 7 10" />
            <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
          </svg>
          <span class="label">Undo</span>
          <kbd class="shortcut">Cmd+Z</kbd>
        </div>
        <div class="item" data-command="redo">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <polyline points="23 4 23 10 17 10" />
            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
          </svg>
          <span class="label">Redo</span>
          <kbd class="shortcut">Cmd+Shift+Z</kbd>
        </div>
        <div class="item" data-command="find">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.35-4.35" />
          </svg>
          <span class="label">Find</span>
          <kbd class="shortcut">Cmd+F</kbd>
        </div>
      </div>

      <!-- View Commands Group -->
      <div class="group">
        <div class="group-label">View</div>
        <div class="item" data-command="fullscreen">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path
              d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
            />
          </svg>
          <span class="label">Toggle Fullscreen</span>
          <kbd class="shortcut">F11</kbd>
        </div>
        <div class="item" data-command="zoom-in">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.35-4.35" />
            <line x1="11" y1="8" x2="11" y2="14" />
            <line x1="8" y1="11" x2="14" y2="11" />
          </svg>
          <span class="label">Zoom In</span>
          <kbd class="shortcut">Cmd++</kbd>
        </div>
        <div class="item" data-command="zoom-out">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.35-4.35" />
            <line x1="8" y1="11" x2="14" y2="11" />
          </svg>
          <span class="label">Zoom Out</span>
          <kbd class="shortcut">Cmd+-</kbd>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="hint"><kbd>↑↓</kbd> Navigate <kbd>↵</kbd> Select <kbd>esc</kbd> Close</div>
    </div>
  </div>
</div>

<button class="button tiny" data-command-menu="tiny-menu">Tiny Menu</button>

<div id="tiny-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu tiny">
    <div class="header">
      <input type="text" class="search" placeholder="Search..." />
    </div>
    <div class="list">
      <div class="item">
        <span class="label">Copy</span>
        <kbd class="shortcut">⌘C</kbd>
      </div>
      <div class="item">
        <span class="label">Paste</span>
        <kbd class="shortcut">⌘V</kbd>
      </div>
      <div class="item">
        <span class="label">Cut</span>
        <kbd class="shortcut">⌘X</kbd>
      </div>
    </div>
  </div>
</div>

<button class="button small" data-command-menu="small-menu">Small Menu</button>

<div id="small-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu small">
    <div class="header">
      <input type="text" class="search" placeholder="Type to search..." />
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Quick Actions</div>
        <div class="item">
          <span class="label">Open File</span>
          <kbd class="shortcut">⌘O</kbd>
        </div>
        <div class="item">
          <span class="label">Save File</span>
          <kbd class="shortcut">⌘S</kbd>
        </div>
      </div>
    </div>
  </div>
</div>

<button class="button large" data-command-menu="large-menu">Large Menu</button>

<div id="large-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu large">
    <div class="header">
      <input type="text" class="search" placeholder="Search for commands, files, or settings..." />
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Suggestions</div>
        <div class="item">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <rect x="3" y="11" width="18" height="10" rx="2" ry="2" />
            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
          </svg>
          <div class="content">
            <span class="label">Security Settings</span>
            <span class="description">Configure security and privacy options</span>
          </div>
          <kbd class="shortcut">⌘Shift+S</kbd>
        </div>
        <div class="item">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <circle cx="12" cy="12" r="3" />
            <path
              d="M12 1v6m0 6v6m4.22-10.22l4.24-4.24M6.34 6.34L2.1 2.1m17.8 17.8l-4.24-4.24M6.34 17.66L2.1 21.9"
            />
          </svg>
          <div class="content">
            <span class="label">Appearance</span>
            <span class="description">Customize theme and display settings</span>
          </div>
          <kbd class="shortcut">⌘,</kbd>
        </div>
      </div>
    </div>
  </div>
</div>

<button class="button big" data-command-menu="big-menu">Big Command Palette</button>

<div id="big-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu big">
    <div class="header">
      <div class="breadcrumb">
        <span>Home</span>
        <span class="separator">/</span>
        <span class="current">Commands</span>
      </div>
      <input type="text" class="search" placeholder="Search everything..." />
      <div class="filters">
        <button class="filter-btn active">All</button>
        <button class="filter-btn">Files</button>
        <button class="filter-btn">Commands</button>
        <button class="filter-btn">Settings</button>
      </div>
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Recent</div>
        <div class="item">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
          </svg>
          <div class="content">
            <span class="label">Format Document</span>
            <span class="description">Apply formatting to the entire document</span>
          </div>
          <kbd class="shortcut">Alt+Shift+F</kbd>
        </div>
      </div>
      <div class="group">
        <div class="group-label">All Commands</div>
        <div class="item">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
            <polyline points="17 8 12 3 7 8" />
            <line x1="12" y1="3" x2="12" y2="15" />
          </svg>
          <div class="content">
            <span class="label">Upload Files</span>
            <span class="description">Upload files from your computer</span>
          </div>
          <kbd class="shortcut">⌘U</kbd>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="status">
        <span class="count">42 commands</span>
      </div>
      <div class="hint">
        <kbd>Tab</kbd> Next section <kbd>↑↓</kbd> Navigate <kbd>↵</kbd> Select <kbd>esc</kbd> Close
      </div>
    </div>
  </div>
</div>

<button class="button" data-command-menu="empty-menu">Empty State Demo</button>

<div id="empty-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input type="text" class="search" placeholder="Search..." value="xyz123" />
    </div>
    <div class="list">
      <div class="empty">
        <svg
          class="empty-icon"
          viewBox="0 0 24 24"
          width="48"
          height="48"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
        >
          <circle cx="11" cy="11" r="8" />
          <path d="m21 21-4.35-4.35" />
        </svg>
        <p class="empty-title">No results found</p>
        <p class="empty-description">Try searching with different keywords</p>
      </div>
    </div>
  </div>
</div>

<button class="button" data-command-menu="loading-menu">Loading State Demo</button>

<div id="loading-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input type="text" class="search" placeholder="Search..." value="project" />
    </div>
    <div class="list">
      <div class="loading">
        <div class="spinner"></div>
        <p>Searching...</p>
      </div>
    </div>
  </div>
</div>

<div class="command-menu inline">
  <div class="header">
    <input type="text" class="search" placeholder="Quick command search..." />
  </div>
  <div class="list" style="max-height: 200px">
    <div class="item">
      <span class="label">Go to Dashboard</span>
      <kbd class="shortcut">G D</kbd>
    </div>
    <div class="item">
      <span class="label">View Profile</span>
      <kbd class="shortcut">G P</kbd>
    </div>
    <div class="item">
      <span class="label">Settings</span>
      <kbd class="shortcut">G S</kbd>
    </div>
    <div class="item">
      <span class="label">Help</span>
      <kbd class="shortcut">?</kbd>
    </div>
  </div>
</div>

<button class="button positive" data-command-menu="action-menu">Action Commands</button>

<div id="action-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input type="text" class="search" placeholder="Run command..." />
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Theme</div>
        <div
          class="item"
          onclick="document.body.classList.toggle('dark'); this.querySelector('.label').textContent = document.body.classList.contains('dark') ? 'Switch to Light Mode' : 'Switch to Dark Mode';"
        >
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <circle cx="12" cy="12" r="5" />
            <line x1="12" y1="1" x2="12" y2="3" />
            <line x1="12" y1="21" x2="12" y2="23" />
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
            <line x1="1" y1="12" x2="3" y2="12" />
            <line x1="21" y1="12" x2="23" y2="12" />
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
          </svg>
          <span class="label">Switch to Dark Mode</span>
        </div>
      </div>
      <div class="group">
        <div class="group-label">Navigation</div>
        <div class="item" onclick="alert('Navigating to Dashboard');">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <rect x="3" y="3" width="7" height="7" />
            <rect x="14" y="3" width="7" height="7" />
            <rect x="14" y="14" width="7" height="7" />
            <rect x="3" y="14" width="7" height="7" />
          </svg>
          <span class="label">Dashboard</span>
        </div>
        <div class="item" onclick="alert('Opening Settings');">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <circle cx="12" cy="12" r="3" />
            <path
              d="M12 1v6m0 6v6m4.22-10.22l4.24-4.24M6.34 6.34L2.1 2.1m17.8 17.8l-4.24-4.24M6.34 17.66L2.1 21.9"
            />
          </svg>
          <span class="label">Settings</span>
        </div>
      </div>
      <div class="group">
        <div class="group-label">Actions</div>
        <div
          class="item"
          onclick="navigator.clipboard.writeText('Hello!'); alert('Copied to clipboard!');"
        >
          <svg
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
          </svg>
          <span class="label">Copy Sample Text</span>
        </div>
      </div>
    </div>
  </div>
</div>