(defcomp
  ~shared:shell/sx-page-shell
  (&key
    (title :as string)
    (meta-html :as string?)
    (csrf :as string)
    (sx-css :as string?)
    (component-hash :as string?)
    (component-defs :as string?)
    (component-manifest :as string?)
    (pages-sx :as string?)
    (page-sx :as string?)
    (body-html :as string?)
    (asset-url :as string)
    (wasm-hash :as string?)
    (platform-hash :as string?)
    (sxbc-hash :as string?)
    (inline-css :as string?)
    (inline-head-js :as string?)
    (init-sx :as string?))
  (<>
    (raw! "<!doctype html>")
    (html
      :lang "en"
      (head
        (meta :charset "utf-8")
        (meta :name "viewport" :content "width=device-width, initial-scale=1")
        (meta :name "robots" :content "index,follow")
        (meta :name "theme-color" :content "#ffffff")
        (title title)
        (when meta-html (raw! meta-html))
        (meta :name "csrf-token" :content csrf)
        (style :id "sx-css" (raw! (or sx-css "")))
        (let
          ((cssx-rules (collected "cssx")))
          (clear-collected! "cssx")
          (when
            (not (empty? cssx-rules))
            (style :data-sx-css true (raw! (join "" cssx-rules)))))
        (if
          (not (nil? inline-head-js))
          (when
            (not (empty? inline-head-js))
            (script (raw! inline-head-js)))
          (<>
            (script
              (raw!
                "if(matchMedia('(hover:hover) and (pointer:fine)').matches){document.documentElement.classList.add('hover-capable')}"))
            (script
              (raw!
                "document.addEventListener('click',function(e){var t=e.target.closest('[data-close-details]');if(!t)return;var d=t.closest('details');if(d)d.removeAttribute('open')})"))))
        (if
          (not (nil? inline-css))
          (style (raw! inline-css))
          (style
            (raw!
              "details[data-toggle-group=\"mobile-panels\"]>summary{list-style:none}\ndetails[data-toggle-group=\"mobile-panels\"]>summary::-webkit-details-marker{display:none}\n@media(min-width:768px){.nav-group:focus-within .submenu,.nav-group:hover .submenu{display:block}}\nimg{max-width:100%;height:auto}\n.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}\n.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}\ndetails.group{overflow:hidden}details.group>summary{list-style:none}details.group>summary::-webkit-details-marker{display:none}\n.sx-indicator{display:none}.sx-request .sx-indicator{display:inline-flex}\n.sx-error .sx-indicator{display:none}.sx-loading .sx-indicator{display:inline-flex}\n.js-wrap.open .js-pop{display:block}.js-wrap.open .js-backdrop{display:block}"))))
      (body
        :class "bg-stone-50 text-stone-900"
        (div :id "sx-root" (raw! (or body-html "")))
        (div :id "portal-root")
        (style
          (raw!
            "[data-sx-island] button,[data-sx-island] a,[data-sx-island] [role=button]{cursor:pointer}"))
        (when
          component-manifest
          (script
            :type "application/json"
            :data-sx-manifest true
            (raw! component-manifest)))
        (when
          init-sx
          (script :type "text/sx" :data-init true (raw! init-sx)))
        (script :type "text/sx-pages" (raw! (or pages-sx "")))
        (script
          :type "text/sx"
          :data-mount "#sx-root"
          (raw! (or page-sx "")))
        (script
          (raw!
            "\n(function(){\n  var m=document.querySelector('[data-sx-manifest]');\n  if(!m)return;\n  var j=JSON.parse(m.textContent);\n\n  // Cache API wrapper — intercept .wasm fetches for offline caching.\n  if(typeof caches!=='undefined'){\n    var _fetch=window.fetch;\n    var CACHE='sx-wasm-v1';\n    window.fetch=function(input,init){\n      var url=(typeof input==='string')?input:\n              (input instanceof URL)?input.href:\n              (input&&input.url)||'';\n      if(url.indexOf('.wasm')!==-1){\n        return caches.open(CACHE).then(function(c){\n          return c.match(url).then(function(r){\n            if(r)return r;\n            return _fetch(input,init).then(function(resp){\n              if(resp.ok)c.put(url,resp.clone());\n              return resp;\n            });\n          });\n        });\n      }\n      return _fetch(input,init);\n    };\n  }\n\n  // Content-addressed boot: load kernel + platform by hash\n  if(!j.boot)return;\n  j.boot.forEach(function(h){\n    var s=document.createElement('script');\n    s.src='/sx/h/'+h;\n    document.head.appendChild(s);\n  });\n})();\n"))))))
