From 0425d055454b53f61a8989385ff7ef155d084ad9 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Sun, 31 Oct 2021 01:06:49 +0200
Subject: [PATCH 1/7] AbstractPlutoDingetjes integration

---
 Project.toml         |   2 +
 src/Builtins.jl      | 119 ++++++++++++++++++++++++++++++++++++++++---
 src/Clock.jl         |  31 ++++++++++-
 src/MultiCheckBox.jl |  12 +++++
 src/Scrubbable.jl    |  38 ++++++++++++--
 5 files changed, 189 insertions(+), 13 deletions(-)

diff --git a/Project.toml b/Project.toml
index 8e244c83..e9532736 100644
--- a/Project.toml
+++ b/Project.toml
@@ -4,6 +4,7 @@ authors = ["Fons van der Plas <fons@plutojl.org>"]
 version = "0.7.17"
 
 [deps]
+AbstractPlutoDingetjes = "6e696c72-6542-2067-7265-42206c756150"
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
 Hyperscript = "47d2ed2b-36de-50cf-bf87-49c2cf4b8b91"
@@ -18,6 +19,7 @@ Reexport = "189a3867-3050-52da-a836-e630ba90ab69"
 UUIDs = "cf7118a7-6976-5b1a-9a39-7adc72f591a4"
 
 [compat]
+AbstractPlutoDingetjes = "1"
 Hyperscript = "0.0.4"
 HypertextLiteral = "0.8, 0.9"
 IOCapture = "0.2"
diff --git a/src/Builtins.jl b/src/Builtins.jl
index 168f7f29..f89969d4 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -1,5 +1,5 @@
 ### A Pluto.jl notebook ###
-# v0.16.1
+# v0.17.0
 
 using Markdown
 using InteractiveUtils
@@ -55,11 +55,14 @@ import Random: randstring
 # ╔═╡ 6da84fb9-a629-4e4c-819e-dd87a3e267ce
 import Dates
 
+# ╔═╡ dc3b6628-f453-46d9-b6a1-957608a20764
+import AbstractPlutoDingetjes
+
 # ╔═╡ d088bcdb-d851-4ad7-b5a0-751c1f348995
 begin
 	struct Slider
 		range::AbstractRange
-		default::Number
+		default::Real
 		show_value::Bool
 	end
 	
@@ -95,6 +98,11 @@ begin
 	end
 
 	Base.get(slider::Slider) = slider.default
+	AbstractPlutoDingetjes.Bonds.initial_value(slider::Slider) = slider.default
+	AbstractPlutoDingetjes.Bonds.possible_values(slider::Slider) = slider.range
+	function AbstractPlutoDingetjes.Bonds.validate_value(slider::Slider, val)
+		val isa Real && (minimum(slider) - 0.0001 <= val <= maximum(slider) + 0.0001)
+	end
 end
 
 # ╔═╡ f59eef32-4732-46db-87b0-3564433ce43e
@@ -121,7 +129,11 @@ begin
 	end
 	
 	Base.get(numberfield::NumberField) = numberfield.default
-	
+	AbstractPlutoDingetjes.Bonds.initial_value(nf::NumberField) = nf.default
+	AbstractPlutoDingetjes.Bonds.possible_values(nf::NumberField) = nf.range
+	function AbstractPlutoDingetjes.Bonds.validate_value(nf::NumberField, val)
+		val isa Real && (minimum(nf) - 0.0001 <= val <= maximum(nf) + 0.0001)
+	end
 end
 
 # ╔═╡ b7c21c22-17f5-44b8-98de-a261d5c7192b
@@ -161,6 +173,11 @@ begin
 	end
 	
 	Base.get(button::LabelButton) = button.label
+	AbstractPlutoDingetjes.Bonds.initial_value(b::LabelButton) = b.label
+	AbstractPlutoDingetjes.Bonds.possible_values(b::LabelButton) = [b.label]
+	function AbstractPlutoDingetjes.Bonds.validate_value(b::LabelButton, val)
+		val == b.label
+	end
 end
 
 # ╔═╡ 7f8e4abf-e7e7-47bc-b1cc-514fa1af106c
@@ -223,6 +240,11 @@ begin
 	end
 	
 	Base.get(button::CounterButton) = button.label
+	AbstractPlutoDingetjes.Bonds.initial_value(b::CounterButton) = 0
+	AbstractPlutoDingetjes.Bonds.possible_values(b::CounterButton) = AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
+	function AbstractPlutoDingetjes.Bonds.validate_value(b::CounterButton, val)
+		val isa Integer && val >= 0
+	end
 end
 
 # ╔═╡ 76c3b77b-08aa-4899-bbdd-4f8faa8d1486
@@ -248,6 +270,11 @@ begin
 	end
 	
 	Base.get(checkbox::CheckBox) = checkbox.default
+	AbstractPlutoDingetjes.Bonds.initial_value(b::CheckBox) = b.default
+	AbstractPlutoDingetjes.Bonds.possible_values(b::CheckBox) = [false, true]
+	function AbstractPlutoDingetjes.Bonds.validate_value(b::CheckBox, val)
+		val isa Bool
+	end
 end
 
 # ╔═╡ f81bb386-203b-4392-b974-a1e2146b1a08
@@ -282,6 +309,11 @@ begin
 	end
 	
 	Base.get(textfield::TextField) = textfield.default
+	AbstractPlutoDingetjes.Bonds.initial_value(t::TextField) = t.default
+	AbstractPlutoDingetjes.Bonds.possible_values(t::TextField) = AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
+	function AbstractPlutoDingetjes.Bonds.validate_value(t::TextField, val)
+		t isa AbstractString
+	end
 end
 
 # ╔═╡ 4363f31e-1d71-4ad8-bfe8-04403d2d3621
@@ -310,7 +342,11 @@ begin
 	end
 	
 	Base.get(passwordfield::PasswordField) = passwordfield.default
-	
+	AbstractPlutoDingetjes.Bonds.initial_value(t::PasswordField) = t.default
+	AbstractPlutoDingetjes.Bonds.possible_values(t::PasswordField) = AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
+	function AbstractPlutoDingetjes.Bonds.validate_value(t::PasswordField, val)
+		t isa AbstractString
+	end
 end
 
 # ╔═╡ eb4e17fd-07ba-4031-a39f-0d9fccd3d886
