(defisland
  (&key initial)
  (let
    ((count (signal (or initial 0)))
      (doubled (computed (fn () (* 2 (deref count))))))
    (div
      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
      (div
        (~tw :tokens "flex items-center gap-4")
        (button
          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
          :on-click (fn (e) (swap! count dec))
          "−")
        (span
          (~tw :tokens "text-2xl font-bold text-violet-900 w-12 text-center")
          (deref count))
        (button
          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
          :on-click (fn (e) (swap! count inc))
          "+"))
      (p
        (~tw :tokens "text-sm text-stone-500 mt-2")
        "doubled: "
        (span (~tw :tokens "font-mono text-violet-700") (deref doubled))))))
