(defcomp
  (&key d filename)
  :affinity :server
  (div
    (~tw :tokens "max-w-3xl mx-auto")
    (div
      (~tw :tokens "mb-4")
      (a
        (~tw :tokens "text-sm text-violet-600 hover:text-violet-800")
        :href (str
          "/sx/(language.(spec.(explore."
          (replace filename ".sx" "")
          ")))")
        :sx-get (str
          "/sx/(language.(spec.(explore."
          (replace filename ".sx" "")
          ")))")
        :sx-target "#sx-content"
        :sx-select "#sx-content"
        :sx-swap "innerHTML"
        :sx-push-url "true"
        (str "← Back to " (replace filename ".sx" ""))))
    (let-match
      {:kind kind :effects effects :params params :source source :name name}
      d
      (div
        (~tw :tokens "rounded border border-violet-200 bg-violet-50/30 p-4")
        (div
          (~tw :tokens "flex items-center gap-2 flex-wrap mb-3")
          (span
            (~tw :tokens "font-mono text-lg font-semibold text-stone-800")
            name)
          (span (~tw :tokens "text-xs text-stone-400") kind)
          (if
            (empty? effects)
            (span
              (~tw
                :tokens "text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700")
              "pure")
            (map
              (fn (eff) (~specs-explorer/spec-effect-badge :effect eff))
              effects)))
        (when
          (not (empty? params))
          (~specs-explorer/spec-param-list :params params))
        (details
          :open "true"
          (summary
            (~tw
              :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer select-none mt-3 rounded")
            "SX Source")
          (pre
            (~tw
              :tokens "text-xs p-3 overflow-x-auto bg-white rounded mt-1 border border-stone-200")
            (code (~tw :tokens "language-sx") source)))))))
