{#- 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.

    Named slots: brand (when brand_slot=true), topbar, topbar_end, sidebar, default (main content).

    Usage:
        from "chirpui/app_shell.html" import app_shell

        call app_shell(brand="My App", brand_url="/")
            {% slot topbar %}breadcrumbs(...){% end %}
            {% slot topbar_end %}command_palette_trigger(){% end %}
            {% slot sidebar %}call sidebar()...end{% end %}
            Page content here
        end

        call app_shell(brand_url="/", brand_slot=true)
            {% slot brand %}logo(text="My App", image_src="/static/logo.svg", variant="both"){% end %}
            {% slot sidebar %}...{% end %}
            Page content here
        end

        call app_shell(brand="My App", sidebar_collapsible=true)
            ...
        end
-#}
{% from "chirpui/shell_actions.html" import shell_actions_bar %}

{% def app_shell(brand="", brand_url="/", brand_slot=false, 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="{
       collapsed: (function(){var k='chirpui-sidebar-collapsed';var s=localStorage.getItem(k);if(s===null){var w=localStorage.getItem('chirpui-sidebar-width');if(w){var m=w.match(/^(\d+)(px|rem)$/);var px=m?(m[2]==='rem'?parseInt(m[1],10)*16:parseInt(m[1],10)):null;s=px!==null&&px<=96?'true':'false';localStorage.removeItem('chirpui-sidebar-width');}else{s='false';}}return s==='true';})(),
       _dragging: false, _startX: 0, _startCollapsed: false, _lastX: 0,
       setCollapsed(v){this.collapsed=v;this.$el.classList.toggle('chirpui-app-shell--sidebar-collapsed',v);this.$el.style.removeProperty('--chirpui-sidebar-width');localStorage.setItem('chirpui-sidebar-collapsed',v?'true':'false');var h=this.$el.querySelector('[data-chirpui-sidebar-toggle]');if(h)h.setAttribute('aria-expanded',v?'false':'true');},
       toggle(){this.setCollapsed(!this.collapsed);},
       startDrag(e){e.preventDefault();this._dragging=true;this._startX=e.clientX;this._startCollapsed=this.collapsed;this._lastX=e.clientX;document.body.style.userSelect='none';},
       onMove(e){if(!this._dragging)return;this._lastX=e.clientX;},
       onUp(){if(!this._dragging)return;this._dragging=false;document.body.style.userSelect='';var d=this._lastX-this._startX;if(Math.abs(d)>=5){if(d<0&&!this._startCollapsed)this.setCollapsed(true);else if(d>0&&this._startCollapsed)this.setCollapsed(false);}else{this.toggle();}}
     }"
     @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 }}">
        <a href="{{ brand_url }}" class="chirpui-app-shell__brand">
            {% 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>
    <main id="main" class="chirpui-app-shell__main">
        {% slot %}
    </main>
</div>
{% end %}