@@ -350,8 +386,15 @@ begin
 		)</select>"""))
 	end
 	
-	Base.get(select::Select) = ismissing(select.default) ? first(select.options).first : select.default
-	
+	Base.get(select::Select) = 
+		ismissing(select.default) ? first(select.options).first : select.default
+	AbstractPlutoDingetjes.Bonds.initial_value(select::Select) = 
+		ismissing(select.default) ? first(select.options).first : select.default
+	AbstractPlutoDingetjes.Bonds.possible_values(select::Select) = 
+		first.(select.options)
+	function AbstractPlutoDingetjes.Bonds.validate_value(select::Select, val)
+		val ∈ (first(p) for p in select.options)
+	end
 end
 
 # ╔═╡ d64bb805-b700-4fd6-8894-2980152ce250
@@ -360,6 +403,18 @@ Select(["a" => "✅", "b" => "🆘", "c" => "🆘"])
 # ╔═╡ 4f3ba840-28ce-4790-b929-ce6af8920189
 Select(["a" => "🆘", "b" => "✅", "c" => "🆘"]; default="b")
 
+# ╔═╡ f21db694-2acb-417d-9f4d-0d2400aa067e
+function subarrays(x)
+
+	
+	[
+		x[collect(I)]
+		for I in Iterators.product(Iterators.repeated([true,false],length(x))...) |> collect |> vec
+	]
+
+	
+end
+
 # ╔═╡ 5bacf96d-f24b-4e8b-81c7-47140f286e27
 begin
 """A multi-selector (`<select multi>`) - the user can choose one or more of the `options`, an array of `Strings.
@@ -396,8 +451,19 @@ function Base.show(io::IO, m::MIME"text/html", select::MultiSelect)
 end
 
 Base.get(select::MultiSelect) = ismissing(select.default) ? Any[] : select.default
+
+	AbstractPlutoDingetjes.Bonds.initial_value(select::MultiSelect) = 
+		ismissing(select.default) ? Any[] : select.default
+	AbstractPlutoDingetjes.Bonds.possible_values(select::MultiSelect) = 
+		subarrays(first.(select.options))
+	function AbstractPlutoDingetjes.Bonds.validate_value(select::MultiSelect, val)
+		val isa Vector && val ⊆ (first(p) for p in select.options)
+	end
 end
 
+# ╔═╡ 4d8ea460-ff2b-4e92-966e-89e76d4806af
+subarrays([2,3,3])
+
 # ╔═╡ 998a3bd7-2d09-4b3f-8a41-50736b666dea
 MultiSelect(["a" => "🆘", "b" => "✅", "c" => "🆘",  "d" => "✅", "c" => "🆘2", "c3" => "🆘"]; default=["b","d"])
 
@@ -432,7 +498,17 @@ function Base.show(io::IO, m::MIME"text/html", filepicker::FilePicker)
     )>"""))
 end
 
-Base.get(select::FilePicker) = Dict("name" => "", "data" => UInt8[], "type" => "")
+Base.get(select::FilePicker) = nothing
+
+	AbstractPlutoDingetjes.Bonds.initial_value(select::FilePicker) = 
+		nothing
+	AbstractPlutoDingetjes.Bonds.possible_values(select::FilePicker) = 
+		AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
+	function AbstractPlutoDingetjes.Bonds.validate_value(select::FilePicker, val)
+		val isa Nothing || (
+			val isa Dict && keys(val) == ["name", "data", "type"] && val["data"] isa Vector{UInt8} && val["name"] isa String && val["type"] isa String
+		)
+	end	
 end
 
 # ╔═╡ db65293b-891a-43a3-8a42-b23bf542755f
@@ -513,6 +589,14 @@ function Base.show(io::IO, m::MIME"text/html", radio::Radio)
 end
 
 Base.get(radio::Radio) = radio.default
+
+	
+	AbstractPlutoDingetjes.Bonds.initial_value(select::Radio) = select.default
+	AbstractPlutoDingetjes.Bonds.possible_values(select::Radio) = 
+		first.(select.options)
+	function AbstractPlutoDingetjes.Bonds.validate_value(select::Radio, val)
+		val ∈ (first(p) for p in select.options)
+	end
 end
 
 # ╔═╡ 7c4303a1-19be-41a2-a6c7-90146e01401d
@@ -547,6 +631,11 @@ function Base.show(io::IO, m::MIME"text/html", datefield::DateField)
 			>"""))
 end
 Base.get(datefield::DateField) = datefield.default === nothing ? nothing : Dates.DateTime(datefield.default)
+	AbstractPlutoDingetjes.Bonds.initial_value(datefield::DateField) = 
+		datefield.default === nothing ? nothing : Dates.DateTime(datefield.default)
+	AbstractPlutoDingetjes.Bonds.possible_values(datefield::DateField) = 
+		AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
+	
 end
 
 # ╔═╡ ea7c4d05-c516-4f07-9d48-7df9ce997939
@@ -575,6 +664,11 @@ function Base.show(io::IO, m::MIME"text/html", timefield::TimeField)
 	>"))
 end
 Base.get(timefield::TimeField) = timefield.default === nothing ?  "" : Dates.format(timefield.default, "HH:MM")
+	AbstractPlutoDingetjes.Bonds.initial_value(timefield::TimeField) = 
+		timefield.default === nothing ?  "" : Dates.format(timefield.default, "HH:MM")
+	AbstractPlutoDingetjes.Bonds.possible_values(timefield::TimeField) = 
+		AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
+	
 end
 
 # ╔═╡ 4c9c1e24-235f-44f6-83f3-9f985f7fb536
@@ -602,6 +696,14 @@ function Base.show(io::IO, ::MIME"text/html", colorStringPicker::ColorStringPick
     withtag(() -> (), io, :input, :type=>"color", :value=>colorStringPicker.default)
 end
 Base.get(colorStringPicker::ColorStringPicker) = colorStringPicker.default
+
+	AbstractPlutoDingetjes.Bonds.initial_value(c::ColorStringPicker) = 
+		c.default
+	AbstractPlutoDingetjes.Bonds.possible_values(c::ColorStringPicker) = 
+		AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
+	function AbstractPlutoDingetjes.Bonds.validate_value(c::ColorStringPicker, val)
+		val isa String && val[1] == "#"
+	end
 end
 
 # ╔═╡ ec870eea-36a4-48b6-95d7-f7c083e29856
@@ -785,6 +887,7 @@ export Slider, NumberField, Button, LabelButton, CounterButton, CheckBox, TextFi
 # ╠═a0fb4f28-bfe4-4877-bf07-31acb9a56d2c
 # ╠═ac542b84-dbc8-47e2-8835-9e43582b6ad7
 # ╠═6da84fb9-a629-4e4c-819e-dd87a3e267ce
+# ╠═dc3b6628-f453-46d9-b6a1-957608a20764
 # ╠═98d251ff-67e7-4b16-b2e0-3e2102918ca2
 # ╠═d088bcdb-d851-4ad7-b5a0-751c1f348995
 # ╠═ec870eea-36a4-48b6-95d7-f7c083e29856
@@ -826,6 +929,8 @@ export Slider, NumberField, Button, LabelButton, CounterButton, CheckBox, TextFi
 # ╠═d64bb805-b700-4fd6-8894-2980152ce250
 # ╠═4f3ba840-28ce-4790-b929-ce6af8920189
 # ╠═5bacf96d-f24b-4e8b-81c7-47140f286e27
+# ╟─f21db694-2acb-417d-9f4d-0d2400aa067e
+# ╠═4d8ea460-ff2b-4e92-966e-89e76d4806af
 # ╠═78473a2f-0a64-4aa5-a60a-94031a4167b8
 # ╠═43f86637-9f0b-480c-826a-bbf583e44646
 # ╠═b6697df5-fd21-4553-9e90-1d33c0b51f70
diff --git a/src/Clock.jl b/src/Clock.jl
index beccd77e..cf5b6537 100644
--- a/src/Clock.jl
+++ b/src/Clock.jl
@@ -1,5 +1,5 @@
 ### A Pluto.jl notebook ###
-# v0.16.1
+# v0.17.0
 
 using Markdown
 using InteractiveUtils
@@ -17,7 +17,23 @@ end
 names(@__MODULE__)
 
 # ╔═╡ b1491ca6-f791-41d8-96b5-28971084f34c
+function skip_as_script(m::Module)
+	if isdefined(m, :PlutoForceDisplay)
+		return m.PlutoForceDisplay
+	else
+		isdefined(m, :PlutoRunner) && parentmodule(m) == Main
+	end
+end
 
+# ╔═╡ 3689bb1b-23f8-41ae-a392-fb2ee2ec40d7
+if skip_as_script(@__MODULE__)
+	import Pkg
+	Pkg.activate(Base.current_project(@__DIR__))
+	Text("Project env active")
+end
+
+# ╔═╡ fed9022f-1e8e-4f47-92d8-f99065023d29
+import AbstractPlutoDingetjes
 
 # ╔═╡ 05804305-cb1f-4c97-8937-f56289222bd7
 md"""
@@ -75,6 +91,15 @@ begin
 	end
 	
 	Base.get(clock::Clock) = 1
+	AbstractPlutoDingetjes.Bonds.initial_value(c::Clock) = 
+		c.default
+	AbstractPlutoDingetjes.Bonds.possible_values(c::Clock) = 
+		c.max_value === nothing ? 
+			AbstractPlutoDingetjes.Bonds.InfinitePossibilities() :
+			1:c.max_value
+	function AbstractPlutoDingetjes.Bonds.validate_value(c::Clock, val)
+		val isa Integer && 1 <= val && (c.max_value === nothing || val <= c.max_value)
+	end
 end
 
 # ╔═╡ 06289ad2-9e2f-45b3-9d15-7c5a4167e138
@@ -139,7 +164,9 @@ a
 # ╠═80c6e80e-077a-4e31-9467-788a8c437bfc
 # ╠═63854404-e6a5-4dc6-a40e-b09b9f531465
 # ╠═e7a070ab-67e7-444b-88d8-87c14aaef046
-# ╠═b1491ca6-f791-41d8-96b5-28971084f34c
+# ╟─b1491ca6-f791-41d8-96b5-28971084f34c
+# ╟─3689bb1b-23f8-41ae-a392-fb2ee2ec40d7
+# ╠═fed9022f-1e8e-4f47-92d8-f99065023d29
 # ╟─05804305-cb1f-4c97-8937-f56289222bd7
 # ╠═9be4d586-76d8-11eb-06ed-c53d3aef0469
 # ╟─a5f8ed96-136c-4ff4-8275-bd569f0dae40
diff --git a/src/MultiCheckBox.jl b/src/MultiCheckBox.jl
index 3f1e2e29..f9f7efe7 100644
--- a/src/MultiCheckBox.jl
+++ b/src/MultiCheckBox.jl
@@ -42,6 +42,9 @@ if skip_as_script(@__MODULE__)
 	Text("Project env active")
 end
 
+# ╔═╡ 631c14bf-e2d3-4a24-8ddc-095a3dab80ef
+import AbstractPlutoDingetjes
+
 # ╔═╡ 144bff17-30eb-458a-8e94-33e1f11edbeb
 "Convert a Julia array to a JS array in string form."
 function jsarray_string(a::AbstractVector{T}) where {T <: AbstractString}
@@ -124,6 +127,14 @@ function Base.show(io::IO, ::MIME"text/html", multicheckbox::MultiCheckBox)
 end
 
 Base.get(select::MultiCheckBox) = ismissing(select.default) ? Any[] : select.default
+
+	AbstractPlutoDingetjes.Bonds.initial_value(select::MultiCheckBox) = 
+		ismissing(select.default) ? Any[] : select.default
+	AbstractPlutoDingetjes.Bonds.possible_values(select::MultiCheckBox) = 
+		subarrays(first.(select.options))
+	function AbstractPlutoDingetjes.Bonds.validate_value(select::MultiCheckBox, val)
+		val isa Vector && val ⊆ (first(p) for p in select.options)
+	end
 end
 
 # ╔═╡ 8bfaf4c8-557d-433e-a228-aac493746efc
@@ -151,6 +162,7 @@ MultiCheckBox(["🐰 &&\\a \$\$", "🐱" , "🐵", "🐘", "🦝", "🐿️" , "
 # ╟─c8350f43-0d30-45d0-873b-ff56c5801ac1
 # ╟─79c4dc76-efa2-4b7f-99ea-243e3a17f81c
 # ╟─499ca710-1a50-4aa1-87d8-d213416e8e30
+# ╠═631c14bf-e2d3-4a24-8ddc-095a3dab80ef
 # ╠═430e2c1a-832f-11eb-024a-13e3989fd7c2
 # ╠═34012b14-d597-4b9d-b23d-66b638e4c282
 # ╠═144bff17-30eb-458a-8e94-33e1f11edbeb
diff --git a/src/Scrubbable.jl b/src/Scrubbable.jl
index e5b5a556..b10f5e9b 100644
--- a/src/Scrubbable.jl
+++ b/src/Scrubbable.jl
@@ -1,5 +1,5 @@
 ### A Pluto.jl notebook ###
-# v0.16.1
+# v0.17.0
 
 using Markdown
 using InteractiveUtils
@@ -177,6 +177,25 @@ md"""
 ## Definition
 """
 
+# ╔═╡ 1a649975-9e31-4ae8-8b2c-b615852cfc9d
+function skip_as_script(m::Module)
+	if isdefined(m, :PlutoForceDisplay)
+		return m.PlutoForceDisplay
+	else
+		isdefined(m, :PlutoRunner) && parentmodule(m) == Main
+	end
+end
+
+# ╔═╡ 8c1d2b3b-8fa1-4356-8a9d-dff10cd0a336
+if skip_as_script(@__MODULE__)
+	import Pkg
+	Pkg.activate(Base.current_project(@__DIR__))
+	Text("Project env active")
+end
+
+# ╔═╡ 58a5b0d2-88a6-4a83-bb26-05c05a51716b
+import AbstractPlutoDingetjes
+
 # ╔═╡ 9c7ce2da-4ad8-11eb-14cd-cfcc8d2a6bf8
 begin
 	"""
@@ -227,6 +246,14 @@ begin
 	Scrubbable(x::Number; kwargs...) = Scrubbable(;values=default_range(x), default=x, kwargs...)
 	
 	Base.get(s::Scrubbable) = s.default
+
+	AbstractPlutoDingetjes.Bonds.initial_value(s::Scrubbable) = 
+		s.default
+	AbstractPlutoDingetjes.Bonds.possible_values(s::Scrubbable) = 
+		s.values
+	function AbstractPlutoDingetjes.Bonds.validate_value(s::Scrubbable, val)
+		val isa Real && minimum(s.values) - 0.001 <= val <= maximum(s.values) + 0.001
+	end
 	
 	function Base.show(io::IO, m::MIME"text/html", s::Scrubbable)
 		format = if s.format === nothing
@@ -329,9 +356,6 @@ begin
 	Scrubbable
 end
 
-# ╔═╡ 5c78e637-5733-4b0a-8dab-bf1cd9656d11
-HTML(join(repr.([MIME"text/html"()], [Scrubbable(1.0) for _ in 1:100])))
-
 # ╔═╡ b62db8c0-4352-4d0f-83a2-ac170ef3337a
 md"""
 _If Alice has $(@bind a Scrubbable(20)) apples, 
@@ -382,6 +406,9 @@ end
 # ╔═╡ b081aa76-f080-4dd0-bcff-4bcc82a1c50a
 bc = @bind cool Scrubbable(199.1)
 
+# ╔═╡ 5c78e637-5733-4b0a-8dab-bf1cd9656d11
+HTML(join(repr.([MIME"text/html"()], [Scrubbable(1.0) for _ in 1:100])))
+
 # ╔═╡ 1d34fec8-01cb-4bee-8144-d8cc13a87b8b
 export Scrubbable
 
@@ -426,5 +453,8 @@ export Scrubbable
 # ╠═d17d259b-8379-46a7-ab54-cd2f697ec713
 # ╠═5c78e637-5733-4b0a-8dab-bf1cd9656d11
 # ╟─aed5fa58-4fe3-4596-b18d-a76cd98a5a1b
+# ╟─1a649975-9e31-4ae8-8b2c-b615852cfc9d
+# ╟─8c1d2b3b-8fa1-4356-8a9d-dff10cd0a336
+# ╠═58a5b0d2-88a6-4a83-bb26-05c05a51716b
 # ╠═9c7ce2da-4ad8-11eb-14cd-cfcc8d2a6bf8
 # ╠═1d34fec8-01cb-4bee-8144-d8cc13a87b8b

From 277412286cf449bd5db7a02387623ef6ba00a16a Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Sun, 31 Oct 2021 01:09:13 +0200
Subject: [PATCH 2/7] oops

---
 src/Layout.jl | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 2cf4f3f6..1d7aca98 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -21,9 +21,9 @@ md"""
 """
 
 # ╔═╡ 29d510b1-667e-4211-acf7-ae872cd2d1a5
-@htl("""<div style=''>
-	$("sfd") $("asdf") $([1,2,3])
-</div>""")
+# @htl("""<div style=''>
+# 	$("sfd") $("asdf") $([1,2,3])
+# </div>""")
 
 # ╔═╡ 4c0dc6e3-2596-40f6-8155-a1ae0326c33d
 md"""

From bf425e9de8c2be7f82f598d2eec4cd31e4711a88 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Mon, 1 Nov 2021 17:57:51 +0100
Subject: [PATCH 3/7] Slider and Select over arbitrary vectors, using
 pretransformation

---
 Project.toml    |   2 +-
 src/Builtins.jl | 536 +++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 418 insertions(+), 120 deletions(-)

diff --git a/Project.toml b/Project.toml
index e9532736..21b8a23d 100644
--- a/Project.toml
+++ b/Project.toml
@@ -19,7 +19,7 @@ Reexport = "189a3867-3050-52da-a836-e630ba90ab69"
 UUIDs = "cf7118a7-6976-5b1a-9a39-7adc72f591a4"
 
 [compat]
-AbstractPlutoDingetjes = "1"
+AbstractPlutoDingetjes = "1.1"
 Hyperscript = "0.0.4"
 HypertextLiteral = "0.8, 0.9"
 IOCapture = "0.2"
diff --git a/src/Builtins.jl b/src/Builtins.jl
index f89969d4..081f8102 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -7,8 +7,9 @@ using InteractiveUtils
 # This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
 macro bind(def, element)
     quote
+        local iv = try Base.loaded_modules[Base.PkgId(Base.UUID("6e696c72-6542-2067-7265-42206c756150"), "AbstractPlutoDingetjes")].Bonds.initial_value catch; b -> missing; end
         local el = $(esc(element))
-        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : missing
+        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : iv(el)
         el
     end
 end
@@ -58,27 +59,33 @@ import Dates
 # ╔═╡ dc3b6628-f453-46d9-b6a1-957608a20764
 import AbstractPlutoDingetjes
 
+# ╔═╡ a203d9d4-cd7b-4368-9f6d-e040a5757565
+import AbstractPlutoDingetjes.Bonds
+
 # ╔═╡ d088bcdb-d851-4ad7-b5a0-751c1f348995
 begin
-	struct Slider
-		range::AbstractRange
-		default::Real
-		show_value::Bool
-	end
-	
-	"""A Slider on the given `range`.
+	local result = begin
+		"""A Slider on the given `range`.
 
 	## Examples
-	`@bind x Slider(1:10)`
+	`@bind x OldSlider(1:10)`
 
-	`@bind x Slider(0.00 : 0.01 : 0.30)`
+	`@bind x OldSlider(0.00 : 0.01 : 0.30)`
 
-	`@bind x Slider(1:10; default=8, show_value=true)`
+	`@bind x OldSlider(1:10; default=8, show_value=true)`
 
 	"""
-	Slider(range::AbstractRange; default=missing, show_value=false) = Slider(range, (default === missing) ? first(range) : default, show_value)
+	struct OldSlider
+		range::AbstractRange
+		default::Real
+		show_value::Bool
+	end
+	end
 	
-	function Base.show(io::IO, m::MIME"text/html", slider::Slider)
+	
+	OldSlider(range::AbstractRange; default=missing, show_value=false) = OldSlider(range, (default === missing) ? first(range) : default, show_value)
+	
+	function Base.show(io::IO, m::MIME"text/html", slider::OldSlider)
 		show(io, m, @htl("""
 				<input 
 				type="range" 
@@ -97,16 +104,104 @@ begin
 				"""))
 	end
 
-	Base.get(slider::Slider) = slider.default
-	AbstractPlutoDingetjes.Bonds.initial_value(slider::Slider) = slider.default
-	AbstractPlutoDingetjes.Bonds.possible_values(slider::Slider) = slider.range
-	function AbstractPlutoDingetjes.Bonds.validate_value(slider::Slider, val)
+	Base.get(slider::OldSlider) = slider.default
+	Bonds.initial_value(slider::OldSlider) = slider.default
+	Bonds.possible_values(slider::OldSlider) = slider.range
+	function Bonds.validate_value(slider::OldSlider, val)
 		val isa Real && (minimum(slider) - 0.0001 <= val <= maximum(slider) + 0.0001)
 	end
+
+	result
 end
 
+# ╔═╡ 96084236-68f1-49b4-b866-027e7c80b5d8
+begin
+	local result = begin
+		"""A slider over the given values.
+
+	## Examples
+	`@bind x Slider(1:10)`
+
+	`@bind x Slider(0.00 : 0.01 : 0.30)`
+
+	`@bind x Slider(1:10; default=8, show_value=true)`
+
+	`@bind x Slider(["hello", "world!"])`
+	"""
+	struct Slider{T <: Any}
+		values::AbstractVector{T}
+		default::T
+		show_value::Bool
+	end
+	end
+	
+	
+	function Slider(values::AbstractVector{T}; default=missing, show_value=false) where T
+		Slider(values, (default === missing) ? first(values) : convert(T, default), show_value)
+	end
+	
+	function Base.show(io::IO, m::MIME"text/html", slider::Slider)
+
+		# compat code
+		if !AbstractPlutoDingetjes.is_supported_by_display(io, Bonds.transform_value)
+			compat_slider = try
+				OldSlider(slider.values, slider.default, slider.show_value)
+			catch
+				HTML("<span>❌ You need to update Pluto to use this PlutoUI element.</span>")
+			end
+			return show(io, m, compat_slider)
+		end
+
+		start_index = findfirst(isequal(slider.default), slider.values)
+		
+		show(io, m, @htl("""
+				<input 
+				type="range" 
+				min=1
+				max=$(length(slider.values))
+				value=$(start_index)
+				>
+				$(slider.show_value ? @htl(
+					"""<script>
+					const input_el = currentScript.previousElementSibling
+					const output_el = currentScript.nextElementSibling
+					const displays = $(string.(slider.values))
+					
+					input_el.addEventListener("input", () => {
+						output_el.value = displays[input_el.valueAsNumber - 1]
+					})
+					</script>
+					<output>$(string(slider.default))</output>"""
+				) : nothing)
+				
+				"""))
+	end
+
+	Base.get(slider::Slider) = slider.default
+	Bonds.initial_value(slider::Slider) = slider.default
+	
+	Bonds.possible_values(slider::Slider) = slider.range
+	
+	function Bonds.transform_value(slider::Slider, val_from_js)
+		slider.values[val_from_js]
+	end
+	
+	function Bonds.validate_value(slider::Slider, val)
+		val isa Integer && 1 <= val <= length(slider.values)
+	end
+
+	result
+end
+
+# ╔═╡ e440a357-1656-4cc4-8191-146fe82fbc8c
+@bind os3 HTML(repr(MIME"text/html"(), Slider(0:.1:1, default=.5, show_value=true)))
+
+# ╔═╡ 629e5d68-580f-4d6b-be14-5a109091e6b7
+HTML(repr(MIME"text/html"(), Slider([sin, cos])))
+
 # ╔═╡ f59eef32-4732-46db-87b0-3564433ce43e
 begin
+	local result = begin
 	"""A box where you can type in a number, within a specific range.
 
 	## Examples
@@ -121,6 +216,7 @@ begin
 		range::AbstractRange
 		default::Number
 	end
+	end
 	
 	NumberField(range::AbstractRange; default=missing) = NumberField(range, (default === missing) ? first(range) : default)
 	
@@ -129,15 +225,18 @@ begin
 	end
 	
 	Base.get(numberfield::NumberField) = numberfield.default
-	AbstractPlutoDingetjes.Bonds.initial_value(nf::NumberField) = nf.default
-	AbstractPlutoDingetjes.Bonds.possible_values(nf::NumberField) = nf.range
-	function AbstractPlutoDingetjes.Bonds.validate_value(nf::NumberField, val)
+	Bonds.initial_value(nf::NumberField) = nf.default
+	Bonds.possible_values(nf::NumberField) = nf.range
+	function Bonds.validate_value(nf::NumberField, val)
 		val isa Real && (minimum(nf) - 0.0001 <= val <= maximum(nf) + 0.0001)
 	end
+
+	result
 end
 
 # ╔═╡ b7c21c22-17f5-44b8-98de-a261d5c7192b
 begin
+	local result = begin
 	"""A button that sends back the same value every time that it is clicked.
 
 	You can use it to _trigger reactive cells_.
@@ -166,6 +265,7 @@ begin
 	struct LabelButton
 		label::AbstractString
 	end
+	end
 	LabelButton() = LabelButton("Click")
 	
 	function Base.show(io::IO, m::MIME"text/html", button::LabelButton)
@@ -173,11 +273,13 @@ begin
 	end
 	
 	Base.get(button::LabelButton) = button.label
-	AbstractPlutoDingetjes.Bonds.initial_value(b::LabelButton) = b.label
-	AbstractPlutoDingetjes.Bonds.possible_values(b::LabelButton) = [b.label]
-	function AbstractPlutoDingetjes.Bonds.validate_value(b::LabelButton, val)
+	Bonds.initial_value(b::LabelButton) = b.label
+	Bonds.possible_values(b::LabelButton) = [b.label]
+	function Bonds.validate_value(b::LabelButton, val)
 		val == b.label
 	end
+
+	result
 end
 
 # ╔═╡ 7f8e4abf-e7e7-47bc-b1cc-514fa1af106c
@@ -188,6 +290,7 @@ Button()
 
 # ╔═╡ 548bda96-2461-48a3-a3ad-6d113337826e
 begin
+	local result = begin
 	"""A button that sends back the number of times that it was clicked.
 
 	You can use it to _trigger reactive cells_.
@@ -214,6 +317,7 @@ begin
 	struct CounterButton
 		label::AbstractString
 	end
+	end
 	CounterButton() = CounterButton("Click")
 	
 	function Base.show(io::IO, m::MIME"text/html", button::CounterButton)
@@ -240,15 +344,18 @@ begin
 	end
 	
 	Base.get(button::CounterButton) = button.label
-	AbstractPlutoDingetjes.Bonds.initial_value(b::CounterButton) = 0
-	AbstractPlutoDingetjes.Bonds.possible_values(b::CounterButton) = AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
-	function AbstractPlutoDingetjes.Bonds.validate_value(b::CounterButton, val)
+	Bonds.initial_value(b::CounterButton) = 0
+	Bonds.possible_values(b::CounterButton) = Bonds.InfinitePossibilities()
+	function Bonds.validate_value(b::CounterButton, val)
 		val isa Integer && val >= 0
 	end
+
+	result
 end
 
 # ╔═╡ 76c3b77b-08aa-4899-bbdd-4f8faa8d1486
 begin
+	local result = begin
 	"""A checkbox to choose a Boolean value `true`/`false`.
 
 	## Examples
@@ -262,6 +369,7 @@ begin
 	struct CheckBox
 		default::Bool
 	end
+	end
 	
 	CheckBox(;default::Bool=false) = CheckBox(default)
 	
@@ -270,15 +378,18 @@ begin
 	end
 	
 	Base.get(checkbox::CheckBox) = checkbox.default
-	AbstractPlutoDingetjes.Bonds.initial_value(b::CheckBox) = b.default
-	AbstractPlutoDingetjes.Bonds.possible_values(b::CheckBox) = [false, true]
-	function AbstractPlutoDingetjes.Bonds.validate_value(b::CheckBox, val)
+	Bonds.initial_value(b::CheckBox) = b.default
+	Bonds.possible_values(b::CheckBox) = [false, true]
+	function Bonds.validate_value(b::CheckBox, val)
 		val isa Bool
 	end
+
+	result
 end
 
 # ╔═╡ f81bb386-203b-4392-b974-a1e2146b1a08
 begin
+	local result = begin
 	"""A text input (`<input type="text">`) - the user can type text, the text is returned as `String` via `@bind`.
 
 	If `dims` is a tuple `(cols::Integer, row::Integer)`, a `<textarea>` will be shown, with the given dimensions
@@ -295,6 +406,7 @@ begin
 		dims::Union{Tuple{Integer,Integer},Nothing}
 		default::AbstractString
 	end
+	end
 	
 	TextField(dims::Union{Tuple{Integer,Integer},Nothing}=nothing; default::AbstractString="") = TextField(dims, default)
 	
@@ -309,11 +421,13 @@ begin
 	end
 	
 	Base.get(textfield::TextField) = textfield.default
-	AbstractPlutoDingetjes.Bonds.initial_value(t::TextField) = t.default
-	AbstractPlutoDingetjes.Bonds.possible_values(t::TextField) = AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
-	function AbstractPlutoDingetjes.Bonds.validate_value(t::TextField, val)
+	Bonds.initial_value(t::TextField) = t.default
+	Bonds.possible_values(t::TextField) = Bonds.InfinitePossibilities()
+	function Bonds.validate_value(t::TextField, val)
 		t isa AbstractString
 	end
+
+	result
 end
 
 # ╔═╡ 4363f31e-1d71-4ad8-bfe8-04403d2d3621
@@ -321,7 +435,11 @@ TextField((30,2), default=teststr);
 
 # ╔═╡ c9614498-54a8-4925-9353-7a13d3303916
 begin
-	"""A password input (`<input type="password">`) - the user can type text, the text is returned as `String` via `@bind`.
+	Base.@kwdef struct PasswordField
+		default::AbstractString=""
+	end
+	local result = begin
+	@doc """A password input (`<input type="password">`) - the user can type text, the text is returned as `String` via `@bind`.
 
 	This does not provide any special security measures, it just renders black dots (•••) instead of the typed characters.
 
@@ -333,8 +451,7 @@ begin
 	`@bind secret_poem PasswordField()`
 
 	`@bind secret_poem PasswordField(default="Te dansen omdat men leeft")`"""
-	Base.@kwdef struct PasswordField
-		default::AbstractString=""
+	PasswordField
 	end
 	
 	function Base.show(io::IO, m::MIME"text/html", passwordfield::PasswordField)
@@ -342,16 +459,23 @@ begin
 	end
 	
 	Base.get(passwordfield::PasswordField) = passwordfield.default
-	AbstractPlutoDingetjes.Bonds.initial_value(t::PasswordField) = t.default
-	AbstractPlutoDingetjes.Bonds.possible_values(t::PasswordField) = AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
-	function AbstractPlutoDingetjes.Bonds.validate_value(t::PasswordField, val)
+	Bonds.initial_value(t::PasswordField) = t.default
+	Bonds.possible_values(t::PasswordField) = Bonds.InfinitePossibilities()
+	function Bonds.validate_value(t::PasswordField, val)
 		t isa AbstractString
 	end
+
+	result
 end
 
-# ╔═╡ eb4e17fd-07ba-4031-a39f-0d9fccd3d886
+# ╔═╡ 519f4da9-0205-486e-aea6-9dd5db6b38e0
+
+
+# ╔═╡ edfdbaee-ec31-40c2-9ad5-28250fe6b651
 begin
-	"""A dropdown menu (`<select>`) - the user can choose one of the `options`, an array of `String`s.
+	local result = begin
+	"""
+	A dropdown menu (`<select>`) - the user can choose one of the `options`, an array of `String`s.
 
 	See [`MultiSelect`](@ref) for a version that allows multiple selected items.
 
@@ -360,21 +484,23 @@ begin
 	See the [Mozilla docs about `select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
 
 	# Examples
