;; ── Playground island ───────────────────────────────────────────
(defcomp
  ()
  (div
    (~tw :tokens "space-y-4")
    (style
      "\n      .bg-violet-600 { background-color: rgb(124 58 237); }\n      .text-white { color: white; }\n      .animate-bounce { animation: bounce 1s infinite; }\n      @keyframes bounce {\n        0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }\n        50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }\n      }\n    ")
    (p
      (~tw :tokens "text-sm text-gray-600")
      "These buttons have "
      (code "_=\"...\"")
      " attributes — hyperscript compiled to SX and activated at boot.")
    (div
      (~tw :tokens "flex gap-3 items-center")
      (button
        (~tw
          :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm transition-colors")
        :_ "on click toggle .bg-violet-600 on me then toggle .text-white on me"
        "Toggle Color")
      (button
        (~tw
          :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm transition-colors")
        :_ "on click add .animate-bounce to me then wait 1s then remove .animate-bounce from me"
        "Bounce")
      (span
        (~tw :tokens "text-sm text-gray-500")
        :id "click-counter"
        "0 clicks"))
    (div
      (~tw :tokens "mt-2")
      (button
        (~tw
          :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm transition-colors")
        :_ "on click increment @data-count on me then set #click-counter's innerHTML to my @data-count"
        :data-count "0"
        "Count Clicks"))))
