(defcomp
  (&key bootstrapper-source bootstrapped-output)
  (~docs/page
    :title "JavaScript Bootstrapper"
    (div
      (~tw :tokens "space-y-8")
      (div
        (~tw :tokens "space-y-3")
        (p
          (~tw :tokens "text-stone-600")
          "This page reads the canonical "
          (code (~tw :tokens "text-violet-700 text-sm") ".sx")
          " spec files, runs the Python bootstrapper, and displays both the compiler source and its generated JavaScript output. "
          "The generated code below is live — it was produced by the bootstrapper at page load time, not served from a static file.")
        (p
          (~tw :tokens "text-xs text-stone-400 italic")
          "The sx-browser.js powering this page IS the bootstrapped output. "
          "This page re-runs the bootstrapper to display the source and result."))
      (div
        (~tw :tokens "space-y-3")
        (div
          (~tw :tokens "flex items-baseline gap-3")
          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Bootstrapper")
          (span (~tw :tokens "text-sm text-stone-400 font-mono") "bootstrap_js.py"))
        (p
          (~tw :tokens "text-sm text-stone-500")
          "The compiler reads "
          (code (~tw :tokens "text-violet-700 text-sm") ".sx")
          " spec files (parser, eval, primitives, render, adapters, engine, orchestration, boot, cssx) "
          "and emits a standalone JavaScript file. Platform bridge functions (DOM operations, fetch, timers) "
          "are emitted as native JS implementations.")
        (div
          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
          (pre
            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
            (code (highlight bootstrapper-source "python")))))
      (div
        (~tw :tokens "space-y-3")
        (div
          (~tw :tokens "flex items-baseline gap-3")
          (h2
            (~tw :tokens "text-2xl font-semibold text-stone-800")
            "Generated Output")
          (span (~tw :tokens "text-sm text-stone-400 font-mono") "sx-browser.js"))
        (p
          (~tw :tokens "text-sm text-stone-500")
          "The JavaScript below was generated by running the bootstrapper against the current spec files. "
          "It is a complete, self-contained SX runtime — parser, evaluator, DOM adapter, engine, and CSS system.")
        (div
          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-violet-300")
          (pre
            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
            (code (highlight bootstrapped-output "javascript"))))))))