-	`@bind veg Select(["potato", "carrot"])`
+	`@bind veg OldSelect(["potato", "carrot"])`
 
-	`@bind veg Select(["potato" => "🥔", "carrot" => "🥕"])`
+	`@bind veg OldSelect(["potato" => "🥔", "carrot" => "🥕"])`
 
-	`@bind veg Select(["potato" => "🥔", "carrot" => "🥕"], default="carrot")`"""
-	struct Select
+	`@bind veg OldSelect(["potato" => "🥔", "carrot" => "🥕"], default="carrot")`
+	"""
+	struct OldSelect
 		options::Vector{Pair{<:AbstractString,<:Any}}
 		default::Union{Missing, AbstractString}
 	end
+	end
 	
-	Select(options::AbstractVector{<:AbstractString}; default=missing) = Select([o => o for o in options], default)
+	OldSelect(options::AbstractVector{<:AbstractString}; default=missing) = OldSelect([o => o for o in options], default)
 	
-	Select(options::AbstractVector{<:Pair{<:AbstractString,<:Any}}; default=missing) = Select(options, default)
+	OldSelect(options::AbstractVector{<:Pair{<:AbstractString,<:Any}}; default=missing) = OldSelect(options, default)
 	
-	function Base.show(io::IO, m::MIME"text/html", select::Select)
+	function Base.show(io::IO, m::MIME"text/html", select::OldSelect)
 		show(io, m, @htl("""
 				<select>$(
 		map(select.options) do o
@@ -386,15 +512,87 @@ begin
 		)</select>"""))
 	end
 	
