From c00504764d12ac16099c3946f053f100bb6a6957 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pere=20Gime=CC=81nez?= <gimenezfebrer@gmail.com>
Date: Thu, 23 Mar 2023 11:49:06 +0100
Subject: [PATCH 001/265] docstrings

---
 src/ReactiveTools.jl | 211 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 210 insertions(+), 1 deletion(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 39840dfd..0902988c 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -173,6 +173,13 @@ end
 
 #===#
 
+"""
+```julia
+@clear
+```
+
+Deletes all reactive variables and code in a model.
+"""
 macro clear()
   delete_bindings!(__module__)
   delete_handlers!(__module__)
@@ -191,10 +198,24 @@ macro clear(args...)
   REACTIVE_STORAGE[__module__]
 end
 
+"""
+```julia
+@clear_vars
+```
+
+Deletes all reactive variables in a model.
+"""
 macro clear_vars()
   delete_bindings!(__module__)
 end
 
+"""
+```julia
+@clear_handlers
+```
+
+Deletes all reactive code handlers in a model.
+"""
 macro clear_handlers()
   delete_handlers!(__module__)
 end
@@ -246,6 +267,29 @@ macro model()
   end)
 end
 
+"""
+```julia
+@app(expr)
+```
+
+Sets up and enables the reactive variables and code provided in the expression `expr`.
+
+**Usage**
+
+The code block passed to @app implements the app's logic, handling the states of the UI components and the code that is executed when these states are altered.
+
+```julia
+@app begin
+   # reactive variables
+   @in N = 0
+   @out result = 0
+   # reactive code to be executed when N changes
+   @onchange N begin
+     result = 10*N
+   end
+end
+```
+"""
 macro app(expr)
   delete_bindings!(__module__)
   delete_handlers!(__module__)
@@ -326,6 +370,56 @@ end
 # @in a::Vector = [1, 2, 3]
 # @in a::Vector{Int} = [1, 2, 3]
 
+# the @in, @out and @private macros below are defined so a docstring can be attached
+# the actual macro definition is done in the for loop further down
+"""
+```julia
+@in(expr)
+```
+
+Declares a reactive variable that is public and can be written to from the UI.
+
+**Usage**
+```julia
+@app begin
+    @in N = 0
+end
+```
+"""
+macro in end
+
+"""
+```julia
+@out(expr)
+```
+
+Declares a reactive variable that is public and readonly.
+
+**Usage**
+```julia
+@app begin
+    @out N = 0
+end
+```
+"""
+macro out end
+
+"""
+```julia
+@private(expr)
+```
+
+Declares a non-reactive variable that cannot be accessed by UI code.
+
+**Usage**
+```julia
+@app begin
+    @private N = 0
+end
+```
+"""
+macro private end
+
 for (fn, mode) in [(:in, :PUBLIC), (:out, :READONLY), (:jsnfn, :JSFUNCTION), (:private, :PRIVATE)]
   fn! = Symbol(fn, "!")
   Core.eval(@__MODULE__, quote
@@ -654,6 +748,30 @@ function get_known_vars(::Type{M}) where M<:ReactiveModel
   reactive_vars, non_reactive_vars
 end
 
+"""
+```julia
+@onchange(var, expr)
+```
+Declares a reactive update such that when a reactive variable changes `expr` is executed.
+
+**Usage**
+
+This macro watches a list of variables and defines a code block that is executed when the variables change.
+
+```julia
+@app begin
+    # reactive variables taking their value from the UI
+    @in N = 0
+    @in M = 0
+    @out result = 0
+    # reactive code to be executed when N changes
+    @onchange N M begin
+        result = 10*N*M
+    end
+end
+```
+
+"""
 macro onchange(var, expr)
   quote
     @onchange $__module__ $var $expr
@@ -707,6 +825,30 @@ macro onchangeany(var, expr)
   end |> esc
 end
 
+"""
+```julia
+@onbutton
+```
+Declares a reactive update that executes `expr` when a button is pressed in the UI.
+
+**Usage**
+Define a click event listener with `@click`, and the handler with `@onbutton`.
+
+```julia
+@app begin
+    @in press = false
+    @onbutton press begin
+        println("Button presed!")
+    end
+end
+
+ui() = btn("Press me", @click(:press))
+
+@page("/", ui)
+```
+
+
+"""
 macro onbutton(var, expr)
   quote
     @onbutton $__module__ $var $expr
@@ -762,6 +904,18 @@ macro page(url, view, layout)
   :(@page($url, $view, $layout, () -> @eval($__module__, @init()))) |> esc
 end
 
+"""
+```julia
+@page(url, view)
+```
+Registers a new page with source in `view` to be rendered at the route `url`.
+
+**Usage**
+
+```julia
+@page("/", "view.html")
+```
+"""
 macro page(url, view)
   :(@page($url, $view, Stipple.ReactiveTools.DEFAULT_LAYOUT())) |> esc
 end
@@ -860,6 +1014,61 @@ macro event(M, eventname, expr)
   end |> esc
 end
 
+"""
+```julia
+@event(event, expr)
+```
+Executes the code in `expr` when a specific `event` is triggered by a UI component.
+
+**Usage**
+
+Define an event trigger such as a click, keypress or file upload for a component using the @on macro. Then, define the handler for the event with @event.
+
+
+**Examples**
+
+Keypress:
+
+
+```julia
+@app begin
+    @event :keypress begin
+        println("The Enter key has been pressed")
+    end
+end
+
+ui() =  textfield(class = "q-my-md", "Input", :input, hint = "Please enter some words", @on("keyup.enter", :keypress))
+
+@page("/", ui)
+```
+
+=======
+```julia
+<q-input hint="Please enter some words" v-on:keyup.enter="function(event) { handle_event(event, 'keypress') }" label="Input" v-model="input" class="q-my-md"></q-input>
+```
+File upload:
+
+```julia
+@app begin
+    @event :uploaded begin
+        println("Files have been uploaded!")
+    end
+end
+
+ui() = uploader("Upload files", url = "/upload" , method="POST", @on(:uploaded, :uploaded), autoupload=true)
+
+route("/upload", method=POST) do
+    # process uploaded files
+end
+
+@page("/", ui)
+```
+
+```julia
+julia> print(ui())
+<q-uploader url="/upload" method="POST" auto-upload v-on:uploaded="function(event) { handle_event(event, 'uploaded') }">Upload files</q-uploader>
+```
+"""
 macro event(event, expr)
   quote
     @event Stipple.@type() $event $expr
@@ -931,4 +1140,4 @@ macro notify(args...)
   end |> esc
 end
 
-end
\ No newline at end of file
+end

From f9df57171edf555129ce54d29a5294f583032b88 Mon Sep 17 00:00:00 2001
From: PGimenez <gimenezfebrer@gmail.com>
Date: Tue, 18 Apr 2023 19:53:07 +0200
Subject: [PATCH 002/265] meta tags for default layout (#192)

---
 src/ReactiveTools.jl | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 39840dfd..bdf70d7c 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -30,12 +30,14 @@ const REACTIVE_STORAGE = LittleDict{Module,LittleDict{Symbol,Expr}}()
 const HANDLERS = LittleDict{Module,Vector{Expr}}()
 const TYPES = LittleDict{Module,Union{<:DataType,Nothing}}()
 
-function DEFAULT_LAYOUT(; title::String = "Genie App")
+function DEFAULT_LAYOUT(; title::String = "Genie App", meta::Dict{<:AbstractString,<:AbstractString} = Dict("og:title" => "Genie App"))
+  tags = Genie.Renderers.Html.for_each(x -> """<meta name="$(x.first)" content="$(x.second)">\n    """, meta)
   """
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
+    $tags
     <% Stipple.sesstoken() %>
     <title>$title</title>
     <% if isfile(joinpath(Genie.config.server_document_root, "css", "genieapp.css")) %>
@@ -931,4 +933,4 @@ macro notify(args...)
   end |> esc
 end
 
-end
\ No newline at end of file
+end

From 8d4a8eadf64c13fa9bc7ec284139f16963c6f03f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 25 Apr 2023 23:31:20 +0200
Subject: [PATCH 003/265] new parsers for filling Arrays, e.g. Vector to Matrix

---
 src/stipple/parsers.jl | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/stipple/parsers.jl b/src/stipple/parsers.jl
index ee71f309..e7bd5792 100644
--- a/src/stipple/parsers.jl
+++ b/src/stipple/parsers.jl
@@ -13,12 +13,19 @@ function stipple_parse(::Type{T1}, value::T2) where {T1 <: Integer, T2 <: Number
   round(T1, value)
 end
 
-function stipple_parse(::Type{T1}, value::T2) where {T1 <: AbstractArray, T2 <: AbstractArray}
+# AbstractArray's of same dimension
+function stipple_parse(::Type{T1}, value::T2) where {N, T1 <: AbstractArray{<:Any, N}, T2 <: AbstractArray{<:Any, N}}
   T1(stipple_parse.(eltype(T1), value))
 end
 
-function stipple_parse(::Type{T}, value) where T <: AbstractArray
-  convert(T, eltype(T)[value])
+# atomic value to Array
+function stipple_parse(::Type{T}, value) where {N, T <: AbstractArray{<:Any, N}}
+  convert(T, Array{eltype(T), N}(reshape([value], fill(1, N)...)))
+end
+
+# Vector to Matrix, in particular Vector of Vectors to Matrix
+function stipple_parse(::Type{T1}, value::T2) where {T1 <: AbstractArray{<:Any, 2}, T2 <: AbstractArray{<:Any, 1}}
+  reduce(hcat, stipple_parse.(Vector{eltype(T1)}, value))
 end
 
 function stipple_parse(::Type{T}, value) where T <: AbstractRange
@@ -29,18 +36,21 @@ function stipple_parse(::Type{T}, v::T) where {T}
   v::T
 end
 
+# String to Symbol
 function stipple_parse(::Type{Symbol}, s::String)
   Symbol(s)
 end
-
+# untyped Dicts to typed Dict's
 function stipple_parse(::Type{<:AbstractDict{K, V}}, value::AbstractDict{String, <:Any}) where {K, V}
   Dict( zip(Vector{K}(stipple_parse(Vector{K}, collect(keys(value)))), stipple_parse(Vector{V}, collect(values(value)))) )
 end
 
-function stipple_parse(::Type{Integer}, value::String)
-  stipple_parse(Int, value)
+# String to Integer
+function stipple_parse(::Type{T}, value::String) where T <: Integer
+  Base.parse(T, value)
 end
 
-function stipple_parse(::Type{AbstractFloat}, value::String)
-  stipple_parse(Float64, value)
+#String to AbstractFloat
+function stipple_parse(::Type{T}, value::String) where T<:AbstractFloat
+  Base.parse(T, value)
 end
\ No newline at end of file

From b058d532fd4808f9e63abebf22b9e9d4196a5a5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 28 Apr 2023 15:07:57 +0200
Subject: [PATCH 004/265] remove fieldname from Stipple.render() where possible

---
 src/stipple/rendering.jl | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 66ef622a..231d47d0 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -67,7 +67,11 @@ end
 
 Default rendering of value types. Specialize `Stipple.render` to define custom rendering for your types.
 """
-function Stipple.render(val::T, fieldname::Union{Symbol,Nothing} = nothing) where {T}
+function Stipple.render(val::T, fieldname::Union{Symbol,Nothing}) where {T}
+  Stipple.render(val)
+end
+
+function Stipple.render(val::T) where {T}
   val
 end
 

From e604372fbec754385fab41be773aec9c21310dcb Mon Sep 17 00:00:00 2001
From: abhimanyuaryan <8083613+AbhimanyuAryan@users.noreply.github.com>
Date: Fri, 28 Apr 2023 22:43:40 +0530
Subject: [PATCH 005/265] bumping genie to 5.17 and stipple to 0.26.4

---
 Project.toml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Project.toml b/Project.toml
index 02e2d3fa..6b167e9e 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.26.3"
+version = "0.26.4"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
@@ -24,7 +24,7 @@ StructTypes = "856f2bd8-1eba-4b0a-8007-ebc267875bd4"
 
 [compat]
 FilePathsBase = "0.9"
-Genie = "5.15.3"
+Genie = "5.17.0"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON3 = "1.9"

From a70f8e82b8839b2ab31d90bedef5f6fe6ab25ee7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 30 Apr 2023 22:41:50 +0200
Subject: [PATCH 006/265] avoid macro evaluation in Stipple

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

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index bdf70d7c..3178e27b 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -271,7 +271,7 @@ end
 function binding(expr::Expr, m::Module, @nospecialize(mode::Any = nothing); source = nothing, reactive = true)
   (m == @__MODULE__) && return nothing
 
-  intmode = @eval Stipple $mode
+  intmode = mode isa Integer ? Int(mode) : @eval Stipple.$mode
   init_storage(m)
 
   var, field_expr = parse_expression!(expr, reactive ? mode : nothing, source, m)
@@ -285,7 +285,7 @@ function binding(expr::Expr, m::Module, @nospecialize(mode::Any = nothing); sour
 end
 
 function binding(expr::Expr, storage::LittleDict{Symbol, Expr}, @nospecialize(mode::Any = nothing); source = nothing, reactive = true, m::Module)
-  intmode = @eval Stipple $mode
+  intmode = mode isa Integer ? Int(mode) : @eval Stipple.$mode
 
   var, field_expr = parse_expression!(expr, reactive ? mode : nothing, source, m)
   storage[var] = field_expr

From 7c99dcd2202c99bd7f1237e31f70785adbae5da5 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 2 May 2023 18:03:02 +0200
Subject: [PATCH 007/265] remove eval in setmode!(), make mode__ field type
 stable

---
 src/ReactiveTools.jl      | 21 +++++++++++++++++----
 src/Stipple.jl            |  2 +-
 src/stipple/reactivity.jl |  6 +++---
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 3178e27b..c2790dc5 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -118,8 +118,21 @@ end
 
 function Stipple.setmode!(expr::Expr, mode::Int, fieldnames::Symbol...)
   fieldname in [Stipple.CHANNELFIELDNAME, :modes__] && return
-
-  d = eval(expr.args[2])
+  expr.args[2] isa Expr && expr.args[2].args[1] == :(Stipple._deepcopy) && (expr.args[2] = expr.args[2].args[2])
+
+  d = if expr.args[2] isa LittleDict
+    copy(expr.args[2])
+  elseif expr.args[2] isa QuoteNode
+    expr.args[2].value
+  else # isa Expr generating a LittleDict (hopefully ...)
+    expr.args[2].args[1].args[1] == :(Stipple.LittleDict) || expr.args[2].args[1].args[1] == :(LittleDict) || error("Unexpected error while setting access properties of app variables")
+
+    d = LittleDict{Symbol, Int}()
+    for p in expr.args[2].args[2:end]
+      push!(d, p.args[2].value => p.args[3])
+    end
+    d
+  end
   for fieldname in fieldnames
     mode == PUBLIC ? delete!(d, fieldname) : d[fieldname] = mode
   end
@@ -416,7 +429,7 @@ macro init(modeltype)
     local initfn =  if isdefined($__module__, :init_from_storage)
                       $__module__.init_from_storage
                     else
-                      $__module__.init
+                      Stipple.init
                     end
     local handlersfn =  if isdefined($__module__, :__GF_AUTO_HANDLERS__)
                           if length(methods($__module__.__GF_AUTO_HANDLERS__)) == 0
@@ -439,7 +452,7 @@ end
 macro init()
   quote
     let type = Stipple.@type
-      @init(type)
+      Stipple.ReactiveTools.@init(type)
     end
   end |> esc
 end
diff --git a/src/Stipple.jl b/src/Stipple.jl
index abad7f2d..ff7ec437 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -321,7 +321,7 @@ function init_storage()
   LittleDict{Symbol, Expr}(
     CHANNELFIELDNAME =>
       :($(Stipple.CHANNELFIELDNAME)::$(Stipple.ChannelName) = Stipple.channelfactory()),
-    :modes__ => :(modes__::Stipple.LittleDict{Symbol, Any} = Stipple.LittleDict{Symbol, Any}()),
+    :modes__ => :(modes__::Stipple.LittleDict{Symbol, Int} = Stipple.LittleDict{Symbol, Int}()),
     :isready => :(isready::Stipple.R{Bool} = false),
     :isprocessing => :(isprocessing::Stipple.R{Bool} = false)
   )
diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index e848f20e..0c1610ef 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -176,8 +176,8 @@ function model_to_storage(::Type{T}, prefix = "", postfix = "") where T# <: Reac
 end
 
 function merge_storage(storage_1::AbstractDict, storage_2::AbstractDict; keep_channel = true)
-  m1 = eval(haskey(storage_1, :modes__) ? storage_1[:modes__].args[end] : LittleDict{Symbol, Any}())
-  m2 = eval(haskey(storage_2, :modes__) ? storage_2[:modes__].args[end] : LittleDict{Symbol, Any}())
+  m1 = eval(haskey(storage_1, :modes__) ? storage_1[:modes__].args[end] : LittleDict{Symbol, Int}())
+  m2 = eval(haskey(storage_2, :modes__) ? storage_2[:modes__].args[end] : LittleDict{Symbol, Int}())
   modes = merge(m1, m2)
   
   keep_channel && haskey(storage_2, :channel__) && (storage_2 = delete!(copy(storage_2), :channel__))
@@ -192,7 +192,7 @@ function merge_storage(storage_1::AbstractDict, storage_2::AbstractDict; keep_ch
     end
   end
   storage = merge(storage_1, storage_2)
-  storage[:modes__] = :(modes__::Stipple.LittleDict{Symbol, Any} = $modes)
+  storage[:modes__] = :(modes__::Stipple.LittleDict{Symbol, Int} = $modes)
 
   storage
 end

From 33189c2535eb51e01f3bc92bf19590421d5576bd Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Wed, 3 May 2023 23:45:01 +0200
Subject: [PATCH 008/265] add macro `@using_except` to avoid name clashes of
 div, view, mark, time, download, render, Headers (#196)

---
 src/Stipple.jl | 53 ++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index ff7ec437..e2f9d3f9 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -15,11 +15,60 @@ existing Vue.js libraries.
 """
 module Stipple
 
+"""
+@using_except(expr)
+
+using statement while excluding certain names
+
+### Example
+```
+using Parent.MyModule: x, y
+```
+will import all names from Parent.MyModule except `x` and `y`. Currently suports only a single module.
+"""
+macro using_except(expr)
+  # check validity
+  expr isa Expr && (expr.args[1] == :(:) || (expr.args[1].head == :call && expr.args[1].args[1] == :(:))) || return
+  
+  # determine module name and list of excluded symbols
+  m, excluded = expr.args[1] == :(:) ? (expr.args[2], Symbol[expr.args[3]]) : (expr.args[1].args[2], Symbol[s for s in vcat([expr.args[1].args[3]], expr.args[2:end])])
+  
+  # convert m.args to list of Symbols
+  if m isa Expr
+      m.args[2] = m.args[2].value
+      while m.args[1] isa Expr
+          pushfirst!(m.args, m.args[1].args[1]);
+          m.args[2] = m.args[2].args[2].value
+      end
+  end
+  
+  m_name = m isa Expr ? m.args[end] : m
+  
+  # as a first step use only the module name
+  # by constructing `using Parent.MyModuleName: MyModule`
+  expr = :(using dummy1: dummy2)
+  expr.args[1].args[1].args = m isa Expr ? m.args : Any[m]
+  expr.args[1].args[2].args[1] = m_name
+  # execute the using statement
+  M = Core.eval(__module__, :($expr; $m_name))
+  # determine list of all exported names
+  nn = filter!(x -> Base.isexported(M, x) && ! (x ∈ excluded) , names(M; all = true, imported = true))
+  # convert the list of symbols to list of imported names
+  args = [:($(Expr(:., n))) for n in nn]
+  # re-use previous expression and insert the names to be imported
+  expr.args[1].args = pushfirst!(args, expr.args[1].args[1])
+  
+  @debug(expr)
+  expr
+end
+
+
 using Logging, Mixers, Random, Reexport, Requires, Dates
 
 @reexport using Observables
-@reexport using Genie
-@reexport using Genie.Renderer.Html
+@reexport @using_except Genie: download
+import Genie.Router.download
+@reexport @using_except Genie.Renderer.Html: mark, div, time, view, render, Headers
 @reexport using JSON3
 @reexport using StructTypes
 @reexport using Parameters

From a7cf07cb8ca9cc08fe619288e259ac4255bcba51 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 3 May 2023 23:47:20 +0200
Subject: [PATCH 009/265] set version v0.26.5

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 6b167e9e..1d2ca830 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.26.4"
+version = "0.26.5"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From f34539ec7bad05d48d91f8195e722ac2a58a6898 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 5 May 2023 10:34:41 +0200
Subject: [PATCH 010/265] export render() after it was unintenionally removed
 from exports

---
 src/Stipple.jl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index e2f9d3f9..545f3930 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -69,6 +69,7 @@ using Logging, Mixers, Random, Reexport, Requires, Dates
 @reexport @using_except Genie: download
 import Genie.Router.download
 @reexport @using_except Genie.Renderer.Html: mark, div, time, view, render, Headers
+export render
 @reexport using JSON3
 @reexport using StructTypes
 @reexport using Parameters

From 9b6a55cbd4f3fce27d5e0fd1d64afc5942ed5165 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 5 May 2023 10:35:11 +0200
Subject: [PATCH 011/265] set version v0.26.6

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 1d2ca830..6c762e5d 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.26.5"
+version = "0.26.6"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From ca97fb0ddb5338e033fd0027684cb7ebad82f781 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 5 May 2023 18:49:33 +0200
Subject: [PATCH 012/265] prefix VERSION with Base., check for isdefined in
 @using_except

---
 src/Stipple.jl | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 545f3930..6a281e43 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -49,12 +49,16 @@ macro using_except(expr)
   expr = :(using dummy1: dummy2)
   expr.args[1].args[1].args = m isa Expr ? m.args : Any[m]
   expr.args[1].args[2].args[1] = m_name
+
   # execute the using statement
   M = Core.eval(__module__, :($expr; $m_name))
+
   # determine list of all exported names
-  nn = filter!(x -> Base.isexported(M, x) && ! (x ∈ excluded) , names(M; all = true, imported = true))
+  nn = filter!(x -> Base.isexported(M, x) && ! (x ∈ excluded) && isdefined(M, x), names(M; all = true, imported = true))
+
   # convert the list of symbols to list of imported names
   args = [:($(Expr(:., n))) for n in nn]
+
   # re-use previous expression and insert the names to be imported
   expr.args[1].args = pushfirst!(args, expr.args[1].args[1])
   
@@ -843,7 +847,7 @@ macro kwredef(expr)
   esc(quote
     Base.@kwdef $expr
     $T_old = $T_new
-    if VERSION < v"1.8-"
+    if Base.VERSION < v"1.8-"
       $curly ? $T_new.body.name.name = $(QuoteNode(T_old)) : $T_new.name.name = $(QuoteNode(T_old)) # fix the name
     end
 

From aacd3065445111fb44229d95197ee7a4f7e01f1f Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 5 May 2023 18:50:16 +0200
Subject: [PATCH 013/265] set version v0.26.7

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 6c762e5d..848f9244 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.26.6"
+version = "0.26.7"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 2bb4ebc9694d3c5b46641137226e32d917b2ddd5 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Mon, 8 May 2023 14:47:14 +0200
Subject: [PATCH 014/265] support for basepath in default layout

---
 Project.toml         |  4 ++--
 src/ReactiveTools.jl | 24 ++++++++++++------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/Project.toml b/Project.toml
index 02e2d3fa..289a87c7 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.26.3"
+version = "0.26.8"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
@@ -24,7 +24,7 @@ StructTypes = "856f2bd8-1eba-4b0a-8007-ebc267875bd4"
 
 [compat]
 FilePathsBase = "0.9"
-Genie = "5.15.3"
+Genie = "5.18"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON3 = "1.9"
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 39840dfd..0f06c751 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -39,11 +39,11 @@ function DEFAULT_LAYOUT(; title::String = "Genie App")
     <% Stipple.sesstoken() %>
     <title>$title</title>
     <% if isfile(joinpath(Genie.config.server_document_root, "css", "genieapp.css")) %>
-    <link rel='stylesheet' href='/css/genieapp.css'>
+    <link rel='stylesheet' href='$(Genie.Configuration.basepath())/css/genieapp.css'>
     <% else %>
     <% end %>
     <% if isfile(joinpath(Genie.config.server_document_root, "css", "autogenerated.css")) %>
-    <link rel='stylesheet' href='/css/autogenerated.css'>
+    <link rel='stylesheet' href='$(Genie.Configuration.basepath())/css/autogenerated.css'>
     <% else %>
     <% end %>
     <style>
@@ -63,7 +63,7 @@ function DEFAULT_LAYOUT(; title::String = "Genie App")
       </div>
     </div>
     <% if isfile(joinpath(Genie.config.server_document_root, "js", "genieapp.js")) %>
-    <script src='/js/genieapp.js'></script>
+    <script src='$(Genie.Configuration.basepath())/js/genieapp.js'></script>
     <% else %>
     <% end %>
     <footer class='_genie container'>
@@ -255,7 +255,7 @@ macro app(expr)
 
   quote
     $expr
-    
+
     @handlers
   end |> esc
 end
@@ -371,7 +371,7 @@ end
 macro mixin(expr, prefix = "", postfix = "")
   # if prefix is not a String then call the @mixin version for generic model types
   prefix isa String || return quote
-    @mixin $expr $prefix $postfix "" 
+    @mixin $expr $prefix $postfix ""
   end
 
   storage = init_storage(__module__)
@@ -388,14 +388,14 @@ macro mixin(location, expr, prefix, postfix)
     expr = expr.args[2]
   end
   loc = location isa Symbol ? QuoteNode(location) : location
-  
+
   x = Core.eval(__module__, expr)
   quote
     local location = $loc isa Symbol && isdefined($__module__, $loc) ? $__module__.$(loc isa QuoteNode ? loc.value : loc) : $loc
     local storage = location isa DataType ? Stipple.model_to_storage(location) : location isa LittleDict ? location : Stipple.init_storage()
     M = $x isa DataType ? $x : typeof($x) # really needed?
     local mixin_storage = Stipple.model_to_storage(M, $(QuoteNode(prefix)), $postfix)
-    
+
     merge!(storage, Stipple.merge_storage(storage, mixin_storage))
     location isa DataType || location isa Symbol ? eval(:(Stipple.@type($$loc, $storage))) : location
     mixin_storage
@@ -676,7 +676,7 @@ macro onchange(location, vars, expr)
   for a in vars.args
     push!(do_vars, a isa Symbol && ! in(a, used_vars) ? a : :_)
   end
-  
+
   replace_reactive_vars = setdiff(known_reactive_vars, do_vars)
   replace_non_reactive_vars = setdiff(known_non_reactive_vars, do_vars)
 
@@ -725,11 +725,11 @@ macro onbutton(location, var, expr)
   expr = fieldnames_to_fields(expr, known_non_reactive_vars)
   expr = fieldnames_to_fieldcontent(expr, known_reactive_vars)
   expr = unmask(expr, known_vars)
-  
+
   ex = :(onbutton($var) do
     $(expr.args...)
   end)
-  
+
   output = quote end
 
   if loc isa Module
@@ -738,7 +738,7 @@ macro onbutton(location, var, expr)
     push!(output.args, :(Base.delete_method.(methods(__GF_AUTO_HANDLERS__))))
   end
   push!(output.args, QuoteNode(ex))
-  
+
   output |> esc
 end
 
@@ -852,7 +852,7 @@ macro event(M, eventname, expr)
 
   expr = unmask(fieldnames_to_fieldcontent(expr, known_vars), known_vars)
   T = eventname isa QuoteNode ? eventname : QuoteNode(eventname)
-  
+
   quote
     function Base.notify(__model__::$M, ::Val{$T}, @nospecialize(event))
         $expr

From 6b6a39e385d6d91f341fcdd7cf98550dac0c8c0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 9 May 2023 01:33:18 +0200
Subject: [PATCH 015/265] speed up broadcasting over fieldnames

---
 src/ParsingTools.jl | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/ParsingTools.jl b/src/ParsingTools.jl
index 59867ab7..f889279b 100644
--- a/src/ParsingTools.jl
+++ b/src/ParsingTools.jl
@@ -69,9 +69,8 @@ serialize!(d, T::Type) = serialize!(d, serializedfields(T))
 serialize(d, key) = serialize!(deepcopy(d), key)
 
 function serializedfields(T::Type)
-  ff = string.(fieldnames(T))
-  index = collect(occursin.("_", ff) .& .! startswith.(ff, "_") .& .! occursin.("__", ff))
-  ff[index]
+  ff = String[String(f) for f in fieldnames(T)]
+  index = occursin.("_", ff) .& .! startswith.(ff, "_") .& .! occursin.("__", ff)
   union([Symbol(match(r"[^_]+", f).match) for f in ff[index]])
 end
 

From b334dc939f6ca15c82b16f8b25fd5152b02f2ef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 11 May 2023 23:58:27 +0200
Subject: [PATCH 016/265] fix channel not being initialised by `@app` and
 `@handlers`

---
 src/ReactiveTools.jl      | 42 ++++++++++++++++++++++++---------------
 src/stipple/reactivity.jl |  2 ++
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 980ba203..c2c26944 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -575,21 +575,22 @@ macro handlers(expr)
 end
 
 macro app(typename, expr, handlers_fn_name = :handlers)
-  storage = init_storage()
-  # next line needs to be executed before @handlers can be called
-  # calling in quote is not sufficient
-  @eval __module__ Stipple.@type $typename $storage
+  # indicate to the @handlers macro that old typefields have to be cleared
+  # (avoids model_to_storage)
+  newtypename = Symbol(typename, "_!_")
   quote
-    Stipple.ReactiveTools.@handlers $typename $expr $handlers_fn_name
+    Stipple.ReactiveTools.@handlers $newtypename $expr $handlers_fn_name
   end |> esc
 end
 
 macro handlers(typename, expr, handlers_fn_name = :handlers)
+  newtype = endswith(String(typename), "_!_")
+  newtype && (typename = Symbol(String(typename)[1:end-3]))
+
   expr = wrap(expr, :block)
   i_start = 1
   handlercode = []
   initcode = quote end
-  storage = isdefined(__module__, typename) ? @eval(__module__, Stipple.model_to_storage($typename)) : Stipple.init_storage()
 
   for (i, ex) in enumerate(expr.args)
     if ex isa Expr
@@ -613,17 +614,26 @@ macro handlers(typename, expr, handlers_fn_name = :handlers)
     end
   end
 
-  initcode = quote
-    __storage__ = $storage
-    $(initcode.args...)
-    __storage__
-  end
+  # model_to_storage is only needed when we convert an existing model, and only if new model fields are added 
+  # This is a rare case and it brings some disadvantages, as model_to_storage cannot recreate the original expressions
+  # for defining the initial values.
+  # Therefore we stay with the old model definition if we can. 
+  if ! newtype && isdefined(__module__, typename) && findfirst(x -> x isa Expr, initcode.args) !== nothing
+    storage = @eval(__module__, Stipple.model_to_storage($typename))
+    initcode = quote
+      __storage__ = $storage
+      $(initcode.args...)
+      __storage__
+    end
 
-  # needs to be executed before evaluation of handler code
-  # because the handler code depends on the model fields.
-  @eval __module__ begin
-    $initcode
-    Stipple.@type($typename, __storage__)
+    # needs to be executed before evaluation of handler code
+    # because the handler code depends on the model fields.
+    @eval __module__ begin
+      $initcode
+      Stipple.@type($typename, values(__storage__))
+    end
+  else
+    newtype && @eval __module__ Stipple.@type($typename, Stipple.init_storage())
   end
 
   handlercode_final = []
diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index 0c1610ef..8bb87239 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -171,6 +171,8 @@ function model_to_storage(::Type{T}, prefix = "", postfix = "") where T# <: Reac
     f = f in [:channel__, :modes__, AUTOFIELDS...] ? f : Symbol(prefix, f, postfix)
     storage[f] = v isa Symbol ? :($f::$type = $(QuoteNode(v))) : :($f::$type = Stipple._deepcopy($v))
   end
+  # fix channel field, which is not reconstructed properly by the code above
+  storage[:channel__] = :(channel__::String = Stipple.channelfactory())
 
   storage
 end

From 5ab7ee60799619e8586d22d013465e05454dc76c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 11 May 2023 23:59:46 +0200
Subject: [PATCH 017/265] set version v0.26.9

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 289a87c7..e13ab84e 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.26.8"
+version = "0.26.9"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From bdddf1dad8cad40b2794be1e37884ef7f90875a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 14 May 2023 00:02:56 +0200
Subject: [PATCH 018/265] fix `@app` and `@handlers` macro

---
 src/ReactiveTools.jl | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index c2c26944..882e17b2 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -614,26 +614,33 @@ macro handlers(typename, expr, handlers_fn_name = :handlers)
     end
   end
 
-  # model_to_storage is only needed when we convert an existing model, and only if new model fields are added 
-  # This is a rare case and it brings some disadvantages, as model_to_storage cannot recreate the original expressions
-  # for defining the initial values.
-  # Therefore we stay with the old model definition if we can. 
-  if ! newtype && isdefined(__module__, typename) && findfirst(x -> x isa Expr, initcode.args) !== nothing
-    storage = @eval(__module__, Stipple.model_to_storage($typename))
+  # model_to_storage is only needed when we add variables to an existing type.
+  no_new_vars = findfirst(x -> x isa Expr, initcode.args) === nothing
+  # if we redefine a type newtype is true
+  if isdefined(__module__, typename) && no_new_vars && ! newtype
+    # model is already defined and no variables are added and we are not redefining a model type
+  else
+    # we need to define a type ...
+    storage = if ! newtype && isdefined(__module__, typename) && ! no_new_vars
+      @eval(__module__, Stipple.model_to_storage($typename))
+    else
+      Stipple.init_storage()
+    end
     initcode = quote
+      # define a local variable __storage__ with the value of storage
+      # that will be used by the macro afterwards
       __storage__ = $storage
+      # add more definitions to __storage___
       $(initcode.args...)
-      __storage__
     end
 
     # needs to be executed before evaluation of handler code
     # because the handler code depends on the model fields.
     @eval __module__ begin
+      # execution of initcode will fill up the __storage__
       $initcode
       Stipple.@type($typename, values(__storage__))
     end
-  else
-    newtype && @eval __module__ Stipple.@type($typename, Stipple.init_storage())
   end
 
   handlercode_final = []

From 58305b1250ab69c7e16dbd2074a769d126c4aeb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 14 May 2023 07:20:31 +0200
Subject: [PATCH 019/265] add tests for classic API, expicit and implicit
 Reactive API

---
 src/ReactiveTools.jl |   2 +-
 test/runtests.jl     | 130 ++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 129 insertions(+), 3 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 882e17b2..74165fa1 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -613,7 +613,7 @@ macro handlers(typename, expr, handlers_fn_name = :handlers)
       i_start = i + 1
     end
   end
-
+  
   # model_to_storage is only needed when we add variables to an existing type.
   no_new_vars = findfirst(x -> x isa Expr, initcode.args) === nothing
   # if we redefine a type newtype is true
diff --git a/test/runtests.jl b/test/runtests.jl
index 5babea4f..4f37750b 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -1,8 +1,134 @@
 using Stipple
 using Test
 
-@testset "Stipple.jl" begin
+@vars TestMixin begin
+    j = 101
+    t = "World", PRIVATE
+end
+
+@testset "Classic API" begin
+    @vars TestApp begin
+        i = 100
+        s = "Hello", READONLY
+    end
+    
+    function handlers(model)
+        on(model.i) do i
+            model.s[] = "$i"
+        end
+
+        model
+    end
+
+    model = TestApp |> init |> handlers
+    model2 = TestApp |> init |> handlers
+    
+    # channels have to be different
+    @test model.channel__ != model2.channel__
+
+    # check whether fields are correctly defined
+    @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i, :s)
+
+    # check reactivity
+    model.i[] = 20
+    @test model.s[] == "20"
+end
+
+@testset "Classic API with mixins" begin
+    @vars TestApp begin
+        i = 100
+        s = "Hello"
+        @mixin TestMixin
+        @mixin mixin_::TestMixin
+        @mixin TestMixin pre_ _post
+    end
+
+    function handlers(model)
+        on(model.i) do i
+            model.s[] = "$i"
+        end
+
+        model
+    end
+
+    model = TestApp |> init |> handlers
+    @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i, :s, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
+end
+
+using Stipple.ReactiveTools
+
+@testset "Reactive API (explicit)" begin
+    @app TestApp2 begin
+        @in i = 100
+        @out s = "Hello"
+    
+        @onchange i begin
+            s = "$i"
+        end
+    end
+
+    model = TestApp2 |> init |> handlers
+    model2 = TestApp2 |> init |> handlers
+    
+    # channels have to be different
+    @test model.channel__ != model2.channel__
+
+    # check whether fields are correctly defined
+    @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i, :s)
+
+    # check reactivity
+    model.i[] = 20
+    @test model.s[] == "20"
+end
+
+@testset "Reactive API (explicit) with mixins" begin
+    @app TestApp begin
+        @in i = 100
+        @out s = "Hello"
+    
+        @mixin TestMixin
+        @mixin mixin_::TestMixin
+        @mixin TestMixin "pre_" "_post"
+    end
+
+    model = TestApp |> init |> handlers
+    @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i, :s, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
+end
+
+@testset "Reactive API (implicit)" begin
+    @eval @app begin
+        @in i2 = 100
+        @out s2 = "Hello"
+
+        @onchange i2 begin
+            s2 = "$i2"
+        end
+    end
+
+    @eval model = @init
+    @eval model2 = @init
+    
+    # channels have to be different
+    @eval @test model.channel__ != model2.channel__
+
+    # check whether fields are correctly defined
+    @eval @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i2, :s2)
+
+    # check reactivity
+    @eval model.i2[] = 20
+    @test model.s2[] == "20"
+end
 
-    @test 1 == 1
+@testset "Reactive API (implicit) with mixins" begin
+    @eval @app begin
+        @in i3 = 100
+        @out s3 = "Hello"
+    
+        @mixin TestMixin
+        @mixin mixin_::TestMixin
+        @mixin TestMixin "pre_" "_post"
+    end
 
+    @eval model = @init
+    @eval @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i3, :s3, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
 end

From be1a867e53050b0e99c81861054caa135d66a711 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 14 May 2023 12:55:35 +0200
Subject: [PATCH 020/265] remove old demo code

---
 test/reactive_tools.jl       | 63 ------------------------------------
 test/session_storage_test.jl | 27 ----------------
 2 files changed, 90 deletions(-)
 delete mode 100644 test/reactive_tools.jl
 delete mode 100644 test/session_storage_test.jl

diff --git a/test/reactive_tools.jl b/test/reactive_tools.jl
deleted file mode 100644
index a764d3f9..00000000
--- a/test/reactive_tools.jl
+++ /dev/null
@@ -1,63 +0,0 @@
-using Stipple
-using Stipple.ReactiveTools
-
-@binding const number = 2
-@binding const number2::Float64 = 2.55
-
-function process_data()
-  @binding message = ""
-  @binding reverse_message = ""
-  @binding counter = 0
-
-  @private account_number = 1234
-  @readonly name = "Adrian"
-
-  @field cache = String[]
-  @field stash::Vector{Int} = []
-
-  @binding a::Array = [3, 2, 1]
-end
-
-function handlers(model)
-  on(model.isready) do val
-    if val
-      model.message[] = "Hello World!"
-    end
-  end
-
-  on(model.message) do message
-    model.reverse_message[] = uppercase(reverse(message))
-  end
-
-  on(model.counter) do counter
-    @info counter
-  end
-
-  model
-end
-
-function ui(model)
-  [
-    page(model, [
-      h1([
-        span([], @text(:message))
-        "<->"
-        span([], @text(:reverse_message))
-        " @ "
-        span([], @text(:counter))
-        input("", @bind(:counter))
-      ])
-    ], @iif(:isready))
-  ]
-end
-
-global model
-
-route("/") do
-  process_data()
-  global model = @init()
-  model |> handlers |> ui |> html
-  # @init() |> handlers |> ui |> html
-end
-
-up()
\ No newline at end of file
diff --git a/test/session_storage_test.jl b/test/session_storage_test.jl
deleted file mode 100644
index a9f3f08c..00000000
--- a/test/session_storage_test.jl
+++ /dev/null
@@ -1,27 +0,0 @@
-using Genie
-using Stipple, Stipple.ModelStorage.Sessions
-using Stipple.Pages
-
-isempty(Genie.SECRET_TOKEN[]) && Genie.Generator.write_secrets_file(@__DIR__)
-Sessions.init()
-
-@vars Person begin
-  name::String = "Bob"
-end
-
-function ui(model = init_from_storage(Person))
-  on(model.isready) do _
-    @show model.name[]
-    @show getchannel(model)
-
-    push!(model, channel = getchannel(model))
-  end
-
-  page(model, [
-    input("", type="text", @bind(:name))
-  ])
-end
-
-Page("/", view = ui())
-
-up(async = false)
\ No newline at end of file

From f2b8b58d0b05793ec36d889325002cf7ad2185c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 14 May 2023 12:56:13 +0200
Subject: [PATCH 021/265] set version v0.26.10

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index e13ab84e..fcabf534 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.26.9"
+version = "0.26.10"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 8cb6a0fa0027e9e6b1fe7f80c030e8e2702efa1d Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Mon, 15 May 2023 12:21:57 +0200
Subject: [PATCH 022/265] add column(), change kwargs of cell() (#201)

---
 src/Layout.jl | 53 +++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 2aa81e6a..8ab26aa8 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -8,7 +8,7 @@ module Layout
 using Genie, Stipple
 
 export layout
-export page, app, row, cell, container
+export page, app, row, column, cell, container
 
 export theme
 const THEMES = Function[]
@@ -128,27 +128,60 @@ function row(args...; kwargs...)
 end
 
 """
-    function cell(args...; size::Int=0, kwargs...)
+    function column(args...; kwargs...)
 
-Creates a `div` HTML element with CSS classes named `col col-12` and `col-sm-$size`.
-This works with Stipple's Twitter Bootstrap to create the responsive CSS grid of the web page. The `cell`s should be
-included within `row`s.
+Creates a `div` HTML element with a CSS class named `column`. This works with Stipple's Twitter Bootstrap to create the
+responsive CSS grid of the web page. The `row` function creates rows which should include `cell`s.
 
 ### Example
 
 ```julia
-julia> row(cell(size=2, span("Hello")))
-"<div class=\"row\"><div class=\"col col-12 col-sm-2\"><span>Hello</span></div></div>"
+julia> column(span("Hello"))
+"<div class=\"column\"><span>Hello</span></div>"
 ```
 """
-function cell(args...; size::Union{Int,AbstractString} = 0, kwargs...)
-  isa(size, AbstractString) && (size = parse(Int, size))
+function column(args...; kwargs...)
+  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, "column")
+
+  Genie.Renderer.Html.div(args...; kwargs...)
+end
 
-  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, "col col-12 col-sm$(size > 0 ? "-$size" : "")")
+raw"""
+    function cell(args...; size::Int=0, xs::Int=0, sm::Int=0, md::Int=0, lg::Int=0, xl::Int=0, kwargs...)
+
+Creates a `div` HTML element with Quasar flex grid CSS class named `col`.
+If size is specified, the class `col-$size`is added insead.
+If tag classes (`sm`... `xl`) are specified the respective classes `col-$tag-$md`, e.g. `col-sm-6`, are added.
+The `cell`s should be included within `row`s or `columns`
+
+### Example
+
+```julia
+julia> row(cell(size = 2, md = 6, sm = 12, span("Hello")))
+"<div class=\"row\"><div class=\"col-2 col-sm-12 col-md-6\"><span>Hello</span></div></div>"
+```
+"""
+function cell(args...; size::Union{Int,AbstractString} = 0,
+  xs::Union{Int,AbstractString} = 0, sm::Union{Int,AbstractString} = 0, md::Union{Int,AbstractString} = 0,
+  lg::Union{Int,AbstractString} = 0, xl::Union{Int,AbstractString} = 0, kwargs...)
+
+  colclass = join([sizetocol(size, tag) for (size, tag) in [(size, ""), (xs, "xs"), (sm, "sm"), (md, "md"), (lg, "lg"), (xl, "xl")] if length(tag) == 0 || size != 0], ' ')
+
+  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, colclass)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
+function sizetocol(size::Union{String, Int} = 0, tag::String = "")
+  out = ["col"]
+  length(tag) > 0 && push!(out, tag)
+  if size isa Int
+    size > 0 && push!(out, "$size")
+  else
+    length(size) > 0 && push!(out, size)
+  end
+  length(tag) > 0 && length(out) == 2 ? "" : join(out, '-')
+end
 
 """
     function theme() :: String

From 9d032e79df0d5c7933cecbf57daabc86a0130c38 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 15 May 2023 15:14:13 +0200
Subject: [PATCH 023/265] export htmldiv for Html.div, bring back corrected
 docstring of cell()

---
 src/Layout.jl  | 11 +++++++----
 src/Stipple.jl |  3 ++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 8ab26aa8..a8dc87f3 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -146,13 +146,16 @@ function column(args...; kwargs...)
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
-raw"""
+"""
     function cell(args...; size::Int=0, xs::Int=0, sm::Int=0, md::Int=0, lg::Int=0, xl::Int=0, kwargs...)
 
 Creates a `div` HTML element with Quasar flex grid CSS class named `col`.
-If size is specified, the class `col-$size`is added insead.
-If tag classes (`sm`... `xl`) are specified the respective classes `col-$tag-$md`, e.g. `col-sm-6`, are added.
-The `cell`s should be included within `row`s or `columns`
+If size is specified, the class `col-\$size` is added instead.
+Quasar's flexgrid supports the following values for size arguments:
+- Integer values between `0` and `12`; `0` means no specification
+- AbStractString values `"1"` - `"12"`, `""` or `"auto"`; `""` means no specification, `"auto"` means height/width from content
+If tag classes (`xs`, `sm`, `md`, `lg`, `xl`) are specified, the respective classes `col-\$tag-\$md` are added, e.g. `col-sm-6`.
+The `cell`s should be included within `row`s or `column`s.
 
 ### Example
 
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 6a281e43..f7ca9b31 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -73,7 +73,8 @@ using Logging, Mixers, Random, Reexport, Requires, Dates
 @reexport @using_except Genie: download
 import Genie.Router.download
 @reexport @using_except Genie.Renderer.Html: mark, div, time, view, render, Headers
-export render
+const htmldiv = Html.div
+export render, htmldiv
 @reexport using JSON3
 @reexport using StructTypes
 @reexport using Parameters

From 7b2e6b8aa8b62a74459bd58bbaa677ef5a21c786 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 15 May 2023 15:17:31 +0200
Subject: [PATCH 024/265] set version v0.26.11

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index fcabf534..d16501a7 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.26.10"
+version = "0.26.11"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 5c938466ff65267f59a5b28adf5884681627113f Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 15 May 2023 15:35:57 +0200
Subject: [PATCH 025/265] refine docstrings for cell, row and column

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

diff --git a/src/Layout.jl b/src/Layout.jl
index a8dc87f3..b257fa5b 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -111,8 +111,8 @@ end
 """
     function row(args...; kwargs...)
 
-Creates a `div` HTML element with a CSS class named `row`. This works with Stipple's Twitter Bootstrap to create the
-responsive CSS grid of the web page. The `row` function creates rows which should include `cell`s.
+Creates a `div` HTML element with a CSS class named `row`. This works with Stipple's core layout and with [Quasar's Flex Grid](https://quasar.dev/layout/grid/introduction-to-flexbox) to create the
+responsive CSS grid of the web page. The `row()` function creates rows which should include [`cell`](@ref)s.
 
 ### Example
 
@@ -130,8 +130,8 @@ end
 """
     function column(args...; kwargs...)
 
-Creates a `div` HTML element with a CSS class named `column`. This works with Stipple's Twitter Bootstrap to create the
-responsive CSS grid of the web page. The `row` function creates rows which should include `cell`s.
+Creates a `div` HTML element with a CSS class named `column`. This works with [Quasar's Flex Grid](https://quasar.dev/layout/grid/introduction-to-flexbox) to create the
+responsive CSS grid of the web page. The `row()` function creates rows which should include [`cell`](@ref)s.
 
 ### Example
 
@@ -151,7 +151,7 @@ end
 
 Creates a `div` HTML element with Quasar flex grid CSS class named `col`.
 If size is specified, the class `col-\$size` is added instead.
-Quasar's flexgrid supports the following values for size arguments:
+[Quasar's Flex Grid](https://quasar.dev/layout/grid/introduction-to-flexbox) supports the following values for size arguments:
 - Integer values between `0` and `12`; `0` means no specification
 - AbStractString values `"1"` - `"12"`, `""` or `"auto"`; `""` means no specification, `"auto"` means height/width from content
 If tag classes (`xs`, `sm`, `md`, `lg`, `xl`) are specified, the respective classes `col-\$tag-\$md` are added, e.g. `col-sm-6`.

From edcf3aafed63d231a0c336e096cd3dee4ce265e8 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 15 May 2023 16:23:11 +0200
Subject: [PATCH 026/265] change .col to .st-col in stipplecore.css and append
 class "st-col" to `cell()`s

---
 assets/css/stipplecore.css | 24 ++++++++++++------------
 src/Layout.jl              |  8 +++++---
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/assets/css/stipplecore.css b/assets/css/stipplecore.css
index 54df5df5..fa9b31a4 100644
--- a/assets/css/stipplecore.css
+++ b/assets/css/stipplecore.css
@@ -142,23 +142,23 @@
 .stipple-core .st-dashboard > .row {
   padding: 20px 20px 0;
 }
-.stipple-core .container > .row > .col,
-.stipple-core .st-dashboard > .row > .col {
+.stipple-core .container > .row > .st-col,
+.stipple-core .st-dashboard > .row > .st-col {
   margin-right: 20px;
   padding: 20px;
 }
-.stipple-core .container > .row > .col:last-child,
-.stipple-core .st-dashboard > .row > .col:last-child {
+.stipple-core .container > .row > .st-col:last-child,
+.stipple-core .st-dashboard > .row > .st-col:last-child {
   margin-right: 0;
 }
 @media (max-width: 599px) {
-  .stipple-core .container > .row > .col:not(:first-child),
-  .stipple-core .st-dashboard > .row > .col:not(:first-child) {
+  .stipple-core .container > .row > .st-col:not(:first-child),
+  .stipple-core .st-dashboard > .row > .st-col:not(:first-child) {
     margin-top: 20px;
   }
 }
-.stipple-core .container > .row > .col > .row:not(:first-child),
-.stipple-core .st-dashboard > .row > .col > .row:not(:first-child) {
+.stipple-core .container > .row > .st-col > .row:not(:first-child),
+.stipple-core .st-dashboard > .row > .st-col > .row:not(:first-child) {
   margin-top: 1rem;
 }
 .stipple-core .container > .row.row--stack,
@@ -181,22 +181,22 @@
 .st-br {
   border-right: 1px solid var(--st-dashboard-line);
 }
-.st-br.col:last-child {
+.st-br.st-col:last-child {
   border-right: 0;
 }
 @media (max-width: 599px) {
-  .st-br.col {
+  .st-br.st-col {
     border-right: 0;
   }
 }
 .st-bl {
   border-left: 1px solid var(--st-dashboard-line);
 }
-.st-bl.col:first-child {
+.st-bl.st-col:first-child {
   border-left: 0;
 }
 @media (max-width: 599px) {
-  .st-bl.col {
+  .st-bl.st-col {
     border-left: 0;
   }
 }
diff --git a/src/Layout.jl b/src/Layout.jl
index b257fa5b..cd0ecce6 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -155,13 +155,15 @@ If size is specified, the class `col-\$size` is added instead.
 - Integer values between `0` and `12`; `0` means no specification
 - AbStractString values `"1"` - `"12"`, `""` or `"auto"`; `""` means no specification, `"auto"` means height/width from content
 If tag classes (`xs`, `sm`, `md`, `lg`, `xl`) are specified, the respective classes `col-\$tag-\$md` are added, e.g. `col-sm-6`.
-The `cell`s should be included within `row`s or `column`s.
+The cells should be included within [`row`](@ref)s or [`column`](@ref)s.
+
+Moreover, cells are of the class `st-col`, which is controlled by the Stipple theme.
 
 ### Example
 
 ```julia
 julia> row(cell(size = 2, md = 6, sm = 12, span("Hello")))
-"<div class=\"row\"><div class=\"col-2 col-sm-12 col-md-6\"><span>Hello</span></div></div>"
+"<div class=\"row\"><div class=\"st-col col-2 col-sm-12 col-md-6\"><span>Hello</span></div></div>"
 ```
 """
 function cell(args...; size::Union{Int,AbstractString} = 0,
@@ -170,7 +172,7 @@ function cell(args...; size::Union{Int,AbstractString} = 0,
 
   colclass = join([sizetocol(size, tag) for (size, tag) in [(size, ""), (xs, "xs"), (sm, "sm"), (md, "md"), (lg, "lg"), (xl, "xl")] if length(tag) == 0 || size != 0], ' ')
 
-  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, colclass)
+  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, "st-col $colclass")
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end

From c737a26952bafbd22af2dd2a7fa57ddf539ed69e Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 15 May 2023 16:41:08 +0200
Subject: [PATCH 027/265] set version 0.27.0

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index d16501a7..0b62847e 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.26.11"
+version = "0.27.0"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 77dc35fa9ff114915a2c1ee8bd6cc58bfd8ad211 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Wed, 31 May 2023 12:34:44 +0200
Subject: [PATCH 028/265] refactor js routines, support more life-cycle hooks
 (#206)

* render(app): support functions and vectors in js routines, support more lifecycle hooks

* fix components()

* improve docstrings

* support dicts for methods, watch and computed and add docstrings, move event handling to mixins
---
 assets/js/watchers.js     |  14 ++++
 src/ReactiveTools.jl      | 139 ++++++++++++++++++++++++--------------
 src/stipple/components.jl |   4 +-
 src/stipple/jsmethods.jl  | 122 +++++++++++++++++++++------------
 src/stipple/json.jl       |   3 +
 src/stipple/rendering.jl  |  88 +++++++++++++++++++++---
 6 files changed, 265 insertions(+), 105 deletions(-)

diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index 61f10d9a..a781931c 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -69,4 +69,18 @@ const reviveMixin = {
       return obj;
     }
   }
+}
+
+const eventMixin = {
+  methods: {
+    handle_event: function (event_data, event_handler) {
+      console.log('event: ' + event_data + ":" + event_handler)
+      Genie.WebChannels.sendMessageTo(window.CHANNEL, 'events', {
+          'event': {
+              'name': event_handler,
+              'event': event_data
+          }
+      })
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 74165fa1..6a8d4d4b 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -20,7 +20,10 @@ export @clear, @clear_vars, @clear_handlers
 export @page, @init, @handlers, @app, @appname
 
 # js functions on the front-end (see Vue.js docs)
-export @methods, @watch, @computed, @created, @mounted, @client_data, @add_client_data
+export @methods, @watch, @computed, @client_data, @add_client_data
+
+export @before_create, @created, @before_mount, @mounted, @before_update, @updated, @activated, @deactivated, @before_destroy, @destroyed, @error_captured
+
 
 export DEFAULT_LAYOUT, Page
 
@@ -952,62 +955,98 @@ macro page(url, view)
   :(@page($url, $view, Stipple.ReactiveTools.DEFAULT_LAYOUT())) |> esc
 end
 
-macro computed(args...)
-  vue_options("computed", args...)
-end
-
-macro methods(args...)
-  vue_options("methods", args...)
-end
-
-macro watch(args...)
-  vue_options("watch", args...)
+for f in (:methods, :watch, :computed)
+  f_str = string(f)
+  Core.eval(@__MODULE__, quote
+    """
+        @$($f_str)(expr)
+        @$($f_str)(App, expr)
+
+    Defines js functions for the `$($f_str)` section of the vue element.
+          
+    `expr` can be
+    - `String` containing javascript code
+    - `Pair` of function name and function code
+    - `Function` returning String of javascript code
+    - `Dict` of function names and function code
+    - `Vector` of the above
+  
+    ### Example 1
+
+    ```julia
+    @$($f_str) "greet: function(name) {console.log('Hello ' + name)}"
+    ```
+
+    ### Example 2
+
+    ```julia
+    js_greet() = :greet => "function(name) {console.log('Hello ' + name)}"
+    js_bye() = :bye => "function() {console.log('Bye!')}"
+    @$($f_str) MyApp [js_greet, js_bye]
+    ```
+    Checking the result can be done in the following way
+    ```
+    julia> render(MyApp())[:$($f_str)].s |> println
+    {
+        "greet":function(name) {console.log('Hello ' + name)},
+        "bye":function() {console.log('Bye!')}
+    }
+    ```
+    """
+    macro $f(args...)
+      vue_options($f_str, args...)
+    end
+  end)
 end
 
 #=== Lifecycle hooks ===#
-macro before_create(args...)
-  vue_options("beforeCreate", args...)
-end
-
-macro created(args...)
-  vue_options("created", args...)
-end
-
-macro before_mount(args...)
-  vue_options("beforeMount", args...)
-end
 
-macro mounted(args...)
-  vue_options("mounted", args...)
-end
-
-macro before_update(args...)
-  vue_options("beforeUpdate", args...)
-end
-
-macro updated(args...)
-  vue_options("updated", args...)
-end
-
-macro activated(args...)
-  vue_options("activated", args...)
-end
+for (f, field) in (
+  (:before_create, :beforeCreate), (:created, :created), (:before_mount, :beforeMount), (:mounted, :mounted),
+  (:before_update, :beforeUpdate), (:updated, :updated), (:activated, :activated), (:deactivated, :deactivated),
+  (:before_destroy, :beforeDestroy), (:destroyed, :destroyed), (:error_captured, :errorCaptured),)
 
-macro deactivated(args...)
-  vue_options("deactivated", args...)
-end
-
-macro before_destroy(args...)
-  vue_options("beforeDestroy", args...)
-end
-
-macro destroyed(args...)
-  vue_options("destroyed", args...)
+  f_str = string(f)
+  field_str = string(field)
+  Core.eval(@__MODULE__, quote
+    """
+        @$($f_str)(expr)
+
+    Defines js statements for the `$($field_str)` section of the vue element.
+
+    expr can be
+      - `String` containing javascript code
+      - `Function` returning String of javascript code
+      - `Vector` of the above
+
+    ### Example 1
+
+    ```julia
+    @$($f_str) \"\"\"
+        if (this.cameraon) { startcamera() }
+    \"\"\"
+    ```
+
+    ### Example 2
+
+    ```julia
+    startcamera() = "if (this.cameraon) { startcamera() }"
+    stopcamera() = "if (this.cameraon) { stopcamera() }"
+
+    @$($f_str) MyApp [startcamera, stopcamera]
+    ```
+    Checking the result can be done in the following way
+    ```
+    julia> render(MyApp())[:$($field_str)]
+    JSONText("function(){\n    if (this.cameraon) { startcamera() }\n\n    if (this.cameraon) { stopcamera() }\n}")
+    ```
+    """
+    macro $f(args...)
+      vue_options($f_str, args...)
+    end
+  end)
 end
 
-macro error_captured(args...)
-  vue_options("errorCaptured", args...)
-end
 #=== Lifecycle hooks ===#
 
 function vue_options(hook_type, args...)
diff --git a/src/stipple/components.jl b/src/stipple/components.jl
index 16220db5..d5d971c5 100644
--- a/src/stipple/components.jl
+++ b/src/stipple/components.jl
@@ -32,9 +32,9 @@ JSON representation of the Vue.js components registered for the `ReactiveModel`
 function components(m::Type{M})::String where {M<:ReactiveModel}
   haskey(COMPONENTS, m) || return ""
 
-  replace(Dict(COMPONENTS[m]...) |> json, "\""=>"") |> string
+  json(Dict(k => JSONText(v) for (k, v) in COMPONENTS[m]))[2:end - 1]
 end
 
 function components(app::M)::String where {M<:ReactiveModel}
-  components(M)
+  components(get_abstract_type(M))
 end
\ No newline at end of file
diff --git a/src/stipple/jsmethods.jl b/src/stipple/jsmethods.jl
index 68c4a7e5..b0b6f9c0 100644
--- a/src/stipple/jsmethods.jl
+++ b/src/stipple/jsmethods.jl
@@ -2,11 +2,17 @@
     function js_methods(app::T) where {T<:ReactiveModel}
 
 Defines js functions for the `methods` section of the vue element.
+Expected result types of the function are
+  - `String` containing javascript code
+  - `Pair` of function name and function code
+  - `Function` returning String of javascript code
+  - `Dict` of function names and function code
+  - `Vector` of the above
 
-### Example
+### Example 1
 
 ```julia
-js_methods(app::MyDashboard) = \"\"\"
+js_methods(::MyDashboard) = \"\"\"
   mysquare: function (x) {
     return x^2
   }
@@ -15,6 +21,16 @@ js_methods(app::MyDashboard) = \"\"\"
   }
 \"\"\"
 ```
+### Example 2
+```
+js_methods(::MyDashboard) = Dict(:f => "function(x) { console.log('x: ' + x) })
+```
+### Example 3
+```
+js_greet() = :greet => "function(name) {console.log('Hello ' + name)}"
+js_bye() = :bye => "function() {console.log('Bye!')}"
+js_methods(::MyDashboard) = [js_greet, js_bye]
+```
 """
 function js_methods(app::T)::String where {T<:ReactiveModel}
   ""
@@ -38,6 +54,12 @@ end
 
 Defines js functions for the `computed` section of the vue element.
 These properties are updated every time on of the inner parameters changes its value.
+Expected result types of the function are
+  - `String` containing javascript code
+  - `Pair` of function name and function code
+  - `Function` returning String of javascript code
+  - `Dict` of function names and function code
+  - `Vector` of the above
 
 ### Example
 
@@ -60,6 +82,12 @@ const jscomputed = js_computed
 
 Defines js functions for the `watch` section of the vue element.
 These functions are called every time the respective property changes.
+Expected result types of the function are
+  - `String` containing javascript code
+  - `Pair` of function name and function code
+  - `Function` returning String of javascript code
+  - `Dict` of function names and function code
+  - `Vector` of the above
 
 ### Example
 
@@ -82,46 +110,6 @@ end
 
 const jswatch = js_watch
 
-"""
-    function js_created(app::T)::String where {T<:ReactiveModel}
-
-Defines js statements for the `created` section of the vue element.
-They are executed directly after the creation of the vue element.
-
-### Example
-
-```julia
-js_created(app::MyDashboard) = \"\"\"
-    if (this.cameraon) { startcamera() }
-\"\"\"
-```
-"""
-function js_created(app::T)::String where {T<:ReactiveModel}
-  ""
-end
-
-const jscreated = js_created
-
-"""
-    function js_mounted(app::T)::String where {T<:ReactiveModel}
-
-Defines js statements for the `mounted` section of the vue element.
-They are executed directly after the mounting of the vue element.
-
-### Example
-
-```julia
-js_created(app::MyDashboard) = \"\"\"
-    if (this.cameraon) { startcamera() }
-\"\"\"
-```
-"""
-function js_mounted(app::T)::String where {T<:ReactiveModel}
-  ""
-end
-
-const jsmounted = js_mounted
-
 """
     function client_data(app::T)::String where {T<:ReactiveModel}
 
@@ -139,4 +127,52 @@ will define the additional fields `client_name`, `client_age` and `accept` for t
 """
 client_data(app::T) where T <: ReactiveModel = Dict{String, Any}()
 
-client_data(;kwargs...) = Dict{String, Any}([String(k) => v for (k, v) in kwargs]...)
\ No newline at end of file
+client_data(;kwargs...) = Dict{String, Any}([String(k) => v for (k, v) in kwargs]...)
+
+for (f, field) in (
+  (:js_before_create, :beforeCreate), (:js_created, :created), (:js_before_mount, :beforeMount), (:js_mounted, :mounted),
+  (:js_before_update, :beforeUpdate), (:js_updated, :updated), (:js_activated, :activated), (:js_deactivated, :deactivated),
+  (:js_before_destroy, :beforeDestroy), (:js_destroyed, :destroyed), (:js_error_captured, :errorCaptured),)
+
+  field_str = string(field)
+  Core.eval(@__MODULE__, quote
+    """
+        function $($f)(app::T)::Union{Function, String, Vector} where {T<:ReactiveModel}
+
+    Defines js statements for the `$($field_str)` section of the vue element.
+
+    Result types of the function can be
+    - `String` containing javascript code
+    - `Function` returning String of javascript code
+    - `Vector` of the above
+
+    ### Example 1
+
+    ```julia
+    $($f)(app::MyDashboard) = \"\"\"
+        if (this.cameraon) { startcamera() }
+    \"\"\"
+    ```
+
+    ### Example 2
+
+    ```julia
+    startcamera() = "if (this.cameraon) { startcamera() }"
+    stopcamera() = "if (this.cameraon) { stopcamera() }"
+
+    $($f)(app::MyDashboard) = [startcamera, stopcamera]
+    ```
+    Checking the result can be done in the following way
+    ```
+    julia> render(MyApp())[:$($field_str)]
+    JSONText("function(){\n    if (this.cameraon) { startcamera() }\n\n    if (this.cameraon) { stopcamera() }\n}")
+    ```
+    """
+    function $f(app::T)::String where {T<:ReactiveModel}
+      ""
+    end
+  end)
+end
+
+const jscreated = js_created
+const jsmounted = js_mounted
\ No newline at end of file
diff --git a/src/stipple/json.jl b/src/stipple/json.jl
index c6815142..37f0c04a 100644
--- a/src/stipple/json.jl
+++ b/src/stipple/json.jl
@@ -5,6 +5,9 @@ struct JSONText
   s::String
 end
 
+JSONText(sym::Symbol) = JSONText(String(sym))
+JSONText(js::JSONText) = js
+
 @inline StructTypes.StructType(::Type{JSONText}) = JSON3.RawType()
 @inline StructTypes.construct(::Type{JSONText}, x::JSON3.RawValue) = JSONText(string(x))
 @inline JSON3.rawbytes(x::JSONText) = codeunits(x.s)
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 231d47d0..99dad4cb 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -1,3 +1,66 @@
+"""
+    join_js(xx, delim = ""; skip_empty = true, pre::Function = identity, 
+      strip_delimiter = true, pre_delim::Union{Function,Nothing} = nothing)
+
+Join elements of an iterator similar to [`join`](@ref) with additonal features
+- evaluate the elements if they are callable
+- preprocessing of elements, e.g. strip
+- optional stripping of delimiter
+- dicts/pairs are resolved to json pairs
+
+Parameters:
+- `xx`: Iterator
+- `delim`: delimiter
+- `skip_empty`: if true skip empty entries, e.g. with `pre = strip`, `" "` is ignored
+- `pre`: preprocessor function that is applied to the resulting string of each element
+- `stip_delimiter`: If true strips a potential delimiter at the end of a string
+- `pre_delim`: preprocessor function for delimiter, if `nothing` it defaults to `pre`
+
+### Example
+```
+julia> f() = "Hello,";
+
+julia> join_js([1, f, "World,"], ",\\n", pre = strip) |> println
+1,
+Hello,
+World
+
+julia> f() = "hi - ";
+
+julia> join_js([1, f, "2 "], " - ", pre = strip)
+"1 - hi - 2"
+```
+"""
+function join_js(xx, delim = ""; skip_empty = true, pre::Function = identity, strip_delimiter = true, pre_delim::Union{Function,Nothing} = nothing)
+  io = IOBuffer()
+  firstrun = true
+  s_delim = pre_delim === nothing ? pre(delim) : pre_delim(delim)
+  n_delim = ncodeunits(s_delim)
+  for x_raw in xx
+    x = x_raw isa Base.Callable ? x_raw() : x_raw
+    io2 = IOBuffer()
+    if x isa Union{AbstractDict, Pair, Base.Pairs, Vector{<:Pair}}
+      s = json(Dict(k => JSONText(v) for (k, v) in (x isa Pair ? [x] : x)))[2:end - 1]
+      print(io2, s)
+    else
+      print(io2, x)
+    end
+    s = String(take!(io2))
+    hasdelimiter = strip_delimiter && endswith(s, delim)
+    s = pre(hasdelimiter ? s[1:end - ncodeunits(delim)] : s)
+    # if delimter has been removed already don't check for pretreated delimiter
+    firstrun || (skip_empty && isempty(s)) || print(io, delim)
+    # if first was not printed, firstrun stays true
+    firstrun && (firstrun = (skip_empty && isempty(s)))
+    print(io, strip_delimiter && ! hasdelimiter && endswith(s, s_delim) ? s[1:end - n_delim] : s)
+  end
+  String(take!(io))
+end
+
+join_js(s::AbstractString, delim = ""; kwargs...) = join_js([s], delim; kwargs...)
+join_js(p::Pair, delim = ""; kwargs...) = join_js([p], delim; kwargs...)
+join_js(f::Base.Callable, delim = ""; kwargs...) = join_js([f], delim; kwargs...)
+
 const RENDERING_MAPPINGS = Dict{String,String}()
 mapping_keys() = collect(keys(RENDERING_MAPPINGS))
 
@@ -35,7 +98,7 @@ end
 
 Renders the Julia `ReactiveModel` `app` as the corresponding Vue.js JavaScript code.
 """
-function Stipple.render(app::M, fieldname::Union{Symbol,Nothing} = nothing)::Dict{Symbol,Any} where {M<:ReactiveModel}
+function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
   result = Dict{String,Any}()
 
   for field in fieldnames(typeof(app))
@@ -48,16 +111,21 @@ function Stipple.render(app::M, fieldname::Union{Symbol,Nothing} = nothing)::Dic
   end
 
   vue = Dict( :el => JSONText("rootSelector"),
-              :mixins => JSONText("[watcherMixin, reviveMixin]"),
+              :mixins => JSONText("[watcherMixin, reviveMixin, eventMixin]"),
               :data => merge(result, client_data(app)))
-
-  isempty(components(app)   |> strip)   || push!(vue, :components => components(app))
-  isempty(js_computed(app)  |> strip)   || push!(vue, :computed   => JSONText("{ $(js_computed(app)) }"))
-  isempty(js_watch(app)     |> strip)   || push!(vue, :watch      => JSONText("{ $(js_watch(app)) }"))
-  isempty(js_created(app)   |> strip)   || push!(vue, :created    => JSONText("function(){ $(js_created(app)); }"))
-  isempty(js_mounted(app)   |> strip)   || push!(vue, :mounted    => JSONText("function(){ $(js_mounted(app)); }"))
-  methods = js_methods(app) |> strip
-  push!(vue, :methods    => JSONText("{ $((isempty(methods) ? "" : methods*",")*js_methods_events()) }"))
+  for (f, field) in ((components, :components), (js_methods, :methods), (js_computed, :computed), (js_watch, :watch))
+    js = join_js(f(app), ",\n    "; pre = strip)
+    isempty(js) || push!(vue, field => JSONText("{\n    $js\n}"))
+  end
+  
+  for (f, field) in (
+    (js_before_create, :beforeCreate), (js_created, :created), (js_before_mount, :beforeMount), (js_mounted, :mounted),
+    (js_before_update, :beforeUpdate), (js_updated, :updated), (js_activated, :activated), (js_deactivated, :deactivated),
+    (js_before_destroy, :beforeDestroy), (js_destroyed, :destroyed), (js_error_captured, :errorCaptured),)
+
+    js = join_js(f(app), "\n\n    "; pre = strip)
+    isempty(js) || push!(vue, field => JSONText("function(){\n    $js\n}"))
+  end
 
   vue
 end

From 348094f8a693604601f989bde93fb0ca16f6f0cb Mon Sep 17 00:00:00 2001
From: Abhimanyu Aryan <8083613+AbhimanyuAryan@users.noreply.github.com>
Date: Thu, 15 Jun 2023 13:50:12 +0530
Subject: [PATCH 029/265] support for multipage app with different
 models/modules (#208)

* support for multipage app with different models/modules

* remove newline

* remove unecessary declaration

* undo public api change, adding module to Pages

* keep consistent formatting

* case when model is not type Expr or Module

* remove dead comment

* remove newline
---
 src/Pages.jl | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/Pages.jl b/src/Pages.jl
index d1e2cdce..c6908b71 100644
--- a/src/Pages.jl
+++ b/src/Pages.jl
@@ -29,12 +29,21 @@ pages() = _pages
 
 function Page(  route::Union{Route,String};
                 view::Union{Genie.Renderers.FilePath,<:AbstractString,ParsedHTMLString,Vector{<:AbstractString},Function},
-                model::Union{M,Function,Nothing,Expr} = Stipple.init(EmptyModel),
+                model::Union{M,Function,Nothing,Expr,Module} = Stipple.init(EmptyModel),
                 layout::Union{Genie.Renderers.FilePath,<:AbstractString,ParsedHTMLString,Nothing,Function} = nothing,
                 context::Module = @__MODULE__,
                 kwargs...
               ) where {M<:ReactiveModel}
 
+  model = if isa(model, Expr)
+            Core.eval(context, model)
+          elseif isa(model, Module)
+            context = model
+            @eval(context, @init())
+          else
+            model
+          end
+
   view =  if isa(view, ParsedHTMLString) || isa(view, Vector{<:AbstractString})
             string(view)
           elseif isa(view, AbstractString)
@@ -42,8 +51,7 @@ function Page(  route::Union{Route,String};
           else
             view
           end
-
-  isa(model, Expr) && (model = Core.eval(context, model))
+  
   route = isa(route, String) ? Route(; method = GET, path = route) : route
   layout = isa(layout, String) && length(layout) < Stipple.IF_ITS_THAT_LONG_IT_CANT_BE_A_FILENAME && isfile(layout) ? filepath(layout) :
             isa(layout, ParsedHTMLString) || isa(layout, String) ? string(layout) :
@@ -79,4 +87,4 @@ function remove_pages()
   empty!(_pages)
 end
 
-end
\ No newline at end of file
+end

From 311a8a62ef7ad251de047691cf625e023f884a73 Mon Sep 17 00:00:00 2001
From: Abhimanyu Aryan <8083613+AbhimanyuAryan@users.noreply.github.com>
Date: Sat, 1 Jul 2023 14:35:02 +0530
Subject: [PATCH 030/265] Bumping up version 0.27.1

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 0b62847e..d76643b4 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.0"
+version = "0.27.1"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 0b7e8e687ffb9ce8043d55a38e57b219c2696811 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Mon, 3 Jul 2023 22:25:56 +0200
Subject: [PATCH 031/265] add extensions for OffsetArrays and DataFrames (#209)

---
 Project.toml                  | 16 +++++++++++++++-
 ext/StippleDataFrames.jl      |  7 +++++++
 ext/StippleDataFramesExt.jl   | 16 ++++++++++++++++
 ext/StippleOffsetArrays.jl    | 12 ++++++++++++
 ext/StippleOffsetArraysExt.jl | 19 +++++++++++++++++++
 ext/StippleTablesExt.jl       |  7 +++++++
 src/Stipple.jl                | 30 ++++++++++++++++++------------
 src/stipple/rendering.jl      |  6 +++++-
 test/runtests.jl              | 12 ++++++++++++
 9 files changed, 111 insertions(+), 14 deletions(-)
 create mode 100644 ext/StippleDataFrames.jl
 create mode 100644 ext/StippleDataFramesExt.jl
 create mode 100644 ext/StippleOffsetArrays.jl
 create mode 100644 ext/StippleOffsetArraysExt.jl
 create mode 100644 ext/StippleTablesExt.jl

diff --git a/Project.toml b/Project.toml
index d76643b4..5ad437dc 100644
--- a/Project.toml
+++ b/Project.toml
@@ -21,6 +21,15 @@ Random = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"
 Reexport = "189a3867-3050-52da-a836-e630ba90ab69"
 Requires = "ae029012-a4dd-5104-9daa-d747884805df"
 StructTypes = "856f2bd8-1eba-4b0a-8007-ebc267875bd4"
+Tables  = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
+
+[weakdeps]
+DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
+OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
+
+[extensions]
+StippleDataFramesExt = "DataFrames"
+StippleOffsetArraysExt = "OffsetArrays"
 
 [compat]
 FilePathsBase = "0.9"
@@ -37,9 +46,14 @@ Reexport = "1"
 Requires = "1"
 StructTypes = "1.8"
 julia = "1.6"
+OffsetArrays = "1"
+DataFrames = "1"
+Tables = "1"
 
 [extras]
 Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
+DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
+OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
 
 [targets]
-test = ["Test"]
+test = ["Test", "DataFrames", "OffsetArrays"]
diff --git a/ext/StippleDataFrames.jl b/ext/StippleDataFrames.jl
new file mode 100644
index 00000000..ba61dd74
--- /dev/null
+++ b/ext/StippleDataFrames.jl
@@ -0,0 +1,7 @@
+function Stipple.stipple_parse(::Type{DF} where DF <: DataFrames.AbstractDataFrame, d::Vector)
+  isempty(d) ? DF() : reduce(vcat, DataFrames.DataFrame.(d))
+end
+
+function Stipple.render(df::DataFrames.DataFrame)
+  OrderedDict(zip(names(df), eachcol(df)))
+end
\ No newline at end of file
diff --git a/ext/StippleDataFramesExt.jl b/ext/StippleDataFramesExt.jl
new file mode 100644
index 00000000..6e165381
--- /dev/null
+++ b/ext/StippleDataFramesExt.jl
@@ -0,0 +1,16 @@
+module StippleDataFramesExt
+
+@static if isdefined(Base, :get_extension)
+  using Stipple
+  using DataFrames
+end
+
+function Stipple.stipple_parse(::Type{DF} where DF <: DataFrames.AbstractDataFrame, d::Vector)
+  isempty(d) ? DF() : reduce(vcat, DataFrames.DataFrame.(d))
+end
+
+function Stipple.render(df::DataFrames.DataFrame)
+  OrderedDict(zip(names(df), eachcol(df)))
+end
+  
+end
\ No newline at end of file
diff --git a/ext/StippleOffsetArrays.jl b/ext/StippleOffsetArrays.jl
new file mode 100644
index 00000000..60fc4bfd
--- /dev/null
+++ b/ext/StippleOffsetArrays.jl
@@ -0,0 +1,12 @@
+function Stipple.convertvalue(targetfield::Union{Ref{T}, Reactive{T}}, value) where T <: OffsetArrays.OffsetArray
+  a = Stipple.stipple_parse(eltype(targetfield), value)
+
+  # if value is not an OffsetArray use the offset of the current array
+  if ! isa(value, OffsetArrays.OffsetArray)
+    o = targetfield[].offsets
+    OffsetArrays.OffsetArray(a, OffsetArrays.Origin(1 .+ o))
+  # otherwise use the existing value
+  else
+    a
+  end
+end
\ No newline at end of file
diff --git a/ext/StippleOffsetArraysExt.jl b/ext/StippleOffsetArraysExt.jl
new file mode 100644
index 00000000..0070e3d1
--- /dev/null
+++ b/ext/StippleOffsetArraysExt.jl
@@ -0,0 +1,19 @@
+module StippleOffsetArraysExt
+
+using Stipple
+using OffsetArrays
+
+function Stipple.convertvalue(targetfield::Union{Ref{T}, Reactive{T}}, value) where T <: OffsetArrays.OffsetArray
+  a = Stipple.stipple_parse(eltype(targetfield), value)
+
+  # if value is not an OffsetArray use the offset of the current array
+  if ! isa(value, OffsetArrays.OffsetArray)
+    o = targetfield[].offsets
+    OffsetArrays.OffsetArray(a, OffsetArrays.Origin(1 .+ o))
+  # otherwise use the existing value
+  else
+    a
+  end
+end
+
+end
\ No newline at end of file
diff --git a/ext/StippleTablesExt.jl b/ext/StippleTablesExt.jl
new file mode 100644
index 00000000..097f8624
--- /dev/null
+++ b/ext/StippleTablesExt.jl
@@ -0,0 +1,7 @@
+module StippleTablesExt
+
+using Stipple
+import Tables
+
+
+end
\ No newline at end of file
diff --git a/src/Stipple.jl b/src/Stipple.jl
index f7ca9b31..62f5af07 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -67,7 +67,7 @@ macro using_except(expr)
 end
 
 
-using Logging, Mixers, Random, Reexport, Requires, Dates
+using Logging, Mixers, Random, Reexport, Dates, Tables
 
 @reexport using Observables
 @reexport @using_except Genie: download
@@ -195,25 +195,31 @@ include("ReactiveTools.jl")
 
 #===#
 
+if !isdefined(Base, :get_extension)
+  using Requires
+end
+
 function __init__()
   Genie.config.websockets_server = true
+  deps_routes(core_theme = true)
 
-  @require OffsetArrays  = "6fe1bfb0-de20-5000-8ca7-80f57d26f881" function convertvalue(targetfield::Union{Ref{T}, Reactive{T}}, value) where T <: OffsetArrays.OffsetArray
-    a = stipple_parse(eltype(targetfield), value)
+  @static if !isdefined(Base, :get_extension)
+    @require OffsetArrays  = "6fe1bfb0-de20-5000-8ca7-80f57d26f881" begin
+      # evaluate the code of the extension without the surrounding module
+      include(joinpath(@__DIR__, "..", "ext", "StippleOffsetArrays.jl"))
+      # Core.eval(@__MODULE__, Meta.parse(join(jl, ';')).args[3])
+    end
 
-    # if value is not an OffsetArray use the offset of the current array
-    if ! isa(value, OffsetArrays.OffsetArray)
-      o = targetfield[].offsets
-      OffsetArrays.OffsetArray(a, OffsetArrays.Origin(1 .+ o))
-    # otherwise use the existing value
-    else
-      a
+    @require DataFrames  = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0" begin
+      # evaluate the code of the extension without the surrounding module
+      include(joinpath(@__DIR__, "..", "ext", "StippleDataFrames.jl"))
+      # Core.eval(@__MODULE__, Meta.parse(join(jl, ';')).args[3])
     end
   end
-
-  deps_routes(core_theme = true)
 end
 
+function rendertable end
+
 #===#
 
 """
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 99dad4cb..53af3993 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -140,7 +140,11 @@ function Stipple.render(val::T, fieldname::Union{Symbol,Nothing}) where {T}
 end
 
 function Stipple.render(val::T) where {T}
-  val
+  Tables.istable(val) ? rendertable(val) : val
+end
+
+function Stipple.rendertable(@nospecialize table)
+  OrderedDict(zip(Tables.columnnames(table), Tables.columns(table)))
 end
 
 """
diff --git a/test/runtests.jl b/test/runtests.jl
index 4f37750b..bdd51d68 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -132,3 +132,15 @@ end
     @eval model = @init
     @eval @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i3, :s3, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
 end
+
+using DataFrames
+@testset "Extensions" begin
+    d = Dict(:a => [1, 2, 3], :b => ["a", "b", "c"])
+    df = DataFrame(:a => [1, 2, 3], :b => ["a", "b", "c"])
+    
+    @test Stipple.stipple_parse(DataFrame, [d]) == df
+    @test render(df) == OrderedDict("a" => [1, 2, 3], "b" => ["a", "b", "c"])
+
+    using OffsetArrays
+    @test Stipple.convertvalue(R(OffsetArray([1, 2, 3], -2)), [2, 3, 4]) == OffsetArray([2, 3, 4], -2)
+end
\ No newline at end of file

From 01442f2e11f827be018ed6c31259fc508b8facd6 Mon Sep 17 00:00:00 2001
From: Abhi <8083613+AbhimanyuAryan@users.noreply.github.com>
Date: Tue, 4 Jul 2023 19:59:43 +0530
Subject: [PATCH 032/265] bump up version to 0.27.2

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 5ad437dc..443dc989 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.1"
+version = "0.27.2"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From f4becfb8e9f96a76239c939faed6e5d23df29285 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 27 Jul 2023 07:18:45 +0200
Subject: [PATCH 033/265] fix render bug for Vectors of Dicts and
 Dicts{String/Symbol}

---
 ext/StippleDataFramesExt.jl | 2 +-
 src/stipple/rendering.jl    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ext/StippleDataFramesExt.jl b/ext/StippleDataFramesExt.jl
index 6e165381..12fd0ddb 100644
--- a/ext/StippleDataFramesExt.jl
+++ b/ext/StippleDataFramesExt.jl
@@ -9,7 +9,7 @@ function Stipple.stipple_parse(::Type{DF} where DF <: DataFrames.AbstractDataFra
   isempty(d) ? DF() : reduce(vcat, DataFrames.DataFrame.(d))
 end
 
-function Stipple.render(df::DataFrames.DataFrame)
+function Stipple.render(df::DataFrames.AbstractDataFrame)
   OrderedDict(zip(names(df), eachcol(df)))
 end
   
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 53af3993..4fc0af32 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -140,7 +140,7 @@ function Stipple.render(val::T, fieldname::Union{Symbol,Nothing}) where {T}
 end
 
 function Stipple.render(val::T) where {T}
-  Tables.istable(val) ? rendertable(val) : val
+  (! (val isa AbstractDict || val isa AbstractVector) && Tables.istable(val)) ? rendertable(val) : val
 end
 
 function Stipple.rendertable(@nospecialize table)

From a4b0d873d573b65e1976594c8971949a2d10aaac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 27 Jul 2023 07:44:39 +0200
Subject: [PATCH 034/265] add rendering tests, set version v0.27.3

---
 Project.toml     |  2 +-
 test/runtests.jl | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 443dc989..5221bc00 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.2"
+version = "0.27.3"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/test/runtests.jl b/test/runtests.jl
index bdd51d68..92e9ad64 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -143,4 +143,23 @@ using DataFrames
 
     using OffsetArrays
     @test Stipple.convertvalue(R(OffsetArray([1, 2, 3], -2)), [2, 3, 4]) == OffsetArray([2, 3, 4], -2)
+end
+
+
+# Basic rendering tests (should be enhanced over time perhaps...)
+# These tests should probably be repeated in StippleUI to make sure rendering is not overwritten
+@testset "Rendering" begin
+    using Tables
+
+    ds = Dict("hello" => [1, 2, 3, 4], "world" => ["five", "six"])
+    @test render(ds) == ds
+    
+    vd = [Dict("hello" => 1, "world" => 2)]
+    @test render(vd) == vd
+
+    df = DataFrame(:a => [1, 2, 3], :b => ["a", "b", "c"])
+    @test render(df) == OrderedDict("a" => [1, 2, 3], "b" => ["a", "b", "c"])
+    
+    mt = Tables.table([1 2; 3 4])
+    @test render(mt) == OrderedDict(:Column1 => [1, 3], :Column2 => [2, 4])
 end
\ No newline at end of file

From b6316b3941fb6a574529385c0bbe2e1e98c6cc99 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 21 Aug 2023 11:04:56 +0200
Subject: [PATCH 035/265] refine support of flexgrid in cell(), column() and
 row()

---
 src/Layout.jl | 81 +++++++++++++++++++++++++++++++++++----------------
 1 file changed, 56 insertions(+), 25 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index cd0ecce6..814857d1 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -109,11 +109,12 @@ end
 
 
 """
-    function row(args...; kwargs...)
+    function row(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)
 
-Creates a `div` HTML element with a CSS class named `row`. This works with Stipple's core layout and with [Quasar's Flex Grid](https://quasar.dev/layout/grid/introduction-to-flexbox) to create the
-responsive CSS grid of the web page. The `row()` function creates rows which should include [`cell`](@ref)s.
+Creates a `div` HTML element with Quasar's Flexgrid CSS class `row`. Such rows typically contain elements created with
+[`cell`](@ref), `row`, [`column`](@ref) or other elements that manually receive grid classes, e.g. `"col"`, `"col-sm-5"`. 
 
+The grid size kwargs `size`, `xs`, etc. are explained in more detail in the docs of [`cell`](@ref).
 ### Example
 
 ```julia
@@ -121,17 +122,26 @@ julia> row(span("Hello"))
 "<div class=\"row\"><span>Hello</span></div>"
 ```
 """
-function row(args...; kwargs...)
-  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, "row")
+function row(args...; 
+  size::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...)
+
+  classes = [sizetocol(size, tag) for (size, tag) in ((size, ""), (xs, "xs"), (sm, "sm"), (md, "md"), (lg, "lg"), (xl, "xl"))]
+  pushfirst!(classes, "row")
+  class = join(classes[classes .!= ""], ' ')
+  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, class)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
 """
-    function column(args...; kwargs...)
+    function column(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)
+
+Creates a `div` HTML element with Quasar's Flexgrid CSS class `column`. Such columns typically contain elements created with
+[`cell`](@ref), [`row`](@ref), `column`, or other elements that manually receive grid classes, e.g. `"col"`, `"col-sm-5"`. 
 
-Creates a `div` HTML element with a CSS class named `column`. This works with [Quasar's Flex Grid](https://quasar.dev/layout/grid/introduction-to-flexbox) to create the
-responsive CSS grid of the web page. The `row()` function creates rows which should include [`cell`](@ref)s.
+The grid size kwargs `size`, `xs`, etc. are explained in more detail in the docs of [`cell`](@ref).
 
 ### Example
 
@@ -140,8 +150,16 @@ julia> column(span("Hello"))
 "<div class=\"column\"><span>Hello</span></div>"
 ```
 """
-function column(args...; kwargs...)
-  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, "column")
+function column(args...;
+  size::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  kwargs...)
+
+  classes = [sizetocol(size, tag) for (size, tag) in ((size, ""), (xs, "xs"), (sm, "sm"), (md, "md"), (lg, "lg"), (xl, "xl"))]
+  pushfirst!(classes, "column")
+  class = join(classes[classes .!= ""], ' ')
+  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, class)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -149,15 +167,23 @@ end
 """
     function cell(args...; size::Int=0, xs::Int=0, sm::Int=0, md::Int=0, lg::Int=0, xl::Int=0, kwargs...)
 
-Creates a `div` HTML element with Quasar flex grid CSS class named `col`.
+Creates a `div` HTML element with Quasar's flex grid CSS class `col`.
+Moreover, cells are of the class `st-col`, which is controlled by the Stipple theme.
+
 If size is specified, the class `col-\$size` is added instead.
-[Quasar's Flex Grid](https://quasar.dev/layout/grid/introduction-to-flexbox) supports the following values for size arguments:
-- Integer values between `0` and `12`; `0` means no specification
-- AbStractString values `"1"` - `"12"`, `""` or `"auto"`; `""` means no specification, `"auto"` means height/width from content
+
 If tag classes (`xs`, `sm`, `md`, `lg`, `xl`) are specified, the respective classes `col-\$tag-\$md` are added, e.g. `col-sm-6`.
-The cells should be included within [`row`](@ref)s or [`column`](@ref)s.
 
-Moreover, cells are of the class `st-col`, which is controlled by the Stipple theme.
+Parameters:
+
+- `""` / `0`: shared remaining space (e.g. `"col"`, `"col-sm"`)
+- `1` - `12` / `"1"` - `"12"`: column width (e.g. `"col-5"`, `"col-sm-5"`)
+- `"auto"`/`:auto`: height/width from content (`"col-auto"`, `"col-sm-auto"`)
+- `-1` / `nothing`: no specification
+
+The cells are typically included within [`row`](@ref)s or [`column`](@ref)s.
+See [Quasar's Flex Grid](https://quasar.dev/layout/grid/introduction-to-flexbox) for more information.
+
 
 ### Example
 
@@ -166,26 +192,31 @@ julia> row(cell(size = 2, md = 6, sm = 12, span("Hello")))
 "<div class=\"row\"><div class=\"st-col col-2 col-sm-12 col-md-6\"><span>Hello</span></div></div>"
 ```
 """
-function cell(args...; size::Union{Int,AbstractString} = 0,
-  xs::Union{Int,AbstractString} = 0, sm::Union{Int,AbstractString} = 0, md::Union{Int,AbstractString} = 0,
-  lg::Union{Int,AbstractString} = 0, xl::Union{Int,AbstractString} = 0, kwargs...)
-
-  colclass = join([sizetocol(size, tag) for (size, tag) in [(size, ""), (xs, "xs"), (sm, "sm"), (md, "md"), (lg, "lg"), (xl, "xl")] if length(tag) == 0 || size != 0], ' ')
+function cell(args...;
+  size::Union{Int,AbstractString,Symbol,Nothing} = 0,
+  xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...
+)
 
-  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, "st-col $colclass")
+  classes = [sizetocol(size, tag) for (size, tag) in ((size, ""), (xs, "xs"), (sm, "sm"), (md, "md"), (lg, "lg"), (xl, "xl"))]
+  pushfirst!(classes, "st-col")
+  class = join(classes[classes .!= ""], ' ')
+  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, class)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
-function sizetocol(size::Union{String, Int} = 0, tag::String = "")
+function sizetocol(size::Union{String,Int,Nothing,Symbol}=-1, tag::String="")
+  (size == -1 || size === nothing) && return ""
   out = ["col"]
   length(tag) > 0 && push!(out, tag)
   if size isa Int
     size > 0 && push!(out, "$size")
   else
-    length(size) > 0 && push!(out, size)
+    size isa Symbol && (size = String(size))
+    length(size) > 0 && size != "col" && push!(out, size)
   end
-  length(tag) > 0 && length(out) == 2 ? "" : join(out, '-')
+  return join(out, '-')
 end
 
 """

From a72d7612e7385719519b366b8781b6e9e1eac4ab Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Tue, 22 Aug 2023 08:24:52 +0200
Subject: [PATCH 036/265] define flexgrid_kwargs, refactor cell, row, column
 (#215)

---
 src/Layout.jl | 38 +++++++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 814857d1..1474b661 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -8,7 +8,7 @@ module Layout
 using Genie, Stipple
 
 export layout
-export page, app, row, column, cell, container
+export page, app, row, column, cell, container, flexgrid_kwargs
 
 export theme
 const THEMES = Function[]
@@ -107,6 +107,23 @@ function container(args...; fluid = false, kwargs...)
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
+function flexgrid_kwargs(; class = "", flexgrid_mappings::Dict{Symbol,Symbol} = Dict{Symbol,Symbol}(), kwargs...)
+  kwargs = Dict{Symbol,Any}(kwargs...)
+  classes = [class]
+
+  for key in (:size, :xs, :sm, :md, :lg, :xl)
+    newkey = get(flexgrid_mappings, key, key)
+    if haskey(kwargs, newkey)
+      class = sizetocol(kwargs[newkey], key)
+      length(class) > 0 && push!(classes, class)
+      delete!(kwargs, newkey)
+    end
+  end
+  class = join(classes[classes .!= ""], ' ')
+  length(class) > 0 && (kwargs[:class] = class)
+
+  return kwargs
+end
 
 """
     function row(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)
@@ -127,10 +144,7 @@ function row(args...;
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...)
 
-  classes = [sizetocol(size, tag) for (size, tag) in ((size, ""), (xs, "xs"), (sm, "sm"), (md, "md"), (lg, "lg"), (xl, "xl"))]
-  pushfirst!(classes, "row")
-  class = join(classes[classes .!= ""], ' ')
-  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, class)
+  kwargs = flexgrid_kwargs(; class = "row", size, xs, sm, md, lg, xl)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -156,10 +170,7 @@ function column(args...;
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
   kwargs...)
 
-  classes = [sizetocol(size, tag) for (size, tag) in ((size, ""), (xs, "xs"), (sm, "sm"), (md, "md"), (lg, "lg"), (xl, "xl"))]
-  pushfirst!(classes, "column")
-  class = join(classes[classes .!= ""], ' ')
-  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, class)
+  kwargs = flexgrid_kwargs(; class = "column", size, xs, sm, md, lg, xl)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -198,18 +209,15 @@ function cell(args...;
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...
 )
 
-  classes = [sizetocol(size, tag) for (size, tag) in ((size, ""), (xs, "xs"), (sm, "sm"), (md, "md"), (lg, "lg"), (xl, "xl"))]
-  pushfirst!(classes, "st-col")
-  class = join(classes[classes .!= ""], ' ')
-  kwargs = NamedTuple(Dict{Symbol,Any}(kwargs...), :class, class)
+  kwargs = flexgrid_kwargs(; class = "st-col", size, xs, sm, md, lg, xl)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
-function sizetocol(size::Union{String,Int,Nothing,Symbol}=-1, tag::String="")
+function sizetocol(size::Union{String,Int,Nothing,Symbol} = -1, tag::Symbol = :size)
   (size == -1 || size === nothing) && return ""
   out = ["col"]
-  length(tag) > 0 && push!(out, tag)
+  tag != :size && push!(out, String(tag))
   if size isa Int
     size > 0 && push!(out, "$size")
   else

From 130ed143e504fc2109193fe6466a3184c5c5ec26 Mon Sep 17 00:00:00 2001
From: Mohamed Sayed <mohamed.sayed@optomatica.com>
Date: Thu, 24 Aug 2023 22:38:42 +0300
Subject: [PATCH 037/265] docs: onchange macro example fix (#217)

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

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 6a8d4d4b..9fe4b4e6 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -800,7 +800,7 @@ This macro watches a list of variables and defines a code block that is executed
     @in M = 0
     @out result = 0
     # reactive code to be executed when N changes
-    @onchange N M begin
+    @onchange N, M begin
         result = 10*N*M
     end
 end

From 6aeeba96e5d4d2fdaea6dcc699304167b3e064cc Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Tue, 29 Aug 2023 13:36:14 +0200
Subject: [PATCH 038/265] fixes

---
 src/ReactiveTools.jl |  8 ++++----
 src/Stipple.jl       | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 6a8d4d4b..c4444ed3 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -34,7 +34,7 @@ const HANDLERS = LittleDict{Module,Vector{Expr}}()
 const TYPES = LittleDict{Module,Union{<:DataType,Nothing}}()
 
 function DEFAULT_LAYOUT(; title::String = "Genie App", meta::Dict{<:AbstractString,<:AbstractString} = Dict("og:title" => "Genie App"))
-  tags = Genie.Renderers.Html.for_each(x -> """<meta name="$(x.first)" content="$(x.second)">\n    """, meta)
+  tags = Genie.Renderers.Html.for_each(x -> """<meta name="$(x.first)" content="$(x.second)">\n""", meta)
   """
 <!DOCTYPE html>
 <html>
@@ -616,7 +616,7 @@ macro handlers(typename, expr, handlers_fn_name = :handlers)
       i_start = i + 1
     end
   end
-  
+
   # model_to_storage is only needed when we add variables to an existing type.
   no_new_vars = findfirst(x -> x isa Expr, initcode.args) === nothing
   # if we redefine a type newtype is true
@@ -963,14 +963,14 @@ for f in (:methods, :watch, :computed)
         @$($f_str)(App, expr)
 
     Defines js functions for the `$($f_str)` section of the vue element.
-          
+
     `expr` can be
     - `String` containing javascript code
     - `Pair` of function name and function code
     - `Function` returning String of javascript code
     - `Dict` of function names and function code
     - `Vector` of the above
-  
+
     ### Example 1
 
     ```julia
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 62f5af07..a5e22aa9 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -29,10 +29,10 @@ will import all names from Parent.MyModule except `x` and `y`. Currently suports
 macro using_except(expr)
   # check validity
   expr isa Expr && (expr.args[1] == :(:) || (expr.args[1].head == :call && expr.args[1].args[1] == :(:))) || return
-  
+
   # determine module name and list of excluded symbols
   m, excluded = expr.args[1] == :(:) ? (expr.args[2], Symbol[expr.args[3]]) : (expr.args[1].args[2], Symbol[s for s in vcat([expr.args[1].args[3]], expr.args[2:end])])
-  
+
   # convert m.args to list of Symbols
   if m isa Expr
       m.args[2] = m.args[2].value
@@ -41,9 +41,9 @@ macro using_except(expr)
           m.args[2] = m.args[2].args[2].value
       end
   end
-  
+
   m_name = m isa Expr ? m.args[end] : m
-  
+
   # as a first step use only the module name
   # by constructing `using Parent.MyModuleName: MyModule`
   expr = :(using dummy1: dummy2)
@@ -61,7 +61,7 @@ macro using_except(expr)
 
   # re-use previous expression and insert the names to be imported
   expr.args[1].args = pushfirst!(args, expr.args[1].args[1])
-  
+
   @debug(expr)
   expr
 end
@@ -459,7 +459,7 @@ function init(::Type{M};
 
       try
         haskey(payload, "sesstoken") && ! isempty(payload["sesstoken"]) &&
-          Genie.Router.params!(Stipple.ModelStorage.Sessions.GenieSession.PARAMS_SESSION_KEY,
+          Genie.Router.params!(:session,
                                 Stipple.ModelStorage.Sessions.GenieSession.load(payload["sesstoken"] |> Genie.Encryption.decrypt))
       catch ex
         @error ex

From 47d2e74bd25c2bcfe3f06fe2bb68edb7846beb9d Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Thu, 7 Sep 2023 11:23:40 +0200
Subject: [PATCH 039/265] fix handlers bug for mixins (#220)

---
 src/ReactiveTools.jl | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 9fe4b4e6..6de8a226 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -488,10 +488,11 @@ macro mixin(expr, prefix = "", postfix = "")
 
   storage = init_storage(__module__)
 
-  quote
-    Stipple.ReactiveTools.update_storage($__module__)
+  Stipple.ReactiveTools.update_storage(__module__)
+  Core.eval(__module__, quote
     Stipple.ReactiveTools.@mixin $storage $expr $prefix $postfix
-  end
+  end)
+  quote end
 end
 
 macro mixin(location, expr, prefix, postfix)

From 2b8d1d75fc5f700078bc76edb554923710a09e23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pere=20Gim=C3=A9nez?= <gimenezfebrer@gmail.com>
Date: Thu, 7 Sep 2023 12:05:21 +0200
Subject: [PATCH 040/265] set version v0.27.4

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 5221bc00..936ab064 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.3"
+version = "0.27.4"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From e68ea9b82c930e7f4094d1750e59f057ce93026e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 7 Sep 2023 16:59:46 +0200
Subject: [PATCH 041/265] fix class kwarg for row(), column() and cell()

---
 src/Layout.jl | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 1474b661..6556cab8 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -142,9 +142,11 @@ julia> row(span("Hello"))
 function row(args...; 
   size::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...)
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  class = "", kwargs...)
 
-  kwargs = flexgrid_kwargs(; class = "row", size, xs, sm, md, lg, xl)
+  class = join(pushfirst!(split(class), "row"), " ")
+  kwargs = flexgrid_kwargs(; class, size, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -168,9 +170,10 @@ function column(args...;
   size::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  kwargs...)
+  class = "", kwargs...)
 
-  kwargs = flexgrid_kwargs(; class = "column", size, xs, sm, md, lg, xl)
+  class = join(pushfirst!(split(class), "column"), " ")
+  kwargs = flexgrid_kwargs(; class, size, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -206,10 +209,10 @@ julia> row(cell(size = 2, md = 6, sm = 12, span("Hello")))
 function cell(args...;
   size::Union{Int,AbstractString,Symbol,Nothing} = 0,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, class = "", kwargs...
 )
-
-  kwargs = flexgrid_kwargs(; class = "st-col", size, xs, sm, md, lg, xl)
+  class = join(pushfirst!(split(class), "st-col"), " ")
+  kwargs = flexgrid_kwargs(; class, size, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end

From 33171bd75e7f4915ec190ed8f83805d8f134d4a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 7 Sep 2023 17:00:24 +0200
Subject: [PATCH 042/265] set version v0.27.5

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 936ab064..53fe86cd 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.4"
+version = "0.27.5"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From e1a11f2d0d67d84b5e78a3949b8e2938c5dc7519 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 8 Sep 2023 16:30:05 +0200
Subject: [PATCH 043/265] support kwargs in `@page` macro

---
 src/ReactiveTools.jl | 32 +++++++++---------------
 src/Stipple.jl       |  1 +
 src/Tools.jl         | 58 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 src/Tools.jl

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 6de8a226..f6c46c50 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -922,24 +922,6 @@ end
 
 #===#
 
-macro page(url, view, layout, model, context)
-  quote
-    Stipple.Pages.Page( $url;
-                        view = $view,
-                        layout = $layout,
-                        model = $model,
-                        context = $context)
-  end |> esc
-end
-
-macro page(url, view, layout, model)
-  :(@page($url, $view, $layout, $model, $__module__)) |> esc
-end
-
-macro page(url, view, layout)
-  :(@page($url, $view, $layout, () -> @eval($__module__, @init()))) |> esc
-end
-
 """
 ```julia
 @page(url, view)
@@ -952,8 +934,18 @@ Registers a new page with source in `view` to be rendered at the route `url`.
 @page("/", "view.html")
 ```
 """
-macro page(url, view)
-  :(@page($url, $view, Stipple.ReactiveTools.DEFAULT_LAYOUT())) |> esc
+macro page(url, view, expressions...)
+    args = Stipple.expressions_to_args(
+        expressions; 
+        args_to_kwargs = [:layout, :model, :context],
+        defaults = Dict(
+            :layout => Stipple.ReactiveTools.DEFAULT_LAYOUT(),
+            :context => __module__,
+            :model => () -> @eval(__module__, @init())
+        )
+    )
+
+    :(Stipple.Pages.Page($url; view = $view, $(args...))) |> esc
 end
 
 for f in (:methods, :watch, :computed)
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 62f5af07..1f9ac9b7 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -191,6 +191,7 @@ function setmode! end
 function deletemode! end
 function init_storage end
 
+include("Tools.jl")
 include("ReactiveTools.jl")
 
 #===#
diff --git a/src/Tools.jl b/src/Tools.jl
new file mode 100644
index 00000000..5ccfe535
--- /dev/null
+++ b/src/Tools.jl
@@ -0,0 +1,58 @@
+"""
+    expressions_to_args(@nospecialize(expressions); args_to_kwargs::Vector{Symbol} = [], defaults::AbstractDict{Symbol} = Dict())
+
+Convert macro arguments (expressions) to arguments that can be passed to a function, including keyword arguments
+    - kwargs are automatically converted
+    - positional args can be converted to kwargs in a given order (`args_to_kwargs`)
+    - default values for expected kwargs can be defined `defaults`
+
+Example
+```
+f(args...; kwargs...) = [args, Dict(kwargs)]
+
+macro f(expressions...)
+    args = expressions_to_args(expressions)
+    :(f(\$(args...))) |> esc
+end
+
+@f(1, [2, 3], a = 4, "567")
+# 2-element Vector{Any}:
+#  (1, [2, 3], "567")
+#  Dict(:a => 4)
+```
+"""
+function expressions_to_args(@nospecialize(expressions); args_to_kwargs::Vector{Symbol} = Symbol[], defaults::AbstractDict{Symbol} = Dict{Symbol, Any}())
+    keys = Symbol[]
+    inds = Int[]
+
+    expressions isa Tuple && (expressions = Any[expressions...])
+    # convert assignment expressions to keyword argument expressions
+    # and collect the indices of positional arguments
+    for (i, ex) in enumerate(expressions)
+        if ex isa Expr && ex.head == :(=)
+            ex.head = :kw
+            push!(keys, ex.args[1])
+        else
+            push!(inds, i)
+        end
+    end
+
+    # collect positional args and convert them to kwargs according to the symbols in 'args_to_kwargs'
+    # if they are not contained in the list of kwargs already and delete them from the list of positional args
+    for (i, kwarg) in zip(inds, args_to_kwargs)
+        if kwarg ∉ keys
+            push!(expressions, :($(Expr(:kw, kwarg, expressions[i]))))
+            push!(keys, kwarg)
+        end
+    end
+    deleteat!(expressions, inds[1:min(length(args_to_kwargs), length(inds))])
+
+    # apply default values for kwargs if there are any
+    for kwarg in Base.keys(defaults)
+        if kwarg ∉ keys
+            push!(expressions, :($(Expr(:kw, kwarg, defaults[kwarg]))))
+        end
+    end
+
+    return expressions
+end

From 0ab777067f220848652e35014b89c6e09047cfac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sat, 9 Sep 2023 00:10:15 +0200
Subject: [PATCH 044/265] forward init-kwargs `debounce`, `transport` and
 `core_theme` from `Page()`, `@page` and `@init` to `initfn()`

---
 src/Pages.jl         |  5 ++++-
 src/ReactiveTools.jl | 53 +++++++++++++++++++++++++++++++++++---------
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/src/Pages.jl b/src/Pages.jl
index c6908b71..7a4c9ff5 100644
--- a/src/Pages.jl
+++ b/src/Pages.jl
@@ -32,6 +32,9 @@ function Page(  route::Union{Route,String};
                 model::Union{M,Function,Nothing,Expr,Module} = Stipple.init(EmptyModel),
                 layout::Union{Genie.Renderers.FilePath,<:AbstractString,ParsedHTMLString,Nothing,Function} = nothing,
                 context::Module = @__MODULE__,
+                debounce::Int = Stipple.JS_DEBOUNCE_TIME,
+                transport::Module = Genie.WebChannels,
+                core_theme::Bool = true,
                 kwargs...
               ) where {M<:ReactiveModel}
 
@@ -39,7 +42,7 @@ function Page(  route::Union{Route,String};
             Core.eval(context, model)
           elseif isa(model, Module)
             context = model
-            @eval(context, @init())
+            @eval(context, @init(debounce = debounce, transport = transport, core_theme = core_theme))
           else
             model
           end
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index f6c46c50..beac94f4 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -521,7 +521,44 @@ function init_handlers(m::Module)
   get!(Vector{Expr}, HANDLERS, m)
 end
 
-macro init(modeltype)
+"""
+        @init(kwargs...)
+
+Create a new app with the following kwargs supported:
+- `debounce::Int = JS_DEBOUNCE_TIME`
+- `transport::Module = Genie.WebChannels`
+- `core_theme::Bool = true`
+
+### Example
+```
+@app begin
+  @in n = 10
+  @out s = "Hello"
+end
+
+model = @init(debounce = 50)
+```
+------------
+
+        @init(App, kwargs...)
+
+Create a new app of type `App` with the same kwargs as above
+
+### Example
+
+```
+@app MyApp begin
+  @in n = 10
+  @out s = "Hello"
+end
+
+model = @init(MyApp, debounce = 50)
+```
+"""
+macro init(args...)
+  called_without_type = length(args) == 0 || args[1] isa Expr && args[1].head == :(=)
+  init_args = Stipple.expressions_to_args(args)
+  called_without_type && pushfirst!(init_args, :(Stipple.@type()))
   quote
     local new_handlers = false
     local initfn =  if isdefined($__module__, :init_from_storage)
@@ -538,8 +575,10 @@ macro init(modeltype)
                         else
                           identity
                         end
-
-    instance = new_handlers ? Base.invokelatest(handlersfn, $modeltype |> initfn) : $modeltype |> initfn |> handlersfn
+                        
+    let model = initfn($(init_args...))
+      instance = new_handlers ? Base.invokelatest(handlersfn, model) : handlersfn(model)
+    end
     for p in Stipple.Pages._pages
       p.context == $__module__ && (p.model = instance)
     end
@@ -547,14 +586,6 @@ macro init(modeltype)
   end |> esc
 end
 
-macro init()
-  quote
-    let type = Stipple.@type
-      Stipple.ReactiveTools.@init(type)
-    end
-  end |> esc
-end
-
 macro handlers()
   handlers = init_handlers(__module__)
 

From f7805523cc2d9a266ec290b78fe1e99f47c53b5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sat, 9 Sep 2023 00:10:32 +0200
Subject: [PATCH 045/265] add `clear_cache()` and `@clear_cache`

---
 src/ReactiveTools.jl      |  5 +++++
 src/stipple/reactivity.jl | 12 +++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index beac94f4..4f4efca2 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -252,6 +252,11 @@ macro type()
   esc(:($type))
 end
 
+import Stipple.@clear_cache
+macro clear_cache()
+  :(Stipple.clear_cache(Stipple.@type)) |> esc
+end
+
 function update_storage(m::Module)
   clear_type(m)
   # isempty(Stipple.Pages._pages) && return
diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index 8bb87239..c981137e 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -122,7 +122,7 @@ end
 """
 abstract type ReactiveModel end
 
-export @vars, @add_vars, @define_mixin
+export @vars, @add_vars, @define_mixin, @clear_cache, clear_cache
 
 # deprecated
 export @reactive, @reactive!, @old_reactive, @old_reactive!
@@ -339,6 +339,16 @@ macro var_storage(expr, new_inputmode = :auto)
     esc(:($storage))
 end
 
+function clear_cache(M::Type{<:ReactiveModel})
+  delete!.(Ref(Stipple.DEPS), filter(x -> x isa Type && x <: M, keys(Stipple.DEPS)))
+  Stipple.Genie.Router.delete!(Symbol(Stipple.routename(M)))
+  return nothing
+end
+
+macro clear_cache(App)
+  :(Stipple.clear_cache($(esc(App))))
+end
+
 macro type(modelname, storage)
   modelname isa DataType && (modelname = modelname.name.name)
   modelconst = Symbol(modelname, '!')

From 9417d51c6325e2924b9f9ad0fdf64fe0cbcf2d7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sat, 9 Sep 2023 00:31:16 +0200
Subject: [PATCH 046/265] add `clear_route()` and `@clear_route`

---
 src/ReactiveTools.jl      |  9 +++++++--
 src/stipple/reactivity.jl | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 4f4efca2..6de161d0 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -257,6 +257,11 @@ macro clear_cache()
   :(Stipple.clear_cache(Stipple.@type)) |> esc
 end
 
+import Stipple.@clear_route
+macro clear_route()
+  :(Stipple.clear_route(Stipple.@type)) |> esc
+end
+
 function update_storage(m::Module)
   clear_type(m)
   # isempty(Stipple.Pages._pages) && return
@@ -581,8 +586,8 @@ macro init(args...)
                           identity
                         end
                         
-    let model = initfn($(init_args...))
-      instance = new_handlers ? Base.invokelatest(handlersfn, model) : handlersfn(model)
+    instance = let model = initfn($(init_args...))
+      new_handlers ? Base.invokelatest(handlersfn, model) : handlersfn(model)
     end
     for p in Stipple.Pages._pages
       p.context == $__module__ && (p.model = instance)
diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index c981137e..00901bc6 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -339,9 +339,20 @@ macro var_storage(expr, new_inputmode = :auto)
     esc(:($storage))
 end
 
+Stipple.Genie.Router.delete!(M::Type{<:ReactiveModel}) = Stipple.Genie.Router.delete!(Symbol(Stipple.routename(M)))
+
+function clear_route(M::Type{<:ReactiveModel})
+  Stipple.Genie.Router.delete!(M)
+  return nothing
+end
+
+macro clear_route(App)
+  :(Stipple.clear_route($(esc(App))))
+end
+
 function clear_cache(M::Type{<:ReactiveModel})
   delete!.(Ref(Stipple.DEPS), filter(x -> x isa Type && x <: M, keys(Stipple.DEPS)))
-  Stipple.Genie.Router.delete!(Symbol(Stipple.routename(M)))
+  Stipple.Genie.Router.delete!(M)
   return nothing
 end
 

From 3e8b9f385190fb81fbf01411181cdb95833086da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sat, 9 Sep 2023 00:38:18 +0200
Subject: [PATCH 047/265] export `clear_route()` and `@clear_route`

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

diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index 00901bc6..f8c84d3b 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -122,7 +122,7 @@ end
 """
 abstract type ReactiveModel end
 
-export @vars, @add_vars, @define_mixin, @clear_cache, clear_cache
+export @vars, @add_vars, @define_mixin, @clear_cache, clear_cache, @clear_route, clear_route
 
 # deprecated
 export @reactive, @reactive!, @old_reactive, @old_reactive!

From d1f993c190c45f435d10a676839aff4398b3f566 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sat, 9 Sep 2023 09:02:46 +0200
Subject: [PATCH 048/265] support semicolon parameter syntax in macros `@init`
 and `@page`

---
 src/ReactiveTools.jl | 24 ++++++++++++++++++------
 src/Tools.jl         | 14 +++++++++++---
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 6de161d0..e3ee0615 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -566,9 +566,15 @@ model = @init(MyApp, debounce = 50)
 ```
 """
 macro init(args...)
-  called_without_type = length(args) == 0 || args[1] isa Expr && args[1].head == :(=)
   init_args = Stipple.expressions_to_args(args)
-  called_without_type && pushfirst!(init_args, :(Stipple.@type()))
+
+  called_with_params = length(args) > 0 && args[1] isa Expr && args[1].head == :parameters
+  called_without_type = isnothing(findfirst(x -> !isa(x, Expr) || x.head ∉ (:kw, :parameters), init_args))
+  
+  if called_without_type
+    called_with_params ? insert!(init_args, 2, :(Stipple.@type())) : pushfirst!(init_args, :(Stipple.@type()))
+  end
+  
   quote
     local new_handlers = false
     local initfn =  if isdefined($__module__, :init_from_storage)
@@ -975,9 +981,15 @@ Registers a new page with source in `view` to be rendered at the route `url`.
 @page("/", "view.html")
 ```
 """
-macro page(url, view, expressions...)
+macro page(expressions...)
+    # for macros to support semicolon parameter syntax it's required to have no positional arguments in the definition
+    # therefore find indexes of positional arguments by hand
+    inds = findall(x -> !isa(x, Expr) || x.head ∉ (:parameters, :kw), expressions)
+    length(inds) < 2 && throw("Positional arguments 'url' and 'view' required!")
+    url, view = expressions[inds[1:2]]
+    kwarg_inds = setdiff(1:length(expressions), inds)
     args = Stipple.expressions_to_args(
-        expressions; 
+        expressions[kwarg_inds]; 
         args_to_kwargs = [:layout, :model, :context],
         defaults = Dict(
             :layout => Stipple.ReactiveTools.DEFAULT_LAYOUT(),
@@ -985,8 +997,8 @@ macro page(url, view, expressions...)
             :model => () -> @eval(__module__, @init())
         )
     )
-
-    :(Stipple.Pages.Page($url; view = $view, $(args...))) |> esc
+@show args
+    :(Stipple.Pages.Page($(args...), $url, view = $view)) |> esc
 end
 
 for f in (:methods, :watch, :computed)
diff --git a/src/Tools.jl b/src/Tools.jl
index 5ccfe535..6310cac5 100644
--- a/src/Tools.jl
+++ b/src/Tools.jl
@@ -26,22 +26,30 @@ function expressions_to_args(@nospecialize(expressions); args_to_kwargs::Vector{
     inds = Int[]
 
     expressions isa Tuple && (expressions = Any[expressions...])
+
     # convert assignment expressions to keyword argument expressions
     # and collect the indices of positional arguments
     for (i, ex) in enumerate(expressions)
         if ex isa Expr && ex.head == :(=)
             ex.head = :kw
             push!(keys, ex.args[1])
-        else
+        elseif ex.head != :parameters
             push!(inds, i)
         end
     end
 
+    # loop through parameters after semicolon
+    if length(expressions) > 0 && expressions[1] isa Expr && expressions[1].head == :parameters
+        for ex in expressions[1].args
+            push!(keys, ex isa Symbol ? ex : ex.args[1])
+        end
+    end
+
     # collect positional args and convert them to kwargs according to the symbols in 'args_to_kwargs'
     # if they are not contained in the list of kwargs already and delete them from the list of positional args
-    for (i, kwarg) in zip(inds, args_to_kwargs)
+    for (ind, kwarg) in zip(inds, args_to_kwargs)
         if kwarg ∉ keys
-            push!(expressions, :($(Expr(:kw, kwarg, expressions[i]))))
+            push!(expressions, :($(Expr(:kw, kwarg, expressions[ind]))))
             push!(keys, kwarg)
         end
     end

From 143db041905fd54df305d4d09ebf6b08d5feae9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sat, 9 Sep 2023 22:43:10 +0200
Subject: [PATCH 049/265] support generic modeltypes in `@page`, add
 `@modelstorage` to switch on model storage

---
 src/Pages.jl         |  6 ++++--
 src/ReactiveTools.jl | 12 +++++++++---
 src/Tools.jl         |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/Pages.jl b/src/Pages.jl
index 7a4c9ff5..ddfe7785 100644
--- a/src/Pages.jl
+++ b/src/Pages.jl
@@ -29,7 +29,7 @@ pages() = _pages
 
 function Page(  route::Union{Route,String};
                 view::Union{Genie.Renderers.FilePath,<:AbstractString,ParsedHTMLString,Vector{<:AbstractString},Function},
-                model::Union{M,Function,Nothing,Expr,Module} = Stipple.init(EmptyModel),
+                model::Union{M,Function,Nothing,Expr,Module,Type{M}} = Stipple.init(EmptyModel),
                 layout::Union{Genie.Renderers.FilePath,<:AbstractString,ParsedHTMLString,Nothing,Function} = nothing,
                 context::Module = @__MODULE__,
                 debounce::Int = Stipple.JS_DEBOUNCE_TIME,
@@ -42,7 +42,9 @@ function Page(  route::Union{Route,String};
             Core.eval(context, model)
           elseif isa(model, Module)
             context = model
-            @eval(context, @init(debounce = debounce, transport = transport, core_theme = core_theme))
+            @eval(context, Stipple.ReactiveTools.@init(debounce = $debounce, transport = $transport, core_theme = $core_theme))
+          elseif model isa DataType
+            @eval(context, Stipple.ReactiveTools.@init($model; debounce = $debounce, transport = $transport, core_theme = $core_theme))
           else
             model
           end
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index e3ee0615..b15581f4 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -17,7 +17,7 @@ export @onchange, @onbutton, @event, @notify
 export @clear, @clear_vars, @clear_handlers
 
 # app handling
-export @page, @init, @handlers, @app, @appname
+export @page, @init, @handlers, @app, @appname, @modelstorage
 
 # js functions on the front-end (see Vue.js docs)
 export @methods, @watch, @computed, @client_data, @add_client_data
@@ -591,7 +591,7 @@ macro init(args...)
                         else
                           identity
                         end
-                        
+    
     instance = let model = initfn($(init_args...))
       new_handlers ? Base.invokelatest(handlersfn, model) : handlersfn(model)
     end
@@ -997,7 +997,7 @@ macro page(expressions...)
             :model => () -> @eval(__module__, @init())
         )
     )
-@show args
+
     :(Stipple.Pages.Page($(args...), $url, view = $view)) |> esc
 end
 
@@ -1257,4 +1257,10 @@ macro notify(args...)
   end |> esc
 end
 
+macro modelstorage()
+  quote
+    using Stipple.ModelStorage.Sessions
+  end |> esc
+end
+
 end
diff --git a/src/Tools.jl b/src/Tools.jl
index 6310cac5..3f720def 100644
--- a/src/Tools.jl
+++ b/src/Tools.jl
@@ -33,7 +33,7 @@ function expressions_to_args(@nospecialize(expressions); args_to_kwargs::Vector{
         if ex isa Expr && ex.head == :(=)
             ex.head = :kw
             push!(keys, ex.args[1])
-        elseif ex.head != :parameters
+        elseif !isa(ex, Expr) || ex.head != :parameters
             push!(inds, i)
         end
     end

From 09b3caff0b74d24748cba6aafafd36bcdd2c4895 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 10 Sep 2023 03:00:35 +0200
Subject: [PATCH 050/265] forward init_args for auto init functions and support
 user-dependent models for generic modeltypes; minor fixes

---
 src/ReactiveTools.jl | 38 +++++++++++++++++++++++++++++++-------
 src/Tools.jl         | 41 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index b15581f4..3da99f12 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -33,6 +33,8 @@ const REACTIVE_STORAGE = LittleDict{Module,LittleDict{Symbol,Expr}}()
 const HANDLERS = LittleDict{Module,Vector{Expr}}()
 const TYPES = LittleDict{Module,Union{<:DataType,Nothing}}()
 
+const HANDLERS_FUNCTIONS = LittleDict{Type{<:ReactiveModel},Function}()
+
 function DEFAULT_LAYOUT(; title::String = "Genie App", meta::Dict{<:AbstractString,<:AbstractString} = Dict("og:title" => "Genie App"))
   tags = Genie.Renderers.Html.for_each(x -> """<meta name="$(x.first)" content="$(x.second)">\n    """, meta)
   """
@@ -568,11 +570,11 @@ model = @init(MyApp, debounce = 50)
 macro init(args...)
   init_args = Stipple.expressions_to_args(args)
 
-  called_with_params = length(args) > 0 && args[1] isa Expr && args[1].head == :parameters
-  called_without_type = isnothing(findfirst(x -> !isa(x, Expr) || x.head ∉ (:kw, :parameters), init_args))
+  type_pos = findfirst(x -> !isa(x, Expr) || x.head ∉ (:kw, :parameters), init_args)
+  called_without_type = isnothing(type_pos)
   
   if called_without_type
-    called_with_params ? insert!(init_args, 2, :(Stipple.@type())) : pushfirst!(init_args, :(Stipple.@type()))
+    insert!(init_args, Stipple.has_parameters(init_args) ? 2 : 1, :(Stipple.@type()))
   end
   
   quote
@@ -582,7 +584,9 @@ macro init(args...)
                     else
                       Stipple.init
                     end
-    local handlersfn =  if isdefined($__module__, :__GF_AUTO_HANDLERS__)
+    local handlersfn =  if !$called_without_type
+                          Stipple.ReactiveTools.HANDLERS_FUNCTIONS[@eval($__module__, $(init_args[type_pos]))]
+                        elseif isdefined($__module__, :__GF_AUTO_HANDLERS__)
                           if length(methods($__module__.__GF_AUTO_HANDLERS__)) == 0
                             @eval(@handlers())
                             new_handlers = true
@@ -630,7 +634,10 @@ macro app(typename, expr, handlers_fn_name = :handlers)
   # (avoids model_to_storage)
   newtypename = Symbol(typename, "_!_")
   quote
-    Stipple.ReactiveTools.@handlers $newtypename $expr $handlers_fn_name
+    let model = Stipple.ReactiveTools.@handlers $newtypename $expr $handlers_fn_name
+      Stipple.ReactiveTools.HANDLERS_FUNCTIONS[$typename] = $handlers_fn_name
+      model
+    end
   end |> esc
 end
 
@@ -984,7 +991,7 @@ Registers a new page with source in `view` to be rendered at the route `url`.
 macro page(expressions...)
     # for macros to support semicolon parameter syntax it's required to have no positional arguments in the definition
     # therefore find indexes of positional arguments by hand
-    inds = findall(x -> !isa(x, Expr) || x.head ∉ (:parameters, :kw), expressions)
+    inds = findall(x -> !isa(x, Expr) || x.head ∉ (:parameters, :(=)), expressions)
     length(inds) < 2 && throw("Positional arguments 'url' and 'view' required!")
     url, view = expressions[inds[1:2]]
     kwarg_inds = setdiff(1:length(expressions), inds)
@@ -994,9 +1001,26 @@ macro page(expressions...)
         defaults = Dict(
             :layout => Stipple.ReactiveTools.DEFAULT_LAYOUT(),
             :context => __module__,
-            :model => () -> @eval(__module__, @init())
+            :model => nothing 
         )
     )
+    model_parent, model_ind, model_expr = Stipple.locate_kwarg(args, :model)
+    model = @eval(__module__, $model_expr)
+
+    if model === nothing || model isa DataType && model <: ReactiveModel
+      # remove all other kwargs that are not meant for `@init`
+      init_kwargs = Stipple.delete_kwargs(args, [:layout, :model, :context])
+
+      # add the type if model is a modeltype
+      if model !== nothing
+          insert!(init_kwargs, Stipple.has_parameters(init_kwargs) ? 2 : 1, model_expr)
+      end
+      
+      # modify the entry of the :model keyword by an init function with respective init_kwargs
+      model_parent[model_ind] = :($(Expr(:kw, :model, () -> @eval(__module__, @init($(init_kwargs...))))))
+    else
+      nothing
+    end
 
     :(Stipple.Pages.Page($(args...), $url, view = $view)) |> esc
 end
diff --git a/src/Tools.jl b/src/Tools.jl
index 3f720def..83a930f2 100644
--- a/src/Tools.jl
+++ b/src/Tools.jl
@@ -1,3 +1,7 @@
+function has_parameters(expressions::Union{Vector, Tuple})
+    length(expressions) > 0 && expressions[1] isa Expr && expressions[1].head == :parameters
+end
+
 """
     expressions_to_args(@nospecialize(expressions); args_to_kwargs::Vector{Symbol} = [], defaults::AbstractDict{Symbol} = Dict())
 
@@ -39,7 +43,7 @@ function expressions_to_args(@nospecialize(expressions); args_to_kwargs::Vector{
     end
 
     # loop through parameters after semicolon
-    if length(expressions) > 0 && expressions[1] isa Expr && expressions[1].head == :parameters
+    if has_parameters(expressions)
         for ex in expressions[1].args
             push!(keys, ex isa Symbol ? ex : ex.args[1])
         end
@@ -64,3 +68,38 @@ function expressions_to_args(@nospecialize(expressions); args_to_kwargs::Vector{
 
     return expressions
 end
+
+function locate_kwarg(expressions, kwarg::Symbol)
+    ind = findfirst(x -> x isa Expr && x.head == :kw && x.args[1] == kwarg, expressions)
+    parent = if ind === nothing
+      # if not found look in the parameters, which reside at the first position of 'args'
+      ind = findfirst(x -> x == kwarg || x isa Expr && x.head == :kw && x.args[1] == kwarg, expressions[1].args)
+      expressions[1].args
+    else
+      expressions
+    end
+    expr = parent[ind] == kwarg ? kwarg : parent[ind].args[2]
+
+    parent, ind, expr
+end
+
+function delete_kwarg!(expressions, kwarg::Symbol)
+    parent, ind = locate_kwarg(expressions, kwarg)
+    if parent === expressions || parent !== expressions && length(parent) > 1
+        deleteat!(parent, ind)
+    else
+        deleteat!(expressions, 1)
+    end
+    
+    return expressions
+end
+
+function delete_kwargs!(expressions, kwargs::Vector{Symbol})
+    for kw in kwargs
+        delete_kwarg!(expressions, kw)
+    end
+    return expressions
+end
+
+delete_kwarg(expressions, kwarg::Symbol) = delete_kwarg!(Any[copy(x) for x in expressions], kwarg)
+delete_kwargs(expressions, kwarg::Vector{Symbol}) = delete_kwargs!(Any[copy(x) for x in expressions], kwarg)
\ No newline at end of file

From c7a5d75444683b5a0bbad53bfd7ece0b05ccf98d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 10 Sep 2023 11:21:44 +0200
Subject: [PATCH 051/265] work around pre-evaluation error

---
 src/ReactiveTools.jl | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 3da99f12..c59c25f6 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -574,28 +574,33 @@ macro init(args...)
   called_without_type = isnothing(type_pos)
   
   if called_without_type
+    type_pos = 0 # to prevent erroring in definition of 'handlersfn'
     insert!(init_args, Stipple.has_parameters(init_args) ? 2 : 1, :(Stipple.@type()))
   end
   
   quote
     local new_handlers = false
     local initfn =  if isdefined($__module__, :init_from_storage)
-                      $__module__.init_from_storage
-                    else
-                      Stipple.init
-                    end
+      $__module__.init_from_storage
+    else
+      Stipple.init
+    end
     local handlersfn =  if !$called_without_type
-                          Stipple.ReactiveTools.HANDLERS_FUNCTIONS[@eval($__module__, $(init_args[type_pos]))]
-                        elseif isdefined($__module__, :__GF_AUTO_HANDLERS__)
-                          if length(methods($__module__.__GF_AUTO_HANDLERS__)) == 0
-                            @eval(@handlers())
-                            new_handlers = true
-                          end
-                          $__module__.__GF_AUTO_HANDLERS__
-                        else
-                          identity
-                        end
-    
+      # writing '$(init_kwargs[type_pos])' generates an error during a pre-evaluation
+      # possibly from Revise?
+      # we use 'get' instead of 'getindex'
+      Stipple.ReactiveTools.HANDLERS_FUNCTIONS[$(get(init_args, type_pos, "dummy"))]
+    else
+      if isdefined($__module__, :__GF_AUTO_HANDLERS__)
+        if length(methods($__module__.__GF_AUTO_HANDLERS__)) == 0
+          @eval(@handlers())
+          new_handlers = true
+        end
+        $__module__.__GF_AUTO_HANDLERS__
+      else
+        identity
+      end
+    end
     instance = let model = initfn($(init_args...))
       new_handlers ? Base.invokelatest(handlersfn, model) : handlersfn(model)
     end

From 8f27aa73d8dc272513d16a73031b71d5eb226675 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 11 Sep 2023 17:10:23 +0200
Subject: [PATCH 052/265] add iskwarg(), minor rewrite of Tools.jl

---
 src/Tools.jl | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/Tools.jl b/src/Tools.jl
index 83a930f2..b4be22c8 100644
--- a/src/Tools.jl
+++ b/src/Tools.jl
@@ -1,5 +1,9 @@
 function has_parameters(expressions::Union{Vector, Tuple})
-    length(expressions) > 0 && expressions[1] isa Expr && expressions[1].head == :parameters
+    length(expressions) > 0 && Meta.isexpr(expressions[1], :parameters)
+end
+
+function iskwarg(x, kwarg::Union{Symbol, Nothing} = nothing)
+    x isa Expr && x.head == :kw && (kwarg === nothing || x.args[1] == kwarg)
 end
 
 """
@@ -70,10 +74,10 @@ function expressions_to_args(@nospecialize(expressions); args_to_kwargs::Vector{
 end
 
 function locate_kwarg(expressions, kwarg::Symbol)
-    ind = findfirst(x -> x isa Expr && x.head == :kw && x.args[1] == kwarg, expressions)
+    ind = findfirst(x -> iskwarg(x, kwarg), expressions)
     parent = if ind === nothing
       # if not found look in the parameters, which reside at the first position of 'args'
-      ind = findfirst(x -> x == kwarg || x isa Expr && x.head == :kw && x.args[1] == kwarg, expressions[1].args)
+      ind = findfirst(x -> x == kwarg || iskwarg(x, kwarg), expressions[1].args)
       expressions[1].args
     else
       expressions

From 2d9b3ed311389e4da774b37ebe71404e23aa34fa Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 11 Sep 2023 17:10:32 +0200
Subject: [PATCH 053/265]  server tests

---
 test/runtests.jl | 148 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 144 insertions(+), 4 deletions(-)

diff --git a/test/runtests.jl b/test/runtests.jl
index 92e9ad64..f9cf1251 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -1,6 +1,21 @@
 using Stipple
+using Stipple.Genie.HTTPUtils.HTTP
+
 using Test
 
+function string_get(x)
+    String(HTTP.get(x, retries = 0, status_exception = false).body)
+end
+
+function get_channel(s::String)
+    match(r"window.CHANNEL = '([^']+)'", s).captures[1]
+end
+
+function get_debounce(port, modelname)
+    s = string_get("http://localhost:$port/stipple.jl/master/assets/js/$modelname.js")
+    parse(Int, match(r"_.debounce\(.+?(\d+)\)", s).captures[1])
+end
+
 @vars TestMixin begin
     j = 101
     t = "World", PRIVATE
@@ -81,18 +96,26 @@ using Stipple.ReactiveTools
     @test model.s[] == "20"
 end
 
-@testset "Reactive API (explicit) with mixins" begin
-    @app TestApp begin
+@testset "Reactive API (explicit) with mixins and handlers" begin
+    @eval @app TestApp begin
         @in i = 100
         @out s = "Hello"
     
         @mixin TestMixin
         @mixin mixin_::TestMixin
         @mixin TestMixin "pre_" "_post"
+
+        @onchange i begin
+            s = "$i"
+        end
     end
 
-    model = TestApp |> init |> handlers
+    @eval model = TestApp |> init |> handlers
     @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i, :s, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
+        
+    # check reactivity
+    @eval model.i[] = 20
+    @test model.s[] == "20"
 end
 
 @testset "Reactive API (implicit)" begin
@@ -119,7 +142,7 @@ end
     @test model.s2[] == "20"
 end
 
-@testset "Reactive API (implicit) with mixins" begin
+@testset "Reactive API (implicit) with mixins and handlers" begin
     @eval @app begin
         @in i3 = 100
         @out s3 = "Hello"
@@ -127,10 +150,17 @@ end
         @mixin TestMixin
         @mixin mixin_::TestMixin
         @mixin TestMixin "pre_" "_post"
+
+        @onchange i3 begin
+            s3 = "$i3"
+        end
     end
 
     @eval model = @init
     @eval @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i3, :s3, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
+
+    @eval model.i3[] = 20
+    @test model.s3[] == "20"
 end
 
 using DataFrames
@@ -162,4 +192,114 @@ end
     
     mt = Tables.table([1 2; 3 4])
     @test render(mt) == OrderedDict(:Column1 => [1, 3], :Column2 => [2, 4])
+end
+
+# Basic server tests (should be enhanced over time perhaps...)
+
+@testset "Serving implicit app" begin
+    @eval begin
+        @app begin
+            @in i3 = 100
+            @out s3 = "Hello"
+
+            @onchange i3 begin
+                s3 = "$i3"
+            end
+        end
+    
+        ui() = "DEMO UI"
+        debounce = 10
+
+        @page("/", ui)
+        @page("/nolayout", ui, layout = "no layout")
+        @page("/debounce", ui, debounce = 50)
+        @page("/debounce2", ui; debounce)
+        @page("/static", ui; model)
+    end
+    
+    port = rand(8001:9000)
+    up(;port, ws_port = port)
+
+    @test occursin("<p>DEMO UI</p>", string_get("http://localhost:$port"))
+
+    @test string_get("http://localhost:$port/nolayout") == "<!DOCTYPE html><html>\n  <body>\n    <p>no layout</p>\n  </body></html>"
+    
+    @test get_debounce(port, "main_reactivemodel") == 300
+    
+    @clear_cache
+    # first get the main page to trigger init function, which sets up the assets
+    string_get("http://localhost:$port/debounce")
+    @test get_debounce(port, "main_reactivemodel") == 50
+
+    @clear_cache
+    string_get("http://localhost:$port/debounce2")
+    @test get_debounce(port, "main_reactivemodel") == 10
+
+    s1 = string_get("http://localhost:$port/")
+    s2 = string_get("http://localhost:$port/")
+
+    s3 = string_get("http://localhost:$port/static")
+    s4 = string_get("http://localhost:$port/static")
+
+    @test get_channel(s2) != get_channel(s1)
+    @test get_channel(s3) == get_channel(s4)
+
+    @clear_cache
+    down()
+end
+
+@testset "Serving explicit app" begin
+    @eval begin
+        @app MyApp begin
+            @in i3 = 100
+            @out s3 = "Hello"
+    
+            @onchange i3 begin
+                s3 = "$i3"
+            end
+        end
+    
+        ui() = "DEMO UI explicit"
+        debounce = 11
+        # @eval model = @init(MyApp)
+    end
+    
+    @eval begin
+        @page("/", ui; model = MyApp)
+        @page("/nolayout", ui, layout = "no layout (explicit)", model = MyApp)
+        @page("/debounce", ui, debounce = 51; model = MyApp)
+        @page("/debounce2", ui; debounce, model = MyApp)
+        @page("/static1", ui; model)
+    end
+    
+    port = rand(8001:9000)
+    up(;port, ws_port = port)
+    
+    @clear_cache MyApp
+    @test occursin("<p>DEMO UI explicit</p>", string_get("http://localhost:$port"))
+    
+    @test string_get("http://localhost:$port/nolayout") == "<!DOCTYPE html><html>\n  <body>\n    <p>no layout (explicit)</p>\n  </body></html>"
+    
+    @test get_debounce(port, "myapp") == 300
+    
+    @clear_cache MyApp
+    # first get the main page to trigger init function, which sets up the assets
+    string_get("http://localhost:$port/debounce")
+    @test get_debounce(port, "myapp") == 51
+    
+    @clear_cache MyApp
+    string_get("http://localhost:$port/debounce2")
+    @test get_debounce(port, "myapp") == 11
+    
+    s1 = string_get("http://localhost:$port/")
+    s2 = string_get("http://localhost:$port/")
+
+    s3 = string_get("http://localhost:$port/static1")
+    s4 = string_get("http://localhost:$port/static1")
+
+    @test get_channel(s2) != get_channel(s1)
+    @test get_channel(s3) == get_channel(s4)
+    
+    @clear_cache MyApp
+    down()
 end
\ No newline at end of file

From 5cc5f4654a481534de87f2635e849c3e82b91d79 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 11 Sep 2023 17:43:49 +0200
Subject: [PATCH 054/265] improve server tests

---
 test/runtests.jl | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/test/runtests.jl b/test/runtests.jl
index f9cf1251..7dac1979 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -209,7 +209,11 @@ end
     
         ui() = "DEMO UI"
         debounce = 10
+    end
 
+    @eval model = @init
+    
+    @eval begin
         @page("/", ui)
         @page("/nolayout", ui, layout = "no layout")
         @page("/debounce", ui, debounce = 50)
@@ -261,9 +265,10 @@ end
     
         ui() = "DEMO UI explicit"
         debounce = 11
-        # @eval model = @init(MyApp)
     end
     
+    @eval model = @init(MyApp)
+
     @eval begin
         @page("/", ui; model = MyApp)
         @page("/nolayout", ui, layout = "no layout (explicit)", model = MyApp)

From e3b252431f200c2692b2deaacf109be8164ca2d4 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 11 Sep 2023 17:44:16 +0200
Subject: [PATCH 055/265] fix Pairs definition in rendering.jl

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

diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 4fc0af32..db193a63 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -39,7 +39,7 @@ function join_js(xx, delim = ""; skip_empty = true, pre::Function = identity, st
   for x_raw in xx
     x = x_raw isa Base.Callable ? x_raw() : x_raw
     io2 = IOBuffer()
-    if x isa Union{AbstractDict, Pair, Base.Pairs, Vector{<:Pair}}
+    if x isa Union{AbstractDict, Pair, Base.Iterators.Pairs, Vector{<:Pair}}
       s = json(Dict(k => JSONText(v) for (k, v) in (x isa Pair ? [x] : x)))[2:end - 1]
       print(io2, s)
     else

From fea19839feef5e44a0b69f79c44059421da6b413 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 11 Sep 2023 18:25:36 +0200
Subject: [PATCH 056/265] fix parameter syntax for @onbutton

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

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index c59c25f6..5dfd0159 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -882,7 +882,7 @@ macro onchange(location, vars, expr)
   known_reactive_vars, known_non_reactive_vars = get_known_vars(loc)
   known_vars = vcat(known_reactive_vars, known_non_reactive_vars)
   on_vars = fieldnames_to_fields(vars, known_vars)
-
+  
   expr, used_vars = mask(expr, known_vars)
   do_vars = Symbol[]
 
@@ -960,7 +960,7 @@ macro onbutton(location, var, expr)
   var = fieldnames_to_fields(var, known_vars)
 
   expr = fieldnames_to_fields(expr, known_non_reactive_vars)
-  expr = fieldnames_to_fieldcontent(expr, known_reactive_vars)
+  expr = fieldnames_to_fieldcontent(expr, known_reactive_vars, known_reactive_vars)
   expr = unmask(expr, known_vars)
 
   ex = :(onbutton($var) do

From 7e8b66880ae82161f144b6dd3d141caa76ce9bd8 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Tue, 12 Sep 2023 12:15:33 +0300
Subject: [PATCH 057/265] No default "og:title"

---
 src/ReactiveTools.jl | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index ac53153b..a6b7bee5 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -33,7 +33,8 @@ const REACTIVE_STORAGE = LittleDict{Module,LittleDict{Symbol,Expr}}()
 const HANDLERS = LittleDict{Module,Vector{Expr}}()
 const TYPES = LittleDict{Module,Union{<:DataType,Nothing}}()
 
-function DEFAULT_LAYOUT(; title::String = "Genie App", meta::Dict{<:AbstractString,<:AbstractString} = Dict("og:title" => "Genie App"))
+function DEFAULT_LAYOUT(; title::String = "Genie App",
+                          meta::Dict{<:AbstractString,<:AbstractString} = Dict())
   tags = Genie.Renderers.Html.for_each(x -> """<meta name="$(x.first)" content="$(x.second)">\n""", meta)
   """
 <!DOCTYPE html>

From b7f95de9b8faee96b0c6672382da34457a2c6936 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Tue, 12 Sep 2023 13:06:45 +0300
Subject: [PATCH 058/265] Fix rendering of fields

---
 src/Elements.jl          | 2 +-
 src/ReactiveTools.jl     | 4 ++--
 src/stipple/rendering.jl | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index 32e9d09c..380772db 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -328,7 +328,7 @@ Sometimes preprocessing of the events is necessary, e.g. to add or skip informat
 ```
 """
 macro on(arg, expr, preprocess = nothing)
-  kw = Symbol("v-on:", arg isa String ? arg : arg isa QuoteNode ? arg.value : arg.head == :vect ? join(lstrip.(string.(arg.args), ':'), '.') : 
+  kw = Symbol("v-on:", arg isa String ? arg : arg isa QuoteNode ? arg.value : arg.head == :vect ? join(lstrip.(string.(arg.args), ':'), '.') :
     throw("Value '$arg' for `arg` not supported. `arg` should be of type Symbol, String, or Vector{Union{String, Symbol}}"))
 
   isevent = expr isa QuoteNode && expr.value isa Symbol
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index ab91a826..76e87f77 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -34,8 +34,8 @@ const HANDLERS = LittleDict{Module,Vector{Expr}}()
 const TYPES = LittleDict{Module,Union{<:DataType,Nothing}}()
 
 function DEFAULT_LAYOUT(; title::String = "Genie App",
-                          meta::Dict{<:AbstractString,<:AbstractString} = Dict())
-  tags = Genie.Renderers.Html.for_each(x -> """<meta name="$(x.first)" content="$(x.second)">\n""", meta)
+                          meta::D = Dict()) where {D <:AbstractDict}
+  tags = Genie.Renderers.Html.for_each(x -> """<meta name="$(string(x.first))" content="$(string(x.second))">\n""", meta)
   """
 <!DOCTYPE html>
 <html>
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 4fc0af32..f721a6c3 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -1,5 +1,5 @@
 """
-    join_js(xx, delim = ""; skip_empty = true, pre::Function = identity, 
+    join_js(xx, delim = ""; skip_empty = true, pre::Function = identity,
       strip_delimiter = true, pre_delim::Union{Function,Nothing} = nothing)
 
 Join elements of an iterator similar to [`join`](@ref) with additonal features
@@ -86,7 +86,7 @@ function julia_to_vue(field, mapping_keys = mapping_keys()) :: String
       extraparts = map((x) -> uppercasefirst(string(x)), parts[2:end])
       string(parts[1], join(extraparts))
     else
-      parts |> string
+      join(parts) |> string
     end
   else
     field |> string

From 65d7c1a9755d264482ac5d4d193a1028cf2354cd Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 14 Sep 2023 13:46:44 +0200
Subject: [PATCH 059/265] rename flexgrid arg :size to :col

---
 src/Layout.jl | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 6556cab8..026a57a0 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -111,7 +111,7 @@ function flexgrid_kwargs(; class = "", flexgrid_mappings::Dict{Symbol,Symbol} =
   kwargs = Dict{Symbol,Any}(kwargs...)
   classes = [class]
 
-  for key in (:size, :xs, :sm, :md, :lg, :xl)
+  for key in (:col, :xs, :sm, :md, :lg, :xl)
     newkey = get(flexgrid_mappings, key, key)
     if haskey(kwargs, newkey)
       class = sizetocol(kwargs[newkey], key)
@@ -140,13 +140,16 @@ julia> row(span("Hello"))
 ```
 """
 function row(args...; 
-  size::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  col::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
   class = "", kwargs...)
 
+  # for compatibility with size
+  col == -1 && size != -1 && (col = size)
+
   class = join(pushfirst!(split(class), "row"), " ")
-  kwargs = flexgrid_kwargs(; class, size, xs, sm, md, lg, xl, kwargs...)
+  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -167,13 +170,16 @@ julia> column(span("Hello"))
 ```
 """
 function column(args...;
-  size::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  col::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
   class = "", kwargs...)
 
+  # for compatibility with size
+  col == -1 && size != -1 && (col = size)
+
   class = join(pushfirst!(split(class), "column"), " ")
-  kwargs = flexgrid_kwargs(; class, size, xs, sm, md, lg, xl, kwargs...)
+  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -207,20 +213,24 @@ julia> row(cell(size = 2, md = 6, sm = 12, span("Hello")))
 ```
 """
 function cell(args...;
-  size::Union{Int,AbstractString,Symbol,Nothing} = 0,
+  col::Union{Int,AbstractString,Symbol,Nothing} = 0,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, class = "", kwargs...
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = 0,
+  class = "", kwargs...
 )
+  # for compatibility with size
+  col == 0 && size != 0 && (col = size)
+  
   class = join(pushfirst!(split(class), "st-col"), " ")
-  kwargs = flexgrid_kwargs(; class, size, xs, sm, md, lg, xl, kwargs...)
+  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
-function sizetocol(size::Union{String,Int,Nothing,Symbol} = -1, tag::Symbol = :size)
+function sizetocol(size::Union{String,Int,Nothing,Symbol} = -1, tag::Symbol = :col)
   (size == -1 || size === nothing) && return ""
   out = ["col"]
-  tag != :size && push!(out, String(tag))
+  tag != :col && push!(out, String(tag))
   if size isa Int
     size > 0 && push!(out, "$size")
   else

From 331aa842856d0f29fb603abfd16627720c09425a Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 14 Sep 2023 13:59:14 +0200
Subject: [PATCH 060/265] set version v0.27.6

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 53fe86cd..d91b104e 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.5"
+version = "0.27.6"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From f4ebb16a93dd380645c4d92270e789a23616da22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 14 Sep 2023 23:34:08 +0200
Subject: [PATCH 061/265] enhance binding syntax in flexgrid_kwargs

---
 src/Layout.jl | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 026a57a0..f60b3b95 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -107,20 +107,36 @@ function container(args...; fluid = false, kwargs...)
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
-function flexgrid_kwargs(; class = "", flexgrid_mappings::Dict{Symbol,Symbol} = Dict{Symbol,Symbol}(), kwargs...)
+function flexgrid_kwargs(; class = "", class! = nothing, flexgrid_mappings::Dict{Symbol,Symbol} = Dict{Symbol,Symbol}(), kwargs...)
   kwargs = Dict{Symbol,Any}(kwargs...)
-  classes = [class]
+  
+  # make a classes array that contains strings
+  # while class will contain a js expression as Symbol
+  # if either class is a Symbol or class! is not nothing.
+  # So an argument of the form `class! = "'my-class' + 'your-class'` is supported
+  classes = String[]
+  if class isa Symbol
+    class! != nothing && (class = Symbol("$class! + $class"))
+  else
+    push!(classes, "$class")
+    class! != nothing && (class = Symbol("$class!"))
+  end
 
   for key in (:col, :xs, :sm, :md, :lg, :xl)
     newkey = get(flexgrid_mappings, key, key)
     if haskey(kwargs, newkey)
-      class = sizetocol(kwargs[newkey], key)
-      length(class) > 0 && push!(classes, class)
+      colclass = sizetocol(kwargs[newkey], key)
+      length(colclass) > 0 && push!(classes, colclass)
       delete!(kwargs, newkey)
     end
   end
-  class = join(classes[classes .!= ""], ' ')
-  length(class) > 0 && (kwargs[:class] = class)
+  colclass = join(classes[classes .!= ""], ' ')
+
+  if length(colclass) != 0
+    class = class isa Symbol ? Symbol("$class + ' $colclass'") : colclass
+  end
+  
+  (class isa Symbol || length(class) > 0) && (kwargs[:class] = class)
 
   return kwargs
 end
@@ -148,7 +164,7 @@ function row(args...;
   # for compatibility with size
   col == -1 && size != -1 && (col = size)
 
-  class = join(pushfirst!(split(class), "row"), " ")
+  class = class isa Symbol ? Symbol("'row ' + $class") : join(pushfirst!(split(class), "row"), " ")
   kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
@@ -178,7 +194,7 @@ function column(args...;
   # for compatibility with size
   col == -1 && size != -1 && (col = size)
 
-  class = join(pushfirst!(split(class), "column"), " ")
+  class = class isa Symbol ? Symbol("'column ' + $class") : join(pushfirst!(split(class), "row"), " ")
   kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
@@ -221,7 +237,7 @@ function cell(args...;
   # for compatibility with size
   col == 0 && size != 0 && (col = size)
   
-  class = join(pushfirst!(split(class), "st-col"), " ")
+  class = class isa Symbol ? Symbol("'st-col ' + $class") : join(pushfirst!(split(class), "row"), " ")
   kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)

From 45521f2b722a80fd0e185ce20a267fdc1015a1a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 15 Sep 2023 00:32:25 +0200
Subject: [PATCH 062/265] change order of classes in row, cell, column

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

diff --git a/src/Layout.jl b/src/Layout.jl
index f60b3b95..f2d7734d 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -161,10 +161,10 @@ function row(args...;
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
   class = "", kwargs...)
 
-  # for compatibility with size
+  # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
 
-  class = class isa Symbol ? Symbol("'row ' + $class") : join(pushfirst!(split(class), "row"), " ")
+  class = class isa Symbol ? Symbol("$class + ' row'") : join(pushfirst!(split(class), "row"), " ")
   kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
@@ -191,10 +191,10 @@ function column(args...;
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
   class = "", kwargs...)
 
-  # for compatibility with size
+  # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
 
-  class = class isa Symbol ? Symbol("'column ' + $class") : join(pushfirst!(split(class), "row"), " ")
+  class = class isa Symbol ? Symbol("$class + ' column'") : join(pushfirst!(split(class), "st-col"), " ")
   kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
@@ -234,10 +234,10 @@ function cell(args...;
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = 0,
   class = "", kwargs...
 )
-  # for compatibility with size
+  # for backward compatibility with `size` kwarg
   col == 0 && size != 0 && (col = size)
   
-  class = class isa Symbol ? Symbol("'st-col ' + $class") : join(pushfirst!(split(class), "row"), " ")
+  class = class isa Symbol ? Symbol("$class + ' st-col'") : join(pushfirst!(split(class), "st-col"), " ")
   kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)

From 8aa57c11c836514595f23662654e55dbc04ad270 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 15 Sep 2023 00:33:25 +0200
Subject: [PATCH 063/265] set version v0.27.7

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index d91b104e..19964489 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.6"
+version = "0.27.7"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From b2b4f93503e8d48e78f4730816a70d7429332e3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 15 Sep 2023 00:48:04 +0200
Subject: [PATCH 064/265] fix missing Symbol notation in column, row, cell

---
 src/Layout.jl | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index f2d7734d..378de232 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -107,7 +107,7 @@ function container(args...; fluid = false, kwargs...)
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
-function flexgrid_kwargs(; class = "", class! = nothing, flexgrid_mappings::Dict{Symbol,Symbol} = Dict{Symbol,Symbol}(), kwargs...)
+function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = true, flexgrid_mappings::Dict{Symbol,Symbol} = Dict{Symbol,Symbol}(), kwargs...)
   kwargs = Dict{Symbol,Any}(kwargs...)
   
   # make a classes array that contains strings
@@ -138,6 +138,11 @@ function flexgrid_kwargs(; class = "", class! = nothing, flexgrid_mappings::Dict
   
   (class isa Symbol || length(class) > 0) && (kwargs[:class] = class)
 
+  if ! symbol_class && class isa Symbol
+    kwargs[:class!] = string(kwargs[:class])
+    delete!(kwargs, :class)
+  end
+
   return kwargs
 end
 
@@ -165,7 +170,7 @@ function row(args...;
   col == -1 && size != -1 && (col = size)
 
   class = class isa Symbol ? Symbol("$class + ' row'") : join(pushfirst!(split(class), "row"), " ")
-  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
+  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -195,7 +200,7 @@ function column(args...;
   col == -1 && size != -1 && (col = size)
 
   class = class isa Symbol ? Symbol("$class + ' column'") : join(pushfirst!(split(class), "st-col"), " ")
-  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
+  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -238,7 +243,7 @@ function cell(args...;
   col == 0 && size != 0 && (col = size)
   
   class = class isa Symbol ? Symbol("$class + ' st-col'") : join(pushfirst!(split(class), "st-col"), " ")
-  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, kwargs...)
+  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end

From 139e5134f0aed1b0d25339566a58140a6ffffa50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 15 Sep 2023 01:18:58 +0200
Subject: [PATCH 065/265] minor fixes, add tests for flexgrid kwargs

---
 src/Layout.jl    |  6 +++---
 test/runtests.jl | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 378de232..32e81812 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -169,7 +169,7 @@ function row(args...;
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
 
-  class = class isa Symbol ? Symbol("$class + ' row'") : join(pushfirst!(split(class), "row"), " ")
+  class = class isa Symbol ? Symbol("$class + ' row'") : join(push!(split(class), "row"), " ")
   kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
@@ -199,7 +199,7 @@ function column(args...;
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
 
-  class = class isa Symbol ? Symbol("$class + ' column'") : join(pushfirst!(split(class), "st-col"), " ")
+  class = class isa Symbol ? Symbol("$class + ' column'") : join(push!(split(class), "column"), " ")
   kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
@@ -242,7 +242,7 @@ function cell(args...;
   # for backward compatibility with `size` kwarg
   col == 0 && size != 0 && (col = size)
   
-  class = class isa Symbol ? Symbol("$class + ' st-col'") : join(pushfirst!(split(class), "st-col"), " ")
+  class = class isa Symbol ? Symbol("$class + ' st-col'") : join(push!(split(class), "st-col"), " ")
   kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...)
 
   Genie.Renderer.Html.div(args...; kwargs...)
diff --git a/test/runtests.jl b/test/runtests.jl
index 7dac1979..ec9efefd 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -307,4 +307,47 @@ end
     
     @clear_cache MyApp
     down()
+end
+
+# attribute testing
+
+@testset "Flexgrid attributes for row(), column(), and cell()" begin
+
+    el = column(col = 2, sm = 9, class = "myclass")
+    @test contains(el, "class=\"myclass column col-2 col-sm-9")
+
+    el = column(col = 2, sm = 9, class = :myclass)
+    @test contains(el, r":class=\"myclass \+ .*column.* col-2 col-sm-9'")
+
+    el = column(col = 2, sm = 9, class! = "myclass")
+    @test contains(el, r":class=\"myclass \+ .*column.* col-2 col-sm-9'")
+
+    el = column(col = 2, sm = 9, class! = :myclass)
+    @test contains(el, r":class=\"myclass \+ .*column.* col-2 col-sm-9'")
+
+    # ---------
+
+    el = row(col = 2, sm = 9, class = "myclass")
+    @test contains(el, "class=\"myclass row col-2 col-sm-9")
+
+    el = row(col = 2, sm = 9, class = :myclass)
+    @test contains(el, r":class=\"myclass \+ .*row.* col-2 col-sm-9'")
+
+    el = row(col = 2, sm = 9, class! = "myclass")
+    @test contains(el, r":class=\"myclass \+ .*row.* col-2 col-sm-9'")
+
+    # ---------
+
+    el = cell(col = 2, sm = 9, class = "myclass")
+    @test contains(el, "class=\"myclass st-col col-2 col-sm-9")
+
+    el = cell(col = 2, sm = 9, class = :myclass)
+    @test contains(el, r":class=\"myclass \+ .*st-col.* col-2 col-sm-9'")
+
+    el = column(col = 2, sm = 9, class! = "myclass")
+    @test contains(el, r":class=\"myclass \+ .*column.* col-2 col-sm-9'")
+
+    @test cell(sm = 9) == "<div class=\"st-col col col-sm-9\"></div>"
+
+    @test cell(col = -1, sm = 9) == "<div class=\"st-col col-sm-9\"></div>"
 end
\ No newline at end of file

From e35659231fc4a5a40eb249b749ae973d50351ca5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 15 Sep 2023 02:00:59 +0200
Subject: [PATCH 066/265] correct fix for `@onbutton`

---
 src/ReactiveTools.jl | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 79d2e148..48eac328 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -960,8 +960,10 @@ macro onbutton(location, var, expr)
   known_vars = vcat(known_reactive_vars, known_non_reactive_vars)
   var = fieldnames_to_fields(var, known_vars)
 
+  expr, used_vars = mask(expr, known_vars)
+
   expr = fieldnames_to_fields(expr, known_non_reactive_vars)
-  expr = fieldnames_to_fieldcontent(expr, known_reactive_vars, known_reactive_vars)
+  expr = fieldnames_to_fieldcontent(expr, known_reactive_vars)
   expr = unmask(expr, known_vars)
 
   ex = :(onbutton($var) do

From ac5484c37873a344ac10add90d7d579b5058e97b Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 15 Sep 2023 08:18:32 +0200
Subject: [PATCH 067/265] minor fix

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

diff --git a/src/Layout.jl b/src/Layout.jl
index 32e81812..e6f85127 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -116,10 +116,10 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
   # So an argument of the form `class! = "'my-class' + 'your-class'` is supported
   classes = String[]
   if class isa Symbol
-    class! != nothing && (class = Symbol("$class! + $class"))
+    class! !== nothing && (class = Symbol("$class! + $class"))
   else
     push!(classes, "$class")
-    class! != nothing && (class = Symbol("$class!"))
+    class! !== nothing && (class = Symbol("$class!"))
   end
 
   for key in (:col, :xs, :sm, :md, :lg, :xl)

From 0e6a27636f8621ae1761cb5a34e9b506fb400ea0 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Fri, 15 Sep 2023 19:37:41 +0200
Subject: [PATCH 068/265] Fixes for advanced DataTables API

---
 Project.toml              |   2 +-
 assets/js/watchers.js     |   2 +-
 src/ReactiveTools.jl      | 181 ++++++++++++++++++++------------------
 src/stipple/reactivity.jl |  28 ++++--
 4 files changed, 116 insertions(+), 97 deletions(-)

diff --git a/Project.toml b/Project.toml
index 53fe86cd..c3aa1e90 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.5"
+version = "0.28.0"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index a781931c..39ee6cee 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -74,7 +74,7 @@ const reviveMixin = {
 const eventMixin = {
   methods: {
     handle_event: function (event_data, event_handler) {
-      console.log('event: ' + event_data + ":" + event_handler)
+      console.log('event: ' + JSON.stringify(event_data) + ":" + event_handler)
       Genie.WebChannels.sendMessageTo(window.CHANNEL, 'events', {
           'event': {
               'name': event_handler,
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 76e87f77..e3695afa 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -345,7 +345,8 @@ function binding(expr::Expr, m::Module, @nospecialize(mode::Any = nothing); sour
   update_storage(m)
 end
 
-function binding(expr::Expr, storage::LittleDict{Symbol, Expr}, @nospecialize(mode::Any = nothing); source = nothing, reactive = true, m::Module)
+function binding(expr::Expr, storage::LittleDict{Symbol, Expr}, @nospecialize(mode::Any = nothing); source = nothing,
+                  reactive = true, m::Module)
   intmode = mode isa Integer ? Int(mode) : @eval Stipple.$mode
 
   var, field_expr = parse_expression!(expr, reactive ? mode : nothing, source, m)
@@ -957,96 +958,98 @@ macro page(url, view)
   :(@page($url, $view, Stipple.ReactiveTools.DEFAULT_LAYOUT())) |> esc
 end
 
-for f in (:methods, :watch, :computed)
-  f_str = string(f)
-  Core.eval(@__MODULE__, quote
-    """
-        @$($f_str)(expr)
-        @$($f_str)(App, expr)
-
-    Defines js functions for the `$($f_str)` section of the vue element.
-
-    `expr` can be
-    - `String` containing javascript code
-    - `Pair` of function name and function code
-    - `Function` returning String of javascript code
-    - `Dict` of function names and function code
-    - `Vector` of the above
-
-    ### Example 1
-
-    ```julia
-    @$($f_str) "greet: function(name) {console.log('Hello ' + name)}"
-    ```
-
-    ### Example 2
-
-    ```julia
-    js_greet() = :greet => "function(name) {console.log('Hello ' + name)}"
-    js_bye() = :bye => "function() {console.log('Bye!')}"
-    @$($f_str) MyApp [js_greet, js_bye]
-    ```
-    Checking the result can be done in the following way
-    ```
-    julia> render(MyApp())[:$($f_str)].s |> println
-    {
-        "greet":function(name) {console.log('Hello ' + name)},
-        "bye":function() {console.log('Bye!')}
-    }
-    ```
-    """
-    macro $f(args...)
-      vue_options($f_str, args...)
-    end
-  end)
-end
-
-#=== Lifecycle hooks ===#
+function __init()
+  for f in (:methods, :watch, :computed)
+    f_str = string(f)
+    Core.eval(@__MODULE__, quote
+      """
+          @$($f_str)(expr)
+          @$($f_str)(App, expr)
 
-for (f, field) in (
-  (:before_create, :beforeCreate), (:created, :created), (:before_mount, :beforeMount), (:mounted, :mounted),
-  (:before_update, :beforeUpdate), (:updated, :updated), (:activated, :activated), (:deactivated, :deactivated),
-  (:before_destroy, :beforeDestroy), (:destroyed, :destroyed), (:error_captured, :errorCaptured),)
+      Defines js functions for the `$($f_str)` section of the vue element.
 
-  f_str = string(f)
-  field_str = string(field)
-  Core.eval(@__MODULE__, quote
-    """
-        @$($f_str)(expr)
-
-    Defines js statements for the `$($field_str)` section of the vue element.
-
-    expr can be
+      `expr` can be
       - `String` containing javascript code
+      - `Pair` of function name and function code
       - `Function` returning String of javascript code
+      - `Dict` of function names and function code
       - `Vector` of the above
 
-    ### Example 1
-
-    ```julia
-    @$($f_str) \"\"\"
-        if (this.cameraon) { startcamera() }
-    \"\"\"
-    ```
-
-    ### Example 2
-
-    ```julia
-    startcamera() = "if (this.cameraon) { startcamera() }"
-    stopcamera() = "if (this.cameraon) { stopcamera() }"
-
-    @$($f_str) MyApp [startcamera, stopcamera]
-    ```
-    Checking the result can be done in the following way
-    ```
-    julia> render(MyApp())[:$($field_str)]
-    JSONText("function(){\n    if (this.cameraon) { startcamera() }\n\n    if (this.cameraon) { stopcamera() }\n}")
-    ```
-    """
-    macro $f(args...)
-      vue_options($f_str, args...)
-    end
-  end)
+      ### Example 1
+
+      ```julia
+      @$($f_str) "greet: function(name) {console.log('Hello ' + name)}"
+      ```
+
+      ### Example 2
+
+      ```julia
+      js_greet() = :greet => "function(name) {console.log('Hello ' + name)}"
+      js_bye() = :bye => "function() {console.log('Bye!')}"
+      @$($f_str) MyApp [js_greet, js_bye]
+      ```
+      Checking the result can be done in the following way
+      ```
+      julia> render(MyApp())[:$($f_str)].s |> println
+      {
+          "greet":function(name) {console.log('Hello ' + name)},
+          "bye":function() {console.log('Bye!')}
+      }
+      ```
+      """
+      macro $f(args...)
+        vue_options($f_str, args...)
+      end
+    end)
+  end
+
+  #=== Lifecycle hooks ===#
+
+  for (f, field) in (
+    (:before_create, :beforeCreate), (:created, :created), (:before_mount, :beforeMount), (:mounted, :mounted),
+    (:before_update, :beforeUpdate), (:updated, :updated), (:activated, :activated), (:deactivated, :deactivated),
+    (:before_destroy, :beforeDestroy), (:destroyed, :destroyed), (:error_captured, :errorCaptured),)
+
+    f_str = string(f)
+    field_str = string(field)
+    Core.eval(@__MODULE__, quote
+      """
+          @$($f_str)(expr)
+
+      Defines js statements for the `$($field_str)` section of the vue element.
+
+      expr can be
+        - `String` containing javascript code
+        - `Function` returning String of javascript code
+        - `Vector` of the above
+
+      ### Example 1
+
+      ```julia
+      @$($f_str) \"\"\"
+          if (this.cameraon) { startcamera() }
+      \"\"\"
+      ```
+
+      ### Example 2
+
+      ```julia
+      startcamera() = "if (this.cameraon) { startcamera() }"
+      stopcamera() = "if (this.cameraon) { stopcamera() }"
+
+      @$($f_str) MyApp [startcamera, stopcamera]
+      ```
+      Checking the result can be done in the following way
+      ```
+      julia> render(MyApp())[:$($field_str)]
+      JSONText("function(){\n    if (this.cameraon) { startcamera() }\n\n    if (this.cameraon) { stopcamera() }\n}")
+      ```
+      """
+      macro $f(args...)
+        vue_options($f_str, args...)
+      end
+    end)
+  end
 end
 
 #=== Lifecycle hooks ===#
@@ -1068,7 +1071,6 @@ function vue_options(hook_type, args...)
 end
 
 macro event(M, eventname, expr)
-
   known_reactive_vars, known_non_reactive_vars = get_known_vars(@eval(__module__, $M))
   known_vars = vcat(known_reactive_vars, known_non_reactive_vars)
   expr, used_vars = mask(expr, known_vars)
@@ -1095,7 +1097,8 @@ Executes the code in `expr` when a specific `event` is triggered by a UI compone
 
 **Usage**
 
-Define an event trigger such as a click, keypress or file upload for a component using the @on macro. Then, define the handler for the event with @event.
+Define an event trigger such as a click, keypress or file upload for a component using the @on macro.
+Then, define the handler for the event with @event.
 
 
 **Examples**
@@ -1116,6 +1119,7 @@ ui() =  textfield(class = "q-my-md", "Input", :input, hint = "Please enter some
 ```
 
 =======
+
 ```julia
 <q-input hint="Please enter some words" v-on:keyup.enter="function(event) { handle_event(event, 'keypress') }" label="Input" v-model="input" class="q-my-md"></q-input>
 ```
@@ -1148,6 +1152,7 @@ macro event(event, expr)
   end |> esc
 end
 
+
 macro client_data(expr)
   if expr.head != :block
     expr = quote $expr end
@@ -1213,4 +1218,6 @@ macro notify(args...)
   end |> esc
 end
 
+__init()
+
 end
diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index 8bb87239..4a72673a 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -181,7 +181,7 @@ function merge_storage(storage_1::AbstractDict, storage_2::AbstractDict; keep_ch
   m1 = eval(haskey(storage_1, :modes__) ? storage_1[:modes__].args[end] : LittleDict{Symbol, Int}())
   m2 = eval(haskey(storage_2, :modes__) ? storage_2[:modes__].args[end] : LittleDict{Symbol, Int}())
   modes = merge(m1, m2)
-  
+
   keep_channel && haskey(storage_2, :channel__) && (storage_2 = delete!(copy(storage_2), :channel__))
   for (field, expr) in storage_2
     field == :modes__ && continue
@@ -233,18 +233,30 @@ function parse_expression!(expr::Expr, @nospecialize(mode) = nothing, source = n
       # change type T to type R{T}
       var.args[2] = :($Rtype{$(var.args[2])})
     else
-      # add type definition `::R{T}` to the var where T is the type of the default value
-      T = @eval m typeof($(expr.args[2]))
-      expr.args[1] = :($var::$Rtype{$T})
-      Rtype
+      try
+        # add type definition `::R{T}` to the var where T is the type of the default value
+        T = @eval m typeof($(expr.args[2]))
+        expr.args[1] = :($var::$Rtype{$T})
+        Rtype
+      catch ex
+        # if the default value is not defined, we can't infer the type
+        # so we just set the type to R{Any}
+        :($Rtype{Any})
+      end
     end
     expr.args[2] = :($type($(expr.args[2]), $mode, false, false, $source))
   end
 
   # if no type is defined, set the type of the default value
   if expr.args[1] isa Symbol
-    T = @eval m typeof($(expr.args[2]))
-    expr.args[1] = :($(expr.args[1])::$T)
+    try
+      T = @eval m typeof($(expr.args[2]))
+      expr.args[1] = :($(expr.args[1])::$T)
+    catch ex
+      # if the default value is not defined, we can't infer the type
+      # so we just set the type to Any
+      expr.args[1] = :($(expr.args[1])::Any)
+    end
   end
   expr.args[1].args[1], expr
 end
@@ -351,7 +363,7 @@ macro type(modelname, storage)
     # Revise seems to call the macro line by line internally for code tracking purposes.
     # Interstingly, Revise will not populate output.args in that case and will generate an empty model.
     # We use this to our advantage and prevent additional model generation when length(output.args) <= 1.
-    local is_called_by_revise = length(output.args) <= 1 
+    local is_called_by_revise = length(output.args) <= 1
     eval(quote
       $is_called_by_revise || Stipple.@kwredef mutable struct $$modelconst_qn <: $$modelname
         $output

From 3434221ce0030127033167a4c5da068d3e33fba4 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Fri, 15 Sep 2023 19:47:31 +0200
Subject: [PATCH 069/265] Bump minor version

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index c3aa1e90..af8230d7 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.0"
+version = "0.27.8"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From cf9de9582cfa36a951fa828978c775de4db1f241 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Fri, 15 Sep 2023 19:58:06 +0200
Subject: [PATCH 070/265] Don't log, debug

---
 assets/js/watchers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index 39ee6cee..06d7f5dc 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -74,7 +74,7 @@ const reviveMixin = {
 const eventMixin = {
   methods: {
     handle_event: function (event_data, event_handler) {
-      console.log('event: ' + JSON.stringify(event_data) + ":" + event_handler)
+      console.debug('event: ' + JSON.stringify(event_data) + ":" + event_handler)
       Genie.WebChannels.sendMessageTo(window.CHANNEL, 'events', {
           'event': {
               'name': event_handler,

From 9ffe1fc82aba73973712445fb62c0fa1ce2969a7 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Tue, 26 Sep 2023 15:21:25 +0200
Subject: [PATCH 071/265] Improved managing of handler errors/exceptions

---
 Project.toml            |  2 +-
 src/Stipple.jl          | 10 ++++++++--
 src/stipple/mutators.jl | 26 ++++++++++++++++++++++----
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/Project.toml b/Project.toml
index af8230d7..d3be4414 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.8"
+version = "0.27.9"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/src/Stipple.jl b/src/Stipple.jl
index c899ef94..f5df519f 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -485,9 +485,15 @@ function init(::Type{M};
       end
 
       push!(model, field => newval; channel = channel, except = client)
-      update!(model, field, newval, oldval)
-
       LAST_ACTIVITY[Symbol(channel)] = now()
+
+      try
+        update!(model, field, newval, oldval)
+      catch ex
+        # send the error to the frontend
+        return ex
+      end
+
       ok_response
     end
   end
diff --git a/src/stipple/mutators.jl b/src/stipple/mutators.jl
index 8a55afac..e513808a 100644
--- a/src/stipple/mutators.jl
+++ b/src/stipple/mutators.jl
@@ -25,7 +25,7 @@ function callwatchers(field, val, keys...; notify)
 
       continue
     end
-    
+
     # compatibility with Observables 0.5
     f = x isa Pair ? x[2] : x
 
@@ -33,9 +33,27 @@ function callwatchers(field, val, keys...; notify)
       try
         Base.invokelatest(f, val)
       catch ex
-        @error "Error attempting to invoke handler $count for field $field with value $val"
-        @error "" exception=(ex, catch_backtrace())
-        Genie.Configuration.isdev() && rethrow(ex)
+        error_message = """
+
+        Error attempting to invoke handler.
+
+          Handler:
+          $(methods(f))
+          $( code_lowered(f, (typeof(val),)) )
+
+          Type of argument:
+          $((isa(field, Reactive) ? field[] : field) |> typeof)
+
+          Value:
+          $val
+
+          Exception:
+          $ex
+
+        """
+        @error error_message exception=(ex, catch_backtrace())
+
+        rethrow(ex)
       end
     end
 

From f34daea4f458d90df282ea25ddf5a3884b849bbe Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Tue, 26 Sep 2023 15:25:15 +0200
Subject: [PATCH 072/265] Don't send error info in prod

---
 Project.toml   | 2 +-
 src/Stipple.jl | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/Project.toml b/Project.toml
index d3be4414..9d877004 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.9"
+version = "0.27.10"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/src/Stipple.jl b/src/Stipple.jl
index f5df519f..989b4b93 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -491,7 +491,11 @@ function init(::Type{M};
         update!(model, field, newval, oldval)
       catch ex
         # send the error to the frontend
-        return ex
+        if Genie.Configuration.isdev()
+          return ex
+        else
+          return "An error has occured -- please check the logs"
+        end
       end
 
       ok_response

From cfa93c3e8114042f6c435654874608f8bfdb9016 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 8 Oct 2023 09:19:56 +0200
Subject: [PATCH 073/265] interoperability for Stipple.JSONText and
 JSON.JSONText for JSON3 and JSON

---
 Project.toml          | 16 ++++++++++------
 ext/StippleJSON.jl    | 10 ++++++++++
 ext/StippleJSONExt.jl | 18 ++++++++++++++++++
 src/Stipple.jl        | 10 +++++++++-
 test/runtests.jl      | 11 +++++++++++
 5 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 ext/StippleJSON.jl
 create mode 100644 ext/StippleJSONExt.jl

diff --git a/Project.toml b/Project.toml
index af8230d7..b0528303 100644
--- a/Project.toml
+++ b/Project.toml
@@ -21,39 +21,43 @@ Random = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"
 Reexport = "189a3867-3050-52da-a836-e630ba90ab69"
 Requires = "ae029012-a4dd-5104-9daa-d747884805df"
 StructTypes = "856f2bd8-1eba-4b0a-8007-ebc267875bd4"
-Tables  = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
+Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 
 [weakdeps]
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
+JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
 OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
 
 [extensions]
 StippleDataFramesExt = "DataFrames"
 StippleOffsetArraysExt = "OffsetArrays"
+StippleJSONExt = "JSON"
 
 [compat]
+DataFrames = "1"
 FilePathsBase = "0.9"
 Genie = "5.18"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON3 = "1.9"
+JSON = "0.20, 0.21"
 MacroTools = "0.5"
 Mixers = "0.1.2"
 Observables = "0.3, 0.4, 0.5"
+OffsetArrays = "1"
 OrderedCollections = "1"
 Parameters = "0.12"
 Reexport = "1"
 Requires = "1"
 StructTypes = "1.8"
-julia = "1.6"
-OffsetArrays = "1"
-DataFrames = "1"
 Tables = "1"
+julia = "1.6"
 
 [extras]
-Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
+JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
 OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
+Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
 
 [targets]
-test = ["Test", "DataFrames", "OffsetArrays"]
+test = ["Test", "DataFrames", "JSON", "OffsetArrays"]
diff --git a/ext/StippleJSON.jl b/ext/StippleJSON.jl
new file mode 100644
index 00000000..f12b0202
--- /dev/null
+++ b/ext/StippleJSON.jl
@@ -0,0 +1,10 @@
+# garantee interoperability of different JSONTText definitions of JSON3 and JSON
+
+JSON.JSONText(json::Stipple.JSONText) = JSON.JSONText(json.s)
+JSON.show_json(io::JSON.Writer.CompactContext, s::JSON.Writer.CS, json::Stipple.JSONText) = write(io, json.s)
+JSON.Writer.lower(json::Stipple.JSONText) = JSON.parse(json.s)
+
+Stipple.JSONText(json::JSON.JSONText) = Stipple.JSONText(json.s)
+@inline StructTypes.StructType(::Type{JSON.JSONText}) = JSON3.RawType()
+@inline StructTypes.construct(::Type{JSON.JSONText}, json::JSON3.RawValue) = JSONText(string(json))
+@inline JSON3.rawbytes(json::JSON.JSONText) = codeunits(json.s)
\ No newline at end of file
diff --git a/ext/StippleJSONExt.jl b/ext/StippleJSONExt.jl
new file mode 100644
index 00000000..60c953c1
--- /dev/null
+++ b/ext/StippleJSONExt.jl
@@ -0,0 +1,18 @@
+module StippleJSONExt
+
+using Stipple
+using JSON
+
+# garantee interoperability of different JSONTText definitions in Stipple and JSON
+# for both JSON3 and JSON
+
+JSON.JSONText(json::Stipple.JSONText) = JSON.JSONText(json.s)
+JSON.show_json(io::JSON.Writer.CompactContext, s::JSON.Writer.CS, json::Stipple.JSONText) = write(io, json.s)
+JSON.Writer.lower(json::Stipple.JSONText) = JSON.parse(json.s)
+
+Stipple.JSONText(json::JSON.JSONText) = Stipple.JSONText(json.s)
+@inline StructTypes.StructType(::Type{JSON.JSONText}) = JSON3.RawType()
+@inline StructTypes.construct(::Type{JSON.JSONText}, json::JSON3.RawValue) = JSONText(string(json))
+@inline JSON3.rawbytes(json::JSON.JSONText) = codeunits(json.s)
+
+end
\ No newline at end of file
diff --git a/src/Stipple.jl b/src/Stipple.jl
index c899ef94..d2950b9c 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -15,6 +15,8 @@ existing Vue.js libraries.
 """
 module Stipple
 
+const PRECOMPILE = Ref(false)
+
 """
 @using_except(expr)
 
@@ -216,6 +218,12 @@ function __init__()
       include(joinpath(@__DIR__, "..", "ext", "StippleDataFrames.jl"))
       # Core.eval(@__MODULE__, Meta.parse(join(jl, ';')).args[3])
     end
+
+    @require JSON  = "682c06a0-de6a-54ab-a142-c8b1cf79cde6" begin
+      # evaluate the code of the extension without the surrounding module
+      include(joinpath(@__DIR__, "..", "ext", "StippleJSON.jl"))
+      # Core.eval(@__MODULE__, Meta.parse(join(jl, ';')).args[3])
+    end
   end
 end
 
@@ -443,7 +451,7 @@ function init(::Type{M};
   # add a timer that checks if the model is outdated and if so prepare the model to be garbage collected
   LAST_ACTIVITY[Symbol(getchannel(model))] = now()
 
-  Timer(setup_purge_checker(model), PURGE_CHECK_DELAY[], interval = PURGE_CHECK_DELAY[])
+  PRECOMPILE[] || Timer(setup_purge_checker(model), PURGE_CHECK_DELAY[], interval = PURGE_CHECK_DELAY[])
 
   if is_channels_webtransport()
     Genie.Assets.channels_subscribe(channel)
diff --git a/test/runtests.jl b/test/runtests.jl
index ec9efefd..73765ea0 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -350,4 +350,15 @@ end
     @test cell(sm = 9) == "<div class=\"st-col col col-sm-9\"></div>"
 
     @test cell(col = -1, sm = 9) == "<div class=\"st-col col-sm-9\"></div>"
+end
+
+@testset "Compatibility of JSONText between JSON3 and JSON" begin
+    using JSON
+    using Stipple
+    jt1 = JSON.JSONText("json text 1")
+    jt2 = Stipple.JSONText("json text 2")
+    @test JSON.json(jt1) == "json text 1"
+    @test Stipple.json(jt1) == "json text 1"
+    @test JSON.json(jt2) == "json text 2"
+    @test Stipple.json(jt2) == "json text 2"
 end
\ No newline at end of file

From d176fbedd232f2c8601a66cf551ea8915ff4ab01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 8 Oct 2023 22:13:04 +0200
Subject: [PATCH 074/265] remove extra files for Requires

---
 Project.toml                  | 22 +++++++++++-----------
 ext/StippleDataFrames.jl      |  7 -------
 ext/StippleDataFramesExt.jl   |  7 +++----
 ext/StippleJSON.jl            | 10 ----------
 ext/StippleJSONExt.jl         |  3 ++-
 ext/StippleOffsetArrays.jl    | 12 ------------
 ext/StippleOffsetArraysExt.jl |  3 ++-
 ext/StippleTablesExt.jl       |  7 -------
 src/Stipple.jl                | 12 +++---------
 9 files changed, 21 insertions(+), 62 deletions(-)
 delete mode 100644 ext/StippleDataFrames.jl
 delete mode 100644 ext/StippleJSON.jl
 delete mode 100644 ext/StippleOffsetArrays.jl
 delete mode 100644 ext/StippleTablesExt.jl

diff --git a/Project.toml b/Project.toml
index b0528303..e243b073 100644
--- a/Project.toml
+++ b/Project.toml
@@ -23,24 +23,14 @@ Requires = "ae029012-a4dd-5104-9daa-d747884805df"
 StructTypes = "856f2bd8-1eba-4b0a-8007-ebc267875bd4"
 Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 
-[weakdeps]
-DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
-JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
-OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
-
-[extensions]
-StippleDataFramesExt = "DataFrames"
-StippleOffsetArraysExt = "OffsetArrays"
-StippleJSONExt = "JSON"
-
 [compat]
 DataFrames = "1"
 FilePathsBase = "0.9"
 Genie = "5.18"
 GenieSession = "1"
 GenieSessionFileSession = "1"
-JSON3 = "1.9"
 JSON = "0.20, 0.21"
+JSON3 = "1.9"
 MacroTools = "0.5"
 Mixers = "0.1.2"
 Observables = "0.3, 0.4, 0.5"
@@ -53,6 +43,11 @@ StructTypes = "1.8"
 Tables = "1"
 julia = "1.6"
 
+[extensions]
+StippleDataFramesExt = "DataFrames"
+StippleJSONExt = "JSON"
+StippleOffsetArraysExt = "OffsetArrays"
+
 [extras]
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
 JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
@@ -61,3 +56,8 @@ Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
 
 [targets]
 test = ["Test", "DataFrames", "JSON", "OffsetArrays"]
+
+[weakdeps]
+DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
+JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
+OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
diff --git a/ext/StippleDataFrames.jl b/ext/StippleDataFrames.jl
deleted file mode 100644
index ba61dd74..00000000
--- a/ext/StippleDataFrames.jl
+++ /dev/null
@@ -1,7 +0,0 @@
-function Stipple.stipple_parse(::Type{DF} where DF <: DataFrames.AbstractDataFrame, d::Vector)
-  isempty(d) ? DF() : reduce(vcat, DataFrames.DataFrame.(d))
-end
-
-function Stipple.render(df::DataFrames.DataFrame)
-  OrderedDict(zip(names(df), eachcol(df)))
-end
\ No newline at end of file
diff --git a/ext/StippleDataFramesExt.jl b/ext/StippleDataFramesExt.jl
index 12fd0ddb..4f606740 100644
--- a/ext/StippleDataFramesExt.jl
+++ b/ext/StippleDataFramesExt.jl
@@ -1,9 +1,8 @@
 module StippleDataFramesExt
 
-@static if isdefined(Base, :get_extension)
-  using Stipple
-  using DataFrames
-end
+using Stipple
+
+isdefined(Base, :get_extension) ? using DataFrames : using ..DataFrames
 
 function Stipple.stipple_parse(::Type{DF} where DF <: DataFrames.AbstractDataFrame, d::Vector)
   isempty(d) ? DF() : reduce(vcat, DataFrames.DataFrame.(d))
diff --git a/ext/StippleJSON.jl b/ext/StippleJSON.jl
deleted file mode 100644
index f12b0202..00000000
--- a/ext/StippleJSON.jl
+++ /dev/null
@@ -1,10 +0,0 @@
-# garantee interoperability of different JSONTText definitions of JSON3 and JSON
-
-JSON.JSONText(json::Stipple.JSONText) = JSON.JSONText(json.s)
-JSON.show_json(io::JSON.Writer.CompactContext, s::JSON.Writer.CS, json::Stipple.JSONText) = write(io, json.s)
-JSON.Writer.lower(json::Stipple.JSONText) = JSON.parse(json.s)
-
-Stipple.JSONText(json::JSON.JSONText) = Stipple.JSONText(json.s)
-@inline StructTypes.StructType(::Type{JSON.JSONText}) = JSON3.RawType()
-@inline StructTypes.construct(::Type{JSON.JSONText}, json::JSON3.RawValue) = JSONText(string(json))
-@inline JSON3.rawbytes(json::JSON.JSONText) = codeunits(json.s)
\ No newline at end of file
diff --git a/ext/StippleJSONExt.jl b/ext/StippleJSONExt.jl
index 60c953c1..571bd9c5 100644
--- a/ext/StippleJSONExt.jl
+++ b/ext/StippleJSONExt.jl
@@ -1,7 +1,8 @@
 module StippleJSONExt
 
 using Stipple
-using JSON
+
+isdefined(Base, :get_extension) ? using JSON : using ..JSON
 
 # garantee interoperability of different JSONTText definitions in Stipple and JSON
 # for both JSON3 and JSON
diff --git a/ext/StippleOffsetArrays.jl b/ext/StippleOffsetArrays.jl
deleted file mode 100644
index 60fc4bfd..00000000
--- a/ext/StippleOffsetArrays.jl
+++ /dev/null
@@ -1,12 +0,0 @@
-function Stipple.convertvalue(targetfield::Union{Ref{T}, Reactive{T}}, value) where T <: OffsetArrays.OffsetArray
-  a = Stipple.stipple_parse(eltype(targetfield), value)
-
-  # if value is not an OffsetArray use the offset of the current array
-  if ! isa(value, OffsetArrays.OffsetArray)
-    o = targetfield[].offsets
-    OffsetArrays.OffsetArray(a, OffsetArrays.Origin(1 .+ o))
-  # otherwise use the existing value
-  else
-    a
-  end
-end
\ No newline at end of file
diff --git a/ext/StippleOffsetArraysExt.jl b/ext/StippleOffsetArraysExt.jl
index 0070e3d1..9af9f865 100644
--- a/ext/StippleOffsetArraysExt.jl
+++ b/ext/StippleOffsetArraysExt.jl
@@ -1,7 +1,8 @@
 module StippleOffsetArraysExt
 
 using Stipple
-using OffsetArrays
+
+isdefined(Base, :get_extension) ? using OffsetArrays : using ..OffsetArrays
 
 function Stipple.convertvalue(targetfield::Union{Ref{T}, Reactive{T}}, value) where T <: OffsetArrays.OffsetArray
   a = Stipple.stipple_parse(eltype(targetfield), value)
diff --git a/ext/StippleTablesExt.jl b/ext/StippleTablesExt.jl
deleted file mode 100644
index 097f8624..00000000
--- a/ext/StippleTablesExt.jl
+++ /dev/null
@@ -1,7 +0,0 @@
-module StippleTablesExt
-
-using Stipple
-import Tables
-
-
-end
\ No newline at end of file
diff --git a/src/Stipple.jl b/src/Stipple.jl
index d2950b9c..4869f152 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -208,21 +208,15 @@ function __init__()
 
   @static if !isdefined(Base, :get_extension)
     @require OffsetArrays  = "6fe1bfb0-de20-5000-8ca7-80f57d26f881" begin
-      # evaluate the code of the extension without the surrounding module
-      include(joinpath(@__DIR__, "..", "ext", "StippleOffsetArrays.jl"))
-      # Core.eval(@__MODULE__, Meta.parse(join(jl, ';')).args[3])
+      include(joinpath(@__DIR__, "..", "ext", "StippleOffsetArraysExt.jl"))
     end
 
     @require DataFrames  = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0" begin
-      # evaluate the code of the extension without the surrounding module
-      include(joinpath(@__DIR__, "..", "ext", "StippleDataFrames.jl"))
-      # Core.eval(@__MODULE__, Meta.parse(join(jl, ';')).args[3])
+      include(joinpath(@__DIR__, "..", "ext", "StippleDataFramesExt.jl"))
     end
 
     @require JSON  = "682c06a0-de6a-54ab-a142-c8b1cf79cde6" begin
-      # evaluate the code of the extension without the surrounding module
-      include(joinpath(@__DIR__, "..", "ext", "StippleJSON.jl"))
-      # Core.eval(@__MODULE__, Meta.parse(join(jl, ';')).args[3])
+      include(joinpath(@__DIR__, "..", "ext", "StippleJSONExt.jl"))
     end
   end
 end

From 1dbb1a83277dd0e4afc8c5e17a6180199a445700 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 13 Oct 2023 12:27:54 +0200
Subject: [PATCH 075/265] no parsing of jsontext in lower()

---
 ext/StippleJSON.jl    | 2 +-
 ext/StippleJSONExt.jl | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ext/StippleJSON.jl b/ext/StippleJSON.jl
index f12b0202..33d74c1e 100644
--- a/ext/StippleJSON.jl
+++ b/ext/StippleJSON.jl
@@ -2,7 +2,7 @@
 
 JSON.JSONText(json::Stipple.JSONText) = JSON.JSONText(json.s)
 JSON.show_json(io::JSON.Writer.CompactContext, s::JSON.Writer.CS, json::Stipple.JSONText) = write(io, json.s)
-JSON.Writer.lower(json::Stipple.JSONText) = JSON.parse(json.s)
+JSON.Writer.lower(json::Stipple.JSONText) = json.s
 
 Stipple.JSONText(json::JSON.JSONText) = Stipple.JSONText(json.s)
 @inline StructTypes.StructType(::Type{JSON.JSONText}) = JSON3.RawType()
diff --git a/ext/StippleJSONExt.jl b/ext/StippleJSONExt.jl
index 60c953c1..6b35ec86 100644
--- a/ext/StippleJSONExt.jl
+++ b/ext/StippleJSONExt.jl
@@ -5,10 +5,12 @@ using JSON
 
 # garantee interoperability of different JSONTText definitions in Stipple and JSON
 # for both JSON3 and JSON
+# Note that `lower` for Stipple.JSONText is not defined as parse(json.s), because that would require
+# pure proper JSON. For transmissions of bindings, though, we need to allow to pass object names.
 
 JSON.JSONText(json::Stipple.JSONText) = JSON.JSONText(json.s)
 JSON.show_json(io::JSON.Writer.CompactContext, s::JSON.Writer.CS, json::Stipple.JSONText) = write(io, json.s)
-JSON.Writer.lower(json::Stipple.JSONText) = JSON.parse(json.s)
+JSON.Writer.lower(json::Stipple.JSONText) = json.s
 
 Stipple.JSONText(json::JSON.JSONText) = Stipple.JSONText(json.s)
 @inline StructTypes.StructType(::Type{JSON.JSONText}) = JSON3.RawType()

From aa1a03c64c7b23e106b6b00b220b738a53dea82a Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 17 Oct 2023 10:20:54 +0200
Subject: [PATCH 076/265] fix StructTypes.construct(::Type{JSON.JSONText}

---
 ext/StippleJSONExt.jl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ext/StippleJSONExt.jl b/ext/StippleJSONExt.jl
index d15bd159..dafc2d37 100644
--- a/ext/StippleJSONExt.jl
+++ b/ext/StippleJSONExt.jl
@@ -10,12 +10,12 @@ isdefined(Base, :get_extension) ? using JSON : using ..JSON
 # pure proper JSON. For transmissions of bindings, though, we need to allow to pass object names.
 
 JSON.JSONText(json::Stipple.JSONText) = JSON.JSONText(json.s)
-JSON.show_json(io::JSON.Writer.CompactContext, s::JSON.Writer.CS, json::Stipple.JSONText) = write(io, json.s)
+JSON.show_json(io::JSON.Writer.CompactContext, ::JSON.Writer.CS, json::Stipple.JSONText) = write(io, json.s)
 JSON.Writer.lower(json::Stipple.JSONText) = json.s
 
 Stipple.JSONText(json::JSON.JSONText) = Stipple.JSONText(json.s)
 @inline StructTypes.StructType(::Type{JSON.JSONText}) = JSON3.RawType()
-@inline StructTypes.construct(::Type{JSON.JSONText}, json::JSON3.RawValue) = JSONText(string(json))
+@inline StructTypes.construct(::Type{JSON.JSONText}, json::JSON3.RawValue) = JSON.JSONText(string(json))
 @inline JSON3.rawbytes(json::JSON.JSONText) = codeunits(json.s)
 
 end
\ No newline at end of file

From d10c7632e6a6af8089f43e4fc137d2b2a7169be7 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Thu, 19 Oct 2023 13:53:58 +0200
Subject: [PATCH 077/265] Export const for Stipple model name in JS

---
 Project.toml    | 2 +-
 src/Elements.jl | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Project.toml b/Project.toml
index 9d877004..881af688 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.10"
+version = "0.27.11"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/src/Elements.jl b/src/Elements.jl
index 380772db..2e7ec631 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -63,7 +63,7 @@ function vue_integration(::Type{M};
 
   function initStipple(rootSelector){
     Stipple.init($( core_theme ? "{theme: 'stipple-blue'}" : "" ));
-    window.$vue_app_name = new Vue($( replace(vue_app, "'$(Stipple.UNDEFINED_PLACEHOLDER)'"=>Stipple.UNDEFINED_VALUE) ));
+    window.$vue_app_name = window.GENIEMODEL = new Vue($( replace(vue_app, "'$(Stipple.UNDEFINED_PLACEHOLDER)'"=>Stipple.UNDEFINED_VALUE) ));
   } // end of initStipple
 
     "

From df0811455766c4f48cd9320ca0c3c8113cdc73fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sat, 21 Oct 2023 19:58:04 +0200
Subject: [PATCH 078/265] add js_attr(x) for setting julia expressions as js
 attributes

---
 src/Stipple.jl           |  2 +-
 src/stipple/rendering.jl | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index e5926ce9..60ed3f73 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -76,7 +76,7 @@ using Logging, Mixers, Random, Reexport, Dates, Tables
 import Genie.Router.download
 @reexport @using_except Genie.Renderer.Html: mark, div, time, view, render, Headers
 const htmldiv = Html.div
-export render, htmldiv
+export render, htmldiv, js_attr
 @reexport using JSON3
 @reexport using StructTypes
 @reexport using Parameters
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index c7127fc4..56767eee 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -154,4 +154,13 @@ Default rendering of `Reactive` values. Specialize `Stipple.render` to define cu
 """
 function Stipple.render(o::Reactive{T}, fieldname::Union{Symbol,Nothing} = nothing) where {T}
   Stipple.render(o[], fieldname)
-end
\ No newline at end of file
+end
+
+"""
+    js_attr(x)
+
+Renders a Julia expression as Javascript Expression that can be passed as an attribute value in html elements.
+"""
+function js_attr(x)
+  Symbol(replace(json(render(x)), "'" => raw"\'", '"' => '''))
+end

From 80eb60bfdb879091457eedde07f75ddb3c9e597f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sat, 21 Oct 2023 22:07:17 +0200
Subject: [PATCH 079/265] final fix JSONText

---
 ext/StippleJSONExt.jl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ext/StippleJSONExt.jl b/ext/StippleJSONExt.jl
index dafc2d37..5ff53c81 100644
--- a/ext/StippleJSONExt.jl
+++ b/ext/StippleJSONExt.jl
@@ -11,7 +11,7 @@ isdefined(Base, :get_extension) ? using JSON : using ..JSON
 
 JSON.JSONText(json::Stipple.JSONText) = JSON.JSONText(json.s)
 JSON.show_json(io::JSON.Writer.CompactContext, ::JSON.Writer.CS, json::Stipple.JSONText) = write(io, json.s)
-JSON.Writer.lower(json::Stipple.JSONText) = json.s
+JSON.Writer.lower(json::Stipple.JSONText) = json
 
 Stipple.JSONText(json::JSON.JSONText) = Stipple.JSONText(json.s)
 @inline StructTypes.StructType(::Type{JSON.JSONText}) = JSON3.RawType()

From 6b5da19aa42008e8ebbcf319b7144390d040647e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sat, 21 Oct 2023 22:07:46 +0200
Subject: [PATCH 080/265] set version v0.27.12

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index b1bebbe7..11339fdb 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.11"
+version = "0.27.12"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From d1bb17f52b9f856b7cc91588bcc6333d75986d9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sat, 21 Oct 2023 23:00:16 +0200
Subject: [PATCH 081/265] improve docstring for js_attr

---
 src/stipple/rendering.jl | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 56767eee..633649fb 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -160,6 +160,18 @@ end
     js_attr(x)
 
 Renders a Julia expression as Javascript Expression that can be passed as an attribute value in html elements.
+### Example
+```
+using StippleUI
+
+quasar(
+  :btn__toggle,
+  fieldname = :btn_value,
+  options = js_attr([opts(label = "Off", value = false), opts(label = "On", value = true)])
+)
+
+# "<q-btn-toggle v-model=\\"btn_value\\" :options=\\"[{'value':false,'label':'Off'}, {'value':true,'label':'On'}]\\"></q-btn-toggle>"
+```
 """
 function js_attr(x)
   Symbol(replace(json(render(x)), "'" => raw"\'", '"' => '''))

From 027cb7a95c985a4f8b9f4cd69bfde813d4dea5fb Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Mon, 23 Oct 2023 10:34:48 +0200
Subject: [PATCH 082/265] fix docs (#229)

* fix documenter issues, part I

* fix doc errors, part II

* switch to warnonly mode instead of commenting out
---
 docs/make.jl                |  3 ++-
 docs/src/API/elements.md    |  4 ++--
 docs/src/API/layout.md      |  3 ++-
 docs/src/API/namedtuples.md |  2 +-
 docs/src/API/stipple.md     | 15 ++++++---------
 docs/src/API/typography.md  |  2 +-
 src/Stipple.jl              | 16 ++++++++++++++++
 src/stipple/reactivity.jl   | 28 ++++++++++++++++++++++++++++
 8 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/docs/make.jl b/docs/make.jl
index 0dcb0b8b..533f21e8 100644
--- a/docs/make.jl
+++ b/docs/make.jl
@@ -2,11 +2,12 @@ using Documenter
 
 push!(LOAD_PATH,  "../../src")
 
-using Stipple, Stipple.Elements, Stipple.Layout, Stipple.Typography
+using Stipple, Stipple.Elements, Stipple.Layout, Stipple.Typography, Stipple.NamedTuples
 
 makedocs(
     sitename = "Stipple - data dashboards and reactive UIs for Julia",
     format = Documenter.HTML(prettyurls = false),
+    warnonly = true,
     pages = [
         "Home" => "index.md",
         "Tutorials" => [
diff --git a/docs/src/API/elements.md b/docs/src/API/elements.md
index 62e0ec05..d0faa6ce 100644
--- a/docs/src/API/elements.md
+++ b/docs/src/API/elements.md
@@ -1,5 +1,5 @@
 ```@meta
-CurrentModule = Elements
+CurrentModule = Stipple.Elements
 ```
 
 ```@docs
@@ -8,7 +8,7 @@ elem
 vm
 vue_integration
 @iif
-@elsiff
+@elsiif
 @els
 @recur
 @text
diff --git a/docs/src/API/layout.md b/docs/src/API/layout.md
index aa9bcfde..b012a487 100644
--- a/docs/src/API/layout.md
+++ b/docs/src/API/layout.md
@@ -1,11 +1,12 @@
 ```@meta
-CurrentModule = Layout
+CurrentModule = Stipple.Layout
 ```
 
 ```@docs
 layout
 page
 row
+column
 cell
 theme
 ```
diff --git a/docs/src/API/namedtuples.md b/docs/src/API/namedtuples.md
index 309a5adc..586631d6 100644
--- a/docs/src/API/namedtuples.md
+++ b/docs/src/API/namedtuples.md
@@ -1,5 +1,5 @@
 ```@meta
-CurrentModule = NamedTuples
+CurrentModule = Stipple.NamedTuples
 ```
 
 ```@docs
diff --git a/docs/src/API/stipple.md b/docs/src/API/stipple.md
index 363eaee1..2cf84eaa 100644
--- a/docs/src/API/stipple.md
+++ b/docs/src/API/stipple.md
@@ -5,11 +5,8 @@ CurrentModule = Stipple
 ```@docs
 Reactive
 ReactiveModel
-@reactors
-@reactive
-@reactive!
-Settings
-MissingPropertyException
+Settings # missing docstring
+MissingPropertyException # missing docstring
 render
 update!
 watch
@@ -23,10 +20,10 @@ register_components
 components
 setindex_withoutwatchers!
 setfield_withoutwatchers!
-convertvalue
-stipple_parse
+convertvalue # missing docstring
+stipple_parse # missing docstring
 init
-stipple_deps
+stipple_deps # missing docstring
 setup
 Base.push!(m::M, vals::Pair{Symbol, T}; kwargs...) where {T, M <: ReactiveModel}
 rendering_mappings
@@ -34,7 +31,7 @@ julia_to_vue
 parse_jsfunction
 replace_jsfunction!
 replace_jsfunction
-deps_routes
+deps_routes # missing docstring
 deps
 @R_str
 on
diff --git a/docs/src/API/typography.md b/docs/src/API/typography.md
index 689bea82..c44160d3 100644
--- a/docs/src/API/typography.md
+++ b/docs/src/API/typography.md
@@ -1,5 +1,5 @@
 ```@meta
-CurrentModule = Typography
+CurrentModule = Stipple.Typography
 ```
 
 ```@docs
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 60ed3f73..a7a1c084 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -772,6 +772,22 @@ end
 
 @specialize
 
+"""
+Create a js expression that is bound to a field of a vue component.
+Internally this is nothing than conversion to a Symbol, but it's a short version for creating symbols with spaces.
+
+### Example
+
+```
+julia> btn("", @click("toggleFullscreen"), icon = R"is_fullscreen ? 'fullscreen_exit' : 'fullscreen'")
+"<q-btn label v-on:click=\"toggleFullscreen\" :icon=\"is_fullscreen ? 'fullscreen_exit' : 'fullscreen'\"></q-btn>"
+```
+Note: For expressions that contain only variable names, we recommend the Symbol notation
+```
+julia> btn("", @click("toggleFullscreen"), icon = :fullscreen_icon)
+"<q-btn label v-on:click=\"toggleFullscreen\" :icon=\"fullscreen_icon\"></q-btn>"
+```
+"""
 macro R_str(s)
   :(Symbol($s))
 end
diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index af5dbd5f..52274fb4 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -1,3 +1,17 @@
+"""
+        mutable struct Reactive{T} <: Observables.AbstractObservable{T}
+
+`Reactive` is a the base type for variables that are handled by a model. It is an `AbstractObservable` of which the content is 
+obtained by appending `[]` after the `Reactive` variable's name.
+For convenience, `Reactive` can be abbreviated by `R`.
+
+There are several methods of creating a Reactive variable:
+- `r = Reactive(8)`
+- `r = Reactive{Float64}(8)`
+- `r = Reactive{Float64}(8, READONLY)`
+- `r = Reactive{String}("Hello", PRIVATE)`
+- `r = Reactive(jsfunction"console.log('Hi')", JSFUNCTION)`
+"""
 mutable struct Reactive{T} <: Observables.AbstractObservable{T}
   o::Observables.Observable{T}
   r_mode::Int
@@ -15,6 +29,20 @@ mutable struct Reactive{T} <: Observables.AbstractObservable{T}
   Reactive{Any}(@nospecialize(o)) = new{Any}(Observable{Any}(o), PUBLIC, false, false, "")
 end
 
+"""
+        mutable struct Reactive{T} <: Observables.AbstractObservable{T}
+
+`Reactive` is a the base type for variables that are handled by a model. It is an `AbstractObservable` of which the content is 
+obtained by appending `[]` after the `Reactive` variable's name.
+For convenience, `Reactive` can be abbreviated by `R`.
+
+There are several methods of creating a Reactive variable:
+- `r = Reactive(8)`
+- `r = Reactive{Float64}(8)`
+- `r = Reactive{Float64}(8, READONLY)`
+- `r = Reactive{String}("Hello", PRIVATE)`
+- `r = Reactive(jsfunction"console.log('Hi')", JSFUNCTION)`
+"""
 Reactive(r::T, arg1, args...) where T = convert(Reactive{T}, (r, arg1, args...))
 Reactive(r::T) where T = convert(Reactive{T}, r)
 

From b31d573d2f7f8af04803e1eaa7377ad61b10b164 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 24 Oct 2023 00:04:24 +0200
Subject: [PATCH 083/265] add automatic json conversion for attributes

---
 src/Stipple.jl | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index a7a1c084..b8f57afe 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -926,10 +926,16 @@ function attributes(kwargs::Union{Vector{<:Pair}, Base.Iterators.Pairs, Dict},
       k = mappings[string(k)]
     end
 
-    attr_key = string((isa(v, Symbol) && ! startswith(string(k), ":") &&
+    v_isa_jsexpr = v isa Symbol || !isa(v, Union{AbstractString, Bool, Number})
+    attr_key = string((v_isa_jsexpr && ! startswith(string(k), ":") &&
                 ! ( startswith(string(k), "v-") || startswith(string(k), "v" * Genie.config.html_parser_char_dash) ) ? ":" : ""), "$k") |> Symbol
-    attr_val = isa(v, Symbol) && ! startswith(string(k), ":") ? Stipple.julia_to_vue(v) : v
-
+    attr_val = if isa(v, Symbol) && ! startswith(string(k), ":")
+      Stipple.julia_to_vue(v)
+    elseif v isa Symbol || ! v_isa_jsexpr
+      v
+    else
+      js_attr(v)
+    end
     attrs[attr_key] = attr_val
   end
 

From 57a065d78bcc3b116024c39814f8b4f55403789e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 24 Oct 2023 00:38:20 +0200
Subject: [PATCH 084/265] handle kw syntax for keys ending with '!'

---
 src/Stipple.jl | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index b8f57afe..9ce232b4 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -927,9 +927,10 @@ function attributes(kwargs::Union{Vector{<:Pair}, Base.Iterators.Pairs, Dict},
     end
 
     v_isa_jsexpr = v isa Symbol || !isa(v, Union{AbstractString, Bool, Number})
-    attr_key = string((v_isa_jsexpr && ! startswith(string(k), ":") &&
-                ! ( startswith(string(k), "v-") || startswith(string(k), "v" * Genie.config.html_parser_char_dash) ) ? ":" : ""), "$k") |> Symbol
-    attr_val = if isa(v, Symbol) && ! startswith(string(k), ":")
+    k_str = string(k)
+    attr_key = string((v_isa_jsexpr && ! startswith(k_str, ":") &&
+                ! (endswith(k_str, "!") || startswith(k_str, "v-") || startswith(k_str, "v" * Genie.config.html_parser_char_dash)) ? ":" : ""), "$k") |> Symbol
+    attr_val = if isa(v, Symbol) && ! startswith(k_str, ":")
       Stipple.julia_to_vue(v)
     elseif v isa Symbol || ! v_isa_jsexpr
       v

From 818ab29ae58c9e268584543735b6b07b478aac72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 24 Oct 2023 06:56:59 +0200
Subject: [PATCH 085/265] support vectors in class attribute

---
 src/Layout.jl  |  4 ++++
 src/Stipple.jl | 11 ++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index e6f85127..af9ea60a 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -114,6 +114,10 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
   # while class will contain a js expression as Symbol
   # if either class is a Symbol or class! is not nothing.
   # So an argument of the form `class! = "'my-class' + 'your-class'` is supported
+  # Furthermore Vectors are now supported
+  class isa Vector && (class = Symbol(join(js_attr.(class), " + ")))
+  class! isa Vector && (class! = join(js_attr.(class!), " + "))
+  
   classes = String[]
   if class isa Symbol
     class! !== nothing && (class = Symbol("$class! + $class"))
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 9ce232b4..18a4efea 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -921,15 +921,16 @@ function attributes(kwargs::Union{Vector{<:Pair}, Base.Iterators.Pairs, Dict},
   for (k,v) in kwargs
     v === nothing && continue
     mapped = false
+    
+    k_str = string(k)
 
-    if haskey(mappings, string(k))
-      k = mappings[string(k)]
+    if haskey(mappings, k_str)
+      k_str = mappings[k_str]
     end
-
+    
     v_isa_jsexpr = v isa Symbol || !isa(v, Union{AbstractString, Bool, Number})
-    k_str = string(k)
     attr_key = string((v_isa_jsexpr && ! startswith(k_str, ":") &&
-                ! (endswith(k_str, "!") || startswith(k_str, "v-") || startswith(k_str, "v" * Genie.config.html_parser_char_dash)) ? ":" : ""), "$k") |> Symbol
+                ! (endswith(k_str, "!") || startswith(k_str, "v-") || startswith(k_str, "v" * Genie.config.html_parser_char_dash)) ? ":" : ""), k_str) |> Symbol
     attr_val = if isa(v, Symbol) && ! startswith(k_str, ":")
       Stipple.julia_to_vue(v)
     elseif v isa Symbol || ! v_isa_jsexpr

From baa22aa8ddc109168021b404c52e192ded254cb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 26 Oct 2023 23:27:29 +0200
Subject: [PATCH 086/265] rename vue macros to `@if`, `@else`, `@elseif` and
 `@for`

---
 src/Elements.jl  | 60 ++++++++++++++++++++++++++++++++++++++----------
 test/runtests.jl | 17 ++++++++++++++
 2 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index 2e7ec631..1bae55d1 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -10,9 +10,12 @@ using Stipple
 
 import Genie.Renderer.Html: HTMLString, normal_element
 
-export root, elem, vm, @iif, @elsiif, @els, @recur, @text, @bind, @data, @on, @click, @showif
+export root, elem, vm, @if, @else, @elseif, @for, @text, @bind, @data, @on, @click, @showif
 export stylesheet, kw_to_str
 
+# deprecated
+export @iif, @elsiif, @els, @recur
+
 #===#
 
 """
@@ -154,7 +157,7 @@ function kw_to_str(; kwargs...)
 end
 
 """
-    @iif(expr)
+    @if(expr)
 
 Generates `v-if` Vue.js code using `expr` as the condition.
 <https://vuejs.org/v2/api/#v-if>
@@ -162,16 +165,16 @@ Generates `v-if` Vue.js code using `expr` as the condition.
 ### Example
 
 ```julia
-julia> span("Bad stuff's about to happen", class="warning", @iif(:warning))
+julia> span("Bad stuff's about to happen", class="warning", @if(:warning))
 "<span class=\"warning\" v-if='warning'>Bad stuff's about to happen</span>"
 ```
 """
-macro iif(expr)
+macro var"if"(expr)
   Expr(:kw, Symbol("v-if"), esc_expr(expr))
 end
 
 """
-    @elsiif(expr)
+    @elseif(expr)
 
 Generates `v-else-if` Vue.js code using `expr` as the condition.
 <https://vuejs.org/v2/api/#v-else-if>
@@ -179,16 +182,16 @@ Generates `v-else-if` Vue.js code using `expr` as the condition.
 ### Example
 
 ```julia
-julia> span("An error has occurred", class="error", @elsiif(:error))
+julia> span("An error has occurred", class="error", @elseif(:error))
 "<span class=\"error\" v-else-if='error'>An error has occurred</span>"
 ```
 """
-macro elsiif(expr)
+macro var"elseif"(expr)
   Expr(:kw, Symbol("v-else-if"), esc_expr(expr))
 end
 
 """
-    @els(expr)
+    @else(expr)
 
 Generates `v-else` Vue.js code using `expr` as the condition.
 <https://vuejs.org/v2/api/#v-else>
@@ -196,11 +199,11 @@ Generates `v-else` Vue.js code using `expr` as the condition.
 ### Example
 
 ```julia
-julia> span("Might want to keep an eye on this", class="notice", @els(:notice))
+julia> span("Might want to keep an eye on this", class="notice", @else(:notice))
 "<span class=\"notice\" v-else='notice'>Might want to keep an eye on this</span>"
 ```
 """
-macro els(expr)
+macro var"else"(expr)
   Expr(:kw, Symbol("v-else"), esc_expr(expr))
 end
 
@@ -211,15 +214,48 @@ Generates `v-for` directive to render a list of items based on an array.
 ### Example
 
 ```julia
-julia> p(" {{todo}} ", class="warning", @recur(:"todo in todos"))
+julia> p(" {{todo}} ", class="warning", @for(:"todo in todos"))
 "<p v-for='todo in todos'>\n {{todo}} \n</p>\n"
 ```
 
 """
-macro recur(expr)
+macro var"for"(expr)
   Expr(:kw, Symbol("v-for"), esc_expr(expr))
 end
 
+
+"""
+`@recur` is deprecated and has been replaced by `@for`.
+It is kept for compatibility reasons and will be removed in a future release.
+"""
+macro iif(expr)
+  esc(:(@if($expr)))
+end
+
+"""
+`@recur` is deprecated and has been replaced by `@for`.
+It is kept for compatibility reasons and will be removed in a future release.
+"""
+macro els(expr)
+  esc(:(@else($expr)))
+end
+
+"""
+`@recur` is deprecated and has been replaced by `@for`.
+It is kept for compatibility reasons and will be removed in a future release.
+"""
+macro elsiif(expr)
+  esc(:(@elseif($expr)))
+end
+
+"""
+`@recur` is deprecated and has been replaced by `@for`.
+It is kept for compatibility reasons and will be removed in a future release.
+"""
+macro recur(expr)
+  esc(:(@for($expr)))
+end
+
 """
     @text(expr)
 
diff --git a/test/runtests.jl b/test/runtests.jl
index 73765ea0..57fb4221 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -352,6 +352,23 @@ end
     @test cell(col = -1, sm = 9) == "<div class=\"st-col col-sm-9\"></div>"
 end
 
+@testset "Vue Conditionals and Iterator" begin
+    el = column("Hello", @if(:visible))
+    @test contains(el, "v-if=\"visible\"")
+
+    el = column("Hello", @else(:visible))
+    @test contains(el, "v-else=\"visible\"")
+
+    el = column("Hello", @elseif(:visible))
+    @test contains(el, "v-else-if=\"visible\"")
+
+    el = row(@showif("n > 0"), "The result is '{{ n }}'")
+    @test el == "<div v-show=\"n > 0\" class=\"row\">The result is '{{ n }}'</div>"
+
+    el = row(@for("i in [1, 2, 3, 4, 5]"), "{{ i }}")
+    @test contains(el, "v-for=\"i in [1, 2, 3, 4, 5]\"")
+end
+
 @testset "Compatibility of JSONText between JSON3 and JSON" begin
     using JSON
     using Stipple

From 19d58268d2a98524997ff0e331f2f028f0cfb08f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 26 Oct 2023 23:54:35 +0200
Subject: [PATCH 087/265] use macro aliasing to be compatible with all Julia
 versions

---
 src/Elements.jl | 47 +++++++++--------------------------------------
 1 file changed, 9 insertions(+), 38 deletions(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index 1bae55d1..6f69ed05 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -169,11 +169,12 @@ julia> span("Bad stuff's about to happen", class="warning", @if(:warning))
 "<span class=\"warning\" v-if='warning'>Bad stuff's about to happen</span>"
 ```
 """
-macro var"if"(expr)
+macro iif(expr)
   Expr(:kw, Symbol("v-if"), esc_expr(expr))
 end
+const var"@if" = var"@iif"
 
-"""
+  """
     @elseif(expr)
 
 Generates `v-else-if` Vue.js code using `expr` as the condition.
@@ -186,9 +187,10 @@ julia> span("An error has occurred", class="error", @elseif(:error))
 "<span class=\"error\" v-else-if='error'>An error has occurred</span>"
 ```
 """
-macro var"elseif"(expr)
+macro elsiif(expr)
   Expr(:kw, Symbol("v-else-if"), esc_expr(expr))
 end
+const var"@elseif" = var"@elsiif"
 
 """
     @else(expr)
@@ -203,9 +205,10 @@ julia> span("Might want to keep an eye on this", class="notice", @else(:notice))
 "<span class=\"notice\" v-else='notice'>Might want to keep an eye on this</span>"
 ```
 """
-macro var"else"(expr)
+macro els(expr)
   Expr(:kw, Symbol("v-else"), esc_expr(expr))
 end
+const var"@else" = var"@els"
 
 """
 Generates `v-for` directive to render a list of items based on an array.
@@ -218,43 +221,11 @@ julia> p(" {{todo}} ", class="warning", @for(:"todo in todos"))
 "<p v-for='todo in todos'>\n {{todo}} \n</p>\n"
 ```
 
-"""
-macro var"for"(expr)
-  Expr(:kw, Symbol("v-for"), esc_expr(expr))
-end
-
-
-"""
-`@recur` is deprecated and has been replaced by `@for`.
-It is kept for compatibility reasons and will be removed in a future release.
-"""
-macro iif(expr)
-  esc(:(@if($expr)))
-end
-
-"""
-`@recur` is deprecated and has been replaced by `@for`.
-It is kept for compatibility reasons and will be removed in a future release.
-"""
-macro els(expr)
-  esc(:(@else($expr)))
-end
-
-"""
-`@recur` is deprecated and has been replaced by `@for`.
-It is kept for compatibility reasons and will be removed in a future release.
-"""
-macro elsiif(expr)
-  esc(:(@elseif($expr)))
-end
-
-"""
-`@recur` is deprecated and has been replaced by `@for`.
-It is kept for compatibility reasons and will be removed in a future release.
 """
 macro recur(expr)
-  esc(:(@for($expr)))
+  Expr(:kw, Symbol("v-for"), esc_expr(expr))
 end
+const var"@for" = var"@recur"
 
 """
     @text(expr)

From 68757f485ab1ad7a01bc6146484c17a06c383773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 27 Oct 2023 00:37:15 +0200
Subject: [PATCH 088/265] update docs

---
 docs/src/API/elements.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/API/elements.md b/docs/src/API/elements.md
index d0faa6ce..43f6bb2d 100644
--- a/docs/src/API/elements.md
+++ b/docs/src/API/elements.md
@@ -7,10 +7,10 @@ root
 elem
 vm
 vue_integration
-@iif
-@elsiif
-@els
-@recur
+@if
+@elseif
+@else
+@for
 @text
 @bind
 @data

From 6f78337672570121ff9d15480249547895ea4845 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Mon, 30 Oct 2023 14:15:15 +0100
Subject: [PATCH 089/265] Imporove support for WebThreads

---
 src/Pages.jl   | 8 ++++----
 src/Stipple.jl | 6 +++++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/Pages.jl b/src/Pages.jl
index ddfe7785..e7f1f0df 100644
--- a/src/Pages.jl
+++ b/src/Pages.jl
@@ -33,7 +33,7 @@ function Page(  route::Union{Route,String};
                 layout::Union{Genie.Renderers.FilePath,<:AbstractString,ParsedHTMLString,Nothing,Function} = nothing,
                 context::Module = @__MODULE__,
                 debounce::Int = Stipple.JS_DEBOUNCE_TIME,
-                transport::Module = Genie.WebChannels,
+                transport::Module = Stipple.WEB_TRANSPORT[],
                 core_theme::Bool = true,
                 kwargs...
               ) where {M<:ReactiveModel}
@@ -56,15 +56,15 @@ function Page(  route::Union{Route,String};
           else
             view
           end
-  
+
   route = isa(route, String) ? Route(; method = GET, path = route) : route
   layout = isa(layout, String) && length(layout) < Stipple.IF_ITS_THAT_LONG_IT_CANT_BE_A_FILENAME && isfile(layout) ? filepath(layout) :
             isa(layout, ParsedHTMLString) || isa(layout, String) ? string(layout) :
               layout
 
-  route.action = () -> (isa(view, Function) ? html! : html)(view; layout, context, model = (isa(model,Function) ? Base.invokelatest(model) : model), kwargs...)
+  route.action = () -> (isa(view, Function) ? html! : html)(view; layout, context, model = (isa(model, Function) ? Base.invokelatest(model) : model), kwargs...)
 
-  page = Page(route, view, typeof((isa(model,Function) || isa(model,DataType) ? Base.invokelatest(model) : model)), layout, context)
+  page = Page(route, view, typeof((isa(model, Function) || isa(model, DataType) ? Base.invokelatest(model) : model)), layout, context)
 
   if isempty(_pages)
     push!(_pages, page)
diff --git a/src/Stipple.jl b/src/Stipple.jl
index e5926ce9..0940f048 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -203,7 +203,11 @@ if !isdefined(Base, :get_extension)
 end
 
 function __init__()
-  Genie.config.websockets_server = true
+  if (get(ENV, "STIPPLE_TRANSPORT", "webchannels") |> lowercase) == "webthreads"
+    webtransport!(Genie.WebThreads)
+  else
+    Genie.config.websockets_server = true
+  end
   deps_routes(core_theme = true)
 
   @static if !isdefined(Base, :get_extension)

From 8ece0de68a62b3d577ca0691c3d166db7ecfefbe Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Mon, 30 Oct 2023 14:15:35 +0100
Subject: [PATCH 090/265] v0.27.13

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 11339fdb..6213fa6a 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.12"
+version = "0.27.13"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 87e2a0e441e3bca737e368bc358dbbea7d0b1dfd Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Mon, 30 Oct 2023 14:19:27 +0100
Subject: [PATCH 091/265] Bump min version for Genie

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 6213fa6a..ea9ac7bb 100644
--- a/Project.toml
+++ b/Project.toml
@@ -26,7 +26,7 @@ Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 [compat]
 DataFrames = "1"
 FilePathsBase = "0.9"
-Genie = "5.18"
+Genie = "5.20"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"

From abe1852227650adbd9cc0fcc5a0a59963c3f6e94 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <essenciary@users.noreply.github.com>
Date: Tue, 31 Oct 2023 16:30:04 +0100
Subject: [PATCH 092/265] Update Project.toml to please new compat checks

---
 Project.toml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Project.toml b/Project.toml
index ea9ac7bb..6c9be5c9 100644
--- a/Project.toml
+++ b/Project.toml
@@ -25,18 +25,22 @@ Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 
 [compat]
 DataFrames = "1"
+Dates = "1.6"
 FilePathsBase = "0.9"
 Genie = "5.20"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"
 JSON3 = "1.9"
+Logging = "1.6"
 MacroTools = "0.5"
 Mixers = "0.1.2"
 Observables = "0.3, 0.4, 0.5"
 OffsetArrays = "1"
 OrderedCollections = "1"
 Parameters = "0.12"
+Pkg = "1.6"
+Random = "1.6"
 Reexport = "1"
 Requires = "1"
 StructTypes = "1.8"

From fc35a7ef7213fe262d72de7029563b42121e7279 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 31 Oct 2023 17:16:36 +0100
Subject: [PATCH 093/265] support expressions in `@for` macro

---
 src/Elements.jl | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index 6f69ed05..103071b6 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -7,6 +7,7 @@ module Elements
 
 import Genie
 using Stipple
+using MacroTools
 
 import Genie.Renderer.Html: HTMLString, normal_element
 
@@ -214,15 +215,39 @@ const var"@else" = var"@els"
 Generates `v-for` directive to render a list of items based on an array.
 <https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for>
 
-### Example
+`@for` supports both js expressions as String or a Julia expression with Vectors or Dicts
+
+## Example
 
+### Javascript
 ```julia
-julia> p(" {{todo}} ", class="warning", @for(:"todo in todos"))
-"<p v-for='todo in todos'>\n {{todo}} \n</p>\n"
+julia> p(" {{todo}} ", class="warning", @for("todo in todos"))
+\"\"\"
+<p v-for='todo in todos'>
+    {{todo}}
+</p>
+\"\"\"
 ```
+### Julia expression
+```julia
+julia> dict = Dict(:a => "b", :c => 4);
+julia> ul(li("k: {{ k }}, v: {{ v }}, i: {{ i }}", @for((v, k, i) in dict)))
+\"\"\"
+<ul>
+    <li v-for="(v, k, i) in {'a':'b','c':4}">
+        k: {{ k }}, v: {{ v }}, i: {{ i }}
+    </li>
+</ul>
+\"\"\"
+```
+Note the inverted order of value, key and index compared to Stipple destructuring.
+It is also possible to loop over `(v, k)` or `v`; index will always be zero-based
 
 """
 macro recur(expr)
+  Base.isexpr(expr, :call) && expr.args[1] == :in && (expr.args[2] = string(expr.args[2]))
+  expr = (MacroTools.@capture(expr, y_ in z_)) ? :("$($y) in $($z isa Union{AbstractDict, AbstractVector} ? js_attr($z) : $z)") : :("$($expr)")
+
   Expr(:kw, Symbol("v-for"), esc_expr(expr))
 end
 const var"@for" = var"@recur"

From 3e9bf4563f462c8c774e4b791b964b8bd16ee135 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 31 Oct 2023 17:57:46 +0100
Subject: [PATCH 094/265] replace Base.isexpr for compatibility reasons

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

diff --git a/src/Elements.jl b/src/Elements.jl
index 103071b6..ec9c204a 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -245,7 +245,7 @@ It is also possible to loop over `(v, k)` or `v`; index will always be zero-base
 
 """
 macro recur(expr)
-  Base.isexpr(expr, :call) && expr.args[1] == :in && (expr.args[2] = string(expr.args[2]))
+  expr isa Expr && expr.head == :call && expr.args[1] == :in && (expr.args[2] = string(expr.args[2]))
   expr = (MacroTools.@capture(expr, y_ in z_)) ? :("$($y) in $($z isa Union{AbstractDict, AbstractVector} ? js_attr($z) : $z)") : :("$($expr)")
 
   Expr(:kw, Symbol("v-for"), esc_expr(expr))

From 22610d8769eceea1c549d6b95c2407f6aca519db Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 31 Oct 2023 18:11:42 +0100
Subject: [PATCH 095/265] set version v0.27.14

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 6c9be5c9..3e704acd 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.13"
+version = "0.27.14"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 039f74dbd4df982444396ea873b99b9b960d62bb Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 8 Nov 2023 13:44:38 +0100
Subject: [PATCH 096/265] support indexing with `end`

---
 src/stipple/reactivity.jl |  3 +++
 test/runtests.jl          | 16 ++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index 52274fb4..b4ce33be 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -121,6 +121,9 @@ end
 import Base.map!
 @inline Base.map!(f::F, r::Reactive, os...; update::Bool=true) where F = Base.map!(f::F, getfield(r, :o), os...; update=update)
 
+Base.axes(r::Reactive, args...) = Base.axes(getfield(getfield(r, :o), :val), args...)
+Base.lastindex(r::Reactive, args...) = Base.lastindex(getfield(getfield(r, :o), :val), args...)
+
 const R = Reactive
 const PUBLIC = 1
 const PRIVATE = 2
diff --git a/test/runtests.jl b/test/runtests.jl
index 57fb4221..808ebf93 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -378,4 +378,20 @@ end
     @test Stipple.json(jt1) == "json text 1"
     @test JSON.json(jt2) == "json text 2"
     @test Stipple.json(jt2) == "json text 2"
+end
+
+@testset "Indexing with `end`" begin
+    r = R([1, 2, 3])
+    on(r) do r
+        r[end - 1] += 1
+    end
+    @test r[end] == 3
+    r[end] = 4
+    @test r[end - 1] == 3
+    @test r[end] == 4
+
+    df = DataFrame(:a => 1:3, :b => 12:14)
+    @test df[end, 1] == 3
+    @test df[end, end] == 14
+    @test df[:, end] == 12:14
 end
\ No newline at end of file

From bf51cc42ba75079a4fcd45e5adf7a5dee7623866 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 9 Nov 2023 09:14:28 +0100
Subject: [PATCH 097/265] fix handling of ParsedHTML in `@page` macro

---
 src/Pages.jl     |  9 ++++++---
 test/runtests.jl | 27 ++++++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/Pages.jl b/src/Pages.jl
index e7f1f0df..5e02f51d 100644
--- a/src/Pages.jl
+++ b/src/Pages.jl
@@ -48,9 +48,12 @@ function Page(  route::Union{Route,String};
           else
             model
           end
-
-  view =  if isa(view, ParsedHTMLString) || isa(view, Vector{<:AbstractString})
-            string(view)
+  view =  if isa(view, Function) || isa(view, ParsedHTMLString)
+            view
+          elseif isa(view, Vector{ParsedHTMLString})
+            ParsedHTMLString(view)
+          elseif isa(view, Vector{<:AbstractString})
+            join(view)
           elseif isa(view, AbstractString)
             isfile(view) ? filepath(view) : view
           else
diff --git a/test/runtests.jl b/test/runtests.jl
index 57fb4221..ab8ecea3 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -378,4 +378,29 @@ end
     @test Stipple.json(jt1) == "json text 1"
     @test JSON.json(jt2) == "json text 2"
     @test Stipple.json(jt2) == "json text 2"
-end
\ No newline at end of file
+end
+
+@testset "@page macro with ParsedHTMLStrings" begin
+    using Genie.HTTPUtils.HTTP
+    up()
+
+    p1, p2 = ParsedHTMLString("""<q-btn @click="i = i+1">Change @click $(randstring(10))</q-btn>"""), ParsedHTMLString("<a></a>")
+    ui() = p1
+    @page("/", ui)
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    @test match(r"<q-btn.*q-btn>", payload).match == p1 
+    @test contains(payload, """<link href="/stippleui.jl/master/assets/""")
+
+    @page("/", ui())
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    @test match(r"<q-btn.*q-btn>", payload).match == p1 
+    @test contains(payload, """<link href="/stippleui.jl/master/assets/""")
+    
+    # Supply a String instead of a ParsedHTMLString. As the '@' character is not correctly parsed, this test fails
+    @page("/", ui().data)
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    @test match(r"<q-btn.*q-btn>", payload).match != p1
+    @test contains(payload, """<link href="/stippleui.jl/master/assets/""")
+
+    down()
+end

From 138a4da1b492ba203c0042f4b8302c806e413050 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 9 Nov 2023 10:18:36 +0100
Subject: [PATCH 098/265] fix ParsedHTMLString tests

---
 test/runtests.jl | 56 +++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/test/runtests.jl b/test/runtests.jl
index ab8ecea3..9c663797 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -384,23 +384,59 @@ end
     using Genie.HTTPUtils.HTTP
     up()
 
-    p1, p2 = ParsedHTMLString("""<q-btn @click="i = i+1">Change @click $(randstring(10))</q-btn>"""), ParsedHTMLString("<a></a>")
-    ui() = p1
+    # rand is needed to avoid re-using cached routes
+    view() = [ParsedHTMLString("""<div id="test" @click="i = i+1">Change @click</div>"""), a("test $(rand(1:10^10))")]
+    p1 = view()[1]
+    
+    ui() = ParsedHTMLString(view())
+
+    # route function resulting in ParsedHTMLString
+    @page("/", ui)
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    @test match(r"<div id=\"test\" .*?div>", payload).match == p1
+    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+
+    # route constant ParsedHTMLString
+    @page("/", ui())
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    @test match(r"<div id=\"test\" .*?div>", payload).match == p1 
+    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+    
+    # ----------------------------
+
+    ui() = view()
+
+    # route function resulting in Vector{ParsedHTMLString}
     @page("/", ui)
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
-    @test match(r"<q-btn.*q-btn>", payload).match == p1 
-    @test contains(payload, """<link href="/stippleui.jl/master/assets/""")
+    @test match(r"<div id=\"test\" .*?div>", payload).match == p1
+    @test contains(payload, r"<a>test \d+</a>")
 
+    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+
+    # route constant Vector{ParsedHTMLString}
     @page("/", ui())
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
-    @test match(r"<q-btn.*q-btn>", payload).match == p1 
-    @test contains(payload, """<link href="/stippleui.jl/master/assets/""")
+    @test match(r"<div id=\"test\" .*?div>", payload).match == p1 
+    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+
+    # Supply a String instead of a ParsedHTMLString.
+    # As the '@' character is not correctly parsed, the match is expected to differ
+    ui() = join(view())
+    
+    # route function resulting in String
+    @page("/", ui)
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    @test match(r"<div id=\"test\" .*?div>", payload).match != p1
+    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+    @test contains(payload, r"<a>test \d+</a>")
     
-    # Supply a String instead of a ParsedHTMLString. As the '@' character is not correctly parsed, this test fails
-    @page("/", ui().data)
+    # route constant String
+    @page("/", ui())
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
-    @test match(r"<q-btn.*q-btn>", payload).match != p1
-    @test contains(payload, """<link href="/stippleui.jl/master/assets/""")
+    @test match(r"<div id=\"test\" .*?div>", payload).match != p1
+    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+    @test contains(payload, r"<a>test \d+</a>")
 
     down()
 end

From 5307dd9966a373b896aeddf3fac5223da555ea84 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 9 Nov 2023 11:35:53 +0100
Subject: [PATCH 099/265] change ParsedHTMLString test to random port

---
 test/runtests.jl | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/test/runtests.jl b/test/runtests.jl
index 9c663797..3d60a8a9 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -382,8 +382,10 @@ end
 
 @testset "@page macro with ParsedHTMLStrings" begin
     using Genie.HTTPUtils.HTTP
-    up()
-
+    
+    port = rand(8001:9000)
+    up(;port, ws_port = port)
+    
     # rand is needed to avoid re-using cached routes
     view() = [ParsedHTMLString("""<div id="test" @click="i = i+1">Change @click</div>"""), a("test $(rand(1:10^10))")]
     p1 = view()[1]
@@ -392,13 +394,13 @@ end
 
     # route function resulting in ParsedHTMLString
     @page("/", ui)
-    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match == p1
     @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
 
     # route constant ParsedHTMLString
     @page("/", ui())
-    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match == p1 
     @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
     
@@ -408,7 +410,7 @@ end
 
     # route function resulting in Vector{ParsedHTMLString}
     @page("/", ui)
-    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match == p1
     @test contains(payload, r"<a>test \d+</a>")
 
@@ -416,7 +418,7 @@ end
 
     # route constant Vector{ParsedHTMLString}
     @page("/", ui())
-    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match == p1 
     @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
 
@@ -426,14 +428,14 @@ end
     
     # route function resulting in String
     @page("/", ui)
-    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match != p1
     @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
     @test contains(payload, r"<a>test \d+</a>")
     
     # route constant String
     @page("/", ui())
-    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:8000")))
+    payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match != p1
     @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
     @test contains(payload, r"<a>test \d+</a>")

From 02657a34cb7418e5f96cb955efe1e30ce06edd19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 9 Nov 2023 17:28:10 +0100
Subject: [PATCH 100/265] don't export Genie.Renderers.Html.menu

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

diff --git a/src/Stipple.jl b/src/Stipple.jl
index d34440f1..a9fa4040 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -74,7 +74,7 @@ using Logging, Mixers, Random, Reexport, Dates, Tables
 @reexport using Observables
 @reexport @using_except Genie: download
 import Genie.Router.download
-@reexport @using_except Genie.Renderer.Html: mark, div, time, view, render, Headers
+@reexport @using_except Genie.Renderers.Html: mark, div, time, view, render, Headers, menu
 const htmldiv = Html.div
 export render, htmldiv, js_attr
 @reexport using JSON3

From 8cf59f0f52f5aed2c69e0f13f0558f421f2c617c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 9 Nov 2023 17:30:16 +0100
Subject: [PATCH 101/265] set version 0.27.15 add Genie compat v5.21.1

---
 Project.toml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Project.toml b/Project.toml
index 3e704acd..594e4401 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.14"
+version = "0.27.15"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
@@ -27,7 +27,7 @@ Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 DataFrames = "1"
 Dates = "1.6"
 FilePathsBase = "0.9"
-Genie = "5.20"
+Genie = "5.21.1"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"

From 11ae4ccb99417a452ad8b014fd6c7025c6c10635 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 9 Nov 2023 23:27:46 +0100
Subject: [PATCH 102/265] add `add_css()` and `remove_css()` including docs

---
 src/Layout.jl    | 44 +++++++++++++++++++++++++++++++++++++++++++-
 test/runtests.jl | 23 ++++++++++++++++++++++-
 2 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index af9ea60a..e52a02cf 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -7,7 +7,7 @@ module Layout
 
 using Genie, Stipple
 
-export layout
+export layout, add_css, remove_css
 export page, app, row, column, cell, container, flexgrid_kwargs
 
 export theme
@@ -300,5 +300,47 @@ function theme(; core_theme::Bool = true) :: Vector{String}
   output
 end
 
+"""
+    add_css(css::Function; update = true)
+
+Add a css function to the `THEMES`.
+
+### Params
+* `css::Function` - a function that results in a vector of style elements
+* `update` - determines, whether existing style sheets with the same name shall be removed
+
+### Example
+```julia
+# css to remove the stipple-core color format of q-table rows
+# (this will enable font color setting by the attribute `table-class`)
+
+function mycss()
+  [
+    style(\"\"\"
+    .stipple-core .q-table tbody tr { color: inherit; }
+    \"\"\")
+  ]
+end
+
+add_css(mycss)
+```
+`
+"""
+function add_css(css::Function; update = true)
+  # removal can only be done by name, as the old function has already been overwritten
+  update && remove_css(css::Function, byname = true)
+  push!(Stipple.Layout.THEMES, css)
+end
+
+"""
+    remove_css(css::Function, byname::Bool = false)
+
+Remove a stylesheet function from the stack (`Stipple.Layout.THEMES`)
+If called with `byname = true`, the function will be identified by name rather than by the function itself.
+"""
+function remove_css(css::Function; byname::Bool = false)
+  inds = byname ? nameof.(Stipple.Layout.THEMES) .== nameof(css) : Stipple.Layout.THEMES .== css
+  deleteat!(Stipple.Layout.THEMES, inds)
+end
 
 end
diff --git a/test/runtests.jl b/test/runtests.jl
index 57fb4221..3612fb1c 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -378,4 +378,25 @@ end
     @test Stipple.json(jt1) == "json text 1"
     @test JSON.json(jt2) == "json text 2"
     @test Stipple.json(jt2) == "json text 2"
-end
\ No newline at end of file
+end
+
+@testset "adding and removing stylesheets" begin
+    function my_css()
+        [style("""
+            .stipple-core .q-table tbody tr { color: inherit; }
+        """)]
+    end
+
+    add_css(my_css)
+    @test Stipple.Layout.THEMES[end] == my_css
+    
+    n = length(Stipple.Layout.THEMES)
+    remove_css(my_css)
+    @test length(Stipple.Layout.THEMES) == n - 1
+    @test findfirst(==(my_css), Stipple.Layout.THEMES) === nothing
+    
+    add_css(my_css)
+    @test Stipple.Layout.THEMES[end] == my_css
+    remove_css(my_css, byname = true)
+    @test findfirst(==(my_css), Stipple.Layout.THEMES) === nothing
+end

From b1c359c601b407e8c97765ce684d39fcb08daf6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 9 Nov 2023 23:28:31 +0100
Subject: [PATCH 103/265] set version v0.27.16

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 594e4401..1097f2cc 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.15"
+version = "0.27.16"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 89ce9a90e2b8dadc0007fba9e01e7b20ba2defc7 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 10 Nov 2023 10:47:55 +0100
Subject: [PATCH 104/265] set version v0.27.17

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 1097f2cc..c87cb1ba 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.16"
+version = "0.27.17"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 7b423995d252ff0c9ff3b1750a2c66634841ce91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 12 Nov 2023 21:57:40 +0100
Subject: [PATCH 105/265] refactor reviver

---
 assets/js/watchers.js | 19 ++++++-------------
 src/Elements.jl       |  5 ++---
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index 06d7f5dc..47932575 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -54,20 +54,13 @@ const watcherMixin = {
 
 const reviveMixin = {
   methods: {
-    revive_payload: function(obj) {
-      if (typeof obj === 'object') {
-        for (var key in obj) {
-          if ( (typeof obj[key] === 'object') && (obj[key]!=null) && !(obj[key].jsfunction) ) {
-            this.revive_payload(obj[key])
-          } else {
-            if ( (obj[key]!=null) && (obj[key].jsfunction) ) {
-              obj[key] = Function(obj[key].jsfunction.arguments, obj[key].jsfunction.body)
-            }
-          }
-        }
+    revive_jsfunction: function (k, v) {
+      if ( (typeof v==='object') && (v!=null) && (v.jsfunction) ) {
+        return Function(v.jsfunction.arguments, v.jsfunction.body)
+      } else {
+        return v
       }
-      return obj;
-    }
+     }
   }
 }
 
diff --git a/src/Elements.jl b/src/Elements.jl
index ec9c204a..255c2bba 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -97,14 +97,13 @@ function vue_integration(::Type{M};
 
   window.parse_payload = function(payload){
     if (payload.key) {
-      window.$(vue_app_name).revive_payload(payload)
-      window.$(vue_app_name).updateField(payload.key, payload.value);
+       window.$(vue_app_name).updateField(payload.key, payload.value);
     }
   }
 
   function app_ready() {
       $vue_app_name.isready = true;
-
+      Genie.addReviver(window.$(vue_app_name).revive_jsfunction);
       $(transport == Genie.WebChannels &&
       "
       try {

From 603d759bfce1130cf55bdfcedaaee2c78dbc07d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 13 Nov 2023 11:50:27 +0100
Subject: [PATCH 106/265] add jsrender for field rendering in models

---
 src/stipple/rendering.jl | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 633649fb..9101043a 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -93,6 +93,26 @@ function julia_to_vue(field, mapping_keys = mapping_keys()) :: String
   end
 end
 
+"""
+    jsrender(x, args...)
+
+Defines separate rendering for the Vue instance. This method is only necessary for non-standard types that
+are not transmittable by regular json. Such types need a reviver to be transmitted via json and (optionally)
+a render method that is only applied for the rendering of the model.
+The model is not transmitted via json but via a js-file. So there it is possible to define non-serializable values.
+
+### Example
+
+```
+Stipple.render(z::Complex) = Dict(:mathjs => "Complex", :re => z.re, :im => z.im)
+function Stipple.jsrender(z::Union{Complex, R{<:Complex}}, args...)
+    JSONText("math.complex('\$(replace(strip(repr(Observables.to_value(z)), '"'), 'm' => ""))')")
+end
+Stipple.stipple_parse(::Complex, z::Dict{String, Any}) = float(z["re"]) + z["im"]
+```
+"""
+jsrender(x, args...) = render(x, args...)
+
 """
     function Stipple.render(app::M, fieldname::Union{Symbol,Nothing} = nothing)::Dict{Symbol,Any} where {M<:ReactiveModel}
 
@@ -107,7 +127,7 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
     occursin(SETTINGS.private_pattern, String(field)) && continue
     f isa Reactive && f.r_mode == PRIVATE && continue
 
-    result[julia_to_vue(field)] = Stipple.render(f, field)
+    result[julia_to_vue(field)] = Stipple.jsrender(f, field)
   end
 
   vue = Dict( :el => JSONText("rootSelector"),

From 894567b1bc27f2ea80c2cd7c66ff62656890c7a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 14 Nov 2023 13:11:21 +0100
Subject: [PATCH 107/265] move reviver stuff into Genie.Revivers

---
 src/Elements.jl | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index 255c2bba..cfb39900 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -12,7 +12,7 @@ using MacroTools
 import Genie.Renderer.Html: HTMLString, normal_element
 
 export root, elem, vm, @if, @else, @elseif, @for, @text, @bind, @data, @on, @click, @showif
-export stylesheet, kw_to_str
+export stylesheet, kw_to_str, js_add_reviver
 
 # deprecated
 export @iif, @elsiif, @els, @recur
@@ -41,6 +41,14 @@ end
 
 const vm = root
 
+function js_add_reviver(revivername::String)
+  """
+  Genie.WebChannels.subscriptionHandlers.push(function(event) {
+      Genie.Revivers.addReviver($revivername);
+  });
+  """
+end
+
 #===#
 
 """
@@ -103,7 +111,7 @@ function vue_integration(::Type{M};
 
   function app_ready() {
       $vue_app_name.isready = true;
-      Genie.addReviver(window.$(vue_app_name).revive_jsfunction);
+      Genie.Revivers.addReviver(window.$(vue_app_name).revive_jsfunction);
       $(transport == Genie.WebChannels &&
       "
       try {

From 50fce4bdd6dc22d57e421b5a95aa4c1c3656d984 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 14 Nov 2023 13:11:58 +0100
Subject: [PATCH 108/265] support adding of model-specific depencies

---
 src/ReactiveTools.jl | 68 ++++++++++++++++++++++++++++++++++++++++++++
 src/Stipple.jl       | 41 ++++++++++++++++++++++++--
 2 files changed, 107 insertions(+), 2 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index ea2c082e..3dd6e018 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -13,6 +13,9 @@ export @readonly, @private, @in, @out, @jsfn, @readonly!, @private!, @in!, @out!
 #definition of handlers/events
 export @onchange, @onbutton, @event, @notify
 
+# definition of dependencies
+export @deps, @clear_deps
+
 # deletion
 export @clear, @clear_vars, @clear_handlers
 
@@ -1302,4 +1305,69 @@ macro modelstorage()
   end |> esc
 end
 
+"""
+  @deps f
+
+
+Add a function f to the dependencies of the current app.
+
+------------------------
+
+  @deps M::Module
+
+  
+Add the dependencies of the module M to the dependencies of the current app.
+"""
+macro deps(expr)
+  quote
+    Stipple.deps!(Stipple.@type(), $expr)
+  end |> esc
+end
+
+"""
+  @deps(MyApp::ReactiveModel, f::Function)
+
+
+Add a function f to the dependencies of the app MyApp.
+The module needs to define a function `deps()`.
+
+------------------------
+
+  @deps(MyApp::ReactiveModel, M::Module)
+
+  
+Add the dependencies of the module M to the dependencies of the app MyApp.
+The module needs to define a function `deps()`.
+"""
+macro deps(M, expr)
+  quote
+    Stipple.deps!($M, $expr)
+  end |> esc
+end
+
+"""
+  @clear_deps
+
+
+Delete all dependencies of the current app.
+
+------------------------
+
+  @clear_deps MyApp
+
+
+Delete all dependencies of the app MyApp.
+"""
+macro clear_deps()
+  quote
+    Stipple.clear_deps!(Stipple.@type())
+  end |> esc
+end
+
+macro clear_deps(M)
+  quote
+    Stipple.clear_deps!($M)
+  end |> esc
+end
+
 end
diff --git a/src/Stipple.jl b/src/Stipple.jl
index a9fa4040..56c3a1ce 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -731,11 +731,25 @@ end
 function injectdeps(output::Vector{AbstractString}, M::Type{<:ReactiveModel}) :: Vector{AbstractString}
   for (key, f) in DEPS
     key isa DataType && key <: ReactiveModel && continue
+    # exclude keys starting with '_' 
+    key isa Symbol && startswith("$key", '_') && continue
     push!(output, f()...)
   end
   AM = get_abstract_type(M)
-  haskey(DEPS, AM) && push!(output, DEPS[AM]()...)
-
+  if haskey(DEPS, AM)
+    # DEPS[AM] contains the stipple-generated deps
+    push!(output, DEPS[AM]()...)
+    # furthermore, include deps who's keys start with "_<name of the ReactiveModel>_"
+    model_prefix = "_$(vm(AM))_"
+    @show model_prefix
+    for (key, f) in DEPS
+      println("hi 1")
+      @show key
+      key isa Symbol || continue
+      @show startswith("$key", model_prefix)
+      startswith("$key", model_prefix) && push!(output, f()...)
+    end
+  end
   output
 end
 
@@ -774,6 +788,29 @@ function deps!(m::Any, f::Function)
   DEPS[m] = f
 end
 
+function deps!(m::Any, M::Module)
+  DEPS[m] = M.deps
+end
+
+function deps!(M::Type{<:ReactiveModel}, f::Function; extra_deps = true)
+  key = extra_deps ? Symbol("_$(vm(M))_$(nameof(f))") : M
+  DEPS[key] = f isa Function ? f : f.deps 
+end
+
+deps!(M::Type{<:ReactiveModel}, modul::Module; extra_deps = true) = deps!(M, modul.deps; extra_deps)
+
+deps!(m::Any, v::Vector{Union{Function, Module}}) = deps!.(Ref(m), v)
+deps!(m::Any, t::Tuple) = [deps!(m, f) for f in t]
+deps!(m, args...) = [deps!(m, f) for f in args]
+
+function clear_deps!(M::Type{<:ReactiveModel})
+  delete!(DEPS, M)
+  model_prefix = "_$(vm(M))_"
+  for k in keys(Stipple.DEPS)
+    k isa Symbol && startswith("$k", model_prefix) && delete!(DEPS, k)
+  end
+end
+
 @specialize
 
 """

From d42caad61aba0f0259b9b46dbdfae6a165f2923a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 14 Nov 2023 14:40:39 +0100
Subject: [PATCH 109/265] fix jsrender for Reactive

---
 src/stipple/rendering.jl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 9101043a..c57d34eb 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -112,6 +112,7 @@ Stipple.stipple_parse(::Complex, z::Dict{String, Any}) = float(z["re"]) + z["im"
 ```
 """
 jsrender(x, args...) = render(x, args...)
+jsrender(r::Reactive, args...) = jsrender(getfield(getfield(r,:o), :val), args...)
 
 """
     function Stipple.render(app::M, fieldname::Union{Symbol,Nothing} = nothing)::Dict{Symbol,Any} where {M<:ReactiveModel}

From 36f372478d4f799c443f18e577ecda59869d4c40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 14 Nov 2023 17:35:36 +0100
Subject: [PATCH 110/265] remove debug info

---
 src/Stipple.jl | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 56c3a1ce..62b7ed31 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -741,12 +741,8 @@ function injectdeps(output::Vector{AbstractString}, M::Type{<:ReactiveModel}) ::
     push!(output, DEPS[AM]()...)
     # furthermore, include deps who's keys start with "_<name of the ReactiveModel>_"
     model_prefix = "_$(vm(AM))_"
-    @show model_prefix
     for (key, f) in DEPS
-      println("hi 1")
-      @show key
       key isa Symbol || continue
-      @show startswith("$key", model_prefix)
       startswith("$key", model_prefix) && push!(output, f()...)
     end
   end

From 351c738c5a8064d384cf0136eee3acf9cce3bebc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 20 Nov 2023 00:15:40 +0100
Subject: [PATCH 111/265] move reviver support to jsmethods.jl, add docstrings

---
 src/Elements.jl          | 10 +-------
 src/stipple/jsmethods.jl | 52 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index cfb39900..e4c9a7c7 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -12,7 +12,7 @@ using MacroTools
 import Genie.Renderer.Html: HTMLString, normal_element
 
 export root, elem, vm, @if, @else, @elseif, @for, @text, @bind, @data, @on, @click, @showif
-export stylesheet, kw_to_str, js_add_reviver
+export stylesheet, kw_to_str
 
 # deprecated
 export @iif, @elsiif, @els, @recur
@@ -41,14 +41,6 @@ end
 
 const vm = root
 
-function js_add_reviver(revivername::String)
-  """
-  Genie.WebChannels.subscriptionHandlers.push(function(event) {
-      Genie.Revivers.addReviver($revivername);
-  });
-  """
-end
-
 #===#
 
 """
diff --git a/src/stipple/jsmethods.jl b/src/stipple/jsmethods.jl
index b0b6f9c0..e8242cc9 100644
--- a/src/stipple/jsmethods.jl
+++ b/src/stipple/jsmethods.jl
@@ -175,4 +175,54 @@ for (f, field) in (
 end
 
 const jscreated = js_created
-const jsmounted = js_mounted
\ No newline at end of file
+const jsmounted = js_mounted
+
+"""
+    js_add_reviver(revivername::String)
+
+Add a reviver function to the list of Genie's revivers.
+
+### Example
+
+Adding the reviver function of 'mathjs'
+```julia
+js_add_reviver("math.reviver")
+```
+This function is meant for package developer who want to make additional js content available for the user.
+This resulting script needs to be added to the dependencies of an app in order to be executed.
+For detailed information have a look at the package StippleMathjs.
+
+If you want to add a custom reviver to your model you should rather consider using `@mounted`, e.g.
+
+```julia
+@methods \"\"\"
+myreviver: function(key, value) { return (key.endsWith('_onebased') ? value - 1 : value) }
+\"\"\"
+@mounted "Genie.Revivers.addReviver(this.myreviver)"
+```
+"""  
+function js_add_reviver(revivername::String)
+  """
+  Genie.WebChannels.subscriptionHandlers.push(function(event) {
+      Genie.Revivers.addReviver($revivername);
+  });
+  """
+end
+
+"""
+    js_initscript(initscript::String)
+
+Add a js script that is executed as soon as the connection to the server is established.
+It needs to be added to the dependencies of an app in order to be executed, e.g.
+
+```julia
+@deps () -> [script(js_initscript("console.log('Hello from my App')"))]
+```
+"""
+function js_initscript(initscript::String)
+  """
+  Genie.WebChannels.subscriptionHandlers.push(function(event) {
+      $(initscript)
+  });
+  """
+end
\ No newline at end of file

From 88ef5e3cf64c93a4cbc9fb4b956202921a804f19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 20 Nov 2023 00:19:31 +0100
Subject: [PATCH 112/265] set version v0.27.18

---
 Project.toml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Project.toml b/Project.toml
index c87cb1ba..02d24de8 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.17"
+version = "0.27.18"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
@@ -27,7 +27,7 @@ Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 DataFrames = "1"
 Dates = "1.6"
 FilePathsBase = "0.9"
-Genie = "5.21.1"
+Genie = "5.23.0"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"

From 127261bb10dcddc94614b377431714fe0a3d0390 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 21 Nov 2023 07:38:31 +0100
Subject: [PATCH 113/265] fix compatibility issue with watchers.js

---
 assets/js/watchers.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index 47932575..8674512c 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -60,7 +60,22 @@ const reviveMixin = {
       } else {
         return v
       }
-     }
+     },
+     // deprecated, kept for compatibility
+     revive_payload: function(obj) {
+      if (typeof obj === 'object') {
+        for (var key in obj) {
+          if ( (typeof obj[key] === 'object') && (obj[key]!=null) && !(obj[key].jsfunction) ) {
+            this.revive_payload(obj[key])
+          } else {
+            if ( (obj[key]!=null) && (obj[key].jsfunction) ) {
+              obj[key] = Function(obj[key].jsfunction.arguments, obj[key].jsfunction.body)
+            }
+          }
+        }
+      }
+      return obj;
+    }
   }
 }
 

From 33ff5cbeeab088ada9d9f82b234bc88122980fd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 21 Nov 2023 07:42:20 +0100
Subject: [PATCH 114/265] formatting of watchers.js

---
 assets/js/watchers.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index 8674512c..2a467f1b 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -60,9 +60,9 @@ const reviveMixin = {
       } else {
         return v
       }
-     },
-     // deprecated, kept for compatibility
-     revive_payload: function(obj) {
+    },
+    // deprecated, kept for compatibility
+    revive_payload: function(obj) {
       if (typeof obj === 'object') {
         for (var key in obj) {
           if ( (typeof obj[key] === 'object') && (obj[key]!=null) && !(obj[key].jsfunction) ) {

From ad79b148b9e55c516320f4a53ed48ac6ef5cb0ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Tue, 21 Nov 2023 07:46:50 +0100
Subject: [PATCH 115/265] set version v0.27.19

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 02d24de8..af0a9082 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.18"
+version = "0.27.19"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From eaa82ef4c68f4f9b66ed7c07a2f60db265f780e4 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Wed, 22 Nov 2023 06:45:40 +0100
Subject: [PATCH 116/265] Update tests

---
 test/runtests.jl | 56 ++++++++++++++++++++++++------------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/test/runtests.jl b/test/runtests.jl
index 57fb4221..69159dd9 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -12,7 +12,7 @@ function get_channel(s::String)
 end
 
 function get_debounce(port, modelname)
-    s = string_get("http://localhost:$port/stipple.jl/master/assets/js/$modelname.js")
+    s = string_get("http://localhost:$port/stipple.jl/$(Genie.Assets.package_version("Genie"))/assets/js/$modelname.js")
     parse(Int, match(r"_.debounce\(.+?(\d+)\)", s).captures[1])
 end
 
@@ -26,7 +26,7 @@ end
         i = 100
         s = "Hello", READONLY
     end
-    
+
     function handlers(model)
         on(model.i) do i
             model.s[] = "$i"
@@ -37,7 +37,7 @@ end
 
     model = TestApp |> init |> handlers
     model2 = TestApp |> init |> handlers
-    
+
     # channels have to be different
     @test model.channel__ != model2.channel__
 
@@ -76,7 +76,7 @@ using Stipple.ReactiveTools
     @app TestApp2 begin
         @in i = 100
         @out s = "Hello"
-    
+
         @onchange i begin
             s = "$i"
         end
@@ -84,7 +84,7 @@ using Stipple.ReactiveTools
 
     model = TestApp2 |> init |> handlers
     model2 = TestApp2 |> init |> handlers
-    
+
     # channels have to be different
     @test model.channel__ != model2.channel__
 
@@ -100,7 +100,7 @@ end
     @eval @app TestApp begin
         @in i = 100
         @out s = "Hello"
-    
+
         @mixin TestMixin
         @mixin mixin_::TestMixin
         @mixin TestMixin "pre_" "_post"
@@ -112,7 +112,7 @@ end
 
     @eval model = TestApp |> init |> handlers
     @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i, :s, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
-        
+
     # check reactivity
     @eval model.i[] = 20
     @test model.s[] == "20"
@@ -130,7 +130,7 @@ end
 
     @eval model = @init
     @eval model2 = @init
-    
+
     # channels have to be different
     @eval @test model.channel__ != model2.channel__
 
@@ -146,7 +146,7 @@ end
     @eval @app begin
         @in i3 = 100
         @out s3 = "Hello"
-    
+
         @mixin TestMixin
         @mixin mixin_::TestMixin
         @mixin TestMixin "pre_" "_post"
@@ -167,7 +167,7 @@ using DataFrames
 @testset "Extensions" begin
     d = Dict(:a => [1, 2, 3], :b => ["a", "b", "c"])
     df = DataFrame(:a => [1, 2, 3], :b => ["a", "b", "c"])
-    
+
     @test Stipple.stipple_parse(DataFrame, [d]) == df
     @test render(df) == OrderedDict("a" => [1, 2, 3], "b" => ["a", "b", "c"])
 
@@ -183,13 +183,13 @@ end
 
     ds = Dict("hello" => [1, 2, 3, 4], "world" => ["five", "six"])
     @test render(ds) == ds
-    
+
     vd = [Dict("hello" => 1, "world" => 2)]
     @test render(vd) == vd
 
     df = DataFrame(:a => [1, 2, 3], :b => ["a", "b", "c"])
     @test render(df) == OrderedDict("a" => [1, 2, 3], "b" => ["a", "b", "c"])
-    
+
     mt = Tables.table([1 2; 3 4])
     @test render(mt) == OrderedDict(:Column1 => [1, 3], :Column2 => [2, 4])
 end
@@ -206,13 +206,13 @@ end
                 s3 = "$i3"
             end
         end
-    
+
         ui() = "DEMO UI"
         debounce = 10
     end
 
     @eval model = @init
-    
+
     @eval begin
         @page("/", ui)
         @page("/nolayout", ui, layout = "no layout")
@@ -220,16 +220,16 @@ end
         @page("/debounce2", ui; debounce)
         @page("/static", ui; model)
     end
-    
+
     port = rand(8001:9000)
     up(;port, ws_port = port)
 
     @test occursin("<p>DEMO UI</p>", string_get("http://localhost:$port"))
 
     @test string_get("http://localhost:$port/nolayout") == "<!DOCTYPE html><html>\n  <body>\n    <p>no layout</p>\n  </body></html>"
-    
+
     @test get_debounce(port, "main_reactivemodel") == 300
-    
+
     @clear_cache
     # first get the main page to trigger init function, which sets up the assets
     string_get("http://localhost:$port/debounce")
@@ -257,16 +257,16 @@ end
         @app MyApp begin
             @in i3 = 100
             @out s3 = "Hello"
-    
+
             @onchange i3 begin
                 s3 = "$i3"
             end
         end
-    
+
         ui() = "DEMO UI explicit"
         debounce = 11
     end
-    
+
     @eval model = @init(MyApp)
 
     @eval begin
@@ -276,26 +276,26 @@ end
         @page("/debounce2", ui; debounce, model = MyApp)
         @page("/static1", ui; model)
     end
-    
+
     port = rand(8001:9000)
     up(;port, ws_port = port)
-    
+
     @clear_cache MyApp
     @test occursin("<p>DEMO UI explicit</p>", string_get("http://localhost:$port"))
-    
+
     @test string_get("http://localhost:$port/nolayout") == "<!DOCTYPE html><html>\n  <body>\n    <p>no layout (explicit)</p>\n  </body></html>"
-    
+
     @test get_debounce(port, "myapp") == 300
-    
+
     @clear_cache MyApp
     # first get the main page to trigger init function, which sets up the assets
     string_get("http://localhost:$port/debounce")
     @test get_debounce(port, "myapp") == 51
-    
+
     @clear_cache MyApp
     string_get("http://localhost:$port/debounce2")
     @test get_debounce(port, "myapp") == 11
-    
+
     s1 = string_get("http://localhost:$port/")
     s2 = string_get("http://localhost:$port/")
 
@@ -304,7 +304,7 @@ end
 
     @test get_channel(s2) != get_channel(s1)
     @test get_channel(s3) == get_channel(s4)
-    
+
     @clear_cache MyApp
     down()
 end

From 4feb8f80c5f0b52df5d74683ea6c831af0215133 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Wed, 22 Nov 2023 06:47:06 +0100
Subject: [PATCH 117/265] Tag version

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index af0a9082..f69df650 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.19"
+version = "0.27.20"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 66522490cfb714ad99af63134ae4ffaecc5720fe Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Wed, 22 Nov 2023 07:00:31 +0100
Subject: [PATCH 118/265] Patch test for versioned assets

---
 test/runtests.jl | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/test/runtests.jl b/test/runtests.jl
index 72a30730..789c2bfc 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -12,7 +12,7 @@ function get_channel(s::String)
 end
 
 function get_debounce(port, modelname)
-    s = string_get("http://localhost:$port/stipple.jl/$(Genie.Assets.package_version("Genie"))/assets/js/$modelname.js")
+    s = string_get("http://localhost:$port/stipple.jl/$(Genie.Assets.package_version("Stipple"))/assets/js/$modelname.js")
     parse(Int, match(r"_.debounce\(.+?(\d+)\)", s).captures[1])
 end
 
@@ -382,14 +382,14 @@ end
 
 @testset "@page macro with ParsedHTMLStrings" begin
     using Genie.HTTPUtils.HTTP
-    
+
     port = rand(8001:9000)
     up(;port, ws_port = port)
-    
+
     # rand is needed to avoid re-using cached routes
     view() = [ParsedHTMLString("""<div id="test" @click="i = i+1">Change @click</div>"""), a("test $(rand(1:10^10))")]
     p1 = view()[1]
-    
+
     ui() = ParsedHTMLString(view())
 
     # route function resulting in ParsedHTMLString
@@ -401,9 +401,9 @@ end
     # route constant ParsedHTMLString
     @page("/", ui())
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
-    @test match(r"<div id=\"test\" .*?div>", payload).match == p1 
+    @test match(r"<div id=\"test\" .*?div>", payload).match == p1
     @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
-    
+
     # ----------------------------
 
     ui() = view()
@@ -419,20 +419,20 @@ end
     # route constant Vector{ParsedHTMLString}
     @page("/", ui())
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
-    @test match(r"<div id=\"test\" .*?div>", payload).match == p1 
+    @test match(r"<div id=\"test\" .*?div>", payload).match == p1
     @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
 
     # Supply a String instead of a ParsedHTMLString.
     # As the '@' character is not correctly parsed, the match is expected to differ
     ui() = join(view())
-    
+
     # route function resulting in String
     @page("/", ui)
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match != p1
     @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
     @test contains(payload, r"<a>test \d+</a>")
-    
+
     # route constant String
     @page("/", ui())
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
@@ -468,12 +468,12 @@ end
 
     add_css(my_css)
     @test Stipple.Layout.THEMES[end] == my_css
-    
+
     n = length(Stipple.Layout.THEMES)
     remove_css(my_css)
     @test length(Stipple.Layout.THEMES) == n - 1
     @test findfirst(==(my_css), Stipple.Layout.THEMES) === nothing
-    
+
     add_css(my_css)
     @test Stipple.Layout.THEMES[end] == my_css
     remove_css(my_css, byname = true)

From 89fd6b6fe821fa2da90d1980a6e85346feb91246 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 22 Nov 2023 07:41:09 +0100
Subject: [PATCH 119/265] fix tests for versioned assets

---
 test/runtests.jl | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/test/runtests.jl b/test/runtests.jl
index 789c2bfc..d2d3d9fe 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -3,6 +3,8 @@ using Stipple.Genie.HTTPUtils.HTTP
 
 using Test
 
+version = Genie.Assets.package_version(Stipple)
+
 function string_get(x)
     String(HTTP.get(x, retries = 0, status_exception = false).body)
 end
@@ -396,13 +398,13 @@ end
     @page("/", ui)
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match == p1
-    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+    @test contains(payload, """<link href="/stipple.jl/$version/assets/css/stipplecore.css""")
 
     # route constant ParsedHTMLString
     @page("/", ui())
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match == p1
-    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+    @test contains(payload, """<link href="/stipple.jl/$version/assets/css/stipplecore.css""")
 
     # ----------------------------
 
@@ -414,13 +416,13 @@ end
     @test match(r"<div id=\"test\" .*?div>", payload).match == p1
     @test contains(payload, r"<a>test \d+</a>")
 
-    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+    @test contains(payload, """<link href="/stipple.jl/$version/assets/css/stipplecore.css""")
 
     # route constant Vector{ParsedHTMLString}
     @page("/", ui())
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match == p1
-    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+    @test contains(payload, """<link href="/stipple.jl/$version/assets/css/stipplecore.css""")
 
     # Supply a String instead of a ParsedHTMLString.
     # As the '@' character is not correctly parsed, the match is expected to differ
@@ -430,14 +432,14 @@ end
     @page("/", ui)
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match != p1
-    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+    @test contains(payload, """<link href="/stipple.jl/$version/assets/css/stipplecore.css""")
     @test contains(payload, r"<a>test \d+</a>")
 
     # route constant String
     @page("/", ui())
     payload = String(HTTP.payload(HTTP.get("http://127.0.0.1:$port")))
     @test match(r"<div id=\"test\" .*?div>", payload).match != p1
-    @test contains(payload, """<link href="/stipple.jl/master/assets/css/stipplecore.css""")
+    @test contains(payload, """<link href="/stipple.jl/$version/assets/css/stipplecore.css""")
     @test contains(payload, r"<a>test \d+</a>")
 
     down()

From 68323df7203fc591e2ec813a325d5dbcca4d386b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 22 Nov 2023 07:41:34 +0100
Subject: [PATCH 120/265] set version v0.27.21

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index f69df650..b7c78928 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.20"
+version = "0.27.21"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From b8acebf953545a857a773ee8922d877df6f96988 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 22 Nov 2023 08:36:01 +0100
Subject: [PATCH 121/265] fix Genie compat

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index b7c78928..1859299c 100644
--- a/Project.toml
+++ b/Project.toml
@@ -27,7 +27,7 @@ Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 DataFrames = "1"
 Dates = "1.6"
 FilePathsBase = "0.9"
-Genie = "5.23.0"
+Genie = "5.23.2"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"

From bf729b07b59ac0bdd8c2a5668d800dd005a3e54b Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 22 Nov 2023 10:46:12 +0100
Subject: [PATCH 122/265] Julia expression attributes in row, cell and column

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

diff --git a/src/Layout.jl b/src/Layout.jl
index e52a02cf..e5354c02 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -174,7 +174,7 @@ function row(args...;
   col == -1 && size != -1 && (col = size)
 
   class = class isa Symbol ? Symbol("$class + ' row'") : join(push!(split(class), "row"), " ")
-  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...)
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -204,7 +204,7 @@ function column(args...;
   col == -1 && size != -1 && (col = size)
 
   class = class isa Symbol ? Symbol("$class + ' column'") : join(push!(split(class), "column"), " ")
-  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...)
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -247,7 +247,7 @@ function cell(args...;
   col == 0 && size != 0 && (col = size)
   
   class = class isa Symbol ? Symbol("$class + ' st-col'") : join(push!(split(class), "st-col"), " ")
-  kwargs = flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...)
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end

From 6f804ca1c79177a50c479431e9a9e5b842ce173d Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 22 Nov 2023 10:51:19 +0100
Subject: [PATCH 123/265] set version v0.27.22

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 1859299c..c8546740 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.21"
+version = "0.27.22"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 506fc44e7b8d746d0f1c8551162b61fc43f9cb15 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 22 Nov 2023 11:31:50 +0100
Subject: [PATCH 124/265] modify htmldiv to support Julia expressions and
 flexgrid

---
 src/Layout.jl  | 16 +++++++++++++++-
 src/Stipple.jl |  1 -
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index e5354c02..86151c16 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -8,7 +8,7 @@ module Layout
 using Genie, Stipple
 
 export layout, add_css, remove_css
-export page, app, row, column, cell, container, flexgrid_kwargs
+export page, app, row, column, cell, container, flexgrid_kwargs, htmldiv
 
 export theme
 const THEMES = Function[]
@@ -252,6 +252,20 @@ function cell(args...;
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
+function htmldiv(args...;
+  col::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  class = "", kwargs...)
+
+  # for backward compatibility with `size` kwarg
+  col == -1 && size != -1 && (col = size)
+
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
+
+  Genie.Renderer.Html.div(args...; kwargs...)
+end
+
 function sizetocol(size::Union{String,Int,Nothing,Symbol} = -1, tag::Symbol = :col)
   (size == -1 || size === nothing) && return ""
   out = ["col"]
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 62b7ed31..eb19e474 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -75,7 +75,6 @@ using Logging, Mixers, Random, Reexport, Dates, Tables
 @reexport @using_except Genie: download
 import Genie.Router.download
 @reexport @using_except Genie.Renderers.Html: mark, div, time, view, render, Headers, menu
-const htmldiv = Html.div
 export render, htmldiv, js_attr
 @reexport using JSON3
 @reexport using StructTypes

From 8467e58991d1c64f30d057c81bb1618e551ba6e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 23 Nov 2023 17:16:02 +0100
Subject: [PATCH 125/265] add debugging of incoming messages

---
 src/Stipple.jl | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index eb19e474..54919a47 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -471,6 +471,8 @@ function init(::Type{M};
         @error ex
       end
 
+      @debug payload
+
       field = Symbol(payload["field"])
 
       #check if field exists

From 3c2a4aadba1808cddbf8ae29328a0fb172d2c05d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 27 Nov 2023 09:16:49 +0100
Subject: [PATCH 126/265] refactor broadcasting to support `except` and
 `restrict` kwargs

---
 src/Stipple.jl               | 27 +++++++++++++++++----------
 src/stipple/jsintegration.jl |  6 +++---
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 54919a47..7c8b5e2b 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -461,7 +461,7 @@ function init(::Type{M};
   if ! Genie.Router.ischannel(Symbol(ch))
     Genie.Router.channel(ch, named = Symbol(ch)) do
       payload = Genie.Requests.payload(:payload)["payload"]
-      client = transport == Genie.WebChannels ? Genie.Requests.wsclient() : Genie.Requests.wtclient()
+      client = transport == Genie.WebChannels ? Genie.WebChannels.id(Genie.Requests.wsclient()) : Genie.Requests.wtclient()
 
       try
         haskey(payload, "sesstoken") && ! isempty(payload["sesstoken"]) &&
@@ -608,15 +608,16 @@ const max_retry_times = 10
 
 """
     Base.push!(app::M, vals::Pair{Symbol,T}; channel::String,
-                except::Union{Genie.WebChannels.HTTP.WebSockets.WebSocket,Nothing,UInt}) where {T,M<:ReactiveModel}
+                except::Union{Nothing,UInt,Vector{UInt}}) where {T,M<:ReactiveModel}
 
 Pushes data payloads over to the frontend by broadcasting the `vals` through the `channel`.
 """
 function Base.push!(app::M, vals::Pair{Symbol,T};
-                    channel::String = Genie.config.webchannels_default_route,
-                    except::Union{Genie.WebChannels.HTTP.WebSockets.WebSocket,Nothing,UInt} = nothing)::Bool where {T,M<:ReactiveModel}
+                    channel::String = getchannel(model),
+                    except::Union{Nothing,UInt,Vector{UInt}} = nothing,
+                    restrict::Union{Nothing,UInt,Vector{UInt}} = nothing)::Bool where {T,M<:ReactiveModel}
   try
-    webtransport().broadcast(channel, json(Dict("key" => julia_to_vue(vals[1]), "value" => Stipple.render(vals[2], vals[1]))), except = except)
+    webtransport().broadcast(channel, json(Dict("key" => julia_to_vue(vals[1]), "value" => Stipple.render(vals[2], vals[1]))); except, restrict)
   catch ex
     @debug ex
     false
@@ -625,13 +626,16 @@ end
 
 function Base.push!(model::M, vals::Pair{Symbol,Reactive{T}};
                     channel::String = getchannel(model),
-                    except::Union{Genie.WebChannels.HTTP.WebSockets.WebSocket,Nothing,UInt} = nothing)::Bool where {T,M<:ReactiveModel}
+                    except::Union{Nothing,UInt,Vector{UInt}} = nothing,
+                    restrict::Union{Nothing,UInt,Vector{UInt}} = nothing)::Bool where {T,M<:ReactiveModel}
                     v = vals[2].r_mode != JSFUNCTION ? vals[2][] : replace_jsfunction(vals[2][])
-  push!(model, Symbol(julia_to_vue(vals[1])) => v; channel, except)
+  push!(model, Symbol(julia_to_vue(vals[1])) => v; channel, except, restrict)
 end
 
 function Base.push!(model::M;
                     channel::String = getchannel(model),
+                    except::Union{Nothing,UInt,Vector{UInt}} = nothing,
+                    restrict::Union{Nothing,UInt,Vector{UInt}} = nothing,
                     skip::Vector{Symbol} = Symbol[])::Bool where {M<:ReactiveModel}
 
   result = true
@@ -639,15 +643,18 @@ function Base.push!(model::M;
   for field in fieldnames(M)
     (isprivate(field, model) || field in skip) && continue
 
-    push!(model, field => getproperty(model, field); channel) === false && (result = false)
+    push!(model, field => getproperty(model, field); channel, except, restrict) === false && (result = false)
   end
 
   result
 end
 
-function Base.push!(model::M, field::Symbol; channel::String = getchannel(model))::Bool where {M<:ReactiveModel}
+function Base.push!(model::M, field::Symbol;
+                  channel::String = getchannel(model),
+                  except::Union{Nothing,UInt,Vector{UInt}} = nothing,
+                  restrict::Union{Nothing,UInt,Vector{UInt}} = nothing)::Bool where {M<:ReactiveModel}
   isprivate(field, model) && return false
-  push!(model, field => getproperty(model, field); channel)
+  push!(model, field => getproperty(model, field); channel, except, restrict)
 end
 
 @specialize
diff --git a/src/stipple/jsintegration.jl b/src/stipple/jsintegration.jl
index c019f6c3..ae3559d8 100644
--- a/src/stipple/jsintegration.jl
+++ b/src/stipple/jsintegration.jl
@@ -87,9 +87,9 @@ end
 
 Execute js code in the frontend. `context` can be `:model`, `:app` or `:console`
 """
-function Base.run(model::ReactiveModel, jscode::String; context = :model)
-  context ∈ (:model, :app) && return push!(model, Symbol("js_", context) => jsfunction(jscode); channel = getchannel(model))
-  context == :console && push!(model, :js_model => jsfunction("console.log('$jscode')"); channel = getchannel(model))
+function Base.run(model::ReactiveModel, jscode::String; context = :model, kwargs...)
+  context ∈ (:model, :app) && return push!(model, Symbol("js_", context) => jsfunction(jscode); channel = getchannel(model), kwargs...)
+  context == :console && push!(model, :js_model => jsfunction("console.log('$jscode')"); channel = getchannel(model), kwargs...)
 
   nothing
 end

From ecafe013c9fb6de4c7d5d2a3c583bc967a1624f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 27 Nov 2023 09:19:31 +0100
Subject: [PATCH 127/265] add client info to events on request

---
 assets/js/watchers.js | 3 ++-
 src/Elements.jl       | 3 ++-
 src/Stipple.jl        | 7 +++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index 2a467f1b..4cd55efb 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -81,8 +81,9 @@ const reviveMixin = {
 
 const eventMixin = {
   methods: {
-    handle_event: function (event_data, event_handler) {
+    handle_event: function (event_data, event_handler, mode) {
       console.debug('event: ' + JSON.stringify(event_data) + ":" + event_handler)
+      if (mode=='addclient') { event_data._addclient = true}
       Genie.WebChannels.sendMessageTo(window.CHANNEL, 'events', {
           'event': {
               'name': event_handler,
diff --git a/src/Elements.jl b/src/Elements.jl
index e4c9a7c7..31440780 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -359,6 +359,7 @@ Sometimes preprocessing of the events is necessary, e.g. to add or skip informat
 ```
 """
 macro on(arg, expr, preprocess = nothing)
+  preprocess isa QuoteNode && preprocess == :(:addclient) && (preprocess = "event._addclient = true")
   kw = Symbol("v-on:", arg isa String ? arg : arg isa QuoteNode ? arg.value : arg.head == :vect ? join(lstrip.(string.(arg.args), ':'), '.') :
     throw("Value '$arg' for `arg` not supported. `arg` should be of type Symbol, String, or Vector{Union{String, Symbol}}"))
 
@@ -370,7 +371,7 @@ macro on(arg, expr, preprocess = nothing)
           :(replace("""function(event) {
               const preprocess = (event) => { """ * replace($preprocess, '"' => "\\\"") * """; return event }
               handle_event(preprocess(event), '$($(esc(expr)))')
-          }'""", '\n' => ';'))
+          }""", '\n' => ';'))
       end
   else
       esc_expr(expr)
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 7c8b5e2b..7057e0b9 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -525,6 +525,13 @@ function init(::Type{M};
       # form handler parameter & call event notifier
       handler = Symbol(get(event, "name", nothing))
       event_info = get(event, "event", nothing)
+      
+      # add client id if requested
+      if event_info isa Dict && get(event_info, "_addclient", false)
+        client = transport == Genie.WebChannels ? Genie.WebChannels.id(Genie.Requests.wsclient()) : Genie.Requests.wtclient()
+        push!(event_info, "_client" => client)
+      end
+      
       isempty(methods(notify, (M, Val{handler}))) || notify(model, Val(handler))
       isempty(methods(notify, (M, Val{handler}, Any))) || notify(model, Val(handler), event_info)
       LAST_ACTIVITY[Symbol(channel)] = now()

From 0a43ff981cc5a682d19260b9cd50486c57396191 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 28 Nov 2023 15:20:24 +0100
Subject: [PATCH 128/265] consistent naming of push! methods

---
 src/Stipple.jl | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 7057e0b9..7e19645f 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -620,7 +620,7 @@ const max_retry_times = 10
 Pushes data payloads over to the frontend by broadcasting the `vals` through the `channel`.
 """
 function Base.push!(app::M, vals::Pair{Symbol,T};
-                    channel::String = getchannel(model),
+                    channel::String = getchannel(app),
                     except::Union{Nothing,UInt,Vector{UInt}} = nothing,
                     restrict::Union{Nothing,UInt,Vector{UInt}} = nothing)::Bool where {T,M<:ReactiveModel}
   try
@@ -631,16 +631,16 @@ function Base.push!(app::M, vals::Pair{Symbol,T};
   end
 end
 
-function Base.push!(model::M, vals::Pair{Symbol,Reactive{T}};
-                    channel::String = getchannel(model),
+function Base.push!(app::M, vals::Pair{Symbol,Reactive{T}};
+                    channel::String = getchannel(app),
                     except::Union{Nothing,UInt,Vector{UInt}} = nothing,
                     restrict::Union{Nothing,UInt,Vector{UInt}} = nothing)::Bool where {T,M<:ReactiveModel}
                     v = vals[2].r_mode != JSFUNCTION ? vals[2][] : replace_jsfunction(vals[2][])
-  push!(model, Symbol(julia_to_vue(vals[1])) => v; channel, except, restrict)
+  push!(app, Symbol(julia_to_vue(vals[1])) => v; channel, except, restrict)
 end
 
-function Base.push!(model::M;
-                    channel::String = getchannel(model),
+function Base.push!(app::M;
+                    channel::String = getchannel(app),
                     except::Union{Nothing,UInt,Vector{UInt}} = nothing,
                     restrict::Union{Nothing,UInt,Vector{UInt}} = nothing,
                     skip::Vector{Symbol} = Symbol[])::Bool where {M<:ReactiveModel}
@@ -648,20 +648,20 @@ function Base.push!(model::M;
   result = true
 
   for field in fieldnames(M)
-    (isprivate(field, model) || field in skip) && continue
+    (isprivate(field, app) || field in skip) && continue
 
-    push!(model, field => getproperty(model, field); channel, except, restrict) === false && (result = false)
+    push!(app, field => getproperty(app, field); channel, except, restrict) === false && (result = false)
   end
 
   result
 end
 
-function Base.push!(model::M, field::Symbol;
-                  channel::String = getchannel(model),
+function Base.push!(app::M, field::Symbol;
+                  channel::String = getchannel(app),
                   except::Union{Nothing,UInt,Vector{UInt}} = nothing,
                   restrict::Union{Nothing,UInt,Vector{UInt}} = nothing)::Bool where {M<:ReactiveModel}
-  isprivate(field, model) && return false
-  push!(model, field => getproperty(model, field); channel, except, restrict)
+  isprivate(field, app) && return false
+  push!(app, field => getproperty(app, field); channel, except, restrict)
 end
 
 @specialize

From 8477d548d3bf75fb5f31c93c7ea6414fc6685f65 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 30 Nov 2023 16:01:19 +0100
Subject: [PATCH 129/265] fix merging of classes in flexgrid_kwargs

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

diff --git a/src/Layout.jl b/src/Layout.jl
index 86151c16..22d4bbf6 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -115,8 +115,8 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
   # if either class is a Symbol or class! is not nothing.
   # So an argument of the form `class! = "'my-class' + 'your-class'` is supported
   # Furthermore Vectors are now supported
-  class isa Vector && (class = Symbol(join(js_attr.(class), " + ")))
-  class! isa Vector && (class! = join(js_attr.(class!), " + "))
+  class isa Vector && (class = Symbol(join(js_attr.(class), " + ' ' + ")))
+  class! isa Vector && (class! = join(js_attr.(class!), " + ' ' + "))
   
   classes = String[]
   if class isa Symbol
@@ -173,7 +173,7 @@ function row(args...;
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
 
-  class = class isa Symbol ? Symbol("$class + ' row'") : join(push!(split(class), "row"), " ")
+  class = class isa Symbol ? Symbol("$class + ' row'") : class isa Vector ? push!(class, "row") : join(push!(split(class), "row"), " ")
   kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)

From f8c7a42caf8ee1da6c773ed602ebc5f0588f15cc Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 30 Nov 2023 19:30:07 +0100
Subject: [PATCH 130/265] set version v0.27.23 and adapt Genie compat

---
 Project.toml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Project.toml b/Project.toml
index c8546740..f1ed2902 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.22"
+version = "0.27.23"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
@@ -27,7 +27,7 @@ Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 DataFrames = "1"
 Dates = "1.6"
 FilePathsBase = "0.9"
-Genie = "5.23.2"
+Genie = "5.23.3"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"

From 808cc63f9bb87f70727989aa0ca55b24cf79752e Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Fri, 15 Dec 2023 00:28:49 +0100
Subject: [PATCH 131/265] Fix channels and handlers logic

---
 Project.toml         |   4 +-
 src/ModelStorage.jl  |  10 +--
 src/ReactiveTools.jl |  38 ++++++-----
 src/Stipple.jl       | 159 +++++++++++++++++++++++--------------------
 4 files changed, 116 insertions(+), 95 deletions(-)

diff --git a/Project.toml b/Project.toml
index f69df650..9707e162 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.20"
+version = "0.27.21"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
@@ -27,7 +27,7 @@ Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 DataFrames = "1"
 Dates = "1.6"
 FilePathsBase = "0.9"
-Genie = "5.23.0"
+Genie = "5.23.6"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"
diff --git a/src/ModelStorage.jl b/src/ModelStorage.jl
index 2121d914..2463e3d2 100644
--- a/src/ModelStorage.jl
+++ b/src/ModelStorage.jl
@@ -8,8 +8,8 @@ import GenieSessionFileSession
 
 export init_from_storage
 
-function init_from_storage(::Type{M};
-                            channel::Union{Any,Nothing} = Stipple.channeldefault(),
+function init_from_storage( t::Type{M};
+                            channel::Union{Any,Nothing} = Stipple.channeldefault(t),
                             kwargs...) where M
   model_id = Symbol(Stipple.routename(M))
   model = Stipple.init(M; channel, kwargs...)
@@ -22,17 +22,17 @@ function init_from_storage(::Type{M};
       # restore fields only if a stored model exists, if the field is not part of the internal fields and is not write protected
       (
         isnothing(stored_model) || f ∈ [Stipple.CHANNELFIELDNAME, Stipple.AUTOFIELDS...] || Stipple.isreadonly(f, model) || Stipple.isprivate(f, model) ||
-        ! hasproperty(stored_model, f) || (field[!] = getfield(stored_model, f)[])
+        ! hasproperty(stored_model, f) || ! hasproperty(model, f) || (field[!] = getfield(stored_model, f)[])
       )
 
       # register reactive handlers to automatically save model on session when model changes
-      if f ∉ [Stipple.CHANNELFIELDNAME, Stipple.AUTOFIELDS...]
+      if f ∉ [Stipple.AUTOFIELDS...]
         on(field) do _
           GenieSession.set!(model_id, model)
         end
       end
     else
-      isnothing(stored_model) || Stipple.isprivate(f, model) || Stipple.isreadonly(f, model) || ! hasproperty(stored_model, f) || setfield!(model, f, getfield(stored_model, f))
+      isnothing(stored_model) || Stipple.isprivate(f, model) || Stipple.isreadonly(f, model) || ! hasproperty(stored_model, f) || ! hasproperty(model, f) || setfield!(model, f, getfield(stored_model, f))
     end
   end
 
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 3dd6e018..8fa21356 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -585,12 +585,16 @@ macro init(args...)
 
   quote
     local new_handlers = false
-    local initfn =  if isdefined($__module__, :init_from_storage)
+
+    local initfn =
+    if isdefined($__module__, :init_from_storage)
       $__module__.init_from_storage
     else
       Stipple.init
     end
-    local handlersfn =  if !$called_without_type
+
+    local handlersfn =
+    if !$called_without_type
       # writing '$(init_kwargs[type_pos])' generates an error during a pre-evaluation
       # possibly from Revise?
       # we use 'get' instead of 'getindex'
@@ -606,16 +610,30 @@ macro init(args...)
         identity
       end
     end
+
     instance = let model = initfn($(init_args...))
       new_handlers ? Base.invokelatest(handlersfn, model) : handlersfn(model)
     end
     for p in Stipple.Pages._pages
       p.context == $__module__ && (p.model = instance)
     end
+
     instance
   end |> esc
 end
 
+macro app(typename, expr, handlers_fn_name = :handlers)
+  # indicate to the @handlers macro that old typefields have to be cleared
+  # (avoids model_to_storage)
+  newtypename = Symbol(typename, "_!_")
+  quote
+    let model = Stipple.ReactiveTools.@handlers $newtypename $expr $handlers_fn_name
+      Stipple.ReactiveTools.HANDLERS_FUNCTIONS[$typename] = $handlers_fn_name
+      model
+    end
+  end |> esc
+end
+
 macro handlers()
   handlers = init_handlers(__module__)
 
@@ -639,18 +657,6 @@ macro handlers(expr)
   end |> esc
 end
 
-macro app(typename, expr, handlers_fn_name = :handlers)
-  # indicate to the @handlers macro that old typefields have to be cleared
-  # (avoids model_to_storage)
-  newtypename = Symbol(typename, "_!_")
-  quote
-    let model = Stipple.ReactiveTools.@handlers $newtypename $expr $handlers_fn_name
-      Stipple.ReactiveTools.HANDLERS_FUNCTIONS[$typename] = $handlers_fn_name
-      model
-    end
-  end |> esc
-end
-
 macro handlers(typename, expr, handlers_fn_name = :handlers)
   newtype = endswith(String(typename), "_!_")
   newtype && (typename = Symbol(String(typename)[1:end-3]))
@@ -1315,7 +1321,7 @@ Add a function f to the dependencies of the current app.
 
   @deps M::Module
 
-  
+
 Add the dependencies of the module M to the dependencies of the current app.
 """
 macro deps(expr)
@@ -1335,7 +1341,7 @@ The module needs to define a function `deps()`.
 
   @deps(MyApp::ReactiveModel, M::Module)
 
-  
+
 Add the dependencies of the module M to the dependencies of the app MyApp.
 The module needs to define a function `deps()`.
 """
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 62b7ed31..761e4fb4 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -347,6 +347,18 @@ end
 function channeldefault() :: Union{String,Nothing}
   params(CHANNELPARAM, (haskey(ENV, "$CHANNELPARAM") ? (Genie.Router.params!(CHANNELPARAM, ENV["$CHANNELPARAM"])) : nothing))
 end
+function channeldefault(::Type{M}) where M<:ReactiveModel
+  haskey(ENV, "$CHANNELPARAM") && (Genie.Router.params!(CHANNELPARAM, ENV["$CHANNELPARAM"]))
+  haskey(params(), CHANNELPARAM) && return params(CHANNELPARAM)
+
+  if ! haskey(Genie.Router.params(), :CHANNEL) && ! haskey(Genie.Router.params(), :ROUTE)
+    return nothing
+  end
+
+  model_id = Symbol(Stipple.routename(M))
+  stored_model = Stipple.ModelStorage.Sessions.GenieSession.get(model_id, nothing)
+  stored_model === nothing ? nothing : getfield(stored_model, Stipple.CHANNELFIELDNAME)
+end
 
 @nospecialize
 
@@ -422,10 +434,10 @@ frontend and perform the 2-way backend-frontend data sync. Returns the instance
 hs_model = Stipple.init(HelloPie)
 ```
 """
-function init(::Type{M};
+function init(t::Type{M};
               vue_app_name::S = Stipple.Elements.root(M),
               endpoint::S = vue_app_name,
-              channel::Union{Any,Nothing} = channeldefault(),
+              channel::Union{Any,Nothing} = channeldefault(t),
               debounce::Int = JS_DEBOUNCE_TIME,
               transport::Module = Genie.WebChannels,
               core_theme::Bool = true)::M where {M<:ReactiveModel, S<:AbstractString}
@@ -443,7 +455,7 @@ function init(::Type{M};
   elseif hasproperty(model, CHANNELFIELDNAME)
     getchannel(model)
   else
-    setchannel(model, channelfactory())
+    setchannel(model, channel)
   end
 
   # add a timer that checks if the model is outdated and if so prepare the model to be garbage collected
@@ -451,83 +463,86 @@ function init(::Type{M};
 
   PRECOMPILE[] || Timer(setup_purge_checker(model), PURGE_CHECK_DELAY[], interval = PURGE_CHECK_DELAY[])
 
-  if is_channels_webtransport()
-    Genie.Assets.channels_subscribe(channel)
-  else
-    Genie.Assets.webthreads_subscribe(channel)
-    Genie.Assets.webthreads_push_pull(channel)
-  end
-
-  ch = "/$channel/watchers"
-  if ! Genie.Router.ischannel(Symbol(ch))
-    Genie.Router.channel(ch, named = Symbol(ch)) do
-      payload = Genie.Requests.payload(:payload)["payload"]
-      client = transport == Genie.WebChannels ? Genie.Requests.wsclient() : Genie.Requests.wtclient()
+  # register channels and routes only if within a request
+  if haskey(Genie.Router.params(), :CHANNEL) || haskey(Genie.Router.params(), :ROUTE)
+    if is_channels_webtransport()
+      Genie.Assets.channels_subscribe(channel)
+    else
+      Genie.Assets.webthreads_subscribe(channel)
+      Genie.Assets.webthreads_push_pull(channel)
+    end
 
-      try
-        haskey(payload, "sesstoken") && ! isempty(payload["sesstoken"]) &&
-          Genie.Router.params!(:session,
-                                Stipple.ModelStorage.Sessions.GenieSession.load(payload["sesstoken"] |> Genie.Encryption.decrypt))
-      catch ex
-        @error ex
-      end
+    ch = "/$channel/watchers"
+    # if ! Genie.Router.ischannel(Router.channelname(ch))
+      Genie.Router.channel(ch, named = Router.channelname(ch)) do
+        payload = Genie.Requests.payload(:payload)["payload"]
+        client = transport == Genie.WebChannels ? Genie.Requests.wsclient() : Genie.Requests.wtclient()
+
+        try
+          haskey(payload, "sesstoken") && ! isempty(payload["sesstoken"]) &&
+            Genie.Router.params!(:session,
+                                  Stipple.ModelStorage.Sessions.GenieSession.load(payload["sesstoken"] |> Genie.Encryption.decrypt))
+        catch ex
+          @error ex
+        end
 
-      field = Symbol(payload["field"])
+        field = Symbol(payload["field"])
 
-      #check if field exists
-      hasfield(CM, field) || return ok_response
+        #check if field exists
+        hasfield(CM, field) || return ok_response
 
-      valtype = Dict(zip(fieldnames(CM), CM.types))[field]
-      val = valtype <: Reactive ? getfield(model, field) : Ref{valtype}(getfield(model, field))
+        valtype = Dict(zip(fieldnames(CM), CM.types))[field]
+        val = valtype <: Reactive ? getfield(model, field) : Ref{valtype}(getfield(model, field))
 
-      # reject non-public types
-      ( isprivate(field, model) || isreadonly(field, model) ) && return ok_response
+        # reject non-public types
+        ( isprivate(field, model) || isreadonly(field, model) ) && return ok_response
 
-      newval = convertvalue(val, payload["newval"])
-      oldval = try
-        convertvalue(val, payload["oldval"])
-      catch ex
-        val[]
-      end
-
-      push!(model, field => newval; channel = channel, except = client)
-      LAST_ACTIVITY[Symbol(channel)] = now()
+        newval = convertvalue(val, payload["newval"])
+        oldval = try
+          convertvalue(val, payload["oldval"])
+        catch ex
+          val[]
+        end
 
-      try
-        update!(model, field, newval, oldval)
-      catch ex
-        # send the error to the frontend
-        if Genie.Configuration.isdev()
-          return ex
-        else
-          return "An error has occured -- please check the logs"
+        push!(model, field => newval; channel = channel, except = client)
+        LAST_ACTIVITY[Symbol(channel)] = now()
+
+        try
+          update!(model, field, newval, oldval)
+        catch ex
+          # send the error to the frontend
+          if Genie.Configuration.isdev()
+            return ex
+          else
+            return "An error has occured -- please check the logs"
+          end
         end
-      end
 
-      ok_response
-    end
-  end
+        ok_response
+      end
+    # end
 
-  ch = "/$channel/keepalive"
-  if ! Genie.Router.ischannel(Symbol(ch))
-    Genie.Router.channel(ch, named = Symbol(ch)) do
-      LAST_ACTIVITY[Symbol(channel)] = now()
-      ok_response
+    ch = "/$channel/keepalive"
+    if ! Genie.Router.ischannel(Router.channelname(ch))
+      Genie.Router.channel(ch, named = Router.channelname(ch)) do
+        LAST_ACTIVITY[Symbol(channel)] = now()
+        ok_response
+      end
     end
-  end
 
-  ch = "/$channel/events"
-  if ! Genie.Router.ischannel(Symbol(ch))
-    Genie.Router.channel(ch, named = Symbol(ch)) do
-      # get event name
-      event = Genie.Requests.payload(:payload)["event"]
-      # form handler parameter & call event notifier
-      handler = Symbol(get(event, "name", nothing))
-      event_info = get(event, "event", nothing)
-      isempty(methods(notify, (M, Val{handler}))) || notify(model, Val(handler))
-      isempty(methods(notify, (M, Val{handler}, Any))) || notify(model, Val(handler), event_info)
-      LAST_ACTIVITY[Symbol(channel)] = now()
-      ok_response
+    ch = "/$channel/events"
+    if ! Genie.Router.ischannel(Router.channelname(ch))
+      Genie.Router.channel(ch, named = Router.channelname(ch)) do
+        # get event name
+        event = Genie.Requests.payload(:payload)["event"]
+        # form handler parameter & call event notifier
+        handler = Symbol(get(event, "name", nothing))
+        event_info = get(event, "event", nothing)
+        isempty(methods(notify, (M, Val{handler}))) || notify(model, Val(handler))
+        isempty(methods(notify, (M, Val{handler}, Any))) || notify(model, Val(handler), event_info)
+        LAST_ACTIVITY[Symbol(channel)] = now()
+        ok_response
+      end
     end
   end
 
@@ -731,7 +746,7 @@ end
 function injectdeps(output::Vector{AbstractString}, M::Type{<:ReactiveModel}) :: Vector{AbstractString}
   for (key, f) in DEPS
     key isa DataType && key <: ReactiveModel && continue
-    # exclude keys starting with '_' 
+    # exclude keys starting with '_'
     key isa Symbol && startswith("$key", '_') && continue
     push!(output, f()...)
   end
@@ -790,7 +805,7 @@ end
 
 function deps!(M::Type{<:ReactiveModel}, f::Function; extra_deps = true)
   key = extra_deps ? Symbol("_$(vm(M))_$(nameof(f))") : M
-  DEPS[key] = f isa Function ? f : f.deps 
+  DEPS[key] = f isa Function ? f : f.deps
 end
 
 deps!(M::Type{<:ReactiveModel}, modul::Module; extra_deps = true) = deps!(M, modul.deps; extra_deps)
@@ -958,13 +973,13 @@ function attributes(kwargs::Union{Vector{<:Pair}, Base.Iterators.Pairs, Dict},
   for (k,v) in kwargs
     v === nothing && continue
     mapped = false
-    
+
     k_str = string(k)
 
     if haskey(mappings, k_str)
       k_str = mappings[k_str]
     end
-    
+
     v_isa_jsexpr = v isa Symbol || !isa(v, Union{AbstractString, Bool, Number})
     attr_key = string((v_isa_jsexpr && ! startswith(k_str, ":") &&
                 ! (endswith(k_str, "!") || startswith(k_str, "v-") || startswith(k_str, "v" * Genie.config.html_parser_char_dash)) ? ":" : ""), k_str) |> Symbol

From 3480dfbc1d299bd4b5314c2c0a541275edf187f4 Mon Sep 17 00:00:00 2001
From: J S <49557684+svilupp@users.noreply.github.com>
Date: Fri, 15 Dec 2023 15:13:49 +0000
Subject: [PATCH 132/265] Fix invalid session key (#243)

Fixes https://github.com/GenieFramework/Stipple.jl/issues/242
---
 src/Stipple.jl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 0774c728..02e0e84c 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -478,7 +478,7 @@ function init(t::Type{M};
 
       try
         haskey(payload, "sesstoken") && ! isempty(payload["sesstoken"]) &&
-          Genie.Router.params!(:session,
+          Genie.Router.params!(Stipple.ModelStorage.Sessions.GenieSession.PARAMS_SESSION_KEY,
                                 Stipple.ModelStorage.Sessions.GenieSession.load(payload["sesstoken"] |> Genie.Encryption.decrypt))
       catch ex
         @error ex

From 9a8b35e247ea6243985145ed3141136d8d4128fc Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <essenciary@users.noreply.github.com>
Date: Fri, 15 Dec 2023 16:16:21 +0100
Subject: [PATCH 133/265] Pump version

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index e6a493e1..429a1863 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.24"
+version = "0.27.25"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 9277d3e90a96c048aeff47b8585c78fe9f5d25ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 17 Dec 2023 14:55:43 +0100
Subject: [PATCH 134/265] support Dicts in class attributes

---
 src/Layout.jl | 59 ++++++++++++++++++++++++++++++++-------------------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 22d4bbf6..cb5eaa4c 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -110,22 +110,23 @@ end
 function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = true, flexgrid_mappings::Dict{Symbol,Symbol} = Dict{Symbol,Symbol}(), kwargs...)
   kwargs = Dict{Symbol,Any}(kwargs...)
   
-  # make a classes array that contains strings
-  # while class will contain a js expression as Symbol
-  # if either class is a Symbol or class! is not nothing.
-  # So an argument of the form `class! = "'my-class' + 'your-class'` is supported
-  # Furthermore Vectors are now supported
-  class isa Vector && (class = Symbol(join(js_attr.(class), " + ' ' + ")))
-  class! isa Vector && (class! = join(js_attr.(class!), " + ' ' + "))
-  
-  classes = String[]
-  if class isa Symbol
-    class! !== nothing && (class = Symbol("$class! + $class"))
-  else
-    push!(classes, "$class")
-    class! !== nothing && (class = Symbol("$class!"))
+  # support all different types of classes that vue supports: String, Expressions (Symbols), Arrays, Dicts
+  # todo check if vector contains only strings ...
+  if class! !== nothing
+    class = if class isa Symbol
+      Any[JSONText(class!) + JSONText(class)]
+    elseif class isa String
+      vcat(Any[JSONText(class!)], split(class))
+    elseif class isa AbstractDict
+      Any[JSONText(class!), class]
+    elseif class isa Vector
+      vcat([JSONText(class!)], class)
+    else
+      class
+    end
   end
 
+  classes = String[]
   for key in (:col, :xs, :sm, :md, :lg, :xl)
     newkey = get(flexgrid_mappings, key, key)
     if haskey(kwargs, newkey)
@@ -134,16 +135,30 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
       delete!(kwargs, newkey)
     end
   end
-  colclass = join(classes[classes .!= ""], ' ')
 
-  if length(colclass) != 0
-    class = class isa Symbol ? Symbol("$class + ' $colclass'") : colclass
+  if length(classes) != 0
+    class = if class isa Symbol
+      vcat([JSONText(class)], classes)
+    elseif class isa AbstractDict
+      T = first(typeof(class).parameters)
+      for c in classes
+        push!(class, T(c) => true)
+      end
+    elseif class isa Vector
+      vcat(class, classes)
+    else
+      join(pushfirst!(classes, class), ' ')
+    end
   end
-  
-  (class isa Symbol || length(class) > 0) && (kwargs[:class] = class)
-
-  if ! symbol_class && class isa Symbol
-    kwargs[:class!] = string(kwargs[:class])
+   
+  (class isa Symbol || class isa String && length(class) > 0) && (kwargs[:class] = class)
+
+  if ! symbol_class && class isa Symbol || class isa Vector || class isa AbstractDict
+    kwargs[:class!] = if class isa Symbol || class isa String
+      string(kwargs[:class])
+    else
+      js_attr(class)
+    end
     delete!(kwargs, :class)
   end
 

From ed05b8d22cfe215dfa4cb7efa6e296372298afcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 17 Dec 2023 23:27:18 +0100
Subject: [PATCH 135/265] fix tests for flexgrid kwargs with new class options

---
 src/Layout.jl    | 23 +++++++++++++++++++----
 test/runtests.jl | 20 ++++++++++++--------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index cb5eaa4c..1fdd0ea6 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -141,6 +141,7 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
       vcat([JSONText(class)], classes)
     elseif class isa AbstractDict
       T = first(typeof(class).parameters)
+      class = convert(Dict{T, Any}, class)
       for c in classes
         push!(class, T(c) => true)
       end
@@ -165,6 +166,19 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
   return kwargs
 end
 
+function append_class(class, subclass)
+  subclass isa Symbol && (subclass = JSONText(subclass))
+  if class isa Symbol
+    [JSONText(class), subclass]
+  elseif class isa String
+    subclass isa String ? join(push!(split(class), subclass), " ") : vcat(split(class), [subclass])
+  elseif class isa Vector
+    vcat(class, [subclass])
+  else # Dict
+    [class, subclass]
+  end
+end
+
 """
     function row(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)
 
@@ -188,7 +202,8 @@ function row(args...;
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
 
-  class = class isa Symbol ? Symbol("$class + ' row'") : class isa Vector ? push!(class, "row") : join(push!(split(class), "row"), " ")
+  # class = class isa Symbol ? Symbol("$class + ' row'") : class isa Vector ? push!(class, "row") : join(push!(split(class), "row"), " ")
+  class = append_class(class, "row")
   kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
@@ -217,8 +232,7 @@ function column(args...;
 
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
-
-  class = class isa Symbol ? Symbol("$class + ' column'") : join(push!(split(class), "column"), " ")
+  class = append_class(class, "column")
   kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
@@ -261,7 +275,8 @@ function cell(args...;
   # for backward compatibility with `size` kwarg
   col == 0 && size != 0 && (col = size)
   
-  class = class isa Symbol ? Symbol("$class + ' st-col'") : join(push!(split(class), "st-col"), " ")
+  # class = class isa Symbol ? Symbol("$class + ' st-col'") : join(push!(split(class), "st-col"), " ")
+  class = append_class(class, "st-col")
   kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
diff --git a/test/runtests.jl b/test/runtests.jl
index d2d3d9fe..40c2eed8 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -319,13 +319,13 @@ end
     @test contains(el, "class=\"myclass column col-2 col-sm-9")
 
     el = column(col = 2, sm = 9, class = :myclass)
-    @test contains(el, r":class=\"myclass \+ .*column.* col-2 col-sm-9'")
+    @test contains(el, ":class=\"[myclass,'column','col-2','col-sm-9']\"")
 
     el = column(col = 2, sm = 9, class! = "myclass")
-    @test contains(el, r":class=\"myclass \+ .*column.* col-2 col-sm-9'")
+    @test contains(el, ":class=\"[myclass,'column','col-2','col-sm-9']\"")
 
     el = column(col = 2, sm = 9, class! = :myclass)
-    @test contains(el, r":class=\"myclass \+ .*column.* col-2 col-sm-9'")
+    @test contains(el, ":class=\"[myclass,'column','col-2','col-sm-9']\"")
 
     # ---------
 
@@ -333,10 +333,10 @@ end
     @test contains(el, "class=\"myclass row col-2 col-sm-9")
 
     el = row(col = 2, sm = 9, class = :myclass)
-    @test contains(el, r":class=\"myclass \+ .*row.* col-2 col-sm-9'")
-
+    @test contains(el, ":class=\"[myclass,'row','col-2','col-sm-9']\"")
+    
     el = row(col = 2, sm = 9, class! = "myclass")
-    @test contains(el, r":class=\"myclass \+ .*row.* col-2 col-sm-9'")
+    @test contains(el, ":class=\"[myclass,'row','col-2','col-sm-9']\"")
 
     # ---------
 
@@ -344,14 +344,18 @@ end
     @test contains(el, "class=\"myclass st-col col-2 col-sm-9")
 
     el = cell(col = 2, sm = 9, class = :myclass)
-    @test contains(el, r":class=\"myclass \+ .*st-col.* col-2 col-sm-9'")
+    @test contains(el, ":class=\"[myclass,'st-col','col-2','col-sm-9']\"")
 
     el = column(col = 2, sm = 9, class! = "myclass")
-    @test contains(el, r":class=\"myclass \+ .*column.* col-2 col-sm-9'")
+    @test contains(el, ":class=\"[myclass,'column','col-2','col-sm-9']\"")
 
     @test cell(sm = 9) == "<div class=\"st-col col col-sm-9\"></div>"
 
     @test cell(col = -1, sm = 9) == "<div class=\"st-col col-sm-9\"></div>"
+
+    @test htmldiv(col = 9, class = "a b c") == "<div class=\"a b c col-9\"></div>"
+
+    @test htmldiv(col = 9, class = split("a b c")) == "<div :class=\"['a','b','c','col-9']\"></div>"
 end
 
 @testset "Vue Conditionals and Iterator" begin

From fb18b5f74b6e47e6c30f0c44b9a49321896d03a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 17 Dec 2023 23:41:36 +0100
Subject: [PATCH 136/265] keep compat to julia 1.6 for replace

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

diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index c57d34eb..9eedea3a 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -195,5 +195,5 @@ quasar(
 ```
 """
 function js_attr(x)
-  Symbol(replace(json(render(x)), "'" => raw"\'", '"' => '''))
+  Symbol(replace(replace(json(render(x)), "'" => raw"\'"), '"' => '''))
 end

From aa2b634d73c40be91feb6e1c5d35038ae38cf320 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 18 Dec 2023 07:48:43 +0100
Subject: [PATCH 137/265] set version v0.27.26

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 429a1863..ef112e7d 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.25"
+version = "0.27.26"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 65b2f3dd02add39b7fc65a9aca842cfe21f14500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 18 Dec 2023 08:34:12 +0100
Subject: [PATCH 138/265] fix edge cases of class handling

---
 src/Layout.jl    | 16 +++++++---------
 test/runtests.jl |  2 ++
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 1fdd0ea6..a5980076 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -109,15 +109,16 @@ end
 
 function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = true, flexgrid_mappings::Dict{Symbol,Symbol} = Dict{Symbol,Symbol}(), kwargs...)
   kwargs = Dict{Symbol,Any}(kwargs...)
-  
+
   # support all different types of classes that vue supports: String, Expressions (Symbols), Arrays, Dicts
   # todo check if vector contains only strings ...
   if class! !== nothing
     class = if class isa Symbol
-      Any[JSONText(class!) + JSONText(class)]
+      Any[JSONText(class!), JSONText(class)]
     elseif class isa String
-      vcat(Any[JSONText(class!)], split(class))
+      vcat(JSONText(class!), split(class))
     elseif class isa AbstractDict
+      class = LittleDict(k => JSONText(v)  for (k, v) in class)
       Any[JSONText(class!), class]
     elseif class isa Vector
       vcat([JSONText(class!)], class)
@@ -140,18 +141,15 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
     class = if class isa Symbol
       vcat([JSONText(class)], classes)
     elseif class isa AbstractDict
-      T = first(typeof(class).parameters)
-      class = convert(Dict{T, Any}, class)
-      for c in classes
-        push!(class, T(c) => true)
-      end
+      class = LittleDict(k => JSONText(v)  for (k, v) in class)
+      vcat(class, classes)
     elseif class isa Vector
       vcat(class, classes)
     else
       join(pushfirst!(classes, class), ' ')
     end
   end
-   
+  
   (class isa Symbol || class isa String && length(class) > 0) && (kwargs[:class] = class)
 
   if ! symbol_class && class isa Symbol || class isa Vector || class isa AbstractDict
diff --git a/test/runtests.jl b/test/runtests.jl
index 40c2eed8..d5d5211b 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -356,6 +356,8 @@ end
     @test htmldiv(col = 9, class = "a b c") == "<div class=\"a b c col-9\"></div>"
 
     @test htmldiv(col = 9, class = split("a b c")) == "<div :class=\"['a','b','c','col-9']\"></div>"
+
+    @test htmldiv(col = 9, class = Dict(:myclass => "b"), class! = "test") == "<div :class=\"[test,{'myclass':b},'col-9']\"></div>"
 end
 
 @testset "Vue Conditionals and Iterator" begin

From 99821c778628945277af12c46486e3590aaef032 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Wed, 3 Jan 2024 13:15:24 +0100
Subject: [PATCH 139/265] @in breaks in v1.10

---
 src/ReactiveTools.jl | 2 +-
 src/Stipple.jl       | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 8fa21356..89a83ef9 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -421,7 +421,7 @@ Declares a reactive variable that is public and can be written to from the UI.
 end
 ```
 """
-macro in end
+macro var"in" end
 
 """
 ```julia
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 0774c728..9e931bfa 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -557,6 +557,7 @@ function init(t::Type{M};
     if ! Genie.Router.ischannel(Router.channelname(ch))
       Genie.Router.channel(ch, named = Router.channelname(ch)) do
         LAST_ACTIVITY[Symbol(channel)] = now()
+
         ok_response
       end
     end
@@ -578,7 +579,9 @@ function init(t::Type{M};
 
         isempty(methods(notify, (M, Val{handler}))) || notify(model, Val(handler))
         isempty(methods(notify, (M, Val{handler}, Any))) || notify(model, Val(handler), event_info)
+
         LAST_ACTIVITY[Symbol(channel)] = now()
+
         ok_response
       end
     end
@@ -588,10 +591,6 @@ function init(t::Type{M};
 
   setup(model, channel)
 end
-function init(m::M; kwargs...)::M where {M<:ReactiveModel}
-  error("This method has been removed -- please use `init($M; kwargs...)` instead")``
-end
-
 
 function routename(::Type{M}) where M<:ReactiveModel
   AM = get_abstract_type(M)

From 758c4f4829daba45936144aab301c90081fbc0ce Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Fri, 5 Jan 2024 22:21:24 +0100
Subject: [PATCH 140/265] Support for file uploads, various fixes

---
 Project.toml              |  4 ++--
 assets/js/watchers.js     |  1 +
 src/Elements.jl           |  1 +
 src/ModelStorage.jl       | 14 +++++++++++---
 src/ReactiveTools.jl      |  4 ++--
 src/Stipple.jl            | 24 +++++++++++++++++++++---
 src/stipple/reactivity.jl |  4 +++-
 7 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/Project.toml b/Project.toml
index ef112e7d..b737a72a 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.26"
+version = "0.27.27"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
@@ -27,7 +27,7 @@ Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 DataFrames = "1"
 Dates = "1.6"
 FilePathsBase = "0.9"
-Genie = "5.23.6"
+Genie = "5.23.7"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"
diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index 4cd55efb..fc07662c 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -82,6 +82,7 @@ const reviveMixin = {
 const eventMixin = {
   methods: {
     handle_event: function (event_data, event_handler, mode) {
+      if (event_data === undefined) { event_data = {} }
       console.debug('event: ' + JSON.stringify(event_data) + ":" + event_handler)
       if (mode=='addclient') { event_data._addclient = true}
       Genie.WebChannels.sendMessageTo(window.CHANNEL, 'events', {
diff --git a/src/Elements.jl b/src/Elements.jl
index 31440780..b94a23b0 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -102,6 +102,7 @@ function vue_integration(::Type{M};
   }
 
   function app_ready() {
+      $vue_app_name.channel_ = window.CHANNEL;
       $vue_app_name.isready = true;
       Genie.Revivers.addReviver(window.$(vue_app_name).revive_jsfunction);
       $(transport == Genie.WebChannels &&
diff --git a/src/ModelStorage.jl b/src/ModelStorage.jl
index 2463e3d2..17022228 100644
--- a/src/ModelStorage.jl
+++ b/src/ModelStorage.jl
@@ -8,12 +8,20 @@ import GenieSessionFileSession
 
 export init_from_storage
 
+function model_id(::Type{M}) where M
+  Symbol(Stipple.routename(M))
+end
+
+function store(model::M) where M
+  GenieSession.set!(model_id(M), model)
+  nothing
+end
+
 function init_from_storage( t::Type{M};
                             channel::Union{Any,Nothing} = Stipple.channeldefault(t),
                             kwargs...) where M
-  model_id = Symbol(Stipple.routename(M))
   model = Stipple.init(M; channel, kwargs...)
-  stored_model = GenieSession.get(model_id, nothing)
+  stored_model = GenieSession.get(model_id(M), nothing)
 
   CM = Stipple.get_concrete_type(M)
   for f in fieldnames(CM)
@@ -28,7 +36,7 @@ function init_from_storage( t::Type{M};
       # register reactive handlers to automatically save model on session when model changes
       if f ∉ [Stipple.AUTOFIELDS...]
         on(field) do _
-          GenieSession.set!(model_id, model)
+          GenieSession.set!(model_id(M), model)
         end
       end
     else
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 89a83ef9..af976e9e 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -186,7 +186,7 @@ function delete_events(::Type{M}) where M
     end
   end
   nothing
- end
+end
 
 function delete_handlers!(m::Module)
   delete!(HANDLERS, m)
@@ -421,7 +421,7 @@ Declares a reactive variable that is public and can be written to from the UI.
 end
 ```
 """
-macro var"in" end
+macro in end
 
 """
 ```julia
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 9253a8cd..23e4828d 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -397,12 +397,16 @@ function deletemode!(modes, fieldnames::Symbol...)
 end
 
 function init_storage()
+  ch = channelfactory()
+
   LittleDict{Symbol, Expr}(
     CHANNELFIELDNAME =>
-      :($(Stipple.CHANNELFIELDNAME)::$(Stipple.ChannelName) = Stipple.channelfactory()),
-    :modes__ => :(modes__::Stipple.LittleDict{Symbol, Int} = Stipple.LittleDict{Symbol, Int}()),
+      :($(Stipple.CHANNELFIELDNAME)::$(Stipple.ChannelName) = $ch),
+    :modes__ => :(modes__::Stipple.LittleDict{Symbol,Int} = Stipple.LittleDict{Symbol,Int}()),
     :isready => :(isready::Stipple.R{Bool} = false),
-    :isprocessing => :(isprocessing::Stipple.R{Bool} = false)
+    :isprocessing => :(isprocessing::Stipple.R{Bool} = false),
+    :channel_ => :(channel_::String = $ch),
+    :fileuploads => :(fileuploads::Stipple.R{Dict{AbstractString,AbstractString}} = Dict{AbstractString,AbstractString}())
   )
 end
 
@@ -457,6 +461,9 @@ function init(t::Type{M};
     setchannel(model, channel)
   end
 
+  # make sure we store the channel name in the model
+  Stipple.ModelStorage.Sessions.store(model)
+
   # add a timer that checks if the model is outdated and if so prepare the model to be garbage collected
   LAST_ACTIVITY[Symbol(getchannel(model))] = now()
 
@@ -667,6 +674,17 @@ function Base.push!(app::M, vals::Pair{Symbol,T};
                     channel::String = getchannel(app),
                     except::Union{Nothing,UInt,Vector{UInt}} = nothing,
                     restrict::Union{Nothing,UInt,Vector{UInt}} = nothing)::Bool where {T,M<:ReactiveModel}
+  try
+    _push!(vals, channel; except, restrict)
+  catch ex
+    @debug ex
+    false
+  end
+end
+
+function _push!(vals::Pair{Symbol,T}, channel::String;
+                except::Union{Nothing,UInt,Vector{UInt}} = nothing,
+                restrict::Union{Nothing,UInt,Vector{UInt}} = nothing)::Bool where {T}
   try
     webtransport().broadcast(channel, json(Dict("key" => julia_to_vue(vals[1]), "value" => Stipple.render(vals[2], vals[1]))); except, restrict)
   catch ex
diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index b4ce33be..c2fe41e0 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -171,13 +171,15 @@ function setchannel(m::M, value) where {M<:ReactiveModel}
   setfield!(m, CHANNELFIELDNAME, ChannelName(value))
 end
 
-const AUTOFIELDS = [:isready, :isprocessing] # not DRY but we need a reference to the auto-set fields
+const AUTOFIELDS = [:isready, :isprocessing, :fileuploads] # not DRY but we need a reference to the auto-set fields
 
 @pour reactors begin
   modes__::LittleDict{Symbol, Int} = LittleDict(:modes__ => PRIVATE, :channel__ => PRIVATE)
   channel__::Stipple.ChannelName = Stipple.channelfactory()
   isready::Stipple.R{Bool} = false
   isprocessing::Stipple.R{Bool} = false
+  channel_::String = "" # not sure what this does if it's empty
+  fileuploads::Stipple.R{Dict{AbstractString,AbstractString}} = Dict{AbstractString,AbstractString}()
 end
 
 @mix Stipple.@with_kw mutable struct old_reactive

From 8aaa1d593ea765c03189428e41973f2aae06c42b Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Wed, 10 Jan 2024 15:31:20 +0100
Subject: [PATCH 141/265] Bump Genie version

---
 Project.toml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Project.toml b/Project.toml
index b737a72a..2c3f290a 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.27"
+version = "0.27.28"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
@@ -27,7 +27,7 @@ Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 DataFrames = "1"
 Dates = "1.6"
 FilePathsBase = "0.9"
-Genie = "5.23.7"
+Genie = "5.23.8"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"

From 3bec4edb53afb44d0c5ac78b32931a76e675db5d Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Wed, 10 Jan 2024 16:37:38 +0100
Subject: [PATCH 142/265] Allow optional registration of channels (to support
 global models)

---
 Project.toml   | 2 +-
 src/Stipple.jl | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/Project.toml b/Project.toml
index 2c3f290a..91769e52 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.28"
+version = "0.27.29"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 23e4828d..1cf3ba49 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -443,7 +443,8 @@ function init(t::Type{M};
               channel::Union{Any,Nothing} = channeldefault(t),
               debounce::Int = JS_DEBOUNCE_TIME,
               transport::Module = Genie.WebChannels,
-              core_theme::Bool = true)::M where {M<:ReactiveModel, S<:AbstractString}
+              core_theme::Bool = true,
+              always_register_channels::Bool = false)::M where {M<:ReactiveModel, S<:AbstractString}
 
   webtransport!(transport)
   AM = get_abstract_type(M)
@@ -470,7 +471,7 @@ function init(t::Type{M};
   PRECOMPILE[] || Timer(setup_purge_checker(model), PURGE_CHECK_DELAY[], interval = PURGE_CHECK_DELAY[])
 
   # register channels and routes only if within a request
-  if haskey(Genie.Router.params(), :CHANNEL) || haskey(Genie.Router.params(), :ROUTE)
+  if haskey(Genie.Router.params(), :CHANNEL) || haskey(Genie.Router.params(), :ROUTE) || always_register_channels
     if is_channels_webtransport()
       Genie.Assets.channels_subscribe(channel)
     else
@@ -491,8 +492,6 @@ function init(t::Type{M};
         @error ex
       end
 
-      @debug payload
-
       field = Symbol(payload["field"])
 
       #check if field exists

From 4e8b33b57fbec9ca1f072e123bf04376bd9bba77 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Wed, 10 Jan 2024 17:10:04 +0100
Subject: [PATCH 143/265] Module config to always register channels

---
 Project.toml   | 2 +-
 src/Stipple.jl | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/Project.toml b/Project.toml
index 91769e52..9438538e 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.29"
+version = "0.27.30"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 1cf3ba49..b454fc6f 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -16,6 +16,7 @@ existing Vue.js libraries.
 module Stipple
 
 const PRECOMPILE = Ref(false)
+const ALWAYS_REGISTER_CHANNELS = Ref(false)
 
 """
 @using_except(expr)
@@ -444,7 +445,7 @@ function init(t::Type{M};
               debounce::Int = JS_DEBOUNCE_TIME,
               transport::Module = Genie.WebChannels,
               core_theme::Bool = true,
-              always_register_channels::Bool = false)::M where {M<:ReactiveModel, S<:AbstractString}
+              always_register_channels::Bool = ALWAYS_REGISTER_CHANNELS[])::M where {M<:ReactiveModel, S<:AbstractString}
 
   webtransport!(transport)
   AM = get_abstract_type(M)

From 63fa9694aa00203a88b1cd2bead755a0f51ea812 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Thu, 11 Jan 2024 09:19:57 +0100
Subject: [PATCH 144/265] Allow eager registration of channels to fix breaking
 change

---
 Project.toml   | 2 +-
 src/Stipple.jl | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Project.toml b/Project.toml
index 9438538e..fd23d19c 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.30"
+version = "0.27.31"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/src/Stipple.jl b/src/Stipple.jl
index b454fc6f..fa7fc74d 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -16,7 +16,7 @@ existing Vue.js libraries.
 module Stipple
 
 const PRECOMPILE = Ref(false)
-const ALWAYS_REGISTER_CHANNELS = Ref(false)
+const ALWAYS_REGISTER_CHANNELS = Ref(true)
 
 """
 @using_except(expr)

From 8c1b15b7241e7d242ebc8928f4c667300f4cc57c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 17 Jan 2024 01:46:16 +0100
Subject: [PATCH 145/265] accept AbstractStrings and Vectors for headconent,
 accept head_content in DEFAULT_LAYOUT

---
 src/Layout.jl        | 6 +++---
 src/ReactiveTools.jl | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index a5980076..85d3ee07 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -39,7 +39,7 @@ julia> layout([
 ```
 """
 function layout(output::Union{S,Vector}, m::M;
-                partial::Bool = false, title::String = "", class::String = "", style::String = "", head_content::String = "",
+                partial::Bool = false, title::String = "", class::String = "", style::String = "", head_content::Union{AbstractString, Vector{<:AbstractString}} = "",
                 channel::String = Stipple.channel_js_name,
                 core_theme::Bool = true)::ParsedHTMLString where {M<:ReactiveModel, S<:AbstractString}
 
@@ -58,7 +58,7 @@ function layout(output::Union{S,Vector}, m::M;
       Genie.Renderer.Html.head([
         Genie.Renderer.Html.title(title)
         Genie.Renderer.Html.meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
-        head_content
+        join(head_content)
       ])
       Genie.Renderer.Html.body(content, class=class, style=style)
     ])
@@ -83,7 +83,7 @@ julia> page(:elemid, [
 """
 function page(model::M, args...;
               partial::Bool = false, title::String = "", class::String = "container", style::String = "",
-              channel::String = Genie.config.webchannels_default_route, head_content::String = "",
+              channel::String = Genie.config.webchannels_default_route, head_content::Union{AbstractString, Vector{<:AbstractString}} = "",
               prepend::Union{S,Vector} = "", append::Union{T,Vector} = [],
               core_theme::Bool = true, kwargs...)::ParsedHTMLString where {M<:Stipple.ReactiveModel, S<:AbstractString,T<:AbstractString}
 
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index af976e9e..94b382fb 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -39,7 +39,7 @@ const TYPES = LittleDict{Module,Union{<:DataType,Nothing}}()
 const HANDLERS_FUNCTIONS = LittleDict{Type{<:ReactiveModel},Function}()
 
 function DEFAULT_LAYOUT(; title::String = "Genie App",
-                          meta::D = Dict()) where {D <:AbstractDict}
+                          meta::D = Dict(), head_content::Union{AbstractString, Vector} = "") where {D <:AbstractDict}
   tags = Genie.Renderers.Html.for_each(x -> """<meta name="$(string(x.first))" content="$(string(x.second))">\n""", meta)
   """
 <!DOCTYPE html>
@@ -64,6 +64,7 @@ function DEFAULT_LAYOUT(; title::String = "Genie App",
       }
       ._genie .row .col-12 { width:50%;margin:auto; }
     </style>
+    $(join(head_content, "\n    "))
   </head>
   <body>
     <div class='container'>

From 21fdd3d556aadd3980be436a64b3171e15eee8f8 Mon Sep 17 00:00:00 2001
From: Yakir Luc Gagnon <12.yakir@gmail.com>
Date: Thu, 18 Jan 2024 09:57:58 +0100
Subject: [PATCH 146/265] Update ReactiveTools.jl

Added a tiny note about specifying an explicit app in the `@page` macro.
---
 src/ReactiveTools.jl | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index af976e9e..6c92c75a 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -1004,6 +1004,8 @@ Registers a new page with source in `view` to be rendered at the route `url`.
 
 ```julia
 @page("/", "view.html")
+
+@page("/", ui; model = MyApp) # for specifying an explicit app 
 ```
 """
 macro page(expressions...)

From c7cbcb780b96dc81aadbef1ce07fca322718746b Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 18 Jan 2024 11:46:14 +0100
Subject: [PATCH 147/265] fix channel issue

---
 src/ReactiveTools.jl      |  6 ++---
 src/Stipple.jl            | 12 +++-------
 src/stipple/reactivity.jl |  3 ++-
 test/runtests.jl          | 50 ++++++++++++++++++++++-----------------
 4 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index af976e9e..c94a4ebb 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -612,7 +612,7 @@ macro init(args...)
     end
 
     instance = let model = initfn($(init_args...))
-      new_handlers ? Base.invokelatest(handlersfn, model) : handlersfn(model)
+        new_handlers ? Base.invokelatest(handlersfn, model) : handlersfn(model)
     end
     for p in Stipple.Pages._pages
       p.context == $__module__ && (p.model = instance)
@@ -836,7 +836,7 @@ function get_known_vars(M::Module)
   reactive_vars = Symbol[]
   non_reactive_vars = Symbol[]
   for (k, v) in REACTIVE_STORAGE[M]
-    k in [:channel__, :modes__] && continue
+    k in Stipple.INTERNALFIELDS && continue
     is_reactive = startswith(string(Stipple.split_expr(v)[2]), r"(Stipple\.)?R(eactive)?($|{)")
     push!(is_reactive ? reactive_vars : non_reactive_vars, k)
   end
@@ -848,7 +848,7 @@ function get_known_vars(::Type{M}) where M<:ReactiveModel
   reactive_vars = Symbol[]
   non_reactive_vars = Symbol[]
   for (k, v) in zip(fieldnames(CM), fieldtypes(CM))
-    k in [:channel__, :modes__] && continue
+    k in Stipple.INTERNALFIELDS && continue
     push!(v <: Reactive ? reactive_vars : non_reactive_vars, k)
   end
   reactive_vars, non_reactive_vars
diff --git a/src/Stipple.jl b/src/Stipple.jl
index fa7fc74d..eb2f9aaa 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -401,8 +401,7 @@ function init_storage()
   ch = channelfactory()
 
   LittleDict{Symbol, Expr}(
-    CHANNELFIELDNAME =>
-      :($(Stipple.CHANNELFIELDNAME)::$(Stipple.ChannelName) = $ch),
+    CHANNELFIELDNAME => :($(Stipple.CHANNELFIELDNAME)::$(Stipple.ChannelName) = $ch),
     :modes__ => :(modes__::Stipple.LittleDict{Symbol,Int} = Stipple.LittleDict{Symbol,Int}()),
     :isready => :(isready::Stipple.R{Bool} = false),
     :isprocessing => :(isprocessing::Stipple.R{Bool} = false),
@@ -455,13 +454,8 @@ function init(t::Type{M};
   transport == Genie.WebChannels || (Genie.config.websockets_server = false)
   ok_response = "OK"
 
-  channel = if channel !== nothing
-    setchannel(model, channel)
-  elseif hasproperty(model, CHANNELFIELDNAME)
-    getchannel(model)
-  else
-    setchannel(model, channel)
-  end
+  channel === nothing && (channel = channelfactory())
+  setchannel(model, channel)
 
   # make sure we store the channel name in the model
   Stipple.ModelStorage.Sessions.store(model)
diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index c2fe41e0..70f61e4b 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -172,10 +172,11 @@ function setchannel(m::M, value) where {M<:ReactiveModel}
 end
 
 const AUTOFIELDS = [:isready, :isprocessing, :fileuploads] # not DRY but we need a reference to the auto-set fields
+const INTERNALFIELDS = [CHANNELFIELDNAME, :modes__] # not DRY but we need a reference to the auto-set fields
 
 @pour reactors begin
-  modes__::LittleDict{Symbol, Int} = LittleDict(:modes__ => PRIVATE, :channel__ => PRIVATE)
   channel__::Stipple.ChannelName = Stipple.channelfactory()
+  modes__::LittleDict{Symbol, Int} = LittleDict(:modes__ => PRIVATE, :channel__ => PRIVATE)
   isready::Stipple.R{Bool} = false
   isprocessing::Stipple.R{Bool} = false
   channel_::String = "" # not sure what this does if it's empty
diff --git a/test/runtests.jl b/test/runtests.jl
index d5d5211b..a9a20fae 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -5,8 +5,8 @@ using Test
 
 version = Genie.Assets.package_version(Stipple)
 
-function string_get(x)
-    String(HTTP.get(x, retries = 0, status_exception = false).body)
+function string_get(x; kwargs...)
+    String(HTTP.get(x, retries = 0, status_exception = false; kwargs...).body)
 end
 
 function get_channel(s::String)
@@ -42,9 +42,9 @@ end
 
     # channels have to be different
     @test model.channel__ != model2.channel__
-
+    
     # check whether fields are correctly defined
-    @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i, :s)
+    @test propertynames(model) == tuple(Stipple.INTERNALFIELDS..., Stipple.AUTOFIELDS..., :i, :s)
 
     # check reactivity
     model.i[] = 20
@@ -69,7 +69,7 @@ end
     end
 
     model = TestApp |> init |> handlers
-    @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i, :s, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
+    @test propertynames(model) == tuple(Stipple.INTERNALFIELDS..., Stipple.AUTOFIELDS..., :i, :s, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
 end
 
 using Stipple.ReactiveTools
@@ -84,14 +84,14 @@ using Stipple.ReactiveTools
         end
     end
 
-    model = TestApp2 |> init |> handlers
-    model2 = TestApp2 |> init |> handlers
+    model = @init TestApp2
+    model2 = @init TestApp2
 
     # channels have to be different
     @test model.channel__ != model2.channel__
 
     # check whether fields are correctly defined
-    @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i, :s)
+    @test propertynames(model) == tuple(Stipple.INTERNALFIELDS..., Stipple.AUTOFIELDS..., :i, :s)
 
     # check reactivity
     model.i[] = 20
@@ -113,7 +113,7 @@ end
     end
 
     @eval model = TestApp |> init |> handlers
-    @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i, :s, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
+    @test propertynames(model) ==  tuple(Stipple.INTERNALFIELDS..., Stipple.AUTOFIELDS..., :i, :s, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
 
     # check reactivity
     @eval model.i[] = 20
@@ -132,12 +132,12 @@ end
 
     @eval model = @init
     @eval model2 = @init
-
+    
     # channels have to be different
     @eval @test model.channel__ != model2.channel__
 
     # check whether fields are correctly defined
-    @eval @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i2, :s2)
+    @eval @test propertynames(model) ==  tuple(Stipple.INTERNALFIELDS..., Stipple.AUTOFIELDS..., :i2, :s2)
 
     # check reactivity
     @eval model.i2[] = 20
@@ -159,7 +159,7 @@ end
     end
 
     @eval model = @init
-    @eval @test propertynames(model) == (:channel__, :modes__, :isready, :isprocessing, :i3, :s3, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
+    @eval @test propertynames(model) ==  tuple(Stipple.INTERNALFIELDS..., Stipple.AUTOFIELDS..., :i3, :s3, :j, :t, :mixin_j, :mixin_t, :pre_j_post, :pre_t_post)
 
     @eval model.i3[] = 20
     @test model.s3[] == "20"
@@ -243,12 +243,15 @@ end
 
     s1 = string_get("http://localhost:$port/")
     s2 = string_get("http://localhost:$port/")
-
-    s3 = string_get("http://localhost:$port/static")
+    s3 = string_get("http://localhost:$port/", cookies = false)
+    
     s4 = string_get("http://localhost:$port/static")
+    s5 = string_get("http://localhost:$port/static")
+    s6 = string_get("http://localhost:$port/static", cookies = false)
 
-    @test get_channel(s2) != get_channel(s1)
-    @test get_channel(s3) == get_channel(s4)
+    @test get_channel(s2) == get_channel(s1)
+    @test get_channel(s3) != get_channel(s1)
+    @test get_channel(s4) == get_channel(s5) == get_channel(s6)
 
     @clear_cache
     down()
@@ -300,13 +303,16 @@ end
 
     s1 = string_get("http://localhost:$port/")
     s2 = string_get("http://localhost:$port/")
+    s3 = string_get("http://localhost:$port/", cookies = false)
+    
+    s4 = string_get("http://localhost:$port/static")
+    s5 = string_get("http://localhost:$port/static")
+    s6 = string_get("http://localhost:$port/static", cookies = false)
 
-    s3 = string_get("http://localhost:$port/static1")
-    s4 = string_get("http://localhost:$port/static1")
-
-    @test get_channel(s2) != get_channel(s1)
-    @test get_channel(s3) == get_channel(s4)
-
+    @test get_channel(s2) == get_channel(s1)
+    @test get_channel(s3) != get_channel(s1)
+    @test get_channel(s4) == get_channel(s5) == get_channel(s6)
+    
     @clear_cache MyApp
     down()
 end

From af9a24120d551d884853055adf27edc2587448eb Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 18 Jan 2024 12:00:21 +0100
Subject: [PATCH 148/265] remove :channel_ field from init_storage

---
 src/Stipple.jl | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index eb2f9aaa..704a2450 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -405,7 +405,6 @@ function init_storage()
     :modes__ => :(modes__::Stipple.LittleDict{Symbol,Int} = Stipple.LittleDict{Symbol,Int}()),
     :isready => :(isready::Stipple.R{Bool} = false),
     :isprocessing => :(isprocessing::Stipple.R{Bool} = false),
-    :channel_ => :(channel_::String = $ch),
     :fileuploads => :(fileuploads::Stipple.R{Dict{AbstractString,AbstractString}} = Dict{AbstractString,AbstractString}())
   )
 end

From 3821bc4e3cb9fc9bc2d43ea9c81fdae0c1505c60 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 17 Jan 2024 11:39:53 +0100
Subject: [PATCH 149/265] add printing for ReactiveModel

---
 src/Stipple.jl       |  1 +
 src/stipple/print.jl | 57 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 src/stipple/print.jl

diff --git a/src/Stipple.jl b/src/Stipple.jl
index fa7fc74d..3926114f 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -96,6 +96,7 @@ include("stipple/json.jl")
 include("stipple/undefined.jl")
 include("stipple/assets.jl")
 include("stipple/converters.jl")
+include("stipple/print.jl")
 
 using .NamedTuples
 
diff --git a/src/stipple/print.jl b/src/stipple/print.jl
new file mode 100644
index 00000000..2b651410
--- /dev/null
+++ b/src/stipple/print.jl
@@ -0,0 +1,57 @@
+function print_object(io, obj::T, omit = nothing, compact = false) where T
+    # currently no different printing for compact = true ...
+    fields = [p for p in propertynames(obj)]
+    omit !== nothing && setdiff!(fields, omit)
+
+    println(io, match(r"^#*([^!]+)", String(T.name.name)).captures[1])
+    for field in fields
+        println(io, "    $field: ", Observables.to_value(getproperty(obj, field)))
+    end
+end
+
+function print_object(io, obj::T, omit = nothing, compact = false) where T <: ReactiveModel
+    fields = [p for p in propertynames(obj)]
+    omit !== nothing && setdiff!(fields, omit)
+    internal_or_auto = true
+
+    println(io, "Instance of '" * match(r"^#*([^!]+)", String(T.name.name)).captures[1] * "'")
+    for fieldname in fields
+        field = getproperty(obj, fieldname)
+        fieldmode = isprivate(fieldname, obj) ? "private" : isreadonly(fieldname, obj) ? "out" : "in"
+        fieldtype = if field isa Reactive
+            if fieldname in AUTOFIELDS
+                "autofield, $fieldmode"
+            else
+                if internal_or_auto
+                    println(io)
+                    internal_or_auto = false
+                end
+                fieldmode
+            end
+        else
+            if fieldname in INTERNALFIELDS
+                "internal"
+            else
+                if internal_or_auto
+                    println(io)
+                    internal_or_auto = false
+                end
+                "$fieldmode, non-reactive"
+            end
+        end
+
+        println(io, "    $fieldname ($fieldtype): ", Observables.to_value(field))
+    end
+end
+
+# default show used by Array show
+function Base.show(io::IO, obj::ReactiveModel)
+    compact = get(io, :compact, true)
+    print_object(io, obj, compact)
+end
+
+# default show used by display() on the REPL
+function Base.show(io::IO, mime::MIME"text/plain", obj::ReactiveModel)
+    compact = get(io, :compact, false)
+    print_object(io, obj, compact)
+end
\ No newline at end of file

From f54b7dfcd8143d81585c53fbc746a644cbff4c2b Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 17 Jan 2024 12:01:25 +0100
Subject: [PATCH 150/265] show name of module for implicit models

---
 src/stipple/print.jl | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/stipple/print.jl b/src/stipple/print.jl
index 2b651410..eafccfa2 100644
--- a/src/stipple/print.jl
+++ b/src/stipple/print.jl
@@ -14,7 +14,11 @@ function print_object(io, obj::T, omit = nothing, compact = false) where T <: Re
     omit !== nothing && setdiff!(fields, omit)
     internal_or_auto = true
 
-    println(io, "Instance of '" * match(r"^#*([^!]+)", String(T.name.name)).captures[1] * "'")
+    app = match(r"^#*([^!]+)", String(T.name.name)).captures[1]
+    if app == "Main_ReactiveModel" && parentmodule(T) != Main
+        app = String(nameof(parentmodule(T)))
+    end
+    println(io, "Instance of '$app'")
     for fieldname in fields
         field = getproperty(obj, fieldname)
         fieldmode = isprivate(fieldname, obj) ? "private" : isreadonly(fieldname, obj) ? "out" : "in"

From aaf114ce87f9a7c5f55551bdbf092d6296f5ac80 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 18 Jan 2024 12:23:42 +0100
Subject: [PATCH 151/265] set version v0.27.32

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index fd23d19c..3bc0668d 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.31"
+version = "0.27.32"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From d097be6ccc2a4901848d54b93adbb5d04856114e Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 18 Jan 2024 12:46:43 +0100
Subject: [PATCH 152/265] set version v0.27.33

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 3bc0668d..ac89aca0 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.32"
+version = "0.27.33"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 6f5ec075839c276b0b4d298c00876ce81703b779 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Thu, 25 Jan 2024 07:30:55 +0100
Subject: [PATCH 153/265] Allow disabling model storage

---
 src/Stipple.jl | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index fa7fc74d..93e382e1 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -17,6 +17,15 @@ module Stipple
 
 const PRECOMPILE = Ref(false)
 const ALWAYS_REGISTER_CHANNELS = Ref(true)
+const USE_MODEL_STORAGE = Ref(true)
+
+"""
+Disables the automatic storage and retrieval of the models in the session.
+Useful for large models.
+"""
+def disable_model_storage()
+  USE_MODEL_STORAGE[] = false
+end
 
 """
 @using_except(expr)
@@ -356,6 +365,9 @@ function channeldefault(::Type{M}) where M<:ReactiveModel
   end
 
   model_id = Symbol(Stipple.routename(M))
+
+  ! USE_MODEL_STORAGE[] && return nothing
+
   stored_model = Stipple.ModelStorage.Sessions.GenieSession.get(model_id, nothing)
   stored_model === nothing ? nothing : getfield(stored_model, Stipple.CHANNELFIELDNAME)
 end
@@ -464,7 +476,7 @@ function init(t::Type{M};
   end
 
   # make sure we store the channel name in the model
-  Stipple.ModelStorage.Sessions.store(model)
+  USE_MODEL_STORAGE[] && Stipple.ModelStorage.Sessions.store(model)
 
   # add a timer that checks if the model is outdated and if so prepare the model to be garbage collected
   LAST_ACTIVITY[Symbol(getchannel(model))] = now()
@@ -486,7 +498,7 @@ function init(t::Type{M};
       client = transport == Genie.WebChannels ? Genie.WebChannels.id(Genie.Requests.wsclient()) : Genie.Requests.wtclient()
 
       try
-        haskey(payload, "sesstoken") && ! isempty(payload["sesstoken"]) &&
+        haskey(payload, "sesstoken") && ! isempty(payload["sesstoken"]) && USE_MODEL_STORAGE[] &&
           Genie.Router.params!(Stipple.ModelStorage.Sessions.GenieSession.PARAMS_SESSION_KEY,
                                 Stipple.ModelStorage.Sessions.GenieSession.load(payload["sesstoken"] |> Genie.Encryption.decrypt))
       catch ex

From 17bc48413fab4ea3c9330bed03c87cea4827ed00 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Thu, 25 Jan 2024 13:04:10 +0100
Subject: [PATCH 154/265] Allow disabling model storage

---
 Project.toml         | 2 +-
 src/ReactiveTools.jl | 2 +-
 src/Stipple.jl       | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/Project.toml b/Project.toml
index ac89aca0..c1576fc8 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.33"
+version = "0.27.34"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index de6f7f10..32d5fc40 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -588,7 +588,7 @@ macro init(args...)
     local new_handlers = false
 
     local initfn =
-    if isdefined($__module__, :init_from_storage)
+    if isdefined($__module__, :init_from_storage) && Stipple.USE_MODEL_STORAGE[]
       $__module__.init_from_storage
     else
       Stipple.init
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 942d6fa0..c169e5ca 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -23,8 +23,8 @@ const USE_MODEL_STORAGE = Ref(true)
 Disables the automatic storage and retrieval of the models in the session.
 Useful for large models.
 """
-def disable_model_storage()
-  USE_MODEL_STORAGE[] = false
+function enable_model_storage(enable::Bool = true)
+  USE_MODEL_STORAGE[] = enable
 end
 
 """
@@ -97,7 +97,7 @@ export setchannel, getchannel
 isempty(methods(notify, Observables)) && (Base.notify(observable::AbstractObservable) = Observables.notify!(observable))
 
 include("ParsingTools.jl")
-include("ModelStorage.jl")
+USE_MODEL_STORAGE[] && include("ModelStorage.jl")
 include("NamedTuples.jl")
 
 include("stipple/reactivity.jl")
@@ -367,7 +367,7 @@ function channeldefault(::Type{M}) where M<:ReactiveModel
 
   model_id = Symbol(Stipple.routename(M))
 
-  ! USE_MODEL_STORAGE[] && return nothing
+  USE_MODEL_STORAGE[] || return nothing
 
   stored_model = Stipple.ModelStorage.Sessions.GenieSession.get(model_id, nothing)
   stored_model === nothing ? nothing : getfield(stored_model, Stipple.CHANNELFIELDNAME)

From a202ec737f581a6b5d6df8d64b75f33d62e646a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pere=20Gim=C3=A9nez?= <gimenezfebrer@gmail.com>
Date: Thu, 25 Jan 2024 16:36:06 +0100
Subject: [PATCH 155/265] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 40196013..3c535126 100644
--- a/README.md
+++ b/README.md
@@ -152,8 +152,10 @@ end
 Genie.isrunning(:webserver) || up()
 ```
 <img src="docs/content/img/Example2.png">
+
 ## Choosing the transport layer: WebSockets or HTTP
 
+
 By default Stipple will attempt to use WebSockets for real time data sync between backend and frontend.
 However, in some cases WebSockets support might not be available on the host. In this case, Stipple can be
 switched to use regular HTTP for data sync, using frontend polling with AJAX (1s polling interval by default).

From 88f36710e1d3b07e0a56f611ed7a84d008e9b40b Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 25 Jan 2024 22:40:17 +0100
Subject: [PATCH 156/265] add field-specific debouncing

---
 src/ReactiveTools.jl | 134 +++++++++++++++++++++++++++++++++++++++++++
 src/Stipple.jl       |  57 +++++++++++++++---
 test/runtests.jl     |  15 +++++
 3 files changed, 199 insertions(+), 7 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index de6f7f10..bee7ffb9 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -16,6 +16,9 @@ export @onchange, @onbutton, @event, @notify
 # definition of dependencies
 export @deps, @clear_deps
 
+# definition of field-specific debounce times
+export @debounce, @clear_debounce
+
 # deletion
 export @clear, @clear_vars, @clear_handlers
 
@@ -269,6 +272,137 @@ macro clear_route()
   :(Stipple.clear_route(Stipple.@type)) |> esc
 end
 
+function _prepare(fieldname)
+  if fieldname isa Symbol
+    fieldname = QuoteNode(fieldname)
+  else
+    if fieldname isa Expr && fieldname.head == :tuple
+      for (i, x) in enumerate(fieldname.args)
+        x isa Symbol && (fieldname.args[i] = QuoteNode(x))
+      end
+    end
+  end
+  fieldname
+end
+
+"""
+    @debounce fieldname ms
+
+    @debounce App fieldname ms
+
+Set field-specific debounce time in ms
+
+### Example
+#### Implicit apps
+```
+@app begin
+  @out quick = 12
+  @out slow = 12
+  @in s = "Hello"
+end
+
+# no debouncing for fast messaging
+@debounce quick 0
+
+# long debouncing for long-running tasks
+@debounce slow 1000
+```
+#### Explicit apps
+
+```
+@app MyApp begin
+  @out quick = 12
+  @out slow = 12
+  @in s = "Hello"
+end
+
+# no debouncing for fast messaging
+@debounce MyApp quick 0
+
+# long debouncing for long-running tasks
+@debounce MyApp slow 1000
+```
+"""
+macro debounce(M, fieldname, ms)
+  fieldname = _prepare(fieldname)
+  :(Stipple.debounce($M, $fieldname, $ms)) |> esc
+end
+
+macro debounce(fieldname, ms)
+  fieldname = _prepare(fieldname)
+  :(Stipple.debounce(Stipple.@type(),$fieldname, $ms)) |> esc
+end
+
+"""
+    @clear_debounce 
+
+    @clear_debounce fieldname
+    
+    @clear_debounce App
+    
+    @clear_debounce App fieldname
+
+Clear field-specific debounce time, for setting see `@debounce`.
+After calling `@clear debounce` the field will be debounced by the value given in the
+`@init` macro.
+
+
+### Example
+#### Implicit apps
+```
+@app begin
+  @out quick = 12
+  @out slow = 12
+  @in s = "Hello"
+end
+
+# no debouncing for fast messaging
+@debounce quick 0
+@debounce slow 1000
+
+# reset to standard value of the app
+@clear_debounce quick
+
+# clear all field-specific debounce times
+@clear_debounce
+```
+#### Explicit apps
+
+```
+@app MyApp begin
+  @out quick = 12
+  @out slow = 12
+  @in s = "Hello"
+end
+
+# no debouncing for fast messaging
+@debounce MyApp quick 0
+
+@clear_debounce MyApp quick
+
+# clear all field-specific debounce times
+@clear_debounce MyApp
+```
+"""
+macro clear_debounce(M, fieldname)
+  fieldname = _prepare(fieldname)
+  :(Stipple.debounce($M, $fieldname, nothing)) |> esc
+end
+
+macro clear_debounce(expr)
+  quote
+    if $expr isa DataType && $expr <: Stipple.ReactiveModel
+      Stipple.debounce($expr, nothing)
+    else
+      Stipple.debounce(Stipple.@type(), $(_prepare(expr)), nothing)
+    end
+  end |> esc
+end
+
+macro clear_debounce()
+  :(Stipple.debounce(Stipple.@type(), nothing)) |> esc
+end
+
 function update_storage(m::Module)
   clear_type(m)
   # isempty(Stipple.Pages._pages) && return
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 18a068b9..47a13832 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -115,6 +115,40 @@ const PURGE_TIME_LIMIT = Ref{Period}(Day(1))
 const PURGE_NUMBER_LIMIT = Ref(1000)
 const PURGE_CHECK_DELAY = Ref(60)
 
+const DEBOUNCE = LittleDict{Type{<:ReactiveModel}, LittleDict{Symbol, Any}}()
+
+"""
+    debounce(M::Type{<:ReactiveModel}, fieldnames::Union{Symbol, Vector{Symbol}}, debounce::Union{Int, Nothing} = nothing)
+
+Add field-specific debounce times.
+"""
+function debounce(M::Type{<:ReactiveModel}, fieldnames::Union{Symbol, Vector{Symbol}, NTuple{N, Symbol} where N}, debounce::Union{Int, Nothing} = nothing)
+  if debounce === nothing
+    haskey(DEBOUNCE, M) || return
+    d = DEBOUNCE[M]
+    if fieldnames isa Symbol
+      delete!(d, fieldnames)
+    else
+      for v in fieldnames
+        delete!(d, v)
+      end
+    end
+    isempty(d) && delete!(DEBOUNCE, M)
+  else
+    d = get!(LittleDict{Symbol, Any}, DEBOUNCE, M)
+    if fieldnames isa Symbol
+      d[fieldnames] = debounce
+    else
+      for v in fieldnames
+        d[v] = debounce
+      end
+    end
+  end
+  return
+end
+
+debounce(M::Type{<:ReactiveModel}, ::Nothing) = delete!(DEBOUNCE, M)
+
 """
 `function sorted_channels()`
 
@@ -302,20 +336,29 @@ function watch(vue_app_name::String, fieldname::Symbol, channel::String, debounc
   isempty(jsfunction) &&
     (jsfunction = "Genie.WebChannels.sendMessageTo($js_channel, 'watchers', {'payload': {'field':'$fieldname', 'newval': newVal, 'oldval': oldVal, 'sesstoken': document.querySelector(\"meta[name='sesstoken']\")?.getAttribute('content')}});")
 
+  output = IOBuffer()
   if fieldname == :isready
-    output = """
+    print(output, """
       $vue_app_name.\$watch(function(){return this.$fieldname}, function(newVal, oldVal){$jsfunction}, {deep: true});
-    """
+    """)
   else
-    output = """
-      $vue_app_name.\$watch(function(){return this.$fieldname}, _.debounce(function(newVal, oldVal){$jsfunction}, $debounce), {deep: true});
-    """
+    AM = get_abstract_type(M)
+    debounce = get(get(DEBOUNCE, AM, Dict{Symbol, Any}()), fieldname, debounce)
+    print(output, debounce == 0 ?
+      """
+        $vue_app_name.\$watch(function(){return this.$fieldname}, function(newVal, oldVal){$jsfunction}, {deep: true});
+      """ : 
+      """
+        $vue_app_name.\$watch(function(){return this.$fieldname}, _.debounce(function(newVal, oldVal){$jsfunction}, $debounce), {deep: true});
+      """
+    )
   end
   # in production mode vue does not fill `this.expression` in the watcher, so we do it manually
   Genie.Configuration.isprod() &&
-    (output *= "$vue_app_name._watchers[$vue_app_name._watchers.length - 1].expression = 'function(){return this.$fieldname}'")
+    print(output, "$vue_app_name._watchers[$vue_app_name._watchers.length - 1].expression = 'function(){return this.$fieldname}'")
 
-  output *= "\n\n"
+  print(output, "\n\n")
+  String(take!(output))
 end
 
 #===#
diff --git a/test/runtests.jl b/test/runtests.jl
index a9a20fae..0eedd2cb 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -118,6 +118,13 @@ end
     # check reactivity
     @eval model.i[] = 20
     @test model.s[] == "20"
+
+    @eval @debounce TestApp i 101
+    @eval @debounce TestApp (a, b, c) 101
+    @test Stipple.DEBOUNCE[TestApp][:i] == 101
+    
+    @eval @clear_debounce TestApp
+    @test haskey(Stipple.DEBOUNCE, TestApp) == false
 end
 
 @testset "Reactive API (implicit)" begin
@@ -142,6 +149,14 @@ end
     # check reactivity
     @eval model.i2[] = 20
     @test model.s2[] == "20"
+
+    # check field-specific debouncing
+    @eval @debounce i3 101
+    @eval @debounce (a, b, c) 101
+    @test Stipple.DEBOUNCE[Stipple.@type()][:i3] == 101
+    
+    @eval @clear_debounce
+    @test haskey(Stipple.DEBOUNCE, Stipple.@type()) == false
 end
 
 @testset "Reactive API (implicit) with mixins and handlers" begin

From f869dc1ec0321be653f7be1e8096595d9ba5e18e Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 25 Jan 2024 22:51:43 +0100
Subject: [PATCH 157/265] add docs for tuples of fieldnames

---
 src/ReactiveTools.jl | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index bee7ffb9..6d4af598 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -290,7 +290,12 @@ end
 
     @debounce App fieldname ms
 
-Set field-specific debounce time in ms
+Set field-specific debounce time in ms.
+### Parameters
+
+- `APP`: a subtype of ReactiveModel, e.g. `MyApp`
+- `fieldname`: fieldname òr fieldnames as written in the declaration, e.g. `x`, `(x, y, z)`
+- `ms`: debounce time in ms
 
 ### Example
 #### Implicit apps
@@ -305,7 +310,7 @@ end
 @debounce quick 0
 
 # long debouncing for long-running tasks
-@debounce slow 1000
+@debounce (slow1, slow2) 1000
 ```
 #### Explicit apps
 

From cfc0c7c7b8d5457739cec13304ff949e17469e52 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 26 Jan 2024 08:06:01 +0100
Subject: [PATCH 158/265] remove changing of the standard object printing

---
 src/stipple/print.jl | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/stipple/print.jl b/src/stipple/print.jl
index eafccfa2..ffc4ba0d 100644
--- a/src/stipple/print.jl
+++ b/src/stipple/print.jl
@@ -1,15 +1,5 @@
-function print_object(io, obj::T, omit = nothing, compact = false) where T
-    # currently no different printing for compact = true ...
-    fields = [p for p in propertynames(obj)]
-    omit !== nothing && setdiff!(fields, omit)
-
-    println(io, match(r"^#*([^!]+)", String(T.name.name)).captures[1])
-    for field in fields
-        println(io, "    $field: ", Observables.to_value(getproperty(obj, field)))
-    end
-end
-
 function print_object(io, obj::T, omit = nothing, compact = false) where T <: ReactiveModel
+    # currently no different printing for compact = true ...
     fields = [p for p in propertynames(obj)]
     omit !== nothing && setdiff!(fields, omit)
     internal_or_auto = true

From f02e3a9ea5a07d7c24684175bb614787e24e936b Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 26 Jan 2024 08:07:32 +0100
Subject: [PATCH 159/265] set version v0.27.35

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index c1576fc8..1c123ca9 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.34"
+version = "0.27.35"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From b220590ac969b887822663424bb718fa22adcf72 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Wed, 31 Jan 2024 20:06:33 +0100
Subject: [PATCH 160/265] Updated theme and theme API

---
 Project.toml               |   2 +-
 assets/css/stipplecore.css | 234 ++++++++++++++++++++-----------------
 src/Elements.jl            |   3 +-
 src/Layout.jl              |  80 ++++++++++---
 test/runtests.jl           |  24 ++--
 5 files changed, 200 insertions(+), 143 deletions(-)

diff --git a/Project.toml b/Project.toml
index c1576fc8..ae949d6d 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.27.34"
+version = "0.28.00"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/assets/css/stipplecore.css b/assets/css/stipplecore.css
index fa9b31a4..76d69eb3 100644
--- a/assets/css/stipplecore.css
+++ b/assets/css/stipplecore.css
@@ -1,22 +1,22 @@
-:root.stipple-blue {
-  --q-color-primary: #0779e4;
-  --q-color-secondary: #6cb1f2;
+:root.stipple-core {
+  --q-color-primary: #1b1f3b;
+  --q-color-secondary: #8ea8c3;
+  --q-color-accent: #bea7e5;
   --q-color-dark: #022a50;
   --q-color-info: #373b44;
-  --q-color-positive: #72c8a9;
-  --q-color-negative: #bd5631;
-  --q-color-accent: #9c27b0;
-  --q-color-warning: #f2c037;
-  --q-color-white: #fefefe;
+  --q-color-white: #ffffff;
   --q-color-black: #302f2f;
   --st-text-1: #302f2f;
   --st-text-2: #575454;
   --st-text-3: #5a6460;
-  --st-dashboard-module: #fefefe;
+  --st-dashboard-module: #fcfcfc;
   --st-dashboard-line: #e2e2e2;
-  --st-dashboard-bg: #f1f3f7;
+  --st-dashboard-bg: #fff;
   --st-slider--track: #cad2d2;
   --st-skeleton: #e1e5ee;
+  --q-color-positive: #72c8a9;
+  --q-color-negative: #c10015;
+  --q-color-warning: #f2c037;
 }
 .stipple-blue .q-field--standout.q-field--focused .q-field__control {
   background: var(--q-color-primary);
@@ -34,15 +34,14 @@
   background: var(--q-color-primary);
   color: var(--q-color--white);
 }
-.stipple-core .st-header,
-.stipple-core .st-module {
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
-  overflow: auto;
-}
 .stipple-core .st-module {
-  background: var(--st-dashboard-module);
+  border: 1px solid rgba(0, 0, 0, 0.10);
+  /* overflow: auto; */
+  background: var(--q-color-white);
   border-radius: 5px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
 }
+.container { margin-bottom: 20px; }
 .stipple-core .st-module > h1,
 .stipple-core .st-module > h2,
 .stipple-core .st-module > h3,
@@ -50,16 +49,13 @@
 .stipple-core .st-module > h5,
 .stipple-core .st-module > h6 {
   margin-top: 0;
-  border-left-color: var(--q-color-primary);
-  border-bottom: 2px solid;
-  border-bottom-color: var(--q-color-primary);
-  border-right-color: var(--q-color-primary);
-  border-top-color: var(--q-color-primary);
   display: inline-block;
   padding: 5px 0;
 }
-.stipple-core body {
-  font-family: sans-serif;
+.stipple-core, .stipple-core body {
+  font-weight: 400;
+  font-size: 90%;
+  background-color: var(--st-dashboard-bg);
 }
 .stipple-core {
   color: var(--q-color-primary);
@@ -80,58 +76,36 @@
   margin: 1rem 0;
 }
 .stipple-core .text-bold,
-.stipple-core .text-h1,
-.stipple-core .text-h2,
-.stipple-core .text-h3,
-.stipple-core .text-h4,
-.stipple-core .text-h5,
-.stipple-core .text-h6,
-.stipple-core .text-subtitle1,
-.stipple-core .text-subtitle2,
 .stipple-core b,
-.stipple-core h1,
-.stipple-core h2,
-.stipple-core h3,
-.stipple-core h4,
-.stipple-core h5,
-.stipple-core h6,
 .stipple-core strong {
-  font-family: sans-serif;
   font-weight: 700;
 }
 .stipple-core em:not(.material-icons),
 .stipple-core i:not(.material-icons) {
-  font-family: sans-serif;
   font-style: italic;
 }
 .stipple-core .text-h1,
 .stipple-core h1 {
-  font-size: 2rem;
   line-height: 2.5rem;
 }
 .stipple-core .text-h2,
 .stipple-core h2 {
-  font-size: 1.5rem;
   line-height: 2rem;
 }
 .stipple-core .text-h3,
 .stipple-core h3 {
-  font-size: 1.3rem;
   line-height: 1.7rem;
 }
 .stipple-core .text-h4,
 .stipple-core h4 {
-  font-size: 1.1rem;
   line-height: 1.5rem;
 }
 .stipple-core .text-h5,
 .stipple-core h5 {
-  font-size: 1rem;
   line-height: 1.5rem;
 }
 .stipple-core .text-h6,
 .stipple-core h6 {
-  font-size: 0.9rem;
   line-height: 1.3rem;
 }
 .stipple-core {
@@ -140,26 +114,119 @@
 }
 .stipple-core .container > .row,
 .stipple-core .st-dashboard > .row {
-  padding: 20px 20px 0;
+  padding: 2vh 2vw 0;
 }
+.st-col { box-sizing: border-box !important; }
 .stipple-core .container > .row > .st-col,
 .stipple-core .st-dashboard > .row > .st-col {
-  margin-right: 20px;
-  padding: 20px;
+  margin-right: 2vw;
+  padding: 2vw;
+}
+
+.st-col.col-1,
+.st-col.col-xl-1,
+.st-col.col-lg-1,
+.st-col.col-md-1,
+.st-col.col-sm-1,
+.st-col.col-xs-1 {
+  width: calc(8.3333% - 2vw);
+}
+.st-col.col-2,
+.st-col.col-xl-2,
+.st-col.col-lg-2,
+.st-col.col-md-2,
+.st-col.col-sm-2,
+.st-col.col-xs-2 {
+  width: calc(16.6667% - 2vw);
+}
+.st-col.col-3,
+.st-col.col-xl-3,
+.st-col.col-lg-3,
+.st-col.col-md-3,
+.st-col.col-sm-3,
+.st-col.col-xs-3 {
+  width: calc(25% - 2vw);
+}
+.st-col.col-4,
+.st-col.col-xl-4,
+.st-col.col-lg-4,
+.st-col.col-md-4,
+.st-col.col-sm-4,
+.st-col.col-xs-4 {
+  width: calc(33.3333% - 2vw);
+}
+.st-col.col-5,
+.st-col.col-xl-5,
+.st-col.col-lg-5,
+.st-col.col-md-5,
+.st-col.col-sm-5,
+.st-col.col-xs-5 {
+  width: calc(41.6667% - 2vw);
+}
+.st-col.col-6,
+.st-col.col-xl-6,
+.st-col.col-lg-6,
+.st-col.col-md-6,
+.st-col.col-sm-6,
+.st-col.col-xs-6 {
+  width: calc(50% - 2vw);
+}
+.st-col.col-7,
+.st-col.col-lx-7,
+.st-col.col-lg-7,
+.st-col.col-md-7,
+.st-col.col-sm-7,
+.st-col.col-xs-7 {
+  width: calc(58.3333% - 2vw);
+}
+.st-col.col-8,
+.st-col.col-xl-8,
+.st-col.col-lg-8,
+.st-col.col-md-8,
+.st-col.col-sm-8,
+.st-col.col-xs-8 {
+  width: calc(66.6666% - 2vw);
+}
+.st-col.col-9,
+.st-col.col-xl-9,
+.st-col.col-lg-9,
+.st-col.col-md-9,
+.st-col.col-sm-9,
+.st-col.col-xs-9 {
+  width: calc(75% - 2vw);
+}
+.st-col.col-10,
+.st-col.col-xl-10,
+.st-col.col-lg-10,
+.st-col.col-md-10,
+.st-col.col-sm-10,
+.st-col.col-xs-10 {
+  width: calc(83.3333% - 2vw);
+}
+.st-col.col-11,
+.st-col.col-xs-11,
+.st-col.col-lg-11,
+.st-col.col-md-11,
+.st-col.col-sm-11,
+.st-col.col-xs-11 {
+  width: calc(91.6666% - 2vw);
+}
+.st-col.col-12,
+.st-col.col-xl-12,
+.st-col.col-lg-12,
+.st-col.col-md-12,
+.st-col.col-sm-12,
+.st-col.col-xs-12 {
+  width: calc(100% - 2vw);
 }
+
 .stipple-core .container > .row > .st-col:last-child,
 .stipple-core .st-dashboard > .row > .st-col:last-child {
   margin-right: 0;
 }
-@media (max-width: 599px) {
-  .stipple-core .container > .row > .st-col:not(:first-child),
-  .stipple-core .st-dashboard > .row > .st-col:not(:first-child) {
-    margin-top: 20px;
-  }
-}
 .stipple-core .container > .row > .st-col > .row:not(:first-child),
 .stipple-core .st-dashboard > .row > .st-col > .row:not(:first-child) {
-  margin-top: 1rem;
+  margin-top: 2vh;
 }
 .stipple-core .container > .row.row--stack,
 .stipple-core .st-dashboard > .row.row--stack {
@@ -172,51 +239,17 @@
   margin-top: -5px;
   border-top: 1px solid var(--st-dashboard-line);
 }
-.st-bt {
-  border-top: 1px solid var(--st-dashboard-line);
-}
-.st-bb {
-  border-bottom: 1px solid var(--st-dashboard-line);
-}
-.st-br {
-  border-right: 1px solid var(--st-dashboard-line);
-}
-.st-br.st-col:last-child {
-  border-right: 0;
-}
-@media (max-width: 599px) {
-  .st-br.st-col {
-    border-right: 0;
-  }
-}
-.st-bl {
-  border-left: 1px solid var(--st-dashboard-line);
-}
-.st-bl.st-col:first-child {
-  border-left: 0;
-}
-@media (max-width: 599px) {
-  .st-bl.st-col {
-    border-left: 0;
-  }
-}
 .stipple-core fieldset {
   border: none;
 }
 .stipple-core .q-field--float.q-field--focused.q-field--standout .q-field__control {
-  font-family: sans-serif;
   font-weight: 700;
 }
 .stipple-core .q-input .q-field__native,
 .stipple-core .q-select .q-field__native {
-  font-family: sans-serif;
   font-weight: 700;
   font-size: 1.1em;
 }
-.stipple-core .q-input .q-field__native::placeholder,
-.stipple-core .q-select .q-field__native::placeholder {
-  font-family: sans-serif;
-}
 .stipple-core .q-field--rounded.q-field--filled .q-field__control {
   border-radius: 5px 5px 0 0;
 }
@@ -233,7 +266,6 @@
   color: var(--q-color-white);
 }
 .stipple-core .q-badge {
-  font-family: sans-serif;
   font-weight: 700;
   padding: 4px 6px;
 }
@@ -243,7 +275,6 @@
 }
 .stipple-core .q-banner {
   border-radius: 5px;
-  font-family: sans-serif;
   font-weight: 700;
 }
 .q-ripple {
@@ -264,7 +295,6 @@
   box-shadow: none;
 }
 .stipple-core .q-btn {
-  font-family: sans-serif;
   font-weight: 700;
 }
 .stipple-core .q-btn-group {
@@ -285,7 +315,6 @@
   margin: 0;
 }
 .stipple-core .q-chip {
-  font-family: sans-serif;
   font-weight: 700;
 }
 .stipple-core .q-file .q-field__marginal {
@@ -299,7 +328,6 @@ body > .q-loading-bar {
   font-size: 15px;
 }
 .stipple-core .q-item.q-item--active {
-  font-family: sans-serif;
   font-weight: 700;
 }
 .stipple-core .q-item.q-manual-focusable--focused > .q-focus-helper {
@@ -325,7 +353,6 @@ body > .q-loading-bar {
   min-height: 20px;
 }
 .stipple-core .q-slider__pin-text {
-  font-family: sans-serif;
   font-weight: 700;
 }
 /* .stipple-core .q-slider__track-container {
@@ -336,7 +363,6 @@ body > .q-loading-bar {
 }
 .stipple-core .q-table th {
   color: var(--st-text-1);
-  font-family: sans-serif;
   font-weight: 900;
   font-size: 0.8rem;
 }
@@ -349,7 +375,6 @@ body > .q-loading-bar {
   padding: 0 5px;
 }
 .stipple-core .q-table__title {
-  font-family: sans-serif;
   font-weight: 700;
   font-size: 14px;
 }
@@ -416,8 +441,8 @@ body > .q-loading-bar {
   padding: 1rem 0;
 }
 .stipple-core .st-big-number .q-badge {
-  font-family: sans-serif;
   font-weight: 900;
+  font-size: large;
   margin: 0.5rem;
   padding: 8px 15px;
   display: block;
@@ -425,7 +450,6 @@ body > .q-loading-bar {
   color: var(--st-text-1);
 }
 .stipple-core .st-big-number__num {
-  font-family: sans-serif;
   font-weight: 700;
   display: block;
   color: var(--st-text-1);
@@ -472,18 +496,8 @@ body > .q-loading-bar {
   height: 17px;
   margin-right: 2px;
 }
-@media (max-width: 599px) {
-  .stipple-core .st-footer {
-    padding-top: 1rem;
-  }
-  .stipple-core .st-footer .st-logo {
-    margin: auto;
-    display: inline-block;
-  }
-}
 .stipple-core .st-header {
-  border-bottom: 1px solid var(--st-dashboard-line);
-  background: var(--st-dashboard-module);
+  background: var(--q-color-white);
   padding-left: 20px;
 }
 @media (max-width: 599px) {
diff --git a/src/Elements.jl b/src/Elements.jl
index b94a23b0..4ba36d78 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -54,7 +54,6 @@ function vue_integration(::Type{M};
                           core_theme::Bool = true,
                           debounce::Int = Stipple.JS_DEBOUNCE_TIME,
                           transport::Module = Genie.WebChannels)::String where {M<:ReactiveModel}
-
   model = Base.invokelatest(M)
 
   vue_app = replace(json(model |> Stipple.render), "\"{" => " {")
@@ -66,7 +65,7 @@ function vue_integration(::Type{M};
     "
 
   function initStipple(rootSelector){
-    Stipple.init($( core_theme ? "{theme: 'stipple-blue'}" : "" ));
+    Stipple.init($( core_theme ? "{theme: '$theme'}" : "" ));
     window.$vue_app_name = window.GENIEMODEL = new Vue($( replace(vue_app, "'$(Stipple.UNDEFINED_PLACEHOLDER)'"=>Stipple.UNDEFINED_VALUE) ));
   } // end of initStipple
 
diff --git a/src/Layout.jl b/src/Layout.jl
index 85d3ee07..96088c09 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -11,7 +11,7 @@ export layout, add_css, remove_css
 export page, app, row, column, cell, container, flexgrid_kwargs, htmldiv
 
 export theme
-const THEMES = Function[]
+const THEMES = Ref(Function[])
 
 """
     function layout(output::Union{String,Vector}; partial::Bool = false, title::String = "", class::String = "", style::String = "",
@@ -85,7 +85,8 @@ function page(model::M, args...;
               partial::Bool = false, title::String = "", class::String = "container", style::String = "",
               channel::String = Genie.config.webchannels_default_route, head_content::Union{AbstractString, Vector{<:AbstractString}} = "",
               prepend::Union{S,Vector} = "", append::Union{T,Vector} = [],
-              core_theme::Bool = true, kwargs...)::ParsedHTMLString where {M<:Stipple.ReactiveModel, S<:AbstractString,T<:AbstractString}
+              core_theme::Bool = true,
+              kwargs...)::ParsedHTMLString where {M<:Stipple.ReactiveModel, S<:AbstractString,T<:AbstractString}
 
   layout(
     [
@@ -149,7 +150,7 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
       join(pushfirst!(classes, class), ' ')
     end
   end
-  
+
   (class isa Symbol || class isa String && length(class) > 0) && (kwargs[:class] = class)
 
   if ! symbol_class && class isa Symbol || class isa Vector || class isa AbstractDict
@@ -181,7 +182,7 @@ end
     function row(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)
 
 Creates a `div` HTML element with Quasar's Flexgrid CSS class `row`. Such rows typically contain elements created with
-[`cell`](@ref), `row`, [`column`](@ref) or other elements that manually receive grid classes, e.g. `"col"`, `"col-sm-5"`. 
+[`cell`](@ref), `row`, [`column`](@ref) or other elements that manually receive grid classes, e.g. `"col"`, `"col-sm-5"`.
 
 The grid size kwargs `size`, `xs`, etc. are explained in more detail in the docs of [`cell`](@ref).
 ### Example
@@ -191,7 +192,7 @@ julia> row(span("Hello"))
 "<div class=\"row\"><span>Hello</span></div>"
 ```
 """
-function row(args...; 
+function row(args...;
   col::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
@@ -211,7 +212,7 @@ end
     function column(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)
 
 Creates a `div` HTML element with Quasar's Flexgrid CSS class `column`. Such columns typically contain elements created with
-[`cell`](@ref), [`row`](@ref), `column`, or other elements that manually receive grid classes, e.g. `"col"`, `"col-sm-5"`. 
+[`cell`](@ref), [`row`](@ref), `column`, or other elements that manually receive grid classes, e.g. `"col"`, `"col-sm-5"`.
 
 The grid size kwargs `size`, `xs`, etc. are explained in more detail in the docs of [`cell`](@ref).
 
@@ -272,7 +273,7 @@ function cell(args...;
 )
   # for backward compatibility with `size` kwarg
   col == 0 && size != 0 && (col = size)
-  
+
   # class = class isa Symbol ? Symbol("$class + ' st-col'") : join(push!(split(class), "st-col"), " ")
   class = append_class(class, "st-col")
   kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
@@ -311,7 +312,7 @@ end
     function theme() :: String
 
 Provides theming support for Stipple apps and pages. It includes Stipple's default CSS files and additional elements,
-  in the form of HTML tags, can be injected by pushing to the `Stipple.Layout.THEMES` collection.
+  in the form of HTML tags, can be injected by pushing to the `Stipple.Layout.THEMES[][]` collection.
 
 ### Example
 
@@ -322,20 +323,23 @@ julia> theme()
 julia> StippleUI.theme()
 "<link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" />"
 
-julia> push!(Stipple.Layout.THEMES, StippleUI.theme)
+julia> push!(Stipple.Layout.THEMES[], StippleUI.theme)
 ```
 """
 function theme(; core_theme::Bool = true) :: Vector{String}
   output = String[]
 
   if core_theme
-    push!(output,
-      stylesheet("https://fonts.googleapis.com/css?family=Material+Icons"),
-      stylesheet(Genie.Assets.asset_path(Stipple.assets_config, :css, file="stipplecore"))
+    push!(THEMES[], () -> begin
+        stylesheet("https://fonts.googleapis.com/css?family=Material+Icons"),
+        stylesheet(Genie.Assets.asset_path(Stipple.assets_config, :css, file="stipplecore"))
+      end
     )
   end
 
-  for f in THEMES
+  unique!(THEMES[])
+
+  for f in THEMES[]
     push!(output, f()...)
   end
 
@@ -345,7 +349,7 @@ end
 """
     add_css(css::Function; update = true)
 
-Add a css function to the `THEMES`.
+Add a css function to the `THEMES[]`.
 
 ### Params
 * `css::Function` - a function that results in a vector of style elements
@@ -371,18 +375,58 @@ add_css(mycss)
 function add_css(css::Function; update = true)
   # removal can only be done by name, as the old function has already been overwritten
   update && remove_css(css::Function, byname = true)
-  push!(Stipple.Layout.THEMES, css)
+  push!(THEMES[], css)
+  unique!(THEMES[])
+end
+
+"""
+    add_css(css...; update = false)
+
+Adds a css file to the layout.
+
+### Example
+```julia
+Stipple.Layout.add_css("froop.css", "bootstrap.css", "https://cdn.tailwindcss.com/tailwind.css")
+```
+"""
+function add_css(css...; update = false)
+  css = [Stipple.Elements.stylesheet(c) for c in css]
+  add_css(() -> css; update = update)
+end
+
+"""
+    add_script(script...; update = false)
+
+Adds a script file to the layout.
+
+### Example
+```julia
+Stipple.Layout.add_script("froop.js", "bootstrap.js", "https://cdn.tailwindcss.com/tailwind.js")
+```
+"""
+function add_script(script...; update = false)
+  script = [Stipple.Elements.script(src=s) for s in script]
+  add_css(() -> script; update = update)
 end
 
 """
     remove_css(css::Function, byname::Bool = false)
 
-Remove a stylesheet function from the stack (`Stipple.Layout.THEMES`)
+Remove a stylesheet function from the stack (`THEMES[]`)
 If called with `byname = true`, the function will be identified by name rather than by the function itself.
 """
 function remove_css(css::Function; byname::Bool = false)
-  inds = byname ? nameof.(Stipple.Layout.THEMES) .== nameof(css) : Stipple.Layout.THEMES .== css
-  deleteat!(Stipple.Layout.THEMES, inds)
+  inds = byname ? nameof.(THEMES[]) .== nameof(css) : THEMES[] .== css
+  deleteat!(THEMES[], inds)
+end
+
+"""
+    theme!(css::Function)
+
+Replace the current themes with new ones.
+"""
+function theme!(css::Function)
+  THEMES[] = [css]
 end
 
 end
diff --git a/test/runtests.jl b/test/runtests.jl
index a9a20fae..9440389c 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -42,7 +42,7 @@ end
 
     # channels have to be different
     @test model.channel__ != model2.channel__
-    
+
     # check whether fields are correctly defined
     @test propertynames(model) == tuple(Stipple.INTERNALFIELDS..., Stipple.AUTOFIELDS..., :i, :s)
 
@@ -132,7 +132,7 @@ end
 
     @eval model = @init
     @eval model2 = @init
-    
+
     # channels have to be different
     @eval @test model.channel__ != model2.channel__
 
@@ -244,7 +244,7 @@ end
     s1 = string_get("http://localhost:$port/")
     s2 = string_get("http://localhost:$port/")
     s3 = string_get("http://localhost:$port/", cookies = false)
-    
+
     s4 = string_get("http://localhost:$port/static")
     s5 = string_get("http://localhost:$port/static")
     s6 = string_get("http://localhost:$port/static", cookies = false)
@@ -304,7 +304,7 @@ end
     s1 = string_get("http://localhost:$port/")
     s2 = string_get("http://localhost:$port/")
     s3 = string_get("http://localhost:$port/", cookies = false)
-    
+
     s4 = string_get("http://localhost:$port/static")
     s5 = string_get("http://localhost:$port/static")
     s6 = string_get("http://localhost:$port/static", cookies = false)
@@ -312,7 +312,7 @@ end
     @test get_channel(s2) == get_channel(s1)
     @test get_channel(s3) != get_channel(s1)
     @test get_channel(s4) == get_channel(s5) == get_channel(s6)
-    
+
     @clear_cache MyApp
     down()
 end
@@ -340,7 +340,7 @@ end
 
     el = row(col = 2, sm = 9, class = :myclass)
     @test contains(el, ":class=\"[myclass,'row','col-2','col-sm-9']\"")
-    
+
     el = row(col = 2, sm = 9, class! = "myclass")
     @test contains(el, ":class=\"[myclass,'row','col-2','col-sm-9']\"")
 
@@ -481,15 +481,15 @@ end
     end
 
     add_css(my_css)
-    @test Stipple.Layout.THEMES[end] == my_css
+    @test Stipple.Layout.THEMES[][end] == my_css
 
-    n = length(Stipple.Layout.THEMES)
+    n = length(Stipple.Layout.THEMES[])
     remove_css(my_css)
-    @test length(Stipple.Layout.THEMES) == n - 1
-    @test findfirst(==(my_css), Stipple.Layout.THEMES) === nothing
+    @test length(Stipple.Layout.THEMES[]) == n - 1
+    @test findfirst(==(my_css), Stipple.Layout.THEMES[]) === nothing
 
     add_css(my_css)
-    @test Stipple.Layout.THEMES[end] == my_css
+    @test Stipple.Layout.THEMES[][end] == my_css
     remove_css(my_css, byname = true)
-    @test findfirst(==(my_css), Stipple.Layout.THEMES) === nothing
+    @test findfirst(==(my_css), Stipple.Layout.THEMES[]) === nothing
 end
\ No newline at end of file

From 852ac7faacef1334fe23583ecc0d47ce407ce670 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Mon, 5 Feb 2024 16:23:03 +0100
Subject: [PATCH 161/265] fix diverging models in watcher and event channels
 (#260)

---
 src/Stipple.jl | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 2a572f84..67c28b4e 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -619,27 +619,25 @@ function init(t::Type{M};
     end
 
     ch = "/$channel/events"
-    if ! Genie.Router.ischannel(Router.channelname(ch))
-      Genie.Router.channel(ch, named = Router.channelname(ch)) do
-        # get event name
-        event = Genie.Requests.payload(:payload)["event"]
-        # form handler parameter & call event notifier
-        handler = Symbol(get(event, "name", nothing))
-        event_info = get(event, "event", nothing)
-
-        # add client id if requested
-        if event_info isa Dict && get(event_info, "_addclient", false)
-          client = transport == Genie.WebChannels ? Genie.WebChannels.id(Genie.Requests.wsclient()) : Genie.Requests.wtclient()
-          push!(event_info, "_client" => client)
-        end
+    Genie.Router.channel(ch, named = Router.channelname(ch)) do
+      # get event name
+      event = Genie.Requests.payload(:payload)["event"]
+      # form handler parameter & call event notifier
+      handler = Symbol(get(event, "name", nothing))
+      event_info = get(event, "event", nothing)
+
+      # add client id if requested
+      if event_info isa Dict && get(event_info, "_addclient", false)
+        client = transport == Genie.WebChannels ? Genie.WebChannels.id(Genie.Requests.wsclient()) : Genie.Requests.wtclient()
+        push!(event_info, "_client" => client)
+      end
 
-        isempty(methods(notify, (M, Val{handler}))) || notify(model, Val(handler))
-        isempty(methods(notify, (M, Val{handler}, Any))) || notify(model, Val(handler), event_info)
+      isempty(methods(notify, (M, Val{handler}))) || notify(model, Val(handler))
+      isempty(methods(notify, (M, Val{handler}, Any))) || notify(model, Val(handler), event_info)
 
-        LAST_ACTIVITY[Symbol(channel)] = now()
+      LAST_ACTIVITY[Symbol(channel)] = now()
 
-        ok_response
-      end
+      ok_response
     end
   end
 

From 08c8ec8c8e0f51cf3c0eb744b5e0d3ec48368252 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Mon, 5 Feb 2024 16:28:16 +0100
Subject: [PATCH 162/265] set version v0.28.1

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index ae949d6d..f3aa6000 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.00"
+version = "0.28.1"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From ccdb80aa82d6c49956e4fe43a3ca53bb591d0264 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Wed, 7 Feb 2024 15:46:45 +0100
Subject: [PATCH 163/265] fix parse_jsfunction() (#262)

---
 src/stipple/jsintegration.jl | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/stipple/jsintegration.jl b/src/stipple/jsintegration.jl
index ae3559d8..a411afe8 100644
--- a/src/stipple/jsintegration.jl
+++ b/src/stipple/jsintegration.jl
@@ -5,14 +5,14 @@ Checks whether the string is a valid js function and returns a `Dict` from which
 in the backend can construct a function.
 """
 function parse_jsfunction(s::AbstractString)
-    # look for classical function definition
-    m = match( r"function\s*\(([^)]*)\)\s*{(.*)}"s, s)
+    # look for classical function definition (not a full syntax check, though)
+    m = match( r"^\s*function\s*\(([^)]*)\)\s*{(.*)}\s*$"s, s)
     !isnothing(m) && length(m.captures) == 2 && return opts(arguments=m[1], body=m[2])
-
-    # look for pure function definition
-    m = match( r"\s*\(?([^=)]*?)\)?\s*=>\s*({*.*?}*)\s*$"s , s )
+    
+    # look for pure function definition including unbracketed single parameter
+    m = match( r"^\s*\(?([^=<>:;.(){}\[\]]*?)\)?\s*=>\s*({*.*?}*)\s*$"s , s )
     (isnothing(m) || length(m.captures) != 2) && return nothing
-
+    
     # if pure function body is without curly brackets, add a `return`, otherwise strip the brackets
     # Note: for utf-8 strings m[2][2:end-1] will fail if the string ends with a wide character, e.g. ϕ
     body = startswith(m[2], "{") ? m[2][2:prevind(m[2], lastindex(m[2]))] : "return " * m[2]

From dbb1f5c9a54977faa1a5d9b5ebb5b99dbf94f694 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Wed, 7 Feb 2024 15:48:49 +0100
Subject: [PATCH 164/265] set version v0.28.2

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index f3aa6000..82f21e85 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.1"
+version = "0.28.2"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From c72238ab57797e7535c3b24a9a527c1d0cdab9b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 11 Feb 2024 01:40:54 +0100
Subject: [PATCH 165/265] switch to Vue 3

---
 assets/js/stipplecore.js     |     4 +-
 assets/js/vue.global.js      | 16647 +++++++++++++++++++++++++++++++++
 assets/js/vue.global.prod.js |    11 +
 assets/js/vue_filters.js     |     8 +-
 assets/js/watchers.js        |    25 +-
 src/Elements.jl              |     4 +-
 src/Layout.jl                |     6 +-
 src/Stipple.jl               |     4 +-
 src/stipple/rendering.jl     |     7 +-
 9 files changed, 16684 insertions(+), 32 deletions(-)
 create mode 100644 assets/js/vue.global.js
 create mode 100644 assets/js/vue.global.prod.js

diff --git a/assets/js/stipplecore.js b/assets/js/stipplecore.js
index af23d5de..a4a8608c 100644
--- a/assets/js/stipplecore.js
+++ b/assets/js/stipplecore.js
@@ -136,8 +136,8 @@
         var t;
         if (!Vue) throw "Stipple requires Vue";
         e = Object.assign({}, e);
-        Vue.component("StDashboard", c);
-        Vue.component("StBigNumber", a);
+        // Vue.component("StDashboard", c);
+        // Vue.component("StBigNumber", a);
         (t = document.querySelector("html").classList).add.apply(t, ["stipple-core", e.theme ? e.theme : "stipple-blue"]);
       },
     };
diff --git a/assets/js/vue.global.js b/assets/js/vue.global.js
new file mode 100644
index 00000000..5754f319
--- /dev/null
+++ b/assets/js/vue.global.js
@@ -0,0 +1,16647 @@
+/**
+* vue v3.4.18
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+var Vue = (function (exports) {
+  'use strict';
+
+  function makeMap(str, expectsLowerCase) {
+    const set = new Set(str.split(","));
+    return expectsLowerCase ? (val) => set.has(val.toLowerCase()) : (val) => set.has(val);
+  }
+
+  const EMPTY_OBJ = Object.freeze({}) ;
+  const EMPTY_ARR = Object.freeze([]) ;
+  const NOOP = () => {
+  };
+  const NO = () => false;
+  const isOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // uppercase letter
+  (key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97);
+  const isModelListener = (key) => key.startsWith("onUpdate:");
+  const extend = Object.assign;
+  const remove = (arr, el) => {
+    const i = arr.indexOf(el);
+    if (i > -1) {
+      arr.splice(i, 1);
+    }
+  };
+  const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+  const hasOwn = (val, key) => hasOwnProperty$1.call(val, key);
+  const isArray = Array.isArray;
+  const isMap = (val) => toTypeString(val) === "[object Map]";
+  const isSet = (val) => toTypeString(val) === "[object Set]";
+  const isDate = (val) => toTypeString(val) === "[object Date]";
+  const isRegExp = (val) => toTypeString(val) === "[object RegExp]";
+  const isFunction = (val) => typeof val === "function";
+  const isString = (val) => typeof val === "string";
+  const isSymbol = (val) => typeof val === "symbol";
+  const isObject = (val) => val !== null && typeof val === "object";
+  const isPromise = (val) => {
+    return (isObject(val) || isFunction(val)) && isFunction(val.then) && isFunction(val.catch);
+  };
+  const objectToString = Object.prototype.toString;
+  const toTypeString = (value) => objectToString.call(value);
+  const toRawType = (value) => {
+    return toTypeString(value).slice(8, -1);
+  };
+  const isPlainObject = (val) => toTypeString(val) === "[object Object]";
+  const isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && "" + parseInt(key, 10) === key;
+  const isReservedProp = /* @__PURE__ */ makeMap(
+    // the leading comma is intentional so empty string "" is also included
+    ",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"
+  );
+  const isBuiltInDirective = /* @__PURE__ */ makeMap(
+    "bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo"
+  );
+  const cacheStringFunction = (fn) => {
+    const cache = /* @__PURE__ */ Object.create(null);
+    return (str) => {
+      const hit = cache[str];
+      return hit || (cache[str] = fn(str));
+    };
+  };
+  const camelizeRE = /-(\w)/g;
+  const camelize = cacheStringFunction((str) => {
+    return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
+  });
+  const hyphenateRE = /\B([A-Z])/g;
+  const hyphenate = cacheStringFunction(
+    (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
+  );
+  const capitalize = cacheStringFunction((str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  });
+  const toHandlerKey = cacheStringFunction((str) => {
+    const s = str ? `on${capitalize(str)}` : ``;
+    return s;
+  });
+  const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
+  const invokeArrayFns = (fns, arg) => {
+    for (let i = 0; i < fns.length; i++) {
+      fns[i](arg);
+    }
+  };
+  const def = (obj, key, value) => {
+    Object.defineProperty(obj, key, {
+      configurable: true,
+      enumerable: false,
+      value
+    });
+  };
+  const looseToNumber = (val) => {
+    const n = parseFloat(val);
+    return isNaN(n) ? val : n;
+  };
+  const toNumber = (val) => {
+    const n = isString(val) ? Number(val) : NaN;
+    return isNaN(n) ? val : n;
+  };
+  let _globalThis;
+  const getGlobalThis = () => {
+    return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
+  };
+
+  const PatchFlagNames = {
+    [1]: `TEXT`,
+    [2]: `CLASS`,
+    [4]: `STYLE`,
+    [8]: `PROPS`,
+    [16]: `FULL_PROPS`,
+    [32]: `NEED_HYDRATION`,
+    [64]: `STABLE_FRAGMENT`,
+    [128]: `KEYED_FRAGMENT`,
+    [256]: `UNKEYED_FRAGMENT`,
+    [512]: `NEED_PATCH`,
+    [1024]: `DYNAMIC_SLOTS`,
+    [2048]: `DEV_ROOT_FRAGMENT`,
+    [-1]: `HOISTED`,
+    [-2]: `BAIL`
+  };
+
+  const slotFlagsText = {
+    [1]: "STABLE",
+    [2]: "DYNAMIC",
+    [3]: "FORWARDED"
+  };
+
+  const GLOBALS_ALLOWED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error";
+  const isGloballyAllowed = /* @__PURE__ */ makeMap(GLOBALS_ALLOWED);
+
+  const range = 2;
+  function generateCodeFrame(source, start = 0, end = source.length) {
+    let lines = source.split(/(\r?\n)/);
+    const newlineSequences = lines.filter((_, idx) => idx % 2 === 1);
+    lines = lines.filter((_, idx) => idx % 2 === 0);
+    let count = 0;
+    const res = [];
+    for (let i = 0; i < lines.length; i++) {
+      count += lines[i].length + (newlineSequences[i] && newlineSequences[i].length || 0);
+      if (count >= start) {
+        for (let j = i - range; j <= i + range || end > count; j++) {
+          if (j < 0 || j >= lines.length)
+            continue;
+          const line = j + 1;
+          res.push(
+            `${line}${" ".repeat(Math.max(3 - String(line).length, 0))}|  ${lines[j]}`
+          );
+          const lineLength = lines[j].length;
+          const newLineSeqLength = newlineSequences[j] && newlineSequences[j].length || 0;
+          if (j === i) {
+            const pad = start - (count - (lineLength + newLineSeqLength));
+            const length = Math.max(
+              1,
+              end > count ? lineLength - pad : end - start
+            );
+            res.push(`   |  ` + " ".repeat(pad) + "^".repeat(length));
+          } else if (j > i) {
+            if (end > count) {
+              const length = Math.max(Math.min(end - count, lineLength), 1);
+              res.push(`   |  ` + "^".repeat(length));
+            }
+            count += lineLength + newLineSeqLength;
+          }
+        }
+        break;
+      }
+    }
+    return res.join("\n");
+  }
+
+  function normalizeStyle(value) {
+    if (isArray(value)) {
+      const res = {};
+      for (let i = 0; i < value.length; i++) {
+        const item = value[i];
+        const normalized = isString(item) ? parseStringStyle(item) : normalizeStyle(item);
+        if (normalized) {
+          for (const key in normalized) {
+            res[key] = normalized[key];
+          }
+        }
+      }
+      return res;
+    } else if (isString(value) || isObject(value)) {
+      return value;
+    }
+  }
+  const listDelimiterRE = /;(?![^(]*\))/g;
+  const propertyDelimiterRE = /:([^]+)/;
+  const styleCommentRE = /\/\*[^]*?\*\//g;
+  function parseStringStyle(cssText) {
+    const ret = {};
+    cssText.replace(styleCommentRE, "").split(listDelimiterRE).forEach((item) => {
+      if (item) {
+        const tmp = item.split(propertyDelimiterRE);
+        tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
+      }
+    });
+    return ret;
+  }
+  function stringifyStyle(styles) {
+    let ret = "";
+    if (!styles || isString(styles)) {
+      return ret;
+    }
+    for (const key in styles) {
+      const value = styles[key];
+      const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key);
+      if (isString(value) || typeof value === "number") {
+        ret += `${normalizedKey}:${value};`;
+      }
+    }
+    return ret;
+  }
+  function normalizeClass(value) {
+    let res = "";
+    if (isString(value)) {
+      res = value;
+    } else if (isArray(value)) {
+      for (let i = 0; i < value.length; i++) {
+        const normalized = normalizeClass(value[i]);
+        if (normalized) {
+          res += normalized + " ";
+        }
+      }
+    } else if (isObject(value)) {
+      for (const name in value) {
+        if (value[name]) {
+          res += name + " ";
+        }
+      }
+    }
+    return res.trim();
+  }
+  function normalizeProps(props) {
+    if (!props)
+      return null;
+    let { class: klass, style } = props;
+    if (klass && !isString(klass)) {
+      props.class = normalizeClass(klass);
+    }
+    if (style) {
+      props.style = normalizeStyle(style);
+    }
+    return props;
+  }
+
+  const HTML_TAGS = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot";
+  const SVG_TAGS = "svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,text,textPath,title,tspan,unknown,use,view";
+  const MATH_TAGS = "annotation,annotation-xml,maction,maligngroup,malignmark,math,menclose,merror,mfenced,mfrac,mfraction,mglyph,mi,mlabeledtr,mlongdiv,mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,mscarries,mscarry,msgroup,msline,mspace,msqrt,msrow,mstack,mstyle,msub,msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,none,semantics";
+  const VOID_TAGS = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
+  const isHTMLTag = /* @__PURE__ */ makeMap(HTML_TAGS);
+  const isSVGTag = /* @__PURE__ */ makeMap(SVG_TAGS);
+  const isMathMLTag = /* @__PURE__ */ makeMap(MATH_TAGS);
+  const isVoidTag = /* @__PURE__ */ makeMap(VOID_TAGS);
+
+  const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
+  const isSpecialBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs);
+  const isBooleanAttr = /* @__PURE__ */ makeMap(
+    specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`
+  );
+  function includeBooleanAttr(value) {
+    return !!value || value === "";
+  }
+  const isKnownHtmlAttr = /* @__PURE__ */ makeMap(
+    `accept,accept-charset,accesskey,action,align,allow,alt,async,autocapitalize,autocomplete,autofocus,autoplay,background,bgcolor,border,buffered,capture,challenge,charset,checked,cite,class,code,codebase,color,cols,colspan,content,contenteditable,contextmenu,controls,coords,crossorigin,csp,data,datetime,decoding,default,defer,dir,dirname,disabled,download,draggable,dropzone,enctype,enterkeyhint,for,form,formaction,formenctype,formmethod,formnovalidate,formtarget,headers,height,hidden,high,href,hreflang,http-equiv,icon,id,importance,inert,integrity,ismap,itemprop,keytype,kind,label,lang,language,loading,list,loop,low,manifest,max,maxlength,minlength,media,min,multiple,muted,name,novalidate,open,optimum,pattern,ping,placeholder,poster,preload,radiogroup,readonly,referrerpolicy,rel,required,reversed,rows,rowspan,sandbox,scope,scoped,selected,shape,size,sizes,slot,span,spellcheck,src,srcdoc,srclang,srcset,start,step,style,summary,tabindex,target,title,translate,type,usemap,value,width,wrap`
+  );
+  const isKnownSvgAttr = /* @__PURE__ */ makeMap(
+    `xmlns,accent-height,accumulate,additive,alignment-baseline,alphabetic,amplitude,arabic-form,ascent,attributeName,attributeType,azimuth,baseFrequency,baseline-shift,baseProfile,bbox,begin,bias,by,calcMode,cap-height,class,clip,clipPathUnits,clip-path,clip-rule,color,color-interpolation,color-interpolation-filters,color-profile,color-rendering,contentScriptType,contentStyleType,crossorigin,cursor,cx,cy,d,decelerate,descent,diffuseConstant,direction,display,divisor,dominant-baseline,dur,dx,dy,edgeMode,elevation,enable-background,end,exponent,fill,fill-opacity,fill-rule,filter,filterRes,filterUnits,flood-color,flood-opacity,font-family,font-size,font-size-adjust,font-stretch,font-style,font-variant,font-weight,format,from,fr,fx,fy,g1,g2,glyph-name,glyph-orientation-horizontal,glyph-orientation-vertical,glyphRef,gradientTransform,gradientUnits,hanging,height,href,hreflang,horiz-adv-x,horiz-origin-x,id,ideographic,image-rendering,in,in2,intercept,k,k1,k2,k3,k4,kernelMatrix,kernelUnitLength,kerning,keyPoints,keySplines,keyTimes,lang,lengthAdjust,letter-spacing,lighting-color,limitingConeAngle,local,marker-end,marker-mid,marker-start,markerHeight,markerUnits,markerWidth,mask,maskContentUnits,maskUnits,mathematical,max,media,method,min,mode,name,numOctaves,offset,opacity,operator,order,orient,orientation,origin,overflow,overline-position,overline-thickness,panose-1,paint-order,path,pathLength,patternContentUnits,patternTransform,patternUnits,ping,pointer-events,points,pointsAtX,pointsAtY,pointsAtZ,preserveAlpha,preserveAspectRatio,primitiveUnits,r,radius,referrerPolicy,refX,refY,rel,rendering-intent,repeatCount,repeatDur,requiredExtensions,requiredFeatures,restart,result,rotate,rx,ry,scale,seed,shape-rendering,slope,spacing,specularConstant,specularExponent,speed,spreadMethod,startOffset,stdDeviation,stemh,stemv,stitchTiles,stop-color,stop-opacity,strikethrough-position,strikethrough-thickness,string,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,style,surfaceScale,systemLanguage,tabindex,tableValues,target,targetX,targetY,text-anchor,text-decoration,text-rendering,textLength,to,transform,transform-origin,type,u1,u2,underline-position,underline-thickness,unicode,unicode-bidi,unicode-range,units-per-em,v-alphabetic,v-hanging,v-ideographic,v-mathematical,values,vector-effect,version,vert-adv-y,vert-origin-x,vert-origin-y,viewBox,viewTarget,visibility,width,widths,word-spacing,writing-mode,x,x-height,x1,x2,xChannelSelector,xlink:actuate,xlink:arcrole,xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xmlns:xlink,xml:base,xml:lang,xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`
+  );
+  function isRenderableAttrValue(value) {
+    if (value == null) {
+      return false;
+    }
+    const type = typeof value;
+    return type === "string" || type === "number" || type === "boolean";
+  }
+
+  function looseCompareArrays(a, b) {
+    if (a.length !== b.length)
+      return false;
+    let equal = true;
+    for (let i = 0; equal && i < a.length; i++) {
+      equal = looseEqual(a[i], b[i]);
+    }
+    return equal;
+  }
+  function looseEqual(a, b) {
+    if (a === b)
+      return true;
+    let aValidType = isDate(a);
+    let bValidType = isDate(b);
+    if (aValidType || bValidType) {
+      return aValidType && bValidType ? a.getTime() === b.getTime() : false;
+    }
+    aValidType = isSymbol(a);
+    bValidType = isSymbol(b);
+    if (aValidType || bValidType) {
+      return a === b;
+    }
+    aValidType = isArray(a);
+    bValidType = isArray(b);
+    if (aValidType || bValidType) {
+      return aValidType && bValidType ? looseCompareArrays(a, b) : false;
+    }
+    aValidType = isObject(a);
+    bValidType = isObject(b);
+    if (aValidType || bValidType) {
+      if (!aValidType || !bValidType) {
+        return false;
+      }
+      const aKeysCount = Object.keys(a).length;
+      const bKeysCount = Object.keys(b).length;
+      if (aKeysCount !== bKeysCount) {
+        return false;
+      }
+      for (const key in a) {
+        const aHasKey = a.hasOwnProperty(key);
+        const bHasKey = b.hasOwnProperty(key);
+        if (aHasKey && !bHasKey || !aHasKey && bHasKey || !looseEqual(a[key], b[key])) {
+          return false;
+        }
+      }
+    }
+    return String(a) === String(b);
+  }
+  function looseIndexOf(arr, val) {
+    return arr.findIndex((item) => looseEqual(item, val));
+  }
+
+  const toDisplayString = (val) => {
+    return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val);
+  };
+  const replacer = (_key, val) => {
+    if (val && val.__v_isRef) {
+      return replacer(_key, val.value);
+    } else if (isMap(val)) {
+      return {
+        [`Map(${val.size})`]: [...val.entries()].reduce(
+          (entries, [key, val2], i) => {
+            entries[stringifySymbol(key, i) + " =>"] = val2;
+            return entries;
+          },
+          {}
+        )
+      };
+    } else if (isSet(val)) {
+      return {
+        [`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
+      };
+    } else if (isSymbol(val)) {
+      return stringifySymbol(val);
+    } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
+      return String(val);
+    }
+    return val;
+  };
+  const stringifySymbol = (v, i = "") => {
+    var _a;
+    return isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v;
+  };
+
+  function warn$2(msg, ...args) {
+    console.warn(`[Vue warn] ${msg}`, ...args);
+  }
+
+  let activeEffectScope;
+  class EffectScope {
+    constructor(detached = false) {
+      this.detached = detached;
+      /**
+       * @internal
+       */
+      this._active = true;
+      /**
+       * @internal
+       */
+      this.effects = [];
+      /**
+       * @internal
+       */
+      this.cleanups = [];
+      this.parent = activeEffectScope;
+      if (!detached && activeEffectScope) {
+        this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
+          this
+        ) - 1;
+      }
+    }
+    get active() {
+      return this._active;
+    }
+    run(fn) {
+      if (this._active) {
+        const currentEffectScope = activeEffectScope;
+        try {
+          activeEffectScope = this;
+          return fn();
+        } finally {
+          activeEffectScope = currentEffectScope;
+        }
+      } else {
+        warn$2(`cannot run an inactive effect scope.`);
+      }
+    }
+    /**
+     * This should only be called on non-detached scopes
+     * @internal
+     */
+    on() {
+      activeEffectScope = this;
+    }
+    /**
+     * This should only be called on non-detached scopes
+     * @internal
+     */
+    off() {
+      activeEffectScope = this.parent;
+    }
+    stop(fromParent) {
+      if (this._active) {
+        let i, l;
+        for (i = 0, l = this.effects.length; i < l; i++) {
+          this.effects[i].stop();
+        }
+        for (i = 0, l = this.cleanups.length; i < l; i++) {
+          this.cleanups[i]();
+        }
+        if (this.scopes) {
+          for (i = 0, l = this.scopes.length; i < l; i++) {
+            this.scopes[i].stop(true);
+          }
+        }
+        if (!this.detached && this.parent && !fromParent) {
+          const last = this.parent.scopes.pop();
+          if (last && last !== this) {
+            this.parent.scopes[this.index] = last;
+            last.index = this.index;
+          }
+        }
+        this.parent = void 0;
+        this._active = false;
+      }
+    }
+  }
+  function effectScope(detached) {
+    return new EffectScope(detached);
+  }
+  function recordEffectScope(effect, scope = activeEffectScope) {
+    if (scope && scope.active) {
+      scope.effects.push(effect);
+    }
+  }
+  function getCurrentScope() {
+    return activeEffectScope;
+  }
+  function onScopeDispose(fn) {
+    if (activeEffectScope) {
+      activeEffectScope.cleanups.push(fn);
+    } else {
+      warn$2(
+        `onScopeDispose() is called when there is no active effect scope to be associated with.`
+      );
+    }
+  }
+
+  let activeEffect;
+  class ReactiveEffect {
+    constructor(fn, trigger, scheduler, scope) {
+      this.fn = fn;
+      this.trigger = trigger;
+      this.scheduler = scheduler;
+      this.active = true;
+      this.deps = [];
+      /**
+       * @internal
+       */
+      this._dirtyLevel = 4;
+      /**
+       * @internal
+       */
+      this._trackId = 0;
+      /**
+       * @internal
+       */
+      this._runnings = 0;
+      /**
+       * @internal
+       */
+      this._shouldSchedule = false;
+      /**
+       * @internal
+       */
+      this._depsLength = 0;
+      recordEffectScope(this, scope);
+    }
+    get dirty() {
+      if (this._dirtyLevel === 2 || this._dirtyLevel === 3) {
+        this._dirtyLevel = 1;
+        pauseTracking();
+        for (let i = 0; i < this._depsLength; i++) {
+          const dep = this.deps[i];
+          if (dep.computed) {
+            triggerComputed(dep.computed);
+            if (this._dirtyLevel >= 4) {
+              break;
+            }
+          }
+        }
+        if (this._dirtyLevel === 1) {
+          this._dirtyLevel = 0;
+        }
+        resetTracking();
+      }
+      return this._dirtyLevel >= 4;
+    }
+    set dirty(v) {
+      this._dirtyLevel = v ? 4 : 0;
+    }
+    run() {
+      this._dirtyLevel = 0;
+      if (!this.active) {
+        return this.fn();
+      }
+      let lastShouldTrack = shouldTrack;
+      let lastEffect = activeEffect;
+      try {
+        shouldTrack = true;
+        activeEffect = this;
+        this._runnings++;
+        preCleanupEffect(this);
+        return this.fn();
+      } finally {
+        postCleanupEffect(this);
+        this._runnings--;
+        activeEffect = lastEffect;
+        shouldTrack = lastShouldTrack;
+      }
+    }
+    stop() {
+      var _a;
+      if (this.active) {
+        preCleanupEffect(this);
+        postCleanupEffect(this);
+        (_a = this.onStop) == null ? void 0 : _a.call(this);
+        this.active = false;
+      }
+    }
+  }
+  function triggerComputed(computed) {
+    return computed.value;
+  }
+  function preCleanupEffect(effect2) {
+    effect2._trackId++;
+    effect2._depsLength = 0;
+  }
+  function postCleanupEffect(effect2) {
+    if (effect2.deps.length > effect2._depsLength) {
+      for (let i = effect2._depsLength; i < effect2.deps.length; i++) {
+        cleanupDepEffect(effect2.deps[i], effect2);
+      }
+      effect2.deps.length = effect2._depsLength;
+    }
+  }
+  function cleanupDepEffect(dep, effect2) {
+    const trackId = dep.get(effect2);
+    if (trackId !== void 0 && effect2._trackId !== trackId) {
+      dep.delete(effect2);
+      if (dep.size === 0) {
+        dep.cleanup();
+      }
+    }
+  }
+  function effect(fn, options) {
+    if (fn.effect instanceof ReactiveEffect) {
+      fn = fn.effect.fn;
+    }
+    const _effect = new ReactiveEffect(fn, NOOP, () => {
+      if (_effect.dirty) {
+        _effect.run();
+      }
+    });
+    if (options) {
+      extend(_effect, options);
+      if (options.scope)
+        recordEffectScope(_effect, options.scope);
+    }
+    if (!options || !options.lazy) {
+      _effect.run();
+    }
+    const runner = _effect.run.bind(_effect);
+    runner.effect = _effect;
+    return runner;
+  }
+  function stop(runner) {
+    runner.effect.stop();
+  }
+  let shouldTrack = true;
+  let pauseScheduleStack = 0;
+  const trackStack = [];
+  function pauseTracking() {
+    trackStack.push(shouldTrack);
+    shouldTrack = false;
+  }
+  function resetTracking() {
+    const last = trackStack.pop();
+    shouldTrack = last === void 0 ? true : last;
+  }
+  function pauseScheduling() {
+    pauseScheduleStack++;
+  }
+  function resetScheduling() {
+    pauseScheduleStack--;
+    while (!pauseScheduleStack && queueEffectSchedulers.length) {
+      queueEffectSchedulers.shift()();
+    }
+  }
+  function trackEffect(effect2, dep, debuggerEventExtraInfo) {
+    var _a;
+    if (dep.get(effect2) !== effect2._trackId) {
+      dep.set(effect2, effect2._trackId);
+      const oldDep = effect2.deps[effect2._depsLength];
+      if (oldDep !== dep) {
+        if (oldDep) {
+          cleanupDepEffect(oldDep, effect2);
+        }
+        effect2.deps[effect2._depsLength++] = dep;
+      } else {
+        effect2._depsLength++;
+      }
+      {
+        (_a = effect2.onTrack) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+      }
+    }
+  }
+  const queueEffectSchedulers = [];
+  function triggerEffects(dep, dirtyLevel, debuggerEventExtraInfo) {
+    var _a;
+    pauseScheduling();
+    for (const effect2 of dep.keys()) {
+      let tracking;
+      if (effect2._dirtyLevel < dirtyLevel && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) {
+        effect2._shouldSchedule || (effect2._shouldSchedule = effect2._dirtyLevel === 0);
+        effect2._dirtyLevel = dirtyLevel;
+      }
+      if (effect2._shouldSchedule && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) {
+        {
+          (_a = effect2.onTrigger) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+        }
+        effect2.trigger();
+        if ((!effect2._runnings || effect2.allowRecurse) && effect2._dirtyLevel !== 2) {
+          effect2._shouldSchedule = false;
+          if (effect2.scheduler) {
+            queueEffectSchedulers.push(effect2.scheduler);
+          }
+        }
+      }
+    }
+    resetScheduling();
+  }
+
+  const createDep = (cleanup, computed) => {
+    const dep = /* @__PURE__ */ new Map();
+    dep.cleanup = cleanup;
+    dep.computed = computed;
+    return dep;
+  };
+
+  const targetMap = /* @__PURE__ */ new WeakMap();
+  const ITERATE_KEY = Symbol("iterate" );
+  const MAP_KEY_ITERATE_KEY = Symbol("Map key iterate" );
+  function track(target, type, key) {
+    if (shouldTrack && activeEffect) {
+      let depsMap = targetMap.get(target);
+      if (!depsMap) {
+        targetMap.set(target, depsMap = /* @__PURE__ */ new Map());
+      }
+      let dep = depsMap.get(key);
+      if (!dep) {
+        depsMap.set(key, dep = createDep(() => depsMap.delete(key)));
+      }
+      trackEffect(
+        activeEffect,
+        dep,
+        {
+          target,
+          type,
+          key
+        } 
+      );
+    }
+  }
+  function trigger(target, type, key, newValue, oldValue, oldTarget) {
+    const depsMap = targetMap.get(target);
+    if (!depsMap) {
+      return;
+    }
+    let deps = [];
+    if (type === "clear") {
+      deps = [...depsMap.values()];
+    } else if (key === "length" && isArray(target)) {
+      const newLength = Number(newValue);
+      depsMap.forEach((dep, key2) => {
+        if (key2 === "length" || !isSymbol(key2) && key2 >= newLength) {
+          deps.push(dep);
+        }
+      });
+    } else {
+      if (key !== void 0) {
+        deps.push(depsMap.get(key));
+      }
+      switch (type) {
+        case "add":
+          if (!isArray(target)) {
+            deps.push(depsMap.get(ITERATE_KEY));
+            if (isMap(target)) {
+              deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
+            }
+          } else if (isIntegerKey(key)) {
+            deps.push(depsMap.get("length"));
+          }
+          break;
+        case "delete":
+          if (!isArray(target)) {
+            deps.push(depsMap.get(ITERATE_KEY));
+            if (isMap(target)) {
+              deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
+            }
+          }
+          break;
+        case "set":
+          if (isMap(target)) {
+            deps.push(depsMap.get(ITERATE_KEY));
+          }
+          break;
+      }
+    }
+    pauseScheduling();
+    for (const dep of deps) {
+      if (dep) {
+        triggerEffects(
+          dep,
+          4,
+          {
+            target,
+            type,
+            key,
+            newValue,
+            oldValue,
+            oldTarget
+          } 
+        );
+      }
+    }
+    resetScheduling();
+  }
+  function getDepFromReactive(object, key) {
+    var _a;
+    return (_a = targetMap.get(object)) == null ? void 0 : _a.get(key);
+  }
+
+  const isNonTrackableKeys = /* @__PURE__ */ makeMap(`__proto__,__v_isRef,__isVue`);
+  const builtInSymbols = new Set(
+    /* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol)
+  );
+  const arrayInstrumentations = /* @__PURE__ */ createArrayInstrumentations();
+  function createArrayInstrumentations() {
+    const instrumentations = {};
+    ["includes", "indexOf", "lastIndexOf"].forEach((key) => {
+      instrumentations[key] = function(...args) {
+        const arr = toRaw(this);
+        for (let i = 0, l = this.length; i < l; i++) {
+          track(arr, "get", i + "");
+        }
+        const res = arr[key](...args);
+        if (res === -1 || res === false) {
+          return arr[key](...args.map(toRaw));
+        } else {
+          return res;
+        }
+      };
+    });
+    ["push", "pop", "shift", "unshift", "splice"].forEach((key) => {
+      instrumentations[key] = function(...args) {
+        pauseTracking();
+        pauseScheduling();
+        const res = toRaw(this)[key].apply(this, args);
+        resetScheduling();
+        resetTracking();
+        return res;
+      };
+    });
+    return instrumentations;
+  }
+  function hasOwnProperty(key) {
+    const obj = toRaw(this);
+    track(obj, "has", key);
+    return obj.hasOwnProperty(key);
+  }
+  class BaseReactiveHandler {
+    constructor(_isReadonly = false, _shallow = false) {
+      this._isReadonly = _isReadonly;
+      this._shallow = _shallow;
+    }
+    get(target, key, receiver) {
+      const isReadonly2 = this._isReadonly, shallow = this._shallow;
+      if (key === "__v_isReactive") {
+        return !isReadonly2;
+      } else if (key === "__v_isReadonly") {
+        return isReadonly2;
+      } else if (key === "__v_isShallow") {
+        return shallow;
+      } else if (key === "__v_raw") {
+        if (receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
+        // this means the reciever is a user proxy of the reactive proxy
+        Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
+          return target;
+        }
+        return;
+      }
+      const targetIsArray = isArray(target);
+      if (!isReadonly2) {
+        if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
+          return Reflect.get(arrayInstrumentations, key, receiver);
+        }
+        if (key === "hasOwnProperty") {
+          return hasOwnProperty;
+        }
+      }
+      const res = Reflect.get(target, key, receiver);
+      if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
+        return res;
+      }
+      if (!isReadonly2) {
+        track(target, "get", key);
+      }
+      if (shallow) {
+        return res;
+      }
+      if (isRef(res)) {
+        return targetIsArray && isIntegerKey(key) ? res : res.value;
+      }
+      if (isObject(res)) {
+        return isReadonly2 ? readonly(res) : reactive(res);
+      }
+      return res;
+    }
+  }
+  class MutableReactiveHandler extends BaseReactiveHandler {
+    constructor(shallow = false) {
+      super(false, shallow);
+    }
+    set(target, key, value, receiver) {
+      let oldValue = target[key];
+      if (!this._shallow) {
+        const isOldValueReadonly = isReadonly(oldValue);
+        if (!isShallow(value) && !isReadonly(value)) {
+          oldValue = toRaw(oldValue);
+          value = toRaw(value);
+        }
+        if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
+          if (isOldValueReadonly) {
+            return false;
+          } else {
+            oldValue.value = value;
+            return true;
+          }
+        }
+      }
+      const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
+      const result = Reflect.set(target, key, value, receiver);
+      if (target === toRaw(receiver)) {
+        if (!hadKey) {
+          trigger(target, "add", key, value);
+        } else if (hasChanged(value, oldValue)) {
+          trigger(target, "set", key, value, oldValue);
+        }
+      }
+      return result;
+    }
+    deleteProperty(target, key) {
+      const hadKey = hasOwn(target, key);
+      const oldValue = target[key];
+      const result = Reflect.deleteProperty(target, key);
+      if (result && hadKey) {
+        trigger(target, "delete", key, void 0, oldValue);
+      }
+      return result;
+    }
+    has(target, key) {
+      const result = Reflect.has(target, key);
+      if (!isSymbol(key) || !builtInSymbols.has(key)) {
+        track(target, "has", key);
+      }
+      return result;
+    }
+    ownKeys(target) {
+      track(
+        target,
+        "iterate",
+        isArray(target) ? "length" : ITERATE_KEY
+      );
+      return Reflect.ownKeys(target);
+    }
+  }
+  class ReadonlyReactiveHandler extends BaseReactiveHandler {
+    constructor(shallow = false) {
+      super(true, shallow);
+    }
+    set(target, key) {
+      {
+        warn$2(
+          `Set operation on key "${String(key)}" failed: target is readonly.`,
+          target
+        );
+      }
+      return true;
+    }
+    deleteProperty(target, key) {
+      {
+        warn$2(
+          `Delete operation on key "${String(key)}" failed: target is readonly.`,
+          target
+        );
+      }
+      return true;
+    }
+  }
+  const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
+  const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
+  const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
+    true
+  );
+  const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
+
+  const toShallow = (value) => value;
+  const getProto = (v) => Reflect.getPrototypeOf(v);
+  function get(target, key, isReadonly = false, isShallow = false) {
+    target = target["__v_raw"];
+    const rawTarget = toRaw(target);
+    const rawKey = toRaw(key);
+    if (!isReadonly) {
+      if (hasChanged(key, rawKey)) {
+        track(rawTarget, "get", key);
+      }
+      track(rawTarget, "get", rawKey);
+    }
+    const { has: has2 } = getProto(rawTarget);
+    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
+    if (has2.call(rawTarget, key)) {
+      return wrap(target.get(key));
+    } else if (has2.call(rawTarget, rawKey)) {
+      return wrap(target.get(rawKey));
+    } else if (target !== rawTarget) {
+      target.get(key);
+    }
+  }
+  function has(key, isReadonly = false) {
+    const target = this["__v_raw"];
+    const rawTarget = toRaw(target);
+    const rawKey = toRaw(key);
+    if (!isReadonly) {
+      if (hasChanged(key, rawKey)) {
+        track(rawTarget, "has", key);
+      }
+      track(rawTarget, "has", rawKey);
+    }
+    return key === rawKey ? target.has(key) : target.has(key) || target.has(rawKey);
+  }
+  function size(target, isReadonly = false) {
+    target = target["__v_raw"];
+    !isReadonly && track(toRaw(target), "iterate", ITERATE_KEY);
+    return Reflect.get(target, "size", target);
+  }
+  function add(value) {
+    value = toRaw(value);
+    const target = toRaw(this);
+    const proto = getProto(target);
+    const hadKey = proto.has.call(target, value);
+    if (!hadKey) {
+      target.add(value);
+      trigger(target, "add", value, value);
+    }
+    return this;
+  }
+  function set(key, value) {
+    value = toRaw(value);
+    const target = toRaw(this);
+    const { has: has2, get: get2 } = getProto(target);
+    let hadKey = has2.call(target, key);
+    if (!hadKey) {
+      key = toRaw(key);
+      hadKey = has2.call(target, key);
+    } else {
+      checkIdentityKeys(target, has2, key);
+    }
+    const oldValue = get2.call(target, key);
+    target.set(key, value);
+    if (!hadKey) {
+      trigger(target, "add", key, value);
+    } else if (hasChanged(value, oldValue)) {
+      trigger(target, "set", key, value, oldValue);
+    }
+    return this;
+  }
+  function deleteEntry(key) {
+    const target = toRaw(this);
+    const { has: has2, get: get2 } = getProto(target);
+    let hadKey = has2.call(target, key);
+    if (!hadKey) {
+      key = toRaw(key);
+      hadKey = has2.call(target, key);
+    } else {
+      checkIdentityKeys(target, has2, key);
+    }
+    const oldValue = get2 ? get2.call(target, key) : void 0;
+    const result = target.delete(key);
+    if (hadKey) {
+      trigger(target, "delete", key, void 0, oldValue);
+    }
+    return result;
+  }
+  function clear() {
+    const target = toRaw(this);
+    const hadItems = target.size !== 0;
+    const oldTarget = isMap(target) ? new Map(target) : new Set(target) ;
+    const result = target.clear();
+    if (hadItems) {
+      trigger(target, "clear", void 0, void 0, oldTarget);
+    }
+    return result;
+  }
+  function createForEach(isReadonly, isShallow) {
+    return function forEach(callback, thisArg) {
+      const observed = this;
+      const target = observed["__v_raw"];
+      const rawTarget = toRaw(target);
+      const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
+      !isReadonly && track(rawTarget, "iterate", ITERATE_KEY);
+      return target.forEach((value, key) => {
+        return callback.call(thisArg, wrap(value), wrap(key), observed);
+      });
+    };
+  }
+  function createIterableMethod(method, isReadonly, isShallow) {
+    return function(...args) {
+      const target = this["__v_raw"];
+      const rawTarget = toRaw(target);
+      const targetIsMap = isMap(rawTarget);
+      const isPair = method === "entries" || method === Symbol.iterator && targetIsMap;
+      const isKeyOnly = method === "keys" && targetIsMap;
+      const innerIterator = target[method](...args);
+      const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
+      !isReadonly && track(
+        rawTarget,
+        "iterate",
+        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
+      );
+      return {
+        // iterator protocol
+        next() {
+          const { value, done } = innerIterator.next();
+          return done ? { value, done } : {
+            value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
+            done
+          };
+        },
+        // iterable protocol
+        [Symbol.iterator]() {
+          return this;
+        }
+      };
+    };
+  }
+  function createReadonlyMethod(type) {
+    return function(...args) {
+      {
+        const key = args[0] ? `on key "${args[0]}" ` : ``;
+        console.warn(
+          `${capitalize(type)} operation ${key}failed: target is readonly.`,
+          toRaw(this)
+        );
+      }
+      return type === "delete" ? false : type === "clear" ? void 0 : this;
+    };
+  }
+  function createInstrumentations() {
+    const mutableInstrumentations2 = {
+      get(key) {
+        return get(this, key);
+      },
+      get size() {
+        return size(this);
+      },
+      has,
+      add,
+      set,
+      delete: deleteEntry,
+      clear,
+      forEach: createForEach(false, false)
+    };
+    const shallowInstrumentations2 = {
+      get(key) {
+        return get(this, key, false, true);
+      },
+      get size() {
+        return size(this);
+      },
+      has,
+      add,
+      set,
+      delete: deleteEntry,
+      clear,
+      forEach: createForEach(false, true)
+    };
+    const readonlyInstrumentations2 = {
+      get(key) {
+        return get(this, key, true);
+      },
+      get size() {
+        return size(this, true);
+      },
+      has(key) {
+        return has.call(this, key, true);
+      },
+      add: createReadonlyMethod("add"),
+      set: createReadonlyMethod("set"),
+      delete: createReadonlyMethod("delete"),
+      clear: createReadonlyMethod("clear"),
+      forEach: createForEach(true, false)
+    };
+    const shallowReadonlyInstrumentations2 = {
+      get(key) {
+        return get(this, key, true, true);
+      },
+      get size() {
+        return size(this, true);
+      },
+      has(key) {
+        return has.call(this, key, true);
+      },
+      add: createReadonlyMethod("add"),
+      set: createReadonlyMethod("set"),
+      delete: createReadonlyMethod("delete"),
+      clear: createReadonlyMethod("clear"),
+      forEach: createForEach(true, true)
+    };
+    const iteratorMethods = ["keys", "values", "entries", Symbol.iterator];
+    iteratorMethods.forEach((method) => {
+      mutableInstrumentations2[method] = createIterableMethod(
+        method,
+        false,
+        false
+      );
+      readonlyInstrumentations2[method] = createIterableMethod(
+        method,
+        true,
+        false
+      );
+      shallowInstrumentations2[method] = createIterableMethod(
+        method,
+        false,
+        true
+      );
+      shallowReadonlyInstrumentations2[method] = createIterableMethod(
+        method,
+        true,
+        true
+      );
+    });
+    return [
+      mutableInstrumentations2,
+      readonlyInstrumentations2,
+      shallowInstrumentations2,
+      shallowReadonlyInstrumentations2
+    ];
+  }
+  const [
+    mutableInstrumentations,
+    readonlyInstrumentations,
+    shallowInstrumentations,
+    shallowReadonlyInstrumentations
+  ] = /* @__PURE__ */ createInstrumentations();
+  function createInstrumentationGetter(isReadonly, shallow) {
+    const instrumentations = shallow ? isReadonly ? shallowReadonlyInstrumentations : shallowInstrumentations : isReadonly ? readonlyInstrumentations : mutableInstrumentations;
+    return (target, key, receiver) => {
+      if (key === "__v_isReactive") {
+        return !isReadonly;
+      } else if (key === "__v_isReadonly") {
+        return isReadonly;
+      } else if (key === "__v_raw") {
+        return target;
+      }
+      return Reflect.get(
+        hasOwn(instrumentations, key) && key in target ? instrumentations : target,
+        key,
+        receiver
+      );
+    };
+  }
+  const mutableCollectionHandlers = {
+    get: /* @__PURE__ */ createInstrumentationGetter(false, false)
+  };
+  const shallowCollectionHandlers = {
+    get: /* @__PURE__ */ createInstrumentationGetter(false, true)
+  };
+  const readonlyCollectionHandlers = {
+    get: /* @__PURE__ */ createInstrumentationGetter(true, false)
+  };
+  const shallowReadonlyCollectionHandlers = {
+    get: /* @__PURE__ */ createInstrumentationGetter(true, true)
+  };
+  function checkIdentityKeys(target, has2, key) {
+    const rawKey = toRaw(key);
+    if (rawKey !== key && has2.call(target, rawKey)) {
+      const type = toRawType(target);
+      console.warn(
+        `Reactive ${type} contains both the raw and reactive versions of the same object${type === `Map` ? ` as keys` : ``}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`
+      );
+    }
+  }
+
+  const reactiveMap = /* @__PURE__ */ new WeakMap();
+  const shallowReactiveMap = /* @__PURE__ */ new WeakMap();
+  const readonlyMap = /* @__PURE__ */ new WeakMap();
+  const shallowReadonlyMap = /* @__PURE__ */ new WeakMap();
+  function targetTypeMap(rawType) {
+    switch (rawType) {
+      case "Object":
+      case "Array":
+        return 1 /* COMMON */;
+      case "Map":
+      case "Set":
+      case "WeakMap":
+      case "WeakSet":
+        return 2 /* COLLECTION */;
+      default:
+        return 0 /* INVALID */;
+    }
+  }
+  function getTargetType(value) {
+    return value["__v_skip"] || !Object.isExtensible(value) ? 0 /* INVALID */ : targetTypeMap(toRawType(value));
+  }
+  function reactive(target) {
+    if (isReadonly(target)) {
+      return target;
+    }
+    return createReactiveObject(
+      target,
+      false,
+      mutableHandlers,
+      mutableCollectionHandlers,
+      reactiveMap
+    );
+  }
+  function shallowReactive(target) {
+    return createReactiveObject(
+      target,
+      false,
+      shallowReactiveHandlers,
+      shallowCollectionHandlers,
+      shallowReactiveMap
+    );
+  }
+  function readonly(target) {
+    return createReactiveObject(
+      target,
+      true,
+      readonlyHandlers,
+      readonlyCollectionHandlers,
+      readonlyMap
+    );
+  }
+  function shallowReadonly(target) {
+    return createReactiveObject(
+      target,
+      true,
+      shallowReadonlyHandlers,
+      shallowReadonlyCollectionHandlers,
+      shallowReadonlyMap
+    );
+  }
+  function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) {
+    if (!isObject(target)) {
+      {
+        console.warn(`value cannot be made reactive: ${String(target)}`);
+      }
+      return target;
+    }
+    if (target["__v_raw"] && !(isReadonly2 && target["__v_isReactive"])) {
+      return target;
+    }
+    const existingProxy = proxyMap.get(target);
+    if (existingProxy) {
+      return existingProxy;
+    }
+    const targetType = getTargetType(target);
+    if (targetType === 0 /* INVALID */) {
+      return target;
+    }
+    const proxy = new Proxy(
+      target,
+      targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers
+    );
+    proxyMap.set(target, proxy);
+    return proxy;
+  }
+  function isReactive(value) {
+    if (isReadonly(value)) {
+      return isReactive(value["__v_raw"]);
+    }
+    return !!(value && value["__v_isReactive"]);
+  }
+  function isReadonly(value) {
+    return !!(value && value["__v_isReadonly"]);
+  }
+  function isShallow(value) {
+    return !!(value && value["__v_isShallow"]);
+  }
+  function isProxy(value) {
+    return isReactive(value) || isReadonly(value);
+  }
+  function toRaw(observed) {
+    const raw = observed && observed["__v_raw"];
+    return raw ? toRaw(raw) : observed;
+  }
+  function markRaw(value) {
+    if (Object.isExtensible(value)) {
+      def(value, "__v_skip", true);
+    }
+    return value;
+  }
+  const toReactive = (value) => isObject(value) ? reactive(value) : value;
+  const toReadonly = (value) => isObject(value) ? readonly(value) : value;
+
+  class ComputedRefImpl {
+    constructor(getter, _setter, isReadonly, isSSR) {
+      this._setter = _setter;
+      this.dep = void 0;
+      this.__v_isRef = true;
+      this["__v_isReadonly"] = false;
+      this.effect = new ReactiveEffect(
+        () => getter(this._value),
+        () => triggerRefValue(
+          this,
+          this.effect._dirtyLevel === 2 ? 2 : 3
+        )
+      );
+      this.effect.computed = this;
+      this.effect.active = this._cacheable = !isSSR;
+      this["__v_isReadonly"] = isReadonly;
+    }
+    get value() {
+      const self = toRaw(this);
+      if ((!self._cacheable || self.effect.dirty) && hasChanged(self._value, self._value = self.effect.run())) {
+        triggerRefValue(self, 4);
+      }
+      trackRefValue(self);
+      if (self.effect._dirtyLevel >= 2) {
+        triggerRefValue(self, 2);
+      }
+      return self._value;
+    }
+    set value(newValue) {
+      this._setter(newValue);
+    }
+    // #region polyfill _dirty for backward compatibility third party code for Vue <= 3.3.x
+    get _dirty() {
+      return this.effect.dirty;
+    }
+    set _dirty(v) {
+      this.effect.dirty = v;
+    }
+    // #endregion
+  }
+  function computed$1(getterOrOptions, debugOptions, isSSR = false) {
+    let getter;
+    let setter;
+    const onlyGetter = isFunction(getterOrOptions);
+    if (onlyGetter) {
+      getter = getterOrOptions;
+      setter = () => {
+        console.warn("Write operation failed: computed value is readonly");
+      } ;
+    } else {
+      getter = getterOrOptions.get;
+      setter = getterOrOptions.set;
+    }
+    const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
+    if (debugOptions && !isSSR) {
+      cRef.effect.onTrack = debugOptions.onTrack;
+      cRef.effect.onTrigger = debugOptions.onTrigger;
+    }
+    return cRef;
+  }
+
+  function trackRefValue(ref2) {
+    var _a;
+    if (shouldTrack && activeEffect) {
+      ref2 = toRaw(ref2);
+      trackEffect(
+        activeEffect,
+        (_a = ref2.dep) != null ? _a : ref2.dep = createDep(
+          () => ref2.dep = void 0,
+          ref2 instanceof ComputedRefImpl ? ref2 : void 0
+        ),
+        {
+          target: ref2,
+          type: "get",
+          key: "value"
+        } 
+      );
+    }
+  }
+  function triggerRefValue(ref2, dirtyLevel = 4, newVal) {
+    ref2 = toRaw(ref2);
+    const dep = ref2.dep;
+    if (dep) {
+      triggerEffects(
+        dep,
+        dirtyLevel,
+        {
+          target: ref2,
+          type: "set",
+          key: "value",
+          newValue: newVal
+        } 
+      );
+    }
+  }
+  function isRef(r) {
+    return !!(r && r.__v_isRef === true);
+  }
+  function ref(value) {
+    return createRef(value, false);
+  }
+  function shallowRef(value) {
+    return createRef(value, true);
+  }
+  function createRef(rawValue, shallow) {
+    if (isRef(rawValue)) {
+      return rawValue;
+    }
+    return new RefImpl(rawValue, shallow);
+  }
+  class RefImpl {
+    constructor(value, __v_isShallow) {
+      this.__v_isShallow = __v_isShallow;
+      this.dep = void 0;
+      this.__v_isRef = true;
+      this._rawValue = __v_isShallow ? value : toRaw(value);
+      this._value = __v_isShallow ? value : toReactive(value);
+    }
+    get value() {
+      trackRefValue(this);
+      return this._value;
+    }
+    set value(newVal) {
+      const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
+      newVal = useDirectValue ? newVal : toRaw(newVal);
+      if (hasChanged(newVal, this._rawValue)) {
+        this._rawValue = newVal;
+        this._value = useDirectValue ? newVal : toReactive(newVal);
+        triggerRefValue(this, 4, newVal);
+      }
+    }
+  }
+  function triggerRef(ref2) {
+    triggerRefValue(ref2, 4, ref2.value );
+  }
+  function unref(ref2) {
+    return isRef(ref2) ? ref2.value : ref2;
+  }
+  function toValue(source) {
+    return isFunction(source) ? source() : unref(source);
+  }
+  const shallowUnwrapHandlers = {
+    get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),
+    set: (target, key, value, receiver) => {
+      const oldValue = target[key];
+      if (isRef(oldValue) && !isRef(value)) {
+        oldValue.value = value;
+        return true;
+      } else {
+        return Reflect.set(target, key, value, receiver);
+      }
+    }
+  };
+  function proxyRefs(objectWithRefs) {
+    return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers);
+  }
+  class CustomRefImpl {
+    constructor(factory) {
+      this.dep = void 0;
+      this.__v_isRef = true;
+      const { get, set } = factory(
+        () => trackRefValue(this),
+        () => triggerRefValue(this)
+      );
+      this._get = get;
+      this._set = set;
+    }
+    get value() {
+      return this._get();
+    }
+    set value(newVal) {
+      this._set(newVal);
+    }
+  }
+  function customRef(factory) {
+    return new CustomRefImpl(factory);
+  }
+  function toRefs(object) {
+    if (!isProxy(object)) {
+      console.warn(`toRefs() expects a reactive object but received a plain one.`);
+    }
+    const ret = isArray(object) ? new Array(object.length) : {};
+    for (const key in object) {
+      ret[key] = propertyToRef(object, key);
+    }
+    return ret;
+  }
+  class ObjectRefImpl {
+    constructor(_object, _key, _defaultValue) {
+      this._object = _object;
+      this._key = _key;
+      this._defaultValue = _defaultValue;
+      this.__v_isRef = true;
+    }
+    get value() {
+      const val = this._object[this._key];
+      return val === void 0 ? this._defaultValue : val;
+    }
+    set value(newVal) {
+      this._object[this._key] = newVal;
+    }
+    get dep() {
+      return getDepFromReactive(toRaw(this._object), this._key);
+    }
+  }
+  class GetterRefImpl {
+    constructor(_getter) {
+      this._getter = _getter;
+      this.__v_isRef = true;
+      this.__v_isReadonly = true;
+    }
+    get value() {
+      return this._getter();
+    }
+  }
+  function toRef(source, key, defaultValue) {
+    if (isRef(source)) {
+      return source;
+    } else if (isFunction(source)) {
+      return new GetterRefImpl(source);
+    } else if (isObject(source) && arguments.length > 1) {
+      return propertyToRef(source, key, defaultValue);
+    } else {
+      return ref(source);
+    }
+  }
+  function propertyToRef(source, key, defaultValue) {
+    const val = source[key];
+    return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
+  }
+
+  const TrackOpTypes = {
+    "GET": "get",
+    "HAS": "has",
+    "ITERATE": "iterate"
+  };
+  const TriggerOpTypes = {
+    "SET": "set",
+    "ADD": "add",
+    "DELETE": "delete",
+    "CLEAR": "clear"
+  };
+
+  const stack$1 = [];
+  function pushWarningContext(vnode) {
+    stack$1.push(vnode);
+  }
+  function popWarningContext() {
+    stack$1.pop();
+  }
+  function warn$1(msg, ...args) {
+    pauseTracking();
+    const instance = stack$1.length ? stack$1[stack$1.length - 1].component : null;
+    const appWarnHandler = instance && instance.appContext.config.warnHandler;
+    const trace = getComponentTrace();
+    if (appWarnHandler) {
+      callWithErrorHandling(
+        appWarnHandler,
+        instance,
+        11,
+        [
+          msg + args.join(""),
+          instance && instance.proxy,
+          trace.map(
+            ({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`
+          ).join("\n"),
+          trace
+        ]
+      );
+    } else {
+      const warnArgs = [`[Vue warn]: ${msg}`, ...args];
+      if (trace.length && // avoid spamming console during tests
+      true) {
+        warnArgs.push(`
+`, ...formatTrace(trace));
+      }
+      console.warn(...warnArgs);
+    }
+    resetTracking();
+  }
+  function getComponentTrace() {
+    let currentVNode = stack$1[stack$1.length - 1];
+    if (!currentVNode) {
+      return [];
+    }
+    const normalizedStack = [];
+    while (currentVNode) {
+      const last = normalizedStack[0];
+      if (last && last.vnode === currentVNode) {
+        last.recurseCount++;
+      } else {
+        normalizedStack.push({
+          vnode: currentVNode,
+          recurseCount: 0
+        });
+      }
+      const parentInstance = currentVNode.component && currentVNode.component.parent;
+      currentVNode = parentInstance && parentInstance.vnode;
+    }
+    return normalizedStack;
+  }
+  function formatTrace(trace) {
+    const logs = [];
+    trace.forEach((entry, i) => {
+      logs.push(...i === 0 ? [] : [`
+`], ...formatTraceEntry(entry));
+    });
+    return logs;
+  }
+  function formatTraceEntry({ vnode, recurseCount }) {
+    const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;
+    const isRoot = vnode.component ? vnode.component.parent == null : false;
+    const open = ` at <${formatComponentName(
+    vnode.component,
+    vnode.type,
+    isRoot
+  )}`;
+    const close = `>` + postfix;
+    return vnode.props ? [open, ...formatProps(vnode.props), close] : [open + close];
+  }
+  function formatProps(props) {
+    const res = [];
+    const keys = Object.keys(props);
+    keys.slice(0, 3).forEach((key) => {
+      res.push(...formatProp(key, props[key]));
+    });
+    if (keys.length > 3) {
+      res.push(` ...`);
+    }
+    return res;
+  }
+  function formatProp(key, value, raw) {
+    if (isString(value)) {
+      value = JSON.stringify(value);
+      return raw ? value : [`${key}=${value}`];
+    } else if (typeof value === "number" || typeof value === "boolean" || value == null) {
+      return raw ? value : [`${key}=${value}`];
+    } else if (isRef(value)) {
+      value = formatProp(key, toRaw(value.value), true);
+      return raw ? value : [`${key}=Ref<`, value, `>`];
+    } else if (isFunction(value)) {
+      return [`${key}=fn${value.name ? `<${value.name}>` : ``}`];
+    } else {
+      value = toRaw(value);
+      return raw ? value : [`${key}=`, value];
+    }
+  }
+  function assertNumber(val, type) {
+    if (val === void 0) {
+      return;
+    } else if (typeof val !== "number") {
+      warn$1(`${type} is not a valid number - got ${JSON.stringify(val)}.`);
+    } else if (isNaN(val)) {
+      warn$1(`${type} is NaN - the duration expression might be incorrect.`);
+    }
+  }
+
+  const ErrorCodes = {
+    "SETUP_FUNCTION": 0,
+    "0": "SETUP_FUNCTION",
+    "RENDER_FUNCTION": 1,
+    "1": "RENDER_FUNCTION",
+    "WATCH_GETTER": 2,
+    "2": "WATCH_GETTER",
+    "WATCH_CALLBACK": 3,
+    "3": "WATCH_CALLBACK",
+    "WATCH_CLEANUP": 4,
+    "4": "WATCH_CLEANUP",
+    "NATIVE_EVENT_HANDLER": 5,
+    "5": "NATIVE_EVENT_HANDLER",
+    "COMPONENT_EVENT_HANDLER": 6,
+    "6": "COMPONENT_EVENT_HANDLER",
+    "VNODE_HOOK": 7,
+    "7": "VNODE_HOOK",
+    "DIRECTIVE_HOOK": 8,
+    "8": "DIRECTIVE_HOOK",
+    "TRANSITION_HOOK": 9,
+    "9": "TRANSITION_HOOK",
+    "APP_ERROR_HANDLER": 10,
+    "10": "APP_ERROR_HANDLER",
+    "APP_WARN_HANDLER": 11,
+    "11": "APP_WARN_HANDLER",
+    "FUNCTION_REF": 12,
+    "12": "FUNCTION_REF",
+    "ASYNC_COMPONENT_LOADER": 13,
+    "13": "ASYNC_COMPONENT_LOADER",
+    "SCHEDULER": 14,
+    "14": "SCHEDULER"
+  };
+  const ErrorTypeStrings$1 = {
+    ["sp"]: "serverPrefetch hook",
+    ["bc"]: "beforeCreate hook",
+    ["c"]: "created hook",
+    ["bm"]: "beforeMount hook",
+    ["m"]: "mounted hook",
+    ["bu"]: "beforeUpdate hook",
+    ["u"]: "updated",
+    ["bum"]: "beforeUnmount hook",
+    ["um"]: "unmounted hook",
+    ["a"]: "activated hook",
+    ["da"]: "deactivated hook",
+    ["ec"]: "errorCaptured hook",
+    ["rtc"]: "renderTracked hook",
+    ["rtg"]: "renderTriggered hook",
+    [0]: "setup function",
+    [1]: "render function",
+    [2]: "watcher getter",
+    [3]: "watcher callback",
+    [4]: "watcher cleanup function",
+    [5]: "native event handler",
+    [6]: "component event handler",
+    [7]: "vnode hook",
+    [8]: "directive hook",
+    [9]: "transition hook",
+    [10]: "app errorHandler",
+    [11]: "app warnHandler",
+    [12]: "ref function",
+    [13]: "async component loader",
+    [14]: "scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core ."
+  };
+  function callWithErrorHandling(fn, instance, type, args) {
+    let res;
+    try {
+      res = args ? fn(...args) : fn();
+    } catch (err) {
+      handleError(err, instance, type);
+    }
+    return res;
+  }
+  function callWithAsyncErrorHandling(fn, instance, type, args) {
+    if (isFunction(fn)) {
+      const res = callWithErrorHandling(fn, instance, type, args);
+      if (res && isPromise(res)) {
+        res.catch((err) => {
+          handleError(err, instance, type);
+        });
+      }
+      return res;
+    }
+    const values = [];
+    for (let i = 0; i < fn.length; i++) {
+      values.push(callWithAsyncErrorHandling(fn[i], instance, type, args));
+    }
+    return values;
+  }
+  function handleError(err, instance, type, throwInDev = true) {
+    const contextVNode = instance ? instance.vnode : null;
+    if (instance) {
+      let cur = instance.parent;
+      const exposedInstance = instance.proxy;
+      const errorInfo = ErrorTypeStrings$1[type] ;
+      while (cur) {
+        const errorCapturedHooks = cur.ec;
+        if (errorCapturedHooks) {
+          for (let i = 0; i < errorCapturedHooks.length; i++) {
+            if (errorCapturedHooks[i](err, exposedInstance, errorInfo) === false) {
+              return;
+            }
+          }
+        }
+        cur = cur.parent;
+      }
+      const appErrorHandler = instance.appContext.config.errorHandler;
+      if (appErrorHandler) {
+        callWithErrorHandling(
+          appErrorHandler,
+          null,
+          10,
+          [err, exposedInstance, errorInfo]
+        );
+        return;
+      }
+    }
+    logError(err, type, contextVNode, throwInDev);
+  }
+  function logError(err, type, contextVNode, throwInDev = true) {
+    {
+      const info = ErrorTypeStrings$1[type];
+      if (contextVNode) {
+        pushWarningContext(contextVNode);
+      }
+      warn$1(`Unhandled error${info ? ` during execution of ${info}` : ``}`);
+      if (contextVNode) {
+        popWarningContext();
+      }
+      if (throwInDev) {
+        throw err;
+      } else {
+        console.error(err);
+      }
+    }
+  }
+
+  let isFlushing = false;
+  let isFlushPending = false;
+  const queue = [];
+  let flushIndex = 0;
+  const pendingPostFlushCbs = [];
+  let activePostFlushCbs = null;
+  let postFlushIndex = 0;
+  const resolvedPromise = /* @__PURE__ */ Promise.resolve();
+  let currentFlushPromise = null;
+  const RECURSION_LIMIT = 100;
+  function nextTick(fn) {
+    const p = currentFlushPromise || resolvedPromise;
+    return fn ? p.then(this ? fn.bind(this) : fn) : p;
+  }
+  function findInsertionIndex(id) {
+    let start = flushIndex + 1;
+    let end = queue.length;
+    while (start < end) {
+      const middle = start + end >>> 1;
+      const middleJob = queue[middle];
+      const middleJobId = getId(middleJob);
+      if (middleJobId < id || middleJobId === id && middleJob.pre) {
+        start = middle + 1;
+      } else {
+        end = middle;
+      }
+    }
+    return start;
+  }
+  function queueJob(job) {
+    if (!queue.length || !queue.includes(
+      job,
+      isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
+    )) {
+      if (job.id == null) {
+        queue.push(job);
+      } else {
+        queue.splice(findInsertionIndex(job.id), 0, job);
+      }
+      queueFlush();
+    }
+  }
+  function queueFlush() {
+    if (!isFlushing && !isFlushPending) {
+      isFlushPending = true;
+      currentFlushPromise = resolvedPromise.then(flushJobs);
+    }
+  }
+  function invalidateJob(job) {
+    const i = queue.indexOf(job);
+    if (i > flushIndex) {
+      queue.splice(i, 1);
+    }
+  }
+  function queuePostFlushCb(cb) {
+    if (!isArray(cb)) {
+      if (!activePostFlushCbs || !activePostFlushCbs.includes(
+        cb,
+        cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex
+      )) {
+        pendingPostFlushCbs.push(cb);
+      }
+    } else {
+      pendingPostFlushCbs.push(...cb);
+    }
+    queueFlush();
+  }
+  function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
+    {
+      seen = seen || /* @__PURE__ */ new Map();
+    }
+    for (; i < queue.length; i++) {
+      const cb = queue[i];
+      if (cb && cb.pre) {
+        if (instance && cb.id !== instance.uid) {
+          continue;
+        }
+        if (checkRecursiveUpdates(seen, cb)) {
+          continue;
+        }
+        queue.splice(i, 1);
+        i--;
+        cb();
+      }
+    }
+  }
+  function flushPostFlushCbs(seen) {
+    if (pendingPostFlushCbs.length) {
+      const deduped = [...new Set(pendingPostFlushCbs)].sort(
+        (a, b) => getId(a) - getId(b)
+      );
+      pendingPostFlushCbs.length = 0;
+      if (activePostFlushCbs) {
+        activePostFlushCbs.push(...deduped);
+        return;
+      }
+      activePostFlushCbs = deduped;
+      {
+        seen = seen || /* @__PURE__ */ new Map();
+      }
+      for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) {
+        if (checkRecursiveUpdates(seen, activePostFlushCbs[postFlushIndex])) {
+          continue;
+        }
+        activePostFlushCbs[postFlushIndex]();
+      }
+      activePostFlushCbs = null;
+      postFlushIndex = 0;
+    }
+  }
+  const getId = (job) => job.id == null ? Infinity : job.id;
+  const comparator = (a, b) => {
+    const diff = getId(a) - getId(b);
+    if (diff === 0) {
+      if (a.pre && !b.pre)
+        return -1;
+      if (b.pre && !a.pre)
+        return 1;
+    }
+    return diff;
+  };
+  function flushJobs(seen) {
+    isFlushPending = false;
+    isFlushing = true;
+    {
+      seen = seen || /* @__PURE__ */ new Map();
+    }
+    queue.sort(comparator);
+    const check = (job) => checkRecursiveUpdates(seen, job) ;
+    try {
+      for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
+        const job = queue[flushIndex];
+        if (job && job.active !== false) {
+          if (check(job)) {
+            continue;
+          }
+          callWithErrorHandling(job, null, 14);
+        }
+      }
+    } finally {
+      flushIndex = 0;
+      queue.length = 0;
+      flushPostFlushCbs(seen);
+      isFlushing = false;
+      currentFlushPromise = null;
+      if (queue.length || pendingPostFlushCbs.length) {
+        flushJobs(seen);
+      }
+    }
+  }
+  function checkRecursiveUpdates(seen, fn) {
+    if (!seen.has(fn)) {
+      seen.set(fn, 1);
+    } else {
+      const count = seen.get(fn);
+      if (count > RECURSION_LIMIT) {
+        const instance = fn.ownerInstance;
+        const componentName = instance && getComponentName(instance.type);
+        handleError(
+          `Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,
+          null,
+          10
+        );
+        return true;
+      } else {
+        seen.set(fn, count + 1);
+      }
+    }
+  }
+
+  let isHmrUpdating = false;
+  const hmrDirtyComponents = /* @__PURE__ */ new Set();
+  {
+    getGlobalThis().__VUE_HMR_RUNTIME__ = {
+      createRecord: tryWrap(createRecord),
+      rerender: tryWrap(rerender),
+      reload: tryWrap(reload)
+    };
+  }
+  const map = /* @__PURE__ */ new Map();
+  function registerHMR(instance) {
+    const id = instance.type.__hmrId;
+    let record = map.get(id);
+    if (!record) {
+      createRecord(id, instance.type);
+      record = map.get(id);
+    }
+    record.instances.add(instance);
+  }
+  function unregisterHMR(instance) {
+    map.get(instance.type.__hmrId).instances.delete(instance);
+  }
+  function createRecord(id, initialDef) {
+    if (map.has(id)) {
+      return false;
+    }
+    map.set(id, {
+      initialDef: normalizeClassComponent(initialDef),
+      instances: /* @__PURE__ */ new Set()
+    });
+    return true;
+  }
+  function normalizeClassComponent(component) {
+    return isClassComponent(component) ? component.__vccOpts : component;
+  }
+  function rerender(id, newRender) {
+    const record = map.get(id);
+    if (!record) {
+      return;
+    }
+    record.initialDef.render = newRender;
+    [...record.instances].forEach((instance) => {
+      if (newRender) {
+        instance.render = newRender;
+        normalizeClassComponent(instance.type).render = newRender;
+      }
+      instance.renderCache = [];
+      isHmrUpdating = true;
+      instance.effect.dirty = true;
+      instance.update();
+      isHmrUpdating = false;
+    });
+  }
+  function reload(id, newComp) {
+    const record = map.get(id);
+    if (!record)
+      return;
+    newComp = normalizeClassComponent(newComp);
+    updateComponentDef(record.initialDef, newComp);
+    const instances = [...record.instances];
+    for (const instance of instances) {
+      const oldComp = normalizeClassComponent(instance.type);
+      if (!hmrDirtyComponents.has(oldComp)) {
+        if (oldComp !== record.initialDef) {
+          updateComponentDef(oldComp, newComp);
+        }
+        hmrDirtyComponents.add(oldComp);
+      }
+      instance.appContext.propsCache.delete(instance.type);
+      instance.appContext.emitsCache.delete(instance.type);
+      instance.appContext.optionsCache.delete(instance.type);
+      if (instance.ceReload) {
+        hmrDirtyComponents.add(oldComp);
+        instance.ceReload(newComp.styles);
+        hmrDirtyComponents.delete(oldComp);
+      } else if (instance.parent) {
+        instance.parent.effect.dirty = true;
+        queueJob(instance.parent.update);
+      } else if (instance.appContext.reload) {
+        instance.appContext.reload();
+      } else if (typeof window !== "undefined") {
+        window.location.reload();
+      } else {
+        console.warn(
+          "[HMR] Root or manually mounted instance modified. Full reload required."
+        );
+      }
+    }
+    queuePostFlushCb(() => {
+      for (const instance of instances) {
+        hmrDirtyComponents.delete(
+          normalizeClassComponent(instance.type)
+        );
+      }
+    });
+  }
+  function updateComponentDef(oldComp, newComp) {
+    extend(oldComp, newComp);
+    for (const key in oldComp) {
+      if (key !== "__file" && !(key in newComp)) {
+        delete oldComp[key];
+      }
+    }
+  }
+  function tryWrap(fn) {
+    return (id, arg) => {
+      try {
+        return fn(id, arg);
+      } catch (e) {
+        console.error(e);
+        console.warn(
+          `[HMR] Something went wrong during Vue component hot-reload. Full reload required.`
+        );
+      }
+    };
+  }
+
+  let devtools$1;
+  let buffer = [];
+  let devtoolsNotInstalled = false;
+  function emit$1(event, ...args) {
+    if (devtools$1) {
+      devtools$1.emit(event, ...args);
+    } else if (!devtoolsNotInstalled) {
+      buffer.push({ event, args });
+    }
+  }
+  function setDevtoolsHook$1(hook, target) {
+    var _a, _b;
+    devtools$1 = hook;
+    if (devtools$1) {
+      devtools$1.enabled = true;
+      buffer.forEach(({ event, args }) => devtools$1.emit(event, ...args));
+      buffer = [];
+    } else if (
+      // handle late devtools injection - only do this if we are in an actual
+      // browser environment to avoid the timer handle stalling test runner exit
+      // (#4815)
+      typeof window !== "undefined" && // some envs mock window but not fully
+      window.HTMLElement && // also exclude jsdom
+      !((_b = (_a = window.navigator) == null ? void 0 : _a.userAgent) == null ? void 0 : _b.includes("jsdom"))
+    ) {
+      const replay = target.__VUE_DEVTOOLS_HOOK_REPLAY__ = target.__VUE_DEVTOOLS_HOOK_REPLAY__ || [];
+      replay.push((newHook) => {
+        setDevtoolsHook$1(newHook, target);
+      });
+      setTimeout(() => {
+        if (!devtools$1) {
+          target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null;
+          devtoolsNotInstalled = true;
+          buffer = [];
+        }
+      }, 3e3);
+    } else {
+      devtoolsNotInstalled = true;
+      buffer = [];
+    }
+  }
+  function devtoolsInitApp(app, version) {
+    emit$1("app:init" /* APP_INIT */, app, version, {
+      Fragment,
+      Text,
+      Comment,
+      Static
+    });
+  }
+  function devtoolsUnmountApp(app) {
+    emit$1("app:unmount" /* APP_UNMOUNT */, app);
+  }
+  const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
+    "component:added" /* COMPONENT_ADDED */
+  );
+  const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */);
+  const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
+    "component:removed" /* COMPONENT_REMOVED */
+  );
+  const devtoolsComponentRemoved = (component) => {
+    if (devtools$1 && typeof devtools$1.cleanupBuffer === "function" && // remove the component if it wasn't buffered
+    !devtools$1.cleanupBuffer(component)) {
+      _devtoolsComponentRemoved(component);
+    }
+  };
+  function createDevtoolsComponentHook(hook) {
+    return (component) => {
+      emit$1(
+        hook,
+        component.appContext.app,
+        component.uid,
+        component.parent ? component.parent.uid : void 0,
+        component
+      );
+    };
+  }
+  const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook(
+    "perf:start" /* PERFORMANCE_START */
+  );
+  const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook(
+    "perf:end" /* PERFORMANCE_END */
+  );
+  function createDevtoolsPerformanceHook(hook) {
+    return (component, type, time) => {
+      emit$1(hook, component.appContext.app, component.uid, component, type, time);
+    };
+  }
+  function devtoolsComponentEmit(component, event, params) {
+    emit$1(
+      "component:emit" /* COMPONENT_EMIT */,
+      component.appContext.app,
+      component,
+      event,
+      params
+    );
+  }
+
+  function emit(instance, event, ...rawArgs) {
+    if (instance.isUnmounted)
+      return;
+    const props = instance.vnode.props || EMPTY_OBJ;
+    {
+      const {
+        emitsOptions,
+        propsOptions: [propsOptions]
+      } = instance;
+      if (emitsOptions) {
+        if (!(event in emitsOptions) && true) {
+          if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
+            warn$1(
+              `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
+            );
+          }
+        } else {
+          const validator = emitsOptions[event];
+          if (isFunction(validator)) {
+            const isValid = validator(...rawArgs);
+            if (!isValid) {
+              warn$1(
+                `Invalid event arguments: event validation failed for event "${event}".`
+              );
+            }
+          }
+        }
+      }
+    }
+    let args = rawArgs;
+    const isModelListener = event.startsWith("update:");
+    const modelArg = isModelListener && event.slice(7);
+    if (modelArg && modelArg in props) {
+      const modifiersKey = `${modelArg === "modelValue" ? "model" : modelArg}Modifiers`;
+      const { number, trim } = props[modifiersKey] || EMPTY_OBJ;
+      if (trim) {
+        args = rawArgs.map((a) => isString(a) ? a.trim() : a);
+      }
+      if (number) {
+        args = rawArgs.map(looseToNumber);
+      }
+    }
+    {
+      devtoolsComponentEmit(instance, event, args);
+    }
+    {
+      const lowerCaseEvent = event.toLowerCase();
+      if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
+        warn$1(
+          `Event "${lowerCaseEvent}" is emitted in component ${formatComponentName(
+          instance,
+          instance.type
+        )} but the handler is registered for "${event}". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "${hyphenate(
+          event
+        )}" instead of "${event}".`
+        );
+      }
+    }
+    let handlerName;
+    let handler = props[handlerName = toHandlerKey(event)] || // also try camelCase event handler (#2249)
+    props[handlerName = toHandlerKey(camelize(event))];
+    if (!handler && isModelListener) {
+      handler = props[handlerName = toHandlerKey(hyphenate(event))];
+    }
+    if (handler) {
+      callWithAsyncErrorHandling(
+        handler,
+        instance,
+        6,
+        args
+      );
+    }
+    const onceHandler = props[handlerName + `Once`];
+    if (onceHandler) {
+      if (!instance.emitted) {
+        instance.emitted = {};
+      } else if (instance.emitted[handlerName]) {
+        return;
+      }
+      instance.emitted[handlerName] = true;
+      callWithAsyncErrorHandling(
+        onceHandler,
+        instance,
+        6,
+        args
+      );
+    }
+  }
+  function normalizeEmitsOptions(comp, appContext, asMixin = false) {
+    const cache = appContext.emitsCache;
+    const cached = cache.get(comp);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const raw = comp.emits;
+    let normalized = {};
+    let hasExtends = false;
+    if (!isFunction(comp)) {
+      const extendEmits = (raw2) => {
+        const normalizedFromExtend = normalizeEmitsOptions(raw2, appContext, true);
+        if (normalizedFromExtend) {
+          hasExtends = true;
+          extend(normalized, normalizedFromExtend);
+        }
+      };
+      if (!asMixin && appContext.mixins.length) {
+        appContext.mixins.forEach(extendEmits);
+      }
+      if (comp.extends) {
+        extendEmits(comp.extends);
+      }
+      if (comp.mixins) {
+        comp.mixins.forEach(extendEmits);
+      }
+    }
+    if (!raw && !hasExtends) {
+      if (isObject(comp)) {
+        cache.set(comp, null);
+      }
+      return null;
+    }
+    if (isArray(raw)) {
+      raw.forEach((key) => normalized[key] = null);
+    } else {
+      extend(normalized, raw);
+    }
+    if (isObject(comp)) {
+      cache.set(comp, normalized);
+    }
+    return normalized;
+  }
+  function isEmitListener(options, key) {
+    if (!options || !isOn(key)) {
+      return false;
+    }
+    key = key.slice(2).replace(/Once$/, "");
+    return hasOwn(options, key[0].toLowerCase() + key.slice(1)) || hasOwn(options, hyphenate(key)) || hasOwn(options, key);
+  }
+
+  let currentRenderingInstance = null;
+  let currentScopeId = null;
+  function setCurrentRenderingInstance(instance) {
+    const prev = currentRenderingInstance;
+    currentRenderingInstance = instance;
+    currentScopeId = instance && instance.type.__scopeId || null;
+    return prev;
+  }
+  function pushScopeId(id) {
+    currentScopeId = id;
+  }
+  function popScopeId() {
+    currentScopeId = null;
+  }
+  const withScopeId = (_id) => withCtx;
+  function withCtx(fn, ctx = currentRenderingInstance, isNonScopedSlot) {
+    if (!ctx)
+      return fn;
+    if (fn._n) {
+      return fn;
+    }
+    const renderFnWithContext = (...args) => {
+      if (renderFnWithContext._d) {
+        setBlockTracking(-1);
+      }
+      const prevInstance = setCurrentRenderingInstance(ctx);
+      let res;
+      try {
+        res = fn(...args);
+      } finally {
+        setCurrentRenderingInstance(prevInstance);
+        if (renderFnWithContext._d) {
+          setBlockTracking(1);
+        }
+      }
+      {
+        devtoolsComponentUpdated(ctx);
+      }
+      return res;
+    };
+    renderFnWithContext._n = true;
+    renderFnWithContext._c = true;
+    renderFnWithContext._d = true;
+    return renderFnWithContext;
+  }
+
+  let accessedAttrs = false;
+  function markAttrsAccessed() {
+    accessedAttrs = true;
+  }
+  function renderComponentRoot(instance) {
+    const {
+      type: Component,
+      vnode,
+      proxy,
+      withProxy,
+      props,
+      propsOptions: [propsOptions],
+      slots,
+      attrs,
+      emit,
+      render,
+      renderCache,
+      data,
+      setupState,
+      ctx,
+      inheritAttrs
+    } = instance;
+    let result;
+    let fallthroughAttrs;
+    const prev = setCurrentRenderingInstance(instance);
+    {
+      accessedAttrs = false;
+    }
+    try {
+      if (vnode.shapeFlag & 4) {
+        const proxyToUse = withProxy || proxy;
+        const thisProxy = setupState.__isScriptSetup ? new Proxy(proxyToUse, {
+          get(target, key, receiver) {
+            warn$1(
+              `Property '${String(
+              key
+            )}' was accessed via 'this'. Avoid using 'this' in templates.`
+            );
+            return Reflect.get(target, key, receiver);
+          }
+        }) : proxyToUse;
+        result = normalizeVNode(
+          render.call(
+            thisProxy,
+            proxyToUse,
+            renderCache,
+            props,
+            setupState,
+            data,
+            ctx
+          )
+        );
+        fallthroughAttrs = attrs;
+      } else {
+        const render2 = Component;
+        if (attrs === props) {
+          markAttrsAccessed();
+        }
+        result = normalizeVNode(
+          render2.length > 1 ? render2(
+            props,
+            true ? {
+              get attrs() {
+                markAttrsAccessed();
+                return attrs;
+              },
+              slots,
+              emit
+            } : { attrs, slots, emit }
+          ) : render2(
+            props,
+            null
+            /* we know it doesn't need it */
+          )
+        );
+        fallthroughAttrs = Component.props ? attrs : getFunctionalFallthrough(attrs);
+      }
+    } catch (err) {
+      blockStack.length = 0;
+      handleError(err, instance, 1);
+      result = createVNode(Comment);
+    }
+    let root = result;
+    let setRoot = void 0;
+    if (result.patchFlag > 0 && result.patchFlag & 2048) {
+      [root, setRoot] = getChildRoot(result);
+    }
+    if (fallthroughAttrs && inheritAttrs !== false) {
+      const keys = Object.keys(fallthroughAttrs);
+      const { shapeFlag } = root;
+      if (keys.length) {
+        if (shapeFlag & (1 | 6)) {
+          if (propsOptions && keys.some(isModelListener)) {
+            fallthroughAttrs = filterModelListeners(
+              fallthroughAttrs,
+              propsOptions
+            );
+          }
+          root = cloneVNode(root, fallthroughAttrs);
+        } else if (!accessedAttrs && root.type !== Comment) {
+          const allAttrs = Object.keys(attrs);
+          const eventAttrs = [];
+          const extraAttrs = [];
+          for (let i = 0, l = allAttrs.length; i < l; i++) {
+            const key = allAttrs[i];
+            if (isOn(key)) {
+              if (!isModelListener(key)) {
+                eventAttrs.push(key[2].toLowerCase() + key.slice(3));
+              }
+            } else {
+              extraAttrs.push(key);
+            }
+          }
+          if (extraAttrs.length) {
+            warn$1(
+              `Extraneous non-props attributes (${extraAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.`
+            );
+          }
+          if (eventAttrs.length) {
+            warn$1(
+              `Extraneous non-emits event listeners (${eventAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.`
+            );
+          }
+        }
+      }
+    }
+    if (vnode.dirs) {
+      if (!isElementRoot(root)) {
+        warn$1(
+          `Runtime directive used on component with non-element root node. The directives will not function as intended.`
+        );
+      }
+      root = cloneVNode(root);
+      root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs;
+    }
+    if (vnode.transition) {
+      if (!isElementRoot(root)) {
+        warn$1(
+          `Component inside <Transition> renders non-element root node that cannot be animated.`
+        );
+      }
+      root.transition = vnode.transition;
+    }
+    if (setRoot) {
+      setRoot(root);
+    } else {
+      result = root;
+    }
+    setCurrentRenderingInstance(prev);
+    return result;
+  }
+  const getChildRoot = (vnode) => {
+    const rawChildren = vnode.children;
+    const dynamicChildren = vnode.dynamicChildren;
+    const childRoot = filterSingleRoot(rawChildren, false);
+    if (!childRoot) {
+      return [vnode, void 0];
+    } else if (childRoot.patchFlag > 0 && childRoot.patchFlag & 2048) {
+      return getChildRoot(childRoot);
+    }
+    const index = rawChildren.indexOf(childRoot);
+    const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1;
+    const setRoot = (updatedRoot) => {
+      rawChildren[index] = updatedRoot;
+      if (dynamicChildren) {
+        if (dynamicIndex > -1) {
+          dynamicChildren[dynamicIndex] = updatedRoot;
+        } else if (updatedRoot.patchFlag > 0) {
+          vnode.dynamicChildren = [...dynamicChildren, updatedRoot];
+        }
+      }
+    };
+    return [normalizeVNode(childRoot), setRoot];
+  };
+  function filterSingleRoot(children, recurse = true) {
+    let singleRoot;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (isVNode(child)) {
+        if (child.type !== Comment || child.children === "v-if") {
+          if (singleRoot) {
+            return;
+          } else {
+            singleRoot = child;
+            if (recurse && singleRoot.patchFlag > 0 && singleRoot.patchFlag & 2048) {
+              return filterSingleRoot(singleRoot.children);
+            }
+          }
+        }
+      } else {
+        return;
+      }
+    }
+    return singleRoot;
+  }
+  const getFunctionalFallthrough = (attrs) => {
+    let res;
+    for (const key in attrs) {
+      if (key === "class" || key === "style" || isOn(key)) {
+        (res || (res = {}))[key] = attrs[key];
+      }
+    }
+    return res;
+  };
+  const filterModelListeners = (attrs, props) => {
+    const res = {};
+    for (const key in attrs) {
+      if (!isModelListener(key) || !(key.slice(9) in props)) {
+        res[key] = attrs[key];
+      }
+    }
+    return res;
+  };
+  const isElementRoot = (vnode) => {
+    return vnode.shapeFlag & (6 | 1) || vnode.type === Comment;
+  };
+  function shouldUpdateComponent(prevVNode, nextVNode, optimized) {
+    const { props: prevProps, children: prevChildren, component } = prevVNode;
+    const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;
+    const emits = component.emitsOptions;
+    if ((prevChildren || nextChildren) && isHmrUpdating) {
+      return true;
+    }
+    if (nextVNode.dirs || nextVNode.transition) {
+      return true;
+    }
+    if (optimized && patchFlag >= 0) {
+      if (patchFlag & 1024) {
+        return true;
+      }
+      if (patchFlag & 16) {
+        if (!prevProps) {
+          return !!nextProps;
+        }
+        return hasPropsChanged(prevProps, nextProps, emits);
+      } else if (patchFlag & 8) {
+        const dynamicProps = nextVNode.dynamicProps;
+        for (let i = 0; i < dynamicProps.length; i++) {
+          const key = dynamicProps[i];
+          if (nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)) {
+            return true;
+          }
+        }
+      }
+    } else {
+      if (prevChildren || nextChildren) {
+        if (!nextChildren || !nextChildren.$stable) {
+          return true;
+        }
+      }
+      if (prevProps === nextProps) {
+        return false;
+      }
+      if (!prevProps) {
+        return !!nextProps;
+      }
+      if (!nextProps) {
+        return true;
+      }
+      return hasPropsChanged(prevProps, nextProps, emits);
+    }
+    return false;
+  }
+  function hasPropsChanged(prevProps, nextProps, emitsOptions) {
+    const nextKeys = Object.keys(nextProps);
+    if (nextKeys.length !== Object.keys(prevProps).length) {
+      return true;
+    }
+    for (let i = 0; i < nextKeys.length; i++) {
+      const key = nextKeys[i];
+      if (nextProps[key] !== prevProps[key] && !isEmitListener(emitsOptions, key)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  function updateHOCHostEl({ vnode, parent }, el) {
+    while (parent) {
+      const root = parent.subTree;
+      if (root.suspense && root.suspense.activeBranch === vnode) {
+        root.el = vnode.el;
+      }
+      if (root === vnode) {
+        (vnode = parent.vnode).el = el;
+        parent = parent.parent;
+      } else {
+        break;
+      }
+    }
+  }
+
+  const COMPONENTS = "components";
+  const DIRECTIVES = "directives";
+  function resolveComponent(name, maybeSelfReference) {
+    return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
+  }
+  const NULL_DYNAMIC_COMPONENT = Symbol.for("v-ndc");
+  function resolveDynamicComponent(component) {
+    if (isString(component)) {
+      return resolveAsset(COMPONENTS, component, false) || component;
+    } else {
+      return component || NULL_DYNAMIC_COMPONENT;
+    }
+  }
+  function resolveDirective(name) {
+    return resolveAsset(DIRECTIVES, name);
+  }
+  function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
+    const instance = currentRenderingInstance || currentInstance;
+    if (instance) {
+      const Component = instance.type;
+      if (type === COMPONENTS) {
+        const selfName = getComponentName(
+          Component,
+          false
+        );
+        if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize(camelize(name)))) {
+          return Component;
+        }
+      }
+      const res = (
+        // local registration
+        // check instance[type] first which is resolved for options API
+        resolve(instance[type] || Component[type], name) || // global registration
+        resolve(instance.appContext[type], name)
+      );
+      if (!res && maybeSelfReference) {
+        return Component;
+      }
+      if (warnMissing && !res) {
+        const extra = type === COMPONENTS ? `
+If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.` : ``;
+        warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
+      }
+      return res;
+    } else {
+      warn$1(
+        `resolve${capitalize(type.slice(0, -1))} can only be used in render() or setup().`
+      );
+    }
+  }
+  function resolve(registry, name) {
+    return registry && (registry[name] || registry[camelize(name)] || registry[capitalize(camelize(name))]);
+  }
+
+  const isSuspense = (type) => type.__isSuspense;
+  let suspenseId = 0;
+  const SuspenseImpl = {
+    name: "Suspense",
+    // In order to make Suspense tree-shakable, we need to avoid importing it
+    // directly in the renderer. The renderer checks for the __isSuspense flag
+    // on a vnode's type and calls the `process` method, passing in renderer
+    // internals.
+    __isSuspense: true,
+    process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals) {
+      if (n1 == null) {
+        mountSuspense(
+          n2,
+          container,
+          anchor,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds,
+          optimized,
+          rendererInternals
+        );
+      } else {
+        if (parentSuspense && parentSuspense.deps > 0) {
+          n2.suspense = n1.suspense;
+          return;
+        }
+        patchSuspense(
+          n1,
+          n2,
+          container,
+          anchor,
+          parentComponent,
+          namespace,
+          slotScopeIds,
+          optimized,
+          rendererInternals
+        );
+      }
+    },
+    hydrate: hydrateSuspense,
+    create: createSuspenseBoundary,
+    normalize: normalizeSuspenseChildren
+  };
+  const Suspense = SuspenseImpl ;
+  function triggerEvent(vnode, name) {
+    const eventListener = vnode.props && vnode.props[name];
+    if (isFunction(eventListener)) {
+      eventListener();
+    }
+  }
+  function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals) {
+    const {
+      p: patch,
+      o: { createElement }
+    } = rendererInternals;
+    const hiddenContainer = createElement("div");
+    const suspense = vnode.suspense = createSuspenseBoundary(
+      vnode,
+      parentSuspense,
+      parentComponent,
+      container,
+      hiddenContainer,
+      anchor,
+      namespace,
+      slotScopeIds,
+      optimized,
+      rendererInternals
+    );
+    patch(
+      null,
+      suspense.pendingBranch = vnode.ssContent,
+      hiddenContainer,
+      null,
+      parentComponent,
+      suspense,
+      namespace,
+      slotScopeIds
+    );
+    if (suspense.deps > 0) {
+      triggerEvent(vnode, "onPending");
+      triggerEvent(vnode, "onFallback");
+      patch(
+        null,
+        vnode.ssFallback,
+        container,
+        anchor,
+        parentComponent,
+        null,
+        // fallback tree will not have suspense context
+        namespace,
+        slotScopeIds
+      );
+      setActiveBranch(suspense, vnode.ssFallback);
+    } else {
+      suspense.resolve(false, true);
+    }
+  }
+  function patchSuspense(n1, n2, container, anchor, parentComponent, namespace, slotScopeIds, optimized, { p: patch, um: unmount, o: { createElement } }) {
+    const suspense = n2.suspense = n1.suspense;
+    suspense.vnode = n2;
+    n2.el = n1.el;
+    const newBranch = n2.ssContent;
+    const newFallback = n2.ssFallback;
+    const { activeBranch, pendingBranch, isInFallback, isHydrating } = suspense;
+    if (pendingBranch) {
+      suspense.pendingBranch = newBranch;
+      if (isSameVNodeType(newBranch, pendingBranch)) {
+        patch(
+          pendingBranch,
+          newBranch,
+          suspense.hiddenContainer,
+          null,
+          parentComponent,
+          suspense,
+          namespace,
+          slotScopeIds,
+          optimized
+        );
+        if (suspense.deps <= 0) {
+          suspense.resolve();
+        } else if (isInFallback) {
+          if (!isHydrating) {
+            patch(
+              activeBranch,
+              newFallback,
+              container,
+              anchor,
+              parentComponent,
+              null,
+              // fallback tree will not have suspense context
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+            setActiveBranch(suspense, newFallback);
+          }
+        }
+      } else {
+        suspense.pendingId = suspenseId++;
+        if (isHydrating) {
+          suspense.isHydrating = false;
+          suspense.activeBranch = pendingBranch;
+        } else {
+          unmount(pendingBranch, parentComponent, suspense);
+        }
+        suspense.deps = 0;
+        suspense.effects.length = 0;
+        suspense.hiddenContainer = createElement("div");
+        if (isInFallback) {
+          patch(
+            null,
+            newBranch,
+            suspense.hiddenContainer,
+            null,
+            parentComponent,
+            suspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+          if (suspense.deps <= 0) {
+            suspense.resolve();
+          } else {
+            patch(
+              activeBranch,
+              newFallback,
+              container,
+              anchor,
+              parentComponent,
+              null,
+              // fallback tree will not have suspense context
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+            setActiveBranch(suspense, newFallback);
+          }
+        } else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
+          patch(
+            activeBranch,
+            newBranch,
+            container,
+            anchor,
+            parentComponent,
+            suspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+          suspense.resolve(true);
+        } else {
+          patch(
+            null,
+            newBranch,
+            suspense.hiddenContainer,
+            null,
+            parentComponent,
+            suspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+          if (suspense.deps <= 0) {
+            suspense.resolve();
+          }
+        }
+      }
+    } else {
+      if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
+        patch(
+          activeBranch,
+          newBranch,
+          container,
+          anchor,
+          parentComponent,
+          suspense,
+          namespace,
+          slotScopeIds,
+          optimized
+        );
+        setActiveBranch(suspense, newBranch);
+      } else {
+        triggerEvent(n2, "onPending");
+        suspense.pendingBranch = newBranch;
+        if (newBranch.shapeFlag & 512) {
+          suspense.pendingId = newBranch.component.suspenseId;
+        } else {
+          suspense.pendingId = suspenseId++;
+        }
+        patch(
+          null,
+          newBranch,
+          suspense.hiddenContainer,
+          null,
+          parentComponent,
+          suspense,
+          namespace,
+          slotScopeIds,
+          optimized
+        );
+        if (suspense.deps <= 0) {
+          suspense.resolve();
+        } else {
+          const { timeout, pendingId } = suspense;
+          if (timeout > 0) {
+            setTimeout(() => {
+              if (suspense.pendingId === pendingId) {
+                suspense.fallback(newFallback);
+              }
+            }, timeout);
+          } else if (timeout === 0) {
+            suspense.fallback(newFallback);
+          }
+        }
+      }
+    }
+  }
+  let hasWarned = false;
+  function createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, namespace, slotScopeIds, optimized, rendererInternals, isHydrating = false) {
+    if (!hasWarned) {
+      hasWarned = true;
+      console[console.info ? "info" : "log"](
+        `<Suspense> is an experimental feature and its API will likely change.`
+      );
+    }
+    const {
+      p: patch,
+      m: move,
+      um: unmount,
+      n: next,
+      o: { parentNode, remove }
+    } = rendererInternals;
+    let parentSuspenseId;
+    const isSuspensible = isVNodeSuspensible(vnode);
+    if (isSuspensible) {
+      if (parentSuspense == null ? void 0 : parentSuspense.pendingBranch) {
+        parentSuspenseId = parentSuspense.pendingId;
+        parentSuspense.deps++;
+      }
+    }
+    const timeout = vnode.props ? toNumber(vnode.props.timeout) : void 0;
+    {
+      assertNumber(timeout, `Suspense timeout`);
+    }
+    const initialAnchor = anchor;
+    const suspense = {
+      vnode,
+      parent: parentSuspense,
+      parentComponent,
+      namespace,
+      container,
+      hiddenContainer,
+      deps: 0,
+      pendingId: suspenseId++,
+      timeout: typeof timeout === "number" ? timeout : -1,
+      activeBranch: null,
+      pendingBranch: null,
+      isInFallback: !isHydrating,
+      isHydrating,
+      isUnmounted: false,
+      effects: [],
+      resolve(resume = false, sync = false) {
+        {
+          if (!resume && !suspense.pendingBranch) {
+            throw new Error(
+              `suspense.resolve() is called without a pending branch.`
+            );
+          }
+          if (suspense.isUnmounted) {
+            throw new Error(
+              `suspense.resolve() is called on an already unmounted suspense boundary.`
+            );
+          }
+        }
+        const {
+          vnode: vnode2,
+          activeBranch,
+          pendingBranch,
+          pendingId,
+          effects,
+          parentComponent: parentComponent2,
+          container: container2
+        } = suspense;
+        let delayEnter = false;
+        if (suspense.isHydrating) {
+          suspense.isHydrating = false;
+        } else if (!resume) {
+          delayEnter = activeBranch && pendingBranch.transition && pendingBranch.transition.mode === "out-in";
+          if (delayEnter) {
+            activeBranch.transition.afterLeave = () => {
+              if (pendingId === suspense.pendingId) {
+                move(
+                  pendingBranch,
+                  container2,
+                  anchor === initialAnchor ? next(activeBranch) : anchor,
+                  0
+                );
+                queuePostFlushCb(effects);
+              }
+            };
+          }
+          if (activeBranch) {
+            if (parentNode(activeBranch.el) !== suspense.hiddenContainer) {
+              anchor = next(activeBranch);
+            }
+            unmount(activeBranch, parentComponent2, suspense, true);
+          }
+          if (!delayEnter) {
+            move(pendingBranch, container2, anchor, 0);
+          }
+        }
+        setActiveBranch(suspense, pendingBranch);
+        suspense.pendingBranch = null;
+        suspense.isInFallback = false;
+        let parent = suspense.parent;
+        let hasUnresolvedAncestor = false;
+        while (parent) {
+          if (parent.pendingBranch) {
+            parent.effects.push(...effects);
+            hasUnresolvedAncestor = true;
+            break;
+          }
+          parent = parent.parent;
+        }
+        if (!hasUnresolvedAncestor && !delayEnter) {
+          queuePostFlushCb(effects);
+        }
+        suspense.effects = [];
+        if (isSuspensible) {
+          if (parentSuspense && parentSuspense.pendingBranch && parentSuspenseId === parentSuspense.pendingId) {
+            parentSuspense.deps--;
+            if (parentSuspense.deps === 0 && !sync) {
+              parentSuspense.resolve();
+            }
+          }
+        }
+        triggerEvent(vnode2, "onResolve");
+      },
+      fallback(fallbackVNode) {
+        if (!suspense.pendingBranch) {
+          return;
+        }
+        const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, namespace: namespace2 } = suspense;
+        triggerEvent(vnode2, "onFallback");
+        const anchor2 = next(activeBranch);
+        const mountFallback = () => {
+          if (!suspense.isInFallback) {
+            return;
+          }
+          patch(
+            null,
+            fallbackVNode,
+            container2,
+            anchor2,
+            parentComponent2,
+            null,
+            // fallback tree will not have suspense context
+            namespace2,
+            slotScopeIds,
+            optimized
+          );
+          setActiveBranch(suspense, fallbackVNode);
+        };
+        const delayEnter = fallbackVNode.transition && fallbackVNode.transition.mode === "out-in";
+        if (delayEnter) {
+          activeBranch.transition.afterLeave = mountFallback;
+        }
+        suspense.isInFallback = true;
+        unmount(
+          activeBranch,
+          parentComponent2,
+          null,
+          // no suspense so unmount hooks fire now
+          true
+          // shouldRemove
+        );
+        if (!delayEnter) {
+          mountFallback();
+        }
+      },
+      move(container2, anchor2, type) {
+        suspense.activeBranch && move(suspense.activeBranch, container2, anchor2, type);
+        suspense.container = container2;
+      },
+      next() {
+        return suspense.activeBranch && next(suspense.activeBranch);
+      },
+      registerDep(instance, setupRenderEffect) {
+        const isInPendingSuspense = !!suspense.pendingBranch;
+        if (isInPendingSuspense) {
+          suspense.deps++;
+        }
+        const hydratedEl = instance.vnode.el;
+        instance.asyncDep.catch((err) => {
+          handleError(err, instance, 0);
+        }).then((asyncSetupResult) => {
+          if (instance.isUnmounted || suspense.isUnmounted || suspense.pendingId !== instance.suspenseId) {
+            return;
+          }
+          instance.asyncResolved = true;
+          const { vnode: vnode2 } = instance;
+          {
+            pushWarningContext(vnode2);
+          }
+          handleSetupResult(instance, asyncSetupResult, false);
+          if (hydratedEl) {
+            vnode2.el = hydratedEl;
+          }
+          const placeholder = !hydratedEl && instance.subTree.el;
+          setupRenderEffect(
+            instance,
+            vnode2,
+            // component may have been moved before resolve.
+            // if this is not a hydration, instance.subTree will be the comment
+            // placeholder.
+            parentNode(hydratedEl || instance.subTree.el),
+            // anchor will not be used if this is hydration, so only need to
+            // consider the comment placeholder case.
+            hydratedEl ? null : next(instance.subTree),
+            suspense,
+            namespace,
+            optimized
+          );
+          if (placeholder) {
+            remove(placeholder);
+          }
+          updateHOCHostEl(instance, vnode2.el);
+          {
+            popWarningContext();
+          }
+          if (isInPendingSuspense && --suspense.deps === 0) {
+            suspense.resolve();
+          }
+        });
+      },
+      unmount(parentSuspense2, doRemove) {
+        suspense.isUnmounted = true;
+        if (suspense.activeBranch) {
+          unmount(
+            suspense.activeBranch,
+            parentComponent,
+            parentSuspense2,
+            doRemove
+          );
+        }
+        if (suspense.pendingBranch) {
+          unmount(
+            suspense.pendingBranch,
+            parentComponent,
+            parentSuspense2,
+            doRemove
+          );
+        }
+      }
+    };
+    return suspense;
+  }
+  function hydrateSuspense(node, vnode, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals, hydrateNode) {
+    const suspense = vnode.suspense = createSuspenseBoundary(
+      vnode,
+      parentSuspense,
+      parentComponent,
+      node.parentNode,
+      // eslint-disable-next-line no-restricted-globals
+      document.createElement("div"),
+      null,
+      namespace,
+      slotScopeIds,
+      optimized,
+      rendererInternals,
+      true
+    );
+    const result = hydrateNode(
+      node,
+      suspense.pendingBranch = vnode.ssContent,
+      parentComponent,
+      suspense,
+      slotScopeIds,
+      optimized
+    );
+    if (suspense.deps === 0) {
+      suspense.resolve(false, true);
+    }
+    return result;
+  }
+  function normalizeSuspenseChildren(vnode) {
+    const { shapeFlag, children } = vnode;
+    const isSlotChildren = shapeFlag & 32;
+    vnode.ssContent = normalizeSuspenseSlot(
+      isSlotChildren ? children.default : children
+    );
+    vnode.ssFallback = isSlotChildren ? normalizeSuspenseSlot(children.fallback) : createVNode(Comment);
+  }
+  function normalizeSuspenseSlot(s) {
+    let block;
+    if (isFunction(s)) {
+      const trackBlock = isBlockTreeEnabled && s._c;
+      if (trackBlock) {
+        s._d = false;
+        openBlock();
+      }
+      s = s();
+      if (trackBlock) {
+        s._d = true;
+        block = currentBlock;
+        closeBlock();
+      }
+    }
+    if (isArray(s)) {
+      const singleChild = filterSingleRoot(s);
+      if (!singleChild && s.filter((child) => child !== NULL_DYNAMIC_COMPONENT).length > 0) {
+        warn$1(`<Suspense> slots expect a single root node.`);
+      }
+      s = singleChild;
+    }
+    s = normalizeVNode(s);
+    if (block && !s.dynamicChildren) {
+      s.dynamicChildren = block.filter((c) => c !== s);
+    }
+    return s;
+  }
+  function queueEffectWithSuspense(fn, suspense) {
+    if (suspense && suspense.pendingBranch) {
+      if (isArray(fn)) {
+        suspense.effects.push(...fn);
+      } else {
+        suspense.effects.push(fn);
+      }
+    } else {
+      queuePostFlushCb(fn);
+    }
+  }
+  function setActiveBranch(suspense, branch) {
+    suspense.activeBranch = branch;
+    const { vnode, parentComponent } = suspense;
+    let el = branch.el;
+    while (!el && branch.component) {
+      branch = branch.component.subTree;
+      el = branch.el;
+    }
+    vnode.el = el;
+    if (parentComponent && parentComponent.subTree === vnode) {
+      parentComponent.vnode.el = el;
+      updateHOCHostEl(parentComponent, el);
+    }
+  }
+  function isVNodeSuspensible(vnode) {
+    var _a;
+    return ((_a = vnode.props) == null ? void 0 : _a.suspensible) != null && vnode.props.suspensible !== false;
+  }
+
+  const ssrContextKey = Symbol.for("v-scx");
+  const useSSRContext = () => {
+    {
+      warn$1(`useSSRContext() is not supported in the global build.`);
+    }
+  };
+
+  function watchEffect(effect, options) {
+    return doWatch(effect, null, options);
+  }
+  function watchPostEffect(effect, options) {
+    return doWatch(
+      effect,
+      null,
+      extend({}, options, { flush: "post" }) 
+    );
+  }
+  function watchSyncEffect(effect, options) {
+    return doWatch(
+      effect,
+      null,
+      extend({}, options, { flush: "sync" }) 
+    );
+  }
+  const INITIAL_WATCHER_VALUE = {};
+  function watch(source, cb, options) {
+    if (!isFunction(cb)) {
+      warn$1(
+        `\`watch(fn, options?)\` signature has been moved to a separate API. Use \`watchEffect(fn, options?)\` instead. \`watch\` now only supports \`watch(source, cb, options?) signature.`
+      );
+    }
+    return doWatch(source, cb, options);
+  }
+  function doWatch(source, cb, {
+    immediate,
+    deep,
+    flush,
+    once,
+    onTrack,
+    onTrigger
+  } = EMPTY_OBJ) {
+    if (cb && once) {
+      const _cb = cb;
+      cb = (...args) => {
+        _cb(...args);
+        unwatch();
+      };
+    }
+    if (deep !== void 0 && typeof deep === "number") {
+      warn$1(
+        `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
+      );
+    }
+    if (!cb) {
+      if (immediate !== void 0) {
+        warn$1(
+          `watch() "immediate" option is only respected when using the watch(source, callback, options?) signature.`
+        );
+      }
+      if (deep !== void 0) {
+        warn$1(
+          `watch() "deep" option is only respected when using the watch(source, callback, options?) signature.`
+        );
+      }
+      if (once !== void 0) {
+        warn$1(
+          `watch() "once" option is only respected when using the watch(source, callback, options?) signature.`
+        );
+      }
+    }
+    const warnInvalidSource = (s) => {
+      warn$1(
+        `Invalid watch source: `,
+        s,
+        `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
+      );
+    };
+    const instance = currentInstance;
+    const reactiveGetter = (source2) => deep === true ? source2 : (
+      // for deep: false, only traverse root-level properties
+      traverse(source2, deep === false ? 1 : void 0)
+    );
+    let getter;
+    let forceTrigger = false;
+    let isMultiSource = false;
+    if (isRef(source)) {
+      getter = () => source.value;
+      forceTrigger = isShallow(source);
+    } else if (isReactive(source)) {
+      getter = () => reactiveGetter(source);
+      forceTrigger = true;
+    } else if (isArray(source)) {
+      isMultiSource = true;
+      forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
+      getter = () => source.map((s) => {
+        if (isRef(s)) {
+          return s.value;
+        } else if (isReactive(s)) {
+          return reactiveGetter(s);
+        } else if (isFunction(s)) {
+          return callWithErrorHandling(s, instance, 2);
+        } else {
+          warnInvalidSource(s);
+        }
+      });
+    } else if (isFunction(source)) {
+      if (cb) {
+        getter = () => callWithErrorHandling(source, instance, 2);
+      } else {
+        getter = () => {
+          if (cleanup) {
+            cleanup();
+          }
+          return callWithAsyncErrorHandling(
+            source,
+            instance,
+            3,
+            [onCleanup]
+          );
+        };
+      }
+    } else {
+      getter = NOOP;
+      warnInvalidSource(source);
+    }
+    if (cb && deep) {
+      const baseGetter = getter;
+      getter = () => traverse(baseGetter());
+    }
+    let cleanup;
+    let onCleanup = (fn) => {
+      cleanup = effect.onStop = () => {
+        callWithErrorHandling(fn, instance, 4);
+        cleanup = effect.onStop = void 0;
+      };
+    };
+    let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
+    const job = () => {
+      if (!effect.active || !effect.dirty) {
+        return;
+      }
+      if (cb) {
+        const newValue = effect.run();
+        if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue)) || false) {
+          if (cleanup) {
+            cleanup();
+          }
+          callWithAsyncErrorHandling(cb, instance, 3, [
+            newValue,
+            // pass undefined as the old value when it's changed for the first time
+            oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
+            onCleanup
+          ]);
+          oldValue = newValue;
+        }
+      } else {
+        effect.run();
+      }
+    };
+    job.allowRecurse = !!cb;
+    let scheduler;
+    if (flush === "sync") {
+      scheduler = job;
+    } else if (flush === "post") {
+      scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
+    } else {
+      job.pre = true;
+      if (instance)
+        job.id = instance.uid;
+      scheduler = () => queueJob(job);
+    }
+    const effect = new ReactiveEffect(getter, NOOP, scheduler);
+    const scope = getCurrentScope();
+    const unwatch = () => {
+      effect.stop();
+      if (scope) {
+        remove(scope.effects, effect);
+      }
+    };
+    {
+      effect.onTrack = onTrack;
+      effect.onTrigger = onTrigger;
+    }
+    if (cb) {
+      if (immediate) {
+        job();
+      } else {
+        oldValue = effect.run();
+      }
+    } else if (flush === "post") {
+      queuePostRenderEffect(
+        effect.run.bind(effect),
+        instance && instance.suspense
+      );
+    } else {
+      effect.run();
+    }
+    return unwatch;
+  }
+  function instanceWatch(source, value, options) {
+    const publicThis = this.proxy;
+    const getter = isString(source) ? source.includes(".") ? createPathGetter(publicThis, source) : () => publicThis[source] : source.bind(publicThis, publicThis);
+    let cb;
+    if (isFunction(value)) {
+      cb = value;
+    } else {
+      cb = value.handler;
+      options = value;
+    }
+    const reset = setCurrentInstance(this);
+    const res = doWatch(getter, cb.bind(publicThis), options);
+    reset();
+    return res;
+  }
+  function createPathGetter(ctx, path) {
+    const segments = path.split(".");
+    return () => {
+      let cur = ctx;
+      for (let i = 0; i < segments.length && cur; i++) {
+        cur = cur[segments[i]];
+      }
+      return cur;
+    };
+  }
+  function traverse(value, depth, currentDepth = 0, seen) {
+    if (!isObject(value) || value["__v_skip"]) {
+      return value;
+    }
+    if (depth && depth > 0) {
+      if (currentDepth >= depth) {
+        return value;
+      }
+      currentDepth++;
+    }
+    seen = seen || /* @__PURE__ */ new Set();
+    if (seen.has(value)) {
+      return value;
+    }
+    seen.add(value);
+    if (isRef(value)) {
+      traverse(value.value, depth, currentDepth, seen);
+    } else if (isArray(value)) {
+      for (let i = 0; i < value.length; i++) {
+        traverse(value[i], depth, currentDepth, seen);
+      }
+    } else if (isSet(value) || isMap(value)) {
+      value.forEach((v) => {
+        traverse(v, depth, currentDepth, seen);
+      });
+    } else if (isPlainObject(value)) {
+      for (const key in value) {
+        traverse(value[key], depth, currentDepth, seen);
+      }
+    }
+    return value;
+  }
+
+  function validateDirectiveName(name) {
+    if (isBuiltInDirective(name)) {
+      warn$1("Do not use built-in directive ids as custom directive id: " + name);
+    }
+  }
+  function withDirectives(vnode, directives) {
+    if (currentRenderingInstance === null) {
+      warn$1(`withDirectives can only be used inside render functions.`);
+      return vnode;
+    }
+    const instance = getExposeProxy(currentRenderingInstance) || currentRenderingInstance.proxy;
+    const bindings = vnode.dirs || (vnode.dirs = []);
+    for (let i = 0; i < directives.length; i++) {
+      let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i];
+      if (dir) {
+        if (isFunction(dir)) {
+          dir = {
+            mounted: dir,
+            updated: dir
+          };
+        }
+        if (dir.deep) {
+          traverse(value);
+        }
+        bindings.push({
+          dir,
+          instance,
+          value,
+          oldValue: void 0,
+          arg,
+          modifiers
+        });
+      }
+    }
+    return vnode;
+  }
+  function invokeDirectiveHook(vnode, prevVNode, instance, name) {
+    const bindings = vnode.dirs;
+    const oldBindings = prevVNode && prevVNode.dirs;
+    for (let i = 0; i < bindings.length; i++) {
+      const binding = bindings[i];
+      if (oldBindings) {
+        binding.oldValue = oldBindings[i].value;
+      }
+      let hook = binding.dir[name];
+      if (hook) {
+        pauseTracking();
+        callWithAsyncErrorHandling(hook, instance, 8, [
+          vnode.el,
+          binding,
+          vnode,
+          prevVNode
+        ]);
+        resetTracking();
+      }
+    }
+  }
+
+  const leaveCbKey = Symbol("_leaveCb");
+  const enterCbKey$1 = Symbol("_enterCb");
+  function useTransitionState() {
+    const state = {
+      isMounted: false,
+      isLeaving: false,
+      isUnmounting: false,
+      leavingVNodes: /* @__PURE__ */ new Map()
+    };
+    onMounted(() => {
+      state.isMounted = true;
+    });
+    onBeforeUnmount(() => {
+      state.isUnmounting = true;
+    });
+    return state;
+  }
+  const TransitionHookValidator = [Function, Array];
+  const BaseTransitionPropsValidators = {
+    mode: String,
+    appear: Boolean,
+    persisted: Boolean,
+    // enter
+    onBeforeEnter: TransitionHookValidator,
+    onEnter: TransitionHookValidator,
+    onAfterEnter: TransitionHookValidator,
+    onEnterCancelled: TransitionHookValidator,
+    // leave
+    onBeforeLeave: TransitionHookValidator,
+    onLeave: TransitionHookValidator,
+    onAfterLeave: TransitionHookValidator,
+    onLeaveCancelled: TransitionHookValidator,
+    // appear
+    onBeforeAppear: TransitionHookValidator,
+    onAppear: TransitionHookValidator,
+    onAfterAppear: TransitionHookValidator,
+    onAppearCancelled: TransitionHookValidator
+  };
+  const BaseTransitionImpl = {
+    name: `BaseTransition`,
+    props: BaseTransitionPropsValidators,
+    setup(props, { slots }) {
+      const instance = getCurrentInstance();
+      const state = useTransitionState();
+      let prevTransitionKey;
+      return () => {
+        const children = slots.default && getTransitionRawChildren(slots.default(), true);
+        if (!children || !children.length) {
+          return;
+        }
+        let child = children[0];
+        if (children.length > 1) {
+          let hasFound = false;
+          for (const c of children) {
+            if (c.type !== Comment) {
+              if (hasFound) {
+                warn$1(
+                  "<transition> can only be used on a single element or component. Use <transition-group> for lists."
+                );
+                break;
+              }
+              child = c;
+              hasFound = true;
+            }
+          }
+        }
+        const rawProps = toRaw(props);
+        const { mode } = rawProps;
+        if (mode && mode !== "in-out" && mode !== "out-in" && mode !== "default") {
+          warn$1(`invalid <transition> mode: ${mode}`);
+        }
+        if (state.isLeaving) {
+          return emptyPlaceholder(child);
+        }
+        const innerChild = getKeepAliveChild(child);
+        if (!innerChild) {
+          return emptyPlaceholder(child);
+        }
+        const enterHooks = resolveTransitionHooks(
+          innerChild,
+          rawProps,
+          state,
+          instance
+        );
+        setTransitionHooks(innerChild, enterHooks);
+        const oldChild = instance.subTree;
+        const oldInnerChild = oldChild && getKeepAliveChild(oldChild);
+        let transitionKeyChanged = false;
+        const { getTransitionKey } = innerChild.type;
+        if (getTransitionKey) {
+          const key = getTransitionKey();
+          if (prevTransitionKey === void 0) {
+            prevTransitionKey = key;
+          } else if (key !== prevTransitionKey) {
+            prevTransitionKey = key;
+            transitionKeyChanged = true;
+          }
+        }
+        if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {
+          const leavingHooks = resolveTransitionHooks(
+            oldInnerChild,
+            rawProps,
+            state,
+            instance
+          );
+          setTransitionHooks(oldInnerChild, leavingHooks);
+          if (mode === "out-in") {
+            state.isLeaving = true;
+            leavingHooks.afterLeave = () => {
+              state.isLeaving = false;
+              if (instance.update.active !== false) {
+                instance.effect.dirty = true;
+                instance.update();
+              }
+            };
+            return emptyPlaceholder(child);
+          } else if (mode === "in-out" && innerChild.type !== Comment) {
+            leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {
+              const leavingVNodesCache = getLeavingNodesForType(
+                state,
+                oldInnerChild
+              );
+              leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;
+              el[leaveCbKey] = () => {
+                earlyRemove();
+                el[leaveCbKey] = void 0;
+                delete enterHooks.delayedLeave;
+              };
+              enterHooks.delayedLeave = delayedLeave;
+            };
+          }
+        }
+        return child;
+      };
+    }
+  };
+  const BaseTransition = BaseTransitionImpl;
+  function getLeavingNodesForType(state, vnode) {
+    const { leavingVNodes } = state;
+    let leavingVNodesCache = leavingVNodes.get(vnode.type);
+    if (!leavingVNodesCache) {
+      leavingVNodesCache = /* @__PURE__ */ Object.create(null);
+      leavingVNodes.set(vnode.type, leavingVNodesCache);
+    }
+    return leavingVNodesCache;
+  }
+  function resolveTransitionHooks(vnode, props, state, instance) {
+    const {
+      appear,
+      mode,
+      persisted = false,
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onEnterCancelled,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave,
+      onLeaveCancelled,
+      onBeforeAppear,
+      onAppear,
+      onAfterAppear,
+      onAppearCancelled
+    } = props;
+    const key = String(vnode.key);
+    const leavingVNodesCache = getLeavingNodesForType(state, vnode);
+    const callHook = (hook, args) => {
+      hook && callWithAsyncErrorHandling(
+        hook,
+        instance,
+        9,
+        args
+      );
+    };
+    const callAsyncHook = (hook, args) => {
+      const done = args[1];
+      callHook(hook, args);
+      if (isArray(hook)) {
+        if (hook.every((hook2) => hook2.length <= 1))
+          done();
+      } else if (hook.length <= 1) {
+        done();
+      }
+    };
+    const hooks = {
+      mode,
+      persisted,
+      beforeEnter(el) {
+        let hook = onBeforeEnter;
+        if (!state.isMounted) {
+          if (appear) {
+            hook = onBeforeAppear || onBeforeEnter;
+          } else {
+            return;
+          }
+        }
+        if (el[leaveCbKey]) {
+          el[leaveCbKey](
+            true
+            /* cancelled */
+          );
+        }
+        const leavingVNode = leavingVNodesCache[key];
+        if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el[leaveCbKey]) {
+          leavingVNode.el[leaveCbKey]();
+        }
+        callHook(hook, [el]);
+      },
+      enter(el) {
+        let hook = onEnter;
+        let afterHook = onAfterEnter;
+        let cancelHook = onEnterCancelled;
+        if (!state.isMounted) {
+          if (appear) {
+            hook = onAppear || onEnter;
+            afterHook = onAfterAppear || onAfterEnter;
+            cancelHook = onAppearCancelled || onEnterCancelled;
+          } else {
+            return;
+          }
+        }
+        let called = false;
+        const done = el[enterCbKey$1] = (cancelled) => {
+          if (called)
+            return;
+          called = true;
+          if (cancelled) {
+            callHook(cancelHook, [el]);
+          } else {
+            callHook(afterHook, [el]);
+          }
+          if (hooks.delayedLeave) {
+            hooks.delayedLeave();
+          }
+          el[enterCbKey$1] = void 0;
+        };
+        if (hook) {
+          callAsyncHook(hook, [el, done]);
+        } else {
+          done();
+        }
+      },
+      leave(el, remove) {
+        const key2 = String(vnode.key);
+        if (el[enterCbKey$1]) {
+          el[enterCbKey$1](
+            true
+            /* cancelled */
+          );
+        }
+        if (state.isUnmounting) {
+          return remove();
+        }
+        callHook(onBeforeLeave, [el]);
+        let called = false;
+        const done = el[leaveCbKey] = (cancelled) => {
+          if (called)
+            return;
+          called = true;
+          remove();
+          if (cancelled) {
+            callHook(onLeaveCancelled, [el]);
+          } else {
+            callHook(onAfterLeave, [el]);
+          }
+          el[leaveCbKey] = void 0;
+          if (leavingVNodesCache[key2] === vnode) {
+            delete leavingVNodesCache[key2];
+          }
+        };
+        leavingVNodesCache[key2] = vnode;
+        if (onLeave) {
+          callAsyncHook(onLeave, [el, done]);
+        } else {
+          done();
+        }
+      },
+      clone(vnode2) {
+        return resolveTransitionHooks(vnode2, props, state, instance);
+      }
+    };
+    return hooks;
+  }
+  function emptyPlaceholder(vnode) {
+    if (isKeepAlive(vnode)) {
+      vnode = cloneVNode(vnode);
+      vnode.children = null;
+      return vnode;
+    }
+  }
+  function getKeepAliveChild(vnode) {
+    return isKeepAlive(vnode) ? (
+      // #7121 ensure get the child component subtree in case
+      // it's been replaced during HMR
+      vnode.component ? vnode.component.subTree : vnode.children ? vnode.children[0] : void 0
+    ) : vnode;
+  }
+  function setTransitionHooks(vnode, hooks) {
+    if (vnode.shapeFlag & 6 && vnode.component) {
+      setTransitionHooks(vnode.component.subTree, hooks);
+    } else if (vnode.shapeFlag & 128) {
+      vnode.ssContent.transition = hooks.clone(vnode.ssContent);
+      vnode.ssFallback.transition = hooks.clone(vnode.ssFallback);
+    } else {
+      vnode.transition = hooks;
+    }
+  }
+  function getTransitionRawChildren(children, keepComment = false, parentKey) {
+    let ret = [];
+    let keyedFragmentCount = 0;
+    for (let i = 0; i < children.length; i++) {
+      let child = children[i];
+      const key = parentKey == null ? child.key : String(parentKey) + String(child.key != null ? child.key : i);
+      if (child.type === Fragment) {
+        if (child.patchFlag & 128)
+          keyedFragmentCount++;
+        ret = ret.concat(
+          getTransitionRawChildren(child.children, keepComment, key)
+        );
+      } else if (keepComment || child.type !== Comment) {
+        ret.push(key != null ? cloneVNode(child, { key }) : child);
+      }
+    }
+    if (keyedFragmentCount > 1) {
+      for (let i = 0; i < ret.length; i++) {
+        ret[i].patchFlag = -2;
+      }
+    }
+    return ret;
+  }
+
+  /*! #__NO_SIDE_EFFECTS__ */
+  // @__NO_SIDE_EFFECTS__
+  function defineComponent(options, extraOptions) {
+    return isFunction(options) ? (
+      // #8326: extend call and options.name access are considered side-effects
+      // by Rollup, so we have to wrap it in a pure-annotated IIFE.
+      /* @__PURE__ */ (() => extend({ name: options.name }, extraOptions, { setup: options }))()
+    ) : options;
+  }
+
+  const isAsyncWrapper = (i) => !!i.type.__asyncLoader;
+  /*! #__NO_SIDE_EFFECTS__ */
+  // @__NO_SIDE_EFFECTS__
+  function defineAsyncComponent(source) {
+    if (isFunction(source)) {
+      source = { loader: source };
+    }
+    const {
+      loader,
+      loadingComponent,
+      errorComponent,
+      delay = 200,
+      timeout,
+      // undefined = never times out
+      suspensible = true,
+      onError: userOnError
+    } = source;
+    let pendingRequest = null;
+    let resolvedComp;
+    let retries = 0;
+    const retry = () => {
+      retries++;
+      pendingRequest = null;
+      return load();
+    };
+    const load = () => {
+      let thisRequest;
+      return pendingRequest || (thisRequest = pendingRequest = loader().catch((err) => {
+        err = err instanceof Error ? err : new Error(String(err));
+        if (userOnError) {
+          return new Promise((resolve, reject) => {
+            const userRetry = () => resolve(retry());
+            const userFail = () => reject(err);
+            userOnError(err, userRetry, userFail, retries + 1);
+          });
+        } else {
+          throw err;
+        }
+      }).then((comp) => {
+        if (thisRequest !== pendingRequest && pendingRequest) {
+          return pendingRequest;
+        }
+        if (!comp) {
+          warn$1(
+            `Async component loader resolved to undefined. If you are using retry(), make sure to return its return value.`
+          );
+        }
+        if (comp && (comp.__esModule || comp[Symbol.toStringTag] === "Module")) {
+          comp = comp.default;
+        }
+        if (comp && !isObject(comp) && !isFunction(comp)) {
+          throw new Error(`Invalid async component load result: ${comp}`);
+        }
+        resolvedComp = comp;
+        return comp;
+      }));
+    };
+    return defineComponent({
+      name: "AsyncComponentWrapper",
+      __asyncLoader: load,
+      get __asyncResolved() {
+        return resolvedComp;
+      },
+      setup() {
+        const instance = currentInstance;
+        if (resolvedComp) {
+          return () => createInnerComp(resolvedComp, instance);
+        }
+        const onError = (err) => {
+          pendingRequest = null;
+          handleError(
+            err,
+            instance,
+            13,
+            !errorComponent
+          );
+        };
+        if (suspensible && instance.suspense || false) {
+          return load().then((comp) => {
+            return () => createInnerComp(comp, instance);
+          }).catch((err) => {
+            onError(err);
+            return () => errorComponent ? createVNode(errorComponent, {
+              error: err
+            }) : null;
+          });
+        }
+        const loaded = ref(false);
+        const error = ref();
+        const delayed = ref(!!delay);
+        if (delay) {
+          setTimeout(() => {
+            delayed.value = false;
+          }, delay);
+        }
+        if (timeout != null) {
+          setTimeout(() => {
+            if (!loaded.value && !error.value) {
+              const err = new Error(
+                `Async component timed out after ${timeout}ms.`
+              );
+              onError(err);
+              error.value = err;
+            }
+          }, timeout);
+        }
+        load().then(() => {
+          loaded.value = true;
+          if (instance.parent && isKeepAlive(instance.parent.vnode)) {
+            instance.parent.effect.dirty = true;
+            queueJob(instance.parent.update);
+          }
+        }).catch((err) => {
+          onError(err);
+          error.value = err;
+        });
+        return () => {
+          if (loaded.value && resolvedComp) {
+            return createInnerComp(resolvedComp, instance);
+          } else if (error.value && errorComponent) {
+            return createVNode(errorComponent, {
+              error: error.value
+            });
+          } else if (loadingComponent && !delayed.value) {
+            return createVNode(loadingComponent);
+          }
+        };
+      }
+    });
+  }
+  function createInnerComp(comp, parent) {
+    const { ref: ref2, props, children, ce } = parent.vnode;
+    const vnode = createVNode(comp, props, children);
+    vnode.ref = ref2;
+    vnode.ce = ce;
+    delete parent.vnode.ce;
+    return vnode;
+  }
+
+  const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;
+  const KeepAliveImpl = {
+    name: `KeepAlive`,
+    // Marker for special handling inside the renderer. We are not using a ===
+    // check directly on KeepAlive in the renderer, because importing it directly
+    // would prevent it from being tree-shaken.
+    __isKeepAlive: true,
+    props: {
+      include: [String, RegExp, Array],
+      exclude: [String, RegExp, Array],
+      max: [String, Number]
+    },
+    setup(props, { slots }) {
+      const instance = getCurrentInstance();
+      const sharedContext = instance.ctx;
+      const cache = /* @__PURE__ */ new Map();
+      const keys = /* @__PURE__ */ new Set();
+      let current = null;
+      {
+        instance.__v_cache = cache;
+      }
+      const parentSuspense = instance.suspense;
+      const {
+        renderer: {
+          p: patch,
+          m: move,
+          um: _unmount,
+          o: { createElement }
+        }
+      } = sharedContext;
+      const storageContainer = createElement("div");
+      sharedContext.activate = (vnode, container, anchor, namespace, optimized) => {
+        const instance2 = vnode.component;
+        move(vnode, container, anchor, 0, parentSuspense);
+        patch(
+          instance2.vnode,
+          vnode,
+          container,
+          anchor,
+          instance2,
+          parentSuspense,
+          namespace,
+          vnode.slotScopeIds,
+          optimized
+        );
+        queuePostRenderEffect(() => {
+          instance2.isDeactivated = false;
+          if (instance2.a) {
+            invokeArrayFns(instance2.a);
+          }
+          const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
+          if (vnodeHook) {
+            invokeVNodeHook(vnodeHook, instance2.parent, vnode);
+          }
+        }, parentSuspense);
+        {
+          devtoolsComponentAdded(instance2);
+        }
+      };
+      sharedContext.deactivate = (vnode) => {
+        const instance2 = vnode.component;
+        move(vnode, storageContainer, null, 1, parentSuspense);
+        queuePostRenderEffect(() => {
+          if (instance2.da) {
+            invokeArrayFns(instance2.da);
+          }
+          const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
+          if (vnodeHook) {
+            invokeVNodeHook(vnodeHook, instance2.parent, vnode);
+          }
+          instance2.isDeactivated = true;
+        }, parentSuspense);
+        {
+          devtoolsComponentAdded(instance2);
+        }
+      };
+      function unmount(vnode) {
+        resetShapeFlag(vnode);
+        _unmount(vnode, instance, parentSuspense, true);
+      }
+      function pruneCache(filter) {
+        cache.forEach((vnode, key) => {
+          const name = getComponentName(vnode.type);
+          if (name && (!filter || !filter(name))) {
+            pruneCacheEntry(key);
+          }
+        });
+      }
+      function pruneCacheEntry(key) {
+        const cached = cache.get(key);
+        if (!current || !isSameVNodeType(cached, current)) {
+          unmount(cached);
+        } else if (current) {
+          resetShapeFlag(current);
+        }
+        cache.delete(key);
+        keys.delete(key);
+      }
+      watch(
+        () => [props.include, props.exclude],
+        ([include, exclude]) => {
+          include && pruneCache((name) => matches(include, name));
+          exclude && pruneCache((name) => !matches(exclude, name));
+        },
+        // prune post-render after `current` has been updated
+        { flush: "post", deep: true }
+      );
+      let pendingCacheKey = null;
+      const cacheSubtree = () => {
+        if (pendingCacheKey != null) {
+          cache.set(pendingCacheKey, getInnerChild(instance.subTree));
+        }
+      };
+      onMounted(cacheSubtree);
+      onUpdated(cacheSubtree);
+      onBeforeUnmount(() => {
+        cache.forEach((cached) => {
+          const { subTree, suspense } = instance;
+          const vnode = getInnerChild(subTree);
+          if (cached.type === vnode.type && cached.key === vnode.key) {
+            resetShapeFlag(vnode);
+            const da = vnode.component.da;
+            da && queuePostRenderEffect(da, suspense);
+            return;
+          }
+          unmount(cached);
+        });
+      });
+      return () => {
+        pendingCacheKey = null;
+        if (!slots.default) {
+          return null;
+        }
+        const children = slots.default();
+        const rawVNode = children[0];
+        if (children.length > 1) {
+          {
+            warn$1(`KeepAlive should contain exactly one component child.`);
+          }
+          current = null;
+          return children;
+        } else if (!isVNode(rawVNode) || !(rawVNode.shapeFlag & 4) && !(rawVNode.shapeFlag & 128)) {
+          current = null;
+          return rawVNode;
+        }
+        let vnode = getInnerChild(rawVNode);
+        const comp = vnode.type;
+        const name = getComponentName(
+          isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp
+        );
+        const { include, exclude, max } = props;
+        if (include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name)) {
+          current = vnode;
+          return rawVNode;
+        }
+        const key = vnode.key == null ? comp : vnode.key;
+        const cachedVNode = cache.get(key);
+        if (vnode.el) {
+          vnode = cloneVNode(vnode);
+          if (rawVNode.shapeFlag & 128) {
+            rawVNode.ssContent = vnode;
+          }
+        }
+        pendingCacheKey = key;
+        if (cachedVNode) {
+          vnode.el = cachedVNode.el;
+          vnode.component = cachedVNode.component;
+          if (vnode.transition) {
+            setTransitionHooks(vnode, vnode.transition);
+          }
+          vnode.shapeFlag |= 512;
+          keys.delete(key);
+          keys.add(key);
+        } else {
+          keys.add(key);
+          if (max && keys.size > parseInt(max, 10)) {
+            pruneCacheEntry(keys.values().next().value);
+          }
+        }
+        vnode.shapeFlag |= 256;
+        current = vnode;
+        return isSuspense(rawVNode.type) ? rawVNode : vnode;
+      };
+    }
+  };
+  const KeepAlive = KeepAliveImpl;
+  function matches(pattern, name) {
+    if (isArray(pattern)) {
+      return pattern.some((p) => matches(p, name));
+    } else if (isString(pattern)) {
+      return pattern.split(",").includes(name);
+    } else if (isRegExp(pattern)) {
+      return pattern.test(name);
+    }
+    return false;
+  }
+  function onActivated(hook, target) {
+    registerKeepAliveHook(hook, "a", target);
+  }
+  function onDeactivated(hook, target) {
+    registerKeepAliveHook(hook, "da", target);
+  }
+  function registerKeepAliveHook(hook, type, target = currentInstance) {
+    const wrappedHook = hook.__wdc || (hook.__wdc = () => {
+      let current = target;
+      while (current) {
+        if (current.isDeactivated) {
+          return;
+        }
+        current = current.parent;
+      }
+      return hook();
+    });
+    injectHook(type, wrappedHook, target);
+    if (target) {
+      let current = target.parent;
+      while (current && current.parent) {
+        if (isKeepAlive(current.parent.vnode)) {
+          injectToKeepAliveRoot(wrappedHook, type, target, current);
+        }
+        current = current.parent;
+      }
+    }
+  }
+  function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) {
+    const injected = injectHook(
+      type,
+      hook,
+      keepAliveRoot,
+      true
+      /* prepend */
+    );
+    onUnmounted(() => {
+      remove(keepAliveRoot[type], injected);
+    }, target);
+  }
+  function resetShapeFlag(vnode) {
+    vnode.shapeFlag &= ~256;
+    vnode.shapeFlag &= ~512;
+  }
+  function getInnerChild(vnode) {
+    return vnode.shapeFlag & 128 ? vnode.ssContent : vnode;
+  }
+
+  function injectHook(type, hook, target = currentInstance, prepend = false) {
+    if (target) {
+      const hooks = target[type] || (target[type] = []);
+      const wrappedHook = hook.__weh || (hook.__weh = (...args) => {
+        if (target.isUnmounted) {
+          return;
+        }
+        pauseTracking();
+        const reset = setCurrentInstance(target);
+        const res = callWithAsyncErrorHandling(hook, target, type, args);
+        reset();
+        resetTracking();
+        return res;
+      });
+      if (prepend) {
+        hooks.unshift(wrappedHook);
+      } else {
+        hooks.push(wrappedHook);
+      }
+      return wrappedHook;
+    } else {
+      const apiName = toHandlerKey(ErrorTypeStrings$1[type].replace(/ hook$/, ""));
+      warn$1(
+        `${apiName} is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().` + (` If you are using async setup(), make sure to register lifecycle hooks before the first await statement.` )
+      );
+    }
+  }
+  const createHook = (lifecycle) => (hook, target = currentInstance) => (
+    // post-create lifecycle registrations are noops during SSR (except for serverPrefetch)
+    (!isInSSRComponentSetup || lifecycle === "sp") && injectHook(lifecycle, (...args) => hook(...args), target)
+  );
+  const onBeforeMount = createHook("bm");
+  const onMounted = createHook("m");
+  const onBeforeUpdate = createHook("bu");
+  const onUpdated = createHook("u");
+  const onBeforeUnmount = createHook("bum");
+  const onUnmounted = createHook("um");
+  const onServerPrefetch = createHook("sp");
+  const onRenderTriggered = createHook(
+    "rtg"
+  );
+  const onRenderTracked = createHook(
+    "rtc"
+  );
+  function onErrorCaptured(hook, target = currentInstance) {
+    injectHook("ec", hook, target);
+  }
+
+  function renderList(source, renderItem, cache, index) {
+    let ret;
+    const cached = cache && cache[index];
+    if (isArray(source) || isString(source)) {
+      ret = new Array(source.length);
+      for (let i = 0, l = source.length; i < l; i++) {
+        ret[i] = renderItem(source[i], i, void 0, cached && cached[i]);
+      }
+    } else if (typeof source === "number") {
+      if (!Number.isInteger(source)) {
+        warn$1(`The v-for range expect an integer value but got ${source}.`);
+      }
+      ret = new Array(source);
+      for (let i = 0; i < source; i++) {
+        ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);
+      }
+    } else if (isObject(source)) {
+      if (source[Symbol.iterator]) {
+        ret = Array.from(
+          source,
+          (item, i) => renderItem(item, i, void 0, cached && cached[i])
+        );
+      } else {
+        const keys = Object.keys(source);
+        ret = new Array(keys.length);
+        for (let i = 0, l = keys.length; i < l; i++) {
+          const key = keys[i];
+          ret[i] = renderItem(source[key], key, i, cached && cached[i]);
+        }
+      }
+    } else {
+      ret = [];
+    }
+    if (cache) {
+      cache[index] = ret;
+    }
+    return ret;
+  }
+
+  function createSlots(slots, dynamicSlots) {
+    for (let i = 0; i < dynamicSlots.length; i++) {
+      const slot = dynamicSlots[i];
+      if (isArray(slot)) {
+        for (let j = 0; j < slot.length; j++) {
+          slots[slot[j].name] = slot[j].fn;
+        }
+      } else if (slot) {
+        slots[slot.name] = slot.key ? (...args) => {
+          const res = slot.fn(...args);
+          if (res)
+            res.key = slot.key;
+          return res;
+        } : slot.fn;
+      }
+    }
+    return slots;
+  }
+
+  function renderSlot(slots, name, props = {}, fallback, noSlotted) {
+    if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
+      if (name !== "default")
+        props.name = name;
+      return createVNode("slot", props, fallback && fallback());
+    }
+    let slot = slots[name];
+    if (slot && slot.length > 1) {
+      warn$1(
+        `SSR-optimized slot function detected in a non-SSR-optimized render function. You need to mark this component with $dynamic-slots in the parent template.`
+      );
+      slot = () => [];
+    }
+    if (slot && slot._c) {
+      slot._d = false;
+    }
+    openBlock();
+    const validSlotContent = slot && ensureValidVNode(slot(props));
+    const rendered = createBlock(
+      Fragment,
+      {
+        key: props.key || // slot content array of a dynamic conditional slot may have a branch
+        // key attached in the `createSlots` helper, respect that
+        validSlotContent && validSlotContent.key || `_${name}`
+      },
+      validSlotContent || (fallback ? fallback() : []),
+      validSlotContent && slots._ === 1 ? 64 : -2
+    );
+    if (!noSlotted && rendered.scopeId) {
+      rendered.slotScopeIds = [rendered.scopeId + "-s"];
+    }
+    if (slot && slot._c) {
+      slot._d = true;
+    }
+    return rendered;
+  }
+  function ensureValidVNode(vnodes) {
+    return vnodes.some((child) => {
+      if (!isVNode(child))
+        return true;
+      if (child.type === Comment)
+        return false;
+      if (child.type === Fragment && !ensureValidVNode(child.children))
+        return false;
+      return true;
+    }) ? vnodes : null;
+  }
+
+  function toHandlers(obj, preserveCaseIfNecessary) {
+    const ret = {};
+    if (!isObject(obj)) {
+      warn$1(`v-on with no argument expects an object value.`);
+      return ret;
+    }
+    for (const key in obj) {
+      ret[preserveCaseIfNecessary && /[A-Z]/.test(key) ? `on:${key}` : toHandlerKey(key)] = obj[key];
+    }
+    return ret;
+  }
+
+  const getPublicInstance = (i) => {
+    if (!i)
+      return null;
+    if (isStatefulComponent(i))
+      return getExposeProxy(i) || i.proxy;
+    return getPublicInstance(i.parent);
+  };
+  const publicPropertiesMap = (
+    // Move PURE marker to new line to workaround compiler discarding it
+    // due to type annotation
+    /* @__PURE__ */ extend(/* @__PURE__ */ Object.create(null), {
+      $: (i) => i,
+      $el: (i) => i.vnode.el,
+      $data: (i) => i.data,
+      $props: (i) => shallowReadonly(i.props) ,
+      $attrs: (i) => shallowReadonly(i.attrs) ,
+      $slots: (i) => shallowReadonly(i.slots) ,
+      $refs: (i) => shallowReadonly(i.refs) ,
+      $parent: (i) => getPublicInstance(i.parent),
+      $root: (i) => getPublicInstance(i.root),
+      $emit: (i) => i.emit,
+      $options: (i) => resolveMergedOptions(i) ,
+      $forceUpdate: (i) => i.f || (i.f = () => {
+        i.effect.dirty = true;
+        queueJob(i.update);
+      }),
+      $nextTick: (i) => i.n || (i.n = nextTick.bind(i.proxy)),
+      $watch: (i) => instanceWatch.bind(i) 
+    })
+  );
+  const isReservedPrefix = (key) => key === "_" || key === "$";
+  const hasSetupBinding = (state, key) => state !== EMPTY_OBJ && !state.__isScriptSetup && hasOwn(state, key);
+  const PublicInstanceProxyHandlers = {
+    get({ _: instance }, key) {
+      const { ctx, setupState, data, props, accessCache, type, appContext } = instance;
+      if (key === "__isVue") {
+        return true;
+      }
+      let normalizedProps;
+      if (key[0] !== "$") {
+        const n = accessCache[key];
+        if (n !== void 0) {
+          switch (n) {
+            case 1 /* SETUP */:
+              return setupState[key];
+            case 2 /* DATA */:
+              return data[key];
+            case 4 /* CONTEXT */:
+              return ctx[key];
+            case 3 /* PROPS */:
+              return props[key];
+          }
+        } else if (hasSetupBinding(setupState, key)) {
+          accessCache[key] = 1 /* SETUP */;
+          return setupState[key];
+        } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
+          accessCache[key] = 2 /* DATA */;
+          return data[key];
+        } else if (
+          // only cache other properties when instance has declared (thus stable)
+          // props
+          (normalizedProps = instance.propsOptions[0]) && hasOwn(normalizedProps, key)
+        ) {
+          accessCache[key] = 3 /* PROPS */;
+          return props[key];
+        } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
+          accessCache[key] = 4 /* CONTEXT */;
+          return ctx[key];
+        } else if (shouldCacheAccess) {
+          accessCache[key] = 0 /* OTHER */;
+        }
+      }
+      const publicGetter = publicPropertiesMap[key];
+      let cssModule, globalProperties;
+      if (publicGetter) {
+        if (key === "$attrs") {
+          track(instance, "get", key);
+          markAttrsAccessed();
+        } else if (key === "$slots") {
+          track(instance, "get", key);
+        }
+        return publicGetter(instance);
+      } else if (
+        // css module (injected by vue-loader)
+        (cssModule = type.__cssModules) && (cssModule = cssModule[key])
+      ) {
+        return cssModule;
+      } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
+        accessCache[key] = 4 /* CONTEXT */;
+        return ctx[key];
+      } else if (
+        // global properties
+        globalProperties = appContext.config.globalProperties, hasOwn(globalProperties, key)
+      ) {
+        {
+          return globalProperties[key];
+        }
+      } else if (currentRenderingInstance && (!isString(key) || // #1091 avoid internal isRef/isVNode checks on component instance leading
+      // to infinite warning loop
+      key.indexOf("__v") !== 0)) {
+        if (data !== EMPTY_OBJ && isReservedPrefix(key[0]) && hasOwn(data, key)) {
+          warn$1(
+            `Property ${JSON.stringify(
+            key
+          )} must be accessed via $data because it starts with a reserved character ("$" or "_") and is not proxied on the render context.`
+          );
+        } else if (instance === currentRenderingInstance) {
+          warn$1(
+            `Property ${JSON.stringify(key)} was accessed during render but is not defined on instance.`
+          );
+        }
+      }
+    },
+    set({ _: instance }, key, value) {
+      const { data, setupState, ctx } = instance;
+      if (hasSetupBinding(setupState, key)) {
+        setupState[key] = value;
+        return true;
+      } else if (setupState.__isScriptSetup && hasOwn(setupState, key)) {
+        warn$1(`Cannot mutate <script setup> binding "${key}" from Options API.`);
+        return false;
+      } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
+        data[key] = value;
+        return true;
+      } else if (hasOwn(instance.props, key)) {
+        warn$1(`Attempting to mutate prop "${key}". Props are readonly.`);
+        return false;
+      }
+      if (key[0] === "$" && key.slice(1) in instance) {
+        warn$1(
+          `Attempting to mutate public property "${key}". Properties starting with $ are reserved and readonly.`
+        );
+        return false;
+      } else {
+        if (key in instance.appContext.config.globalProperties) {
+          Object.defineProperty(ctx, key, {
+            enumerable: true,
+            configurable: true,
+            value
+          });
+        } else {
+          ctx[key] = value;
+        }
+      }
+      return true;
+    },
+    has({
+      _: { data, setupState, accessCache, ctx, appContext, propsOptions }
+    }, key) {
+      let normalizedProps;
+      return !!accessCache[key] || data !== EMPTY_OBJ && hasOwn(data, key) || hasSetupBinding(setupState, key) || (normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key) || hasOwn(ctx, key) || hasOwn(publicPropertiesMap, key) || hasOwn(appContext.config.globalProperties, key);
+    },
+    defineProperty(target, key, descriptor) {
+      if (descriptor.get != null) {
+        target._.accessCache[key] = 0;
+      } else if (hasOwn(descriptor, "value")) {
+        this.set(target, key, descriptor.value, null);
+      }
+      return Reflect.defineProperty(target, key, descriptor);
+    }
+  };
+  {
+    PublicInstanceProxyHandlers.ownKeys = (target) => {
+      warn$1(
+        `Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.`
+      );
+      return Reflect.ownKeys(target);
+    };
+  }
+  const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend(
+    {},
+    PublicInstanceProxyHandlers,
+    {
+      get(target, key) {
+        if (key === Symbol.unscopables) {
+          return;
+        }
+        return PublicInstanceProxyHandlers.get(target, key, target);
+      },
+      has(_, key) {
+        const has = key[0] !== "_" && !isGloballyAllowed(key);
+        if (!has && PublicInstanceProxyHandlers.has(_, key)) {
+          warn$1(
+            `Property ${JSON.stringify(
+            key
+          )} should not start with _ which is a reserved prefix for Vue internals.`
+          );
+        }
+        return has;
+      }
+    }
+  );
+  function createDevRenderContext(instance) {
+    const target = {};
+    Object.defineProperty(target, `_`, {
+      configurable: true,
+      enumerable: false,
+      get: () => instance
+    });
+    Object.keys(publicPropertiesMap).forEach((key) => {
+      Object.defineProperty(target, key, {
+        configurable: true,
+        enumerable: false,
+        get: () => publicPropertiesMap[key](instance),
+        // intercepted by the proxy so no need for implementation,
+        // but needed to prevent set errors
+        set: NOOP
+      });
+    });
+    return target;
+  }
+  function exposePropsOnRenderContext(instance) {
+    const {
+      ctx,
+      propsOptions: [propsOptions]
+    } = instance;
+    if (propsOptions) {
+      Object.keys(propsOptions).forEach((key) => {
+        Object.defineProperty(ctx, key, {
+          enumerable: true,
+          configurable: true,
+          get: () => instance.props[key],
+          set: NOOP
+        });
+      });
+    }
+  }
+  function exposeSetupStateOnRenderContext(instance) {
+    const { ctx, setupState } = instance;
+    Object.keys(toRaw(setupState)).forEach((key) => {
+      if (!setupState.__isScriptSetup) {
+        if (isReservedPrefix(key[0])) {
+          warn$1(
+            `setup() return property ${JSON.stringify(
+            key
+          )} should not start with "$" or "_" which are reserved prefixes for Vue internals.`
+          );
+          return;
+        }
+        Object.defineProperty(ctx, key, {
+          enumerable: true,
+          configurable: true,
+          get: () => setupState[key],
+          set: NOOP
+        });
+      }
+    });
+  }
+
+  const warnRuntimeUsage = (method) => warn$1(
+    `${method}() is a compiler-hint helper that is only usable inside <script setup> of a single file component. Its arguments should be compiled away and passing it at runtime has no effect.`
+  );
+  function defineProps() {
+    {
+      warnRuntimeUsage(`defineProps`);
+    }
+    return null;
+  }
+  function defineEmits() {
+    {
+      warnRuntimeUsage(`defineEmits`);
+    }
+    return null;
+  }
+  function defineExpose(exposed) {
+    {
+      warnRuntimeUsage(`defineExpose`);
+    }
+  }
+  function defineOptions(options) {
+    {
+      warnRuntimeUsage(`defineOptions`);
+    }
+  }
+  function defineSlots() {
+    {
+      warnRuntimeUsage(`defineSlots`);
+    }
+    return null;
+  }
+  function defineModel() {
+    {
+      warnRuntimeUsage("defineModel");
+    }
+  }
+  function withDefaults(props, defaults) {
+    {
+      warnRuntimeUsage(`withDefaults`);
+    }
+    return null;
+  }
+  function useSlots() {
+    return getContext().slots;
+  }
+  function useAttrs() {
+    return getContext().attrs;
+  }
+  function getContext() {
+    const i = getCurrentInstance();
+    if (!i) {
+      warn$1(`useContext() called without active instance.`);
+    }
+    return i.setupContext || (i.setupContext = createSetupContext(i));
+  }
+  function normalizePropsOrEmits(props) {
+    return isArray(props) ? props.reduce(
+      (normalized, p) => (normalized[p] = null, normalized),
+      {}
+    ) : props;
+  }
+  function mergeDefaults(raw, defaults) {
+    const props = normalizePropsOrEmits(raw);
+    for (const key in defaults) {
+      if (key.startsWith("__skip"))
+        continue;
+      let opt = props[key];
+      if (opt) {
+        if (isArray(opt) || isFunction(opt)) {
+          opt = props[key] = { type: opt, default: defaults[key] };
+        } else {
+          opt.default = defaults[key];
+        }
+      } else if (opt === null) {
+        opt = props[key] = { default: defaults[key] };
+      } else {
+        warn$1(`props default key "${key}" has no corresponding declaration.`);
+      }
+      if (opt && defaults[`__skip_${key}`]) {
+        opt.skipFactory = true;
+      }
+    }
+    return props;
+  }
+  function mergeModels(a, b) {
+    if (!a || !b)
+      return a || b;
+    if (isArray(a) && isArray(b))
+      return a.concat(b);
+    return extend({}, normalizePropsOrEmits(a), normalizePropsOrEmits(b));
+  }
+  function createPropsRestProxy(props, excludedKeys) {
+    const ret = {};
+    for (const key in props) {
+      if (!excludedKeys.includes(key)) {
+        Object.defineProperty(ret, key, {
+          enumerable: true,
+          get: () => props[key]
+        });
+      }
+    }
+    return ret;
+  }
+  function withAsyncContext(getAwaitable) {
+    const ctx = getCurrentInstance();
+    if (!ctx) {
+      warn$1(
+        `withAsyncContext called without active current instance. This is likely a bug.`
+      );
+    }
+    let awaitable = getAwaitable();
+    unsetCurrentInstance();
+    if (isPromise(awaitable)) {
+      awaitable = awaitable.catch((e) => {
+        setCurrentInstance(ctx);
+        throw e;
+      });
+    }
+    return [awaitable, () => setCurrentInstance(ctx)];
+  }
+
+  function createDuplicateChecker() {
+    const cache = /* @__PURE__ */ Object.create(null);
+    return (type, key) => {
+      if (cache[key]) {
+        warn$1(`${type} property "${key}" is already defined in ${cache[key]}.`);
+      } else {
+        cache[key] = type;
+      }
+    };
+  }
+  let shouldCacheAccess = true;
+  function applyOptions(instance) {
+    const options = resolveMergedOptions(instance);
+    const publicThis = instance.proxy;
+    const ctx = instance.ctx;
+    shouldCacheAccess = false;
+    if (options.beforeCreate) {
+      callHook$1(options.beforeCreate, instance, "bc");
+    }
+    const {
+      // state
+      data: dataOptions,
+      computed: computedOptions,
+      methods,
+      watch: watchOptions,
+      provide: provideOptions,
+      inject: injectOptions,
+      // lifecycle
+      created,
+      beforeMount,
+      mounted,
+      beforeUpdate,
+      updated,
+      activated,
+      deactivated,
+      beforeDestroy,
+      beforeUnmount,
+      destroyed,
+      unmounted,
+      render,
+      renderTracked,
+      renderTriggered,
+      errorCaptured,
+      serverPrefetch,
+      // public API
+      expose,
+      inheritAttrs,
+      // assets
+      components,
+      directives,
+      filters
+    } = options;
+    const checkDuplicateProperties = createDuplicateChecker() ;
+    {
+      const [propsOptions] = instance.propsOptions;
+      if (propsOptions) {
+        for (const key in propsOptions) {
+          checkDuplicateProperties("Props" /* PROPS */, key);
+        }
+      }
+    }
+    if (injectOptions) {
+      resolveInjections(injectOptions, ctx, checkDuplicateProperties);
+    }
+    if (methods) {
+      for (const key in methods) {
+        const methodHandler = methods[key];
+        if (isFunction(methodHandler)) {
+          {
+            Object.defineProperty(ctx, key, {
+              value: methodHandler.bind(publicThis),
+              configurable: true,
+              enumerable: true,
+              writable: true
+            });
+          }
+          {
+            checkDuplicateProperties("Methods" /* METHODS */, key);
+          }
+        } else {
+          warn$1(
+            `Method "${key}" has type "${typeof methodHandler}" in the component definition. Did you reference the function correctly?`
+          );
+        }
+      }
+    }
+    if (dataOptions) {
+      if (!isFunction(dataOptions)) {
+        warn$1(
+          `The data option must be a function. Plain object usage is no longer supported.`
+        );
+      }
+      const data = dataOptions.call(publicThis, publicThis);
+      if (isPromise(data)) {
+        warn$1(
+          `data() returned a Promise - note data() cannot be async; If you intend to perform data fetching before component renders, use async setup() + <Suspense>.`
+        );
+      }
+      if (!isObject(data)) {
+        warn$1(`data() should return an object.`);
+      } else {
+        instance.data = reactive(data);
+        {
+          for (const key in data) {
+            checkDuplicateProperties("Data" /* DATA */, key);
+            if (!isReservedPrefix(key[0])) {
+              Object.defineProperty(ctx, key, {
+                configurable: true,
+                enumerable: true,
+                get: () => data[key],
+                set: NOOP
+              });
+            }
+          }
+        }
+      }
+    }
+    shouldCacheAccess = true;
+    if (computedOptions) {
+      for (const key in computedOptions) {
+        const opt = computedOptions[key];
+        const get = isFunction(opt) ? opt.bind(publicThis, publicThis) : isFunction(opt.get) ? opt.get.bind(publicThis, publicThis) : NOOP;
+        if (get === NOOP) {
+          warn$1(`Computed property "${key}" has no getter.`);
+        }
+        const set = !isFunction(opt) && isFunction(opt.set) ? opt.set.bind(publicThis) : () => {
+          warn$1(
+            `Write operation failed: computed property "${key}" is readonly.`
+          );
+        } ;
+        const c = computed({
+          get,
+          set
+        });
+        Object.defineProperty(ctx, key, {
+          enumerable: true,
+          configurable: true,
+          get: () => c.value,
+          set: (v) => c.value = v
+        });
+        {
+          checkDuplicateProperties("Computed" /* COMPUTED */, key);
+        }
+      }
+    }
+    if (watchOptions) {
+      for (const key in watchOptions) {
+        createWatcher(watchOptions[key], ctx, publicThis, key);
+      }
+    }
+    if (provideOptions) {
+      const provides = isFunction(provideOptions) ? provideOptions.call(publicThis) : provideOptions;
+      Reflect.ownKeys(provides).forEach((key) => {
+        provide(key, provides[key]);
+      });
+    }
+    if (created) {
+      callHook$1(created, instance, "c");
+    }
+    function registerLifecycleHook(register, hook) {
+      if (isArray(hook)) {
+        hook.forEach((_hook) => register(_hook.bind(publicThis)));
+      } else if (hook) {
+        register(hook.bind(publicThis));
+      }
+    }
+    registerLifecycleHook(onBeforeMount, beforeMount);
+    registerLifecycleHook(onMounted, mounted);
+    registerLifecycleHook(onBeforeUpdate, beforeUpdate);
+    registerLifecycleHook(onUpdated, updated);
+    registerLifecycleHook(onActivated, activated);
+    registerLifecycleHook(onDeactivated, deactivated);
+    registerLifecycleHook(onErrorCaptured, errorCaptured);
+    registerLifecycleHook(onRenderTracked, renderTracked);
+    registerLifecycleHook(onRenderTriggered, renderTriggered);
+    registerLifecycleHook(onBeforeUnmount, beforeUnmount);
+    registerLifecycleHook(onUnmounted, unmounted);
+    registerLifecycleHook(onServerPrefetch, serverPrefetch);
+    if (isArray(expose)) {
+      if (expose.length) {
+        const exposed = instance.exposed || (instance.exposed = {});
+        expose.forEach((key) => {
+          Object.defineProperty(exposed, key, {
+            get: () => publicThis[key],
+            set: (val) => publicThis[key] = val
+          });
+        });
+      } else if (!instance.exposed) {
+        instance.exposed = {};
+      }
+    }
+    if (render && instance.render === NOOP) {
+      instance.render = render;
+    }
+    if (inheritAttrs != null) {
+      instance.inheritAttrs = inheritAttrs;
+    }
+    if (components)
+      instance.components = components;
+    if (directives)
+      instance.directives = directives;
+  }
+  function resolveInjections(injectOptions, ctx, checkDuplicateProperties = NOOP) {
+    if (isArray(injectOptions)) {
+      injectOptions = normalizeInject(injectOptions);
+    }
+    for (const key in injectOptions) {
+      const opt = injectOptions[key];
+      let injected;
+      if (isObject(opt)) {
+        if ("default" in opt) {
+          injected = inject(
+            opt.from || key,
+            opt.default,
+            true
+          );
+        } else {
+          injected = inject(opt.from || key);
+        }
+      } else {
+        injected = inject(opt);
+      }
+      if (isRef(injected)) {
+        Object.defineProperty(ctx, key, {
+          enumerable: true,
+          configurable: true,
+          get: () => injected.value,
+          set: (v) => injected.value = v
+        });
+      } else {
+        ctx[key] = injected;
+      }
+      {
+        checkDuplicateProperties("Inject" /* INJECT */, key);
+      }
+    }
+  }
+  function callHook$1(hook, instance, type) {
+    callWithAsyncErrorHandling(
+      isArray(hook) ? hook.map((h) => h.bind(instance.proxy)) : hook.bind(instance.proxy),
+      instance,
+      type
+    );
+  }
+  function createWatcher(raw, ctx, publicThis, key) {
+    const getter = key.includes(".") ? createPathGetter(publicThis, key) : () => publicThis[key];
+    if (isString(raw)) {
+      const handler = ctx[raw];
+      if (isFunction(handler)) {
+        watch(getter, handler);
+      } else {
+        warn$1(`Invalid watch handler specified by key "${raw}"`, handler);
+      }
+    } else if (isFunction(raw)) {
+      watch(getter, raw.bind(publicThis));
+    } else if (isObject(raw)) {
+      if (isArray(raw)) {
+        raw.forEach((r) => createWatcher(r, ctx, publicThis, key));
+      } else {
+        const handler = isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler];
+        if (isFunction(handler)) {
+          watch(getter, handler, raw);
+        } else {
+          warn$1(`Invalid watch handler specified by key "${raw.handler}"`, handler);
+        }
+      }
+    } else {
+      warn$1(`Invalid watch option: "${key}"`, raw);
+    }
+  }
+  function resolveMergedOptions(instance) {
+    const base = instance.type;
+    const { mixins, extends: extendsOptions } = base;
+    const {
+      mixins: globalMixins,
+      optionsCache: cache,
+      config: { optionMergeStrategies }
+    } = instance.appContext;
+    const cached = cache.get(base);
+    let resolved;
+    if (cached) {
+      resolved = cached;
+    } else if (!globalMixins.length && !mixins && !extendsOptions) {
+      {
+        resolved = base;
+      }
+    } else {
+      resolved = {};
+      if (globalMixins.length) {
+        globalMixins.forEach(
+          (m) => mergeOptions(resolved, m, optionMergeStrategies, true)
+        );
+      }
+      mergeOptions(resolved, base, optionMergeStrategies);
+    }
+    if (isObject(base)) {
+      cache.set(base, resolved);
+    }
+    return resolved;
+  }
+  function mergeOptions(to, from, strats, asMixin = false) {
+    const { mixins, extends: extendsOptions } = from;
+    if (extendsOptions) {
+      mergeOptions(to, extendsOptions, strats, true);
+    }
+    if (mixins) {
+      mixins.forEach(
+        (m) => mergeOptions(to, m, strats, true)
+      );
+    }
+    for (const key in from) {
+      if (asMixin && key === "expose") {
+        warn$1(
+          `"expose" option is ignored when declared in mixins or extends. It should only be declared in the base component itself.`
+        );
+      } else {
+        const strat = internalOptionMergeStrats[key] || strats && strats[key];
+        to[key] = strat ? strat(to[key], from[key]) : from[key];
+      }
+    }
+    return to;
+  }
+  const internalOptionMergeStrats = {
+    data: mergeDataFn,
+    props: mergeEmitsOrPropsOptions,
+    emits: mergeEmitsOrPropsOptions,
+    // objects
+    methods: mergeObjectOptions,
+    computed: mergeObjectOptions,
+    // lifecycle
+    beforeCreate: mergeAsArray$1,
+    created: mergeAsArray$1,
+    beforeMount: mergeAsArray$1,
+    mounted: mergeAsArray$1,
+    beforeUpdate: mergeAsArray$1,
+    updated: mergeAsArray$1,
+    beforeDestroy: mergeAsArray$1,
+    beforeUnmount: mergeAsArray$1,
+    destroyed: mergeAsArray$1,
+    unmounted: mergeAsArray$1,
+    activated: mergeAsArray$1,
+    deactivated: mergeAsArray$1,
+    errorCaptured: mergeAsArray$1,
+    serverPrefetch: mergeAsArray$1,
+    // assets
+    components: mergeObjectOptions,
+    directives: mergeObjectOptions,
+    // watch
+    watch: mergeWatchOptions,
+    // provide / inject
+    provide: mergeDataFn,
+    inject: mergeInject
+  };
+  function mergeDataFn(to, from) {
+    if (!from) {
+      return to;
+    }
+    if (!to) {
+      return from;
+    }
+    return function mergedDataFn() {
+      return (extend)(
+        isFunction(to) ? to.call(this, this) : to,
+        isFunction(from) ? from.call(this, this) : from
+      );
+    };
+  }
+  function mergeInject(to, from) {
+    return mergeObjectOptions(normalizeInject(to), normalizeInject(from));
+  }
+  function normalizeInject(raw) {
+    if (isArray(raw)) {
+      const res = {};
+      for (let i = 0; i < raw.length; i++) {
+        res[raw[i]] = raw[i];
+      }
+      return res;
+    }
+    return raw;
+  }
+  function mergeAsArray$1(to, from) {
+    return to ? [...new Set([].concat(to, from))] : from;
+  }
+  function mergeObjectOptions(to, from) {
+    return to ? extend(/* @__PURE__ */ Object.create(null), to, from) : from;
+  }
+  function mergeEmitsOrPropsOptions(to, from) {
+    if (to) {
+      if (isArray(to) && isArray(from)) {
+        return [.../* @__PURE__ */ new Set([...to, ...from])];
+      }
+      return extend(
+        /* @__PURE__ */ Object.create(null),
+        normalizePropsOrEmits(to),
+        normalizePropsOrEmits(from != null ? from : {})
+      );
+    } else {
+      return from;
+    }
+  }
+  function mergeWatchOptions(to, from) {
+    if (!to)
+      return from;
+    if (!from)
+      return to;
+    const merged = extend(/* @__PURE__ */ Object.create(null), to);
+    for (const key in from) {
+      merged[key] = mergeAsArray$1(to[key], from[key]);
+    }
+    return merged;
+  }
+
+  function createAppContext() {
+    return {
+      app: null,
+      config: {
+        isNativeTag: NO,
+        performance: false,
+        globalProperties: {},
+        optionMergeStrategies: {},
+        errorHandler: void 0,
+        warnHandler: void 0,
+        compilerOptions: {}
+      },
+      mixins: [],
+      components: {},
+      directives: {},
+      provides: /* @__PURE__ */ Object.create(null),
+      optionsCache: /* @__PURE__ */ new WeakMap(),
+      propsCache: /* @__PURE__ */ new WeakMap(),
+      emitsCache: /* @__PURE__ */ new WeakMap()
+    };
+  }
+  let uid$1 = 0;
+  function createAppAPI(render, hydrate) {
+    return function createApp(rootComponent, rootProps = null) {
+      if (!isFunction(rootComponent)) {
+        rootComponent = extend({}, rootComponent);
+      }
+      if (rootProps != null && !isObject(rootProps)) {
+        warn$1(`root props passed to app.mount() must be an object.`);
+        rootProps = null;
+      }
+      const context = createAppContext();
+      const installedPlugins = /* @__PURE__ */ new WeakSet();
+      let isMounted = false;
+      const app = context.app = {
+        _uid: uid$1++,
+        _component: rootComponent,
+        _props: rootProps,
+        _container: null,
+        _context: context,
+        _instance: null,
+        version,
+        get config() {
+          return context.config;
+        },
+        set config(v) {
+          {
+            warn$1(
+              `app.config cannot be replaced. Modify individual options instead.`
+            );
+          }
+        },
+        use(plugin, ...options) {
+          if (installedPlugins.has(plugin)) {
+            warn$1(`Plugin has already been applied to target app.`);
+          } else if (plugin && isFunction(plugin.install)) {
+            installedPlugins.add(plugin);
+            plugin.install(app, ...options);
+          } else if (isFunction(plugin)) {
+            installedPlugins.add(plugin);
+            plugin(app, ...options);
+          } else {
+            warn$1(
+              `A plugin must either be a function or an object with an "install" function.`
+            );
+          }
+          return app;
+        },
+        mixin(mixin) {
+          {
+            if (!context.mixins.includes(mixin)) {
+              context.mixins.push(mixin);
+            } else {
+              warn$1(
+                "Mixin has already been applied to target app" + (mixin.name ? `: ${mixin.name}` : "")
+              );
+            }
+          }
+          return app;
+        },
+        component(name, component) {
+          {
+            validateComponentName(name, context.config);
+          }
+          if (!component) {
+            return context.components[name];
+          }
+          if (context.components[name]) {
+            warn$1(`Component "${name}" has already been registered in target app.`);
+          }
+          context.components[name] = component;
+          return app;
+        },
+        directive(name, directive) {
+          {
+            validateDirectiveName(name);
+          }
+          if (!directive) {
+            return context.directives[name];
+          }
+          if (context.directives[name]) {
+            warn$1(`Directive "${name}" has already been registered in target app.`);
+          }
+          context.directives[name] = directive;
+          return app;
+        },
+        mount(rootContainer, isHydrate, namespace) {
+          if (!isMounted) {
+            if (rootContainer.__vue_app__) {
+              warn$1(
+                `There is already an app instance mounted on the host container.
+ If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
+              );
+            }
+            const vnode = createVNode(rootComponent, rootProps);
+            vnode.appContext = context;
+            if (namespace === true) {
+              namespace = "svg";
+            } else if (namespace === false) {
+              namespace = void 0;
+            }
+            {
+              context.reload = () => {
+                render(
+                  cloneVNode(vnode),
+                  rootContainer,
+                  namespace
+                );
+              };
+            }
+            if (isHydrate && hydrate) {
+              hydrate(vnode, rootContainer);
+            } else {
+              render(vnode, rootContainer, namespace);
+            }
+            isMounted = true;
+            app._container = rootContainer;
+            rootContainer.__vue_app__ = app;
+            {
+              app._instance = vnode.component;
+              devtoolsInitApp(app, version);
+            }
+            return getExposeProxy(vnode.component) || vnode.component.proxy;
+          } else {
+            warn$1(
+              `App has already been mounted.
+If you want to remount the same app, move your app creation logic into a factory function and create fresh app instances for each mount - e.g. \`const createMyApp = () => createApp(App)\``
+            );
+          }
+        },
+        unmount() {
+          if (isMounted) {
+            render(null, app._container);
+            {
+              app._instance = null;
+              devtoolsUnmountApp(app);
+            }
+            delete app._container.__vue_app__;
+          } else {
+            warn$1(`Cannot unmount an app that is not mounted.`);
+          }
+        },
+        provide(key, value) {
+          if (key in context.provides) {
+            warn$1(
+              `App already provides property with key "${String(key)}". It will be overwritten with the new value.`
+            );
+          }
+          context.provides[key] = value;
+          return app;
+        },
+        runWithContext(fn) {
+          const lastApp = currentApp;
+          currentApp = app;
+          try {
+            return fn();
+          } finally {
+            currentApp = lastApp;
+          }
+        }
+      };
+      return app;
+    };
+  }
+  let currentApp = null;
+
+  function provide(key, value) {
+    if (!currentInstance) {
+      {
+        warn$1(`provide() can only be used inside setup().`);
+      }
+    } else {
+      let provides = currentInstance.provides;
+      const parentProvides = currentInstance.parent && currentInstance.parent.provides;
+      if (parentProvides === provides) {
+        provides = currentInstance.provides = Object.create(parentProvides);
+      }
+      provides[key] = value;
+    }
+  }
+  function inject(key, defaultValue, treatDefaultAsFactory = false) {
+    const instance = currentInstance || currentRenderingInstance;
+    if (instance || currentApp) {
+      const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
+      if (provides && key in provides) {
+        return provides[key];
+      } else if (arguments.length > 1) {
+        return treatDefaultAsFactory && isFunction(defaultValue) ? defaultValue.call(instance && instance.proxy) : defaultValue;
+      } else {
+        warn$1(`injection "${String(key)}" not found.`);
+      }
+    } else {
+      warn$1(`inject() can only be used inside setup() or functional components.`);
+    }
+  }
+  function hasInjectionContext() {
+    return !!(currentInstance || currentRenderingInstance || currentApp);
+  }
+
+  function initProps(instance, rawProps, isStateful, isSSR = false) {
+    const props = {};
+    const attrs = {};
+    def(attrs, InternalObjectKey, 1);
+    instance.propsDefaults = /* @__PURE__ */ Object.create(null);
+    setFullProps(instance, rawProps, props, attrs);
+    for (const key in instance.propsOptions[0]) {
+      if (!(key in props)) {
+        props[key] = void 0;
+      }
+    }
+    {
+      validateProps(rawProps || {}, props, instance);
+    }
+    if (isStateful) {
+      instance.props = isSSR ? props : shallowReactive(props);
+    } else {
+      if (!instance.type.props) {
+        instance.props = attrs;
+      } else {
+        instance.props = props;
+      }
+    }
+    instance.attrs = attrs;
+  }
+  function isInHmrContext(instance) {
+    while (instance) {
+      if (instance.type.__hmrId)
+        return true;
+      instance = instance.parent;
+    }
+  }
+  function updateProps(instance, rawProps, rawPrevProps, optimized) {
+    const {
+      props,
+      attrs,
+      vnode: { patchFlag }
+    } = instance;
+    const rawCurrentProps = toRaw(props);
+    const [options] = instance.propsOptions;
+    let hasAttrsChanged = false;
+    if (
+      // always force full diff in dev
+      // - #1942 if hmr is enabled with sfc component
+      // - vite#872 non-sfc component used by sfc component
+      !isInHmrContext(instance) && (optimized || patchFlag > 0) && !(patchFlag & 16)
+    ) {
+      if (patchFlag & 8) {
+        const propsToUpdate = instance.vnode.dynamicProps;
+        for (let i = 0; i < propsToUpdate.length; i++) {
+          let key = propsToUpdate[i];
+          if (isEmitListener(instance.emitsOptions, key)) {
+            continue;
+          }
+          const value = rawProps[key];
+          if (options) {
+            if (hasOwn(attrs, key)) {
+              if (value !== attrs[key]) {
+                attrs[key] = value;
+                hasAttrsChanged = true;
+              }
+            } else {
+              const camelizedKey = camelize(key);
+              props[camelizedKey] = resolvePropValue(
+                options,
+                rawCurrentProps,
+                camelizedKey,
+                value,
+                instance,
+                false
+              );
+            }
+          } else {
+            if (value !== attrs[key]) {
+              attrs[key] = value;
+              hasAttrsChanged = true;
+            }
+          }
+        }
+      }
+    } else {
+      if (setFullProps(instance, rawProps, props, attrs)) {
+        hasAttrsChanged = true;
+      }
+      let kebabKey;
+      for (const key in rawCurrentProps) {
+        if (!rawProps || // for camelCase
+        !hasOwn(rawProps, key) && // it's possible the original props was passed in as kebab-case
+        // and converted to camelCase (#955)
+        ((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey))) {
+          if (options) {
+            if (rawPrevProps && // for camelCase
+            (rawPrevProps[key] !== void 0 || // for kebab-case
+            rawPrevProps[kebabKey] !== void 0)) {
+              props[key] = resolvePropValue(
+                options,
+                rawCurrentProps,
+                key,
+                void 0,
+                instance,
+                true
+              );
+            }
+          } else {
+            delete props[key];
+          }
+        }
+      }
+      if (attrs !== rawCurrentProps) {
+        for (const key in attrs) {
+          if (!rawProps || !hasOwn(rawProps, key) && true) {
+            delete attrs[key];
+            hasAttrsChanged = true;
+          }
+        }
+      }
+    }
+    if (hasAttrsChanged) {
+      trigger(instance, "set", "$attrs");
+    }
+    {
+      validateProps(rawProps || {}, props, instance);
+    }
+  }
+  function setFullProps(instance, rawProps, props, attrs) {
+    const [options, needCastKeys] = instance.propsOptions;
+    let hasAttrsChanged = false;
+    let rawCastValues;
+    if (rawProps) {
+      for (let key in rawProps) {
+        if (isReservedProp(key)) {
+          continue;
+        }
+        const value = rawProps[key];
+        let camelKey;
+        if (options && hasOwn(options, camelKey = camelize(key))) {
+          if (!needCastKeys || !needCastKeys.includes(camelKey)) {
+            props[camelKey] = value;
+          } else {
+            (rawCastValues || (rawCastValues = {}))[camelKey] = value;
+          }
+        } else if (!isEmitListener(instance.emitsOptions, key)) {
+          if (!(key in attrs) || value !== attrs[key]) {
+            attrs[key] = value;
+            hasAttrsChanged = true;
+          }
+        }
+      }
+    }
+    if (needCastKeys) {
+      const rawCurrentProps = toRaw(props);
+      const castValues = rawCastValues || EMPTY_OBJ;
+      for (let i = 0; i < needCastKeys.length; i++) {
+        const key = needCastKeys[i];
+        props[key] = resolvePropValue(
+          options,
+          rawCurrentProps,
+          key,
+          castValues[key],
+          instance,
+          !hasOwn(castValues, key)
+        );
+      }
+    }
+    return hasAttrsChanged;
+  }
+  function resolvePropValue(options, props, key, value, instance, isAbsent) {
+    const opt = options[key];
+    if (opt != null) {
+      const hasDefault = hasOwn(opt, "default");
+      if (hasDefault && value === void 0) {
+        const defaultValue = opt.default;
+        if (opt.type !== Function && !opt.skipFactory && isFunction(defaultValue)) {
+          const { propsDefaults } = instance;
+          if (key in propsDefaults) {
+            value = propsDefaults[key];
+          } else {
+            const reset = setCurrentInstance(instance);
+            value = propsDefaults[key] = defaultValue.call(
+              null,
+              props
+            );
+            reset();
+          }
+        } else {
+          value = defaultValue;
+        }
+      }
+      if (opt[0 /* shouldCast */]) {
+        if (isAbsent && !hasDefault) {
+          value = false;
+        } else if (opt[1 /* shouldCastTrue */] && (value === "" || value === hyphenate(key))) {
+          value = true;
+        }
+      }
+    }
+    return value;
+  }
+  function normalizePropsOptions(comp, appContext, asMixin = false) {
+    const cache = appContext.propsCache;
+    const cached = cache.get(comp);
+    if (cached) {
+      return cached;
+    }
+    const raw = comp.props;
+    const normalized = {};
+    const needCastKeys = [];
+    let hasExtends = false;
+    if (!isFunction(comp)) {
+      const extendProps = (raw2) => {
+        hasExtends = true;
+        const [props, keys] = normalizePropsOptions(raw2, appContext, true);
+        extend(normalized, props);
+        if (keys)
+          needCastKeys.push(...keys);
+      };
+      if (!asMixin && appContext.mixins.length) {
+        appContext.mixins.forEach(extendProps);
+      }
+      if (comp.extends) {
+        extendProps(comp.extends);
+      }
+      if (comp.mixins) {
+        comp.mixins.forEach(extendProps);
+      }
+    }
+    if (!raw && !hasExtends) {
+      if (isObject(comp)) {
+        cache.set(comp, EMPTY_ARR);
+      }
+      return EMPTY_ARR;
+    }
+    if (isArray(raw)) {
+      for (let i = 0; i < raw.length; i++) {
+        if (!isString(raw[i])) {
+          warn$1(`props must be strings when using array syntax.`, raw[i]);
+        }
+        const normalizedKey = camelize(raw[i]);
+        if (validatePropName(normalizedKey)) {
+          normalized[normalizedKey] = EMPTY_OBJ;
+        }
+      }
+    } else if (raw) {
+      if (!isObject(raw)) {
+        warn$1(`invalid props options`, raw);
+      }
+      for (const key in raw) {
+        const normalizedKey = camelize(key);
+        if (validatePropName(normalizedKey)) {
+          const opt = raw[key];
+          const prop = normalized[normalizedKey] = isArray(opt) || isFunction(opt) ? { type: opt } : extend({}, opt);
+          if (prop) {
+            const booleanIndex = getTypeIndex(Boolean, prop.type);
+            const stringIndex = getTypeIndex(String, prop.type);
+            prop[0 /* shouldCast */] = booleanIndex > -1;
+            prop[1 /* shouldCastTrue */] = stringIndex < 0 || booleanIndex < stringIndex;
+            if (booleanIndex > -1 || hasOwn(prop, "default")) {
+              needCastKeys.push(normalizedKey);
+            }
+          }
+        }
+      }
+    }
+    const res = [normalized, needCastKeys];
+    if (isObject(comp)) {
+      cache.set(comp, res);
+    }
+    return res;
+  }
+  function validatePropName(key) {
+    if (key[0] !== "$" && !isReservedProp(key)) {
+      return true;
+    } else {
+      warn$1(`Invalid prop name: "${key}" is a reserved property.`);
+    }
+    return false;
+  }
+  function getType(ctor) {
+    const match = ctor && ctor.toString().match(/^\s*(function|class) (\w+)/);
+    return match ? match[2] : ctor === null ? "null" : "";
+  }
+  function isSameType(a, b) {
+    return getType(a) === getType(b);
+  }
+  function getTypeIndex(type, expectedTypes) {
+    if (isArray(expectedTypes)) {
+      return expectedTypes.findIndex((t) => isSameType(t, type));
+    } else if (isFunction(expectedTypes)) {
+      return isSameType(expectedTypes, type) ? 0 : -1;
+    }
+    return -1;
+  }
+  function validateProps(rawProps, props, instance) {
+    const resolvedValues = toRaw(props);
+    const options = instance.propsOptions[0];
+    for (const key in options) {
+      let opt = options[key];
+      if (opt == null)
+        continue;
+      validateProp(
+        key,
+        resolvedValues[key],
+        opt,
+        shallowReadonly(resolvedValues) ,
+        !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key))
+      );
+    }
+  }
+  function validateProp(name, value, prop, props, isAbsent) {
+    const { type, required, validator, skipCheck } = prop;
+    if (required && isAbsent) {
+      warn$1('Missing required prop: "' + name + '"');
+      return;
+    }
+    if (value == null && !required) {
+      return;
+    }
+    if (type != null && type !== true && !skipCheck) {
+      let isValid = false;
+      const types = isArray(type) ? type : [type];
+      const expectedTypes = [];
+      for (let i = 0; i < types.length && !isValid; i++) {
+        const { valid, expectedType } = assertType(value, types[i]);
+        expectedTypes.push(expectedType || "");
+        isValid = valid;
+      }
+      if (!isValid) {
+        warn$1(getInvalidTypeMessage(name, value, expectedTypes));
+        return;
+      }
+    }
+    if (validator && !validator(value, props)) {
+      warn$1('Invalid prop: custom validator check failed for prop "' + name + '".');
+    }
+  }
+  const isSimpleType = /* @__PURE__ */ makeMap(
+    "String,Number,Boolean,Function,Symbol,BigInt"
+  );
+  function assertType(value, type) {
+    let valid;
+    const expectedType = getType(type);
+    if (isSimpleType(expectedType)) {
+      const t = typeof value;
+      valid = t === expectedType.toLowerCase();
+      if (!valid && t === "object") {
+        valid = value instanceof type;
+      }
+    } else if (expectedType === "Object") {
+      valid = isObject(value);
+    } else if (expectedType === "Array") {
+      valid = isArray(value);
+    } else if (expectedType === "null") {
+      valid = value === null;
+    } else {
+      valid = value instanceof type;
+    }
+    return {
+      valid,
+      expectedType
+    };
+  }
+  function getInvalidTypeMessage(name, value, expectedTypes) {
+    if (expectedTypes.length === 0) {
+      return `Prop type [] for prop "${name}" won't match anything. Did you mean to use type Array instead?`;
+    }
+    let message = `Invalid prop: type check failed for prop "${name}". Expected ${expectedTypes.map(capitalize).join(" | ")}`;
+    const expectedType = expectedTypes[0];
+    const receivedType = toRawType(value);
+    const expectedValue = styleValue(value, expectedType);
+    const receivedValue = styleValue(value, receivedType);
+    if (expectedTypes.length === 1 && isExplicable(expectedType) && !isBoolean(expectedType, receivedType)) {
+      message += ` with value ${expectedValue}`;
+    }
+    message += `, got ${receivedType} `;
+    if (isExplicable(receivedType)) {
+      message += `with value ${receivedValue}.`;
+    }
+    return message;
+  }
+  function styleValue(value, type) {
+    if (type === "String") {
+      return `"${value}"`;
+    } else if (type === "Number") {
+      return `${Number(value)}`;
+    } else {
+      return `${value}`;
+    }
+  }
+  function isExplicable(type) {
+    const explicitTypes = ["string", "number", "boolean"];
+    return explicitTypes.some((elem) => type.toLowerCase() === elem);
+  }
+  function isBoolean(...args) {
+    return args.some((elem) => elem.toLowerCase() === "boolean");
+  }
+
+  const isInternalKey = (key) => key[0] === "_" || key === "$stable";
+  const normalizeSlotValue = (value) => isArray(value) ? value.map(normalizeVNode) : [normalizeVNode(value)];
+  const normalizeSlot = (key, rawSlot, ctx) => {
+    if (rawSlot._n) {
+      return rawSlot;
+    }
+    const normalized = withCtx((...args) => {
+      if (currentInstance && (!ctx || ctx.root === currentInstance.root)) {
+        warn$1(
+          `Slot "${key}" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.`
+        );
+      }
+      return normalizeSlotValue(rawSlot(...args));
+    }, ctx);
+    normalized._c = false;
+    return normalized;
+  };
+  const normalizeObjectSlots = (rawSlots, slots, instance) => {
+    const ctx = rawSlots._ctx;
+    for (const key in rawSlots) {
+      if (isInternalKey(key))
+        continue;
+      const value = rawSlots[key];
+      if (isFunction(value)) {
+        slots[key] = normalizeSlot(key, value, ctx);
+      } else if (value != null) {
+        {
+          warn$1(
+            `Non-function value encountered for slot "${key}". Prefer function slots for better performance.`
+          );
+        }
+        const normalized = normalizeSlotValue(value);
+        slots[key] = () => normalized;
+      }
+    }
+  };
+  const normalizeVNodeSlots = (instance, children) => {
+    if (!isKeepAlive(instance.vnode) && true) {
+      warn$1(
+        `Non-function value encountered for default slot. Prefer function slots for better performance.`
+      );
+    }
+    const normalized = normalizeSlotValue(children);
+    instance.slots.default = () => normalized;
+  };
+  const initSlots = (instance, children) => {
+    if (instance.vnode.shapeFlag & 32) {
+      const type = children._;
+      if (type) {
+        instance.slots = toRaw(children);
+        def(children, "_", type);
+      } else {
+        normalizeObjectSlots(
+          children,
+          instance.slots = {});
+      }
+    } else {
+      instance.slots = {};
+      if (children) {
+        normalizeVNodeSlots(instance, children);
+      }
+    }
+    def(instance.slots, InternalObjectKey, 1);
+  };
+  const updateSlots = (instance, children, optimized) => {
+    const { vnode, slots } = instance;
+    let needDeletionCheck = true;
+    let deletionComparisonTarget = EMPTY_OBJ;
+    if (vnode.shapeFlag & 32) {
+      const type = children._;
+      if (type) {
+        if (isHmrUpdating) {
+          extend(slots, children);
+          trigger(instance, "set", "$slots");
+        } else if (optimized && type === 1) {
+          needDeletionCheck = false;
+        } else {
+          extend(slots, children);
+          if (!optimized && type === 1) {
+            delete slots._;
+          }
+        }
+      } else {
+        needDeletionCheck = !children.$stable;
+        normalizeObjectSlots(children, slots);
+      }
+      deletionComparisonTarget = children;
+    } else if (children) {
+      normalizeVNodeSlots(instance, children);
+      deletionComparisonTarget = { default: 1 };
+    }
+    if (needDeletionCheck) {
+      for (const key in slots) {
+        if (!isInternalKey(key) && deletionComparisonTarget[key] == null) {
+          delete slots[key];
+        }
+      }
+    }
+  };
+
+  function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
+    if (isArray(rawRef)) {
+      rawRef.forEach(
+        (r, i) => setRef(
+          r,
+          oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef),
+          parentSuspense,
+          vnode,
+          isUnmount
+        )
+      );
+      return;
+    }
+    if (isAsyncWrapper(vnode) && !isUnmount) {
+      return;
+    }
+    const refValue = vnode.shapeFlag & 4 ? getExposeProxy(vnode.component) || vnode.component.proxy : vnode.el;
+    const value = isUnmount ? null : refValue;
+    const { i: owner, r: ref } = rawRef;
+    if (!owner) {
+      warn$1(
+        `Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.`
+      );
+      return;
+    }
+    const oldRef = oldRawRef && oldRawRef.r;
+    const refs = owner.refs === EMPTY_OBJ ? owner.refs = {} : owner.refs;
+    const setupState = owner.setupState;
+    if (oldRef != null && oldRef !== ref) {
+      if (isString(oldRef)) {
+        refs[oldRef] = null;
+        if (hasOwn(setupState, oldRef)) {
+          setupState[oldRef] = null;
+        }
+      } else if (isRef(oldRef)) {
+        oldRef.value = null;
+      }
+    }
+    if (isFunction(ref)) {
+      callWithErrorHandling(ref, owner, 12, [value, refs]);
+    } else {
+      const _isString = isString(ref);
+      const _isRef = isRef(ref);
+      if (_isString || _isRef) {
+        const doSet = () => {
+          if (rawRef.f) {
+            const existing = _isString ? hasOwn(setupState, ref) ? setupState[ref] : refs[ref] : ref.value;
+            if (isUnmount) {
+              isArray(existing) && remove(existing, refValue);
+            } else {
+              if (!isArray(existing)) {
+                if (_isString) {
+                  refs[ref] = [refValue];
+                  if (hasOwn(setupState, ref)) {
+                    setupState[ref] = refs[ref];
+                  }
+                } else {
+                  ref.value = [refValue];
+                  if (rawRef.k)
+                    refs[rawRef.k] = ref.value;
+                }
+              } else if (!existing.includes(refValue)) {
+                existing.push(refValue);
+              }
+            }
+          } else if (_isString) {
+            refs[ref] = value;
+            if (hasOwn(setupState, ref)) {
+              setupState[ref] = value;
+            }
+          } else if (_isRef) {
+            ref.value = value;
+            if (rawRef.k)
+              refs[rawRef.k] = value;
+          } else {
+            warn$1("Invalid template ref type:", ref, `(${typeof ref})`);
+          }
+        };
+        if (value) {
+          doSet.id = -1;
+          queuePostRenderEffect(doSet, parentSuspense);
+        } else {
+          doSet();
+        }
+      } else {
+        warn$1("Invalid template ref type:", ref, `(${typeof ref})`);
+      }
+    }
+  }
+
+  let hasMismatch = false;
+  const isSVGContainer = (container) => container.namespaceURI.includes("svg") && container.tagName !== "foreignObject";
+  const isMathMLContainer = (container) => container.namespaceURI.includes("MathML");
+  const getContainerType = (container) => {
+    if (isSVGContainer(container))
+      return "svg";
+    if (isMathMLContainer(container))
+      return "mathml";
+    return void 0;
+  };
+  const isComment = (node) => node.nodeType === 8 /* COMMENT */;
+  function createHydrationFunctions(rendererInternals) {
+    const {
+      mt: mountComponent,
+      p: patch,
+      o: {
+        patchProp,
+        createText,
+        nextSibling,
+        parentNode,
+        remove,
+        insert,
+        createComment
+      }
+    } = rendererInternals;
+    const hydrate = (vnode, container) => {
+      if (!container.hasChildNodes()) {
+        warn$1(
+          `Attempting to hydrate existing markup but container is empty. Performing full mount instead.`
+        );
+        patch(null, vnode, container);
+        flushPostFlushCbs();
+        container._vnode = vnode;
+        return;
+      }
+      hasMismatch = false;
+      hydrateNode(container.firstChild, vnode, null, null, null);
+      flushPostFlushCbs();
+      container._vnode = vnode;
+      if (hasMismatch && true) {
+        console.error(`Hydration completed but contains mismatches.`);
+      }
+    };
+    const hydrateNode = (node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized = false) => {
+      const isFragmentStart = isComment(node) && node.data === "[";
+      const onMismatch = () => handleMismatch(
+        node,
+        vnode,
+        parentComponent,
+        parentSuspense,
+        slotScopeIds,
+        isFragmentStart
+      );
+      const { type, ref, shapeFlag, patchFlag } = vnode;
+      let domType = node.nodeType;
+      vnode.el = node;
+      {
+        if (!("__vnode" in node)) {
+          Object.defineProperty(node, "__vnode", {
+            value: vnode,
+            enumerable: false
+          });
+        }
+        if (!("__vueParentComponent" in node)) {
+          Object.defineProperty(node, "__vueParentComponent", {
+            value: parentComponent,
+            enumerable: false
+          });
+        }
+      }
+      if (patchFlag === -2) {
+        optimized = false;
+        vnode.dynamicChildren = null;
+      }
+      let nextNode = null;
+      switch (type) {
+        case Text:
+          if (domType !== 3 /* TEXT */) {
+            if (vnode.children === "") {
+              insert(vnode.el = createText(""), parentNode(node), node);
+              nextNode = node;
+            } else {
+              nextNode = onMismatch();
+            }
+          } else {
+            if (node.data !== vnode.children) {
+              hasMismatch = true;
+              warn$1(
+                `Hydration text mismatch in`,
+                node.parentNode,
+                `
+  - rendered on server: ${JSON.stringify(
+                node.data
+              )}
+  - expected on client: ${JSON.stringify(vnode.children)}`
+              );
+              node.data = vnode.children;
+            }
+            nextNode = nextSibling(node);
+          }
+          break;
+        case Comment:
+          if (isTemplateNode(node)) {
+            nextNode = nextSibling(node);
+            replaceNode(
+              vnode.el = node.content.firstChild,
+              node,
+              parentComponent
+            );
+          } else if (domType !== 8 /* COMMENT */ || isFragmentStart) {
+            nextNode = onMismatch();
+          } else {
+            nextNode = nextSibling(node);
+          }
+          break;
+        case Static:
+          if (isFragmentStart) {
+            node = nextSibling(node);
+            domType = node.nodeType;
+          }
+          if (domType === 1 /* ELEMENT */ || domType === 3 /* TEXT */) {
+            nextNode = node;
+            const needToAdoptContent = !vnode.children.length;
+            for (let i = 0; i < vnode.staticCount; i++) {
+              if (needToAdoptContent)
+                vnode.children += nextNode.nodeType === 1 /* ELEMENT */ ? nextNode.outerHTML : nextNode.data;
+              if (i === vnode.staticCount - 1) {
+                vnode.anchor = nextNode;
+              }
+              nextNode = nextSibling(nextNode);
+            }
+            return isFragmentStart ? nextSibling(nextNode) : nextNode;
+          } else {
+            onMismatch();
+          }
+          break;
+        case Fragment:
+          if (!isFragmentStart) {
+            nextNode = onMismatch();
+          } else {
+            nextNode = hydrateFragment(
+              node,
+              vnode,
+              parentComponent,
+              parentSuspense,
+              slotScopeIds,
+              optimized
+            );
+          }
+          break;
+        default:
+          if (shapeFlag & 1) {
+            if ((domType !== 1 /* ELEMENT */ || vnode.type.toLowerCase() !== node.tagName.toLowerCase()) && !isTemplateNode(node)) {
+              nextNode = onMismatch();
+            } else {
+              nextNode = hydrateElement(
+                node,
+                vnode,
+                parentComponent,
+                parentSuspense,
+                slotScopeIds,
+                optimized
+              );
+            }
+          } else if (shapeFlag & 6) {
+            vnode.slotScopeIds = slotScopeIds;
+            const container = parentNode(node);
+            if (isFragmentStart) {
+              nextNode = locateClosingAnchor(node);
+            } else if (isComment(node) && node.data === "teleport start") {
+              nextNode = locateClosingAnchor(node, node.data, "teleport end");
+            } else {
+              nextNode = nextSibling(node);
+            }
+            mountComponent(
+              vnode,
+              container,
+              null,
+              parentComponent,
+              parentSuspense,
+              getContainerType(container),
+              optimized
+            );
+            if (isAsyncWrapper(vnode)) {
+              let subTree;
+              if (isFragmentStart) {
+                subTree = createVNode(Fragment);
+                subTree.anchor = nextNode ? nextNode.previousSibling : container.lastChild;
+              } else {
+                subTree = node.nodeType === 3 ? createTextVNode("") : createVNode("div");
+              }
+              subTree.el = node;
+              vnode.component.subTree = subTree;
+            }
+          } else if (shapeFlag & 64) {
+            if (domType !== 8 /* COMMENT */) {
+              nextNode = onMismatch();
+            } else {
+              nextNode = vnode.type.hydrate(
+                node,
+                vnode,
+                parentComponent,
+                parentSuspense,
+                slotScopeIds,
+                optimized,
+                rendererInternals,
+                hydrateChildren
+              );
+            }
+          } else if (shapeFlag & 128) {
+            nextNode = vnode.type.hydrate(
+              node,
+              vnode,
+              parentComponent,
+              parentSuspense,
+              getContainerType(parentNode(node)),
+              slotScopeIds,
+              optimized,
+              rendererInternals,
+              hydrateNode
+            );
+          } else {
+            warn$1("Invalid HostVNode type:", type, `(${typeof type})`);
+          }
+      }
+      if (ref != null) {
+        setRef(ref, null, parentSuspense, vnode);
+      }
+      return nextNode;
+    };
+    const hydrateElement = (el, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
+      optimized = optimized || !!vnode.dynamicChildren;
+      const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode;
+      const forcePatch = type === "input" || type === "option";
+      {
+        if (dirs) {
+          invokeDirectiveHook(vnode, null, parentComponent, "created");
+        }
+        let needCallTransitionHooks = false;
+        if (isTemplateNode(el)) {
+          needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
+          const content = el.content.firstChild;
+          if (needCallTransitionHooks) {
+            transition.beforeEnter(content);
+          }
+          replaceNode(content, el, parentComponent);
+          vnode.el = el = content;
+        }
+        if (shapeFlag & 16 && // skip if element has innerHTML / textContent
+        !(props && (props.innerHTML || props.textContent))) {
+          let next = hydrateChildren(
+            el.firstChild,
+            vnode,
+            el,
+            parentComponent,
+            parentSuspense,
+            slotScopeIds,
+            optimized
+          );
+          let hasWarned = false;
+          while (next) {
+            hasMismatch = true;
+            if (!hasWarned) {
+              warn$1(
+                `Hydration children mismatch on`,
+                el,
+                `
+Server rendered element contains more child nodes than client vdom.`
+              );
+              hasWarned = true;
+            }
+            const cur = next;
+            next = next.nextSibling;
+            remove(cur);
+          }
+        } else if (shapeFlag & 8) {
+          if (el.textContent !== vnode.children) {
+            hasMismatch = true;
+            warn$1(
+              `Hydration text content mismatch on`,
+              el,
+              `
+  - rendered on server: ${el.textContent}
+  - expected on client: ${vnode.children}`
+            );
+            el.textContent = vnode.children;
+          }
+        }
+        if (props) {
+          {
+            for (const key in props) {
+              if (propHasMismatch(el, key, props[key], vnode, parentComponent)) {
+                hasMismatch = true;
+              }
+              if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
+              key[0] === ".") {
+                patchProp(
+                  el,
+                  key,
+                  null,
+                  props[key],
+                  void 0,
+                  void 0,
+                  parentComponent
+                );
+              }
+            }
+          }
+        }
+        let vnodeHooks;
+        if (vnodeHooks = props && props.onVnodeBeforeMount) {
+          invokeVNodeHook(vnodeHooks, parentComponent, vnode);
+        }
+        if (dirs) {
+          invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
+        }
+        if ((vnodeHooks = props && props.onVnodeMounted) || dirs || needCallTransitionHooks) {
+          queueEffectWithSuspense(() => {
+            vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
+            needCallTransitionHooks && transition.enter(el);
+            dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
+          }, parentSuspense);
+        }
+      }
+      return el.nextSibling;
+    };
+    const hydrateChildren = (node, parentVNode, container, parentComponent, parentSuspense, slotScopeIds, optimized) => {
+      optimized = optimized || !!parentVNode.dynamicChildren;
+      const children = parentVNode.children;
+      const l = children.length;
+      let hasWarned = false;
+      for (let i = 0; i < l; i++) {
+        const vnode = optimized ? children[i] : children[i] = normalizeVNode(children[i]);
+        if (node) {
+          node = hydrateNode(
+            node,
+            vnode,
+            parentComponent,
+            parentSuspense,
+            slotScopeIds,
+            optimized
+          );
+        } else if (vnode.type === Text && !vnode.children) {
+          continue;
+        } else {
+          hasMismatch = true;
+          if (!hasWarned) {
+            warn$1(
+              `Hydration children mismatch on`,
+              container,
+              `
+Server rendered element contains fewer child nodes than client vdom.`
+            );
+            hasWarned = true;
+          }
+          patch(
+            null,
+            vnode,
+            container,
+            null,
+            parentComponent,
+            parentSuspense,
+            getContainerType(container),
+            slotScopeIds
+          );
+        }
+      }
+      return node;
+    };
+    const hydrateFragment = (node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
+      const { slotScopeIds: fragmentSlotScopeIds } = vnode;
+      if (fragmentSlotScopeIds) {
+        slotScopeIds = slotScopeIds ? slotScopeIds.concat(fragmentSlotScopeIds) : fragmentSlotScopeIds;
+      }
+      const container = parentNode(node);
+      const next = hydrateChildren(
+        nextSibling(node),
+        vnode,
+        container,
+        parentComponent,
+        parentSuspense,
+        slotScopeIds,
+        optimized
+      );
+      if (next && isComment(next) && next.data === "]") {
+        return nextSibling(vnode.anchor = next);
+      } else {
+        hasMismatch = true;
+        insert(vnode.anchor = createComment(`]`), container, next);
+        return next;
+      }
+    };
+    const handleMismatch = (node, vnode, parentComponent, parentSuspense, slotScopeIds, isFragment) => {
+      hasMismatch = true;
+      warn$1(
+        `Hydration node mismatch:
+- rendered on server:`,
+        node,
+        node.nodeType === 3 /* TEXT */ ? `(text)` : isComment(node) && node.data === "[" ? `(start of fragment)` : ``,
+        `
+- expected on client:`,
+        vnode.type
+      );
+      vnode.el = null;
+      if (isFragment) {
+        const end = locateClosingAnchor(node);
+        while (true) {
+          const next2 = nextSibling(node);
+          if (next2 && next2 !== end) {
+            remove(next2);
+          } else {
+            break;
+          }
+        }
+      }
+      const next = nextSibling(node);
+      const container = parentNode(node);
+      remove(node);
+      patch(
+        null,
+        vnode,
+        container,
+        next,
+        parentComponent,
+        parentSuspense,
+        getContainerType(container),
+        slotScopeIds
+      );
+      return next;
+    };
+    const locateClosingAnchor = (node, open = "[", close = "]") => {
+      let match = 0;
+      while (node) {
+        node = nextSibling(node);
+        if (node && isComment(node)) {
+          if (node.data === open)
+            match++;
+          if (node.data === close) {
+            if (match === 0) {
+              return nextSibling(node);
+            } else {
+              match--;
+            }
+          }
+        }
+      }
+      return node;
+    };
+    const replaceNode = (newNode, oldNode, parentComponent) => {
+      const parentNode2 = oldNode.parentNode;
+      if (parentNode2) {
+        parentNode2.replaceChild(newNode, oldNode);
+      }
+      let parent = parentComponent;
+      while (parent) {
+        if (parent.vnode.el === oldNode) {
+          parent.vnode.el = parent.subTree.el = newNode;
+        }
+        parent = parent.parent;
+      }
+    };
+    const isTemplateNode = (node) => {
+      return node.nodeType === 1 /* ELEMENT */ && node.tagName.toLowerCase() === "template";
+    };
+    return [hydrate, hydrateNode];
+  }
+  function propHasMismatch(el, key, clientValue, vnode, instance) {
+    var _a;
+    let mismatchType;
+    let mismatchKey;
+    let actual;
+    let expected;
+    if (key === "class") {
+      actual = el.getAttribute("class");
+      expected = normalizeClass(clientValue);
+      if (!isSetEqual(toClassSet(actual || ""), toClassSet(expected))) {
+        mismatchType = mismatchKey = `class`;
+      }
+    } else if (key === "style") {
+      actual = el.getAttribute("style");
+      expected = isString(clientValue) ? clientValue : stringifyStyle(normalizeStyle(clientValue));
+      const actualMap = toStyleMap(actual);
+      const expectedMap = toStyleMap(expected);
+      if (vnode.dirs) {
+        for (const { dir, value } of vnode.dirs) {
+          if (dir.name === "show" && !value) {
+            expectedMap.set("display", "none");
+          }
+        }
+      }
+      const cssVars = (_a = instance == null ? void 0 : instance.getCssVars) == null ? void 0 : _a.call(instance);
+      for (const key2 in cssVars) {
+        expectedMap.set(`--${key2}`, String(cssVars[key2]));
+      }
+      if (!isMapEqual(actualMap, expectedMap)) {
+        mismatchType = mismatchKey = "style";
+      }
+    } else if (el instanceof SVGElement && isKnownSvgAttr(key) || el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key))) {
+      if (isBooleanAttr(key)) {
+        actual = el.hasAttribute(key);
+        expected = includeBooleanAttr(clientValue);
+      } else if (clientValue == null) {
+        actual = el.hasAttribute(key);
+        expected = false;
+      } else {
+        if (el.hasAttribute(key)) {
+          actual = el.getAttribute(key);
+        } else if (key === "value" && el.tagName === "TEXTAREA") {
+          actual = el.value;
+        } else {
+          actual = false;
+        }
+        expected = isRenderableAttrValue(clientValue) ? String(clientValue) : false;
+      }
+      if (actual !== expected) {
+        mismatchType = `attribute`;
+        mismatchKey = key;
+      }
+    }
+    if (mismatchType) {
+      const format = (v) => v === false ? `(not rendered)` : `${mismatchKey}="${v}"`;
+      const preSegment = `Hydration ${mismatchType} mismatch on`;
+      const postSegment = `
+  - rendered on server: ${format(actual)}
+  - expected on client: ${format(expected)}
+  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
+  You should fix the source of the mismatch.`;
+      {
+        warn$1(preSegment, el, postSegment);
+      }
+      return true;
+    }
+    return false;
+  }
+  function toClassSet(str) {
+    return new Set(str.trim().split(/\s+/));
+  }
+  function isSetEqual(a, b) {
+    if (a.size !== b.size) {
+      return false;
+    }
+    for (const s of a) {
+      if (!b.has(s)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function toStyleMap(str) {
+    const styleMap = /* @__PURE__ */ new Map();
+    for (const item of str.split(";")) {
+      let [key, value] = item.split(":");
+      key = key == null ? void 0 : key.trim();
+      value = value == null ? void 0 : value.trim();
+      if (key && value) {
+        styleMap.set(key, value);
+      }
+    }
+    return styleMap;
+  }
+  function isMapEqual(a, b) {
+    if (a.size !== b.size) {
+      return false;
+    }
+    for (const [key, value] of a) {
+      if (value !== b.get(key)) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  let supported;
+  let perf;
+  function startMeasure(instance, type) {
+    if (instance.appContext.config.performance && isSupported()) {
+      perf.mark(`vue-${type}-${instance.uid}`);
+    }
+    {
+      devtoolsPerfStart(instance, type, isSupported() ? perf.now() : Date.now());
+    }
+  }
+  function endMeasure(instance, type) {
+    if (instance.appContext.config.performance && isSupported()) {
+      const startTag = `vue-${type}-${instance.uid}`;
+      const endTag = startTag + `:end`;
+      perf.mark(endTag);
+      perf.measure(
+        `<${formatComponentName(instance, instance.type)}> ${type}`,
+        startTag,
+        endTag
+      );
+      perf.clearMarks(startTag);
+      perf.clearMarks(endTag);
+    }
+    {
+      devtoolsPerfEnd(instance, type, isSupported() ? perf.now() : Date.now());
+    }
+  }
+  function isSupported() {
+    if (supported !== void 0) {
+      return supported;
+    }
+    if (typeof window !== "undefined" && window.performance) {
+      supported = true;
+      perf = window.performance;
+    } else {
+      supported = false;
+    }
+    return supported;
+  }
+
+  const queuePostRenderEffect = queueEffectWithSuspense ;
+  function createRenderer(options) {
+    return baseCreateRenderer(options);
+  }
+  function createHydrationRenderer(options) {
+    return baseCreateRenderer(options, createHydrationFunctions);
+  }
+  function baseCreateRenderer(options, createHydrationFns) {
+    const target = getGlobalThis();
+    target.__VUE__ = true;
+    {
+      setDevtoolsHook$1(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, target);
+    }
+    const {
+      insert: hostInsert,
+      remove: hostRemove,
+      patchProp: hostPatchProp,
+      createElement: hostCreateElement,
+      createText: hostCreateText,
+      createComment: hostCreateComment,
+      setText: hostSetText,
+      setElementText: hostSetElementText,
+      parentNode: hostParentNode,
+      nextSibling: hostNextSibling,
+      setScopeId: hostSetScopeId = NOOP,
+      insertStaticContent: hostInsertStaticContent
+    } = options;
+    const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, namespace = void 0, slotScopeIds = null, optimized = isHmrUpdating ? false : !!n2.dynamicChildren) => {
+      if (n1 === n2) {
+        return;
+      }
+      if (n1 && !isSameVNodeType(n1, n2)) {
+        anchor = getNextHostNode(n1);
+        unmount(n1, parentComponent, parentSuspense, true);
+        n1 = null;
+      }
+      if (n2.patchFlag === -2) {
+        optimized = false;
+        n2.dynamicChildren = null;
+      }
+      const { type, ref, shapeFlag } = n2;
+      switch (type) {
+        case Text:
+          processText(n1, n2, container, anchor);
+          break;
+        case Comment:
+          processCommentNode(n1, n2, container, anchor);
+          break;
+        case Static:
+          if (n1 == null) {
+            mountStaticNode(n2, container, anchor, namespace);
+          } else {
+            patchStaticNode(n1, n2, container, namespace);
+          }
+          break;
+        case Fragment:
+          processFragment(
+            n1,
+            n2,
+            container,
+            anchor,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+          break;
+        default:
+          if (shapeFlag & 1) {
+            processElement(
+              n1,
+              n2,
+              container,
+              anchor,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+          } else if (shapeFlag & 6) {
+            processComponent(
+              n1,
+              n2,
+              container,
+              anchor,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+          } else if (shapeFlag & 64) {
+            type.process(
+              n1,
+              n2,
+              container,
+              anchor,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized,
+              internals
+            );
+          } else if (shapeFlag & 128) {
+            type.process(
+              n1,
+              n2,
+              container,
+              anchor,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized,
+              internals
+            );
+          } else {
+            warn$1("Invalid VNode type:", type, `(${typeof type})`);
+          }
+      }
+      if (ref != null && parentComponent) {
+        setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2);
+      }
+    };
+    const processText = (n1, n2, container, anchor) => {
+      if (n1 == null) {
+        hostInsert(
+          n2.el = hostCreateText(n2.children),
+          container,
+          anchor
+        );
+      } else {
+        const el = n2.el = n1.el;
+        if (n2.children !== n1.children) {
+          hostSetText(el, n2.children);
+        }
+      }
+    };
+    const processCommentNode = (n1, n2, container, anchor) => {
+      if (n1 == null) {
+        hostInsert(
+          n2.el = hostCreateComment(n2.children || ""),
+          container,
+          anchor
+        );
+      } else {
+        n2.el = n1.el;
+      }
+    };
+    const mountStaticNode = (n2, container, anchor, namespace) => {
+      [n2.el, n2.anchor] = hostInsertStaticContent(
+        n2.children,
+        container,
+        anchor,
+        namespace,
+        n2.el,
+        n2.anchor
+      );
+    };
+    const patchStaticNode = (n1, n2, container, namespace) => {
+      if (n2.children !== n1.children) {
+        const anchor = hostNextSibling(n1.anchor);
+        removeStaticNode(n1);
+        [n2.el, n2.anchor] = hostInsertStaticContent(
+          n2.children,
+          container,
+          anchor,
+          namespace
+        );
+      } else {
+        n2.el = n1.el;
+        n2.anchor = n1.anchor;
+      }
+    };
+    const moveStaticNode = ({ el, anchor }, container, nextSibling) => {
+      let next;
+      while (el && el !== anchor) {
+        next = hostNextSibling(el);
+        hostInsert(el, container, nextSibling);
+        el = next;
+      }
+      hostInsert(anchor, container, nextSibling);
+    };
+    const removeStaticNode = ({ el, anchor }) => {
+      let next;
+      while (el && el !== anchor) {
+        next = hostNextSibling(el);
+        hostRemove(el);
+        el = next;
+      }
+      hostRemove(anchor);
+    };
+    const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
+      if (n2.type === "svg") {
+        namespace = "svg";
+      } else if (n2.type === "math") {
+        namespace = "mathml";
+      }
+      if (n1 == null) {
+        mountElement(
+          n2,
+          container,
+          anchor,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds,
+          optimized
+        );
+      } else {
+        patchElement(
+          n1,
+          n2,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds,
+          optimized
+        );
+      }
+    };
+    const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
+      let el;
+      let vnodeHook;
+      const { props, shapeFlag, transition, dirs } = vnode;
+      el = vnode.el = hostCreateElement(
+        vnode.type,
+        namespace,
+        props && props.is,
+        props
+      );
+      if (shapeFlag & 8) {
+        hostSetElementText(el, vnode.children);
+      } else if (shapeFlag & 16) {
+        mountChildren(
+          vnode.children,
+          el,
+          null,
+          parentComponent,
+          parentSuspense,
+          resolveChildrenNamespace(vnode, namespace),
+          slotScopeIds,
+          optimized
+        );
+      }
+      if (dirs) {
+        invokeDirectiveHook(vnode, null, parentComponent, "created");
+      }
+      setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent);
+      if (props) {
+        for (const key in props) {
+          if (key !== "value" && !isReservedProp(key)) {
+            hostPatchProp(
+              el,
+              key,
+              null,
+              props[key],
+              namespace,
+              vnode.children,
+              parentComponent,
+              parentSuspense,
+              unmountChildren
+            );
+          }
+        }
+        if ("value" in props) {
+          hostPatchProp(el, "value", null, props.value, namespace);
+        }
+        if (vnodeHook = props.onVnodeBeforeMount) {
+          invokeVNodeHook(vnodeHook, parentComponent, vnode);
+        }
+      }
+      {
+        Object.defineProperty(el, "__vnode", {
+          value: vnode,
+          enumerable: false
+        });
+        Object.defineProperty(el, "__vueParentComponent", {
+          value: parentComponent,
+          enumerable: false
+        });
+      }
+      if (dirs) {
+        invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
+      }
+      const needCallTransitionHooks = needTransition(parentSuspense, transition);
+      if (needCallTransitionHooks) {
+        transition.beforeEnter(el);
+      }
+      hostInsert(el, container, anchor);
+      if ((vnodeHook = props && props.onVnodeMounted) || needCallTransitionHooks || dirs) {
+        queuePostRenderEffect(() => {
+          vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
+          needCallTransitionHooks && transition.enter(el);
+          dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
+        }, parentSuspense);
+      }
+    };
+    const setScopeId = (el, vnode, scopeId, slotScopeIds, parentComponent) => {
+      if (scopeId) {
+        hostSetScopeId(el, scopeId);
+      }
+      if (slotScopeIds) {
+        for (let i = 0; i < slotScopeIds.length; i++) {
+          hostSetScopeId(el, slotScopeIds[i]);
+        }
+      }
+      if (parentComponent) {
+        let subTree = parentComponent.subTree;
+        if (subTree.patchFlag > 0 && subTree.patchFlag & 2048) {
+          subTree = filterSingleRoot(subTree.children) || subTree;
+        }
+        if (vnode === subTree) {
+          const parentVNode = parentComponent.vnode;
+          setScopeId(
+            el,
+            parentVNode,
+            parentVNode.scopeId,
+            parentVNode.slotScopeIds,
+            parentComponent.parent
+          );
+        }
+      }
+    };
+    const mountChildren = (children, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, start = 0) => {
+      for (let i = start; i < children.length; i++) {
+        const child = children[i] = optimized ? cloneIfMounted(children[i]) : normalizeVNode(children[i]);
+        patch(
+          null,
+          child,
+          container,
+          anchor,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds,
+          optimized
+        );
+      }
+    };
+    const patchElement = (n1, n2, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
+      const el = n2.el = n1.el;
+      let { patchFlag, dynamicChildren, dirs } = n2;
+      patchFlag |= n1.patchFlag & 16;
+      const oldProps = n1.props || EMPTY_OBJ;
+      const newProps = n2.props || EMPTY_OBJ;
+      let vnodeHook;
+      parentComponent && toggleRecurse(parentComponent, false);
+      if (vnodeHook = newProps.onVnodeBeforeUpdate) {
+        invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
+      }
+      if (dirs) {
+        invokeDirectiveHook(n2, n1, parentComponent, "beforeUpdate");
+      }
+      parentComponent && toggleRecurse(parentComponent, true);
+      if (isHmrUpdating) {
+        patchFlag = 0;
+        optimized = false;
+        dynamicChildren = null;
+      }
+      if (dynamicChildren) {
+        patchBlockChildren(
+          n1.dynamicChildren,
+          dynamicChildren,
+          el,
+          parentComponent,
+          parentSuspense,
+          resolveChildrenNamespace(n2, namespace),
+          slotScopeIds
+        );
+        {
+          traverseStaticChildren(n1, n2);
+        }
+      } else if (!optimized) {
+        patchChildren(
+          n1,
+          n2,
+          el,
+          null,
+          parentComponent,
+          parentSuspense,
+          resolveChildrenNamespace(n2, namespace),
+          slotScopeIds,
+          false
+        );
+      }
+      if (patchFlag > 0) {
+        if (patchFlag & 16) {
+          patchProps(
+            el,
+            n2,
+            oldProps,
+            newProps,
+            parentComponent,
+            parentSuspense,
+            namespace
+          );
+        } else {
+          if (patchFlag & 2) {
+            if (oldProps.class !== newProps.class) {
+              hostPatchProp(el, "class", null, newProps.class, namespace);
+            }
+          }
+          if (patchFlag & 4) {
+            hostPatchProp(el, "style", oldProps.style, newProps.style, namespace);
+          }
+          if (patchFlag & 8) {
+            const propsToUpdate = n2.dynamicProps;
+            for (let i = 0; i < propsToUpdate.length; i++) {
+              const key = propsToUpdate[i];
+              const prev = oldProps[key];
+              const next = newProps[key];
+              if (next !== prev || key === "value") {
+                hostPatchProp(
+                  el,
+                  key,
+                  prev,
+                  next,
+                  namespace,
+                  n1.children,
+                  parentComponent,
+                  parentSuspense,
+                  unmountChildren
+                );
+              }
+            }
+          }
+        }
+        if (patchFlag & 1) {
+          if (n1.children !== n2.children) {
+            hostSetElementText(el, n2.children);
+          }
+        }
+      } else if (!optimized && dynamicChildren == null) {
+        patchProps(
+          el,
+          n2,
+          oldProps,
+          newProps,
+          parentComponent,
+          parentSuspense,
+          namespace
+        );
+      }
+      if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
+        queuePostRenderEffect(() => {
+          vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
+          dirs && invokeDirectiveHook(n2, n1, parentComponent, "updated");
+        }, parentSuspense);
+      }
+    };
+    const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, namespace, slotScopeIds) => {
+      for (let i = 0; i < newChildren.length; i++) {
+        const oldVNode = oldChildren[i];
+        const newVNode = newChildren[i];
+        const container = (
+          // oldVNode may be an errored async setup() component inside Suspense
+          // which will not have a mounted element
+          oldVNode.el && // - In the case of a Fragment, we need to provide the actual parent
+          // of the Fragment itself so it can move its children.
+          (oldVNode.type === Fragment || // - In the case of different nodes, there is going to be a replacement
+          // which also requires the correct parent container
+          !isSameVNodeType(oldVNode, newVNode) || // - In the case of a component, it could contain anything.
+          oldVNode.shapeFlag & (6 | 64)) ? hostParentNode(oldVNode.el) : (
+            // In other cases, the parent container is not actually used so we
+            // just pass the block element here to avoid a DOM parentNode call.
+            fallbackContainer
+          )
+        );
+        patch(
+          oldVNode,
+          newVNode,
+          container,
+          null,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds,
+          true
+        );
+      }
+    };
+    const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, namespace) => {
+      if (oldProps !== newProps) {
+        if (oldProps !== EMPTY_OBJ) {
+          for (const key in oldProps) {
+            if (!isReservedProp(key) && !(key in newProps)) {
+              hostPatchProp(
+                el,
+                key,
+                oldProps[key],
+                null,
+                namespace,
+                vnode.children,
+                parentComponent,
+                parentSuspense,
+                unmountChildren
+              );
+            }
+          }
+        }
+        for (const key in newProps) {
+          if (isReservedProp(key))
+            continue;
+          const next = newProps[key];
+          const prev = oldProps[key];
+          if (next !== prev && key !== "value") {
+            hostPatchProp(
+              el,
+              key,
+              prev,
+              next,
+              namespace,
+              vnode.children,
+              parentComponent,
+              parentSuspense,
+              unmountChildren
+            );
+          }
+        }
+        if ("value" in newProps) {
+          hostPatchProp(el, "value", oldProps.value, newProps.value, namespace);
+        }
+      }
+    };
+    const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
+      const fragmentStartAnchor = n2.el = n1 ? n1.el : hostCreateText("");
+      const fragmentEndAnchor = n2.anchor = n1 ? n1.anchor : hostCreateText("");
+      let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2;
+      if (
+        // #5523 dev root fragment may inherit directives
+        isHmrUpdating || patchFlag & 2048
+      ) {
+        patchFlag = 0;
+        optimized = false;
+        dynamicChildren = null;
+      }
+      if (fragmentSlotScopeIds) {
+        slotScopeIds = slotScopeIds ? slotScopeIds.concat(fragmentSlotScopeIds) : fragmentSlotScopeIds;
+      }
+      if (n1 == null) {
+        hostInsert(fragmentStartAnchor, container, anchor);
+        hostInsert(fragmentEndAnchor, container, anchor);
+        mountChildren(
+          // #10007
+          // such fragment like `<></>` will be compiled into
+          // a fragment which doesn't have a children.
+          // In this case fallback to an empty array
+          n2.children || [],
+          container,
+          fragmentEndAnchor,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds,
+          optimized
+        );
+      } else {
+        if (patchFlag > 0 && patchFlag & 64 && dynamicChildren && // #2715 the previous fragment could've been a BAILed one as a result
+        // of renderSlot() with no valid children
+        n1.dynamicChildren) {
+          patchBlockChildren(
+            n1.dynamicChildren,
+            dynamicChildren,
+            container,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds
+          );
+          {
+            traverseStaticChildren(n1, n2);
+          }
+        } else {
+          patchChildren(
+            n1,
+            n2,
+            container,
+            fragmentEndAnchor,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+        }
+      }
+    };
+    const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
+      n2.slotScopeIds = slotScopeIds;
+      if (n1 == null) {
+        if (n2.shapeFlag & 512) {
+          parentComponent.ctx.activate(
+            n2,
+            container,
+            anchor,
+            namespace,
+            optimized
+          );
+        } else {
+          mountComponent(
+            n2,
+            container,
+            anchor,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            optimized
+          );
+        }
+      } else {
+        updateComponent(n1, n2, optimized);
+      }
+    };
+    const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, namespace, optimized) => {
+      const instance = (initialVNode.component = createComponentInstance(
+        initialVNode,
+        parentComponent,
+        parentSuspense
+      ));
+      if (instance.type.__hmrId) {
+        registerHMR(instance);
+      }
+      {
+        pushWarningContext(initialVNode);
+        startMeasure(instance, `mount`);
+      }
+      if (isKeepAlive(initialVNode)) {
+        instance.ctx.renderer = internals;
+      }
+      {
+        {
+          startMeasure(instance, `init`);
+        }
+        setupComponent(instance);
+        {
+          endMeasure(instance, `init`);
+        }
+      }
+      if (instance.asyncDep) {
+        parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);
+        if (!initialVNode.el) {
+          const placeholder = instance.subTree = createVNode(Comment);
+          processCommentNode(null, placeholder, container, anchor);
+        }
+      } else {
+        setupRenderEffect(
+          instance,
+          initialVNode,
+          container,
+          anchor,
+          parentSuspense,
+          namespace,
+          optimized
+        );
+      }
+      {
+        popWarningContext();
+        endMeasure(instance, `mount`);
+      }
+    };
+    const updateComponent = (n1, n2, optimized) => {
+      const instance = n2.component = n1.component;
+      if (shouldUpdateComponent(n1, n2, optimized)) {
+        if (instance.asyncDep && !instance.asyncResolved) {
+          {
+            pushWarningContext(n2);
+          }
+          updateComponentPreRender(instance, n2, optimized);
+          {
+            popWarningContext();
+          }
+          return;
+        } else {
+          instance.next = n2;
+          invalidateJob(instance.update);
+          instance.effect.dirty = true;
+          instance.update();
+        }
+      } else {
+        n2.el = n1.el;
+        instance.vnode = n2;
+      }
+    };
+    const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, namespace, optimized) => {
+      const componentUpdateFn = () => {
+        if (!instance.isMounted) {
+          let vnodeHook;
+          const { el, props } = initialVNode;
+          const { bm, m, parent } = instance;
+          const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
+          toggleRecurse(instance, false);
+          if (bm) {
+            invokeArrayFns(bm);
+          }
+          if (!isAsyncWrapperVNode && (vnodeHook = props && props.onVnodeBeforeMount)) {
+            invokeVNodeHook(vnodeHook, parent, initialVNode);
+          }
+          toggleRecurse(instance, true);
+          if (el && hydrateNode) {
+            const hydrateSubTree = () => {
+              {
+                startMeasure(instance, `render`);
+              }
+              instance.subTree = renderComponentRoot(instance);
+              {
+                endMeasure(instance, `render`);
+              }
+              {
+                startMeasure(instance, `hydrate`);
+              }
+              hydrateNode(
+                el,
+                instance.subTree,
+                instance,
+                parentSuspense,
+                null
+              );
+              {
+                endMeasure(instance, `hydrate`);
+              }
+            };
+            if (isAsyncWrapperVNode) {
+              initialVNode.type.__asyncLoader().then(
+                // note: we are moving the render call into an async callback,
+                // which means it won't track dependencies - but it's ok because
+                // a server-rendered async wrapper is already in resolved state
+                // and it will never need to change.
+                () => !instance.isUnmounted && hydrateSubTree()
+              );
+            } else {
+              hydrateSubTree();
+            }
+          } else {
+            {
+              startMeasure(instance, `render`);
+            }
+            const subTree = instance.subTree = renderComponentRoot(instance);
+            {
+              endMeasure(instance, `render`);
+            }
+            {
+              startMeasure(instance, `patch`);
+            }
+            patch(
+              null,
+              subTree,
+              container,
+              anchor,
+              instance,
+              parentSuspense,
+              namespace
+            );
+            {
+              endMeasure(instance, `patch`);
+            }
+            initialVNode.el = subTree.el;
+          }
+          if (m) {
+            queuePostRenderEffect(m, parentSuspense);
+          }
+          if (!isAsyncWrapperVNode && (vnodeHook = props && props.onVnodeMounted)) {
+            const scopedInitialVNode = initialVNode;
+            queuePostRenderEffect(
+              () => invokeVNodeHook(vnodeHook, parent, scopedInitialVNode),
+              parentSuspense
+            );
+          }
+          if (initialVNode.shapeFlag & 256 || parent && isAsyncWrapper(parent.vnode) && parent.vnode.shapeFlag & 256) {
+            instance.a && queuePostRenderEffect(instance.a, parentSuspense);
+          }
+          instance.isMounted = true;
+          {
+            devtoolsComponentAdded(instance);
+          }
+          initialVNode = container = anchor = null;
+        } else {
+          let { next, bu, u, parent, vnode } = instance;
+          {
+            const nonHydratedAsyncRoot = locateNonHydratedAsyncRoot(instance);
+            if (nonHydratedAsyncRoot) {
+              if (next) {
+                next.el = vnode.el;
+                updateComponentPreRender(instance, next, optimized);
+              }
+              nonHydratedAsyncRoot.asyncDep.then(() => {
+                if (!instance.isUnmounted) {
+                  componentUpdateFn();
+                }
+              });
+              return;
+            }
+          }
+          let originNext = next;
+          let vnodeHook;
+          {
+            pushWarningContext(next || instance.vnode);
+          }
+          toggleRecurse(instance, false);
+          if (next) {
+            next.el = vnode.el;
+            updateComponentPreRender(instance, next, optimized);
+          } else {
+            next = vnode;
+          }
+          if (bu) {
+            invokeArrayFns(bu);
+          }
+          if (vnodeHook = next.props && next.props.onVnodeBeforeUpdate) {
+            invokeVNodeHook(vnodeHook, parent, next, vnode);
+          }
+          toggleRecurse(instance, true);
+          {
+            startMeasure(instance, `render`);
+          }
+          const nextTree = renderComponentRoot(instance);
+          {
+            endMeasure(instance, `render`);
+          }
+          const prevTree = instance.subTree;
+          instance.subTree = nextTree;
+          {
+            startMeasure(instance, `patch`);
+          }
+          patch(
+            prevTree,
+            nextTree,
+            // parent may have changed if it's in a teleport
+            hostParentNode(prevTree.el),
+            // anchor may have changed if it's in a fragment
+            getNextHostNode(prevTree),
+            instance,
+            parentSuspense,
+            namespace
+          );
+          {
+            endMeasure(instance, `patch`);
+          }
+          next.el = nextTree.el;
+          if (originNext === null) {
+            updateHOCHostEl(instance, nextTree.el);
+          }
+          if (u) {
+            queuePostRenderEffect(u, parentSuspense);
+          }
+          if (vnodeHook = next.props && next.props.onVnodeUpdated) {
+            queuePostRenderEffect(
+              () => invokeVNodeHook(vnodeHook, parent, next, vnode),
+              parentSuspense
+            );
+          }
+          {
+            devtoolsComponentUpdated(instance);
+          }
+          {
+            popWarningContext();
+          }
+        }
+      };
+      const effect = instance.effect = new ReactiveEffect(
+        componentUpdateFn,
+        NOOP,
+        () => queueJob(update),
+        instance.scope
+        // track it in component's effect scope
+      );
+      const update = instance.update = () => {
+        if (effect.dirty) {
+          effect.run();
+        }
+      };
+      update.id = instance.uid;
+      toggleRecurse(instance, true);
+      {
+        effect.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
+        effect.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
+        update.ownerInstance = instance;
+      }
+      update();
+    };
+    const updateComponentPreRender = (instance, nextVNode, optimized) => {
+      nextVNode.component = instance;
+      const prevProps = instance.vnode.props;
+      instance.vnode = nextVNode;
+      instance.next = null;
+      updateProps(instance, nextVNode.props, prevProps, optimized);
+      updateSlots(instance, nextVNode.children, optimized);
+      pauseTracking();
+      flushPreFlushCbs(instance);
+      resetTracking();
+    };
+    const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized = false) => {
+      const c1 = n1 && n1.children;
+      const prevShapeFlag = n1 ? n1.shapeFlag : 0;
+      const c2 = n2.children;
+      const { patchFlag, shapeFlag } = n2;
+      if (patchFlag > 0) {
+        if (patchFlag & 128) {
+          patchKeyedChildren(
+            c1,
+            c2,
+            container,
+            anchor,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+          return;
+        } else if (patchFlag & 256) {
+          patchUnkeyedChildren(
+            c1,
+            c2,
+            container,
+            anchor,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+          return;
+        }
+      }
+      if (shapeFlag & 8) {
+        if (prevShapeFlag & 16) {
+          unmountChildren(c1, parentComponent, parentSuspense);
+        }
+        if (c2 !== c1) {
+          hostSetElementText(container, c2);
+        }
+      } else {
+        if (prevShapeFlag & 16) {
+          if (shapeFlag & 16) {
+            patchKeyedChildren(
+              c1,
+              c2,
+              container,
+              anchor,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+          } else {
+            unmountChildren(c1, parentComponent, parentSuspense, true);
+          }
+        } else {
+          if (prevShapeFlag & 8) {
+            hostSetElementText(container, "");
+          }
+          if (shapeFlag & 16) {
+            mountChildren(
+              c2,
+              container,
+              anchor,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+          }
+        }
+      }
+    };
+    const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
+      c1 = c1 || EMPTY_ARR;
+      c2 = c2 || EMPTY_ARR;
+      const oldLength = c1.length;
+      const newLength = c2.length;
+      const commonLength = Math.min(oldLength, newLength);
+      let i;
+      for (i = 0; i < commonLength; i++) {
+        const nextChild = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);
+        patch(
+          c1[i],
+          nextChild,
+          container,
+          null,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds,
+          optimized
+        );
+      }
+      if (oldLength > newLength) {
+        unmountChildren(
+          c1,
+          parentComponent,
+          parentSuspense,
+          true,
+          false,
+          commonLength
+        );
+      } else {
+        mountChildren(
+          c2,
+          container,
+          anchor,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds,
+          optimized,
+          commonLength
+        );
+      }
+    };
+    const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
+      let i = 0;
+      const l2 = c2.length;
+      let e1 = c1.length - 1;
+      let e2 = l2 - 1;
+      while (i <= e1 && i <= e2) {
+        const n1 = c1[i];
+        const n2 = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);
+        if (isSameVNodeType(n1, n2)) {
+          patch(
+            n1,
+            n2,
+            container,
+            null,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+        } else {
+          break;
+        }
+        i++;
+      }
+      while (i <= e1 && i <= e2) {
+        const n1 = c1[e1];
+        const n2 = c2[e2] = optimized ? cloneIfMounted(c2[e2]) : normalizeVNode(c2[e2]);
+        if (isSameVNodeType(n1, n2)) {
+          patch(
+            n1,
+            n2,
+            container,
+            null,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+        } else {
+          break;
+        }
+        e1--;
+        e2--;
+      }
+      if (i > e1) {
+        if (i <= e2) {
+          const nextPos = e2 + 1;
+          const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;
+          while (i <= e2) {
+            patch(
+              null,
+              c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]),
+              container,
+              anchor,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+            i++;
+          }
+        }
+      } else if (i > e2) {
+        while (i <= e1) {
+          unmount(c1[i], parentComponent, parentSuspense, true);
+          i++;
+        }
+      } else {
+        const s1 = i;
+        const s2 = i;
+        const keyToNewIndexMap = /* @__PURE__ */ new Map();
+        for (i = s2; i <= e2; i++) {
+          const nextChild = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);
+          if (nextChild.key != null) {
+            if (keyToNewIndexMap.has(nextChild.key)) {
+              warn$1(
+                `Duplicate keys found during update:`,
+                JSON.stringify(nextChild.key),
+                `Make sure keys are unique.`
+              );
+            }
+            keyToNewIndexMap.set(nextChild.key, i);
+          }
+        }
+        let j;
+        let patched = 0;
+        const toBePatched = e2 - s2 + 1;
+        let moved = false;
+        let maxNewIndexSoFar = 0;
+        const newIndexToOldIndexMap = new Array(toBePatched);
+        for (i = 0; i < toBePatched; i++)
+          newIndexToOldIndexMap[i] = 0;
+        for (i = s1; i <= e1; i++) {
+          const prevChild = c1[i];
+          if (patched >= toBePatched) {
+            unmount(prevChild, parentComponent, parentSuspense, true);
+            continue;
+          }
+          let newIndex;
+          if (prevChild.key != null) {
+            newIndex = keyToNewIndexMap.get(prevChild.key);
+          } else {
+            for (j = s2; j <= e2; j++) {
+              if (newIndexToOldIndexMap[j - s2] === 0 && isSameVNodeType(prevChild, c2[j])) {
+                newIndex = j;
+                break;
+              }
+            }
+          }
+          if (newIndex === void 0) {
+            unmount(prevChild, parentComponent, parentSuspense, true);
+          } else {
+            newIndexToOldIndexMap[newIndex - s2] = i + 1;
+            if (newIndex >= maxNewIndexSoFar) {
+              maxNewIndexSoFar = newIndex;
+            } else {
+              moved = true;
+            }
+            patch(
+              prevChild,
+              c2[newIndex],
+              container,
+              null,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+            patched++;
+          }
+        }
+        const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : EMPTY_ARR;
+        j = increasingNewIndexSequence.length - 1;
+        for (i = toBePatched - 1; i >= 0; i--) {
+          const nextIndex = s2 + i;
+          const nextChild = c2[nextIndex];
+          const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;
+          if (newIndexToOldIndexMap[i] === 0) {
+            patch(
+              null,
+              nextChild,
+              container,
+              anchor,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+          } else if (moved) {
+            if (j < 0 || i !== increasingNewIndexSequence[j]) {
+              move(nextChild, container, anchor, 2);
+            } else {
+              j--;
+            }
+          }
+        }
+      }
+    };
+    const move = (vnode, container, anchor, moveType, parentSuspense = null) => {
+      const { el, type, transition, children, shapeFlag } = vnode;
+      if (shapeFlag & 6) {
+        move(vnode.component.subTree, container, anchor, moveType);
+        return;
+      }
+      if (shapeFlag & 128) {
+        vnode.suspense.move(container, anchor, moveType);
+        return;
+      }
+      if (shapeFlag & 64) {
+        type.move(vnode, container, anchor, internals);
+        return;
+      }
+      if (type === Fragment) {
+        hostInsert(el, container, anchor);
+        for (let i = 0; i < children.length; i++) {
+          move(children[i], container, anchor, moveType);
+        }
+        hostInsert(vnode.anchor, container, anchor);
+        return;
+      }
+      if (type === Static) {
+        moveStaticNode(vnode, container, anchor);
+        return;
+      }
+      const needTransition2 = moveType !== 2 && shapeFlag & 1 && transition;
+      if (needTransition2) {
+        if (moveType === 0) {
+          transition.beforeEnter(el);
+          hostInsert(el, container, anchor);
+          queuePostRenderEffect(() => transition.enter(el), parentSuspense);
+        } else {
+          const { leave, delayLeave, afterLeave } = transition;
+          const remove2 = () => hostInsert(el, container, anchor);
+          const performLeave = () => {
+            leave(el, () => {
+              remove2();
+              afterLeave && afterLeave();
+            });
+          };
+          if (delayLeave) {
+            delayLeave(el, remove2, performLeave);
+          } else {
+            performLeave();
+          }
+        }
+      } else {
+        hostInsert(el, container, anchor);
+      }
+    };
+    const unmount = (vnode, parentComponent, parentSuspense, doRemove = false, optimized = false) => {
+      const {
+        type,
+        props,
+        ref,
+        children,
+        dynamicChildren,
+        shapeFlag,
+        patchFlag,
+        dirs
+      } = vnode;
+      if (ref != null) {
+        setRef(ref, null, parentSuspense, vnode, true);
+      }
+      if (shapeFlag & 256) {
+        parentComponent.ctx.deactivate(vnode);
+        return;
+      }
+      const shouldInvokeDirs = shapeFlag & 1 && dirs;
+      const shouldInvokeVnodeHook = !isAsyncWrapper(vnode);
+      let vnodeHook;
+      if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeBeforeUnmount)) {
+        invokeVNodeHook(vnodeHook, parentComponent, vnode);
+      }
+      if (shapeFlag & 6) {
+        unmountComponent(vnode.component, parentSuspense, doRemove);
+      } else {
+        if (shapeFlag & 128) {
+          vnode.suspense.unmount(parentSuspense, doRemove);
+          return;
+        }
+        if (shouldInvokeDirs) {
+          invokeDirectiveHook(vnode, null, parentComponent, "beforeUnmount");
+        }
+        if (shapeFlag & 64) {
+          vnode.type.remove(
+            vnode,
+            parentComponent,
+            parentSuspense,
+            optimized,
+            internals,
+            doRemove
+          );
+        } else if (dynamicChildren && // #1153: fast path should not be taken for non-stable (v-for) fragments
+        (type !== Fragment || patchFlag > 0 && patchFlag & 64)) {
+          unmountChildren(
+            dynamicChildren,
+            parentComponent,
+            parentSuspense,
+            false,
+            true
+          );
+        } else if (type === Fragment && patchFlag & (128 | 256) || !optimized && shapeFlag & 16) {
+          unmountChildren(children, parentComponent, parentSuspense);
+        }
+        if (doRemove) {
+          remove(vnode);
+        }
+      }
+      if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {
+        queuePostRenderEffect(() => {
+          vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
+          shouldInvokeDirs && invokeDirectiveHook(vnode, null, parentComponent, "unmounted");
+        }, parentSuspense);
+      }
+    };
+    const remove = (vnode) => {
+      const { type, el, anchor, transition } = vnode;
+      if (type === Fragment) {
+        if (vnode.patchFlag > 0 && vnode.patchFlag & 2048 && transition && !transition.persisted) {
+          vnode.children.forEach((child) => {
+            if (child.type === Comment) {
+              hostRemove(child.el);
+            } else {
+              remove(child);
+            }
+          });
+        } else {
+          removeFragment(el, anchor);
+        }
+        return;
+      }
+      if (type === Static) {
+        removeStaticNode(vnode);
+        return;
+      }
+      const performRemove = () => {
+        hostRemove(el);
+        if (transition && !transition.persisted && transition.afterLeave) {
+          transition.afterLeave();
+        }
+      };
+      if (vnode.shapeFlag & 1 && transition && !transition.persisted) {
+        const { leave, delayLeave } = transition;
+        const performLeave = () => leave(el, performRemove);
+        if (delayLeave) {
+          delayLeave(vnode.el, performRemove, performLeave);
+        } else {
+          performLeave();
+        }
+      } else {
+        performRemove();
+      }
+    };
+    const removeFragment = (cur, end) => {
+      let next;
+      while (cur !== end) {
+        next = hostNextSibling(cur);
+        hostRemove(cur);
+        cur = next;
+      }
+      hostRemove(end);
+    };
+    const unmountComponent = (instance, parentSuspense, doRemove) => {
+      if (instance.type.__hmrId) {
+        unregisterHMR(instance);
+      }
+      const { bum, scope, update, subTree, um } = instance;
+      if (bum) {
+        invokeArrayFns(bum);
+      }
+      scope.stop();
+      if (update) {
+        update.active = false;
+        unmount(subTree, instance, parentSuspense, doRemove);
+      }
+      if (um) {
+        queuePostRenderEffect(um, parentSuspense);
+      }
+      queuePostRenderEffect(() => {
+        instance.isUnmounted = true;
+      }, parentSuspense);
+      if (parentSuspense && parentSuspense.pendingBranch && !parentSuspense.isUnmounted && instance.asyncDep && !instance.asyncResolved && instance.suspenseId === parentSuspense.pendingId) {
+        parentSuspense.deps--;
+        if (parentSuspense.deps === 0) {
+          parentSuspense.resolve();
+        }
+      }
+      {
+        devtoolsComponentRemoved(instance);
+      }
+    };
+    const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, optimized = false, start = 0) => {
+      for (let i = start; i < children.length; i++) {
+        unmount(children[i], parentComponent, parentSuspense, doRemove, optimized);
+      }
+    };
+    const getNextHostNode = (vnode) => {
+      if (vnode.shapeFlag & 6) {
+        return getNextHostNode(vnode.component.subTree);
+      }
+      if (vnode.shapeFlag & 128) {
+        return vnode.suspense.next();
+      }
+      return hostNextSibling(vnode.anchor || vnode.el);
+    };
+    let isFlushing = false;
+    const render = (vnode, container, namespace) => {
+      if (vnode == null) {
+        if (container._vnode) {
+          unmount(container._vnode, null, null, true);
+        }
+      } else {
+        patch(
+          container._vnode || null,
+          vnode,
+          container,
+          null,
+          null,
+          null,
+          namespace
+        );
+      }
+      if (!isFlushing) {
+        isFlushing = true;
+        flushPreFlushCbs();
+        flushPostFlushCbs();
+        isFlushing = false;
+      }
+      container._vnode = vnode;
+    };
+    const internals = {
+      p: patch,
+      um: unmount,
+      m: move,
+      r: remove,
+      mt: mountComponent,
+      mc: mountChildren,
+      pc: patchChildren,
+      pbc: patchBlockChildren,
+      n: getNextHostNode,
+      o: options
+    };
+    let hydrate;
+    let hydrateNode;
+    if (createHydrationFns) {
+      [hydrate, hydrateNode] = createHydrationFns(
+        internals
+      );
+    }
+    return {
+      render,
+      hydrate,
+      createApp: createAppAPI(render, hydrate)
+    };
+  }
+  function resolveChildrenNamespace({ type, props }, currentNamespace) {
+    return currentNamespace === "svg" && type === "foreignObject" || currentNamespace === "mathml" && type === "annotation-xml" && props && props.encoding && props.encoding.includes("html") ? void 0 : currentNamespace;
+  }
+  function toggleRecurse({ effect, update }, allowed) {
+    effect.allowRecurse = update.allowRecurse = allowed;
+  }
+  function needTransition(parentSuspense, transition) {
+    return (!parentSuspense || parentSuspense && !parentSuspense.pendingBranch) && transition && !transition.persisted;
+  }
+  function traverseStaticChildren(n1, n2, shallow = false) {
+    const ch1 = n1.children;
+    const ch2 = n2.children;
+    if (isArray(ch1) && isArray(ch2)) {
+      for (let i = 0; i < ch1.length; i++) {
+        const c1 = ch1[i];
+        let c2 = ch2[i];
+        if (c2.shapeFlag & 1 && !c2.dynamicChildren) {
+          if (c2.patchFlag <= 0 || c2.patchFlag === 32) {
+            c2 = ch2[i] = cloneIfMounted(ch2[i]);
+            c2.el = c1.el;
+          }
+          if (!shallow)
+            traverseStaticChildren(c1, c2);
+        }
+        if (c2.type === Text) {
+          c2.el = c1.el;
+        }
+        if (c2.type === Comment && !c2.el) {
+          c2.el = c1.el;
+        }
+      }
+    }
+  }
+  function getSequence(arr) {
+    const p = arr.slice();
+    const result = [0];
+    let i, j, u, v, c;
+    const len = arr.length;
+    for (i = 0; i < len; i++) {
+      const arrI = arr[i];
+      if (arrI !== 0) {
+        j = result[result.length - 1];
+        if (arr[j] < arrI) {
+          p[i] = j;
+          result.push(i);
+          continue;
+        }
+        u = 0;
+        v = result.length - 1;
+        while (u < v) {
+          c = u + v >> 1;
+          if (arr[result[c]] < arrI) {
+            u = c + 1;
+          } else {
+            v = c;
+          }
+        }
+        if (arrI < arr[result[u]]) {
+          if (u > 0) {
+            p[i] = result[u - 1];
+          }
+          result[u] = i;
+        }
+      }
+    }
+    u = result.length;
+    v = result[u - 1];
+    while (u-- > 0) {
+      result[u] = v;
+      v = p[v];
+    }
+    return result;
+  }
+  function locateNonHydratedAsyncRoot(instance) {
+    const subComponent = instance.subTree.component;
+    if (subComponent) {
+      if (subComponent.asyncDep && !subComponent.asyncResolved) {
+        return subComponent;
+      } else {
+        return locateNonHydratedAsyncRoot(subComponent);
+      }
+    }
+  }
+
+  const isTeleport = (type) => type.__isTeleport;
+  const isTeleportDisabled = (props) => props && (props.disabled || props.disabled === "");
+  const isTargetSVG = (target) => typeof SVGElement !== "undefined" && target instanceof SVGElement;
+  const isTargetMathML = (target) => typeof MathMLElement === "function" && target instanceof MathMLElement;
+  const resolveTarget = (props, select) => {
+    const targetSelector = props && props.to;
+    if (isString(targetSelector)) {
+      if (!select) {
+        warn$1(
+          `Current renderer does not support string target for Teleports. (missing querySelector renderer option)`
+        );
+        return null;
+      } else {
+        const target = select(targetSelector);
+        if (!target) {
+          warn$1(
+            `Failed to locate Teleport target with selector "${targetSelector}". Note the target element must exist before the component is mounted - i.e. the target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree.`
+          );
+        }
+        return target;
+      }
+    } else {
+      if (!targetSelector && !isTeleportDisabled(props)) {
+        warn$1(`Invalid Teleport target: ${targetSelector}`);
+      }
+      return targetSelector;
+    }
+  };
+  const TeleportImpl = {
+    name: "Teleport",
+    __isTeleport: true,
+    process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, internals) {
+      const {
+        mc: mountChildren,
+        pc: patchChildren,
+        pbc: patchBlockChildren,
+        o: { insert, querySelector, createText, createComment }
+      } = internals;
+      const disabled = isTeleportDisabled(n2.props);
+      let { shapeFlag, children, dynamicChildren } = n2;
+      if (isHmrUpdating) {
+        optimized = false;
+        dynamicChildren = null;
+      }
+      if (n1 == null) {
+        const placeholder = n2.el = createComment("teleport start") ;
+        const mainAnchor = n2.anchor = createComment("teleport end") ;
+        insert(placeholder, container, anchor);
+        insert(mainAnchor, container, anchor);
+        const target = n2.target = resolveTarget(n2.props, querySelector);
+        const targetAnchor = n2.targetAnchor = createText("");
+        if (target) {
+          insert(targetAnchor, target);
+          if (namespace === "svg" || isTargetSVG(target)) {
+            namespace = "svg";
+          } else if (namespace === "mathml" || isTargetMathML(target)) {
+            namespace = "mathml";
+          }
+        } else if (!disabled) {
+          warn$1("Invalid Teleport target on mount:", target, `(${typeof target})`);
+        }
+        const mount = (container2, anchor2) => {
+          if (shapeFlag & 16) {
+            mountChildren(
+              children,
+              container2,
+              anchor2,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+          }
+        };
+        if (disabled) {
+          mount(container, mainAnchor);
+        } else if (target) {
+          mount(target, targetAnchor);
+        }
+      } else {
+        n2.el = n1.el;
+        const mainAnchor = n2.anchor = n1.anchor;
+        const target = n2.target = n1.target;
+        const targetAnchor = n2.targetAnchor = n1.targetAnchor;
+        const wasDisabled = isTeleportDisabled(n1.props);
+        const currentContainer = wasDisabled ? container : target;
+        const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;
+        if (namespace === "svg" || isTargetSVG(target)) {
+          namespace = "svg";
+        } else if (namespace === "mathml" || isTargetMathML(target)) {
+          namespace = "mathml";
+        }
+        if (dynamicChildren) {
+          patchBlockChildren(
+            n1.dynamicChildren,
+            dynamicChildren,
+            currentContainer,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds
+          );
+          traverseStaticChildren(n1, n2, true);
+        } else if (!optimized) {
+          patchChildren(
+            n1,
+            n2,
+            currentContainer,
+            currentAnchor,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            false
+          );
+        }
+        if (disabled) {
+          if (!wasDisabled) {
+            moveTeleport(
+              n2,
+              container,
+              mainAnchor,
+              internals,
+              1
+            );
+          } else {
+            if (n2.props && n1.props && n2.props.to !== n1.props.to) {
+              n2.props.to = n1.props.to;
+            }
+          }
+        } else {
+          if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
+            const nextTarget = n2.target = resolveTarget(
+              n2.props,
+              querySelector
+            );
+            if (nextTarget) {
+              moveTeleport(
+                n2,
+                nextTarget,
+                null,
+                internals,
+                0
+              );
+            } else {
+              warn$1(
+                "Invalid Teleport target on update:",
+                target,
+                `(${typeof target})`
+              );
+            }
+          } else if (wasDisabled) {
+            moveTeleport(
+              n2,
+              target,
+              targetAnchor,
+              internals,
+              1
+            );
+          }
+        }
+      }
+      updateCssVars(n2);
+    },
+    remove(vnode, parentComponent, parentSuspense, optimized, { um: unmount, o: { remove: hostRemove } }, doRemove) {
+      const { shapeFlag, children, anchor, targetAnchor, target, props } = vnode;
+      if (target) {
+        hostRemove(targetAnchor);
+      }
+      doRemove && hostRemove(anchor);
+      if (shapeFlag & 16) {
+        const shouldRemove = doRemove || !isTeleportDisabled(props);
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i];
+          unmount(
+            child,
+            parentComponent,
+            parentSuspense,
+            shouldRemove,
+            !!child.dynamicChildren
+          );
+        }
+      }
+    },
+    move: moveTeleport,
+    hydrate: hydrateTeleport
+  };
+  function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }, moveType = 2) {
+    if (moveType === 0) {
+      insert(vnode.targetAnchor, container, parentAnchor);
+    }
+    const { el, anchor, shapeFlag, children, props } = vnode;
+    const isReorder = moveType === 2;
+    if (isReorder) {
+      insert(el, container, parentAnchor);
+    }
+    if (!isReorder || isTeleportDisabled(props)) {
+      if (shapeFlag & 16) {
+        for (let i = 0; i < children.length; i++) {
+          move(
+            children[i],
+            container,
+            parentAnchor,
+            2
+          );
+        }
+      }
+    }
+    if (isReorder) {
+      insert(anchor, container, parentAnchor);
+    }
+  }
+  function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, {
+    o: { nextSibling, parentNode, querySelector }
+  }, hydrateChildren) {
+    const target = vnode.target = resolveTarget(
+      vnode.props,
+      querySelector
+    );
+    if (target) {
+      const targetNode = target._lpa || target.firstChild;
+      if (vnode.shapeFlag & 16) {
+        if (isTeleportDisabled(vnode.props)) {
+          vnode.anchor = hydrateChildren(
+            nextSibling(node),
+            vnode,
+            parentNode(node),
+            parentComponent,
+            parentSuspense,
+            slotScopeIds,
+            optimized
+          );
+          vnode.targetAnchor = targetNode;
+        } else {
+          vnode.anchor = nextSibling(node);
+          let targetAnchor = targetNode;
+          while (targetAnchor) {
+            targetAnchor = nextSibling(targetAnchor);
+            if (targetAnchor && targetAnchor.nodeType === 8 && targetAnchor.data === "teleport anchor") {
+              vnode.targetAnchor = targetAnchor;
+              target._lpa = vnode.targetAnchor && nextSibling(vnode.targetAnchor);
+              break;
+            }
+          }
+          hydrateChildren(
+            targetNode,
+            vnode,
+            target,
+            parentComponent,
+            parentSuspense,
+            slotScopeIds,
+            optimized
+          );
+        }
+      }
+      updateCssVars(vnode);
+    }
+    return vnode.anchor && nextSibling(vnode.anchor);
+  }
+  const Teleport = TeleportImpl;
+  function updateCssVars(vnode) {
+    const ctx = vnode.ctx;
+    if (ctx && ctx.ut) {
+      let node = vnode.children[0].el;
+      while (node && node !== vnode.targetAnchor) {
+        if (node.nodeType === 1)
+          node.setAttribute("data-v-owner", ctx.uid);
+        node = node.nextSibling;
+      }
+      ctx.ut();
+    }
+  }
+
+  const Fragment = Symbol.for("v-fgt");
+  const Text = Symbol.for("v-txt");
+  const Comment = Symbol.for("v-cmt");
+  const Static = Symbol.for("v-stc");
+  const blockStack = [];
+  let currentBlock = null;
+  function openBlock(disableTracking = false) {
+    blockStack.push(currentBlock = disableTracking ? null : []);
+  }
+  function closeBlock() {
+    blockStack.pop();
+    currentBlock = blockStack[blockStack.length - 1] || null;
+  }
+  let isBlockTreeEnabled = 1;
+  function setBlockTracking(value) {
+    isBlockTreeEnabled += value;
+  }
+  function setupBlock(vnode) {
+    vnode.dynamicChildren = isBlockTreeEnabled > 0 ? currentBlock || EMPTY_ARR : null;
+    closeBlock();
+    if (isBlockTreeEnabled > 0 && currentBlock) {
+      currentBlock.push(vnode);
+    }
+    return vnode;
+  }
+  function createElementBlock(type, props, children, patchFlag, dynamicProps, shapeFlag) {
+    return setupBlock(
+      createBaseVNode(
+        type,
+        props,
+        children,
+        patchFlag,
+        dynamicProps,
+        shapeFlag,
+        true
+      )
+    );
+  }
+  function createBlock(type, props, children, patchFlag, dynamicProps) {
+    return setupBlock(
+      createVNode(
+        type,
+        props,
+        children,
+        patchFlag,
+        dynamicProps,
+        true
+      )
+    );
+  }
+  function isVNode(value) {
+    return value ? value.__v_isVNode === true : false;
+  }
+  function isSameVNodeType(n1, n2) {
+    if (n2.shapeFlag & 6 && hmrDirtyComponents.has(n2.type)) {
+      n1.shapeFlag &= ~256;
+      n2.shapeFlag &= ~512;
+      return false;
+    }
+    return n1.type === n2.type && n1.key === n2.key;
+  }
+  let vnodeArgsTransformer;
+  function transformVNodeArgs(transformer) {
+    vnodeArgsTransformer = transformer;
+  }
+  const createVNodeWithArgsTransform = (...args) => {
+    return _createVNode(
+      ...vnodeArgsTransformer ? vnodeArgsTransformer(args, currentRenderingInstance) : args
+    );
+  };
+  const InternalObjectKey = `__vInternal`;
+  const normalizeKey = ({ key }) => key != null ? key : null;
+  const normalizeRef = ({
+    ref,
+    ref_key,
+    ref_for
+  }) => {
+    if (typeof ref === "number") {
+      ref = "" + ref;
+    }
+    return ref != null ? isString(ref) || isRef(ref) || isFunction(ref) ? { i: currentRenderingInstance, r: ref, k: ref_key, f: !!ref_for } : ref : null;
+  };
+  function createBaseVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, shapeFlag = type === Fragment ? 0 : 1, isBlockNode = false, needFullChildrenNormalization = false) {
+    const vnode = {
+      __v_isVNode: true,
+      __v_skip: true,
+      type,
+      props,
+      key: props && normalizeKey(props),
+      ref: props && normalizeRef(props),
+      scopeId: currentScopeId,
+      slotScopeIds: null,
+      children,
+      component: null,
+      suspense: null,
+      ssContent: null,
+      ssFallback: null,
+      dirs: null,
+      transition: null,
+      el: null,
+      anchor: null,
+      target: null,
+      targetAnchor: null,
+      staticCount: 0,
+      shapeFlag,
+      patchFlag,
+      dynamicProps,
+      dynamicChildren: null,
+      appContext: null,
+      ctx: currentRenderingInstance
+    };
+    if (needFullChildrenNormalization) {
+      normalizeChildren(vnode, children);
+      if (shapeFlag & 128) {
+        type.normalize(vnode);
+      }
+    } else if (children) {
+      vnode.shapeFlag |= isString(children) ? 8 : 16;
+    }
+    if (vnode.key !== vnode.key) {
+      warn$1(`VNode created with invalid key (NaN). VNode type:`, vnode.type);
+    }
+    if (isBlockTreeEnabled > 0 && // avoid a block node from tracking itself
+    !isBlockNode && // has current parent block
+    currentBlock && // presence of a patch flag indicates this node needs patching on updates.
+    // component nodes also should always be patched, because even if the
+    // component doesn't need to update, it needs to persist the instance on to
+    // the next vnode so that it can be properly unmounted later.
+    (vnode.patchFlag > 0 || shapeFlag & 6) && // the EVENTS flag is only for hydration and if it is the only flag, the
+    // vnode should not be considered dynamic due to handler caching.
+    vnode.patchFlag !== 32) {
+      currentBlock.push(vnode);
+    }
+    return vnode;
+  }
+  const createVNode = createVNodeWithArgsTransform ;
+  function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {
+    if (!type || type === NULL_DYNAMIC_COMPONENT) {
+      if (!type) {
+        warn$1(`Invalid vnode type when creating vnode: ${type}.`);
+      }
+      type = Comment;
+    }
+    if (isVNode(type)) {
+      const cloned = cloneVNode(
+        type,
+        props,
+        true
+        /* mergeRef: true */
+      );
+      if (children) {
+        normalizeChildren(cloned, children);
+      }
+      if (isBlockTreeEnabled > 0 && !isBlockNode && currentBlock) {
+        if (cloned.shapeFlag & 6) {
+          currentBlock[currentBlock.indexOf(type)] = cloned;
+        } else {
+          currentBlock.push(cloned);
+        }
+      }
+      cloned.patchFlag |= -2;
+      return cloned;
+    }
+    if (isClassComponent(type)) {
+      type = type.__vccOpts;
+    }
+    if (props) {
+      props = guardReactiveProps(props);
+      let { class: klass, style } = props;
+      if (klass && !isString(klass)) {
+        props.class = normalizeClass(klass);
+      }
+      if (isObject(style)) {
+        if (isProxy(style) && !isArray(style)) {
+          style = extend({}, style);
+        }
+        props.style = normalizeStyle(style);
+      }
+    }
+    const shapeFlag = isString(type) ? 1 : isSuspense(type) ? 128 : isTeleport(type) ? 64 : isObject(type) ? 4 : isFunction(type) ? 2 : 0;
+    if (shapeFlag & 4 && isProxy(type)) {
+      type = toRaw(type);
+      warn$1(
+        `Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with \`markRaw\` or using \`shallowRef\` instead of \`ref\`.`,
+        `
+Component that was made reactive: `,
+        type
+      );
+    }
+    return createBaseVNode(
+      type,
+      props,
+      children,
+      patchFlag,
+      dynamicProps,
+      shapeFlag,
+      isBlockNode,
+      true
+    );
+  }
+  function guardReactiveProps(props) {
+    if (!props)
+      return null;
+    return isProxy(props) || InternalObjectKey in props ? extend({}, props) : props;
+  }
+  function cloneVNode(vnode, extraProps, mergeRef = false) {
+    const { props, ref, patchFlag, children } = vnode;
+    const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props;
+    const cloned = {
+      __v_isVNode: true,
+      __v_skip: true,
+      type: vnode.type,
+      props: mergedProps,
+      key: mergedProps && normalizeKey(mergedProps),
+      ref: extraProps && extraProps.ref ? (
+        // #2078 in the case of <component :is="vnode" ref="extra"/>
+        // if the vnode itself already has a ref, cloneVNode will need to merge
+        // the refs so the single vnode can be set on multiple refs
+        mergeRef && ref ? isArray(ref) ? ref.concat(normalizeRef(extraProps)) : [ref, normalizeRef(extraProps)] : normalizeRef(extraProps)
+      ) : ref,
+      scopeId: vnode.scopeId,
+      slotScopeIds: vnode.slotScopeIds,
+      children: patchFlag === -1 && isArray(children) ? children.map(deepCloneVNode) : children,
+      target: vnode.target,
+      targetAnchor: vnode.targetAnchor,
+      staticCount: vnode.staticCount,
+      shapeFlag: vnode.shapeFlag,
+      // if the vnode is cloned with extra props, we can no longer assume its
+      // existing patch flag to be reliable and need to add the FULL_PROPS flag.
+      // note: preserve flag for fragments since they use the flag for children
+      // fast paths only.
+      patchFlag: extraProps && vnode.type !== Fragment ? patchFlag === -1 ? 16 : patchFlag | 16 : patchFlag,
+      dynamicProps: vnode.dynamicProps,
+      dynamicChildren: vnode.dynamicChildren,
+      appContext: vnode.appContext,
+      dirs: vnode.dirs,
+      transition: vnode.transition,
+      // These should technically only be non-null on mounted VNodes. However,
+      // they *should* be copied for kept-alive vnodes. So we just always copy
+      // them since them being non-null during a mount doesn't affect the logic as
+      // they will simply be overwritten.
+      component: vnode.component,
+      suspense: vnode.suspense,
+      ssContent: vnode.ssContent && cloneVNode(vnode.ssContent),
+      ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),
+      el: vnode.el,
+      anchor: vnode.anchor,
+      ctx: vnode.ctx,
+      ce: vnode.ce
+    };
+    return cloned;
+  }
+  function deepCloneVNode(vnode) {
+    const cloned = cloneVNode(vnode);
+    if (isArray(vnode.children)) {
+      cloned.children = vnode.children.map(deepCloneVNode);
+    }
+    return cloned;
+  }
+  function createTextVNode(text = " ", flag = 0) {
+    return createVNode(Text, null, text, flag);
+  }
+  function createStaticVNode(content, numberOfNodes) {
+    const vnode = createVNode(Static, null, content);
+    vnode.staticCount = numberOfNodes;
+    return vnode;
+  }
+  function createCommentVNode(text = "", asBlock = false) {
+    return asBlock ? (openBlock(), createBlock(Comment, null, text)) : createVNode(Comment, null, text);
+  }
+  function normalizeVNode(child) {
+    if (child == null || typeof child === "boolean") {
+      return createVNode(Comment);
+    } else if (isArray(child)) {
+      return createVNode(
+        Fragment,
+        null,
+        // #3666, avoid reference pollution when reusing vnode
+        child.slice()
+      );
+    } else if (typeof child === "object") {
+      return cloneIfMounted(child);
+    } else {
+      return createVNode(Text, null, String(child));
+    }
+  }
+  function cloneIfMounted(child) {
+    return child.el === null && child.patchFlag !== -1 || child.memo ? child : cloneVNode(child);
+  }
+  function normalizeChildren(vnode, children) {
+    let type = 0;
+    const { shapeFlag } = vnode;
+    if (children == null) {
+      children = null;
+    } else if (isArray(children)) {
+      type = 16;
+    } else if (typeof children === "object") {
+      if (shapeFlag & (1 | 64)) {
+        const slot = children.default;
+        if (slot) {
+          slot._c && (slot._d = false);
+          normalizeChildren(vnode, slot());
+          slot._c && (slot._d = true);
+        }
+        return;
+      } else {
+        type = 32;
+        const slotFlag = children._;
+        if (!slotFlag && !(InternalObjectKey in children)) {
+          children._ctx = currentRenderingInstance;
+        } else if (slotFlag === 3 && currentRenderingInstance) {
+          if (currentRenderingInstance.slots._ === 1) {
+            children._ = 1;
+          } else {
+            children._ = 2;
+            vnode.patchFlag |= 1024;
+          }
+        }
+      }
+    } else if (isFunction(children)) {
+      children = { default: children, _ctx: currentRenderingInstance };
+      type = 32;
+    } else {
+      children = String(children);
+      if (shapeFlag & 64) {
+        type = 16;
+        children = [createTextVNode(children)];
+      } else {
+        type = 8;
+      }
+    }
+    vnode.children = children;
+    vnode.shapeFlag |= type;
+  }
+  function mergeProps(...args) {
+    const ret = {};
+    for (let i = 0; i < args.length; i++) {
+      const toMerge = args[i];
+      for (const key in toMerge) {
+        if (key === "class") {
+          if (ret.class !== toMerge.class) {
+            ret.class = normalizeClass([ret.class, toMerge.class]);
+          }
+        } else if (key === "style") {
+          ret.style = normalizeStyle([ret.style, toMerge.style]);
+        } else if (isOn(key)) {
+          const existing = ret[key];
+          const incoming = toMerge[key];
+          if (incoming && existing !== incoming && !(isArray(existing) && existing.includes(incoming))) {
+            ret[key] = existing ? [].concat(existing, incoming) : incoming;
+          }
+        } else if (key !== "") {
+          ret[key] = toMerge[key];
+        }
+      }
+    }
+    return ret;
+  }
+  function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
+    callWithAsyncErrorHandling(hook, instance, 7, [
+      vnode,
+      prevVNode
+    ]);
+  }
+
+  const emptyAppContext = createAppContext();
+  let uid = 0;
+  function createComponentInstance(vnode, parent, suspense) {
+    const type = vnode.type;
+    const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;
+    const instance = {
+      uid: uid++,
+      vnode,
+      type,
+      parent,
+      appContext,
+      root: null,
+      // to be immediately set
+      next: null,
+      subTree: null,
+      // will be set synchronously right after creation
+      effect: null,
+      update: null,
+      // will be set synchronously right after creation
+      scope: new EffectScope(
+        true
+        /* detached */
+      ),
+      render: null,
+      proxy: null,
+      exposed: null,
+      exposeProxy: null,
+      withProxy: null,
+      provides: parent ? parent.provides : Object.create(appContext.provides),
+      accessCache: null,
+      renderCache: [],
+      // local resolved assets
+      components: null,
+      directives: null,
+      // resolved props and emits options
+      propsOptions: normalizePropsOptions(type, appContext),
+      emitsOptions: normalizeEmitsOptions(type, appContext),
+      // emit
+      emit: null,
+      // to be set immediately
+      emitted: null,
+      // props default value
+      propsDefaults: EMPTY_OBJ,
+      // inheritAttrs
+      inheritAttrs: type.inheritAttrs,
+      // state
+      ctx: EMPTY_OBJ,
+      data: EMPTY_OBJ,
+      props: EMPTY_OBJ,
+      attrs: EMPTY_OBJ,
+      slots: EMPTY_OBJ,
+      refs: EMPTY_OBJ,
+      setupState: EMPTY_OBJ,
+      setupContext: null,
+      attrsProxy: null,
+      slotsProxy: null,
+      // suspense related
+      suspense,
+      suspenseId: suspense ? suspense.pendingId : 0,
+      asyncDep: null,
+      asyncResolved: false,
+      // lifecycle hooks
+      // not using enums here because it results in computed properties
+      isMounted: false,
+      isUnmounted: false,
+      isDeactivated: false,
+      bc: null,
+      c: null,
+      bm: null,
+      m: null,
+      bu: null,
+      u: null,
+      um: null,
+      bum: null,
+      da: null,
+      a: null,
+      rtg: null,
+      rtc: null,
+      ec: null,
+      sp: null
+    };
+    {
+      instance.ctx = createDevRenderContext(instance);
+    }
+    instance.root = parent ? parent.root : instance;
+    instance.emit = emit.bind(null, instance);
+    if (vnode.ce) {
+      vnode.ce(instance);
+    }
+    return instance;
+  }
+  let currentInstance = null;
+  const getCurrentInstance = () => currentInstance || currentRenderingInstance;
+  let internalSetCurrentInstance;
+  let setInSSRSetupState;
+  {
+    internalSetCurrentInstance = (i) => {
+      currentInstance = i;
+    };
+    setInSSRSetupState = (v) => {
+      isInSSRComponentSetup = v;
+    };
+  }
+  const setCurrentInstance = (instance) => {
+    const prev = currentInstance;
+    internalSetCurrentInstance(instance);
+    instance.scope.on();
+    return () => {
+      instance.scope.off();
+      internalSetCurrentInstance(prev);
+    };
+  };
+  const unsetCurrentInstance = () => {
+    currentInstance && currentInstance.scope.off();
+    internalSetCurrentInstance(null);
+  };
+  const isBuiltInTag = /* @__PURE__ */ makeMap("slot,component");
+  function validateComponentName(name, config) {
+    const appIsNativeTag = config.isNativeTag || NO;
+    if (isBuiltInTag(name) || appIsNativeTag(name)) {
+      warn$1(
+        "Do not use built-in or reserved HTML elements as component id: " + name
+      );
+    }
+  }
+  function isStatefulComponent(instance) {
+    return instance.vnode.shapeFlag & 4;
+  }
+  let isInSSRComponentSetup = false;
+  function setupComponent(instance, isSSR = false) {
+    isSSR && setInSSRSetupState(isSSR);
+    const { props, children } = instance.vnode;
+    const isStateful = isStatefulComponent(instance);
+    initProps(instance, props, isStateful, isSSR);
+    initSlots(instance, children);
+    const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) : void 0;
+    isSSR && setInSSRSetupState(false);
+    return setupResult;
+  }
+  function setupStatefulComponent(instance, isSSR) {
+    var _a;
+    const Component = instance.type;
+    {
+      if (Component.name) {
+        validateComponentName(Component.name, instance.appContext.config);
+      }
+      if (Component.components) {
+        const names = Object.keys(Component.components);
+        for (let i = 0; i < names.length; i++) {
+          validateComponentName(names[i], instance.appContext.config);
+        }
+      }
+      if (Component.directives) {
+        const names = Object.keys(Component.directives);
+        for (let i = 0; i < names.length; i++) {
+          validateDirectiveName(names[i]);
+        }
+      }
+      if (Component.compilerOptions && isRuntimeOnly()) {
+        warn$1(
+          `"compilerOptions" is only supported when using a build of Vue that includes the runtime compiler. Since you are using a runtime-only build, the options should be passed via your build tool config instead.`
+        );
+      }
+    }
+    instance.accessCache = /* @__PURE__ */ Object.create(null);
+    instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers));
+    {
+      exposePropsOnRenderContext(instance);
+    }
+    const { setup } = Component;
+    if (setup) {
+      const setupContext = instance.setupContext = setup.length > 1 ? createSetupContext(instance) : null;
+      const reset = setCurrentInstance(instance);
+      pauseTracking();
+      const setupResult = callWithErrorHandling(
+        setup,
+        instance,
+        0,
+        [
+          shallowReadonly(instance.props) ,
+          setupContext
+        ]
+      );
+      resetTracking();
+      reset();
+      if (isPromise(setupResult)) {
+        setupResult.then(unsetCurrentInstance, unsetCurrentInstance);
+        if (isSSR) {
+          return setupResult.then((resolvedResult) => {
+            handleSetupResult(instance, resolvedResult, isSSR);
+          }).catch((e) => {
+            handleError(e, instance, 0);
+          });
+        } else {
+          instance.asyncDep = setupResult;
+          if (!instance.suspense) {
+            const name = (_a = Component.name) != null ? _a : "Anonymous";
+            warn$1(
+              `Component <${name}>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered.`
+            );
+          }
+        }
+      } else {
+        handleSetupResult(instance, setupResult, isSSR);
+      }
+    } else {
+      finishComponentSetup(instance, isSSR);
+    }
+  }
+  function handleSetupResult(instance, setupResult, isSSR) {
+    if (isFunction(setupResult)) {
+      {
+        instance.render = setupResult;
+      }
+    } else if (isObject(setupResult)) {
+      if (isVNode(setupResult)) {
+        warn$1(
+          `setup() should not return VNodes directly - return a render function instead.`
+        );
+      }
+      {
+        instance.devtoolsRawSetupState = setupResult;
+      }
+      instance.setupState = proxyRefs(setupResult);
+      {
+        exposeSetupStateOnRenderContext(instance);
+      }
+    } else if (setupResult !== void 0) {
+      warn$1(
+        `setup() should return an object. Received: ${setupResult === null ? "null" : typeof setupResult}`
+      );
+    }
+    finishComponentSetup(instance, isSSR);
+  }
+  let compile$1;
+  let installWithProxy;
+  function registerRuntimeCompiler(_compile) {
+    compile$1 = _compile;
+    installWithProxy = (i) => {
+      if (i.render._rc) {
+        i.withProxy = new Proxy(i.ctx, RuntimeCompiledPublicInstanceProxyHandlers);
+      }
+    };
+  }
+  const isRuntimeOnly = () => !compile$1;
+  function finishComponentSetup(instance, isSSR, skipOptions) {
+    const Component = instance.type;
+    if (!instance.render) {
+      if (!isSSR && compile$1 && !Component.render) {
+        const template = Component.template || resolveMergedOptions(instance).template;
+        if (template) {
+          {
+            startMeasure(instance, `compile`);
+          }
+          const { isCustomElement, compilerOptions } = instance.appContext.config;
+          const { delimiters, compilerOptions: componentCompilerOptions } = Component;
+          const finalCompilerOptions = extend(
+            extend(
+              {
+                isCustomElement,
+                delimiters
+              },
+              compilerOptions
+            ),
+            componentCompilerOptions
+          );
+          Component.render = compile$1(template, finalCompilerOptions);
+          {
+            endMeasure(instance, `compile`);
+          }
+        }
+      }
+      instance.render = Component.render || NOOP;
+      if (installWithProxy) {
+        installWithProxy(instance);
+      }
+    }
+    {
+      const reset = setCurrentInstance(instance);
+      pauseTracking();
+      try {
+        applyOptions(instance);
+      } finally {
+        resetTracking();
+        reset();
+      }
+    }
+    if (!Component.render && instance.render === NOOP && !isSSR) {
+      if (!compile$1 && Component.template) {
+        warn$1(
+          `Component provided template option but runtime compilation is not supported in this build of Vue.` + (` Use "vue.global.js" instead.` )
+        );
+      } else {
+        warn$1(`Component is missing template or render function.`);
+      }
+    }
+  }
+  function getAttrsProxy(instance) {
+    return instance.attrsProxy || (instance.attrsProxy = new Proxy(
+      instance.attrs,
+      {
+        get(target, key) {
+          markAttrsAccessed();
+          track(instance, "get", "$attrs");
+          return target[key];
+        },
+        set() {
+          warn$1(`setupContext.attrs is readonly.`);
+          return false;
+        },
+        deleteProperty() {
+          warn$1(`setupContext.attrs is readonly.`);
+          return false;
+        }
+      } 
+    ));
+  }
+  function getSlotsProxy(instance) {
+    return instance.slotsProxy || (instance.slotsProxy = new Proxy(instance.slots, {
+      get(target, key) {
+        track(instance, "get", "$slots");
+        return target[key];
+      }
+    }));
+  }
+  function createSetupContext(instance) {
+    const expose = (exposed) => {
+      {
+        if (instance.exposed) {
+          warn$1(`expose() should be called only once per setup().`);
+        }
+        if (exposed != null) {
+          let exposedType = typeof exposed;
+          if (exposedType === "object") {
+            if (isArray(exposed)) {
+              exposedType = "array";
+            } else if (isRef(exposed)) {
+              exposedType = "ref";
+            }
+          }
+          if (exposedType !== "object") {
+            warn$1(
+              `expose() should be passed a plain object, received ${exposedType}.`
+            );
+          }
+        }
+      }
+      instance.exposed = exposed || {};
+    };
+    {
+      return Object.freeze({
+        get attrs() {
+          return getAttrsProxy(instance);
+        },
+        get slots() {
+          return getSlotsProxy(instance);
+        },
+        get emit() {
+          return (event, ...args) => instance.emit(event, ...args);
+        },
+        expose
+      });
+    }
+  }
+  function getExposeProxy(instance) {
+    if (instance.exposed) {
+      return instance.exposeProxy || (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), {
+        get(target, key) {
+          if (key in target) {
+            return target[key];
+          } else if (key in publicPropertiesMap) {
+            return publicPropertiesMap[key](instance);
+          }
+        },
+        has(target, key) {
+          return key in target || key in publicPropertiesMap;
+        }
+      }));
+    }
+  }
+  const classifyRE = /(?:^|[-_])(\w)/g;
+  const classify = (str) => str.replace(classifyRE, (c) => c.toUpperCase()).replace(/[-_]/g, "");
+  function getComponentName(Component, includeInferred = true) {
+    return isFunction(Component) ? Component.displayName || Component.name : Component.name || includeInferred && Component.__name;
+  }
+  function formatComponentName(instance, Component, isRoot = false) {
+    let name = getComponentName(Component);
+    if (!name && Component.__file) {
+      const match = Component.__file.match(/([^/\\]+)\.\w+$/);
+      if (match) {
+        name = match[1];
+      }
+    }
+    if (!name && instance && instance.parent) {
+      const inferFromRegistry = (registry) => {
+        for (const key in registry) {
+          if (registry[key] === Component) {
+            return key;
+          }
+        }
+      };
+      name = inferFromRegistry(
+        instance.components || instance.parent.type.components
+      ) || inferFromRegistry(instance.appContext.components);
+    }
+    return name ? classify(name) : isRoot ? `App` : `Anonymous`;
+  }
+  function isClassComponent(value) {
+    return isFunction(value) && "__vccOpts" in value;
+  }
+
+  const computed = (getterOrOptions, debugOptions) => {
+    return computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
+  };
+
+  function useModel(props, name, options = EMPTY_OBJ) {
+    const i = getCurrentInstance();
+    if (!i) {
+      warn$1(`useModel() called without active instance.`);
+      return ref();
+    }
+    if (!i.propsOptions[0][name]) {
+      warn$1(`useModel() called with prop "${name}" which is not declared.`);
+      return ref();
+    }
+    const camelizedName = camelize(name);
+    const hyphenatedName = hyphenate(name);
+    const res = customRef((track, trigger) => {
+      let localValue;
+      watchSyncEffect(() => {
+        const propValue = props[name];
+        if (hasChanged(localValue, propValue)) {
+          localValue = propValue;
+          trigger();
+        }
+      });
+      return {
+        get() {
+          track();
+          return options.get ? options.get(localValue) : localValue;
+        },
+        set(value) {
+          const rawProps = i.vnode.props;
+          if (!(rawProps && // check if parent has passed v-model
+          (name in rawProps || camelizedName in rawProps || hyphenatedName in rawProps) && (`onUpdate:${name}` in rawProps || `onUpdate:${camelizedName}` in rawProps || `onUpdate:${hyphenatedName}` in rawProps)) && hasChanged(value, localValue)) {
+            localValue = value;
+            trigger();
+          }
+          i.emit(`update:${name}`, options.set ? options.set(value) : value);
+        }
+      };
+    });
+    const modifierKey = name === "modelValue" ? "modelModifiers" : `${name}Modifiers`;
+    res[Symbol.iterator] = () => {
+      let i2 = 0;
+      return {
+        next() {
+          if (i2 < 2) {
+            return { value: i2++ ? props[modifierKey] || {} : res, done: false };
+          } else {
+            return { done: true };
+          }
+        }
+      };
+    };
+    return res;
+  }
+
+  function h(type, propsOrChildren, children) {
+    const l = arguments.length;
+    if (l === 2) {
+      if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
+        if (isVNode(propsOrChildren)) {
+          return createVNode(type, null, [propsOrChildren]);
+        }
+        return createVNode(type, propsOrChildren);
+      } else {
+        return createVNode(type, null, propsOrChildren);
+      }
+    } else {
+      if (l > 3) {
+        children = Array.prototype.slice.call(arguments, 2);
+      } else if (l === 3 && isVNode(children)) {
+        children = [children];
+      }
+      return createVNode(type, propsOrChildren, children);
+    }
+  }
+
+  function initCustomFormatter() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const vueStyle = { style: "color:#3ba776" };
+    const numberStyle = { style: "color:#1677ff" };
+    const stringStyle = { style: "color:#f5222d" };
+    const keywordStyle = { style: "color:#eb2f96" };
+    const formatter = {
+      header(obj) {
+        if (!isObject(obj)) {
+          return null;
+        }
+        if (obj.__isVue) {
+          return ["div", vueStyle, `VueInstance`];
+        } else if (isRef(obj)) {
+          return [
+            "div",
+            {},
+            ["span", vueStyle, genRefFlag(obj)],
+            "<",
+            formatValue(obj.value),
+            `>`
+          ];
+        } else if (isReactive(obj)) {
+          return [
+            "div",
+            {},
+            ["span", vueStyle, isShallow(obj) ? "ShallowReactive" : "Reactive"],
+            "<",
+            formatValue(obj),
+            `>${isReadonly(obj) ? ` (readonly)` : ``}`
+          ];
+        } else if (isReadonly(obj)) {
+          return [
+            "div",
+            {},
+            ["span", vueStyle, isShallow(obj) ? "ShallowReadonly" : "Readonly"],
+            "<",
+            formatValue(obj),
+            ">"
+          ];
+        }
+        return null;
+      },
+      hasBody(obj) {
+        return obj && obj.__isVue;
+      },
+      body(obj) {
+        if (obj && obj.__isVue) {
+          return [
+            "div",
+            {},
+            ...formatInstance(obj.$)
+          ];
+        }
+      }
+    };
+    function formatInstance(instance) {
+      const blocks = [];
+      if (instance.type.props && instance.props) {
+        blocks.push(createInstanceBlock("props", toRaw(instance.props)));
+      }
+      if (instance.setupState !== EMPTY_OBJ) {
+        blocks.push(createInstanceBlock("setup", instance.setupState));
+      }
+      if (instance.data !== EMPTY_OBJ) {
+        blocks.push(createInstanceBlock("data", toRaw(instance.data)));
+      }
+      const computed = extractKeys(instance, "computed");
+      if (computed) {
+        blocks.push(createInstanceBlock("computed", computed));
+      }
+      const injected = extractKeys(instance, "inject");
+      if (injected) {
+        blocks.push(createInstanceBlock("injected", injected));
+      }
+      blocks.push([
+        "div",
+        {},
+        [
+          "span",
+          {
+            style: keywordStyle.style + ";opacity:0.66"
+          },
+          "$ (internal): "
+        ],
+        ["object", { object: instance }]
+      ]);
+      return blocks;
+    }
+    function createInstanceBlock(type, target) {
+      target = extend({}, target);
+      if (!Object.keys(target).length) {
+        return ["span", {}];
+      }
+      return [
+        "div",
+        { style: "line-height:1.25em;margin-bottom:0.6em" },
+        [
+          "div",
+          {
+            style: "color:#476582"
+          },
+          type
+        ],
+        [
+          "div",
+          {
+            style: "padding-left:1.25em"
+          },
+          ...Object.keys(target).map((key) => {
+            return [
+              "div",
+              {},
+              ["span", keywordStyle, key + ": "],
+              formatValue(target[key], false)
+            ];
+          })
+        ]
+      ];
+    }
+    function formatValue(v, asRaw = true) {
+      if (typeof v === "number") {
+        return ["span", numberStyle, v];
+      } else if (typeof v === "string") {
+        return ["span", stringStyle, JSON.stringify(v)];
+      } else if (typeof v === "boolean") {
+        return ["span", keywordStyle, v];
+      } else if (isObject(v)) {
+        return ["object", { object: asRaw ? toRaw(v) : v }];
+      } else {
+        return ["span", stringStyle, String(v)];
+      }
+    }
+    function extractKeys(instance, type) {
+      const Comp = instance.type;
+      if (isFunction(Comp)) {
+        return;
+      }
+      const extracted = {};
+      for (const key in instance.ctx) {
+        if (isKeyOfType(Comp, key, type)) {
+          extracted[key] = instance.ctx[key];
+        }
+      }
+      return extracted;
+    }
+    function isKeyOfType(Comp, key, type) {
+      const opts = Comp[type];
+      if (isArray(opts) && opts.includes(key) || isObject(opts) && key in opts) {
+        return true;
+      }
+      if (Comp.extends && isKeyOfType(Comp.extends, key, type)) {
+        return true;
+      }
+      if (Comp.mixins && Comp.mixins.some((m) => isKeyOfType(m, key, type))) {
+        return true;
+      }
+    }
+    function genRefFlag(v) {
+      if (isShallow(v)) {
+        return `ShallowRef`;
+      }
+      if (v.effect) {
+        return `ComputedRef`;
+      }
+      return `Ref`;
+    }
+    if (window.devtoolsFormatters) {
+      window.devtoolsFormatters.push(formatter);
+    } else {
+      window.devtoolsFormatters = [formatter];
+    }
+  }
+
+  function withMemo(memo, render, cache, index) {
+    const cached = cache[index];
+    if (cached && isMemoSame(cached, memo)) {
+      return cached;
+    }
+    const ret = render();
+    ret.memo = memo.slice();
+    return cache[index] = ret;
+  }
+  function isMemoSame(cached, memo) {
+    const prev = cached.memo;
+    if (prev.length != memo.length) {
+      return false;
+    }
+    for (let i = 0; i < prev.length; i++) {
+      if (hasChanged(prev[i], memo[i])) {
+        return false;
+      }
+    }
+    if (isBlockTreeEnabled > 0 && currentBlock) {
+      currentBlock.push(cached);
+    }
+    return true;
+  }
+
+  const version = "3.4.18";
+  const warn = warn$1 ;
+  const ErrorTypeStrings = ErrorTypeStrings$1 ;
+  const devtools = devtools$1 ;
+  const setDevtoolsHook = setDevtoolsHook$1 ;
+  const ssrUtils = null;
+  const resolveFilter = null;
+  const compatUtils = null;
+  const DeprecationTypes = null;
+
+  const svgNS = "http://www.w3.org/2000/svg";
+  const mathmlNS = "http://www.w3.org/1998/Math/MathML";
+  const doc = typeof document !== "undefined" ? document : null;
+  const templateContainer = doc && /* @__PURE__ */ doc.createElement("template");
+  const nodeOps = {
+    insert: (child, parent, anchor) => {
+      parent.insertBefore(child, anchor || null);
+    },
+    remove: (child) => {
+      const parent = child.parentNode;
+      if (parent) {
+        parent.removeChild(child);
+      }
+    },
+    createElement: (tag, namespace, is, props) => {
+      const el = namespace === "svg" ? doc.createElementNS(svgNS, tag) : namespace === "mathml" ? doc.createElementNS(mathmlNS, tag) : doc.createElement(tag, is ? { is } : void 0);
+      if (tag === "select" && props && props.multiple != null) {
+        el.setAttribute("multiple", props.multiple);
+      }
+      return el;
+    },
+    createText: (text) => doc.createTextNode(text),
+    createComment: (text) => doc.createComment(text),
+    setText: (node, text) => {
+      node.nodeValue = text;
+    },
+    setElementText: (el, text) => {
+      el.textContent = text;
+    },
+    parentNode: (node) => node.parentNode,
+    nextSibling: (node) => node.nextSibling,
+    querySelector: (selector) => doc.querySelector(selector),
+    setScopeId(el, id) {
+      el.setAttribute(id, "");
+    },
+    // __UNSAFE__
+    // Reason: innerHTML.
+    // Static content here can only come from compiled templates.
+    // As long as the user only uses trusted templates, this is safe.
+    insertStaticContent(content, parent, anchor, namespace, start, end) {
+      const before = anchor ? anchor.previousSibling : parent.lastChild;
+      if (start && (start === end || start.nextSibling)) {
+        while (true) {
+          parent.insertBefore(start.cloneNode(true), anchor);
+          if (start === end || !(start = start.nextSibling))
+            break;
+        }
+      } else {
+        templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
+        const template = templateContainer.content;
+        if (namespace === "svg" || namespace === "mathml") {
+          const wrapper = template.firstChild;
+          while (wrapper.firstChild) {
+            template.appendChild(wrapper.firstChild);
+          }
+          template.removeChild(wrapper);
+        }
+        parent.insertBefore(template, anchor);
+      }
+      return [
+        // first
+        before ? before.nextSibling : parent.firstChild,
+        // last
+        anchor ? anchor.previousSibling : parent.lastChild
+      ];
+    }
+  };
+
+  const TRANSITION$1 = "transition";
+  const ANIMATION = "animation";
+  const vtcKey = Symbol("_vtc");
+  const Transition = (props, { slots }) => h(BaseTransition, resolveTransitionProps(props), slots);
+  Transition.displayName = "Transition";
+  const DOMTransitionPropsValidators = {
+    name: String,
+    type: String,
+    css: {
+      type: Boolean,
+      default: true
+    },
+    duration: [String, Number, Object],
+    enterFromClass: String,
+    enterActiveClass: String,
+    enterToClass: String,
+    appearFromClass: String,
+    appearActiveClass: String,
+    appearToClass: String,
+    leaveFromClass: String,
+    leaveActiveClass: String,
+    leaveToClass: String
+  };
+  const TransitionPropsValidators = Transition.props = /* @__PURE__ */ extend(
+    {},
+    BaseTransitionPropsValidators,
+    DOMTransitionPropsValidators
+  );
+  const callHook = (hook, args = []) => {
+    if (isArray(hook)) {
+      hook.forEach((h2) => h2(...args));
+    } else if (hook) {
+      hook(...args);
+    }
+  };
+  const hasExplicitCallback = (hook) => {
+    return hook ? isArray(hook) ? hook.some((h2) => h2.length > 1) : hook.length > 1 : false;
+  };
+  function resolveTransitionProps(rawProps) {
+    const baseProps = {};
+    for (const key in rawProps) {
+      if (!(key in DOMTransitionPropsValidators)) {
+        baseProps[key] = rawProps[key];
+      }
+    }
+    if (rawProps.css === false) {
+      return baseProps;
+    }
+    const {
+      name = "v",
+      type,
+      duration,
+      enterFromClass = `${name}-enter-from`,
+      enterActiveClass = `${name}-enter-active`,
+      enterToClass = `${name}-enter-to`,
+      appearFromClass = enterFromClass,
+      appearActiveClass = enterActiveClass,
+      appearToClass = enterToClass,
+      leaveFromClass = `${name}-leave-from`,
+      leaveActiveClass = `${name}-leave-active`,
+      leaveToClass = `${name}-leave-to`
+    } = rawProps;
+    const durations = normalizeDuration(duration);
+    const enterDuration = durations && durations[0];
+    const leaveDuration = durations && durations[1];
+    const {
+      onBeforeEnter,
+      onEnter,
+      onEnterCancelled,
+      onLeave,
+      onLeaveCancelled,
+      onBeforeAppear = onBeforeEnter,
+      onAppear = onEnter,
+      onAppearCancelled = onEnterCancelled
+    } = baseProps;
+    const finishEnter = (el, isAppear, done) => {
+      removeTransitionClass(el, isAppear ? appearToClass : enterToClass);
+      removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
+      done && done();
+    };
+    const finishLeave = (el, done) => {
+      el._isLeaving = false;
+      removeTransitionClass(el, leaveFromClass);
+      removeTransitionClass(el, leaveToClass);
+      removeTransitionClass(el, leaveActiveClass);
+      done && done();
+    };
+    const makeEnterHook = (isAppear) => {
+      return (el, done) => {
+        const hook = isAppear ? onAppear : onEnter;
+        const resolve = () => finishEnter(el, isAppear, done);
+        callHook(hook, [el, resolve]);
+        nextFrame(() => {
+          removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
+          addTransitionClass(el, isAppear ? appearToClass : enterToClass);
+          if (!hasExplicitCallback(hook)) {
+            whenTransitionEnds(el, type, enterDuration, resolve);
+          }
+        });
+      };
+    };
+    return extend(baseProps, {
+      onBeforeEnter(el) {
+        callHook(onBeforeEnter, [el]);
+        addTransitionClass(el, enterFromClass);
+        addTransitionClass(el, enterActiveClass);
+      },
+      onBeforeAppear(el) {
+        callHook(onBeforeAppear, [el]);
+        addTransitionClass(el, appearFromClass);
+        addTransitionClass(el, appearActiveClass);
+      },
+      onEnter: makeEnterHook(false),
+      onAppear: makeEnterHook(true),
+      onLeave(el, done) {
+        el._isLeaving = true;
+        const resolve = () => finishLeave(el, done);
+        addTransitionClass(el, leaveFromClass);
+        forceReflow();
+        addTransitionClass(el, leaveActiveClass);
+        nextFrame(() => {
+          if (!el._isLeaving) {
+            return;
+          }
+          removeTransitionClass(el, leaveFromClass);
+          addTransitionClass(el, leaveToClass);
+          if (!hasExplicitCallback(onLeave)) {
+            whenTransitionEnds(el, type, leaveDuration, resolve);
+          }
+        });
+        callHook(onLeave, [el, resolve]);
+      },
+      onEnterCancelled(el) {
+        finishEnter(el, false);
+        callHook(onEnterCancelled, [el]);
+      },
+      onAppearCancelled(el) {
+        finishEnter(el, true);
+        callHook(onAppearCancelled, [el]);
+      },
+      onLeaveCancelled(el) {
+        finishLeave(el);
+        callHook(onLeaveCancelled, [el]);
+      }
+    });
+  }
+  function normalizeDuration(duration) {
+    if (duration == null) {
+      return null;
+    } else if (isObject(duration)) {
+      return [NumberOf(duration.enter), NumberOf(duration.leave)];
+    } else {
+      const n = NumberOf(duration);
+      return [n, n];
+    }
+  }
+  function NumberOf(val) {
+    const res = toNumber(val);
+    {
+      assertNumber(res, "<transition> explicit duration");
+    }
+    return res;
+  }
+  function addTransitionClass(el, cls) {
+    cls.split(/\s+/).forEach((c) => c && el.classList.add(c));
+    (el[vtcKey] || (el[vtcKey] = /* @__PURE__ */ new Set())).add(cls);
+  }
+  function removeTransitionClass(el, cls) {
+    cls.split(/\s+/).forEach((c) => c && el.classList.remove(c));
+    const _vtc = el[vtcKey];
+    if (_vtc) {
+      _vtc.delete(cls);
+      if (!_vtc.size) {
+        el[vtcKey] = void 0;
+      }
+    }
+  }
+  function nextFrame(cb) {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(cb);
+    });
+  }
+  let endId = 0;
+  function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) {
+    const id = el._endId = ++endId;
+    const resolveIfNotStale = () => {
+      if (id === el._endId) {
+        resolve();
+      }
+    };
+    if (explicitTimeout) {
+      return setTimeout(resolveIfNotStale, explicitTimeout);
+    }
+    const { type, timeout, propCount } = getTransitionInfo(el, expectedType);
+    if (!type) {
+      return resolve();
+    }
+    const endEvent = type + "end";
+    let ended = 0;
+    const end = () => {
+      el.removeEventListener(endEvent, onEnd);
+      resolveIfNotStale();
+    };
+    const onEnd = (e) => {
+      if (e.target === el && ++ended >= propCount) {
+        end();
+      }
+    };
+    setTimeout(() => {
+      if (ended < propCount) {
+        end();
+      }
+    }, timeout + 1);
+    el.addEventListener(endEvent, onEnd);
+  }
+  function getTransitionInfo(el, expectedType) {
+    const styles = window.getComputedStyle(el);
+    const getStyleProperties = (key) => (styles[key] || "").split(", ");
+    const transitionDelays = getStyleProperties(`${TRANSITION$1}Delay`);
+    const transitionDurations = getStyleProperties(`${TRANSITION$1}Duration`);
+    const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
+    const animationDelays = getStyleProperties(`${ANIMATION}Delay`);
+    const animationDurations = getStyleProperties(`${ANIMATION}Duration`);
+    const animationTimeout = getTimeout(animationDelays, animationDurations);
+    let type = null;
+    let timeout = 0;
+    let propCount = 0;
+    if (expectedType === TRANSITION$1) {
+      if (transitionTimeout > 0) {
+        type = TRANSITION$1;
+        timeout = transitionTimeout;
+        propCount = transitionDurations.length;
+      }
+    } else if (expectedType === ANIMATION) {
+      if (animationTimeout > 0) {
+        type = ANIMATION;
+        timeout = animationTimeout;
+        propCount = animationDurations.length;
+      }
+    } else {
+      timeout = Math.max(transitionTimeout, animationTimeout);
+      type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION$1 : ANIMATION : null;
+      propCount = type ? type === TRANSITION$1 ? transitionDurations.length : animationDurations.length : 0;
+    }
+    const hasTransform = type === TRANSITION$1 && /\b(transform|all)(,|$)/.test(
+      getStyleProperties(`${TRANSITION$1}Property`).toString()
+    );
+    return {
+      type,
+      timeout,
+      propCount,
+      hasTransform
+    };
+  }
+  function getTimeout(delays, durations) {
+    while (delays.length < durations.length) {
+      delays = delays.concat(delays);
+    }
+    return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));
+  }
+  function toMs(s) {
+    if (s === "auto")
+      return 0;
+    return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
+  }
+  function forceReflow() {
+    return document.body.offsetHeight;
+  }
+
+  function patchClass(el, value, isSVG) {
+    const transitionClasses = el[vtcKey];
+    if (transitionClasses) {
+      value = (value ? [value, ...transitionClasses] : [...transitionClasses]).join(" ");
+    }
+    if (value == null) {
+      el.removeAttribute("class");
+    } else if (isSVG) {
+      el.setAttribute("class", value);
+    } else {
+      el.className = value;
+    }
+  }
+
+  const vShowOldKey = Symbol("_vod");
+  const vShow = {
+    beforeMount(el, { value }, { transition }) {
+      el[vShowOldKey] = el.style.display === "none" ? "" : el.style.display;
+      if (transition && value) {
+        transition.beforeEnter(el);
+      } else {
+        setDisplay(el, value);
+      }
+    },
+    mounted(el, { value }, { transition }) {
+      if (transition && value) {
+        transition.enter(el);
+      }
+    },
+    updated(el, { value, oldValue }, { transition }) {
+      if (!value === !oldValue && el.style.display === el[vShowOldKey])
+        return;
+      if (transition) {
+        if (value) {
+          transition.beforeEnter(el);
+          setDisplay(el, true);
+          transition.enter(el);
+        } else {
+          transition.leave(el, () => {
+            setDisplay(el, false);
+          });
+        }
+      } else {
+        setDisplay(el, value);
+      }
+    },
+    beforeUnmount(el, { value }) {
+      setDisplay(el, value);
+    }
+  };
+  {
+    vShow.name = "show";
+  }
+  function setDisplay(el, value) {
+    el.style.display = value ? el[vShowOldKey] : "none";
+  }
+
+  const CSS_VAR_TEXT = Symbol("CSS_VAR_TEXT" );
+  function useCssVars(getter) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+      warn(`useCssVars is called without current active component instance.`);
+      return;
+    }
+    const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
+      Array.from(
+        document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
+      ).forEach((node) => setVarsOnNode(node, vars));
+    };
+    {
+      instance.getCssVars = () => getter(instance.proxy);
+    }
+    const setVars = () => {
+      const vars = getter(instance.proxy);
+      setVarsOnVNode(instance.subTree, vars);
+      updateTeleports(vars);
+    };
+    watchPostEffect(setVars);
+    onMounted(() => {
+      const ob = new MutationObserver(setVars);
+      ob.observe(instance.subTree.el.parentNode, { childList: true });
+      onUnmounted(() => ob.disconnect());
+    });
+  }
+  function setVarsOnVNode(vnode, vars) {
+    if (vnode.shapeFlag & 128) {
+      const suspense = vnode.suspense;
+      vnode = suspense.activeBranch;
+      if (suspense.pendingBranch && !suspense.isHydrating) {
+        suspense.effects.push(() => {
+          setVarsOnVNode(suspense.activeBranch, vars);
+        });
+      }
+    }
+    while (vnode.component) {
+      vnode = vnode.component.subTree;
+    }
+    if (vnode.shapeFlag & 1 && vnode.el) {
+      setVarsOnNode(vnode.el, vars);
+    } else if (vnode.type === Fragment) {
+      vnode.children.forEach((c) => setVarsOnVNode(c, vars));
+    } else if (vnode.type === Static) {
+      let { el, anchor } = vnode;
+      while (el) {
+        setVarsOnNode(el, vars);
+        if (el === anchor)
+          break;
+        el = el.nextSibling;
+      }
+    }
+  }
+  function setVarsOnNode(el, vars) {
+    if (el.nodeType === 1) {
+      const style = el.style;
+      let cssText = "";
+      for (const key in vars) {
+        style.setProperty(`--${key}`, vars[key]);
+        cssText += `--${key}: ${vars[key]};`;
+      }
+      style[CSS_VAR_TEXT] = cssText;
+    }
+  }
+
+  const displayRE = /(^|;)\s*display\s*:/;
+  function patchStyle(el, prev, next) {
+    const style = el.style;
+    const isCssString = isString(next);
+    const currentDisplay = style.display;
+    let hasControlledDisplay = false;
+    if (next && !isCssString) {
+      if (prev && !isString(prev)) {
+        for (const key in prev) {
+          if (next[key] == null) {
+            setStyle(style, key, "");
+          }
+        }
+      }
+      for (const key in next) {
+        if (key === "display") {
+          hasControlledDisplay = true;
+        }
+        setStyle(style, key, next[key]);
+      }
+    } else {
+      if (isCssString) {
+        if (prev !== next) {
+          const cssVarText = style[CSS_VAR_TEXT];
+          if (cssVarText) {
+            next += ";" + cssVarText;
+          }
+          style.cssText = next;
+          hasControlledDisplay = displayRE.test(next);
+        }
+      } else if (prev) {
+        el.removeAttribute("style");
+      }
+    }
+    if (vShowOldKey in el) {
+      el[vShowOldKey] = hasControlledDisplay ? style.display : "";
+      style.display = currentDisplay;
+    }
+  }
+  const semicolonRE = /[^\\];\s*$/;
+  const importantRE = /\s*!important$/;
+  function setStyle(style, name, val) {
+    if (isArray(val)) {
+      val.forEach((v) => setStyle(style, name, v));
+    } else {
+      if (val == null)
+        val = "";
+      {
+        if (semicolonRE.test(val)) {
+          warn(
+            `Unexpected semicolon at the end of '${name}' style value: '${val}'`
+          );
+        }
+      }
+      if (name.startsWith("--")) {
+        style.setProperty(name, val);
+      } else {
+        const prefixed = autoPrefix(style, name);
+        if (importantRE.test(val)) {
+          style.setProperty(
+            hyphenate(prefixed),
+            val.replace(importantRE, ""),
+            "important"
+          );
+        } else {
+          style[prefixed] = val;
+        }
+      }
+    }
+  }
+  const prefixes = ["Webkit", "Moz", "ms"];
+  const prefixCache = {};
+  function autoPrefix(style, rawName) {
+    const cached = prefixCache[rawName];
+    if (cached) {
+      return cached;
+    }
+    let name = camelize(rawName);
+    if (name !== "filter" && name in style) {
+      return prefixCache[rawName] = name;
+    }
+    name = capitalize(name);
+    for (let i = 0; i < prefixes.length; i++) {
+      const prefixed = prefixes[i] + name;
+      if (prefixed in style) {
+        return prefixCache[rawName] = prefixed;
+      }
+    }
+    return rawName;
+  }
+
+  const xlinkNS = "http://www.w3.org/1999/xlink";
+  function patchAttr(el, key, value, isSVG, instance) {
+    if (isSVG && key.startsWith("xlink:")) {
+      if (value == null) {
+        el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
+      } else {
+        el.setAttributeNS(xlinkNS, key, value);
+      }
+    } else {
+      const isBoolean = isSpecialBooleanAttr(key);
+      if (value == null || isBoolean && !includeBooleanAttr(value)) {
+        el.removeAttribute(key);
+      } else {
+        el.setAttribute(key, isBoolean ? "" : value);
+      }
+    }
+  }
+
+  function patchDOMProp(el, key, value, prevChildren, parentComponent, parentSuspense, unmountChildren) {
+    if (key === "innerHTML" || key === "textContent") {
+      if (prevChildren) {
+        unmountChildren(prevChildren, parentComponent, parentSuspense);
+      }
+      el[key] = value == null ? "" : value;
+      return;
+    }
+    const tag = el.tagName;
+    if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
+    !tag.includes("-")) {
+      el._value = value;
+      const oldValue = tag === "OPTION" ? el.getAttribute("value") : el.value;
+      const newValue = value == null ? "" : value;
+      if (oldValue !== newValue) {
+        el.value = newValue;
+      }
+      if (value == null) {
+        el.removeAttribute(key);
+      }
+      return;
+    }
+    let needRemove = false;
+    if (value === "" || value == null) {
+      const type = typeof el[key];
+      if (type === "boolean") {
+        value = includeBooleanAttr(value);
+      } else if (value == null && type === "string") {
+        value = "";
+        needRemove = true;
+      } else if (type === "number") {
+        value = 0;
+        needRemove = true;
+      }
+    }
+    try {
+      el[key] = value;
+    } catch (e) {
+      if (!needRemove) {
+        warn(
+          `Failed setting prop "${key}" on <${tag.toLowerCase()}>: value ${value} is invalid.`,
+          e
+        );
+      }
+    }
+    needRemove && el.removeAttribute(key);
+  }
+
+  function addEventListener(el, event, handler, options) {
+    el.addEventListener(event, handler, options);
+  }
+  function removeEventListener(el, event, handler, options) {
+    el.removeEventListener(event, handler, options);
+  }
+  const veiKey = Symbol("_vei");
+  function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
+    const invokers = el[veiKey] || (el[veiKey] = {});
+    const existingInvoker = invokers[rawName];
+    if (nextValue && existingInvoker) {
+      existingInvoker.value = nextValue;
+    } else {
+      const [name, options] = parseName(rawName);
+      if (nextValue) {
+        const invoker = invokers[rawName] = createInvoker(nextValue, instance);
+        addEventListener(el, name, invoker, options);
+      } else if (existingInvoker) {
+        removeEventListener(el, name, existingInvoker, options);
+        invokers[rawName] = void 0;
+      }
+    }
+  }
+  const optionsModifierRE = /(?:Once|Passive|Capture)$/;
+  function parseName(name) {
+    let options;
+    if (optionsModifierRE.test(name)) {
+      options = {};
+      let m;
+      while (m = name.match(optionsModifierRE)) {
+        name = name.slice(0, name.length - m[0].length);
+        options[m[0].toLowerCase()] = true;
+      }
+    }
+    const event = name[2] === ":" ? name.slice(3) : hyphenate(name.slice(2));
+    return [event, options];
+  }
+  let cachedNow = 0;
+  const p = /* @__PURE__ */ Promise.resolve();
+  const getNow = () => cachedNow || (p.then(() => cachedNow = 0), cachedNow = Date.now());
+  function createInvoker(initialValue, instance) {
+    const invoker = (e) => {
+      if (!e._vts) {
+        e._vts = Date.now();
+      } else if (e._vts <= invoker.attached) {
+        return;
+      }
+      callWithAsyncErrorHandling(
+        patchStopImmediatePropagation(e, invoker.value),
+        instance,
+        5,
+        [e]
+      );
+    };
+    invoker.value = initialValue;
+    invoker.attached = getNow();
+    return invoker;
+  }
+  function patchStopImmediatePropagation(e, value) {
+    if (isArray(value)) {
+      const originalStop = e.stopImmediatePropagation;
+      e.stopImmediatePropagation = () => {
+        originalStop.call(e);
+        e._stopped = true;
+      };
+      return value.map((fn) => (e2) => !e2._stopped && fn && fn(e2));
+    } else {
+      return value;
+    }
+  }
+
+  const isNativeOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // lowercase letter
+  key.charCodeAt(2) > 96 && key.charCodeAt(2) < 123;
+  const patchProp = (el, key, prevValue, nextValue, namespace, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
+    const isSVG = namespace === "svg";
+    if (key === "class") {
+      patchClass(el, nextValue, isSVG);
+    } else if (key === "style") {
+      patchStyle(el, prevValue, nextValue);
+    } else if (isOn(key)) {
+      if (!isModelListener(key)) {
+        patchEvent(el, key, prevValue, nextValue, parentComponent);
+      }
+    } else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, nextValue, isSVG)) {
+      patchDOMProp(
+        el,
+        key,
+        nextValue,
+        prevChildren,
+        parentComponent,
+        parentSuspense,
+        unmountChildren
+      );
+    } else {
+      if (key === "true-value") {
+        el._trueValue = nextValue;
+      } else if (key === "false-value") {
+        el._falseValue = nextValue;
+      }
+      patchAttr(el, key, nextValue, isSVG);
+    }
+  };
+  function shouldSetAsProp(el, key, value, isSVG) {
+    if (isSVG) {
+      if (key === "innerHTML" || key === "textContent") {
+        return true;
+      }
+      if (key in el && isNativeOn(key) && isFunction(value)) {
+        return true;
+      }
+      return false;
+    }
+    if (key === "spellcheck" || key === "draggable" || key === "translate") {
+      return false;
+    }
+    if (key === "form") {
+      return false;
+    }
+    if (key === "list" && el.tagName === "INPUT") {
+      return false;
+    }
+    if (key === "type" && el.tagName === "TEXTAREA") {
+      return false;
+    }
+    if (key === "width" || key === "height") {
+      const tag = el.tagName;
+      if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
+        return false;
+      }
+    }
+    if (isNativeOn(key) && isString(value)) {
+      return false;
+    }
+    return key in el;
+  }
+
+  /*! #__NO_SIDE_EFFECTS__ */
+  // @__NO_SIDE_EFFECTS__
+  function defineCustomElement(options, hydrate2) {
+    const Comp = defineComponent(options);
+    class VueCustomElement extends VueElement {
+      constructor(initialProps) {
+        super(Comp, initialProps, hydrate2);
+      }
+    }
+    VueCustomElement.def = Comp;
+    return VueCustomElement;
+  }
+  /*! #__NO_SIDE_EFFECTS__ */
+  const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options) => {
+    return /* @__PURE__ */ defineCustomElement(options, hydrate);
+  };
+  const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+  };
+  class VueElement extends BaseClass {
+    constructor(_def, _props = {}, hydrate2) {
+      super();
+      this._def = _def;
+      this._props = _props;
+      /**
+       * @internal
+       */
+      this._instance = null;
+      this._connected = false;
+      this._resolved = false;
+      this._numberProps = null;
+      this._ob = null;
+      if (this.shadowRoot && hydrate2) {
+        hydrate2(this._createVNode(), this.shadowRoot);
+      } else {
+        if (this.shadowRoot) {
+          warn(
+            `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
+          );
+        }
+        this.attachShadow({ mode: "open" });
+        if (!this._def.__asyncLoader) {
+          this._resolveProps(this._def);
+        }
+      }
+    }
+    connectedCallback() {
+      this._connected = true;
+      if (!this._instance) {
+        if (this._resolved) {
+          this._update();
+        } else {
+          this._resolveDef();
+        }
+      }
+    }
+    disconnectedCallback() {
+      this._connected = false;
+      if (this._ob) {
+        this._ob.disconnect();
+        this._ob = null;
+      }
+      nextTick(() => {
+        if (!this._connected) {
+          render(null, this.shadowRoot);
+          this._instance = null;
+        }
+      });
+    }
+    /**
+     * resolve inner component definition (handle possible async component)
+     */
+    _resolveDef() {
+      this._resolved = true;
+      for (let i = 0; i < this.attributes.length; i++) {
+        this._setAttr(this.attributes[i].name);
+      }
+      this._ob = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          this._setAttr(m.attributeName);
+        }
+      });
+      this._ob.observe(this, { attributes: true });
+      const resolve = (def, isAsync = false) => {
+        const { props, styles } = def;
+        let numberProps;
+        if (props && !isArray(props)) {
+          for (const key in props) {
+            const opt = props[key];
+            if (opt === Number || opt && opt.type === Number) {
+              if (key in this._props) {
+                this._props[key] = toNumber(this._props[key]);
+              }
+              (numberProps || (numberProps = /* @__PURE__ */ Object.create(null)))[camelize(key)] = true;
+            }
+          }
+        }
+        this._numberProps = numberProps;
+        if (isAsync) {
+          this._resolveProps(def);
+        }
+        this._applyStyles(styles);
+        this._update();
+      };
+      const asyncDef = this._def.__asyncLoader;
+      if (asyncDef) {
+        asyncDef().then((def) => resolve(def, true));
+      } else {
+        resolve(this._def);
+      }
+    }
+    _resolveProps(def) {
+      const { props } = def;
+      const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
+      for (const key of Object.keys(this)) {
+        if (key[0] !== "_" && declaredPropKeys.includes(key)) {
+          this._setProp(key, this[key], true, false);
+        }
+      }
+      for (const key of declaredPropKeys.map(camelize)) {
+        Object.defineProperty(this, key, {
+          get() {
+            return this._getProp(key);
+          },
+          set(val) {
+            this._setProp(key, val);
+          }
+        });
+      }
+    }
+    _setAttr(key) {
+      let value = this.getAttribute(key);
+      const camelKey = camelize(key);
+      if (this._numberProps && this._numberProps[camelKey]) {
+        value = toNumber(value);
+      }
+      this._setProp(camelKey, value, false);
+    }
+    /**
+     * @internal
+     */
+    _getProp(key) {
+      return this._props[key];
+    }
+    /**
+     * @internal
+     */
+    _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
+      if (val !== this._props[key]) {
+        this._props[key] = val;
+        if (shouldUpdate && this._instance) {
+          this._update();
+        }
+        if (shouldReflect) {
+          if (val === true) {
+            this.setAttribute(hyphenate(key), "");
+          } else if (typeof val === "string" || typeof val === "number") {
+            this.setAttribute(hyphenate(key), val + "");
+          } else if (!val) {
+            this.removeAttribute(hyphenate(key));
+          }
+        }
+      }
+    }
+    _update() {
+      render(this._createVNode(), this.shadowRoot);
+    }
+    _createVNode() {
+      const vnode = createVNode(this._def, extend({}, this._props));
+      if (!this._instance) {
+        vnode.ce = (instance) => {
+          this._instance = instance;
+          instance.isCE = true;
+          {
+            instance.ceReload = (newStyles) => {
+              if (this._styles) {
+                this._styles.forEach((s) => this.shadowRoot.removeChild(s));
+                this._styles.length = 0;
+              }
+              this._applyStyles(newStyles);
+              this._instance = null;
+              this._update();
+            };
+          }
+          const dispatch = (event, args) => {
+            this.dispatchEvent(
+              new CustomEvent(event, {
+                detail: args
+              })
+            );
+          };
+          instance.emit = (event, ...args) => {
+            dispatch(event, args);
+            if (hyphenate(event) !== event) {
+              dispatch(hyphenate(event), args);
+            }
+          };
+          let parent = this;
+          while (parent = parent && (parent.parentNode || parent.host)) {
+            if (parent instanceof VueElement) {
+              instance.parent = parent._instance;
+              instance.provides = parent._instance.provides;
+              break;
+            }
+          }
+        };
+      }
+      return vnode;
+    }
+    _applyStyles(styles) {
+      if (styles) {
+        styles.forEach((css) => {
+          const s = document.createElement("style");
+          s.textContent = css;
+          this.shadowRoot.appendChild(s);
+          {
+            (this._styles || (this._styles = [])).push(s);
+          }
+        });
+      }
+    }
+  }
+
+  function useCssModule(name = "$style") {
+    {
+      {
+        warn(`useCssModule() is not supported in the global build.`);
+      }
+      return EMPTY_OBJ;
+    }
+  }
+
+  const positionMap = /* @__PURE__ */ new WeakMap();
+  const newPositionMap = /* @__PURE__ */ new WeakMap();
+  const moveCbKey = Symbol("_moveCb");
+  const enterCbKey = Symbol("_enterCb");
+  const TransitionGroupImpl = {
+    name: "TransitionGroup",
+    props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
+      tag: String,
+      moveClass: String
+    }),
+    setup(props, { slots }) {
+      const instance = getCurrentInstance();
+      const state = useTransitionState();
+      let prevChildren;
+      let children;
+      onUpdated(() => {
+        if (!prevChildren.length) {
+          return;
+        }
+        const moveClass = props.moveClass || `${props.name || "v"}-move`;
+        if (!hasCSSTransform(
+          prevChildren[0].el,
+          instance.vnode.el,
+          moveClass
+        )) {
+          return;
+        }
+        prevChildren.forEach(callPendingCbs);
+        prevChildren.forEach(recordPosition);
+        const movedChildren = prevChildren.filter(applyTranslation);
+        forceReflow();
+        movedChildren.forEach((c) => {
+          const el = c.el;
+          const style = el.style;
+          addTransitionClass(el, moveClass);
+          style.transform = style.webkitTransform = style.transitionDuration = "";
+          const cb = el[moveCbKey] = (e) => {
+            if (e && e.target !== el) {
+              return;
+            }
+            if (!e || /transform$/.test(e.propertyName)) {
+              el.removeEventListener("transitionend", cb);
+              el[moveCbKey] = null;
+              removeTransitionClass(el, moveClass);
+            }
+          };
+          el.addEventListener("transitionend", cb);
+        });
+      });
+      return () => {
+        const rawProps = toRaw(props);
+        const cssTransitionProps = resolveTransitionProps(rawProps);
+        let tag = rawProps.tag || Fragment;
+        prevChildren = children;
+        children = slots.default ? getTransitionRawChildren(slots.default()) : [];
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i];
+          if (child.key != null) {
+            setTransitionHooks(
+              child,
+              resolveTransitionHooks(child, cssTransitionProps, state, instance)
+            );
+          } else {
+            warn(`<TransitionGroup> children must be keyed.`);
+          }
+        }
+        if (prevChildren) {
+          for (let i = 0; i < prevChildren.length; i++) {
+            const child = prevChildren[i];
+            setTransitionHooks(
+              child,
+              resolveTransitionHooks(child, cssTransitionProps, state, instance)
+            );
+            positionMap.set(child, child.el.getBoundingClientRect());
+          }
+        }
+        return createVNode(tag, null, children);
+      };
+    }
+  };
+  const removeMode = (props) => delete props.mode;
+  /* @__PURE__ */ removeMode(TransitionGroupImpl.props);
+  const TransitionGroup = TransitionGroupImpl;
+  function callPendingCbs(c) {
+    const el = c.el;
+    if (el[moveCbKey]) {
+      el[moveCbKey]();
+    }
+    if (el[enterCbKey]) {
+      el[enterCbKey]();
+    }
+  }
+  function recordPosition(c) {
+    newPositionMap.set(c, c.el.getBoundingClientRect());
+  }
+  function applyTranslation(c) {
+    const oldPos = positionMap.get(c);
+    const newPos = newPositionMap.get(c);
+    const dx = oldPos.left - newPos.left;
+    const dy = oldPos.top - newPos.top;
+    if (dx || dy) {
+      const s = c.el.style;
+      s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
+      s.transitionDuration = "0s";
+      return c;
+    }
+  }
+  function hasCSSTransform(el, root, moveClass) {
+    const clone = el.cloneNode();
+    const _vtc = el[vtcKey];
+    if (_vtc) {
+      _vtc.forEach((cls) => {
+        cls.split(/\s+/).forEach((c) => c && clone.classList.remove(c));
+      });
+    }
+    moveClass.split(/\s+/).forEach((c) => c && clone.classList.add(c));
+    clone.style.display = "none";
+    const container = root.nodeType === 1 ? root : root.parentNode;
+    container.appendChild(clone);
+    const { hasTransform } = getTransitionInfo(clone);
+    container.removeChild(clone);
+    return hasTransform;
+  }
+
+  const getModelAssigner = (vnode) => {
+    const fn = vnode.props["onUpdate:modelValue"] || false;
+    return isArray(fn) ? (value) => invokeArrayFns(fn, value) : fn;
+  };
+  function onCompositionStart(e) {
+    e.target.composing = true;
+  }
+  function onCompositionEnd(e) {
+    const target = e.target;
+    if (target.composing) {
+      target.composing = false;
+      target.dispatchEvent(new Event("input"));
+    }
+  }
+  const assignKey = Symbol("_assign");
+  const vModelText = {
+    created(el, { modifiers: { lazy, trim, number } }, vnode) {
+      el[assignKey] = getModelAssigner(vnode);
+      const castToNumber = number || vnode.props && vnode.props.type === "number";
+      addEventListener(el, lazy ? "change" : "input", (e) => {
+        if (e.target.composing)
+          return;
+        let domValue = el.value;
+        if (trim) {
+          domValue = domValue.trim();
+        }
+        if (castToNumber) {
+          domValue = looseToNumber(domValue);
+        }
+        el[assignKey](domValue);
+      });
+      if (trim) {
+        addEventListener(el, "change", () => {
+          el.value = el.value.trim();
+        });
+      }
+      if (!lazy) {
+        addEventListener(el, "compositionstart", onCompositionStart);
+        addEventListener(el, "compositionend", onCompositionEnd);
+        addEventListener(el, "change", onCompositionEnd);
+      }
+    },
+    // set value on mounted so it's after min/max for type="range"
+    mounted(el, { value }) {
+      el.value = value == null ? "" : value;
+    },
+    beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) {
+      el[assignKey] = getModelAssigner(vnode);
+      if (el.composing)
+        return;
+      const elValue = number || el.type === "number" ? looseToNumber(el.value) : el.value;
+      const newValue = value == null ? "" : value;
+      if (elValue === newValue) {
+        return;
+      }
+      if (document.activeElement === el && el.type !== "range") {
+        if (lazy) {
+          return;
+        }
+        if (trim && el.value.trim() === newValue) {
+          return;
+        }
+      }
+      el.value = newValue;
+    }
+  };
+  const vModelCheckbox = {
+    // #4096 array checkboxes need to be deep traversed
+    deep: true,
+    created(el, _, vnode) {
+      el[assignKey] = getModelAssigner(vnode);
+      addEventListener(el, "change", () => {
+        const modelValue = el._modelValue;
+        const elementValue = getValue(el);
+        const checked = el.checked;
+        const assign = el[assignKey];
+        if (isArray(modelValue)) {
+          const index = looseIndexOf(modelValue, elementValue);
+          const found = index !== -1;
+          if (checked && !found) {
+            assign(modelValue.concat(elementValue));
+          } else if (!checked && found) {
+            const filtered = [...modelValue];
+            filtered.splice(index, 1);
+            assign(filtered);
+          }
+        } else if (isSet(modelValue)) {
+          const cloned = new Set(modelValue);
+          if (checked) {
+            cloned.add(elementValue);
+          } else {
+            cloned.delete(elementValue);
+          }
+          assign(cloned);
+        } else {
+          assign(getCheckboxValue(el, checked));
+        }
+      });
+    },
+    // set initial checked on mount to wait for true-value/false-value
+    mounted: setChecked,
+    beforeUpdate(el, binding, vnode) {
+      el[assignKey] = getModelAssigner(vnode);
+      setChecked(el, binding, vnode);
+    }
+  };
+  function setChecked(el, { value, oldValue }, vnode) {
+    el._modelValue = value;
+    if (isArray(value)) {
+      el.checked = looseIndexOf(value, vnode.props.value) > -1;
+    } else if (isSet(value)) {
+      el.checked = value.has(vnode.props.value);
+    } else if (value !== oldValue) {
+      el.checked = looseEqual(value, getCheckboxValue(el, true));
+    }
+  }
+  const vModelRadio = {
+    created(el, { value }, vnode) {
+      el.checked = looseEqual(value, vnode.props.value);
+      el[assignKey] = getModelAssigner(vnode);
+      addEventListener(el, "change", () => {
+        el[assignKey](getValue(el));
+      });
+    },
+    beforeUpdate(el, { value, oldValue }, vnode) {
+      el[assignKey] = getModelAssigner(vnode);
+      if (value !== oldValue) {
+        el.checked = looseEqual(value, vnode.props.value);
+      }
+    }
+  };
+  const vModelSelect = {
+    // <select multiple> value need to be deep traversed
+    deep: true,
+    created(el, { value, modifiers: { number } }, vnode) {
+      const isSetModel = isSet(value);
+      addEventListener(el, "change", () => {
+        const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map(
+          (o) => number ? looseToNumber(getValue(o)) : getValue(o)
+        );
+        el[assignKey](
+          el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0]
+        );
+        el._assigning = true;
+        nextTick(() => {
+          el._assigning = false;
+        });
+      });
+      el[assignKey] = getModelAssigner(vnode);
+    },
+    // set value in mounted & updated because <select> relies on its children
+    // <option>s.
+    mounted(el, { value, oldValue, modifiers: { number } }) {
+      setSelected(el, value, oldValue, number);
+    },
+    beforeUpdate(el, _binding, vnode) {
+      el[assignKey] = getModelAssigner(vnode);
+    },
+    updated(el, { value, oldValue, modifiers: { number } }) {
+      if (!el._assigning) {
+        setSelected(el, value, oldValue, number);
+      }
+    }
+  };
+  function setSelected(el, value, oldValue, number) {
+    const isMultiple = el.multiple;
+    const isArrayValue = isArray(value);
+    if (isMultiple && !isArrayValue && !isSet(value)) {
+      warn(
+        `<select multiple v-model> expects an Array or Set value for its binding, but got ${Object.prototype.toString.call(value).slice(8, -1)}.`
+      );
+      return;
+    }
+    for (let i = 0, l = el.options.length; i < l; i++) {
+      const option = el.options[i];
+      const optionValue = getValue(option);
+      if (isMultiple) {
+        if (isArrayValue) {
+          const optionType = typeof optionValue;
+          if (optionType === "string" || optionType === "number") {
+            option.selected = value.includes(
+              number ? looseToNumber(optionValue) : optionValue
+            );
+          } else {
+            option.selected = looseIndexOf(value, optionValue) > -1;
+          }
+        } else {
+          option.selected = value.has(optionValue);
+        }
+      } else {
+        if (looseEqual(getValue(option), value)) {
+          if (el.selectedIndex !== i)
+            el.selectedIndex = i;
+          return;
+        }
+      }
+    }
+    if (!isMultiple && el.selectedIndex !== -1) {
+      el.selectedIndex = -1;
+    }
+  }
+  function getValue(el) {
+    return "_value" in el ? el._value : el.value;
+  }
+  function getCheckboxValue(el, checked) {
+    const key = checked ? "_trueValue" : "_falseValue";
+    return key in el ? el[key] : checked;
+  }
+  const vModelDynamic = {
+    created(el, binding, vnode) {
+      callModelHook(el, binding, vnode, null, "created");
+    },
+    mounted(el, binding, vnode) {
+      callModelHook(el, binding, vnode, null, "mounted");
+    },
+    beforeUpdate(el, binding, vnode, prevVNode) {
+      callModelHook(el, binding, vnode, prevVNode, "beforeUpdate");
+    },
+    updated(el, binding, vnode, prevVNode) {
+      callModelHook(el, binding, vnode, prevVNode, "updated");
+    }
+  };
+  function resolveDynamicModel(tagName, type) {
+    switch (tagName) {
+      case "SELECT":
+        return vModelSelect;
+      case "TEXTAREA":
+        return vModelText;
+      default:
+        switch (type) {
+          case "checkbox":
+            return vModelCheckbox;
+          case "radio":
+            return vModelRadio;
+          default:
+            return vModelText;
+        }
+    }
+  }
+  function callModelHook(el, binding, vnode, prevVNode, hook) {
+    const modelToUse = resolveDynamicModel(
+      el.tagName,
+      vnode.props && vnode.props.type
+    );
+    const fn = modelToUse[hook];
+    fn && fn(el, binding, vnode, prevVNode);
+  }
+
+  const systemModifiers = ["ctrl", "shift", "alt", "meta"];
+  const modifierGuards = {
+    stop: (e) => e.stopPropagation(),
+    prevent: (e) => e.preventDefault(),
+    self: (e) => e.target !== e.currentTarget,
+    ctrl: (e) => !e.ctrlKey,
+    shift: (e) => !e.shiftKey,
+    alt: (e) => !e.altKey,
+    meta: (e) => !e.metaKey,
+    left: (e) => "button" in e && e.button !== 0,
+    middle: (e) => "button" in e && e.button !== 1,
+    right: (e) => "button" in e && e.button !== 2,
+    exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m))
+  };
+  const withModifiers = (fn, modifiers) => {
+    const cache = fn._withMods || (fn._withMods = {});
+    const cacheKey = modifiers.join(".");
+    return cache[cacheKey] || (cache[cacheKey] = (event, ...args) => {
+      for (let i = 0; i < modifiers.length; i++) {
+        const guard = modifierGuards[modifiers[i]];
+        if (guard && guard(event, modifiers))
+          return;
+      }
+      return fn(event, ...args);
+    });
+  };
+  const keyNames = {
+    esc: "escape",
+    space: " ",
+    up: "arrow-up",
+    left: "arrow-left",
+    right: "arrow-right",
+    down: "arrow-down",
+    delete: "backspace"
+  };
+  const withKeys = (fn, modifiers) => {
+    const cache = fn._withKeys || (fn._withKeys = {});
+    const cacheKey = modifiers.join(".");
+    return cache[cacheKey] || (cache[cacheKey] = (event) => {
+      if (!("key" in event)) {
+        return;
+      }
+      const eventKey = hyphenate(event.key);
+      if (modifiers.some((k) => k === eventKey || keyNames[k] === eventKey)) {
+        return fn(event);
+      }
+    });
+  };
+
+  const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
+  let renderer;
+  let enabledHydration = false;
+  function ensureRenderer() {
+    return renderer || (renderer = createRenderer(rendererOptions));
+  }
+  function ensureHydrationRenderer() {
+    renderer = enabledHydration ? renderer : createHydrationRenderer(rendererOptions);
+    enabledHydration = true;
+    return renderer;
+  }
+  const render = (...args) => {
+    ensureRenderer().render(...args);
+  };
+  const hydrate = (...args) => {
+    ensureHydrationRenderer().hydrate(...args);
+  };
+  const createApp = (...args) => {
+    const app = ensureRenderer().createApp(...args);
+    {
+      injectNativeTagCheck(app);
+      injectCompilerOptionsCheck(app);
+    }
+    const { mount } = app;
+    app.mount = (containerOrSelector) => {
+      const container = normalizeContainer(containerOrSelector);
+      if (!container)
+        return;
+      const component = app._component;
+      if (!isFunction(component) && !component.render && !component.template) {
+        component.template = container.innerHTML;
+      }
+      container.innerHTML = "";
+      const proxy = mount(container, false, resolveRootNamespace(container));
+      if (container instanceof Element) {
+        container.removeAttribute("v-cloak");
+        container.setAttribute("data-v-app", "");
+      }
+      return proxy;
+    };
+    return app;
+  };
+  const createSSRApp = (...args) => {
+    const app = ensureHydrationRenderer().createApp(...args);
+    {
+      injectNativeTagCheck(app);
+      injectCompilerOptionsCheck(app);
+    }
+    const { mount } = app;
+    app.mount = (containerOrSelector) => {
+      const container = normalizeContainer(containerOrSelector);
+      if (container) {
+        return mount(container, true, resolveRootNamespace(container));
+      }
+    };
+    return app;
+  };
+  function resolveRootNamespace(container) {
+    if (container instanceof SVGElement) {
+      return "svg";
+    }
+    if (typeof MathMLElement === "function" && container instanceof MathMLElement) {
+      return "mathml";
+    }
+  }
+  function injectNativeTagCheck(app) {
+    Object.defineProperty(app.config, "isNativeTag", {
+      value: (tag) => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
+      writable: false
+    });
+  }
+  function injectCompilerOptionsCheck(app) {
+    if (isRuntimeOnly()) {
+      const isCustomElement = app.config.isCustomElement;
+      Object.defineProperty(app.config, "isCustomElement", {
+        get() {
+          return isCustomElement;
+        },
+        set() {
+          warn(
+            `The \`isCustomElement\` config option is deprecated. Use \`compilerOptions.isCustomElement\` instead.`
+          );
+        }
+      });
+      const compilerOptions = app.config.compilerOptions;
+      const msg = `The \`compilerOptions\` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, \`compilerOptions\` must be passed to \`@vue/compiler-dom\` in the build setup instead.
+- For vue-loader: pass it via vue-loader's \`compilerOptions\` loader option.
+- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
+- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-sfc`;
+      Object.defineProperty(app.config, "compilerOptions", {
+        get() {
+          warn(msg);
+          return compilerOptions;
+        },
+        set() {
+          warn(msg);
+        }
+      });
+    }
+  }
+  function normalizeContainer(container) {
+    if (isString(container)) {
+      const res = document.querySelector(container);
+      if (!res) {
+        warn(
+          `Failed to mount app: mount target selector "${container}" returned null.`
+        );
+      }
+      return res;
+    }
+    if (window.ShadowRoot && container instanceof window.ShadowRoot && container.mode === "closed") {
+      warn(
+        `mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`
+      );
+    }
+    return container;
+  }
+  const initDirectivesForSSR = NOOP;
+
+  function initDev() {
+    {
+      {
+        console.info(
+          `You are running a development build of Vue.
+Make sure to use the production build (*.prod.js) when deploying for production.`
+        );
+      }
+      initCustomFormatter();
+    }
+  }
+
+  const FRAGMENT = Symbol(`Fragment` );
+  const TELEPORT = Symbol(`Teleport` );
+  const SUSPENSE = Symbol(`Suspense` );
+  const KEEP_ALIVE = Symbol(`KeepAlive` );
+  const BASE_TRANSITION = Symbol(`BaseTransition` );
+  const OPEN_BLOCK = Symbol(`openBlock` );
+  const CREATE_BLOCK = Symbol(`createBlock` );
+  const CREATE_ELEMENT_BLOCK = Symbol(`createElementBlock` );
+  const CREATE_VNODE = Symbol(`createVNode` );
+  const CREATE_ELEMENT_VNODE = Symbol(`createElementVNode` );
+  const CREATE_COMMENT = Symbol(`createCommentVNode` );
+  const CREATE_TEXT = Symbol(`createTextVNode` );
+  const CREATE_STATIC = Symbol(`createStaticVNode` );
+  const RESOLVE_COMPONENT = Symbol(`resolveComponent` );
+  const RESOLVE_DYNAMIC_COMPONENT = Symbol(
+    `resolveDynamicComponent` 
+  );
+  const RESOLVE_DIRECTIVE = Symbol(`resolveDirective` );
+  const RESOLVE_FILTER = Symbol(`resolveFilter` );
+  const WITH_DIRECTIVES = Symbol(`withDirectives` );
+  const RENDER_LIST = Symbol(`renderList` );
+  const RENDER_SLOT = Symbol(`renderSlot` );
+  const CREATE_SLOTS = Symbol(`createSlots` );
+  const TO_DISPLAY_STRING = Symbol(`toDisplayString` );
+  const MERGE_PROPS = Symbol(`mergeProps` );
+  const NORMALIZE_CLASS = Symbol(`normalizeClass` );
+  const NORMALIZE_STYLE = Symbol(`normalizeStyle` );
+  const NORMALIZE_PROPS = Symbol(`normalizeProps` );
+  const GUARD_REACTIVE_PROPS = Symbol(`guardReactiveProps` );
+  const TO_HANDLERS = Symbol(`toHandlers` );
+  const CAMELIZE = Symbol(`camelize` );
+  const CAPITALIZE = Symbol(`capitalize` );
+  const TO_HANDLER_KEY = Symbol(`toHandlerKey` );
+  const SET_BLOCK_TRACKING = Symbol(`setBlockTracking` );
+  const PUSH_SCOPE_ID = Symbol(`pushScopeId` );
+  const POP_SCOPE_ID = Symbol(`popScopeId` );
+  const WITH_CTX = Symbol(`withCtx` );
+  const UNREF = Symbol(`unref` );
+  const IS_REF = Symbol(`isRef` );
+  const WITH_MEMO = Symbol(`withMemo` );
+  const IS_MEMO_SAME = Symbol(`isMemoSame` );
+  const helperNameMap = {
+    [FRAGMENT]: `Fragment`,
+    [TELEPORT]: `Teleport`,
+    [SUSPENSE]: `Suspense`,
+    [KEEP_ALIVE]: `KeepAlive`,
+    [BASE_TRANSITION]: `BaseTransition`,
+    [OPEN_BLOCK]: `openBlock`,
+    [CREATE_BLOCK]: `createBlock`,
+    [CREATE_ELEMENT_BLOCK]: `createElementBlock`,
+    [CREATE_VNODE]: `createVNode`,
+    [CREATE_ELEMENT_VNODE]: `createElementVNode`,
+    [CREATE_COMMENT]: `createCommentVNode`,
+    [CREATE_TEXT]: `createTextVNode`,
+    [CREATE_STATIC]: `createStaticVNode`,
+    [RESOLVE_COMPONENT]: `resolveComponent`,
+    [RESOLVE_DYNAMIC_COMPONENT]: `resolveDynamicComponent`,
+    [RESOLVE_DIRECTIVE]: `resolveDirective`,
+    [RESOLVE_FILTER]: `resolveFilter`,
+    [WITH_DIRECTIVES]: `withDirectives`,
+    [RENDER_LIST]: `renderList`,
+    [RENDER_SLOT]: `renderSlot`,
+    [CREATE_SLOTS]: `createSlots`,
+    [TO_DISPLAY_STRING]: `toDisplayString`,
+    [MERGE_PROPS]: `mergeProps`,
+    [NORMALIZE_CLASS]: `normalizeClass`,
+    [NORMALIZE_STYLE]: `normalizeStyle`,
+    [NORMALIZE_PROPS]: `normalizeProps`,
+    [GUARD_REACTIVE_PROPS]: `guardReactiveProps`,
+    [TO_HANDLERS]: `toHandlers`,
+    [CAMELIZE]: `camelize`,
+    [CAPITALIZE]: `capitalize`,
+    [TO_HANDLER_KEY]: `toHandlerKey`,
+    [SET_BLOCK_TRACKING]: `setBlockTracking`,
+    [PUSH_SCOPE_ID]: `pushScopeId`,
+    [POP_SCOPE_ID]: `popScopeId`,
+    [WITH_CTX]: `withCtx`,
+    [UNREF]: `unref`,
+    [IS_REF]: `isRef`,
+    [WITH_MEMO]: `withMemo`,
+    [IS_MEMO_SAME]: `isMemoSame`
+  };
+  function registerRuntimeHelpers(helpers) {
+    Object.getOwnPropertySymbols(helpers).forEach((s) => {
+      helperNameMap[s] = helpers[s];
+    });
+  }
+
+  const locStub = {
+    start: { line: 1, column: 1, offset: 0 },
+    end: { line: 1, column: 1, offset: 0 },
+    source: ""
+  };
+  function createRoot(children, source = "") {
+    return {
+      type: 0,
+      source,
+      children,
+      helpers: /* @__PURE__ */ new Set(),
+      components: [],
+      directives: [],
+      hoists: [],
+      imports: [],
+      cached: 0,
+      temps: 0,
+      codegenNode: void 0,
+      loc: locStub
+    };
+  }
+  function createVNodeCall(context, tag, props, children, patchFlag, dynamicProps, directives, isBlock = false, disableTracking = false, isComponent = false, loc = locStub) {
+    if (context) {
+      if (isBlock) {
+        context.helper(OPEN_BLOCK);
+        context.helper(getVNodeBlockHelper(context.inSSR, isComponent));
+      } else {
+        context.helper(getVNodeHelper(context.inSSR, isComponent));
+      }
+      if (directives) {
+        context.helper(WITH_DIRECTIVES);
+      }
+    }
+    return {
+      type: 13,
+      tag,
+      props,
+      children,
+      patchFlag,
+      dynamicProps,
+      directives,
+      isBlock,
+      disableTracking,
+      isComponent,
+      loc
+    };
+  }
+  function createArrayExpression(elements, loc = locStub) {
+    return {
+      type: 17,
+      loc,
+      elements
+    };
+  }
+  function createObjectExpression(properties, loc = locStub) {
+    return {
+      type: 15,
+      loc,
+      properties
+    };
+  }
+  function createObjectProperty(key, value) {
+    return {
+      type: 16,
+      loc: locStub,
+      key: isString(key) ? createSimpleExpression(key, true) : key,
+      value
+    };
+  }
+  function createSimpleExpression(content, isStatic = false, loc = locStub, constType = 0) {
+    return {
+      type: 4,
+      loc,
+      content,
+      isStatic,
+      constType: isStatic ? 3 : constType
+    };
+  }
+  function createCompoundExpression(children, loc = locStub) {
+    return {
+      type: 8,
+      loc,
+      children
+    };
+  }
+  function createCallExpression(callee, args = [], loc = locStub) {
+    return {
+      type: 14,
+      loc,
+      callee,
+      arguments: args
+    };
+  }
+  function createFunctionExpression(params, returns = void 0, newline = false, isSlot = false, loc = locStub) {
+    return {
+      type: 18,
+      params,
+      returns,
+      newline,
+      isSlot,
+      loc
+    };
+  }
+  function createConditionalExpression(test, consequent, alternate, newline = true) {
+    return {
+      type: 19,
+      test,
+      consequent,
+      alternate,
+      newline,
+      loc: locStub
+    };
+  }
+  function createCacheExpression(index, value, isVNode = false) {
+    return {
+      type: 20,
+      index,
+      value,
+      isVNode,
+      loc: locStub
+    };
+  }
+  function createBlockStatement(body) {
+    return {
+      type: 21,
+      body,
+      loc: locStub
+    };
+  }
+  function getVNodeHelper(ssr, isComponent) {
+    return ssr || isComponent ? CREATE_VNODE : CREATE_ELEMENT_VNODE;
+  }
+  function getVNodeBlockHelper(ssr, isComponent) {
+    return ssr || isComponent ? CREATE_BLOCK : CREATE_ELEMENT_BLOCK;
+  }
+  function convertToBlock(node, { helper, removeHelper, inSSR }) {
+    if (!node.isBlock) {
+      node.isBlock = true;
+      removeHelper(getVNodeHelper(inSSR, node.isComponent));
+      helper(OPEN_BLOCK);
+      helper(getVNodeBlockHelper(inSSR, node.isComponent));
+    }
+  }
+
+  const defaultDelimitersOpen = new Uint8Array([123, 123]);
+  const defaultDelimitersClose = new Uint8Array([125, 125]);
+  function isTagStartChar(c) {
+    return c >= 97 && c <= 122 || c >= 65 && c <= 90;
+  }
+  function isWhitespace(c) {
+    return c === 32 || c === 10 || c === 9 || c === 12 || c === 13;
+  }
+  function isEndOfTagSection(c) {
+    return c === 47 || c === 62 || isWhitespace(c);
+  }
+  function toCharCodes(str) {
+    const ret = new Uint8Array(str.length);
+    for (let i = 0; i < str.length; i++) {
+      ret[i] = str.charCodeAt(i);
+    }
+    return ret;
+  }
+  const Sequences = {
+    Cdata: new Uint8Array([67, 68, 65, 84, 65, 91]),
+    // CDATA[
+    CdataEnd: new Uint8Array([93, 93, 62]),
+    // ]]>
+    CommentEnd: new Uint8Array([45, 45, 62]),
+    // `-->`
+    ScriptEnd: new Uint8Array([60, 47, 115, 99, 114, 105, 112, 116]),
+    // `<\/script`
+    StyleEnd: new Uint8Array([60, 47, 115, 116, 121, 108, 101]),
+    // `</style`
+    TitleEnd: new Uint8Array([60, 47, 116, 105, 116, 108, 101]),
+    // `</title`
+    TextareaEnd: new Uint8Array([
+      60,
+      47,
+      116,
+      101,
+      120,
+      116,
+      97,
+      114,
+      101,
+      97
+    ])
+    // `</textarea
+  };
+  class Tokenizer {
+    constructor(stack, cbs) {
+      this.stack = stack;
+      this.cbs = cbs;
+      /** The current state the tokenizer is in. */
+      this.state = 1;
+      /** The read buffer. */
+      this.buffer = "";
+      /** The beginning of the section that is currently being read. */
+      this.sectionStart = 0;
+      /** The index within the buffer that we are currently looking at. */
+      this.index = 0;
+      /** The start of the last entity. */
+      this.entityStart = 0;
+      /** Some behavior, eg. when decoding entities, is done while we are in another state. This keeps track of the other state type. */
+      this.baseState = 1;
+      /** For special parsing behavior inside of script and style tags. */
+      this.inRCDATA = false;
+      /** For disabling RCDATA tags handling */
+      this.inXML = false;
+      /** For disabling interpolation parsing in v-pre */
+      this.inVPre = false;
+      /** Record newline positions for fast line / column calculation */
+      this.newlines = [];
+      this.mode = 0;
+      this.delimiterOpen = defaultDelimitersOpen;
+      this.delimiterClose = defaultDelimitersClose;
+      this.delimiterIndex = -1;
+      this.currentSequence = void 0;
+      this.sequenceIndex = 0;
+    }
+    get inSFCRoot() {
+      return this.mode === 2 && this.stack.length === 0;
+    }
+    reset() {
+      this.state = 1;
+      this.mode = 0;
+      this.buffer = "";
+      this.sectionStart = 0;
+      this.index = 0;
+      this.baseState = 1;
+      this.inRCDATA = false;
+      this.currentSequence = void 0;
+      this.newlines.length = 0;
+      this.delimiterOpen = defaultDelimitersOpen;
+      this.delimiterClose = defaultDelimitersClose;
+    }
+    /**
+     * Generate Position object with line / column information using recorded
+     * newline positions. We know the index is always going to be an already
+     * processed index, so all the newlines up to this index should have been
+     * recorded.
+     */
+    getPos(index) {
+      let line = 1;
+      let column = index + 1;
+      for (let i = this.newlines.length - 1; i >= 0; i--) {
+        const newlineIndex = this.newlines[i];
+        if (index > newlineIndex) {
+          line = i + 2;
+          column = index - newlineIndex;
+          break;
+        }
+      }
+      return {
+        column,
+        line,
+        offset: index
+      };
+    }
+    peek() {
+      return this.buffer.charCodeAt(this.index + 1);
+    }
+    stateText(c) {
+      if (c === 60) {
+        if (this.index > this.sectionStart) {
+          this.cbs.ontext(this.sectionStart, this.index);
+        }
+        this.state = 5;
+        this.sectionStart = this.index;
+      } else if (!this.inVPre && c === this.delimiterOpen[0]) {
+        this.state = 2;
+        this.delimiterIndex = 0;
+        this.stateInterpolationOpen(c);
+      }
+    }
+    stateInterpolationOpen(c) {
+      if (c === this.delimiterOpen[this.delimiterIndex]) {
+        if (this.delimiterIndex === this.delimiterOpen.length - 1) {
+          const start = this.index + 1 - this.delimiterOpen.length;
+          if (start > this.sectionStart) {
+            this.cbs.ontext(this.sectionStart, start);
+          }
+          this.state = 3;
+          this.sectionStart = start;
+        } else {
+          this.delimiterIndex++;
+        }
+      } else if (this.inRCDATA) {
+        this.state = 32;
+        this.stateInRCDATA(c);
+      } else {
+        this.state = 1;
+        this.stateText(c);
+      }
+    }
+    stateInterpolation(c) {
+      if (c === this.delimiterClose[0]) {
+        this.state = 4;
+        this.delimiterIndex = 0;
+        this.stateInterpolationClose(c);
+      }
+    }
+    stateInterpolationClose(c) {
+      if (c === this.delimiterClose[this.delimiterIndex]) {
+        if (this.delimiterIndex === this.delimiterClose.length - 1) {
+          this.cbs.oninterpolation(this.sectionStart, this.index + 1);
+          if (this.inRCDATA) {
+            this.state = 32;
+          } else {
+            this.state = 1;
+          }
+          this.sectionStart = this.index + 1;
+        } else {
+          this.delimiterIndex++;
+        }
+      } else {
+        this.state = 3;
+        this.stateInterpolation(c);
+      }
+    }
+    stateSpecialStartSequence(c) {
+      const isEnd = this.sequenceIndex === this.currentSequence.length;
+      const isMatch = isEnd ? (
+        // If we are at the end of the sequence, make sure the tag name has ended
+        isEndOfTagSection(c)
+      ) : (
+        // Otherwise, do a case-insensitive comparison
+        (c | 32) === this.currentSequence[this.sequenceIndex]
+      );
+      if (!isMatch) {
+        this.inRCDATA = false;
+      } else if (!isEnd) {
+        this.sequenceIndex++;
+        return;
+      }
+      this.sequenceIndex = 0;
+      this.state = 6;
+      this.stateInTagName(c);
+    }
+    /** Look for an end tag. For <title> and <textarea>, also decode entities. */
+    stateInRCDATA(c) {
+      if (this.sequenceIndex === this.currentSequence.length) {
+        if (c === 62 || isWhitespace(c)) {
+          const endOfText = this.index - this.currentSequence.length;
+          if (this.sectionStart < endOfText) {
+            const actualIndex = this.index;
+            this.index = endOfText;
+            this.cbs.ontext(this.sectionStart, endOfText);
+            this.index = actualIndex;
+          }
+          this.sectionStart = endOfText + 2;
+          this.stateInClosingTagName(c);
+          this.inRCDATA = false;
+          return;
+        }
+        this.sequenceIndex = 0;
+      }
+      if ((c | 32) === this.currentSequence[this.sequenceIndex]) {
+        this.sequenceIndex += 1;
+      } else if (this.sequenceIndex === 0) {
+        if (this.currentSequence === Sequences.TitleEnd || this.currentSequence === Sequences.TextareaEnd && !this.inSFCRoot) {
+          if (c === this.delimiterOpen[0]) {
+            this.state = 2;
+            this.delimiterIndex = 0;
+            this.stateInterpolationOpen(c);
+          }
+        } else if (this.fastForwardTo(60)) {
+          this.sequenceIndex = 1;
+        }
+      } else {
+        this.sequenceIndex = Number(c === 60);
+      }
+    }
+    stateCDATASequence(c) {
+      if (c === Sequences.Cdata[this.sequenceIndex]) {
+        if (++this.sequenceIndex === Sequences.Cdata.length) {
+          this.state = 28;
+          this.currentSequence = Sequences.CdataEnd;
+          this.sequenceIndex = 0;
+          this.sectionStart = this.index + 1;
+        }
+      } else {
+        this.sequenceIndex = 0;
+        this.state = 23;
+        this.stateInDeclaration(c);
+      }
+    }
+    /**
+     * When we wait for one specific character, we can speed things up
+     * by skipping through the buffer until we find it.
+     *
+     * @returns Whether the character was found.
+     */
+    fastForwardTo(c) {
+      while (++this.index < this.buffer.length) {
+        const cc = this.buffer.charCodeAt(this.index);
+        if (cc === 10) {
+          this.newlines.push(this.index);
+        }
+        if (cc === c) {
+          return true;
+        }
+      }
+      this.index = this.buffer.length - 1;
+      return false;
+    }
+    /**
+     * Comments and CDATA end with `-->` and `]]>`.
+     *
+     * Their common qualities are:
+     * - Their end sequences have a distinct character they start with.
+     * - That character is then repeated, so we have to check multiple repeats.
+     * - All characters but the start character of the sequence can be skipped.
+     */
+    stateInCommentLike(c) {
+      if (c === this.currentSequence[this.sequenceIndex]) {
+        if (++this.sequenceIndex === this.currentSequence.length) {
+          if (this.currentSequence === Sequences.CdataEnd) {
+            this.cbs.oncdata(this.sectionStart, this.index - 2);
+          } else {
+            this.cbs.oncomment(this.sectionStart, this.index - 2);
+          }
+          this.sequenceIndex = 0;
+          this.sectionStart = this.index + 1;
+          this.state = 1;
+        }
+      } else if (this.sequenceIndex === 0) {
+        if (this.fastForwardTo(this.currentSequence[0])) {
+          this.sequenceIndex = 1;
+        }
+      } else if (c !== this.currentSequence[this.sequenceIndex - 1]) {
+        this.sequenceIndex = 0;
+      }
+    }
+    startSpecial(sequence, offset) {
+      this.enterRCDATA(sequence, offset);
+      this.state = 31;
+    }
+    enterRCDATA(sequence, offset) {
+      this.inRCDATA = true;
+      this.currentSequence = sequence;
+      this.sequenceIndex = offset;
+    }
+    stateBeforeTagName(c) {
+      if (c === 33) {
+        this.state = 22;
+        this.sectionStart = this.index + 1;
+      } else if (c === 63) {
+        this.state = 24;
+        this.sectionStart = this.index + 1;
+      } else if (isTagStartChar(c)) {
+        this.sectionStart = this.index;
+        if (this.mode === 0) {
+          this.state = 6;
+        } else if (this.inSFCRoot) {
+          this.state = 34;
+        } else if (!this.inXML) {
+          const lower = c | 32;
+          if (lower === 116) {
+            this.state = 30;
+          } else {
+            this.state = lower === 115 ? 29 : 6;
+          }
+        } else {
+          this.state = 6;
+        }
+      } else if (c === 47) {
+        this.state = 8;
+      } else {
+        this.state = 1;
+        this.stateText(c);
+      }
+    }
+    stateInTagName(c) {
+      if (isEndOfTagSection(c)) {
+        this.handleTagName(c);
+      }
+    }
+    stateInSFCRootTagName(c) {
+      if (isEndOfTagSection(c)) {
+        const tag = this.buffer.slice(this.sectionStart, this.index);
+        if (tag !== "template") {
+          this.enterRCDATA(toCharCodes(`</` + tag), 0);
+        }
+        this.handleTagName(c);
+      }
+    }
+    handleTagName(c) {
+      this.cbs.onopentagname(this.sectionStart, this.index);
+      this.sectionStart = -1;
+      this.state = 11;
+      this.stateBeforeAttrName(c);
+    }
+    stateBeforeClosingTagName(c) {
+      if (isWhitespace(c)) ; else if (c === 62) {
+        {
+          this.cbs.onerr(14, this.index);
+        }
+        this.state = 1;
+        this.sectionStart = this.index + 1;
+      } else {
+        this.state = isTagStartChar(c) ? 9 : 27;
+        this.sectionStart = this.index;
+      }
+    }
+    stateInClosingTagName(c) {
+      if (c === 62 || isWhitespace(c)) {
+        this.cbs.onclosetag(this.sectionStart, this.index);
+        this.sectionStart = -1;
+        this.state = 10;
+        this.stateAfterClosingTagName(c);
+      }
+    }
+    stateAfterClosingTagName(c) {
+      if (c === 62) {
+        this.state = 1;
+        this.sectionStart = this.index + 1;
+      }
+    }
+    stateBeforeAttrName(c) {
+      if (c === 62) {
+        this.cbs.onopentagend(this.index);
+        if (this.inRCDATA) {
+          this.state = 32;
+        } else {
+          this.state = 1;
+        }
+        this.sectionStart = this.index + 1;
+      } else if (c === 47) {
+        this.state = 7;
+        if (this.peek() !== 62) {
+          this.cbs.onerr(22, this.index);
+        }
+      } else if (c === 60 && this.peek() === 47) {
+        this.cbs.onopentagend(this.index);
+        this.state = 5;
+        this.sectionStart = this.index;
+      } else if (!isWhitespace(c)) {
+        if (c === 61) {
+          this.cbs.onerr(
+            19,
+            this.index
+          );
+        }
+        this.handleAttrStart(c);
+      }
+    }
+    handleAttrStart(c) {
+      if (c === 118 && this.peek() === 45) {
+        this.state = 13;
+        this.sectionStart = this.index;
+      } else if (c === 46 || c === 58 || c === 64 || c === 35) {
+        this.cbs.ondirname(this.index, this.index + 1);
+        this.state = 14;
+        this.sectionStart = this.index + 1;
+      } else {
+        this.state = 12;
+        this.sectionStart = this.index;
+      }
+    }
+    stateInSelfClosingTag(c) {
+      if (c === 62) {
+        this.cbs.onselfclosingtag(this.index);
+        this.state = 1;
+        this.sectionStart = this.index + 1;
+        this.inRCDATA = false;
+      } else if (!isWhitespace(c)) {
+        this.state = 11;
+        this.stateBeforeAttrName(c);
+      }
+    }
+    stateInAttrName(c) {
+      if (c === 61 || isEndOfTagSection(c)) {
+        this.cbs.onattribname(this.sectionStart, this.index);
+        this.handleAttrNameEnd(c);
+      } else if (c === 34 || c === 39 || c === 60) {
+        this.cbs.onerr(
+          17,
+          this.index
+        );
+      }
+    }
+    stateInDirName(c) {
+      if (c === 61 || isEndOfTagSection(c)) {
+        this.cbs.ondirname(this.sectionStart, this.index);
+        this.handleAttrNameEnd(c);
+      } else if (c === 58) {
+        this.cbs.ondirname(this.sectionStart, this.index);
+        this.state = 14;
+        this.sectionStart = this.index + 1;
+      } else if (c === 46) {
+        this.cbs.ondirname(this.sectionStart, this.index);
+        this.state = 16;
+        this.sectionStart = this.index + 1;
+      }
+    }
+    stateInDirArg(c) {
+      if (c === 61 || isEndOfTagSection(c)) {
+        this.cbs.ondirarg(this.sectionStart, this.index);
+        this.handleAttrNameEnd(c);
+      } else if (c === 91) {
+        this.state = 15;
+      } else if (c === 46) {
+        this.cbs.ondirarg(this.sectionStart, this.index);
+        this.state = 16;
+        this.sectionStart = this.index + 1;
+      }
+    }
+    stateInDynamicDirArg(c) {
+      if (c === 93) {
+        this.state = 14;
+      } else if (c === 61 || isEndOfTagSection(c)) {
+        this.cbs.ondirarg(this.sectionStart, this.index + 1);
+        this.handleAttrNameEnd(c);
+        {
+          this.cbs.onerr(
+            27,
+            this.index
+          );
+        }
+      }
+    }
+    stateInDirModifier(c) {
+      if (c === 61 || isEndOfTagSection(c)) {
+        this.cbs.ondirmodifier(this.sectionStart, this.index);
+        this.handleAttrNameEnd(c);
+      } else if (c === 46) {
+        this.cbs.ondirmodifier(this.sectionStart, this.index);
+        this.sectionStart = this.index + 1;
+      }
+    }
+    handleAttrNameEnd(c) {
+      this.sectionStart = this.index;
+      this.state = 17;
+      this.cbs.onattribnameend(this.index);
+      this.stateAfterAttrName(c);
+    }
+    stateAfterAttrName(c) {
+      if (c === 61) {
+        this.state = 18;
+      } else if (c === 47 || c === 62) {
+        this.cbs.onattribend(0, this.sectionStart);
+        this.sectionStart = -1;
+        this.state = 11;
+        this.stateBeforeAttrName(c);
+      } else if (!isWhitespace(c)) {
+        this.cbs.onattribend(0, this.sectionStart);
+        this.handleAttrStart(c);
+      }
+    }
+    stateBeforeAttrValue(c) {
+      if (c === 34) {
+        this.state = 19;
+        this.sectionStart = this.index + 1;
+      } else if (c === 39) {
+        this.state = 20;
+        this.sectionStart = this.index + 1;
+      } else if (!isWhitespace(c)) {
+        this.sectionStart = this.index;
+        this.state = 21;
+        this.stateInAttrValueNoQuotes(c);
+      }
+    }
+    handleInAttrValue(c, quote) {
+      if (c === quote || this.fastForwardTo(quote)) {
+        this.cbs.onattribdata(this.sectionStart, this.index);
+        this.sectionStart = -1;
+        this.cbs.onattribend(
+          quote === 34 ? 3 : 2,
+          this.index + 1
+        );
+        this.state = 11;
+      }
+    }
+    stateInAttrValueDoubleQuotes(c) {
+      this.handleInAttrValue(c, 34);
+    }
+    stateInAttrValueSingleQuotes(c) {
+      this.handleInAttrValue(c, 39);
+    }
+    stateInAttrValueNoQuotes(c) {
+      if (isWhitespace(c) || c === 62) {
+        this.cbs.onattribdata(this.sectionStart, this.index);
+        this.sectionStart = -1;
+        this.cbs.onattribend(1, this.index);
+        this.state = 11;
+        this.stateBeforeAttrName(c);
+      } else if (c === 34 || c === 39 || c === 60 || c === 61 || c === 96) {
+        this.cbs.onerr(
+          18,
+          this.index
+        );
+      } else ;
+    }
+    stateBeforeDeclaration(c) {
+      if (c === 91) {
+        this.state = 26;
+        this.sequenceIndex = 0;
+      } else {
+        this.state = c === 45 ? 25 : 23;
+      }
+    }
+    stateInDeclaration(c) {
+      if (c === 62 || this.fastForwardTo(62)) {
+        this.state = 1;
+        this.sectionStart = this.index + 1;
+      }
+    }
+    stateInProcessingInstruction(c) {
+      if (c === 62 || this.fastForwardTo(62)) {
+        this.cbs.onprocessinginstruction(this.sectionStart, this.index);
+        this.state = 1;
+        this.sectionStart = this.index + 1;
+      }
+    }
+    stateBeforeComment(c) {
+      if (c === 45) {
+        this.state = 28;
+        this.currentSequence = Sequences.CommentEnd;
+        this.sequenceIndex = 2;
+        this.sectionStart = this.index + 1;
+      } else {
+        this.state = 23;
+      }
+    }
+    stateInSpecialComment(c) {
+      if (c === 62 || this.fastForwardTo(62)) {
+        this.cbs.oncomment(this.sectionStart, this.index);
+        this.state = 1;
+        this.sectionStart = this.index + 1;
+      }
+    }
+    stateBeforeSpecialS(c) {
+      const lower = c | 32;
+      if (lower === Sequences.ScriptEnd[3]) {
+        this.startSpecial(Sequences.ScriptEnd, 4);
+      } else if (lower === Sequences.StyleEnd[3]) {
+        this.startSpecial(Sequences.StyleEnd, 4);
+      } else {
+        this.state = 6;
+        this.stateInTagName(c);
+      }
+    }
+    stateBeforeSpecialT(c) {
+      const lower = c | 32;
+      if (lower === Sequences.TitleEnd[3]) {
+        this.startSpecial(Sequences.TitleEnd, 4);
+      } else if (lower === Sequences.TextareaEnd[3]) {
+        this.startSpecial(Sequences.TextareaEnd, 4);
+      } else {
+        this.state = 6;
+        this.stateInTagName(c);
+      }
+    }
+    startEntity() {
+    }
+    stateInEntity() {
+    }
+    /**
+     * Iterates through the buffer, calling the function corresponding to the current state.
+     *
+     * States that are more likely to be hit are higher up, as a performance improvement.
+     */
+    parse(input) {
+      this.buffer = input;
+      while (this.index < this.buffer.length) {
+        const c = this.buffer.charCodeAt(this.index);
+        if (c === 10) {
+          this.newlines.push(this.index);
+        }
+        switch (this.state) {
+          case 1: {
+            this.stateText(c);
+            break;
+          }
+          case 2: {
+            this.stateInterpolationOpen(c);
+            break;
+          }
+          case 3: {
+            this.stateInterpolation(c);
+            break;
+          }
+          case 4: {
+            this.stateInterpolationClose(c);
+            break;
+          }
+          case 31: {
+            this.stateSpecialStartSequence(c);
+            break;
+          }
+          case 32: {
+            this.stateInRCDATA(c);
+            break;
+          }
+          case 26: {
+            this.stateCDATASequence(c);
+            break;
+          }
+          case 19: {
+            this.stateInAttrValueDoubleQuotes(c);
+            break;
+          }
+          case 12: {
+            this.stateInAttrName(c);
+            break;
+          }
+          case 13: {
+            this.stateInDirName(c);
+            break;
+          }
+          case 14: {
+            this.stateInDirArg(c);
+            break;
+          }
+          case 15: {
+            this.stateInDynamicDirArg(c);
+            break;
+          }
+          case 16: {
+            this.stateInDirModifier(c);
+            break;
+          }
+          case 28: {
+            this.stateInCommentLike(c);
+            break;
+          }
+          case 27: {
+            this.stateInSpecialComment(c);
+            break;
+          }
+          case 11: {
+            this.stateBeforeAttrName(c);
+            break;
+          }
+          case 6: {
+            this.stateInTagName(c);
+            break;
+          }
+          case 34: {
+            this.stateInSFCRootTagName(c);
+            break;
+          }
+          case 9: {
+            this.stateInClosingTagName(c);
+            break;
+          }
+          case 5: {
+            this.stateBeforeTagName(c);
+            break;
+          }
+          case 17: {
+            this.stateAfterAttrName(c);
+            break;
+          }
+          case 20: {
+            this.stateInAttrValueSingleQuotes(c);
+            break;
+          }
+          case 18: {
+            this.stateBeforeAttrValue(c);
+            break;
+          }
+          case 8: {
+            this.stateBeforeClosingTagName(c);
+            break;
+          }
+          case 10: {
+            this.stateAfterClosingTagName(c);
+            break;
+          }
+          case 29: {
+            this.stateBeforeSpecialS(c);
+            break;
+          }
+          case 30: {
+            this.stateBeforeSpecialT(c);
+            break;
+          }
+          case 21: {
+            this.stateInAttrValueNoQuotes(c);
+            break;
+          }
+          case 7: {
+            this.stateInSelfClosingTag(c);
+            break;
+          }
+          case 23: {
+            this.stateInDeclaration(c);
+            break;
+          }
+          case 22: {
+            this.stateBeforeDeclaration(c);
+            break;
+          }
+          case 25: {
+            this.stateBeforeComment(c);
+            break;
+          }
+          case 24: {
+            this.stateInProcessingInstruction(c);
+            break;
+          }
+          case 33: {
+            this.stateInEntity();
+            break;
+          }
+        }
+        this.index++;
+      }
+      this.cleanup();
+      this.finish();
+    }
+    /**
+     * Remove data that has already been consumed from the buffer.
+     */
+    cleanup() {
+      if (this.sectionStart !== this.index) {
+        if (this.state === 1 || this.state === 32 && this.sequenceIndex === 0) {
+          this.cbs.ontext(this.sectionStart, this.index);
+          this.sectionStart = this.index;
+        } else if (this.state === 19 || this.state === 20 || this.state === 21) {
+          this.cbs.onattribdata(this.sectionStart, this.index);
+          this.sectionStart = this.index;
+        }
+      }
+    }
+    finish() {
+      this.handleTrailingData();
+      this.cbs.onend();
+    }
+    /** Handle any trailing data. */
+    handleTrailingData() {
+      const endIndex = this.buffer.length;
+      if (this.sectionStart >= endIndex) {
+        return;
+      }
+      if (this.state === 28) {
+        if (this.currentSequence === Sequences.CdataEnd) {
+          this.cbs.oncdata(this.sectionStart, endIndex);
+        } else {
+          this.cbs.oncomment(this.sectionStart, endIndex);
+        }
+      } else if (this.state === 6 || this.state === 11 || this.state === 18 || this.state === 17 || this.state === 12 || this.state === 13 || this.state === 14 || this.state === 15 || this.state === 16 || this.state === 20 || this.state === 19 || this.state === 21 || this.state === 9) ; else {
+        this.cbs.ontext(this.sectionStart, endIndex);
+      }
+    }
+    emitCodePoint(cp, consumed) {
+    }
+  }
+
+  function defaultOnError(error) {
+    throw error;
+  }
+  function defaultOnWarn(msg) {
+    console.warn(`[Vue warn] ${msg.message}`);
+  }
+  function createCompilerError(code, loc, messages, additionalMessage) {
+    const msg = (messages || errorMessages)[code] + (additionalMessage || ``) ;
+    const error = new SyntaxError(String(msg));
+    error.code = code;
+    error.loc = loc;
+    return error;
+  }
+  const errorMessages = {
+    // parse errors
+    [0]: "Illegal comment.",
+    [1]: "CDATA section is allowed only in XML context.",
+    [2]: "Duplicate attribute.",
+    [3]: "End tag cannot have attributes.",
+    [4]: "Illegal '/' in tags.",
+    [5]: "Unexpected EOF in tag.",
+    [6]: "Unexpected EOF in CDATA section.",
+    [7]: "Unexpected EOF in comment.",
+    [8]: "Unexpected EOF in script.",
+    [9]: "Unexpected EOF in tag.",
+    [10]: "Incorrectly closed comment.",
+    [11]: "Incorrectly opened comment.",
+    [12]: "Illegal tag name. Use '&lt;' to print '<'.",
+    [13]: "Attribute value was expected.",
+    [14]: "End tag name was expected.",
+    [15]: "Whitespace was expected.",
+    [16]: "Unexpected '<!--' in comment.",
+    [17]: `Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<).`,
+    [18]: "Unquoted attribute value cannot contain U+0022 (\"), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).",
+    [19]: "Attribute name cannot start with '='.",
+    [21]: "'<?' is allowed only in XML context.",
+    [20]: `Unexpected null character.`,
+    [22]: "Illegal '/' in tags.",
+    // Vue-specific parse errors
+    [23]: "Invalid end tag.",
+    [24]: "Element is missing end tag.",
+    [25]: "Interpolation end sign was not found.",
+    [27]: "End bracket for dynamic directive argument was not found. Note that dynamic directive argument cannot contain spaces.",
+    [26]: "Legal directive name was expected.",
+    // transform errors
+    [28]: `v-if/v-else-if is missing expression.`,
+    [29]: `v-if/else branches must use unique keys.`,
+    [30]: `v-else/v-else-if has no adjacent v-if or v-else-if.`,
+    [31]: `v-for is missing expression.`,
+    [32]: `v-for has invalid expression.`,
+    [33]: `<template v-for> key should be placed on the <template> tag.`,
+    [34]: `v-bind is missing expression.`,
+    [52]: `v-bind with same-name shorthand only allows static argument.`,
+    [35]: `v-on is missing expression.`,
+    [36]: `Unexpected custom directive on <slot> outlet.`,
+    [37]: `Mixed v-slot usage on both the component and nested <template>. When there are multiple named slots, all slots should use <template> syntax to avoid scope ambiguity.`,
+    [38]: `Duplicate slot names found. `,
+    [39]: `Extraneous children found when component already has explicitly named default slot. These children will be ignored.`,
+    [40]: `v-slot can only be used on components or <template> tags.`,
+    [41]: `v-model is missing expression.`,
+    [42]: `v-model value must be a valid JavaScript member expression.`,
+    [43]: `v-model cannot be used on v-for or v-slot scope variables because they are not writable.`,
+    [44]: `v-model cannot be used on a prop, because local prop bindings are not writable.
+Use a v-bind binding combined with a v-on listener that emits update:x event instead.`,
+    [45]: `Error parsing JavaScript expression: `,
+    [46]: `<KeepAlive> expects exactly one child component.`,
+    [51]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.`,
+    // generic errors
+    [47]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
+    [48]: `ES module mode is not supported in this build of compiler.`,
+    [49]: `"cacheHandlers" option is only supported when the "prefixIdentifiers" option is enabled.`,
+    [50]: `"scopeId" option is only supported in module mode.`,
+    // just to fulfill types
+    [53]: ``
+  };
+
+  const isStaticExp = (p) => p.type === 4 && p.isStatic;
+  function isCoreComponent(tag) {
+    switch (tag) {
+      case "Teleport":
+      case "teleport":
+        return TELEPORT;
+      case "Suspense":
+      case "suspense":
+        return SUSPENSE;
+      case "KeepAlive":
+      case "keep-alive":
+        return KEEP_ALIVE;
+      case "BaseTransition":
+      case "base-transition":
+        return BASE_TRANSITION;
+    }
+  }
+  const nonIdentifierRE = /^\d|[^\$\w]/;
+  const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name);
+  const validFirstIdentCharRE = /[A-Za-z_$\xA0-\uFFFF]/;
+  const validIdentCharRE = /[\.\?\w$\xA0-\uFFFF]/;
+  const whitespaceRE = /\s+[.[]\s*|\s*[.[]\s+/g;
+  const isMemberExpressionBrowser = (path) => {
+    path = path.trim().replace(whitespaceRE, (s) => s.trim());
+    let state = 0 /* inMemberExp */;
+    let stateStack = [];
+    let currentOpenBracketCount = 0;
+    let currentOpenParensCount = 0;
+    let currentStringType = null;
+    for (let i = 0; i < path.length; i++) {
+      const char = path.charAt(i);
+      switch (state) {
+        case 0 /* inMemberExp */:
+          if (char === "[") {
+            stateStack.push(state);
+            state = 1 /* inBrackets */;
+            currentOpenBracketCount++;
+          } else if (char === "(") {
+            stateStack.push(state);
+            state = 2 /* inParens */;
+            currentOpenParensCount++;
+          } else if (!(i === 0 ? validFirstIdentCharRE : validIdentCharRE).test(char)) {
+            return false;
+          }
+          break;
+        case 1 /* inBrackets */:
+          if (char === `'` || char === `"` || char === "`") {
+            stateStack.push(state);
+            state = 3 /* inString */;
+            currentStringType = char;
+          } else if (char === `[`) {
+            currentOpenBracketCount++;
+          } else if (char === `]`) {
+            if (!--currentOpenBracketCount) {
+              state = stateStack.pop();
+            }
+          }
+          break;
+        case 2 /* inParens */:
+          if (char === `'` || char === `"` || char === "`") {
+            stateStack.push(state);
+            state = 3 /* inString */;
+            currentStringType = char;
+          } else if (char === `(`) {
+            currentOpenParensCount++;
+          } else if (char === `)`) {
+            if (i === path.length - 1) {
+              return false;
+            }
+            if (!--currentOpenParensCount) {
+              state = stateStack.pop();
+            }
+          }
+          break;
+        case 3 /* inString */:
+          if (char === currentStringType) {
+            state = stateStack.pop();
+            currentStringType = null;
+          }
+          break;
+      }
+    }
+    return !currentOpenBracketCount && !currentOpenParensCount;
+  };
+  const isMemberExpression = isMemberExpressionBrowser ;
+  function assert(condition, msg) {
+    if (!condition) {
+      throw new Error(msg || `unexpected compiler condition`);
+    }
+  }
+  function findDir(node, name, allowEmpty = false) {
+    for (let i = 0; i < node.props.length; i++) {
+      const p = node.props[i];
+      if (p.type === 7 && (allowEmpty || p.exp) && (isString(name) ? p.name === name : name.test(p.name))) {
+        return p;
+      }
+    }
+  }
+  function findProp(node, name, dynamicOnly = false, allowEmpty = false) {
+    for (let i = 0; i < node.props.length; i++) {
+      const p = node.props[i];
+      if (p.type === 6) {
+        if (dynamicOnly)
+          continue;
+        if (p.name === name && (p.value || allowEmpty)) {
+          return p;
+        }
+      } else if (p.name === "bind" && (p.exp || allowEmpty) && isStaticArgOf(p.arg, name)) {
+        return p;
+      }
+    }
+  }
+  function isStaticArgOf(arg, name) {
+    return !!(arg && isStaticExp(arg) && arg.content === name);
+  }
+  function hasDynamicKeyVBind(node) {
+    return node.props.some(
+      (p) => p.type === 7 && p.name === "bind" && (!p.arg || // v-bind="obj"
+      p.arg.type !== 4 || // v-bind:[_ctx.foo]
+      !p.arg.isStatic)
+      // v-bind:[foo]
+    );
+  }
+  function isText$1(node) {
+    return node.type === 5 || node.type === 2;
+  }
+  function isVSlot(p) {
+    return p.type === 7 && p.name === "slot";
+  }
+  function isTemplateNode(node) {
+    return node.type === 1 && node.tagType === 3;
+  }
+  function isSlotOutlet(node) {
+    return node.type === 1 && node.tagType === 2;
+  }
+  const propsHelperSet = /* @__PURE__ */ new Set([NORMALIZE_PROPS, GUARD_REACTIVE_PROPS]);
+  function getUnnormalizedProps(props, callPath = []) {
+    if (props && !isString(props) && props.type === 14) {
+      const callee = props.callee;
+      if (!isString(callee) && propsHelperSet.has(callee)) {
+        return getUnnormalizedProps(
+          props.arguments[0],
+          callPath.concat(props)
+        );
+      }
+    }
+    return [props, callPath];
+  }
+  function injectProp(node, prop, context) {
+    let propsWithInjection;
+    let props = node.type === 13 ? node.props : node.arguments[2];
+    let callPath = [];
+    let parentCall;
+    if (props && !isString(props) && props.type === 14) {
+      const ret = getUnnormalizedProps(props);
+      props = ret[0];
+      callPath = ret[1];
+      parentCall = callPath[callPath.length - 1];
+    }
+    if (props == null || isString(props)) {
+      propsWithInjection = createObjectExpression([prop]);
+    } else if (props.type === 14) {
+      const first = props.arguments[0];
+      if (!isString(first) && first.type === 15) {
+        if (!hasProp(prop, first)) {
+          first.properties.unshift(prop);
+        }
+      } else {
+        if (props.callee === TO_HANDLERS) {
+          propsWithInjection = createCallExpression(context.helper(MERGE_PROPS), [
+            createObjectExpression([prop]),
+            props
+          ]);
+        } else {
+          props.arguments.unshift(createObjectExpression([prop]));
+        }
+      }
+      !propsWithInjection && (propsWithInjection = props);
+    } else if (props.type === 15) {
+      if (!hasProp(prop, props)) {
+        props.properties.unshift(prop);
+      }
+      propsWithInjection = props;
+    } else {
+      propsWithInjection = createCallExpression(context.helper(MERGE_PROPS), [
+        createObjectExpression([prop]),
+        props
+      ]);
+      if (parentCall && parentCall.callee === GUARD_REACTIVE_PROPS) {
+        parentCall = callPath[callPath.length - 2];
+      }
+    }
+    if (node.type === 13) {
+      if (parentCall) {
+        parentCall.arguments[0] = propsWithInjection;
+      } else {
+        node.props = propsWithInjection;
+      }
+    } else {
+      if (parentCall) {
+        parentCall.arguments[0] = propsWithInjection;
+      } else {
+        node.arguments[2] = propsWithInjection;
+      }
+    }
+  }
+  function hasProp(prop, props) {
+    let result = false;
+    if (prop.key.type === 4) {
+      const propKeyName = prop.key.content;
+      result = props.properties.some(
+        (p) => p.key.type === 4 && p.key.content === propKeyName
+      );
+    }
+    return result;
+  }
+  function toValidAssetId(name, type) {
+    return `_${type}_${name.replace(/[^\w]/g, (searchValue, replaceValue) => {
+    return searchValue === "-" ? "_" : name.charCodeAt(replaceValue).toString();
+  })}`;
+  }
+  function getMemoedVNodeCall(node) {
+    if (node.type === 14 && node.callee === WITH_MEMO) {
+      return node.arguments[1].returns;
+    } else {
+      return node;
+    }
+  }
+  const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
+
+  const defaultParserOptions = {
+    parseMode: "base",
+    ns: 0,
+    delimiters: [`{{`, `}}`],
+    getNamespace: () => 0,
+    isVoidTag: NO,
+    isPreTag: NO,
+    isCustomElement: NO,
+    onError: defaultOnError,
+    onWarn: defaultOnWarn,
+    comments: true,
+    prefixIdentifiers: false
+  };
+  let currentOptions = defaultParserOptions;
+  let currentRoot = null;
+  let currentInput = "";
+  let currentOpenTag = null;
+  let currentProp = null;
+  let currentAttrValue = "";
+  let currentAttrStartIndex = -1;
+  let currentAttrEndIndex = -1;
+  let inPre = 0;
+  let inVPre = false;
+  let currentVPreBoundary = null;
+  const stack = [];
+  const tokenizer = new Tokenizer(stack, {
+    onerr: emitError,
+    ontext(start, end) {
+      onText(getSlice(start, end), start, end);
+    },
+    ontextentity(char, start, end) {
+      onText(char, start, end);
+    },
+    oninterpolation(start, end) {
+      if (inVPre) {
+        return onText(getSlice(start, end), start, end);
+      }
+      let innerStart = start + tokenizer.delimiterOpen.length;
+      let innerEnd = end - tokenizer.delimiterClose.length;
+      while (isWhitespace(currentInput.charCodeAt(innerStart))) {
+        innerStart++;
+      }
+      while (isWhitespace(currentInput.charCodeAt(innerEnd - 1))) {
+        innerEnd--;
+      }
+      let exp = getSlice(innerStart, innerEnd);
+      if (exp.includes("&")) {
+        {
+          exp = currentOptions.decodeEntities(exp, false);
+        }
+      }
+      addNode({
+        type: 5,
+        content: createExp(exp, false, getLoc(innerStart, innerEnd)),
+        loc: getLoc(start, end)
+      });
+    },
+    onopentagname(start, end) {
+      const name = getSlice(start, end);
+      currentOpenTag = {
+        type: 1,
+        tag: name,
+        ns: currentOptions.getNamespace(name, stack[0], currentOptions.ns),
+        tagType: 0,
+        // will be refined on tag close
+        props: [],
+        children: [],
+        loc: getLoc(start - 1, end),
+        codegenNode: void 0
+      };
+    },
+    onopentagend(end) {
+      endOpenTag(end);
+    },
+    onclosetag(start, end) {
+      const name = getSlice(start, end);
+      if (!currentOptions.isVoidTag(name)) {
+        let found = false;
+        for (let i = 0; i < stack.length; i++) {
+          const e = stack[i];
+          if (e.tag.toLowerCase() === name.toLowerCase()) {
+            found = true;
+            if (i > 0) {
+              emitError(24, stack[0].loc.start.offset);
+            }
+            for (let j = 0; j <= i; j++) {
+              const el = stack.shift();
+              onCloseTag(el, end, j < i);
+            }
+            break;
+          }
+        }
+        if (!found) {
+          emitError(23, backTrack(start, 60));
+        }
+      }
+    },
+    onselfclosingtag(end) {
+      var _a;
+      const name = currentOpenTag.tag;
+      currentOpenTag.isSelfClosing = true;
+      endOpenTag(end);
+      if (((_a = stack[0]) == null ? void 0 : _a.tag) === name) {
+        onCloseTag(stack.shift(), end);
+      }
+    },
+    onattribname(start, end) {
+      currentProp = {
+        type: 6,
+        name: getSlice(start, end),
+        nameLoc: getLoc(start, end),
+        value: void 0,
+        loc: getLoc(start)
+      };
+    },
+    ondirname(start, end) {
+      const raw = getSlice(start, end);
+      const name = raw === "." || raw === ":" ? "bind" : raw === "@" ? "on" : raw === "#" ? "slot" : raw.slice(2);
+      if (!inVPre && name === "") {
+        emitError(26, start);
+      }
+      if (inVPre || name === "") {
+        currentProp = {
+          type: 6,
+          name: raw,
+          nameLoc: getLoc(start, end),
+          value: void 0,
+          loc: getLoc(start)
+        };
+      } else {
+        currentProp = {
+          type: 7,
+          name,
+          rawName: raw,
+          exp: void 0,
+          arg: void 0,
+          modifiers: raw === "." ? ["prop"] : [],
+          loc: getLoc(start)
+        };
+        if (name === "pre") {
+          inVPre = tokenizer.inVPre = true;
+          currentVPreBoundary = currentOpenTag;
+          const props = currentOpenTag.props;
+          for (let i = 0; i < props.length; i++) {
+            if (props[i].type === 7) {
+              props[i] = dirToAttr(props[i]);
+            }
+          }
+        }
+      }
+    },
+    ondirarg(start, end) {
+      if (start === end)
+        return;
+      const arg = getSlice(start, end);
+      if (inVPre) {
+        currentProp.name += arg;
+        setLocEnd(currentProp.nameLoc, end);
+      } else {
+        const isStatic = arg[0] !== `[`;
+        currentProp.arg = createExp(
+          isStatic ? arg : arg.slice(1, -1),
+          isStatic,
+          getLoc(start, end),
+          isStatic ? 3 : 0
+        );
+      }
+    },
+    ondirmodifier(start, end) {
+      const mod = getSlice(start, end);
+      if (inVPre) {
+        currentProp.name += "." + mod;
+        setLocEnd(currentProp.nameLoc, end);
+      } else if (currentProp.name === "slot") {
+        const arg = currentProp.arg;
+        if (arg) {
+          arg.content += "." + mod;
+          setLocEnd(arg.loc, end);
+        }
+      } else {
+        currentProp.modifiers.push(mod);
+      }
+    },
+    onattribdata(start, end) {
+      currentAttrValue += getSlice(start, end);
+      if (currentAttrStartIndex < 0)
+        currentAttrStartIndex = start;
+      currentAttrEndIndex = end;
+    },
+    onattribentity(char, start, end) {
+      currentAttrValue += char;
+      if (currentAttrStartIndex < 0)
+        currentAttrStartIndex = start;
+      currentAttrEndIndex = end;
+    },
+    onattribnameend(end) {
+      const start = currentProp.loc.start.offset;
+      const name = getSlice(start, end);
+      if (currentProp.type === 7) {
+        currentProp.rawName = name;
+      }
+      if (currentOpenTag.props.some(
+        (p) => (p.type === 7 ? p.rawName : p.name) === name
+      )) {
+        emitError(2, start);
+      }
+    },
+    onattribend(quote, end) {
+      if (currentOpenTag && currentProp) {
+        setLocEnd(currentProp.loc, end);
+        if (quote !== 0) {
+          if (currentAttrValue.includes("&")) {
+            currentAttrValue = currentOptions.decodeEntities(
+              currentAttrValue,
+              true
+            );
+          }
+          if (currentProp.type === 6) {
+            if (currentProp.name === "class") {
+              currentAttrValue = condense(currentAttrValue).trim();
+            }
+            if (quote === 1 && !currentAttrValue) {
+              emitError(13, end);
+            }
+            currentProp.value = {
+              type: 2,
+              content: currentAttrValue,
+              loc: quote === 1 ? getLoc(currentAttrStartIndex, currentAttrEndIndex) : getLoc(currentAttrStartIndex - 1, currentAttrEndIndex + 1)
+            };
+            if (tokenizer.inSFCRoot && currentOpenTag.tag === "template" && currentProp.name === "lang" && currentAttrValue && currentAttrValue !== "html") {
+              tokenizer.enterRCDATA(toCharCodes(`</template`), 0);
+            }
+          } else {
+            let expParseMode = 0 /* Normal */;
+            currentProp.exp = createExp(
+              currentAttrValue,
+              false,
+              getLoc(currentAttrStartIndex, currentAttrEndIndex),
+              0,
+              expParseMode
+            );
+            if (currentProp.name === "for") {
+              currentProp.forParseResult = parseForExpression(currentProp.exp);
+            }
+          }
+        }
+        if (currentProp.type !== 7 || currentProp.name !== "pre") {
+          currentOpenTag.props.push(currentProp);
+        }
+      }
+      currentAttrValue = "";
+      currentAttrStartIndex = currentAttrEndIndex = -1;
+    },
+    oncomment(start, end) {
+      if (currentOptions.comments) {
+        addNode({
+          type: 3,
+          content: getSlice(start, end),
+          loc: getLoc(start - 4, end + 3)
+        });
+      }
+    },
+    onend() {
+      const end = currentInput.length;
+      if (tokenizer.state !== 1) {
+        switch (tokenizer.state) {
+          case 5:
+          case 8:
+            emitError(5, end);
+            break;
+          case 3:
+          case 4:
+            emitError(
+              25,
+              tokenizer.sectionStart
+            );
+            break;
+          case 28:
+            if (tokenizer.currentSequence === Sequences.CdataEnd) {
+              emitError(6, end);
+            } else {
+              emitError(7, end);
+            }
+            break;
+          case 6:
+          case 7:
+          case 9:
+          case 11:
+          case 12:
+          case 13:
+          case 14:
+          case 15:
+          case 16:
+          case 17:
+          case 18:
+          case 19:
+          case 20:
+          case 21:
+            emitError(9, end);
+            break;
+        }
+      }
+      for (let index = 0; index < stack.length; index++) {
+        onCloseTag(stack[index], end - 1);
+        emitError(24, stack[index].loc.start.offset);
+      }
+    },
+    oncdata(start, end) {
+      if (stack[0].ns !== 0) {
+        onText(getSlice(start, end), start, end);
+      } else {
+        emitError(1, start - 9);
+      }
+    },
+    onprocessinginstruction(start) {
+      if ((stack[0] ? stack[0].ns : currentOptions.ns) === 0) {
+        emitError(
+          21,
+          start - 1
+        );
+      }
+    }
+  });
+  const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
+  const stripParensRE = /^\(|\)$/g;
+  function parseForExpression(input) {
+    const loc = input.loc;
+    const exp = input.content;
+    const inMatch = exp.match(forAliasRE);
+    if (!inMatch)
+      return;
+    const [, LHS, RHS] = inMatch;
+    const createAliasExpression = (content, offset, asParam = false) => {
+      const start = loc.start.offset + offset;
+      const end = start + content.length;
+      return createExp(
+        content,
+        false,
+        getLoc(start, end),
+        0,
+        asParam ? 1 /* Params */ : 0 /* Normal */
+      );
+    };
+    const result = {
+      source: createAliasExpression(RHS.trim(), exp.indexOf(RHS, LHS.length)),
+      value: void 0,
+      key: void 0,
+      index: void 0,
+      finalized: false
+    };
+    let valueContent = LHS.trim().replace(stripParensRE, "").trim();
+    const trimmedOffset = LHS.indexOf(valueContent);
+    const iteratorMatch = valueContent.match(forIteratorRE);
+    if (iteratorMatch) {
+      valueContent = valueContent.replace(forIteratorRE, "").trim();
+      const keyContent = iteratorMatch[1].trim();
+      let keyOffset;
+      if (keyContent) {
+        keyOffset = exp.indexOf(keyContent, trimmedOffset + valueContent.length);
+        result.key = createAliasExpression(keyContent, keyOffset, true);
+      }
+      if (iteratorMatch[2]) {
+        const indexContent = iteratorMatch[2].trim();
+        if (indexContent) {
+          result.index = createAliasExpression(
+            indexContent,
+            exp.indexOf(
+              indexContent,
+              result.key ? keyOffset + keyContent.length : trimmedOffset + valueContent.length
+            ),
+            true
+          );
+        }
+      }
+    }
+    if (valueContent) {
+      result.value = createAliasExpression(valueContent, trimmedOffset, true);
+    }
+    return result;
+  }
+  function getSlice(start, end) {
+    return currentInput.slice(start, end);
+  }
+  function endOpenTag(end) {
+    if (tokenizer.inSFCRoot) {
+      currentOpenTag.innerLoc = getLoc(end + 1, end + 1);
+    }
+    addNode(currentOpenTag);
+    const { tag, ns } = currentOpenTag;
+    if (ns === 0 && currentOptions.isPreTag(tag)) {
+      inPre++;
+    }
+    if (currentOptions.isVoidTag(tag)) {
+      onCloseTag(currentOpenTag, end);
+    } else {
+      stack.unshift(currentOpenTag);
+      if (ns === 1 || ns === 2) {
+        tokenizer.inXML = true;
+      }
+    }
+    currentOpenTag = null;
+  }
+  function onText(content, start, end) {
+    var _a;
+    {
+      const tag = (_a = stack[0]) == null ? void 0 : _a.tag;
+      if (tag !== "script" && tag !== "style" && content.includes("&")) {
+        content = currentOptions.decodeEntities(content, false);
+      }
+    }
+    const parent = stack[0] || currentRoot;
+    const lastNode = parent.children[parent.children.length - 1];
+    if ((lastNode == null ? void 0 : lastNode.type) === 2) {
+      lastNode.content += content;
+      setLocEnd(lastNode.loc, end);
+    } else {
+      parent.children.push({
+        type: 2,
+        content,
+        loc: getLoc(start, end)
+      });
+    }
+  }
+  function onCloseTag(el, end, isImplied = false) {
+    if (isImplied) {
+      setLocEnd(el.loc, backTrack(end, 60));
+    } else {
+      setLocEnd(el.loc, end + 1);
+    }
+    if (tokenizer.inSFCRoot) {
+      if (el.children.length) {
+        el.innerLoc.end = extend({}, el.children[el.children.length - 1].loc.end);
+      } else {
+        el.innerLoc.end = extend({}, el.innerLoc.start);
+      }
+      el.innerLoc.source = getSlice(
+        el.innerLoc.start.offset,
+        el.innerLoc.end.offset
+      );
+    }
+    const { tag, ns } = el;
+    if (!inVPre) {
+      if (tag === "slot") {
+        el.tagType = 2;
+      } else if (isFragmentTemplate(el)) {
+        el.tagType = 3;
+      } else if (isComponent(el)) {
+        el.tagType = 1;
+      }
+    }
+    if (!tokenizer.inRCDATA) {
+      el.children = condenseWhitespace(el.children, el.tag);
+    }
+    if (ns === 0 && currentOptions.isPreTag(tag)) {
+      inPre--;
+    }
+    if (currentVPreBoundary === el) {
+      inVPre = tokenizer.inVPre = false;
+      currentVPreBoundary = null;
+    }
+    if (tokenizer.inXML && (stack[0] ? stack[0].ns : currentOptions.ns) === 0) {
+      tokenizer.inXML = false;
+    }
+  }
+  function backTrack(index, c) {
+    let i = index;
+    while (currentInput.charCodeAt(i) !== c && i >= 0)
+      i--;
+    return i;
+  }
+  const specialTemplateDir = /* @__PURE__ */ new Set(["if", "else", "else-if", "for", "slot"]);
+  function isFragmentTemplate({ tag, props }) {
+    if (tag === "template") {
+      for (let i = 0; i < props.length; i++) {
+        if (props[i].type === 7 && specialTemplateDir.has(props[i].name)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  function isComponent({ tag, props }) {
+    var _a;
+    if (currentOptions.isCustomElement(tag)) {
+      return false;
+    }
+    if (tag === "component" || isUpperCase(tag.charCodeAt(0)) || isCoreComponent(tag) || ((_a = currentOptions.isBuiltInComponent) == null ? void 0 : _a.call(currentOptions, tag)) || currentOptions.isNativeTag && !currentOptions.isNativeTag(tag)) {
+      return true;
+    }
+    for (let i = 0; i < props.length; i++) {
+      const p = props[i];
+      if (p.type === 6) {
+        if (p.name === "is" && p.value) {
+          if (p.value.content.startsWith("vue:")) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+  function isUpperCase(c) {
+    return c > 64 && c < 91;
+  }
+  const windowsNewlineRE = /\r\n/g;
+  function condenseWhitespace(nodes, tag) {
+    var _a, _b;
+    const shouldCondense = currentOptions.whitespace !== "preserve";
+    let removedWhitespace = false;
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (node.type === 2) {
+        if (!inPre) {
+          if (isAllWhitespace(node.content)) {
+            const prev = (_a = nodes[i - 1]) == null ? void 0 : _a.type;
+            const next = (_b = nodes[i + 1]) == null ? void 0 : _b.type;
+            if (!prev || !next || shouldCondense && (prev === 3 && (next === 3 || next === 1) || prev === 1 && (next === 3 || next === 1 && hasNewlineChar(node.content)))) {
+              removedWhitespace = true;
+              nodes[i] = null;
+            } else {
+              node.content = " ";
+            }
+          } else if (shouldCondense) {
+            node.content = condense(node.content);
+          }
+        } else {
+          node.content = node.content.replace(windowsNewlineRE, "\n");
+        }
+      }
+    }
+    if (inPre && tag && currentOptions.isPreTag(tag)) {
+      const first = nodes[0];
+      if (first && first.type === 2) {
+        first.content = first.content.replace(/^\r?\n/, "");
+      }
+    }
+    return removedWhitespace ? nodes.filter(Boolean) : nodes;
+  }
+  function isAllWhitespace(str) {
+    for (let i = 0; i < str.length; i++) {
+      if (!isWhitespace(str.charCodeAt(i))) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function hasNewlineChar(str) {
+    for (let i = 0; i < str.length; i++) {
+      const c = str.charCodeAt(i);
+      if (c === 10 || c === 13) {
+        return true;
+      }
+    }
+    return false;
+  }
+  function condense(str) {
+    let ret = "";
+    let prevCharIsWhitespace = false;
+    for (let i = 0; i < str.length; i++) {
+      if (isWhitespace(str.charCodeAt(i))) {
+        if (!prevCharIsWhitespace) {
+          ret += " ";
+          prevCharIsWhitespace = true;
+        }
+      } else {
+        ret += str[i];
+        prevCharIsWhitespace = false;
+      }
+    }
+    return ret;
+  }
+  function addNode(node) {
+    (stack[0] || currentRoot).children.push(node);
+  }
+  function getLoc(start, end) {
+    return {
+      start: tokenizer.getPos(start),
+      // @ts-expect-error allow late attachment
+      end: end == null ? end : tokenizer.getPos(end),
+      // @ts-expect-error allow late attachment
+      source: end == null ? end : getSlice(start, end)
+    };
+  }
+  function setLocEnd(loc, end) {
+    loc.end = tokenizer.getPos(end);
+    loc.source = getSlice(loc.start.offset, end);
+  }
+  function dirToAttr(dir) {
+    const attr = {
+      type: 6,
+      name: dir.rawName,
+      nameLoc: getLoc(
+        dir.loc.start.offset,
+        dir.loc.start.offset + dir.rawName.length
+      ),
+      value: void 0,
+      loc: dir.loc
+    };
+    if (dir.exp) {
+      const loc = dir.exp.loc;
+      if (loc.end.offset < dir.loc.end.offset) {
+        loc.start.offset--;
+        loc.start.column--;
+        loc.end.offset++;
+        loc.end.column++;
+      }
+      attr.value = {
+        type: 2,
+        content: dir.exp.content,
+        loc
+      };
+    }
+    return attr;
+  }
+  function createExp(content, isStatic = false, loc, constType = 0, parseMode = 0 /* Normal */) {
+    const exp = createSimpleExpression(content, isStatic, loc, constType);
+    return exp;
+  }
+  function emitError(code, index, message) {
+    currentOptions.onError(
+      createCompilerError(code, getLoc(index, index), void 0, message)
+    );
+  }
+  function reset() {
+    tokenizer.reset();
+    currentOpenTag = null;
+    currentProp = null;
+    currentAttrValue = "";
+    currentAttrStartIndex = -1;
+    currentAttrEndIndex = -1;
+    stack.length = 0;
+  }
+  function baseParse(input, options) {
+    reset();
+    currentInput = input;
+    currentOptions = extend({}, defaultParserOptions);
+    if (options) {
+      let key;
+      for (key in options) {
+        if (options[key] != null) {
+          currentOptions[key] = options[key];
+        }
+      }
+    }
+    {
+      if (!currentOptions.decodeEntities) {
+        throw new Error(
+          `[@vue/compiler-core] decodeEntities option is required in browser builds.`
+        );
+      }
+    }
+    tokenizer.mode = currentOptions.parseMode === "html" ? 1 : currentOptions.parseMode === "sfc" ? 2 : 0;
+    tokenizer.inXML = currentOptions.ns === 1 || currentOptions.ns === 2;
+    const delimiters = options == null ? void 0 : options.delimiters;
+    if (delimiters) {
+      tokenizer.delimiterOpen = toCharCodes(delimiters[0]);
+      tokenizer.delimiterClose = toCharCodes(delimiters[1]);
+    }
+    const root = currentRoot = createRoot([], input);
+    tokenizer.parse(currentInput);
+    root.loc = getLoc(0, input.length);
+    root.children = condenseWhitespace(root.children);
+    currentRoot = null;
+    return root;
+  }
+
+  function hoistStatic(root, context) {
+    walk(
+      root,
+      context,
+      // Root node is unfortunately non-hoistable due to potential parent
+      // fallthrough attributes.
+      isSingleElementRoot(root, root.children[0])
+    );
+  }
+  function isSingleElementRoot(root, child) {
+    const { children } = root;
+    return children.length === 1 && child.type === 1 && !isSlotOutlet(child);
+  }
+  function walk(node, context, doNotHoistNode = false) {
+    const { children } = node;
+    const originalCount = children.length;
+    let hoistedCount = 0;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child.type === 1 && child.tagType === 0) {
+        const constantType = doNotHoistNode ? 0 : getConstantType(child, context);
+        if (constantType > 0) {
+          if (constantType >= 2) {
+            child.codegenNode.patchFlag = -1 + (` /* HOISTED */` );
+            child.codegenNode = context.hoist(child.codegenNode);
+            hoistedCount++;
+            continue;
+          }
+        } else {
+          const codegenNode = child.codegenNode;
+          if (codegenNode.type === 13) {
+            const flag = getPatchFlag(codegenNode);
+            if ((!flag || flag === 512 || flag === 1) && getGeneratedPropsConstantType(child, context) >= 2) {
+              const props = getNodeProps(child);
+              if (props) {
+                codegenNode.props = context.hoist(props);
+              }
+            }
+            if (codegenNode.dynamicProps) {
+              codegenNode.dynamicProps = context.hoist(codegenNode.dynamicProps);
+            }
+          }
+        }
+      }
+      if (child.type === 1) {
+        const isComponent = child.tagType === 1;
+        if (isComponent) {
+          context.scopes.vSlot++;
+        }
+        walk(child, context);
+        if (isComponent) {
+          context.scopes.vSlot--;
+        }
+      } else if (child.type === 11) {
+        walk(child, context, child.children.length === 1);
+      } else if (child.type === 9) {
+        for (let i2 = 0; i2 < child.branches.length; i2++) {
+          walk(
+            child.branches[i2],
+            context,
+            child.branches[i2].children.length === 1
+          );
+        }
+      }
+    }
+    if (hoistedCount && context.transformHoist) {
+      context.transformHoist(children, context, node);
+    }
+    if (hoistedCount && hoistedCount === originalCount && node.type === 1 && node.tagType === 0 && node.codegenNode && node.codegenNode.type === 13 && isArray(node.codegenNode.children)) {
+      const hoisted = context.hoist(
+        createArrayExpression(node.codegenNode.children)
+      );
+      if (context.hmr) {
+        hoisted.content = `[...${hoisted.content}]`;
+      }
+      node.codegenNode.children = hoisted;
+    }
+  }
+  function getConstantType(node, context) {
+    const { constantCache } = context;
+    switch (node.type) {
+      case 1:
+        if (node.tagType !== 0) {
+          return 0;
+        }
+        const cached = constantCache.get(node);
+        if (cached !== void 0) {
+          return cached;
+        }
+        const codegenNode = node.codegenNode;
+        if (codegenNode.type !== 13) {
+          return 0;
+        }
+        if (codegenNode.isBlock && node.tag !== "svg" && node.tag !== "foreignObject") {
+          return 0;
+        }
+        const flag = getPatchFlag(codegenNode);
+        if (!flag) {
+          let returnType2 = 3;
+          const generatedPropsType = getGeneratedPropsConstantType(node, context);
+          if (generatedPropsType === 0) {
+            constantCache.set(node, 0);
+            return 0;
+          }
+          if (generatedPropsType < returnType2) {
+            returnType2 = generatedPropsType;
+          }
+          for (let i = 0; i < node.children.length; i++) {
+            const childType = getConstantType(node.children[i], context);
+            if (childType === 0) {
+              constantCache.set(node, 0);
+              return 0;
+            }
+            if (childType < returnType2) {
+              returnType2 = childType;
+            }
+          }
+          if (returnType2 > 1) {
+            for (let i = 0; i < node.props.length; i++) {
+              const p = node.props[i];
+              if (p.type === 7 && p.name === "bind" && p.exp) {
+                const expType = getConstantType(p.exp, context);
+                if (expType === 0) {
+                  constantCache.set(node, 0);
+                  return 0;
+                }
+                if (expType < returnType2) {
+                  returnType2 = expType;
+                }
+              }
+            }
+          }
+          if (codegenNode.isBlock) {
+            for (let i = 0; i < node.props.length; i++) {
+              const p = node.props[i];
+              if (p.type === 7) {
+                constantCache.set(node, 0);
+                return 0;
+              }
+            }
+            context.removeHelper(OPEN_BLOCK);
+            context.removeHelper(
+              getVNodeBlockHelper(context.inSSR, codegenNode.isComponent)
+            );
+            codegenNode.isBlock = false;
+            context.helper(getVNodeHelper(context.inSSR, codegenNode.isComponent));
+          }
+          constantCache.set(node, returnType2);
+          return returnType2;
+        } else {
+          constantCache.set(node, 0);
+          return 0;
+        }
+      case 2:
+      case 3:
+        return 3;
+      case 9:
+      case 11:
+      case 10:
+        return 0;
+      case 5:
+      case 12:
+        return getConstantType(node.content, context);
+      case 4:
+        return node.constType;
+      case 8:
+        let returnType = 3;
+        for (let i = 0; i < node.children.length; i++) {
+          const child = node.children[i];
+          if (isString(child) || isSymbol(child)) {
+            continue;
+          }
+          const childType = getConstantType(child, context);
+          if (childType === 0) {
+            return 0;
+          } else if (childType < returnType) {
+            returnType = childType;
+          }
+        }
+        return returnType;
+      default:
+        return 0;
+    }
+  }
+  const allowHoistedHelperSet = /* @__PURE__ */ new Set([
+    NORMALIZE_CLASS,
+    NORMALIZE_STYLE,
+    NORMALIZE_PROPS,
+    GUARD_REACTIVE_PROPS
+  ]);
+  function getConstantTypeOfHelperCall(value, context) {
+    if (value.type === 14 && !isString(value.callee) && allowHoistedHelperSet.has(value.callee)) {
+      const arg = value.arguments[0];
+      if (arg.type === 4) {
+        return getConstantType(arg, context);
+      } else if (arg.type === 14) {
+        return getConstantTypeOfHelperCall(arg, context);
+      }
+    }
+    return 0;
+  }
+  function getGeneratedPropsConstantType(node, context) {
+    let returnType = 3;
+    const props = getNodeProps(node);
+    if (props && props.type === 15) {
+      const { properties } = props;
+      for (let i = 0; i < properties.length; i++) {
+        const { key, value } = properties[i];
+        const keyType = getConstantType(key, context);
+        if (keyType === 0) {
+          return keyType;
+        }
+        if (keyType < returnType) {
+          returnType = keyType;
+        }
+        let valueType;
+        if (value.type === 4) {
+          valueType = getConstantType(value, context);
+        } else if (value.type === 14) {
+          valueType = getConstantTypeOfHelperCall(value, context);
+        } else {
+          valueType = 0;
+        }
+        if (valueType === 0) {
+          return valueType;
+        }
+        if (valueType < returnType) {
+          returnType = valueType;
+        }
+      }
+    }
+    return returnType;
+  }
+  function getNodeProps(node) {
+    const codegenNode = node.codegenNode;
+    if (codegenNode.type === 13) {
+      return codegenNode.props;
+    }
+  }
+  function getPatchFlag(node) {
+    const flag = node.patchFlag;
+    return flag ? parseInt(flag, 10) : void 0;
+  }
+
+  function createTransformContext(root, {
+    filename = "",
+    prefixIdentifiers = false,
+    hoistStatic: hoistStatic2 = false,
+    hmr = false,
+    cacheHandlers = false,
+    nodeTransforms = [],
+    directiveTransforms = {},
+    transformHoist = null,
+    isBuiltInComponent = NOOP,
+    isCustomElement = NOOP,
+    expressionPlugins = [],
+    scopeId = null,
+    slotted = true,
+    ssr = false,
+    inSSR = false,
+    ssrCssVars = ``,
+    bindingMetadata = EMPTY_OBJ,
+    inline = false,
+    isTS = false,
+    onError = defaultOnError,
+    onWarn = defaultOnWarn,
+    compatConfig
+  }) {
+    const nameMatch = filename.replace(/\?.*$/, "").match(/([^/\\]+)\.\w+$/);
+    const context = {
+      // options
+      filename,
+      selfName: nameMatch && capitalize(camelize(nameMatch[1])),
+      prefixIdentifiers,
+      hoistStatic: hoistStatic2,
+      hmr,
+      cacheHandlers,
+      nodeTransforms,
+      directiveTransforms,
+      transformHoist,
+      isBuiltInComponent,
+      isCustomElement,
+      expressionPlugins,
+      scopeId,
+      slotted,
+      ssr,
+      inSSR,
+      ssrCssVars,
+      bindingMetadata,
+      inline,
+      isTS,
+      onError,
+      onWarn,
+      compatConfig,
+      // state
+      root,
+      helpers: /* @__PURE__ */ new Map(),
+      components: /* @__PURE__ */ new Set(),
+      directives: /* @__PURE__ */ new Set(),
+      hoists: [],
+      imports: [],
+      constantCache: /* @__PURE__ */ new WeakMap(),
+      temps: 0,
+      cached: 0,
+      identifiers: /* @__PURE__ */ Object.create(null),
+      scopes: {
+        vFor: 0,
+        vSlot: 0,
+        vPre: 0,
+        vOnce: 0
+      },
+      parent: null,
+      currentNode: root,
+      childIndex: 0,
+      inVOnce: false,
+      // methods
+      helper(name) {
+        const count = context.helpers.get(name) || 0;
+        context.helpers.set(name, count + 1);
+        return name;
+      },
+      removeHelper(name) {
+        const count = context.helpers.get(name);
+        if (count) {
+          const currentCount = count - 1;
+          if (!currentCount) {
+            context.helpers.delete(name);
+          } else {
+            context.helpers.set(name, currentCount);
+          }
+        }
+      },
+      helperString(name) {
+        return `_${helperNameMap[context.helper(name)]}`;
+      },
+      replaceNode(node) {
+        {
+          if (!context.currentNode) {
+            throw new Error(`Node being replaced is already removed.`);
+          }
+          if (!context.parent) {
+            throw new Error(`Cannot replace root node.`);
+          }
+        }
+        context.parent.children[context.childIndex] = context.currentNode = node;
+      },
+      removeNode(node) {
+        if (!context.parent) {
+          throw new Error(`Cannot remove root node.`);
+        }
+        const list = context.parent.children;
+        const removalIndex = node ? list.indexOf(node) : context.currentNode ? context.childIndex : -1;
+        if (removalIndex < 0) {
+          throw new Error(`node being removed is not a child of current parent`);
+        }
+        if (!node || node === context.currentNode) {
+          context.currentNode = null;
+          context.onNodeRemoved();
+        } else {
+          if (context.childIndex > removalIndex) {
+            context.childIndex--;
+            context.onNodeRemoved();
+          }
+        }
+        context.parent.children.splice(removalIndex, 1);
+      },
+      onNodeRemoved: NOOP,
+      addIdentifiers(exp) {
+      },
+      removeIdentifiers(exp) {
+      },
+      hoist(exp) {
+        if (isString(exp))
+          exp = createSimpleExpression(exp);
+        context.hoists.push(exp);
+        const identifier = createSimpleExpression(
+          `_hoisted_${context.hoists.length}`,
+          false,
+          exp.loc,
+          2
+        );
+        identifier.hoisted = exp;
+        return identifier;
+      },
+      cache(exp, isVNode = false) {
+        return createCacheExpression(context.cached++, exp, isVNode);
+      }
+    };
+    return context;
+  }
+  function transform(root, options) {
+    const context = createTransformContext(root, options);
+    traverseNode(root, context);
+    if (options.hoistStatic) {
+      hoistStatic(root, context);
+    }
+    if (!options.ssr) {
+      createRootCodegen(root, context);
+    }
+    root.helpers = /* @__PURE__ */ new Set([...context.helpers.keys()]);
+    root.components = [...context.components];
+    root.directives = [...context.directives];
+    root.imports = context.imports;
+    root.hoists = context.hoists;
+    root.temps = context.temps;
+    root.cached = context.cached;
+    root.transformed = true;
+  }
+  function createRootCodegen(root, context) {
+    const { helper } = context;
+    const { children } = root;
+    if (children.length === 1) {
+      const child = children[0];
+      if (isSingleElementRoot(root, child) && child.codegenNode) {
+        const codegenNode = child.codegenNode;
+        if (codegenNode.type === 13) {
+          convertToBlock(codegenNode, context);
+        }
+        root.codegenNode = codegenNode;
+      } else {
+        root.codegenNode = child;
+      }
+    } else if (children.length > 1) {
+      let patchFlag = 64;
+      let patchFlagText = PatchFlagNames[64];
+      if (children.filter((c) => c.type !== 3).length === 1) {
+        patchFlag |= 2048;
+        patchFlagText += `, ${PatchFlagNames[2048]}`;
+      }
+      root.codegenNode = createVNodeCall(
+        context,
+        helper(FRAGMENT),
+        void 0,
+        root.children,
+        patchFlag + (` /* ${patchFlagText} */` ),
+        void 0,
+        void 0,
+        true,
+        void 0,
+        false
+      );
+    } else ;
+  }
+  function traverseChildren(parent, context) {
+    let i = 0;
+    const nodeRemoved = () => {
+      i--;
+    };
+    for (; i < parent.children.length; i++) {
+      const child = parent.children[i];
+      if (isString(child))
+        continue;
+      context.parent = parent;
+      context.childIndex = i;
+      context.onNodeRemoved = nodeRemoved;
+      traverseNode(child, context);
+    }
+  }
+  function traverseNode(node, context) {
+    context.currentNode = node;
+    const { nodeTransforms } = context;
+    const exitFns = [];
+    for (let i2 = 0; i2 < nodeTransforms.length; i2++) {
+      const onExit = nodeTransforms[i2](node, context);
+      if (onExit) {
+        if (isArray(onExit)) {
+          exitFns.push(...onExit);
+        } else {
+          exitFns.push(onExit);
+        }
+      }
+      if (!context.currentNode) {
+        return;
+      } else {
+        node = context.currentNode;
+      }
+    }
+    switch (node.type) {
+      case 3:
+        if (!context.ssr) {
+          context.helper(CREATE_COMMENT);
+        }
+        break;
+      case 5:
+        if (!context.ssr) {
+          context.helper(TO_DISPLAY_STRING);
+        }
+        break;
+      case 9:
+        for (let i2 = 0; i2 < node.branches.length; i2++) {
+          traverseNode(node.branches[i2], context);
+        }
+        break;
+      case 10:
+      case 11:
+      case 1:
+      case 0:
+        traverseChildren(node, context);
+        break;
+    }
+    context.currentNode = node;
+    let i = exitFns.length;
+    while (i--) {
+      exitFns[i]();
+    }
+  }
+  function createStructuralDirectiveTransform(name, fn) {
+    const matches = isString(name) ? (n) => n === name : (n) => name.test(n);
+    return (node, context) => {
+      if (node.type === 1) {
+        const { props } = node;
+        if (node.tagType === 3 && props.some(isVSlot)) {
+          return;
+        }
+        const exitFns = [];
+        for (let i = 0; i < props.length; i++) {
+          const prop = props[i];
+          if (prop.type === 7 && matches(prop.name)) {
+            props.splice(i, 1);
+            i--;
+            const onExit = fn(node, prop, context);
+            if (onExit)
+              exitFns.push(onExit);
+          }
+        }
+        return exitFns;
+      }
+    };
+  }
+
+  const PURE_ANNOTATION = `/*#__PURE__*/`;
+  const aliasHelper = (s) => `${helperNameMap[s]}: _${helperNameMap[s]}`;
+  function createCodegenContext(ast, {
+    mode = "function",
+    prefixIdentifiers = mode === "module",
+    sourceMap = false,
+    filename = `template.vue.html`,
+    scopeId = null,
+    optimizeImports = false,
+    runtimeGlobalName = `Vue`,
+    runtimeModuleName = `vue`,
+    ssrRuntimeModuleName = "vue/server-renderer",
+    ssr = false,
+    isTS = false,
+    inSSR = false
+  }) {
+    const context = {
+      mode,
+      prefixIdentifiers,
+      sourceMap,
+      filename,
+      scopeId,
+      optimizeImports,
+      runtimeGlobalName,
+      runtimeModuleName,
+      ssrRuntimeModuleName,
+      ssr,
+      isTS,
+      inSSR,
+      source: ast.source,
+      code: ``,
+      column: 1,
+      line: 1,
+      offset: 0,
+      indentLevel: 0,
+      pure: false,
+      map: void 0,
+      helper(key) {
+        return `_${helperNameMap[key]}`;
+      },
+      push(code, newlineIndex = -2 /* None */, node) {
+        context.code += code;
+      },
+      indent() {
+        newline(++context.indentLevel);
+      },
+      deindent(withoutNewLine = false) {
+        if (withoutNewLine) {
+          --context.indentLevel;
+        } else {
+          newline(--context.indentLevel);
+        }
+      },
+      newline() {
+        newline(context.indentLevel);
+      }
+    };
+    function newline(n) {
+      context.push("\n" + `  `.repeat(n), 0 /* Start */);
+    }
+    return context;
+  }
+  function generate(ast, options = {}) {
+    const context = createCodegenContext(ast, options);
+    if (options.onContextCreated)
+      options.onContextCreated(context);
+    const {
+      mode,
+      push,
+      prefixIdentifiers,
+      indent,
+      deindent,
+      newline,
+      scopeId,
+      ssr
+    } = context;
+    const helpers = Array.from(ast.helpers);
+    const hasHelpers = helpers.length > 0;
+    const useWithBlock = !prefixIdentifiers && mode !== "module";
+    const preambleContext = context;
+    {
+      genFunctionPreamble(ast, preambleContext);
+    }
+    const functionName = ssr ? `ssrRender` : `render`;
+    const args = ssr ? ["_ctx", "_push", "_parent", "_attrs"] : ["_ctx", "_cache"];
+    const signature = args.join(", ");
+    {
+      push(`function ${functionName}(${signature}) {`);
+    }
+    indent();
+    if (useWithBlock) {
+      push(`with (_ctx) {`);
+      indent();
+      if (hasHelpers) {
+        push(
+          `const { ${helpers.map(aliasHelper).join(", ")} } = _Vue
+`,
+          -1 /* End */
+        );
+        newline();
+      }
+    }
+    if (ast.components.length) {
+      genAssets(ast.components, "component", context);
+      if (ast.directives.length || ast.temps > 0) {
+        newline();
+      }
+    }
+    if (ast.directives.length) {
+      genAssets(ast.directives, "directive", context);
+      if (ast.temps > 0) {
+        newline();
+      }
+    }
+    if (ast.temps > 0) {
+      push(`let `);
+      for (let i = 0; i < ast.temps; i++) {
+        push(`${i > 0 ? `, ` : ``}_temp${i}`);
+      }
+    }
+    if (ast.components.length || ast.directives.length || ast.temps) {
+      push(`
+`, 0 /* Start */);
+      newline();
+    }
+    if (!ssr) {
+      push(`return `);
+    }
+    if (ast.codegenNode) {
+      genNode(ast.codegenNode, context);
+    } else {
+      push(`null`);
+    }
+    if (useWithBlock) {
+      deindent();
+      push(`}`);
+    }
+    deindent();
+    push(`}`);
+    return {
+      ast,
+      code: context.code,
+      preamble: ``,
+      map: context.map ? context.map.toJSON() : void 0
+    };
+  }
+  function genFunctionPreamble(ast, context) {
+    const {
+      ssr,
+      prefixIdentifiers,
+      push,
+      newline,
+      runtimeModuleName,
+      runtimeGlobalName,
+      ssrRuntimeModuleName
+    } = context;
+    const VueBinding = runtimeGlobalName;
+    const helpers = Array.from(ast.helpers);
+    if (helpers.length > 0) {
+      {
+        push(`const _Vue = ${VueBinding}
+`, -1 /* End */);
+        if (ast.hoists.length) {
+          const staticHelpers = [
+            CREATE_VNODE,
+            CREATE_ELEMENT_VNODE,
+            CREATE_COMMENT,
+            CREATE_TEXT,
+            CREATE_STATIC
+          ].filter((helper) => helpers.includes(helper)).map(aliasHelper).join(", ");
+          push(`const { ${staticHelpers} } = _Vue
+`, -1 /* End */);
+        }
+      }
+    }
+    genHoists(ast.hoists, context);
+    newline();
+    push(`return `);
+  }
+  function genAssets(assets, type, { helper, push, newline, isTS }) {
+    const resolver = helper(
+      type === "component" ? RESOLVE_COMPONENT : RESOLVE_DIRECTIVE
+    );
+    for (let i = 0; i < assets.length; i++) {
+      let id = assets[i];
+      const maybeSelfReference = id.endsWith("__self");
+      if (maybeSelfReference) {
+        id = id.slice(0, -6);
+      }
+      push(
+        `const ${toValidAssetId(id, type)} = ${resolver}(${JSON.stringify(id)}${maybeSelfReference ? `, true` : ``})${isTS ? `!` : ``}`
+      );
+      if (i < assets.length - 1) {
+        newline();
+      }
+    }
+  }
+  function genHoists(hoists, context) {
+    if (!hoists.length) {
+      return;
+    }
+    context.pure = true;
+    const { push, newline, helper, scopeId, mode } = context;
+    newline();
+    for (let i = 0; i < hoists.length; i++) {
+      const exp = hoists[i];
+      if (exp) {
+        push(
+          `const _hoisted_${i + 1} = ${``}`
+        );
+        genNode(exp, context);
+        newline();
+      }
+    }
+    context.pure = false;
+  }
+  function isText(n) {
+    return isString(n) || n.type === 4 || n.type === 2 || n.type === 5 || n.type === 8;
+  }
+  function genNodeListAsArray(nodes, context) {
+    const multilines = nodes.length > 3 || nodes.some((n) => isArray(n) || !isText(n));
+    context.push(`[`);
+    multilines && context.indent();
+    genNodeList(nodes, context, multilines);
+    multilines && context.deindent();
+    context.push(`]`);
+  }
+  function genNodeList(nodes, context, multilines = false, comma = true) {
+    const { push, newline } = context;
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (isString(node)) {
+        push(node, -3 /* Unknown */);
+      } else if (isArray(node)) {
+        genNodeListAsArray(node, context);
+      } else {
+        genNode(node, context);
+      }
+      if (i < nodes.length - 1) {
+        if (multilines) {
+          comma && push(",");
+          newline();
+        } else {
+          comma && push(", ");
+        }
+      }
+    }
+  }
+  function genNode(node, context) {
+    if (isString(node)) {
+      context.push(node, -3 /* Unknown */);
+      return;
+    }
+    if (isSymbol(node)) {
+      context.push(context.helper(node));
+      return;
+    }
+    switch (node.type) {
+      case 1:
+      case 9:
+      case 11:
+        assert(
+          node.codegenNode != null,
+          `Codegen node is missing for element/if/for node. Apply appropriate transforms first.`
+        );
+        genNode(node.codegenNode, context);
+        break;
+      case 2:
+        genText(node, context);
+        break;
+      case 4:
+        genExpression(node, context);
+        break;
+      case 5:
+        genInterpolation(node, context);
+        break;
+      case 12:
+        genNode(node.codegenNode, context);
+        break;
+      case 8:
+        genCompoundExpression(node, context);
+        break;
+      case 3:
+        genComment(node, context);
+        break;
+      case 13:
+        genVNodeCall(node, context);
+        break;
+      case 14:
+        genCallExpression(node, context);
+        break;
+      case 15:
+        genObjectExpression(node, context);
+        break;
+      case 17:
+        genArrayExpression(node, context);
+        break;
+      case 18:
+        genFunctionExpression(node, context);
+        break;
+      case 19:
+        genConditionalExpression(node, context);
+        break;
+      case 20:
+        genCacheExpression(node, context);
+        break;
+      case 21:
+        genNodeList(node.body, context, true, false);
+        break;
+      case 22:
+        break;
+      case 23:
+        break;
+      case 24:
+        break;
+      case 25:
+        break;
+      case 26:
+        break;
+      case 10:
+        break;
+      default:
+        {
+          assert(false, `unhandled codegen node type: ${node.type}`);
+          const exhaustiveCheck = node;
+          return exhaustiveCheck;
+        }
+    }
+  }
+  function genText(node, context) {
+    context.push(JSON.stringify(node.content), -3 /* Unknown */, node);
+  }
+  function genExpression(node, context) {
+    const { content, isStatic } = node;
+    context.push(
+      isStatic ? JSON.stringify(content) : content,
+      -3 /* Unknown */,
+      node
+    );
+  }
+  function genInterpolation(node, context) {
+    const { push, helper, pure } = context;
+    if (pure)
+      push(PURE_ANNOTATION);
+    push(`${helper(TO_DISPLAY_STRING)}(`);
+    genNode(node.content, context);
+    push(`)`);
+  }
+  function genCompoundExpression(node, context) {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (isString(child)) {
+        context.push(child, -3 /* Unknown */);
+      } else {
+        genNode(child, context);
+      }
+    }
+  }
+  function genExpressionAsPropertyKey(node, context) {
+    const { push } = context;
+    if (node.type === 8) {
+      push(`[`);
+      genCompoundExpression(node, context);
+      push(`]`);
+    } else if (node.isStatic) {
+      const text = isSimpleIdentifier(node.content) ? node.content : JSON.stringify(node.content);
+      push(text, -2 /* None */, node);
+    } else {
+      push(`[${node.content}]`, -3 /* Unknown */, node);
+    }
+  }
+  function genComment(node, context) {
+    const { push, helper, pure } = context;
+    if (pure) {
+      push(PURE_ANNOTATION);
+    }
+    push(
+      `${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`,
+      -3 /* Unknown */,
+      node
+    );
+  }
+  function genVNodeCall(node, context) {
+    const { push, helper, pure } = context;
+    const {
+      tag,
+      props,
+      children,
+      patchFlag,
+      dynamicProps,
+      directives,
+      isBlock,
+      disableTracking,
+      isComponent
+    } = node;
+    if (directives) {
+      push(helper(WITH_DIRECTIVES) + `(`);
+    }
+    if (isBlock) {
+      push(`(${helper(OPEN_BLOCK)}(${disableTracking ? `true` : ``}), `);
+    }
+    if (pure) {
+      push(PURE_ANNOTATION);
+    }
+    const callHelper = isBlock ? getVNodeBlockHelper(context.inSSR, isComponent) : getVNodeHelper(context.inSSR, isComponent);
+    push(helper(callHelper) + `(`, -2 /* None */, node);
+    genNodeList(
+      genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
+      context
+    );
+    push(`)`);
+    if (isBlock) {
+      push(`)`);
+    }
+    if (directives) {
+      push(`, `);
+      genNode(directives, context);
+      push(`)`);
+    }
+  }
+  function genNullableArgs(args) {
+    let i = args.length;
+    while (i--) {
+      if (args[i] != null)
+        break;
+    }
+    return args.slice(0, i + 1).map((arg) => arg || `null`);
+  }
+  function genCallExpression(node, context) {
+    const { push, helper, pure } = context;
+    const callee = isString(node.callee) ? node.callee : helper(node.callee);
+    if (pure) {
+      push(PURE_ANNOTATION);
+    }
+    push(callee + `(`, -2 /* None */, node);
+    genNodeList(node.arguments, context);
+    push(`)`);
+  }
+  function genObjectExpression(node, context) {
+    const { push, indent, deindent, newline } = context;
+    const { properties } = node;
+    if (!properties.length) {
+      push(`{}`, -2 /* None */, node);
+      return;
+    }
+    const multilines = properties.length > 1 || properties.some((p) => p.value.type !== 4);
+    push(multilines ? `{` : `{ `);
+    multilines && indent();
+    for (let i = 0; i < properties.length; i++) {
+      const { key, value } = properties[i];
+      genExpressionAsPropertyKey(key, context);
+      push(`: `);
+      genNode(value, context);
+      if (i < properties.length - 1) {
+        push(`,`);
+        newline();
+      }
+    }
+    multilines && deindent();
+    push(multilines ? `}` : ` }`);
+  }
+  function genArrayExpression(node, context) {
+    genNodeListAsArray(node.elements, context);
+  }
+  function genFunctionExpression(node, context) {
+    const { push, indent, deindent } = context;
+    const { params, returns, body, newline, isSlot } = node;
+    if (isSlot) {
+      push(`_${helperNameMap[WITH_CTX]}(`);
+    }
+    push(`(`, -2 /* None */, node);
+    if (isArray(params)) {
+      genNodeList(params, context);
+    } else if (params) {
+      genNode(params, context);
+    }
+    push(`) => `);
+    if (newline || body) {
+      push(`{`);
+      indent();
+    }
+    if (returns) {
+      if (newline) {
+        push(`return `);
+      }
+      if (isArray(returns)) {
+        genNodeListAsArray(returns, context);
+      } else {
+        genNode(returns, context);
+      }
+    } else if (body) {
+      genNode(body, context);
+    }
+    if (newline || body) {
+      deindent();
+      push(`}`);
+    }
+    if (isSlot) {
+      push(`)`);
+    }
+  }
+  function genConditionalExpression(node, context) {
+    const { test, consequent, alternate, newline: needNewline } = node;
+    const { push, indent, deindent, newline } = context;
+    if (test.type === 4) {
+      const needsParens = !isSimpleIdentifier(test.content);
+      needsParens && push(`(`);
+      genExpression(test, context);
+      needsParens && push(`)`);
+    } else {
+      push(`(`);
+      genNode(test, context);
+      push(`)`);
+    }
+    needNewline && indent();
+    context.indentLevel++;
+    needNewline || push(` `);
+    push(`? `);
+    genNode(consequent, context);
+    context.indentLevel--;
+    needNewline && newline();
+    needNewline || push(` `);
+    push(`: `);
+    const isNested = alternate.type === 19;
+    if (!isNested) {
+      context.indentLevel++;
+    }
+    genNode(alternate, context);
+    if (!isNested) {
+      context.indentLevel--;
+    }
+    needNewline && deindent(
+      true
+      /* without newline */
+    );
+  }
+  function genCacheExpression(node, context) {
+    const { push, helper, indent, deindent, newline } = context;
+    push(`_cache[${node.index}] || (`);
+    if (node.isVNode) {
+      indent();
+      push(`${helper(SET_BLOCK_TRACKING)}(-1),`);
+      newline();
+    }
+    push(`_cache[${node.index}] = `);
+    genNode(node.value, context);
+    if (node.isVNode) {
+      push(`,`);
+      newline();
+      push(`${helper(SET_BLOCK_TRACKING)}(1),`);
+      newline();
+      push(`_cache[${node.index}]`);
+      deindent();
+    }
+    push(`)`);
+  }
+
+  const prohibitedKeywordRE = new RegExp(
+    "\\b" + "arguments,await,break,case,catch,class,const,continue,debugger,default,delete,do,else,export,extends,finally,for,function,if,import,let,new,return,super,switch,throw,try,var,void,while,with,yield".split(",").join("\\b|\\b") + "\\b"
+  );
+  const stripStringRE = /'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`(?:[^`\\]|\\.)*\$\{|\}(?:[^`\\]|\\.)*`|`(?:[^`\\]|\\.)*`/g;
+  function validateBrowserExpression(node, context, asParams = false, asRawStatements = false) {
+    const exp = node.content;
+    if (!exp.trim()) {
+      return;
+    }
+    try {
+      new Function(
+        asRawStatements ? ` ${exp} ` : `return ${asParams ? `(${exp}) => {}` : `(${exp})`}`
+      );
+    } catch (e) {
+      let message = e.message;
+      const keywordMatch = exp.replace(stripStringRE, "").match(prohibitedKeywordRE);
+      if (keywordMatch) {
+        message = `avoid using JavaScript keyword as property name: "${keywordMatch[0]}"`;
+      }
+      context.onError(
+        createCompilerError(
+          45,
+          node.loc,
+          void 0,
+          message
+        )
+      );
+    }
+  }
+
+  const transformExpression = (node, context) => {
+    if (node.type === 5) {
+      node.content = processExpression(
+        node.content,
+        context
+      );
+    } else if (node.type === 1) {
+      for (let i = 0; i < node.props.length; i++) {
+        const dir = node.props[i];
+        if (dir.type === 7 && dir.name !== "for") {
+          const exp = dir.exp;
+          const arg = dir.arg;
+          if (exp && exp.type === 4 && !(dir.name === "on" && arg)) {
+            dir.exp = processExpression(
+              exp,
+              context,
+              // slot args must be processed as function params
+              dir.name === "slot"
+            );
+          }
+          if (arg && arg.type === 4 && !arg.isStatic) {
+            dir.arg = processExpression(arg, context);
+          }
+        }
+      }
+    }
+  };
+  function processExpression(node, context, asParams = false, asRawStatements = false, localVars = Object.create(context.identifiers)) {
+    {
+      {
+        validateBrowserExpression(node, context, asParams, asRawStatements);
+      }
+      return node;
+    }
+  }
+
+  const transformIf = createStructuralDirectiveTransform(
+    /^(if|else|else-if)$/,
+    (node, dir, context) => {
+      return processIf(node, dir, context, (ifNode, branch, isRoot) => {
+        const siblings = context.parent.children;
+        let i = siblings.indexOf(ifNode);
+        let key = 0;
+        while (i-- >= 0) {
+          const sibling = siblings[i];
+          if (sibling && sibling.type === 9) {
+            key += sibling.branches.length;
+          }
+        }
+        return () => {
+          if (isRoot) {
+            ifNode.codegenNode = createCodegenNodeForBranch(
+              branch,
+              key,
+              context
+            );
+          } else {
+            const parentCondition = getParentCondition(ifNode.codegenNode);
+            parentCondition.alternate = createCodegenNodeForBranch(
+              branch,
+              key + ifNode.branches.length - 1,
+              context
+            );
+          }
+        };
+      });
+    }
+  );
+  function processIf(node, dir, context, processCodegen) {
+    if (dir.name !== "else" && (!dir.exp || !dir.exp.content.trim())) {
+      const loc = dir.exp ? dir.exp.loc : node.loc;
+      context.onError(
+        createCompilerError(28, dir.loc)
+      );
+      dir.exp = createSimpleExpression(`true`, false, loc);
+    }
+    if (dir.exp) {
+      validateBrowserExpression(dir.exp, context);
+    }
+    if (dir.name === "if") {
+      const branch = createIfBranch(node, dir);
+      const ifNode = {
+        type: 9,
+        loc: node.loc,
+        branches: [branch]
+      };
+      context.replaceNode(ifNode);
+      if (processCodegen) {
+        return processCodegen(ifNode, branch, true);
+      }
+    } else {
+      const siblings = context.parent.children;
+      const comments = [];
+      let i = siblings.indexOf(node);
+      while (i-- >= -1) {
+        const sibling = siblings[i];
+        if (sibling && sibling.type === 3) {
+          context.removeNode(sibling);
+          comments.unshift(sibling);
+          continue;
+        }
+        if (sibling && sibling.type === 2 && !sibling.content.trim().length) {
+          context.removeNode(sibling);
+          continue;
+        }
+        if (sibling && sibling.type === 9) {
+          if (dir.name === "else-if" && sibling.branches[sibling.branches.length - 1].condition === void 0) {
+            context.onError(
+              createCompilerError(30, node.loc)
+            );
+          }
+          context.removeNode();
+          const branch = createIfBranch(node, dir);
+          if (comments.length && // #3619 ignore comments if the v-if is direct child of <transition>
+          !(context.parent && context.parent.type === 1 && (context.parent.tag === "transition" || context.parent.tag === "Transition"))) {
+            branch.children = [...comments, ...branch.children];
+          }
+          {
+            const key = branch.userKey;
+            if (key) {
+              sibling.branches.forEach(({ userKey }) => {
+                if (isSameKey(userKey, key)) {
+                  context.onError(
+                    createCompilerError(
+                      29,
+                      branch.userKey.loc
+                    )
+                  );
+                }
+              });
+            }
+          }
+          sibling.branches.push(branch);
+          const onExit = processCodegen && processCodegen(sibling, branch, false);
+          traverseNode(branch, context);
+          if (onExit)
+            onExit();
+          context.currentNode = null;
+        } else {
+          context.onError(
+            createCompilerError(30, node.loc)
+          );
+        }
+        break;
+      }
+    }
+  }
+  function createIfBranch(node, dir) {
+    const isTemplateIf = node.tagType === 3;
+    return {
+      type: 10,
+      loc: node.loc,
+      condition: dir.name === "else" ? void 0 : dir.exp,
+      children: isTemplateIf && !findDir(node, "for") ? node.children : [node],
+      userKey: findProp(node, `key`),
+      isTemplateIf
+    };
+  }
+  function createCodegenNodeForBranch(branch, keyIndex, context) {
+    if (branch.condition) {
+      return createConditionalExpression(
+        branch.condition,
+        createChildrenCodegenNode(branch, keyIndex, context),
+        // make sure to pass in asBlock: true so that the comment node call
+        // closes the current block.
+        createCallExpression(context.helper(CREATE_COMMENT), [
+          '"v-if"' ,
+          "true"
+        ])
+      );
+    } else {
+      return createChildrenCodegenNode(branch, keyIndex, context);
+    }
+  }
+  function createChildrenCodegenNode(branch, keyIndex, context) {
+    const { helper } = context;
+    const keyProperty = createObjectProperty(
+      `key`,
+      createSimpleExpression(
+        `${keyIndex}`,
+        false,
+        locStub,
+        2
+      )
+    );
+    const { children } = branch;
+    const firstChild = children[0];
+    const needFragmentWrapper = children.length !== 1 || firstChild.type !== 1;
+    if (needFragmentWrapper) {
+      if (children.length === 1 && firstChild.type === 11) {
+        const vnodeCall = firstChild.codegenNode;
+        injectProp(vnodeCall, keyProperty, context);
+        return vnodeCall;
+      } else {
+        let patchFlag = 64;
+        let patchFlagText = PatchFlagNames[64];
+        if (!branch.isTemplateIf && children.filter((c) => c.type !== 3).length === 1) {
+          patchFlag |= 2048;
+          patchFlagText += `, ${PatchFlagNames[2048]}`;
+        }
+        return createVNodeCall(
+          context,
+          helper(FRAGMENT),
+          createObjectExpression([keyProperty]),
+          children,
+          patchFlag + (` /* ${patchFlagText} */` ),
+          void 0,
+          void 0,
+          true,
+          false,
+          false,
+          branch.loc
+        );
+      }
+    } else {
+      const ret = firstChild.codegenNode;
+      const vnodeCall = getMemoedVNodeCall(ret);
+      if (vnodeCall.type === 13) {
+        convertToBlock(vnodeCall, context);
+      }
+      injectProp(vnodeCall, keyProperty, context);
+      return ret;
+    }
+  }
+  function isSameKey(a, b) {
+    if (!a || a.type !== b.type) {
+      return false;
+    }
+    if (a.type === 6) {
+      if (a.value.content !== b.value.content) {
+        return false;
+      }
+    } else {
+      const exp = a.exp;
+      const branchExp = b.exp;
+      if (exp.type !== branchExp.type) {
+        return false;
+      }
+      if (exp.type !== 4 || exp.isStatic !== branchExp.isStatic || exp.content !== branchExp.content) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function getParentCondition(node) {
+    while (true) {
+      if (node.type === 19) {
+        if (node.alternate.type === 19) {
+          node = node.alternate;
+        } else {
+          return node;
+        }
+      } else if (node.type === 20) {
+        node = node.value;
+      }
+    }
+  }
+
+  const transformFor = createStructuralDirectiveTransform(
+    "for",
+    (node, dir, context) => {
+      const { helper, removeHelper } = context;
+      return processFor(node, dir, context, (forNode) => {
+        const renderExp = createCallExpression(helper(RENDER_LIST), [
+          forNode.source
+        ]);
+        const isTemplate = isTemplateNode(node);
+        const memo = findDir(node, "memo");
+        const keyProp = findProp(node, `key`);
+        const keyExp = keyProp && (keyProp.type === 6 ? createSimpleExpression(keyProp.value.content, true) : keyProp.exp);
+        const keyProperty = keyProp ? createObjectProperty(`key`, keyExp) : null;
+        const isStableFragment = forNode.source.type === 4 && forNode.source.constType > 0;
+        const fragmentFlag = isStableFragment ? 64 : keyProp ? 128 : 256;
+        forNode.codegenNode = createVNodeCall(
+          context,
+          helper(FRAGMENT),
+          void 0,
+          renderExp,
+          fragmentFlag + (` /* ${PatchFlagNames[fragmentFlag]} */` ),
+          void 0,
+          void 0,
+          true,
+          !isStableFragment,
+          false,
+          node.loc
+        );
+        return () => {
+          let childBlock;
+          const { children } = forNode;
+          if (isTemplate) {
+            node.children.some((c) => {
+              if (c.type === 1) {
+                const key = findProp(c, "key");
+                if (key) {
+                  context.onError(
+                    createCompilerError(
+                      33,
+                      key.loc
+                    )
+                  );
+                  return true;
+                }
+              }
+            });
+          }
+          const needFragmentWrapper = children.length !== 1 || children[0].type !== 1;
+          const slotOutlet = isSlotOutlet(node) ? node : isTemplate && node.children.length === 1 && isSlotOutlet(node.children[0]) ? node.children[0] : null;
+          if (slotOutlet) {
+            childBlock = slotOutlet.codegenNode;
+            if (isTemplate && keyProperty) {
+              injectProp(childBlock, keyProperty, context);
+            }
+          } else if (needFragmentWrapper) {
+            childBlock = createVNodeCall(
+              context,
+              helper(FRAGMENT),
+              keyProperty ? createObjectExpression([keyProperty]) : void 0,
+              node.children,
+              64 + (` /* ${PatchFlagNames[64]} */` ),
+              void 0,
+              void 0,
+              true,
+              void 0,
+              false
+            );
+          } else {
+            childBlock = children[0].codegenNode;
+            if (isTemplate && keyProperty) {
+              injectProp(childBlock, keyProperty, context);
+            }
+            if (childBlock.isBlock !== !isStableFragment) {
+              if (childBlock.isBlock) {
+                removeHelper(OPEN_BLOCK);
+                removeHelper(
+                  getVNodeBlockHelper(context.inSSR, childBlock.isComponent)
+                );
+              } else {
+                removeHelper(
+                  getVNodeHelper(context.inSSR, childBlock.isComponent)
+                );
+              }
+            }
+            childBlock.isBlock = !isStableFragment;
+            if (childBlock.isBlock) {
+              helper(OPEN_BLOCK);
+              helper(getVNodeBlockHelper(context.inSSR, childBlock.isComponent));
+            } else {
+              helper(getVNodeHelper(context.inSSR, childBlock.isComponent));
+            }
+          }
+          if (memo) {
+            const loop = createFunctionExpression(
+              createForLoopParams(forNode.parseResult, [
+                createSimpleExpression(`_cached`)
+              ])
+            );
+            loop.body = createBlockStatement([
+              createCompoundExpression([`const _memo = (`, memo.exp, `)`]),
+              createCompoundExpression([
+                `if (_cached`,
+                ...keyExp ? [` && _cached.key === `, keyExp] : [],
+                ` && ${context.helperString(
+                IS_MEMO_SAME
+              )}(_cached, _memo)) return _cached`
+              ]),
+              createCompoundExpression([`const _item = `, childBlock]),
+              createSimpleExpression(`_item.memo = _memo`),
+              createSimpleExpression(`return _item`)
+            ]);
+            renderExp.arguments.push(
+              loop,
+              createSimpleExpression(`_cache`),
+              createSimpleExpression(String(context.cached++))
+            );
+          } else {
+            renderExp.arguments.push(
+              createFunctionExpression(
+                createForLoopParams(forNode.parseResult),
+                childBlock,
+                true
+              )
+            );
+          }
+        };
+      });
+    }
+  );
+  function processFor(node, dir, context, processCodegen) {
+    if (!dir.exp) {
+      context.onError(
+        createCompilerError(31, dir.loc)
+      );
+      return;
+    }
+    const parseResult = dir.forParseResult;
+    if (!parseResult) {
+      context.onError(
+        createCompilerError(32, dir.loc)
+      );
+      return;
+    }
+    finalizeForParseResult(parseResult, context);
+    const { addIdentifiers, removeIdentifiers, scopes } = context;
+    const { source, value, key, index } = parseResult;
+    const forNode = {
+      type: 11,
+      loc: dir.loc,
+      source,
+      valueAlias: value,
+      keyAlias: key,
+      objectIndexAlias: index,
+      parseResult,
+      children: isTemplateNode(node) ? node.children : [node]
+    };
+    context.replaceNode(forNode);
+    scopes.vFor++;
+    const onExit = processCodegen && processCodegen(forNode);
+    return () => {
+      scopes.vFor--;
+      if (onExit)
+        onExit();
+    };
+  }
+  function finalizeForParseResult(result, context) {
+    if (result.finalized)
+      return;
+    {
+      validateBrowserExpression(result.source, context);
+      if (result.key) {
+        validateBrowserExpression(
+          result.key,
+          context,
+          true
+        );
+      }
+      if (result.index) {
+        validateBrowserExpression(
+          result.index,
+          context,
+          true
+        );
+      }
+      if (result.value) {
+        validateBrowserExpression(
+          result.value,
+          context,
+          true
+        );
+      }
+    }
+    result.finalized = true;
+  }
+  function createForLoopParams({ value, key, index }, memoArgs = []) {
+    return createParamsList([value, key, index, ...memoArgs]);
+  }
+  function createParamsList(args) {
+    let i = args.length;
+    while (i--) {
+      if (args[i])
+        break;
+    }
+    return args.slice(0, i + 1).map((arg, i2) => arg || createSimpleExpression(`_`.repeat(i2 + 1), false));
+  }
+
+  const defaultFallback = createSimpleExpression(`undefined`, false);
+  const trackSlotScopes = (node, context) => {
+    if (node.type === 1 && (node.tagType === 1 || node.tagType === 3)) {
+      const vSlot = findDir(node, "slot");
+      if (vSlot) {
+        vSlot.exp;
+        context.scopes.vSlot++;
+        return () => {
+          context.scopes.vSlot--;
+        };
+      }
+    }
+  };
+  const buildClientSlotFn = (props, _vForExp, children, loc) => createFunctionExpression(
+    props,
+    children,
+    false,
+    true,
+    children.length ? children[0].loc : loc
+  );
+  function buildSlots(node, context, buildSlotFn = buildClientSlotFn) {
+    context.helper(WITH_CTX);
+    const { children, loc } = node;
+    const slotsProperties = [];
+    const dynamicSlots = [];
+    let hasDynamicSlots = context.scopes.vSlot > 0 || context.scopes.vFor > 0;
+    const onComponentSlot = findDir(node, "slot", true);
+    if (onComponentSlot) {
+      const { arg, exp } = onComponentSlot;
+      if (arg && !isStaticExp(arg)) {
+        hasDynamicSlots = true;
+      }
+      slotsProperties.push(
+        createObjectProperty(
+          arg || createSimpleExpression("default", true),
+          buildSlotFn(exp, void 0, children, loc)
+        )
+      );
+    }
+    let hasTemplateSlots = false;
+    let hasNamedDefaultSlot = false;
+    const implicitDefaultChildren = [];
+    const seenSlotNames = /* @__PURE__ */ new Set();
+    let conditionalBranchIndex = 0;
+    for (let i = 0; i < children.length; i++) {
+      const slotElement = children[i];
+      let slotDir;
+      if (!isTemplateNode(slotElement) || !(slotDir = findDir(slotElement, "slot", true))) {
+        if (slotElement.type !== 3) {
+          implicitDefaultChildren.push(slotElement);
+        }
+        continue;
+      }
+      if (onComponentSlot) {
+        context.onError(
+          createCompilerError(37, slotDir.loc)
+        );
+        break;
+      }
+      hasTemplateSlots = true;
+      const { children: slotChildren, loc: slotLoc } = slotElement;
+      const {
+        arg: slotName = createSimpleExpression(`default`, true),
+        exp: slotProps,
+        loc: dirLoc
+      } = slotDir;
+      let staticSlotName;
+      if (isStaticExp(slotName)) {
+        staticSlotName = slotName ? slotName.content : `default`;
+      } else {
+        hasDynamicSlots = true;
+      }
+      const vFor = findDir(slotElement, "for");
+      const slotFunction = buildSlotFn(slotProps, vFor, slotChildren, slotLoc);
+      let vIf;
+      let vElse;
+      if (vIf = findDir(slotElement, "if")) {
+        hasDynamicSlots = true;
+        dynamicSlots.push(
+          createConditionalExpression(
+            vIf.exp,
+            buildDynamicSlot(slotName, slotFunction, conditionalBranchIndex++),
+            defaultFallback
+          )
+        );
+      } else if (vElse = findDir(
+        slotElement,
+        /^else(-if)?$/,
+        true
+        /* allowEmpty */
+      )) {
+        let j = i;
+        let prev;
+        while (j--) {
+          prev = children[j];
+          if (prev.type !== 3) {
+            break;
+          }
+        }
+        if (prev && isTemplateNode(prev) && findDir(prev, "if")) {
+          children.splice(i, 1);
+          i--;
+          let conditional = dynamicSlots[dynamicSlots.length - 1];
+          while (conditional.alternate.type === 19) {
+            conditional = conditional.alternate;
+          }
+          conditional.alternate = vElse.exp ? createConditionalExpression(
+            vElse.exp,
+            buildDynamicSlot(
+              slotName,
+              slotFunction,
+              conditionalBranchIndex++
+            ),
+            defaultFallback
+          ) : buildDynamicSlot(slotName, slotFunction, conditionalBranchIndex++);
+        } else {
+          context.onError(
+            createCompilerError(30, vElse.loc)
+          );
+        }
+      } else if (vFor) {
+        hasDynamicSlots = true;
+        const parseResult = vFor.forParseResult;
+        if (parseResult) {
+          finalizeForParseResult(parseResult, context);
+          dynamicSlots.push(
+            createCallExpression(context.helper(RENDER_LIST), [
+              parseResult.source,
+              createFunctionExpression(
+                createForLoopParams(parseResult),
+                buildDynamicSlot(slotName, slotFunction),
+                true
+              )
+            ])
+          );
+        } else {
+          context.onError(
+            createCompilerError(
+              32,
+              vFor.loc
+            )
+          );
+        }
+      } else {
+        if (staticSlotName) {
+          if (seenSlotNames.has(staticSlotName)) {
+            context.onError(
+              createCompilerError(
+                38,
+                dirLoc
+              )
+            );
+            continue;
+          }
+          seenSlotNames.add(staticSlotName);
+          if (staticSlotName === "default") {
+            hasNamedDefaultSlot = true;
+          }
+        }
+        slotsProperties.push(createObjectProperty(slotName, slotFunction));
+      }
+    }
+    if (!onComponentSlot) {
+      const buildDefaultSlotProperty = (props, children2) => {
+        const fn = buildSlotFn(props, void 0, children2, loc);
+        return createObjectProperty(`default`, fn);
+      };
+      if (!hasTemplateSlots) {
+        slotsProperties.push(buildDefaultSlotProperty(void 0, children));
+      } else if (implicitDefaultChildren.length && // #3766
+      // with whitespace: 'preserve', whitespaces between slots will end up in
+      // implicitDefaultChildren. Ignore if all implicit children are whitespaces.
+      implicitDefaultChildren.some((node2) => isNonWhitespaceContent(node2))) {
+        if (hasNamedDefaultSlot) {
+          context.onError(
+            createCompilerError(
+              39,
+              implicitDefaultChildren[0].loc
+            )
+          );
+        } else {
+          slotsProperties.push(
+            buildDefaultSlotProperty(void 0, implicitDefaultChildren)
+          );
+        }
+      }
+    }
+    const slotFlag = hasDynamicSlots ? 2 : hasForwardedSlots(node.children) ? 3 : 1;
+    let slots = createObjectExpression(
+      slotsProperties.concat(
+        createObjectProperty(
+          `_`,
+          // 2 = compiled but dynamic = can skip normalization, but must run diff
+          // 1 = compiled and static = can skip normalization AND diff as optimized
+          createSimpleExpression(
+            slotFlag + (` /* ${slotFlagsText[slotFlag]} */` ),
+            false
+          )
+        )
+      ),
+      loc
+    );
+    if (dynamicSlots.length) {
+      slots = createCallExpression(context.helper(CREATE_SLOTS), [
+        slots,
+        createArrayExpression(dynamicSlots)
+      ]);
+    }
+    return {
+      slots,
+      hasDynamicSlots
+    };
+  }
+  function buildDynamicSlot(name, fn, index) {
+    const props = [
+      createObjectProperty(`name`, name),
+      createObjectProperty(`fn`, fn)
+    ];
+    if (index != null) {
+      props.push(
+        createObjectProperty(`key`, createSimpleExpression(String(index), true))
+      );
+    }
+    return createObjectExpression(props);
+  }
+  function hasForwardedSlots(children) {
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      switch (child.type) {
+        case 1:
+          if (child.tagType === 2 || hasForwardedSlots(child.children)) {
+            return true;
+          }
+          break;
+        case 9:
+          if (hasForwardedSlots(child.branches))
+            return true;
+          break;
+        case 10:
+        case 11:
+          if (hasForwardedSlots(child.children))
+            return true;
+          break;
+      }
+    }
+    return false;
+  }
+  function isNonWhitespaceContent(node) {
+    if (node.type !== 2 && node.type !== 12)
+      return true;
+    return node.type === 2 ? !!node.content.trim() : isNonWhitespaceContent(node.content);
+  }
+
+  const directiveImportMap = /* @__PURE__ */ new WeakMap();
+  const transformElement = (node, context) => {
+    return function postTransformElement() {
+      node = context.currentNode;
+      if (!(node.type === 1 && (node.tagType === 0 || node.tagType === 1))) {
+        return;
+      }
+      const { tag, props } = node;
+      const isComponent = node.tagType === 1;
+      let vnodeTag = isComponent ? resolveComponentType(node, context) : `"${tag}"`;
+      const isDynamicComponent = isObject(vnodeTag) && vnodeTag.callee === RESOLVE_DYNAMIC_COMPONENT;
+      let vnodeProps;
+      let vnodeChildren;
+      let vnodePatchFlag;
+      let patchFlag = 0;
+      let vnodeDynamicProps;
+      let dynamicPropNames;
+      let vnodeDirectives;
+      let shouldUseBlock = (
+        // dynamic component may resolve to plain elements
+        isDynamicComponent || vnodeTag === TELEPORT || vnodeTag === SUSPENSE || !isComponent && // <svg> and <foreignObject> must be forced into blocks so that block
+        // updates inside get proper isSVG flag at runtime. (#639, #643)
+        // This is technically web-specific, but splitting the logic out of core
+        // leads to too much unnecessary complexity.
+        (tag === "svg" || tag === "foreignObject")
+      );
+      if (props.length > 0) {
+        const propsBuildResult = buildProps(
+          node,
+          context,
+          void 0,
+          isComponent,
+          isDynamicComponent
+        );
+        vnodeProps = propsBuildResult.props;
+        patchFlag = propsBuildResult.patchFlag;
+        dynamicPropNames = propsBuildResult.dynamicPropNames;
+        const directives = propsBuildResult.directives;
+        vnodeDirectives = directives && directives.length ? createArrayExpression(
+          directives.map((dir) => buildDirectiveArgs(dir, context))
+        ) : void 0;
+        if (propsBuildResult.shouldUseBlock) {
+          shouldUseBlock = true;
+        }
+      }
+      if (node.children.length > 0) {
+        if (vnodeTag === KEEP_ALIVE) {
+          shouldUseBlock = true;
+          patchFlag |= 1024;
+          if (node.children.length > 1) {
+            context.onError(
+              createCompilerError(46, {
+                start: node.children[0].loc.start,
+                end: node.children[node.children.length - 1].loc.end,
+                source: ""
+              })
+            );
+          }
+        }
+        const shouldBuildAsSlots = isComponent && // Teleport is not a real component and has dedicated runtime handling
+        vnodeTag !== TELEPORT && // explained above.
+        vnodeTag !== KEEP_ALIVE;
+        if (shouldBuildAsSlots) {
+          const { slots, hasDynamicSlots } = buildSlots(node, context);
+          vnodeChildren = slots;
+          if (hasDynamicSlots) {
+            patchFlag |= 1024;
+          }
+        } else if (node.children.length === 1 && vnodeTag !== TELEPORT) {
+          const child = node.children[0];
+          const type = child.type;
+          const hasDynamicTextChild = type === 5 || type === 8;
+          if (hasDynamicTextChild && getConstantType(child, context) === 0) {
+            patchFlag |= 1;
+          }
+          if (hasDynamicTextChild || type === 2) {
+            vnodeChildren = child;
+          } else {
+            vnodeChildren = node.children;
+          }
+        } else {
+          vnodeChildren = node.children;
+        }
+      }
+      if (patchFlag !== 0) {
+        {
+          if (patchFlag < 0) {
+            vnodePatchFlag = patchFlag + ` /* ${PatchFlagNames[patchFlag]} */`;
+          } else {
+            const flagNames = Object.keys(PatchFlagNames).map(Number).filter((n) => n > 0 && patchFlag & n).map((n) => PatchFlagNames[n]).join(`, `);
+            vnodePatchFlag = patchFlag + ` /* ${flagNames} */`;
+          }
+        }
+        if (dynamicPropNames && dynamicPropNames.length) {
+          vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames);
+        }
+      }
+      node.codegenNode = createVNodeCall(
+        context,
+        vnodeTag,
+        vnodeProps,
+        vnodeChildren,
+        vnodePatchFlag,
+        vnodeDynamicProps,
+        vnodeDirectives,
+        !!shouldUseBlock,
+        false,
+        isComponent,
+        node.loc
+      );
+    };
+  };
+  function resolveComponentType(node, context, ssr = false) {
+    let { tag } = node;
+    const isExplicitDynamic = isComponentTag(tag);
+    const isProp = findProp(node, "is");
+    if (isProp) {
+      if (isExplicitDynamic || false) {
+        const exp = isProp.type === 6 ? isProp.value && createSimpleExpression(isProp.value.content, true) : isProp.exp;
+        if (exp) {
+          return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [
+            exp
+          ]);
+        }
+      } else if (isProp.type === 6 && isProp.value.content.startsWith("vue:")) {
+        tag = isProp.value.content.slice(4);
+      }
+    }
+    const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag);
+    if (builtIn) {
+      if (!ssr)
+        context.helper(builtIn);
+      return builtIn;
+    }
+    context.helper(RESOLVE_COMPONENT);
+    context.components.add(tag);
+    return toValidAssetId(tag, `component`);
+  }
+  function buildProps(node, context, props = node.props, isComponent, isDynamicComponent, ssr = false) {
+    const { tag, loc: elementLoc, children } = node;
+    let properties = [];
+    const mergeArgs = [];
+    const runtimeDirectives = [];
+    const hasChildren = children.length > 0;
+    let shouldUseBlock = false;
+    let patchFlag = 0;
+    let hasRef = false;
+    let hasClassBinding = false;
+    let hasStyleBinding = false;
+    let hasHydrationEventBinding = false;
+    let hasDynamicKeys = false;
+    let hasVnodeHook = false;
+    const dynamicPropNames = [];
+    const pushMergeArg = (arg) => {
+      if (properties.length) {
+        mergeArgs.push(
+          createObjectExpression(dedupeProperties(properties), elementLoc)
+        );
+        properties = [];
+      }
+      if (arg)
+        mergeArgs.push(arg);
+    };
+    const analyzePatchFlag = ({ key, value }) => {
+      if (isStaticExp(key)) {
+        const name = key.content;
+        const isEventHandler = isOn(name);
+        if (isEventHandler && (!isComponent || isDynamicComponent) && // omit the flag for click handlers because hydration gives click
+        // dedicated fast path.
+        name.toLowerCase() !== "onclick" && // omit v-model handlers
+        name !== "onUpdate:modelValue" && // omit onVnodeXXX hooks
+        !isReservedProp(name)) {
+          hasHydrationEventBinding = true;
+        }
+        if (isEventHandler && isReservedProp(name)) {
+          hasVnodeHook = true;
+        }
+        if (isEventHandler && value.type === 14) {
+          value = value.arguments[0];
+        }
+        if (value.type === 20 || (value.type === 4 || value.type === 8) && getConstantType(value, context) > 0) {
+          return;
+        }
+        if (name === "ref") {
+          hasRef = true;
+        } else if (name === "class") {
+          hasClassBinding = true;
+        } else if (name === "style") {
+          hasStyleBinding = true;
+        } else if (name !== "key" && !dynamicPropNames.includes(name)) {
+          dynamicPropNames.push(name);
+        }
+        if (isComponent && (name === "class" || name === "style") && !dynamicPropNames.includes(name)) {
+          dynamicPropNames.push(name);
+        }
+      } else {
+        hasDynamicKeys = true;
+      }
+    };
+    for (let i = 0; i < props.length; i++) {
+      const prop = props[i];
+      if (prop.type === 6) {
+        const { loc, name, nameLoc, value } = prop;
+        let isStatic = true;
+        if (name === "ref") {
+          hasRef = true;
+          if (context.scopes.vFor > 0) {
+            properties.push(
+              createObjectProperty(
+                createSimpleExpression("ref_for", true),
+                createSimpleExpression("true")
+              )
+            );
+          }
+        }
+        if (name === "is" && (isComponentTag(tag) || value && value.content.startsWith("vue:") || false)) {
+          continue;
+        }
+        properties.push(
+          createObjectProperty(
+            createSimpleExpression(name, true, nameLoc),
+            createSimpleExpression(
+              value ? value.content : "",
+              isStatic,
+              value ? value.loc : loc
+            )
+          )
+        );
+      } else {
+        const { name, arg, exp, loc, modifiers } = prop;
+        const isVBind = name === "bind";
+        const isVOn = name === "on";
+        if (name === "slot") {
+          if (!isComponent) {
+            context.onError(
+              createCompilerError(40, loc)
+            );
+          }
+          continue;
+        }
+        if (name === "once" || name === "memo") {
+          continue;
+        }
+        if (name === "is" || isVBind && isStaticArgOf(arg, "is") && (isComponentTag(tag) || false)) {
+          continue;
+        }
+        if (isVOn && ssr) {
+          continue;
+        }
+        if (
+          // #938: elements with dynamic keys should be forced into blocks
+          isVBind && isStaticArgOf(arg, "key") || // inline before-update hooks need to force block so that it is invoked
+          // before children
+          isVOn && hasChildren && isStaticArgOf(arg, "vue:before-update")
+        ) {
+          shouldUseBlock = true;
+        }
+        if (isVBind && isStaticArgOf(arg, "ref") && context.scopes.vFor > 0) {
+          properties.push(
+            createObjectProperty(
+              createSimpleExpression("ref_for", true),
+              createSimpleExpression("true")
+            )
+          );
+        }
+        if (!arg && (isVBind || isVOn)) {
+          hasDynamicKeys = true;
+          if (exp) {
+            if (isVBind) {
+              pushMergeArg();
+              mergeArgs.push(exp);
+            } else {
+              pushMergeArg({
+                type: 14,
+                loc,
+                callee: context.helper(TO_HANDLERS),
+                arguments: isComponent ? [exp] : [exp, `true`]
+              });
+            }
+          } else {
+            context.onError(
+              createCompilerError(
+                isVBind ? 34 : 35,
+                loc
+              )
+            );
+          }
+          continue;
+        }
+        if (isVBind && modifiers.includes("prop")) {
+          patchFlag |= 32;
+        }
+        const directiveTransform = context.directiveTransforms[name];
+        if (directiveTransform) {
+          const { props: props2, needRuntime } = directiveTransform(prop, node, context);
+          !ssr && props2.forEach(analyzePatchFlag);
+          if (isVOn && arg && !isStaticExp(arg)) {
+            pushMergeArg(createObjectExpression(props2, elementLoc));
+          } else {
+            properties.push(...props2);
+          }
+          if (needRuntime) {
+            runtimeDirectives.push(prop);
+            if (isSymbol(needRuntime)) {
+              directiveImportMap.set(prop, needRuntime);
+            }
+          }
+        } else if (!isBuiltInDirective(name)) {
+          runtimeDirectives.push(prop);
+          if (hasChildren) {
+            shouldUseBlock = true;
+          }
+        }
+      }
+    }
+    let propsExpression = void 0;
+    if (mergeArgs.length) {
+      pushMergeArg();
+      if (mergeArgs.length > 1) {
+        propsExpression = createCallExpression(
+          context.helper(MERGE_PROPS),
+          mergeArgs,
+          elementLoc
+        );
+      } else {
+        propsExpression = mergeArgs[0];
+      }
+    } else if (properties.length) {
+      propsExpression = createObjectExpression(
+        dedupeProperties(properties),
+        elementLoc
+      );
+    }
+    if (hasDynamicKeys) {
+      patchFlag |= 16;
+    } else {
+      if (hasClassBinding && !isComponent) {
+        patchFlag |= 2;
+      }
+      if (hasStyleBinding && !isComponent) {
+        patchFlag |= 4;
+      }
+      if (dynamicPropNames.length) {
+        patchFlag |= 8;
+      }
+      if (hasHydrationEventBinding) {
+        patchFlag |= 32;
+      }
+    }
+    if (!shouldUseBlock && (patchFlag === 0 || patchFlag === 32) && (hasRef || hasVnodeHook || runtimeDirectives.length > 0)) {
+      patchFlag |= 512;
+    }
+    if (!context.inSSR && propsExpression) {
+      switch (propsExpression.type) {
+        case 15:
+          let classKeyIndex = -1;
+          let styleKeyIndex = -1;
+          let hasDynamicKey = false;
+          for (let i = 0; i < propsExpression.properties.length; i++) {
+            const key = propsExpression.properties[i].key;
+            if (isStaticExp(key)) {
+              if (key.content === "class") {
+                classKeyIndex = i;
+              } else if (key.content === "style") {
+                styleKeyIndex = i;
+              }
+            } else if (!key.isHandlerKey) {
+              hasDynamicKey = true;
+            }
+          }
+          const classProp = propsExpression.properties[classKeyIndex];
+          const styleProp = propsExpression.properties[styleKeyIndex];
+          if (!hasDynamicKey) {
+            if (classProp && !isStaticExp(classProp.value)) {
+              classProp.value = createCallExpression(
+                context.helper(NORMALIZE_CLASS),
+                [classProp.value]
+              );
+            }
+            if (styleProp && // the static style is compiled into an object,
+            // so use `hasStyleBinding` to ensure that it is a dynamic style binding
+            (hasStyleBinding || styleProp.value.type === 4 && styleProp.value.content.trim()[0] === `[` || // v-bind:style and style both exist,
+            // v-bind:style with static literal object
+            styleProp.value.type === 17)) {
+              styleProp.value = createCallExpression(
+                context.helper(NORMALIZE_STYLE),
+                [styleProp.value]
+              );
+            }
+          } else {
+            propsExpression = createCallExpression(
+              context.helper(NORMALIZE_PROPS),
+              [propsExpression]
+            );
+          }
+          break;
+        case 14:
+          break;
+        default:
+          propsExpression = createCallExpression(
+            context.helper(NORMALIZE_PROPS),
+            [
+              createCallExpression(context.helper(GUARD_REACTIVE_PROPS), [
+                propsExpression
+              ])
+            ]
+          );
+          break;
+      }
+    }
+    return {
+      props: propsExpression,
+      directives: runtimeDirectives,
+      patchFlag,
+      dynamicPropNames,
+      shouldUseBlock
+    };
+  }
+  function dedupeProperties(properties) {
+    const knownProps = /* @__PURE__ */ new Map();
+    const deduped = [];
+    for (let i = 0; i < properties.length; i++) {
+      const prop = properties[i];
+      if (prop.key.type === 8 || !prop.key.isStatic) {
+        deduped.push(prop);
+        continue;
+      }
+      const name = prop.key.content;
+      const existing = knownProps.get(name);
+      if (existing) {
+        if (name === "style" || name === "class" || isOn(name)) {
+          mergeAsArray(existing, prop);
+        }
+      } else {
+        knownProps.set(name, prop);
+        deduped.push(prop);
+      }
+    }
+    return deduped;
+  }
+  function mergeAsArray(existing, incoming) {
+    if (existing.value.type === 17) {
+      existing.value.elements.push(incoming.value);
+    } else {
+      existing.value = createArrayExpression(
+        [existing.value, incoming.value],
+        existing.loc
+      );
+    }
+  }
+  function buildDirectiveArgs(dir, context) {
+    const dirArgs = [];
+    const runtime = directiveImportMap.get(dir);
+    if (runtime) {
+      dirArgs.push(context.helperString(runtime));
+    } else {
+      {
+        context.helper(RESOLVE_DIRECTIVE);
+        context.directives.add(dir.name);
+        dirArgs.push(toValidAssetId(dir.name, `directive`));
+      }
+    }
+    const { loc } = dir;
+    if (dir.exp)
+      dirArgs.push(dir.exp);
+    if (dir.arg) {
+      if (!dir.exp) {
+        dirArgs.push(`void 0`);
+      }
+      dirArgs.push(dir.arg);
+    }
+    if (Object.keys(dir.modifiers).length) {
+      if (!dir.arg) {
+        if (!dir.exp) {
+          dirArgs.push(`void 0`);
+        }
+        dirArgs.push(`void 0`);
+      }
+      const trueExpression = createSimpleExpression(`true`, false, loc);
+      dirArgs.push(
+        createObjectExpression(
+          dir.modifiers.map(
+            (modifier) => createObjectProperty(modifier, trueExpression)
+          ),
+          loc
+        )
+      );
+    }
+    return createArrayExpression(dirArgs, dir.loc);
+  }
+  function stringifyDynamicPropNames(props) {
+    let propsNamesString = `[`;
+    for (let i = 0, l = props.length; i < l; i++) {
+      propsNamesString += JSON.stringify(props[i]);
+      if (i < l - 1)
+        propsNamesString += ", ";
+    }
+    return propsNamesString + `]`;
+  }
+  function isComponentTag(tag) {
+    return tag === "component" || tag === "Component";
+  }
+
+  const transformSlotOutlet = (node, context) => {
+    if (isSlotOutlet(node)) {
+      const { children, loc } = node;
+      const { slotName, slotProps } = processSlotOutlet(node, context);
+      const slotArgs = [
+        context.prefixIdentifiers ? `_ctx.$slots` : `$slots`,
+        slotName,
+        "{}",
+        "undefined",
+        "true"
+      ];
+      let expectedLen = 2;
+      if (slotProps) {
+        slotArgs[2] = slotProps;
+        expectedLen = 3;
+      }
+      if (children.length) {
+        slotArgs[3] = createFunctionExpression([], children, false, false, loc);
+        expectedLen = 4;
+      }
+      if (context.scopeId && !context.slotted) {
+        expectedLen = 5;
+      }
+      slotArgs.splice(expectedLen);
+      node.codegenNode = createCallExpression(
+        context.helper(RENDER_SLOT),
+        slotArgs,
+        loc
+      );
+    }
+  };
+  function processSlotOutlet(node, context) {
+    let slotName = `"default"`;
+    let slotProps = void 0;
+    const nonNameProps = [];
+    for (let i = 0; i < node.props.length; i++) {
+      const p = node.props[i];
+      if (p.type === 6) {
+        if (p.value) {
+          if (p.name === "name") {
+            slotName = JSON.stringify(p.value.content);
+          } else {
+            p.name = camelize(p.name);
+            nonNameProps.push(p);
+          }
+        }
+      } else {
+        if (p.name === "bind" && isStaticArgOf(p.arg, "name")) {
+          if (p.exp) {
+            slotName = p.exp;
+          } else if (p.arg && p.arg.type === 4) {
+            const name = camelize(p.arg.content);
+            slotName = p.exp = createSimpleExpression(name, false, p.arg.loc);
+          }
+        } else {
+          if (p.name === "bind" && p.arg && isStaticExp(p.arg)) {
+            p.arg.content = camelize(p.arg.content);
+          }
+          nonNameProps.push(p);
+        }
+      }
+    }
+    if (nonNameProps.length > 0) {
+      const { props, directives } = buildProps(
+        node,
+        context,
+        nonNameProps,
+        false,
+        false
+      );
+      slotProps = props;
+      if (directives.length) {
+        context.onError(
+          createCompilerError(
+            36,
+            directives[0].loc
+          )
+        );
+      }
+    }
+    return {
+      slotName,
+      slotProps
+    };
+  }
+
+  const fnExpRE = /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/;
+  const transformOn$1 = (dir, node, context, augmentor) => {
+    const { loc, modifiers, arg } = dir;
+    if (!dir.exp && !modifiers.length) {
+      context.onError(createCompilerError(35, loc));
+    }
+    let eventName;
+    if (arg.type === 4) {
+      if (arg.isStatic) {
+        let rawName = arg.content;
+        if (rawName.startsWith("vnode")) {
+          context.onError(createCompilerError(51, arg.loc));
+        }
+        if (rawName.startsWith("vue:")) {
+          rawName = `vnode-${rawName.slice(4)}`;
+        }
+        const eventString = node.tagType !== 0 || rawName.startsWith("vnode") || !/[A-Z]/.test(rawName) ? (
+          // for non-element and vnode lifecycle event listeners, auto convert
+          // it to camelCase. See issue #2249
+          toHandlerKey(camelize(rawName))
+        ) : (
+          // preserve case for plain element listeners that have uppercase
+          // letters, as these may be custom elements' custom events
+          `on:${rawName}`
+        );
+        eventName = createSimpleExpression(eventString, true, arg.loc);
+      } else {
+        eventName = createCompoundExpression([
+          `${context.helperString(TO_HANDLER_KEY)}(`,
+          arg,
+          `)`
+        ]);
+      }
+    } else {
+      eventName = arg;
+      eventName.children.unshift(`${context.helperString(TO_HANDLER_KEY)}(`);
+      eventName.children.push(`)`);
+    }
+    let exp = dir.exp;
+    if (exp && !exp.content.trim()) {
+      exp = void 0;
+    }
+    let shouldCache = context.cacheHandlers && !exp && !context.inVOnce;
+    if (exp) {
+      const isMemberExp = isMemberExpression(exp.content);
+      const isInlineStatement = !(isMemberExp || fnExpRE.test(exp.content));
+      const hasMultipleStatements = exp.content.includes(`;`);
+      {
+        validateBrowserExpression(
+          exp,
+          context,
+          false,
+          hasMultipleStatements
+        );
+      }
+      if (isInlineStatement || shouldCache && isMemberExp) {
+        exp = createCompoundExpression([
+          `${isInlineStatement ? `$event` : `${``}(...args)`} => ${hasMultipleStatements ? `{` : `(`}`,
+          exp,
+          hasMultipleStatements ? `}` : `)`
+        ]);
+      }
+    }
+    let ret = {
+      props: [
+        createObjectProperty(
+          eventName,
+          exp || createSimpleExpression(`() => {}`, false, loc)
+        )
+      ]
+    };
+    if (augmentor) {
+      ret = augmentor(ret);
+    }
+    if (shouldCache) {
+      ret.props[0].value = context.cache(ret.props[0].value);
+    }
+    ret.props.forEach((p) => p.key.isHandlerKey = true);
+    return ret;
+  };
+
+  const transformBind = (dir, _node, context) => {
+    const { modifiers, loc } = dir;
+    const arg = dir.arg;
+    let { exp } = dir;
+    if (exp && exp.type === 4 && !exp.content.trim()) {
+      {
+        exp = void 0;
+      }
+    }
+    if (!exp) {
+      if (arg.type !== 4 || !arg.isStatic) {
+        context.onError(
+          createCompilerError(
+            52,
+            arg.loc
+          )
+        );
+        return {
+          props: [
+            createObjectProperty(arg, createSimpleExpression("", true, loc))
+          ]
+        };
+      }
+      const propName = camelize(arg.content);
+      exp = dir.exp = createSimpleExpression(propName, false, arg.loc);
+    }
+    if (arg.type !== 4) {
+      arg.children.unshift(`(`);
+      arg.children.push(`) || ""`);
+    } else if (!arg.isStatic) {
+      arg.content = `${arg.content} || ""`;
+    }
+    if (modifiers.includes("camel")) {
+      if (arg.type === 4) {
+        if (arg.isStatic) {
+          arg.content = camelize(arg.content);
+        } else {
+          arg.content = `${context.helperString(CAMELIZE)}(${arg.content})`;
+        }
+      } else {
+        arg.children.unshift(`${context.helperString(CAMELIZE)}(`);
+        arg.children.push(`)`);
+      }
+    }
+    if (!context.inSSR) {
+      if (modifiers.includes("prop")) {
+        injectPrefix(arg, ".");
+      }
+      if (modifiers.includes("attr")) {
+        injectPrefix(arg, "^");
+      }
+    }
+    return {
+      props: [createObjectProperty(arg, exp)]
+    };
+  };
+  const injectPrefix = (arg, prefix) => {
+    if (arg.type === 4) {
+      if (arg.isStatic) {
+        arg.content = prefix + arg.content;
+      } else {
+        arg.content = `\`${prefix}\${${arg.content}}\``;
+      }
+    } else {
+      arg.children.unshift(`'${prefix}' + (`);
+      arg.children.push(`)`);
+    }
+  };
+
+  const transformText = (node, context) => {
+    if (node.type === 0 || node.type === 1 || node.type === 11 || node.type === 10) {
+      return () => {
+        const children = node.children;
+        let currentContainer = void 0;
+        let hasText = false;
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i];
+          if (isText$1(child)) {
+            hasText = true;
+            for (let j = i + 1; j < children.length; j++) {
+              const next = children[j];
+              if (isText$1(next)) {
+                if (!currentContainer) {
+                  currentContainer = children[i] = createCompoundExpression(
+                    [child],
+                    child.loc
+                  );
+                }
+                currentContainer.children.push(` + `, next);
+                children.splice(j, 1);
+                j--;
+              } else {
+                currentContainer = void 0;
+                break;
+              }
+            }
+          }
+        }
+        if (!hasText || // if this is a plain element with a single text child, leave it
+        // as-is since the runtime has dedicated fast path for this by directly
+        // setting textContent of the element.
+        // for component root it's always normalized anyway.
+        children.length === 1 && (node.type === 0 || node.type === 1 && node.tagType === 0 && // #3756
+        // custom directives can potentially add DOM elements arbitrarily,
+        // we need to avoid setting textContent of the element at runtime
+        // to avoid accidentally overwriting the DOM elements added
+        // by the user through custom directives.
+        !node.props.find(
+          (p) => p.type === 7 && !context.directiveTransforms[p.name]
+        ) && // in compat mode, <template> tags with no special directives
+        // will be rendered as a fragment so its children must be
+        // converted into vnodes.
+        true)) {
+          return;
+        }
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i];
+          if (isText$1(child) || child.type === 8) {
+            const callArgs = [];
+            if (child.type !== 2 || child.content !== " ") {
+              callArgs.push(child);
+            }
+            if (!context.ssr && getConstantType(child, context) === 0) {
+              callArgs.push(
+                1 + (` /* ${PatchFlagNames[1]} */` )
+              );
+            }
+            children[i] = {
+              type: 12,
+              content: child,
+              loc: child.loc,
+              codegenNode: createCallExpression(
+                context.helper(CREATE_TEXT),
+                callArgs
+              )
+            };
+          }
+        }
+      };
+    }
+  };
+
+  const seen$1 = /* @__PURE__ */ new WeakSet();
+  const transformOnce = (node, context) => {
+    if (node.type === 1 && findDir(node, "once", true)) {
+      if (seen$1.has(node) || context.inVOnce || context.inSSR) {
+        return;
+      }
+      seen$1.add(node);
+      context.inVOnce = true;
+      context.helper(SET_BLOCK_TRACKING);
+      return () => {
+        context.inVOnce = false;
+        const cur = context.currentNode;
+        if (cur.codegenNode) {
+          cur.codegenNode = context.cache(
+            cur.codegenNode,
+            true
+            /* isVNode */
+          );
+        }
+      };
+    }
+  };
+
+  const transformModel$1 = (dir, node, context) => {
+    const { exp, arg } = dir;
+    if (!exp) {
+      context.onError(
+        createCompilerError(41, dir.loc)
+      );
+      return createTransformProps();
+    }
+    const rawExp = exp.loc.source;
+    const expString = exp.type === 4 ? exp.content : rawExp;
+    const bindingType = context.bindingMetadata[rawExp];
+    if (bindingType === "props" || bindingType === "props-aliased") {
+      context.onError(createCompilerError(44, exp.loc));
+      return createTransformProps();
+    }
+    const maybeRef = false;
+    if (!expString.trim() || !isMemberExpression(expString) && !maybeRef) {
+      context.onError(
+        createCompilerError(42, exp.loc)
+      );
+      return createTransformProps();
+    }
+    const propName = arg ? arg : createSimpleExpression("modelValue", true);
+    const eventName = arg ? isStaticExp(arg) ? `onUpdate:${camelize(arg.content)}` : createCompoundExpression(['"onUpdate:" + ', arg]) : `onUpdate:modelValue`;
+    let assignmentExp;
+    const eventArg = context.isTS ? `($event: any)` : `$event`;
+    {
+      assignmentExp = createCompoundExpression([
+        `${eventArg} => ((`,
+        exp,
+        `) = $event)`
+      ]);
+    }
+    const props = [
+      // modelValue: foo
+      createObjectProperty(propName, dir.exp),
+      // "onUpdate:modelValue": $event => (foo = $event)
+      createObjectProperty(eventName, assignmentExp)
+    ];
+    if (dir.modifiers.length && node.tagType === 1) {
+      const modifiers = dir.modifiers.map((m) => (isSimpleIdentifier(m) ? m : JSON.stringify(m)) + `: true`).join(`, `);
+      const modifiersKey = arg ? isStaticExp(arg) ? `${arg.content}Modifiers` : createCompoundExpression([arg, ' + "Modifiers"']) : `modelModifiers`;
+      props.push(
+        createObjectProperty(
+          modifiersKey,
+          createSimpleExpression(
+            `{ ${modifiers} }`,
+            false,
+            dir.loc,
+            2
+          )
+        )
+      );
+    }
+    return createTransformProps(props);
+  };
+  function createTransformProps(props = []) {
+    return { props };
+  }
+
+  const seen = /* @__PURE__ */ new WeakSet();
+  const transformMemo = (node, context) => {
+    if (node.type === 1) {
+      const dir = findDir(node, "memo");
+      if (!dir || seen.has(node)) {
+        return;
+      }
+      seen.add(node);
+      return () => {
+        const codegenNode = node.codegenNode || context.currentNode.codegenNode;
+        if (codegenNode && codegenNode.type === 13) {
+          if (node.tagType !== 1) {
+            convertToBlock(codegenNode, context);
+          }
+          node.codegenNode = createCallExpression(context.helper(WITH_MEMO), [
+            dir.exp,
+            createFunctionExpression(void 0, codegenNode),
+            `_cache`,
+            String(context.cached++)
+          ]);
+        }
+      };
+    }
+  };
+
+  function getBaseTransformPreset(prefixIdentifiers) {
+    return [
+      [
+        transformOnce,
+        transformIf,
+        transformMemo,
+        transformFor,
+        ...[],
+        ...[transformExpression] ,
+        transformSlotOutlet,
+        transformElement,
+        trackSlotScopes,
+        transformText
+      ],
+      {
+        on: transformOn$1,
+        bind: transformBind,
+        model: transformModel$1
+      }
+    ];
+  }
+  function baseCompile(source, options = {}) {
+    const onError = options.onError || defaultOnError;
+    const isModuleMode = options.mode === "module";
+    {
+      if (options.prefixIdentifiers === true) {
+        onError(createCompilerError(47));
+      } else if (isModuleMode) {
+        onError(createCompilerError(48));
+      }
+    }
+    const prefixIdentifiers = false;
+    if (options.cacheHandlers) {
+      onError(createCompilerError(49));
+    }
+    if (options.scopeId && !isModuleMode) {
+      onError(createCompilerError(50));
+    }
+    const resolvedOptions = extend({}, options, {
+      prefixIdentifiers
+    });
+    const ast = isString(source) ? baseParse(source, resolvedOptions) : source;
+    const [nodeTransforms, directiveTransforms] = getBaseTransformPreset();
+    transform(
+      ast,
+      extend({}, resolvedOptions, {
+        nodeTransforms: [
+          ...nodeTransforms,
+          ...options.nodeTransforms || []
+          // user transforms
+        ],
+        directiveTransforms: extend(
+          {},
+          directiveTransforms,
+          options.directiveTransforms || {}
+          // user transforms
+        )
+      })
+    );
+    return generate(ast, resolvedOptions);
+  }
+
+  const noopDirectiveTransform = () => ({ props: [] });
+
+  const V_MODEL_RADIO = Symbol(`vModelRadio` );
+  const V_MODEL_CHECKBOX = Symbol(`vModelCheckbox` );
+  const V_MODEL_TEXT = Symbol(`vModelText` );
+  const V_MODEL_SELECT = Symbol(`vModelSelect` );
+  const V_MODEL_DYNAMIC = Symbol(`vModelDynamic` );
+  const V_ON_WITH_MODIFIERS = Symbol(`vOnModifiersGuard` );
+  const V_ON_WITH_KEYS = Symbol(`vOnKeysGuard` );
+  const V_SHOW = Symbol(`vShow` );
+  const TRANSITION = Symbol(`Transition` );
+  const TRANSITION_GROUP = Symbol(`TransitionGroup` );
+  registerRuntimeHelpers({
+    [V_MODEL_RADIO]: `vModelRadio`,
+    [V_MODEL_CHECKBOX]: `vModelCheckbox`,
+    [V_MODEL_TEXT]: `vModelText`,
+    [V_MODEL_SELECT]: `vModelSelect`,
+    [V_MODEL_DYNAMIC]: `vModelDynamic`,
+    [V_ON_WITH_MODIFIERS]: `withModifiers`,
+    [V_ON_WITH_KEYS]: `withKeys`,
+    [V_SHOW]: `vShow`,
+    [TRANSITION]: `Transition`,
+    [TRANSITION_GROUP]: `TransitionGroup`
+  });
+
+  let decoder;
+  function decodeHtmlBrowser(raw, asAttr = false) {
+    if (!decoder) {
+      decoder = document.createElement("div");
+    }
+    if (asAttr) {
+      decoder.innerHTML = `<div foo="${raw.replace(/"/g, "&quot;")}">`;
+      return decoder.children[0].getAttribute("foo");
+    } else {
+      decoder.innerHTML = raw;
+      return decoder.textContent;
+    }
+  }
+
+  const parserOptions = {
+    parseMode: "html",
+    isVoidTag,
+    isNativeTag: (tag) => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
+    isPreTag: (tag) => tag === "pre",
+    decodeEntities: decodeHtmlBrowser ,
+    isBuiltInComponent: (tag) => {
+      if (tag === "Transition" || tag === "transition") {
+        return TRANSITION;
+      } else if (tag === "TransitionGroup" || tag === "transition-group") {
+        return TRANSITION_GROUP;
+      }
+    },
+    // https://html.spec.whatwg.org/multipage/parsing.html#tree-construction-dispatcher
+    getNamespace(tag, parent, rootNamespace) {
+      let ns = parent ? parent.ns : rootNamespace;
+      if (parent && ns === 2) {
+        if (parent.tag === "annotation-xml") {
+          if (tag === "svg") {
+            return 1;
+          }
+          if (parent.props.some(
+            (a) => a.type === 6 && a.name === "encoding" && a.value != null && (a.value.content === "text/html" || a.value.content === "application/xhtml+xml")
+          )) {
+            ns = 0;
+          }
+        } else if (/^m(?:[ions]|text)$/.test(parent.tag) && tag !== "mglyph" && tag !== "malignmark") {
+          ns = 0;
+        }
+      } else if (parent && ns === 1) {
+        if (parent.tag === "foreignObject" || parent.tag === "desc" || parent.tag === "title") {
+          ns = 0;
+        }
+      }
+      if (ns === 0) {
+        if (tag === "svg") {
+          return 1;
+        }
+        if (tag === "math") {
+          return 2;
+        }
+      }
+      return ns;
+    }
+  };
+
+  const transformStyle = (node) => {
+    if (node.type === 1) {
+      node.props.forEach((p, i) => {
+        if (p.type === 6 && p.name === "style" && p.value) {
+          node.props[i] = {
+            type: 7,
+            name: `bind`,
+            arg: createSimpleExpression(`style`, true, p.loc),
+            exp: parseInlineCSS(p.value.content, p.loc),
+            modifiers: [],
+            loc: p.loc
+          };
+        }
+      });
+    }
+  };
+  const parseInlineCSS = (cssText, loc) => {
+    const normalized = parseStringStyle(cssText);
+    return createSimpleExpression(
+      JSON.stringify(normalized),
+      false,
+      loc,
+      3
+    );
+  };
+
+  function createDOMCompilerError(code, loc) {
+    return createCompilerError(
+      code,
+      loc,
+      DOMErrorMessages 
+    );
+  }
+  const DOMErrorMessages = {
+    [53]: `v-html is missing expression.`,
+    [54]: `v-html will override element children.`,
+    [55]: `v-text is missing expression.`,
+    [56]: `v-text will override element children.`,
+    [57]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
+    [58]: `v-model argument is not supported on plain elements.`,
+    [59]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
+    [60]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
+    [61]: `v-show is missing expression.`,
+    [62]: `<Transition> expects exactly one child element or component.`,
+    [63]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
+  };
+
+  const transformVHtml = (dir, node, context) => {
+    const { exp, loc } = dir;
+    if (!exp) {
+      context.onError(
+        createDOMCompilerError(53, loc)
+      );
+    }
+    if (node.children.length) {
+      context.onError(
+        createDOMCompilerError(54, loc)
+      );
+      node.children.length = 0;
+    }
+    return {
+      props: [
+        createObjectProperty(
+          createSimpleExpression(`innerHTML`, true, loc),
+          exp || createSimpleExpression("", true)
+        )
+      ]
+    };
+  };
+
+  const transformVText = (dir, node, context) => {
+    const { exp, loc } = dir;
+    if (!exp) {
+      context.onError(
+        createDOMCompilerError(55, loc)
+      );
+    }
+    if (node.children.length) {
+      context.onError(
+        createDOMCompilerError(56, loc)
+      );
+      node.children.length = 0;
+    }
+    return {
+      props: [
+        createObjectProperty(
+          createSimpleExpression(`textContent`, true),
+          exp ? getConstantType(exp, context) > 0 ? exp : createCallExpression(
+            context.helperString(TO_DISPLAY_STRING),
+            [exp],
+            loc
+          ) : createSimpleExpression("", true)
+        )
+      ]
+    };
+  };
+
+  const transformModel = (dir, node, context) => {
+    const baseResult = transformModel$1(dir, node, context);
+    if (!baseResult.props.length || node.tagType === 1) {
+      return baseResult;
+    }
+    if (dir.arg) {
+      context.onError(
+        createDOMCompilerError(
+          58,
+          dir.arg.loc
+        )
+      );
+    }
+    function checkDuplicatedValue() {
+      const value = findDir(node, "bind");
+      if (value && isStaticArgOf(value.arg, "value")) {
+        context.onError(
+          createDOMCompilerError(
+            60,
+            value.loc
+          )
+        );
+      }
+    }
+    const { tag } = node;
+    const isCustomElement = context.isCustomElement(tag);
+    if (tag === "input" || tag === "textarea" || tag === "select" || isCustomElement) {
+      let directiveToUse = V_MODEL_TEXT;
+      let isInvalidType = false;
+      if (tag === "input" || isCustomElement) {
+        const type = findProp(node, `type`);
+        if (type) {
+          if (type.type === 7) {
+            directiveToUse = V_MODEL_DYNAMIC;
+          } else if (type.value) {
+            switch (type.value.content) {
+              case "radio":
+                directiveToUse = V_MODEL_RADIO;
+                break;
+              case "checkbox":
+                directiveToUse = V_MODEL_CHECKBOX;
+                break;
+              case "file":
+                isInvalidType = true;
+                context.onError(
+                  createDOMCompilerError(
+                    59,
+                    dir.loc
+                  )
+                );
+                break;
+              default:
+                checkDuplicatedValue();
+                break;
+            }
+          }
+        } else if (hasDynamicKeyVBind(node)) {
+          directiveToUse = V_MODEL_DYNAMIC;
+        } else {
+          checkDuplicatedValue();
+        }
+      } else if (tag === "select") {
+        directiveToUse = V_MODEL_SELECT;
+      } else {
+        checkDuplicatedValue();
+      }
+      if (!isInvalidType) {
+        baseResult.needRuntime = context.helper(directiveToUse);
+      }
+    } else {
+      context.onError(
+        createDOMCompilerError(
+          57,
+          dir.loc
+        )
+      );
+    }
+    baseResult.props = baseResult.props.filter(
+      (p) => !(p.key.type === 4 && p.key.content === "modelValue")
+    );
+    return baseResult;
+  };
+
+  const isEventOptionModifier = /* @__PURE__ */ makeMap(`passive,once,capture`);
+  const isNonKeyModifier = /* @__PURE__ */ makeMap(
+    // event propagation management
+    `stop,prevent,self,ctrl,shift,alt,meta,exact,middle`
+  );
+  const maybeKeyModifier = /* @__PURE__ */ makeMap("left,right");
+  const isKeyboardEvent = /* @__PURE__ */ makeMap(
+    `onkeyup,onkeydown,onkeypress`,
+    true
+  );
+  const resolveModifiers = (key, modifiers, context, loc) => {
+    const keyModifiers = [];
+    const nonKeyModifiers = [];
+    const eventOptionModifiers = [];
+    for (let i = 0; i < modifiers.length; i++) {
+      const modifier = modifiers[i];
+      if (isEventOptionModifier(modifier)) {
+        eventOptionModifiers.push(modifier);
+      } else {
+        if (maybeKeyModifier(modifier)) {
+          if (isStaticExp(key)) {
+            if (isKeyboardEvent(key.content)) {
+              keyModifiers.push(modifier);
+            } else {
+              nonKeyModifiers.push(modifier);
+            }
+          } else {
+            keyModifiers.push(modifier);
+            nonKeyModifiers.push(modifier);
+          }
+        } else {
+          if (isNonKeyModifier(modifier)) {
+            nonKeyModifiers.push(modifier);
+          } else {
+            keyModifiers.push(modifier);
+          }
+        }
+      }
+    }
+    return {
+      keyModifiers,
+      nonKeyModifiers,
+      eventOptionModifiers
+    };
+  };
+  const transformClick = (key, event) => {
+    const isStaticClick = isStaticExp(key) && key.content.toLowerCase() === "onclick";
+    return isStaticClick ? createSimpleExpression(event, true) : key.type !== 4 ? createCompoundExpression([
+      `(`,
+      key,
+      `) === "onClick" ? "${event}" : (`,
+      key,
+      `)`
+    ]) : key;
+  };
+  const transformOn = (dir, node, context) => {
+    return transformOn$1(dir, node, context, (baseResult) => {
+      const { modifiers } = dir;
+      if (!modifiers.length)
+        return baseResult;
+      let { key, value: handlerExp } = baseResult.props[0];
+      const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(key, modifiers, context, dir.loc);
+      if (nonKeyModifiers.includes("right")) {
+        key = transformClick(key, `onContextmenu`);
+      }
+      if (nonKeyModifiers.includes("middle")) {
+        key = transformClick(key, `onMouseup`);
+      }
+      if (nonKeyModifiers.length) {
+        handlerExp = createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [
+          handlerExp,
+          JSON.stringify(nonKeyModifiers)
+        ]);
+      }
+      if (keyModifiers.length && // if event name is dynamic, always wrap with keys guard
+      (!isStaticExp(key) || isKeyboardEvent(key.content))) {
+        handlerExp = createCallExpression(context.helper(V_ON_WITH_KEYS), [
+          handlerExp,
+          JSON.stringify(keyModifiers)
+        ]);
+      }
+      if (eventOptionModifiers.length) {
+        const modifierPostfix = eventOptionModifiers.map(capitalize).join("");
+        key = isStaticExp(key) ? createSimpleExpression(`${key.content}${modifierPostfix}`, true) : createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`]);
+      }
+      return {
+        props: [createObjectProperty(key, handlerExp)]
+      };
+    });
+  };
+
+  const transformShow = (dir, node, context) => {
+    const { exp, loc } = dir;
+    if (!exp) {
+      context.onError(
+        createDOMCompilerError(61, loc)
+      );
+    }
+    return {
+      props: [],
+      needRuntime: context.helper(V_SHOW)
+    };
+  };
+
+  const transformTransition = (node, context) => {
+    if (node.type === 1 && node.tagType === 1) {
+      const component = context.isBuiltInComponent(node.tag);
+      if (component === TRANSITION) {
+        return () => {
+          if (!node.children.length) {
+            return;
+          }
+          if (hasMultipleChildren(node)) {
+            context.onError(
+              createDOMCompilerError(
+                62,
+                {
+                  start: node.children[0].loc.start,
+                  end: node.children[node.children.length - 1].loc.end,
+                  source: ""
+                }
+              )
+            );
+          }
+          const child = node.children[0];
+          if (child.type === 1) {
+            for (const p of child.props) {
+              if (p.type === 7 && p.name === "show") {
+                node.props.push({
+                  type: 6,
+                  name: "persisted",
+                  nameLoc: node.loc,
+                  value: void 0,
+                  loc: node.loc
+                });
+              }
+            }
+          }
+        };
+      }
+    }
+  };
+  function hasMultipleChildren(node) {
+    const children = node.children = node.children.filter(
+      (c) => c.type !== 3 && !(c.type === 2 && !c.content.trim())
+    );
+    const child = children[0];
+    return children.length !== 1 || child.type === 11 || child.type === 9 && child.branches.some(hasMultipleChildren);
+  }
+
+  const ignoreSideEffectTags = (node, context) => {
+    if (node.type === 1 && node.tagType === 0 && (node.tag === "script" || node.tag === "style")) {
+      context.onError(
+        createDOMCompilerError(
+          63,
+          node.loc
+        )
+      );
+      context.removeNode();
+    }
+  };
+
+  const DOMNodeTransforms = [
+    transformStyle,
+    ...[transformTransition] 
+  ];
+  const DOMDirectiveTransforms = {
+    cloak: noopDirectiveTransform,
+    html: transformVHtml,
+    text: transformVText,
+    model: transformModel,
+    // override compiler-core
+    on: transformOn,
+    // override compiler-core
+    show: transformShow
+  };
+  function compile(src, options = {}) {
+    return baseCompile(
+      src,
+      extend({}, parserOptions, options, {
+        nodeTransforms: [
+          // ignore <script> and <tag>
+          // this is not put inside DOMNodeTransforms because that list is used
+          // by compiler-ssr to generate vnode fallback branches
+          ignoreSideEffectTags,
+          ...DOMNodeTransforms,
+          ...options.nodeTransforms || []
+        ],
+        directiveTransforms: extend(
+          {},
+          DOMDirectiveTransforms,
+          options.directiveTransforms || {}
+        ),
+        transformHoist: null 
+      })
+    );
+  }
+
+  {
+    initDev();
+  }
+  const compileCache = /* @__PURE__ */ new WeakMap();
+  function getCache(options) {
+    let c = compileCache.get(options != null ? options : EMPTY_OBJ);
+    if (!c) {
+      c = /* @__PURE__ */ Object.create(null);
+      compileCache.set(options != null ? options : EMPTY_OBJ, c);
+    }
+    return c;
+  }
+  function compileToFunction(template, options) {
+    if (!isString(template)) {
+      if (template.nodeType) {
+        template = template.innerHTML;
+      } else {
+        warn(`invalid template option: `, template);
+        return NOOP;
+      }
+    }
+    const key = template;
+    const cache = getCache(options);
+    const cached = cache[key];
+    if (cached) {
+      return cached;
+    }
+    if (template[0] === "#") {
+      const el = document.querySelector(template);
+      if (!el) {
+        warn(`Template element not found or is empty: ${template}`);
+      }
+      template = el ? el.innerHTML : ``;
+    }
+    const opts = extend(
+      {
+        hoistStatic: true,
+        onError: onError ,
+        onWarn: (e) => onError(e, true) 
+      },
+      options
+    );
+    if (!opts.isCustomElement && typeof customElements !== "undefined") {
+      opts.isCustomElement = (tag) => !!customElements.get(tag);
+    }
+    const { code } = compile(template, opts);
+    function onError(err, asWarning = false) {
+      const message = asWarning ? err.message : `Template compilation error: ${err.message}`;
+      const codeFrame = err.loc && generateCodeFrame(
+        template,
+        err.loc.start.offset,
+        err.loc.end.offset
+      );
+      warn(codeFrame ? `${message}
+${codeFrame}` : message);
+    }
+    const render = new Function(code)() ;
+    render._rc = true;
+    return cache[key] = render;
+  }
+  registerRuntimeCompiler(compileToFunction);
+
+  exports.BaseTransition = BaseTransition;
+  exports.BaseTransitionPropsValidators = BaseTransitionPropsValidators;
+  exports.Comment = Comment;
+  exports.DeprecationTypes = DeprecationTypes;
+  exports.EffectScope = EffectScope;
+  exports.ErrorCodes = ErrorCodes;
+  exports.ErrorTypeStrings = ErrorTypeStrings;
+  exports.Fragment = Fragment;
+  exports.KeepAlive = KeepAlive;
+  exports.ReactiveEffect = ReactiveEffect;
+  exports.Static = Static;
+  exports.Suspense = Suspense;
+  exports.Teleport = Teleport;
+  exports.Text = Text;
+  exports.TrackOpTypes = TrackOpTypes;
+  exports.Transition = Transition;
+  exports.TransitionGroup = TransitionGroup;
+  exports.TriggerOpTypes = TriggerOpTypes;
+  exports.VueElement = VueElement;
+  exports.assertNumber = assertNumber;
+  exports.callWithAsyncErrorHandling = callWithAsyncErrorHandling;
+  exports.callWithErrorHandling = callWithErrorHandling;
+  exports.camelize = camelize;
+  exports.capitalize = capitalize;
+  exports.cloneVNode = cloneVNode;
+  exports.compatUtils = compatUtils;
+  exports.compile = compileToFunction;
+  exports.computed = computed;
+  exports.createApp = createApp;
+  exports.createBlock = createBlock;
+  exports.createCommentVNode = createCommentVNode;
+  exports.createElementBlock = createElementBlock;
+  exports.createElementVNode = createBaseVNode;
+  exports.createHydrationRenderer = createHydrationRenderer;
+  exports.createPropsRestProxy = createPropsRestProxy;
+  exports.createRenderer = createRenderer;
+  exports.createSSRApp = createSSRApp;
+  exports.createSlots = createSlots;
+  exports.createStaticVNode = createStaticVNode;
+  exports.createTextVNode = createTextVNode;
+  exports.createVNode = createVNode;
+  exports.customRef = customRef;
+  exports.defineAsyncComponent = defineAsyncComponent;
+  exports.defineComponent = defineComponent;
+  exports.defineCustomElement = defineCustomElement;
+  exports.defineEmits = defineEmits;
+  exports.defineExpose = defineExpose;
+  exports.defineModel = defineModel;
+  exports.defineOptions = defineOptions;
+  exports.defineProps = defineProps;
+  exports.defineSSRCustomElement = defineSSRCustomElement;
+  exports.defineSlots = defineSlots;
+  exports.devtools = devtools;
+  exports.effect = effect;
+  exports.effectScope = effectScope;
+  exports.getCurrentInstance = getCurrentInstance;
+  exports.getCurrentScope = getCurrentScope;
+  exports.getTransitionRawChildren = getTransitionRawChildren;
+  exports.guardReactiveProps = guardReactiveProps;
+  exports.h = h;
+  exports.handleError = handleError;
+  exports.hasInjectionContext = hasInjectionContext;
+  exports.hydrate = hydrate;
+  exports.initCustomFormatter = initCustomFormatter;
+  exports.initDirectivesForSSR = initDirectivesForSSR;
+  exports.inject = inject;
+  exports.isMemoSame = isMemoSame;
+  exports.isProxy = isProxy;
+  exports.isReactive = isReactive;
+  exports.isReadonly = isReadonly;
+  exports.isRef = isRef;
+  exports.isRuntimeOnly = isRuntimeOnly;
+  exports.isShallow = isShallow;
+  exports.isVNode = isVNode;
+  exports.markRaw = markRaw;
+  exports.mergeDefaults = mergeDefaults;
+  exports.mergeModels = mergeModels;
+  exports.mergeProps = mergeProps;
+  exports.nextTick = nextTick;
+  exports.normalizeClass = normalizeClass;
+  exports.normalizeProps = normalizeProps;
+  exports.normalizeStyle = normalizeStyle;
+  exports.onActivated = onActivated;
+  exports.onBeforeMount = onBeforeMount;
+  exports.onBeforeUnmount = onBeforeUnmount;
+  exports.onBeforeUpdate = onBeforeUpdate;
+  exports.onDeactivated = onDeactivated;
+  exports.onErrorCaptured = onErrorCaptured;
+  exports.onMounted = onMounted;
+  exports.onRenderTracked = onRenderTracked;
+  exports.onRenderTriggered = onRenderTriggered;
+  exports.onScopeDispose = onScopeDispose;
+  exports.onServerPrefetch = onServerPrefetch;
+  exports.onUnmounted = onUnmounted;
+  exports.onUpdated = onUpdated;
+  exports.openBlock = openBlock;
+  exports.popScopeId = popScopeId;
+  exports.provide = provide;
+  exports.proxyRefs = proxyRefs;
+  exports.pushScopeId = pushScopeId;
+  exports.queuePostFlushCb = queuePostFlushCb;
+  exports.reactive = reactive;
+  exports.readonly = readonly;
+  exports.ref = ref;
+  exports.registerRuntimeCompiler = registerRuntimeCompiler;
+  exports.render = render;
+  exports.renderList = renderList;
+  exports.renderSlot = renderSlot;
+  exports.resolveComponent = resolveComponent;
+  exports.resolveDirective = resolveDirective;
+  exports.resolveDynamicComponent = resolveDynamicComponent;
+  exports.resolveFilter = resolveFilter;
+  exports.resolveTransitionHooks = resolveTransitionHooks;
+  exports.setBlockTracking = setBlockTracking;
+  exports.setDevtoolsHook = setDevtoolsHook;
+  exports.setTransitionHooks = setTransitionHooks;
+  exports.shallowReactive = shallowReactive;
+  exports.shallowReadonly = shallowReadonly;
+  exports.shallowRef = shallowRef;
+  exports.ssrContextKey = ssrContextKey;
+  exports.ssrUtils = ssrUtils;
+  exports.stop = stop;
+  exports.toDisplayString = toDisplayString;
+  exports.toHandlerKey = toHandlerKey;
+  exports.toHandlers = toHandlers;
+  exports.toRaw = toRaw;
+  exports.toRef = toRef;
+  exports.toRefs = toRefs;
+  exports.toValue = toValue;
+  exports.transformVNodeArgs = transformVNodeArgs;
+  exports.triggerRef = triggerRef;
+  exports.unref = unref;
+  exports.useAttrs = useAttrs;
+  exports.useCssModule = useCssModule;
+  exports.useCssVars = useCssVars;
+  exports.useModel = useModel;
+  exports.useSSRContext = useSSRContext;
+  exports.useSlots = useSlots;
+  exports.useTransitionState = useTransitionState;
+  exports.vModelCheckbox = vModelCheckbox;
+  exports.vModelDynamic = vModelDynamic;
+  exports.vModelRadio = vModelRadio;
+  exports.vModelSelect = vModelSelect;
+  exports.vModelText = vModelText;
+  exports.vShow = vShow;
+  exports.version = version;
+  exports.warn = warn;
+  exports.watch = watch;
+  exports.watchEffect = watchEffect;
+  exports.watchPostEffect = watchPostEffect;
+  exports.watchSyncEffect = watchSyncEffect;
+  exports.withAsyncContext = withAsyncContext;
+  exports.withCtx = withCtx;
+  exports.withDefaults = withDefaults;
+  exports.withDirectives = withDirectives;
+  exports.withKeys = withKeys;
+  exports.withMemo = withMemo;
+  exports.withModifiers = withModifiers;
+  exports.withScopeId = withScopeId;
+
+  return exports;
+
+})({});
diff --git a/assets/js/vue.global.prod.js b/assets/js/vue.global.prod.js
new file mode 100644
index 00000000..b8935136
--- /dev/null
+++ b/assets/js/vue.global.prod.js
@@ -0,0 +1,11 @@
+/**
+* vue v3.4.18
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+var Vue=function(e){"use strict";function t(e,t){const n=new Set(e.split(","));return t?e=>n.has(e.toLowerCase()):e=>n.has(e)}const n={},s=[],o=()=>{},r=()=>!1,i=e=>111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),l=e=>e.startsWith("onUpdate:"),c=Object.assign,a=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},u=Object.prototype.hasOwnProperty,d=(e,t)=>u.call(e,t),p=Array.isArray,h=e=>"[object Map]"===x(e),f=e=>"[object Set]"===x(e),m=e=>"[object Date]"===x(e),g=e=>"function"==typeof e,y=e=>"string"==typeof e,v=e=>"symbol"==typeof e,b=e=>null!==e&&"object"==typeof e,_=e=>(b(e)||g(e))&&g(e.then)&&g(e.catch),S=Object.prototype.toString,x=e=>S.call(e),C=e=>x(e).slice(8,-1),k=e=>"[object Object]"===x(e),T=e=>y(e)&&"NaN"!==e&&"-"!==e[0]&&""+parseInt(e,10)===e,w=t(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),E=t("bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo"),N=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},A=/-(\w)/g,I=N((e=>e.replace(A,((e,t)=>t?t.toUpperCase():"")))),R=/\B([A-Z])/g,O=N((e=>e.replace(R,"-$1").toLowerCase())),L=N((e=>e.charAt(0).toUpperCase()+e.slice(1))),F=N((e=>e?`on${L(e)}`:"")),M=(e,t)=>!Object.is(e,t),P=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},$=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},B=e=>{const t=parseFloat(e);return isNaN(t)?e:t},V=e=>{const t=y(e)?Number(e):NaN;return isNaN(t)?e:t};let D;const U=()=>D||(D="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{}),j=t("Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error");function H(e){if(p(e)){const t={};for(let n=0;n<e.length;n++){const s=e[n],o=y(s)?z(s):H(s);if(o)for(const e in o)t[e]=o[e]}return t}if(y(e)||b(e))return e}const q=/;(?![^(]*\))/g,W=/:([^]+)/,K=/\/\*[^]*?\*\//g;function z(e){const t={};return e.replace(K,"").split(q).forEach((e=>{if(e){const n=e.split(W);n.length>1&&(t[n[0].trim()]=n[1].trim())}})),t}function G(e){let t="";if(y(e))t=e;else if(p(e))for(let n=0;n<e.length;n++){const s=G(e[n]);s&&(t+=s+" ")}else if(b(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const J=t("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot"),X=t("svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,text,textPath,title,tspan,unknown,use,view"),Q=t("annotation,annotation-xml,maction,maligngroup,malignmark,math,menclose,merror,mfenced,mfrac,mfraction,mglyph,mi,mlabeledtr,mlongdiv,mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,mscarries,mscarry,msgroup,msline,mspace,msqrt,msrow,mstack,mstyle,msub,msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,none,semantics"),Z=t("area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr"),Y=t("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function ee(e){return!!e||""===e}function te(e,t){if(e===t)return!0;let n=m(e),s=m(t);if(n||s)return!(!n||!s)&&e.getTime()===t.getTime();if(n=v(e),s=v(t),n||s)return e===t;if(n=p(e),s=p(t),n||s)return!(!n||!s)&&function(e,t){if(e.length!==t.length)return!1;let n=!0;for(let s=0;n&&s<e.length;s++)n=te(e[s],t[s]);return n}(e,t);if(n=b(e),s=b(t),n||s){if(!n||!s)return!1;if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e){const s=e.hasOwnProperty(n),o=t.hasOwnProperty(n);if(s&&!o||!s&&o||!te(e[n],t[n]))return!1}}return String(e)===String(t)}function ne(e,t){return e.findIndex((e=>te(e,t)))}const se=(e,t)=>t&&t.__v_isRef?se(e,t.value):h(t)?{[`Map(${t.size})`]:[...t.entries()].reduce(((e,[t,n],s)=>(e[oe(t,s)+" =>"]=n,e)),{})}:f(t)?{[`Set(${t.size})`]:[...t.values()].map((e=>oe(e)))}:v(t)?oe(t):!b(t)||p(t)||k(t)?t:String(t),oe=(e,t="")=>{var n;return v(e)?`Symbol(${null!=(n=e.description)?n:t})`:e};let re,ie;class le{constructor(e=!1){this.detached=e,this._active=!0,this.effects=[],this.cleanups=[],this.parent=re,!e&&re&&(this.index=(re.scopes||(re.scopes=[])).push(this)-1)}get active(){return this._active}run(e){if(this._active){const t=re;try{return re=this,e()}finally{re=t}}}on(){re=this}off(){re=this.parent}stop(e){if(this._active){let t,n;for(t=0,n=this.effects.length;t<n;t++)this.effects[t].stop();for(t=0,n=this.cleanups.length;t<n;t++)this.cleanups[t]();if(this.scopes)for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].stop(!0);if(!this.detached&&this.parent&&!e){const e=this.parent.scopes.pop();e&&e!==this&&(this.parent.scopes[this.index]=e,e.index=this.index)}this.parent=void 0,this._active=!1}}}function ce(e,t=re){t&&t.active&&t.effects.push(e)}function ae(){return re}class ue{constructor(e,t,n,s){this.fn=e,this.trigger=t,this.scheduler=n,this.active=!0,this.deps=[],this._dirtyLevel=4,this._trackId=0,this._runnings=0,this._shouldSchedule=!1,this._depsLength=0,ce(this,s)}get dirty(){if(2===this._dirtyLevel||3===this._dirtyLevel){this._dirtyLevel=1,ve();for(let e=0;e<this._depsLength;e++){const t=this.deps[e];if(t.computed&&(de(t.computed),this._dirtyLevel>=4))break}1===this._dirtyLevel&&(this._dirtyLevel=0),be()}return this._dirtyLevel>=4}set dirty(e){this._dirtyLevel=e?4:0}run(){if(this._dirtyLevel=0,!this.active)return this.fn();let e=me,t=ie;try{return me=!0,ie=this,this._runnings++,pe(this),this.fn()}finally{he(this),this._runnings--,ie=t,me=e}}stop(){var e;this.active&&(pe(this),he(this),null==(e=this.onStop)||e.call(this),this.active=!1)}}function de(e){return e.value}function pe(e){e._trackId++,e._depsLength=0}function he(e){if(e.deps.length>e._depsLength){for(let t=e._depsLength;t<e.deps.length;t++)fe(e.deps[t],e);e.deps.length=e._depsLength}}function fe(e,t){const n=e.get(t);void 0!==n&&t._trackId!==n&&(e.delete(t),0===e.size&&e.cleanup())}let me=!0,ge=0;const ye=[];function ve(){ye.push(me),me=!1}function be(){const e=ye.pop();me=void 0===e||e}function _e(){ge++}function Se(){for(ge--;!ge&&Ce.length;)Ce.shift()()}function xe(e,t,n){if(t.get(e)!==e._trackId){t.set(e,e._trackId);const n=e.deps[e._depsLength];n!==t?(n&&fe(n,e),e.deps[e._depsLength++]=t):e._depsLength++}}const Ce=[];function ke(e,t,n){_e();for(const s of e.keys()){let n;s._dirtyLevel<t&&(null!=n?n:n=e.get(s)===s._trackId)&&(s._shouldSchedule||(s._shouldSchedule=0===s._dirtyLevel),s._dirtyLevel=t),s._shouldSchedule&&(null!=n?n:n=e.get(s)===s._trackId)&&(s.trigger(),s._runnings&&!s.allowRecurse||2===s._dirtyLevel||(s._shouldSchedule=!1,s.scheduler&&Ce.push(s.scheduler)))}Se()}const Te=(e,t)=>{const n=new Map;return n.cleanup=e,n.computed=t,n},we=new WeakMap,Ee=Symbol(""),Ne=Symbol("");function Ae(e,t,n){if(me&&ie){let t=we.get(e);t||we.set(e,t=new Map);let s=t.get(n);s||t.set(n,s=Te((()=>t.delete(n)))),xe(ie,s)}}function Ie(e,t,n,s,o,r){const i=we.get(e);if(!i)return;let l=[];if("clear"===t)l=[...i.values()];else if("length"===n&&p(e)){const e=Number(s);i.forEach(((t,n)=>{("length"===n||!v(n)&&n>=e)&&l.push(t)}))}else switch(void 0!==n&&l.push(i.get(n)),t){case"add":p(e)?T(n)&&l.push(i.get("length")):(l.push(i.get(Ee)),h(e)&&l.push(i.get(Ne)));break;case"delete":p(e)||(l.push(i.get(Ee)),h(e)&&l.push(i.get(Ne)));break;case"set":h(e)&&l.push(i.get(Ee))}_e();for(const c of l)c&&ke(c,4);Se()}const Re=t("__proto__,__v_isRef,__isVue"),Oe=new Set(Object.getOwnPropertyNames(Symbol).filter((e=>"arguments"!==e&&"caller"!==e)).map((e=>Symbol[e])).filter(v)),Le=Fe();function Fe(){const e={};return["includes","indexOf","lastIndexOf"].forEach((t=>{e[t]=function(...e){const n=Ct(this);for(let t=0,o=this.length;t<o;t++)Ae(n,0,t+"");const s=n[t](...e);return-1===s||!1===s?n[t](...e.map(Ct)):s}})),["push","pop","shift","unshift","splice"].forEach((t=>{e[t]=function(...e){ve(),_e();const n=Ct(this)[t].apply(this,e);return Se(),be(),n}})),e}function Me(e){const t=Ct(this);return Ae(t,0,e),t.hasOwnProperty(e)}class Pe{constructor(e=!1,t=!1){this._isReadonly=e,this._shallow=t}get(e,t,n){const s=this._isReadonly,o=this._shallow;if("__v_isReactive"===t)return!s;if("__v_isReadonly"===t)return s;if("__v_isShallow"===t)return o;if("__v_raw"===t)return n===(s?o?ft:ht:o?pt:dt).get(e)||Object.getPrototypeOf(e)===Object.getPrototypeOf(n)?e:void 0;const r=p(e);if(!s){if(r&&d(Le,t))return Reflect.get(Le,t,n);if("hasOwnProperty"===t)return Me}const i=Reflect.get(e,t,n);return(v(t)?Oe.has(t):Re(t))?i:(s||Ae(e,0,t),o?i:It(i)?r&&T(t)?i:i.value:b(i)?s?yt(i):mt(i):i)}}class $e extends Pe{constructor(e=!1){super(!1,e)}set(e,t,n,s){let o=e[t];if(!this._shallow){const t=_t(o);if(St(n)||_t(n)||(o=Ct(o),n=Ct(n)),!p(e)&&It(o)&&!It(n))return!t&&(o.value=n,!0)}const r=p(e)&&T(t)?Number(t)<e.length:d(e,t),i=Reflect.set(e,t,n,s);return e===Ct(s)&&(r?M(n,o)&&Ie(e,"set",t,n):Ie(e,"add",t,n)),i}deleteProperty(e,t){const n=d(e,t),s=Reflect.deleteProperty(e,t);return s&&n&&Ie(e,"delete",t,void 0),s}has(e,t){const n=Reflect.has(e,t);return v(t)&&Oe.has(t)||Ae(e,0,t),n}ownKeys(e){return Ae(e,0,p(e)?"length":Ee),Reflect.ownKeys(e)}}class Be extends Pe{constructor(e=!1){super(!0,e)}set(e,t){return!0}deleteProperty(e,t){return!0}}const Ve=new $e,De=new Be,Ue=new $e(!0),je=new Be(!0),He=e=>e,qe=e=>Reflect.getPrototypeOf(e);function We(e,t,n=!1,s=!1){const o=Ct(e=e.__v_raw),r=Ct(t);n||(M(t,r)&&Ae(o,0,t),Ae(o,0,r));const{has:i}=qe(o),l=s?He:n?wt:Tt;return i.call(o,t)?l(e.get(t)):i.call(o,r)?l(e.get(r)):void(e!==o&&e.get(t))}function Ke(e,t=!1){const n=this.__v_raw,s=Ct(n),o=Ct(e);return t||(M(e,o)&&Ae(s,0,e),Ae(s,0,o)),e===o?n.has(e):n.has(e)||n.has(o)}function ze(e,t=!1){return e=e.__v_raw,!t&&Ae(Ct(e),0,Ee),Reflect.get(e,"size",e)}function Ge(e){e=Ct(e);const t=Ct(this);return qe(t).has.call(t,e)||(t.add(e),Ie(t,"add",e,e)),this}function Je(e,t){t=Ct(t);const n=Ct(this),{has:s,get:o}=qe(n);let r=s.call(n,e);r||(e=Ct(e),r=s.call(n,e));const i=o.call(n,e);return n.set(e,t),r?M(t,i)&&Ie(n,"set",e,t):Ie(n,"add",e,t),this}function Xe(e){const t=Ct(this),{has:n,get:s}=qe(t);let o=n.call(t,e);o||(e=Ct(e),o=n.call(t,e)),s&&s.call(t,e);const r=t.delete(e);return o&&Ie(t,"delete",e,void 0),r}function Qe(){const e=Ct(this),t=0!==e.size,n=e.clear();return t&&Ie(e,"clear",void 0,void 0),n}function Ze(e,t){return function(n,s){const o=this,r=o.__v_raw,i=Ct(r),l=t?He:e?wt:Tt;return!e&&Ae(i,0,Ee),r.forEach(((e,t)=>n.call(s,l(e),l(t),o)))}}function Ye(e,t,n){return function(...s){const o=this.__v_raw,r=Ct(o),i=h(r),l="entries"===e||e===Symbol.iterator&&i,c="keys"===e&&i,a=o[e](...s),u=n?He:t?wt:Tt;return!t&&Ae(r,0,c?Ne:Ee),{next(){const{value:e,done:t}=a.next();return t?{value:e,done:t}:{value:l?[u(e[0]),u(e[1])]:u(e),done:t}},[Symbol.iterator](){return this}}}}function et(e){return function(...t){return"delete"!==e&&("clear"===e?void 0:this)}}function tt(){const e={get(e){return We(this,e)},get size(){return ze(this)},has:Ke,add:Ge,set:Je,delete:Xe,clear:Qe,forEach:Ze(!1,!1)},t={get(e){return We(this,e,!1,!0)},get size(){return ze(this)},has:Ke,add:Ge,set:Je,delete:Xe,clear:Qe,forEach:Ze(!1,!0)},n={get(e){return We(this,e,!0)},get size(){return ze(this,!0)},has(e){return Ke.call(this,e,!0)},add:et("add"),set:et("set"),delete:et("delete"),clear:et("clear"),forEach:Ze(!0,!1)},s={get(e){return We(this,e,!0,!0)},get size(){return ze(this,!0)},has(e){return Ke.call(this,e,!0)},add:et("add"),set:et("set"),delete:et("delete"),clear:et("clear"),forEach:Ze(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((o=>{e[o]=Ye(o,!1,!1),n[o]=Ye(o,!0,!1),t[o]=Ye(o,!1,!0),s[o]=Ye(o,!0,!0)})),[e,n,t,s]}const[nt,st,ot,rt]=tt();function it(e,t){const n=t?e?rt:ot:e?st:nt;return(t,s,o)=>"__v_isReactive"===s?!e:"__v_isReadonly"===s?e:"__v_raw"===s?t:Reflect.get(d(n,s)&&s in t?n:t,s,o)}const lt={get:it(!1,!1)},ct={get:it(!1,!0)},at={get:it(!0,!1)},ut={get:it(!0,!0)},dt=new WeakMap,pt=new WeakMap,ht=new WeakMap,ft=new WeakMap;function mt(e){return _t(e)?e:vt(e,!1,Ve,lt,dt)}function gt(e){return vt(e,!1,Ue,ct,pt)}function yt(e){return vt(e,!0,De,at,ht)}function vt(e,t,n,s,o){if(!b(e))return e;if(e.__v_raw&&(!t||!e.__v_isReactive))return e;const r=o.get(e);if(r)return r;const i=(l=e).__v_skip||!Object.isExtensible(l)?0:function(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}(C(l));var l;if(0===i)return e;const c=new Proxy(e,2===i?s:n);return o.set(e,c),c}function bt(e){return _t(e)?bt(e.__v_raw):!(!e||!e.__v_isReactive)}function _t(e){return!(!e||!e.__v_isReadonly)}function St(e){return!(!e||!e.__v_isShallow)}function xt(e){return bt(e)||_t(e)}function Ct(e){const t=e&&e.__v_raw;return t?Ct(t):e}function kt(e){return Object.isExtensible(e)&&$(e,"__v_skip",!0),e}const Tt=e=>b(e)?mt(e):e,wt=e=>b(e)?yt(e):e;class Et{constructor(e,t,n,s){this._setter=t,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this.effect=new ue((()=>e(this._value)),(()=>At(this,2===this.effect._dirtyLevel?2:3))),this.effect.computed=this,this.effect.active=this._cacheable=!s,this.__v_isReadonly=n}get value(){const e=Ct(this);return e._cacheable&&!e.effect.dirty||!M(e._value,e._value=e.effect.run())||At(e,4),Nt(e),e.effect._dirtyLevel>=2&&At(e,2),e._value}set value(e){this._setter(e)}get _dirty(){return this.effect.dirty}set _dirty(e){this.effect.dirty=e}}function Nt(e){var t;me&&ie&&(e=Ct(e),xe(ie,null!=(t=e.dep)?t:e.dep=Te((()=>e.dep=void 0),e instanceof Et?e:void 0)))}function At(e,t=4,n){const s=(e=Ct(e)).dep;s&&ke(s,t)}function It(e){return!(!e||!0!==e.__v_isRef)}function Rt(e){return Ot(e,!1)}function Ot(e,t){return It(e)?e:new Lt(e,t)}class Lt{constructor(e,t){this.__v_isShallow=t,this.dep=void 0,this.__v_isRef=!0,this._rawValue=t?e:Ct(e),this._value=t?e:Tt(e)}get value(){return Nt(this),this._value}set value(e){const t=this.__v_isShallow||St(e)||_t(e);e=t?e:Ct(e),M(e,this._rawValue)&&(this._rawValue=e,this._value=t?e:Tt(e),At(this,4))}}function Ft(e){return It(e)?e.value:e}const Mt={get:(e,t,n)=>Ft(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const o=e[t];return It(o)&&!It(n)?(o.value=n,!0):Reflect.set(e,t,n,s)}};function Pt(e){return bt(e)?e:new Proxy(e,Mt)}class $t{constructor(e){this.dep=void 0,this.__v_isRef=!0;const{get:t,set:n}=e((()=>Nt(this)),(()=>At(this)));this._get=t,this._set=n}get value(){return this._get()}set value(e){this._set(e)}}function Bt(e){return new $t(e)}class Vt{constructor(e,t,n){this._object=e,this._key=t,this._defaultValue=n,this.__v_isRef=!0}get value(){const e=this._object[this._key];return void 0===e?this._defaultValue:e}set value(e){this._object[this._key]=e}get dep(){return e=Ct(this._object),t=this._key,null==(n=we.get(e))?void 0:n.get(t);var e,t,n}}class Dt{constructor(e){this._getter=e,this.__v_isRef=!0,this.__v_isReadonly=!0}get value(){return this._getter()}}function Ut(e,t,n){const s=e[t];return It(s)?s:new Vt(e,t,n)}function jt(e,t,n,s){let o;try{o=s?e(...s):e()}catch(r){qt(r,t,n)}return o}function Ht(e,t,n,s){if(g(e)){const o=jt(e,t,n,s);return o&&_(o)&&o.catch((e=>{qt(e,t,n)})),o}const o=[];for(let r=0;r<e.length;r++)o.push(Ht(e[r],t,n,s));return o}function qt(e,t,n,s=!0){if(t){let s=t.parent;const o=t.proxy,r=`https://vuejs.org/error-reference/#runtime-${n}`;for(;s;){const t=s.ec;if(t)for(let n=0;n<t.length;n++)if(!1===t[n](e,o,r))return;s=s.parent}const i=t.appContext.config.errorHandler;if(i)return void jt(i,null,10,[e,o,r])}!function(e,t,n,s=!0){console.error(e)}(e,0,0,s)}let Wt=!1,Kt=!1;const zt=[];let Gt=0;const Jt=[];let Xt=null,Qt=0;const Zt=Promise.resolve();let Yt=null;function en(e){const t=Yt||Zt;return e?t.then(this?e.bind(this):e):t}function tn(e){zt.length&&zt.includes(e,Wt&&e.allowRecurse?Gt+1:Gt)||(null==e.id?zt.push(e):zt.splice(function(e){let t=Gt+1,n=zt.length;for(;t<n;){const s=t+n>>>1,o=zt[s],r=ln(o);r<e||r===e&&o.pre?t=s+1:n=s}return t}(e.id),0,e),nn())}function nn(){Wt||Kt||(Kt=!0,Yt=Zt.then(an))}function sn(e){p(e)?Jt.push(...e):Xt&&Xt.includes(e,e.allowRecurse?Qt+1:Qt)||Jt.push(e),nn()}function on(e,t,n=(Wt?Gt+1:0)){for(;n<zt.length;n++){const t=zt[n];if(t&&t.pre){if(e&&t.id!==e.uid)continue;zt.splice(n,1),n--,t()}}}function rn(e){if(Jt.length){const e=[...new Set(Jt)].sort(((e,t)=>ln(e)-ln(t)));if(Jt.length=0,Xt)return void Xt.push(...e);for(Xt=e,Qt=0;Qt<Xt.length;Qt++)Xt[Qt]();Xt=null,Qt=0}}const ln=e=>null==e.id?1/0:e.id,cn=(e,t)=>{const n=ln(e)-ln(t);if(0===n){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function an(e){Kt=!1,Wt=!0,zt.sort(cn);try{for(Gt=0;Gt<zt.length;Gt++){const e=zt[Gt];e&&!1!==e.active&&jt(e,null,14)}}finally{Gt=0,zt.length=0,rn(),Wt=!1,Yt=null,(zt.length||Jt.length)&&an()}}function un(e,t,...s){if(e.isUnmounted)return;const o=e.vnode.props||n;let r=s;const i=t.startsWith("update:"),l=i&&t.slice(7);if(l&&l in o){const e=`${"modelValue"===l?"model":l}Modifiers`,{number:t,trim:i}=o[e]||n;i&&(r=s.map((e=>y(e)?e.trim():e))),t&&(r=s.map(B))}let c,a=o[c=F(t)]||o[c=F(I(t))];!a&&i&&(a=o[c=F(O(t))]),a&&Ht(a,e,6,r);const u=o[c+"Once"];if(u){if(e.emitted){if(e.emitted[c])return}else e.emitted={};e.emitted[c]=!0,Ht(u,e,6,r)}}function dn(e,t,n=!1){const s=t.emitsCache,o=s.get(e);if(void 0!==o)return o;const r=e.emits;let i={},l=!1;if(!g(e)){const s=e=>{const n=dn(e,t,!0);n&&(l=!0,c(i,n))};!n&&t.mixins.length&&t.mixins.forEach(s),e.extends&&s(e.extends),e.mixins&&e.mixins.forEach(s)}return r||l?(p(r)?r.forEach((e=>i[e]=null)):c(i,r),b(e)&&s.set(e,i),i):(b(e)&&s.set(e,null),null)}function pn(e,t){return!(!e||!i(t))&&(t=t.slice(2).replace(/Once$/,""),d(e,t[0].toLowerCase()+t.slice(1))||d(e,O(t))||d(e,t))}let hn=null,fn=null;function mn(e){const t=hn;return hn=e,fn=e&&e.type.__scopeId||null,t}function gn(e,t=hn,n){if(!t)return e;if(e._n)return e;const s=(...n)=>{s._d&&Ho(-1);const o=mn(t);let r;try{r=e(...n)}finally{mn(o),s._d&&Ho(1)}return r};return s._n=!0,s._c=!0,s._d=!0,s}function yn(e){const{type:t,vnode:n,proxy:s,withProxy:o,props:r,propsOptions:[i],slots:c,attrs:a,emit:u,render:d,renderCache:p,data:h,setupState:f,ctx:m,inheritAttrs:g}=e;let y,v;const b=mn(e);try{if(4&n.shapeFlag){const e=o||s;y=nr(d.call(e,e,p,r,f,h,m)),v=a}else{const e=t;0,y=nr(e(r,e.length>1?{attrs:a,slots:c,emit:u}:null)),v=t.props?a:vn(a)}}catch(S){Bo.length=0,qt(S,e,1),y=Zo(Po)}let _=y;if(v&&!1!==g){const e=Object.keys(v),{shapeFlag:t}=_;e.length&&7&t&&(i&&e.some(l)&&(v=bn(v,i)),_=er(_,v))}return n.dirs&&(_=er(_),_.dirs=_.dirs?_.dirs.concat(n.dirs):n.dirs),n.transition&&(_.transition=n.transition),y=_,mn(b),y}const vn=e=>{let t;for(const n in e)("class"===n||"style"===n||i(n))&&((t||(t={}))[n]=e[n]);return t},bn=(e,t)=>{const n={};for(const s in e)l(s)&&s.slice(9)in t||(n[s]=e[s]);return n};function _n(e,t,n){const s=Object.keys(t);if(s.length!==Object.keys(e).length)return!0;for(let o=0;o<s.length;o++){const r=s[o];if(t[r]!==e[r]&&!pn(n,r))return!0}return!1}function Sn({vnode:e,parent:t},n){for(;t;){const s=t.subTree;if(s.suspense&&s.suspense.activeBranch===e&&(s.el=e.el),s!==e)break;(e=t.vnode).el=n,t=t.parent}}const xn="components";const Cn=Symbol.for("v-ndc");function kn(e,t,n=!0,s=!1){const o=hn||ar;if(o){const n=o.type;if(e===xn){const e=kr(n,!1);if(e&&(e===t||e===I(t)||e===L(I(t))))return n}const r=Tn(o[e]||n[e],t)||Tn(o.appContext[e],t);return!r&&s?n:r}}function Tn(e,t){return e&&(e[t]||e[I(t)]||e[L(I(t))])}const wn=e=>e.__isSuspense;let En=0;const Nn={name:"Suspense",__isSuspense:!0,process(e,t,n,s,o,r,i,l,c,a){if(null==e)!function(e,t,n,s,o,r,i,l,c){const{p:a,o:{createElement:u}}=c,d=u("div"),p=e.suspense=In(e,o,s,t,d,n,r,i,l,c);a(null,p.pendingBranch=e.ssContent,d,null,s,p,r,i),p.deps>0?(An(e,"onPending"),An(e,"onFallback"),a(null,e.ssFallback,t,n,s,null,r,i),Ln(p,e.ssFallback)):p.resolve(!1,!0)}(t,n,s,o,r,i,l,c,a);else{if(r&&r.deps>0)return void(t.suspense=e.suspense);!function(e,t,n,s,o,r,i,l,{p:c,um:a,o:{createElement:u}}){const d=t.suspense=e.suspense;d.vnode=t,t.el=e.el;const p=t.ssContent,h=t.ssFallback,{activeBranch:f,pendingBranch:m,isInFallback:g,isHydrating:y}=d;if(m)d.pendingBranch=p,zo(p,m)?(c(m,p,d.hiddenContainer,null,o,d,r,i,l),d.deps<=0?d.resolve():g&&(y||(c(f,h,n,s,o,null,r,i,l),Ln(d,h)))):(d.pendingId=En++,y?(d.isHydrating=!1,d.activeBranch=m):a(m,o,d),d.deps=0,d.effects.length=0,d.hiddenContainer=u("div"),g?(c(null,p,d.hiddenContainer,null,o,d,r,i,l),d.deps<=0?d.resolve():(c(f,h,n,s,o,null,r,i,l),Ln(d,h))):f&&zo(p,f)?(c(f,p,n,s,o,d,r,i,l),d.resolve(!0)):(c(null,p,d.hiddenContainer,null,o,d,r,i,l),d.deps<=0&&d.resolve()));else if(f&&zo(p,f))c(f,p,n,s,o,d,r,i,l),Ln(d,p);else if(An(t,"onPending"),d.pendingBranch=p,d.pendingId=512&p.shapeFlag?p.component.suspenseId:En++,c(null,p,d.hiddenContainer,null,o,d,r,i,l),d.deps<=0)d.resolve();else{const{timeout:e,pendingId:t}=d;e>0?setTimeout((()=>{d.pendingId===t&&d.fallback(h)}),e):0===e&&d.fallback(h)}}(e,t,n,s,o,i,l,c,a)}},hydrate:function(e,t,n,s,o,r,i,l,c){const a=t.suspense=In(t,s,n,e.parentNode,document.createElement("div"),null,o,r,i,l,!0),u=c(e,a.pendingBranch=t.ssContent,n,a,r,i);0===a.deps&&a.resolve(!1,!0);return u},create:In,normalize:function(e){const{shapeFlag:t,children:n}=e,s=32&t;e.ssContent=Rn(s?n.default:n),e.ssFallback=s?Rn(n.fallback):Zo(Po)}};function An(e,t){const n=e.props&&e.props[t];g(n)&&n()}function In(e,t,n,s,o,r,i,l,c,a,u=!1){const{p:d,m:p,um:h,n:f,o:{parentNode:m,remove:g}}=a;let y;const v=function(e){var t;return null!=(null==(t=e.props)?void 0:t.suspensible)&&!1!==e.props.suspensible}(e);v&&(null==t?void 0:t.pendingBranch)&&(y=t.pendingId,t.deps++);const b=e.props?V(e.props.timeout):void 0,_=r,S={vnode:e,parent:t,parentComponent:n,namespace:i,container:s,hiddenContainer:o,deps:0,pendingId:En++,timeout:"number"==typeof b?b:-1,activeBranch:null,pendingBranch:null,isInFallback:!u,isHydrating:u,isUnmounted:!1,effects:[],resolve(e=!1,n=!1){const{vnode:s,activeBranch:o,pendingBranch:i,pendingId:l,effects:c,parentComponent:a,container:u}=S;let d=!1;S.isHydrating?S.isHydrating=!1:e||(d=o&&i.transition&&"out-in"===i.transition.mode,d&&(o.transition.afterLeave=()=>{l===S.pendingId&&(p(i,u,r===_?f(o):r,0),sn(c))}),o&&(m(o.el)!==S.hiddenContainer&&(r=f(o)),h(o,a,S,!0)),d||p(i,u,r,0)),Ln(S,i),S.pendingBranch=null,S.isInFallback=!1;let g=S.parent,b=!1;for(;g;){if(g.pendingBranch){g.effects.push(...c),b=!0;break}g=g.parent}b||d||sn(c),S.effects=[],v&&t&&t.pendingBranch&&y===t.pendingId&&(t.deps--,0!==t.deps||n||t.resolve()),An(s,"onResolve")},fallback(e){if(!S.pendingBranch)return;const{vnode:t,activeBranch:n,parentComponent:s,container:o,namespace:r}=S;An(t,"onFallback");const i=f(n),a=()=>{S.isInFallback&&(d(null,e,o,i,s,null,r,l,c),Ln(S,e))},u=e.transition&&"out-in"===e.transition.mode;u&&(n.transition.afterLeave=a),S.isInFallback=!0,h(n,s,null,!0),u||a()},move(e,t,n){S.activeBranch&&p(S.activeBranch,e,t,n),S.container=e},next:()=>S.activeBranch&&f(S.activeBranch),registerDep(e,t){const n=!!S.pendingBranch;n&&S.deps++;const s=e.vnode.el;e.asyncDep.catch((t=>{qt(t,e,0)})).then((o=>{if(e.isUnmounted||S.isUnmounted||S.pendingId!==e.suspenseId)return;e.asyncResolved=!0;const{vnode:r}=e;br(e,o,!1),s&&(r.el=s);const l=!s&&e.subTree.el;t(e,r,m(s||e.subTree.el),s?null:f(e.subTree),S,i,c),l&&g(l),Sn(e,r.el),n&&0==--S.deps&&S.resolve()}))},unmount(e,t){S.isUnmounted=!0,S.activeBranch&&h(S.activeBranch,n,e,t),S.pendingBranch&&h(S.pendingBranch,n,e,t)}};return S}function Rn(e){let t;if(g(e)){const n=jo&&e._c;n&&(e._d=!1,Do()),e=e(),n&&(e._d=!0,t=Vo,Uo())}if(p(e)){const t=function(e,t=!0){let n;for(let s=0;s<e.length;s++){const t=e[s];if(!Ko(t))return;if(t.type!==Po||"v-if"===t.children){if(n)return;n=t}}return n}(e);e=t}return e=nr(e),t&&!e.dynamicChildren&&(e.dynamicChildren=t.filter((t=>t!==e))),e}function On(e,t){t&&t.pendingBranch?p(e)?t.effects.push(...e):t.effects.push(e):sn(e)}function Ln(e,t){e.activeBranch=t;const{vnode:n,parentComponent:s}=e;let o=t.el;for(;!o&&t.component;)o=(t=t.component.subTree).el;n.el=o,s&&s.subTree===n&&(s.vnode.el=o,Sn(s,o))}const Fn=Symbol.for("v-scx");function Mn(e,t){return Vn(e,null,{flush:"post"})}function Pn(e,t){return Vn(e,null,{flush:"sync"})}const $n={};function Bn(e,t,n){return Vn(e,t,n)}function Vn(e,t,{immediate:s,deep:r,flush:i,once:l}=n){if(t&&l){const e=t;t=(...t)=>{e(...t),C()}}const c=ar,u=e=>!0===r?e:jn(e,!1===r?1:void 0);let d,h,f=!1,m=!1;if(It(e)?(d=()=>e.value,f=St(e)):bt(e)?(d=()=>u(e),f=!0):p(e)?(m=!0,f=e.some((e=>bt(e)||St(e))),d=()=>e.map((e=>It(e)?e.value:bt(e)?u(e):g(e)?jt(e,c,2):void 0))):d=g(e)?t?()=>jt(e,c,2):()=>(h&&h(),Ht(e,c,3,[y])):o,t&&r){const e=d;d=()=>jn(e())}let y=e=>{h=S.onStop=()=>{jt(e,c,4),h=S.onStop=void 0}},v=m?new Array(e.length).fill($n):$n;const b=()=>{if(S.active&&S.dirty)if(t){const e=S.run();(r||f||(m?e.some(((e,t)=>M(e,v[t]))):M(e,v)))&&(h&&h(),Ht(t,c,3,[e,v===$n?void 0:m&&v[0]===$n?[]:v,y]),v=e)}else S.run()};let _;b.allowRecurse=!!t,"sync"===i?_=b:"post"===i?_=()=>vo(b,c&&c.suspense):(b.pre=!0,c&&(b.id=c.uid),_=()=>tn(b));const S=new ue(d,o,_),x=ae(),C=()=>{S.stop(),x&&a(x.effects,S)};return t?s?b():v=S.run():"post"===i?vo(S.run.bind(S),c&&c.suspense):S.run(),C}function Dn(e,t,n){const s=this.proxy,o=y(e)?e.includes(".")?Un(s,e):()=>s[e]:e.bind(s,s);let r;g(t)?r=t:(r=t.handler,n=t);const i=hr(this),l=Vn(o,r.bind(s),n);return i(),l}function Un(e,t){const n=t.split(".");return()=>{let t=e;for(let e=0;e<n.length&&t;e++)t=t[n[e]];return t}}function jn(e,t,n=0,s){if(!b(e)||e.__v_skip)return e;if(t&&t>0){if(n>=t)return e;n++}if((s=s||new Set).has(e))return e;if(s.add(e),It(e))jn(e.value,t,n,s);else if(p(e))for(let o=0;o<e.length;o++)jn(e[o],t,n,s);else if(f(e)||h(e))e.forEach((e=>{jn(e,t,n,s)}));else if(k(e))for(const o in e)jn(e[o],t,n,s);return e}function Hn(e,t,n,s){const o=e.dirs,r=t&&t.dirs;for(let i=0;i<o.length;i++){const l=o[i];r&&(l.oldValue=r[i].value);let c=l.dir[s];c&&(ve(),Ht(c,n,8,[e.el,l,e,t]),be())}}const qn=Symbol("_leaveCb"),Wn=Symbol("_enterCb");function Kn(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return ys((()=>{e.isMounted=!0})),_s((()=>{e.isUnmounting=!0})),e}const zn=[Function,Array],Gn={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:zn,onEnter:zn,onAfterEnter:zn,onEnterCancelled:zn,onBeforeLeave:zn,onLeave:zn,onAfterLeave:zn,onLeaveCancelled:zn,onBeforeAppear:zn,onAppear:zn,onAfterAppear:zn,onAppearCancelled:zn},Jn={name:"BaseTransition",props:Gn,setup(e,{slots:t}){const n=ur(),s=Kn();let o;return()=>{const r=t.default&&ts(t.default(),!0);if(!r||!r.length)return;let i=r[0];if(r.length>1)for(const e of r)if(e.type!==Po){i=e;break}const l=Ct(e),{mode:c}=l;if(s.isLeaving)return Zn(i);const a=Yn(i);if(!a)return Zn(i);const u=Qn(a,l,s,n);es(a,u);const d=n.subTree,p=d&&Yn(d);let h=!1;const{getTransitionKey:f}=a.type;if(f){const e=f();void 0===o?o=e:e!==o&&(o=e,h=!0)}if(p&&p.type!==Po&&(!zo(a,p)||h)){const e=Qn(p,l,s,n);if(es(p,e),"out-in"===c)return s.isLeaving=!0,e.afterLeave=()=>{s.isLeaving=!1,!1!==n.update.active&&(n.effect.dirty=!0,n.update())},Zn(i);"in-out"===c&&a.type!==Po&&(e.delayLeave=(e,t,n)=>{Xn(s,p)[String(p.key)]=p,e[qn]=()=>{t(),e[qn]=void 0,delete u.delayedLeave},u.delayedLeave=n})}return i}}};function Xn(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function Qn(e,t,n,s){const{appear:o,mode:r,persisted:i=!1,onBeforeEnter:l,onEnter:c,onAfterEnter:a,onEnterCancelled:u,onBeforeLeave:d,onLeave:h,onAfterLeave:f,onLeaveCancelled:m,onBeforeAppear:g,onAppear:y,onAfterAppear:v,onAppearCancelled:b}=t,_=String(e.key),S=Xn(n,e),x=(e,t)=>{e&&Ht(e,s,9,t)},C=(e,t)=>{const n=t[1];x(e,t),p(e)?e.every((e=>e.length<=1))&&n():e.length<=1&&n()},k={mode:r,persisted:i,beforeEnter(t){let s=l;if(!n.isMounted){if(!o)return;s=g||l}t[qn]&&t[qn](!0);const r=S[_];r&&zo(e,r)&&r.el[qn]&&r.el[qn](),x(s,[t])},enter(e){let t=c,s=a,r=u;if(!n.isMounted){if(!o)return;t=y||c,s=v||a,r=b||u}let i=!1;const l=e[Wn]=t=>{i||(i=!0,x(t?r:s,[e]),k.delayedLeave&&k.delayedLeave(),e[Wn]=void 0)};t?C(t,[e,l]):l()},leave(t,s){const o=String(e.key);if(t[Wn]&&t[Wn](!0),n.isUnmounting)return s();x(d,[t]);let r=!1;const i=t[qn]=n=>{r||(r=!0,s(),x(n?m:f,[t]),t[qn]=void 0,S[o]===e&&delete S[o])};S[o]=e,h?C(h,[t,i]):i()},clone:e=>Qn(e,t,n,s)};return k}function Zn(e){if(rs(e))return(e=er(e)).children=null,e}function Yn(e){return rs(e)?e.children?e.children[0]:void 0:e}function es(e,t){6&e.shapeFlag&&e.component?es(e.component.subTree,t):128&e.shapeFlag?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function ts(e,t=!1,n){let s=[],o=0;for(let r=0;r<e.length;r++){let i=e[r];const l=null==n?i.key:String(n)+String(null!=i.key?i.key:r);i.type===Fo?(128&i.patchFlag&&o++,s=s.concat(ts(i.children,t,l))):(t||i.type!==Po)&&s.push(null!=l?er(i,{key:l}):i)}if(o>1)for(let r=0;r<s.length;r++)s[r].patchFlag=-2;return s}
+/*! #__NO_SIDE_EFFECTS__ */function ns(e,t){return g(e)?(()=>c({name:e.name},t,{setup:e}))():e}const ss=e=>!!e.type.__asyncLoader
+/*! #__NO_SIDE_EFFECTS__ */;function os(e,t){const{ref:n,props:s,children:o,ce:r}=t.vnode,i=Zo(e,s,o);return i.ref=n,i.ce=r,delete t.vnode.ce,i}const rs=e=>e.type.__isKeepAlive,is={name:"KeepAlive",__isKeepAlive:!0,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(e,{slots:t}){const n=ur(),s=n.ctx,o=new Map,r=new Set;let i=null;const l=n.suspense,{renderer:{p:c,m:a,um:u,o:{createElement:d}}}=s,p=d("div");function h(e){ps(e),u(e,n,l,!0)}function f(e){o.forEach(((t,n)=>{const s=kr(t.type);!s||e&&e(s)||m(n)}))}function m(e){const t=o.get(e);i&&zo(t,i)?i&&ps(i):h(t),o.delete(e),r.delete(e)}s.activate=(e,t,n,s,o)=>{const r=e.component;a(e,t,n,0,l),c(r.vnode,e,t,n,r,l,s,e.slotScopeIds,o),vo((()=>{r.isDeactivated=!1,r.a&&P(r.a);const t=e.props&&e.props.onVnodeMounted;t&&ir(t,r.parent,e)}),l)},s.deactivate=e=>{const t=e.component;a(e,p,null,1,l),vo((()=>{t.da&&P(t.da);const n=e.props&&e.props.onVnodeUnmounted;n&&ir(n,t.parent,e),t.isDeactivated=!0}),l)},Bn((()=>[e.include,e.exclude]),(([e,t])=>{e&&f((t=>ls(e,t))),t&&f((e=>!ls(t,e)))}),{flush:"post",deep:!0});let g=null;const y=()=>{null!=g&&o.set(g,hs(n.subTree))};return ys(y),bs(y),_s((()=>{o.forEach((e=>{const{subTree:t,suspense:s}=n,o=hs(t);if(e.type!==o.type||e.key!==o.key)h(e);else{ps(o);const e=o.component.da;e&&vo(e,s)}}))})),()=>{if(g=null,!t.default)return null;const n=t.default(),s=n[0];if(n.length>1)return i=null,n;if(!(Ko(s)&&(4&s.shapeFlag||128&s.shapeFlag)))return i=null,s;let l=hs(s);const c=l.type,a=kr(ss(l)?l.type.__asyncResolved||{}:c),{include:u,exclude:d,max:p}=e;if(u&&(!a||!ls(u,a))||d&&a&&ls(d,a))return i=l,s;const h=null==l.key?c:l.key,f=o.get(h);return l.el&&(l=er(l),128&s.shapeFlag&&(s.ssContent=l)),g=h,f?(l.el=f.el,l.component=f.component,l.transition&&es(l,l.transition),l.shapeFlag|=512,r.delete(h),r.add(h)):(r.add(h),p&&r.size>parseInt(p,10)&&m(r.values().next().value)),l.shapeFlag|=256,i=l,wn(s.type)?s:l}}};function ls(e,t){return p(e)?e.some((e=>ls(e,t))):y(e)?e.split(",").includes(t):"[object RegExp]"===x(e)&&e.test(t)}function cs(e,t){us(e,"a",t)}function as(e,t){us(e,"da",t)}function us(e,t,n=ar){const s=e.__wdc||(e.__wdc=()=>{let t=n;for(;t;){if(t.isDeactivated)return;t=t.parent}return e()});if(fs(t,s,n),n){let e=n.parent;for(;e&&e.parent;)rs(e.parent.vnode)&&ds(s,t,n,e),e=e.parent}}function ds(e,t,n,s){const o=fs(t,e,s,!0);Ss((()=>{a(s[t],o)}),n)}function ps(e){e.shapeFlag&=-257,e.shapeFlag&=-513}function hs(e){return 128&e.shapeFlag?e.ssContent:e}function fs(e,t,n=ar,s=!1){if(n){const o=n[e]||(n[e]=[]),r=t.__weh||(t.__weh=(...s)=>{if(n.isUnmounted)return;ve();const o=hr(n),r=Ht(t,n,e,s);return o(),be(),r});return s?o.unshift(r):o.push(r),r}}const ms=e=>(t,n=ar)=>(!vr||"sp"===e)&&fs(e,((...e)=>t(...e)),n),gs=ms("bm"),ys=ms("m"),vs=ms("bu"),bs=ms("u"),_s=ms("bum"),Ss=ms("um"),xs=ms("sp"),Cs=ms("rtg"),ks=ms("rtc");function Ts(e,t=ar){fs("ec",e,t)}function ws(e){return e.some((e=>!Ko(e)||e.type!==Po&&!(e.type===Fo&&!ws(e.children))))?e:null}const Es=e=>e?mr(e)?Cr(e)||e.proxy:Es(e.parent):null,Ns=c(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>Es(e.parent),$root:e=>Es(e.root),$emit:e=>e.emit,$options:e=>Bs(e),$forceUpdate:e=>e.f||(e.f=()=>{e.effect.dirty=!0,tn(e.update)}),$nextTick:e=>e.n||(e.n=en.bind(e.proxy)),$watch:e=>Dn.bind(e)}),As=(e,t)=>e!==n&&!e.__isScriptSetup&&d(e,t),Is={get({_:e},t){const{ctx:s,setupState:o,data:r,props:i,accessCache:l,type:c,appContext:a}=e;let u;if("$"!==t[0]){const c=l[t];if(void 0!==c)switch(c){case 1:return o[t];case 2:return r[t];case 4:return s[t];case 3:return i[t]}else{if(As(o,t))return l[t]=1,o[t];if(r!==n&&d(r,t))return l[t]=2,r[t];if((u=e.propsOptions[0])&&d(u,t))return l[t]=3,i[t];if(s!==n&&d(s,t))return l[t]=4,s[t];Fs&&(l[t]=0)}}const p=Ns[t];let h,f;return p?("$attrs"===t&&Ae(e,0,t),p(e)):(h=c.__cssModules)&&(h=h[t])?h:s!==n&&d(s,t)?(l[t]=4,s[t]):(f=a.config.globalProperties,d(f,t)?f[t]:void 0)},set({_:e},t,s){const{data:o,setupState:r,ctx:i}=e;return As(r,t)?(r[t]=s,!0):o!==n&&d(o,t)?(o[t]=s,!0):!d(e.props,t)&&(("$"!==t[0]||!(t.slice(1)in e))&&(i[t]=s,!0))},has({_:{data:e,setupState:t,accessCache:s,ctx:o,appContext:r,propsOptions:i}},l){let c;return!!s[l]||e!==n&&d(e,l)||As(t,l)||(c=i[0])&&d(c,l)||d(o,l)||d(Ns,l)||d(r.config.globalProperties,l)},defineProperty(e,t,n){return null!=n.get?e._.accessCache[t]=0:d(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}},Rs=c({},Is,{get(e,t){if(t!==Symbol.unscopables)return Is.get(e,t,e)},has:(e,t)=>"_"!==t[0]&&!j(t)});function Os(){const e=ur();return e.setupContext||(e.setupContext=xr(e))}function Ls(e){return p(e)?e.reduce(((e,t)=>(e[t]=null,e)),{}):e}let Fs=!0;function Ms(e){const t=Bs(e),n=e.proxy,s=e.ctx;Fs=!1,t.beforeCreate&&Ps(t.beforeCreate,e,"bc");const{data:r,computed:i,methods:l,watch:c,provide:a,inject:u,created:d,beforeMount:h,mounted:f,beforeUpdate:m,updated:y,activated:v,deactivated:_,beforeUnmount:S,unmounted:x,render:C,renderTracked:k,renderTriggered:T,errorCaptured:w,serverPrefetch:E,expose:N,inheritAttrs:A,components:I,directives:R}=t;if(u&&function(e,t,n=o){p(e)&&(e=js(e));for(const s in e){const n=e[s];let o;o=b(n)?"default"in n?Qs(n.from||s,n.default,!0):Qs(n.from||s):Qs(n),It(o)?Object.defineProperty(t,s,{enumerable:!0,configurable:!0,get:()=>o.value,set:e=>o.value=e}):t[s]=o}}(u,s,null),l)for(const o in l){const e=l[o];g(e)&&(s[o]=e.bind(n))}if(r){const t=r.call(n,n);b(t)&&(e.data=mt(t))}if(Fs=!0,i)for(const p in i){const e=i[p],t=g(e)?e.bind(n,n):g(e.get)?e.get.bind(n,n):o,r=!g(e)&&g(e.set)?e.set.bind(n):o,l=Tr({get:t,set:r});Object.defineProperty(s,p,{enumerable:!0,configurable:!0,get:()=>l.value,set:e=>l.value=e})}if(c)for(const o in c)$s(c[o],s,n,o);if(a){const e=g(a)?a.call(n):a;Reflect.ownKeys(e).forEach((t=>{Xs(t,e[t])}))}function O(e,t){p(t)?t.forEach((t=>e(t.bind(n)))):t&&e(t.bind(n))}if(d&&Ps(d,e,"c"),O(gs,h),O(ys,f),O(vs,m),O(bs,y),O(cs,v),O(as,_),O(Ts,w),O(ks,k),O(Cs,T),O(_s,S),O(Ss,x),O(xs,E),p(N))if(N.length){const t=e.exposed||(e.exposed={});N.forEach((e=>{Object.defineProperty(t,e,{get:()=>n[e],set:t=>n[e]=t})}))}else e.exposed||(e.exposed={});C&&e.render===o&&(e.render=C),null!=A&&(e.inheritAttrs=A),I&&(e.components=I),R&&(e.directives=R)}function Ps(e,t,n){Ht(p(e)?e.map((e=>e.bind(t.proxy))):e.bind(t.proxy),t,n)}function $s(e,t,n,s){const o=s.includes(".")?Un(n,s):()=>n[s];if(y(e)){const n=t[e];g(n)&&Bn(o,n)}else if(g(e))Bn(o,e.bind(n));else if(b(e))if(p(e))e.forEach((e=>$s(e,t,n,s)));else{const s=g(e.handler)?e.handler.bind(n):t[e.handler];g(s)&&Bn(o,s,e)}}function Bs(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:o,optionsCache:r,config:{optionMergeStrategies:i}}=e.appContext,l=r.get(t);let c;return l?c=l:o.length||n||s?(c={},o.length&&o.forEach((e=>Vs(c,e,i,!0))),Vs(c,t,i)):c=t,b(t)&&r.set(t,c),c}function Vs(e,t,n,s=!1){const{mixins:o,extends:r}=t;r&&Vs(e,r,n,!0),o&&o.forEach((t=>Vs(e,t,n,!0)));for(const i in t)if(s&&"expose"===i);else{const s=Ds[i]||n&&n[i];e[i]=s?s(e[i],t[i]):t[i]}return e}const Ds={data:Us,props:Ws,emits:Ws,methods:qs,computed:qs,beforeCreate:Hs,created:Hs,beforeMount:Hs,mounted:Hs,beforeUpdate:Hs,updated:Hs,beforeDestroy:Hs,beforeUnmount:Hs,destroyed:Hs,unmounted:Hs,activated:Hs,deactivated:Hs,errorCaptured:Hs,serverPrefetch:Hs,components:qs,directives:qs,watch:function(e,t){if(!e)return t;if(!t)return e;const n=c(Object.create(null),e);for(const s in t)n[s]=Hs(e[s],t[s]);return n},provide:Us,inject:function(e,t){return qs(js(e),js(t))}};function Us(e,t){return t?e?function(){return c(g(e)?e.call(this,this):e,g(t)?t.call(this,this):t)}:t:e}function js(e){if(p(e)){const t={};for(let n=0;n<e.length;n++)t[e[n]]=e[n];return t}return e}function Hs(e,t){return e?[...new Set([].concat(e,t))]:t}function qs(e,t){return e?c(Object.create(null),e,t):t}function Ws(e,t){return e?p(e)&&p(t)?[...new Set([...e,...t])]:c(Object.create(null),Ls(e),Ls(null!=t?t:{})):t}function Ks(){return{app:null,config:{isNativeTag:r,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let zs=0;function Gs(e,t){return function(n,s=null){g(n)||(n=c({},n)),null==s||b(s)||(s=null);const o=Ks(),r=new WeakSet;let i=!1;const l=o.app={_uid:zs++,_component:n,_props:s,_container:null,_context:o,_instance:null,version:Nr,get config(){return o.config},set config(e){},use:(e,...t)=>(r.has(e)||(e&&g(e.install)?(r.add(e),e.install(l,...t)):g(e)&&(r.add(e),e(l,...t))),l),mixin:e=>(o.mixins.includes(e)||o.mixins.push(e),l),component:(e,t)=>t?(o.components[e]=t,l):o.components[e],directive:(e,t)=>t?(o.directives[e]=t,l):o.directives[e],mount(r,c,a){if(!i){const u=Zo(n,s);return u.appContext=o,!0===a?a="svg":!1===a&&(a=void 0),c&&t?t(u,r):e(u,r,a),i=!0,l._container=r,r.__vue_app__=l,Cr(u.component)||u.component.proxy}},unmount(){i&&(e(null,l._container),delete l._container.__vue_app__)},provide:(e,t)=>(o.provides[e]=t,l),runWithContext(e){const t=Js;Js=l;try{return e()}finally{Js=t}}};return l}}let Js=null;function Xs(e,t){if(ar){let n=ar.provides;const s=ar.parent&&ar.parent.provides;s===n&&(n=ar.provides=Object.create(s)),n[e]=t}else;}function Qs(e,t,n=!1){const s=ar||hn;if(s||Js){const o=s?null==s.parent?s.vnode.appContext&&s.vnode.appContext.provides:s.parent.provides:Js._context.provides;if(o&&e in o)return o[e];if(arguments.length>1)return n&&g(t)?t.call(s&&s.proxy):t}}function Zs(e,t,s,o){const[r,i]=e.propsOptions;let l,c=!1;if(t)for(let n in t){if(w(n))continue;const a=t[n];let u;r&&d(r,u=I(n))?i&&i.includes(u)?(l||(l={}))[u]=a:s[u]=a:pn(e.emitsOptions,n)||n in o&&a===o[n]||(o[n]=a,c=!0)}if(i){const t=Ct(s),o=l||n;for(let n=0;n<i.length;n++){const l=i[n];s[l]=Ys(r,t,l,o[l],e,!d(o,l))}}return c}function Ys(e,t,n,s,o,r){const i=e[n];if(null!=i){const e=d(i,"default");if(e&&void 0===s){const e=i.default;if(i.type!==Function&&!i.skipFactory&&g(e)){const{propsDefaults:r}=o;if(n in r)s=r[n];else{const i=hr(o);s=r[n]=e.call(null,t),i()}}else s=e}i[0]&&(r&&!e?s=!1:!i[1]||""!==s&&s!==O(n)||(s=!0))}return s}function eo(e,t,o=!1){const r=t.propsCache,i=r.get(e);if(i)return i;const l=e.props,a={},u=[];let h=!1;if(!g(e)){const n=e=>{h=!0;const[n,s]=eo(e,t,!0);c(a,n),s&&u.push(...s)};!o&&t.mixins.length&&t.mixins.forEach(n),e.extends&&n(e.extends),e.mixins&&e.mixins.forEach(n)}if(!l&&!h)return b(e)&&r.set(e,s),s;if(p(l))for(let s=0;s<l.length;s++){const e=I(l[s]);to(e)&&(a[e]=n)}else if(l)for(const n in l){const e=I(n);if(to(e)){const t=l[n],s=a[e]=p(t)||g(t)?{type:t}:c({},t);if(s){const t=oo(Boolean,s.type),n=oo(String,s.type);s[0]=t>-1,s[1]=n<0||t<n,(t>-1||d(s,"default"))&&u.push(e)}}}const f=[a,u];return b(e)&&r.set(e,f),f}function to(e){return"$"!==e[0]&&!w(e)}function no(e){const t=e&&e.toString().match(/^\s*(function|class) (\w+)/);return t?t[2]:null===e?"null":""}function so(e,t){return no(e)===no(t)}function oo(e,t){return p(t)?t.findIndex((t=>so(t,e))):g(t)&&so(t,e)?0:-1}const ro=e=>"_"===e[0]||"$stable"===e,io=e=>p(e)?e.map(nr):[nr(e)],lo=(e,t,n)=>{if(t._n)return t;const s=gn(((...e)=>io(t(...e))),n);return s._c=!1,s},co=(e,t,n)=>{const s=e._ctx;for(const o in e){if(ro(o))continue;const n=e[o];if(g(n))t[o]=lo(0,n,s);else if(null!=n){const e=io(n);t[o]=()=>e}}},ao=(e,t)=>{const n=io(t);e.slots.default=()=>n},uo=(e,t)=>{if(32&e.vnode.shapeFlag){const n=t._;n?(e.slots=Ct(t),$(t,"_",n)):co(t,e.slots={})}else e.slots={},t&&ao(e,t);$(e.slots,Go,1)},po=(e,t,s)=>{const{vnode:o,slots:r}=e;let i=!0,l=n;if(32&o.shapeFlag){const e=t._;e?s&&1===e?i=!1:(c(r,t),s||1!==e||delete r._):(i=!t.$stable,co(t,r)),l=t}else t&&(ao(e,t),l={default:1});if(i)for(const n in r)ro(n)||null!=l[n]||delete r[n]};function ho(e,t,s,o,r=!1){if(p(e))return void e.forEach(((e,n)=>ho(e,t&&(p(t)?t[n]:t),s,o,r)));if(ss(o)&&!r)return;const i=4&o.shapeFlag?Cr(o.component)||o.component.proxy:o.el,l=r?null:i,{i:c,r:u}=e,h=t&&t.r,f=c.refs===n?c.refs={}:c.refs,m=c.setupState;if(null!=h&&h!==u&&(y(h)?(f[h]=null,d(m,h)&&(m[h]=null)):It(h)&&(h.value=null)),g(u))jt(u,c,12,[l,f]);else{const t=y(u),n=It(u);if(t||n){const o=()=>{if(e.f){const n=t?d(m,u)?m[u]:f[u]:u.value;r?p(n)&&a(n,i):p(n)?n.includes(i)||n.push(i):t?(f[u]=[i],d(m,u)&&(m[u]=f[u])):(u.value=[i],e.k&&(f[e.k]=u.value))}else t?(f[u]=l,d(m,u)&&(m[u]=l)):n&&(u.value=l,e.k&&(f[e.k]=l))};l?(o.id=-1,vo(o,s)):o()}}}let fo=!1;const mo=e=>(e=>e.namespaceURI.includes("svg")&&"foreignObject"!==e.tagName)(e)?"svg":(e=>e.namespaceURI.includes("MathML"))(e)?"mathml":void 0,go=e=>8===e.nodeType;function yo(e){const{mt:t,p:n,o:{patchProp:s,createText:o,nextSibling:r,parentNode:l,remove:c,insert:a,createComment:u}}=e,d=(n,s,i,c,u,b=!1)=>{const _=go(n)&&"["===n.data,S=()=>m(n,s,i,c,u,_),{type:x,ref:C,shapeFlag:k,patchFlag:T}=s;let w=n.nodeType;s.el=n,-2===T&&(b=!1,s.dynamicChildren=null);let E=null;switch(x){case Mo:3!==w?""===s.children?(a(s.el=o(""),l(n),n),E=n):E=S():(n.data!==s.children&&(fo=!0,n.data=s.children),E=r(n));break;case Po:v(n)?(E=r(n),y(s.el=n.content.firstChild,n,i)):E=8!==w||_?S():r(n);break;case $o:if(_&&(w=(n=r(n)).nodeType),1===w||3===w){E=n;const e=!s.children.length;for(let t=0;t<s.staticCount;t++)e&&(s.children+=1===E.nodeType?E.outerHTML:E.data),t===s.staticCount-1&&(s.anchor=E),E=r(E);return _?r(E):E}S();break;case Fo:E=_?f(n,s,i,c,u,b):S();break;default:if(1&k)E=1===w&&s.type.toLowerCase()===n.tagName.toLowerCase()||v(n)?p(n,s,i,c,u,b):S();else if(6&k){s.slotScopeIds=u;const e=l(n);if(E=_?g(n):go(n)&&"teleport start"===n.data?g(n,n.data,"teleport end"):r(n),t(s,e,null,i,c,mo(e),b),ss(s)){let t;_?(t=Zo(Fo),t.anchor=E?E.previousSibling:e.lastChild):t=3===n.nodeType?tr(""):Zo("div"),t.el=n,s.component.subTree=t}}else 64&k?E=8!==w?S():s.type.hydrate(n,s,i,c,u,b,e,h):128&k&&(E=s.type.hydrate(n,s,i,c,mo(l(n)),u,b,e,d))}return null!=C&&ho(C,null,c,s),E},p=(e,t,n,o,r,l)=>{l=l||!!t.dynamicChildren;const{type:a,props:u,patchFlag:d,shapeFlag:p,dirs:f,transition:m}=t,g="input"===a||"option"===a;if(g||-1!==d){f&&Hn(t,null,n,"created");let a,b=!1;if(v(e)){b=ko(o,m)&&n&&n.vnode.props&&n.vnode.props.appear;const s=e.content.firstChild;b&&m.beforeEnter(s),y(s,e,n),t.el=e=s}if(16&p&&(!u||!u.innerHTML&&!u.textContent)){let s=h(e.firstChild,t,e,n,o,r,l);for(;s;){fo=!0;const e=s;s=s.nextSibling,c(e)}}else 8&p&&e.textContent!==t.children&&(fo=!0,e.textContent=t.children);if(u)if(g||!l||48&d)for(const t in u)(g&&(t.endsWith("value")||"indeterminate"===t)||i(t)&&!w(t)||"."===t[0])&&s(e,t,null,u[t],void 0,void 0,n);else u.onClick&&s(e,"onClick",null,u.onClick,void 0,void 0,n);(a=u&&u.onVnodeBeforeMount)&&ir(a,n,t),f&&Hn(t,null,n,"beforeMount"),((a=u&&u.onVnodeMounted)||f||b)&&On((()=>{a&&ir(a,n,t),b&&m.enter(e),f&&Hn(t,null,n,"mounted")}),o)}return e.nextSibling},h=(e,t,s,o,r,i,l)=>{l=l||!!t.dynamicChildren;const c=t.children,a=c.length;for(let u=0;u<a;u++){const t=l?c[u]:c[u]=nr(c[u]);if(e)e=d(e,t,o,r,i,l);else{if(t.type===Mo&&!t.children)continue;fo=!0,n(null,t,s,null,o,r,mo(s),i)}}return e},f=(e,t,n,s,o,i)=>{const{slotScopeIds:c}=t;c&&(o=o?o.concat(c):c);const d=l(e),p=h(r(e),t,d,n,s,o,i);return p&&go(p)&&"]"===p.data?r(t.anchor=p):(fo=!0,a(t.anchor=u("]"),d,p),p)},m=(e,t,s,o,i,a)=>{if(fo=!0,t.el=null,a){const t=g(e);for(;;){const n=r(e);if(!n||n===t)break;c(n)}}const u=r(e),d=l(e);return c(e),n(null,t,d,u,s,o,mo(d),i),u},g=(e,t="[",n="]")=>{let s=0;for(;e;)if((e=r(e))&&go(e)&&(e.data===t&&s++,e.data===n)){if(0===s)return r(e);s--}return e},y=(e,t,n)=>{const s=t.parentNode;s&&s.replaceChild(e,t);let o=n;for(;o;)o.vnode.el===t&&(o.vnode.el=o.subTree.el=e),o=o.parent},v=e=>1===e.nodeType&&"template"===e.tagName.toLowerCase();return[(e,t)=>{if(!t.hasChildNodes())return n(null,e,t),rn(),void(t._vnode=e);fo=!1,d(t.firstChild,e,null,null,null),rn(),t._vnode=e,fo&&console.error("Hydration completed but contains mismatches.")},d]}const vo=On;function bo(e){return So(e)}function _o(e){return So(e,yo)}function So(e,t){U().__VUE__=!0;const{insert:r,remove:i,patchProp:l,createElement:c,createText:a,createComment:u,setText:p,setElementText:h,parentNode:f,nextSibling:m,setScopeId:g=o,insertStaticContent:y}=e,v=(e,t,n,s=null,o=null,r=null,i=void 0,l=null,c=!!t.dynamicChildren)=>{if(e===t)return;e&&!zo(e,t)&&(s=Q(e),K(e,o,r,!0),e=null),-2===t.patchFlag&&(c=!1,t.dynamicChildren=null);const{type:a,ref:u,shapeFlag:d}=t;switch(a){case Mo:b(e,t,n,s);break;case Po:S(e,t,n,s);break;case $o:null==e&&x(t,n,s,i);break;case Fo:L(e,t,n,s,o,r,i,l,c);break;default:1&d?C(e,t,n,s,o,r,i,l,c):6&d?F(e,t,n,s,o,r,i,l,c):(64&d||128&d)&&a.process(e,t,n,s,o,r,i,l,c,ee)}null!=u&&o&&ho(u,e&&e.ref,r,t||e,!t)},b=(e,t,n,s)=>{if(null==e)r(t.el=a(t.children),n,s);else{const n=t.el=e.el;t.children!==e.children&&p(n,t.children)}},S=(e,t,n,s)=>{null==e?r(t.el=u(t.children||""),n,s):t.el=e.el},x=(e,t,n,s)=>{[e.el,e.anchor]=y(e.children,t,n,s,e.el,e.anchor)},C=(e,t,n,s,o,r,i,l,c)=>{"svg"===t.type?i="svg":"math"===t.type&&(i="mathml"),null==e?k(t,n,s,o,r,i,l,c):N(e,t,o,r,i,l,c)},k=(e,t,n,s,o,i,a,u)=>{let d,p;const{props:f,shapeFlag:m,transition:g,dirs:y}=e;if(d=e.el=c(e.type,i,f&&f.is,f),8&m?h(d,e.children):16&m&&E(e.children,d,null,s,o,xo(e,i),a,u),y&&Hn(e,null,s,"created"),T(d,e,e.scopeId,a,s),f){for(const t in f)"value"===t||w(t)||l(d,t,null,f[t],i,e.children,s,o,X);"value"in f&&l(d,"value",null,f.value,i),(p=f.onVnodeBeforeMount)&&ir(p,s,e)}y&&Hn(e,null,s,"beforeMount");const v=ko(o,g);v&&g.beforeEnter(d),r(d,t,n),((p=f&&f.onVnodeMounted)||v||y)&&vo((()=>{p&&ir(p,s,e),v&&g.enter(d),y&&Hn(e,null,s,"mounted")}),o)},T=(e,t,n,s,o)=>{if(n&&g(e,n),s)for(let r=0;r<s.length;r++)g(e,s[r]);if(o){if(t===o.subTree){const t=o.vnode;T(e,t,t.scopeId,t.slotScopeIds,o.parent)}}},E=(e,t,n,s,o,r,i,l,c=0)=>{for(let a=c;a<e.length;a++){const c=e[a]=l?sr(e[a]):nr(e[a]);v(null,c,t,n,s,o,r,i,l)}},N=(e,t,s,o,r,i,c)=>{const a=t.el=e.el;let{patchFlag:u,dynamicChildren:d,dirs:p}=t;u|=16&e.patchFlag;const f=e.props||n,m=t.props||n;let g;if(s&&Co(s,!1),(g=m.onVnodeBeforeUpdate)&&ir(g,s,t,e),p&&Hn(t,e,s,"beforeUpdate"),s&&Co(s,!0),d?A(e.dynamicChildren,d,a,s,o,xo(t,r),i):c||j(e,t,a,null,s,o,xo(t,r),i,!1),u>0){if(16&u)R(a,t,f,m,s,o,r);else if(2&u&&f.class!==m.class&&l(a,"class",null,m.class,r),4&u&&l(a,"style",f.style,m.style,r),8&u){const n=t.dynamicProps;for(let t=0;t<n.length;t++){const i=n[t],c=f[i],u=m[i];u===c&&"value"!==i||l(a,i,c,u,r,e.children,s,o,X)}}1&u&&e.children!==t.children&&h(a,t.children)}else c||null!=d||R(a,t,f,m,s,o,r);((g=m.onVnodeUpdated)||p)&&vo((()=>{g&&ir(g,s,t,e),p&&Hn(t,e,s,"updated")}),o)},A=(e,t,n,s,o,r,i)=>{for(let l=0;l<t.length;l++){const c=e[l],a=t[l],u=c.el&&(c.type===Fo||!zo(c,a)||70&c.shapeFlag)?f(c.el):n;v(c,a,u,null,s,o,r,i,!0)}},R=(e,t,s,o,r,i,c)=>{if(s!==o){if(s!==n)for(const n in s)w(n)||n in o||l(e,n,s[n],null,c,t.children,r,i,X);for(const n in o){if(w(n))continue;const a=o[n],u=s[n];a!==u&&"value"!==n&&l(e,n,u,a,c,t.children,r,i,X)}"value"in o&&l(e,"value",s.value,o.value,c)}},L=(e,t,n,s,o,i,l,c,u)=>{const d=t.el=e?e.el:a(""),p=t.anchor=e?e.anchor:a("");let{patchFlag:h,dynamicChildren:f,slotScopeIds:m}=t;m&&(c=c?c.concat(m):m),null==e?(r(d,n,s),r(p,n,s),E(t.children||[],n,p,o,i,l,c,u)):h>0&&64&h&&f&&e.dynamicChildren?(A(e.dynamicChildren,f,n,o,i,l,c),(null!=t.key||o&&t===o.subTree)&&To(e,t,!0)):j(e,t,n,p,o,i,l,c,u)},F=(e,t,n,s,o,r,i,l,c)=>{t.slotScopeIds=l,null==e?512&t.shapeFlag?o.ctx.activate(t,n,s,i,c):M(t,n,s,o,r,i,c):B(e,t,c)},M=(e,t,s,o,r,i,l)=>{const c=e.component=function(e,t,s){const o=e.type,r=(t?t.appContext:e.appContext)||lr,i={uid:cr++,vnode:e,type:o,parent:t,appContext:r,root:null,next:null,subTree:null,effect:null,update:null,scope:new le(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(r.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:eo(o,r),emitsOptions:dn(o,r),emit:null,emitted:null,propsDefaults:n,inheritAttrs:o.inheritAttrs,ctx:n,data:n,props:n,attrs:n,slots:n,refs:n,setupState:n,setupContext:null,attrsProxy:null,slotsProxy:null,suspense:s,suspenseId:s?s.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};i.ctx={_:i},i.root=t?t.root:i,i.emit=un.bind(null,i),e.ce&&e.ce(i);return i}(e,o,r);if(rs(e)&&(c.ctx.renderer=ee),function(e,t=!1){t&&pr(t);const{props:n,children:s}=e.vnode,o=mr(e);(function(e,t,n,s=!1){const o={},r={};$(r,Go,1),e.propsDefaults=Object.create(null),Zs(e,t,o,r);for(const i in e.propsOptions[0])i in o||(o[i]=void 0);e.props=n?s?o:gt(o):e.type.props?o:r,e.attrs=r})(e,n,o,t),uo(e,s);const r=o?function(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=kt(new Proxy(e.ctx,Is));const{setup:s}=n;if(s){const n=e.setupContext=s.length>1?xr(e):null,o=hr(e);ve();const r=jt(s,e,0,[e.props,n]);if(be(),o(),_(r)){if(r.then(fr,fr),t)return r.then((n=>{br(e,n,t)})).catch((t=>{qt(t,e,0)}));e.asyncDep=r}else br(e,r,t)}else Sr(e,t)}(e,t):void 0;t&&pr(!1)}(c),c.asyncDep){if(r&&r.registerDep(c,V),!e.el){const e=c.subTree=Zo(Po);S(null,e,t,s)}}else V(c,e,t,s,r,i,l)},B=(e,t,n)=>{const s=t.component=e.component;if(function(e,t,n){const{props:s,children:o,component:r}=e,{props:i,children:l,patchFlag:c}=t,a=r.emitsOptions;if(t.dirs||t.transition)return!0;if(!(n&&c>=0))return!(!o&&!l||l&&l.$stable)||s!==i&&(s?!i||_n(s,i,a):!!i);if(1024&c)return!0;if(16&c)return s?_n(s,i,a):!!i;if(8&c){const e=t.dynamicProps;for(let t=0;t<e.length;t++){const n=e[t];if(i[n]!==s[n]&&!pn(a,n))return!0}}return!1}(e,t,n)){if(s.asyncDep&&!s.asyncResolved)return void D(s,t,n);s.next=t,function(e){const t=zt.indexOf(e);t>Gt&&zt.splice(t,1)}(s.update),s.effect.dirty=!0,s.update()}else t.el=e.el,s.vnode=t},V=(e,t,n,s,r,i,l)=>{const c=()=>{if(e.isMounted){let{next:t,bu:n,u:s,parent:o,vnode:a}=e;{const n=wo(e);if(n)return t&&(t.el=a.el,D(e,t,l)),void n.asyncDep.then((()=>{e.isUnmounted||c()}))}let u,d=t;Co(e,!1),t?(t.el=a.el,D(e,t,l)):t=a,n&&P(n),(u=t.props&&t.props.onVnodeBeforeUpdate)&&ir(u,o,t,a),Co(e,!0);const p=yn(e),h=e.subTree;e.subTree=p,v(h,p,f(h.el),Q(h),e,r,i),t.el=p.el,null===d&&Sn(e,p.el),s&&vo(s,r),(u=t.props&&t.props.onVnodeUpdated)&&vo((()=>ir(u,o,t,a)),r)}else{let o;const{el:l,props:c}=t,{bm:a,m:u,parent:d}=e,p=ss(t);if(Co(e,!1),a&&P(a),!p&&(o=c&&c.onVnodeBeforeMount)&&ir(o,d,t),Co(e,!0),l&&ne){const n=()=>{e.subTree=yn(e),ne(l,e.subTree,e,r,null)};p?t.type.__asyncLoader().then((()=>!e.isUnmounted&&n())):n()}else{const o=e.subTree=yn(e);v(null,o,n,s,e,r,i),t.el=o.el}if(u&&vo(u,r),!p&&(o=c&&c.onVnodeMounted)){const e=t;vo((()=>ir(o,d,e)),r)}(256&t.shapeFlag||d&&ss(d.vnode)&&256&d.vnode.shapeFlag)&&e.a&&vo(e.a,r),e.isMounted=!0,t=n=s=null}},a=e.effect=new ue(c,o,(()=>tn(u)),e.scope),u=e.update=()=>{a.dirty&&a.run()};u.id=e.uid,Co(e,!0),u()},D=(e,t,n)=>{t.component=e;const s=e.vnode.props;e.vnode=t,e.next=null,function(e,t,n,s){const{props:o,attrs:r,vnode:{patchFlag:i}}=e,l=Ct(o),[c]=e.propsOptions;let a=!1;if(!(s||i>0)||16&i){let s;Zs(e,t,o,r)&&(a=!0);for(const r in l)t&&(d(t,r)||(s=O(r))!==r&&d(t,s))||(c?!n||void 0===n[r]&&void 0===n[s]||(o[r]=Ys(c,l,r,void 0,e,!0)):delete o[r]);if(r!==l)for(const e in r)t&&d(t,e)||(delete r[e],a=!0)}else if(8&i){const n=e.vnode.dynamicProps;for(let s=0;s<n.length;s++){let i=n[s];if(pn(e.emitsOptions,i))continue;const u=t[i];if(c)if(d(r,i))u!==r[i]&&(r[i]=u,a=!0);else{const t=I(i);o[t]=Ys(c,l,t,u,e,!1)}else u!==r[i]&&(r[i]=u,a=!0)}}a&&Ie(e,"set","$attrs")}(e,t.props,s,n),po(e,t.children,n),ve(),on(e),be()},j=(e,t,n,s,o,r,i,l,c=!1)=>{const a=e&&e.children,u=e?e.shapeFlag:0,d=t.children,{patchFlag:p,shapeFlag:f}=t;if(p>0){if(128&p)return void q(a,d,n,s,o,r,i,l,c);if(256&p)return void H(a,d,n,s,o,r,i,l,c)}8&f?(16&u&&X(a,o,r),d!==a&&h(n,d)):16&u?16&f?q(a,d,n,s,o,r,i,l,c):X(a,o,r,!0):(8&u&&h(n,""),16&f&&E(d,n,s,o,r,i,l,c))},H=(e,t,n,o,r,i,l,c,a)=>{const u=(e=e||s).length,d=(t=t||s).length,p=Math.min(u,d);let h;for(h=0;h<p;h++){const s=t[h]=a?sr(t[h]):nr(t[h]);v(e[h],s,n,null,r,i,l,c,a)}u>d?X(e,r,i,!0,!1,p):E(t,n,o,r,i,l,c,a,p)},q=(e,t,n,o,r,i,l,c,a)=>{let u=0;const d=t.length;let p=e.length-1,h=d-1;for(;u<=p&&u<=h;){const s=e[u],o=t[u]=a?sr(t[u]):nr(t[u]);if(!zo(s,o))break;v(s,o,n,null,r,i,l,c,a),u++}for(;u<=p&&u<=h;){const s=e[p],o=t[h]=a?sr(t[h]):nr(t[h]);if(!zo(s,o))break;v(s,o,n,null,r,i,l,c,a),p--,h--}if(u>p){if(u<=h){const e=h+1,s=e<d?t[e].el:o;for(;u<=h;)v(null,t[u]=a?sr(t[u]):nr(t[u]),n,s,r,i,l,c,a),u++}}else if(u>h)for(;u<=p;)K(e[u],r,i,!0),u++;else{const f=u,m=u,g=new Map;for(u=m;u<=h;u++){const e=t[u]=a?sr(t[u]):nr(t[u]);null!=e.key&&g.set(e.key,u)}let y,b=0;const _=h-m+1;let S=!1,x=0;const C=new Array(_);for(u=0;u<_;u++)C[u]=0;for(u=f;u<=p;u++){const s=e[u];if(b>=_){K(s,r,i,!0);continue}let o;if(null!=s.key)o=g.get(s.key);else for(y=m;y<=h;y++)if(0===C[y-m]&&zo(s,t[y])){o=y;break}void 0===o?K(s,r,i,!0):(C[o-m]=u+1,o>=x?x=o:S=!0,v(s,t[o],n,null,r,i,l,c,a),b++)}const k=S?function(e){const t=e.slice(),n=[0];let s,o,r,i,l;const c=e.length;for(s=0;s<c;s++){const c=e[s];if(0!==c){if(o=n[n.length-1],e[o]<c){t[s]=o,n.push(s);continue}for(r=0,i=n.length-1;r<i;)l=r+i>>1,e[n[l]]<c?r=l+1:i=l;c<e[n[r]]&&(r>0&&(t[s]=n[r-1]),n[r]=s)}}r=n.length,i=n[r-1];for(;r-- >0;)n[r]=i,i=t[i];return n}(C):s;for(y=k.length-1,u=_-1;u>=0;u--){const e=m+u,s=t[e],p=e+1<d?t[e+1].el:o;0===C[u]?v(null,s,n,p,r,i,l,c,a):S&&(y<0||u!==k[y]?W(s,n,p,2):y--)}}},W=(e,t,n,s,o=null)=>{const{el:i,type:l,transition:c,children:a,shapeFlag:u}=e;if(6&u)return void W(e.component.subTree,t,n,s);if(128&u)return void e.suspense.move(t,n,s);if(64&u)return void l.move(e,t,n,ee);if(l===Fo){r(i,t,n);for(let e=0;e<a.length;e++)W(a[e],t,n,s);return void r(e.anchor,t,n)}if(l===$o)return void(({el:e,anchor:t},n,s)=>{let o;for(;e&&e!==t;)o=m(e),r(e,n,s),e=o;r(t,n,s)})(e,t,n);if(2!==s&&1&u&&c)if(0===s)c.beforeEnter(i),r(i,t,n),vo((()=>c.enter(i)),o);else{const{leave:e,delayLeave:s,afterLeave:o}=c,l=()=>r(i,t,n),a=()=>{e(i,(()=>{l(),o&&o()}))};s?s(i,l,a):a()}else r(i,t,n)},K=(e,t,n,s=!1,o=!1)=>{const{type:r,props:i,ref:l,children:c,dynamicChildren:a,shapeFlag:u,patchFlag:d,dirs:p}=e;if(null!=l&&ho(l,null,n,e,!0),256&u)return void t.ctx.deactivate(e);const h=1&u&&p,f=!ss(e);let m;if(f&&(m=i&&i.onVnodeBeforeUnmount)&&ir(m,t,e),6&u)J(e.component,n,s);else{if(128&u)return void e.suspense.unmount(n,s);h&&Hn(e,null,t,"beforeUnmount"),64&u?e.type.remove(e,t,n,o,ee,s):a&&(r!==Fo||d>0&&64&d)?X(a,t,n,!1,!0):(r===Fo&&384&d||!o&&16&u)&&X(c,t,n),s&&z(e)}(f&&(m=i&&i.onVnodeUnmounted)||h)&&vo((()=>{m&&ir(m,t,e),h&&Hn(e,null,t,"unmounted")}),n)},z=e=>{const{type:t,el:n,anchor:s,transition:o}=e;if(t===Fo)return void G(n,s);if(t===$o)return void(({el:e,anchor:t})=>{let n;for(;e&&e!==t;)n=m(e),i(e),e=n;i(t)})(e);const r=()=>{i(n),o&&!o.persisted&&o.afterLeave&&o.afterLeave()};if(1&e.shapeFlag&&o&&!o.persisted){const{leave:t,delayLeave:s}=o,i=()=>t(n,r);s?s(e.el,r,i):i()}else r()},G=(e,t)=>{let n;for(;e!==t;)n=m(e),i(e),e=n;i(t)},J=(e,t,n)=>{const{bum:s,scope:o,update:r,subTree:i,um:l}=e;s&&P(s),o.stop(),r&&(r.active=!1,K(i,e,t,n)),l&&vo(l,t),vo((()=>{e.isUnmounted=!0}),t),t&&t.pendingBranch&&!t.isUnmounted&&e.asyncDep&&!e.asyncResolved&&e.suspenseId===t.pendingId&&(t.deps--,0===t.deps&&t.resolve())},X=(e,t,n,s=!1,o=!1,r=0)=>{for(let i=r;i<e.length;i++)K(e[i],t,n,s,o)},Q=e=>6&e.shapeFlag?Q(e.component.subTree):128&e.shapeFlag?e.suspense.next():m(e.anchor||e.el);let Z=!1;const Y=(e,t,n)=>{null==e?t._vnode&&K(t._vnode,null,null,!0):v(t._vnode||null,e,t,null,null,null,n),Z||(Z=!0,on(),rn(),Z=!1),t._vnode=e},ee={p:v,um:K,m:W,r:z,mt:M,mc:E,pc:j,pbc:A,n:Q,o:e};let te,ne;return t&&([te,ne]=t(ee)),{render:Y,hydrate:te,createApp:Gs(Y,te)}}function xo({type:e,props:t},n){return"svg"===n&&"foreignObject"===e||"mathml"===n&&"annotation-xml"===e&&t&&t.encoding&&t.encoding.includes("html")?void 0:n}function Co({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function ko(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function To(e,t,n=!1){const s=e.children,o=t.children;if(p(s)&&p(o))for(let r=0;r<s.length;r++){const e=s[r];let t=o[r];1&t.shapeFlag&&!t.dynamicChildren&&((t.patchFlag<=0||32===t.patchFlag)&&(t=o[r]=sr(o[r]),t.el=e.el),n||To(e,t)),t.type===Mo&&(t.el=e.el)}}function wo(e){const t=e.subTree.component;if(t)return t.asyncDep&&!t.asyncResolved?t:wo(t)}const Eo=e=>e&&(e.disabled||""===e.disabled),No=e=>"undefined"!=typeof SVGElement&&e instanceof SVGElement,Ao=e=>"function"==typeof MathMLElement&&e instanceof MathMLElement,Io=(e,t)=>{const n=e&&e.to;if(y(n)){if(t){return t(n)}return null}return n};function Ro(e,t,n,{o:{insert:s},m:o},r=2){0===r&&s(e.targetAnchor,t,n);const{el:i,anchor:l,shapeFlag:c,children:a,props:u}=e,d=2===r;if(d&&s(i,t,n),(!d||Eo(u))&&16&c)for(let p=0;p<a.length;p++)o(a[p],t,n,2);d&&s(l,t,n)}const Oo={name:"Teleport",__isTeleport:!0,process(e,t,n,s,o,r,i,l,c,a){const{mc:u,pc:d,pbc:p,o:{insert:h,querySelector:f,createText:m}}=a,g=Eo(t.props);let{shapeFlag:y,children:v,dynamicChildren:b}=t;if(null==e){const e=t.el=m(""),a=t.anchor=m("");h(e,n,s),h(a,n,s);const d=t.target=Io(t.props,f),p=t.targetAnchor=m("");d&&(h(p,d),"svg"===i||No(d)?i="svg":("mathml"===i||Ao(d))&&(i="mathml"));const b=(e,t)=>{16&y&&u(v,e,t,o,r,i,l,c)};g?b(n,a):d&&b(d,p)}else{t.el=e.el;const s=t.anchor=e.anchor,u=t.target=e.target,h=t.targetAnchor=e.targetAnchor,m=Eo(e.props),y=m?n:u,v=m?s:h;if("svg"===i||No(u)?i="svg":("mathml"===i||Ao(u))&&(i="mathml"),b?(p(e.dynamicChildren,b,y,o,r,i,l),To(e,t,!0)):c||d(e,t,y,v,o,r,i,l,!1),g)m?t.props&&e.props&&t.props.to!==e.props.to&&(t.props.to=e.props.to):Ro(t,n,s,a,1);else if((t.props&&t.props.to)!==(e.props&&e.props.to)){const e=t.target=Io(t.props,f);e&&Ro(t,e,null,a,0)}else m&&Ro(t,u,h,a,1)}Lo(t)},remove(e,t,n,s,{um:o,o:{remove:r}},i){const{shapeFlag:l,children:c,anchor:a,targetAnchor:u,target:d,props:p}=e;if(d&&r(u),i&&r(a),16&l){const e=i||!Eo(p);for(let s=0;s<c.length;s++){const r=c[s];o(r,t,n,e,!!r.dynamicChildren)}}},move:Ro,hydrate:function(e,t,n,s,o,r,{o:{nextSibling:i,parentNode:l,querySelector:c}},a){const u=t.target=Io(t.props,c);if(u){const c=u._lpa||u.firstChild;if(16&t.shapeFlag)if(Eo(t.props))t.anchor=a(i(e),t,l(e),n,s,o,r),t.targetAnchor=c;else{t.anchor=i(e);let l=c;for(;l;)if(l=i(l),l&&8===l.nodeType&&"teleport anchor"===l.data){t.targetAnchor=l,u._lpa=t.targetAnchor&&i(t.targetAnchor);break}a(c,t,u,n,s,o,r)}Lo(t)}return t.anchor&&i(t.anchor)}};function Lo(e){const t=e.ctx;if(t&&t.ut){let n=e.children[0].el;for(;n&&n!==e.targetAnchor;)1===n.nodeType&&n.setAttribute("data-v-owner",t.uid),n=n.nextSibling;t.ut()}}const Fo=Symbol.for("v-fgt"),Mo=Symbol.for("v-txt"),Po=Symbol.for("v-cmt"),$o=Symbol.for("v-stc"),Bo=[];let Vo=null;function Do(e=!1){Bo.push(Vo=e?null:[])}function Uo(){Bo.pop(),Vo=Bo[Bo.length-1]||null}let jo=1;function Ho(e){jo+=e}function qo(e){return e.dynamicChildren=jo>0?Vo||s:null,Uo(),jo>0&&Vo&&Vo.push(e),e}function Wo(e,t,n,s,o){return qo(Zo(e,t,n,s,o,!0))}function Ko(e){return!!e&&!0===e.__v_isVNode}function zo(e,t){return e.type===t.type&&e.key===t.key}const Go="__vInternal",Jo=({key:e})=>null!=e?e:null,Xo=({ref:e,ref_key:t,ref_for:n})=>("number"==typeof e&&(e=""+e),null!=e?y(e)||It(e)||g(e)?{i:hn,r:e,k:t,f:!!n}:e:null);function Qo(e,t=null,n=null,s=0,o=null,r=(e===Fo?0:1),i=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Jo(t),ref:t&&Xo(t),scopeId:fn,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:r,patchFlag:s,dynamicProps:o,dynamicChildren:null,appContext:null,ctx:hn};return l?(or(c,n),128&r&&e.normalize(c)):n&&(c.shapeFlag|=y(n)?8:16),jo>0&&!i&&Vo&&(c.patchFlag>0||6&r)&&32!==c.patchFlag&&Vo.push(c),c}const Zo=function(e,t=null,n=null,s=0,o=null,r=!1){e&&e!==Cn||(e=Po);if(Ko(e)){const s=er(e,t,!0);return n&&or(s,n),jo>0&&!r&&Vo&&(6&s.shapeFlag?Vo[Vo.indexOf(e)]=s:Vo.push(s)),s.patchFlag|=-2,s}i=e,g(i)&&"__vccOpts"in i&&(e=e.__vccOpts);var i;if(t){t=Yo(t);let{class:e,style:n}=t;e&&!y(e)&&(t.class=G(e)),b(n)&&(xt(n)&&!p(n)&&(n=c({},n)),t.style=H(n))}const l=y(e)?1:wn(e)?128:(e=>e.__isTeleport)(e)?64:b(e)?4:g(e)?2:0;return Qo(e,t,n,s,o,l,r,!0)};function Yo(e){return e?xt(e)||Go in e?c({},e):e:null}function er(e,t,n=!1){const{props:s,ref:o,patchFlag:r,children:i}=e,l=t?rr(s||{},t):s;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&Jo(l),ref:t&&t.ref?n&&o?p(o)?o.concat(Xo(t)):[o,Xo(t)]:Xo(t):o,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:i,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==Fo?-1===r?16:16|r:r,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&er(e.ssContent),ssFallback:e.ssFallback&&er(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function tr(e=" ",t=0){return Zo(Mo,null,e,t)}function nr(e){return null==e||"boolean"==typeof e?Zo(Po):p(e)?Zo(Fo,null,e.slice()):"object"==typeof e?sr(e):Zo(Mo,null,String(e))}function sr(e){return null===e.el&&-1!==e.patchFlag||e.memo?e:er(e)}function or(e,t){let n=0;const{shapeFlag:s}=e;if(null==t)t=null;else if(p(t))n=16;else if("object"==typeof t){if(65&s){const n=t.default;return void(n&&(n._c&&(n._d=!1),or(e,n()),n._c&&(n._d=!0)))}{n=32;const s=t._;s||Go in t?3===s&&hn&&(1===hn.slots._?t._=1:(t._=2,e.patchFlag|=1024)):t._ctx=hn}}else g(t)?(t={default:t,_ctx:hn},n=32):(t=String(t),64&s?(n=16,t=[tr(t)]):n=8);e.children=t,e.shapeFlag|=n}function rr(...e){const t={};for(let n=0;n<e.length;n++){const s=e[n];for(const e in s)if("class"===e)t.class!==s.class&&(t.class=G([t.class,s.class]));else if("style"===e)t.style=H([t.style,s.style]);else if(i(e)){const n=t[e],o=s[e];!o||n===o||p(n)&&n.includes(o)||(t[e]=n?[].concat(n,o):o)}else""!==e&&(t[e]=s[e])}return t}function ir(e,t,n,s=null){Ht(e,t,7,[n,s])}const lr=Ks();let cr=0;let ar=null;const ur=()=>ar||hn;let dr,pr;dr=e=>{ar=e},pr=e=>{vr=e};const hr=e=>{const t=ar;return dr(e),e.scope.on(),()=>{e.scope.off(),dr(t)}},fr=()=>{ar&&ar.scope.off(),dr(null)};function mr(e){return 4&e.vnode.shapeFlag}let gr,yr,vr=!1;function br(e,t,n){g(t)?e.render=t:b(t)&&(e.setupState=Pt(t)),Sr(e,n)}function _r(e){gr=e,yr=e=>{e.render._rc&&(e.withProxy=new Proxy(e.ctx,Rs))}}function Sr(e,t,n){const s=e.type;if(!e.render){if(!t&&gr&&!s.render){const t=s.template||Bs(e).template;if(t){const{isCustomElement:n,compilerOptions:o}=e.appContext.config,{delimiters:r,compilerOptions:i}=s,l=c(c({isCustomElement:n,delimiters:r},o),i);s.render=gr(t,l)}}e.render=s.render||o,yr&&yr(e)}{const t=hr(e);ve();try{Ms(e)}finally{be(),t()}}}function xr(e){const t=t=>{e.exposed=t||{}};return{get attrs(){return function(e){return e.attrsProxy||(e.attrsProxy=new Proxy(e.attrs,{get:(t,n)=>(Ae(e,0,"$attrs"),t[n])}))}(e)},slots:e.slots,emit:e.emit,expose:t}}function Cr(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(Pt(kt(e.exposed)),{get:(t,n)=>n in t?t[n]:n in Ns?Ns[n](e):void 0,has:(e,t)=>t in e||t in Ns}))}function kr(e,t=!0){return g(e)?e.displayName||e.name:e.name||t&&e.__name}const Tr=(e,t)=>function(e,t,n=!1){let s,r;const i=g(e);return i?(s=e,r=o):(s=e.get,r=e.set),new Et(s,r,i||!r,n)}(e,0,vr);function wr(e,t,n){const s=arguments.length;return 2===s?b(t)&&!p(t)?Ko(t)?Zo(e,null,[t]):Zo(e,t):Zo(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):3===s&&Ko(n)&&(n=[n]),Zo(e,t,n))}function Er(e,t){const n=e.memo;if(n.length!=t.length)return!1;for(let s=0;s<n.length;s++)if(M(n[s],t[s]))return!1;return jo>0&&Vo&&Vo.push(e),!0}const Nr="3.4.18",Ar=o,Ir=o,Rr="undefined"!=typeof document?document:null,Or=Rr&&Rr.createElement("template"),Lr={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const o="svg"===t?Rr.createElementNS("http://www.w3.org/2000/svg",e):"mathml"===t?Rr.createElementNS("http://www.w3.org/1998/Math/MathML",e):Rr.createElement(e,n?{is:n}:void 0);return"select"===e&&s&&null!=s.multiple&&o.setAttribute("multiple",s.multiple),o},createText:e=>Rr.createTextNode(e),createComment:e=>Rr.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Rr.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,o,r){const i=n?n.previousSibling:t.lastChild;if(o&&(o===r||o.nextSibling))for(;t.insertBefore(o.cloneNode(!0),n),o!==r&&(o=o.nextSibling););else{Or.innerHTML="svg"===s?`<svg>${e}</svg>`:"mathml"===s?`<math>${e}</math>`:e;const o=Or.content;if("svg"===s||"mathml"===s){const e=o.firstChild;for(;e.firstChild;)o.appendChild(e.firstChild);o.removeChild(e)}t.insertBefore(o,n)}return[i?i.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Fr="transition",Mr="animation",Pr=Symbol("_vtc"),$r=(e,{slots:t})=>wr(Jn,jr(e),t);$r.displayName="Transition";const Br={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String},Vr=$r.props=c({},Gn,Br),Dr=(e,t=[])=>{p(e)?e.forEach((e=>e(...t))):e&&e(...t)},Ur=e=>!!e&&(p(e)?e.some((e=>e.length>1)):e.length>1);function jr(e){const t={};for(const c in e)c in Br||(t[c]=e[c]);if(!1===e.css)return t;const{name:n="v",type:s,duration:o,enterFromClass:r=`${n}-enter-from`,enterActiveClass:i=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:a=r,appearActiveClass:u=i,appearToClass:d=l,leaveFromClass:p=`${n}-leave-from`,leaveActiveClass:h=`${n}-leave-active`,leaveToClass:f=`${n}-leave-to`}=e,m=function(e){if(null==e)return null;if(b(e))return[Hr(e.enter),Hr(e.leave)];{const t=Hr(e);return[t,t]}}(o),g=m&&m[0],y=m&&m[1],{onBeforeEnter:v,onEnter:_,onEnterCancelled:S,onLeave:x,onLeaveCancelled:C,onBeforeAppear:k=v,onAppear:T=_,onAppearCancelled:w=S}=t,E=(e,t,n)=>{Wr(e,t?d:l),Wr(e,t?u:i),n&&n()},N=(e,t)=>{e._isLeaving=!1,Wr(e,p),Wr(e,f),Wr(e,h),t&&t()},A=e=>(t,n)=>{const o=e?T:_,i=()=>E(t,e,n);Dr(o,[t,i]),Kr((()=>{Wr(t,e?a:r),qr(t,e?d:l),Ur(o)||Gr(t,s,g,i)}))};return c(t,{onBeforeEnter(e){Dr(v,[e]),qr(e,r),qr(e,i)},onBeforeAppear(e){Dr(k,[e]),qr(e,a),qr(e,u)},onEnter:A(!1),onAppear:A(!0),onLeave(e,t){e._isLeaving=!0;const n=()=>N(e,t);qr(e,p),Zr(),qr(e,h),Kr((()=>{e._isLeaving&&(Wr(e,p),qr(e,f),Ur(x)||Gr(e,s,y,n))})),Dr(x,[e,n])},onEnterCancelled(e){E(e,!1),Dr(S,[e])},onAppearCancelled(e){E(e,!0),Dr(w,[e])},onLeaveCancelled(e){N(e),Dr(C,[e])}})}function Hr(e){return V(e)}function qr(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.add(t))),(e[Pr]||(e[Pr]=new Set)).add(t)}function Wr(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.remove(t)));const n=e[Pr];n&&(n.delete(t),n.size||(e[Pr]=void 0))}function Kr(e){requestAnimationFrame((()=>{requestAnimationFrame(e)}))}let zr=0;function Gr(e,t,n,s){const o=e._endId=++zr,r=()=>{o===e._endId&&s()};if(n)return setTimeout(r,n);const{type:i,timeout:l,propCount:c}=Jr(e,t);if(!i)return s();const a=i+"end";let u=0;const d=()=>{e.removeEventListener(a,p),r()},p=t=>{t.target===e&&++u>=c&&d()};setTimeout((()=>{u<c&&d()}),l+1),e.addEventListener(a,p)}function Jr(e,t){const n=window.getComputedStyle(e),s=e=>(n[e]||"").split(", "),o=s(`${Fr}Delay`),r=s(`${Fr}Duration`),i=Xr(o,r),l=s(`${Mr}Delay`),c=s(`${Mr}Duration`),a=Xr(l,c);let u=null,d=0,p=0;t===Fr?i>0&&(u=Fr,d=i,p=r.length):t===Mr?a>0&&(u=Mr,d=a,p=c.length):(d=Math.max(i,a),u=d>0?i>a?Fr:Mr:null,p=u?u===Fr?r.length:c.length:0);return{type:u,timeout:d,propCount:p,hasTransform:u===Fr&&/\b(transform|all)(,|$)/.test(s(`${Fr}Property`).toString())}}function Xr(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max(...t.map(((t,n)=>Qr(t)+Qr(e[n]))))}function Qr(e){return"auto"===e?0:1e3*Number(e.slice(0,-1).replace(",","."))}function Zr(){return document.body.offsetHeight}const Yr=Symbol("_vod"),ei={beforeMount(e,{value:t},{transition:n}){e[Yr]="none"===e.style.display?"":e.style.display,n&&t?n.beforeEnter(e):ti(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:s}){!t==!n&&e.style.display===e[Yr]||(s?t?(s.beforeEnter(e),ti(e,!0),s.enter(e)):s.leave(e,(()=>{ti(e,!1)})):ti(e,t))},beforeUnmount(e,{value:t}){ti(e,t)}};function ti(e,t){e.style.display=t?e[Yr]:"none"}const ni=Symbol("");function si(e,t){if(128&e.shapeFlag){const n=e.suspense;e=n.activeBranch,n.pendingBranch&&!n.isHydrating&&n.effects.push((()=>{si(n.activeBranch,t)}))}for(;e.component;)e=e.component.subTree;if(1&e.shapeFlag&&e.el)oi(e.el,t);else if(e.type===Fo)e.children.forEach((e=>si(e,t)));else if(e.type===$o){let{el:n,anchor:s}=e;for(;n&&(oi(n,t),n!==s);)n=n.nextSibling}}function oi(e,t){if(1===e.nodeType){const n=e.style;let s="";for(const e in t)n.setProperty(`--${e}`,t[e]),s+=`--${e}: ${t[e]};`;n[ni]=s}}const ri=/(^|;)\s*display\s*:/;const ii=/\s*!important$/;function li(e,t,n){if(p(n))n.forEach((n=>li(e,t,n)));else if(null==n&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=function(e,t){const n=ai[t];if(n)return n;let s=I(t);if("filter"!==s&&s in e)return ai[t]=s;s=L(s);for(let o=0;o<ci.length;o++){const n=ci[o]+s;if(n in e)return ai[t]=n}return t}(e,t);ii.test(n)?e.setProperty(O(s),n.replace(ii,""),"important"):e[s]=n}}const ci=["Webkit","Moz","ms"],ai={};const ui="http://www.w3.org/1999/xlink";function di(e,t,n,s){e.addEventListener(t,n,s)}const pi=Symbol("_vei");function hi(e,t,n,s,o=null){const r=e[pi]||(e[pi]={}),i=r[t];if(s&&i)i.value=s;else{const[n,l]=function(e){let t;if(fi.test(e)){let n;for(t={};n=e.match(fi);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}const n=":"===e[2]?e.slice(3):O(e.slice(2));return[n,t]}(t);if(s){const i=r[t]=function(e,t){const n=e=>{if(e._vts){if(e._vts<=n.attached)return}else e._vts=Date.now();Ht(function(e,t){if(p(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map((e=>t=>!t._stopped&&e&&e(t)))}return t}(e,n.value),t,5,[e])};return n.value=e,n.attached=yi(),n}(s,o);di(e,n,i,l)}else i&&(!function(e,t,n,s){e.removeEventListener(t,n,s)}(e,n,i,l),r[t]=void 0)}}const fi=/(?:Once|Passive|Capture)$/;let mi=0;const gi=Promise.resolve(),yi=()=>mi||(gi.then((()=>mi=0)),mi=Date.now());const vi=e=>111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123;
+/*! #__NO_SIDE_EFFECTS__ */
+function bi(e,t){const n=ns(e);class s extends Si{constructor(e){super(n,e,t)}}return s.def=n,s}
+/*! #__NO_SIDE_EFFECTS__ */const _i="undefined"!=typeof HTMLElement?HTMLElement:class{};class Si extends _i{constructor(e,t={},n){super(),this._def=e,this._props=t,this._instance=null,this._connected=!1,this._resolved=!1,this._numberProps=null,this._ob=null,this.shadowRoot&&n?n(this._createVNode(),this.shadowRoot):(this.attachShadow({mode:"open"}),this._def.__asyncLoader||this._resolveProps(this._def))}connectedCallback(){this._connected=!0,this._instance||(this._resolved?this._update():this._resolveDef())}disconnectedCallback(){this._connected=!1,this._ob&&(this._ob.disconnect(),this._ob=null),en((()=>{this._connected||(Yi(null,this.shadowRoot),this._instance=null)}))}_resolveDef(){this._resolved=!0;for(let n=0;n<this.attributes.length;n++)this._setAttr(this.attributes[n].name);this._ob=new MutationObserver((e=>{for(const t of e)this._setAttr(t.attributeName)})),this._ob.observe(this,{attributes:!0});const e=(e,t=!1)=>{const{props:n,styles:s}=e;let o;if(n&&!p(n))for(const r in n){const e=n[r];(e===Number||e&&e.type===Number)&&(r in this._props&&(this._props[r]=V(this._props[r])),(o||(o=Object.create(null)))[I(r)]=!0)}this._numberProps=o,t&&this._resolveProps(e),this._applyStyles(s),this._update()},t=this._def.__asyncLoader;t?t().then((t=>e(t,!0))):e(this._def)}_resolveProps(e){const{props:t}=e,n=p(t)?t:Object.keys(t||{});for(const s of Object.keys(this))"_"!==s[0]&&n.includes(s)&&this._setProp(s,this[s],!0,!1);for(const s of n.map(I))Object.defineProperty(this,s,{get(){return this._getProp(s)},set(e){this._setProp(s,e)}})}_setAttr(e){let t=this.getAttribute(e);const n=I(e);this._numberProps&&this._numberProps[n]&&(t=V(t)),this._setProp(n,t,!1)}_getProp(e){return this._props[e]}_setProp(e,t,n=!0,s=!0){t!==this._props[e]&&(this._props[e]=t,s&&this._instance&&this._update(),n&&(!0===t?this.setAttribute(O(e),""):"string"==typeof t||"number"==typeof t?this.setAttribute(O(e),t+""):t||this.removeAttribute(O(e))))}_update(){Yi(this._createVNode(),this.shadowRoot)}_createVNode(){const e=Zo(this._def,c({},this._props));return this._instance||(e.ce=e=>{this._instance=e,e.isCE=!0;const t=(e,t)=>{this.dispatchEvent(new CustomEvent(e,{detail:t}))};e.emit=(e,...n)=>{t(e,n),O(e)!==e&&t(O(e),n)};let n=this;for(;n=n&&(n.parentNode||n.host);)if(n instanceof Si){e.parent=n._instance,e.provides=n._instance.provides;break}}),e}_applyStyles(e){e&&e.forEach((e=>{const t=document.createElement("style");t.textContent=e,this.shadowRoot.appendChild(t)}))}}const xi=new WeakMap,Ci=new WeakMap,ki=Symbol("_moveCb"),Ti=Symbol("_enterCb"),wi={name:"TransitionGroup",props:c({},Vr,{tag:String,moveClass:String}),setup(e,{slots:t}){const n=ur(),s=Kn();let o,r;return bs((()=>{if(!o.length)return;const t=e.moveClass||`${e.name||"v"}-move`;if(!function(e,t,n){const s=e.cloneNode(),o=e[Pr];o&&o.forEach((e=>{e.split(/\s+/).forEach((e=>e&&s.classList.remove(e)))}));n.split(/\s+/).forEach((e=>e&&s.classList.add(e))),s.style.display="none";const r=1===t.nodeType?t:t.parentNode;r.appendChild(s);const{hasTransform:i}=Jr(s);return r.removeChild(s),i}(o[0].el,n.vnode.el,t))return;o.forEach(Ni),o.forEach(Ai);const s=o.filter(Ii);Zr(),s.forEach((e=>{const n=e.el,s=n.style;qr(n,t),s.transform=s.webkitTransform=s.transitionDuration="";const o=n[ki]=e=>{e&&e.target!==n||e&&!/transform$/.test(e.propertyName)||(n.removeEventListener("transitionend",o),n[ki]=null,Wr(n,t))};n.addEventListener("transitionend",o)}))})),()=>{const i=Ct(e),l=jr(i);let c=i.tag||Fo;o=r,r=t.default?ts(t.default()):[];for(let e=0;e<r.length;e++){const t=r[e];null!=t.key&&es(t,Qn(t,l,s,n))}if(o)for(let e=0;e<o.length;e++){const t=o[e];es(t,Qn(t,l,s,n)),xi.set(t,t.el.getBoundingClientRect())}return Zo(c,null,r)}}},Ei=wi;function Ni(e){const t=e.el;t[ki]&&t[ki](),t[Ti]&&t[Ti]()}function Ai(e){Ci.set(e,e.el.getBoundingClientRect())}function Ii(e){const t=xi.get(e),n=Ci.get(e),s=t.left-n.left,o=t.top-n.top;if(s||o){const t=e.el.style;return t.transform=t.webkitTransform=`translate(${s}px,${o}px)`,t.transitionDuration="0s",e}}const Ri=e=>{const t=e.props["onUpdate:modelValue"]||!1;return p(t)?e=>P(t,e):t};function Oi(e){e.target.composing=!0}function Li(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const Fi=Symbol("_assign"),Mi={created(e,{modifiers:{lazy:t,trim:n,number:s}},o){e[Fi]=Ri(o);const r=s||o.props&&"number"===o.props.type;di(e,t?"change":"input",(t=>{if(t.target.composing)return;let s=e.value;n&&(s=s.trim()),r&&(s=B(s)),e[Fi](s)})),n&&di(e,"change",(()=>{e.value=e.value.trim()})),t||(di(e,"compositionstart",Oi),di(e,"compositionend",Li),di(e,"change",Li))},mounted(e,{value:t}){e.value=null==t?"":t},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:s,number:o}},r){if(e[Fi]=Ri(r),e.composing)return;const i=null==t?"":t;if((o||"number"===e.type?B(e.value):e.value)!==i){if(document.activeElement===e&&"range"!==e.type){if(n)return;if(s&&e.value.trim()===i)return}e.value=i}}},Pi={deep:!0,created(e,t,n){e[Fi]=Ri(n),di(e,"change",(()=>{const t=e._modelValue,n=Ui(e),s=e.checked,o=e[Fi];if(p(t)){const e=ne(t,n),r=-1!==e;if(s&&!r)o(t.concat(n));else if(!s&&r){const n=[...t];n.splice(e,1),o(n)}}else if(f(t)){const e=new Set(t);s?e.add(n):e.delete(n),o(e)}else o(ji(e,s))}))},mounted:$i,beforeUpdate(e,t,n){e[Fi]=Ri(n),$i(e,t,n)}};function $i(e,{value:t,oldValue:n},s){e._modelValue=t,p(t)?e.checked=ne(t,s.props.value)>-1:f(t)?e.checked=t.has(s.props.value):t!==n&&(e.checked=te(t,ji(e,!0)))}const Bi={created(e,{value:t},n){e.checked=te(t,n.props.value),e[Fi]=Ri(n),di(e,"change",(()=>{e[Fi](Ui(e))}))},beforeUpdate(e,{value:t,oldValue:n},s){e[Fi]=Ri(s),t!==n&&(e.checked=te(t,s.props.value))}},Vi={deep:!0,created(e,{value:t,modifiers:{number:n}},s){const o=f(t);di(e,"change",(()=>{const t=Array.prototype.filter.call(e.options,(e=>e.selected)).map((e=>n?B(Ui(e)):Ui(e)));e[Fi](e.multiple?o?new Set(t):t:t[0]),e._assigning=!0,en((()=>{e._assigning=!1}))})),e[Fi]=Ri(s)},mounted(e,{value:t,oldValue:n,modifiers:{number:s}}){Di(e,t,n,s)},beforeUpdate(e,t,n){e[Fi]=Ri(n)},updated(e,{value:t,oldValue:n,modifiers:{number:s}}){e._assigning||Di(e,t,n,s)}};function Di(e,t,n,s){const o=e.multiple,r=p(t);if(!o||r||f(t)){for(let n=0,i=e.options.length;n<i;n++){const i=e.options[n],l=Ui(i);if(o)if(r){const e=typeof l;i.selected="string"===e||"number"===e?t.includes(s?B(l):l):ne(t,l)>-1}else i.selected=t.has(l);else if(te(Ui(i),t))return void(e.selectedIndex!==n&&(e.selectedIndex=n))}o||-1===e.selectedIndex||(e.selectedIndex=-1)}}function Ui(e){return"_value"in e?e._value:e.value}function ji(e,t){const n=t?"_trueValue":"_falseValue";return n in e?e[n]:t}const Hi={created(e,t,n){qi(e,t,n,null,"created")},mounted(e,t,n){qi(e,t,n,null,"mounted")},beforeUpdate(e,t,n,s){qi(e,t,n,s,"beforeUpdate")},updated(e,t,n,s){qi(e,t,n,s,"updated")}};function qi(e,t,n,s,o){const r=function(e,t){switch(e){case"SELECT":return Vi;case"TEXTAREA":return Mi;default:switch(t){case"checkbox":return Pi;case"radio":return Bi;default:return Mi}}}(e.tagName,n.props&&n.props.type)[o];r&&r(e,t,n,s)}const Wi=["ctrl","shift","alt","meta"],Ki={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&0!==e.button,middle:e=>"button"in e&&1!==e.button,right:e=>"button"in e&&2!==e.button,exact:(e,t)=>Wi.some((n=>e[`${n}Key`]&&!t.includes(n)))},zi={esc:"escape",space:" ",up:"arrow-up",left:"arrow-left",right:"arrow-right",down:"arrow-down",delete:"backspace"},Gi=c({patchProp:(e,t,n,s,o,r,c,a,u)=>{const d="svg"===o;"class"===t?function(e,t,n){const s=e[Pr];s&&(t=(t?[t,...s]:[...s]).join(" ")),null==t?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}(e,s,d):"style"===t?function(e,t,n){const s=e.style,o=y(n),r=s.display;let i=!1;if(n&&!o){if(t&&!y(t))for(const e in t)null==n[e]&&li(s,e,"");for(const e in n)"display"===e&&(i=!0),li(s,e,n[e])}else if(o){if(t!==n){const e=s[ni];e&&(n+=";"+e),s.cssText=n,i=ri.test(n)}}else t&&e.removeAttribute("style");Yr in e&&(e[Yr]=i?s.display:"",s.display=r)}(e,n,s):i(t)?l(t)||hi(e,t,0,s,c):("."===t[0]?(t=t.slice(1),1):"^"===t[0]?(t=t.slice(1),0):function(e,t,n,s){if(s)return"innerHTML"===t||"textContent"===t||!!(t in e&&vi(t)&&g(n));if("spellcheck"===t||"draggable"===t||"translate"===t)return!1;if("form"===t)return!1;if("list"===t&&"INPUT"===e.tagName)return!1;if("type"===t&&"TEXTAREA"===e.tagName)return!1;if("width"===t||"height"===t){const t=e.tagName;if("IMG"===t||"VIDEO"===t||"CANVAS"===t||"SOURCE"===t)return!1}if(vi(t)&&y(n))return!1;return t in e}(e,t,s,d))?function(e,t,n,s,o,r,i){if("innerHTML"===t||"textContent"===t)return s&&i(s,o,r),void(e[t]=null==n?"":n);const l=e.tagName;if("value"===t&&"PROGRESS"!==l&&!l.includes("-")){e._value=n;const s=null==n?"":n;return("OPTION"===l?e.getAttribute("value"):e.value)!==s&&(e.value=s),void(null==n&&e.removeAttribute(t))}let c=!1;if(""===n||null==n){const s=typeof e[t];"boolean"===s?n=ee(n):null==n&&"string"===s?(n="",c=!0):"number"===s&&(n=0,c=!0)}try{e[t]=n}catch(a){}c&&e.removeAttribute(t)}(e,t,s,r,c,a,u):("true-value"===t?e._trueValue=s:"false-value"===t&&(e._falseValue=s),function(e,t,n,s,o){if(s&&t.startsWith("xlink:"))null==n?e.removeAttributeNS(ui,t.slice(6,t.length)):e.setAttributeNS(ui,t,n);else{const s=Y(t);null==n||s&&!ee(n)?e.removeAttribute(t):e.setAttribute(t,s?"":n)}}(e,t,s,d))}},Lr);let Ji,Xi=!1;function Qi(){return Ji||(Ji=bo(Gi))}function Zi(){return Ji=Xi?Ji:_o(Gi),Xi=!0,Ji}const Yi=(...e)=>{Qi().render(...e)},el=(...e)=>{Zi().hydrate(...e)};function tl(e){return e instanceof SVGElement?"svg":"function"==typeof MathMLElement&&e instanceof MathMLElement?"mathml":void 0}function nl(e){if(y(e)){return document.querySelector(e)}return e}const sl=o,ol=Symbol(""),rl=Symbol(""),il=Symbol(""),ll=Symbol(""),cl=Symbol(""),al=Symbol(""),ul=Symbol(""),dl=Symbol(""),pl=Symbol(""),hl=Symbol(""),fl=Symbol(""),ml=Symbol(""),gl=Symbol(""),yl=Symbol(""),vl=Symbol(""),bl=Symbol(""),_l=Symbol(""),Sl=Symbol(""),xl=Symbol(""),Cl=Symbol(""),kl=Symbol(""),Tl=Symbol(""),wl=Symbol(""),El=Symbol(""),Nl=Symbol(""),Al=Symbol(""),Il=Symbol(""),Rl=Symbol(""),Ol=Symbol(""),Ll=Symbol(""),Fl=Symbol(""),Ml=Symbol(""),Pl=Symbol(""),$l=Symbol(""),Bl=Symbol(""),Vl=Symbol(""),Dl=Symbol(""),Ul=Symbol(""),jl=Symbol(""),Hl={[ol]:"Fragment",[rl]:"Teleport",[il]:"Suspense",[ll]:"KeepAlive",[cl]:"BaseTransition",[al]:"openBlock",[ul]:"createBlock",[dl]:"createElementBlock",[pl]:"createVNode",[hl]:"createElementVNode",[fl]:"createCommentVNode",[ml]:"createTextVNode",[gl]:"createStaticVNode",[yl]:"resolveComponent",[vl]:"resolveDynamicComponent",[bl]:"resolveDirective",[_l]:"resolveFilter",[Sl]:"withDirectives",[xl]:"renderList",[Cl]:"renderSlot",[kl]:"createSlots",[Tl]:"toDisplayString",[wl]:"mergeProps",[El]:"normalizeClass",[Nl]:"normalizeStyle",[Al]:"normalizeProps",[Il]:"guardReactiveProps",[Rl]:"toHandlers",[Ol]:"camelize",[Ll]:"capitalize",[Fl]:"toHandlerKey",[Ml]:"setBlockTracking",[Pl]:"pushScopeId",[$l]:"popScopeId",[Bl]:"withCtx",[Vl]:"unref",[Dl]:"isRef",[Ul]:"withMemo",[jl]:"isMemoSame"};const ql={start:{line:1,column:1,offset:0},end:{line:1,column:1,offset:0},source:""};function Wl(e,t,n,s,o,r,i,l=!1,c=!1,a=!1,u=ql){return e&&(l?(e.helper(al),e.helper(tc(e.inSSR,a))):e.helper(ec(e.inSSR,a)),i&&e.helper(Sl)),{type:13,tag:t,props:n,children:s,patchFlag:o,dynamicProps:r,directives:i,isBlock:l,disableTracking:c,isComponent:a,loc:u}}function Kl(e,t=ql){return{type:17,loc:t,elements:e}}function zl(e,t=ql){return{type:15,loc:t,properties:e}}function Gl(e,t){return{type:16,loc:ql,key:y(e)?Jl(e,!0):e,value:t}}function Jl(e,t=!1,n=ql,s=0){return{type:4,loc:n,content:e,isStatic:t,constType:t?3:s}}function Xl(e,t=ql){return{type:8,loc:t,children:e}}function Ql(e,t=[],n=ql){return{type:14,loc:n,callee:e,arguments:t}}function Zl(e,t=void 0,n=!1,s=!1,o=ql){return{type:18,params:e,returns:t,newline:n,isSlot:s,loc:o}}function Yl(e,t,n,s=!0){return{type:19,test:e,consequent:t,alternate:n,newline:s,loc:ql}}function ec(e,t){return e||t?pl:hl}function tc(e,t){return e||t?ul:dl}function nc(e,{helper:t,removeHelper:n,inSSR:s}){e.isBlock||(e.isBlock=!0,n(ec(s,e.isComponent)),t(al),t(tc(s,e.isComponent)))}const sc=new Uint8Array([123,123]),oc=new Uint8Array([125,125]);function rc(e){return e>=97&&e<=122||e>=65&&e<=90}function ic(e){return 32===e||10===e||9===e||12===e||13===e}function lc(e){return 47===e||62===e||ic(e)}function cc(e){const t=new Uint8Array(e.length);for(let n=0;n<e.length;n++)t[n]=e.charCodeAt(n);return t}const ac={Cdata:new Uint8Array([67,68,65,84,65,91]),CdataEnd:new Uint8Array([93,93,62]),CommentEnd:new Uint8Array([45,45,62]),ScriptEnd:new Uint8Array([60,47,115,99,114,105,112,116]),StyleEnd:new Uint8Array([60,47,115,116,121,108,101]),TitleEnd:new Uint8Array([60,47,116,105,116,108,101]),TextareaEnd:new Uint8Array([60,47,116,101,120,116,97,114,101,97])};function uc(e){throw e}function dc(e){}function pc(e,t,n,s){const o=new SyntaxError(String(`https://vuejs.org/error-reference/#compiler-${e}`));return o.code=e,o.loc=t,o}const hc=e=>4===e.type&&e.isStatic;function fc(e){switch(e){case"Teleport":case"teleport":return rl;case"Suspense":case"suspense":return il;case"KeepAlive":case"keep-alive":return ll;case"BaseTransition":case"base-transition":return cl}}const mc=/^\d|[^\$\w]/,gc=e=>!mc.test(e),yc=/[A-Za-z_$\xA0-\uFFFF]/,vc=/[\.\?\w$\xA0-\uFFFF]/,bc=/\s+[.[]\s*|\s*[.[]\s+/g,_c=e=>{e=e.trim().replace(bc,(e=>e.trim()));let t=0,n=[],s=0,o=0,r=null;for(let i=0;i<e.length;i++){const l=e.charAt(i);switch(t){case 0:if("["===l)n.push(t),t=1,s++;else if("("===l)n.push(t),t=2,o++;else if(!(0===i?yc:vc).test(l))return!1;break;case 1:"'"===l||'"'===l||"`"===l?(n.push(t),t=3,r=l):"["===l?s++:"]"===l&&(--s||(t=n.pop()));break;case 2:if("'"===l||'"'===l||"`"===l)n.push(t),t=3,r=l;else if("("===l)o++;else if(")"===l){if(i===e.length-1)return!1;--o||(t=n.pop())}break;case 3:l===r&&(t=n.pop(),r=null)}}return!s&&!o};function Sc(e,t,n=!1){for(let s=0;s<e.props.length;s++){const o=e.props[s];if(7===o.type&&(n||o.exp)&&(y(t)?o.name===t:t.test(o.name)))return o}}function xc(e,t,n=!1,s=!1){for(let o=0;o<e.props.length;o++){const r=e.props[o];if(6===r.type){if(n)continue;if(r.name===t&&(r.value||s))return r}else if("bind"===r.name&&(r.exp||s)&&Cc(r.arg,t))return r}}function Cc(e,t){return!(!e||!hc(e)||e.content!==t)}function kc(e){return 5===e.type||2===e.type}function Tc(e){return 7===e.type&&"slot"===e.name}function wc(e){return 1===e.type&&3===e.tagType}function Ec(e){return 1===e.type&&2===e.tagType}const Nc=new Set([Al,Il]);function Ac(e,t=[]){if(e&&!y(e)&&14===e.type){const n=e.callee;if(!y(n)&&Nc.has(n))return Ac(e.arguments[0],t.concat(e))}return[e,t]}function Ic(e,t,n){let s,o,r=13===e.type?e.props:e.arguments[2],i=[];if(r&&!y(r)&&14===r.type){const e=Ac(r);r=e[0],i=e[1],o=i[i.length-1]}if(null==r||y(r))s=zl([t]);else if(14===r.type){const e=r.arguments[0];y(e)||15!==e.type?r.callee===Rl?s=Ql(n.helper(wl),[zl([t]),r]):r.arguments.unshift(zl([t])):Rc(t,e)||e.properties.unshift(t),!s&&(s=r)}else 15===r.type?(Rc(t,r)||r.properties.unshift(t),s=r):(s=Ql(n.helper(wl),[zl([t]),r]),o&&o.callee===Il&&(o=i[i.length-2]));13===e.type?o?o.arguments[0]=s:e.props=s:o?o.arguments[0]=s:e.arguments[2]=s}function Rc(e,t){let n=!1;if(4===e.key.type){const s=e.key.content;n=t.properties.some((e=>4===e.key.type&&e.key.content===s))}return n}function Oc(e,t){return`_${t}_${e.replace(/[^\w]/g,((t,n)=>"-"===t?"_":e.charCodeAt(n).toString()))}`}const Lc=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,Fc={parseMode:"base",ns:0,delimiters:["{{","}}"],getNamespace:()=>0,isVoidTag:r,isPreTag:r,isCustomElement:r,onError:uc,onWarn:dc,comments:!1,prefixIdentifiers:!1};let Mc=Fc,Pc=null,$c="",Bc=null,Vc=null,Dc="",Uc=-1,jc=-1,Hc=0,qc=!1,Wc=null;const Kc=[],zc=new class{constructor(e,t){this.stack=e,this.cbs=t,this.state=1,this.buffer="",this.sectionStart=0,this.index=0,this.entityStart=0,this.baseState=1,this.inRCDATA=!1,this.inXML=!1,this.inVPre=!1,this.newlines=[],this.mode=0,this.delimiterOpen=sc,this.delimiterClose=oc,this.delimiterIndex=-1,this.currentSequence=void 0,this.sequenceIndex=0}get inSFCRoot(){return 2===this.mode&&0===this.stack.length}reset(){this.state=1,this.mode=0,this.buffer="",this.sectionStart=0,this.index=0,this.baseState=1,this.inRCDATA=!1,this.currentSequence=void 0,this.newlines.length=0,this.delimiterOpen=sc,this.delimiterClose=oc}getPos(e){let t=1,n=e+1;for(let s=this.newlines.length-1;s>=0;s--){const o=this.newlines[s];if(e>o){t=s+2,n=e-o;break}}return{column:n,line:t,offset:e}}peek(){return this.buffer.charCodeAt(this.index+1)}stateText(e){60===e?(this.index>this.sectionStart&&this.cbs.ontext(this.sectionStart,this.index),this.state=5,this.sectionStart=this.index):this.inVPre||e!==this.delimiterOpen[0]||(this.state=2,this.delimiterIndex=0,this.stateInterpolationOpen(e))}stateInterpolationOpen(e){if(e===this.delimiterOpen[this.delimiterIndex])if(this.delimiterIndex===this.delimiterOpen.length-1){const e=this.index+1-this.delimiterOpen.length;e>this.sectionStart&&this.cbs.ontext(this.sectionStart,e),this.state=3,this.sectionStart=e}else this.delimiterIndex++;else this.inRCDATA?(this.state=32,this.stateInRCDATA(e)):(this.state=1,this.stateText(e))}stateInterpolation(e){e===this.delimiterClose[0]&&(this.state=4,this.delimiterIndex=0,this.stateInterpolationClose(e))}stateInterpolationClose(e){e===this.delimiterClose[this.delimiterIndex]?this.delimiterIndex===this.delimiterClose.length-1?(this.cbs.oninterpolation(this.sectionStart,this.index+1),this.state=this.inRCDATA?32:1,this.sectionStart=this.index+1):this.delimiterIndex++:(this.state=3,this.stateInterpolation(e))}stateSpecialStartSequence(e){const t=this.sequenceIndex===this.currentSequence.length;if(t?lc(e):(32|e)===this.currentSequence[this.sequenceIndex]){if(!t)return void this.sequenceIndex++}else this.inRCDATA=!1;this.sequenceIndex=0,this.state=6,this.stateInTagName(e)}stateInRCDATA(e){if(this.sequenceIndex===this.currentSequence.length){if(62===e||ic(e)){const t=this.index-this.currentSequence.length;if(this.sectionStart<t){const e=this.index;this.index=t,this.cbs.ontext(this.sectionStart,t),this.index=e}return this.sectionStart=t+2,this.stateInClosingTagName(e),void(this.inRCDATA=!1)}this.sequenceIndex=0}(32|e)===this.currentSequence[this.sequenceIndex]?this.sequenceIndex+=1:0===this.sequenceIndex?this.currentSequence===ac.TitleEnd||this.currentSequence===ac.TextareaEnd&&!this.inSFCRoot?e===this.delimiterOpen[0]&&(this.state=2,this.delimiterIndex=0,this.stateInterpolationOpen(e)):this.fastForwardTo(60)&&(this.sequenceIndex=1):this.sequenceIndex=Number(60===e)}stateCDATASequence(e){e===ac.Cdata[this.sequenceIndex]?++this.sequenceIndex===ac.Cdata.length&&(this.state=28,this.currentSequence=ac.CdataEnd,this.sequenceIndex=0,this.sectionStart=this.index+1):(this.sequenceIndex=0,this.state=23,this.stateInDeclaration(e))}fastForwardTo(e){for(;++this.index<this.buffer.length;){const t=this.buffer.charCodeAt(this.index);if(10===t&&this.newlines.push(this.index),t===e)return!0}return this.index=this.buffer.length-1,!1}stateInCommentLike(e){e===this.currentSequence[this.sequenceIndex]?++this.sequenceIndex===this.currentSequence.length&&(this.currentSequence===ac.CdataEnd?this.cbs.oncdata(this.sectionStart,this.index-2):this.cbs.oncomment(this.sectionStart,this.index-2),this.sequenceIndex=0,this.sectionStart=this.index+1,this.state=1):0===this.sequenceIndex?this.fastForwardTo(this.currentSequence[0])&&(this.sequenceIndex=1):e!==this.currentSequence[this.sequenceIndex-1]&&(this.sequenceIndex=0)}startSpecial(e,t){this.enterRCDATA(e,t),this.state=31}enterRCDATA(e,t){this.inRCDATA=!0,this.currentSequence=e,this.sequenceIndex=t}stateBeforeTagName(e){if(33===e)this.state=22,this.sectionStart=this.index+1;else if(63===e)this.state=24,this.sectionStart=this.index+1;else if(rc(e))if(this.sectionStart=this.index,0===this.mode)this.state=6;else if(this.inSFCRoot)this.state=34;else if(this.inXML)this.state=6;else{const t=32|e;this.state=116===t?30:115===t?29:6}else 47===e?this.state=8:(this.state=1,this.stateText(e))}stateInTagName(e){lc(e)&&this.handleTagName(e)}stateInSFCRootTagName(e){if(lc(e)){const t=this.buffer.slice(this.sectionStart,this.index);"template"!==t&&this.enterRCDATA(cc("</"+t),0),this.handleTagName(e)}}handleTagName(e){this.cbs.onopentagname(this.sectionStart,this.index),this.sectionStart=-1,this.state=11,this.stateBeforeAttrName(e)}stateBeforeClosingTagName(e){ic(e)||(62===e?(this.state=1,this.sectionStart=this.index+1):(this.state=rc(e)?9:27,this.sectionStart=this.index))}stateInClosingTagName(e){(62===e||ic(e))&&(this.cbs.onclosetag(this.sectionStart,this.index),this.sectionStart=-1,this.state=10,this.stateAfterClosingTagName(e))}stateAfterClosingTagName(e){62===e&&(this.state=1,this.sectionStart=this.index+1)}stateBeforeAttrName(e){62===e?(this.cbs.onopentagend(this.index),this.state=this.inRCDATA?32:1,this.sectionStart=this.index+1):47===e?this.state=7:60===e&&47===this.peek()?(this.cbs.onopentagend(this.index),this.state=5,this.sectionStart=this.index):ic(e)||this.handleAttrStart(e)}handleAttrStart(e){118===e&&45===this.peek()?(this.state=13,this.sectionStart=this.index):46===e||58===e||64===e||35===e?(this.cbs.ondirname(this.index,this.index+1),this.state=14,this.sectionStart=this.index+1):(this.state=12,this.sectionStart=this.index)}stateInSelfClosingTag(e){62===e?(this.cbs.onselfclosingtag(this.index),this.state=1,this.sectionStart=this.index+1,this.inRCDATA=!1):ic(e)||(this.state=11,this.stateBeforeAttrName(e))}stateInAttrName(e){(61===e||lc(e))&&(this.cbs.onattribname(this.sectionStart,this.index),this.handleAttrNameEnd(e))}stateInDirName(e){61===e||lc(e)?(this.cbs.ondirname(this.sectionStart,this.index),this.handleAttrNameEnd(e)):58===e?(this.cbs.ondirname(this.sectionStart,this.index),this.state=14,this.sectionStart=this.index+1):46===e&&(this.cbs.ondirname(this.sectionStart,this.index),this.state=16,this.sectionStart=this.index+1)}stateInDirArg(e){61===e||lc(e)?(this.cbs.ondirarg(this.sectionStart,this.index),this.handleAttrNameEnd(e)):91===e?this.state=15:46===e&&(this.cbs.ondirarg(this.sectionStart,this.index),this.state=16,this.sectionStart=this.index+1)}stateInDynamicDirArg(e){93===e?this.state=14:(61===e||lc(e))&&(this.cbs.ondirarg(this.sectionStart,this.index+1),this.handleAttrNameEnd(e))}stateInDirModifier(e){61===e||lc(e)?(this.cbs.ondirmodifier(this.sectionStart,this.index),this.handleAttrNameEnd(e)):46===e&&(this.cbs.ondirmodifier(this.sectionStart,this.index),this.sectionStart=this.index+1)}handleAttrNameEnd(e){this.sectionStart=this.index,this.state=17,this.cbs.onattribnameend(this.index),this.stateAfterAttrName(e)}stateAfterAttrName(e){61===e?this.state=18:47===e||62===e?(this.cbs.onattribend(0,this.sectionStart),this.sectionStart=-1,this.state=11,this.stateBeforeAttrName(e)):ic(e)||(this.cbs.onattribend(0,this.sectionStart),this.handleAttrStart(e))}stateBeforeAttrValue(e){34===e?(this.state=19,this.sectionStart=this.index+1):39===e?(this.state=20,this.sectionStart=this.index+1):ic(e)||(this.sectionStart=this.index,this.state=21,this.stateInAttrValueNoQuotes(e))}handleInAttrValue(e,t){(e===t||this.fastForwardTo(t))&&(this.cbs.onattribdata(this.sectionStart,this.index),this.sectionStart=-1,this.cbs.onattribend(34===t?3:2,this.index+1),this.state=11)}stateInAttrValueDoubleQuotes(e){this.handleInAttrValue(e,34)}stateInAttrValueSingleQuotes(e){this.handleInAttrValue(e,39)}stateInAttrValueNoQuotes(e){ic(e)||62===e?(this.cbs.onattribdata(this.sectionStart,this.index),this.sectionStart=-1,this.cbs.onattribend(1,this.index),this.state=11,this.stateBeforeAttrName(e)):39!==e&&60!==e&&61!==e&&96!==e||this.cbs.onerr(18,this.index)}stateBeforeDeclaration(e){91===e?(this.state=26,this.sequenceIndex=0):this.state=45===e?25:23}stateInDeclaration(e){(62===e||this.fastForwardTo(62))&&(this.state=1,this.sectionStart=this.index+1)}stateInProcessingInstruction(e){(62===e||this.fastForwardTo(62))&&(this.cbs.onprocessinginstruction(this.sectionStart,this.index),this.state=1,this.sectionStart=this.index+1)}stateBeforeComment(e){45===e?(this.state=28,this.currentSequence=ac.CommentEnd,this.sequenceIndex=2,this.sectionStart=this.index+1):this.state=23}stateInSpecialComment(e){(62===e||this.fastForwardTo(62))&&(this.cbs.oncomment(this.sectionStart,this.index),this.state=1,this.sectionStart=this.index+1)}stateBeforeSpecialS(e){const t=32|e;t===ac.ScriptEnd[3]?this.startSpecial(ac.ScriptEnd,4):t===ac.StyleEnd[3]?this.startSpecial(ac.StyleEnd,4):(this.state=6,this.stateInTagName(e))}stateBeforeSpecialT(e){const t=32|e;t===ac.TitleEnd[3]?this.startSpecial(ac.TitleEnd,4):t===ac.TextareaEnd[3]?this.startSpecial(ac.TextareaEnd,4):(this.state=6,this.stateInTagName(e))}startEntity(){}stateInEntity(){}parse(e){for(this.buffer=e;this.index<this.buffer.length;){const e=this.buffer.charCodeAt(this.index);switch(10===e&&this.newlines.push(this.index),this.state){case 1:this.stateText(e);break;case 2:this.stateInterpolationOpen(e);break;case 3:this.stateInterpolation(e);break;case 4:this.stateInterpolationClose(e);break;case 31:this.stateSpecialStartSequence(e);break;case 32:this.stateInRCDATA(e);break;case 26:this.stateCDATASequence(e);break;case 19:this.stateInAttrValueDoubleQuotes(e);break;case 12:this.stateInAttrName(e);break;case 13:this.stateInDirName(e);break;case 14:this.stateInDirArg(e);break;case 15:this.stateInDynamicDirArg(e);break;case 16:this.stateInDirModifier(e);break;case 28:this.stateInCommentLike(e);break;case 27:this.stateInSpecialComment(e);break;case 11:this.stateBeforeAttrName(e);break;case 6:this.stateInTagName(e);break;case 34:this.stateInSFCRootTagName(e);break;case 9:this.stateInClosingTagName(e);break;case 5:this.stateBeforeTagName(e);break;case 17:this.stateAfterAttrName(e);break;case 20:this.stateInAttrValueSingleQuotes(e);break;case 18:this.stateBeforeAttrValue(e);break;case 8:this.stateBeforeClosingTagName(e);break;case 10:this.stateAfterClosingTagName(e);break;case 29:this.stateBeforeSpecialS(e);break;case 30:this.stateBeforeSpecialT(e);break;case 21:this.stateInAttrValueNoQuotes(e);break;case 7:this.stateInSelfClosingTag(e);break;case 23:this.stateInDeclaration(e);break;case 22:this.stateBeforeDeclaration(e);break;case 25:this.stateBeforeComment(e);break;case 24:this.stateInProcessingInstruction(e);break;case 33:this.stateInEntity()}this.index++}this.cleanup(),this.finish()}cleanup(){this.sectionStart!==this.index&&(1===this.state||32===this.state&&0===this.sequenceIndex?(this.cbs.ontext(this.sectionStart,this.index),this.sectionStart=this.index):19!==this.state&&20!==this.state&&21!==this.state||(this.cbs.onattribdata(this.sectionStart,this.index),this.sectionStart=this.index))}finish(){this.handleTrailingData(),this.cbs.onend()}handleTrailingData(){const e=this.buffer.length;this.sectionStart>=e||(28===this.state?this.currentSequence===ac.CdataEnd?this.cbs.oncdata(this.sectionStart,e):this.cbs.oncomment(this.sectionStart,e):6===this.state||11===this.state||18===this.state||17===this.state||12===this.state||13===this.state||14===this.state||15===this.state||16===this.state||20===this.state||19===this.state||21===this.state||9===this.state||this.cbs.ontext(this.sectionStart,e))}emitCodePoint(e,t){}}(Kc,{onerr:pa,ontext(e,t){Zc(Xc(e,t),e,t)},ontextentity(e,t,n){Zc(e,t,n)},oninterpolation(e,t){if(qc)return Zc(Xc(e,t),e,t);let n=e+zc.delimiterOpen.length,s=t-zc.delimiterClose.length;for(;ic($c.charCodeAt(n));)n++;for(;ic($c.charCodeAt(s-1));)s--;let o=Xc(n,s);o.includes("&")&&(o=Mc.decodeEntities(o,!1)),la({type:5,content:da(o,!1,ca(n,s)),loc:ca(e,t)})},onopentagname(e,t){const n=Xc(e,t);Bc={type:1,tag:n,ns:Mc.getNamespace(n,Kc[0],Mc.ns),tagType:0,props:[],children:[],loc:ca(e-1,t),codegenNode:void 0}},onopentagend(e){Qc(e)},onclosetag(e,t){const n=Xc(e,t);if(!Mc.isVoidTag(n)){let s=!1;for(let e=0;e<Kc.length;e++){if(Kc[e].tag.toLowerCase()===n.toLowerCase()){s=!0;for(let n=0;n<=e;n++){Yc(Kc.shift(),t,n<e)}break}}s||ea(e,60)}},onselfclosingtag(e){var t;const n=Bc.tag;Bc.isSelfClosing=!0,Qc(e),(null==(t=Kc[0])?void 0:t.tag)===n&&Yc(Kc.shift(),e)},onattribname(e,t){Vc={type:6,name:Xc(e,t),nameLoc:ca(e,t),value:void 0,loc:ca(e)}},ondirname(e,t){const n=Xc(e,t),s="."===n||":"===n?"bind":"@"===n?"on":"#"===n?"slot":n.slice(2);if(qc||""===s)Vc={type:6,name:n,nameLoc:ca(e,t),value:void 0,loc:ca(e)};else if(Vc={type:7,name:s,rawName:n,exp:void 0,arg:void 0,modifiers:"."===n?["prop"]:[],loc:ca(e)},"pre"===s){qc=zc.inVPre=!0,Wc=Bc;const e=Bc.props;for(let t=0;t<e.length;t++)7===e[t].type&&(e[t]=ua(e[t]))}},ondirarg(e,t){if(e===t)return;const n=Xc(e,t);if(qc)Vc.name+=n,aa(Vc.nameLoc,t);else{const s="["!==n[0];Vc.arg=da(s?n:n.slice(1,-1),s,ca(e,t),s?3:0)}},ondirmodifier(e,t){const n=Xc(e,t);if(qc)Vc.name+="."+n,aa(Vc.nameLoc,t);else if("slot"===Vc.name){const e=Vc.arg;e&&(e.content+="."+n,aa(e.loc,t))}else Vc.modifiers.push(n)},onattribdata(e,t){Dc+=Xc(e,t),Uc<0&&(Uc=e),jc=t},onattribentity(e,t,n){Dc+=e,Uc<0&&(Uc=t),jc=n},onattribnameend(e){const t=Xc(Vc.loc.start.offset,e);7===Vc.type&&(Vc.rawName=t),Bc.props.some((e=>(7===e.type?e.rawName:e.name)===t))},onattribend(e,t){if(Bc&&Vc){if(aa(Vc.loc,t),0!==e)if(Dc.includes("&")&&(Dc=Mc.decodeEntities(Dc,!0)),6===Vc.type)"class"===Vc.name&&(Dc=ia(Dc).trim()),Vc.value={type:2,content:Dc,loc:1===e?ca(Uc,jc):ca(Uc-1,jc+1)},zc.inSFCRoot&&"template"===Bc.tag&&"lang"===Vc.name&&Dc&&"html"!==Dc&&zc.enterRCDATA(cc("</template"),0);else{let e=0;Vc.exp=da(Dc,!1,ca(Uc,jc),0,e),"for"===Vc.name&&(Vc.forParseResult=function(e){const t=e.loc,n=e.content,s=n.match(Lc);if(!s)return;const[,o,r]=s,i=(e,n,s=!1)=>{const o=t.start.offset+n;return da(e,!1,ca(o,o+e.length),0,s?1:0)},l={source:i(r.trim(),n.indexOf(r,o.length)),value:void 0,key:void 0,index:void 0,finalized:!1};let c=o.trim().replace(Jc,"").trim();const a=o.indexOf(c),u=c.match(Gc);if(u){c=c.replace(Gc,"").trim();const e=u[1].trim();let t;if(e&&(t=n.indexOf(e,a+c.length),l.key=i(e,t,!0)),u[2]){const s=u[2].trim();s&&(l.index=i(s,n.indexOf(s,l.key?t+e.length:a+c.length),!0))}}c&&(l.value=i(c,a,!0));return l}(Vc.exp))}7===Vc.type&&"pre"===Vc.name||Bc.props.push(Vc)}Dc="",Uc=jc=-1},oncomment(e,t){Mc.comments&&la({type:3,content:Xc(e,t),loc:ca(e-4,t+3)})},onend(){const e=$c.length;for(let t=0;t<Kc.length;t++)Yc(Kc[t],e-1)},oncdata(e,t){0!==Kc[0].ns&&Zc(Xc(e,t),e,t)},onprocessinginstruction(e){0===(Kc[0]?Kc[0].ns:Mc.ns)&&pa(21,e-1)}}),Gc=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,Jc=/^\(|\)$/g;function Xc(e,t){return $c.slice(e,t)}function Qc(e){zc.inSFCRoot&&(Bc.innerLoc=ca(e+1,e+1)),la(Bc);const{tag:t,ns:n}=Bc;0===n&&Mc.isPreTag(t)&&Hc++,Mc.isVoidTag(t)?Yc(Bc,e):(Kc.unshift(Bc),1!==n&&2!==n||(zc.inXML=!0)),Bc=null}function Zc(e,t,n){var s;{const t=null==(s=Kc[0])?void 0:s.tag;"script"!==t&&"style"!==t&&e.includes("&")&&(e=Mc.decodeEntities(e,!1))}const o=Kc[0]||Pc,r=o.children[o.children.length-1];2===(null==r?void 0:r.type)?(r.content+=e,aa(r.loc,n)):o.children.push({type:2,content:e,loc:ca(t,n)})}function Yc(e,t,n=!1){aa(e.loc,n?ea(t,60):t+1),zc.inSFCRoot&&(e.innerLoc.end=c({},e.children.length?e.children[e.children.length-1].loc.end:e.innerLoc.start),e.innerLoc.source=Xc(e.innerLoc.start.offset,e.innerLoc.end.offset));const{tag:s,ns:o}=e;qc||("slot"===s?e.tagType=2:!function({tag:e,props:t}){if("template"===e)for(let n=0;n<t.length;n++)if(7===t[n].type&&ta.has(t[n].name))return!0;return!1}(e)?function({tag:e,props:t}){var n;if(Mc.isCustomElement(e))return!1;if("component"===e||(s=e.charCodeAt(0),s>64&&s<91)||fc(e)||(null==(n=Mc.isBuiltInComponent)?void 0:n.call(Mc,e))||Mc.isNativeTag&&!Mc.isNativeTag(e))return!0;var s;for(let o=0;o<t.length;o++){const e=t[o];if(6===e.type&&"is"===e.name&&e.value&&e.value.content.startsWith("vue:"))return!0}return!1}(e)&&(e.tagType=1):e.tagType=3),zc.inRCDATA||(e.children=sa(e.children,e.tag)),0===o&&Mc.isPreTag(s)&&Hc--,Wc===e&&(qc=zc.inVPre=!1,Wc=null),zc.inXML&&0===(Kc[0]?Kc[0].ns:Mc.ns)&&(zc.inXML=!1)}function ea(e,t){let n=e;for(;$c.charCodeAt(n)!==t&&n>=0;)n--;return n}const ta=new Set(["if","else","else-if","for","slot"]);const na=/\r\n/g;function sa(e,t){var n,s;const o="preserve"!==Mc.whitespace;let r=!1;for(let i=0;i<e.length;i++){const t=e[i];if(2===t.type)if(Hc)t.content=t.content.replace(na,"\n");else if(oa(t.content)){const l=null==(n=e[i-1])?void 0:n.type,c=null==(s=e[i+1])?void 0:s.type;!l||!c||o&&(3===l&&(3===c||1===c)||1===l&&(3===c||1===c&&ra(t.content)))?(r=!0,e[i]=null):t.content=" "}else o&&(t.content=ia(t.content))}if(Hc&&t&&Mc.isPreTag(t)){const t=e[0];t&&2===t.type&&(t.content=t.content.replace(/^\r?\n/,""))}return r?e.filter(Boolean):e}function oa(e){for(let t=0;t<e.length;t++)if(!ic(e.charCodeAt(t)))return!1;return!0}function ra(e){for(let t=0;t<e.length;t++){const n=e.charCodeAt(t);if(10===n||13===n)return!0}return!1}function ia(e){let t="",n=!1;for(let s=0;s<e.length;s++)ic(e.charCodeAt(s))?n||(t+=" ",n=!0):(t+=e[s],n=!1);return t}function la(e){(Kc[0]||Pc).children.push(e)}function ca(e,t){return{start:zc.getPos(e),end:null==t?t:zc.getPos(t),source:null==t?t:Xc(e,t)}}function aa(e,t){e.end=zc.getPos(t),e.source=Xc(e.start.offset,t)}function ua(e){const t={type:6,name:e.rawName,nameLoc:ca(e.loc.start.offset,e.loc.start.offset+e.rawName.length),value:void 0,loc:e.loc};if(e.exp){const n=e.exp.loc;n.end.offset<e.loc.end.offset&&(n.start.offset--,n.start.column--,n.end.offset++,n.end.column++),t.value={type:2,content:e.exp.content,loc:n}}return t}function da(e,t=!1,n,s=0,o=0){return Jl(e,t,n,s)}function pa(e,t,n){Mc.onError(pc(e,ca(t,t)))}function ha(e,t){if(zc.reset(),Bc=null,Vc=null,Dc="",Uc=-1,jc=-1,Kc.length=0,$c=e,Mc=c({},Fc),t){let e;for(e in t)null!=t[e]&&(Mc[e]=t[e])}zc.mode="html"===Mc.parseMode?1:"sfc"===Mc.parseMode?2:0,zc.inXML=1===Mc.ns||2===Mc.ns;const n=null==t?void 0:t.delimiters;n&&(zc.delimiterOpen=cc(n[0]),zc.delimiterClose=cc(n[1]));const s=Pc=function(e,t=""){return{type:0,source:t,children:e,helpers:new Set,components:[],directives:[],hoists:[],imports:[],cached:0,temps:0,codegenNode:void 0,loc:ql}}([],e);return zc.parse($c),s.loc=ca(0,e.length),s.children=sa(s.children),Pc=null,s}function fa(e,t){ga(e,t,ma(e,e.children[0]))}function ma(e,t){const{children:n}=e;return 1===n.length&&1===t.type&&!Ec(t)}function ga(e,t,n=!1){const{children:s}=e,o=s.length;let r=0;for(let i=0;i<s.length;i++){const e=s[i];if(1===e.type&&0===e.tagType){const s=n?0:ya(e,t);if(s>0){if(s>=2){e.codegenNode.patchFlag="-1",e.codegenNode=t.hoist(e.codegenNode),r++;continue}}else{const n=e.codegenNode;if(13===n.type){const s=xa(n);if((!s||512===s||1===s)&&_a(e,t)>=2){const s=Sa(e);s&&(n.props=t.hoist(s))}n.dynamicProps&&(n.dynamicProps=t.hoist(n.dynamicProps))}}}if(1===e.type){const n=1===e.tagType;n&&t.scopes.vSlot++,ga(e,t),n&&t.scopes.vSlot--}else if(11===e.type)ga(e,t,1===e.children.length);else if(9===e.type)for(let n=0;n<e.branches.length;n++)ga(e.branches[n],t,1===e.branches[n].children.length)}if(r&&t.transformHoist&&t.transformHoist(s,t,e),r&&r===o&&1===e.type&&0===e.tagType&&e.codegenNode&&13===e.codegenNode.type&&p(e.codegenNode.children)){const n=t.hoist(Kl(e.codegenNode.children));t.hmr&&(n.content=`[...${n.content}]`),e.codegenNode.children=n}}function ya(e,t){const{constantCache:n}=t;switch(e.type){case 1:if(0!==e.tagType)return 0;const s=n.get(e);if(void 0!==s)return s;const o=e.codegenNode;if(13!==o.type)return 0;if(o.isBlock&&"svg"!==e.tag&&"foreignObject"!==e.tag)return 0;if(xa(o))return n.set(e,0),0;{let s=3;const r=_a(e,t);if(0===r)return n.set(e,0),0;r<s&&(s=r);for(let o=0;o<e.children.length;o++){const r=ya(e.children[o],t);if(0===r)return n.set(e,0),0;r<s&&(s=r)}if(s>1)for(let o=0;o<e.props.length;o++){const r=e.props[o];if(7===r.type&&"bind"===r.name&&r.exp){const o=ya(r.exp,t);if(0===o)return n.set(e,0),0;o<s&&(s=o)}}if(o.isBlock){for(let t=0;t<e.props.length;t++){if(7===e.props[t].type)return n.set(e,0),0}t.removeHelper(al),t.removeHelper(tc(t.inSSR,o.isComponent)),o.isBlock=!1,t.helper(ec(t.inSSR,o.isComponent))}return n.set(e,s),s}case 2:case 3:return 3;case 9:case 11:case 10:default:return 0;case 5:case 12:return ya(e.content,t);case 4:return e.constType;case 8:let r=3;for(let n=0;n<e.children.length;n++){const s=e.children[n];if(y(s)||v(s))continue;const o=ya(s,t);if(0===o)return 0;o<r&&(r=o)}return r}}const va=new Set([El,Nl,Al,Il]);function ba(e,t){if(14===e.type&&!y(e.callee)&&va.has(e.callee)){const n=e.arguments[0];if(4===n.type)return ya(n,t);if(14===n.type)return ba(n,t)}return 0}function _a(e,t){let n=3;const s=Sa(e);if(s&&15===s.type){const{properties:e}=s;for(let s=0;s<e.length;s++){const{key:o,value:r}=e[s],i=ya(o,t);if(0===i)return i;let l;if(i<n&&(n=i),l=4===r.type?ya(r,t):14===r.type?ba(r,t):0,0===l)return l;l<n&&(n=l)}}return n}function Sa(e){const t=e.codegenNode;if(13===t.type)return t.props}function xa(e){const t=e.patchFlag;return t?parseInt(t,10):void 0}function Ca(e,{filename:t="",prefixIdentifiers:s=!1,hoistStatic:r=!1,hmr:i=!1,cacheHandlers:l=!1,nodeTransforms:c=[],directiveTransforms:a={},transformHoist:u=null,isBuiltInComponent:d=o,isCustomElement:p=o,expressionPlugins:h=[],scopeId:f=null,slotted:m=!0,ssr:g=!1,inSSR:v=!1,ssrCssVars:b="",bindingMetadata:_=n,inline:S=!1,isTS:x=!1,onError:C=uc,onWarn:k=dc,compatConfig:T}){const w=t.replace(/\?.*$/,"").match(/([^/\\]+)\.\w+$/),E={filename:t,selfName:w&&L(I(w[1])),prefixIdentifiers:s,hoistStatic:r,hmr:i,cacheHandlers:l,nodeTransforms:c,directiveTransforms:a,transformHoist:u,isBuiltInComponent:d,isCustomElement:p,expressionPlugins:h,scopeId:f,slotted:m,ssr:g,inSSR:v,ssrCssVars:b,bindingMetadata:_,inline:S,isTS:x,onError:C,onWarn:k,compatConfig:T,root:e,helpers:new Map,components:new Set,directives:new Set,hoists:[],imports:[],constantCache:new WeakMap,temps:0,cached:0,identifiers:Object.create(null),scopes:{vFor:0,vSlot:0,vPre:0,vOnce:0},parent:null,currentNode:e,childIndex:0,inVOnce:!1,helper(e){const t=E.helpers.get(e)||0;return E.helpers.set(e,t+1),e},removeHelper(e){const t=E.helpers.get(e);if(t){const n=t-1;n?E.helpers.set(e,n):E.helpers.delete(e)}},helperString:e=>`_${Hl[E.helper(e)]}`,replaceNode(e){E.parent.children[E.childIndex]=E.currentNode=e},removeNode(e){const t=e?E.parent.children.indexOf(e):E.currentNode?E.childIndex:-1;e&&e!==E.currentNode?E.childIndex>t&&(E.childIndex--,E.onNodeRemoved()):(E.currentNode=null,E.onNodeRemoved()),E.parent.children.splice(t,1)},onNodeRemoved:o,addIdentifiers(e){},removeIdentifiers(e){},hoist(e){y(e)&&(e=Jl(e)),E.hoists.push(e);const t=Jl(`_hoisted_${E.hoists.length}`,!1,e.loc,2);return t.hoisted=e,t},cache:(e,t=!1)=>function(e,t,n=!1){return{type:20,index:e,value:t,isVNode:n,loc:ql}}(E.cached++,e,t)};return E}function ka(e,t){const n=Ca(e,t);Ta(e,n),t.hoistStatic&&fa(e,n),t.ssr||function(e,t){const{helper:n}=t,{children:s}=e;if(1===s.length){const n=s[0];if(ma(e,n)&&n.codegenNode){const s=n.codegenNode;13===s.type&&nc(s,t),e.codegenNode=s}else e.codegenNode=n}else if(s.length>1){let s=64;e.codegenNode=Wl(t,n(ol),void 0,e.children,s+"",void 0,void 0,!0,void 0,!1)}}(e,n),e.helpers=new Set([...n.helpers.keys()]),e.components=[...n.components],e.directives=[...n.directives],e.imports=n.imports,e.hoists=n.hoists,e.temps=n.temps,e.cached=n.cached,e.transformed=!0}function Ta(e,t){t.currentNode=e;const{nodeTransforms:n}=t,s=[];for(let r=0;r<n.length;r++){const o=n[r](e,t);if(o&&(p(o)?s.push(...o):s.push(o)),!t.currentNode)return;e=t.currentNode}switch(e.type){case 3:t.ssr||t.helper(fl);break;case 5:t.ssr||t.helper(Tl);break;case 9:for(let n=0;n<e.branches.length;n++)Ta(e.branches[n],t);break;case 10:case 11:case 1:case 0:!function(e,t){let n=0;const s=()=>{n--};for(;n<e.children.length;n++){const o=e.children[n];y(o)||(t.parent=e,t.childIndex=n,t.onNodeRemoved=s,Ta(o,t))}}(e,t)}t.currentNode=e;let o=s.length;for(;o--;)s[o]()}function wa(e,t){const n=y(e)?t=>t===e:t=>e.test(t);return(e,s)=>{if(1===e.type){const{props:o}=e;if(3===e.tagType&&o.some(Tc))return;const r=[];for(let i=0;i<o.length;i++){const l=o[i];if(7===l.type&&n(l.name)){o.splice(i,1),i--;const n=t(e,l,s);n&&r.push(n)}}return r}}}const Ea="/*#__PURE__*/",Na=e=>`${Hl[e]}: _${Hl[e]}`;function Aa(e,t={}){const n=function(e,{mode:t="function",prefixIdentifiers:n="module"===t,sourceMap:s=!1,filename:o="template.vue.html",scopeId:r=null,optimizeImports:i=!1,runtimeGlobalName:l="Vue",runtimeModuleName:c="vue",ssrRuntimeModuleName:a="vue/server-renderer",ssr:u=!1,isTS:d=!1,inSSR:p=!1}){const h={mode:t,prefixIdentifiers:n,sourceMap:s,filename:o,scopeId:r,optimizeImports:i,runtimeGlobalName:l,runtimeModuleName:c,ssrRuntimeModuleName:a,ssr:u,isTS:d,inSSR:p,source:e.source,code:"",column:1,line:1,offset:0,indentLevel:0,pure:!1,map:void 0,helper:e=>`_${Hl[e]}`,push(e,t=-2,n){h.code+=e},indent(){f(++h.indentLevel)},deindent(e=!1){e?--h.indentLevel:f(--h.indentLevel)},newline(){f(h.indentLevel)}};function f(e){h.push("\n"+"  ".repeat(e),0)}return h}(e,t);t.onContextCreated&&t.onContextCreated(n);const{mode:s,push:o,prefixIdentifiers:r,indent:i,deindent:l,newline:c,ssr:a}=n,u=Array.from(e.helpers),d=u.length>0,p=!r&&"module"!==s;!function(e,t){const{push:n,newline:s,runtimeGlobalName:o}=t,r=o,i=Array.from(e.helpers);if(i.length>0&&(n(`const _Vue = ${r}\n`,-1),e.hoists.length)){n(`const { ${[pl,hl,fl,ml,gl].filter((e=>i.includes(e))).map(Na).join(", ")} } = _Vue\n`,-1)}(function(e,t){if(!e.length)return;t.pure=!0;const{push:n,newline:s}=t;s();for(let o=0;o<e.length;o++){const r=e[o];r&&(n(`const _hoisted_${o+1} = `),La(r,t),s())}t.pure=!1})(e.hoists,t),s(),n("return ")}(e,n);if(o(`function ${a?"ssrRender":"render"}(${(a?["_ctx","_push","_parent","_attrs"]:["_ctx","_cache"]).join(", ")}) {`),i(),p&&(o("with (_ctx) {"),i(),d&&(o(`const { ${u.map(Na).join(", ")} } = _Vue\n`,-1),c())),e.components.length&&(Ia(e.components,"component",n),(e.directives.length||e.temps>0)&&c()),e.directives.length&&(Ia(e.directives,"directive",n),e.temps>0&&c()),e.temps>0){o("let ");for(let t=0;t<e.temps;t++)o(`${t>0?", ":""}_temp${t}`)}return(e.components.length||e.directives.length||e.temps)&&(o("\n",0),c()),a||o("return "),e.codegenNode?La(e.codegenNode,n):o("null"),p&&(l(),o("}")),l(),o("}"),{ast:e,code:n.code,preamble:"",map:n.map?n.map.toJSON():void 0}}function Ia(e,t,{helper:n,push:s,newline:o,isTS:r}){const i=n("component"===t?yl:bl);for(let l=0;l<e.length;l++){let n=e[l];const c=n.endsWith("__self");c&&(n=n.slice(0,-6)),s(`const ${Oc(n,t)} = ${i}(${JSON.stringify(n)}${c?", true":""})${r?"!":""}`),l<e.length-1&&o()}}function Ra(e,t){const n=e.length>3||!1;t.push("["),n&&t.indent(),Oa(e,t,n),n&&t.deindent(),t.push("]")}function Oa(e,t,n=!1,s=!0){const{push:o,newline:r}=t;for(let i=0;i<e.length;i++){const l=e[i];y(l)?o(l,-3):p(l)?Ra(l,t):La(l,t),i<e.length-1&&(n?(s&&o(","),r()):s&&o(", "))}}function La(e,t){if(y(e))t.push(e,-3);else if(v(e))t.push(t.helper(e));else switch(e.type){case 1:case 9:case 11:case 12:La(e.codegenNode,t);break;case 2:!function(e,t){t.push(JSON.stringify(e.content),-3,e)}(e,t);break;case 4:Fa(e,t);break;case 5:!function(e,t){const{push:n,helper:s,pure:o}=t;o&&n(Ea);n(`${s(Tl)}(`),La(e.content,t),n(")")}(e,t);break;case 8:Ma(e,t);break;case 3:!function(e,t){const{push:n,helper:s,pure:o}=t;o&&n(Ea);n(`${s(fl)}(${JSON.stringify(e.content)})`,-3,e)}(e,t);break;case 13:!function(e,t){const{push:n,helper:s,pure:o}=t,{tag:r,props:i,children:l,patchFlag:c,dynamicProps:a,directives:u,isBlock:d,disableTracking:p,isComponent:h}=e;u&&n(s(Sl)+"(");d&&n(`(${s(al)}(${p?"true":""}), `);o&&n(Ea);const f=d?tc(t.inSSR,h):ec(t.inSSR,h);n(s(f)+"(",-2,e),Oa(function(e){let t=e.length;for(;t--&&null==e[t];);return e.slice(0,t+1).map((e=>e||"null"))}([r,i,l,c,a]),t),n(")"),d&&n(")");u&&(n(", "),La(u,t),n(")"))}(e,t);break;case 14:!function(e,t){const{push:n,helper:s,pure:o}=t,r=y(e.callee)?e.callee:s(e.callee);o&&n(Ea);n(r+"(",-2,e),Oa(e.arguments,t),n(")")}(e,t);break;case 15:!function(e,t){const{push:n,indent:s,deindent:o,newline:r}=t,{properties:i}=e;if(!i.length)return void n("{}",-2,e);const l=i.length>1||!1;n(l?"{":"{ "),l&&s();for(let c=0;c<i.length;c++){const{key:e,value:s}=i[c];Pa(e,t),n(": "),La(s,t),c<i.length-1&&(n(","),r())}l&&o(),n(l?"}":" }")}(e,t);break;case 17:!function(e,t){Ra(e.elements,t)}(e,t);break;case 18:!function(e,t){const{push:n,indent:s,deindent:o}=t,{params:r,returns:i,body:l,newline:c,isSlot:a}=e;a&&n(`_${Hl[Bl]}(`);n("(",-2,e),p(r)?Oa(r,t):r&&La(r,t);n(") => "),(c||l)&&(n("{"),s());i?(c&&n("return "),p(i)?Ra(i,t):La(i,t)):l&&La(l,t);(c||l)&&(o(),n("}"));a&&n(")")}(e,t);break;case 19:!function(e,t){const{test:n,consequent:s,alternate:o,newline:r}=e,{push:i,indent:l,deindent:c,newline:a}=t;if(4===n.type){const e=!gc(n.content);e&&i("("),Fa(n,t),e&&i(")")}else i("("),La(n,t),i(")");r&&l(),t.indentLevel++,r||i(" "),i("? "),La(s,t),t.indentLevel--,r&&a(),r||i(" "),i(": ");const u=19===o.type;u||t.indentLevel++;La(o,t),u||t.indentLevel--;r&&c(!0)}(e,t);break;case 20:!function(e,t){const{push:n,helper:s,indent:o,deindent:r,newline:i}=t;n(`_cache[${e.index}] || (`),e.isVNode&&(o(),n(`${s(Ml)}(-1),`),i());n(`_cache[${e.index}] = `),La(e.value,t),e.isVNode&&(n(","),i(),n(`${s(Ml)}(1),`),i(),n(`_cache[${e.index}]`),r());n(")")}(e,t);break;case 21:Oa(e.body,t,!0,!1)}}function Fa(e,t){const{content:n,isStatic:s}=e;t.push(s?JSON.stringify(n):n,-3,e)}function Ma(e,t){for(let n=0;n<e.children.length;n++){const s=e.children[n];y(s)?t.push(s,-3):La(s,t)}}function Pa(e,t){const{push:n}=t;if(8===e.type)n("["),Ma(e,t),n("]");else if(e.isStatic){n(gc(e.content)?e.content:JSON.stringify(e.content),-2,e)}else n(`[${e.content}]`,-3,e)}const $a=wa(/^(if|else|else-if)$/,((e,t,n)=>function(e,t,n,s){if(!("else"===t.name||t.exp&&t.exp.content.trim())){const s=t.exp?t.exp.loc:e.loc;n.onError(pc(28,t.loc)),t.exp=Jl("true",!1,s)}if("if"===t.name){const o=Ba(e,t),r={type:9,loc:e.loc,branches:[o]};if(n.replaceNode(r),s)return s(r,o,!0)}else{const o=n.parent.children;let r=o.indexOf(e);for(;r-- >=-1;){const i=o[r];if(i&&3===i.type)n.removeNode(i);else{if(!i||2!==i.type||i.content.trim().length){if(i&&9===i.type){"else-if"===t.name&&void 0===i.branches[i.branches.length-1].condition&&n.onError(pc(30,e.loc)),n.removeNode();const o=Ba(e,t);i.branches.push(o);const r=s&&s(i,o,!1);Ta(o,n),r&&r(),n.currentNode=null}else n.onError(pc(30,e.loc));break}n.removeNode(i)}}}}(e,t,n,((e,t,s)=>{const o=n.parent.children;let r=o.indexOf(e),i=0;for(;r-- >=0;){const e=o[r];e&&9===e.type&&(i+=e.branches.length)}return()=>{if(s)e.codegenNode=Va(t,i,n);else{const s=function(e){for(;;)if(19===e.type){if(19!==e.alternate.type)return e;e=e.alternate}else 20===e.type&&(e=e.value)}(e.codegenNode);s.alternate=Va(t,i+e.branches.length-1,n)}}}))));function Ba(e,t){const n=3===e.tagType;return{type:10,loc:e.loc,condition:"else"===t.name?void 0:t.exp,children:n&&!Sc(e,"for")?e.children:[e],userKey:xc(e,"key"),isTemplateIf:n}}function Va(e,t,n){return e.condition?Yl(e.condition,Da(e,t,n),Ql(n.helper(fl),['""',"true"])):Da(e,t,n)}function Da(e,t,n){const{helper:s}=n,o=Gl("key",Jl(`${t}`,!1,ql,2)),{children:r}=e,i=r[0];if(1!==r.length||1!==i.type){if(1===r.length&&11===i.type){const e=i.codegenNode;return Ic(e,o,n),e}{let t=64;return Wl(n,s(ol),zl([o]),r,t+"",void 0,void 0,!0,!1,!1,e.loc)}}{const e=i.codegenNode,t=14===(l=e).type&&l.callee===Ul?l.arguments[1].returns:l;return 13===t.type&&nc(t,n),Ic(t,o,n),e}var l}const Ua=wa("for",((e,t,n)=>{const{helper:s,removeHelper:o}=n;return function(e,t,n,s){if(!t.exp)return void n.onError(pc(31,t.loc));const o=t.forParseResult;if(!o)return void n.onError(pc(32,t.loc));ja(o);const{scopes:r}=n,{source:i,value:l,key:c,index:a}=o,u={type:11,loc:t.loc,source:i,valueAlias:l,keyAlias:c,objectIndexAlias:a,parseResult:o,children:wc(e)?e.children:[e]};n.replaceNode(u),r.vFor++;const d=s&&s(u);return()=>{r.vFor--,d&&d()}}(e,t,n,(t=>{const r=Ql(s(xl),[t.source]),i=wc(e),l=Sc(e,"memo"),c=xc(e,"key"),a=c&&(6===c.type?Jl(c.value.content,!0):c.exp),u=c?Gl("key",a):null,d=4===t.source.type&&t.source.constType>0,p=d?64:c?128:256;return t.codegenNode=Wl(n,s(ol),void 0,r,p+"",void 0,void 0,!0,!d,!1,e.loc),()=>{let c;const{children:p}=t,h=1!==p.length||1!==p[0].type,f=Ec(e)?e:i&&1===e.children.length&&Ec(e.children[0])?e.children[0]:null;if(f?(c=f.codegenNode,i&&u&&Ic(c,u,n)):h?c=Wl(n,s(ol),u?zl([u]):void 0,e.children,"64",void 0,void 0,!0,void 0,!1):(c=p[0].codegenNode,i&&u&&Ic(c,u,n),c.isBlock!==!d&&(c.isBlock?(o(al),o(tc(n.inSSR,c.isComponent))):o(ec(n.inSSR,c.isComponent))),c.isBlock=!d,c.isBlock?(s(al),s(tc(n.inSSR,c.isComponent))):s(ec(n.inSSR,c.isComponent))),l){const e=Zl(Ha(t.parseResult,[Jl("_cached")]));e.body={type:21,body:[Xl(["const _memo = (",l.exp,")"]),Xl(["if (_cached",...a?[" && _cached.key === ",a]:[],` && ${n.helperString(jl)}(_cached, _memo)) return _cached`]),Xl(["const _item = ",c]),Jl("_item.memo = _memo"),Jl("return _item")],loc:ql},r.arguments.push(e,Jl("_cache"),Jl(String(n.cached++)))}else r.arguments.push(Zl(Ha(t.parseResult),c,!0))}}))}));function ja(e,t){e.finalized||(e.finalized=!0)}function Ha({value:e,key:t,index:n},s=[]){return function(e){let t=e.length;for(;t--&&!e[t];);return e.slice(0,t+1).map(((e,t)=>e||Jl("_".repeat(t+1),!1)))}([e,t,n,...s])}const qa=Jl("undefined",!1),Wa=(e,t)=>{if(1===e.type&&(1===e.tagType||3===e.tagType)){const n=Sc(e,"slot");if(n)return t.scopes.vSlot++,()=>{t.scopes.vSlot--}}},Ka=(e,t,n,s)=>Zl(e,n,!1,!0,n.length?n[0].loc:s);function za(e,t,n=Ka){t.helper(Bl);const{children:s,loc:o}=e,r=[],i=[];let l=t.scopes.vSlot>0||t.scopes.vFor>0;const c=Sc(e,"slot",!0);if(c){const{arg:e,exp:t}=c;e&&!hc(e)&&(l=!0),r.push(Gl(e||Jl("default",!0),n(t,void 0,s,o)))}let a=!1,u=!1;const d=[],p=new Set;let h=0;for(let g=0;g<s.length;g++){const e=s[g];let o;if(!wc(e)||!(o=Sc(e,"slot",!0))){3!==e.type&&d.push(e);continue}if(c){t.onError(pc(37,o.loc));break}a=!0;const{children:f,loc:m}=e,{arg:y=Jl("default",!0),exp:v,loc:b}=o;let _;hc(y)?_=y?y.content:"default":l=!0;const S=Sc(e,"for"),x=n(v,S,f,m);let C,k;if(C=Sc(e,"if"))l=!0,i.push(Yl(C.exp,Ga(y,x,h++),qa));else if(k=Sc(e,/^else(-if)?$/,!0)){let e,n=g;for(;n--&&(e=s[n],3===e.type););if(e&&wc(e)&&Sc(e,"if")){s.splice(g,1),g--;let e=i[i.length-1];for(;19===e.alternate.type;)e=e.alternate;e.alternate=k.exp?Yl(k.exp,Ga(y,x,h++),qa):Ga(y,x,h++)}else t.onError(pc(30,k.loc))}else if(S){l=!0;const e=S.forParseResult;e?(ja(e),i.push(Ql(t.helper(xl),[e.source,Zl(Ha(e),Ga(y,x),!0)]))):t.onError(pc(32,S.loc))}else{if(_){if(p.has(_)){t.onError(pc(38,b));continue}p.add(_),"default"===_&&(u=!0)}r.push(Gl(y,x))}}if(!c){const e=(e,t)=>Gl("default",n(e,void 0,t,o));a?d.length&&d.some((e=>Xa(e)))&&(u?t.onError(pc(39,d[0].loc)):r.push(e(void 0,d))):r.push(e(void 0,s))}const f=l?2:Ja(e.children)?3:1;let m=zl(r.concat(Gl("_",Jl(f+"",!1))),o);return i.length&&(m=Ql(t.helper(kl),[m,Kl(i)])),{slots:m,hasDynamicSlots:l}}function Ga(e,t,n){const s=[Gl("name",e),Gl("fn",t)];return null!=n&&s.push(Gl("key",Jl(String(n),!0))),zl(s)}function Ja(e){for(let t=0;t<e.length;t++){const n=e[t];switch(n.type){case 1:if(2===n.tagType||Ja(n.children))return!0;break;case 9:if(Ja(n.branches))return!0;break;case 10:case 11:if(Ja(n.children))return!0}}return!1}function Xa(e){return 2!==e.type&&12!==e.type||(2===e.type?!!e.content.trim():Xa(e.content))}const Qa=new WeakMap,Za=(e,t)=>function(){if(1!==(e=t.currentNode).type||0!==e.tagType&&1!==e.tagType)return;const{tag:n,props:s}=e,o=1===e.tagType;let r=o?function(e,t,n=!1){let{tag:s}=e;const o=nu(s),r=xc(e,"is");if(r)if(o){const e=6===r.type?r.value&&Jl(r.value.content,!0):r.exp;if(e)return Ql(t.helper(vl),[e])}else 6===r.type&&r.value.content.startsWith("vue:")&&(s=r.value.content.slice(4));const i=fc(s)||t.isBuiltInComponent(s);if(i)return n||t.helper(i),i;return t.helper(yl),t.components.add(s),Oc(s,"component")}(e,t):`"${n}"`;const i=b(r)&&r.callee===vl;let l,c,a,u,d,p,h=0,f=i||r===rl||r===il||!o&&("svg"===n||"foreignObject"===n);if(s.length>0){const n=Ya(e,t,void 0,o,i);l=n.props,h=n.patchFlag,d=n.dynamicPropNames;const s=n.directives;p=s&&s.length?Kl(s.map((e=>function(e,t){const n=[],s=Qa.get(e);s?n.push(t.helperString(s)):(t.helper(bl),t.directives.add(e.name),n.push(Oc(e.name,"directive")));const{loc:o}=e;e.exp&&n.push(e.exp);e.arg&&(e.exp||n.push("void 0"),n.push(e.arg));if(Object.keys(e.modifiers).length){e.arg||(e.exp||n.push("void 0"),n.push("void 0"));const t=Jl("true",!1,o);n.push(zl(e.modifiers.map((e=>Gl(e,t))),o))}return Kl(n,e.loc)}(e,t)))):void 0,n.shouldUseBlock&&(f=!0)}if(e.children.length>0){r===ll&&(f=!0,h|=1024);if(o&&r!==rl&&r!==ll){const{slots:n,hasDynamicSlots:s}=za(e,t);c=n,s&&(h|=1024)}else if(1===e.children.length&&r!==rl){const n=e.children[0],s=n.type,o=5===s||8===s;o&&0===ya(n,t)&&(h|=1),c=o||2===s?n:e.children}else c=e.children}0!==h&&(a=String(h),d&&d.length&&(u=function(e){let t="[";for(let n=0,s=e.length;n<s;n++)t+=JSON.stringify(e[n]),n<s-1&&(t+=", ");return t+"]"}(d))),e.codegenNode=Wl(t,r,l,c,a,u,p,!!f,!1,o,e.loc)};function Ya(e,t,n=e.props,s,o,r=!1){const{tag:l,loc:c,children:a}=e;let u=[];const d=[],p=[],h=a.length>0;let f=!1,m=0,g=!1,y=!1,b=!1,_=!1,S=!1,x=!1;const C=[],k=e=>{u.length&&(d.push(zl(eu(u),c)),u=[]),e&&d.push(e)},T=({key:e,value:n})=>{if(hc(e)){const r=e.content,l=i(r);if(!l||s&&!o||"onclick"===r.toLowerCase()||"onUpdate:modelValue"===r||w(r)||(_=!0),l&&w(r)&&(x=!0),l&&14===n.type&&(n=n.arguments[0]),20===n.type||(4===n.type||8===n.type)&&ya(n,t)>0)return;"ref"===r?g=!0:"class"===r?y=!0:"style"===r?b=!0:"key"===r||C.includes(r)||C.push(r),!s||"class"!==r&&"style"!==r||C.includes(r)||C.push(r)}else S=!0};for(let i=0;i<n.length;i++){const o=n[i];if(6===o.type){const{loc:e,name:n,nameLoc:s,value:r}=o;let i=!0;if("ref"===n&&(g=!0,t.scopes.vFor>0&&u.push(Gl(Jl("ref_for",!0),Jl("true")))),"is"===n&&(nu(l)||r&&r.content.startsWith("vue:")))continue;u.push(Gl(Jl(n,!0,s),Jl(r?r.content:"",i,r?r.loc:e)))}else{const{name:n,arg:i,exp:a,loc:g,modifiers:y}=o,b="bind"===n,_="on"===n;if("slot"===n){s||t.onError(pc(40,g));continue}if("once"===n||"memo"===n)continue;if("is"===n||b&&Cc(i,"is")&&nu(l))continue;if(_&&r)continue;if((b&&Cc(i,"key")||_&&h&&Cc(i,"vue:before-update"))&&(f=!0),b&&Cc(i,"ref")&&t.scopes.vFor>0&&u.push(Gl(Jl("ref_for",!0),Jl("true"))),!i&&(b||_)){S=!0,a?b?(k(),d.push(a)):k({type:14,loc:g,callee:t.helper(Rl),arguments:s?[a]:[a,"true"]}):t.onError(pc(b?34:35,g));continue}b&&y.includes("prop")&&(m|=32);const x=t.directiveTransforms[n];if(x){const{props:n,needRuntime:s}=x(o,e,t);!r&&n.forEach(T),_&&i&&!hc(i)?k(zl(n,c)):u.push(...n),s&&(p.push(o),v(s)&&Qa.set(o,s))}else E(n)||(p.push(o),h&&(f=!0))}}let N;if(d.length?(k(),N=d.length>1?Ql(t.helper(wl),d,c):d[0]):u.length&&(N=zl(eu(u),c)),S?m|=16:(y&&!s&&(m|=2),b&&!s&&(m|=4),C.length&&(m|=8),_&&(m|=32)),f||0!==m&&32!==m||!(g||x||p.length>0)||(m|=512),!t.inSSR&&N)switch(N.type){case 15:let e=-1,n=-1,s=!1;for(let t=0;t<N.properties.length;t++){const o=N.properties[t].key;hc(o)?"class"===o.content?e=t:"style"===o.content&&(n=t):o.isHandlerKey||(s=!0)}const o=N.properties[e],r=N.properties[n];s?N=Ql(t.helper(Al),[N]):(o&&!hc(o.value)&&(o.value=Ql(t.helper(El),[o.value])),r&&(b||4===r.value.type&&"["===r.value.content.trim()[0]||17===r.value.type)&&(r.value=Ql(t.helper(Nl),[r.value])));break;case 14:break;default:N=Ql(t.helper(Al),[Ql(t.helper(Il),[N])])}return{props:N,directives:p,patchFlag:m,dynamicPropNames:C,shouldUseBlock:f}}function eu(e){const t=new Map,n=[];for(let s=0;s<e.length;s++){const o=e[s];if(8===o.key.type||!o.key.isStatic){n.push(o);continue}const r=o.key.content,l=t.get(r);l?("style"===r||"class"===r||i(r))&&tu(l,o):(t.set(r,o),n.push(o))}return n}function tu(e,t){17===e.value.type?e.value.elements.push(t.value):e.value=Kl([e.value,t.value],e.loc)}function nu(e){return"component"===e||"Component"===e}const su=(e,t)=>{if(Ec(e)){const{children:n,loc:s}=e,{slotName:o,slotProps:r}=function(e,t){let n,s='"default"';const o=[];for(let r=0;r<e.props.length;r++){const t=e.props[r];if(6===t.type)t.value&&("name"===t.name?s=JSON.stringify(t.value.content):(t.name=I(t.name),o.push(t)));else if("bind"===t.name&&Cc(t.arg,"name")){if(t.exp)s=t.exp;else if(t.arg&&4===t.arg.type){const e=I(t.arg.content);s=t.exp=Jl(e,!1,t.arg.loc)}}else"bind"===t.name&&t.arg&&hc(t.arg)&&(t.arg.content=I(t.arg.content)),o.push(t)}if(o.length>0){const{props:s,directives:r}=Ya(e,t,o,!1,!1);n=s,r.length&&t.onError(pc(36,r[0].loc))}return{slotName:s,slotProps:n}}(e,t),i=[t.prefixIdentifiers?"_ctx.$slots":"$slots",o,"{}","undefined","true"];let l=2;r&&(i[2]=r,l=3),n.length&&(i[3]=Zl([],n,!1,!1,s),l=4),t.scopeId&&!t.slotted&&(l=5),i.splice(l),e.codegenNode=Ql(t.helper(Cl),i,s)}};const ou=/^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/,ru=(e,t,n,s)=>{const{loc:o,modifiers:r,arg:i}=e;let l;if(4===i.type)if(i.isStatic){let e=i.content;e.startsWith("vue:")&&(e=`vnode-${e.slice(4)}`);l=Jl(0!==t.tagType||e.startsWith("vnode")||!/[A-Z]/.test(e)?F(I(e)):`on:${e}`,!0,i.loc)}else l=Xl([`${n.helperString(Fl)}(`,i,")"]);else l=i,l.children.unshift(`${n.helperString(Fl)}(`),l.children.push(")");let c=e.exp;c&&!c.content.trim()&&(c=void 0);let a=n.cacheHandlers&&!c&&!n.inVOnce;if(c){const e=_c(c.content),t=!(e||ou.test(c.content)),n=c.content.includes(";");(t||a&&e)&&(c=Xl([`${t?"$event":"(...args)"} => ${n?"{":"("}`,c,n?"}":")"]))}let u={props:[Gl(l,c||Jl("() => {}",!1,o))]};return s&&(u=s(u)),a&&(u.props[0].value=n.cache(u.props[0].value)),u.props.forEach((e=>e.key.isHandlerKey=!0)),u},iu=(e,t,n)=>{const{modifiers:s,loc:o}=e,r=e.arg;let{exp:i}=e;if(i&&4===i.type&&!i.content.trim()&&(i=void 0),!i){if(4!==r.type||!r.isStatic)return n.onError(pc(52,r.loc)),{props:[Gl(r,Jl("",!0,o))]};const t=I(r.content);i=e.exp=Jl(t,!1,r.loc)}return 4!==r.type?(r.children.unshift("("),r.children.push(') || ""')):r.isStatic||(r.content=`${r.content} || ""`),s.includes("camel")&&(4===r.type?r.content=r.isStatic?I(r.content):`${n.helperString(Ol)}(${r.content})`:(r.children.unshift(`${n.helperString(Ol)}(`),r.children.push(")"))),n.inSSR||(s.includes("prop")&&lu(r,"."),s.includes("attr")&&lu(r,"^")),{props:[Gl(r,i)]}},lu=(e,t)=>{4===e.type?e.content=e.isStatic?t+e.content:`\`${t}\${${e.content}}\``:(e.children.unshift(`'${t}' + (`),e.children.push(")"))},cu=(e,t)=>{if(0===e.type||1===e.type||11===e.type||10===e.type)return()=>{const n=e.children;let s,o=!1;for(let e=0;e<n.length;e++){const t=n[e];if(kc(t)){o=!0;for(let o=e+1;o<n.length;o++){const r=n[o];if(!kc(r)){s=void 0;break}s||(s=n[e]=Xl([t],t.loc)),s.children.push(" + ",r),n.splice(o,1),o--}}}if(o&&(1!==n.length||0!==e.type&&(1!==e.type||0!==e.tagType||e.props.find((e=>7===e.type&&!t.directiveTransforms[e.name])))))for(let e=0;e<n.length;e++){const s=n[e];if(kc(s)||8===s.type){const o=[];2===s.type&&" "===s.content||o.push(s),t.ssr||0!==ya(s,t)||o.push("1"),n[e]={type:12,content:s,loc:s.loc,codegenNode:Ql(t.helper(ml),o)}}}}},au=new WeakSet,uu=(e,t)=>{if(1===e.type&&Sc(e,"once",!0)){if(au.has(e)||t.inVOnce||t.inSSR)return;return au.add(e),t.inVOnce=!0,t.helper(Ml),()=>{t.inVOnce=!1;const e=t.currentNode;e.codegenNode&&(e.codegenNode=t.cache(e.codegenNode,!0))}}},du=(e,t,n)=>{const{exp:s,arg:o}=e;if(!s)return n.onError(pc(41,e.loc)),pu();const r=s.loc.source,i=4===s.type?s.content:r,l=n.bindingMetadata[r];if("props"===l||"props-aliased"===l)return pu();if(!i.trim()||!_c(i))return n.onError(pc(42,s.loc)),pu();const c=o||Jl("modelValue",!0),a=o?hc(o)?`onUpdate:${I(o.content)}`:Xl(['"onUpdate:" + ',o]):"onUpdate:modelValue";let u;u=Xl([`${n.isTS?"($event: any)":"$event"} => ((`,s,") = $event)"]);const d=[Gl(c,e.exp),Gl(a,u)];if(e.modifiers.length&&1===t.tagType){const t=e.modifiers.map((e=>(gc(e)?e:JSON.stringify(e))+": true")).join(", "),n=o?hc(o)?`${o.content}Modifiers`:Xl([o,' + "Modifiers"']):"modelModifiers";d.push(Gl(n,Jl(`{ ${t} }`,!1,e.loc,2)))}return pu(d)};function pu(e=[]){return{props:e}}const hu=new WeakSet,fu=(e,t)=>{if(1===e.type){const n=Sc(e,"memo");if(!n||hu.has(e))return;return hu.add(e),()=>{const s=e.codegenNode||t.currentNode.codegenNode;s&&13===s.type&&(1!==e.tagType&&nc(s,t),e.codegenNode=Ql(t.helper(Ul),[n.exp,Zl(void 0,s),"_cache",String(t.cached++)]))}}};function mu(e,t={}){const n=t.onError||uc,s="module"===t.mode;!0===t.prefixIdentifiers?n(pc(47)):s&&n(pc(48));t.cacheHandlers&&n(pc(49)),t.scopeId&&!s&&n(pc(50));const o=c({},t,{prefixIdentifiers:!1}),r=y(e)?ha(e,o):e,[i,l]=[[uu,$a,fu,Ua,su,Za,Wa,cu],{on:ru,bind:iu,model:du}];return ka(r,c({},o,{nodeTransforms:[...i,...t.nodeTransforms||[]],directiveTransforms:c({},l,t.directiveTransforms||{})})),Aa(r,o)}const gu=Symbol(""),yu=Symbol(""),vu=Symbol(""),bu=Symbol(""),_u=Symbol(""),Su=Symbol(""),xu=Symbol(""),Cu=Symbol(""),ku=Symbol(""),Tu=Symbol("");var wu;let Eu;wu={[gu]:"vModelRadio",[yu]:"vModelCheckbox",[vu]:"vModelText",[bu]:"vModelSelect",[_u]:"vModelDynamic",[Su]:"withModifiers",[xu]:"withKeys",[Cu]:"vShow",[ku]:"Transition",[Tu]:"TransitionGroup"},Object.getOwnPropertySymbols(wu).forEach((e=>{Hl[e]=wu[e]}));const Nu={parseMode:"html",isVoidTag:Z,isNativeTag:e=>J(e)||X(e)||Q(e),isPreTag:e=>"pre"===e,decodeEntities:function(e,t=!1){return Eu||(Eu=document.createElement("div")),t?(Eu.innerHTML=`<div foo="${e.replace(/"/g,"&quot;")}">`,Eu.children[0].getAttribute("foo")):(Eu.innerHTML=e,Eu.textContent)},isBuiltInComponent:e=>"Transition"===e||"transition"===e?ku:"TransitionGroup"===e||"transition-group"===e?Tu:void 0,getNamespace(e,t,n){let s=t?t.ns:n;if(t&&2===s)if("annotation-xml"===t.tag){if("svg"===e)return 1;t.props.some((e=>6===e.type&&"encoding"===e.name&&null!=e.value&&("text/html"===e.value.content||"application/xhtml+xml"===e.value.content)))&&(s=0)}else/^m(?:[ions]|text)$/.test(t.tag)&&"mglyph"!==e&&"malignmark"!==e&&(s=0);else t&&1===s&&("foreignObject"!==t.tag&&"desc"!==t.tag&&"title"!==t.tag||(s=0));if(0===s){if("svg"===e)return 1;if("math"===e)return 2}return s}},Au=(e,t)=>{const n=z(e);return Jl(JSON.stringify(n),!1,t,3)};function Iu(e,t){return pc(e,t)}const Ru=t("passive,once,capture"),Ou=t("stop,prevent,self,ctrl,shift,alt,meta,exact,middle"),Lu=t("left,right"),Fu=t("onkeyup,onkeydown,onkeypress",!0),Mu=(e,t)=>hc(e)&&"onclick"===e.content.toLowerCase()?Jl(t,!0):4!==e.type?Xl(["(",e,`) === "onClick" ? "${t}" : (`,e,")"]):e,Pu=(e,t)=>{1!==e.type||0!==e.tagType||"script"!==e.tag&&"style"!==e.tag||t.removeNode()},$u=[e=>{1===e.type&&e.props.forEach(((t,n)=>{6===t.type&&"style"===t.name&&t.value&&(e.props[n]={type:7,name:"bind",arg:Jl("style",!0,t.loc),exp:Au(t.value.content,t.loc),modifiers:[],loc:t.loc})}))}],Bu={cloak:()=>({props:[]}),html:(e,t,n)=>{const{exp:s,loc:o}=e;return s||n.onError(Iu(53,o)),t.children.length&&(n.onError(Iu(54,o)),t.children.length=0),{props:[Gl(Jl("innerHTML",!0,o),s||Jl("",!0))]}},text:(e,t,n)=>{const{exp:s,loc:o}=e;return s||n.onError(Iu(55,o)),t.children.length&&(n.onError(Iu(56,o)),t.children.length=0),{props:[Gl(Jl("textContent",!0),s?ya(s,n)>0?s:Ql(n.helperString(Tl),[s],o):Jl("",!0))]}},model:(e,t,n)=>{const s=du(e,t,n);if(!s.props.length||1===t.tagType)return s;e.arg&&n.onError(Iu(58,e.arg.loc));const{tag:o}=t,r=n.isCustomElement(o);if("input"===o||"textarea"===o||"select"===o||r){let i=vu,l=!1;if("input"===o||r){const s=xc(t,"type");if(s){if(7===s.type)i=_u;else if(s.value)switch(s.value.content){case"radio":i=gu;break;case"checkbox":i=yu;break;case"file":l=!0,n.onError(Iu(59,e.loc))}}else(function(e){return e.props.some((e=>!(7!==e.type||"bind"!==e.name||e.arg&&4===e.arg.type&&e.arg.isStatic)))})(t)&&(i=_u)}else"select"===o&&(i=bu);l||(s.needRuntime=n.helper(i))}else n.onError(Iu(57,e.loc));return s.props=s.props.filter((e=>!(4===e.key.type&&"modelValue"===e.key.content))),s},on:(e,t,n)=>ru(e,t,n,(t=>{const{modifiers:s}=e;if(!s.length)return t;let{key:o,value:r}=t.props[0];const{keyModifiers:i,nonKeyModifiers:l,eventOptionModifiers:c}=((e,t,n,s)=>{const o=[],r=[],i=[];for(let l=0;l<t.length;l++){const n=t[l];Ru(n)?i.push(n):Lu(n)?hc(e)?Fu(e.content)?o.push(n):r.push(n):(o.push(n),r.push(n)):Ou(n)?r.push(n):o.push(n)}return{keyModifiers:o,nonKeyModifiers:r,eventOptionModifiers:i}})(o,s);if(l.includes("right")&&(o=Mu(o,"onContextmenu")),l.includes("middle")&&(o=Mu(o,"onMouseup")),l.length&&(r=Ql(n.helper(Su),[r,JSON.stringify(l)])),!i.length||hc(o)&&!Fu(o.content)||(r=Ql(n.helper(xu),[r,JSON.stringify(i)])),c.length){const e=c.map(L).join("");o=hc(o)?Jl(`${o.content}${e}`,!0):Xl(["(",o,`) + "${e}"`])}return{props:[Gl(o,r)]}})),show:(e,t,n)=>{const{exp:s,loc:o}=e;return s||n.onError(Iu(61,o)),{props:[],needRuntime:n.helper(Cu)}}};const Vu=new WeakMap;function Du(e,t){if(!y(e)){if(!e.nodeType)return o;e=e.innerHTML}const s=e,r=function(e){let t=Vu.get(null!=e?e:n);return t||(t=Object.create(null),Vu.set(null!=e?e:n,t)),t}(t),i=r[s];if(i)return i;if("#"===e[0]){const t=document.querySelector(e);e=t?t.innerHTML:""}const l=c({hoistStatic:!0,onError:void 0,onWarn:o},t);l.isCustomElement||"undefined"==typeof customElements||(l.isCustomElement=e=>!!customElements.get(e));const{code:a}=function(e,t={}){return mu(e,c({},Nu,t,{nodeTransforms:[Pu,...$u,...t.nodeTransforms||[]],directiveTransforms:c({},Bu,t.directiveTransforms||{}),transformHoist:null}))}(e,l),u=new Function(a)();return u._rc=!0,r[s]=u}return _r(Du),e.BaseTransition=Jn,e.BaseTransitionPropsValidators=Gn,e.Comment=Po,e.DeprecationTypes=null,e.EffectScope=le,e.ErrorCodes={SETUP_FUNCTION:0,0:"SETUP_FUNCTION",RENDER_FUNCTION:1,1:"RENDER_FUNCTION",WATCH_GETTER:2,2:"WATCH_GETTER",WATCH_CALLBACK:3,3:"WATCH_CALLBACK",WATCH_CLEANUP:4,4:"WATCH_CLEANUP",NATIVE_EVENT_HANDLER:5,5:"NATIVE_EVENT_HANDLER",COMPONENT_EVENT_HANDLER:6,6:"COMPONENT_EVENT_HANDLER",VNODE_HOOK:7,7:"VNODE_HOOK",DIRECTIVE_HOOK:8,8:"DIRECTIVE_HOOK",TRANSITION_HOOK:9,9:"TRANSITION_HOOK",APP_ERROR_HANDLER:10,10:"APP_ERROR_HANDLER",APP_WARN_HANDLER:11,11:"APP_WARN_HANDLER",FUNCTION_REF:12,12:"FUNCTION_REF",ASYNC_COMPONENT_LOADER:13,13:"ASYNC_COMPONENT_LOADER",SCHEDULER:14,14:"SCHEDULER"},e.ErrorTypeStrings=null,e.Fragment=Fo,e.KeepAlive=is,e.ReactiveEffect=ue,e.Static=$o,e.Suspense=Nn,e.Teleport=Oo,e.Text=Mo,e.TrackOpTypes={GET:"get",HAS:"has",ITERATE:"iterate"},e.Transition=$r,e.TransitionGroup=Ei,e.TriggerOpTypes={SET:"set",ADD:"add",DELETE:"delete",CLEAR:"clear"},e.VueElement=Si,e.assertNumber=function(e,t){},e.callWithAsyncErrorHandling=Ht,e.callWithErrorHandling=jt,e.camelize=I,e.capitalize=L,e.cloneVNode=er,e.compatUtils=null,e.compile=Du,e.computed=Tr,e.createApp=(...e)=>{const t=Qi().createApp(...e),{mount:n}=t;return t.mount=e=>{const s=nl(e);if(!s)return;const o=t._component;g(o)||o.render||o.template||(o.template=s.innerHTML),s.innerHTML="";const r=n(s,!1,tl(s));return s instanceof Element&&(s.removeAttribute("v-cloak"),s.setAttribute("data-v-app","")),r},t},e.createBlock=Wo,e.createCommentVNode=function(e="",t=!1){return t?(Do(),Wo(Po,null,e)):Zo(Po,null,e)},e.createElementBlock=function(e,t,n,s,o,r){return qo(Qo(e,t,n,s,o,r,!0))},e.createElementVNode=Qo,e.createHydrationRenderer=_o,e.createPropsRestProxy=function(e,t){const n={};for(const s in e)t.includes(s)||Object.defineProperty(n,s,{enumerable:!0,get:()=>e[s]});return n},e.createRenderer=bo,e.createSSRApp=(...e)=>{const t=Zi().createApp(...e),{mount:n}=t;return t.mount=e=>{const t=nl(e);if(t)return n(t,!0,tl(t))},t},e.createSlots=function(e,t){for(let n=0;n<t.length;n++){const s=t[n];if(p(s))for(let t=0;t<s.length;t++)e[s[t].name]=s[t].fn;else s&&(e[s.name]=s.key?(...e)=>{const t=s.fn(...e);return t&&(t.key=s.key),t}:s.fn)}return e},e.createStaticVNode=function(e,t){const n=Zo($o,null,e);return n.staticCount=t,n},e.createTextVNode=tr,e.createVNode=Zo,e.customRef=Bt,e.defineAsyncComponent=function(e){g(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:s,delay:o=200,timeout:r,suspensible:i=!0,onError:l}=e;let c,a=null,u=0;const d=()=>{let e;return a||(e=a=t().catch((e=>{if(e=e instanceof Error?e:new Error(String(e)),l)return new Promise(((t,n)=>{l(e,(()=>t((u++,a=null,d()))),(()=>n(e)),u+1)}));throw e})).then((t=>e!==a&&a?a:(t&&(t.__esModule||"Module"===t[Symbol.toStringTag])&&(t=t.default),c=t,t))))};return ns({name:"AsyncComponentWrapper",__asyncLoader:d,get __asyncResolved(){return c},setup(){const e=ar;if(c)return()=>os(c,e);const t=t=>{a=null,qt(t,e,13,!s)};if(i&&e.suspense)return d().then((t=>()=>os(t,e))).catch((e=>(t(e),()=>s?Zo(s,{error:e}):null)));const l=Rt(!1),u=Rt(),p=Rt(!!o);return o&&setTimeout((()=>{p.value=!1}),o),null!=r&&setTimeout((()=>{if(!l.value&&!u.value){const e=new Error(`Async component timed out after ${r}ms.`);t(e),u.value=e}}),r),d().then((()=>{l.value=!0,e.parent&&rs(e.parent.vnode)&&(e.parent.effect.dirty=!0,tn(e.parent.update))})).catch((e=>{t(e),u.value=e})),()=>l.value&&c?os(c,e):u.value&&s?Zo(s,{error:u.value}):n&&!p.value?Zo(n):void 0}})},e.defineComponent=ns,e.defineCustomElement=bi,e.defineEmits=function(){return null},e.defineExpose=function(e){},e.defineModel=function(){},e.defineOptions=function(e){},e.defineProps=function(){return null},e.defineSSRCustomElement=e=>bi(e,el),e.defineSlots=function(){return null},e.devtools=void 0,e.effect=function(e,t){e.effect instanceof ue&&(e=e.effect.fn);const n=new ue(e,o,(()=>{n.dirty&&n.run()}));t&&(c(n,t),t.scope&&ce(n,t.scope)),t&&t.lazy||n.run();const s=n.run.bind(n);return s.effect=n,s},e.effectScope=function(e){return new le(e)},e.getCurrentInstance=ur,e.getCurrentScope=ae,e.getTransitionRawChildren=ts,e.guardReactiveProps=Yo,e.h=wr,e.handleError=qt,e.hasInjectionContext=function(){return!!(ar||hn||Js)},e.hydrate=el,e.initCustomFormatter=function(){},e.initDirectivesForSSR=sl,e.inject=Qs,e.isMemoSame=Er,e.isProxy=xt,e.isReactive=bt,e.isReadonly=_t,e.isRef=It,e.isRuntimeOnly=()=>!gr,e.isShallow=St,e.isVNode=Ko,e.markRaw=kt,e.mergeDefaults=function(e,t){const n=Ls(e);for(const s in t){if(s.startsWith("__skip"))continue;let e=n[s];e?p(e)||g(e)?e=n[s]={type:e,default:t[s]}:e.default=t[s]:null===e&&(e=n[s]={default:t[s]}),e&&t[`__skip_${s}`]&&(e.skipFactory=!0)}return n},e.mergeModels=function(e,t){return e&&t?p(e)&&p(t)?e.concat(t):c({},Ls(e),Ls(t)):e||t},e.mergeProps=rr,e.nextTick=en,e.normalizeClass=G,e.normalizeProps=function(e){if(!e)return null;let{class:t,style:n}=e;return t&&!y(t)&&(e.class=G(t)),n&&(e.style=H(n)),e},e.normalizeStyle=H,e.onActivated=cs,e.onBeforeMount=gs,e.onBeforeUnmount=_s,e.onBeforeUpdate=vs,e.onDeactivated=as,e.onErrorCaptured=Ts,e.onMounted=ys,e.onRenderTracked=ks,e.onRenderTriggered=Cs,e.onScopeDispose=function(e){re&&re.cleanups.push(e)},e.onServerPrefetch=xs,e.onUnmounted=Ss,e.onUpdated=bs,e.openBlock=Do,e.popScopeId=function(){fn=null},e.provide=Xs,e.proxyRefs=Pt,e.pushScopeId=function(e){fn=e},e.queuePostFlushCb=sn,e.reactive=mt,e.readonly=yt,e.ref=Rt,e.registerRuntimeCompiler=_r,e.render=Yi,e.renderList=function(e,t,n,s){let o;const r=n&&n[s];if(p(e)||y(e)){o=new Array(e.length);for(let n=0,s=e.length;n<s;n++)o[n]=t(e[n],n,void 0,r&&r[n])}else if("number"==typeof e){o=new Array(e);for(let n=0;n<e;n++)o[n]=t(n+1,n,void 0,r&&r[n])}else if(b(e))if(e[Symbol.iterator])o=Array.from(e,((e,n)=>t(e,n,void 0,r&&r[n])));else{const n=Object.keys(e);o=new Array(n.length);for(let s=0,i=n.length;s<i;s++){const i=n[s];o[s]=t(e[i],i,s,r&&r[s])}}else o=[];return n&&(n[s]=o),o},e.renderSlot=function(e,t,n={},s,o){if(hn.isCE||hn.parent&&ss(hn.parent)&&hn.parent.isCE)return"default"!==t&&(n.name=t),Zo("slot",n,s&&s());let r=e[t];r&&r._c&&(r._d=!1),Do();const i=r&&ws(r(n)),l=Wo(Fo,{key:n.key||i&&i.key||`_${t}`},i||(s?s():[]),i&&1===e._?64:-2);return!o&&l.scopeId&&(l.slotScopeIds=[l.scopeId+"-s"]),r&&r._c&&(r._d=!0),l},e.resolveComponent=function(e,t){return kn(xn,e,!0,t)||e},e.resolveDirective=function(e){return kn("directives",e)},e.resolveDynamicComponent=function(e){return y(e)?kn(xn,e,!1)||e:e||Cn},e.resolveFilter=null,e.resolveTransitionHooks=Qn,e.setBlockTracking=Ho,e.setDevtoolsHook=Ir,e.setTransitionHooks=es,e.shallowReactive=gt,e.shallowReadonly=function(e){return vt(e,!0,je,ut,ft)},e.shallowRef=function(e){return Ot(e,!0)},e.ssrContextKey=Fn,e.ssrUtils=null,e.stop=function(e){e.effect.stop()},e.toDisplayString=e=>y(e)?e:null==e?"":p(e)||b(e)&&(e.toString===S||!g(e.toString))?JSON.stringify(e,se,2):String(e),e.toHandlerKey=F,e.toHandlers=function(e,t){const n={};for(const s in e)n[t&&/[A-Z]/.test(s)?`on:${s}`:F(s)]=e[s];return n},e.toRaw=Ct,e.toRef=function(e,t,n){return It(e)?e:g(e)?new Dt(e):b(e)&&arguments.length>1?Ut(e,t,n):Rt(e)},e.toRefs=function(e){const t=p(e)?new Array(e.length):{};for(const n in e)t[n]=Ut(e,n);return t},e.toValue=function(e){return g(e)?e():Ft(e)},e.transformVNodeArgs=function(e){},e.triggerRef=function(e){At(e,4)},e.unref=Ft,e.useAttrs=function(){return Os().attrs},e.useCssModule=function(e="$style"){return n},e.useCssVars=function(e){const t=ur();if(!t)return;const n=t.ut=(n=e(t.proxy))=>{Array.from(document.querySelectorAll(`[data-v-owner="${t.uid}"]`)).forEach((e=>oi(e,n)))},s=()=>{const s=e(t.proxy);si(t.subTree,s),n(s)};Mn(s),ys((()=>{const e=new MutationObserver(s);e.observe(t.subTree.el.parentNode,{childList:!0}),Ss((()=>e.disconnect()))}))},e.useModel=function(e,t,s=n){const o=ur(),r=I(t),i=O(t),l=Bt(((n,l)=>{let c;return Pn((()=>{const n=e[t];M(c,n)&&(c=n,l())})),{get:()=>(n(),s.get?s.get(c):c),set(e){const n=o.vnode.props;n&&(t in n||r in n||i in n)&&(`onUpdate:${t}`in n||`onUpdate:${r}`in n||`onUpdate:${i}`in n)||!M(e,c)||(c=e,l()),o.emit(`update:${t}`,s.set?s.set(e):e)}}})),c="modelValue"===t?"modelModifiers":`${t}Modifiers`;return l[Symbol.iterator]=()=>{let t=0;return{next:()=>t<2?{value:t++?e[c]||{}:l,done:!1}:{done:!0}}},l},e.useSSRContext=()=>{},e.useSlots=function(){return Os().slots},e.useTransitionState=Kn,e.vModelCheckbox=Pi,e.vModelDynamic=Hi,e.vModelRadio=Bi,e.vModelSelect=Vi,e.vModelText=Mi,e.vShow=ei,e.version=Nr,e.warn=Ar,e.watch=Bn,e.watchEffect=function(e,t){return Vn(e,null,t)},e.watchPostEffect=Mn,e.watchSyncEffect=Pn,e.withAsyncContext=function(e){const t=ur();let n=e();return fr(),_(n)&&(n=n.catch((e=>{throw hr(t),e}))),[n,()=>hr(t)]},e.withCtx=gn,e.withDefaults=function(e,t){return null},e.withDirectives=function(e,t){if(null===hn)return e;const s=Cr(hn)||hn.proxy,o=e.dirs||(e.dirs=[]);for(let r=0;r<t.length;r++){let[e,i,l,c=n]=t[r];e&&(g(e)&&(e={mounted:e,updated:e}),e.deep&&jn(i),o.push({dir:e,instance:s,value:i,oldValue:void 0,arg:l,modifiers:c}))}return e},e.withKeys=(e,t)=>{const n=e._withKeys||(e._withKeys={}),s=t.join(".");return n[s]||(n[s]=n=>{if(!("key"in n))return;const s=O(n.key);return t.some((e=>e===s||zi[e]===s))?e(n):void 0})},e.withMemo=function(e,t,n,s){const o=n[s];if(o&&Er(o,e))return o;const r=t();return r.memo=e.slice(),n[s]=r},e.withModifiers=(e,t)=>{const n=e._withMods||(e._withMods={}),s=t.join(".");return n[s]||(n[s]=(n,...s)=>{for(let e=0;e<t.length;e++){const s=Ki[t[e]];if(s&&s(n,t))return}return e(n,...s)})},e.withScopeId=e=>gn,e}({});
diff --git a/assets/js/vue_filters.js b/assets/js/vue_filters.js
index 56a0fcb1..b342a124 100644
--- a/assets/js/vue_filters.js
+++ b/assets/js/vue_filters.js
@@ -1,5 +1,5 @@
-Vue.filter('numberformat', function (value, locale = 'en-US', options = {}) {
-  if ( ! value ) value = 0;
+// Vue.filter('numberformat', function (value, locale = 'en-US', options = {}) {
+//   if ( ! value ) value = 0;
 
-  return Intl.NumberFormat(locale, options).format(value);
-});
\ No newline at end of file
+//   return Intl.NumberFormat(locale, options).format(value);
+// });
\ No newline at end of file
diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index fc07662c..57b2795a 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -1,28 +1,17 @@
 const watcherMixin = {
   methods: {
-    $withoutWatchers: function (cb, filter) {
-      let ww = (filter === null) ? this._watchers : [];
+    $withoutWatchers (cb) {
+      const watchers = this._.type.watch;
 
-      if (typeof(filter) == "string") {
-        this._watchers.forEach((w) => { if (w.expression == filter) {ww.push(w)} } )
-      } else { // if it is a true regex
-        this._watchers.forEach((w) => { if (w.expression.match(filter)) {ww.push(w)} } )
+      for (let index in this._.type.watch) {
+          this._.type.watch[index] = Object.assign(this._.type.watch[index], { cb: () => null, sync: true })
       }
 
-      const watchers = ww.map((watcher) => ({ cb: watcher.cb, sync: watcher.sync }));
+      cb()
 
-      for (let index in ww) {
-        ww[index].cb = () => null;
-        ww[index].sync = true;
+      for (let index in this._.type.watch) {
+          this._.type.watch[index] = Object.assign(this._.type.watch[index], watchers[index])
       }
-
-      cb();
-
-      for (let index in ww) {
-        ww[index].cb = watchers[index].cb;
-        ww[index].sync = watchers[index].sync;
-      }
-
     },
 
     updateField: function (field, newVal) {
diff --git a/src/Elements.jl b/src/Elements.jl
index 4ba36d78..d0be54e9 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -66,7 +66,9 @@ function vue_integration(::Type{M};
 
   function initStipple(rootSelector){
     Stipple.init($( core_theme ? "{theme: '$theme'}" : "" ));
-    window.$vue_app_name = window.GENIEMODEL = new Vue($( replace(vue_app, "'$(Stipple.UNDEFINED_PLACEHOLDER)'"=>Stipple.UNDEFINED_VALUE) ));
+    window.$vue_app_name = window.GENIEMODEL = Vue.createApp($( replace(vue_app, "'$(Stipple.UNDEFINED_PLACEHOLDER)'"=>Stipple.UNDEFINED_VALUE) )).mount(rootSelector);
+    // window.GENIEMODEL.component('StDashboard', c);
+    // window.GENIEMODEL.component('StBigNumber', a);
   } // end of initStipple
 
     "
diff --git a/src/Layout.jl b/src/Layout.jl
index 96088c09..aaf27f7b 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -28,14 +28,14 @@ If `partial` is `true`, the page layout HTML elements are not returned.
 julia> layout([
         span("Hello", @text(:greeting))
         ])
-"<!DOCTYPE html>\n<html><head><title></title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui\" /></head><body class style><link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><span v-text='greeting'>Hello</span><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.js\"></script><script src=\"/js/quasar.umd.min.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script></body></html>"
+"<!DOCTYPE html>\n<html><head><title></title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui\" /></head><body class style><link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><span v-text='greeting'>Hello</span><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.global.prod.js\"></script><script src=\"/js/quasar.umd.min.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script></body></html>"
 ```
 
 ```julia
 julia> layout([
         span("Hello", @text(:greeting))
         ], partial = true)
-"<link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><span v-text='greeting'>Hello</span><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.js\"></script><script src=\"/js/quasar.umd.min.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script>"
+"<link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><span v-text='greeting'>Hello</span><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.global.prod.js\"></script><script src=\"/js/quasar.umd.min.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script>"
 ```
 """
 function layout(output::Union{S,Vector}, m::M;
@@ -78,7 +78,7 @@ Generates the HTML code corresponding to an SPA (a single page application), def
 julia> page(:elemid, [
         span("Hello", @text(:greeting))
         ])
-"<!DOCTYPE html>\n<html><head><title></title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui\" /></head><body class style><link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><div id=elemid><span v-text='greeting'>Hello</span></div><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.js\"></script><script src=\"/js/quasar.umd.min.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script></body></html>"
+"<!DOCTYPE html>\n<html><head><title></title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui\" /></head><body class style><link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><div id=elemid><span v-text='greeting'>Hello</span></div><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.global.prod.js\"></script><script src=\"/js/quasar.umd.min.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script></body></html>"
 ```
 """
 function page(model::M, args...;
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 67c28b4e..e6c2075e 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -814,7 +814,7 @@ function deps_routes(channel::String = Stipple.channel_js_name; core_theme::Bool
         Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@__DIR__, "..")), type="js", file="underscore-min")), :javascript) |> Genie.Renderer.respond
     end
 
-    VUEJS = Genie.Configuration.isprod() ? "vue.min" : "vue"
+    VUEJS = Genie.Configuration.isprod() ? "vue.global.prod" : "vue.global"
     Genie.Router.route(
       Genie.Assets.asset_route(assets_config, :js, file=VUEJS), named = :get_vuejs) do
         Genie.Renderer.WebRenderable(
@@ -890,7 +890,7 @@ function deps(m::M; core_theme::Bool = true) :: Vector{String} where {M<:Reactiv
     channelscript(channel),
     (is_channels_webtransport() ? Genie.Assets.channels_script_tag(channel) : Genie.Assets.webthreads_script_tag(channel)),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="underscore-min")),
-    Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file=(Genie.Configuration.isprod() ? "vue.min" : "vue"))),
+    Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file=(Genie.Configuration.isprod() ? "vue.global.prod" : "vue.global"))),
     core_theme && Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="stipplecore")),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="vue_filters"), defer=true),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="watchers")),
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 9eedea3a..4397c7b3 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -131,9 +131,12 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
     result[julia_to_vue(field)] = Stipple.jsrender(f, field)
   end
 
-  vue = Dict( :el => JSONText("rootSelector"),
+  # convert :data to () => ({   })
+  data = JSON3.write(merge(result, client_data(app)))
+
+  vue = Dict( #:el => JSONText("rootSelector"),
               :mixins => JSONText("[watcherMixin, reviveMixin, eventMixin]"),
-              :data => merge(result, client_data(app)))
+              :data => JSONText("() => ($data)") )
   for (f, field) in ((components, :components), (js_methods, :methods), (js_computed, :computed), (js_watch, :watch))
     js = join_js(f(app), ",\n    "; pre = strip)
     isempty(js) || push!(vue, field => JSONText("{\n    $js\n}"))

From 743815d4fe03f6260e8fd654e13a88b56080f930 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 12 Feb 2024 08:29:22 +0100
Subject: [PATCH 166/265] replace $withoutWatchers with field-specific
 ignoreUpdates

---
 assets/js/watchers.js | 54 ++++++++++++++++++++++++++++++++++---------
 src/Stipple.jl        |  9 ++++----
 2 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index 57b2795a..3e3a676c 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -1,16 +1,48 @@
 const watcherMixin = {
   methods: {
-    $withoutWatchers (cb) {
-      const watchers = this._.type.watch;
-
-      for (let index in this._.type.watch) {
-          this._.type.watch[index] = Object.assign(this._.type.watch[index], { cb: () => null, sync: true })
+    // Acknowledgement: copied watchIgnorable from VueUse
+    watchIgnorable: function (source,cb,options) {
+      const ignoreCount = Vue.ref(0)
+      const syncCount = Vue.ref(0)
+      const syncStop = Vue.watch(
+        source,
+        () => {
+          syncCount.value++
+        },
+        { ...options, flush: 'sync' },
+      )
+      const stop = Vue.watch( source,
+        (...args) => {
+          const ignore = ignoreCount.value > 0 && 
+            ignoreCount.value === syncCount.value
+    
+          ignoreCount.value = 0
+          syncCount.value = 0
+    
+          if (!ignore) {
+            cb(...args)
+          }
+        }, 
+        options 
+      )
+      const ignoreUpdates = (updater) => {
+        const prev = syncCount.value
+        updater()
+        const changes = syncCount.value - prev
+        // Add sync changes done in updater
+        ignoreCount.value += changes
       }
-
-      cb()
-
-      for (let index in this._.type.watch) {
-          this._.type.watch[index] = Object.assign(this._.type.watch[index], watchers[index])
+      const ignorePrevAsyncUpdates = () => {
+        // All sync changes til are ignored
+        ignoreCount.value = syncCount.value
+      }
+      return { 
+        ignoreUpdates,
+        ignorePrevAsyncUpdates,
+        stop: () => {
+          syncStop()
+          stop()
+        }
       }
     },
 
@@ -18,7 +50,7 @@ const watcherMixin = {
       if (field=='js_app') { newVal(); return }
 
       try {
-        this.$withoutWatchers(()=>{this[field]=newVal},"function(){return this." + field + "}");
+        this['_ignore_' + field](()=>{this[field] = newVal});
         if (field=='js_model' && typeof(this[field])=='function') { 
           this[field]()
           this[field] = null
diff --git a/src/Stipple.jl b/src/Stipple.jl
index e6c2075e..a2b665d4 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -348,17 +348,18 @@ function watch(vue_app_name::String, fieldname::Symbol, channel::String, debounc
   output = IOBuffer()
   if fieldname == :isready
     print(output, """
-      $vue_app_name.\$watch(function(){return this.$fieldname}, function(newVal, oldVal){$jsfunction}, {deep: true});
-    """)
+      if ($vue_app_name.\$my_dummy_value) console.log('Due to a bug we need to have a \$-sign in this function');
+      ({ignoreUpdates: $vue_app_name._ignore_$fieldname} = $vue_app_name.watchIgnorable(function(){return $vue_app_name.$fieldname}, function(newVal, oldVal){$jsfunction}, {deep: true}));
+      """)
   else
     AM = get_abstract_type(M)
     debounce = get(get(DEBOUNCE, AM, Dict{Symbol, Any}()), fieldname, debounce)
     print(output, debounce == 0 ?
       """
-        $vue_app_name.\$watch(function(){return this.$fieldname}, function(newVal, oldVal){$jsfunction}, {deep: true});
+        ({ignoreUpdates: $vue_app_name._ignore_$fieldname} = $vue_app_name.watchIgnorable(function(){return $vue_app_name.$fieldname}, function(newVal, oldVal){$jsfunction}, {deep: true}));
       """ : 
       """
-        $vue_app_name.\$watch(function(){return this.$fieldname}, _.debounce(function(newVal, oldVal){$jsfunction}, $debounce), {deep: true});
+        ({ignoreUpdates: $vue_app_name._ignore_$fieldname} = $vue_app_name.watchIgnorable(function(){return $vue_app_name.$fieldname}, _.debounce(function(newVal, oldVal){$jsfunction}, $debounce), {deep: true}));
       """
     )
   end

From f918bdfba1bd9a5f4cc37bca225d375fafe93ece Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 12 Feb 2024 08:58:13 +0100
Subject: [PATCH 167/265] remove manual modification of watcher expressions

---
 src/Stipple.jl | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index a2b665d4..20581cb2 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -363,9 +363,6 @@ function watch(vue_app_name::String, fieldname::Symbol, channel::String, debounc
       """
     )
   end
-  # in production mode vue does not fill `this.expression` in the watcher, so we do it manually
-  Genie.Configuration.isprod() &&
-    print(output, "$vue_app_name._watchers[$vue_app_name._watchers.length - 1].expression = 'function(){return this.$fieldname}'")
 
   print(output, "\n\n")
   String(take!(output))

From 34860a32ea111388799dd3cf4ed4fd0714426894 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 12 Feb 2024 11:51:24 +0100
Subject: [PATCH 168/265] fix global components

---
 assets/js/stipplecore.js |  4 ++--
 src/Elements.jl          | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/assets/js/stipplecore.js b/assets/js/stipplecore.js
index a4a8608c..bee857ea 100644
--- a/assets/js/stipplecore.js
+++ b/assets/js/stipplecore.js
@@ -136,9 +136,9 @@
         var t;
         if (!Vue) throw "Stipple requires Vue";
         e = Object.assign({}, e);
-        // Vue.component("StDashboard", c);
-        // Vue.component("StBigNumber", a);
+        const components = {StDashboard: c, StBigNumber: a};
         (t = document.querySelector("html").classList).add.apply(t, ["stipple-core", e.theme ? e.theme : "stipple-blue"]);
+        return components
       },
     };
   },
diff --git a/src/Elements.jl b/src/Elements.jl
index d0be54e9..2c5def98 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -65,10 +65,13 @@ function vue_integration(::Type{M};
     "
 
   function initStipple(rootSelector){
-    Stipple.init($( core_theme ? "{theme: '$theme'}" : "" ));
-    window.$vue_app_name = window.GENIEMODEL = Vue.createApp($( replace(vue_app, "'$(Stipple.UNDEFINED_PLACEHOLDER)'"=>Stipple.UNDEFINED_VALUE) )).mount(rootSelector);
-    // window.GENIEMODEL.component('StDashboard', c);
-    // window.GENIEMODEL.component('StBigNumber', a);
+    components = Stipple.init($( core_theme ? "{theme: '$theme'}" : "" ));
+    const app = Vue.createApp($( replace(vue_app, "'$(Stipple.UNDEFINED_PLACEHOLDER)'"=>Stipple.UNDEFINED_VALUE) ))
+    Object.entries(components).forEach(([key, value]) => {
+      // console.log(key, value);
+      app.component(key, value)
+    });
+    window.$vue_app_name = window.GENIEMODEL = app.mount(rootSelector);
   } // end of initStipple
 
     "

From 6d8706655858ad704fd751320b2bc289936340fe Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 12 Feb 2024 12:33:16 +0100
Subject: [PATCH 169/265] move filter numberformat to filterMixin

---
 assets/js/vue_filters.js | 12 ++++++++----
 src/stipple/rendering.jl |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/assets/js/vue_filters.js b/assets/js/vue_filters.js
index b342a124..e805db3b 100644
--- a/assets/js/vue_filters.js
+++ b/assets/js/vue_filters.js
@@ -1,5 +1,9 @@
-// Vue.filter('numberformat', function (value, locale = 'en-US', options = {}) {
-//   if ( ! value ) value = 0;
+const filterMixin = {
+    methods: {
+        numberformat: function (value, locale = 'en-US', options = {}) {
+            if ( ! value ) value = 0;
 
-//   return Intl.NumberFormat(locale, options).format(value);
-// });
\ No newline at end of file
+            return Intl.NumberFormat(locale, options).format(value);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 4397c7b3..57408f88 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -135,7 +135,7 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
   data = JSON3.write(merge(result, client_data(app)))
 
   vue = Dict( #:el => JSONText("rootSelector"),
-              :mixins => JSONText("[watcherMixin, reviveMixin, eventMixin]"),
+              :mixins => JSONText("[watcherMixin, reviveMixin, eventMixin, filterMixin]"),
               :data => JSONText("() => ($data)") )
   for (f, field) in ((components, :components), (js_methods, :methods), (js_computed, :computed), (js_watch, :watch))
     js = join_js(f(app), ",\n    "; pre = strip)

From 599e0dcda6c0ee395734751ae0b21f454ca20793 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 12 Feb 2024 12:51:45 +0100
Subject: [PATCH 170/265] cleanup

---
 src/Stipple.jl           | 9 ++++-----
 src/stipple/rendering.jl | 7 ++++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 20581cb2..f797782c 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -348,23 +348,22 @@ function watch(vue_app_name::String, fieldname::Symbol, channel::String, debounc
   output = IOBuffer()
   if fieldname == :isready
     print(output, """
-      if ($vue_app_name.\$my_dummy_value) console.log('Due to a bug we need to have a \$-sign in this function');
-      ({ignoreUpdates: $vue_app_name._ignore_$fieldname} = $vue_app_name.watchIgnorable(function(){return $vue_app_name.$fieldname}, function(newVal, oldVal){$jsfunction}, {deep: true}));
+      // Don't remove this line: due to a bug we need to have a \$-sign in this function;
+          ({ignoreUpdates: $vue_app_name._ignore_$fieldname} = $vue_app_name.watchIgnorable(function(){return $vue_app_name.$fieldname}, function(newVal, oldVal){$jsfunction}, {deep: true}));
       """)
   else
     AM = get_abstract_type(M)
     debounce = get(get(DEBOUNCE, AM, Dict{Symbol, Any}()), fieldname, debounce)
     print(output, debounce == 0 ?
       """
-        ({ignoreUpdates: $vue_app_name._ignore_$fieldname} = $vue_app_name.watchIgnorable(function(){return $vue_app_name.$fieldname}, function(newVal, oldVal){$jsfunction}, {deep: true}));
+          ({ignoreUpdates: $vue_app_name._ignore_$fieldname} = $vue_app_name.watchIgnorable(function(){return $vue_app_name.$fieldname}, function(newVal, oldVal){$jsfunction}, {deep: true}));
       """ : 
       """
-        ({ignoreUpdates: $vue_app_name._ignore_$fieldname} = $vue_app_name.watchIgnorable(function(){return $vue_app_name.$fieldname}, _.debounce(function(newVal, oldVal){$jsfunction}, $debounce), {deep: true}));
+          ({ignoreUpdates: $vue_app_name._ignore_$fieldname} = $vue_app_name.watchIgnorable(function(){return $vue_app_name.$fieldname}, _.debounce(function(newVal, oldVal){$jsfunction}, $debounce), {deep: true}));
       """
     )
   end
 
-  print(output, "\n\n")
   String(take!(output))
 end
 
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 57408f88..cb9ffe94 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -134,9 +134,10 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
   # convert :data to () => ({   })
   data = JSON3.write(merge(result, client_data(app)))
 
-  vue = Dict( #:el => JSONText("rootSelector"),
-              :mixins => JSONText("[watcherMixin, reviveMixin, eventMixin, filterMixin]"),
-              :data => JSONText("() => ($data)") )
+  vue = Dict(
+    :mixins => JSONText("[watcherMixin, reviveMixin, eventMixin, filterMixin]"),
+    :data => JSONText("() => ($data)")
+  )
   for (f, field) in ((components, :components), (js_methods, :methods), (js_computed, :computed), (js_watch, :watch))
     js = join_js(f(app), ",\n    "; pre = strip)
     isempty(js) || push!(vue, field => JSONText("{\n    $js\n}"))

From 907d118bc39bfe225155b0f75c6c5d130b499192 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 12 Feb 2024 17:37:40 +0100
Subject: [PATCH 171/265] support plugins

---
 assets/js/watchers.js |  6 +++++-
 src/Elements.jl       | 25 +++++++++++++++++++++++--
 src/Layout.jl         |  6 +++---
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/assets/js/watchers.js b/assets/js/watchers.js
index 3e3a676c..6d87f2d6 100644
--- a/assets/js/watchers.js
+++ b/assets/js/watchers.js
@@ -50,7 +50,11 @@ const watcherMixin = {
       if (field=='js_app') { newVal(); return }
 
       try {
-        this['_ignore_' + field](()=>{this[field] = newVal});
+        if (this['_ignore_' + field]) {
+          this['_ignore_' + field](()=>{this[field] = newVal});
+        } else {
+          this[field] = newVal
+        }
         if (field=='js_model' && typeof(this[field])=='function') { 
           this[field]()
           this[field] = null
diff --git a/src/Elements.jl b/src/Elements.jl
index 2c5def98..6d908013 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -13,9 +13,29 @@ import Genie.Renderer.Html: HTMLString, normal_element
 
 export root, elem, vm, @if, @else, @elseif, @for, @text, @bind, @data, @on, @click, @showif
 export stylesheet, kw_to_str
+export add_plugins, remove_plugins
+
+const PLUGINS = String[]
+
+
+function add_plugins(plugins::Function)
+  append!(PLUGINS, plugins()) |> union!
+end
+
+function add_plugins(plugins::Union{String, Vector{String}})
+  append!(PLUGINS, plugins isa String ? [plugins] : plugins) |> union!
+end
+
+function remove_plugins(plugins::Union{String, Vector{String}})
+  for p in (plugins isa String ? [plugins] : plugins)
+    index = findfirst(==(p), PLUGINS)
+    index === nothing || deleteat!(PLUGINS, index)
+  end
+  PLUGINS
+end
+
+remove_plugins(plugins::Function) = remove_plugins(plugins())
 
-# deprecated
-export @iif, @elsiif, @els, @recur
 
 #===#
 
@@ -71,6 +91,7 @@ function vue_integration(::Type{M};
       // console.log(key, value);
       app.component(key, value)
     });
+    $(join(["app.use($p);" for p in PLUGINS], "  \n"))
     window.$vue_app_name = window.GENIEMODEL = app.mount(rootSelector);
   } // end of initStipple
 
diff --git a/src/Layout.jl b/src/Layout.jl
index aaf27f7b..76ea142e 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -28,14 +28,14 @@ If `partial` is `true`, the page layout HTML elements are not returned.
 julia> layout([
         span("Hello", @text(:greeting))
         ])
-"<!DOCTYPE html>\n<html><head><title></title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui\" /></head><body class style><link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><span v-text='greeting'>Hello</span><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.global.prod.js\"></script><script src=\"/js/quasar.umd.min.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script></body></html>"
+"<!DOCTYPE html>\n<html><head><title></title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui\" /></head><body class style><link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><span v-text='greeting'>Hello</span><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.global.prod.js\"></script><script src=\"/js/quasar.umd.prod.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script></body></html>"
 ```
 
 ```julia
 julia> layout([
         span("Hello", @text(:greeting))
         ], partial = true)
-"<link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><span v-text='greeting'>Hello</span><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.global.prod.js\"></script><script src=\"/js/quasar.umd.min.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script>"
+"<link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><span v-text='greeting'>Hello</span><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.global.prod.js\"></script><script src=\"/js/quasar.umd.prod.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script>"
 ```
 """
 function layout(output::Union{S,Vector}, m::M;
@@ -78,7 +78,7 @@ Generates the HTML code corresponding to an SPA (a single page application), def
 julia> page(:elemid, [
         span("Hello", @text(:greeting))
         ])
-"<!DOCTYPE html>\n<html><head><title></title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui\" /></head><body class style><link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><div id=elemid><span v-text='greeting'>Hello</span></div><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.global.prod.js\"></script><script src=\"/js/quasar.umd.min.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script></body></html>"
+"<!DOCTYPE html>\n<html><head><title></title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui\" /></head><body class style><link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" /><link href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\" /><link href=\"/css/stipple/stipplecore.css\" rel=\"stylesheet\" /><link href=\"/css/stipple/quasar.min.css\" rel=\"stylesheet\" /><div id=elemid><span v-text='greeting'>Hello</span></div><script src=\"/js/channels.js?v=1.17.1\"></script><script src=\"/js/underscore-min.js\"></script><script src=\"/js/vue.global.prod.js\"></script><script src=\"/js/quasar.umd.prod.js\"></script>\n<script src=\"/js/apexcharts.min.js\"></script><script src=\"/js/vue-apexcharts.min.js\"></script><script src=\"/js/stipplecore.js\" defer></script><script src=\"/js/vue_filters.js\" defer></script></body></html>"
 ```
 """
 function page(model::M, args...;

From 1b1c6bf706180cb0e7a2e5ff09be3a2302669b9c Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 12 Feb 2024 21:25:37 +0100
Subject: [PATCH 172/265] replace `@iif` by `@if`

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

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index dead75aa..89d98b8e 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -73,7 +73,7 @@ function DEFAULT_LAYOUT(; title::String = "Genie App",
     <div class='container'>
       <div class='row'>
         <div class='col-12'>
-          <% page(model, partial = true, v__cloak = true, [@yield], @iif(:isready)) %>
+          <% page(model, partial = true, v__cloak = true, [@yield], @if(:isready)) %>
         </div>
       </div>
     </div>

From 764e2678f5c55c29f1004582f6afda73703a20d8 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 13 Feb 2024 17:59:58 +0100
Subject: [PATCH 173/265] make plugins model-specific

---
 src/Elements.jl | 57 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index 6d908013..299024a1 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -15,27 +15,62 @@ export root, elem, vm, @if, @else, @elseif, @for, @text, @bind, @data, @on, @cli
 export stylesheet, kw_to_str
 export add_plugins, remove_plugins
 
-const PLUGINS = String[]
+const Plugins = Dict{String, AbstractDict}
+PLUGINS = LittleDict{Union{Module, Type{<:ReactiveModel}}, Plugins}()
 
 
-function add_plugins(plugins::Function)
-  append!(PLUGINS, plugins()) |> union!
+function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Function)
+  add_plugins(parent, plugins())
 end
 
-function add_plugins(plugins::Union{String, Vector{String}})
-  append!(PLUGINS, plugins isa String ? [plugins] : plugins) |> union!
+function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::AbstractDict)
+  if haskey(PLUGINS, parent)
+    @show PLUGINS[parent]
+    merge!(PLUGINS[parent], plugins)
+    @show PLUGINS[parent]
+  else
+    PLUGINS[parent] = plugins
+  end
+  PLUGINS
 end
 
-function remove_plugins(plugins::Union{String, Vector{String}})
-  for p in (plugins isa String ? [plugins] : plugins)
-    index = findfirst(==(p), PLUGINS)
-    index === nothing || deleteat!(PLUGINS, index)
+add_plugins(plugins) = add_plugins(Stipple, plugins)
+
+function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Union{String, Vector{String}})
+  plugins isa String && (plugins = [plugins])
+  PLUGINS[parent] = LittleDict(p => Dict() for p in plugins)
+  PLUGINS
+end
+
+function remove_plugins(parent::Union{Module, Type{<:ReactiveModel}})
+  delete!(PLUGINS, parent)
+end
+
+function remove_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Union{String, Vector{String}})
+  haskey(PLUGINS, parent) || return PLUGINS
+  for plugin in (plugins isa String ? [plugins] : plugins)
+    delete!(PLUGINS[parent], plugin)
   end
+  isempty(PLUGINS[parent]) && delete!(PLUGINS, parent)
   PLUGINS
 end
 
-remove_plugins(plugins::Function) = remove_plugins(plugins())
+add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Union{Pair, AbstractVector{Pair}}) = add_plugins(parent, Dict(plugins))
+remove_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::AbstractDict) = remove_plugins(parent, collect(keys(plugins)))
+remove_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Function) = remove_plugins(parent, plugins())
+
+function plugins(::Type{M}) where M <: ReactiveModel
+  plugins = reduce(merge, values(filter(x -> x[1] isa Module, PLUGINS)))
+  app_plugins = get(PLUGINS, M, nothing)
+  app_plugins === nothing || merge!(plugins, app_plugins)
+  io = IOBuffer()
+  for (plugin, options) in plugins
+    print(io, isempty(options) ? "\n  app.use($plugin);" : "\n  app.use($plugin, $(js_attr(options)));")
+  end
+  String(take!(io))
+end
 
+plugins() = plugins(ReactiveModel)
 
 #===#
 
@@ -91,7 +126,7 @@ function vue_integration(::Type{M};
       // console.log(key, value);
       app.component(key, value)
     });
-    $(join(["app.use($p);" for p in PLUGINS], "  \n"))
+    $(plugins(M))
     window.$vue_app_name = window.GENIEMODEL = app.mount(rootSelector);
   } // end of initStipple
 

From a8e67b6d37388c75fd79c59adaf98bab08a5c8f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 14 Feb 2024 16:05:23 +0100
Subject: [PATCH 174/265] handle component rendering the Vue3-way

---
 src/Elements.jl           | 26 ++++++++++++++++++++------
 src/stipple/components.jl |  3 ++-
 src/stipple/rendering.jl  |  2 +-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index 299024a1..1f00b19c 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -34,8 +34,6 @@ function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Abst
   PLUGINS
 end
 
-add_plugins(plugins) = add_plugins(Stipple, plugins)
-
 function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Union{String, Vector{String}})
   plugins isa String && (plugins = [plugins])
   PLUGINS[parent] = LittleDict(p => Dict() for p in plugins)
@@ -59,8 +57,13 @@ add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Union{Pair, A
 remove_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::AbstractDict) = remove_plugins(parent, collect(keys(plugins)))
 remove_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Function) = remove_plugins(parent, plugins())
 
+add_plugins(plugins) = add_plugins(Stipple, plugins)
+remove_plugins(plugins) = remove_plugins(Stipple, plugins)
+
 function plugins(::Type{M}) where M <: ReactiveModel
-  plugins = reduce(merge, values(filter(x -> x[1] isa Module, PLUGINS)))
+  pplugins = values(filter(x -> x[1] isa Module, PLUGINS))
+  isempty(pplugins) && return ""
+  plugins = reduce(merge, pplugins)
   app_plugins = get(PLUGINS, M, nothing)
   app_plugins === nothing || merge!(plugins, app_plugins)
   io = IOBuffer()
@@ -111,10 +114,21 @@ function vue_integration(::Type{M};
                           transport::Module = Genie.WebChannels)::String where {M<:ReactiveModel}
   model = Base.invokelatest(M)
 
-  vue_app = replace(json(model |> Stipple.render), "\"{" => " {")
-  vue_app = replace(vue_app, "}\"" => "} ")
+  vue_app = json(model |> Stipple.render)
+  # vue_app = replace(vue_app, "\"{" => " {")
+  # vue_app = replace(vue_app, "}\"" => "} ")
   vue_app = replace(vue_app, "\"$(getchannel(model))\"" => Stipple.channel_js_name)
 
+  # determine global components (registered under ReactiveModel)
+  comps = Stipple.components(M)
+  if !isempty(comps)
+    comps = """
+      components = {$comps}
+      Object.entries(components).forEach(([key, value]) => {
+        app.component(key, value)
+      });
+    """
+  end
   output =
   string(
     "
@@ -123,9 +137,9 @@ function vue_integration(::Type{M};
     components = Stipple.init($( core_theme ? "{theme: '$theme'}" : "" ));
     const app = Vue.createApp($( replace(vue_app, "'$(Stipple.UNDEFINED_PLACEHOLDER)'"=>Stipple.UNDEFINED_VALUE) ))
     Object.entries(components).forEach(([key, value]) => {
-      // console.log(key, value);
       app.component(key, value)
     });
+    $comps
     $(plugins(M))
     window.$vue_app_name = window.GENIEMODEL = app.mount(rootSelector);
   } // end of initStipple
diff --git a/src/stipple/components.jl b/src/stipple/components.jl
index d5d971c5..6254a97f 100644
--- a/src/stipple/components.jl
+++ b/src/stipple/components.jl
@@ -32,7 +32,8 @@ JSON representation of the Vue.js components registered for the `ReactiveModel`
 function components(m::Type{M})::String where {M<:ReactiveModel}
   haskey(COMPONENTS, m) || return ""
 
-  json(Dict(k => JSONText(v) for (k, v) in COMPONENTS[m]))[2:end - 1]
+  # change to LittleDict as the order of components can be essential
+  json(LittleDict(k => JSONText(v) for (k, v) in COMPONENTS[m]))[2:end - 1]
 end
 
 function components(app::M)::String where {M<:ReactiveModel}
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index cb9ffe94..c704cd45 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -138,7 +138,7 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
     :mixins => JSONText("[watcherMixin, reviveMixin, eventMixin, filterMixin]"),
     :data => JSONText("() => ($data)")
   )
-  for (f, field) in ((components, :components), (js_methods, :methods), (js_computed, :computed), (js_watch, :watch))
+  for (f, field) in ((js_methods, :methods), (js_computed, :computed), (js_watch, :watch))
     js = join_js(f(app), ",\n    "; pre = strip)
     isempty(js) || push!(vue, field => JSONText("{\n    $js\n}"))
   end

From f029474bcad834825be0393f97941a8647a83496 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 15 Feb 2024 12:11:34 +0100
Subject: [PATCH 175/265] add Vue2 compatibility layer

---
 assets/js/vue2compat.js   | 16 ++++++++++++
 src/Elements.jl           | 53 ++++++++++++++++++++++++++++++++-------
 src/Stipple.jl            |  4 ++-
 src/stipple/components.jl | 20 +++++++++------
 4 files changed, 75 insertions(+), 18 deletions(-)
 create mode 100644 assets/js/vue2compat.js

diff --git a/assets/js/vue2compat.js b/assets/js/vue2compat.js
new file mode 100644
index 00000000..ce31f1a7
--- /dev/null
+++ b/assets/js/vue2compat.js
@@ -0,0 +1,16 @@
+window.vueLegacyPlugins = {}
+window.vueLegacyComponents = {}
+window.vueLegacyContext = "none"
+Vue.use = function(plugin, options) {
+    window.vueLegacyPlugins[window.vueLegacyContext] = {plugin: plugin, options: options}
+    x = window.vueLegacyContext.split('.')
+    if (isNaN(parseInt(x[x.length - 1]))) {
+        x.push(1)
+    } else {
+        x[x.length - 1] = x[x.length - 1] * 1 + 1
+    }
+    window.vueLegacyContext = x.join('.')
+}
+Vue.component = function(componentname, component) {
+    window.vueLegacyComponents[componentname] = component
+}
\ No newline at end of file
diff --git a/src/Elements.jl b/src/Elements.jl
index 1f00b19c..4214d0ef 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -15,28 +15,45 @@ export root, elem, vm, @if, @else, @elseif, @for, @text, @bind, @data, @on, @cli
 export stylesheet, kw_to_str
 export add_plugins, remove_plugins
 
-const Plugins = Dict{String, AbstractDict}
+const Plugins = Dict{String, Union{JSONText, AbstractDict}}
 PLUGINS = LittleDict{Union{Module, Type{<:ReactiveModel}}, Plugins}()
 
 
-function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Function)
-  add_plugins(parent, plugins())
+function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Function; legacy::Bool = false)
+  add_plugins(parent, plugins(); legacy)
 end
 
-function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::AbstractDict)
+function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::AbstractDict; legacy::Bool = false)
+  if legacy
+    d = LittleDict()
+    for (plugin, options) in plugins
+      push!(d, "window.vueLegacyPlugins['$plugin'].plugin" => options)
+    end
+    plugins = d
+  end
   if haskey(PLUGINS, parent)
-    @show PLUGINS[parent]
     merge!(PLUGINS[parent], plugins)
-    @show PLUGINS[parent]
   else
     PLUGINS[parent] = plugins
   end
   PLUGINS
 end
 
-function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Union{String, Vector{String}})
+function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Union{String, Vector{String}}; legacy::Bool = false)
   plugins isa String && (plugins = [plugins])
-  PLUGINS[parent] = LittleDict(p => Dict() for p in plugins)
+  plugin_dict = if legacy
+    d = LittleDict()
+    for plugin in plugins
+      p = """window.vueLegacyPlugins["$plugin"]"""
+      plugin = "$p.plugin"
+      options = JSONText("($p.options) ? $p.options : {}")
+      push!(d, plugin => options)
+    end
+    d
+  else
+    LittleDict(p => Dict() for p in plugins)
+  end
+  PLUGINS[parent] = plugin_dict
   PLUGINS
 end
 
@@ -68,7 +85,7 @@ function plugins(::Type{M}) where M <: ReactiveModel
   app_plugins === nothing || merge!(plugins, app_plugins)
   io = IOBuffer()
   for (plugin, options) in plugins
-    print(io, isempty(options) ? "\n  app.use($plugin);" : "\n  app.use($plugin, $(js_attr(options)));")
+    print(io, options isa AbstractDict && isempty(options) ? "\n  app.use($plugin);" : "\n  app.use($plugin, $(js_attr(options)));")
   end
   String(take!(io))
 end
@@ -129,6 +146,17 @@ function vue_integration(::Type{M};
       });
     """
   end
+
+  globalcomps = Stipple.components(ReactiveModel)
+  if !isempty(globalcomps)
+    globalcomps = """
+      components = {$globalcomps}
+      Object.entries(components).forEach(([key, value]) => {
+        app.component(key, value)
+      });
+    """
+  end
+
   output =
   string(
     "
@@ -139,8 +167,15 @@ function vue_integration(::Type{M};
     Object.entries(components).forEach(([key, value]) => {
       app.component(key, value)
     });
+    $globalcomps
     $comps
+    // gather legacy global options
+    app.prototype = {}
     $(plugins(M))
+    // apply legacy global options
+    Object.entries(app.prototype).forEach(([key, value]) => {
+      app.config.globalProperties[key] = value
+    });
     window.$vue_app_name = window.GENIEMODEL = app.mount(rootSelector);
   } // end of initStipple
 
diff --git a/src/Stipple.jl b/src/Stipple.jl
index f797782c..a1bd5112 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -822,7 +822,7 @@ function deps_routes(channel::String = Stipple.channel_js_name; core_theme::Bool
       Genie.Router.route(Genie.Assets.asset_route(assets_config, :js, file="stipplecore"), named = :get_stipplecorejs) do
         Genie.Renderer.WebRenderable(
           Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@__DIR__, "..")), type="js", file="stipplecore")), :javascript) |> Genie.Renderer.respond
-      end
+    end
     end
 
     Genie.Router.route(
@@ -843,6 +843,7 @@ function deps_routes(channel::String = Stipple.channel_js_name; core_theme::Bool
       end
     end
 
+    Genie.Assets.add_fileroute(assets_config, "vue2compat.js"; basedir = normpath(joinpath(@__DIR__, "..")))
   end
 
   nothing
@@ -891,6 +892,7 @@ function deps(m::M; core_theme::Bool = true) :: Vector{String} where {M<:Reactiv
     core_theme && Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="stipplecore")),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="vue_filters"), defer=true),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="watchers")),
+    Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="vue2compat")),
 
     (
       (Genie.config.webchannels_keepalive_frequency > 0 && is_channels_webtransport()) ?
diff --git a/src/stipple/components.jl b/src/stipple/components.jl
index 6254a97f..95e68ebd 100644
--- a/src/stipple/components.jl
+++ b/src/stipple/components.jl
@@ -12,17 +12,21 @@ This is usually needed for registering components provided by Stipple plugins.
 Stipple.register_components(HelloPie, StippleCharts.COMPONENTS)
 ```
 """
-function register_components(model::Type{M}, keysvals::AbstractVector) where {M<:ReactiveModel}
-  haskey(COMPONENTS, model) || (COMPONENTS[model] = Any[])
-  push!(COMPONENTS[model], keysvals...)
-end
-
-function register_components(model::Type{M}, args...) where {M<:ReactiveModel}
-  for a in args
-    register_components(model, a)
+function register_components(model::Type{M}, keysvals::Union{AbstractVector, AbstractDict}; legacy::Bool = false) where {M<:ReactiveModel}
+  haskey(COMPONENTS, model) || (COMPONENTS[model] = LittleDict())
+  for kv in keysvals
+    (k, v) = kv isa Pair ? kv : (kv, kv)
+    legacy && (v = "window.vueLegacyComponents['$v']")
+    delete!(COMPONENTS[model], k)
+    push!(COMPONENTS[model], k => v)
   end
+  # COMPONENTS[model] |> reverse! |> unique! |> reverse!
 end
 
+register_components(model::Type{<:ReactiveModel}, args...; legacy::Bool = false) = register_components(model, collect(args); legacy)
+
+register_global_components(args...; legacy) = register_components(ReactiveModel; legacy)
+
 """
     function components(m::Type{M})::String where {M<:ReactiveModel}
     function components(app::M)::String where {M<:ReactiveModel}

From 6e1eef1060ceb5072367e4a36a479e545596daaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 15 Feb 2024 12:11:56 +0100
Subject: [PATCH 176/265] shorten route definitions

---
 src/Stipple.jl | 42 ++++++++----------------------------------
 1 file changed, 8 insertions(+), 34 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index a1bd5112..9848405f 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -793,11 +793,7 @@ Registers the `routes` for all the required JavaScript dependencies (scripts).
 function deps_routes(channel::String = Stipple.channel_js_name; core_theme::Bool = true) :: Nothing
   if ! Genie.Assets.external_assets(assets_config)
 
-    Genie.Router.route(Genie.Assets.asset_route(Stipple.assets_config, :css, file="stipplecore")) do
-      Genie.Renderer.WebRenderable(
-        Genie.Assets.embedded(Genie.Assets.asset_file(cwd=dirname(@__DIR__), type="css", file="stipplecore")),
-        :css) |> Genie.Renderer.respond
-    end
+    Genie.Assets.add_fileroute(assets_config, "stipplecore.css"; basedir = normpath(joinpath(@__DIR__, "..")))
 
     if is_channels_webtransport()
       Genie.Assets.channels_route(Genie.Assets.jsliteral(channel))
@@ -805,42 +801,20 @@ function deps_routes(channel::String = Stipple.channel_js_name; core_theme::Bool
       Genie.Assets.webthreads_route(Genie.Assets.jsliteral(channel))
     end
 
-    Genie.Router.route(
-      Genie.Assets.asset_route(assets_config, :js, file="underscore-min"), named = :get_underscorejs) do
-      Genie.Renderer.WebRenderable(
-        Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@__DIR__, "..")), type="js", file="underscore-min")), :javascript) |> Genie.Renderer.respond
-    end
+    Genie.Assets.add_fileroute(assets_config, "underscore-min.js"; basedir = normpath(joinpath(@__DIR__, "..")))
 
-    VUEJS = Genie.Configuration.isprod() ? "vue.global.prod" : "vue.global"
-    Genie.Router.route(
-      Genie.Assets.asset_route(assets_config, :js, file=VUEJS), named = :get_vuejs) do
-        Genie.Renderer.WebRenderable(
-          Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@__DIR__, "..")), type="js", file=VUEJS)), :javascript) |> Genie.Renderer.respond
-    end
+    VUEJS = Genie.Configuration.isprod() ? "vue.global.prod.js" : "vue.global.js"
+    Genie.Assets.add_fileroute(assets_config, VUEJS; basedir = normpath(joinpath(@__DIR__, "..")))
 
     if core_theme
-      Genie.Router.route(Genie.Assets.asset_route(assets_config, :js, file="stipplecore"), named = :get_stipplecorejs) do
-        Genie.Renderer.WebRenderable(
-          Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@__DIR__, "..")), type="js", file="stipplecore")), :javascript) |> Genie.Renderer.respond
-    end
+      Genie.Assets.add_fileroute(assets_config, "stipplecore.js"; basedir = normpath(joinpath(@__DIR__, "..")))
     end
 
-    Genie.Router.route(
-      Genie.Assets.asset_route(assets_config, :js, file="vue_filters"), named = :get_vuefiltersjs) do
-        Genie.Renderer.WebRenderable(
-          Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@__DIR__, "..")), type="js", file="vue_filters")), :javascript) |> Genie.Renderer.respond
-    end
-
-    Genie.Router.route(Genie.Assets.asset_route(assets_config, :js, file="watchers"), named = :get_watchersjs) do
-      Genie.Renderer.WebRenderable(
-        Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@__DIR__, "..")), type="js", file="watchers")), :javascript) |> Genie.Renderer.respond
-    end
+    Genie.Assets.add_fileroute(assets_config, "vue_filters.js"; basedir = normpath(joinpath(@__DIR__, "..")))
+    Genie.Assets.add_fileroute(assets_config, "watchers.js"; basedir = normpath(joinpath(@__DIR__, "..")))
 
     if Genie.config.webchannels_keepalive_frequency > 0 && is_channels_webtransport()
-      Genie.Router.route(Genie.Assets.asset_route(assets_config, :js, file="keepalive"), named = :get_keepalivejs) do
-        Genie.Renderer.WebRenderable(
-          Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@__DIR__, "..")), type="js", file="keepalive")), :javascript) |> Genie.Renderer.respond
-      end
+      Genie.Assets.add_fileroute(assets_config, "keepalive.js"; basedir = normpath(joinpath(@__DIR__, "..")))
     end
 
     Genie.Assets.add_fileroute(assets_config, "vue2compat.js"; basedir = normpath(joinpath(@__DIR__, "..")))

From 16bae4bda394e5f2f31ad4af8740ee4bd777c190 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 16 Feb 2024 16:52:00 +0100
Subject: [PATCH 177/265] keep all vueLegacy info in an object

---
 assets/js/vue2compat.js   | 18 +++++++++++-------
 src/Elements.jl           |  4 ++--
 src/stipple/components.jl |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/assets/js/vue2compat.js b/assets/js/vue2compat.js
index ce31f1a7..d2abb9cc 100644
--- a/assets/js/vue2compat.js
+++ b/assets/js/vue2compat.js
@@ -1,16 +1,20 @@
-window.vueLegacyPlugins = {}
-window.vueLegacyComponents = {}
-window.vueLegacyContext = "none"
+window.vueLegacy={
+    plugins: {}, 
+    components: {},
+    context: "none"
+}
+
 Vue.use = function(plugin, options) {
-    window.vueLegacyPlugins[window.vueLegacyContext] = {plugin: plugin, options: options}
-    x = window.vueLegacyContext.split('.')
+    window.vueLegacy.plugins[window.vueLegacy.context] = {plugin: plugin, options: options}
+    // append an increasing number in case of multiple plugins with the same context
+    x = window.vueLegacy.context.split('.')
     if (isNaN(parseInt(x[x.length - 1]))) {
         x.push(1)
     } else {
         x[x.length - 1] = x[x.length - 1] * 1 + 1
     }
-    window.vueLegacyContext = x.join('.')
+    window.vueLegacy.context = x.join('.')
 }
 Vue.component = function(componentname, component) {
-    window.vueLegacyComponents[componentname] = component
+    window.vueLegacy.components[componentname] = component
 }
\ No newline at end of file
diff --git a/src/Elements.jl b/src/Elements.jl
index 4214d0ef..848cf3a4 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -27,7 +27,7 @@ function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Abst
   if legacy
     d = LittleDict()
     for (plugin, options) in plugins
-      push!(d, "window.vueLegacyPlugins['$plugin'].plugin" => options)
+      push!(d, "window.vueLegacy.plugins['$plugin'].plugin" => options)
     end
     plugins = d
   end
@@ -44,7 +44,7 @@ function add_plugins(parent::Union{Module, Type{<:ReactiveModel}}, plugins::Unio
   plugin_dict = if legacy
     d = LittleDict()
     for plugin in plugins
-      p = """window.vueLegacyPlugins["$plugin"]"""
+      p = """window.vueLegacy.plugins["$plugin"]"""
       plugin = "$p.plugin"
       options = JSONText("($p.options) ? $p.options : {}")
       push!(d, plugin => options)
diff --git a/src/stipple/components.jl b/src/stipple/components.jl
index 95e68ebd..ed192d85 100644
--- a/src/stipple/components.jl
+++ b/src/stipple/components.jl
@@ -16,7 +16,7 @@ function register_components(model::Type{M}, keysvals::Union{AbstractVector, Abs
   haskey(COMPONENTS, model) || (COMPONENTS[model] = LittleDict())
   for kv in keysvals
     (k, v) = kv isa Pair ? kv : (kv, kv)
-    legacy && (v = "window.vueLegacyComponents['$v']")
+    legacy && (v = "window.vueLegacy.components['$v']")
     delete!(COMPONENTS[model], k)
     push!(COMPONENTS[model], k => v)
   end

From fe3f0c27f834702847d3f18ce9b2e8342e7bdd87 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 16 Feb 2024 17:39:10 +0100
Subject: [PATCH 178/265] fix register_global_components

---
 src/stipple/components.jl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stipple/components.jl b/src/stipple/components.jl
index ed192d85..9554d317 100644
--- a/src/stipple/components.jl
+++ b/src/stipple/components.jl
@@ -20,12 +20,12 @@ function register_components(model::Type{M}, keysvals::Union{AbstractVector, Abs
     delete!(COMPONENTS[model], k)
     push!(COMPONENTS[model], k => v)
   end
-  # COMPONENTS[model] |> reverse! |> unique! |> reverse!
+  COMPONENTS
 end
 
 register_components(model::Type{<:ReactiveModel}, args...; legacy::Bool = false) = register_components(model, collect(args); legacy)
 
-register_global_components(args...; legacy) = register_components(ReactiveModel; legacy)
+register_global_components(args...; legacy) = register_components(ReactiveModel, args...; legacy)
 
 """
     function components(m::Type{M})::String where {M<:ReactiveModel}

From a0e96ec1855c82da4dacf0b6bb914ff3f4c5b192 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 16 Feb 2024 22:05:42 +0100
Subject: [PATCH 179/265] fix register_global_components

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

diff --git a/src/stipple/components.jl b/src/stipple/components.jl
index ed192d85..0b809974 100644
--- a/src/stipple/components.jl
+++ b/src/stipple/components.jl
@@ -25,7 +25,7 @@ end
 
 register_components(model::Type{<:ReactiveModel}, args...; legacy::Bool = false) = register_components(model, collect(args); legacy)
 
-register_global_components(args...; legacy) = register_components(ReactiveModel; legacy)
+register_global_components(args...; legacy) = register_components(ReactiveModel, args...; legacy)
 
 """
     function components(m::Type{M})::String where {M<:ReactiveModel}

From c375f5933bb9220f779e622605dc7d488837b4e1 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Sat, 17 Feb 2024 21:00:35 +0100
Subject: [PATCH 180/265] CI: replace nighly by 1.10

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 41ef7912..007c56c4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -12,7 +12,7 @@ jobs:
         version:
           - '1.6'
           - '1.7'
-          - 'nightly'
+          - '1.10'
         os:
           - ubuntu-latest
           - macOS-latest

From d96912ed17681e796371ab4c97a98f80685ed6f7 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 19 Feb 2024 15:14:32 +0100
Subject: [PATCH 181/265] default false for legacy in register_global_component

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

diff --git a/src/stipple/components.jl b/src/stipple/components.jl
index 9554d317..8238e441 100644
--- a/src/stipple/components.jl
+++ b/src/stipple/components.jl
@@ -25,7 +25,7 @@ end
 
 register_components(model::Type{<:ReactiveModel}, args...; legacy::Bool = false) = register_components(model, collect(args); legacy)
 
-register_global_components(args...; legacy) = register_components(ReactiveModel, args...; legacy)
+register_global_components(args...; legacy::Bool = false) = register_components(ReactiveModel, args...; legacy)
 
 """
     function components(m::Type{M})::String where {M<:ReactiveModel}

From 9ac31979addde147645bd523c10495afe91635f4 Mon Sep 17 00:00:00 2001
From: PGimenez <gimenezfebrer@gmail.com>
Date: Thu, 22 Feb 2024 09:32:43 +0100
Subject: [PATCH 182/265] theme update: smaller h1, link color, fix date field
 icon

---
 assets/css/stipplecore.css | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/assets/css/stipplecore.css b/assets/css/stipplecore.css
index 76d69eb3..7226640b 100644
--- a/assets/css/stipplecore.css
+++ b/assets/css/stipplecore.css
@@ -41,6 +41,15 @@
   border-radius: 5px;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
 }
+.stipple-core header {
+    padding-top:5px;
+    padding-left: 5px;
+  }
+
+.stipple-core a {
+    color: steelblue;
+}
+
 .container { margin-bottom: 20px; }
 .stipple-core .st-module > h1,
 .stipple-core .st-module > h2,
@@ -87,7 +96,9 @@
 .stipple-core .text-h1,
 .stipple-core h1 {
   line-height: 2.5rem;
+  font-size: 4rem;
 }
+
 .stipple-core .text-h2,
 .stipple-core h2 {
   line-height: 2rem;
@@ -265,6 +276,10 @@
 .stipple-core .q-field--standout .text-white .q-field__native {
   color: var(--q-color-white);
 }
+.stipple-core .q-field__control-container .material-icons {
+    margin-top: auto;
+    margin-bottom: auto;
+}
 .stipple-core .q-badge {
   font-weight: 700;
   padding: 4px 6px;
@@ -540,4 +555,4 @@ body > .q-loading-bar {
   }
 }
 
-[v-cloak] { display: none; }
\ No newline at end of file
+[v-cloak] { display: none; }

From 196f4b865d0bc126621cd5c7b7931c9670f9a29a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pere=20Gim=C3=A9nez?= <gimenezfebrer@gmail.com>
Date: Fri, 23 Feb 2024 13:50:30 +0100
Subject: [PATCH 183/265] Version 0.28.3

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 82f21e85..e19e526a 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.2"
+version = "0.28.3"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 1290d963404e51e1fe477d8b167ce4a040c7055a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 26 Feb 2024 08:20:22 +0100
Subject: [PATCH 184/265] add possibility to add autogenerated `js_created`
 entries, mainly to support compatibility for Quasar2 Tables

---
 src/stipple/jsmethods.jl | 4 ++++
 src/stipple/rendering.jl | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/stipple/jsmethods.jl b/src/stipple/jsmethods.jl
index e8242cc9..692138c8 100644
--- a/src/stipple/jsmethods.jl
+++ b/src/stipple/jsmethods.jl
@@ -225,4 +225,8 @@ function js_initscript(initscript::String)
       $(initscript)
   });
   """
+end
+
+function js_created_auto(x)
+""
 end
\ No newline at end of file
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index c704cd45..b1875a0d 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -149,6 +149,10 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
     (js_before_destroy, :beforeDestroy), (js_destroyed, :destroyed), (js_error_captured, :errorCaptured),)
 
     js = join_js(f(app), "\n\n    "; pre = strip)
+    if field == :created
+      auto_created = Stipple.js_created_auto(app)
+      auto_created == "" || (js *= auto_created)
+    end
     isempty(js) || push!(vue, field => JSONText("function(){\n    $js\n}"))
   end
 

From fcade3f383087811035429b8c81679875e965c5c Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 26 Feb 2024 13:10:03 +0100
Subject: [PATCH 185/265] add possibility to auto-generate js_watch entries

---
 src/stipple/jsmethods.jl | 4 ++++
 src/stipple/rendering.jl | 8 ++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/stipple/jsmethods.jl b/src/stipple/jsmethods.jl
index 692138c8..646435dd 100644
--- a/src/stipple/jsmethods.jl
+++ b/src/stipple/jsmethods.jl
@@ -229,4 +229,8 @@ end
 
 function js_created_auto(x)
 ""
+end
+
+function js_watch_auto(x)
+""
 end
\ No newline at end of file
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index b1875a0d..ecf1a1d0 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -140,6 +140,10 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
   )
   for (f, field) in ((js_methods, :methods), (js_computed, :computed), (js_watch, :watch))
     js = join_js(f(app), ",\n    "; pre = strip)
+    if field == :watch
+      watch_auto = join_js(Stipple.js_watch_auto(app), "\n\n    "; pre = strip)
+      watch_auto == "" || (js = "$js\n\n    $watch_auto")
+    end
     isempty(js) || push!(vue, field => JSONText("{\n    $js\n}"))
   end
   
@@ -150,8 +154,8 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
 
     js = join_js(f(app), "\n\n    "; pre = strip)
     if field == :created
-      auto_created = Stipple.js_created_auto(app)
-      auto_created == "" || (js *= auto_created)
+      created_auto = join_js(Stipple.js_created_auto(app), "\n\n    "; pre = strip)
+      created_auto == "" || (js = "$js\n\n    $created_auto")
     end
     isempty(js) || push!(vue, field => JSONText("function(){\n    $js\n}"))
   end

From 9d42b8743337f3f9d457677f8db40cf4444e7932 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 26 Feb 2024 13:28:07 +0100
Subject: [PATCH 186/265] fix rendering of auto entries

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

diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index ecf1a1d0..ad2b8aa7 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -141,8 +141,8 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
   for (f, field) in ((js_methods, :methods), (js_computed, :computed), (js_watch, :watch))
     js = join_js(f(app), ",\n    "; pre = strip)
     if field == :watch
-      watch_auto = join_js(Stipple.js_watch_auto(app), "\n\n    "; pre = strip)
-      watch_auto == "" || (js = "$js\n\n    $watch_auto")
+      watch_auto = join_js(Stipple.js_watch_auto(app), ",\n    "; pre = strip)
+      watch_auto == "" || (js = join_js([js, watch_auto], ",\n    "))
     end
     isempty(js) || push!(vue, field => JSONText("{\n    $js\n}"))
   end
@@ -155,7 +155,7 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
     js = join_js(f(app), "\n\n    "; pre = strip)
     if field == :created
       created_auto = join_js(Stipple.js_created_auto(app), "\n\n    "; pre = strip)
-      created_auto == "" || (js = "$js\n\n    $created_auto")
+      created_auto == "" || (js = join_js([js, created_auto], "\n\n    "))
     end
     isempty(js) || push!(vue, field => JSONText("function(){\n    $js\n}"))
   end

From 136b05d30736ec9987e6e06e86daab210bf7d032 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Mon, 26 Feb 2024 21:09:40 +0100
Subject: [PATCH 187/265] Precompile a test app to reduce time to first webpage
 (#264)

* precompile ReactiveTools App to reduce ttfx
* optionally set port for or entirely switch off precompilation of `get()` by setting `ENV["STIPPLE_PRECOMPILE_PORT"]` (e.g. `8081`) or `ENV["STIPPLE_PRECOMPILE_GET"]` (e.g. `1`, `0`, `true`, `false`)
---
 Project.toml   | 23 ++++++++++++-----------
 src/Stipple.jl | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/Project.toml b/Project.toml
index e19e526a..818cfac0 100644
--- a/Project.toml
+++ b/Project.toml
@@ -17,17 +17,28 @@ Observables = "510215fc-4207-5dde-b226-833fc4488ee2"
 OrderedCollections = "bac558e1-5e72-5ebc-8fee-abe8a469f55d"
 Parameters = "d96e819e-fc66-5662-9728-84c9c7592b0a"
 Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
+PrecompileTools = "aea7be01-6a6a-4083-8856-8a6e6704d82a"
 Random = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"
 Reexport = "189a3867-3050-52da-a836-e630ba90ab69"
 Requires = "ae029012-a4dd-5104-9daa-d747884805df"
 StructTypes = "856f2bd8-1eba-4b0a-8007-ebc267875bd4"
 Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 
+[weakdeps]
+DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
+JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
+OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
+
+[extensions]
+StippleDataFramesExt = "DataFrames"
+StippleJSONExt = "JSON"
+StippleOffsetArraysExt = "OffsetArrays"
+
 [compat]
 DataFrames = "1"
 Dates = "1.6"
 FilePathsBase = "0.9"
-Genie = "5.23.8"
+Genie = "5.24.4"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"
@@ -47,11 +58,6 @@ StructTypes = "1.8"
 Tables = "1"
 julia = "1.6"
 
-[extensions]
-StippleDataFramesExt = "DataFrames"
-StippleJSONExt = "JSON"
-StippleOffsetArraysExt = "OffsetArrays"
-
 [extras]
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
 JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
@@ -60,8 +66,3 @@ Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
 
 [targets]
 test = ["Test", "DataFrames", "JSON", "OffsetArrays"]
-
-[weakdeps]
-DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
-JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
-OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 67c28b4e..20395bdb 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -15,6 +15,7 @@ existing Vue.js libraries.
 """
 module Stipple
 
+using PrecompileTools
 const PRECOMPILE = Ref(false)
 const ALWAYS_REGISTER_CHANNELS = Ref(true)
 const USE_MODEL_STORAGE = Ref(true)
@@ -1285,4 +1286,44 @@ include("Layout.jl")
 @reexport using .Elements
 @reexport using .Layout
 
+# precompilation ...
+
+using Stipple.ReactiveTools
+@setup_workload begin
+  # Putting some things in `setup` can reduce the size of the
+  # precompile file and potentially make loading faster.
+  using Genie.HTTPUtils.HTTP
+  PRECOMPILE[] = true
+  @compile_workload begin
+      # all calls in this block will be precompiled, regardless of whether
+      # they belong to your package or not (on Julia 1.8 and higher)
+      ui() = [cell("hello"), row("world"), htmldiv("Hello World")]
+
+      @app PrecompileApp begin
+        @in demo_i = 1
+        @out demo_s = "Hi"
+
+        @onchange demo_i begin
+          println(demo_i)
+        end
+      end
+
+      route("/") do 
+        model = Stipple.ReactiveTools.@init PrecompileApp
+        page(model, ui) |> html
+      end
+      port = tryparse(Int, get(ENV, "STIPPLE_PRECOMPILE_PORT", ""))
+      port === nothing && (port = rand(8081:8999))
+      up(port)
+        
+      precompile_get = tryparse(Bool, get(ENV, "STIPPLE_PRECOMPILE_GET", "1"))
+      precompile_get === true && HTTP.get("http://localhost:$port")
+      # The following lines (still) produce an error although
+      # they pass at the repl. Not very important though.
+      # HTTP.get("http://localhost:$port$(Genie.Assets.asset_path(Genie.assets_config, :js, file = "channels"))")
+      # HTTP.get("http://localhost:$port$(Genie.Assets.asset_path(assets_config, :js, file = "stipplecore"))")
+      down()
+  end
+end
+
 end

From 24a083864c51fc5a254dab4a253b23d19231b220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 26 Feb 2024 21:13:44 +0100
Subject: [PATCH 188/265] set version v0.28.4

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 818cfac0..50db1641 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.3"
+version = "0.28.4"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From efa80102081b417be9dc1e96c2fec757205e8356 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 26 Feb 2024 21:24:03 +0100
Subject: [PATCH 189/265] add compat for PrecompileTools

---
 Project.toml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Project.toml b/Project.toml
index 50db1641..58fb89ec 100644
--- a/Project.toml
+++ b/Project.toml
@@ -51,6 +51,7 @@ OffsetArrays = "1"
 OrderedCollections = "1"
 Parameters = "0.12"
 Pkg = "1.6"
+PrecompileTools = "1.2"
 Random = "1.6"
 Reexport = "1"
 Requires = "1"

From 4a9607b71a27d76ccd19e6327d220be974a516b4 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Mon, 26 Feb 2024 21:09:40 +0100
Subject: [PATCH 190/265] Precompile a test app to reduce time to first webpage
 (#264)

* precompile ReactiveTools App to reduce ttfx
* optionally set port for or entirely switch off precompilation of `get()` by setting `ENV["STIPPLE_PRECOMPILE_PORT"]` (e.g. `8081`) or `ENV["STIPPLE_PRECOMPILE_GET"]` (e.g. `1`, `0`, `true`, `false`)
---
 Project.toml   | 23 ++++++++++++-----------
 src/Stipple.jl | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/Project.toml b/Project.toml
index 82f21e85..1237898e 100644
--- a/Project.toml
+++ b/Project.toml
@@ -17,17 +17,28 @@ Observables = "510215fc-4207-5dde-b226-833fc4488ee2"
 OrderedCollections = "bac558e1-5e72-5ebc-8fee-abe8a469f55d"
 Parameters = "d96e819e-fc66-5662-9728-84c9c7592b0a"
 Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
+PrecompileTools = "aea7be01-6a6a-4083-8856-8a6e6704d82a"
 Random = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"
 Reexport = "189a3867-3050-52da-a836-e630ba90ab69"
 Requires = "ae029012-a4dd-5104-9daa-d747884805df"
 StructTypes = "856f2bd8-1eba-4b0a-8007-ebc267875bd4"
 Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 
+[weakdeps]
+DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
+JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
+OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
+
+[extensions]
+StippleDataFramesExt = "DataFrames"
+StippleJSONExt = "JSON"
+StippleOffsetArraysExt = "OffsetArrays"
+
 [compat]
 DataFrames = "1"
 Dates = "1.6"
 FilePathsBase = "0.9"
-Genie = "5.23.8"
+Genie = "5.24.4"
 GenieSession = "1"
 GenieSessionFileSession = "1"
 JSON = "0.20, 0.21"
@@ -47,11 +58,6 @@ StructTypes = "1.8"
 Tables = "1"
 julia = "1.6"
 
-[extensions]
-StippleDataFramesExt = "DataFrames"
-StippleJSONExt = "JSON"
-StippleOffsetArraysExt = "OffsetArrays"
-
 [extras]
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
 JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
@@ -60,8 +66,3 @@ Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
 
 [targets]
 test = ["Test", "DataFrames", "JSON", "OffsetArrays"]
-
-[weakdeps]
-DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
-JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
-OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 9848405f..8e5a0d49 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -15,6 +15,7 @@ existing Vue.js libraries.
 """
 module Stipple
 
+using PrecompileTools
 const PRECOMPILE = Ref(false)
 const ALWAYS_REGISTER_CHANNELS = Ref(true)
 const USE_MODEL_STORAGE = Ref(true)
@@ -1258,4 +1259,44 @@ include("Layout.jl")
 @reexport using .Elements
 @reexport using .Layout
 
+# precompilation ...
+
+using Stipple.ReactiveTools
+@setup_workload begin
+  # Putting some things in `setup` can reduce the size of the
+  # precompile file and potentially make loading faster.
+  using Genie.HTTPUtils.HTTP
+  PRECOMPILE[] = true
+  @compile_workload begin
+      # all calls in this block will be precompiled, regardless of whether
+      # they belong to your package or not (on Julia 1.8 and higher)
+      ui() = [cell("hello"), row("world"), htmldiv("Hello World")]
+
+      @app PrecompileApp begin
+        @in demo_i = 1
+        @out demo_s = "Hi"
+
+        @onchange demo_i begin
+          println(demo_i)
+        end
+      end
+
+      route("/") do 
+        model = Stipple.ReactiveTools.@init PrecompileApp
+        page(model, ui) |> html
+      end
+      port = tryparse(Int, get(ENV, "STIPPLE_PRECOMPILE_PORT", ""))
+      port === nothing && (port = rand(8081:8999))
+      up(port)
+        
+      precompile_get = tryparse(Bool, get(ENV, "STIPPLE_PRECOMPILE_GET", "1"))
+      precompile_get === true && HTTP.get("http://localhost:$port")
+      # The following lines (still) produce an error although
+      # they pass at the repl. Not very important though.
+      # HTTP.get("http://localhost:$port$(Genie.Assets.asset_path(Genie.assets_config, :js, file = "channels"))")
+      # HTTP.get("http://localhost:$port$(Genie.Assets.asset_path(assets_config, :js, file = "stipplecore"))")
+      down()
+  end
+end
+
 end

From 8882e8db109cec702facdb47f827fb2fdb7e174a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 26 Feb 2024 22:32:48 +0100
Subject: [PATCH 191/265] set version v0.29.0

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 1237898e..03ef85a9 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.2"
+version = "0.29.0"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 8be1fe9f024ecde77fce70dbf9cb94907e1ffff7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 26 Feb 2024 23:30:54 +0100
Subject: [PATCH 192/265] add migration help to README

---
 README.md | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3c535126..0508483c 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,31 @@ The Stipple ecosystem also includes:
 * [StipplePlotly.jl](https://github.com/GenieFramework/StipplePlotly.jl) - Plotting library for `Stipple.jl` based on [Plotly](https://plotly.com/javascript/)'s Graphing Library including event forwarding for interactive plots.
 * [StipplePlotlyExport.jl](https://github.com/GenieFramework/StipplePlotlyExport.jl) - add-on for `StipplePlotly.jl` to allow server side generation and exporting of plots. 
 * [StippleLatex.jl](https://github.com/GenieFramework/StippleLatex.jl) - support for reactive Latex content based on the [Vue-Katex](https://github.com/lucpotage/vue-katex) plugin. 
+## News
+
+From version 0.29 on Stipple has upgraded the front-end libraries to Vue3 / Quasar 2, as Vue-2 has reached its end-of-life.
+
+We have put lots of effort in making migration as easy as possible. Nevertheless, there are some places where advanced apps might need a little tweeking.
+
+## Main Changes 
+Here are the main changes and respective pitfalls
+
+### Components
+- Components can no longer be registered in Vue, but rather in the app instance. If you are using legacy comp, e.g. by including libreVue libraries, you will find them by entering `vueLegacy` in the browser console. (right-click -> 'Inspect'). Under the field "components" you will find the components to be registered. Registering is then done by adding `Stipple.register_global_component("<component name>", legacy = true)` to your app.
+- Vue-2 components often use `this.$set(this.field, key, value)` to set object fields, which is incompatible with Vue-3 syntax. Use a normal assignment instead, e.g. `field[key] = value`
+
+### Plugins
+If libraries install plugins, they need to be added to the app via `Stipple.add_plugin(MyApp, "<plugin name>")`
+
+### Component Attributes
+Vue-2 syntax for synchronizing additional fields other than the v-model has changed from `<fieldname>.sync` to `v-model:<fieldname>`, e.g. from `:pagination.sync = "myvar` to `v-model:pagination = "myvar"`. In StippleUI we had offered "paginationsync = :myvar" which will be automatically translated to the new syntax. If want to explicitly enter the original form, you can do so by using the var"" syntax, " , e.g. `table(:mytable, var"v-model:pagination" = "test")`
+
+### Templates
+In Vue-3 `v-if` and `v-for` precedence have change. So if you use both attributes in one component make sure to split your component in a container with a `v-for` attribute and a component, e.g. `div` or `span` with a `v-if` attribute.
+In StippleUI syntax `v-if` corresponds to `@if("...")`and `v-for`  corresponds to `@for("...")`
+
+### More Migration Support 
+... can be found at the Quasar site: https://quasar.dev/start/upgrade-guide/
 
 ## Installation
 
@@ -70,7 +95,7 @@ function ui()
 end
 
 route("/") do
-  global model
+  global model # this is for debugging purposes only and should be deleted in a productive setting
   model = Name |> init
   page(model, ui()) |> html
 end

From 098a067e29c70f3c0bc3d3b196a068c0c422fd33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 26 Feb 2024 23:42:40 +0100
Subject: [PATCH 193/265] add link to Vue migration guide

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 0508483c..4936d038 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,7 @@ In StippleUI syntax `v-if` corresponds to `@if("...")`and `v-for`  corresponds t
 
 ### More Migration Support 
 ... can be found at the Quasar site: https://quasar.dev/start/upgrade-guide/
+and at the Vue site: https://v3-migration.vuejs.org/
 
 ## Installation
 

From 7adae934c0e5e4d0ca866a6bcd7f4520f0c78db0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 3 Mar 2024 21:33:46 +0100
Subject: [PATCH 194/265] add context to merge_storage() to avoid
 precompilation error

---
 src/ReactiveTools.jl      | 4 ++--
 src/stipple/reactivity.jl | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 89d98b8e..607937bc 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -430,7 +430,7 @@ end
 
 macro add_vars(expr)
   init_storage(__module__)
-  REACTIVE_STORAGE[__module__] = Stipple.merge_storage(REACTIVE_STORAGE[__module__], @eval(__module__, Stipple.@var_storage($expr)))
+  REACTIVE_STORAGE[__module__] = Stipple.merge_storage(REACTIVE_STORAGE[__module__], @eval(__module__, Stipple.@var_storage($expr)); context = __module__)
 
   update_storage(__module__)
 end
@@ -666,7 +666,7 @@ macro mixin(location, expr, prefix, postfix)
     M = $x isa DataType ? $x : typeof($x) # really needed?
     local mixin_storage = Stipple.model_to_storage(M, $(QuoteNode(prefix)), $postfix)
 
-    merge!(storage, Stipple.merge_storage(storage, mixin_storage))
+    merge!(storage, Stipple.merge_storage(storage, mixin_storage; context = @__MODULE__))
     location isa DataType || location isa Symbol ? eval(:(Stipple.@type($$loc, $storage))) : location
     mixin_storage
   end |> esc
diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index 70f61e4b..357cb712 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -211,9 +211,9 @@ function model_to_storage(::Type{T}, prefix = "", postfix = "") where T# <: Reac
   storage
 end
 
-function merge_storage(storage_1::AbstractDict, storage_2::AbstractDict; keep_channel = true)
-  m1 = eval(haskey(storage_1, :modes__) ? storage_1[:modes__].args[end] : LittleDict{Symbol, Int}())
-  m2 = eval(haskey(storage_2, :modes__) ? storage_2[:modes__].args[end] : LittleDict{Symbol, Int}())
+function merge_storage(storage_1::AbstractDict, storage_2::AbstractDict; keep_channel = true, context::Module)
+  m1 = haskey(storage_1, :modes__) ? Core.eval(context, storage_1[:modes__].args[end]) : LittleDict{Symbol, Int}()
+  m2 = haskey(storage_2, :modes__) ? Core.eval(context, storage_2[:modes__].args[end]) : LittleDict{Symbol, Int}()
   modes = merge(m1, m2)
 
   keep_channel && haskey(storage_2, :channel__) && (storage_2 = delete!(copy(storage_2), :channel__))

From 1e4f9f84c47614126e07e84f4253e457f40aff2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 3 Mar 2024 21:33:46 +0100
Subject: [PATCH 195/265] add context to merge_storage() to avoid
 precompilation error

---
 src/ReactiveTools.jl      | 4 ++--
 src/stipple/reactivity.jl | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index dead75aa..cf4e6fbe 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -430,7 +430,7 @@ end
 
 macro add_vars(expr)
   init_storage(__module__)
-  REACTIVE_STORAGE[__module__] = Stipple.merge_storage(REACTIVE_STORAGE[__module__], @eval(__module__, Stipple.@var_storage($expr)))
+  REACTIVE_STORAGE[__module__] = Stipple.merge_storage(REACTIVE_STORAGE[__module__], @eval(__module__, Stipple.@var_storage($expr)); context = __module__)
 
   update_storage(__module__)
 end
@@ -666,7 +666,7 @@ macro mixin(location, expr, prefix, postfix)
     M = $x isa DataType ? $x : typeof($x) # really needed?
     local mixin_storage = Stipple.model_to_storage(M, $(QuoteNode(prefix)), $postfix)
 
-    merge!(storage, Stipple.merge_storage(storage, mixin_storage))
+    merge!(storage, Stipple.merge_storage(storage, mixin_storage; context = @__MODULE__))
     location isa DataType || location isa Symbol ? eval(:(Stipple.@type($$loc, $storage))) : location
     mixin_storage
   end |> esc
diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index 70f61e4b..357cb712 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -211,9 +211,9 @@ function model_to_storage(::Type{T}, prefix = "", postfix = "") where T# <: Reac
   storage
 end
 
-function merge_storage(storage_1::AbstractDict, storage_2::AbstractDict; keep_channel = true)
-  m1 = eval(haskey(storage_1, :modes__) ? storage_1[:modes__].args[end] : LittleDict{Symbol, Int}())
-  m2 = eval(haskey(storage_2, :modes__) ? storage_2[:modes__].args[end] : LittleDict{Symbol, Int}())
+function merge_storage(storage_1::AbstractDict, storage_2::AbstractDict; keep_channel = true, context::Module)
+  m1 = haskey(storage_1, :modes__) ? Core.eval(context, storage_1[:modes__].args[end]) : LittleDict{Symbol, Int}()
+  m2 = haskey(storage_2, :modes__) ? Core.eval(context, storage_2[:modes__].args[end]) : LittleDict{Symbol, Int}()
   modes = merge(m1, m2)
 
   keep_channel && haskey(storage_2, :channel__) && (storage_2 = delete!(copy(storage_2), :channel__))

From 445fd60a68f3957c921f0d26dbbf8724903ff0ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 3 Mar 2024 21:47:54 +0100
Subject: [PATCH 196/265] fix merge_storage() part II

---
 src/stipple/reactivity.jl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index 357cb712..6cb377f7 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -375,7 +375,7 @@ macro var_storage(expr, new_inputmode = :auto)
           end
 
           mixin_storage = @eval __module__ Stipple.model_to_storage($(e.args[2]), $prefix, $postfix)
-          storage = merge_storage(storage, mixin_storage)
+          storage = merge_storage(storage, mixin_storage; context = __module__)
         end
         :modes__, e
       end
@@ -482,7 +482,7 @@ macro add_vars(modelname, expr, new_inputmode = :auto)
   storage = @eval(__module__, Stipple.@var_storage($expr, $new_inputmode))
   new_storage = if isdefined(__module__, modelname)
     old_storage = @eval(__module__, Stipple.model_to_storage($modelname))
-    ReactiveTools.merge_storage(old_storage, storage)
+    ReactiveTools.merge_storage(old_storage, storage; context = __module__)
   else
     storage
   end

From abf381a96f7af21737926a8cf93a123a621927ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 3 Mar 2024 21:47:54 +0100
Subject: [PATCH 197/265] fix merge_storage() part II

---
 src/stipple/reactivity.jl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index 357cb712..6cb377f7 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -375,7 +375,7 @@ macro var_storage(expr, new_inputmode = :auto)
           end
 
           mixin_storage = @eval __module__ Stipple.model_to_storage($(e.args[2]), $prefix, $postfix)
-          storage = merge_storage(storage, mixin_storage)
+          storage = merge_storage(storage, mixin_storage; context = __module__)
         end
         :modes__, e
       end
@@ -482,7 +482,7 @@ macro add_vars(modelname, expr, new_inputmode = :auto)
   storage = @eval(__module__, Stipple.@var_storage($expr, $new_inputmode))
   new_storage = if isdefined(__module__, modelname)
     old_storage = @eval(__module__, Stipple.model_to_storage($modelname))
-    ReactiveTools.merge_storage(old_storage, storage)
+    ReactiveTools.merge_storage(old_storage, storage; context = __module__)
   else
     storage
   end

From ef1d86cf0944f09aa93dfe0f28a7b39a3a4fd287 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 3 Mar 2024 22:03:39 +0100
Subject: [PATCH 198/265] fix missing semicolon in stylesheet()

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

diff --git a/src/Elements.jl b/src/Elements.jl
index 4ba36d78..2ae22c79 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -443,8 +443,8 @@ julia> stylesheet("https://fonts.googleapis.com/css?family=Material+Icons")
 "<link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" />"
 ```
 """
-function stylesheet(href::String; args...) :: ParsedHTMLString
-  Genie.Renderer.Html.link(href=href, rel="stylesheet", args...)
+function stylesheet(href::String; kwargs...) :: ParsedHTMLString
+  Genie.Renderer.Html.link(href=href, rel="stylesheet"; kwargs...)
 end
 
 end

From 5c0512834a504d5c389a97f3a941f36caae74e5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 3 Mar 2024 22:03:39 +0100
Subject: [PATCH 199/265] fix missing semicolon in stylesheet()

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

diff --git a/src/Elements.jl b/src/Elements.jl
index 848cf3a4..231d79b2 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -553,8 +553,8 @@ julia> stylesheet("https://fonts.googleapis.com/css?family=Material+Icons")
 "<link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" />"
 ```
 """
-function stylesheet(href::String; args...) :: ParsedHTMLString
-  Genie.Renderer.Html.link(href=href, rel="stylesheet", args...)
+function stylesheet(href::String; kwargs...) :: ParsedHTMLString
+  Genie.Renderer.Html.link(href=href, rel="stylesheet"; kwargs...)
 end
 
 end

From 99f33cb52ec589889e2c9e7380ffdfb0256710d5 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 4 Mar 2024 21:34:01 +0100
Subject: [PATCH 200/265] add Stipple.js_print to allow for JSONText in
 join_js()

---
 ext/StippleJSONExt.jl    |  1 +
 src/stipple/rendering.jl | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ext/StippleJSONExt.jl b/ext/StippleJSONExt.jl
index 5ff53c81..dc4e75a0 100644
--- a/ext/StippleJSONExt.jl
+++ b/ext/StippleJSONExt.jl
@@ -18,4 +18,5 @@ Stipple.JSONText(json::JSON.JSONText) = Stipple.JSONText(json.s)
 @inline StructTypes.construct(::Type{JSON.JSONText}, json::JSON3.RawValue) = JSON.JSONText(string(json))
 @inline JSON3.rawbytes(json::JSON.JSONText) = codeunits(json.s)
 
+Stipple.js_print(io::IO, js::JSON.JSONText) = print(io, js.s)
 end
\ No newline at end of file
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index ad2b8aa7..e965d2ca 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -1,3 +1,11 @@
+"""
+    js_print(io::IO, x)
+
+Stipple internal print routine for join_js.
+Mainly used to allow for printing of JSON.JSONText
+"""
+js_print(io::IO, x) = print(io, x)
+
 """
     join_js(xx, delim = ""; skip_empty = true, pre::Function = identity,
       strip_delimiter = true, pre_delim::Union{Function,Nothing} = nothing)
@@ -42,8 +50,10 @@ function join_js(xx, delim = ""; skip_empty = true, pre::Function = identity, st
     if x isa Union{AbstractDict, Pair, Base.Iterators.Pairs, Vector{<:Pair}}
       s = json(Dict(k => JSONText(v) for (k, v) in (x isa Pair ? [x] : x)))[2:end - 1]
       print(io2, s)
+    elseif x isa JSONText
+      print(io2, x.s)
     else
-      print(io2, x)
+      js_print(io2, x)
     end
     s = String(take!(io2))
     hasdelimiter = strip_delimiter && endswith(s, delim)

From 1d9b4fc0a9503c8bbb0ad84418f17d934e771287 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 4 Mar 2024 21:35:02 +0100
Subject: [PATCH 201/265] support parsing "nothing" into types Union{Nothing,T}

---
 src/stipple/parsers.jl | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/stipple/parsers.jl b/src/stipple/parsers.jl
index e7bd5792..c460ff67 100644
--- a/src/stipple/parsers.jl
+++ b/src/stipple/parsers.jl
@@ -53,4 +53,14 @@ end
 #String to AbstractFloat
 function stipple_parse(::Type{T}, value::String) where T<:AbstractFloat
   Base.parse(T, value)
+end
+
+# Union with Nothing
+function stipple_parse(::Type{Union{Nothing, T}}, ::Nothing) where T
+  nothing
+end
+
+# Union with Nothing
+function stipple_parse(::Type{Union{Nothing, T}}, value) where T
+  stipple_parse(T, value)
 end
\ No newline at end of file

From b70f769e462e5dfd3cb9452f2291decc27940643 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 4 Mar 2024 21:34:01 +0100
Subject: [PATCH 202/265] add Stipple.js_print to allow for JSONText in
 join_js()

---
 ext/StippleJSONExt.jl    |  1 +
 src/stipple/rendering.jl | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ext/StippleJSONExt.jl b/ext/StippleJSONExt.jl
index 5ff53c81..dc4e75a0 100644
--- a/ext/StippleJSONExt.jl
+++ b/ext/StippleJSONExt.jl
@@ -18,4 +18,5 @@ Stipple.JSONText(json::JSON.JSONText) = Stipple.JSONText(json.s)
 @inline StructTypes.construct(::Type{JSON.JSONText}, json::JSON3.RawValue) = JSON.JSONText(string(json))
 @inline JSON3.rawbytes(json::JSON.JSONText) = codeunits(json.s)
 
+Stipple.js_print(io::IO, js::JSON.JSONText) = print(io, js.s)
 end
\ No newline at end of file
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index 9eedea3a..a5a31d34 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -1,3 +1,11 @@
+"""
+    js_print(io::IO, x)
+
+Stipple internal print routine for join_js.
+Mainly used to allow for printing of JSON.JSONText
+"""
+js_print(io::IO, x) = print(io, x)
+
 """
     join_js(xx, delim = ""; skip_empty = true, pre::Function = identity,
       strip_delimiter = true, pre_delim::Union{Function,Nothing} = nothing)
@@ -42,8 +50,10 @@ function join_js(xx, delim = ""; skip_empty = true, pre::Function = identity, st
     if x isa Union{AbstractDict, Pair, Base.Iterators.Pairs, Vector{<:Pair}}
       s = json(Dict(k => JSONText(v) for (k, v) in (x isa Pair ? [x] : x)))[2:end - 1]
       print(io2, s)
+    elseif x isa JSONText
+      print(io2, x.s)
     else
-      print(io2, x)
+      js_print(io2, x)
     end
     s = String(take!(io2))
     hasdelimiter = strip_delimiter && endswith(s, delim)

From 0d52f3ef9c599b8ad30acf1ada81639ac1c27376 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 4 Mar 2024 21:35:02 +0100
Subject: [PATCH 203/265] support parsing "nothing" into types Union{Nothing,T}

---
 src/stipple/parsers.jl | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/stipple/parsers.jl b/src/stipple/parsers.jl
index e7bd5792..c460ff67 100644
--- a/src/stipple/parsers.jl
+++ b/src/stipple/parsers.jl
@@ -53,4 +53,14 @@ end
 #String to AbstractFloat
 function stipple_parse(::Type{T}, value::String) where T<:AbstractFloat
   Base.parse(T, value)
+end
+
+# Union with Nothing
+function stipple_parse(::Type{Union{Nothing, T}}, ::Nothing) where T
+  nothing
+end
+
+# Union with Nothing
+function stipple_parse(::Type{Union{Nothing, T}}, value) where T
+  stipple_parse(T, value)
 end
\ No newline at end of file

From f0d0b4a391793a524c2c1bff28b768ff26319321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 4 Mar 2024 23:30:50 +0100
Subject: [PATCH 204/265] add `PRECOMPILE[] = false` at end of precompilation

---
 src/Stipple.jl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 8e5a0d49..40cf97f6 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -1297,6 +1297,7 @@ using Stipple.ReactiveTools
       # HTTP.get("http://localhost:$port$(Genie.Assets.asset_path(assets_config, :js, file = "stipplecore"))")
       down()
   end
+  PRECOMPILE[] = false
 end
 
 end

From 8bb0a1cd14828030433319822378541b746161e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 4 Mar 2024 23:30:50 +0100
Subject: [PATCH 205/265] add `PRECOMPILE[] = false` at end of precompilation

---
 src/Stipple.jl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 20395bdb..3e468bcf 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -1324,6 +1324,7 @@ using Stipple.ReactiveTools
       # HTTP.get("http://localhost:$port$(Genie.Assets.asset_path(assets_config, :js, file = "stipplecore"))")
       down()
   end
+  PRECOMPILE[] = false
 end
 
 end

From 12a15dc13c33aba0d0ef646591cbf4b7634336d8 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian.salceanu@gmail.com>
Date: Wed, 6 Mar 2024 07:30:33 +0200
Subject: [PATCH 206/265] fix "Built with Genie" logo

---
 Project.toml         |  2 +-
 src/ReactiveTools.jl | 18 +++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/Project.toml b/Project.toml
index ae949d6d..f2b9c9d2 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.00"
+version = "0.28.5"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index dead75aa..f8c73270 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -62,10 +62,14 @@ function DEFAULT_LAYOUT(; title::String = "Genie App",
     <% end %>
     <style>
       ._genie_logo {
-        background:url('https://genieframework.com/logos/genie/logo-simple-with-padding.svg') no-repeat;background-size:40px;
-        padding-top:22px;padding-right:10px;color:transparent;font-size:9pt;
+        background:url('https://genieframework.com/logos/genie/logo-simple-with-padding.svg') no-repeat;
+        background-size:40px;
+        padding-top:22px;
+        padding-right:10px;
+        color:transparent !important;
+        font-size:9pt;
       }
-      ._genie .row .col-12 { width:50%;margin:auto; }
+      ._genie .row .col-12 { width:50%; margin:auto; }
     </style>
     $(join(head_content, "\n    "))
   </head>
@@ -339,12 +343,12 @@ macro debounce(fieldname, ms)
 end
 
 """
-    @clear_debounce 
+    @clear_debounce
 
     @clear_debounce fieldname
-    
+
     @clear_debounce App
-    
+
     @clear_debounce App fieldname
 
 Clear field-specific debounce time, for setting see `@debounce`.
@@ -1145,7 +1149,7 @@ Registers a new page with source in `view` to be rendered at the route `url`.
 ```julia
 @page("/", "view.html")
 
-@page("/", ui; model = MyApp) # for specifying an explicit app 
+@page("/", ui; model = MyApp) # for specifying an explicit app
 ```
 """
 macro page(expressions...)

From 036b23eaa0e29fb759781f06e65044a771100446 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <essenciary@users.noreply.github.com>
Date: Wed, 6 Mar 2024 08:05:07 +0200
Subject: [PATCH 207/265] Add nightly, add 1

---
 .github/workflows/ci.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 007c56c4..1bdb9357 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,8 +11,8 @@ jobs:
       matrix:
         version:
           - '1.6'
-          - '1.7'
-          - '1.10'
+          - '1'
+          - 'nightly'
         os:
           - ubuntu-latest
           - macOS-latest
@@ -33,7 +33,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: julia-actions/setup-julia@latest
         with:
-          version: '1.7'
+          version: '1'
       - name: Install dependencies
         run: julia --project=docs/ -e 'using Pkg; Pkg.develop(PackageSpec(path=pwd())); Pkg.instantiate()'
       - name: Build and deploy

From 21c3b32a876774c0605b765224a3f03af08b4d18 Mon Sep 17 00:00:00 2001
From: Daniel Aguilar <dani@protozoo.com>
Date: Wed, 13 Mar 2024 15:54:37 +0100
Subject: [PATCH 208/265] Update stipplecore.js and initStipple() to work with
 vue3

---
 assets/js/stipplecore.js | 146 +--------------------------------------
 src/Elements.jl          |   7 +-
 2 files changed, 5 insertions(+), 148 deletions(-)

diff --git a/assets/js/stipplecore.js b/assets/js/stipplecore.js
index bee857ea..4fc7e0c3 100644
--- a/assets/js/stipplecore.js
+++ b/assets/js/stipplecore.js
@@ -1,145 +1 @@
-!(function (e) {
-  var t = {};
-  function n(r) {
-    if (t[r]) return t[r].exports;
-    var o = (t[r] = { i: r, l: !1, exports: {} });
-    return e[r].call(o.exports, o, o.exports, n), (o.l = !0), o.exports;
-  }
-  (n.m = e),
-    (n.c = t),
-    (n.d = function (e, t, r) {
-      n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r });
-    }),
-    (n.r = function (e) {
-      "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 });
-    }),
-    (n.t = function (e, t) {
-      if ((1 & t && (e = n(e)), 8 & t)) return e;
-      if (4 & t && "object" == typeof e && e && e.__esModule) return e;
-      var r = Object.create(null);
-      if ((n.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e))
-        for (var o in e)
-          n.d(
-            r,
-            o,
-            function (t) {
-              return e[t];
-            }.bind(null, o)
-          );
-      return r;
-    }),
-    (n.n = function (e) {
-      var t =
-        e && e.__esModule
-          ? function () {
-              return e.default;
-            }
-          : function () {
-              return e;
-            };
-      return n.d(t, "a", t), t;
-    }),
-    (n.o = function (e, t) {
-      return Object.prototype.hasOwnProperty.call(e, t);
-    }),
-    (n.p = ""),
-    n((n.s = 2));
-})([
-  function (e, t, n) {},
-  function (e, t, n) {},
-  function (e, t, n) {
-    "use strict";
-    n.r(t);
-    n(0), n(1);
-    var r = function () {
-      var e = this.$createElement;
-      return (this._self._c || e)("section", { staticClass: "st-dashboard" }, [this._t("default")], 2);
-    };
-    r._withStripped = !0;
-    var o = function () {
-      var e = this,
-        t = e.$createElement,
-        n = e._self._c || t;
-      return n(
-        "div",
-        { staticClass: "st-big-number", class: e.color ? "st-big-number--" + e.color : "" },
-        [
-          e.title ? n("q-badge", [e._v(e._s(e.title))]) : e._e(),
-          e._v(" "),
-          e.icon ? n("q-icon", { staticClass: "st-big-number__icon", class: e.color ? "bg-" + e.color : "", attrs: { name: e.icon } }) : e._e(),
-          e._v(" "),
-          n("span", { staticClass: "st-big-number__num" }, [e.arrow ? n("q-icon", { attrs: { name: "arrow_drop_" + e.arrow } }) : e._e(), e._v("\n        " + e._s(e.random ? e.randomize() : e.number ? e.number : 0) + "\n      ")], 1),
-        ],
-        1
-      );
-    };
-    function i(e, t, n, r, o, i, s, a) {
-      var u,
-        c = "function" == typeof e ? e.options : e;
-      if (
-        (t && ((c.render = t), (c.staticRenderFns = n), (c._compiled = !0)),
-        r && (c.functional = !0),
-        i && (c._scopeId = "data-v-" + i),
-        s
-          ? ((u = function (e) {
-              (e = e || (this.$vnode && this.$vnode.ssrContext) || (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext)) || "undefined" == typeof __VUE_SSR_CONTEXT__ || (e = __VUE_SSR_CONTEXT__),
-                o && o.call(this, e),
-                e && e._registeredComponents && e._registeredComponents.add(s);
-            }),
-            (c._ssrRegister = u))
-          : o &&
-            (u = a
-              ? function () {
-                  o.call(this, (c.functional ? this.parent : this).$root.$options.shadowRoot);
-                }
-              : o),
-        u)
-      )
-        if (c.functional) {
-          c._injectStyles = u;
-          var l = c.render;
-          c.render = function (e, t) {
-            return u.call(t), l(e, t);
-          };
-        } else {
-          var p = c.beforeCreate;
-          c.beforeCreate = p ? [].concat(p, u) : [u];
-        }
-      return { exports: e, options: c };
-    }
-    o._withStripped = !0;
-    var s = i(
-      {
-        name: "StBigNumber",
-        data: function () {
-          return {};
-        },
-        props: ["number", "title", "icon", "color", "arrow", "random"],
-        methods: {
-          randomize: function () {
-            return Math.floor(2e4 * Math.random() + 1);
-          },
-        },
-      },
-      o,
-      [],
-      !1,
-      null,
-      "4d31d652",
-      null
-    );
-    var a = s.exports,
-      u = i({ name: "Dashboard", components: { StBigNumber: a } }, r, [], !1, null, "4d047983", null);
-    var c = u.exports;
-    window.Stipple = {
-      init: function (e) {
-        var t;
-        if (!Vue) throw "Stipple requires Vue";
-        e = Object.assign({}, e);
-        const components = {StDashboard: c, StBigNumber: a};
-        (t = document.querySelector("html").classList).add.apply(t, ["stipple-core", e.theme ? e.theme : "stipple-blue"]);
-        return components
-      },
-    };
-  },
-]);
\ No newline at end of file
+(function(e,o){typeof exports=="object"&&typeof module<"u"?o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(e=typeof globalThis<"u"?globalThis:e||self,o(e.Vue))})(this,function(e){"use strict";const o=(t,n)=>{const c=t.__vccOpts||t;for(const[i,r]of n)c[i]=r;return c},l={},s={class:"st-dashboard"};function m(t,n){return e.openBlock(),e.createElementBlock("section",s,[e.renderSlot(t.$slots,"default")])}const d=o(l,[["render",m]]),b={class:"st-big-number__num"},f={__name:"st-big-number",props:{number:Number,title:String,icon:String,color:String,arrow:String,random:Boolean},setup(t){function n(){return Math.floor(Math.random()*2e4+1)}return(c,i)=>{const r=e.resolveComponent("q-badge"),a=e.resolveComponent("q-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["st-big-number",t.color?"st-big-number--"+t.color:""])},[t.title?(e.openBlock(),e.createBlock(r,{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1})):e.createCommentVNode("",!0),t.icon?(e.openBlock(),e.createBlock(a,{key:1,class:e.normalizeClass([t.color?"bg-"+t.color:"","st-big-number__icon"]),name:t.icon},null,8,["class","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",b,[t.arrow?(e.openBlock(),e.createBlock(a,{key:0,name:"arrow_drop_"+t.arrow},null,8,["name"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.random?n():t.number||0),1)])],2)}}};function h(t,n={}){t.component("st-dashboard",d),t.component("st-big-number",f);const c=n.theme?n.theme:"stipple-blue";document.querySelector("html").classList.add("stipple-core",c)}window.Stipple={init:h}});
diff --git a/src/Elements.jl b/src/Elements.jl
index 231d79b2..3eb8e6e4 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -162,11 +162,12 @@ function vue_integration(::Type{M};
     "
 
   function initStipple(rootSelector){
-    components = Stipple.init($( core_theme ? "{theme: '$theme'}" : "" ));
+    // components = Stipple.init($( core_theme ? "{theme: '$theme'}" : "" ));
     const app = Vue.createApp($( replace(vue_app, "'$(Stipple.UNDEFINED_PLACEHOLDER)'"=>Stipple.UNDEFINED_VALUE) ))
-    Object.entries(components).forEach(([key, value]) => {
+    /* Object.entries(components).forEach(([key, value]) => {
       app.component(key, value)
-    });
+    }); */
+    Stipple.init( app, $( core_theme ? "{theme: '$theme'}" : "" ));
     $globalcomps
     $comps
     // gather legacy global options

From db32e7a24f5d2bad9be325c2273bc652ce43ecd9 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Wed, 13 Mar 2024 22:44:35 +0100
Subject: [PATCH 209/265] Fix linked sessions in multipage app (#266)

* fix multipage apps

* add tests for multipage app
---
 src/Pages.jl     |  4 ++--
 test/runtests.jl | 50 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/Pages.jl b/src/Pages.jl
index 5e02f51d..4fcafb9a 100644
--- a/src/Pages.jl
+++ b/src/Pages.jl
@@ -42,9 +42,9 @@ function Page(  route::Union{Route,String};
             Core.eval(context, model)
           elseif isa(model, Module)
             context = model
-            @eval(context, Stipple.ReactiveTools.@init(debounce = $debounce, transport = $transport, core_theme = $core_theme))
+            () -> @eval(context, Stipple.ReactiveTools.@init(debounce = $debounce, transport = $transport, core_theme = $core_theme))
           elseif model isa DataType
-            @eval(context, Stipple.ReactiveTools.@init($model; debounce = $debounce, transport = $transport, core_theme = $core_theme))
+            () -> @eval(context, Stipple.ReactiveTools.@init($model; debounce = $debounce, transport = $transport, core_theme = $core_theme))
           else
             model
           end
diff --git a/test/runtests.jl b/test/runtests.jl
index 24dca9b8..1bcc984e 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -180,6 +180,56 @@ end
     @test model.s3[] == "20"
 end
 
+module App1
+
+using Stipple, Stipple.ReactiveTools
+@app begin
+    @in i1 = 101
+end
+
+@app MyApp begin
+    @in i1 = 101
+end
+
+end
+
+module App2
+using Stipple, Stipple.ReactiveTools
+    
+@app begin
+    @in i2 = 102
+end
+
+@app MyApp begin
+    @in i2 = 102
+end
+
+end
+    
+@testset "Multipage Reactive API (implicit)" begin
+    @eval p1 = @page("/app1", "hello", model = App1)
+    @eval p2 = @page("/app2", "world", model = App2)
+    channel1a = get_channel(String(p1.route.action().body))
+    channel1b = get_channel(String(p1.route.action().body))
+    channel2a = get_channel(String(p2.route.action().body))
+    channel2b = get_channel(String(p2.route.action().body))
+
+    # channels have to be different
+    @test channel1a != channel1b != channel2a != channel2b
+end
+
+@testset "Multipage Reactive API (explicit)" begin
+    @eval p1 = @page("/app1", "hello", model = App1.MyApp)
+    @eval p2 = @page("/app2", "world", model = App2.MyApp)
+    channel1a = get_channel(String(p1.route.action().body))
+    channel1b = get_channel(String(p1.route.action().body))
+    channel2a = get_channel(String(p2.route.action().body))
+    channel2b = get_channel(String(p2.route.action().body))
+
+    # channels have to be different
+    @test channel1a != channel1b != channel2a != channel2b
+end
+
 using DataFrames
 @testset "Extensions" begin
     d = Dict(:a => [1, 2, 3], :b => ["a", "b", "c"])

From 90615d87a0d4aa547f2da0f73fccdd740094293b Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Thu, 14 Mar 2024 00:01:05 +0100
Subject: [PATCH 210/265] allow for failing nightlies (#267)

---
 .github/workflows/ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1bdb9357..c0808dc7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -5,6 +5,7 @@ on:
 jobs:
   test:
     name: Julia ${{ matrix.version }} - ${{ matrix.os }} - ${{ matrix.arch }}
+    continue-on-error: ${{ matrix.version == 'nightly'}}
     runs-on: ${{ matrix.os }}
     strategy:
       fail-fast: false

From e1be6f0c0baaf1d5572d4e0bb17ed81a908aa17b Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 19 Mar 2024 18:02:50 +0100
Subject: [PATCH 211/265] fix ambiguities in stipple_parse for Type{<:Any}

---
 src/stipple/parsers.jl | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/stipple/parsers.jl b/src/stipple/parsers.jl
index c460ff67..107a27b2 100644
--- a/src/stipple/parsers.jl
+++ b/src/stipple/parsers.jl
@@ -63,4 +63,9 @@ end
 # Union with Nothing
 function stipple_parse(::Type{Union{Nothing, T}}, value) where T
   stipple_parse(T, value)
+end
+
+# define an explicit function for Type{Any} to avoid ambiguities between Type{Union{Nothing, T}} and Type{T} (line 35 and line 64) in case of T == Any
+function stipple_parse(::Type{Any}, v::T) where {T}
+  v::T
 end
\ No newline at end of file

From 521e74c90210dd562c55301edb50be7fd03784d9 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 19 Mar 2024 18:13:16 +0100
Subject: [PATCH 212/265] set version v0.28.6

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index f09f4dac..68773c49 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.5"
+version = "0.28.6"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 086c6e08518668947d9101714b0b89dc08f50c72 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 19 Mar 2024 18:02:50 +0100
Subject: [PATCH 213/265] fix ambiguities in stipple_parse for Type{<:Any}

---
 src/stipple/parsers.jl | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/stipple/parsers.jl b/src/stipple/parsers.jl
index c460ff67..107a27b2 100644
--- a/src/stipple/parsers.jl
+++ b/src/stipple/parsers.jl
@@ -63,4 +63,9 @@ end
 # Union with Nothing
 function stipple_parse(::Type{Union{Nothing, T}}, value) where T
   stipple_parse(T, value)
+end
+
+# define an explicit function for Type{Any} to avoid ambiguities between Type{Union{Nothing, T}} and Type{T} (line 35 and line 64) in case of T == Any
+function stipple_parse(::Type{Any}, v::T) where {T}
+  v::T
 end
\ No newline at end of file

From b03127674d08065978fcae58fc28c1f3e9eeb846 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 20 Mar 2024 07:42:51 +0100
Subject: [PATCH 214/265] Stipple.attributes: have kwarg `inner` accept Vectors

---
 src/Stipple.jl | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 3e468bcf..20916995 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -1084,12 +1084,13 @@ function attributes(kwargs::Union{Vector{<:Pair}, Base.Iterators.Pairs, Dict},
     v === nothing && continue
     mapped = false
 
-    k_str = string(k)
+    k_str = "$k"
 
     if haskey(mappings, k_str)
       k_str = mappings[k_str]
     end
 
+    k_str == "inner" && (v = join(v))
     v_isa_jsexpr = v isa Symbol || !isa(v, Union{AbstractString, Bool, Number})
     attr_key = string((v_isa_jsexpr && ! startswith(k_str, ":") &&
                 ! (endswith(k_str, "!") || startswith(k_str, "v-") || startswith(k_str, "v" * Genie.config.html_parser_char_dash)) ? ":" : ""), k_str) |> Symbol

From 247b193d002de3ec0898088cd3e7b6ba679f0d9c Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 28 Mar 2024 20:23:51 +0100
Subject: [PATCH 215/265] add `@slot` macro

---
 src/Elements.jl | 61 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index 2ae22c79..f3e79b62 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -11,7 +11,7 @@ using MacroTools
 
 import Genie.Renderer.Html: HTMLString, normal_element
 
-export root, elem, vm, @if, @else, @elseif, @for, @text, @bind, @data, @on, @click, @showif
+export root, elem, vm, @if, @else, @elseif, @for, @text, @bind, @data, @on, @click, @showif, @slot
 export stylesheet, kw_to_str
 
 # deprecated
@@ -429,6 +429,65 @@ macro showif(expr)
   Expr(:kw, Symbol("v-show"), esc_expr(expr))
 end
 
+
+"""
+    hyphenate(expr)
+
+Convert minus operations in expressions into join-operations with '-'
+
+### Example
+```julia
+julia> :(a-b-c) |> hyphenate
+Symbol("a-b-c")
+```
+"""
+function hyphenate(@nospecialize expr)
+  if expr isa Expr && expr.head == :call && expr.args[1] == :-
+    x = expr.args[2]
+    Symbol(x isa Expr ? hyphenate(x) : x isa QuoteNode ? x.value : x, '-', join(expr.args[3:end], '-'))
+  else
+    expr
+  end
+end
+
+hyphenate(expr...) = hyphenate.(expr)
+
+"""
+    @slot(slotname)
+
+Add a v-slot attribute to a template.
+
+### Example
+
+```julia
+julia> template(@slot(:header), [cell("Header")])
+"<template v-slot:header><div class=\"st-col col\">Header</div></template>"
+```
+"""
+macro slot(slotname)
+  slotname isa Expr && (slotname = hyphenate(slotname))
+  slotname isa QuoteNode && (slotname = slotname.value)
+  Expr(:kw, Symbol("v-slot:$slotname"), "") |> esc
+end
+
+"""
+    @slot(slotname, varname)
+
+Add a v-slot attribute with a variable name to a template.
+
+### Example
+
+```julia
+julia> template(@slot(:body, :props), ["{{ props.value }}"])
+"<template v-slot:body=\"props\">{{ props.value }}</template>"
+```
+"""
+macro slot(slotname, varname)
+  slotname isa Expr && (slotname = hyphenate(slotname))
+  slotname isa QuoteNode && (slotname = slotname.value)
+  Expr(:kw, Symbol("v-slot:$slotname"), varname) |> esc
+end
+
 #===#
 
 """

From 2756697fc195d730107cf8186e41d1bb99978a17 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 28 Mar 2024 20:24:41 +0100
Subject: [PATCH 216/265] set version v0.28.7

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 68773c49..8af5cc14 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.6"
+version = "0.28.7"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 81dd7e6556a36e1a0f66f6caa38f855e7037b77a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 3 Apr 2024 00:29:07 +0300
Subject: [PATCH 217/265] set version v0.28.8

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 8af5cc14..e04b392d 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.7"
+version = "0.28.8"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 7a9bb03705cc546cad086b64e63e0905d0329cb5 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 9 Apr 2024 10:12:53 +0200
Subject: [PATCH 218/265] make `@app` and `@page` work without `using`

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

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 412326bd..036c01d8 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -77,12 +77,12 @@ function DEFAULT_LAYOUT(; title::String = "Genie App",
     <div class='container'>
       <div class='row'>
         <div class='col-12'>
-          <% page(model, partial = true, v__cloak = true, [@yield], @iif(:isready)) %>
+          <% Stipple.page(model, partial = true, v__cloak = true, [Stipple.Genie.Renderer.Html.@yield], Stipple.@if(:isready)) %>
         </div>
       </div>
     </div>
     <% if isfile(joinpath(Genie.config.server_document_root, "js", "genieapp.js")) %>
-    <script src='$(Genie.Configuration.basepath())/js/genieapp.js'></script>
+    <script src='$(Stipple.Genie.Configuration.basepath())/js/genieapp.js'></script>
     <% else %>
     <% end %>
     <footer class='_genie container'>
@@ -478,7 +478,7 @@ macro app(expr)
   quote
     $expr
 
-    @handlers
+    Stipple.ReactiveTools.@handlers
   end |> esc
 end
 
@@ -1181,7 +1181,7 @@ macro page(expressions...)
       end
 
       # modify the entry of the :model keyword by an init function with respective init_kwargs
-      model_parent[model_ind] = :($(Expr(:kw, :model, () -> @eval(__module__, @init($(init_kwargs...))))))
+      model_parent[model_ind] = :($(Expr(:kw, :model, () -> @eval(__module__, Stipple.ReactiveTools.@init($(init_kwargs...))))))
     else
       nothing
     end

From e4cb0d50d4107a37b1a1a63ec29eb3f28b0cd0b0 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 12 Apr 2024 15:43:57 +0200
Subject: [PATCH 219/265] fix parsing of DataFrames with array entries; minor
 fixes

---
 ext/StippleDataFramesExt.jl   | 10 ++++++++--
 ext/StippleJSONExt.jl         |  2 +-
 ext/StippleOffsetArraysExt.jl |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ext/StippleDataFramesExt.jl b/ext/StippleDataFramesExt.jl
index 4f606740..cbe35c92 100644
--- a/ext/StippleDataFramesExt.jl
+++ b/ext/StippleDataFramesExt.jl
@@ -2,10 +2,16 @@ module StippleDataFramesExt
 
 using Stipple
 
-isdefined(Base, :get_extension) ? using DataFrames : using ..DataFrames
+isdefined(Base, :get_extension) ? (using DataFrames) : (using ..DataFrames)
+
+# DataFrame(d::Dict) will generate multiple rows if a field contains a Vector
+# to prevent this we need to wrap vectors in a Ref()
+function dataframe(d::Dict)
+  DataFrame([p[1] => p[2] isa Vector ? Ref(p[2]) : p[2] for p in d])
+end
 
 function Stipple.stipple_parse(::Type{DF} where DF <: DataFrames.AbstractDataFrame, d::Vector)
-  isempty(d) ? DF() : reduce(vcat, DataFrames.DataFrame.(d))
+  isempty(d) ? DF() : reduce(vcat, dataframe.(d))
 end
 
 function Stipple.render(df::DataFrames.AbstractDataFrame)
diff --git a/ext/StippleJSONExt.jl b/ext/StippleJSONExt.jl
index dc4e75a0..5332fd4e 100644
--- a/ext/StippleJSONExt.jl
+++ b/ext/StippleJSONExt.jl
@@ -2,7 +2,7 @@ module StippleJSONExt
 
 using Stipple
 
-isdefined(Base, :get_extension) ? using JSON : using ..JSON
+isdefined(Base, :get_extension) ? (using JSON) : (using ..JSON)
 
 # garantee interoperability of different JSONTText definitions in Stipple and JSON
 # for both JSON3 and JSON
diff --git a/ext/StippleOffsetArraysExt.jl b/ext/StippleOffsetArraysExt.jl
index 9af9f865..51bd75cc 100644
--- a/ext/StippleOffsetArraysExt.jl
+++ b/ext/StippleOffsetArraysExt.jl
@@ -2,7 +2,7 @@ module StippleOffsetArraysExt
 
 using Stipple
 
-isdefined(Base, :get_extension) ? using OffsetArrays : using ..OffsetArrays
+isdefined(Base, :get_extension) ? (using OffsetArrays) : (using ..OffsetArrays)
 
 function Stipple.convertvalue(targetfield::Union{Ref{T}, Reactive{T}}, value) where T <: OffsetArrays.OffsetArray
   a = Stipple.stipple_parse(eltype(targetfield), value)

From e88e905130912833535d99b0ee7bfa5e86235323 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 12 Apr 2024 15:44:28 +0200
Subject: [PATCH 220/265] set version v0.28.9

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index e04b392d..5a2027e2 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.8"
+version = "0.28.9"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 2aaa8592f507128dde92c83d35972accc65e8181 Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <adrian@genieframework.com>
Date: Fri, 12 Apr 2024 16:00:39 +0200
Subject: [PATCH 221/265] Auto include theme.css

---
 Project.toml         | 2 +-
 src/ReactiveTools.jl | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index e04b392d..13f2e9e6 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.8"
+version = "0.28.10"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 036c01d8..24755f86 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -56,6 +56,10 @@ function DEFAULT_LAYOUT(; title::String = "Genie App",
     <link rel='stylesheet' href='$(Genie.Configuration.basepath())/css/genieapp.css'>
     <% else %>
     <% end %>
+    <% if isfile(joinpath(Genie.config.server_document_root, "css", "theme.css")) %>
+    <link rel='stylesheet' href='$(Genie.Configuration.basepath())/css/theme.css'>
+    <% else %>
+    <% end %>
     <% if isfile(joinpath(Genie.config.server_document_root, "css", "autogenerated.css")) %>
     <link rel='stylesheet' href='$(Genie.Configuration.basepath())/css/autogenerated.css'>
     <% else %>

From 30cfa78cc0e267680d659768789e117abdfb274f Mon Sep 17 00:00:00 2001
From: Adrian Salceanu <essenciary@users.noreply.github.com>
Date: Fri, 12 Apr 2024 16:10:05 +0200
Subject: [PATCH 222/265] Update Project.toml

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 13f2e9e6..5a2027e2 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.10"
+version = "0.28.9"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From d357cab77d83da6bf40010a038cfe92759de50c8 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 12 Apr 2024 17:30:07 +0200
Subject: [PATCH 223/265] add stipple_parse for Dict to DataFrames, adapt tests

---
 ext/StippleDataFramesExt.jl |  4 ++++
 test/runtests.jl            | 12 +++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/ext/StippleDataFramesExt.jl b/ext/StippleDataFramesExt.jl
index cbe35c92..55880e97 100644
--- a/ext/StippleDataFramesExt.jl
+++ b/ext/StippleDataFramesExt.jl
@@ -14,6 +14,10 @@ function Stipple.stipple_parse(::Type{DF} where DF <: DataFrames.AbstractDataFra
   isempty(d) ? DF() : reduce(vcat, dataframe.(d))
 end
 
+function Stipple.stipple_parse(::Type{DF} where DF <: DataFrames.AbstractDataFrame, d::Dict)
+  DataFrame(d)
+end
+
 function Stipple.render(df::DataFrames.AbstractDataFrame)
   OrderedDict(zip(names(df), eachcol(df)))
 end
diff --git a/test/runtests.jl b/test/runtests.jl
index 1bcc984e..61ff58c9 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -232,11 +232,13 @@ end
 
 using DataFrames
 @testset "Extensions" begin
-    d = Dict(:a => [1, 2, 3], :b => ["a", "b", "c"])
-    df = DataFrame(:a => [1, 2, 3], :b => ["a", "b", "c"])
-
-    @test Stipple.stipple_parse(DataFrame, [d]) == df
-    @test render(df) == OrderedDict("a" => [1, 2, 3], "b" => ["a", "b", "c"])
+    d1 = Dict(:a => [1, 2, 3], :b => ["a", "b", "c"])
+    d2 = Dict(:a => [2, 3, 4], :b => ["b", "c", "d"])
+    df1 = DataFrame(d1)
+    df2 = DataFrame(:a => [[1, 2, 3], [2, 3, 4]], :b => [["a", "b", "c"], ["b", "c", "d"]])
+    @test Stipple.stipple_parse(DataFrame, d1) == df1
+    @test Stipple.stipple_parse(DataFrame, [d1, d2]) == df2
+    @test render(df1) == OrderedDict("a" => [1, 2, 3], "b" => ["a", "b", "c"])
 
     using OffsetArrays
     @test Stipple.convertvalue(R(OffsetArray([1, 2, 3], -2)), [2, 3, 4]) == OffsetArray([2, 3, 4], -2)

From 4ffac3898193a2f11fd17cc33e261df40d18f754 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 12 Apr 2024 17:32:45 +0200
Subject: [PATCH 224/265] set version 0.28.10

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 5a2027e2..13f2e9e6 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.9"
+version = "0.28.10"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 2e306d1f8a06fe223d11a7bce2e353b9c92b8612 Mon Sep 17 00:00:00 2001
From: Daniel Aguilar <dani@protozoo.com>
Date: Tue, 16 Apr 2024 11:42:15 +0200
Subject: [PATCH 225/265] move autogenerated.css and theme.css down in the DOM
 (#274)

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

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 24755f86..a83ffbfd 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -56,14 +56,6 @@ function DEFAULT_LAYOUT(; title::String = "Genie App",
     <link rel='stylesheet' href='$(Genie.Configuration.basepath())/css/genieapp.css'>
     <% else %>
     <% end %>
-    <% if isfile(joinpath(Genie.config.server_document_root, "css", "theme.css")) %>
-    <link rel='stylesheet' href='$(Genie.Configuration.basepath())/css/theme.css'>
-    <% else %>
-    <% end %>
-    <% if isfile(joinpath(Genie.config.server_document_root, "css", "autogenerated.css")) %>
-    <link rel='stylesheet' href='$(Genie.Configuration.basepath())/css/autogenerated.css'>
-    <% else %>
-    <% end %>
     <style>
       ._genie_logo {
         background:url('https://genieframework.com/logos/genie/logo-simple-with-padding.svg') no-repeat;
@@ -98,6 +90,14 @@ function DEFAULT_LAYOUT(; title::String = "Genie App",
         </div>
       </div>
     </footer>
+    <% if isfile(joinpath(Genie.config.server_document_root, "css", "theme.css")) %>
+    <link rel='stylesheet' href='$(Genie.Configuration.basepath())/css/theme.css'>
+    <% else %>
+    <% end %>
+    <% if isfile(joinpath(Genie.config.server_document_root, "css", "autogenerated.css")) %>
+    <link rel='stylesheet' href='$(Genie.Configuration.basepath())/css/autogenerated.css'>
+    <% else %>
+    <% end %>
   </body>
 </html>
 """

From 0d1be6b5b03cb5739d4383d2795992769c5f9fba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 19 Apr 2024 01:18:51 +0200
Subject: [PATCH 226/265] DataFrame conversion for AbstractDicts

---
 ext/StippleDataFramesExt.jl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ext/StippleDataFramesExt.jl b/ext/StippleDataFramesExt.jl
index 55880e97..c751c833 100644
--- a/ext/StippleDataFramesExt.jl
+++ b/ext/StippleDataFramesExt.jl
@@ -6,7 +6,7 @@ isdefined(Base, :get_extension) ? (using DataFrames) : (using ..DataFrames)
 
 # DataFrame(d::Dict) will generate multiple rows if a field contains a Vector
 # to prevent this we need to wrap vectors in a Ref()
-function dataframe(d::Dict)
+function dataframe(d::AbstractDict)
   DataFrame([p[1] => p[2] isa Vector ? Ref(p[2]) : p[2] for p in d])
 end
 

From e4459d0061408c6fc5e5210e57148c144e7be8e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 19 Apr 2024 06:22:27 +0200
Subject: [PATCH 227/265] set version v0.28.11

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 13f2e9e6..52316498 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.10"
+version = "0.28.11"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From f8612d85229fb280cf3ad7e8e8b3ff9ef473a8d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 19 Apr 2024 01:18:51 +0200
Subject: [PATCH 228/265] DataFrame conversion for AbstractDicts

---
 ext/StippleDataFramesExt.jl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ext/StippleDataFramesExt.jl b/ext/StippleDataFramesExt.jl
index 55880e97..c751c833 100644
--- a/ext/StippleDataFramesExt.jl
+++ b/ext/StippleDataFramesExt.jl
@@ -6,7 +6,7 @@ isdefined(Base, :get_extension) ? (using DataFrames) : (using ..DataFrames)
 
 # DataFrame(d::Dict) will generate multiple rows if a field contains a Vector
 # to prevent this we need to wrap vectors in a Ref()
-function dataframe(d::Dict)
+function dataframe(d::AbstractDict)
   DataFrame([p[1] => p[2] isa Vector ? Ref(p[2]) : p[2] for p in d])
 end
 

From 7e92b690bc3b777377c799409c10929c64d72a2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Fri, 19 Apr 2024 22:59:05 +0200
Subject: [PATCH 229/265] tune the migration guide in README

---
 README.md | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 4936d038..a5c7699a 100644
--- a/README.md
+++ b/README.md
@@ -36,21 +36,26 @@ The Stipple ecosystem also includes:
 * [StipplePlotly.jl](https://github.com/GenieFramework/StipplePlotly.jl) - Plotting library for `Stipple.jl` based on [Plotly](https://plotly.com/javascript/)'s Graphing Library including event forwarding for interactive plots.
 * [StipplePlotlyExport.jl](https://github.com/GenieFramework/StipplePlotlyExport.jl) - add-on for `StipplePlotly.jl` to allow server side generation and exporting of plots. 
 * [StippleLatex.jl](https://github.com/GenieFramework/StippleLatex.jl) - support for reactive Latex content based on the [Vue-Katex](https://github.com/lucpotage/vue-katex) plugin. 
-## News
+## News: Vue 3 / Quasar 2
 
 From version 0.29 on Stipple has upgraded the front-end libraries to Vue3 / Quasar 2, as Vue-2 has reached its end-of-life.
 
 We have put lots of effort in making migration as easy as possible. Nevertheless, there are some places where advanced apps might need a little tweeking.
 
-## Main Changes 
-Here are the main changes and respective pitfalls
+## Main Changes for version >= v0.29
+
+First of all, basic applications continue to function properly without any changes.
+
+However, if you have developed applications with external plugins or components you might need to do some adaptations.
+We have introduced a vue2compat layer to make the migration as easy as possible.
 
 ### Components
-- Components can no longer be registered in Vue, but rather in the app instance. If you are using legacy comp, e.g. by including libreVue libraries, you will find them by entering `vueLegacy` in the browser console. (right-click -> 'Inspect'). Under the field "components" you will find the components to be registered. Registering is then done by adding `Stipple.register_global_component("<component name>", legacy = true)` to your app.
+- Components can no longer be registered in Vue, but rather in the app instance. If you are using legacy components, e.g. by including Vue libraries, you can verify whether they have been recognized by entering `vueLegacy` in the browser console once the page has been loaded (right-click -> 'Inspect'). Under the field "components" you will find the components to be registered. Registering is then done by adding `Stipple.register_global_component("<component name>", legacy = true)` to your app.
 - Vue-2 components often use `this.$set(this.field, key, value)` to set object fields, which is incompatible with Vue-3 syntax. Use a normal assignment instead, e.g. `field[key] = value`
 
 ### Plugins
-If libraries install plugins, they need to be added to the app via `Stipple.add_plugin(MyApp, "<plugin name>")`
+If libraries install plugins, they need to be added to the app via `Stipple.add_plugin(MyApp, "<plugin name>")`.
+If you are using explicit models replace 'MyApp' by the model type, otherwise use the module's name.
 
 ### Component Attributes
 Vue-2 syntax for synchronizing additional fields other than the v-model has changed from `<fieldname>.sync` to `v-model:<fieldname>`, e.g. from `:pagination.sync = "myvar` to `v-model:pagination = "myvar"`. In StippleUI we had offered "paginationsync = :myvar" which will be automatically translated to the new syntax. If want to explicitly enter the original form, you can do so by using the var"" syntax, " , e.g. `table(:mytable, var"v-model:pagination" = "test")`

From 651dfd0c13369b3f63a590a0c1d31f8c306c3d93 Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Mon, 22 Apr 2024 16:06:38 +0200
Subject: [PATCH 230/265] support gutter by `@gutter` and flexgrid kwarg
 `gutter` (#273)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Stipple.attributes: have kwarg `inner` accept Vectors

* support flexgrid gutter by `@gutter` and flexgrid kwarg `gutter`

* fix wrong size kwarg in htmldiv, column and row

* remove requirement of ';' before `@gutter(size,expr)`

* fix `@gutter(cell)`: remove col from child

* fix `@for` and `@gutter` to work with ìmport Stipple`

* add test for @gutter

* adapt docstring of `@gutter`
---
 src/Elements.jl  |   2 +-
 src/Layout.jl    | 259 +++++++++++++++++++++++++++++++++++++++++------
 test/runtests.jl |   6 ++
 3 files changed, 236 insertions(+), 31 deletions(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index f3e79b62..d42739d9 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -245,7 +245,7 @@ It is also possible to loop over `(v, k)` or `v`; index will always be zero-base
 """
 macro recur(expr)
   expr isa Expr && expr.head == :call && expr.args[1] == :in && (expr.args[2] = string(expr.args[2]))
-  expr = (MacroTools.@capture(expr, y_ in z_)) ? :("$($y) in $($z isa Union{AbstractDict, AbstractVector} ? js_attr($z) : $z)") : :("$($expr)")
+  expr = (MacroTools.@capture(expr, y_ in z_)) ? :("$($y) in $($z isa Union{AbstractDict, AbstractVector} ? Stipple.js_attr($z) : $z)") : :("$($expr)")
 
   Expr(:kw, Symbol("v-for"), esc_expr(expr))
 end
diff --git a/src/Layout.jl b/src/Layout.jl
index 96088c09..b59d1c62 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -8,11 +8,13 @@ module Layout
 using Genie, Stipple
 
 export layout, add_css, remove_css
-export page, app, row, column, cell, container, flexgrid_kwargs, htmldiv
+export page, app, row, column, cell, container, flexgrid_kwargs, htmldiv, @gutter
 
 export theme
 const THEMES = Ref(Function[])
 
+const FLEXGRID_KWARGS = [:col, :xs, :sm, :md, :lg, :xl, :gutter, :xgutter, :ygutter]
+
 """
     function layout(output::Union{String,Vector}; partial::Bool = false, title::String = "", class::String = "", style::String = "",
                       head_content::String = "", channel::String = Genie.config.webchannels_default_route) :: String
@@ -108,7 +110,46 @@ function container(args...; fluid = false, kwargs...)
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
+function iscontainer(class::String)
+  !isempty(intersect(split(class), ("row", "column")))
+end
+
+function iscontainer(class::Vector)
+  length(class) > 0 && class[end] in ("row", "column")
+end
+
+function iscontainer(class)
+    false
+end
+
+function flexgrid_class(tag::Symbol, value::Union{String,Int,Nothing,Symbol} = -1, container = false)
+  gutter = container ? "q-col-gutter" : "q-gutter"
+  (value == -1 || value === nothing) && return ""
+  out = String[]
+  if tag in (:col, :xs, :sm, :md, :lg, :xl)
+    tag == :col || push!(out, "col")
+    push!(out, "$tag")
+  elseif tag == :gutter
+    push!(out, gutter)
+  elseif tag == :xgutter
+    push!(out, "$gutter-x")
+  elseif tag == :ygutter
+    push!(out, "$gutter-y")
+  else
+    push!(out, "$tag")
+  end
+
+  if value isa Int
+    value > 0 && push!(out, "$value")
+  else
+    value isa Symbol && (value = String(value))
+    length(value) > 0 && value != "col" && push!(out, value)
+  end
+  return join(out, '-')
+end
+
 function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = true, flexgrid_mappings::Dict{Symbol,Symbol} = Dict{Symbol,Symbol}(), kwargs...)
+  container = iscontainer(class)
   kwargs = Dict{Symbol,Any}(kwargs...)
 
   # support all different types of classes that vue supports: String, Expressions (Symbols), Arrays, Dicts
@@ -129,10 +170,10 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
   end
 
   classes = String[]
-  for key in (:col, :xs, :sm, :md, :lg, :xl)
+  for key in FLEXGRID_KWARGS
     newkey = get(flexgrid_mappings, key, key)
     if haskey(kwargs, newkey)
-      colclass = sizetocol(kwargs[newkey], key)
+      colclass = flexgrid_class(key, kwargs[newkey], container)
       length(colclass) > 0 && push!(classes, colclass)
       delete!(kwargs, newkey)
     end
@@ -147,7 +188,8 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
     elseif class isa Vector
       vcat(class, classes)
     else
-      join(pushfirst!(classes, class), ' ')
+      isempty(class) || pushfirst!(classes, class)
+      join(classes, ' ')
     end
   end
 
@@ -178,6 +220,173 @@ function append_class(class, subclass)
   end
 end
 
+"""
+    extract_kwargs!(args::Vector, kwarg_names)
+
+Low-level function that finds all kwargs in kwargs names from an expression if the expression is a function call and returns them as an expression that
+can be plugged in a function expression.
+"""
+function extract_kwargs!(args::Vector, kwarg_names)
+  kwargs = Expr(:parameters)
+  params = []
+  for n in length(args):-1:1
+    if args[n] isa Expr && args[n].head == :kw && args[n].args[1] in kwarg_names
+      pushfirst!(kwargs.args, popat!(args, n))
+    end
+  end
+  n = length(args)
+  pos = n > 0 && args[1] isa Expr && args[1].head == :parameters ? 1 : n > 1 && args[2] isa Expr && args[2].head == :parameters ? 2 : 0
+  
+  pos == 0 && return kwargs
+
+  parameters = args[pos].args
+  for n in length(parameters):-1:1
+    p = parameters[n]
+    if p isa Expr && p.head == :kw && p.args[1] in kwarg_names || p isa Symbol && p in kwarg_names
+      push!(params, popat!(parameters, n))
+    end
+  end
+  append!(kwargs.args, reverse(params))
+  kwargs
+end
+
+function _wrap_expression(expr)
+  new_expr = if expr isa Expr && expr.head == :call
+    kwargs = extract_kwargs!(expr.args, FLEXGRID_KWARGS[1:6])
+    # extra treatment for cell(), because col = 0 is default:
+    # So if not set explicitly then add col = 0 to the wrapper kwargs and col = -1 in the child kwargs
+    if expr.args[1] == :cell && :col ∉ [kwarg isa Expr ? kwarg.args[1] : kwarg for kwarg in kwargs.args]
+      push!(kwargs.args, Expr(:kw, :col, 0))
+      push!(expr.args, Expr(:kw, :col, -1))
+    end
+    new_expr = :(Stipple.htmldiv())
+    push!(new_expr.args, kwargs, expr)
+    new_expr
+  else
+    :(Stipple.htmldiv($expr))
+  end
+
+  new_expr
+end
+
+
+"""
+    @gutter(child_or_children)
+
+Wraps an element in a div-element to be part of a gutter container.
+(For the two-argument version of the macro that sets the gutter size see below.)
+
+### Example 1
+```julia
+julia> @gutter [
+         card("Hello", sm = 12, lg = 4)
+         card("World", sm = 12, md = 8)
+       ]
+
+2-element Vector{ParsedHTMLString}:
+ "<div class=\"col col-sm-12 col-lg-4\"><q-card>Hello</q-card></div>"
+ "<div class=\"col col-sm-12 col-md-8\"><q-card>World</q-card></div>"
+```
+Note that the child elements need to be explicitly written in the code, for more info see below.
+### Example 2
+```
+julia> row(gutter = :md, @gutter [
+         card("Hello", sm = 12, lg = 4)
+         card("World", sm = 12, md = 8)
+       ]) |> prettify |> println
+<div class="row col q-col-gutter-md">
+    <div class="col col-sm-12 col-lg-4">
+        <q-card>
+            Hello
+        </q-card>
+    </div>
+    <div class="col col-sm-12 col-md-8">
+        <q-card>
+            World
+        </q-card>
+    </div>
+</div>
+```
+"""
+macro gutter(expr)
+  if expr isa Expr && expr.head ∈ (:vcat, :vect)
+      expr.args = _wrap_expression.(expr.args)
+  else
+      expr = _wrap_expression(expr)
+  end
+  expr |> esc
+end
+
+"""
+    @gutter(size, children)
+
+Sets the spacing of child elements.
+(We use `card()` and `prettify()` from `StippleUI` for the examples.) 
+
+```julia
+julia> row(@gutter :md [
+         card("Hello", sm = 12, lg = 4)
+         card("World", sm = 12, md = 8)
+       ]) |> prettify |> println
+<div class="row col q-col-gutter-md">
+    <div class="col col-sm-12 col-lg-4">
+        <q-card>
+            Hello
+        </q-card>
+    </div>
+    <div class="col col-sm-12 col-md-8">
+        <q-card>
+            World
+        </q-card>
+    </div>
+</div>
+```
+The internal reason for this macro is that elements in a gutter need to be wrapped in div-elements as you can see above.
+
+# Caveats
+The macro can only handle children if they are explicitily written in the command. The macro cannot handle content of a variable,
+so `row(@gutter [c1, c2])` will fail.
+
+Instead, you'd move the gutter macro to the definition of c1 and pass the gutter size to the parent element
+
+```
+c1 = @gutter card("Hello", sm = 2,  md = 8)
+c2 = @gutter card("World", sm = 10, md = 4)
+
+row(gutter = :md, [c1, c2])
+```
+  
+If you need c1 unwrapped in a different context you'd go for manual wrapping. You can also go for a mixed approach.
+
+```
+c1 = card("Hello", sm = 2,  md = 8)
+row(gutter = :md, [
+    cell(c1, sm = 12, md = 8, lg = 4, xl = 12)
+    @gutter card("World", sm = 12, md = 8, lg = 4, xl = 12)
+])
+```
+Due to restrictions in the Julia macro language the macro needs to go in the first
+position of the expression, so
+```julia
+row(class = "myclass", @gutter(:md, [
+    card("Hello", sm = 2,  md = 8)
+    card("World", sm = 10, md = 4)
+])
+```
+will fail.
+
+Place the class as second argument instead
+```julia
+row(@gutter(:md, [
+    card("Hello", sm = 2,  md = 8)
+    card("World", sm = 10, md = 4)
+], class = "myclass"))
+```
+"""
+macro gutter(size, expr)
+  Expr(:parameters, Expr(:kw, :gutter, size), Expr(:kw, :inner, :(@gutter($expr)))) |> esc
+end
+
 """
     function row(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)
 
@@ -195,15 +404,16 @@ julia> row(span("Hello"))
 function row(args...;
   col::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  class = "", kwargs...)
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...)
 
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
 
   # class = class isa Symbol ? Symbol("$class + ' row'") : class isa Vector ? push!(class, "row") : join(push!(split(class), "row"), " ")
   class = append_class(class, "row")
-  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, gutter, xgutter, ygutter, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -226,13 +436,13 @@ julia> column(span("Hello"))
 function column(args...;
   col::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  class = "", kwargs...)
-
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...)
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
   class = append_class(class, "column")
-  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, gutter, xgutter, ygutter, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -268,15 +478,16 @@ julia> row(cell(size = 2, md = 6, sm = 12, span("Hello")))
 function cell(args...;
   col::Union{Int,AbstractString,Symbol,Nothing} = 0,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = 0,
-  class = "", kwargs...
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = 0, kwargs...
 )
   # for backward compatibility with `size` kwarg
   col == 0 && size != 0 && (col = size)
 
   # class = class isa Symbol ? Symbol("$class + ' st-col'") : join(push!(split(class), "st-col"), " ")
   class = append_class(class, "st-col")
-  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, gutter, xgutter, ygutter, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -284,30 +495,18 @@ end
 function htmldiv(args...;
   col::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  class = "", kwargs...)
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...)
 
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
 
-  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, gutter, xgutter, ygutter, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
-function sizetocol(size::Union{String,Int,Nothing,Symbol} = -1, tag::Symbol = :col)
-  (size == -1 || size === nothing) && return ""
-  out = ["col"]
-  tag != :col && push!(out, String(tag))
-  if size isa Int
-    size > 0 && push!(out, "$size")
-  else
-    size isa Symbol && (size = String(size))
-    length(size) > 0 && size != "col" && push!(out, size)
-  end
-  return join(out, '-')
-end
-
 """
     function theme() :: String
 
diff --git a/test/runtests.jl b/test/runtests.jl
index 61ff58c9..a8fc11ff 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -431,6 +431,12 @@ end
     @test htmldiv(col = 9, class = split("a b c")) == "<div :class=\"['a','b','c','col-9']\"></div>"
 
     @test htmldiv(col = 9, class = Dict(:myclass => "b"), class! = "test") == "<div :class=\"[test,{'myclass':b},'col-9']\"></div>"
+
+    @test row(@gutter :sm [
+        cell("Hello", sm = 2,  md = 8)
+        cell("World", sm = 10, md = 4)
+    ]).data == "<div class=\"row q-col-gutter-sm\"><div class=\"col col-sm-2 col-md-8\">" * 
+    "<div class=\"st-col\">Hello</div></div><div class=\"col col-sm-10 col-md-4\"><div class=\"st-col\">World</div></div></div>"
 end
 
 @testset "Vue Conditionals and Iterator" begin

From 26e3033657f15ed1648aaaac3bc3a2bb4255b00b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 20 Mar 2024 08:46:13 +0100
Subject: [PATCH 231/265] support flexgrid gutter by `@gutter` and flexgrid
 kwarg `gutter`

---
 src/Layout.jl | 239 +++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 209 insertions(+), 30 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index 76ea142e..efd5358b 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -8,11 +8,13 @@ module Layout
 using Genie, Stipple
 
 export layout, add_css, remove_css
-export page, app, row, column, cell, container, flexgrid_kwargs, htmldiv
+export page, app, row, column, cell, container, flexgrid_kwargs, htmldiv, @gutter
 
 export theme
 const THEMES = Ref(Function[])
 
+const FLEXGRID_KWARGS = [:col, :xs, :sm, :md, :lg, :xl, :gutter, :xgutter, :ygutter]
+
 """
     function layout(output::Union{String,Vector}; partial::Bool = false, title::String = "", class::String = "", style::String = "",
                       head_content::String = "", channel::String = Genie.config.webchannels_default_route) :: String
@@ -108,7 +110,46 @@ function container(args...; fluid = false, kwargs...)
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
+function iscontainer(class::String)
+  !isempty(intersect(split(class), ("row", "column")))
+end
+
+function iscontainer(class::Vector)
+  length(class) > 0 && class[end] in ("row", "column")
+end
+
+function iscontainer(class)
+    false
+end
+
+function flexgrid_class(tag::Symbol, value::Union{String,Int,Nothing,Symbol} = -1, container = false)
+  gutter = container ? "q-col-gutter" : "q-gutter"
+  (value == -1 || value === nothing) && return ""
+  out = String[]
+  if tag in (:col, :xs, :sm, :md, :lg, :xl)
+    tag == :col || push!(out, "col")
+    push!(out, "$tag")
+  elseif tag == :gutter
+    push!(out, gutter)
+  elseif tag == :xgutter
+    push!(out, "$gutter-x")
+  elseif tag == :ygutter
+    push!(out, "$gutter-y")
+  else
+    push!(out, "$tag")
+  end
+
+  if value isa Int
+    value > 0 && push!(out, "$value")
+  else
+    value isa Symbol && (value = String(value))
+    length(value) > 0 && value != "col" && push!(out, value)
+  end
+  return join(out, '-')
+end
+
 function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = true, flexgrid_mappings::Dict{Symbol,Symbol} = Dict{Symbol,Symbol}(), kwargs...)
+  container = iscontainer(class)
   kwargs = Dict{Symbol,Any}(kwargs...)
 
   # support all different types of classes that vue supports: String, Expressions (Symbols), Arrays, Dicts
@@ -129,10 +170,10 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
   end
 
   classes = String[]
-  for key in (:col, :xs, :sm, :md, :lg, :xl)
+  for key in FLEXGRID_KWARGS
     newkey = get(flexgrid_mappings, key, key)
     if haskey(kwargs, newkey)
-      colclass = sizetocol(kwargs[newkey], key)
+      colclass = flexgrid_class(key, kwargs[newkey], container)
       length(colclass) > 0 && push!(classes, colclass)
       delete!(kwargs, newkey)
     end
@@ -147,7 +188,8 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
     elseif class isa Vector
       vcat(class, classes)
     else
-      join(pushfirst!(classes, class), ' ')
+      isempty(class) || pushfirst!(classes, class)
+      join(classes, ' ')
     end
   end
 
@@ -178,6 +220,153 @@ function append_class(class, subclass)
   end
 end
 
+"""
+    extract_kwargs!(args::Vector, kwarg_names)
+
+Low-level function that finds all kwargs in kwargs names from an expression if the expression is a function call and returns them as an expression that
+can be plugged in a function expression.
+"""
+function extract_kwargs!(args::Vector, kwarg_names)
+  kwargs = Expr(:parameters)
+  params = []
+  inds = Int[]
+  for n in length(args):-1:1
+    if args[n] isa Expr && args[n].head == :kw && args[n].args[1] in kwarg_names
+      pushfirst!(kwargs.args, popat!(args, n))
+    end
+  end
+  n = length(args)
+  pos = n > 0 && args[1] isa Expr && args[1].head == :parameters ? 1 : n > 1 && args[2] isa Expr && args[2].head == :parameters ? 2 : 0
+  
+  pos == 0 && return kwargs
+
+  parameters = args[pos].args
+  for n in length(parameters):-1:1
+    println("parameters[$n]", parameters[n])
+    if parameters[n] isa Expr && parameters[n].head == :kw && parameters[n].args[1] in kwarg_names ||
+      parameters[n] isa Symbol && parameters[n] in kwarg_names
+      push!(params, popat!(parameters, n))
+    end
+  end
+  append!(kwargs.args, reverse(params))
+  kwargs
+end
+
+function _wrap_expression(expr)
+  new_expr = if expr isa Expr && expr.head == :call
+    kwargs = extract_kwargs!(expr.args, FLEXGRID_KWARGS[1:6])
+    # extra treatment for cell(), because col = 0 is default:
+    # So if not set explicitly then add col = 0 to the wrapper kwargs
+    if expr.args[1] == :cell && :col ∉ [kwarg isa Expr ? kwarg.args[1] : kwarg for kwarg in kwargs.args]
+      push!(kwargs.args, Expr(:kw, :col, 0))
+    end
+    new_expr = :(Stipple.htmldiv())
+    push!(new_expr.args, kwargs, expr)
+    new_expr
+  else
+    :(Stipple.htmldiv($expr))
+  end
+
+  new_expr
+end
+
+
+"""
+    @gutter(child_or_children)
+
+Wraps an element in a div-element to be part of a gutter container.
+(For the two-argument version of the macro that sets the gutter size see below.)
+
+### Example 1
+```julia
+julia> @gutter [
+         card("Hello", sm = 12, lg = 4)
+         card("World", sm = 12, md = 8)
+       ]
+
+2-element Vector{ParsedHTMLString}:
+ "<div class=\"col col-sm-12 col-lg-4\"><q-card>Hello</q-card></div>"
+ "<div class=\"col col-sm-12 col-md-8\"><q-card>World</q-card></div>"
+```
+Note that the child elements need to be explicitly written in the code, for more info see below.
+### Example 2
+```
+julia> row(gutter = :md, @gutter [
+         card("Hello", sm = 12, lg = 4)
+         card("World", sm = 12, md = 8)
+       ]) |> prettify |> println
+<div class="row col q-col-gutter-md">
+    <div class="col col-sm-12 col-lg-4">
+        <q-card>
+            Hello
+        </q-card>
+    </div>
+    <div class="col col-sm-12 col-md-8">
+        <q-card>
+            World
+        </q-card>
+    </div>
+</div>
+```
+"""
+macro gutter(expr)
+  if expr isa Expr && expr.head ∈ (:vcat, :vect)
+      expr.args = _wrap_expression.(expr.args)
+  else
+      expr = _wrap_expression(expr)
+  end
+  expr |> esc
+end
+
+"""
+    @gutter(size, children)
+
+Sets the spacing of child elements.
+(We use `card()` and `prettify()` from `StippleUI` for the examples.) 
+
+```julia
+julia> row(@gutter :md [
+         card("Hello", sm = 12, lg = 4)
+         card("World", sm = 12, md = 8)
+       ]) |> prettify |> println
+<div class="row col q-col-gutter-md">
+    <div class="col col-sm-12 col-lg-4">
+        <q-card>
+            Hello
+        </q-card>
+    </div>
+    <div class="col col-sm-12 col-md-8">
+        <q-card>
+            World
+        </q-card>
+    </div>
+</div>
+```
+The internal reason for this macro is that elements in a gutter need to be wrapped in div-elements as you can see above.
+
+Note, that the macro can only handle children if they are explicitily written in the command. The macro cannot handle content of a variable,
+so `row(@gutter [c1, c2])` will fail.
+
+Instead, you'd move the gutter macro to the definition of c1 and pass the gutter size to the parent element
+```julia
+c1 = @gutter card("Hello", sm = 2,  md = 8)
+c2 = @gutter card("World", sm = 10, md = 4)
+
+row(gutter = :md, [c1, c2])
+```
+If you need c1 unwrapped in a different context you'd go for manual wrapping. You can also go for a mixed approach.
+```
+c1 = card("Hello", sm = 2,  md = 8)
+row(gutter = :md, [
+    cell(c1, sm = 12, md = 8, lg = 4, xl = 12)
+    @gutter card("World", sm = 12, md = 8, lg = 4, xl = 12)
+])
+```
+"""
+macro gutter(size, expr)
+  :((; gutter = $size, inner = @gutter($expr))...) |> esc
+end
+
 """
     function row(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)
 
@@ -195,15 +384,16 @@ julia> row(span("Hello"))
 function row(args...;
   col::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  class = "", kwargs...)
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = 0, kwargs...)
 
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
 
   # class = class isa Symbol ? Symbol("$class + ' row'") : class isa Vector ? push!(class, "row") : join(push!(split(class), "row"), " ")
   class = append_class(class, "row")
-  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, gutter, xgutter, ygutter, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -226,13 +416,13 @@ julia> column(span("Hello"))
 function column(args...;
   col::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  class = "", kwargs...)
-
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = 0, kwargs...)
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
   class = append_class(class, "column")
-  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, gutter, xgutter, ygutter, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -268,15 +458,16 @@ julia> row(cell(size = 2, md = 6, sm = 12, span("Hello")))
 function cell(args...;
   col::Union{Int,AbstractString,Symbol,Nothing} = 0,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = 0,
-  class = "", kwargs...
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = 0, kwargs...
 )
   # for backward compatibility with `size` kwarg
   col == 0 && size != 0 && (col = size)
 
   # class = class isa Symbol ? Symbol("$class + ' st-col'") : join(push!(split(class), "st-col"), " ")
   class = append_class(class, "st-col")
-  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, gutter, xgutter, ygutter, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
@@ -284,30 +475,18 @@ end
 function htmldiv(args...;
   col::Union{Int,AbstractString,Symbol,Nothing} = -1,
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1, size::Union{Int,AbstractString,Symbol,Nothing} = -1,
-  class = "", kwargs...)
+  lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
+  gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = 0, kwargs...)
 
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
 
-  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, symbol_class = false, kwargs...))
+  kwargs = Stipple.attributes(flexgrid_kwargs(; class, col, xs, sm, md, lg, xl, gutter, xgutter, ygutter, symbol_class = false, kwargs...))
 
   Genie.Renderer.Html.div(args...; kwargs...)
 end
 
-function sizetocol(size::Union{String,Int,Nothing,Symbol} = -1, tag::Symbol = :col)
-  (size == -1 || size === nothing) && return ""
-  out = ["col"]
-  tag != :col && push!(out, String(tag))
-  if size isa Int
-    size > 0 && push!(out, "$size")
-  else
-    size isa Symbol && (size = String(size))
-    length(size) > 0 && size != "col" && push!(out, size)
-  end
-  return join(out, '-')
-end
-
 """
     function theme() :: String
 

From 1d1623a1fac8d8d4b0c8c2c5d299d56001a5cecf Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 20 Mar 2024 09:33:54 +0100
Subject: [PATCH 232/265] fix wrong size kwarg in htmldiv, column and row

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

diff --git a/src/Layout.jl b/src/Layout.jl
index efd5358b..eaf4eb11 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -386,7 +386,7 @@ function row(args...;
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
   gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
-  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = 0, kwargs...)
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...)
 
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
@@ -418,7 +418,7 @@ function column(args...;
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
   gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
-  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = 0, kwargs...)
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...)
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)
   class = append_class(class, "column")
@@ -477,7 +477,7 @@ function htmldiv(args...;
   xs::Union{Int,AbstractString,Symbol,Nothing} = -1, sm::Union{Int,AbstractString,Symbol,Nothing} = -1, md::Union{Int,AbstractString,Symbol,Nothing} = -1,
   lg::Union{Int,AbstractString,Symbol,Nothing} = -1, xl::Union{Int,AbstractString,Symbol,Nothing} = -1,
   gutter::Union{AbstractString,Symbol,Nothing} = nothing, xgutter::Union{AbstractString,Symbol,Nothing} = nothing, ygutter::Union{AbstractString,Symbol,Nothing} = nothing,
-  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = 0, kwargs...)
+  class::Union{AbstractString,Symbol,AbstractDict,Vector} = "", size::Union{Int,AbstractString,Symbol,Nothing} = -1, kwargs...)
 
   # for backward compatibility with `size` kwarg
   col == -1 && size != -1 && (col = size)

From 3ebd6835a9ba5a3f8f8399122cba27f8687dac4d Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 20 Mar 2024 12:51:47 +0100
Subject: [PATCH 233/265] remove requirement of ';' before `@gutter(size,expr)`

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

diff --git a/src/Layout.jl b/src/Layout.jl
index eaf4eb11..afab8122 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -364,7 +364,7 @@ row(gutter = :md, [
 ```
 """
 macro gutter(size, expr)
-  :((; gutter = $size, inner = @gutter($expr))...) |> esc
+  Expr(:parameters, Expr(:kw, :gutter, size), Expr(:kw, :inner, :(@gutter($expr)))) |> esc
 end
 
 """

From 4c45223bea444ff140773b4cccb3a8b8904b57b1 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 20 Mar 2024 15:09:45 +0100
Subject: [PATCH 234/265] fix `@gutter(cell)`: remove col from child

---
 src/Layout.jl | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index afab8122..f7cc7fd9 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -229,7 +229,6 @@ can be plugged in a function expression.
 function extract_kwargs!(args::Vector, kwarg_names)
   kwargs = Expr(:parameters)
   params = []
-  inds = Int[]
   for n in length(args):-1:1
     if args[n] isa Expr && args[n].head == :kw && args[n].args[1] in kwarg_names
       pushfirst!(kwargs.args, popat!(args, n))
@@ -242,9 +241,8 @@ function extract_kwargs!(args::Vector, kwarg_names)
 
   parameters = args[pos].args
   for n in length(parameters):-1:1
-    println("parameters[$n]", parameters[n])
-    if parameters[n] isa Expr && parameters[n].head == :kw && parameters[n].args[1] in kwarg_names ||
-      parameters[n] isa Symbol && parameters[n] in kwarg_names
+    p = parameters[n]
+    if p isa Expr && p.head == :kw && p.args[1] in kwarg_names || p isa Symbol && p in kwarg_names
       push!(params, popat!(parameters, n))
     end
   end
@@ -256,9 +254,10 @@ function _wrap_expression(expr)
   new_expr = if expr isa Expr && expr.head == :call
     kwargs = extract_kwargs!(expr.args, FLEXGRID_KWARGS[1:6])
     # extra treatment for cell(), because col = 0 is default:
-    # So if not set explicitly then add col = 0 to the wrapper kwargs
+    # So if not set explicitly then add col = 0 to the wrapper kwargs and col = -1 in the child kwargs
     if expr.args[1] == :cell && :col ∉ [kwarg isa Expr ? kwarg.args[1] : kwarg for kwarg in kwargs.args]
       push!(kwargs.args, Expr(:kw, :col, 0))
+      push!(expr.args, Expr(:kw, :col, -1))
     end
     new_expr = :(Stipple.htmldiv())
     push!(new_expr.args, kwargs, expr)

From ea5b0458a2cd58574604523ce239f2e0826d1ee2 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 20 Mar 2024 15:38:53 +0100
Subject: [PATCH 235/265] =?UTF-8?q?fix=20`@for`=20and=20`@gutter`=20to=20w?=
 =?UTF-8?q?ork=20with=20=C3=ACmport=20Stipple`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/Elements.jl b/src/Elements.jl
index 923cacca..1e2e08f4 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -356,7 +356,7 @@ It is also possible to loop over `(v, k)` or `v`; index will always be zero-base
 """
 macro recur(expr)
   expr isa Expr && expr.head == :call && expr.args[1] == :in && (expr.args[2] = string(expr.args[2]))
-  expr = (MacroTools.@capture(expr, y_ in z_)) ? :("$($y) in $($z isa Union{AbstractDict, AbstractVector} ? js_attr($z) : $z)") : :("$($expr)")
+  expr = (MacroTools.@capture(expr, y_ in z_)) ? :("$($y) in $($z isa Union{AbstractDict, AbstractVector} ? Stipple.js_attr($z) : $z)") : :("$($expr)")
 
   Expr(:kw, Symbol("v-for"), esc_expr(expr))
 end

From 82a4cd521fec27f50f3da6fcf81b9f6907c890bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 20 Mar 2024 23:06:02 +0100
Subject: [PATCH 236/265] add test for @gutter

---
 test/runtests.jl | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/test/runtests.jl b/test/runtests.jl
index 61ff58c9..a8fc11ff 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -431,6 +431,12 @@ end
     @test htmldiv(col = 9, class = split("a b c")) == "<div :class=\"['a','b','c','col-9']\"></div>"
 
     @test htmldiv(col = 9, class = Dict(:myclass => "b"), class! = "test") == "<div :class=\"[test,{'myclass':b},'col-9']\"></div>"
+
+    @test row(@gutter :sm [
+        cell("Hello", sm = 2,  md = 8)
+        cell("World", sm = 10, md = 4)
+    ]).data == "<div class=\"row q-col-gutter-sm\"><div class=\"col col-sm-2 col-md-8\">" * 
+    "<div class=\"st-col\">Hello</div></div><div class=\"col col-sm-10 col-md-4\"><div class=\"st-col\">World</div></div></div>"
 end
 
 @testset "Vue Conditionals and Iterator" begin

From bae462c250454a5274d4a1c70a7273d3c69d07cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 22 Apr 2024 08:01:37 +0200
Subject: [PATCH 237/265] adapt docstring of `@gutter`

---
 src/Layout.jl | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index f7cc7fd9..cc5fc4a9 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -343,17 +343,21 @@ julia> row(@gutter :md [
 ```
 The internal reason for this macro is that elements in a gutter need to be wrapped in div-elements as you can see above.
 
-Note, that the macro can only handle children if they are explicitily written in the command. The macro cannot handle content of a variable,
+# Caveats
+The macro can only handle children if they are explicitily written in the command. The macro cannot handle content of a variable,
 so `row(@gutter [c1, c2])` will fail.
 
 Instead, you'd move the gutter macro to the definition of c1 and pass the gutter size to the parent element
-```julia
+
+```
 c1 = @gutter card("Hello", sm = 2,  md = 8)
 c2 = @gutter card("World", sm = 10, md = 4)
 
 row(gutter = :md, [c1, c2])
 ```
+  
 If you need c1 unwrapped in a different context you'd go for manual wrapping. You can also go for a mixed approach.
+
 ```
 c1 = card("Hello", sm = 2,  md = 8)
 row(gutter = :md, [
@@ -361,6 +365,23 @@ row(gutter = :md, [
     @gutter card("World", sm = 12, md = 8, lg = 4, xl = 12)
 ])
 ```
+Due to restrictions in the Julia macro language the macro needs to go in the first
+position of the expression, so
+```julia
+row(class = "myclass", @gutter(:md, [
+    card("Hello", sm = 2,  md = 8)
+    card("World", sm = 10, md = 4)
+])
+```
+will fail.
+
+Place the class as second argument instead
+```julia
+row(@gutter(:md, [
+    card("Hello", sm = 2,  md = 8)
+    card("World", sm = 10, md = 4)
+], class = "myclass"))
+```
 """
 macro gutter(size, expr)
   Expr(:parameters, Expr(:kw, :gutter, size), Expr(:kw, :inner, :(@gutter($expr)))) |> esc

From e0654087b8ffc0dc2698f5d0230c366001ab3531 Mon Sep 17 00:00:00 2001
From: PGimenez <gimenezfebrer@gmail.com>
Date: Tue, 30 Apr 2024 12:47:57 +0200
Subject: [PATCH 238/265] updated README

---
 README.md | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 3c535126..06b46d8c 100644
--- a/README.md
+++ b/README.md
@@ -21,13 +21,32 @@
 
   [![Docs](https://img.shields.io/badge/stipple-docs-yellowgreen)](https://www.genieframework.com/docs/) [![current status](https://img.shields.io/badge/julia%20support-v1.6%20and%20up-dark%20green)](https://github.com/GenieFramework/Stipple.jl/blob/9530ccd4313d7a4e3da2351eb621152047bc5cbd/Project.toml#L32) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fgenieframework.com&logo=genie)](https://www.genieframework.com/#stipple-section) [![Tests](https://img.shields.io/badge/build-passing-green)](https://github.com/GenieFramework/Stipple.jl/actions) [![Stipple Downloads](https://shields.io/endpoint?url=https://pkgs.genieframework.com/api/v1/badge/Stipple)](https://pkgs.genieframework.com?packages=Stipple) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fgithub.com%2FGenieFramework%2FGenie.jl)](https://twitter.com/AppStipple)
 
+  <p>
+    <a href="https://www.genieframework.com/">
+      <img
+        src="https://github.com/GenieFramework/Genie.jl/raw/master/docs/content/img/genie.gif"
+        alt="Screenshot"
+        width="100%"
+      />
+    </a>
+  </p>
+</div>
+
+<p style="font-family:verdana;font-size:60%;margin-bottom:4%" align="center">
+<u>Julia data dashboard powered by Stipple and Genie. <a href="https://learn.genieframework.com/app-gallery">App gallery</a></u>
+</p>
   
-  <p>Stipple is a reactive UI library for building interactive data applications in pure Julia.
-It uses <a href="https://github.com/GenieFramework/Genie.jl">Genie.jl</a> on the server side and <a href="https://vuejs.org/">Vue.js</a> on the client. Stipple uses a high performance MVVM architecture, which automatically synchronizes the state two-way
-(server -> client and client -> server) sending only JSON data over the wire. The Stipple package provides the fundamental communication layer, extending <i><b>Genie's</b></i> HTML API with a reactive component.</p>
+Part of [Genie Framework](https://genieframework.com), Stipple is a reactive UI library for building interactive data applications in pure Julia.
+It uses <a href="https://github.com/GenieFramework/Genie.jl">Genie.jl</a> on the server side and <a href="https://vuejs.org/">Vue.js</a> on the client. Stipple uses a high performance architecture that automatically synchronizes the state two-way
+(server -> client and client -> server), sending only JSON data over the wire. The Stipple package provides the fundamental communication layer, extending <i><b>Genie's</b></i> HTML API with a reactive component.
 </div>
 
 
+To learn more about Stipple and Genie Framework, visit the [documentation](https://learn.genieframework.com/docs/guides), and the [app gallery](https://learn.genieframework.com/app-gallery).
+
+
+If you need help with anything, you can find us on [Discord](https://discord.com/invite/9zyZbD6J7H).
+
 ---
 
 The Stipple ecosystem also includes:

From 47d63c6001213ddf08d1f258fee02e092470a5a7 Mon Sep 17 00:00:00 2001
From: PGimenez <gimenezfebrer@gmail.com>
Date: Tue, 30 Apr 2024 12:47:57 +0200
Subject: [PATCH 239/265] updated README

---
 README.md | 293 ++++++------------------------------------------------
 1 file changed, 31 insertions(+), 262 deletions(-)

diff --git a/README.md b/README.md
index 06b46d8c..b6f98567 100644
--- a/README.md
+++ b/README.md
@@ -37,10 +37,11 @@
 </p>
   
 Part of [Genie Framework](https://genieframework.com), Stipple is a reactive UI library for building interactive data applications in pure Julia.
-It uses <a href="https://github.com/GenieFramework/Genie.jl">Genie.jl</a> on the server side and <a href="https://vuejs.org/">Vue.js</a> on the client. Stipple uses a high performance architecture that automatically synchronizes the state two-way
-(server -> client and client -> server), sending only JSON data over the wire. The Stipple package provides the fundamental communication layer, extending <i><b>Genie's</b></i> HTML API with a reactive component.
+It uses <a href="https://github.com/GenieFramework/Genie.jl">Genie.jl</a> on the server side and <a href="https://vuejs.org/">Vue.js</a> on the client. Stipple uses a high performance architecture that automatically synchronizes the state two-way (server -> client and client -> server), sending only JSON data over the wire.
 </div>
 
+Besides the low-code API provided by Stipple, you can also use [Genie Builder](https://learn.genieframework.com/docs/genie-builder/quick-start) to build your reactive UIs. Genie Builder is a plugin for VSCode to help you create interactive Genie apps much faster using its visual drag-and-drop editor.
+
 
 To learn more about Stipple and Genie Framework, visit the [documentation](https://learn.genieframework.com/docs/guides), and the [app gallery](https://learn.genieframework.com/app-gallery).
 
@@ -63,281 +64,49 @@ Stipple can be added from the GitHub repo, via `Pkg`:
 pkg> add Stipple
 ```
 
-## Examples
-
-### Example 1
-
-```julia
-using Stipple
-
-@vars Name begin
-  name::R{String} = "World!"
-end
-
-function ui()
-  [
-    h1([
-      "Hello "
-      span("", @text(:name))
-    ])
-
-    p([
-      "What is your name? "
-      input("", placeholder="Type your name", @bind(:name))
-    ])
-  ]
-end
-
-route("/") do
-  global model
-  model = Name |> init
-  page(model, ui()) |> html
-end
-
-up() # or `up(open_browser = true)` to automatically open a browser window/tab when launching the app
-```
-
-This will start a web app on port 8000 and we'll be able to access it in the browser at http://localhost:8000
-
-Once the page is loaded, we'll be able to interact with the data and see how it's synced.
-
-We can update the name value from Julia, and see it reflected on the page, at the REPL:
-
-```julia
-julia> model.name[] = "Adrian" # updating the property in Julia will update the values on the front
-```
-
-On the webpage, we can change the name in the input field and confirm that it has been updated in Julia:
-
-```julia
-julia> model.name[] # will have the same value as what you have inputted on the web page
-```
-
-You can see a quick video demo here:
-<https://www.dropbox.com/s/50t5bqd2zk4ehxo/basic_stipple_3.mp4?dl=0>
-
-The Stipple presentation from JuliaCon 2020 is available here (8 minutes):
-<https://www.dropbox.com/s/6atyctgomsqwjki/stipple_exported.mp4?dl=0>
+## Example
 
-While the above example is perfect for scipting, full web apps rely on handler functions to modify valuesin order to allow for multiple users to connect to the server and not to mix the values. This is shown in the following Example.
-### Example 2
+This snippet below illustrates the structure of a reactive UI built with Stipple. See its [documentation page](https://learn.genieframework.com/docs/reference/reactive-ui/introduction) for a detailed explanation.
 
-This snippet illustrates how to build a reactive UI based on StippleUI. Below you find three different ways of triggering handlers.
-- Every input in the input field triggers a function that sets the inverted input string in the output field.
-- Hitting the `Enter` key in the input field inverts the output string.
-- Pressing of the action button inverts the output string.
-StippleUI 
 ```julia
-using Stipple, StippleUI
-
-@vars Inverter begin
-  process = false
-  input = ""
-  # you can explicitly define the type of the variable
-  output::String = "", READONLY
-end
-
-function handlers(model)
-  on(model.input) do input
-      model.output[] = input |> reverse
-  end
+module App
+#setup of the Genie Framework environment
+using GenieFramework
+@genietools
 
-  onbutton(model.process) do
-      model.output[] = model.output[] |> reverse
-  end
-
-  model
+# reactive code
+@app begin
+    # reactive variables synchronised between server and browser
+    @in N = 0
+    @out msg = ""
+    #reactive handler, executes code when N changes
+    @onchange N begin
+        msg = "N = $N"
+    end
 end
 
+# UI components
 function ui()
-  row(cell(class = "st-module", [
-    textfield(class = "q-my-md", "Input", :input, hint = "Please enter some words", @on("keyup.enter", "process = true"))
-
-    btn(class = "q-my-md", "Action!", @click(:process), color = "primary")
-    
-    card(class = "q-my-md", [
-      card_section(h2("Output"))
-      card_section("Variant 1: {{ output }}")
-      card_section(["Variant 2: ", span(class = "text-red", @text(:output))])
-    ])
-  ]))
-end
-
-route("/") do
-  model = Inverter |> init |> handlers
-  page(model, ui()) |> html
-end
-
-Genie.isrunning(:webserver) || up()
-```
-<img src="docs/content/img/Example2.png">
-
-## Choosing the transport layer: WebSockets or HTTP
-
-
-By default Stipple will attempt to use WebSockets for real time data sync between backend and frontend.
-However, in some cases WebSockets support might not be available on the host. In this case, Stipple can be
-switched to use regular HTTP for data sync, using frontend polling with AJAX (1s polling interval by default).
-Stipple can be configured to use AJAX/HTTP by passing the `transport` param to the `init()` method, ex:
-
-```julia
-model = Stipple.init(Name(), transport = Genie.WebThreads)
-```
-
-The current available options for `transport` are `Genie.WebChannels` (default, using WebSockets) and
-`Genie.WebThreads` (using HTTP/AJAX).
-
-Given that polling generates quite a number of extra requests, it can be desirable to disable automatic
-logging of requests. This can be done using `Genie.config.log_requests = false`.
-
-Support for `WebThreads` and request logging disabling has been introduced in Genie v1.14 and Stipple v0.8.
-
-### First example changed to use `WebThreads`
-
-```julia
-using Stipple
-
-Genie.config.log_requests = false
-
-@vars Name begin
-  name::R{String} = "World!"
-end
-
-function ui(model)
     [
-      h1([
-        "Hello "
-        span("", @text(:name))
-      ])
-
-      p([
-        "What is your name? "
-        input("", placeholder="Type your name", @bind(:name))
-      ])
+        cell([
+                p("Enter a number")
+                # variables are bound to a component using their symbol name
+                textfield("N", :N )
+            ])
+        cell([
+                bignumber("The value of N is", :N)
+            ])
     ]
 end
 
-route("/") do
-  model = init(Name, transport = Genie.WebThreads)
-  page(model, ui()) |> html
+# definition of root route
+@page("/", ui)
 end
-
-Genie.isrunning(:webserver) || up()
 ```
-## ReactiveTools API
-
-In the previous releases we silently introduced the new ReactiveTools API.
-It offers a simple macro language to define variables and handlers.
-```julia
-using Stipple, Stipple.ReactiveTools
-using StippleUI
-
-@appname Inverter
-
-@app begin
-  @in process = false
-  @out output = ""
-  @in input = ""
-
-  @onchange input begin
-    output = input |> reverse
-  end
-
-  @onbutton process begin
-    output = output |> reverse
-  end
-end
-
-function ui()
-  row(cell(class = "st-module", [
-    textfield(class = "q-my-md", "Input", :input, hint = "Please enter some words", @on("keyup.enter", "process = true"))
-
-    btn(class = "q-my-md", "Action!", @click(:process), color = "primary")
-    
-    card(class = "q-my-md", [
-      card_section(h2("Output"))
-      card_section("Variant 1: {{ output }}")
-      card_section(["Variant 2: ", span(class = "text-red", @text(:output))])
-    ])
-  ]))
-end
-
-route("/") do
-  model = @init
-  page(model, ui()) |> html
-end
-
-Genie.isrunning(:webserver) || up()
-```
-The ReactiveTools API has a different way of defining app variables. `@in` defines variables that can be modified by the client, `@out` (or `@readonly`) defines variables that are only shown, but not modified by the client. For variables that are invisible to the client we have `@private`.
-In this API the model is no longer defined explicitly, instead the macro `@init` instantiates a model including handlers. The model is attached to the current module, therefore it is only possible to define one model per module.
-
-The new API syntax is also available for explicit models and it is possible to mix it with the classical API. For this purpose we have defined `@handlers` that only cares about the definition of handler functions.
-The above example could also be defined as.
-
-
-```julia
-@vars Inverter begin
-  process = false
-  input = ""
-  output = "", READONLY
-end
-
-@handlers Inverter begin
-  @onchange input begin
-    output = input |> reverse
-  end
-
-  @onbutton process begin
-    output = output |> reverse
-  end
-end
-
-route("/") do
-  model = Inverter |> init |> handlers
-  page(model, ui()) |> html
-end
-```
-But also the `@app` macro is available for explicit models
-```julia
-@app Inverter begin
-  @in process = false
-  @out output = ""
-  @in input = ""
-
-  @onchange input begin
-    output = input |> reverse
-  end
-
-  @onbutton process begin
-    output = output |> reverse
-  end
-end
-```
-
-Note:
-In previous versions, `@in` and `@out` defined variables in the current name space. That led to name collisions with already existing constants, functions or keywords. We therefore decided to remove that feature. The old definitions are still available as `@in!` and `@out!` instead.
-
-## Demos
-### StippleDemos
-We have dedicated a Github Page to Stipple Demos with many downloadable examples at:
-<https://github.com/GenieFramework/StippleDemos>
-(Not all of them are updated to the latest changes of the API yet. But most of them should be functional.)
-### German Credits visualisation dashboard
-
-<img src="https://genieframework.com/githubimg/Screenshot_German_Credits.png" width="800">
-
-The full application is available at:
-<https://github.com/GenieFramework/Stipple-Demo-GermanCredits>
-
-### Iris Flowers dataset k-Means clustering dashboard
-
-<img src="https://genieframework.com/githubimg/Screenshot_Iris_Data.png" width="800">
 
-The full application is available at:
-<https://github.com/GenieFramework/Stipple-Demo-IrisClustering>
+<img src="https://learn.genieframework.com/assets/docs/ui/enternumber.png" width="200px" style="margin-left:auto;margin-right:auto"> </img>
 
-### More information
+## More information
 
 While Stipple/StippleUI documentation is still evolving, you can find help and many small examples via docstrings of the functions.
 

From bda3e9f8a25d78762a497987941ccb314d67b92e Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 2 May 2024 13:17:59 +0200
Subject: [PATCH 240/265] stipple_parse structs

---
 src/stipple/parsers.jl | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/stipple/parsers.jl b/src/stipple/parsers.jl
index 107a27b2..cbe17f90 100644
--- a/src/stipple/parsers.jl
+++ b/src/stipple/parsers.jl
@@ -1,5 +1,19 @@
 # wrapper around Base.parse to prevent type piracy
-stipple_parse(::Type{T}, value) where T = Base.parse(T, value)
+function stipple_parse(::Type{T}, value) where T
+  if isstructtype(T)
+    ff = [String(f) for f in fieldnames(T)]
+    kk = String.(keys(value))
+    # if all fieldnames are present, generate the type directly from the fields
+    if all(ff .∈ Ref(kk))
+      T([stipple_parse(Ft, value[String(f)]) for (f, Ft) in zip(ff, fieldtypes(T))]...)
+    # otherwise, try to generate it via kwargs, e.g. when the type is defined via @kwdef
+    else
+      T(; (Symbol(k) => v for (k,v) in value)...)
+    end
+  else
+    Base.parse(T, value)
+  end
+end
 
 # function stipple_parse(::Type{T}, value::Dict) where T <: AbstractDict
 #   convert(T, value)

From 925e20a7adcf5de68d1945f140fd35fa4aae8799 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 2 May 2024 13:19:55 +0200
Subject: [PATCH 241/265] remove julia_to_vue, make OptDict an OrderedDict

---
 src/Stipple.jl           | 27 +++++++++------------------
 src/stipple/rendering.jl |  4 ++--
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 20916995..e7e892d8 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -115,7 +115,7 @@ export JSONParser, JSONText, json, @json, jsfunction, @jsfunction_str
 const config = Genie.config
 const channel_js_name = "window.CHANNEL"
 
-const OptDict = Dict{Symbol, Any}
+const OptDict = OrderedDict{Symbol, Any}
 opts(;kwargs...) = OptDict(kwargs...)
 
 const IF_ITS_THAT_LONG_IT_CANT_BE_A_FILENAME = 500
@@ -734,7 +734,7 @@ function _push!(vals::Pair{Symbol,T}, channel::String;
                 except::Union{Nothing,UInt,Vector{UInt}} = nothing,
                 restrict::Union{Nothing,UInt,Vector{UInt}} = nothing)::Bool where {T}
   try
-    webtransport().broadcast(channel, json(Dict("key" => julia_to_vue(vals[1]), "value" => Stipple.render(vals[2], vals[1]))); except, restrict)
+    webtransport().broadcast(channel, json(Dict("key" => vals[1], "value" => Stipple.render(vals[2], vals[1]))); except, restrict)
   catch ex
     @debug ex
     false
@@ -746,7 +746,7 @@ function Base.push!(app::M, vals::Pair{Symbol,Reactive{T}};
                     except::Union{Nothing,UInt,Vector{UInt}} = nothing,
                     restrict::Union{Nothing,UInt,Vector{UInt}} = nothing)::Bool where {T,M<:ReactiveModel}
                     v = vals[2].r_mode != JSFUNCTION ? vals[2][] : replace_jsfunction(vals[2][])
-  push!(app, Symbol(julia_to_vue(vals[1])) => v; channel, except, restrict)
+  push!(app, vals[1] => v; channel, except, restrict)
 end
 
 function Base.push!(app::M;
@@ -1091,17 +1091,12 @@ function attributes(kwargs::Union{Vector{<:Pair}, Base.Iterators.Pairs, Dict},
     end
 
     k_str == "inner" && (v = join(v))
-    v_isa_jsexpr = v isa Symbol || !isa(v, Union{AbstractString, Bool, Number})
-    attr_key = string((v_isa_jsexpr && ! startswith(k_str, ":") &&
-                ! (endswith(k_str, "!") || startswith(k_str, "v-") || startswith(k_str, "v" * Genie.config.html_parser_char_dash)) ? ":" : ""), k_str) |> Symbol
-    attr_val = if isa(v, Symbol) && ! startswith(k_str, ":")
-      Stipple.julia_to_vue(v)
-    elseif v isa Symbol || ! v_isa_jsexpr
-      v
-    else
-      js_attr(v)
-    end
-    attrs[attr_key] = attr_val
+
+    v_isa_jsexpr = !isa(v, Union{Symbol, AbstractString, Bool, Number})
+    attr_key = isa(v, Symbol) && !startswith(k_str, ":") && !endswith(k_str, "!") &&
+      !startswith(k_str, "v-") && !startswith(k_str, "v" * Genie.config.html_parser_char_dash) ? Symbol(":", k) : Symbol(k)
+
+    attrs[attr_key] = v_isa_jsexpr ? js_attr(v) : v
   end
 
   NamedTuple(attrs)
@@ -1113,10 +1108,6 @@ include("Pages.jl")
 
 #===#
 
-# function _deepcopy(r::R{T}) where T
-#   v_copy = deepcopy(r.o.val)
-#   :(R{$T}($v_copy, $(r.r_mode), $(r.no_backend_watcher), $(r.no_frontend_watcher), $(r.__source__)))
-# end
 _deepcopy(r::R{T}) where T = R(deepcopy(r.o.val), r.r_mode, r.no_backend_watcher, r.no_frontend_watcher)
 
 _deepcopy(x) = deepcopy(x)
diff --git a/src/stipple/rendering.jl b/src/stipple/rendering.jl
index a5a31d34..f2387eca 100644
--- a/src/stipple/rendering.jl
+++ b/src/stipple/rendering.jl
@@ -130,7 +130,7 @@ jsrender(r::Reactive, args...) = jsrender(getfield(getfield(r,:o), :val), args..
 Renders the Julia `ReactiveModel` `app` as the corresponding Vue.js JavaScript code.
 """
 function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
-  result = Dict{String,Any}()
+  result = OptDict()
 
   for field in fieldnames(typeof(app))
     f = getfield(app, field)
@@ -138,7 +138,7 @@ function Stipple.render(app::M)::Dict{Symbol,Any} where {M<:ReactiveModel}
     occursin(SETTINGS.private_pattern, String(field)) && continue
     f isa Reactive && f.r_mode == PRIVATE && continue
 
-    result[julia_to_vue(field)] = Stipple.jsrender(f, field)
+    result[field] = Stipple.jsrender(f, field)
   end
 
   vue = Dict( :el => JSONText("rootSelector"),

From a511d96b0f461c66135278514017b92c4b354038 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Thu, 2 May 2024 13:50:04 +0200
Subject: [PATCH 242/265] add parsing tests for structs

---
 test/runtests.jl | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/test/runtests.jl b/test/runtests.jl
index a8fc11ff..46c6a3f7 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -565,4 +565,33 @@ end
     @test Stipple.Layout.THEMES[][end] == my_css
     remove_css(my_css, byname = true)
     @test findfirst(==(my_css), Stipple.Layout.THEMES[]) === nothing
+end
+
+@testset "parsing" begin
+    struct T1
+        c::Int
+        d::Int
+    end
+    
+    struct T2
+        a::Int
+        b::T1
+    end
+    
+    t2 = T2(1, T1(2, 3))
+    t2_dict = JSON3.read(json(t2), Dict)
+    
+    Base.@kwdef struct T3
+        c::Int = 1
+        d::Int = 3
+    end
+    
+    Base.@kwdef struct T4
+        a::Int = 1
+        b::T3 = T3()
+    end
+    
+    @test Stipple.stipple_parse(T2, t2_dict) == T2(1, T1(2, 3))
+    @test Stipple.stipple_parse(T3, Dict()) == T3(1, 3)
+    @test Stipple.stipple_parse(T4, Dict()) == T4(1, T3(1, 3))
 end
\ No newline at end of file

From 81fb9ac0e91d8d18ac898164e463672e71f580f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 2 May 2024 20:34:49 +0200
Subject: [PATCH 243/265] specify json in runtests

---
 test/runtests.jl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/runtests.jl b/test/runtests.jl
index 46c6a3f7..32393c5e 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -579,7 +579,7 @@ end
     end
     
     t2 = T2(1, T1(2, 3))
-    t2_dict = JSON3.read(json(t2), Dict)
+    t2_dict = JSON3.read(Stipple.json(t2), Dict)
     
     Base.@kwdef struct T3
         c::Int = 1

From 7aa806aca8338d08511c08bf23fdf182b60a1829 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Thu, 2 May 2024 20:57:19 +0200
Subject: [PATCH 244/265] remove replacement of curly brackets

---
 src/Elements.jl | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Elements.jl b/src/Elements.jl
index d42739d9..5a9d0856 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -56,8 +56,7 @@ function vue_integration(::Type{M};
                           transport::Module = Genie.WebChannels)::String where {M<:ReactiveModel}
   model = Base.invokelatest(M)
 
-  vue_app = replace(json(model |> Stipple.render), "\"{" => " {")
-  vue_app = replace(vue_app, "}\"" => "} ")
+  vue_app = json(model |> Stipple.render)
   vue_app = replace(vue_app, "\"$(getchannel(model))\"" => Stipple.channel_js_name)
 
   output =

From 34b1c500fcbd86fc545636a1f61a06a0d01cc486 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 3 May 2024 14:05:34 +0200
Subject: [PATCH 245/265] set version v0.29.0

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 52316498..0b10d5dd 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.28.11"
+version = "0.29.0"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 4fc78a056499768098e089271a25be8d54e8f24d Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 3 May 2024 15:04:28 +0200
Subject: [PATCH 246/265] set version v0.30.0

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 0b10d5dd..459e548e 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.29.0"
+version = "0.30.0"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From f5e45979abd640477e4da87033437d04a7758bf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 5 May 2024 02:37:28 +0200
Subject: [PATCH 247/265] fix Stipple.attributes

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

diff --git a/src/Stipple.jl b/src/Stipple.jl
index badc1514..fcaa8a71 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -1067,7 +1067,7 @@ function attributes(kwargs::Union{Vector{<:Pair}, Base.Iterators.Pairs, Dict},
 
     v_isa_jsexpr = !isa(v, Union{Symbol, AbstractString, Bool, Number})
     attr_key = isa(v, Symbol) && !startswith(k_str, ":") && !endswith(k_str, "!") &&
-      !startswith(k_str, "v-") && !startswith(k_str, "v" * Genie.config.html_parser_char_dash) ? Symbol(":", k) : Symbol(k)
+      !startswith(k_str, "v-") && !startswith(k_str, "v" * Genie.config.html_parser_char_dash) ? Symbol(":", k_str) : Symbol(k_str)
 
     attrs[attr_key] = v_isa_jsexpr ? js_attr(v) : v
   end

From 02050b0b2135dbc86dae4d9d28039a4a1e374fa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Sun, 5 May 2024 02:44:05 +0200
Subject: [PATCH 248/265] set version v0.30.1

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 459e548e..f5ae32ee 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.30.0"
+version = "0.30.1"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From e689257a2dcd4a3a0e2fee43b0d94bd85fbf0e72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Mon, 6 May 2024 13:24:51 +0200
Subject: [PATCH 249/265] add `@run` to `@onchange` syntax, support arguments
 to `@push`, remove [] from __model__[] for
 getindex/setindex!/getproperty/setproperty!

---
 src/ReactiveTools.jl | 62 +++++++++++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index a83ffbfd..5bfc9bbc 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -898,36 +898,44 @@ function transform(expr, vars::Vector{Symbol}, test_fn::Function, replace_fn::Fu
   replaced_vars = Symbol[]
   ex = postwalk(expr) do x
       if x isa Expr
-          if x.head == :call
-            f = x
-            while f.args[1] isa Expr && f.args[1].head == :ref
-              f = f.args[1]
-            end
-            if f.args[1] isa Symbol && test_fn(f.args[1])
-              union!(push!(replaced_vars, f.args[1]))
-              f.args[1] = replace_fn(f.args[1])
-            end
-            if x.args[1] == :notify && length(x.args) == 2
-              if @capture(x.args[2], __model__.fieldname_[])
-                x.args[2] = :(__model__.$fieldname)
-              elseif x.args[2] isa Symbol
-                x.args[2] = :(__model__.$(x.args[2]))
-              end
+        if x.head == :call
+          f = x
+          while f.args[1] isa Expr && f.args[1].head == :ref
+            f = f.args[1]
+          end
+          if f.args[1] isa Symbol && test_fn(f.args[1])
+            union!(push!(replaced_vars, f.args[1]))
+            f.args[1] = replace_fn(f.args[1])
+          end
+          if x.args[1] == :notify && length(x.args) == 2
+            if @capture(x.args[2], __model__.fieldname_[])
+              x.args[2] = :(__model__.$fieldname)
+            elseif x.args[2] isa Symbol
+              x.args[2] = :(__model__.$(x.args[2]))
             end
-          elseif x.head == :kw && test_fn(x.args[1])
-            x.args[1] = replace_fn(x.args[1])
-          elseif x.head == :parameters
-            for (i, a) in enumerate(x.args)
-              if a isa Symbol && test_fn(a)
-                new_a = replace_fn(a)
-                x.args[i] = new_a in vars ? :($(Expr(:kw, new_a, :(__model__.$new_a[])))) : new_a
-              end
+          end
+        elseif x.head == :kw && test_fn(x.args[1])
+          x.args[1] = replace_fn(x.args[1])
+        elseif x.head == :parameters
+          for (i, a) in enumerate(x.args)
+            if a isa Symbol && test_fn(a)
+              new_a = replace_fn(a)
+              x.args[i] = new_a in vars ? :($(Expr(:kw, new_a, :(__model__.$new_a[])))) : new_a
             end
-          elseif x.head == :ref && length(x.args) == 2 && x.args[2] == :!
-            @capture(x.args[1], __model__.fieldname_[]) && (x.args[1] = :(__model__.$fieldname))
-          elseif x.head == :macrocall && x.args[1] == Symbol("@push")
-            x = :(push!(__model__))
           end
+        elseif x.head == :ref && length(x.args) >= 2 || x.head == :.
+            # if model field is indexed by at least one index argument or if a property is referenced
+            # remove [] after __model__, because getindex, setindex!, getproperty, and setproperty!
+            # handle Reactive vars correctly and call notify after the update in case of set routines
+            @capture(x.args[1], __model__.fieldname_[]) && (x.args[1] = :(__model__.$fieldname))
+        elseif x.head == :macrocall && x.args[1] ∈ (Symbol("@push"), Symbol("@run"))
+          head = Symbol(String(x.args[1])[2:end])
+          args = filter(x -> !isa(x, LineNumberNode), x.args[2:end])
+          x = Expr(:call, head, :__model__)
+          length(args) > 0 && push!(x.args, Stipple.expressions_to_args(args)...)
+        elseif x.head == :(=) && x.args[1] isa Expr && x.args[1].head == :macrocall && x.args[1].args[1] == Symbol("@js_str")
+          x.args[1] = :(__model__[$(x.args[1].args[end])])
+        end
       end
       x
   end

From 0c6b0efa4bc2192f80ad81fe6484c97fc0d0ce5d Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 7 May 2024 08:29:44 +0200
Subject: [PATCH 250/265] fix keys or julia objects in attributes()

---
 src/Stipple.jl | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Stipple.jl b/src/Stipple.jl
index fcaa8a71..2da35766 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -1066,7 +1066,8 @@ function attributes(kwargs::Union{Vector{<:Pair}, Base.Iterators.Pairs, Dict},
     k_str == "inner" && (v = join(v))
 
     v_isa_jsexpr = !isa(v, Union{Symbol, AbstractString, Bool, Number})
-    attr_key = isa(v, Symbol) && !startswith(k_str, ":") && !endswith(k_str, "!") &&
+    
+    attr_key = v_isa_jsexpr && !startswith(k_str, ":") && !endswith(k_str, "!") &&
       !startswith(k_str, "v-") && !startswith(k_str, "v" * Genie.config.html_parser_char_dash) ? Symbol(":", k_str) : Symbol(k_str)
 
     attrs[attr_key] = v_isa_jsexpr ? js_attr(v) : v

From a4fed1c9b55884c0eb363485ffdf5aaa491825d9 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 7 May 2024 08:45:31 +0200
Subject: [PATCH 251/265] set version v0.30.2

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index f5ae32ee..ef6c8108 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.30.1"
+version = "0.30.2"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From e9e60c548efcc485a44943c400edf28a2f1d8fe0 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 7 May 2024 16:10:57 +0200
Subject: [PATCH 252/265] fix missing ':' for symbol attributes

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

diff --git a/src/Stipple.jl b/src/Stipple.jl
index 2da35766..59fa94b4 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -1066,8 +1066,8 @@ function attributes(kwargs::Union{Vector{<:Pair}, Base.Iterators.Pairs, Dict},
     k_str == "inner" && (v = join(v))
 
     v_isa_jsexpr = !isa(v, Union{Symbol, AbstractString, Bool, Number})
-    
-    attr_key = v_isa_jsexpr && !startswith(k_str, ":") && !endswith(k_str, "!") &&
+
+    attr_key = (v isa Symbol || v_isa_jsexpr) && !startswith(k_str, ":") && !endswith(k_str, "!") &&
       !startswith(k_str, "v-") && !startswith(k_str, "v" * Genie.config.html_parser_char_dash) ? Symbol(":", k_str) : Symbol(k_str)
 
     attrs[attr_key] = v_isa_jsexpr ? js_attr(v) : v

From 8de1b3242d0df6c6945d772f26152f2114a8249e Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 7 May 2024 16:11:56 +0200
Subject: [PATCH 253/265] fix kwargs handling for `@push` and `@run`, add
 `@push!` as alias for `@push`

---
 src/ReactiveTools.jl | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/ReactiveTools.jl b/src/ReactiveTools.jl
index 5bfc9bbc..1456a57a 100644
--- a/src/ReactiveTools.jl
+++ b/src/ReactiveTools.jl
@@ -928,11 +928,13 @@ function transform(expr, vars::Vector{Symbol}, test_fn::Function, replace_fn::Fu
             # remove [] after __model__, because getindex, setindex!, getproperty, and setproperty!
             # handle Reactive vars correctly and call notify after the update in case of set routines
             @capture(x.args[1], __model__.fieldname_[]) && (x.args[1] = :(__model__.$fieldname))
-        elseif x.head == :macrocall && x.args[1] ∈ (Symbol("@push"), Symbol("@run"))
-          head = Symbol(String(x.args[1])[2:end])
+        elseif x.head == :macrocall && x.args[1] ∈ (Symbol("@push"), Symbol("@push!"), Symbol("@run"))
+          head = x.args[1] == Symbol("@push") ? :push! : Symbol(String(x.args[1])[2:end])
           args = filter(x -> !isa(x, LineNumberNode), x.args[2:end])
-          x = Expr(:call, head, :__model__)
-          length(args) > 0 && push!(x.args, Stipple.expressions_to_args(args)...)
+          has_params = length(args) > 0 && args[1] isa Expr && args[1].head == :parameters
+          args = has_params ? vcat([head, args[1]], :__model__, args[2:end]) : vcat([head, :__model__], args)
+          x = Expr(:call)
+          x.args = Stipple.expressions_to_args(args)
         elseif x.head == :(=) && x.args[1] isa Expr && x.args[1].head == :macrocall && x.args[1].args[1] == Symbol("@js_str")
           x.args[1] = :(__model__[$(x.args[1].args[end])])
         end

From 3c048e927c4061f4b5410ab692c32ffc0084bc4c Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 7 May 2024 16:12:05 +0200
Subject: [PATCH 254/265] deprecate unused and irritating definition for silent
 updates

---
 src/stipple/mutators.jl | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/stipple/mutators.jl b/src/stipple/mutators.jl
index e513808a..0f21548c 100644
--- a/src/stipple/mutators.jl
+++ b/src/stipple/mutators.jl
@@ -61,10 +61,6 @@ function callwatchers(field, val, keys...; notify)
   end
 end
 
-function Base.setindex!(r::Reactive{T}, val, args::Vector{Int}; notify=(x)->true) where T
-  setindex_withoutwatchers!(r, val, args...)
-end
-
 """
     setfield_withoutwatchers!(app::ReactiveModel, field::Symmbol, val; notify=(x)->true)
     setfield_withoutwatchers!(app::ReactiveModel, field::Symmbol, val, keys...; notify=(x)->true)

From 1c733223cf6fd0b9440aedfbedd26e1ce60af7bb Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 7 May 2024 16:54:09 +0200
Subject: [PATCH 255/265] set version v0.30.3

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index ef6c8108..3e0f64e1 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.30.2"
+version = "0.30.3"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From ef06a2c8987df05f745d968b2b1201d63bad218c Mon Sep 17 00:00:00 2001
From: hhaensel <31985040+hhaensel@users.noreply.github.com>
Date: Wed, 8 May 2024 23:41:49 +0200
Subject: [PATCH 256/265] Update README.md

---
 README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b66a1f28..fd295754 100644
--- a/README.md
+++ b/README.md
@@ -58,11 +58,14 @@ The Stipple ecosystem also includes:
 * [StippleLatex.jl](https://github.com/GenieFramework/StippleLatex.jl) - support for reactive Latex content based on the [Vue-Katex](https://github.com/lucpotage/vue-katex) plugin. 
 ## News: Vue 3 / Quasar 2
 
-From version 0.29 on Stipple has upgraded the front-end libraries to Vue3 / Quasar 2, as Vue-2 has reached its end-of-life.
+From version 0.30 on Stipple has upgraded the front-end libraries to Vue3 / Quasar 2, as Vue-2 has reached its end-of-life.
+We recommend to use at least v0.30.3, as we have fixed some relevant bugs.
+(Some of these bugs were also present in previous Vue2 versions.
+we therefore recommend to use at least v0.29.1 for legacy Vue2 support.)
 
 We have put lots of effort in making migration as easy as possible. Nevertheless, there are some places where advanced apps might need a little tweeking.
 
-## Main Changes for version >= v0.29
+## Main Changes for version >= v0.30
 
 First of all, basic applications continue to function properly without any changes.
 

From 731294ab1807e181e06eed44495a5d9e9f519406 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Mon, 13 May 2024 09:38:19 +0200
Subject: [PATCH 257/265] replace `function` syntax by `=>` syntax in macro
 `@on` to prevent template compilation warning

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

diff --git a/src/Elements.jl b/src/Elements.jl
index 9ca291ea..ea2b5c80 100644
--- a/src/Elements.jl
+++ b/src/Elements.jl
@@ -475,9 +475,9 @@ macro on(arg, expr, preprocess = nothing)
   isevent = expr isa QuoteNode && expr.value isa Symbol
   v = if isevent
       if preprocess === nothing
-          :("function(event) { handle_event(event, '$($(esc(expr)))') }")
+          :("(event) => { handle_event(event, '$($(esc(expr)))') }")
       else
-          :(replace("""function(event) {
+          :(replace("""(event) => {
               const preprocess = (event) => { """ * replace($preprocess, '"' => "\\\"") * """; return event }
               handle_event(preprocess(event), '$($(esc(expr)))')
           }""", '\n' => ';'))

From fcbd68d6df5fb5e10351ff15e91d7dd8bb9d3dc0 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 22 May 2024 15:00:21 +0200
Subject: [PATCH 258/265] fix parsing of Dates (and potentially other
 structtypes)

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

diff --git a/src/stipple/parsers.jl b/src/stipple/parsers.jl
index cbe17f90..c187fef9 100644
--- a/src/stipple/parsers.jl
+++ b/src/stipple/parsers.jl
@@ -1,6 +1,6 @@
 # wrapper around Base.parse to prevent type piracy
 function stipple_parse(::Type{T}, value) where T
-  if isstructtype(T)
+  if isstructtype(T) && value isa Dict
     ff = [String(f) for f in fieldnames(T)]
     kk = String.(keys(value))
     # if all fieldnames are present, generate the type directly from the fields

From ae5be420aafe0e4a77829e91cfc6b1955f60aa95 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Wed, 22 May 2024 15:01:02 +0200
Subject: [PATCH 259/265] set version v0.30.4

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 3e0f64e1..e928ca81 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.30.3"
+version = "0.30.4"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From ad107949fb5149876fe2c42b196a0f46cb7de0db Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 28 May 2024 19:04:46 +0200
Subject: [PATCH 260/265] pass kwargs from constructor of abstract model to
 constructor of concrete model

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

diff --git a/src/stipple/reactivity.jl b/src/stipple/reactivity.jl
index 6cb377f7..a4286fb4 100644
--- a/src/stipple/reactivity.jl
+++ b/src/stipple/reactivity.jl
@@ -424,7 +424,7 @@ macro type(modelname, storage)
         $output
       end
     end)
-    $modelname() = $modelconst()
+    $modelname(; kwargs...) = $modelconst(; kwargs...)
     Stipple.get_concrete_type(::Type{$modelname}) = $modelconst
 
     delete!.(Ref(Stipple.DEPS), filter(x -> x isa Type && x <: $modelname, keys(Stipple.DEPS)))

From 67803bc3113dab49f6ba9acfbc9027d49dcff5d3 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Tue, 28 May 2024 19:05:21 +0200
Subject: [PATCH 261/265] set version v0.30.5

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index e928ca81..0d774c91 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.30.4"
+version = "0.30.5"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From c6bfb15f781fadd38c7f09ac8cf1793de393ec58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 29 May 2024 01:44:10 +0200
Subject: [PATCH 262/265] better parsing for typed dicts

---
 src/stipple/parsers.jl | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/stipple/parsers.jl b/src/stipple/parsers.jl
index c187fef9..4993ab48 100644
--- a/src/stipple/parsers.jl
+++ b/src/stipple/parsers.jl
@@ -54,9 +54,14 @@ end
 function stipple_parse(::Type{Symbol}, s::String)
   Symbol(s)
 end
+
 # untyped Dicts to typed Dict's
-function stipple_parse(::Type{<:AbstractDict{K, V}}, value::AbstractDict{String, <:Any}) where {K, V}
-  Dict( zip(Vector{K}(stipple_parse(Vector{K}, collect(keys(value)))), stipple_parse(Vector{V}, collect(values(value)))) )
+function stipple_parse(D::Type{<:AbstractDict{K, V}}, value::AbstractDict) where {K, V}
+  if D isa LittleDict
+    D( stipple_parse(Vector{K}, collect(keys(value))), stipple_parse(Vector{V}, collect(values(value))) )
+  else
+    D( zip(Vector{K}(stipple_parse(Vector{K}, collect(keys(value)))), stipple_parse(Vector{V}, collect(values(value)))) )
+  end
 end
 
 # String to Integer

From d2e35cd5628e47ac96c1ab02bd35b7e737da86a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= <helmut.haensel@gmx.de>
Date: Wed, 29 May 2024 07:41:53 +0200
Subject: [PATCH 263/265] set version v0.30.6

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 0d774c91..91bec3b9 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.30.5"
+version = "0.30.6"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

From 3659951cc42648bfe41f68b57c3683fd2ea8e9b0 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 14 Jun 2024 17:37:19 +0200
Subject: [PATCH 264/265] fix core_theme issue in deps()

---
 src/Layout.jl  | 2 +-
 src/Stipple.jl | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Layout.jl b/src/Layout.jl
index cc5fc4a9..7b377d46 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -50,7 +50,7 @@ function layout(output::Union{S,Vector}, m::M;
   content = [
     output
     theme(; core_theme)
-    Stipple.deps(m; core_theme)
+    Stipple.deps(m)
   ]
 
   partial && return content
diff --git a/src/Stipple.jl b/src/Stipple.jl
index 59fa94b4..3cb40e08 100644
--- a/src/Stipple.jl
+++ b/src/Stipple.jl
@@ -857,14 +857,14 @@ end
 
 Outputs the HTML code necessary for injecting the dependencies in the page (the <script> tags).
 """
-function deps(m::M; core_theme::Bool = true) :: Vector{String} where {M<:ReactiveModel}
+function deps(m::M) :: Vector{String} where {M<:ReactiveModel}
   channel = getchannel(m)
   output = [
     channelscript(channel),
     (is_channels_webtransport() ? Genie.Assets.channels_script_tag(channel) : Genie.Assets.webthreads_script_tag(channel)),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="underscore-min")),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file=(Genie.Configuration.isprod() ? "vue.global.prod" : "vue.global"))),
-    core_theme && Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="stipplecore")),
+    Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="stipplecore")),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="vue_filters"), defer=true),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="watchers")),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="vue2compat")),

From 8259f8e03ff647aa9b30246c26632c25135e925e Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.de>
Date: Fri, 14 Jun 2024 17:37:58 +0200
Subject: [PATCH 265/265] set version v0.30.7

---
 Project.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Project.toml b/Project.toml
index 91bec3b9..29cc48f6 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "Stipple"
 uuid = "4acbeb90-81a0-11ea-1966-bdaff8155998"
 authors = ["Adrian <e@essenciary.com>"]
-version = "0.30.6"
+version = "0.30.7"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"