{#- chirp-ui: App shell layout — extends chirp shell with ChirpUI structure

    Use this for persistent app shells (topbar, sidebar). Extends chirp/layouts/shell.html
    and fills in ChirpUI CSS, toast, and app shell structure.

    Usage:
        {% extends "chirpui/app_shell_layout.html" %}
        {% block brand %}My App{% end %}
        {% block sidebar %}
          {% from "chirpui/sidebar.html" import sidebar, sidebar_link, sidebar_section, shell_brand_link %}
          {% call sidebar() %}
            {% call sidebar_section("Main") %}
              {{ sidebar_link("/", "Home") }}
              {{ sidebar_link("/dashboard", "Dashboard") }}
            {% end %}
          {% end %}
        {% end %}
        {% block content %}
          Page content here
        {% end %}

    This layout keeps the sidebar non-collapsible by default. Use a custom
    shell or the `app_shell()` macro when you need the resizable/collapsible
    sidebar variant.

    Mobile nav drawer: pass nav_drawer=True in the render context (e.g.
    Template("page.html", nav_drawer=True)) to add a topbar hamburger that opens
    the sidebar as an accessible off-canvas slide-over below 48rem (focus trap,
    ESC, scrim, scroll lock, focus return — wired by shell_runtime_script()).
    With context_rail=True a second trigger opens the rail; override its label
    with nav_drawer_rail_label. Opt-in and additive — unset leaves the
    horizontal-strip fallback unchanged. See docs/patterns/navigation.md.

    Custom brand (override brand_link for non-/ href or custom markup):
        {% block brand_link %}{% call shell_brand_link(href="/projects") %}My App{% end %}{% end %}

    Topbar leading affordance (non-anchor, left of the brand — for a hamburger/
    back/menu; do NOT put interactive content in {% block brand %}, it nests
    inside the brand <a>):
        {% block topbar_leading %}{{ icon_btn("list", aria_label="Open menu") }}{% end %}

    Alpine: Chirp injects Alpine.js via AppConfig(alpine=True) or automatically
    when use_chirp_ui() is called.  This layout does NOT load Alpine itself —
    Chirp is the single authority for Alpine injection.

    Default app shells use document scrolling. Full-height main (chat, maps):
    override {% block main_shell_class %} with chirpui-app-shell__main--fill so
    #page-content receives flex:1 and inner panels handle bounded scroll below
    the sticky topbar. See docs/fundamentals/layout-vertical.md.

    HTMX: primary #main swap runs before out-of-band fragments. shell_runtime_script()
    (emitted by every shell entry point) resets the route-scoped shell regions
    (#chirp-shell-actions, #chirpui-context-rail) on each boosted #main navigation,
    so OOB fragments land in clean nodes and a route that ships no fragment for a
    region empties it rather than stranding the prior route's content.

    page_scripts block: renders after toast/CSRF/nav scripts near </body>.
    Only templates that {% extends %} this layout can override it (inner
    _layout.html files). Filesystem page templates (page.html) are injected
    via render_with_blocks into {% block content %} — they CANNOT override
    page_scripts or any other sibling block. If a page needs an inline
    <script>, put it inside the content region (inside page_root or
    page_content blocks). See Chirp's filesystem-routing docs §
    "Composition, not inheritance".
-#}
{# target: body #}
{% extends "chirp/layouts/shell.html" %}

{% block head %}
{% if csrf_token is defined %}
<meta name="csrf-token" content="{{ csrf_token() }}">
{% end %}
<link rel="stylesheet" href="/static/chirpui.css">
<link rel="stylesheet" href="/static/chirpui-transitions.css">
<script>
(function(){var t=localStorage.getItem("chirpui-theme")||"system";var s=localStorage.getItem("chirpui-style")||"default";document.documentElement.setAttribute("data-theme",t);document.documentElement.setAttribute("data-style",s);})();
</script>
{% block head_extra %}{% end %}
{% end %}

{% block shell %}
{% from "chirpui/sidebar.html" import sidebar, sidebar_toggle, shell_brand_link %}
{% from "chirpui/shell_frame.html" import shell_outlet, shell_outlet_attrs, shell_runtime_script %}
{% from "chirpui/shell_actions.html" import shell_actions_bar %}
{% from "chirpui/toast.html" import toast_container %}
{% set _sidebar_collapsible = "false" %}
{% set _collapsible = _sidebar_collapsible and _sidebar_collapsible != "false" %}
{% set _shell_actions = shell_actions | default(none) %}
{% set _shell_actions_target = _shell_actions.target if _shell_actions else "chirp-shell-actions" %}
{% set _context_rail = context_rail | default(false) %}
{% set _rail_shell_class = " chirpui-app-shell--has-context-rail" if _context_rail else "" %}
{% set _nav_drawer = nav_drawer | default(false) %}
{% set _nav_drawer_label = nav_drawer_label | default("Navigation") %}
{% set _nav_drawer_class = " chirpui-app-shell--nav-drawer" if _nav_drawer else "" %}
<div class="chirpui-app-shell{{ " chirpui-app-shell--sidebar-collapsible" if _collapsible else "" }}{{ _rail_shell_class }}{{ _nav_drawer_class }}"
     x-data="chirpuiSidebar({ collapsible: {{ 'true' if _collapsible else 'false' }}, resizable: false })"
     x-init="init()"
     :class="{ 'chirpui-app-shell--sidebar-collapsed': collapsible && collapsed }">
  <header class="chirpui-app-shell__topbar" data-chirpui-shell-topbar>
    {#- Always-available non-anchor leading zone (left of the brand <a>): fill
        {% block topbar_leading %} with a hamburger/back/menu so interactive
        content is NOT nested inside the brand anchor (#220). The built-in
        nav_drawer hamburger + collapsible sidebar_toggle render in the same
        wrapper. Always rendered (empty topbar-start is flex-shrink:0, inert). -#}
    <div class="chirpui-app-shell__topbar-start">{% block topbar_leading %}{% end %}{% if _nav_drawer %}<button type="button" class="chirpui-app-shell__nav-toggle" data-chirpui-shell-drawer-toggle="sidebar" aria-controls="chirpui-app-shell-sidebar" aria-expanded="false" aria-label="Open {{ _nav_drawer_label }}"><span class="chirpui-app-shell__nav-toggle-bars" aria-hidden="true"></span></button>{% endif %}{% if _collapsible %}{{ sidebar_toggle() }}{% endif %}</div>
    {% block brand_link %}
    {% call shell_brand_link() %}
      {% block brand %}{% end %}
    {% end %}
    {% end %}
    <div id="chirpui-topbar-breadcrumbs" class="chirpui-app-shell__topbar-center" aria-live="polite" aria-atomic="true">{% block topbar_center %}{% end %}</div>
    <div class="chirpui-app-shell__topbar-end">
      {% if _nav_drawer and _context_rail %}<button type="button" class="chirpui-app-shell__rail-toggle" data-chirpui-shell-drawer-toggle="rail" aria-controls="chirpui-context-rail" aria-expanded="false" aria-label="Open {{ nav_drawer_rail_label | default('Context') }}">{{ nav_drawer_rail_label | default("Context") }}</button>{% endif %}
      <div id="{{ _shell_actions_target }}" class="chirpui-app-shell__shell-actions">
        {% if _shell_actions %}
        {{ shell_actions_bar(_shell_actions) }}
        {% end %}
      </div>
      {% block topbar_end %}{% end %}
    </div>
  </header>
  <aside id="chirpui-app-shell-sidebar" class="chirpui-app-shell__sidebar"{% if _nav_drawer %} data-chirpui-shell-drawer="sidebar" aria-labelledby="chirpui-app-shell-drawer-title"{% end %}>{% if _nav_drawer %}<div class="chirpui-app-shell__drawer-head"><span id="chirpui-app-shell-drawer-title" class="chirpui-app-shell__drawer-title">{{ _nav_drawer_label }}</span><button type="button" class="chirpui-app-shell__drawer-close" data-chirpui-shell-drawer-close aria-label="Close {{ _nav_drawer_label }}">&times;</button></div>{% endif %}<div id="chirpui-sidebar-nav" aria-live="polite" aria-atomic="true">{% block sidebar %}{% end %}</div></aside>
  <main id="main" class="chirpui-app-shell__main{% block main_shell_class %}{% end %}"
        data-chirp-scroll="auto" tabindex="-1"
        {{ shell_outlet_attrs() }}>
    {% call shell_outlet(include_boost_attrs=false) %}
      {% block content %}{% end %}
    {% end %}
  </main>
  {% if _context_rail %}
  {#- Route-context rail outlet — same contract as app_shell(): a route response
      updates it via an OOB fragment targeting #chirpui-context-rail (context_rail_oob). -#}
  <aside id="chirpui-context-rail" class="chirpui-app-shell__context-rail"
         aria-label="{% block context_rail_label %}Context{% end %}" aria-live="polite" aria-atomic="true"
         data-chirpui-shell-context-rail{% if _nav_drawer %} data-chirpui-shell-drawer="rail"{% end %}>{% block context_rail %}{% end %}</aside>
  {% end %}
  {% if _nav_drawer %}<div class="chirpui-app-shell__scrim" data-chirpui-shell-scrim hidden></div>{% endif %}
</div>
<script>
document.body.addEventListener("htmx:configRequest", function(event) {
  var meta = document.querySelector('meta[name="csrf-token"]');
  if (meta) { event.detail.headers["X-CSRF-Token"] = meta.content; }
});
{#- The active-link sync (syncNav) and the route-scoped shell-region reset
    (#chirp-shell-actions, #chirpui-context-rail) both live in
    shell_runtime_script() now, so both shell entry points share one source of
    truth. Only the layout-specific CSRF handler stays here (it depends on the
    layout-only <meta name="csrf-token">). -#}
</script>
{{ shell_runtime_script() }}
{{ toast_container() }}
{% block page_scripts %}{% end %}
{% end %}