(defisland
  ()
  (let
    ((bg (signal "violet"))
      (size (signal "text-2xl"))
      (weight (signal "font-bold"))
      (text (signal "the joy of sx"))
      (saved (signal (list))))
    (freeze-scope
      "widget"
      (fn
        ()
        (freeze-signal "bg" bg)
        (freeze-signal "size" size)
        (freeze-signal "weight" weight)
        (freeze-signal "text" text)))
    (span
      (~tw
        :tokens "hidden bg-violet-50 bg-rose-50 bg-emerald-50 bg-amber-50 bg-sky-50 bg-stone-50 border-violet-200 border-rose-200 border-emerald-200 border-amber-200 border-sky-200 border-stone-200 text-violet-700 text-rose-700 text-emerald-700 text-amber-700 text-sky-700 text-stone-700"))
    (div
      (~tw :tokens "space-y-4")
      (div
        (~tw :tokens "p-6 rounded-lg text-center transition-all border")
        :class (str "bg-" (deref bg) "-50 border-" (deref bg) "-200")
        (span
          :class (str (deref size) " " (deref weight) " text-" (deref bg) "-700")
          (deref text)))
      (div
        (~tw :tokens "grid grid-cols-2 gap-3")
        (div
          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Colour")
          (div
            (~tw :tokens "flex gap-1")
            (button
              :on-click (fn (e) (reset! bg "violet"))
              (~tw :tokens "w-8 h-8 rounded-full")
              :class (str
                "bg-violet-400"
                (if
                  (= (deref bg) "violet")
                  " ring-2 ring-offset-1 ring-stone-400"
                  ""))
              "")
            (button
              :on-click (fn (e) (reset! bg "rose"))
              (~tw :tokens "w-8 h-8 rounded-full")
              :class (str
                "bg-rose-400"
                (if
                  (= (deref bg) "rose")
                  " ring-2 ring-offset-1 ring-stone-400"
                  ""))
              "")
            (button
              :on-click (fn (e) (reset! bg "emerald"))
              (~tw :tokens "w-8 h-8 rounded-full")
              :class (str
                "bg-emerald-400"
                (if
                  (= (deref bg) "emerald")
                  " ring-2 ring-offset-1 ring-stone-400"
                  ""))
              "")
            (button
              :on-click (fn (e) (reset! bg "amber"))
              (~tw :tokens "w-8 h-8 rounded-full")
              :class (str
                "bg-amber-400"
                (if
                  (= (deref bg) "amber")
                  " ring-2 ring-offset-1 ring-stone-400"
                  ""))
              "")
            (button
              :on-click (fn (e) (reset! bg "sky"))
              (~tw :tokens "w-8 h-8 rounded-full")
              :class (str
                "bg-sky-400"
                (if
                  (= (deref bg) "sky")
                  " ring-2 ring-offset-1 ring-stone-400"
                  ""))
              "")
            (button
              :on-click (fn (e) (reset! bg "stone"))
              (~tw :tokens "w-8 h-8 rounded-full")
              :class (str
                "bg-stone-400"
                (if
                  (= (deref bg) "stone")
                  " ring-2 ring-offset-1 ring-stone-400"
                  ""))
              "")))
        (div
          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Size")
          (div
            (~tw :tokens "flex gap-1")
            (map
              (fn
                (s)
                (button
                  :on-click (fn (e) (reset! size s))
                  (~tw :tokens "px-2 py-1 rounded text-xs")
                  :class (if
                    (= (deref size) s)
                    "bg-stone-700 text-white"
                    "bg-stone-100 text-stone-600")
                  s))
              (list "text-sm" "text-lg" "text-2xl" "text-4xl"))))
        (div
          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Weight")
          (div
            (~tw :tokens "flex gap-1")
            (map
              (fn
                (w)
                (button
                  :on-click (fn (e) (reset! weight w))
                  (~tw :tokens "px-2 py-1 rounded text-xs")
                  :class (if
                    (= (deref weight) w)
                    "bg-stone-700 text-white"
                    "bg-stone-100 text-stone-600")
                  w))
              (list "font-normal" "font-bold" "font-semibold"))))
        (div
          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Text")
          (input
            :type "text"
            :bind text
            (~tw
              :tokens "w-full px-2 py-1 rounded border border-stone-300 text-sm"))))
      (div
        (~tw :tokens "flex gap-2 items-center")
        (button
          :on-click (fn
            (e)
            (let
              ((sx (freeze-to-sx "widget")))
              (swap! saved (fn (l) (append l (list sx))))))
          (~tw
            :tokens "px-3 py-1.5 rounded bg-amber-500 text-white text-sm hover:bg-amber-600")
          "Save config")
        (span
          (~tw :tokens "text-xs text-stone-400")
          (str (len (deref saved)) " saved")))
      (when
        (not (empty? (deref saved)))
        (div
          (~tw :tokens "space-y-1")
          (label (~tw :tokens "text-xs text-stone-400 block") "Saved configs")
          (map-indexed
            (fn
              (i sx)
              (button
                :on-click (fn (e) (thaw-from-sx sx))
                (~tw
                  :tokens "block w-full text-left px-2 py-1 rounded bg-stone-50 hover:bg-stone-100 font-mono text-xs text-stone-600 truncate")
                (str "Config " (+ i 1))))
            (deref saved)))))))
