@if (open()) {
  <div
    class="fixed inset-0 z-[var(--z-palette)] flex items-start justify-center bg-black/50 p-4 pt-[15vh] animate-fade-in"
    (click)="close()"
    (keydown)="onKeydown($event)"
  >
    <div
      class="w-full max-w-xl overflow-hidden rounded-2xl border border-edge bg-surface shadow-overlay animate-scale-in"
      (click)="$event.stopPropagation()"
    >
      <!-- 搜索 -->
      <div class="flex items-center gap-3 border-b border-edge px-4">
        <i class="fa-solid fa-magnifying-glass text-sm text-faint" aria-hidden="true"></i>
        <input
          #search
          class="h-14 w-full bg-transparent text-base text-ink placeholder:text-faint focus:outline-none"
          [value]="query()"
          (input)="onInput($event)"
          [placeholder]="placeholder()"
          spellcheck="false"
          aria-label="搜索命令"
        />
        <kbd
          class="rounded-md border border-edge bg-surface-2 px-1.5 py-0.5 font-mono text-[10px] text-faint"
        >
          esc
        </kbd>
      </div>

      <!-- 结果 -->
      <div class="max-h-[45vh] overflow-y-auto p-2">
        @if (flatList().length === 0) {
          <div class="flex flex-col items-center gap-2 px-4 py-12 text-center">
            <i class="fa-solid fa-magnifying-glass text-2xl text-faint/60" aria-hidden="true"></i>
            <span class="text-sm text-faint">{{ emptyText() }}</span>
          </div>
        } @else {
          @for (group of groups(); track group.name) {
            <div
              class="px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-faint"
            >
              {{ group.name }}
            </div>
            @for (cmd of group.items; track cmd.flatIndex) {
              <button
                #item
                type="button"
                class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm transition-colors"
                [class.bg-primary-subtle]="cmd.flatIndex === highlightIndex()"
                [class.cursor-not-allowed]="cmd.disabled"
                [class.opacity-50]="cmd.disabled"
                [class.hover:bg-surface-hover]="cmd.flatIndex !== highlightIndex() && !cmd.disabled"
                (mouseenter)="highlightIndex.set(cmd.flatIndex)"
                (click)="execute(cmd)"
                [disabled]="cmd.disabled"
              >
                @if (cmd.icon) {
                  <i
                    [class]="cmd.icon"
                    class="w-4 text-center text-sm"
                    [class.text-primary]="cmd.flatIndex === highlightIndex()"
                    [class.text-faint]="cmd.flatIndex !== highlightIndex()"
                    aria-hidden="true"
                  ></i>
                }
                <span
                  class="flex-1 truncate"
                  [class.text-ink]="cmd.flatIndex === highlightIndex()"
                  [class.text-ink-2]="cmd.flatIndex !== highlightIndex()"
                >
                  {{ cmd.label }}
                </span>
                @if (cmd.shortcut) {
                  <kbd
                    class="rounded-md border border-edge bg-surface-2 px-1.5 py-0.5 font-mono text-[10px] text-faint"
                  >
                    {{ cmd.shortcut }}
                  </kbd>
                }
              </button>
            }
          }
        }
      </div>

      <!-- 底部 -->
      <div class="flex items-center justify-between border-t border-edge px-4 py-2 text-xs text-faint">
        <span>{{ flatList().length }} 条命令</span>
        <span>{{ footerText() }}</span>
      </div>
    </div>
  </div>
}