{#- chirp-ui: Command Palette component
    Cmd+K search overlay using native <dialog>. Results load via htmx into the
    results container; render them with `command_palette_item` so the input gets
    arrow-key result navigation.

    The input is a `role="combobox"` over the `role="listbox"` results: ArrowDown/
    ArrowUp rove the `role="option"` items via `aria-activedescendant` (the active
    item carries `aria-selected="true"`), Enter activates the active item, and each
    fresh htmx result set auto-highlights its first item. Requires Alpine.js;
    arrow-nav only engages over `command_palette_item` (role=option) results —
    legacy raw-HTML results stay Tab-navigable.

    Usage:
        from "chirpui/command_palette.html" import (
            command_palette, command_palette_trigger, command_palette_item
        )

        command_palette_trigger()
        call command_palette(search_url="/search")
          {# optional initial/recent results #}
        end

        {# /search returns the results fragment: #}
        command_palette_item("cmd-new", "New document", href="/docs/new", hint="N")
-#}

{% def command_palette(id="command-palette", search_url="/search", placeholder="Search...") %}
<div x-data="chirpuiCommandPalette()"
     @keydown.window.meta.k.prevent="open()"
     @keydown.window.ctrl.k.prevent="open()">
<dialog id="{{ id }}" x-ref="dialog" class="chirpui-command-palette" closedby="any">
    <div class="chirpui-command-palette__inner">
        <input type="search" class="chirpui-command-palette__input"
               x-ref="input" role="combobox" aria-autocomplete="list"
               aria-controls="{{ id }}-results"
               :aria-expanded="hasOptions ? 'true' : 'false'"
               :aria-activedescendant="activeId"
               placeholder="{{ placeholder }}"
               hx-get="{{ search_url }}" hx-trigger="input changed delay:200ms"
               hx-target="#{{ id }}-results" hx-swap="innerHTML"
               {#- Defend against a boost-inherited hx-select="#page-content": the
                   results fragment has no such region, so without unset htmx would
                   select nothing and swap the listbox empty. -#}
               hx-select="unset" hx-disinherit="hx-select"
               name="q" autocomplete="off" autofocus
               @keydown.down.prevent="move(1)"
               @keydown.up.prevent="move(-1)"
               @keydown.enter.prevent="activate()">
        <div id="{{ id }}-results" x-ref="results" role="listbox"
             aria-label="{{ placeholder }}"
             class="chirpui-command-palette__results">
            {% slot %}
        </div>
    </div>
</dialog>
</div>
{% end %}

{#- One command-palette result. role="option" with a stable id so the combobox
    input can track it via aria-activedescendant. Plain (no Alpine directives) so
    htmx can swap result sets cleanly — the chirpuiCommandPalette factory sets
    aria-selected + the --active class imperatively as focus roves. Renders an <a>
    when `href` is set, otherwise a <button> (optionally data-action). -#}
{% def command_palette_item(id, label, href=none, action=none, hint=none) %}
{% if href %}
<a class="chirpui-command-palette__item" id="{{ id }}" role="option" aria-selected="false"
   href="{{ href }}"{{ route_link_attrs(href) | html_attrs }}>
    <span class="chirpui-command-palette__item-label">{{ label }}</span>
    {% if hint %}<span class="chirpui-command-palette__item-hint">{{ hint }}</span>{% end %}
</a>
{% else %}
<button type="button" class="chirpui-command-palette__item" id="{{ id }}" role="option"
        aria-selected="false"{% if action %} data-action="{{ action }}"{% end %}>
    <span class="chirpui-command-palette__item-label">{{ label }}</span>
    {% if hint %}<span class="chirpui-command-palette__item-hint">{{ hint }}</span>{% end %}
</button>
{% end %}
{% end %}

{% def command_palette_trigger(target="command-palette", label="Search", placeholder=none, shortcut="⌘K", icon=none, aria_label=none, density="md", cls="") %}
{% set density = density | validate_variant(("sm","md"), "md") %}
{% set visible_label = placeholder if placeholder is not none else label %}
{% set control_label = aria_label if aria_label is not none else label %}
<button type="button"
        class="chirpui-command-palette__trigger chirpui-command-palette-trigger chirpui-command-palette-trigger--{{ density }}{{ " " ~ cls if cls else "" }}"
        aria-label="{{ control_label }}"
        x-data="chirpuiDialogTarget()"
        data-dialog-target="{{ target }}"
        @click="open()">
    {% if icon %}<span class="chirpui-command-palette__trigger-icon" aria-hidden="true">{{ icon | icon }}</span>{% end %}
    <span class="chirpui-command-palette__trigger-label">{{ visible_label }}</span>
    {% if shortcut %}<kbd class="chirpui-command-palette__kbd">{{ shortcut }}</kbd>{% end %}
</button>
{% end %}