-	Base.get(select::Select) = 
-		ismissing(select.default) ? first(select.options).first : select.default
-	AbstractPlutoDingetjes.Bonds.initial_value(select::Select) = 
-		ismissing(select.default) ? first(select.options).first : select.default
-	AbstractPlutoDingetjes.Bonds.possible_values(select::Select) = 
-		first.(select.options)
-	function AbstractPlutoDingetjes.Bonds.validate_value(select::Select, val)
-		val ∈ (first(p) for p in select.options)
+	result
+end
+
+# ╔═╡ eb4e17fd-07ba-4031-a39f-0d9fccd3d886
+begin
+	local result = begin
+	"""
+	A dropdown menu (`<select>`) - the user can choose one of the `options`, an array of `String`s.
+
+	See [`MultiSelect`](@ref) for a version that allows multiple selected items.
+
+	`options` can also be an array of pairs `key::String => value::Any`. The `key` is returned via `@bind`; the `value` is shown.
+
+	See the [Mozilla docs about `select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
+
+	# Examples
+	`@bind veg Select(["potato", "carrot"])`
+
+	`@bind veg Select(["potato" => "🥔", "carrot" => "🥕"])`
+
+	The *key* can be any object, like a string, number, or even a function:
+	
+	```julia
+	@bind f Select([cos => "cosine function", sin => "sine function"])
+
+	f(0.5)
+	```
+
+	`@bind veg Select(["potato" => "🥔", "carrot" => "🥕"], default="carrot")`
+	"""
+	struct Select
+		options::AbstractVector{Pair}
+		default::Union{Missing, Any}
+	end
 	end
