(defcomp
  ()
  (div
    (~tw :tokens "space-y-4")
    (div
      (~tw :tokens "grid grid-cols-2 gap-4")
      (div
        :id "oob-box-a"
        (~tw :tokens "p-4 rounded border border-stone-200 bg-stone-100 text-center")
        (p (~tw :tokens "text-stone-500") "Box A")
        (p (~tw :tokens "text-sm text-stone-400") "Waiting..."))
      (div
        :id "oob-box-b"
        (~tw :tokens "p-4 rounded border border-stone-200 bg-stone-100 text-center")
        (p (~tw :tokens "text-stone-500") "Box B")
        (p (~tw :tokens "text-sm text-stone-400") "Waiting...")))
    (button
      :sx-get "/sx/(geography.(hypermedia.(example.(api.oob))))"
      :sx-target "#oob-box-a"
      :sx-swap "innerHTML"
      (~tw :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm")
      "Update both boxes")))
