{#- chirp-ui: Shell frame primitives — persistent-region + swap-boundary contract

    Maps to Chirp's PageComposition model. Use:
    - shell_outlet_attrs for the canonical boosted-shell HTMX attrs
    - shell_outlet for the #page-content wrapper used by boosted navigation
    - shell_region for stable OOB targets (shell_actions, badges, breadcrumbs)

    Usage:
        {% from "chirpui/shell_frame.html" import shell_outlet, shell_outlet_attrs, shell_region %}

        <main id="main" {{ shell_outlet_attrs() }}>
          {% call shell_outlet(include_boost_attrs=false) %}
            {% block content %}{% end %}
          {% end %}
        </main>

        {% call shell_outlet() %}
          {% block content %}{% end %}
        {% end %}

        <div id="{{ shell_actions_target }}" class="chirpui-app-shell__shell-actions">
          {% call shell_region(shell_actions_target) %}
            {{ shell_actions_bar(shell_actions) }}
          {% end %}
        </div>
-#}

{% def shell_outlet_attrs(target="#main", swap="innerHTML", select="#page-content", sync="auto") %}
{% set _sync = (target ~ ":replace") if sync == "auto" else sync %}
hx-boost="true" hx-target="{{ target }}" hx-swap="{{ swap }}"{% if select %} hx-select="{{ select }}"{% end %}{% if _sync %} hx-sync="{{ _sync }}"{% end %}
{% end %}

{% def shell_outlet(
    id="page-content",
    cls="",
    attrs="",
    attrs_unsafe="",
    include_boost_attrs=true,
    target="#main",
    swap="innerHTML",
    select="#page-content",
    sync="auto"
) %}
{% set _attrs_raw = attrs_unsafe or (attrs | deprecate_param("attrs", "attrs_unsafe")) %}
<div id="{{ id }}"{% if cls %} class="{{ cls }}"{% end %}{% if include_boost_attrs %} {{ shell_outlet_attrs(target=target, swap=swap, select=select, sync=sync) }}{% end %}{% if _attrs_raw %} {{ _attrs_raw | safe(reason="attrs_unsafe trust boundary") }}{% end %}>
    {% slot %}
</div>
{% end %}

{% def shell_region(id, cls="") %}
<div id="{{ id }}" class="chirpui-shell-region{{ " " ~ cls if cls else "" }}">
    {% slot %}
</div>
{% end %}

{% def shell_runtime_script() %}
<script>
(function () {
  if (window.__chirpuiShellRuntimeInitialized) return;
  window.__chirpuiShellRuntimeInitialized = true;

  var SCROLL_STATE = "__chirpuiShellScrollState";
  var historyRestorePending = false;

  function getMainTarget(detail) {
    var target = detail && detail.target;
    if (target && target.id === "main") return target;
    var main = document.getElementById("main");
    if (target && target.id === "page-content" && main && main.contains(target)) return main;
    return null;
  }

  function parseUrl(value) {
    if (!value) return null;
    try {
      return new URL(value, window.location.href);
    } catch (_error) {
      return null;
    }
  }

  function getRequestedUrl(detail) {
    var trigger = detail && (detail.elt || (detail.requestConfig && detail.requestConfig.elt));
    if (trigger && trigger.getAttribute) {
      var href = trigger.getAttribute("href")
        || trigger.getAttribute("hx-get")
        || trigger.getAttribute("data-hx-get");
      var parsedHref = parseUrl(href);
      if (parsedHref) return parsedHref;
    }
    var pathInfo = detail && detail.pathInfo;
    var parsedPath = parseUrl(
      pathInfo && (pathInfo.requestPath || pathInfo.finalRequestPath || pathInfo.path)
    );
    if (parsedPath) return parsedPath;
    var xhr = detail && detail.xhr;
    return parseUrl(xhr && xhr.responseURL);
  }

  function primeScrollStateFromLink(link) {
    var main = document.getElementById("main");
    if (!main || !link || !link.getAttribute) return;
    var explicitTarget = link.getAttribute("hx-target") || link.getAttribute("data-hx-target");
    var boostedOff = link.getAttribute("hx-boost") === "false" || link.getAttribute("data-hx-boost") === "false";
    var shellLink = !boostedOff && (
      explicitTarget === "#main" ||
      (!explicitTarget && link.closest("#main, .chirpui-app-shell__sidebar"))
    );
    if (!shellLink) return;
    var requestedUrl = parseUrl(link.href);
    if (!requestedUrl || requestedUrl.origin !== window.location.origin) return;
    main[SCROLL_STATE] = {
      mode: resolveScrollMode({ target: main, elt: link }, requestedUrl),
      hash: requestedUrl.hash || "",
      y: window.scrollY || window.pageYOffset || 0,
    };
  }

  function resolveScrollMode(detail, requestedUrl) {
    var main = getMainTarget(detail);
    if (!main) return "preserve";
    var trigger = detail && (detail.elt || (detail.requestConfig && detail.requestConfig.elt));
    var override = trigger && trigger.getAttribute ? trigger.getAttribute("data-chirp-scroll") : null;
    var currentUrl = parseUrl(window.location.href);
    if (!override) override = main.getAttribute("data-chirp-scroll") || "auto";
    if (override !== "auto") return override;
    if (historyRestorePending) return "preserve";
    if (requestedUrl && requestedUrl.hash) return "anchor";
    if (!currentUrl || !requestedUrl) return "preserve";
    return currentUrl.pathname !== requestedUrl.pathname || currentUrl.search !== requestedUrl.search
      ? "top"
      : "preserve";
  }

  function storeScrollState(detail) {
    var main = getMainTarget(detail);
    if (!main) return;
    var requestedUrl = getRequestedUrl(detail) || parseUrl(window.location.href);
    main[SCROLL_STATE] = {
      mode: resolveScrollMode(detail, requestedUrl),
      hash: requestedUrl && requestedUrl.hash ? requestedUrl.hash : "",
      y: window.scrollY || window.pageYOffset || 0,
    };
    historyRestorePending = false;
  }

  function readScrollState(main) {
    var state = main && main[SCROLL_STATE];
    if (main) delete main[SCROLL_STATE];
    return state || { mode: "preserve", hash: "" };
  }

  function syncShellOffset() {
    var topbar = document.querySelector("[data-chirpui-shell-topbar]");
    if (!topbar) return;
    var height = Math.ceil(topbar.getBoundingClientRect().height);
    document.documentElement.style.setProperty("--chirpui-shell-offset-top", height + "px");
  }

  function syncFillMode(main) {
    if (!main || main.id !== "main") return;
    var pageContent = document.getElementById("page-content");
    var hasFill = !!(pageContent && pageContent.querySelector(":scope > .chirpui-page-fill"));
    main.classList.toggle("chirpui-app-shell__main--fill", hasFill);
  }

  function scrollDocumentToTop() {
    window.scrollTo({ top: 0, left: 0 });
  }

  function deferScroll(fn) {
    window.requestAnimationFrame(function () {
      window.setTimeout(fn, 0);
    });
  }

  function restoreDocumentScroll(y) {
    deferScroll(function () {
      window.scrollTo({ top: y || 0, left: 0 });
    });
  }

  function scrollToHash(hash) {
    if (!hash) return;
    var hashId = hash.charAt(0) === "#" ? hash.slice(1) : hash;
    try {
      hashId = decodeURIComponent(hashId);
    } catch (_error) {
      // Keep the original fragment when it is not URI-encoded.
    }
    var target = document.getElementById(hashId);
    if (!target) {
      try {
        target = document.querySelector(hash);
      } catch (_error) {
        target = null;
      }
    }
    if (!target) return;
    deferScroll(function () {
      target.scrollIntoView({ block: "start" });
    });
  }

  function syncShellGeometry() {
    syncShellOffset();
    syncFillMode(document.getElementById("main"));
  }

  if (window.ResizeObserver) {
    var topbar = document.querySelector("[data-chirpui-shell-topbar]");
    if (topbar) {
      var observer = new ResizeObserver(syncShellOffset);
      observer.observe(topbar);
    }
  } else {
    window.addEventListener("resize", syncShellOffset);
  }

  window.addEventListener("load", syncShellGeometry);
  document.body.addEventListener("click", function (e) {
    var target = e.target;
    var link = target && target.closest ? target.closest("a[href]") : null;
    primeScrollStateFromLink(link);
  }, true);
  document.body.addEventListener("htmx:historyRestore", function () {
    historyRestorePending = true;
  }, true);
  document.body.addEventListener("htmx:beforeRequest", storeScrollState, true);
  document.body.addEventListener("htmx:afterSwap", function (e) {
    var main = getMainTarget(e.detail);
    if (!main) return;
    var state = readScrollState(main);
    historyRestorePending = false;
    main[SCROLL_STATE] = state;
    if (state.mode === "top") scrollDocumentToTop();
  }, true);
  document.body.addEventListener("htmx:afterSettle", function (e) {
    var main = getMainTarget(e.detail);
    if (!main) return;
    var state = readScrollState(main);
    syncShellGeometry();
    if (state.mode === "preserve") restoreDocumentScroll(state.y);
    if (state.mode === "anchor" || (state.mode === "top" && window.location.hash)) {
      scrollToHash(state.hash || window.location.hash);
    }
    main.focus({ preventScroll: true });
  }, true);
  syncShellGeometry();
})();
</script>
{% end %}