+	
+	Select(options::AbstractVector; default=missing) = Select([o => o for o in options], default)
+	
+	Select(options::AbstractVector{<:Pair}; default=missing) = Select(options, default)
+	
+	function Base.show(io::IO, m::MIME"text/html", select::Select)
+
+		
+		# compat code
+		if !AbstractPlutoDingetjes.is_supported_by_display(io, Bonds.transform_value)
+			compat_element = try
+				OldSelect(select.options, select.default)
+			catch
+				HTML("<span>❌ You need to update Pluto to use this PlutoUI element.</span>")
+			end
+			return show(io, m, compat_element)
+		end
+
+		
+		show(io, m, @htl("""
+				<select>$(
+		map(enumerate(select.options)) do (i,o)
+				@htl(
+				"<option value=$(i) selected=$(!ismissing(select.default) && o.first == select.default)>$(
+				string(o.second)
+				)</option>")
+			end
+		)</select>"""))
+	end
+
+	Base.get(select::Select) = select.default
+	Bonds.initial_value(select::Select) = select.default
+	
+	Bonds.possible_values(select::Select) = (o.first for o in select.options)
+	
+	function Bonds.transform_value(select::Select, val_from_js)
+		val_num = val_from_js isa Integer ? val_from_js : tryparse(Int64, val_from_js)
+		select.options[val_num].first
+	end
+	
+	function Bonds.validate_value(select::Select, val_from_js)
+		val_num = val_from_js isa Integer ? val_from_js : tryparse(Int64, val_from_js)
+		val_num isa Integer && 1 <= val_num <= length(select.options)
+	end
+	
+	result
 end
 
 # ╔═╡ d64bb805-b700-4fd6-8894-2980152ce250
@@ -403,6 +601,18 @@ Select(["a" => "✅", "b" => "🆘", "c" => "🆘"])
 # ╔═╡ 4f3ba840-28ce-4790-b929-ce6af8920189
 Select(["a" => "🆘", "b" => "✅", "c" => "🆘"]; default="b")
 
+# ╔═╡ b34d3a01-f8d6-4586-b655-5da84d586cd5
+OldSelect(["a" => "✅", "b" => "🆘", "c" => "🆘"])
+
+# ╔═╡ 609ab7f4-4fc4-4122-986d-9bfe54fa715d
+OldSelect(["a" => "🆘", "b" => "✅", "c" => "🆘"]; default="b")
+
+# ╔═╡ 6459df3f-143f-4d1a-a238-4447b11cc56c
+HTML(repr(MIME"text/html"(), Select(["a" => "✅", "b" => "🆘", "c" => "🆘"])))
+
+# ╔═╡ f3bef89c-61ac-4dcf-bf47-3824f11db26f
+@skip_as_script HTML(repr(MIME"text/html"(), Select([sin, cos])))
+
 # ╔═╡ f21db694-2acb-417d-9f4d-0d2400aa067e
 function subarrays(x)
 
@@ -417,7 +627,8 @@ end
 
 # ╔═╡ 5bacf96d-f24b-4e8b-81c7-47140f286e27
 begin
