;; ===========================================================================
;; Live demo islands
;; ===========================================================================
;; ---------------------------------------------------------------------------
;; L0: Ref — timer ID in closure, DOM handle in dict
;; ---------------------------------------------------------------------------
(defisland ()
  (let ((input-ref (dict "current" nil))
        (ticks (signal 0))
        (running (signal false))
        (last-value (signal "")))
    (let ((_eff (effect (fn ()
            (when (deref running)
              (let ((id (set-interval (fn () (swap! ticks inc)) 500)))
                (fn () (clear-interval id))))))))
      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
        (p (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
          "Timer — interval ID captured in effect closure")
        (div (~tw :tokens "flex items-center gap-3 mb-4")
          (span (~tw :tokens "text-2xl font-bold text-violet-900 font-mono w-16 text-center")
            (deref ticks))
          (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! running not))
            (if (deref running) "Stop" "Start"))
          (button (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
            :on-click (fn (e) (do (reset! running false) (reset! ticks 0)))
            "Reset"))
        (p (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
          "DOM handle — element ref in dict")
        (div (~tw :tokens "flex items-center gap-3")
          (input :ref input-ref :type "text" :placeholder "Type something…"
            (~tw :tokens "px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400 w-48"))
          (button (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
            :on-click (fn (e)
              (reset! last-value (dom-get-prop (get input-ref "current") "value")))
            "Read")
          (when (not (= (deref last-value) ""))
            (span (~tw :tokens "text-sm text-stone-600 font-mono")
              "\"" (deref last-value) "\"")))))))
