;; Cyst demo — isolated reactive subtree inside a parent island.
(defisland ()
  (let ((parent-count (signal 0))
        (render-count (signal 0)))
    ;; Increment render-count each time the parent re-renders
    (swap! render-count inc)
    (div (~tw :tokens "rounded border border-violet-200 bg-violet-50/30 p-4 space-y-4")
      (div (~tw :tokens "space-y-2")
        (div (~tw :tokens "text-xs text-stone-500") (str "Parent render count: " (deref render-count)))
        (div (~tw :tokens "flex items-center gap-3")
          (span (~tw :tokens "text-sm text-stone-600") "Parent signal:")
          (button (~tw :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 text-sm hover:bg-stone-300")
            :on-click (fn (e) (swap! parent-count inc))
            "+")
          (span (~tw :tokens "font-mono text-lg font-bold text-stone-700") (deref parent-count))))

      ;; The cyst — its state survives parent re-renders
      (cyst :key "demo-cyst"
        (let ((child-count (signal 0)))
          (div (~tw :tokens "rounded border border-emerald-200 bg-emerald-50/30 p-3 space-y-2")
            (div (~tw :tokens "text-xs text-emerald-600 font-semibold") "Inside cyst (isolated)")
            (div (~tw :tokens "flex items-center gap-3")
              (span (~tw :tokens "text-sm text-stone-600") "Cyst signal:")
              (button (~tw :tokens "px-2 py-1 rounded bg-emerald-200 text-emerald-700 text-sm hover:bg-emerald-300")
                :on-click (fn (e) (swap! child-count inc))
                "+")
              (span (~tw :tokens "font-mono text-lg font-bold text-emerald-700") (deref child-count)))))))))
