{#- chirp-ui: App Shell component
    Full-page shell with topbar, sidebar, and main content area.
    Navigation is driven by explicit hx-boost on sidebar_link/nav_link,
    targeting #main to keep the sidebar and topbar persistent.
    In filesystem apps, the route/layout tree should declare matching
    Chirp domain metadata plus an outlet of main so route-aware links and
    boosted responses resolve to this shell consistently.

    Named slots: brand (when brand_slot=true), topbar, topbar_end, sidebar, default (main content).
    For routed apps, wrap the main slot with shell_outlet() so custom shells
    use the same #page-content contract as app_shell_layout.html.

    Usage:
        import app_shell plus shell_outlet
        provide brand / topbar / topbar_end / sidebar slots
        wrap the main slot with shell_outlet() for routed shells
        enable sidebar_collapsible=true for the resizable shell variant
-#}
{% from "chirpui/shell_actions.html" import shell_actions_bar %}
{% from "chirpui/shell_frame.html" import shell_runtime_script %}

{% def app_shell(brand="", brand_url="/", brand_slot=false, brand_boost=true, sidebar_collapsible=false, topbar_variant="default", sidebar_variant="default", shell_actions=none, cls="") %}
{% set topbar_variant = topbar_variant | validate_variant(("default","glass","gradient"), "default") %}
{% set sidebar_variant = sidebar_variant | validate_variant(("default","glass","muted"), "default") %}
{% set topbar_class = " chirpui-app-shell__topbar--" ~ topbar_variant if topbar_variant != "default" else "" %}
{% set sidebar_class = " chirpui-app-shell__sidebar--" ~ sidebar_variant if sidebar_variant != "default" else "" %}
{% set shell_actions_target = shell_actions.target if shell_actions else "chirp-shell-actions" %}
{% if sidebar_collapsible %}
<div class="chirpui-app-shell chirpui-app-shell--sidebar-collapsible{{ " " ~ cls if cls else "" }}"
     x-data="chirpuiSidebar({ collapsible: true, resizable: true })"
     x-init="init()"
     @mousemove.window="onMove($event)"
     @mouseup.window="onUp()"
     :class="{ 'chirpui-app-shell--sidebar-collapsed': collapsed }">
{% else %}
<div class="chirpui-app-shell{{ " " ~ cls if cls else "" }}">
{% end %}
    <header class="chirpui-app-shell__topbar{{ topbar_class }}" data-chirpui-shell-topbar>
        <a href="{{ brand_url }}" class="chirpui-app-shell__brand"{{ route_link_attrs(
            brand_url,
            boost=brand_boost,
            fallback=build_hx_attrs(hx_boost="true", hx_target="#main", hx_swap="innerHTML", hx_select="#page-content")
        ) | html_attrs }}>
            {% if brand_slot %}
            {% slot brand %}
            {% else %}
            {{ brand }}
            {% end %}
        </a>
        <div id="chirpui-topbar-breadcrumbs" class="chirpui-app-shell__topbar-center" aria-live="polite" aria-atomic="true">{% slot topbar %}</div>
        <div class="chirpui-app-shell__topbar-end">
            <div id="{{ shell_actions_target }}" class="chirpui-app-shell__shell-actions">
                {% if shell_actions %}
                {{ shell_actions_bar(shell_actions) }}
                {% end %}
            </div>
            {% slot topbar_end %}
        </div>
    </header>
    <aside class="chirpui-app-shell__sidebar{{ sidebar_class }}">
        <div id="chirpui-sidebar-nav" aria-live="polite" aria-atomic="true">{% slot sidebar %}</div>
        {% if sidebar_collapsible %}
        <div class="chirpui-app-shell__sidebar-resize" data-chirpui-sidebar-toggle
             role="button" tabindex="0" aria-label="Toggle sidebar"
             :aria-expanded="!collapsed"
             @mousedown="startDrag($event)"
             @keydown.enter.prevent="toggle()"
             @keydown.space.prevent="toggle()"></div>
        {% end %}
    </aside>
    {#- No whitespace before/after slot: stray text nodes inside grid main break layout/scroll. -#}
    <main id="main" class="chirpui-app-shell__main" data-chirp-scroll="auto" tabindex="-1">{%- slot -%}</main>
</div>
{{ shell_runtime_script() }}
{% end %}