(defcomp
  (&key
    (spec-title :as string)
    (spec-desc :as string)
    (spec-filename :as string)
    (spec-source :as string)
    (spec-prose :as string?))
  (~docs/page
    :title spec-title
    (div
      (~tw :tokens "flex items-center gap-3 mb-4")
      (span (~tw :tokens "text-sm text-stone-400 font-mono") spec-filename)
      (span (~tw :tokens "text-sm text-stone-500 flex-1") spec-desc)
      (a
        :href (str
          "/sx/(language.(spec.(explore."
          (replace spec-filename ".sx" "")
          ")))")
        :sx-get (str
          "/sx/(language.(spec.(explore."
          (replace spec-filename ".sx" "")
          ")))")
        :sx-target "#sx-content"
        :sx-select "#sx-content"
        :sx-swap "outerHTML"
        :sx-push-url "true"
        (~tw :tokens "text-sm text-violet-600 hover:text-violet-800 font-medium whitespace-nowrap")
        "Explore"))
    (when
      spec-prose
      (div
        (~tw :tokens "mb-6 space-y-3")
        (p (~tw :tokens "text-stone-600 leading-relaxed") spec-prose)
        (p
          (~tw :tokens "text-xs text-stone-400 italic")
          "The s-expression source below is the canonical specification. "
          "The English description above is a summary.")))
    (div
      (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl")
      (pre
        (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words")
        (code (highlight spec-source "sx"))))))
