{# Command palette — spotlight-style search and action launcher (Cmd+K).
   Contract: ~/.claude/skills/ux-architect/components/command-palette.md (UX-011)
   Parameters: actions (list of {label, url, group?, icon?, handler?}) as JSON.

   v0.62 CSS refactor: inline Tailwind → semantic .dz-cmdk-* classes
   (components/fragments.css). Selected-row styling (10% brand tint +
   brand text) driven by .is-selected modifier toggled by Alpine
   `:class="{ 'is-selected': idx === selectedIndex }"` — single token
   swap instead of two parallel branch class strings. #}
<div x-data="dzCommandPalette"
     data-dz-actions='{{ actions | tojson if actions else "[]" }}'
     x-show="open"
     x-transition:enter="transition ease-out duration-150"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-100"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     @keydown.escape="close()"
     class="dz-cmdk-overlay"
     role="dialog" aria-modal="true" aria-label="Command palette"
     style="display: none">

  {# Backdrop #}
  <div class="dz-cmdk-backdrop" @click="close()"></div>

  {# Palette card #}
  <div class="dz-cmdk-card" @keydown="onKeyDown($event)">

    {# Search input row #}
    <div class="dz-cmdk-search-row">
      <svg class="dz-cmdk-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
      </svg>
      <input x-ref="searchInput" x-model="query" type="text"
             placeholder="Type a command..."
             class="dz-cmdk-search-input"
             role="combobox" aria-expanded="true" aria-controls="palette-results"
             :aria-activedescendant="filtered.length ? ('palette-item-' + selectedIndex) : ''">
    </div>

    {# Results #}
    <ul id="palette-results" class="dz-cmdk-results" role="listbox">
      <template x-for="(action, idx) in filtered" :key="action.label">
        <li :id="'palette-item-' + idx"
            class="dz-cmdk-item"
            :class="{ 'is-selected': idx === selectedIndex }"
            @click="select(action)"
            @mouseenter="selectedIndex = idx"
            role="option"
            :aria-selected="idx === selectedIndex">
          <template x-if="action.icon">
            <i :data-lucide="action.icon" class="dz-cmdk-item-icon" aria-hidden="true"></i>
          </template>
          <div class="dz-cmdk-item-text">
            <div class="dz-cmdk-item-label" x-text="action.label"></div>
            <div class="dz-cmdk-item-group"
                 x-text="action.group || ''" x-show="action.group"></div>
          </div>
        </li>
      </template>
      <li x-show="filtered.length === 0" class="dz-cmdk-empty">
        No results found
      </li>
    </ul>

    {# Footer — keyboard hints #}
    <div class="dz-cmdk-footer">
      <span class="dz-cmdk-hint">
        <kbd class="dz-cmdk-key">↑↓</kbd>
        Navigate
      </span>
      <span class="dz-cmdk-hint">
        <kbd class="dz-cmdk-key">↵</kbd>
        Select
      </span>
      <span class="dz-cmdk-hint">
        <kbd class="dz-cmdk-key">esc</kbd>
        Close
      </span>
    </div>
  </div>
</div>