;; ---------------------------------------------------------------------------
;; L1: Foreign — canvas drawing via host-call
;; ---------------------------------------------------------------------------
(defisland ()
  (let ((canvas-ref (dict "current" nil))
        (color (signal "#8b5cf6"))
        (count (signal 0)))
    (let ((_eff (effect (fn ()
            (let ((el (get canvas-ref "current"))
                  (n (deref count))
                  (c (deref color)))
              (when el
                (let ((ctx (host-call el "getContext" "2d")))
                  (host-call ctx "clearRect" 0 0 280 160)
                  (host-set! ctx "fillStyle" c)
                  (host-call ctx "fillRect" 10 10 (min (* n 25) 260) (min (* n 18) 140)))))))))
      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
        (canvas :ref canvas-ref :width "280" :height "160"
          (~tw :tokens "border border-stone-300 rounded bg-white block mb-3"))
        (div (~tw :tokens "flex items-center gap-3")
          (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))
            "Add")
          (select :bind color
            (~tw :tokens "px-2 py-1 rounded border border-stone-300 text-sm")
            (option :value "#8b5cf6" "Violet")
            (option :value "#3b82f6" "Blue")
            (option :value "#ef4444" "Red")
            (option :value "#22c55e" "Green"))
          (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! count 0))
            "Clear")
          (span (~tw :tokens "text-sm text-stone-500")
            (deref count) " squares"))))))
