Command Palette Modal

<!--
  A Spotlight-style palette: opens top-aligned, focuses the input, filters as you
  type. It is a listbox of options, so the active row is announced, not just
  tinted. In the React versions ArrowUp/Down move the active row and Enter runs
  it; Escape closes. Keep the panel w-full max-w-lg so it never exceeds a 320px
  viewport.
-->
<div class="fixed inset-0 z-50 flex items-start justify-center p-4 pt-[10vh]">
  <div class="absolute inset-0 bg-black/50" data-modal-close></div>
  <div role="dialog" aria-modal="true" aria-label="Command palette" class="relative flex max-h-[70vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900">
    <div class="flex flex-none items-center gap-2 border-b border-gray-200 px-4 dark:border-gray-800">
      <svg class="h-4 w-4 flex-none text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
      <input type="text" placeholder="Type a command or search..." aria-label="Search commands" class="w-full min-w-0 bg-transparent py-3 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none dark:text-gray-100" />
    </div>
    <ul role="listbox" aria-label="Commands" class="min-h-0 flex-1 overflow-y-auto p-2">
      <li role="option" aria-selected="true">
        <button type="button" class="flex w-full items-center justify-between gap-3 rounded-lg bg-blue-600 px-3 py-2.5 text-left text-sm text-white">
          <span class="min-w-0 truncate font-medium">Create new project</span><span class="flex-none text-xs text-blue-100">C</span>
        </button>
      </li>
      <li role="option" aria-selected="false">
        <button type="button" class="flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2.5 text-left text-sm text-gray-700 dark:text-gray-300">
          <span class="min-w-0 truncate font-medium">Invite teammate</span><span class="flex-none text-xs text-gray-400">I</span>
        </button>
      </li>
    </ul>
  </div>
</div>