-"""A multi-selector (`<select multi>`) - the user can choose one or more of the `options`, an array of `Strings.
+local result = begin
+	"""A multi-selector (`<select multi>`) - the user can choose one or more of the `options`, an array of `Strings.
 
 See [`Select`](@ref) for a version that allows only one selected item.
 
@@ -435,6 +646,7 @@ struct MultiSelect
     options::Vector{Pair{<:AbstractString,<:Any}}
     default::Union{Missing, AbstractVector{AbstractString}}
 end
+end
 MultiSelect(options::AbstractVector{<:AbstractString}; default=missing) = MultiSelect([o => o for o in options], default)
 MultiSelect(options::AbstractVector{<:Pair{<:AbstractString,<:Any}}; default=missing) = MultiSelect(options, default)
 
@@ -452,13 +664,15 @@ end
 
 Base.get(select::MultiSelect) = ismissing(select.default) ? Any[] : select.default
 
-	AbstractPlutoDingetjes.Bonds.initial_value(select::MultiSelect) = 
+	Bonds.initial_value(select::MultiSelect) = 
 		ismissing(select.default) ? Any[] : select.default
-	AbstractPlutoDingetjes.Bonds.possible_values(select::MultiSelect) = 
+	Bonds.possible_values(select::MultiSelect) = 
 		subarrays(first.(select.options))
-	function AbstractPlutoDingetjes.Bonds.validate_value(select::MultiSelect, val)
+	function Bonds.validate_value(select::MultiSelect, val)
 		val isa Vector && val ⊆ (first(p) for p in select.options)
 	end
+
+	result
 end
 
 # ╔═╡ 4d8ea460-ff2b-4e92-966e-89e76d4806af
@@ -469,6 +683,7 @@ MultiSelect(["a" => "🆘", "b" => "✅", "c" => "🆘",  "d" => "✅", "c" => "
 
 # ╔═╡ e058076f-46fc-4435-ab45-530e27c95478
 begin
+local result = begin
 """A file upload box. The chosen file will be read by the browser, and the bytes are sent back to Julia.
 
 The optional `accept` argument can be an array of `MIME`s. The user can only select files with these MIME. If only `image/*` MIMEs are allowed, then smartphone browsers will open the camera instead of a file browser.
@@ -490,6 +705,7 @@ You can limit the allowed MIME types:
 struct FilePicker
     accept::Array{MIME,1}
 end
+end
 FilePicker() = FilePicker(MIME[])
 
 function Base.show(io::IO, m::MIME"text/html", filepicker::FilePicker)
@@ -500,15 +716,17 @@ end
 
 Base.get(select::FilePicker) = nothing
 
-	AbstractPlutoDingetjes.Bonds.initial_value(select::FilePicker) = 
+	Bonds.initial_value(select::FilePicker) = 
 		nothing
-	AbstractPlutoDingetjes.Bonds.possible_values(select::FilePicker) = 
-		AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
-	function AbstractPlutoDingetjes.Bonds.validate_value(select::FilePicker, val)
+	Bonds.possible_values(select::FilePicker) = 
+		Bonds.InfinitePossibilities()
+	function Bonds.validate_value(select::FilePicker, val)
 		val isa Nothing || (
 			val isa Dict && keys(val) == ["name", "data", "type"] && val["data"] isa Vector{UInt8} && val["name"] isa String && val["type"] isa String
 		)
-	end	
+	end
+
+	result
 end
 
 # ╔═╡ db65293b-891a-43a3-8a42-b23bf542755f
@@ -516,6 +734,7 @@ FilePicker([MIME"image/png"()])
 
 # ╔═╡ 42e9e5ab-7d34-4300-a6c0-47f5cde658d8
 begin
+	local result = begin
 """A group of radio buttons - the user can choose one of the `options`, an array of `String`s. 
 
 `options` can also be an array of pairs `key::String => value::Any`. The `key` is returned via `@bind`; the `value` is shown.
@@ -533,6 +752,7 @@ struct Radio
     options::Vector{Pair{<:AbstractString,<:Any}}
     default::Union{Nothing, AbstractString}
 end
+	end
 Radio(options::AbstractVector{<:AbstractString}; default=nothing) = Radio([o => o for o in options], default)
 Radio(options::AbstractVector{<:Pair{<:AbstractString,<:Any}}; default=nothing) = Radio(options, default)
 
@@ -591,12 +811,13 @@ end
 Base.get(radio::Radio) = radio.default
 
 	
-	AbstractPlutoDingetjes.Bonds.initial_value(select::Radio) = select.default
-	AbstractPlutoDingetjes.Bonds.possible_values(select::Radio) = 
+	Bonds.initial_value(select::Radio) = select.default
+	Bonds.possible_values(select::Radio) = 
 		first.(select.options)
-	function AbstractPlutoDingetjes.Bonds.validate_value(select::Radio, val)
+	function Bonds.validate_value(select::Radio, val)
 		val ∈ (first(p) for p in select.options)
 	end
+	result
 end
 
 # ╔═╡ 7c4303a1-19be-41a2-a6c7-90146e01401d
@@ -609,8 +830,11 @@ r1s = [];
 
 # ╔═╡ d611e6f7-c574-4f0f-a46f-48ec8cf4b5aa
 begin
-
-"""A date input (`<input type="date">`) - the user can pick a date, the date is returned as `Dates.DateTime` via `@bind`.
+	local result = begin
+Base.@kwdef struct DateField
+    default::Union{Dates.TimeType,Nothing}=nothing
+end
+@doc """A date input (`<input type="date">`) - the user can pick a date, the date is returned as `Dates.DateTime` via `@bind`.
 
 Use `default` to set the initial value.
 
@@ -620,9 +844,8 @@ See the [Mozilla docs about `<input type="date">`](https://developer.mozilla.org
 `@bind best_day_of_my_live DateField()`
 
 `@bind best_day_of_my_live DateField(default=today())`"""
-Base.@kwdef struct DateField
-    default::Union{Dates.TimeType,Nothing}=nothing
-end
+DateField
+	end
 
 function Base.show(io::IO, m::MIME"text/html", datefield::DateField)
 	show(io, m, @htl("""<input
@@ -631,17 +854,22 @@ function Base.show(io::IO, m::MIME"text/html", datefield::DateField)
 			>"""))
 end
 Base.get(datefield::DateField) = datefield.default === nothing ? nothing : Dates.DateTime(datefield.default)
-	AbstractPlutoDingetjes.Bonds.initial_value(datefield::DateField) = 
+	Bonds.initial_value(datefield::DateField) = 
 		datefield.default === nothing ? nothing : Dates.DateTime(datefield.default)
-	AbstractPlutoDingetjes.Bonds.possible_values(datefield::DateField) = 
-		AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
-	
+	Bonds.possible_values(datefield::DateField) = 
+		Bonds.InfinitePossibilities()
+
+	result
 end
 
 # ╔═╡ ea7c4d05-c516-4f07-9d48-7df9ce997939
 begin
-
-"""A time input (`<input type="time">`) - the user can pick a time, the time is returned as `String` via `@bind` (e.g. `"15:45"`). Value is `""` until a time is picked.
+local result = begin
+	Base.@kwdef struct TimeField
+    default::Union{Dates.TimeType,Nothing}=nothing
+end
+	
+@doc """A time input (`<input type="time">`) - the user can pick a time, the time is returned as `String` via `@bind` (e.g. `"15:45"`). Value is `""` until a time is picked.
 
 Use `default` to set the initial value.
 
@@ -651,8 +879,7 @@ See the [Mozilla docs about `<input type="time">`](https://developer.mozilla.org
 `@bind lunch_time TimeField()`
 
 `@bind lunch_time TimeField(default=now())`"""
-Base.@kwdef struct TimeField
-    default::Union{Dates.TimeType,Nothing}=nothing
+TimeField
 end
 
 function Base.show(io::IO, m::MIME"text/html", timefield::TimeField)
@@ -664,11 +891,12 @@ function Base.show(io::IO, m::MIME"text/html", timefield::TimeField)
 	>"))
 end
 Base.get(timefield::TimeField) = timefield.default === nothing ?  "" : Dates.format(timefield.default, "HH:MM")
-	AbstractPlutoDingetjes.Bonds.initial_value(timefield::TimeField) = 
+	Bonds.initial_value(timefield::TimeField) = 
 		timefield.default === nothing ?  "" : Dates.format(timefield.default, "HH:MM")
-	AbstractPlutoDingetjes.Bonds.possible_values(timefield::TimeField) = 
-		AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
-	
+	Bonds.possible_values(timefield::TimeField) = 
+		Bonds.InfinitePossibilities()
+
+	result
 end
 
 # ╔═╡ 4c9c1e24-235f-44f6-83f3-9f985f7fb536
@@ -676,8 +904,11 @@ end
 
 # ╔═╡ e9feb20c-3667-4ea9-9278-6b68ece1de6c
 begin
-
-"""A color input (`<input type="color">`) - the user can pick an RGB color, the color is returned as color hex `String` via `@bind`. The value is lowercase and starts with `#`.
+local result = begin
+	Base.@kwdef struct ColorStringPicker
+	    default::String="#000000"
+	end
+@doc """A color input (`<input type="color">`) - the user can pick an RGB color, the color is returned as color hex `String` via `@bind`. The value is lowercase and starts with `#`.
 
 Use `default` to set the initial value.
 
@@ -688,8 +919,7 @@ See the [Mozilla docs about `<input type="color">`](https://developer.mozilla.or
 
 `@bind color ColorStringPicker(default="#aabbcc")`
 """
-Base.@kwdef struct ColorStringPicker
-    default::String="#000000"
+ColorStringPicker
 end
 
 function Base.show(io::IO, ::MIME"text/html", colorStringPicker::ColorStringPicker)
@@ -697,26 +927,52 @@ function Base.show(io::IO, ::MIME"text/html", colorStringPicker::ColorStringPick
 end
 Base.get(colorStringPicker::ColorStringPicker) = colorStringPicker.default
 
-	AbstractPlutoDingetjes.Bonds.initial_value(c::ColorStringPicker) = 
+	Bonds.initial_value(c::ColorStringPicker) = 
 		c.default
-	AbstractPlutoDingetjes.Bonds.possible_values(c::ColorStringPicker) = 
-		AbstractPlutoDingetjes.Bonds.InfinitePossibilities()
-	function AbstractPlutoDingetjes.Bonds.validate_value(c::ColorStringPicker, val)
+	Bonds.possible_values(c::ColorStringPicker) = 
+		Bonds.InfinitePossibilities()
+	function Bonds.validate_value(c::ColorStringPicker, val)
 		val isa String && val[1] == "#"
 	end
+
+	result
 end
 
-# ╔═╡ ec870eea-36a4-48b6-95d7-f7c083e29856
+# ╔═╡ c2b473f4-b56b-4a91-8377-6c86da895cbe
+@bind f Slider([sin, cos, sqrt, "asdf"]; default=sqrt)
+
+# ╔═╡ 5caa34e8-e501-4248-be65-ef9c6303d025
+f
+
+# ╔═╡ 46a90b45-8fef-493e-9bd1-a71d1f9c53f6
+f(123)
+
+# ╔═╡ 328e9651-0ad1-46ce-904c-afd7deaacf94
 bs = @bind s1 Slider(1:10)
 
-# ╔═╡ b44f1128-32a5-4d1d-a00b-446143074056
+# ╔═╡ 38d32393-49be-469c-840b-b58c7339a276
 bs
 
+# ╔═╡ 75b008b2-afc0-4bd5-9183-e0e0d392a4c5
+@bind s2 Slider(30:.5:40; default=38, show_value=true)
+
+# ╔═╡ 9df251eb-b4f5-46cc-a4fe-ff2fa670b773
+@bind s3 Slider([sin, cos, tan], default=cos, show_value=true)
+
+# ╔═╡ 7c5765ae-c10a-4677-97a3-848a423cb8b9
+s1, s2, s3
+
+# ╔═╡ ec870eea-36a4-48b6-95d7-f7c083e29856
+bos = @bind os1 OldSlider(1:10)
+
+# ╔═╡ b44f1128-32a5-4d1d-a00b-446143074056
+bos
+
 # ╔═╡ f6cd1201-da84-4dee-9e88-b65fa1ff749e
-@bind s2 Slider(0:.1:1, default=.5, show_value=true)
+@bind os2 OldSlider(0:.1:1, default=.5, show_value=true)
 
 # ╔═╡ 05f6a603-b738-47b1-b335-acaaf480a240
-s1, s2
+os1, os2, os3
 
 # ╔═╡ c6d68308-53e7-4c60-8649-8f0161f28d70
 @bind b1 Button(teststr)
@@ -781,8 +1037,26 @@ bse = @bind se1 Select(["a" => "default", teststr => teststr])
 # ╔═╡ a58e383a-3837-4b4c-aa84-cf64436cd870
 bse
 
+# ╔═╡ c9a291c5-b5f5-40a6-acb3-eff4882c1516
+@bind se2 Select(["a" => "✅", "b" => "🆘", "c" => "🆘"])
+
+# ╔═╡ 9729fa52-7cff-4905-9d1c-1d0eefc8ad6e
+@bind se3 Select([cos => "cosine", sin => "sine"])
+
+# ╔═╡ d08b571c-fe08-4911-b9f3-5a1075be50ea
+@bind se4 Select([[1,Ref(2)], sqrt, cos])
+
 # ╔═╡ 7f05f0b5-051e-4c75-b484-944daf8a274d
-se1
+se1, se2, se3, se3(123), se4
+
+# ╔═╡ 294263fe-0986-4be1-bff5-cd9f7d261c09
+bose = @bind ose1 Select(["a" => "default", teststr => teststr])
+
+# ╔═╡ 59457dc9-edaf-40c2-8503-0c3759d85ba7
+bose
+
+# ╔═╡ a238ec69-d38b-464a-9b36-959531574d19
+ose1
 
 # ╔═╡ 78473a2f-0a64-4aa5-a60a-94031a4167b8
 bms = @bind ms1 MultiSelect(["a" => "default", teststr => teststr])
@@ -888,27 +1162,39 @@ export Slider, NumberField, Button, LabelButton, CounterButton, CheckBox, TextFi
 # ╠═ac542b84-dbc8-47e2-8835-9e43582b6ad7
 # ╠═6da84fb9-a629-4e4c-819e-dd87a3e267ce
 # ╠═dc3b6628-f453-46d9-b6a1-957608a20764
+# ╠═a203d9d4-cd7b-4368-9f6d-e040a5757565
 # ╠═98d251ff-67e7-4b16-b2e0-3e2102918ca2
-# ╠═d088bcdb-d851-4ad7-b5a0-751c1f348995
+# ╟─96084236-68f1-49b4-b866-027e7c80b5d8
+# ╠═c2b473f4-b56b-4a91-8377-6c86da895cbe
+# ╠═5caa34e8-e501-4248-be65-ef9c6303d025
+# ╠═46a90b45-8fef-493e-9bd1-a71d1f9c53f6
+# ╠═328e9651-0ad1-46ce-904c-afd7deaacf94
+# ╠═38d32393-49be-469c-840b-b58c7339a276
+# ╠═75b008b2-afc0-4bd5-9183-e0e0d392a4c5
+# ╠═9df251eb-b4f5-46cc-a4fe-ff2fa670b773
+# ╠═7c5765ae-c10a-4677-97a3-848a423cb8b9
+# ╟─d088bcdb-d851-4ad7-b5a0-751c1f348995
 # ╠═ec870eea-36a4-48b6-95d7-f7c083e29856
 # ╠═b44f1128-32a5-4d1d-a00b-446143074056
 # ╠═f6cd1201-da84-4dee-9e88-b65fa1ff749e
+# ╠═e440a357-1656-4cc4-8191-146fe82fbc8c
+# ╠═629e5d68-580f-4d6b-be14-5a109091e6b7
 # ╠═05f6a603-b738-47b1-b335-acaaf480a240
-# ╠═f59eef32-4732-46db-87b0-3564433ce43e
-# ╠═b7c21c22-17f5-44b8-98de-a261d5c7192b
+# ╟─f59eef32-4732-46db-87b0-3564433ce43e
+# ╟─b7c21c22-17f5-44b8-98de-a261d5c7192b
 # ╠═7f8e4abf-e7e7-47bc-b1cc-514fa1af106c
 # ╠═c6d68308-53e7-4c60-8649-8f0161f28d70
 # ╠═c111da12-d0ca-4b9b-8ede-20f4303a1c4b
 # ╠═3ae2351b-ac4a-4669-bb11-39a1c029b301
-# ╠═548bda96-2461-48a3-a3ad-6d113337826e
+# ╟─548bda96-2461-48a3-a3ad-6d113337826e
 # ╠═6135dca4-86f9-4675-8a45-fa16b3d2c3eb
 # ╠═cd08b524-d778-4acd-9fac-851d90df7179
-# ╠═76c3b77b-08aa-4899-bbdd-4f8faa8d1486
+# ╟─76c3b77b-08aa-4899-bbdd-4f8faa8d1486
 # ╠═6cb75589-5496-4edd-9b21-ea49d5c0e733
 # ╠═bcee47b1-0f45-4649-8517-0e93fa92bfe5
 # ╠═73656df8-ac9f-466d-a8d0-0a2e5dbdbd8c
 # ╠═e89ee9a3-5c78-4ff8-81e9-f44f5150d5f6
-# ╠═f81bb386-203b-4392-b974-a1e2146b1a08
+# ╟─f81bb386-203b-4392-b974-a1e2146b1a08
 # ╠═1e522148-542a-4a2f-ad92-12421a6530dc
 # ╠═1ac4abe2-5f06-42c6-b614-fb9a00e65386
 # ╠═1d81db28-103b-4bde-9a9a-f3038ee9b10b
@@ -916,45 +1202,57 @@ export Slider, NumberField, Button, LabelButton, CounterButton, CheckBox, TextFi
 # ╠═be68f41c-0730-461c-8782-7e8d7a745509
 # ╠═4363f31e-1d71-4ad8-bfe8-04403d2d3621
 # ╠═00145a3e-cb62-4c54-807b-8d2bce6a9fc9
-# ╠═c9614498-54a8-4925-9353-7a13d3303916
+# ╟─c9614498-54a8-4925-9353-7a13d3303916
 # ╠═970681ed-1c3a-4327-b636-8cb0cdd90dbb
 # ╠═e6032ca6-03a5-4bda-95d2-dcd9ee6b5924
 # ╠═d4bf5249-6027-43c5-bd20-48ad95721e27
 # ╠═d8c60294-0ca6-4cb0-b51d-9f6d6b370b28
 # ╠═fbc6e4c1-4bd8-43a2-ac82-e6f76033fd8e
-# ╠═eb4e17fd-07ba-4031-a39f-0d9fccd3d886
+# ╟─eb4e17fd-07ba-4031-a39f-0d9fccd3d886
+# ╠═519f4da9-0205-486e-aea6-9dd5db6b38e0
 # ╠═57a7d0c9-2f4a-44e6-9b7a-0bbd98611c9d
+# ╠═c9a291c5-b5f5-40a6-acb3-eff4882c1516
+# ╠═9729fa52-7cff-4905-9d1c-1d0eefc8ad6e
+# ╠═d08b571c-fe08-4911-b9f3-5a1075be50ea
 # ╠═a58e383a-3837-4b4c-aa84-cf64436cd870
 # ╠═7f05f0b5-051e-4c75-b484-944daf8a274d
 # ╠═d64bb805-b700-4fd6-8894-2980152ce250
 # ╠═4f3ba840-28ce-4790-b929-ce6af8920189
-# ╠═5bacf96d-f24b-4e8b-81c7-47140f286e27
+# ╟─edfdbaee-ec31-40c2-9ad5-28250fe6b651
+# ╠═294263fe-0986-4be1-bff5-cd9f7d261c09
+# ╠═59457dc9-edaf-40c2-8503-0c3759d85ba7
+# ╠═a238ec69-d38b-464a-9b36-959531574d19
+# ╠═b34d3a01-f8d6-4586-b655-5da84d586cd5
+# ╠═609ab7f4-4fc4-4122-986d-9bfe54fa715d
+# ╠═6459df3f-143f-4d1a-a238-4447b11cc56c
+# ╠═f3bef89c-61ac-4dcf-bf47-3824f11db26f
+# ╠═42e9e5ab-7d34-4300-a6c0-47f5cde658d8
+# ╠═57232d88-b74f-4823-be61-8db450c93f5c
+# ╟─7c4303a1-19be-41a2-a6c7-90146e01401d
+# ╠═a95684ea-4612-45d6-b63f-41c051b53ed8
+# ╠═a5612030-0781-4cf1-b8f0-409bd3886154
+# ╠═c2b3a7a4-8c9e-49cc-b5d0-85ad1c08fd72
+# ╠═69a94f6a-420a-4587-bbad-1219a390862d
+# ╠═d9522557-07e6-4a51-ae92-3abe7a7d2732
+# ╟─5bacf96d-f24b-4e8b-81c7-47140f286e27
 # ╟─f21db694-2acb-417d-9f4d-0d2400aa067e
 # ╠═4d8ea460-ff2b-4e92-966e-89e76d4806af
 # ╠═78473a2f-0a64-4aa5-a60a-94031a4167b8
 # ╠═43f86637-9f0b-480c-826a-bbf583e44646
 # ╠═b6697df5-fd21-4553-9e90-1d33c0b51f70
 # ╠═998a3bd7-2d09-4b3f-8a41-50736b666dea
-# ╠═e058076f-46fc-4435-ab45-530e27c95478
+# ╟─e058076f-46fc-4435-ab45-530e27c95478
 # ╠═a03af14a-e030-4ac1-b61a-0275c9956454
 # ╠═d4a0e98d-666c-4588-8499-f253a309a403
 # ╠═5ed47c49-9a31-4948-8473-0311b54eb146
 # ╠═db65293b-891a-43a3-8a42-b23bf542755f
-# ╠═42e9e5ab-7d34-4300-a6c0-47f5cde658d8
-# ╠═57232d88-b74f-4823-be61-8db450c93f5c
-# ╟─7c4303a1-19be-41a2-a6c7-90146e01401d
-# ╠═a95684ea-4612-45d6-b63f-41c051b53ed8
-# ╠═a5612030-0781-4cf1-b8f0-409bd3886154
-# ╠═c2b3a7a4-8c9e-49cc-b5d0-85ad1c08fd72
-# ╠═69a94f6a-420a-4587-bbad-1219a390862d
-# ╠═d9522557-07e6-4a51-ae92-3abe7a7d2732
-# ╠═d611e6f7-c574-4f0f-a46f-48ec8cf4b5aa
+# ╟─d611e6f7-c574-4f0f-a46f-48ec8cf4b5aa
 # ╠═a1666896-baf6-466c-b680-5f3e3dffff68
 # ╠═b9300522-1b92-459c-87e2-20589d36dbb5
 # ╠═65bdad5e-a51b-4009-8b8e-ce93286ee5e4
 # ╠═4f1a909d-d21a-4e60-a615-8146ba249794
 # ╠═d52cc4d9-cdb0-46b6-a59f-5eeaa1990f20
-# ╠═ea7c4d05-c516-4f07-9d48-7df9ce997939
+# ╟─ea7c4d05-c516-4f07-9d48-7df9ce997939
 # ╠═3aefce73-f133-43e0-8680-5c17b7f90979
 # ╠═d128f5ac-7304-486c-8258-f05f4bd18632
 # ╠═9258586a-2612-48db-be31-cf74220002d4
@@ -962,10 +1260,10 @@ export Slider, NumberField, Button, LabelButton, CounterButton, CheckBox, TextFi
 # ╠═7a377816-30ed-4f9f-b03f-08da4548e55f
 # ╠═a51dc258-1e80-4cd4-9337-b9f685db244c
 # ╠═3171441c-a98b-4a5a-aedd-09ad3b445b9e
-# ╠═e9feb20c-3667-4ea9-9278-6b68ece1de6c
+# ╟─e9feb20c-3667-4ea9-9278-6b68ece1de6c
 # ╠═b123275c-48fd-4e4a-8461-4875f7c18293
 # ╠═883673fb-b8d0-49fb-ab8c-32e972894ec2
 # ╠═78463563-4d1f-49f0-875f-8a30cf445a2d
 # ╠═1d95c38d-d336-436d-a62e-0a3786c321ca
 # ╠═724125f3-7699-4103-a5d8-bc6a00fab0ff
-# ╠═9ade9240-1fea-4cb7-a571-a98b13cc29b2
+# ╟─9ade9240-1fea-4cb7-a571-a98b13cc29b2

From e237dba66e99dbb5ccaaa1d5acf6e45d5b57b358 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Wed, 3 Nov 2021 00:50:59 +0100
Subject: [PATCH 4/7] fix tests?

---
 src/Builtins.jl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Builtins.jl b/src/Builtins.jl
index 081f8102..a55a55aa 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -1041,7 +1041,7 @@ bse
 @bind se2 Select(["a" => "✅", "b" => "🆘", "c" => "🆘"])
 
 # ╔═╡ 9729fa52-7cff-4905-9d1c-1d0eefc8ad6e
-@bind se3 Select([cos => "cosine", sin => "sine"])
+@bind se3 Select([cos => "cosine", sin => "sine"]; default=sin)
 
 # ╔═╡ d08b571c-fe08-4911-b9f3-5a1075be50ea
 @bind se4 Select([[1,Ref(2)], sqrt, cos])

From b0cf7a84e46b9286475cf0b86b7221ac135995ff Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Wed, 3 Nov 2021 01:08:47 +0100
Subject: [PATCH 5/7] Correct validation functions

---
 src/Builtins.jl | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Builtins.jl b/src/Builtins.jl
index a55a55aa..205ca721 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -108,7 +108,7 @@ begin
 	Bonds.initial_value(slider::OldSlider) = slider.default
 	Bonds.possible_values(slider::OldSlider) = slider.range
 	function Bonds.validate_value(slider::OldSlider, val)
-		val isa Real && (minimum(slider) - 0.0001 <= val <= maximum(slider) + 0.0001)
+		val isa Real && (minimum(slider.range) - 0.0001 <= val <= maximum(slider.range) + 0.0001)
 	end
 
 	result
@@ -228,7 +228,7 @@ begin
 	Bonds.initial_value(nf::NumberField) = nf.default
 	Bonds.possible_values(nf::NumberField) = nf.range
 	function Bonds.validate_value(nf::NumberField, val)
-		val isa Real && (minimum(nf) - 0.0001 <= val <= maximum(nf) + 0.0001)
+		val isa Real && (minimum(nf.range) - 0.0001 <= val <= maximum(nf.range) + 0.0001)
 	end
 
 	result
@@ -424,7 +424,7 @@ begin
 	Bonds.initial_value(t::TextField) = t.default
 	Bonds.possible_values(t::TextField) = Bonds.InfinitePossibilities()
 	function Bonds.validate_value(t::TextField, val)
-		t isa AbstractString
+		val isa AbstractString
 	end
 
 	result
@@ -462,7 +462,7 @@ begin
 	Bonds.initial_value(t::PasswordField) = t.default
 	Bonds.possible_values(t::PasswordField) = Bonds.InfinitePossibilities()
 	function Bonds.validate_value(t::PasswordField, val)
-		t isa AbstractString
+		val isa AbstractString
 	end
 
 	result

From f65feb7fe1c6f4b30cb2fe93023fc36a6acd4d30 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Wed, 3 Nov 2021 01:26:01 +0100
Subject: [PATCH 6/7] Use HypertextLiteral for MultiCheckBox

---
 src/MultiCheckBox.jl | 55 ++++++++++++++++++++------------------------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/MultiCheckBox.jl b/src/MultiCheckBox.jl
index f9f7efe7..70a5dfc3 100644
--- a/src/MultiCheckBox.jl
+++ b/src/MultiCheckBox.jl
@@ -7,14 +7,15 @@ using InteractiveUtils
 # This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
 macro bind(def, element)
     quote
+        local iv = try Base.loaded_modules[Base.PkgId(Base.UUID("6e696c72-6542-2067-7265-42206c756150"), "AbstractPlutoDingetjes")].Bonds.initial_value catch; b -> missing; end
         local el = $(esc(element))
-        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : missing
+        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : iv(el)
         el
     end
 end
 
-# ╔═╡ 34012b14-d597-4b9d-b23d-66b638e4c282
-using JSON: escape_string
+# ╔═╡ b65c67ec-b79f-4f0e-85e6-78ff22b279d4
+using HypertextLiteral
 
 # ╔═╡ a8c1e0d2-3604-4e1d-a87c-c8f5b86b79ed
 md"""
@@ -43,18 +44,13 @@ if skip_as_script(@__MODULE__)
 end
 
 # ╔═╡ 631c14bf-e2d3-4a24-8ddc-095a3dab80ef
-import AbstractPlutoDingetjes
+import AbstractPlutoDingetjes.Bonds
 
-# ╔═╡ 144bff17-30eb-458a-8e94-33e1f11edbeb
-"Convert a Julia array to a JS array in string form."
-function jsarray_string(a::AbstractVector{T}) where {T <: AbstractString}
-	string("[\"", join(map(escape_string, a), "\",\""), "\"]")
-end
-
-# ╔═╡ 91a08b98-52b5-4a2a-8180-7cba6d7232cd
-function jsarray_string(a::AbstractVector{T}) where {T}
-	string("[", join(a, ","), "]")
-end
+# ╔═╡ c38de38d-e900-4309-a9f6-1392af2f245b
+subarrays(x) = (
+	x[collect(I)]
+	for I in Iterators.product(Iterators.repeated([true,false],length(x))...) |> collect |> vec
+)
 
 # ╔═╡ 430e2c1a-832f-11eb-024a-13e3989fd7c2
 begin
@@ -89,7 +85,7 @@ end
 MultiCheckBox(options::Array{<:AbstractString,1}; default=String[], orientation=:row, select_all=false) = MultiCheckBox([o => o for o in options], default, orientation, select_all)
 MultiCheckBox(options::Array{<:Pair{<:AbstractString,<:Any},1}; default=String[], orientation=:row, select_all=false) = MultiCheckBox(options, default, orientation, select_all)
 
-function Base.show(io::IO, ::MIME"text/html", multicheckbox::MultiCheckBox)
+function Base.show(io::IO, m::MIME"text/html", multicheckbox::MultiCheckBox)
     if multicheckbox.orientation == :column 
         flex_direction = "column"
     elseif multicheckbox.orientation == :row
@@ -110,29 +106,29 @@ function Base.show(io::IO, ::MIME"text/html", multicheckbox::MultiCheckBox)
         push!(default_checked, k in multicheckbox.default)
     end
 
-    print(io, """
-    <multi-checkbox class="multicheckbox-container" style="flex-direction:$(flex_direction);"></multi-checkbox>
+    show(io, m, @htl("""
+    <multi-checkbox class="multicheckbox-container" style="flex-direction: $(flex_direction);"></multi-checkbox>
     <script type="text/javascript">
-        const labels = $(jsarray_string(labels));
-        const values = $(jsarray_string(vals));
-        const checked = $(jsarray_string(default_checked));
-        const defaults = $(jsarray_string(multicheckbox.default));
+        const labels = $(labels);
+        const values = $(vals);
+        const checked = $(default_checked);
+        const defaults = $(multicheckbox.default);
         const includeSelectAll = $(multicheckbox.select_all);
-        $(js)
+        $(HypertextLiteral.JavaScript(js))
     </script>
     <style type="text/css">
         $(css)
     </style>
-    """)
+    """))
 end
 
 Base.get(select::MultiCheckBox) = ismissing(select.default) ? Any[] : select.default
 
-	AbstractPlutoDingetjes.Bonds.initial_value(select::MultiCheckBox) = 
+	Bonds.initial_value(select::MultiCheckBox) = 
 		ismissing(select.default) ? Any[] : select.default
-	AbstractPlutoDingetjes.Bonds.possible_values(select::MultiCheckBox) = 
+	Bonds.possible_values(select::MultiCheckBox) = 
 		subarrays(first.(select.options))
-	function AbstractPlutoDingetjes.Bonds.validate_value(select::MultiCheckBox, val)
+	function Bonds.validate_value(select::MultiCheckBox, val)
 		val isa Vector && val ⊆ (first(p) for p in select.options)
 	end
 end
@@ -144,7 +140,7 @@ end
 animals
 
 # ╔═╡ a8a7e90d-8bbf-4ab6-90a8-24a10885fb0a
-@bind animals2 MultiCheckBox(["🐰", "🐱" , "🐵", "🐘", "🦝", "🐿️" , "🐝",  "🐪"]; orientation=:column, default=["🐿️" , "🐝"])
+@bind animals2 MultiCheckBox(["\"🐰\\\"", "🐱" , "🐵", "🐘", "🦝", "🐿️" , "🐝",  "🐪"]; orientation=:column, default=["🐿️" , "🐝"])
 
 # ╔═╡ 6123cf6d-fc29-4a8f-a5a1-4366cc6457b6
 animals2
@@ -163,7 +159,6 @@ MultiCheckBox(["🐰 &&\\a \$\$", "🐱" , "🐵", "🐘", "🦝", "🐿️" , "
 # ╟─79c4dc76-efa2-4b7f-99ea-243e3a17f81c
 # ╟─499ca710-1a50-4aa1-87d8-d213416e8e30
 # ╠═631c14bf-e2d3-4a24-8ddc-095a3dab80ef
+# ╠═b65c67ec-b79f-4f0e-85e6-78ff22b279d4
 # ╠═430e2c1a-832f-11eb-024a-13e3989fd7c2
-# ╠═34012b14-d597-4b9d-b23d-66b638e4c282
-# ╠═144bff17-30eb-458a-8e94-33e1f11edbeb
-# ╠═91a08b98-52b5-4a2a-8180-7cba6d7232cd
+# ╠═c38de38d-e900-4309-a9f6-1392af2f245b

From 8628ab1bf4a40323ab1c88383cba2563a7a3215b Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Wed, 3 Nov 2021 01:27:38 +0100
Subject: [PATCH 7/7] final tweaks

---
 Project.toml    |  2 +-
 src/Builtins.jl | 16 +++++-----------
 src/Clock.jl    | 11 +++++------
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/Project.toml b/Project.toml
index 21b8a23d..cbf47429 100644
--- a/Project.toml
+++ b/Project.toml
@@ -21,7 +21,7 @@ UUIDs = "cf7118a7-6976-5b1a-9a39-7adc72f591a4"
 [compat]
 AbstractPlutoDingetjes = "1.1"
 Hyperscript = "0.0.4"
-HypertextLiteral = "0.8, 0.9"
+HypertextLiteral = "0.9"
 IOCapture = "0.2"
 JSON = "^0.21.1"
 Reexport = "^1"
diff --git a/src/Builtins.jl b/src/Builtins.jl
index 205ca721..e3e43865 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -614,16 +614,10 @@ HTML(repr(MIME"text/html"(), Select(["a" => "✅", "b" => "🆘", "c" => "🆘"]
 @skip_as_script HTML(repr(MIME"text/html"(), Select([sin, cos])))
 
 # ╔═╡ f21db694-2acb-417d-9f4d-0d2400aa067e
-function subarrays(x)
-
-	
-	[
-		x[collect(I)]
-		for I in Iterators.product(Iterators.repeated([true,false],length(x))...) |> collect |> vec
-	]
-
-	
-end
+subarrays(x) = (
+	x[collect(I)]
+	for I in Iterators.product(Iterators.repeated([true,false],length(x))...) |> collect |> vec
+)
 
 # ╔═╡ 5bacf96d-f24b-4e8b-81c7-47140f286e27
 begin
@@ -676,7 +670,7 @@ Base.get(select::MultiSelect) = ismissing(select.default) ? Any[] : select.defau
 end
 
 # ╔═╡ 4d8ea460-ff2b-4e92-966e-89e76d4806af
-subarrays([2,3,3])
+subarrays([2,3,3]) |> collect
 
 # ╔═╡ 998a3bd7-2d09-4b3f-8a41-50736b666dea
 MultiSelect(["a" => "🆘", "b" => "✅", "c" => "🆘",  "d" => "✅", "c" => "🆘2", "c3" => "🆘"]; default=["b","d"])
diff --git a/src/Clock.jl b/src/Clock.jl
index cf5b6537..b4bc8e57 100644
--- a/src/Clock.jl
+++ b/src/Clock.jl
@@ -33,7 +33,7 @@ if skip_as_script(@__MODULE__)
 end
 
 # ╔═╡ fed9022f-1e8e-4f47-92d8-f99065023d29
-import AbstractPlutoDingetjes
+import AbstractPlutoDingetjes.Bonds
 
 # ╔═╡ 05804305-cb1f-4c97-8937-f56289222bd7
 md"""
@@ -91,13 +91,12 @@ begin
 	end
 	
 	Base.get(clock::Clock) = 1
-	AbstractPlutoDingetjes.Bonds.initial_value(c::Clock) = 
-		c.default
-	AbstractPlutoDingetjes.Bonds.possible_values(c::Clock) = 
+	Bonds.initial_value(c::Clock) = 1
+	Bonds.possible_values(c::Clock) = 
 		c.max_value === nothing ? 
-			AbstractPlutoDingetjes.Bonds.InfinitePossibilities() :
+			Bonds.InfinitePossibilities() :
 			1:c.max_value
-	function AbstractPlutoDingetjes.Bonds.validate_value(c::Clock, val)
+	function Bonds.validate_value(c::Clock, val)
 		val isa Integer && 1 <= val && (c.max_value === nothing || val <= c.max_value)
 	end
 end