(defisland
  ()
  (let
    ((open? (signal false)))
    (div
      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-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! open? not))
        (if (deref open?) "Close Modal" "Open Modal"))
      (portal
        "#portal-root"
        (when
          (deref open?)
          (div
            (~tw :tokens "fixed inset-0 bg-black/50 flex items-center justify-center z-50")
            :on-click (fn (e) (reset! open? false))
            (div
              (~tw :tokens "bg-white rounded-lg p-6 max-w-md shadow-xl")
              :on-click (fn (e) (stop-propagation e))
              (h2
                (~tw :tokens "text-lg font-bold text-stone-800 mb-2")
                "Portal Modal")
              (p
                (~tw :tokens "text-stone-600 text-sm mb-4")
                "This content is rendered into "
                (code "#portal-root")
                " — outside the island's DOM subtree. It escapes overflow:hidden, z-index stacking, and layout constraints.")
              (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) (reset! open? false))
                "Close"))))))))
