diff --git a/.deploy/docker-compose.yml b/.deploy/docker-compose.yml
new file mode 100644
index 0000000..7ba3624
--- /dev/null
+++ b/.deploy/docker-compose.yml
@@ -0,0 +1,33 @@
+version: "3.9"
+services:
+    app:
+        image: ghcr.io/${IMAGE_REPO}:${RELEASE_VERSION} 
+        restart: always                               
+        ports:                                         
+            - "8080"                                     
+        container_name: ${APP_NAME}_app                
+        environment:                                    
+            VIRTUAL_HOST: ${HOST_DOMAIN}
+            VIRTUAL_PORT: 8080 # New default ASP.NET port -> https://learn.microsoft.com/en-us/dotnet/core/compatibility/containers/8.0/aspnet-port
+            LETSENCRYPT_HOST: ${HOST_DOMAIN}           
+            LETSENCRYPT_EMAIL: ${LETSENCRYPT_EMAIL}    
+        volumes:
+            - app-mydb:/app/App_Data  
+
+    app-migration:
+        image: ghcr.io/${IMAGE_REPO}:${RELEASE_VERSION} 
+        restart: "no"                                  
+        container_name: ${APP_NAME}_app_migration       
+        profiles:                                      
+            - migration                                
+        command: --AppTasks=migrate                     
+        volumes:
+            - app-mydb:/app/App_Data  
+
+networks:
+  default:
+    external: true                                     
+    name: nginx                                        
+
+volumes:
+    app-mydb:                                          
diff --git a/.deploy/nginx-proxy-compose.yml b/.deploy/nginx-proxy-compose.yml
new file mode 100644
index 0000000..14a709c
--- /dev/null
+++ b/.deploy/nginx-proxy-compose.yml
@@ -0,0 +1,46 @@
+version: "3.9"
+
+services:
+  nginx-proxy:
+    image: nginxproxy/nginx-proxy
+    container_name: nginx-proxy
+    restart: always
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - conf:/etc/nginx/conf.d
+      - vhost:/etc/nginx/vhost.d
+      - html:/usr/share/nginx/html
+      - dhparam:/etc/nginx/dhparam
+      - certs:/etc/nginx/certs:ro
+      - /var/run/docker.sock:/tmp/docker.sock:ro
+    labels:
+      - "com.github.jrcs.letsencrypt_nginx_proxy_companion.nginx_proxy"
+
+  letsencrypt:
+    image: nginxproxy/acme-companion:2.2
+    container_name: nginx-proxy-le
+    restart: always
+    depends_on:
+      - "nginx-proxy"
+    environment:
+      - DEFAULT_EMAIL=you@example.com
+    volumes:
+      - certs:/etc/nginx/certs:rw
+      - acme:/etc/acme.sh
+      - vhost:/etc/nginx/vhost.d
+      - html:/usr/share/nginx/html
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+
+networks:
+  default:
+    name: nginx
+
+volumes:
+  conf:
+  vhost:
+  html:
+  dhparam:
+  certs:
+  acme:
\ No newline at end of file
diff --git a/.github/workflows/README.md b/.github/workflows/README.md
new file mode 100644
index 0000000..f6656a2
--- /dev/null
+++ b/.github/workflows/README.md
@@ -0,0 +1,99 @@
+## Overview
+
+This template uses the deployment configurations for a ServiceStack .NET 8 application. The application is containerized using Docker and is set up to be automatically built and deployed via GitHub Actions. The recommended deployment target is a stand-alone Linux server running Ubuntu, with an NGINX reverse proxy also containerized using Docker, which a Docker Compose file is included in the template under the `.deploy` directory.
+
+### Highlights
+- 🌐 **NGINX Reverse Proxy**: Utilizes an NGINX reverse proxy to handle web traffic and SSL termination.
+- 🚀 **GitHub Actions**: Leverages GitHub Actions for CI/CD, pushing Docker images to GitHub Container Registry and deploying them on a remote server.
+- 🐳 **Dockerized ServiceStack App**: The application is containerized, with the image built using `.NET 8`.
+- 🔄 **Automated Migrations**: Includes a separate service for running database migrations.
+
+### Technology Stack
+- **Web Framework**: ServiceStack
+- **Language**: C# (.NET 8)
+- **Containerization**: Docker
+- **Reverse Proxy**: NGINX
+- **CI/CD**: GitHub Actions
+- **OS**: Ubuntu 22.04 (Deployment Server)
+
+
+
+## Deployment Server Setup
+
+To successfully host your ServiceStack applications, there are several components you need to set up on your deployment server. This guide assumes you're working on a standalone Linux server (Ubuntu is recommended) with SSH access enabled.
+
+### Prerequisites
+
+1. **SSH Access**: Required for GitHub Actions to communicate with your server.
+2. **Docker**: To containerize your application.
+3. **Docker-Compose**: For orchestrating multiple containers.
+4. **Ports**: 80 and 443 should be open for web access.
+5. **nginx-reverse-proxy**: For routing traffic to multiple ServiceStack applications and managing TLS certificates.
+
+You can use any cloud-hosted or on-premises server like Digital Ocean, AWS, Azure, etc., for this setup.
+
+### Step-by-Step Guide
+
+#### 1. Install Docker and Docker-Compose
+
+It is best to follow the [latest installation instructions on the Docker website](https://docs.docker.com/engine/install/ubuntu/) to ensure to have the correct setup with the latest patches.
+
+#### 2. Configure SSH for GitHub Actions
+
+Generate a dedicated SSH key pair to be used by GitHub Actions:
+
+```bash
+ssh-keygen -t rsa -b 4096 -f ~/.ssh/github_actions
+```
+
+Add the public key to the `authorized_keys` file on your server:
+
+```bash
+cat ~/.ssh/github_actions.pub >> ~/.ssh/authorized_keys
+```
+
+Then, add the *private* key to your GitHub Secrets as `DEPLOY_KEY` to enable GitHub Actions to SSH into the server securely.
+
+#### 3. Set Up nginx-reverse-proxy
+
+You should have a `docker-compose` file similar to the `nginx-proxy-compose.yml` in your repository. Upload this file to your server:
+
+```bash
+scp nginx-proxy-compose.yml user@your_server:~/
+```
+
+To bring up the nginx reverse proxy and its companion container for handling TLS certificates, run:
+
+```bash
+docker compose -f ~/nginx-proxy-compose.yml up -d
+```
+
+This will start an nginx reverse proxy along with a companion container. They will automatically watch for additional Docker containers on the same network and initialize them with valid TLS certificates.
+
+
+
+## GitHub Repository Setup
+
+Configuring your GitHub repository is an essential step for automating deployments via GitHub Actions. This guide assumes you have a `release.yml` workflow file in your repository's `.github/workflows/` directory, and your deployment server has been set up according to the [Deployment Server Setup](#Deployment-Server-Setup) guidelines.
+
+### Secrets Configuration
+
+Your GitHub Actions workflow requires the following secrets to be set in your GitHub repository:
+
+1. **`DEPLOY_HOST`**: The hostname for SSH access. This can be either an IP address or a domain with an A-record pointing to your server.
+2. **`DEPLOY_USERNAME`**: The username for SSH login. Common examples include `ubuntu`, `ec2-user`, or `root`.
+3. **`DEPLOY_KEY`**: The SSH private key to securely access the deployment server. This should be the same key you've set up on your server for GitHub Actions.
+4. **`LETSENCRYPT_EMAIL`**: Your email address, required for Let's Encrypt automated TLS certificates.
+
+#### Using GitHub CLI for Secret Management
+
+You can conveniently set these secrets using the [GitHub CLI](https://cli.github.com/manual/gh_secret_set) like this:
+
+```bash
+gh secret set DEPLOY_HOST --body="your-host-or-ip"
+gh secret set DEPLOY_USERNAME --body="your-username"
+gh secret set DEPLOY_KEY --bodyFile="path/to/your/ssh-private-key"
+gh secret set LETSENCRYPT_EMAIL --body="your-email@example.com"
+```
+
+These secrets will populate environment variables within your GitHub Actions workflow and other configuration files, enabling secure and automated deployment of your ServiceStack applications.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 0000000..e6dc3f8
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,35 @@
+name: Build
+
+on:
+  pull_request: {}
+  push:
+    branches:
+      - '**'        # matches every branch
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+
+      - name: Setup dotnet
+        uses: actions/setup-dotnet@v3
+        with:
+          dotnet-version: '8.*'
+
+      - name: build
+        run: dotnet build
+        working-directory: .
+
+      - name: test
+        run: |
+          dotnet test
+          if [ $? -eq 0 ]; then
+            echo TESTS PASSED
+          else
+            echo TESTS FAILED
+            exit 1
+          fi
+        working-directory: ./MyApp.Tests
+
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 0000000..385fae2
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,155 @@
+name: Release
+permissions:
+  packages: write
+  contents: write
+on:
+  # Triggered on new GitHub Release
+  release:
+    types: [published]
+  # Triggered on every successful Build action
+  workflow_run:
+    workflows: ["Build"]
+    branches: [main,master]
+    types:
+      - completed
+  # Manual trigger for rollback to specific release or redeploy latest
+  workflow_dispatch:
+    inputs:
+      version:
+        default: latest
+        description: Tag you want to release.
+        required: true
+
+jobs:
+  push_to_registry:
+    runs-on: ubuntu-22.04
+    if: ${{ github.event.workflow_run.conclusion != 'failure' }}
+    steps:
+      # Checkout latest or specific tag
+      - name: checkout
+        if: ${{ github.event.inputs.version == '' || github.event.inputs.version == 'latest' }}
+        uses: actions/checkout@v3
+      - name: checkout tag
+        if: ${{ github.event.inputs.version != '' && github.event.inputs.version != 'latest' }}
+        uses: actions/checkout@v3
+        with:
+          ref: refs/tags/${{ github.event.inputs.version }}
+          
+      # Assign environment variables used in subsequent steps
+      - name: Env variable assignment
+        run: echo "image_repository_name=$(echo ${{ github.repository }} | tr '[:upper:]' '[:lower:]')" >> $GITHUB_ENV
+      # TAG_NAME defaults to 'latest' if not a release or manual deployment
+      - name: Assign version
+        run: |
+          echo "TAG_NAME=latest" >> $GITHUB_ENV
+          if [ "${{ github.event.release.tag_name }}" != "" ]; then
+            echo "TAG_NAME=${{ github.event.release.tag_name }}" >> $GITHUB_ENV
+          fi;
+          if [ "${{ github.event.inputs.version }}" != "" ]; then
+            echo "TAG_NAME=${{ github.event.inputs.version }}" >> $GITHUB_ENV
+          fi;
+      
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          
+        
+      - name: Setup dotnet
+        uses: actions/setup-dotnet@v3
+        with:
+          dotnet-version: '8.*'
+      
+      # Build and push new docker image, skip for manual redeploy other than 'latest'
+      - name: Build and push Docker image
+        run: |
+          dotnet publish --os linux --arch x64 -c Release -p:ContainerRepository=${{ env.image_repository_name }} -p:ContainerRegistry=ghcr.io -p:ContainerImageTags=${{ env.TAG_NAME }} -p:ContainerPort=80
+
+  deploy_via_ssh:
+    needs: push_to_registry
+    runs-on: ubuntu-22.04
+    if: ${{ github.event.workflow_run.conclusion != 'failure' }}
+    steps:
+      # Checkout latest or specific tag
+      - name: checkout
+        if: ${{ github.event.inputs.version == '' || github.event.inputs.version == 'latest' }}
+        uses: actions/checkout@v3
+      - name: checkout tag
+        if: ${{ github.event.inputs.version != '' && github.event.inputs.version != 'latest' }}
+        uses: actions/checkout@v3
+        with:
+          ref: refs/tags/${{ github.event.inputs.version }}
+
+      - name: repository name fix and env
+        run: |
+          echo "image_repository_name=$(echo ${{ github.repository }} | tr '[:upper:]' '[:lower:]')" >> $GITHUB_ENV
+          echo "TAG_NAME=latest" >> $GITHUB_ENV
+          if [ "${{ github.event.release.tag_name }}" != "" ]; then
+            echo "TAG_NAME=${{ github.event.release.tag_name }}" >> $GITHUB_ENV
+          fi;
+          if [ "${{ github.event.inputs.version }}" != "" ]; then
+            echo "TAG_NAME=${{ github.event.inputs.version }}" >> $GITHUB_ENV
+          fi;
+
+      - name: Create .env file
+        run: |
+          echo "Generating .env file"
+          
+          echo "# Autogenerated .env file" > .deploy/.env
+          echo "HOST_DOMAIN=${{ secrets.DEPLOY_HOST }}" >> .deploy/.env
+          echo "LETSENCRYPT_EMAIL=${{ secrets.LETSENCRYPT_EMAIL }}" >> .deploy/.env
+          echo "APP_NAME=${{ github.event.repository.name }}" >> .deploy/.env
+          echo "IMAGE_REPO=${{ env.image_repository_name }}" >> .deploy/.env
+          echo "RELEASE_VERSION=${{ env.TAG_NAME }}" >> .deploy/.env
+      
+      # Copy only the docker-compose.yml to remote server home folder
+      - name: copy files to target server via scp
+        uses: appleboy/scp-action@v0.1.3
+        with:
+          host: ${{ secrets.DEPLOY_HOST }}
+          username: ${{ secrets.DEPLOY_USERNAME }}
+          port: 22
+          key: ${{ secrets.DEPLOY_KEY }}
+          strip_components: 2
+          source: "./.deploy/docker-compose.yml,./.deploy/.env"
+          target: "~/.deploy/${{ github.event.repository.name }}/"
+      
+      - name: Run remote db migrations
+        uses: appleboy/ssh-action@v0.1.5
+        env:
+          APPTOKEN: ${{ secrets.GITHUB_TOKEN }}
+          USERNAME: ${{ secrets.DEPLOY_USERNAME }}
+        with:
+          host: ${{ secrets.DEPLOY_HOST }}
+          username: ${{ secrets.DEPLOY_USERNAME }}
+          key: ${{ secrets.DEPLOY_KEY }}
+          port: 22
+          envs: APPTOKEN,USERNAME
+          script: |
+            set -e
+            echo $APPTOKEN | docker login ghcr.io -u $USERNAME --password-stdin
+            cd ~/.deploy/${{ github.event.repository.name }}
+            docker compose pull
+            export APP_ID=$(docker compose run --entrypoint "id -u" --rm app)
+            docker compose run --entrypoint "chown $APP_ID:$APP_ID /app/App_Data" --user root --rm app
+            docker compose up app-migration --exit-code-from app-migration
+
+      # Deploy Docker image with your application using `docker compose up` remotely
+      - name: remote docker-compose up via ssh
+        uses: appleboy/ssh-action@v0.1.5
+        env:
+          APPTOKEN: ${{ secrets.GITHUB_TOKEN }}
+          USERNAME: ${{ secrets.DEPLOY_USERNAME }}
+        with:
+          host: ${{ secrets.DEPLOY_HOST }}
+          username: ${{ secrets.DEPLOY_USERNAME }}
+          key: ${{ secrets.DEPLOY_KEY }}
+          port: 22
+          envs: APPTOKEN,USERNAME
+          script: |
+            echo $APPTOKEN | docker login ghcr.io -u $USERNAME --password-stdin
+            cd ~/.deploy/${{ github.event.repository.name }}
+            docker compose pull
+            docker compose up app -d
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..69602f5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,295 @@
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+##
+## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
+
+# Custom
+dist/
+coverage/
+blog/
+package-lock.json
+App_Data/
+
+# User-specific files
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+
+# Visual Studio 2015 cache/options directory
+.vs/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+#wwwroot/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUNIT
+*.VisualState.xml
+TestResult.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+#**/Properties/launchSettings.json
+
+*_i.c
+*_p.c
+*_i.h
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# JustCode is a .NET coding add-in
+.JustCode
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# Visual Studio code coverage results
+*.coverage
+*.coveragexml
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# TODO: Comment the next line if you want to checkin your web deploy settings
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# The packages folder can be ignored because of Package Restore
+**/packages/*
+# except build/, which is used as an MSBuild target.
+!**/packages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/packages/repositories.config
+# NuGet v3's project.json files produces more ignorable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+
+# SQL Server files
+*.mdf
+*.ldf
+*.ndf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+node_modules/
+
+# Typescript v1 declaration files
+typings/
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
+*.vbw
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# JetBrains Rider
+.idea/
+*.sln.iml
+
+# CodeRush
+.cr/
+
+# Python Tools for Visual Studio (PTVS)
+__pycache__/
+*.pyc
+
+# Cake - Uncomment if you are using it
+# tools/**
+# !tools/packages.config
+
+# Telerik's JustMock configuration file
+*.jmconfig
+
+# BizTalk build output
+*.btp.cs
+*.btm.cs
+*.odx.cs
+*.xsd.cs
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..3ecb648
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,33 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": ".NET Core Launch (web)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            "program": "${workspaceFolder}/MyApp/bin/Debug/net6.0/MyApp.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}/MyApp",
+            "stopAtEntry": false,
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            },
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/Views"
+            }
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..a914fef
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,17 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet build",
+            "type": "shell",
+            "group": "build",
+            "presentation": {
+                "reveal": "silent"
+            },
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/MyApp.ServiceInterface/Data/ApplicationDbContext.cs b/MyApp.ServiceInterface/Data/ApplicationDbContext.cs
new file mode 100644
index 0000000..6a4a94c
--- /dev/null
+++ b/MyApp.ServiceInterface/Data/ApplicationDbContext.cs
@@ -0,0 +1,9 @@
+using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore;
+
+namespace MyApp.Data;
+
+public class ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
+    : IdentityDbContext<ApplicationUser>(options)
+{
+}
\ No newline at end of file
diff --git a/MyApp.ServiceInterface/Data/ApplicationUser.cs b/MyApp.ServiceInterface/Data/ApplicationUser.cs
new file mode 100644
index 0000000..421f84d
--- /dev/null
+++ b/MyApp.ServiceInterface/Data/ApplicationUser.cs
@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Identity;
+
+namespace MyApp.Data;
+
+// Add profile data for application users by adding properties to the ApplicationUser class
+public class ApplicationUser : IdentityUser
+{
+    public string? FirstName { get; set; }
+    public string? LastName { get; set; }
+    public string? DisplayName { get; set; }
+    public string? ProfileUrl { get; set; }
+}
+
diff --git a/MyApp.ServiceInterface/Data/CustomUserSession.cs b/MyApp.ServiceInterface/Data/CustomUserSession.cs
new file mode 100644
index 0000000..5c6be87
--- /dev/null
+++ b/MyApp.ServiceInterface/Data/CustomUserSession.cs
@@ -0,0 +1,42 @@
+using System.Security.Claims;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.Extensions.Options;
+using ServiceStack;
+using ServiceStack.Web;
+
+namespace MyApp.Data;
+
+public class CustomUserSession : AuthUserSession
+{
+    public override void PopulateFromClaims(IRequest httpReq, ClaimsPrincipal principal)
+    {
+        // Populate Session with data from Identity Auth Claims
+        ProfileUrl = principal.FindFirstValue(JwtClaimTypes.Picture);
+    }
+}
+
+/// <summary>
+/// Add additional claims to the Identity Auth Cookie
+/// </summary>
+public class AdditionalUserClaimsPrincipalFactory(
+    UserManager<ApplicationUser> userManager,
+    RoleManager<IdentityRole> roleManager,
+    IOptions<IdentityOptions> optionsAccessor)
+    : UserClaimsPrincipalFactory<ApplicationUser,IdentityRole>(userManager, roleManager, optionsAccessor)
+{
+    public override async Task<ClaimsPrincipal> CreateAsync(ApplicationUser user)
+    {
+        var principal = await base.CreateAsync(user);
+        var identity = (ClaimsIdentity)principal.Identity!;
+
+        var claims = new List<Claim>();
+        // Add additional claims here
+        if (user.ProfileUrl != null)
+        {
+            claims.Add(new Claim(JwtClaimTypes.Picture, user.ProfileUrl));
+        }
+
+        identity.AddClaims(claims);
+        return principal;
+    }
+}
diff --git a/MyApp.ServiceInterface/EmailServices.cs b/MyApp.ServiceInterface/EmailServices.cs
new file mode 100644
index 0000000..5e3974a
--- /dev/null
+++ b/MyApp.ServiceInterface/EmailServices.cs
@@ -0,0 +1,86 @@
+using System.Net.Mail;
+using Microsoft.Extensions.Logging;
+using ServiceStack;
+using MyApp.ServiceModel;
+
+namespace MyApp.ServiceInterface;
+
+/// <summary>
+/// Configuration for sending emails using SMTP servers in EmailServices
+/// E.g. for managed services like Amazon (SES): https://aws.amazon.com/ses/ or https://mailtrap.io
+/// </summary>
+public class SmtpConfig
+{
+    /// <summary>
+    /// Username of the SMTP Server account
+    /// </summary>
+    public string Username { get; set; }
+    /// <summary>
+    /// Password of the SMTP Server account
+    /// </summary>
+    public string Password { get; set; }
+    /// <summary>
+    /// Hostname of the SMTP Server
+    /// </summary>
+    public string Host { get; set; }
+    /// <summary>
+    /// Port of the SMTP Server
+    /// </summary>
+    public int Port { get; set; } = 587;
+    /// <summary>
+    /// Which email address to send emails from
+    /// </summary>
+    public string FromEmail { get; set; }
+    /// <summary>
+    /// The name of the Email Sender
+    /// </summary>
+    public string? FromName { get; set; }
+    /// <summary>
+    /// Prevent emails from being sent to real users during development by sending to this Dev email instead
+    /// </summary>
+    public string? DevToEmail { get; set; }
+    /// <summary>
+    /// Keep a copy of all emails sent by BCC'ing a copy to this email address
+    /// </summary>
+    public string? Bcc { get; set; }
+}
+
+/// <summary>
+/// Uses a configured SMTP client to send emails
+/// </summary>
+public class EmailServices(SmtpConfig config, ILogger<EmailServices> log) 
+    // TODO: Uncomment to enable sending emails with SMTP
+    // : Service
+{
+    public object Any(SendEmail request)
+    {
+        log.LogInformation("Sending email to {Email} with subject {Subject}", request.To, request.Subject);
+
+        using var client = new SmtpClient(config.Host, config.Port);
+        client.Credentials = new System.Net.NetworkCredential(config.Username, config.Password);
+        client.EnableSsl = true;
+
+        // If DevToEmail is set, send all emails to that address instead
+        var emailTo = config.DevToEmail != null
+            ? new MailAddress(config.DevToEmail)
+            : new MailAddress(request.To, request.ToName);
+
+        var emailFrom = new MailAddress(config.FromEmail, config.FromName);
+
+        var msg = new MailMessage(emailFrom, emailTo)
+        {
+            Subject = request.Subject,
+            Body = request.BodyHtml ?? request.BodyText,
+            IsBodyHtml = request.BodyHtml != null,
+        };
+
+        if (config.Bcc != null)
+        {
+            msg.Bcc.Add(new MailAddress(config.Bcc));
+        }
+
+        client.Send(msg);
+
+        return new EmptyResponse();
+    }
+}
diff --git a/MyApp.ServiceInterface/MyApp.ServiceInterface.csproj b/MyApp.ServiceInterface/MyApp.ServiceInterface.csproj
new file mode 100644
index 0000000..85357f8
--- /dev/null
+++ b/MyApp.ServiceInterface/MyApp.ServiceInterface.csproj
@@ -0,0 +1,20 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+    <PropertyGroup>
+        <TargetFramework>net8.0</TargetFramework>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <Nullable>enable</Nullable>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.*" />
+        <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.*" />
+        <PackageReference Include="ServiceStack" Version="8.*" />
+        <PackageReference Include="ServiceStack.Ormlite" Version="8.*" />
+    </ItemGroup>
+
+    <ItemGroup>
+        <ProjectReference Include="..\MyApp.ServiceModel\MyApp.ServiceModel.csproj" />
+    </ItemGroup>
+
+</Project>
diff --git a/MyApp.ServiceInterface/MyServices.cs b/MyApp.ServiceInterface/MyServices.cs
new file mode 100644
index 0000000..c076431
--- /dev/null
+++ b/MyApp.ServiceInterface/MyServices.cs
@@ -0,0 +1,33 @@
+using ServiceStack;
+using MyApp.ServiceModel;
+using ServiceStack.OrmLite;
+
+namespace MyApp.ServiceInterface;
+
+public class MyServices : Service
+{
+    public object Any(Hello request)
+    {
+        return new HelloResponse { Result = $"Hello, {request.Name}!" };
+    }
+
+    public async Task<object> Any(AdminData request)
+    {
+        var tables = new (string Label, Type Type)[] 
+        {
+            ("Bookings", typeof(Booking)),
+            ("Coupons",  typeof(Coupon)),
+        };
+        var dialect = Db.GetDialectProvider();
+        var totalSql = tables.Map(x => $"SELECT '{x.Label}', COUNT(*) FROM {dialect.GetQuotedTableName(x.Type.GetModelMetadata())}")
+            .Join(" UNION ");
+        var results = await Db.DictionaryAsync<string,int>(totalSql);
+        
+        return new AdminDataResponse {
+            PageStats = tables.Map(x => new PageStats {
+                Label = x.Label, 
+                Total = results[x.Label],
+            })
+        };
+    }
+}
diff --git a/MyApp.ServiceModel/AppRoles.cs b/MyApp.ServiceModel/AppRoles.cs
new file mode 100644
index 0000000..55ae26b
--- /dev/null
+++ b/MyApp.ServiceModel/AppRoles.cs
@@ -0,0 +1,10 @@
+namespace MyApp;
+
+public static class AppRoles
+{
+    public const string Admin = nameof(Admin);
+    public const string Employee = nameof(Employee);
+    public const string Manager = nameof(Manager);
+
+    public static string[] All { get; set; } = { Admin, Employee, Manager };
+}
diff --git a/MyApp.ServiceModel/Bookings.cs b/MyApp.ServiceModel/Bookings.cs
new file mode 100644
index 0000000..0b6eedb
--- /dev/null
+++ b/MyApp.ServiceModel/Bookings.cs
@@ -0,0 +1,179 @@
+// Complete declarative AutoQuery services for Bookings CRUD example:
+// https://docs.servicestack.net/autoquery-crud-bookings
+
+using System;
+using ServiceStack;
+using ServiceStack.DataAnnotations;
+
+namespace MyApp.ServiceModel;
+
+[Icon(Svg = Icons.Booking)]
+[Description("Booking Details")]
+[Notes("Captures a Persons Name & Room Booking information")]
+public class Booking : AuditBase
+{
+    [AutoIncrement]
+    public int Id { get; set; }
+    public string Name { get; set; } = default!;
+    public RoomType RoomType { get; set; }
+    public int RoomNumber { get; set; }
+    [IntlDateTime(DateStyle.Long)]
+    public DateTime BookingStartDate { get; set; }
+    [IntlRelativeTime]
+    public DateTime? BookingEndDate { get; set; }
+    [IntlNumber(Currency = NumberCurrency.USD)]
+    public decimal Cost { get; set; }
+
+    [Ref(Model = nameof(Coupon), RefId = nameof(Coupon.Id), RefLabel = nameof(Coupon.Description))]
+    [References(typeof(Coupon))]
+    public string? CouponId { get; set; }
+
+    [Reference]
+    public Coupon Discount { get; set; }
+    public string? Notes { get; set; }
+    public bool? Cancelled { get; set; }
+}
+
+public enum RoomType
+{
+    Single,
+    Double,
+    Queen,
+    Twin,
+    Suite,
+}
+
+[Tag("bookings"), Description("Find Bookings")]
+[Notes("Find out how to quickly create a <a class='svg-external' target='_blank' href='https://youtu.be/nhc4MZufkcM'>C# Bookings App from Scratch</a>")]
+[Route("/bookings", "GET")]
+[Route("/bookings/{Id}", "GET")]
+[AutoApply(Behavior.AuditQuery)]
+public class QueryBookings : QueryDb<Booking> 
+{
+    public int? Id { get; set; }
+}
+
+// Uncomment below to enable DeletedBookings API to view deleted bookings:
+// [Route("/bookings/deleted")]
+// [AutoFilter(QueryTerm.Ensure, nameof(AuditBase.DeletedDate), Template = SqlTemplate.IsNotNull)]
+// public class DeletedBookings : QueryDb<Booking> {}
+
+[Tag("bookings"), Description("Create a new Booking")]
+[LocodeCss(Field="col-span-12 sm:col-span-6", Fieldset = "grid grid-cols-8 gap-2", Form = "border overflow-hidden max-w-screen-lg")]
+[ExplorerCss(Field="col-span-12 sm:col-span-6", Fieldset = "grid grid-cols-6 gap-8", Form = "border border-indigo-500 overflow-hidden max-w-screen-lg")]
+[Route("/bookings", "POST")]
+[ValidateHasRole("Employee")]
+[AutoApply(Behavior.AuditCreate)]
+public class CreateBooking : ICreateDb<Booking>, IReturn<IdResponse>
+{
+    [Description("Name this Booking is for"), ValidateNotEmpty]
+    public string Name { get; set; } = default!;
+    public RoomType RoomType { get; set; }
+    [ValidateGreaterThan(0)]
+    public int RoomNumber { get; set; }
+    [ValidateGreaterThan(0)]
+    public decimal Cost { get; set; }
+    [Required]
+    public DateTime BookingStartDate { get; set; }
+    public DateTime? BookingEndDate { get; set; }
+    [Input(Type = "textarea")]
+    public string? Notes { get; set; }
+    public string? CouponId { get; set; }
+}
+
+[Tag("bookings"), Description("Update an existing Booking")]
+[Notes("Find out how to quickly create a <a class='svg-external' target='_blank' href='https://youtu.be/nhc4MZufkcM'>C# Bookings App from Scratch</a>")]
+[Route("/booking/{Id}", "PATCH")]
+[ValidateHasRole("Employee")]
+[AutoApply(Behavior.AuditModify)]
+public class UpdateBooking : IPatchDb<Booking>, IReturn<IdResponse>
+{
+    public int Id { get; set; }
+    public string? Name { get; set; }
+    public RoomType? RoomType { get; set; }
+    [ValidateGreaterThan(0)]
+    public int? RoomNumber { get; set; }
+    [ValidateGreaterThan(0)]
+    public decimal? Cost { get; set; }
+    public DateTime? BookingStartDate { get; set; }
+    public DateTime? BookingEndDate { get; set; }
+    [Input(Type = "textarea")]
+    public string? Notes { get; set; }
+    public string? CouponId { get; set; }
+    public bool? Cancelled { get; set; }
+}
+
+[Tag("bookings"), Description("Delete a Booking")]
+[Route("/booking/{Id}", "DELETE")]
+[ValidateHasRole("Manager")]
+[AutoApply(Behavior.AuditSoftDelete)]
+public class DeleteBooking : IDeleteDb<Booking>, IReturnVoid
+{
+    public int Id { get; set; }
+}
+
+
+[Description("Discount Coupons")]
+[Icon(Svg = Icons.Coupon)]
+public class Coupon
+{
+    public string Id { get; set; } = default!;
+    public string Description { get; set; } = default!;
+    public int Discount { get; set; }
+    public DateTime ExpiryDate { get; set; }
+}
+
+[Tag("bookings"), Description("Find Coupons")]
+[Route("/coupons", "GET")]
+public class QueryCoupons : QueryDb<Coupon>
+{
+    public string Id { get; set; }
+}
+
+[Tag("bookings")]
+[Route("/coupons", "POST")]
+[ValidateHasRole("Employee")]
+public class CreateCoupon : ICreateDb<Coupon>, IReturn<IdResponse>
+{
+    [ValidateNotEmpty]
+    public string Description { get; set; } = default!;
+    [ValidateGreaterThan(0)]
+    public int Discount { get; set; }
+    [ValidateNotNull]
+    public DateTime ExpiryDate { get; set; }
+}
+
+[Tag("bookings")]
+[Route("/coupons/{Id}", "PATCH")]
+[ValidateHasRole("Employee")]
+public class UpdateCoupon : IPatchDb<Coupon>, IReturn<IdResponse>
+{
+    public string Id { get; set; }
+    [ValidateNotEmpty]
+    public string? Description { get; set; }
+    [ValidateNotNull, ValidateGreaterThan(0)]
+    public int? Discount { get; set; }
+    [ValidateNotNull]
+    public DateTime? ExpiryDate { get; set; }
+}
+
+[Tag("bookings"), Description("Delete a Coupon")]
+[Route("/coupons/{Id}", "DELETE")]
+[ValidateHasRole("Manager")]
+public class DeleteCoupon : IDeleteDb<Coupon>, IReturnVoid
+{
+    public string Id { get; set; }
+}
+
+public class AdminData : IGet, IReturn<AdminDataResponse> {}
+
+public class PageStats
+{
+    public string Label { get; set; }
+    public int Total { get; set; }
+}
+
+public class AdminDataResponse
+{
+    public List<PageStats> PageStats { get; set; }
+}
diff --git a/MyApp.ServiceModel/Emails.cs b/MyApp.ServiceModel/Emails.cs
new file mode 100644
index 0000000..140fcd5
--- /dev/null
+++ b/MyApp.ServiceModel/Emails.cs
@@ -0,0 +1,15 @@
+using ServiceStack;
+using ServiceStack.DataAnnotations;
+
+namespace MyApp.ServiceModel;
+
+[ExcludeMetadata]
+[Restrict(InternalOnly = true)]
+public class SendEmail : IReturn<EmptyResponse>
+{
+    public string To { get; set; }
+    public string? ToName { get; set; }
+    public string Subject { get; set; }
+    public string? BodyText { get; set; }
+    public string? BodyHtml { get; set; }
+}
diff --git a/MyApp.ServiceModel/Hello.cs b/MyApp.ServiceModel/Hello.cs
new file mode 100644
index 0000000..5b0a24c
--- /dev/null
+++ b/MyApp.ServiceModel/Hello.cs
@@ -0,0 +1,14 @@
+using ServiceStack;
+
+namespace MyApp.ServiceModel;
+
+[Route("/hello/{Name}")]
+public class Hello : IGet, IReturn<HelloResponse>
+{
+    public string? Name { get; set; }
+}
+
+public class HelloResponse
+{
+    public required string Result { get; set; }
+}
\ No newline at end of file
diff --git a/MyApp.ServiceModel/Icons.cs b/MyApp.ServiceModel/Icons.cs
new file mode 100644
index 0000000..e01cbeb
--- /dev/null
+++ b/MyApp.ServiceModel/Icons.cs
@@ -0,0 +1,8 @@
+namespace MyApp.ServiceModel;
+
+public static class Icons
+{
+    public const string Dashboard = "<svg fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' aria-hidden='true'><path stroke-linecap='round' stroke-linejoin='round' d='M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25' /></svg>";
+    public const string Booking = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M16 10H8c-.55 0-1 .45-1 1s.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1zm3-7h-1V2c0-.55-.45-1-1-1s-1 .45-1 1v1H8V2c0-.55-.45-1-1-1s-1 .45-1 1v1H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V8h14v10c0 .55-.45 1-1 1zm-5-5H8c-.55 0-1 .45-1 1s.45 1 1 1h5c.55 0 1-.45 1-1s-.45-1-1-1z'/></svg>";
+    public const string Coupon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M2 9.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v5.5a2.5 2.5 0 1 0 0 5V20a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-5.5a2.5 2.5 0 1 0 0-5zm2-1.532a4.5 4.5 0 0 1 0 8.064V19h16v-2.968a4.5 4.5 0 0 1 0-8.064V5H4v2.968zM9 9h6v2H9V9zm0 4h6v2H9v-2z' /></svg>";
+}
\ No newline at end of file
diff --git a/MyApp.ServiceModel/MyApp.ServiceModel.csproj b/MyApp.ServiceModel/MyApp.ServiceModel.csproj
new file mode 100644
index 0000000..eeead11
--- /dev/null
+++ b/MyApp.ServiceModel/MyApp.ServiceModel.csproj
@@ -0,0 +1,17 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+    <PropertyGroup>
+        <TargetFramework>net8.0</TargetFramework>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <Nullable>enable</Nullable>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <PackageReference Include="ServiceStack.Interfaces" Version="8.*" />
+    </ItemGroup>
+
+    <ItemGroup>
+        <Folder Include="Types\" />
+    </ItemGroup>
+
+</Project>
diff --git a/MyApp.ServiceModel/Roles.cs b/MyApp.ServiceModel/Roles.cs
new file mode 100644
index 0000000..a4cea2a
--- /dev/null
+++ b/MyApp.ServiceModel/Roles.cs
@@ -0,0 +1,8 @@
+namespace MyApp.ServiceModel;
+
+public class Roles
+{
+    public const string Admin = nameof(Admin);
+    public const string Manager = nameof(Manager);
+    public const string Employee = nameof(Employee);
+}
diff --git a/MyApp.ServiceModel/Types/README.md b/MyApp.ServiceModel/Types/README.md
new file mode 100644
index 0000000..e3d08e8
--- /dev/null
+++ b/MyApp.ServiceModel/Types/README.md
@@ -0,0 +1 @@
+As part of our [Physical Project Structure](https://docs.servicestack.net/physical-project-structure) convention we recommend maintaining any shared non Request/Response DTOs in the `ServiceModel.Types` namespace.
\ No newline at end of file
diff --git a/MyApp.Tests/IntegrationTest.cs b/MyApp.Tests/IntegrationTest.cs
new file mode 100644
index 0000000..a43f734
--- /dev/null
+++ b/MyApp.Tests/IntegrationTest.cs
@@ -0,0 +1,44 @@
+using Funq;
+using ServiceStack;
+using NUnit.Framework;
+using MyApp.ServiceInterface;
+using MyApp.ServiceModel;
+
+namespace MyApp.Tests;
+
+public class IntegrationTest
+{
+    const string BaseUri = "http://localhost:2000/";
+    private readonly ServiceStackHost appHost;
+
+    class AppHost : AppSelfHostBase
+    {
+        public AppHost() : base(nameof(IntegrationTest), typeof(MyServices).Assembly) { }
+
+        public override void Configure(Container container)
+        {
+        }
+    }
+
+    public IntegrationTest()
+    {
+        appHost = new AppHost()
+            .Init()
+            .Start(BaseUri);
+    }
+
+    [OneTimeTearDown]
+    public void OneTimeTearDown() => appHost.Dispose();
+
+    public IServiceClient CreateClient() => new JsonServiceClient(BaseUri);
+
+    [Test]
+    public void Can_call_Hello_Service()
+    {
+        var client = CreateClient();
+
+        var response = client.Get(new Hello { Name = "World" });
+
+        Assert.That(response.Result, Is.EqualTo("Hello, World!"));
+    }
+}
\ No newline at end of file
diff --git a/MyApp.Tests/MigrationTasks.cs b/MyApp.Tests/MigrationTasks.cs
new file mode 100644
index 0000000..7e2da84
--- /dev/null
+++ b/MyApp.Tests/MigrationTasks.cs
@@ -0,0 +1,45 @@
+using NUnit.Framework;
+using ServiceStack.OrmLite;
+using MyApp.Migrations;
+using ServiceStack;
+using ServiceStack.Data;
+
+namespace MyApp.Tests;
+
+[TestFixture, Explicit, Category(nameof(MigrationTasks))]
+public class MigrationTasks
+{
+    IDbConnectionFactory ResolveDbFactory() => new ConfigureDb().ConfigureAndResolve<IDbConnectionFactory>();
+    Migrator CreateMigrator() => new(ResolveDbFactory(), typeof(Migration1000).Assembly); 
+    
+    [Test]
+    public void Migrate()
+    {
+        var migrator = CreateMigrator();
+        var result = migrator.Run();
+        Assert.That(result.Succeeded);
+    }
+
+    [Test]
+    public void Revert_All()
+    {
+        var migrator = CreateMigrator();
+        var result = migrator.Revert(Migrator.All);
+        Assert.That(result.Succeeded);
+    }
+
+    [Test]
+    public void Revert_Last()
+    {
+        var migrator = CreateMigrator();
+        var result = migrator.Revert(Migrator.Last);
+        Assert.That(result.Succeeded);
+    }
+
+    [Test]
+    public void Rerun_Last_Migration()
+    {
+        Revert_Last();
+        Migrate();
+    }
+}
\ No newline at end of file
diff --git a/MyApp.Tests/MyApp.Tests.csproj b/MyApp.Tests/MyApp.Tests.csproj
new file mode 100644
index 0000000..2985c23
--- /dev/null
+++ b/MyApp.Tests/MyApp.Tests.csproj
@@ -0,0 +1,23 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+    <PropertyGroup>
+        <TargetFramework>net8.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <DebugType>portable</DebugType>
+        <OutputType>Library</OutputType>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <ProjectReference Include="..\MyApp.ServiceInterface\MyApp.ServiceInterface.csproj" />
+        <ProjectReference Include="..\MyApp.ServiceModel\MyApp.ServiceModel.csproj" />
+        <ProjectReference Include="..\MyApp\MyApp.csproj" />
+
+        <PackageReference Include="NUnit" Version="3.*" />
+        <PackageReference Include="NUnit3TestAdapter" Version="4.*" />
+        <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.*" />
+        <PackageReference Include="ServiceStack" Version="8.*" />
+        <PackageReference Include="ServiceStack.Kestrel" Version="8.*" />
+    </ItemGroup>
+
+</Project>
diff --git a/MyApp.Tests/UnitTest.cs b/MyApp.Tests/UnitTest.cs
new file mode 100644
index 0000000..6761174
--- /dev/null
+++ b/MyApp.Tests/UnitTest.cs
@@ -0,0 +1,31 @@
+using NUnit.Framework;
+using ServiceStack;
+using ServiceStack.Testing;
+using MyApp.ServiceInterface;
+using MyApp.ServiceModel;
+
+namespace MyApp.Tests;
+
+public class UnitTest
+{
+    private readonly ServiceStackHost appHost;
+
+    public UnitTest()
+    {
+        appHost = new BasicAppHost().Init();
+        appHost.Container.AddTransient<MyServices>();
+    }
+
+    [OneTimeTearDown]
+    public void OneTimeTearDown() => appHost.Dispose();
+
+    [Test]
+    public void Can_call_MyServices()
+    {
+        var service = appHost.Container.Resolve<MyServices>();
+
+        var response = (HelloResponse)service.Any(new Hello { Name = "World" });
+
+        Assert.That(response.Result, Is.EqualTo("Hello, World!"));
+    }
+}
\ No newline at end of file
diff --git a/MyApp.sln b/MyApp.sln
new file mode 100644
index 0000000..011321d
--- /dev/null
+++ b/MyApp.sln
@@ -0,0 +1,43 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.8.34205.153
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MyApp", "MyApp\MyApp.csproj", "{5F817400-1A3A-48DF-98A6-E7E5A3DC762F}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MyApp.ServiceInterface", "MyApp.ServiceInterface\MyApp.ServiceInterface.csproj", "{5B8FFF01-1E0B-477D-9D7F-93016C128B23}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MyApp.ServiceModel", "MyApp.ServiceModel\MyApp.ServiceModel.csproj", "{0127B6CA-1B79-46A6-8307-B36836D107F0}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MyApp.Tests", "MyApp.Tests\MyApp.Tests.csproj", "{455EC1EF-134F-4CD4-9C78-E813E4E6D8F6}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{5F817400-1A3A-48DF-98A6-E7E5A3DC762F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{5F817400-1A3A-48DF-98A6-E7E5A3DC762F}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{5F817400-1A3A-48DF-98A6-E7E5A3DC762F}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{5F817400-1A3A-48DF-98A6-E7E5A3DC762F}.Release|Any CPU.Build.0 = Release|Any CPU
+		{5B8FFF01-1E0B-477D-9D7F-93016C128B23}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{5B8FFF01-1E0B-477D-9D7F-93016C128B23}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{5B8FFF01-1E0B-477D-9D7F-93016C128B23}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{5B8FFF01-1E0B-477D-9D7F-93016C128B23}.Release|Any CPU.Build.0 = Release|Any CPU
+		{0127B6CA-1B79-46A6-8307-B36836D107F0}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{0127B6CA-1B79-46A6-8307-B36836D107F0}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{0127B6CA-1B79-46A6-8307-B36836D107F0}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{0127B6CA-1B79-46A6-8307-B36836D107F0}.Release|Any CPU.Build.0 = Release|Any CPU
+		{455EC1EF-134F-4CD4-9C78-E813E4E6D8F6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{455EC1EF-134F-4CD4-9C78-E813E4E6D8F6}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{455EC1EF-134F-4CD4-9C78-E813E4E6D8F6}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{455EC1EF-134F-4CD4-9C78-E813E4E6D8F6}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {02854F2A-8EF4-468E-80A3-CD64BBAF5D15}
+	EndGlobalSection
+EndGlobal
diff --git a/MyApp/AppComponentBase.cs b/MyApp/AppComponentBase.cs
new file mode 100644
index 0000000..7c76bfe
--- /dev/null
+++ b/MyApp/AppComponentBase.cs
@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Components;
+using ServiceStack;
+using ServiceStack.Blazor;
+using ServiceStack.Text;
+
+namespace MyApp;
+
+/// <summary>
+/// For Pages and Components that make use of ServiceStack functionality, e.g. Client
+/// </summary>
+public abstract class AppComponentBase : ServiceStack.Blazor.BlazorComponentBase, IHasJsonApiClient
+{
+}
+
+/// <summary>
+/// For Pages and Components requiring Authentication
+/// </summary>
+public abstract class AppAuthComponentBase : AuthBlazorComponentBase
+{
+}
diff --git a/MyApp/App_Data/README.md b/MyApp/App_Data/README.md
new file mode 100644
index 0000000..5bebc95
--- /dev/null
+++ b/MyApp/App_Data/README.md
@@ -0,0 +1,11 @@
+## App Writable Folder
+
+This directory is designated for:
+
+- **Embedded Databases**: Such as SQLite.
+- **Writable Files**: Files that the application might need to modify during its operation.
+
+For applications running in **Docker**, it's a common practice to mount this directory as an external volume. This ensures:
+
+- **Data Persistence**: App data is preserved across deployments.
+- **Easy Replication**: Facilitates seamless data replication for backup or migration purposes.
diff --git a/MyApp/Components/Account/IdentityComponentsEndpointRouteBuilderExtensions.cs b/MyApp/Components/Account/IdentityComponentsEndpointRouteBuilderExtensions.cs
new file mode 100644
index 0000000..690bc25
--- /dev/null
+++ b/MyApp/Components/Account/IdentityComponentsEndpointRouteBuilderExtensions.cs
@@ -0,0 +1,112 @@
+using Microsoft.AspNetCore.Authentication;
+using Microsoft.AspNetCore.Components.Authorization;
+using Microsoft.AspNetCore.Http.Extensions;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Primitives;
+using MyApp.Components.Account.Pages;
+using MyApp.Components.Account.Pages.Manage;
+using MyApp.Data;
+using System.Security.Claims;
+using System.Text.Json;
+
+namespace Microsoft.AspNetCore.Routing;
+
+internal static class IdentityComponentsEndpointRouteBuilderExtensions
+{
+    // These endpoints are required by the Identity Razor components defined in the /Components/Account/Pages directory of this project.
+    public static IEndpointConventionBuilder MapAdditionalIdentityEndpoints(this IEndpointRouteBuilder endpoints)
+    {
+        ArgumentNullException.ThrowIfNull(endpoints);
+
+        var accountGroup = endpoints.MapGroup("/Account");
+
+        accountGroup.MapPost("/PerformExternalLogin", (
+            HttpContext context,
+            [FromServices] SignInManager<ApplicationUser> signInManager,
+            [FromForm] string provider,
+            [FromForm] string returnUrl) =>
+        {
+            IEnumerable<KeyValuePair<string, StringValues>> query = [
+                new("ReturnUrl", returnUrl),
+                new("Action", ExternalLogin.LoginCallbackAction)];
+
+            var redirectUrl = UriHelper.BuildRelative(
+                context.Request.PathBase,
+                "/Account/ExternalLogin",
+                QueryString.Create(query));
+
+            var properties = signInManager.ConfigureExternalAuthenticationProperties(provider, redirectUrl);
+            return TypedResults.Challenge(properties, [provider]);
+        });
+
+        accountGroup.MapPost("/Logout", async (
+            ClaimsPrincipal user,
+            SignInManager<ApplicationUser> signInManager,
+            [FromForm] string returnUrl) =>
+        {
+            await signInManager.SignOutAsync();
+            return TypedResults.LocalRedirect($"~/{returnUrl}");
+        });
+
+        var manageGroup = accountGroup.MapGroup("/Manage").RequireAuthorization();
+
+        manageGroup.MapPost("/LinkExternalLogin", async (
+            HttpContext context,
+            [FromServices] SignInManager<ApplicationUser> signInManager,
+            [FromForm] string provider) =>
+        {
+            // Clear the existing external cookie to ensure a clean login process
+            await context.SignOutAsync(IdentityConstants.ExternalScheme);
+
+            var redirectUrl = UriHelper.BuildRelative(
+                context.Request.PathBase,
+                "/Account/Manage/ExternalLogins",
+                QueryString.Create("Action", ExternalLogins.LinkLoginCallbackAction));
+
+            var properties = signInManager.ConfigureExternalAuthenticationProperties(provider, redirectUrl, signInManager.UserManager.GetUserId(context.User));
+            return TypedResults.Challenge(properties, [provider]);
+        });
+
+        var loggerFactory = endpoints.ServiceProvider.GetRequiredService<ILoggerFactory>();
+        var downloadLogger = loggerFactory.CreateLogger("DownloadPersonalData");
+
+        manageGroup.MapPost("/DownloadPersonalData", async (
+            HttpContext context,
+            [FromServices] UserManager<ApplicationUser> userManager,
+            [FromServices] AuthenticationStateProvider authenticationStateProvider) =>
+        {
+            var user = await userManager.GetUserAsync(context.User);
+            if (user is null)
+            {
+                return Results.NotFound($"Unable to load user with ID '{userManager.GetUserId(context.User)}'.");
+            }
+
+            var userId = await userManager.GetUserIdAsync(user);
+            downloadLogger.LogInformation("User with ID '{UserId}' asked for their personal data.", userId);
+
+            // Only include personal data for download
+            var personalData = new Dictionary<string, string>();
+            var personalDataProps = typeof(ApplicationUser).GetProperties().Where(
+                prop => Attribute.IsDefined(prop, typeof(PersonalDataAttribute)));
+            foreach (var p in personalDataProps)
+            {
+                personalData.Add(p.Name, p.GetValue(user)?.ToString() ?? "null");
+            }
+
+            var logins = await userManager.GetLoginsAsync(user);
+            foreach (var l in logins)
+            {
+                personalData.Add($"{l.LoginProvider} external login provider key", l.ProviderKey);
+            }
+
+            personalData.Add("Authenticator Key", (await userManager.GetAuthenticatorKeyAsync(user))!);
+            var fileBytes = JsonSerializer.SerializeToUtf8Bytes(personalData);
+
+            context.Response.Headers.TryAdd("Content-Disposition", "attachment; filename=PersonalData.json");
+            return TypedResults.File(fileBytes, contentType: "application/json", fileDownloadName: "PersonalData.json");
+        });
+
+        return accountGroup;
+    }
+}
diff --git a/MyApp/Components/Account/IdentityNoOpEmailSender.cs b/MyApp/Components/Account/IdentityNoOpEmailSender.cs
new file mode 100644
index 0000000..8d0b538
--- /dev/null
+++ b/MyApp/Components/Account/IdentityNoOpEmailSender.cs
@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.Identity.UI.Services;
+using MyApp.Data;
+
+namespace MyApp.Components.Account;
+
+// Remove the "else if (EmailSender is IdentityNoOpEmailSender)" block from RegisterConfirmation.razor after updating with a real implementation.
+internal sealed class IdentityNoOpEmailSender : IEmailSender<ApplicationUser>
+{
+    private readonly IEmailSender emailSender = new NoOpEmailSender();
+
+    public Task SendConfirmationLinkAsync(ApplicationUser user, string email, string confirmationLink) =>
+        emailSender.SendEmailAsync(email, "Confirm your email", $"Please confirm your account by <a href='{confirmationLink}'>clicking here</a>.");
+
+    public Task SendPasswordResetLinkAsync(ApplicationUser user, string email, string resetLink) =>
+        emailSender.SendEmailAsync(email, "Reset your password", $"Please reset your password by <a href='{resetLink}'>clicking here</a>.");
+
+    public Task SendPasswordResetCodeAsync(ApplicationUser user, string email, string resetCode) =>
+        emailSender.SendEmailAsync(email, "Reset your password", $"Please reset your password using the following code: {resetCode}");
+}
diff --git a/MyApp/Components/Account/IdentityRedirectManager.cs b/MyApp/Components/Account/IdentityRedirectManager.cs
new file mode 100644
index 0000000..34a5e1d
--- /dev/null
+++ b/MyApp/Components/Account/IdentityRedirectManager.cs
@@ -0,0 +1,58 @@
+using Microsoft.AspNetCore.Components;
+using System.Diagnostics.CodeAnalysis;
+
+namespace MyApp.Components.Account;
+
+internal sealed class IdentityRedirectManager(NavigationManager navigationManager)
+{
+    public const string StatusCookieName = "Identity.StatusMessage";
+
+    private static readonly CookieBuilder StatusCookieBuilder = new()
+    {
+        SameSite = SameSiteMode.Strict,
+        HttpOnly = true,
+        IsEssential = true,
+        MaxAge = TimeSpan.FromSeconds(5),
+    };
+
+    [DoesNotReturn]
+    public void RedirectTo(string? uri)
+    {
+        uri ??= "";
+
+        // Prevent open redirects.
+        if (!Uri.IsWellFormedUriString(uri, UriKind.Relative))
+        {
+            uri = navigationManager.ToBaseRelativePath(uri);
+        }
+
+        // During static rendering, NavigateTo throws a NavigationException which is handled by the framework as a redirect.
+        // So as long as this is called from a statically rendered Identity component, the InvalidOperationException is never thrown.
+        navigationManager.NavigateTo(uri);
+        throw new InvalidOperationException($"{nameof(IdentityRedirectManager)} can only be used during static rendering.");
+    }
+
+    [DoesNotReturn]
+    public void RedirectTo(string uri, Dictionary<string, object?> queryParameters)
+    {
+        var uriWithoutQuery = navigationManager.ToAbsoluteUri(uri).GetLeftPart(UriPartial.Path);
+        var newUri = navigationManager.GetUriWithQueryParameters(uriWithoutQuery, queryParameters);
+        RedirectTo(newUri);
+    }
+
+    [DoesNotReturn]
+    public void RedirectToWithStatus(string uri, string message, HttpContext context)
+    {
+        context.Response.Cookies.Append(StatusCookieName, message, StatusCookieBuilder.Build(context));
+        RedirectTo(uri);
+    }
+
+    private string CurrentPath => navigationManager.ToAbsoluteUri(navigationManager.Uri).GetLeftPart(UriPartial.Path);
+
+    [DoesNotReturn]
+    public void RedirectToCurrentPage() => RedirectTo(CurrentPath);
+
+    [DoesNotReturn]
+    public void RedirectToCurrentPageWithStatus(string message, HttpContext context)
+        => RedirectToWithStatus(CurrentPath, message, context);
+}
diff --git a/MyApp/Components/Account/IdentityRevalidatingAuthenticationStateProvider.cs b/MyApp/Components/Account/IdentityRevalidatingAuthenticationStateProvider.cs
new file mode 100644
index 0000000..b0d1814
--- /dev/null
+++ b/MyApp/Components/Account/IdentityRevalidatingAuthenticationStateProvider.cs
@@ -0,0 +1,47 @@
+using Microsoft.AspNetCore.Components.Authorization;
+using Microsoft.AspNetCore.Components.Server;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.Extensions.Options;
+using MyApp.Data;
+using System.Security.Claims;
+
+namespace MyApp.Components.Account;
+
+// This is a server-side AuthenticationStateProvider that revalidates the security stamp for the connected user
+// every 30 minutes an interactive circuit is connected.
+internal sealed class IdentityRevalidatingAuthenticationStateProvider(
+        ILoggerFactory loggerFactory,
+        IServiceScopeFactory scopeFactory,
+        IOptions<IdentityOptions> options)
+    : RevalidatingServerAuthenticationStateProvider(loggerFactory)
+{
+    protected override TimeSpan RevalidationInterval => TimeSpan.FromMinutes(30);
+
+    protected override async Task<bool> ValidateAuthenticationStateAsync(
+        AuthenticationState authenticationState, CancellationToken cancellationToken)
+    {
+        // Get the user manager from a new scope to ensure it fetches fresh data
+        await using var scope = scopeFactory.CreateAsyncScope();
+        var userManager = scope.ServiceProvider.GetRequiredService<UserManager<ApplicationUser>>();
+        return await ValidateSecurityStampAsync(userManager, authenticationState.User);
+    }
+
+    private async Task<bool> ValidateSecurityStampAsync(UserManager<ApplicationUser> userManager, ClaimsPrincipal principal)
+    {
+        var user = await userManager.GetUserAsync(principal);
+        if (user is null)
+        {
+            return false;
+        }
+        else if (!userManager.SupportsUserSecurityStamp)
+        {
+            return true;
+        }
+        else
+        {
+            var principalStamp = principal.FindFirstValue(options.Value.ClaimsIdentity.SecurityStampClaimType);
+            var userStamp = await userManager.GetSecurityStampAsync(user);
+            return principalStamp == userStamp;
+        }
+    }
+}
diff --git a/MyApp/Components/Account/IdentityUserAccessor.cs b/MyApp/Components/Account/IdentityUserAccessor.cs
new file mode 100644
index 0000000..3107629
--- /dev/null
+++ b/MyApp/Components/Account/IdentityUserAccessor.cs
@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Identity;
+using MyApp.Data;
+
+namespace MyApp.Components.Account;
+
+internal sealed class IdentityUserAccessor(UserManager<ApplicationUser> userManager, IdentityRedirectManager redirectManager)
+{
+    public async Task<ApplicationUser> GetRequiredUserAsync(HttpContext context)
+    {
+        var user = await userManager.GetUserAsync(context.User);
+
+        if (user is null)
+        {
+            redirectManager.RedirectToWithStatus("Account/InvalidUser", $"Error: Unable to load user with ID '{userManager.GetUserId(context.User)}'.", context);
+        }
+
+        return user;
+    }
+}
diff --git a/MyApp/Components/Account/Pages/AccessDenied.razor b/MyApp/Components/Account/Pages/AccessDenied.razor
new file mode 100644
index 0000000..3300471
--- /dev/null
+++ b/MyApp/Components/Account/Pages/AccessDenied.razor
@@ -0,0 +1,16 @@
+@page "/Account/AccessDenied"
+
+
+<PageTitle>Access Denied</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <h1 class="text-3xl font-bold tracking-tight sm:text-4xl text-danger">Access Denied</h1>
+
+    <p class="my-4 text-danger">
+        You do not have access to this resource.
+    </p>
+</div>
+
+@code {
+    [Parameter] public string ReturnUrl { get; set; }
+}
\ No newline at end of file
diff --git a/MyApp/Components/Account/Pages/ConfirmEmail.razor b/MyApp/Components/Account/Pages/ConfirmEmail.razor
new file mode 100644
index 0000000..7b3df04
--- /dev/null
+++ b/MyApp/Components/Account/Pages/ConfirmEmail.razor
@@ -0,0 +1,51 @@
+@page "/Account/ConfirmEmail"
+
+@using System.Text
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.WebUtilities
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Confirm email</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Confirm email</Heading1>
+
+    <StatusMessage Message="@statusMessage" />
+</div>
+
+@code {
+    private string? statusMessage;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromQuery]
+    private string? UserId { get; set; }
+
+    [SupplyParameterFromQuery]
+    private string? Code { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (UserId is null || Code is null)
+        {
+            RedirectManager.RedirectTo("");
+        }
+
+        var user = await UserManager.FindByIdAsync(UserId);
+        if (user is null)
+        {
+            HttpContext.Response.StatusCode = StatusCodes.Status404NotFound;
+            statusMessage = $"Error loading user with ID {UserId}";
+        }
+        else
+        {
+            var code = Encoding.UTF8.GetString(WebEncoders.Base64UrlDecode(Code));
+            var result = await UserManager.ConfirmEmailAsync(user, code);
+            statusMessage = result.Succeeded ? "Thank you for confirming your email." : "Error confirming your email.";
+        }
+    }
+}
diff --git a/MyApp/Components/Account/Pages/ConfirmEmailChange.razor b/MyApp/Components/Account/Pages/ConfirmEmailChange.razor
new file mode 100644
index 0000000..7820f37
--- /dev/null
+++ b/MyApp/Components/Account/Pages/ConfirmEmailChange.razor
@@ -0,0 +1,70 @@
+@page "/Account/ConfirmEmailChange"
+
+@using System.Text
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.WebUtilities
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject SignInManager<ApplicationUser> SignInManager
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Confirm email change</PageTitle>
+
+<Heading1>Confirm email change</Heading1>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <StatusMessage Message="@message" />
+</div>
+
+@code {
+    private string? message;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromQuery]
+    private string? UserId { get; set; }
+
+    [SupplyParameterFromQuery]
+    private string? Email { get; set; }
+
+    [SupplyParameterFromQuery]
+    private string? Code { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (UserId is null || Email is null || Code is null)
+        {
+            RedirectManager.RedirectToWithStatus(
+                "Account/Login", "Error: Invalid email change confirmation link.", HttpContext);
+        }
+
+        var user = await UserManager.FindByIdAsync(UserId);
+        if (user is null)
+        {
+            message = "Unable to find user with Id '{userId}'";
+            return;
+        }
+
+        var code = Encoding.UTF8.GetString(WebEncoders.Base64UrlDecode(Code));
+        var result = await UserManager.ChangeEmailAsync(user, Email, code);
+        if (!result.Succeeded)
+        {
+            message = "Error changing email.";
+            return;
+        }
+
+        // In our UI email and user name are one and the same, so when we update the email
+        // we need to update the user name.
+        var setUserNameResult = await UserManager.SetUserNameAsync(user, Email);
+        if (!setUserNameResult.Succeeded)
+        {
+            message = "Error changing user name.";
+            return;
+        }
+
+        await SignInManager.RefreshSignInAsync(user);
+        message = "Thank you for confirming your email change.";
+    }
+}
diff --git a/MyApp/Components/Account/Pages/ExternalLogin.razor b/MyApp/Components/Account/Pages/ExternalLogin.razor
new file mode 100644
index 0000000..509f614
--- /dev/null
+++ b/MyApp/Components/Account/Pages/ExternalLogin.razor
@@ -0,0 +1,203 @@
+@page "/Account/ExternalLogin"
+
+@using System.ComponentModel.DataAnnotations
+@using System.Security.Claims
+@using System.Text
+@using System.Text.Encodings.Web
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.WebUtilities
+@using MyApp.Data
+
+@inject SignInManager<ApplicationUser> SignInManager
+@inject UserManager<ApplicationUser> UserManager
+@inject IUserStore<ApplicationUser> UserStore
+@inject IEmailSender<ApplicationUser> EmailSender
+@inject NavigationManager NavigationManager
+@inject IdentityRedirectManager RedirectManager
+@inject ILogger<ExternalLogin> Logger
+
+<PageTitle>Register</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <StatusMessage class="mb-3" Message="@message" />
+    <Heading1>Register</Heading1>
+    <Heading2 id="external-login-title">Associate your @ProviderDisplayName account.</Heading2>
+
+    <Alert id="external-login-description" Type="AlertType.Information" class="my-4">
+        You've successfully authenticated with <strong>@ProviderDisplayName</strong>.
+        Please enter an email address for this site below and click the Register button to finish
+        logging in.
+    </Alert>
+
+    <div class="mt-3 shadow overflow-hidden sm:rounded-md">
+        <div class="px-4 bg-white dark:bg-black sm:p-6">
+            <EditForm id="confirmation-form" Model="Input" OnValidSubmit="OnValidSubmitAsync" FormName="confirmation" method="post">
+                <DataAnnotationsValidator />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+
+                <div class="flex flex-col gap-4">
+                    <div>
+                        <label for="email" class="@TextInput.LabelClasses">Email</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="email" placeholder="Please enter your email." />
+                        </div>
+                        <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <PrimaryButton type="submit">Register</PrimaryButton>
+                    </div>
+                </div>
+            </EditForm>
+        </div>
+    </div>
+</div>
+
+@code {
+    public const string LoginCallbackAction = "LoginCallback";
+
+    private string? message;
+    private ExternalLoginInfo externalLoginInfo = default!;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    [SupplyParameterFromQuery]
+    private string? RemoteError { get; set; }
+
+    [SupplyParameterFromQuery]
+    private string? ReturnUrl { get; set; }
+
+    [SupplyParameterFromQuery]
+    private string? Action { get; set; }
+
+    private string? ProviderDisplayName => externalLoginInfo.ProviderDisplayName;
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (RemoteError is not null)
+        {
+            RedirectManager.RedirectToWithStatus("Account/Login", $"Error from external provider: {RemoteError}", HttpContext);
+        }
+
+        var info = await SignInManager.GetExternalLoginInfoAsync();
+        if (info is null)
+        {
+            RedirectManager.RedirectToWithStatus("Account/Login", "Error loading external login information.", HttpContext);
+        }
+
+        externalLoginInfo = info;
+
+        if (HttpMethods.IsGet(HttpContext.Request.Method))
+        {
+            if (Action == LoginCallbackAction)
+            {
+                await OnLoginCallbackAsync();
+                return;
+            }
+
+            // We should only reach this page via the login callback, so redirect back to
+            // the login page if we get here some other way.
+            RedirectManager.RedirectTo("Account/Login");
+        }
+    }
+
+    private async Task OnLoginCallbackAsync()
+    {
+        // Sign in the user with this external login provider if the user already has a login.
+        var result = await SignInManager.ExternalLoginSignInAsync(
+            externalLoginInfo.LoginProvider,
+            externalLoginInfo.ProviderKey,
+            isPersistent: false,
+            bypassTwoFactor: true);
+
+        if (result.Succeeded)
+        {
+            Logger.LogInformation(
+                "{Name} logged in with {LoginProvider} provider.",
+                externalLoginInfo.Principal.Identity?.Name,
+                externalLoginInfo.LoginProvider);
+            RedirectManager.RedirectTo(ReturnUrl);
+        }
+        else if (result.IsLockedOut)
+        {
+            RedirectManager.RedirectTo("Account/Lockout");
+        }
+
+        // If the user does not have an account, then ask the user to create an account.
+        if (externalLoginInfo.Principal.HasClaim(c => c.Type == ClaimTypes.Email))
+        {
+            Input.Email = externalLoginInfo.Principal.FindFirstValue(ClaimTypes.Email) ?? "";
+        }
+    }
+
+    private async Task OnValidSubmitAsync()
+    {
+        var emailStore = GetEmailStore();
+        var user = CreateUser();
+
+        await UserStore.SetUserNameAsync(user, Input.Email, CancellationToken.None);
+        await emailStore.SetEmailAsync(user, Input.Email, CancellationToken.None);
+
+        var result = await UserManager.CreateAsync(user);
+        if (result.Succeeded)
+        {
+            result = await UserManager.AddLoginAsync(user, externalLoginInfo);
+            if (result.Succeeded)
+            {
+                Logger.LogInformation("User created an account using {Name} provider.", externalLoginInfo.LoginProvider);
+
+                var userId = await UserManager.GetUserIdAsync(user);
+                var code = await UserManager.GenerateEmailConfirmationTokenAsync(user);
+                code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
+
+                var callbackUrl = NavigationManager.GetUriWithQueryParameters(
+                    NavigationManager.ToAbsoluteUri("Account/ConfirmEmail").AbsoluteUri,
+                    new Dictionary<string, object?> { ["userId"] = userId, ["code"] = code });
+                await EmailSender.SendConfirmationLinkAsync(user, Input.Email, HtmlEncoder.Default.Encode(callbackUrl));
+
+                // If account confirmation is required, we need to show the link if we don't have a real email sender
+                if (UserManager.Options.SignIn.RequireConfirmedAccount)
+                {
+                    RedirectManager.RedirectTo("Account/RegisterConfirmation", new() { ["email"] = Input.Email });
+                }
+
+                await SignInManager.SignInAsync(user, isPersistent: false, externalLoginInfo.LoginProvider);
+                RedirectManager.RedirectTo(ReturnUrl);
+            }
+        }
+
+        message = $"Error: {string.Join(",", result.Errors.Select(error => error.Description))}";
+    }
+
+    private ApplicationUser CreateUser()
+    {
+        try
+        {
+            return Activator.CreateInstance<ApplicationUser>();
+        }
+        catch
+        {
+            throw new InvalidOperationException($"Can't create an instance of '{nameof(ApplicationUser)}'. " +
+                $"Ensure that '{nameof(ApplicationUser)}' is not an abstract class and has a parameterless constructor");
+        }
+    }
+
+    private IUserEmailStore<ApplicationUser> GetEmailStore()
+    {
+        if (!UserManager.SupportsUserEmail)
+        {
+            throw new NotSupportedException("The default UI requires a user store with email support.");
+        }
+        return (IUserEmailStore<ApplicationUser>)UserStore;
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [EmailAddress]
+        public string Email { get; set; } = "";
+    }
+}
diff --git a/MyApp/Components/Account/Pages/ForgotPassword.razor b/MyApp/Components/Account/Pages/ForgotPassword.razor
new file mode 100644
index 0000000..d84d780
--- /dev/null
+++ b/MyApp/Components/Account/Pages/ForgotPassword.razor
@@ -0,0 +1,71 @@
+@page "/Account/ForgotPassword"
+
+@using System.ComponentModel.DataAnnotations
+@using System.Text
+@using System.Text.Encodings.Web
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.WebUtilities
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject IEmailSender<ApplicationUser> EmailSender
+@inject NavigationManager NavigationManager
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Forgot your password?</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Forgot your password?</Heading1>
+    <Heading3>Enter your email.</Heading3>
+
+    <EditForm Model="Input" FormName="forgot-password" OnValidSubmit="OnValidSubmitAsync" method="post">
+        <DataAnnotationsValidator />
+        <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+        <div class="flex flex-col gap-y-4">
+            <div>
+                <label for="email" class="@TextInput.LabelClasses">Email</label>
+                <div class="mt-1 relative rounded-md shadow-sm">
+                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                </div>
+                <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
+            </div>
+            <div>
+                <PrimaryButton type="submit">Reset password</PrimaryButton>
+            </div>
+        </div>
+    </EditForm>
+</div>
+
+@code {
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    private async Task OnValidSubmitAsync()
+    {
+        var user = await UserManager.FindByEmailAsync(Input.Email);
+        if (user is null || !(await UserManager.IsEmailConfirmedAsync(user)))
+        {
+            // Don't reveal that the user does not exist or is not confirmed
+            RedirectManager.RedirectTo("Account/ForgotPasswordConfirmation");
+        }
+
+        // For more information on how to enable account confirmation and password reset please
+        // visit https://go.microsoft.com/fwlink/?LinkID=532713
+        var code = await UserManager.GeneratePasswordResetTokenAsync(user);
+        code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
+        var callbackUrl = NavigationManager.GetUriWithQueryParameters(
+            NavigationManager.ToAbsoluteUri("Account/ResetPassword").AbsoluteUri,
+            new Dictionary<string, object?> { ["code"] = code });
+
+        await EmailSender.SendPasswordResetLinkAsync(user, Input.Email, HtmlEncoder.Default.Encode(callbackUrl));
+
+        RedirectManager.RedirectTo("Account/ForgotPasswordConfirmation");
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [EmailAddress]
+        public string Email { get; set; } = "";
+    }
+}
diff --git a/MyApp/Components/Account/Pages/ForgotPasswordConfirmation.razor b/MyApp/Components/Account/Pages/ForgotPasswordConfirmation.razor
new file mode 100644
index 0000000..cbcf33e
--- /dev/null
+++ b/MyApp/Components/Account/Pages/ForgotPasswordConfirmation.razor
@@ -0,0 +1,12 @@
+@page "/Account/ForgotPasswordConfirmation"
+
+<PageTitle>Forgot password confirmation</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Forgot password confirmation</Heading1>
+
+    <p class="my-4">
+        Please check your email to reset your password.
+    </p>
+</div>
+
diff --git a/MyApp/Components/Account/Pages/InvalidPasswordReset.razor b/MyApp/Components/Account/Pages/InvalidPasswordReset.razor
new file mode 100644
index 0000000..a58f318
--- /dev/null
+++ b/MyApp/Components/Account/Pages/InvalidPasswordReset.razor
@@ -0,0 +1,13 @@
+@page "/Account/InvalidPasswordReset"
+
+<PageTitle>Invalid password reset</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+
+    <Heading1>Invalid password reset</Heading1>
+
+    <p class="my-4">
+        The password reset link is invalid.
+    </p>
+
+</div>
diff --git a/MyApp/Components/Account/Pages/InvalidUser.razor b/MyApp/Components/Account/Pages/InvalidUser.razor
new file mode 100644
index 0000000..9830212
--- /dev/null
+++ b/MyApp/Components/Account/Pages/InvalidUser.razor
@@ -0,0 +1,13 @@
+@page "/Account/InvalidUser"
+
+<PageTitle>Invalid user</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+
+    <Heading3>Invalid user</Heading3>
+
+    <div class="max-w-xl">
+        <StatusMessage />
+    </div>
+
+</div>
diff --git a/MyApp/Components/Account/Pages/Lockout.razor b/MyApp/Components/Account/Pages/Lockout.razor
new file mode 100644
index 0000000..1542240
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Lockout.razor
@@ -0,0 +1,13 @@
+@page "/Account/Lockout"
+
+<PageTitle>Locked out</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+
+    <header>
+        <Heading1>Locked out</Heading1>
+        <p class="my-4 text-danger">This account has been locked out, please try again later.</p>
+    </header>
+
+</div>
+
diff --git a/MyApp/Components/Account/Pages/Login.razor b/MyApp/Components/Account/Pages/Login.razor
new file mode 100644
index 0000000..826affb
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Login.razor
@@ -0,0 +1,137 @@
+@page "/Account/Login"
+
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Authentication
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject SignInManager<ApplicationUser> SignInManager
+@inject ILogger<Login> Logger
+@inject NavigationManager NavigationManager
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Log in</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <div class="max-w-xl">
+        <Heading1>Use a local account to log in.</Heading1>
+        <StatusMessage class="mb-3" Message="@errorMessage" />
+        <section class="mt-4 sm:shadow overflow-hidden sm:rounded-md">
+            <EditForm id="account" Model="Input" method="post" OnValidSubmit="LoginUser" FormName="login">
+                <div class="px-4 bg-white dark:bg-black sm:p-6">
+                    <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+                    <div class="flex flex-col gap-y-4">
+                        <div>
+                            <div>
+                                <label for="Email" class="@TextInput.LabelClasses">Email</label>
+                                <div class="mt-1 relative rounded-md shadow-sm">
+                                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <div>
+                                <label for="UserName" class="@TextInput.LabelClasses">Password</label>
+                                <div class="mt-1 relative rounded-md shadow-sm">
+                                    <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="current-password" aria-required="true" placeholder="password" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center">
+                                <InputCheckbox id="remember-me" @bind-Value="Input.RememberMe" class="@CheckboxInput.InputClasses" />
+                                <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-50 select-none">Remember Me</label>
+                            </div>
+                        </div>
+
+                        <div>
+                            <PrimaryButton id="login-submit" type="submit">Log in</PrimaryButton>
+                        </div>
+
+                        <div class="mt-8 text-sm">
+                            <p class="mb-3">
+                                <HyperLink class="font-semibold" id="forgot-password" href="Account/ForgotPassword">Forgot your password?</HyperLink>
+                            </p>
+                            <p class="mb-3">
+                                <HyperLink class="font-semibold" href="@(NavigationManager.GetUriWithQueryParameters("Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Register as a new user</HyperLink>
+                            </p>
+                            <p class="mb-3">
+                                <HyperLink class="font-semibold" id="resend-confirmation" href="Account/ResendEmailConfirmation">Resend email confirmation</HyperLink>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </EditForm>
+        </section>
+        <div class="mt-8">
+            <section>
+                <Heading3>Use another service to log in.</Heading3>
+                <ExternalLoginPicker />
+            </section>
+        </div>
+    </div>
+</div>
+
+@code {
+    private string? errorMessage;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    [SupplyParameterFromQuery]
+    private string? ReturnUrl { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (HttpMethods.IsGet(HttpContext.Request.Method))
+        {
+            // Clear the existing external cookie to ensure a clean login process
+            await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);
+        }
+    }
+
+    public async Task LoginUser()
+    {
+        // This doesn't count login failures towards account lockout
+        // To enable password failures to trigger account lockout, set lockoutOnFailure: true
+        var result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
+        if (result.Succeeded)
+        {
+            Logger.LogInformation("User logged in.");
+            RedirectManager.RedirectTo(ReturnUrl);
+        }
+        else if (result.RequiresTwoFactor)
+        {
+            RedirectManager.RedirectTo(
+                "Account/LoginWith2fa",
+                new() { ["returnUrl"] = ReturnUrl, ["rememberMe"] = Input.RememberMe });
+        }
+        else if (result.IsLockedOut)
+        {
+            Logger.LogWarning("User account locked out.");
+            RedirectManager.RedirectTo("Account/Lockout");
+        }
+        else
+        {
+            errorMessage = "Error: Invalid login attempt.";
+        }
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [EmailAddress]
+        public string Email { get; set; } = "";
+
+        [Required]
+        [DataType(DataType.Password)]
+        public string Password { get; set; } = "";
+
+        [Display(Name = "Remember me?")]
+        public bool RememberMe { get; set; }
+    }
+}
diff --git a/MyApp/Components/Account/Pages/LoginWith2fa.razor b/MyApp/Components/Account/Pages/LoginWith2fa.razor
new file mode 100644
index 0000000..172e9e5
--- /dev/null
+++ b/MyApp/Components/Account/Pages/LoginWith2fa.razor
@@ -0,0 +1,110 @@
+@page "/Account/LoginWith2fa"
+
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject SignInManager<ApplicationUser> SignInManager
+@inject UserManager<ApplicationUser> UserManager
+@inject IdentityRedirectManager RedirectManager
+@inject ILogger<LoginWith2fa> Logger
+
+<PageTitle>Two-factor authentication</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Two-factor authentication</Heading1>
+    <StatusMessage Message="@message" />
+    <p class="my-4">Your login is protected with an authenticator app. Enter your authenticator code below.</p>
+    <div class="mt-3 shadow overflow-hidden sm:rounded-md">
+        <div class="px-4 bg-white dark:bg-black sm:p-6">
+            <EditForm Model="Input" FormName="login-with-2fa" OnValidSubmit="OnValidSubmitAsync" method="post">
+                <input type="hidden" name="ReturnUrl" value="@ReturnUrl" />
+                <input type="hidden" name="RememberMe" value="@RememberMe" />
+                <DataAnnotationsValidator />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+
+                <div class="flex flex-col gap-y-4">
+                    <div>
+                        <label for="two-factor-code" class="@TextInput.LabelClasses">Authenticator code</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="two-factor-code" type="text" @bind-Value="Input.TwoFactorCode" class="@TextInput.InputClasses" autocomplete="off" />
+                        </div>
+                        <ValidationMessage For="() => Input.TwoFactorCode" class="mt-2 text-danger text-sm" />
+                    </div>
+
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <InputCheckbox id="remember-machine" @bind-Value="Input.RememberMachine" class="@CheckboxInput.InputClasses" />
+                            <label for="remember-machine" class="ml-2 block text-sm text-gray-900 dark:text-gray-50 select-none">
+                                Remember this machine
+                            </label>
+                        </div>
+                    </div>
+                    <div>
+                        <PrimaryButton type="submit">Log in</PrimaryButton>
+                    </div>
+                </div>
+            </EditForm>
+        </div>
+    </div>
+</div>
+<p class="mt-4">
+    Don't have access to your authenticator device? You can
+    <HyperLink class="font-semibold" id="recovery-code-login" href=@($"Account/LoginWithRecoveryCode?ReturnUrl={ReturnUrl}")>log in with a recovery code</HyperLink>.
+</p>
+
+@code {
+    private string? message;
+    private ApplicationUser user = default!;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    [SupplyParameterFromQuery]
+    private string? ReturnUrl { get; set; }
+
+    [SupplyParameterFromQuery]
+    private bool RememberMe { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        // Ensure the user has gone through the username & password screen first
+        user = await SignInManager.GetTwoFactorAuthenticationUserAsync() ??
+            throw new InvalidOperationException("Unable to load two-factor authentication user.");
+    }
+
+    private async Task OnValidSubmitAsync()
+    {
+        var authenticatorCode = Input.TwoFactorCode!.Replace(" ", string.Empty).Replace("-", string.Empty);
+        var result = await SignInManager.TwoFactorAuthenticatorSignInAsync(authenticatorCode, RememberMe, Input.RememberMachine);
+        var userId = await UserManager.GetUserIdAsync(user);
+
+        if (result.Succeeded)
+        {
+            Logger.LogInformation("User with ID '{UserId}' logged in with 2fa.", userId);
+            RedirectManager.RedirectTo(ReturnUrl);
+        }
+        else if (result.IsLockedOut)
+        {
+            Logger.LogWarning("User with ID '{UserId}' account locked out.", userId);
+            RedirectManager.RedirectTo("Account/Lockout");
+        }
+        else
+        {
+            Logger.LogWarning("Invalid authenticator code entered for user with ID '{UserId}'.", userId);
+            message = "Error: Invalid authenticator code.";
+        }
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [StringLength(7, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
+        [DataType(DataType.Text)]
+        [Display(Name = "Authenticator code")]
+        public string? TwoFactorCode { get; set; }
+
+        [Display(Name = "Remember this machine")]
+        public bool RememberMachine { get; set; }
+    }
+}
diff --git a/MyApp/Components/Account/Pages/LoginWithRecoveryCode.razor b/MyApp/Components/Account/Pages/LoginWithRecoveryCode.razor
new file mode 100644
index 0000000..875f3b0
--- /dev/null
+++ b/MyApp/Components/Account/Pages/LoginWithRecoveryCode.razor
@@ -0,0 +1,93 @@
+@page "/Account/LoginWithRecoveryCode"
+
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject SignInManager<ApplicationUser> SignInManager
+@inject UserManager<ApplicationUser> UserManager
+@inject IdentityRedirectManager RedirectManager
+@inject ILogger<LoginWithRecoveryCode> Logger
+
+<PageTitle>Recovery code verification</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Recovery code verification</Heading1>
+
+    <StatusMessage Message="@message" />
+    <p class="my-4">
+        You have requested to log in with a recovery code. This login will not be remembered until you provide
+        an authenticator app code at log in or disable 2FA and log in again.
+    </p>
+    <div class="mt-3 shadow overflow-hidden sm:rounded-md">
+        <div class="px-4 bg-white dark:bg-black sm:p-6">
+            <EditForm Model="Input" FormName="login-with-recovery-code" OnValidSubmit="OnValidSubmitAsync" method="post">
+                <DataAnnotationsValidator />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+                <div class="flex flex-col gap-y-4">
+                    <div>
+                        <label for="recovery-code" class="@TextInput.LabelClasses">Recovery Code</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="recovery-code" type="text" @bind-Value="Input.RecoveryCode" class="@TextInput.InputClasses" autocomplete="off" placeholder="RecoveryCode" />
+                        </div>
+                        <ValidationMessage For="() => Input.RecoveryCode" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <PrimaryButton type="submit">Log in</PrimaryButton>
+                    </div>
+                </div>
+            </EditForm>
+        </div>
+    </div>
+</div>
+
+@code {
+    private string? message;
+    private ApplicationUser user = default!;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    [SupplyParameterFromQuery]
+    private string? ReturnUrl { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        // Ensure the user has gone through the username & password screen first
+        user = await SignInManager.GetTwoFactorAuthenticationUserAsync() ??
+            throw new InvalidOperationException("Unable to load two-factor authentication user.");
+    }
+
+    private async Task OnValidSubmitAsync()
+    {
+        var recoveryCode = Input.RecoveryCode.Replace(" ", string.Empty);
+
+        var result = await SignInManager.TwoFactorRecoveryCodeSignInAsync(recoveryCode);
+
+        var userId = await UserManager.GetUserIdAsync(user);
+
+        if (result.Succeeded)
+        {
+            Logger.LogInformation("User with ID '{UserId}' logged in with a recovery code.", userId);
+            RedirectManager.RedirectTo(ReturnUrl);
+        }
+        else if (result.IsLockedOut)
+        {
+            Logger.LogWarning("User account locked out.");
+            RedirectManager.RedirectTo("Account/Lockout");
+        }
+        else
+        {
+            Logger.LogWarning("Invalid recovery code entered for user with ID '{UserId}' ", userId);
+            message = "Error: Invalid recovery code entered.";
+        }
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [DataType(DataType.Text)]
+        [Display(Name = "Recovery Code")]
+        public string RecoveryCode { get; set; } = "";
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Logout.razor b/MyApp/Components/Account/Pages/Logout.razor
new file mode 100644
index 0000000..5a6cdf3
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Logout.razor
@@ -0,0 +1,10 @@
+@page "/Account/Logout"
+
+<PageTitle>Signed out</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <div>
+        <Heading1>Signed out</Heading1>
+        <p class="my-4">You have successfully signed out.</p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/MyApp/Components/Account/Pages/Manage/ChangePassword.razor b/MyApp/Components/Account/Pages/Manage/ChangePassword.razor
new file mode 100644
index 0000000..6e82be8
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/ChangePassword.razor
@@ -0,0 +1,111 @@
+@page "/Account/Manage/ChangePassword"
+
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject SignInManager<ApplicationUser> SignInManager
+@inject IdentityUserAccessor UserAccessor
+@inject IdentityRedirectManager RedirectManager
+@inject ILogger<ChangePassword> Logger
+
+<PageTitle>Change password</PageTitle>
+
+<Heading3>Change password</Heading3>
+
+<div class="max-w-xl">
+    <StatusMessage Message="@message" />
+
+    <div class="mt-3 shadow overflow-hidden sm:rounded-md">
+        <div class="px-4 bg-white dark:bg-black sm:p-6">
+            <EditForm id="change-password-form" Model="Input" FormName="change-password" OnValidSubmit="OnValidSubmitAsync" method="post">
+                <DataAnnotationsValidator />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+
+                <div class="flex flex-col gap-4">
+                    <div>
+                        <label for="old-password" class="@TextInput.LabelClasses">Old password</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="old-password" type="password" @bind-Value="Input.OldPassword" class="@TextInput.InputClasses" autocomplete="current-password" aria-required="true" placeholder="Please enter your old password." />
+                        </div>
+                        <ValidationMessage For="() => Input.OldPassword" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <label for="new-password" class="@TextInput.LabelClasses">New password</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="new-password" type="password" @bind-Value="Input.NewPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please enter your new password." />
+                        </div>
+                        <ValidationMessage For="() => Input.NewPassword" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <label for="confirm-password" class="@TextInput.LabelClasses">Confirm password</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please confirm your new password." />
+                        </div>
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <PrimaryButton type="submit">Update password</PrimaryButton>
+                    </div>
+                </div>
+            </EditForm>
+        </div>
+    </div>
+</div>
+
+@code {
+    private string? message;
+    private ApplicationUser user = default!;
+    private bool hasPassword;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+        hasPassword = await UserManager.HasPasswordAsync(user);
+        if (!hasPassword)
+        {
+            RedirectManager.RedirectTo("Account/Manage/SetPassword");
+        }
+    }
+
+    private async Task OnValidSubmitAsync()
+    {
+        var changePasswordResult = await UserManager.ChangePasswordAsync(user, Input.OldPassword, Input.NewPassword);
+        if (!changePasswordResult.Succeeded)
+        {
+            message = $"Error: {string.Join(",", changePasswordResult.Errors.Select(error => error.Description))}";
+            return;
+        }
+
+        await SignInManager.RefreshSignInAsync(user);
+        Logger.LogInformation("User changed their password successfully.");
+
+        RedirectManager.RedirectToCurrentPageWithStatus("Your password has been changed", HttpContext);
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [DataType(DataType.Password)]
+        [Display(Name = "Current password")]
+        public string OldPassword { get; set; } = "";
+
+        [Required]
+        [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
+        [DataType(DataType.Password)]
+        [Display(Name = "New password")]
+        public string NewPassword { get; set; } = "";
+
+        [DataType(DataType.Password)]
+        [Display(Name = "Confirm new password")]
+        [Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")]
+        public string ConfirmPassword { get; set; } = "";
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/DeletePersonalData.razor b/MyApp/Components/Account/Pages/Manage/DeletePersonalData.razor
new file mode 100644
index 0000000..c77d069
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/DeletePersonalData.razor
@@ -0,0 +1,93 @@
+@page "/Account/Manage/DeletePersonalData"
+
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject SignInManager<ApplicationUser> SignInManager
+@inject IdentityUserAccessor UserAccessor
+@inject IdentityRedirectManager RedirectManager
+@inject ILogger<DeletePersonalData> Logger
+
+<PageTitle>Delete Personal Data</PageTitle>
+
+<Heading3>Delete Personal Data</Heading3>
+
+<div class="max-w-xl">
+    <Alert Type="AlertType.Error" class="mb-3">
+        Deleting this data permanently removes your account, and cannot be recovered.
+    </Alert>
+
+    <div class="mt-3 shadow overflow-hidden sm:rounded-md">
+        <div class="px-4 bg-white dark:bg-black sm:p-6">
+            <StatusMessage Message="@message" />
+
+            <EditForm class="mt-3" id="delete-user" Model="Input" FormName="delete-user" OnValidSubmit="OnValidSubmitAsync" method="post">
+                <DataAnnotationsValidator />
+                <ValidationSummary class="mt-2 text-danger text-sm" />
+
+                <div class="flex flex-col gap-4">
+                    @if (requirePassword)
+                    {
+                        <div>
+                            <label for="password" class="@TextInput.LabelClasses">Password</label>
+                            <div class="mt-1 relative rounded-md shadow-sm">
+                                <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="current-password" aria-required="true" placeholder="Please enter your password." />
+                            </div>
+                            <ValidationMessage For="() => Input.Password" class="mt-2 text-danger text-sm" />
+                        </div>
+                    }
+                    <PrimaryButton Style="ButtonStyle.Red" type="submit">Delete data and close my account</PrimaryButton>
+                </div>
+            </EditForm>
+        </div>
+    </div>
+</div>
+
+@code {
+    private string? message;
+    private ApplicationUser user = default!;
+    private bool requirePassword;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        Input ??= new();
+        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+        requirePassword = await UserManager.HasPasswordAsync(user);
+    }
+
+    private async Task OnValidSubmitAsync()
+    {
+        if (requirePassword && !await UserManager.CheckPasswordAsync(user, Input.Password))
+        {
+            message = "Error: Incorrect password.";
+            return;
+        }
+
+        var result = await UserManager.DeleteAsync(user);
+        if (!result.Succeeded)
+        {
+            throw new InvalidOperationException("Unexpected error occurred deleting user.");
+        }
+
+        await SignInManager.SignOutAsync();
+
+        var userId = await UserManager.GetUserIdAsync(user);
+        Logger.LogInformation("User with ID '{UserId}' deleted themselves.", userId);
+
+        RedirectManager.RedirectToCurrentPage();
+    }
+
+    private sealed class InputModel
+    {
+        [DataType(DataType.Password)]
+        public string Password { get; set; } = "";
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/Disable2fa.razor b/MyApp/Components/Account/Pages/Manage/Disable2fa.razor
new file mode 100644
index 0000000..49d98a4
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/Disable2fa.razor
@@ -0,0 +1,67 @@
+@page "/Account/Manage/Disable2fa"
+
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject IdentityUserAccessor UserAccessor
+@inject IdentityRedirectManager RedirectManager
+@inject ILogger<Disable2fa> Logger
+
+<PageTitle>Disable two-factor authentication (2FA)</PageTitle>
+
+<Heading3>Disable two-factor authentication (2FA)</Heading3>
+
+<div class="max-w-xl">
+    <StatusMessage />
+
+    <Alert Type="AlertType.Warning">
+        <p class="mb-3">
+            <strong>This action only disables 2FA.</strong>
+        </p>
+        <p class="mb-3">
+            Disabling 2FA does not change the keys used in authenticator apps. If you wish to change the key
+            used in an authenticator app you should <a href="Account/Manage/ResetAuthenticator">reset your authenticator keys.</a>
+        </p>
+    </Alert>
+
+    <div class="mt-4">
+        <form @formname="disable-2fa" @onsubmit="OnSubmitAsync" method="post">
+            <AntiforgeryToken />
+            <PrimaryButton Style="ButtonStyle.Red" type="submit">Disable 2FA</PrimaryButton>
+        </form>
+    </div>
+</div>
+
+@code {
+    private ApplicationUser user = default!;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    protected override async Task OnInitializedAsync()
+    {
+        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+
+        if (HttpMethods.IsGet(HttpContext.Request.Method) && !await UserManager.GetTwoFactorEnabledAsync(user))
+        {
+            throw new InvalidOperationException("Cannot disable 2FA for user as it's not currently enabled.");
+        }
+    }
+
+    private async Task OnSubmitAsync()
+    {
+        var disable2faResult = await UserManager.SetTwoFactorEnabledAsync(user, false);
+        if (!disable2faResult.Succeeded)
+        {
+            throw new InvalidOperationException("Unexpected error occurred disabling 2FA.");
+        }
+
+        var userId = await UserManager.GetUserIdAsync(user);
+        Logger.LogInformation("User with ID '{UserId}' has disabled 2fa.", userId);
+        RedirectManager.RedirectToWithStatus(
+            "Account/Manage/TwoFactorAuthentication",
+            "2fa has been disabled. You can reenable 2fa when you setup an authenticator app",
+            HttpContext);
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/Email.razor b/MyApp/Components/Account/Pages/Manage/Email.razor
new file mode 100644
index 0000000..6fb8a84
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/Email.razor
@@ -0,0 +1,134 @@
+@page "/Account/Manage/Email"
+
+@using System.ComponentModel.DataAnnotations
+@using System.Text
+@using System.Text.Encodings.Web
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.WebUtilities
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject IEmailSender<ApplicationUser> EmailSender
+@inject IdentityUserAccessor UserAccessor
+@inject NavigationManager NavigationManager
+
+<PageTitle>Manage email</PageTitle>
+
+<Heading3>Manage email</Heading3>
+
+<div class="max-w-xl">
+    <StatusMessage Message="@message" />
+
+    <div class="mt-3 shadow overflow-hidden sm:rounded-md">
+        <div class="px-4 bg-white dark:bg-black sm:p-6">
+            <form id="send-verification-form" @onsubmit="OnSendEmailVerificationAsync" @formname="send-verification" method="post">
+                <AntiforgeryToken />
+            </form>
+            <EditForm id="change-email-form" Model="Input" FormName="change-email" OnValidSubmit="OnValidSubmitAsync" method="post">
+                <DataAnnotationsValidator />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+
+                <div class="flex flex-col gap-4">
+                    @if (isEmailConfirmed)
+                    {
+                        <div>
+                            <label for="email" class="@TextInput.LabelClasses">Email</label>
+                            <div class="mt-1 relative rounded-md shadow-sm">
+                                <input id="email" type="text" value="@email" class="@TextInput.InputClasses" placeholder="Please enter your email." disabled />
+                            </div>
+                        </div>
+                    }
+                    else
+                    {
+                        <div>
+                            <label for="email" class="@TextInput.LabelClasses">Email</label>
+                            <div class="mt-1 relative rounded-md shadow-sm">
+                                <input id="email" type="text" value="@email" class="@TextInput.InputClasses" placeholder="Please enter your email." disabled />
+                            </div>
+                            <SecondaryButton id="email-verification" type="submit" form="send-verification-form">Send verification email</SecondaryButton>
+                        </div>
+                    }
+                <div>
+                    <label for="new-email" class="@TextInput.LabelClasses">New email</label>
+                    <div class="mt-1 relative rounded-md shadow-sm">
+                        <InputText id="new-email" type="text" @bind-Value="Input.NewEmail" class="@TextInput.InputClasses" autocomplete="email" aria-required="true" placeholder="Please enter new email." />
+                    </div>
+                    <ValidationMessage For="() => Input.NewEmail" class="mt-2 text-danger text-sm" />
+                </div>
+                <div>
+                    <PrimaryButton id="change-email-button" type="submit">Change email</PrimaryButton>
+                </div>
+            </div>
+            </EditForm>
+        </div>
+    </div>
+</div>
+
+@code {
+    private string? message;
+    private ApplicationUser user = default!;
+    private string? email;
+    private bool isEmailConfirmed;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromForm(FormName = "change-email")]
+    private InputModel Input { get; set; } = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+        email = await UserManager.GetEmailAsync(user);
+        isEmailConfirmed = await UserManager.IsEmailConfirmedAsync(user);
+
+        Input.NewEmail ??= email;
+    }
+
+    private async Task OnValidSubmitAsync()
+    {
+        if (Input.NewEmail is null || Input.NewEmail == email)
+        {
+            message = "Your email is unchanged.";
+            return;
+        }
+
+        var userId = await UserManager.GetUserIdAsync(user);
+        var code = await UserManager.GenerateChangeEmailTokenAsync(user, Input.NewEmail);
+        code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
+        var callbackUrl = NavigationManager.GetUriWithQueryParameters(
+            NavigationManager.ToAbsoluteUri("Account/ConfirmEmailChange").AbsoluteUri,
+            new Dictionary<string, object?> { ["userId"] = userId, ["email"] = Input.NewEmail, ["code"] = code });
+
+        await EmailSender.SendConfirmationLinkAsync(user, Input.NewEmail, HtmlEncoder.Default.Encode(callbackUrl));
+
+        message = "Confirmation link to change email sent. Please check your email.";
+    }
+
+    private async Task OnSendEmailVerificationAsync()
+    {
+        if (email is null)
+        {
+            return;
+        }
+
+        var userId = await UserManager.GetUserIdAsync(user);
+        var code = await UserManager.GenerateEmailConfirmationTokenAsync(user);
+        code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
+        var callbackUrl = NavigationManager.GetUriWithQueryParameters(
+            NavigationManager.ToAbsoluteUri("Account/ConfirmEmail").AbsoluteUri,
+            new Dictionary<string, object?> { ["userId"] = userId, ["code"] = code });
+
+        await EmailSender.SendConfirmationLinkAsync(user, email, HtmlEncoder.Default.Encode(callbackUrl));
+
+        message = "Verification email sent. Please check your email.";
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [EmailAddress]
+        [Display(Name = "New email")]
+        public string? NewEmail { get; set; }
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/EnableAuthenticator.razor b/MyApp/Components/Account/Pages/Manage/EnableAuthenticator.razor
new file mode 100644
index 0000000..4c5fd05
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/EnableAuthenticator.razor
@@ -0,0 +1,186 @@
+@page "/Account/Manage/EnableAuthenticator"
+
+@using System.ComponentModel.DataAnnotations
+@using System.Globalization
+@using System.Text
+@using System.Text.Encodings.Web
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject IdentityUserAccessor UserAccessor
+@inject UrlEncoder UrlEncoder
+@inject IdentityRedirectManager RedirectManager
+@inject ILogger<EnableAuthenticator> Logger
+
+<PageTitle>Configure authenticator app</PageTitle>
+
+@if (recoveryCodes is not null)
+{
+    <ShowRecoveryCodes RecoveryCodes="recoveryCodes.ToArray()" StatusMessage="@message" />
+}
+else
+{
+    <Heading3>Configure authenticator app</Heading3>
+
+    <div class="max-w-xl" data-module="pages/Account/Manage/EnableAuthenticator.mjs">
+        <StatusMessage class="mb-3" />
+        <div>
+            <p>To use an authenticator app go through the following steps:</p>
+            <ol class="list-decimal ml-8">
+                <li>
+                    <p class="my-2">
+                        Download a two-factor authenticator app like Microsoft Authenticator for
+                        <HyperLink class="font-semibold" href="https://go.microsoft.com/fwlink/?Linkid=825072">Android</HyperLink> and
+                        <HyperLink class="font-semibold" href="https://go.microsoft.com/fwlink/?Linkid=825073">iOS</HyperLink> or
+                        Google Authenticator for
+                        <HyperLink class="font-semibold" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en">Android</HyperLink> and
+                        <HyperLink class="font-semibold" href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8">iOS</HyperLink>.
+                    </p>
+                </li>
+                <li>
+                    <p class="my-2">
+                        Scan the QR Code or enter this key <kbd class="bg-gray-100 dark:bg-gray-800 p-1 px-2 rounded-sm">@sharedKey</kbd> into your two factor authenticator app. Spaces and casing do not matter.
+                    </p>
+
+                    <Alert class="my-4" Type="AlertType.Information">
+                        Learn how to <HyperLink class="font-semibold" href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</HyperLink>.
+                    </Alert>
+
+                    <div data-permanent id="qrCode"></div>
+                    <div id="qrCodeData" data-url="@authenticatorUri"></div>
+                </li>
+                <li>
+                    <p class="my-2">
+                        Once you have scanned the QR code or input the key above, your two factor authentication app will provide you
+                        with a unique code. Enter the code in the confirmation box below.
+                    </p>
+                    <div>
+                        <div class="max-w-xs">
+                            <EditForm id="send-code" Model="Input" FormName="send-code" OnValidSubmit="OnValidSubmitAsync" method="post">
+                                <DataAnnotationsValidator />
+                                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+
+                                <div class="flex flex-col gap-4">
+                                    <div>
+                                        <label for="code" class="@TextInput.LabelClasses">Verification Code</label>
+                                        <div class="mt-1 relative rounded-md shadow-sm">
+                                            <InputText id="code" type="text" @bind-Value="Input.Code" class="@TextInput.InputClasses" autocomplete="off" placeholder="Please enter the code." />
+                                        </div>
+                                        <ValidationMessage For="() => Input.Code" class="mt-2 text-danger text-sm" />
+                                    </div>
+                                    <PrimaryButton type="submit">Verify</PrimaryButton>
+                                </div>
+                            </EditForm>
+                        </div>
+                    </div>
+                </li>
+            </ol>
+        </div>
+    </div>
+}
+
+@code {
+    private const string AuthenticatorUriFormat = "otpauth://totp/{0}:{1}?secret={2}&issuer={0}&digits=6";
+
+    private string? message;
+    private ApplicationUser user = default!;
+    private string? sharedKey;
+    private string? authenticatorUri;
+    private IEnumerable<string>? recoveryCodes;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+
+        await LoadSharedKeyAndQrCodeUriAsync(user);
+    }
+
+    private async Task OnValidSubmitAsync()
+    {
+        // Strip spaces and hyphens
+        var verificationCode = Input.Code.Replace(" ", string.Empty).Replace("-", string.Empty);
+
+        var is2faTokenValid = await UserManager.VerifyTwoFactorTokenAsync(
+            user, UserManager.Options.Tokens.AuthenticatorTokenProvider, verificationCode);
+
+        if (!is2faTokenValid)
+        {
+            message = "Error: Verification code is invalid.";
+            return;
+        }
+
+        await UserManager.SetTwoFactorEnabledAsync(user, true);
+        var userId = await UserManager.GetUserIdAsync(user);
+        Logger.LogInformation("User with ID '{UserId}' has enabled 2FA with an authenticator app.", userId);
+
+        message = "Your authenticator app has been verified.";
+
+        if (await UserManager.CountRecoveryCodesAsync(user) == 0)
+        {
+            recoveryCodes = await UserManager.GenerateNewTwoFactorRecoveryCodesAsync(user, 10);
+        }
+        else
+        {
+            RedirectManager.RedirectToWithStatus("Account/Manage/TwoFactorAuthentication", message, HttpContext);
+        }
+    }
+
+    private async ValueTask LoadSharedKeyAndQrCodeUriAsync(ApplicationUser user)
+    {
+        // Load the authenticator key & QR code URI to display on the form
+        var unformattedKey = await UserManager.GetAuthenticatorKeyAsync(user);
+        if (string.IsNullOrEmpty(unformattedKey))
+        {
+            await UserManager.ResetAuthenticatorKeyAsync(user);
+            unformattedKey = await UserManager.GetAuthenticatorKeyAsync(user);
+        }
+
+        sharedKey = FormatKey(unformattedKey!);
+
+        var email = await UserManager.GetEmailAsync(user);
+        authenticatorUri = GenerateQrCodeUri(email!, unformattedKey!);
+    }
+
+    private string FormatKey(string unformattedKey)
+    {
+        var result = new StringBuilder();
+        int currentPosition = 0;
+        while (currentPosition + 4 < unformattedKey.Length)
+        {
+            result.Append(unformattedKey.AsSpan(currentPosition, 4)).Append(' ');
+            currentPosition += 4;
+        }
+        if (currentPosition < unformattedKey.Length)
+        {
+            result.Append(unformattedKey.AsSpan(currentPosition));
+        }
+
+        return result.ToString().ToLowerInvariant();
+    }
+
+    private string GenerateQrCodeUri(string email, string unformattedKey)
+    {
+        return string.Format(
+            CultureInfo.InvariantCulture,
+            AuthenticatorUriFormat,
+            UrlEncoder.Encode("Microsoft.AspNetCore.Identity.UI"),
+            UrlEncoder.Encode(email),
+            unformattedKey);
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [StringLength(7, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
+        [DataType(DataType.Text)]
+        [Display(Name = "Verification Code")]
+        public string Code { get; set; } = "";
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/ExternalLogins.razor b/MyApp/Components/Account/Pages/Manage/ExternalLogins.razor
new file mode 100644
index 0000000..8b0689b
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/ExternalLogins.razor
@@ -0,0 +1,149 @@
+@page "/Account/Manage/ExternalLogins"
+
+@using Microsoft.AspNetCore.Authentication
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject SignInManager<ApplicationUser> SignInManager
+@inject IdentityUserAccessor UserAccessor
+@inject IUserStore<ApplicationUser> UserStore
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Manage your external logins</PageTitle>
+
+<div class="max-w-xl">
+    <StatusMessage class="mb-3" />
+    @if (currentLogins?.Count > 0)
+    {
+        <Heading3>Registered Logins</Heading3>
+        <div class="prose prose-xl">
+            <table class="table">
+                <tbody>
+                    @foreach (var login in currentLogins)
+                    {
+                        <tr>
+                            <td id="login-provider-@login.LoginProvider"><Heading4>@login.ProviderDisplayName</Heading4></td>
+                            <td>
+                                @if (showRemoveButton)
+                                {
+                                    <form id="remove-login-@login.LoginProvider" @formname="@($"remove-login-{login.LoginProvider}")" @onsubmit="OnSubmitAsync" method="post">
+                                        <AntiforgeryToken />
+                                        <div>
+                                            <input type="hidden" name="@nameof(LoginProvider)" value="@login.LoginProvider" />
+                                            <input type="hidden" name="@nameof(ProviderKey)" value="@login.ProviderKey" />
+                                            <PrimaryButton type="submit" title=@($"Remove this {login.ProviderDisplayName} login from your account")>Remove</PrimaryButton>
+                                        </div>
+                                    </form>
+                                }
+                                else
+                                {
+                                    @: &nbsp;
+                                }
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+    }
+    @if (otherLogins?.Count > 0)
+    {
+        <Heading4>Add another service to log in.</Heading4>
+        <form id="link-login-form" class="mt-4 form-horizontal" action="Account/Manage/LinkExternalLogin" method="post">
+            <AntiforgeryToken />
+            <div id="socialLoginList">
+                <p>
+                    @foreach (var provider in otherLogins)
+                    {
+                        <button id="link-login-button-@provider.Name"
+                                type="submit"
+                                class="@SecondaryButton.Classes mr-2 mb-2"
+                                name="Provider"
+                                value="@provider.Name"
+                                title="Log in using your @provider.DisplayName account">
+                            @provider.DisplayName
+                        </button>
+                    }
+                </p>
+            </div>
+        </form>
+    }
+
+</div>
+
+@code {
+    public const string LinkLoginCallbackAction = "LinkLoginCallback";
+
+    private ApplicationUser user = default!;
+    private IList<UserLoginInfo>? currentLogins;
+    private IList<AuthenticationScheme>? otherLogins;
+    private bool showRemoveButton;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromForm]
+    private string? LoginProvider { get; set; }
+
+    [SupplyParameterFromForm]
+    private string? ProviderKey { get; set; }
+
+    [SupplyParameterFromQuery]
+    private string? Action { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+        currentLogins = await UserManager.GetLoginsAsync(user);
+        otherLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync())
+            .Where(auth => currentLogins.All(ul => auth.Name != ul.LoginProvider))
+            .ToList();
+
+        string? passwordHash = null;
+        if (UserStore is IUserPasswordStore<ApplicationUser> userPasswordStore)
+        {
+            passwordHash = await userPasswordStore.GetPasswordHashAsync(user, HttpContext.RequestAborted);
+        }
+
+        showRemoveButton = passwordHash is not null || currentLogins.Count > 1;
+
+        if (HttpMethods.IsGet(HttpContext.Request.Method) && Action == LinkLoginCallbackAction)
+        {
+            await OnGetLinkLoginCallbackAsync();
+        }
+    }
+
+    private async Task OnSubmitAsync()
+    {
+        var result = await UserManager.RemoveLoginAsync(user, LoginProvider!, ProviderKey!);
+        if (!result.Succeeded)
+        {
+            RedirectManager.RedirectToCurrentPageWithStatus("Error: The external login was not removed.", HttpContext);
+        }
+
+        await SignInManager.RefreshSignInAsync(user);
+        RedirectManager.RedirectToCurrentPageWithStatus("The external login was removed.", HttpContext);
+    }
+
+    private async Task OnGetLinkLoginCallbackAsync()
+    {
+        var userId = await UserManager.GetUserIdAsync(user);
+        var info = await SignInManager.GetExternalLoginInfoAsync(userId);
+        if (info is null)
+        {
+            RedirectManager.RedirectToCurrentPageWithStatus("Error: Could not load external login info.", HttpContext);
+        }
+
+        var result = await UserManager.AddLoginAsync(user, info);
+        if (!result.Succeeded)
+        {
+            RedirectManager.RedirectToCurrentPageWithStatus("Error: The external login was not added. External logins can only be associated with one account.", HttpContext);
+        }
+
+        // Clear the existing external cookie to ensure a clean login process
+        await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);
+
+        RedirectManager.RedirectToCurrentPageWithStatus("The external login was added.", HttpContext);
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/GenerateRecoveryCodes.razor b/MyApp/Components/Account/Pages/Manage/GenerateRecoveryCodes.razor
new file mode 100644
index 0000000..5de2ad5
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/GenerateRecoveryCodes.razor
@@ -0,0 +1,70 @@
+@page "/Account/Manage/GenerateRecoveryCodes"
+
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject IdentityUserAccessor UserAccessor
+@inject IdentityRedirectManager RedirectManager
+@inject ILogger<GenerateRecoveryCodes> Logger
+
+<PageTitle>Generate two-factor authentication (2FA) recovery codes</PageTitle>
+
+<div class="max-w-xl">
+    @if (recoveryCodes is not null)
+    {
+        <ShowRecoveryCodes RecoveryCodes="recoveryCodes.ToArray()" StatusMessage="@message" />
+    }
+    else
+    {
+        <Heading3>Generate two-factor authentication (2FA) recovery codes</Heading3>
+        <Alert Type="AlertType.Warning">
+            <p class="mb-3">
+                <strong>Put these codes in a safe place.</strong>
+            </p>
+            <p class="mb-3">
+                If you lose your device and don't have the recovery codes you will lose access to your account.
+            </p>
+            <p class="mb-3">
+                Generating new recovery codes does not change the keys used in authenticator apps. 
+                If you wish to change the key used in an authenticator app you should
+                <HyperLink class="font-semibold" href="Account/Manage/ResetAuthenticator">reset your authenticator keys.</HyperLink>
+            </p>
+        </Alert>
+        <div class="mt-4">
+            <form @formname="generate-recovery-codes" @onsubmit="OnSubmitAsync" method="post">
+                <AntiforgeryToken />
+                <PrimaryButton Style="ButtonStyle.Red" type="submit">Generate Recovery Codes</PrimaryButton>
+            </form>
+        </div>
+    }
+</div>
+
+@code {
+    private string? message;
+    private ApplicationUser user = default!;
+    private IEnumerable<string>? recoveryCodes;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    protected override async Task OnInitializedAsync()
+    {
+        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+
+        var isTwoFactorEnabled = await UserManager.GetTwoFactorEnabledAsync(user);
+        if (!isTwoFactorEnabled)
+        {
+            throw new InvalidOperationException("Cannot generate recovery codes for user because they do not have 2FA enabled.");
+        }
+    }
+
+    private async Task OnSubmitAsync()
+    {
+        var userId = await UserManager.GetUserIdAsync(user);
+        recoveryCodes = await UserManager.GenerateNewTwoFactorRecoveryCodesAsync(user, 10);
+        message = "You have generated new recovery codes.";
+
+        Logger.LogInformation("User with ID '{UserId}' has generated new 2FA recovery codes.", userId);
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/Index.razor b/MyApp/Components/Account/Pages/Manage/Index.razor
new file mode 100644
index 0000000..961e082
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/Index.razor
@@ -0,0 +1,87 @@
+@page "/Account/Manage"
+
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject SignInManager<ApplicationUser> SignInManager
+@inject IdentityUserAccessor UserAccessor
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Profile</PageTitle>
+
+<Heading3>Profile</Heading3>
+<StatusMessage />
+
+<div class="max-w-xl">
+    <div class="shadow overflow-hidden sm:rounded-md">
+        <EditForm id="profile-form" Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post"
+                  class="px-4 bg-white dark:bg-black sm:p-6">
+            <DataAnnotationsValidator />
+            <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+
+            <div class="flex flex-col gap-y-4">
+                <div>
+                    <label for="username" class="@TextInput.LabelClasses">Username</label>
+                    <div class="mt-1 relative rounded-md shadow-sm">
+                        <input id="username" type="text" value="@username" class="@TextInput.InputClasses" placeholder="Please choose your username." disabled />
+                    </div>
+                </div>
+                <div>
+                    <label for="phone-number" class="@TextInput.LabelClasses">Phone number</label>
+                    <div class="mt-1 relative rounded-md shadow-sm">
+                        <InputText id="phone-number" type="text" @bind-Value="Input.PhoneNumber" class="@TextInput.InputClasses" placeholder="Please enter your phone number." />
+                    </div>
+                    <ValidationMessage For="() => Input.PhoneNumber" class="mt-2 text-danger text-sm" />
+                </div>
+                <div>
+                    <PrimaryButton id="update-profile-button" type="submit">Save</PrimaryButton>
+                </div>
+            </div>
+        </EditForm>
+    </div>
+</div>
+
+@code {
+    private ApplicationUser user = default!;
+    private string? username;
+    private string? phoneNumber;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+        username = await UserManager.GetUserNameAsync(user);
+        phoneNumber = await UserManager.GetPhoneNumberAsync(user);
+
+        Input.PhoneNumber ??= phoneNumber;
+    }
+
+    private async Task OnValidSubmitAsync()
+    {
+        if (Input.PhoneNumber != phoneNumber)
+        {
+            var setPhoneResult = await UserManager.SetPhoneNumberAsync(user, Input.PhoneNumber);
+            if (!setPhoneResult.Succeeded)
+            {
+                RedirectManager.RedirectToCurrentPageWithStatus("Error: Failed to set phone number.", HttpContext);
+            }
+        }
+
+        await SignInManager.RefreshSignInAsync(user);
+        RedirectManager.RedirectToCurrentPageWithStatus("Your profile has been updated", HttpContext);
+    }
+
+    private sealed class InputModel
+    {
+        [Phone]
+        [Display(Name = "Phone number")]
+        public string? PhoneNumber { get; set; }
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/ManageNavPages.cs b/MyApp/Components/Account/Pages/Manage/ManageNavPages.cs
new file mode 100644
index 0000000..2620b2c
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/ManageNavPages.cs
@@ -0,0 +1,42 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Mvc.Rendering;
+using Microsoft.AspNetCore.Mvc.ViewFeatures;
+using ServiceStack;
+
+namespace MyApp.Components.Pages.Account.Manage;
+
+public static class ManageNavPages
+{
+    const string NavItemClass = "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-50 group flex items-center px-4 py-2 text-base font-medium rounded-md mr-2 whitespace-nowrap";
+
+    const string ActiveClass = "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-50";
+    public static string Index => "Account/Manage";
+    public static string Email => "Account/Manage/Email";
+
+    public static string ChangePassword => "Account/Manage/ChangePassword";
+
+    public static string ExternalLogins => "Account/Manage/ExternalLogins";
+
+    public static string TwoFactorAuthentication => "Account/Manage/TwoFactorAuthentication";
+    public static string PersonalData => "Account/Manage/PersonalData";
+
+    public static string? IndexNavClass(NavigationManager navigationManager) => PageNavClass(navigationManager, Index);
+    public static string? EmailNavClass(NavigationManager navigationManager) => PageNavClass(navigationManager, Email);
+
+    public static string? ChangePasswordNavClass(NavigationManager navigationManager) => PageNavClass(navigationManager, ChangePassword);
+
+    public static string? ExternalLoginsNavClass(NavigationManager navigationManager) => PageNavClass(navigationManager, ExternalLogins);
+
+    public static string? TwoFactorAuthenticationNavClass(NavigationManager navigationManager) => PageNavClass(navigationManager, TwoFactorAuthentication);
+
+    public static string? PersonalDataNavClass(NavigationManager navigationManager) => PageNavClass(navigationManager, PersonalData);
+    public static string? PageNavClass(NavigationManager navigationManager, string page)
+    {
+        return navigationManager.Uri.EndsWith(page, StringComparison.OrdinalIgnoreCase) 
+            ? CssUtils.ClassNames(NavItemClass, ActiveClass) 
+            : NavItemClass;
+    }
+
+    public static string ActivePageKey => "ActivePage";
+    public static void AddActivePage(this ViewDataDictionary viewData, string activePage) => viewData[ActivePageKey] = activePage;
+}
diff --git a/MyApp/Components/Account/Pages/Manage/PersonalData.razor b/MyApp/Components/Account/Pages/Manage/PersonalData.razor
new file mode 100644
index 0000000..1954bd6
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/PersonalData.razor
@@ -0,0 +1,35 @@
+@page "/Account/Manage/PersonalData"
+
+@inject IdentityUserAccessor UserAccessor
+
+<PageTitle>Personal Data</PageTitle>
+
+<Heading3>Personal Data</Heading3>
+
+<div class="max-w-xl">
+    <StatusMessage />
+
+    <div class="flex flex-col gap-4">
+        <p>Your account contains personal data that you have given us. This page allows you to download or delete that data.</p>
+        <p>
+            <strong>Deleting this data will permanently remove your account, and this cannot be recovered.</strong>
+        </p>
+        <form id="download-data" action="Account/Manage/DownloadPersonalData" method="post">
+            <AntiforgeryToken />
+            <PrimaryButton type="submit">Download</PrimaryButton>
+        </form>
+        <p>
+            <PrimaryButton Style="ButtonStyle.Red" id="delete" href="Account/Manage/DeletePersonalData">Delete</PrimaryButton>
+        </p>
+    </div>
+</div>
+
+@code {
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _ = await UserAccessor.GetRequiredUserAsync(HttpContext);
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/ResetAuthenticator.razor b/MyApp/Components/Account/Pages/Manage/ResetAuthenticator.razor
new file mode 100644
index 0000000..863cad4
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/ResetAuthenticator.razor
@@ -0,0 +1,56 @@
+@page "/Account/Manage/ResetAuthenticator"
+
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject SignInManager<ApplicationUser> SignInManager
+@inject IdentityUserAccessor UserAccessor
+@inject IdentityRedirectManager RedirectManager
+@inject ILogger<ResetAuthenticator> Logger
+
+<PageTitle>Reset authenticator key</PageTitle>
+
+<Heading3>Reset authenticator key</Heading3>
+
+<div class="max-w-xl">
+    <StatusMessage />
+
+    <Alert Type="AlertType.Warning">
+        <p class="mb-3">
+            <strong>If you reset your authenticator key your authenticator app will not work until you reconfigure it.</strong>
+        </p>
+        <p class="mb-3">
+            This process disables 2FA until you verify your authenticator app.
+            If you do not complete your authenticator app configuration you may lose access to your account.
+        </p>
+    </Alert>
+
+    <div class="pt-4">
+        <form id="reset-authenticator-form" @formname="reset-authenticator" @onsubmit="OnSubmitAsync" method="post">
+            <AntiforgeryToken />
+            <PrimaryButton Style="ButtonStyle.Red" id="reset-authenticator-button" type="submit">Reset authenticator key</PrimaryButton>
+        </form>
+    </div>
+</div>
+
+@code {
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    private async Task OnSubmitAsync()
+    {
+        var user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+        await UserManager.SetTwoFactorEnabledAsync(user, false);
+        await UserManager.ResetAuthenticatorKeyAsync(user);
+        var userId = await UserManager.GetUserIdAsync(user);
+        Logger.LogInformation("User with ID '{UserId}' has reset their authentication app key.", userId);
+
+        await SignInManager.RefreshSignInAsync(user);
+
+        RedirectManager.RedirectToWithStatus(
+            "Account/Manage/EnableAuthenticator",
+            "Your authenticator app key has been reset, you will need to configure your authenticator app using the new key.",
+            HttpContext);
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/SetPassword.razor b/MyApp/Components/Account/Pages/Manage/SetPassword.razor
new file mode 100644
index 0000000..df8578a
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/SetPassword.razor
@@ -0,0 +1,101 @@
+@page "/Account/Manage/SetPassword"
+
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject SignInManager<ApplicationUser> SignInManager
+@inject IdentityUserAccessor UserAccessor
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Set password</PageTitle>
+
+<Heading3>Set your password</Heading3>
+
+<div class="max-w-xl">
+    <StatusMessage class="mb-3" Message="@message" />
+
+    <p class="text-info">
+        You do not have a local username/password for this site. Add a local
+        account so you can log in without an external login.
+    </p>
+
+    <div class="mt-3 shadow overflow-hidden sm:rounded-md">
+        <div class="px-4 bg-white dark:bg-black sm:p-6">
+            <EditForm id="set-password-form" Model="Input" FormName="set-password" OnValidSubmit="OnValidSubmitAsync" method="post">
+                <DataAnnotationsValidator />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+
+                <div class="flex flex-col gap-4">
+                    <div>
+                        <label for="new-password" class="@TextInput.LabelClasses">New password</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="new-password" type="password" @bind-Value="Input.NewPassword" class="@TextInput.InputClasses" autocomplete="new-password" placeholder="Please enter your new password." />
+                        </div>
+                        <ValidationMessage For="() => Input.NewPassword" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <label for="confirm-password" class="@TextInput.LabelClasses">Confirm password</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" placeholder="Please confirm your new password." />
+                        </div>
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <PrimaryButton type="submit">Set password</PrimaryButton>
+                    </div>
+                </div>
+            </EditForm>
+        </div>
+    </div>
+</div>
+
+@code {
+    private string? message;
+    private ApplicationUser user = default!;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+
+        var hasPassword = await UserManager.HasPasswordAsync(user);
+        if (hasPassword)
+        {
+            RedirectManager.RedirectTo("Account/Manage/ChangePassword");
+        }
+    }
+
+    private async Task OnValidSubmitAsync()
+    {
+        var addPasswordResult = await UserManager.AddPasswordAsync(user, Input.NewPassword!);
+        if (!addPasswordResult.Succeeded)
+        {
+            message = $"Error: {string.Join(",", addPasswordResult.Errors.Select(error => error.Description))}";
+            return;
+        }
+
+        await SignInManager.RefreshSignInAsync(user);
+        RedirectManager.RedirectToCurrentPageWithStatus("Your password has been set.", HttpContext);
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
+        [DataType(DataType.Password)]
+        [Display(Name = "New password")]
+        public string? NewPassword { get; set; }
+
+        [DataType(DataType.Password)]
+        [Display(Name = "Confirm new password")]
+        [Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")]
+        public string? ConfirmPassword { get; set; }
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/TwoFactorAuthentication.razor b/MyApp/Components/Account/Pages/Manage/TwoFactorAuthentication.razor
new file mode 100644
index 0000000..d9f19b7
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/TwoFactorAuthentication.razor
@@ -0,0 +1,107 @@
+@page "/Account/Manage/TwoFactorAuthentication"
+
+@using Microsoft.AspNetCore.Http.Features
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject SignInManager<ApplicationUser> SignInManager
+@inject IdentityUserAccessor UserAccessor
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Two-factor authentication (2FA)</PageTitle>
+
+<Heading3>Two-factor authentication (2FA)</Heading3>
+
+<div class="max-w-xl">
+    <StatusMessage class="mb-3" />
+
+    @if (canTrack)
+    {
+        if (is2faEnabled)
+        {
+            if (recoveryCodesLeft == 0)
+            {
+                <Alert Type="AlertType.Error">
+                    <strong>You have no recovery codes left.</strong>
+                    <p>You must <HyperLink href="Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</HyperLink> before you can log in with a recovery code.</p>
+                </Alert>
+            }
+            else if (recoveryCodesLeft == 1)
+            {
+                <Alert Type="AlertType.Error">
+                    <strong>You have 1 recovery code left.</strong>
+                    <p>You can <HyperLink href="Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</HyperLink>.</p>
+                </Alert>
+            }
+            else if (recoveryCodesLeft <= 3)
+            {
+                <Alert Type="AlertType.Error">
+                    <strong>You have @recoveryCodesLeft recovery codes left.</strong>
+                    <p>You should <HyperLink href="Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</HyperLink>.</p>
+                </Alert>
+            }
+
+            if (isMachineRemembered)
+            {
+                <form class="inline-block" @formname="forget-browser" @onsubmit="OnSubmitForgetBrowserAsync" method="post">
+                    <PrimaryButton type="submit">Forget this browser</PrimaryButton>
+                </form>
+            }
+
+            <PrimaryButton href="Account/Manage/Disable2fa">Disable 2FA</PrimaryButton>
+            <PrimaryButton href="Account/Manage/GenerateRecoveryCodes">Reset recovery codes</PrimaryButton>
+        }
+
+        <div class="mt-4">
+            <Heading4 class="mb-4">Authenticator app</Heading4>
+            @if (!hasAuthenticator)
+            {
+                <PrimaryButton id="enable-authenticator" href="Account/Manage/EnableAuthenticator">Add authenticator app</PrimaryButton>
+            }
+            else
+            {
+                <PrimaryButton id="enable-authenticator" href="Account/Manage/EnableAuthenticator">Set up authenticator app</PrimaryButton>
+                <PrimaryButton id="reset-authenticator" href="Account/Manage/ResetAuthenticator">Reset authenticator app</PrimaryButton>
+            }
+        </div>
+    }
+    else
+    {
+        <Alert Type="AlertType.Error">
+            <strong>Privacy and cookie policy have not been accepted.</strong>
+            <p>You must accept the policy before you can enable two factor authentication.</p>
+        </Alert>
+    }
+
+</div>
+
+@code {
+    private bool canTrack;
+    private bool hasAuthenticator;
+    private int recoveryCodesLeft;
+    private bool is2faEnabled;
+    private bool isMachineRemembered;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var user = await UserAccessor.GetRequiredUserAsync(HttpContext);
+        canTrack = HttpContext.Features.Get<ITrackingConsentFeature>()?.CanTrack ?? true;
+        hasAuthenticator = await UserManager.GetAuthenticatorKeyAsync(user) is not null;
+        is2faEnabled = await UserManager.GetTwoFactorEnabledAsync(user);
+        isMachineRemembered = await SignInManager.IsTwoFactorClientRememberedAsync(user);
+        recoveryCodesLeft = await UserManager.CountRecoveryCodesAsync(user);
+    }
+
+    private async Task OnSubmitForgetBrowserAsync()
+    {
+        await SignInManager.ForgetTwoFactorClientAsync();
+
+        RedirectManager.RedirectToCurrentPageWithStatus(
+            "The current browser has been forgotten. When you login again from this browser you will be prompted for your 2fa code.",
+            HttpContext);
+    }
+}
diff --git a/MyApp/Components/Account/Pages/Manage/_Imports.razor b/MyApp/Components/Account/Pages/Manage/_Imports.razor
new file mode 100644
index 0000000..ada5bb0
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Manage/_Imports.razor
@@ -0,0 +1,2 @@
+@layout ManageLayout
+@attribute [Microsoft.AspNetCore.Authorization.Authorize]
diff --git a/MyApp/Components/Account/Pages/Register.razor b/MyApp/Components/Account/Pages/Register.razor
new file mode 100644
index 0000000..35f9f10
--- /dev/null
+++ b/MyApp/Components/Account/Pages/Register.razor
@@ -0,0 +1,155 @@
+@page "/Account/Register"
+
+@using System.ComponentModel.DataAnnotations
+@using System.Text
+@using System.Text.Encodings.Web
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.WebUtilities
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject IUserStore<ApplicationUser> UserStore
+@inject SignInManager<ApplicationUser> SignInManager
+@inject IEmailSender<ApplicationUser> EmailSender
+@inject ILogger<Register> Logger
+@inject NavigationManager NavigationManager
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Register</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Register</Heading1>
+
+    <StatusMessage Message="@Message" />
+    <div class="mt-3 shadow overflow-hidden sm:rounded-md">
+        <div class="px-4 bg-white dark:bg-black sm:p-6">
+            <EditForm id="registerForm" Model="Input" asp-route-returnUrl="@ReturnUrl" method="post" OnValidSubmit="RegisterUser" FormName="register">
+                <Heading3>Create a new account.</Heading3>
+                <DataAnnotationsValidator />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+                <div class="flex flex-col gap-y-4">
+                    <div>
+                        <label for="email" class="@TextInput.LabelClasses">Email</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                        </div>
+                        <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <label for="password" class="@TextInput.LabelClasses">Password</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="password" />
+                        </div>
+                        <ValidationMessage For="() => Input.Password" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <label for="confirm-password">Confirm Password</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="password" />
+                        </div>
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <PrimaryButton id="registerSubmit" type="submit">Register</PrimaryButton>
+                    </div>
+                </div>
+            </EditForm>
+        </div>
+    </div>
+    <div class="mt-8">
+        <section>
+            <Heading3>Use another service to register.</Heading3>
+            <ExternalLoginPicker />
+        </section>
+    </div>
+</div>
+
+@code {
+    private IEnumerable<IdentityError>? identityErrors;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    [SupplyParameterFromQuery]
+    private string? ReturnUrl { get; set; }
+
+    private string? Message => identityErrors is null ? null : $"Error: {string.Join(", ", identityErrors.Select(error => error.Description))}";
+
+    public async Task RegisterUser(EditContext editContext)
+    {
+        var user = CreateUser();
+
+        await UserStore.SetUserNameAsync(user, Input.Email, CancellationToken.None);
+        var emailStore = GetEmailStore();
+        await emailStore.SetEmailAsync(user, Input.Email, CancellationToken.None);
+        var result = await UserManager.CreateAsync(user, Input.Password);
+
+        if (!result.Succeeded)
+        {
+            identityErrors = result.Errors;
+            return;
+        }
+
+        Logger.LogInformation("User created a new account with password.");
+
+        var userId = await UserManager.GetUserIdAsync(user);
+        var code = await UserManager.GenerateEmailConfirmationTokenAsync(user);
+        code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
+        var callbackUrl = NavigationManager.GetUriWithQueryParameters(
+            NavigationManager.ToAbsoluteUri("Account/ConfirmEmail").AbsoluteUri,
+            new Dictionary<string, object?> { ["userId"] = userId, ["code"] = code, ["returnUrl"] = ReturnUrl });
+
+        await EmailSender.SendConfirmationLinkAsync(user, Input.Email, HtmlEncoder.Default.Encode(callbackUrl));
+
+        if (UserManager.Options.SignIn.RequireConfirmedAccount)
+        {
+            RedirectManager.RedirectTo(
+                "Account/RegisterConfirmation",
+                new() { ["email"] = Input.Email, ["returnUrl"] = ReturnUrl });
+        }
+
+        await SignInManager.SignInAsync(user, isPersistent: false);
+        RedirectManager.RedirectTo(ReturnUrl);
+    }
+
+    private ApplicationUser CreateUser()
+    {
+        try
+        {
+            return Activator.CreateInstance<ApplicationUser>();
+        }
+        catch
+        {
+            throw new InvalidOperationException($"Can't create an instance of '{nameof(ApplicationUser)}'. " +
+                $"Ensure that '{nameof(ApplicationUser)}' is not an abstract class and has a parameterless constructor.");
+        }
+    }
+
+    private IUserEmailStore<ApplicationUser> GetEmailStore()
+    {
+        if (!UserManager.SupportsUserEmail)
+        {
+            throw new NotSupportedException("The default UI requires a user store with email support.");
+        }
+        return (IUserEmailStore<ApplicationUser>)UserStore;
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [EmailAddress]
+        [Display(Name = "Email")]
+        public string Email { get; set; } = "";
+
+        [Required]
+        [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
+        [DataType(DataType.Password)]
+        [Display(Name = "Password")]
+        public string Password { get; set; } = "";
+
+        [DataType(DataType.Password)]
+        [Display(Name = "Confirm password")]
+        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
+        public string ConfirmPassword { get; set; } = "";
+    }
+}
diff --git a/MyApp/Components/Account/Pages/RegisterConfirmation.razor b/MyApp/Components/Account/Pages/RegisterConfirmation.razor
new file mode 100644
index 0000000..39698be
--- /dev/null
+++ b/MyApp/Components/Account/Pages/RegisterConfirmation.razor
@@ -0,0 +1,74 @@
+@page "/Account/RegisterConfirmation"
+
+@using System.Text
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.WebUtilities
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject IEmailSender<ApplicationUser> EmailSender
+@inject NavigationManager NavigationManager
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Register confirmation</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Register confirmation</Heading1>
+
+    <StatusMessage Message="@statusMessage" />
+
+    @if (emailConfirmationLink is not null)
+    {
+        <p class="my-4">
+            This app does not currently have a real email sender registered, see 
+            <HyperLink class="font-semibold" href="https://aka.ms/aspaccountconf">these docs</HyperLink> for how to configure a real email sender.
+        </p>
+        <p class="my-4">
+            Normally this would be emailed:
+            <HyperLink class="font-semibold" id="confirm-link" href="@emailConfirmationLink">Click here to confirm your account</HyperLink>
+        </p>
+    }
+    else
+    {
+        <p class="my-4">Please check your email to confirm your account.</p>
+    }
+</div>
+
+@code {
+    private string? emailConfirmationLink;
+    private string? statusMessage;
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    [SupplyParameterFromQuery]
+    private string? Email { get; set; }
+
+    [SupplyParameterFromQuery]
+    private string? ReturnUrl { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (Email is null)
+        {
+            RedirectManager.RedirectTo("");
+        }
+
+        var user = await UserManager.FindByEmailAsync(Email);
+        if (user is null)
+        {
+            HttpContext.Response.StatusCode = StatusCodes.Status404NotFound;
+            statusMessage = "Error finding user for unspecified email";
+        }
+        else if (EmailSender is IdentityNoOpEmailSender)
+        {
+            // Once you add a real email sender, you should remove this code that lets you confirm the account
+            var userId = await UserManager.GetUserIdAsync(user);
+            var code = await UserManager.GenerateEmailConfirmationTokenAsync(user);
+            code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
+            emailConfirmationLink = NavigationManager.GetUriWithQueryParameters(
+                NavigationManager.ToAbsoluteUri("Account/ConfirmEmail").AbsoluteUri,
+                new Dictionary<string, object?> { ["userId"] = userId, ["code"] = code, ["returnUrl"] = ReturnUrl });
+        }
+    }
+}
diff --git a/MyApp/Components/Account/Pages/ResendEmailConfirmation.razor b/MyApp/Components/Account/Pages/ResendEmailConfirmation.razor
new file mode 100644
index 0000000..3488af9
--- /dev/null
+++ b/MyApp/Components/Account/Pages/ResendEmailConfirmation.razor
@@ -0,0 +1,72 @@
+@page "/Account/ResendEmailConfirmation"
+
+@using System.ComponentModel.DataAnnotations
+@using System.Text
+@using System.Text.Encodings.Web
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.WebUtilities
+@using MyApp.Data
+
+@inject UserManager<ApplicationUser> UserManager
+@inject IEmailSender<ApplicationUser> EmailSender
+@inject NavigationManager NavigationManager
+@inject IdentityRedirectManager RedirectManager
+
+<PageTitle>Resend email confirmation</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Resend email confirmation</Heading1>
+    <Heading3>Enter your email.</Heading3>
+
+    <StatusMessage class="mb-3" Message="@message" />
+    <EditForm Model="Input" FormName="resend-email-confirmation" OnValidSubmit="OnValidSubmitAsync" method="post">
+        <DataAnnotationsValidator />
+        <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+        <div class="flex flex-col gap-y-4">
+            <div>
+                <label for="email" class="@TextInput.LabelClasses">Email</label>
+                <div class="mt-1 relative rounded-md shadow-sm">
+                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" aria-required="true" placeholder="name@example.com" />
+                </div>
+                <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
+            </div>
+            <div>
+                <PrimaryButton type="submit">Resend</PrimaryButton>
+            </div>
+        </div>
+    </EditForm>
+</div>
+
+@code {
+    private string? message;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    private async Task OnValidSubmitAsync()
+    {
+        var user = await UserManager.FindByEmailAsync(Input.Email!);
+        if (user is null)
+        {
+            message = "Verification email sent. Please check your email.";
+            return;
+        }
+
+        var userId = await UserManager.GetUserIdAsync(user);
+        var code = await UserManager.GenerateEmailConfirmationTokenAsync(user);
+        code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
+        var callbackUrl = NavigationManager.GetUriWithQueryParameters(
+            NavigationManager.ToAbsoluteUri("Account/ConfirmEmail").AbsoluteUri,
+            new Dictionary<string, object?> { ["userId"] = userId, ["code"] = code });
+        await EmailSender.SendConfirmationLinkAsync(user, Input.Email, HtmlEncoder.Default.Encode(callbackUrl));
+
+        message = "Verification email sent. Please check your email.";
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [EmailAddress]
+        public string Email { get; set; } = "";
+    }
+}
diff --git a/MyApp/Components/Account/Pages/ResetPassword.razor b/MyApp/Components/Account/Pages/ResetPassword.razor
new file mode 100644
index 0000000..3c7080a
--- /dev/null
+++ b/MyApp/Components/Account/Pages/ResetPassword.razor
@@ -0,0 +1,115 @@
+@page "/Account/ResetPassword"
+
+@using System.ComponentModel.DataAnnotations
+@using System.Text
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.WebUtilities
+@using MyApp.Data
+
+@inject IdentityRedirectManager RedirectManager
+@inject UserManager<ApplicationUser> UserManager
+
+<PageTitle>Reset password</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Reset password</Heading1>
+    <Heading2>Reset your password.</Heading2>
+
+    <StatusMessage Message="@Message" />
+    <div class="mt-3 shadow overflow-hidden sm:rounded-md">
+        <div class="px-4 bg-white dark:bg-black sm:p-6">
+            <EditForm id="reset-password-form" Model="Input" FormName="reset-password" OnValidSubmit="OnValidSubmitAsync" method="post">
+                <DataAnnotationsValidator />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
+                <input type="hidden" name="Input.Code" value="@Input.Code" />
+
+                <div class="flex flex-col gap-y-4">
+                    <div>
+                        <label for="email" class="@TextInput.LabelClasses">Email</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                        </div>
+                        <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <label for="password" class="@TextInput.LabelClasses">Password</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please enter your password." />
+                        </div>
+                        <ValidationMessage For="() => Input.Password" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <label for="confirm-password" class="@TextInput.LabelClasses">Confirm password</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please confirm your password." />
+                        </div>
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
+                    </div>
+                    <div>
+                        <PrimaryButton type="submit">Reset</PrimaryButton>
+                    </div>
+                </div>
+            </EditForm>
+        </div>
+    </div>
+</div>
+
+@code {
+    private IEnumerable<IdentityError>? identityErrors;
+
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    [SupplyParameterFromQuery]
+    private string? Code { get; set; }
+
+    private string? Message => identityErrors is null ? null : $"Error: {string.Join(", ", identityErrors.Select(error => error.Description))}";
+
+    protected override void OnInitialized()
+    {
+        if (Code is null)
+        {
+            RedirectManager.RedirectTo("Account/InvalidPasswordReset");
+        }
+
+        Input.Code = Encoding.UTF8.GetString(WebEncoders.Base64UrlDecode(Code));
+    }
+
+    private async Task OnValidSubmitAsync()
+    {
+        var user = await UserManager.FindByEmailAsync(Input.Email);
+        if (user is null)
+        {
+            // Don't reveal that the user does not exist
+            RedirectManager.RedirectTo("Account/ResetPasswordConfirmation");
+        }
+
+        var result = await UserManager.ResetPasswordAsync(user, Input.Code, Input.Password);
+        if (result.Succeeded)
+        {
+            RedirectManager.RedirectTo("Account/ResetPasswordConfirmation");
+        }
+
+        identityErrors = result.Errors;
+    }
+
+    private sealed class InputModel
+    {
+        [Required]
+        [EmailAddress]
+        public string Email { get; set; } = "";
+
+        [Required]
+        [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
+        [DataType(DataType.Password)]
+        public string Password { get; set; } = "";
+
+        [DataType(DataType.Password)]
+        [Display(Name = "Confirm password")]
+        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
+        public string ConfirmPassword { get; set; } = "";
+
+        [Required]
+        public string Code { get; set; } = "";
+    }
+}
diff --git a/MyApp/Components/Account/Pages/ResetPasswordConfirmation.razor b/MyApp/Components/Account/Pages/ResetPasswordConfirmation.razor
new file mode 100644
index 0000000..2822559
--- /dev/null
+++ b/MyApp/Components/Account/Pages/ResetPasswordConfirmation.razor
@@ -0,0 +1,12 @@
+@page "/Account/ResetPasswordConfirmation"
+<PageTitle>Reset password confirmation</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+
+    <Heading1>Reset password confirmation</Heading1>
+
+    <p class="my-4">
+        Your password has been reset. Please <HyperLink class="font-semibold" href="Account/Login">click here to log in</HyperLink>.
+    </p>
+
+</div>
diff --git a/MyApp/Components/Account/Pages/_Imports.razor b/MyApp/Components/Account/Pages/_Imports.razor
new file mode 100644
index 0000000..0056dbb
--- /dev/null
+++ b/MyApp/Components/Account/Pages/_Imports.razor
@@ -0,0 +1,2 @@
+@using MyApp.Components.Account.Shared
+@layout AccountLayout
diff --git a/MyApp/Components/Account/Shared/AccountLayout.razor b/MyApp/Components/Account/Shared/AccountLayout.razor
new file mode 100644
index 0000000..d0bc6c3
--- /dev/null
+++ b/MyApp/Components/Account/Shared/AccountLayout.razor
@@ -0,0 +1,28 @@
+@inherits LayoutComponentBase
+@layout MyApp.Components.Layout.MainLayout
+@inject NavigationManager NavigationManager
+
+@if (HttpContext is null)
+{
+    <p>Loading...</p>
+}
+else
+{
+    @Body
+}
+
+@code {
+    [CascadingParameter]
+    private HttpContext? HttpContext { get; set; }
+
+    protected override void OnParametersSet()
+    {
+        if (HttpContext is null)
+        {
+            // If this code runs, we're currently rendering in interactive mode, so there is no HttpContext.
+            // The identity pages need to set cookies, so they require an HttpContext. To achieve this we
+            // must transition back from interactive mode to a server-rendered page.
+            NavigationManager.Refresh(forceReload: true);
+        }
+    }
+}
diff --git a/MyApp/Components/Account/Shared/ExternalLoginPicker.razor b/MyApp/Components/Account/Shared/ExternalLoginPicker.razor
new file mode 100644
index 0000000..9d28dc1
--- /dev/null
+++ b/MyApp/Components/Account/Shared/ExternalLoginPicker.razor
@@ -0,0 +1,44 @@
+@using Microsoft.AspNetCore.Authentication
+@using Microsoft.AspNetCore.Identity
+@using MyApp.Data
+
+@inject SignInManager<ApplicationUser> SignInManager
+@inject IdentityRedirectManager RedirectManager
+
+@if (externalLogins.Length == 0)
+{
+    <div>
+        <p>
+            There are no external authentication services configured.
+            See this <HyperLink href="https://go.microsoft.com/fwlink/?LinkID=532715">article
+            about setting up this ASP.NET application to support logging in via external services</HyperLink>.
+        </p>
+    </div>
+}
+else
+{
+    <form id="external-account" class="form-horizontal" action="Account/PerformExternalLogin" method="post">
+        <div>
+            <AntiforgeryToken />
+            <input type="hidden" name="ReturnUrl" value="@ReturnUrl" />
+            <div class="space-x-2">
+                @foreach (var provider in externalLogins)
+                {
+                    <button type="submit" class="@SecondaryButton.Classes" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
+                }
+            </div>
+        </div>
+    </form>
+}
+
+@code {
+    private AuthenticationScheme[] externalLogins = [];
+
+    [SupplyParameterFromQuery]
+    private string? ReturnUrl { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        externalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).ToArray();
+    }
+}
diff --git a/MyApp/Components/Account/Shared/ManageLayout.razor b/MyApp/Components/Account/Shared/ManageLayout.razor
new file mode 100644
index 0000000..de72cef
--- /dev/null
+++ b/MyApp/Components/Account/Shared/ManageLayout.razor
@@ -0,0 +1,17 @@
+@inherits LayoutComponentBase
+@layout AccountLayout
+
+<div class="mt-8 mx-auto max-w-screen-lg">
+    <Heading1>Manage your account</Heading1>
+    <Heading4>Change your account settings</Heading4>
+    <hr class="mt-4 dark:border-gray-700" />
+    <div class="flex flex-wrap">
+        <div class="grow-0">
+            <ManageNavMenu />
+        </div>
+        <div class="grow p-4 sm:pl-16">
+            @Body
+        </div>
+    </div>
+</div>
+
diff --git a/MyApp/Components/Account/Shared/ManageNavMenu.razor b/MyApp/Components/Account/Shared/ManageNavMenu.razor
new file mode 100644
index 0000000..177a627
--- /dev/null
+++ b/MyApp/Components/Account/Shared/ManageNavMenu.razor
@@ -0,0 +1,45 @@
+@using Microsoft.AspNetCore.Identity;
+@using MyApp.Components.Pages.Account.Manage
+@using MyApp.Data;
+
+@inject NavigationManager NavigationManager
+@inject SignInManager<ApplicationUser> SignInManager
+
+<ul class="mt-4">
+    <li>
+        <NavLink class="@ManageNavPages.IndexNavClass(NavigationManager)" 
+                 id="profile" href="@ManageNavPages.Index" Match="NavLinkMatch.All">Profile</NavLink>
+    </li>
+    <li>
+        <NavLink class="@ManageNavPages.EmailNavClass(NavigationManager)" 
+                 id="manage-email" href="@ManageNavPages.Email">Email</NavLink>
+    </li>
+    <li>
+        <NavLink class="@ManageNavPages.ChangePasswordNavClass(NavigationManager)" 
+                 id="change-password" href="@ManageNavPages.ChangePassword">Password</NavLink>
+    </li>
+    @if (hasExternalLogins)
+    {
+        <li id="external-logins">
+            <NavLink class="@ManageNavPages.ExternalLoginsNavClass(NavigationManager)" 
+                     id="external-login" href="@ManageNavPages.ExternalLogins">External logins</NavLink>
+        </li>
+    }
+    <li>
+        <NavLink class="@ManageNavPages.TwoFactorAuthenticationNavClass(NavigationManager)" 
+                 id="two-factor" href="@ManageNavPages.TwoFactorAuthentication">Two-factor authentication</NavLink>
+    </li>
+    <li>
+        <NavLink class="@ManageNavPages.PersonalDataNavClass(NavigationManager)" 
+                 id="personal-data" href="@ManageNavPages.PersonalData">Personal data</NavLink>
+    </li>
+</ul>
+
+@code {
+    private bool hasExternalLogins;
+
+    protected override async Task OnInitializedAsync()
+    {
+        hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
+    }
+}
diff --git a/MyApp/Components/Account/Shared/RedirectToLogin.razor b/MyApp/Components/Account/Shared/RedirectToLogin.razor
new file mode 100644
index 0000000..c8b8eff
--- /dev/null
+++ b/MyApp/Components/Account/Shared/RedirectToLogin.razor
@@ -0,0 +1,8 @@
+@inject NavigationManager NavigationManager
+
+@code {
+    protected override void OnInitialized()
+    {
+        NavigationManager.NavigateTo($"Account/Login?returnUrl={Uri.EscapeDataString(NavigationManager.Uri)}", forceLoad: true);
+    }
+}
diff --git a/MyApp/Components/Account/Shared/ShowRecoveryCodes.razor b/MyApp/Components/Account/Shared/ShowRecoveryCodes.razor
new file mode 100644
index 0000000..41a9bfe
--- /dev/null
+++ b/MyApp/Components/Account/Shared/ShowRecoveryCodes.razor
@@ -0,0 +1,34 @@
+<Heading3>Recovery codes</Heading3>
+<div class="max-w-xl">
+    <StatusMessage Message="@StatusMessage" />
+
+    <Alert class="mt-4" Type="AlertType.Warning">
+        <p class="mb-3">
+            <strong>Put these codes in a safe place.</strong>
+        </p>
+        <p class="mb-3">
+            If you lose your device and don't have the recovery codes you will lose access to your account.
+        </p>
+    </Alert>
+
+    <div class="mt-4">
+        @for (var row = 0; row < RecoveryCodes.Length; row += 2)
+        {
+            <code class="recovery-code">@RecoveryCodes[row]</code>
+
+            <text>&nbsp;</text>
+
+            <code class="recovery-code">@RecoveryCodes[row + 1]</code>
+
+            <br />
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public string[] RecoveryCodes { get; set; } = default!;
+
+    [Parameter]
+    public string StatusMessage { get; set; } = default!;
+}
diff --git a/MyApp/Components/Account/Shared/StatusMessage.razor b/MyApp/Components/Account/Shared/StatusMessage.razor
new file mode 100644
index 0000000..ca1ee72
--- /dev/null
+++ b/MyApp/Components/Account/Shared/StatusMessage.razor
@@ -0,0 +1,70 @@
+@if (!string.IsNullOrEmpty(DisplayMessage))
+{
+    <div class="@CssUtils.ClassNames("alert", @class)">
+        @if (DisplayMessage.StartsWith("Error"))
+        {
+            <div class="rounded-md bg-red-50 dark:bg-red-900 p-4">
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <div class="ml-3">
+                        <h3 class="text-sm font-medium text-red-800 dark:text-red-100">@DisplayMessage</h3>
+                    </div>
+                </div>
+            </div>
+        }
+        else
+        {
+            <div class="rounded-md bg-green-50 dark:bg-green-900 p-4">
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <div class="ml-3">
+                        <p class="text-sm font-medium text-green-800 dark:text-green-100">@DisplayMessage</p>
+                    </div>
+                    <div class="ml-auto pl-3">
+                        <div class="-mx-1.5 -my-1.5">
+                            <button onclick="this.closest('.alert').classList.add('hidden')" type="button" class="inline-flex rounded-md bg-green-50 dark:bg-green-900 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50">
+                                <span class="sr-only">Dismiss</span>
+                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                    <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        }
+    </div>
+}
+
+@code {
+    private string? messageFromCookie;
+
+    [Parameter]
+    public string? @class { get; set; }
+
+    [Parameter]
+    public string? Message { get; set; }
+
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    private string? DisplayMessage => Message ?? messageFromCookie;
+
+    protected override void OnInitialized()
+    {
+        messageFromCookie = HttpContext.Request.Cookies[IdentityRedirectManager.StatusCookieName];
+
+        if (messageFromCookie is not null)
+        {
+            HttpContext.Response.Cookies.Delete(IdentityRedirectManager.StatusCookieName);
+        }
+    }
+}
diff --git a/MyApp/Components/App.razor b/MyApp/Components/App.razor
new file mode 100644
index 0000000..4005427
--- /dev/null
+++ b/MyApp/Components/App.razor
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+    <link rel="icon" href="/img/logo.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="css/typography.css">
+    <link rel="stylesheet" href="css/highlight.css">
+    <link rel="stylesheet" href="css/lite-yt-embed.css">
+    @BlazorHtml.ImportMap(new()
+    {
+        ["app.mjs"] =              ("/mjs/app.mjs",                     "/mjs/app.mjs"),
+        ["vue"] =                  ("/lib/mjs/vue.mjs",                 "/lib/mjs/vue.min.mjs"),
+        ["@servicestack/client"] = ("/lib/mjs/servicestack-client.mjs", "/lib/mjs/servicestack-client.min.mjs"),
+        ["@servicestack/vue"] =    ("/lib/mjs/servicestack-vue.mjs",    "/lib/mjs/servicestack-vue.min.mjs"),
+    })
+
+    <HeadOutlet />
+</head>
+
+<body class="bg-white dark:bg-black dark:text-white">
+    <Routes />
+    <script src="_framework/blazor.web.js"></script>
+    <script src="js/servicestack-blazor.js"></script>
+    <script>JS.init({ colorScheme:false })</script>
+    <script src="lib/js/lite-yt-embed.js"></script>
+    <script src="lib/js/highlight.js"></script>
+    <script>hljs.highlightAll()</script>
+</body>
+
+</html>
diff --git a/MyApp/Components/Layout/MainLayout.razor b/MyApp/Components/Layout/MainLayout.razor
new file mode 100644
index 0000000..b066b44
--- /dev/null
+++ b/MyApp/Components/Layout/MainLayout.razor
@@ -0,0 +1,84 @@
+@inherits LayoutComponentBase
+@inject NavigationManager NavigationManager
+@inject IWebHostEnvironment Env
+@inject IServiceGatewayFactory GatewayFactory
+
+@if (Env.IsDevelopment())
+{
+    <script>window.Server = @metadataHtml</script>
+}
+<script type="module">
+import { useAuth, useMetadata } from "@@servicestack/vue"
+const { signIn } = useAuth()
+signIn(@authJson)
+
+const { loadMetadata } = useMetadata()
+loadMetadata({
+    olderThan: window.Server ? null : location.search.includes('clear=metadata') ? 0 : 60 * 60 * 1000 //1hr
+})
+</script>
+
+<Header />
+
+<div class="min-h-screen">
+    <main role="main">
+        @Body
+    </main>
+</div>
+
+<Footer />
+
+<script type="module">
+import { remount } from "/mjs/app.mjs"
+remount()
+</script>
+
+<div id="blazor-error-ui" class="hidden fixed bottom-0 w-full z-10">
+    <div class="flex rounded-md bg-yellow-50 p-4 m-4">
+        <div class="flex-shrink-0">
+            <!-- Heroicon name: solid/exclamation -->
+            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
+        </div>
+        <div class="ml-3">
+            <environment include="Staging,Production">
+                <h3 class="text-sm font-medium text-yellow-800">An error has occurred. This application may no longer respond until reloaded.</h3>
+            </environment>
+            <environment include="Development">
+                <h3 class="text-sm font-medium text-yellow-800">An unhandled exception has occurred. See browser dev tools for details.</h3>
+            </environment>
+            <div class="mt-4">
+                <div class="-mx-2 -my-1.5 flex">
+                    <button type="button" class="reload bg-yellow-50 px-2 py-1.5 rounded-md text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-yellow-50 focus:ring-yellow-600">Reload</button>
+                </div>
+            </div>
+        </div>
+        <div class="ml-auto pl-3">
+            <div class="-mx-1.5 -my-1.5">
+                <button type="button" class="dismiss inline-flex bg-yellow-50 rounded-md p-1.5 text-yellow-500 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-yellow-50 focus:ring-yellow-600">
+                    <span class="sr-only">Dismiss</span>
+                    <!-- Heroicon name: solid/x -->
+                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    MarkupString? metadataHtml = null;
+    MarkupString? authJson = null;
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        var gateway = GatewayFactory.GetServiceGateway(HttpContext.ToRequest());
+        metadataHtml = await gateway.ApiAsJsonAsync(new MetadataApp());
+        authJson = await gateway.ApiAsJsonAsync(new Authenticate());
+    }
+}
diff --git a/MyApp/Components/Pages/Blog.razor b/MyApp/Components/Pages/Blog.razor
new file mode 100644
index 0000000..c4cf16c
--- /dev/null
+++ b/MyApp/Components/Pages/Blog.razor
@@ -0,0 +1,196 @@
+@page "/blog"
+@inject MarkdownBlog Posts
+
+<PageTitle>MyApp Blog</PageTitle>
+
+<div class="container mx-auto px-5 mt-24 mb-24">
+    @if (primaryPost != null)
+    {
+        var authorHref = Posts.GetAuthorLink(primaryPost.Author);
+        <section>
+            <div class="mb-8 md:mb-16">
+                <div class="sm:mx-0">
+                    <a aria-label="@primaryPost.Title" href="@Posts.GetPostLink(primaryPost)">
+                        <img src="@primaryPost.Image" alt="Cover Image for @primaryPost.Title" class="shadow-sm hover:shadow-2xl transition-shadow duration-200">
+                    </a>
+                </div>
+            </div>
+            <div class="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
+                <div>
+                    <h3 class="mb-4 text-4xl lg:text-6xl leading-tight">
+                        <a class="hover:underline" href="@Posts.GetPostLink(primaryPost)">@primaryPost.Title</a>
+                    </h3>
+                    <div class="mb-4 md:mb-0 text-lg">
+                        <time datetime="@Posts.GetDateTimestamp(primaryPost.Date)">@Posts.GetDateLabel(primaryPost.Date)</time>
+                    </div>
+                </div>
+                <div>
+                    <p class="text-lg leading-relaxed mb-4">@primaryPost.Summary</p>
+                    @if (authorHref != null)
+                    {
+                        <a class="flex items-center text-xl font-bold" href="@authorHref">
+                            <img src="@Posts.GetAuthorProfileUrl(primaryPost.Author)" class="w-12 h-12 rounded-full mr-4" alt="Author">
+                            <span>@primaryPost.Author</span>
+                        </a>
+                    }
+                    else
+                    {
+                        <span class="flex items-center text-xl font-bold">
+                            <img src="@Posts.GetAuthorProfileUrl(primaryPost.Author)" class="w-12 h-12 rounded-full mr-4" alt="Author">
+                            <span>@primaryPost.Author</span>
+                        </span>
+                    }
+                </div>
+            </div>
+        </section>
+    }
+
+    @if (gridPosts.Count > 0)
+    {
+        <section>
+            <h2 class="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">More from the blog</h2>
+            <div class="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
+                @foreach (var post in gridPosts)
+                {
+                    var authorHref = Posts.GetAuthorLink(post.Author);
+                    <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
+                        <div class="flex-shrink-0">
+                            <a href="@Posts.GetPostLink(post)">
+                                <img class="h-48 w-full object-cover" src="@Posts.GetSplashImage(post)" alt="">
+                            </a>
+                        </div>
+                        <div class="flex flex-1 flex-col justify-between bg-white dark:bg-black p-6">
+                            <div class="flex-1">
+                                <p class="text-sm font-medium text-indigo-600 dark:text-indigo-300">
+                                    Article
+                                </p>
+                                <a href="@Posts.GetPostLink(post)" class="mt-2 block">
+                                    <p class="text-xl font-semibold text-gray-900 dark:text-gray-50">@post.Title</p>
+                                    <p class="mt-3 text-base text-gray-500">@post.Summary</p>
+                                </a>
+                            </div>
+                            <div class="mt-6 flex items-center">
+                                <div class="flex-shrink-0">
+                                    <span>
+                                        <span class="sr-only">@post.Author</span>
+                                        <img class="h-10 w-10 rounded-full" src="@Posts.GetAuthorProfileUrl(post.Author)" alt="@post.Title background">
+                                    </span>
+                                </div>
+                                <div class="ml-3">
+                                    <p class="text-sm font-medium text-gray-900">
+                                        @if (authorHref != null)
+                                        {
+                                            <a href="@Posts.GetAuthorLink(post.Author!)" class="hover:underline">@post.Author</a>
+                                        }
+                                        else
+                                        {
+                                            <span>@post.Author</span>
+                                        }
+                                    </p>
+                                    <div class="flex space-x-1 text-sm text-gray-500">
+                                        <time datetime="@Posts.GetDateTimestamp(post.Date)">@Posts.GetDateLabel(post.Date)</time>
+                                        <span class="px-1" aria-hidden="true">&middot;</span>
+                                        <span>@Posts.MinutesToRead(post.WordCount) min read</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
+            </div>
+        </section>
+    }
+
+    @if (remainingPosts.Count > 0)
+    {
+        <section class="mt-24 flex justify-center">
+            <div class="flex max-w-screen-lg">
+                <div class="w-2/3">
+                    @foreach (var post in remainingPosts)
+                    {
+                        var authorHref = Posts.GetAuthorLink(post.Author);
+                        <div class="border-b pb-4 mb-4">
+                            <div class="flex justify-between">
+                                <div class="w-3/4">
+                                    <a href="@Posts.GetPostLink(post)" class="mt-2 block">
+                                        <p class="text-xl font-semibold text-gray-900 dark:text-gray-50">@post.Title</p>
+                                        <p class="mt-3 text-base text-gray-500">@post.Summary</p>
+                                    </a>
+                                    <div class="mt-6 flex items-center">
+                                        <div class="flex-shrink-0">
+                                            <span>
+                                                <span class="sr-only">@post.Author</span>
+                                                <img class="h-10 w-10 rounded-full" src="@Posts.GetAuthorProfileUrl(post.Author)" alt="@post.Title background">
+                                            </span>
+                                        </div>
+                                        <div class="ml-3">
+                                            <p class="text-sm font-medium text-gray-900">
+                                                @if (authorHref != null)
+                                                {
+                                                    <a href="@Posts.GetAuthorLink(post.Author!)" class="hover:underline">@post.Author</a>
+                                                }
+                                                else
+                                                {
+                                                    <span>@post.Author</span>
+                                                }
+                                            </p>
+                                            <div class="flex space-x-1 text-sm text-gray-500">
+                                                <time datetime="@Posts.GetDateTimestamp(post.Date)">@Posts.GetDateLabel(post.Date)</time>
+                                                <span class="px-1" aria-hidden="true">&middot;</span>
+                                                <span>@Posts.MinutesToRead(post.WordCount) min read</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="w-1/4">
+                                    <a href="@Posts.GetPostLink(post)" class="pt-4">
+                                        <img class="w-full object-cover max-h-[130px]" src="@Posts.GetSplashImage(post)" alt="">
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                    @if (remainingPosts.Count >= 15)
+                    {
+                        <div class="mt-8 text-center">
+                            <a class="text-sm font-semibold hover:underline" href="@Posts.GetPostsLink()">view all posts</a>
+                        </div>
+                    }
+                </div>
+                <div class="w-1/3">
+                    <div class="pl-8">
+                        <div class="flex items-center">
+                            <img class="w-8 h-8 mr-1" src="img/logo.svg" alt="MyApp logo">
+                            <span class="hidden sm:block text-lg font-semibold">MyApp</span>
+                        </div>
+                        <div class="p-2">
+                            <p class="text-gray-500">I’m Spencer Sharp. I live in New York City, where I design the future.</p>
+                            <a href="about" class="text-sm font-medium text-gray-900 hover:underline">more information</a>
+                        </div>
+                        <div class="p-4">
+                            <FollowLinks />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    }
+</div>
+
+@code {
+    List<MarkdownFileInfo> posts = new();
+    MarkdownFileInfo? primaryPost;
+    List<MarkdownFileInfo> gridPosts = new();
+    List<MarkdownFileInfo> remainingPosts = new();
+
+    void load() {
+        posts = Posts.GetPosts();
+        primaryPost = posts.FirstOrDefault();
+        gridPosts = posts.Skip(1).Take(6).ToList();
+        remainingPosts = posts.Skip(7).Take(15).ToList();
+    }
+
+    protected override void OnInitialized() => load();
+
+    protected override void OnParametersSet() => load();
+}
diff --git a/MyApp/Components/Pages/Counter.razor b/MyApp/Components/Pages/Counter.razor
new file mode 100644
index 0000000..29150e0
--- /dev/null
+++ b/MyApp/Components/Pages/Counter.razor
@@ -0,0 +1,18 @@
+@page "/counter"
+
+<PageTitle>Counter</PageTitle>
+
+<div class="mt-8 mb-20 mx-auto max-w-fit">
+    <Heading1>Counter</Heading1>
+
+    <div data-component="pages/Counter.mjs"></div>
+
+    <div>
+        <div class="mt-8 flex justify-center gap-x-4">
+            <SrcRazorPage Path="Counter.razor" />
+            <SrcVuePage Path="Counter.mjs" />
+        </div>
+    </div>
+
+</div>
+
diff --git a/MyApp/Components/Pages/Docs.razor b/MyApp/Components/Pages/Docs.razor
new file mode 100644
index 0000000..2fa7402
--- /dev/null
+++ b/MyApp/Components/Pages/Docs.razor
@@ -0,0 +1,54 @@
+@page "/{Slug:regex(^[-\\w]+$)}"
+@inherits AppComponentBase
+@inject MarkdownPages Markdown
+
+@if (doc != null)
+{
+    <PageTitle>@doc.Title</PageTitle>
+
+    <div class="mx-auto">
+        <section class="text-center mt-16 mb-16 md:mb-12">
+            <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-gray-50 sm:text-5xl md:text-6xl">
+                @doc.Title
+            </h1>
+        </section>
+        <div class="mx-auto prose lg:prose-xl mb-24">
+            @BlazorHtml.Raw(doc.Preview)
+        </div>
+    </div>
+}
+else
+{
+    <div class="mt-3 mb-20 mx-auto max-w-fit">
+        @if (error != null)
+        {
+            <ErrorSummary Status=@error />
+        }
+        else
+        {
+            <Loading />
+        }
+    </div>
+}
+
+@code {
+    [Parameter]
+    public required string Slug { get; set; }
+
+    MarkdownFileInfo? doc;
+    ResponseStatus? error;
+
+    void load()
+    {
+        doc = Markdown.GetBySlug(Slug);
+        if (doc == null)
+        {
+            error = new() { Message = $"_pages/{Slug}.md was not found" };
+            return;
+        }
+    }
+
+    protected override void OnInitialized() => load();
+
+    protected override void OnParametersSet() => load();
+}
diff --git a/MyApp/Components/Pages/Error.razor b/MyApp/Components/Pages/Error.razor
new file mode 100644
index 0000000..8aa96e1
--- /dev/null
+++ b/MyApp/Components/Pages/Error.razor
@@ -0,0 +1,42 @@
+@page "/Error"
+@using System.Diagnostics
+
+<PageTitle>Error</PageTitle>
+
+<div class="mx-auto">
+    <section class="text-center mt-16 mb-16 md:mb-12">
+        <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-gray-50 sm:text-5xl md:text-6xl">
+            Error.
+        </h1>
+        <Heading2 class="text-danger">An error occurred while processing your request.</Heading2>
+    </section>
+    <div class="mx-auto prose lg:prose-xl mb-24">
+        @if (ShowRequestId)
+        {
+            <p>
+                <strong>Request ID:</strong> <code>@RequestId</code>
+            </p>
+        }
+
+        <h3>Development Mode</h3>
+        <p>
+            Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+        </p>
+        <p>
+            <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+            It can result in displaying sensitive information from exceptions to end users.
+            For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+            and restarting the app.
+        </p>
+    </div>
+</div>
+
+@code {
+    [CascadingParameter] public HttpContext? HttpContext { get; set; }
+
+    public string? RequestId { get; set; }
+    public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+    protected override void OnInitialized() =>
+        RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+}
diff --git a/MyApp/Components/Pages/Home.razor b/MyApp/Components/Pages/Home.razor
new file mode 100644
index 0000000..19446e4
--- /dev/null
+++ b/MyApp/Components/Pages/Home.razor
@@ -0,0 +1,53 @@
+@page "/"
+
+<PageTitle>Home</PageTitle>
+
+<div class="mx-auto mt-16 max-w-7xl px-4 sm:mt-24">
+    <div class="text-center">
+        <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
+            <span class="block xl:inline">Welcome to</span>
+            <span class="block text-indigo-600 dark:text-indigo-500 xl:inline">Blazor Vue</span>
+        </h1>
+        <p class="mx-auto mt-3 max-w-md text-base text-gray-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
+            Welcome to your new Blazor Vue App, checkout links below to get started:
+        </p>
+        <div class="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
+            <div class="rounded-md shadow">
+                <a href="https://blazor-gallery.servicestack.net/" class="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 md:py-4 md:px-10 md:text-lg">
+                    Blazor Gallery
+                </a>
+            </div>
+            <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
+                <a href="https://docs.servicestack.net/vue/" class="flex w-full items-center justify-center rounded-md border border-transparent bg-white dark:bg-gray-800 dark:border-gray-600 px-8 py-3 text-base font-medium text-indigo-600 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 md:py-4 md:px-10 md:text-lg">
+                    Vue Gallery
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<section class="py-8 flex">
+    <div class="mt-8 mx-auto">
+        <h2 class="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl text-center">
+            Getting Started
+        </h2>
+        <div>
+            <div data-component="GettingStarted" data-props="{template:'blazor-vue'}"></div>
+        </div>
+    </div>
+</section>
+
+<div class="flex justify-center my-20 py-20 bg-slate-100 dark:bg-slate-800">
+    <div class="text-center">
+        <svg class="text-indigo-600 w-36 h-36 inline-block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m18 16l-4-3.2V16H6V8h8v3.2L18 8m2-4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z" /></svg>
+        <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
+            Videos
+        </h1>
+    </div>
+</div>
+
+<VideoGroup
+    Title="Blazor Templates and Components"
+    Summary="Use ServiceStack.Blazor Templates and Components to rapidly develop Blazor Web Apps"
+    Group="blazor"
+    LearnMore="https://servicestack.net/blazor" />
diff --git a/MyApp/Components/Pages/Posts/Author.razor b/MyApp/Components/Pages/Posts/Author.razor
new file mode 100644
index 0000000..a8c1afd
--- /dev/null
+++ b/MyApp/Components/Pages/Posts/Author.razor
@@ -0,0 +1,58 @@
+@page "/posts/author/{Slug}"
+@inject MarkdownBlog Blog
+@inject AppConfig AppConfig
+
+@if (author != null)
+{
+    <PageTitle>@author.Name posts</PageTitle>
+
+    <div class="relative bg-gray-50 dark:bg-gray-900 px-6 pt-16 pb-20 lg:px-8 lg:pt-24 lg:pb-28">
+        <div class="absolute inset-0">
+            <div class="h-1/3 bg-white dark:bg-black sm:h-2/3"></div>
+        </div>
+        <div class="relative mx-auto max-w-7xl">
+            <BlogTitle Heading=@($"All posts written by <b>{author.Name}</b>") />
+        </div>
+        <div class="mt-12 relative mx-auto max-w-7xl">
+            <BlogPosts Posts=@Blog.GetPosts(author: author.Name) />
+
+            <div class="mt-8 text-center">
+                <a class="text-sm font-semibold hover:underline" href="@Blog.GetPostsLink()">view all posts</a>
+            </div>
+        </div>
+    </div>
+}
+else
+{
+    <div class="mt-3 mb-20 mx-auto max-w-fit">
+    @if (error != null)
+    {
+        <ErrorSummary Status=@error />
+    }
+    else
+    {
+        <Loading />
+    }
+    </div>
+}
+
+@code {
+    [Parameter] public required string Slug { get; set; }
+
+    AuthorInfo? author;
+    ResponseStatus? error;
+
+    void load()
+    {
+        author = Blog.GetAuthorBySlug(Slug);
+        if (author == null)
+        {
+            error = new() { Message = $"Author '{Slug}' was not found" };
+            return;
+        }
+    }
+
+    protected override void OnInitialized() => load();
+
+    protected override void OnParametersSet() => load();
+}
diff --git a/MyApp/Components/Pages/Posts/Index.razor b/MyApp/Components/Pages/Posts/Index.razor
new file mode 100644
index 0000000..5d98bd5
--- /dev/null
+++ b/MyApp/Components/Pages/Posts/Index.razor
@@ -0,0 +1,52 @@
+@page "/posts/"
+@inject MarkdownBlog Blog
+
+<div class="relative bg-gray-50 dark:bg-gray-900 px-6 pt-16 pb-20 lg:px-8 lg:pt-24 lg:pb-28">
+    <div class="absolute inset-0">
+        <div class="h-1/3 bg-white dark:bg-black sm:h-2/3"></div>
+    </div>
+    <div class="relative mx-auto max-w-7xl">
+        <BlogTitle Heading=@Blog.Config.BlogDescription />
+    </div>
+    <div class="relative my-4 mx-auto max-w-7xl">
+        <div class="flex flex-wrap justify-center">
+            @foreach (var tag in allTags.OrderByDescending(tag => tagCounts[tag]))
+            {
+                <a href="@Blog.GetTagLink(tag)" class="mr-2 mb-2 text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5">@tag</a>
+            }
+        </div>
+    </div>
+    <div class="relative mb-8 mx-auto max-w-7xl">
+        <div class="flex flex-wrap justify-center">
+            <b class="text-sm font-semibold">@thisYear</b>
+            @foreach (var year in allYears.Where(x => x != thisYear))
+            {
+                <a class="ml-3 text-sm text-indigo-700 font-semibold hover:underline" href="@Blog.GetYearLink(year)">@year</a>
+            }
+        </div>
+    </div>
+    <div class="relative mx-auto max-w-7xl">
+        <BlogPosts Posts=@allPosts.Where(x => x.Date.Value.Year == thisYear).ToList() />
+    </div>
+</div>
+
+@code {
+    List<MarkdownFileInfo> allPosts = new();
+    IEnumerable<string> allTags = [];
+    Dictionary<string, int> tagCounts = new();
+    IOrderedEnumerable<int> allYears => allPosts.Select(x => x.Date.Value.Year).Distinct().OrderByDescending(x => x);
+    int thisYear;
+
+    void load()
+    {
+        allPosts = Blog.GetPosts();
+        allTags = allPosts.SelectMany(x => x.Tags).Distinct();
+        tagCounts = new();
+        allTags.Each(tag => tagCounts[tag] = allPosts.Count(x => x.Tags.Safe().Contains(tag)));
+        thisYear = DateTime.UtcNow.Year;
+    }
+
+    protected override void OnInitialized() => load();
+
+    protected override void OnParametersSet() => load();
+}
diff --git a/MyApp/Components/Pages/Posts/Post.razor b/MyApp/Components/Pages/Posts/Post.razor
new file mode 100644
index 0000000..aa87349
--- /dev/null
+++ b/MyApp/Components/Pages/Posts/Post.razor
@@ -0,0 +1,233 @@
+@page "/posts/{Slug:regex(^[-\\w]+$)}"
+@inject MarkdownBlog Blog
+@inject AppConfig AppConfig
+@using ServiceStack.IO
+
+@if (doc != null)
+{
+    <PageTitle>@doc.Title</PageTitle>
+
+    @if (docCss != null)
+    {
+        <link rel="stylesheet" href="posts/@(Slug).css">
+    }
+
+    <div class="container px-5 mb-32 mx-auto" data-component=@(docMjs != null ? $"posts/{Slug}.mjs" : "")>
+        @if (!string.IsNullOrEmpty(doc.Title))
+        {
+            var authorHref = Blog.GetAuthorLink(author?.Name);
+            var authorProfileUrl = Blog.GetAuthorProfileUrl(doc.Author);
+            <article class="mt-20">
+                <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
+                    @doc.Title
+                </h1>
+                <div class="flex justify-between">
+                    <div class="md:mb-12 flex items-center">
+                        @if (authorHref != null)
+                        {
+                            <a href="@authorHref"><img class="w-12 h-12 rounded-full mr-4 text-cyan-600" src="@authorProfileUrl"></a>
+                        }
+                        else
+                        {
+                            <img class="w-12 h-12 rounded-full mr-4 text-cyan-600" src="@authorProfileUrl">
+                        }
+                        <div class="flex flex-col">
+                            @if (authorHref != null)
+                            {
+                                <a class="text-xl font-semibold hover:underline" href="@authorHref">@author!.Name</a>
+                            }
+                            else if (author != null)
+                            {
+                                <span class="text-xl font-semibold">@author.Name</span>
+                            }
+                            <AuthorLinks Author=@author />
+                        </div>
+                    </div>
+                    <div class="mb-4 max-w-sm" data-mail="JoinMailingList" data-props="{ submitLabel:'Join our newsletter' }"></div>
+                </div>
+                <div class="mb-8 md:mb-16 sm:mx-0">
+                    <div class="sm:mx-0">
+                        <img src="@image" alt="@doc.Title Background" class="shadow-small">
+                    </div>
+                </div>
+                <div class="flex max-w-3xl mx-auto justify-between">
+                    <div>
+                        <div class="mb-4 flex flex-wrap">
+                            @foreach (var tag in doc.Tags)
+                            {
+                                <a href="@Blog.GetTagLink(tag)" class="mr-2 text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5">@tag</a>
+                            }
+                        </div>
+                        @if (doc.Date != null)
+                        {
+                            <div class="max-w-3xl mx-auto">
+                                <div class="mb-6 text-lg text-gray-500">
+                                    <time datetime="@Blog.GetDateTimestamp(doc.Date)">@Blog.GetDateLabel(doc.Date)</time>
+                                    <span class="px-1" aria-hidden="true">&middot;</span>
+                                    <span>@Blog.MinutesToRead(doc.WordCount) min read</span>
+                                </div>
+                            </div>
+                        }
+                    </div>
+                    <div class="flex flex-grow-0">
+                        <div data-post="PostVotes"></div>
+                    </div>
+                </div>
+                <div class="max-w-3xl mx-auto">
+                    <div id="post" class="prose lg:prose-xl max-w-none mb-32">
+                        @BlazorHtml.Raw(Blog.SanitizeVueTemplate(doc.Preview))
+                    </div>
+                </div>
+            </article>
+        }
+        else
+        {
+            <h2 class="py-8 text-center text-3xl font-bold text-gray-900 dark:text-gray-100 sm:text-4xl">
+                Post was not found
+            </h2>
+        }
+    </div>
+
+    @if (author != null && authorPosts.Count > 0)
+    {
+        <div class="bg-gray-50 py-20">
+            <div class="max-w-3xl mx-auto">
+                <div class="flex justify-between">
+                    <div>
+                        @if (authorHref != null)
+                        {
+                            <a href="@authorHref"><img class="w-20 h-20 rounded-full text-cyan-600" src="@authorProfileUrl"></a>
+                        }
+                        else
+                        {
+                            <img class="w-20 h-20 rounded-full text-cyan-600" src="@authorProfileUrl">
+                        }
+
+                        <div class="mt-2 font-medium text-2xl">
+                            Written by @doc.Author
+                        </div>
+                        <div class="text-gray-600">
+                            @author.Bio
+                        </div>
+                    </div>
+                    <div class="flex items-end">
+                        <AuthorLinks Author=@author />
+                    </div>
+                </div>
+
+                <div class="mt-4 border-t">
+                    <div class="py-8 text-lg text-gray-700 font-medium">
+                        More from @author.Name
+                    </div>
+                    <div class="grid grid-cols-2 gap-8">
+                        @foreach (var post in authorPosts)
+                        {
+                            <div>
+                                @* links to other posts requires force load otherwise post Vue App doesn't load *@
+                                <div class="flex flex-col overflow-hidden">
+                                    <div class="flex-shrink-0">
+                                        <a href="@Blog.GetPostLink(post)" data-enhance-nav="false">
+                                            <img class="h-48 w-full object-cover" src="@Blog.GetSplashImage(post)" alt="">
+                                        </a>
+                                    </div>
+                                    <div class="flex flex-1 flex-col justify-between bg-white dark:bg-black p-6">
+                                        <div class="flex-1">
+                                            <p class="text-sm font-medium text-indigo-600 dark:text-indigo-300">
+                                                Article
+                                            </p>
+                                            <a href="@Blog.GetPostLink(post)" class="mt-2 block" data-enhance-nav="false">
+                                                <p class="text-xl font-semibold text-gray-900 dark:text-gray-50 whitespace-nowrap overflow-hidden text-ellipsis" title="@post.Title">
+                                                    @post.Title
+                                                </p>
+                                                <p class="mt-3 text-base text-gray-500">@post.Summary</p>
+                                            </a>
+                                        </div>
+                                        <div class="mt-6 flex items-center">
+                                            <div class="flex-shrink-0">
+                                                <a href="">
+                                                    <span class="sr-only">@post.Author</span>
+                                                    <img class="h-10 w-10 rounded-full" src="@Blog.GetAuthorProfileUrl(post.Author)" alt="@post.Title background">
+                                                </a>
+                                            </div>
+                                            <div class="ml-3">
+                                                <p class="text-sm font-medium text-gray-900">
+                                                    @if (authorHref != null)
+                                                    {
+                                                        <a href="@Blog.GetAuthorLink(post.Author!)" class="hover:underline">@post.Author</a>
+                                                    }
+                                                    else
+                                                    {
+                                                        <span>@post.Author</span>
+                                                    }
+                                                </p>
+                                                <div class="flex space-x-1 text-sm text-gray-500">
+                                                    <time datetime="@Blog.GetDateTimestamp(post.Date)">@Blog.GetDateLabel(post.Date)</time>
+                                                    <span class="px-1" aria-hidden="true">&middot;</span>
+                                                    <span>@Blog.MinutesToRead(post.WordCount) min read</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
+}
+else
+{
+    <div class="mt-3 mb-20 mx-auto max-w-fit">
+        @if (error != null)
+        {
+            <ErrorSummary Status=@error />
+        }
+        else
+        {
+            <Loading />
+        }
+    </div>
+}
+
+@code {
+    [Parameter]
+    public required string Slug { get; set; }
+
+    MarkdownFileInfo? doc;
+    ResponseStatus? error;
+    AuthorInfo? author;
+    string? image;
+    IVirtualFile? docMjs;
+    IVirtualFile? docCss;
+    List<MarkdownFileInfo> authorPosts;
+    string? authorHref;
+    string? authorProfileUrl;
+
+    void load()
+    {
+        doc = Blog.FindPostBySlug(Slug);
+        if (doc == null)
+        {
+            error = new() { Message = $"{Slug} was not found" };
+            return;
+        }
+        author = Blog.Authors.FirstOrDefault(x => x.Name == doc.Author);
+        authorHref = author != null ? Blog.GetAuthorLink(author.Name) : null;
+        authorProfileUrl = author != null ? Blog.GetAuthorProfileUrl(doc.Author) : null;
+        image = doc.Image ?? Blog.FallbackSplashUrl;
+
+        docMjs = Blog.VirtualFiles.GetFile($"/wwwroot/posts/{doc.Slug}.mjs");
+        docCss = Blog.VirtualFiles.GetFile($"/wwwroot/posts/{doc.Slug}.css");
+        authorPosts = Blog.VisiblePosts.Where(x => x.Author == doc.Author && x.Slug != doc.Slug)
+            .OrderByDescending(x => x.Date)
+            .Take(4)
+            .ToList();
+    }
+
+    protected override void OnInitialized() => load();
+
+    protected override void OnParametersSet() => load();
+}
diff --git a/MyApp/Components/Pages/Posts/Tagged.razor b/MyApp/Components/Pages/Posts/Tagged.razor
new file mode 100644
index 0000000..fb335e9
--- /dev/null
+++ b/MyApp/Components/Pages/Posts/Tagged.razor
@@ -0,0 +1,75 @@
+@page "/posts/tagged/{Slug}"
+@inject MarkdownBlog Blog
+@inject AppConfig AppConfig
+
+@if (selectedTag != null)
+{
+    <PageTitle>@selectedTag tagged posts</PageTitle>
+
+    <div class="relative bg-gray-50 dark:bg-gray-900 px-6 pt-16 pb-20 lg:px-8 lg:pt-24 lg:pb-28">
+        <div class="absolute inset-0">
+            <div class="h-1/3 bg-white dark:bg-black sm:h-2/3"></div>
+        </div>
+        <div class="relative mx-auto max-w-7xl">
+            <BlogTitle Heading=@($"All posts tagged in <b>{selectedTag}</b>") />
+        </div>
+        <div class="relative my-4 mx-auto max-w-7xl">
+            <div class="flex flex-wrap justify-center">
+                @foreach (var tag in allTags.OrderByDescending(tag => tagCounts[tag]))
+                {
+                    if (tag == selectedTag)
+                    {
+                        <span class="mr-2 mb-2 text-xs leading-5 font-semibold bg-indigo-600 text-white rounded-full py-1 px-3 flex items-center space-x-2">@tag</span>
+                    }
+                    else
+                    {
+                        <a href="@Blog.GetTagLink(tag)" class="mr-2 mb-2 text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5">@tag</a>
+                    }
+                }
+            </div>
+        </div>
+        <div class="mt-12 relative mx-auto max-w-7xl">
+            <BlogPosts Posts=@Blog.GetPosts(tag: selectedTag ?? "unknown") />
+
+            <div class="mt-8 text-center">
+                <a class="text-sm font-semibold hover:underline" href="@Blog.GetPostsLink()">view all posts</a>
+            </div>
+        </div>
+    </div>
+}
+else
+{
+    <div class="mt-3 mb-20 mx-auto max-w-fit">
+    @if (error != null)
+    {
+        <ErrorSummary Status=@error />
+    }
+    else
+    {
+        <Loading />
+    }
+    </div>
+}
+
+@code {
+    [Parameter] public required string Slug { get; set; }
+
+    string? selectedTag;
+    List<MarkdownFileInfo> allPosts = new();
+    List<string> allTags = new();
+    Dictionary<string, int> tagCounts = new();
+    ResponseStatus? error;
+
+    void load()
+    {
+        selectedTag = Blog.GetTagBySlug(Slug);
+        allPosts = Blog.GetPosts();
+        allTags = allPosts.SelectMany(x => x.Tags).Distinct().ToList();
+        tagCounts = new();
+        allTags.Each(tag => tagCounts[tag] = allPosts.Count(x => x.Tags.Safe().Contains(tag)));
+    }
+
+    protected override void OnInitialized() => load();
+
+    protected override void OnParametersSet() => load();
+}
diff --git a/MyApp/Components/Pages/Posts/Year.razor b/MyApp/Components/Pages/Posts/Year.razor
new file mode 100644
index 0000000..2ce5b67
--- /dev/null
+++ b/MyApp/Components/Pages/Posts/Year.razor
@@ -0,0 +1,69 @@
+@page "/posts/year/{ForYear:int}"
+@inject MarkdownBlog Blog
+@inject AppConfig AppConfig
+
+@if (allYears.Count > 0)
+{
+    <PageTitle>@ForYear posts</PageTitle>
+
+    <div class="relative bg-gray-50 dark:bg-gray-900 px-6 pt-16 pb-20 lg:px-8 lg:pt-24 lg:pb-28">
+        <div class="absolute inset-0">
+            <div class="h-1/3 bg-white dark:bg-black sm:h-2/3"></div>
+        </div>
+        <div class="relative mx-auto max-w-7xl">
+            <BlogTitle Heading=@($"All posts published in <b>{ForYear}</b>") />
+        </div>
+        <div class="mt-4 relative mb-8 mx-auto max-w-7xl">
+            <div class="flex flex-wrap justify-center">
+                @foreach (var year in allYears)
+                {
+                    if (ForYear == year)
+                    {
+                        <b class="ml-3 text-sm font-semibold">@year</b>
+                    }
+                    else
+                    {
+                        <a class="ml-3 text-sm text-indigo-700 font-semibold hover:underline" href="@Blog.GetYearLink(year)">@year</a>
+                    }
+                }
+            </div>
+        </div>
+        <div class="mt-12 relative mx-auto max-w-7xl">
+            <BlogPosts Posts=@Blog.GetPosts(year: ForYear) />
+
+            <div class="mt-8 text-center">
+                <a class="text-sm font-semibold hover:underline" href="@Blog.GetPostsLink()">view all posts</a>
+            </div>
+        </div>
+
+    </div>
+}
+else
+{
+    <div class="mt-3 mb-20 mx-auto max-w-fit">
+    @if (error != null)
+    {
+        <ErrorSummary Status=@error />
+    }
+    else
+    {
+        <Loading />
+    }
+    </div>
+}
+
+@code {
+    [Parameter] public required int ForYear { get; set; }
+
+    List<int> allYears = new();
+    ResponseStatus? error;
+
+    void load()
+    {
+        allYears = Blog.VisiblePosts.Select(x => x.Date.Value.Year).Distinct().OrderByDescending(x => x).ToList();
+    }
+
+    protected override void OnInitialized() => load();
+
+    protected override void OnParametersSet() => load();
+}
diff --git a/MyApp/Components/Pages/Profile.razor b/MyApp/Components/Pages/Profile.razor
new file mode 100644
index 0000000..554f1e7
--- /dev/null
+++ b/MyApp/Components/Pages/Profile.razor
@@ -0,0 +1,65 @@
+@page "/profile"
+@attribute [Authorize]
+@inherits AppAuthComponentBase
+
+@inject NavigationManager NavigationManager
+
+<div class="rounded-lg bg-white dark:bg-black overflow-hidden shadow dark:border dark:border-gray-800 mb-3">
+    <h2 class="sr-only" id="profile-overview-title">Profile Overview</h2>
+    <div class="bg-white dark:bg-black p-6">
+        <div class="sm:flex sm:items-center sm:justify-between">
+            <div class="sm:flex sm:space-x-5">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto w-24 h-24 max-h-24 max-w-24 rounded-full" src=@User.GetPicture() alt="">
+                </div>
+                <div class="mt-4 sm:mt-0 sm:pt-1 sm:text-left">
+                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Welcome back,</p>
+                    <p class="text-xl font-bold text-gray-900 dark:text-gray-200 sm:text-2xl mb-2">@User.GetDisplayName()</p>
+                    @if (User.GetRoles().Length > 0)
+                    {
+                        <div class="mb-2 flex flex-wrap">
+                            @foreach (var role in User.GetRoles())
+                            {
+                                <span @key="role" title="Role"
+                                      class="inline-flex items-center px-2.5 py-0.5 mr-1 mb-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100">
+                                    @role
+                                </span>
+                            }
+                        </div>
+                    }
+                    @if (User.GetPermissions().Length > 0)
+                    {
+                        <div class="mb-2 flex flex-wrap">
+                            @foreach (var perm in User.GetPermissions())
+                            {
+                                <span @key="perm" title="Role"
+                                      class="inline-flex items-center px-2.5 py-0.5 mr-1 mb-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100">
+                                    @perm
+                                </span>
+                            }
+                        </div>
+                    }
+                </div>
+            </div>
+            <div class="mt-5 flex justify-center sm:mt-0">
+                <form action="Account/Logout" method="post">
+                    <AntiforgeryToken />
+                    <input type="hidden" name="ReturnUrl" value="@currentUrl" />
+                    <SecondaryButton type="submit">
+                        Sign Out
+                    </SecondaryButton>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    private string? currentUrl;
+
+    protected override void OnInitialized()
+    {
+        currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
+    }
+}
+
diff --git a/MyApp/Components/Pages/Secure/Bookings.razor b/MyApp/Components/Pages/Secure/Bookings.razor
new file mode 100644
index 0000000..0357f99
--- /dev/null
+++ b/MyApp/Components/Pages/Secure/Bookings.razor
@@ -0,0 +1,56 @@
+@page "/secure/bookings"
+@attribute [Authorize(Roles = "Employee")]
+
+<div class="mt-8 mb-20 mx-auto max-w-fit">
+
+    <Heading1>Bookings AutoQueryGrid</Heading1>
+
+    <div id="bookings" data-component="pages/Bookings.mjs"></div>
+
+    <div>
+        <div class="mt-5 flex justify-center gap-x-4">
+            <SrcRazorPage Path="Secure/Bookings.razor" />
+            <SrcVuePage Path="Bookings.mjs" />
+        </div>
+    </div>
+
+    <div class="pb-20">
+
+        <h4 class="mt-20 text-center text-xl">
+            Manage Bookings in
+            <HyperLink class="font-semibold" href="/admin/#Bookings" data-enhance-nav="false">Admin</HyperLink>,
+            <HyperLink class="font-semibold" href="/locode/QueryBookings" data-enhance-nav="false">Locode</HyperLink> or
+            <HyperLink class="font-semibold" href="/ui/QueryBookings" data-enhance-nav="false">API Explorer</HyperLink>
+        </h4>
+
+        <div class="mt-20 mx-auto text-gray-500 max-w-screen-lg">
+            <h2 class="mt-4 text-3xl sm:text-4xl text-slate-900 font-extrabold tracking-tight dark:text-slate-50">
+                Create a multi-user Booking system in minutes
+            </h2>
+            <p class="my-3 mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl">
+                The Bookings APIs are built using
+                <HyperLink class="font-semibold" href="https://docs.servicestack.net/autoquery-crud">AutoQuery CRUD</HyperLink>,
+                allowing for rapid development of typed CRUD Services using only declarative POCO DTOs, enabling
+                developing entire
+                <HyperLink class="font-semibold" href="https://docs.servicestack.net/autoquery-crud#advanced-crud-example">audited</HyperLink>
+                &amp; <HyperLink class="font-semibold" href="https://docs.servicestack.net/autoquery-audit-log">verifiable</HyperLink>
+                data-driven systems in mins
+                <HyperLink class="font-semibold" href="https://docs.servicestack.net/autoquery-crud-bookings">more...</HyperLink>
+            </p>
+            <iframe class="mt-4 w-full aspect-video" src="https://www.youtube.com/embed/rSFiikDjGos" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+        </div>
+
+        <div class="mt-20 mx-auto text-gray-500 max-w-screen-lg">
+            <h2 class="mt-4 text-3xl sm:text-4xl text-slate-900 font-extrabold tracking-tight dark:text-slate-50">
+                Instantly Manage your data using AutoQueryGrid Vue
+            </h2>
+            <p class="my-3 mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl">
+                This walkthrough explores the ServiceStack Vue 3 library and the functionality of the AutoQueryGrid component.
+                The AutoQueryGrid component simplifies the integration of AutoQuery services by generating a customizable UI.
+            </p>
+            <iframe class="mt-4 w-full aspect-video" src="https://www.youtube.com/embed/znCoC-Ct0Ps" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+        </div>
+
+    </div>
+
+</div>
diff --git a/MyApp/Components/Pages/Videos.razor b/MyApp/Components/Pages/Videos.razor
new file mode 100644
index 0000000..5d80d2e
--- /dev/null
+++ b/MyApp/Components/Pages/Videos.razor
@@ -0,0 +1,25 @@
+@page "/videos"
+
+<PageTitle>Video Library</PageTitle>
+
+<div class="flex justify-center my-10">
+    <div class="text-center">
+        <svg class="text-indigo-600 w-36 h-36 inline-block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m18 16l-4-3.2V16H6V8h8v3.2L18 8m2-4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z" /></svg>
+        <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
+            Videos
+        </h1>
+    </div>
+</div>
+
+<VideoGroup
+    Title="Blazor Web Apps"
+    Summary="Use ServiceStack.Blazor Templates and Components to rapidly develop Blazor Web Apps"
+    Group="blazor"
+    LearnMore="https://servicestack.net/blazor"
+    Background="bg-slate-100 dark:bg-slate-800" />
+
+<VideoGroup
+    Title="Vue Components"
+    Summary="Learn about productive features in our growing Vue Component Library"
+    Group="vue"
+    LearnMore="https://docs.servicestack.net/vue/" />
diff --git a/MyApp/Components/Pages/Weather.razor b/MyApp/Components/Pages/Weather.razor
new file mode 100644
index 0000000..f666ca0
--- /dev/null
+++ b/MyApp/Components/Pages/Weather.razor
@@ -0,0 +1,57 @@
+@page "/weather"
+@attribute [StreamRendering(true)]
+
+<PageTitle>Weather</PageTitle>
+
+<div class="mt-8 mb-20 mx-auto max-w-screen-md">
+    <Heading1>Weather</Heading1>
+
+    <p class="my-4">This component demonstrates showing data.</p>
+
+    @if (forecasts == null)
+    {
+        <Loading />
+    }
+    else
+    {
+        <DataGrid Items=@forecasts class="max-w-screen-md" TableStyle="TableStyle.StripedRows | TableStyle.UppercaseHeadings">
+            <Column Field="(WeatherForecast x) => x.Date" Format="dd/MM/yyyy" />
+            <Column Title="Temp. (C)" Field="(WeatherForecast x) => x.TemperatureC" />
+            <Column Title="Temp. (F)" Field="(WeatherForecast x) => x.TemperatureF" />
+            <Column Field="(WeatherForecast x) => x.Summary" />
+        </DataGrid>
+    }
+
+    <div>
+        <div class="mt-5 flex justify-center gap-x-4">
+            <SrcRazorPage Path="Weather.razor" />
+        </div>
+    </div>
+</div>
+
+@code {
+    private WeatherForecast[]? forecasts;
+
+    protected override async Task OnInitializedAsync()
+    {
+        // Simulate asynchronous loading to demonstrate streaming rendering
+        await Task.Delay(500);
+
+        var startDate = DateOnly.FromDateTime(DateTime.Now);
+        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
+        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
+        {
+            Date = startDate.AddDays(index),
+            TemperatureC = Random.Shared.Next(-20, 55),
+            Summary = summaries[Random.Shared.Next(summaries.Length)]
+        }).ToArray();
+    }
+
+    public class WeatherForecast
+    {
+        public DateOnly Date { get; set; }
+        public int TemperatureC { get; set; }
+        public string? Summary { get; set; }
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+    }
+}
diff --git a/MyApp/Components/Routes.razor b/MyApp/Components/Routes.razor
new file mode 100644
index 0000000..eca2ffc
--- /dev/null
+++ b/MyApp/Components/Routes.razor
@@ -0,0 +1,10 @@
+<Router AppAssembly="@typeof(Program).Assembly">
+    <Found Context="routeData">
+        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)">
+           <NotAuthorized>
+                <MyApp.Components.Pages.Account.Login />
+            </NotAuthorized>
+        </AuthorizeRouteView>
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+</Router>
diff --git a/MyApp/Components/Shared/AuthorLinks.razor b/MyApp/Components/Shared/AuthorLinks.razor
new file mode 100644
index 0000000..8c362df
--- /dev/null
+++ b/MyApp/Components/Shared/AuthorLinks.razor
@@ -0,0 +1,57 @@
+@if (Author?.GitHubUrl != null || Author?.TwitterUrl != null || Author?.ThreadsUrl != null || Author?.MastodonUrl != null)
+{
+    <ul role="list" class="flex">
+        @if (Author.TwitterUrl != null)
+        {
+            <li>
+                <a title="Follow on Twitter" class="mr-1 group flex text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-500" href="@Author.TwitterUrl">
+                    <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-zinc-500 fill-zinc-500 transition group-hover:fill-indigo-500">
+                        <path d="M20.055 7.983c.011.174.011.347.011.523 0 5.338-3.92 11.494-11.09 11.494v-.003A10.755 10.755 0 0 1 3 18.186c.308.038.618.057.928.058a7.655 7.655 0 0 0 4.841-1.733c-1.668-.032-3.13-1.16-3.642-2.805a3.753 3.753 0 0 0 1.76-.07C5.07 13.256 3.76 11.6 3.76 9.676v-.05a3.77 3.77 0 0 0 1.77.505C3.816 8.945 3.288 6.583 4.322 4.737c1.98 2.524 4.9 4.058 8.034 4.22a4.137 4.137 0 0 1 1.128-3.86A3.807 3.807 0 0 1 19 5.274a7.657 7.657 0 0 0 2.475-.98c-.29.934-.9 1.729-1.713 2.233A7.54 7.54 0 0 0 22 5.89a8.084 8.084 0 0 1-1.945 2.093Z"></path>
+                    </svg>
+                </a>
+            </li>
+        }
+        @if (Author.ThreadsUrl != null)
+        {
+            <li>
+                <a title="Follow on threads.net" class="mr-1 group flex text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-500" href="@Author.ThreadsUrl">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-none text-zinc-500 fill-zinc-500 transition group-hover:fill-indigo-500" width="24" height="24" viewBox="0 0 24 24">
+                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7.5c-1.333-3-3.667-4.5-7-4.5c-5 0-8 2.5-8 9s3.5 9 8 9s7-3 7-5s-1-5-7-5c-2.5 0-3 1.25-3 2.5C9 15 10 16 11.5 16c2.5 0 3.5-1.5 3.5-5s-2-4-3-4s-1.833.333-2.5 1" />
+                    </svg>
+                </a>
+            </li>
+        }
+        @if (Author.MastodonUrl != null)
+        {
+            <li>
+                <a title="Follow on Mastodon" class="mr-1 group flex text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-500" href="@Author.MastodonUrl">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-none text-zinc-500 fill-zinc-500 transition group-hover:fill-indigo-500" width="24" height="24" viewBox="0 0 24 24">
+                        <path fill="currentColor" d="M20.94 14c-.28 1.41-2.44 2.96-4.97 3.26c-1.31.15-2.6.3-3.97.24c-2.25-.11-4-.54-4-.54v.62c.32 2.22 2.22 2.35 4.03 2.42c1.82.05 3.44-.46 3.44-.46l.08 1.65s-1.28.68-3.55.81c-1.25.07-2.81-.03-4.62-.5c-3.92-1.05-4.6-5.24-4.7-9.5l-.01-3.43c0-4.34 2.83-5.61 2.83-5.61C6.95 2.3 9.41 2 11.97 2h.06c2.56 0 5.02.3 6.47.96c0 0 2.83 1.27 2.83 5.61c0 0 .04 3.21-.39 5.43M18 8.91c0-1.08-.3-1.91-.85-2.56c-.56-.63-1.3-.96-2.23-.96c-1.06 0-1.87.41-2.42 1.23l-.5.88l-.5-.88c-.56-.82-1.36-1.23-2.43-1.23c-.92 0-1.66.33-2.23.96C6.29 7 6 7.83 6 8.91v5.26h2.1V9.06c0-1.06.45-1.62 1.36-1.62c1 0 1.5.65 1.5 1.93v2.79h2.07V9.37c0-1.28.5-1.93 1.51-1.93c.9 0 1.35.56 1.35 1.62v5.11H18V8.91Z" />
+                    </svg>
+                </a>
+            </li>
+        }
+        @if (Author.GitHubUrl != null)
+        {
+            <li>
+                <a title="Follow on GitHub" class="mr-1 group flex text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-500" href="@Author.GitHubUrl">
+                    <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-zinc-500 fill-zinc-500 transition group-hover:fill-indigo-500">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"></path>
+                    </svg>
+                </a>
+            </li>
+        }
+        @if (Author.Email != null)
+        {
+            <li>
+                <a title="Email @Author.Name" href="mailto:@Author.Email" class="mr-1 group flex text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-500">
+                    <svg class="h-6 w-6 flex-none text-zinc-500 fill-zinc-500 transition group-hover:fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.588 1.413T20 20H4Zm8-7L4 8v10h16V8l-8 5Zm0-2l8-5H4l8 5ZM4 8V6v12V8Z" /></svg>
+                </a>
+            </li>
+        }
+    </ul>
+}
+
+@code {
+    [Parameter] public AuthorInfo? Author { get; set; }
+}
\ No newline at end of file
diff --git a/MyApp/Components/Shared/BlogPosts.razor b/MyApp/Components/Shared/BlogPosts.razor
new file mode 100644
index 0000000..f9ced4c
--- /dev/null
+++ b/MyApp/Components/Shared/BlogPosts.razor
@@ -0,0 +1,58 @@
+@inject MarkdownBlog Blog
+
+<div class="mx-auto grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
+    @foreach (var post in Posts)
+    {
+        var authorHref = Blog.GetAuthorLink(post.Author);
+        <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
+            <div class="flex-shrink-0">
+                <a href="@Blog.GetPostLink(post)">
+                    <img class="h-48 w-full object-cover" src="@Blog.GetSplashImage(post)" alt="">
+                </a>
+            </div>
+            <div class="flex flex-1 flex-col justify-between bg-white dark:bg-black p-6">
+                <div class="flex-1">
+                    <p class="text-sm font-medium text-indigo-600 dark:text-indigo-300">
+                        Article
+                    </p>
+                    <a href="@Blog.GetPostLink(post)" class="mt-2 block">
+                        <p class="text-xl font-semibold text-gray-900 dark:text-gray-50 whitespace-nowrap overflow-hidden text-ellipsis" title="@post.Title">
+                            @post.Title
+                        </p>
+                        <p class="mt-3 text-base text-gray-500">@post.Summary</p>
+                    </a>
+                </div>
+                <div class="mt-6 flex items-center">
+                    <div class="flex-shrink-0">
+                        <a href="">
+                            <span class="sr-only">@post.Author</span>
+                            <img class="h-10 w-10 rounded-full" src="@Blog.GetAuthorProfileUrl(post.Author)" alt="@post.Title background">
+                        </a>
+                    </div>
+                    <div class="ml-3">
+                        <p class="text-sm font-medium text-gray-900">
+                            @if (authorHref != null)
+                            {
+                                <a href="@Blog.GetAuthorLink(post.Author!)" class="hover:underline">@post.Author</a>
+                            }
+                            else
+                            {
+                                <span>@post.Author</span>
+                            }
+                        </p>
+                        <div class="flex space-x-1 text-sm text-gray-500">
+                            <time datetime="@Blog.GetDateTimestamp(post.Date)">@Blog.GetDateLabel(post.Date)</time>
+                            <span class="px-1" aria-hidden="true">&middot;</span>
+                            <span>@Blog.MinutesToRead(post.WordCount) min read</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter]
+    public required List<MarkdownFileInfo> Posts { get; set; }
+}
diff --git a/MyApp/Components/Shared/BlogTitle.razor b/MyApp/Components/Shared/BlogTitle.razor
new file mode 100644
index 0000000..f29ded5
--- /dev/null
+++ b/MyApp/Components/Shared/BlogTitle.razor
@@ -0,0 +1,12 @@
+@inject MarkdownBlog Blog
+
+<div class="text-center">
+    <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">@Blog.Config.BlogTitle</h2>
+    <p class="mx-auto mt-3 max-w-2xl text-xl text-gray-500 sm:mt-4">
+        @BlazorHtml.Raw(Heading)
+    </p>
+</div>
+
+@code {
+    [Parameter] public required string Heading { get; set; }
+}
diff --git a/MyApp/Components/Shared/FollowLinks.razor b/MyApp/Components/Shared/FollowLinks.razor
new file mode 100644
index 0000000..e6d96f4
--- /dev/null
+++ b/MyApp/Components/Shared/FollowLinks.razor
@@ -0,0 +1,38 @@
+<ul role="list">
+    <li class="flex">
+        <a class="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500" href="about">
+            <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
+                <path d="M20.055 7.983c.011.174.011.347.011.523 0 5.338-3.92 11.494-11.09 11.494v-.003A10.755 10.755 0 0 1 3 18.186c.308.038.618.057.928.058a7.655 7.655 0 0 0 4.841-1.733c-1.668-.032-3.13-1.16-3.642-2.805a3.753 3.753 0 0 0 1.76-.07C5.07 13.256 3.76 11.6 3.76 9.676v-.05a3.77 3.77 0 0 0 1.77.505C3.816 8.945 3.288 6.583 4.322 4.737c1.98 2.524 4.9 4.058 8.034 4.22a4.137 4.137 0 0 1 1.128-3.86A3.807 3.807 0 0 1 19 5.274a7.657 7.657 0 0 0 2.475-.98c-.29.934-.9 1.729-1.713 2.233A7.54 7.54 0 0 0 22 5.89a8.084 8.084 0 0 1-1.945 2.093Z"></path>
+            </svg><span class="ml-4">Follow on Twitter</span>
+        </a>
+    </li>
+    <li class="mt-4 flex">
+        <a class="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500" href="about">
+            <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
+                <path d="M12 3c-2.444 0-2.75.01-3.71.054-.959.044-1.613.196-2.185.418A4.412 4.412 0 0 0 4.51 4.511c-.5.5-.809 1.002-1.039 1.594-.222.572-.374 1.226-.418 2.184C3.01 9.25 3 9.556 3 12s.01 2.75.054 3.71c.044.959.196 1.613.418 2.185.23.592.538 1.094 1.039 1.595.5.5 1.002.808 1.594 1.038.572.222 1.226.374 2.184.418C9.25 20.99 9.556 21 12 21s2.75-.01 3.71-.054c.959-.044 1.613-.196 2.185-.419a4.412 4.412 0 0 0 1.595-1.038c.5-.5.808-1.002 1.038-1.594.222-.572.374-1.226.418-2.184.044-.96.054-1.267.054-3.711s-.01-2.75-.054-3.71c-.044-.959-.196-1.613-.419-2.185A4.412 4.412 0 0 0 19.49 4.51c-.5-.5-1.002-.809-1.594-1.039-.572-.222-1.226-.374-2.184-.418C14.75 3.01 14.444 3 12 3Zm0 1.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.67.31.421.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.671.043.95.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.421-.358.72-.673 1.036a2.79 2.79 0 0 1-1.035.673c-.317.123-.794.27-1.671.31-.95.043-1.234.052-3.637.052s-2.688-.009-3.637-.052c-.877-.04-1.354-.187-1.67-.31a2.789 2.789 0 0 1-1.036-.673 2.79 2.79 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.95-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.421.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.671-.31.95-.043 1.234-.052 3.637-.052Z"></path>
+                <path d="M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0-7.622a4.622 4.622 0 1 0 0 9.244 4.622 4.622 0 0 0 0-9.244Zm5.884-.182a1.08 1.08 0 1 1-2.16 0 1.08 1.08 0 0 1 2.16 0Z"></path>
+            </svg><span class="ml-4">Follow on Instagram</span>
+        </a>
+    </li>
+    <li class="mt-4 flex">
+        <a class="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500" href="about">
+            <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"></path>
+            </svg><span class="ml-4">Follow on GitHub</span>
+        </a>
+    </li>
+    <li class="mt-4 flex">
+        <a class="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500" href="about">
+            <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
+                <path d="M18.335 18.339H15.67v-4.177c0-.996-.02-2.278-1.39-2.278-1.389 0-1.601 1.084-1.601 2.205v4.25h-2.666V9.75h2.56v1.17h.035c.358-.674 1.228-1.387 2.528-1.387 2.7 0 3.2 1.778 3.2 4.091v4.715zM7.003 8.575a1.546 1.546 0 01-1.548-1.549 1.548 1.548 0 111.547 1.549zm1.336 9.764H5.666V9.75H8.34v8.589zM19.67 3H4.329C3.593 3 3 3.58 3 4.297v15.406C3 20.42 3.594 21 4.328 21h15.338C20.4 21 21 20.42 21 19.703V4.297C21 3.58 20.4 3 19.666 3h.003z"></path>
+            </svg><span class="ml-4">Follow on LinkedIn</span>
+        </a>
+    </li>
+    <li class="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40 flex">
+        <a class="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500" href="mailto:spencer@planetaria.tech">
+            <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
+                <path fill-rule="evenodd" d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"></path>
+            </svg><span class="ml-4">spencer@planetaria.tech</span>
+        </a>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/MyApp/Components/Shared/Footer.razor b/MyApp/Components/Shared/Footer.razor
new file mode 100644
index 0000000..c826814
--- /dev/null
+++ b/MyApp/Components/Shared/Footer.razor
@@ -0,0 +1,35 @@
+<footer class="bg-accent-1 dark:bg-black border-t border-accent-2 dark:border-gray-600">
+
+    <nav class="pt-8 columns-2 sm:flex sm:justify-center sm:space-x-12" aria-label="Footer">
+        <div class="pb-6">
+            <NavLink href="about" class="text-sm leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50">About</NavLink>
+        </div>
+
+        <div class="pb-6">
+            <NavLink href="deploy" class="text-sm leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50">Deploy</NavLink>
+        </div>
+
+        <div class="pb-6">
+            <NavLink href="blog" class="text-sm leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50">Blog</NavLink>
+        </div>
+
+        <div class="pb-6">
+            <NavLink href="posts" class="text-sm leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50">Archive</NavLink>
+        </div>
+
+        <div class="pb-6">
+            <NavLink href="privacy" class="text-sm leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50">Privacy</NavLink>
+        </div>
+    </nav>
+
+    <div class="container mx-auto px-5">
+        <div class="py-20 flex flex-col lg:flex-row items-center">
+            <h3 class="text-4xl lg:text-6xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">A ServiceStack Project</h3>
+            <div class="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
+                <a href="https://docs.servicestack.net" class="mx-3 bg-black dark:bg-gray-700 hover:bg-white dark:hover:bg-gray-200 hover:text-black border border-black text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 lg:mb-0">Read Documentation</a>
+                <a href="https://github.com/NetCoreTemplates/blazor-vue" class="mx-3 font-bold hover:underline">View on GitHub</a>
+            </div>
+        </div>
+    </div>
+
+</footer>
diff --git a/MyApp/Components/Shared/FormLoading.razor b/MyApp/Components/Shared/FormLoading.razor
new file mode 100644
index 0000000..f9e1663
--- /dev/null
+++ b/MyApp/Components/Shared/FormLoading.razor
@@ -0,0 +1,44 @@
+@using ServiceStack
+@inject IJSRuntime JsRuntime
+@inject NavigationManager NavigationManager
+
+@if (Loading)
+{
+    <div class=@CssUtils.ClassNames("flex", @class) title="loading...">
+    @if (Icon)
+    {
+        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30">
+            <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
+            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"/>
+            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"/>
+            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"/>
+            </rect>
+            <rect x="8" y="10" width="4" height="10" fill="#333" opacity="0.2">
+            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"/>
+            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"/>
+            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"/>
+            </rect>
+            <rect x="16" y="10" width="4" height="10" fill="#333" opacity="0.2">
+            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"/>
+            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"/>
+            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"/>
+            </rect>
+        </svg>
+    }
+        <span class="ml-2 mt-1 text-gray-400">@Text</span>
+    </div>
+}
+
+@code {
+    [Parameter]
+    public bool Loading { get; set; }
+
+    [Parameter]
+    public bool Icon { get; set; } = true;
+
+    [Parameter]
+    public string Text { get; set; } = "loading...";
+
+    [Parameter]
+    public string? @class { get; set; }
+}
diff --git a/MyApp/Components/Shared/Header.razor b/MyApp/Components/Shared/Header.razor
new file mode 100644
index 0000000..b7fccc3
--- /dev/null
+++ b/MyApp/Components/Shared/Header.razor
@@ -0,0 +1,113 @@
+@inherits AppAuthComponentBase
+@implements IDisposable
+@inject NavigationManager NavigationManager
+
+<header class="border-b border-gray-200 dark:border-gray-800 pr-3">
+    <div class="flex flex-wrap items-center">
+        <div class="absolute z-10 top-2 left-2 sm:static flex-shrink flex-grow-0">
+            <div class="cursor-pointer">
+                <NavLink class="navbar-brand flex items-center" href="/">
+                    <img class="w-8 h-8 sm:ml-2 sm:w-12 sm:h-12" src="/img/logo.svg" alt="MyApp logo">
+                    <span class="hidden ml-2 sm:block text-2xl font-semibold">My App</span>
+                </NavLink>
+            </div>
+        </div>
+        <div class="flex flex-grow flex-shrink flex-nowrap justify-end items-center">
+            <nav class="relative flex flex-grow leading-6 font-semibold text-slate-700 dark:text-slate-200">
+                <ul class="flex flex-wrap items-center justify-end w-full m-0">
+
+                    <li class="relative flex flex-wrap just-fu-start m-0">
+                        <NavLink href="counter" class="p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400" ActiveClass="text-blue-700 dark:text-blue-300">Counter</NavLink>
+                    </li>
+                    <li class="relative flex flex-wrap just-fu-start m-0">
+                        <NavLink href="weather" class="p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400" ActiveClass="text-blue-700 dark:text-blue-300">Weather</NavLink>
+                    </li>
+                    <li class="relative flex flex-wrap just-fu-start m-0">
+                        <NavLink href="secure/bookings" class="p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400" ActiveClass="text-blue-700 dark:text-blue-300">Bookings</NavLink>
+                    </li>
+                    <li class="relative flex flex-wrap just-fu-start m-0">
+                        <NavLink href="blog" class="p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400" ActiveClass="text-blue-700 dark:text-blue-300">Blog</NavLink>
+                    </li>
+                    <li class="relative flex flex-wrap just-fu-start m-0">
+                        <NavLink href="videos" class="p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400" ActiveClass="text-blue-700 dark:text-blue-300">Videos</NavLink>
+                    </li>
+                    <AuthorizeView Roles="Admin">
+                        <Authorized>
+                            <li class="relative flex flex-wrap just-fu-start m-0">
+                                <NavLink href="admin/" class="p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400" ActiveClass="text-blue-700 dark:text-blue-300">Admin</NavLink>
+                            </li>
+                        </Authorized>
+                    </AuthorizeView>
+                    <AuthorizeView>
+                        <Authorized>
+                            <li>
+                                <div class="mx-3 relative">
+                                    <div>
+                                        <a href="Account/Manage"
+                                            class="max-w-xs bg-white dark:bg-black rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50 dark:lg:hover:bg-gray-900 dark:ring-offset-black" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+                                            <img class="h-8 w-8 rounded-full" src="@User.GetPicture()" alt="">
+                                            <span class="hidden ml-3 text-gray-700 dark:text-gray-300 text-sm font-medium lg:block">
+                                                <span class="sr-only">Open user menu for </span>
+                                                @User.GetDisplayName()
+                                            </span>
+                                        </a>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="mr-3 relative flex flex-wrap just-fu-start m-0">
+                                <form action="Account/Logout" method="post">
+                                    <AntiforgeryToken />
+                                    <input type="hidden" name="ReturnUrl" value="@currentUrl" />
+                                    <SecondaryButton type="submit">
+                                        Sign Out
+                                    </SecondaryButton>
+                                </form>
+                            </li>
+                        </Authorized>
+                        <Authorizing>
+                            <li class="relative flex flex-wrap just-fu-start m-0">
+                                Authorizing...
+                            </li>
+                        </Authorizing>
+                        <NotAuthorized>
+                            <li class="relative flex flex-wrap just-fu-start m-0">
+                                <NavLink href="Account/Login" class="m-2 mr-4">
+                                    <SecondaryButton>
+                                        Sign In
+                                    </SecondaryButton>
+                                </NavLink>
+                            </li>
+                        </NotAuthorized>
+                    </AuthorizeView>
+
+                    <li class="relative flex flex-wrap just-fu-start m-0">
+                        <DarkModeToggleLite />
+                    </li>
+
+                </ul>
+            </nav>
+        </div>
+    </div>
+</header>
+
+@code {
+    private string? currentUrl;
+
+    protected override void OnInitialized()
+    {
+        currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
+        NavigationManager.LocationChanged += OnLocationChanged;
+    }
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        currentUrl = NavigationManager.ToBaseRelativePath(e.Location);
+        StateHasChanged();
+    }
+
+    public void Dispose()
+    {
+        NavigationManager.LocationChanged -= OnLocationChanged;
+    }
+}
+
diff --git a/MyApp/Components/Shared/ShellCommand.razor b/MyApp/Components/Shared/ShellCommand.razor
new file mode 100644
index 0000000..14653db
--- /dev/null
+++ b/MyApp/Components/Shared/ShellCommand.razor
@@ -0,0 +1,46 @@
+@inject IJSRuntime JS
+
+<div class=@CssUtils.ClassNames("lang relative bg-gray-700 text-gray-300 pl-5 py-3 sm:rounded flex", @class)>
+    <div class="flex ml-2 w-full justify-between cursor-pointer" @onclick="copyCommand">
+        <label @ref="elCmd">@ChildContent</label>
+        <small class="text-xs text-gray-400 px-3 -mt-1">sh</small>
+    </div>
+@if (SuccessText != string.Empty)
+{
+    <div class="absolute right-0 -mr-28 -mt-3 rounded-md bg-green-50 p-3">
+        <div class="flex">
+            <div class="flex-shrink-0">
+                <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+                </svg>
+            </div>
+            <div class="ml-3">
+                <p class="text-sm font-medium text-green-800">
+                    @SuccessText
+                </p>
+            </div>
+        </div>
+    </div>
+}
+</div>
+
+@code {
+    [Parameter]
+    public string? @class { get; set; }
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    string SuccessText { get; set; } = string.Empty;
+
+    private ElementReference elCmd;
+
+    async Task copyCommand(MouseEventArgs e)
+    {
+        SuccessText = "copied";
+        var text = await JS.InvokeAsync<string>("JS.invoke", elCmd, "innerText");
+        await JS.InvokeVoidAsync("navigator.clipboard.writeText", text);
+        await Task.Delay(3_000);
+        SuccessText = string.Empty;
+    }
+}
diff --git a/MyApp/Components/Shared/SrcLink.razor b/MyApp/Components/Shared/SrcLink.razor
new file mode 100644
index 0000000..a052699
--- /dev/null
+++ b/MyApp/Components/Shared/SrcLink.razor
@@ -0,0 +1,39 @@
+@if (IconSrc != null)
+{
+    <a href="@BaseUrl.CombineWith(Href)" class="mr-3 text-gray-500 hover:text-gray-600 text-decoration-none">
+        <img src="@IconSrc" class="w-5 h-5 inline-flex text-purple-800 mr-1" alt="file icon">@FileName
+    </a>
+}
+else
+{
+    <a href="@BaseUrl.CombineWith(Href)" class="mr-3 text-gray-400 hover:text-gray-500 text-decoration-none">
+        @if (Href.EndsWith("js"))
+        {
+            <svg class="w-5 h-5 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 221"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z" /><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z" /><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z" /></svg>
+        }
+        else if (Href.EndsWith(".html"))
+        {
+            <svg class="w-5 h-5 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m20 4l-2 14.5l-6 2l-6-2L4 4z" /><path d="M15.5 8h-7l.5 4h6l-.5 3.5l-2.5.75l-2.5-.75l-.1-.5" /></g></svg>
+        }
+        else if (Href.EndsWith(".razor"))
+        {
+            <svg class="w-5 h-5 inline" style="color:rgb(91, 33, 182)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M23.834 8.101a13.912 13.912 0 0 1-13.643 11.72a10.105 10.105 0 0 1-1.994-.12a6.111 6.111 0 0 1-5.082-5.761a5.934 5.934 0 0 1 11.867-.084c.025.983-.401 1.846-1.277 1.871c-.936 0-1.374-.668-1.374-1.567v-2.5a1.531 1.531 0 0 0-1.52-1.533H8.715a3.648 3.648 0 1 0 2.695 6.08l.073-.11l.074.121a2.58 2.58 0 0 0 2.2 1.048a2.909 2.909 0 0 0 2.695-3.04a7.912 7.912 0 0 0-.217-1.933a7.404 7.404 0 0 0-14.64 1.603a7.497 7.497 0 0 0 7.308 7.405s.549.05 1.167.035a15.803 15.803 0 0 0 8.475-2.528c.036-.025.072.025.048.061a12.44 12.44 0 0 1-9.69 3.963a8.744 8.744 0 0 1-8.9-8.972a9.049 9.049 0 0 1 3.635-7.247a8.863 8.863 0 0 1 5.229-1.726h2.813a7.915 7.915 0 0 0 5.839-2.578a.11.11 0 0 1 .059-.034a.112.112 0 0 1 .12.053a.113.113 0 0 1 .015.067a7.934 7.934 0 0 1-1.227 3.549a.107.107 0 0 0-.014.06a.11.11 0 0 0 .073.095a.109.109 0 0 0 .062.004a8.505 8.505 0 0 0 5.913-4.876a.155.155 0 0 1 .055-.053a.15.15 0 0 1 .147 0a.153.153 0 0 1 .054.053A10.779 10.779 0 0 1 23.834 8.1zM8.895 11.628a2.188 2.188 0 1 0 2.188 2.188v-2.042a.158.158 0 0 0-.15-.15z" fill="currentColor"/></svg>
+        }
+        else if (Href.EndsWith(".cshtml"))
+        {
+            <svg class="w-5 h-5 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M23.844 27.692a16.332 16.332 0 0 1-6.645 1.3q-6.364 0-10.013-3.243a11.3 11.3 0 0 1-3.649-8.9a13.716 13.716 0 0 1 3.785-9.898A12.716 12.716 0 0 1 16.9 3.008a11.676 11.676 0 0 1 8.425 3.006a9.994 9.994 0 0 1 3.142 7.533a10.187 10.187 0 0 1-2.318 7.114a7.532 7.532 0 0 1-5.817 2.547a2.613 2.613 0 0 1-1.845-.642a2.323 2.323 0 0 1-.764-1.6a4.9 4.9 0 0 1-4.148 2.243a4.6 4.6 0 0 1-3.507-1.479a5.706 5.706 0 0 1-1.384-4.063a9.913 9.913 0 0 1 2.2-6.357q2.2-2.763 4.8-2.763a5.063 5.063 0 0 1 4.256 1.716l.311-1.338h2.405l-2.081 9.08a10.716 10.716 0 0 0-.352 2.243q0 .972.744.972a4.819 4.819 0 0 0 3.877-2.047a8.93 8.93 0 0 0 1.621-5.681a7.98 7.98 0 0 0-2.675-6.175a9.887 9.887 0 0 0-6.919-2.432a10.6 10.6 0 0 0-8.158 3.467a12.066 12.066 0 0 0-3.2 8.495a9.561 9.561 0 0 0 3.06 7.573q3.06 2.7 8.586 2.7a13.757 13.757 0 0 0 5.675-1.054ZM19.466 12.25a3.977 3.977 0 0 0-3.6-1.716q-1.824 0-3.263 2.23a8.726 8.726 0 0 0-1.439 4.824q0 3.635 2.905 3.635a3.771 3.771 0 0 0 2.651-1.183a6.309 6.309 0 0 0 1.7-3.2Z" /></svg>
+        }
+        else
+        {
+            <svg class="w-5 h-5 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4Z" /></svg>
+        }
+        <span class="pl-1">@FileName</span>
+    </a>
+}
+@code {
+    const string BaseUrl = "https://github.com/NetCoreTemplates/blazor-vue/blob/main";
+
+    [Parameter] public string? IconSrc { get; set; }
+    [Parameter] public required string Href { get; set; }
+    string FileName => Href.LastRightPart('/');
+}
diff --git a/MyApp/Components/Shared/SrcRazorPage.razor b/MyApp/Components/Shared/SrcRazorPage.razor
new file mode 100644
index 0000000..1095089
--- /dev/null
+++ b/MyApp/Components/Shared/SrcRazorPage.razor
@@ -0,0 +1,5 @@
+<SrcLink Href=@($"/MyApp/Components/Pages/{Path}") />
+
+@code {
+    [Parameter] public required string Path { get; set; }
+}
diff --git a/MyApp/Components/Shared/SrcVuePage.razor b/MyApp/Components/Shared/SrcVuePage.razor
new file mode 100644
index 0000000..d8ee02f
--- /dev/null
+++ b/MyApp/Components/Shared/SrcVuePage.razor
@@ -0,0 +1,5 @@
+<SrcLink Href=@($"/MyApp/wwwroot/pages/{Path}") />
+
+@code {
+    [Parameter] public required string Path { get; set; }
+}
diff --git a/MyApp/Components/Shared/VideoGroup.razor b/MyApp/Components/Shared/VideoGroup.razor
new file mode 100644
index 0000000..70a3900
--- /dev/null
+++ b/MyApp/Components/Shared/VideoGroup.razor
@@ -0,0 +1,72 @@
+@inject MarkdownVideos Videos
+
+<section>
+    <div class="@Background py-24 sm:py-32">
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+            <div class="mx-auto max-w-5xl">
+                <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">@Title</h2>
+                <p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-400">
+                    @Summary
+                    @if (LearnMore != null)
+                    {
+                        <a href="@LearnMore" class="ml-2 text-sm font-semibold leading-6">Learn more <span aria-hidden="true">→</span></a>                
+                    }
+                </p>
+                <div class="mt-16 space-y-20 lg:mt-20 lg:space-y-20">
+                    @foreach (var video in videos)
+                    {
+                        var videoId = video.Url.LastRightPart('/');
+                        <article class="relative isolate flex flex-col gap-8 lg:flex-row">
+                            <div class="relative lg:w-1/2 lg:shrink-0">
+                                <lite-youtube width="560" height="315" videoid="@videoId" class="@Border"
+                                              style="margin-bottom:3px;background-image: url('https://img.youtube.com/vi/@videoId/maxresdefault.jpg')">
+                                </lite-youtube>
+                            </div>
+                            <div>
+                                <div class="flex items-center gap-x-4 text-xs">
+                                    <time datetime="2020-03-16" class="text-gray-500">@($"{video.Date!.Value:MMMM d, yyyy}")</time>
+                                    @foreach (var tag in video.Tags.Safe())
+                                    {
+                                        <span class="relative z-10 rounded-full bg-gray-50 dark:bg-gray-900 py-1.5 px-3 font-medium text-gray-600 dark:text-gray-300">@tag</span>
+                                    }
+                                </div>
+                                <div class="group relative max-w-xl">
+                                    <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 dark:text-gray-50 group-hover:text-gray-600 dark:group-hover:text-gray-400">
+                                        <a href="@video.Url">
+                                            @video.Title
+                                        </a>
+                                    </h3>
+                                    <div class="mt-5 text-sm leading-6 text-gray-600 dark:text-gray-400">
+                                        <div class="prose">
+                                            @BlazorHtml.Raw(video.Preview)
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </article>
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+@code {
+    [Parameter] public required string Group { get; set; }
+    [Parameter] public string? Title { get; set; }
+    [Parameter] public string? Background { get; set; }
+    [Parameter] public string? Summary { get; set; }
+    [Parameter] public string? Border { get; set; }
+    [Parameter] public string? LearnMore { get; set; }
+
+    List<MarkdownFileInfo> videos = new();
+
+    void load()
+    {
+        videos = Videos.GetVideos(Group);
+    }
+
+    protected override void OnInitialized() => load();
+
+    protected override void OnParametersSet() => load();
+}
diff --git a/MyApp/Components/_Imports.razor b/MyApp/Components/_Imports.razor
new file mode 100644
index 0000000..6338e17
--- /dev/null
+++ b/MyApp/Components/_Imports.razor
@@ -0,0 +1,20 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Authorization
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using ServiceStack
+@using ServiceStack.Web
+@using ServiceStack.Html
+@using ServiceStack.Blazor
+@using ServiceStack.Blazor.Components
+@using ServiceStack.Blazor.Components.Tailwind
+@using MyApp
+@using MyApp.Components
+@using MyApp.Components.Shared
+@using MyApp.ServiceModel
diff --git a/MyApp/Configure.AppHost.cs b/MyApp/Configure.AppHost.cs
new file mode 100644
index 0000000..2151976
--- /dev/null
+++ b/MyApp/Configure.AppHost.cs
@@ -0,0 +1,60 @@
+using Microsoft.AspNetCore.Mvc.Rendering;
+using ServiceStack.IO;
+
+[assembly: HostingStartup(typeof(MyApp.AppHost))]
+
+namespace MyApp;
+
+public class AppHost() : AppHostBase("MyApp"), IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices((context,services) => {
+            // Configure ASP.NET Core IOC Dependencies
+            context.Configuration.GetSection(nameof(AppConfig)).Bind(AppConfig.Instance);
+            services.AddSingleton(AppConfig.Instance);
+        });
+
+    public override void Configure()
+    {
+        AppConfig.Instance.GitPagesBaseUrl ??= ResolveGitBlobBaseUrl(ContentRootDirectory);
+    }
+    
+    private string? ResolveGitBlobBaseUrl(IVirtualDirectory contentDir)
+    {
+        var srcDir = new DirectoryInfo(contentDir.RealPath);
+        var gitConfig = new FileInfo(Path.Combine(srcDir.Parent!.FullName, ".git", "config"));
+        if (gitConfig.Exists)
+        {
+            var txt = gitConfig.ReadAllText();
+            var pos = txt.IndexOf("url = ", StringComparison.Ordinal);
+            if (pos >= 0)
+            {
+                var url = txt[(pos + "url = ".Length)..].LeftPart(".git").LeftPart('\n').Trim();
+                var gitBaseUrl = url.CombineWith($"blob/main/{srcDir.Name}");
+                return gitBaseUrl;
+            }
+        }
+        return null;
+    }
+}
+
+public class AppConfig
+{
+    public static AppConfig Instance { get; } = new();
+    public string LocalBaseUrl { get; set; }
+    public string PublicBaseUrl { get; set; }
+    public string? GitPagesBaseUrl { get; set; }
+}
+
+public static class HtmlHelpers
+{
+    public static string ToAbsoluteContentUrl(string? relativePath) => HostContext.DebugMode 
+        ? AppConfig.Instance.LocalBaseUrl.CombineWith(relativePath)
+        : AppConfig.Instance.PublicBaseUrl.CombineWith(relativePath);
+    public static string ToAbsoluteApiUrl(string? relativePath) => HostContext.DebugMode 
+        ? AppConfig.Instance.LocalBaseUrl.CombineWith(relativePath)
+        : AppConfig.Instance.PublicBaseUrl.CombineWith(relativePath);
+
+    public static string ContentUrl(this IHtmlHelper html, string? relativePath) => ToAbsoluteContentUrl(relativePath); 
+    public static string ApiUrl(this IHtmlHelper html, string? relativePath) => ToAbsoluteApiUrl(relativePath);
+}
diff --git a/MyApp/Configure.Auth.cs b/MyApp/Configure.Auth.cs
new file mode 100644
index 0000000..372f1a4
--- /dev/null
+++ b/MyApp/Configure.Auth.cs
@@ -0,0 +1,19 @@
+using ServiceStack.Auth;
+using MyApp.Data;
+
+[assembly: HostingStartup(typeof(MyApp.ConfigureAuth))]
+
+namespace MyApp;
+
+public class ConfigureAuth : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureAppHost(appHost =>
+        {
+            appHost.Plugins.Add(new AuthFeature(IdentityAuth.For<ApplicationUser>(options => {
+                options.SessionFactory = () => new CustomUserSession();
+                options.CredentialsAuth();
+                options.AdminUsersFeature();
+            })));
+        });
+}
diff --git a/MyApp/Configure.AutoQuery.cs b/MyApp/Configure.AutoQuery.cs
new file mode 100644
index 0000000..76077d6
--- /dev/null
+++ b/MyApp/Configure.AutoQuery.cs
@@ -0,0 +1,29 @@
+using ServiceStack.Data;
+
+[assembly: HostingStartup(typeof(MyApp.ConfigureAutoQuery))]
+
+namespace MyApp;
+
+public class ConfigureAutoQuery : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices(services => {
+            // Enable Audit History
+            services.AddSingleton<ICrudEvents>(c =>
+                new OrmLiteCrudEvents(c.GetRequiredService<IDbConnectionFactory>()));
+        })
+        .ConfigureAppHost(appHost => {
+
+            // For TodosService
+            appHost.Plugins.Add(new AutoQueryDataFeature());
+
+            // For Bookings https://docs.servicestack.net/autoquery-crud-bookings
+            appHost.Plugins.Add(new AutoQueryFeature
+            {
+                MaxLimit = 1000,
+                //IncludeTotal = true,
+            });
+
+            appHost.Resolve<ICrudEvents>().InitSchema();
+        });
+}
\ No newline at end of file
diff --git a/MyApp/Configure.Db.Migrations.cs b/MyApp/Configure.Db.Migrations.cs
new file mode 100644
index 0000000..e1caef0
--- /dev/null
+++ b/MyApp/Configure.Db.Migrations.cs
@@ -0,0 +1,126 @@
+using Microsoft.AspNetCore.Identity;
+using Microsoft.EntityFrameworkCore;
+using MyApp.Data;
+using MyApp.Migrations;
+using MyApp.ServiceModel;
+using ServiceStack;
+using ServiceStack.Data;
+using ServiceStack.OrmLite;
+
+[assembly: HostingStartup(typeof(MyApp.ConfigureDbMigrations))]
+
+namespace MyApp;
+
+// Code-First DB Migrations: https://docs.servicestack.net/ormlite/db-migrations
+public class ConfigureDbMigrations : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureAppHost(appHost => {
+            var migrator = new Migrator(appHost.Resolve<IDbConnectionFactory>(), typeof(Migration1000).Assembly);
+            AppTasks.Register("migrate", _ =>
+            {
+                var log = appHost.GetApplicationServices().GetRequiredService<ILogger<ConfigureDbMigrations>>();
+
+                log.LogInformation("Running EF Migrations...");
+                var scopeFactory = appHost.GetApplicationServices().GetRequiredService<IServiceScopeFactory>();
+                using (var scope = scopeFactory.CreateScope())
+                {
+                    using var db = scope.ServiceProvider.GetRequiredService<ApplicationDbContext>();
+                    db.Database.EnsureCreated();
+                    db.Database.Migrate();
+
+                    // Only seed users if DB was just created
+                    if (!db.Users.Any())
+                    {
+                        log.LogInformation("Adding Seed Users...");
+                        AddSeedUsers(scope.ServiceProvider).Wait();
+                    }
+                }
+
+                log.LogInformation("Running OrmLite Migrations...");
+                migrator.Run();
+            });
+            AppTasks.Register("migrate.revert", args => migrator.Revert(args[0]));
+            AppTasks.Run();
+        });
+
+    private async Task AddSeedUsers(IServiceProvider services)
+    {
+        //initializing custom roles 
+        var roleManager = services.GetRequiredService<RoleManager<IdentityRole>>();
+        var userManager = services.GetRequiredService<UserManager<ApplicationUser>>();
+        string[] allRoles = [Roles.Admin, Roles.Manager, Roles.Employee];
+
+        void assertResult(IdentityResult result)
+        {
+            if (!result.Succeeded)
+                throw new Exception(result.Errors.First().Description);
+        }
+
+        async Task EnsureUserAsync(ApplicationUser user, string password, string[]? roles = null)
+        {
+            var existingUser = await userManager.FindByEmailAsync(user.Email!);
+            if (existingUser != null) return;
+
+            await userManager!.CreateAsync(user, password);
+            if (roles?.Length > 0)
+            {
+                var newUser = await userManager.FindByEmailAsync(user.Email!);
+                assertResult(await userManager.AddToRolesAsync(user, roles));
+            }
+        }
+
+        foreach (var roleName in allRoles)
+        {
+            var roleExist = await roleManager.RoleExistsAsync(roleName);
+            if (!roleExist)
+            {
+                //Create the roles and seed them to the database
+                assertResult(await roleManager.CreateAsync(new IdentityRole(roleName)));
+            }
+        }
+
+        await EnsureUserAsync(new ApplicationUser
+        {
+            DisplayName = "Test User",
+            Email = "test@email.com",
+            UserName = "test@email.com",
+            FirstName = "Test",
+            LastName = "User",
+            EmailConfirmed = true,
+            ProfileUrl = "/img/profiles/user1.svg",
+        }, "p@55wOrd");
+
+        await EnsureUserAsync(new ApplicationUser
+        {
+            DisplayName = "Test Employee",
+            Email = "employee@email.com",
+            UserName = "employee@email.com",
+            FirstName = "Test",
+            LastName = "Employee",
+            EmailConfirmed = true,
+            ProfileUrl = "/img/profiles/user2.svg",
+        }, "p@55wOrd", [Roles.Employee]);
+
+        await EnsureUserAsync(new ApplicationUser
+        {
+            DisplayName = "Test Manager",
+            Email = "manager@email.com",
+            UserName = "manager@email.com",
+            FirstName = "Test",
+            LastName = "Manager",
+            EmailConfirmed = true,
+            ProfileUrl = "/img/profiles/user3.svg",
+        }, "p@55wOrd", [Roles.Manager, Roles.Employee]);
+
+        await EnsureUserAsync(new ApplicationUser
+        {
+            DisplayName = "Admin User",
+            Email = "admin@email.com",
+            UserName = "admin@email.com",
+            FirstName = "Admin",
+            LastName = "User",
+            EmailConfirmed = true,
+        }, "p@55wOrd", allRoles);
+    }
+}
diff --git a/MyApp/Configure.Db.cs b/MyApp/Configure.Db.cs
new file mode 100644
index 0000000..2f516e7
--- /dev/null
+++ b/MyApp/Configure.Db.cs
@@ -0,0 +1,28 @@
+using Microsoft.EntityFrameworkCore;
+using ServiceStack.Data;
+using ServiceStack.OrmLite;
+using MyApp.Data;
+
+[assembly: HostingStartup(typeof(MyApp.ConfigureDb))]
+
+namespace MyApp;
+
+public class ConfigureDb : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices((context, services) => {
+            var connectionString = context.Configuration.GetConnectionString("DefaultConnection")
+                ?? "DataSource=App_Data/app.db;Cache=Shared";
+            
+            services.AddSingleton<IDbConnectionFactory>(new OrmLiteConnectionFactory(
+                connectionString, SqliteDialect.Provider));
+
+            // $ dotnet ef migrations add CreateIdentitySchema
+            // $ dotnet ef database update
+            services.AddDbContext<ApplicationDbContext>(options =>
+                options.UseSqlite(connectionString, b => b.MigrationsAssembly(nameof(MyApp))));
+            
+            // Enable built-in Database Admin UI at /admin-ui/database
+            services.AddPlugin(new AdminDatabaseFeature());
+        });
+}
\ No newline at end of file
diff --git a/MyApp/Configure.Markdown.cs b/MyApp/Configure.Markdown.cs
new file mode 100644
index 0000000..72f044d
--- /dev/null
+++ b/MyApp/Configure.Markdown.cs
@@ -0,0 +1,53 @@
+using ServiceStack.IO;
+
+[assembly: HostingStartup(typeof(MyApp.ConfigureMarkdown))]
+
+namespace MyApp;
+
+public class ConfigureMarkdown : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices(services =>
+        {
+            services.AddSingleton<MarkdownIncludes>();
+            services.AddSingleton<MarkdownPages>();
+            services.AddSingleton<MarkdownVideos>();
+            services.AddSingleton<MarkdownBlog>();
+            services.AddSingleton<MarkdownMeta>();
+        })
+        .ConfigureAppHost(
+            appHost => appHost.Plugins.Add(new CleanUrlsFeature()),
+            afterPluginsLoaded: appHost =>
+            {
+                MarkdigConfig.Set(new MarkdigConfig
+                {
+                    ConfigurePipeline = pipeline =>
+                    {
+                        // Extend Markdig Pipeline
+                    },
+                    ConfigureContainers = config =>
+                    {
+                        config.AddBuiltInContainers();
+                        // Add Custom Block or Inline containers
+                    }
+                });
+
+                var includes = appHost.Resolve<MarkdownIncludes>();
+                var pages = appHost.Resolve<MarkdownPages>();
+                var videos = appHost.Resolve<MarkdownVideos>();
+                var blogPosts = appHost.Resolve<MarkdownBlog>();
+                var meta = appHost.Resolve<MarkdownMeta>();
+
+                meta.Features = [pages, videos, blogPosts];
+                
+                includes.LoadFrom("_includes");
+                pages.LoadFrom("_pages");
+                videos.LoadFrom("_videos");
+                blogPosts.LoadFrom("_posts");
+            });
+}
+
+// Add additional frontmatter info to include
+public class MarkdownFileInfo : MarkdownFileBase
+{
+}
diff --git a/MyApp/Configure.Mq.cs b/MyApp/Configure.Mq.cs
new file mode 100644
index 0000000..c7e07ae
--- /dev/null
+++ b/MyApp/Configure.Mq.cs
@@ -0,0 +1,61 @@
+using ServiceStack.Messaging;
+using MyApp.ServiceInterface;
+using MyApp.ServiceModel;
+using Microsoft.AspNetCore.Identity;
+using MyApp.Data;
+
+[assembly: HostingStartup(typeof(MyApp.ConfigureMq))]
+
+namespace MyApp;
+
+/**
+ * Register ServiceStack Services you want to be able to invoke in a managed Background Thread
+ * https://docs.servicestack.net/background-mq
+*/
+public class ConfigureMq : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices((context, services) => {
+            var smtpConfig = context.Configuration.GetSection(nameof(SmtpConfig))?.Get<SmtpConfig>();
+            if (smtpConfig is not null)
+            {
+                services.AddSingleton(smtpConfig);
+            }
+            services.AddSingleton<IMessageService>(c => new BackgroundMqService());
+        })
+        .ConfigureAppHost(afterAppHostInit: appHost => {
+            var mqService = appHost.Resolve<IMessageService>();
+
+            //Register ServiceStack APIs you want to be able to invoke via MQ
+            mqService.RegisterHandler<SendEmail>(appHost.ExecuteMessage);
+            mqService.Start();
+        });
+}
+
+/// <summary>
+/// Sends emails by publishing a message to the Background MQ Server where it's processed in the background
+/// </summary>
+public class EmailSender(IMessageService messageService) : IEmailSender<ApplicationUser>
+{
+    public Task SendEmailAsync(string email, string subject, string htmlMessage)
+    {
+        using var mqClient = messageService.CreateMessageProducer();
+        mqClient.Publish(new SendEmail
+        {
+            To = email,
+            Subject = subject,
+            BodyHtml = htmlMessage,
+        });
+
+        return Task.CompletedTask;
+    }
+
+    public Task SendConfirmationLinkAsync(ApplicationUser user, string email, string confirmationLink) =>
+        SendEmailAsync(email, "Confirm your email", $"Please confirm your account by <a href='{confirmationLink}'>clicking here</a>.");
+
+    public Task SendPasswordResetLinkAsync(ApplicationUser user, string email, string resetLink) =>
+        SendEmailAsync(email, "Reset your password", $"Please reset your password by <a href='{resetLink}'>clicking here</a>.");
+
+    public Task SendPasswordResetCodeAsync(ApplicationUser user, string email, string resetCode) =>
+        SendEmailAsync(email, "Reset your password", $"Please reset your password using the following code: {resetCode}");
+}
diff --git a/MyApp/Configure.OpenApi.cs b/MyApp/Configure.OpenApi.cs
new file mode 100644
index 0000000..ce354fa
--- /dev/null
+++ b/MyApp/Configure.OpenApi.cs
@@ -0,0 +1,32 @@
+[assembly: HostingStartup(typeof(MyApp.ConfigureOpenApi))]
+
+namespace MyApp;
+
+public class ConfigureOpenApi : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices((context, services) =>
+        {
+            if (context.HostingEnvironment.IsDevelopment())
+            {
+                services.AddEndpointsApiExplorer();
+                services.AddSwaggerGen();
+
+                services.AddServiceStackSwagger();
+                services.AddBasicAuth<Data.ApplicationUser>();
+                //services.AddJwtAuth();
+
+                services.AddTransient<IStartupFilter, StartupFilter>();
+            }
+        });
+
+    public class StartupFilter : IStartupFilter
+    {
+        public Action<IApplicationBuilder> Configure(Action<IApplicationBuilder> next) => app =>
+        {
+            app.UseSwagger();
+            app.UseSwaggerUI();
+            next(app);
+        };
+    }
+}
\ No newline at end of file
diff --git a/MyApp/Markdown.Blog.cs b/MyApp/Markdown.Blog.cs
new file mode 100644
index 0000000..07fc196
--- /dev/null
+++ b/MyApp/Markdown.Blog.cs
@@ -0,0 +1,192 @@
+// run node postinstall.js to update to latest version
+using System.Globalization;
+using Markdig;
+using ServiceStack.IO;
+
+namespace MyApp;
+
+public class BlogConfig
+{
+    public static BlogConfig Instance { get; } = new();
+    public string LocalBaseUrl { get; set; }
+    public string PublicBaseUrl { get; set; }
+    public string? SiteTwitter { get; set; }
+    public List<AuthorInfo> Authors { get; set; } = new();
+    public string? BlogTitle { get; set; }
+    public string? BlogDescription { get; set; }
+    public string? BlogEmail { get; set; }
+    public string? CopyrightOwner { get; set; }
+    public string? BlogImageUrl { get; set; }
+}
+
+public class AuthorInfo
+{
+    public string Name { get; set; }
+    public string ProfileUrl { get; set; }
+    public string? Bio { get; set; }
+    public string? Email { get; set; }
+    public string? GitHubUrl { get; set; }
+    public string? TwitterUrl { get; set; }
+    public string? ThreadsUrl { get; set; }
+    public string? MastodonUrl { get; set; }
+}
+
+public class MarkdownBlog(ILogger<MarkdownBlog> log, IWebHostEnvironment env, IVirtualFiles fs)
+    : MarkdownPagesBase<MarkdownFileInfo>(log, env, fs)
+{
+    public override string Id => "posts";
+    List<MarkdownFileInfo> Posts { get; set; } = [];
+
+    public List<MarkdownFileInfo> VisiblePosts => Posts.Where(IsVisible).ToList();
+    
+    public string FallbackProfileUrl { get; set; } = Svg.ToDataUri(Svg.Create(Svg.Body.User, stroke:"none").Replace("fill='currentColor'","fill='#0891b2'"));
+    public string FallbackSplashUrl { get; set; } = "https://source.unsplash.com/random/2000x1000/?stationary";
+
+    public BlogConfig Config { get; set; } = new();
+    public List<AuthorInfo> Authors { get; set; } = [];
+
+    public Dictionary<string, AuthorInfo> AuthorSlugMap { get; } = new();
+    public Dictionary<string, string> TagSlugMap { get; } = new();
+
+    public void GenerateSlugs()
+    {
+        AuthorSlugMap.Clear();
+        TagSlugMap.Clear();
+        
+        foreach (var author in Authors)
+        {
+            AuthorSlugMap[author.Name.GenerateSlug()] = author;
+        }
+        foreach (var post in Posts)
+        {
+            foreach (var tag in post.Tags.Safe())
+            {
+                TagSlugMap[tag.GenerateSlug()] = tag;
+            }
+        }
+    }
+    
+    public string GetAuthorProfileUrl(string? name) => (name != null
+            ? Authors.FirstOrDefault(x => x.Name == name)
+            : null)?.ProfileUrl
+        ?? FallbackProfileUrl;
+
+    public List<MarkdownFileInfo> GetPosts(string? author = null, string? tag = null, int? year = null)
+    {
+        IEnumerable<MarkdownFileInfo> latestPosts = Posts.Where(IsVisible);
+        if (author != null)
+            latestPosts = latestPosts.Where(x => x.Author == author);
+        if (tag != null)
+            latestPosts = latestPosts.Where(x => x.Tags.Contains(tag));
+        if (year != null)
+            latestPosts = latestPosts.Where(x => x.Date.GetValueOrDefault().Year == year);
+        return latestPosts.OrderByDescending(x => x.Date).ToList();
+    }
+
+    public string GetPostLink(MarkdownFileInfo post) => $"posts/{post.Slug}";
+
+    public string GetPostsLink() => "posts/";
+    public string? GetAuthorLink(string? author) => author != null && Authors.Any(x => x.Name.Equals(author, StringComparison.OrdinalIgnoreCase))
+        ? $"posts/author/{author.GenerateSlug()}"
+        : null;
+    
+    public string GetYearLink(int year) => $"posts/year/{year}";
+    public string GetTagLink(string tag) => $"posts/tagged/{tag.GenerateSlug()}";
+    public string GetDateLabel(DateTime? date) => X.Map(date ?? DateTime.UtcNow, d => d.ToString("MMMM d, yyyy"))!;
+    public string GetDateTimestamp(DateTime? date) => X.Map(date ?? DateTime.UtcNow, d => d.ToString("O"))!;
+
+    public AuthorInfo? GetAuthorBySlug(string? slug) => slug != null && AuthorSlugMap.TryGetValue(slug, out var author)
+        ? author
+        : null;
+
+    public string? GetTagBySlug(string? slug) => slug != null && TagSlugMap.TryGetValue(slug, out var tag)
+        ? tag
+        : null;
+
+    public string GetSplashImage(MarkdownFileInfo post)
+    {
+        var splash = post.Image ?? FallbackSplashUrl;
+        return splash.StartsWith("https://images.unsplash.com")
+            ? splash.LeftPart('?') + "?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=420&q=80"
+            : splash;
+    }
+
+    public MarkdownFileInfo? FindPostBySlug(string name) => Fresh(VisiblePosts.FirstOrDefault(x => x.Slug == name));
+
+    public override MarkdownFileInfo? Load(string path, MarkdownPipeline? pipeline = null)
+    {
+        var file = VirtualFiles.GetFile(path)
+            ?? throw new FileNotFoundException(path.LastRightPart('/'));
+        var content = file.ReadAllText();
+
+        var writer = new StringWriter();
+        var doc = CreateMarkdownFile(content, writer, pipeline);
+        if (doc.Title == null)
+        {
+            log.LogWarning("No frontmatter found for {VirtualPath}, ignoring...", file.VirtualPath);
+            return null;
+        }
+
+        doc.Path = file.VirtualPath;
+        doc.Slug = file.Name.RightPart('_').LastLeftPart('.');
+        doc.FileName = file.Name;
+        doc.HtmlFileName = $"{file.Name.RightPart('_').LastLeftPart('.')}.html";
+        var datePart = file.Name.LeftPart('_');
+        if (!DateTime.TryParseExact(datePart, "yyyy-MM-dd", CultureInfo.InvariantCulture,
+                DateTimeStyles.AdjustToUniversal, out var date))
+        {
+            log.LogWarning("Could not parse date '{DatePart}', ignoring...", datePart);
+            return null;
+        }
+
+        doc.WordCount = WordCount(content);
+        doc.LineCount = LineCount(content);
+        doc.Date = date;
+        writer.Flush();
+        doc.Preview = writer.ToString();
+
+        return doc;
+    }
+
+    public void LoadFrom(string fromDirectory)
+    {
+        Authors.Clear();
+        Posts.Clear();
+        var files = VirtualFiles.GetDirectory(fromDirectory).GetAllFiles().ToList();
+        log.LogInformation("Found {Count} posts", files.Count);
+
+        var pipeline = CreatePipeline();
+
+        foreach (var file in files)
+        {
+            if (file.Name == "config.json")
+            {
+                Config = file.ReadAllText().FromJson<BlogConfig>();
+            }
+            else if (file.Name == "authors.json")
+            {
+                Authors = file.ReadAllText().FromJson<List<AuthorInfo>>();
+            }
+            else if (file.Extension == "md")
+            {
+                try
+                {
+                    var doc = Load(file.VirtualPath, pipeline);
+                    if (doc == null)
+                        continue;
+
+                    Posts.Add(doc);
+                }
+                catch (Exception e)
+                {
+                    log.LogError(e, "Couldn't load {VirtualPath}: {Message}", file.VirtualPath, e.Message);
+                }
+            }
+        }
+
+        GenerateSlugs();
+    }
+
+    public override List<MarkdownFileBase> GetAll() => 
+        VisiblePosts.Map(doc => ToMetaDoc(doc, x => x.Url ??= $"/posts/{x.Slug}"));
+}
\ No newline at end of file
diff --git a/MyApp/Markdown.Meta.cs b/MyApp/Markdown.Meta.cs
new file mode 100644
index 0000000..bcfceaa
--- /dev/null
+++ b/MyApp/Markdown.Meta.cs
@@ -0,0 +1,60 @@
+using ServiceStack.IO;
+using ServiceStack.Text;
+
+namespace MyApp;
+
+public class MarkdownMeta
+{
+    public List<IMarkdownPages> Features { get; set; } = [];
+
+    public async Task RenderToAsync(string metaDir, string baseUrl)
+    {
+        FileSystemVirtualFiles.RecreateDirectory(metaDir);
+        using var scope = JsConfig.With(new Config { ExcludeTypeInfo = true });
+        var featureDocs = new Dictionary<string, List<MarkdownFileBase>>();
+        var allYears = new HashSet<int>();
+        var index = new Dictionary<string, object>();
+        foreach (var feature in Features.Safe())
+        {
+            var allDocs = feature.GetAll()
+                .OrderByDescending(x => x.Date!.Value)
+                .ThenBy(x => x.Order)
+                .ThenBy(x => x.FileName)
+                .ToList();
+            allDocs.ForEach(x => {
+                if (x.Url?.StartsWith("/") == true)
+                    x.Url = baseUrl.CombineWith(x.Url);
+                if (x.Image?.StartsWith("/") == true)
+                    x.Image = baseUrl.CombineWith(x.Image);
+            });
+            featureDocs[feature.Id] = allDocs;
+            var featureYears = allDocs.Select(x => x.Date!.Value.Year).Distinct().OrderBy(x => x).ToList();
+            featureYears.ForEach(x => allYears.Add(x));
+            
+            index[feature.Id] = featureYears.Map(x => baseUrl.CombineWith($"/meta/{x}/{feature.Id}.json"));
+            foreach (var year in featureYears)
+            {
+                var yearDocs = allDocs
+                    .Where(x => x.Date!.Value.Year == year)
+                    .ToList();
+                var yearDir = metaDir.CombineWith(year).AssertDir();
+                var metaPath = yearDir.CombineWith($"{feature.Id}.json");
+                await File.WriteAllTextAsync(metaPath, yearDocs.ToJson());
+            }
+        }
+        await File.WriteAllTextAsync(metaDir.CombineWith("index.json"), JSON.stringify(index));
+
+        await File.WriteAllTextAsync(metaDir.CombineWith("all.json"), JSON.stringify(featureDocs));
+        foreach (var year in allYears.OrderBy(x => x))
+        {
+            var yearDocs = new Dictionary<string, List<MarkdownFileBase>>();
+            foreach (var entry in featureDocs)
+            {
+                yearDocs[entry.Key] = entry.Value
+                    .Where(x => x.Date!.Value.Year == year)
+                    .ToList();
+            }
+            await File.WriteAllTextAsync(metaDir.CombineWith($"{year}/all.json"), JSON.stringify(yearDocs));
+        }
+    }
+}
\ No newline at end of file
diff --git a/MyApp/Markdown.Pages.cs b/MyApp/Markdown.Pages.cs
new file mode 100644
index 0000000..12f7f34
--- /dev/null
+++ b/MyApp/Markdown.Pages.cs
@@ -0,0 +1,137 @@
+// run node postinstall.js to update to latest version
+using ServiceStack.IO;
+
+namespace MyApp;
+
+public class MarkdownPages(ILogger<MarkdownPages> log, IWebHostEnvironment env, IVirtualFiles fs)
+    : MarkdownPagesBase<MarkdownFileInfo>(log, env, fs)
+{
+    public override string Id => "pages";
+
+    public virtual string? DefaultMenuIcon { get; set; } =
+        "<svg class='h-6 w-6 shrink-0 text-sky-500' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' aria-hidden='true'><path stroke-linecap='round' stroke-linejoin='round' d='M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'></path></svg>";
+
+    List<MarkdownFileInfo> Pages { get; set; } = new();
+    public List<MarkdownFileInfo> GetVisiblePages(string? prefix=null, bool allDirectories=false) => prefix == null 
+        ? Pages.Where(x => IsVisible(x) && !x.Slug!.Contains('/')).OrderBy(x => x.Order).ThenBy(x => x.Path).ToList()
+        : Pages.Where(x => IsVisible(x) && x.Slug!.StartsWith(prefix.WithTrailingSlash()))
+            .Where(x => allDirectories || (x.Slug.CountOccurrencesOf('/') == prefix.CountOccurrencesOf('/') + 1))
+            .OrderBy(x => x.Order).ThenBy(x => x.Path).ToList();
+
+    public MarkdownFileInfo? GetBySlug(string slug)
+    {
+        slug = slug.Trim('/');
+        return Fresh(Pages.Where(IsVisible).FirstOrDefault(x => x.Slug == slug));
+    }
+
+    public Dictionary<string, List<MarkdownMenu>> Sidebars { get; set; } = new();
+
+    public void LoadFrom(string fromDirectory)
+    {
+        Sidebars.Clear();
+        Pages.Clear();
+        var files = VirtualFiles.GetDirectory(fromDirectory).GetAllFiles()
+            .OrderBy(x => x.VirtualPath)
+            .ToList();
+        log.LogInformation("Found {Count} pages", files.Count);
+
+        var pipeline = CreatePipeline();
+
+        foreach (var file in files)
+        {
+            try
+            {
+                if (file.Extension == "md")
+                {
+                    var doc = Load(file.VirtualPath, pipeline);
+                    if (doc == null)
+                        continue;
+
+                    var relativePath = file.VirtualPath[(fromDirectory.Length + 1)..];
+                    if (relativePath.IndexOf('/') >= 0)
+                    {
+                        doc.Slug = relativePath.LastLeftPart('/') + '/' + doc.Slug;
+                    }
+
+                    Pages.Add(doc);
+                }
+                else if (file.Name == "sidebar.json")
+                {
+                    var virtualPath = file.VirtualPath.Substring(fromDirectory.Length);
+                    var folder = virtualPath[..^"sidebar.json".Length].Trim('/');
+                    var sidebarJson = file.ReadAllText();
+                    var sidebar = sidebarJson.FromJson<List<MarkdownMenu>>();
+
+                    // If first entry is home and icon is not provided or '' use DefaultMenuIcon 
+                    var defaultMenu = sidebar.FirstOrDefault();
+                    if (defaultMenu?.Link?.Trim('/') == folder && defaultMenu.Icon == null)
+                    {
+                        defaultMenu.Icon = DefaultMenuIcon;
+                    }
+                    Sidebars[folder] = sidebar;
+                }
+            }
+            catch (Exception e)
+            {
+                log.LogError(e, "Couldn't load {VirtualPath}: {Message}", file.VirtualPath, e.Message);
+            }
+        }
+        if (Sidebars.Count > 0)
+        {
+            log.LogInformation("Loaded {Count} sidebars: {Sidebars}", Sidebars.Count, Sidebars.Keys.Join(", "));
+        }
+    }
+
+    public override List<MarkdownFileBase> GetAll() => Pages.Where(IsVisible).Map(doc => ToMetaDoc(doc, x => x.Url = $"/{x.Slug}"));
+
+    public virtual List<MarkdownMenu> GetSidebar(string folder, MarkdownMenu? defaultMenu=null)
+    {
+        if (Sidebars.TryGetValue(folder, out var sidebar))
+            return sidebar;
+
+        var allPages = GetVisiblePages(folder);
+        var allGroups = allPages.Select(x => x.Group)
+            .Distinct()
+            .OrderBy(x => x)
+            .ToList();
+
+        sidebar = new List<MarkdownMenu>();
+        foreach (var group in allGroups)
+        {
+            MarkdownMenu? menuItem;
+            if (group == null)
+            {
+                menuItem = defaultMenu ?? new MarkdownMenu {
+                    Children = [],
+                };
+            }
+            else
+            {
+                menuItem = new() {
+                    Text = group
+                };
+            }
+            sidebar.Add(menuItem);
+        
+            foreach (var page in allPages.Where(x => x.Group == group).OrderBy(x => x.Order))
+            {
+                menuItem.Children ??= [];
+                var link = page.Slug!;
+                if (link.EndsWith("/index"))
+                {
+                    link = link.Substring(0, link.Length - "index".Length);
+                    // Hide /index from auto Sidebar as it's included in Docs Page Sidebar Header by default
+                    if (link.Trim('/') == folder)
+                        continue;
+                }
+                menuItem.Children.Add(new()
+                {
+                    Text = page.Title!,
+                    Link = link,
+                });
+            }
+        }
+
+        return sidebar;
+    }
+}
diff --git a/MyApp/Markdown.Videos.cs b/MyApp/Markdown.Videos.cs
new file mode 100644
index 0000000..e910403
--- /dev/null
+++ b/MyApp/Markdown.Videos.cs
@@ -0,0 +1,61 @@
+// BSD License: https://docs.servicestack.net/BSD-LICENSE.txt
+// run node postinstall.js to update to latest version
+using ServiceStack.IO;
+
+namespace MyApp;
+
+public class MarkdownVideos(ILogger<MarkdownVideos> log, IWebHostEnvironment env, IVirtualFiles fs)
+    : MarkdownPagesBase<MarkdownFileInfo>(log, env, fs)
+{
+    public override string Id => "videos";
+    public Dictionary<string, List<MarkdownFileInfo>> Groups { get; set; } = new();
+
+    public List<MarkdownFileInfo> GetVideos(string group)
+    {
+        return Groups.TryGetValue(group, out var docs)
+            ? Fresh(docs.Where(IsVisible).OrderBy(x => x.Order).ThenBy(x => x.FileName).ToList())
+            : [];
+    }
+    
+    public void LoadFrom(string fromDirectory)
+    {
+        Groups.Clear();
+        var dirs = VirtualFiles.GetDirectory(fromDirectory).GetDirectories().ToList();
+        log.LogInformation("Found {Count} video directories", dirs.Count);
+
+        var pipeline = CreatePipeline();
+
+        foreach (var dir in dirs)
+        {
+            var group = dir.Name;
+
+            foreach (var file in dir.GetFiles().OrderBy(x => x.Name))
+            {
+                try
+                {
+                    var doc = Load(file.VirtualPath, pipeline);
+                    if (doc == null)
+                        continue;
+
+                    doc.Group = group;
+                    var groupVideos = Groups.GetOrAdd(group, v => new List<MarkdownFileInfo>());
+                    groupVideos.Add(doc);
+                }
+                catch (Exception e)
+                {
+                    log.LogError(e, "Couldn't load {VirtualPath}: {Message}", file.VirtualPath, e.Message);
+                }
+            }
+        }
+    }
+    
+    public override List<MarkdownFileBase> GetAll()
+    {
+        var to = new List<MarkdownFileBase>();
+        foreach (var entry in Groups)
+        {
+            to.AddRange(entry.Value.Where(IsVisible).Map(doc => ToMetaDoc(doc, x => x.Content = StripFrontmatter(doc.Content))));
+        }
+        return to;
+    }
+}
\ No newline at end of file
diff --git a/MyApp/MarkdownPagesBase.cs b/MyApp/MarkdownPagesBase.cs
new file mode 100644
index 0000000..37fd49c
--- /dev/null
+++ b/MyApp/MarkdownPagesBase.cs
@@ -0,0 +1,976 @@
+// run node postinstall.js to update to latest version
+
+using System.Text;
+using Markdig;
+using Markdig.Parsers;
+using Markdig.Parsers.Inlines;
+using Markdig.Renderers;
+using Markdig.Renderers.Html;
+using Markdig.Syntax;
+using Markdig.Syntax.Inlines;
+using Markdig.Extensions.CustomContainers;
+using ServiceStack.IO;
+using ServiceStack.Text;
+
+namespace MyApp;
+
+public class MarkdigConfig
+{
+    public static MarkdigConfig Instance { get; private set; } = new();
+    public Action<MarkdownPipelineBuilder>? ConfigurePipeline { get; set; }
+    public Action<ContainerExtensions> ConfigureContainers { get; set; } = x => x.AddBuiltInContainers();
+
+    public static void Set(MarkdigConfig config)
+    {
+        Instance = config;
+    }
+}
+
+public class MarkdownFileBase
+{
+    public string Path { get; set; } = default!;
+    public string? Slug { get; set; }
+    public string? Layout { get; set; }
+    public string? FileName { get; set; }
+    public string? HtmlFileName { get; set; }
+
+    /// <summary>
+    /// Whether to hide this document in Production
+    /// </summary>
+    public bool Draft { get; set; }
+
+    public string? Title { get; set; }
+    public string? Summary { get; set; }
+    public string? Image { get; set; }
+    public string? Author { get; set; }
+    public List<string> Tags { get; set; } = new();
+
+    /// <summary>
+    /// Date document is published. Documents with future Dates are only shown in Development 
+    /// </summary>
+    public DateTime? Date { get; set; }
+
+    public string? Content { get; set; }
+    public string? Url { get; set; }
+
+    /// <summary>
+    /// The rendered HTML of the Markdown
+    /// </summary>
+    public string? Preview { get; set; }
+
+    public string? HtmlPage { get; set; }
+    public int? WordCount { get; set; }
+    public int? LineCount { get; set; }
+    public string? Group { get; set; }
+    public int? Order { get; set; }
+    public DocumentMap? DocumentMap { get; set; }
+
+    /// <summary>
+    /// Update Markdown File to latest version
+    /// </summary>
+    /// <param name="newDoc"></param>
+    public virtual void Update(MarkdownFileBase newDoc)
+    {
+        Layout = newDoc.Layout;
+        Title = newDoc.Title;
+        Summary = newDoc.Summary;
+        Draft = newDoc.Draft;
+        Image = newDoc.Image;
+        Author = newDoc.Author;
+        Tags = newDoc.Tags;
+        Content = newDoc.Content;
+        Url = newDoc.Url;
+        Preview = newDoc.Preview;
+        HtmlPage = newDoc.HtmlPage;
+        WordCount = newDoc.WordCount;
+        LineCount = newDoc.LineCount;
+        Group = newDoc.Group;
+        Order = newDoc.Order;
+        DocumentMap = newDoc.DocumentMap;
+
+        if (newDoc.Date != null)
+            Date = newDoc.Date;
+    }
+}
+
+public interface IMarkdownPages
+{
+    string Id { get; }
+    List<MarkdownFileBase> GetAll();
+}
+
+public abstract class MarkdownPagesBase<T>(ILogger log, IWebHostEnvironment env, IVirtualFiles fs) : IMarkdownPages
+    where T : MarkdownFileBase
+{
+    public abstract string Id { get; }
+    public IVirtualFiles VirtualFiles => fs;
+
+    public virtual MarkdownPipeline CreatePipeline()
+    {
+        var builder = new MarkdownPipelineBuilder()
+            .UseYamlFrontMatter()
+            .UseAdvancedExtensions()
+            .UseAutoLinkHeadings()
+            .UseHeadingsMap()
+            .UseCustomContainers(MarkdigConfig.Instance.ConfigureContainers);
+        MarkdigConfig.Instance.ConfigurePipeline?.Invoke(builder);
+
+        var pipeline = builder.Build();
+        return pipeline;
+    }
+
+    public virtual List<T> Fresh(List<T> docs)
+    {
+        if (docs.IsEmpty())
+            return docs;
+        foreach (var doc in docs)
+        {
+            Fresh(doc);
+        }
+
+        return docs;
+    }
+
+    public virtual T? Fresh(T? doc)
+    {
+        // Ignore reloading source .md if run in production or as AppTask
+        if (doc == null || !env.IsDevelopment() || AppTasks.IsRunAsAppTask())
+            return doc;
+        var newDoc = Load(doc.Path);
+        doc.Update(newDoc);
+        return doc;
+    }
+
+    public virtual T CreateMarkdownFile(string content, TextWriter writer, MarkdownPipeline? pipeline = null)
+    {
+        pipeline ??= CreatePipeline();
+
+        var renderer = new Markdig.Renderers.HtmlRenderer(writer);
+        pipeline.Setup(renderer);
+
+        var document = Markdown.Parse(content, pipeline);
+        renderer.Render(document);
+
+        var block = document
+            .Descendants<Markdig.Extensions.Yaml.YamlFrontMatterBlock>()
+            .FirstOrDefault();
+
+        var doc = block?
+            .Lines // StringLineGroup[]
+            .Lines // StringLine[]
+            .Select(x => $"{x}\n")
+            .ToList()
+            .Select(x => x.Replace("---", string.Empty))
+            .Where(x => !string.IsNullOrWhiteSpace(x))
+            .Select(x => KeyValuePairs.Create(x.LeftPart(':').Trim(), x.RightPart(':').Trim()))
+            .ToObjectDictionary()
+            .ConvertTo<T>()
+            ?? typeof(T).CreateInstance<T>();
+
+        doc.Tags = doc.Tags.Map(x => x.Trim());
+        doc.Content = content;
+        doc.DocumentMap = document.GetData(nameof(DocumentMap)) as DocumentMap;
+
+        return doc;
+    }
+
+    public virtual T? Load(string path, MarkdownPipeline? pipeline = null)
+    {
+        var file = fs.GetFile(path)
+                   ?? throw new FileNotFoundException(path.LastRightPart('/'));
+        var content = file.ReadAllText();
+
+        var writer = new StringWriter();
+
+        var doc = CreateMarkdownFile(content, writer, pipeline);
+        doc.Title ??= file.Name;
+
+        doc.Path = file.VirtualPath;
+        doc.FileName = file.Name;
+        doc.Slug = doc.FileName.WithoutExtension().GenerateSlug();
+        doc.Content = content;
+        doc.WordCount = WordCount(content);
+        doc.LineCount = LineCount(content);
+        writer.Flush();
+        doc.Preview = writer.ToString();
+        doc.Date ??= file.LastModified;
+
+        return doc;
+    }
+
+    public virtual bool IsVisible(T doc) => env.IsDevelopment() || !doc.Draft && (doc.Date == null || doc.Date.Value <= DateTime.UtcNow);
+
+    public int WordsPerMin { get; set; } = 225;
+    public char[] WordBoundaries { get; set; } = { ' ', '.', '?', '!', '(', ')', '[', ']' };
+    public virtual int WordCount(string str) => str.Split(WordBoundaries, StringSplitOptions.RemoveEmptyEntries).Length;
+    public virtual int LineCount(string str) => str.CountOccurrencesOf('\n');
+    public virtual int MinutesToRead(int? words) => (int)Math.Ceiling((words ?? 1) / (double)WordsPerMin);
+
+    public virtual List<MarkdownFileBase> GetAll() => new();
+
+    public virtual string? StripFrontmatter(string? content)
+    {
+        if (content == null)
+            return null;
+        var startPos = content.IndexOf("---", StringComparison.CurrentCulture);
+        if (startPos == -1)
+            return content;
+        var endPos = content.IndexOf("---", startPos + 3, StringComparison.Ordinal);
+        if (endPos == -1)
+            return content;
+        return content.Substring(endPos + 3).Trim();
+    }
+
+    public virtual MarkdownFileBase ToMetaDoc(T x, Action<MarkdownFileBase>? fn = null)
+    {
+        var to = new MarkdownFileBase
+        {
+            Slug = x.Slug,
+            Title = x.Title,
+            Summary = x.Summary,
+            Date = x.Date,
+            Tags = x.Tags,
+            Author = x.Author,
+            Image = x.Image,
+            WordCount = x.WordCount,
+            LineCount = x.LineCount,
+            Url = x.Url,
+            Group = x.Group,
+            Order = x.Order,
+        };
+        fn?.Invoke(to);
+        return to;
+    }
+
+    /// <summary>
+    /// Need to escape '{{' and '}}' template literals when using content inside a Vue template 
+    /// </summary>
+    public virtual string? SanitizeVueTemplate(string? content)
+    {
+        if (content == null)
+            return null;
+
+        return content
+            .Replace("{{", "{‎{")
+            .Replace("}}", "}‎}");
+    }
+}
+
+public class MarkdownIncludes(ILogger<MarkdownIncludes> log, IWebHostEnvironment env, IVirtualFiles fs)
+    : MarkdownPagesBase<MarkdownFileInfo>(log, env, fs)
+{
+    public override string Id => "includes";
+    public List<MarkdownFileInfo> Pages { get; } = [];
+
+    public void LoadFrom(string fromDirectory)
+    {
+        Pages.Clear();
+        var files = VirtualFiles.GetDirectory(fromDirectory).GetAllFiles()
+            .OrderBy(x => x.VirtualPath)
+            .ToList();
+        log.LogInformation("Found {Count} includes", files.Count);
+
+        var pipeline = CreatePipeline();
+
+        foreach (var file in files)
+        {
+            try
+            {
+                if (file.Extension == "md")
+                {
+                    var doc = Load(file.VirtualPath, pipeline);
+                    if (doc == null)
+                        continue;
+
+                    var relativePath = file.VirtualPath[(fromDirectory.Length + 1)..];
+                    if (relativePath.IndexOf('/') >= 0)
+                    {
+                        doc.Slug = relativePath.LastLeftPart('/') + '/' + doc.Slug;
+                    }
+
+                    Pages.Add(doc);
+                }
+            }
+            catch (Exception e)
+            {
+                log.LogError(e, "Couldn't load {VirtualPath}: {Message}", file.VirtualPath, e.Message);
+            }
+        }
+    }
+
+    public override List<MarkdownFileBase> GetAll() => Pages.Where(IsVisible).Map(doc => ToMetaDoc(doc, x => x.Url = $"/{x.Slug}"));
+}
+
+public struct HeadingInfo(int level, string id, string content)
+{
+    public int Level { get; } = level;
+    public string Id { get; } = id;
+    public string Content { get; } = content;
+}
+
+/// <summary>
+/// An HTML renderer for a <see cref="HeadingBlock"/>.
+/// </summary>
+/// <seealso cref="HtmlObjectRenderer{TObject}" />
+public class AutoLinkHeadingRenderer : HtmlObjectRenderer<HeadingBlock>
+{
+    private static readonly string[] HeadingTexts = [
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6"
+    ];
+
+    public event Action<HeadingBlock>? OnHeading;
+
+    protected override void Write(HtmlRenderer renderer, HeadingBlock obj)
+    {
+        int index = obj.Level - 1;
+        string[] headings = HeadingTexts;
+        string headingText = ((uint)index < (uint)headings.Length)
+            ? headings[index]
+            : $"h{obj.Level}";
+
+        if (renderer.EnableHtmlForBlock)
+        {
+            renderer.Write('<');
+            renderer.Write(headingText);
+            renderer.WriteAttributes(obj);
+            renderer.Write('>');
+        }
+        renderer.WriteLeafInline(obj);
+
+        var attrs = obj.TryGetAttributes();
+        if (attrs?.Id != null && obj.Level <= 4)
+        {
+            renderer.Write("<a class=\"header-anchor\" href=\"javascript:;\" onclick=\"location.hash='#");
+            renderer.Write(attrs.Id);
+            renderer.Write("'\" aria-label=\"Permalink\">&ZeroWidthSpace;</a>");
+        }
+
+        if (renderer.EnableHtmlForBlock)
+        {
+            renderer.Write("</");
+            renderer.Write(headingText);
+            renderer.WriteLine('>');
+        }
+
+        renderer.EnsureLine();
+        OnHeading?.Invoke(obj);
+    }
+}
+
+public class AutoLinkHeadingsExtension : IMarkdownExtension
+{
+    public void Setup(MarkdownPipelineBuilder pipeline)
+    {
+    }
+
+    public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
+    {
+        renderer.ObjectRenderers.Replace<HeadingRenderer>(new AutoLinkHeadingRenderer());
+    }
+}
+
+public class FilesCodeBlockRenderer(CodeBlockRenderer? underlyingRenderer = null) : HtmlObjectRenderer<CodeBlock>
+{
+    private readonly CodeBlockRenderer underlyingRenderer = underlyingRenderer ?? new CodeBlockRenderer();
+
+    protected override void Write(HtmlRenderer renderer, CodeBlock obj)
+    {
+        if (obj is not FencedCodeBlock fencedCodeBlock || obj.Parser is not FencedCodeBlockParser parser)
+        {
+            underlyingRenderer.Write(renderer, obj);
+            return;
+        }
+
+        var attributes = obj.TryGetAttributes() ?? new HtmlAttributes();
+        var languageMoniker = fencedCodeBlock.Info?.Replace(parser.InfoPrefix!, string.Empty);
+        if (string.IsNullOrEmpty(languageMoniker))
+        {
+            underlyingRenderer.Write(renderer, obj);
+            return;
+        }
+
+        var txt = GetContent(obj);
+        renderer
+            .Write("<div")
+            .WriteAttributes(attributes)
+            .Write(">");
+
+        var dir = ParseFileStructure(txt);
+        RenderNode(renderer, dir);
+        renderer.WriteLine("</div>");
+    }
+
+    private static string GetContent(LeafBlock obj)
+    {
+        var code = new StringBuilder();
+        foreach (var line in obj.Lines.Lines)
+        {
+            var slice = line.Slice;
+            if (slice.Text == null)
+                continue;
+
+            var lineText = slice.Text.Substring(slice.Start, slice.Length);
+            code.AppendLine();
+            code.Append(lineText);
+        }
+
+        return code.ToString();
+    }
+
+    public class Node
+    {
+        public List<string> Files { get; set; } = [];
+        public Dictionary<string, Node> Directories { get; set; } = new();
+    }
+
+    public void RenderNode(HtmlRenderer html, Node model)
+    {
+        foreach (var (dirName, childNode) in model.Directories)
+        {
+            html.WriteLine("<div class=\"ml-6\">");
+            html.WriteLine("  <div class=\"flex items-center text-base leading-8\">");
+            html.WriteLine("    <svg class=\"mr-1 text-slate-600 inline-block select-none align-text-bottom overflow-visible\" aria-hidden=\"true\" focusable=\"false\" role=\"img\" viewBox=\"0 0 12 12\" width=\"12\" height=\"12\" fill=\"currentColor\"><path d=\"M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z\"></path></svg>");
+            html.WriteLine("    <svg class=\"mr-1 text-sky-500\" aria-hidden=\"true\" focusable=\"false\" role=\"img\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"currentColor\"><path d=\"M.513 1.513A1.75 1.75 0 0 1 1.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1H13a1 1 0 0 1 1 1v.5H2.75a.75.75 0 0 0 0 1.5h11.978a1 1 0 0 1 .994 1.117L15 13.25A1.75 1.75 0 0 1 13.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75c0-.464.184-.91.513-1.237Z\"></path></svg>");
+            html.WriteLine("    <span>" + dirName + "</span>");
+            html.WriteLine("  </div>");
+            RenderNode(html, childNode);
+            html.WriteLine("</div>");
+        }
+
+        if (model.Files.Count > 0)
+        {
+            html.WriteLine("<div>");
+            foreach (var file in model.Files)
+            {
+                html.WriteLine("<div class=\"ml-6 flex items-center text-base leading-8\">");
+                html.WriteLine("  <svg class=\"mr-1 text-slate-600 inline-block select-none align-text-bottom overflow-visible\" aria-hidden=\"true\" focusable=\"false\" role=\"img\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"currentColor\"><path d=\"M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z\"></path></svg>");
+                html.WriteLine("  <span>" + file + "</span>");
+                html.WriteLine("</div>");
+            }
+            html.WriteLine("</div>");
+        }
+    }
+
+    public static Node ParseFileStructure(string ascii, int indent = 2)
+    {
+        var lines = ascii.Trim().Split('\n').Where(x => x.Trim().Length > 0);
+        var root = new Node();
+        var stack = new Stack<Node>();
+        stack.Push(root);
+
+        foreach (var line in lines)
+        {
+            var depth = line.TakeWhile(char.IsWhiteSpace).Count() / indent;
+            var name = line.Trim();
+            var isDir = name.StartsWith('/');
+
+            while (stack.Count > depth + 1)
+                stack.Pop();
+
+            var parent = stack.Peek();
+            if (isDir)
+            {
+                var dirName = name.Substring(1);
+                var dirContents = new Node();
+                parent.Directories[dirName] = dirContents;
+                stack.Push(dirContents);
+            }
+            else
+            {
+                parent.Files.Add(name);
+            }
+        }
+        return root;
+    }
+}
+
+public class CopyContainerRenderer : HtmlObjectRenderer<CustomContainer>
+{
+    public string Class { get; set; } = "";
+    public string BoxClass { get; set; } = "bg-gray-700";
+    public string IconClass { get; set; } = "";
+    public string TextClass { get; set; } = "text-lg text-white";
+
+    protected override void Write(HtmlRenderer renderer, CustomContainer obj)
+    {
+        renderer.EnsureLine();
+        if (renderer.EnableHtmlForBlock)
+        {
+            renderer.Write(@$"<div class=""{Class} flex cursor-pointer mb-3"" onclick=""copy(this)"">
+                <div class=""flex-grow {BoxClass}"">
+                    <div class=""pl-4 py-1 pb-1.5 align-middle {TextClass}"">");
+        }
+
+        // We don't escape a CustomContainer
+        renderer.WriteChildren(obj);
+        if (renderer.EnableHtmlForBlock)
+        {
+            renderer.WriteLine(@$"</div>
+                    </div>
+                <div class=""flex"">
+                    <div class=""{IconClass} text-white p-1.5 pb-0"">
+                        <svg class=""copied w-6 h-6"" fill=""none"" stroke=""currentColor"" viewBox=""0 0 24 24"" xmlns=""http://www.w3.org/2000/svg""><path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M5 13l4 4L19 7""></path></svg>
+                        <svg class=""nocopy w-6 h-6"" title=""copy"" fill='none' stroke='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+                            <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2'></path>
+                        </svg>
+                    </div>
+                </div>
+            </div>");
+        }
+    }
+}
+
+public class CustomInfoRenderer : HtmlObjectRenderer<CustomContainer>
+{
+    public string Title { get; set; } = "TIP";
+    public string Class { get; set; } = "tip";
+
+    protected override void Write(HtmlRenderer renderer, CustomContainer obj)
+    {
+        renderer.EnsureLine();
+        if (renderer.EnableHtmlForBlock)
+        {
+            var title = obj.Arguments ?? obj.Info;
+            if (string.IsNullOrEmpty(title))
+                title = Title;
+            renderer.Write(@$"<div class=""{Class} custom-block"">
+            <p class=""custom-block-title"">{title}</p>");
+        }
+
+        // We don't escape a CustomContainer
+        renderer.WriteChildren(obj);
+        if (renderer.EnableHtmlForBlock)
+        {
+            renderer.WriteLine("</div>");
+        }
+    }
+}
+
+/// <summary>
+/// Render HTML-encoded inline contents inside a &gt;pre class="pre"/&lt;
+/// </summary>
+public class PreContainerRenderer : HtmlObjectRenderer<CustomContainer>
+{
+    public string Class { get; set; } = "pre";
+
+    protected override void Write(HtmlRenderer renderer, CustomContainer obj)
+    {
+        renderer.EnsureLine();
+        if (renderer.EnableHtmlForBlock)
+        {
+            var attrs = obj.TryGetAttributes();
+            if (attrs != null && attrs.Classes.IsEmpty())
+            {
+                attrs.Classes ??= new();
+                attrs.Classes.Add(Class);
+            }
+
+            renderer.Write("<pre").WriteAttributes(obj).Write('>');
+            renderer.WriteLine();
+        }
+
+        if (obj.FirstOrDefault() is LeafBlock leafBlock)
+        {
+            // There has to be an official API to resolve the original text from a renderer?
+            string? FindOriginalText(ContainerBlock? block)
+            {
+                if (block != null)
+                {
+                    if (block.FirstOrDefault(x => x is LeafBlock { Lines.Count: > 0 }) is LeafBlock first)
+                        return first.Lines.Lines[0].Slice.Text;
+                    return FindOriginalText(block.Parent);
+                }
+
+                return null;
+            }
+
+            var originalSource = leafBlock.Lines.Count > 0
+                ? leafBlock.Lines.Lines[0].Slice.Text
+                : FindOriginalText(obj.Parent);
+            if (originalSource == null)
+            {
+                HostContext.Resolve<ILogger<PreContainerRenderer>>().LogError("Could not find original Text");
+                renderer.WriteLine($"Could not find original Text");
+            }
+            else
+            {
+                renderer.WriteEscape(originalSource.AsSpan().Slice(leafBlock.Span.Start, leafBlock.Span.Length));
+            }
+        }
+        else
+        {
+            renderer.WriteChildren(obj);
+        }
+
+        if (renderer.EnableHtmlForBlock)
+        {
+            renderer.WriteLine("</pre>");
+        }
+    }
+}
+
+public class IncludeContainerInlineRenderer : HtmlObjectRenderer<CustomContainerInline>
+{
+    protected override void Write(HtmlRenderer renderer, CustomContainerInline obj)
+    {
+        var include = obj.FirstChild is LiteralInline literalInline
+            ? literalInline.Content.AsSpan().RightPart(' ').ToString()
+            : null;
+        if (string.IsNullOrEmpty(include))
+            return;
+
+        renderer.Write("<div").WriteAttributes(obj).Write('>');
+        MarkdownFileBase? doc = null;
+        if (include.EndsWith(".md"))
+        {
+            var includes = HostContext.TryResolve<MarkdownIncludes>();
+            var pages = HostContext.TryResolve<MarkdownPages>();
+            // default relative path to _includes/
+            include = include[0] != '/'
+                ? "_includes/" + include
+                : include.TrimStart('/');
+
+            doc = includes?.Pages.FirstOrDefault(x => x.Path == include);
+            if (doc == null && pages != null)
+            {
+                var prefix = include.LeftPart('/');
+                var slug = include.LeftPart('.');
+                var allIncludes = pages.GetVisiblePages(prefix, allDirectories: true);
+                doc = allIncludes.FirstOrDefault(x => x.Slug == slug);
+            }
+        }
+
+        if (doc?.Preview != null)
+        {
+            renderer.WriteLine(doc.Preview!);
+        }
+        else
+        {
+            var log = HostContext.Resolve<ILogger<IncludeContainerInlineRenderer>>();
+            log.LogError("Could not find: {Include}", include);
+            renderer.WriteLine($"Could not find: {include}");
+        }
+
+        renderer.Write("</div>");
+    }
+}
+
+public class YouTubeContainerInlineRenderer : HtmlObjectRenderer<CustomContainerInline>
+{
+    public string? ContainerClass { get; set; } = "flex justify-center";
+    public string? Class { get; set; } = "w-full mx-4 my-4";
+
+    protected override void Write(HtmlRenderer renderer, CustomContainerInline obj)
+    {
+        var videoId = obj.FirstChild is LiteralInline literalInline
+            ? literalInline.Content.AsSpan().RightPart(' ').ToString()
+            : null;
+        if (string.IsNullOrEmpty(videoId))
+            return;
+
+        if (ContainerClass != null) renderer.WriteLine($"<div class=\"{ContainerClass}\">");
+        renderer.WriteLine(
+            $"<lite-youtube class=\"{Class}\" width=\"560\" height=\"315\" videoid=\"{videoId}\" style=\"background-image:url('https://img.youtube.com/vi/{videoId}/maxresdefault.jpg')\"></lite-youtube>");
+        if (ContainerClass != null) renderer.WriteLine("</div>");
+    }
+}
+
+public class YouTubeContainerRenderer : HtmlObjectRenderer<CustomContainer>
+{
+    public string? ContainerClass { get; set; } // = "flex justify-center";
+    public string? Class { get; set; } = "w-full mx-4 my-4";
+
+    protected override void Write(HtmlRenderer renderer, CustomContainer obj)
+    {
+        renderer.EnsureLine();
+
+        var videoId = (obj.Arguments ?? "").TrimEnd(':');
+        if (string.IsNullOrEmpty(videoId))
+        {
+            renderer.WriteLine("<!-- youtube: Missing YouTube Video Id -->");
+            return;
+        }
+
+        var title = ((obj.Count > 0 ? obj[0] as ParagraphBlock : null)?.Inline?.FirstChild as LiteralInline)?.Content
+            .ToString() ?? "";
+        if (ContainerClass != null) renderer.WriteLine($"<div class=\"{ContainerClass}\">");
+        renderer.WriteLine(
+            $"<lite-youtube class=\"{Class}\" width=\"560\" height=\"315\" videoid=\"{videoId}\" playlabel=\"{title}\" style=\"background-image:url('https://img.youtube.com/vi/{videoId}/maxresdefault.jpg')\"></lite-youtube>");
+        if (ContainerClass != null) renderer.WriteLine("</div>");
+    }
+}
+
+public class CustomCodeBlockRenderers(ContainerExtensions extensions, CodeBlockRenderer? underlyingRenderer = null)
+    : HtmlObjectRenderer<CodeBlock>
+{
+    protected override void Write(HtmlRenderer renderer, CodeBlock obj)
+    {
+        var useRenderer = obj is FencedCodeBlock { Info: not null } f &&
+                          extensions.CodeBlocks.TryGetValue(f.Info, out var customRenderer)
+            ? customRenderer(underlyingRenderer)
+            : underlyingRenderer ?? new CodeBlockRenderer();
+        useRenderer.Write(renderer, obj);
+    }
+}
+
+public class CustomContainerRenderers(ContainerExtensions extensions) : HtmlObjectRenderer<CustomContainer>
+{
+    protected override void Write(HtmlRenderer renderer, CustomContainer obj)
+    {
+        var useRenderer = obj.Info != null && extensions.BlockContainers.TryGetValue(obj.Info, out var customRenderer)
+            ? customRenderer
+            : new HtmlCustomContainerRenderer();
+        useRenderer.Write(renderer, obj);
+    }
+}
+
+public class CustomContainerInlineRenderers(ContainerExtensions extensions) : HtmlObjectRenderer<CustomContainerInline>
+{
+    protected override void Write(HtmlRenderer renderer, CustomContainerInline obj)
+    {
+        var firstWord = obj.FirstChild is LiteralInline literalInline
+            ? literalInline.Content.AsSpan().LeftPart(' ').ToString()
+            : null;
+        var useRenderer =
+            firstWord != null && extensions.InlineContainers.TryGetValue(firstWord, out var customRenderer)
+                ? customRenderer
+                : new HtmlCustomContainerInlineRenderer();
+        useRenderer.Write(renderer, obj);
+    }
+}
+
+public class ContainerExtensions : IMarkdownExtension
+{
+    public Dictionary<string, Func<CodeBlockRenderer?, HtmlObjectRenderer<CodeBlock>>> CodeBlocks { get; set; } = new();
+    public Dictionary<string, HtmlObjectRenderer<CustomContainer>> BlockContainers { get; set; } = new();
+    public Dictionary<string, HtmlObjectRenderer<CustomContainerInline>> InlineContainers { get; set; } = new();
+
+    public void AddCodeBlock(string name, Func<CodeBlockRenderer?, HtmlObjectRenderer<CodeBlock>> fenceCodeBlock) =>
+        CodeBlocks[name] = fenceCodeBlock;
+
+    public void AddBlockContainer(string name, HtmlObjectRenderer<CustomContainer> container) =>
+        BlockContainers[name] = container;
+
+    public void AddInlineContainer(string name, HtmlObjectRenderer<CustomContainerInline> container) =>
+        InlineContainers[name] = container;
+
+    public void AddBuiltInContainers(string[]? exclude = null)
+    {
+        CodeBlocks = new()
+        {
+            ["files"] = origRenderer => new FilesCodeBlockRenderer(origRenderer)
+        };
+        BlockContainers = new()
+        {
+            ["copy"] = new CopyContainerRenderer
+            {
+                Class = "not-prose copy cp",
+                IconClass = "bg-sky-500",
+            },
+            ["sh"] = new CopyContainerRenderer
+            {
+                Class = "not-prose sh-copy cp",
+                BoxClass = "bg-gray-800",
+                IconClass = "bg-green-600",
+                TextClass = "whitespace-pre text-base text-gray-100",
+            },
+            ["tip"] = new CustomInfoRenderer(),
+            ["info"] = new CustomInfoRenderer
+            {
+                Class = "info",
+                Title = "INFO",
+            },
+            ["warning"] = new CustomInfoRenderer
+            {
+                Class = "warning",
+                Title = "WARNING",
+            },
+            ["danger"] = new CustomInfoRenderer
+            {
+                Class = "danger",
+                Title = "DANGER",
+            },
+            ["pre"] = new PreContainerRenderer(),
+            ["youtube"] = new YouTubeContainerRenderer(),
+        };
+        InlineContainers = new()
+        {
+            ["include"] = new IncludeContainerInlineRenderer(),
+            ["youtube"] = new YouTubeContainerInlineRenderer(),
+        };
+
+        if (exclude != null)
+        {
+            foreach (var name in exclude)
+            {
+                BlockContainers.TryRemove(name, out _);
+                InlineContainers.TryRemove(name, out _);
+            }
+        }
+    }
+
+    public void Setup(MarkdownPipelineBuilder pipeline)
+    {
+        if (!pipeline.BlockParsers.Contains<CustomContainerParser>())
+        {
+            // Insert the parser before any other parsers
+            pipeline.BlockParsers.Insert(0, new CustomContainerParser());
+        }
+
+        // Plug the inline parser for CustomContainerInline
+        var inlineParser = pipeline.InlineParsers.Find<EmphasisInlineParser>();
+        if (inlineParser != null && !inlineParser.HasEmphasisChar(':'))
+        {
+            inlineParser.EmphasisDescriptors.Add(new EmphasisDescriptor(':', 2, 2, true));
+            inlineParser.TryCreateEmphasisInlineList.Add((emphasisChar, delimiterCount) =>
+            {
+                if (delimiterCount >= 2 && emphasisChar == ':')
+                {
+                    return new CustomContainerInline();
+                }
+
+                return null;
+            });
+        }
+    }
+
+    public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
+    {
+        if (renderer is HtmlRenderer htmlRenderer)
+        {
+            var originalCodeBlockRenderer = htmlRenderer.ObjectRenderers.FindExact<CodeBlockRenderer>();
+            if (originalCodeBlockRenderer != null)
+            {
+                htmlRenderer.ObjectRenderers.Remove(originalCodeBlockRenderer);
+            }
+
+            htmlRenderer.ObjectRenderers.AddIfNotAlready(
+                new CustomCodeBlockRenderers(this, originalCodeBlockRenderer));
+
+            if (!htmlRenderer.ObjectRenderers.Contains<CustomContainerRenderers>())
+            {
+                // Must be inserted before CodeBlockRenderer
+                htmlRenderer.ObjectRenderers.Insert(0, new CustomContainerRenderers(this));
+            }
+
+            htmlRenderer.ObjectRenderers.TryRemove<HtmlCustomContainerInlineRenderer>();
+            // Must be inserted before EmphasisRenderer
+            htmlRenderer.ObjectRenderers.Insert(0, new CustomContainerInlineRenderers(this));
+        }
+    }
+}
+
+public class HeadingsMapExtension : IMarkdownExtension
+{
+    public void Setup(MarkdownPipelineBuilder pipeline)
+    {
+        var headingBlockParser = pipeline.BlockParsers.Find<HeadingBlockParser>();
+        if (headingBlockParser != null)
+        {
+            // Install a hook on the HeadingBlockParser when a HeadingBlock is actually processed
+            // headingBlockParser.Closed -= HeadingBlockParser_Closed;
+            // headingBlockParser.Closed += HeadingBlockParser_Closed;
+        }
+    }
+
+    public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
+    {
+        if (renderer.ObjectRenderers.TryFind<AutoLinkHeadingRenderer>(out var customHeader))
+        {
+            customHeader.OnHeading += OnHeading;
+        }
+    }
+
+    private void OnHeading(HeadingBlock headingBlock)
+    {
+        if (headingBlock.Parent is not MarkdownDocument document)
+            return;
+
+        if (document.GetData(nameof(DocumentMap)) is not DocumentMap docMap)
+        {
+            docMap = new();
+            document.SetData(nameof(DocumentMap), docMap);
+        }
+
+        var text = headingBlock.Inline?.FirstChild is LiteralInline literalInline
+            ? literalInline.ToString()
+            : null;
+        var attrs = headingBlock.TryGetAttributes();
+
+        if (!string.IsNullOrEmpty(text) && attrs?.Id != null)
+        {
+            if (headingBlock.Level == 2)
+            {
+                docMap.Headings.Add(new MarkdownMenu
+                {
+                    Text = text,
+                    Link = $"#{attrs.Id}",
+                });
+            }
+            else if (headingBlock.Level == 3)
+            {
+                var lastHeading = docMap.Headings.LastOrDefault();
+                if (lastHeading != null)
+                {
+                    lastHeading.Children ??= new();
+                    lastHeading.Children.Add(new MarkdownMenuItem
+                    {
+                        Text = text,
+                        Link = $"#{attrs.Id}",
+                    });
+                }
+            }
+        }
+    }
+}
+
+public static class MarkdigExtensions
+{
+    /// <summary>
+    /// Uses the auto-identifier extension.
+    /// </summary>
+    public static MarkdownPipelineBuilder UseAutoLinkHeadings(this MarkdownPipelineBuilder pipeline)
+    {
+        pipeline.Extensions.AddIfNotAlready(new AutoLinkHeadingsExtension());
+        return pipeline;
+    }
+
+    public static MarkdownPipelineBuilder UseHeadingsMap(this MarkdownPipelineBuilder pipeline)
+    {
+        pipeline.Extensions.AddIfNotAlready(new HeadingsMapExtension());
+        return pipeline;
+    }
+
+    public static MarkdownPipelineBuilder UseCustomContainers(this MarkdownPipelineBuilder pipeline,
+        Action<ContainerExtensions>? configure = null)
+    {
+        var ext = new ContainerExtensions();
+        configure?.Invoke(ext);
+        pipeline.Extensions.AddIfNotAlready(ext);
+        return pipeline;
+    }
+}
+
+public class DocumentMap
+{
+    public List<MarkdownMenu> Headings { get; } = new();
+}
+
+public class MarkdownMenu
+{
+    public string? Icon { get; set; }
+    public string? Text { get; set; }
+    public string? Link { get; set; }
+    public List<MarkdownMenuItem>? Children { get; set; }
+}
+
+public class MarkdownMenuItem
+{
+    public string Text { get; set; }
+    public string Link { get; set; }
+}
\ No newline at end of file
diff --git a/MyApp/MarkdownTagHelper.cs b/MyApp/MarkdownTagHelper.cs
new file mode 100644
index 0000000..1d1caa4
--- /dev/null
+++ b/MyApp/MarkdownTagHelper.cs
@@ -0,0 +1,92 @@
+// run node postinstall.js to update to latest version
+using Markdig;
+using Microsoft.AspNetCore.Mvc.ViewFeatures;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace MyApp;
+
+[HtmlTargetElement("markdown", TagStructure = TagStructure.NormalOrSelfClosing)]
+[HtmlTargetElement(Attributes = "markdown")]
+public class MarkdownTagHelper : TagHelper
+{
+    public ModelExpression? Content { get; set; }
+    
+    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+    {
+        if (output.TagName == "markdown")
+        {
+            output.TagName = null;
+        }
+        output.Attributes.RemoveAll("markdown");
+
+        var content = await GetContent(output);
+        
+        var pipeline = new MarkdownPipelineBuilder()
+            .UseAdvancedExtensions()
+            .Build();
+
+        var writer = new StringWriter();
+        var cls = output.Attributes["class"]?.Value ?? "prose";
+        await writer.WriteAsync($"<div class=\"{cls}\">");
+        var renderer = new Markdig.Renderers.HtmlRenderer(writer);
+        pipeline.Setup(renderer);
+
+        var include = output.Attributes["include"]?.Value?.ToString() ?? "";
+        if (!string.IsNullOrEmpty(include))
+        {
+            MarkdownFileBase? doc = null;
+            if (include.EndsWith(".md"))
+            {
+                var includes = HostContext.TryResolve<MarkdownIncludes>();
+                var pages = HostContext.TryResolve<MarkdownPages>();
+                // default relative path to _includes/
+                include = include[0] != '/'
+                    ? "_includes/" + include
+                    : include.TrimStart('/');
+                
+                doc = includes.Pages.FirstOrDefault(x => x.Path == include);
+                if (doc == null && pages != null)
+                {
+                    var prefix = include.LeftPart('/');
+                    var slug = include.LeftPart('.');
+                    var allIncludes = pages.GetVisiblePages(prefix, allDirectories: true);
+                    doc = allIncludes.FirstOrDefault(x => x.Slug == slug);
+                }
+
+                if (doc?.Preview != null)
+                {
+                    renderer.WriteLine(doc.Preview!);
+                }
+                else
+                {
+                    var log = HostContext.Resolve<ILogger<IncludeContainerInlineRenderer>>();
+                    log.LogError("Could not find: {Include}", include);
+                    renderer.WriteLine($"Could not find: {include}");
+                }
+            }
+            else
+            {
+                renderer.WriteLine($"Could not find: {include}");
+            }
+        }
+        else
+        {
+            var document = Markdown.Parse(content ?? "", pipeline);
+            renderer.Render(document);
+        }
+
+        await writer.WriteAsync("</div>");
+        await writer.FlushAsync();
+        var html = writer.ToString();
+
+        output.Content.SetHtmlContent(html ?? "");
+    }
+
+    private async Task<string?> GetContent(TagHelperOutput output)
+    {
+        if (Content == null)
+            return (await output.GetChildContentAsync()).GetContent();
+
+        return Content.Model?.ToString();
+    }
+}
\ No newline at end of file
diff --git a/MyApp/Migrations/20240301000000_CreateIdentitySchema.Designer.cs b/MyApp/Migrations/20240301000000_CreateIdentitySchema.Designer.cs
new file mode 100644
index 0000000..cb96a69
--- /dev/null
+++ b/MyApp/Migrations/20240301000000_CreateIdentitySchema.Designer.cs
@@ -0,0 +1,280 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using MyApp.Data;
+
+#nullable disable
+
+namespace MyApp.Migrations
+{
+    [DbContext(typeof(ApplicationDbContext))]
+    [Migration("20240301000000_CreateIdentitySchema")]
+    partial class CreateIdentitySchema
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder.HasAnnotation("ProductVersion", "8.0.2");
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRole", b =>
+                {
+                    b.Property<string>("Id")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Name")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedName")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedName")
+                        .IsUnique()
+                        .HasDatabaseName("RoleNameIndex");
+
+                    b.ToTable("AspNetRoles", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("RoleId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetRoleClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<string>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("UserId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<string>", b =>
+                {
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ProviderKey")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ProviderDisplayName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("UserId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("LoginProvider", "ProviderKey");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserLogins", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<string>", b =>
+                {
+                    b.Property<string>("UserId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("RoleId")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("UserId", "RoleId");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetUserRoles", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<string>", b =>
+                {
+                    b.Property<string>("UserId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Value")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("UserId", "LoginProvider", "Name");
+
+                    b.ToTable("AspNetUserTokens", (string)null);
+                });
+
+            modelBuilder.Entity("MyApp.Data.ApplicationUser", b =>
+                {
+                    b.Property<string>("Id")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("AccessFailedCount")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("DisplayName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Email")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("EmailConfirmed")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("FirstName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("LastName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("LockoutEnabled")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTimeOffset?>("LockoutEnd")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedEmail")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedUserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("PasswordHash")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("PhoneNumber")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("PhoneNumberConfirmed")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ProfileUrl")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("SecurityStamp")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("TwoFactorEnabled")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("UserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedEmail")
+                        .HasDatabaseName("EmailIndex");
+
+                    b.HasIndex("NormalizedUserName")
+                        .IsUnique()
+                        .HasDatabaseName("UserNameIndex");
+
+                    b.ToTable("AspNetUsers", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<string>", b =>
+                {
+                    b.HasOne("MyApp.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<string>", b =>
+                {
+                    b.HasOne("MyApp.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("MyApp.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<string>", b =>
+                {
+                    b.HasOne("MyApp.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/MyApp/Migrations/20240301000000_CreateIdentitySchema.cs b/MyApp/Migrations/20240301000000_CreateIdentitySchema.cs
new file mode 100644
index 0000000..c8b0782
--- /dev/null
+++ b/MyApp/Migrations/20240301000000_CreateIdentitySchema.cs
@@ -0,0 +1,226 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace MyApp.Migrations
+{
+    /// <inheritdoc />
+    public partial class CreateIdentitySchema : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateTable(
+                name: "AspNetRoles",
+                columns: table => new
+                {
+                    Id = table.Column<string>(type: "TEXT", nullable: false),
+                    Name = table.Column<string>(type: "TEXT", maxLength: 256, nullable: true),
+                    NormalizedName = table.Column<string>(type: "TEXT", maxLength: 256, nullable: true),
+                    ConcurrencyStamp = table.Column<string>(type: "TEXT", nullable: true)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_AspNetRoles", x => x.Id);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "AspNetUsers",
+                columns: table => new
+                {
+                    Id = table.Column<string>(type: "TEXT", nullable: false),
+                    FirstName = table.Column<string>(type: "TEXT", nullable: true),
+                    LastName = table.Column<string>(type: "TEXT", nullable: true),
+                    DisplayName = table.Column<string>(type: "TEXT", nullable: true),
+                    ProfileUrl = table.Column<string>(type: "TEXT", nullable: true),
+                    UserName = table.Column<string>(type: "TEXT", maxLength: 256, nullable: true),
+                    NormalizedUserName = table.Column<string>(type: "TEXT", maxLength: 256, nullable: true),
+                    Email = table.Column<string>(type: "TEXT", maxLength: 256, nullable: true),
+                    NormalizedEmail = table.Column<string>(type: "TEXT", maxLength: 256, nullable: true),
+                    EmailConfirmed = table.Column<bool>(type: "INTEGER", nullable: false),
+                    PasswordHash = table.Column<string>(type: "TEXT", nullable: true),
+                    SecurityStamp = table.Column<string>(type: "TEXT", nullable: true),
+                    ConcurrencyStamp = table.Column<string>(type: "TEXT", nullable: true),
+                    PhoneNumber = table.Column<string>(type: "TEXT", nullable: true),
+                    PhoneNumberConfirmed = table.Column<bool>(type: "INTEGER", nullable: false),
+                    TwoFactorEnabled = table.Column<bool>(type: "INTEGER", nullable: false),
+                    LockoutEnd = table.Column<DateTimeOffset>(type: "TEXT", nullable: true),
+                    LockoutEnabled = table.Column<bool>(type: "INTEGER", nullable: false),
+                    AccessFailedCount = table.Column<int>(type: "INTEGER", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_AspNetUsers", x => x.Id);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "AspNetRoleClaims",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "INTEGER", nullable: false)
+                        .Annotation("Sqlite:Autoincrement", true),
+                    RoleId = table.Column<string>(type: "TEXT", nullable: false),
+                    ClaimType = table.Column<string>(type: "TEXT", nullable: true),
+                    ClaimValue = table.Column<string>(type: "TEXT", nullable: true)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_AspNetRoleClaims", x => x.Id);
+                    table.ForeignKey(
+                        name: "FK_AspNetRoleClaims_AspNetRoles_RoleId",
+                        column: x => x.RoleId,
+                        principalTable: "AspNetRoles",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "AspNetUserClaims",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "INTEGER", nullable: false)
+                        .Annotation("Sqlite:Autoincrement", true),
+                    UserId = table.Column<string>(type: "TEXT", nullable: false),
+                    ClaimType = table.Column<string>(type: "TEXT", nullable: true),
+                    ClaimValue = table.Column<string>(type: "TEXT", nullable: true)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_AspNetUserClaims", x => x.Id);
+                    table.ForeignKey(
+                        name: "FK_AspNetUserClaims_AspNetUsers_UserId",
+                        column: x => x.UserId,
+                        principalTable: "AspNetUsers",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "AspNetUserLogins",
+                columns: table => new
+                {
+                    LoginProvider = table.Column<string>(type: "TEXT", nullable: false),
+                    ProviderKey = table.Column<string>(type: "TEXT", nullable: false),
+                    ProviderDisplayName = table.Column<string>(type: "TEXT", nullable: true),
+                    UserId = table.Column<string>(type: "TEXT", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_AspNetUserLogins", x => new { x.LoginProvider, x.ProviderKey });
+                    table.ForeignKey(
+                        name: "FK_AspNetUserLogins_AspNetUsers_UserId",
+                        column: x => x.UserId,
+                        principalTable: "AspNetUsers",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "AspNetUserRoles",
+                columns: table => new
+                {
+                    UserId = table.Column<string>(type: "TEXT", nullable: false),
+                    RoleId = table.Column<string>(type: "TEXT", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_AspNetUserRoles", x => new { x.UserId, x.RoleId });
+                    table.ForeignKey(
+                        name: "FK_AspNetUserRoles_AspNetRoles_RoleId",
+                        column: x => x.RoleId,
+                        principalTable: "AspNetRoles",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                    table.ForeignKey(
+                        name: "FK_AspNetUserRoles_AspNetUsers_UserId",
+                        column: x => x.UserId,
+                        principalTable: "AspNetUsers",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "AspNetUserTokens",
+                columns: table => new
+                {
+                    UserId = table.Column<string>(type: "TEXT", nullable: false),
+                    LoginProvider = table.Column<string>(type: "TEXT", nullable: false),
+                    Name = table.Column<string>(type: "TEXT", nullable: false),
+                    Value = table.Column<string>(type: "TEXT", nullable: true)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_AspNetUserTokens", x => new { x.UserId, x.LoginProvider, x.Name });
+                    table.ForeignKey(
+                        name: "FK_AspNetUserTokens_AspNetUsers_UserId",
+                        column: x => x.UserId,
+                        principalTable: "AspNetUsers",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateIndex(
+                name: "IX_AspNetRoleClaims_RoleId",
+                table: "AspNetRoleClaims",
+                column: "RoleId");
+
+            migrationBuilder.CreateIndex(
+                name: "RoleNameIndex",
+                table: "AspNetRoles",
+                column: "NormalizedName",
+                unique: true);
+
+            migrationBuilder.CreateIndex(
+                name: "IX_AspNetUserClaims_UserId",
+                table: "AspNetUserClaims",
+                column: "UserId");
+
+            migrationBuilder.CreateIndex(
+                name: "IX_AspNetUserLogins_UserId",
+                table: "AspNetUserLogins",
+                column: "UserId");
+
+            migrationBuilder.CreateIndex(
+                name: "IX_AspNetUserRoles_RoleId",
+                table: "AspNetUserRoles",
+                column: "RoleId");
+
+            migrationBuilder.CreateIndex(
+                name: "EmailIndex",
+                table: "AspNetUsers",
+                column: "NormalizedEmail");
+
+            migrationBuilder.CreateIndex(
+                name: "UserNameIndex",
+                table: "AspNetUsers",
+                column: "NormalizedUserName",
+                unique: true);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "AspNetRoleClaims");
+
+            migrationBuilder.DropTable(
+                name: "AspNetUserClaims");
+
+            migrationBuilder.DropTable(
+                name: "AspNetUserLogins");
+
+            migrationBuilder.DropTable(
+                name: "AspNetUserRoles");
+
+            migrationBuilder.DropTable(
+                name: "AspNetUserTokens");
+
+            migrationBuilder.DropTable(
+                name: "AspNetRoles");
+
+            migrationBuilder.DropTable(
+                name: "AspNetUsers");
+        }
+    }
+}
diff --git a/MyApp/Migrations/ApplicationDbContextModelSnapshot.cs b/MyApp/Migrations/ApplicationDbContextModelSnapshot.cs
new file mode 100644
index 0000000..8984a6a
--- /dev/null
+++ b/MyApp/Migrations/ApplicationDbContextModelSnapshot.cs
@@ -0,0 +1,277 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using MyApp.Data;
+
+#nullable disable
+
+namespace MyApp.Migrations
+{
+    [DbContext(typeof(ApplicationDbContext))]
+    partial class ApplicationDbContextModelSnapshot : ModelSnapshot
+    {
+        protected override void BuildModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder.HasAnnotation("ProductVersion", "8.0.2");
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRole", b =>
+                {
+                    b.Property<string>("Id")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Name")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedName")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedName")
+                        .IsUnique()
+                        .HasDatabaseName("RoleNameIndex");
+
+                    b.ToTable("AspNetRoles", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("RoleId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetRoleClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<string>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("UserId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<string>", b =>
+                {
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ProviderKey")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ProviderDisplayName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("UserId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("LoginProvider", "ProviderKey");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserLogins", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<string>", b =>
+                {
+                    b.Property<string>("UserId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("RoleId")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("UserId", "RoleId");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetUserRoles", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<string>", b =>
+                {
+                    b.Property<string>("UserId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Value")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("UserId", "LoginProvider", "Name");
+
+                    b.ToTable("AspNetUserTokens", (string)null);
+                });
+
+            modelBuilder.Entity("MyApp.Data.ApplicationUser", b =>
+                {
+                    b.Property<string>("Id")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("AccessFailedCount")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("DisplayName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Email")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("EmailConfirmed")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("FirstName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("LastName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("LockoutEnabled")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTimeOffset?>("LockoutEnd")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedEmail")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedUserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("PasswordHash")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("PhoneNumber")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("PhoneNumberConfirmed")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ProfileUrl")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("SecurityStamp")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("TwoFactorEnabled")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("UserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedEmail")
+                        .HasDatabaseName("EmailIndex");
+
+                    b.HasIndex("NormalizedUserName")
+                        .IsUnique()
+                        .HasDatabaseName("UserNameIndex");
+
+                    b.ToTable("AspNetUsers", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<string>", b =>
+                {
+                    b.HasOne("MyApp.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<string>", b =>
+                {
+                    b.HasOne("MyApp.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("MyApp.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<string>", b =>
+                {
+                    b.HasOne("MyApp.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/MyApp/Migrations/Migration1000.cs b/MyApp/Migrations/Migration1000.cs
new file mode 100644
index 0000000..b292ad4
--- /dev/null
+++ b/MyApp/Migrations/Migration1000.cs
@@ -0,0 +1,84 @@
+using System.Data;
+using ServiceStack;
+using ServiceStack.DataAnnotations;
+using ServiceStack.OrmLite;
+
+namespace MyApp.Migrations;
+
+public class Migration1000 : MigrationBase
+{
+    public class Booking : AuditBase
+    {
+        [AutoIncrement]
+        public int Id { get; set; }
+        public string Name { get; set; } = default!;
+        public RoomType RoomType { get; set; }
+        public int RoomNumber { get; set; }
+        public DateTime BookingStartDate { get; set; }
+        public DateTime? BookingEndDate { get; set; }
+        public decimal Cost { get; set; }
+        public string? Notes { get; set; }
+        public bool? Cancelled { get; set; }
+
+        [References(typeof(Coupon))]
+        public string? CouponId { get; set; }
+    }
+
+    public class Coupon
+    {
+        public string Id { get; set; } = default!;
+        public string Description { get; set; } = default!;
+        public int Discount { get; set; }
+        public DateTime ExpiryDate { get; set; }
+    }
+
+    public enum RoomType
+    {
+        Queen,
+        Double,
+        Suite,
+    }
+
+    public override void Up()
+    {
+        Db.CreateTable<Coupon>();
+        Db.CreateTable<Booking>();
+
+        new[] { 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, }.Each(percent => {
+            Db.Insert(new Coupon
+            {
+                Id = $"BOOK{percent}",
+                Description = $"{percent}% off",
+                Discount = percent,
+                ExpiryDate = DateTime.UtcNow.AddDays(30)
+            });
+        });
+
+        CreateBooking(Db, "First Booking!", RoomType.Queen, 10, 100, "BOOK10", "employee@email.com");
+        CreateBooking(Db, "Booking 2", RoomType.Double, 12, 120, "BOOK25", "manager@email.com");
+        CreateBooking(Db, "Booking the 3rd", RoomType.Suite, 13, 130, null, "employee@email.com");
+    }
+
+    public void CreateBooking(IDbConnection? db,
+        string name, RoomType type, int roomNo, decimal cost, string? couponId, string by) =>
+        db.Insert(new Booking
+        {
+            Name = name,
+            RoomType = type,
+            RoomNumber = roomNo,
+            Cost = cost,
+            BookingStartDate = DateTime.UtcNow.AddDays(roomNo),
+            BookingEndDate = DateTime.UtcNow.AddDays(roomNo + 7),
+            CouponId = couponId,
+            CreatedBy = by,
+            CreatedDate = DateTime.UtcNow,
+            ModifiedBy = by,
+            ModifiedDate = DateTime.UtcNow,
+        });
+
+    public override void Down()
+    {
+        Db.DropTable<Booking>();
+        Db.DropTable<Coupon>();
+    }
+}
\ No newline at end of file
diff --git a/MyApp/MyApp.csproj b/MyApp/MyApp.csproj
new file mode 100644
index 0000000..f895da1
--- /dev/null
+++ b/MyApp/MyApp.csproj
@@ -0,0 +1,59 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+    <PropertyGroup>
+        <TargetFramework>net8.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <UserSecretsId>aspnet-MyApp-7b2ab71a-0b50-423f-969d-e35a9402b1b5</UserSecretsId>
+        <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
+        <PublishProfile>DefaultContainer</PublishProfile>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <Using Include="MyApp" />
+        <Using Include="ServiceStack" />
+    </ItemGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.*" />
+        <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.*" />
+        <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="8.*" />
+        <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.*" />
+        <PackageReference Include="Markdig" Version="0.34.*" />
+    </ItemGroup>
+    
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="8.*" />
+        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.*" />
+        <PackageReference Include="ServiceStack.AspNetCore.OpenApi" Version="8.*" />
+    </ItemGroup>
+
+    <ItemGroup>
+        <PackageReference Include="ServiceStack" Version="8.*" />
+        <PackageReference Include="ServiceStack.Blazor" Version="8.*" />
+        <PackageReference Include="ServiceStack.OrmLite.Sqlite.Data" Version="8.*" />
+        <PackageReference Include="ServiceStack.Extensions" Version="8.*" />
+        <PackageReference Include="ServiceStack.Server" Version="8.*" />
+    </ItemGroup>
+
+    <ItemGroup>
+        <ProjectReference Include="..\MyApp.ServiceInterface\MyApp.ServiceInterface.csproj" />
+        <ProjectReference Include="..\MyApp.ServiceModel\MyApp.ServiceModel.csproj" />
+    </ItemGroup>
+
+    <ItemGroup>
+        <Content Include="_includes\**" CopyToPublishDirectory="PreserveNewest"/>
+        <Content Include="_pages\**" CopyToPublishDirectory="PreserveNewest"/>
+        <Content Include="_posts\*.md" CopyToPublishDirectory="PreserveNewest"/>
+        <Content Include="_videos\**" CopyToPublishDirectory="PreserveNewest"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <Folder Include="App_Data\" />
+    </ItemGroup>
+
+    <Target Name="tailwind" BeforeTargets="Publish">
+        <Exec Command="npm run ui:build" WorkingDirectory="./" />
+    </Target>
+
+</Project>
diff --git a/MyApp/Program.cs b/MyApp/Program.cs
new file mode 100644
index 0000000..f77fdf1
--- /dev/null
+++ b/MyApp/Program.cs
@@ -0,0 +1,94 @@
+using System.Net;
+using Microsoft.AspNetCore.Components.Authorization;
+using Microsoft.AspNetCore.Components.Server;
+using Microsoft.AspNetCore.DataProtection;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.EntityFrameworkCore;
+using ServiceStack.Blazor;
+using MyApp.Components;
+using MyApp.Data;
+using MyApp.Components.Account;
+using MyApp.ServiceInterface;
+
+var builder = WebApplication.CreateBuilder(args);
+
+var services = builder.Services;
+var config = builder.Configuration;
+
+// Add services to the container.
+services.AddRazorComponents();
+
+services.AddCascadingAuthenticationState();
+services.AddScoped<IdentityUserAccessor>();
+services.AddScoped<IdentityRedirectManager>();
+services.AddScoped<AuthenticationStateProvider, ServerAuthenticationStateProvider>();
+
+services.AddAuthorization();
+services.AddAuthentication(options =>
+    {
+        options.DefaultScheme = IdentityConstants.ApplicationScheme;
+        options.DefaultSignInScheme = IdentityConstants.ExternalScheme;
+    })
+    .AddIdentityCookies();
+services.AddDataProtection()
+    .PersistKeysToFileSystem(new DirectoryInfo("App_Data"));
+
+services.AddDatabaseDeveloperPageExceptionFilter();
+
+services.AddIdentityCore<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
+    .AddRoles<IdentityRole>()
+    .AddEntityFrameworkStores<ApplicationDbContext>()
+    .AddSignInManager()
+    .AddDefaultTokenProviders();
+
+services.AddSingleton<IEmailSender<ApplicationUser>, IdentityNoOpEmailSender>();
+// Uncomment to send emails with SMTP, configure SMTP with "SmtpConfig" in appsettings.json
+//services.AddSingleton<IEmailSender<ApplicationUser>, EmailSender>();
+services.AddScoped<IUserClaimsPrincipalFactory<ApplicationUser>, AdditionalUserClaimsPrincipalFactory>();
+
+var baseUrl = builder.Configuration["ApiBaseUrl"] ??
+    (builder.Environment.IsDevelopment() ? "https://localhost:5001" : "http://" + IPAddress.Loopback);
+services.AddScoped(c => new HttpClient { BaseAddress = new Uri(baseUrl) });
+services.AddBlazorServerIdentityApiClient(baseUrl);
+services.AddLocalStorage();
+
+services.AddServiceStack(typeof(MyServices).Assembly);
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (app.Environment.IsDevelopment())
+{
+    app.UseMigrationsEndPoint();
+}
+else
+{
+    app.UseExceptionHandler("/Error", createScopeForErrors: true);
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+
+app.UseStaticFiles();
+app.UseAntiforgery();
+
+app.MapRazorComponents<App>();
+
+// Add additional endpoints required by the Identity /Account Razor components.
+app.MapAdditionalIdentityEndpoints();
+
+app.UseServiceStack(new AppHost(), options => {
+    options.MapEndpoints();
+});
+
+BlazorConfig.Set(new()
+{
+    Services = app.Services,
+    JSParseObject = JS.ParseObject,
+    IsDevelopment = app.Environment.IsDevelopment(),
+    EnableLogging = app.Environment.IsDevelopment(),
+    EnableVerboseLogging = app.Environment.IsDevelopment(),
+});
+
+app.Run();
diff --git a/MyApp/Properties/launchSettings.json b/MyApp/Properties/launchSettings.json
new file mode 100644
index 0000000..884f48c
--- /dev/null
+++ b/MyApp/Properties/launchSettings.json
@@ -0,0 +1,39 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "https://localhost:5001/;http://localhost:5000/",
+      "sslPort": 0
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "MyApp": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:5001/;http://localhost:5000/"
+    },
+    "Watch": {
+      "commandName": "Executable",
+      "executablePath": "dotnet",
+      "workingDirectory": "$(ProjectDir)",
+      "hotReloadEnabled": true,
+      "hotReloadProfile" : "aspnetcore",
+      "commandLineArgs": "watch run",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/MyApp/_includes/component-links.md b/MyApp/_includes/component-links.md
new file mode 100644
index 0000000..0aa3138
--- /dev/null
+++ b/MyApp/_includes/component-links.md
@@ -0,0 +1,4 @@
+- [.NET Blazor Vue Components in Markdown](/posts/javascript)
+- [.NET Razor SSG Vue Components in Markdown](https://razor-ssg.web-templates.io/posts/javascript)
+- [Vue Components in Markdown](https://press-vue.servicestack.net/posts/markdown-components-in-vue)
+- [React Components in Markdown](https://press-react.servicestack.net/posts/markdown-components-in-react)
diff --git a/MyApp/_pages/about.md b/MyApp/_pages/about.md
new file mode 100644
index 0000000..a65e98e
--- /dev/null
+++ b/MyApp/_pages/about.md
@@ -0,0 +1,20 @@
+---
+title: About this Blazor App
+---
+
+## .NET 8 Blazor App Templates
+
+ServiceStack's new .NET 8 Blazor templates enhances the default ASP.NET Blazor App templates with several modern, high-productivity features, including:
+
+ - [Vue.js](https://vuejs.org) - Enhance your statically rendered Blazor Apps with Vue.js for all your interactive UIs
+ - [Tailwind CSS](https://tailwindcss.com) - Style your Blazor Apps with the modern popular utility-first CSS framework for creating beautiful, maintainable responsive UIs with DarkMode support
+ - [ServiceStack Vue Components](https://blazor-gallery.jamstacks.net) - Rapidly develop beautiful Blazor Apps integrated with Rich high-productivity UI Tailwind Components like [AutoQueryGrid](https://docs.servicestack.net/vue/autoquerygrid) and [AutoForms](https://docs.servicestack.net/vue/autoform)
+ - [ServiceStack.Blazor Components](https://blazor-gallery.jamstacks.net) - Utilize ServiceStack.Blazor's beautiful Tailwind Components in your statically rendered Blazor Apps
+ - [ASP .NET Identity Auth](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/) - Use the same ASP .NET Identity Auth used in ASP.NET's .NET 8 Blazor Apps, with all Identity Pages upgraded with beautiful Tailwind CSS styling
+ - [Entity Framework](https://learn.microsoft.com/ef/) & [OrmLite](https://docs.servicestack.net/ormlite/) - Choose the Best ORM to build each App feature, with a unified solution that sees [OrmLite's Code-First DB Migrations](https://docs.servicestack.net/ormlite/db-migrations) run both EF and OrmLite migrations, inc. Seed Data with a single command at Development or Deployment
+ - [AutoQuery](https://docs.servicestack.net/autoquery/) - Rapidly developing data-driven APIs, UIs and CRUD Apps
+ - [Auto Admin Pages](https://youtu.be/wlRA4_owEsc) - Quickly develop your back-office CRUD Admin UIs to manage your App's Database tables at [/admin](/admin)
+ - [Markdown](https://docs.servicestack.net/razor-press/syntax) - Maintain SEO-friendly documentation and content-rich pages like this one with just Markdown, beautifully styled with [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin)
+ - [Built-in UIs](https://servicestack.net/auto-ui) - Use ServiceStack's Auto UIs to [Explore your APIs](https://docs.servicestack.net/api-explorer) at [/ui](/ui/) 
+   or Query your [App's Database Tables](https://docs.servicestack.net/admin-ui-database) at [/admin-ui/database](/admin-ui/database) 
+ - [Built-in Docker Deployments](/deploy) - Use the built-in GitHub Actions to effortlessly deploy .NET 8 containerized Blazor Apps with Docker and GitHub Registry via SSH to any Linux Server
\ No newline at end of file
diff --git a/MyApp/_pages/deploy.md b/MyApp/_pages/deploy.md
new file mode 100644
index 0000000..447bb61
--- /dev/null
+++ b/MyApp/_pages/deploy.md
@@ -0,0 +1,300 @@
+---
+title: GitHub Action Deployments
+---
+
+In today's DevOps ecosystem, [GitHub Actions](https://github.com/features/actions) stand out as an invaluable asset for 
+automating CI/CD workflows directly within your GitHub repository. The introduction of .NET 8 takes this a step further, 
+offering a streamlined approach to generating Docker images through the `<PublishProfile>DefaultContainer</PublishProfile>` 
+setting in your `.csproj`. This ensures consistent application packaging, making it deployment-ready by just using `dotnet publish`.
+
+ServiceStack's project templates bring additional flexibility, by utilizing foundational tools like 
+[Docker](https://www.docker.com) for containerization and [SSH](https://en.wikipedia.org/wiki/Secure_Shell) for secure deployments,
+it's able to deploy your Dockerized .NET applications to any Linux server, whether self-hosted or on any cloud provider.
+
+#### Live Demos use their GitHub Actions to deploy themselves
+
+Each template's Live demo are themselves utilizing their included GitHub Actions to deploy itself to a Linux server running 
+on a **€13.60 /month** shared 8BG RAM [Hetzner Cloud VM](https://www.hetzner.com/cloud) that's currently running 50+ Docker Containers.
+
+This guide aims to walk you through the hosting setup and the GitHub Actions release process as introduced in the
+ServiceStack's latest .NET 8 project templates.
+
+## Deployment Files
+
+Deployment files that are included in project templates to facilitate GitHub Actions deployments:
+
+#### .deploy/
+- [nginx-proxy-compose.yml](https://github.com/NetCoreTemplates/blazor/blob/master/.deploy/nginx-proxy-compose.yml) - Manage nginx reverse proxy and Lets Encrypt companion container (one-time setup per server)
+- [docker-compose.yml](https://github.com/NetCoreTemplates/blazor/blob/main/.deploy/docker-compose.yml) - Manage .NET App Docker Container
+
+#### .github/workflows/
+- [build.yml](https://github.com/NetCoreTemplates/blazor/blob/master/.github/workflows/build.yml) - Build .NET Project and Run Tests
+- [release.yml](https://github.com/NetCoreTemplates/blazor/blob/master/.github/workflows/release.yml) - Build container, Push to GitHub Packages Registry, SSH deploy to Linux server, Run DB Migrations and start new Docker Container if successful otherwise revert Migration
+
+## Prerequisites
+
+Before your Linux server can accept GitHub Actions deployments, we need to set up a few things:
+
+### Setup Deployment Server
+
+#### 1. Install Docker and Docker-Compose
+
+Follow [Docker's installation instructions](https://docs.docker.com/engine/install/ubuntu/) 
+to correctly install the latest version of Docker.
+
+#### 2. Configure SSH for GitHub Actions
+
+Generate a dedicated SSH key pair to be used by GitHub Actions:
+
+:::sh
+ssh-keygen -t rsa -b 4096 -f ~/.ssh/github_actions
+:::
+
+Add the **public key** to your server's SSH **authorized_keys**:
+
+:::sh
+cat ~/.ssh/github_actions.pub >> ~/.ssh/authorized_keys
+:::
+
+Then, add the **private key** to your repo's `DEPLOY_KEY` GitHub Action Secret which GitHub Actions will use to
+securely SSH into the server.
+
+#### 3. Set Up nginx-reverse-proxy
+
+You should have a `docker-compose` file similar to the `nginx-proxy-compose.yml` in your repository. Upload this file to your server:
+
+:::sh
+scp nginx-proxy-compose.yml user@your_server:~/
+:::
+
+To bring up the nginx reverse proxy and its companion container for handling TLS certificates, run:
+
+:::sh
+docker compose -f ~/nginx-proxy-compose.yml up -d
+:::
+
+This will start an nginx reverse proxy along with a companion LetsEncrypt container that will automatically watch for 
+additional Docker containers on the same network and initialize them with valid TLS certificates.
+
+### Ready to host containerized .NET Apps
+
+Your Linux server is now ready to accept multiple .NET App deployments from GitHub Actions. The guide below walks through 
+the process of setting up your GitHub repository to deploy new ServiceStack .NET Apps to your Linux server.
+
+## Step-by-Step Guide
+
+### 1. Create Your ServiceStack Application
+
+Start by creating your ServiceStack application, either from [ServiceStack's Start Page](https://servicestack.net/start) 
+or by using the [x dotnet tool](https://docs.servicestack.net/dotnet-tool):
+
+:::sh
+x new blazor ProjectName
+:::
+
+Replace `ProjectName` with your desired project name to generate a new ServiceStack application pre-configured 
+with the necessary Docker compose files and GitHub Action workflows as above.
+
+### 2. Configure DNS for Your Application
+
+You need a domain to point to your Linux server. Create an A Record in your DNS settings that points to the IP address 
+of your Linux server:
+
+- **Subdomain**: `app.example.org`
+- **Record Type**: A
+- **Value/Address**: IP address of your Linux server
+
+This ensures that any requests to `app.example.org` are directed to your server.
+
+### 3. Setting Up GitHub Secrets
+
+Navigate to your GitHub repository's settings, find the "Secrets and variables" section, and add the following secrets:
+
+- `DEPLOY_HOST`: IP address or hostname of your Linux server
+- `DEPLOY_USERNAME`: SSH Username to use for deployments
+- `DEPLOY_KEY`: Private key generated for GitHub Actions to SSH into your server
+- `LETSENCRYPT_EMAIL`: Your email address for Let's Encrypt notifications
+
+#### Using GitHub CLI for Secret Management
+
+You can use the [GitHub CLI](https://cli.github.com/manual/gh_secret_set) for a quicker setup of these GitHub Action Secrets, e.g:
+
+```bash
+gh secret set DEPLOY_HOST --body="linux-server-host"
+gh secret set DEPLOY_USERNAME --body="linux-server-username"
+gh secret set DEPLOY_KEY --bodyFile="path/to/ssh-private-key"
+gh secret set LETSENCRYPT_EMAIL --body="your-email@example.org"
+```
+
+These secrets will populate environment variables within your GitHub Actions workflow and other configuration files, 
+enabling secure and automated deployment of your ServiceStack applications.
+
+### 4. Push to Main Branch to Trigger Deployment
+
+With everything set up, pushing code to the main branch of your repository will trigger the GitHub Action workflow, initiating the deployment process:
+
+```bash
+git add .
+git commit -m "Initial commit"
+git push origin main
+```
+
+### 5. Verifying the Deployment
+
+After the GitHub Actions workflow completes, you can verify the deployment by:
+
+- Checking the workflow's logs in your GitHub repository to ensure it completed successfully
+- Navigating to your application's URL (e.g., `https://app.example.org`) in a web browser. You should see your ServiceStack application up and running with a secure HTTPS connection
+
+## Features
+
+### DB Migrations
+
+The GitHub Actions workflow includes a step to run database migrations on the remote server in the **Run remote db migrations** step
+which automatically runs the `migrate` AppTask in the `app-migration` companion Docker container on the Linux Host Server
+to validate migration was successful before completing deployment of the new App. A failed migration will cause deployment to fail 
+and the previous App version to continue to run.
+
+### Patch appsettings.json with production secrets
+
+One way to maintain sensitive information like API keys and connection strings for your Production App outside of its
+source code GitHub repository is to patch the `appsettings.json` file with a [JSON Patch](https://jsonpatch.com) that's 
+stored in your repo's `APPSETTINGS_PATCH` GitHub Action Secret which will be applied with the deployed App's `appsettings.json` file.
+
+For example this JSON Patch below will replace values and objects in your App's **appsettings.json**: 
+
+```json
+[
+    { "op":"add", "path":"/oauth.facebook.AppSecret",  "value":"xxxx" },
+    { "op":"add", "path":"/oauth.microsoft.AppSecret", "value":"xxxx" },
+    { "op":"add", "path":"/smtp", "value":{
+        "UserName": "xxxx",
+        "Password": "xxxx",
+        "Host": "smtp-server.example.org",
+        "Port": 587,
+        "From": "noreply@example.org",
+        "FromName": "No Reply"
+      } 
+    }
+]
+```
+
+You can test your JSON Patch by saving it to `appsettings.json.patch` and applying it with the 
+[patch feature](https://docs.servicestack.net/dotnet-tool#patch-json-files) of the `x` dotnet tool: 
+
+:::sh
+x patch appsettings.json.patch
+:::
+
+## Anatomy of GitHub Actions Workflow
+
+GitHub Actions workflows are defined in YAML files, and they provide a powerful way to automate your development process. 
+This guide will take you through the key sections of the workflow to give you a comprehensive understanding of how it functions.
+
+## Permissions
+
+In this workflow, two permissions are specified:
+
+- `packages: write`: This allows the workflow to upload Docker images to GitHub Packages.
+- `contents: write`: This is required to access the repository content.
+
+Specifying permissions ensures that the GitHub Actions runner has just enough access to perform the tasks in the workflow.
+
+## Jobs
+
+This workflow consists of two jobs: `push_to_registry` and `deploy_via_ssh`.
+
+### push_to_registry
+
+This job runs on an Ubuntu 22.04 runner and is responsible for pushing the Docker image to the GitHub Container Registry. It proceeds only if the previous workflow did not fail. The job includes the following steps:
+
+1. **Checkout**: Retrieves the latest or specific tag of the repository's code.
+2. **Env variable assignment**: Assigns necessary environment variables for subsequent steps.
+3. **Login to GitHub Container Registry**: Authenticates to the GitHub Container Registry.
+4. **Setup .NET Core**: Prepares the environment for .NET 8.
+5. **Build and push Docker image**: Creates and uploads the Docker image to GitHub Container Registry (ghcr.io).
+
+### deploy_via_ssh
+
+This job also runs on an Ubuntu 22.04 runner and depends on the successful completion of the `push_to_registry` job. Its role is to deploy the application via SSH. The steps involved are:
+
+1. **Checkout**: Retrieves the latest or specific tag of the repository's code.
+2. **Repository name fix and env**: Sets up necessary environment variables.
+3. **Create .env file**: Generates a .env file required for deployment.
+4. **Copy files to target server via scp**: Securely copies files to the remote server.
+5. **Run remote db migrations**: Executes database migrations on the remote server.
+6. **Remote docker-compose up via ssh**: Deploys the Docker image with the application.
+
+## Triggers (on)
+
+The workflow is designed to be triggered by:
+
+1. **New GitHub Release**: Activates when a new release is published.
+2. **Successful Build action**: Runs whenever the specified Build action completes successfully on the main or master branches.
+3. **Manual trigger**: Allows for rollback to a specific release or redeployment of the latest release, with an input for specifying the version tag.
+
+Understanding these sections will help you navigate and modify the workflow as per your needs, ensuring a smooth and automated deployment process.
+
+## Deployment Server Setup Expanded
+
+### Ubuntu as the Reference Point
+
+Though our example leverages Ubuntu, it's important to emphasize that the primary requirements for this deployment architecture are a Linux operating system, Docker, and SSH. Many popular Linux distributions like CentOS, Fedora, or Debian will work just as efficiently, provided they support Docker and SSH.
+
+### The Crucial Role of SSH in GitHub Actions
+
+**SSH** (Secure SHell) is not just a protocol to remotely access your server's terminal. In the context of GitHub Actions:
+
+- SSH offers a **secure communication channel** between GitHub Actions and your Linux server.
+- Enables GitHub to **execute commands directly** on your server.
+- Provides a mechanism to **transfer files** (like Docker-compose configurations or environment files) from the GitHub repository to the server.
+
+By generating a dedicated SSH key pair specifically for GitHub Actions (as detailed in the previous documentation), we ensure a secure and isolated access mechanism. Only the entities possessing the private key (in this case, only GitHub Actions) can initiate an authenticated connection.
+
+### Docker & Docker-Compose: Powering the Architecture
+
+**Docker** encapsulates your ServiceStack application into containers, ensuring consistency across different environments. Some of its advantages include:
+
+- **Isolation**: Your application runs in a consistent environment, irrespective of where Docker runs.
+- **Scalability**: Easily replicate containers to handle more requests.
+- **Version Control for Environments**: Create, maintain, and switch between different container images.
+
+**Docker-Compose** extends Docker's benefits by orchestrating the deployment of multi-container applications:
+
+- **Ease of Configuration**: Describe your application's entire stack, including the application, database, cache, etc., in a single YAML file.
+- **Consistency Across Multiple Containers**: Ensures that containers are spun up in the right order and with the correct configurations.
+- **Simplifies Commands**: Instead of a long string of Docker CLI commands, a single `docker-compose up` brings your whole stack online.
+
+### NGINX Reverse Proxy: The Silent Workhorse
+
+Using an **nginx reverse proxy** in this deployment design offers several powerful advantages:
+
+- **Load Balancing**: Distributes incoming requests across multiple ServiceStack applications, ensuring optimal resource utilization.
+- **TLS Management**: Together with its companion container, nginx reverse proxy automates the process of obtaining and renewing TLS certificates. This ensures your applications are always securely accessible over HTTPS.
+- **Routing**: Directs incoming traffic to the correct application based on the domain or subdomain.
+- **Performance**: Caches content to reduce load times and reduce the load on your ServiceStack applications.
+
+With an nginx reverse proxy, you can host multiple ServiceStack (or non-ServiceStack) applications on a single server while providing each with its domain or subdomain.
+
+
+## Additional Resources
+
+### ServiceStack
+
+- **[Official Documentation](https://docs.servicestack.net/)**: Comprehensive guides and best practices for ServiceStack.
+- **[ServiceStack Website](https://servicestack.net/)**: Explore features, templates, and client libraries.
+
+### Docker & Docker-Compose
+
+- **[Docker Documentation](https://docs.docker.com/)**: Core concepts, CLI usage, and practical applications.
+- **[Docker-Compose Documentation](https://docs.docker.com/compose/)**: Define and manage multi-container applications.
+
+### GitHub Actions
+
+- **[GitHub Actions Documentation](https://docs.github.com/en/actions)**: Creating workflows, managing secrets, and automation tips.
+- **[Starter Workflows](https://github.com/actions/starter-workflows)**: Templates for various languages and tools.
+
+### SSH & Security
+
+- **[SSH Key Management](https://www.ssh.com/academy/ssh/keygen)**: Guidelines on generating and managing SSH keys.
+- **[GitHub Actions Secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets)**: Securely store and use sensitive information.
\ No newline at end of file
diff --git a/MyApp/_pages/privacy.md b/MyApp/_pages/privacy.md
new file mode 100644
index 0000000..8c09121
--- /dev/null
+++ b/MyApp/_pages/privacy.md
@@ -0,0 +1,69 @@
+---
+title: Privacy Policy 
+---
+
+[Your business name] is committed to providing quality services to you and this policy outlines our ongoing obligations to you in respect of how we manage your Personal Information.
+
+We have adopted the Australian Privacy Principles (APPs) contained in the Privacy Act 1988 (Cth) (the Privacy Act). The NPPs govern the way in which we collect, use, disclose, store, secure and dispose of your Personal Information.
+
+A copy of the Australian Privacy Principles may be obtained from the website of The Office of the Australian Information Commissioner at https://www.oaic.gov.au/.
+
+What is Personal Information and why do we collect it?
+Personal Information is information or an opinion that identifies an individual. Examples of Personal Information we collect includes names, addresses, email addresses, phone and facsimile numbers.
+
+This Personal Information is obtained in many ways including [interviews, correspondence, by telephone and facsimile, by email, via our website www.yourbusinessname.com.au, from your website, from media and publications, from other publicly available sources, from cookies- delete all that aren’t applicable] and from third parties. We don’t guarantee website links or policy of authorised third parties.
+
+We collect your Personal Information for the primary purpose of providing our services to you, providing information to our clients and marketing. We may also use your Personal Information for secondary purposes closely related to the primary purpose, in circumstances where you would reasonably expect such use or disclosure. You may unsubscribe from our mailing/marketing lists at any time by contacting us in writing.
+
+When we collect Personal Information we will, where appropriate and where possible, explain to you why we are collecting the information and how we plan to use it.
+
+Sensitive Information
+Sensitive information is defined in the Privacy Act to include information or opinion about such things as an individual's racial or ethnic origin, political opinions, membership of a political association, religious or philosophical beliefs, membership of a trade union or other professional body, criminal record or health information.
+
+Sensitive information will be used by us only:
+
+- For the primary purpose for which it was obtained
+
+- For a secondary purpose that is directly related to the primary purpose
+
+- With your consent; or where required or authorised by law.
+
+Third Parties
+Where reasonable and practicable to do so, we will collect your Personal Information only from you. However, in some circumstances we may be provided with information by third parties. In such a case we will take reasonable steps to ensure that you are made aware of the information provided to us by the third party.
+
+Disclosure of Personal Information
+Your Personal Information may be disclosed in a number of circumstances including the following:
+
+- Third parties where you consent to the use or disclosure; and
+
+- Where required or authorised by law.
+
+Security of Personal Information
+Your Personal Information is stored in a manner that reasonably protects it from misuse and loss and from unauthorized access, modification or disclosure.
+
+When your Personal Information is no longer needed for the purpose for which it was obtained, we will take reasonable steps to destroy or permanently de-identify your Personal Information. However, most of the Personal Information is or will be stored in client files which will be kept by us for a minimum of 7 years.
+
+Access to your Personal Information
+You may access the Personal Information we hold about you and to update and/or correct it, subject to certain exceptions. If you wish to access your Personal Information, please contact us in writing.
+
+[Your business name] will not charge any fee for your access request, but may charge an administrative fee for providing a copy of your Personal Information.
+
+In order to protect your Personal Information we may require identification from you before releasing the requested information.
+
+Maintaining the Quality of your Personal Information
+It is an important to us that your Personal Information is up to date. We  will  take reasonable steps to make sure that your Personal Information is accurate, complete and up-to-date. If you find that the information we have is not up to date or is inaccurate, please advise us as soon as practicable so we can update our records and ensure we can continue to provide quality services to you.
+
+Policy Updates
+This Policy may change from time to time and is available on our website.
+
+Privacy Policy Complaints and Enquiries
+If you have any queries or complaints about our Privacy Policy please contact us at:
+
+
+[Your business address]
+
+[Your business email address]
+
+[Your business phone number]
+
+ 
\ No newline at end of file
diff --git a/MyApp/_posts/2021-11-01_jekyll-to-vitepress.md b/MyApp/_posts/2021-11-01_jekyll-to-vitepress.md
new file mode 100644
index 0000000..a7c45dc
--- /dev/null
+++ b/MyApp/_posts/2021-11-01_jekyll-to-vitepress.md
@@ -0,0 +1,355 @@
+---
+title: Migrating from Jekyll to VitePress
+summary: Since Jekyll support has been officially sunset, we decided to migrate our docs site to VitePress
+author: Lucy Bates
+tags: [docs, markdown]
+image: https://images.unsplash.com/photo-1524668951403-d44b28200ce0?crop=entropy&fit=crop&h=1000&w=2000
+---
+
+<style>
+table {
+    margin-bottom: 2em;
+}
+th, td {
+    padding: 1em 1.5em;
+}
+tbody tr:nth-child(odd) {
+    --tw-bg-opacity: 1;
+    background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+}
+</style>
+
+Since Jekyll support has been officially sunset, we decided to migrate our docs site to VitePress. VitePress is a new static site generator based on Vite and Vue 3. It is a cut down version of VuePress but using the blisteringly fast Vite build tool.
+
+This has given us the ability to update our docs locally with instant on save update to view the final result quickly while we edit/create docs.
+
+<div class="my-8 ml-20 flex justify-center">
+    <img style="max-height:150px" src="./img/posts/jekyll-to-vitepress/vite.svg" alt="Vite logo">
+    <img style="max-height:150px" src="./img/posts/jekyll-to-vitepress/vuepress.png" alt="VitePress logo">
+</div>
+
+
+We wanted to share our experience with this process in the hope it might help others that are performing the same migration, document common errors and help other developer to get an idea about what is involved before you might undertake such a task.
+
+## Jekyll vs VitePress
+
+Below is not an exhaustive list of features but more focusing on pros and cons when it comes to comparing these two options for use as the static site generator for a documentation site.
+
+| Features           | Jekyll            | VitePress                      |
+|:-------------------|:------------------|:-------------------------------|
+| Native Language    | Ruby              | JavaScript                     |
+| Template Syntax    | Liquid            | Vue                            |
+| Update Time        | 6-30 seconds      | 30-500 ms                      |
+| Themes             | ✅ - mature market | ✅ - limited                    |
+| Extensible         | ✅                 | ✅ (only themes + vite plugins) |
+| Client framework   | None              | Vue 3                          |
+| Maintained         | No longer         | New project                    |
+| 1.0+ release       | ✅                 | ➖                              |
+| Permalink          | ✅                 | ➖ (depends on filename)        |
+| Markdown support   | ✅                 | ✅                              |
+| HTML support       | ✅                 | ✅ (must use Vue component)     |
+| Sitemap generation | ✅                 | ➖                              |
+| Tags               | ✅                 | ➖                              |
+| Clean URLs         | ✅                 | ➖                              |
+
+This list might look bad for VitePress, but it comes down to a young library that is still in active development. The default theme for VitePress is also centered around technical documentation making it quick to get up and running looking good for this use case.
+
+## Killer feature - Performance
+
+The stand out feature and one of the most compelling reason for us to undertake this migration was not the default theme (although that helped) but the user experience when editing documentation locally.
+
+![](img/posts/jekyll-to-vitepress/vitepress-update-large.gif)
+
+In contrast, editing this blog post for our main site which is still currently using Jekyll, it takes between 6-8 seconds for a small single page change. Previously our docs page with over 300 pages could take over a minute depending on the type of change.
+
+```
+Regenerating: 1 file(s) changed at 2021-10-29 16:17:00
+                    _blog/posts/2021-10-29-jekyll-migration.md
+                    ...done in 6.3882767 seconds.
+```
+
+Having a statically generated site that is hard to preview or has a slow iteration cycle can be extremely frustrating to work with so we were looking for something that a pleasure to work with and well suited to documentation.
+
+## Common Migration Problems
+
+When we started this task to migrate, we want to first have a proof of concept of migrating all the content to the same URLs.
+This required us to achieve a few things before we could get stuck into fixing content/syntax related changes.
+
+- Page URLs must be the same.
+- Project must be able to run locally and deploy.
+- Side menu links must be present.
+
+These were our minimum requirements before we wanted to commit to making all the changes required to migrate.
+
+## File name vs `slug`
+
+The first one surfaced a design difference straight away. While Jekyll created HTML output based on frontmatter `slug` property, VitePress only works off the MarkDown file name.
+
+We would commonly create a MarkDown file called one thing but change our mind on the URL and change the frontmatter `permalink` to something else. This broke all our existing paths, so we needed a way to parse the markdown files, and produce copies with the updated name using the `slug` value in the frontmatter.
+
+Since we were still evaluating this process, we created a quick C# script that would take in a file, extract the `slug` value and copy a file with that name back out into a separate directory.
+
+```csharp
+static void Main(string[] args)
+{
+    var filename = args[0];
+    var fileLines = File.ReadAllLines(filename).ToList();
+    if (!Directory.Exists("updated"))
+    {
+        Directory.CreateDirectory("updated");
+    }
+    foreach (var line in fileLines)
+    {
+        if (line.StartsWith("slug:"))
+        {
+            var newName = line.Split(":")[1].Trim();
+            File.WriteAllLines("./updated/" + newName + ".md", fileLines);
+        }
+    }
+}
+```
+
+Not very elegant, but it did the job. This was published as a `single file` executable targeting linux so it could be easily used with tools like `find` with `--exec`.
+
+```shell
+find *.md -maxdepth 1 -type f -exec ./RenameMd {} \;
+```
+
+All round pretty hacky, but this was also while we were still evaluating VitePress, so it was considered a throw away script.
+
+> This was run in each directory as needed, if `slug` or `permalink` is controlling your nested pathing, this problem will be more complex to handle.
+
+This was run for our main folder of docs as well as our `releases` folder and we have successfully renamed files.
+
+## Broken links are build failures
+
+VitePress is more strict with issues than Jekyll. This is actually a good thing, especially as your site content grows. VitePress will fail building your site if in your markdown to link to a relative link that it can't see is a file.
+
+This comes from the above design decision of not aliasing files to output paths. Markdown links like `[My link](/my-cool-page)` needs to be able to see `my-cool-page.md`. This means if you move or rename a file, it will break if something else links to it. Jekyll got around this by allowing the use of `permalink` and `slug` which is great for flexibility, but means at build time it can't be sure (without a lot more work) if the relative path won't be valid.
+
+There are drawbacks to this though. If you host multiple resources under the same root path as your VitePress site and you want to reference this, I'm not sure you will be able to. You might have to resort to absolute URLs to link out to resources like this. And since VitePress doesn't alias any paths, it means your hosting environment will need to do this.
+
+## Syntax issues
+
+Jekyll is very forgiving when it comes to content that is passed around as straight html and put in various places using Liquid. For example if you have the following HTML in an `include` for Jekyll.
+
+```html
+<p>This solution is <50 lines of code</p>
+```
+
+Jekyll will just copy it and not bother you about the invalid HTML issues of having a `less-than (<)` in the middle of a `<p>` element. VitePress won't however, and you'll need to correctly use `&lt;` and `&gt;` encoded symbols appropriately.
+
+## Include HTML
+
+Another issue is the difference of how to reuse content. In Jekyll, you would use `{% include my/path/to/file.html %}`. This will likely show up in errors like `[vite:vue] Duplicate attribute`.
+
+Instead in VitePress, an include of straight HTML will require migrating that content to a Vue component.
+
+For example, if we have content file `catchphrase.html` like the following.
+
+```html
+<div>
+    <h4>Catchphrase</h4>
+    <p>It's.. what I do..</p>
+</div>
+```
+
+We would need to wrap this in a Vue component like `catchphrase.vue`:
+
+```html
+<template>
+    <div>
+        <h4>Catchphrase</h4>
+        <p>It's.. what I do..</p>
+    </div>
+</template>
+<script>
+    export default {
+        name: "catchphrase"
+    }
+</script>
+
+<style scoped>
+
+</style>
+```
+
+Then it would need to be imported. This can be declared globally in the vitepress theme config or adhoc in the consuming Markdown file itself.
+
+```markdown
+<script setup>
+import catchphrase from './catchphrase.vue';
+</script>
+
+<catchphrase />
+```
+
+The `<catchphrase />` is where it is injected into the output. For HTML so simple, this could be instead converted to Markdown and used the same way.
+
+```markdown
+## Catchphrase
+it's.. what I do..
+```
+
+And then used:
+
+```markdown
+<script setup>
+import catchphrase from './catchphrase.md';
+</script>
+
+<catchphrase />
+```
+
+## Jekyll markdownify redundant
+Something similar is done in Jekyll, but with the use of Liquid filters.
+
+```markdown
+{% capture projects %}
+{% include web-new-netfx.md %}
+{% endcapture %} 
+{{ projects | markdownify }}
+```
+
+This use of `capture` and passing the content to be converted is done by default when importing.
+
+```markdown
+<script setup>
+import netfxtable from './.vitepress/includes/web-new-netfx.md';
+</script>
+
+<netfxtable />
+```
+
+If the module is declared global, then only the `<netfxtable />` is needed anywhere in your site to embed the content.
+
+## Templating syntax the same but different
+
+When moving from Jekyll to VitePress, I came across errors like `Cannot read property 'X' of undefined`. It was referring to some example code in a page we had that looked something like this.
+
+```markdown
+Content text here with templating code example below.
+
+    Value: {{X.prop}}
+
+More explanation here.
+```
+
+This error came about because we didn't religiously fence our code examples. Jekyll let us get away with this and actually produced the visuals we wanted without trying to render value in the handlebars `{{ }}` syntax.
+
+VitePress only ignores these if they are in a code fence using the triple tilda syntax OR if the content is within a `:::v-pre` block.
+
+## Replacing `raw` and `endraw`
+
+Since some of our documentation used handlebar syntax in example code, we needed a way for Jekyll to ignore these statements and just present our code.
+`raw` and `endraw` were used which were usually wrapping code blocks. VitePress doesn't have a problem with this syntax which means the `{% raw %}` statements were included in our page which we didn't want.
+
+This was a matter of finding where these were used in all our documents and replace them with `::: v-pre` blocks as needed.
+
+## Sidebar
+
+This was a different situation. In Jekyll, we had created a `SideBar.md` file to help us render a left hand side menu of contents for the docs site. 
+In VitePress's default theme, we could provide a JSON representation and the client would then dynamically populate it further using different levels of headings.
+
+To do this, we used a simple NodeJs script that used the `markdown-it` library to parse the MarkDown itself and produce the expected JSON.
+
+Loading the file and extracting the elements we needed was quite straight forward.
+
+```js
+let fs = require('fs')
+let MarkdownIt = require('markdown-it');
+let md = new MarkdownIt();
+
+let content = fs.readFileSync('SideBar.md','utf8')
+let res = md.parse(content).filter((element, index) => {
+    return (element.level == '3' || element.level == '5') && element.type == 'inline';
+});
+```
+
+Now we had `res` that contained all the information we would need, we can iterate the array, transforming the data as we go.
+
+```js
+let sidebarObjs = {
+    '/': []
+};
+var lastHeading = null;
+var lastHeadingIndex = -1;
+for(let i = 0; i < res.length; i++) {
+    let item = res[i];
+    if(item.level == '3') {
+        lastHeading = item.content;
+        sidebarObjs['/'].push({
+            text: lastHeading,
+            children: []
+        })
+        lastHeadingIndex++;
+        continue;
+    }
+    let text = item.children[1].content;
+    let link = item.children[0].attrs[0][1];
+    sidebarObjs['/'][lastHeadingIndex].children.push({
+        text: text,
+        link: link
+    })
+}
+
+fs.writeFileSync('SideBar_format.json',JSON.stringify(sidebarObjs),'utf-8')
+```
+
+Once working, we later split this into multiple menus and condensed what we already had to make the menu more manageable.
+
+## Problems we worked around
+
+That covers the bulk of the changes we made that prevented us from running, building and deploying our application, however there were some short comings that we had to work around outside of VitePress itself.
+There were 2 main sticking points for which we had to come up with a creative work around.
+
+- Client router always appending `.html` (breaking clean URLs)
+- Failing to route to paths with addition dots (`.`) in the URL
+
+Hosting clean URLs can be done from the server side, so we used AWS CloudWatch functions to rewrite the request to append the `.html` in the backend if it was not provided.
+However, VitePress still generated all page links with `.html`, creating multiple paths for the single document which can cause problems with other processes such as search indexing.
+
+Since our documentation is something we edit quite frequently, we didn't want to be stuck in limbo due to these two problems while we workout and propose how VitePress itself might allow for such a setup.
+Our solution **is NOT recommended** since it will be quite brittle which we have accepted. We found the 2 locations in the VitePress source that were causing this problem during static site generation. 
+Thankfully, the logic is simple and we can remove 2 lines of code during the `npm install` phase out of our `node_modules` directory so that our CI builds would be consistent.
+
+```js
+const fs = require('fs');
+const glob = require('glob');
+let js = 'node_modules/vitepress/dist/client/app/router.js';
+fs.writeFileSync(js, fs.readFileSync(js, 'utf8').replace("url.pathname += '.html';", ''))
+
+glob('node_modules/vitepress/dist/node/serve-*.js',{},(err,files) =>{
+    let file = files[0];
+    fs.writeFileSync(file,fs.readFileSync(file,'utf8').replace("cleanUrl += \".html\";",''))
+})
+
+console.log('Completed post install process...')
+```
+> NOT RECOMMENDED
+
+If you have standard `.html` paths on your existing site, you won't need the above. It is just a temporary workaround for getting clean URLs, which is again, *not recommended*.
+
+## Verdict
+
+While we have made the jump to VitePress, it is still young and under heavy development.
+There is a good chance that some of the behaviour and lacking features will make this not a viable option for migrating off Jekyll.
+
+And we knew this going in as it is very clearly outlined on the front page of their docs:
+
+![](img/posts/jekyll-to-vitepress/vitepress-warning.png)
+
+However, while there are still outstanding issues, the developer experience of Vue 3 combined with Vite and an SSG theme 
+aimed at producing documentation is extremely compelling.
+The work Even You and the VitePress community are doing is something to look out for as currently we believe it offers 
+one of the best content heavy site development experiences currently possible.
+
+## ServiceStack a Sponsor of Vue's Evan You
+
+As maintainers of several [Vue & .NET Project Templates](https://docs.servicestack.net/templates-vue), we're big fans of 
+Evan's work creating Vue, Vite and his overall stewardship of their surrounding ecosystems which greatly benefits from his 
+master design skills and fine attention to detail in both library and UI design who has a talent in creating inherently 
+simple technologies that progressively scales up to handle the complexest of Apps.
+
+We believe in and are excited for the future of Vue and Vite that to show our support ServiceStack is now a sponsor of
+[Evan You on GitHub sponsors](https://github.com/sponsors/yyx990803) 🎉 🎉 
diff --git a/MyApp/_posts/2021-11-08_typesense.md b/MyApp/_posts/2021-11-08_typesense.md
new file mode 100644
index 0000000..8530e13
--- /dev/null
+++ b/MyApp/_posts/2021-11-08_typesense.md
@@ -0,0 +1,387 @@
+---
+title: Real-time search with Typesense
+summary: As part of migrating docs to VitePress we've added UX improvements like instant search powered by Typesense!
+author: Lucy Bates
+tags: [dev, docs]
+image: https://images.unsplash.com/photo-1473163928189-364b2c4e1135?crop=entropy&fit=crop&h=1000&w=2000
+---
+
+We have [recently migrated](/blog/jekyll-to-vitepress) the [ServiceStack Docs](https://docs.servicestack.net) website from using Jekyll for static site generation (SSG) to using 
+[VitePress](https://vitepress.vuejs.org) which enables us to use Vite with Vue 3 components and have an insanely fast hot reload while we update our documentation.
+
+VitePress is very well suited to documentation sites, and it is one of the primary use cases for VitePress at the time of writing. 
+The default theme even has optional [integration with Algolia DocSearch](https://vitepress.vuejs.org/config/algolia-search). 
+However, the Algolia DocSeach product didn't seem to offer the service for commercial products even as a paid service and their per request pricing model made it harder to determine what our costs would be in the long run for using their search service for our documentation.
+
+<a class="flex flex-col items-center my-8" href="https://typesense.org"><svg fill="none" height="56" viewBox="0 0 250 56" width="250" xmlns="http://www.w3.org/2000/svg"><g fill="#1035bc"><path d="m15.0736 15.8466c.1105.5522.1657 1.0859.1657 1.6013 0 .4785-.0552.9938-.1657 1.546l-7.01225-.0552v18.5521c0 1.546.71779 2.319 2.15335 2.319h4.1963c.2577.6258.3865 1.2516.3865 1.8773 0 .6258-.0368 1.0123-.1104 1.1595-1.6932.2209-3.4417.3313-5.24538.3313-3.57055 0-5.35583-1.5276-5.35583-4.5828v-19.6564l-3.920246.0552c-.1104293-.5522-.165644-1.0675-.165644-1.546 0-.5154.0552147-1.0491.165644-1.6013l3.920246.0552v-5.7975c0-.99387.14724-1.69325.44172-2.09816.29448-.44172.86503-.66258 1.71165-.66258h1.4908l.33129.33129v8.28225z"/><path d="m41.7915 16.1227-7.5644 25.8957c-1.3988 4.7485-2.8896 8.0982-4.4724 10.0491s-3.9571 2.9264-7.1227 2.9264c-1.6196 0-3.1104-.2393-4.4724-.7178-.1104-1.0307.1841-2.0246.8834-2.9816 1.1411.4049 2.3559.6073 3.6442.6073 1.9509 0 3.4417-.6625 4.4724-1.9877 1.0307-1.3251 1.9693-3.3865 2.816-6.184l.1656-.5522c-.9571-.0736-1.6932-.2945-2.2086-.6626-.4785-.3681-.8834-1.049-1.2147-2.0429l-7.7301-24.2945c1.1411-.4785 1.9509-.7178 2.4295-.7178 1.0675 0 1.7853.6442 2.1534 1.9325l4.3619 13.8589c.1473.4418.9939 3.3129 2.5399 8.6135.0736.2577.2577.3865.5521.3865l6.7362-24.4049c.4786-.1472 1.1043-.2208 1.8773-.2208.8099 0 1.4908.1104 2.043.3313z"/><path d="m52.4009 41.135v10.9325c0 .9938-.1472 1.6932-.4417 2.0981-.2945.4418-.8834.6626-1.7669.6626h-1.4908l-.3312-.3313v-38.4846l.3312-.3313h1.4356c.8835 0 1.4724.2392 1.7669.7178.3313.4417.4969 1.1779.4969 2.2086v.276c2.2086-2.4662 4.8405-3.6994 7.8957-3.6994 3.1289 0 5.4847 1.27 7.0675 3.8099 1.5828 2.503 2.3743 5.9816 2.3743 10.4356 0 2.1717-.2945 4.1226-.8835 5.8527-.5521 1.7301-1.3067 3.2025-2.2638 4.4172-.9202 1.1779-1.9877 2.0981-3.2024 2.7607-1.2148.6258-2.4663.9387-3.7546.9387-2.5399 0-4.951-.7546-7.2332-2.2638zm0-17.9448v14.1902c2.2454 1.6564 4.362 2.4846 6.3497 2.4846 1.9878 0 3.6258-.8834 4.9141-2.6503 1.2884-1.7668 1.9326-4.4356 1.9326-8.0061 0-1.7669-.1657-3.2945-.497-4.5828-.2945-1.3252-.6994-2.4111-1.2147-3.2577-.5153-.8834-1.1227-1.5276-1.8221-1.9325-.6626-.4417-1.3804-.6626-2.1534-.6626-1.4724 0-2.8711.3865-4.1963 1.1595-1.3251.773-2.4294 1.8589-3.3129 3.2577z"/><path d="m97.6973 30.6442h-17.1166c.1841 6.2576 2.5583 9.3865 7.1227 9.3865 2.5031 0 5.1718-.773 8.0061-2.319.8099.7361 1.3068 1.6748 1.4909 2.8159-3.0184 2.0614-6.405 3.092-10.1596 3.092-1.9141 0-3.5521-.3497-4.9141-1.049-1.3619-.7362-2.4846-1.7301-3.3681-2.9816-.8466-1.2884-1.4724-2.7976-1.8773-4.5277-.4049-1.73-.6073-3.6257-.6073-5.6871 0-2.0981.2392-4.0122.7178-5.7423.5153-1.7301 1.2515-3.2209 2.2085-4.4724.9571-1.2515 2.0982-2.227 3.4234-2.9264 1.3619-.6994 2.9079-1.0491 4.638-1.0491 1.6932 0 3.2025.3129 4.5276.9387 1.362.589 2.4847 1.4172 3.3681 2.4847.9203 1.0306 1.6196 2.2822 2.0982 3.7546.4785 1.4355.7178 2.9816.7178 4.638 0 .6626-.0369 1.3067-.1105 1.9325-.0368.589-.092 1.1595-.1656 1.7117zm-17.1166-3.1473h13.2516v-.7178c0-2.5398-.5338-4.5828-1.6013-6.1288s-2.6687-2.319-4.8037-2.319c-2.0981 0-3.7362.8282-4.9141 2.4847-1.1411 1.6564-1.7852 3.8834-1.9325 6.6809z"/><path d="m103.381 41.0245c.036-.8098.257-1.6932.662-2.6503.442-.9938.939-1.7668 1.491-2.319 2.908 1.5828 5.466 2.3743 7.675 2.3743 1.214 0 2.19-.2393 2.926-.7178.773-.4786 1.16-1.1227 1.16-1.9326 0-1.2883-.994-2.319-2.982-3.092l-3.092-1.1595c-4.638-1.6932-6.957-4.3988-6.957-8.1166 0-1.3251.239-2.503.718-3.5337.515-1.0675 1.214-1.9693 2.098-2.7055.92-.773 2.006-1.362 3.258-1.7669 1.251-.4049 2.65-.6074 4.196-.6074.699 0 1.472.0553 2.319.1657.883.1104 1.767.2761 2.65.4969.884.1841 1.73.4049 2.54.6626s1.509.5337 2.098.8282c0 .9203-.184 1.8773-.552 2.8712s-.865 1.73-1.491 2.2086c-2.908-1.2884-5.429-1.9325-7.564-1.9325-.957 0-1.712.2392-2.264.7178-.552.4417-.828 1.0306-.828 1.7668 0 1.1411.92 2.043 2.761 2.7055l3.368 1.2148c2.429.8466 4.233 2.0061 5.411 3.4785s1.767 3.184 1.767 5.135c0 2.6135-.976 4.7116-2.927 6.2944-1.951 1.5461-4.748 2.3191-8.392 2.3191-3.571 0-6.921-.9019-10.049-2.7056z"/><path d="m151.772 31.5828h-15.239c.111 2.0246.571 3.6258 1.38 4.8037.847 1.1411 2.301 1.7117 4.362 1.7117 2.135 0 4.583-.6258 7.344-1.8773 1.067 1.1042 1.748 2.5582 2.043 4.3619-2.945 2.0982-6.479 3.1473-10.601 3.1473-3.902 0-6.865-1.1964-8.89-3.589-1.988-2.4294-2.981-6.0184-2.981-10.7669 0-2.2086.257-4.1963.773-5.9632.515-1.8036 1.269-3.3312 2.263-4.5828.994-1.2883 2.209-2.2822 3.644-2.9816 1.436-.6994 3.074-1.0491 4.915-1.0491 1.877 0 3.533.2945 4.969.8835 1.436.5521 2.65 1.3619 3.644 2.4294.994 1.0307 1.73 2.2638 2.209 3.6994.515 1.4356.773 3 .773 4.6933 0 .9202-.056 1.8036-.166 2.6503-.11.8098-.258 1.6196-.442 2.4294zm-10.656-11.5951c-2.871 0-4.417 2.1718-4.638 6.5154h9.165v-.6626c0-1.7669-.368-3.1841-1.104-4.2515-.736-1.0675-1.877-1.6013-3.423-1.6013z"/><path d="m182.033 24.5153v12.0368c0 2.3559.386 4.1043 1.159 5.2454-1.178 1.0307-2.595 1.5461-4.251 1.5461-1.583 0-2.669-.3497-3.258-1.0491-.589-.7362-.884-1.8773-.884-3.4233v-12.8651c0-1.6564-.202-2.8159-.607-3.4785s-1.159-.9939-2.264-.9939c-1.951 0-3.773.8835-5.466 2.6504v18.773c-.552.1104-1.141.184-1.767.2208-.589.0368-1.196.0552-1.822.0552s-1.251-.0184-1.877-.0552c-.589-.0368-1.16-.1104-1.712-.2208v-27.3313l.331-.3865h2.761c2.062 0 3.35 1.1043 3.865 3.3128 2.687-2.319 5.356-3.4785 8.006-3.4785 2.651 0 4.602.8651 5.853 2.5951 1.288 1.6933 1.933 3.9755 1.933 6.8466z"/><path d="m187.825 41.0245c.036-.8098.257-1.6932.662-2.6503.442-.9938.939-1.7668 1.491-2.319 2.908 1.5828 5.466 2.3743 7.675 2.3743 1.214 0 2.19-.2393 2.926-.7178.773-.4786 1.16-1.1227 1.16-1.9326 0-1.2883-.994-2.319-2.982-3.092l-3.092-1.1595c-4.638-1.6932-6.957-4.3988-6.957-8.1166 0-1.3251.239-2.503.718-3.5337.515-1.0675 1.214-1.9693 2.098-2.7055.92-.773 2.006-1.362 3.258-1.7669 1.251-.4049 2.65-.6074 4.196-.6074.699 0 1.472.0553 2.319.1657.883.1104 1.767.2761 2.65.4969.884.1841 1.73.4049 2.54.6626s1.509.5337 2.098.8282c0 .9203-.184 1.8773-.552 2.8712s-.865 1.73-1.491 2.2086c-2.908-1.2884-5.429-1.9325-7.564-1.9325-.957 0-1.712.2392-2.264.7178-.552.4417-.828 1.0306-.828 1.7668 0 1.1411.92 2.043 2.761 2.7055l3.368 1.2148c2.429.8466 4.233 2.0061 5.411 3.4785s1.767 3.184 1.767 5.135c0 2.6135-.976 4.7116-2.927 6.2944-1.951 1.5461-4.748 2.3191-8.392 2.3191-3.571 0-6.921-.9019-10.049-2.7056z"/><path d="m236.216 31.5828h-15.239c.111 2.0246.571 3.6258 1.38 4.8037.847 1.1411 2.301 1.7117 4.362 1.7117 2.135 0 4.583-.6258 7.344-1.8773 1.067 1.1042 1.748 2.5582 2.043 4.3619-2.945 2.0982-6.479 3.1473-10.601 3.1473-3.902 0-6.865-1.1964-8.89-3.589-1.988-2.4294-2.981-6.0184-2.981-10.7669 0-2.2086.257-4.1963.773-5.9632.515-1.8036 1.269-3.3312 2.263-4.5828.994-1.2883 2.209-2.2822 3.645-2.9816 1.435-.6994 3.073-1.0491 4.914-1.0491 1.877 0 3.533.2945 4.969.8835 1.436.5521 2.65 1.3619 3.644 2.4294.994 1.0307 1.73 2.2638 2.209 3.6994.515 1.4356.773 3 .773 4.6933 0 .9202-.055 1.8036-.166 2.6503-.11.8098-.258 1.6196-.442 2.4294zm-10.656-11.5951c-2.871 0-4.417 2.1718-4.638 6.5154h9.166v-.6626c0-1.7669-.369-3.1841-1.105-4.2515-.736-1.0675-1.877-1.6013-3.423-1.6013z"/><path d="m244.777 50.6871v-50.521455c.552-.1104299 1.178-.165645 1.878-.165645.736 0 1.417.0552151 2.042.165645v50.521455c-.625.1104-1.306.1657-2.042.1657-.7 0-1.326-.0553-1.878-.1657z"/></g></svg></a>
+
+We found [Typesense](https://typesense.org) as an appealing alternative which offers [simple cost-effective cloud hosting](https://cloud.typesense.org) 
+but even better, they also have an easy to use open source option for self-hosting or evaluation. 
+We were so pleased with its effortless adoption, simplicity-focus and end-user UX that it quickly became our preferred way to 
+[navigate our docs](https://docs.servicestack.net). So that more people can find out about Typesense's amazing OSS Search
+product we've documented our approach used for creating and deploying an index of our site using GitHub Actions.
+
+Documentation search is a common use case which Typesense caters for with their [typesense-docsearch-scraper](https://github.com/typesense/typesense-docsearch-scraper). This is a utility designed to easily scrape a documentation site and post the results to a Typesense server to create a fast searchable index.
+
+## Self hosting option
+
+Since we already have several AWS instances hosting our example applications, we opted to start with a self hosting on AWS Elastic Container Service (ECS) since Typesense is already packaged into [an easy to use Docker image](https://hub.docker.com/r/typesense/typesense/).
+
+Trying it locally, we used the following commands to spin up a local Typesense server ready to scrape out docs site.
+
+```shell
+mkdir /tmp/typesense-data
+docker run -p 8108:8108 -v/tmp/data:/data typesense/typesense:0.21.0 \
+    --data-dir /data --api-key=<temp-admin-api-key> --enable-cors
+```
+
+To check that the server is running, we can open a browser at `/health` and we get back 200 OK with `ok: true`.
+
+The Typesense server has a [REST API](https://typesense.org/docs/0.21.0/api) which can be used to manage the indexes you create. The cloud offering comes with a web dashboard to manage your data which is a definite advantage over the self hosting, but for now we were still trying it out.
+
+## Populating our index
+
+Now that our local server is running, we can scrape our docs site using the [typesense-docsearch-scraper](https://github.com/typesense/typesense-docsearch-scraper). This needs some configuration since the scraper needs to know:
+
+- Where is the Typesense server.
+- How to authenticate with the Typesense server.
+- Where is the docs website.
+- Rules for the scraper to follow extracting information from the docs website.
+
+These [pieces of configuration come from 2 sources](https://github.com/ServiceStack/docs/tree/master/search-server/typesense-scraper). A [`.env` file](https://github.com/ServiceStack/docs/blob/master/search-server/typesense-scraper/typesense-scraper.env) related to the Typesense server information and [a `.json` file](https://github.com/ServiceStack/docs/blob/master/search-server/typesense-scraper/typesense-scraper-config.json) related to what site will be getting scraped.
+
+With our Typesense running locally on port 8108, we configure the .env file with the following information.
+
+```
+TYPESENSE_API_KEY=${TYPESENSE_API_KEY}
+TYPESENSE_HOST=localhost
+TYPESENSE_PORT=8108
+TYPESENSE_PROTOCOL=http
+```
+
+Next, we have the `.json` config for the scraper. The [typesense-docsearch-scraper gives an example of this config in their repository](https://github.com/typesense/typesense-docsearch-scraper/blob/master/configs/public/typesense_docs.json) for what this config should look like.
+
+Altering the default selectors to match the HTML for our docs site, we ended up with a configuration that looked like this.
+
+```json
+{
+  "index_name": "typesense_docs",
+  "allowed_domains": ["docs.servicestack.net"],
+  "start_urls": [
+    {
+      "url": "https://docs.servicestack.net/"
+    }
+  ],
+  "selectors": {
+    "default": {
+      "lvl0": ".page h1",
+      "lvl1": ".content h2",
+      "lvl2": ".content h3",
+      "lvl3": ".content h4",
+      "lvl4": ".content h5",
+      "text": ".content p, .content ul li, .content table tbody tr"
+    }
+  },
+  "scrape_start_urls": false,
+  "strip_chars": " .,;:#"
+}
+```
+
+Now we have both the configuration files ready to use, we can run the scraper itself. The scraper is also available using the docker image `typesense/docsearch-scraper` and we can pass our configuration to this process using the following command.
+
+```shell
+docker run -it --env-file typesense-scraper.env \
+    -e "CONFIG=$(cat typesense-scraper-config.json | jq -r tostring)" \
+    typesense/docsearch-scraper
+```
+
+Here we are using `-i` so we can reference our local `--env-file` and use `cat` and `jq` to populate the `CONFIG` environment variable using our `.json` config file.
+
+## Docker networking
+
+Here we run into a bit of a issue, since the scraper itself is running in Docker via WSL, `localhost` isn't resolving to our host machine to find the Typesense server also running in Docker.
+Instead we need to point the scraper to the Typesense server using the Docker local IP address space of 172.17.0.0/16 for it to resolve without additional configuration.
+
+We can see in the output of the Typesense server that it is running using `172.17.0.2`. We can swap the `localhost` with this IP address and communication is flowing.
+
+```
+DEBUG:typesense.api_call:Making post /collections/typesense_docs_1635392168/documents/import
+DEBUG:typesense.api_call:Try 1 to node 172.17.0.2:8108 -- healthy? True
+DEBUG:urllib3.connectionpool:Starting new HTTP connection (1): 172.17.0.2:8108
+DEBUG:urllib3.connectionpool:http://172.17.0.2:8108 "POST /collections/typesense_docs_1635392168/documents/import HTTP/1.1" 200 None
+DEBUG:typesense.api_call:172.17.0.2:8108 is healthy. Status code: 200
+> DocSearch: https://docs.servicestack.net/azure 22 records)
+DEBUG:typesense.api_call:Making post /collections/typesense_docs_1635392168/documents/import
+DEBUG:typesense.api_call:Try 1 to node 172.17.0.2:8108 -- healthy? True
+DEBUG:urllib3.connectionpool:Starting new HTTP connection (1): 172.17.0.2:8108
+DEBUG:urllib3.connectionpool:http://172.17.0.2:8108 "POST /collections/typesense_docs_1635392168/documents/import HTTP/1.1" 200 None
+```
+
+The scraper crawls the docs site following all the links in the same domain to get a full picture of all the content of our docs site.
+This takes a minute or so, and in the end we can see in the Typesense sever output that we now have "committed_index: 443".
+
+```
+_index: 443, applying_index: 0, pending_index: 0, disk_index: 443, pending_queue_size: 0, local_sequence: 44671
+I20211028 03:39:40.402626   328 raft_server.h:58] Peer refresh succeeded!
+```
+
+## Searching content
+
+So now we have a Typesense server with an index full of content, we want to be able to search it on our docs site.
+Querying our index using straight `cURL`, we can see the query itself only needs to known 3 pieces of information at a minimum.
+
+ - Collection name, eg `typesense_docs`
+ - Query term, `?q=test`
+ - What to query, `&query_by=content`
+
+```shell
+curl -H 'x-typesense-api-key: <apikey>' \
+    'http://localhost:8108/collections/typesense_docs/documents/search?q=test&query_by=content'
+```
+
+The collection name and `query_by` come from how our scraper were configured. The scraper was posting data to the 
+`typesense_docs` collection and populating various fields, eg `content`.
+
+Which as it returns JSON can be easily queried in JavaScript using **fetch**:
+
+```js
+fetch('http://localhost:8108/collections/typesense_docs/documents/search?q='
+    + encodeURIComponent(query) + '&query_by=content', {
+    headers: {
+        // Search only API key for Typesense.
+        'x-typesense-api-key': 'TYPESENSE_SEARCH_ONLY_API_KEY'
+    }
+})
+```
+
+In the above we have also used a different name for the API key token, this is important since the `--api-key` specified to the running Typesense server is the admin API key. You don't want to expose this to a browser client since they will have the ability to create,update and delete your collections or documents.
+
+Instead we want to generate a "Search only" API key that is safe to share on a browser client. This can be done using the Admin API key and the following REST API call to the Typesense server.
+
+```bash
+curl 'http://localhost:8108/keys' -X POST \
+  -H "X-TYPESENSE-API-KEY: ${TYPESENSE_API_KEY}" \
+  -H 'Content-Type: application/json' \
+  -d '{"description": "Search only","actions": ["documents:search"],"collections":["*"]}'
+```
+
+Now we can share this generated key safely to be used with any of our browser clients.
+
+## Keeping the index updated
+
+Another problem that becomes apparent is that subsequent usages of the scraper increases the size of our index since it currently doesn't detect and update existing documents.
+It wasn't clear if this is possible to configure or manage from the current scraper (ideally by using URL paths as the unique identifier), so we needed a way to achieve the following goals.
+
+- Update the search index automatically soon after docs have been changed
+- Don't let the index grow too big causing manual intervention
+- Have high uptime for our search so users can always search our docs
+
+Typesense server itself performs extremely well, so a full update from the scraper doesn't generate an amount of load that is of much a concern.
+This is also partly because the scraper seems to be sequentially crawling pages so it can only generate so many updates on single thread.
+However, every additional scrape will use additional disk space and memory for the running server causing us to periodically reset the index and repopulate, causing downtime.
+
+One option is to switch to a new collection everytime we update the docs sites and delete the old collection. This requires additional orchestration between client and the server, and to avoid down time the following order of operations would be needed.
+
+- Docs are updated
+- Publish updated docs 
+- Create new collection, store new name + old name
+- Scrape updated docs
+- Update client with new collection name
+- Delete old collection
+
+This dance would require multiple commits/actions in GitHub (we use GitHub Actions), and also be time sensitive since it will be non-deterministic as to how long it will take to scrape, update, and deploy our changes.
+
+Additional operational burden is something we want to avoid since it an on going cost on developer time that would otherwise be spent improving ServiceStack offerings for our customers.
+
+## Read-only Docker container
+
+Something to keep in mind when making architecture decisions is looking at the specifics of what is involved when it comes to the *flow of data* of your systems.
+
+You can ask yourself questions like:
+
+- What data is updated
+- When/How often is data updated
+- Who updates the data
+
+The answers to these questions can lead to choices that can exploit either the frequency, and/or availability of your data to make it easier to manage.
+A common example of this is when deciding how to cache information in your systems. 
+Some data is write heavy, making it a poor choice for cache while other data might rarely change, be read heavy and the update process might be completely predictable making it a great candidate for caching.
+
+If update frequency of the data is completely in your control and/or deterministic, you have a lot more choices when it comes to how to manage that data.
+
+In the case of Typesense, when it starts up, it reads from its `data` directory from disk to populate the index in memory and since our index is small and only updates when our documentation is updated, we can simplify the management of the index data by **baking it straight into a docker image**.
+
+Making our hosted Typesense server read-only, we can build the index and our own Docker image, with the index data in it, as a part of our CI process.
+
+This has several key advantages.
+
+- Disaster recovery doesn't need any additional data management.
+- Shipping an updated index is a normal ECS deployment.
+- Zero down time deployments.
+- Index is of a fixed size once deployed.
+
+To make things even more simplified, the incremental improvement of our documentation means that the difference between search index between updates is very small.
+This means if our search index is updated even a day after the actual documentation, the vast majority of our documentation is still accurately searchable by our users.
+
+Search on our documentation site is a very light workload for Typesense. Running as an ECS service on a 2 vCPU instance, the service struggled to get close to 1% with constant typeahead searching.
+
+![](img/posts/typesense/typesense-cpu-utilization.png)
+
+And since our docs site index is so small, the memory footprint is also tiny and stable at ~50MB or ~10% of the the service's soft memory limit.
+
+![](img/posts/typesense/typesense-memory-utilization.png)
+
+This means we will be able to host this using a single EC2 instance among various other or the ServiceStack hosted example applications and use the same [deployment patterns we've shared in our GitHub Actions templates](https://docs.servicestack.net/mix-github-actions-aws-ecs).
+
+[![](https://raw.githubusercontent.com/ServiceStack/docs/master/docs/images/mix/cloudcraft-host-digram-release-ecr-aws.png)](https://docs.servicestack.net/mix-github-actions-aws-ecs)
+
+So while this approach of shipping an index along with the Docker image isn't practical for large or 'living' indexes, many opensource documentation sites would likely be able to reuse this simplified approach.
+
+## GitHub Actions Process
+
+Since the ServiceStack docs site is hosted using GitHub Pages and we already use GitHub Actions to publish updates to our docs, using GitHub Actions was the natural place for this automation.
+
+To create our own Docker image for our search server we need to perform the following tasks on our CI process.
+
+- Run a local Typesense server on the CI via Docker
+- Scrape our hosted docs populating the local Typesense server
+- Copy the `data` folder of our local Typesense server during `docker build`
+
+The whole process in GitHub Actions looks like this.
+
+```shell
+mkdir -p ${GITHUB_WORKSPACE}/typesense-data
+cp ./search-server/typesense-server/Dockerfile ${GITHUB_WORKSPACE}/typesense-data/Dockerfile
+cp ./search-server/typesense-scraper/typesense-scraper-config.json typesense-scraper-config.json
+envsubst < "./search-server/typesense-scraper/typesense-scraper.env" > "typesense-scraper-updated.env"
+docker run -d -p 8108:8108 -v ${GITHUB_WORKSPACE}/typesense-data/data:/data \
+    typesense/typesense:0.21.0 --data-dir /data --api-key=${TYPESENSE_API_KEY} --enable-cors &
+# wait for typesense initialization
+sleep 5
+docker run -i --env-file typesense-scraper-updated.env \
+    -e "CONFIG=$(cat typesense-scraper-config.json | jq -r tostring)" typesense/docsearch-scraper
+```
+
+Our `Dockerfile` then takes this data from the `data` folder during build.
+
+```Dockerfile
+FROM typesense/typesense:0.21.0
+
+COPY ./data /data
+```
+
+One additional problem we had was related to the search only API key generation. As expected when generating API keys, we don't want the process to generate reused API keys, but to avoid needing to update our search client between updates, we actually want to use the same search only API key everytime we generate a new server.
+
+This can be achieved by specifying `value` in the `POST` command sent to the local Typesense server.
+
+```bash
+curl 'http://172.17.0.2:8108/keys' -X POST \
+  -H "X-TYPESENSE-API-KEY: ${TYPESENSE_API_KEY}" \
+  -H 'Content-Type: application/json' \
+  -d '{"value":<search-api-key>,"description":"Search only","actions":["documents:search"],"collections":["*"]}'
+```
+
+Once our custom Docker image has been built, we deploy it to AWS Elastic Container Repository (ECR), register a new `task-defintion.json` with ECS pointing to our new image, and finally update the running ECS Service to use the new task definition.
+
+To make things more hands off and reduce any possible issues from GitHub Pages CDN caching, updates to our search index are done on a daily basis using GitHub Action `schedule`.
+Once a day, the process checks if the latest commit in the repository is less than 1 day old. If it is,we ship an updated search index, otherwise we actually cancel the GitHub Action process early to save on CI minutes.
+
+The whole GitHub Action can be seen in our [ServiceStack/docs repository](https://github.com/ServiceStack/docs/blob/master/.github/workflows/search-index-update.yml) if you are interested or are setting up your own process the same way.
+
+## Search UI Dialog
+
+Now that our docs are indexed the only thing left to do is display the results. We set out to create a comparable UX to
+algolia's doc search which we've implemented in custom Vue3 components and have Open sourced in 
+[this gist](https://gist.github.com/gistlyn/d215e9ff31abd9adce719a663a4bd8af) in hope it will serve useful in adopting 
+typesearch for your own purposes.
+
+As VitePress is a SSG framework we need to wrap them in a [ClientOnly component](https://vitepress.vuejs.org/guide/global-component.html#clientonly)
+to ensure they're only rendered on the client:
+
+```html
+<ClientOnly>
+    <KeyboardEvents @keydown="onKeyDown" />
+    <TypeSenseDialog :open="openSearch" @hide="hideSearch" />
+</ClientOnly>
+```
+
+Where the logic to capture the window global shortcut keys is wrapped in a hidden 
+[KeyboardEvents.vue](https://gist.github.com/gistlyn/d215e9ff31abd9adce719a663a4bd8af#file-keyboardevents-vue):
+
+```html
+<template>
+  <div class="hidden"></div>
+</template>
+  
+<script>
+  export default {
+    created() {
+      const component = this;
+      this.handler = function (e) {
+        component.$emit('keydown', e);
+      }
+      window.addEventListener('keydown', this.handler);
+    },
+    beforeDestroy() {
+      window.removeEventListener('keydown', this.handler);
+    }
+  }
+</script>
+```
+
+Which is handled in our custom [Layout.vue](https://gist.github.com/gistlyn/d215e9ff31abd9adce719a663a4bd8af#file-layout-vue)
+VitePress theme to detect when the `esc` and `/` or `CTRL+K` keys are pressed to hide/open the dialog: 
+
+```ts
+const onKeyDown = (e:KeyboardEvent) => {
+    if (e.code === 'Escape') {
+        hideSearch();
+    }
+    else if ((e.target as HTMLElement).tagName != 'INPUT') {
+        if (e.code == 'Slash' || (e.ctrlKey && e.code == 'KeyK')) {
+            showSearch();
+            e.preventDefault();
+        }
+    }
+};
+```
+
+The actual search dialog component is encapsulated in 
+[TypeSenseDialog.vue](https://gist.github.com/gistlyn/d215e9ff31abd9adce719a663a4bd8af#file-typesensedialog-vue)
+(utilizing tailwind classes, scoped styles and inline SVGs so is easily portable), 
+the integral part being the API search query to our typesense instance:
+
+```js
+fetch('https://search.docs.servicestack.net/collections/typesense_docs/documents/search?q='
+  + encodeURIComponent(query.value)
+  + '&query_by=content,hierarchy.lvl0,hierarchy.lvl1,hierarchy.lvl2,hierarchy.lvl3&group_by=hierarchy.lvl0', {
+    headers: {
+      // Search only API key for Typesense.
+      'x-typesense-api-key': 'TYPESENSE_SEARCH_ONLY_API_KEY'
+    }
+})
+```
+
+Which instructs Typesense to search through each documents content and h1-3 headings, grouping results by its page title.
+Refer to the [Typesense API Search Reference](https://typesense.org/docs/0.21.0/api/documents.html#search) to learn how
+to further fine-tune search results for your use-case.
+
+## Search Results
+
+![](img/posts/typesense/typesense-dart.gif)
+
+The results are **excellent**, [see for yourself](https://docs.servicestack.net) by using the search at the top right or using Ctrl+K shortcut key on our docs site. 
+It handles typos really well, it is very quick and has become the fastest way to navigate our extensive documentation.
+
+We have been super impressed with the search experience that Typesense enabled, the engineers behind the Typesense product have created something with a better developer experience than even paid SaaS options and provided it with a clear value proposition.
+
+## ServiceStack a Sponsor of Typesense
+
+We were so impressed by the amazing results, that as a way to show our thanks we've become sponsors of 
+[Typesense on GitHub sponsors](https://github.com/sponsors/typesense) 🎉 🎉 
+
+We know how challenging it can be to try make open source software sustainable that if you find yourself using 
+amazing open source products like Typesense which you want to continue to see flourish, we encourage finding 
+out how you or your organization can support them, either via direct contributions or by helping spread the
+word with public posts (like this) sharing your experiences as their continued success will encourage further
+investments that ultimately benefits the project and all its users.
\ No newline at end of file
diff --git a/MyApp/_posts/2022-09-06_hetzner-cloud.md b/MyApp/_posts/2022-09-06_hetzner-cloud.md
new file mode 100644
index 0000000..f796375
--- /dev/null
+++ b/MyApp/_posts/2022-09-06_hetzner-cloud.md
@@ -0,0 +1,227 @@
+---
+title: In pursuit of the best value US cloud provider
+summary: We've been using AWS at ServiceStack for 10+ years, it's served us well but suffers from complex & expensive pricing
+author: Brandon Foley
+tags: [dev, hosting, devops]
+image: https://images.unsplash.com/photo-1451187580459-43490279c0fa?crop=entropy&fit=crop&h=1000&w=2000
+---
+
+At <a href="./">ServiceStack</a>, we have been using AWS for hosting for over 10 years. It has served us well, but it suffers from complex pricing and possibility of bill shock due to its fractured pay-as-you-go design.
+
+Thankfully, more and more companies are providing simpler offerings for hosting needs, and AWS themselves launched [Lightsail](https://aws.amazon.com/lightsail) as their answer to market demands for simple hosting options that package everything you need for basic hosting.
+
+These simpler hosting options tend to bundle several things together as one fixed monthly price. A VM with a specific compute and memory allocation, as well as data transfer, and storage.
+
+## Looking at different US offerings
+
+Something we wanted to do was to host our [live demo applications](https://github.com/ServiceStackApps/LiveDemos) on a US based host. We were using [Hetzner dedicated servers](https://www.hetzner.com/dedicated-rootserver) in the past for non-latency sensitive use cases like our build server and [Gist.Cafe (our interactive playground for multiple platforms)](https://gist.cafe) but we also wanted our demo applications to be snappy for US users.
+
+[DigitalOcean](https://www.digitalocean.com/pricing) provides ["Droplets"](https://www.digitalocean.com/pricing/droplets) with this fixed pricing model with a nice and simple interface. Their pricing was quite good and we realized we could run all 20+ of our demo applications on a single droplet for $40/month.
+
+For deployment, [we also like to keep things as simple as we can, whilst keeping portability](https://docs.servicestack.net/do-github-action-mix-deployment). Since all our projects are public and on GitHub, we use [GitHub Actions](https://docs.servicestack.net/do-github-action-mix-deployment#github-repository-setup) heavily along with a pattern that deploys our applications using Docker Compose via SSH.
+Each application runs in its own container behind an [NGINX proxy](https://docs.servicestack.net/do-github-action-mix-deployment#get-nginx-reverse-proxy-and-letsencrypt-companion-running) with a side car that handles renewing LetsEncrypt certificates. Below is an example of this pattern with Blazor and Litestream.
+
+<iframe class="youtube" src="https://www.youtube.com/embed/fY50dWszpw4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+
+A nice side effect of this approach is moving servers is relatively painless. We change the DNS entry for the application to point to our new server, update the GitHub Action Secrets if needed and run our Release workflow.
+
+A minute or so later, the application is back running again. Since their were 20+ of these repositories we took advantage of the [GitHub Organization Secrets](https://cli.github.com/manual/gh_secret_set) so we only needed to update values in one place, and [running the workflows again](https://cli.github.com/manual/gh_workflow_run) can also be done programmatically through the GitHub CLI.
+
+## DigitalOcean Price Increase
+
+In June of 2022, we got a notification that [prices for droplets would be increasing](https://www.digitalocean.com/try/new-pricing), and for our droplet it would be going from **$40 to $48**. While this is a small amount of money, it prompted us to have a wider look into this market.
+
+Something we try to do at ServiceStack is to not only provide a comprehensive .NET Framework for building API first systems, but also seek out great value hosting options we can recommend in this ever change space which we're happy to share, like this blog post, that might be useful to our users and others.
+
+Not everyone builds massively distributed systems, and as hardware performance increases, and platforms like [.NET are becoming even more optimized](https://devblogs.microsoft.com/dotnet/performance-improvements-in-aspnet-core-6), a setup with just a server or two can manage larger loads and use cases.
+
+Our research and evaluations ended up right back at [Hetzner but this time with their Cloud offering](https://www.hetzner.com/cloud). For less than **$15 USD** per month, you can get a **4 vCPU, 8GB RAM, 160GB storage and 20TB** of data transfer **hosted in the US**.
+
+We found this was by far the cheapest offering for a simple fixed monthly hosting, and looked to compare how well it performed against the more traditional cloud hosting setups.
+
+## Litestream and SQLite
+
+Our demo applications use [SQLite](https://www.sqlite.org) as a simple way to host the database storage and application together, taking advantage of SQLite's embedded nature.
+We were also testing out [Litestream](https://litestream.io) as a possible solution to the lack of data backups and safety when using SQLite for more production like workloads.
+
+<div class="mx-auto mt-4 mb-4">
+  <a href="https://litestream.io">
+      <div class="inline-flex justify-center w-full">
+        <img src="https://servicestack.net/img/posts/hetzner-cloud/litestream.svg" alt="">
+      </div>
+      <div class="text-gray-500 text-center">litestream.io</div>
+  </a>
+</div>
+
+Litestream runs as a separate process and watches your SQLite file for changes and replicates them to storage options like AWS S3, Azure Blob storage and SFTP.
+[We created several templates to make this easier](https://docs.servicestack.net/ormlite/litestream) and provide a way to bake in automated disaster recovery using Litestream when used with GitHub Actions and our SSH with Docker Compose deployment.
+
+With some basic load testing, we noticed that SQLite performed pretty well without any effort on our part, and decided we should see how this compares to the commonly suggested hosting patterns provided by the large cloud providers of AWS and Azure.
+
+We used the recommended "Production" setups provided by AWS RDS and Azure SQL Database wizards along with 2 vCPU application server to provide the basis on our comparison.
+The reason we chose to use the suggested defaults from these providers was to illustrate the power of defaults when offered by market leaders. When compared to a simple SQLite setup, and providers that offer fixed monthly pricing like Hetzner and DigitalOcean, which is often enough to small companies selling Business to Business (B2B) solutions, AWS and Azure recommended "Production" environments can look extremely over priced.
+
+One of the main reasons managed database solutions are chosen is the fact that they take care of automated backups and restore if things go wrong. There are other nice features that definitely have a lot of value, but managed disaster recovery is probably the most commonly cited one I've come across for why services like RDS are chosen during early development.
+
+Litestream provides this kind of data safety and disaster recovery functionality by targeting cost effective and robust storage solutions like AWS S3 and other cloud provided object stores, and making the backup process close to real-time, and accessible via their CLI.
+And the embedded nature of SQLite removes the uncertainty of the process of upgrading your database.
+
+## The Test
+
+To get a clearer idea how each of these hosting options perform with a fairly modest workload, we used a [Gatling](https://gatling.io) test to simulate a user logging into our sample Bookings application, browsing around and creating a booking.
+
+These series of steps had 2 write requests and 8 read, separated by 2 seconds per step. We then setup a Gatling simulation that ramped up adding new users to our system from 5 per second to 15 per second, to add a growing number of users over 10 minutes, then sustained over another 10 minutes.
+
+<div class="mx-auto mt-4 mb-4">
+    <div class="inline-flex justify-center w-full">
+      <img src="https://servicestack.net/img/posts/hetzner-cloud/aws-gatling-result.png" alt="">
+    </div>
+<div class="text-gray-500 text-center">AWS Gatling Result.</div>
+</div>
+
+<div class="mx-auto mt-4 mb-4">
+    <div class="inline-flex justify-center w-full">
+      <img src="https://servicestack.net/img/posts/hetzner-cloud/azure-gatling-result.png" alt="">
+    </div>
+<div class="text-gray-500 text-center">Azure Gatling Result.</div>
+</div>
+
+<div class="mx-auto mt-4 mb-4">
+    <div class="inline-flex justify-center w-full">
+      <img src="https://servicestack.net/img/posts/hetzner-cloud/hetzner-gatling-result.png" alt="">
+    </div>
+<div class="text-gray-500 text-center">Hetzner Gatling Result.</div>
+</div>
+
+All 3 setups could handle this rate of requests without issue, and though the "Recommended" AWS and Azure setups would have more headroom, the price difference is far too large to ignore, especially as the difference is paid every month.
+The requests throughput of that this test illustrated ~100rps can suit many many use cases, and SQLite is [really only limited by its single writer design](https://www.sqlite.org/whentouse.html#:~:text=An%20SQLite%20database%20is%20limited,to%20something%20less%20than%20this.). We did previous tests of upto 250rps on the same Hetzner Cloud instance with SQLite, but this was starting to reach the maximum throughput, again purely to do with the single writer limitation.
+
+<div class="mx-auto mt-4 mb-4">
+    <div class="inline-flex justify-center w-full">
+      <img src="https://servicestack.net/img/posts/hetzner-cloud/litestream-costs.svg" alt="">
+    </div>
+<div class="text-gray-500 text-center">Previous test result price comparison without AWS using Provisioned IOPS.</div>
+</div>
+
+This level of throughput is enough to service many kinds of businesses with a drastically more simple system to manage, with large cost savings. Also, with the use of an ORM like [OrmLite](https://docs.servicestack.net/ormlite), switching to another database provider can be migrated if and when the traditional offerings like Postgres are needed.
+
+## The Setups
+<style>
+    table {
+        width: 100%;
+        margin-top: 4em;
+        margin-bottom: 4em;
+    }
+</style>
+
+The original setup for tests we did in June didn't default to provisioned IOPs for AWS, but when repeating the tests AWS costs blow out due to this feature being enabled by default. 
+
+Without provisioned IOPs, it drops to around **$132/month** as an estimated cost. The **$300/month** default feature for a "Production" database is very hard for AWS to justify, and I think more of a sign of their poor performing GP2 storage option. Although this will only impact very "chatty" types of applications that need higher IOPs throughput, the difference in performance from RDS vs providers like DigitalOcean and Hetzner can be quite stark.
+
+<div class="mx-auto mt-4 mb-4">
+    <div class="inline-flex justify-center w-full">
+      <img src="https://servicestack.net/img/posts/hetzner-cloud/aws-rds-with-provisioned-iops.png" alt="">
+    </div>
+<div class="text-gray-500 text-center">AWS RDS now defaults to provisioned IOPs for a Production setup, drastically increasing costs.</div>
+</div>
+
+|              | AWS (DB)          | AWS (App) | Azure (DB) | Azure (App) | DigitalOcean | Hetzner Cloud |
+|--------------|-------------------|-----------|------------|-------------|--------------|---------------|
+| vCPU         | 2                 | 2         | 4          | 2           | 4            | 4             |
+| Memory  (GB) | 8                 | 4         | 10         | 8           | 8            | 8             |
+| Storage (GB) | 100 (provisioned) | 16        | 32         | 30          | 160          | 160           |
+| Cost         | $442              | $34       | $373       | $70         | $48          | $15           |
+
+The above specs were provided as "Production" defaults when using a single database instance. Azure SQL Database defaults to costing $373, during the load test, the database CPU hit ~25%.
+
+<div class="mx-auto mt-4 mb-4">
+    <div class="inline-flex justify-center w-full">
+      <img src="https://servicestack.net/img/posts/hetzner-cloud/azure-db-cpu-during-test.png" alt="">
+    </div>
+<div class="text-gray-500 text-center">Azure SQL database without tuning performs poorly for cost, likely due to lack of indexes</div>
+</div>
+
+
+|           | AWS (DB) | AWS (App) | Azure (DB) | Azure (App) | Hetzner Cloud |
+|-----------|----------|-----------|------------|-------------|---------------|
+| Max CPU % | 8        | 35        | 25         | 45          | 40            |
+
+
+This is without any tuning on any of the databases, so while you like more performance out of the recommended setups, it is still clear SQLite performs well by default, and it is well worth considering not only Hetzner Cloud for value for money, but if your use can only needs a single host with SQLite.
+
+## Hetzner Cloud
+
+While we were primarily looking for one of the lowest cost options with simplified pricing, Hetzner Cloud pleasantly surprised us with a few features the larger providers could learn from.
+
+<div class="mx-auto mt-4 mb-4">
+    <div class="inline-flex justify-center w-full">
+      <img src="https://servicestack.net/img/posts/hetzner-cloud/hetzner-cloud-buy.png" alt="">
+    </div>
+<div class="text-gray-500 text-center">Hetzner Cloud Pricing.</div>
+</div>
+
+### Creating a new instance is fast 
+Most of the time if will be ready to remote to before you can open your terminal. Not sure if this is due to some kind of pre-creation process on Hetzner part during the creation screen, but everything is very responsive.
+In my testing from the time the "Create" button was clicked, my SSH commands would succeed within **20 seconds**.
+
+### Live Graphs
+Another part of the responsiveness is their "Live" graphs for monitoring. It is surprisingly low latency and an extremely stark difference between AWS charging extra for "Detailed" monitoring on EC2 instances. The graphs update every 3-5 seconds in the browser and look to be over a few seconds behind real-time.
+
+<div class="mx-auto mt-4 mb-4">
+    <div class="inline-flex justify-center w-full">
+      <img src="https://servicestack.net/img/posts/hetzner-cloud/hetzner-cloud-live-graphs.gif" alt="">
+    </div>
+<div class="text-gray-500 text-center">Live monitoring updates every 3-5 seconds.</div>
+</div>
+
+CloudWatch is a major value add for AWS, and Hetzner's offering is very very basic in comparison, but it is nice to see live updating stats right in your web browser, and something hopefully the other providers can also offer in the future.
+
+### Price
+This is the biggest draw card by a long way. The AWS and Azure "recommended" setups are extremely expensive for the hardware and performance they offer. Yes they are mature cloud offerings with a large array of features, but their **pricing scales with hardware resources**.
+Products like **Provisioned IOPs** are extremely expensive, and when other cloud providers are offering far more performant and competitive storage with their instances, it can feel like AWS is using it's market share and their defaults to upsell very expensive products.
+
+### Transfer costs
+It's been long known that one of the ways large cloud providers keep customers in their network is by charging [excessively large and complex data egress costs](https://aws.amazon.com/blogs/architecture/overview-of-data-transfer-costs-for-common-architectures). Something attractive about simplified pricing from Hetzner Cloud (and DigitalOcean to a lesser degree) is the included data transfer of 20TB a month.
+
+Not only is AWS data transfer pricing extremely complicated (inter region vs cross region vs CloudFront vs Transit Gateway and so on), but if your application was sending a lot of data to clients, that same **20TB** you get for free with a **$15 server**, would cost **$1,791 just for data** when coming from AWS. Azure pricing also confusing, and in some ways more expensive.
+
+## Defaults are powerful
+Both AWS and Azure "recommended" defaults are there not because the software selected (SQL Server and Postgres) need that amount of resources just to operate, but more as an upsell.
+Lots of projects and applications absolutely do not need features like "Provisioned IOPs", despite GP2 storage of AWS being incredibly slow.
+
+Performing disk speed check using the Linux utility `fio` an AWS EC2 instance with 100GB GP2 storage can do ~2250 IOPS and 9MB/s read, and ~750 IOPs at 3MB/s write.
+In contrast, Digital Ocean $48 instance, this is not even paying the extra $8/month for the faster storage can do 35.2k IOPS at 144MB/s read, and 11.8k IOPS at 48MB/s write.
+
+Hetzner again is the stand out, with the $15 instance tests resulting in 50.8k IOPS at 207MB/s read, and 16.9k IOPS at 69MB/s write.
+
+|               | Read IOPS | Write IOPs | Read MBs  | Write MBs |
+|---------------|-----------|------------|-----------|-----------|
+| AWS           | 2.3k      | 0.8k       | 9.2 MB/s  | 3.1 MB/s  |
+| Azure         | 3.0k      | 1.0k       | 12.5 MB/s | 4.2 MB/s  |
+| DigitalOcean  | 35.2k     | 11.8k      | 144 MB/s  | 48.2 MB/s |
+| Hetzner Cloud | 50.5k     | 16.9k      | 207 MB/s  | 69.2 MB/s |
+
+
+All tests used the following `fio` command.
+
+```shell
+fio --randrepeat=1 --ioengine=libaio --direct=1 --gtod_reduce=1 --name=test \
+--filename=test --bs=4k --iodepth=64 --size=4G --readwrite=randrw --rwmixread=75
+```
+
+## SQLite
+
+Part of the resurgence in popularity of using SQLite is not only the simplicity of a single server, but also as hardware is getting faster, issues surrounding limitations of a single writer are becoming less of an issue for a wider number of use cases.
+
+Litestream's elegant solution for streaming backups to cheap replica storage is definitely adding to that popularity as well since it was a sticking point for a lot of use cases that need that simple data redundancy functionality.
+
+Other solutions for Postgres like `pgbackrest` are similar, but the ease of use is another big part of what makes SQLite and Litestream a great combination.
+One command to watch and replicate, another to restore, and it runs completely independent of your application using the SQLite file.
+
+## Hetzner Cloud is hard to beat on price
+
+We're going to keep testing Hetzner Cloud with new applications and use cases going into the future. While they are a very new player in the crowded Cloud Provider market, and their offerings are much more limited, the pricing is a breath of fresh air from the large three providers.
+
+More competition in this space is a great thing, and for those that can use solutions like SQLite for their projects, checking out some of the smaller players like DigitalOcean and Hetzner Cloud is well worth your time.
+The early signs from Hetzner Cloud is they not only have an amazing value product, but the features they do have improve on the equivalents from likes of AWS and Azure, which is hopefully a sign of things to come from them.
+
diff --git a/MyApp/_posts/2022-12-31_typography.md b/MyApp/_posts/2022-12-31_typography.md
new file mode 100644
index 0000000..7d49177
--- /dev/null
+++ b/MyApp/_posts/2022-12-31_typography.md
@@ -0,0 +1,85 @@
+---
+title: Tailwind Typography
+summary: tailwindcss/typography enabled for Markdown pages
+author: Lucy Bates
+tags: [tailwind, markdown]
+image: https://images.unsplash.com/photo-1497250681960-ef046c08a56e?crop=entropy&fit=crop&h=1000&w=2000
+---
+
+<p class="lead">
+  Until now, trying to style an article, document, or blog post with Tailwind has been a tedious
+  task that required a keen eye for typography and a lot of complex custom CSS.
+</p>
+
+By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
+
+We get lots of complaints about it actually, with people regularly asking us things like:
+
+> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
+
+We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
+
+The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
+
+It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
+
+```html
+<article class="prose">
+  <h1>Garlic bread with cheese: What the science tells us</h1>
+  <p>
+    For years parents have espoused the health benefits of eating garlic bread with cheese to their
+    children, with the food earning such an iconic status in our culture that kids will often dress
+    up as warm, cheesy loaf for Halloween.
+  </p>
+  <p>
+    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
+    springing up around the country.
+  </p>
+  <!-- ... -->
+</article>
+```
+
+For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
+
+---
+
+## What to expect from here on out
+
+What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.
+
+It's important to cover all of these use cases for a few reasons:
+
+1. We want everything to look good out of the box.
+2. Really just the first reason, that's the whole point of the plugin.
+3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
+
+Now we're going to try out another header style.
+
+### Typography should be easy
+
+So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.
+
+Something a wise person once told me about typography is:
+
+> Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.
+
+It's probably important that images look okay here by default as well:
+
+<figure>
+  <img
+    src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+    alt=""
+  />
+  <figcaption>
+    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
+    classical Latin literature from 45 BC, making it over 2000 years old.
+  </figcaption>
+</figure>
+
+Now I'm going to show you an example of an unordered list to make sure that looks good, too:
+
+- So here is the first item in this list.
+- In this example we're keeping the items short.
+- Later, we'll use longer, more complex list items.
+
+And that's the end of this section.
diff --git a/MyApp/_posts/2023-01-01_deploy.md b/MyApp/_posts/2023-01-01_deploy.md
new file mode 100644
index 0000000..26de0a0
--- /dev/null
+++ b/MyApp/_posts/2023-01-01_deploy.md
@@ -0,0 +1,107 @@
+---
+title: Deployment with GitHub Actions
+summary: Configuring your GitHub repo for SSH and CDN deployments
+author: Gayle Smith
+tags: [github-actions, devops]
+image: https://images.unsplash.com/photo-1485841890310-6a055c88698a?crop=entropy&fit=crop&h=1000&w=2000
+---
+
+# ServiceStack GitHub Action Deployments
+
+The [release.yml](https://github.com/NetCoreTemplates/razor-tailwind/blob/main/.github/workflows/release.yml) 
+in this template enables GitHub Actions CI deployment to a dedicated server with SSH access.
+
+## Overview
+`release.yml` is designed to work with a ServiceStack app deploying directly to a single server via SSH. A docker image is built and stored on GitHub's `ghcr.io` docker registry when a GitHub Release is created.
+
+GitHub Actions specified in `release.yml` then copy files remotely via scp and use `docker-compose` to run the app remotely via SSH.
+
+## What's the process of `release.yml`?
+
+![](https://raw.githubusercontent.com/ServiceStack/docs/master/docs/images/mix/release-ghr-vanilla-diagram.png)
+
+## Deployment server setup
+
+To get this working, a server needs to be setup with the following:
+
+- SSH access
+- docker
+- docker-compose
+- ports 443 and 80 for web access of your hosted application
+
+This can be your own server or any cloud hosted server like Digital Ocean, AWS, Azure etc. We use [Hetzner Cloud](http://cloud.hetzner.com/)
+to deploy all ServiceStack's [GitHub Project Templates]( https://github.com/NetCoreTemplates/) as it was the 
+[best value US cloud provider](https://servicestack.net/blog/finding-best-us-value-cloud-provider) we've found.
+
+When setting up your server, you'll want to use a dedicated SSH key for access to be used by GitHub Actions. GitHub Actions will need the *private* SSH key within a GitHub Secret to authenticate. This can be done via ssh-keygen and copying the public key to the authorized clients on the server.
+
+To let your server handle multiple ServiceStack applications and automate the generation and management of TLS certificates, an additional docker-compose file is provided in this template, `nginx-proxy-compose.yml`. This docker-compose file is ready to run and can be copied to the deployment server.
+
+For example, once copied to remote `~/nginx-proxy-compose.yml`, the following command can be run on the remote server.
+
+```
+docker-compose -f ~/nginx-proxy-compose.yml up -d
+```
+
+This will run an nginx reverse proxy along with a companion container that will watch for additional containers in the same docker network and attempt to initialize them with valid TLS certificates.
+
+### GitHub Actions secrets
+
+The `release.yml` uses the following secrets.
+
+| Required Secrets | Description |
+| -- | -- |
+| `DEPLOY_HOST` | Hostname used to SSH deploy .NET App to, this can either be an IP address or subdomain with A record pointing to the server |
+| `DEPLOY_USERNAME` | Username to log in with via SSH e.g, **ubuntu**, **ec2-user**, **root** |
+| `DEPLOY_KEY` | SSH private key used to remotely access deploy .NET App |
+| `LETSENCRYPT_EMAIL` | Email required for Let's Encrypt automated TLS certificates |
+
+These secrets can use the [GitHub CLI](https://cli.github.com/manual/gh_secret_set) for ease of creation. Eg, using the GitHub CLI the following can be set.
+
+```bash
+gh secret set DEPLOY_HOST -b"<DEPLOY_HOST>"
+gh secret set DEPLOY_USERNAME -b"<DEPLOY_USERNAME>"
+gh secret set DEPLOY_KEY < key.pem # DEPLOY_KEY
+gh secret set LETSENCRYPT_EMAIL -b"<LETSENCRYPT_EMAIL>"
+```
+
+These secrets are used to populate variables within GitHub Actions and other configuration files.
+
+## Deployments
+
+A published version of your .NET App created with the standard dotnet publish tool:
+
+```yaml
+dotnet publish -c Release
+```
+
+is used to build a production build of your .NET App inside the standard `Dockerfile` for dockerizing .NET Applications.
+
+Additional custom deployment tasks can be added to your project's package.json **postinstall** script which also gets run at deployment. 
+
+If preferred additional MS Build tasks can be run by passing in custom parameters in the publish command, e.g:
+
+```yaml
+dotnet publish -c Release /p:APP_TASKS=prerender
+```
+
+Which your `MyApp.csproj` can detect with a target that checks for it:
+
+```xml
+<!-- Prerender tasks run in release.yml -->
+<Target Name="AppTasks" AfterTargets="Build" Condition="$(APP_TASKS) != ''">
+    <CallTarget Targets="Prerender" Condition="$(APP_TASKS.Contains('prerender'))" />
+</Target>
+<Target Name="Prerender">
+    <Message Text="Prerender..." />
+</Target>
+```
+
+## Pushing updates and rollbacks
+
+By default, deployments occur on commit to your main branch. A new Docker image for your ServiceStack API is produced, pushed to GHCR.io and hosted on your Linux server with Docker Compose.
+
+The template also will run the release process on the creation of a GitHub Release making it easier to switch to manual production releases.
+
+Additionally, the `release.yml` workflow can be run manually specifying a version. This enables production rollbacks based on previously tagged releases.
+A release must have already been created for the rollback build to work, it doesn't create a new Docker build based on previous code state, only redeploys as existing Docker image.
diff --git a/MyApp/_posts/2023-01-10_vs.md b/MyApp/_posts/2023-01-10_vs.md
new file mode 100644
index 0000000..6afce8a
--- /dev/null
+++ b/MyApp/_posts/2023-01-10_vs.md
@@ -0,0 +1,76 @@
+---
+title: Develop using Visual Studio
+summary: Exploring development workflow in VS Code and Visual Studio .NET
+author: Lucy Bates
+tags: [c#, dev]
+image: https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?crop=entropy&fit=crop&h=1000&w=2000
+---
+
+A popular alternative development environment to our preferred [JetBrains Rider](rider) IDE is to use
+Visual Studio, the primary issue with this is that VS Code is a better IDE with richer support for JavaScript and npm
+projects whilst Visual Studio is a better IDE for C# Projects. 
+
+Essentially this is why we recommend Rider where it's best at both, where both C# and JS/TypeScript projects can 
+be developed from within the same solution.
+
+### Developing with just VS Code
+
+<a href="https://visualstudio.microsoft.com/" title="VS Code" class="sm:float-left mr-8">
+    <svg class="w-24 h-24" style="margin-top:1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 254"><defs><linearGradient id="logosVisualStudioCode0" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient><path id="logosVisualStudioCode1" d="M180.828 252.605a15.872 15.872 0 0 0 12.65-.486l52.501-25.262a15.94 15.94 0 0 0 9.025-14.364V41.197a15.939 15.939 0 0 0-9.025-14.363l-52.5-25.263a15.877 15.877 0 0 0-18.115 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638l-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233l100.507 91.695a15.853 15.853 0 0 0 5.464 3.571Zm10.464-183.649l-76.262 57.889l76.262 57.888V68.956Z"/></defs><mask id="logosVisualStudioCode2" fill="#fff"><use href="#logosVisualStudioCode1"/></mask><path fill="#0065A9" d="M246.135 26.873L193.593 1.575a15.885 15.885 0 0 0-18.123 3.08L3.466 161.482c-4.626 4.219-4.62 11.502.012 15.714l14.05 12.772a10.625 10.625 0 0 0 13.569.604L238.229 33.436c6.949-5.271 16.93-.315 16.93 8.407v-.61a15.938 15.938 0 0 0-9.024-14.36Z" mask="url(#logosVisualStudioCode2)"/><path fill="#007ACC" d="m246.135 226.816l-52.542 25.298a15.887 15.887 0 0 1-18.123-3.08L3.466 92.207c-4.626-4.218-4.62-11.502.012-15.713l14.05-12.773a10.625 10.625 0 0 1 13.569-.603l207.132 157.135c6.949 5.271 16.93.315 16.93-8.408v.611a15.939 15.939 0 0 1-9.024 14.36Z" mask="url(#logosVisualStudioCode2)"/><path fill="#1F9CF0" d="M193.428 252.134a15.892 15.892 0 0 1-18.125-3.083c5.881 5.88 15.938 1.715 15.938-6.603V11.273c0-8.318-10.057-12.483-15.938-6.602a15.892 15.892 0 0 1 18.125-3.084l52.533 25.263a15.937 15.937 0 0 1 9.03 14.363V212.51c0 6.125-3.51 11.709-9.03 14.363l-52.533 25.262Z" mask="url(#logosVisualStudioCode2)"/><path fill="url(#logosVisualStudioCode0)" fill-opacity=".25" d="M180.828 252.605a15.874 15.874 0 0 0 12.65-.486l52.5-25.263a15.938 15.938 0 0 0 9.026-14.363V41.197a15.939 15.939 0 0 0-9.025-14.363L193.477 1.57a15.877 15.877 0 0 0-18.114 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638l-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233l100.506 91.695a15.857 15.857 0 0 0 5.465 3.571Zm10.464-183.65l-76.262 57.89l76.262 57.888V68.956Z" mask="url(#logosVisualStudioCode2)"/></svg>
+</a>
+
+If you prefer the dev UX of a lightweight text editor or your C# project isn't large, than VS Code on its own
+can provide a great development UX which is also what [Vue recommends themselves](https://v3.vuejs.org/api/sfc-tooling.html#ide-support),
+to be used together with the [Volar extension](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar).
+
+VSCode's [Integrated Terminal](https://code.visualstudio.com/docs/editor/integrated-terminal) has great multi-terminal 
+support you can toggle between the editor and terminal with `Ctrl+` or open a new Terminal Window with
+<code>Ctrl+Shift+`</code> to run Tailwind with:
+
+```bash
+$ npm run ui:dev
+```
+
+Then in a new Terminal Window, start a new watched .NET App with:
+
+```bash
+$ dotnet watch
+```
+
+With both projects started you can open a browser tab running at `https://localhost:5001` where it 
+will automatically reload itself at every `Ctrl+S` save point.
+
+#### Useful VS Code extensions
+
+We recommend these extensions below to enhance the development experience of this template:
+
+ - [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Add Intellisense for Tailwind classes
+ - [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) - Add HTML Syntax Highlighting in string literals 
+
+### Using Visual Studio
+
+<a href="https://code.visualstudio.com/" title="Visual Studio" class="sm:float-left mr-8">
+    <svg class="w-24 h-24" style="margin-top:1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><defs><linearGradient id="logosVisualStudio0" x1="50%" x2="50%" y1=".002%" y2="100%"><stop offset="0%" stop-color="#FFF"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient></defs><path fill="#52218A" d="M36.987 200.406a10.667 10.667 0 0 1-11.04 1.734L6.56 194.006A10.667 10.667 0 0 1 0 184.22V70.46a10.667 10.667 0 0 1 6.56-9.787l19.387-8a10.667 10.667 0 0 1 11.04 1.733l4.346 3.6a5.893 5.893 0 0 0-9.333 4.8v129.067a5.893 5.893 0 0 0 9.333 4.8l-4.346 3.733Z"/><path fill="#6C33AF" d="M6.56 194.006A10.667 10.667 0 0 1 0 184.22v-.88a6.16 6.16 0 0 0 10.667 4.133L176 4.673a16 16 0 0 1 18.187-3.093l52.746 25.386A16 16 0 0 1 256 41.393v.613a10.107 10.107 0 0 0-16.507-7.813l-198.16 162.48l-4.346 3.733a10.667 10.667 0 0 1-11.04 1.734L6.56 194.006Z"/><path fill="#854CC7" d="M6.56 60.673A10.667 10.667 0 0 0 0 70.46v.88a6.16 6.16 0 0 1 10.667-4.134L176 250.006a16 16 0 0 0 18.187 3.094l52.746-25.387A16 16 0 0 0 256 213.286v-.613a10.107 10.107 0 0 1-16.507 7.813L41.333 58.006l-4.346-3.733a10.667 10.667 0 0 0-11.04-1.6l-19.387 8Z"/><path fill="#B179F1" d="M194.187 253.1A16 16 0 0 1 176 250.006a9.387 9.387 0 0 0 16-6.64v-232a9.387 9.387 0 0 0-16-6.693a16 16 0 0 1 18.187-3.093l52.746 25.36A16 16 0 0 1 256 41.366v171.947a16 16 0 0 1-9.067 14.427l-52.746 25.36Z"/><path fill="url(#logosVisualStudio0)" fill-opacity=".25" d="M183.707 254.273a16 16 0 0 0 10.48-1.173l52.746-25.36A16 16 0 0 0 256 213.313V41.366a16 16 0 0 0-9.067-14.426L194.187 1.58A16 16 0 0 0 182.24.806A16 16 0 0 0 176 4.673L90.987 98.7L41.333 58.006l-4.346-3.733a10.667 10.667 0 0 0-9.627-2.213a6.8 6.8 0 0 0-1.413.48L6.56 60.673A10.667 10.667 0 0 0 0 69.66v115.36a10.664 10.664 0 0 0 6.56 8.986l19.387 8a6.8 6.8 0 0 0 1.413.48c3.378.882 6.973.056 9.627-2.213l4.346-3.6l49.654-40.693L176 250.006a16 16 0 0 0 7.707 4.267ZM192 73.153l-66.107 54.187L192 181.526V73.153ZM32 90.726l33.093 36.614L32 163.953V90.726Z"/></svg>
+</a>
+
+As your C# project grows you'll want to consider running the back-end C# Solution with Visual Studio .NET with its
+much improved intelli-sense, navigation, tests runner & debug capabilities. 
+
+As we've never had a satisfactory experience trying develop npm or JS/TypeScript projects with VS.NET, we'd recommend only
+using VS.NET for C# and Razor and continuing to use VSCode for everything else. 
+
+If you'd prefer to use Visual Studio for front-end development we recommend moving all JS to external files for a better
+Dev UX, e.g:
+
+```html
+<script type="module" src="./pages/SignIn.mjs"></script>
+```
+
+### Deploying to Production
+
+This template also includes the necessary GitHub Actions to deploy this Apps production static assets to GitHub Pages CDN,
+for more info, checkout [GitHub Actions Deployments](deploy).
+
+### Get Started
+
+If you're new to Vue 3 a good place to start is [Vue 3 Composition API](https://vuejs.org/api/composition-api-setup.html).
diff --git a/MyApp/_posts/2023-01-11_prerendering.md b/MyApp/_posts/2023-01-11_prerendering.md
new file mode 100644
index 0000000..bf03b7c
--- /dev/null
+++ b/MyApp/_posts/2023-01-11_prerendering.md
@@ -0,0 +1,236 @@
+---
+draft: true
+title: Prerendering Razor Pages
+summary: Improving Blog Performance with Prerendering
+author: Lucy Bates
+tags: [c#, dev, markdown]
+image: https://images.unsplash.com/photo-1522526886914-6e8d4fd91399?crop=entropy&fit=crop&h=1000&w=2000
+---
+
+Prerendering static content is a popular technique used by [JAMStack](https://jamstack.org) Apps to improve the
+performance, reliability and scalability of Web Apps that's able to save unnecessary computation at runtime by 
+generating static content at deployment which can be optionally hosted from a CDN for even greater performance.
+
+As such we thought it a valuable technique to include in this template to show how it can be easily achieved
+within a Razor Pages Application. Since prerendered content is only updated at deployment, it's primarily only 
+useful for static content like this Blog which is powered by the static markdown content in 
+[_blog/posts](https://github.com/NetCoreTemplates/vue-mjs/tree/main/MyApp/wwwroot/_blog/posts) whose content
+is prerendered to: 
+
+  - [/blog](https://vue-mjs.web-templates.io/blog)
+
+### Parsing Markdown Files
+
+All the functionality to load and render Markdown files is maintained in 
+[Configure.Markdown.cs](https://github.com/NetCoreTemplates/vue-mjs/blob/main/MyApp/Configure.Markdown.cs),
+most of which is spent populating the POCO below from the content and frontmatter of each Markdown file:  
+
+```csharp
+public class MarkdownFileInfo
+{
+    public string Path { get; set; } = default!;
+    public string? Slug { get; set; }
+    public string? FileName { get; set; }
+    public string? HtmlFileName { get; set; }
+    public string? Title { get; set; }
+    public string? Summary { get; set; }
+    public string? Splash { get; set; }
+    public string? Author { get; set; }
+    public List<string> Tags { get; set; } = new();
+    public DateTime? Date { get; set; }
+    public string? Content { get; set; }
+    public string? Preview { get; set; }
+    public string? HtmlPage { get; set; }
+    public int? WordCount { get; set; }
+    public int? LineCount { get; set; }
+}
+```
+
+Which uses the popular [Markdig](https://github.com/xoofx/markdig) library to parse the frontmatter into a
+Dictionary that it populates the POCO with using the built-in [Automapping](https://docs.servicestack.net/auto-mapping):
+
+```csharp
+var content = VirtualFiles.GetFile(path).ReadAllText();
+var document = Markdown.Parse(content, pipeline);
+var block = document
+    .Descendants<Markdig.Extensions.Yaml.YamlFrontMatterBlock>()
+    .FirstOrDefault();
+var doc = block?
+    .Lines // StringLineGroup[]
+    .Lines // StringLine[]
+    .Select(x => $"{x}\n")
+    .ToList()
+    .Select(x => x.Replace("---", string.Empty))
+    .Where(x => !string.IsNullOrWhiteSpace(x))
+    .Select(x => KeyValuePairs.Create(x.LeftPart(':').Trim(), x.RightPart(':').Trim()))
+    .ToObjectDictionary()
+    .ConvertTo<MarkdownFileInfo>();
+```
+
+Since this is a [Jekyll inspired blog](https://jekyllrb.com/docs/step-by-step/08-blogging/) it derives the **date** and **slug** for each 
+post from its file name which has the nice property of maintaining markdown blog posts in chronological order:
+
+```csharp
+doc.Slug = file.Name.RightPart('_').LastLeftPart('.');
+doc.HtmlFileName = $"{file.Name.RightPart('_').LastLeftPart('.')}.html";
+
+var datePart = file.Name.LeftPart('_');
+if (DateTime.TryParseExact(datePart, "yyyy-MM-dd", CultureInfo.InvariantCulture,
+        DateTimeStyles.AdjustToUniversal, out var date))
+{
+    doc.Date = date;
+}
+```
+
+The rendering itself is done using Markdig's `HtmlRenderer` which renders the Markdown content into a HTML fragment:  
+
+```csharp
+var pipeline = new MarkdownPipelineBuilder()
+    .UseYamlFrontMatter()
+    .UseAdvancedExtensions()
+    .Build();
+var writer = new StringWriter();
+var renderer = new Markdig.Renderers.HtmlRenderer(writer);
+pipeline.Setup(renderer);
+//...
+
+renderer.Render(document);
+writer.Flush();
+doc.Preview = writer.ToString();
+```
+
+At this point we've populated Markdown Blog Posts into a POCO which is the data source used to implement all the blog's functionality. 
+
+We can now start prerendering entire HTML Pages by rendering the markdown inside the 
+[Post.cshtml](https://github.com/NetCoreTemplates/vue-mjs/blob/main/MyApp/Pages/Posts/Post.cshtml) Razor Page by populating its PageModel
+from the `MarkdownFileInfo` POCO. It also sets a `Static` flag that tells the Razor Page that this page is being statically rendered so 
+it can render the appropriate links.
+
+```csharp
+var page = razorPages.GetView("/Pages/Posts/Post.cshtml");
+var model = new Pages.Posts.PostModel(this) { Static = true }.Populate(doc);
+doc.HtmlPage = RenderToHtml(page.View, model);
+
+public string RenderToHtml(IView? page, PageModel model)
+{
+    using var ms = MemoryStreamFactory.GetStream();
+    razorPages.WriteHtmlAsync(ms, page, model).GetAwaiter().GetResult();
+    ms.Position = 0;
+    var html = Encoding.UTF8.GetString(ms.ReadFullyAsMemory().Span);
+    return html;
+}
+```
+
+The use of `GetResult()` on an async method isn't ideal, but something we have to live with until there's a better way 
+to run async code on Startup.
+
+The actual rendering of the Razor Page is done with ServiceStack's `RazorPagesEngine` feature which sets up the necessary 
+Http, View and Page contexts to render Razor Pages, registered in ASP.NET Core's IOC at:
+
+```csharp
+.ConfigureServices(services => {
+    services.AddSingleton<RazorPagesEngine>();
+})
+```
+
+The process of saving the prerendered content is then simply a matter of saving the rendered Razor Page at the preferred locations,
+done for each post and the [/blog](https://vue-mjs.web-templates.io/blog) index page using the
+[Posts/Index.cshtml](https://github.com/NetCoreTemplates/vue-mjs/blob/main/MyApp/Pages/Posts/Index.cshtml) Razor Page:
+
+```csharp
+foreach (var file in files)
+{
+    // prerender /blog/{slug}.html
+    if (renderTo != null)
+    {
+        log.InfoFormat("Writing {0}/{1}...", renderTo, doc.HtmlFileName);
+        fs.WriteFile($"{renderTo}/{doc.HtmlFileName}", doc.HtmlPage);
+    }
+}
+
+// prerender /blog/index.html
+if (renderTo != null)
+{
+    log.InfoFormat("Writing {0}/index.html...", renderTo);
+    RenderToFile(razorPages.GetView("/Pages/Posts/Index.cshtml").View, 
+        new Pages.Posts.IndexModel { Static = true }, $"{renderTo}/index.html");
+}
+```
+
+### Prerendering Pages Task
+
+Next we need to come up with a solution to run this from the command-line.
+[App Tasks](https://docs.servicestack.net/app-tasks) is ideal for this which lets you run one-off tasks within the full context of your App 
+but without the overhead of maintaining a separate .exe with duplicated App configuration & logic, instead we can run the .NET App to 
+run the specified Tasks then exit before launching its HTTP Server.
+
+To do this we'll register this task with the **prerender** AppTask name:
+
+```csharp
+AppTasks.Register("prerender", args => blogPosts.LoadPosts("_blog/posts", renderTo: "blog"));
+```
+
+Which we can run now from the command-line with:
+
+```bash
+$ dotnet run --AppTasks=prerender
+```
+
+To make it more discoverable, this is also registered as an npm script in `package.json`:
+
+```json
+{
+    "scripts": {
+        "prerender": "dotnet run --AppTasks=prerender"
+    }
+}
+```
+
+That can now be run to prerender this blog to `/wwwroot/blog` with: 
+
+```bash
+$ npm run prerender
+```
+
+### Prerendering at Deployment
+
+To ensure this is always run at deployment it's also added as an MS Build task in **MyApp.csproj**:
+
+```xml
+<Target Name="AppTasks" AfterTargets="Build" Condition="$(APP_TASKS) != ''">
+    <CallTarget Targets="Prerender" Condition="$(APP_TASKS.Contains('prerender'))" />
+</Target>
+<Target Name="Prerender">
+    <Message Text="Prerender..." />
+    <Exec Command="dotnet run --AppTasks=prerender" />
+</Target>
+```
+
+Configured to run when the .NET App is published in the GitHub Actions deployment task in 
+[/.github/workflows/release.yml](https://github.com/NetCoreTemplates/vue-mjs/blob/main/.github/workflows/release.yml):
+
+```yaml
+ # Publish .NET Project
+ - name: Publish dotnet project
+   working-directory: ./MyApp
+   run: | 
+     dotnet publish -c Release /p:APP_TASKS=prerender
+```
+
+Where it's able to control which App Tasks are run at deployment. 
+
+### Pretty URLs for static .html pages
+
+A nicety we can add to serving static `.html` pages is giving them [Pretty URLs](https://en.wikipedia.org/wiki/Clean_URL)
+by registering the Plugin: 
+
+```csharp
+Plugins.Add(new CleanUrlsFeature());
+```
+
+Which allows prerendered pages to be accessed with and without its file extension:
+
+ - [/blog/prerendering](https://vue-mjs.web-templates.io/blog/prerendering)
+ - [/blog/prerendering.html](https://vue-mjs.web-templates.io/blog/prerendering.html)
+
+### 
\ No newline at end of file
diff --git a/MyApp/_posts/2023-01-11_rider.md b/MyApp/_posts/2023-01-11_rider.md
new file mode 100644
index 0000000..7d76b27
--- /dev/null
+++ b/MyApp/_posts/2023-01-11_rider.md
@@ -0,0 +1,78 @@
+---
+layout: _LayoutContent
+title: Develop using JetBrains Rider
+summary: Setting up & exploring development workflow in Rider
+author: Gayle Smith
+tags: [c#, dev]
+image: https://images.unsplash.com/photo-1472289065668-ce650ac443d2?crop=entropy&fit=crop&h=1000&w=2000
+---
+
+<a href="https://www.jetbrains.com/rider/">
+<img src="https://raw.githubusercontent.com/ServiceStack/docs/master/docs/images/svg/rider.svg" 
+     class="sm:float-left mr-8 w-24 h-24" style="margin-top:0"></a>
+
+[JetBrains Rider](https://www.jetbrains.com/rider/) is our recommended IDE for any C# + JavaScript development as it 
+offers a great development UX for both, including excellent support 
+for TypeScript and popular JavaScript Framework SPA assets like [Vue SFC's](https://v3.vuejs.org/guide/single-file-component.html).
+
+#### Setup Rider IDE
+
+As Rider already understands and provides excellent HTML/JS/TypeScript support you'll be immediately productive out-of-the-box,
+we can further improve the development experience for Vue.js Apps by adding an empty **vue** dependency to **package.json**:
+
+```json
+{
+  "devDependencies": {
+    "vue": ""
+  }
+}
+```
+
+As this is just a heuristic Rider looks for to enable its Vue support, installing the dependency itself isn't used or required.
+
+Other than that the only plugin we recommend adding is:
+
+<a href="https://plugins.jetbrains.com/plugin/15321-tailwind-css" class="text-2xl flex items-center" style="text-decoration:none">
+     <svg class="sm:float-left w-12 h-12" style="margin:0 .5rem 0 0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#44a8b3" d="M9 13.7q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1q-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1Zm-7 8.4q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1q-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1Z"/></svg>
+     <span class="">Tailwind CSS Plugin</span>
+</a>
+
+Which provides provides intelli-sense support for [Tailwind CSS](https://tailwindcss.com).
+
+### Start both dotnet and Tailwind
+
+The only additional development workflow requirement to use tailwind is to start it running in the background 
+which can be done from a new Terminal:
+
+```bash
+$ npm run ui:dev
+```
+
+We find `dotnet watch` offers the most productive iterative development workflow for .NET which refreshes on save 
+which works great with Tailwind which rewrites your `app.css` on save.
+
+How you want to run them is largely a matter of preference, our personal preference is to run the **dev** and **ui:dev**
+npm scripts in your **package.json**:
+
+![](https://raw.githubusercontent.com/ServiceStack/docs/master/docs/images/scripts/dotnet-tailwind.png)
+
+
+### Rider's Task Runner
+
+Where they will appear in Rider's useful task runner widget where you'll be able to easily, stop and rerun all project tasks:
+
+![](https://github.com/ServiceStack/docs/raw/master/docs/images/spa/rider-run-widget.png)
+
+### Running from the terminal
+
+These GUI tasks are just managing running CLI commands behind-the-scenes, which if you prefer you can use JetBrains
+excellent multi-terminal support to run `$ dotnet watch` and `$ npm run ui:dev` from separate or split Terminal windows.
+
+### Deploying to Production
+
+This template also includes the necessary GitHub Actions to deploy this Apps production static assets to GitHub Pages CDN, 
+for more info, checkout [GitHub Actions Deployments](deploy).
+
+### Get Started
+
+If you're new to Vue 3 a good place to start is [Vue 3 Composition API](https://vuejs.org/api/composition-api-setup.html).
diff --git a/MyApp/_posts/2023-01-21_start.md b/MyApp/_posts/2023-01-21_start.md
new file mode 100644
index 0000000..16b9951
--- /dev/null
+++ b/MyApp/_posts/2023-01-21_start.md
@@ -0,0 +1,77 @@
+---
+title: Getting Started
+summary: Found out how to use these template features
+author: Gayle Smith
+tags: [js, dev, tailwind]
+image: https://images.unsplash.com/photo-1533090161767-e6ffed986c88?crop=entropy&fit=crop&h=1000&w=2000
+---
+
+### Setup 
+
+If project wasn't created with [x new](https://docs.servicestack.net/dotnet-new), ensure postinstall tasks are run with:
+
+```bash
+$ npm install
+```
+
+### Tailwind Configuration
+
+This template is configured with a stand-alone [Tailwind CSS CLI](https://tailwindcss.com/docs/installation)
+installation with a modified **tailwind.input.css** that includes [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)
+and [@tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) plugins so that no **node_modules** dependencies are needed.
+
+The [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin) plugin css is contained in `css/typography.css` which
+applies a beautiful default style to unstyled HTML, ideal for Markdown content like this.
+
+### Running Tailwind during development
+
+Run tailwind in a new terminal during development to auto update your **app.css**:
+
+```bash
+$ npm run ui:dev
+```
+
+For an optimal development experience run it together with `dotnet watch` to preview changes on each save.
+
+Or if using JetBrains Rider, **ui:dev** can be run directly from Rider in **package.json**:
+
+![](https://raw.githubusercontent.com/ServiceStack/docs/master/docs/images/servicestack-reference/scripts-tailwind.png)
+
+### Using JsonServiceClient in Web Pages
+
+Easiest way to call APIs is to use [@servicestack/client](https://docs.servicestack.net/javascript-client) with
+the built-in [/types/mjs](https://vue-mjs.web-templates.io/types/mjs) which returns your APIs annotated typed JS DTOs that can be used immediately
+(i.e. without any build steps):
+
+```html
+<input type="text" id="txtName">
+<div id="result"></div>
+```
+
+```html
+<script type="module">
+import { JsonApiClient, $1, on } from '@servicestack/client'
+import { Hello } from '/types/mjs'
+
+on('#txtName', {
+    async keyup(el) {
+        const client = JsonApiClient.create()
+        const api = await client.api(new Hello({ name:el.target.value }))
+        $1('#result').innerHTML = api.response.result
+    }
+})
+</script>
+```
+
+For better IDE intelli-sense during development, save the annotated Typed DTOs to disk with:
+
+```bash
+$ npm run dtos
+```
+
+Where it will enable IDE static analysis when calling Typed APIs from JavaScript:
+
+```js
+import { Hello } from '/mjs/dtos.mjs'
+client.api(new Hello({ name }))
+```
diff --git a/MyApp/_posts/2023-02-01_javascript.md b/MyApp/_posts/2023-02-01_javascript.md
new file mode 100644
index 0000000..0065dbf
--- /dev/null
+++ b/MyApp/_posts/2023-02-01_javascript.md
@@ -0,0 +1,676 @@
+---
+title: Simple, Modern JavaScript
+summary: Learn about JS Modules, Vue 3 and available rich UI Components
+tags: [js, dev]
+image: https://images.unsplash.com/photo-1497515114629-f71d768fd07c?crop=entropy&fit=crop&h=1000&w=2000
+author: Brandon Foley
+---
+
+<svg class="sm:float-left mr-8 w-24 h-24" style="margin-top:0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
+<rect width="630" height="630" fill="#f7df1e"/>
+<path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
+</svg>
+
+JavaScript has progressed significantly in recent times where many of the tooling & language enhancements
+that we used to rely on external tools for is now available in modern browsers alleviating the need for
+complex tooling and npm dependencies that have historically plagued modern web development.
+
+The good news is that the complex npm tooling that was previously considered mandatory in modern JavaScript App
+development can be considered optional as we can now utilize modern browser features like
+[async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function),
+[JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules),
+[dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import),
+[import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
+and [modern language features](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) for a
+sophisticated development workflow without the need for any npm build tools.
+
+### Bringing Simplicity Back
+
+The [razor](https://github.com/NetCoreTemplates/razor) template focuses on simplicity and eschews many aspects that has
+complicated modern JavaScript development,
+specifically:
+
+- No npm node_modules or build tools
+- No client side routing
+- No heavy client state
+
+Effectively abandoning the traditional SPA approach in lieu of a simpler [MPA](https://docs.astro.build/en/concepts/mpa-vs-spa/)
+development model using Razor Pages for Server Rendered content with any interactive UIs progressively enhanced with JavaScript.
+
+#### Freedom to use any JS library
+
+Avoiding the SPA route ends up affording more flexibility on which JS libraries each page can use as without heavy bundled JS
+blobs of all JS used in the entire App, it's free to only load the required JS each page needs to best implement its
+required functionality, which can be any JS library, preferably utilizing ESM builds that can be referenced from a
+[JavaScript Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), taking advantage of the module system
+native to modern browsers able to efficiently download the declarative matrix of dependencies each script needs.
+
+### Best libraries for progressive Multi Page Apps
+
+It includes a collection of libraries we believe offers the best modern development experience in Progressive
+MPA Web Apps, specifically:
+
+#### [Tailwind CLI](https://tailwindcss.com/docs/installation)
+Tailwind enables a responsive, utility-first CSS framework for creating maintainable CSS at scale without the need for any CSS
+preprocessors like Sass, which is configured to run from an npx script to avoid needing any node_module dependencies.
+
+#### [Vue 3](https://vuejs.org/guide/introduction.html)
+Vue is a popular Progressive JavaScript Framework that makes it easy to create interactive Reactive Components whose
+[Composition API](https://vuejs.org/api/composition-api-setup.html) offers a nice development model without requiring any
+pre-processors like JSX.
+
+Where creating a component is as simple as:
+
+```js
+const Hello = {
+    template: `<b>Hello, {{name}}!</b>`,
+    props: { name:String }
+}
+```
+<div class="text-center text-2xl py-2">
+    <hello name="Vue 3"></hello>
+</div>
+
+Or a simple reactive example:
+
+```js
+import { ref } from "vue"
+
+const Counter = {
+    template: `<b @click="count++">Counter {{count}}</b>`,
+    setup() {
+        let count = ref(1)
+        return { count }
+    }
+}
+```
+
+<div class="text-center text-2xl py-2 cursor-pointer select-none">
+    <counter></counter>
+</div>
+
+### Vue Components in Markdown
+
+Inside `.md` Markdown pages Vue Components can be embedded using Vue's progressive
+[HTML Template Syntax](https://vuejs.org/guide/essentials/template-syntax.html):
+
+```html
+<hello name="Vue 3"></hello>
+<counter></counter>
+```
+
+### Vue Components in Razor Pages
+
+Inside `.cshtml` Razor Pages these components can be mounted using the standard [Vue 3 mount](https://vuejs.org/api/application.html#app-mount) API, but to
+make it easier we've added additional APIs for declaratively mounting components to pages using `data-component` and `data-props`
+attributes:
+
+```html
+<div data-component="Hello" data-props="{ name: 'Vue 3' }"></div>
+```
+
+Alternatively they can be programatically added using the custom `mount` method in `api.mjs`:
+
+```js
+import { mount } from "/mjs/api.mjs"
+mount('#counter', Counter)
+```
+
+Both methods create components with access to all your Shared Components and any 3rd Party Plugins which
+we can preview in this example that uses **@servicestack/vue**'s
+[PrimaryButton](https://docs.servicestack.net/vue/navigation#primarybutton)
+and [ModalDialog](https://docs.servicestack.net/vue/modals):
+
+
+```js
+const Plugin = {
+    template:`<div>
+        <PrimaryButton @click="show=true">Open Modal</PrimaryButton>
+        <ModalDialog v-if="show" @done="show=false">
+            <div class="p-8">Hello @servicestack/vue!</div>
+        </ModalDialog>
+    </div>`,
+    setup() {
+        const show = ref(false)
+        return { show }
+    }
+}
+```
+
+```html
+<plugin></plugin>
+```
+
+<div class="text-center">
+    <plugin id="plugin" class="text-2xl py-4"></plugin>
+</div>
+
+### Vue HTML Templates
+
+An alternative progressive approach for creating Reactive UIs with Vue is by embedding its HTML markup directly in `.html` pages using
+[HTML Template Syntax](https://vuejs.org/guide/essentials/template-syntax.html) which is both great for performance
+as the DOM UI can be rendered before the Vue Component is initialized. UI elements you want hidden can use Vue's
+[v-cloak](https://vuejs.org/api/built-in-directives.html#v-cloak) attribute where they'll be hidden until components are initialized.
+
+It's also great for development as it lets you cohesively maintain most pages functionality need in the HTML page itself - in
+isolation with the rest of the website, i.e. instead of spread across multiple external `.js` source files that for
+SPAs unnecessarily increases the payload sizes of JS bundles with functionality that no other pages need.
+
+With Vue's HTML syntax you can maintain the Vue template in HTML and just use embedded JavaScript for the Reactive UI's functionality, e.g:
+
+```html
+<div id="app">
+    <primary-button v-on:click="show=true">Open Modal</primary-button>
+    <modal-dialog v-if="show" v-on:done="show=false">
+        <div class="p-8">Hello @servicestack/vue!</div>
+    </modal-dialog>
+</div>
+<script>
+const App = {
+    setup() {
+        const show = ref(false)
+        return { show }
+    }
+}
+mount('#app', App)
+</script>
+```
+
+This is the approach used to develop [Vue Stable Diffusion](/posts/vue-stable-diffusion) where all functionality specific
+to the page is maintained in the page itself, whilst any common functionality is maintained in external JS Modules loaded
+on-demand by the Browser when needed.
+
+### @servicestack/vue
+[@servicestack/vue](https://github.com/ServiceStack/servicestack-vue) is our growing Vue 3 Tailwind component library with a number of rich Tailwind components useful
+in .NET Web Apps, including Input Components with auto form validation binding which is used by all HTML forms in
+the [razor](https://github.com/NetCoreTemplates/razor) template.
+
+<vue-component-gallery></vue-component-gallery>
+
+### @servicestack/client
+[@servicestack/client](https://docs.servicestack.net/javascript-client) is our generic JS/TypeScript client library
+which enables a terse, typed API for using your App's typed DTOs from the built-in
+[JavaScript ES6 Classes](https://docs.servicestack.net/javascript-add-servicestack-reference) support to enable an effortless
+end-to-end Typed development model for calling your APIs **without any build steps**, e.g:
+
+```html
+<input type="text" id="txtName">
+<div id="result"></div>
+
+<script type="module">
+import { JsonApiClient, $1, on } from '@servicestack/client'
+import { Hello } from '/types/mjs'
+
+on('#txtName', {
+    async keyup(el) {
+        const client = JsonApiClient.create()
+        const api = await client.api(new Hello({ name:el.target.value }))
+        $1('#result').innerHTML = api.response.result
+    }
+})
+</script>
+```
+
+For better IDE intelli-sense during development, save the annotated Typed DTOs to disk with:
+
+:::sh
+npm run dtos
+:::
+
+That can be referenced instead to unlock your IDE's static analysis type-checking and intelli-sense benefits during development:
+
+```js
+import { Hello } from '/js/dtos.mjs'
+client.api(new Hello({ name }))
+```
+
+You'll typically use all these libraries in your **API-enabled** components as seen in the
+[HelloApi.mjs](https://github.com/NetCoreTemplates/razor/blob/main/MyApp/wwwroot/mjs/components/HelloApi.mjs)
+component on the home page which calls the [Hello](/ui/Hello) API on each key press:
+
+```js
+import { ref } from "vue"
+import { useClient } from "@servicestack/vue"
+import { Hello } from "../dtos.mjs"
+
+export default {
+    template:/*html*/`<div class="flex flex-wrap justify-center">
+        <TextInput v-model="name" @keyup="update" />
+        <div class="ml-3 mt-2 text-lg">{{ result }}</div>
+    </div>`,
+    props:['value'],
+    setup(props) {
+        let name = ref(props.value)
+        let result = ref('')
+        let client = useClient()
+
+        async function update() {
+            let api = await client.api(new Hello({ name }))
+            if (api.succeeded) {
+                result.value = api.response.result
+            }
+        }
+        update()
+
+        return { name, update, result }
+    }
+}
+```
+
+Which we can also mount below:
+
+```html
+<hello-api value="Vue 3"></hello-api>
+```
+
+<hello-api value="Vue 3" class="w-full font-semibold"></hello-api>
+
+We'll also go through and explain other features used in this component:
+
+#### `/*html*/`
+
+Although not needed in [Rider](rider) (which can automatically infer HTML in strings), the `/*html*/` type hint can be used
+to instruct tooling like the [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html)
+VS Code extension to provide syntax highlighting and an enhanced authoring experience for HTML content in string literals.
+
+### useClient
+
+[useClient()](https://docs.servicestack.net/vue/use-client) provides managed APIs around the `JsonServiceClient`
+instance registered in Vue App's with:
+
+```js
+let client = JsonApiClient.create()
+app.provide('client', client)
+```
+
+Which maintains contextual information around your API calls like **loading** and **error** states, used by `@servicestack/vue` components to
+enable its auto validation binding. Other functionality in this provider include:
+
+```js
+let { 
+    api, apiVoid, apiForm, apiFormVoid, // Managed Typed ServiceClient APIs
+    loading, error,                     // Maintains 'loading' and 'error' states
+    setError, addFieldError,            // Add custom errors in client
+    unRefs                              // Returns a dto with all Refs unwrapped
+} = useClient()
+```
+
+Typically you would need to unwrap `ref` values when calling APIs, i.e:
+
+```js
+let client = JsonApiClient.create()
+let api = await client.api(new Hello({ name:name.value }))
+```
+
+#### useClient - api
+
+This is unnecessary in useClient `api*` methods which automatically unwraps ref values, allowing for the more pleasant API call:
+
+```js
+let api = await client.api(new Hello({ name }))
+```
+
+#### useClient - unRefs
+
+But as DTOs are typed, passing reference values will report a type annotation warning in IDEs with type-checking enabled,
+which can be resolved by explicitly unwrapping DTO ref values with `unRefs`:
+
+```js
+let api = await client.api(new Hello(unRefs({ name })))
+```
+
+#### useClient - setError
+
+`setError` can be used to populate client-side validation errors which the
+[SignUp.mjs](https://github.com/NetCoreTemplates/vue-mjs/blob/main/MyApp/wwwroot/Pages/SignUp.mjs)
+component uses to report an invalid submissions when passwords don't match:
+
+```js
+const { api, setError } = useClient()
+async function onSubmit() {
+    if (password.value !== confirmPassword.value) {
+        setError({ fieldName:'confirmPassword', message:'Passwords do not match' })
+        return
+    }
+    //...
+}
+```
+
+### Form Validation
+
+All `@servicestack/vue` Input Components support contextual validation binding that's typically populated from API
+[Error Response DTOs](https://docs.servicestack.net/error-handling) but can also be populated from client-side validation
+as done above.
+
+#### Explicit Error Handling
+
+This populated `ResponseStatus` DTO can either be manually passed into each component's **status** property as done in [/TodoMvc](/TodoMvc):
+
+```html
+<template id="TodoMvc-template">
+    <div class="mb-3">
+        <text-input :status="store.error" id="text" label="" placeholder="What needs to be done?"
+                    v-model="store.newTodo" v-on:keyup.enter.stop="store.addTodo()"></text-input>
+    </div>
+    <!-- ... -->
+</template>
+```
+
+Where if you try adding an empty Todo the `CreateTodo` API will fail and populate its `store.error` reactive property with the
+APIs Error Response DTO which the `<TextInput />` component checks to display any field validation errors adjacent to the HTML Input
+with matching `id` fields:
+
+```js
+let store = {
+    /** @type {Todo[]} */
+    todos: [],
+    newTodo:'',
+    error:null,
+    async addTodo() {
+        this.todos.push(new Todo({ text:this.newTodo }))
+        let api = await client.api(new CreateTodo({ text:this.newTodo }))
+        if (api.succeeded)
+            this.newTodo = ''
+        else
+            this.error = api.error
+    },
+    //...
+}
+```
+
+#### Implicit Error Handling
+
+More often you'll want to take advantage of the implicit validation support in `useClient()` which makes its state available to child
+components, alleviating the need to explicitly pass it in each component as seen in razor's
+[Contacts.mjs](https://github.com/NetCoreTemplates/razor/blob/net6/MyApp/wwwroot/Pages/Contacts.mjs) `Edit` component for its
+Contacts page which doesn't do any manual error handling:
+
+```js
+const Edit = {
+    template:/*html*/`<SlideOver @done="close" title="Edit Contact">
+    <form @submit.prevent="submit">
+      <input type="submit" class="hidden">
+      <fieldset>
+        <ErrorSummary except="title,name,color,filmGenres,age,agree" class="mb-4" />
+        <div class="grid grid-cols-6 gap-6">
+          <div class="col-span-6 sm:col-span-3">
+            <SelectInput id="title" v-model="request.title" :options="enumOptions('Title')" />
+          </div>
+          <div class="col-span-6 sm:col-span-3">
+            <TextInput id="name" v-model="request.name" required placeholder="Contact Name" />
+          </div>
+          <div class="col-span-6 sm:col-span-3">
+            <SelectInput id="color" v-model="request.color" :options="colorOptions" />
+          </div>
+          <div class="col-span-6 sm:col-span-3">
+            <SelectInput id="favoriteGenre" v-model="request.favoriteGenre" :options="enumOptions('FilmGenre')" />
+          </div>
+          <div class="col-span-6 sm:col-span-3">
+            <TextInput type="number" id="age" v-model="request.age" />
+          </div>
+        </div>
+      </fieldset>
+    </form>
+    <template #footer>
+      <div class="flex justify-between space-x-3">
+        <div><ConfirmDelete @delete="onDelete">Delete</ConfirmDelete></div>
+        <div><PrimaryButton @click="submit">Update Contact</PrimaryButton></div>
+      </div>
+    </template>
+  </SlideOver>`,
+    props:['contact'],
+    emits:['done'],
+    setup(props, { emit }) {
+        const client = useClient()
+        const request = ref(new UpdateContact(props.contact))
+        const colorOptions = propertyOptions(getProperty('UpdateContact','Color'))
+
+        async function submit() {
+            const api = await client.api(request.value)
+            if (api.succeeded) close()
+        }
+
+        async function onDelete () {
+            const api = await client.apiVoid(new DeleteContact({ id:props.id }))
+            if (api.succeeded) close()
+        }
+
+        const close = () => emit('done')
+
+        return { request, enumOptions, colorOptions, submit, onDelete, close }
+    }
+}
+```
+
+Effectively making form validation binding a transparent detail where all `@servicestack/vue`
+Input Components are able to automatically apply contextual validation errors next to the fields they apply to:
+
+![](https://raw.githubusercontent.com/ServiceStack/docs/master/docs/images/scripts/edit-contact-validation.png)
+
+### AutoForm Components
+
+We can elevate our productivity even further with
+[Auto Form Components](https://docs.servicestack.net/vue/autoform) that can automatically generate an
+instant API-enabled form with validation binding by just specifying the Request DTO you want to create the form of, e.g:
+
+```html
+<AutoCreateForm type="CreateBooking" formStyle="card" />
+```
+
+<div class="not-prose">
+    <auto-create-form type="CreateBooking" form-style="card"></auto-create-form>
+</div>
+
+The AutoForm components are powered by your [App Metadata](https://docs.servicestack.net/vue/use-appmetadata) which allows creating
+highly customized UIs from [declarative C# attributes](https://docs.servicestack.net/locode/declarative) whose customizations are
+reused across all ServiceStack Auto UIs, including:
+
+- [API Explorer](https://docs.servicestack.net/api-explorer)
+- [Locode](https://docs.servicestack.net/locode/)
+- [Blazor Tailwind Components](https://docs.servicestack.net/templates-blazor-components)
+
+### Form Input Components
+
+In addition to including Tailwind versions of the standard [HTML Form Inputs](https://docs.servicestack.net/vue/form-inputs) controls to create beautiful Tailwind Forms,
+it also contains a variety of integrated high-level components:
+
+- [FileInput](https://docs.servicestack.net/vue/fileinput)
+- [TagInput](https://docs.servicestack.net/vue/taginput)
+- [Autocomplete](https://docs.servicestack.net/vue/autocomplete)
+
+### useAuth
+
+Your Vue.js code can access Authenticated Users using [useAuth()](https://docs.servicestack.net/vue/use-auth)
+which can also be populated without the overhead of an Ajax request by embedding the response of the built-in
+[Authenticate API](/ui/Authenticate?tab=details) inside `_Layout.cshtml` with:
+
+```html
+<script type="module">
+import { useAuth } from "@@servicestack/vue"
+const { signIn } = useAuth()
+signIn(@await Html.ApiAsJsonAsync(new Authenticate()))
+</script>
+```
+
+Where it enables access to the below [useAuth()](https://docs.servicestack.net/vue/use-auth) utils for inspecting the
+current authenticated user:
+
+```js
+const { 
+    signIn,           // Sign In the currently Authenticated User
+    signOut,          // Sign Out currently Authenticated User
+    user,             // Access Authenticated User info in a reactive Ref<AuthenticateResponse>
+    isAuthenticated,  // Check if the current user is Authenticated in a reactive Ref<boolean>
+    hasRole,          // Check if the Authenticated User has a specific role
+    hasPermission,    // Check if the Authenticated User has a specific permission
+    isAdmin           // Check if the Authenticated User has the Admin role
+} = useAuth()
+```
+
+This is used in [Bookings.mjs](https://github.com/NetCoreTemplates/razor/blob/main/MyApp/wwwroot/pages/Bookings.mjs)
+to control whether the `<AutoEditForm>` component should enable its delete functionality:
+
+```js
+export default {
+    template/*html*/:`
+    <AutoEditForm type="UpdateBooking" :deleteType="canDelete ? 'DeleteBooking' : null" />
+    `,
+    setup(props) {
+        const { hasRole } = useAuth()
+        const canDelete = computed(() => hasRole('Manager'))
+        return { canDelete }
+    }
+}
+```
+
+#### [JSDoc](https://jsdoc.app)
+
+We get great value from using [TypeScript](https://www.typescriptlang.org) to maintain our libraries typed code bases, however it
+does mandate using an external tool to convert it to valid JS before it can be run, something the new Razor Vue.js templates expressly avoids.
+
+Instead it adds JSDoc type annotations to code where it adds value, which at the cost of slightly more verbose syntax enables much of the
+same static analysis and intelli-sense benefits of TypeScript, but without needing any tools to convert it to valid JavaScript, e.g:
+
+```js
+/** @param {KeyboardEvent} e */
+function validateSafeName(e) {
+    if (e.key.match(/[\W]+/g)) {
+        e.preventDefault()
+        return false
+    }
+}
+```
+
+#### TypeScript Language Service
+
+Whilst the code-base doesn't use TypeScript syntax in its code base directly, it still benefits from TypeScript's language services
+in IDEs for the included libraries from the TypeScript definitions included in `/lib/typings`, downloaded in
+[postinstall.js](https://github.com/NetCoreTemplates/razor/blob/main/MyApp/postinstall.js) after **npm install**.
+
+### Import Maps
+
+[Import Maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) is a useful browser feature that allows
+specifying optimal names for modules, that can be used to map package names to the implementation it should use, e.g:
+
+```csharp
+@Html.StaticImportMap(new() {
+    ["vue"]                  = "/lib/mjs/vue.mjs",
+    ["@servicestack/client"] = "/lib/mjs/servicestack-client.mjs",
+    ["@servicestack/vue"]    = "/lib/mjs/servicestack-vue.mjs",
+})
+```
+
+Where they can be freely maintained in one place without needing to update any source code references.
+This allows source code to be able to import from the package name instead of its physical location:
+
+```js
+import { ref } from "vue"
+import { useClient } from "@servicestack/vue"
+import { JsonApiClient, $1, on } from "@servicestack/client"
+```
+
+It's a great solution for specifying using local unminified debug builds during **Development**, and more optimal CDN hosted
+production builds when running in **Production**, alleviating the need to rely on complex build tools to perform this code transformation for us:
+
+```csharp
+@Html.ImportMap(new()
+{
+    ["vue"]                  = ("/lib/mjs/vue.mjs",                 "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"),
+    ["@servicestack/client"] = ("/lib/mjs/servicestack-client.mjs", "https://unpkg.com/@servicestack/client@2/dist/servicestack-client.min.mjs"),
+    ["@servicestack/vue"]    = ("/lib/mjs/servicestack-vue.mjs",    "https://unpkg.com/@servicestack/vue@3/dist/servicestack-vue.min.mjs")
+})
+```
+
+Note: Specifying exact versions of each dependency improves initial load times by eliminating latency from redirects.
+
+Or if you don't want your Web App to reference any external dependencies, have the ImportMap reference local minified production builds instead:
+
+```csharp
+@Html.ImportMap(new()
+{
+    ["vue"]                  = ("/lib/mjs/vue.mjs",                 "/lib/mjs/vue.min.mjs"),
+    ["@servicestack/client"] = ("/lib/mjs/servicestack-client.mjs", "/lib/mjs/servicestack-client.min.mjs"),
+    ["@servicestack/vue"]    = ("/lib/mjs/servicestack-vue.mjs",    "/lib/mjs/servicestack-vue.min.mjs")
+})
+```
+
+#### Polyfill for Safari
+
+Unfortunately Safari is the last modern browser to [support import maps](https://caniuse.com/import-maps) which is only now in
+Technical Preview. Luckily this feature can be polyfilled with the [ES Module Shims](https://github.com/guybedford/es-module-shims):
+
+```html
+@if (Context.Request.Headers.UserAgent.Any(x => x.Contains("Safari") && !x.Contains("Chrome")))
+{
+    <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.3/dist/es-module-shims.js"></script>
+}
+```
+
+### Fast Component Loading
+
+SPAs are notorious for being slow to load due to needing to download large blobs of JavaScript bundles that it needs to initialize
+with their JS framework to mount their App component before it starts fetching the data from the server it needs to render its components.
+
+A complex solution to this problem is to server render the initial HTML content then re-render it again on the client after the page loads.
+A simpler solution is to avoid unnecessary ajax calls by embedding the JSON data the component needs in the page that loads it, which is what
+[/TodoMvc](/TodoMvc) does to load its initial list of todos using the [Service Gateway](https://docs.servicestack.net/service-gateway)
+to invoke APIs in process and embed its JSON response with:
+
+```html
+<script>todos = @await ApiResultsAsJsonAsync(new QueryTodos())</script>
+<script type="module">
+import TodoMvc from "/Pages/TodoMvc.mjs"
+import { mount } from "/mjs/app.mjs"
+mount('#todomvc', TodoMvc, { todos })
+</script>
+```
+
+Where `ApiResultsAsJsonAsync` is a simplified helper that uses the `Gateway` to call your API and returns its unencoded JSON response:
+
+```csharp
+(await Gateway.ApiAsync(new QueryTodos())).Response?.Results.AsRawJson();
+```
+
+The result of which should render the List of Todos instantly when the page loads since it doesn't need to perform any additional Ajax requests
+after the component is loaded.
+
+### Fast Page Loading
+
+We can get SPA-like page loading performance using htmx's [Boosting](https://htmx.org/docs/#boosting) feature which avoids full page reloads
+by converting all anchor tags to use Ajax to load page content into the page body, improving perceived performance from needing to reload
+scripts and CSS in `<head>`.
+
+This is used in [Header.cshtml](https://github.com/NetCoreTemplates/razor/blob/main/MyApp/Pages/Shared/Header.cshtml) to **boost** all
+main navigation links:
+
+```html
+<nav hx-boost="true">
+    <ul>
+        <li><a href="/Blog">Blog</a></li>
+    </ul>
+</nav>
+```
+
+htmx has lots of useful [real world examples](https://htmx.org/examples/) that can be activated with declarative attributes,
+another useful feature is the [class-tools](https://htmx.org/extensions/class-tools/) extension to hide elements from
+appearing until after the page is loaded:
+
+```html
+<div id="signin"></div>
+<div class="hidden mt-5 flex justify-center" classes="remove hidden:load">
+    @Html.SrcPage("SignIn.mjs")
+</div>
+```
+
+Which is used to reduce UI yankiness from showing server rendered content before JS components have loaded.
+
+### @servicestack/vue Library
+
+[@servicestack/vue](https://docs.servicestack.net/vue/) is our cornerstone library for enabling a highly productive
+Vue.js development model across our [Vue Tailwind Project templates](https://docs.servicestack.net/templates-vue) which
+we'll continue to significantly invest in to unlock even greater productivity benefits in all Vue Tailwind Apps.
+
+In addition to a variety of high-productive components, it also contains a core library of functionality
+underpinning the Vue Components that most Web Apps should also find useful:
+
+<vue-component-library class="mt-4"></vue-component-library>
diff --git a/MyApp/_posts/2023-03-30_razor-ssg.md b/MyApp/_posts/2023-03-30_razor-ssg.md
new file mode 100644
index 0000000..0f28020
--- /dev/null
+++ b/MyApp/_posts/2023-03-30_razor-ssg.md
@@ -0,0 +1,605 @@
+---
+layout: _LayoutContent
+title: Introducing Razor SSG
+summary: Create fast, beautiful statically rendered Razor Websites & Blogs
+tags: [razor, markdown, blog, dev]
+image: https://images.unsplash.com/photo-1579767684138-a57e917d30aa?crop=entropy&fit=crop&h=1000&w=2000
+author: Lucy Bates
+---
+
+Razor SSG is a Razor Pages powered Markdown alternative to [Ruby's Jekyll](https://jekyllrb.com/) & 
+[Next.js](https://nextjs.org) that's ideal for generating static websites & blogs using C#, Razor Pages & Markdown. 
+
+### GitHub Codespaces Friendly
+
+In addition to having a pure Razor + .NET solution to create fast, CDN-hostable static websites, it also aims to provide a
+great experience from GitHub Codespaces, where you can create, modify, preview & check-in changes before the included GitHub Actions
+auto deploy changes to its GitHub Pages CDN - all from your iPad!
+
+[![](https://servicestack.net/img/posts/razor-ssg/codespaces.png)](https://github.com/features/codespaces)
+
+To see this in action, we walk through the entire workflow of creating, updating and adding features to a custom Razor SSG website 
+from just a browser using Codespaces, that auto publishes changes to your GitHub Repo's **gh-pages** branch where it's hosted for 
+free on GitHub Pages CDN:
+
+<iframe class="youtube" src="https://www.youtube.com/embed/MRQMBrXi5Sc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
+
+### Enhance with simple, modern JavaScript
+
+For enhanced interactivity, static markdown content can be [progressively enhanced](https://servicestack.net/posts/javascript) with Vue 3 components,
+as done in this example that embed's the 
+[GettingStarted.mjs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/wwwroot/mjs/components/GettingStarted.mjs) Vue Component to create new Razor SSG App's below with:
+
+```html
+<getting-started template="razor-ssg"></getting-started>
+```
+
+<div class="py-8 not-prose text-base flex justify-center">
+  <getting-started template="razor-ssg"></getting-started>
+</div>
+
+Although with full control over the websites `_Layout.cshtml`, you're free to use any preferred JS Module or Web Component you prefer.
+
+## Razor Pages
+
+Your website can be built using either Markdown `.md` or Razor `.cshtml` pages, although it's generally recommended to 
+use Markdown to capture the static content for your website for improved productivity and ease of maintenance.
+
+### Content in Markdown, Functionality in Razor Pages
+
+The basic premise behind most built-in features is to capture static content in markdown using a combination of 
+folder structure & file name conventions in addition to each markdown page's frontmatter & content. This information
+is then used to power each feature using Razor pages for precise layout and functionality.
+
+The template includes the source code for each website feature, enabling full customization that also serves as good examples
+for how to implement your own custom markdown-powered website features.
+
+### Markdown Feature Structure
+
+All markdown features are effectively implemented in the same way, starting with a **_folder** for maintaining its static markdown
+content, a **.cs** class to load the markdown and a **.cshtml** Razor Page to render it: 
+
+| Location | Description |
+| - | - |
+| `/_{Feature}` | Maintains the static markdown for the feature |
+| `Markdown.{Feature}.cs` | Functionality to read the feature's markdown into logical collections |
+| `{Feature}.cshtml` | Functionality to Render the feature |
+| [Configure.Ssg.cs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Configure.Ssg.cs) | Initializes and registers the feature with ASP .NET's IOC |
+
+Lets see what this looks like in practice by walking through the "Pages" feature: 
+
+## Pages Feature
+
+The pages feature simply makes all pages in the **_pages** folder, available from `/{filename}`.
+
+Where the included pages:
+
+### [/_pages](https://github.com/NetCoreTemplates/razor-ssg/tree/main/MyApp/_pages)
+ - privacy.md
+ - speaking.md
+ - uses.md
+ 
+Are made available from:
+
+ - [/privacy](https://razor-ssg.web-templates.io/privacy)
+ - [/speaking](https://razor-ssg.web-templates.io/speaking)
+ - [/uses](https://razor-ssg.web-templates.io/uses)
+
+### Loading Pages Markdown
+
+The code that loads the Pages feature markdown content is in [Markdown.Pages.cs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Markdown.Pages.cs):
+
+```csharp
+public class MarkdownPages : MarkdownPagesBase<MarkdownFileInfo>
+{
+    public MarkdownPages(ILogger<MarkdownPages> log, IWebHostEnvironment env) 
+        : base(log,env) {}
+    
+    List<MarkdownFileInfo> Pages { get; set; } = new();
+    public List<MarkdownFileInfo> VisiblePages => Pages.Where(IsVisible).ToList();
+
+    public MarkdownFileInfo? GetBySlug(string slug) => 
+        Fresh(VisiblePages.FirstOrDefault(x => x.Slug == slug));
+
+    public void LoadFrom(string fromDirectory)
+    {
+        Pages.Clear();
+        var fs = AssertVirtualFiles();
+        var files = fs.GetDirectory(fromDirectory).GetAllFiles().ToList();
+        var log = LogManager.GetLogger(GetType());
+        log.InfoFormat("Found {0} pages", files.Count);
+
+        var pipeline = CreatePipeline();
+
+        foreach (var file in files)
+        {
+            var doc = Load(file.VirtualPath, pipeline);
+            if (doc == null)
+                continue;
+
+            Pages.Add(doc);
+        }
+    }
+}
+```
+
+Which ultimately just loads Markdown files using the configured [Markdig](https://github.com/xoofx/markdig) pipeline in its `Pages` 
+collection which is made available via its `VisiblePages` property which returns all documents in development whilst hiding
+**Draft** and content published at a **Future Date** from production builds.
+
+### Rendering Markdown Pages
+
+The pages are then rendered in [Page.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Page.cshtml) Razor Page
+that's available from `/{slug}`
+
+```csharp
+@page "/{slug}"
+@model MyApp.Page
+@inject MarkdownPages Markdown
+
+@implements IRenderStatic<MyApp.Page>
+@functions {
+    public List<Page> GetStaticProps(RenderContext ctx)
+    {
+        var markdown = ctx.Resolve<MarkdownPages>();
+        return markdown.VisiblePages.Map(page => new Page { Slug = page.Slug! });
+    }
+}
+
+@{
+    var doc = Markdown.GetBySlug(Model.Slug);
+    if (doc.Layout != null) 
+        Layout = doc.Layout == "none"
+            ? null
+            : doc.Layout;
+    ViewData["Title"] = doc.Title;
+}
+
+<link rel="stylesheet" href="css/typography.css">
+<section class="flex-col md:flex-row flex justify-center mt-16 mb-16 md:mb-12">
+    <h1 class="text-4xl tracking-tight font-extrabold text-gray-900">
+        @doc.Title
+    </h1>
+</section>    
+<div class="mx-auto">
+    <div class="mx-auto prose lg:prose-xl mb-24">
+        @Html.Raw(doc.Preview)
+    </div>
+</div>
+
+@await Html.PartialAsync("HighlightIncludes")
+<script>hljs.highlightAll()</script>
+```
+
+Which uses a custom layout if one is defined in its frontmatter which 
+[speaking.md](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/_pages/speaking.md) utilizes in its **layout** frontmatter:
+
+```yaml
+---
+title: Speaking
+layout: _LayoutContent
+---
+```
+
+To render the page using [_LayoutContent.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Shared/_LayoutContent.cshtml)
+visible by the background backdrop in its [/speaking](https://razor-ssg.web-templates.io/speaking) page.
+
+## What's New Feature
+
+The [/whatsnew](https://razor-ssg.web-templates.io/whatsnew) page is an example of creating a custom Markdown feature to implement a portfolio or a product releases page
+where a new folder is created per release, containing both release date and release or project name, with all features in that release 
+maintained markdown content sorted in alphabetical order:
+
+### [/_whatsnew](https://github.com/NetCoreTemplates/razor-ssg/tree/main/MyApp/_whatsnew)
+
+- **/2023-03-08_Animaginary**
+  - feature1.md 
+- **/2023-03-18_OpenShuttle**
+   - feature1.md
+- **/2023-03-28_Planetaria**
+   - feature1.md 
+
+What's New follows the same structure as Pages feature which is loaded in:
+
+ - [Markdown.WhatsNew.cs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Markdown.WhatsNew.cs)
+
+and rendered in:
+- [WhatsNew.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/WhatsNew.cshtml)
+
+## Blog Feature
+
+The blog maintains its markdown posts in a flat folder which each Markdown post containing its publish date and URL slug it 
+should be published under:
+
+### [/_posts](https://github.com/NetCoreTemplates/razor-ssg/tree/main/MyApp/_posts)
+
+ - ...
+ - 2023-01-21_start.md
+ - 2023-03-21_javascript.md
+ - 2023-03-28_razor-ssg.md
+
+As the Blog has more features it requires a larger [Markdown.Blog.cs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Markdown.Blog.cs)
+to load its Markdown posts that is rendered in several different Razor Pages for each of its Views:
+
+| Page | Description | Example |
+| - | - | - |
+| [Blog.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Blog.cshtml) | Main Blog layout | [/blog](https://razor-ssg.web-templates.io/blog) | 
+| [Posts/Index.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Posts/Index.cshtml) | Navigable Archive grid of Posts | [/posts](https://razor-ssg.web-templates.io/posts) | 
+| [Posts/Post.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Posts/Post.cshtml) | Individual Blog Post (like this!) | [/posts/razor-ssg](https://razor-ssg.web-templates.io/posts/razor-ssg) |
+| [Author.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Posts/Author.cshtml) | Display Posts by Author | [/posts/author/lucy-bates](https://razor-ssg.web-templates.io/posts/author/lucy-bates) | 
+| [Tagged.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Posts/Tagged.cshtml) | Display Posts by Tag | [/posts/tagged/markdown](https://razor-ssg.web-templates.io/posts/tagged/markdown) |
+| [Year.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Posts/Year.cshtml) | Display Posts by Year | [/posts/year/2023](https://razor-ssg.web-templates.io/posts/year/2023) |
+
+### General Features
+
+Most unique markdown features are captured in their Markdown's frontmatter metadata, but in general these features
+are broadly available for all features:
+
+ - **Live Reload** - Latest Markdown content is displayed during **Development** 
+ - **Custom Layouts** - Render post in custom Razor Layout with `layout: _LayoutAlt`
+ - **Drafts** - Prevent posts being worked on from being published with `draft: true`
+ - **Future Dates** - Posts with a future date wont be published until that date
+
+### Initializing and Loading Markdown Features
+
+All markdown features are initialized in the same way in [Configure.Ssg.cs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Configure.Ssg.cs)
+where they're registered in ASP.NET Core's IOC and initialized after the App's plugins are loaded
+by injecting with the App's [Virtual Files provider](https://docs.servicestack.net/virtual-file-system)
+before using it to read from the directory where the markdown content for each feature is maintained: 
+
+```csharp
+public class ConfigureSsg : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices(services =>
+        {
+            services.AddSingleton<RazorPagesEngine>();
+            services.AddSingleton<MarkdownPages>();
+            services.AddSingleton<MarkdownWhatsNew>();
+            services.AddSingleton<MarkdownBlog>();
+        })
+        .ConfigureAppHost(afterPluginsLoaded: appHost => {
+            var pages = appHost.Resolve<MarkdownPages>();
+            var whatsNew = appHost.Resolve<MarkdownWhatsNew>();
+            var blogPosts = appHost.Resolve<MarkdownBlog>();
+            
+            var features = new IMarkdownPages[] { pages, whatsNew, blogPosts }; 
+            features.Each(x => x.VirtualFiles = appHost.VirtualFiles);
+
+            // Custom initialization
+            blogPosts.Authors = Authors;
+
+            // Load feature markdown content
+            pages.LoadFrom("_pages");
+            whatsNew.LoadFrom("_whatsnew");
+            blogPosts.LoadFrom("_posts");
+        });
+    });
+    //...
+}
+```
+
+These dependencies are then injected in the feature's Razor Pages to query and render the loaded markdown content.
+
+### Custom Frontmatter
+
+You can extend the `MarkdownFileInfo` type used to maintain the markdown content and metadata of each loaded Markdown file
+by adding any additional metadata you want included as C# properties on:
+
+```csharp
+// Add additional frontmatter info to include
+public class MarkdownFileInfo : MarkdownFileBase
+{
+}
+```
+
+Any additional properties are automatically populated using ServiceStack's 
+[built-in Automapping](https://docs.servicestack.net/auto-mapping) which includes rich support for converting string frontmatter 
+values into native .NET types.
+
+### Updating to latest versions
+
+You can easily update all the JavaScript dependencies used in 
+[postinstall.js](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/postinstall.js) by running:
+
+:::sh
+node postinstall.js
+:::
+
+This will also update the Markdown features `*.cs` implementations which is delivered as source files instead of an external
+NuGet package to enable full customization, easier debugging whilst supporting easy upgrades. 
+
+If you do customize any of the `.cs` files, you'll want to exclude them from being updated by removing them from:
+
+```js
+const hostFiles = [
+    'Markdown.Blog.cs',
+    'Markdown.Pages.cs',
+    'Markdown.WhatsNew.cs',
+    'MarkdownPagesBase.cs',
+]
+```
+
+### Markdown Tag Helper
+
+The included [MarkdownTagHelper.cs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/MarkdownTagHelper.cs) can be used
+in hybrid Razor Pages like [About.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/About.cshtml) 
+to render the [/about](https://razor-ssg.web-templates.io/about) page which requires the flexibility of Razor Pages with a static content component which you 
+prefer to maintain inline with Markdown.
+
+The `<markdown />` tag helper renders plain HTML, which you can apply [Tailwind's @typography](https://tailwindcss.com/docs/typography-plugin) 
+styles by including **typography.css** and annotating it with your preferred `prose` variant, e.g:
+
+```html
+<link rel="stylesheet" href="css/typography.css">
+<markdown class="prose">
+  Markdown content...
+</markdown>
+```
+
+## Static Static Generation (SSG)
+
+All features up till now describes how this template implements a Markdown powered Razor Pages .NET application, where this template
+differs in its published output, where instead of a .NET App deployed to a VM or App server it generates static `*.html` files that's
+bundled together with `/wwwroot` static assets in the `/dist` folder that can be previewed by launching a HTTP Server from that
+folder with the built-in npm script:
+
+:::sh
+npm run serve
+:::
+
+To run **npx http-server** on `http://localhost:8080` that you can open in a browser to preview the published version of your 
+site as it would be when hosted on a CDN.
+
+### Static Razor Pages
+
+The static generation functionality works by scanning all your Razor Pages and prerendering the pages with prerendering instructions.
+
+### Pages with Static Routes
+
+Pages with static routes can be marked to be prerendered by annotating it with the `[RenderStatic]` attribute as done in
+[About.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/About.cshtml):
+
+```csharp
+@page "/about"
+@attribute [RenderStatic]
+```
+
+Which saves the pre-rendered page using the pages route with a .html suffix, e.g: `/{@page route}.html` whilst pages with static
+routes with a trailing `/` are saved to `/{@page route}/index.html` as done for 
+[Posts/Index.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Posts/Index.cshtml):
+
+```csharp
+@page "/posts/"
+@attribute [RenderStatic]
+```
+
+#### Explicit generated paths
+
+To keep the generated pages in-sync with using the same routes as your Razor Pages in development it's recommended to use the implied
+rendered paths, but if preferred you can specify which path the page should be rendered to instead with:
+
+```csharp
+@page "/posts/"
+@attribute [RenderStatic("/posts/index.html")]
+```
+
+### Pages with Dynamic Routes
+
+Prerendering dynamic pages follows [Next.js getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) 
+convention which you can implement using `IRenderStatic<PageModel>` by returning a Page Model for each page that should be generated
+as done in [Posts/Post.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Posts/Post.cshtml) and
+[Page.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Page.cshtml):
+
+```csharp
+@page "/{slug}"
+@model MyApp.Page
+
+@implements IRenderStatic<MyApp.Page>
+@functions {
+    public List<Page> GetStaticProps(RenderContext ctx)
+    {
+        var markdown = ctx.Resolve<MarkdownPages>();
+        return markdown.VisiblePages.Map(page => new Page { Slug = page.Slug! });
+    }
+}
+...
+```
+
+In this case it returns a Page Model for every **Visible** markdown page in 
+[/_pages](https://github.com/NetCoreTemplates/razor-ssg/tree/main/MyApp/_pages) that ends up rendering the following pages in `/dist`:
+
+ - `/privacy.html`
+ - `/speaking.html`
+ - `/uses.html`
+
+### Limitations
+
+The primary limitations for developing statically generated Apps is that a **snapshot** of entire App is generated at deployment, 
+which prohibits being able to render different content **per request**, e.g. for Authenticated users which would require executing
+custom JavaScript after the page loads to dynamically alter the page's initial content.
+
+Otherwise in practice you'll be able develop your Razor Pages utilizing Razor's full feature-set, the primary concessions stem
+from Pages being executed in a static context which prohibits pages from returning dynamic content per request, instead any
+"different views" should be maintained in separate pages.
+
+#### No QueryString Params
+
+As the generated pages should adopt the same routes as your Razor Pages you'll need to avoid relying on **?QueryString** params
+and instead capture all required parameters for a page in its **@page route** as done for:
+
+[Posts/Author.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Posts/Author.cshtml)
+
+```csharp
+@page "/posts/author/{slug}"
+@model AuthorModel
+@inject MarkdownBlog Blog
+
+@implements IRenderStatic<AuthorModel>
+@functions {
+    public List<AuthorModel> GetStaticProps(RenderContext ctx) => ctx.Resolve<MarkdownBlog>()
+        .AuthorSlugMap.Keys.Map(x => new AuthorModel { Slug = x });
+}
+...
+```
+
+Which lists all posts by an Author, e.g: [/posts/author/lucy-bates](https://razor-ssg.web-templates.io/posts/author/lucy-bates), likewise required for:
+
+[Posts/Tagged.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Posts/Tagged.cshtml)
+
+```csharp
+@page "/posts/tagged/{slug}"
+@model TaggedModel
+@inject MarkdownBlog Blog
+
+@implements IRenderStatic<TaggedModel>
+@functions {
+    public List<TaggedModel> GetStaticProps(RenderContext ctx) => ctx.Resolve<MarkdownBlog>()
+        .TagSlugMap.Keys.Map(x => new TaggedModel { Slug = x });
+}
+...
+```
+
+Which lists all related posts with a specific tag, e.g: [/posts/tagged/markdown](https://razor-ssg.web-templates.io/posts/tagged/markdown), and for:
+
+[Posts/Year.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Posts/Year.cshtml)
+
+```csharp
+@page "/posts/year/{year}"
+@model YearModel
+@inject MarkdownBlog Blog
+
+@implements IRenderStatic<YearModel>
+@functions {
+    public List<YearModel> GetStaticProps(RenderContext ctx) => ctx.Resolve<MarkdownBlog>()
+        .VisiblePosts.Select(x => x.Date.GetValueOrDefault().Year)
+            .Distinct().Map(x => new YearModel { Year = x });
+}
+
+...
+```
+
+Which lists all posts published in a specific year, e.g: [/posts/year/2023](https://razor-ssg.web-templates.io/posts/year/2023).
+
+Conceivably these "different views" could've been implemented by the same page with different `?author`, `?tag` and `?year`
+QueryString params, but are instead extracted into different pages to support its statically generated `*.html` outputs.
+
+## Prerendering Task
+
+The **prerender** [AppTask](https://docs.servicestack.net/app-tasks) that pre-renders the entire website is also registered in
+[Configure.Ssg.cs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Configure.Ssg.cs):
+
+```csharp
+  .ConfigureAppHost(afterAppHostInit: appHost =>
+  {
+      // prerender with: `$ npm run prerender` 
+      AppTasks.Register("prerender", args =>
+      {
+          var distDir = appHost.ContentRootDirectory.RealPath.CombineWith("dist");
+          if (Directory.Exists(distDir))
+              FileSystemVirtualFiles.DeleteDirectory(distDir);
+          FileSystemVirtualFiles.CopyAll(
+              new DirectoryInfo(appHost.ContentRootDirectory.RealPath.CombineWith("wwwroot")),
+              new DirectoryInfo(distDir));
+          var razorFiles = appHost.VirtualFiles.GetAllMatchingFiles("*.cshtml");
+          RazorSsg.PrerenderAsync(appHost, razorFiles, distDir).GetAwaiter().GetResult();
+      });
+  });
+  //...
+```
+
+Which we can see:
+1. Deletes `/dist` folder
+2. Copies `/wwwroot` contents into `/dist`
+3. Passes all App's Razor `*.cshtml` files to `RazorSsg` to do the pre-rendering
+
+Where it processes all pages with `[RenderStatic]` and `IRenderStatic<PageModel>` prerendering instructions to the 
+specified `/dist` folder.
+
+### Previewing prerendered site
+
+To preview your SSG website, run the prerendered task with:  
+
+:::sh
+npm run prerender
+:::
+
+Which renders your site to `/_dist` which you can run a HTTP Server from with:
+
+:::sh
+npm run serve
+:::
+
+That you can preview with your browser at `http://localhost:8080`.
+
+### Publishing
+
+The included [build.yml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/.github/workflows/build.yml) GitHub Action
+takes care of running the prerendered task and deploying it to your Repo's GitHub Pages where it will be available at:
+
+    https://$org_name.github.io/$repo/
+
+Alternatively you can use a [Custom domain for GitHub Pages](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages)
+by registering a CNAME DNS entry for your preferred Custom Domain, e.g:
+
+| Record | Type | Value | TTL|
+| - | - | - | - |
+| **mydomain.org** | CNAME | **org_name**.github.io | 3600 |
+
+That you can either [configure in your Repo settings](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain)
+or if you prefer to maintain it with your code-base, save the domain name to `/wwwroot/CNAME`, e.g:
+
+```
+www.mydomain.org
+```
+
+### Benefits after migrating from Jekyll
+
+Whilst still only at **v1** release, we found it already had a number of advantages over the existing Jekyll static website:
+
+ - Faster live reloads
+ - C#/Razor more type-save & productive than Ruby/Liquid
+ - Greater flexibility in implementing new features
+ - Better IDE support (from Rider)
+ - Ability to reuse our .NET libraries
+ - Better development experience
+
+The last point ultimately prompted seeking an alternative solution as previously Jekyll was used from Windows/WSL which 
+was awkward to manage from a different filesystem with Jekyll upgrades breaking RubyMine support forcing the use of 
+text editors to maintain its code-base and content.
+
+### Used by the new [servicestack.net](https://servicestack.net)
+
+Deterred by the growing complexity of current SSG solutions, we decided to create a new solution using C#/Razor 
+(our preferred technology for generating server HTML) with a clean implementation that allowed full control
+with an **npm dependency-free** solution letting us adopt our preferred approach to 
+[Simple, Modern JavaScript](https://servicestack.net/posts/javascript) without any build-tooling or SPA complexity.
+
+We're happy with the results of [https://servicestack.net](https://servicestack.net) new Razor SSG website:
+
+[![](https://servicestack.net/img/posts/razor-ssg/servicestack.net.png)](https://servicestack.net)
+
+A clean, crisp code-base utilizing simple JS Module Vue 3 components, the source code of which is publicly maintained at:
+
+- [https://github.com/servicestack/servicestack.net](https://github.com/servicestack/servicestack.net)
+
+Which serves as a good example at how well this template scales for larger websites.
+
+#### Markdown Videos Feature
+
+It only needed one new Markdown feature to display our growing video library:
+
+ - [/_videos](https://github.com/ServiceStack/servicestack.net/tree/main/MyApp/_videos) - Directory of Markdown Video collections 
+ - [Markdown.Videos.cs](https://github.com/ServiceStack/servicestack.net/blob/main/MyApp/Markdown.Videos.cs) - Loading Video feature markdown content
+ - [Shared/VideoGroup.cshtml](https://github.com/ServiceStack/servicestack.net/blob/main/MyApp/Pages/Shared/VideoGroup.cshtml) - Razor Page for displaying Video Collection
+
+Which you're free to reuse in your own websites needing a similar feature.
+
+#### Feedback & Feature Requests Welcome
+
+In future we'll look at expanding this template with generic Markdown features suitable for websites, blogs & portfolios, 
+or maintain a shared community collection if there ends up being community contributions of Razor SSG & Markdown features.
+
+In the meantime, we welcome any feedback or new feature requests at:
+
+### [https://servicestack.net/ideas](https://servicestack.net/ideas)
diff --git a/MyApp/_posts/2023-08-23_razor-ssg-new-blog-features.md b/MyApp/_posts/2023-08-23_razor-ssg-new-blog-features.md
new file mode 100644
index 0000000..e0fda55
--- /dev/null
+++ b/MyApp/_posts/2023-08-23_razor-ssg-new-blog-features.md
@@ -0,0 +1,337 @@
+---
+title: New Blogging features in Razor SSG
+summary: Explore the new Blogging Features in Razor SSG
+tags: [razor, markdown, blog, dev]
+image: https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?crop=entropy&fit=crop&h=1000&w=2000
+author: Lucy Bates
+---
+
+## New Blogging features in Razor SSG
+
+[Razor SSG](https://razor-ssg.web-templates.io) is our Free Project Template for creating fast, statically generated Websites and Blogs with
+Markdown & C# Razor Pages. A benefit of using Razor SSG to maintain this 
+[servicestack.net(github)](https://github.com/ServiceStack/servicestack.net) website is that any improvements added
+to our website end up being rolled into the Razor SSG Project Template for everyone else to enjoy.
+
+This latest release brings a number of features and enhancements to improve Razor SSG usage as a Blogging Platform -
+a primary use-case we're focused on as we pen our [22nd Blog Post for the year](https://servicestack.net/posts/year/2023) with improvements
+in both discoverability and capability of blog posts:
+
+### RSS Feed
+
+Razor SSG websites now generates a valid RSS Feed for its blog to support their readers who'd prefer to read blog posts
+and notify them as they're published with their favorite RSS reader:
+
+<div class="not-prose my-8">
+   <a href="https://razor-ssg.web-templates.io/feed.xml">
+      <div class="block flex justify-center shadow hover:shadow-lg rounded overflow-hidden">
+         <img class="max-w-3xl py-8" src="https://servicestack.net/img/posts/razor-ssg/valid-rss.png">
+      </div>
+   </a>
+    <div class="mt-4 flex justify-center">
+        <a class="text-indigo-600 hover:text-indigo-800" href="https://razor-ssg.web-templates.io/feed.xml">https://razor-ssg.web-templates.io/feed.xml</a>
+        <a class="ml-4 text-indigo-600 hover:text-indigo-800" href="https://servicestack.net/feed.xml">https://servicestack.net/feed.xml</a>
+    </div>
+</div>
+
+### Meta Headers support for Twitter cards and SEO
+
+Blog Posts and Pages now include additional `<meta>` HTML Headers to enable support for 
+[Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards) in both
+Twitter and Meta's new [threads.net](https://threads.net), e.g:
+
+<div class="not-prose my-8 flex justify-center">
+   <a class="block max-w-2xl" href="https://www.threads.net/@servicestack/post/CvIFobPBs5h">
+      <div class="block flex justify-center shadow hover:shadow-lg rounded overflow-hidden">
+         <img class="py-8" src="https://servicestack.net/img/posts/razor-ssg/twitter-cards.png">
+      </div>
+   </a>
+</div>
+
+### Improved Discoverability
+
+To improve discoverability and increase site engagement, bottom of blog posts now include links to other posts by
+the same Blog Author, including links to connect to their preferred social networks and contact preferences:
+
+![](https://servicestack.net/img/posts/razor-ssg/other-author-posts.png)
+
+### Posts can include Vue Components
+
+Blog Posts can now embed any global Vue Components directly in its Markdown, e.g: 
+
+```html
+<getting-started template="razor-ssg"></getting-started>
+```
+
+#### [/mjs/components/GettingStarted.mjs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/wwwroot/mjs/components/GettingStarted.mjs)
+
+<div class="not-prose my-20 flex justify-center">
+    <getting-started template="razor-ssg"></getting-started>
+</div>
+
+#### Individual Blog Post dependencies
+
+Just like Pages and Docs they can also include specific JavaScript **.mjs** or **.css** in the `/wwwroot/posts` folder
+which will only be loaded for that post:
+
+<file-layout :files="{
+    wwwroot: { 
+        posts: { _: ['<slug>.mjs','<slug>.css'] },
+    }
+}"></file-layout>
+
+Now posts that need it can dynamically load large libraries like [Chart.js](https://www.chartjs.org) and use it 
+inside a custom Vue component by creating a custom `/posts/<slug>.mjs` that exports what components and features
+your blog post needs, e.g:
+
+#### [/posts/new-blog-features.mjs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/wwwroot/posts/new-blog-features.mjs)
+
+```js
+import ChartJs from './components/ChartJs.mjs'
+
+export default {
+    components: { ChartJs }
+}
+```
+
+In this case it enables support for [Chart.js](https://www.chartjs.org) by including a custom Vue component that makes it
+easy to create charts from Vue Components embedded in markdown:
+
+#### [/posts/components/ChartJs.mjs](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/wwwroot/posts/components/ChartJs.mjs)
+
+```js
+import { ref, onMounted } from "vue"
+import { addScript } from "@servicestack/client"
+
+let loadJs = addScript('https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js')
+
+export default {
+    template:`<div><canvas ref="chart"></canvas></div>`,
+    props:['type','data','options'],
+    setup(props) {
+        const chart = ref()
+        onMounted(async () => {
+            await loadJs
+
+            const options = props.options || {
+                responsive: true,
+                legend: {
+                    position: "top"
+                }
+            }
+            new Chart(chart.value, {
+                type: props.type || "bar",
+                data: props.data,
+                options,
+            })
+
+        })
+        return { chart }
+    }
+}
+```
+
+Which allows this post to embed Chart.js charts using the above custom `<chart-js>` Vue component and a JS Object literal, e.g: 
+
+```html
+<chart-js :data="{
+    labels: [
+        //...
+    ],
+    datasets: [
+        //...
+    ]
+}"></chart-js>
+```
+
+Which the [Bulk Insert Performance](https://servicestack.net/posts/bulk-insert-performance) Blog Post uses extensively to embeds its
+Chart.js Bar charts:
+
+<chart-js :data="{
+    labels: [
+        '10,000 Rows',
+        '100,000 Rows'
+    ],
+    datasets: [
+        {
+            label: 'SQLite Memory',
+            backgroundColor: 'rgba(201, 203, 207, 0.2)',
+            borderColor: 'rgb(201, 203, 207)',
+            borderWidth: 1,
+            data: [17.066, 166.747]
+        },
+        {
+            label: 'SQLite Disk',
+            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+            borderColor: 'rgb(255, 99, 132)',
+            borderWidth: 1,
+            data: [20.224, 199.697]
+        },
+        {
+            label: 'PostgreSQL',
+            backgroundColor: 'rgba(153, 102, 255, 0.2)',
+            borderColor: 'rgb(153, 102, 255)',
+            borderWidth: 1,
+            data: [14.389, 115.645]
+        },
+        {
+            label: 'MySQL',
+            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+            borderColor: 'rgb(54, 162, 235)',
+            borderWidth: 1,
+            data: [64.389, 310.966]
+        },
+        {
+            label: 'MySqlConnector',
+            backgroundColor: 'rgba(255, 159, 64, 0.2)',
+            borderColor: 'rgb(255, 159, 64)',
+            borderWidth: 1,
+            data: [64.427, 308.574]
+        },
+        {
+            label: 'SQL Server',
+            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+            borderColor: 'rgb(255, 99, 132)',
+            borderWidth: 1,
+            data: [89.821, 835.181]
+        }
+    ]
+}"></chart-js>
+
+### New Markdown Containers
+
+[Custom Containers](https://github.com/xoofx/markdig/blob/master/src/Markdig.Tests/Specs/CustomContainerSpecs.md) 
+are a popular method for implementing Markdown Extensions for enabling rich, wrist-friendly consistent 
+content in your Markdown documents.
+
+Most of [VitePress Markdown Containers](https://vitepress.dev/guide/markdown#custom-containers)
+are also available in Razor SSG websites for enabling rich, wrist-friendly consistent markup in your Markdown pages, e.g:
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+:::copy
+Copy Me!
+:::
+```
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+:::copy
+Copy Me!
+:::
+
+See Razor Press's [Markdown Containers docs](https://razor-press.web-templates.io/containers) for the complete list of available containers and examples on how to 
+implement your own [Custom Markdown containers](https://razor-press.web-templates.io/containers#implementing-block-containers).
+
+### Support for Includes
+
+Markdown fragments can be added to `_pages/_include` - a special folder rendered with
+[Pages/Includes.cshtml](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Includes.cshtml) using
+an [Empty Layout](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/Pages/Shared/_LayoutEmpty.cshtml)
+which can be included in other Markdown and Razor Pages or fetched on demand with Ajax.
+
+Markdown Fragments can be then included inside other markdown documents with the `::include` inline container, e.g:
+
+:::pre
+::include vue/formatters.md::
+:::
+
+Where it will be replaced with the HTML rendered markdown contents of fragments maintained in `_pages/_include`.
+
+### Include Markdown in Razor Pages
+
+Markdown Fragments can also be included in Razor Pages using the custom `MarkdownTagHelper.cs` `<markdown/>` tag:
+
+```html
+<markdown include="vue/formatters.md"></markdown>
+```
+
+### Inline Markdown in Razor Pages
+
+Alternatively markdown can be rendered inline with:
+
+```html
+<markdown>
+## Using Formatters
+
+Your App and custom templates can also utilize @servicestack/vue's
+[built-in formatting functions](href="/vue/use-formatters).
+</markdown>
+```
+
+### Light and Dark Mode Query Params
+
+You can link to Dark and Light modes of your Razor SSG website with the `?light` and `?dark` query string params:
+
+- [https://razor-ssg.web-templates.io/?dark](https://razor-ssg.web-templates.io/?dark)
+- [https://razor-ssg.web-templates.io/?light](https://razor-ssg.web-templates.io/?light)
+
+### Blog Post Authors threads.net and Mastodon links
+
+The social links for Blog Post Authors can now include [threads.net](https://threads.net) and [mastodon.social](https://mastodon.social) links, e.g:
+
+```json
+{
+  "AppConfig": {
+    "BlogImageUrl": "https://servicestack.net/img/logo.png",
+    "Authors": [
+      {
+        "Name": "Lucy Bates",
+        "Email": "lucy@email.org",
+        "ProfileUrl": "img/authors/author1.svg",
+        "TwitterUrl": "https://twitter.com/lucy",
+        "ThreadsUrl": "https://threads.net/@lucy",
+        "GitHubUrl": "https://github.com/lucy",
+        "MastodonUrl": "https://mastodon.social/@lucy"
+      }
+    ]
+  }
+}
+```
+
+## Feature Requests Welcome
+
+Most of Razor SSG's features are currently being driven by requirements from the new 
+[Websites built with Razor SSG](https://razor-ssg.web-templates.io/#showcase) and features we want available in our Blogs, 
+we welcome any requests for missing features in other popular Blogging Platforms you'd like to see in Razor SSG to help 
+make it a high quality blogging solution built with our preferred C#/.NET Technology Stack, by submitting them to:
+
+:::{.text-indigo-600 .text-3xl .text-center}
+[https://servicestack.net/ideas](https://servicestack.net/ideas)
+:::
+
+### SSG or Dynamic Features
+
+Whilst statically generated websites and blogs are generally limited to features that can be generated at build time, we're able to
+add any dynamic features we need in [CreatorKit](https://servicestack.net/creatorkit/) - a Free companion self-host .NET App Mailchimp and Disqus 
+alternative which powers any dynamic functionality in Razor SSG Apps like the blogs comments and Mailing List features 
+in this Blog Post.
diff --git a/MyApp/_posts/2023-11-20_net8-blazor-template.md b/MyApp/_posts/2023-11-20_net8-blazor-template.md
new file mode 100644
index 0000000..42bd663
--- /dev/null
+++ b/MyApp/_posts/2023-11-20_net8-blazor-template.md
@@ -0,0 +1,98 @@
+---
+title: New .NET 8 Blazor Tailwind Template
+summary: The new Blazor for .NET 8 template streamlines web UI development in C#.
+tags: [dotnet, blazor, templates]
+image: https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?crop=entropy&fit=crop&h=1000&w=2000
+author: Lucy Bates
+---
+
+With the release of **.NET 8**, we're happy to announce ServiceStack's new [Blazor](https://blazor.web-templates.io/)
+Tailwind project template that takes advantage of .NET 8 Blazor's new features that redefines modern Web Development in C#.
+
+In this video overview we'll explore how the template, adopts Blazor's familiar **ASP.NET Core Identity** 
+for its authentication, utilizes the modern [Tailwind CSS](https://tailwindcss.com) framework for beautiful responsive design
+and adopts .NET's best-practice
+[Docker Containerization](https://learn.microsoft.com/en-us/dotnet/core/docker/publish-as-container) support for its built-in
+[GitHub Action Deployments](https://blazor.web-templates.io/deploy) which enables a simple ready-made CI solution for deployment to any
+Linux Host via SSH and Docker compose.
+
+We’ll also discuss the project's structure, usage of **ASP.NET Core Identity** for Authorization and utilizing
+**ServiceStack Blazor Components** for data handling, all integrated to maximize developer efficiency in building Web Applications.
+
+<div class="not-prose mt-16 flex flex-col items-center">
+   <div class="flex">
+      <svg class="w-28 h-28 text-purple-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M23.834 8.101a13.912 13.912 0 0 1-13.643 11.72a10.105 10.105 0 0 1-1.994-.12a6.111 6.111 0 0 1-5.082-5.761a5.934 5.934 0 0 1 11.867-.084c.025.983-.401 1.846-1.277 1.871c-.936 0-1.374-.668-1.374-1.567v-2.5a1.531 1.531 0 0 0-1.52-1.533H8.715a3.648 3.648 0 1 0 2.695 6.08l.073-.11l.074.121a2.58 2.58 0 0 0 2.2 1.048a2.909 2.909 0 0 0 2.695-3.04a7.912 7.912 0 0 0-.217-1.933a7.404 7.404 0 0 0-14.64 1.603a7.497 7.497 0 0 0 7.308 7.405s.549.05 1.167.035a15.803 15.803 0 0 0 8.475-2.528c.036-.025.072.025.048.061a12.44 12.44 0 0 1-9.69 3.963a8.744 8.744 0 0 1-8.9-8.972a9.049 9.049 0 0 1 3.635-7.247a8.863 8.863 0 0 1 5.229-1.726h2.813a7.915 7.915 0 0 0 5.839-2.578a.11.11 0 0 1 .059-.034a.112.112 0 0 1 .12.053a.113.113 0 0 1 .015.067a7.934 7.934 0 0 1-1.227 3.549a.107.107 0 0 0-.014.06a.11.11 0 0 0 .073.095a.109.109 0 0 0 .062.004a8.505 8.505 0 0 0 5.913-4.876a.155.155 0 0 1 .055-.053a.15.15 0 0 1 .147 0a.153.153 0 0 1 .054.053A10.779 10.779 0 0 1 23.834 8.1zM8.895 11.628a2.188 2.188 0 1 0 2.188 2.188v-2.042a.158.158 0 0 0-.15-.15Z"></path></svg>
+   </div>
+</div>
+<div class="not-prose mt-4 px-4 sm:px-6">
+<div class="text-center"><h3 id="blazor-template" class="text-4xl sm:text-5xl md:text-6xl tracking-tight font-extrabold text-gray-900">
+    Blazor Tailwind Template
+</h3></div>
+<div class="py-8 max-w-7xl mx-auto px-4 sm:px-6">
+    <lite-youtube class="w-full mx-4 my-4" width="560" height="315" videoid="hqyozHSL0Nk" style="background-image: url('https://img.youtube.com/vi/hqyozHSL0Nk/maxresdefault.jpg')"></lite-youtube>
+</div>
+</div>
+
+<div class="not-prose relative bg-white dark:bg-black py-4">
+    <div class="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
+        <p class="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">Create a new Blazor Tailwind App</p>
+        <p class="mx-auto mt-5 max-w-prose text-xl text-gray-500"> 
+            Create a new Blazor Tailwind project with your preferred project name:
+        </p>
+    </div>
+    <blazor-template repo="NetCoreTemplates/blazor" name="Blazor"></blazor-template>
+</div>
+
+## ASP.NET Core Identity Integration
+
+In terms of security, the template integrates ASP.NET Core Identity, offering a structured approach to authentication,
+including support for email confirmation, two-factor authentication and GDPR compliance features.
+
+Integrating ASP.NET Core Identity doesn't complicate securing ServiceStack services which can still be secured with
+[Declarative Validation Attributes](https://docs.servicestack.net/auth/authentication-and-authorization#declarative-validation-attributes)
+for role-based access control, e.g. using `[ValidateHasRole("Employee")]` directly on Request DTOs, bringing any 
+existing knowledge and experience with ServiceStack Authentication to securing UIs and APIs with Identity Auth.
+
+The template includes a pre-baked solution for sending general and Identity Auth Emails with your configured SMTP Server
+in managed background workers with [Background MQ](https://docs.servicestack.net/background-mq) and an enhanced version of the default 
+ASP.NET Core Blazor Identity UI, with all pages upgraded to use a beautiful Tailwind CSS theme as well as integration with 
+[qrcode.js](https://davidshimjs.github.io/qrcodejs/) 
+for providing a visual QR Code barcode which mobile phone users can easily scan to setup 2FA Authentication:
+
+![](https://servicestack.net/img/posts/net8-best-blazor/blazor-identityauth-qrcode.png)
+
+## Responsive and Interactive UIs with Tailwind CSS
+
+With responsive UI out-of-the-box, thanks to Tailwind CSS, Developers can style their Blazor Apps with the modern 
+popular utility-first CSS framework for creating beautiful, maintainable **Responsive UIs** with **DarkMode** support
+
+It also takes full advantage of Blazor’s static rendering for its Website layout for optimal performance and SEO,
+so only Pages and Components that require interactivity need to opt-in for Blazor Server Interactive rendering modes.
+
+## ServiceStack.Blazor Tailwind Components
+
+The [ServiceStack.Blazor Components](https://blazor-gallery.jamstacks.net), updated for .NET 8 enables you to rapidly
+develop beautiful Blazor Apps integrated with Rich high-productivity UI Tailwind Components like
+[AutoQueryGrid](https://blazor-gallery.servicestack.net/gallery/autoquerygrid) and
+[AutoForms](https://blazor-gallery.servicestack.net/gallery/autoform) which interface with
+[AutoQuery services](https://docs.servicestack.net/autoquery/) to provide a full CRUD data management UI with minimal effort.
+
+## Enhanced Containerization
+
+.NET 8 simplifies Docker integration. Using `dotnet publish`, developers can now automate the creation of Docker images 
+that adhere to best security practices, such as running as a non-root user in containers that can utilize the built-in 
+GitHub Actions to effortlessly deploy their containerized Blazor Apps with Docker and GitHub Registry via SSH to any Linux Server.
+
+## Other Template Features
+
+Other features that enhances the default ASP.NET Blazor App templates with several modern, high-productivity features, include:
+
+- [Entity Framework](https://learn.microsoft.com/ef/) & [OrmLite](https://docs.servicestack.net/ormlite/) - Choose the best ORM for each App feature, with a unified solution that sees [OrmLite's DB Migrations](https://docs.servicestack.net/ormlite/db-migrations) run both EF and OrmLite migrations, inc. Seed Data with a single command at Development or Deployment
+- [SQLite Database](https://www.sqlite.org) - Set up as the default database, it allows developers to start immediately without configuring a separate database server
+- [AutoQuery](https://docs.servicestack.net/autoquery/) - Rapidly developing data-driven APIs, UIs and CRUD Apps
+- [Auto Admin Pages](https://www.youtube.com/watch?v=tt0ytzVVjEY) - Quickly develop your back-office CRUD Admin UIs to manage your App's Database tables at [/admin](https://blazor.web-templates.io/admin)
+- [Markdown](https://docs.servicestack.net/razor-press/syntax) - Maintain SEO-friendly documentation and content-rich pages like this one with just Markdown, beautifully styled with [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin)
+- [Built-in UIs](https://servicestack.net/auto-ui) - Use ServiceStack's Auto UIs to [Explore your APIs](https://docs.servicestack.net/api-explorer) at [/ui](https://blazor.web-templates.io/ui/)
+  or Query your [App's Database Tables](https://docs.servicestack.net/admin-ui-database) at [/admin-ui/database](https://blazor.web-templates.io/admin-ui/database)
+- [Universal API Components](https://youtu.be/66DgLHExC9E) - Effortlessly create reusable, maximally performant universal Blazor API Components that works in Blazor Server and Web Assembly Interactivity modes
+- [Organized Project Structure](https://docs.servicestack.net/physical-project-structure) - Divided into AppHost, Service Interface, Service Model, and Tests projects to promote separation of concerns and maintainability.
\ No newline at end of file
diff --git a/MyApp/_posts/2023-11-22_net8-best-blazor.md b/MyApp/_posts/2023-11-22_net8-best-blazor.md
new file mode 100644
index 0000000..2e73ac5
--- /dev/null
+++ b/MyApp/_posts/2023-11-22_net8-best-blazor.md
@@ -0,0 +1,507 @@
+---
+title: .NET 8's Best Blazor is not Blazor as we know it  
+summary: We explore the exciting new potential of Blazor in .NET 8 to develop fast, interactive Web Apps without compromise    
+tags: [c#, blazor, servicestack]
+image: https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?crop=entropy&fit=crop&h=1000&w=2000
+author: Gayle Smith
+---
+
+The best way to find out what's new in .NET 8 Blazor is to watch the excellent 
+[Full stack web UI with Blazor in .NET 8](https://www.youtube.com/watch?v=QD2-DwuOfKM) presentation by Daniel Roth and Steve Sanderson, 
+which covers how Blazor has become a Full Stack UI Web Technology for developing any kind of .NET Web App.
+
+<div class="flex justify-center">
+    <lite-youtube class="w-full mx-4 my-4" width="560" height="315" videoid="YwZdtLEtROA" style="background-image: url('https://img.youtube.com/vi/YwZdtLEtROA/maxresdefault.jpg')"></lite-youtube>
+</div>
+
+## Your first .NET 8 Blazor App
+
+You don't get to appreciate what this means until you create your first .NET 8 Blazor App where you'll be pleasantly
+surprised that Blazor Apps render fast, clean HTML without needing to load large Web Assembly assets needed for 
+Blazor WebAssembly Apps or starting a stateful Web Socket connection required for Blazor Server Interactive Apps.
+
+This is because the **default rendering mode** for Blazor uses neither of these technologies, instead it returns to 
+traditional Web App development where Blazor Pages now return clean, glorious HTML - courtesy of Blazor's 
+[Static render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes).
+
+[![](https://servicestack.net/img/posts/net8-best-blazor/blazor-ssr.png)](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes)
+
+## Choose your compromise
+
+Previously we were forced to choose upfront whether we wanted to build a Blazor Web Assembly App or a Blazor Server App and
+the compromises that came with them, which for public Internet Web Apps wasn't even a choice as Blazor Server Apps perform poorly
+over high latency Internet connections. 
+
+This meant choosing Blazor Web Assembly Apps which required downloading a large Web Assembly runtime 
+with users experiencing a long delay before the App was functional. To minimize this impact our Blazor WebAssembly Tailwind template 
+included [built-in prerendering](https://blazor-tailwind.jamstacks.net/docs/prerender) where as part of deployment would 
+generate **static .html pages** that were deployed with the Blazor Web Assembly front-end UI that can be hosted on CDN 
+edge networks to further improve load times. 
+
+Whilst this meant the App's UI would be rendered immediately, it still wouldn't be functional until the Web Assembly runtime was 
+downloaded and initialized, which would flicker as the static UI was replaced with Blazor's WASM rendered UI, then later 
+Authenticated users would experience further delay and UI jank whilst the App signs in the Authenticated User. 
+Whilst prerendering is an improvement over Blazor WASM's default blank loading screen, it's still not ideal for public facing Web Apps.
+
+## .NET 8 Blazor is a Game Changer
+
+The situation has greatly improved in .NET 8 where your entire App no longer needs to be bound to a single Interactivity mode.
+Even better, Blazor's default **static rendering** mode results in the best UX where the Website Layout and important 
+landing pages can be rendered instantly.
+
+### Interactive only when you need it
+
+Only pages that need Blazor's interactivity features can opt-in to whichever Blazor interactive rendering mode makes 
+the most sense, either on a page-by-page or component basis, or by choosing `RenderMode.InteractiveAuto` which uses
+**InteractiveWebAssembly** if the WASM runtime is loaded or **InteractiveServer** if it isn't.
+
+### Enhanced Navigation FTW
+
+Ultimately I expect Blazor's new **Enhanced Navigation** is likely the feature that will deliver the biggest UX improvement 
+users will experience given it's enabled by default and gives traditional statically rendered Web Apps instant SPA-like 
+navigation responsiveness where new pages are swapped in without needing to perform expensive full page reloads.
+
+It's beauty lies in being able to do this as a mostly transparent detail without the traditional SPA complexity of needing 
+to manage complex state or client-side routing. It's a smart implementation that's able to perform fine-grained
+DOM updates to only parts of pages that have changed, providing the ultimate UX of preserving page state,
+like populated form fields and scroll position, to deliver a fast and responsive UX that previously wasn't attainable
+from the simplicity of a Server Rendered App.
+
+Its implementation does pose some challenges in implementing certain features, but we'll cover some approaches 
+below we've used to overcome them below.
+
+### Full Stack Web UI
+
+Blazor's static rendering with enhanced navigation and its opt-in flexibility makes .NET 8 Blazor a game changer,
+expanding it from a very niche set of use-cases that weren't too adversely affected by its Interactivity mode downsides,
+to becoming a viable solution for developing any kind of .NET Web App, especially as it can also be utilized within
+existing ASP.NET MVC and Razor Pages Apps.
+
+### Benefits over MVC and Razor Pages
+
+In addition, Blazor's superior component model allows building better encapsulated, more reusable and easier-to-use UI components
+which has enabled Blazor's rich 3rd Party library ecosystem to flourish, that we ourselves utilize to develop
+the high productivity Tailwind Components in the [ServiceStack.Blazor](https://blazor-gallery.servicestack.net) component library.
+
+So far there's only upsides for .NET Web App development, the compromises only kick in when you need Blazor's interactivity features,
+luckily these can now be scoped to just the Pages and Components that need them. But how often do we need them?
+
+### When do you need Blazor's Interactivity features?
+
+It ultimately depends on what App your building, but a lot of Websites can happily display dynamic content, navigate quickly 
+with enhanced navigation, fill out and submit forms - all in Blazor's default static rendering mode.
+
+Not even advanced features like **Streaming Rendering** used in Blazor Template's
+[Weather.razor](https://github.com/dotnet/aspnetcore/blob/v8.0.0-rc.2.23480.2/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Pages/Weather.razor)
+page require interactivity, as its progressive rendered UI updates are achieved in a single request without interactivity.
+
+In fact the only time `@rendermode InteractiveServer` is needed in the default Blazor template is in the 
+[Counter.razor](https://github.com/dotnet/aspnetcore/blob/v8.0.0-rc.2.23480.2/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Pages/Counter.razor#L3)
+page whose C# Event Handling require it.
+
+Ultimately some form of Interactivity is going to be required in order to add behavior or client-side functionality that 
+runs after pages have been rendered, but you still have some options left before being forced to opt into an Interactive Blazor solution.
+
+### Interactive Feature Options
+
+We can see some of these options utilized in the Blazor Template 
+[NavMenu.razor](https://github.com/dotnet/aspnetcore/blob/v8.0.0-rc.2.23480.2/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/NavMenu.razor)
+component which uses JavaScript `onclick` event handlers to add client-side behavior to simulate mouse clicks to toggle UI elements:
+
+```html
+<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+```
+
+and submitting forms to Logout users:
+
+```html
+<LogoutForm id="logout-form" />
+<NavLink class="nav-link" onclick="document.getElementById('logout-form').submit(); return false;">
+    <span class="bi bi-arrow-bar-left" aria-hidden="true"></span> Logout
+</NavLink>
+```
+
+Effectively adding interactivity to Blazor static rendered pages with client-side JavaScript to avoid paying Blazor's Interactivity tax.
+
+#### Avoid using Interactivity in Layouts
+
+This is especially important for any features you want to add to the Websites Layout or Chrome UI which you'll always want to be
+statically rendered so landing pages can load fast and render SEO-friendly server rendered content. 
+
+This meant we couldn't use ServiceStack.Blazor's existing [DarkModeToggle.razor](https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack.Blazor/src/ServiceStack.Blazor/Components/Tailwind/DarkModeToggle.razor)
+component for toggling on/off DarkMode since its statically rendered inside the Websites Layout and requires Interactivity to work.
+
+### Vanilla JS Blazor Components
+
+Fortunately utilizing simple element JavaScript callbacks was enough to be able to re-implement its functionality with Vanilla JS 
+in the new [DarkModeToggleLite.razor](https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack.Blazor/src/ServiceStack.Blazor/Components/Tailwind/DarkModeToggleLite.razor)
+component which works in all Blazor rendering modes, in both full-page or enhanced navigation loads:
+
+```html
+<button type="button" onclick="toggleDarkMode()" class=@ClassNames(DarkModeToggle.ButtonClasses, Class) role="switch" aria-checked="false" @attributes="AdditionalAttributes">
+    <span class="@DarkModeToggle.InnerClasses" data-class-light="translate-x-5" data-class-dark="translate-x-0">
+        <span class="@DarkModeToggle.IconClasses" data-class-light="opacity-0 ease-out duration-100" data-class-dark="opacity-100 ease-in duration-200" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z" /></svg>
+        </span>
+        <span class="@DarkModeToggle.IconClasses" data-class-light="opacity-100 ease-in duration-200" data-class-dark="opacity-0 ease-out duration-100" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-600" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z" /></svg>
+        </span>
+    </span>
+</button>
+
+<script>
+window.toggleDarkMode = (function() {
+    let isDark = localStorage.getItem('color-scheme') === 'dark'
+    const html = document.documentElement
+    function renderDarkMode() {
+        html.style.setProperty('color-scheme', isDark ? 'dark' : null)
+        html.classList.toggle('dark', isDark)
+        document.querySelectorAll('[data-class-light]').forEach(el => {
+            const removeClasses = isDark
+                    ? el.dataset.classLight
+                    : el.dataset.classDark
+            const addClasses = isDark
+                    ? el.dataset.classDark
+                    : el.dataset.classLight
+
+            removeClasses.split(' ').forEach(c => el.classList.remove(c))
+            addClasses.split(' ').forEach(c => el.classList.add(c))
+        })
+    }
+    renderDarkMode()
+
+    document.addEventListener('DOMContentLoaded', () =>
+            Blazor.addEventListener('enhancedload', () => {
+                isDark = localStorage.getItem('color-scheme') === 'dark'
+                html.classList.toggle('dark', isDark)
+                renderDarkMode()
+            }))
+
+    return function() {
+        isDark = !isDark
+        localStorage.setItem('color-scheme', isDark ? 'dark' : 'light')
+        renderDarkMode()
+    }
+})()
+</script>
+```
+
+To support enhanced navigation you'll need to be aware that `<script>` tags are **only executed once** on initial page load.
+You'll instead need to register a callback with Blazor's `enhancedload` event for any startup logic that needs re-executing, 
+which is fired after Blazor merges the new page's DOM with the existing DOM, and is where the `<DarkModeToggleLite>` 
+component re-renders itself with the correct state.
+
+When using callbacks to invoke global functions like this it's recommended to wrap them in an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) 
+for better encapsulation of internal component state and functionality to avoid polluting the global namespace. 
+
+### Try it out!
+
+With that it's ready for action, try it out in a new [blazor](https://github.com/NetCoreTemplates/blazor) Project 
+or from its Live Demo by toggling on/off Dark Mode Component in the top right corner:
+
+<div class="not-prose mt-8 grid grid-cols-2 gap-4">
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://blazor-vue.web-templates.io/?light">
+        <img class="p-2" src="https://servicestack.net/img/posts/net8-best-blazor/blazor-light.webp">
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">blazor-vue.web-templates.io?light</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://blazor-vue.web-templates.io/?dark">
+        <img class="p-2" src="https://servicestack.net/img/posts/net8-best-blazor/blazor-dark.webp">
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">blazor-vue.web-templates.io?dark</div>
+    </a>
+</div>
+
+### Declarative JavaScript Modules  
+
+Unfortunately a lot of other approaches won't work with Blazor's Enhanced Navigation, for example whilst the built-in 
+ASP.NET Identity Pages all work without Blazor's Interactivity, the [EnableAuthenticator.razor](https://github.com/NetCoreTemplates/blazor/blob/main/MyApp/Components/Pages/Account/Manage/EnableAuthenticator.razor)
+page doesn't actually include a solution for providing a visual QR Code barcode which mobile phones can easily scan to 
+setup 2FA Authentication.
+
+Whilst the placeholders are there, that implementation detail is left to us to workout how we best want to implement it 
+within our Apps, perhaps because they don't want to force an Interactivity rendering mode in the default template.
+
+To avoid a degraded UX with Blazor Interactivity you'll naturally want to implement this with JavaScript using the popular 
+[qrcodejs](https://davidshimjs.github.io/qrcodejs/) library by following its instructions and adding a simple inline script to the page:
+
+```html
+<div data-permanent id="qrCode"></div>
+<div id="qrCodeData" data-url="@_authenticatorUri"></div>
+
+<script src="lib/js/qrcode.min.js"></script>
+<script>
+new QRCode(document.getElementById('qrCode'), 
+    document.getElementById('qrCodeData').dataset.url)
+</script>
+```
+
+Whilst this works as expected in full page reloads, it doesn't work in Blazor's Enhanced Navigation as the `<script>` tag
+is only executed once on initial page load and not re-executed when the page is loaded with enhanced navigation.
+
+Your options are to change all links to that page with `data-enhance-nav="false"` to turn off enhanced navigation 
+to that page, or we need to find another way.
+
+The solution that worked best for us is to use declarative instructions to specify which JavaScript modules should be loaded
+for any page, which we can do by adding a `data-module` attribute to any element, e.g:
+
+```html
+<div data-module="pages/Account/Manage/EnableAuthenticator.mjs">
+```
+
+These instructions are then handled by [app.mjs](https://github.com/NetCoreTemplates/blazor/blob/main/MyApp/wwwroot/mjs/app.mjs)
+on each navigation which loads the specified JavaScript module and calls its `load()` function if it exists:
+
+```js
+export async function remount() {
+    document.querySelectorAll('[data-module]').forEach(async el => {
+        let modulePath = el.dataset.module
+        if (!modulePath) return
+        if (!modulePath.startsWith('/') && !modulePath.startsWith('.')) {
+            modulePath = `../${modulePath}`
+        }
+        try {
+            const module = await import(modulePath)
+            if (typeof module.default?.load == 'function') {
+                module.default.load()
+            }
+        } catch (e) {
+            console.error(`Couldn't load module ${el.dataset.module}`, e)
+        }
+    })
+}
+
+document.addEventListener('DOMContentLoaded', () =>
+    Blazor.addEventListener('enhancedload', remount))
+```
+
+Which for `EnableAuthenticator.razor` page loads the 
+[EnableAuthenticator.mjs](https://github.com/NetCoreTemplates/blazor/blob/main/MyApp/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs)
+JavaScript Module which dynamically loads the `qrcode.min.js` library and initializes the QR Code on its exported `load()` function:
+
+```js
+import { addScript, $1 } from "@servicestack/client"
+const loadJs = addScript('lib/js/qrcode.min.js')
+
+export default {
+    async load() {
+        await loadJs
+        new QRCode($1("#qrCode"), $1('#qrCodeData').dataset.url)
+    }
+}
+```
+
+Which now works as expected in both full page reloads and Blazor's Enhanced Navigation:
+
+[![](https://servicestack.net/img/posts/net8-best-blazor/blazor-identityauth-qrcode.png)](https://blazor.web-templates.io/Account/Manage/EnableAuthenticator)
+
+## Blazor without Blazor Interactivity
+
+So right now we have a Blazor App that's predominantly statically rendered, with fast and SEO-friendly without any downsides 
+of the Blazor's Interactivity options, but how much of our App's functionality can we implement without Blazor Interactivity?
+
+### What doesn't work with Enhanced Navigation
+
+As of now we've managed to implement most of the required functionality with Vanilla JS, however for any moderately complex
+UI you'll likely want to use one of the popular JavaScript UI libraries, of which we believe [Vue.js](https://vuejs.org) 
+is the best library for progressively enhancing statically rendered content which offers the best balance of features, 
+performance and size.
+
+The problem being that the natural way to use Vue.js to progressively enhance HTML content doesn't work with Blazor's 
+Enhanced Navigation.
+
+E.g the natural way to implement Blazor's [Counter.razor](https://github.com/NetCoreTemplates/blazor/blob/main/MyApp/Components/Pages/Counter.razor)
+page in Vue is to [implement its UI](https://vuejs.org/guide/essentials/template-syntax.html) in HTML and use JavaScript 
+to mount the component with the element:
+
+```html
+<div id="content">
+    <p class="my-4">Current count: {{currentCount}}</p>
+
+    <primary-button v-on:click="incrementCount">Click me</primary-button>
+</div>
+<script type="module">
+import { ref } from 'vue'
+import { mount } from 'app.mjs'
+
+const App = {
+    setup() {
+        const currentCount = ref(0)
+        const incrementCount = () => currentCount.value++
+
+        return { currentCount, incrementCount }
+    }
+}
+mount('#content', App)
+</script>
+```
+
+Which as you'd expect works in full page reloads, but not with Enhanced Navigation, where no JavaScript
+is re-executed upon navigation, leaving it as inert HTML.
+
+## Declarative Vue Components
+
+Thankfully we can use the same approach we used for loading JavaScript modules to load Vue.js components, by using the 
+`data-component` attribute to specify which **global** Vue component to mount with any properties optionally
+specified in the`data-props` attribute, e.g:
+
+```html
+<div data-component="GettingStarted" data-props="{template:'blazor'}"></div> 
+```
+
+This does require ensuring all components loaded this way are registered as a global component, as done in:
+
+```js
+import GettingStarted from "./components/GettingStarted.mjs"
+
+/** Shared Global Components */
+const Components = {
+    GettingStarted,
+}
+
+export function mount(sel, component, props) {
+    const app = createApp(component, props)
+    Object.keys(Components).forEach(name => {
+        app.component(name, Components[name])
+    })
+    app.mount(document.querySelector(sel))
+}
+```
+
+However this also means that all global components would need to be downloaded before any Vue Components can be rendered
+the first time a website is accessed. Which wont be an issue after the first page is loaded after the browser caches all 
+its JS Module dependencies, but we can do better.
+
+### Lazy Loading Vue Components
+
+To avoid this we can instead use the `data-component` attribute to specify the path to the Vue component to load,
+ensuring that only the Vue components required for the current page is loaded, e.g:
+
+```html
+<div data-component="pages/Counter.mjs"></div> 
+```
+
+Which is how we can implement Vue Components that work in both statically rendered and enhanced navigation pages:
+
+```js
+import { ref } from 'vue'
+
+export default {
+    template: `
+        <p class="my-4">Current count: {{currentCount}}</p>
+
+        <PrimaryButton @click="incrementCount">Click me</PrimaryButton>
+    `,
+    setup() {
+        const currentCount = ref(0)
+        const incrementCount = () => currentCount.value++
+
+        return { currentCount, incrementCount }
+    }
+}
+```
+
+:::{.text-center}
+#### Blazor Counter in Vue.js
+
+<counter></counter>
+:::
+
+## The new Blazor Vue Template 
+
+This ends up being how the Interactive features in the new [blazor-vue](https://github.com/NetCoreTemplates/blazor-vue/) template 
+are implemented - ideal for building fast, SEO-friendly statically rendered Blazor Web Apps where all its dynamic functionally
+uses Vue.js to progressively enhance its static rendered content - eliminating Blazor's current limitations of being able to 
+use Blazor static SSR to implement an entire App with:
+
+![](https://servicestack.net/img/posts/net8-best-blazor/blazor-ssr-advantages.webp)
+
+### Blazor Vue Tailwind Template
+
+The new [blazor-vue](https://github.com/NetCoreTemplates/blazor-vue) template implements all the features of the
+[blazor](https://github.com/NetCoreTemplates/blazor) template but reimplements all its interactive features with
+Vue.js to and the [Vue Components](/vue/) library.
+
+<div class="not-prose mt-16 flex flex-col items-center">
+   <div class="flex">
+      <svg class="w-28 h-28 text-purple-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M23.834 8.101a13.912 13.912 0 0 1-13.643 11.72a10.105 10.105 0 0 1-1.994-.12a6.111 6.111 0 0 1-5.082-5.761a5.934 5.934 0 0 1 11.867-.084c.025.983-.401 1.846-1.277 1.871c-.936 0-1.374-.668-1.374-1.567v-2.5a1.531 1.531 0 0 0-1.52-1.533H8.715a3.648 3.648 0 1 0 2.695 6.08l.073-.11l.074.121a2.58 2.58 0 0 0 2.2 1.048a2.909 2.909 0 0 0 2.695-3.04a7.912 7.912 0 0 0-.217-1.933a7.404 7.404 0 0 0-14.64 1.603a7.497 7.497 0 0 0 7.308 7.405s.549.05 1.167.035a15.803 15.803 0 0 0 8.475-2.528c.036-.025.072.025.048.061a12.44 12.44 0 0 1-9.69 3.963a8.744 8.744 0 0 1-8.9-8.972a9.049 9.049 0 0 1 3.635-7.247a8.863 8.863 0 0 1 5.229-1.726h2.813a7.915 7.915 0 0 0 5.839-2.578a.11.11 0 0 1 .059-.034a.112.112 0 0 1 .12.053a.113.113 0 0 1 .015.067a7.934 7.934 0 0 1-1.227 3.549a.107.107 0 0 0-.014.06a.11.11 0 0 0 .073.095a.109.109 0 0 0 .062.004a8.505 8.505 0 0 0 5.913-4.876a.155.155 0 0 1 .055-.053a.15.15 0 0 1 .147 0a.153.153 0 0 1 .054.053A10.779 10.779 0 0 1 23.834 8.1zM8.895 11.628a2.188 2.188 0 1 0 2.188 2.188v-2.042a.158.158 0 0 0-.15-.15Z"></path></svg>
+   </div>
+</div>
+<div class="not-prose mt-4 px-4 sm:px-6">
+<div class="text-center"><h3 id="blazor-vue-template" class="text-4xl sm:text-5xl md:text-6xl tracking-tight font-extrabold text-gray-900">
+    Blazor Vue Template
+</h3></div>
+<div class="py-8 max-w-7xl mx-auto px-4 sm:px-6">
+    <lite-youtube class="w-full mx-4 my-4" width="560" height="315" videoid="ujbTGn4IwFs" style="background-image: url('https://img.youtube.com/vi/ujbTGn4IwFs/maxresdefault.jpg')"></lite-youtube>
+</div>
+</div>
+
+<div class="not-prose relative bg-white dark:bg-black py-4">
+    <div class="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
+        <p class="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">Create a new Blazor Vue Tailwind App</p>
+        <p class="mx-auto mt-5 max-w-prose text-xl text-gray-500"> 
+            Create a new Blazor Vue Tailwind project with your preferred project name:
+        </p>
+    </div>
+    <blazor-vue-template repo="NetCoreTemplates/blazor-vue" name="Blazor Vue"></blazor-vue-template>
+</div>
+
+#### Faster iterative development
+
+Other benefits of using Vue for Interactivity is the fast iterative feedback loop during development that even applies 
+to its [Markdown-powered Blog](https://blazor-vue.web-templates.io/blog) which itself can embed rich interactive Vue Components and rich JavaScript UIs 
+like Chart.js in its [Markdown Blog Posts](https://blazor-vue.web-templates.io/posts/razor-ssg-new-blog-features) thanks to its unapologetic, complexity-free 
+[#NoBuild](https://world.hey.com/dhh/you-can-t-get-faster-than-no-build-7a44131c) solution.
+
+### Blazor App Tailwind Template
+
+Alternatively the [Blazor Project Template](/posts/net8-blazor-template) is for C# Developers who prefer 
+to use Blazor end-to-end for all App functionality, which uses Blazor Server and 
+[ServiceStack.Blazor Components](https://blazor-gallery.jamstacks.net/) on its Pages requiring Interactivity:
+
+<div class="not-prose shadow rounded-sm p-4">
+    <a href="/posts/net8-blazor-template">
+        <img src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/blazor.png" alt=""></a>
+</div>
+
+Whilst Blazor Interactivity may remain the predominant solution amongst .NET developers we believe .NET 8 Blazor opens the doors
+for progressively enhanced statically-rendered Blazor Apps which has now become our preferred solution for developing
+most .NET Web Apps.
+
+It overcomes our biggest gripe with Blazor Web Assembly, that we were unsuccessful in
+[prerendering away](https://blazor-tailwind.jamstacks.net/docs/prerender) its poor startup performance and UI jank
+in Internet Apps.
+
+## Blazor Vue Diffusion
+
+So when we learned about .NET 8's static default rendering mode and enhanced navigation we jumped at the opportunity to
+create the Blazor Vue template which was used to re-implement Blazor Diffusion with Blazor SSR and Vue.js - a statically 
+rendered Blazor App that uses Vue.js for all its functionality.
+
+<h3 class="not-prose text-center pb-8">
+    <a class="text-4xl text-blue-600 hover:underline" href="https://blazordiffusion.com">https://blazordiffusion.com</a>
+</h3>
+
+[Blazor Diffusion](https://github.com/NetCoreApps/BlazorDiffusion) is our Blazor Demo App we used to showcase how you 
+could use [Universal API Components](https://youtu.be/66DgLHExC9E) to build Blazor Components and entire Blazor Apps
+whose source code runs in both Blazor Server and Blazor Web Assembly Interactive modes, which was first 
+developed with [Blazor Server](https://github.com/NetCoreApps/BlazorDiffusion) then used a 
+[sync.bat](https://github.com/NetCoreApps/BlazorDiffusionWasm/blob/main/sync.bat) script to export its source code into 
+a [Blazor Web Assembly](https://github.com/NetCoreApps/BlazorDiffusionWasm) project that was deployed instead.
+
+The Blazor Vue version starts from a clean slate, utilizing statically rendered Blazor for faster page loads and generating 
+SEO-friendly content:
+
+[![](https://servicestack.net/img/posts/net8-best-blazor/blazordiffusionvue.webp)](https://blazordiffusion.com/)
+
+We're very pleased with the results, much faster loading times, enhanced navigation, no UI jankiness, better SEO - essentially 
+a better UX overall, despite not needing any prerendering solution - all whilst enjoying a faster iterative development experience 
+where all Vue component changes were immediately visible after save.
+
+You can compare the differences of each Blazor Solution from the Live Demos below:
+
+|                     | Live Demo                                                        | Source Code                                                               |
+|---------------------|------------------------------------------------------------------|---------------------------------------------------------------------------|
+| Blazor Vue          | [blazordiffusion.com](https://blazordiffusion.com)               | [BlazorDiffusionVue](https://github.com/NetCoreApps/BlazorDiffusionVue)   |
+| Blazor Web Assembly | [api.blazordiffusion.com](https://api.blazordiffusion.com)       | [BlazorDiffusionWasm](https://github.com/NetCoreApps/BlazorDiffusionWasm) |
+| Blazor Server       | [server.blazordiffusion.com](https://server.blazordiffusion.com) | [BlazorDiffusion](https://github.com/NetCoreApps/BlazorDiffusion)         |
+
+> All Live Demos are hosted on a shared [Hetzner Cloud VM](http://cloud.hetzner.com) using SQLite that's replicated to [Cloudflare R2](https://developers.cloudflare.com/r2/) with [Litestream](https://docs.servicestack.net/ormlite/litestream)
diff --git a/MyApp/_posts/2023-11-28_net8-identity-auth.md b/MyApp/_posts/2023-11-28_net8-identity-auth.md
new file mode 100644
index 0000000..57d83f6
--- /dev/null
+++ b/MyApp/_posts/2023-11-28_net8-identity-auth.md
@@ -0,0 +1,707 @@
+---
+title: ASP.NET Core Identity Auth in .NET 8  
+summary: ServiceStack has switched to ASP.NET Core Identity Auth in new .NET 8 Blazor, Razor and MVC Project Templates  
+tags: [c#, identity-auth, templates]
+image: https://images.unsplash.com/photo-1635602739175-bab409a6e94c?crop=entropy&fit=crop&h=1000&w=2000
+author: Brandon Foley
+---
+
+### ASP.NET Core Identity Auth now the default
+
+A significant change from **ServiceStack v8** is the adoption of the same ASP.NET Core Identity Authentication
+that's configured in Microsoft's default Projects templates in ServiceStack's new Project Templates.
+
+## History of ServiceStack Authentication
+
+ServiceStack has always maintained its own [Authentication and Authorization](https://docs.servicestack.net/auth/authentication-and-authorization) provider model,
+primarily as it was the only way to provide an integrated and unified Authentication model that worked across all our
+supported hosting platforms, inc. .NET Framework, ASP.NET Core on .NET Framework, HttpListener and .NET (fka .NET Core).
+
+Whilst the Authentication story in ASP.NET has undergone several cycles of changes over the years, the ServiceStack
+Auth Model has  remained relatively consistent and stable, with no schema changes required since release whilst still
+providing flexible options for [extending UserAuth tables](https://docs.servicestack.net/auth/auth-repository#extending-userauth-tables) and typed [User Sessions](https://docs.servicestack.net/auth/sessions#using-typed-sessions-in-servicestack).
+
+### .NET Framework considered legacy
+
+Although the multi-platform support of the unified Authentication model has been vital for Organizations migrating their systems
+to .NET (Core) where ServiceStack Customers have been able to enjoy [Exceptional Code reuse](https://docs.servicestack.net/netcore#exceptional-code-reuse),
+it's become clear that the .NET platform (e.g. .NET 8) is the only platform that should be considered for new projects and
+that .NET Framework should only be considered a stable legacy platform for running existing systems on.
+
+Given Microsoft has committed to [Authentication Improvements in .NET 8](https://devblogs.microsoft.com/dotnet/whats-new-with-identity-in-dotnet-8/)
+it's become more important to easily integrate ServiceStack with new and existing .NET projects to access these new features
+than to continue recommending ServiceStack's unified Auth Providers as the default option for new projects.
+
+### ServiceStack will use Identity Auth in new projects 
+
+ASP.NET Core Identity Auth is the default Auth Model adopted in new ServiceStack projects which closely follows the same
+approach as the Microsoft Project Template it integrates ServiceStack with, e.g. the .NET 8
+**Blazor** and **Blazor Vue** project templates adopts the exact same Auth configuration as Microsoft's default Blazor Project
+Template configured with **Individual** Identity Auth, likewise with the **Bootstrap** and **Tailwind** styled **MVC** and
+**Razor Pages** templates.
+
+You can find ServiceStack Integrated Identity Auth Templates for each of ASP.NET Core's major Blazor, Razor Pages and MVC
+Project Templates:
+
+<div class="not-prose mx-auto">
+  <h3 id="identityauth-template" class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900">
+      Create a Project with ASP.NET Identity Auth
+  </h3>
+  <identity-auth-templates></identity-auth-templates>
+</div>
+
+### Identity Auth Template Live Demos
+
+For a quick preview of what these look like, checkout out their Internet Hosted Live Demos:
+
+<div class="not-prose mt-8 grid grid-cols-2 gap-4">
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://blazor.web-templates.io">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/blazor.png">
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">blazor.web-templates.io</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700" href="https://blazor-vue.web-templates.io">
+        <div style="max-height:350px;overflow:hidden">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/blazor-vue.png"></div>
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">blazor-vue.web-templates.io</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700" href="https://razor.web-templates.io">
+        <div style="max-height:350px;overflow:hidden">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/razor.png"></div>
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">razor.web-templates.io</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700" href="https://mvc.web-templates.io">
+        <div style="max-height:350px;overflow:hidden">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/mvc.png"></div>
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">mvc.web-templates.io</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700" href="https://razor-bootstrap.web-templates.io">
+        <div style="max-height:350px;overflow:hidden">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/razor-bootstrap.png"></div>
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">razor-bootstrap.web-templates.io</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700" href="https://mvc-bootstrap.web-templates.io">
+        <div style="max-height:350px;overflow:hidden">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/mvc-bootstrap.png"></div>
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">mvc-bootstrap.web-templates.io</div>
+    </a>
+</div>
+
+
+The configuration and source code for the above projects are a good reference for how to configure ServiceStack with
+Identity Auth in your own projects:
+
+- [blazor](https://github.com/NetCoreTemplates/blazor)
+- [blazor-vue](https://github.com/NetCoreTemplates/blazor-vue)
+- [razor](https://github.com/NetCoreTemplates/razor)
+- [mvc](https://github.com/NetCoreTemplates/mvc)
+- [razor-bootstrap](https://github.com/NetCoreTemplates/razor-bootstrap)
+- [mvc-bootstrap](https://github.com/NetCoreTemplates/mvc-bootstrap)
+
+The **Bootstrap** versions use same Individual Identity Auth Pages that Microsoft's **Razor Pages** and **MVC** templates use,
+whilst the **Tailwind** versions have been enhanced to use **Tailwind CSS** instead of Bootstrap,
+includes a **visual QR Code** implementation that was missing and includes an
+`IEmailSender` SMTP solution that's easily enabled via Configuration to use your preferred **SMTP Server**.
+
+## Migrating to ASP.NET Core Identity Auth
+
+Migrating from ServiceStack Auth to Identity Auth should be relatively straight-forward as ServiceStack uses a compatible
+Identity v2 password hashing format, which should let you migrate your users to Identity Auth without them noticing.
+
+## ServiceStack's Identity Auth Integration
+
+ServiceStack's Identity Auth integration is focused on high compatibility so existing ServiceStack Customers
+require minimal effort to migrate existing code bases to use the new Identity Auth integration, despite Identity Auth
+being an entirely different Auth Provider model and implementation.
+
+It does this by retaining a lot of the existing user-facing Authentication and Session abstractions that ServiceStack APIs
+use for Authorization as well as existing endpoints and Request/Response DTOs that ServiceStack Clients use to Authenticate,
+but replace their internal implementation to use ASP.NET Identity Auth instead.
+
+The new Identity Auth integration is contained in the .NET 6+ **ServiceStack.Extensions** NuGet package:
+
+```xml
+<PackageReference Include="ServiceStack.Extensions" Version="8.*" />
+```
+
+Which at a minimum lets you configure ServiceStack to use Identity Auth by simply registering the existing `AuthFeature`
+plugin with the Application's custom EF `ApplicationUser` Data Model:
+
+```csharp
+Plugins.Add(new AuthFeature(IdentityAuth.For<ApplicationUser>()));
+```
+
+It requires minimal configuration as all Authorization is configured using ASP.NET Core's
+standard APIs, any configuration in this plugin is then just used to customize Identity Auth's integration with ServiceStack.
+
+There's also no new concepts to learn as all ASP .NET Core endpoints, pages and controllers continue to Authenticate against
+the populated `ClaimsPrincipal` whilst all ServiceStack APIs continue to Authenticate against the populated typed
+[User Session](https://docs.servicestack.net/auth/sessions).
+
+The `AuthFeature` works by registering the following Identity Auth Providers:
+
+### Identity Auth Providers
+
+- [IdentityApplicationAuthProvider](https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack/src/ServiceStack.Extensions/Auth/IdentityApplicationAuthProvider.cs) - Converts an Identity Auth `ClaimsPrincipal` into a ServiceStack Session
+- [IdentityCredentialsAuthProvider](https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack/src/ServiceStack.Extensions/Auth/IdentityCredentialsAuthProvider.cs) - Implements ServiceStack's `Authenticate` API using Identity Auth
+- [IdentityJwtAuthProvider](https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack/src/ServiceStack.Extensions/Auth/IdentityJwtAuthProvider.cs) - Converts an Identity Auth JWT into an Authenticated ServiceStack Session
+
+Only the `IdentityApplicationAuthProvider` is registered by default which is required to convert Identity Auth's `ClaimPrincipal`
+into an Authenticated ServiceStack [Session](https://docs.servicestack.net/auth/sessions). The other Auth Providers are required if you want to enable authentication with
+ServiceStack's endpoints. E.g. ServiceStack's [Built-in UIs](https://servicestack.net/auto-ui) would require the Credentials Auth
+to be enabled to authenticate via the built-in Sign In dialogs.
+
+### Configuring Auth Providers
+
+Which is what all the Blazor and MVC Identity Auth templates enable by default in
+[Configure.Auth.cs](https://github.com/NetCoreTemplates/blazor/blob/main/MyApp/Configure.Auth.cs):
+
+```csharp
+public class ConfigureAuth : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureAppHost(appHost => 
+        {
+            appHost.Plugins.Add(new AuthFeature(IdentityAuth.For<ApplicationUser>(
+                // Configure ServiceStack's Integration with Identity Auth
+                options => {
+                    options.EnableCredentialsAuth = true;
+                    options.SessionFactory = () => new CustomUserSession();
+                })
+            ));
+        });
+}
+```
+
+If you're using a `CustomUserSession` you'll also need to register it with the `SessionFactory` for it to be used.
+
+Each of the Identity Auth Providers can also be customized individually:
+
+```csharp
+Plugins.Add(new AuthFeature(IdentityAuth.For<ApplicationUser>(options => {
+        // Configure IdentityApplicationAuthProvider
+        options.AuthApplication...
+
+        // Configure IdentityCredentialsAuthProvider
+        options.EnableCredentialsAuth = true;
+        options.AuthCredentials...
+
+        // Configure IdentityJwtAuthProvider
+        options.EnableJwtAuth = true;
+        options.AuthJwt...
+    })
+));
+```
+
+Typically you'll want to use the included Identity UI Pages and dependencies to register new users and assign roles,
+but if you have any existing client integrations that use ServiceStack APIs they can also be enabled with:
+
+```csharp
+Plugins.Add(new AuthFeature(IdentityAuth.For<ApplicationUser>(options => {
+    // Include ServiceStack's Register API
+    options.IncludeRegisterService = true;
+    
+    // Include ServiceStack's AssignRoles and UnAssignRoles APIs
+    options.IncludeAssignRoleServices = true;
+));
+```
+
+### Extending Identity Auth Cookies and User Sessions
+
+By default all [well known Claim Names](https://github.com/ServiceStack/ServiceStack/blob/3ab3d23c85cf48435b8cd9386f25afab79fcb542/ServiceStack/src/ServiceStack.Extensions/Auth/IdentityApplicationAuthProvider.cs#L49)
+are used to populate the User Session, but you can also include additional claims in the Identity Auth Cookie
+and use them to populate the User Session by overriding `PopulateFromClaims()` in your
+[CustomUserSession.cs](https://github.com/NetCoreTemplates/blazor/blob/main/MyApp.ServiceInterface/Data/CustomUserSession.cs), e.g:
+
+```csharp
+public class CustomUserSession : AuthUserSession
+{
+    public override void PopulateFromClaims(IRequest httpReq, ClaimsPrincipal principal)
+    {
+        // Populate Session with data from Identity Auth Claims
+        ProfileUrl = principal.FindFirstValue(JwtClaimTypes.Picture);
+    }
+}
+
+// Add additional claims to the Identity Auth Cookie
+public class AdditionalUserClaimsPrincipalFactory(UserManager<ApplicationUser> userManager, RoleManager<IdentityRole> roleManager, IOptions<IdentityOptions> optionsAccessor)
+    : UserClaimsPrincipalFactory<ApplicationUser,IdentityRole>(userManager, roleManager, optionsAccessor)
+{
+    public override async Task<ClaimsPrincipal> CreateAsync(ApplicationUser user)
+    {
+        var principal = await base.CreateAsync(user);
+        var identity = (ClaimsIdentity)principal.Identity!;
+
+        var claims = new List<Claim>();
+        // Add additional claims here
+        if (user.ProfileUrl != null)
+        {
+            claims.Add(new Claim(JwtClaimTypes.Picture, user.ProfileUrl));
+        }
+
+        identity.AddClaims(claims);
+        return principal;
+    }
+}
+```
+
+### Custom Application User Primary Key
+
+The default `IdentityUser` uses a `string` as the primary key populated with a Guid, but you could also change it to use an 
+`int` by having your EF IdentityUser Data Model inherit from `IdentityUser<int>` instead:
+
+```csharp
+public class AppUser : IdentityUser<int>
+{
+    //...
+}
+```
+
+You'll also need to specify the Key Type when registering the `AuthFeature` plugin:
+
+```csharp
+public class ConfigureAuth : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureAppHost(appHost => {
+            appHost.Plugins.Add(new AuthFeature(IdentityAuth.For<AppUser,int>(
+                options => {
+                    options.EnableCredentialsAuth = true;
+                    options.SessionFactory = () => new CustomUserSession();
+                })
+            ));
+        });
+}
+```
+
+Which the new .NET 8 BlazorDiffusion App does in [Configure.Auth.cs](https://github.com/NetCoreApps/BlazorDiffusionVue/blob/main/BlazorDiffusion/Configure.Auth.cs)
+to be compatible with its existing ServiceStack `UserAuth` tables which used an `int` primary key.
+
+## Using Identity Auth in ServiceStack Apps
+
+One of the primary benefits of adopting Identity Auth is the wealth of documentation and resources available for it, 
+which also applies to how you would use Identity Auth to secure your own Apps.
+
+If you're new to Identity Auth we recommend starting with the official introduction from Microsoft:
+
+ - [Introduction to Identity on ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity)
+
+To learn about securing Blazor Apps, go to:
+
+ - [ASP.NET Core Blazor authentication and authorization](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/)
+
+### Declarative Validation Attributes
+
+The recommended way to protect your ServiceStack APIs is to continue to use the [Declarative Validation](https://docs.servicestack.net/declarative-validation) 
+attributes which are decoupled from any implementation so be safely annotated on Request DTOs without adding 
+any implementation dependencies, where they're also accessible to Clients and UIs using the Request DTOs to invoke your APIs. 
+
+The available Typed Authorization Attributes include:
+
+| Attribute                   | Description                                            |
+|-----------------------------|--------------------------------------------------------|
+| `[ValidateIsAuthenticated]` | Restrict access toAuthenticated Users only             |
+| `[ValidateIsAdmin]`         | Restrict access to Admin Users only                    |
+| `[ValidateHasRole]`         | Restrict access to only Users assigned with this Role  |
+| `[ValidateHasClaim]`        | Restrict access to only Users assigned with this Claim |
+| `[ValidateHasScope]`        | Restrict access to only Users assigned with this Scope |
+
+That can be annotated on **Request DTOs** to protect APIs:
+
+```csharp
+[ValidateIsAuthenticated]
+[ValidateIsAdmin]
+[ValidateHasRole(role)]
+[ValidateHasClaim(type,value)]
+[ValidateHasScope(scope)]
+public class Secured {}
+```
+
+## Migrating from ServiceStack Auth
+
+Migrating from ServiceStack Auth to Identity Auth should be relatively straight-forward as ServiceStack uses a compatible
+Identity v2 password hashing format, which should let you migrate your users to Identity Auth without them noticing.
+
+:::info TIP
+Please ensure your App database is backed up before running any migrations 
+:::
+
+#### 1. Rename old AppUser table
+
+You'll want to use a different name so it doesn't conflict with the new Identity Auth `AppUser` Data Model. This
+would only be needed to query the User data to migrate to Identity Auth, you'll be able to remove it after 
+successfully migrating all your Users.
+
+You don't need to include all the properties of the `UserAuth` base table, just the ones you want to migrate to Identity Auth,
+which for Blazor Diffusion was only:
+
+```csharp
+// Used by OrmLite to fetch User data to migrate from old ServiceStack `AppUser` table
+[Alias("AppUser")]
+public class OldAppUser
+{
+    [AutoIncrement]
+    public int Id { get; set; }
+    public string UserName { get; set; }
+    public string DisplayName { get; set; }
+    public string FirstName { get; set; }
+    public string LastName { get; set; }
+    public string? Handle { get; set; }
+    public string Email { get; set; }
+    public string PasswordHash { get; set; }
+    public string? ProfileUrl { get; set; }
+    public string? Avatar { get; set; } //overrides ProfileUrl
+    public string? LastLoginIp { get; set; }
+    public DateTime? LastLoginDate { get; set; }
+    public string RefIdStr { get; set; }
+    public DateTime? LockedDate { get; set; }
+    public DateTime CreatedDate { get; set; }
+    public DateTime ModifiedDate { get; set; }
+}
+```
+
+#### 2. Create Identity Auth Data Model
+
+If you have a lot of existing references to the `AppUser` name you'll want to retain the same name so the existing references 
+wont need to be updated. Essentially your custom EF IdentityUser will want a copy of all the properties you want to migrate
+other than `Id`, `Email`, and `PasswordHash` that's already defined in the base `IdentityUser` class:
+
+```csharp
+[Alias("AspNetUsers")] // Tell OrmLite which table this EF Data Model maps to
+public class AppUser : IdentityUser<int>
+{
+    public string? FirstName { get; set; }
+    public string? LastName { get; set; }
+    public string? DisplayName { get; set; }
+    public string? ProfileUrl { get; set; }
+    [Input(Type = "file"), UploadTo("avatars")]
+    public string? Avatar { get; set; } //overrides ProfileUrl
+    public string? Handle { get; set; }
+    public int? RefId { get; set; }
+    public string RefIdStr { get; set; } = Guid.NewGuid().ToString();
+    public bool IsArchived { get; set; }
+    public DateTime? ArchivedDate { get; set; }
+    public string? LastLoginIp { get; set; }
+    public DateTime? LastLoginDate { get; set; }
+    public DateTime CreatedDate { get; set; } = DateTime.UtcNow;
+    public DateTime ModifiedDate { get; set; } = DateTime.UtcNow;
+}
+```
+
+The `AppUser` Data Model and `int` primary key would also need to be registered in your
+[Configure.Auth.cs](https://github.com/NetCoreApps/BlazorDiffusionVue/blob/main/BlazorDiffusion/Configure.Auth.cs)
+configuration class:
+
+```csharp
+public class ConfigureAuth : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureAppHost(appHost => {
+            appHost.Plugins.Add(new AuthFeature(IdentityAuth.For<AppUser,int>(
+                options => {
+                    options.EnableCredentialsAuth = true;
+                    options.SessionFactory = () => new CustomUserSession();
+                })
+            ));
+        });
+}
+```
+
+#### 3. Add Authentication Configuration
+
+You'll need to configure Entity Framework and add your desired ASP.NET Identity Auth configuration to your App's `Program.cs`. 
+
+We'd recommend copying from a new Microsoft or [ServiceStack .NET 8 Project](https://docs.servicestack.net/auth/identity-auth) 
+which closely matches the Authentication options you want to enable, e.g. you can start with the recommended Authentication 
+for a new Blazor Project from its [Program.cs](https://github.com/NetCoreTemplates/blazor/blob/main/MyApp/Program.cs):
+
+```csharp
+services.AddAuthentication(IdentityConstants.ApplicationScheme)
+    .AddIdentityCookies();
+services.AddDataProtection()
+    .PersistKeysToFileSystem(new DirectoryInfo("App_Data"));
+
+// $ dotnet ef migrations add CreateIdentitySchema
+// $ dotnet ef database update
+var connectionString = config.GetConnectionString("DefaultConnection") ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");
+services.AddDbContext<ApplicationDbContext>(options =>
+    options.UseSqlite(connectionString, b => b.MigrationsAssembly(nameof(MyApp))));
+services.AddDatabaseDeveloperPageExceptionFilter();
+
+services.AddIdentityCore<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
+    .AddRoles<IdentityRole>()
+    .AddEntityFrameworkStores<ApplicationDbContext>()
+    .AddSignInManager()
+    .AddDefaultTokenProviders();
+
+services.AddSingleton<IEmailSender, NoOpEmailSender>();
+services.AddScoped<IUserClaimsPrincipalFactory<ApplicationUser>, AdditionalUserClaimsPrincipalFactory>();
+```
+
+Alternatively if you want to add support for external OAuth logins you can copy from the **MVC Tailwind** Authentication 
+configuration in its [Program.cs](https://github.com/NetCoreTemplates/mvc/blob/main/MyApp/Program.cs) which will 
+also require adding the NuGet dependencies of the OAuth providers you want to support which you can get from its
+[MyApp.csproj](https://github.com/NetCoreTemplates/mvc/blob/main/MyApp/MyApp.csproj)
+
+#### 4. Create and Run EF Migrations
+
+After your App is properly configured you'll want to create the EF Migrations for your the Identity Auth User tables
+by installing the [dotnet-ef tool](https://learn.microsoft.com/en-us/ef/core/cli/dotnet) and running:
+
+:::sh
+dotnet ef migrations add CreateIdentitySchema
+:::
+
+Which should create the EF Migrations in the `/Migrations` folder, you can then run the migrations to create the
+Identity Auth tables in your App's configured database:
+
+:::sh
+dotnet ef database update
+:::
+
+#### 5. Implement the Migrate Users Task
+
+This could be implemented in a separate Application or Unit Test although we've found the easiest way to migrate existing users 
+is to implement a custom [App Task](https://docs.servicestack.net/app-tasks) as it's able to make use of your App's configured Authentication, EF and OrmLite dependencies
+that can then be run from the command-line. 
+
+The implementation should be fairly straight-forward, you'll basically just need to create a new Identity Auth User 
+using the `UserManager<AppUser>` dependency for each of your existing users: 
+
+```csharp
+public class ConfigureDbMigrations : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureAppHost(appHost => {
+            AppTasks.Register("migrate.users", _ => {
+                var log = appHost.GetApplicationServices().GetRequiredService<ILogger<ConfigureDbMigrations>>();
+
+                log.LogInformation("Running migrate.users...");
+                var scopeFactory = appHost.GetApplicationServices().GetRequiredService<IServiceScopeFactory>();
+                using var scope = scopeFactory.CreateScope();
+                using var dbContext = scope.ServiceProvider.GetRequiredService<ApplicationDbContext>();
+                using var db = scope.ServiceProvider.GetRequiredService<IDbConnectionFactory>().Open();
+                var migrateUsers = db.Select(db.From<OldAppUser>().OrderBy(x => x.Id));
+
+                log.LogInformation("Migrating {Count} Existing ServiceStack Users to Identity Auth Users...", migrateUsers.Count);
+                MigrateExistingUsers(dbContext, scope.ServiceProvider, migrateUsers).Wait();
+            });
+            AppTasks.Run();
+        });
+
+    private async Task MigrateExistingUsers(ApplicationDbContext dbContext, IServiceProvider services, 
+        List<OldAppUser> migrateUsers, string tempPassword="p@55wOrd")
+    {
+        var userManager = services.GetRequiredService<UserManager<AppUser>>();
+        var now = DateTime.UtcNow;
+
+        foreach (var user in migrateUsers)
+        {
+            var appUser = new AppUser
+            {
+                Id = user.Id,
+                UserName = user.Email,
+                Email = user.Email,
+                DisplayName = user.DisplayName,
+                FirstName = user.FirstName,
+                LastName = user.LastName,
+                Handle = user.Handle,
+                ProfileUrl = user.ProfileUrl,
+                Avatar = user.Avatar,
+                RefIdStr = user.RefIdStr ?? Guid.NewGuid().ToString(),
+                LockoutEnabled = true,
+                LockoutEnd = user.LockedDate != null ? now.AddYears(10) : now,
+                LastLoginDate = user.LastLoginDate,
+                LastLoginIp = user.LastLoginIp,
+                CreatedDate = user.CreatedDate,
+                ModifiedDate = user.ModifiedDate,
+                // Verify you want existing Users emails to be confirmed
+                EmailConfirmed = true,
+            };
+            await userManager.CreateAsync(appUser, tempPassword);
+
+            // Update raw Password Hash using EF
+            if (user.PasswordHash != null)
+            {
+                dbContext.Users
+                    .Where(x => x.Id == user.Id)
+                    .ExecuteUpdate(setters => setters.SetProperty(x => x.PasswordHash, user.PasswordHash));
+            }
+        }
+    }
+}    
+```
+
+As there's no official API for updating the raw `PasswordHash` you'll need to use EF's `ExecuteUpdate()` API to update it 
+on the `AspNetUsers` table directly.
+
+It should be noted that ServiceStack Auth still uses ASP.NET Core's previous Identity v2 format for hashing its passwords,
+this will be automatically re-hashed using the latest ASP.NET Identity v3 format after users successfully sign in.
+
+#### Optimizing the PasswordHash Update 
+
+Whilst migrating users should be a once-off task, if you have a lot of users you may want to optimize the `PasswordHash` update
+from a **N+1** query per user to a single query that updates all users in a single command. 
+
+You'll need to use the **UPDATE FROM** syntax that's supported by your RDBMS's, here's an example of how to do it in SQLite:
+
+```sql
+UPDATE AspNetUsers
+SET PasswordHash = u.PasswordHash
+FROM (SELECT Email, PasswordHash FROM AppUser WHERE PasswordHash is NOT NULL) AS u
+WHERE u.Email = AspNetUsers.Email;
+```
+
+#### Migrating Roles
+
+Migrating Roles will depend how their stored in your App, you'll first need to ensure each role is created in the `AspNetRoles` 
+table with:
+
+```csharp
+string[] allRoles = [...]; // All Roles in your App
+var roleManager = services.GetRequiredService<RoleManager<IdentityRole>>();
+foreach (var roleName in allRoles)
+{
+    var roleExist = await roleManager.RoleExistsAsync(roleName);
+    if (!roleExist)
+    {
+        await roleManager.CreateAsync(new IdentityRole(roleName));
+    }
+}
+```
+
+You can then assign Roles to Users using the `UserManager<AppUser>`, e.g:
+
+```csharp
+string[] roles = [...]; // Roles to assign to User 
+var newUser = await userManager.FindByEmailAsync(user.Email!);
+await userManager.AddToRolesAsync(user, roles);
+```
+
+#### 6. Run the migrate.users Task
+
+With everything in place, all that's left is to run the `migrate.users` App Task from the command-line:
+
+:::sh
+dotnet run --AppTasks=migrate.users
+:::
+
+#### 7. Verify Users can Sign In
+
+After successfully migrating all your users you should check the new `IdentityUser` table to verify all the User data 
+you want has been migrated as well as verifying they can sign in with their existing credentials.
+
+#### Create a new ASP.NET Identity Auth Project to copy from
+
+The easiest way to include the Identity Auth UI Pages to your App is to copy your Application into a new .NET 8 Project
+that already includes them, you can create a new Blazor App with:
+
+:::sh
+x new blazor ProjectName
+:::
+
+Or create a new Razor Pages Tailwind or Bootstrap App:
+
+:::sh
+x new razor ProjectName
+:::
+
+:::sh
+x new razor-bootstrap ProjectName
+:::
+
+Or new MVC Tailwind or Bootstrap App with:
+
+:::sh
+x new mvc ProjectName
+:::
+
+:::sh
+x new mvc-bootstrap ProjectName
+:::
+
+Alternatively you can manually copy the pages from the project template repositories, for Blazor most of the Identity Auth
+UI Pages are in the 
+[Components/Identity](https://github.com/NetCoreTemplates/blazor/tree/main/MyApp/Components/Identity) and 
+[Pages/Account](https://github.com/NetCoreTemplates/blazor/tree/main/MyApp/Components/Pages/Account) folders.
+
+For MVC, most of the Identity UI are in the 
+[Account](https://github.com/NetCoreTemplates/mvc/blob/main/MyApp/Controllers/AccountController.cs)
+and [Manage](https://github.com/NetCoreTemplates/mvc/blob/main/MyApp/Controllers/ManageController.cs) controllers
+as well as their
+[Views/Account](https://github.com/NetCoreTemplates/mvc/tree/main/MyApp/Views/Account) and
+[Views/Manage](https://github.com/NetCoreTemplates/mvc/tree/main/MyApp/Views/Manage) folders.
+
+### SMTP IEmailSender
+
+The .NET 8 Templates also include a nice solution for sending Identity Auth emails through the `IEmailSender` interface 
+which drops the Email Request in the registered Background MQ in 
+[Configure.Mq.cs](https://github.com/NetCoreTemplates/blazor/blob/main/MyApp/Configure.Mq.cs)
+which uses it to invoke the `SendEmail` API in 
+[EmailServices](https://github.com/NetCoreTemplates/blazor/blob/main/MyApp.ServiceInterface/EmailServices.cs) in a 
+managed background worker:
+
+```csharp
+public class EmailSender(IMessageService messageService) : IEmailSender
+{
+    public Task SendEmailAsync(string email, string subject, string htmlMessage)
+    {
+        using var mqClient = messageService.CreateMessageProducer();
+        mqClient.Publish(new SendEmail
+        {
+            To = email,
+            Subject = subject,
+            BodyHtml = htmlMessage,
+        });
+
+        return Task.CompletedTask;
+    }
+}
+```
+
+To enable it you'll need to register your preferred SMTP Server in your App's `appsettings.json`:
+
+```json
+{
+  "SmtpConfig": {
+    "Username": "username",
+    "Password": "password",
+    "Host": "smtp.mailtrap.io",
+    "Port": 587,
+    "FromEmail": "mail@example.org"
+  }
+}
+```
+
+Then uncomment the `EmailSender` registration in your `Program.cs` 
+
+```csharp
+services.AddSingleton<IEmailSender, EmailSender>();
+```
+
+### Send any App Email
+
+The nice part about this solution is that it's not limited to just sending Identity Auth emails, you can also use it to send
+any App Email, either by publishing a message to the registered MQ with `PublishMessage` or by using the 
+[Service Gateway](https://docs.servicestack.net/service-gateway) to invoke the API directly, e.g:
+
+```csharp
+public class MyServices : Service
+{
+    public object Any(MyRequest request)
+    {
+        // Send Email in managed Background MQ Worker
+        PublishMessage(new SendEmail {
+            To = email,
+            Subject = subject,
+            BodyHtml = body,
+        });
+
+        // Block until Email is sent to SMTP Server
+        Gateway.Send(new SendEmail {
+            To = email,
+            Subject = subject,
+            BodyHtml = body,
+        });
+    }
+}
+```
diff --git a/MyApp/_posts/2023-11-30_net8-docker-containers.md b/MyApp/_posts/2023-11-30_net8-docker-containers.md
new file mode 100644
index 0000000..862464c
--- /dev/null
+++ b/MyApp/_posts/2023-11-30_net8-docker-containers.md
@@ -0,0 +1,351 @@
+---
+title: Docker Containerization in .NET 8
+summary: .NET 8 Docker Containers and GitHub Actions Deployments in new Project Templates
+tags: [dotnet, github-actions, hosting, devops]
+image: https://images.unsplash.com/photo-1609884557151-1e356d32900c?crop=entropy&fit=crop&h=1000&w=2000
+author: Lucy Bates
+---
+
+### All .NET Project Templates upgraded to .NET 8
+
+Included in the release of [ServiceStack v8](https://docs.servicestack.net/releases/v8_00) all of ServiceStack's 
+[.NET project templates](https://github.com/NetCoreTemplates/) have been upgraded to use **ServiceStack v8** and **.NET 8** target framework, in addition 
+the built-in CI/CD deployment GitHub Actions have been upgraded to use the [secure rootless Linux Docker containers](https://devblogs.microsoft.com/dotnet/securing-containers-with-rootless/)
+that's now built into .NET 8 which allow you to effortlessly deploy your containerized .NET 8 Apps with Docker and
+GitHub Registry via SSH to any Linux Server.
+
+<div class="not-prose mt-16 flex flex-col items-center">
+   <div class="flex">
+      <svg class="w-28 h-28" xmlns="http://www.w3.org/2000/svg" width="256" height="185" viewBox="0 0 256 185"><path fill="#2396ED" d="M250.716 70.497c-5.765-4-18.976-5.5-29.304-3.5c-1.2-10-6.725-18.749-16.333-26.499l-5.524-4l-3.844 5.75c-4.803 7.5-7.205 18-6.485 28c.24 3.499 1.441 9.749 5.044 15.249c-3.362 2-10.328 4.5-19.455 4.5H1.155l-.48 2c-1.682 9.999-1.682 41.248 18.014 65.247c14.892 18.249 36.99 27.499 66.053 27.499c62.93 0 109.528-30.25 131.386-84.997c8.647.25 27.142 0 36.51-18.75c.24-.5.72-1.5 2.401-5.249l.961-2l-5.284-3.25ZM139.986 0h-26.42v24.999h26.42V0Zm0 29.999h-26.42v24.999h26.42v-25Zm-31.225 0h-26.42v24.999h26.42v-25Zm-31.225 0H51.115v24.999h26.421v-25ZM46.311 59.998H19.89v24.999h26.42v-25Zm31.225 0H51.115v24.999h26.421v-25Zm31.225 0h-26.42v24.999h26.42v-25Zm31.226 0h-26.422v24.999h26.422v-25Zm31.225 0H144.79v24.999h26.422v-25Z"/></svg>
+   </div>
+</div>
+<div class="not-prose mt-4 px-4 sm:px-6">
+<div class="text-center"><h3 id="docker-containers" class="text-4xl sm:text-5xl md:text-6xl tracking-tight font-extrabold text-gray-900">
+    .NET 8 Docker Containers
+</h3></div>
+<p class="mx-auto mt-5 max-w-3xl text-xl text-gray-500">
+    Learn about the latest streamlined containerization support built into .NET 8
+</p>
+<div class="py-8 max-w-7xl mx-auto px-4 sm:px-6">
+    <lite-youtube class="w-full mx-4 my-4" width="560" height="315" videoid="y57c-9jeIww" style="background-image: url('https://img.youtube.com/vi/y57c-9jeIww/maxresdefault.jpg')"></lite-youtube>
+</div>
+</div>
+
+### .NET 8 Docker Containerization
+
+.NET 8 simplifies Docker integration using functionality built into the .NET SDK tooling where it's able to use `dotnet publish`
+to publish your .NET 8 App to a container image without a Dockerfile, adhering to the latest Least privilege and hardened security
+best practices of running App's as non-root by default.
+
+This **publish to container** feature also supports creating Docker images for different architectures like ARM64 which
+sees [significant improvements in .NET 8](https://devblogs.microsoft.com/dotnet/this-arm64-performance-in-dotnet-8/)
+making deploying your .NET Apps to ARM64 an [even better value proposition](https://servicestack.net/posts/cloud-value-between-architectures).
+
+### GitHub Action Deployments
+
+In today's DevOps ecosystem, [GitHub Actions](https://github.com/features/actions) stand out as an invaluable asset for
+automating CI/CD workflows directly within your GitHub repository. The introduction of .NET 8 takes this a step further,
+offering a streamlined approach to generating Docker images through the `<PublishProfile>DefaultContainer</PublishProfile>`
+setting in your `.csproj`. This ensures consistent application packaging, making it deployment-ready by just using `dotnet publish`.
+
+ServiceStack's project templates bring additional flexibility, by utilizing foundational tools like
+[Docker](https://www.docker.com) for containerization and [SSH](https://en.wikipedia.org/wiki/Secure_Shell) for secure deployments,
+it's able to deploy your Dockerized .NET applications to any Linux server, whether self-hosted or on any cloud provider.
+
+#### Live Demos use their GitHub Actions to deploy themselves
+
+Each template's Live demo are themselves utilizing their included GitHub Actions to deploy itself to a Linux server running
+on a **€13.60 /month** shared 8BG RAM [Hetzner Cloud VM](https://www.hetzner.com/cloud) that's currently running 50+ Docker Containers.
+
+This guide aims to walk you through the hosting setup and the GitHub Actions release process as introduced in the
+ServiceStack's latest .NET 8 project templates.
+
+## Deployment Files
+
+Deployment files that are included in project templates to facilitate GitHub Actions deployments:
+
+#### .deploy/
+- [nginx-proxy-compose.yml](https://github.com/NetCoreTemplates/blazor/blob/master/.deploy/nginx-proxy-compose.yml) - Manage nginx reverse proxy and Lets Encrypt companion container (one-time setup per server)
+- [docker-compose.yml](https://github.com/NetCoreTemplates/blazor/blob/main/.deploy/docker-compose.yml) - Manage .NET App Docker Container
+
+#### .github/workflows/
+- [build.yml](https://github.com/NetCoreTemplates/blazor/blob/master/.github/workflows/build.yml) - Build .NET Project and Run Tests
+- [release.yml](https://github.com/NetCoreTemplates/blazor/blob/master/.github/workflows/release.yml) - Build container, Push to GitHub Packages Registry, SSH deploy to Linux server, Run DB Migrations and start new Docker Container if successful otherwise revert Migration
+
+## Prerequisites
+
+Before your Linux server can accept GitHub Actions deployments, we need to setup your Linux deployment server.
+For a step-by-step walk through of these steps and more information about this solution, checkout our video guide below:
+
+<div class="not-prose mt-16 flex flex-col items-center">
+   <div class="flex">
+      <svg class="w-28 h-28" xmlns="http://www.w3.org/2000/svg" width="256" height="185" viewBox="0 0 256 185"><path fill="#2396ED" d="M250.716 70.497c-5.765-4-18.976-5.5-29.304-3.5c-1.2-10-6.725-18.749-16.333-26.499l-5.524-4l-3.844 5.75c-4.803 7.5-7.205 18-6.485 28c.24 3.499 1.441 9.749 5.044 15.249c-3.362 2-10.328 4.5-19.455 4.5H1.155l-.48 2c-1.682 9.999-1.682 41.248 18.014 65.247c14.892 18.249 36.99 27.499 66.053 27.499c62.93 0 109.528-30.25 131.386-84.997c8.647.25 27.142 0 36.51-18.75c.24-.5.72-1.5 2.401-5.249l.961-2l-5.284-3.25ZM139.986 0h-26.42v24.999h26.42V0Zm0 29.999h-26.42v24.999h26.42v-25Zm-31.225 0h-26.42v24.999h26.42v-25Zm-31.225 0H51.115v24.999h26.421v-25ZM46.311 59.998H19.89v24.999h26.42v-25Zm31.225 0H51.115v24.999h26.421v-25Zm31.225 0h-26.42v24.999h26.42v-25Zm31.226 0h-26.422v24.999h26.422v-25Zm31.225 0H144.79v24.999h26.422v-25Z"/></svg>
+   </div>
+</div>
+<div class="not-prose mt-4 px-4 sm:px-6">
+<div class="text-center"><h3 id="docker-containers" class="text-4xl sm:text-5xl md:text-6xl tracking-tight font-extrabold text-gray-900">
+    Use GitHub Actions for Auto Deployments
+</h3></div>
+<div class="py-8 max-w-7xl mx-auto px-4 sm:px-6">
+    <lite-youtube class="w-full mx-4 my-4" width="560" height="315" videoid="7dardvqBFbE" style="background-image: url('https://img.youtube.com/vi/7dardvqBFbE/maxresdefault.jpg')"></lite-youtube>
+</div>
+</div>
+
+### Setup Deployment Server
+
+#### 1. Install Docker and Docker-Compose
+
+Follow [Docker's installation instructions](https://docs.docker.com/engine/install/ubuntu/)
+to install the latest version of Docker.
+
+#### 2. Configure SSH for GitHub Actions
+
+Generate a dedicated SSH key pair to be used by GitHub Actions:
+
+:::sh
+ssh-keygen -t rsa -b 4096 -f ~/.ssh/github_actions
+:::
+
+Add the **public key** to your server's SSH **authorized_keys**:
+
+:::sh
+cat ~/.ssh/github_actions.pub >> ~/.ssh/authorized_keys
+:::
+
+Add the **private key** to your repo's `DEPLOY_KEY` GitHub Action Secret which GitHub Actions will use to
+securely SSH into the server.
+
+#### 3. Set Up nginx-reverse-proxy
+
+You should have a `docker-compose` file similar to the `nginx-proxy-compose.yml` in your repository. Upload this file to your server:
+
+:::sh
+scp nginx-proxy-compose.yml user@your_server:~/
+:::
+
+To bring up the nginx reverse proxy and its companion container for handling TLS certificates, run:
+
+:::sh
+docker compose -f ~/nginx-proxy-compose.yml up -d
+:::
+
+This will start an nginx reverse proxy along with a companion LetsEncrypt container that will automatically watch for
+additional Docker containers on the same network and initialize them with valid TLS certificates.
+
+### Ready to host containerized .NET Apps
+
+Your Linux server is now ready to accept multiple .NET App deployments from GitHub Actions. The guide below walks through
+the process of setting up your GitHub repository to deploy new ServiceStack .NET Apps to your Linux server.
+
+## Step-by-Step Guide
+
+### 1. Create Your ServiceStack Application
+
+Start by creating your ServiceStack application, either from [ServiceStack's Start Page](https://servicestack.net/start)
+or by using the [x dotnet tool](https://docs.servicestack.net/dotnet-tool):
+
+:::sh
+x new blazor ProjectName
+:::
+
+Replace `ProjectName` with your desired project name to generate a new ServiceStack application pre-configured
+with the necessary Docker compose files and GitHub Action workflows as above.
+
+### 2. Configure DNS for Your Application
+
+You need a domain to point to your Linux server. Create an A Record in your DNS settings that points to the IP address
+of your Linux server:
+
+- **Subdomain**: `app.example.org`
+- **Record Type**: A
+- **Value/Address**: IP address of your Linux server
+
+This ensures that any requests to `app.example.org` are directed to your server.
+
+### 3. Setting Up GitHub Secrets
+
+Navigate to your GitHub repository's settings, find the "Secrets and variables" section, and add the following secrets:
+
+- `DEPLOY_HOST`: IP address or hostname of your Linux server
+- `DEPLOY_USERNAME`: SSH Username to use for deployments
+- `DEPLOY_KEY`: Private key generated for GitHub Actions to SSH into your server
+- `LETSENCRYPT_EMAIL`: Your email address for Let's Encrypt notifications
+
+#### Using GitHub CLI for Secret Management
+
+You can use the [GitHub CLI](https://cli.github.com/manual/gh_secret_set) for a quicker setup of these GitHub Action Secrets, e.g:
+
+```bash
+gh secret set DEPLOY_HOST --body="linux-server-host"
+gh secret set DEPLOY_USERNAME --body="linux-server-username"
+gh secret set DEPLOY_KEY --bodyFile="path/to/ssh-private-key"
+gh secret set LETSENCRYPT_EMAIL --body="your-email@example.org"
+```
+
+These secrets will populate environment variables within your GitHub Actions workflow and other configuration files,
+enabling secure and automated deployment of your ServiceStack applications.
+
+### 4. Push to Main Branch to Trigger Deployment
+
+With everything set up, pushing code to the main branch of your repository will trigger the GitHub Action workflow, initiating the deployment process:
+
+```bash
+git add .
+git commit -m "Initial commit"
+git push origin main
+```
+
+### 5. Verifying the Deployment
+
+After the GitHub Actions workflow completes, you can verify the deployment by:
+
+- Checking the workflow's logs in your GitHub repository to ensure it completed successfully
+- Navigating to your application's URL (e.g., `https://app.example.org`) in a web browser. You should see your ServiceStack application up and running with a secure HTTPS connection
+
+## Features
+
+### DB Migrations
+
+The GitHub Actions workflow includes a step to run database migrations on the remote server in the **Run remote db migrations** step
+which automatically runs the `migrate` AppTask in the `app-migration` companion Docker container on the Linux Host Server
+to validate migration was successful before completing deployment of the new App. A failed migration will cause deployment to fail
+and the previous App version to continue to run.
+
+### Patch appsettings.json with production secrets
+
+One way to maintain sensitive information like API keys and connection strings for your Production App outside of its
+source code GitHub repository is to patch the `appsettings.json` file with a [JSON Patch](https://jsonpatch.com) that's
+stored in your repo's `APPSETTINGS_PATCH` GitHub Action Secret which will be applied with the deployed App's `appsettings.json` file.
+
+For example this JSON Patch below will replace values and objects in your App's **appsettings.json**:
+
+```json
+[
+    { "op":"add", "path":"/oauth.facebook.AppSecret",  "value":"xxxx" },
+    { "op":"add", "path":"/oauth.microsoft.AppSecret", "value":"xxxx" },
+    { "op":"add", "path":"/smtp", "value":{
+        "UserName": "xxxx",
+        "Password": "xxxx",
+        "Host": "smtp-server.example.org",
+        "Port": 587,
+        "From": "noreply@example.org",
+        "FromName": "No Reply"
+      } 
+    }
+]
+```
+
+You can test your JSON Patch by saving it to `appsettings.json.patch` and applying it with the
+[patch feature](https://docs.servicestack.net/dotnet-tool#patch-json-files) of the `x` dotnet tool:
+
+:::sh
+x patch appsettings.json.patch
+:::
+
+## Anatomy of GitHub Actions Workflow
+
+GitHub Actions workflows are defined in YAML files, and they provide a powerful way to automate your development process.
+This guide will take you through the key sections of the workflow to give you a comprehensive understanding of how it functions.
+
+## Permissions
+
+In this workflow, two permissions are specified:
+
+- `packages: write`: Allows the workflow to upload Docker images to GitHub Packages
+- `contents: write`: Required to access the repository content
+
+Specifying permissions ensures that the GitHub Actions runner has just enough access to perform the tasks in the workflow.
+
+## Jobs
+
+This workflow consists of two jobs: `push_to_registry` and `deploy_via_ssh`.
+
+### push_to_registry
+
+This job runs on an Ubuntu 22.04 runner and is responsible for pushing the Docker image to the GitHub Container Registry. It proceeds only if the previous workflow did not fail. The job includes the following steps:
+
+1. **Checkout**: Retrieves the latest or specific tag of the repository's code
+2. **Env variable assignment**: Assigns necessary environment variables for subsequent steps
+3. **Login to GitHub Container Registry**: Authenticates to the GitHub Container Registry
+4. **Setup .NET Core**: Prepares the environment for .NET 8
+5. **Build and push Docker image**: Creates and uploads the Docker image to GitHub Container Registry (ghcr.io)
+
+### deploy_via_ssh
+
+This job also runs on an Ubuntu 22.04 runner and depends on the successful completion of the `push_to_registry` job. Its role is to deploy the application via SSH. The steps involved are:
+
+1. **Checkout**: Retrieves the latest or specific tag of the repository's code
+2. **Repository name fix and env**: Sets up necessary environment variables
+3. **Create .env file**: Generates a .env file required for deployment
+4. **Copy files to target server via scp**: Securely copies files to the remote server
+5. **Run remote db migrations**: Executes database migrations on the remote server
+6. **Remote docker-compose up via ssh**: Deploys the Docker image with the application
+
+## Triggers (on)
+
+The workflow is designed to be triggered by:
+
+1. **New GitHub Release**: Activates when a new release is published
+2. **Successful Build action**: Runs whenever the specified Build action completes successfully on the main or master branches
+3. **Manual trigger**: Allows for rollback to a specific release or redeployment of the latest release, with an input for specifying the version tag
+
+Understanding these sections will help you navigate and modify the workflow as per your needs, ensuring a smooth and automated deployment process.
+
+## Deployment Server Setup Expanded
+
+### Ubuntu as the Reference Point
+
+Though our example leverages Ubuntu, it's important to emphasize that the primary requirements for this deployment architecture are a Linux operating system, Docker, and SSH. Many popular Linux distributions like CentOS, Fedora, or Debian will work just as efficiently, provided they support Docker and SSH.
+
+### The Crucial Role of SSH in GitHub Actions
+
+**SSH** (Secure SHell) is not just a protocol to remotely access your server's terminal. In the context of GitHub Actions:
+
+- SSH offers a **secure channel** between GitHub Actions and your Linux server
+- Enables GitHub to **execute commands directly** on your server
+- Provides a mechanism to **transfer files** (like Docker-compose configurations or environment files) from the GitHub repository to the server
+
+By generating a dedicated SSH key pair specifically for GitHub Actions (as above), we ensure a secure and isolated access mechanism. 
+Only the entities possessing the private key (in this case, only GitHub Actions) can initiate an authenticated connection.
+
+### Docker & Docker-Compose: Powering the Architecture
+
+**Docker** encapsulates your ServiceStack application into containers, ensuring consistency across different environments. Some of its advantages include:
+
+- **Isolation**: Your application runs in a consistent environment, irrespective of where Docker runs.
+- **Scalability**: Easily replicate containers to handle more requests.
+- **Version Control for Environments**: Create, maintain, and switch between different container images.
+
+**Docker-Compose** extends Docker's benefits by orchestrating the deployment of multi-container applications:
+
+- **Ease of Configuration**: Describe your application's entire stack, including the application, database, cache, etc., in a single YAML file.
+- **Consistency Across Multiple Containers**: Ensures that containers are spun up in the right order and with the correct configurations.
+- **Simplifies Commands**: Instead of a long string of Docker CLI commands, a single `docker-compose up` brings your whole stack online.
+
+### NGINX Reverse Proxy: The Silent Workhorse
+
+Using an **nginx reverse proxy** in this deployment design offers several powerful advantages:
+
+- **Load Balancing**: Distributes incoming requests across multiple ServiceStack applications, ensuring optimal resource utilization.
+- **TLS Management**: Together with its companion container, nginx reverse proxy automates the process of obtaining and renewing TLS certificates. This ensures your applications are always securely accessible over HTTPS.
+- **Routing**: Directs incoming traffic to the correct application based on the domain or subdomain.
+- **Performance**: Caches content to reduce load times and reduce the load on your ServiceStack applications.
+
+With an nginx reverse proxy, you can host multiple ServiceStack (or non-ServiceStack) applications on a single server while providing each with its domain or subdomain.
+
+## Additional Resources
+
+### Docker & Docker-Compose
+
+- **[Docker Documentation](https://docs.docker.com/)**: Core concepts, CLI usage, and practical applications
+- **[Docker-Compose Documentation](https://docs.docker.com/compose/)**: Define and manage multi-container applications
+
+### GitHub Actions
+
+- **[GitHub Actions Documentation](https://docs.github.com/en/actions)**: Creating workflows, managing secrets, and automation tips
+- **[Starter Workflows](https://github.com/actions/starter-workflows)**: Templates for various languages and tools
+
+### SSH & Security
+
+- **[SSH Key Management](https://www.ssh.com/academy/ssh/keygen)**: Guidelines on generating and managing SSH keys
+- **[GitHub Actions Secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets)**: Securely store and use sensitive information
\ No newline at end of file
diff --git a/MyApp/_posts/2024-02-07_servicestack-endpoint-routing.md b/MyApp/_posts/2024-02-07_servicestack-endpoint-routing.md
new file mode 100644
index 0000000..8bb44b5
--- /dev/null
+++ b/MyApp/_posts/2024-02-07_servicestack-endpoint-routing.md
@@ -0,0 +1,620 @@
+---
+title: ServiceStack Endpoint Routing
+summary: ServiceStack .NET 8 is now more integrated then ever with support for ASP.NET Core Endpoint Routing and IOC    
+tags: [servicestack,.net8,apis]
+image: https://images.unsplash.com/photo-1510022151265-1bb84d406531?crop=entropy&fit=crop&h=1000&w=2000
+author: Lucy Bates
+---
+
+In an effort to reduce friction and improve integration with ASP.NET Core Apps, we've continued the trend from last year
+for embracing ASP.NET Core's built-in features and conventions which saw the latest ServiceStack v8 release converting 
+all its newest .NET 8 templates to adopt [ASP.NET Core Identity Auth](https://docs.servicestack.net/auth/identity-auth).
+
+This is a departure from building upon our own platform-agnostic abstractions which allowed the same ServiceStack code-base
+to run on both .NET Core and .NET Framework. Our focus going forward will be to instead adopt De facto standards and conventions
+of the latest .NET platform which also means ServiceStack's new value-added features are only available in the latest **.NET 8+** release.
+
+### ServiceStack Middleware
+
+Whilst ServiceStack integrates into ASP.NET Core Apps as custom middleware into ASP.NET Core's HTTP Request Pipeline,
+it invokes its own black-box of functionality from there, implemented using its own suite of overlapping features.
+
+Whilst this allows ServiceStack to have full control over how to implement its features, it's not as integrated as it could be,
+with there being limits on what ServiceStack Functionality could be reused within external ASP .NET Core MVC Controllers, Razor Pages, etc.
+and inhibited the ability to apply application-wide authorization policies across an Application entire surface area,
+using and configuring different JSON Serialization implementations.
+
+### Areas for tighter integration
+
+The major areas we've identified that would benefit from tighter integration with ASP.NET Core include:
+
+ - [Funq IOC Container](https://docs.servicestack.net/ioc)
+ - [ServiceStack Routing](https://docs.servicestack.net/routing) and [Request Pipeline](https://docs.servicestack.net/order-of-operations)
+ - [ServiceStack.Text JSON Serializer](https://docs.servicestack.net/json-format)
+
+### ServiceStack v8.1 is fully integrated!
+
+We're happy to announce the latest release of ServiceStack v8.1 now supports utilizing the optimal ASP.NET Core's 
+standardized features to reimplement all these key areas - fostering seamless integration and greater reuse which
+you can learn about below:
+
+- [ASP.NET Core Identity Auth](https://docs.servicestack.net/auth/identity-auth)
+- [ASP.NET Core IOC](https://docs.servicestack.net/releases/v8_01#asp.net-core-ioc)
+- [Endpoint Routing](https://docs.servicestack.net/releases/v8_01#endpoint-routing)
+- [System.Text.Json APIs](https://docs.servicestack.net/releases/v8_01#system.text.json)
+- [Open API v3 and Swagger UI](https://docs.servicestack.net/releases/v8_01#openapi-v3)
+- [ASP.NET Core Identity Auth Admin UI](https://docs.servicestack.net/releases/v8_01#asp.net-core-identity-auth-admin-ui)
+- [JWT Identity Auth](https://docs.servicestack.net/releases/v8_01#jwt-identity-auth)
+
+Better yet, this new behavior is enabled by default in all of ServiceStack's new ASP .NET Identity Auth .NET 8 templates!
+
+### Migrating to ASP.NET Core Endpoints
+
+To assist ServiceStack users in upgrading their existing projects we've created a migration guide walking through
+the steps required to adopt these new defaults:
+
+:::youtube RaDHkk4tfdU
+Upgrade your APIs to use ASP.NET Core Endpoints
+:::
+
+### ASP .NET Core IOC
+
+The primary limitation of ServiceStack using its own Funq IOC is that any dependencies registered in Funq are not injected
+into Razor Pages, Blazor Components, MVC Controllers, etc. 
+
+That's why our [Modular Startup](https://docs.servicestack.net/modular-startup) configurations recommend utilizing
+custom `IHostingStartup` configurations to register application dependencies in ASP .NET Core's IOC where they can be 
+injected into both ServiceStack Services and ASP.NET Core's external components, e.g:
+
+```csharp
+[assembly: HostingStartup(typeof(MyApp.ConfigureDb))]
+
+namespace MyApp;
+
+public class ConfigureDb : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices((context, services) => {
+            services.AddSingleton<IDbConnectionFactory>(new OrmLiteConnectionFactory(
+                context.Configuration.GetConnectionString("DefaultConnection"),
+                SqliteDialect.Provider));
+        });
+}
+```
+
+But there were fundamental restrictions on what could be registered in ASP .NET Core's IOC as everything needed to be 
+registered before AspNetCore's `WebApplication` was built and before ServiceStack's AppHost could be initialized, 
+which prohibited being able to register any dependencies created by the AppHost including Services, AutoGen Services, 
+Validators and internal functionality like App Settings, Virtual File System and Caching providers, etc.
+
+## Switch to use ASP .NET Core IOC
+
+To enable ServiceStack to switch to using ASP .NET Core's IOC you'll need to move registration of all dependencies and
+Services to before the WebApplication is built by calling the `AddServiceStack()` extension method with the Assemblies
+where your ServiceStack Services are located, e.g:
+
+```csharp
+builder.Services.AddServiceStack(typeof(MyServices).Assembly);
+
+var app = builder.Build();
+
+//...
+app.UseServiceStack(new AppHost());
+```
+
+Which now registers all ServiceStack dependencies in ASP .NET Core's IOC, including all ServiceStack Services prior to
+the AppHost being initialized which no longer needs to specify the Assemblies where ServiceStack Services are created
+and no longer needs to use Funq as all dependencies should now be registered in ASP .NET Core's IOC.
+
+### Registering Dependencies and Plugins
+
+Additionally ASP.NET Core's IOC requirement for all dependencies needing to be registered before the WebApplication is 
+built means you'll no longer be able to register any dependencies or plugins in ServiceStack's `AppHost.Configure()` method.
+
+```csharp
+public class AppHost() : AppHostBase("MyApp"), IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices(services => {
+            // Register IOC Dependencies and ServiceStack Plugins
+        });
+
+    public override void Configure()
+    {
+        // DO NOT REGISTER ANY PLUGINS OR DEPENDENCIES HERE
+    }
+}
+```
+
+Instead anything that needs to register dependencies in ASP.NET Core IOC should now use the `IServiceCollection` extension methods:
+
+ - Use `IServiceCollection.Add*` APIs to register dependencies
+ - Use `IServiceCollection.AddPlugin` API to register ServiceStack Plugins
+ - Use `IServiceCollection.RegisterService*` APIs to dynamically register ServiceStack Services in external Assemblies
+
+This can be done whenever you have access to `IServiceCollection`, either in `Program.cs`:
+
+```csharp
+builder.Services.AddPlugin(new AdminDatabaseFeature());
+```
+
+Or in any Modular Startup `IHostingStartup` configuration class, e.g:
+
+```csharp
+public class ConfigureDb : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices((context, services) => {
+            services.AddSingleton<IDbConnectionFactory>(new OrmLiteConnectionFactory(
+                context.Configuration.GetConnectionString("DefaultConnection"),
+                SqliteDialect.Provider));
+            
+            // Enable Audit History
+            services.AddSingleton<ICrudEvents>(c =>
+                new OrmLiteCrudEvents(c.GetRequiredService<IDbConnectionFactory>()));
+            
+            // Enable AutoQuery RDBMS APIs
+            services.AddPlugin(new AutoQueryFeature {
+                 MaxLimit = 1000,
+            });
+
+            // Enable AutoQuery Data APIs
+            services.AddPlugin(new AutoQueryDataFeature());
+            
+            // Enable built-in Database Admin UI at /admin-ui/database
+            services.AddPlugin(new AdminDatabaseFeature());
+        })
+        .ConfigureAppHost(appHost => {
+            appHost.Resolve<ICrudEvents>().InitSchema();
+        });
+}
+```
+
+The `ConfigureAppHost()` extension method can continue to be used to execute any startup logic that requires access to 
+registered dependencies.
+
+### Authoring ServiceStack Plugins
+
+To enable ServiceStack Plugins to support both Funq and ASP .NET Core IOC, any dependencies and Services a plugin needs
+should be registered in the `IConfigureServices.Configure(IServiceCollection)` method as seen in the refactored
+[ServerEventsFeature.cs](https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack/src/ServiceStack/ServerEventsFeature.cs)
+plugin, e.g:
+
+```csharp
+public class ServerEventsFeature : IPlugin, IConfigureServices
+{
+    //...
+    public void Configure(IServiceCollection services)
+    {
+        if (!services.Exists<IServerEvents>())
+        {
+            services.AddSingleton<IServerEvents>(new MemoryServerEvents
+            {
+                IdleTimeout = IdleTimeout,
+                HouseKeepingInterval = HouseKeepingInterval,
+                OnSubscribeAsync = OnSubscribeAsync,
+                OnUnsubscribeAsync = OnUnsubscribeAsync,
+                OnUpdateAsync = OnUpdateAsync,
+                NotifyChannelOfSubscriptions = NotifyChannelOfSubscriptions,
+                Serialize = Serialize,
+                OnError = OnError,
+            });
+        }
+        
+        if (UnRegisterPath != null)
+            services.RegisterService<ServerEventsUnRegisterService>(UnRegisterPath);
+
+        if (SubscribersPath != null)
+            services.RegisterService<ServerEventsSubscribersService>(SubscribersPath);
+    }
+
+    public void Register(IAppHost appHost)
+    {
+        //...
+    }
+}
+```
+
+#### All Plugins refactored to support ASP .NET Core IOC
+
+All of ServiceStack's Plugins have been refactored to make use of `IConfigureServices` which supports registering in both 
+Funq and ASP.NET Core's IOC when enabled.  
+
+#### Funq IOC implements IServiceCollection and IServiceProvider interfaces
+
+To enable this Funq now implements both `IServiceCollection` and`IServiceProvider` interfaces to enable 100% source-code 
+compatibility for registering and resolving dependencies with either IOC, which we now recommend using over Funq's
+native Registration and Resolution APIs to simplify migration efforts to ASP.NET Core's IOC in future.
+
+## Dependency Injection
+
+The primary difference between the IOC's is that ASP.NET Core's IOC does not support property injection by default, 
+which will require you to refactor your ServiceStack Services to use constructor injection of dependencies, although
+this has become a lot more pleasant with C# 12's [Primary Constructors](https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/tutorials/primary-constructors)
+which now requires a lot less boilerplate to define, assign and access dependencies, e.g:
+
+```csharp
+public class TechStackServices(IAutoQueryDb autoQuery) : Service
+{
+    public async Task<object> Any(QueryTechStacks request)
+    {
+        using var db = autoQuery.GetDb(request, base.Request);
+        var q = autoQuery.CreateQuery(request, Request, db);
+        return await autoQuery.ExecuteAsync(request, q, db);
+    }
+}
+```
+
+This has become our preferred approach for injecting dependencies in ServiceStack Services which have all been refactored
+to use constructor injection utilizing primary constructors in order to support both IOC's.
+
+To make migrations easier we've also added support for property injection convention in **ServiceStack Services** using 
+ASP.NET Core's IOC where you can add the `[FromServices]` attribute to any public properties you want to be injected, e.g:
+
+```csharp
+public class TechStackServices : Service
+{
+    [FromServices]
+    public required IAutoQueryDb AutoQuery { get; set; }
+
+    [FromServices]
+    public MyDependency? OptionalDependency { get; set; }
+}
+```
+
+This feature can be useful for Services wanting to access optional dependencies that may or may not be registered. 
+
+:::info NOTE
+`[FromServices]` is only supported in ServiceStack Services (i.e. not other dependencies)
+:::
+
+### Built-in ServiceStack Dependencies
+
+This integration now makes it effortless to inject and utilize optional ServiceStack features like
+[AutoQuery](https://docs.servicestack.net/autoquery/) and [Server Events](https://docs.servicestack.net/server-events)
+in other parts of ASP.NET Core inc. Blazor Components, Razor Pages, MVC Controllers, Minimal APIs, etc.
+
+Whilst the Built-in ServiceStack features that are registered by default and immediately available to be injected, include:
+ - `IVirtualFiles` - Read/Write [Virtual File System](https://docs.servicestack.net/virtual-file-system), defaults to `FileSystemVirtualFiles` at `ContentRootPath`
+ - `IVirtualPathProvider` - Multi Virtual File System configured to scan multiple read only sources, inc `WebRootPath`, In Memory and Embedded Resource files  
+ - `ICacheClient` and `ICacheClientAsync` - In Memory Cache, or distributed Redis cache if [ServiceStack.Redis](https://docs.servicestack.net/redis/) is configured
+ - `IAppSettings` - Multiple [AppSettings](https://docs.servicestack.net/appsettings) configuration sources
+
+With ASP.NET Core's IOC now deeply integrated we moved onto the next area of integration: API Integration and Endpoint Routing.
+
+## Endpoint Routing
+
+Whilst ASP.NET Core's middleware is a flexible way to compose and execute different middleware in a HTTP Request pipeline,
+each middleware is effectively their own island of functionality that's able to handle HTTP Requests in which ever way
+they see fit.
+
+In particular ServiceStack's middleware would execute its own [Request Pipeline](https://docs.servicestack.net/order-of-operations) 
+which would execute ServiceStack API's registered at user-defined routes with its own [ServiceStack Routing](https://docs.servicestack.net/routing).
+
+We're happy to announce that ServiceStack **.NET 8** Apps support an entirely new and integrated way to run all of ServiceStack 
+requests including all APIs, metadata and built-in UIs with support for 
+[ASP.NET Core Endpoint Routing](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/routing) -
+enabled by calling the `MapEndpoints()` extension method when configuring ServiceStack, e.g:
+
+```csharp
+app.UseServiceStack(new AppHost(), options => {
+    options.MapEndpoints();
+});
+```
+
+Which configures ServiceStack APIs to be registered and executed along-side Minimal APIs, Razor Pages, SignalR, MVC 
+and Web API Controllers, etc, utilizing the same routing, metadata and execution pipeline.
+
+#### View ServiceStack APIs along-side ASP.NET Core APIs
+
+Amongst other benefits, this integration is evident in endpoint metadata explorers like the `Swashbuckle` library 
+which can now show ServiceStack APIs in its Swagger UI along-side other ASP.NET Core APIs in ServiceStack's new
+[Open API v3](/posts/openapi-v3) support.
+
+### Routing
+
+Using Endpoint Routing also means using ASP.NET Core's Routing System which now lets you use ASP.NET Core's
+[Route constraints](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/routing#route-constraints)
+for defining user-defined routes for your ServiceStack APIs, e.g:
+
+```csharp
+[Route("/users/{Id:int}")]
+[Route("/users/{UserName:string}")]
+public class GetUser : IGet, IReturn<User>
+{
+    public int? Id { get; set; }
+    public int? UserName { get; set; }
+}
+```
+
+For the most part ServiceStack Routing implements a subset of ASP.NET Core's Routing features so your existing user-defined 
+routes should continue to work as expected. 
+
+### Wildcard Routes
+
+The only incompatibility we found was when using wildcard paths which in ServiceStack Routing would use an '*' suffix, e.g:
+`[Route("/wildcard/{Path*}")]` which will need to change to use a ASP.NET Core's Routing prefix, e.g: 
+
+```csharp
+[Route("/wildcard/{*Path}")]
+[Route("/wildcard/{**Path}")]
+public class GetFile : IGet, IReturn<byte[]>
+{
+    public string Path { get; set; }
+}
+```
+
+#### ServiceStack Routing Compatibility
+
+To improve compatibility with ASP.NET Core's Routing, ServiceStack's Routing (when not using Endpoint Routing) now 
+supports parsing ASP.NET Core's Route Constraints but as they're inert you would need to continue to use
+[Custom Route Rules](https://docs.servicestack.net/routing#custom-rules) to distinguish between different routes matching 
+the same path at different specificity:
+
+```csharp
+[Route("/users/{Id:int}", Matches = "**/{int}")]
+[Route("/users/{UserName:string}")]
+public class GetUser : IGet, IReturn<User>
+{
+    public int? Id { get; set; }
+    public int? UserName { get; set; }
+}
+```
+
+It also supports defining Wildcard Routes using ASP.NET Core's syntax which we now recommend using instead 
+for compatibility when switching to use Endpoint Routing:
+
+```csharp
+[Route("/wildcard/{*Path}")]
+[Route("/wildcard/{**Path}")]
+public class GetFile : IGet, IReturn<byte[]>
+{
+    public string Path { get; set; }
+}
+```
+
+### Primary HTTP Method
+
+Another difference is that an API will only register its Endpoint Route for its [primary HTTP Method](https://docs.servicestack.net/api-design#all-apis-have-a-preferred-default-method),
+if you want an API to be registered for multiple HTTP Methods you can specify them in the `Route` attribute, e.g:
+
+```csharp
+[Route("/users/{Id:int}", "GET,POST")]
+public class GetUser : IGet, IReturn<User>
+{
+    public required int Id { get; set; }
+}
+```
+
+As such we recommend using the IVerb `IGet`, `IPost`, `IPut`, `IPatch`, `IDelete` interface markers to specify the primary HTTP Method
+for an API. This isn't needed for [AutoQuery Services](https://docs.servicestack.net/autoquery/) which are implicitly configured
+to use their optimal HTTP Method.
+
+If no HTTP Method is specified, the Primary HTTP Method defaults to HTTP **POST**.
+
+### Authorization
+
+Using Endpoint Routing also means ServiceStack's APIs are authorized the same way, where ServiceStack's 
+[Declarative Validation attributes](https://docs.servicestack.net/auth/#declarative-validation-attributes) are converted
+into ASP.NET Core's `[Authorize]` attribute to secure the endpoint:
+
+```csharp
+[ValidateIsAuthenticated]
+[ValidateIsAdmin]
+[ValidateHasRole(role)]
+[ValidateHasClaim(type,value)]
+[ValidateHasScope(scope)]
+public class Secured {}
+```
+
+#### Authorize Attribute on ServiceStack APIs
+
+Alternatively you can now use ASP.NET Core's `[Authorize]` attribute directly to secure ServiceStack APIs should
+you need more fine-grained Authorization:
+
+```csharp
+[Authorize(Roles = "RequiredRole")]
+[Authorize(Policy = "RequiredPolicy")]
+[Authorize(AuthenticationSchemes = "Identity.Application,Bearer")]
+public class Secured {}
+```
+
+#### Configuring Authentication Schemes
+
+ServiceStack will default to using the major Authentication Schemes configured for your App to secure the APIs endpoint with, 
+this can be overridden to specify which Authentication Schemes to use to restrict ServiceStack APIs by default, e.g:
+
+```csharp
+app.UseServiceStack(new AppHost(), options => {
+    options.AuthenticationSchemes = "Identity.Application,Bearer";
+    options.MapEndpoints();
+});
+```
+
+### Hidden ServiceStack Endpoints
+
+Whilst ServiceStack Requests are registered and executed as endpoints, most of them are marked with
+`builder.ExcludeFromDescription()` to hide them from polluting metadata and API Explorers like Swagger UI and 
+[API Explorer](https://docs.servicestack.net/api-explorer).
+
+To also hide your ServiceStack APIs you can use `[ExcludeMetadata]` attribute to hide them from all metadata services
+or use `[Exclude(Feature.ApiExplorer)]` to just hide them from API Explorer UIs:
+
+```csharp
+[ExcludeMetadata]
+[Exclude(Feature.ApiExplorer)]
+public class HiddenRequest {}
+```
+
+### Content Negotiation
+
+An example of these hidden routes is the support for invoking and returning ServiceStack APIs in different Content Types
+via hidden Endpoint Routes mapped with the format `/api/{Request}.{format}`, e.g:
+
+- [/api/QueryBookings](https://blazor-vue.web-templates.io/api/QueryBookings)
+- [/api/QueryBookings.jsonl](https://blazor-vue.web-templates.io/api/QueryBookings.jsonl)
+- [/api/QueryBookings.csv](https://blazor-vue.web-templates.io/api/QueryBookings.csv)
+- [/api/QueryBookings.xml](https://blazor-vue.web-templates.io/api/QueryBookings.xml)
+- [/api/QueryBookings.html](https://blazor-vue.web-templates.io/api/QueryBookings.html)
+
+#### Query String Format
+
+That continues to support specifying the Mime Type via the `?format` query string, e.g:
+ 
+- [/api/QueryBookings?format=jsonl](https://blazor-vue.web-templates.io/api/QueryBookings?format=jsonl)
+- [/api/QueryBookings?format=csv](https://blazor-vue.web-templates.io/api/QueryBookings?format=csv)
+
+### Predefined Routes
+
+Endpoints are only created for the newer `/api/{Request}` [pre-defined routes](https://docs.servicestack.net/routing#pre-defined-routes),
+which should be easier to use with less conflicts now that ServiceStack APIs are executed along-side other endpoint routes 
+APIs which can share the same `/api` base path with non-conflicting routes, e.g: `app.MapGet("/api/minimal-api")`.
+
+As a result clients configured to use the older `/json/reply/{Request}` pre-defined route will need to be configured
+to use the newer `/api` base path.
+
+No change is required for C#/.NET clients using the recommended `JsonApiClient` JSON Service Client which is already
+configured to use the newer `/api` base path.
+
+```csharp
+var client = new JsonApiClient(baseUri);
+```
+
+Older .NET clients can be configured to use the newer `/api` pre-defined routes with:
+
+```csharp
+var client = new JsonServiceClient(baseUri) {
+    UseBasePath = "/api"
+};
+var client = new JsonHttpClient(baseUri) {
+    UseBasePath = "/api"
+};
+```
+
+To further solidify that `/api` as the preferred pre-defined route we've also **updated all generic service clients** of
+other languages to use `/api` base path by default:
+
+#### JavaScript/TypeScript
+
+```ts
+const client = new JsonServiceClient(baseUrl)
+```
+
+#### Dart
+
+```dart
+var client = ClientFactory.api(baseUrl);
+```
+
+#### Java/Kotlin
+
+```java
+JsonServiceClient client = new JsonServiceClient(baseUrl);
+```
+
+#### Python
+
+```python
+client = JsonServiceClient(baseUrl)
+```
+
+#### PHP
+
+```php
+$client = new JsonServiceClient(baseUrl);
+```
+
+### Revert to Legacy Predefined Routes
+
+You can unset the base path to revert back to using the older `/json/reply/{Request}` pre-defined route, e.g:
+
+#### JavaScript/TypeScript
+
+```ts
+client.basePath = null;
+```
+
+#### Dart
+
+```dart
+var client = ClientFactory.create(baseUrl);
+```
+
+#### Java/Kotlin
+
+```java
+client.setBasePath();
+```
+
+#### Python
+
+```python
+client.set_base_path()
+```
+
+#### PHP
+
+```php
+$client->setBasePath();
+```
+
+### Customize Endpoint Mapping
+
+You can register a RouteHandlerBuilders to customize how ServiceStack APIs endpoints are registered which is also
+what ServiceStack uses to annotate its API endpoints to enable its new [Open API v3](/posts/openapi-v3) support:
+
+```csharp
+options.RouteHandlerBuilders.Add((builder, operation, method, route) =>
+{
+    builder.WithOpenApi(op => { ... });
+});
+```
+
+### Endpoint Routing Compatibility Levels
+
+The default behavior of `MapEndpoints()` is the strictest and recommended configuration that we want future ServiceStack Apps to use,
+however if you're migrating existing App's you may want to relax these defaults to improve compatibility with existing behavior.
+
+The configurable defaults for mapping endpoints are:
+
+```csharp
+app.UseServiceStack(new AppHost(), options => {
+    options.MapEndpoints(use:true, force:true, useSystemJson:UseSystemJson.Always);
+});
+```
+
+- `use` - Whether to use registered endpoints for executing ServiceStack APIs
+- `force` - Whether to only allow APIs to be executed through endpoints
+- `useSystemJson` - Whether to use System.Text.Json for JSON API Serialization
+
+So you could for instance register endpoints and not `use` them, where they'll be visible in endpoint API explorers like
+[Swagger UI](https://docs.servicestack.net/releases/v8_01#openapi-v3) but continue to execute in ServiceStack's Request Pipeline.
+
+`force` disables fallback execution of ServiceStack Requests through ServiceStack's Request Pipeline for requests that
+don't match registered endpoints. You may need to disable this if you have clients calling ServiceStack APIs through
+multiple HTTP Methods, as only the primary HTTP Method is registered as an endpoint.
+
+When enabled `force` ensures the only ServiceStack Requests that are not executed through registered endpoints are
+`IAppHost.CatchAllHandlers` and `IAppHost.FallbackHandler` handlers.
+
+`useSystemJson` is a new feature that lets you specify when to use `System.Text.Json` for JSON API Serialization, which
+is our next exciting feature to standardize on using  
+[ASP.NET Core's fast async System.Text.Json](https://docs.servicestack.net/releases/v8_01#system.text.json) Serializer.
+
+## Endpoint Routing Everywhere
+
+Whilst the compatibility levels of Endpoint Routing can be relaxed, we recommend new projects use the strictest and most
+integrated defaults that's now configured on all [ASP.NET Core Identity Auth .NET 8 Projects](/start).
+
+For additional testing we've also upgraded many of our existing .NET Example Applications, which are now all running with 
+our latest recommended Endpoint Routing configuration:
+
+ - [BlazorDiffusionVue](https://github.com/NetCoreApps/BlazorDiffusionVue)
+ - [BlazorDiffusionAuto](https://github.com/NetCoreApps/BlazorDiffusionAuto)
+ - [TalentBlazor](https://github.com/NetCoreApps/TalentBlazor)
+ - [TechStacks](https://github.com/NetCoreApps/TechStacks)
+ - [Validation](https://github.com/NetCoreApps/Validation)
+ - [NorthwindAuto](https://github.com/NetCoreApps/NorthwindAuto)
+ - [FileBlazor](https://github.com/NetCoreApps/FileBlazor)
+ - [Chinook](https://github.com/NetCoreApps/Chinook)
+ - [Chat](https://github.com/NetCoreApps/Chat)
diff --git a/MyApp/_posts/2024-02-08_openapi-v3.md b/MyApp/_posts/2024-02-08_openapi-v3.md
new file mode 100644
index 0000000..1ab147d
--- /dev/null
+++ b/MyApp/_posts/2024-02-08_openapi-v3.md
@@ -0,0 +1,201 @@
+---
+title: OpenAPI v3 and Swagger UI
+summary: A walkthrough of the new OpenAPI v3 support in ServiceStack 8.1
+tags: [openapi,.net8]
+image: https://images.unsplash.com/photo-1496478981722-3ae516118a04?crop=entropy&fit=crop&h=1000&w=2000
+author: Brandon Foley
+---
+
+In the ServiceStack v8.1 release, we have introduced a way to better incorporate your ServiceStack APIs into the larger 
+ASP.NET Core ecosystem by mapping your ServiceStack APIs to standard [ASP.NET Core Endpoints](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/routing?view=aspnetcore-8.0#endpoints). 
+This enables your ServiceStack APIs integrate with your larger ASP.NET Core application in the same way other 
+middleware does, opening up more opportunities for reuse of your ServiceStack APIs.
+
+This opens up the ability to use common third party tooling. A good example of this is adding OpenAPI v3 specification 
+generation for your endpoints offered by the `Swashbuckle.AspNetCore` package.
+
+:::youtube zAq9hp7ojn4
+.NET 8 Open API v3 and Swagger UI
+:::
+
+Included in the v8.1 Release is the `ServiceStack.AspNetCore.OpenApi` package to make this integration 
+as easy as possible, and incorporate additional information from your ServiceStack APIs into Swagger metadata.
+
+![](https://servicestack.net/img/posts/openapi-v3/openapi-v3-swagger-ui.png)
+
+Previously, without the ability to map Endpoints, we've maintained a ServiceStack specific OpenAPI specification generation 
+via the `OpenApiFeature` plugin. While this provided a lot of functionality by accurately describing your ServiceStack APIs, 
+it could be tricky to customize those API descriptions to the way some users wanted to.
+
+In this post we will look at how you can take advantage of the new OpenAPI v3 Swagger support using mapped Endpoints, 
+customizing the generated specification, as well as touch on other related changes to ServiceStack v8.1.
+
+## AppHost Initialization
+
+To use ServiceStack APIs as mapped Endpoints, the way ServiceStack is initialized in . 
+To convert your App to use [Endpoint Routing and ASP.NET Core IOC](/posts/servicestack-endpoint-routing) your ASPNET Core 
+application needs to be updated to replace any usage of `Funq` IoC container to use ASP.NET Core's IOC.
+
+Previously, the following was used to initialize your ServiceStack `AppHost`:
+
+#### Program.cs
+```csharp
+app.UseServiceStack(new AppHost());
+```
+
+The `app` in this example is a `WebApplication` resulting from an `IHostApplicationBuilder` calling `builder.Build()`. 
+
+Whilst we still need to call `app.UseServiceStack()`, we also need to move the discovery of your ServiceStack APIs to earlier 
+in the setup before the `WebApplication` is built, e.g:
+
+```csharp
+// Register ServiceStack APIs, Dependencies and Plugins:
+services.AddServiceStack(typeof(MyServices).Assembly);
+
+var app = builder.Build();
+//...
+
+// Register ServiceStack AppHost
+app.UseServiceStack(new AppHost(), options => {
+    options.MapEndpoints();
+});
+
+app.Run();
+```
+
+Once configured to use Endpoint Routing we can the [mix](https://docs.servicestack.net/mix-tool) tool to apply the 
+[openapi3](https://gist.github.com/gistlyn/dac47b68e77796902cde0f0b7b9c6ac2) Startup Configuration with:
+
+:::sh
+x mix openapi3
+:::
+
+### Manually Configure OpenAPI v3 and Swagger UI 
+
+This will install the required ASP.NET Core Microsoft, Swashbuckle and ServiceStack Open API NuGet packages:
+
+```xml
+<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="8.*" />
+<PackageReference Include="Swashbuckle.AspNetCore" Version="6.*" />
+<PackageReference Include="ServiceStack.AspNetCore.OpenApi" Version="8.*" />
+```
+
+Then add the `Configure.OpenApi.cs` [Modular Startup](https://docs.servicestack.net/modular-startup) class to your project:
+
+```csharp
+[assembly: HostingStartup(typeof(MyApp.ConfigureOpenApi))]
+
+namespace MyApp;
+
+public class ConfigureOpenApi : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices((context, services) =>
+        {
+            if (context.HostingEnvironment.IsDevelopment())
+            {
+                services.AddEndpointsApiExplorer();
+                services.AddSwaggerGen(); // Swashbuckle
+
+                services.AddServiceStackSwagger();
+                services.AddBasicAuth<ApplicationUser>(); // Enable HTTP Basic Auth
+                //services.AddJwtAuth(); // Enable & Use JWT Auth
+
+                services.AddTransient<IStartupFilter, StartupFilter>();
+            }
+        });
+
+    public class StartupFilter : IStartupFilter
+    {
+        public Action<IApplicationBuilder> Configure(Action<IApplicationBuilder> next)
+            => app => {
+                // Provided by Swashbuckle library
+                app.UseSwagger();
+                app.UseSwaggerUI();
+                next(app);
+            };
+    }
+}
+```
+
+
+All this setup is done for you in ServiceStack's updated [Identity Auth .NET 8 Templates](https://servicestack.net/start), 
+but for existing applications, you will need to do 
+[convert to use Endpoint Routing](https://docs.servicestack.net/endpoints-migration) to support this new way of running your 
+ServiceStack applications.
+
+## More Control
+
+One point of friction with our previous `OpenApiFeature` plugin was the missing customization ability to the OpenAPI spec to somewhat disconnect from the defined ServiceStack service, and related C# Request and Response Data Transfer Objects (DTOs). Since the `OpenApiFeature` plugin used class and property attributes on your Request DTOs, making the *structure* of the OpenAPI schema mapping quite ridged, preventing the ability for certain customizations.
+
+For example, if we have an `UpdateTodo` Request DTO that looks like the following:
+
+```csharp
+[Route("/todos/{Id}", "PUT")]
+public class UpdateTodo : IPut, IReturn<Todo>
+{
+    public long Id { get; set; }
+    [ValidateNotEmpty]
+    public string Text { get; set; }
+    public bool IsFinished { get; set; }
+}
+```
+
+Previously, we would get a default Swagger UI that enabled all the properties as `Paramters` to populate.
+
+![](https://servicestack.net/img/posts/openapi-v3/openapi-v2-defaults.png)
+
+While this correctly describes the Request DTO structure, sometimes as developers we get requirements for how we want to present our APIs to our users from within the Swagger UI. 
+
+With the updated SwaggerUI, and the use of the `Swashbuckle` library, we get the following UI by default.
+
+![](https://servicestack.net/img/posts/openapi-v3/openapi-v3-defaults-application-json.png)
+
+These are essentially the same, we have a CRUD Todo API that takes a `UpdateTodo` Request DTO, and returns a `Todo` Response DTO. ServiceStack needs to have uniquely named Request DTOs, so we can't have a `Todo` schema as the Request DTO despite the fact that it is the same structure as our `Todo` model. 
+This is a good thing, as it allows us to have a clean API contract, and separation of concerns between our Request DTOs and our models. 
+However, it might not be desired to present this to our users, since it can be convenient to think about CRUD services as taking the same resource type as the response.
+
+To achieve this, we use the Swashbuckle library to customize the OpenAPI spec generation. Depending on what you want to customize, you can use the `SchemaFilter` or `OperationFilter` options. In this case, we want to customize the matching operation to reference the `Todo` schema for the Request Body.
+
+First, we create a new class that implements the `IOperationFilter` interface.
+
+```csharp
+public class OperationRenameFilter : IOperationFilter
+{
+    public void Apply(OpenApiOperation operation, OperationFilterContext context)
+    {
+        if (context.ApiDescription.HttpMethod == "PUT" &&
+            context.ApiDescription.RelativePath == "todos/{Id}")
+        {
+            operation.RequestBody.Content["application/json"].Schema.Reference = 
+                new OpenApiReference {
+                    Type = ReferenceType.Schema,
+                    Id = "Todo"
+                };
+        }
+    }
+}
+```
+
+The above matches some information about the `UpdateTodo` request we want to customize, and then sets the `Reference` property of the `RequestBody` to the `Todo` schema.
+We can then add this to the `AddSwaggerGen` options in the `Program.cs` file.
+
+```csharp
+builder.Services.AddSwaggerGen(o =>
+{
+    o.OperationFilter<OperationRenameFilter>();
+});
+```
+
+The result is the following Swagger UI.
+
+![](https://servicestack.net/img/posts/openapi-v3/openapi-v3-customized-application-json.png)
+
+This is just one simple example of how you can customize the OpenAPI spec generation, and `Swashbuckle` has some great documentation on the different ways you can customize the generated spec.
+And these customizations impact any of your ASP.NET Core Endpoints, not just your ServiceStack APIs.
+
+## Closing
+
+Now that ServiceStack APIs can be mapped to standard ASP.NET Core Endpoints, it opens up a lot of possibilities for integrating your ServiceStack APIs into the larger ASP.NET Core ecosystem. 
+The use of the `Swashbuckle` library via the `ServiceStack.AspNetCore.OpenApi` library is just one example of how you can take advantage of this new functionality.
+
diff --git a/MyApp/_posts/2024-02-09_system-text-json-apis.md b/MyApp/_posts/2024-02-09_system-text-json-apis.md
new file mode 100644
index 0000000..fb4dab3
--- /dev/null
+++ b/MyApp/_posts/2024-02-09_system-text-json-apis.md
@@ -0,0 +1,213 @@
+---
+title: System.Text.Json ServiceStack APIs
+summary: ServiceStack .NET 8+ APIs can now be configured to use high-performance async System.Text.Json serialization  
+tags: [servicestack,.net8,json,apis]
+image: https://images.unsplash.com/photo-1644325349124-d1756b79dd42?crop=entropy&fit=crop&h=1000&w=2000
+author: Gayle Smith
+---
+
+In continuing our focus to enable ServiceStack to become a deeply integrated part of .NET 8 Application's, ServiceStack
+latest .NET 8 templates now default to using standardized ASP.NET Core features wherever possible, including:
+
+- [ASP.NET Core Identity Auth](/posts/net8-identity-auth)
+- [ASP.NET Core IOC](/posts/servicestack-endpoint-routing#asp.net-core-ioc)
+- [Endpoint Routing](/posts/servicestack-endpoint-routing#endpoint-routing)
+- [Swashbuckle for Open API v3 and Swagger UI](/posts/openapi-v3-support)
+- [System.Text.Json APIs](/posts/system-text-json-apis)
+
+This reduces friction for integrating ServiceStack into existing .NET 8 Apps, encourages greater knowledge and reuse and
+simplifies .NET development as developers have a reduced number of concepts to learn, fewer technology implementations to
+configure and maintain that are now applied across their entire .NET App.
+
+The last integration piece supported was utilizing **System.Text.Json** - the default high-performance async JSON serializer
+used in .NET Applications, can now be used by ServiceStack APIs to serialize and deserialize its JSON API Responses
+that's enabled by default when using **Endpoint Routing**.
+
+This integrates ServiceStack APIs more than ever where just like Minimal APIs and Web API,
+uses **ASP.NET Core's IOC** to resolve dependencies, uses **Endpoint Routing** to Execute APIs that's secured with
+**ASP.NET Core Identity Auth** then uses **System.Text.Json** to deserialize and serialize its JSON payloads.
+
+
+### Enabled by Default when using Endpoint Routing
+
+```csharp
+app.UseServiceStack(new AppHost(), options => {
+    options.MapEndpoints();
+});
+```
+
+### Enhanced Configuration
+
+ServiceStack uses a custom `JsonSerializerOptions` to improve compatibility with existing ServiceStack DTOs and
+ServiceStack's rich ecosystem of generic [Add ServiceStack Reference](https://docs.servicestack.net/add-servicestack-reference)
+Service Clients, which is configured to:
+
+- Not serialize `null` properties
+- Supports Case Insensitive Properties
+- Uses `CamelCaseNamingPolicy` for property names
+- Serializes `TimeSpan` and `TimeOnly` Data Types with [XML Schema Time format](https://www.w3.org/TR/xmlschema-2/#isoformats)
+- Supports `[DataContract]` annotations
+- Supports Custom Enum Serialization
+
+### Benefits all Add ServiceStack Reference Languages
+
+This compatibility immediately benefits all of ServiceStack's [Add ServiceStack Reference](https://docs.servicestack.net/add-servicestack-reference)
+native typed integrations for **11 programming languages** which all utilize ServiceStack's JSON API endpoints - now serialized with System.Text.Json
+
+### Support for DataContract Annotations
+
+Support for .NET's `DataContract` serialization attributes was added using a custom `TypeInfoResolver`, specifically it supports:
+
+- `[DataContract]` - When annotated, only `[DataMember]` properties are serialized
+- `[DataMember]` - Specify a custom **Name** or **Order** of properties
+- `[IgnoreDataMember]` - Ignore properties from serialization
+- `[EnumMember]` - Specify a custom value for Enum values
+
+### Custom Enum Serialization
+
+Below is a good demonstration of the custom Enum serialization support which matches ServiceStack.Text's behavior:
+
+```csharp
+public enum EnumType { Value1, Value2, Value3 }
+
+[Flags]
+public enum EnumTypeFlags { Value1, Value2, Value3 }
+
+public enum EnumStyleMembers
+{
+    [EnumMember(Value = "lower")]
+    Lower,
+    [EnumMember(Value = "UPPER")]
+    Upper,
+}
+
+return new EnumExamples {
+    EnumProp = EnumType.Value2, // String value by default
+    EnumFlags = EnumTypeFlags.Value2 | EnumTypeFlags.Value3, // [Flags] as int
+    EnumStyleMembers = EnumStyleMembers.Upper, // Serializes [EnumMember] value
+    NullableEnumProp = null, // Ignores nullable enums
+};
+```
+
+Which serializes to:
+
+```json
+{
+  "enumProp": "Value2",
+  "enumFlags": 3,
+  "enumStyleMembers": "UPPER"
+}
+```
+
+### Custom Configuration
+
+You can further customize the `JsonSerializerOptions` used by ServiceStack by using `ConfigureJsonOptions()` to add
+any customizations that you can optionally apply to ASP.NET Core's JSON APIs and MVC with:
+
+```csharp
+builder.Services.ConfigureJsonOptions(options => {
+    options.PropertyNamingPolicy = JsonNamingPolicy.SnakeCaseLower;
+})
+.ApplyToApiJsonOptions()  // Apply to ASP.NET Core's JSON APIs
+.ApplyToMvcJsonOptions(); // Apply to MVC
+```
+
+### Control over when and where System.Text.Json is used
+
+Whilst `System.Text.Json` is highly efficient, it's also very strict in the inputs it accepts where you may want to
+revert back to using ServiceStack's JSON Serializer for specific APIs, especially when you need to support external
+clients that can't be updated.
+
+This can done by annotating Request DTOs with `[SystemJson]` attribute, e.g: you can limit to only use `System.Text.Json`
+for an **APIs Response** with:
+
+```csharp
+[SystemJson(UseSystemJson.Response)]
+public class CreateUser : IReturn<IdResponse>
+{
+    //...
+}
+```
+
+Or limit to only use `System.Text.Json` for an **APIs Request** with:
+
+```csharp
+[SystemJson(UseSystemJson.Request)]
+public class CreateUser : IReturn<IdResponse>
+{
+    //...
+}
+```
+
+Or not use `System.Text.Json` at all for an API with:
+
+```csharp
+[SystemJson(UseSystemJson.Never)]
+public class CreateUser : IReturn<IdResponse>
+{
+    //...
+}
+```
+
+### JsonApiClient Support
+
+When Endpoints Routing is configured, the `JsonApiClient` will also be configured to utilize the same `System.Text.Json`
+options to send and receive its JSON API Requests which also respects the `[SystemJson]` specified behavior.
+
+Clients external to the .NET App can be configured to use `System.Text.Json` with:
+
+```csharp
+ClientConfig.UseSystemJson = UseSystemJson.Always;
+```
+
+Whilst any custom configuration can be applied to its `JsonSerializerOptions` with:
+
+```csharp
+TextConfig.ConfigureSystemJsonOptions(options => {
+    options.PropertyNamingPolicy = JsonNamingPolicy.SnakeCaseLower;
+});
+```
+
+### Scoped JSON Configuration
+
+We've also added partial support for [Customized JSON Responses](https://docs.servicestack.net/customize-json-responses)
+for the following customization options:
+
+:::{.table,w-full}
+| Name                         | Alias |
+|------------------------------|-------|
+| EmitCamelCaseNames           | eccn  |
+| EmitLowercaseUnderscoreNames | elun  |
+| EmitPascalCaseNames          | epcn  |
+| ExcludeDefaultValues         | edv   |
+| IncludeNullValues            | inv   |
+| Indent                       | pp    |
+:::
+
+These can be applied to the JSON Response by returning a decorated `HttpResult` with a custom `ResultScope`, e.g:
+
+```csharp
+return new HttpResult(responseDto) {
+    ResultScope = () => 
+        JsConfig.With(new() { IncludeNullValues = true, ExcludeDefaultValues = true })
+};
+```
+
+They can also be requested by API consumers by adding a `?jsconfig` query string with the desired option or its alias, e.g:
+
+```csharp
+/api/MyRequest?jsconfig=EmitLowercaseUnderscoreNames,ExcludeDefaultValues
+/api/MyRequest?jsconfig=eccn,edv
+```
+
+### SystemJsonCompatible
+
+Another configuration automatically applied when `System.Text.Json` is enabled is:
+
+```csharp
+JsConfig.SystemJsonCompatible = true;
+```
+
+Which is being used to make ServiceStack's JSON Serializer more compatible with `System.Text.Json` output so it's easier
+to switch between the two with minimal effort and incompatibility. Currently this is only used to override
+`DateTime` and `DateTimeOffset` behavior which uses `System.Text.Json` for its Serialization/Deserialization.
diff --git a/MyApp/_posts/2024-02-10_identity-auth-admin-ui.md b/MyApp/_posts/2024-02-10_identity-auth-admin-ui.md
new file mode 100644
index 0000000..16ac948
--- /dev/null
+++ b/MyApp/_posts/2024-02-10_identity-auth-admin-ui.md
@@ -0,0 +1,166 @@
+---
+title: Built-In Identity Auth Admin UI
+summary: Explore the new Identity Auth Admin UI for creating and managing Identity Auth users in .NET 8  
+tags: [servicestack,.net8,auth]
+image: https://images.unsplash.com/photo-1563920443079-783e5c786b83?crop=entropy&fit=crop&h=1000&w=2000
+author: Lucy Bates
+---
+
+With ServiceStack now [deeply integrated into ASP.NET Core Apps](/posts/servicestack-endpoint-routing) we're back to
+refocusing on adding value-added features that can benefit all .NET Core Apps.
+
+## Registration
+
+The new Identity Auth Admin UI is an example of this, which can be enabled when registering the `AuthFeature` Plugin:
+
+```csharp
+public class ConfigureAuth : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices(services => {
+            services.AddPlugin(new AuthFeature(IdentityAuth.For<ApplicationUser>(
+                options => {
+                    options.SessionFactory = () => new CustomUserSession();
+                    options.CredentialsAuth();
+                    options.AdminUsersFeature();
+                })));
+        });
+}
+```
+
+Which just like the ServiceStack Auth [Admin Users UI](https://docs.servicestack.net/admin-ui-users) enables a
+Admin UI that's only accessible to **Admin** Users for managing **Identity Auth** users at `/admin-ui/users`.
+
+## User Search Results
+
+Which displays a limited view due to the minimal properties on the default `IdentityAuth` model:
+
+<div style="height:580px">
+    <img class="absolute left-0 right-0 mx-auto shadow" style="max-width:1496px" 
+         src="https://servicestack.net/img/posts/identity-auth-admin-ui/admin-ui-users-default.png">
+</div>
+
+### Custom Search Result Properties
+
+These User's search results are customizable by specifying the `ApplicationUser` properties to display instead, e.g:
+
+```csharp
+options.AdminUsersFeature(feature =>
+{
+    feature.QueryIdentityUserProperties =
+    [
+        nameof(ApplicationUser.Id),
+        nameof(ApplicationUser.DisplayName),
+        nameof(ApplicationUser.Email),
+        nameof(ApplicationUser.UserName),
+        nameof(ApplicationUser.LockoutEnd),
+    ];
+});
+```
+
+<div style="height:580px">
+    <img class="absolute left-0 right-0 mx-auto shadow" style="max-width:1496px" 
+         src="https://servicestack.net/img/posts/identity-auth-admin-ui/admin-ui-users-custom.png">
+</div>
+
+### Custom Search Result Behavior
+
+The default display Order of Users is also customizable:
+
+```csharp
+feature.DefaultOrderBy = nameof(ApplicationUser.DisplayName);
+```
+
+As well as the Search behavior which can be replaced to search any custom fields, e.g:
+
+```csharp
+feature.SearchUsersFilter = (q, query) =>
+{
+    var queryUpper = query.ToUpper();
+    return q.Where(x =>
+        x.DisplayName!.Contains(query) ||
+        x.Id.Contains(queryUpper) ||
+        x.NormalizedUserName!.Contains(queryUpper) ||
+        x.NormalizedEmail!.Contains(queryUpper));
+};
+```
+
+## Default Create and Edit Users Forms
+
+The default Create and Edit Admin Users UI are also limited to editing the minimal `IdentityAuth` properties:
+
+<div style="height:640px">
+    <img class="absolute left-0 right-0 mx-auto shadow" style="max-width:1200px" 
+         src="https://servicestack.net/img/posts/identity-auth-admin-ui/admin-ui-users-create.png">
+</div>
+
+Whilst the Edit page includes standard features to lockout users, change user passwords and manage their roles:
+
+<div style="height:650px">
+    <img class="absolute left-0 right-0 mx-auto shadow" style="max-width:1200px" 
+         src="https://servicestack.net/img/posts/identity-auth-admin-ui/admin-ui-users-edit.png">
+</div>
+
+### Custom Create and Edit Forms
+
+By default Users are locked out indefinitely, but this can also be changed to lock users out to a specific date, e.g:
+
+```csharp
+feature.ResolveLockoutDate = user => DateTimeOffset.Now.AddDays(7);
+```
+
+The forms editable fields can also be customized to include additional properties, e.g:
+
+```csharp
+feature.FormLayout =
+[
+    Input.For<ApplicationUser>(x => x.UserName, c => c.FieldsPerRow(2)),
+    Input.For<ApplicationUser>(x => x.Email, c => { 
+        c.Type = Input.Types.Email;
+        c.FieldsPerRow(2); 
+    }),
+    Input.For<ApplicationUser>(x => x.FirstName, c => c.FieldsPerRow(2)),
+    Input.For<ApplicationUser>(x => x.LastName, c => c.FieldsPerRow(2)),
+    Input.For<ApplicationUser>(x => x.DisplayName, c => c.FieldsPerRow(2)),
+    Input.For<ApplicationUser>(x => x.PhoneNumber, c =>
+    {
+        c.Type = Input.Types.Tel;
+        c.FieldsPerRow(2); 
+    }),
+];
+```
+
+That can override the new `ApplicationUser` Model that's created and any Validation:
+
+### Custom User Creation
+
+```csharp
+feature.CreateUser = () => new ApplicationUser { EmailConfirmed = true };
+feature.CreateUserValidation = async (req, createUser) =>
+{
+    await IdentityAdminUsers.ValidateCreateUserAsync(req, createUser);
+    var displayName = createUser.GetUserProperty(nameof(ApplicationUser.DisplayName));
+    if (string.IsNullOrEmpty(displayName))
+        throw new ArgumentNullException(nameof(AdminUserBase.DisplayName));
+    return null;
+};
+```
+
+<div style="height:640px">
+    <img class="absolute left-0 right-0 mx-auto shadow" style="max-width:1200px" 
+         src="https://servicestack.net/img/posts/identity-auth-admin-ui/admin-ui-users-create-custom.png">
+</div>
+
+### Admin User Events
+
+Should you need to, Admin User Events can use used to execute custom logic before and after creating, updating and 
+deleting users, e.g:
+
+```csharp
+feature.OnBeforeCreateUser = (request, user) => { ... };
+feature.OnAfterCreateUser  = (request, user) => { ... };
+feature.OnBeforeUpdateUser = (request, user) => { ... };
+feature.OnAfterUpdateUser  = (request, user) => { ... };
+feature.OnBeforeDeleteUser = (request, userId) => { ... };
+feature.OnAfterDeleteUser  = (request, userId) => { ... };
+```
diff --git a/MyApp/_posts/2024-02-11_jwt-identity-auth.md b/MyApp/_posts/2024-02-11_jwt-identity-auth.md
new file mode 100644
index 0000000..d7085e0
--- /dev/null
+++ b/MyApp/_posts/2024-02-11_jwt-identity-auth.md
@@ -0,0 +1,238 @@
+---
+title: ASP.NET Core JWT Identity Auth
+summary: Learn about integration and value added features of ASP.NET Core JWT Identity Auth   
+tags: [servicestack,.net8,auth]
+image: https://images.unsplash.com/photo-1618482914248-29272d021005?crop=entropy&fit=crop&h=1000&w=2000
+author: Brandon Foley
+---
+
+JWTs enable stateless authentication of clients without servers needing to maintain any Auth state in server infrastructure
+or perform any I/O to validate a token. As such,
+[JWTs are a popular choice for Microservices](https://docs.servicestack.net/auth/jwt-authprovider#stateless-auth-microservices)
+as they only need to configured with confidential keys to validate access.
+
+### ASP.NET Core JWT Authentication
+
+ServiceStack's JWT Identity Auth reimplements many of the existing [ServiceStack JWT AuthProvider](https://docs.servicestack.net/auth/jwt-authprovider)
+features but instead of its own implementation, integrates with and utilizes ASP.NET Core's built-in JWT Authentication that's
+configurable in .NET Apps with the `.AddJwtBearer()` extension method, e.g:
+
+#### Program.cs
+
+```csharp
+services.AddAuthentication()
+    .AddJwtBearer(options => {
+        options.TokenValidationParameters = new()
+        {
+            ValidIssuer = config["JwtBearer:ValidIssuer"],
+            ValidAudience = config["JwtBearer:ValidAudience"],
+            IssuerSigningKey = new SymmetricSecurityKey(
+                Encoding.UTF8.GetBytes(config["JwtBearer:IssuerSigningKey"]!)),
+            ValidateIssuerSigningKey = true,
+        };
+    })
+    .AddIdentityCookies(options => options.DisableRedirectsForApis());
+```
+
+Then use the `JwtAuth()` method to enable and configure ServiceStack's support for ASP.NET Core JWT Identity Auth: 
+
+#### Configure.Auth.cs
+
+```csharp
+public class ConfigureAuth : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices(services => {
+            services.AddPlugin(new AuthFeature(IdentityAuth.For<ApplicationUser>(
+                options => {
+                    options.SessionFactory = () => new CustomUserSession();
+                    options.CredentialsAuth();
+                    options.JwtAuth(x => {
+                        // Enable JWT Auth Features...
+                    });
+                })));
+        });
+}
+```
+
+### Enable in Swagger UI
+
+Once configured we can enable JWT Auth in Swagger UI by installing **Swashbuckle.AspNetCore**:
+
+:::copy
+`<PackageReference Include="Swashbuckle.AspNetCore" Version="6.*" />`
+:::
+
+Then enable Open API, Swagger UI, ServiceStack's support for Swagger UI and the JWT Bearer Auth option:
+
+```csharp
+public class ConfigureOpenApi : IHostingStartup
+{
+    public void Configure(IWebHostBuilder builder) => builder
+        .ConfigureServices((context, services) => {
+            if (context.HostingEnvironment.IsDevelopment())
+            {
+                services.AddEndpointsApiExplorer();
+                services.AddSwaggerGen();
+                services.AddServiceStackSwagger();
+                services.AddJwtAuth();
+                //services.AddBasicAuth<Data.ApplicationUser>();
+            
+                services.AddTransient<IStartupFilter,StartupFilter>();
+            }
+        });
+
+    public class StartupFilter : IStartupFilter
+    {
+        public Action<IApplicationBuilder> Configure(Action<IApplicationBuilder> next)
+            => app => {
+                // Provided by Swashbuckle library
+                app.UseSwagger();
+                app.UseSwaggerUI();
+                next(app);
+            };
+    }
+}
+```
+
+This will enable the **Authorize** button in Swagger UI where you can authenticate with a JWT Token:
+
+![](https://servicestack.net/img/posts/jwt-identity-auth/jwt-swagger-ui.png)
+
+### JWT Auth in Built-in UIs
+
+This also enables the **JWT** Auth Option in ServiceStack's built-in 
+[API Explorer](https://docs.servicestack.net/api-explorer), 
+[Locode](https://docs.servicestack.net/locode/) and 
+[Admin UIs](https://docs.servicestack.net/admin-ui):
+
+<img class="shadow p-1" src="https://servicestack.net/img/posts/jwt-identity-auth/jwt-api-explorer.png">
+
+### Authenticating with JWT
+
+JWT Identity Auth is a drop-in replacement for ServiceStack's JWT AuthProvider where Authenticating via Credentials
+will convert the Authenticated User into a JWT Bearer Token returned in the **HttpOnly**, **Secure** `ss-tok` Cookie
+that will be used to Authenticate the client:
+
+```csharp
+var client = new JsonApiClient(BaseUrl);
+await client.SendAsync(new Authenticate {
+    provider = "credentials",
+    UserName = Username,
+    Password = Password,
+});
+
+var bearerToken = client.GetTokenCookie(); // ss-tok Cookie
+```
+
+## JWT Refresh Tokens
+
+Refresh Tokens can be used to allow users to request a new JWT Access Token when the current one expires.
+
+To enable support for JWT Refresh Tokens your `IdentityUser` model should implement the `IRequireRefreshToken` interface
+which will be used to store the 64 byte Base64 URL-safe `RefreshToken` and its `RefreshTokenExpiry` in its persisted properties:
+
+```csharp
+public class ApplicationUser : IdentityUser, IRequireRefreshToken
+{
+    public string? RefreshToken { get; set; }
+    public DateTime? RefreshTokenExpiry { get; set; }
+}
+```
+
+Now after successful authentication, the `RefreshToken` will also be returned in the `ss-reftok` Cookie:
+
+```csharp
+var refreshToken = client.GetRefreshTokenCookie(); // ss-reftok Cookie
+```
+
+### Transparent Server Auto Refresh of JWT Tokens
+
+To be able to terminate a users access, Users need to revalidate their eligibility to verify they're still allowed access 
+(e.g. deny Locked out users). This JWT revalidation pattern is implemented using Refresh Tokens which are used to request 
+revalidation of their access and reissuing a new JWT Access Token which can be used to make authenticated requests until it expires.
+
+As Cookies are used to return Bearer and Refresh Tokens ServiceStack is able to implement the revalidation logic on the 
+server where it transparently validates Refresh Tokens, and if a User is eligible will reissue a new JWT Token Cookie that
+replaces the expired Access Token Cookie.
+
+Thanks to this behavior HTTP Clients will be able to Authenticate with just the Refresh Token, which will transparently
+reissue a new JWT Access Token Cookie and then continue to perform the Authenticated Request:
+
+```csharp
+var client = new JsonApiClient(BaseUrl);
+client.SetRefreshTokenCookie(RefreshToken);
+
+var response = await client.SendAsync(new Secured { ... });
+```
+
+There's also opt-in sliding support for extending a User's RefreshToken after usage which allows Users to treat 
+their Refresh Token like an API Key where it will continue extending whilst they're continuously using it to make API requests, 
+otherwise expires if they stop. How long to extend the expiry of Refresh Tokens after usage can be configured with:
+
+```csharp
+options.JwtAuth(x => {
+    // How long to extend the expiry of Refresh Tokens after usage (default None)
+    x.ExtendRefreshTokenExpiryAfterUsage = TimeSpan.FromDays(90);
+});
+```
+
+## Convert Session to Token Service
+
+Another useful Service that's available is being able to Convert your current Authenticated Session into a Token
+with the `ConvertSessionToToken` Service which can be enabled with:
+
+```csharp
+options.JwtAuth(x => {
+    x.IncludeConvertSessionToTokenService = true;
+});
+```
+
+This can be useful for when you want to Authenticate via an external OAuth Provider that you then want to convert into a stateless
+JWT Token by calling the `ConvertSessionToToken` on the client, e.g:
+
+#### .NET Clients
+
+```csharp
+await client.SendAsync(new ConvertSessionToToken());
+```
+
+#### TypeScript/JavaScript
+
+```ts
+fetch('/session-to-token', { method:'POST', credentials:'include' })
+```
+
+The default behavior of `ConvertSessionToToken` is to remove the Current Session from the Auth Server which will prevent 
+access to protected Services using our previously Authenticated Session. If you still want to preserve your existing Session 
+you can indicate this with:
+
+```csharp
+await client.SendAsync(new ConvertSessionToToken { 
+    PreserveSession = true 
+});
+```
+
+### JWT Options
+
+Other configuration options available for Identity JWT Auth include:
+
+```csharp
+options.JwtAuth(x => {
+    // How long should JWT Tokens be valid for. (default 14 days)
+    x.ExpireTokensIn = TimeSpan.FromDays(14);
+    
+    // How long should JWT Refresh Tokens be valid for. (default 90 days)
+    x.ExpireRefreshTokensIn = TimeSpan.FromDays(90);
+    
+    x.OnTokenCreated = (req, user, claims) => {
+        // Customize which claims are included in the JWT Token
+    };
+    
+    // Whether to invalidate Refresh Tokens on Logout (default true)
+    x.InvalidateRefreshTokenOnLogout = true;
+    
+    // How long to extend the expiry of Refresh Tokens after usage (default None)
+    x.ExtendRefreshTokenExpiryAfterUsage = null;
+});
+```
diff --git a/MyApp/_posts/2024-03-01_vite-press-plugin.md b/MyApp/_posts/2024-03-01_vite-press-plugin.md
new file mode 100644
index 0000000..897850d
--- /dev/null
+++ b/MyApp/_posts/2024-03-01_vite-press-plugin.md
@@ -0,0 +1,540 @@
+---
+title: Vite Press Plugin
+summary: Introducing the Vite Press Plugin for Vite Vue & React Apps
+author: Lucy Bates
+tags: [docs, markdown]
+image: https://images.unsplash.com/photo-1524668951403-d44b28200ce0?crop=entropy&fit=crop&h=1000&w=2000
+draft: true
+---
+
+The Vite Press Plugin is an alternative to [VitePress](https://vitepress.dev) for adding Markdown features 
+to existing Vite Vue or React projects. It's a non-intrusive plugin for Vue and React Vite apps that want to 
+add markdown powered content features without needing to adopt an opinionated framework for their entire App.
+
+## Universal Markdown Features
+
+A goal for **vite-press-plugin** is to implement a suite of universal markdown-powered features that can be reused across 
+Vue, React and .NET Razor and Blazor projects, allowing you to incorporate same set of markdown feature 
+folders to power markdown content features across a range of websites built with different technologies.
+
+### Vite Apps with vite-press-plugin
+
+The **vite-press-plugin** currently powers the markdown features in the static Vite Vue and React templates which are
+ideal for creating static websites, blogs, documentation and marketing websites that can be hosted FREE on [GitHub Pages CDN](https://pages.github.com):
+
+#### Static Vite Templates with vite-press-plugin
+
+- [press-vue](https://press-vue.servicestack.net) - Vite Vue App
+- [press-react](https://press-react.servicestack.net) - Vite React App
+
+<div class="not-prose mt-8 grid grid-cols-2 gap-4">
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://press-vue.servicestack.net">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/press-vue.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">press-vue.servicestack.net</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://press-react.servicestack.net">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/press-react.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">press-react.servicestack.net</div>
+    </a>
+</div>
+
+The **vite-press-plugin** makes the Markdown features available to the Vite App, whilst the markdown rendering itself is optimally
+implemented in:
+
+- Vue Templates - with [markdown-it](https://github.com/markdown-it/markdown-it) in [Vue SFC](https://vuejs.org/guide/scaling-up/sfc.html) Components
+- React Templates - with [remark](https://github.com/remarkjs/remark) and [MDX](https://mdxjs.com) in [React](https://react.dev) Components
+
+#### .NET 8 API backend with Vite Vue & React SPA frontend
+
+When more capabilities are required and you want a .NET API backend to your Vite Vue or React SPA frontend, 
+you can use one of our integrated .NET 8 SPA templates:
+
+ - [vue-spa](https://vue-spa.web-templates.io) - .NET 8 API with Vite Vue SPA frontend
+ - [react-spa](https://react-spa.web-templates.io) - .NET 8 API with Vite React SPA frontend
+
+<div class="not-prose mt-8 grid grid-cols-2 gap-4">
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://vue-spa.web-templates.io">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/vue-spa.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">vue-spa.web-templates.io</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://react-spa.web-templates.io">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/react-spa.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">react-spa.web-templates.io</div>
+    </a>
+</div>
+
+### .NET Templates with C# and Markdig
+
+Whilst the same Markdown feature folders are [implemented in C#](https://razor-ssg.web-templates.io/posts/razor-ssg)
+and rendered with [Markdig](https://github.com/xoofx/markdig) and either Razor Pages or Blazor Components:
+
+#### .NET 8 Razor SSG and Blazor SSR Templates
+
+ - [razor-ssg](https://razor-ssg.web-templates.io) - .NET Razor SSG Blog and Marketing Website with **Markdig**
+ - [razor-press](https://razor-press.web-templates.io) - .NET Razor SSG Documentation Website with **Markdig**
+ - [blazor-vue](https://blazor-vue.web-templates.io) - .NET 8 Blazor Server Rendered Website with **Markdig**
+
+<div class="not-prose mt-8 grid grid-cols-2 gap-4">
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://razor-ssg.web-templates.io">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/razor-ssg.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">razor-ssg.web-templates.io</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://blazor-vue.web-templates.io">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/blazor-vue.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">blazor-vue.web-templates.io</div>
+    </a>
+</div>
+
+### Markdown Feature Folders
+
+The content for each Markdown feature is maintained within its own feature folder with a `_` prefix:
+
+```files
+/_includes
+/_posts
+/_videos
+/_whatsnew
+```
+
+#### Markdown Document Structure
+
+Additional metadata for each markdown page is maintained in the frontmatter of each markdown page, e.g.
+the front matter for this blog post contains:
+
+```md
+---
+title:   Vite Press Plugin
+summary: Introducing the Vite Press Plugin
+author:  Lucy Bates
+tags:    [docs,markdown]
+image:   https://source.unsplash.com/random/2000x1000/?stationary
+---
+```
+
+The frontmatter is used in combination with file attributes to populate the document metadata.
+The schema used to support the current markdown features include:
+
+```ts
+type Doc = {
+    title: string     // title of Markdown page (frontmatter)
+    slug: string      // slug to page (populated)
+    path: string      // path to page (populated)
+    fileName: string  // filename of markdown file (populated)
+    content: string   // markdown content (populated)
+    date: string      // date of page (frontmatter)
+    tags: string[]    // related tags (frontmatter)
+    order?: number    // explicit page ordering (frontmatter)
+    group?: string    // which group page belongs to (populated)
+    draft?: boolean   // make visible in production (frontmatter)
+    wordCount: number      // (populated)
+    lineCount: number      // (populated)
+    minutesToRead: number  // (populated)
+}
+
+type Post = Doc & {
+    summary: string // short summary of blog post (frontmatter)
+    author: string  // author of blog post (frontmatter)
+    image: string   // hero image of blog post (frontmatter)
+}
+
+type Video = Doc & {
+    url: string // URL of YouTube Video
+}
+
+type WhatsNew = Doc & {
+    url: string    // URL of YouTube Video
+    image: string  // Image to display for feature
+}
+```
+
+Markdown files can contain additional frontmatter which is also merged with the document metadata.
+
+### Accessing Markdown Metadata
+
+In Vue App's the Metadata is available as an injected dependency that's navigable with the typed `VirtualPress` schema, e.g:
+
+```ts
+import type { VirtualPress } from "vite-plugin-press"
+
+const press:VirtualPress = inject('press')!
+```
+
+In React App's it's available via an injected context:
+
+```ts
+import { PressContext } from "@/contexts"
+
+const press = useContext(PressContext)
+```
+
+Which is defined as:
+
+```ts
+import { createContext } from 'react'
+import type { VirtualPress } from 'vite-plugin-press'
+
+export const PressContext = createContext<VirtualPress>({} as VirtualPress)
+```
+
+This `VirtualPress` metadata is used to power all markdown features.
+
+### Blog
+
+The blog maintains its markdown posts in a flat  [/_posts](https://github.com/NetCoreTemplates/vue-spa/tree/main/MyApp.Client/src/_posts) 
+folder which each Markdown post containing its publish date and URL slug it should be published under, e.g:
+
+```files
+/_posts
+  2023-01-21_start.md
+  2024-02-11_jwt-identity-auth.md
+  2024-03-01_vite-press-plugin.md
+```
+
+Supporting all Blog features requires several different pages to render each of its view:
+
+| Description | Example | Vue | React | 
+| - | - | - | - |
+| Main Blog layout | [/blog](/blog) | [blog.vue](https://github.com/NetCoreTemplates/vue-spa/blob/main/MyApp.Client/src/pages/blog.vue) | [blog.tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/pages/blog.tsx) |
+| Navigable Archive of Posts | [/posts](/posts) | [index.vue](https://github.com/NetCoreTemplates/vue-spa/blob/main/MyApp.Client/src/pages/posts/index.vue) | [index.tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/pages/posts/index.tsx) |
+| Individual Blog Post (like this!) | [/posts/vite-press-plugin](/posts/vite-press-plugin) | [\[slug\].vue](https://github.com/NetCoreTemplates/vue-spa/blob/main/MyApp.Client/src/pages/posts/%5Bslug%5D.vue) | [\[slug\].tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/pages/posts/%5Bslug%5D.tsx) |
+| Display Posts by Author | [/posts/author/lucy-bates](/posts/author/lucy-bates) | [\[name\].vue](https://github.com/NetCoreTemplates/vue-spa/blob/main/MyApp.Client/src/pages/posts/author/%5Bname%5D.vue) | [\[name\].tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/pages/posts/author/%5Bname%5D.tsx) |
+| Display Posts by Tag | [/posts/tagged/markdown](/posts/tagged/markdown) | [\[tag\].vue](https://github.com/NetCoreTemplates/vue-spa/blob/main/MyApp.Client/src/pages/posts/tagged/%5Btag%5D.vue) | [\[tag\].tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/pages/posts/tagged/%5Btag%5D.tsx) |
+| Display Posts by Year | [/posts/year/2024](/posts/year/2024) | [\[year\].vue](https://github.com/NetCoreTemplates/vue-spa/blob/main/MyApp.Client/src/pages/posts/year/%5Byear%5D.vue) | [\[year\].tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/pages/posts/year/%5Byear%5D.tsx) |
+
+#### Configuration
+
+Additional information about the Website Blog is maintained in `_posts/config.json`
+
+```json
+{
+  "localBaseUrl": "http://localhost:5173",
+  "publicBaseUrl": "https://press-vue.servicestack.net",
+  "siteTwitter": "@Vue",
+  "blogTitle": "From the blog",
+  "blogDescription": "Writing on software design and aerospace industry.",
+  "blogEmail": "email@example.org (Vue)",
+  "blogImageUrl": "https://servicestack.net/img/logo.png"
+}
+```
+
+#### Authors
+
+Whilst information about Post Authors are maintained in `_posts/authors.json`
+
+```json
+[
+  {
+    "name": "Lucy Bates",
+    "email": "lucy@email.org",
+    "bio": "Writing on software design and aerospace industry.",
+    "profileUrl": "/img/profiles/user1.svg",
+    "twitterUrl": "https://twitter.com/lucy",
+    "threadsUrl": "https://threads.net/@lucy",
+    "gitHubUrl": "https://github.com/lucy"
+  },
+]
+```
+
+To associate an Author the **name** property is used to match a posts frontmatter **author**.
+
+### General Features
+
+Most unique markdown features are captured in their Markdown's frontmatter metadata, but in general these features
+are broadly available for all features:
+
+ - **Live Reload** - Latest Markdown content is displayed during **Development** 
+ - **Drafts** - Prevent posts being worked on from being published with `draft: true`
+ - **Future Dates** - Posts with a future date wont be published until that date
+
+### What's New Feature
+
+The [/whatsnew](/whatsnew) page is an example of creating a custom Markdown feature to implement a portfolio or a product releases page
+where a new folder is created per release, containing both release date and release or project name, with all features in that release 
+maintained markdown content sorted in alphabetical order:
+
+```files
+/_whatsnew
+  /2023-03-08_Animaginary
+    feature1.md
+  /2023-03-18_OpenShuttle
+    feature1.md
+  /2023-03-28_Planetaria
+    feature1.md
+```
+
+What's New follows the same structure as Pages feature which is rendered in:
+
+ - [whatsnew.vue](https://github.com/NetCoreTemplates/vue-spa/blob/main/MyApp.Client/src/pages/whatsnew.vue)
+ - [whatsnew.tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/pages/whatsnew.tsx)
+ 
+### Videos Feature
+
+The videos feature maintained in the `_videos` folder allows grouping of related videos into different folder groups, e.g:
+
+```files
+/_videos
+  /vue
+    admin.md
+    autoquerygrid.md
+    components.md
+  /react
+    locode.md
+    bookings.md
+    nextjs.md
+```
+
+These can then be rendered as UI fragments using the `<VideoGroup>` component, e.g:
+
+```tsx
+<VideoGroup
+  title="Vue Components"
+  summary="Learn about productive features in Vue Component Library"
+  group="vue"
+  learnMore="https://docs.servicestack.net/vue/" />
+```
+
+### Includes Feature
+
+The includes feature allows maintaining reusable markdown fragments in the `_includes` folder, e.g:
+
+```files
+/_includes
+  /features
+    videos.md
+    whatsnew.md
+  privacy.md
+```
+
+Which can be included in other Markdown files with:
+
+```md
+:::include privacy.md:::
+
+:::include features/include.md:::
+```
+
+Alternatively they can be included in other Vue, React or Markdown pages with the `<Include>` component, e.g:
+
+```tsx
+<Include src="privacy.md" />
+
+<Include src="features/include.md" />
+```
+
+### Metadata APIs Feature
+
+To support external clients from querying static markdown metadata you can export it to pre-rendered static `*.json` 
+data structures by configuring `metadataPath` to the location you the `*.json` files published to, e.g:
+
+```ts
+export default defineConfig({
+    plugins: [
+        Press({
+            metadataPath: 'public/api',
+        }),
+    ]
+})
+```
+
+This will publish all the content of each content type in the year they were published in, along with an `all.json` containing
+all content published in that year as well aso for all time, e.g:
+
+```files
+/meta
+  /2022
+    all.json
+    posts.json
+    videos.json
+  /2023
+    all.json
+    posts.json
+  /2024
+    all.json
+    posts.json
+    videos.json
+    whatsnew.json
+  all.json
+  index.json
+```
+
+With this you can fetch the metadata of all the new **Blog Posts** added in **2023** from:
+
+[/api/2024/blog.json](/api/2024/blog.json)
+
+Or all the website content added in **2024** from:
+
+[/api/2024/all.json](/api/2024/all.json)
+
+Or **ALL** the website metadata content from:
+
+[/api/all.json](/api/all.json)
+
+This feature makes it possible to support use-cases like CreatorKit's
+[Generating Newsletters](https://servicestack.net/creatorkit/portal-mailruns#generating-newsletters) feature which generates 
+a Monthly Newsletter Email with all new content added within a specified period.
+
+## Markdown Containers
+
+Most of [VitePress Containers](https://vitepress.dev/guide/markdown#custom-containers) are also implemented, enabling
+rich markup to enhance markdown content and documentation universally across all Markdown App implementations:
+
+#### Input
+
+    :::info
+    This is an info box.
+    :::
+
+    :::tip
+    This is a tip.
+    :::
+
+    :::warning
+    This is a warning.
+    :::
+
+    :::danger
+    This is a dangerous warning.
+    :::
+
+#### Output
+
+:::info
+This is an info box.
+:::
+
+:::tip
+This is a tip.
+:::
+
+:::warning
+This is a warning.
+:::
+
+:::danger
+This is a dangerous warning.
+:::
+
+### Custom Title
+
+You can specify a custom title by appending the text right after the container type:
+
+#### Input
+
+    :::danger STOP
+    Danger zone, do not proceed
+    :::
+
+#### Output
+
+:::danger STOP
+Danger zone, do not proceed
+:::
+
+
+### copy
+
+The **copy** container is ideal for displaying text snippets in a component that allows for easy copying:
+
+#### Input
+
+    :::copy
+    Copy Me!
+    :::
+
+#### Output
+
+:::copy
+Copy Me!
+:::
+
+HTML or XML fragments can also be copied by escaping them first:
+
+#### Input
+
+```md
+:::copy
+`<PackageReference Include="ServiceStack" Version="8.*" />`
+:::
+```
+
+#### Output
+
+:::copy
+`<PackageReference Include="ServiceStack" Version="8.*" />`
+:::
+
+### sh
+
+Similarly the **sh** container is ideal for displaying and copying shell commands:
+
+#### Input
+
+    :::sh
+    npm run dev
+    :::
+
+#### Output
+
+:::sh
+npm run dev
+:::
+
+### YouTube
+
+For embedding YouTube Videos, optimally rendered using the `<LiteYouTube>` component, e.g:
+
+#### Input
+
+    :::youtube YIa0w6whe2U
+    Vue Components Library
+    :::
+
+#### Output
+
+:::youtube YIa0w6whe2U
+Vue Components Library
+:::
+
+## Markdown Fenced Code Blocks
+
+For more flexibility you can utilize custom fenced components like the `files` fenced code block which can 
+be used to capture ascii representation of a structured documentation like a folder & file structure, e.g:
+
+    ```files
+    /_videos
+      /vue
+        admin.md
+        autoquerygrid.md
+        components.md
+      /react
+        locode.md
+        bookings.md
+        nextjs.md
+    ```
+
+That we can render into a more UX-friendly representation by calling the `Files` component with the body
+of the code-block to convert the structured ascii layout into a more familiar GUI layout:
+
+```files
+/_videos
+  /vue
+    admin.md
+    autoquerygrid.md
+    components.md
+  /react
+    locode.md
+    bookings.md
+    nextjs.md
+```
+
+The benefit of this approach of marking up documentation is that the markdown content still remains in an optimal 
+human-readable form even when the markdown renderer lacks the custom fenced components to render the richer UI.
+
+## Components In Markdown
+
+Up till now all above features will let you render the same markdown content in all available Vue, React, Razor or Blazor
+templates. At the cost of reduced portability, you're also able to embed rich Interactive Vue or React components directly in 
+markdown.
+
+::include component-links.md::
+
diff --git a/MyApp/_posts/authors.json b/MyApp/_posts/authors.json
new file mode 100644
index 0000000..8a2625f
--- /dev/null
+++ b/MyApp/_posts/authors.json
@@ -0,0 +1,26 @@
+[
+  {
+    "name": "Lucy Bates",
+    "email": "lucy@email.org",
+    "bio": "Works in software design, company building, and the aerospace industry.",
+    "profileUrl": "img/profiles/user1.svg",
+    "twitterUrl": "https://twitter.com/lucy",
+    "threadsUrl": "https://threads.net/@lucy",
+    "gitHubUrl": "https://github.com/lucy"
+  },
+  {
+    "name": "Gayle Smith",
+    "email": "gayle@email.org",
+    "bio": "Gayle is an author, consultant, and founder focusing on improving tech.",
+    "profileUrl": "img/profiles/user2.svg",
+    "twitterUrl": "https://twitter.com/gayle",
+    "mastodonUrl": "https://mastodon.social/@gayle"
+  },
+  {
+    "name": "Brandon Foley",
+    "email": "brandon@email.org",
+    "bio": "I am a programmer at heart. I like to tinker with code and build generic coding structures.",
+    "profileUrl": "img/profiles/user3.svg",
+    "gitHubUrl": "https://github.com/brandon"
+  }
+]
\ No newline at end of file
diff --git a/MyApp/_posts/config.json b/MyApp/_posts/config.json
new file mode 100644
index 0000000..70396f3
--- /dev/null
+++ b/MyApp/_posts/config.json
@@ -0,0 +1,9 @@
+{
+  "localBaseUrl": "https://localhost:5001",
+  "publicBaseUrl": "https://blazor-vue.web-templates.io",
+  "siteTwitter": "@BlazorVue",
+  "blogTitle": "From the blog",
+  "blogDescription": "Learnings, recommendations & new features from ServiceStack engineers",
+  "blogEmail": "email@example.org (Blazor Vue)",
+  "blogImageUrl": "https://servicestack.net/img/logo.png"
+}
diff --git a/MyApp/_videos/blazor/admin.md b/MyApp/_videos/blazor/admin.md
new file mode 100644
index 0000000..6200442
--- /dev/null
+++ b/MyApp/_videos/blazor/admin.md
@@ -0,0 +1,13 @@
+---
+title: Create Beautiful UX optimized Blazor Apps with Auto Admin pages
+url: https://youtu.be/tt0ytzVVjEY
+tags: [blazor,admin]
+date: 12-12-2022
+order: 4
+---
+
+We walk through the process of creating admin screens using ServiceStack Blazor Components by looking at our Blazor Diffusion
+App as an example which generates AI artworks using Stable Diffusion and curates a gallery of amazing visuals. 
+
+With the ServiceStack Blazor Components, we'll show you how to quickly create a powerful and intuitive admin interface for 
+managing the application data, with minimal coding required.
diff --git a/MyApp/_videos/blazor/blazor-vue.md b/MyApp/_videos/blazor/blazor-vue.md
new file mode 100644
index 0000000..3d0a0cb
--- /dev/null
+++ b/MyApp/_videos/blazor/blazor-vue.md
@@ -0,0 +1,12 @@
+---
+title: Fast, SEO-friendly, Blazor Static Rendered Apps with Vue
+url: https://youtu.be/ujbTGn4IwFs
+tags: [blazor, tailwind, vue]
+date: 22-11-2023
+order: 1
+---
+
+The new **Blazor Vue** template is ideal for building Fast, SEO-friendly, 100% statically rendered Blazor Web Apps where 
+all its dynamic functionally uses Vue.js and the [Vue Components library](https://docs.servicestack.net/vue/) to 
+progressively enhance Blazor's statically rendered content - eliminating Blazor's current limitations of being able to 
+use Blazor SSR to develop an entire App without any Blazor Interactivity downsides.
diff --git a/MyApp/_videos/blazor/blazor.md b/MyApp/_videos/blazor/blazor.md
new file mode 100644
index 0000000..76ae92b
--- /dev/null
+++ b/MyApp/_videos/blazor/blazor.md
@@ -0,0 +1,13 @@
+---
+title: Blazor Tailwind App for .NET 8
+url: https://youtu.be/hqyozHSL0Nk
+tags: [blazor, tailwind]
+date: 21-11-2023
+order: 2
+---
+
+ServiceStack's new Blazor project template takes advantage of .NET 8 Blazor's new features that redefines modern Web 
+Development in C# which we explore in this video overview, covering how the template adopts Blazor's familiar ASP.NET 
+Core Identity and Entity Framework for its authentication, utilizes the modern Tailwind CSS framework for beautiful 
+responsive design and adopts .NET's best-practice Docker Containerization support for its built-in GitHub Action 
+Deployments - enabling a simple ready-made CI solution for deployment to any Linux Host via SSH and Docker compose.
diff --git a/MyApp/_videos/blazor/components.md b/MyApp/_videos/blazor/components.md
new file mode 100644
index 0000000..af2fb36
--- /dev/null
+++ b/MyApp/_videos/blazor/components.md
@@ -0,0 +1,12 @@
+---
+title: Rapidly Develop Beautiful Apps with Blazor Tailwind Components
+url: https://youtu.be/iKpQI2233nY
+tags: blazor,components,autoquery
+date: 11-10-2022
+order: 3
+---
+
+The ServiceStack Blazor components for Blazor WASM and Server Rendered Apps are a powerful set of tools that enable 
+developers to quickly and easily create interactive data grids from their AutoQuery services using minimal code. 
+
+These components can be styled with Tailwind CSS, enabling creating professional-looking custom applications.
\ No newline at end of file
diff --git a/MyApp/_videos/blazor/darkmode.md b/MyApp/_videos/blazor/darkmode.md
new file mode 100644
index 0000000..4dfc870
--- /dev/null
+++ b/MyApp/_videos/blazor/darkmode.md
@@ -0,0 +1,14 @@
+---
+title: Beautiful Blazor Tailwind Components with Darkmode
+url: https://youtu.be/8nwpC_B4AC4
+tags: [darkmode,blazor,components]
+date: 07-12-2022
+order: 7
+---
+
+We walkthrough the ServiceStack Blazor Components support for Darkmode. 
+Our Blazor Components provide a suite of powerful, pre-built UI components that are easy to use, customizable, 
+and can be used to build high-performing, responsive web applications.
+
+The components support both Blazor Server and Blazor WASM, and are designed to work seamlessly with 
+ServiceStack's features, providing a simplified and integrated developer experience.
\ No newline at end of file
diff --git a/MyApp/_videos/blazor/tailwind.md b/MyApp/_videos/blazor/tailwind.md
new file mode 100644
index 0000000..cbc450b
--- /dev/null
+++ b/MyApp/_videos/blazor/tailwind.md
@@ -0,0 +1,14 @@
+---
+title: Creating Beautiful Blazor Apps with Tailwind
+url: https://youtu.be/3gD_MMcYI-4
+tags: [blazor,autoquery]
+date: 25-07-2022
+order: 6
+---
+
+We tour the Blazor Web Assembly template that utilizes Tailwind CSS, 
+and show you how to set up hot reload for both during development. 
+
+Tailwind CSS is a popular utility-first CSS framework that provides a 
+comprehensive set of pre-defined CSS styles, enabling developers to 
+create modern and responsive designs with ease.
diff --git a/MyApp/_videos/blazor/universal.md b/MyApp/_videos/blazor/universal.md
new file mode 100644
index 0000000..60bc841
--- /dev/null
+++ b/MyApp/_videos/blazor/universal.md
@@ -0,0 +1,15 @@
+---
+title: Universal Blazor API Components for Blazor Server and WASM
+url: https://youtu.be/66DgLHExC9E
+tags: [blazor,server,wasm,components]
+date: 04-01-2023
+order: 4
+---
+
+We walk through the process of creating universal Blazor API components for Blazor Server 
+and Blazor WASM using the ServiceStack.Blazor library. 
+
+We'll show how Developers can create UI components that can be shared between their Blazor 
+applications without worrying about the hosting model used. This allows developers to streamline 
+their development process and reduce the amount of code they need to write, making it easier to build 
+and maintain complex Apps.
diff --git a/MyApp/_videos/vue/admin.md b/MyApp/_videos/vue/admin.md
new file mode 100644
index 0000000..e3c55e5
--- /dev/null
+++ b/MyApp/_videos/vue/admin.md
@@ -0,0 +1,11 @@
+---
+title: Build beautiful custom .NET Admin UIs in minutes
+url: https://youtu.be/wlRA4_owEsc
+tags: [vue,autoquery]
+date: 14-06-2023
+order: 3
+---
+
+In this video we explore the Server Multi Razor Page and Client rendered Admin UI Pages in the latest 
+.NET blazor-vue and razor-vue project templates to see how to use the new SidebarLayout and 
+AutoQueryGrid Vue Tailwind components to build beautiful Admin UI Pages within minutes.
\ No newline at end of file
diff --git a/MyApp/_videos/vue/autoquerygrid.md b/MyApp/_videos/vue/autoquerygrid.md
new file mode 100644
index 0000000..c105abb
--- /dev/null
+++ b/MyApp/_videos/vue/autoquerygrid.md
@@ -0,0 +1,11 @@
+---
+title: Instantly Manage your data using AutoQueryGrid Vue
+url: https://youtu.be/znCoC-Ct0Ps
+tags: [vue,autoquery]
+date: 16-03-2023
+order: 1
+---
+
+This walkthrough explores the ServiceStack Vue 3 library and the functionality of the AutoQueryGrid component. The AutoQueryGrid component simplifies the integration of AutoQuery services by generating a customizable UI. 
+
+By following this guide, you'll learn how to effectively utilize these tools to enhance your application's user interface and overall user experience.
diff --git a/MyApp/_videos/vue/components.md b/MyApp/_videos/vue/components.md
new file mode 100644
index 0000000..85742f0
--- /dev/null
+++ b/MyApp/_videos/vue/components.md
@@ -0,0 +1,11 @@
+---
+title: Vue 3 Tailwind Components Library
+url: https://youtu.be/YIa0w6whe2U
+tags: [vue,autoquery]
+date: 14-02-2023
+order: 2
+---
+
+In this video, we demonstrate using the @servicestack/vue components library for Vue.js 3 Multipage Apps (MPAs) along with the `vue-mjs` template. 
+
+The template illustrates building content-heavy or complex sites while avoiding the intricacies of Single Page Apps (SPAs) through the use of JavaScript Modules, Tailwind, Vue.js, Razor Pages, and ServiceStack.
\ No newline at end of file
diff --git a/MyApp/_videos/vue/modern.md b/MyApp/_videos/vue/modern.md
new file mode 100644
index 0000000..eccb7cf
--- /dev/null
+++ b/MyApp/_videos/vue/modern.md
@@ -0,0 +1,12 @@
+---
+title: Modern Razor Pages & MVC .NET Tailwind templates
+url: https://youtu.be/SyppvQB7IPs
+tags: [vue,razor]
+date: 08-02-2023
+order: 4
+---
+
+ServiceStack templates provide a wide range of options when it comes to using Razor Pages in your .NET application
+
+These templates come with Tailwind, JS Modules, and Vue components already built-in, making it easy to build 
+hybrid apps containing both Server-Side Rendering (SSR) and static resources
\ No newline at end of file
diff --git a/MyApp/appsettings.Development.json b/MyApp/appsettings.Development.json
new file mode 100644
index 0000000..08ba55e
--- /dev/null
+++ b/MyApp/appsettings.Development.json
@@ -0,0 +1,36 @@
+{
+    "ConnectionStrings": {
+        "DefaultConnection": "DataSource=App_Data/app.db;Cache=Shared"
+    },
+    "DebugMode": true,
+    "DetailedErrors": true,
+    "Logging": {
+        "IncludeScopes": false,
+        "Debug": {
+            "LogLevel": {
+                "Default": "Debug",
+                "System": "Information",
+                "Microsoft": "Information"
+            }
+        },
+        "Console": {
+            "LogLevel": {
+                "Default": "Debug",
+                "System": "Information",
+                "Microsoft": "Information"
+            }
+        }
+    },
+
+    "oauth.RedirectUrl": "https://localhost:5001/",
+    "oauth.CallbackUrl": "https://localhost:5001/auth/{0}",
+    "oauth.facebook.Permissions": [ "email", "public_profile" ],
+    "oauth.facebook.AppId": "846532743361035",
+    "oauth.facebook.AppSecret": "7f294b4a8313500b160ac3f4ab3f6651",
+    "oauth.google.ConsumerKey": "119006238748-k2g7j49d9fedm7ue1gugnhe2240u0dr7.apps.googleusercontent.com",
+    "oauth.google.ConsumerSecret": "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",
+    "oauth.microsoftgraph.AppId": "ba0d5aec-5e6e-4a7e-b02f-636ffd0111b5",
+    "oauth.microsoftgraph.AppSecret": "1Qm7Q~9JeytqR7UdKK~USDC7lbk0BOeOUnuks",
+    "oauth.microsoftgraph.SavePhoto": "true",
+    "oauth.microsoftgraph.SavePhotoSize": "96x96"
+}
diff --git a/MyApp/appsettings.json b/MyApp/appsettings.json
new file mode 100644
index 0000000..7f0dd3c
--- /dev/null
+++ b/MyApp/appsettings.json
@@ -0,0 +1,20 @@
+{
+    "Logging": {
+        "IncludeScopes": false,
+        "Debug": {
+            "LogLevel": {
+                "Default": "Warning"
+            }
+        },
+        "Console": {
+            "LogLevel": {
+                "Default": "Warning"
+            }
+        }
+    },
+    "AllowedHosts": "*",
+    "AppConfig": {
+        "LocalBaseUrl": "https://localhost:5001",
+        "PublicBaseUrl": "https://blazor-vue.web-templates.io"
+    }
+}
diff --git a/MyApp/package.json b/MyApp/package.json
new file mode 100644
index 0000000..4a90871
--- /dev/null
+++ b/MyApp/package.json
@@ -0,0 +1,14 @@
+{
+    "scripts": {
+        "postinstall": "node postinstall.js && npm run migrate",
+        "dtos": "x mjs",
+        "dev": "dotnet watch",
+        "ui:dev": "npx tailwindcss -i ./tailwind.input.css -o ./wwwroot/css/app.css --watch",
+        "ui:build": "npx tailwindcss -i ./tailwind.input.css -o ./wwwroot/css/app.css --minify",
+        "build": "npm run ui:build",
+        "migrate": "dotnet run --AppTasks=migrate",
+        "revert:last": "dotnet run --AppTasks=migrate.revert:last",
+        "revert:all": "dotnet run --AppTasks=migrate.revert:all",
+        "rerun:last": "npm run revert:last && npm run migrate"
+    }
+}
diff --git a/MyApp/postinstall.js b/MyApp/postinstall.js
new file mode 100644
index 0000000..16f1616
--- /dev/null
+++ b/MyApp/postinstall.js
@@ -0,0 +1,65 @@
+// Usage: npm install
+
+const writeTo = './wwwroot/lib'
+const defaultPrefix = 'https://unpkg.com'
+const files = {
+  mjs: {
+      'vue.mjs':                         '/vue@3/dist/vue.esm-browser.js',
+      'vue.min.mjs':                     '/vue@3/dist/vue.esm-browser.prod.js',
+      'servicestack-client.mjs':         '/@servicestack/client@2/dist/servicestack-client.mjs',
+      'servicestack-client.min.mjs':     '/@servicestack/client@2/dist/servicestack-client.min.mjs',
+      'servicestack-vue.mjs':            '/@servicestack/vue@3/dist/servicestack-vue.mjs',
+      'servicestack-vue.min.mjs':        '/@servicestack/vue@3/dist/servicestack-vue.min.mjs',
+  },
+  typings: {
+      'vue/index.d.ts':                  '/vue@3/dist/vue.d.ts',
+      '@vue/compiler-core.d.ts':         '/@vue/compiler-core@3/dist/compiler-core.d.ts',
+      '@vue/compiler-dom.d.ts':          '/@vue/compiler-dom@3/dist/compiler-dom.d.ts',
+      '@vue/runtime-dom.d.ts':           '/@vue/runtime-dom@3/dist/runtime-dom.d.ts',
+      '@vue/runtime-core.d.ts':          '/@vue/runtime-core@3/dist/runtime-core.d.ts',
+      '@vue/reactivity.d.ts':            '/@vue/reactivity@3/dist/reactivity.d.ts',
+      '@vue/shared.d.ts':                '/@vue/shared@3/dist/shared.d.ts',
+      '@servicestack/client/index.d.ts': '/@servicestack/client/dist/index.d.ts',  
+      '@servicestack/vue/index.d.ts':    '/@servicestack/vue@3/dist/index.d.ts',
+  }
+}
+
+const path = require('path')
+const fs = require('fs').promises
+const http = require('http')
+const https = require('https')
+
+const requests = []
+Object.keys(files).forEach(dir => {
+    const dirFiles = files[dir]
+    Object.keys(dirFiles).forEach(name => {
+        let url = dirFiles[name]
+        if (url.startsWith('/'))
+            url = defaultPrefix + url
+        const toFile = path.join(writeTo, dir, name)
+        requests.push(fetchDownload(url, toFile, 5))
+    })
+})
+
+;(async () => {
+    await Promise.all(requests)
+})()
+
+async function fetchDownload(url, toFile, retries) {
+    const toDir = path.dirname(toFile)
+    await fs.mkdir(toDir, { recursive: true })
+    for (let i=retries; i>=0; --i) {
+        try {
+            let r = await fetch(url)
+            if (!r.ok) {
+                throw new Error(`${r.status} ${r.statusText}`);
+            }
+            let txt = await r.text()
+            console.log(`writing ${url} to ${toFile}`)
+            await fs.writeFile(toFile, txt)
+            return
+        } catch (e) {
+            console.log(`get ${url} failed: ${e}${i > 0 ? `, ${i} retries remaining...` : ''}`)
+        }
+    }
+}
\ No newline at end of file
diff --git a/MyApp/tailwind.config.js b/MyApp/tailwind.config.js
new file mode 100644
index 0000000..5e339f6
--- /dev/null
+++ b/MyApp/tailwind.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  content: ["./**/*.{html,js,mjs,md,cshtml,razor,cs}","./Pages/**/*.{cshtml,razor}","./Css.cs"],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        'accent-1': '#FAFAFA',
+        'accent-2': '#EAEAEA',
+        danger: 'rgb(153 27 27)',
+        success: 'rgb(22 101 52)',
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/MyApp/tailwind.input.css b/MyApp/tailwind.input.css
new file mode 100644
index 0000000..af58f60
--- /dev/null
+++ b/MyApp/tailwind.input.css
@@ -0,0 +1,83 @@
+@tailwind base;
+@tailwind components;
+
+/* override element defaults */
+b, strong { font-weight:600; }
+
+/*vue*/
+[v-cloak] {display:none}
+
+/* @tailwindcss/forms css */
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='month'],[type='search'],[type='tel'],[type='time'],[multiple],textarea,select
+{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:0.5rem 0.75rem;font-size:1rem;line-height:1.5rem}
+[type='text']:focus,[type='email']:focus,[type='url']:focus,[type='password']:focus,[type='number']:focus,[type='date']:focus,[type='month']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[multiple]:focus,textarea:focus,select:focus{
+    outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
+    --tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;
+    --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);border-color:#2563eb}
+input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}
+input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#6b7280;opacity:1}
+input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}
+select{
+    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact}
+[multiple]{
+    background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;-webkit-print-color-adjust:unset;color-adjust:unset;}
+[type='checkbox'],[type='radio']{
+    -webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;
+    vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
+    flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px}
+[type='checkbox']{border-radius:0}
+[type='radio']{border-radius:100%}
+[type='checkbox']:focus,[type='radio']:focus{
+    outline:2px solid transparent;outline-offset:2px;
+    --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;
+    --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
+[type='checkbox']:checked,[type='radio']:checked{
+    border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
+[type='checkbox']:checked{
+    background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}
+[type='radio']:checked{
+    background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
+    border-color:transparent;background-color:currentColor}
+[type='checkbox']:indeterminate{
+    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+    border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}
+[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}
+[type='file']:focus{outline:1px auto -webkit-focus-ring-color;}
+
+
+/* @tailwindcss/aspect css */
+.aspect-h-9 {
+    --tw-aspect-h: 9;
+}
+.aspect-w-16 {
+    position: relative;
+    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
+    --tw-aspect-w: 16;
+}
+.aspect-w-16 > * {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+/* dark mode autocomplete fields */
+.dark input:-webkit-autofill,
+.dark input:-webkit-autofill:focus {
+    transition: background-color 600000s 0s, color 600000s 0s;
+}
+.dark input[data-autocompleted] {
+    background-color: transparent !important;
+}
+
+@tailwind utilities;
\ No newline at end of file
diff --git a/MyApp/tsconfig.json b/MyApp/tsconfig.json
new file mode 100644
index 0000000..dde9af9
--- /dev/null
+++ b/MyApp/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "sourceMap": true,
+    "baseUrl": "./",
+    "typeRoots": ["./wwwroot/lib/typings"],
+    "paths": {
+        "*": [
+            "./wwwroot/lib/*",
+            "./wwwroot/lib/typings/*"
+        ],
+        "vue": [ "./wwwroot/lib/typings/vue/index.d.ts" ],
+        "@servicestack/client": [ "./wwwroot/lib/typings/@servicestack/client/index.d.ts" ],
+        "@servicestack/vue": [ "./wwwroot/lib/typings/@servicestack/vue/index.d.ts" ]
+    }
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/MyApp/wwwroot/admin/index.html b/MyApp/wwwroot/admin/index.html
new file mode 100644
index 0000000..40bc8c3
--- /dev/null
+++ b/MyApp/wwwroot/admin/index.html
@@ -0,0 +1,196 @@
+<html class="h-full bg-white">
+<head>
+<title>Admin</title>
+<link rel="icon" type="image/svg" href="/img/logo.svg">
+<link rel="stylesheet" href="/css/app.css">
+<script type="importmap">
+{
+    "imports": {
+        "vue": "/lib/mjs/vue.mjs",
+        "@servicestack/client": "/lib/mjs/servicestack-client.mjs",
+        "@servicestack/vue": "/lib/mjs/servicestack-vue.mjs",
+        "dtos.mjs": "/mjs/dtos.mjs"
+    }
+}
+</script>
+</head>
+<body class="h-full">
+<div id="app" v-cloak>
+    <sidebar-layout ref="sidebar">
+        <div class="flex h-16 shrink-0 items-center">
+            <a href="/admin/" class="text-2xl whitespace-nowrap overflow-x-hidden flex items-center">
+                <img class="mr-1 h-8 w-auto text-indigo-600" src="/img/logo.svg" alt="Logo">
+                <span class="hidden sm:block text-2xl font-semibold">Admin</span>
+            </a>
+        </div>
+        <nav class="flex flex-1 flex-col">
+            <ul role="list" class="flex flex-1 flex-col gap-y-7">
+                <li v-for="group in new Set(Object.keys(sections).flatMap(k => sections[k].group))">
+                    <div v-if="group" class="text-sm font-semibold leading-6 text-gray-400">{{group}}</div>
+                    <ul role="list" class="-mx-2 space-y-1">
+                        <li v-for="section in Object.keys(sections).map(k => sections[k].group === group ? sections[k] : null).filter(x => !!x)">
+                            <a @click.prevent="navTo(section.id)" :class="[activeSection.id === section.id ? 'bg-gray-50 text-indigo-600' : 'cursor-pointer text-gray-700 hover:text-indigo-600 hover:bg-gray-50', 'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold select-none']" @click="$forceUpdate()">
+                                <icon :svg="section.icon" class="h-6 w-6 shrink-0 text-indigo-600"></icon>
+                                {{section.label}}
+                            </a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="-mx-6 mt-auto">
+                    <div v-if="showUserMenu" class="font-normal absolute z-10 -mt-10 left-6 w-60 origin-top-right rounded-md bg-white dark:bg-black py-1 shadow-lg ring-1 ring-black dark:ring-gray-600 ring-opacity-5 focus:outline-none right-2" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+                        <a href="/auth/logout" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800" role="menuitem" tabindex="-1">Logout</a>
+                    </div>
+                    <span v-if="user" @click="showUserMenu=!showUserMenu" class="flex cursor-pointer bg-gray-50 items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50">
+                        <img class="h-8 w-8 rounded-full bg-gray-50" :src="user.profileUrl" alt="">
+                        <span class="sr-only">Your profile</span>
+                        <span aria-hidden="true">{{user.displayName}}</span>
+                    </span>
+                </li>
+            </ul>
+        </nav>
+        <template #mobiletitlebar>
+            <div class="flex-1 text-sm font-semibold leading-6 text-gray-900">{{ activeSection.title }}</div>
+            <span v-if="user" class="cursor-pointer bg-gray-50">
+                <span class="sr-only">Your profile</span>
+                <img class="h-8 w-8 rounded-full bg-gray-50" :src="user.profileUrl" alt="">
+            </span>
+        </template>
+    </sidebar-layout>
+    <main class="lg:pl-72">
+        <div v-if="init" class="px-4 sm:px-6 lg:px-8">
+            <sign-in v-if="!user"></sign-in>
+            <div v-else>
+                <h1 class="hidden lg:block pt-4 mb-2 text-3xl font-bold leading-tight tracking-tight text-gray-900">{{ activeSection.title }}</h1>
+                <component :key="refreshKey" :is="activeSection.component" @nav="navTo" :type="activeSection.type"></component>
+            </div>            
+        </div>
+    </main>
+</div>
+
+<script type="module">
+import { createApp, ref, onMounted, shallowRef } from "vue"
+import { JsonApiClient, leftPart, rightPart, appendQueryString, humanize } from "@servicestack/client"
+import ServiceStackVue, { useClient, useAuth, useMetadata } from "@servicestack/vue"
+import { Authenticate, AdminData } from "dtos.mjs"
+
+const { loadMetadata, metadataApi, typeOf } = useMetadata()
+await loadMetadata({
+    olderThan: window.Server ? null : location.search.includes('clear=metadata') ? 0 : 60 * 60 * 1000, //1hr
+})
+
+const sections = {
+    Dashboard: {
+        icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>`,
+        component: {
+            template:`
+            <div>
+              <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
+                <div v-for="stat in stats" @click="$emit('nav',stat.label)" class="cursor-pointer hover:bg-gray-50 overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
+                  <dt class="truncate text-sm font-medium text-gray-500">Total {{humanize(stat.label)}}</dt>
+                  <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{formatNumber(stat.total)}}</dd>
+                </div>
+              </dl>
+              <p class="mt-8 text-sm font-semibold leading-6">
+                Go to <a href="/" class="text-indigo-600">Home <span aria-hidden="true">&rarr;</span></a>    
+              </p>
+
+              <div>
+                <div class="mt-20 mx-auto text-gray-500 max-w-screen-lg">
+                    <h2 class="mt-4 text-3xl sm:text-4xl text-slate-900 font-extrabold tracking-tight dark:text-slate-50">
+                        Build beautiful custom .NET Admin UIs in minutes
+                    </h2>
+                    <p class="my-3 mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl">
+                        In this video we explore the Server Multi Razor Page and Client rendered Admin UI Pages 
+                        to see how to use the new SidebarLayout and <a href="https://docs.servicestack.net/vue/autoquerygrid">AutoQueryGrid</a> Vue Tailwind components 
+                        to build beautiful Admin UI Pages within minutes.
+                    </p>
+                    <iframe class="mt-4 w-full aspect-video" src="https://www.youtube.com/embed/wlRA4_owEsc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+                </div>
+              </div>
+
+            </div>`,
+            setup() {
+                const client = useClient()
+                const stats = ref([])
+                client.swr(new AdminData(), r => stats.value = r.response?.pageStats || [])
+                const formatNumber = value => new Intl.NumberFormat().format(value)
+                return { stats, humanize, formatNumber }
+            }
+        },
+    },
+    Bookings: {
+        type: 'Booking',
+        component: {
+            template:`<AutoQueryGrid :type="type" 
+                selected-columns="id,name,roomType,roomNumber,bookingStartDate,bookingEndDate,cost,couponId,discount"
+                :header-titles="{ roomNumber:'Room No', bookingStartDate:'Start Date', bookingEndDate:'End Date', couponId:'Coupon' }"
+                :visible-from="{ roomNumber:'lg', bookingEndDate:'xl', cost:'md', couponId:'xl', discount:'never' }" />`,
+        },
+    },
+    Coupons: {
+        type: 'Coupon',
+        component: {
+            template:`<AutoQueryGrid :type="type" />`,
+        },
+    },
+}
+function getIcon(id) {
+    const section = sections[id]
+    return section.icon  || typeOf(section.type)?.icon?.svg ||
+        `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2M3 8v6m0-6h6m12 0v6m0-6H9m12 6v4a2 2 0 0 1-2 2H9m12-6H9m-6 0v4a2 2 0 0 0 2 2h4m-6-6h6m0-6v6m0 0v6m6-12v12"></path></svg>`
+}
+Object.keys(sections).map(id => {
+    const section = sections[id]
+    section.id = id
+    section.label = section.label || humanize(id)
+    section.title = section.title || section.label
+    section.icon  = getIcon(id)
+    section.component.props = section.component.props || ['type']
+    section.component.emits = section.component.emits || ['nav']
+})
+
+const App = {
+    setup() {
+        const { user, signIn } = useAuth()
+        const client = useClient()
+        const sidebar = ref()
+        const refreshKey = ref(1)
+        const showUserMenu = ref(false)
+        const init = ref(false)
+        const getSection = () => rightPart(leftPart(location.hash,'?'), '#')
+        const activeSection = shallowRef(sections[getSection()] || sections.Dashboard)
+
+        function navTo(section, args, pushState=true) {
+            if (!args) args = {}
+            refreshKey.value++
+            activeSection.value = sections[section] || sections.Dashboard
+            if (pushState) history.pushState({ section, ...args }, null, appendQueryString(`#${section}`, args))
+            sidebar.value.toggle(false)
+        }
+
+        onMounted(async () => {
+            window.addEventListener('popstate', event => {
+                navTo(event.state?.section || getSection(), {}, false)
+            })
+
+            const api = await client.api(new Authenticate())
+            if (api.succeeded) {
+                signIn(api.response)
+            }
+            init.value = true
+        })
+
+        return { init, sidebar, user, sections, activeSection, navTo, refreshKey, showUserMenu }
+    }
+}
+
+const client = JsonApiClient.create()
+const app = createApp(App)
+app.use(ServiceStackVue)
+app.component('RouterLink', ServiceStackVue.component('RouterLink'))
+app.provide('client', client)
+app.mount('#app')
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/MyApp/wwwroot/css/app.css b/MyApp/wwwroot/css/app.css
new file mode 100644
index 0000000..5fb9eae
--- /dev/null
+++ b/MyApp/wwwroot/css/app.css
@@ -0,0 +1 @@
+/*! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af}input::placeholder,textarea::placeholder{color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}b,strong{font-weight:600}[v-cloak]{display:none}[multiple],[type=date],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}[multiple]:focus,[type=date]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,select:focus,textarea:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact}[multiple]{background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}[type=checkbox]:checked,[type=radio]:checked{border-color:#0000;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=checkbox]:indeterminate,[type=radio]:checked:focus,[type=radio]:checked:hover{border-color:#0000;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{border-color:#0000;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px auto -webkit-focus-ring-color}.aspect-h-9{--tw-aspect-h:9}.aspect-w-16{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%);--tw-aspect-w:16}.aspect-w-16>*{position:absolute;height:100%;width:100%;top:0;right:0;bottom:0;left:0}.dark input:-webkit-autofill,.dark input:-webkit-autofill:focus{-webkit-transition:background-color 600000s 0s,color 600000s 0s;transition:background-color 600000s 0s,color 600000s 0s}.dark input[data-autocompleted]{background-color:initial!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.bottom-0{bottom:0}.left-0{left:0}.left-2{left:.5rem}.left-6{left:1.5rem}.left-full{left:100%}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-2{top:.5rem}.isolate{isolation:isolate}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.col-span-12{grid-column:span 12/span 12}.col-span-3{grid-column:span 3/span 3}.col-span-6{grid-column:span 6/span 6}.-m-2{margin:-.5rem}.-m-2\.5{margin:-.625rem}.m-0{margin:0}.m-2{margin:.5rem}.m-4{margin:1rem}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.-mx-1\.5{margin-left:-.375rem;margin-right:-.375rem}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.-my-1{margin-top:-.25rem;margin-bottom:-.25rem}.-my-1\.5{margin-top:-.375rem;margin-bottom:-.375rem}.-my-2{margin-top:-.5rem;margin-bottom:-.5rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-20{margin-top:5rem;margin-bottom:5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-8{margin-top:2rem;margin-bottom:2rem}.-mb-px{margin-bottom:-1px}.-ml-px{margin-left:-1px}.-mr-28{margin-right:-7rem}.-mt-1{margin-top:-.25rem}.-mt-10{margin-top:-2.5rem}.-mt-3{margin-top:-.75rem}.-mt-8{margin-top:-2rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:.75rem}.mb-32{margin-bottom:8rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-0{margin-left:0}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-20{margin-left:5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-16{margin-right:4rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mr-8{margin-right:2rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-24{margin-top:6rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-video{aspect-ratio:16/9}.h-0{height:0}.h-1\/3{height:33.333333%}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-28{height:7rem}.h-32{height:8rem}.h-36{height:9rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-full{height:100%}.max-h-24{max-height:6rem}.max-h-60{max-height:15rem}.max-h-\[130px\]{max-height:130px}.min-h-0{min-height:0}.min-h-full{min-height:100%}.min-h-screen{min-height:100vh}.w-1\/3{width:33.333333%}.w-1\/4{width:25%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\/3{width:66.666667%}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3\/4{width:75%}.w-32{width:8rem}.w-36{width:9rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-60{width:15rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-fit{max-width:-moz-fit-content;max-width:fit-content}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-prose{max-width:65ch}.max-w-screen-lg{max-width:1024px}.max-w-screen-md{max-width:768px}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.flex-grow-0{flex-grow:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.border-collapse{border-collapse:collapse}.origin-top-right{transform-origin:top right}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x:0px}.translate-x-5{--tw-translate-x:1.25rem}.translate-x-5,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-4{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-4{--tw-translate-y:1rem}.rotate-180{--tw-rotate:180deg}.rotate-180,.scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.list-decimal{list-style-type:decimal}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.columns-2{-moz-columns:2;column-count:2}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-4{row-gap:1rem}.gap-y-5{row-gap:1.25rem}.gap-y-7{row-gap:1.75rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-20>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(5rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.divide-gray-300>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(209 213 219/var(--tw-divide-opacity))}.divide-gray-700>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(55 65 81/var(--tw-divide-opacity))}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;white-space:nowrap}.text-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-accent-2{--tw-border-opacity:1;border-color:rgb(234 234 234/var(--tw-border-opacity))}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}.border-green-400{--tw-border-opacity:1;border-color:rgb(74 222 128/var(--tw-border-opacity))}.border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}.border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165/var(--tw-border-opacity))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-yellow-400{--tw-border-opacity:1;border-color:rgb(250 204 21/var(--tw-border-opacity))}.border-zinc-100{--tw-border-opacity:1;border-color:rgb(244 244 245/var(--tw-border-opacity))}.bg-accent-1{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-cyan-600{--tw-bg-opacity:1;background-color:rgb(8 145 178/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-gray-900\/80{background-color:#111827cc}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.bg-indigo-900{--tw-bg-opacity:1;background-color:rgb(49 46 129/var(--tw-bg-opacity))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-sky-500{--tw-bg-opacity:1;background-color:rgb(14 165 233/var(--tw-bg-opacity))}.bg-sky-600{--tw-bg-opacity:1;background-color:rgb(2 132 199/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-400\/10{background-color:#94a3b81a}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity))}.bg-opacity-75{--tw-bg-opacity:0.75}.fill-gray-300{fill:#d1d5db}.fill-gray-600{fill:#4b5563}.fill-zinc-500{fill:#71717a}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-1\.5{padding-bottom:.375rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-1{padding-left:.25rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-8{padding-left:2rem}.pr-1{padding-right:.25rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-6{padding-right:1.5rem}.pr-8{padding-right:2rem}.pr-9{padding-right:2.25rem}.pt-0{padding-top:0}.pt-0\.5{padding-top:.125rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-justify{text-align:justify}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.align-text-bottom{vertical-align:text-bottom}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-6xl{font-size:3.75rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-8{line-height:2rem}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wider{letter-spacing:.05em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.text-cyan-200{--tw-text-opacity:1;color:rgb(165 243 252/var(--tw-text-opacity))}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}.text-danger{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-200{--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}.text-green-900{--tw-text-opacity:1;color:rgb(20 83 45/var(--tw-text-opacity))}.text-indigo-200{--tw-text-opacity:1;color:rgb(199 210 254/var(--tw-text-opacity))}.text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.text-indigo-700{--tw-text-opacity:1;color:rgb(67 56 202/var(--tw-text-opacity))}.text-purple-200{--tw-text-opacity:1;color:rgb(233 213 255/var(--tw-text-opacity))}.text-purple-500{--tw-text-opacity:1;color:rgb(168 85 247/var(--tw-text-opacity))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity))}.text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity))}.text-red-900{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity))}.text-sky-200{--tw-text-opacity:1;color:rgb(186 230 253/var(--tw-text-opacity))}.text-sky-500{--tw-text-opacity:1;color:rgb(14 165 233/var(--tw-text-opacity))}.text-sky-600{--tw-text-opacity:1;color:rgb(2 132 199/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity))}.text-zinc-800{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.placeholder-red-300::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(252 165 165/var(--tw-placeholder-opacity))}.placeholder-red-300::placeholder{--tw-placeholder-opacity:1;color:rgb(252 165 165/var(--tw-placeholder-opacity))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.shadow-none,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!outline-none{outline:2px solid #0000!important;outline-offset:2px!important}.outline-none{outline:2px solid #0000;outline-offset:2px}.outline{outline-style:solid}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-0,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity))}.ring-blue-800{--tw-ring-opacity:1;--tw-ring-color:rgb(30 64 175/var(--tw-ring-opacity))}.ring-indigo-500{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.ring-red-500{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}.ring-opacity-5{--tw-ring-opacity:0.05}.ring-offset-black{--tw-ring-offset-color:#000}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\!transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[vite\:vue\]{vite:vue}.file\:mr-4::file-selector-button{margin-right:1rem}.file\:rounded-full::file-selector-button{border-radius:9999px}.file\:border-0::file-selector-button{border-width:0}.file\:bg-violet-50::file-selector-button{--tw-bg-opacity:1;background-color:rgb(245 243 255/var(--tw-bg-opacity))}.file\:px-4::file-selector-button{padding-left:1rem;padding-right:1rem}.file\:py-2::file-selector-button{padding-top:.5rem;padding-bottom:.5rem}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-semibold::file-selector-button{font-weight:600}.file\:text-violet-700::file-selector-button{--tw-text-opacity:1;color:rgb(109 40 217/var(--tw-text-opacity))}.focus-within\:border-indigo-500:focus-within{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}.focus-within\:border-red-500:focus-within{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.focus-within\:border-transparent:focus-within{border-color:#0000}.focus-within\:outline-none:focus-within{outline:2px solid #0000;outline-offset:2px}.focus-within\:ring-1:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus-within\:ring-1:focus-within,.focus-within\:ring-2:focus-within{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus-within\:ring-indigo-500:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.focus-within\:ring-red-500:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}.focus-within\:ring-offset-2:focus-within{--tw-ring-offset-width:2px}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.hover\:border-gray-400:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.hover\:border-indigo-700:hover{--tw-border-opacity:1;border-color:rgb(67 56 202/var(--tw-border-opacity))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\:bg-cyan-700:hover{--tw-bg-opacity:1;background-color:rgb(14 116 144/var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-green-100:hover{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.hover\:bg-indigo-200:hover{--tw-bg-opacity:1;background-color:rgb(199 210 254/var(--tw-bg-opacity))}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity))}.hover\:bg-purple-700:hover{--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity))}.hover\:bg-red-200:hover{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.hover\:bg-sky-700:hover{--tw-bg-opacity:1;background-color:rgb(3 105 161/var(--tw-bg-opacity))}.hover\:bg-slate-400\/20:hover{background-color:#94a3b833}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\:bg-yellow-100:hover{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.hover\:bg-yellow-50:hover{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.hover\:text-cyan-800:hover{--tw-text-opacity:1;color:rgb(21 94 117/var(--tw-text-opacity))}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-green-500:hover{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.hover\:text-green-800:hover{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}.hover\:text-indigo-500:hover{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}.hover\:text-indigo-600:hover{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.hover\:text-indigo-800:hover{--tw-text-opacity:1;color:rgb(55 48 163/var(--tw-text-opacity))}.hover\:text-purple-800:hover{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity))}.hover\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\:text-red-900:hover{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity))}.hover\:text-sky-500:hover{--tw-text-opacity:1;color:rgb(14 165 233/var(--tw-text-opacity))}.hover\:text-sky-800:hover{--tw-text-opacity:1;color:rgb(7 89 133/var(--tw-text-opacity))}.hover\:text-teal-500:hover{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration-line:none}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.hover\:shadow-2xl:hover,.hover\:shadow-lg:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:file\:bg-violet-100::file-selector-button:hover{--tw-bg-opacity:1;background-color:rgb(237 233 254/var(--tw-bg-opacity))}.focus\:\!border-none:focus{border-style:none!important}.focus\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}.focus\:border-red-500:focus{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.focus\:bg-indigo-500:focus{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity))}.focus\:bg-red-500:focus{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.focus\:\!outline-none:focus{outline:2px solid #0000!important;outline-offset:2px!important}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-1:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.focus\:ring-cyan-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(103 232 249/var(--tw-ring-opacity))}.focus\:ring-cyan-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(6 182 212/var(--tw-ring-opacity))}.focus\:ring-green-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(134 239 172/var(--tw-ring-opacity))}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(34 197 94/var(--tw-ring-opacity))}.focus\:ring-green-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(22 163 74/var(--tw-ring-opacity))}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.focus\:ring-purple-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(168 85 247/var(--tw-ring-opacity))}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}.focus\:ring-sky-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(125 211 252/var(--tw-ring-opacity))}.focus\:ring-sky-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(14 165 233/var(--tw-ring-opacity))}.focus\:ring-yellow-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(202 138 4/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-green-50:focus{--tw-ring-offset-color:#f0fdf4}.focus\:ring-offset-yellow-50:focus{--tw-ring-offset-color:#fefce8}.disabled\:border-slate-200:disabled{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.disabled\:bg-blue-400:disabled{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.disabled\:bg-cyan-400:disabled{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.disabled\:bg-gray-100:disabled{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.disabled\:bg-green-400:disabled{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity))}.disabled\:bg-indigo-400:disabled{--tw-bg-opacity:1;background-color:rgb(129 140 248/var(--tw-bg-opacity))}.disabled\:bg-purple-400:disabled{--tw-bg-opacity:1;background-color:rgb(192 132 252/var(--tw-bg-opacity))}.disabled\:bg-red-400:disabled{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity))}.disabled\:bg-sky-400:disabled{--tw-bg-opacity:1;background-color:rgb(56 189 248/var(--tw-bg-opacity))}.disabled\:bg-slate-50:disabled{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.disabled\:text-gray-400:disabled{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.disabled\:text-slate-500:disabled{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\:hover\:bg-blue-400:hover:disabled{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.disabled\:hover\:bg-cyan-400:hover:disabled{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.disabled\:hover\:bg-green-400:hover:disabled{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity))}.disabled\:hover\:bg-indigo-400:hover:disabled{--tw-bg-opacity:1;background-color:rgb(129 140 248/var(--tw-bg-opacity))}.disabled\:hover\:bg-purple-400:hover:disabled{--tw-bg-opacity:1;background-color:rgb(192 132 252/var(--tw-bg-opacity))}.disabled\:hover\:bg-red-400:hover:disabled{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity))}.disabled\:hover\:bg-sky-400:hover:disabled{--tw-bg-opacity:1;background-color:rgb(56 189 248/var(--tw-bg-opacity))}.disabled\:hover\:bg-white:hover:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.group:hover .group-hover\:inline{display:inline}.group:hover .group-hover\:bg-indigo-700{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity))}.group:hover .group-hover\:fill-indigo-500{fill:#6366f1}.group:hover .group-hover\:fill-teal-500{fill:#14b8a6}.group:hover .group-hover\:text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.group:hover .group-hover\:text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .dark\:divide-gray-700)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(55 65 81/var(--tw-divide-opacity))}:is(.dark .dark\:divide-gray-800)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(31 41 55/var(--tw-divide-opacity))}:is(.dark .dark\:border){border-width:1px}:is(.dark .dark\:border-2){border-width:2px}:is(.dark .dark\:border-gray-600){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}:is(.dark .dark\:border-gray-700){--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}:is(.dark .dark\:border-gray-800){--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity))}:is(.dark .dark\:border-indigo-400){--tw-border-opacity:1;border-color:rgb(129 140 248/var(--tw-border-opacity))}:is(.dark .dark\:border-pink-600){--tw-border-opacity:1;border-color:rgb(219 39 119/var(--tw-border-opacity))}:is(.dark .dark\:border-zinc-700\/40){border-color:#3f3f4666}:is(.dark .dark\:bg-black){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}:is(.dark .dark\:bg-blue-200){--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}:is(.dark .dark\:bg-blue-600){--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}:is(.dark .dark\:bg-blue-800){--tw-bg-opacity:1;background-color:rgb(30 64 175/var(--tw-bg-opacity))}:is(.dark .dark\:bg-cyan-600){--tw-bg-opacity:1;background-color:rgb(8 145 178/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-400){--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-700){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-800){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-900){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-200){--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-600){--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-800){--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-900){--tw-bg-opacity:1;background-color:rgb(20 83 45/var(--tw-bg-opacity))}:is(.dark .dark\:bg-indigo-400){--tw-bg-opacity:1;background-color:rgb(129 140 248/var(--tw-bg-opacity))}:is(.dark .dark\:bg-indigo-600){--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}:is(.dark .dark\:bg-indigo-800){--tw-bg-opacity:1;background-color:rgb(55 48 163/var(--tw-bg-opacity))}:is(.dark .dark\:bg-indigo-900){--tw-bg-opacity:1;background-color:rgb(49 46 129/var(--tw-bg-opacity))}:is(.dark .dark\:bg-purple-600){--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-200){--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-600){--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-900){--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity))}:is(.dark .dark\:bg-sky-600){--tw-bg-opacity:1;background-color:rgb(2 132 199/var(--tw-bg-opacity))}:is(.dark .dark\:bg-slate-800){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}:is(.dark .dark\:bg-transparent){background-color:initial}:is(.dark .dark\:bg-yellow-200){--tw-bg-opacity:1;background-color:rgb(254 240 138/var(--tw-bg-opacity))}:is(.dark .dark\:bg-opacity-75){--tw-bg-opacity:0.75}:is(.dark .dark\:fill-gray-300){fill:#d1d5db}:is(.dark .dark\:text-black){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}:is(.dark .dark\:text-blue-300){--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity))}:is(.dark .dark\:text-blue-400){--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}:is(.dark .dark\:text-cyan-400){--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-100){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-200){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-300){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-400){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-50){--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-500){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-600){--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}:is(.dark .dark\:text-green-100){--tw-text-opacity:1;color:rgb(220 252 231/var(--tw-text-opacity))}:is(.dark .dark\:text-green-300){--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity))}:is(.dark .dark\:text-green-400){--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}:is(.dark .dark\:text-green-500){--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}:is(.dark .dark\:text-green-600){--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-300){--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-400){--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-500){--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}:is(.dark .dark\:text-purple-400){--tw-text-opacity:1;color:rgb(192 132 252/var(--tw-text-opacity))}:is(.dark .dark\:text-red-100){--tw-text-opacity:1;color:rgb(254 226 226/var(--tw-text-opacity))}:is(.dark .dark\:text-red-200){--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity))}:is(.dark .dark\:text-red-300){--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity))}:is(.dark .dark\:text-red-400){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity))}:is(.dark .dark\:text-red-800){--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity))}:is(.dark .dark\:text-sky-300){--tw-text-opacity:1;color:rgb(125 211 252/var(--tw-text-opacity))}:is(.dark .dark\:text-sky-400){--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity))}:is(.dark .dark\:text-slate-200){--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity))}:is(.dark .dark\:text-slate-400){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}:is(.dark .dark\:text-slate-50){--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity))}:is(.dark .dark\:text-white){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .dark\:text-zinc-200){--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity))}:is(.dark .dark\:ring-gray-600){--tw-ring-opacity:1;--tw-ring-color:rgb(75 85 99/var(--tw-ring-opacity))}:is(.dark .dark\:ring-offset-black){--tw-ring-offset-color:#000}:is(.dark .dark\:ring-offset-green-200){--tw-ring-offset-color:#bbf7d0}:is(.dark .dark\:file\:bg-violet-900)::file-selector-button{--tw-bg-opacity:1;background-color:rgb(76 29 149/var(--tw-bg-opacity))}:is(.dark .dark\:file\:text-violet-200)::file-selector-button{--tw-text-opacity:1;color:rgb(221 214 254/var(--tw-text-opacity))}:is(.dark .dark\:hover\:border-blue-600:hover){--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}:is(.dark .dark\:hover\:border-indigo-700:hover){--tw-border-opacity:1;border-color:rgb(67 56 202/var(--tw-border-opacity))}:is(.dark .dark\:hover\:bg-blue-700:hover){--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-blue-900:hover){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-cyan-700:hover){--tw-bg-opacity:1;background-color:rgb(14 116 144/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-200:hover){--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-700:hover){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-800:hover){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-900:hover){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-green-700:hover){--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-indigo-300:hover){--tw-bg-opacity:1;background-color:rgb(165 180 252/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-indigo-700:hover){--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-indigo-800:hover){--tw-bg-opacity:1;background-color:rgb(55 48 163/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-purple-700:hover){--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-red-700:hover){--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-sky-700:hover){--tw-bg-opacity:1;background-color:rgb(3 105 161/var(--tw-bg-opacity))}:is(.dark .hover\:dark\:bg-gray-900):hover{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:text-blue-200:hover){--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-blue-400:hover){--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-cyan-200:hover){--tw-text-opacity:1;color:rgb(165 243 252/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-gray-300:hover){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-gray-400:hover){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-gray-50:hover){--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-green-200:hover){--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-green-400:hover){--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-indigo-200:hover){--tw-text-opacity:1;color:rgb(199 210 254/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-indigo-400:hover){--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-indigo-500:hover){--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-purple-200:hover){--tw-text-opacity:1;color:rgb(233 213 255/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-red-200:hover){--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-red-400:hover){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-sky-200:hover){--tw-text-opacity:1;color:rgb(186 230 253/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-sky-400:hover){--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-teal-500:hover){--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-white:hover){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .dark\:hover\:file\:bg-violet-800)::file-selector-button:hover{--tw-bg-opacity:1;background-color:rgb(91 33 182/var(--tw-bg-opacity))}:is(.dark .dark\:focus\:text-black:focus){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}:is(.dark .dark\:focus\:ring-blue-800:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(30 64 175/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-cyan-500:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(6 182 212/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-green-500:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(34 197 94/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-indigo-600:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-indigo-800:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(55 48 163/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-purple-800:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(107 33 168/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-red-500:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-sky-500:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(14 165 233/var(--tw-ring-opacity))}:is(.dark .dark\:disabled\:bg-gray-800:disabled){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}:is(.dark .dark\:disabled\:hover\:bg-black:hover:disabled){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}:is(.dark .group:hover .dark\:group-hover\:text-gray-400){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}@media (min-width:640px){.sm\:static{position:static}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:float-left{float:left}.sm\:-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.sm\:mx-0{margin-left:0;margin-right:0}.sm\:mx-4{margin-left:1rem;margin-right:1rem}.sm\:mx-auto{margin-left:auto;margin-right:auto}.sm\:my-8{margin-top:2rem;margin-bottom:2rem}.sm\:ml-2{margin-left:.5rem}.sm\:ml-3{margin-left:.75rem}.sm\:mr-4{margin-right:1rem}.sm\:mt-0{margin-top:0}.sm\:mt-24{margin-top:6rem}.sm\:mt-4{margin-top:1rem}.sm\:block{display:block}.sm\:inline-block{display:inline-block}.sm\:flex{display:flex}.sm\:table-cell{display:table-cell}.sm\:hidden{display:none}.sm\:h-12{height:3rem}.sm\:h-2\/3{height:66.666667%}.sm\:h-44{height:11rem}.sm\:h-screen{height:100vh}.sm\:w-12{width:3rem}.sm\:w-44{width:11rem}.sm\:w-full{width:100%}.sm\:max-w-3xl{max-width:48rem}.sm\:max-w-md{max-width:28rem}.sm\:max-w-prose{max-width:65ch}.sm\:translate-y-0{--tw-translate-y:0px}.sm\:scale-100,.sm\:translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:scale-100{--tw-scale-x:1;--tw-scale-y:1}.sm\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row-reverse{flex-direction:row-reverse}.sm\:items-center{align-items:center}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:space-x-12>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(3rem*var(--tw-space-x-reverse));margin-left:calc(3rem*(1 - var(--tw-space-x-reverse)))}.sm\:space-x-5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.25rem*var(--tw-space-x-reverse));margin-left:calc(1.25rem*(1 - var(--tw-space-x-reverse)))}.sm\:overflow-hidden{overflow:hidden}.sm\:rounded{border-radius:.25rem}.sm\:rounded-lg{border-radius:.5rem}.sm\:rounded-md{border-radius:.375rem}.sm\:p-0{padding:0}.sm\:p-6{padding:1.5rem}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-32{padding-top:8rem;padding-bottom:8rem}.sm\:pb-0{padding-bottom:0}.sm\:pb-4{padding-bottom:1rem}.sm\:pl-16{padding-left:4rem}.sm\:pr-6{padding-right:1.5rem}.sm\:pt-1{padding-top:.25rem}.sm\:text-left{text-align:left}.sm\:align-middle{vertical-align:middle}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.sm\:duration-700{transition-duration:.7s}}@media (min-width:768px){.md\:mb-0{margin-bottom:0}.md\:mb-12{margin-bottom:3rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-28{margin-bottom:7rem}.md\:mt-5{margin-top:1.25rem}.md\:mt-8{margin-top:2rem}.md\:inline{display:inline}.md\:table-cell{display:table-cell}.md\:grid{display:grid}.md\:max-w-3xl{max-width:48rem}.md\:max-w-xl{max-width:36rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-x-16{-moz-column-gap:4rem;column-gap:4rem}.md\:rounded-lg{border-radius:.5rem}.md\:p-4{padding:1rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:pr-8{padding-right:2rem}.md\:text-left{text-align:left}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:leading-none{line-height:1}}@media (min-width:1024px){.lg\:fixed{position:fixed}.lg\:inset-y-0{top:0;bottom:0}.lg\:z-10{z-index:10}.lg\:-mx-8{margin-left:-2rem;margin-right:-2rem}.lg\:mb-0{margin-bottom:0}.lg\:mt-20{margin-top:5rem}.lg\:block{display:block}.lg\:inline{display:inline}.lg\:flex{display:flex}.lg\:table-cell{display:table-cell}.lg\:hidden{display:none}.lg\:w-1\/2{width:50%}.lg\:w-72{width:18rem}.lg\:max-w-7xl{max-width:80rem}.lg\:max-w-none{max-width:none}.lg\:max-w-screen-md{max-width:768px}.lg\:shrink-0{flex-shrink:0}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.lg\:space-y-20>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(5rem*var(--tw-space-y-reverse))}.lg\:rounded-md{border-radius:.375rem}.lg\:p-2{padding:.5rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:pb-28{padding-bottom:7rem}.lg\:pl-4{padding-left:1rem}.lg\:pl-72{padding-left:18rem}.lg\:pr-4{padding-right:1rem}.lg\:pr-8{padding-right:2rem}.lg\:pt-24{padding-top:6rem}.lg\:text-left{text-align:left}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-8xl{font-size:6rem;line-height:1}.lg\:hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}:is(.dark .dark\:lg\:hover\:bg-gray-900:hover){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}}@media (min-width:1280px){.xl\:col-span-6{grid-column:span 6/span 6}.xl\:inline{display:inline}.xl\:table-cell{display:table-cell}.xl\:max-w-3xl{max-width:48rem}.xl\:max-w-screen-lg{max-width:1024px}}@media (min-width:1536px){.\32xl\:table-cell{display:table-cell}.\32xl\:max-w-screen-xl{max-width:1280px}}
\ No newline at end of file
diff --git a/MyApp/wwwroot/css/highlight.css b/MyApp/wwwroot/css/highlight.css
new file mode 100644
index 0000000..8332dac
--- /dev/null
+++ b/MyApp/wwwroot/css/highlight.css
@@ -0,0 +1,62 @@
+/* highlight.js - vs.css */
+.hljs {background:white;color:black}
+.hljs-comment,.hljs-quote,.hljs-variable{color:#008000}
+.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-name,.hljs-tag{color:#00f}
+.hljs-string,.hljs-title,.hljs-section,.hljs-attribute,.hljs-literal,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-addition{color:#a31515}
+.hljs-deletion,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-meta{color:#2b91af}
+.hljs-doctag{color:#808080}
+.hljs-attr{color: #f00}
+.hljs-symbol,.hljs-bullet,.hljs-link{color:#00b0e8}
+.hljs-emphasis{font-style:italic}
+.hljs-strong{font-weight:bold}
+
+/* https://unpkg.com/@highlightjs/cdn-assets/styles/atom-one-dark.min.css */
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}
+.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}
+.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst,.hljs-tag{color:#e06c75}
+.hljs-literal{color:#56b6c2}
+.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}
+.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}
+.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}
+.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
+.hljs-link{text-decoration:underline}
+
+/*highlightjs*/
+.hljs, .prose :where(pre):not(:where([class~="not-prose"] *)) .hljs {
+    color: #e5e7eb !important;
+    background-color: #282c34 !important;
+}
+.hljs-comment, .hljs-quote {
+    color: rgb(148 163 184); /*text-slate-400*/
+}
+
+pre {
+    overflow-x: auto;
+    font-weight: 400;
+    font-size: .875em;
+    line-height: 1.7142857;
+    margin-top: 1.7142857em;
+    margin-bottom: 1.7142857em;
+    border-radius: .375rem;
+    padding: .8571429em 1.1428571em;    
+    max-width: calc(100vw - 1rem);
+    min-width: fit-content;
+    background-color: #282c34 !important;
+}
+pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+}
+
+/*  atom-one-dark */
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}
+.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}
+.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}
+.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}
+.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}
+.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}
+.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}
+.hljs-emphasis{font-style:italic}
+.hljs-strong{font-weight:700}
+.hljs-link{text-decoration:underline}
\ No newline at end of file
diff --git a/MyApp/wwwroot/css/lite-yt-embed.css b/MyApp/wwwroot/css/lite-yt-embed.css
new file mode 100644
index 0000000..50bc3d1
--- /dev/null
+++ b/MyApp/wwwroot/css/lite-yt-embed.css
@@ -0,0 +1,93 @@
+lite-youtube {
+    background-color: #000;
+    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+    position: relative;
+    display: block;
+    contain: content;
+    background-position: center center;
+    background-size: cover;
+    cursor: pointer;
+    max-width: 720px;
+}
+
+lite-youtube:hover {
+    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* gradient */
+lite-youtube::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);*/
+    background-position: top;
+    background-repeat: repeat-x;
+    height: 60px;
+    padding-bottom: 50px;
+    width: 100%;
+    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* responsive iframe with a 16:9 aspect ratio
+    thanks https://css-tricks.com/responsive-iframes/
+*/
+lite-youtube::after {
+    content: "";
+    display: block;
+    padding-bottom: calc(100% / (16 / 9));
+}
+lite-youtube > iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 0;
+}
+
+/* play button */
+lite-youtube > .lty-playbtn {
+    width: 60px;
+    height: 42px;
+    position: absolute;
+    cursor: pointer;
+    transform: translate3d(-50%, -50%, 0);
+    color: white;
+    top: 50%;
+    left: 50%;
+    z-index: 1;
+    opacity: 30%;
+    background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>') no-repeat;
+    filter: grayscale(100%);
+    border: none;
+}
+
+lite-youtube:hover > .lty-playbtn,
+lite-youtube .lty-playbtn:focus {
+    filter: grayscale(0);
+    transition: opacity 0.5s, filter .1s cubic-bezier(0, 0, 0.2, 1);
+    -webkit-transition: opacity 0.5s;
+    opacity: 100%;
+    outline: none;
+}
+
+/* Post-click styles */
+lite-youtube.lyt-activated {
+    cursor: unset;
+}
+lite-youtube.lyt-activated::before,
+lite-youtube.lyt-activated > .lty-playbtn {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.lyt-visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
\ No newline at end of file
diff --git a/MyApp/wwwroot/css/typography.css b/MyApp/wwwroot/css/typography.css
new file mode 100644
index 0000000..382af0d
--- /dev/null
+++ b/MyApp/wwwroot/css/typography.css
@@ -0,0 +1,240 @@
+/* @tailwindcss/typography */
+.prose {color: inherit;max-width: 65ch }.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {color: var(--tw-prose-lead);font-size: 1.25em;line-height: 1.6;margin-top: 1.2em;margin-bottom: 1.2em }.prose :where(a):not(:where([class~="not-prose"] *)) {color: inherit;text-decoration: underline;font-weight: 500 }.prose :where(a):not(:where([class~="not-prose"] *)):hover {opacity: .8;color: #4b5563 }.prose :where(strong):not(:where([class~="not-prose"] *)) {color: inherit;font-weight: 600 }.prose :where(ol):not(:where([class~="not-prose"] *)) {list-style-type: decimal;padding-left: 1.625em }.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {list-style-type: upper-alpha }.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {list-style-type: lower-alpha }.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {list-style-type: upper-alpha }.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {list-style-type: lower-alpha }.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {list-style-type: upper-roman }.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {list-style-type: lower-roman }.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {list-style-type: upper-roman }.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {list-style-type: lower-roman }.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {list-style-type: decimal }.prose :where(ul):not(:where([class~="not-prose"] *)) {list-style-type: disc;padding-left: 1.625em }.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {font-weight: 400;color: var(--tw-prose-counters) }.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {color: var(--tw-prose-bullets) }.prose :where(hr):not(:where([class~="not-prose"] *)) {border-color: var(--tw-prose-hr);border-top-width: 1px;margin-top: 3em;margin-bottom: 3em }.prose :where(blockquote):not(:where([class~="not-prose"] *)) {font-weight: 500;font-style: italic;color: var(--tw-prose-quotes);border-left-width: .25rem;border-left-color: var(--tw-prose-quote-borders);quotes: "\201c""\201d""\2018""\2019";margin-top: 1.6em;margin-bottom: 1.6em;padding-left: 1em }.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *)):before {content: open-quote }.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *)):after {content: close-quote }.prose :where(h1):not(:where([class~="not-prose"] *)) {color: inherit;font-weight: 800;font-size: 2.25em;margin-top: 0;margin-bottom: .8888889em;line-height: 1.1111111 }.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {font-weight: 900 }.prose :where(h2):not(:where([class~="not-prose"] *)) {color: inherit;font-weight: 700;font-size: 1.5em;margin-top: 2em;margin-bottom: 1em;line-height: 1.3333333 }.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {font-weight: 800 }.prose :where(h3):not(:where([class~="not-prose"] *)) {color: inherit;font-weight: 600;font-size: 1.25em;margin-top: 1.6em;margin-bottom: .6em;line-height: 1.6 }.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {font-weight: 700 }.prose :where(h4):not(:where([class~="not-prose"] *)) {color: inherit;font-weight: 600;margin-top: 1.5em;margin-bottom: .5em;line-height: 1.5 }.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {font-weight: 700 }.prose :where(figure > *):not(:where([class~="not-prose"] *)) {margin-top: 0;margin-bottom: 0 }.prose :where(figcaption):not(:where([class~="not-prose"] *)) {color: var(--tw-prose-captions);font-size: .875em;line-height: 1.4285714;margin-top: .8571429em }.prose :where(code):not(:where([class~="not-prose"] *)) {color: #3b82f6;font-weight: 400;font-size: .875em;background-color: #eff6ff;border-radius: .25rem;padding: .25em .5rem }.prose :where(code):not(:where([class~="not-prose"] *)):before {content: "" }.prose :where(code):not(:where([class~="not-prose"] *)):after {content: "" }.prose :where(a code):not(:where([class~="not-prose"] *)) {color: var(--tw-prose-links) }.prose :where(pre):not(:where([class~="not-prose"] *)) {color: var(--tw-prose-pre-code);background-color: var(--tw-prose-pre-bg);overflow-x: auto;font-weight: 400;font-size: .875em;line-height: 1.7142857;margin-top: 1.7142857em;margin-bottom: 1.7142857em;border-radius: .375rem;padding: .8571429em 1.1428571em;max-width: calc(100vw - 1rem) }.prose :where(pre code):not(:where([class~="not-prose"] *)) {background-color: transparent;border-width: 0;border-radius: 0;padding: 0;font-weight: inherit;color: inherit;font-size: inherit;font-family: inherit;line-height: inherit }.prose :where(pre code):not(:where([class~="not-prose"] *)):before {content: none }.prose :where(pre code):not(:where([class~="not-prose"] *)):after {content: none }.prose :where(table):not(:where([class~="not-prose"] *)) {width: 100%;table-layout: auto;text-align: left;margin-top: 2em;margin-bottom: 2em;font-size: .875em;line-height: 1.7142857 }.prose :where(thead):not(:where([class~="not-prose"] *)) {border-bottom-width: 1px;border-bottom-color: var(--tw-prose-th-borders) }.prose :where(thead th):not(:where([class~="not-prose"] *)) {color: var(--tw-prose-headings);font-weight: 600;vertical-align: bottom;padding-right: .5714286em;padding-bottom: .5714286em;padding-left: .5714286em }.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {border-bottom-width: 1px;border-bottom-color: var(--tw-prose-td-borders) }.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {border-bottom-width: 0 }.prose :where(tbody td):not(:where([class~="not-prose"] *)) {vertical-align: baseline;padding: .5714286em }.prose {--tw-prose-body: #374151;--tw-prose-headings: #111827;--tw-prose-lead: #4b5563;--tw-prose-links: #111827;--tw-prose-bold: #111827;--tw-prose-counters: #6b7280;--tw-prose-bullets: #d1d5db;--tw-prose-hr: #e5e7eb;--tw-prose-quotes: #111827;--tw-prose-quote-borders: #e5e7eb;--tw-prose-captions: #6b7280;--tw-prose-code: #111827;--tw-prose-pre-code: #e5e7eb;--tw-prose-pre-bg: #1f2937;--tw-prose-th-borders: #d1d5db;--tw-prose-td-borders: #e5e7eb;--tw-prose-invert-body: #d1d5db;--tw-prose-invert-headings: #fff;--tw-prose-invert-lead: #9ca3af;--tw-prose-invert-links: #fff;--tw-prose-invert-bold: #fff;--tw-prose-invert-counters: #9ca3af;--tw-prose-invert-bullets: #4b5563;--tw-prose-invert-hr: #374151;--tw-prose-invert-quotes: #f3f4f6;--tw-prose-invert-quote-borders: #374151;--tw-prose-invert-captions: #9ca3af;--tw-prose-invert-code: #fff;--tw-prose-invert-pre-code: #d1d5db;--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);--tw-prose-invert-th-borders: #4b5563;--tw-prose-invert-td-borders: #374151;font-size: 1rem;line-height: 1.75 }.prose :where(p):not(:where([class~="not-prose"] *)) {margin-top: 1.25em;margin-bottom: 1.25em }.prose :where(img):not(:where([class~="not-prose"] *)) {margin-top: 2em;margin-bottom: 2em }.prose :where(video):not(:where([class~="not-prose"] *)) {margin-top: 2em;margin-bottom: 2em }.prose :where(figure):not(:where([class~="not-prose"] *)) {margin-top: 2em;margin-bottom: 2em }.prose :where(h2 code):not(:where([class~="not-prose"] *)) {font-size: .875em }.prose :where(h3 code):not(:where([class~="not-prose"] *)) {font-size: .9em }.prose :where(li):not(:where([class~="not-prose"] *)) {margin-top: .5em;margin-bottom: .5em }.prose :where(ol > li):not(:where([class~="not-prose"] *)) {padding-left: .375em }.prose :where(ul > li):not(:where([class~="not-prose"] *)) {padding-left: .375em }.prose>:where(ul > li p):not(:where([class~="not-prose"] *)) {margin-top: .75em;margin-bottom: .75em }.prose>:where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) {margin-top: 1.25em }.prose>:where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) {margin-bottom: 1.25em }.prose>:where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) {margin-top: 1.25em }.prose>:where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) {margin-bottom: 1.25em }.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~="not-prose"] *)) {margin-top: .75em;margin-bottom: .75em }.prose :where(hr + *):not(:where([class~="not-prose"] *)) {margin-top: 0 }.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {margin-top: 0 }.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {margin-top: 0 }.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {margin-top: 0 }.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {padding-left: 0 }.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {padding-right: 0 }.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {padding-left: 0 }.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {padding-right: 0 }.prose>:where(:first-child):not(:where([class~="not-prose"] *)) {margin-top: 0 }.prose>:where(:last-child):not(:where([class~="not-prose"] *)) {margin-bottom: 0 }.prose :where(b):not(:where([class~="not-prose"] *)) {color: inherit }.prose :where(em):not(:where([class~="not-prose"] *)) {color: inherit }
+
+.prose :where(img):not(:where([class~="not-prose"] *)) {
+    max-width: 100%;
+}
+.prose :where(pre):not(:where([class~="not-prose"] *)) {
+    background-color: var(--tw-prose-pre-bg) !important;
+    min-width: fit-content;
+}
+.prose :where(code):not(:where([class~="not-prose"] *))::before, .prose :where(code):not(:where([class~="not-prose"] *))::after {
+    content: ""
+}
+.prose :where(a):not(:where([class~="not-prose"] *)) {
+    color: inherit;
+    font-weight: 500;
+    text-decoration: underline;
+}
+.prose :where(a):not(:where([class~="not-prose"] *)):hover {
+    opacity: .8;
+    color: #4b5563;
+}
+.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
+    border-left-style: solid;
+}
+
+.dark .prose :not(:where([class~="not-prose"] *)), .dark .prose :where(td):not(:where([class~="not-prose"] *)) {
+    color: rgb(209 213 219); /*text-gray-300*/
+}
+.dark .prose :where(h1,h2,h3,h4,h5,h6,th):not(:where([class~="not-prose"] *)) {
+    color: rgb(243 244 246); /*text-gray-100*/
+}
+.dark .prose :where(code):not(:where([class~="not-prose"] *)) {
+    background-color: rgb(30 58 138); /*text-blue-900*/
+    color: rgb(243 244 246); /*text-gray-100*/
+}
+.dark .prose :where(pre code):not(:where([class~="not-prose"] *)) {
+    background-color: unset;
+}
+.prose :where(pre):not(:where([class~="not-prose"] *)) > code {
+    background-color: transparent;
+}
+
+/* override typography */
+:root {
+    --content-width: 54rem;
+}
+
+.prose { max-width: var(--content-width); }
+.prose :where(code):not(:where([class~="not-prose"] *)) {
+    width: var(--content-width);
+    max-width: var(--content-width);
+}
+.dark .prose :where(a):not(:where([class~="not-prose"] *)):hover {
+    opacity: .8;
+    color: rgb(165 180 252); /* text-slate-300 */
+}
+.not-prose { max-width: unset; }
+.prose-table { max-width: 56rem; width: 56rem; padding-left: 1px; overflow-x: auto; }
+.hide-h2+h2 { display:none }
+.hljs, .prose :where(pre):not(:where([class~="not-prose"] *)) .hljs {
+    color: var(--tw-prose-pre-code) !important;
+    background-color: var(--tw-prose-pre-bg) !important;
+}
+@media (min-width: 1024px) {
+    .lg\:prose-xl {
+        font-size: 1.25rem;
+        line-height: 1.8;
+    }
+    .lg\:prose-xl .not-prose {
+        font-size: 1rem;
+        line-height: 1.75;
+    }
+    .lg\:prose-xl :where(h3):not(:where([class~="not-prose"] *)) {
+        font-size: 1.5em;
+        margin-top: 1.6em;
+        margin-bottom: 0.6666667em;
+        line-height: 1.3333333;
+    }
+}
+
+/* custom containers */
+.copy p, .copy p code { color:#fff }
+.sh-copy { max-height: 34px; }
+.copied { display: none}
+.copying .copied { display: block }
+.copying .nocopy { display: none }
+
+.cp p, .cp p code { margin:0; padding:0 }
+
+.sh-copy code { font-size: 16px }
+.sh-copy p, .sh-copy p code { color: rgb(243 244 246) }
+.sh-copy p::before { content:'$ '; color: rgb(156 163 175) }
+.sh-copy a { color: rgb(243 244 246) }
+.sh-copy a:hover { text-decoration: none }
+
+/* Custom Info Containers*/
+.custom-block.tip,.custom-block.info,.custom-block.warning,.custom-block.danger {
+    margin: 1rem 0;
+    border-left: .5rem solid;
+    padding: .1rem 1.5rem;
+    overflow-x: auto;
+}
+.custom-block.tip {
+    background-color: #f3f5f7;
+    border-color: #007bff
+}
+.custom-block.info {
+    background-color: #f3f5f7;
+    border-color: #476582
+}
+.custom-block.warning {
+    border-color: #e7c000;
+    color: #6b5900;
+    background-color: #ffe5644d
+}
+.custom-block.warning .custom-block-title {
+    color: #b29400
+}
+.custom-block.warning a {
+    color: #2c3e50
+}
+.custom-block.danger {
+    border-color: #c00;
+    color: #4d0000;
+    background-color: #ffe6e6
+}
+.custom-block.danger .custom-block-title {
+    color: #900
+}
+.custom-block.danger a {
+    color: #2c3e50
+}
+.dark .custom-block {
+    background: #111827;
+}
+.custom-block.details {
+    position: relative;
+    display: block;
+    border-radius: 2px;
+    margin: 1.6em 0;
+    padding: 1.6em;
+    background-color: #eee
+}
+.custom-block.details h4 {
+    margin-top: 0
+}
+.custom-block.details figure:last-child,.custom-block.details p:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0
+}
+.custom-block.details summary {
+    outline: none;
+    cursor: pointer
+}
+.custom-block-title {
+    margin-bottom: -.4rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+.table tr {
+    border-top: 1px solid #dfe2e5;
+}
+.table-striped thead tr, .table-striped tr:nth-child(2n), .table-bordered tr:nth-child(2n) {
+    background-color: #f6f8fa;
+}
+.dark .table-striped thead tr, .dark .table-striped tr:nth-child(2n), .dark .table-bordered tr:nth-child(2n) {
+    background-color: #111827;
+}
+
+.table-striped thead tr th, .table-striped thead tr td {
+    font-weight: 500;
+    color: #6b7280; /*text-gray-500*/
+}
+.dark .table-striped thead tr th, .dark .table-striped thead tr td {
+    color: #f3f4f6;
+}
+
+.table th,.table td {
+    border: 1px solid #dfe2e5;
+    padding: .6em 1em
+}
+.dark .table th,.dark .table td {
+    border: 1px solid #1f2937;
+}
+
+.youtube {
+    width: 768px;
+    height: 432px;
+}
+@media (max-width: 896px) {
+    .youtube {
+        width: 100%;
+        height: auto;
+    }
+}
+.prose pre::-webkit-scrollbar, .prose code::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    background: #2d3748;
+}
+.prose pre::-webkit-scrollbar-thumb, .prose code::-webkit-scrollbar-thumb {
+    background-color: rgb(100 116 139);
+}
+
+.html-format {
+    max-width: unset;
+}
+
+.svg-external {
+    color: #007bff;
+    background: url("data:image/svg+xml,%3Csvg width='1.25rem' height='1.25rem' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right;
+    padding-right: 1.35rem;
+}
+.svg-external:hover {
+    text-decoration: underline;
+}
+
+
+.header-anchor {
+    float: left;
+    margin-left: -.87em;
+    padding-right: .23em;
+    font-weight: 500;
+    user-select: none;
+    opacity: 0;
+    transition: color .25s,opacity .25s;
+    color: rgb(14 165 233);
+    text-decoration: none;
+}
+.header-anchor:before {
+    content: "#"
+}
+.header-anchor:hover:before {
+    color: rgb(14 165 233);
+    text-decoration: underline;
+}
+h1:hover .header-anchor, h1 .header-anchor:focus, h2:hover .header-anchor, h2 .header-anchor:focus, h3:hover .header-anchor, h3 .header-anchor:focus, h4:hover .header-anchor, h4 .header-anchor:focus {
+    opacity: 1;
+}
\ No newline at end of file
diff --git a/MyApp/wwwroot/img/logo.svg b/MyApp/wwwroot/img/logo.svg
new file mode 100644
index 0000000..36a5e0e
--- /dev/null
+++ b/MyApp/wwwroot/img/logo.svg
@@ -0,0 +1,3 @@
+<svg style="color:rgb(91, 33, 182)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+    <path d="M23.834 8.101a13.912 13.912 0 0 1-13.643 11.72a10.105 10.105 0 0 1-1.994-.12a6.111 6.111 0 0 1-5.082-5.761a5.934 5.934 0 0 1 11.867-.084c.025.983-.401 1.846-1.277 1.871c-.936 0-1.374-.668-1.374-1.567v-2.5a1.531 1.531 0 0 0-1.52-1.533H8.715a3.648 3.648 0 1 0 2.695 6.08l.073-.11l.074.121a2.58 2.58 0 0 0 2.2 1.048a2.909 2.909 0 0 0 2.695-3.04a7.912 7.912 0 0 0-.217-1.933a7.404 7.404 0 0 0-14.64 1.603a7.497 7.497 0 0 0 7.308 7.405s.549.05 1.167.035a15.803 15.803 0 0 0 8.475-2.528c.036-.025.072.025.048.061a12.44 12.44 0 0 1-9.69 3.963a8.744 8.744 0 0 1-8.9-8.972a9.049 9.049 0 0 1 3.635-7.247a8.863 8.863 0 0 1 5.229-1.726h2.813a7.915 7.915 0 0 0 5.839-2.578a.11.11 0 0 1 .059-.034a.112.112 0 0 1 .12.053a.113.113 0 0 1 .015.067a7.934 7.934 0 0 1-1.227 3.549a.107.107 0 0 0-.014.06a.11.11 0 0 0 .073.095a.109.109 0 0 0 .062.004a8.505 8.505 0 0 0 5.913-4.876a.155.155 0 0 1 .055-.053a.15.15 0 0 1 .147 0a.153.153 0 0 1 .054.053A10.779 10.779 0 0 1 23.834 8.1zM8.895 11.628a2.188 2.188 0 1 0 2.188 2.188v-2.042a.158.158 0 0 0-.15-.15z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/MyApp/wwwroot/img/profiles/user1.svg b/MyApp/wwwroot/img/profiles/user1.svg
new file mode 100644
index 0000000..974090a
--- /dev/null
+++ b/MyApp/wwwroot/img/profiles/user1.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 496.2 496.2" style="enable-background:new 0 0 496.2 496.2;" xml:space="preserve">
+<path style="fill:#32BEA6;" d="M496.2,248.1C496.2,111.1,385.1,0,248.1,0S0,111.1,0,248.1s111.1,248.1,248.1,248.1
+	S496.2,385.1,496.2,248.1z"/>
+<g>
+	<path style="fill:#E2A379;" d="M287,282.1h-77.8c12.1,36.6,1,53.3,1,53.3l26.9,6.1h22l26.9-6.1C286,335.4,274.9,318.7,287,282.1z"
+		/>
+	<path style="fill:#E2A379;" d="M248.2,390.1c44.9,0,37.8-54.7,37.8-54.7s-8.9,17.3-38.1,17.3s-37.5-17.3-37.5-17.3
+		S203.3,390.1,248.2,390.1z"/>
+	<path style="fill:#E2A379;" d="M247.8,333.4c-77.2,0-139.1,22.1-146.4,49.3c-3.3,12.2-7,35.2-10.1,57.5
+		c42.7,34.9,97.4,55.9,156.9,55.9s114.1-21,156.9-55.9c-3.2-22.3-6.9-45.4-10.1-57.5C387.5,355.5,324.9,333.4,247.8,333.4z"/>
+</g>
+<polygon style="fill:#141414;" points="349.1,408.1 147.1,408.1 159.8,153.1 335.2,132.6 "/>
+<rect x="205.1" y="324.9" style="fill:#DEE0E2;" width="86" height="25"/>
+<path style="fill:#F3FAFF;" d="M247.8,333.4c-77.2,0-139.1,22.1-146.4,49.3c-3.3,12.2-7,35.2-10.1,57.5
+	c42.7,34.9,97.4,55.9,156.9,55.9s114.1-21,156.9-55.9c-3.2-22.3-6.9-45.4-10.1-57.5C387.5,355.5,324.9,333.4,247.8,333.4z"/>
+<g>
+	<path style="fill:#DADDE0;" d="M293.9,336.2c-14.5-1.8-30-2.7-46.1-2.7c-15.9,0-31.2,0.9-45.5,2.7l45.8,91L293.9,336.2z"/>
+	<path style="fill:#DADDE0;" d="M168.1,357.2l37-32.3l32,63.9c0,0-25.2,7.1-25.5,6.8L168.1,357.2z"/>
+	<path style="fill:#DADDE0;" d="M328.1,357.2l-37-32.3l-32,63.9c0,0,25.2,7.1,25.5,6.8L328.1,357.2z"/>
+</g>
+<g>
+	<path style="fill:#E2A379;" d="M248.1,412.1l-37.8-76.8c0,0,9.2-12.4,37.4-12.4s38.1,12.5,38.1,12.5L248.1,412.1z"/>
+	<path style="fill:#E2A379;" d="M287,282.1h-77.8c12.1,36.6,1,53.3,1,53.3s16.4,6.1,37.9,6.1s37.9-6.1,37.9-6.1
+		S274.9,318.7,287,282.1z"/>
+</g>
+<path style="fill:#F4B382;" d="M327.9,175.2c0-92.4-35.7-113.6-79.8-113.6c-44,0-79.8,21.2-79.8,113.6c0,31.3,5.6,55.8,14,74.7
+	c18.4,41.6,50.3,56.1,65.8,56.1c15.4,0,47.3-14.5,65.8-56.1C322.3,231,327.9,206.5,327.9,175.2z"/>
+<g>
+	<path style="fill:#141414;" d="M288.7,71.1C272.5,54,237,58.7,237,58.7l0,0l0,0l0,0c-68.8,0-75.9,73.9-75.9,73.9l-1.3,20.5
+		c0,14.2,7.6,31.8,15,49.3c0,0-1.5-57.7,33.1-73.1s92.1-11.7,89.6-29.4C297.4,99,299,82.1,288.7,71.1z"/>
+	<path style="fill:#141414;" d="M269.8,60.1c10.6-4.9,35.7,7.6,48.3,26.3c6.7,9.9,14.5,25,17.1,46.2c0,0,0.3,42.3-10.2,68.5
+		c0,0-30.2-87.3-63.1-124.6C262,76,263,63.3,269.8,60.1z"/>
+</g>
+<g>
+	<path style="fill:#F4B382;" d="M160.7,207.7c4.3,25.2,9.6,26.3,17.3,25l-8.1-54.8C162.2,179.3,156.4,182.6,160.7,207.7z"/>
+	<path style="fill:#F4B382;" d="M326.5,178l-8.1,54.8c7.6,1.3,13,0.1,17.3-25C339.9,182.6,334.1,179.3,326.5,178z"/>
+</g>
+<path style="fill:#CC785E;" d="M274.8,263.8c0,0-14.2,9.6-26.7,9.6s-26.7-9.6-26.7-9.6c0-1.4,11.3-5.3,16.1-6
+	c3-0.5,10.6,2.5,10.6,2.5s7.5-2.9,10.4-2.5C263.4,258.5,274.8,263.8,274.8,263.8z"/>
+<path style="fill:#C16952;" d="M274.8,263.8c0,0-14.2,13.5-26.7,13.5s-26.7-13.5-26.7-13.5s6.5,1.5,19.6,0.7c2.2-0.1,5.1,1.6,7,1.6
+	c1.7,0,4.2-1.8,6.1-1.7C267.9,265.2,274.8,263.8,274.8,263.8z"/>
+<path style="fill:#BAE5D2;" d="M314,165.4H182.2c-4.8,0-8.6,3.9-8.6,8.6v46.1c0,4.8,3.9,8.6,8.6,8.6h46.1
+	c10.1,0,10.6-31.5,19.7-31.5s9.8,31.5,19.7,31.5h46.1c4.8,0,8.6-3.9,8.6-8.6V174C322.6,169.3,318.7,165.4,314,165.4z"/>
+<path style="fill:#D1EDDF;" d="M314,165.4H182.2c-4.8,0-8.6,3.9-8.6,8.6v46.1l149-46.1C322.6,169.3,318.7,165.4,314,165.4z"/>
+<path style="fill:#E8D3BB;" d="M314,229.2h-46.1c-5.3,0-8-8.4-10.7-16.5c-2.4-7.4-4.9-15-9.1-15c-4.2,0-6.6,7.6-9,14.9
+	c-2.6,8.2-5.3,16.6-10.8,16.6h-46.1c-5,0-9-4-9-9v-46.1c0-5,4-9,9-9h131.7c5,0,9,4,9,9v46.1C323,225.1,318.9,229.2,314,229.2z
+	 M248.1,196.9c4.7,0,7.2,7.5,9.7,15.5c2.6,7.9,5.2,16,10,16h46.1c4.6,0,8.3-3.7,8.3-8.3V174c0-4.6-3.7-8.3-8.3-8.3H182.2
+	c-4.6,0-8.3,3.7-8.3,8.3v46.1c0,4.6,3.7,8.3,8.3,8.3h46.1c4.9,0,7.5-8.2,10.1-16.1C241,204.4,243.4,196.9,248.1,196.9z"/>
+<path style="fill:none;stroke:#301E19;stroke-width:6.487;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
+	M314,165.4H182.2c-4.8,0-8.6,3.9-8.6,8.6v46.1c0,4.8,3.9,8.6,8.6,8.6h46.1c10.1,0,10.6-31.5,19.7-31.5s9.8,31.5,19.7,31.5h46.1
+	c4.8,0,8.6-3.9,8.6-8.6V174C322.6,169.3,318.7,165.4,314,165.4z"/>
+</svg>
diff --git a/MyApp/wwwroot/img/profiles/user2.svg b/MyApp/wwwroot/img/profiles/user2.svg
new file mode 100644
index 0000000..1638f32
--- /dev/null
+++ b/MyApp/wwwroot/img/profiles/user2.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 144.773 144.773" style="enable-background:new 0 0 144.773 144.773;" xml:space="preserve">
+<g>
+	<circle style="fill:#12B5BA;" cx="72.387" cy="72.386" r="72.386"/>
+	<g>
+		<defs>
+			<circle id="SVGID_1_" cx="72.387" cy="72.386" r="72.386"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g style="clip-path:url(#SVGID_2_);">
+			<path style="fill:#F1C9A5;" d="M106.971,116.94c-4.666-8.833-34.666-14.376-34.666-14.376s-30,5.543-34.666,14.376
+				c-3.449,12.258-6.334,27.833-6.334,27.833h41h41C113.305,144.773,111.357,128.073,106.971,116.94z"/>
+			<path style="fill:#E4B692;" d="M72.305,102.564c0,0,30,5.543,34.666,14.376c4.386,11.133,6.334,27.833,6.334,27.833h-41V102.564z
+				"/>
+			<rect x="64.138" y="84.606" style="fill:#F1C9A5;" width="16.334" height="27.336"/>
+			<rect x="72.305" y="84.606" style="fill:#E4B692;" width="8.167" height="27.336"/>
+			<path style="opacity:0.1;fill:#DDAC8C;" d="M64.138,97.273c1.469,4.217,7.397,6.634,11.751,6.634
+				c1.575,0,3.107-0.264,4.583-0.747V84.606H64.138V97.273z"/>
+			<path style="fill:#F1C9A5;" d="M93.305,67.357c0-17.074-9.402-26.783-21-26.783c-11.598,0-21,9.709-21,26.783
+				s9.402,30.917,21,30.917C83.903,98.274,93.305,84.432,93.305,67.357z"/>
+			<path style="fill:#E4B692;" d="M90.109,79.195c-3.807-0.424-6.377-4.783-5.732-9.732c0.637-4.953,4.242-8.63,8.051-8.209
+				c3.805,0.422,6.371,4.779,5.729,9.732C97.517,75.939,93.916,79.613,90.109,79.195z"/>
+			<path style="fill:#F1C9A5;" d="M46.603,70.986c-0.643-4.953,1.924-9.311,5.726-9.732c3.811-0.421,7.416,3.256,8.055,8.209
+				c0.643,4.949-1.93,9.309-5.734,9.732C50.843,79.613,47.242,75.939,46.603,70.986z"/>
+			<path style="fill:#E4B692;" d="M93.305,67.357c0-17.074-9.402-26.783-21-26.783v57.7C83.903,98.274,93.305,84.432,93.305,67.357z
+				"/>
+			<path style="fill:#0F303F;" d="M62.371,90.815c0,0-9.057-7.381-7.044-17.107c2.012-9.727,7.044-11.403,7.044-15.766
+				c8.385,10.064,15.767,17.105,29.183,13.417c4.025,2.349-1.006,14.427-7.045,20.799c17.108-9.393,36.898-43.942-4.361-57.361
+				C38.888,21.379,27.15,88.803,62.371,90.815z"/>
+			<path style="fill:#F3641E;" d="M72.304,51.159c10.84,0,19.845,7.834,21.678,18.148c0.224-1.26,0.347-2.554,0.347-3.877
+				c0-12.163-9.86-22.024-22.025-22.024c-12.163,0-22.023,9.861-22.023,22.024c0,1.323,0.123,2.617,0.348,3.877
+				C52.46,58.993,61.464,51.159,72.304,51.159z"/>
+			<path style="fill:#FA582A;" d="M56.287,106.577c2.938,1.574,9.807,4.855,16.017,4.855c8.168,0,18.845-4,18.845-4l-1.469-0.423
+				c-3.341-1.089-6.661-1.994-9.497-2.698c-8.118,4.865-16.036,0.076-16.044,0.071C61.756,104.979,59.05,105.715,56.287,106.577z"/>
+			<path style="fill:#1594A3;" d="M106.971,116.94c-1.578-2.987-6.056-5.596-11.287-7.743c-2.888,10.196-12.258,17.67-23.379,17.67
+				s-20.491-7.474-23.379-17.67c-5.231,2.148-9.709,4.756-11.287,7.743c-3.449,12.258-6.334,27.833-6.334,27.833h41h41
+				C113.305,144.773,111.357,128.073,106.971,116.94z"/>
+			<path style="fill:#FA582A;" d="M119.941,101.12c-4.5-1.604-11.667,1.896-16.375,1.444c-5.145-0.494-7.93,3.002-11.094,2.368
+				c-6.083-1.219-6.643,0.985-6.643,0.985s-1.471-2.985,4.613-2.011c6.084,0.975,10.734-1.933,12.124-3.808
+				c2.101-2.834,9.125-2.166,9.125-2.166l-3.666-4.251c-2.583-0.5-6.417-0.167-8.5,3.417c-2.083,3.584-4,4-9.845,3.333
+				c-5.845-0.667-9.497,3.879-9.497,3.879l11.05,3.216c0,0,2.28,0.622,4.614,0.562c2.334-0.061,4.774-2.464,9.656-2.094
+				c5.229,0.396,9.979-2.146,16.132,0.154L119.941,101.12z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/MyApp/wwwroot/img/profiles/user3.svg b/MyApp/wwwroot/img/profiles/user3.svg
new file mode 100644
index 0000000..efec71e
--- /dev/null
+++ b/MyApp/wwwroot/img/profiles/user3.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 144.773 144.773" style="enable-background:new 0 0 144.773 144.773;" xml:space="preserve">
+<g>
+	<circle style="fill:#13AEC0;" cx="72.387" cy="72.386" r="72.386"/>
+	<g>
+		<defs>
+			<circle id="SVGID_1_" cx="72.387" cy="72.386" r="72.386"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g style="clip-path:url(#SVGID_2_);">
+			<path style="fill:#F1C9A5;" d="M107.053,116.94c-4.666-8.833-34.666-14.376-34.666-14.376s-30,5.543-34.666,14.376
+				c-3.449,12.258-6.334,27.833-6.334,27.833h41h41C113.387,144.773,111.438,128.073,107.053,116.94z"/>
+			<path style="fill:#E4B692;" d="M72.387,102.564c0,0,30,5.543,34.666,14.376c4.386,11.133,6.334,27.833,6.334,27.833h-41V102.564z
+				"/>
+			<rect x="64.22" y="84.607" style="fill:#F1C9A5;" width="16.334" height="27.336"/>
+			<rect x="72.387" y="84.607" style="fill:#E4B692;" width="8.167" height="27.336"/>
+			<path style="opacity:0.1;fill:#DDAC8C;" d="M64.22,97.273c1.469,4.217,7.397,6.634,11.751,6.634c1.575,0,3.107-0.264,4.583-0.747
+				V84.606H64.22V97.273z"/>
+			<path style="fill:#F1C9A5;" d="M93.387,67.357c0-17.074-9.402-26.783-21-26.783c-11.598,0-21,9.709-21,26.783
+				c0,22.966,9.402,30.917,21,30.917C83.984,98.274,93.387,89.366,93.387,67.357z"/>
+			<path style="fill:#E4B692;" d="M90.19,79.197c-3.807-0.399-6.377-4.5-5.733-9.156c0.637-4.66,4.242-8.12,8.051-7.724
+				c3.805,0.396,6.371,4.496,5.729,9.156C97.599,76.134,93.997,79.591,90.19,79.197z"/>
+			<path style="fill:#F1C9A5;" d="M46.685,71.474c-0.643-4.66,1.924-8.76,5.727-9.156c3.811-0.397,7.416,3.063,8.055,7.724
+				c0.642,4.656-1.93,8.758-5.734,9.156C50.925,79.591,47.323,76.134,46.685,71.474z"/>
+			<path style="fill:#E4B692;" d="M93.387,67.357c0-17.074-9.402-26.783-21-26.783v57.7C83.984,98.274,93.387,89.366,93.387,67.357z
+				"/>
+			<path style="fill:#265A68;" d="M52.188,73.014c0,0,2.888-5.551,4.12-16.22c8.713,8.279,18.978,9.604,32.546,0
+				c0.334,7.779,2.609,12.631,5.276,16.22c1.641-13.441,5.266-20.066,4.049-27.13c-9.043,1.496-12.227-5.936-25.793-5.936
+				c-13.568,0-16.587,7.149-25.018,6.51C47.369,54.851,51.387,59.323,52.188,73.014z"/>
+			<path style="fill:#2D5972;" d="M107.053,116.94c-2.99-5.66-16.375-9.966-25.61-12.331c-0.359,4.691-4.272,8.389-9.056,8.389
+				c-4.783,0-8.696-3.697-9.056-8.389c-9.235,2.365-22.62,6.671-25.61,12.331c-3.449,12.258-6.334,27.833-6.334,27.833h41h41
+				C113.387,144.773,111.438,128.073,107.053,116.94z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/MyApp/wwwroot/lib/js/highlight.js b/MyApp/wwwroot/lib/js/highlight.js
new file mode 100644
index 0000000..5eb82e3
--- /dev/null
+++ b/MyApp/wwwroot/lib/js/highlight.js
@@ -0,0 +1,1143 @@
+/*!
+  Highlight.js v11.8.0 (git: 65687a907b)
+  (c) 2006-2023 undefined and other contributors
+  License: BSD-3-Clause
+ */
+var hljs=function(){"use strict";function e(t){
+return t instanceof Map?t.clear=t.delete=t.set=()=>{
+throw Error("map is read-only")}:t instanceof Set&&(t.add=t.clear=t.delete=()=>{
+throw Error("set is read-only")
+}),Object.freeze(t),Object.getOwnPropertyNames(t).forEach((n=>{
+const i=t[n],s=typeof i;"object"!==s&&"function"!==s||Object.isFrozen(i)||e(i)
+})),t}class t{constructor(e){
+void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}
+ignoreMatch(){this.isMatchIgnored=!0}}function n(e){
+return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")
+}function i(e,...t){const n=Object.create(null);for(const t in e)n[t]=e[t]
+;return t.forEach((e=>{for(const t in e)n[t]=e[t]})),n}const s=e=>!!e.scope
+;class o{constructor(e,t){
+this.buffer="",this.classPrefix=t.classPrefix,e.walk(this)}addText(e){
+this.buffer+=n(e)}openNode(e){if(!s(e))return;const t=((e,{prefix:t})=>{
+if(e.startsWith("language:"))return e.replace("language:","language-")
+;if(e.includes(".")){const n=e.split(".")
+;return[`${t}${n.shift()}`,...n.map(((e,t)=>`${e}${"_".repeat(t+1)}`))].join(" ")
+}return`${t}${e}`})(e.scope,{prefix:this.classPrefix});this.span(t)}
+closeNode(e){s(e)&&(this.buffer+="</span>")}value(){return this.buffer}span(e){
+this.buffer+=`<span class="${e}">`}}const r=(e={})=>{const t={children:[]}
+;return Object.assign(t,e),t};class a{constructor(){
+this.rootNode=r(),this.stack=[this.rootNode]}get top(){
+return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){
+this.top.children.push(e)}openNode(e){const t=r({scope:e})
+;this.add(t),this.stack.push(t)}closeNode(){
+if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){
+for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}
+walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,t){
+return"string"==typeof t?e.addText(t):t.children&&(e.openNode(t),
+t.children.forEach((t=>this._walk(e,t))),e.closeNode(t)),e}static _collapse(e){
+"string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{
+a._collapse(e)})))}}class c extends a{constructor(e){super(),this.options=e}
+addText(e){""!==e&&this.add(e)}startScope(e){this.openNode(e)}endScope(){
+this.closeNode()}__addSublanguage(e,t){const n=e.root
+;t&&(n.scope="language:"+t),this.add(n)}toHTML(){
+return new o(this,this.options).value()}finalize(){
+return this.closeAllNodes(),!0}}function l(e){
+return e?"string"==typeof e?e:e.source:null}function g(e){return h("(?=",e,")")}
+function u(e){return h("(?:",e,")*")}function d(e){return h("(?:",e,")?")}
+function h(...e){return e.map((e=>l(e))).join("")}function f(...e){const t=(e=>{
+const t=e[e.length-1]
+;return"object"==typeof t&&t.constructor===Object?(e.splice(e.length-1,1),t):{}
+})(e);return"("+(t.capture?"":"?:")+e.map((e=>l(e))).join("|")+")"}
+function p(e){return RegExp(e.toString()+"|").exec("").length-1}
+const b=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./
+;function m(e,{joinWith:t}){let n=0;return e.map((e=>{n+=1;const t=n
+;let i=l(e),s="";for(;i.length>0;){const e=b.exec(i);if(!e){s+=i;break}
+s+=i.substring(0,e.index),
+i=i.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?s+="\\"+(Number(e[1])+t):(s+=e[0],
+"("===e[0]&&n++)}return s})).map((e=>`(${e})`)).join(t)}
+const E="[a-zA-Z]\\w*",x="[a-zA-Z_]\\w*",w="\\b\\d+(\\.\\d+)?",y="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",_="\\b(0b[01]+)",O={
+begin:"\\\\[\\s\\S]",relevance:0},k={scope:"string",begin:"'",end:"'",
+illegal:"\\n",contains:[O]},N={scope:"string",begin:'"',end:'"',illegal:"\\n",
+contains:[O]},S=(e,t,n={})=>{const s=i({scope:"comment",begin:e,end:t,
+contains:[]},n);s.contains.push({scope:"doctag",
+begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",
+end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0})
+;const o=f("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/)
+;return s.contains.push({begin:h(/[ ]+/,"(",o,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),s
+},v=S("//","$"),M=S("/\\*","\\*/"),R=S("#","$");var j=Object.freeze({
+__proto__:null,MATCH_NOTHING_RE:/\b\B/,IDENT_RE:E,UNDERSCORE_IDENT_RE:x,
+NUMBER_RE:w,C_NUMBER_RE:y,BINARY_NUMBER_RE:_,
+RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",
+SHEBANG:(e={})=>{const t=/^#![ ]*\//
+;return e.binary&&(e.begin=h(t,/.*\b/,e.binary,/\b.*/)),i({scope:"meta",begin:t,
+end:/$/,relevance:0,"on:begin":(e,t)=>{0!==e.index&&t.ignoreMatch()}},e)},
+BACKSLASH_ESCAPE:O,APOS_STRING_MODE:k,QUOTE_STRING_MODE:N,PHRASAL_WORDS_MODE:{
+begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/
+},COMMENT:S,C_LINE_COMMENT_MODE:v,C_BLOCK_COMMENT_MODE:M,HASH_COMMENT_MODE:R,
+NUMBER_MODE:{scope:"number",begin:w,relevance:0},C_NUMBER_MODE:{scope:"number",
+begin:y,relevance:0},BINARY_NUMBER_MODE:{scope:"number",begin:_,relevance:0},
+REGEXP_MODE:{begin:/(?=\/[^/\n]*\/)/,contains:[{scope:"regexp",begin:/\//,
+end:/\/[gimuy]*/,illegal:/\n/,contains:[O,{begin:/\[/,end:/\]/,relevance:0,
+contains:[O]}]}]},TITLE_MODE:{scope:"title",begin:E,relevance:0},
+UNDERSCORE_TITLE_MODE:{scope:"title",begin:x,relevance:0},METHOD_GUARD:{
+begin:"\\.\\s*"+x,relevance:0},END_SAME_AS_BEGIN:e=>Object.assign(e,{
+"on:begin":(e,t)=>{t.data._beginMatch=e[1]},"on:end":(e,t)=>{
+t.data._beginMatch!==e[1]&&t.ignoreMatch()}})});function A(e,t){
+"."===e.input[e.index-1]&&t.ignoreMatch()}function I(e,t){
+void 0!==e.className&&(e.scope=e.className,delete e.className)}function T(e,t){
+t&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",
+e.__beforeBegin=A,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,
+void 0===e.relevance&&(e.relevance=0))}function L(e,t){
+Array.isArray(e.illegal)&&(e.illegal=f(...e.illegal))}function B(e,t){
+if(e.match){
+if(e.begin||e.end)throw Error("begin & end are not supported with match")
+;e.begin=e.match,delete e.match}}function P(e,t){
+void 0===e.relevance&&(e.relevance=1)}const D=(e,t)=>{if(!e.beforeMatch)return
+;if(e.starts)throw Error("beforeMatch cannot be used with starts")
+;const n=Object.assign({},e);Object.keys(e).forEach((t=>{delete e[t]
+})),e.keywords=n.keywords,e.begin=h(n.beforeMatch,g(n.begin)),e.starts={
+relevance:0,contains:[Object.assign(n,{endsParent:!0})]
+},e.relevance=0,delete n.beforeMatch
+},H=["of","and","for","in","not","or","if","then","parent","list","value"],C="keyword"
+;function $(e,t,n=C){const i=Object.create(null)
+;return"string"==typeof e?s(n,e.split(" ")):Array.isArray(e)?s(n,e):Object.keys(e).forEach((n=>{
+Object.assign(i,$(e[n],t,n))})),i;function s(e,n){
+t&&(n=n.map((e=>e.toLowerCase()))),n.forEach((t=>{const n=t.split("|")
+;i[n[0]]=[e,U(n[0],n[1])]}))}}function U(e,t){
+return t?Number(t):(e=>H.includes(e.toLowerCase()))(e)?0:1}const z={},W=e=>{
+console.error(e)},X=(e,...t)=>{console.log("WARN: "+e,...t)},G=(e,t)=>{
+z[`${e}/${t}`]||(console.log(`Deprecated as of ${e}. ${t}`),z[`${e}/${t}`]=!0)
+},K=Error();function F(e,t,{key:n}){let i=0;const s=e[n],o={},r={}
+;for(let e=1;e<=t.length;e++)r[e+i]=s[e],o[e+i]=!0,i+=p(t[e-1])
+;e[n]=r,e[n]._emit=o,e[n]._multi=!0}function Z(e){(e=>{
+e.scope&&"object"==typeof e.scope&&null!==e.scope&&(e.beginScope=e.scope,
+delete e.scope)})(e),"string"==typeof e.beginScope&&(e.beginScope={
+_wrap:e.beginScope}),"string"==typeof e.endScope&&(e.endScope={_wrap:e.endScope
+}),(e=>{if(Array.isArray(e.begin)){
+if(e.skip||e.excludeBegin||e.returnBegin)throw W("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),
+K
+;if("object"!=typeof e.beginScope||null===e.beginScope)throw W("beginScope must be object"),
+K;F(e,e.begin,{key:"beginScope"}),e.begin=m(e.begin,{joinWith:""})}})(e),(e=>{
+if(Array.isArray(e.end)){
+if(e.skip||e.excludeEnd||e.returnEnd)throw W("skip, excludeEnd, returnEnd not compatible with endScope: {}"),
+K
+;if("object"!=typeof e.endScope||null===e.endScope)throw W("endScope must be object"),
+K;F(e,e.end,{key:"endScope"}),e.end=m(e.end,{joinWith:""})}})(e)}function V(e){
+function t(t,n){
+return RegExp(l(t),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(n?"g":""))
+}class n{constructor(){
+this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}
+addRule(e,t){
+t.position=this.position++,this.matchIndexes[this.matchAt]=t,this.regexes.push([t,e]),
+this.matchAt+=p(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null)
+;const e=this.regexes.map((e=>e[1]));this.matcherRe=t(m(e,{joinWith:"|"
+}),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex
+;const t=this.matcherRe.exec(e);if(!t)return null
+;const n=t.findIndex(((e,t)=>t>0&&void 0!==e)),i=this.matchIndexes[n]
+;return t.splice(0,n),Object.assign(t,i)}}class s{constructor(){
+this.rules=[],this.multiRegexes=[],
+this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){
+if(this.multiRegexes[e])return this.multiRegexes[e];const t=new n
+;return this.rules.slice(e).forEach((([e,n])=>t.addRule(e,n))),
+t.compile(),this.multiRegexes[e]=t,t}resumingScanAtSamePosition(){
+return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,t){
+this.rules.push([e,t]),"begin"===t.type&&this.count++}exec(e){
+const t=this.getMatcher(this.regexIndex);t.lastIndex=this.lastIndex
+;let n=t.exec(e)
+;if(this.resumingScanAtSamePosition())if(n&&n.index===this.lastIndex);else{
+const t=this.getMatcher(0);t.lastIndex=this.lastIndex+1,n=t.exec(e)}
+return n&&(this.regexIndex+=n.position+1,
+this.regexIndex===this.count&&this.considerAll()),n}}
+if(e.compilerExtensions||(e.compilerExtensions=[]),
+e.contains&&e.contains.includes("self"))throw Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.")
+;return e.classNameAliases=i(e.classNameAliases||{}),function n(o,r){const a=o
+;if(o.isCompiled)return a
+;[I,B,Z,D].forEach((e=>e(o,r))),e.compilerExtensions.forEach((e=>e(o,r))),
+o.__beforeBegin=null,[T,L,P].forEach((e=>e(o,r))),o.isCompiled=!0;let c=null
+;return"object"==typeof o.keywords&&o.keywords.$pattern&&(o.keywords=Object.assign({},o.keywords),
+c=o.keywords.$pattern,
+delete o.keywords.$pattern),c=c||/\w+/,o.keywords&&(o.keywords=$(o.keywords,e.case_insensitive)),
+a.keywordPatternRe=t(c,!0),
+r&&(o.begin||(o.begin=/\B|\b/),a.beginRe=t(a.begin),o.end||o.endsWithParent||(o.end=/\B|\b/),
+o.end&&(a.endRe=t(a.end)),
+a.terminatorEnd=l(a.end)||"",o.endsWithParent&&r.terminatorEnd&&(a.terminatorEnd+=(o.end?"|":"")+r.terminatorEnd)),
+o.illegal&&(a.illegalRe=t(o.illegal)),
+o.contains||(o.contains=[]),o.contains=[].concat(...o.contains.map((e=>(e=>(e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((t=>i(e,{
+variants:null},t)))),e.cachedVariants?e.cachedVariants:q(e)?i(e,{
+starts:e.starts?i(e.starts):null
+}):Object.isFrozen(e)?i(e):e))("self"===e?o:e)))),o.contains.forEach((e=>{n(e,a)
+})),o.starts&&n(o.starts,r),a.matcher=(e=>{const t=new s
+;return e.contains.forEach((e=>t.addRule(e.begin,{rule:e,type:"begin"
+}))),e.terminatorEnd&&t.addRule(e.terminatorEnd,{type:"end"
+}),e.illegal&&t.addRule(e.illegal,{type:"illegal"}),t})(a),a}(e)}function q(e){
+return!!e&&(e.endsWithParent||q(e.starts))}class J extends Error{
+constructor(e,t){super(e),this.name="HTMLInjectionError",this.html=t}}
+const Y=n,Q=i,ee=Symbol("nomatch"),te=n=>{
+const i=Object.create(null),s=Object.create(null),o=[];let r=!0
+;const a="Could not find the language '{}', did you forget to load/include a language module?",l={
+disableAutodetect:!0,name:"Plain text",contains:[]};let p={
+ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,
+languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",
+cssSelector:"pre code",languages:null,__emitter:c};function b(e){
+return p.noHighlightRe.test(e)}function m(e,t,n){let i="",s=""
+;"object"==typeof t?(i=e,
+n=t.ignoreIllegals,s=t.language):(G("10.7.0","highlight(lang, code, ...args) has been deprecated."),
+G("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),
+s=e,i=t),void 0===n&&(n=!0);const o={code:i,language:s};S("before:highlight",o)
+;const r=o.result?o.result:E(o.language,o.code,n)
+;return r.code=o.code,S("after:highlight",r),r}function E(e,n,s,o){
+const c=Object.create(null);function l(){if(!S.keywords)return void M.addText(R)
+;let e=0;S.keywordPatternRe.lastIndex=0;let t=S.keywordPatternRe.exec(R),n=""
+;for(;t;){n+=R.substring(e,t.index)
+;const s=_.case_insensitive?t[0].toLowerCase():t[0],o=(i=s,S.keywords[i]);if(o){
+const[e,i]=o
+;if(M.addText(n),n="",c[s]=(c[s]||0)+1,c[s]<=7&&(j+=i),e.startsWith("_"))n+=t[0];else{
+const n=_.classNameAliases[e]||e;u(t[0],n)}}else n+=t[0]
+;e=S.keywordPatternRe.lastIndex,t=S.keywordPatternRe.exec(R)}var i
+;n+=R.substring(e),M.addText(n)}function g(){null!=S.subLanguage?(()=>{
+if(""===R)return;let e=null;if("string"==typeof S.subLanguage){
+if(!i[S.subLanguage])return void M.addText(R)
+;e=E(S.subLanguage,R,!0,v[S.subLanguage]),v[S.subLanguage]=e._top
+}else e=x(R,S.subLanguage.length?S.subLanguage:null)
+;S.relevance>0&&(j+=e.relevance),M.__addSublanguage(e._emitter,e.language)
+})():l(),R=""}function u(e,t){
+""!==e&&(M.startScope(t),M.addText(e),M.endScope())}function d(e,t){let n=1
+;const i=t.length-1;for(;n<=i;){if(!e._emit[n]){n++;continue}
+const i=_.classNameAliases[e[n]]||e[n],s=t[n];i?u(s,i):(R=s,l(),R=""),n++}}
+function h(e,t){
+return e.scope&&"string"==typeof e.scope&&M.openNode(_.classNameAliases[e.scope]||e.scope),
+e.beginScope&&(e.beginScope._wrap?(u(R,_.classNameAliases[e.beginScope._wrap]||e.beginScope._wrap),
+R=""):e.beginScope._multi&&(d(e.beginScope,t),R="")),S=Object.create(e,{parent:{
+value:S}}),S}function f(e,n,i){let s=((e,t)=>{const n=e&&e.exec(t)
+;return n&&0===n.index})(e.endRe,i);if(s){if(e["on:end"]){const i=new t(e)
+;e["on:end"](n,i),i.isMatchIgnored&&(s=!1)}if(s){
+for(;e.endsParent&&e.parent;)e=e.parent;return e}}
+if(e.endsWithParent)return f(e.parent,n,i)}function b(e){
+return 0===S.matcher.regexIndex?(R+=e[0],1):(T=!0,0)}function m(e){
+const t=e[0],i=n.substring(e.index),s=f(S,e,i);if(!s)return ee;const o=S
+;S.endScope&&S.endScope._wrap?(g(),
+u(t,S.endScope._wrap)):S.endScope&&S.endScope._multi?(g(),
+d(S.endScope,e)):o.skip?R+=t:(o.returnEnd||o.excludeEnd||(R+=t),
+g(),o.excludeEnd&&(R=t));do{
+S.scope&&M.closeNode(),S.skip||S.subLanguage||(j+=S.relevance),S=S.parent
+}while(S!==s.parent);return s.starts&&h(s.starts,e),o.returnEnd?0:t.length}
+let w={};function y(i,o){const a=o&&o[0];if(R+=i,null==a)return g(),0
+;if("begin"===w.type&&"end"===o.type&&w.index===o.index&&""===a){
+if(R+=n.slice(o.index,o.index+1),!r){const t=Error(`0 width match regex (${e})`)
+;throw t.languageName=e,t.badRule=w.rule,t}return 1}
+if(w=o,"begin"===o.type)return(e=>{
+const n=e[0],i=e.rule,s=new t(i),o=[i.__beforeBegin,i["on:begin"]]
+;for(const t of o)if(t&&(t(e,s),s.isMatchIgnored))return b(n)
+;return i.skip?R+=n:(i.excludeBegin&&(R+=n),
+g(),i.returnBegin||i.excludeBegin||(R=n)),h(i,e),i.returnBegin?0:n.length})(o)
+;if("illegal"===o.type&&!s){
+const e=Error('Illegal lexeme "'+a+'" for mode "'+(S.scope||"<unnamed>")+'"')
+;throw e.mode=S,e}if("end"===o.type){const e=m(o);if(e!==ee)return e}
+if("illegal"===o.type&&""===a)return 1
+;if(I>1e5&&I>3*o.index)throw Error("potential infinite loop, way more iterations than matches")
+;return R+=a,a.length}const _=O(e)
+;if(!_)throw W(a.replace("{}",e)),Error('Unknown language: "'+e+'"')
+;const k=V(_);let N="",S=o||k;const v={},M=new p.__emitter(p);(()=>{const e=[]
+;for(let t=S;t!==_;t=t.parent)t.scope&&e.unshift(t.scope)
+;e.forEach((e=>M.openNode(e)))})();let R="",j=0,A=0,I=0,T=!1;try{
+if(_.__emitTokens)_.__emitTokens(n,M);else{for(S.matcher.considerAll();;){
+I++,T?T=!1:S.matcher.considerAll(),S.matcher.lastIndex=A
+;const e=S.matcher.exec(n);if(!e)break;const t=y(n.substring(A,e.index),e)
+;A=e.index+t}y(n.substring(A))}return M.finalize(),N=M.toHTML(),{language:e,
+value:N,relevance:j,illegal:!1,_emitter:M,_top:S}}catch(t){
+if(t.message&&t.message.includes("Illegal"))return{language:e,value:Y(n),
+illegal:!0,relevance:0,_illegalBy:{message:t.message,index:A,
+context:n.slice(A-100,A+100),mode:t.mode,resultSoFar:N},_emitter:M};if(r)return{
+language:e,value:Y(n),illegal:!1,relevance:0,errorRaised:t,_emitter:M,_top:S}
+;throw t}}function x(e,t){t=t||p.languages||Object.keys(i);const n=(e=>{
+const t={value:Y(e),illegal:!1,relevance:0,_top:l,_emitter:new p.__emitter(p)}
+;return t._emitter.addText(e),t})(e),s=t.filter(O).filter(N).map((t=>E(t,e,!1)))
+;s.unshift(n);const o=s.sort(((e,t)=>{
+if(e.relevance!==t.relevance)return t.relevance-e.relevance
+;if(e.language&&t.language){if(O(e.language).supersetOf===t.language)return 1
+;if(O(t.language).supersetOf===e.language)return-1}return 0})),[r,a]=o,c=r
+;return c.secondBest=a,c}function w(e){let t=null;const n=(e=>{
+let t=e.className+" ";t+=e.parentNode?e.parentNode.className:""
+;const n=p.languageDetectRe.exec(t);if(n){const t=O(n[1])
+;return t||(X(a.replace("{}",n[1])),
+X("Falling back to no-highlight mode for this block.",e)),t?n[1]:"no-highlight"}
+return t.split(/\s+/).find((e=>b(e)||O(e)))})(e);if(b(n))return
+;if(S("before:highlightElement",{el:e,language:n
+}),e.children.length>0&&(p.ignoreUnescapedHTML||(console.warn("One of your code blocks includes unescaped HTML. This is a potentially serious security risk."),
+console.warn("https://github.com/highlightjs/highlight.js/wiki/security"),
+console.warn("The element with unescaped HTML:"),
+console.warn(e)),p.throwUnescapedHTML))throw new J("One of your code blocks includes unescaped HTML.",e.innerHTML)
+;t=e;const i=t.textContent,o=n?m(i,{language:n,ignoreIllegals:!0}):x(i)
+;e.innerHTML=o.value,((e,t,n)=>{const i=t&&s[t]||n
+;e.classList.add("hljs"),e.classList.add("language-"+i)
+})(e,n,o.language),e.result={language:o.language,re:o.relevance,
+relevance:o.relevance},o.secondBest&&(e.secondBest={
+language:o.secondBest.language,relevance:o.secondBest.relevance
+}),S("after:highlightElement",{el:e,result:o,text:i})}let y=!1;function _(){
+"loading"!==document.readyState?document.querySelectorAll(p.cssSelector).forEach(w):y=!0
+}function O(e){return e=(e||"").toLowerCase(),i[e]||i[s[e]]}
+function k(e,{languageName:t}){"string"==typeof e&&(e=[e]),e.forEach((e=>{
+s[e.toLowerCase()]=t}))}function N(e){const t=O(e)
+;return t&&!t.disableAutodetect}function S(e,t){const n=e;o.forEach((e=>{
+e[n]&&e[n](t)}))}
+"undefined"!=typeof window&&window.addEventListener&&window.addEventListener("DOMContentLoaded",(()=>{
+y&&_()}),!1),Object.assign(n,{highlight:m,highlightAuto:x,highlightAll:_,
+highlightElement:w,
+highlightBlock:e=>(G("10.7.0","highlightBlock will be removed entirely in v12.0"),
+G("10.7.0","Please use highlightElement now."),w(e)),configure:e=>{p=Q(p,e)},
+initHighlighting:()=>{
+_(),G("10.6.0","initHighlighting() deprecated.  Use highlightAll() now.")},
+initHighlightingOnLoad:()=>{
+_(),G("10.6.0","initHighlightingOnLoad() deprecated.  Use highlightAll() now.")
+},registerLanguage:(e,t)=>{let s=null;try{s=t(n)}catch(t){
+if(W("Language definition for '{}' could not be registered.".replace("{}",e)),
+!r)throw t;W(t),s=l}
+s.name||(s.name=e),i[e]=s,s.rawDefinition=t.bind(null,n),s.aliases&&k(s.aliases,{
+languageName:e})},unregisterLanguage:e=>{delete i[e]
+;for(const t of Object.keys(s))s[t]===e&&delete s[t]},
+listLanguages:()=>Object.keys(i),getLanguage:O,registerAliases:k,
+autoDetection:N,inherit:Q,addPlugin:e=>{(e=>{
+e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=t=>{
+e["before:highlightBlock"](Object.assign({block:t.el},t))
+}),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=t=>{
+e["after:highlightBlock"](Object.assign({block:t.el},t))})})(e),o.push(e)},
+removePlugin:e=>{const t=o.indexOf(e);-1!==t&&o.splice(t,1)}}),n.debugMode=()=>{
+r=!1},n.safeMode=()=>{r=!0},n.versionString="11.8.0",n.regex={concat:h,
+lookahead:g,either:f,optional:d,anyNumberOfTimes:u}
+;for(const t in j)"object"==typeof j[t]&&e(j[t]);return Object.assign(n,j),n
+},ne=te({});return ne.newInstance=()=>te({}),ne}()
+;"object"==typeof exports&&"undefined"!=typeof module&&(module.exports=hljs);/*! `bash` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{const s=e.regex,t={},n={begin:/\$\{/,
+end:/\}/,contains:["self",{begin:/:-/,contains:[t]}]};Object.assign(t,{
+className:"variable",variants:[{
+begin:s.concat(/\$[\w\d#@][\w\d_]*/,"(?![\\w\\d])(?![$])")},n]});const a={
+className:"subst",begin:/\$\(/,end:/\)/,contains:[e.BACKSLASH_ESCAPE]},i={
+begin:/<<-?\s*(?=\w+)/,starts:{contains:[e.END_SAME_AS_BEGIN({begin:/(\w+)/,
+end:/(\w+)/,className:"string"})]}},c={className:"string",begin:/"/,end:/"/,
+contains:[e.BACKSLASH_ESCAPE,t,a]};a.contains.push(c);const o={begin:/\$?\(\(/,
+end:/\)\)/,contains:[{begin:/\d+#[0-9a-f]+/,className:"number"},e.NUMBER_MODE,t]
+},r=e.SHEBANG({binary:"(fish|bash|zsh|sh|csh|ksh|tcsh|dash|scsh)",relevance:10
+}),l={className:"function",begin:/\w[\w\d_]*\s*\(\s*\)\s*\{/,returnBegin:!0,
+contains:[e.inherit(e.TITLE_MODE,{begin:/\w[\w\d_]*/})],relevance:0};return{
+name:"Bash",aliases:["sh"],keywords:{$pattern:/\b[a-z][a-z0-9._-]+\b/,
+keyword:["if","then","else","elif","fi","for","while","until","in","do","done","case","esac","function","select"],
+literal:["true","false"],
+built_in:["break","cd","continue","eval","exec","exit","export","getopts","hash","pwd","readonly","return","shift","test","times","trap","umask","unset","alias","bind","builtin","caller","command","declare","echo","enable","help","let","local","logout","mapfile","printf","read","readarray","source","type","typeset","ulimit","unalias","set","shopt","autoload","bg","bindkey","bye","cap","chdir","clone","comparguments","compcall","compctl","compdescribe","compfiles","compgroups","compquote","comptags","comptry","compvalues","dirs","disable","disown","echotc","echoti","emulate","fc","fg","float","functions","getcap","getln","history","integer","jobs","kill","limit","log","noglob","popd","print","pushd","pushln","rehash","sched","setcap","setopt","stat","suspend","ttyctl","unfunction","unhash","unlimit","unsetopt","vared","wait","whence","where","which","zcompile","zformat","zftp","zle","zmodload","zparseopts","zprof","zpty","zregexparse","zsocket","zstyle","ztcp","chcon","chgrp","chown","chmod","cp","dd","df","dir","dircolors","ln","ls","mkdir","mkfifo","mknod","mktemp","mv","realpath","rm","rmdir","shred","sync","touch","truncate","vdir","b2sum","base32","base64","cat","cksum","comm","csplit","cut","expand","fmt","fold","head","join","md5sum","nl","numfmt","od","paste","ptx","pr","sha1sum","sha224sum","sha256sum","sha384sum","sha512sum","shuf","sort","split","sum","tac","tail","tr","tsort","unexpand","uniq","wc","arch","basename","chroot","date","dirname","du","echo","env","expr","factor","groups","hostid","id","link","logname","nice","nohup","nproc","pathchk","pinky","printenv","printf","pwd","readlink","runcon","seq","sleep","stat","stdbuf","stty","tee","test","timeout","tty","uname","unlink","uptime","users","who","whoami","yes"]
+},contains:[r,e.SHEBANG(),l,o,e.HASH_COMMENT_MODE,i,{match:/(\/[a-z._-]+)+/},c,{
+className:"",begin:/\\"/},{className:"string",begin:/'/,end:/'/},t]}}})()
+;hljs.registerLanguage("bash",e)})();/*! `csharp` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{const n={
+keyword:["abstract","as","base","break","case","catch","class","const","continue","do","else","event","explicit","extern","finally","fixed","for","foreach","goto","if","implicit","in","interface","internal","is","lock","namespace","new","operator","out","override","params","private","protected","public","readonly","record","ref","return","scoped","sealed","sizeof","stackalloc","static","struct","switch","this","throw","try","typeof","unchecked","unsafe","using","virtual","void","volatile","while"].concat(["add","alias","and","ascending","async","await","by","descending","equals","from","get","global","group","init","into","join","let","nameof","not","notnull","on","or","orderby","partial","remove","select","set","unmanaged","value|0","var","when","where","with","yield"]),
+built_in:["bool","byte","char","decimal","delegate","double","dynamic","enum","float","int","long","nint","nuint","object","sbyte","short","string","ulong","uint","ushort"],
+literal:["default","false","null","true"]},a=e.inherit(e.TITLE_MODE,{
+begin:"[a-zA-Z](\\.?\\w)*"}),i={className:"number",variants:[{
+begin:"\\b(0b[01']+)"},{
+begin:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)(u|U|l|L|ul|UL|f|F|b|B)"},{
+begin:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"
+}],relevance:0},s={className:"string",begin:'@"',end:'"',contains:[{begin:'""'}]
+},t=e.inherit(s,{illegal:/\n/}),r={className:"subst",begin:/\{/,end:/\}/,
+keywords:n},l=e.inherit(r,{illegal:/\n/}),c={className:"string",begin:/\$"/,
+end:'"',illegal:/\n/,contains:[{begin:/\{\{/},{begin:/\}\}/
+},e.BACKSLASH_ESCAPE,l]},o={className:"string",begin:/\$@"/,end:'"',contains:[{
+begin:/\{\{/},{begin:/\}\}/},{begin:'""'},r]},d=e.inherit(o,{illegal:/\n/,
+contains:[{begin:/\{\{/},{begin:/\}\}/},{begin:'""'},l]})
+;r.contains=[o,c,s,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,i,e.C_BLOCK_COMMENT_MODE],
+l.contains=[d,c,t,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,i,e.inherit(e.C_BLOCK_COMMENT_MODE,{
+illegal:/\n/})];const g={variants:[o,c,s,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]
+},E={begin:"<",end:">",contains:[{beginKeywords:"in out"},a]
+},_=e.IDENT_RE+"(<"+e.IDENT_RE+"(\\s*,\\s*"+e.IDENT_RE+")*>)?(\\[\\])?",b={
+begin:"@"+e.IDENT_RE,relevance:0};return{name:"C#",aliases:["cs","c#"],
+keywords:n,illegal:/::/,contains:[e.COMMENT("///","$",{returnBegin:!0,
+contains:[{className:"doctag",variants:[{begin:"///",relevance:0},{
+begin:"\x3c!--|--\x3e"},{begin:"</?",end:">"}]}]
+}),e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{className:"meta",begin:"#",
+end:"$",keywords:{
+keyword:"if else elif endif define undef warning error line region endregion pragma checksum"
+}},g,i,{beginKeywords:"class interface",relevance:0,end:/[{;=]/,
+illegal:/[^\s:,]/,contains:[{beginKeywords:"where class"
+},a,E,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{beginKeywords:"namespace",
+relevance:0,end:/[{;=]/,illegal:/[^\s:]/,
+contains:[a,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{
+beginKeywords:"record",relevance:0,end:/[{;=]/,illegal:/[^\s:]/,
+contains:[a,E,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{className:"meta",
+begin:"^\\s*\\[(?=[\\w])",excludeBegin:!0,end:"\\]",excludeEnd:!0,contains:[{
+className:"string",begin:/"/,end:/"/}]},{
+beginKeywords:"new return throw await else",relevance:0},{className:"function",
+begin:"("+_+"\\s+)+"+e.IDENT_RE+"\\s*(<[^=]+>\\s*)?\\(",returnBegin:!0,
+end:/\s*[{;=]/,excludeEnd:!0,keywords:n,contains:[{
+beginKeywords:"public private protected static internal protected abstract async extern override unsafe virtual new sealed partial",
+relevance:0},{begin:e.IDENT_RE+"\\s*(<[^=]+>\\s*)?\\(",returnBegin:!0,
+contains:[e.TITLE_MODE,E],relevance:0},{match:/\(\)/},{className:"params",
+begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:n,relevance:0,
+contains:[g,i,e.C_BLOCK_COMMENT_MODE]
+},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},b]}}})()
+;hljs.registerLanguage("csharp",e)})();/*! `css` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict"
+;const e=["a","abbr","address","article","aside","audio","b","blockquote","body","button","canvas","caption","cite","code","dd","del","details","dfn","div","dl","dt","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","html","i","iframe","img","input","ins","kbd","label","legend","li","main","mark","menu","nav","object","ol","p","q","quote","samp","section","span","strong","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","ul","var","video"],i=["any-hover","any-pointer","aspect-ratio","color","color-gamut","color-index","device-aspect-ratio","device-height","device-width","display-mode","forced-colors","grid","height","hover","inverted-colors","monochrome","orientation","overflow-block","overflow-inline","pointer","prefers-color-scheme","prefers-contrast","prefers-reduced-motion","prefers-reduced-transparency","resolution","scan","scripting","update","width","min-width","max-width","min-height","max-height"],r=["active","any-link","blank","checked","current","default","defined","dir","disabled","drop","empty","enabled","first","first-child","first-of-type","fullscreen","future","focus","focus-visible","focus-within","has","host","host-context","hover","indeterminate","in-range","invalid","is","lang","last-child","last-of-type","left","link","local-link","not","nth-child","nth-col","nth-last-child","nth-last-col","nth-last-of-type","nth-of-type","only-child","only-of-type","optional","out-of-range","past","placeholder-shown","read-only","read-write","required","right","root","scope","target","target-within","user-invalid","valid","visited","where"],t=["after","backdrop","before","cue","cue-region","first-letter","first-line","grammar-error","marker","part","placeholder","selection","slotted","spelling-error"],o=["align-content","align-items","align-self","all","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-repeat","background-size","block-size","border","border-block","border-block-color","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-block-style","border-block-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-inline","border-inline-color","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-inline-style","border-inline-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-decoration-break","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","clip-rule","color","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","content","content-visibility","counter-increment","counter-reset","cue","cue-after","cue-before","cursor","direction","display","empty-cells","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","flow","font","font-display","font-family","font-feature-settings","font-kerning","font-language-override","font-size","font-size-adjust","font-smoothing","font-stretch","font-style","font-synthesis","font-variant","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-variation-settings","font-weight","gap","glyph-orientation-vertical","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","hanging-punctuation","height","hyphens","icon","image-orientation","image-rendering","image-resolution","ime-mode","inline-size","isolation","justify-content","left","letter-spacing","line-break","line-height","list-style","list-style-image","list-style-position","list-style-type","margin","margin-block","margin-block-end","margin-block-start","margin-bottom","margin-inline","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","marks","mask","mask-border","mask-border-mode","mask-border-outset","mask-border-repeat","mask-border-slice","mask-border-source","mask-border-width","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","mix-blend-mode","nav-down","nav-index","nav-left","nav-right","nav-up","none","normal","object-fit","object-position","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-wrap","overflow-x","overflow-y","padding","padding-block","padding-block-end","padding-block-start","padding-bottom","padding-inline","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","page-break-after","page-break-before","page-break-inside","pause","pause-after","pause-before","perspective","perspective-origin","pointer-events","position","quotes","resize","rest","rest-after","rest-before","right","row-gap","scroll-margin","scroll-margin-block","scroll-margin-block-end","scroll-margin-block-start","scroll-margin-bottom","scroll-margin-inline","scroll-margin-inline-end","scroll-margin-inline-start","scroll-margin-left","scroll-margin-right","scroll-margin-top","scroll-padding","scroll-padding-block","scroll-padding-block-end","scroll-padding-block-start","scroll-padding-bottom","scroll-padding-inline","scroll-padding-inline-end","scroll-padding-inline-start","scroll-padding-left","scroll-padding-right","scroll-padding-top","scroll-snap-align","scroll-snap-stop","scroll-snap-type","scrollbar-color","scrollbar-gutter","scrollbar-width","shape-image-threshold","shape-margin","shape-outside","speak","speak-as","src","tab-size","table-layout","text-align","text-align-all","text-align-last","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-style","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-transform","text-underline-position","top","transform","transform-box","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","vertical-align","visibility","voice-balance","voice-duration","voice-family","voice-pitch","voice-range","voice-rate","voice-stress","voice-volume","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","z-index"].reverse()
+;return n=>{const a=n.regex,l=(e=>({IMPORTANT:{scope:"meta",begin:"!important"},
+BLOCK_COMMENT:e.C_BLOCK_COMMENT_MODE,HEXCOLOR:{scope:"number",
+begin:/#(([0-9a-fA-F]{3,4})|(([0-9a-fA-F]{2}){3,4}))\b/},FUNCTION_DISPATCH:{
+className:"built_in",begin:/[\w-]+(?=\()/},ATTRIBUTE_SELECTOR_MODE:{
+scope:"selector-attr",begin:/\[/,end:/\]/,illegal:"$",
+contains:[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]},CSS_NUMBER_MODE:{
+scope:"number",
+begin:e.NUMBER_RE+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",
+relevance:0},CSS_VARIABLE:{className:"attr",begin:/--[A-Za-z][A-Za-z0-9_-]*/}
+}))(n),s=[n.APOS_STRING_MODE,n.QUOTE_STRING_MODE];return{name:"CSS",
+case_insensitive:!0,illegal:/[=|'\$]/,keywords:{keyframePosition:"from to"},
+classNameAliases:{keyframePosition:"selector-tag"},contains:[l.BLOCK_COMMENT,{
+begin:/-(webkit|moz|ms|o)-(?=[a-z])/},l.CSS_NUMBER_MODE,{
+className:"selector-id",begin:/#[A-Za-z0-9_-]+/,relevance:0},{
+className:"selector-class",begin:"\\.[a-zA-Z-][a-zA-Z0-9_-]*",relevance:0
+},l.ATTRIBUTE_SELECTOR_MODE,{className:"selector-pseudo",variants:[{
+begin:":("+r.join("|")+")"},{begin:":(:)?("+t.join("|")+")"}]},l.CSS_VARIABLE,{
+className:"attribute",begin:"\\b("+o.join("|")+")\\b"},{begin:/:/,end:/[;}{]/,
+contains:[l.BLOCK_COMMENT,l.HEXCOLOR,l.IMPORTANT,l.CSS_NUMBER_MODE,...s,{
+begin:/(url|data-uri)\(/,end:/\)/,relevance:0,keywords:{built_in:"url data-uri"
+},contains:[...s,{className:"string",begin:/[^)]/,endsWithParent:!0,
+excludeEnd:!0}]},l.FUNCTION_DISPATCH]},{begin:a.lookahead(/@/),end:"[{;]",
+relevance:0,illegal:/:/,contains:[{className:"keyword",begin:/@-?\w[\w]*(-\w+)*/
+},{begin:/\s/,endsWithParent:!0,excludeEnd:!0,relevance:0,keywords:{
+$pattern:/[a-z-]+/,keyword:"and or not only",attribute:i.join(" ")},contains:[{
+begin:/[a-z-]+(?=:)/,className:"attribute"},...s,l.CSS_NUMBER_MODE]}]},{
+className:"selector-tag",begin:"\\b("+e.join("|")+")\\b"}]}}})()
+;hljs.registerLanguage("css",e)})();/*! `dart` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{const n={className:"subst",variants:[{
+begin:"\\$[A-Za-z0-9_]+"}]},a={className:"subst",variants:[{begin:/\$\{/,
+end:/\}/}],keywords:"true false null this is new super"},t={className:"string",
+variants:[{begin:"r'''",end:"'''"},{begin:'r"""',end:'"""'},{begin:"r'",end:"'",
+illegal:"\\n"},{begin:'r"',end:'"',illegal:"\\n"},{begin:"'''",end:"'''",
+contains:[e.BACKSLASH_ESCAPE,n,a]},{begin:'"""',end:'"""',
+contains:[e.BACKSLASH_ESCAPE,n,a]},{begin:"'",end:"'",illegal:"\\n",
+contains:[e.BACKSLASH_ESCAPE,n,a]},{begin:'"',end:'"',illegal:"\\n",
+contains:[e.BACKSLASH_ESCAPE,n,a]}]};a.contains=[e.C_NUMBER_MODE,t]
+;const i=["Comparable","DateTime","Duration","Function","Iterable","Iterator","List","Map","Match","Object","Pattern","RegExp","Set","Stopwatch","String","StringBuffer","StringSink","Symbol","Type","Uri","bool","double","int","num","Element","ElementList"],r=i.map((e=>e+"?"))
+;return{name:"Dart",keywords:{
+keyword:["abstract","as","assert","async","await","base","break","case","catch","class","const","continue","covariant","default","deferred","do","dynamic","else","enum","export","extends","extension","external","factory","false","final","finally","for","Function","get","hide","if","implements","import","in","interface","is","late","library","mixin","new","null","on","operator","part","required","rethrow","return","sealed","set","show","static","super","switch","sync","this","throw","true","try","typedef","var","void","when","while","with","yield"],
+built_in:i.concat(r).concat(["Never","Null","dynamic","print","document","querySelector","querySelectorAll","window"]),
+$pattern:/[A-Za-z][A-Za-z0-9_]*\??/},
+contains:[t,e.COMMENT(/\/\*\*(?!\/)/,/\*\//,{subLanguage:"markdown",relevance:0
+}),e.COMMENT(/\/{3,} ?/,/$/,{contains:[{subLanguage:"markdown",begin:".",
+end:"$",relevance:0}]}),e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{
+className:"class",beginKeywords:"class interface",end:/\{/,excludeEnd:!0,
+contains:[{beginKeywords:"extends implements"},e.UNDERSCORE_TITLE_MODE]
+},e.C_NUMBER_MODE,{className:"meta",begin:"@[A-Za-z]+"},{begin:"=>"}]}}})()
+;hljs.registerLanguage("dart",e)})();/*! `dockerfile` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>({name:"Dockerfile",aliases:["docker"],
+case_insensitive:!0,
+keywords:["from","maintainer","expose","env","arg","user","onbuild","stopsignal"],
+contains:[e.HASH_COMMENT_MODE,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,e.NUMBER_MODE,{
+beginKeywords:"run cmd entrypoint volume add copy workdir label healthcheck shell",
+starts:{end:/[^\\]$/,subLanguage:"bash"}}],illegal:"</"})})()
+;hljs.registerLanguage("dockerfile",e)})();/*! `fsharp` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";function e(e){
+return RegExp(e.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),"m")}function n(e){
+return e?"string"==typeof e?e:e.source:null}function t(e){return i("(?=",e,")")}
+function i(...e){return e.map((e=>n(e))).join("")}function a(...e){const t=(e=>{
+const n=e[e.length-1]
+;return"object"==typeof n&&n.constructor===Object?(e.splice(e.length-1,1),n):{}
+})(e);return"("+(t.capture?"":"?:")+e.map((e=>n(e))).join("|")+")"}return n=>{
+const r={scope:"keyword",match:/\b(yield|return|let|do|match|use)!/
+},o=["bool","byte","sbyte","int8","int16","int32","uint8","uint16","uint32","int","uint","int64","uint64","nativeint","unativeint","decimal","float","double","float32","single","char","string","unit","bigint","option","voption","list","array","seq","byref","exn","inref","nativeptr","obj","outref","voidptr","Result"],s={
+keyword:["abstract","and","as","assert","base","begin","class","default","delegate","do","done","downcast","downto","elif","else","end","exception","extern","finally","fixed","for","fun","function","global","if","in","inherit","inline","interface","internal","lazy","let","match","member","module","mutable","namespace","new","of","open","or","override","private","public","rec","return","static","struct","then","to","try","type","upcast","use","val","void","when","while","with","yield"],
+literal:["true","false","null","Some","None","Ok","Error","infinity","infinityf","nan","nanf"],
+built_in:["not","ref","raise","reraise","dict","readOnlyDict","set","get","enum","sizeof","typeof","typedefof","nameof","nullArg","invalidArg","invalidOp","id","fst","snd","ignore","lock","using","box","unbox","tryUnbox","printf","printfn","sprintf","eprintf","eprintfn","fprintf","fprintfn","failwith","failwithf"],
+"variable.constant":["__LINE__","__SOURCE_DIRECTORY__","__SOURCE_FILE__"]},c={
+variants:[n.COMMENT(/\(\*(?!\))/,/\*\)/,{contains:["self"]
+}),n.C_LINE_COMMENT_MODE]},l={scope:"variable",begin:/``/,end:/``/
+},u=/\B('|\^)/,p={scope:"symbol",variants:[{match:i(u,/``.*?``/)},{
+match:i(u,n.UNDERSCORE_IDENT_RE)}],relevance:0},f=({includeEqual:n})=>{let r
+;r=n?"!%&*+-/<=>@^|~?":"!%&*+-/<>@^|~?"
+;const o=i("[",...Array.from(r).map(e),"]"),s=a(o,/\./),c=i(s,t(s)),l=a(i(c,s,"*"),i(o,"+"))
+;return{scope:"operator",match:a(l,/:\?>/,/:\?/,/:>/,/:=/,/::?/,/\$/),
+relevance:0}},d=f({includeEqual:!0}),b=f({includeEqual:!1}),g=(e,r)=>({
+begin:i(e,t(i(/\s*/,a(/\w/,/'/,/\^/,/#/,/``/,/\(/,/{\|/)))),beginScope:r,
+end:t(a(/\n/,/=/)),relevance:0,keywords:n.inherit(s,{type:o}),
+contains:[c,p,n.inherit(l,{scope:null}),b]
+}),m=g(/:/,"operator"),h=g(/\bof\b/,"keyword"),y={
+begin:[/(^|\s+)/,/type/,/\s+/,/[a-zA-Z_](\w|')*/],beginScope:{2:"keyword",
+4:"title.class"},end:t(/\(|=|$/),keywords:s,contains:[c,n.inherit(l,{scope:null
+}),p,{scope:"operator",match:/<|>/},m]},E={scope:"computation-expression",
+match:/\b[_a-z]\w*(?=\s*\{)/},_={
+begin:[/^\s*/,i(/#/,a("if","else","endif","line","nowarn","light","r","i","I","load","time","help","quit")),/\b/],
+beginScope:{2:"meta"},end:t(/\s|$/)},v={
+variants:[n.BINARY_NUMBER_MODE,n.C_NUMBER_MODE]},w={scope:"string",begin:/"/,
+end:/"/,contains:[n.BACKSLASH_ESCAPE]},A={scope:"string",begin:/@"/,end:/"/,
+contains:[{match:/""/},n.BACKSLASH_ESCAPE]},S={scope:"string",begin:/"""/,
+end:/"""/,relevance:2},C={scope:"subst",begin:/\{/,end:/\}/,keywords:s},O={
+scope:"string",begin:/\$"/,end:/"/,contains:[{match:/\{\{/},{match:/\}\}/
+},n.BACKSLASH_ESCAPE,C]},R={scope:"string",begin:/(\$@|@\$)"/,end:/"/,
+contains:[{match:/\{\{/},{match:/\}\}/},{match:/""/},n.BACKSLASH_ESCAPE,C]},k={
+scope:"string",begin:/\$"""/,end:/"""/,contains:[{match:/\{\{/},{match:/\}\}/
+},C],relevance:2},x={scope:"string",
+match:i(/'/,a(/[^\\']/,/\\(?:.|\d{3}|x[a-fA-F\d]{2}|u[a-fA-F\d]{4}|U[a-fA-F\d]{8})/),/'/)
+};return C.contains=[R,O,A,w,x,r,c,l,m,E,_,v,p,d],{name:"F#",
+aliases:["fs","f#"],keywords:s,illegal:/\/\*/,classNameAliases:{
+"computation-expression":"keyword"},contains:[r,{variants:[k,R,O,S,A,w,x]
+},c,l,y,{scope:"meta",begin:/\[</,end:/>\]/,relevance:2,contains:[l,S,A,w,x,v]
+},h,m,E,_,v,p,d]}}})();hljs.registerLanguage("fsharp",e)})();/*! `go` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{const n={
+keyword:["break","case","chan","const","continue","default","defer","else","fallthrough","for","func","go","goto","if","import","interface","map","package","range","return","select","struct","switch","type","var"],
+type:["bool","byte","complex64","complex128","error","float32","float64","int8","int16","int32","int64","string","uint8","uint16","uint32","uint64","int","uint","uintptr","rune"],
+literal:["true","false","iota","nil"],
+built_in:["append","cap","close","complex","copy","imag","len","make","new","panic","print","println","real","recover","delete"]
+};return{name:"Go",aliases:["golang"],keywords:n,illegal:"</",
+contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{className:"string",
+variants:[e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,{begin:"`",end:"`"}]},{
+className:"number",variants:[{begin:e.C_NUMBER_RE+"[i]",relevance:1
+},e.C_NUMBER_MODE]},{begin:/:=/},{className:"function",beginKeywords:"func",
+end:"\\s*(\\{|$)",excludeEnd:!0,contains:[e.TITLE_MODE,{className:"params",
+begin:/\(/,end:/\)/,endsParent:!0,keywords:n,illegal:/["']/}]}]}}})()
+;hljs.registerLanguage("go",e)})();/*! `ini` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{const n=e.regex,a={className:"number",
+relevance:0,variants:[{begin:/([+-]+)?[\d]+_[\d_]+/},{begin:e.NUMBER_RE}]
+},s=e.COMMENT();s.variants=[{begin:/;/,end:/$/},{begin:/#/,end:/$/}];const i={
+className:"variable",variants:[{begin:/\$[\w\d"][\w\d_]*/},{begin:/\$\{(.*?)\}/
+}]},t={className:"literal",begin:/\bon|off|true|false|yes|no\b/},r={
+className:"string",contains:[e.BACKSLASH_ESCAPE],variants:[{begin:"'''",
+end:"'''",relevance:10},{begin:'"""',end:'"""',relevance:10},{begin:'"',end:'"'
+},{begin:"'",end:"'"}]},l={begin:/\[/,end:/\]/,contains:[s,t,i,r,a,"self"],
+relevance:0},c=n.either(/[A-Za-z0-9_-]+/,/"(\\"|[^"])*"/,/'[^']*'/);return{
+name:"TOML, also INI",aliases:["toml"],case_insensitive:!0,illegal:/\S/,
+contains:[s,{className:"section",begin:/\[+/,end:/\]+/},{
+begin:n.concat(c,"(\\s*\\.\\s*",c,")*",n.lookahead(/\s*=\s*[^#\s]/)),
+className:"attr",starts:{end:/$/,contains:[s,l,t,i,r,a]}}]}}})()
+;hljs.registerLanguage("ini",e)})();/*! `java` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict"
+;var e="[0-9](_*[0-9])*",a=`\\.(${e})`,n="[0-9a-fA-F](_*[0-9a-fA-F])*",s={
+className:"number",variants:[{
+begin:`(\\b(${e})((${a})|\\.)?|(${a}))[eE][+-]?(${e})[fFdD]?\\b`},{
+begin:`\\b(${e})((${a})[fFdD]?\\b|\\.([fFdD]\\b)?)`},{begin:`(${a})[fFdD]?\\b`
+},{begin:`\\b(${e})[fFdD]\\b`},{
+begin:`\\b0[xX]((${n})\\.?|(${n})?\\.(${n}))[pP][+-]?(${e})[fFdD]?\\b`},{
+begin:"\\b(0|[1-9](_*[0-9])*)[lL]?\\b"},{begin:`\\b0[xX](${n})[lL]?\\b`},{
+begin:"\\b0(_*[0-7])*[lL]?\\b"},{begin:"\\b0[bB][01](_*[01])*[lL]?\\b"}],
+relevance:0};function t(e,a,n){return-1===n?"":e.replace(a,(s=>t(e,a,n-1)))}
+return e=>{
+const a=e.regex,n="[\xc0-\u02b8a-zA-Z_$][\xc0-\u02b8a-zA-Z_$0-9]*",i=n+t("(?:<"+n+"~~~(?:\\s*,\\s*"+n+"~~~)*>)?",/~~~/g,2),r={
+keyword:["synchronized","abstract","private","var","static","if","const ","for","while","strictfp","finally","protected","import","native","final","void","enum","else","break","transient","catch","instanceof","volatile","case","assert","package","default","public","try","switch","continue","throws","protected","public","private","module","requires","exports","do","sealed","yield","permits"],
+literal:["false","true","null"],
+type:["char","boolean","long","float","int","byte","short","double"],
+built_in:["super","this"]},l={className:"meta",begin:"@"+n,contains:[{
+begin:/\(/,end:/\)/,contains:["self"]}]},c={className:"params",begin:/\(/,
+end:/\)/,keywords:r,relevance:0,contains:[e.C_BLOCK_COMMENT_MODE],endsParent:!0}
+;return{name:"Java",aliases:["jsp"],keywords:r,illegal:/<\/|#/,
+contains:[e.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{begin:/\w+@/,
+relevance:0},{className:"doctag",begin:"@[A-Za-z]+"}]}),{
+begin:/import java\.[a-z]+\./,keywords:"import",relevance:2
+},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{begin:/"""/,end:/"""/,
+className:"string",contains:[e.BACKSLASH_ESCAPE]
+},e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,{
+match:[/\b(?:class|interface|enum|extends|implements|new)/,/\s+/,n],className:{
+1:"keyword",3:"title.class"}},{match:/non-sealed/,scope:"keyword"},{
+begin:[a.concat(/(?!else)/,n),/\s+/,n,/\s+/,/=(?!=)/],className:{1:"type",
+3:"variable",5:"operator"}},{begin:[/record/,/\s+/,n],className:{1:"keyword",
+3:"title.class"},contains:[c,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{
+beginKeywords:"new throw return else",relevance:0},{
+begin:["(?:"+i+"\\s+)",e.UNDERSCORE_IDENT_RE,/\s*(?=\()/],className:{
+2:"title.function"},keywords:r,contains:[{className:"params",begin:/\(/,
+end:/\)/,keywords:r,relevance:0,
+contains:[l,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,s,e.C_BLOCK_COMMENT_MODE]
+},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},s,l]}}})()
+;hljs.registerLanguage("java",e)})();/*! `javascript` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict"
+;const e="[A-Za-z$_][0-9A-Za-z$_]*",n=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends"],a=["true","false","null","undefined","NaN","Infinity"],t=["Object","Function","Boolean","Symbol","Math","Date","Number","BigInt","String","RegExp","Array","Float32Array","Float64Array","Int8Array","Uint8Array","Uint8ClampedArray","Int16Array","Int32Array","Uint16Array","Uint32Array","BigInt64Array","BigUint64Array","Set","Map","WeakSet","WeakMap","ArrayBuffer","SharedArrayBuffer","Atomics","DataView","JSON","Promise","Generator","GeneratorFunction","AsyncFunction","Reflect","Proxy","Intl","WebAssembly"],s=["Error","EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"],r=["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],c=["arguments","this","super","console","window","document","localStorage","sessionStorage","module","global"],i=[].concat(r,t,s)
+;return o=>{const l=o.regex,b=e,d={begin:/<[A-Za-z0-9\\._:-]+/,
+end:/\/[A-Za-z0-9\\._:-]+>|\/>/,isTrulyOpeningTag:(e,n)=>{
+const a=e[0].length+e.index,t=e.input[a]
+;if("<"===t||","===t)return void n.ignoreMatch();let s
+;">"===t&&(((e,{after:n})=>{const a="</"+e[0].slice(1)
+;return-1!==e.input.indexOf(a,n)})(e,{after:a})||n.ignoreMatch())
+;const r=e.input.substring(a)
+;((s=r.match(/^\s*=/))||(s=r.match(/^\s+extends\s+/))&&0===s.index)&&n.ignoreMatch()
+}},g={$pattern:e,keyword:n,literal:a,built_in:i,"variable.language":c
+},u="[0-9](_?[0-9])*",m=`\\.(${u})`,E="0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*",A={
+className:"number",variants:[{
+begin:`(\\b(${E})((${m})|\\.)?|(${m}))[eE][+-]?(${u})\\b`},{
+begin:`\\b(${E})\\b((${m})\\b|\\.)?|(${m})\\b`},{
+begin:"\\b(0|[1-9](_?[0-9])*)n\\b"},{
+begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b"},{
+begin:"\\b0[bB][0-1](_?[0-1])*n?\\b"},{begin:"\\b0[oO][0-7](_?[0-7])*n?\\b"},{
+begin:"\\b0[0-7]+n?\\b"}],relevance:0},y={className:"subst",begin:"\\$\\{",
+end:"\\}",keywords:g,contains:[]},h={begin:"html`",end:"",starts:{end:"`",
+returnEnd:!1,contains:[o.BACKSLASH_ESCAPE,y],subLanguage:"xml"}},N={
+begin:"css`",end:"",starts:{end:"`",returnEnd:!1,
+contains:[o.BACKSLASH_ESCAPE,y],subLanguage:"css"}},_={begin:"gql`",end:"",
+starts:{end:"`",returnEnd:!1,contains:[o.BACKSLASH_ESCAPE,y],
+subLanguage:"graphql"}},f={className:"string",begin:"`",end:"`",
+contains:[o.BACKSLASH_ESCAPE,y]},v={className:"comment",
+variants:[o.COMMENT(/\/\*\*(?!\/)/,"\\*/",{relevance:0,contains:[{
+begin:"(?=@[A-Za-z]+)",relevance:0,contains:[{className:"doctag",
+begin:"@[A-Za-z]+"},{className:"type",begin:"\\{",end:"\\}",excludeEnd:!0,
+excludeBegin:!0,relevance:0},{className:"variable",begin:b+"(?=\\s*(-)|$)",
+endsParent:!0,relevance:0},{begin:/(?=[^\n])\s/,relevance:0}]}]
+}),o.C_BLOCK_COMMENT_MODE,o.C_LINE_COMMENT_MODE]
+},p=[o.APOS_STRING_MODE,o.QUOTE_STRING_MODE,h,N,_,f,{match:/\$\d+/},A]
+;y.contains=p.concat({begin:/\{/,end:/\}/,keywords:g,contains:["self"].concat(p)
+});const S=[].concat(v,y.contains),w=S.concat([{begin:/\(/,end:/\)/,keywords:g,
+contains:["self"].concat(S)}]),R={className:"params",begin:/\(/,end:/\)/,
+excludeBegin:!0,excludeEnd:!0,keywords:g,contains:w},O={variants:[{
+match:[/class/,/\s+/,b,/\s+/,/extends/,/\s+/,l.concat(b,"(",l.concat(/\./,b),")*")],
+scope:{1:"keyword",3:"title.class",5:"keyword",7:"title.class.inherited"}},{
+match:[/class/,/\s+/,b],scope:{1:"keyword",3:"title.class"}}]},k={relevance:0,
+match:l.either(/\bJSON/,/\b[A-Z][a-z]+([A-Z][a-z]*|\d)*/,/\b[A-Z]{2,}([A-Z][a-z]+|\d)+([A-Z][a-z]*)*/,/\b[A-Z]{2,}[a-z]+([A-Z][a-z]+|\d)*([A-Z][a-z]*)*/),
+className:"title.class",keywords:{_:[...t,...s]}},I={variants:[{
+match:[/function/,/\s+/,b,/(?=\s*\()/]},{match:[/function/,/\s*(?=\()/]}],
+className:{1:"keyword",3:"title.function"},label:"func.def",contains:[R],
+illegal:/%/},x={
+match:l.concat(/\b/,(T=[...r,"super","import"],l.concat("(?!",T.join("|"),")")),b,l.lookahead(/\(/)),
+className:"title.function",relevance:0};var T;const C={
+begin:l.concat(/\./,l.lookahead(l.concat(b,/(?![0-9A-Za-z$_(])/))),end:b,
+excludeBegin:!0,keywords:"prototype",className:"property",relevance:0},M={
+match:[/get|set/,/\s+/,b,/(?=\()/],className:{1:"keyword",3:"title.function"},
+contains:[{begin:/\(\)/},R]
+},B="(\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)|"+o.UNDERSCORE_IDENT_RE+")\\s*=>",$={
+match:[/const|var|let/,/\s+/,b,/\s*/,/=\s*/,/(async\s*)?/,l.lookahead(B)],
+keywords:"async",className:{1:"keyword",3:"title.function"},contains:[R]}
+;return{name:"JavaScript",aliases:["js","jsx","mjs","cjs"],keywords:g,exports:{
+PARAMS_CONTAINS:w,CLASS_REFERENCE:k},illegal:/#(?![$_A-z])/,
+contains:[o.SHEBANG({label:"shebang",binary:"node",relevance:5}),{
+label:"use_strict",className:"meta",relevance:10,
+begin:/^\s*['"]use (strict|asm)['"]/
+},o.APOS_STRING_MODE,o.QUOTE_STRING_MODE,h,N,_,f,v,{match:/\$\d+/},A,k,{
+className:"attr",begin:b+l.lookahead(":"),relevance:0},$,{
+begin:"("+o.RE_STARTERS_RE+"|\\b(case|return|throw)\\b)\\s*",
+keywords:"return throw case",relevance:0,contains:[v,o.REGEXP_MODE,{
+className:"function",begin:B,returnBegin:!0,end:"\\s*=>",contains:[{
+className:"params",variants:[{begin:o.UNDERSCORE_IDENT_RE,relevance:0},{
+className:null,begin:/\(\s*\)/,skip:!0},{begin:/\(/,end:/\)/,excludeBegin:!0,
+excludeEnd:!0,keywords:g,contains:w}]}]},{begin:/,/,relevance:0},{match:/\s+/,
+relevance:0},{variants:[{begin:"<>",end:"</>"},{
+match:/<[A-Za-z0-9\\._:-]+\s*\/>/},{begin:d.begin,
+"on:begin":d.isTrulyOpeningTag,end:d.end}],subLanguage:"xml",contains:[{
+begin:d.begin,end:d.end,skip:!0,contains:["self"]}]}]},I,{
+beginKeywords:"while if switch catch for"},{
+begin:"\\b(?!function)"+o.UNDERSCORE_IDENT_RE+"\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)\\s*\\{",
+returnBegin:!0,label:"func.def",contains:[R,o.inherit(o.TITLE_MODE,{begin:b,
+className:"title.function"})]},{match:/\.\.\./,relevance:0},C,{match:"\\$"+b,
+relevance:0},{match:[/\bconstructor(?=\s*\()/],className:{1:"title.function"},
+contains:[R]},x,{relevance:0,match:/\b[A-Z][A-Z_0-9]+\b/,
+className:"variable.constant"},O,M,{match:/\$[(.]/}]}}})()
+;hljs.registerLanguage("javascript",e)})();/*! `json` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{const a=["true","false","null"],n={
+scope:"literal",beginKeywords:a.join(" ")};return{name:"JSON",keywords:{
+literal:a},contains:[{className:"attr",begin:/"(\\.|[^\\"\r\n])*"(?=\s*:)/,
+relevance:1.01},{match:/[{}[\],:]/,className:"punctuation",relevance:0
+},e.QUOTE_STRING_MODE,n,e.C_NUMBER_MODE,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE],
+illegal:"\\S"}}})();hljs.registerLanguage("json",e)})();/*! `kotlin` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict"
+;var e="[0-9](_*[0-9])*",n=`\\.(${e})`,a="[0-9a-fA-F](_*[0-9a-fA-F])*",i={
+className:"number",variants:[{
+begin:`(\\b(${e})((${n})|\\.)?|(${n}))[eE][+-]?(${e})[fFdD]?\\b`},{
+begin:`\\b(${e})((${n})[fFdD]?\\b|\\.([fFdD]\\b)?)`},{begin:`(${n})[fFdD]?\\b`
+},{begin:`\\b(${e})[fFdD]\\b`},{
+begin:`\\b0[xX]((${a})\\.?|(${a})?\\.(${a}))[pP][+-]?(${e})[fFdD]?\\b`},{
+begin:"\\b(0|[1-9](_*[0-9])*)[lL]?\\b"},{begin:`\\b0[xX](${a})[lL]?\\b`},{
+begin:"\\b0(_*[0-7])*[lL]?\\b"},{begin:"\\b0[bB][01](_*[01])*[lL]?\\b"}],
+relevance:0};return e=>{const n={
+keyword:"abstract as val var vararg get set class object open private protected public noinline crossinline dynamic final enum if else do while for when throw try catch finally import package is in fun override companion reified inline lateinit init interface annotation data sealed internal infix operator out by constructor super tailrec where const inner suspend typealias external expect actual",
+built_in:"Byte Short Char Int Long Boolean Float Double Void Unit Nothing",
+literal:"true false null"},a={className:"symbol",begin:e.UNDERSCORE_IDENT_RE+"@"
+},s={className:"subst",begin:/\$\{/,end:/\}/,contains:[e.C_NUMBER_MODE]},t={
+className:"variable",begin:"\\$"+e.UNDERSCORE_IDENT_RE},r={className:"string",
+variants:[{begin:'"""',end:'"""(?=[^"])',contains:[t,s]},{begin:"'",end:"'",
+illegal:/\n/,contains:[e.BACKSLASH_ESCAPE]},{begin:'"',end:'"',illegal:/\n/,
+contains:[e.BACKSLASH_ESCAPE,t,s]}]};s.contains.push(r);const l={
+className:"meta",
+begin:"@(?:file|property|field|get|set|receiver|param|setparam|delegate)\\s*:(?:\\s*"+e.UNDERSCORE_IDENT_RE+")?"
+},c={className:"meta",begin:"@"+e.UNDERSCORE_IDENT_RE,contains:[{begin:/\(/,
+end:/\)/,contains:[e.inherit(r,{className:"string"}),"self"]}]
+},o=i,b=e.COMMENT("/\\*","\\*/",{contains:[e.C_BLOCK_COMMENT_MODE]}),E={
+variants:[{className:"type",begin:e.UNDERSCORE_IDENT_RE},{begin:/\(/,end:/\)/,
+contains:[]}]},d=E;return d.variants[1].contains=[E],E.variants[1].contains=[d],
+{name:"Kotlin",aliases:["kt","kts"],keywords:n,
+contains:[e.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{className:"doctag",
+begin:"@[A-Za-z]+"}]}),e.C_LINE_COMMENT_MODE,b,{className:"keyword",
+begin:/\b(break|continue|return|this)\b/,starts:{contains:[{className:"symbol",
+begin:/@\w+/}]}},a,l,c,{className:"function",beginKeywords:"fun",end:"[(]|$",
+returnBegin:!0,excludeEnd:!0,keywords:n,relevance:5,contains:[{
+begin:e.UNDERSCORE_IDENT_RE+"\\s*\\(",returnBegin:!0,relevance:0,
+contains:[e.UNDERSCORE_TITLE_MODE]},{className:"type",begin:/</,end:/>/,
+keywords:"reified",relevance:0},{className:"params",begin:/\(/,end:/\)/,
+endsParent:!0,keywords:n,relevance:0,contains:[{begin:/:/,end:/[=,\/]/,
+endsWithParent:!0,contains:[E,e.C_LINE_COMMENT_MODE,b],relevance:0
+},e.C_LINE_COMMENT_MODE,b,l,c,r,e.C_NUMBER_MODE]},b]},{
+begin:[/class|interface|trait/,/\s+/,e.UNDERSCORE_IDENT_RE],beginScope:{
+3:"title.class"},keywords:"class interface trait",end:/[:\{(]|$/,excludeEnd:!0,
+illegal:"extends implements",contains:[{
+beginKeywords:"public protected internal private constructor"
+},e.UNDERSCORE_TITLE_MODE,{className:"type",begin:/</,end:/>/,excludeBegin:!0,
+excludeEnd:!0,relevance:0},{className:"type",begin:/[,:]\s*/,end:/[<\(,){\s]|$/,
+excludeBegin:!0,returnEnd:!0},l,c]},r,{className:"meta",begin:"^#!/usr/bin/env",
+end:"$",illegal:"\n"},o]}}})();hljs.registerLanguage("kotlin",e)})();/*! `lisp` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{
+const n="[a-zA-Z_\\-+\\*\\/<=>&#][a-zA-Z0-9_\\-+*\\/<=>&#!]*",a="\\|[^]*?\\|",i="(-|\\+)?\\d+(\\.\\d+|\\/\\d+)?((d|e|f|l|s|D|E|F|L|S)(\\+|-)?\\d+)?",s={
+className:"literal",begin:"\\b(t{1}|nil)\\b"},l={className:"number",variants:[{
+begin:i,relevance:0},{begin:"#(b|B)[0-1]+(/[0-1]+)?"},{
+begin:"#(o|O)[0-7]+(/[0-7]+)?"},{begin:"#(x|X)[0-9a-fA-F]+(/[0-9a-fA-F]+)?"},{
+begin:"#(c|C)\\("+i+" +"+i,end:"\\)"}]},b=e.inherit(e.QUOTE_STRING_MODE,{
+illegal:null}),g=e.COMMENT(";","$",{relevance:0}),r={begin:"\\*",end:"\\*"},t={
+className:"symbol",begin:"[:&]"+n},c={begin:n,relevance:0},d={begin:a},o={
+contains:[l,b,r,t,{begin:"\\(",end:"\\)",contains:["self",s,b,l,c]},c],
+variants:[{begin:"['`]\\(",end:"\\)"},{begin:"\\(quote ",end:"\\)",keywords:{
+name:"quote"}},{begin:"'"+a}]},v={variants:[{begin:"'"+n},{
+begin:"#'"+n+"(::"+n+")*"}]},m={begin:"\\(\\s*",end:"\\)"},u={endsWithParent:!0,
+relevance:0};return m.contains=[{className:"name",variants:[{begin:n,relevance:0
+},{begin:a}]},u],u.contains=[o,v,m,s,l,b,g,r,t,d,c],{name:"Lisp",illegal:/\S/,
+contains:[l,e.SHEBANG(),s,b,g,o,v,m,c]}}})();hljs.registerLanguage("lisp",e)
+})();/*! `markdown` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{const n={begin:/<\/?[A-Za-z_]/,
+end:">",subLanguage:"xml",relevance:0},a={variants:[{begin:/\[.+?\]\[.*?\]/,
+relevance:0},{
+begin:/\[.+?\]\(((data|javascript|mailto):|(?:http|ftp)s?:\/\/).*?\)/,
+relevance:2},{
+begin:e.regex.concat(/\[.+?\]\(/,/[A-Za-z][A-Za-z0-9+.-]*/,/:\/\/.*?\)/),
+relevance:2},{begin:/\[.+?\]\([./?&#].*?\)/,relevance:1},{
+begin:/\[.*?\]\(.*?\)/,relevance:0}],returnBegin:!0,contains:[{match:/\[(?=\])/
+},{className:"string",relevance:0,begin:"\\[",end:"\\]",excludeBegin:!0,
+returnEnd:!0},{className:"link",relevance:0,begin:"\\]\\(",end:"\\)",
+excludeBegin:!0,excludeEnd:!0},{className:"symbol",relevance:0,begin:"\\]\\[",
+end:"\\]",excludeBegin:!0,excludeEnd:!0}]},i={className:"strong",contains:[],
+variants:[{begin:/_{2}(?!\s)/,end:/_{2}/},{begin:/\*{2}(?!\s)/,end:/\*{2}/}]
+},s={className:"emphasis",contains:[],variants:[{begin:/\*(?![*\s])/,end:/\*/},{
+begin:/_(?![_\s])/,end:/_/,relevance:0}]},c=e.inherit(i,{contains:[]
+}),t=e.inherit(s,{contains:[]});i.contains.push(t),s.contains.push(c)
+;let g=[n,a];return[i,s,c,t].forEach((e=>{e.contains=e.contains.concat(g)
+})),g=g.concat(i,s),{name:"Markdown",aliases:["md","mkdown","mkd"],contains:[{
+className:"section",variants:[{begin:"^#{1,6}",end:"$",contains:g},{
+begin:"(?=^.+?\\n[=-]{2,}$)",contains:[{begin:"^[=-]*$"},{begin:"^",end:"\\n",
+contains:g}]}]},n,{className:"bullet",begin:"^[ \t]*([*+-]|(\\d+\\.))(?=\\s+)",
+end:"\\s+",excludeEnd:!0},i,s,{className:"quote",begin:"^>\\s+",contains:g,
+end:"$"},{className:"code",variants:[{begin:"(`{3,})[^`](.|\\n)*?\\1`*[ ]*"},{
+begin:"(~{3,})[^~](.|\\n)*?\\1~*[ ]*"},{begin:"```",end:"```+[ ]*$"},{
+begin:"~~~",end:"~~~+[ ]*$"},{begin:"`.+?`"},{begin:"(?=^( {4}|\\t))",
+contains:[{begin:"^( {4}|\\t)",end:"(\\n)$"}],relevance:0}]},{
+begin:"^[-\\*]{3,}",end:"$"},a,{begin:/^\[[^\n]+\]:/,returnBegin:!0,contains:[{
+className:"symbol",begin:/\[/,end:/\]/,excludeBegin:!0,excludeEnd:!0},{
+className:"link",begin:/:\s*/,end:/$/,excludeBegin:!0}]}]}}})()
+;hljs.registerLanguage("markdown",e)})();/*! `php` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{
+const t=e.regex,a=/(?![A-Za-z0-9])(?![$])/,r=t.concat(/[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/,a),n=t.concat(/(\\?[A-Z][a-z0-9_\x7f-\xff]+|\\?[A-Z]+(?=[A-Z][a-z0-9_\x7f-\xff])){1,}/,a),o={
+scope:"variable",match:"\\$+"+r},c={scope:"subst",variants:[{begin:/\$\w+/},{
+begin:/\{\$/,end:/\}/}]},i=e.inherit(e.APOS_STRING_MODE,{illegal:null
+}),s="[ \t\n]",l={scope:"string",variants:[e.inherit(e.QUOTE_STRING_MODE,{
+illegal:null,contains:e.QUOTE_STRING_MODE.contains.concat(c)}),i,{
+begin:/<<<[ \t]*(?:(\w+)|"(\w+)")\n/,end:/[ \t]*(\w+)\b/,
+contains:e.QUOTE_STRING_MODE.contains.concat(c),"on:begin":(e,t)=>{
+t.data._beginMatch=e[1]||e[2]},"on:end":(e,t)=>{
+t.data._beginMatch!==e[1]&&t.ignoreMatch()}},e.END_SAME_AS_BEGIN({
+begin:/<<<[ \t]*'(\w+)'\n/,end:/[ \t]*(\w+)\b/})]},d={scope:"number",variants:[{
+begin:"\\b0[bB][01]+(?:_[01]+)*\\b"},{begin:"\\b0[oO][0-7]+(?:_[0-7]+)*\\b"},{
+begin:"\\b0[xX][\\da-fA-F]+(?:_[\\da-fA-F]+)*\\b"},{
+begin:"(?:\\b\\d+(?:_\\d+)*(\\.(?:\\d+(?:_\\d+)*))?|\\B\\.\\d+)(?:[eE][+-]?\\d+)?"
+}],relevance:0
+},_=["false","null","true"],p=["__CLASS__","__DIR__","__FILE__","__FUNCTION__","__COMPILER_HALT_OFFSET__","__LINE__","__METHOD__","__NAMESPACE__","__TRAIT__","die","echo","exit","include","include_once","print","require","require_once","array","abstract","and","as","binary","bool","boolean","break","callable","case","catch","class","clone","const","continue","declare","default","do","double","else","elseif","empty","enddeclare","endfor","endforeach","endif","endswitch","endwhile","enum","eval","extends","final","finally","float","for","foreach","from","global","goto","if","implements","instanceof","insteadof","int","integer","interface","isset","iterable","list","match|0","mixed","new","never","object","or","private","protected","public","readonly","real","return","string","switch","throw","trait","try","unset","use","var","void","while","xor","yield"],b=["Error|0","AppendIterator","ArgumentCountError","ArithmeticError","ArrayIterator","ArrayObject","AssertionError","BadFunctionCallException","BadMethodCallException","CachingIterator","CallbackFilterIterator","CompileError","Countable","DirectoryIterator","DivisionByZeroError","DomainException","EmptyIterator","ErrorException","Exception","FilesystemIterator","FilterIterator","GlobIterator","InfiniteIterator","InvalidArgumentException","IteratorIterator","LengthException","LimitIterator","LogicException","MultipleIterator","NoRewindIterator","OutOfBoundsException","OutOfRangeException","OuterIterator","OverflowException","ParentIterator","ParseError","RangeException","RecursiveArrayIterator","RecursiveCachingIterator","RecursiveCallbackFilterIterator","RecursiveDirectoryIterator","RecursiveFilterIterator","RecursiveIterator","RecursiveIteratorIterator","RecursiveRegexIterator","RecursiveTreeIterator","RegexIterator","RuntimeException","SeekableIterator","SplDoublyLinkedList","SplFileInfo","SplFileObject","SplFixedArray","SplHeap","SplMaxHeap","SplMinHeap","SplObjectStorage","SplObserver","SplPriorityQueue","SplQueue","SplStack","SplSubject","SplTempFileObject","TypeError","UnderflowException","UnexpectedValueException","UnhandledMatchError","ArrayAccess","BackedEnum","Closure","Fiber","Generator","Iterator","IteratorAggregate","Serializable","Stringable","Throwable","Traversable","UnitEnum","WeakReference","WeakMap","Directory","__PHP_Incomplete_Class","parent","php_user_filter","self","static","stdClass"],E={
+keyword:p,literal:(e=>{const t=[];return e.forEach((e=>{
+t.push(e),e.toLowerCase()===e?t.push(e.toUpperCase()):t.push(e.toLowerCase())
+})),t})(_),built_in:b},u=e=>e.map((e=>e.replace(/\|\d+$/,""))),g={variants:[{
+match:[/new/,t.concat(s,"+"),t.concat("(?!",u(b).join("\\b|"),"\\b)"),n],scope:{
+1:"keyword",4:"title.class"}}]},h=t.concat(r,"\\b(?!\\()"),m={variants:[{
+match:[t.concat(/::/,t.lookahead(/(?!class\b)/)),h],scope:{2:"variable.constant"
+}},{match:[/::/,/class/],scope:{2:"variable.language"}},{
+match:[n,t.concat(/::/,t.lookahead(/(?!class\b)/)),h],scope:{1:"title.class",
+3:"variable.constant"}},{match:[n,t.concat("::",t.lookahead(/(?!class\b)/))],
+scope:{1:"title.class"}},{match:[n,/::/,/class/],scope:{1:"title.class",
+3:"variable.language"}}]},I={scope:"attr",
+match:t.concat(r,t.lookahead(":"),t.lookahead(/(?!::)/))},f={relevance:0,
+begin:/\(/,end:/\)/,keywords:E,contains:[I,o,m,e.C_BLOCK_COMMENT_MODE,l,d,g]
+},O={relevance:0,
+match:[/\b/,t.concat("(?!fn\\b|function\\b|",u(p).join("\\b|"),"|",u(b).join("\\b|"),"\\b)"),r,t.concat(s,"*"),t.lookahead(/(?=\()/)],
+scope:{3:"title.function.invoke"},contains:[f]};f.contains.push(O)
+;const v=[I,m,e.C_BLOCK_COMMENT_MODE,l,d,g];return{case_insensitive:!1,
+keywords:E,contains:[{begin:t.concat(/#\[\s*/,n),beginScope:"meta",end:/]/,
+endScope:"meta",keywords:{literal:_,keyword:["new","array"]},contains:[{
+begin:/\[/,end:/]/,keywords:{literal:_,keyword:["new","array"]},
+contains:["self",...v]},...v,{scope:"meta",match:n}]
+},e.HASH_COMMENT_MODE,e.COMMENT("//","$"),e.COMMENT("/\\*","\\*/",{contains:[{
+scope:"doctag",match:"@[A-Za-z]+"}]}),{match:/__halt_compiler\(\);/,
+keywords:"__halt_compiler",starts:{scope:"comment",end:e.MATCH_NOTHING_RE,
+contains:[{match:/\?>/,scope:"meta",endsParent:!0}]}},{scope:"meta",variants:[{
+begin:/<\?php/,relevance:10},{begin:/<\?=/},{begin:/<\?/,relevance:.1},{
+begin:/\?>/}]},{scope:"variable.language",match:/\$this\b/},o,O,m,{
+match:[/const/,/\s/,r],scope:{1:"keyword",3:"variable.constant"}},g,{
+scope:"function",relevance:0,beginKeywords:"fn function",end:/[;{]/,
+excludeEnd:!0,illegal:"[$%\\[]",contains:[{beginKeywords:"use"
+},e.UNDERSCORE_TITLE_MODE,{begin:"=>",endsParent:!0},{scope:"params",
+begin:"\\(",end:"\\)",excludeBegin:!0,excludeEnd:!0,keywords:E,
+contains:["self",o,m,e.C_BLOCK_COMMENT_MODE,l,d]}]},{scope:"class",variants:[{
+beginKeywords:"enum",illegal:/[($"]/},{beginKeywords:"class interface trait",
+illegal:/[:($"]/}],relevance:0,end:/\{/,excludeEnd:!0,contains:[{
+beginKeywords:"extends implements"},e.UNDERSCORE_TITLE_MODE]},{
+beginKeywords:"namespace",relevance:0,end:";",illegal:/[.']/,
+contains:[e.inherit(e.UNDERSCORE_TITLE_MODE,{scope:"title.class"})]},{
+beginKeywords:"use",relevance:0,end:";",contains:[{
+match:/\b(as|const|function)\b/,scope:"keyword"},e.UNDERSCORE_TITLE_MODE]},l,d]}
+}})();hljs.registerLanguage("php",e)})();/*! `python` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{
+const n=e.regex,a=/[\p{XID_Start}_]\p{XID_Continue}*/u,i=["and","as","assert","async","await","break","case","class","continue","def","del","elif","else","except","finally","for","from","global","if","import","in","is","lambda","match","nonlocal|10","not","or","pass","raise","return","try","while","with","yield"],s={
+$pattern:/[A-Za-z]\w+|__\w+__/,keyword:i,
+built_in:["__import__","abs","all","any","ascii","bin","bool","breakpoint","bytearray","bytes","callable","chr","classmethod","compile","complex","delattr","dict","dir","divmod","enumerate","eval","exec","filter","float","format","frozenset","getattr","globals","hasattr","hash","help","hex","id","input","int","isinstance","issubclass","iter","len","list","locals","map","max","memoryview","min","next","object","oct","open","ord","pow","print","property","range","repr","reversed","round","set","setattr","slice","sorted","staticmethod","str","sum","super","tuple","type","vars","zip"],
+literal:["__debug__","Ellipsis","False","None","NotImplemented","True"],
+type:["Any","Callable","Coroutine","Dict","List","Literal","Generic","Optional","Sequence","Set","Tuple","Type","Union"]
+},t={className:"meta",begin:/^(>>>|\.\.\.) /},r={className:"subst",begin:/\{/,
+end:/\}/,keywords:s,illegal:/#/},l={begin:/\{\{/,relevance:0},b={
+className:"string",contains:[e.BACKSLASH_ESCAPE],variants:[{
+begin:/([uU]|[bB]|[rR]|[bB][rR]|[rR][bB])?'''/,end:/'''/,
+contains:[e.BACKSLASH_ESCAPE,t],relevance:10},{
+begin:/([uU]|[bB]|[rR]|[bB][rR]|[rR][bB])?"""/,end:/"""/,
+contains:[e.BACKSLASH_ESCAPE,t],relevance:10},{
+begin:/([fF][rR]|[rR][fF]|[fF])'''/,end:/'''/,
+contains:[e.BACKSLASH_ESCAPE,t,l,r]},{begin:/([fF][rR]|[rR][fF]|[fF])"""/,
+end:/"""/,contains:[e.BACKSLASH_ESCAPE,t,l,r]},{begin:/([uU]|[rR])'/,end:/'/,
+relevance:10},{begin:/([uU]|[rR])"/,end:/"/,relevance:10},{
+begin:/([bB]|[bB][rR]|[rR][bB])'/,end:/'/},{begin:/([bB]|[bB][rR]|[rR][bB])"/,
+end:/"/},{begin:/([fF][rR]|[rR][fF]|[fF])'/,end:/'/,
+contains:[e.BACKSLASH_ESCAPE,l,r]},{begin:/([fF][rR]|[rR][fF]|[fF])"/,end:/"/,
+contains:[e.BACKSLASH_ESCAPE,l,r]},e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]
+},o="[0-9](_?[0-9])*",c=`(\\b(${o}))?\\.(${o})|\\b(${o})\\.`,d="\\b|"+i.join("|"),g={
+className:"number",relevance:0,variants:[{
+begin:`(\\b(${o})|(${c}))[eE][+-]?(${o})[jJ]?(?=${d})`},{begin:`(${c})[jJ]?`},{
+begin:`\\b([1-9](_?[0-9])*|0+(_?0)*)[lLjJ]?(?=${d})`},{
+begin:`\\b0[bB](_?[01])+[lL]?(?=${d})`},{begin:`\\b0[oO](_?[0-7])+[lL]?(?=${d})`
+},{begin:`\\b0[xX](_?[0-9a-fA-F])+[lL]?(?=${d})`},{begin:`\\b(${o})[jJ](?=${d})`
+}]},p={className:"comment",begin:n.lookahead(/# type:/),end:/$/,keywords:s,
+contains:[{begin:/# type:/},{begin:/#/,end:/\b\B/,endsWithParent:!0}]},m={
+className:"params",variants:[{className:"",begin:/\(\s*\)/,skip:!0},{begin:/\(/,
+end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:s,
+contains:["self",t,g,b,e.HASH_COMMENT_MODE]}]};return r.contains=[b,g,t],{
+name:"Python",aliases:["py","gyp","ipython"],unicodeRegex:!0,keywords:s,
+illegal:/(<\/|\?)|=>/,contains:[t,g,{begin:/\bself\b/},{beginKeywords:"if",
+relevance:0},b,p,e.HASH_COMMENT_MODE,{match:[/\bdef/,/\s+/,a],scope:{
+1:"keyword",3:"title.function"},contains:[m]},{variants:[{
+match:[/\bclass/,/\s+/,a,/\s*/,/\(\s*/,a,/\s*\)/]},{match:[/\bclass/,/\s+/,a]}],
+scope:{1:"keyword",3:"title.class",6:"title.class.inherited"}},{
+className:"meta",begin:/^[\t ]*@/,end:/(?=#)|$/,contains:[g,m,b]}]}}})()
+;hljs.registerLanguage("python",e)})();/*! `ruby` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{
+const n=e.regex,a="([a-zA-Z_]\\w*[!?=]?|[-+~]@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?)",s=n.either(/\b([A-Z]+[a-z0-9]+)+/,/\b([A-Z]+[a-z0-9]+)+[A-Z]+/),i=n.concat(s,/(::\w+)*/),t={
+"variable.constant":["__FILE__","__LINE__","__ENCODING__"],
+"variable.language":["self","super"],
+keyword:["alias","and","begin","BEGIN","break","case","class","defined","do","else","elsif","end","END","ensure","for","if","in","module","next","not","or","redo","require","rescue","retry","return","then","undef","unless","until","when","while","yield","include","extend","prepend","public","private","protected","raise","throw"],
+built_in:["proc","lambda","attr_accessor","attr_reader","attr_writer","define_method","private_constant","module_function"],
+literal:["true","false","nil"]},c={className:"doctag",begin:"@[A-Za-z]+"},r={
+begin:"#<",end:">"},b=[e.COMMENT("#","$",{contains:[c]
+}),e.COMMENT("^=begin","^=end",{contains:[c],relevance:10
+}),e.COMMENT("^__END__",e.MATCH_NOTHING_RE)],l={className:"subst",begin:/#\{/,
+end:/\}/,keywords:t},d={className:"string",contains:[e.BACKSLASH_ESCAPE,l],
+variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/},{begin:/`/,end:/`/},{
+begin:/%[qQwWx]?\(/,end:/\)/},{begin:/%[qQwWx]?\[/,end:/\]/},{
+begin:/%[qQwWx]?\{/,end:/\}/},{begin:/%[qQwWx]?</,end:/>/},{begin:/%[qQwWx]?\//,
+end:/\//},{begin:/%[qQwWx]?%/,end:/%/},{begin:/%[qQwWx]?-/,end:/-/},{
+begin:/%[qQwWx]?\|/,end:/\|/},{begin:/\B\?(\\\d{1,3})/},{
+begin:/\B\?(\\x[A-Fa-f0-9]{1,2})/},{begin:/\B\?(\\u\{?[A-Fa-f0-9]{1,6}\}?)/},{
+begin:/\B\?(\\M-\\C-|\\M-\\c|\\c\\M-|\\M-|\\C-\\M-)[\x20-\x7e]/},{
+begin:/\B\?\\(c|C-)[\x20-\x7e]/},{begin:/\B\?\\?\S/},{
+begin:n.concat(/<<[-~]?'?/,n.lookahead(/(\w+)(?=\W)[^\n]*\n(?:[^\n]*\n)*?\s*\1\b/)),
+contains:[e.END_SAME_AS_BEGIN({begin:/(\w+)/,end:/(\w+)/,
+contains:[e.BACKSLASH_ESCAPE,l]})]}]},o="[0-9](_?[0-9])*",g={className:"number",
+relevance:0,variants:[{
+begin:`\\b([1-9](_?[0-9])*|0)(\\.(${o}))?([eE][+-]?(${o})|r)?i?\\b`},{
+begin:"\\b0[dD][0-9](_?[0-9])*r?i?\\b"},{begin:"\\b0[bB][0-1](_?[0-1])*r?i?\\b"
+},{begin:"\\b0[oO][0-7](_?[0-7])*r?i?\\b"},{
+begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*r?i?\\b"},{
+begin:"\\b0(_?[0-7])+r?i?\\b"}]},_={variants:[{match:/\(\)/},{
+className:"params",begin:/\(/,end:/(?=\))/,excludeBegin:!0,endsParent:!0,
+keywords:t}]},u=[d,{variants:[{match:[/class\s+/,i,/\s+<\s+/,i]},{
+match:[/\b(class|module)\s+/,i]}],scope:{2:"title.class",
+4:"title.class.inherited"},keywords:t},{match:[/(include|extend)\s+/,i],scope:{
+2:"title.class"},keywords:t},{relevance:0,match:[i,/\.new[. (]/],scope:{
+1:"title.class"}},{relevance:0,match:/\b[A-Z][A-Z_0-9]+\b/,
+className:"variable.constant"},{relevance:0,match:s,scope:"title.class"},{
+match:[/def/,/\s+/,a],scope:{1:"keyword",3:"title.function"},contains:[_]},{
+begin:e.IDENT_RE+"::"},{className:"symbol",
+begin:e.UNDERSCORE_IDENT_RE+"(!|\\?)?:",relevance:0},{className:"symbol",
+begin:":(?!\\s)",contains:[d,{begin:a}],relevance:0},g,{className:"variable",
+begin:"(\\$\\W)|((\\$|@@?)(\\w+))(?=[^@$?])(?![A-Za-z])(?![@$?'])"},{
+className:"params",begin:/\|/,end:/\|/,excludeBegin:!0,excludeEnd:!0,
+relevance:0,keywords:t},{begin:"("+e.RE_STARTERS_RE+"|unless)\\s*",
+keywords:"unless",contains:[{className:"regexp",contains:[e.BACKSLASH_ESCAPE,l],
+illegal:/\n/,variants:[{begin:"/",end:"/[a-z]*"},{begin:/%r\{/,end:/\}[a-z]*/},{
+begin:"%r\\(",end:"\\)[a-z]*"},{begin:"%r!",end:"![a-z]*"},{begin:"%r\\[",
+end:"\\][a-z]*"}]}].concat(r,b),relevance:0}].concat(r,b)
+;l.contains=u,_.contains=u;const m=[{begin:/^\s*=>/,starts:{end:"$",contains:u}
+},{className:"meta.prompt",
+begin:"^([>?]>|[\\w#]+\\(\\w+\\):\\d+:\\d+[>*]|(\\w+-)?\\d+\\.\\d+\\.\\d+(p\\d+)?[^\\d][^>]+>)(?=[ ])",
+starts:{end:"$",keywords:t,contains:u}}];return b.unshift(r),{name:"Ruby",
+aliases:["rb","gemspec","podspec","thor","irb"],keywords:t,illegal:/\/\*/,
+contains:[e.SHEBANG({binary:"ruby"})].concat(m).concat(b).concat(u)}}})()
+;hljs.registerLanguage("ruby",e)})();/*! `rust` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{const t=e.regex,a={
+className:"title.function.invoke",relevance:0,
+begin:t.concat(/\b/,/(?!let\b)/,e.IDENT_RE,t.lookahead(/\s*\(/))
+},n="([ui](8|16|32|64|128|size)|f(32|64))?",s=["drop ","Copy","Send","Sized","Sync","Drop","Fn","FnMut","FnOnce","ToOwned","Clone","Debug","PartialEq","PartialOrd","Eq","Ord","AsRef","AsMut","Into","From","Default","Iterator","Extend","IntoIterator","DoubleEndedIterator","ExactSizeIterator","SliceConcatExt","ToString","assert!","assert_eq!","bitflags!","bytes!","cfg!","col!","concat!","concat_idents!","debug_assert!","debug_assert_eq!","env!","panic!","file!","format!","format_args!","include_bytes!","include_str!","line!","local_data_key!","module_path!","option_env!","print!","println!","select!","stringify!","try!","unimplemented!","unreachable!","vec!","write!","writeln!","macro_rules!","assert_ne!","debug_assert_ne!"],r=["i8","i16","i32","i64","i128","isize","u8","u16","u32","u64","u128","usize","f32","f64","str","char","bool","Box","Option","Result","String","Vec"]
+;return{name:"Rust",aliases:["rs"],keywords:{$pattern:e.IDENT_RE+"!?",type:r,
+keyword:["abstract","as","async","await","become","box","break","const","continue","crate","do","dyn","else","enum","extern","false","final","fn","for","if","impl","in","let","loop","macro","match","mod","move","mut","override","priv","pub","ref","return","self","Self","static","struct","super","trait","true","try","type","typeof","unsafe","unsized","use","virtual","where","while","yield"],
+literal:["true","false","Some","None","Ok","Err"],built_in:s},illegal:"</",
+contains:[e.C_LINE_COMMENT_MODE,e.COMMENT("/\\*","\\*/",{contains:["self"]
+}),e.inherit(e.QUOTE_STRING_MODE,{begin:/b?"/,illegal:null}),{
+className:"string",variants:[{begin:/b?r(#*)"(.|\n)*?"\1(?!#)/},{
+begin:/b?'\\?(x\w{2}|u\w{4}|U\w{8}|.)'/}]},{className:"symbol",
+begin:/'[a-zA-Z_][a-zA-Z0-9_]*/},{className:"number",variants:[{
+begin:"\\b0b([01_]+)"+n},{begin:"\\b0o([0-7_]+)"+n},{
+begin:"\\b0x([A-Fa-f0-9_]+)"+n},{
+begin:"\\b(\\d[\\d_]*(\\.[0-9_]+)?([eE][+-]?[0-9_]+)?)"+n}],relevance:0},{
+begin:[/fn/,/\s+/,e.UNDERSCORE_IDENT_RE],className:{1:"keyword",
+3:"title.function"}},{className:"meta",begin:"#!?\\[",end:"\\]",contains:[{
+className:"string",begin:/"/,end:/"/}]},{
+begin:[/let/,/\s+/,/(?:mut\s+)?/,e.UNDERSCORE_IDENT_RE],className:{1:"keyword",
+3:"keyword",4:"variable"}},{
+begin:[/for/,/\s+/,e.UNDERSCORE_IDENT_RE,/\s+/,/in/],className:{1:"keyword",
+3:"variable",5:"keyword"}},{begin:[/type/,/\s+/,e.UNDERSCORE_IDENT_RE],
+className:{1:"keyword",3:"title.class"}},{
+begin:[/(?:trait|enum|struct|union|impl|for)/,/\s+/,e.UNDERSCORE_IDENT_RE],
+className:{1:"keyword",3:"title.class"}},{begin:e.IDENT_RE+"::",keywords:{
+keyword:"Self",built_in:s,type:r}},{className:"punctuation",begin:"->"},a]}}})()
+;hljs.registerLanguage("rust",e)})();/*! `shell` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var s=(()=>{"use strict";return s=>({name:"Shell Session",
+aliases:["console","shellsession"],contains:[{className:"meta.prompt",
+begin:/^\s{0,3}[/~\w\d[\]()@-]*[>%$#][ ]?/,starts:{end:/[^\\](?=\s*$)/,
+subLanguage:"bash"}}]})})();hljs.registerLanguage("shell",s)})();/*! `sql` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{
+const r=e.regex,t=e.COMMENT("--","$"),n=["true","false","unknown"],a=["bigint","binary","blob","boolean","char","character","clob","date","dec","decfloat","decimal","float","int","integer","interval","nchar","nclob","national","numeric","real","row","smallint","time","timestamp","varchar","varying","varbinary"],i=["abs","acos","array_agg","asin","atan","avg","cast","ceil","ceiling","coalesce","corr","cos","cosh","count","covar_pop","covar_samp","cume_dist","dense_rank","deref","element","exp","extract","first_value","floor","json_array","json_arrayagg","json_exists","json_object","json_objectagg","json_query","json_table","json_table_primitive","json_value","lag","last_value","lead","listagg","ln","log","log10","lower","max","min","mod","nth_value","ntile","nullif","percent_rank","percentile_cont","percentile_disc","position","position_regex","power","rank","regr_avgx","regr_avgy","regr_count","regr_intercept","regr_r2","regr_slope","regr_sxx","regr_sxy","regr_syy","row_number","sin","sinh","sqrt","stddev_pop","stddev_samp","substring","substring_regex","sum","tan","tanh","translate","translate_regex","treat","trim","trim_array","unnest","upper","value_of","var_pop","var_samp","width_bucket"],s=["create table","insert into","primary key","foreign key","not null","alter table","add constraint","grouping sets","on overflow","character set","respect nulls","ignore nulls","nulls first","nulls last","depth first","breadth first"],o=i,c=["abs","acos","all","allocate","alter","and","any","are","array","array_agg","array_max_cardinality","as","asensitive","asin","asymmetric","at","atan","atomic","authorization","avg","begin","begin_frame","begin_partition","between","bigint","binary","blob","boolean","both","by","call","called","cardinality","cascaded","case","cast","ceil","ceiling","char","char_length","character","character_length","check","classifier","clob","close","coalesce","collate","collect","column","commit","condition","connect","constraint","contains","convert","copy","corr","corresponding","cos","cosh","count","covar_pop","covar_samp","create","cross","cube","cume_dist","current","current_catalog","current_date","current_default_transform_group","current_path","current_role","current_row","current_schema","current_time","current_timestamp","current_path","current_role","current_transform_group_for_type","current_user","cursor","cycle","date","day","deallocate","dec","decimal","decfloat","declare","default","define","delete","dense_rank","deref","describe","deterministic","disconnect","distinct","double","drop","dynamic","each","element","else","empty","end","end_frame","end_partition","end-exec","equals","escape","every","except","exec","execute","exists","exp","external","extract","false","fetch","filter","first_value","float","floor","for","foreign","frame_row","free","from","full","function","fusion","get","global","grant","group","grouping","groups","having","hold","hour","identity","in","indicator","initial","inner","inout","insensitive","insert","int","integer","intersect","intersection","interval","into","is","join","json_array","json_arrayagg","json_exists","json_object","json_objectagg","json_query","json_table","json_table_primitive","json_value","lag","language","large","last_value","lateral","lead","leading","left","like","like_regex","listagg","ln","local","localtime","localtimestamp","log","log10","lower","match","match_number","match_recognize","matches","max","member","merge","method","min","minute","mod","modifies","module","month","multiset","national","natural","nchar","nclob","new","no","none","normalize","not","nth_value","ntile","null","nullif","numeric","octet_length","occurrences_regex","of","offset","old","omit","on","one","only","open","or","order","out","outer","over","overlaps","overlay","parameter","partition","pattern","per","percent","percent_rank","percentile_cont","percentile_disc","period","portion","position","position_regex","power","precedes","precision","prepare","primary","procedure","ptf","range","rank","reads","real","recursive","ref","references","referencing","regr_avgx","regr_avgy","regr_count","regr_intercept","regr_r2","regr_slope","regr_sxx","regr_sxy","regr_syy","release","result","return","returns","revoke","right","rollback","rollup","row","row_number","rows","running","savepoint","scope","scroll","search","second","seek","select","sensitive","session_user","set","show","similar","sin","sinh","skip","smallint","some","specific","specifictype","sql","sqlexception","sqlstate","sqlwarning","sqrt","start","static","stddev_pop","stddev_samp","submultiset","subset","substring","substring_regex","succeeds","sum","symmetric","system","system_time","system_user","table","tablesample","tan","tanh","then","time","timestamp","timezone_hour","timezone_minute","to","trailing","translate","translate_regex","translation","treat","trigger","trim","trim_array","true","truncate","uescape","union","unique","unknown","unnest","update","upper","user","using","value","values","value_of","var_pop","var_samp","varbinary","varchar","varying","versioning","when","whenever","where","width_bucket","window","with","within","without","year","add","asc","collation","desc","final","first","last","view"].filter((e=>!i.includes(e))),l={
+begin:r.concat(/\b/,r.either(...o),/\s*\(/),relevance:0,keywords:{built_in:o}}
+;return{name:"SQL",case_insensitive:!0,illegal:/[{}]|<\//,keywords:{
+$pattern:/\b[\w\.]+/,keyword:((e,{exceptions:r,when:t}={})=>{const n=t
+;return r=r||[],e.map((e=>e.match(/\|\d+$/)||r.includes(e)?e:n(e)?e+"|0":e))
+})(c,{when:e=>e.length<3}),literal:n,type:a,
+built_in:["current_catalog","current_date","current_default_transform_group","current_path","current_role","current_schema","current_transform_group_for_type","current_user","session_user","system_time","system_user","current_time","localtime","current_timestamp","localtimestamp"]
+},contains:[{begin:r.either(...s),relevance:0,keywords:{$pattern:/[\w\.]+/,
+keyword:c.concat(s),literal:n,type:a}},{className:"type",
+begin:r.either("double precision","large object","with timezone","without timezone")
+},l,{className:"variable",begin:/@[a-z0-9][a-z0-9_]*/},{className:"string",
+variants:[{begin:/'/,end:/'/,contains:[{begin:/''/}]}]},{begin:/"/,end:/"/,
+contains:[{begin:/""/}]},e.C_NUMBER_MODE,e.C_BLOCK_COMMENT_MODE,t,{
+className:"operator",begin:/[-+*/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?/,
+relevance:0}]}}})();hljs.registerLanguage("sql",e)})();/*! `swift` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";function e(e){
+return e?"string"==typeof e?e:e.source:null}function a(e){return t("(?=",e,")")}
+function t(...a){return a.map((a=>e(a))).join("")}function n(...a){const t=(e=>{
+const a=e[e.length-1]
+;return"object"==typeof a&&a.constructor===Object?(e.splice(e.length-1,1),a):{}
+})(a);return"("+(t.capture?"":"?:")+a.map((a=>e(a))).join("|")+")"}
+const i=e=>t(/\b/,e,/\w$/.test(e)?/\b/:/\B/),s=["Protocol","Type"].map(i),u=["init","self"].map(i),c=["Any","Self"],r=["actor","any","associatedtype","async","await",/as\?/,/as!/,"as","break","case","catch","class","continue","convenience","default","defer","deinit","didSet","distributed","do","dynamic","else","enum","extension","fallthrough",/fileprivate\(set\)/,"fileprivate","final","for","func","get","guard","if","import","indirect","infix",/init\?/,/init!/,"inout",/internal\(set\)/,"internal","in","is","isolated","nonisolated","lazy","let","mutating","nonmutating",/open\(set\)/,"open","operator","optional","override","postfix","precedencegroup","prefix",/private\(set\)/,"private","protocol",/public\(set\)/,"public","repeat","required","rethrows","return","set","some","static","struct","subscript","super","switch","throws","throw",/try\?/,/try!/,"try","typealias",/unowned\(safe\)/,/unowned\(unsafe\)/,"unowned","var","weak","where","while","willSet"],o=["false","nil","true"],l=["assignment","associativity","higherThan","left","lowerThan","none","right"],m=["#colorLiteral","#column","#dsohandle","#else","#elseif","#endif","#error","#file","#fileID","#fileLiteral","#filePath","#function","#if","#imageLiteral","#keyPath","#line","#selector","#sourceLocation","#warn_unqualified_access","#warning"],p=["abs","all","any","assert","assertionFailure","debugPrint","dump","fatalError","getVaList","isKnownUniquelyReferenced","max","min","numericCast","pointwiseMax","pointwiseMin","precondition","preconditionFailure","print","readLine","repeatElement","sequence","stride","swap","swift_unboxFromSwiftValueWithType","transcode","type","unsafeBitCast","unsafeDowncast","withExtendedLifetime","withUnsafeMutablePointer","withUnsafePointer","withVaList","withoutActuallyEscaping","zip"],d=n(/[/=\-+!*%<>&|^~?]/,/[\u00A1-\u00A7]/,/[\u00A9\u00AB]/,/[\u00AC\u00AE]/,/[\u00B0\u00B1]/,/[\u00B6\u00BB\u00BF\u00D7\u00F7]/,/[\u2016-\u2017]/,/[\u2020-\u2027]/,/[\u2030-\u203E]/,/[\u2041-\u2053]/,/[\u2055-\u205E]/,/[\u2190-\u23FF]/,/[\u2500-\u2775]/,/[\u2794-\u2BFF]/,/[\u2E00-\u2E7F]/,/[\u3001-\u3003]/,/[\u3008-\u3020]/,/[\u3030]/),F=n(d,/[\u0300-\u036F]/,/[\u1DC0-\u1DFF]/,/[\u20D0-\u20FF]/,/[\uFE00-\uFE0F]/,/[\uFE20-\uFE2F]/),b=t(d,F,"*"),h=n(/[a-zA-Z_]/,/[\u00A8\u00AA\u00AD\u00AF\u00B2-\u00B5\u00B7-\u00BA]/,/[\u00BC-\u00BE\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u00FF]/,/[\u0100-\u02FF\u0370-\u167F\u1681-\u180D\u180F-\u1DBF]/,/[\u1E00-\u1FFF]/,/[\u200B-\u200D\u202A-\u202E\u203F-\u2040\u2054\u2060-\u206F]/,/[\u2070-\u20CF\u2100-\u218F\u2460-\u24FF\u2776-\u2793]/,/[\u2C00-\u2DFF\u2E80-\u2FFF]/,/[\u3004-\u3007\u3021-\u302F\u3031-\u303F\u3040-\uD7FF]/,/[\uF900-\uFD3D\uFD40-\uFDCF\uFDF0-\uFE1F\uFE30-\uFE44]/,/[\uFE47-\uFEFE\uFF00-\uFFFD]/),f=n(h,/\d/,/[\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F]/),w=t(h,f,"*"),y=t(/[A-Z]/,f,"*"),g=["autoclosure",t(/convention\(/,n("swift","block","c"),/\)/),"discardableResult","dynamicCallable","dynamicMemberLookup","escaping","frozen","GKInspectable","IBAction","IBDesignable","IBInspectable","IBOutlet","IBSegueAction","inlinable","main","nonobjc","NSApplicationMain","NSCopying","NSManaged",t(/objc\(/,w,/\)/),"objc","objcMembers","propertyWrapper","requires_stored_property_inits","resultBuilder","testable","UIApplicationMain","unknown","usableFromInline"],E=["iOS","iOSApplicationExtension","macOS","macOSApplicationExtension","macCatalyst","macCatalystApplicationExtension","watchOS","watchOSApplicationExtension","tvOS","tvOSApplicationExtension","swift"]
+;return e=>{const d={match:/\s+/,relevance:0},h=e.COMMENT("/\\*","\\*/",{
+contains:["self"]}),v=[e.C_LINE_COMMENT_MODE,h],A={match:[/\./,n(...s,...u)],
+className:{2:"keyword"}},N={match:t(/\./,n(...r)),relevance:0
+},C=r.filter((e=>"string"==typeof e)).concat(["_|0"]),D={variants:[{
+className:"keyword",
+match:n(...r.filter((e=>"string"!=typeof e)).concat(c).map(i),...u)}]},k={
+$pattern:n(/\b\w+/,/#\w+/),keyword:C.concat(m),literal:o},B=[A,N,D],_=[{
+match:t(/\./,n(...p)),relevance:0},{className:"built_in",
+match:t(/\b/,n(...p),/(?=\()/)}],S={match:/->/,relevance:0},M=[S,{
+className:"operator",relevance:0,variants:[{match:b},{match:`\\.(\\.|${F})+`}]
+}],x="([0-9]_*)+",$="([0-9a-fA-F]_*)+",I={className:"number",relevance:0,
+variants:[{match:`\\b(${x})(\\.(${x}))?([eE][+-]?(${x}))?\\b`},{
+match:`\\b0x(${$})(\\.(${$}))?([pP][+-]?(${x}))?\\b`},{match:/\b0o([0-7]_*)+\b/
+},{match:/\b0b([01]_*)+\b/}]},L=(e="")=>({className:"subst",variants:[{
+match:t(/\\/,e,/[0\\tnr"']/)},{match:t(/\\/,e,/u\{[0-9a-fA-F]{1,8}\}/)}]
+}),O=(e="")=>({className:"subst",match:t(/\\/,e,/[\t ]*(?:[\r\n]|\r\n)/)
+}),T=(e="")=>({className:"subst",label:"interpol",begin:t(/\\/,e,/\(/),end:/\)/
+}),j=(e="")=>({begin:t(e,/"""/),end:t(/"""/,e),contains:[L(e),O(e),T(e)]
+}),P=(e="")=>({begin:t(e,/"/),end:t(/"/,e),contains:[L(e),T(e)]}),K={
+className:"string",
+variants:[j(),j("#"),j("##"),j("###"),P(),P("#"),P("##"),P("###")]},z={
+match:t(/`/,w,/`/)},q=[z,{className:"variable",match:/\$\d+/},{
+className:"variable",match:`\\$${f}+`}],U=[{match:/(@|#(un)?)available/,
+className:"keyword",starts:{contains:[{begin:/\(/,end:/\)/,keywords:E,
+contains:[...M,I,K]}]}},{className:"keyword",match:t(/@/,n(...g))},{
+className:"meta",match:t(/@/,w)}],Z={match:a(/\b[A-Z]/),relevance:0,contains:[{
+className:"type",
+match:t(/(AV|CA|CF|CG|CI|CL|CM|CN|CT|MK|MP|MTK|MTL|NS|SCN|SK|UI|WK|XC)/,f,"+")
+},{className:"type",match:y,relevance:0},{match:/[?!]+/,relevance:0},{
+match:/\.\.\./,relevance:0},{match:t(/\s+&\s+/,a(y)),relevance:0}]},V={
+begin:/</,end:/>/,keywords:k,contains:[...v,...B,...U,S,Z]};Z.contains.push(V)
+;const W={begin:/\(/,end:/\)/,relevance:0,keywords:k,contains:["self",{
+match:t(w,/\s*:/),keywords:"_|0",relevance:0
+},...v,...B,..._,...M,I,K,...q,...U,Z]},G={begin:/</,end:/>/,contains:[...v,Z]
+},R={begin:/\(/,end:/\)/,keywords:k,contains:[{
+begin:n(a(t(w,/\s*:/)),a(t(w,/\s+/,w,/\s*:/))),end:/:/,relevance:0,contains:[{
+className:"keyword",match:/\b_\b/},{className:"params",match:w}]
+},...v,...B,...M,I,K,...U,Z,W],endsParent:!0,illegal:/["']/},X={
+match:[/func/,/\s+/,n(z.match,w,b)],className:{1:"keyword",3:"title.function"},
+contains:[G,R,d],illegal:[/\[/,/%/]},H={
+match:[/\b(?:subscript|init[?!]?)/,/\s*(?=[<(])/],className:{1:"keyword"},
+contains:[G,R,d],illegal:/\[|%/},J={match:[/operator/,/\s+/,b],className:{
+1:"keyword",3:"title"}},Q={begin:[/precedencegroup/,/\s+/,y],className:{
+1:"keyword",3:"title"},contains:[Z],keywords:[...l,...o],end:/}/}
+;for(const e of K.variants){const a=e.contains.find((e=>"interpol"===e.label))
+;a.keywords=k;const t=[...B,..._,...M,I,K,...q];a.contains=[...t,{begin:/\(/,
+end:/\)/,contains:["self",...t]}]}return{name:"Swift",keywords:k,
+contains:[...v,X,H,{beginKeywords:"struct protocol class extension enum actor",
+end:"\\{",excludeEnd:!0,keywords:k,contains:[e.inherit(e.TITLE_MODE,{
+className:"title.class",begin:/[A-Za-z$_][\u00C0-\u02B80-9A-Za-z$_]*/}),...B]
+},J,Q,{beginKeywords:"import",end:/$/,contains:[...v],relevance:0
+},...B,..._,...M,I,K,...q,...U,Z,W]}}})();hljs.registerLanguage("swift",e)})();/*! `typescript` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict"
+;const e="[A-Za-z$_][0-9A-Za-z$_]*",n=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends"],a=["true","false","null","undefined","NaN","Infinity"],t=["Object","Function","Boolean","Symbol","Math","Date","Number","BigInt","String","RegExp","Array","Float32Array","Float64Array","Int8Array","Uint8Array","Uint8ClampedArray","Int16Array","Int32Array","Uint16Array","Uint32Array","BigInt64Array","BigUint64Array","Set","Map","WeakSet","WeakMap","ArrayBuffer","SharedArrayBuffer","Atomics","DataView","JSON","Promise","Generator","GeneratorFunction","AsyncFunction","Reflect","Proxy","Intl","WebAssembly"],s=["Error","EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"],r=["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],c=["arguments","this","super","console","window","document","localStorage","sessionStorage","module","global"],i=[].concat(r,t,s)
+;function o(o){const l=o.regex,d=e,b={begin:/<[A-Za-z0-9\\._:-]+/,
+end:/\/[A-Za-z0-9\\._:-]+>|\/>/,isTrulyOpeningTag:(e,n)=>{
+const a=e[0].length+e.index,t=e.input[a]
+;if("<"===t||","===t)return void n.ignoreMatch();let s
+;">"===t&&(((e,{after:n})=>{const a="</"+e[0].slice(1)
+;return-1!==e.input.indexOf(a,n)})(e,{after:a})||n.ignoreMatch())
+;const r=e.input.substring(a)
+;((s=r.match(/^\s*=/))||(s=r.match(/^\s+extends\s+/))&&0===s.index)&&n.ignoreMatch()
+}},g={$pattern:e,keyword:n,literal:a,built_in:i,"variable.language":c
+},u="[0-9](_?[0-9])*",m=`\\.(${u})`,E="0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*",y={
+className:"number",variants:[{
+begin:`(\\b(${E})((${m})|\\.)?|(${m}))[eE][+-]?(${u})\\b`},{
+begin:`\\b(${E})\\b((${m})\\b|\\.)?|(${m})\\b`},{
+begin:"\\b(0|[1-9](_?[0-9])*)n\\b"},{
+begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b"},{
+begin:"\\b0[bB][0-1](_?[0-1])*n?\\b"},{begin:"\\b0[oO][0-7](_?[0-7])*n?\\b"},{
+begin:"\\b0[0-7]+n?\\b"}],relevance:0},A={className:"subst",begin:"\\$\\{",
+end:"\\}",keywords:g,contains:[]},p={begin:"html`",end:"",starts:{end:"`",
+returnEnd:!1,contains:[o.BACKSLASH_ESCAPE,A],subLanguage:"xml"}},N={
+begin:"css`",end:"",starts:{end:"`",returnEnd:!1,
+contains:[o.BACKSLASH_ESCAPE,A],subLanguage:"css"}},f={begin:"gql`",end:"",
+starts:{end:"`",returnEnd:!1,contains:[o.BACKSLASH_ESCAPE,A],
+subLanguage:"graphql"}},_={className:"string",begin:"`",end:"`",
+contains:[o.BACKSLASH_ESCAPE,A]},h={className:"comment",
+variants:[o.COMMENT(/\/\*\*(?!\/)/,"\\*/",{relevance:0,contains:[{
+begin:"(?=@[A-Za-z]+)",relevance:0,contains:[{className:"doctag",
+begin:"@[A-Za-z]+"},{className:"type",begin:"\\{",end:"\\}",excludeEnd:!0,
+excludeBegin:!0,relevance:0},{className:"variable",begin:d+"(?=\\s*(-)|$)",
+endsParent:!0,relevance:0},{begin:/(?=[^\n])\s/,relevance:0}]}]
+}),o.C_BLOCK_COMMENT_MODE,o.C_LINE_COMMENT_MODE]
+},S=[o.APOS_STRING_MODE,o.QUOTE_STRING_MODE,p,N,f,_,{match:/\$\d+/},y]
+;A.contains=S.concat({begin:/\{/,end:/\}/,keywords:g,contains:["self"].concat(S)
+});const v=[].concat(h,A.contains),w=v.concat([{begin:/\(/,end:/\)/,keywords:g,
+contains:["self"].concat(v)}]),R={className:"params",begin:/\(/,end:/\)/,
+excludeBegin:!0,excludeEnd:!0,keywords:g,contains:w},x={variants:[{
+match:[/class/,/\s+/,d,/\s+/,/extends/,/\s+/,l.concat(d,"(",l.concat(/\./,d),")*")],
+scope:{1:"keyword",3:"title.class",5:"keyword",7:"title.class.inherited"}},{
+match:[/class/,/\s+/,d],scope:{1:"keyword",3:"title.class"}}]},k={relevance:0,
+match:l.either(/\bJSON/,/\b[A-Z][a-z]+([A-Z][a-z]*|\d)*/,/\b[A-Z]{2,}([A-Z][a-z]+|\d)+([A-Z][a-z]*)*/,/\b[A-Z]{2,}[a-z]+([A-Z][a-z]+|\d)*([A-Z][a-z]*)*/),
+className:"title.class",keywords:{_:[...t,...s]}},O={variants:[{
+match:[/function/,/\s+/,d,/(?=\s*\()/]},{match:[/function/,/\s*(?=\()/]}],
+className:{1:"keyword",3:"title.function"},label:"func.def",contains:[R],
+illegal:/%/},C={
+match:l.concat(/\b/,(I=[...r,"super","import"],l.concat("(?!",I.join("|"),")")),d,l.lookahead(/\(/)),
+className:"title.function",relevance:0};var I;const T={
+begin:l.concat(/\./,l.lookahead(l.concat(d,/(?![0-9A-Za-z$_(])/))),end:d,
+excludeBegin:!0,keywords:"prototype",className:"property",relevance:0},M={
+match:[/get|set/,/\s+/,d,/(?=\()/],className:{1:"keyword",3:"title.function"},
+contains:[{begin:/\(\)/},R]
+},B="(\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)|"+o.UNDERSCORE_IDENT_RE+")\\s*=>",$={
+match:[/const|var|let/,/\s+/,d,/\s*/,/=\s*/,/(async\s*)?/,l.lookahead(B)],
+keywords:"async",className:{1:"keyword",3:"title.function"},contains:[R]}
+;return{name:"JavaScript",aliases:["js","jsx","mjs","cjs"],keywords:g,exports:{
+PARAMS_CONTAINS:w,CLASS_REFERENCE:k},illegal:/#(?![$_A-z])/,
+contains:[o.SHEBANG({label:"shebang",binary:"node",relevance:5}),{
+label:"use_strict",className:"meta",relevance:10,
+begin:/^\s*['"]use (strict|asm)['"]/
+},o.APOS_STRING_MODE,o.QUOTE_STRING_MODE,p,N,f,_,h,{match:/\$\d+/},y,k,{
+className:"attr",begin:d+l.lookahead(":"),relevance:0},$,{
+begin:"("+o.RE_STARTERS_RE+"|\\b(case|return|throw)\\b)\\s*",
+keywords:"return throw case",relevance:0,contains:[h,o.REGEXP_MODE,{
+className:"function",begin:B,returnBegin:!0,end:"\\s*=>",contains:[{
+className:"params",variants:[{begin:o.UNDERSCORE_IDENT_RE,relevance:0},{
+className:null,begin:/\(\s*\)/,skip:!0},{begin:/\(/,end:/\)/,excludeBegin:!0,
+excludeEnd:!0,keywords:g,contains:w}]}]},{begin:/,/,relevance:0},{match:/\s+/,
+relevance:0},{variants:[{begin:"<>",end:"</>"},{
+match:/<[A-Za-z0-9\\._:-]+\s*\/>/},{begin:b.begin,
+"on:begin":b.isTrulyOpeningTag,end:b.end}],subLanguage:"xml",contains:[{
+begin:b.begin,end:b.end,skip:!0,contains:["self"]}]}]},O,{
+beginKeywords:"while if switch catch for"},{
+begin:"\\b(?!function)"+o.UNDERSCORE_IDENT_RE+"\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)\\s*\\{",
+returnBegin:!0,label:"func.def",contains:[R,o.inherit(o.TITLE_MODE,{begin:d,
+className:"title.function"})]},{match:/\.\.\./,relevance:0},T,{match:"\\$"+d,
+relevance:0},{match:[/\bconstructor(?=\s*\()/],className:{1:"title.function"},
+contains:[R]},C,{relevance:0,match:/\b[A-Z][A-Z_0-9]+\b/,
+className:"variable.constant"},x,M,{match:/\$[(.]/}]}}return t=>{
+const s=o(t),r=e,l=["any","void","number","boolean","string","object","never","symbol","bigint","unknown"],d={
+beginKeywords:"namespace",end:/\{/,excludeEnd:!0,
+contains:[s.exports.CLASS_REFERENCE]},b={beginKeywords:"interface",end:/\{/,
+excludeEnd:!0,keywords:{keyword:"interface extends",built_in:l},
+contains:[s.exports.CLASS_REFERENCE]},g={$pattern:e,
+keyword:n.concat(["type","namespace","interface","public","private","protected","implements","declare","abstract","readonly","enum","override"]),
+literal:a,built_in:i.concat(l),"variable.language":c},u={className:"meta",
+begin:"@"+r},m=(e,n,a)=>{const t=e.contains.findIndex((e=>e.label===n))
+;if(-1===t)throw Error("can not find mode to replace");e.contains.splice(t,1,a)}
+;return Object.assign(s.keywords,g),
+s.exports.PARAMS_CONTAINS.push(u),s.contains=s.contains.concat([u,d,b]),
+m(s,"shebang",t.SHEBANG()),m(s,"use_strict",{className:"meta",relevance:10,
+begin:/^\s*['"]use strict['"]/
+}),s.contains.find((e=>"func.def"===e.label)).relevance=0,Object.assign(s,{
+name:"TypeScript",aliases:["ts","tsx","mts","cts"]}),s}})()
+;hljs.registerLanguage("typescript",e)})();/*! `vbnet` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{
+const n=e.regex,t=/\d{1,2}\/\d{1,2}\/\d{4}/,a=/\d{4}-\d{1,2}-\d{1,2}/,i=/(\d|1[012])(:\d+){0,2} *(AM|PM)/,s=/\d{1,2}(:\d{1,2}){1,2}/,r={
+className:"literal",variants:[{begin:n.concat(/# */,n.either(a,t),/ *#/)},{
+begin:n.concat(/# */,s,/ *#/)},{begin:n.concat(/# */,i,/ *#/)},{
+begin:n.concat(/# */,n.either(a,t),/ +/,n.either(i,s),/ *#/)}]
+},l=e.COMMENT(/'''/,/$/,{contains:[{className:"doctag",begin:/<\/?/,end:/>/}]
+}),o=e.COMMENT(null,/$/,{variants:[{begin:/'/},{begin:/([\t ]|^)REM(?=\s)/}]})
+;return{name:"Visual Basic .NET",aliases:["vb"],case_insensitive:!0,
+classNameAliases:{label:"symbol"},keywords:{
+keyword:"addhandler alias aggregate ansi as async assembly auto binary by byref byval call case catch class compare const continue custom declare default delegate dim distinct do each equals else elseif end enum erase error event exit explicit finally for friend from function get global goto group handles if implements imports in inherits interface into iterator join key let lib loop me mid module mustinherit mustoverride mybase myclass namespace narrowing new next notinheritable notoverridable of off on operator option optional order overloads overridable overrides paramarray partial preserve private property protected public raiseevent readonly redim removehandler resume return select set shadows shared skip static step stop structure strict sub synclock take text then throw to try unicode until using when where while widening with withevents writeonly yield",
+built_in:"addressof and andalso await directcast gettype getxmlnamespace is isfalse isnot istrue like mod nameof new not or orelse trycast typeof xor cbool cbyte cchar cdate cdbl cdec cint clng cobj csbyte cshort csng cstr cuint culng cushort",
+type:"boolean byte char date decimal double integer long object sbyte short single string uinteger ulong ushort",
+literal:"true false nothing"},
+illegal:"//|\\{|\\}|endif|gosub|variant|wend|^\\$ ",contains:[{
+className:"string",begin:/"(""|[^/n])"C\b/},{className:"string",begin:/"/,
+end:/"/,illegal:/\n/,contains:[{begin:/""/}]},r,{className:"number",relevance:0,
+variants:[{begin:/\b\d[\d_]*((\.[\d_]+(E[+-]?[\d_]+)?)|(E[+-]?[\d_]+))[RFD@!#]?/
+},{begin:/\b\d[\d_]*((U?[SIL])|[%&])?/},{begin:/&H[\dA-F_]+((U?[SIL])|[%&])?/},{
+begin:/&O[0-7_]+((U?[SIL])|[%&])?/},{begin:/&B[01_]+((U?[SIL])|[%&])?/}]},{
+className:"label",begin:/^\w+:/},l,o,{className:"meta",
+begin:/[\t ]*#(const|disable|else|elseif|enable|end|externalsource|if|region)\b/,
+end:/$/,keywords:{
+keyword:"const disable else elseif enable end externalsource if region then"},
+contains:[o]}]}}})();hljs.registerLanguage("vbnet",e)})();/*! `xml` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{
+const a=e.regex,n=a.concat(/[\p{L}_]/u,a.optional(/[\p{L}0-9_.-]*:/u),/[\p{L}0-9_.-]*/u),s={
+className:"symbol",begin:/&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/},t={begin:/\s/,
+contains:[{className:"keyword",begin:/#?[a-z_][a-z1-9_-]+/,illegal:/\n/}]
+},i=e.inherit(t,{begin:/\(/,end:/\)/}),c=e.inherit(e.APOS_STRING_MODE,{
+className:"string"}),l=e.inherit(e.QUOTE_STRING_MODE,{className:"string"}),r={
+endsWithParent:!0,illegal:/</,relevance:0,contains:[{className:"attr",
+begin:/[\p{L}0-9._:-]+/u,relevance:0},{begin:/=\s*/,relevance:0,contains:[{
+className:"string",endsParent:!0,variants:[{begin:/"/,end:/"/,contains:[s]},{
+begin:/'/,end:/'/,contains:[s]},{begin:/[^\s"'=<>`]+/}]}]}]};return{
+name:"HTML, XML",
+aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist","wsf","svg"],
+case_insensitive:!0,unicodeRegex:!0,contains:[{className:"meta",begin:/<![a-z]/,
+end:/>/,relevance:10,contains:[t,l,c,i,{begin:/\[/,end:/\]/,contains:[{
+className:"meta",begin:/<![a-z]/,end:/>/,contains:[t,i,l,c]}]}]
+},e.COMMENT(/<!--/,/-->/,{relevance:10}),{begin:/<!\[CDATA\[/,end:/\]\]>/,
+relevance:10},s,{className:"meta",end:/\?>/,variants:[{begin:/<\?xml/,
+relevance:10,contains:[l]},{begin:/<\?[a-z][a-z0-9]+/}]},{className:"tag",
+begin:/<style(?=\s|>)/,end:/>/,keywords:{name:"style"},contains:[r],starts:{
+end:/<\/style>/,returnEnd:!0,subLanguage:["css","xml"]}},{className:"tag",
+begin:/<script(?=\s|>)/,end:/>/,keywords:{name:"script"},contains:[r],starts:{
+end:/<\/script>/,returnEnd:!0,subLanguage:["javascript","handlebars","xml"]}},{
+className:"tag",begin:/<>|<\/>/},{className:"tag",
+begin:a.concat(/</,a.lookahead(a.concat(n,a.either(/\/>/,/>/,/\s/)))),
+end:/\/?>/,contains:[{className:"name",begin:n,relevance:0,starts:r}]},{
+className:"tag",begin:a.concat(/<\//,a.lookahead(a.concat(n,/>/))),contains:[{
+className:"name",begin:n,relevance:0},{begin:/>/,relevance:0,endsParent:!0}]}]}}
+})();hljs.registerLanguage("xml",e)})();/*! `yaml` grammar compiled for Highlight.js 11.8.0 */
+(()=>{var e=(()=>{"use strict";return e=>{
+const n="true false yes no null",a="[\\w#;/?:@&=+$,.~*'()[\\]]+",s={
+className:"string",relevance:0,variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/
+},{begin:/\S+/}],contains:[e.BACKSLASH_ESCAPE,{className:"template-variable",
+variants:[{begin:/\{\{/,end:/\}\}/},{begin:/%\{/,end:/\}/}]}]},i=e.inherit(s,{
+variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/},{begin:/[^\s,{}[\]]+/}]}),l={
+end:",",endsWithParent:!0,excludeEnd:!0,keywords:n,relevance:0},t={begin:/\{/,
+end:/\}/,contains:[l],illegal:"\\n",relevance:0},g={begin:"\\[",end:"\\]",
+contains:[l],illegal:"\\n",relevance:0},b=[{className:"attr",variants:[{
+begin:"\\w[\\w :\\/.-]*:(?=[ \t]|$)"},{begin:'"\\w[\\w :\\/.-]*":(?=[ \t]|$)'},{
+begin:"'\\w[\\w :\\/.-]*':(?=[ \t]|$)"}]},{className:"meta",begin:"^---\\s*$",
+relevance:10},{className:"string",
+begin:"[\\|>]([1-9]?[+-])?[ ]*\\n( +)[^ ][^\\n]*\\n(\\2[^\\n]+\\n?)*"},{
+begin:"<%[%=-]?",end:"[%-]?%>",subLanguage:"ruby",excludeBegin:!0,excludeEnd:!0,
+relevance:0},{className:"type",begin:"!\\w+!"+a},{className:"type",
+begin:"!<"+a+">"},{className:"type",begin:"!"+a},{className:"type",begin:"!!"+a
+},{className:"meta",begin:"&"+e.UNDERSCORE_IDENT_RE+"$"},{className:"meta",
+begin:"\\*"+e.UNDERSCORE_IDENT_RE+"$"},{className:"bullet",begin:"-(?=[ ]|$)",
+relevance:0},e.HASH_COMMENT_MODE,{beginKeywords:n,keywords:{literal:n}},{
+className:"number",
+begin:"\\b[0-9]{4}(-[0-9][0-9]){0,2}([Tt \\t][0-9][0-9]?(:[0-9][0-9]){2})?(\\.[0-9]*)?([ \\t])*(Z|[-+][0-9][0-9]?(:[0-9][0-9])?)?\\b"
+},{className:"number",begin:e.C_NUMBER_RE+"\\b",relevance:0},t,g,s],r=[...b]
+;return r.pop(),r.push(i),l.contains=r,{name:"YAML",case_insensitive:!0,
+aliases:["yml"],contains:b}}})();hljs.registerLanguage("yaml",e)})();
\ No newline at end of file
diff --git a/MyApp/wwwroot/lib/js/lite-yt-embed.js b/MyApp/wwwroot/lib/js/lite-yt-embed.js
new file mode 100644
index 0000000..ae02034
--- /dev/null
+++ b/MyApp/wwwroot/lib/js/lite-yt-embed.js
@@ -0,0 +1,125 @@
+/**
+ * A lightweight youtube embed. Still should feel the same to the user, just MUCH faster to initialize and paint.
+ *
+ * Thx to these as the inspiration
+ *   https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
+ *   https://autoplay-youtube-player.glitch.me/
+ *
+ * Once built it, I also found these:
+ *   https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube (👍👍)
+ *   https://github.com/Daugilas/lazyYT
+ *   https://github.com/vb/lazyframe
+ */
+class LiteYTEmbed extends HTMLElement {
+    connectedCallback() {
+        this.videoId = this.getAttribute('videoid');
+        let playBtnEl = this.querySelector('.lty-playbtn');
+        // A label for the button takes priority over a [playlabel] attribute on the custom-element
+        this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play';
+
+        /**
+         * Lo, the youtube placeholder image!  (aka the thumbnail, poster image, etc)
+         *
+         * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md
+         *
+         * TODO: Do the sddefault->hqdefault fallback
+         *       - When doing this, apply referrerpolicy (https://github.com/ampproject/amphtml/pull/3940)
+         * TODO: Consider using webp if supported, falling back to jpg
+         */
+        if (!this.style.backgroundImage) {
+            this.posterUrl = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
+            // Warm the connection for the poster image
+            LiteYTEmbed.addPrefetch('preload', this.posterUrl, 'image');
+
+            this.style.backgroundImage = `url("${this.posterUrl}")`;
+        }
+
+        // Set up play button, and its visually hidden label
+        if (!playBtnEl) {
+            playBtnEl = document.createElement('button');
+            playBtnEl.type = 'button';
+            playBtnEl.classList.add('lty-playbtn');
+            this.append(playBtnEl);
+        }
+        if (!playBtnEl.textContent) {
+            const playBtnLabelEl = document.createElement('span');
+            playBtnLabelEl.className = 'lyt-visually-hidden';
+            playBtnLabelEl.textContent = this.playLabel;
+            playBtnEl.append(playBtnLabelEl);
+        }
+
+        // On hover (or tap), warm up the TCP connections we're (likely) about to use.
+        this.removeEventListener('pointerover', LiteYTEmbed.warmConnections);
+        this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {once: true});
+
+        // Once the user clicks, add the real iframe and drop our play button
+        // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
+        //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
+        this.removeEventListener('click', this.addIframe);
+        this.addEventListener('click', this.addIframe);
+    }
+
+    // // TODO: Support the the user changing the [videoid] attribute
+    // attributeChangedCallback() {
+    // }
+
+    /**
+     * Add a <link rel={preload | preconnect} ...> to the head
+     */
+    static addPrefetch(kind, url, as) {
+        const linkEl = document.createElement('link');
+        linkEl.rel = kind;
+        linkEl.href = url;
+        if (as) {
+            linkEl.as = as;
+        }
+        document.head.append(linkEl);
+    }
+
+    /**
+     * Begin pre-connecting to warm up the iframe load
+     * Since the embed's network requests load within its iframe,
+     *   preload/prefetch'ing them outside the iframe will only cause double-downloads.
+     * So, the best we can do is warm up a few connections to origins that are in the critical path.
+     *
+     * Maybe `<link rel=preload as=document>` would work, but it's unsupported: http://crbug.com/593267
+     * But TBH, I don't think it'll happen soon with Site Isolation and split caches adding serious complexity.
+     */
+    static warmConnections() {
+        if (LiteYTEmbed.preconnected) return;
+
+        // The iframe document and most of its subresources come right off youtube.com
+        LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com');
+        // The botguard script is fetched off from google.com
+        LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');
+
+        // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
+        LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');
+        LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
+
+        LiteYTEmbed.preconnected = true;
+    }
+
+    addIframe() {
+        const params = new URLSearchParams(this.getAttribute('params') || []);
+        params.append('autoplay', '1');
+        const iframeEl = document.createElement('iframe');
+        iframeEl.width = 560;
+        iframeEl.height = 315;
+        // No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include
+        iframeEl.title = this.playLabel;
+        iframeEl.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
+        iframeEl.allowFullscreen = true;
+        // AFAIK, the encoding here isn't necessary for XSS, but we'll do it only because this is a URL
+        // https://stackoverflow.com/q/64959723/89484
+        iframeEl.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${params.toString()}`;
+        this.append(iframeEl);
+
+        this.classList.add('lyt-activated');
+
+        // Set focus for a11y
+        this.querySelector('iframe').focus();
+    }
+}
+// Register custom element
+customElements.define('lite-youtube', LiteYTEmbed);
\ No newline at end of file
diff --git a/MyApp/wwwroot/lib/js/qrcode.min.js b/MyApp/wwwroot/lib/js/qrcode.min.js
new file mode 100644
index 0000000..993e88f
--- /dev/null
+++ b/MyApp/wwwroot/lib/js/qrcode.min.js
@@ -0,0 +1 @@
+var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,this.data=a,this.parsedData=[];for(var b=[],d=0,e=this.data.length;e>d;d++){var f=this.data.charCodeAt(d);f>65536?(b[0]=240|(1835008&f)>>>18,b[1]=128|(258048&f)>>>12,b[2]=128|(4032&f)>>>6,b[3]=128|63&f):f>2048?(b[0]=224|(61440&f)>>>12,b[1]=128|(4032&f)>>>6,b[2]=128|63&f):f>128?(b[0]=192|(1984&f)>>>6,b[1]=128|63&f):b[0]=f,this.parsedData=this.parsedData.concat(b)}this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function b(a,b){this.typeNumber=a,this.errorCorrectLevel=b,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}function i(a,b){if(void 0==a.length)throw new Error(a.length+"/"+b);for(var c=0;c<a.length&&0==a[c];)c++;this.num=new Array(a.length-c+b);for(var d=0;d<a.length-c;d++)this.num[d]=a[d+c]}function j(a,b){this.totalCount=a,this.dataCount=b}function k(){this.buffer=[],this.length=0}function m(){return"undefined"!=typeof CanvasRenderingContext2D}function n(){var a=!1,b=navigator.userAgent;return/android/i.test(b)&&(a=!0,aMat=b.toString().match(/android ([0-9]\.[0-9])/i),aMat&&aMat[1]&&(a=parseFloat(aMat[1]))),a}function r(a,b){for(var c=1,e=s(a),f=0,g=l.length;g>=f;f++){var h=0;switch(b){case d.L:h=l[f][0];break;case d.M:h=l[f][1];break;case d.Q:h=l[f][2];break;case d.H:h=l[f][3]}if(h>=e)break;c++}if(c>l.length)throw new Error("Too long data");return c}function s(a){var b=encodeURI(a).toString().replace(/\%[0-9a-fA-F]{2}/g,"a");return b.length+(b.length!=a?3:0)}a.prototype={getLength:function(){return this.parsedData.length},write:function(a){for(var b=0,c=this.parsedData.length;c>b;b++)a.put(this.parsedData[b],8)}},b.prototype={addData:function(b){var c=new a(b);this.dataList.push(c),this.dataCache=null},isDark:function(a,b){if(0>a||this.moduleCount<=a||0>b||this.moduleCount<=b)throw new Error(a+","+b);return this.modules[a][b]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var d=0;d<this.moduleCount;d++){this.modules[d]=new Array(this.moduleCount);for(var e=0;e<this.moduleCount;e++)this.modules[d][e]=null}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(a,c),this.typeNumber>=7&&this.setupTypeNumber(a),null==this.dataCache&&(this.dataCache=b.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,b){for(var c=-1;7>=c;c++)if(!(-1>=a+c||this.moduleCount<=a+c))for(var d=-1;7>=d;d++)-1>=b+d||this.moduleCount<=b+d||(this.modules[a+c][b+d]=c>=0&&6>=c&&(0==d||6==d)||d>=0&&6>=d&&(0==c||6==c)||c>=2&&4>=c&&d>=2&&4>=d?!0:!1)},getBestMaskPattern:function(){for(var a=0,b=0,c=0;8>c;c++){this.makeImpl(!0,c);var d=f.getLostPoint(this);(0==c||a>d)&&(a=d,b=c)}return b},createMovieClip:function(a,b,c){var d=a.createEmptyMovieClip(b,c),e=1;this.make();for(var f=0;f<this.modules.length;f++)for(var g=f*e,h=0;h<this.modules[f].length;h++){var i=h*e,j=this.modules[f][h];j&&(d.beginFill(0,100),d.moveTo(i,g),d.lineTo(i+e,g),d.lineTo(i+e,g+e),d.lineTo(i,g+e),d.endFill())}return d},setupTimingPattern:function(){for(var a=8;a<this.moduleCount-8;a++)null==this.modules[a][6]&&(this.modules[a][6]=0==a%2);for(var b=8;b<this.moduleCount-8;b++)null==this.modules[6][b]&&(this.modules[6][b]=0==b%2)},setupPositionAdjustPattern:function(){for(var a=f.getPatternPosition(this.typeNumber),b=0;b<a.length;b++)for(var c=0;c<a.length;c++){var d=a[b],e=a[c];if(null==this.modules[d][e])for(var g=-2;2>=g;g++)for(var h=-2;2>=h;h++)this.modules[d+g][e+h]=-2==g||2==g||-2==h||2==h||0==g&&0==h?!0:!1}},setupTypeNumber:function(a){for(var b=f.getBCHTypeNumber(this.typeNumber),c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[Math.floor(c/3)][c%3+this.moduleCount-8-3]=d}for(var c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[c%3+this.moduleCount-8-3][Math.floor(c/3)]=d}},setupTypeInfo:function(a,b){for(var c=this.errorCorrectLevel<<3|b,d=f.getBCHTypeInfo(c),e=0;15>e;e++){var g=!a&&1==(1&d>>e);6>e?this.modules[e][8]=g:8>e?this.modules[e+1][8]=g:this.modules[this.moduleCount-15+e][8]=g}for(var e=0;15>e;e++){var g=!a&&1==(1&d>>e);8>e?this.modules[8][this.moduleCount-e-1]=g:9>e?this.modules[8][15-e-1+1]=g:this.modules[8][15-e-1]=g}this.modules[this.moduleCount-8][8]=!a},mapData:function(a,b){for(var c=-1,d=this.moduleCount-1,e=7,g=0,h=this.moduleCount-1;h>0;h-=2)for(6==h&&h--;;){for(var i=0;2>i;i++)if(null==this.modules[d][h-i]){var j=!1;g<a.length&&(j=1==(1&a[g]>>>e));var k=f.getMask(b,d,h-i);k&&(j=!j),this.modules[d][h-i]=j,e--,-1==e&&(g++,e=7)}if(d+=c,0>d||this.moduleCount<=d){d-=c,c=-c;break}}}},b.PAD0=236,b.PAD1=17,b.createData=function(a,c,d){for(var e=j.getRSBlocks(a,c),g=new k,h=0;h<d.length;h++){var i=d[h];g.put(i.mode,4),g.put(i.getLength(),f.getLengthInBits(i.mode,a)),i.write(g)}for(var l=0,h=0;h<e.length;h++)l+=e[h].dataCount;if(g.getLengthInBits()>8*l)throw new Error("code length overflow. ("+g.getLengthInBits()+">"+8*l+")");for(g.getLengthInBits()+4<=8*l&&g.put(0,4);0!=g.getLengthInBits()%8;)g.putBit(!1);for(;;){if(g.getLengthInBits()>=8*l)break;if(g.put(b.PAD0,8),g.getLengthInBits()>=8*l)break;g.put(b.PAD1,8)}return b.createBytes(g,e)},b.createBytes=function(a,b){for(var c=0,d=0,e=0,g=new Array(b.length),h=new Array(b.length),j=0;j<b.length;j++){var k=b[j].dataCount,l=b[j].totalCount-k;d=Math.max(d,k),e=Math.max(e,l),g[j]=new Array(k);for(var m=0;m<g[j].length;m++)g[j][m]=255&a.buffer[m+c];c+=k;var n=f.getErrorCorrectPolynomial(l),o=new i(g[j],n.getLength()-1),p=o.mod(n);h[j]=new Array(n.getLength()-1);for(var m=0;m<h[j].length;m++){var q=m+p.getLength()-h[j].length;h[j][m]=q>=0?p.get(q):0}}for(var r=0,m=0;m<b.length;m++)r+=b[m].totalCount;for(var s=new Array(r),t=0,m=0;d>m;m++)for(var j=0;j<b.length;j++)m<g[j].length&&(s[t++]=g[j][m]);for(var m=0;e>m;m++)for(var j=0;j<b.length;j++)m<h[j].length&&(s[t++]=h[j][m]);return s};for(var c={MODE_NUMBER:1,MODE_ALPHA_NUM:2,MODE_8BIT_BYTE:4,MODE_KANJI:8},d={L:1,M:0,Q:3,H:2},e={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7},f={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(a){for(var b=a<<10;f.getBCHDigit(b)-f.getBCHDigit(f.G15)>=0;)b^=f.G15<<f.getBCHDigit(b)-f.getBCHDigit(f.G15);return(a<<10|b)^f.G15_MASK},getBCHTypeNumber:function(a){for(var b=a<<12;f.getBCHDigit(b)-f.getBCHDigit(f.G18)>=0;)b^=f.G18<<f.getBCHDigit(b)-f.getBCHDigit(f.G18);return a<<12|b},getBCHDigit:function(a){for(var b=0;0!=a;)b++,a>>>=1;return b},getPatternPosition:function(a){return f.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,b,c){switch(a){case e.PATTERN000:return 0==(b+c)%2;case e.PATTERN001:return 0==b%2;case e.PATTERN010:return 0==c%3;case e.PATTERN011:return 0==(b+c)%3;case e.PATTERN100:return 0==(Math.floor(b/2)+Math.floor(c/3))%2;case e.PATTERN101:return 0==b*c%2+b*c%3;case e.PATTERN110:return 0==(b*c%2+b*c%3)%2;case e.PATTERN111:return 0==(b*c%3+(b+c)%2)%2;default:throw new Error("bad maskPattern:"+a)}},getErrorCorrectPolynomial:function(a){for(var b=new i([1],0),c=0;a>c;c++)b=b.multiply(new i([1,g.gexp(c)],0));return b},getLengthInBits:function(a,b){if(b>=1&&10>b)switch(a){case c.MODE_NUMBER:return 10;case c.MODE_ALPHA_NUM:return 9;case c.MODE_8BIT_BYTE:return 8;case c.MODE_KANJI:return 8;default:throw new Error("mode:"+a)}else if(27>b)switch(a){case c.MODE_NUMBER:return 12;case c.MODE_ALPHA_NUM:return 11;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 10;default:throw new Error("mode:"+a)}else{if(!(41>b))throw new Error("type:"+b);switch(a){case c.MODE_NUMBER:return 14;case c.MODE_ALPHA_NUM:return 13;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 12;default:throw new Error("mode:"+a)}}},getLostPoint:function(a){for(var b=a.getModuleCount(),c=0,d=0;b>d;d++)for(var e=0;b>e;e++){for(var f=0,g=a.isDark(d,e),h=-1;1>=h;h++)if(!(0>d+h||d+h>=b))for(var i=-1;1>=i;i++)0>e+i||e+i>=b||(0!=h||0!=i)&&g==a.isDark(d+h,e+i)&&f++;f>5&&(c+=3+f-5)}for(var d=0;b-1>d;d++)for(var e=0;b-1>e;e++){var j=0;a.isDark(d,e)&&j++,a.isDark(d+1,e)&&j++,a.isDark(d,e+1)&&j++,a.isDark(d+1,e+1)&&j++,(0==j||4==j)&&(c+=3)}for(var d=0;b>d;d++)for(var e=0;b-6>e;e++)a.isDark(d,e)&&!a.isDark(d,e+1)&&a.isDark(d,e+2)&&a.isDark(d,e+3)&&a.isDark(d,e+4)&&!a.isDark(d,e+5)&&a.isDark(d,e+6)&&(c+=40);for(var e=0;b>e;e++)for(var d=0;b-6>d;d++)a.isDark(d,e)&&!a.isDark(d+1,e)&&a.isDark(d+2,e)&&a.isDark(d+3,e)&&a.isDark(d+4,e)&&!a.isDark(d+5,e)&&a.isDark(d+6,e)&&(c+=40);for(var k=0,e=0;b>e;e++)for(var d=0;b>d;d++)a.isDark(d,e)&&k++;var l=Math.abs(100*k/b/b-50)/5;return c+=10*l}},g={glog:function(a){if(1>a)throw new Error("glog("+a+")");return g.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;a>=256;)a-=255;return g.EXP_TABLE[a]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},h=0;8>h;h++)g.EXP_TABLE[h]=1<<h;for(var h=8;256>h;h++)g.EXP_TABLE[h]=g.EXP_TABLE[h-4]^g.EXP_TABLE[h-5]^g.EXP_TABLE[h-6]^g.EXP_TABLE[h-8];for(var h=0;255>h;h++)g.LOG_TABLE[g.EXP_TABLE[h]]=h;i.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var b=new Array(this.getLength()+a.getLength()-1),c=0;c<this.getLength();c++)for(var d=0;d<a.getLength();d++)b[c+d]^=g.gexp(g.glog(this.get(c))+g.glog(a.get(d)));return new i(b,0)},mod:function(a){if(this.getLength()-a.getLength()<0)return this;for(var b=g.glog(this.get(0))-g.glog(a.get(0)),c=new Array(this.getLength()),d=0;d<this.getLength();d++)c[d]=this.get(d);for(var d=0;d<a.getLength();d++)c[d]^=g.gexp(g.glog(a.get(d))+b);return new i(c,0).mod(a)}},j.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],j.getRSBlocks=function(a,b){var c=j.getRsBlockTable(a,b);if(void 0==c)throw new Error("bad rs block @ typeNumber:"+a+"/errorCorrectLevel:"+b);for(var d=c.length/3,e=[],f=0;d>f;f++)for(var g=c[3*f+0],h=c[3*f+1],i=c[3*f+2],k=0;g>k;k++)e.push(new j(h,i));return e},j.getRsBlockTable=function(a,b){switch(b){case d.L:return j.RS_BLOCK_TABLE[4*(a-1)+0];case d.M:return j.RS_BLOCK_TABLE[4*(a-1)+1];case d.Q:return j.RS_BLOCK_TABLE[4*(a-1)+2];case d.H:return j.RS_BLOCK_TABLE[4*(a-1)+3];default:return void 0}},k.prototype={get:function(a){var b=Math.floor(a/8);return 1==(1&this.buffer[b]>>>7-a%8)},put:function(a,b){for(var c=0;b>c;c++)this.putBit(1==(1&a>>>b-c-1))},getLengthInBits:function(){return this.length},putBit:function(a){var b=Math.floor(this.length/8);this.buffer.length<=b&&this.buffer.push(0),a&&(this.buffer[b]|=128>>>this.length%8),this.length++}};var l=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]],o=function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){function g(a,b){var c=document.createElementNS("http://www.w3.org/2000/svg",a);for(var d in b)b.hasOwnProperty(d)&&c.setAttribute(d,b[d]);return c}var b=this._htOption,c=this._el,d=a.getModuleCount();Math.floor(b.width/d),Math.floor(b.height/d),this.clear();var h=g("svg",{viewBox:"0 0 "+String(d)+" "+String(d),width:"100%",height:"100%",fill:b.colorLight});h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),c.appendChild(h),h.appendChild(g("rect",{fill:b.colorDark,width:"1",height:"1",id:"template"}));for(var i=0;d>i;i++)for(var j=0;d>j;j++)if(a.isDark(i,j)){var k=g("use",{x:String(i),y:String(j)});k.setAttributeNS("http://www.w3.org/1999/xlink","href","#template"),h.appendChild(k)}},a.prototype.clear=function(){for(;this._el.hasChildNodes();)this._el.removeChild(this._el.lastChild)},a}(),p="svg"===document.documentElement.tagName.toLowerCase(),q=p?o:m()?function(){function a(){this._elImage.src=this._elCanvas.toDataURL("image/png"),this._elImage.style.display="block",this._elCanvas.style.display="none"}function d(a,b){var c=this;if(c._fFail=b,c._fSuccess=a,null===c._bSupportDataURI){var d=document.createElement("img"),e=function(){c._bSupportDataURI=!1,c._fFail&&_fFail.call(c)},f=function(){c._bSupportDataURI=!0,c._fSuccess&&c._fSuccess.call(c)};return d.onabort=e,d.onerror=e,d.onload=f,d.src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",void 0}c._bSupportDataURI===!0&&c._fSuccess?c._fSuccess.call(c):c._bSupportDataURI===!1&&c._fFail&&c._fFail.call(c)}if(this._android&&this._android<=2.1){var b=1/window.devicePixelRatio,c=CanvasRenderingContext2D.prototype.drawImage;CanvasRenderingContext2D.prototype.drawImage=function(a,d,e,f,g,h,i,j){if("nodeName"in a&&/img/i.test(a.nodeName))for(var l=arguments.length-1;l>=1;l--)arguments[l]=arguments[l]*b;else"undefined"==typeof j&&(arguments[1]*=b,arguments[2]*=b,arguments[3]*=b,arguments[4]*=b);c.apply(this,arguments)}}var e=function(a,b){this._bIsPainted=!1,this._android=n(),this._htOption=b,this._elCanvas=document.createElement("canvas"),this._elCanvas.width=b.width,this._elCanvas.height=b.height,a.appendChild(this._elCanvas),this._el=a,this._oContext=this._elCanvas.getContext("2d"),this._bIsPainted=!1,this._elImage=document.createElement("img"),this._elImage.style.display="none",this._el.appendChild(this._elImage),this._bSupportDataURI=null};return e.prototype.draw=function(a){var b=this._elImage,c=this._oContext,d=this._htOption,e=a.getModuleCount(),f=d.width/e,g=d.height/e,h=Math.round(f),i=Math.round(g);b.style.display="none",this.clear();for(var j=0;e>j;j++)for(var k=0;e>k;k++){var l=a.isDark(j,k),m=k*f,n=j*g;c.strokeStyle=l?d.colorDark:d.colorLight,c.lineWidth=1,c.fillStyle=l?d.colorDark:d.colorLight,c.fillRect(m,n,f,g),c.strokeRect(Math.floor(m)+.5,Math.floor(n)+.5,h,i),c.strokeRect(Math.ceil(m)-.5,Math.ceil(n)-.5,h,i)}this._bIsPainted=!0},e.prototype.makeImage=function(){this._bIsPainted&&d.call(this,a)},e.prototype.isPainted=function(){return this._bIsPainted},e.prototype.clear=function(){this._oContext.clearRect(0,0,this._elCanvas.width,this._elCanvas.height),this._bIsPainted=!1},e.prototype.round=function(a){return a?Math.floor(1e3*a)/1e3:a},e}():function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){for(var b=this._htOption,c=this._el,d=a.getModuleCount(),e=Math.floor(b.width/d),f=Math.floor(b.height/d),g=['<table style="border:0;border-collapse:collapse;">'],h=0;d>h;h++){g.push("<tr>");for(var i=0;d>i;i++)g.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:'+e+"px;height:"+f+"px;background-color:"+(a.isDark(h,i)?b.colorDark:b.colorLight)+';"></td>');g.push("</tr>")}g.push("</table>"),c.innerHTML=g.join("");var j=c.childNodes[0],k=(b.width-j.offsetWidth)/2,l=(b.height-j.offsetHeight)/2;k>0&&l>0&&(j.style.margin=l+"px "+k+"px")},a.prototype.clear=function(){this._el.innerHTML=""},a}();QRCode=function(a,b){if(this._htOption={width:256,height:256,typeNumber:4,colorDark:"#000000",colorLight:"#ffffff",correctLevel:d.H},"string"==typeof b&&(b={text:b}),b)for(var c in b)this._htOption[c]=b[c];"string"==typeof a&&(a=document.getElementById(a)),this._android=n(),this._el=a,this._oQRCode=null,this._oDrawing=new q(this._el,this._htOption),this._htOption.text&&this.makeCode(this._htOption.text)},QRCode.prototype.makeCode=function(a){this._oQRCode=new b(r(a,this._htOption.correctLevel),this._htOption.correctLevel),this._oQRCode.addData(a),this._oQRCode.make(),this._el.title=a,this._oDrawing.draw(this._oQRCode),this.makeImage()},QRCode.prototype.makeImage=function(){"function"==typeof this._oDrawing.makeImage&&(!this._android||this._android>=3)&&this._oDrawing.makeImage()},QRCode.prototype.clear=function(){this._oDrawing.clear()},QRCode.CorrectLevel=d}();
\ No newline at end of file
diff --git a/MyApp/wwwroot/lib/mjs/servicestack-client.min.mjs b/MyApp/wwwroot/lib/mjs/servicestack-client.min.mjs
new file mode 100644
index 0000000..097133b
--- /dev/null
+++ b/MyApp/wwwroot/lib/mjs/servicestack-client.min.mjs
@@ -0,0 +1 @@
+class ResponseStatus{constructor(e){Object.assign(this,e)}errorCode;message;stackTrace;errors;meta}class ResponseError{constructor(e){Object.assign(this,e)}errorCode;fieldName;message;meta}class ErrorResponse{constructor(e){Object.assign(this,e)}type;responseStatus}class EmptyResponse{constructor(e){Object.assign(this,e)}responseStatus}class NavItem{label;href;exact;id;className;iconClass;show;hide;children;meta;constructor(e){Object.assign(this,e)}}class GetNavItems{constructor(e){Object.assign(this,e)}createResponse(){return new GetNavItemsResponse}getTypeName(){return"GetNavItems"}getMethod(){return"GET"}}class GetNavItemsResponse{baseUrl;results;navItemsMap;meta;responseStatus;constructor(e){Object.assign(this,e)}}class MetadataTypesConfig{baseUrl;defaultNamespaces;defaultImports;includeTypes;excludeTypes;treatTypesAsStrings;globalNamespace;ignoreTypes;exportTypes;exportAttributes;ignoreTypesInNamespaces;constructor(e){Object.assign(this,e)}}class MetadataRoute{path;verbs;notes;summary;constructor(e){Object.assign(this,e)}}class MetadataOperationType{request;response;actions;returnsVoid;returnType;routes;dataModel;viewModel;requiresAuth;requiredRoles;requiresAnyRole;requiredPermissions;requiresAnyPermission;tags;constructor(e){Object.assign(this,e)}}class MetadataTypes{config;namespaces;types;operations;constructor(e){Object.assign(this,e)}}class MetadataTypeName{name;namespace;genericArgs;constructor(e){Object.assign(this,e)}}class MetadataDataContract{name;namespace;constructor(e){Object.assign(this,e)}}class MetadataDataMember{name;order;isRequired;emitDefaultValue;constructor(e){Object.assign(this,e)}}class MetadataAttribute{name;constructorArgs;args;constructor(e){Object.assign(this,e)}}class MetadataPropertyType{name;type;isValueType;isSystemType;isEnum;isPrimaryKey;typeNamespace;genericArgs;value;description;dataMember;readOnly;paramType;displayType;isRequired;allowableValues;allowableMin;allowableMax;attributes;constructor(e){Object.assign(this,e)}}class MetadataType{name;namespace;genericArgs;inherits;implements;displayType;description;isNested;isEnum;isEnumInt;isInterface;isAbstract;dataContract;properties;attributes;innerTypes;enumNames;enumValues;enumMemberValues;enumDescriptions;meta;constructor(e){Object.assign(this,e)}}class NewInstanceResolver{tryResolve(e){return new e}}class SingletonInstanceResolver{tryResolve(e){return e.instance||(e.instance=new e)}}function eventMessageType(e){switch(e){case"onConnect":return"ServerEventConnect";case"onHeartbeat":return"ServerEventHeartbeat";case"onJoin":return"ServerEventJoin";case"onLeave":return"ServerEventLeave";case"onUpdate":return"ServerEventUpdate"}return null}var ReadyState,Types;!function(e){e[e.CONNECTING=0]="CONNECTING",e[e.OPEN=1]="OPEN",e[e.CLOSED=2]="CLOSED"}(ReadyState=ReadyState||{});class ServerEventsClient{channels;options;eventSource;static UnknownChannel="*";eventStreamUri;updateSubscriberUrl;connectionInfo;serviceClient;stopped;resolver;listeners;EventSource;withCredentials;constructor(e,t,r={},s=null){if(this.channels=t,this.options=r,this.eventSource=s,0===this.channels.length)throw"at least 1 channel is required";this.resolver=this.options.resolver||new NewInstanceResolver,this.eventStreamUri=combinePaths(e,"event-stream")+"?",this.updateChannels(t),this.serviceClient=new JsonServiceClient(e),this.listeners={},this.withCredentials=!0,this.options.handlers||(this.options.handlers={})}onMessage=e=>{if("undefined"==typeof document){var t,r,s,n=e.data?e.data.indexOf("\n"):-1;if(0<=n)return t=e.data,s=e.lastEventId,r=Object.assign({},{lastEventId:s,data:t.substring(0,n)}),s=Object.assign({},{lastEventId:s,data:t.substring(n+1)}),this._onMessage(r),void this._onMessage(s)}this._onMessage(e)};_onMessage=a=>{if(!this.stopped){let n=this.options;void 0===o&&(o={querySelectorAll:e=>[]});var o,i=splitOnFirst(a.data," ");let e=null,t=i[0];var l=splitOnFirst(t,"@"),l=(1<l.length&&(e=l[0],t=l[1]),i[1]);let r=null;try{r=l?JSON.parse(l):null}catch(e){}if((i=splitOnFirst(t,".")).length<=1)throw"invalid selector format: "+t;var u=i[0],i=i[1].replace(new RegExp("%20","g")," "),c=splitOnFirst(i,"$"),[h,p]=c,d=p&&$$(p),f=d&&d[0],a={eventId:parseInt(a.lastEventId),data:a.data,type:eventMessageType(h)||"ServerEventMessage",channel:e,selector:t,json:l,body:r,op:u,target:c[0],cssSelector:p,meta:{}},l="object"==typeof r?Object.assign({},a,r):a;if(!n.validate||!1!==n.validate(a)){let s=new Headers;if(s.set("Content-Type","text/plain"),"cmd"===u)if("onConnect"===h){this.connectionInfo=l,"string"==typeof r.heartbeatIntervalMs&&(this.connectionInfo.heartbeatIntervalMs=parseInt(r.heartbeatIntervalMs)),"string"==typeof r.idleTimeoutMs&&(this.connectionInfo.idleTimeoutMs=parseInt(r.idleTimeoutMs)),Object.assign(n,r);c=n.handlers.onConnect;if(c&&(c.call(f||o.body,this.connectionInfo,a),this.stopped))return;n.heartbeatUrl&&(n.heartbeat&&clearInterval(n.heartbeat),n.heartbeat=setInterval(async()=>{if(this.eventSource.readyState===EventSource.CLOSED)clearInterval(n.heartbeat),null!=(e=n.handlers.onStop)&&e.apply(this.eventSource),this.reconnectServerEvents({error:new Error("EventSource is CLOSED")});else{var e=new Request(n.heartbeatUrl,{method:"POST",mode:"cors",headers:s,credentials:this.serviceClient.credentials});try{var t,r=await fetch(e);r.ok?await r.text():(t=new Error(r.status+" - "+r.statusText),this.reconnectServerEvents({error:t}))}catch(e){this.reconnectServerEvents({error:e})}}},this.connectionInfo&&this.connectionInfo.heartbeatIntervalMs||n.heartbeatIntervalMs||1e4)),n.unRegisterUrl&&"undefined"!=typeof window&&(window.onunload=()=>{navigator.sendBeacon?(this.stopped=!0,this.eventSource&&this.eventSource.close(),navigator.sendBeacon(n.unRegisterUrl)):this.stop()}),this.updateSubscriberUrl=n.updateSubscriberUrl,this.updateChannels((n.channels||"").split(","))}else{p="onJoin"==h||"onLeave"==h||"onUpdate"==h;let e=n.handlers[h];e?p?e.call(f||o.body,l):e.call(f||o.body,r,a):p||(c=n.receivers&&n.receivers.cmd,this.invokeReceiver(c,h,f,a,"cmd")),p&&(e=n.handlers.onCommand)&&e.call(f||o.body,l)}else"trigger"===u?this.raiseEvent(i,a):"css"===u&&css(d||$$("body"),h,r);c=n.receivers&&n.receivers[u];this.invokeReceiver(c,h,f,a,u),eventMessageType(h)||(p=n.handlers.onMessage)&&p.call(f||o.body,l),n.onTick&&n.onTick()}}};onError=e=>{var t;this.stopped||(e=e||event,null!=(t=this.options.onException)&&t.call(this.eventSource,e),this.options.onTick&&this.options.onTick())};getEventSourceOptions(){return{withCredentials:this.withCredentials}}reconnectServerEvents(t={}){if(!this.stopped){t.error&&this.onError(t.error);const n=this.eventSource;let e=t.url||this.eventStreamUri||n.url;null!=this.options.resolveStreamUrl&&(e=this.options.resolveStreamUrl(e));var r=new(this.EventSource||EventSource)(e,this.getEventSourceOptions()),s=(r.addEventListener("error",e=>(t.onerror||n.onerror||this.onError)(e)),r.addEventListener("message",t.onmessage||n.onmessage||this.onMessage),this.options.onReconnect);return null!=s&&s.call(r,t.error),n.removeEventListener&&(n.removeEventListener("error",this.onError),n.removeEventListener("message",this.onMessage)),n.close(),this.eventSource=r}}start(){if(this.stopped=!1,null==this.eventSource||this.eventSource.readyState===EventSource.CLOSED){let e=this.eventStreamUri;null!=this.options.resolveStreamUrl&&(e=this.options.resolveStreamUrl(e)),this.eventSource=new(this.EventSource||EventSource)(e,this.getEventSourceOptions()),this.eventSource.addEventListener("error",this.onError),this.eventSource.addEventListener("message",e=>this.onMessage(e))}return this}stop(){this.stopped=!0,this.eventSource&&this.eventSource.close();var e=this.options,e=(e&&e.heartbeat&&clearInterval(e.heartbeat),this.connectionInfo);return null==e||null==e.unRegisterUrl?new Promise((e,t)=>e()):(this.connectionInfo=null,fetch(new Request(e.unRegisterUrl,{method:"POST",mode:"cors",credentials:this.serviceClient.credentials})).then(e=>{if(!e.ok)throw new Error(e.status+" - "+e.statusText)}).catch(this.onError))}invokeReceiver(r,e,s,n,t){if(r)if("function"==typeof r&&(r=this.resolver.tryResolve(r)),e=e.replace("-",""),r.client=this,r.request=n,"function"==typeof r[e])r[e].call(s||r,n.body,n);else if(e in r)r[e]=n.body;else{var a=Object.getOwnPropertyDescriptor(r,e);if(null!=a)a.set?a.set(n.body):a.writable&&(r[e]=n.body);else{let t=e.toLowerCase();getAllMembers(r).forEach(e=>{e.toLowerCase()==t&&("function"==typeof r[e]?r[e].call(s||r,n.body,n):r[e]=n.body)});a=r.noSuchMethod;"function"==typeof a&&a.call(s||r,n.target,n)}}}hasConnected(){return null!=this.connectionInfo}registerHandler(e,t){return this.options.handlers||(this.options.handlers={}),this.options.handlers[e]=t,this}setResolver(e){return this.options.resolver=e,this}registerReceiver(e){return this.registerNamedReceiver("cmd",e)}registerNamedReceiver(e,t){return this.options.receivers||(this.options.receivers={}),this.options.receivers[e]=t,this}unregisterReceiver(e="cmd"){return this.options.receivers&&delete this.options.receivers[e],this}updateChannels(e){this.channels=e;var t=null!=this.eventSource?this.eventSource.url:this.eventStreamUri;this.eventStreamUri=t.substring(0,Math.min(t.indexOf("?"),t.length))+"?channels="+e.join(",")+"&t="+(new Date).getTime()}update(e,t){var r,s="string"==typeof e?e.split(","):e,n="string"==typeof t?t.split(","):t,a=[];for(r in this.channels){var o=this.channels[r];null!=n&&-1!==n.indexOf(o)||a.push(o)}if(s)for(var i in s){i=s[i];-1===a.indexOf(i)&&a.push(i)}this.updateChannels(a)}addListener(e,t){return(this.listeners[e]||(this.listeners[e]=[])).push(t),this}removeListener(e,t){e=this.listeners[e];return e&&0<=(t=e.indexOf(t))&&e.splice(t,1),this}raiseEvent(e,t){e=this.listeners[e];e&&e.forEach(e=>{try{e(t)}catch(e){this.onError(e)}})}getConnectionInfo(){if(null==this.connectionInfo)throw"Not Connected";return this.connectionInfo}getSubscriptionId(){return this.getConnectionInfo().id}updateSubscriber(t){return null==t.id&&(t.id=this.getSubscriptionId()),this.serviceClient.post(t).then(e=>{this.update(t.subscribeChannels,t.unsubscribeChannels)}).catch(this.onError)}subscribeToChannels(...t){var e=new UpdateEventSubscriber;return e.id=this.getSubscriptionId(),e.subscribeChannels=t,this.serviceClient.post(e).then(e=>{this.update(t,null)}).catch(this.onError)}unsubscribeFromChannels(...t){var e=new UpdateEventSubscriber;return e.id=this.getSubscriptionId(),e.unsubscribeChannels=t,this.serviceClient.post(e).then(e=>{this.update(null,t)}).catch(this.onError)}getChannelSubscribers(){var e=new GetEventSubscribers;return e.channels=this.channels,this.serviceClient.get(e).then(e=>e.map(e=>this.toServerEventUser(e))).catch(e=>(this.onError(e),[]))}toServerEventUser(e){var t,r=e.channels,s=new ServerEventUser;for(t in s.userId=e.userId,s.displayName=e.displayName,s.profileUrl=e.profileUrl,s.channels=r?r.split(","):null,e)"userId"!=t&&"displayName"!=t&&"profileUrl"!=t&&"channels"!=t&&(null==s.meta&&(s.meta={}),s.meta[t]=e[t]);return s}}function getAllMembers(e){let s=[];do{var t=Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e).map(e=>e.toString())).sort().filter((e,t,r)=>"constructor"!==e&&(0==t||e!==r[t-1])&&-1===s.indexOf(e));s=s.concat(t)}while((e=Object.getPrototypeOf(e))&&Object.getPrototypeOf(e));return s}class ServerEventReceiver{client;request;noSuchMethod(e,t){}}class UpdateEventSubscriber{id;subscribeChannels;unsubscribeChannels;createResponse(){return new UpdateEventSubscriberResponse}getTypeName(){return"UpdateEventSubscriber"}}class UpdateEventSubscriberResponse{responseStatus}class GetEventSubscribers{channels;createResponse(){return[]}getTypeName(){return"GetEventSubscribers"}}class ServerEventUser{userId;displayName;profileUrl;channels;meta}class HttpMethods{static Get="GET";static Post="POST";static Put="PUT";static Delete="DELETE";static Patch="PATCH";static Head="HEAD";static Options="OPTIONS";static hasRequestBody=e=>!("GET"===e||"DELETE"===e||"HEAD"===e||"OPTIONS"===e)}class GetAccessToken{constructor(e){Object.assign(this,e)}refreshToken;useTokenCookie;createResponse(){return new GetAccessTokenResponse}getTypeName(){return"GetAccessToken"}getMethod(){return"POST"}}class GetAccessTokenResponse{accessToken;responseStatus}class JsonServiceClient{baseUrl;replyBaseUrl;oneWayBaseUrl;mode;credentials;headers;userName;password;bearerToken;refreshToken;refreshTokenUri;useTokenCookie;enableAutoRefreshToken;requestFilter;static globalRequestFilter;responseFilter;static globalResponseFilter;exceptionFilter;urlFilter;onAuthenticationRequired;manageCookies;cookies;parseJson;static toBase64;constructor(e="/"){this.baseUrl=e,this.mode="cors",this.credentials="include",this.headers=new Headers,this.headers.set("Content-Type","application/json"),this.manageCookies="undefined"==typeof document,this.cookies={},this.enableAutoRefreshToken=!0,this.basePath="api"}setCredentials(e,t){this.userName=e,this.password=t}useBasePath(e){return this.basePath=e,this}set basePath(e){e?(this.replyBaseUrl=combinePaths(this.baseUrl,e)+"/",this.oneWayBaseUrl=combinePaths(this.baseUrl,e)+"/"):(this.replyBaseUrl=combinePaths(this.baseUrl,"json","reply")+"/",this.oneWayBaseUrl=combinePaths(this.baseUrl,"json","oneway")+"/")}apply(e){return e(this),this}get(e,t){return"string"!=typeof e?this.fetch(HttpMethods.Get,e,t):this.fetch(HttpMethods.Get,null,t,this.toAbsoluteUrl(e))}delete(e,t){return"string"!=typeof e?this.fetch(HttpMethods.Delete,e,t):this.fetch(HttpMethods.Delete,null,t,this.toAbsoluteUrl(e))}post(e,t){return this.fetch(HttpMethods.Post,e,t)}postToUrl(e,t,r){return this.fetch(HttpMethods.Post,t,r,this.toAbsoluteUrl(e))}postBody(e,t,r){return this.fetchBody(HttpMethods.Post,e,t,r)}put(e,t){return this.fetch(HttpMethods.Put,e,t)}putToUrl(e,t,r){return this.fetch(HttpMethods.Put,t,r,this.toAbsoluteUrl(e))}putBody(e,t,r){return this.fetchBody(HttpMethods.Put,e,t,r)}patch(e,t){return this.fetch(HttpMethods.Patch,e,t)}patchToUrl(e,t,r){return this.fetch(HttpMethods.Patch,t,r,this.toAbsoluteUrl(e))}patchBody(e,t,r){return this.fetchBody(HttpMethods.Patch,e,t,r)}publish(e,t){return this.sendOneWay(e,t)}sendOneWay(e,t){var r=combinePaths(this.oneWayBaseUrl,nameOf(e));return this.fetch(HttpMethods.Post,e,null,r)}sendAll(e){var t;return 0==e.length?Promise.resolve([]):(t=combinePaths(this.replyBaseUrl,nameOf(e[0])+"[]"),this.fetch(HttpMethods.Post,e,null,t))}sendAllOneWay(e){var t;return 0==e.length?Promise.resolve(void 0):(t=combinePaths(this.oneWayBaseUrl,nameOf(e[0])+"[]"),this.fetch(HttpMethods.Post,e,null,t).then(e=>{}))}createUrlFromDto(e,t){let r=combinePaths(this.replyBaseUrl,nameOf(t));e=HttpMethods.hasRequestBody(e);return r=e?r:appendQueryString(r,t)}toAbsoluteUrl(e){return e.startsWith("http://")||e.startsWith("https://")?e:combinePaths(this.baseUrl,e)}deleteCookie(e){this.manageCookies?delete this.cookies[e]:document&&(document.cookie=e+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/")}createRequest({method:e,request:t,url:r,args:s,body:n}){r=r||this.createUrlFromDto(e,t),s&&(r=appendQueryString(r,s)),null!=this.bearerToken?this.headers.set("Authorization","Bearer "+this.bearerToken):null!=this.userName&&this.headers.set("Authorization","Basic "+JsonServiceClient.toBase64(this.userName+":"+this.password)),this.manageCookies&&(0<(s=Object.keys(this.cookies).map(e=>{e=this.cookies[e];return e.expires&&e.expires<new Date?null:e.name+"="+encodeURIComponent(e.value)}).filter(e=>!!e)).length?this.headers.set("Cookie",s.join("; ")):this.headers.delete("Cookie"));var s=new Headers(this.headers),a=HttpMethods.hasRequestBody(e),r={url:r,method:e,mode:this.mode,credentials:this.credentials,headers:s,compress:!1};return a&&(r.body=n||JSON.stringify(t),isFormData(n))&&(r.body=sanitizeFormData(n),s.delete("Content-Type")),null!=this.requestFilter&&this.requestFilter(r),null!=JsonServiceClient.globalRequestFilter&&JsonServiceClient.globalRequestFilter(r),r}json(e){return this.parseJson?this.parseJson(e):e.text().then(e=>0<e.length?JSON.parse(e):null)}applyResponseFilters(e){null!=this.responseFilter&&this.responseFilter(e),null!=JsonServiceClient.globalResponseFilter&&JsonServiceClient.globalResponseFilter(e)}createResponse(e,t){if(!e.ok)throw this.applyResponseFilters(e),e;if(this.manageCookies){let r=[];e.headers.forEach((e,t)=>{"set-cookie"===t.toLowerCase()&&e.split(",").forEach(e=>r.push(e))}),r.forEach(e=>{e=parseCookie(e);e&&(this.cookies[e.name]=e)})}e.headers.forEach((e,t)=>{"x-cookies"===t.toLowerCase()&&0<=e.split(",").indexOf("ss-reftok")&&(this.useTokenCookie=!0)}),this.applyResponseFilters(e);let r=t&&"string"!=typeof t&&"function"==typeof t.createResponse?t.createResponse():null;if("string"==typeof r)return e.text().then(e=>e);t=e.headers.get("content-type"),t=t&&-1!==t.indexOf("application/json");if(t)return this.json(e).then(e=>e);if("undefined"!=typeof Uint8Array&&r instanceof Uint8Array){if("function"!=typeof e.arrayBuffer)throw new Error("This fetch polyfill does not implement 'arrayBuffer'");return e.arrayBuffer().then(e=>new Uint8Array(e))}if("function"==typeof Blob&&r instanceof Blob){if("function"!=typeof e.blob)throw new Error("This fetch polyfill does not implement 'blob'");return e.blob().then(e=>e)}var s=e.headers.get("content-length");return"0"===s||null==s&&!t?e.text().then(e=>r):this.json(e).then(e=>e)}handleError(e,r,t=null){if(r instanceof Error)throw this.raiseError(e,r);if(r.bodyUsed)throw this.raiseError(r,createErrorResponse(r.status,r.statusText,t));return void 0===r.json&&r.responseStatus?new Promise((e,t)=>t(this.raiseError(null,r))):this.json(r).then(e=>{e=sanitize(e);if(e.responseStatus)throw null!=t&&(e.type=t),e;throw createErrorResponse(r.status,r.statusText,t)}).catch(e=>{if(e instanceof Error||"undefined"!=typeof window&&window.DOMException&&e instanceof window.DOMException)throw this.raiseError(r,createErrorResponse(r.status,r.statusText,t));throw this.raiseError(r,e)})}fetch(e,t,r,s){return this.sendRequest({method:e,request:t,args:r,url:s})}fetchBody(e,t,r,s){var n=combinePaths(this.replyBaseUrl,nameOf(t));return this.sendRequest({method:e,request:r,body:"string"==typeof r||isFormData(r)?r:JSON.stringify(r),url:appendQueryString(n,t),args:s,returns:t})}sendRequest(t){var e=this.createRequest(t);const r=t.returns||t.request;let n=null;const a=()=>{var e=this.createRequest(t);return this.urlFilter&&this.urlFilter(e.url),fetch(e.url,e).then(e=>this.createResponse(e,r)).catch(e=>this.handleError(n,e))};return this.urlFilter&&this.urlFilter(e.url),fetch(e.url,e).then(e=>{return n=e,this.createResponse(e,r)}).catch(e=>{if(401===e.status){if(this.enableAutoRefreshToken&&(this.refreshToken||this.useTokenCookie||null!=this.cookies["ss-reftok"])){const s=new GetAccessToken({refreshToken:this.refreshToken,useTokenCookie:!!this.useTokenCookie});var t=this.refreshTokenUri||this.createUrlFromDto(HttpMethods.Post,s),r=(this.useTokenCookie&&(this.bearerToken=null,this.headers.delete("Authorization")),this.createRequest({method:HttpMethods.Post,request:s,args:null,url:t}));return fetch(t,r).then(e=>this.createResponse(e,s).then(e=>(this.bearerToken=e?.accessToken||null,a()))).catch(e=>this.onAuthenticationRequired?this.onAuthenticationRequired().then(a).catch(e=>this.handleError(n,e,"RefreshTokenException")):this.handleError(n,e,"RefreshTokenException"))}if(this.onAuthenticationRequired)return this.onAuthenticationRequired().then(a)}return this.handleError(n,e)})}raiseError(e,t){return null!=this.exceptionFilter&&this.exceptionFilter(e,t),t}send(e,t,r){return this.sendRequest({method:getMethod(e),request:e,args:t,url:r})}sendVoid(e,t,r){return this.sendRequest({method:getMethod(e),request:e,args:t,url:r})}async api(e,t,r){try{var s=await this.fetch(getMethod(e,r),e,t);return new ApiResult({response:s})}catch(e){return new ApiResult({error:getResponseStatus(e)})}}async apiVoid(e,t,r){try{var s=await this.fetch(getMethod(e,r),e,t);return new ApiResult({response:s??new EmptyResponse})}catch(e){return new ApiResult({error:getResponseStatus(e)})}}async apiForm(e,t,r,s){try{var n=await this.fetchBody(getMethod(e,s),e,t,r);return new ApiResult({response:n})}catch(e){return new ApiResult({error:getResponseStatus(e)})}}async apiFormVoid(e,t,r,s){try{var n=await this.fetchBody(getMethod(e,s),e,t,r);return new ApiResult({response:n??new EmptyResponse})}catch(e){return new ApiResult({error:getResponseStatus(e)})}}}class JsonApiClient{static create(e="/",t){return new JsonServiceClient(e).apply(e=>{e.basePath="/api",e.headers=new Headers,e.enableAutoRefreshToken=!1,t&&t(e)})}}function getMethod(e,t){return t??("function"==typeof e.getMethod?e.getMethod():HttpMethods.Post)}function getResponseStatus(e){return e.responseStatus??e.ResponseStatus??(e.errorCode?e:e.message?createErrorStatus(e.message,e.errorCode):null)}class ApiResult{response;error;constructor(e){Object.assign(this,e)}get completed(){return null!=this.response||null!=this.error}get failed(){return null!=this.error?.errorCode||null!=this.error?.message}get succeeded(){return!this.failed&&null!=this.response}get errorMessage(){return this.error?.message}get errorCode(){return this.error?.errorCode}get errors(){return this.error?.errors??[]}get errorSummary(){return null!=this.error&&0==this.errors.length?this.errorMessage:null}fieldError(e){let t=e.toLowerCase();return this.errors?.find(e=>e.fieldName.toLowerCase()==t)}fieldErrorMessage(e){return this.fieldError(e)?.message}hasFieldError(e){return null!=this.fieldError(e)}showSummary(e=[]){return!!this.failed&&e.every(e=>!this.hasFieldError(e))}summaryMessage(e=[]){if(this.showSummary(e)){let t=e.map(e=>e.toLowerCase());return t.find(e=>-1==t.indexOf(e.toLowerCase()))??this.errorMessage}}addFieldError(e,t,r="Exception"){this.error||(this.error=new ResponseStatus);var s=this.fieldError(e);null!=s?(s.errorCode=r,s.message=t):this.error.errors.push(new ResponseError({fieldName:e,errorCode:r,message:t}))}}function createErrorStatus(e,t="Exception"){return new ResponseStatus({errorCode:t,message:e})}function createFieldError(e,t,r="Exception"){return new ResponseStatus({errors:[new ResponseError({fieldName:e,errorCode:r,message:t})]})}function isFormData(e){return"undefined"!=typeof window&&e instanceof FormData}function createErrorResponse(t,r,s=null){return apply(new ErrorResponse,e=>{null!=s&&(e.type=s),e.responseStatus=apply(new ResponseStatus,e=>{e.errorCode=t&&t.toString(),e.message=r})})}function createError(e,t,r){return new ErrorResponse({responseStatus:new ResponseStatus({errorCode:e,message:t,errors:r?[new ResponseError({errorCode:e,message:t,fieldName:r})]:void 0})})}function toCamelCase(e){return e&&e.charAt(0).toLowerCase()+e.substring(1)}function toPascalCase(e){return e&&e.charAt(0).toUpperCase()+e.substring(1)}function toKebabCase(e){return(e||"").replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function map(e,t){return null==e?null:t(e)}function camelCaseAny(e){if(!e||!(e instanceof Object)||Array.isArray(e))return e;var t,r,s,n={};for(t in e)e.hasOwnProperty(t)&&(r=toCamelCase(t),s=e[t],Array.isArray(s)?n[r]=s.map(e=>camelCaseAny(e)):s instanceof Object?n[r]=camelCaseAny(s):n[r]=s);return n}function sanitize(e){return sanitize&&(e.responseStatus||e.errors?e:camelCaseAny(e))}function nameOf(e){if(!e)return"null";if("function"==typeof e.getTypeName)return e.getTypeName();var t=e&&e.constructor;if(null==t)throw e+" doesn't have constructor";return t.name||(e=t.toString()).substring(9,e.indexOf("("))}function log(e,t="LOG"){return console.log(t,e),e}function css(e,t,r){var s="string"==typeof e?document.querySelectorAll(e):e;for(let e=0;e<s.length;e++){var n=s[e];null!=n&&null!=n.style&&(n.style[t]=r)}}function splitOnFirst(e,t){return e&&0<=(t=e.indexOf(t))?[e.substring(0,t),e.substring(t+1)]:[e]}function splitOnLast(e,t){return e&&0<=(t=e.lastIndexOf(t))?[e.substring(0,t),e.substring(t+1)]:[e]}function leftPart(e,t){return null==e?null:-1==(t=e.indexOf(t))?e:e.substring(0,t)}function rightPart(e,t){var r;return null==e?null:-1==(r=e.indexOf(t))?e:e.substring(r+t.length)}function lastLeftPart(e,t){return null==e?null:-1==(t=e.lastIndexOf(t))?e:e.substring(0,t)}function lastRightPart(e,t){var r;return null==e?null:-1==(r=e.lastIndexOf(t))?e:e.substring(r+t.length)}function chop(e,t=1){return t=Math.abs(t),e&&(t<e.length?e.substring(0,e.length-t):"")}function onlyProps(t,e){let r={};return e.forEach(e=>r[e]=t[e]),r}function splitCase(e){return"string"!=typeof e?e:e.replace(/([A-Z]|[0-9]+)/g," $1").replace(/_/g," ").trim()}function humanize(e){return!e||0<=e.indexOf(" ")?e:splitCase(toPascalCase(e))}const ucFirst=e=>e.charAt(0).toUpperCase()+e.substring(1),isUpper=e=>"A"<=e&&e<="Z",isLower=e=>"a"<=e&&e<="z",isDigit=e=>"0"<=e&&e<="9",upperOrDigit=e=>isUpper(e)||isDigit(e);function splitTitleCase(t){var r=[];if("string"!=typeof t)return r;let s=0;for(let e=0;e<t.length;e++){var n=t[e],a=0<e?t[e-1]:null,o=e+1<t.length?t[e+1]:null;!upperOrDigit(n)||upperOrDigit(a)&&upperOrDigit(o)||(r.push(t.substring(s,e)),s=e)}return r.push(t.substring(s,t.length)),r.filter(e=>!!e)}function humanify(e){return!e||0<=e.indexOf(" ")?e:ucFirst(splitTitleCase(e).join(" "))}function queryString(e){if(!e||-1===e.indexOf("?"))return{};var t=rightPart(e,"?").split("&"),r={};for(let e=0;e<t.length;++e){var s=t[e].split("=");r[s[0]]=1<s.length?decodeURIComponent(s[1].replace(/\+/g," ")):null}return r}function combinePaths(...e){let t=[],r,s;for(r=0,s=e.length;r<s;r++){var n=e[r];t=-1===n.indexOf("://")?t.concat(n.split("/")):t.concat(n.lastIndexOf("/")===n.length-1?n.substring(0,n.length-1):n)}var a=[];for(r=0,s=t.length;r<s;r++){var o=t[r];o&&"."!==o&&(".."===o?a.pop():a.push(o))}return""===t[0]&&a.unshift(""),a.join("/")||(a.length?"/":".")}function createPath(e,r){var t,s={};for(t in r)s[t.toLowerCase()]=t;var n,a=e.split("/");let o="";for(let t=0;t<a.length;t++){let e=a[t];"{"===(e=null==e?"":e)[0]&&"}"===e[e.length-1]&&(n=s[e.substring(1,e.length-1).toLowerCase()])&&(e=r[n],delete r[n]),0<o.length&&(o+="/"),o+=e}return o}function createUrl(e,t){return appendQueryString(createPath(e,t),t)}function appendQueryString(e,t){for(var r in t){var s;t.hasOwnProperty(r)&&void 0!==(s=t[r])&&"function"!=typeof s&&"symbol"!=typeof s&&(e=(e+=0<=e.indexOf("?")?"&":"?")+r+(null===s?"":"="+qsValue(s)))}return e}function setQueryString(e,t){return appendQueryString(leftPart(e,"?"),Object.assign(queryString(e),t))}function qsValue(e){return null==e?"":"undefined"!=typeof Uint8Array&&e instanceof Uint8Array?bytesToBase64(e):encodeURIComponent(e)||""}function bytesToBase64(n){let e=(3-n.length%3)%3,a="";for(let e,t=n.length,r=0,s=0;s<t;s++)e=s%3,r|=n[s]<<(16>>>e&24),2!=e&&n.length-s!=1||(a+=String.fromCharCode(uint6ToB64(r>>>18&63),uint6ToB64(r>>>12&63),uint6ToB64(r>>>6&63),uint6ToB64(63&r)),r=0);return 0==e?a:a.substring(0,a.length-e)+(1==e?"=":"==")}function uint6ToB64(e){return e<26?e+65:e<52?e+71:e<62?e-4:62===e?43:63===e?47:65}function _btoa(e){return"function"==typeof btoa?btoa(e):Buffer.from(e).toString("base64")}function _atob(e){return"function"==typeof atob?atob(e):Buffer.from(e,"base64").toString()}function stripQuotes(e){return e&&'"'==e[0]&&'"'==e[e.length]?e.slice(1,-1):e}function tryDecode(t){try{return decodeURIComponent(t)}catch(e){return t}}function parseCookie(e){if(!e)return null;let t=null;var r=e.split(/; */);for(let e=0;e<r.length;e++){var s,n=splitOnFirst(r[e],"="),a=n[0].trim(),n=1<n.length?tryDecode(stripQuotes(n[1].trim())):null;0==e?t={name:a,value:n,path:"/"}:"httponly"==(s=a.toLowerCase())?t.httpOnly=!0:"secure"==s?t.secure=!0:"expires"==s?(t.expires=new Date(n),"Invalid Date"===t.expires.toString()&&(t.expires=new Date(n.replace(/-/g," ")))):t[a]=n}return t}function normalizeKey(e){return e.toLowerCase().replace(/_/g,"")}function isArray(e){return"[object Array]"===Object.prototype.toString.call(e)}function normalize(t,r){if(isArray(t)){if(!r)return t;var s=[];for(let e=0;e<t.length;e++)s[e]=normalize(t[e],r);return s}if("object"!=typeof t)return t;var e,n={};for(e in t)n[normalizeKey(e)]=r?normalize(t[e],r):t[e];return n}function getField(e,t){return null==e||null==t?null:e[t]||e[Object.keys(e).filter(e=>normalizeKey(e)===normalizeKey(t))[0]||""]}function parseResponseStatus(t,r=null){try{var e=JSON.parse(t);return sanitize(e.ResponseStatus||e.responseStatus)}catch(e){return{message:r||e.message||e,__error:{error:e,json:t}}}}function toFormData(e){if("undefined"!=typeof window){var t,r=new FormData;for(t in e)r.append(t,e[t]);return r}}function toObject(e){const t={};if(e){if("object"!=typeof e)throw new Error("keys must be an Array of object keys");Array.prototype.slice.call(e).forEach(e=>{this[e]&&(t[e]=this[e])})}return t}function errorResponseSummary(){var e=this.responseStatus||this.ResponseStatus;return null==e||(e=e.ErrorCode?sanitize(e):e).errors&&0!=e.errors.length?void 0:e.message||e.errorCode}function errorResponseExcept(e){var t=this.responseStatus||this.ResponseStatus;if(null!=t){t=t.ErrorCode?sanitize(t):t,e=toVarNames(e);if(e&&null!=t.errors&&0!=t.errors.length){var r,s,n=e.map(e=>(e||"").toLowerCase());for(r of t.errors)if(-1!==n.indexOf((r.fieldName||"").toLowerCase()))return;for(s of t.errors)if(-1===n.indexOf((s.fieldName||"").toLowerCase()))return s.message||s.errorCode}return t.message||t.errorCode||void 0}}function errorResponse(t){var e;return null==t?errorResponseSummary.call(this):null!=(e=this.responseStatus||this.ResponseStatus)&&null!=(e=e.ErrorCode?sanitize(e):e).errors&&0!=e.errors.length&&(e=e.errors.find(e=>(e.fieldName||"").toLowerCase()==t.toLowerCase()))?e.message||e.errorCode:void 0}function isDate(e){return e&&"[object Date]"===Object.prototype.toString.call(e)&&!isNaN(e)}function toDate(e){return e?isDate(e)?e:"/"==e[0]?new Date(parseFloat(/Date\(([^)]+)\)/.exec(e)[1])):new Date(e):null}function toDateFmt(e){return dateFmt(toDate(e))}function padInt(e){return e<10?"0"+e:e}function dateFmt(e=new Date){return e.getFullYear()+"/"+padInt(e.getMonth()+1)+"/"+padInt(e.getDate())}function dateFmtHM(e=new Date){return e.getFullYear()+"/"+padInt(e.getMonth()+1)+"/"+padInt(e.getDate())+" "+padInt(e.getHours())+":"+padInt(e.getMinutes())}function timeFmt12(e=new Date){return padInt((e.getHours()+24)%12||12)+":"+padInt(e.getMinutes())+":"+padInt(e.getSeconds())+" "+(12<e.getHours()?"PM":"AM")}function toLocalISOString(e=new Date){return`${e.getFullYear()}-${padInt(e.getMonth()+1)}-${padInt(e.getDate())}T${padInt(e.getHours())}:${padInt(e.getMinutes())}:`+padInt(e.getSeconds())}function toTime(e){return"string"==typeof e&&0<=e.indexOf(":")?e:msToTime(e instanceof Date?e.getTime():"string"==typeof e?1e3*fromXsdDuration(e):e)}function msToTime(e){var t=e%1e3,r=(e=(e-t)/1e3)%60,s=(e=(e-r)/60)%60,e=padInt((e-s)/60)+":"+padInt(s)+":"+padInt(r);return 0<t?e+"."+padStart(""+t,3,"0").substring(0,3):e}function padStart(e,t,r){if((t=Math.floor(t)||0)<e.length)return e;r=r?String(r):" ";let s="";var n=t-e.length;let a=0;for(;s.length<n;)r[a]||(a=0),s+=r[a],a++;return s+e.slice(0)}function bsAlert(e){return'<div class="alert alert-danger">'+e+"</div>"}function attr(e,t){return e.getAttribute(t)}function sattr(e,t,r){return e.setAttribute(t,r)}function rattr(e,t){return e.removeAttribute(t)}function createElement(e,t){var r={className:"class",htmlFor:"for"},s=document.createElement(e);if(t?.attrs)for(const n in t.attrs)sattr(s,r[n]||n,t.attrs[n]);return t?.events&&on(s,t.events),t&&t.insertAfter&&t.insertAfter.parentNode.insertBefore(s,t.insertAfter.nextSibling),s}function showInvalidInputs(){var e,t,r,s=attr(this,"data-invalid");s&&(e=(r="checkbox"===this.type||"radio"===this.type||hasClass(this,"form-check"))?parent(this,"form-check"):null,r?addClass(e||this.parentElement,"is-invalid form-control"):addClass(this,"is-invalid"),(null!=(r=!(t=this.nextElementSibling)||attr(t,"for")!==this.id&&"SMALL"!==t.tagName?this:r?e||t.parentElement:t)&&r.nextElementSibling&&hasClass(r.nextElementSibling,"invalid-feedback")?r.nextElementSibling:createElement("div",{insertAfter:r,attrs:{className:"invalid-feedback"}})).innerHTML=s)}function parent(e,t){for(;null!=e&&!hasClass(e,t);)e=e.parentElement;return e}function hasClass(e,t){return!!e&&(e.classList?e.classList.contains(t):-1<(" "+e.className+" ").replace(/[\n\t\r]/g," ").indexOf(" "+t+" "))}function addClass(e,t){return e?e.classList?e.classList.add(...t.split(" ")):hasClass(e,t)?null:e.className=(e.className+" "+t).trim():null}function remClass(e,t){return e?e.classList?e.classList.remove(t):hasClass(e,t)?e.className=e.className.replace(/(\s|^)someclass(\s|$)/," "):null:null}function isElement(e){return"undefined"!=typeof window&&(e instanceof window.Element||e==window.document)}function $1(e,t){return"string"==typeof e?(t||document).querySelector(e):e||null}function $$(e,t){return"string"==typeof e?Array.from((t||"undefined"!=typeof document?document:null)?.querySelectorAll(e)??[]):Array.isArray(e)?e.flatMap(e=>$$(e,t)):[e]}function on(e,s){return $$(e).forEach(r=>{Object.keys(s).forEach(function(e){var t=s[e];"string"==typeof e&&"function"==typeof t&&r.addEventListener(e,s[e]=t.bind(r))})}),s}function addScript(r){return new Promise((e,t)=>{document.body.appendChild(createElement("script",{attrs:{src:r},events:{load:e,error:t}}))})}function delaySet(e,t){t=t&&t.duration||300;let r=setTimeout(()=>e(!0),t);return()=>{clearTimeout(r),e(!1)}}function bootstrap(e){var t=(e||document).querySelectorAll("[data-invalid]");for(let e=0;e<t.length;e++)showInvalidInputs.call(t[e])}function handleEvent(a,e=document,o){e.addEventListener(o,function(e){var t,r="data-"+o;let s=e.target,n=attr(s,r);n||(t=s.closest(`[${r}]`))&&(n=attr(t,r),s=t),n&&(0<=(r=n.indexOf(":"))?(t=n.substring(0,r),r=n.substring(r+1),(t=a[t])&&t.apply(s,r.split(","))):(t=a[n])&&t.apply(s,[].slice.call(arguments)))})}function bindHandlers(t,r=document,e=null){e&&e.events?e.events.forEach(e=>handleEvent(t,r,e)):["click","dblclick","change","focus","blur","focusin","focusout","select","keydown","keypress","keyup","hover","toggle","input"].forEach(e=>{r.querySelector(`[data-${e}]`)&&handleEvent(t,r,e)})}function bootstrapForm(t,r){t&&(r.model&&populateForm(t,r.model),t.onsubmit=function(e){return e.preventDefault(),r.type="bootstrap-v4",ajaxSubmit(t,r)})}function applyErrors(e,r,t){var s={overrideMessages:!1,messages:{NotEmpty:"Required",NotNull:"Required",Email:"Invalid email",AlreadyExists:"Already exists"},errorFilter:function(e,t,r){return this.overrideMessages?this.messages[t]||e||splitCase(t):e||splitCase(t)}};if(clearErrors(e),r){r=sanitize(r),addClass(e,"has-errors");const h=t&&"bootstrap-v4"===t.type;var s={...s,...t},o=(t.messages&&(s.overrideMessages=!0),s.errorFilter.bind(s)),t=r.errors;if(t&&t.length){let n={},a={};$$("input,textarea,select,button").forEach(e=>{var t=e.previousElementSibling,r=e.nextElementSibling,s=("radio"===e.type||"checkbox"===e.type?null:e.id)||attr(e,"name");s&&(s=s.toLowerCase(),n[s]=e,h||(hasClass(t,"help-inline")||hasClass(t,"help-block")?a[s]=t:(hasClass(r,"help-inline")||hasClass(r,"help-block"))&&(a[s]=r)))}),$$(".help-inline[data-for],.help-block[data-for]").forEach(e=>{var t=attr(e,"data-for").toLowerCase();a[t]=e});for(var i of t){var l=(i.fieldName||"").toLowerCase(),u=n[l],c=(u&&(h?("radio"!==(c=attr(u,"type"))&&"checkbox"!==c&&addClass(u,"is-invalid"),sattr(u,"data-invalid",o(i.message,i.errorCode,"field"))):(addClass(u,"error"),addClass(u.parentElement,"has-error"))),a[l]);c&&(addClass(c,"error"),c.innerHTML=o(i.message,i.errorCode,"field"),c.style.display="block")}$$("[data-validation-summary]").forEach(e=>{var t=attr(e,"data-validation-summary").split(","),t=errorResponseExcept.call(r,t);t&&(e.innerHTML=bsAlert(t))})}else{const n=o(r.message||splitCase(r.errorCode),r.errorCode,"summary");h?$$("[data-validation-summary]").forEach(e=>e.innerHTML="<"===n[0]?n:bsAlert(n)):$$(".error-summary").forEach(e=>{e.innerHTML=n(e).style.display="block"})}return e}}function clearErrors(e){remClass(e,"has-errors"),$$(".error-summary").forEach(e=>{e.innerHTML="",e.style.display="none"}),$$("[data-validation-summary]").forEach(e=>{e.innerHTML=""}),$$(".error").forEach(e=>remClass(e,"error")),$$(".form-check.is-invalid [data-invalid]").forEach(e=>{rattr(e,"data-invalid")}),$$(".form-check.is-invalid").forEach(e=>remClass(e,"form-control")),$$(".is-invalid").forEach(e=>{remClass(e,"is-invalid"),rattr(e,"data-invalid")}),$$(".is-valid").forEach(e=>remClass(e,"is-valid"))}function toVarNames(e){return e?isArray(e)?e:e.split(",").map(e=>e.trim()):[]}function formSubmit(e={}){const r=this;var t=attr(r,"enctype")||Types.UrlEncoded;if(t==Types.MultiPart&&void 0===window.FormData)throw new Error(`FormData Type is needed to send '${Types.MultiPart}' Content Types`);let s;try{s=serializeForm(r,t)}catch(e){throw new Error(""+(e.message||e))}var n=new Headers,t=(n.set("Accept",Types.Json),n.set("Content-Type",t),{method:attr(r,"method")||"POST",credentials:"include",mode:"cors",headers:n,body:s});return e.requestFilter&&e.requestFilter(t),fetch(new Request(e.url||attr(r,"action"),t)).catch(e=>{throw new Error(`Network is unreachable (${e.message||e})`)}).then(t=>(e.responseFilter&&e.responseFilter(t),t.ok?(handleHeaderBehaviors(r,t),fromResponse(t)):t.json().catch(e=>{throw new Error("The request failed with "+(t.statusText||t.status))}).then(e=>{throw Object.assign(new ErrorResponse,sanitize(e))})))}function handleHeaderBehaviors(e,t){var r=t.headers.get("X-Location"),r=(r&&(location.href=r),t.headers.get("X-Trigger"));r&&triggerEvent(e,0<=(t=r.indexOf(":"))?r.substring(0,t):r,(e=0<=t?r.substring(t+1):null)?[e]:[])}function ajaxSubmit(s,n={}){const a="bootstrap-v4"===n.type;clearErrors(s);try{if(n.validate&&!1===n.validate.call(s))return!1}catch(e){return!1}addClass(s,"loading");const e=null==n.onSubmitDisable?"[type=submit]":n.onSubmitDisable,t=null!=e&&""!=e;function r(e,t=null){var r;t?applyErrors(s,t.ResponseStatus||t.responseStatus,{...n}):e&&(addClass(s,"has-errors"),(r=$$(".error-summary")[0])&&(r.innerHTML=e),a)&&(r=$$("[data-validation-summary]")[0])&&(r.innerHTML=bsAlert(e)),n.error&&n.error.call(s,t),a&&$$("[data-invalid]").forEach(e=>showInvalidInputs.call(e))}return t&&$$(e).forEach(e=>{sattr(e,"disabled","disabled")}),(n.submit||formSubmit).call(s,n).then(e=>(n.success&&n.success.call(s,e),!1)).catch(e=>{e.responseStatus?r(null,e):r(""+(e.message||e),null)}).finally(()=>{remClass(s,"loading"),t&&$$(e).forEach(e=>{rattr(e,"disabled")}),n.complete&&n.complete.call(s)})}function fromResponse(e){var t,r=e.headers.get("content-type"),r=r&&-1!==r.indexOf(Types.Json);return!r&&("0"===(t=e.headers.get("content-length"))||null==t&&!r)?null:e.json()}function serializeForm(e,t=null){return t===Types.MultiPart?new FormData(e):t==Types.Json?JSON.stringify(serializeToObject(e)):serializeToUrlEncoded(e)}function formEntries(e,r,s){var n,a=e,o=a.elements.length;for(let t=0;t<o;t++)if((n=a.elements[t]).name&&!n.disabled&&"file"!=n.type&&"reset"!=n.type&&"submit"!=n.type&&"button"!=n.type)if("select-multiple"==n.type)for(let e=a.elements[t].options.length-1;0<=e;e--)n.options[e].selected&&s(r,n.name,n.options[e].value);else("checkbox"!=n.type&&"radio"!=n.type||n.checked)&&s(r,n.name,n.value);return r}function serializeToObject(e){return formEntries(e,{},(e,t,r)=>e[t]=r)}function serializeToUrlEncoded(e){return formEntries(e,[],(e,t,r)=>"string"==typeof r?e.push(encodeURIComponent(t)+"="+encodeURIComponent(r)):null).join("&").replace(/%20/g,"+")}function serializeToFormData(e){return formEntries(e,new FormData,(e,t,r)=>e.append(t,r))}function sanitizeFormData(e){for(var[t,r]of e)"object"==typeof r&&0===r.size&&e.delete(t);return e}function triggerEvent(e,t,r=null){var s;document.createEvent?((s=document.createEvent("click"==t||t.startsWith("mouse")?"MouseEvents":"HTMLEvents")).initEvent(t,!0,!0),s.data=r,e.dispatchEvent(s)):(r=document.createEventObject(),e.fireEvent("on"+t,r))}function populateForm(r,s){if(s){var n;for(let e in s){let t=s[e];void 0!==t&&null!==t||(t="");var a=r.elements.namedItem(e)||r.elements.namedItem((n=e)&&(n[0]===n[0].toUpperCase()?toCamelCase(n):n[0]===n[0].toLowerCase()?toPascalCase(n):n)),o=a;if(a)switch(o.type||a[0].type){case"radio":case"checkbox":var i=a.length;for(let e=0;e<i;e++)a[e].checked=-1<t.indexOf(a[e].value);break;case"select-multiple":var l=isArray(t)?t:[t],u=a;for(let e=0;e<u.options.length;e++)u.options[e].selected=-1<l.indexOf(u.options[e].value);break;case"select":case"select-one":o.value=t.toString()||t;break;case"date":var c=toDate(t);c&&(o.value=c.toISOString().split("T")[0]);break;default:o.value=t}}}}function trimEnd(e,t){let r=e.length;for(;0<r&&e[r-1]===t;)--r;return r<e.length?e.substring(0,r):e}function safeVarName(e){return e.replace(/[\W]+/g,"")}function pick(e,t){var r={};for(const s in e)e.hasOwnProperty(s)&&0<=t.indexOf(s)&&(r[s]=e[s]);return r}function omit(e,t){var r={};for(const s in e)e.hasOwnProperty(s)&&t.indexOf(s)<0&&(r[s]=e[s]);return r}function omitEmpty(e){var t={};for(const s in e){var r=e[s];null!=r&&""!==r&&(t[s]=r)}return t}function apply(e,t){return t(e),e}function each(e,r,t){return e.reduce((e,t)=>(r(e,t),e),t||{})}function resolve(e,t){e="function"==typeof e?e():e;return"function"==typeof t?t(e):e}function mapGet(e,r){if(!e||!r)return null;var s=e[r];if(s)return s;if("object"!=typeof e)return null;{let t=r.toLowerCase();s=Object.keys(e).find(e=>e.toLowerCase()===t);return s?e[s]:null}}function apiValue(e){return null==e?"":"string"==typeof e?"/Date("===e.substring(0,6)?toDate(e):e.trim():e}function apiValueFmt(e){e=apiValue(e);return(null!=e?isDate(e)?dateFmt(e):e:null)||""}function activeClassNav(e,t){return null!=e.href&&(e.exact||t.length<=1?trimEnd(t,"/").toLowerCase()===trimEnd(e.href,"/").toLowerCase():trimEnd(t,"/").toLowerCase().startsWith(trimEnd(e.href,"/").toLowerCase()))?"active":null}function activeClass(e,t,r){return null!=e&&(r||t.length<=1?trimEnd(t,"/").toLowerCase()===trimEnd(e,"/").toLowerCase():trimEnd(t,"/").toLowerCase().startsWith(trimEnd(e,"/").toLowerCase()))?"active":null}function bootstrapColors(){return["primary","secondary","success","info","warning","danger","light","dark"]}JsonServiceClient.toBase64=e=>_btoa(encodeURIComponent(e).replace(/%([0-9A-F]{2})/g,(e,t)=>String.fromCharCode(new Number("0x"+t).valueOf()))),"undefined"!=typeof window&&void 0!==window.Element&&(Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){let t=this;do{if(t.matches(e))return t}while(null!==(t=t.parentElement||t.parentNode)&&1===t.nodeType);return null})),function(e){e.MultiPart="multipart/form-data",e.UrlEncoded="application/x-www-form-urlencoded",e.Json="application/json"}(Types=Types||{});const BootstrapColors=bootstrapColors();function btnColorClass(e){for(const t of bootstrapColors()){if(e[t])return"btn-"+t;if(e["outline-"+t])return"btn-outline-"+t}return null}function bootstrapSizes(){return["xs","sm","md","lg"]}const BootstrapSizes=bootstrapSizes();function btnSizeClass(e){for(const t of bootstrapSizes())if(e[t])return"btn-"+t;return null}function btnClasses(e){var t=[],r=btnColorClass(e),r=(r&&t.push(r),btnSizeClass(e));return r&&t.push(r),e.block&&t.push("btn-block"),t}class NavDefaults{static navClass="nav";static navItemClass="nav-item";static navLinkClass="nav-link";static childNavItemClass="nav-item dropdown";static childNavLinkClass="nav-link dropdown-toggle";static childNavMenuClass="dropdown-menu";static childNavMenuItemClass="dropdown-item";static create(){return new NavOptions}static forNav(e){return e||NavDefaults.create()}static overrideDefaults(e,t){return null==e?t:((e=Object.assign({},e)).navClass===NavDefaults.navClass&&null!=t.navClass&&(e.navClass=t.navClass),e.navItemClass===NavDefaults.navItemClass&&null!=t.navItemClass&&(e.navItemClass=t.navItemClass),e.navLinkClass===NavDefaults.navLinkClass&&null!=t.navLinkClass&&(e.navLinkClass=t.navLinkClass),e.childNavItemClass===NavDefaults.childNavItemClass&&null!=t.childNavItemClass&&(e.childNavItemClass=t.childNavItemClass),e.childNavLinkClass===NavDefaults.childNavLinkClass&&null!=t.childNavLinkClass&&(e.childNavLinkClass=t.childNavLinkClass),e.childNavMenuClass===NavDefaults.childNavMenuClass&&null!=t.childNavMenuClass&&(e.childNavMenuClass=t.childNavMenuClass),e.childNavMenuItemClass===NavDefaults.childNavMenuItemClass&&null!=t.childNavMenuItemClass&&(e.childNavMenuItemClass=t.childNavMenuItemClass),e)}static showNav(e,t){return null==t||0===t.length?null==e.show:!(null!=e.show&&t.indexOf(e.show)<0||null!=e.hide&&0<=t.indexOf(e.hide))}}class NavLinkDefaults{static forNavLink(e){return e||NavDefaults.create()}}class NavbarDefaults{static navClass="navbar-nav";static create(){return new NavOptions({navClass:NavbarDefaults.navClass})}static forNavbar(e){return NavDefaults.overrideDefaults(e,NavbarDefaults.create())}}class NavButtonGroupDefaults{static navClass="btn-group";static navItemClass="btn btn-primary";static create(){return new NavOptions({navClass:NavButtonGroupDefaults.navClass,navItemClass:NavButtonGroupDefaults.navItemClass})}static forNavButtonGroup(e){return NavDefaults.overrideDefaults(e,NavButtonGroupDefaults.create())}}class LinkButtonDefaults{static navItemClass="btn";static create(){return new NavOptions({navItemClass:LinkButtonDefaults.navItemClass})}static forLinkButton(e){return NavDefaults.overrideDefaults(e||null,LinkButtonDefaults.create())}}class UserAttributes{static fromSession(e){var t=[];return null!=e&&(t.push("auth"),e.roles&&t.push(...e.roles.map(e=>"role:"+e)),e.permissions)&&t.push(...e.permissions.map(e=>"perm:"+e)),t}}class NavOptions{static fromSession(e,t){return(t=t||new NavOptions).attributes=UserAttributes.fromSession(e),t}attributes;activePath;baseHref;navClass;navItemClass;navLinkClass;childNavItemClass;childNavLinkClass;childNavMenuClass;childNavMenuItemClass;constructor(e){this.attributes=[],this.navClass=NavDefaults.navClass,this.navItemClass=NavDefaults.navItemClass,this.navLinkClass=NavDefaults.navLinkClass,this.childNavItemClass=NavDefaults.childNavItemClass,this.childNavLinkClass=NavDefaults.childNavLinkClass,this.childNavMenuClass=NavDefaults.childNavMenuClass,this.childNavMenuItemClass=NavDefaults.childNavMenuItemClass,Object.assign(this,e)}}function classNames(...t){var r=[];for(let e=0;e<t.length;e++){var s=t[e];if(s){var n=typeof s;if("string"==n||"number"==n)r.push(s);else if(Array.isArray(s)&&s.length){var a=classNames.apply(null,s);a&&r.push(a)}else if("object"==n)for(var o of Object.keys(s))s[o]&&r.push(o)}}return r.join(" ")}function fromXsdDuration(e){let t=0,r=0,s=0,n=0,a=0;var e=splitOnFirst(e.substring(1),"T"),o=2==e.length,i=splitOnFirst(e[0],"D"),i=(2==i.length&&(t=parseInt(i[0],10)||0),o&&(2==(i=splitOnFirst(e[1],"H")).length&&(r=parseInt(i[0],10)||0),2==(o=splitOnFirst(i[i.length-1],"M")).length&&(s=parseInt(o[0],10)||0),2==(e=splitOnFirst(o[o.length-1],"S")).length&&(a=parseFloat(e[0])),n=0|a,a-=n),24*t*60*60+60*r*60+60*s+n);return i+a}function timeFmt(e,t){var r=0|e,s=r,n=60<=s?s%60:s,a=60<=(s/=60)?s%60:s,o=24<=(s/=60)?s%24:s,s=s/24,e=e-r+n;let i=t?"P":"";return t?(0<(0|s)&&(i+=`${0|s}D`),(0==s||0<o+a+n+e)&&(i+="T",0<(0|o)&&(i+=`${0|o}H`),0<(0|a)&&(i+=`${0|a}M`),0<e?(r=trimEnd(trimEnd(r=e.toFixed(7),"0"),"."),i+=r+"S"):2==i.length&&(i+="0S"))):(0<(0|s)&&(i+=`${0|s}:`),i+=`${padInt(0|o)}:${padInt(0|a)}:`,0<e?(t=trimEnd(trimEnd(t=e.toFixed(7),"0"),"."),i+=10<=e?""+t:"0"+t):i+="00"),i}function toXsdDuration(e){return timeFmt(e,!0)}function toTimeSpanFmt(e){return timeFmt(e,!1)}function flatMap(r,e){return e.reduce((e,t)=>e.concat(r(t)),[])}function uniq(e){return Array.from(new Set(e)).sort((e,t)=>t<e?1:-1)}function enc(e){return null==e?null:"string"==typeof e?e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/'/g,"&#39;").replace(/"/g,"&#34;"):""+e}function htmlAttrs(t){let r=[];return Object.keys(t).forEach(e=>{0<r.length&&r.push(" "),r.push(e),r.push('="'),r.push(enc(t[e])),r.push('"')}),r.join("")}function indexOfAny(r,s){for(let e=0,t=s.length;e<t;e++){var n=r.indexOf(s[e]);if(0<=n)return n}return-1}function isNullOrEmpty(e){return null==e||""===e}function fromDateTime(e){return toDate(e)}function toDateTime(e){return`/Date(${e.getTime()})/`}function fromTimeSpan(e){return e}function toTimeSpan(e){return e}function fromGuid(e){return e}function toGuid(e){return e}function fromByteArray(e){var t=_atob(e),r=t.length,s=new Uint8Array(r);for(let e=0;e<r;e++)s[e]=t.charCodeAt(e);return s}function toByteArray(e){return _btoa(String.fromCharCode.apply(null,e))}function toBase64String(e){return JsonServiceClient.toBase64(e)}class StringBuffer{buffer_="";constructor(e){null!=e&&this.append.apply(this,arguments)}set(e){this.buffer_=""+e}append(e,t){if(this.buffer_+=String(e),null!=t)for(let e=1;e<arguments.length;e++)this.buffer_+=arguments[e];return this}clear(){this.buffer_=""}getLength(){return this.buffer_.length}toString(){return this.buffer_}}class JSV{static ESCAPE_CHARS=['"',":",",","{","}","[","]","\r","\n"];static encodeString(e){return null==e?null:""===e?'""':0<=indexOfAny(e=e.indexOf('"')?e.replace(/"/g,'""'):e,JSV.ESCAPE_CHARS)?'"'+e+'"':e}static encodeArray(r){var s,n=new StringBuffer;for(let e=0,t=r.length;e<t;e++)isNullOrEmpty(s=r[e])||"function"==typeof s||(0<n.getLength()&&n.append(","),n.append(JSV.stringify(s)));return`[${n.toString()}]`}static encodeObject(e){var t,r,s=new StringBuffer;for(r in e)t=e[r],e.hasOwnProperty(r)&&!isNullOrEmpty(t)&&"function"!=typeof t&&(0<s.getLength()&&s.append(","),s.append(JSV.encodeString(r)),s.append(":"),s.append(JSV.stringify(t)));return`{${s.toString()}}`}static stringify(e){if(null==e)return null;var t,r=typeof e;if("function"==r||"symbol"==r)return null;if("object"==r)return 0<=(t=e.constructor.toString().toLowerCase()).indexOf("string")?JSV.encodeString(e):0<=t.indexOf("boolean")?e?"true":"false":0<=t.indexOf("number")?e:0<=t.indexOf("date")?JSV.encodeString(toLocalISOString(e)):0<=t.indexOf("array")?JSV.encodeArray(e):JSV.encodeObject(e);switch(r){case"string":return JSV.encodeString(e);case"boolean":return e?"true":"false";default:return e}}}function uniqueKeys(e){let t=[];return e.forEach(e=>Object.keys(e).forEach(e=>{-1===t.indexOf(e)&&t.push(e)})),t}function alignLeft(e,t,r=" "){return t<0?"":t+1-e.length<=0?e:r+e+r.repeat(t+1-e.length)}function alignCenter(e,t,r=" "){var s,n;return t<0?"":(n=(e=e||"").length,s=Math.floor(t/2-n/2),n=Math.abs(n%2-t%2),r.repeat(s+1)+e+r.repeat(s+1+n))}function alignRight(e,t,r=" "){return t<0?"":t+1-e.length<=0?e:r.repeat(t+1-e.length)+e+r}function alignAuto(e,t,r=" "){var s=""+e;return s.length<=t?("number"==typeof e?alignRight:alignLeft)(s,t,r):s}function EventBus(){var{subscribe:e,publish:t}=createBus();this.subscribe=e,this.publish=t}function createBus(){let s={};return{subscribe:function(e,t){let r=Symbol("id");return s[e]||(s[e]={}),s[e][r]=t,{unsubscribe:function(){delete s[e][r],0===Object.getOwnPropertySymbols(s[e]).length&&delete s[e]}}},publish:function(t,r){s[t]&&Object.getOwnPropertySymbols(s[t]).forEach(e=>s[t][e](r))}}}class Inspect{static async vars(n){if("object"==typeof process){let s=process.env.INSPECT_VARS;if(s&&n){const e=e=>"node:"+e;await import(e("fs")).then(async r=>{await import(e("path")).then(e=>{var t=s.replace(/\\/g,"/");0<=t.indexOf("/")&&(e=e.dirname(t),r.existsSync(e)||r.mkdirSync(e)),r.writeFileSync(t,JSON.stringify(n))})})}}}static dump(e){return JSON.stringify(e,null,4).replace(/"/g,"")}static printDump(e){console.log(Inspect.dump(e))}static dumpTable(e){let s=e,n=uniqueKeys(s),a={};n.forEach(t=>{let r=t.length;s.forEach(e=>{var e=e[t];null!=e&&(e=(""+e).length)>r&&(r=e)}),a[t]=r});e=Object.keys(a).length,e=Object.keys(a).map(e=>a[e]).reduce((e,t)=>e+t,0)+2*e+(e+1);let o=[],t=(o.push(`+${"-".repeat(e-2)}+`),"|");return n.forEach(e=>t+=alignCenter(e,a[e])+"|"),o.push(t),o.push(`|${"-".repeat(e-2)}|`),s.forEach(t=>{let r="|";n.forEach(e=>r+=alignAuto(t[e],a[e])+"|"),o.push(r)}),o.push(`+${"-".repeat(e-2)}+`),o.join("\n")}static printDumpTable(e){console.log(Inspect.dumpTable(e))}}export{ResponseStatus,ResponseError,ErrorResponse,EmptyResponse,NavItem,GetNavItems,GetNavItemsResponse,MetadataTypesConfig,MetadataRoute,MetadataOperationType,MetadataTypes,MetadataTypeName,MetadataDataContract,MetadataDataMember,MetadataAttribute,MetadataPropertyType,MetadataType,NewInstanceResolver,SingletonInstanceResolver,ReadyState,ServerEventsClient,getAllMembers,ServerEventReceiver,UpdateEventSubscriber,UpdateEventSubscriberResponse,GetEventSubscribers,ServerEventUser,HttpMethods,GetAccessTokenResponse,JsonServiceClient,JsonApiClient,getMethod,getResponseStatus,ApiResult,createErrorStatus,createFieldError,isFormData,createError,toCamelCase,toPascalCase,toKebabCase,map,camelCaseAny,sanitize,nameOf,css,splitOnFirst,splitOnLast,leftPart,rightPart,lastLeftPart,lastRightPart,chop,onlyProps,humanize,ucFirst,isUpper,isLower,isDigit,splitTitleCase,humanify,queryString,combinePaths,createPath,createUrl,appendQueryString,setQueryString,bytesToBase64,stripQuotes,tryDecode,parseCookie,normalizeKey,normalize,getField,parseResponseStatus,toFormData,toObject,errorResponseSummary,errorResponseExcept,errorResponse,isDate,toDate,toDateFmt,padInt,dateFmt,dateFmtHM,timeFmt12,toLocalISOString,toTime,msToTime,padStart,createElement,isElement,$1,$$,on,addScript,delaySet,bootstrap,bindHandlers,bootstrapForm,toVarNames,formSubmit,ajaxSubmit,serializeForm,serializeToObject,serializeToUrlEncoded,serializeToFormData,sanitizeFormData,triggerEvent,populateForm,trimEnd,safeVarName,pick,omit,omitEmpty,apply,each,resolve,mapGet,apiValue,apiValueFmt,activeClassNav,activeClass,BootstrapColors,btnColorClass,BootstrapSizes,btnSizeClass,btnClasses,NavDefaults,NavLinkDefaults,NavbarDefaults,NavButtonGroupDefaults,LinkButtonDefaults,UserAttributes,NavOptions,classNames,fromXsdDuration,toXsdDuration,toTimeSpanFmt,flatMap,uniq,enc,htmlAttrs,indexOfAny,isNullOrEmpty,fromDateTime,toDateTime,fromTimeSpan,toTimeSpan,fromGuid,toGuid,fromByteArray,toByteArray,toBase64String,StringBuffer,JSV,uniqueKeys,alignLeft,alignCenter,alignRight,alignAuto,EventBus,createBus,Inspect};
\ No newline at end of file
diff --git a/MyApp/wwwroot/lib/mjs/servicestack-client.mjs b/MyApp/wwwroot/lib/mjs/servicestack-client.mjs
new file mode 100644
index 0000000..026e037
--- /dev/null
+++ b/MyApp/wwwroot/lib/mjs/servicestack-client.mjs
@@ -0,0 +1,2894 @@
+export class ResponseStatus {
+    constructor(init) { Object.assign(this, init); }
+    errorCode;
+    message;
+    stackTrace;
+    errors;
+    meta;
+}
+export class ResponseError {
+    constructor(init) { Object.assign(this, init); }
+    errorCode;
+    fieldName;
+    message;
+    meta;
+}
+export class ErrorResponse {
+    constructor(init) { Object.assign(this, init); }
+    type;
+    responseStatus;
+}
+export class EmptyResponse {
+    constructor(init) { Object.assign(this, init); }
+    responseStatus;
+}
+export class NavItem {
+    label;
+    href;
+    exact;
+    id;
+    className;
+    iconClass;
+    show;
+    hide;
+    children;
+    meta;
+    constructor(init) { Object.assign(this, init); }
+}
+export class GetNavItems {
+    constructor(init) { Object.assign(this, init); }
+    createResponse() { return new GetNavItemsResponse(); }
+    getTypeName() { return 'GetNavItems'; }
+    getMethod() { return 'GET'; }
+}
+export class GetNavItemsResponse {
+    baseUrl;
+    results;
+    navItemsMap;
+    meta;
+    responseStatus;
+    constructor(init) { Object.assign(this, init); }
+}
+export class MetadataTypesConfig {
+    baseUrl;
+    defaultNamespaces;
+    defaultImports;
+    includeTypes;
+    excludeTypes;
+    treatTypesAsStrings;
+    globalNamespace;
+    ignoreTypes;
+    exportTypes;
+    exportAttributes;
+    ignoreTypesInNamespaces;
+    constructor(init) { Object.assign(this, init); }
+}
+export class MetadataRoute {
+    path;
+    verbs;
+    notes;
+    summary;
+    constructor(init) { Object.assign(this, init); }
+}
+export class MetadataOperationType {
+    request;
+    response;
+    actions;
+    returnsVoid;
+    returnType;
+    routes;
+    dataModel;
+    viewModel;
+    requiresAuth;
+    requiredRoles;
+    requiresAnyRole;
+    requiredPermissions;
+    requiresAnyPermission;
+    tags;
+    constructor(init) { Object.assign(this, init); }
+}
+export class MetadataTypes {
+    config;
+    namespaces;
+    types;
+    operations;
+    constructor(init) { Object.assign(this, init); }
+}
+export class MetadataTypeName {
+    name;
+    namespace;
+    genericArgs;
+    constructor(init) { Object.assign(this, init); }
+}
+export class MetadataDataContract {
+    name;
+    namespace;
+    constructor(init) { Object.assign(this, init); }
+}
+export class MetadataDataMember {
+    name;
+    order;
+    isRequired;
+    emitDefaultValue;
+    constructor(init) { Object.assign(this, init); }
+}
+export class MetadataAttribute {
+    name;
+    constructorArgs;
+    args;
+    constructor(init) { Object.assign(this, init); }
+}
+export class MetadataPropertyType {
+    name;
+    type;
+    isValueType;
+    isSystemType;
+    isEnum;
+    isPrimaryKey;
+    typeNamespace;
+    genericArgs;
+    value;
+    description;
+    dataMember;
+    readOnly;
+    paramType;
+    displayType;
+    isRequired;
+    allowableValues;
+    allowableMin;
+    allowableMax;
+    attributes;
+    constructor(init) { Object.assign(this, init); }
+}
+export class MetadataType {
+    name;
+    namespace;
+    genericArgs;
+    inherits;
+    implements;
+    displayType;
+    description;
+    isNested;
+    isEnum;
+    isEnumInt;
+    isInterface;
+    isAbstract;
+    dataContract;
+    properties;
+    attributes;
+    innerTypes;
+    enumNames;
+    enumValues;
+    enumMemberValues;
+    enumDescriptions;
+    meta;
+    constructor(init) { Object.assign(this, init); }
+}
+export class NewInstanceResolver {
+    tryResolve(ctor) {
+        return new ctor();
+    }
+}
+export class SingletonInstanceResolver {
+    tryResolve(ctor) {
+        return ctor.instance
+            || (ctor.instance = new ctor());
+    }
+}
+function eventMessageType(evt) {
+    switch (evt) {
+        case 'onConnect':
+            return 'ServerEventConnect';
+        case 'onHeartbeat':
+            return 'ServerEventHeartbeat';
+        case 'onJoin':
+            return 'ServerEventJoin';
+        case 'onLeave':
+            return 'ServerEventLeave';
+        case 'onUpdate':
+            return 'ServerEventUpdate';
+    }
+    return null;
+}
+/**
+ * EventSource
+ */
+export var ReadyState;
+(function (ReadyState) {
+    ReadyState[ReadyState["CONNECTING"] = 0] = "CONNECTING";
+    ReadyState[ReadyState["OPEN"] = 1] = "OPEN";
+    ReadyState[ReadyState["CLOSED"] = 2] = "CLOSED";
+})(ReadyState || (ReadyState = {}));
+export class ServerEventsClient {
+    channels;
+    options;
+    eventSource;
+    static UnknownChannel = "*";
+    eventStreamUri;
+    updateSubscriberUrl;
+    connectionInfo;
+    serviceClient;
+    stopped;
+    resolver;
+    listeners;
+    EventSource;
+    withCredentials;
+    constructor(baseUrl, channels, options = {}, eventSource = null) {
+        this.channels = channels;
+        this.options = options;
+        this.eventSource = eventSource;
+        if (this.channels.length === 0)
+            throw "at least 1 channel is required";
+        this.resolver = this.options.resolver || new NewInstanceResolver();
+        this.eventStreamUri = combinePaths(baseUrl, "event-stream") + "?";
+        this.updateChannels(channels);
+        this.serviceClient = new JsonServiceClient(baseUrl);
+        this.listeners = {};
+        this.withCredentials = true;
+        if (!this.options.handlers)
+            this.options.handlers = {};
+    }
+    onMessage = (e) => {
+        if (typeof document == "undefined") { //node
+            //latest node-fetch + eventsource doesn't split SSE messages properly
+            let requireSplitPos = e.data ? e.data.indexOf('\n') : -1;
+            if (requireSplitPos >= 0) {
+                let data = e.data;
+                let lastEventId = e.lastEventId;
+                let e1 = Object.assign({}, { lastEventId, data: data.substring(0, requireSplitPos) }), e2 = Object.assign({}, { lastEventId, data: data.substring(requireSplitPos + 1) });
+                this._onMessage(e1);
+                this._onMessage(e2);
+                return;
+            }
+        }
+        this._onMessage(e);
+    };
+    _onMessage = (e) => {
+        if (this.stopped)
+            return;
+        let opt = this.options;
+        if (typeof document == "undefined") {
+            var document = {
+                querySelectorAll: sel => []
+            };
+        }
+        let parts = splitOnFirst(e.data, " ");
+        let channel = null;
+        let selector = parts[0];
+        let selParts = splitOnFirst(selector, "@");
+        if (selParts.length > 1) {
+            channel = selParts[0];
+            selector = selParts[1];
+        }
+        const json = parts[1];
+        let body = null;
+        try {
+            body = json ? JSON.parse(json) : null;
+        }
+        catch (ignore) { }
+        parts = splitOnFirst(selector, ".");
+        if (parts.length <= 1)
+            throw "invalid selector format: " + selector;
+        let op = parts[0], target = parts[1].replace(new RegExp("%20", "g"), " ");
+        const tokens = splitOnFirst(target, "$");
+        const [cmd, cssSelector] = tokens;
+        const els = cssSelector && $$(cssSelector);
+        const el = els && els[0];
+        const eventId = parseInt(e.lastEventId);
+        const data = e.data;
+        const type = eventMessageType(cmd) || "ServerEventMessage";
+        const request = { eventId, data, type,
+            channel, selector, json, body, op, target: tokens[0], cssSelector, meta: {} };
+        const mergedBody = typeof body == "object"
+            ? Object.assign({}, request, body)
+            : request;
+        if (opt.validate && opt.validate(request) === false)
+            return;
+        let headers = new Headers();
+        headers.set("Content-Type", "text/plain");
+        if (op === "cmd") {
+            if (cmd === "onConnect") {
+                this.connectionInfo = mergedBody;
+                if (typeof body.heartbeatIntervalMs == "string")
+                    this.connectionInfo.heartbeatIntervalMs = parseInt(body.heartbeatIntervalMs);
+                if (typeof body.idleTimeoutMs == "string")
+                    this.connectionInfo.idleTimeoutMs = parseInt(body.idleTimeoutMs);
+                Object.assign(opt, body);
+                let fn = opt.handlers["onConnect"];
+                if (fn) {
+                    fn.call(el || document.body, this.connectionInfo, request);
+                    if (this.stopped)
+                        return;
+                }
+                if (opt.heartbeatUrl) {
+                    if (opt.heartbeat) {
+                        clearInterval(opt.heartbeat);
+                    }
+                    opt.heartbeat = setInterval(async () => {
+                        if (this.eventSource.readyState === EventSource.CLOSED) {
+                            clearInterval(opt.heartbeat);
+                            const stopFn = opt.handlers["onStop"];
+                            if (stopFn != null)
+                                stopFn.apply(this.eventSource);
+                            this.reconnectServerEvents({ error: new Error("EventSource is CLOSED") });
+                            return;
+                        }
+                        const reqHeartbeat = new Request(opt.heartbeatUrl, {
+                            method: "POST", mode: "cors", headers: headers, credentials: this.serviceClient.credentials
+                        });
+                        try {
+                            let res = await fetch(reqHeartbeat);
+                            if (!res.ok) {
+                                const error = new Error(`${res.status} - ${res.statusText}`);
+                                this.reconnectServerEvents({ error });
+                            }
+                            else {
+                                await res.text();
+                            }
+                        }
+                        catch (error) {
+                            this.reconnectServerEvents({ error });
+                        }
+                    }, (this.connectionInfo && this.connectionInfo.heartbeatIntervalMs) || opt.heartbeatIntervalMs || 10000);
+                }
+                if (opt.unRegisterUrl) {
+                    if (typeof window != "undefined") {
+                        window.onunload = () => {
+                            if (navigator.sendBeacon) { // Chrome https://developers.google.com/web/updates/2019/12/chrome-80-deps-rems
+                                this.stopped = true;
+                                if (this.eventSource)
+                                    this.eventSource.close();
+                                navigator.sendBeacon(opt.unRegisterUrl);
+                            }
+                            else {
+                                this.stop();
+                            }
+                        };
+                    }
+                }
+                this.updateSubscriberUrl = opt.updateSubscriberUrl;
+                this.updateChannels((opt.channels || "").split(","));
+            }
+            else {
+                let isCmdMsg = cmd == "onJoin" || cmd == "onLeave" || cmd == "onUpdate";
+                let fn = opt.handlers[cmd];
+                if (fn) {
+                    if (isCmdMsg) {
+                        fn.call(el || document.body, mergedBody);
+                    }
+                    else {
+                        fn.call(el || document.body, body, request);
+                    }
+                }
+                else {
+                    if (!isCmdMsg) { //global receiver
+                        let r = opt.receivers && opt.receivers["cmd"];
+                        this.invokeReceiver(r, cmd, el, request, "cmd");
+                    }
+                }
+                if (isCmdMsg) {
+                    fn = opt.handlers["onCommand"];
+                    if (fn) {
+                        fn.call(el || document.body, mergedBody);
+                    }
+                }
+            }
+        }
+        else if (op === "trigger") {
+            this.raiseEvent(target, request);
+        }
+        else if (op === "css") {
+            css(els || $$("body"), cmd, body);
+        }
+        //Named Receiver
+        let r = opt.receivers && opt.receivers[op];
+        this.invokeReceiver(r, cmd, el, request, op);
+        if (!eventMessageType(cmd)) {
+            let fn = opt.handlers["onMessage"];
+            if (fn) {
+                fn.call(el || document.body, mergedBody);
+            }
+        }
+        if (opt.onTick)
+            opt.onTick();
+    };
+    onError = (error) => {
+        if (this.stopped)
+            return;
+        if (!error)
+            error = event;
+        let fn = this.options.onException;
+        if (fn != null)
+            fn.call(this.eventSource, error);
+        if (this.options.onTick)
+            this.options.onTick();
+    };
+    getEventSourceOptions() {
+        return { withCredentials: this.withCredentials };
+    }
+    reconnectServerEvents(opt = {}) {
+        if (this.stopped)
+            return;
+        if (opt.error)
+            this.onError(opt.error);
+        const hold = this.eventSource;
+        let url = opt.url || this.eventStreamUri || hold.url;
+        if (this.options.resolveStreamUrl != null) {
+            url = this.options.resolveStreamUrl(url);
+        }
+        const es = this.EventSource
+            ? new this.EventSource(url, this.getEventSourceOptions())
+            : new EventSource(url, this.getEventSourceOptions());
+        es.addEventListener('error', e => (opt.onerror || hold.onerror || this.onError)(e));
+        es.addEventListener('message', opt.onmessage || hold.onmessage || this.onMessage);
+        let fn = this.options.onReconnect;
+        if (fn != null)
+            fn.call(es, opt.error);
+        if (hold.removeEventListener) {
+            hold.removeEventListener('error', this.onError);
+            hold.removeEventListener('message', this.onMessage);
+        }
+        hold.close();
+        return this.eventSource = es;
+    }
+    start() {
+        this.stopped = false;
+        if (this.eventSource == null || this.eventSource.readyState === EventSource.CLOSED) {
+            let url = this.eventStreamUri;
+            if (this.options.resolveStreamUrl != null) {
+                url = this.options.resolveStreamUrl(url);
+            }
+            this.eventSource = this.EventSource
+                ? new this.EventSource(url, this.getEventSourceOptions())
+                : new EventSource(url, this.getEventSourceOptions());
+            this.eventSource.addEventListener('error', this.onError);
+            this.eventSource.addEventListener('message', e => this.onMessage(e));
+        }
+        return this;
+    }
+    stop() {
+        this.stopped = true;
+        if (this.eventSource) {
+            this.eventSource.close();
+        }
+        let opt = this.options;
+        if (opt && opt.heartbeat) {
+            clearInterval(opt.heartbeat);
+        }
+        let hold = this.connectionInfo;
+        if (hold == null || hold.unRegisterUrl == null)
+            return new Promise((resolve, reject) => resolve());
+        this.connectionInfo = null;
+        return fetch(new Request(hold.unRegisterUrl, { method: "POST", mode: "cors", credentials: this.serviceClient.credentials }))
+            .then(res => { if (!res.ok)
+            throw new Error(`${res.status} - ${res.statusText}`); })
+            .catch(this.onError);
+    }
+    invokeReceiver(r, cmd, el, request, name) {
+        if (r) {
+            if (typeof r == "function") {
+                r = this.resolver.tryResolve(r);
+            }
+            cmd = cmd.replace("-", "");
+            r.client = this;
+            r.request = request;
+            if (typeof (r[cmd]) == "function") {
+                r[cmd].call(el || r, request.body, request);
+            }
+            else if (cmd in r) {
+                r[cmd] = request.body;
+            }
+            else {
+                let metaProp = Object.getOwnPropertyDescriptor(r, cmd);
+                if (metaProp != null) {
+                    if (metaProp.set) {
+                        metaProp.set(request.body);
+                    }
+                    else if (metaProp.writable) {
+                        r[cmd] = request.body;
+                    }
+                    return;
+                }
+                let cmdLower = cmd.toLowerCase();
+                getAllMembers(r).forEach(k => {
+                    if (k.toLowerCase() == cmdLower) {
+                        if (typeof r[k] == "function") {
+                            r[k].call(el || r, request.body, request);
+                        }
+                        else {
+                            r[k] = request.body;
+                        }
+                        return;
+                    }
+                });
+                let noSuchMethod = r["noSuchMethod"];
+                if (typeof noSuchMethod == "function") {
+                    noSuchMethod.call(el || r, request.target, request);
+                }
+            }
+        }
+    }
+    hasConnected() {
+        return this.connectionInfo != null;
+    }
+    registerHandler(name, fn) {
+        if (!this.options.handlers)
+            this.options.handlers = {};
+        this.options.handlers[name] = fn;
+        return this;
+    }
+    setResolver(resolver) {
+        this.options.resolver = resolver;
+        return this;
+    }
+    registerReceiver(receiver) {
+        return this.registerNamedReceiver("cmd", receiver);
+    }
+    registerNamedReceiver(name, receiver) {
+        if (!this.options.receivers)
+            this.options.receivers = {};
+        this.options.receivers[name] = receiver;
+        return this;
+    }
+    unregisterReceiver(name = "cmd") {
+        if (this.options.receivers) {
+            delete this.options.receivers[name];
+        }
+        return this;
+    }
+    updateChannels(channels) {
+        this.channels = channels;
+        const url = this.eventSource != null
+            ? this.eventSource.url
+            : this.eventStreamUri;
+        this.eventStreamUri = url.substring(0, Math.min(url.indexOf("?"), url.length)) + "?channels=" + channels.join(",") + "&t=" + new Date().getTime();
+    }
+    update(subscribe, unsubscribe) {
+        let sub = typeof subscribe == "string" ? subscribe.split(',') : subscribe;
+        let unsub = typeof unsubscribe == "string" ? unsubscribe.split(',') : unsubscribe;
+        let channels = [];
+        for (let i in this.channels) {
+            let c = this.channels[i];
+            if (unsub == null || unsub.indexOf(c) === -1) {
+                channels.push(c);
+            }
+        }
+        if (sub) {
+            for (let i in sub) {
+                let c = sub[i];
+                if (channels.indexOf(c) === -1) {
+                    channels.push(c);
+                }
+            }
+        }
+        this.updateChannels(channels);
+    }
+    addListener(eventName, handler) {
+        let handlers = this.listeners[eventName] || (this.listeners[eventName] = []);
+        handlers.push(handler);
+        return this;
+    }
+    removeListener(eventName, handler) {
+        let handlers = this.listeners[eventName];
+        if (handlers) {
+            let pos = handlers.indexOf(handler);
+            if (pos >= 0) {
+                handlers.splice(pos, 1);
+            }
+        }
+        return this;
+    }
+    raiseEvent(eventName, msg) {
+        let handlers = this.listeners[eventName];
+        if (handlers) {
+            handlers.forEach(x => {
+                try {
+                    x(msg);
+                }
+                catch (e) {
+                    this.onError(e);
+                }
+            });
+        }
+    }
+    getConnectionInfo() {
+        if (this.connectionInfo == null)
+            throw "Not Connected";
+        return this.connectionInfo;
+    }
+    getSubscriptionId() {
+        return this.getConnectionInfo().id;
+    }
+    updateSubscriber(request) {
+        if (request.id == null)
+            request.id = this.getSubscriptionId();
+        return this.serviceClient.post(request)
+            .then(x => {
+            this.update(request.subscribeChannels, request.unsubscribeChannels);
+        }).catch(this.onError);
+    }
+    subscribeToChannels(...channels) {
+        let request = new UpdateEventSubscriber();
+        request.id = this.getSubscriptionId();
+        request.subscribeChannels = channels;
+        return this.serviceClient.post(request)
+            .then(x => {
+            this.update(channels, null);
+        }).catch(this.onError);
+    }
+    unsubscribeFromChannels(...channels) {
+        let request = new UpdateEventSubscriber();
+        request.id = this.getSubscriptionId();
+        request.unsubscribeChannels = channels;
+        return this.serviceClient.post(request)
+            .then(x => {
+            this.update(null, channels);
+        }).catch(this.onError);
+    }
+    getChannelSubscribers() {
+        let request = new GetEventSubscribers();
+        request.channels = this.channels;
+        return this.serviceClient.get(request)
+            .then(r => r.map(x => this.toServerEventUser(x)))
+            .catch(e => {
+            this.onError(e);
+            return [];
+        });
+    }
+    toServerEventUser(map) {
+        let channels = map["channels"];
+        let to = new ServerEventUser();
+        to.userId = map["userId"];
+        to.displayName = map["displayName"];
+        to.profileUrl = map["profileUrl"];
+        to.channels = channels ? channels.split(',') : null;
+        for (let k in map) {
+            if (k == "userId" || k == "displayName" ||
+                k == "profileUrl" || k == "channels")
+                continue;
+            if (to.meta == null)
+                to.meta = {};
+            to.meta[k] = map[k];
+        }
+        return to;
+    }
+}
+export function getAllMembers(o) {
+    let props = [];
+    do {
+        const l = Object.getOwnPropertyNames(o)
+            .concat(Object.getOwnPropertySymbols(o).map(s => s.toString()))
+            .sort()
+            .filter((p, i, arr) => p !== 'constructor' && //not the constructor
+            (i == 0 || p !== arr[i - 1]) && //not overriding in this prototype
+            props.indexOf(p) === -1 //not overridden in a child
+        );
+        props = props.concat(l);
+    } while ((o = Object.getPrototypeOf(o)) && //walk-up the prototype chain
+        Object.getPrototypeOf(o) //not the the Object prototype methods (hasOwnProperty, etc...)
+    );
+    return props;
+}
+export class ServerEventReceiver {
+    client;
+    request;
+    noSuchMethod(selector, message) { }
+}
+export class UpdateEventSubscriber {
+    id;
+    subscribeChannels;
+    unsubscribeChannels;
+    createResponse() { return new UpdateEventSubscriberResponse(); }
+    getTypeName() { return "UpdateEventSubscriber"; }
+}
+export class UpdateEventSubscriberResponse {
+    responseStatus;
+}
+export class GetEventSubscribers {
+    channels;
+    createResponse() { return []; }
+    getTypeName() { return "GetEventSubscribers"; }
+}
+export class ServerEventUser {
+    userId;
+    displayName;
+    profileUrl;
+    channels;
+    meta;
+}
+export class HttpMethods {
+    static Get = "GET";
+    static Post = "POST";
+    static Put = "PUT";
+    static Delete = "DELETE";
+    static Patch = "PATCH";
+    static Head = "HEAD";
+    static Options = "OPTIONS";
+    static hasRequestBody = (method) => !(method === "GET" || method === "DELETE" || method === "HEAD" || method === "OPTIONS");
+}
+class GetAccessToken {
+    constructor(init) { Object.assign(this, init); }
+    refreshToken;
+    useTokenCookie;
+    createResponse() { return new GetAccessTokenResponse(); }
+    getTypeName() { return 'GetAccessToken'; }
+    getMethod() { return 'POST'; }
+}
+export class GetAccessTokenResponse {
+    accessToken;
+    responseStatus;
+}
+export class JsonServiceClient {
+    baseUrl;
+    replyBaseUrl;
+    oneWayBaseUrl;
+    mode;
+    credentials;
+    headers;
+    userName;
+    password;
+    bearerToken;
+    refreshToken;
+    refreshTokenUri;
+    useTokenCookie;
+    enableAutoRefreshToken;
+    requestFilter;
+    static globalRequestFilter;
+    responseFilter;
+    static globalResponseFilter;
+    exceptionFilter;
+    urlFilter;
+    onAuthenticationRequired;
+    manageCookies;
+    cookies;
+    parseJson;
+    static toBase64;
+    constructor(baseUrl = "/") {
+        this.baseUrl = baseUrl;
+        this.mode = "cors";
+        this.credentials = "include";
+        this.headers = new Headers();
+        this.headers.set("Content-Type", "application/json");
+        this.manageCookies = typeof document == "undefined"; //because node-fetch doesn't
+        this.cookies = {};
+        this.enableAutoRefreshToken = true;
+        this.basePath = 'api';
+    }
+    setCredentials(userName, password) {
+        this.userName = userName;
+        this.password = password;
+    }
+    useBasePath(path) {
+        this.basePath = path;
+        return this;
+    }
+    set basePath(path) {
+        if (!path) {
+            this.replyBaseUrl = combinePaths(this.baseUrl, "json", "reply") + "/";
+            this.oneWayBaseUrl = combinePaths(this.baseUrl, "json", "oneway") + "/";
+        }
+        else {
+            this.replyBaseUrl = combinePaths(this.baseUrl, path) + "/";
+            this.oneWayBaseUrl = combinePaths(this.baseUrl, path) + "/";
+        }
+    }
+    apply(f) {
+        f(this);
+        return this;
+    }
+    get(request, args) {
+        return typeof request != "string"
+            ? this.fetch(HttpMethods.Get, request, args)
+            : this.fetch(HttpMethods.Get, null, args, this.toAbsoluteUrl(request));
+    }
+    delete(request, args) {
+        return typeof request != "string"
+            ? this.fetch(HttpMethods.Delete, request, args)
+            : this.fetch(HttpMethods.Delete, null, args, this.toAbsoluteUrl(request));
+    }
+    post(request, args) {
+        return this.fetch(HttpMethods.Post, request, args);
+    }
+    postToUrl(url, request, args) {
+        return this.fetch(HttpMethods.Post, request, args, this.toAbsoluteUrl(url));
+    }
+    postBody(request, body, args) {
+        return this.fetchBody(HttpMethods.Post, request, body, args);
+    }
+    put(request, args) {
+        return this.fetch(HttpMethods.Put, request, args);
+    }
+    putToUrl(url, request, args) {
+        return this.fetch(HttpMethods.Put, request, args, this.toAbsoluteUrl(url));
+    }
+    putBody(request, body, args) {
+        return this.fetchBody(HttpMethods.Put, request, body, args);
+    }
+    patch(request, args) {
+        return this.fetch(HttpMethods.Patch, request, args);
+    }
+    patchToUrl(url, request, args) {
+        return this.fetch(HttpMethods.Patch, request, args, this.toAbsoluteUrl(url));
+    }
+    patchBody(request, body, args) {
+        return this.fetchBody(HttpMethods.Patch, request, body, args);
+    }
+    publish(request, args) {
+        return this.sendOneWay(request, args);
+    }
+    sendOneWay(request, args) {
+        const url = combinePaths(this.oneWayBaseUrl, nameOf(request));
+        return this.fetch(HttpMethods.Post, request, null, url);
+    }
+    sendAll(requests) {
+        if (requests.length == 0)
+            return Promise.resolve([]);
+        const url = combinePaths(this.replyBaseUrl, nameOf(requests[0]) + "[]");
+        return this.fetch(HttpMethods.Post, requests, null, url);
+    }
+    sendAllOneWay(requests) {
+        if (requests.length == 0)
+            return Promise.resolve(void 0);
+        const url = combinePaths(this.oneWayBaseUrl, nameOf(requests[0]) + "[]");
+        return this.fetch(HttpMethods.Post, requests, null, url)
+            .then(r => void 0);
+    }
+    createUrlFromDto(method, request) {
+        let url = combinePaths(this.replyBaseUrl, nameOf(request));
+        const hasRequestBody = HttpMethods.hasRequestBody(method);
+        if (!hasRequestBody)
+            url = appendQueryString(url, request);
+        return url;
+    }
+    toAbsoluteUrl(relativeOrAbsoluteUrl) {
+        return relativeOrAbsoluteUrl.startsWith("http://") ||
+            relativeOrAbsoluteUrl.startsWith("https://")
+            ? relativeOrAbsoluteUrl
+            : combinePaths(this.baseUrl, relativeOrAbsoluteUrl);
+    }
+    deleteCookie(name) {
+        if (this.manageCookies) {
+            delete this.cookies[name];
+        }
+        else {
+            if (document) {
+                document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';
+            }
+        }
+    }
+    createRequest({ method, request, url, args, body }) {
+        if (!url)
+            url = this.createUrlFromDto(method, request);
+        if (args)
+            url = appendQueryString(url, args);
+        if (this.bearerToken != null) {
+            this.headers.set("Authorization", "Bearer " + this.bearerToken);
+        }
+        else if (this.userName != null) {
+            this.headers.set('Authorization', 'Basic ' + JsonServiceClient.toBase64(`${this.userName}:${this.password}`));
+        }
+        if (this.manageCookies) {
+            let cookies = Object.keys(this.cookies)
+                .map(x => {
+                let c = this.cookies[x];
+                return c.expires && c.expires < new Date()
+                    ? null
+                    : `${c.name}=${encodeURIComponent(c.value)}`;
+            })
+                .filter(x => !!x);
+            if (cookies.length > 0)
+                this.headers.set("Cookie", cookies.join("; "));
+            else
+                this.headers.delete("Cookie");
+        }
+        let headers = new Headers(this.headers);
+        let hasRequestBody = HttpMethods.hasRequestBody(method);
+        let reqInit = {
+            url,
+            method: method,
+            mode: this.mode,
+            credentials: this.credentials,
+            headers,
+            compress: false, // https://github.com/bitinn/node-fetch/issues/93#issuecomment-200791658
+        };
+        if (hasRequestBody) {
+            reqInit.body = body || JSON.stringify(request);
+            if (isFormData(body)) {
+                reqInit.body = sanitizeFormData(body);
+                headers.delete('Content-Type'); //set by FormData
+            }
+        }
+        if (this.requestFilter != null)
+            this.requestFilter(reqInit);
+        if (JsonServiceClient.globalRequestFilter != null)
+            JsonServiceClient.globalRequestFilter(reqInit);
+        return reqInit;
+    }
+    json(res) {
+        if (this.parseJson)
+            return this.parseJson(res);
+        return res.text().then(txt => {
+            return txt.length > 0 ? JSON.parse(txt) : null;
+        });
+    }
+    applyResponseFilters(res) {
+        if (this.responseFilter != null)
+            this.responseFilter(res);
+        if (JsonServiceClient.globalResponseFilter != null)
+            JsonServiceClient.globalResponseFilter(res);
+    }
+    createResponse(res, request) {
+        if (!res.ok) {
+            this.applyResponseFilters(res);
+            throw res;
+        }
+        if (this.manageCookies) {
+            let setCookies = [];
+            res.headers.forEach((v, k) => {
+                switch (k.toLowerCase()) {
+                    case "set-cookie":
+                        let cookies = v.split(',');
+                        cookies.forEach(c => setCookies.push(c));
+                        break;
+                }
+            });
+            setCookies.forEach(x => {
+                let cookie = parseCookie(x);
+                if (cookie)
+                    this.cookies[cookie.name] = cookie;
+            });
+        }
+        res.headers.forEach((v, k) => {
+            switch (k.toLowerCase()) {
+                case "x-cookies":
+                    if (v.split(',').indexOf('ss-reftok') >= 0)
+                        this.useTokenCookie = true;
+                    break;
+            }
+        });
+        this.applyResponseFilters(res);
+        let x = request && typeof request != "string" && typeof request.createResponse == 'function'
+            ? request.createResponse()
+            : null;
+        if (typeof x === 'string')
+            return res.text().then(o => o);
+        let contentType = res.headers.get("content-type");
+        let isJson = contentType && contentType.indexOf("application/json") !== -1;
+        if (isJson) {
+            return this.json(res).then(o => o);
+        }
+        if (typeof Uint8Array != "undefined" && x instanceof Uint8Array) {
+            if (typeof res.arrayBuffer != 'function')
+                throw new Error("This fetch polyfill does not implement 'arrayBuffer'");
+            return res.arrayBuffer().then(o => new Uint8Array(o));
+        }
+        else if (typeof Blob == "function" && x instanceof Blob) {
+            if (typeof res.blob != 'function')
+                throw new Error("This fetch polyfill does not implement 'blob'");
+            return res.blob().then(o => o);
+        }
+        let contentLength = res.headers.get("content-length");
+        if (contentLength === "0" || (contentLength == null && !isJson)) {
+            return res.text().then(_ => x);
+        }
+        return this.json(res).then(o => o); //fallback
+    }
+    handleError(holdRes, res, type = null) {
+        if (res instanceof Error)
+            throw this.raiseError(holdRes, res);
+        // res.json can only be called once.
+        if (res.bodyUsed)
+            throw this.raiseError(res, createErrorResponse(res.status, res.statusText, type));
+        let isErrorResponse = typeof res.json == "undefined" && res.responseStatus;
+        if (isErrorResponse) {
+            return new Promise((resolve, reject) => reject(this.raiseError(null, res)));
+        }
+        return this.json(res).then(o => {
+            let errorDto = sanitize(o);
+            if (!errorDto.responseStatus)
+                throw createErrorResponse(res.status, res.statusText, type);
+            if (type != null)
+                errorDto.type = type;
+            throw errorDto;
+        }).catch(error => {
+            // No responseStatus body, set from `res` Body object
+            if (error instanceof Error
+                || (typeof window != "undefined" && window.DOMException && error instanceof window.DOMException /*MS Edge*/)) {
+                throw this.raiseError(res, createErrorResponse(res.status, res.statusText, type));
+            }
+            throw this.raiseError(res, error);
+        });
+    }
+    fetch(method, request, args, url) {
+        return this.sendRequest({ method, request, args, url });
+    }
+    fetchBody(method, request, body, args) {
+        let url = combinePaths(this.replyBaseUrl, nameOf(request));
+        return this.sendRequest({
+            method,
+            request: body,
+            body: typeof body == "string"
+                ? body
+                : isFormData(body)
+                    ? body
+                    : JSON.stringify(body),
+            url: appendQueryString(url, request),
+            args,
+            returns: request
+        });
+    }
+    sendRequest(info) {
+        const req = this.createRequest(info);
+        const returns = info.returns || info.request;
+        let holdRes = null;
+        const resendRequest = () => {
+            const req = this.createRequest(info);
+            if (this.urlFilter)
+                this.urlFilter(req.url);
+            return fetch(req.url, req)
+                .then(res => this.createResponse(res, returns))
+                .catch(res => this.handleError(holdRes, res));
+        };
+        if (this.urlFilter)
+            this.urlFilter(req.url);
+        return fetch(req.url, req)
+            .then(res => {
+            holdRes = res;
+            const response = this.createResponse(res, returns);
+            return response;
+        })
+            .catch(res => {
+            if (res.status === 401) {
+                if (this.enableAutoRefreshToken && (this.refreshToken || this.useTokenCookie || this.cookies['ss-reftok'] != null)) {
+                    const jwtReq = new GetAccessToken({ refreshToken: this.refreshToken, useTokenCookie: !!this.useTokenCookie });
+                    let url = this.refreshTokenUri || this.createUrlFromDto(HttpMethods.Post, jwtReq);
+                    if (this.useTokenCookie) {
+                        this.bearerToken = null;
+                        this.headers.delete("Authorization");
+                    }
+                    let jwtRequest = this.createRequest({ method: HttpMethods.Post, request: jwtReq, args: null, url });
+                    return fetch(url, jwtRequest)
+                        .then(r => this.createResponse(r, jwtReq).then(jwtResponse => {
+                        this.bearerToken = jwtResponse?.accessToken || null;
+                        return resendRequest();
+                    }))
+                        .catch(res => {
+                        if (this.onAuthenticationRequired) {
+                            return this.onAuthenticationRequired()
+                                .then(resendRequest)
+                                .catch(resHandler => {
+                                return this.handleError(holdRes, resHandler, "RefreshTokenException");
+                            });
+                        }
+                        else {
+                            return this.handleError(holdRes, res, "RefreshTokenException");
+                        }
+                    });
+                }
+                else {
+                    if (this.onAuthenticationRequired) {
+                        return this.onAuthenticationRequired().then(resendRequest);
+                    }
+                }
+            }
+            return this.handleError(holdRes, res);
+        });
+    }
+    raiseError(res, error) {
+        if (this.exceptionFilter != null) {
+            this.exceptionFilter(res, error);
+        }
+        return error;
+    }
+    // Generic send that uses APIs preferred HTTP Method (requires v5.13+ DTOs)
+    send(request, args, url) {
+        return this.sendRequest({ method: getMethod(request), request, args, url });
+    }
+    // Generic send IReturnVoid that uses APIs preferred HTTP Method (requires v5.13+ DTOs)
+    sendVoid(request, args, url) {
+        return this.sendRequest({ method: getMethod(request), request, args, url });
+    }
+    async api(request, args, method) {
+        try {
+            const result = await this.fetch(getMethod(request, method), request, args);
+            return new ApiResult({ response: result });
+        }
+        catch (e) {
+            return new ApiResult({ error: getResponseStatus(e) });
+        }
+    }
+    async apiVoid(request, args, method) {
+        try {
+            const result = await this.fetch(getMethod(request, method), request, args);
+            return new ApiResult({ response: result ?? new EmptyResponse() });
+        }
+        catch (e) {
+            return new ApiResult({ error: getResponseStatus(e) });
+        }
+    }
+    async apiForm(request, body, args, method) {
+        try {
+            const result = await this.fetchBody(getMethod(request, method), request, body, args);
+            return new ApiResult({ response: result });
+        }
+        catch (e) {
+            return new ApiResult({ error: getResponseStatus(e) });
+        }
+    }
+    async apiFormVoid(request, body, args, method) {
+        try {
+            const result = await this.fetchBody(getMethod(request, method), request, body, args);
+            return new ApiResult({ response: result ?? new EmptyResponse() });
+        }
+        catch (e) {
+            return new ApiResult({ error: getResponseStatus(e) });
+        }
+    }
+}
+export class JsonApiClient {
+    static create(baseUrl = "/", f) {
+        let client = new JsonServiceClient(baseUrl).apply(c => {
+            c.basePath = "/api";
+            c.headers = new Headers(); //avoid pre-flight CORS requests
+            c.enableAutoRefreshToken = false; // Use JWT Cookies by default
+            if (f) {
+                f(c);
+            }
+        });
+        return client;
+    }
+}
+export function getMethod(request, method) {
+    return method ?? (typeof request.getMethod == "function"
+        ? request.getMethod()
+        : HttpMethods.Post);
+}
+export function getResponseStatus(e) {
+    return e.responseStatus ?? e.ResponseStatus ??
+        (e.errorCode
+            ? e
+            : (e.message ? createErrorStatus(e.message, e.errorCode) : null));
+}
+export class ApiResult {
+    response;
+    error;
+    constructor(init) { Object.assign(this, init); }
+    get completed() { return this.response != null || this.error != null; }
+    get failed() { return this.error?.errorCode != null || this.error?.message != null; }
+    get succeeded() { return !this.failed && this.response != null; }
+    get errorMessage() { return this.error?.message; }
+    get errorCode() { return this.error?.errorCode; }
+    get errors() { return this.error?.errors ?? []; }
+    get errorSummary() { return this.error != null && this.errors.length == 0 ? this.errorMessage : null; }
+    fieldError(fieldName) {
+        let matchField = fieldName.toLowerCase();
+        return this.errors?.find(x => x.fieldName.toLowerCase() == matchField);
+    }
+    fieldErrorMessage(fieldName) { return this.fieldError(fieldName)?.message; }
+    hasFieldError(fieldName) { return this.fieldError(fieldName) != null; }
+    showSummary(exceptFields = []) {
+        if (!this.failed)
+            return false;
+        return exceptFields.every(x => !this.hasFieldError(x));
+    }
+    summaryMessage(exceptFields = []) {
+        if (this.showSummary(exceptFields)) {
+            // Return first field error that's not visible
+            let fieldSet = exceptFields.map(x => x.toLowerCase());
+            let fieldError = fieldSet.find(x => fieldSet.indexOf(x.toLowerCase()) == -1);
+            return fieldError ?? this.errorMessage;
+        }
+    }
+    addFieldError(fieldName, message, errorCode = 'Exception') {
+        if (!this.error)
+            this.error = new ResponseStatus();
+        const fieldError = this.fieldError(fieldName);
+        if (fieldError != null) {
+            fieldError.errorCode = errorCode;
+            fieldError.message = message;
+        }
+        else {
+            this.error.errors.push(new ResponseError({ fieldName, errorCode, message }));
+        }
+    }
+}
+export function createErrorStatus(message, errorCode = 'Exception') {
+    return new ResponseStatus({ errorCode, message });
+}
+export function createFieldError(fieldName, message, errorCode = 'Exception') {
+    return new ResponseStatus({ errors: [new ResponseError({ fieldName, errorCode, message })] });
+}
+export function isFormData(body) { return typeof window != "undefined" && body instanceof FormData; }
+function createErrorResponse(errorCode, message, type = null) {
+    const error = apply(new ErrorResponse(), e => {
+        if (type != null)
+            e.type = type;
+        e.responseStatus = apply(new ResponseStatus(), status => {
+            status.errorCode = errorCode && errorCode.toString();
+            status.message = message;
+        });
+    });
+    return error;
+}
+export function createError(errorCode, message, fieldName) {
+    return new ErrorResponse({
+        responseStatus: new ResponseStatus({
+            errorCode,
+            message,
+            errors: fieldName ? [new ResponseError({ errorCode, message, fieldName })] : undefined
+        })
+    });
+}
+export function toCamelCase(s) { return !s ? s : s.charAt(0).toLowerCase() + s.substring(1); }
+export function toPascalCase(s) { return !s ? s : s.charAt(0).toUpperCase() + s.substring(1); }
+export function toKebabCase(s) { return (s || '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); }
+export function map(o, f) { return o == null ? null : f(o); }
+export function camelCaseAny(o) {
+    if (!o || !(o instanceof Object) || Array.isArray(o))
+        return o;
+    let to = {};
+    for (let k in o) {
+        if (o.hasOwnProperty(k)) {
+            const key = toCamelCase(k);
+            const val = o[k];
+            if (Array.isArray(val))
+                to[key] = val.map(x => camelCaseAny(x));
+            else if (val instanceof Object)
+                to[key] = camelCaseAny(val);
+            else
+                to[key] = val;
+        }
+    }
+    return to;
+}
+export function sanitize(status) {
+    if (!sanitize)
+        return sanitize;
+    if (status.responseStatus)
+        return status;
+    if (status.errors)
+        return status;
+    let to = camelCaseAny(status);
+    return to;
+}
+export function nameOf(o) {
+    if (!o)
+        return "null";
+    if (typeof o.getTypeName == "function")
+        return o.getTypeName();
+    let ctor = o && o.constructor;
+    if (ctor == null)
+        throw `${o} doesn't have constructor`;
+    if (ctor.name)
+        return ctor.name;
+    let str = ctor.toString();
+    return str.substring(9, str.indexOf("(")); //"function ".length == 9
+}
+/* utils */
+function log(o, prefix = "LOG") {
+    console.log(prefix, o);
+    return o;
+}
+export function css(selector, name, value) {
+    const els = typeof selector == "string"
+        ? document.querySelectorAll(selector)
+        : selector;
+    for (let i = 0; i < els.length; i++) {
+        const el = els[i];
+        if (el != null && el.style != null) {
+            el.style[name] = value;
+        }
+    }
+}
+export function splitOnFirst(s, c) {
+    if (!s)
+        return [s];
+    let pos = s.indexOf(c);
+    return pos >= 0 ? [s.substring(0, pos), s.substring(pos + 1)] : [s];
+}
+export function splitOnLast(s, c) {
+    if (!s)
+        return [s];
+    let pos = s.lastIndexOf(c);
+    return pos >= 0
+        ? [s.substring(0, pos), s.substring(pos + 1)]
+        : [s];
+}
+export function leftPart(s, needle) {
+    if (s == null)
+        return null;
+    let pos = s.indexOf(needle);
+    return pos == -1
+        ? s
+        : s.substring(0, pos);
+}
+export function rightPart(s, needle) {
+    if (s == null)
+        return null;
+    let pos = s.indexOf(needle);
+    return pos == -1
+        ? s
+        : s.substring(pos + needle.length);
+}
+export function lastLeftPart(s, needle) {
+    if (s == null)
+        return null;
+    let pos = s.lastIndexOf(needle);
+    return pos == -1
+        ? s
+        : s.substring(0, pos);
+}
+export function lastRightPart(s, needle) {
+    if (s == null)
+        return null;
+    let pos = s.lastIndexOf(needle);
+    return pos == -1
+        ? s
+        : s.substring(pos + needle.length);
+}
+export function chop(str, len = 1) {
+    len = Math.abs(len);
+    return str ? len < str.length ? str.substring(0, str.length - len) : '' : str;
+}
+export function onlyProps(obj, keys) {
+    let to = {};
+    keys.forEach(key => to[key] = obj[key]);
+    return to;
+}
+function splitCase(t) {
+    return typeof t != 'string' ? t : t.replace(/([A-Z]|[0-9]+)/g, ' $1').replace(/_/g, ' ').trim();
+}
+export function humanize(s) { return (!s || s.indexOf(' ') >= 0 ? s : splitCase(toPascalCase(s))); }
+export const ucFirst = (s) => s.charAt(0).toUpperCase() + s.substring(1);
+export const isUpper = (c) => c >= 'A' && c <= 'Z';
+export const isLower = (c) => c >= 'a' && c <= 'z';
+export const isDigit = (c) => c >= '0' && c <= '9';
+const upperOrDigit = (c) => isUpper(c) || isDigit(c);
+export function splitTitleCase(s) {
+    let to = [];
+    if (typeof s != 'string')
+        return to;
+    let lastSplit = 0;
+    for (let i = 0; i < s.length; i++) {
+        let c = s[i];
+        let prev = i > 0 ? s[i - 1] : null;
+        let next = i + 1 < s.length ? s[i + 1] : null;
+        if (upperOrDigit(c) && (!upperOrDigit(prev) || !upperOrDigit(next))) {
+            to.push(s.substring(lastSplit, i));
+            lastSplit = i;
+        }
+    }
+    to.push(s.substring(lastSplit, s.length));
+    return to.filter(x => !!x);
+}
+export function humanify(s) { return !s || s.indexOf(' ') >= 0 ? s : ucFirst(splitTitleCase(s).join(' ')); }
+export function queryString(url) {
+    if (!url || url.indexOf('?') === -1)
+        return {};
+    let pairs = rightPart(url, '?').split('&');
+    let map = {};
+    for (let i = 0; i < pairs.length; ++i) {
+        let p = pairs[i].split('=');
+        map[p[0]] = p.length > 1
+            ? decodeURIComponent(p[1].replace(/\+/g, ' '))
+            : null;
+    }
+    return map;
+}
+export function combinePaths(...paths) {
+    let parts = [], i, l;
+    for (i = 0, l = paths.length; i < l; i++) {
+        let arg = paths[i];
+        parts = arg.indexOf("://") === -1
+            ? parts.concat(arg.split("/"))
+            : parts.concat(arg.lastIndexOf("/") === arg.length - 1 ? arg.substring(0, arg.length - 1) : arg);
+    }
+    let combinedPaths = [];
+    for (i = 0, l = parts.length; i < l; i++) {
+        let part = parts[i];
+        if (!part || part === ".")
+            continue;
+        if (part === "..")
+            combinedPaths.pop();
+        else
+            combinedPaths.push(part);
+    }
+    if (parts[0] === "")
+        combinedPaths.unshift("");
+    return combinedPaths.join("/") || (combinedPaths.length ? "/" : ".");
+}
+export function createPath(route, args) {
+    let argKeys = {};
+    for (let k in args) {
+        argKeys[k.toLowerCase()] = k;
+    }
+    let parts = route.split("/");
+    let url = "";
+    for (let i = 0; i < parts.length; i++) {
+        let p = parts[i];
+        if (p == null)
+            p = "";
+        if (p[0] === "{" && p[p.length - 1] === "}") {
+            const key = argKeys[p.substring(1, p.length - 1).toLowerCase()];
+            if (key) {
+                p = args[key];
+                delete args[key];
+            }
+        }
+        if (url.length > 0)
+            url += "/";
+        url += p;
+    }
+    return url;
+}
+export function createUrl(route, args) {
+    let url = createPath(route, args);
+    return appendQueryString(url, args);
+}
+export function appendQueryString(url, args) {
+    for (let k in args) {
+        if (args.hasOwnProperty(k)) {
+            let val = args[k];
+            if (typeof val == 'undefined' || typeof val == 'function' || typeof val == 'symbol')
+                continue;
+            url += url.indexOf("?") >= 0 ? "&" : "?";
+            url += k + (val === null ? '' : "=" + qsValue(val));
+        }
+    }
+    return url;
+}
+export function setQueryString(url, args) {
+    const baseUrl = leftPart(url, '?');
+    const qs = Object.assign(queryString(url), args);
+    return appendQueryString(baseUrl, qs);
+}
+function qsValue(arg) {
+    if (arg == null)
+        return "";
+    if (typeof Uint8Array != "undefined" && arg instanceof Uint8Array)
+        return bytesToBase64(arg);
+    return encodeURIComponent(arg) || "";
+}
+//from: https://github.com/madmurphy/stringview.js/blob/master/stringview.js
+export function bytesToBase64(aBytes) {
+    let eqLen = (3 - (aBytes.length % 3)) % 3, sB64Enc = "";
+    for (let nMod3, nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
+        nMod3 = nIdx % 3;
+        nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
+        if (nMod3 === 2 || aBytes.length - nIdx === 1) {
+            sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
+            nUint24 = 0;
+        }
+    }
+    return eqLen === 0
+        ? sB64Enc
+        : sB64Enc.substring(0, sB64Enc.length - eqLen) + (eqLen === 1 ? "=" : "==");
+}
+function uint6ToB64(nUint6) {
+    return nUint6 < 26 ?
+        nUint6 + 65
+        : nUint6 < 52 ?
+            nUint6 + 71
+            : nUint6 < 62 ?
+                nUint6 - 4
+                : nUint6 === 62 ? 43
+                    : nUint6 === 63 ? 47 : 65;
+}
+function _btoa(base64) {
+    return typeof btoa == 'function'
+        ? btoa(base64)
+        : Buffer.from(base64).toString('base64');
+}
+function _atob(base64) {
+    return typeof atob == 'function'
+        ? atob(base64)
+        : Buffer.from(base64, 'base64').toString();
+}
+//from: http://stackoverflow.com/a/30106551/85785
+JsonServiceClient.toBase64 = (str) => _btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => String.fromCharCode(new Number('0x' + p1).valueOf())));
+export function stripQuotes(s) { return s && s[0] == '"' && s[s.length] == '"' ? s.slice(1, -1) : s; }
+export function tryDecode(s) {
+    try {
+        return decodeURIComponent(s);
+    }
+    catch (e) {
+        return s;
+    }
+}
+export function parseCookie(setCookie) {
+    if (!setCookie)
+        return null;
+    let to = null;
+    let pairs = setCookie.split(/; */);
+    for (let i = 0; i < pairs.length; i++) {
+        let pair = pairs[i];
+        let parts = splitOnFirst(pair, '=');
+        let name = parts[0].trim();
+        let value = parts.length > 1 ? tryDecode(stripQuotes(parts[1].trim())) : null;
+        if (i == 0) {
+            to = { name, value, path: "/" };
+        }
+        else {
+            let lower = name.toLowerCase();
+            if (lower == "httponly") {
+                to.httpOnly = true;
+            }
+            else if (lower == "secure") {
+                to.secure = true;
+            }
+            else if (lower == "expires") {
+                to.expires = new Date(value);
+                // MS Edge returns Invalid Date when using '-' in "12-Mar-2037"
+                if (to.expires.toString() === "Invalid Date") {
+                    to.expires = new Date(value.replace(/-/g, " "));
+                }
+            }
+            else {
+                to[name] = value;
+            }
+        }
+    }
+    return to;
+}
+export function normalizeKey(key) { return key.toLowerCase().replace(/_/g, ''); }
+function isArray(o) { return Object.prototype.toString.call(o) === '[object Array]'; }
+export function normalize(dto, deep) {
+    if (isArray(dto)) {
+        if (!deep)
+            return dto;
+        const to = [];
+        for (let i = 0; i < dto.length; i++) {
+            to[i] = normalize(dto[i], deep);
+        }
+        return to;
+    }
+    if (typeof dto != "object")
+        return dto;
+    let o = {};
+    for (let k in dto) {
+        o[normalizeKey(k)] = deep ? normalize(dto[k], deep) : dto[k];
+    }
+    return o;
+}
+export function getField(o, name) {
+    return o == null || name == null ? null :
+        o[name] ||
+            o[Object.keys(o).filter(k => normalizeKey(k) === normalizeKey(name))[0] || ''];
+}
+export function parseResponseStatus(json, defaultMsg = null) {
+    try {
+        let err = JSON.parse(json);
+        return sanitize(err.ResponseStatus || err.responseStatus);
+    }
+    catch (e) {
+        return {
+            message: defaultMsg || e.message || e,
+            __error: { error: e, json: json }
+        };
+    }
+}
+export function toFormData(o) {
+    if (typeof window == "undefined")
+        return;
+    let formData = new FormData();
+    for (let name in o) {
+        formData.append(name, o[name]);
+    }
+    return formData;
+}
+export function toObject(keys) {
+    const to = {};
+    if (!keys)
+        return to;
+    if (typeof keys != "object")
+        throw new Error("keys must be an Array of object keys");
+    const arr = Array.prototype.slice.call(keys);
+    arr.forEach(key => {
+        if (this[key]) {
+            to[key] = this[key];
+        }
+    });
+    return to;
+}
+export function errorResponseSummary() {
+    const responseStatus = this.responseStatus || this.ResponseStatus;
+    if (responseStatus == null)
+        return undefined;
+    const status = responseStatus.ErrorCode ? sanitize(responseStatus) : responseStatus;
+    return !status.errors || status.errors.length == 0
+        ? status.message || status.errorCode
+        : undefined;
+}
+export function errorResponseExcept(fieldNames) {
+    const responseStatus = this.responseStatus || this.ResponseStatus;
+    if (responseStatus == null)
+        return undefined;
+    const status = responseStatus.ErrorCode ? sanitize(responseStatus) : responseStatus;
+    const names = toVarNames(fieldNames);
+    if (names && !(status.errors == null || status.errors.length == 0)) {
+        const lowerFieldsNames = names.map(x => (x || '').toLowerCase());
+        for (let field of status.errors) {
+            if (lowerFieldsNames.indexOf((field.fieldName || '').toLowerCase()) !== -1) {
+                return undefined;
+            }
+        }
+        for (let field of status.errors) {
+            if (lowerFieldsNames.indexOf((field.fieldName || '').toLowerCase()) === -1) {
+                return field.message || field.errorCode;
+            }
+        }
+    }
+    return status.message || status.errorCode || undefined;
+}
+export function errorResponse(fieldName) {
+    if (fieldName == null)
+        return errorResponseSummary.call(this);
+    const responseStatus = this.responseStatus || this.ResponseStatus;
+    if (responseStatus == null)
+        return undefined;
+    const status = responseStatus.ErrorCode ? sanitize(responseStatus) : responseStatus;
+    if (status.errors == null || status.errors.length == 0)
+        return undefined;
+    const field = status.errors.find(x => (x.fieldName || '').toLowerCase() == fieldName.toLowerCase());
+    return field
+        ? field.message || field.errorCode
+        : undefined;
+}
+export function isDate(d) { return d && Object.prototype.toString.call(d) === "[object Date]" && !isNaN(d); }
+export function toDate(s) {
+    return !s ? null
+        : isDate(s)
+            ? s
+            : s[0] == '/'
+                ? new Date(parseFloat(/Date\(([^)]+)\)/.exec(s)[1]))
+                : new Date(s);
+}
+export function toDateFmt(s) { return dateFmt(toDate(s)); }
+export function padInt(n) { return n < 10 ? '0' + n : n; }
+export function dateFmt(d = new Date()) { return d.getFullYear() + '/' + padInt(d.getMonth() + 1) + '/' + padInt(d.getDate()); }
+export function dateFmtHM(d = new Date()) { return d.getFullYear() + '/' + padInt(d.getMonth() + 1) + '/' + padInt(d.getDate()) + ' ' + padInt(d.getHours()) + ":" + padInt(d.getMinutes()); }
+export function timeFmt12(d = new Date()) { return padInt((d.getHours() + 24) % 12 || 12) + ":" + padInt(d.getMinutes()) + ":" + padInt(d.getSeconds()) + " " + (d.getHours() > 12 ? "PM" : "AM"); }
+export function toLocalISOString(d = new Date()) {
+    return `${d.getFullYear()}-${padInt(d.getMonth() + 1)}-${padInt(d.getDate())}T${padInt(d.getHours())}:${padInt(d.getMinutes())}:${padInt(d.getSeconds())}`;
+}
+export function toTime(s) {
+    if (typeof s == 'string' && s.indexOf(':') >= 0)
+        return s;
+    const ms = s instanceof Date
+        ? s.getTime()
+        : typeof s == 'string'
+            ? fromXsdDuration(s) * 1000
+            : s;
+    return msToTime(ms);
+}
+export function msToTime(s) {
+    const ms = s % 1000;
+    s = (s - ms) / 1000;
+    const secs = s % 60;
+    s = (s - secs) / 60;
+    const mins = s % 60;
+    const hrs = (s - mins) / 60;
+    let t = padInt(hrs) + ':' + padInt(mins) + ':' + padInt(secs);
+    return ms > 0
+        ? t + '.' + padStart(`${ms}`, 3, '0').substring(0, 3)
+        : t;
+}
+export function padStart(s, len, pad) {
+    len = Math.floor(len) || 0;
+    if (len < s.length)
+        return s;
+    pad = pad ? String(pad) : ' ';
+    let p = '';
+    let l = len - s.length;
+    let i = 0;
+    while (p.length < l) {
+        if (!pad[i])
+            i = 0;
+        p += pad[i];
+        i++;
+    }
+    return p + s.slice(0);
+}
+function bsAlert(msg) { return '<div class="alert alert-danger">' + msg + '</div>'; }
+function attr(e, name) { return e.getAttribute(name); }
+function sattr(e, name, value) { return e.setAttribute(name, value); }
+function rattr(e, name) { return e.removeAttribute(name); }
+export function createElement(tagName, options) {
+    const keyAliases = { className: 'class', htmlFor: 'for' };
+    const el = document.createElement(tagName);
+    if (options?.attrs) {
+        for (const key in options.attrs) {
+            sattr(el, keyAliases[key] || key, options.attrs[key]);
+        }
+    }
+    if (options?.events) {
+        on(el, options.events);
+    }
+    if (options && options.insertAfter) {
+        options.insertAfter.parentNode.insertBefore(el, options.insertAfter.nextSibling);
+    }
+    return el;
+}
+function showInvalidInputs() {
+    let errorMsg = attr(this, 'data-invalid');
+    if (errorMsg) {
+        //[data-invalid] can either be on input control or .form-check container containing group of radio/checkbox
+        const isCheck = this.type === "checkbox" || this.type === "radio" || hasClass(this, 'form-check');
+        const elFormCheck = isCheck ? parent(this, 'form-check') : null;
+        if (!isCheck)
+            addClass(this, 'is-invalid');
+        else
+            addClass(elFormCheck || this.parentElement, 'is-invalid form-control');
+        const elNext = this.nextElementSibling;
+        const elLast = elNext && (attr(elNext, 'for') === this.id || elNext.tagName === "SMALL")
+            ? (isCheck ? elFormCheck || elNext.parentElement : elNext)
+            : this;
+        const elError = elLast != null && elLast.nextElementSibling && hasClass(elLast.nextElementSibling, 'invalid-feedback')
+            ? elLast.nextElementSibling
+            : createElement("div", { insertAfter: elLast, attrs: { className: 'invalid-feedback' } });
+        elError.innerHTML = errorMsg;
+    }
+}
+function parent(el, cls) {
+    while (el != null && !hasClass(el, cls))
+        el = el.parentElement;
+    return el;
+}
+function hasClass(el, cls) {
+    return !el ? false
+        : el.classList
+            ? el.classList.contains(cls)
+            : (" " + el.className + " ").replace(/[\n\t\r]/g, " ").indexOf(" " + cls + " ") > -1;
+}
+function addClass(el, cls) {
+    return !el ? null
+        : el.classList
+            ? el.classList.add(...cls.split(' '))
+            : !hasClass(el, cls)
+                ? el.className = (el.className + " " + cls).trim() : null;
+}
+function remClass(el, cls) {
+    return !el ? null
+        : el.classList
+            ? el.classList.remove(cls)
+            : hasClass(el, cls)
+                ? el.className = el.className.replace(/(\s|^)someclass(\s|$)/, ' ')
+                : null;
+}
+export function isElement(el) {
+    return typeof window != "undefined" && (el instanceof window.Element || el == window.document);
+}
+export function $1(sel, el) {
+    return typeof sel === "string" ? (el || document).querySelector(sel) : sel || null;
+}
+export function $$(sel, el) {
+    if (typeof sel === "string")
+        return Array.from((el || typeof document != "undefined" ? document : null)?.querySelectorAll(sel) ?? []);
+    if (Array.isArray(sel))
+        return sel.flatMap(x => $$(x, el));
+    return [sel];
+}
+export function on(sel, handlers) {
+    $$(sel).forEach(e => {
+        Object.keys(handlers).forEach(function (evt) {
+            let fn = handlers[evt];
+            if (typeof evt === 'string' && typeof fn === 'function') {
+                e.addEventListener(evt, handlers[evt] = fn.bind(e));
+            }
+        });
+    });
+    return handlers;
+}
+export function addScript(src) {
+    return new Promise((resolve, reject) => {
+        document.body.appendChild(createElement('script', {
+            attrs: { src },
+            events: {
+                load: resolve,
+                error: reject,
+            }
+        }));
+    });
+}
+export function delaySet(f, opt) {
+    let duration = opt && opt.duration || 300;
+    let timeout = setTimeout(() => f(true), duration);
+    return () => { clearTimeout(timeout); f(false); };
+}
+// init generic behavior to bootstrap elements
+export function bootstrap(el) {
+    const els = (el || document).querySelectorAll('[data-invalid]');
+    for (let i = 0; i < els.length; i++) {
+        showInvalidInputs.call(els[i]);
+    }
+}
+if (typeof window != "undefined" && window.Element !== undefined) { // polyfill IE9+
+    if (!Element.prototype.matches) {
+        Element.prototype.matches = Element.prototype.msMatchesSelector ||
+            Element.prototype.webkitMatchesSelector;
+    }
+    if (!Element.prototype.closest) {
+        Element.prototype.closest = function (s) {
+            let el = this;
+            do {
+                if (el.matches(s))
+                    return el;
+                el = el.parentElement || el.parentNode;
+            } while (el !== null && el.nodeType === 1);
+            return null;
+        };
+    }
+}
+function handleEvent(handlers, el = document, type) {
+    el.addEventListener(type, function (evt) {
+        const evtData = `data-${type}`;
+        let el = evt.target;
+        let x = attr(el, evtData);
+        if (!x) {
+            let elParent = el.closest(`[${evtData}]`);
+            if (elParent) {
+                x = attr(elParent, evtData);
+                el = elParent;
+            }
+        }
+        if (!x)
+            return;
+        let pos = x.indexOf(':');
+        if (pos >= 0) {
+            const cmd = x.substring(0, pos);
+            const data = x.substring(pos + 1);
+            const fn = handlers[cmd];
+            if (fn) {
+                fn.apply(el, data.split(','));
+            }
+        }
+        else {
+            const fn = handlers[x];
+            if (fn) {
+                fn.apply(el, [].slice.call(arguments));
+            }
+        }
+    });
+}
+export function bindHandlers(handlers, el = document, opt = null) {
+    if (opt && opt.events) {
+        opt.events.forEach(evt => handleEvent(handlers, el, evt));
+    }
+    else {
+        ['click', 'dblclick', 'change', 'focus', 'blur', 'focusin', 'focusout', 'select', 'keydown', 'keypress', 'keyup', 'hover', 'toggle', 'input']
+            .forEach(evt => {
+            if (el.querySelector(`[data-${evt}]`)) {
+                handleEvent(handlers, el, evt);
+            }
+        });
+    }
+}
+export function bootstrapForm(form, options) {
+    if (!form)
+        return;
+    if (options.model)
+        populateForm(form, options.model);
+    form.onsubmit = function (evt) {
+        evt.preventDefault();
+        options.type = "bootstrap-v4";
+        return ajaxSubmit(form, options);
+    };
+}
+function applyErrors(f, status, opt) {
+    const validation = {
+        overrideMessages: false,
+        messages: {
+            NotEmpty: "Required",
+            NotNull: "Required",
+            Email: "Invalid email",
+            AlreadyExists: "Already exists"
+        },
+        errorFilter: function (errorMsg, errorCode, type) {
+            return this.overrideMessages
+                ? this.messages[errorCode] || errorMsg || splitCase(errorCode)
+                : errorMsg || splitCase(errorCode);
+        }
+    };
+    clearErrors(f);
+    if (!status)
+        return;
+    status = sanitize(status);
+    addClass(f, "has-errors");
+    const bs4 = opt && opt.type === "bootstrap-v4";
+    const v = { ...validation, ...opt };
+    if (opt.messages) {
+        v.overrideMessages = true;
+    }
+    const filter = v.errorFilter.bind(v);
+    const errors = status.errors;
+    if (errors && errors.length) {
+        let fieldMap = {}, fieldLabelMap = {};
+        $$("input,textarea,select,button").forEach(x => {
+            const el = x;
+            const prev = el.previousElementSibling;
+            const next = el.nextElementSibling;
+            const isCheck = el.type === "radio" || el.type === "checkbox";
+            const fieldId = (!isCheck ? el.id : null) || attr(el, "name");
+            if (!fieldId)
+                return;
+            const key = fieldId.toLowerCase();
+            fieldMap[key] = el;
+            if (!bs4) {
+                if (hasClass(prev, "help-inline") || hasClass(prev, "help-block")) {
+                    fieldLabelMap[key] = prev;
+                }
+                else if (hasClass(next, "help-inline") || hasClass(next, "help-block")) {
+                    fieldLabelMap[key] = next;
+                }
+            }
+        });
+        $$(".help-inline[data-for],.help-block[data-for]").forEach(el => {
+            const key = attr(el, "data-for").toLowerCase();
+            fieldLabelMap[key] = el;
+        });
+        for (let error of errors) {
+            const key = (error.fieldName || "").toLowerCase();
+            const field = fieldMap[key];
+            if (field) {
+                if (!bs4) {
+                    addClass(field, "error");
+                    addClass(field.parentElement, "has-error");
+                }
+                else {
+                    const type = attr(field, 'type'), isCheck = type === "radio" || type === "checkbox";
+                    if (!isCheck)
+                        addClass(field, "is-invalid");
+                    sattr(field, "data-invalid", filter(error.message, error.errorCode, "field"));
+                }
+            }
+            const lblErr = fieldLabelMap[key];
+            if (!lblErr)
+                continue;
+            addClass(lblErr, "error");
+            lblErr.innerHTML = filter(error.message, error.errorCode, "field");
+            lblErr.style.display = 'block';
+        }
+        $$("[data-validation-summary]").forEach(el => {
+            const fields = attr(el, 'data-validation-summary').split(',');
+            const summaryMsg = errorResponseExcept.call(status, fields);
+            if (summaryMsg)
+                el.innerHTML = bsAlert(summaryMsg);
+        });
+    }
+    else {
+        const htmlSummary = filter(status.message || splitCase(status.errorCode), status.errorCode, "summary");
+        if (!bs4) {
+            $$(".error-summary").forEach(el => {
+                el.innerHTML = htmlSummary(el).style.display = 'block';
+            });
+        }
+        else {
+            $$('[data-validation-summary]').forEach(el => el.innerHTML = htmlSummary[0] === "<" ? htmlSummary : bsAlert(htmlSummary));
+        }
+    }
+    return f;
+}
+function clearErrors(f) {
+    remClass(f, 'has-errors');
+    $$('.error-summary').forEach(el => {
+        el.innerHTML = "";
+        el.style.display = "none";
+    });
+    $$('[data-validation-summary]').forEach(el => {
+        el.innerHTML = "";
+    });
+    $$('.error').forEach(el => remClass(el, 'error'));
+    $$('.form-check.is-invalid [data-invalid]').forEach(el => {
+        rattr(el, 'data-invalid');
+    });
+    $$('.form-check.is-invalid').forEach(el => remClass(el, 'form-control'));
+    $$('.is-invalid').forEach(el => {
+        remClass(el, 'is-invalid');
+        rattr(el, 'data-invalid');
+    });
+    $$('.is-valid').forEach(el => remClass(el, 'is-valid'));
+}
+var Types;
+(function (Types) {
+    Types["MultiPart"] = "multipart/form-data";
+    Types["UrlEncoded"] = "application/x-www-form-urlencoded";
+    Types["Json"] = "application/json";
+})(Types || (Types = {}));
+export function toVarNames(names) {
+    return !names ? [] :
+        isArray(names)
+            ? names
+            : names.split(',').map(s => s.trim());
+}
+export function formSubmit(options = {}) {
+    const f = this;
+    const contentType = attr(f, 'enctype') || Types.UrlEncoded;
+    if (contentType == Types.MultiPart && window.FormData === undefined)
+        throw new Error(`FormData Type is needed to send '${Types.MultiPart}' Content Types`);
+    let body;
+    try {
+        body = serializeForm(f, contentType);
+    }
+    catch (e) {
+        throw new Error(`${e.message || e}`);
+    }
+    const headers = new Headers();
+    headers.set("Accept", Types.Json);
+    headers.set("Content-Type", contentType);
+    const req = {
+        method: attr(f, 'method') || 'POST',
+        credentials: 'include',
+        mode: 'cors',
+        headers,
+        body,
+    };
+    if (options.requestFilter)
+        options.requestFilter(req);
+    return fetch(new Request(options.url || attr(f, 'action'), req))
+        .catch(e => { throw new Error(`Network is unreachable (${e.message || e})`); })
+        .then(r => {
+        if (options.responseFilter)
+            options.responseFilter(r);
+        if (!r.ok) {
+            return r.json()
+                .catch(e => { throw new Error("The request failed with " + (r.statusText || r.status)); })
+                .then(o => { throw Object.assign(new ErrorResponse(), sanitize(o)); });
+        }
+        handleHeaderBehaviors(f, r);
+        return fromResponse(r);
+    });
+}
+function handleHeaderBehaviors(f, r) {
+    const loc = r.headers.get('X-Location');
+    if (loc) {
+        location.href = loc;
+    }
+    const evt = r.headers.get('X-Trigger');
+    if (evt) {
+        const pos = evt.indexOf(':');
+        const cmd = pos >= 0 ? evt.substring(0, pos) : evt;
+        const data = pos >= 0 ? evt.substring(pos + 1) : null;
+        triggerEvent(f, cmd, data ? [data] : []);
+    }
+}
+export function ajaxSubmit(f, options = {}) {
+    const type = options.type;
+    const bs4 = type === "bootstrap-v4";
+    clearErrors(f);
+    try {
+        if (options.validate && options.validate.call(f) === false)
+            return false;
+    }
+    catch (e) {
+        return false;
+    }
+    addClass(f, 'loading');
+    const disableSel = options.onSubmitDisable == null
+        ? "[type=submit]"
+        : options.onSubmitDisable;
+    const disable = disableSel != null && disableSel != "";
+    if (disable) {
+        $$(disableSel).forEach(el => {
+            sattr(el, 'disabled', 'disabled');
+        });
+    }
+    function handleError(errMsg, err = null) {
+        if (err) {
+            applyErrors(f, err.ResponseStatus || err.responseStatus, { ...options });
+        }
+        else if (errMsg) {
+            addClass(f, "has-errors");
+            const errorSummary = $$(".error-summary")[0];
+            if (errorSummary) {
+                errorSummary.innerHTML = errMsg;
+            }
+            if (bs4) {
+                const elSummary = $$('[data-validation-summary]')[0];
+                if (elSummary) {
+                    elSummary.innerHTML = bsAlert(errMsg);
+                }
+            }
+        }
+        if (options.error) {
+            options.error.call(f, err);
+        }
+        if (bs4) {
+            $$('[data-invalid]').forEach(el => showInvalidInputs.call(el));
+        }
+    }
+    const submitFn = options.submit || formSubmit;
+    return submitFn.call(f, options)
+        .then(obj => {
+        if (options.success)
+            options.success.call(f, obj);
+        return false;
+    })
+        .catch(e => {
+        if (e.responseStatus)
+            handleError(null, e);
+        else
+            handleError(`${e.message || e}`, null);
+    })
+        .finally(() => {
+        remClass(f, 'loading');
+        if (disable) {
+            $$(disableSel).forEach(el => {
+                rattr(el, 'disabled');
+            });
+        }
+        if (options.complete) {
+            options.complete.call(f);
+        }
+    });
+}
+function fromResponse(r) {
+    const contentType = r.headers.get("content-type");
+    const isJson = contentType && contentType.indexOf(Types.Json) !== -1;
+    if (isJson)
+        return r.json();
+    let len = r.headers.get("content-length");
+    if (len === "0" || (len == null && !isJson))
+        return null;
+    return r.json();
+}
+export function serializeForm(form, contentType = null) {
+    return contentType === Types.MultiPart
+        ? new FormData(form)
+        : contentType == Types.Json
+            ? JSON.stringify(serializeToObject(form))
+            : serializeToUrlEncoded(form);
+}
+function formEntries(form, state, fn) {
+    let field, f = form;
+    let len = f.elements.length;
+    for (let i = 0; i < len; i++) {
+        field = f.elements[i];
+        if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
+            if (field.type == 'select-multiple') {
+                for (let j = f.elements[i].options.length - 1; j >= 0; j--) {
+                    if (field.options[j].selected)
+                        fn(state, field.name, field.options[j].value);
+                }
+            }
+            else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
+                fn(state, field.name, field.value);
+            }
+        }
+    }
+    return state;
+}
+export function serializeToObject(form) {
+    return formEntries(form, {}, (to, name, value) => to[name] = value);
+}
+export function serializeToUrlEncoded(form) {
+    const to = formEntries(form, [], (s, name, value) => typeof value == 'string'
+        ? s.push(encodeURIComponent(name) + "=" + encodeURIComponent(value))
+        : null);
+    return to.join('&').replace(/%20/g, '+');
+}
+export function serializeToFormData(form) {
+    return formEntries(form, new FormData(), (to, name, value) => to.append(name, value));
+}
+export function sanitizeFormData(formData) {
+    // @ts-ignore
+    for (let [key, value] of formData) {
+        // Remove 0 length files
+        if (typeof value == 'object' && value.size === 0) {
+            formData.delete(key);
+        }
+    }
+    return formData;
+}
+export function triggerEvent(el, name, data = null) {
+    if (document.createEvent) {
+        let evt = document.createEvent(name == 'click' || name.startsWith('mouse') ? 'MouseEvents' : 'HTMLEvents');
+        evt.initEvent(name, true, true);
+        evt.data = data;
+        el.dispatchEvent(evt);
+    }
+    else {
+        let evt = document.createEventObject();
+        el.fireEvent("on" + name, evt);
+    }
+}
+export function populateForm(form, model) {
+    if (!model)
+        return;
+    const toggleCase = (s) => !s ? s :
+        s[0] === s[0].toUpperCase() ? toCamelCase(s) : s[0] === s[0].toLowerCase() ? toPascalCase(s) : s;
+    for (let key in model) {
+        let val = model[key];
+        if (typeof val == 'undefined' || val === null)
+            val = '';
+        const el = form.elements.namedItem(key) || form.elements.namedItem(toggleCase(key));
+        const input = el;
+        if (!el)
+            continue;
+        const type = input.type || el[0].type;
+        switch (type) {
+            case 'radio':
+            case 'checkbox':
+                const len = el.length;
+                for (let i = 0; i < len; i++) {
+                    el[i].checked = (val.indexOf(el[i].value) > -1);
+                }
+                break;
+            case 'select-multiple':
+                const values = isArray(val) ? val : [val];
+                const select = el;
+                for (let i = 0; i < select.options.length; i++) {
+                    select.options[i].selected = (values.indexOf(select.options[i].value) > -1);
+                }
+                break;
+            case 'select':
+            case 'select-one':
+                input.value = val.toString() || val;
+                break;
+            case 'date':
+                const d = toDate(val);
+                if (d)
+                    input.value = d.toISOString().split('T')[0];
+                break;
+            default:
+                input.value = val;
+                break;
+        }
+    }
+}
+export function trimEnd(s, c) {
+    let end = s.length;
+    while (end > 0 && s[end - 1] === c) {
+        --end;
+    }
+    return (end < s.length) ? s.substring(0, end) : s;
+}
+export function safeVarName(s) {
+    return s.replace(/[\W]+/g, '');
+}
+export function pick(o, keys) {
+    const to = {};
+    for (const k in o) {
+        if (o.hasOwnProperty(k) && keys.indexOf(k) >= 0) {
+            to[k] = o[k];
+        }
+    }
+    return to;
+}
+export function omit(o, keys) {
+    const to = {};
+    for (const k in o) {
+        if (o.hasOwnProperty(k) && keys.indexOf(k) < 0) {
+            to[k] = o[k];
+        }
+    }
+    return to;
+}
+export function omitEmpty(o) {
+    const to = {};
+    for (const k in o) {
+        const v = o[k];
+        if (v != null && v !== '') {
+            to[k] = v;
+        }
+    }
+    return to;
+}
+export function apply(x, fn) {
+    fn(x);
+    return x;
+}
+export function each(xs, f, o) {
+    return xs.reduce((acc, x) => { f(acc, x); return acc; }, o || {});
+}
+export function resolve(o, f) {
+    let ret = typeof o == 'function' ? o() : o;
+    return typeof f == 'function' ? f(ret) : ret;
+}
+export function mapGet(o, name) {
+    if (!o || !name)
+        return null;
+    let ret = o[name];
+    if (ret)
+        return ret;
+    if (typeof o == 'object') {
+        let nameLower = name.toLowerCase();
+        let match = Object.keys(o).find(k => k.toLowerCase() === nameLower);
+        return match ? o[match] : null;
+    }
+    return null;
+}
+export function apiValue(o) {
+    if (o == null)
+        return '';
+    if (typeof o == 'string')
+        return o.substring(0, 6) === '/Date('
+            ? toDate(o)
+            : o.trim();
+    return o;
+}
+export function apiValueFmt(o) {
+    let ret = apiValue(o);
+    return (ret != null
+        ? isDate(ret)
+            ? dateFmt(ret)
+            : ret
+        : null) || '';
+}
+/* NAV */
+export function activeClassNav(x, activePath) {
+    return x.href != null && (x.exact || activePath.length <= 1
+        ? trimEnd(activePath, '/').toLowerCase() === trimEnd((x.href), '/').toLowerCase()
+        : trimEnd(activePath, '/').toLowerCase().startsWith(trimEnd((x.href), '/').toLowerCase()))
+        ? 'active'
+        : null;
+}
+export function activeClass(href, activePath, exact) {
+    return href != null && (exact || activePath.length <= 1
+        ? trimEnd(activePath, '/').toLowerCase() === trimEnd(href, '/').toLowerCase()
+        : trimEnd(activePath, '/').toLowerCase().startsWith(trimEnd(href, '/').toLowerCase()))
+        ? 'active'
+        : null;
+}
+function bootstrapColors() { return ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark']; }
+export const BootstrapColors = bootstrapColors();
+export function btnColorClass(props) {
+    for (const color of bootstrapColors()) {
+        if (props[color]) {
+            return 'btn-' + color;
+        }
+        if (props['outline-' + color]) {
+            return 'btn-outline-' + color;
+        }
+    }
+    return null;
+}
+function bootstrapSizes() { return ['xs', 'sm', 'md', 'lg']; }
+export const BootstrapSizes = bootstrapSizes();
+export function btnSizeClass(props) {
+    for (const size of bootstrapSizes()) {
+        if (props[size]) {
+            return 'btn-' + size;
+        }
+    }
+    return null;
+}
+export function btnClasses(props) {
+    const to = [];
+    const color = btnColorClass(props);
+    if (color) {
+        to.push(color);
+    }
+    const size = btnSizeClass(props);
+    if (size) {
+        to.push(size);
+    }
+    if (props.block) {
+        to.push('btn-block');
+    }
+    return to;
+}
+export class NavDefaults {
+    static navClass = 'nav';
+    static navItemClass = 'nav-item';
+    static navLinkClass = 'nav-link';
+    static childNavItemClass = 'nav-item dropdown';
+    static childNavLinkClass = 'nav-link dropdown-toggle';
+    static childNavMenuClass = 'dropdown-menu';
+    static childNavMenuItemClass = 'dropdown-item';
+    static create() { return new NavOptions(); }
+    static forNav(options) { return options || NavDefaults.create(); }
+    static overrideDefaults(targets, source) {
+        if (targets == null) {
+            return source;
+        }
+        targets = Object.assign({}, targets); // clone
+        if (targets.navClass === NavDefaults.navClass && source.navClass != null) {
+            targets.navClass = source.navClass;
+        }
+        if (targets.navItemClass === NavDefaults.navItemClass && source.navItemClass != null) {
+            targets.navItemClass = source.navItemClass;
+        }
+        if (targets.navLinkClass === NavDefaults.navLinkClass && source.navLinkClass != null) {
+            targets.navLinkClass = source.navLinkClass;
+        }
+        if (targets.childNavItemClass === NavDefaults.childNavItemClass && source.childNavItemClass != null) {
+            targets.childNavItemClass = source.childNavItemClass;
+        }
+        if (targets.childNavLinkClass === NavDefaults.childNavLinkClass && source.childNavLinkClass != null) {
+            targets.childNavLinkClass = source.childNavLinkClass;
+        }
+        if (targets.childNavMenuClass === NavDefaults.childNavMenuClass && source.childNavMenuClass != null) {
+            targets.childNavMenuClass = source.childNavMenuClass;
+        }
+        if (targets.childNavMenuItemClass === NavDefaults.childNavMenuItemClass && source.childNavMenuItemClass != null) {
+            targets.childNavMenuItemClass = source.childNavMenuItemClass;
+        }
+        return targets;
+    }
+    static showNav(navItem, attributes) {
+        if (attributes == null || attributes.length === 0) {
+            return navItem.show == null;
+        }
+        if (navItem.show != null && attributes.indexOf(navItem.show) < 0) {
+            return false;
+        }
+        if (navItem.hide != null && attributes.indexOf(navItem.hide) >= 0) {
+            return false;
+        }
+        return true;
+    }
+}
+export class NavLinkDefaults {
+    static forNavLink(options) { return options || NavDefaults.create(); }
+}
+export class NavbarDefaults {
+    static navClass = 'navbar-nav';
+    static create() { return new NavOptions({ navClass: NavbarDefaults.navClass }); }
+    static forNavbar(options) { return NavDefaults.overrideDefaults(options, NavbarDefaults.create()); }
+}
+export class NavButtonGroupDefaults {
+    static navClass = 'btn-group';
+    static navItemClass = 'btn btn-primary';
+    static create() { return new NavOptions({ navClass: NavButtonGroupDefaults.navClass, navItemClass: NavButtonGroupDefaults.navItemClass }); }
+    static forNavButtonGroup(options) { return NavDefaults.overrideDefaults(options, NavButtonGroupDefaults.create()); }
+}
+export class LinkButtonDefaults {
+    static navItemClass = 'btn';
+    static create() { return new NavOptions({ navItemClass: LinkButtonDefaults.navItemClass }); }
+    static forLinkButton(options) { return NavDefaults.overrideDefaults(options || null, LinkButtonDefaults.create()); }
+}
+export class UserAttributes {
+    static fromSession(session) {
+        const to = [];
+        if (session != null) {
+            to.push('auth');
+            if (session.roles) {
+                to.push(...session.roles.map(x => 'role:' + x));
+            }
+            if (session.permissions) {
+                to.push(...session.permissions.map(x => 'perm:' + x));
+            }
+        }
+        return to;
+    }
+}
+export class NavOptions {
+    static fromSession(session, to) {
+        to = to || new NavOptions();
+        to.attributes = UserAttributes.fromSession(session);
+        return to;
+    }
+    attributes;
+    activePath;
+    baseHref;
+    navClass;
+    navItemClass;
+    navLinkClass;
+    childNavItemClass;
+    childNavLinkClass;
+    childNavMenuClass;
+    childNavMenuItemClass;
+    constructor(init) {
+        this.attributes = [];
+        this.navClass = NavDefaults.navClass;
+        this.navItemClass = NavDefaults.navItemClass;
+        this.navLinkClass = NavDefaults.navLinkClass;
+        this.childNavItemClass = NavDefaults.childNavItemClass;
+        this.childNavLinkClass = NavDefaults.childNavLinkClass;
+        this.childNavMenuClass = NavDefaults.childNavMenuClass;
+        this.childNavMenuItemClass = NavDefaults.childNavMenuItemClass;
+        Object.assign(this, init);
+    }
+}
+export function classNames(...args) {
+    const classes = [];
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if (!arg)
+            continue;
+        const argType = typeof arg;
+        if (argType === 'string' || argType === 'number') {
+            classes.push(arg);
+        }
+        else if (Array.isArray(arg) && arg.length) {
+            const inner = classNames.apply(null, arg);
+            if (inner) {
+                classes.push(inner);
+            }
+        }
+        else if (argType === 'object') {
+            for (let key of Object.keys(arg)) {
+                if (arg[key]) {
+                    classes.push(key);
+                }
+            }
+        }
+    }
+    return classes.join(' ');
+}
+export function fromXsdDuration(xsd) {
+    let days = 0;
+    let hours = 0;
+    let minutes = 0;
+    let seconds = 0;
+    let ms = 0.0;
+    let t = splitOnFirst(xsd.substring(1), 'T');
+    let hasTime = t.length == 2;
+    let d = splitOnFirst(t[0], 'D');
+    if (d.length == 2) {
+        days = parseInt(d[0], 10) || 0;
+    }
+    if (hasTime) {
+        let h = splitOnFirst(t[1], 'H');
+        if (h.length == 2) {
+            hours = parseInt(h[0], 10) || 0;
+        }
+        let m = splitOnFirst(h[h.length - 1], 'M');
+        if (m.length == 2) {
+            minutes = parseInt(m[0], 10) || 0;
+        }
+        let s = splitOnFirst(m[m.length - 1], 'S');
+        if (s.length == 2) {
+            ms = parseFloat(s[0]);
+        }
+        seconds = ms | 0;
+        ms -= seconds;
+    }
+    let totalSecs = (days * 24 * 60 * 60) + (hours * 60 * 60) + (minutes * 60) + seconds;
+    return totalSecs + ms;
+}
+function timeFmt(time, asXsd) {
+    let totalSeconds = time;
+    let wholeSeconds = time | 0;
+    let seconds = wholeSeconds;
+    let sec = (seconds >= 60 ? seconds % 60 : seconds);
+    seconds = (seconds / 60);
+    let min = seconds >= 60 ? seconds % 60 : seconds;
+    seconds = (seconds / 60);
+    let hours = seconds >= 24 ? seconds % 24 : seconds;
+    let days = seconds / 24;
+    let remainingSecs = sec + (totalSeconds - wholeSeconds);
+    let sb = asXsd ? 'P' : '';
+    if (asXsd) {
+        if ((days | 0) > 0) {
+            sb += `${days | 0}D`;
+        }
+        if (days == 0 || (hours + min + sec) + remainingSecs > 0) {
+            sb += "T";
+            if ((hours | 0) > 0) {
+                sb += `${hours | 0}H`;
+            }
+            if ((min | 0) > 0) {
+                sb += `${min | 0}M`;
+            }
+            if (remainingSecs > 0) {
+                let secFmt = remainingSecs.toFixed(7);
+                secFmt = trimEnd(trimEnd(secFmt, '0'), '.');
+                sb += `${secFmt}S`;
+            }
+            else if (sb.length == 2) {
+                sb += '0S';
+            }
+        }
+    }
+    else {
+        if ((days | 0) > 0) {
+            sb += `${days | 0}:`;
+        }
+        sb += `${padInt(hours | 0)}:${padInt(min | 0)}:`;
+        if (remainingSecs > 0) {
+            let secFmt = remainingSecs.toFixed(7);
+            secFmt = trimEnd(trimEnd(secFmt, '0'), '.');
+            sb += remainingSecs >= 10 ? `${secFmt}` : `0${secFmt}`;
+        }
+        else {
+            sb += '00';
+        }
+    }
+    return sb;
+}
+export function toXsdDuration(time) { return timeFmt(time, true); }
+export function toTimeSpanFmt(time) { return timeFmt(time, false); }
+export function flatMap(f, xs) { return xs.reduce((r, x) => r.concat(f(x)), []); }
+export function uniq(xs) { return Array.from(new Set(xs)).sort((x, y) => x > y ? 1 : -1); }
+export function enc(o) {
+    return o == null ? null : typeof o == 'string'
+        ? o.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&#34;')
+        : `${o}`;
+}
+export function htmlAttrs(o) {
+    let sb = [];
+    Object.keys(o).forEach(k => {
+        if (sb.length > 0)
+            sb.push(' ');
+        sb.push(k);
+        sb.push('="');
+        sb.push(enc(o[k]));
+        sb.push('"');
+    });
+    return sb.join('');
+}
+export function indexOfAny(str, needles) {
+    for (let i = 0, len = needles.length; i < len; i++) {
+        let pos = str.indexOf(needles[i]);
+        if (pos >= 0)
+            return pos;
+    }
+    return -1;
+}
+export function isNullOrEmpty(o) {
+    return (o === null || o === undefined || o === "");
+}
+// From .NET DateTime (WCF JSON or ISO Date) to JS Date
+export function fromDateTime(dateTime) {
+    return toDate(dateTime);
+}
+// From JS Date to .NET DateTime (WCF JSON Date)
+export function toDateTime(date) {
+    return `\/Date(${date.getTime()})\/`;
+}
+// From .NET TimeSpan (XSD Duration) to JS String
+export function fromTimeSpan(xsdDuration) {
+    return xsdDuration;
+}
+// From JS String to .NET TimeSpan (XSD Duration)
+export function toTimeSpan(xsdDuration) {
+    return xsdDuration;
+}
+// From .NET Guid to JS String
+export function fromGuid(xsdDuration) {
+    return xsdDuration;
+}
+// From JS String to .NET Guid
+export function toGuid(xsdDuration) {
+    return xsdDuration;
+}
+// From .NET byte[] (Base64 String) to JVM signed byte[]
+export function fromByteArray(base64) {
+    let binaryStr = _atob(base64);
+    let len = binaryStr.length;
+    let bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        bytes[i] = binaryStr.charCodeAt(i);
+    }
+    return bytes;
+}
+// From JS Uint8Array to .NET byte[] (Base64 String)
+export function toByteArray(bytes) {
+    let str = String.fromCharCode.apply(null, bytes);
+    return _btoa(str);
+}
+// From JS String to Base64 String
+export function toBase64String(source) {
+    return JsonServiceClient.toBase64(source);
+}
+export class StringBuffer {
+    buffer_ = '';
+    constructor(opt_a1, ...var_args) {
+        if (opt_a1 != null)
+            this.append.apply(this, arguments);
+    }
+    set(s) {
+        this.buffer_ = '' + s;
+    }
+    append(a1, opt_a2, ...var_args) {
+        this.buffer_ += String(a1);
+        if (opt_a2 != null) {
+            for (let i = 1; i < arguments.length; i++) {
+                this.buffer_ += arguments[i];
+            }
+        }
+        return this;
+    }
+    clear() { this.buffer_ = ''; }
+    getLength() { return this.buffer_.length; }
+    toString() { return this.buffer_; }
+}
+export class JSV {
+    static ESCAPE_CHARS = ['"', ':', ',', '{', '}', '[', ']', '\r', '\n'];
+    static encodeString(str) {
+        if (str == null)
+            return null;
+        if (str === '')
+            return '""';
+        if (str.indexOf('"'))
+            str = str.replace(/"/g, '""');
+        return indexOfAny(str, JSV.ESCAPE_CHARS) >= 0
+            ? '"' + str + '"'
+            : str;
+    }
+    static encodeArray(array) {
+        let value, sb = new StringBuffer();
+        for (let i = 0, len = array.length; i < len; i++) {
+            value = array[i];
+            if (isNullOrEmpty(value) || typeof value === 'function')
+                continue;
+            if (sb.getLength() > 0)
+                sb.append(',');
+            sb.append(JSV.stringify(value));
+        }
+        return `[${sb.toString()}]`;
+    }
+    static encodeObject(obj) {
+        let value, sb = new StringBuffer();
+        for (let key in obj) {
+            value = obj[key];
+            if (!obj.hasOwnProperty(key) || isNullOrEmpty(value) || typeof value === 'function')
+                continue;
+            if (sb.getLength() > 0)
+                sb.append(',');
+            sb.append(JSV.encodeString(key));
+            sb.append(':');
+            sb.append(JSV.stringify(value));
+        }
+        return `{${sb.toString()}}`;
+    }
+    static stringify(obj) {
+        if (obj === null || obj === undefined)
+            return null;
+        let typeOf = typeof (obj);
+        if (typeOf === 'function' || typeOf === 'symbol')
+            return null;
+        if (typeOf === 'object') {
+            let ctorStr = obj.constructor.toString().toLowerCase();
+            if (ctorStr.indexOf('string') >= 0)
+                return JSV.encodeString(obj);
+            if (ctorStr.indexOf('boolean') >= 0)
+                return obj ? 'true' : 'false';
+            if (ctorStr.indexOf('number') >= 0)
+                return obj;
+            if (ctorStr.indexOf('date') >= 0)
+                return JSV.encodeString(toLocalISOString(obj));
+            if (ctorStr.indexOf('array') >= 0)
+                return JSV.encodeArray(obj);
+            return JSV.encodeObject(obj);
+        }
+        switch (typeOf) {
+            case 'string':
+                return JSV.encodeString(obj);
+            case 'boolean':
+                return obj ? 'true' : 'false';
+            case 'number':
+            default:
+                return obj;
+        }
+    }
+}
+export function uniqueKeys(rows) {
+    let to = [];
+    rows.forEach(o => Object.keys(o).forEach(k => {
+        if (to.indexOf(k) === -1) {
+            to.push(k);
+        }
+    }));
+    return to;
+}
+export function alignLeft(str, len, pad = ' ') {
+    if (len < 0)
+        return '';
+    let aLen = len + 1 - str.length;
+    if (aLen <= 0)
+        return str;
+    return pad + str + pad.repeat(len + 1 - str.length);
+}
+export function alignCenter(str, len, pad = ' ') {
+    if (len < 0)
+        return '';
+    if (!str)
+        str = '';
+    let nLen = str.length;
+    let half = Math.floor(len / 2 - nLen / 2);
+    let odds = Math.abs((nLen % 2) - (len % 2));
+    return pad.repeat(half + 1) + str + pad.repeat(half + 1 + odds);
+}
+export function alignRight(str, len, pad = ' ') {
+    if (len < 0)
+        return '';
+    let aLen = len + 1 - str.length;
+    if (aLen <= 0)
+        return str;
+    return pad.repeat(len + 1 - str.length) + str + pad;
+}
+export function alignAuto(obj, len, pad = ' ') {
+    let str = `${obj}`;
+    if (str.length <= len) {
+        return typeof obj === "number"
+            ? alignRight(str, len, pad)
+            : alignLeft(str, len, pad);
+    }
+    return str;
+}
+export function EventBus() {
+    let { subscribe, publish } = createBus();
+    this.subscribe = subscribe;
+    this.publish = publish;
+}
+export function createBus() {
+    let subscriptions = {};
+    function subscribe(type, callback) {
+        let id = Symbol('id');
+        if (!subscriptions[type])
+            subscriptions[type] = {};
+        subscriptions[type][id] = callback;
+        return {
+            unsubscribe: function () {
+                delete subscriptions[type][id];
+                if (Object.getOwnPropertySymbols(subscriptions[type]).length === 0) {
+                    delete subscriptions[type];
+                }
+            }
+        };
+    }
+    function publish(eventType, arg) {
+        if (!subscriptions[eventType])
+            return;
+        Object.getOwnPropertySymbols(subscriptions[eventType])
+            .forEach(key => subscriptions[eventType][key](arg));
+    }
+    return { subscribe, publish };
+}
+export class Inspect {
+    static async vars(obj) {
+        if (typeof process != 'object')
+            return;
+        let inspectVarsPath = process.env.INSPECT_VARS;
+        if (!inspectVarsPath || !obj)
+            return;
+        // resolve dynamic path to prevent ng webpack static analysis
+        const nodeModule = (m) => 'no' + 'de:' + `${m}`;
+        await import(nodeModule('fs')).then(async (fs) => {
+            await import(nodeModule('path')).then(path => {
+                let varsPath = inspectVarsPath.replace(/\\/g, '/');
+                if (varsPath.indexOf('/') >= 0) {
+                    let dir = path.dirname(varsPath);
+                    if (!fs.existsSync(dir)) {
+                        fs.mkdirSync(dir);
+                    }
+                }
+                fs.writeFileSync(varsPath, JSON.stringify(obj));
+            });
+        });
+    }
+    static dump(obj) {
+        let to = JSON.stringify(obj, null, 4);
+        return to.replace(/"/g, '');
+    }
+    static printDump(obj) { console.log(Inspect.dump(obj)); }
+    static dumpTable(rows) {
+        let mapRows = rows;
+        let keys = uniqueKeys(mapRows);
+        let colSizes = {};
+        keys.forEach(k => {
+            let max = k.length;
+            mapRows.forEach(row => {
+                let col = row[k];
+                if (col != null) {
+                    let valSize = `${col}`.length;
+                    if (valSize > max) {
+                        max = valSize;
+                    }
+                }
+            });
+            colSizes[k] = max;
+        });
+        // sum + ' padding ' + |
+        let colSizesLength = Object.keys(colSizes).length;
+        let rowWidth = Object.keys(colSizes).map(k => colSizes[k]).reduce((p, c) => p + c, 0) +
+            (colSizesLength * 2) +
+            (colSizesLength + 1);
+        let sb = [];
+        sb.push(`+${'-'.repeat(rowWidth - 2)}+`);
+        let head = '|';
+        keys.forEach(k => head += alignCenter(k, colSizes[k]) + '|');
+        sb.push(head);
+        sb.push(`|${'-'.repeat(rowWidth - 2)}|`);
+        mapRows.forEach(row => {
+            let to = '|';
+            keys.forEach(k => to += '' + alignAuto(row[k], colSizes[k]) + '|');
+            sb.push(to);
+        });
+        sb.push(`+${'-'.repeat(rowWidth - 2)}+`);
+        return sb.join('\n');
+    }
+    static printDumpTable(rows) { console.log(Inspect.dumpTable(rows)); }
+}
diff --git a/MyApp/wwwroot/lib/mjs/servicestack-vue.min.mjs b/MyApp/wwwroot/lib/mjs/servicestack-vue.min.mjs
new file mode 100644
index 0000000..7a03e4c
--- /dev/null
+++ b/MyApp/wwwroot/lib/mjs/servicestack-vue.min.mjs
@@ -0,0 +1,37 @@
+var lo=Object.defineProperty,no=(e,t,l)=>t in e?lo(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,Ce=(e,t,l)=>(no(e,"symbol"!=typeof t?t+"":t,l),l);import{defineComponent as ce,computed as f,openBlock as a,createElementBlock as u,normalizeClass as w,unref as o,createElementVNode as s,createCommentVNode as k,renderSlot as Z,ref as A,toDisplayString as T,inject as Ne,nextTick as xt,isRef as Gn,mergeProps as Me,withModifiers as Ue,h as gt,resolveComponent as X,createBlock as se,withCtx as ke,useAttrs as so,createVNode as $e,createTextVNode as we,watchEffect as hl,normalizeStyle as Xl,Fragment as Te,renderList as Ie,withDirectives as kt,vModelCheckbox as Yl,withKeys as Wn,createStaticVNode as wl,vModelSelect as oo,useSlots as en,getCurrentInstance as Be,onMounted as tt,createSlots as tn,normalizeProps as jt,guardReactiveProps as gl,vModelDynamic as ao,onUnmounted as Rt,watch as Lt,vModelText as io,resolveDynamicComponent as Jn,provide as Xt,resolveDirective as ro}from"vue";import{errorResponseExcept as uo,dateFmt as Xn,toTime as co,omit as dt,enc as Hl,setQueryString as fo,appendQueryString as Kt,nameOf as mo,ApiResult as Je,lastRightPart as $t,leftPart as xl,map as qe,toDate as Vt,toDateTime as vo,toCamelCase as ho,mapGet as ye,chop as go,fromXsdDuration as Yn,isDate as kl,timeFmt12 as po,apiValue as yo,indexOfAny as bo,createBus as wo,toKebabCase as Nn,sanitize as xo,humanize as He,delaySet as es,rightPart as dl,queryString as zl,combinePaths as ko,toPascalCase as st,errorResponse as mt,trimEnd as $o,$1 as pl,lastLeftPart as Co,ResponseStatus as Bl,ResponseError as Un,HttpMethods as ln,omitEmpty as _o,uniqueKeys as Nl,humanify as ts,each as Lo}from"@servicestack/client";const Vo={class:"flex items-center"},So={key:0,class:"flex-shrink-0 mr-3"},Mo={key:0,class:"h-5 w-5 text-yellow-400",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},Ao=s("path",{"fill-rule":"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z","clip-rule":"evenodd"},null,-1),To=[Ao],Fo={key:1,class:"h-5 w-5 text-red-400",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},Io=s("path",{"fill-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z","clip-rule":"evenodd"},null,-1),Do=[Io],jo={key:2,class:"h-5 w-5 text-blue-400",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},Oo=s("path",{"fill-rule":"evenodd",d:"M19 10.5a8.5 8.5 0 11-17 0 8.5 8.5 0 0117 0zM8.25 9.75A.75.75 0 019 9h.253a1.75 1.75 0 011.709 2.13l-.46 2.066a.25.25 0 00.245.304H11a.75.75 0 010 1.5h-.253a1.75 1.75 0 01-1.709-2.13l.46-2.066a.25.25 0 00-.245-.304H9a.75.75 0 01-.75-.75zM10 7a1 1 0 100-2 1 1 0 000 2z","clip-rule":"evenodd"},null,-1),Po=[Oo],Bo={key:3,class:"h-5 w-5 text-green-400",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},Ro=s("path",{"fill-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z","clip-rule":"evenodd"},null,-1),Eo=[Ro],Ho=ce({__name:"Alert",props:{type:{default:"warn"},hideIcon:{type:Boolean}},setup(l){const e=l,n=f(()=>"info"==e.type?"bg-blue-50 dark:bg-blue-200":"error"==e.type?"bg-red-50 dark:bg-red-200":"success"==e.type?"bg-green-50 dark:bg-green-200":"bg-yellow-50 dark:bg-yellow-200"),r=f(()=>"info"==e.type?"border-blue-400":"error"==e.type?"border-red-400":"success"==e.type?"border-green-400":"border-yellow-400"),i=f(()=>"info"==e.type?"text-blue-700":"error"==e.type?"text-red-700":"success"==e.type?"text-green-700":"text-yellow-700");return(e,t)=>(a(),u("div",{class:w([o(n),o(r),"border-l-4 p-4"])},[s("div",Vo,[l.hideIcon?k("",!0):(a(),u("div",So,["warn"==l.type?(a(),u("svg",Mo,To)):"error"==l.type?(a(),u("svg",Fo,Do)):"info"==l.type?(a(),u("svg",jo,Po)):"success"==l.type?(a(),u("svg",Bo,Eo)):k("",!0)])),s("div",null,[s("p",{class:w([o(i),"text-sm"])},[Z(e.$slots,"default")],2)])])],2))}}),zo={key:0,class:"rounded-md bg-green-50 dark:bg-green-200 p-4",role:"alert"},No={class:"flex"},Uo=s("div",{class:"flex-shrink-0"},[s("svg",{class:"h-5 w-5 text-green-400 dark:text-green-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[s("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 13l4 4L19 7"})])],-1),qo={class:"ml-3"},Qo={class:"text-sm font-medium text-green-800"},Ko={key:0},Zo={class:"ml-auto pl-3"},Go={class:"-mx-1.5 -my-1.5"},Wo=s("span",{class:"sr-only"},"Dismiss",-1),Jo=s("svg",{class:"h-5 w-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{d:"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"})],-1),Xo=[Wo,Jo],Yo=ce({__name:"AlertSuccess",props:{message:null},setup(l){const n=A(!1);return(e,t)=>n.value?k("",!0):(a(),u("div",zo,[s("div",No,[Uo,s("div",qo,[s("h3",Qo,[l.message?(a(),u("span",Ko,T(l.message),1)):Z(e.$slots,"default",{key:1})])]),s("div",Zo,[s("div",Go,[s("button",{type:"button",class:"inline-flex rounded-md bg-green-50 dark:bg-green-200 p-1.5 text-green-500 dark:text-green-600 hover:bg-green-100 dark:hover:bg-green-700 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50 dark:ring-offset-green-200",onClick:t[0]||(t[0]=e=>n.value=!0)},Xo)])])])]))}}),ea={class:"flex"},ta=s("div",{class:"flex-shrink-0"},[s("svg",{class:"h-5 w-5 text-red-400",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{fill:"currentColor",d:"M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12S6.47 2 12 2m3.59 5L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z"})])],-1),la={class:"ml-3"},na={class:"text-sm text-red-700 dark:text-red-200"},sa=ce({__name:"ErrorSummary",props:{status:null,except:null,class:null},setup(e){const t=e;let l=Ne("ApiState",void 0);const n=f(()=>t.status||null!=l&&l.error.value?uo.call({responseStatus:t.status??(null==l?void 0:l.error.value)},t.except??[]):null);return(e,t)=>o(n)?(a(),u("div",{key:0,class:w("bg-red-50 dark:bg-red-900 border-l-4 border-red-400 p-4 "+e.$props.class)},[s("div",ea,[ta,s("div",la,[s("p",na,T(o(n)),1)])])],2)):k("",!0)}}),oa=["id","aria-describedby"],aa=ce({__name:"InputDescription",props:{id:null,description:null},setup(l){return(e,t)=>l.description?(a(),u("div",{key:"description",class:"mt-2 text-sm text-gray-500",id:l.id+"-description","aria-describedby":l.id+"-description"},[s("div",null,T(l.description),1)],8,oa)):k("",!0)}});function $l(e){return Xn(e).replace(/\//g,"-")}function ls(e){return null==e?"":co(e)}function ns(e,t){e.value=null,xt(()=>e.value=t)}function Tt(l){return Object.keys(l).forEach(e=>{var t=l[e];l[e]=Gn(t)?o(t):t}),l}function Ct(e,t,l){l?(t.value=e.entering.cls+" "+e.entering.from,setTimeout(()=>t.value=e.entering.cls+" "+e.entering.to,0)):(t.value=e.leaving.cls+" "+e.leaving.from,setTimeout(()=>t.value=e.leaving.cls+" "+e.leaving.to,0))}function cl(l){if(!("u"<typeof document)){let t=(null==l?void 0:l.after)||document.activeElement,e=t&&t.form;var a;e&&(l=':not([disabled]):not([tabindex="-1"])',l=e.querySelectorAll(`a:not([disabled]), button${l}, input[type=text]${l}, [tabindex]`+l),-1<(a=(l=Array.prototype.filter.call(l,e=>0<e.offsetWidth||0<e.offsetHeight||e===t)).indexOf(t)))&&(l[a+1]||l[0]).focus()}}function Et(e){if(!e)return null;if("string"==typeof e)return e;var t="function"==typeof e?new e:"object"==typeof e?e:null;if(!t)throw new Error(`Invalid DTO Type '${typeof e}'`);if("function"!=typeof t.getTypeName)throw new Error(JSON.stringify(t)+" is not a Request DTO");e=t.getTypeName();if(e)return e;throw new Error("DTO Required")}function rt(e,t,l){var a=(l=l||{}).cls||l.className||l.class;return a&&((l=dt(l,["cls","class","className"])).class=a),null==t?"<"+e+Ul(l)+"/>":"<"+e+Ul(l)+`>${t||""}</${e}>`}function Ul(l){return Object.keys(l).reduce((e,t)=>`${e} ${t}="${Hl(l[t])}"`,"")}function Cl(e){return Object.assign({target:"_blank",rel:"noopener",class:"text-blue-600"},e)}function Dt(e){return kn(e)}let ia=["string","number","boolean","null","undefined"];function _t(e){return 0<=ia.indexOf(typeof e)||e instanceof Date}function Zt(e){return!_t(e)}class ss{get length(){return"u"<typeof localStorage?0:localStorage.length}getItem(e){return"u"<typeof localStorage?null:localStorage.getItem(e)}setItem(e,t){"u"<typeof localStorage||localStorage.setItem(e,t)}removeItem(e){"u"<typeof localStorage||localStorage.removeItem(e)}clear(){"u"<typeof localStorage||localStorage.clear()}key(e){return"u"<typeof localStorage?null:localStorage.key(e)}}function yl(e){return"string"==typeof e?JSON.parse(e):null}function nn(e){typeof history<"u"&&(e=fo(location.href,e),history.pushState({},"",e))}function sn(t,e){if(["function","Function","eval","=>",";"].some(e=>t.includes(e)))throw new Error(`Unsafe script: '${t}'`);e=Object.assign(Object.keys(globalThis).reduce((e,t)=>(e[t]=void 0,e),{}),e);return new Function("with(this) { return ("+t+") }").call(e)}function ql(e){typeof navigator<"u"&&navigator.clipboard.writeText(e)}function on(e){e=ne.config.storage.getItem(e);return e?JSON.parse(e):null}function _l(e,t){return Kt("swr."+mo(e),t?Object.assign({},e,t):e)}function ra(e){e.request&&(e=_l(e.request,e.args),ne.config.storage.removeItem(e))}async function os(e,t,l,a,s){var n=_l(t,a),e=(l(new Je({response:on(n)})),await e.api(t,a,s));return e.succeeded&&e.response&&(e.response._date=(new Date).valueOf(),t=JSON.stringify(e.response),ne.config.storage.setItem(n,t),l(e)),e}function as(t,l){let a=null;return(...e)=>{a&&clearTimeout(a),a=setTimeout(()=>{t(...e)},l||100)}}function pt(e){return"string"==typeof e?e.split(","):e||[]}function wt(e,t){const l=pt(t);return e.reduce((e,t)=>(e[t]=!l.includes(t),e),{})}function is(){return{LocalStore:ss,dateInputFormat:$l,timeInputFormat:ls,setRef:ns,unRefs:Tt,transition:Ct,focusNextElement:cl,getTypeName:Et,htmlTag:rt,htmlAttrs:Ul,linkAttrs:Cl,toAppUrl:Dt,isPrimitive:_t,isComplexType:Zt,pushState:nn,scopedExpr:sn,copyText:ql,fromCache:on,swrCacheKey:_l,swrClear:ra,swrApi:os,asStrings:pt,asOptions:wt,createDebounce:as}}const rs="png,jpg,jpeg,jfif,gif,svg,webp".split(","),us={img:"png,jpg,jpeg,gif,svg,webp,png,jpg,jpeg,gif,bmp,tif,tiff,webp,ai,psd,ps".split(","),vid:"avi,m4v,mov,mp4,mpg,mpeg,wmv,webm".split(","),aud:"mp3,mpa,ogg,wav,wma,mid,webm".split(","),ppt:"key,odp,pps,ppt,pptx".split(","),xls:"xls,xlsm,xlsx,ods,csv,tsv".split(","),doc:"doc,docx,pdf,rtf,tex,txt,md,rst,xls,xlsm,xlsx,ods,key,odp,pps,ppt,pptx".split(","),zip:"zip,tar,gz,7z,rar,gzip,deflate,br,iso,dmg,z,lz,lz4,lzh,s7z,apl,arg,jar,war".split(","),exe:"exe,bat,sh,cmd,com,app,msi,run,vb,vbs,js,ws,wsh".split(","),att:"bin,oct,dat".split(",")},qn=Object.keys(us),ft=(e,t)=>`<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' role='img' preserveAspectRatio='xMidYMid meet' viewBox='${e}'>${t}</svg>`,fl={img:ft("4 4 16 16","<path fill='currentColor' d='M20 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-2 0H6v6.38l2.19-2.19l5.23 5.23l1-1a1.59 1.59 0 0 1 2.11.11L18 16V6zm-5 3.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0z'/>"),vid:ft("0 0 24 24","<path fill='currentColor' d='m14 2l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8m4 18V9h-5V4H6v16h12m-2-2l-2.5-1.7V18H8v-5h5.5v1.7L16 13v5Z'/>"),aud:ft("0 0 24 24","<path fill='currentColor' d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm10-9h-4v3.88a2.247 2.247 0 0 0-3.5 1.87c0 1.24 1.01 2.25 2.25 2.25S13 17.99 13 16.75V13h3v-2z'/>"),ppt:ft("0 0 48 48","<g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'><path d='M4 8h40'/><path d='M8 8h32v26H8V8Z' clip-rule='evenodd'/><path d='m22 16l5 5l-5 5m-6 16l8-8l8 8'/></g>"),xls:ft("0 0 256 256","<path fill='currentColor' d='M200 26H72a14 14 0 0 0-14 14v26H40a14 14 0 0 0-14 14v96a14 14 0 0 0 14 14h18v26a14 14 0 0 0 14 14h128a14 14 0 0 0 14-14V40a14 14 0 0 0-14-14Zm-42 76h44v52h-44Zm44-62v50h-44V80a14 14 0 0 0-14-14h-2V38h58a2 2 0 0 1 2 2ZM70 40a2 2 0 0 1 2-2h58v28H70ZM38 176V80a2 2 0 0 1 2-2h104a2 2 0 0 1 2 2v96a2 2 0 0 1-2 2H40a2 2 0 0 1-2-2Zm32 40v-26h60v28H72a2 2 0 0 1-2-2Zm130 2h-58v-28h2a14 14 0 0 0 14-14v-10h44v50a2 2 0 0 1-2 2ZM69.2 148.4L84.5 128l-15.3-20.4a6 6 0 1 1 9.6-7.2L92 118l13.2-17.6a6 6 0 0 1 9.6 7.2L99.5 128l15.3 20.4a6 6 0 0 1-9.6 7.2L92 138l-13.2 17.6a6 6 0 1 1-9.6-7.2Z'/>"),doc:ft("0 0 32 32","<path fill='currentColor' d='M26 30H11a2.002 2.002 0 0 1-2-2v-6h2v6h15V6h-9V4h9a2.002 2.002 0 0 1 2 2v22a2.002 2.002 0 0 1-2 2Z'/><path fill='currentColor' d='M17 10h7v2h-7zm-1 5h8v2h-8zm-1 5h9v2h-9zm-6-1a5.005 5.005 0 0 1-5-5V3h2v11a3 3 0 0 0 6 0V5a1 1 0 0 0-2 0v10H8V5a3 3 0 0 1 6 0v9a5.005 5.005 0 0 1-5 5z'/>"),zip:ft("0 0 16 16","<g fill='currentColor'><path d='M6.5 7.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v.938l.4 1.599a1 1 0 0 1-.416 1.074l-.93.62a1 1 0 0 1-1.109 0l-.93-.62a1 1 0 0 1-.415-1.074l.4-1.599V7.5zm2 0h-1v.938a1 1 0 0 1-.03.243l-.4 1.598l.93.62l.93-.62l-.4-1.598a1 1 0 0 1-.03-.243V7.5z'/><path d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm5.5-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9v1H8v1h1v1H8v1h1v1H7.5V5h-1V4h1V3h-1V2h1V1z'/></g>"),exe:ft("0 0 16 16","<path fill='currentColor' fill-rule='evenodd' d='M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM2.575 15.202H.785v-1.073H2.47v-.606H.785v-1.025h1.79v-.648H0v3.999h2.575v-.647ZM6.31 11.85h-.893l-.823 1.439h-.036l-.832-1.439h-.931l1.227 1.983l-1.239 2.016h.861l.853-1.415h.035l.85 1.415h.908l-1.254-1.992L6.31 11.85Zm1.025 3.352h1.79v.647H6.548V11.85h2.576v.648h-1.79v1.025h1.684v.606H7.334v1.073Z'/>"),att:ft("0 0 24 24","<path fill='currentColor' d='M14 0a5 5 0 0 1 5 5v12a7 7 0 1 1-14 0V9h2v8a5 5 0 0 0 10 0V5a3 3 0 1 0-6 0v12a1 1 0 1 0 2 0V6h2v11a3 3 0 1 1-6 0V5a5 5 0 0 1 5-5Z'/>")},ua=/[\r\n%#()<>?[\\\]^`{|}]/g,Qn=1024,da=["Bytes","KB","MB","GB","TB"],ca=(()=>{const t="application/",e=t+"vnd.openxmlformats-officedocument.",l="image/",a="text/",s="video/",n={jpg:l+"jpeg",tif:l+"tiff",svg:l+"svg+xml",ico:l+"x-icon",ts:a+"typescript",py:a+"x-python",sh:a+"x-sh",mp3:"audio/mpeg3",mpg:s+"mpeg",ogv:s+"ogg",xlsx:e+"spreadsheetml.sheet",xltx:e+"spreadsheetml.template",docx:e+"wordprocessingml.document",dotx:e+"wordprocessingml.template",pptx:e+"presentationml.presentation",potx:e+"presentationml.template",ppsx:e+"presentationml.slideshow",mdb:t+"vnd.ms-access"};function o(e,t){e.split(",").forEach(e=>n[e]=t)}function r(e,t){e.split(",").forEach(e=>n[e]=t(e))}return r("jpeg,gif,png,tiff,bmp,webp",e=>l+e),r("jsx,csv,css",e=>a+e),r("aac,ac3,aiff,m4a,m4b,m4p,mid,midi,wav",e=>"audio/"+e),r("3gpp,avi,dv,divx,ogg,mp4,webm",e=>s+e),r("rtf,pdf",e=>t+e),o("htm,html,shtm",a+"html"),o("js,mjs,cjs",a+"javascript"),o("yml,yaml",t+"yaml"),o("bat,cmd",t+"bat"),o("xml,csproj,fsproj,vbproj",a+"xml"),o("txt,ps1",a+"plain"),o("qt,mov",s+"quicktime"),o("doc,dot",t+"msword"),o("xls,xlt,xla",t+"excel"),o("ppt,oit,pps,ppa",t+"vnd.ms-powerpoint"),o("cer,crt,der",t+"x-x509-ca-cert"),o("gz,tgz,zip,rar,lzh,z",t+"x-compressed"),o("aaf,aca,asd,bin,cab,chm,class,cur,db,dat,deploy,dll,dsp,exe,fla,ics,inf,mix,msi,mso,obj,ocx,prm,prx,psd,psp,qxd,sea,snp,so,sqlite,toc,ttf,u32,xmp,xsn,xtp",t+"octet-stream"),n})();let Ql=[];function ds(e){return(e=(e=(e=e.replace(/"/g,"'")).replace(/>\s+</g,"><")).replace(/\s{2,}/g," ")).replace(ua,encodeURIComponent)}function an(e){return"data:image/svg+xml;utf8,"+ds(e)}function cs(e){e=URL.createObjectURL(e);return Ql.push(e),e}function fs(){Ql.forEach(e=>{try{URL.revokeObjectURL(e)}catch(e){console.error("URL.revokeObjectURL",e)}}),Ql=[]}function rn(e){return e?(e=xl(e,"?"),$t(e,"/")):null}function Yt(e){e=rn(e);return null==e||-1===e.indexOf(".")?null:$t(e,".").toLowerCase()}function un(e){var t=Yt(e.name);return t&&0<=rs.indexOf(t)?cs(e):yt(e.name)}function dn(e){return e&&(!(!e.startsWith("blob:")&&!e.startsWith("data:"))||(e=Yt(e))&&0<=rs.indexOf(e))||!1}function yt(e){var t;return e?null==(t=Yt(e))||dn(e)?e:Qt(t)||an(fl.doc):null}function Qt(e){e=ms(e);return e&&an(e)||null}function ms(t){if(fl[t])return fl[t];for(let e=0;e<qn.length;e++){var l=qn[e];if(0<=us[l].indexOf(t))return fl[l]}return null}function cn(e,t=2){var l;return 0===e?"0 Bytes":(t=t<0?0:t,l=Math.floor(Math.log(e)/Math.log(Qn)),parseFloat((e/Math.pow(Qn,l)).toFixed(t))+" "+da[l])}function fa(e){return e.files&&Array.from(e.files).map(e=>({fileName:e.name,contentLength:e.size,filePath:un(e)}))}function Ll(e,t){e.onerror=null,e.src=fn(e.src,t)||""}function fn(e,t){return Qt($t(e,".").toLowerCase())||(t?Qt(t)||t:null)||Qt("doc")}function Kl(e){if(e)return e=$t(e,".").toLowerCase(),ca[e]||"application/"+e;throw new Error("fileNameOrExt required")}function Ch(){return{extSvg:ms,extSrc:Qt,getExt:Yt,encodeSvg:ds,canPreview:dn,getFileName:rn,getMimeType:Kl,formatBytes:cn,filePathUri:yt,svgToDataUri:an,fileImageUri:un,objectUrl:cs,flush:fs,inputFiles:fa,iconOnError:Ll,iconFallbackSrc:fn}}class ma{constructor(e){Ce(this,"view"),Ce(this,"includeTypes"),Object.assign(this,e)}getTypeName(){return"MetadataApp"}getMethod(){return"GET"}createResponse(){return{}}}const Ot="/metadata/app.json",va={Boolean:"checkbox",DateTime:"date",DateOnly:"date",DateTimeOffset:"date",TimeSpan:"time",TimeOnly:"time",Byte:"number",Short:"number",Int64:"number",Int32:"number",UInt16:"number",UInt32:"number",UInt64:"number",Single:"number",Double:"number",Decimal:"number",String:"text",Guid:"text",Uri:"text"},ha={number:"Int32",checkbox:"Boolean",date:"DateTime","datetime-local":"DateTime",time:"TimeSpan"},Zl={Byte:"byte",Int16:"short",Int32:"int",Int64:"long",UInt16:"ushort",Unt32:"uint",UInt64:"ulong",Single:"float",Double:"double",Decimal:"decimal"},ga=([...Object.keys(Zl),...Object.values(Zl)],{String:"string",Boolean:"bool",...Zl});function rl(e){return ga[e]||e}function vs(e,t){return e?(t=t||[],"Nullable`1"===e?rl(t[0])+"?":e.endsWith("[]")?`List<${rl(e.substring(0,e.length-2))}>`:0===t.length?rl(e):xl(rl(e),"`")+"<"+t.join(",")+">"):""}function pa(e){return e&&vs(e.name,e.genericArgs)}class Pt{constructor(){Ce(this,"Query"),Ce(this,"QueryInto"),Ce(this,"Create"),Ce(this,"Update"),Ce(this,"Patch"),Ce(this,"Delete")}get AnyQuery(){return this.Query||this.QueryInto}get AnyUpdate(){return this.Patch||this.Update}toArray(){return[this.Query,this.QueryInto,this.Create,this.Update,this.Patch,this.Delete].filter(e=>!!e).map(e=>e)}get empty(){return!(this.Query||this.QueryInto||this.Create||this.Update||this.Patch||this.Delete)}add(e){ze.isQueryInto(e)&&!this.QueryInto?this.QueryInto=e:ze.isQuery(e)&&!this.Query?this.Query=e:ze.isCreate(e)&&!this.Create?this.Create=e:ze.isUpdate(e)&&!this.Update?this.Update=e:ze.isPatch(e)&&!this.Patch?this.Patch=e:ze.isDelete(e)&&!this.Delete&&(this.Delete=e)}static from(e){const t=new Pt;return e.forEach(e=>{t.add(e)}),t}static forType(l,e){var t;let a=new Pt;return l&&(null!=(e=e??(null==(t=ne.metadata.value)?void 0:t.api))&&e.operations.forEach(e=>{var t;(null==(t=e.dataModel)?void 0:t.name)==l&&a.add(e)})),a}}const ze={Create:"ICreateDb`1",Update:"IUpdateDb`1",Patch:"IPatchDb`1",Delete:"IDeleteDb`1",AnyRead:["QueryDb`1","QueryDb`2"],AnyWrite:["ICreateDb`1","IUpdateDb`1","IPatchDb`1","IDeleteDb`1"],isAnyQuery:e=>qe(e.request.inherits,e=>0<=ze.AnyRead.indexOf(e.name)),isQuery:e=>qe(e.request.inherits,e=>"QueryDb`1"===e.name),isQueryInto:e=>qe(e.request.inherits,e=>"QueryDb`2"===e.name),isCrud:e=>{return null==(e=e.request.implements)?void 0:e.some(e=>0<=ze.AnyWrite.indexOf(e.name))},isCreate:e=>ul(e,ze.Create),isUpdate:e=>ul(e,ze.Update),isPatch:e=>ul(e,ze.Patch),isDelete:e=>ul(e,ze.Delete),model:e=>{var t;return e?qe(e.inherits,e=>0<=ze.AnyRead.indexOf(e.name))?null==(t=e.inherits)?void 0:t.genericArgs[0]:null==(e=null==(t=e.implements)?void 0:t.find(e=>0<=ze.AnyWrite.indexOf(e.name)))?void 0:e.genericArgs[0]:null}};function ya(e){var t;return(null==(t=e.input)?void 0:t.type)||Vl(mn(e))}function hs(e){return e.endsWith("?")?go(e,1):e}function Vl(e){return va[hs(e)]}function ba(e){return e&&ha[e]||"String"}function mn(e){return"Nullable`1"===e.type?e.genericArgs[0]:e.type}function Gl(e){return e&&"number"==Vl(e)||!1}function gs(e){return e&&"string"==e.toLowerCase()||!1}function wa(e){return"List`1"==e||e.startsWith("List<")||e.endsWith("[]")}function ps(e){var t;return!(null==e||!e.type||(t=mn(e),e.isValueType&&-1==t.indexOf("`"))||e.isEnum||null!=Vl(e.type))}function ys(e){var t;return!!(null!=e&&e.type&&(t=mn(e),e.isValueType&&-1==t.indexOf("`")||e.isEnum||"hidden"==(null==(t=e.input)?void 0:t.type)||"file"==(null==(t=e.input)?void 0:t.type)||"tag"==(null==(t=e.input)?void 0:t.type)||"combobox"==(null==(t=e.input)?void 0:t.type)||null!=Vl(e.type)))}function Gt(e,t){let l="string"==typeof e?Sl(e):e,a=(l||(console.warn("Metadata not found for: "+e),l={request:{name:e}}),function(e){Object.assign(this,e)}),s=(n.prototype.createResponse=function(){return l.returnsVoid?void 0:new a},n.prototype.getTypeName=function(){return l.request.name},n.prototype.getMethod=function(){return l.method||"POST"},n);function n(e){Object.assign(this,e)}return new s(t)}function xa(e,t,l={}){let a=function(e){Object.assign(this,e)},s=(n.prototype.createResponse=function(){return"function"==typeof l.createResponse?l.createResponse():new a},n.prototype.getTypeName=function(){return e},n.prototype.getMethod=function(){return l.method||"POST"},n);function n(e){Object.assign(this,e)}return new s(t)}function ml(l,e){return l?(Object.keys(l).forEach(e=>{var t=l[e];"string"==typeof t?t.startsWith("/Date")&&(l[e]=$l(Vt(t))):null!=t&&"object"==typeof t&&(Array.isArray(t)?l[e]=Array.from(t):l[e]=Object.assign({},t))}),l):{}}function ka(e,r){let i={};return Array.from(e.elements).forEach(a=>{var s;if(a.id&&null!=a.value&&""!==a.value){const n=a.id.toLowerCase(),o=r&&r.find(e=>e.name.toLowerCase()==n);let e=null==o?void 0:o.type,t=null==(s=null==o?void 0:o.genericArgs)?void 0:s[0],l="checkbox"===a.type?a.checked:a.value;Gl(e)?l=Number(l):"List`1"===e&&"string"==typeof l&&(l=l.split(",").map(e=>Gl(t)?Number(e):e)),i[a.id]=l}}),i}function vn(e){var t;return(null==(t=null==e?void 0:e.api)?void 0:t.operations)&&0<e.api.operations.length}function $a(e){if(hn()||null==e||!e.assert||ne.metadata.value)return ne.metadata.value;throw new Error("useMetadata() not configured, see: https://docs.servicestack.net/vue/use-metadata")}function Wt(e){return!(!e||!vn(e)||(e.date=vo(new Date),ne.metadata.value=e,typeof localStorage<"u"&&localStorage.setItem(Ot,JSON.stringify(e)),0))}function Ca(){ne.metadata.value=null,typeof localStorage<"u"&&localStorage.removeItem(Ot)}function hn(){if(null!=ne.metadata.value)return!0;var e=globalThis.Server;if(vn(e))Wt(e);else{e=typeof localStorage<"u"?localStorage.getItem(Ot):null;if(e)try{Wt(JSON.parse(e))}catch{console.error(`Could not JSON.parse ${Ot} from localStorage`)}}return null!=ne.metadata.value}async function Kn(e,t){var l,a=t?await t():await fetch(e);a.ok?(l=await a.text(),Wt(JSON.parse(l))):console.error(`Could not download ${t?"AppMetadata":e}: `+a.statusText),vn(ne.metadata.value)||console.warn("AppMetadata is not available")}async function _a(e){var{olderThan:e,resolvePath:t,resolve:l}=e||{};let a=hn()&&0!==e;if(!(a=a&&e&&(!(s=Vt(null==(s=ne.metadata.value)?void 0:s.date))||(new Date).getTime()-s.getTime()>e)?!1:a)){if((t||l)&&(await Kn(t||Ot,l),null!=ne.metadata.value))return;var s=Ne("client");if(null!=s&&(e=await s.api(new ma)).succeeded&&Wt(e.response),null!=ne.metadata.value)return;await Kn(Ot)}return ne.metadata.value}function ot(t,l){var e,a=null==(a=ne.metadata.value)?void 0:a.api;return a&&t?a.types.find(e=>e.name.toLowerCase()===t.toLowerCase()&&(!l||e.namespace==l))||((e=Sl(t))?e.request:(e=a.operations.find(e=>e.response&&e.response.name.toLowerCase()===t.toLowerCase()&&(!l||e.response.namespace==l)))?e.response:null):null}function Sl(t){var e=null==(e=ne.metadata.value)?void 0:e.api;return e?e.operations.find(e=>e.request.name.toLowerCase()===t.toLowerCase()):null}function La({dataModel:e}){var t=null==(t=ne.metadata.value)?void 0:t.api;if(!t)return[];let l=t.operations;if(e){const a="string"==typeof e?ot(e):e;l=l.filter(e=>bs(e.dataModel,a))}return l}function gn(e){return e?ot(e.name,e.namespace):null}function bs(e,t){return e&&t&&e.name===t.name&&(!e.namespace||!t.namespace||e.namespace===t.namespace)}function Va(e,t){e=ot(e);return e&&e.properties&&e.properties.find(e=>e.name.toLowerCase()===t.toLowerCase())}function ws(e){return xs(ot(e))}function xs(t){if(t&&t.isEnum&&null!=t.enumNames){var l={};for(let e=0;e<t.enumNames.length;e++){var a=(t.enumDescriptions?t.enumDescriptions[e]:null)||t.enumNames[e];l[(null!=t.enumValues?t.enumValues[e]:null)||t.enumNames[e]]=a}return l}return null}function ks(e){if(e){var t={},l=e.input&&e.input.allowableEntries;if(l){for(let e=0;e<l.length;e++){var a=l[e];t[a.key]=a.value}return t}var s=e.allowableValues||(e.input?e.input.allowableValues:null);if(s){for(let e=0;e<s.length;e++){var n=s[e];t[n]=n}return t}if(e.isEnum){e=ot(e.genericArgs&&1==e.genericArgs.length?e.genericArgs[0]:e.type);if(e)return xs(e)}}return null}function pn(t){if(t){const l=[];return Object.keys(t).forEach(e=>l.push({key:e,value:t[e]})),l}}function Sa(e,t){a=e.name,l=(null==t?void 0:t.type)||ya(e)||"text";var l,a=Object.assign({id:a,name:a,type:l},t);return e.isEnum&&(a.type="select",a.allowableEntries=pn(ks(e))),a}function Ma(e){let n=[];if(e){const o=et(e),t=Sl(e.name),r=gn(null==t?void 0:t.dataModel);o.forEach(t=>{var e;if(ys(t)){const l=Sa(t,t.input);if(l.id=ho(l.id),"file"==l.type&&t.uploadTo&&!l.accept&&(e=null==(e=null==(e=ne.metadata.value)?void 0:e.plugins.filesUpload)?void 0:e.locations.find(e=>e.name==t.uploadTo))&&!l.accept&&e.allowExtensions&&(l.accept=e.allowExtensions.map(e=>e.startsWith(".")?e:"."+e).join(",")),r&&(e=null==(e=r.properties)?void 0:e.find(e=>e.name==t.name),t.ref||(t.ref=null==e?void 0:e.ref)),l.options)try{const a={input:l,$typeFields:o.map(e=>e.name),$dataModelFields:r?et(r).map(e=>e.name):[],...ne.config.scopeWhitelist},s=sn(l.options,a);Object.keys(s).forEach(e=>{l[e]=s[e]})}catch{console.error(`failed to evaluate '${l.options}'`)}n.push(l)}})}return n}function yn(t,e){if(!e.type)return console.error("enumDescriptions missing {type:'EnumType'} options"),[""+t];var l=ot(e.type);if(null==l||!l.enumValues)return console.error("Could not find metadata for "+e.type),[""+t];var a=[];for(let e=0;e<l.enumValues.length;e++){var s=parseInt(l.enumValues[e]);0<s&&(s&t)===s&&a.push((null==(s=l.enumDescriptions)?void 0:s[e])||(null==(s=l.enumNames)?void 0:s[e])||""+t)}return a}function $s(t){return e=>"number"==typeof e?yn(e,{type:t}):e}function et(e){if(!e)return[];let t=[],l={};for(;e;)e.properties&&e.properties.forEach(e=>{l[e.name]||(l[e.name]=1,t.push(e))}),e=e.inherits?gn(e.inherits):null;return t.map(e=>e.type.endsWith("[]")?{...e,type:"List`1",genericArgs:[e.type.substring(0,e.type.length-2)]}:e)}function ul(e,t){return(null==(e=e.request.implements)?void 0:e.some(e=>e.name===t))||!1}function el(e){return e?Cs(e,et(e)):null}function Cs(e,t){var l=t.find(e=>"id"===e.name.toLowerCase());if(l&&l.isPrimaryKey)return l;t=t.find(e=>e.isPrimaryKey)||l;if(!t){l=ze.model(e);if(l)return qe(ot(l),e=>el(e));console.error("Primary Key not found in "+e.name)}return t||null}function Aa(e,t){return qe(el(e),e=>ye(t,e.name))}function _s(e,t,l){return e&&"none"===e.valueType?"":"%In"===l.key||"%Between"===l.key?`(${l.value})`:Ta(t,l.value)}function Ta(e,t){return!e||Gl(e=hs(e))||"Boolean"===e?t:wa(e)?`[${t}]`:`'${t}'`}function at(){var e=f(()=>{var e;return(null==(e=ne.metadata.value)?void 0:e.app)||null}),t=f(()=>{var e;return(null==(e=ne.metadata.value)?void 0:e.api)||null}),l=f(()=>{var e;return(null==(e=ne.metadata.value)?void 0:e.plugins.autoQuery.viewerConventions)||[]});return hn(),{loadMetadata:_a,getMetadata:$a,setMetadata:Wt,clearMetadata:Ca,metadataApp:e,metadataApi:t,filterDefinitions:l,typeOf:ot,typeOfRef:gn,typeEquals:bs,apiOf:Sl,findApis:La,typeName:pa,typeName2:vs,property:Va,enumOptions:ws,propertyOptions:ks,createFormLayout:Ma,typeProperties:et,supportsProp:ys,Crud:ze,Apis:Pt,getPrimaryKey:el,getPrimaryKeyByProps:Cs,getId:Aa,createDto:Gt,makeDto:xa,toFormValues:ml,formValues:ka,isComplexProp:ps,asKvps:pn,expandEnumFlags:yn,enumFlagsConverter:$s}}const Xe=class Xe{static async getOrFetchValue(e,t,l,a,s,n,o){return Xe.getValue(l,o,s)??(await Xe.fetchLookupIds(e,t,l,a,s,n,[o]),Xe.getValue(l,o,s))}static getValue(e,t,l){e=Xe.Lookup[e];if(e){e=e[t];if(e)return e[l=l.toLowerCase()]}}static setValue(e,t,l,a){e=Xe.Lookup[e]??(Xe.Lookup[e]={});(e[t]??(e[t]={}))[l=l.toLowerCase()]=a}static setRefValue(e,t){var l=ye(t,e.refId);return null==l||null==e.refLabel?null:(t=ye(t,e.refLabel),Xe.setValue(e.model,l,e.refLabel,t),t)}static async fetchLookupIds(e,t,l,a,s,n,o){t=t.operations.find(e=>{return ze.isAnyQuery(e)&&(null==(e=e.dataModel)?void 0:e.name)==l});if(t){const r=Xe.Lookup[l]??(Xe.Lookup[l]={}),i=[];Object.keys(r).forEach(e=>{var t=r[e];ye(t,s)&&i.push(e)});var o=o.filter(e=>!i.includes(e));0!=o.length&&(n=n?null:a+","+s,o={[a+"In"]:o.join(",")},n&&(o.fields=n),n=Gt(t,o),(o=await e.api(n,{jsconfig:"edv,eccn"})).succeeded?(ye(o.response,"results")||[]).forEach(e=>{var t,l;ye(e,a)?(t=""+ye(e,a),l=ye(e,s),s=s.toLowerCase(),(r[t]??(r[t]={}))[s]=""+l):console.error(`result[${a}] == null`,e)}):console.error("Failed to call "+t.request.name))}}};Ce(Xe,"Lookup",{});let Ft=Xe,Wl=()=>(new Date).getTime(),Fa=["/","T",":","-"],ut={assumeUtc:!0,date:{method:"Intl.DateTimeFormat",options:"{dateStyle:'medium'}"},maxFieldLength:150,maxNestedFields:2,maxNestedFieldLength:30},Ia=new Intl.RelativeTimeFormat(ut.locale,{}),Zn=31536e6,Rl={year:Zn,month:Zn/12,day:864e5,hour:36e5,minute:6e4,second:1e3},bt={currency:Vs,bytes:Ss,link:Ms,linkTel:As,linkMailTo:Ts,icon:Fs,iconRounded:Is,attachment:Ds,hidden:js,time:Os,relativeTime:wn,relativeTimeFromMs:Ml,enumFlags:Bs,formatDate:Ht,formatNumber:bn};"iconOnError"in globalThis||(globalThis.iconOnError=Ll);class Ke{}function Da(e){ut=Object.assign({},ut,e)}function ja(t){Object.keys(t||{}).forEach(e=>{"function"==typeof t[e]&&(bt[e]=t[e])})}function Ls(){return bt}function tl(e,t){return t?rt("span",e,t):e}function Vs(e,t){var l=dt(t,["currency"]);return tl(new Intl.NumberFormat(void 0,{style:"currency",currency:(null==t?void 0:t.currency)||"USD"}).format(e),l)}function Ss(e,t){return tl(cn(e),t)}function Ms(e,t){return rt("a",e,Cl({...t,href:e}))}function As(e,t){return rt("a",e,Cl({...t,href:"tel:"+e}))}function Ts(e,t){var{subject:l,body:a}=t=t||{},t=dt(t,["subject","body"]),s={};return l&&(s.subject=l),a&&(s.body=a),rt("a",e,Cl({...t,href:"mailto:"+Kt(e,s)}))}function Fs(e,t){return rt("img",void 0,Object.assign({class:"w-6 h-6",title:e,src:Dt(e),onerror:"iconOnError(this)"},t))}function Is(e,t){return rt("img",void 0,Object.assign({class:"w-8 h-8 rounded-full",title:e,src:Dt(e),onerror:"iconOnError(this)"},t))}function Ds(e,t){var l=rn(e),a=(null==Yt(l)||dn(e)?Dt:fn)(e),a=Dt(a),s=t&&(t["icon-class"]||t.iconClass),a=rt("img",void 0,Object.assign({class:"w-6 h-6",src:a,onerror:"iconOnError(this,'att')"},s?{class:s}:null));return rt("a",a+`<span class="pl-1">${l}</span>`,Object.assign({class:"flex",href:Dt(e),title:e},t?dt(t,["icon-class","iconClass"]):null))}function js(e){return""}function Os(e,t){var l="string"==typeof e?new Date(1e3*Yn(e)):kl(e)?Vt(e):null;return tl(l?po(l):e,t)}function Ht(e,t){var l,a;return null==e?"":(l="number"==typeof e?new Date(e):"string"==typeof e?Vt(e):e,kl(l)?tl(("function"==typeof(a=ut.date?Al(ut.date):null)?a:Xn)(l),t):(console.warn(l+" is not a Date value"),null==e?"":""+e))}function bn(e,t){if("number"!=typeof e)return e;let l=ut.number?Al(ut.number):null,a="function"==typeof l?l(e):""+e;return""===a&&(console.warn(`formatNumber(${e}) => `+a,l),a=""+e),tl(a,t)}function Ps(t,l,a){var e=yo(t),s=l?Al(l):null;if("function"!=typeof s)return(null!=e?kl(e)?Ht(e,a):"number"==typeof e?bn(e,a):e:null)??"";{let e=a;if(null!=l&&l.options)try{e=sn(l.options,a)}catch(e){console.error(`Could not evaluate '${l.options}'`,e,", with scope:",a)}return s(t,e)}}function Jt(e,t,l){return(_t(e)?Ps:Ea)(e,t,l)}function Oa(e){if(null!=e){if("number"==typeof e)return e;if(kl(e))return e.getTime()-Wl();if("string"==typeof e){var t=Number(e);if(!isNaN(t))return t;if("P"===e[0]||e.startsWith("-P"))return 1e3*Yn(e)*-1;if(0<=bo(e,Fa))return Vt(e).getTime()-Wl()}}return NaN}function Ml(e,t){for(var l in Rl)if(Math.abs(e)>Rl[l]||"second"===l)return(t||Ia).format(Math.round(e/Rl[l]),l)}function wn(e,t){e=Oa(e);return isNaN(e)?"":Ml(e,t)}function Pa(e,t){return Ml(e.getTime()-(t?t.getTime():Wl()))}function Bs(e,t){return yn(e,t).join(", ")}function Al(l){if(l){let{method:e,options:a}=l,s=e+`(${a})`,n=bt[s]||bt[e];if("function"==typeof n)return n;let o=l.locale||ut.locale;if(e.startsWith("Intl.")){l=o?`'${o}'`:"undefined",l=`return new ${e}(${l},${a||"undefined"})`;try{let t=Function(l)();return n="Intl.DateTimeFormat"===e?e=>t.format(Vt(e)):"Intl.NumberFormat"===e?e=>t.format(Number(e)):"Intl.RelativeTimeFormat"===e?e=>wn(e,t):e=>t.format(e),bt[s]=n}catch(e){console.error("Invalid format: "+l,e)}}else{let l=globalThis[e];if("function"==typeof l){let t=null!=a?Function("return "+a)():void 0;return n=e=>l(e,t,o),bt[s]=n}console.error(`No '${e}' function exists`,Object.keys(bt))}}return null}function Rs(e,t){return e?e.length>t?e.substring(0,t)+"...":e:""}function Es(e){return"/Date("===e.substring(0,6)?Ht(Vt(e)):e}function Ba(e){return xn(Bt(e)).replace(/"/g,"")}function Hs(e){if(null==e||""===e)return"";if("string"==typeof e)try{return JSON.parse(e)}catch{console.warn("couldn't parse as JSON",e)}return e}function xn(e,t=4){return"object"!=typeof(e=Hs(e))?"string"==typeof e?e:""+e:JSON.stringify(e,void 0,t)}function Ra(e){return"object"!=typeof(e=Hs(e))?"string"==typeof e?e:""+e:xn(e=Bt(e=Object.assign({},e)))}function Bt(l){if(null==l)return null;if("string"==typeof l)return Es(l);if(_t(l))return l;if(l instanceof Date)return Ht(l);if(Array.isArray(l))return l.map(Bt);if("object"!=typeof l)return l;{let t={};return Object.keys(l).forEach(e=>{"__type"!=e&&(t[e]=Bt(l[e]))}),t}}function Ea(e,t,l){let a=e;if(Array.isArray(e)){if(_t(e[0]))return a.join(",");null!=e[0]&&(a=e[0])}if(null==a)return"";if(a instanceof Date)return Ht(a,l);var s=Object.keys(a),n=[];for(let e=0;e<Math.min(ut.maxNestedFields,s.length);e++){var o=s[e],r=""+Bt(a[o]);n.push(`<b class="font-medium">${o}</b>: `+Hl(Rs(Es(r),ut.maxNestedFieldLength)))}return 2<s.length&&n.push("..."),rt("span","{ "+n.join(", ")+" }",Object.assign({title:Hl(Ba(e))},l))}function _h(){return{Formats:Ke,setDefaultFormats:Da,getFormatters:Ls,setFormatters:ja,formatValue:Jt,formatter:Al,dateInputFormat:$l,currency:Vs,bytes:Ss,link:Ms,linkTel:As,linkMailTo:Ts,icon:Fs,iconRounded:Is,attachment:Ds,hidden:js,time:Os,relativeTime:wn,relativeTimeFromDate:Pa,relativeTimeFromMs:Ml,enumFlags:Bs,formatDate:Ht,formatNumber:bn,indentJson:xn,prettyJson:Ra,scrub:Bt,truncate:Rs,apiValueFmt:Ps,iconOnError:Ll}}Ce(Ke,"currency",{method:"currency"}),Ce(Ke,"bytes",{method:"bytes"}),Ce(Ke,"link",{method:"link"}),Ce(Ke,"linkTel",{method:"linkTel"}),Ce(Ke,"linkMailTo",{method:"linkMailTo"}),Ce(Ke,"icon",{method:"icon"}),Ce(Ke,"iconRounded",{method:"iconRounded"}),Ce(Ke,"attachment",{method:"attachment"}),Ce(Ke,"time",{method:"time"}),Ce(Ke,"relativeTime",{method:"relativeTime"}),Ce(Ke,"relativeTimeFromMs",{method:"relativeTimeFromMs"}),Ce(Ke,"date",{method:"formatDate"}),Ce(Ke,"number",{method:"formatNumber"}),Ce(Ke,"hidden",{method:"hidden"}),Ce(Ke,"enumFlags",{method:"enumFlags"});const Ha=["onClick","title"],za=ce({__name:"RouterLink",props:{to:null},setup(l){const e=l,t=St()["config"],s=()=>t.value.navigate(e.to??"/");return(e,t)=>(a(),u("a",Me({onClick:Ue(s,["prevent"]),title:l.to,href:"javascript:void(0)"},e.$attrs),[Z(e.$slots,"default")],16,Ha))}});class Na{constructor(){Ce(this,"callbacks",{})}register(e,t){this.callbacks[e]=t}has(e){return!!this.callbacks[e]}invoke(e,t){var l=this.callbacks[e];"function"==typeof l&&l(e,t)}}const Ye=class Ye{static component(e){var t=Ye.components[e];if(t)return t;const l=Nn(e),a=Object.keys(Ye.components).find(e=>Nn(e)===l);return a&&Ye.components[a]||null}};Ce(Ye,"config",{redirectSignIn:"/signin",redirectSignOut:"/auth/logout",navigate:e=>location.href=e,assetsPathResolver:e=>e,fallbackPathResolver:e=>e,storage:new ss,tableIcon:{svg:"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='currentColor' stroke-width='1.5'><path d='M5 12v6s0 3 7 3s7-3 7-3v-6'/><path d='M5 6v6s0 3 7 3s7-3 7-3V6'/><path d='M12 3c7 0 7 3 7 3s0 3-7 3s-7-3-7-3s0-3 7-3Z'/></g></svg>"},scopeWhitelist:{enumFlagsConverter:$s,...Ls()}}),Ce(Ye,"autoQueryGridDefaults",{deny:[],hide:[],toolbarButtonClass:void 0,tableStyle:"stripedRows",take:25,maxFieldLength:150}),Ce(Ye,"events",wo()),Ce(Ye,"user",A(null)),Ce(Ye,"metadata",A(null)),Ce(Ye,"components",{RouterLink:za}),Ce(Ye,"interceptors",new Na);let ne=Ye;function Ua(e){ne.config=Object.assign(ne.config,e)}function qa(e){ne.autoQueryGridDefaults=Object.assign(ne.autoQueryGridDefaults,e)}function kn(e){return e&&ne.config.assetsPathResolver?ne.config.assetsPathResolver(e):e}function Qa(e){return e&&ne.config.fallbackPathResolver?ne.config.fallbackPathResolver(e):e}function Ka(e,t){ne.interceptors.register(e,t)}function St(){var e=f(()=>ne.config),t=f(()=>ne.autoQueryGridDefaults);return{config:e,setConfig:Ua,events:ne.events,autoQueryGridDefaults:t,setAutoQueryGridDefaults:qa,assetsPathResolver:kn,fallbackPathResolver:Qa,registerInterceptor:Ka}}const zs=ce({inheritAttrs:!1,props:{image:Object,svg:String,src:String,alt:String,type:String},setup(s,{attrs:n}){return()=>{let e=s.image;var t,l;s.type&&(l=at()["typeOf"],(l=l(s.type))||console.warn(`Type ${s.type} does not exist`),null!=l&&l.icon?e=null==l?void 0:l.icon:console.warn(`Type ${s.type} does not have a [Svg] icon`));let a=s.svg||(null==e?void 0:e.svg)||"";return a.startsWith("<svg ")?(l=xl(a,">").indexOf("class="),t=`${(null==e?void 0:e.cls)||""} `+(n.class||""),a=-1==l?`<svg class="${t}" `+a.substring(4):(l=l+6+1,a.substring(0,l)+t+" "+a.substring(l)),gt("span",{innerHTML:a})):gt("img",{class:[null==e?void 0:e.cls,n.class],src:kn(s.src||(null==e?void 0:e.uri)),onError:e=>Ll(e.target)})}}}),Za={class:"text-2xl font-semibold text-gray-900 dark:text-gray-300"},Ga={class:"flex"},Wa=s("path",{d:"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",fill:"currentColor"},null,-1),Ja=s("path",{d:"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",fill:"currentFill"},null,-1),Xa=[Wa,Ja],Ya=ce({__name:"Loading",props:{imageClass:{default:"w-6 h-6"}},setup(l){return(e,t)=>(a(),u("div",Za,[s("div",Ga,[(a(),u("svg",{class:w(["self-center inline mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300",l.imageClass]),role:"status",viewBox:"0 0 100 101",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Xa,2)),s("span",null,[Z(e.$slots,"default")])])]))}}),ei=["href","onClick"],ti=["type"],li=ce({__name:"OutlineButton",props:{type:{default:"submit"},href:null},setup(n){const o="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 disabled:text-gray-400 bg-white dark:bg-black hover:bg-gray-50 hover:dark:bg-gray-900 disabled:hover:bg-white dark:disabled:hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black";return(t,e)=>{var l=X("router-link");return n.href?(a(),se(l,{key:0,to:n.href},{default:ke(({navigate:e})=>[s("button",{class:w(o),href:n.href,onClick:e},[Z(t.$slots,"default")],8,ei)]),_:3},8,["to"])):(a(),u("button",Me({key:1,type:n.type,class:o},t.$attrs),[Z(t.$slots,"default")],16,ti))}}}),ni=["href","onClick"],si=["type"],oi=ce({__name:"PrimaryButton",props:{type:{default:"submit"},href:null,color:{default:"indigo"}},setup(n){const e=n,t={blue:"text-white bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:hover:bg-blue-400 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",purple:"text-white bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 disabled:hover:bg-purple-400 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",red:"focus:ring-red-500 text-white bg-red-600 hover:bg-red-700 disabled:bg-red-400 disabled:hover:bg-red-400 focus:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500",green:"focus:ring-green-300 text-white bg-green-600 hover:bg-green-700 disabled:bg-green-400 disabled:hover:bg-green-400 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500",sky:"focus:ring-sky-300 text-white bg-sky-600 hover:bg-sky-700 disabled:bg-sky-400 disabled:hover:bg-sky-400 focus:ring-sky-500 dark:bg-sky-600 dark:hover:bg-sky-700 dark:focus:ring-sky-500",cyan:"focus:ring-cyan-300 text-white bg-cyan-600 hover:bg-cyan-700 disabled:bg-cyan-400 disabled:hover:bg-cyan-400 focus:ring-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-500",indigo:"focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 disabled:hover:bg-indigo-400 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"},r=f(()=>"inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black "+(t[e.color]||t.indigo));return(t,e)=>{var l=X("router-link");return n.href?(a(),se(l,{key:0,to:n.href},{default:ke(({navigate:e})=>[s("button",{class:w(o(r)),href:n.href,onClick:e},[Z(t.$slots,"default")],10,ni)]),_:3},8,["to"])):(a(),u("button",Me({key:1,type:n.type,class:o(r)},t.$attrs),[Z(t.$slots,"default")],16,si))}}}),ai=["type","href","onClick"],ii=["type"],ri=ce({__name:"SecondaryButton",props:{type:null,href:null},setup(n){const o="inline-flex justify-center rounded-md border border-gray-300 py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-black";return(t,e)=>{var l=X("router-link");return n.href?(a(),se(l,{key:0,to:n.href},{default:ke(({navigate:e})=>[s("button",{type:n.type??"button",class:w(o),href:n.href,onClick:e},[Z(t.$slots,"default")],8,ai)]),_:3},8,["to"])):(a(),u("button",Me({key:1,type:n.type??"button",class:o},t.$attrs),[Z(t.$slots,"default")],16,ii))}}});function We(e,t){return Array.isArray(e)?0<=e.indexOf(t):e==t||e.includes(t)}const bl={blue:"text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200",purple:"text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200",red:"text-red-700 dark:text-red-400 hover:text-red-900 dark:hover:text-red-200",green:"text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200",sky:"text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200",cyan:"text-cyan-600 dark:text-cyan-400 hover:text-cyan-800 dark:hover:text-cyan-200",indigo:"text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200"},nt={base:"block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none",invalid:"pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500",valid:"shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600"},qt={panelClass:"shadow sm:rounded-md",formClass:"space-y-6 bg-white dark:bg-black py-6 px-4 sm:p-6",headingClass:"text-lg font-medium leading-6 text-gray-900 dark:text-gray-100",subHeadingClass:"mt-1 text-sm text-gray-500 dark:text-gray-400"},It={panelClass:"pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg",formClass:"flex h-full flex-col divide-y divide-gray-200 dark:divide-gray-700 shadow-xl bg-white dark:bg-black",titlebarClass:"bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6",headingClass:"text-lg font-medium text-gray-900 dark:text-gray-100",subHeadingClass:"mt-1 text-sm text-gray-500 dark:text-gray-400",closeButtonClass:"rounded-md bg-gray-50 dark:bg-gray-900 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:ring-offset-black"},Jl={modalClass:"relative transform overflow-hidden rounded-lg bg-white dark:bg-black text-left shadow-xl transition-all sm:my-8",sizeClass:"sm:max-w-prose lg:max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl sm:w-full"},Ze={panelClass(e="slideOver"){return("card"==e?qt:It).panelClass},formClass(e="slideOver"){return("card"==e?qt:It).formClass},headingClass(e="slideOver"){return("card"==e?qt:It).headingClass},subHeadingClass(e="slideOver"){return("card"==e?qt:It).subHeadingClass},buttonsClass:"mt-4 px-4 py-3 bg-gray-50 dark:bg-gray-900 sm:px-6 flex flex-wrap justify-between",legendClass:"text-base font-medium text-gray-900 dark:text-gray-100 text-center mb-4"},ge={getGridClass(e=0){return ge.gridClass},getGrid2Class(e="stripedRows"){return We(e,"fullWidth")?"overflow-x-auto":ge.grid2Class},getGrid3Class(e="stripedRows"){return We(e,"fullWidth")?"inline-block min-w-full py-2 align-middle":ge.grid3Class},getGrid4Class(e="stripedRows"){return We(e,"whiteBackground")?"":We(e,"fullWidth")?"overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5":ge.grid4Class},getTableClass(e="stripedRows"){return We(e,"fullWidth")||We(e,"verticalLines")?"min-w-full divide-y divide-gray-300":ge.tableClass},getTheadClass(e="stripedRows"){return We(e,"whiteBackground")?"":ge.theadClass},getTheadRowClass(e="stripedRows"){return ge.theadRowClass+(We(e,"verticalLines")?" divide-x divide-gray-200 dark:divide-gray-700":"")},getTheadCellClass(e="stripedRows"){return ge.theadCellClass+(We(e,"uppercaseHeadings")?" uppercase":"")},getTbodyClass(e="stripedRows"){return(We(e,"whiteBackground")||We(e,"verticalLines")?"divide-y divide-gray-200 dark:divide-gray-800":ge.tableClass)+(We(e,"verticalLines")?" bg-white":"")},getTableRowClass(e="stripedRows",t,l,a){return(a?"cursor-pointer ":"")+(l?"bg-indigo-100 dark:bg-blue-800":(a?"hover:bg-yellow-50 dark:hover:bg-blue-900 ":"")+(!We(e,"stripedRows")||t%2==0?"bg-white dark:bg-black":"bg-gray-50 dark:bg-gray-800"))+(We(e,"verticalLines")?" divide-x divide-gray-200 dark:divide-gray-700":"")},gridClass:"flex flex-col",grid2Class:"",grid3Class:"inline-block min-w-full py-2 align-middle",grid4Class:"overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg",tableClass:"min-w-full divide-y divide-gray-200 dark:divide-gray-700",theadClass:"bg-gray-50 dark:bg-gray-900",tableCellClass:"px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400",theadRowClass:"select-none",theadCellClass:"px-6 py-4 text-left text-sm font-medium tracking-wider whitespace-nowrap",toolbarButtonClass:"inline-flex items-center px-2.5 py-1.5 border border-gray-300 dark:border-gray-700 shadow-sm text-sm font-medium rounded text-gray-700 dark:text-gray-300 bg-white dark:bg-black hover:bg-gray-50 dark:hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"},ui={colspans:"col-span-3 sm:col-span-3"},Lh=Object.freeze(Object.defineProperty({__proto__:null,a:bl,card:qt,dummy:ui,form:Ze,grid:ge,input:nt,modal:Jl,slideOver:It},Symbol.toStringTag,{value:"Module"})),di=ce({__name:"TextLink",props:{color:{default:"blue"}},setup(e){const t=e,l=so(),s=f(()=>(bl[t.color]||bl.blue)+(l.href?"":" cursor-pointer"));return(e,t)=>(a(),u("a",{class:w(o(s))},[Z(e.$slots,"default")],2))}}),ci={class:"flex","aria-label":"Breadcrumb"},fi={role:"list",class:"flex items-center space-x-4"},mi=["href","title"],vi=s("svg",{class:"h-6 w-6 flex-shrink-0",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z","clip-rule":"evenodd"})],-1),hi={class:"sr-only"},gi=ce({__name:"Breadcrumbs",props:{homeHref:{default:"/"},homeLabel:{default:"Home"}},setup(l){return(e,t)=>(a(),u("nav",ci,[s("ol",fi,[s("li",null,[s("div",null,[s("a",{href:l.homeHref,class:"text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400",title:l.homeLabel},[vi,s("span",hi,T(l.homeLabel),1)],8,mi)])]),Z(e.$slots,"default")])]))}}),pi={class:"flex items-center"},yi=s("svg",{class:"h-6 w-6 flex-shrink-0 text-gray-400 dark:text-gray-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z","clip-rule":"evenodd"})],-1),bi=["href","title"],wi=["title"],xi=ce({__name:"Breadcrumb",props:{href:null,title:null},setup(l){return(e,t)=>(a(),u("li",null,[s("div",pi,[yi,l.href?(a(),u("a",{key:0,href:l.href,class:"ml-4 text-lg font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300",title:l.title},[Z(e.$slots,"default")],8,bi)):(a(),u("span",{key:1,class:"ml-4 text-lg font-medium text-gray-700 dark:text-gray-300",title:l.title},[Z(e.$slots,"default")],8,wi))])]))}}),ki={key:0,class:"text-base font-semibold text-gray-500 dark:text-gray-400"},$i={role:"list",class:"mt-4 divide-y divide-gray-200 dark:divide-gray-800 border-t border-b border-gray-200 dark:border-gray-800"},Ci=ce({__name:"NavList",props:{title:null},setup(l){return(e,t)=>(a(),u("div",null,[l.title?(a(),u("h2",ki,T(l.title),1)):k("",!0),s("ul",$i,[Z(e.$slots,"default")])]))}}),_i={class:"relative flex items-start space-x-4 py-6"},Li={class:"flex-shrink-0"},Vi={class:"flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-900"},Si={class:"min-w-0 flex-1"},Mi={class:"text-base font-medium text-gray-900 dark:text-gray-100"},Ai={class:"rounded-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"},Ti=["href"],Fi=s("span",{class:"absolute inset-0","aria-hidden":"true"},null,-1),Ii={class:"text-base text-gray-500"},Di=s("div",{class:"flex-shrink-0 self-center"},[s("svg",{class:"h-5 w-5 text-gray-400",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z","clip-rule":"evenodd"})])],-1),ji=ce({__name:"NavListItem",props:{title:null,href:null,icon:null,iconSvg:null,iconSrc:null,iconAlt:null},setup(n){return(e,t)=>{var l=X("Icon");return a(),u("li",_i,[s("div",Li,[s("span",Vi,[$e(l,{class:"w-6 h-6 text-indigo-700 dark:text-indigo-300",image:n.icon,src:n.iconSrc,svg:n.iconSvg,alt:n.iconAlt},null,8,["image","src","svg","alt"])])]),s("div",Si,[s("h3",Mi,[s("span",Ai,[s("a",{href:n.href,class:"focus:outline-none"},[Fi,we(" "+T(n.title),1)],8,Ti)])]),s("p",Ii,[Z(e.$slots,"default")])]),Di])}}});function Ns(e){return e&&e.SessionId?xo(e):e}function Oi(e){ne.user.value=Ns(e),ne.events.publish("signIn",e)}function Pi(){ne.user.value=null,ne.events.publish("signOut",null)}const $n=e=>(null==e?void 0:e.roles)||[],Cn=e=>(null==e?void 0:e.permissions)||[];function Us(e){return 0<=$n(ne.user.value).indexOf(e)}function Bi(e){return 0<=Cn(ne.user.value).indexOf(e)}function _n(){return Us("Admin")}function vl(e){if(!e)return!1;if(!e.requiresAuth)return!0;var t=ne.user.value;if(!t)return!1;if(_n())return!0;let[l,a]=[$n(t),Cn(t)],[s,n,o,r]=[e.requiredRoles||[],e.requiredPermissions||[],e.requiresAnyRole||[],e.requiresAnyPermission||[]];return!(!s.every(e=>0<=l.indexOf(e))||0<o.length&&!o.some(e=>0<=l.indexOf(e))||!n.every(e=>0<=a.indexOf(e))||0<r.length&&!r.every(e=>0<=a.indexOf(e)))}function Ri(e){if(!e||!e.requiresAuth)return null;var t=ne.user.value;if(!t)return`<b>${e.request.name}</b> requires Authentication`;if(_n())return null;let[l,a]=[$n(t),Cn(t)],[s,n,o,r]=[e.requiredRoles||[],e.requiredPermissions||[],e.requiresAnyRole||[],e.requiresAnyPermission||[]],i=s.filter(e=>l.indexOf(e)<0);return 0<i.length?`Requires ${i.map(e=>"<b>"+e+"</b>").join(", ")} Role`+(1<i.length?"s":""):0<(t=n.filter(e=>a.indexOf(e)<0)).length?`Requires ${t.map(e=>"<b>"+e+"</b>").join(", ")} Permission`+(1<t.length?"s":""):0<o.length&&!o.some(e=>0<=l.indexOf(e))?`Requires any ${o.filter(e=>l.indexOf(e)<0).map(e=>"<b>"+e+"</b>").join(", ")} Role`+(1<i.length?"s":""):0<r.length&&!r.every(e=>0<=a.indexOf(e))?`Requires any ${r.filter(e=>a.indexOf(e)<0).map(e=>"<b>"+e+"</b>").join(", ")} Permission`+(1<t.length?"s":""):null}function Ln(){return{signIn:Oi,signOut:Pi,user:f(()=>ne.user.value||null),toAuth:Ns,isAuthenticated:f(()=>null!=ne.user.value),hasRole:Us,hasPermission:Bi,isAdmin:_n,canAccess:vl,invalidAccessMessage:Ri}}const Ei={key:0},Hi={class:"md:p-4"},qs=ce({__name:"EnsureAccess",props:{invalidAccess:null,alertClass:null},emits:["done"],setup(r){const i=Ln()["isAuthenticated"],t=St()["config"],d=()=>{var e=location.href.substring(location.origin.length)||"/",e=Kt(t.value.redirectSignIn,{redirect:e});t.value.navigate(e)},c=()=>{var e=location.href.substring(location.origin.length)||"/",e=Kt(t.value.redirectSignOut,{ReturnUrl:e});t.value.navigate(e)};return(e,t)=>{var l=X("Alert"),n=X("SecondaryButton");return r.invalidAccess?(a(),u("div",Ei,[$e(l,{class:w(r.alertClass),innerHTML:r.invalidAccess},null,8,["class","innerHTML"]),s("div",Hi,[o(i)?(a(),se(n,{key:1,onClick:c},{default:ke(()=>[we("Sign Out")]),_:1})):(a(),se(n,{key:0,onClick:d},{default:ke(()=>[we("Sign In")]),_:1}))])])):k("",!0)}}}),zi={class:"absolute top-0 right-0 bg-white dark:bg-black border dark:border-gray-800 rounded normal-case text-sm shadow w-80"},Ni={class:"p-4"},Ui=s("h3",{class:"text-base font-medium mb-3 dark:text-gray-100"},"Sort",-1),qi={class:"flex w-full justify-center"},Qi=s("svg",{class:"w-6 h-6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16"},[s("g",{fill:"currentColor"},[s("path",{"fill-rule":"evenodd",d:"M10.082 5.629L9.664 7H8.598l1.789-5.332h1.234L13.402 7h-1.12l-.419-1.371h-1.781zm1.57-.785L11 2.687h-.047l-.652 2.157h1.351z"}),s("path",{d:"M12.96 14H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645V14zm-8.46-.5a.5.5 0 0 1-1 0V3.707L2.354 4.854a.5.5 0 1 1-.708-.708l2-1.999l.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L4.5 3.707V13.5z"})])],-1),Ki=s("span",null,"ASC",-1),Zi=[Qi,Ki],Gi=wl('<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M12.96 7H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645V7z"></path><path fill-rule="evenodd" d="M10.082 12.629L9.664 14H8.598l1.789-5.332h1.234L13.402 14h-1.12l-.419-1.371h-1.781zm1.57-.785L11 9.688h-.047l-.652 2.156h1.351z"></path><path d="M4.5 2.5a.5.5 0 0 0-1 0v9.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999l.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L4.5 12.293V2.5z"></path></g></svg><span>DESC</span>',2),Wi=[Gi],Ji=s("h3",{class:"text-base font-medium mt-4 mb-2"}," Filter ",-1),Xi={key:0},Yi=["id","value"],er=["for"],tr={key:1},lr={class:"mb-2"},nr={class:"inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 text-indigo-700"},sr=["onClick"],or=s("svg",{class:"h-2 w-2",stroke:"currentColor",fill:"none",viewBox:"0 0 8 8"},[s("path",{"stroke-linecap":"round","stroke-width":"1.5",d:"M1 1l6 6m0-6L1 7"})],-1),ar=[or],ir={class:"flex"},rr=s("svg",{class:"h-6 w-6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z","clip-rule":"evenodd"})],-1),ur=[rr],dr={class:"bg-gray-50 dark:bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"},Vn=ce({__name:"FilterColumn",props:{definitions:null,column:null,topLeft:null},emits:["done","save"],setup(d,{emit:l}){const c=d,v=A(),p=A(""),m=A(""),g=A([]),y=f(()=>1==c.column.meta.isEnum),n=f(()=>ot("Nullable`1"===c.column.meta.type?c.column.meta.genericArgs[0]:c.column.meta.type)),h=f(()=>1==c.column.meta.isEnum?pn(ws(n.value.name)):[]),b=f(()=>{var e;return(null==(e=r(c.column.type))?void 0:e.map(e=>({key:e.value,value:e.name})))||[]}),x=A({filters:[]}),C=f(()=>x.value.filters);function r(e){let t=c.definitions;return t=gs(e)?t:t.filter(e=>"string"!==e.types)}function L(e,t){return r(e).find(e=>e.value===t)}function V(){var e;p.value&&(e=null==(e=L(c.column.type,p.value))?void 0:e.name)&&(x.value.filters.push({key:p.value,name:e,value:m.value}),p.value=m.value="")}function M(){l("done")}function S(){var e;p.value="%",null!=(e=v.value)&&e.focus()}function I(){var e,t;m.value&&V(),y.value&&(t=Object.values(g.value).filter(e=>e),x.value.filters=0<t.length?null!=(e=n.value)&&e.isEnumInt?[{key:"%HasAny",name:"HasAny",value:t.map(e=>parseInt(e)).reduce((e,t)=>e+t,0).toString()}]:[{key:"%In",name:"In",value:t.join(",")}]:[]),l("save",x.value),l("done")}function $(e){x.value.sort=e===x.value.sort?void 0:e,xt(I)}return hl(()=>x.value=Object.assign({},c.column.settings,{filters:Array.from(c.column.settings.filters)})),hl(()=>{var e;let t=(null==(e=null==(e=null==(e=c.column.settings.filters)?void 0:e[0])?void 0:e.value)?void 0:e.split(","))||[];if(0<t.length&&null!=(e=n.value)&&e.isEnumInt){const l=parseInt(t[0]);t=(null==(e=n.value.enumValues)?void 0:e.filter(e=>0<(l&parseInt(e))))||[]}g.value=t}),(e,t)=>{var l=X("SelectInput"),n=X("TextInput"),r=X("PrimaryButton"),i=X("SecondaryButton");return a(),u("div",{class:"fixed z-20 inset-0 overflow-y-auto",onClick:M,onVnodeMounted:S},[s("div",{class:"absolute",style:Xl(`top:${d.topLeft.y}px;left:${d.topLeft.x}px`),onClick:t[5]||(t[5]=Ue(()=>{},["stop"]))},[s("div",zi,[s("div",Ni,[Ui,s("div",qi,[s("button",{type:"button",title:"Sort Ascending",onClick:t[0]||(t[0]=e=>$("ASC")),class:w(`${"ASC"===x.value.sort?"bg-indigo-100 border-indigo-500":"bg-white hover:bg-gray-50 border-gray-300"} mr-1 inline-flex items-center px-2.5 py-1.5 border shadow-sm text-sm font-medium rounded text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`)},Zi,2),s("button",{type:"button",title:"Sort Descending",onClick:t[1]||(t[1]=e=>$("DESC")),class:w(`${"DESC"===x.value.sort?"bg-indigo-100 border-indigo-500":"bg-white hover:bg-gray-50 border-gray-300"} ml-1 inline-flex items-center px-2.5 py-1.5 border shadow-sm text-sm font-medium rounded text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`)},Wi,2)]),Ji,o(y)?(a(),u("div",Xi,[(a(!0),u(Te,null,Ie(o(h),e=>(a(),u("div",{key:e.key,class:"flex items-center"},[kt(s("input",{type:"checkbox",id:e.key,value:e.key,"onUpdate:modelValue":t[2]||(t[2]=e=>g.value=e),class:"h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"},null,8,Yi),[[Yl,g.value]]),s("label",{for:e.key,class:"ml-3"},T(e.value),9,er)]))),128))])):(a(),u("div",tr,[(a(!0),u(Te,null,Ie(o(C),(e,l)=>{return a(),u("div",lr,[s("span",nr,[we(T(d.column.name)+" "+T(e.name)+" "+T((e=e,_s(L(c.column.type,e.key),c.column.type,e)))+" ",1),s("button",{type:"button",onClick:e=>{var t;t=l,x.value.filters.splice(t,1)},class:"flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"},ar,8,sr)])])}),256)),s("div",ir,[$e(l,{id:"filterRule",class:"w-32 mr-1",modelValue:p.value,"onUpdate:modelValue":t[3]||(t[3]=e=>p.value=e),entries:o(b),label:"",placeholder:""},null,8,["modelValue","entries"]),"none"!==(null==(l=L(d.column.type,p.value))?void 0:l.valueType)?(a(),se(n,{key:0,ref_key:"txtFilter",ref:v,id:"filterValue",class:"w-32 mr-1",type:"text",modelValue:m.value,"onUpdate:modelValue":t[4]||(t[4]=e=>m.value=e),onKeyup:Wn(V,["enter"]),label:"",placeholder:""},null,8,["modelValue","onKeyup"])):k("",!0),s("div",{class:"pt-1"},[s("button",{type:"button",onClick:V,class:"inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"},ur)])])]))]),s("div",dr,[$e(r,{onClick:I,color:"red",class:"ml-2"},{default:ke(()=>[we(" Save ")]),_:1}),$e(i,{onClick:M},{default:ke(()=>[we(" Cancel ")]),_:1})])])],4)],512)}}}),cr={class:"px-4 sm:px-6 lg:px-8 text-sm"},fr={class:"flex flex-wrap"},mr={class:"group pr-4 sm:pr-6 lg:pr-8"},vr={class:"flex justify-between w-full font-medium"},hr={class:"w-6 flex justify-end"},gr={class:"hidden group-hover:inline"},pr=["onClick","title"],yr=s("svg",{class:"h-2 w-2",stroke:"currentColor",fill:"none",viewBox:"0 0 8 8"},[s("path",{"stroke-linecap":"round","stroke-width":"1.5",d:"M1 1l6 6m0-6L1 7"})],-1),br=[yr],wr={key:0,class:"pt-2"},xr={class:"ml-2"},kr={key:1},$r={class:"pt-2"},Cr={class:"inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 text-indigo-700"},_r=["onClick"],Lr=s("svg",{class:"h-2 w-2",stroke:"currentColor",fill:"none",viewBox:"0 0 8 8"},[s("path",{"stroke-linecap":"round","stroke-width":"1.5",d:"M1 1l6 6m0-6L1 7"})],-1),Vr=[Lr],Sr=s("span",null,"Clear All",-1),Mr=[Sr],Sn=ce({__name:"FilterViews",props:{definitions:null,columns:null},emits:["done","change"],setup(e,{emit:r}){const l=e,n=f(()=>l.columns.filter(e=>0<e.settings.filters.length));function i(e,t){return function(e){let t=l.definitions;return t=gs(e)?t:t.filter(e=>"string"!==e.types)}(e).find(e=>e.value===t)}function d(){l.columns.forEach(e=>{e.settings.filters=[],r("change",e)}),r("done")}return(e,t)=>(a(),u("div",cr,[s("div",fr,[(a(!0),u(Te,null,Ie(o(n),n=>{return a(),u("fieldset",mr,[s("legend",vr,[s("span",null,T(o(He)(n.name)),1),s("span",hr,[s("span",gr,[s("button",{onClick:e=>{var t;(t=n).settings.filters=[],r("change",t)},title:`Clear all ${o(He)(n.name)} filters`,class:"flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-red-600 hover:bg-red-200 hover:text-red-500 focus:outline-none focus:bg-red-500 focus:text-white"},br,8,pr)])])]),n.meta.isEnum?(a(),u("div",wr,[(a(!0),u(Te,null,Ie(null==(e=null==(e=null==(e=n.settings.filters)?void 0:e[0])?void 0:e.value)?void 0:e.split(","),e=>(a(),u("div",{key:e,class:"flex items-center"},[s("label",xr,T(e),1)]))),128))])):(a(),u("div",kr,[(a(!0),u(Te,null,Ie(n.settings.filters,(e,l)=>{return a(),u("div",$r,[s("span",Cr,[we(T(n.name)+" "+T(e.name)+" "+T((e=e,_s(i((t=n).type,e.value),t.type,e)))+" ",1),s("button",{type:"button",onClick:e=>{var t;(t=n).settings.filters.splice(l,1),r("change",t)},class:"flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"},Vr,8,_r)])]);var t}),256))]))]);var e}),256))]),s("div",{class:"flex justify-center pt-4"},[s("button",{type:"button",onClick:d,class:"inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"},Mr)])]))}}),Ar={class:"bg-white dark:bg-black px-4 pt-5 pb-4 sm:p-6 sm:pb-4"},Tr={class:""},Fr={class:"mt-3 text-center sm:mt-0 sm:mx-4 sm:text-left"},Ir=s("h3",{class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"},"Query Preferences",-1),Dr={class:"mt-4"},jr=["for"],Or=["id"],Pr=["value","selected"],Br={class:"mt-4 flex items-center py-4 border-b border-gray-200 dark:border-gray-800"},Rr=["id","checked"],Er=["for"],Hr={class:"mt-4"},zr={class:"pb-2 px-4"},Nr={class:""},Ur=["id","value"],qr=["for"],Qr={class:"bg-gray-50 dark:bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"},Mn=ce({__name:"QueryPrefs",props:{id:{default:"QueryPrefs"},columns:null,prefs:null,maxLimit:null},emits:["done","save"],setup(r,{emit:e}){const i=r,t=St()["autoQueryGridDefaults"],d=A({}),c=(hl(()=>d.value=Object.assign({take:t.value.take,selectedColumns:[]},i.prefs)),[10,25,50,100,250,500,1e3]);function v(){e("done")}function f(){e("save",d.value)}return(e,t)=>{const l=X("PrimaryButton"),n=X("SecondaryButton"),o=X("ModalDialog");return a(),se(o,{id:r.id,onDone:v,"size-class":"w-full sm:max-w-prose"},{default:ke(()=>[s("div",Ar,[s("div",Tr,[s("div",Fr,[Ir,s("div",Dr,[s("label",{for:r.id+"-take",class:"block text-sm font-medium text-gray-700 dark:text-gray-300"},"Results per page",8,jr),kt(s("select",{id:r.id+"-take","onUpdate:modelValue":t[0]||(t[0]=e=>d.value.take=e),class:"mt-1 block w-full pl-3 pr-10 py-2 text-base bg-white dark:bg-black border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"},[(a(!0),u(Te,null,Ie(c.filter(e=>null==i.maxLimit||e<=i.maxLimit),e=>(a(),u("option",{value:e,selected:e===d.value.take},T(e),9,Pr))),256))],8,Or),[[oo,d.value.take]])]),s("div",Br,[s("input",{type:"radio",id:r.id+"-allColumns",onClick:t[1]||(t[1]=e=>d.value.selectedColumns=[]),checked:0===d.value.selectedColumns.length,class:"focus:ring-indigo-500 h-4 w-4 bg-white dark:bg-black text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-700"},null,8,Rr),s("label",{class:"ml-3 block text-gray-700 dark:text-gray-300",for:r.id+"-allColumns"},"View all columns",8,Er)]),s("div",Hr,[s("div",zr,[s("div",Nr,[(a(!0),u(Te,null,Ie(r.columns,e=>(a(),u("div",{key:e.name,class:"flex items-center"},[kt(s("input",{type:"checkbox",id:e.name,value:e.name,"onUpdate:modelValue":t[2]||(t[2]=e=>d.value.selectedColumns=e),class:"h-4 w-4 bg-white dark:bg-black border-gray-300 dark:border-gray-700 rounded text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500"},null,8,Ur),[[Yl,d.value.selectedColumns]]),s("label",{for:e.name,class:"ml-3"},T(e.name),9,qr)]))),128))])])])])])]),s("div",Qr,[$e(l,{onClick:f,color:"red",class:"ml-2"},{default:ke(()=>[we(" Save ")]),_:1}),$e(n,{onClick:v},{default:ke(()=>[we(" Cancel ")]),_:1})])]),_:1},8,["id"])}}}),Kr={key:0},Zr={key:1},Gr={key:2,class:"pt-1"},Wr={key:0},Jr={key:1},Xr={key:3},Yr={class:"pl-1 pt-1 flex flex-wrap"},eu={class:"flex mt-1"},tu=["title"],lu=s("svg",{class:"w-8 h-8",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("g",{"stroke-width":"1.5",fill:"none"},[s("path",{d:"M9 3H3.6a.6.6 0 0 0-.6.6v16.8a.6.6 0 0 0 .6.6H9M9 3v18M9 3h6M9 21h6m0-18h5.4a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H15m0-18v18",stroke:"currentColor"})])],-1),nu=[lu],su=["disabled"],ou=s("svg",{class:"w-8 h-8",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{d:"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z",fill:"currentColor"})],-1),au=[ou],iu=["disabled"],ru=s("svg",{class:"w-8 h-8",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{d:"M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z",fill:"currentColor"})],-1),uu=[ru],du=["disabled"],cu=s("svg",{class:"w-8 h-8",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{d:"M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z",fill:"currentColor"})],-1),fu=[cu],mu=["disabled"],vu=s("svg",{class:"w-8 h-8",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{d:"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z",fill:"currentColor"})],-1),hu=[vu],gu={key:0,class:"flex mt-1"},pu={class:"px-4 text-lg text-black dark:text-white"},yu={key:0},bu={key:1},wu=s("span",{class:"hidden xl:inline"}," Showing Results ",-1),xu={key:2},ku={class:"flex flex-wrap"},$u={key:0,class:"pl-2 mt-1"},Cu=s("svg",{class:"w-5 h-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M20 20v-5h-5M4 4v5h5m10.938 2A8.001 8.001 0 0 0 5.07 8m-1.008 5a8.001 8.001  0 0 0 14.868 3"})],-1),_u=[Cu],Lu={key:1,class:"pl-2 mt-1"},Vu=wl('<svg class="w-5 h-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28.781 4.405h-10.13V2.018L2 4.588v22.527l16.651 2.868v-3.538h10.13A1.162 1.162 0 0 0 30 25.349V5.5a1.162 1.162 0 0 0-1.219-1.095zm.16 21.126H18.617l-.017-1.889h2.487v-2.2h-2.506l-.012-1.3h2.518v-2.2H18.55l-.012-1.3h2.549v-2.2H18.53v-1.3h2.557v-2.2H18.53v-1.3h2.557v-2.2H18.53v-2h10.411z" fill="#20744a" fill-rule="evenodd"></path><path fill="#20744a" d="M22.487 7.439h4.323v2.2h-4.323z"></path><path fill="#20744a" d="M22.487 10.94h4.323v2.2h-4.323z"></path><path fill="#20744a" d="M22.487 14.441h4.323v2.2h-4.323z"></path><path fill="#20744a" d="M22.487 17.942h4.323v2.2h-4.323z"></path><path fill="#20744a" d="M22.487 21.443h4.323v2.2h-4.323z"></path><path fill="#fff" fill-rule="evenodd" d="M6.347 10.673l2.146-.123l1.349 3.709l1.594-3.862l2.146-.123l-2.606 5.266l2.606 5.279l-2.269-.153l-1.532-4.024l-1.533 3.871l-2.085-.184l2.422-4.663l-2.238-4.993z"></path></svg><span class="text-green-900 dark:text-green-100">Excel</span>',2),Su=[Vu],Mu={key:2,class:"pl-2 mt-1"},Au={key:0,class:"w-5 h-5 mr-1 text-green-600 dark:text-green-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},Tu=s("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 13l4 4L19 7"},null,-1),Fu=[Tu],Iu={key:1,class:"w-5 h-5 mr-1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Du=s("g",{fill:"none"},[s("path",{d:"M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),s("path",{d:"M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1),ju=[Du],Ou=s("span",{class:"whitespace-nowrap"},"Copy URL",-1),Pu={key:3,class:"pl-2 mt-1"},Bu=s("svg",{class:"w-5 h-5",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",viewBox:"0 0 24 24"},[s("path",{fill:"currentColor",d:"M6.78 2.72a.75.75 0 0 1 0 1.06L4.56 6h8.69a7.75 7.75 0 1 1-7.75 7.75a.75.75 0 0 1 1.5 0a6.25 6.25 0 1 0 6.25-6.25H4.56l2.22 2.22a.75.75 0 1 1-1.06 1.06l-3.5-3.5a.75.75 0 0 1 0-1.06l3.5-3.5a.75.75 0 0 1 1.06 0Z"})],-1),Ru=[Bu],Eu={key:4,class:"pl-2 mt-1"},Hu=s("svg",{class:"flex-none w-5 h-5 mr-2 text-gray-400 dark:text-gray-500 group-hover:text-gray-500","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},[s("path",{"fill-rule":"evenodd",d:"M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z","clip-rule":"evenodd"})],-1),zu={class:"mr-1"},Nu={key:0,class:"h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},Uu=s("path",{"fill-rule":"evenodd",d:"M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z","clip-rule":"evenodd"},null,-1),qu=[Uu],Qu={key:1,class:"h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},Ku=s("path",{"fill-rule":"evenodd",d:"M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z","clip-rule":"evenodd"},null,-1),Zu=[Ku],Gu={key:5,class:"pl-2 mt-1"},Wu=["title"],Ju=s("svg",{class:"w-5 h-5 mr-1 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{d:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z",fill:"currentColor"})],-1),Xu={class:"whitespace-nowrap"},Yu={key:7},ed={key:0,class:"cursor-pointer flex justify-between items-center hover:text-gray-900 dark:hover:text-gray-50"},td={class:"mr-1 select-none"},ld={key:1,class:"flex justify-between items-center"},nd={class:"mr-1 select-none"},sd=ce({__name:"AutoQueryGrid",props:{filterDefinitions:null,id:{default:"AutoQueryGrid"},apis:null,type:null,prefs:null,deny:null,hide:null,selectedColumns:null,toolbarButtonClass:null,tableStyle:null,gridClass:null,grid2Class:null,grid3Class:null,grid4Class:null,tableClass:null,theadClass:null,tbodyClass:null,theadRowClass:null,theadCellClass:null,headerTitle:null,headerTitles:null,visibleFrom:null,rowClass:null,rowStyle:null,apiPrefs:null,canFilter:null,disableKeyBindings:null,configureField:null,skip:{default:0},create:{type:Boolean},edit:null,filters:null},emits:["headerSelected","rowSelected"],setup(p,{expose:e,emit:v}){const r=p,{config:t,autoQueryGridDefaults:W}=St(),G=W,J=Ne("client"),l=t.value.storage,Y="filtering,queryString,queryFilters".split(","),ee="copyApiUrl,downloadCsv,filtersView,newItem,pagingInfo,pagingNav,preferences,refresh,resetPreferences,toolbar".split(","),te=f(()=>r.deny?wt(Y,r.deny):wt(Y,G.value.deny)),le=f(()=>r.hide?wt(ee,r.hide):wt(ee,G.value.hide));function m(e){return te.value[e]}function g(e){return le.value[e]}const y=f(()=>r.tableStyle??G.value.tableStyle),ae=f(()=>r.gridClass??ge.getGridClass(y.value)),oe=f(()=>r.grid2Class??ge.getGrid2Class(y.value)),re=f(()=>r.grid3Class??ge.getGrid3Class(y.value)),ie=f(()=>r.grid4Class??ge.getGrid4Class(y.value)),ue=f(()=>r.tableClass??ge.getTableClass(y.value)),de=f(()=>r.theadClass??ge.getTheadClass(y.value)),ce=f(()=>r.theadRowClass??ge.getTheadRowClass(y.value)),ve=f(()=>r.theadCellClass??ge.getTheadCellClass(y.value)),h=f(()=>r.toolbarButtonClass??ge.toolbarButtonClass);function fe(e,t){var l,a;return r.rowClass?r.rowClass(e,t):(l=!!q.value.AnyUpdate,a=(null!=(a=i.value)&&a.name?ye(e,i.value.name):null)==S.value,ge.getTableRowClass(r.tableStyle,t,a,l))}const b=en(),pe=f(()=>{var e;return st((null==(e=q.value.AnyQuery.viewModel)?void 0:e.name)||q.value.AnyQuery.dataModel.name)}),me=f(()=>{const t=Object.keys(b).map(e=>e.toLowerCase());return et(pe.value).filter(e=>t.includes(e.name.toLowerCase())||t.includes(e.name.toLowerCase()+"-header")).map(e=>e.name)});const x=f(()=>{var e=(0<(e=pt(r.selectedColumns)).length?e:0<me.value.length?me.value:[]).map(e=>e.toLowerCase());const l=et(pe.value);return 0<e.length?e.map(t=>l.find(e=>e.name.toLowerCase()===t)).filter(e=>null!=e):l}),he=f(()=>{let e=x.value.map(e=>e.name),t=pt(O.value.selectedColumns).map(e=>e.toLowerCase());return 0<t.length?e.filter(e=>t.includes(e.toLowerCase())):e}),C=A([]),L=A(new Je),be=A(new Je),V=A(),M=A(!1),S=A(),I=A(),$=A(!1),F=A(),B=A(r.skip),j=A(!1),O=A({take:25}),H=A(!1),xe=f(()=>C.value.some(e=>0<e.settings.filters.length||!!e.settings.sort)||O.value.selectedColumns),Ce=f(()=>C.value.map(e=>e.settings.filters.length).reduce((e,t)=>e+t,0)),Le=f(()=>{var e;return et(st(d.value||(null==(e=q.value.AnyQuery)?void 0:e.dataModel.name)))}),i=f(()=>{var e;return el(st(d.value||(null==(e=q.value.AnyQuery)?void 0:e.dataModel.name)))}),D=f(()=>O.value.take??25),E=f(()=>L.value.response?ye(L.value.response,"results"):[]),z=f(()=>{var e;return(null==(e=L.value.response)?void 0:e.total)??E.value.length??0}),Te=f(()=>0<B.value),Ae=f(()=>0<B.value),Ve=f(()=>E.value.length>=D.value),Me=f(()=>E.value.length>=D.value),_=A(),R=A(),Se={NoQuery:"No Query API was found"};function Fe(t){if(t){if(r.canFilter)return r.canFilter(t);var e=Le.value.find(e=>e.name.toLowerCase()==t.toLowerCase());if(e)return!ps(e)}}function n(e){m("queryString")&&nn(e)}async function N(e){B.value+=e,B.value<0&&(B.value=0);e=Math.floor(z.value/D.value)*D.value;B.value>e&&(B.value=e),n({skip:B.value||void 0}),await P()}async function je(e,t){var l,a;I.value=null,S.value=t,e&&t&&(a=Gt(q.value.AnyQuery,{[e]:t}),(a=await J.api(a)).succeeded)&&((a=null==(a=ye(a.response,"results"))?void 0:a[0])||console.warn(`API ${null==(l=q.value.AnyQuery)?void 0:l.request.name}(${e}:${t}) returned no results`),I.value=a)}async function Oe(e,t){v("rowSelected",e,t);t=null==(t=i.value)?void 0:t.name,e=t?ye(e,t):null;t&&e&&(n({edit:e}),je(t,e))}function He(t,e){var l,a,s;m("filtering")&&(l=e.target,Fe(t)&&"TD"!==(null==l?void 0:l.tagName)&&(l=null==(l=null==l?void 0:l.closest("TABLE"))?void 0:l.getBoundingClientRect(),a=C.value.find(e=>e.name.toLowerCase()==t.toLowerCase()))&&l&&(s=l.x+318+10,F.value={column:a,topLeft:{x:Math.max(Math.floor(e.clientX+159),s),y:l.y+45}}),v("headerSelected",t,e))}function De(){F.value=null}async function Ee(e){var t=null==(t=F.value)?void 0:t.column;t&&(t.settings=e,l.setItem(c(t.name),JSON.stringify(t.settings)),await P()),F.value=null}async function ze(e){l.setItem(c(e.name),JSON.stringify(e.settings)),await P()}async function _e(e){$.value=!1,O.value=e,l.setItem(Ye(),JSON.stringify(e)),await P()}function Re(e){Object.assign(I.value,e),Pe()}function Pe(){null!=(e=_.value)&&e.forceUpdate(),null!=(e=R.value)&&e.forceUpdate();var e=Be();null!=(e=null==e?void 0:e.proxy)&&e.$forceUpdate()}async function P(){await Ue(qe())}async function Ze(){await P()}async function Ue(a){var s=q.value.AnyQuery;if(s){let e=Gt(s,a),t=es(e=>{L.value.response=L.value.error=void 0,H.value=e}),l=await J.api(e);t(),xt(()=>L.value=l);s=ye(l.response,"results")||[];l.succeeded&&s.label}else console.error(Se.NoQuery)}function qe(){let a={include:"total",take:D.value},t=pt(O.value.selectedColumns||r.selectedColumns);if(0<t.length){var l=i.value;l&&!t.includes(l.name)&&(t=[l.name,...t]);const s=Le.value,n=[];t.forEach(t=>{var e,l=s.find(e=>e.name.toLowerCase()==t.toLowerCase());null!=(e=null==l?void 0:l.ref)&&e.selfId&&n.push(l.ref.selfId),ye(b,t)&&n.push(...s.filter(e=>{return(null==(e=null==(e=e.ref)?void 0:e.selfId)?void 0:e.toLowerCase())==t.toLowerCase()}).map(e=>e.name))}),n.forEach(e=>{t.includes(e)||t.push(e)}),a.fields=t.join(",")}let e=[];if(C.value.forEach(l=>{l.settings.sort&&e.push(("DESC"===l.settings.sort?"-":"")+l.name),l.settings.filters.forEach(e=>{var t=e.key.replace("%",l.name);a[t]=e.value})}),r.filters&&Object.keys(r.filters).forEach(e=>{a[e]=r.filters[e]}),m("queryString")&&m("queryFilters")){var l=location.search||(location.hash.includes("?")?"?"+dl(location.hash,"?"):"");let e=zl(l);Object.keys(e).forEach(t=>{x.value.find(e=>e.name.toLowerCase()===t.toLowerCase())&&(a[t]=e[t])}),typeof e.skip<"u"&&(l=parseInt(e.skip),isNaN(l)||(B.value=a.skip=l))}return"u"<typeof a.skip&&0<B.value&&(a.skip=B.value),0<e.length&&(a.orderBy=e.join(",")),a}function Xe(){var e=Ke("csv");ql(e),typeof window<"u"&&window.open(e)}function Qe(){ql(Ke("json")),j.value=!0,setTimeout(()=>j.value=!1,3e3)}function Ke(e="json"){var t=qe(),l="/api/"+(null==(l=q.value.AnyQuery)?void 0:l.request.name),l=ko(J.baseUrl,Kt(l,{...t,jsconfig:"edv"}));return 0<=l.indexOf("?")?xl(l,"?")+"."+e+"?"+dl(l,"?"):l+".json"}async function We(){C.value.forEach(e=>{e.settings={filters:[]},l.removeItem(c(e.name))}),O.value={take:25},l.removeItem(Ye()),await P()}function Ge(){M.value=!0,n({create:null})}e({update:P,search:Ue,createRequestArgs:qe,reset:bt,createDone:K,createSave:ht,editDone:Q,editSave:yt,forceUpdate:Pe,setEdit:Re,edit:I}),ne.interceptors.has("AutoQueryGrid.new")&&ne.interceptors.invoke("AutoQueryGrid.new",{props:r});const d=f(()=>Et(r.type)),U=f(()=>{var e;return d.value||(null==(e=q.value.AnyQuery)?void 0:e.dataModel.name)}),Ye=()=>{var e;return r.id+"/ApiPrefs/"+(d.value||(null==(e=q.value.AnyQuery)?void 0:e.dataModel.name))},c=e=>{var t;return`Column/${r.id}:${d.value||(null==(t=q.value.AnyQuery)?void 0:t.dataModel.name)}.`+e},{metadataApi:lt,typeOf:st,apiOf:nt,filterDefinitions:ot}=at(),rt=Ln()["invalidAccessMessage"],it=f(()=>r.filterDefinitions||ot.value),q=f(()=>{var e=pt(r.apis);return 0<e.length?Pt.from(e.map(e=>nt(e)).filter(e=>null!=e).map(e=>e)):Pt.forType(d.value,lt.value)}),ut=e=>`<span class="text-yellow-700">${e}</span>`,dt=f(()=>{var e;return lt.value?0<(e=pt(r.apis).map(e=>null==nt(e)?e:null).filter(e=>null!=e)).length?ut(`Unknown API${1<e.length?"s":""}: `+e.join(", ")):(e=q.value).empty?ut("Mising DataModel in property 'type' or AutoQuery APIs to use in property 'apis'"):e.AnyQuery?null:ut(Se.NoQuery):ut(`AppMetadata not loaded, see <a class="${bl.blue}" href="https://docs.servicestack.net/vue/use-metadata" target="_blank">useMetadata()</a>`)}),ct=f(()=>q.value.AnyQuery&&rt(q.value.AnyQuery)),vt=f(()=>q.value.Create&&rt(q.value.Create)),ft=f(()=>q.value.AnyUpdate&&rt(q.value.AnyUpdate)),mt=f(()=>vl(q.value.Create)),gt=(f(()=>vl(q.value.AnyUpdate)),f(()=>vl(q.value.Delete)));function Q(){I.value=null,S.value=null,n({edit:void 0})}function K(){M.value=!1,n({create:void 0})}async function yt(){await P(),Q()}async function ht(){await P(),K()}function bt(){L.value=new Je,be.value=new Je,M.value=!1,S.value=null,I.value=null,$.value=!1,F.value=null,B.value=r.skip,j.value=!1,O.value={take:25},H.value=!1;var e,t=r.prefs||yl(l.getItem(Ye())),t=(t&&(O.value=t),C.value=x.value.map(e=>({name:e.name,type:e.type,meta:e,settings:Object.assign({filters:[]},yl(l.getItem(c(e.name))))})),isNaN(r.skip)||(B.value=r.skip),null==(t=i.value)?void 0:t.name);m("queryString")&&(e=location.search||(location.hash.includes("?")?"?"+dl(location.hash,"?"):""),typeof(e=zl(e)).create<"u"?M.value=typeof e.create<"u":!t||"string"!=typeof e.edit&&"number"!=typeof e.edit||je(t,e.edit)),!0===r.create&&(M.value=!0),t&&null!=r.edit&&je(t,r.edit)}return tt(async()=>{bt(),await P()}),(l,e)=>{const t=X("Alert"),n=X("EnsureAccessDialog"),r=X("AutoCreateForm"),i=X("AutoEditForm"),d=X("ErrorSummary"),c=X("Loading"),v=X("SettingsIcons"),f=X("DataGrid");return o(dt)?(a(),u("div",Kr,[$e(t,{innerHTML:o(dt)},null,8,["innerHTML"])])):o(ct)?(a(),u("div",Zr,[$e(qs,{"invalid-access":o(ct)},null,8,["invalid-access"])])):(a(),u("div",Gr,[M.value&&o(q).Create?(a(),u("div",Wr,[o(vt)?(a(),se(n,{key:0,title:"Create "+o(U),"invalid-access":o(vt),"alert-class":"text-yellow-700",onDone:K},null,8,["title","invalid-access"])):o(b).createform?Z(l.$slots,"createform",{key:1,type:o(q).Create.request.name,configure:p.configureField,done:K,save:ht}):(a(),se(r,{key:2,ref_key:"createForm",ref:_,type:o(q).Create.request.name,configure:p.configureField,onDone:K,onSave:ht},{header:ke(()=>[Z(l.$slots,"formheader",{form:"create",formInstance:_.value,apis:o(q),type:o(U)})]),footer:ke(()=>[Z(l.$slots,"formfooter",{form:"create",formInstance:_.value,apis:o(q),type:o(U)})]),_:3},8,["type","configure"]))])):I.value&&o(q).AnyUpdate?(a(),u("div",Jr,[o(ft)?(a(),se(n,{key:0,title:"Update "+o(U),"invalid-access":o(ft),"alert-class":"text-yellow-700",onDone:Q},null,8,["title","invalid-access"])):o(b).editform?Z(l.$slots,"editform",{key:1,model:I.value,type:o(q).AnyUpdate.request.name,deleteType:o(gt)?o(q).Delete.request.name:null,configure:p.configureField,done:Q,save:yt}):(a(),se(i,{key:2,ref_key:"editForm",ref:R,modelValue:I.value,"onUpdate:modelValue":e[0]||(e[0]=e=>I.value=e),type:o(q).AnyUpdate.request.name,deleteType:o(gt)?o(q).Delete.request.name:null,configure:p.configureField,onDone:Q,onSave:yt,onDelete:yt},{header:ke(()=>[Z(l.$slots,"formheader",{form:"edit",formInstance:R.value,apis:o(q),type:o(U),model:I.value,id:S.value,updateModel:Re})]),footer:ke(()=>[Z(l.$slots,"formfooter",{form:"edit",formInstance:R.value,apis:o(q),type:o(U),model:I.value,id:S.value,updateModel:Re})]),_:3},8,["modelValue","type","deleteType","configure"]))])):k("",!0),o(b).toolbar?Z(l.$slots,"toolbar",{key:2}):g("toolbar")?(a(),u("div",Xr,[$.value?(a(),se(Mn,{key:0,columns:o(x),prefs:O.value,onDone:e[1]||(e[1]=e=>$.value=!1),onSave:_e},null,8,["columns","prefs"])):k("",!0),s("div",Yr,[s("div",eu,[g("preferences")?(a(),u("button",{key:0,type:"button",class:"text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400",title:o(U)+" Preferences",onClick:e[2]||(e[2]=e=>$.value=!$.value)},nu,8,tu)):k("",!0),g("pagingNav")?(a(),u("button",{key:1,type:"button",class:w(["pl-2",o(Te)?"text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400":"text-gray-400 dark:text-gray-500"]),title:"First page",disabled:!o(Te),onClick:e[3]||(e[3]=e=>N(-o(z)))},au,10,su)):k("",!0),g("pagingNav")?(a(),u("button",{key:2,type:"button",class:w(["pl-2",o(Ae)?"text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400":"text-gray-400 dark:text-gray-500"]),title:"Previous page",disabled:!o(Ae),onClick:e[4]||(e[4]=e=>N(-o(D)))},uu,10,iu)):k("",!0),g("pagingNav")?(a(),u("button",{key:3,type:"button",class:w(["pl-2",o(Ve)?"text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400":"text-gray-400 dark:text-gray-500"]),title:"Next page",disabled:!o(Ve),onClick:e[5]||(e[5]=e=>N(o(D)))},fu,10,du)):k("",!0),g("pagingNav")?(a(),u("button",{key:4,type:"button",class:w(["pl-2",o(Me)?"text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400":"text-gray-400 dark:text-gray-500"]),title:"Last page",disabled:!o(Me),onClick:e[6]||(e[6]=e=>N(o(z)))},hu,10,mu)):k("",!0)]),g("pagingInfo")?(a(),u("div",gu,[s("div",pu,[H.value?(a(),u("span",yu,"Querying...")):k("",!0),o(E).length?(a(),u("span",bu,[wu,we(" "+T(B.value+1)+" - "+T(Math.min(B.value+o(E).length,o(z)))+" ",1),s("span",null," of "+T(o(z)),1)])):L.value.completed?(a(),u("span",xu,"No Results")):k("",!0)])])):k("",!0),s("div",ku,[g("refresh")?(a(),u("div",$u,[s("button",{type:"button",onClick:Ze,title:"Refresh",class:w(o(h))},_u,2)])):k("",!0),g("downloadCsv")?(a(),u("div",Lu,[s("button",{type:"button",onClick:Xe,title:"Download CSV",class:w(o(h))},Su,2)])):k("",!0),g("copyApiUrl")?(a(),u("div",Mu,[s("button",{type:"button",onClick:Qe,title:"Copy API URL",class:w(o(h))},[j.value?(a(),u("svg",Au,Fu)):(a(),u("svg",Iu,ju)),Ou],2)])):k("",!0),o(xe)&&g("resetPreferences")?(a(),u("div",Pu,[s("button",{type:"button",onClick:We,title:"Reset Preferences & Filters",class:w(o(h))},Ru,2)])):k("",!0),g("filtersView")&&0<o(Ce)?(a(),u("div",Eu,[s("button",{type:"button",onClick:e[7]||(e[7]=e=>V.value="filters"==V.value?null:"filters"),class:w(o(h)),"aria-expanded":"false"},[Hu,s("span",zu,T(o(Ce))+" "+T(1==o(Ce)?"Filter":"Filters"),1),"filters"!=V.value?(a(),u("svg",Nu,qu)):(a(),u("svg",Qu,Zu))],2)])):k("",!0),g("newItem")&&o(q).Create&&o(mt)?(a(),u("div",Gu,[s("button",{type:"button",onClick:Ge,title:o(U),class:w(o(h))},[Ju,s("span",Xu,"New "+T(o(U)),1)],10,Wu)])):k("",!0),o(b).toolbarbuttons?Z(l.$slots,"toolbarbuttons",{key:6,toolbarButtonClass:o(h)}):k("",!0)])])])):k("",!0),"filters"==V.value?(a(),se(Sn,{key:4,class:"border-y border-gray-200 dark:border-gray-800 py-8 my-2",definitions:o(it),columns:C.value,onDone:e[8]||(e[8]=e=>V.value=null),onChange:ze},null,8,["definitions","columns"])):k("",!0),be.value.error??L.value.error?(a(),se(d,{key:5,status:be.value.error??L.value.error},null,8,["status"])):H.value?(a(),se(c,{key:6,class:"p-2"})):k("",!0),F.value?(a(),u("div",Yu,[$e(Vn,{definitions:o(it),column:F.value.column,"top-left":F.value.topLeft,onDone:De,onSave:Ee},null,8,["definitions","column","top-left"])])):k("",!0),o(E).length?(a(),se(f,{key:8,id:p.id,items:o(E),type:p.type,"selected-columns":o(he),class:"mt-1",onFiltersChanged:P,tableStyle:o(y),gridClass:o(ae),grid2Class:o(oe),grid3Class:o(re),grid4Class:o(ie),tableClass:o(ue),theadClass:o(de),theadRowClass:o(ce),theadCellClass:o(ve),tbodyClass:p.tbodyClass,rowClass:fe,onRowSelected:Oe,rowStyle:p.rowStyle,headerTitle:p.headerTitle,headerTitles:p.headerTitles,visibleFrom:p.visibleFrom,onHeaderSelected:He},tn({header:ke(({column:t,label:e})=>{var l;return[m("filtering")&&Fe(t)?(a(),u("div",ed,[s("span",td,T(e),1),$e(v,{column:C.value.find(e=>e.name.toLowerCase()===t.toLowerCase()),"is-open":(null==(l=F.value)?void 0:l.column.name)===t},null,8,["column","is-open"])])):(a(),u("div",ld,[s("span",nd,T(e),1)]))]}),_:2},[Ie(Object.keys(o(b)),t=>({name:t,fn:ke(e=>[Z(l.$slots,t,jt(gl(e)))])}))]),1032,["id","items","type","selected-columns","tableStyle","gridClass","grid2Class","grid3Class","grid4Class","tableClass","theadClass","theadRowClass","theadCellClass","tbodyClass","rowStyle","headerTitle","headerTitles","visibleFrom"])):k("",!0)]))}}}),od={class:"flex"},ad={key:0,class:"w-4 h-4",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},id=s("g",{fill:"none"},[s("path",{d:"M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2.586a1 1 0 0 1-.293.707l-6.414 6.414a1 1 0 0 0-.293.707V17l-4 4v-6.586a1 1 0 0 0-.293-.707L3.293 7.293A1 1 0 0 1 3 6.586V4z",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1),rd=[id],ud=s("path",{d:"M505.5 658.7c3.2 4.4 9.7 4.4 12.9 0l178-246c3.8-5.3 0-12.7-6.5-12.7H643c-10.2 0-19.9 4.9-25.9 13.2L512 558.6L406.8 413.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246z",fill:"currentColor"},null,-1),dd=s("path",{d:"M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z",fill:"currentColor"},null,-1),cd=[ud,dd],fd={key:2,class:"w-4 h-4",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20"},md=s("g",{fill:"none"},[s("path",{d:"M8.998 4.71L6.354 7.354a.5.5 0 1 1-.708-.707L9.115 3.18A.499.499 0 0 1 9.498 3H9.5a.5.5 0 0 1 .354.147l.01.01l3.49 3.49a.5.5 0 1 1-.707.707l-2.65-2.649V16.5a.5.5 0 0 1-1 0V4.71z",fill:"currentColor"})],-1),vd=[md],hd={key:3,class:"w-4 h-4",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20"},gd=s("g",{fill:"none"},[s("path",{d:"M10.002 15.29l2.645-2.644a.5.5 0 0 1 .707.707L9.886 16.82a.5.5 0 0 1-.384.179h-.001a.5.5 0 0 1-.354-.147l-.01-.01l-3.49-3.49a.5.5 0 1 1 .707-.707l2.648 2.649V3.5a.5.5 0 0 1 1 0v11.79z",fill:"currentColor"})],-1),pd=[gd],yd=ce({__name:"SettingsIcons",props:{column:null,isOpen:{type:Boolean}},setup(s){return(e,t)=>{var l;return a(),u("div",od,[null!=(l=null==(l=null==(l=s.column)?void 0:l.settings)?void 0:l.filters)&&l.length?(a(),u("svg",ad,rd)):(a(),u("svg",{key:1,class:w(["w-4 h-4 transition-transform",s.isOpen?"rotate-180":""]),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},cd,2)),"ASC"===(null==(l=null==(l=s.column)?void 0:l.settings)?void 0:l.sort)?(a(),u("svg",fd,vd)):"DESC"===(null==(l=null==(l=s.column)?void 0:l.settings)?void 0:l.sort)?(a(),u("svg",hd,pd)):k("",!0)])}}}),bd=ce({__name:"EnsureAccessDialog",props:{title:null,subtitle:null,invalidAccess:null,alertClass:null},emits:["done"],setup(n){return(t,e)=>{const l=X("EnsureAccess"),s=X("SlideOver");return n.invalidAccess?(a(),se(s,{key:0,title:n.title,onDone:e[0]||(e[0]=e=>t.$emit("done")),"content-class":"relative flex-1"},tn({default:ke(()=>[$e(l,{alertClass:n.alertClass,invalidAccess:n.invalidAccess},null,8,["alertClass","invalidAccess"])]),_:2},[n.subtitle?{name:"subtitle",fn:ke(()=>[we(T(n.subtitle),1)]),key:"0"}:void 0]),1032,["title"])):k("",!0)}}}),wd=["for"],xd={class:"mt-1 relative rounded-md shadow-sm"},kd=["type","name","id","placeholder","value","aria-invalid","aria-describedby"],$d={key:0,class:"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"},Cd=s("svg",{class:"h-5 w-5 text-red-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z","clip-rule":"evenodd"})],-1),_d=[Cd],Ld=["id"],Vd=["id"],Sd={inheritAttrs:!1},Md=ce({...Sd,__name:"TextInput",props:{status:null,id:null,type:null,inputClass:null,label:null,labelClass:null,help:null,placeholder:null,modelValue:null},setup(l,{expose:e}){const t=l,n=(e({focus:function(){var e;null!=(e=n.value)&&e.focus()}}),A());const r=f(()=>t.type||"text"),i=f(()=>t.label??He(st(t.id))),d=f(()=>t.placeholder??i.value);let c=Ne("ApiState",void 0);const v=f(()=>mt.call({responseStatus:t.status??(null==c?void 0:c.error.value)},t.id)),p=f(()=>[nt.base,v.value?nt.invalid:nt.valid,t.inputClass]);return(t,e)=>(a(),u("div",{class:w([t.$attrs.class])},[Z(t.$slots,"header",Me({inputElement:n.value,id:l.id,modelValue:l.modelValue,status:l.status},t.$attrs)),o(i)?(a(),u("label",{key:0,for:l.id,class:w("block text-sm font-medium text-gray-700 dark:text-gray-300 "+(l.labelClass??""))},T(o(i)),11,wd)):k("",!0),s("div",xd,[s("input",Me({ref_key:"inputElement",ref:n,type:o(r),name:l.id,id:l.id,class:o(p),placeholder:o(d),value:l.modelValue,onInput:e[0]||(e[0]=e=>t.$emit("update:modelValue",e.target.value)),"aria-invalid":null!=o(v),"aria-describedby":l.id+"-error",step:"any"},o(dt)(t.$attrs,["class"])),null,16,kd),o(v)?(a(),u("div",$d,_d)):k("",!0)]),o(v)?(a(),u("p",{key:1,class:"mt-2 text-sm text-red-500",id:l.id+"-error"},T(o(v)),9,Ld)):l.help?(a(),u("p",{key:2,class:"mt-2 text-sm text-gray-500",id:l.id+"-description"},T(l.help),9,Vd)):k("",!0),Z(t.$slots,"footer",Me({inputElement:n.value,id:l.id,modelValue:l.modelValue,status:l.status},t.$attrs))],2))}}),Ad=["for"],Td={class:"mt-1 relative rounded-md shadow-sm"},Fd=["name","id","placeholder","aria-invalid","aria-describedby"],Id=["id"],Dd=["id"],jd={inheritAttrs:!1},Od=ce({...jd,__name:"TextareaInput",props:{status:null,id:null,inputClass:null,label:null,labelClass:null,help:null,placeholder:null,modelValue:null},setup(l){const e=l,n=f(()=>e.label??He(st(e.id))),r=f(()=>e.placeholder??n.value);let t=Ne("ApiState",void 0);const i=f(()=>mt.call({responseStatus:e.status??(null==t?void 0:t.error.value)},e.id)),d=f(()=>["shadow-sm "+nt.base,i.value?"text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300":"text-gray-900 "+nt.valid,e.inputClass]);return(t,e)=>(a(),u("div",{class:w([t.$attrs.class])},[o(n)?(a(),u("label",{key:0,for:l.id,class:w("block text-sm font-medium text-gray-700 dark:text-gray-300 "+(l.labelClass??""))},T(o(n)),11,Ad)):k("",!0),s("div",Td,[s("textarea",Me({name:l.id,id:l.id,class:o(d),placeholder:o(r),onInput:e[0]||(e[0]=e=>t.$emit("update:modelValue",e.target.value)),"aria-invalid":null!=o(i),"aria-describedby":l.id+"-error"},o(dt)(t.$attrs,["class"])),T(l.modelValue),17,Fd)]),o(i)?(a(),u("p",{key:1,class:"mt-2 text-sm text-red-500",id:l.id+"-error"},T(o(i)),9,Id)):l.help?(a(),u("p",{key:2,class:"mt-2 text-sm text-gray-500",id:l.id+"-description"},T(l.help),9,Dd)):k("",!0)],2))}}),Pd=["for"],Bd=["id","name","value","aria-invalid","aria-describedby"],Rd=["value"],Ed=["id"],Hd={inheritAttrs:!1},zd=ce({...Hd,__name:"SelectInput",props:{status:null,id:null,modelValue:null,inputClass:null,label:null,labelClass:null,options:null,values:null,entries:null},setup(l){const t=l,n=f(()=>t.label??He(st(t.id)));let e=Ne("ApiState",void 0);const r=f(()=>mt.call({responseStatus:t.status??(null==e?void 0:e.error.value)},t.id)),i=f(()=>t.entries||(t.values?t.values.map(e=>({key:e,value:e})):t.options?Object.keys(t.options).map(e=>({key:e,value:t.options[e]})):[]));return(t,e)=>(a(),u("div",{class:w([t.$attrs.class])},[o(n)?(a(),u("label",{key:0,for:l.id,class:w("block text-sm font-medium text-gray-700 dark:text-gray-300 "+(l.labelClass??""))},T(o(n)),11,Pd)):k("",!0),s("select",Me({id:l.id,name:l.id,class:["mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none sm:text-sm rounded-md dark:text-white dark:bg-gray-900 dark:border-gray-600",o(r)?"border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500":"border-gray-300 text-gray-900 focus:ring-indigo-500 focus:border-indigo-500",l.inputClass],value:l.modelValue,onInput:e[0]||(e[0]=e=>t.$emit("update:modelValue",e.target.value)),"aria-invalid":null!=o(r),"aria-describedby":l.id+"-error"},o(dt)(t.$attrs,["class"])),[(a(!0),u(Te,null,Ie(o(i),e=>(a(),u("option",{value:e.key},T(e.value),9,Rd))),256))],16,Bd),o(r)?(a(),u("p",{key:1,class:"mt-2 text-sm text-red-500",id:l.id+"-error"},T(o(r)),9,Ed)):k("",!0)],2))}}),Nd={class:"flex items-center h-5"},Ud=["id","name","checked"],qd={class:"ml-3 text-sm"},Qd=["for"],Kd={key:0,class:"mt-2 text-sm text-red-500",id:"`${id}-error`"},Zd={key:1,class:"mt-2 text-sm text-gray-500",id:"`${id}-description`"},Gd={inheritAttrs:!1},Wd=ce({...Gd,__name:"CheckboxInput",props:{modelValue:{type:Boolean},status:null,id:null,inputClass:null,label:null,labelClass:null,help:null},emits:["update:modelValue"],setup(l,{}){const e=l,n=f(()=>e.label??He(st(e.id)));let t=Ne("ApiState",void 0);const r=f(()=>mt.call({responseStatus:e.status??(null==t?void 0:t.error.value)},e.id));return(t,e)=>(a(),u("div",{class:w(["relative flex items-start",t.$attrs.class])},[s("div",Nd,[s("input",Me({id:l.id,name:l.id,type:"checkbox",checked:l.modelValue,onInput:e[0]||(e[0]=e=>t.$emit("update:modelValue",e.target.checked)),class:["focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800",l.inputClass]},o(dt)(t.$attrs,["class"])),null,16,Ud)]),s("div",qd,[s("label",{for:l.id,class:w("font-medium text-gray-700 dark:text-gray-300 "+(l.labelClass??""))},T(o(n)),11,Qd),o(r)?(a(),u("p",Kd,T(o(r)),1)):l.help?(a(),u("p",Zd,T(l.help),1)):k("",!0)])],2))}}),Jd=["id"],Xd=["for"],Yd={class:"mt-1 relative rounded-md shadow-sm"},ec=["id","name","value"],tc=["onClick"],lc={class:"flex flex-wrap pb-1.5"},nc={class:"pt-1.5 pl-1"},sc={class:"inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 dark:bg-indigo-800 text-indigo-700 dark:text-indigo-300"},oc=["onClick"],ac=s("svg",{class:"h-2 w-2",stroke:"currentColor",fill:"none",viewBox:"0 0 8 8"},[s("path",{"stroke-linecap":"round","stroke-width":"1.5",d:"M1 1l6 6m0-6L1 7"})],-1),ic=[ac],rc={class:"pt-1.5 pl-1 shrink"},uc=["type","name","id","aria-invalid","aria-describedby","onPaste"],dc=["id"],cc=["onMouseover","onClick"],fc={class:"block truncate"},mc={key:1,class:"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"},vc=s("svg",{class:"h-5 w-5 text-red-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z","clip-rule":"evenodd"})],-1),hc=[vc],gc=["id"],pc=["id"],yc={inheritAttrs:!1},bc=ce({...yc,__name:"TagInput",props:{status:null,id:null,type:null,inputClass:null,label:null,labelClass:null,help:null,modelValue:{default:()=>[]},delimiters:{default:()=>[","]},allowableValues:null,string:{type:Boolean},converter:null},emits:["update:modelValue"],setup(l,{emit:t}){const n=l;const r=f(()=>{return qe((e=n.modelValue,n.converter?n.converter(e):e),e=>"string"==typeof e?0==e.trim().length?[]:e.split(","):e)||[];var e}),i=A(),d=A(!1),c=f(()=>n.allowableValues&&0!=n.allowableValues.length?n.allowableValues.filter(e=>!r.value.includes(e)&&e.toLowerCase().includes(p.value.toLowerCase())):[]);const v=A(null),p=A(""),m=f(()=>n.type||"text"),g=f(()=>n.label??He(st(n.id)));let e=Ne("ApiState",void 0);const y=f(()=>mt.call({responseStatus:n.status??(null==e?void 0:e.error.value)},n.id)),h=f(()=>["w-full cursor-text flex flex-wrap sm:text-sm rounded-md dark:text-white dark:bg-gray-900 border focus-within:border-transparent focus-within:ring-1 focus-within:outline-none",y.value?"pr-10 border-red-300 text-red-900 placeholder-red-300 focus-within:outline-none focus-within:ring-red-500 focus-within:border-red-500":"shadow-sm border-gray-300 dark:border-gray-600 focus-within:ring-indigo-500 focus-within:border-indigo-500",n.inputClass]),b=t=>M(r.value.filter(e=>e!=t));function x(e){document.activeElement===e.target&&null!=(e=v.value)&&e.focus()}const C=A();function L(){d.value=!0,C.value=!0}function V(){O(I()),C.value=!1,setTimeout(()=>{C.value||(d.value=!1)},200)}function M(e){e=n.string?e.join(","):e;t("update:modelValue",e)}function S(e){var t;"Backspace"==e.key&&0==p.value.length&&0<r.value.length&&b(r.value[r.value.length-1]),n.allowableValues&&0!=n.allowableValues.length&&("Escape"==e.code||"Tab"==e.code?d.value=!1:"Home"==e.code?(i.value=c.value[0],B()):"End"==e.code?(i.value=c.value[c.value.length-1],B()):"ArrowDown"==e.code?(d.value=!0,i.value?(t=c.value.indexOf(i.value),i.value=t+1<c.value.length?c.value[t+1]:c.value[0]):i.value=c.value[0],j()):"ArrowUp"==e.code?(i.value?(t=c.value.indexOf(i.value),i.value=0<=t-1?c.value[t-1]:c.value[c.value.length-1]):i.value=c.value[c.value.length-1],j()):"Enter"==e.code?i.value&&d.value?(O(i.value),e.preventDefault()):d.value=!1:d.value=0<c.value.length)}function I(){if(0==p.value.length)return"";let e=$o(p.value.trim(),",");return 0==(e=(e=","==e[0]?e.substring(1):e).trim()).length&&d.value&&0<c.value.length?i.value:e}function $(t){var e,l=I();0<l.length&&((e=n.delimiters.some(e=>e==t.key))&&t.preventDefault(),"Enter"==t.key||"NumpadEnter"==t.key||1==t.key.length&&e)&&O(l)}const F={behavior:"smooth",block:"nearest",inline:"nearest",scrollMode:"if-needed"};function B(){setTimeout(()=>{var e=pl(`#${n.id}-tag li.active`);e&&e.scrollIntoView(F)},0)}function j(){setTimeout(()=>{var e=pl(`#${n.id}-tag li.active`);e&&("scrollIntoViewIfNeeded"in e?e.scrollIntoViewIfNeeded(F):e.scrollIntoView(F))},0)}function O(e){var t;0!==e.length&&(-1==(t=Array.from(r.value)).indexOf(e)&&t.push(e),M(t),p.value="",d.value=!1)}function H(e){e=null==(e=e.clipboardData)?void 0:e.getData("Text");if(e){const t=new RegExp("\\n|\\t|"+n.delimiters.join("|")),l=Array.from(r.value);e.split(t).map(e=>e.trim()).forEach(e=>{-1==l.indexOf(e)&&l.push(e)}),M(l),p.value=""}}return(e,t)=>(a(),u("div",{class:w([e.$attrs.class]),id:l.id+"-tag",onmousemove:"cancelBlur=true"},[o(g)?(a(),u("label",{key:0,for:l.id,class:w("block text-sm font-medium text-gray-700 dark:text-gray-300 "+(l.labelClass??""))},T(o(g)),11,Xd)):k("",!0),s("div",Yd,[s("input",{type:"hidden",id:l.id,name:l.id,value:o(r).join(",")},null,8,ec),s("button",{class:w(o(h)),onClick:Ue(x,["prevent"]),onFocus:t[2]||(t[2]=e=>d.value=!0),tabindex:"-1"},[s("div",lc,[(a(!0),u(Te,null,Ie(o(r),t=>(a(),u("div",nc,[s("span",sc,[we(T(t)+" ",1),s("button",{type:"button",onClick:e=>b(t),class:"flex-shrink-0 ml-1 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 dark:text-indigo-500 hover:bg-indigo-200 dark:hover:bg-indigo-800 hover:text-indigo-500 dark:hover:text-indigo-400 focus:outline-none focus:bg-indigo-500 focus:text-white dark:focus:text-black"},ic,8,oc)])]))),256)),s("div",rc,[kt(s("input",Me({ref_key:"txtInput",ref:v,type:o(m),role:"combobox","aria-controls":"options","aria-expanded":"false",autocomplete:"off",spellcheck:"false",name:l.id+"-txt",id:l.id+"-txt",class:"p-0 dark:bg-transparent rounded-md border-none focus:!border-none focus:!outline-none",style:`box-shadow:none !important;width:${p.value.length+1}ch`,"onUpdate:modelValue":t[0]||(t[0]=e=>p.value=e),"aria-invalid":null!=o(y),"aria-describedby":l.id+"-error",onKeydown:S,onKeypress:$,onPaste:Ue(H,["prevent","stop"]),onFocus:L,onBlur:V,onClick:t[1]||(t[1]=e=>d.value=!0)},o(dt)(e.$attrs,["class","required"])),null,16,uc),[[ao,p.value]])])])],42,tc),d.value&&o(c).length?(a(),u("ul",{key:0,class:"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm",onKeydown:S,id:l.id+"-options",role:"listbox"},[(a(!0),u(Te,null,Ie(o(c),l=>(a(),u("li",{class:w([l===i.value?"active bg-indigo-600 text-white":"text-gray-900 dark:text-gray-100","relative cursor-default select-none py-2 pl-3 pr-9"]),onMouseover:e=>{var t;t=l,i.value=t},onClick:e=>O(l),role:"option",tabindex:"-1"},[s("span",fc,T(l),1)],42,cc))),256))],40,dc)):k("",!0),o(y)?(a(),u("div",mc,hc)):k("",!0)]),o(y)?(a(),u("p",{key:1,class:"mt-2 text-sm text-red-500",id:l.id+"-error"},T(o(y)),9,gc)):l.help?(a(),u("p",{key:2,class:"mt-2 text-sm text-gray-500",id:l.id+"-description"},T(l.help),9,pc)):k("",!0)],10,Jd))}}),wc={class:"relative flex-grow mr-2 sm:mr-4"},xc=["for"],kc={class:"block mt-2"},$c={class:"sr-only"},Cc=["multiple","name","id","placeholder","aria-invalid","aria-describedby"],_c={key:0,class:"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"},Lc=s("svg",{class:"h-5 w-5 text-red-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z","clip-rule":"evenodd"})],-1),Vc=[Lc],Sc=["id"],Mc=["id"],Ac={key:0},Tc=["title"],Fc=["alt","src"],Ic={key:1,class:"mt-3"},Dc={class:"w-full"},jc={class:"pr-6 align-bottom pb-2"},Oc=["title"],Pc=["src","onError"],Bc=["href"],Rc={key:1,class:"overflow-hidden"},Ec={class:"align-top pb-2 whitespace-nowrap"},Hc={key:0,class:"text-gray-500 dark:text-gray-400 text-sm bg-white dark:bg-black"},zc=ce({__name:"FileInput",props:{multiple:{type:Boolean},status:null,id:null,inputClass:null,label:null,labelClass:null,help:null,placeholder:null,modelValue:null,values:null,files:null},setup(l){var e;const t=l,n=A(null),{assetsPathResolver:r,fallbackPathResolver:i}=St(),d={},c=A(),v=A((null==(e=t.files)?void 0:e.map(p))||[]);function p(e){return e.filePath=r(e.filePath),e}t.values&&0<t.values.length&&(v.value=t.values.map(e=>{e=e.replace(/\\/g,"/");return{fileName:Co($t(e,"/"),"."),filePath:e,contentType:Kl(e)}}).map(p));const m=f(()=>t.label??He(st(t.id))),g=f(()=>t.placeholder??m.value);let y=Ne("ApiState",void 0);const h=f(()=>mt.call({responseStatus:t.status??(null==y?void 0:y.error.value)},t.id)),b=f(()=>["block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 dark:file:bg-violet-900 file:text-violet-700 dark:file:text-violet-200 hover:file:bg-violet-100 dark:hover:file:bg-violet-800",h.value?"pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500":"text-slate-500 dark:text-slate-400",t.inputClass]),x=e=>{e=e.target;c.value="",v.value=Array.from(e.files||[]).map(e=>({fileName:e.name,filePath:un(e),contentLength:e.size,contentType:e.type||Kl(e.name)}))},C=()=>{var e;return null==(e=n.value)?void 0:e.click()},L=e=>null!=e&&(e.startsWith("data:")||e.startsWith("blob:")),V=f(()=>{var e;return 0<v.value.length?v.value[0].filePath:(e="string"==typeof t.modelValue?t.modelValue:t.values&&t.values[0])&&yt(r(e))||null}),M=e=>!e||e.startsWith("data:")||e.endsWith(".svg")?"":"rounded-full object-cover";function S(e){c.value=i(V.value)}return Rt(fs),(e,t)=>(a(),u("div",{class:w(["flex",l.multiple?"flex-col":"justify-between"])},[s("div",wc,[o(m)?(a(),u("label",{key:0,for:l.id,class:w("block text-sm font-medium text-gray-700 dark:text-gray-300 "+(l.labelClass??""))},T(o(m)),11,xc)):k("",!0),s("div",kc,[s("span",$c,T(l.help??o(m)),1),s("input",Me({ref_key:"input",ref:n,type:"file",multiple:l.multiple,name:l.id,id:l.id,class:o(b),placeholder:o(g),"aria-invalid":null!=o(h),"aria-describedby":l.id+"-error"},e.$attrs,{onChange:x}),null,16,Cc),o(h)?(a(),u("div",_c,Vc)):k("",!0)]),o(h)?(a(),u("p",{key:1,class:"mt-2 text-sm text-red-500",id:l.id+"-error"},T(o(h)),9,Sc)):l.help?(a(),u("p",{key:2,class:"mt-2 text-sm text-gray-500",id:l.id+"-description"},T(l.help),9,Mc)):k("",!0)]),l.multiple?(a(),u("div",Ic,[s("table",Dc,[(a(!0),u(Te,null,Ie(v.value,t=>(a(),u("tr",null,[s("td",jc,[s("div",{class:"flex w-full",title:L(t.filePath)?"":t.filePath},[s("img",{src:d[o(yt)(t.filePath)]||o(r)(o(yt)(t.filePath)),class:w(["mr-2 h-8 w-8",M(t.filePath)]),onError:e=>d[o(yt)(t.filePath)]=o(i)(o(yt)(t.filePath))},null,42,Pc),L(t.filePath)?(a(),u("span",Rc,T(t.fileName),1)):(a(),u("a",{key:0,href:o(r)(t.filePath||""),target:"_blank",class:"overflow-hidden"},T(t.fileName),9,Bc))],8,Oc)]),s("td",Ec,[t.contentLength&&0<t.contentLength?(a(),u("span",Hc,T(o(cn)(t.contentLength)),1)):k("",!0)])]))),256))])])):(a(),u("div",Ac,[o(V)?(a(),u("div",{key:0,class:"shrink-0 cursor-pointer",title:L(o(V))?"":o(V)},[s("img",{onClick:C,class:w(["h-16 w-16",M(o(V))]),alt:"Current "+(o(m)??""),src:c.value||o(r)(o(V)),onError:S},null,42,Fc)],8,Tc)):k("",!0)]))],2))}}),Nc=["id"],Uc=["for"],qc={class:"relative mt-1"},Qc=["id","placeholder"],Kc=s("svg",{class:"h-5 w-5 text-gray-400 dark:text-gray-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z","clip-rule":"evenodd"})],-1),Zc=[Kc],Gc=["id"],Wc=["onMouseover","onClick"],Jc=s("svg",{class:"h-5 w-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z","clip-rule":"evenodd"})],-1),Xc=[Jc],Yc={key:2,class:"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none",tabindex:"-1"},e0=s("svg",{class:"h-5 w-5 text-red-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z","clip-rule":"evenodd"})],-1),t0=[e0],l0=["id"],n0=["id"],s0=ce({__name:"Autocomplete",props:{status:null,id:null,type:null,label:null,help:null,placeholder:null,multiple:{type:Boolean,default:!1},required:{type:Boolean},options:{default:()=>[]},modelValue:null,match:null,viewCount:{default:100},pageSize:{default:8}},emits:["update:modelValue"],setup(l,{expose:e,emit:n}){const r=l,i=A(!1);function d(e){return Array.isArray(r.modelValue)&&0<=r.modelValue.indexOf(e)}e({toggle:B});const c=f(()=>r.label??He(st(r.id)));let t=Ne("ApiState",void 0);const v=f(()=>mt.call({responseStatus:r.status??(null==t?void 0:t.error.value)},r.id)),p=f(()=>[nt.base,v.value?nt.invalid:nt.valid]),m=A(null),g=A(""),y=A(null),h=A(r.viewCount),b=A([]),x=f(()=>g.value?r.options.filter(e=>r.match(e,g.value)).slice(0,h.value):r.options),C=["Tab","Escape","ArrowDown","ArrowUp","Enter","PageUp","PageDown","Home","End"];const L=[",",`
+`,"\t"];function V(t){var l=null==(t=t.clipboardData)?void 0:t.getData("Text");if(l){t=L.some(e=>l.includes(e));if(r.multiple&&t){if(t){t=new RegExp("\\r|\\n|\\t|,"),t=l.split(t).filter(e=>e.trim()).map(t=>r.options.find(e=>r.match(e,t))).filter(e=>!!e);if(0<t.length){g.value="",i.value=!1,y.value=null;let e=Array.from(r.modelValue||[]);t.forEach(t=>{d(t)?e=e.filter(e=>e!=t):e.push(t)}),n("update:modelValue",e),cl()}}}else{t=r.options.filter(e=>r.match(e,l));1==t.length&&(O(t[0]),i.value=!1,cl())}}}function M(e){C.indexOf(e.code)||j()}function S(e){var t;e.shiftKey||e.ctrlKey||e.altKey||(i.value?"Escape"==e.code?i.value&&(e.stopPropagation(),i.value=!1):"Tab"==e.code?i.value=!1:"Home"==e.code?(y.value=b.value[0],$()):"End"==e.code?(y.value=b.value[b.value.length-1],$()):"ArrowDown"==e.code?(y.value?(t=b.value.indexOf(y.value),y.value=t+1<b.value.length?b.value[t+1]:b.value[0]):y.value=b.value[0],F()):"ArrowUp"==e.code?(y.value?(t=b.value.indexOf(y.value),y.value=0<=t-1?b.value[t-1]:b.value[b.value.length-1]):y.value=b.value[b.value.length-1],F()):"Enter"==e.code&&(y.value?(O(y.value),r.multiple||(e.preventDefault(),cl())):i.value=!1):"ArrowDown"==e.code&&(i.value=!0,y.value=b.value[0]))}const I={behavior:"smooth",block:"nearest",inline:"nearest",scrollMode:"if-needed"};function $(){setTimeout(()=>{var e=pl(`#${r.id}-autocomplete li.active`);e&&e.scrollIntoView(I)},0)}function F(){setTimeout(()=>{var e=pl(`#${r.id}-autocomplete li.active`);e&&("scrollIntoViewIfNeeded"in e?e.scrollIntoViewIfNeeded(I):e.scrollIntoView(I))},0)}function B(e){(i.value=e)&&(j(),null!=(e=m.value))&&e.focus()}function j(){i.value=!0,H()}function O(t){if(g.value="",i.value=!1,r.multiple){let e=Array.from(r.modelValue||[]);d(t)?e=e.filter(e=>e!=t):e.push(t),y.value=null,n("update:modelValue",e)}else{let e=t;r.modelValue==t&&(e=null),n("update:modelValue",e)}}function H(){b.value=x.value}return Lt(g,H),(e,t)=>(a(),u("div",{id:l.id+"-autocomplete"},[o(c)?(a(),u("label",{key:0,for:l.id+"-text",class:"block text-sm font-medium text-gray-700 dark:text-gray-300"},T(o(c)),9,Uc)):k("",!0),s("div",qc,[kt(s("input",Me({ref_key:"txtInput",ref:m,id:l.id+"-text",type:"text",role:"combobox","aria-controls":"options","aria-expanded":"false",autocomplete:"off",spellcheck:"false","onUpdate:modelValue":t[0]||(t[0]=e=>g.value=e),class:o(p),placeholder:l.multiple||!l.modelValue?l.placeholder:"",onFocus:j,onKeydown:S,onKeyup:M,onClick:j,onPaste:V,required:!1},e.$attrs),null,16,Qc),[[io,g.value]]),s("button",{type:"button",onClick:t[1]||(t[1]=e=>B(!i.value)),class:"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none",tabindex:"-1"},Zc),i.value?(a(),u("ul",{key:0,class:"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm",onKeydown:S,id:l.id+"-options",role:"listbox"},[(a(!0),u(Te,null,Ie(b.value,l=>(a(),u("li",{class:w([l===y.value?"active bg-indigo-600 text-white":"text-gray-900 dark:text-gray-100","relative cursor-default select-none py-2 pl-3 pr-9"]),onMouseover:e=>{return t=l,y.value=t,void(b.value.indexOf(t)>Math.floor(.9*h.value)&&(h.value+=r.viewCount,H()));var t},onClick:e=>O(l),role:"option",tabindex:"-1"},[Z(e.$slots,"item",jt(gl(l))),d(l)?(a(),u("span",{key:0,class:w(["absolute inset-y-0 right-0 flex items-center pr-4",l===y.value?"text-white":"text-indigo-600"])},Xc,2)):k("",!0)],42,Wc))),256))],40,Gc)):!l.multiple&&l.modelValue?(a(),u("div",{key:1,onKeydown:S,onClick:t[2]||(t[2]=e=>B(!i.value)),class:"h-8 -mt-8 ml-3 pt-0.5"},[Z(e.$slots,"item",jt(gl(l.modelValue)))],32)):k("",!0),o(v)?(a(),u("div",Yc,t0)):k("",!0)]),o(v)?(a(),u("p",{key:1,class:"mt-2 text-sm text-red-500",id:l.id+"-error"},T(o(v)),9,l0)):l.help?(a(),u("p",{key:2,class:"mt-2 text-sm text-gray-500",id:l.id+"-description"},T(l.help),9,n0)):k("",!0)],8,Nc))}}),o0=["id","name","value"],a0={class:"block truncate"},i0=ce({__name:"Combobox",props:{id:null,modelValue:null,multiple:{type:Boolean},options:null,values:null,entries:null},emits:["update:modelValue"],setup(n,{expose:e,emit:t}){const l=n;function r(e){t("update:modelValue",e)}e({toggle(e){var t;null!=(t=d.value)&&t.toggle(e)}});const i=f(()=>null!=l.multiple?l.multiple:Array.isArray(l.modelValue)),d=A();function c(e,t){return!t||e.value.toLowerCase().includes(t.toLowerCase())}const v=f(()=>l.entries||(l.values?l.values.map(e=>({key:e,value:e})):l.options?Object.keys(l.options).map(e=>({key:e,value:l.options[e]})):[])),p=A(i.value?[]:null);tt(function(){let t=l.modelValue&&"object"==typeof l.modelValue?l.modelValue.key:l.modelValue;null==t||""===t?p.value=i.value?[]:null:"string"==typeof t?p.value=v.value.find(e=>e.key===t)||null:Array.isArray(t)&&(p.value=v.value.filter(e=>t.includes(e.key)))});const m=f(()=>null==p.value?"":Array.isArray(p.value)?p.value.map(e=>encodeURIComponent(e.key)).join(","):p.value.key);return(e,t)=>{var l=X("Autocomplete");return a(),u(Te,null,[s("input",{type:"hidden",id:n.id,name:n.id,value:o(m)},null,8,o0),$e(l,Me({ref_key:"input",ref:d,id:n.id,options:o(v),match:c,multiple:o(i)},e.$attrs,{modelValue:p.value,"onUpdate:modelValue":[t[0]||(t[0]=e=>p.value=e),r]}),{item:ke(({value:e})=>[s("span",a0,T(e),1)]),_:1},16,["id","options","multiple","modelValue"])],64)}}}),r0=ce({__name:"DynamicInput",props:{input:null,modelValue:null,api:null},emits:["update:modelValue"],setup(p,{emit:e}){const l=p,m=f(()=>l.input.type||"text"),t="ignore,css,options,meta,allowableValues,allowableEntries,op,prop,type,id,name".split(","),g=f(()=>dt(l.input,t)),y=A(qe(l.modelValue[l.input.id],e=>"file"===l.input.type?null:"date"===l.input.type&&e instanceof Date?$l(e):"time"===l.input.type?ls(e):e)),h=(Lt(y,()=>{l.modelValue[l.input.id]=y.value,e("update:modelValue",l.modelValue)}),f(()=>{var e=l.modelValue[l.input.id];if("file"!==l.input.type||!e)return[];if("string"==typeof e)return[{filePath:e,fileName:$t(e,"/")}];if(!Array.isArray(e)&&"object"==typeof e)return e;if(Array.isArray(e)){const t=[];return e.forEach(e=>{"string"==typeof e?t.push({filePath:e,fileName:$t(e,"/")}):"object"==typeof e&&t.push(e)}),t}}));return(e,t)=>{var l,s=X("SelectInput"),n=X("CheckboxInput"),r=X("TagInput"),i=X("Combobox"),u=X("FileInput"),d=X("TextareaInput"),c=X("MarkdownInput"),v=X("TextInput");return o(ne).component(o(m))?(a(),se(Jn(o(ne).component(o(m))),Me({key:0,id:p.input.id,modelValue:y.value,"onUpdate:modelValue":t[0]||(t[0]=e=>y.value=e),status:null==(l=p.api)?void 0:l.error,"input-class":null==(l=p.input.css)?void 0:l.input,"label-class":null==(l=p.input.css)?void 0:l.label},o(g)),null,16,["id","modelValue","status","input-class","label-class"])):"select"==o(m)?(a(),se(s,Me({key:1,id:p.input.id,modelValue:y.value,"onUpdate:modelValue":t[1]||(t[1]=e=>y.value=e),status:null==(l=p.api)?void 0:l.error,"input-class":null==(s=p.input.css)?void 0:s.input,"label-class":null==(l=p.input.css)?void 0:l.label,entries:p.input.allowableEntries,values:p.input.allowableValues},o(g)),null,16,["id","modelValue","status","input-class","label-class","entries","values"])):"checkbox"==o(m)?(a(),se(n,Me({key:2,id:p.input.id,modelValue:y.value,"onUpdate:modelValue":t[2]||(t[2]=e=>y.value=e),status:null==(s=p.api)?void 0:s.error,"input-class":null==(l=p.input.css)?void 0:l.input,"label-class":null==(n=p.input.css)?void 0:n.label},o(g)),null,16,["id","modelValue","status","input-class","label-class"])):"tag"==o(m)?(a(),se(r,Me({key:3,id:p.input.id,modelValue:y.value,"onUpdate:modelValue":t[3]||(t[3]=e=>y.value=e),status:null==(s=p.api)?void 0:s.error,"input-class":null==(l=p.input.css)?void 0:l.input,"label-class":null==(n=p.input.css)?void 0:n.label,allowableValues:p.input.allowableValues,string:"String"==(null==(r=p.input.prop)?void 0:r.type)},o(g)),null,16,["id","modelValue","status","input-class","label-class","allowableValues","string"])):"combobox"==o(m)?(a(),se(i,Me({key:4,id:p.input.id,modelValue:y.value,"onUpdate:modelValue":t[4]||(t[4]=e=>y.value=e),status:null==(s=p.api)?void 0:s.error,"input-class":null==(l=p.input.css)?void 0:l.input,"label-class":null==(n=p.input.css)?void 0:n.label,entries:p.input.allowableEntries,values:p.input.allowableValues},o(g)),null,16,["id","modelValue","status","input-class","label-class","entries","values"])):"file"==o(m)?(a(),se(u,Me({key:5,id:p.input.id,status:null==(r=p.api)?void 0:r.error,modelValue:y.value,"onUpdate:modelValue":t[5]||(t[5]=e=>y.value=e),"input-class":null==(i=p.input.css)?void 0:i.input,"label-class":null==(s=p.input.css)?void 0:s.label,files:o(h)},o(g)),null,16,["id","status","modelValue","input-class","label-class","files"])):"textarea"==o(m)?(a(),se(d,Me({key:6,id:p.input.id,modelValue:y.value,"onUpdate:modelValue":t[6]||(t[6]=e=>y.value=e),status:null==(l=p.api)?void 0:l.error,"input-class":null==(n=p.input.css)?void 0:n.input,"label-class":null==(u=p.input.css)?void 0:u.label},o(g)),null,16,["id","modelValue","status","input-class","label-class"])):"MarkdownInput"==o(m)?(a(),se(c,Me({key:7,id:p.input.id,modelValue:y.value,"onUpdate:modelValue":t[7]||(t[7]=e=>y.value=e),status:null==(r=p.api)?void 0:r.error,"input-class":null==(i=p.input.css)?void 0:i.input,"label-class":null==(s=p.input.css)?void 0:s.label},o(g)),null,16,["id","modelValue","status","input-class","label-class"])):(a(),se(v,Me({key:8,type:o(m),id:p.input.id,modelValue:y.value,"onUpdate:modelValue":t[8]||(t[8]=e=>y.value=e),status:null==(d=p.api)?void 0:d.error,"input-class":null==(l=p.input.css)?void 0:l.input,"label-class":null==(n=p.input.css)?void 0:n.label},o(g)),null,16,["type","id","modelValue","status","input-class","label-class"]))}}}),u0={class:"lookup-field"},d0=["name","value"],c0={key:0,class:"flex justify-between"},f0=["for"],m0={key:0,class:"flex items-center"},v0={class:"text-sm text-gray-500 dark:text-gray-400 pr-1"},h0=s("span",{class:"sr-only"},"Clear",-1),g0=s("svg",{class:"h-4 w-4",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[s("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})],-1),p0=[h0,g0],y0={key:1,class:"mt-1 relative"},b0={class:"w-full inline-flex truncate"},w0={class:"text-blue-700 dark:text-blue-300 flex cursor-pointer"},x0=s("span",{class:"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"},[s("svg",{class:"h-5 w-5 text-gray-400 dark:text-gray-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[s("path",{"fill-rule":"evenodd",d:"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z","clip-rule":"evenodd"})])],-1),k0=["id"],$0=["id"],C0=ce({__name:"LookupInput",props:{id:null,status:null,input:null,metadataType:null,modelValue:null,label:null,labelClass:null,help:null},emits:["update:modelValue"],setup(r,{emit:i}){const d=r,t=St()["config"],n=at()["metadataApi"],c=f(()=>d.id||d.input.id),v=f(()=>d.label??He(st(c.value)));let e=Ne("ApiState",void 0);const p=Ne("client"),m=f(()=>mt.call({responseStatus:d.status??(null==e?void 0:e.error.value)},c.value)),g=A(""),y=A(""),h=f(()=>ye(d.modelValue,c.value)),b=f(()=>et(d.metadataType).find(e=>e.name.toLowerCase()==c.value.toLowerCase())),x=f(()=>{var e;return(null==(e=ot(null==(e=null==(e=b.value)?void 0:e.ref)?void 0:e.model))?void 0:e.icon)||t.value.tableIcon});let C;function L(){d.modelValue[c.value]=null,g.value=""}return tt(async()=>{C=Ne("ModalProvider",void 0);var t,l=d.modelValue;d.modelValue[c.value]||(d.modelValue[c.value]=null);const a=b.value,s=null==a?void 0:a.ref;if(s){g.value="";let e=null==s.selfId?ye(l,a.name):ye(l,s.selfId);null==(e=Zt(e)?ye(l,s.refId):e)||null==(null==(t=n.value)?void 0:t.operations.find(e=>{return(null==(e=e.dataModel)?void 0:e.name)==s.model}))||Zt(t=ye(l,a.name))||(g.value=""+t,y.value=a.name,null!=s.refLabel&&(null==(t=et(d.metadataType).find(e=>e.type==s.model))&&console.warn(`Could not find ${s.model} Property on `+d.metadataType.name),null!=(l=null!=t?ye(l,t.name):null)?(t=ye(l,s.refLabel))&&(g.value=""+t,Ft.setValue(s.model,e,s.refLabel,t)):(t=1==(null==(l=a.attributes)?void 0:l.some(e=>"Computed"==e.name)),l=await Ft.getOrFetchValue(p,n.value,s.model,s.refId,s.refLabel,t,e),g.value=l||s.model+": "+g.value)))}else console.warn(`No RefInfo for property '${c.value}'`)}),(e,t)=>{var l,n=X("Icon");return a(),u("div",u0,[s("input",{type:"hidden",name:o(c),value:o(h)},null,8,d0),o(v)?(a(),u("div",c0,[s("label",{for:o(c),class:w("block text-sm font-medium text-gray-700 dark:text-gray-300 "+(r.labelClass??""))},T(o(v)),11,f0),o(h)?(a(),u("div",m0,[s("span",v0,T(o(h)),1),s("button",{onClick:L,type:"button",title:"clear",class:"mr-1 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:ring-offset-black"},p0)])):k("",!0)])):k("",!0),null!=(l=o(b))&&l.ref?(a(),u("div",y0,[s("button",{type:"button",class:"lookup flex relative w-full bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",onClick:t[0]||(t[0]=e=>{var l;(l=o(b).ref)&&(null==C?console.warn("No ModalProvider required by LookupInput"):C.openModal({name:"ModalLookup",ref:l},e=>{var t;console.debug("openModal",g.value," -> ",e,Ft.setRefValue(l,e),l),e&&(t=ye(e,l.refId),g.value=Ft.setRefValue(l,e)||t,(e=o(d.modelValue))[c.value]=t,i("update:modelValue",e))}))}),"aria-haspopup":"listbox","aria-expanded":"true","aria-labelledby":"listbox-label"},[s("span",b0,[s("span",w0,[$e(n,{class:"mr-1 w-5 h-5",image:o(x)},null,8,["image"]),s("span",null,T(g.value),1)])]),x0])])):k("",!0),o(m)?(a(),u("p",{key:2,class:"mt-2 text-sm text-red-500",id:o(c)+"-error"},T(o(m)),9,k0)):r.help?(a(),u("p",{key:3,class:"mt-2 text-sm text-gray-500",id:o(c)+"-description"},T(r.help),9,$0)):k("",!0)])}}}),_0=ce({__name:"AutoFormFields",props:{modelValue:null,type:null,api:null,formLayout:null,configureField:null,configureFormLayout:null,hideSummary:{type:Boolean},flexClass:{default:"flex flex-1 flex-col justify-between"},divideClass:{default:"divide-y divide-gray-200 px-4 sm:px-6"},spaceClass:{default:"space-y-6 pt-6 pb-5"},fieldsetClass:{default:"grid grid-cols-12 gap-6"}},emits:["update:modelValue"],setup(d,{expose:e,emit:l}){const r=d;function n(){var e=Be();null!=(e=null==e?void 0:e.proxy)&&e.$forceUpdate()}function c(e,t){r.modelValue[e]=t,l("update:modelValue",r.modelValue),n()}e({forceUpdate:n,props:r,updateValue:c});const{metadataApi:t,apiOf:i,typeOf:v,typeOfRef:p,createFormLayout:m}=at(),g=f(()=>r.type||Et(r.modelValue)),y=f(()=>v(g.value)),h=f(()=>{var e;return p(null==(e=null==(e=t.value)?void 0:e.operations.find(e=>e.request.name==g.value))?void 0:e.dataModel)||y.value}),b=f(()=>{var e,t=y.value;if(!t){if(r.formLayout)return e=r.formLayout.map(e=>{var t={name:e.id,type:ba(e.type)},t=Object.assign({prop:t},e);return r.configureField&&r.configureField(t),t}),r.configureFormLayout&&r.configureFormLayout(e),e;throw new Error(`MetadataType for ${g.value} not found`)}const a=et(t),s=h.value,l=r.formLayout||m(t),n=[],o=i(t.name);return l.forEach(t=>{var e,l=a.find(e=>e.name==t.name);t.ignore||(e=(null==(e=null==s?void 0:s.properties)?void 0:e.find(e=>{return e.name.toLowerCase()==(null==(e=t.name)?void 0:e.toLowerCase())}))??l,l=Object.assign({prop:e,op:o},t),r.configureField&&r.configureField(l),n.push(l))}),r.configureFormLayout&&r.configureFormLayout(n),n}),x=f(()=>b.value.filter(e=>"hidden"!=e.type).map(e=>e.id));return(l,n)=>{var e;const t=X("ErrorSummary"),r=X("LookupInput"),i=X("DynamicInput");return a(),u(Te,null,[d.hideSummary?k("",!0):(a(),se(t,{key:0,status:null==(e=d.api)?void 0:e.error,except:o(x)},null,8,["status","except"])),s("div",{class:w(d.flexClass)},[s("div",{class:w(d.divideClass)},[s("div",{class:w(d.spaceClass)},[s("fieldset",{class:w(d.fieldsetClass)},[(a(!0),u(Te,null,Ie(o(b),t=>{var e;return a(),u("div",{key:t.id,class:w(["w-full",(null==(e=t.css)?void 0:e.field)??("textarea"==t.type?"col-span-12":"col-span-12 xl:col-span-6"+("checkbox"==t.type?" flex items-center":"")),"hidden"==t.type?"hidden":""])},[null==(null==(e=t.prop)?void 0:e.ref)||"file"==t.type||t.prop.isPrimaryKey?(a(),se(i,{key:1,input:t,modelValue:d.modelValue,"onUpdate:modelValue":n[0]||(n[0]=e=>l.$emit("update:modelValue",e)),api:d.api},null,8,["input","modelValue","api"])):(a(),se(r,{key:0,metadataType:o(h),input:t,modelValue:d.modelValue,"onUpdate:modelValue":e=>{c(t.id,ye(e,t.id))},status:null==(e=d.api)?void 0:e.error},null,8,["metadataType","input","modelValue","onUpdate:modelValue","status"]))],2)}),128))],2)],2)],2)],2)],64)}}});function Tl(){const s=A(!1),n=A(),o=A(),r=Ne("client");function i({message:e,errorCode:t,fieldName:l,errors:a}){return t=t||"Exception",a=a||[],n.value=new Bl(l?{errorCode:t,message:e,errors:[new Un({fieldName:l,errorCode:t,message:e})]}:{errorCode:t,message:e,errors:a})}var e={setError:i,addFieldError:function({fieldName:t,message:e,errorCode:l}){var a;l=l||"Exception",n.value?((a=new Bl(n.value)).errors=[...(a.errors||[]).filter(e=>{return(null==(e=e.fieldName)?void 0:e.toLowerCase())!==(null==t?void 0:t.toLowerCase())}),new Un({fieldName:t,message:e,errorCode:l})],n.value=a):i({fieldName:t,message:e,errorCode:l})},loading:s,error:n,api:async function(e,t,l){return s.value=!0,e=await r.api(Tt(e),t,l),s.value=!1,o.value=e.response,n.value=e.error,e},apiVoid:async function(e,t,l){return s.value=!0,e=await r.apiVoid(Tt(e),t,l),s.value=!1,o.value=e.response,n.value=e.error,e},apiForm:async function(e,t,l,a){return s.value=!0,e=await r.apiForm(Tt(e),t,l,a),s.value=!1,o.value=e.response,n.value=e.error,e},apiFormVoid:async function(e,t,l,a){return s.value=!0,e=await r.apiFormVoid(Tt(e),t,l,a),s.value=!1,o.value=e.response,n.value=e.error,e},swr:async function(e,t,l,a){return os(r,e,t,l,a)},swrEffect:function(l,a){const s=A(new Je),n=as(async e=>{s.value=await r.api(e)},null==a?void 0:a.delayMs);return hl(async()=>{var e=l(),t=on(_l(e));t&&(s.value=new Je({response:t})),0===(null==a?void 0:a.delayMs)?s.value=await r.api(e):n(e)}),(async()=>s.value=await r.api(l(),null==a?void 0:a.args,null==a?void 0:a.method))(),s},unRefs:Tt,setRef:ns};return Xt("ApiState",e),e}const L0={key:0},V0={class:"text-red-700"},S0=s("b",null,"type",-1),M0={key:0},A0={key:2},T0=["innerHTML"],F0=s("input",{type:"submit",class:"hidden"},null,-1),I0={class:"flex justify-end"},D0=s("div",null,null,-1),j0={key:2,class:"relative z-10","aria-labelledby":"slide-over-title",role:"dialog","aria-modal":"true"},O0=s("div",{class:"fixed inset-0"},null,-1),P0={class:"fixed inset-0 overflow-hidden"},B0={class:"flex min-h-0 flex-1 flex-col overflow-auto"},R0={class:"flex-1"},E0={class:"bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6"},H0={class:"flex items-start justify-between space-x-3"},z0={class:"space-y-1"},N0={key:0},U0={key:2},q0=["innerHTML"],Q0={class:"flex h-7 items-center"},K0={class:"flex justify-end"},Z0=ce({__name:"AutoForm",props:{type:null,modelValue:null,heading:null,subHeading:null,showLoading:{type:Boolean,default:!0},jsconfig:{default:"eccn,edv"},formStyle:{default:"card"},configureField:null,configureFormLayout:null,panelClass:null,bodyClass:null,formClass:null,innerFormClass:null,headerClass:{default:"p-6"},buttonsClass:null,headingClass:null,subHeadingClass:null,submitLabel:{default:"Submit"},allowSubmit:null},emits:["success","error","update:modelValue","done"],setup(p,{expose:e,emit:r}){const i=p,m=A(),g=A(1),y=A();function t(){g.value++,B.value=F();var e=Be();null!=(e=null==e?void 0:e.proxy)&&e.$forceUpdate()}e({forceUpdate:t,props:i,setModel:async function(e){Object.assign(B.value,e),t(),await xt(()=>null)},formFields:m,submit:async function(){D(y.value)},close:P}),Xt("ModalProvider",{openModal:function(e,t){h.value=e,l.value=t}});const h=A(),l=A();async function b(e){l.value&&l.value(e),h.value=void 0,l.value=void 0}const d=Tl(),n=is()["getTypeName"],{typeOf:c,createDto:v}=at(),x=A(new Je),C=f(()=>i.panelClass||Ze.panelClass(i.formStyle)),L=f(()=>i.formClass||"card"==i.formStyle?"shadow sm:rounded-md":It.formClass),V=f(()=>i.headingClass||Ze.headingClass(i.formStyle)),M=f(()=>i.subHeadingClass||Ze.subHeadingClass(i.formStyle)),S=f(()=>("string"==typeof i.buttonsClass?i:Ze).buttonsClass),I=f(()=>{var e;return i.type?n(i.type):null!=(e=i.modelValue)&&e.getTypeName?i.modelValue.getTypeName():null}),$=f(()=>c(I.value)),F=()=>i.modelValue||H(),B=A(F()),j=f(()=>d.loading.value),O=f(()=>{var e;return i.heading||(null==(e=c(I.value))?void 0:e.description)||He(I.value)});function H(){return"string"==typeof i.type?v(i.type):i.type?new i.type:i.modelValue}async function D(e){var t,l,a,s,n;e&&"FORM"==e.tagName?(t=H(),n=qe(null==t?void 0:t.getMethod,e=>"function"==typeof e?e():null)||"POST",l=null==qe(null==t?void 0:t.createResponse,e=>"function"==typeof e?e():null),a=i.jsconfig,ln.hasRequestBody(n)?(n=new t.constructor,s=new FormData(e),console.debug("AutoForm.submitForm",n,s),x.value=l?await d.apiFormVoid(n,s,{jsconfig:a}):await d.apiForm(n,s,{jsconfig:a})):(n=new t.constructor(_o(B.value)),console.debug("AutoForm.submit",n),x.value=l?await d.apiVoid(n,{jsconfig:a}):await d.api(n,{jsconfig:a})),x.value.succeeded?(r("success",x.value.response),P()):r("error",x.value.error)):console.error("Not a valid form",e)}function E(e){r("update:modelValue",e)}function z(){r("done")}const _=A(!1),R=A(""),N={entering:{cls:"transform transition ease-in-out duration-500 sm:duration-700",from:"translate-x-full",to:"translate-x-0"},leaving:{cls:"transform transition ease-in-out duration-500 sm:duration-700",from:"translate-x-0",to:"translate-x-full"}};function P(){"slideOver"==i.formStyle?_.value=!1:z()}Lt(_,()=>{Ct(N,R,_.value),_.value||setTimeout(z,700)}),_.value=!0;const U=e=>{"Escape"===e.key&&P()};return tt(()=>window.addEventListener("keydown",U)),Rt(()=>window.removeEventListener("keydown",U)),(t,e)=>{var l;const n=X("AutoFormFields"),r=X("FormLoading"),i=X("PrimaryButton"),d=X("CloseButton"),c=X("SecondaryButton"),v=X("ModalLookup");return a(),u("div",null,[o($)?"card"==p.formStyle?(a(),u("div",{key:1,class:w(o(C))},[s("form",{ref_key:"elForm",ref:y,onSubmit:e[0]||(e[0]=Ue(e=>D(e.target),["prevent"])),autocomplete:"off",class:w(p.innerFormClass)},[s("div",{class:w(p.bodyClass)},[s("div",{class:w(p.headerClass)},[t.$slots.heading?(a(),u("div",M0,[Z(t.$slots,"heading")])):(a(),u("h3",{key:1,class:w(o(V))},T(o(O)),3)),t.$slots.subheading?(a(),u("div",A0,[Z(t.$slots,"subheading")])):p.subHeading?(a(),u("p",{key:3,class:w(o(M))},T(p.subHeading),3)):null!=(l=o($))&&l.notes?(a(),u("p",{key:4,class:w(["notes",o(M)]),innerHTML:null==(l=o($))?void 0:l.notes},null,10,T0)):k("",!0)],2),Z(t.$slots,"header",{instance:null==(l=Be())?void 0:l.exposed,model:B.value}),F0,(a(),se(n,{ref_key:"formFields",ref:m,key:g.value,type:p.type,modelValue:B.value,"onUpdate:modelValue":E,api:x.value,configureField:p.configureField,configureFormLayout:p.configureFormLayout},null,8,["type","modelValue","api","configureField","configureFormLayout"])),Z(t.$slots,"footer",{instance:null==(l=Be())?void 0:l.exposed,model:B.value})],2),Z(t.$slots,"buttons",{},()=>{var e;return[s("div",{class:w(o(S))},[s("div",null,[Z(t.$slots,"leftbuttons",{instance:null==(e=Be())?void 0:e.exposed,model:B.value})]),s("div",null,[p.showLoading&&o(j)?(a(),se(r,{key:0})):k("",!0)]),s("div",I0,[D0,$e(i,{disabled:!!p.allowSubmit&&!p.allowSubmit(B.value)},{default:ke(()=>[we(T(p.submitLabel),1)]),_:1},8,["disabled"]),Z(t.$slots,"rightbuttons",{instance:null==(e=Be())?void 0:e.exposed,model:B.value})])],2)]})],34)],2)):(a(),u("div",j0,[O0,s("div",P0,[s("div",{onMousedown:P,class:"absolute inset-0 overflow-hidden"},[s("div",{onMousedown:e[2]||(e[2]=Ue(()=>{},["stop"])),class:"pointer-events-none fixed inset-y-0 right-0 flex pl-10"},[s("div",{class:w(["pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg",R.value])},[s("form",{ref_key:"elForm",ref:y,class:w(o(L)),onSubmit:e[1]||(e[1]=Ue(e=>D(e.target),["prevent"]))},[s("div",B0,[s("div",R0,[s("div",E0,[s("div",H0,[s("div",z0,[t.$slots.heading?(a(),u("div",N0,[Z(t.$slots,"heading")])):(a(),u("h3",{key:1,class:w(o(V))},T(o(O)),3)),t.$slots.subheading?(a(),u("div",U0,[Z(t.$slots,"subheading")])):p.subHeading?(a(),u("p",{key:3,class:w(o(M))},T(p.subHeading),3)):null!=(l=o($))&&l.notes?(a(),u("p",{key:4,class:w(["notes",o(M)]),innerHTML:null==(e=o($))?void 0:e.notes},null,10,q0)):k("",!0)]),s("div",Q0,[$e(d,{"button-class":"bg-gray-50 dark:bg-gray-900",onClose:P})])])]),Z(t.$slots,"header",{instance:null==(l=Be())?void 0:l.exposed,model:B.value}),(a(),se(n,{ref_key:"formFields",ref:m,key:g.value,type:p.type,modelValue:B.value,"onUpdate:modelValue":E,api:x.value,configureField:p.configureField,configureFormLayout:p.configureFormLayout},null,8,["type","modelValue","api","configureField","configureFormLayout"])),Z(t.$slots,"footer",{instance:null==(e=Be())?void 0:e.exposed,model:B.value})])]),s("div",{class:w(o(S))},[s("div",null,[Z(t.$slots,"leftbuttons",{instance:null==(l=Be())?void 0:l.exposed,model:B.value})]),s("div",null,[p.showLoading&&o(j)?(a(),se(r,{key:0})):k("",!0)]),s("div",K0,[$e(c,{onClick:P,disabled:o(j)},{default:ke(()=>[we("Cancel")]),_:1},8,["disabled"]),$e(i,{class:"ml-4",disabled:!!p.allowSubmit&&!p.allowSubmit(B.value)},{default:ke(()=>[we(T(p.submitLabel),1)]),_:1},8,["disabled"]),Z(t.$slots,"rightbuttons",{instance:null==(e=Be())?void 0:e.exposed,model:B.value})])],2)],34)],2)],32)],32)])])):(a(),u("div",L0,[s("p",V0,[we("Could not create form for unknown "),S0,we(" "+T(o(I)),1)])])),"ModalLookup"==(null==(l=h.value)?void 0:l.name)&&h.value.ref?(a(),se(v,{key:3,"ref-info":h.value.ref,onDone:b},null,8,["ref-info"])):k("",!0)])}}}),G0={key:0},W0={class:"text-red-700"},J0=s("b",null,"type",-1),X0=["onSubmit"],Y0={key:0},ef={key:2},tf=["innerHTML"],lf={class:"flex justify-end"},nf={key:2,class:"relative z-10","aria-labelledby":"slide-over-title",role:"dialog","aria-modal":"true"},sf=s("div",{class:"fixed inset-0"},null,-1),of={class:"fixed inset-0 overflow-hidden"},af=["onSubmit"],rf={class:"flex min-h-0 flex-1 flex-col overflow-auto"},uf={class:"flex-1"},df={class:"bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6"},cf={class:"flex items-start justify-between space-x-3"},ff={class:"space-y-1"},mf={key:0},vf={key:2},hf=["innerHTML"],gf={class:"flex h-7 items-center"},pf={class:"flex justify-end"},yf=ce({__name:"AutoCreateForm",props:{type:null,formStyle:{default:"slideOver"},panelClass:null,formClass:null,headingClass:null,subHeadingClass:null,buttonsClass:null,heading:null,subHeading:null,autosave:{type:Boolean,default:!0},showLoading:{type:Boolean,default:!0},showCancel:{type:Boolean,default:!0},configureField:null,configureFormLayout:null},emits:["done","save","error"],setup(p,{expose:e,emit:n}){const r=p,m=A(),g=A(1);function t(){g.value++,null!=(e=m.value)&&e.forceUpdate();var e=Be();null!=(e=null==e?void 0:e.proxy)&&e.$forceUpdate()}function y(e){}e({forceUpdate:t,props:r,setModel:function(e){Object.assign(V.value,e),t()},formFields:m}),Xt("ModalProvider",{openModal:function(e,t){h.value=e,l.value=t}});const h=A(),l=A();async function b(e){l.value&&l.value(e),h.value=void 0,l.value=void 0}const{typeOf:i,typeProperties:d,Crud:c,createDto:v,formValues:x}=at(),C=f(()=>Et(r.type)),L=f(()=>i(C.value)),V=A("string"==typeof r.type?v(r.type):r.type?new r.type:null),M=f(()=>r.panelClass||Ze.panelClass(r.formStyle)),S=f(()=>r.formClass||Ze.formClass(r.formStyle)),I=f(()=>r.headingClass||Ze.headingClass(r.formStyle)),$=f(()=>r.subHeadingClass||Ze.subHeadingClass(r.formStyle)),F=f(()=>r.buttonsClass||Ze.buttonsClass),B=f(()=>c.model(L.value)),j=f(()=>{var e;return r.heading||(null==(e=i(C.value))?void 0:e.description)||(B.value?"New "+He(B.value):He(C.value))}),O=A(new Je);let H=Tl(),D=f(()=>H.loading.value);async function E(e){var t,l,a,e=e.target;r.autosave?(l=qe(null==(l=V.value)?void 0:l.getMethod,e=>"function"==typeof e?e():null)||"POST",t=null==qe(null==(t=V.value)?void 0:t.createResponse,e=>"function"==typeof e?e():null),ln.hasRequestBody(l)?(l=new V.value.constructor,a=new FormData(e),O.value=t?await H.apiFormVoid(l,a,{jsconfig:"eccn"}):await H.apiForm(l,a,{jsconfig:"eccn"})):(l=x(e,d(L.value)),a=new V.value.constructor(l),O.value=t?await H.apiVoid(a,{jsconfig:"eccn"}):await H.api(a,{jsconfig:"eccn"})),O.value.succeeded?(e.reset(),n("save",O.value.response)):n("error",O.value.error)):n("save",new V.value.constructor(x(e,d(L.value))))}function z(){n("done")}ne.interceptors.has("AutoCreateForm.new")&&ne.interceptors.invoke("AutoCreateForm.new",{props:r,model:V});const _=A(!1),R=A(""),N={entering:{cls:"transform transition ease-in-out duration-500 sm:duration-700",from:"translate-x-full",to:"translate-x-0"},leaving:{cls:"transform transition ease-in-out duration-500 sm:duration-700",from:"translate-x-0",to:"translate-x-full"}};function P(){"slideOver"==r.formStyle?_.value=!1:z()}Lt(_,()=>{Ct(N,R,_.value),_.value||setTimeout(z,700)}),_.value=!0;const U=e=>{"Escape"===e.key&&P()};return tt(()=>window.addEventListener("keydown",U)),Rt(()=>window.removeEventListener("keydown",U)),(e,t)=>{var l,n=X("AutoFormFields"),r=X("FormLoading"),i=X("SecondaryButton"),d=X("PrimaryButton"),c=X("CloseButton"),v=X("ModalLookup");return a(),u("div",null,[o(L)?"card"==p.formStyle?(a(),u("div",{key:1,class:w(o(M))},[s("form",{onSubmit:Ue(E,["prevent"])},[s("div",{class:w(o(S))},[s("div",null,[e.$slots.heading?(a(),u("div",Y0,[Z(e.$slots,"heading")])):(a(),u("h3",{key:1,class:w(o(I))},T(o(j)),3)),e.$slots.subheading?(a(),u("div",ef,[Z(e.$slots,"subheading")])):p.subHeading?(a(),u("p",{key:3,class:w(o($))},T(p.subHeading),3)):null!=(l=o(L))&&l.notes?(a(),u("p",{key:4,class:w(["notes",o($)]),innerHTML:null==(l=o(L))?void 0:l.notes},null,10,tf)):k("",!0)]),Z(e.$slots,"header",{formInstance:null==(l=Be())?void 0:l.exposed,model:V.value}),(a(),se(n,{ref_key:"formFields",ref:m,key:g.value,modelValue:V.value,"onUpdate:modelValue":y,api:O.value,configureField:p.configureField,configureFormLayout:p.configureFormLayout},null,8,["modelValue","api","configureField","configureFormLayout"])),Z(e.$slots,"footer",{formInstance:null==(l=Be())?void 0:l.exposed,model:V.value})],2),s("div",{class:w(o(F))},[s("div",null,[p.showLoading&&o(D)?(a(),se(r,{key:0})):k("",!0)]),s("div",lf,[p.showCancel?(a(),se(i,{key:0,onClick:P,disabled:o(D)},{default:ke(()=>[we("Cancel")]),_:1},8,["disabled"])):k("",!0),$e(d,{type:"submit",class:"ml-4",disabled:o(D)},{default:ke(()=>[we("Save")]),_:1},8,["disabled"])])],2)],40,X0)],2)):(a(),u("div",nf,[sf,s("div",of,[s("div",{onMousedown:P,class:"absolute inset-0 overflow-hidden"},[s("div",{onMousedown:t[0]||(t[0]=Ue(()=>{},["stop"])),class:"pointer-events-none fixed inset-y-0 right-0 flex pl-10"},[s("div",{class:w(["pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg",R.value])},[s("form",{class:w(o(S)),onSubmit:Ue(E,["prevent"])},[s("div",rf,[s("div",uf,[s("div",df,[s("div",cf,[s("div",ff,[e.$slots.heading?(a(),u("div",mf,[Z(e.$slots,"heading")])):(a(),u("h3",{key:1,class:w(o(I))},T(o(j)),3)),e.$slots.subheading?(a(),u("div",vf,[Z(e.$slots,"subheading")])):p.subHeading?(a(),u("p",{key:3,class:w(o($))},T(p.subHeading),3)):null!=(l=o(L))&&l.notes?(a(),u("p",{key:4,class:w(["notes",o($)]),innerHTML:null==(t=o(L))?void 0:t.notes},null,10,hf)):k("",!0)]),s("div",gf,[$e(c,{"button-class":"bg-gray-50 dark:bg-gray-900",onClose:P})])])]),Z(e.$slots,"header",{formInstance:null==(l=Be())?void 0:l.exposed,model:V.value}),(a(),se(n,{ref_key:"formFields",ref:m,key:g.value,modelValue:V.value,"onUpdate:modelValue":y,api:O.value,configureField:p.configureField,configureFormLayout:p.configureFormLayout},null,8,["modelValue","api","configureField","configureFormLayout"])),Z(e.$slots,"footer",{formInstance:null==(t=Be())?void 0:t.exposed,model:V.value})])]),s("div",{class:w(o(F))},[s("div",null,[p.showLoading&&o(D)?(a(),se(r,{key:0})):k("",!0)]),s("div",pf,[p.showCancel?(a(),se(i,{key:0,onClick:P,disabled:o(D)},{default:ke(()=>[we("Cancel")]),_:1},8,["disabled"])):k("",!0),$e(d,{type:"submit",class:"ml-4",disabled:o(D)},{default:ke(()=>[we("Save")]),_:1},8,["disabled"])])],2)],42,af)],2)],32)],32)])])):(a(),u("div",G0,[s("p",W0,[we("Could not create form for unknown "),J0,we(" "+T(o(C)),1)])])),"ModalLookup"==(null==(c=h.value)?void 0:c.name)&&h.value.ref?(a(),se(v,{key:3,"ref-info":h.value.ref,onDone:b},null,8,["ref-info"])):k("",!0)])}}}),bf={key:0},wf={class:"text-red-700"},xf=s("b",null,"type",-1),kf=["onSubmit"],$f={key:0},Cf={key:2},_f=["innerHTML"],Lf={class:"flex justify-end"},Vf={key:2,class:"relative z-10","aria-labelledby":"slide-over-title",role:"dialog","aria-modal":"true"},Sf=s("div",{class:"fixed inset-0"},null,-1),Mf={class:"fixed inset-0 overflow-hidden"},Af=["onSubmit"],Tf={class:"flex min-h-0 flex-1 flex-col overflow-auto"},Ff={class:"flex-1"},If={class:"bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6"},Df={class:"flex items-start justify-between space-x-3"},jf={class:"space-y-1"},Of={key:0},Pf={key:2},Bf=["innerHTML"],Rf={class:"flex h-7 items-center"},Ef={class:"flex justify-end"},Hf=ce({__name:"AutoEditForm",props:{modelValue:null,type:null,deleteType:null,formStyle:{default:"slideOver"},panelClass:null,formClass:null,headingClass:null,subHeadingClass:null,heading:null,subHeading:null,autosave:{type:Boolean,default:!0},showLoading:{type:Boolean,default:!0},configureField:null,configureFormLayout:null},emits:["done","save","delete","error"],setup(p,{expose:e,emit:n}){const r=p,m=A(),g=A(1);function y(e){}e({forceUpdate:function(){g.value++,V.value=L();var e=Be();null!=(e=null==e?void 0:e.proxy)&&e.$forceUpdate()},props:r,setModel:function(e){Object.assign(V.value,e)},formFields:m}),Xt("ModalProvider",{openModal:function(e,t){h.value=e,l.value=t}});const h=A(),l=A();async function b(e){l.value&&l.value(e),h.value=void 0,l.value=void 0}const{typeOf:t,apiOf:q,typeProperties:i,createFormLayout:Q,getPrimaryKey:K,Crud:c,createDto:d,formValues:v}=at(),x=f(()=>Et(r.type)),C=f(()=>t(x.value)),L=()=>"string"==typeof r.type?d(r.type,ml(r.modelValue)):r.type?new r.type(ml(r.modelValue)):null,V=A(L()),W=f(()=>r.panelClass||Ze.panelClass(r.formStyle)),M=f(()=>r.formClass||Ze.formClass(r.formStyle)),S=f(()=>r.headingClass||Ze.headingClass(r.formStyle)),I=f(()=>r.subHeadingClass||Ze.subHeadingClass(r.formStyle)),$=f(()=>c.model(C.value)),F=f(()=>{var e;return r.heading||(null==(e=t(x.value))?void 0:e.description)||($.value?"Update "+He($.value):He(x.value))}),B=A(new Je);let j=Object.assign({},ml(r.modelValue)),O=(ne.interceptors.has("AutoEditForm.new")&&ne.interceptors.invoke("AutoEditForm.new",{props:r,model:V,origModel:j}),Tl()),H=f(()=>O.loading.value);const D=()=>qe(t(c.model(C.value)),e=>K(e));function G(e){var{op:t,prop:l}=e;t&&(c.isPatch(t)||c.isUpdate(t))&&(e.disabled=null==l?void 0:l.isPrimaryKey),r.configureField&&r.configureField(e)}async function E(a){a=a.target;if(r.autosave){let e=qe(null==(s=V.value)?void 0:s.getMethod,e=>"function"==typeof e?e():null)||"POST",l=null==qe(null==(s=V.value)?void 0:s.createResponse,e=>"function"==typeof e?e():null),d=D();if(ln.hasRequestBody(e)){let e=new V.value.constructor,t=ye(r.modelValue,d.name),i=new FormData(a),u=(d&&!Array.from(i.keys()).some(e=>e.toLowerCase()==d.name.toLowerCase())&&i.append(d.name,t),[]);var s=x.value&&q(x.value);if(s&&c.isPatch(s)){let o=Q(C.value),r={};if(d&&(r[d.name]=t),o.forEach(l=>{var a=l.id,s=ye(j,a);if(!d||d.name.toLowerCase()!==a.toLowerCase()){var n=i.get(a);ne.interceptors.has("AutoEditForm.save.formLayout")&&ne.interceptors.invoke("AutoEditForm.save.formLayout",{origValue:s,formLayout:o,input:l,newValue:n});let e=null!=n,t="checkbox"===l.type?e!=!!s:"file"===l.type?e:n!=s;(t=n||s?t:!1)&&(n?r[a]=n:"file"!==l.type&&u.push(a))}}),ne.interceptors.has("AutoEditForm.save")&&ne.interceptors.invoke("AutoEditForm.save",{origModel:j,formLayout:o,dirtyValues:r}),Array.from(i.keys()).filter(e=>!r[e]).forEach(e=>i.delete(e)),0==Array.from(i.keys()).filter(e=>e.toLowerCase()!=d.name.toLowerCase()).length&&0==u.length)return void P()}s=0<u.length?{jsconfig:"eccn",reset:u}:{jsconfig:"eccn"};B.value=l?await O.apiFormVoid(e,i,s):await O.apiForm(e,i,s)}else{s=v(a,i(C.value)),s=(d&&!ye(s,d.name)&&(s[d.name]=ye(r.modelValue,d.name)),new V.value.constructor(s));B.value=l?await O.apiVoid(s,{jsconfig:"eccn"}):await O.api(s,{jsconfig:"eccn"})}B.value.succeeded?(a.reset(),n("save",B.value.response)):n("error",B.value.error)}else n("save",new V.value.constructor(v(a,i(C.value))))}async function z(e){var t=D(),l=t?ye(r.modelValue,t.name):null;l?(t={[t.name]:l},l="string"==typeof r.deleteType?d(r.deleteType,t):r.deleteType?new r.deleteType(t):null,null==qe(l.createResponse,e=>"function"==typeof e?e():null)?B.value=await O.apiVoid(l):B.value=await O.api(l),B.value.succeeded?n("delete",B.value.response):n("error",B.value.error)):console.error(`Could not find Primary Key for Type ${x.value} (${$.value})`)}function _(){n("done")}const R=A(!1),N=A(""),J={entering:{cls:"transform transition ease-in-out duration-500 sm:duration-700",from:"translate-x-full",to:"translate-x-0"},leaving:{cls:"transform transition ease-in-out duration-500 sm:duration-700",from:"translate-x-0",to:"translate-x-full"}};function P(){"slideOver"==r.formStyle?R.value=!1:_()}Lt(R,()=>{Ct(J,N,R.value),R.value||setTimeout(_,700)}),R.value=!0;const U=e=>{"Escape"===e.key&&P()};return tt(()=>window.addEventListener("keydown",U)),Rt(()=>window.removeEventListener("keydown",U)),(e,t)=>{var l,n=X("AutoFormFields"),r=X("ConfirmDelete"),i=X("FormLoading"),d=X("SecondaryButton"),c=X("PrimaryButton"),v=X("CloseButton"),f=X("ModalLookup");return a(),u("div",null,[o(C)?"card"==p.formStyle?(a(),u("div",{key:1,class:w(o(W))},[s("form",{onSubmit:Ue(E,["prevent"])},[s("div",{class:w(o(M))},[s("div",null,[e.$slots.heading?(a(),u("div",$f,[Z(e.$slots,"heading")])):(a(),u("h3",{key:1,class:w(o(S))},T(o(F)),3)),e.$slots.subheading?(a(),u("div",Cf,[Z(e.$slots,"subheading")])):p.subHeading?(a(),u("p",{key:3,class:w(o(I))},T(p.subHeading),3)):null!=(l=o(C))&&l.notes?(a(),u("p",{key:4,class:w(["notes",o(I)]),innerHTML:null==(l=o(C))?void 0:l.notes},null,10,_f)):k("",!0)]),Z(e.$slots,"header",{formInstance:null==(l=Be())?void 0:l.exposed,model:V.value}),(a(),se(n,{ref_key:"formFields",ref:m,key:g.value,modelValue:V.value,"onUpdate:modelValue":y,api:B.value,configureField:p.configureField,configureFormLayout:p.configureFormLayout},null,8,["modelValue","api","configureField","configureFormLayout"])),Z(e.$slots,"footer",{formInstance:null==(l=Be())?void 0:l.exposed,model:V.value})],2),s("div",{class:w(o(Ze).buttonsClass)},[s("div",null,[p.deleteType?(a(),se(r,{key:0,onDelete:z})):k("",!0)]),s("div",null,[p.showLoading&&o(H)?(a(),se(i,{key:0})):k("",!0)]),s("div",Lf,[$e(d,{onClick:P,disabled:o(H)},{default:ke(()=>[we("Cancel")]),_:1},8,["disabled"]),$e(c,{type:"submit",class:"ml-4",disabled:o(H)},{default:ke(()=>[we("Save")]),_:1},8,["disabled"])])],2)],40,kf)],2)):(a(),u("div",Vf,[Sf,s("div",Mf,[s("div",{onMousedown:P,class:"absolute inset-0 overflow-hidden"},[s("div",{onMousedown:t[0]||(t[0]=Ue(()=>{},["stop"])),class:"pointer-events-none fixed inset-y-0 right-0 flex pl-10"},[s("div",{class:w(["pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg",N.value])},[s("form",{class:w(o(M)),onSubmit:Ue(E,["prevent"])},[s("div",Tf,[s("div",Ff,[s("div",If,[s("div",Df,[s("div",jf,[e.$slots.heading?(a(),u("div",Of,[Z(e.$slots,"heading")])):(a(),u("h3",{key:1,class:w(o(S))},T(o(F)),3)),e.$slots.subheading?(a(),u("div",Pf,[Z(e.$slots,"subheading")])):p.subHeading?(a(),u("p",{key:3,class:w(o(I))},T(p.subHeading),3)):null!=(l=o(C))&&l.notes?(a(),u("p",{key:4,class:w(["notes",o(I)]),innerHTML:null==(t=o(C))?void 0:t.notes},null,10,Bf)):k("",!0)]),s("div",Rf,[$e(v,{"button-class":"bg-gray-50 dark:bg-gray-900",onClose:P})])])]),Z(e.$slots,"header",{formInstance:null==(l=Be())?void 0:l.exposed,model:V.value}),(a(),se(n,{ref_key:"formFields",ref:m,key:g.value,modelValue:V.value,"onUpdate:modelValue":y,api:B.value,configureField:G,configureFormLayout:p.configureFormLayout},null,8,["modelValue","api","configureFormLayout"])),Z(e.$slots,"footer",{formInstance:null==(t=Be())?void 0:t.exposed,model:V.value})])]),s("div",{class:w(o(Ze).buttonsClass)},[s("div",null,[p.deleteType?(a(),se(r,{key:0,onDelete:z})):k("",!0)]),s("div",null,[p.showLoading&&o(H)?(a(),se(i,{key:0})):k("",!0)]),s("div",Ef,[$e(d,{onClick:P,disabled:o(H)},{default:ke(()=>[we("Cancel")]),_:1},8,["disabled"]),$e(c,{type:"submit",class:"ml-4",disabled:o(H)},{default:ke(()=>[we("Save")]),_:1},8,["disabled"])])],2)],42,Af)],2)],32)],32)])])):(a(),u("div",bf,[s("p",wf,[we("Could not create form for unknown "),xf,we(" "+T(o(x)),1)])])),"ModalLookup"==(null==(v=h.value)?void 0:v.name)&&h.value.ref?(a(),se(f,{key:3,"ref-info":h.value.ref,onDone:b},null,8,["ref-info"])):k("",!0)])}}}),zf=s("label",{for:"confirmDelete",class:"ml-2 mr-2 select-none"},"confirm",-1),Nf=["onClick"],Uf=ce({__name:"ConfirmDelete",emits:["delete"],setup(e,{emit:t}){let l=A(!1);const n=()=>{l.value&&t("delete")},r=f(()=>["select-none inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white",l.value?"cursor-pointer bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500":"bg-red-400"]);return(e,t)=>(a(),u(Te,null,[kt(s("input",{id:"confirmDelete",type:"checkbox",class:"focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-black","onUpdate:modelValue":t[0]||(t[0]=e=>Gn(l)?l.value=e:l=e)},null,512),[[Yl,o(l)]]),zf,s("span",Me({onClick:Ue(n,["prevent"]),class:o(r)},e.$attrs),[Z(e.$slots,"default",{},()=>[we("Delete")])],16,Nf)],64))}}),qf={class:"flex",title:"loading..."},Qf={key:0,xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",width:"24px",height:"30px",viewBox:"0 0 24 30"},Kf=wl('<rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2"><animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="8" y="10" width="4" height="10" fill="#333" opacity="0.2"><animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="16" y="10" width="4" height="10" fill="#333" opacity="0.2"><animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate></rect>',3),Zf=[Kf],Gf={class:"ml-2 mt-1 text-gray-400"},Wf=ce({__name:"FormLoading",props:{icon:{type:Boolean,default:!0},text:{default:"loading..."}},setup(l){return Ne("ApiState",void 0),(e,t)=>(a(),u("div",qf,[l.icon?(a(),u("svg",Qf,Zf)):k("",!0),s("span",Gf,T(l.text),1)]))}}),Jf=["onClick"],Xf={key:3,class:"flex justify-between items-center"},Yf={class:"mr-1 select-none"},e1=["onClick"],t1=ce({__name:"DataGrid",props:{items:{default:()=>[]},id:{default:"DataGrid"},type:null,tableStyle:{default:"stripedRows"},selectedColumns:null,gridClass:null,grid2Class:null,grid3Class:null,grid4Class:null,tableClass:null,theadClass:null,tbodyClass:null,theadRowClass:null,theadCellClass:null,isSelected:null,headerTitle:null,headerTitles:null,visibleFrom:null,rowClass:null,rowStyle:null},emits:["headerSelected","rowSelected"],setup(t,{emit:d}){const c=t,l=A(),v=A(null),p=en(),m=t=>Object.keys(p).find(e=>e.toLowerCase()==t.toLowerCase()+"-header"),g=t=>Object.keys(p).find(e=>e.toLowerCase()==t.toLowerCase()),n=f(()=>Nl(c.items).filter(e=>!(!p[e]&&!p[e+"-header"]))),{typeOf:e,typeProperties:r}=at(),i=f(()=>Et(c.type)),y=f(()=>e(i.value)),h=f(()=>r(y.value));function b(e){e=c.headerTitles&&ye(c.headerTitles,e)||e;return c.headerTitle?c.headerTitle(e):ts(e)}function x(e){const t=e.toLowerCase();return h.value.find(e=>e.name.toLowerCase()==t)}const C={xs:"xs:table-cell",sm:"sm:table-cell",md:"md:table-cell",lg:"lg:table-cell",xl:"xl:table-cell","2xl":"2xl:table-cell",never:""};function L(e){e=c.visibleFrom&&ye(c.visibleFrom,e);return e&&qe(C[e],e=>"hidden "+e)}const V=f(()=>c.gridClass??ge.getGridClass(c.tableStyle)),M=f(()=>c.grid2Class??ge.getGrid2Class(c.tableStyle)),S=f(()=>c.grid3Class??ge.getGrid3Class(c.tableStyle)),I=f(()=>c.grid4Class??ge.getGrid4Class(c.tableStyle)),$=f(()=>c.tableClass??ge.getTableClass(c.tableStyle)),F=f(()=>c.tbodyClass??ge.getTbodyClass(c.tbodyClass)),B=f(()=>c.theadClass??ge.getTheadClass(c.tableStyle)),j=f(()=>c.theadRowClass??ge.getTheadRowClass(c.tableStyle)),O=f(()=>c.theadCellClass??ge.getTheadCellClass(c.tableStyle));const H=f(()=>{const e=("string"==typeof c.selectedColumns?c.selectedColumns.split(","):c.selectedColumns)||(0<n.value.length?n.value:Nl(c.items)),t=h.value.reduce((e,t)=>(e[t.name.toLowerCase()]=t.format,e),{});return e.filter(e=>{return"hidden"!=(null==(e=t[e.toLowerCase()])?void 0:e.method)})});return(n,e)=>{const r=X("CellFormat"),i=X("PreviewFormat");return t.items.length?(a(),u("div",{key:0,ref_key:"refResults",ref:l,class:w(o(V))},[s("div",{class:w(o(M))},[s("div",{class:w(o(S))},[s("div",{class:w(o(I))},[s("table",{class:w(o($))},[s("thead",{class:w(o(B))},[s("tr",{class:w(o(j))},[(a(!0),u(Te,null,Ie(o(H),t=>{return a(),u("td",{class:w([L(t),o(O),(e=t,v.value===e?"text-gray-900 dark:text-gray-50":"text-gray-500 dark:text-gray-400")])},[s("div",{onClick:e=>{d("headerSelected",t,e)}},[o(p)[t+"-header"]?Z(n.$slots,t+"-header",{key:0,column:t}):m(t)?Z(n.$slots,m(t),{key:1,column:t}):o(p).header?Z(n.$slots,"header",{key:2,column:t,label:b(t)}):(a(),u("div",Xf,[s("span",Yf,T(b(t)),1)]))],8,Jf)],2);var e}),256))],2)],2),s("tbody",{class:w(o(F))},[(a(!0),u(Te,null,Ie(t.items,(t,e)=>{return a(),u("tr",{class:w((l=t,s=e,c.rowClass?c.rowClass(l,s):ge.getTableRowClass(c.tableStyle,s,!(!c.isSelected||!c.isSelected(l)),null!=c.isSelected))),style:Xl((s=t,l=e,c.rowStyle?c.rowStyle(s,l):void 0)),onClick:e=>{d("rowSelected",t,e)}},[(a(!0),u(Te,null,Ie(o(H),e=>{return a(),u("td",{class:w([L(e),o(ge).tableCellClass])},[o(p)[e]?Z(n.$slots,e,jt(Me({key:0},t))):g(e)?Z(n.$slots,g(e),jt(Me({key:1},t))):x(e)?(a(),se(r,{key:2,type:o(y),propType:x(e),modelValue:t},null,8,["type","propType","modelValue"])):(a(),se(i,{key:3,value:o(ye)(t,e),format:null!=(e=x(e=e))&&e.format?e.format:"TimeSpan"==(null==e?void 0:e.type)||"TimeOnly"==(null==e?void 0:e.type)?{method:"time"}:null},null,8,["value","format"]))],2)}),256))],14,e1);var l,s}),256))],2)],2)],2)],2)],2)],2)):k("",!0)}}}),l1=ce({props:{type:Object,propType:Object,modelValue:Object},setup(i,{attrs:u}){const d=at()["typeOf"];return()=>{var e,t;const l=null!=(e=i.propType)&&e.format?e.format:"TimeSpan"==(null==e?void 0:e.type)||"TimeOnly"==(null==e?void 0:e.type)?{method:"time"}:null,a=ye(i.modelValue,i.propType.name),s=Object.assign({},i,u),n=gt("span",{innerHTML:Jt(a,l,s)}),o=Zt(a)&&Array.isArray(a)?gt("span",{},[gt("span",{class:"mr-2"},""+a.length),n]):n,r=null==(e=i.propType)?void 0:e.ref;return r&&(e=et(i.type).find(e=>e.type===r.model))&&(e=(e=ye(i.modelValue,e.name))&&r.refLabel&&ye(e,r.refLabel))?(t=(t=null==(t=d(r.model))?void 0:t.icon)?gt(zs,{image:t,class:"w-5 h-5 mr-1"}):null,gt("span",{class:"flex",title:r.model+" "+a},[t,e])):o}}}),n1={key:0},s1={key:0,class:"mr-2"},o1=["innerHTML"],a1=["innerHTML"],i1={inheritAttrs:!1},r1=ce({...i1,__name:"PreviewFormat",props:{value:null,format:null,includeIcon:{type:Boolean,default:!0},includeCount:{type:Boolean,default:!0},maxFieldLength:{default:150},maxNestedFields:{default:2},maxNestedFieldLength:{default:30}},setup(l){const e=l,n=f(()=>Array.isArray(e.value));return(e,t)=>o(Zt)(l.value)?(a(),u("span",n1,[l.includeCount&&o(n)?(a(),u("span",s1,T(l.value.length),1)):k("",!0),s("span",{innerHTML:o(Jt)(l.value,l.format,e.$attrs)},null,8,o1)])):(a(),u("span",{key:1,innerHTML:o(Jt)(l.value,l.format,e.$attrs)},null,8,a1))}}),u1=["innerHTML"],d1={key:0},c1=s("b",null,null,-1),f1={key:2},m1=ce({__name:"HtmlFormat",props:{value:null,depth:{default:0},fieldAttrs:null,classes:{type:Function,default:(e,t,l,a,s)=>a}},setup(r){const t=r,i=f(()=>_t(t.value)),d=f(()=>Array.isArray(t.value)),c=e=>ts(e),v=e=>t.fieldAttrs?t.fieldAttrs(e):null,p=f(()=>Nl(t.value));return(e,t)=>{const l=X("HtmlFormat",!0);return a(),u("div",{class:w(0==r.depth?"prose html-format":"")},[o(i)?(a(),u("div",{key:0,innerHTML:o(Jt)(r.value)},null,8,u1)):o(d)?(a(),u("div",{key:1,class:w(r.classes("array","div",r.depth,o(ge).gridClass))},[o(_t)(r.value[0])?(a(),u("div",d1,"[ "+T(r.value.join(", "))+" ]",1)):(a(),u("div",{key:1,class:w(r.classes("array","div",r.depth,o(ge).grid2Class))},[s("div",{class:w(r.classes("array","div",r.depth,o(ge).grid3Class))},[s("div",{class:w(r.classes("array","div",r.depth,o(ge).grid4Class))},[s("table",{class:w(r.classes("object","table",r.depth,o(ge).tableClass))},[s("thead",{class:w(r.classes("array","thead",r.depth,o(ge).theadClass))},[s("tr",null,[(a(!0),u(Te,null,Ie(o(p),e=>(a(),u("th",{class:w(r.classes("array","th",r.depth,o(ge).theadCellClass+" whitespace-nowrap"))},[c1,we(T(c(e)),1)],2))),256))])],2),s("tbody",null,[(a(!0),u(Te,null,Ie(r.value,(t,e)=>(a(),u("tr",{class:w(r.classes("array","tr",r.depth,e%2==0?"bg-white":"bg-gray-50",e))},[(a(!0),u(Te,null,Ie(o(p),e=>(a(),u("td",{class:w(r.classes("array","td",r.depth,o(ge).tableCellClass))},[$e(l,Me({value:t[e],"field-attrs":r.fieldAttrs,depth:r.depth+1,classes:r.classes},v(e)),null,16,["value","field-attrs","depth","classes"])],2))),256))],2))),256))])],2)],2)],2)],2))],2)):(a(),u("div",f1,[s("table",{class:w(r.classes("object","table",r.depth,"table-object"))},[(a(!0),u(Te,null,Ie((n=r.value)?Object.keys(n).map(e=>({key:c(e),val:n[e]})):[],e=>(a(),u("tr",{class:w(r.classes("object","tr",r.depth,""))},[s("th",{class:w(r.classes("object","th",r.depth,"align-top py-2 px-4 text-left text-sm font-medium tracking-wider whitespace-nowrap"))},T(e.key),3),s("td",{class:w(r.classes("object","td",r.depth,"align-top py-2 px-4 text-sm"))},[$e(l,Me({value:e.val,"field-attrs":r.fieldAttrs,depth:r.depth+1,classes:r.classes},v(e.key)),null,16,["value","field-attrs","depth","classes"])],2)],2))),256))],2)]))],2);var n}}}),v1={class:"absolute top-0 right-0 pt-4 pr-4"},h1=s("span",{class:"sr-only"},"Close",-1),g1=s("svg",{class:"h-6 w-6",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","aria-hidden":"true"},[s("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})],-1),p1=[h1,g1],y1=ce({__name:"CloseButton",props:{buttonClass:{default:"bg-white dark:bg-black"}},emits:["close"],setup(l,{}){return(t,e)=>(a(),u("div",v1,[s("button",{type:"button",onClick:e[0]||(e[0]=e=>t.$emit("close")),class:w([l.buttonClass,"rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"])},p1,2)]))}}),b1=["id","aria-labelledby"],w1=s("div",{class:"fixed inset-0"},null,-1),x1={class:"fixed inset-0 overflow-hidden"},k1={class:"flex h-full flex-col bg-white dark:bg-black shadow-xl"},$1={class:"flex min-h-0 flex-1 flex-col overflow-auto"},C1={class:"flex-1"},_1={class:"bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6"},L1={class:"flex items-start justify-between space-x-3"},V1={class:"space-y-1"},S1=["id"],M1={key:1,class:"text-sm text-gray-500"},A1={class:"flex h-7 items-center"},T1={class:"flex-shrink-0 border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:px-6"},F1=ce({__name:"SlideOver",props:{id:{default:"SlideOver"},title:null,contentClass:{default:"relative mt-6 flex-1 px-4 sm:px-6"}},emits:["done"],setup(n,{emit:e}){const t=A(!1),o=A(""),l={entering:{cls:"transform transition ease-in-out duration-500 sm:duration-700",from:"translate-x-full",to:"translate-x-0"},leaving:{cls:"transform transition ease-in-out duration-500 sm:duration-700",from:"translate-x-0",to:"translate-x-full"}},r=(Lt(t,()=>{Ct(l,o,t.value),t.value||setTimeout(()=>e("done"),700)}),t.value=!0,()=>t.value=!1),i=e=>{"Escape"===e.key&&r()};return tt(()=>window.addEventListener("keydown",i)),Rt(()=>window.removeEventListener("keydown",i)),(e,t)=>{var l=X("CloseButton");return a(),u("div",{id:n.id,class:"relative z-10","aria-labelledby":n.id+"-title",role:"dialog","aria-modal":"true"},[w1,s("div",x1,[s("div",{onMousedown:r,class:"absolute inset-0 overflow-hidden"},[s("div",{onMousedown:t[0]||(t[0]=Ue(()=>{},["stop"])),class:"pointer-events-none fixed inset-y-0 right-0 flex pl-10"},[s("div",{class:w(["pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg",o.value])},[s("div",k1,[s("div",$1,[s("div",C1,[s("div",_1,[s("div",L1,[s("div",V1,[n.title?(a(),u("h2",{key:0,class:"text-lg font-medium text-gray-900 dark:text-gray-50",id:n.id+"-title"},T(n.title),9,S1)):k("",!0),e.$slots.subtitle?(a(),u("p",M1,[Z(e.$slots,"subtitle")])):k("",!0)]),s("div",A1,[$e(l,{"button-class":"bg-gray-50 dark:bg-gray-900",onClose:r})])])]),s("div",{class:w(n.contentClass)},[Z(e.$slots,"default")],2)])]),s("div",T1,[Z(e.$slots,"footer")])])],2)],32)],32)])],8,b1)}}}),I1=["id","data-transition-for","aria-labelledby"],D1={class:"fixed inset-0 z-10 overflow-y-auto"},j1={class:"flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"},O1=s("span",{class:"sr-only"},"Close",-1),P1=s("svg",{class:"h-6 w-6",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","aria-hidden":"true"},[s("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})],-1),B1=[O1,P1],R1=ce({__name:"ModalDialog",props:{id:{default:"ModalDialog"},modalClass:{default:Jl.modalClass},sizeClass:{default:Jl.sizeClass}},emits:["done"],setup(n,{emit:e}){const t=A(!1),o=A(""),l={entering:{cls:"ease-out duration-300",from:"opacity-0",to:"opacity-100"},leaving:{cls:"ease-in duration-200",from:"opacity-100",to:"opacity-0"}},r=A(""),i={entering:{cls:"ease-out duration-300",from:"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",to:"opacity-100 translate-y-0 sm:scale-100"},leaving:{cls:"ease-in duration-200",from:"opacity-100 translate-y-0 sm:scale-100",to:"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}},d=(Lt(t,()=>{Ct(l,o,t.value),Ct(i,r,t.value),t.value||setTimeout(()=>e("done"),200)}),t.value=!0,()=>t.value=!1),c=(Xt("ModalProvider",{openModal:function(e,t){c.value=e,v.value=t}}),A()),v=A();async function f(e){v.value&&v.value(e),c.value=void 0,v.value=void 0}const p=e=>{"Escape"===e.key&&d()};return tt(()=>window.addEventListener("keydown",p)),Rt(()=>window.removeEventListener("keydown",p)),(e,t)=>{var l=X("ModalLookup");return a(),u("div",{id:n.id,"data-transition-for":n.id,onMousedown:d,class:"relative z-10","aria-labelledby":n.id+"-title",role:"dialog","aria-modal":"true"},[s("div",{class:w(["fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity",o.value])},null,2),s("div",D1,[s("div",j1,[s("div",{class:w([n.modalClass,n.sizeClass,r.value]),onMousedown:t[0]||(t[0]=Ue(()=>{},["stop"]))},[s("div",null,[s("div",{class:"hidden sm:block absolute top-0 right-0 pt-4 pr-4 z-10"},[s("button",{type:"button",onClick:d,class:"bg-white dark:bg-black rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"},B1)]),Z(e.$slots,"default")])],34)])]),"ModalLookup"==(null==(t=c.value)?void 0:t.name)&&c.value.ref?(a(),se(l,{key:0,"ref-info":c.value.ref,onDone:f},null,8,["ref-info"])):k("",!0)],40,I1)}}}),E1={class:"pt-2 overflow-auto",style:{"min-height":"620px"}},H1={class:"mt-3 pl-5 flex flex-wrap items-center"},z1={class:"hidden sm:block text-xl leading-6 font-medium text-gray-900 dark:text-gray-50 mr-3"},N1={class:"hidden md:inline"},U1={class:"flex pb-1 sm:pb-0"},q1=["title"],Q1=s("svg",{class:"w-8 h-8",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("g",{"stroke-width":"1.5",fill:"none"},[s("path",{d:"M9 3H3.6a.6.6 0 0 0-.6.6v16.8a.6.6 0 0 0 .6.6H9M9 3v18M9 3h6M9 21h6m0-18h5.4a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H15m0-18v18",stroke:"currentColor"})])],-1),K1=[Q1],Z1=["disabled"],G1=s("svg",{class:"w-8 h-8",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{d:"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z",fill:"currentColor"})],-1),W1=[G1],J1=["disabled"],X1=s("svg",{class:"w-8 h-8",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{d:"M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z",fill:"currentColor"})],-1),Y1=[X1],em=["disabled"],tm=s("svg",{class:"w-8 h-8",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{d:"M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z",fill:"currentColor"})],-1),lm=[tm],nm=["disabled"],sm=s("svg",{class:"w-8 h-8",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[s("path",{d:"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z",fill:"currentColor"})],-1),om=[sm],am={key:0,class:"flex pb-1 sm:pb-0"},im={class:"px-4 text-lg text-black dark:text-white"},rm={key:0},um={key:1},dm=s("span",{class:"hidden xl:inline"}," Showing Results ",-1),cm={key:2},fm={key:1,class:"pl-2"},mm=s("svg",{class:"w-5 h-5",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",viewBox:"0 0 24 24"},[s("path",{fill:"currentColor",d:"M6.78 2.72a.75.75 0 0 1 0 1.06L4.56 6h8.69a7.75 7.75 0 1 1-7.75 7.75a.75.75 0 0 1 1.5 0a6.25 6.25 0 1 0 6.25-6.25H4.56l2.22 2.22a.75.75 0 1 1-1.06 1.06l-3.5-3.5a.75.75 0 0 1 0-1.06l3.5-3.5a.75.75 0 0 1 1.06 0Z"})],-1),vm=[mm],hm={class:"flex pb-1 sm:pb-0"},gm={key:0,class:"pl-2"},pm=s("svg",{class:"flex-none w-5 h-5 mr-2 text-gray-400 dark:text-gray-500 group-hover:text-gray-500","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},[s("path",{"fill-rule":"evenodd",d:"M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z","clip-rule":"evenodd"})],-1),ym={class:"mr-1"},bm={key:0,class:"h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},wm=s("path",{"fill-rule":"evenodd",d:"M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z","clip-rule":"evenodd"},null,-1),xm=[wm],km={key:1,class:"h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},$m=s("path",{"fill-rule":"evenodd",d:"M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z","clip-rule":"evenodd"},null,-1),Cm=[$m],_m={key:1},Lm={key:4},Vm={key:0},Sm={key:0,class:"cursor-pointer flex justify-between items-center hover:text-gray-900 dark:hover:text-gray-50"},Mm={class:"mr-1 select-none"},Am={key:1,class:"flex justify-between items-center"},Tm={class:"mr-1 select-none"},Fm=ce({__name:"ModalLookup",props:{id:{default:"ModalLookup"},refInfo:null,skip:{default:0},prefs:null,selectedColumns:null,allowFiltering:{type:[Boolean,null],default:!0},showPreferences:{type:[Boolean,null],default:!0},showPagingNav:{type:[Boolean,null],default:!0},showPagingInfo:{type:[Boolean,null],default:!0},showResetPreferences:{type:[Boolean,null],default:!0},showFiltersView:{type:[Boolean,null],default:!0},toolbarButtonClass:null,canFilter:null},emits:["done"],setup(c,{emit:l}){const v=c,p=en(),e=St()["config"],{metadataApi:t,filterDefinitions:n}=at(),r=Ne("client"),i=e.value.storage,m=f(()=>v.toolbarButtonClass??ge.toolbarButtonClass),g=f(()=>n.value),y=A({take:25}),h=A(new Je),b=A(v.skip),x=A(!1),C=A(),d=e=>"string"==typeof e?e.split(","):e||[];function L(e,t){return ge.getTableRowClass("fullWidth",t,!1,!0)}const V=f(()=>ot(v.refInfo.model)),M=f(()=>{var e=(0<(e=d(v.selectedColumns)).length?e:[]).map(e=>e.toLowerCase());const l=et(V.value);return 0<e.length?e.map(t=>l.find(e=>e.name.toLowerCase()===t)).filter(e=>null!=e):l}),S=f(()=>{let e=M.value.map(e=>e.name),t=d(y.value.selectedColumns).map(e=>e.toLowerCase());return 0<t.length?e.filter(e=>t.includes(e.toLowerCase())):e}),I=f(()=>y.value.take??25),$=f(()=>h.value.response?ye(h.value.response,"results"):[]),F=f(()=>{var e;return(null==(e=h.value.response)?void 0:e.total)??$.value.length??0}),B=f(()=>0<b.value),j=f(()=>0<b.value),O=f(()=>$.value.length>=I.value),H=f(()=>$.value.length>=I.value),D=A([]),q=f(()=>D.value.some(e=>0<e.settings.filters.length||!!e.settings.sort)),E=f(()=>D.value.map(e=>e.settings.filters.length).reduce((e,t)=>e+t,0)),Q=f(()=>el(V.value)),K=f(()=>{var e;return null==(e=t.value)?void 0:e.operations.find(e=>{var t;return(null==(t=e.dataModel)?void 0:t.name)==v.refInfo.model&&ze.isAnyQuery(e)})}),W=A(),z=A(!1),_=A(),R=()=>v.id+"/ApiPrefs/"+v.refInfo.model,N=e=>`Column/${v.id}:${v.refInfo.model}.`+e;async function P(e){b.value+=e,b.value<0&&(b.value=0);e=Math.floor(F.value/I.value)*I.value;b.value>e&&(b.value=e),await U()}async function G(e,t){l("done",e)}function J(){l("done",null)}function Y(t,e){var l,a=e.target;"TD"!==(null==a?void 0:a.tagName)&&(a=null==(a=null==a?void 0:a.closest("TABLE"))?void 0:a.getBoundingClientRect(),l=D.value.find(e=>e.name.toLowerCase()==t.toLowerCase()))&&a&&(e=("DIV"===(null==(a=e.target)?void 0:a.tagName)?e.target:null==(a=e.target)?void 0:a.closest("DIV")).getBoundingClientRect(),_.value={column:l,topLeft:{x:Math.max(Math.floor(e.x+25),343),y:Math.floor(115)}})}function ee(){_.value=null}async function te(e){var t=null==(t=_.value)?void 0:t.column;t&&(t.settings=e,i.setItem(N(t.name),JSON.stringify(t.settings)),await U()),_.value=null}async function le(e){i.setItem(N(e.name),JSON.stringify(e.settings)),await U()}async function ae(e){z.value=!1,y.value=e,i.setItem(R(),JSON.stringify(e)),await U()}async function U(){(async function(a){var s=K.value;if(s){let e=Gt(s,a),t=es(e=>{h.value.response=h.value.error=void 0,x.value=e}),l=await r.api(e);t(),xt(()=>h.value=l);s=ye(l.response,"results")||[];l.succeeded&&s.label}else console.error("No Query API was found for "+v.refInfo.model)})(function(){let a={include:"total",take:I.value},e=d(y.value.selectedColumns||v.selectedColumns);{var t;0<e.length&&((t=Q.value)&&e.includes(t.name)&&(e=[t.name,...e]),a.fields=e.join(","))}let s=[];return D.value.forEach(l=>{l.settings.sort&&s.push(("DESC"===l.settings.sort?"-":"")+l.name),l.settings.filters.forEach(e=>{var t=e.key.replace("%",l.name);a[t]=e.value})}),"u"<typeof a.skip&&0<b.value&&(a.skip=b.value),0<s.length&&(a.orderBy=s.join(",")),a}())}async function ne(){D.value.forEach(e=>{e.settings={filters:[]},i.removeItem(N(e.name))}),await U()}return tt(async()=>{var e=v.prefs||yl(i.getItem(R()));e&&(y.value=e),D.value=M.value.map(e=>({name:e.name,type:e.type,meta:e,settings:Object.assign({filters:[]},yl(i.getItem(N(e.name))))})),isNaN(v.skip)||(b.value=v.skip),await U()}),(l,e)=>{const t=X("ErrorSummary"),n=X("Loading"),r=X("SettingsIcons"),i=X("DataGrid"),d=X("ModalDialog");return a(),u(Te,null,[c.refInfo?(a(),se(d,{key:0,ref_key:"modalDialog",ref:W,id:c.id,onDone:J},{default:ke(()=>[s("div",E1,[s("div",H1,[s("h3",z1,[we(" Select "),s("span",N1,T(o(He)(c.refInfo.model)),1)]),s("div",U1,[c.showPreferences?(a(),u("button",{key:0,type:"button",class:"pl-2 text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400",title:c.refInfo.model+" Preferences",onClick:e[0]||(e[0]=e=>z.value=!z.value)},K1,8,q1)):k("",!0),c.showPagingNav?(a(),u("button",{key:1,type:"button",class:w(["pl-2",o(B)?"text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400":"text-gray-400 dark:text-gray-500"]),title:"First page",disabled:!o(B),onClick:e[1]||(e[1]=e=>P(-o(F)))},W1,10,Z1)):k("",!0),c.showPagingNav?(a(),u("button",{key:2,type:"button",class:w(["pl-2",o(j)?"text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400":"text-gray-400 dark:text-gray-500"]),title:"Previous page",disabled:!o(j),onClick:e[2]||(e[2]=e=>P(-o(I)))},Y1,10,J1)):k("",!0),c.showPagingNav?(a(),u("button",{key:3,type:"button",class:w(["pl-2",o(O)?"text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400":"text-gray-400 dark:text-gray-500"]),title:"Next page",disabled:!o(O),onClick:e[3]||(e[3]=e=>P(o(I)))},lm,10,em)):k("",!0),c.showPagingNav?(a(),u("button",{key:4,type:"button",class:w(["pl-2",o(H)?"text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400":"text-gray-400 dark:text-gray-500"]),title:"Last page",disabled:!o(H),onClick:e[4]||(e[4]=e=>P(o(F)))},om,10,nm)):k("",!0)]),c.showPagingInfo?(a(),u("div",am,[s("div",im,[x.value?(a(),u("span",rm,"Querying...")):k("",!0),o($).length?(a(),u("span",um,[dm,we(" "+T(b.value+1)+" - "+T(Math.min(b.value+o($).length,o(F)))+" ",1),s("span",null," of "+T(o(F)),1)])):h.value.completed?(a(),u("span",cm,"No Results")):k("",!0)])])):k("",!0),o(q)&&c.showResetPreferences?(a(),u("div",fm,[s("button",{type:"button",onClick:ne,title:"Reset Preferences & Filters",class:w(o(m))},vm,2)])):k("",!0),s("div",hm,[c.showFiltersView&&0<o(E)?(a(),u("div",gm,[s("button",{type:"button",onClick:e[5]||(e[5]=e=>C.value="filters"==C.value?null:"filters"),class:w(o(m)),"aria-expanded":"false"},[pm,s("span",ym,T(o(E))+" "+T(1==o(E)?"Filter":"Filters"),1),"filters"!=C.value?(a(),u("svg",bm,xm)):(a(),u("svg",km,Cm))],2)])):k("",!0)])]),"filters"==C.value?(a(),se(Sn,{key:0,class:"border-y border-gray-200 dark:border-gray-800 py-8 my-2",definitions:o(g),columns:D.value,onDone:e[6]||(e[6]=e=>C.value=null),onChange:le},null,8,["definitions","columns"])):k("",!0),_.value?(a(),u("div",_m,[$e(Vn,{definitions:o(g),column:_.value.column,"top-left":_.value.topLeft,onDone:ee,onSave:te},null,8,["definitions","column","top-left"])])):k("",!0),h.value.error?(a(),se(t,{key:2,status:h.value.error},null,8,["status"])):x.value?(a(),se(n,{key:3})):(a(),u("div",Lm,[o($).length?(a(),u("div",Vm,[$e(i,{id:c.id,items:o($),type:c.refInfo.model,"selected-columns":o(S),onFiltersChanged:U,tableStyle:"fullWidth",rowClass:L,onRowSelected:G,onHeaderSelected:Y},tn({header:ke(({column:t,label:e})=>{return[!c.allowFiltering||v.canFilter&&!v.canFilter(t)?(a(),u("div",Am,[s("span",Tm,T(e),1)])):(a(),u("div",Sm,[s("span",Mm,T(e),1),$e(r,{column:D.value.find(e=>e.name.toLowerCase()===t.toLowerCase()),"is-open":(null==(e=_.value)?void 0:e.column.name)===t},null,8,["column","is-open"])]))]}),_:2},[Ie(Object.keys(o(p)),t=>({name:t,fn:ke(e=>[Z(l.$slots,t,jt(gl(e)))])}))]),1032,["id","items","type","selected-columns"])])):k("",!0)]))])]),_:3},8,["id"])):k("",!0),z.value?(a(),se(Mn,{key:1,columns:o(M),prefs:y.value,onDone:e[7]||(e[7]=e=>z.value=!1),onSave:ae},null,8,["columns","prefs"])):k("",!0)],64)}}}),Im={class:"sm:hidden"},Dm=["for"],jm=["id","name"],Om=["value"],Pm={class:"hidden sm:block"},Bm={class:"border-b border-gray-200"},Rm={class:"-mb-px flex","aria-label":"Tabs"},Em=["onClick"],Hm=ce({__name:"Tabs",props:{tabs:null,id:{default:"tabs"},param:{default:"tab"},label:{type:Function,default:e=>He(e)},selected:null,tabClass:null,bodyClass:{default:"p-4"},url:{type:Boolean,default:!0}},setup(l){const t=l,n=f(()=>Object.keys(t.tabs)),r=e=>t.label?t.label(e):He(e),i=f(()=>t.id||"tabs"),d=f(()=>t.param||"tab"),c=A();function v(e){c.value=e,t.url&&nn({tab:e===n.value[0]?void 0:e})}const p=f(()=>100/Object.keys(t.tabs).length+"%");return tt(()=>{var e;c.value=t.selected||Object.keys(t.tabs)[0],t.url&&(e=location.search||(location.hash.includes("?")?"?"+dl(location.hash,"?"):""),e=zl(e)[d.value])&&(c.value=e)}),(e,t)=>(a(),u("div",null,[s("div",Im,[s("label",{for:o(i),class:"sr-only"},"Select a tab",8,Dm),s("select",{id:o(i),name:o(i),class:"block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500",onChange:t[0]||(t[0]=e=>{return v(null==(e=e.target)?void 0:e.value)})},[(a(!0),u(Te,null,Ie(o(n),e=>(a(),u("option",{key:e,value:e},T(r(e)),9,Om))),128))],40,jm)]),s("div",Pm,[s("div",Bm,[s("nav",Rm,[(a(!0),u(Te,null,Ie(o(n),t=>{return a(),u("a",{href:"#",onClick:Ue(e=>v(t),["prevent"]),style:Xl({width:o(p)}),class:w([(e=t,c.value===e?"border-indigo-500 text-indigo-600 py-4 px-1 text-center border-b-2 font-medium text-sm":"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-center border-b-2 font-medium text-sm"),l.tabClass])},T(r(t)),15,Em);var e}),256))])])]),s("div",{class:w(l.bodyClass)},[(a(),se(Jn(l.tabs[c.value])))],2)]))}}),zm=s("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-4 w-4 text-gray-400",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 32 32"},[s("path",{fill:"currentColor",d:"M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z"})],-1),Nm=[zm],Um=s("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-4 w-4 text-indigo-600",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 32 32"},[s("path",{fill:"currentColor",d:"M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z"})],-1),qm=[Um],Qm=ce({__name:"DarkModeToggle",setup(e){const l=typeof document<"u"?document.documentElement:null,n=()=>!(null==l||!l.classList.contains("dark")),o=A("dark"==localStorage.getItem("color-scheme"));return(e,t)=>(a(),u("button",{type:"button",class:"bg-gray-200 dark:bg-gray-700 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black",role:"switch","aria-checked":"false",onClick:t[0]||(t[0]=e=>{n()?null!=l&&l.classList.remove("dark"):null!=l&&l.classList.add("dark"),o.value=n(),localStorage.setItem("color-scheme",o.value?"dark":"light")})},[s("span",{class:w(`${o.value?"translate-x-0":"translate-x-5"} pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white dark:bg-black shadow transform ring-0 transition ease-in-out duration-200`)},[s("span",{class:w(`${o.value?"opacity-100 ease-in duration-200":"opacity-0 ease-out duration-100"} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`),"aria-hidden":"true"},Nm,2),s("span",{class:w(`${o.value?"opacity-0 ease-out duration-100":"opacity-100 ease-in duration-200"} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`),"aria-hidden":"true"},qm,2)],2)]))}}),Km={key:0},Zm={key:1,class:"min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8"},Gm={class:"sm:mx-auto sm:w-full sm:max-w-md"},Wm={class:"mt-6 text-center text-3xl font-extrabold text-gray-900"},Jm={key:0,class:"mt-4 text-center text-sm text-gray-600"},Xm={class:"relative z-0 inline-flex shadow-sm rounded-md"},Ym=["onClick"],ev={class:"mt-8 sm:mx-auto sm:w-full sm:max-w-md"},tv={class:"bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"},lv=["onSubmit"],nv={class:"mt-8"},sv={key:1,class:"mt-6"},ov=wl('<div class="relative"><div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-300"></div></div><div class="relative flex justify-center text-sm"><span class="px-2 bg-white text-gray-500"> Or continue with </span></div></div>',1),av={class:"mt-6 grid grid-cols-3 gap-3"},iv=["href","title"],rv={key:1,class:"h-5 w-5 text-gray-700",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},uv=s("path",{d:"M16 8a5 5 0 1 0 5 5a5 5 0 0 0-5-5z",fill:"currentColor"},null,-1),dv=s("path",{d:"M16 2a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2zm7.992 22.926A5.002 5.002 0 0 0 19 20h-6a5.002 5.002 0 0 0-4.992 4.926a12 12 0 1 1 15.985 0z",fill:"currentColor"},null,-1),cv=[uv,dv],fv=ce({__name:"SignIn",props:{provider:null,title:{default:"Sign In"},tabs:{type:[Boolean,String],default:!0},oauth:{type:[Boolean,String],default:!0}},emits:["login"],setup(c,{emit:t}){const l=c,{getMetadata:e,createDto:n}=at(),r=Tl(),i=Ne("client"),d=Ln()["signIn"],v=e({assert:!0}),p=v.plugins.auth,m=document.baseURI,g=v.app.baseUrl,y=A(n("Authenticate")),h=A(new Je),b=A(l.provider),x=(tt(()=>{null!=p&&p.authProviders.map(e=>e.formLayout).filter(e=>e).forEach(e=>e.forEach(e=>y.value[e.id]=""))}),f(()=>(null==p?void 0:p.authProviders.filter(e=>e.formLayout))||[])),C=f(()=>x.value[0]||{}),L=f(()=>x.value[Math.max(x.value.length-1,0)]||{}),V=f(()=>(b.value?null==p?void 0:p.authProviders.find(e=>e.name===b.value):null)??C.value),M=e=>!1===e||"false"===e;function S(e){return e.label||e.navItem&&e.navItem.label}const I=f(()=>{var e;return((null==(e=V.value)?void 0:e.formLayout)||[]).map(e=>{var t;return Object.assign({},e,{type:null==(t=e.type)?void 0:t.toLowerCase(),autocomplete:e.autocomplete||("password"===(null==(t=e.type)?void 0:t.toLowerCase())?"current-password":void 0)||("username"===e.id.toLowerCase()?"username":void 0),css:Object.assign({field:"col-span-12"},e.css)})})}),$=f(()=>!M(l.oauth)&&(null==p?void 0:p.authProviders.filter(e=>"oauth"===e.type))||[]),F=f(()=>{let e=Lo(null==p?void 0:p.authProviders.filter(e=>e.formLayout&&0<e.formLayout.length),(e,t)=>{e[S(t)||st(t.name)]=t.name===C.value.name?"":t.name});var t=V.value;return e=t&&M(l.tabs)?{[S(t)||st(t.name)]:t}:e}),B=f(()=>{var e=I.value.map(e=>e.id).filter(e=>e);return h.value.summaryMessage(e)});async function j(){var e;y.value.provider=V.value.name,"authsecret"===V.value.name?(i.headers.set("authsecret",y.value.authsecret),y.value=n("Authenticate")):"basic"===V.value.name&&(i.setCredentials(y.value.UserName,y.value.Password),y.value=n("Authenticate"),y.value.UserName=null,y.value.Password=null),h.value=await r.api(y.value),h.value.succeeded&&(e=h.value.response,d(e),t("login",e),h.value=new Je,y.value=n("Authenticate"))}return(e,t)=>{const l=X("ErrorSummary"),n=X("AutoFormFields"),r=X("PrimaryButton"),i=X("Icon"),d=ro("href");return o(p)?(a(),u("div",Zm,[s("div",Gm,[s("h2",Wm,T(c.title),1),1<Object.keys(o(F)).length?(a(),u("p",Jm,[s("span",Xm,[(a(!0),u(Te,null,Ie(o(F),(t,e)=>kt((a(),u("a",{onClick:e=>b.value=t,class:w([""===t||t===o(C).name?"rounded-l-md":t===o(L).name?"rounded-r-md -ml-px":"-ml-px",b.value===t?"z-10 outline-none ring-1 ring-indigo-500 border-indigo-500":"","cursor-pointer relative inline-flex items-center px-4 py-1 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"])},[we(T(e),1)],10,Ym)),[[d,{provider:t}]])),256))])])):k("",!0)]),s("div",ev,[o(B)?(a(),se(l,{key:0,class:"mb-3",errorSummary:o(B)},null,8,["errorSummary"])):k("",!0),s("div",tv,[o(I).length?(a(),u("form",{key:0,onSubmit:Ue(j,["prevent"])},[$e(n,{modelValue:y.value,formLayout:o(I),api:h.value,hideSummary:!0,"divide-class":"","space-class":"space-y-6"},null,8,["modelValue","formLayout","api"]),s("div",nv,[$e(r,{class:"w-full"},{default:ke(()=>[we("Sign In")]),_:1})])],40,lv)):k("",!0),o($).length?(a(),u("div",sv,[ov,s("div",av,[(a(!0),u(Te,null,Ie(o($),e=>(a(),u("div",null,[s("a",{href:o(g)+e.navItem.href+"?continue="+o(m),title:S(e),class:"w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"},[e.icon?(a(),se(i,{key:0,image:e.icon,class:"h-5 w-5 text-gray-700"},null,8,["image"])):(a(),u("svg",rv,cv))],8,iv)]))),256))])])):k("",!0)])])])):(a(),u("div",Km,"No Auth Plugin"))}}}),mv=["for"],vv={key:1,class:"border border-gray-200 flex justify-between"},hv={class:"p-2 flex flex-wrap gap-x-4"},gv=s("title",null,"Bold text (CTRL+B)",-1),pv=s("path",{fill:"currentColor",d:"M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79c0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79c0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"},null,-1),yv=[gv,pv],bv=s("title",null,"Italics (CTRL+I)",-1),wv=s("path",{fill:"currentColor",d:"M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8z"},null,-1),xv=[bv,wv],kv=s("title",null,"Insert Link (CTRL+K)",-1),$v=s("path",{fill:"currentColor",d:"M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5a5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8v2m9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1c0 1.71-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5a5 5 0 0 0-5-5Z"},null,-1),Cv=[kv,$v],_v=s("title",null,"Blockquote (CTRL+Q)",-1),Lv=s("path",{fill:"currentColor",d:"m15 17l2-4h-4V6h7v7l-2 4h-3Zm-9 0l2-4H4V6h7v7l-2 4H6Z"},null,-1),Vv=[_v,Lv],Sv=s("title",null,"Insert Image (CTRL+SHIFT+L)",-1),Mv=s("path",{fill:"currentColor",d:"M2.992 21A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992ZM20 15V5H4v14L14 9l6 6Zm0 2.828l-6-6L6.828 19H20v-1.172ZM8 11a2 2 0 1 1 0-4a2 2 0 0 1 0 4Z"},null,-1),Av=[Sv,Mv],Tv=s("title",null,"Insert Code (CTRL+<)",-1),Fv=s("path",{fill:"currentColor",d:"m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6L8 18Zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6l-6 6Z"},null,-1),Iv=[Tv,Fv],Dv=s("title",null,"H2 Heading (CTRL+H)",-1),jv=s("path",{fill:"currentColor",d:"M7 20V7H2V4h13v3h-5v13H7Zm9 0v-8h-3V9h9v3h-3v8h-3Z"},null,-1),Ov=[Dv,jv],Pv=s("title",null,"Numbered List (ALT+1)",-1),Bv=s("path",{fill:"currentColor",d:"M3 22v-1.5h2.5v-.75H4v-1.5h1.5v-.75H3V16h3q.425 0 .713.288T7 17v1q0 .425-.288.713T6 19q.425 0 .713.288T7 20v1q0 .425-.288.713T6 22H3Zm0-7v-2.75q0-.425.288-.713T4 11.25h1.5v-.75H3V9h3q.425 0 .713.288T7 10v1.75q0 .425-.288.713T6 12.75H4.5v.75H7V15H3Zm1.5-7V3.5H3V2h3v6H4.5ZM9 19v-2h12v2H9Zm0-6v-2h12v2H9Zm0-6V5h12v2H9Z"},null,-1),Rv=[Pv,Bv],Ev=s("title",null,"Bulleted List (ALT+-)",-1),Hv=s("path",{fill:"currentColor",d:"M9 19v-2h12v2H9Zm0-6v-2h12v2H9Zm0-6V5h12v2H9ZM5 20q-.825 0-1.413-.588T3 18q0-.825.588-1.413T5 16q.825 0 1.413.588T7 18q0 .825-.588 1.413T5 20Zm0-6q-.825 0-1.413-.588T3 12q0-.825.588-1.413T5 10q.825 0 1.413.588T7 12q0 .825-.588 1.413T5 14Zm0-6q-.825 0-1.413-.588T3 6q0-.825.588-1.413T5 4q.825 0 1.413.588T7 6q0 .825-.588 1.413T5 8Z"},null,-1),zv=[Ev,Hv],Nv=s("title",null,"Strike Through (ALT+S)",-1),Uv=s("path",{fill:"currentColor",d:"M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"},null,-1),qv=[Nv,Uv],Qv=s("title",null,"Undo (CTRL+Z)",-1),Kv=s("path",{fill:"currentColor",d:"M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88c3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"},null,-1),Zv=[Qv,Kv],Gv=s("title",null,"Redo (CTRL+SHIFT+Z)",-1),Wv=s("path",{fill:"currentColor",d:"M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16a8.002 8.002 0 0 1 7.6-5.5c1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"},null,-1),Jv=[Gv,Wv],Xv={key:0,class:"p-2 flex flex-wrap gap-x-4"},Yv=["href"],eh=s("path",{fill:"currentColor",d:"M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5c0-2.21-1.79-4-4-4z"},null,-1),th=[eh],lh={class:""},nh=["name","id","label","value","rows","disabled","onKeydown"],sh=["id"],oh=["id"],ah=ce({__name:"MarkdownInput",props:{status:null,id:null,inputClass:null,label:null,labelClass:null,help:null,placeholder:null,modelValue:null,counter:{type:Boolean},rows:null,errorMessages:null,lang:null,autoFocus:{type:Boolean},disabled:{type:Boolean},helpUrl:{default:"https://guides.github.com/features/mastering-markdown/"},hide:null},emits:["update:modelValue","close"],setup(n,{expose:e,emit:l}){const r=n;let g=[],y=[],t=Ne("ApiState",void 0);const i=f(()=>mt.call({responseStatus:r.status??(null==t?void 0:t.error.value)},r.id)),d=f(()=>r.label??He(st(r.id))),c="bold,italics,link,image,blockquote,code,heading,orderedList,unorderedList,strikethrough,undo,redo,help".split(","),v=f(()=>r.hide?wt(c,r.hide):wt(c,[]));function p(e){return v.value[e]}const m=f(()=>["shadow-sm font-mono"+nt.base.replace("rounded-md",""),i.value?"text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300":"text-gray-900 "+nt.valid,r.inputClass]),h="w-5 h-5 cursor-pointer select-none text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400",b=A();function x(e){l("update:modelValue",e)}function C(){return b.value.selectionStart!==b.value.selectionEnd}function L(){var e=b.value;return e.value.substring(e.selectionStart,e.selectionEnd)||""}function V(){var e=b.value,t=e.value,l=e.selectionStart,e=t.substring(l,e.selectionEnd)||"",a=t.substring(0,l),s=a.lastIndexOf(`
+`);return{value:t,sel:e,selPos:l,beforeSel:a,afterSel:t.substring(l),prevCRPos:s,beforeCR:0<=s?a.substring(0,s+1):"",afterCR:0<=s?a.substring(s+1):""}}function M({value:e,selectionStart:t,selectionEnd:l}){null==l&&(l=t),x(e),xt(()=>{b.value.focus(),b.value.setSelectionRange(t,l)})}function S(e,t,l="",{selectionAtEnd:a,offsetStart:s,offsetEnd:n,filterValue:o,filterSelection:r}={}){const i=b.value;let u=i.value,d=i.selectionEnd;g.push({value:u,selectionStart:i.selectionStart,selectionEnd:i.selectionEnd}),y=[];var c=i.selectionStart,v=i.selectionEnd,f=u.substring(0,c),p=u.substring(v),m=e&&f.endsWith(e)&&p.startsWith(t);c==v?(m?(u=f.substring(0,f.length-e.length)+p.substring(t.length),d+=-t.length):(u=f+e+l+t+p,d+=e.length,s=0,n=(null==l?void 0:l.length)||0,a&&(d+=n,n=0)),o&&(l={pos:d},u=o(u,l),d=l.pos)):(a=u.substring(c,v),r&&(a=r(a)),m?(u=f.substring(0,f.length-e.length)+a+p.substring(t.length),s=-a.length-e.length,n=a.length):(u=f+e+a+t+p,s?d+=(e+t).length:(d=c,s=e.length,n=a.length))),x(u),xt(()=>{i.focus(),s=d+(s||0),n=(s||0)+(n||0),i.setSelectionRange(s,n)})}e({props:r,textarea:b,updateModelValue:x,selection:L,hasSelection:C,selectionInfo:V,insert:S,replace:M});const I=()=>S("**","**","bold"),$=()=>S("_","_","italics"),F=()=>S("~~","~~","strikethrough"),B=()=>S("[","](https://)","",{offsetStart:-9,offsetEnd:8}),j=()=>S(`
+> `,`
+`,"Blockquote",{}),O=()=>S("![](",")");function H(e){var t=L();t&&!e.shiftKey?S("`","`","code"):(e=r.lang||"js",-1===t.indexOf(`
+`)?S("\n```"+e+`
+`,"\n```\n","// code"):S("```"+e+`
+`,"```\n",""))}function D(){if(C()){let{sel:e,beforeSel:a,afterSel:s,prevCRPos:n,beforeCR:o,afterCR:r}=V();if(-1===e.indexOf(`
+`))S(`
+ 1. `,`
+`);else if(e.startsWith(" 1. "))S("","","",{filterValue:(e,t)=>{var l;return 0<=n&&(l=r.replace(/^ - /,""),a=o+l,t.pos-=r.length-l.length),a+s},filterSelection:e=>e.replace(/^ 1. /g,"").replace(/\n \d+. /g,`
+`)});else{let t=1;S("",""," - ",{selectionAtEnd:!0,filterSelection:e=>" 1. "+e.replace(/\n$/,"").replace(/\n/g,e=>`
+ ${++t}. `)+`
+`})}}else S(`
+ 1. `,`
+`,"List Item",{offsetStart:-10,offsetEnd:9})}function E(){if(C()){let{sel:e,beforeSel:a,afterSel:s,prevCRPos:n,beforeCR:o,afterCR:r}=V();-1===e.indexOf(`
+`)?S(`
+ - `,`
+`):e.startsWith(" - ")?S("","","",{filterValue:(e,t)=>{var l;return 0<=n&&(l=r.replace(/^ - /,""),a=o+l,t.pos-=r.length-l.length),a+s},filterSelection:e=>e.replace(/^ - /g,"").replace(/\n - /g,`
+`)}):S("",""," - ",{selectionAtEnd:!0,filterSelection:e=>" - "+e.replace(/\n$/,"").replace(/\n/g,`
+ - `)+`
+`})}else S(`
+ - `,`
+`,"List Item",{offsetStart:-10,offsetEnd:9})}function z(){var e=L(),t=-1===e.indexOf(`
+`);e?t?S(`
+## `,`
+`,""):S("## ","",""):S(`
+## `,`
+`,"Heading",{offsetStart:-8,offsetEnd:7})}function _(){var e,t;return 0!==g.length&&(e=b.value,t=g.pop(),y.push({value:e.value,selectionStart:e.selectionStart,selectionEnd:e.selectionEnd}),M(t),!0)}function R(){var e,t;return 0!==y.length&&(e=b.value,t=y.pop(),g.push({value:e.value,selectionStart:e.selectionStart,selectionEnd:e.selectionEnd}),M(t),!0)}const N=()=>null;return tt(()=>{g=[],y=[],b.value.onkeydown=e=>{if("Escape"===e.key||27===e.keyCode)l("close");else{var t=String.fromCharCode(e.keyCode).toLowerCase();if("\t"===t)e.shiftKey?S("","","",{filterValue:(e,t)=>{let{beforeSel:l,afterSel:a,prevCRPos:s,beforeCR:n,afterCR:o}=V();var r;return 0<=s&&(r=o.replace(/\t/g,"    ").replace(/^ ? ? ? ?/,""),l=n+r,t.pos-=o.length-r.length),l+a},filterSelection:e=>e.replace(/\t/g,"    ").replace(/^ ? ? ? ?/g,"").replace(/\n    /g,`
+`)}):S("","","    ",{selectionAtEnd:!0,filterSelection:e=>"    "+e.replace(/\n$/,"").replace(/\n/g,`
+    `)+`
+`}),e.preventDefault();else if(e.ctrlKey)if("z"===t)e.shiftKey?R()&&e.preventDefault():_()&&e.preventDefault();else if("b"!==t||e.shiftKey)if("h"!==t||e.shiftKey)if("i"!==t||e.shiftKey)if("q"!==t||e.shiftKey)if("k"===t)(e.shiftKey?O:B)(),e.preventDefault();else if(","===t||"<"===e.key||">"===e.key||188===e.keyCode)H(e),e.preventDefault();else if("/"!==t&&"/"!==e.key)"?"!==t&&"?"!==e.key||!e.shiftKey||(S(`/*
+`,`*/
+`,""),e.preventDefault());else{{let{sel:e,selPos:t,beforeSel:a,afterSel:s,prevCRPos:n,beforeCR:o,afterCR:r}=V();e.startsWith("//")||r.startsWith("//")?S("","","",{filterValue:(e,t)=>{var l;return 0<=n&&(l=r.replace(/^\/\//,""),a=o+l,t.pos-=r.length-l.length),a+s},filterSelection:e=>e.replace(/^\/\//g,"").replace(/\n\/\//g,`
+`)}):e?S("","","//",{selectionAtEnd:!0,filterSelection:e=>"//"+e.replace(/\n$/,"").replace(/\n/g,`
+//`)+`
+`}):M({value:o+"//"+r+s,selectionStart:t+2})}e.preventDefault()}else j(),e.preventDefault();else $(),e.preventDefault();else z(),e.preventDefault();else I(),e.preventDefault();else e.altKey&&("1"===e.key||"0"===e.key?(D(),e.preventDefault()):"-"===e.key?(E(),e.preventDefault()):"s"===e.key&&(F(),e.preventDefault()))}}}),(e,t)=>{var l;return a(),u("div",null,[Z(e.$slots,"header",Me({inputElement:b.value,id:n.id,modelValue:n.modelValue,status:n.status},e.$attrs)),o(d)?(a(),u("label",{key:0,for:n.id,class:w("mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300 "+(n.labelClass??""))},T(o(d)),11,mv)):k("",!0),n.disabled?k("",!0):(a(),u("div",vv,[s("div",hv,[p("bold")?(a(),u("svg",{key:0,class:w(h),onClick:I,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},yv)):k("",!0),p("italics")?(a(),u("svg",{key:1,class:w(h),onClick:$,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},xv)):k("",!0),p("link")?(a(),u("svg",{key:2,class:w(h),onClick:B,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Cv)):k("",!0),p("blockquote")?(a(),u("svg",{key:3,class:w(h),onClick:j,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Vv)):k("",!0),p("image")?(a(),u("svg",{key:4,class:w(h),onClick:O,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Av)):k("",!0),p("code")?(a(),u("svg",{key:5,class:w(h),onClick:H,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Iv)):k("",!0),p("heading")?(a(),u("svg",{key:6,class:w(h),onClick:z,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Ov)):k("",!0),p("orderedList")?(a(),u("svg",{key:7,class:w(h),icon:"",onClick:D,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Rv)):k("",!0),p("unorderedList")?(a(),u("svg",{key:8,class:w(h),onClick:E,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},zv)):k("",!0),p("strikethrough")?(a(),u("svg",{key:9,class:w(h),onClick:F,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},qv)):k("",!0),p("undo")?(a(),u("svg",{key:10,class:w(h),onClick:_,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Zv)):k("",!0),p("redo")?(a(),u("svg",{key:11,class:w(h),onClick:R,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Jv)):k("",!0),Z(e.$slots,"toolbarbuttons",{instance:null==(l=Be())?void 0:l.exposed})]),p("help")&&n.helpUrl?(a(),u("div",Xv,[s("a",{title:"formatting help",target:"_blank",href:n.helpUrl,tabindex:"-1"},[(a(),u("svg",{class:w(h),xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},th))],8,Yv)])):k("",!0)])),s("div",lh,[s("textarea",{ref_key:"txt",ref:b,name:n.id,id:n.id,class:w(o(m)),label:n.label,value:n.modelValue,rows:n.rows||6,disabled:n.disabled,onInput:t[0]||(t[0]=e=>{return x((null==(e=e.target)?void 0:e.value)||"")}),onKeydown:Wn(N,["tab"])},null,42,nh)]),o(i)?(a(),u("p",{key:2,class:"mt-2 text-sm text-red-500",id:n.id+"-error"},T(o(i)),9,sh)):n.help?(a(),u("p",{key:3,class:"mt-2 text-sm text-gray-500",id:n.id+"-description"},T(n.help),9,oh)):k("",!0),Z(e.$slots,"footer",Me({inputElement:b.value,id:n.id,modelValue:n.modelValue,status:n.status},e.$attrs))])}}}),ih={key:0,class:"relative z-10 lg:hidden",role:"dialog","aria-modal":"true"},rh={class:"fixed inset-0 flex"},uh=s("span",{class:"sr-only"},"Close sidebar",-1),dh=s("svg",{class:"h-6 w-6 text-white",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[s("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})],-1),ch=[uh,dh],fh={class:"flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-2"},mh={class:"hidden lg:fixed lg:inset-y-0 lg:z-10 lg:flex lg:w-72 lg:flex-col"},vh={class:"flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6"},hh={class:w(["sticky top-0 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden"])},gh=s("span",{class:"sr-only"},"Open sidebar",-1),ph=s("svg",{class:"h-6 w-6",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[s("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"})],-1),yh=[gh,ph],bh=ce({__name:"SidebarLayout",setup(e,{expose:t}){const l=is()["transition"],n=A(!0),o=A(""),r={entering:{cls:"transition-opacity ease-linear duration-300",from:"opacity-0",to:"opacity-100"},leaving:{cls:"transition-opacity ease-linear duration-300",from:"opacity-100",to:"opacity-0"}},i=A(""),d={entering:{cls:"transition ease-in-out duration-300 transform",from:"-translate-x-full",to:"translate-x-0"},leaving:{cls:"transition ease-in-out duration-300 transform",from:"translate-x-0",to:"-translate-x-full"}},c=A(""),v={entering:{cls:"ease-in-out duration-300",from:"opacity-0",to:"opacity-100"},leaving:{cls:"ease-in-out duration-300",from:"opacity-100",to:"opacity-0"}};function f(e){l(r,o,e),l(d,i,e),l(v,c,e),setTimeout(()=>n.value=e,300)}function p(){f(!0)}function m(){f(!1)}return t({show:p,hide:m,toggle:f}),(e,t)=>(a(),u("div",null,[n.value?(a(),u("div",ih,[s("div",{class:w(["fixed inset-0 bg-gray-900/80",o.value])},null,2),s("div",rh,[s("div",{class:w(["relative mr-16 flex w-full max-w-xs flex-1",i.value])},[s("div",{class:w(["absolute left-full top-0 flex w-16 justify-center pt-5",c.value])},[s("button",{type:"button",onClick:m,class:"-m-2.5 p-2.5"},ch)],2),s("div",fh,[Z(e.$slots,"default")])],2)])])):k("",!0),s("div",mh,[s("div",vh,[Z(e.$slots,"default")])]),s("div",hh,[s("button",{type:"button",onClick:p,class:"-m-2.5 p-2.5 text-gray-700 lg:hidden"},yh),Z(e.$slots,"mobiletitlebar")])]))}}),wh={Alert:Ho,AlertSuccess:Yo,ErrorSummary:sa,InputDescription:aa,Icon:zs,Loading:Ya,OutlineButton:li,PrimaryButton:oi,SecondaryButton:ri,TextLink:di,Breadcrumbs:gi,Breadcrumb:xi,NavList:Ci,NavListItem:ji,AutoQueryGrid:sd,SettingsIcons:yd,FilterViews:Sn,FilterColumn:Vn,QueryPrefs:Mn,EnsureAccess:qs,EnsureAccessDialog:bd,TextInput:Md,TextareaInput:Od,SelectInput:zd,CheckboxInput:Wd,TagInput:bc,FileInput:zc,Autocomplete:s0,Combobox:i0,DynamicInput:r0,LookupInput:C0,AutoFormFields:_0,AutoForm:Z0,AutoCreateForm:yf,AutoEditForm:Hf,ConfirmDelete:Uf,FormLoading:Wf,DataGrid:t1,CellFormat:l1,PreviewFormat:r1,HtmlFormat:m1,CloseButton:y1,SlideOver:F1,ModalDialog:R1,ModalLookup:Fm,Tabs:Hm,DarkModeToggle:Qm,SignIn:fv,MarkdownInput:ah,SidebarLayout:bh},El=wh,Vh={install(t){function l(t){var e=Object.keys(t).filter(e=>t[e]).map(e=>encodeURIComponent(e)+"="+encodeURIComponent(t[e])).join("&");return e?"?"+e:"./"}Object.keys(El).forEach(e=>{t.component(e,El[e])}),t.directive("href",function(e,t){e.href=l(t.value),e.onclick=e=>{e.preventDefault(),history.pushState(t.value,"",l(t.value))}})},component(e,t){return e?t?ne.components[e]=t:ne.components[e]||El[e]||null:null}};export{Lh as css,Vh as default,Ln as useAuth,Tl as useClient,St as useConfig,Ch as useFiles,_h as useFormatters,at as useMetadata,is as useUtils};
\ No newline at end of file
diff --git a/MyApp/wwwroot/lib/mjs/servicestack-vue.mjs b/MyApp/wwwroot/lib/mjs/servicestack-vue.mjs
new file mode 100644
index 0000000..d7ae4df
--- /dev/null
+++ b/MyApp/wwwroot/lib/mjs/servicestack-vue.mjs
@@ -0,0 +1,7727 @@
+var lo = Object.defineProperty;
+var no = (e, t, l) => t in e ? lo(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l;
+var Ce = (e, t, l) => (no(e, typeof t != "symbol" ? t + "" : t, l), l);
+import { defineComponent as ce, computed as f, openBlock as a, createElementBlock as u, normalizeClass as w, unref as o, createElementVNode as s, createCommentVNode as k, renderSlot as Z, ref as A, toDisplayString as T, inject as Ne, nextTick as xt, isRef as Gn, mergeProps as Me, withModifiers as Ue, h as gt, resolveComponent as X, createBlock as se, withCtx as ke, useAttrs as so, createVNode as $e, createTextVNode as we, watchEffect as hl, normalizeStyle as Xl, Fragment as Te, renderList as Ie, withDirectives as kt, vModelCheckbox as Yl, withKeys as Wn, createStaticVNode as wl, vModelSelect as oo, useSlots as en, getCurrentInstance as Be, onMounted as tt, createSlots as tn, normalizeProps as jt, guardReactiveProps as gl, vModelDynamic as ao, onUnmounted as Rt, watch as Lt, vModelText as io, resolveDynamicComponent as Jn, provide as Xt, resolveDirective as ro } from "vue";
+import { errorResponseExcept as uo, dateFmt as Xn, toTime as co, omit as dt, enc as Hl, setQueryString as fo, appendQueryString as Kt, nameOf as mo, ApiResult as Je, lastRightPart as $t, leftPart as xl, map as qe, toDate as Vt, toDateTime as vo, toCamelCase as ho, mapGet as ye, chop as go, fromXsdDuration as Yn, isDate as kl, timeFmt12 as po, apiValue as yo, indexOfAny as bo, createBus as wo, toKebabCase as Nn, sanitize as xo, humanize as He, delaySet as es, rightPart as dl, queryString as zl, combinePaths as ko, toPascalCase as st, errorResponse as mt, trimEnd as $o, $1 as pl, lastLeftPart as Co, ResponseStatus as Bl, ResponseError as Un, HttpMethods as ln, omitEmpty as _o, uniqueKeys as Nl, humanify as ts, each as Lo } from "@servicestack/client";
+const Vo = { class: "flex items-center" }, So = {
+  key: 0,
+  class: "flex-shrink-0 mr-3"
+}, Mo = {
+  key: 0,
+  class: "h-5 w-5 text-yellow-400",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, Ao = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+  "clip-rule": "evenodd"
+}, null, -1), To = [
+  Ao
+], Fo = {
+  key: 1,
+  class: "h-5 w-5 text-red-400",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, Io = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",
+  "clip-rule": "evenodd"
+}, null, -1), Do = [
+  Io
+], jo = {
+  key: 2,
+  class: "h-5 w-5 text-blue-400",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, Oo = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M19 10.5a8.5 8.5 0 11-17 0 8.5 8.5 0 0117 0zM8.25 9.75A.75.75 0 019 9h.253a1.75 1.75 0 011.709 2.13l-.46 2.066a.25.25 0 00.245.304H11a.75.75 0 010 1.5h-.253a1.75 1.75 0 01-1.709-2.13l.46-2.066a.25.25 0 00-.245-.304H9a.75.75 0 01-.75-.75zM10 7a1 1 0 100-2 1 1 0 000 2z",
+  "clip-rule": "evenodd"
+}, null, -1), Po = [
+  Oo
+], Bo = {
+  key: 3,
+  class: "h-5 w-5 text-green-400",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, Ro = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
+  "clip-rule": "evenodd"
+}, null, -1), Eo = [
+  Ro
+], Ho = /* @__PURE__ */ ce({
+  __name: "Alert",
+  props: {
+    type: { default: "warn" },
+    hideIcon: { type: Boolean }
+  },
+  setup(e) {
+    const t = e, l = f(() => t.type == "info" ? "bg-blue-50 dark:bg-blue-200" : t.type == "error" ? "bg-red-50 dark:bg-red-200" : t.type == "success" ? "bg-green-50 dark:bg-green-200" : "bg-yellow-50 dark:bg-yellow-200"), n = f(() => t.type == "info" ? "border-blue-400" : t.type == "error" ? "border-red-400" : t.type == "success" ? "border-green-400" : "border-yellow-400"), i = f(() => t.type == "info" ? "text-blue-700" : t.type == "error" ? "text-red-700" : t.type == "success" ? "text-green-700" : "text-yellow-700");
+    return (r, d) => (a(), u("div", {
+      class: w([o(l), o(n), "border-l-4 p-4"])
+    }, [
+      s("div", Vo, [
+        e.hideIcon ? k("", !0) : (a(), u("div", So, [
+          e.type == "warn" ? (a(), u("svg", Mo, To)) : e.type == "error" ? (a(), u("svg", Fo, Do)) : e.type == "info" ? (a(), u("svg", jo, Po)) : e.type == "success" ? (a(), u("svg", Bo, Eo)) : k("", !0)
+        ])),
+        s("div", null, [
+          s("p", {
+            class: w([o(i), "text-sm"])
+          }, [
+            Z(r.$slots, "default")
+          ], 2)
+        ])
+      ])
+    ], 2));
+  }
+}), zo = {
+  key: 0,
+  class: "rounded-md bg-green-50 dark:bg-green-200 p-4",
+  role: "alert"
+}, No = { class: "flex" }, Uo = /* @__PURE__ */ s("div", { class: "flex-shrink-0" }, [
+  /* @__PURE__ */ s("svg", {
+    class: "h-5 w-5 text-green-400 dark:text-green-500",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, [
+    /* @__PURE__ */ s("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2",
+      d: "M5 13l4 4L19 7"
+    })
+  ])
+], -1), qo = { class: "ml-3" }, Qo = { class: "text-sm font-medium text-green-800" }, Ko = { key: 0 }, Zo = { class: "ml-auto pl-3" }, Go = { class: "-mx-1.5 -my-1.5" }, Wo = /* @__PURE__ */ s("span", { class: "sr-only" }, "Dismiss", -1), Jo = /* @__PURE__ */ s("svg", {
+  class: "h-5 w-5",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+], -1), Xo = [
+  Wo,
+  Jo
+], Yo = /* @__PURE__ */ ce({
+  __name: "AlertSuccess",
+  props: {
+    message: null
+  },
+  setup(e) {
+    const t = A(!1);
+    return (l, n) => t.value ? k("", !0) : (a(), u("div", zo, [
+      s("div", No, [
+        Uo,
+        s("div", qo, [
+          s("h3", Qo, [
+            e.message ? (a(), u("span", Ko, T(e.message), 1)) : Z(l.$slots, "default", { key: 1 })
+          ])
+        ]),
+        s("div", Zo, [
+          s("div", Go, [
+            s("button", {
+              type: "button",
+              class: "inline-flex rounded-md bg-green-50 dark:bg-green-200 p-1.5 text-green-500 dark:text-green-600 hover:bg-green-100 dark:hover:bg-green-700 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50 dark:ring-offset-green-200",
+              onClick: n[0] || (n[0] = (i) => t.value = !0)
+            }, Xo)
+          ])
+        ])
+      ])
+    ]));
+  }
+}), ea = { class: "flex" }, ta = /* @__PURE__ */ s("div", { class: "flex-shrink-0" }, [
+  /* @__PURE__ */ s("svg", {
+    class: "h-5 w-5 text-red-400",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, [
+    /* @__PURE__ */ s("path", {
+      fill: "currentColor",
+      d: "M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12S6.47 2 12 2m3.59 5L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z"
+    })
+  ])
+], -1), la = { class: "ml-3" }, na = { class: "text-sm text-red-700 dark:text-red-200" }, sa = /* @__PURE__ */ ce({
+  __name: "ErrorSummary",
+  props: {
+    status: null,
+    except: null,
+    class: null
+  },
+  setup(e) {
+    const t = e;
+    let l = Ne("ApiState", void 0);
+    const n = f(() => t.status || l != null && l.error.value ? uo.call({ responseStatus: t.status ?? (l == null ? void 0 : l.error.value) }, t.except ?? []) : null);
+    return (i, r) => o(n) ? (a(), u("div", {
+      key: 0,
+      class: w(`bg-red-50 dark:bg-red-900 border-l-4 border-red-400 p-4 ${i.$props.class}`)
+    }, [
+      s("div", ea, [
+        ta,
+        s("div", la, [
+          s("p", na, T(o(n)), 1)
+        ])
+      ])
+    ], 2)) : k("", !0);
+  }
+}), oa = ["id", "aria-describedby"], aa = /* @__PURE__ */ ce({
+  __name: "InputDescription",
+  props: {
+    id: null,
+    description: null
+  },
+  setup(e) {
+    return (t, l) => e.description ? (a(), u("div", {
+      key: "description",
+      class: "mt-2 text-sm text-gray-500",
+      id: `${e.id}-description`,
+      "aria-describedby": `${e.id}-description`
+    }, [
+      s("div", null, T(e.description), 1)
+    ], 8, oa)) : k("", !0);
+  }
+});
+function $l(e) {
+  return Xn(e).replace(/\//g, "-");
+}
+function ls(e) {
+  return e == null ? "" : co(e);
+}
+function ns(e, t) {
+  e.value = null, xt(() => e.value = t);
+}
+function Tt(e) {
+  return Object.keys(e).forEach((t) => {
+    const l = e[t];
+    e[t] = Gn(l) ? o(l) : l;
+  }), e;
+}
+function Ct(e, t, l) {
+  l ? (t.value = e.entering.cls + " " + e.entering.from, setTimeout(() => t.value = e.entering.cls + " " + e.entering.to, 0)) : (t.value = e.leaving.cls + " " + e.leaving.from, setTimeout(() => t.value = e.leaving.cls + " " + e.leaving.to, 0));
+}
+function cl(e) {
+  if (typeof document > "u")
+    return;
+  let t = (e == null ? void 0 : e.after) || document.activeElement, l = t && t.form;
+  if (l) {
+    let n = ':not([disabled]):not([tabindex="-1"])', i = l.querySelectorAll(`a:not([disabled]), button${n}, input[type=text]${n}, [tabindex]${n}`), r = Array.prototype.filter.call(
+      i,
+      (c) => c.offsetWidth > 0 || c.offsetHeight > 0 || c === t
+    ), d = r.indexOf(t);
+    d > -1 && (r[d + 1] || r[0]).focus();
+  }
+}
+function Et(e) {
+  if (!e)
+    return null;
+  if (typeof e == "string")
+    return e;
+  const t = typeof e == "function" ? new e() : typeof e == "object" ? e : null;
+  if (!t)
+    throw new Error(`Invalid DTO Type '${typeof e}'`);
+  if (typeof t.getTypeName != "function")
+    throw new Error(`${JSON.stringify(t)} is not a Request DTO`);
+  const l = t.getTypeName();
+  if (!l)
+    throw new Error("DTO Required");
+  return l;
+}
+function rt(e, t, l) {
+  l || (l = {});
+  let n = l.cls || l.className || l.class;
+  return n && (l = dt(l, ["cls", "class", "className"]), l.class = n), t == null ? `<${e}` + Ul(l) + "/>" : `<${e}` + Ul(l) + `>${t || ""}</${e}>`;
+}
+function Ul(e) {
+  return Object.keys(e).reduce((t, l) => `${t} ${l}="${Hl(e[l])}"`, "");
+}
+function Cl(e) {
+  return Object.assign({ target: "_blank", rel: "noopener", class: "text-blue-600" }, e);
+}
+function Dt(e) {
+  return kn(e);
+}
+let ia = ["string", "number", "boolean", "null", "undefined"];
+function _t(e) {
+  return ia.indexOf(typeof e) >= 0 || e instanceof Date;
+}
+function Zt(e) {
+  return !_t(e);
+}
+class ss {
+  get length() {
+    return typeof localStorage > "u" ? 0 : localStorage.length;
+  }
+  getItem(t) {
+    return typeof localStorage > "u" ? null : localStorage.getItem(t);
+  }
+  setItem(t, l) {
+    typeof localStorage > "u" || localStorage.setItem(t, l);
+  }
+  removeItem(t) {
+    typeof localStorage > "u" || localStorage.removeItem(t);
+  }
+  clear() {
+    typeof localStorage > "u" || localStorage.clear();
+  }
+  key(t) {
+    return typeof localStorage > "u" ? null : localStorage.key(t);
+  }
+}
+function yl(e) {
+  return typeof e == "string" ? JSON.parse(e) : null;
+}
+function nn(e) {
+  if (typeof history < "u") {
+    const t = fo(location.href, e);
+    history.pushState({}, "", t);
+  }
+}
+function sn(e, t) {
+  if (["function", "Function", "eval", "=>", ";"].some((i) => e.includes(i)))
+    throw new Error(`Unsafe script: '${e}'`);
+  const n = Object.assign(
+    Object.keys(globalThis).reduce((i, r) => (i[r] = void 0, i), {}),
+    t
+  );
+  return new Function("with(this) { return (" + e + ") }").call(n);
+}
+function ql(e) {
+  typeof navigator < "u" && navigator.clipboard.writeText(e);
+}
+function on(e) {
+  const t = ne.config.storage.getItem(e);
+  return t ? JSON.parse(t) : null;
+}
+function _l(e, t) {
+  return Kt(`swr.${mo(e)}`, t ? Object.assign({}, e, t) : e);
+}
+function ra(e) {
+  if (e.request) {
+    const t = _l(e.request, e.args);
+    ne.config.storage.removeItem(t);
+  }
+}
+async function os(e, t, l, n, i) {
+  const r = _l(t, n);
+  l(new Je({ response: on(r) }));
+  const d = await e.api(t, n, i);
+  if (d.succeeded && d.response) {
+    d.response._date = (/* @__PURE__ */ new Date()).valueOf();
+    const c = JSON.stringify(d.response);
+    ne.config.storage.setItem(r, c), l(d);
+  }
+  return d;
+}
+function as(e, t) {
+  let l = null;
+  return (...n) => {
+    l && clearTimeout(l), l = setTimeout(() => {
+      e(...n);
+    }, t || 100);
+  };
+}
+function pt(e) {
+  return typeof e == "string" ? e.split(",") : e || [];
+}
+function wt(e, t) {
+  const l = pt(t);
+  return e.reduce((n, i) => (n[i] = !l.includes(i), n), {});
+}
+function is() {
+  return {
+    LocalStore: ss,
+    dateInputFormat: $l,
+    timeInputFormat: ls,
+    setRef: ns,
+    unRefs: Tt,
+    transition: Ct,
+    focusNextElement: cl,
+    getTypeName: Et,
+    htmlTag: rt,
+    htmlAttrs: Ul,
+    linkAttrs: Cl,
+    toAppUrl: Dt,
+    isPrimitive: _t,
+    isComplexType: Zt,
+    pushState: nn,
+    scopedExpr: sn,
+    copyText: ql,
+    fromCache: on,
+    swrCacheKey: _l,
+    swrClear: ra,
+    swrApi: os,
+    asStrings: pt,
+    asOptions: wt,
+    createDebounce: as
+  };
+}
+const rs = "png,jpg,jpeg,jfif,gif,svg,webp".split(","), us = {
+  img: "png,jpg,jpeg,gif,svg,webp,png,jpg,jpeg,gif,bmp,tif,tiff,webp,ai,psd,ps".split(","),
+  vid: "avi,m4v,mov,mp4,mpg,mpeg,wmv,webm".split(","),
+  aud: "mp3,mpa,ogg,wav,wma,mid,webm".split(","),
+  ppt: "key,odp,pps,ppt,pptx".split(","),
+  xls: "xls,xlsm,xlsx,ods,csv,tsv".split(","),
+  doc: "doc,docx,pdf,rtf,tex,txt,md,rst,xls,xlsm,xlsx,ods,key,odp,pps,ppt,pptx".split(","),
+  zip: "zip,tar,gz,7z,rar,gzip,deflate,br,iso,dmg,z,lz,lz4,lzh,s7z,apl,arg,jar,war".split(","),
+  exe: "exe,bat,sh,cmd,com,app,msi,run,vb,vbs,js,ws,wsh".split(","),
+  att: "bin,oct,dat".split(",")
+  //attachment
+}, qn = Object.keys(us), ft = (e, t) => `<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' role='img' preserveAspectRatio='xMidYMid meet' viewBox='${e}'>${t}</svg>`, fl = {
+  img: ft("4 4 16 16", "<path fill='currentColor' d='M20 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-2 0H6v6.38l2.19-2.19l5.23 5.23l1-1a1.59 1.59 0 0 1 2.11.11L18 16V6zm-5 3.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0z'/>"),
+  vid: ft("0 0 24 24", "<path fill='currentColor' d='m14 2l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8m4 18V9h-5V4H6v16h12m-2-2l-2.5-1.7V18H8v-5h5.5v1.7L16 13v5Z'/>"),
+  aud: ft("0 0 24 24", "<path fill='currentColor' d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm10-9h-4v3.88a2.247 2.247 0 0 0-3.5 1.87c0 1.24 1.01 2.25 2.25 2.25S13 17.99 13 16.75V13h3v-2z'/>"),
+  ppt: ft("0 0 48 48", "<g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'><path d='M4 8h40'/><path d='M8 8h32v26H8V8Z' clip-rule='evenodd'/><path d='m22 16l5 5l-5 5m-6 16l8-8l8 8'/></g>"),
+  xls: ft("0 0 256 256", "<path fill='currentColor' d='M200 26H72a14 14 0 0 0-14 14v26H40a14 14 0 0 0-14 14v96a14 14 0 0 0 14 14h18v26a14 14 0 0 0 14 14h128a14 14 0 0 0 14-14V40a14 14 0 0 0-14-14Zm-42 76h44v52h-44Zm44-62v50h-44V80a14 14 0 0 0-14-14h-2V38h58a2 2 0 0 1 2 2ZM70 40a2 2 0 0 1 2-2h58v28H70ZM38 176V80a2 2 0 0 1 2-2h104a2 2 0 0 1 2 2v96a2 2 0 0 1-2 2H40a2 2 0 0 1-2-2Zm32 40v-26h60v28H72a2 2 0 0 1-2-2Zm130 2h-58v-28h2a14 14 0 0 0 14-14v-10h44v50a2 2 0 0 1-2 2ZM69.2 148.4L84.5 128l-15.3-20.4a6 6 0 1 1 9.6-7.2L92 118l13.2-17.6a6 6 0 0 1 9.6 7.2L99.5 128l15.3 20.4a6 6 0 0 1-9.6 7.2L92 138l-13.2 17.6a6 6 0 1 1-9.6-7.2Z'/>"),
+  doc: ft("0 0 32 32", "<path fill='currentColor' d='M26 30H11a2.002 2.002 0 0 1-2-2v-6h2v6h15V6h-9V4h9a2.002 2.002 0 0 1 2 2v22a2.002 2.002 0 0 1-2 2Z'/><path fill='currentColor' d='M17 10h7v2h-7zm-1 5h8v2h-8zm-1 5h9v2h-9zm-6-1a5.005 5.005 0 0 1-5-5V3h2v11a3 3 0 0 0 6 0V5a1 1 0 0 0-2 0v10H8V5a3 3 0 0 1 6 0v9a5.005 5.005 0 0 1-5 5z'/>"),
+  zip: ft("0 0 16 16", "<g fill='currentColor'><path d='M6.5 7.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v.938l.4 1.599a1 1 0 0 1-.416 1.074l-.93.62a1 1 0 0 1-1.109 0l-.93-.62a1 1 0 0 1-.415-1.074l.4-1.599V7.5zm2 0h-1v.938a1 1 0 0 1-.03.243l-.4 1.598l.93.62l.93-.62l-.4-1.598a1 1 0 0 1-.03-.243V7.5z'/><path d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm5.5-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9v1H8v1h1v1H8v1h1v1H7.5V5h-1V4h1V3h-1V2h1V1z'/></g>"),
+  exe: ft("0 0 16 16", "<path fill='currentColor' fill-rule='evenodd' d='M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM2.575 15.202H.785v-1.073H2.47v-.606H.785v-1.025h1.79v-.648H0v3.999h2.575v-.647ZM6.31 11.85h-.893l-.823 1.439h-.036l-.832-1.439h-.931l1.227 1.983l-1.239 2.016h.861l.853-1.415h.035l.85 1.415h.908l-1.254-1.992L6.31 11.85Zm1.025 3.352h1.79v.647H6.548V11.85h2.576v.648h-1.79v1.025h1.684v.606H7.334v1.073Z'/>"),
+  att: ft("0 0 24 24", "<path fill='currentColor' d='M14 0a5 5 0 0 1 5 5v12a7 7 0 1 1-14 0V9h2v8a5 5 0 0 0 10 0V5a3 3 0 1 0-6 0v12a1 1 0 1 0 2 0V6h2v11a3 3 0 1 1-6 0V5a5 5 0 0 1 5-5Z'/>")
+}, ua = /[\r\n%#()<>?[\\\]^`{|}]/g, Qn = 1024, da = ["Bytes", "KB", "MB", "GB", "TB"], ca = (() => {
+  const e = "application/", t = e + "vnd.openxmlformats-officedocument.", l = "image/", n = "text/", i = "audio/", r = "video/", d = {
+    jpg: l + "jpeg",
+    tif: l + "tiff",
+    svg: l + "svg+xml",
+    ico: l + "x-icon",
+    ts: n + "typescript",
+    py: n + "x-python",
+    sh: n + "x-sh",
+    mp3: i + "mpeg3",
+    mpg: r + "mpeg",
+    ogv: r + "ogg",
+    xlsx: t + "spreadsheetml.sheet",
+    xltx: t + "spreadsheetml.template",
+    docx: t + "wordprocessingml.document",
+    dotx: t + "wordprocessingml.template",
+    pptx: t + "presentationml.presentation",
+    potx: t + "presentationml.template",
+    ppsx: t + "presentationml.slideshow",
+    mdb: e + "vnd.ms-access"
+  };
+  function c(m, y) {
+    m.split(",").forEach((b) => d[b] = y);
+  }
+  function h(m, y) {
+    m.split(",").forEach((b) => d[b] = y(b));
+  }
+  return h("jpeg,gif,png,tiff,bmp,webp", (m) => l + m), h("jsx,csv,css", (m) => n + m), h("aac,ac3,aiff,m4a,m4b,m4p,mid,midi,wav", (m) => i + m), h("3gpp,avi,dv,divx,ogg,mp4,webm", (m) => r + m), h("rtf,pdf", (m) => e + m), c("htm,html,shtm", n + "html"), c("js,mjs,cjs", n + "javascript"), c("yml,yaml", e + "yaml"), c("bat,cmd", e + "bat"), c("xml,csproj,fsproj,vbproj", n + "xml"), c("txt,ps1", n + "plain"), c("qt,mov", r + "quicktime"), c("doc,dot", e + "msword"), c("xls,xlt,xla", e + "excel"), c("ppt,oit,pps,ppa", e + "vnd.ms-powerpoint"), c("cer,crt,der", e + "x-x509-ca-cert"), c("gz,tgz,zip,rar,lzh,z", e + "x-compressed"), c("aaf,aca,asd,bin,cab,chm,class,cur,db,dat,deploy,dll,dsp,exe,fla,ics,inf,mix,msi,mso,obj,ocx,prm,prx,psd,psp,qxd,sea,snp,so,sqlite,toc,ttf,u32,xmp,xsn,xtp", e + "octet-stream"), d;
+})();
+let Ql = [];
+function ds(e) {
+  return e = e.replace(/"/g, "'"), e = e.replace(/>\s+</g, "><"), e = e.replace(/\s{2,}/g, " "), e.replace(ua, encodeURIComponent);
+}
+function an(e) {
+  return "data:image/svg+xml;utf8," + ds(e);
+}
+function cs(e) {
+  let t = URL.createObjectURL(e);
+  return Ql.push(t), t;
+}
+function fs() {
+  Ql.forEach((e) => {
+    try {
+      URL.revokeObjectURL(e);
+    } catch (t) {
+      console.error("URL.revokeObjectURL", t);
+    }
+  }), Ql = [];
+}
+function rn(e) {
+  if (!e)
+    return null;
+  let t = xl(e, "?");
+  return $t(t, "/");
+}
+function Yt(e) {
+  let t = rn(e);
+  return t == null || t.indexOf(".") === -1 ? null : $t(t, ".").toLowerCase();
+}
+function un(e) {
+  let t = Yt(e.name);
+  return t && rs.indexOf(t) >= 0 ? cs(e) : yt(e.name);
+}
+function dn(e) {
+  if (!e)
+    return !1;
+  if (e.startsWith("blob:") || e.startsWith("data:"))
+    return !0;
+  let t = Yt(e);
+  return t && rs.indexOf(t) >= 0 || !1;
+}
+function yt(e) {
+  if (!e)
+    return null;
+  let t = Yt(e);
+  return t == null || dn(e) ? e : Qt(t) || an(fl.doc);
+}
+function Qt(e) {
+  let t = ms(e);
+  return t && an(t) || null;
+}
+function ms(e) {
+  if (fl[e])
+    return fl[e];
+  for (let t = 0; t < qn.length; t++) {
+    let l = qn[t];
+    if (us[l].indexOf(e) >= 0)
+      return fl[l];
+  }
+  return null;
+}
+function cn(e, t = 2) {
+  if (e === 0)
+    return "0 Bytes";
+  const l = t < 0 ? 0 : t, n = Math.floor(Math.log(e) / Math.log(Qn));
+  return parseFloat((e / Math.pow(Qn, n)).toFixed(l)) + " " + da[n];
+}
+function fa(e) {
+  return e.files && Array.from(e.files).map((t) => ({ fileName: t.name, contentLength: t.size, filePath: un(t) }));
+}
+function Ll(e, t) {
+  e.onerror = null, e.src = fn(e.src, t) || "";
+}
+function fn(e, t) {
+  return Qt($t(e, ".").toLowerCase()) || (t ? Qt(t) || t : null) || Qt("doc");
+}
+function Kl(e) {
+  if (!e)
+    throw new Error("fileNameOrExt required");
+  const t = $t(e, ".").toLowerCase();
+  return ca[t] || "application/" + t;
+}
+function Ch() {
+  return {
+    extSvg: ms,
+    extSrc: Qt,
+    getExt: Yt,
+    encodeSvg: ds,
+    canPreview: dn,
+    getFileName: rn,
+    getMimeType: Kl,
+    formatBytes: cn,
+    filePathUri: yt,
+    svgToDataUri: an,
+    fileImageUri: un,
+    objectUrl: cs,
+    flush: fs,
+    inputFiles: fa,
+    iconOnError: Ll,
+    iconFallbackSrc: fn
+  };
+}
+class ma {
+  constructor(t) {
+    Ce(this, "view");
+    Ce(this, "includeTypes");
+    Object.assign(this, t);
+  }
+  getTypeName() {
+    return "MetadataApp";
+  }
+  getMethod() {
+    return "GET";
+  }
+  createResponse() {
+    return {};
+  }
+}
+const Ot = "/metadata/app.json", va = {
+  Boolean: "checkbox",
+  DateTime: "date",
+  DateOnly: "date",
+  DateTimeOffset: "date",
+  TimeSpan: "time",
+  TimeOnly: "time",
+  Byte: "number",
+  Short: "number",
+  Int64: "number",
+  Int32: "number",
+  UInt16: "number",
+  UInt32: "number",
+  UInt64: "number",
+  Single: "number",
+  Double: "number",
+  Decimal: "number",
+  String: "text",
+  Guid: "text",
+  Uri: "text"
+}, ha = {
+  number: "Int32",
+  checkbox: "Boolean",
+  date: "DateTime",
+  "datetime-local": "DateTime",
+  time: "TimeSpan"
+}, Zl = {
+  Byte: "byte",
+  Int16: "short",
+  Int32: "int",
+  Int64: "long",
+  UInt16: "ushort",
+  Unt32: "uint",
+  UInt64: "ulong",
+  Single: "float",
+  Double: "double",
+  Decimal: "decimal"
+};
+[...Object.keys(Zl), ...Object.values(Zl)];
+const ga = {
+  String: "string",
+  Boolean: "bool",
+  ...Zl
+};
+function rl(e) {
+  return ga[e] || e;
+}
+function vs(e, t) {
+  return e ? (t || (t = []), e === "Nullable`1" ? rl(t[0]) + "?" : e.endsWith("[]") ? `List<${rl(e.substring(0, e.length - 2))}>` : t.length === 0 ? rl(e) : xl(rl(e), "`") + "<" + t.join(",") + ">") : "";
+}
+function pa(e) {
+  return e && vs(e.name, e.genericArgs);
+}
+class Pt {
+  constructor() {
+    Ce(this, "Query");
+    Ce(this, "QueryInto");
+    Ce(this, "Create");
+    Ce(this, "Update");
+    Ce(this, "Patch");
+    Ce(this, "Delete");
+  }
+  get AnyQuery() {
+    return this.Query || this.QueryInto;
+  }
+  get AnyUpdate() {
+    return this.Patch || this.Update;
+  }
+  toArray() {
+    return [this.Query, this.QueryInto, this.Create, this.Update, this.Patch, this.Delete].filter((l) => !!l).map((l) => l);
+  }
+  get empty() {
+    return !this.Query && !this.QueryInto && !this.Create && !this.Update && !this.Patch && !this.Delete;
+  }
+  add(t) {
+    ze.isQueryInto(t) && !this.QueryInto ? this.QueryInto = t : ze.isQuery(t) && !this.Query ? this.Query = t : ze.isCreate(t) && !this.Create ? this.Create = t : ze.isUpdate(t) && !this.Update ? this.Update = t : ze.isPatch(t) && !this.Patch ? this.Patch = t : ze.isDelete(t) && !this.Delete && (this.Delete = t);
+  }
+  static from(t) {
+    const l = new Pt();
+    return t.forEach((n) => {
+      l.add(n);
+    }), l;
+  }
+  static forType(t, l) {
+    var i;
+    let n = new Pt();
+    return t && (l ?? (l = (i = ne.metadata.value) == null ? void 0 : i.api), l == null || l.operations.forEach((r) => {
+      var d;
+      ((d = r.dataModel) == null ? void 0 : d.name) == t && n.add(r);
+    })), n;
+  }
+}
+const ze = {
+  Create: "ICreateDb`1",
+  Update: "IUpdateDb`1",
+  Patch: "IPatchDb`1",
+  Delete: "IDeleteDb`1",
+  AnyRead: ["QueryDb`1", "QueryDb`2"],
+  AnyWrite: ["ICreateDb`1", "IUpdateDb`1", "IPatchDb`1", "IDeleteDb`1"],
+  isAnyQuery: (e) => qe(e.request.inherits, (t) => ze.AnyRead.indexOf(t.name) >= 0),
+  isQuery: (e) => qe(e.request.inherits, (t) => t.name === "QueryDb`1"),
+  isQueryInto: (e) => qe(e.request.inherits, (t) => t.name === "QueryDb`2"),
+  isCrud: (e) => {
+    var t;
+    return (t = e.request.implements) == null ? void 0 : t.some((l) => ze.AnyWrite.indexOf(l.name) >= 0);
+  },
+  isCreate: (e) => ul(e, ze.Create),
+  isUpdate: (e) => ul(e, ze.Update),
+  isPatch: (e) => ul(e, ze.Patch),
+  isDelete: (e) => ul(e, ze.Delete),
+  model: (e) => {
+    var t, l, n;
+    return e ? qe(e.inherits, (i) => ze.AnyRead.indexOf(i.name) >= 0) ? (t = e.inherits) == null ? void 0 : t.genericArgs[0] : (n = (l = e.implements) == null ? void 0 : l.find((i) => ze.AnyWrite.indexOf(i.name) >= 0)) == null ? void 0 : n.genericArgs[0] : null;
+  }
+};
+function ya(e) {
+  var t;
+  return ((t = e.input) == null ? void 0 : t.type) || Vl(mn(e));
+}
+function hs(e) {
+  return e.endsWith("?") ? go(e, 1) : e;
+}
+function Vl(e) {
+  return va[hs(e)];
+}
+function ba(e) {
+  return e && ha[e] || "String";
+}
+function mn(e) {
+  return e.type === "Nullable`1" ? e.genericArgs[0] : e.type;
+}
+function Gl(e) {
+  return e && Vl(e) == "number" || !1;
+}
+function gs(e) {
+  return e && e.toLowerCase() == "string" || !1;
+}
+function wa(e) {
+  return e == "List`1" || e.startsWith("List<") || e.endsWith("[]");
+}
+function ps(e) {
+  if (!(e != null && e.type))
+    return !1;
+  const t = mn(e);
+  return e.isValueType && t.indexOf("`") == -1 || e.isEnum ? !1 : Vl(e.type) == null;
+}
+function ys(e) {
+  var l, n, i, r;
+  if (!(e != null && e.type))
+    return !1;
+  const t = mn(e);
+  return e.isValueType && t.indexOf("`") == -1 || e.isEnum || ((l = e.input) == null ? void 0 : l.type) == "hidden" || ((n = e.input) == null ? void 0 : n.type) == "file" || ((i = e.input) == null ? void 0 : i.type) == "tag" || ((r = e.input) == null ? void 0 : r.type) == "combobox" ? !0 : Vl(e.type) != null;
+}
+function Gt(e, t) {
+  let l = typeof e == "string" ? Sl(e) : e;
+  l || (console.warn(`Metadata not found for: ${e}`), l = { request: { name: e } });
+  let n = (
+    /** @class */
+    function() {
+      return function(r) {
+        Object.assign(this, r);
+      };
+    }()
+  ), i = (
+    /** @class */
+    function() {
+      function r(d) {
+        Object.assign(this, d);
+      }
+      return r.prototype.createResponse = function() {
+        return l.returnsVoid ? void 0 : new n();
+      }, r.prototype.getTypeName = function() {
+        return l.request.name;
+      }, r.prototype.getMethod = function() {
+        return l.method || "POST";
+      }, r;
+    }()
+  );
+  return new i(t);
+}
+function xa(e, t, l = {}) {
+  let n = (
+    /** @class */
+    function() {
+      return function(r) {
+        Object.assign(this, r);
+      };
+    }()
+  ), i = (
+    /** @class */
+    function() {
+      function r(d) {
+        Object.assign(this, d);
+      }
+      return r.prototype.createResponse = function() {
+        return typeof l.createResponse == "function" ? l.createResponse() : new n();
+      }, r.prototype.getTypeName = function() {
+        return e;
+      }, r.prototype.getMethod = function() {
+        return l.method || "POST";
+      }, r;
+    }()
+  );
+  return new i(t);
+}
+function ml(e, t) {
+  return e ? (Object.keys(e).forEach((l) => {
+    let n = e[l];
+    typeof n == "string" ? n.startsWith("/Date") && (e[l] = $l(Vt(n))) : n != null && typeof n == "object" && (Array.isArray(n) ? e[l] = Array.from(n) : e[l] = Object.assign({}, n));
+  }), e) : {};
+}
+function ka(e, t) {
+  let l = {};
+  return Array.from(e.elements).forEach((n) => {
+    var y;
+    let i = n;
+    if (!i.id || i.value == null || i.value === "")
+      return;
+    const r = i.id.toLowerCase(), d = t && t.find((b) => b.name.toLowerCase() == r);
+    let c = d == null ? void 0 : d.type, h = (y = d == null ? void 0 : d.genericArgs) == null ? void 0 : y[0], m = i.type === "checkbox" ? i.checked : i.value;
+    Gl(c) ? m = Number(m) : c === "List`1" && typeof m == "string" && (m = m.split(",").map((b) => Gl(h) ? Number(b) : b)), l[i.id] = m;
+  }), l;
+}
+function vn(e) {
+  var t;
+  return ((t = e == null ? void 0 : e.api) == null ? void 0 : t.operations) && e.api.operations.length > 0;
+}
+function $a(e) {
+  if (!hn() && (e != null && e.assert) && !ne.metadata.value)
+    throw new Error("useMetadata() not configured, see: https://docs.servicestack.net/vue/use-metadata");
+  return ne.metadata.value;
+}
+function Wt(e) {
+  return e && vn(e) ? (e.date = vo(/* @__PURE__ */ new Date()), ne.metadata.value = e, typeof localStorage < "u" && localStorage.setItem(Ot, JSON.stringify(e)), !0) : !1;
+}
+function Ca() {
+  ne.metadata.value = null, typeof localStorage < "u" && localStorage.removeItem(Ot);
+}
+function hn() {
+  if (ne.metadata.value != null)
+    return !0;
+  let e = globalThis.Server;
+  if (vn(e))
+    Wt(e);
+  else {
+    const t = typeof localStorage < "u" ? localStorage.getItem(Ot) : null;
+    if (t)
+      try {
+        Wt(JSON.parse(t));
+      } catch {
+        console.error(`Could not JSON.parse ${Ot} from localStorage`);
+      }
+  }
+  return ne.metadata.value != null;
+}
+async function Kn(e, t) {
+  let l = t ? await t() : await fetch(e);
+  if (l.ok) {
+    let n = await l.text();
+    Wt(JSON.parse(n));
+  } else
+    console.error(`Could not download ${t ? "AppMetadata" : e}: ${l.statusText}`);
+  vn(ne.metadata.value) || console.warn("AppMetadata is not available");
+}
+async function _a(e) {
+  var r;
+  const { olderThan: t, resolvePath: l, resolve: n } = e || {};
+  let i = hn() && t !== 0;
+  if (i && t) {
+    let d = Vt((r = ne.metadata.value) == null ? void 0 : r.date);
+    (!d || (/* @__PURE__ */ new Date()).getTime() - d.getTime() > t) && (i = !1);
+  }
+  if (!i) {
+    if ((l || n) && (await Kn(l || Ot, n), ne.metadata.value != null))
+      return;
+    const d = Ne("client");
+    if (d != null) {
+      const c = await d.api(new ma());
+      c.succeeded && Wt(c.response);
+    }
+    if (ne.metadata.value != null)
+      return;
+    await Kn(Ot);
+  }
+  return ne.metadata.value;
+}
+function ot(e, t) {
+  var d;
+  let l = (d = ne.metadata.value) == null ? void 0 : d.api;
+  if (!l || !e)
+    return null;
+  let n = l.types.find((c) => c.name.toLowerCase() === e.toLowerCase() && (!t || c.namespace == t));
+  if (n)
+    return n;
+  let i = Sl(e);
+  if (i)
+    return i.request;
+  let r = l.operations.find((c) => c.response && c.response.name.toLowerCase() === e.toLowerCase() && (!t || c.response.namespace == t));
+  return r ? r.response : null;
+}
+function Sl(e) {
+  var n;
+  let t = (n = ne.metadata.value) == null ? void 0 : n.api;
+  return t ? t.operations.find((i) => i.request.name.toLowerCase() === e.toLowerCase()) : null;
+}
+function La({ dataModel: e }) {
+  var n;
+  const t = (n = ne.metadata.value) == null ? void 0 : n.api;
+  if (!t)
+    return [];
+  let l = t.operations;
+  if (e) {
+    const i = typeof e == "string" ? ot(e) : e;
+    l = l.filter((r) => bs(r.dataModel, i));
+  }
+  return l;
+}
+function gn(e) {
+  return e ? ot(e.name, e.namespace) : null;
+}
+function bs(e, t) {
+  return e && t && e.name === t.name && (!e.namespace || !t.namespace || e.namespace === t.namespace);
+}
+function Va(e, t) {
+  let l = ot(e);
+  return l && l.properties && l.properties.find((i) => i.name.toLowerCase() === t.toLowerCase());
+}
+function ws(e) {
+  return xs(ot(e));
+}
+function xs(e) {
+  if (e && e.isEnum && e.enumNames != null) {
+    let t = {};
+    for (let l = 0; l < e.enumNames.length; l++) {
+      const n = (e.enumDescriptions ? e.enumDescriptions[l] : null) || e.enumNames[l], i = (e.enumValues != null ? e.enumValues[l] : null) || e.enumNames[l];
+      t[i] = n;
+    }
+    return t;
+  }
+  return null;
+}
+function ks(e) {
+  if (!e)
+    return null;
+  let t = {}, l = e.input && e.input.allowableEntries;
+  if (l) {
+    for (let i = 0; i < l.length; i++) {
+      let r = l[i];
+      t[r.key] = r.value;
+    }
+    return t;
+  }
+  let n = e.allowableValues || (e.input ? e.input.allowableValues : null);
+  if (n) {
+    for (let i = 0; i < n.length; i++) {
+      let r = n[i];
+      t[r] = r;
+    }
+    return t;
+  }
+  if (e.isEnum) {
+    const i = e.genericArgs && e.genericArgs.length == 1 ? e.genericArgs[0] : e.type, r = ot(i);
+    if (r)
+      return xs(r);
+  }
+  return null;
+}
+function pn(e) {
+  if (!e)
+    return;
+  const t = [];
+  return Object.keys(e).forEach((l) => t.push({ key: l, value: e[l] })), t;
+}
+function Sa(e, t) {
+  const n = ((i, r) => Object.assign({
+    id: i,
+    name: i,
+    type: r
+  }, t))(e.name, (t == null ? void 0 : t.type) || ya(e) || "text");
+  return e.isEnum && (n.type = "select", n.allowableEntries = pn(ks(e))), n;
+}
+function Ma(e) {
+  let t = [];
+  if (e) {
+    const l = et(e), n = Sl(e.name), i = gn(n == null ? void 0 : n.dataModel);
+    l.forEach((r) => {
+      var c, h, m;
+      if (!ys(r))
+        return;
+      const d = Sa(r, r.input);
+      if (d.id = ho(d.id), d.type == "file" && r.uploadTo && !d.accept) {
+        const y = (h = (c = ne.metadata.value) == null ? void 0 : c.plugins.filesUpload) == null ? void 0 : h.locations.find((b) => b.name == r.uploadTo);
+        y && !d.accept && y.allowExtensions && (d.accept = y.allowExtensions.map((b) => b.startsWith(".") ? b : `.${b}`).join(","));
+      }
+      if (i) {
+        const y = (m = i.properties) == null ? void 0 : m.find((b) => b.name == r.name);
+        r.ref || (r.ref = y == null ? void 0 : y.ref);
+      }
+      if (d.options)
+        try {
+          const y = {
+            input: d,
+            $typeFields: l.map((p) => p.name),
+            $dataModelFields: i ? et(i).map((p) => p.name) : [],
+            ...ne.config.scopeWhitelist
+          }, b = sn(d.options, y);
+          Object.keys(b).forEach((p) => {
+            d[p] = b[p];
+          });
+        } catch {
+          console.error(`failed to evaluate '${d.options}'`);
+        }
+      t.push(d);
+    });
+  }
+  return t;
+}
+function yn(e, t) {
+  var i, r;
+  if (!t.type)
+    return console.error("enumDescriptions missing {type:'EnumType'} options"), [`${e}`];
+  const l = ot(t.type);
+  if (!(l != null && l.enumValues))
+    return console.error(`Could not find metadata for ${t.type}`), [`${e}`];
+  const n = [];
+  for (let d = 0; d < l.enumValues.length; d++) {
+    const c = parseInt(l.enumValues[d]);
+    c > 0 && (c & e) === c && n.push(((i = l.enumDescriptions) == null ? void 0 : i[d]) || ((r = l.enumNames) == null ? void 0 : r[d]) || `${e}`);
+  }
+  return n;
+}
+function $s(e) {
+  return (t) => typeof t == "number" ? yn(t, { type: e }) : t;
+}
+function et(e) {
+  if (!e)
+    return [];
+  let t = [], l = {};
+  function n(i) {
+    i.forEach((r) => {
+      l[r.name] || (l[r.name] = 1, t.push(r));
+    });
+  }
+  for (; e; )
+    e.properties && n(e.properties), e = e.inherits ? gn(e.inherits) : null;
+  return t.map((i) => i.type.endsWith("[]") ? { ...i, type: "List`1", genericArgs: [i.type.substring(0, i.type.length - 2)] } : i);
+}
+function ul(e, t) {
+  var l;
+  return ((l = e.request.implements) == null ? void 0 : l.some((n) => n.name === t)) || !1;
+}
+function el(e) {
+  return e ? Cs(e, et(e)) : null;
+}
+function Cs(e, t) {
+  let l = t.find((r) => r.name.toLowerCase() === "id");
+  if (l && l.isPrimaryKey)
+    return l;
+  let i = t.find((r) => r.isPrimaryKey) || l;
+  if (!i) {
+    let r = ze.model(e);
+    if (r)
+      return qe(ot(r), (d) => el(d));
+    console.error(`Primary Key not found in ${e.name}`);
+  }
+  return i || null;
+}
+function Aa(e, t) {
+  return qe(el(e), (l) => ye(t, l.name));
+}
+function _s(e, t, l) {
+  return e && e.valueType === "none" ? "" : l.key === "%In" || l.key === "%Between" ? `(${l.value})` : Ta(t, l.value);
+}
+function Ta(e, t) {
+  return e ? (e = hs(e), Gl(e) || e === "Boolean" ? t : wa(e) ? `[${t}]` : `'${t}'`) : t;
+}
+function at() {
+  const e = f(() => {
+    var n;
+    return ((n = ne.metadata.value) == null ? void 0 : n.app) || null;
+  }), t = f(() => {
+    var n;
+    return ((n = ne.metadata.value) == null ? void 0 : n.api) || null;
+  }), l = f(() => {
+    var n;
+    return ((n = ne.metadata.value) == null ? void 0 : n.plugins.autoQuery.viewerConventions) || [];
+  });
+  return hn(), {
+    loadMetadata: _a,
+    getMetadata: $a,
+    setMetadata: Wt,
+    clearMetadata: Ca,
+    metadataApp: e,
+    metadataApi: t,
+    filterDefinitions: l,
+    typeOf: ot,
+    typeOfRef: gn,
+    typeEquals: bs,
+    apiOf: Sl,
+    findApis: La,
+    typeName: pa,
+    typeName2: vs,
+    property: Va,
+    enumOptions: ws,
+    propertyOptions: ks,
+    createFormLayout: Ma,
+    typeProperties: et,
+    supportsProp: ys,
+    Crud: ze,
+    Apis: Pt,
+    getPrimaryKey: el,
+    getPrimaryKeyByProps: Cs,
+    getId: Aa,
+    createDto: Gt,
+    makeDto: xa,
+    toFormValues: ml,
+    formValues: ka,
+    isComplexProp: ps,
+    asKvps: pn,
+    expandEnumFlags: yn,
+    enumFlagsConverter: $s
+  };
+}
+const Xe = class Xe {
+  static async getOrFetchValue(t, l, n, i, r, d, c) {
+    const h = Xe.getValue(n, c, r);
+    return h ?? (await Xe.fetchLookupIds(t, l, n, i, r, d, [c]), Xe.getValue(n, c, r));
+  }
+  static getValue(t, l, n) {
+    const i = Xe.Lookup[t];
+    if (i) {
+      const r = i[l];
+      if (r)
+        return n = n.toLowerCase(), r[n];
+    }
+  }
+  static setValue(t, l, n, i) {
+    const r = Xe.Lookup[t] ?? (Xe.Lookup[t] = {}), d = r[l] ?? (r[l] = {});
+    n = n.toLowerCase(), d[n] = i;
+  }
+  static setRefValue(t, l) {
+    const n = ye(l, t.refId);
+    if (n == null || t.refLabel == null)
+      return null;
+    const i = ye(l, t.refLabel);
+    return Xe.setValue(t.model, n, t.refLabel, i), i;
+  }
+  static async fetchLookupIds(t, l, n, i, r, d, c) {
+    const h = l.operations.find((m) => {
+      var y;
+      return ze.isAnyQuery(m) && ((y = m.dataModel) == null ? void 0 : y.name) == n;
+    });
+    if (h) {
+      const m = Xe.Lookup[n] ?? (Xe.Lookup[n] = {}), y = [];
+      Object.keys(m).forEach((N) => {
+        const ee = m[N];
+        ye(ee, r) && y.push(N);
+      });
+      const b = c.filter((N) => !y.includes(N));
+      if (b.length == 0)
+        return;
+      const p = d ? null : `${i},${r}`, v = {
+        [i + "In"]: b.join(",")
+      };
+      p && (v.fields = p);
+      const g = Gt(h, v), P = await t.api(g, { jsconfig: "edv,eccn" });
+      if (P.succeeded)
+        (ye(P.response, "results") || []).forEach((ee) => {
+          if (!ye(ee, i)) {
+            console.error(`result[${i}] == null`, ee);
+            return;
+          }
+          const j = `${ye(ee, i)}`, z = ye(ee, r);
+          r = r.toLowerCase();
+          const F = m[j] ?? (m[j] = {});
+          F[r] = `${z}`;
+        });
+      else {
+        console.error(`Failed to call ${h.request.name}`);
+        return;
+      }
+    }
+  }
+};
+Ce(Xe, "Lookup", {});
+let Ft = Xe, Wl = () => (/* @__PURE__ */ new Date()).getTime(), Fa = ["/", "T", ":", "-"], ut = {
+  //locale: null,
+  assumeUtc: !0,
+  //number: null,
+  date: {
+    method: "Intl.DateTimeFormat",
+    options: "{dateStyle:'medium'}"
+  },
+  maxFieldLength: 150,
+  maxNestedFields: 2,
+  maxNestedFieldLength: 30
+}, Ia = new Intl.RelativeTimeFormat(ut.locale, {}), Zn = 24 * 60 * 60 * 1e3 * 365, Rl = {
+  year: Zn,
+  month: Zn / 12,
+  day: 24 * 60 * 60 * 1e3,
+  hour: 60 * 60 * 1e3,
+  minute: 60 * 1e3,
+  second: 1e3
+}, bt = {
+  currency: Vs,
+  bytes: Ss,
+  link: Ms,
+  linkTel: As,
+  linkMailTo: Ts,
+  icon: Fs,
+  iconRounded: Is,
+  attachment: Ds,
+  hidden: js,
+  time: Os,
+  relativeTime: wn,
+  relativeTimeFromMs: Ml,
+  enumFlags: Bs,
+  formatDate: Ht,
+  formatNumber: bn
+};
+"iconOnError" in globalThis || (globalThis.iconOnError = Ll);
+class Ke {
+}
+Ce(Ke, "currency", { method: "currency" }), Ce(Ke, "bytes", { method: "bytes" }), Ce(Ke, "link", { method: "link" }), Ce(Ke, "linkTel", { method: "linkTel" }), Ce(Ke, "linkMailTo", { method: "linkMailTo" }), Ce(Ke, "icon", { method: "icon" }), Ce(Ke, "iconRounded", { method: "iconRounded" }), Ce(Ke, "attachment", { method: "attachment" }), Ce(Ke, "time", { method: "time" }), Ce(Ke, "relativeTime", { method: "relativeTime" }), Ce(Ke, "relativeTimeFromMs", { method: "relativeTimeFromMs" }), Ce(Ke, "date", { method: "formatDate" }), Ce(Ke, "number", { method: "formatNumber" }), Ce(Ke, "hidden", { method: "hidden" }), Ce(Ke, "enumFlags", { method: "enumFlags" });
+function Da(e) {
+  ut = Object.assign({}, ut, e);
+}
+function ja(e) {
+  Object.keys(e || {}).forEach((t) => {
+    typeof e[t] == "function" && (bt[t] = e[t]);
+  });
+}
+function Ls() {
+  return bt;
+}
+function tl(e, t) {
+  return t ? rt("span", e, t) : e;
+}
+function Vs(e, t) {
+  const l = dt(t, ["currency"]);
+  return tl(new Intl.NumberFormat(void 0, { style: "currency", currency: (t == null ? void 0 : t.currency) || "USD" }).format(e), l);
+}
+function Ss(e, t) {
+  return tl(cn(e), t);
+}
+function Ms(e, t) {
+  return rt("a", e, Cl({ ...t, href: e }));
+}
+function As(e, t) {
+  return rt("a", e, Cl({ ...t, href: `tel:${e}` }));
+}
+function Ts(e, t) {
+  t || (t = {});
+  let { subject: l, body: n } = t, i = dt(t, ["subject", "body"]), r = {};
+  return l && (r.subject = l), n && (r.body = n), rt("a", e, Cl({ ...i, href: `mailto:${Kt(e, r)}` }));
+}
+function Fs(e, t) {
+  return rt("img", void 0, Object.assign({ class: "w-6 h-6", title: e, src: Dt(e), onerror: "iconOnError(this)" }, t));
+}
+function Is(e, t) {
+  return rt("img", void 0, Object.assign({ class: "w-8 h-8 rounded-full", title: e, src: Dt(e), onerror: "iconOnError(this)" }, t));
+}
+function Ds(e, t) {
+  let l = rn(e), i = Yt(l) == null || dn(e) ? Dt(e) : fn(e);
+  const r = Dt(i);
+  let d = t && (t["icon-class"] || t.iconClass), c = rt("img", void 0, Object.assign({ class: "w-6 h-6", src: r, onerror: "iconOnError(this,'att')" }, d ? { class: d } : null)), h = `<span class="pl-1">${l}</span>`;
+  return rt("a", c + h, Object.assign({ class: "flex", href: Dt(e), title: e }, t ? dt(t, ["icon-class", "iconClass"]) : null));
+}
+function js(e) {
+  return "";
+}
+function Os(e, t) {
+  let l = typeof e == "string" ? new Date(Yn(e) * 1e3) : kl(e) ? Vt(e) : null;
+  return tl(l ? po(l) : e, t);
+}
+function Ht(e, t) {
+  if (e == null)
+    return "";
+  let l = typeof e == "number" ? new Date(e) : typeof e == "string" ? Vt(e) : e;
+  if (!kl(l))
+    return console.warn(`${l} is not a Date value`), e == null ? "" : `${e}`;
+  let n = ut.date ? Al(ut.date) : null;
+  return tl(typeof n == "function" ? n(l) : Xn(l), t);
+}
+function bn(e, t) {
+  if (typeof e != "number")
+    return e;
+  let l = ut.number ? Al(ut.number) : null, n = typeof l == "function" ? l(e) : `${e}`;
+  return n === "" && (console.warn(`formatNumber(${e}) => ${n}`, l), n = `${e}`), tl(n, t);
+}
+function Ps(e, t, l) {
+  let n = yo(e), i = t ? Al(t) : null;
+  if (typeof i == "function") {
+    let d = l;
+    if (t != null && t.options)
+      try {
+        d = sn(t.options, l);
+      } catch (c) {
+        console.error(`Could not evaluate '${t.options}'`, c, ", with scope:", l);
+      }
+    return i(e, d);
+  }
+  let r = n != null ? kl(n) ? Ht(n, l) : typeof n == "number" ? bn(n, l) : n : null;
+  return r ?? "";
+}
+function Jt(e, t, l) {
+  return _t(e) ? Ps(e, t, l) : Ea(e, t, l);
+}
+function Oa(e) {
+  if (e == null)
+    return NaN;
+  if (typeof e == "number")
+    return e;
+  if (kl(e))
+    return e.getTime() - Wl();
+  if (typeof e == "string") {
+    let t = Number(e);
+    if (!isNaN(t))
+      return t;
+    if (e[0] === "P" || e.startsWith("-P"))
+      return Yn(e) * 1e3 * -1;
+    if (bo(e, Fa) >= 0)
+      return Vt(e).getTime() - Wl();
+  }
+  return NaN;
+}
+function Ml(e, t) {
+  for (let l in Rl)
+    if (Math.abs(e) > Rl[l] || l === "second")
+      return (t || Ia).format(Math.round(e / Rl[l]), l);
+}
+function wn(e, t) {
+  let l = Oa(e);
+  return isNaN(l) ? "" : Ml(l, t);
+}
+function Pa(e, t) {
+  return Ml(e.getTime() - (t ? t.getTime() : Wl()));
+}
+function Bs(e, t) {
+  return yn(e, t).join(", ");
+}
+function Al(e) {
+  if (!e)
+    return null;
+  let { method: t, options: l } = e, n = `${t}(${l})`, i = bt[n] || bt[t];
+  if (typeof i == "function")
+    return i;
+  let r = e.locale || ut.locale;
+  if (t.startsWith("Intl.")) {
+    let d = r ? `'${r}'` : "undefined", c = `return new ${t}(${d},${l || "undefined"})`;
+    try {
+      let h = Function(c)();
+      return i = t === "Intl.DateTimeFormat" ? (m) => h.format(Vt(m)) : t === "Intl.NumberFormat" ? (m) => h.format(Number(m)) : t === "Intl.RelativeTimeFormat" ? (m) => wn(m, h) : (m) => h.format(m), bt[n] = i;
+    } catch (h) {
+      console.error(`Invalid format: ${c}`, h);
+    }
+  } else {
+    let d = globalThis[t];
+    if (typeof d == "function") {
+      let c = l != null ? Function("return " + l)() : void 0;
+      return i = (h) => d(h, c, r), bt[n] = i;
+    }
+    console.error(`No '${t}' function exists`, Object.keys(bt));
+  }
+  return null;
+}
+function Rs(e, t) {
+  return e ? e.length > t ? e.substring(0, t) + "..." : e : "";
+}
+function Es(e) {
+  return e.substring(0, 6) === "/Date(" ? Ht(Vt(e)) : e;
+}
+function Ba(e) {
+  return xn(Bt(e)).replace(/"/g, "");
+}
+function Hs(e) {
+  if (e == null || e === "")
+    return "";
+  if (typeof e == "string")
+    try {
+      return JSON.parse(e);
+    } catch {
+      console.warn("couldn't parse as JSON", e);
+    }
+  return e;
+}
+function xn(e, t = 4) {
+  return e = Hs(e), typeof e != "object" ? typeof e == "string" ? e : `${e}` : JSON.stringify(e, void 0, t);
+}
+function Ra(e) {
+  return e = Hs(e), typeof e != "object" ? typeof e == "string" ? e : `${e}` : (e = Object.assign({}, e), e = Bt(e), xn(e));
+}
+function Bt(e) {
+  if (e == null)
+    return null;
+  if (typeof e == "string")
+    return Es(e);
+  if (_t(e))
+    return e;
+  if (e instanceof Date)
+    return Ht(e);
+  if (Array.isArray(e))
+    return e.map(Bt);
+  if (typeof e == "object") {
+    let t = {};
+    return Object.keys(e).forEach((l) => {
+      l != "__type" && (t[l] = Bt(e[l]));
+    }), t;
+  }
+  return e;
+}
+function Ea(e, t, l) {
+  let n = e;
+  if (Array.isArray(e)) {
+    if (_t(e[0]))
+      return n.join(",");
+    e[0] != null && (n = e[0]);
+  }
+  if (n == null)
+    return "";
+  if (n instanceof Date)
+    return Ht(n, l);
+  let i = Object.keys(n), r = [];
+  for (let d = 0; d < Math.min(ut.maxNestedFields, i.length); d++) {
+    let c = i[d], h = `${Bt(n[c])}`;
+    r.push(`<b class="font-medium">${c}</b>: ${Hl(Rs(Es(h), ut.maxNestedFieldLength))}`);
+  }
+  return i.length > 2 && r.push("..."), rt("span", "{ " + r.join(", ") + " }", Object.assign({ title: Hl(Ba(e)) }, l));
+}
+function _h() {
+  return {
+    Formats: Ke,
+    setDefaultFormats: Da,
+    getFormatters: Ls,
+    setFormatters: ja,
+    formatValue: Jt,
+    formatter: Al,
+    dateInputFormat: $l,
+    currency: Vs,
+    bytes: Ss,
+    link: Ms,
+    linkTel: As,
+    linkMailTo: Ts,
+    icon: Fs,
+    iconRounded: Is,
+    attachment: Ds,
+    hidden: js,
+    time: Os,
+    relativeTime: wn,
+    relativeTimeFromDate: Pa,
+    relativeTimeFromMs: Ml,
+    enumFlags: Bs,
+    formatDate: Ht,
+    formatNumber: bn,
+    indentJson: xn,
+    prettyJson: Ra,
+    scrub: Bt,
+    truncate: Rs,
+    apiValueFmt: Ps,
+    iconOnError: Ll
+  };
+}
+const Ha = ["onClick", "title"], za = /* @__PURE__ */ ce({
+  __name: "RouterLink",
+  props: {
+    to: null
+  },
+  setup(e) {
+    const t = e, { config: l } = St(), n = () => l.value.navigate(t.to ?? "/");
+    return (i, r) => (a(), u("a", Me({
+      onClick: Ue(n, ["prevent"]),
+      title: e.to,
+      href: "javascript:void(0)"
+    }, i.$attrs), [
+      Z(i.$slots, "default")
+    ], 16, Ha));
+  }
+});
+class Na {
+  constructor() {
+    Ce(this, "callbacks", {});
+  }
+  register(t, l) {
+    this.callbacks[t] = l;
+  }
+  has(t) {
+    return !!this.callbacks[t];
+  }
+  invoke(t, l) {
+    const n = this.callbacks[t];
+    typeof n == "function" && n(t, l);
+  }
+}
+const Ye = class Ye {
+  static component(t) {
+    const l = Ye.components[t];
+    if (l)
+      return l;
+    const n = Nn(t), i = Object.keys(Ye.components).find((r) => Nn(r) === n);
+    return i && Ye.components[i] || null;
+  }
+};
+Ce(Ye, "config", {
+  redirectSignIn: "/signin",
+  redirectSignOut: "/auth/logout",
+  navigate: (t) => location.href = t,
+  assetsPathResolver: (t) => t,
+  fallbackPathResolver: (t) => t,
+  storage: new ss(),
+  tableIcon: { svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='currentColor' stroke-width='1.5'><path d='M5 12v6s0 3 7 3s7-3 7-3v-6'/><path d='M5 6v6s0 3 7 3s7-3 7-3V6'/><path d='M12 3c7 0 7 3 7 3s0 3-7 3s-7-3-7-3s0-3 7-3Z'/></g></svg>" },
+  scopeWhitelist: {
+    enumFlagsConverter: $s,
+    ...Ls()
+  }
+}), Ce(Ye, "autoQueryGridDefaults", {
+  deny: [],
+  hide: [],
+  toolbarButtonClass: void 0,
+  tableStyle: "stripedRows",
+  take: 25,
+  maxFieldLength: 150
+}), Ce(Ye, "events", wo()), Ce(Ye, "user", A(null)), Ce(Ye, "metadata", A(null)), Ce(Ye, "components", {
+  RouterLink: za
+}), Ce(Ye, "interceptors", new Na());
+let ne = Ye;
+function Ua(e) {
+  ne.config = Object.assign(ne.config, e);
+}
+function qa(e) {
+  ne.autoQueryGridDefaults = Object.assign(ne.autoQueryGridDefaults, e);
+}
+function kn(e) {
+  return e && ne.config.assetsPathResolver ? ne.config.assetsPathResolver(e) : e;
+}
+function Qa(e) {
+  return e && ne.config.fallbackPathResolver ? ne.config.fallbackPathResolver(e) : e;
+}
+function Ka(e, t) {
+  ne.interceptors.register(e, t);
+}
+function St() {
+  const e = f(() => ne.config), t = f(() => ne.autoQueryGridDefaults), l = ne.events;
+  return {
+    config: e,
+    setConfig: Ua,
+    events: l,
+    autoQueryGridDefaults: t,
+    setAutoQueryGridDefaults: qa,
+    assetsPathResolver: kn,
+    fallbackPathResolver: Qa,
+    registerInterceptor: Ka
+  };
+}
+const zs = ce({
+  inheritAttrs: !1,
+  props: {
+    image: Object,
+    svg: String,
+    src: String,
+    alt: String,
+    type: String
+  },
+  setup(e, { attrs: t }) {
+    return () => {
+      let l = e.image;
+      if (e.type) {
+        const { typeOf: r } = at(), d = r(e.type);
+        d || console.warn(`Type ${e.type} does not exist`), d != null && d.icon ? l = d == null ? void 0 : d.icon : console.warn(`Type ${e.type} does not have a [Svg] icon`);
+      }
+      let n = e.svg || (l == null ? void 0 : l.svg) || "";
+      if (n.startsWith("<svg ")) {
+        let d = xl(n, ">").indexOf("class="), c = `${(l == null ? void 0 : l.cls) || ""} ${t.class || ""}`;
+        if (d == -1)
+          n = `<svg class="${c}" ${n.substring(4)}`;
+        else {
+          const h = d + 6 + 1;
+          n = `${n.substring(0, h) + c} ${n.substring(h)}`;
+        }
+        return gt("span", { innerHTML: n });
+      } else
+        return gt("img", {
+          class: [l == null ? void 0 : l.cls, t.class],
+          src: kn(e.src || (l == null ? void 0 : l.uri)),
+          onError: (r) => Ll(r.target)
+        });
+    };
+  }
+}), Za = { class: "text-2xl font-semibold text-gray-900 dark:text-gray-300" }, Ga = { class: "flex" }, Wa = /* @__PURE__ */ s("path", {
+  d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
+  fill: "currentColor"
+}, null, -1), Ja = /* @__PURE__ */ s("path", {
+  d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
+  fill: "currentFill"
+}, null, -1), Xa = [
+  Wa,
+  Ja
+], Ya = /* @__PURE__ */ ce({
+  __name: "Loading",
+  props: {
+    imageClass: { default: "w-6 h-6" }
+  },
+  setup(e) {
+    return (t, l) => (a(), u("div", Za, [
+      s("div", Ga, [
+        (a(), u("svg", {
+          class: w(["self-center inline mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300", e.imageClass]),
+          role: "status",
+          viewBox: "0 0 100 101",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, Xa, 2)),
+        s("span", null, [
+          Z(t.$slots, "default")
+        ])
+      ])
+    ]));
+  }
+}), ei = ["href", "onClick"], ti = ["type"], li = /* @__PURE__ */ ce({
+  __name: "OutlineButton",
+  props: {
+    type: { default: "submit" },
+    href: null
+  },
+  setup(e) {
+    const t = "inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 disabled:text-gray-400 bg-white dark:bg-black hover:bg-gray-50 hover:dark:bg-gray-900 disabled:hover:bg-white dark:disabled:hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black";
+    return (l, n) => {
+      const i = X("router-link");
+      return e.href ? (a(), se(i, {
+        key: 0,
+        to: e.href
+      }, {
+        default: ke(({ navigate: r }) => [
+          s("button", {
+            class: w(t),
+            href: e.href,
+            onClick: r
+          }, [
+            Z(l.$slots, "default")
+          ], 8, ei)
+        ]),
+        _: 3
+      }, 8, ["to"])) : (a(), u("button", Me({
+        key: 1,
+        type: e.type,
+        class: t
+      }, l.$attrs), [
+        Z(l.$slots, "default")
+      ], 16, ti));
+    };
+  }
+}), ni = ["href", "onClick"], si = ["type"], oi = /* @__PURE__ */ ce({
+  __name: "PrimaryButton",
+  props: {
+    type: { default: "submit" },
+    href: null,
+    color: { default: "indigo" }
+  },
+  setup(e) {
+    const t = e, l = {
+      blue: "text-white bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:hover:bg-blue-400 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+      purple: "text-white bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 disabled:hover:bg-purple-400 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+      red: "focus:ring-red-500 text-white bg-red-600 hover:bg-red-700 disabled:bg-red-400 disabled:hover:bg-red-400 focus:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500",
+      green: "focus:ring-green-300 text-white bg-green-600 hover:bg-green-700 disabled:bg-green-400 disabled:hover:bg-green-400 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500",
+      sky: "focus:ring-sky-300 text-white bg-sky-600 hover:bg-sky-700 disabled:bg-sky-400 disabled:hover:bg-sky-400 focus:ring-sky-500 dark:bg-sky-600 dark:hover:bg-sky-700 dark:focus:ring-sky-500",
+      cyan: "focus:ring-cyan-300 text-white bg-cyan-600 hover:bg-cyan-700 disabled:bg-cyan-400 disabled:hover:bg-cyan-400 focus:ring-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-500",
+      indigo: "focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 disabled:hover:bg-indigo-400 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    }, n = f(() => "inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black " + (l[t.color] || l.indigo));
+    return (i, r) => {
+      const d = X("router-link");
+      return e.href ? (a(), se(d, {
+        key: 0,
+        to: e.href
+      }, {
+        default: ke(({ navigate: c }) => [
+          s("button", {
+            class: w(o(n)),
+            href: e.href,
+            onClick: c
+          }, [
+            Z(i.$slots, "default")
+          ], 10, ni)
+        ]),
+        _: 3
+      }, 8, ["to"])) : (a(), u("button", Me({
+        key: 1,
+        type: e.type,
+        class: o(n)
+      }, i.$attrs), [
+        Z(i.$slots, "default")
+      ], 16, si));
+    };
+  }
+}), ai = ["type", "href", "onClick"], ii = ["type"], ri = /* @__PURE__ */ ce({
+  __name: "SecondaryButton",
+  props: {
+    type: null,
+    href: null
+  },
+  setup(e) {
+    const t = "inline-flex justify-center rounded-md border border-gray-300 py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-black";
+    return (l, n) => {
+      const i = X("router-link");
+      return e.href ? (a(), se(i, {
+        key: 0,
+        to: e.href
+      }, {
+        default: ke(({ navigate: r }) => [
+          s("button", {
+            type: e.type ?? "button",
+            class: w(t),
+            href: e.href,
+            onClick: r
+          }, [
+            Z(l.$slots, "default")
+          ], 8, ai)
+        ]),
+        _: 3
+      }, 8, ["to"])) : (a(), u("button", Me({
+        key: 1,
+        type: e.type ?? "button",
+        class: t
+      }, l.$attrs), [
+        Z(l.$slots, "default")
+      ], 16, ii));
+    };
+  }
+});
+function We(e, t) {
+  return Array.isArray(e) ? e.indexOf(t) >= 0 : e == t || e.includes(t);
+}
+const bl = {
+  blue: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200",
+  purple: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200",
+  red: "text-red-700 dark:text-red-400 hover:text-red-900 dark:hover:text-red-200",
+  green: "text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200",
+  sky: "text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200",
+  cyan: "text-cyan-600 dark:text-cyan-400 hover:text-cyan-800 dark:hover:text-cyan-200",
+  indigo: "text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200"
+}, nt = {
+  base: "block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none",
+  invalid: "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500",
+  valid: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600"
+}, qt = {
+  panelClass: "shadow sm:rounded-md",
+  formClass: "space-y-6 bg-white dark:bg-black py-6 px-4 sm:p-6",
+  headingClass: "text-lg font-medium leading-6 text-gray-900 dark:text-gray-100",
+  subHeadingClass: "mt-1 text-sm text-gray-500 dark:text-gray-400"
+}, It = {
+  panelClass: "pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg",
+  formClass: "flex h-full flex-col divide-y divide-gray-200 dark:divide-gray-700 shadow-xl bg-white dark:bg-black",
+  titlebarClass: "bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6",
+  headingClass: "text-lg font-medium text-gray-900 dark:text-gray-100",
+  subHeadingClass: "mt-1 text-sm text-gray-500 dark:text-gray-400",
+  closeButtonClass: "rounded-md bg-gray-50 dark:bg-gray-900 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:ring-offset-black"
+}, Jl = {
+  modalClass: "relative transform overflow-hidden rounded-lg bg-white dark:bg-black text-left shadow-xl transition-all sm:my-8",
+  sizeClass: "sm:max-w-prose lg:max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl sm:w-full"
+}, Ze = {
+  panelClass(e = "slideOver") {
+    return e == "card" ? qt.panelClass : It.panelClass;
+  },
+  formClass(e = "slideOver") {
+    return e == "card" ? qt.formClass : It.formClass;
+  },
+  headingClass(e = "slideOver") {
+    return e == "card" ? qt.headingClass : It.headingClass;
+  },
+  subHeadingClass(e = "slideOver") {
+    return e == "card" ? qt.subHeadingClass : It.subHeadingClass;
+  },
+  buttonsClass: "mt-4 px-4 py-3 bg-gray-50 dark:bg-gray-900 sm:px-6 flex flex-wrap justify-between",
+  legendClass: "text-base font-medium text-gray-900 dark:text-gray-100 text-center mb-4"
+}, ge = {
+  getGridClass(e = "stripedRows") {
+    return ge.gridClass;
+  },
+  getGrid2Class(e = "stripedRows") {
+    return We(e, "fullWidth") ? "overflow-x-auto" : ge.grid2Class;
+  },
+  getGrid3Class(e = "stripedRows") {
+    return We(e, "fullWidth") ? "inline-block min-w-full py-2 align-middle" : ge.grid3Class;
+  },
+  getGrid4Class(e = "stripedRows") {
+    return We(e, "whiteBackground") ? "" : We(e, "fullWidth") ? "overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5" : ge.grid4Class;
+  },
+  getTableClass(e = "stripedRows") {
+    return We(e, "fullWidth") || We(e, "verticalLines") ? "min-w-full divide-y divide-gray-300" : ge.tableClass;
+  },
+  getTheadClass(e = "stripedRows") {
+    return We(e, "whiteBackground") ? "" : ge.theadClass;
+  },
+  getTheadRowClass(e = "stripedRows") {
+    return ge.theadRowClass + (We(e, "verticalLines") ? " divide-x divide-gray-200 dark:divide-gray-700" : "");
+  },
+  getTheadCellClass(e = "stripedRows") {
+    return ge.theadCellClass + (We(e, "uppercaseHeadings") ? " uppercase" : "");
+  },
+  getTbodyClass(e = "stripedRows") {
+    return (We(e, "whiteBackground") || We(e, "verticalLines") ? "divide-y divide-gray-200 dark:divide-gray-800" : ge.tableClass) + (We(e, "verticalLines") ? " bg-white" : "");
+  },
+  getTableRowClass(e = "stripedRows", t, l, n) {
+    return (n ? "cursor-pointer " : "") + (l ? "bg-indigo-100 dark:bg-blue-800" : (n ? "hover:bg-yellow-50 dark:hover:bg-blue-900 " : "") + (We(e, "stripedRows") ? t % 2 == 0 ? "bg-white dark:bg-black" : "bg-gray-50 dark:bg-gray-800" : "bg-white dark:bg-black")) + (We(e, "verticalLines") ? " divide-x divide-gray-200 dark:divide-gray-700" : "");
+  },
+  gridClass: "flex flex-col",
+  //original -margins + padding forces scroll bars when parent is w-full for no clear benefits?
+  //original: -my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8
+  grid2Class: "",
+  //original: inline-block min-w-full py-2 align-middle md:px-6 lg:px-8
+  grid3Class: "inline-block min-w-full py-2 align-middle",
+  grid4Class: "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg",
+  tableClass: "min-w-full divide-y divide-gray-200 dark:divide-gray-700",
+  theadClass: "bg-gray-50 dark:bg-gray-900",
+  tableCellClass: "px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400",
+  theadRowClass: "select-none",
+  theadCellClass: "px-6 py-4 text-left text-sm font-medium tracking-wider whitespace-nowrap",
+  toolbarButtonClass: "inline-flex items-center px-2.5 py-1.5 border border-gray-300 dark:border-gray-700 shadow-sm text-sm font-medium rounded text-gray-700 dark:text-gray-300 bg-white dark:bg-black hover:bg-gray-50 dark:hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"
+}, ui = {
+  colspans: "col-span-3 sm:col-span-3"
+}, Lh = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  a: bl,
+  card: qt,
+  dummy: ui,
+  form: Ze,
+  grid: ge,
+  input: nt,
+  modal: Jl,
+  slideOver: It
+}, Symbol.toStringTag, { value: "Module" })), di = /* @__PURE__ */ ce({
+  __name: "TextLink",
+  props: {
+    color: { default: "blue" }
+  },
+  setup(e) {
+    const t = e, l = so(), n = f(() => (bl[t.color] || bl.blue) + (l.href ? "" : " cursor-pointer"));
+    return (i, r) => (a(), u("a", {
+      class: w(o(n))
+    }, [
+      Z(i.$slots, "default")
+    ], 2));
+  }
+}), ci = {
+  class: "flex",
+  "aria-label": "Breadcrumb"
+}, fi = {
+  role: "list",
+  class: "flex items-center space-x-4"
+}, mi = ["href", "title"], vi = /* @__PURE__ */ s("svg", {
+  class: "h-6 w-6 flex-shrink-0",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z",
+    "clip-rule": "evenodd"
+  })
+], -1), hi = { class: "sr-only" }, gi = /* @__PURE__ */ ce({
+  __name: "Breadcrumbs",
+  props: {
+    homeHref: { default: "/" },
+    homeLabel: { default: "Home" }
+  },
+  setup(e) {
+    return (t, l) => (a(), u("nav", ci, [
+      s("ol", fi, [
+        s("li", null, [
+          s("div", null, [
+            s("a", {
+              href: e.homeHref,
+              class: "text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400",
+              title: e.homeLabel
+            }, [
+              vi,
+              s("span", hi, T(e.homeLabel), 1)
+            ], 8, mi)
+          ])
+        ]),
+        Z(t.$slots, "default")
+      ])
+    ]));
+  }
+}), pi = { class: "flex items-center" }, yi = /* @__PURE__ */ s("svg", {
+  class: "h-6 w-6 flex-shrink-0 text-gray-400 dark:text-gray-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+    "clip-rule": "evenodd"
+  })
+], -1), bi = ["href", "title"], wi = ["title"], xi = /* @__PURE__ */ ce({
+  __name: "Breadcrumb",
+  props: {
+    href: null,
+    title: null
+  },
+  setup(e) {
+    return (t, l) => (a(), u("li", null, [
+      s("div", pi, [
+        yi,
+        e.href ? (a(), u("a", {
+          key: 0,
+          href: e.href,
+          class: "ml-4 text-lg font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300",
+          title: e.title
+        }, [
+          Z(t.$slots, "default")
+        ], 8, bi)) : (a(), u("span", {
+          key: 1,
+          class: "ml-4 text-lg font-medium text-gray-700 dark:text-gray-300",
+          title: e.title
+        }, [
+          Z(t.$slots, "default")
+        ], 8, wi))
+      ])
+    ]));
+  }
+}), ki = {
+  key: 0,
+  class: "text-base font-semibold text-gray-500 dark:text-gray-400"
+}, $i = {
+  role: "list",
+  class: "mt-4 divide-y divide-gray-200 dark:divide-gray-800 border-t border-b border-gray-200 dark:border-gray-800"
+}, Ci = /* @__PURE__ */ ce({
+  __name: "NavList",
+  props: {
+    title: null
+  },
+  setup(e) {
+    return (t, l) => (a(), u("div", null, [
+      e.title ? (a(), u("h2", ki, T(e.title), 1)) : k("", !0),
+      s("ul", $i, [
+        Z(t.$slots, "default")
+      ])
+    ]));
+  }
+}), _i = { class: "relative flex items-start space-x-4 py-6" }, Li = { class: "flex-shrink-0" }, Vi = { class: "flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-900" }, Si = { class: "min-w-0 flex-1" }, Mi = { class: "text-base font-medium text-gray-900 dark:text-gray-100" }, Ai = { class: "rounded-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2" }, Ti = ["href"], Fi = /* @__PURE__ */ s("span", {
+  class: "absolute inset-0",
+  "aria-hidden": "true"
+}, null, -1), Ii = { class: "text-base text-gray-500" }, Di = /* @__PURE__ */ s("div", { class: "flex-shrink-0 self-center" }, [
+  /* @__PURE__ */ s("svg", {
+    class: "h-5 w-5 text-gray-400",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    /* @__PURE__ */ s("path", {
+      "fill-rule": "evenodd",
+      d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+      "clip-rule": "evenodd"
+    })
+  ])
+], -1), ji = /* @__PURE__ */ ce({
+  __name: "NavListItem",
+  props: {
+    title: null,
+    href: null,
+    icon: null,
+    iconSvg: null,
+    iconSrc: null,
+    iconAlt: null
+  },
+  setup(e) {
+    return (t, l) => {
+      const n = X("Icon");
+      return a(), u("li", _i, [
+        s("div", Li, [
+          s("span", Vi, [
+            $e(n, {
+              class: "w-6 h-6 text-indigo-700 dark:text-indigo-300",
+              image: e.icon,
+              src: e.iconSrc,
+              svg: e.iconSvg,
+              alt: e.iconAlt
+            }, null, 8, ["image", "src", "svg", "alt"])
+          ])
+        ]),
+        s("div", Si, [
+          s("h3", Mi, [
+            s("span", Ai, [
+              s("a", {
+                href: e.href,
+                class: "focus:outline-none"
+              }, [
+                Fi,
+                we(" " + T(e.title), 1)
+              ], 8, Ti)
+            ])
+          ]),
+          s("p", Ii, [
+            Z(t.$slots, "default")
+          ])
+        ]),
+        Di
+      ]);
+    };
+  }
+});
+function Ns(e) {
+  return e && e.SessionId ? xo(e) : e;
+}
+function Oi(e) {
+  ne.user.value = Ns(e), ne.events.publish("signIn", e);
+}
+function Pi() {
+  ne.user.value = null, ne.events.publish("signOut", null);
+}
+const $n = (e) => (e == null ? void 0 : e.roles) || [], Cn = (e) => (e == null ? void 0 : e.permissions) || [];
+function Us(e) {
+  return $n(ne.user.value).indexOf(e) >= 0;
+}
+function Bi(e) {
+  return Cn(ne.user.value).indexOf(e) >= 0;
+}
+function _n() {
+  return Us("Admin");
+}
+function vl(e) {
+  if (!e)
+    return !1;
+  if (!e.requiresAuth)
+    return !0;
+  const t = ne.user.value;
+  if (!t)
+    return !1;
+  if (_n())
+    return !0;
+  let [l, n] = [$n(t), Cn(t)], [i, r, d, c] = [
+    e.requiredRoles || [],
+    e.requiredPermissions || [],
+    e.requiresAnyRole || [],
+    e.requiresAnyPermission || []
+  ];
+  return !(!i.every((h) => l.indexOf(h) >= 0) || d.length > 0 && !d.some((h) => l.indexOf(h) >= 0) || !r.every((h) => n.indexOf(h) >= 0) || c.length > 0 && !c.every((h) => n.indexOf(h) >= 0));
+}
+function Ri(e) {
+  if (!e || !e.requiresAuth)
+    return null;
+  const t = ne.user.value;
+  if (!t)
+    return `<b>${e.request.name}</b> requires Authentication`;
+  if (_n())
+    return null;
+  let [l, n] = [$n(t), Cn(t)], [i, r, d, c] = [
+    e.requiredRoles || [],
+    e.requiredPermissions || [],
+    e.requiresAnyRole || [],
+    e.requiresAnyPermission || []
+  ], h = i.filter((y) => l.indexOf(y) < 0);
+  if (h.length > 0)
+    return `Requires ${h.map((y) => "<b>" + y + "</b>").join(", ")} Role` + (h.length > 1 ? "s" : "");
+  let m = r.filter((y) => n.indexOf(y) < 0);
+  return m.length > 0 ? `Requires ${m.map((y) => "<b>" + y + "</b>").join(", ")} Permission` + (m.length > 1 ? "s" : "") : d.length > 0 && !d.some((y) => l.indexOf(y) >= 0) ? `Requires any ${d.filter((y) => l.indexOf(y) < 0).map((y) => "<b>" + y + "</b>").join(", ")} Role` + (h.length > 1 ? "s" : "") : c.length > 0 && !c.every((y) => n.indexOf(y) >= 0) ? `Requires any ${c.filter((y) => n.indexOf(y) < 0).map((y) => "<b>" + y + "</b>").join(", ")} Permission` + (m.length > 1 ? "s" : "") : null;
+}
+function Ln() {
+  const e = f(() => ne.user.value || null), t = f(() => ne.user.value != null);
+  return { signIn: Oi, signOut: Pi, user: e, toAuth: Ns, isAuthenticated: t, hasRole: Us, hasPermission: Bi, isAdmin: _n, canAccess: vl, invalidAccessMessage: Ri };
+}
+const Ei = { key: 0 }, Hi = { class: "md:p-4" }, qs = /* @__PURE__ */ ce({
+  __name: "EnsureAccess",
+  props: {
+    invalidAccess: null,
+    alertClass: null
+  },
+  emits: ["done"],
+  setup(e) {
+    const { isAuthenticated: t } = Ln(), { config: l } = St(), n = () => {
+      let r = location.href.substring(location.origin.length) || "/";
+      const d = Kt(l.value.redirectSignIn, { redirect: r });
+      l.value.navigate(d);
+    }, i = () => {
+      let r = location.href.substring(location.origin.length) || "/";
+      const d = Kt(l.value.redirectSignOut, { ReturnUrl: r });
+      l.value.navigate(d);
+    };
+    return (r, d) => {
+      const c = X("Alert"), h = X("SecondaryButton");
+      return e.invalidAccess ? (a(), u("div", Ei, [
+        $e(c, {
+          class: w(e.alertClass),
+          innerHTML: e.invalidAccess
+        }, null, 8, ["class", "innerHTML"]),
+        s("div", Hi, [
+          o(t) ? (a(), se(h, {
+            key: 1,
+            onClick: i
+          }, {
+            default: ke(() => [
+              we("Sign Out")
+            ]),
+            _: 1
+          })) : (a(), se(h, {
+            key: 0,
+            onClick: n
+          }, {
+            default: ke(() => [
+              we("Sign In")
+            ]),
+            _: 1
+          }))
+        ])
+      ])) : k("", !0);
+    };
+  }
+}), zi = { class: "absolute top-0 right-0 bg-white dark:bg-black border dark:border-gray-800 rounded normal-case text-sm shadow w-80" }, Ni = { class: "p-4" }, Ui = /* @__PURE__ */ s("h3", { class: "text-base font-medium mb-3 dark:text-gray-100" }, "Sort", -1), qi = { class: "flex w-full justify-center" }, Qi = /* @__PURE__ */ s("svg", {
+  class: "w-6 h-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 16"
+}, [
+  /* @__PURE__ */ s("g", { fill: "currentColor" }, [
+    /* @__PURE__ */ s("path", {
+      "fill-rule": "evenodd",
+      d: "M10.082 5.629L9.664 7H8.598l1.789-5.332h1.234L13.402 7h-1.12l-.419-1.371h-1.781zm1.57-.785L11 2.687h-.047l-.652 2.157h1.351z"
+    }),
+    /* @__PURE__ */ s("path", { d: "M12.96 14H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645V14zm-8.46-.5a.5.5 0 0 1-1 0V3.707L2.354 4.854a.5.5 0 1 1-.708-.708l2-1.999l.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L4.5 3.707V13.5z" })
+  ])
+], -1), Ki = /* @__PURE__ */ s("span", null, "ASC", -1), Zi = [
+  Qi,
+  Ki
+], Gi = /* @__PURE__ */ wl('<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M12.96 7H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645V7z"></path><path fill-rule="evenodd" d="M10.082 12.629L9.664 14H8.598l1.789-5.332h1.234L13.402 14h-1.12l-.419-1.371h-1.781zm1.57-.785L11 9.688h-.047l-.652 2.156h1.351z"></path><path d="M4.5 2.5a.5.5 0 0 0-1 0v9.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999l.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L4.5 12.293V2.5z"></path></g></svg><span>DESC</span>', 2), Wi = [
+  Gi
+], Ji = /* @__PURE__ */ s("h3", { class: "text-base font-medium mt-4 mb-2" }, " Filter ", -1), Xi = { key: 0 }, Yi = ["id", "value"], er = ["for"], tr = { key: 1 }, lr = { class: "mb-2" }, nr = { class: "inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 text-indigo-700" }, sr = ["onClick"], or = /* @__PURE__ */ s("svg", {
+  class: "h-2 w-2",
+  stroke: "currentColor",
+  fill: "none",
+  viewBox: "0 0 8 8"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-width": "1.5",
+    d: "M1 1l6 6m0-6L1 7"
+  })
+], -1), ar = [
+  or
+], ir = { class: "flex" }, rr = /* @__PURE__ */ s("svg", {
+  class: "h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z",
+    "clip-rule": "evenodd"
+  })
+], -1), ur = [
+  rr
+], dr = { class: "bg-gray-50 dark:bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse" }, Vn = /* @__PURE__ */ ce({
+  __name: "FilterColumn",
+  props: {
+    definitions: null,
+    column: null,
+    topLeft: null
+  },
+  emits: ["done", "save"],
+  setup(e, { emit: t }) {
+    const l = e, n = A(), i = A(""), r = A(""), d = A([]), c = f(() => l.column.meta.isEnum == !0), h = f(() => ot(l.column.meta.type === "Nullable`1" ? l.column.meta.genericArgs[0] : l.column.meta.type)), m = f(() => l.column.meta.isEnum == !0 ? pn(ws(h.value.name)) : []), y = f(() => {
+      var O;
+      return ((O = v(l.column.type)) == null ? void 0 : O.map((S) => ({ key: S.value, value: S.name }))) || [];
+    }), b = A({ filters: [] }), p = f(() => b.value.filters);
+    hl(() => b.value = Object.assign({}, l.column.settings, {
+      filters: Array.from(l.column.settings.filters)
+    })), hl(() => {
+      var S, U, te, R, J;
+      let O = ((te = (U = (S = l.column.settings.filters) == null ? void 0 : S[0]) == null ? void 0 : U.value) == null ? void 0 : te.split(",")) || [];
+      if (O.length > 0 && ((R = h.value) != null && R.isEnumInt)) {
+        const Y = parseInt(O[0]);
+        O = ((J = h.value.enumValues) == null ? void 0 : J.filter((G) => (Y & parseInt(G)) > 0)) || [];
+      }
+      d.value = O;
+    });
+    function v(O) {
+      let S = l.definitions;
+      return gs(O) || (S = S.filter((U) => U.types !== "string")), S;
+    }
+    function g(O, S) {
+      return v(O).find((U) => U.value === S);
+    }
+    function P() {
+      var S;
+      if (!i.value)
+        return;
+      let O = (S = g(l.column.type, i.value)) == null ? void 0 : S.name;
+      O && (b.value.filters.push({ key: i.value, name: O, value: r.value }), i.value = r.value = "");
+    }
+    function N(O) {
+      b.value.filters.splice(O, 1);
+    }
+    function ee(O) {
+      return _s(g(l.column.type, O.key), l.column.type, O);
+    }
+    function j() {
+      t("done");
+    }
+    function z() {
+      var O;
+      i.value = "%", (O = n.value) == null || O.focus();
+    }
+    function F() {
+      var O;
+      if (r.value && P(), c.value) {
+        let S = Object.values(d.value).filter((U) => U);
+        b.value.filters = S.length > 0 ? (O = h.value) != null && O.isEnumInt ? [{ key: "%HasAny", name: "HasAny", value: S.map((U) => parseInt(U)).reduce((U, te) => U + te, 0).toString() }] : [{ key: "%In", name: "In", value: S.join(",") }] : [];
+      }
+      t("save", b.value), t("done");
+    }
+    function W(O) {
+      b.value.sort = O === b.value.sort ? void 0 : O, xt(F);
+    }
+    return (O, S) => {
+      var Y;
+      const U = X("SelectInput"), te = X("TextInput"), R = X("PrimaryButton"), J = X("SecondaryButton");
+      return a(), u("div", {
+        class: "fixed z-20 inset-0 overflow-y-auto",
+        onClick: j,
+        onVnodeMounted: z
+      }, [
+        s("div", {
+          class: "absolute",
+          style: Xl(`top:${e.topLeft.y}px;left:${e.topLeft.x}px`),
+          onClick: S[5] || (S[5] = Ue(() => {
+          }, ["stop"]))
+        }, [
+          s("div", zi, [
+            s("div", Ni, [
+              Ui,
+              s("div", qi, [
+                s("button", {
+                  type: "button",
+                  title: "Sort Ascending",
+                  onClick: S[0] || (S[0] = (G) => W("ASC")),
+                  class: w(`${b.value.sort === "ASC" ? "bg-indigo-100 border-indigo-500" : "bg-white hover:bg-gray-50 border-gray-300"} mr-1 inline-flex items-center px-2.5 py-1.5 border shadow-sm text-sm font-medium rounded text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`)
+                }, Zi, 2),
+                s("button", {
+                  type: "button",
+                  title: "Sort Descending",
+                  onClick: S[1] || (S[1] = (G) => W("DESC")),
+                  class: w(`${b.value.sort === "DESC" ? "bg-indigo-100 border-indigo-500" : "bg-white hover:bg-gray-50 border-gray-300"} ml-1 inline-flex items-center px-2.5 py-1.5 border shadow-sm text-sm font-medium rounded text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`)
+                }, Wi, 2)
+              ]),
+              Ji,
+              o(c) ? (a(), u("div", Xi, [
+                (a(!0), u(Te, null, Ie(o(m), (G) => (a(), u("div", {
+                  key: G.key,
+                  class: "flex items-center"
+                }, [
+                  kt(s("input", {
+                    type: "checkbox",
+                    id: G.key,
+                    value: G.key,
+                    "onUpdate:modelValue": S[2] || (S[2] = (M) => d.value = M),
+                    class: "h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
+                  }, null, 8, Yi), [
+                    [Yl, d.value]
+                  ]),
+                  s("label", {
+                    for: G.key,
+                    class: "ml-3"
+                  }, T(G.value), 9, er)
+                ]))), 128))
+              ])) : (a(), u("div", tr, [
+                (a(!0), u(Te, null, Ie(o(p), (G, M) => (a(), u("div", lr, [
+                  s("span", nr, [
+                    we(T(e.column.name) + " " + T(G.name) + " " + T(ee(G)) + " ", 1),
+                    s("button", {
+                      type: "button",
+                      onClick: (le) => N(M),
+                      class: "flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
+                    }, ar, 8, sr)
+                  ])
+                ]))), 256)),
+                s("div", ir, [
+                  $e(U, {
+                    id: "filterRule",
+                    class: "w-32 mr-1",
+                    modelValue: i.value,
+                    "onUpdate:modelValue": S[3] || (S[3] = (G) => i.value = G),
+                    entries: o(y),
+                    label: "",
+                    placeholder: ""
+                  }, null, 8, ["modelValue", "entries"]),
+                  ((Y = g(e.column.type, i.value)) == null ? void 0 : Y.valueType) !== "none" ? (a(), se(te, {
+                    key: 0,
+                    ref_key: "txtFilter",
+                    ref: n,
+                    id: "filterValue",
+                    class: "w-32 mr-1",
+                    type: "text",
+                    modelValue: r.value,
+                    "onUpdate:modelValue": S[4] || (S[4] = (G) => r.value = G),
+                    onKeyup: Wn(P, ["enter"]),
+                    label: "",
+                    placeholder: ""
+                  }, null, 8, ["modelValue", "onKeyup"])) : k("", !0),
+                  s("div", { class: "pt-1" }, [
+                    s("button", {
+                      type: "button",
+                      onClick: P,
+                      class: "inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    }, ur)
+                  ])
+                ])
+              ]))
+            ]),
+            s("div", dr, [
+              $e(R, {
+                onClick: F,
+                color: "red",
+                class: "ml-2"
+              }, {
+                default: ke(() => [
+                  we(" Save ")
+                ]),
+                _: 1
+              }),
+              $e(J, { onClick: j }, {
+                default: ke(() => [
+                  we(" Cancel ")
+                ]),
+                _: 1
+              })
+            ])
+          ])
+        ], 4)
+      ], 512);
+    };
+  }
+}), cr = { class: "px-4 sm:px-6 lg:px-8 text-sm" }, fr = { class: "flex flex-wrap" }, mr = { class: "group pr-4 sm:pr-6 lg:pr-8" }, vr = { class: "flex justify-between w-full font-medium" }, hr = { class: "w-6 flex justify-end" }, gr = { class: "hidden group-hover:inline" }, pr = ["onClick", "title"], yr = /* @__PURE__ */ s("svg", {
+  class: "h-2 w-2",
+  stroke: "currentColor",
+  fill: "none",
+  viewBox: "0 0 8 8"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-width": "1.5",
+    d: "M1 1l6 6m0-6L1 7"
+  })
+], -1), br = [
+  yr
+], wr = {
+  key: 0,
+  class: "pt-2"
+}, xr = { class: "ml-2" }, kr = { key: 1 }, $r = { class: "pt-2" }, Cr = { class: "inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 text-indigo-700" }, _r = ["onClick"], Lr = /* @__PURE__ */ s("svg", {
+  class: "h-2 w-2",
+  stroke: "currentColor",
+  fill: "none",
+  viewBox: "0 0 8 8"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-width": "1.5",
+    d: "M1 1l6 6m0-6L1 7"
+  })
+], -1), Vr = [
+  Lr
+], Sr = /* @__PURE__ */ s("span", null, "Clear All", -1), Mr = [
+  Sr
+], Sn = /* @__PURE__ */ ce({
+  __name: "FilterViews",
+  props: {
+    definitions: null,
+    columns: null
+  },
+  emits: ["done", "change"],
+  setup(e, { emit: t }) {
+    const l = e, n = f(() => l.columns.filter((b) => b.settings.filters.length > 0));
+    function i(b) {
+      var p, v;
+      return (v = (p = b == null ? void 0 : b[0]) == null ? void 0 : p.value) == null ? void 0 : v.split(",");
+    }
+    function r(b) {
+      let p = l.definitions;
+      return gs(b) || (p = p.filter((v) => v.types !== "string")), p;
+    }
+    function d(b, p) {
+      return r(b).find((v) => v.value === p);
+    }
+    function c(b, p) {
+      return _s(d(b.type, p.value), b.type, p);
+    }
+    function h(b) {
+      b.settings.filters = [], t("change", b);
+    }
+    function m(b, p) {
+      b.settings.filters.splice(p, 1), t("change", b);
+    }
+    function y() {
+      l.columns.forEach((b) => {
+        b.settings.filters = [], t("change", b);
+      }), t("done");
+    }
+    return (b, p) => (a(), u("div", cr, [
+      s("div", fr, [
+        (a(!0), u(Te, null, Ie(o(n), (v) => (a(), u("fieldset", mr, [
+          s("legend", vr, [
+            s("span", null, T(o(He)(v.name)), 1),
+            s("span", hr, [
+              s("span", gr, [
+                s("button", {
+                  onClick: (g) => h(v),
+                  title: `Clear all ${o(He)(v.name)} filters`,
+                  class: "flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-red-600 hover:bg-red-200 hover:text-red-500 focus:outline-none focus:bg-red-500 focus:text-white"
+                }, br, 8, pr)
+              ])
+            ])
+          ]),
+          v.meta.isEnum ? (a(), u("div", wr, [
+            (a(!0), u(Te, null, Ie(i(v.settings.filters), (g) => (a(), u("div", {
+              key: g,
+              class: "flex items-center"
+            }, [
+              s("label", xr, T(g), 1)
+            ]))), 128))
+          ])) : (a(), u("div", kr, [
+            (a(!0), u(Te, null, Ie(v.settings.filters, (g, P) => (a(), u("div", $r, [
+              s("span", Cr, [
+                we(T(v.name) + " " + T(g.name) + " " + T(c(v, g)) + " ", 1),
+                s("button", {
+                  type: "button",
+                  onClick: (N) => m(v, P),
+                  class: "flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
+                }, Vr, 8, _r)
+              ])
+            ]))), 256))
+          ]))
+        ]))), 256))
+      ]),
+      s("div", { class: "flex justify-center pt-4" }, [
+        s("button", {
+          type: "button",
+          onClick: y,
+          class: "inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        }, Mr)
+      ])
+    ]));
+  }
+}), Ar = { class: "bg-white dark:bg-black px-4 pt-5 pb-4 sm:p-6 sm:pb-4" }, Tr = { class: "" }, Fr = { class: "mt-3 text-center sm:mt-0 sm:mx-4 sm:text-left" }, Ir = /* @__PURE__ */ s("h3", { class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" }, "Query Preferences", -1), Dr = { class: "mt-4" }, jr = ["for"], Or = ["id"], Pr = ["value", "selected"], Br = { class: "mt-4 flex items-center py-4 border-b border-gray-200 dark:border-gray-800" }, Rr = ["id", "checked"], Er = ["for"], Hr = { class: "mt-4" }, zr = { class: "pb-2 px-4" }, Nr = { class: "" }, Ur = ["id", "value"], qr = ["for"], Qr = { class: "bg-gray-50 dark:bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse" }, Mn = /* @__PURE__ */ ce({
+  __name: "QueryPrefs",
+  props: {
+    id: { default: "QueryPrefs" },
+    columns: null,
+    prefs: null,
+    maxLimit: null
+  },
+  emits: ["done", "save"],
+  setup(e, { emit: t }) {
+    const l = e, { autoQueryGridDefaults: n } = St(), i = A({});
+    hl(() => i.value = Object.assign({
+      take: n.value.take,
+      selectedColumns: []
+    }, l.prefs));
+    const r = [10, 25, 50, 100, 250, 500, 1e3];
+    function d() {
+      t("done");
+    }
+    function c() {
+      t("save", i.value);
+    }
+    return (h, m) => {
+      const y = X("PrimaryButton"), b = X("SecondaryButton"), p = X("ModalDialog");
+      return a(), se(p, {
+        id: e.id,
+        onDone: d,
+        "size-class": "w-full sm:max-w-prose"
+      }, {
+        default: ke(() => [
+          s("div", Ar, [
+            s("div", Tr, [
+              s("div", Fr, [
+                Ir,
+                s("div", Dr, [
+                  s("label", {
+                    for: `${e.id}-take`,
+                    class: "block text-sm font-medium text-gray-700 dark:text-gray-300"
+                  }, "Results per page", 8, jr),
+                  kt(s("select", {
+                    id: `${e.id}-take`,
+                    "onUpdate:modelValue": m[0] || (m[0] = (v) => i.value.take = v),
+                    class: "mt-1 block w-full pl-3 pr-10 py-2 text-base bg-white dark:bg-black border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                  }, [
+                    (a(!0), u(Te, null, Ie(r.filter((v) => l.maxLimit == null || v <= l.maxLimit), (v) => (a(), u("option", {
+                      value: v,
+                      selected: v === i.value.take
+                    }, T(v), 9, Pr))), 256))
+                  ], 8, Or), [
+                    [oo, i.value.take]
+                  ])
+                ]),
+                s("div", Br, [
+                  s("input", {
+                    type: "radio",
+                    id: `${e.id}-allColumns`,
+                    onClick: m[1] || (m[1] = (v) => i.value.selectedColumns = []),
+                    checked: i.value.selectedColumns.length === 0,
+                    class: "focus:ring-indigo-500 h-4 w-4 bg-white dark:bg-black text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-700"
+                  }, null, 8, Rr),
+                  s("label", {
+                    class: "ml-3 block text-gray-700 dark:text-gray-300",
+                    for: `${e.id}-allColumns`
+                  }, "View all columns", 8, Er)
+                ]),
+                s("div", Hr, [
+                  s("div", zr, [
+                    s("div", Nr, [
+                      (a(!0), u(Te, null, Ie(e.columns, (v) => (a(), u("div", {
+                        key: v.name,
+                        class: "flex items-center"
+                      }, [
+                        kt(s("input", {
+                          type: "checkbox",
+                          id: v.name,
+                          value: v.name,
+                          "onUpdate:modelValue": m[2] || (m[2] = (g) => i.value.selectedColumns = g),
+                          class: "h-4 w-4 bg-white dark:bg-black border-gray-300 dark:border-gray-700 rounded text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500"
+                        }, null, 8, Ur), [
+                          [Yl, i.value.selectedColumns]
+                        ]),
+                        s("label", {
+                          for: v.name,
+                          class: "ml-3"
+                        }, T(v.name), 9, qr)
+                      ]))), 128))
+                    ])
+                  ])
+                ])
+              ])
+            ])
+          ]),
+          s("div", Qr, [
+            $e(y, {
+              onClick: c,
+              color: "red",
+              class: "ml-2"
+            }, {
+              default: ke(() => [
+                we(" Save ")
+              ]),
+              _: 1
+            }),
+            $e(b, { onClick: d }, {
+              default: ke(() => [
+                we(" Cancel ")
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["id"]);
+    };
+  }
+}), Kr = { key: 0 }, Zr = { key: 1 }, Gr = {
+  key: 2,
+  class: "pt-1"
+}, Wr = { key: 0 }, Jr = { key: 1 }, Xr = { key: 3 }, Yr = { class: "pl-1 pt-1 flex flex-wrap" }, eu = { class: "flex mt-1" }, tu = ["title"], lu = /* @__PURE__ */ s("svg", {
+  class: "w-8 h-8",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("g", {
+    "stroke-width": "1.5",
+    fill: "none"
+  }, [
+    /* @__PURE__ */ s("path", {
+      d: "M9 3H3.6a.6.6 0 0 0-.6.6v16.8a.6.6 0 0 0 .6.6H9M9 3v18M9 3h6M9 21h6m0-18h5.4a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H15m0-18v18",
+      stroke: "currentColor"
+    })
+  ])
+], -1), nu = [
+  lu
+], su = ["disabled"], ou = /* @__PURE__ */ s("svg", {
+  class: "w-8 h-8",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z",
+    fill: "currentColor"
+  })
+], -1), au = [
+  ou
+], iu = ["disabled"], ru = /* @__PURE__ */ s("svg", {
+  class: "w-8 h-8",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    d: "M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z",
+    fill: "currentColor"
+  })
+], -1), uu = [
+  ru
+], du = ["disabled"], cu = /* @__PURE__ */ s("svg", {
+  class: "w-8 h-8",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    d: "M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z",
+    fill: "currentColor"
+  })
+], -1), fu = [
+  cu
+], mu = ["disabled"], vu = /* @__PURE__ */ s("svg", {
+  class: "w-8 h-8",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z",
+    fill: "currentColor"
+  })
+], -1), hu = [
+  vu
+], gu = {
+  key: 0,
+  class: "flex mt-1"
+}, pu = { class: "px-4 text-lg text-black dark:text-white" }, yu = { key: 0 }, bu = { key: 1 }, wu = /* @__PURE__ */ s("span", { class: "hidden xl:inline" }, " Showing Results ", -1), xu = { key: 2 }, ku = { class: "flex flex-wrap" }, $u = {
+  key: 0,
+  class: "pl-2 mt-1"
+}, Cu = /* @__PURE__ */ s("svg", {
+  class: "w-5 h-5",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2",
+    d: "M20 20v-5h-5M4 4v5h5m10.938 2A8.001 8.001 0 0 0 5.07 8m-1.008 5a8.001 8.001  0 0 0 14.868 3"
+  })
+], -1), _u = [
+  Cu
+], Lu = {
+  key: 1,
+  class: "pl-2 mt-1"
+}, Vu = /* @__PURE__ */ wl('<svg class="w-5 h-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28.781 4.405h-10.13V2.018L2 4.588v22.527l16.651 2.868v-3.538h10.13A1.162 1.162 0 0 0 30 25.349V5.5a1.162 1.162 0 0 0-1.219-1.095zm.16 21.126H18.617l-.017-1.889h2.487v-2.2h-2.506l-.012-1.3h2.518v-2.2H18.55l-.012-1.3h2.549v-2.2H18.53v-1.3h2.557v-2.2H18.53v-1.3h2.557v-2.2H18.53v-2h10.411z" fill="#20744a" fill-rule="evenodd"></path><path fill="#20744a" d="M22.487 7.439h4.323v2.2h-4.323z"></path><path fill="#20744a" d="M22.487 10.94h4.323v2.2h-4.323z"></path><path fill="#20744a" d="M22.487 14.441h4.323v2.2h-4.323z"></path><path fill="#20744a" d="M22.487 17.942h4.323v2.2h-4.323z"></path><path fill="#20744a" d="M22.487 21.443h4.323v2.2h-4.323z"></path><path fill="#fff" fill-rule="evenodd" d="M6.347 10.673l2.146-.123l1.349 3.709l1.594-3.862l2.146-.123l-2.606 5.266l2.606 5.279l-2.269-.153l-1.532-4.024l-1.533 3.871l-2.085-.184l2.422-4.663l-2.238-4.993z"></path></svg><span class="text-green-900 dark:text-green-100">Excel</span>', 2), Su = [
+  Vu
+], Mu = {
+  key: 2,
+  class: "pl-2 mt-1"
+}, Au = {
+  key: 0,
+  class: "w-5 h-5 mr-1 text-green-600 dark:text-green-400",
+  fill: "none",
+  stroke: "currentColor",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, Tu = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "2",
+  d: "M5 13l4 4L19 7"
+}, null, -1), Fu = [
+  Tu
+], Iu = {
+  key: 1,
+  class: "w-5 h-5 mr-1",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, Du = /* @__PURE__ */ s("g", { fill: "none" }, [
+  /* @__PURE__ */ s("path", {
+    d: "M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }),
+  /* @__PURE__ */ s("path", {
+    d: "M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  })
+], -1), ju = [
+  Du
+], Ou = /* @__PURE__ */ s("span", { class: "whitespace-nowrap" }, "Copy URL", -1), Pu = {
+  key: 3,
+  class: "pl-2 mt-1"
+}, Bu = /* @__PURE__ */ s("svg", {
+  class: "w-5 h-5",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-hidden": "true",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    fill: "currentColor",
+    d: "M6.78 2.72a.75.75 0 0 1 0 1.06L4.56 6h8.69a7.75 7.75 0 1 1-7.75 7.75a.75.75 0 0 1 1.5 0a6.25 6.25 0 1 0 6.25-6.25H4.56l2.22 2.22a.75.75 0 1 1-1.06 1.06l-3.5-3.5a.75.75 0 0 1 0-1.06l3.5-3.5a.75.75 0 0 1 1.06 0Z"
+  })
+], -1), Ru = [
+  Bu
+], Eu = {
+  key: 4,
+  class: "pl-2 mt-1"
+}, Hu = /* @__PURE__ */ s("svg", {
+  class: "flex-none w-5 h-5 mr-2 text-gray-400 dark:text-gray-500 group-hover:text-gray-500",
+  "aria-hidden": "true",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z",
+    "clip-rule": "evenodd"
+  })
+], -1), zu = { class: "mr-1" }, Nu = {
+  key: 0,
+  class: "h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, Uu = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z",
+  "clip-rule": "evenodd"
+}, null, -1), qu = [
+  Uu
+], Qu = {
+  key: 1,
+  class: "h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, Ku = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z",
+  "clip-rule": "evenodd"
+}, null, -1), Zu = [
+  Ku
+], Gu = {
+  key: 5,
+  class: "pl-2 mt-1"
+}, Wu = ["title"], Ju = /* @__PURE__ */ s("svg", {
+  class: "w-5 h-5 mr-1 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z",
+    fill: "currentColor"
+  })
+], -1), Xu = { class: "whitespace-nowrap" }, Yu = { key: 7 }, ed = {
+  key: 0,
+  class: "cursor-pointer flex justify-between items-center hover:text-gray-900 dark:hover:text-gray-50"
+}, td = { class: "mr-1 select-none" }, ld = {
+  key: 1,
+  class: "flex justify-between items-center"
+}, nd = { class: "mr-1 select-none" }, sd = /* @__PURE__ */ ce({
+  __name: "AutoQueryGrid",
+  props: {
+    filterDefinitions: null,
+    id: { default: "AutoQueryGrid" },
+    apis: null,
+    type: null,
+    prefs: null,
+    deny: null,
+    hide: null,
+    selectedColumns: null,
+    toolbarButtonClass: null,
+    tableStyle: null,
+    gridClass: null,
+    grid2Class: null,
+    grid3Class: null,
+    grid4Class: null,
+    tableClass: null,
+    theadClass: null,
+    tbodyClass: null,
+    theadRowClass: null,
+    theadCellClass: null,
+    headerTitle: null,
+    headerTitles: null,
+    visibleFrom: null,
+    rowClass: null,
+    rowStyle: null,
+    apiPrefs: null,
+    canFilter: null,
+    disableKeyBindings: null,
+    configureField: null,
+    skip: { default: 0 },
+    create: { type: Boolean },
+    edit: null,
+    filters: null
+  },
+  emits: ["headerSelected", "rowSelected"],
+  setup(e, { expose: t, emit: l }) {
+    const n = e, { config: i, autoQueryGridDefaults: r } = St(), d = r, c = Ne("client"), h = i.value.storage, m = "filtering,queryString,queryFilters".split(","), y = "copyApiUrl,downloadCsv,filtersView,newItem,pagingInfo,pagingNav,preferences,refresh,resetPreferences,toolbar".split(","), b = f(() => n.deny ? wt(m, n.deny) : wt(m, d.value.deny)), p = f(() => n.hide ? wt(y, n.hide) : wt(y, d.value.hide));
+    function v($) {
+      return b.value[$];
+    }
+    function g($) {
+      return p.value[$];
+    }
+    const P = f(() => n.tableStyle ?? d.value.tableStyle), N = f(() => n.gridClass ?? ge.getGridClass(P.value)), ee = f(() => n.grid2Class ?? ge.getGrid2Class(P.value)), j = f(() => n.grid3Class ?? ge.getGrid3Class(P.value)), z = f(() => n.grid4Class ?? ge.getGrid4Class(P.value)), F = f(() => n.tableClass ?? ge.getTableClass(P.value)), W = f(() => n.theadClass ?? ge.getTheadClass(P.value)), O = f(() => n.theadRowClass ?? ge.getTheadRowClass(P.value)), S = f(() => n.theadCellClass ?? ge.getTheadCellClass(P.value)), U = f(() => n.toolbarButtonClass ?? ge.toolbarButtonClass);
+    function te($, D) {
+      var Ae;
+      if (n.rowClass)
+        return n.rowClass($, D);
+      const me = !!be.value.AnyUpdate, pe = ((Ae = Ve.value) != null && Ae.name ? ye($, Ve.value.name) : null) == L.value;
+      return ge.getTableRowClass(n.tableStyle, D, pe, me);
+    }
+    const R = en(), J = f(() => {
+      var $;
+      return jl((($ = be.value.AnyQuery.viewModel) == null ? void 0 : $.name) || be.value.AnyQuery.dataModel.name);
+    }), Y = f(() => {
+      const $ = Object.keys(R).map((D) => D.toLowerCase());
+      return et(J.value).filter((D) => $.includes(D.name.toLowerCase()) || $.includes(D.name.toLowerCase() + "-header")).map((D) => D.name);
+    });
+    function G() {
+      let $ = pt(n.selectedColumns);
+      return $.length > 0 ? $ : Y.value.length > 0 ? Y.value : [];
+    }
+    const M = f(() => {
+      let D = G().map((ae) => ae.toLowerCase());
+      const me = et(J.value);
+      return D.length > 0 ? D.map((ae) => me.find((pe) => pe.name.toLowerCase() === ae)).filter((ae) => ae != null) : me;
+    }), le = f(() => {
+      let $ = M.value.map((me) => me.name), D = pt(de.value.selectedColumns).map((me) => me.toLowerCase());
+      return D.length > 0 ? $.filter((me) => D.includes(me.toLowerCase())) : $;
+    }), x = A([]), K = A(new Je()), E = A(new Je()), q = A(), C = A(!1), L = A(), B = A(), fe = A(!1), I = A(), V = A(n.skip), oe = A(!1), Le = 25, de = A({ take: Le }), ue = A(!1), _ = f(() => x.value.some(($) => $.settings.filters.length > 0 || !!$.settings.sort) || de.value.selectedColumns), ie = f(() => x.value.map(($) => $.settings.filters.length).reduce(($, D) => $ + D, 0)), xe = f(() => {
+      var $;
+      return et(jl(At.value || (($ = be.value.AnyQuery) == null ? void 0 : $.dataModel.name)));
+    }), Ve = f(() => {
+      var $;
+      return el(jl(At.value || (($ = be.value.AnyQuery) == null ? void 0 : $.dataModel.name)));
+    }), he = f(() => de.value.take ?? Le), De = f(() => K.value.response ? ye(K.value.response, "results") : []), Q = f(() => {
+      var $;
+      return (($ = K.value.response) == null ? void 0 : $.total) ?? De.value.length ?? 0;
+    }), H = f(() => V.value > 0), re = f(() => V.value > 0), ve = f(() => De.value.length >= he.value), Se = f(() => De.value.length >= he.value), Oe = A(), Re = A(), _e = {
+      NoQuery: "No Query API was found"
+    };
+    t({ update: lt, search: Tn, createRequestArgs: Il, reset: Hn, createDone: Nt, createSave: Pl, editDone: zt, editSave: al, forceUpdate: An, setEdit: Fl, edit: B }), ne.interceptors.has("AutoQueryGrid.new") && ne.interceptors.invoke("AutoQueryGrid.new", { props: n });
+    function Fe($) {
+      if ($) {
+        if (n.canFilter)
+          return n.canFilter($);
+        const D = xe.value.find((me) => me.name.toLowerCase() == $.toLowerCase());
+        if (D)
+          return !ps(D);
+      }
+      return !1;
+    }
+    function Qe($) {
+      v("queryString") && nn($);
+    }
+    async function je($) {
+      V.value += $, V.value < 0 && (V.value = 0);
+      const D = Math.floor(Q.value / he.value) * he.value;
+      V.value > D && (V.value = D), Qe({ skip: V.value || void 0 }), await lt();
+    }
+    async function Ge($, D) {
+      var pe, Ae;
+      if (B.value = null, L.value = D, !$ || !D)
+        return;
+      let me = Gt(be.value.AnyQuery, { [$]: D });
+      const ae = await c.api(me);
+      if (ae.succeeded) {
+        let Ee = (pe = ye(ae.response, "results")) == null ? void 0 : pe[0];
+        Ee || console.warn(`API ${(Ae = be.value.AnyQuery) == null ? void 0 : Ae.request.name}(${$}:${D}) returned no results`), B.value = Ee;
+      }
+    }
+    async function Mt($, D) {
+      var pe;
+      l("rowSelected", $, D);
+      const me = (pe = Ve.value) == null ? void 0 : pe.name, ae = me ? ye($, me) : null;
+      !me || !ae || (Qe({ edit: ae }), Ge(me, ae));
+    }
+    function vt($, D) {
+      var ae;
+      if (!v("filtering"))
+        return;
+      let me = D.target;
+      if (Fe($) && (me == null ? void 0 : me.tagName) !== "TD") {
+        let pe = (ae = me == null ? void 0 : me.closest("TABLE")) == null ? void 0 : ae.getBoundingClientRect(), Ae = x.value.find((Ee) => Ee.name.toLowerCase() == $.toLowerCase());
+        if (Ae && pe) {
+          let Ee = 318, it = pe.x + Ee + 10;
+          I.value = {
+            column: Ae,
+            topLeft: {
+              x: Math.max(Math.floor(D.clientX + Ee / 2), it),
+              y: pe.y + 45
+            }
+          };
+        }
+      }
+      l("headerSelected", $, D);
+    }
+    function ll() {
+      I.value = null;
+    }
+    async function nl($) {
+      var me;
+      let D = (me = I.value) == null ? void 0 : me.column;
+      D && (D.settings = $, h.setItem(sl(D.name), JSON.stringify(D.settings)), await lt()), I.value = null;
+    }
+    async function Qs($) {
+      h.setItem(sl($.name), JSON.stringify($.settings)), await lt();
+    }
+    async function Ks($) {
+      fe.value = !1, de.value = $, h.setItem(Dl(), JSON.stringify($)), await lt();
+    }
+    function Fl($) {
+      Object.assign(B.value, $), An();
+    }
+    function An() {
+      var D, me, ae;
+      (D = Oe.value) == null || D.forceUpdate(), (me = Re.value) == null || me.forceUpdate();
+      const $ = Be();
+      (ae = $ == null ? void 0 : $.proxy) == null || ae.$forceUpdate();
+    }
+    async function lt() {
+      await Tn(Il());
+    }
+    async function Zs() {
+      await lt();
+    }
+    async function Tn($) {
+      const D = be.value.AnyQuery;
+      if (!D) {
+        console.error(_e.NoQuery);
+        return;
+      }
+      let me = Gt(D, $), ae = es((Ee) => {
+        K.value.response = K.value.error = void 0, ue.value = Ee;
+      }), pe = await c.api(me);
+      ae(), xt(() => K.value = pe);
+      let Ae = ye(pe.response, "results") || [];
+      !pe.succeeded || Ae.label == 0;
+    }
+    function Il() {
+      let $ = {
+        include: "total",
+        take: he.value
+      }, D = pt(de.value.selectedColumns || n.selectedColumns);
+      if (D.length > 0) {
+        let ae = Ve.value;
+        ae && !D.includes(ae.name) && (D = [ae.name, ...D]);
+        const pe = xe.value, Ae = [];
+        D.forEach((Ee) => {
+          var il;
+          const it = pe.find((Pe) => Pe.name.toLowerCase() == Ee.toLowerCase());
+          (il = it == null ? void 0 : it.ref) != null && il.selfId && Ae.push(it.ref.selfId), ye(R, Ee) && Ae.push(...pe.filter((Pe) => {
+            var ht, Ut;
+            return ((Ut = (ht = Pe.ref) == null ? void 0 : ht.selfId) == null ? void 0 : Ut.toLowerCase()) == Ee.toLowerCase();
+          }).map((Pe) => Pe.name));
+        }), Ae.forEach((Ee) => {
+          D.includes(Ee) || D.push(Ee);
+        }), $.fields = D.join(",");
+      }
+      let me = [];
+      if (x.value.forEach((ae) => {
+        ae.settings.sort && me.push((ae.settings.sort === "DESC" ? "-" : "") + ae.name), ae.settings.filters.forEach((pe) => {
+          let Ae = pe.key.replace("%", ae.name);
+          $[Ae] = pe.value;
+        });
+      }), n.filters && Object.keys(n.filters).forEach((ae) => {
+        $[ae] = n.filters[ae];
+      }), v("queryString") && v("queryFilters")) {
+        const ae = location.search ? location.search : location.hash.includes("?") ? "?" + dl(location.hash, "?") : "";
+        let pe = zl(ae);
+        if (Object.keys(pe).forEach((Ae) => {
+          M.value.find((it) => it.name.toLowerCase() === Ae.toLowerCase()) && ($[Ae] = pe[Ae]);
+        }), typeof pe.skip < "u") {
+          const Ae = parseInt(pe.skip);
+          isNaN(Ae) || (V.value = $.skip = Ae);
+        }
+      }
+      return typeof $.skip > "u" && V.value > 0 && ($.skip = V.value), me.length > 0 && ($.orderBy = me.join(",")), $;
+    }
+    function Gs() {
+      const $ = Fn("csv");
+      ql($), typeof window < "u" && window.open($);
+    }
+    function Ws() {
+      const $ = Fn("json");
+      ql($), oe.value = !0, setTimeout(() => oe.value = !1, 3e3);
+    }
+    function Fn($ = "json") {
+      var Ae;
+      const D = Il(), me = `/api/${(Ae = be.value.AnyQuery) == null ? void 0 : Ae.request.name}`, ae = ko(c.baseUrl, Kt(me, { ...D, jsconfig: "edv" }));
+      return ae.indexOf("?") >= 0 ? xl(ae, "?") + "." + $ + "?" + dl(ae, "?") : ae + ".json";
+    }
+    async function Js() {
+      x.value.forEach(($) => {
+        $.settings = { filters: [] }, h.removeItem(sl($.name));
+      }), de.value = { take: Le }, h.removeItem(Dl()), await lt();
+    }
+    function Xs() {
+      C.value = !0, Qe({ create: null });
+    }
+    const At = f(() => Et(n.type)), ct = f(() => {
+      var $;
+      return At.value || (($ = be.value.AnyQuery) == null ? void 0 : $.dataModel.name);
+    }), Dl = () => {
+      var $;
+      return `${n.id}/ApiPrefs/${At.value || (($ = be.value.AnyQuery) == null ? void 0 : $.dataModel.name)}`;
+    }, sl = ($) => {
+      var D;
+      return `Column/${n.id}:${At.value || ((D = be.value.AnyQuery) == null ? void 0 : D.dataModel.name)}.${$}`;
+    }, { metadataApi: In, typeOf: jl, apiOf: Dn, filterDefinitions: Ys } = at(), { invalidAccessMessage: Ol } = Ln(), jn = f(() => n.filterDefinitions || Ys.value), be = f(() => {
+      let $ = pt(n.apis);
+      return $.length > 0 ? Pt.from($.map((D) => Dn(D)).filter((D) => D != null).map((D) => D)) : Pt.forType(At.value, In.value);
+    }), ol = ($) => `<span class="text-yellow-700">${$}</span>`, On = f(() => {
+      if (!In.value)
+        return ol(`AppMetadata not loaded, see <a class="${bl.blue}" href="https://docs.servicestack.net/vue/use-metadata" target="_blank">useMetadata()</a>`);
+      let D = pt(n.apis).map((ae) => Dn(ae) == null ? ae : null).filter((ae) => ae != null);
+      if (D.length > 0)
+        return ol(`Unknown API${D.length > 1 ? "s" : ""}: ${D.join(", ")}`);
+      let me = be.value;
+      return me.empty ? ol("Mising DataModel in property 'type' or AutoQuery APIs to use in property 'apis'") : me.AnyQuery ? null : ol(_e.NoQuery);
+    }), Pn = f(() => be.value.AnyQuery && Ol(be.value.AnyQuery)), Bn = f(() => be.value.Create && Ol(be.value.Create)), Rn = f(() => be.value.AnyUpdate && Ol(be.value.AnyUpdate)), eo = f(() => vl(be.value.Create));
+    f(() => vl(be.value.AnyUpdate));
+    const En = f(() => vl(be.value.Delete));
+    function zt() {
+      B.value = null, L.value = null, Qe({ edit: void 0 });
+    }
+    function Nt() {
+      C.value = !1, Qe({ create: void 0 });
+    }
+    async function al() {
+      await lt(), zt();
+    }
+    async function Pl() {
+      await lt(), Nt();
+    }
+    function Hn() {
+      var me;
+      K.value = new Je(), E.value = new Je(), C.value = !1, L.value = null, B.value = null, fe.value = !1, I.value = null, V.value = n.skip, oe.value = !1, de.value = { take: Le }, ue.value = !1;
+      const $ = n.prefs || yl(h.getItem(Dl()));
+      $ && (de.value = $), x.value = M.value.map((ae) => ({
+        name: ae.name,
+        type: ae.type,
+        meta: ae,
+        settings: Object.assign(
+          {
+            filters: []
+          },
+          yl(h.getItem(sl(ae.name)))
+        )
+      })), isNaN(n.skip) || (V.value = n.skip);
+      let D = (me = Ve.value) == null ? void 0 : me.name;
+      if (v("queryString")) {
+        const ae = location.search ? location.search : location.hash.includes("?") ? "?" + dl(location.hash, "?") : "";
+        let pe = zl(ae);
+        typeof pe.create < "u" ? C.value = typeof pe.create < "u" : D && (typeof pe.edit == "string" || typeof pe.edit == "number") && Ge(D, pe.edit);
+      }
+      n.create === !0 && (C.value = !0), D && n.edit != null && Ge(D, n.edit);
+    }
+    return tt(async () => {
+      Hn(), await lt();
+    }), ($, D) => {
+      const me = X("Alert"), ae = X("EnsureAccessDialog"), pe = X("AutoCreateForm"), Ae = X("AutoEditForm"), Ee = X("ErrorSummary"), it = X("Loading"), zn = X("SettingsIcons"), il = X("DataGrid");
+      return o(On) ? (a(), u("div", Kr, [
+        $e(me, { innerHTML: o(On) }, null, 8, ["innerHTML"])
+      ])) : o(Pn) ? (a(), u("div", Zr, [
+        $e(qs, { "invalid-access": o(Pn) }, null, 8, ["invalid-access"])
+      ])) : (a(), u("div", Gr, [
+        C.value && o(be).Create ? (a(), u("div", Wr, [
+          o(Bn) ? (a(), se(ae, {
+            key: 0,
+            title: `Create ${o(ct)}`,
+            "invalid-access": o(Bn),
+            "alert-class": "text-yellow-700",
+            onDone: Nt
+          }, null, 8, ["title", "invalid-access"])) : o(R).createform ? Z($.$slots, "createform", {
+            key: 1,
+            type: o(be).Create.request.name,
+            configure: e.configureField,
+            done: Nt,
+            save: Pl
+          }) : (a(), se(pe, {
+            key: 2,
+            ref_key: "createForm",
+            ref: Oe,
+            type: o(be).Create.request.name,
+            configure: e.configureField,
+            onDone: Nt,
+            onSave: Pl
+          }, {
+            header: ke(() => [
+              Z($.$slots, "formheader", {
+                form: "create",
+                formInstance: Oe.value,
+                apis: o(be),
+                type: o(ct)
+              })
+            ]),
+            footer: ke(() => [
+              Z($.$slots, "formfooter", {
+                form: "create",
+                formInstance: Oe.value,
+                apis: o(be),
+                type: o(ct)
+              })
+            ]),
+            _: 3
+          }, 8, ["type", "configure"]))
+        ])) : B.value && o(be).AnyUpdate ? (a(), u("div", Jr, [
+          o(Rn) ? (a(), se(ae, {
+            key: 0,
+            title: `Update ${o(ct)}`,
+            "invalid-access": o(Rn),
+            "alert-class": "text-yellow-700",
+            onDone: zt
+          }, null, 8, ["title", "invalid-access"])) : o(R).editform ? Z($.$slots, "editform", {
+            key: 1,
+            model: B.value,
+            type: o(be).AnyUpdate.request.name,
+            deleteType: o(En) ? o(be).Delete.request.name : null,
+            configure: e.configureField,
+            done: zt,
+            save: al
+          }) : (a(), se(Ae, {
+            key: 2,
+            ref_key: "editForm",
+            ref: Re,
+            modelValue: B.value,
+            "onUpdate:modelValue": D[0] || (D[0] = (Pe) => B.value = Pe),
+            type: o(be).AnyUpdate.request.name,
+            deleteType: o(En) ? o(be).Delete.request.name : null,
+            configure: e.configureField,
+            onDone: zt,
+            onSave: al,
+            onDelete: al
+          }, {
+            header: ke(() => [
+              Z($.$slots, "formheader", {
+                form: "edit",
+                formInstance: Re.value,
+                apis: o(be),
+                type: o(ct),
+                model: B.value,
+                id: L.value,
+                updateModel: Fl
+              })
+            ]),
+            footer: ke(() => [
+              Z($.$slots, "formfooter", {
+                form: "edit",
+                formInstance: Re.value,
+                apis: o(be),
+                type: o(ct),
+                model: B.value,
+                id: L.value,
+                updateModel: Fl
+              })
+            ]),
+            _: 3
+          }, 8, ["modelValue", "type", "deleteType", "configure"]))
+        ])) : k("", !0),
+        o(R).toolbar ? Z($.$slots, "toolbar", { key: 2 }) : g("toolbar") ? (a(), u("div", Xr, [
+          fe.value ? (a(), se(Mn, {
+            key: 0,
+            columns: o(M),
+            prefs: de.value,
+            onDone: D[1] || (D[1] = (Pe) => fe.value = !1),
+            onSave: Ks
+          }, null, 8, ["columns", "prefs"])) : k("", !0),
+          s("div", Yr, [
+            s("div", eu, [
+              g("preferences") ? (a(), u("button", {
+                key: 0,
+                type: "button",
+                class: "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400",
+                title: `${o(ct)} Preferences`,
+                onClick: D[2] || (D[2] = (Pe) => fe.value = !fe.value)
+              }, nu, 8, tu)) : k("", !0),
+              g("pagingNav") ? (a(), u("button", {
+                key: 1,
+                type: "button",
+                class: w(["pl-2", o(H) ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500"]),
+                title: "First page",
+                disabled: !o(H),
+                onClick: D[3] || (D[3] = (Pe) => je(-o(Q)))
+              }, au, 10, su)) : k("", !0),
+              g("pagingNav") ? (a(), u("button", {
+                key: 2,
+                type: "button",
+                class: w(["pl-2", o(re) ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500"]),
+                title: "Previous page",
+                disabled: !o(re),
+                onClick: D[4] || (D[4] = (Pe) => je(-o(he)))
+              }, uu, 10, iu)) : k("", !0),
+              g("pagingNav") ? (a(), u("button", {
+                key: 3,
+                type: "button",
+                class: w(["pl-2", o(ve) ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500"]),
+                title: "Next page",
+                disabled: !o(ve),
+                onClick: D[5] || (D[5] = (Pe) => je(o(he)))
+              }, fu, 10, du)) : k("", !0),
+              g("pagingNav") ? (a(), u("button", {
+                key: 4,
+                type: "button",
+                class: w(["pl-2", o(Se) ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500"]),
+                title: "Last page",
+                disabled: !o(Se),
+                onClick: D[6] || (D[6] = (Pe) => je(o(Q)))
+              }, hu, 10, mu)) : k("", !0)
+            ]),
+            g("pagingInfo") ? (a(), u("div", gu, [
+              s("div", pu, [
+                ue.value ? (a(), u("span", yu, "Querying...")) : k("", !0),
+                o(De).length ? (a(), u("span", bu, [
+                  wu,
+                  we(" " + T(V.value + 1) + " - " + T(Math.min(V.value + o(De).length, o(Q))) + " ", 1),
+                  s("span", null, " of " + T(o(Q)), 1)
+                ])) : K.value.completed ? (a(), u("span", xu, "No Results")) : k("", !0)
+              ])
+            ])) : k("", !0),
+            s("div", ku, [
+              g("refresh") ? (a(), u("div", $u, [
+                s("button", {
+                  type: "button",
+                  onClick: Zs,
+                  title: "Refresh",
+                  class: w(o(U))
+                }, _u, 2)
+              ])) : k("", !0),
+              g("downloadCsv") ? (a(), u("div", Lu, [
+                s("button", {
+                  type: "button",
+                  onClick: Gs,
+                  title: "Download CSV",
+                  class: w(o(U))
+                }, Su, 2)
+              ])) : k("", !0),
+              g("copyApiUrl") ? (a(), u("div", Mu, [
+                s("button", {
+                  type: "button",
+                  onClick: Ws,
+                  title: "Copy API URL",
+                  class: w(o(U))
+                }, [
+                  oe.value ? (a(), u("svg", Au, Fu)) : (a(), u("svg", Iu, ju)),
+                  Ou
+                ], 2)
+              ])) : k("", !0),
+              o(_) && g("resetPreferences") ? (a(), u("div", Pu, [
+                s("button", {
+                  type: "button",
+                  onClick: Js,
+                  title: "Reset Preferences & Filters",
+                  class: w(o(U))
+                }, Ru, 2)
+              ])) : k("", !0),
+              g("filtersView") && o(ie) > 0 ? (a(), u("div", Eu, [
+                s("button", {
+                  type: "button",
+                  onClick: D[7] || (D[7] = (Pe) => q.value = q.value == "filters" ? null : "filters"),
+                  class: w(o(U)),
+                  "aria-expanded": "false"
+                }, [
+                  Hu,
+                  s("span", zu, T(o(ie)) + " " + T(o(ie) == 1 ? "Filter" : "Filters"), 1),
+                  q.value != "filters" ? (a(), u("svg", Nu, qu)) : (a(), u("svg", Qu, Zu))
+                ], 2)
+              ])) : k("", !0),
+              g("newItem") && o(be).Create && o(eo) ? (a(), u("div", Gu, [
+                s("button", {
+                  type: "button",
+                  onClick: Xs,
+                  title: o(ct),
+                  class: w(o(U))
+                }, [
+                  Ju,
+                  s("span", Xu, "New " + T(o(ct)), 1)
+                ], 10, Wu)
+              ])) : k("", !0),
+              o(R).toolbarbuttons ? Z($.$slots, "toolbarbuttons", {
+                key: 6,
+                toolbarButtonClass: o(U)
+              }) : k("", !0)
+            ])
+          ])
+        ])) : k("", !0),
+        q.value == "filters" ? (a(), se(Sn, {
+          key: 4,
+          class: "border-y border-gray-200 dark:border-gray-800 py-8 my-2",
+          definitions: o(jn),
+          columns: x.value,
+          onDone: D[8] || (D[8] = (Pe) => q.value = null),
+          onChange: Qs
+        }, null, 8, ["definitions", "columns"])) : k("", !0),
+        E.value.error ?? K.value.error ? (a(), se(Ee, {
+          key: 5,
+          status: E.value.error ?? K.value.error
+        }, null, 8, ["status"])) : ue.value ? (a(), se(it, {
+          key: 6,
+          class: "p-2"
+        })) : k("", !0),
+        I.value ? (a(), u("div", Yu, [
+          $e(Vn, {
+            definitions: o(jn),
+            column: I.value.column,
+            "top-left": I.value.topLeft,
+            onDone: ll,
+            onSave: nl
+          }, null, 8, ["definitions", "column", "top-left"])
+        ])) : k("", !0),
+        o(De).length ? (a(), se(il, {
+          key: 8,
+          id: e.id,
+          items: o(De),
+          type: e.type,
+          "selected-columns": o(le),
+          class: "mt-1",
+          onFiltersChanged: lt,
+          tableStyle: o(P),
+          gridClass: o(N),
+          grid2Class: o(ee),
+          grid3Class: o(j),
+          grid4Class: o(z),
+          tableClass: o(F),
+          theadClass: o(W),
+          theadRowClass: o(O),
+          theadCellClass: o(S),
+          tbodyClass: e.tbodyClass,
+          rowClass: te,
+          onRowSelected: Mt,
+          rowStyle: e.rowStyle,
+          headerTitle: e.headerTitle,
+          headerTitles: e.headerTitles,
+          visibleFrom: e.visibleFrom,
+          onHeaderSelected: vt
+        }, tn({
+          header: ke(({ column: Pe, label: ht }) => {
+            var Ut;
+            return [
+              v("filtering") && Fe(Pe) ? (a(), u("div", ed, [
+                s("span", td, T(ht), 1),
+                $e(zn, {
+                  column: x.value.find((to) => to.name.toLowerCase() === Pe.toLowerCase()),
+                  "is-open": ((Ut = I.value) == null ? void 0 : Ut.column.name) === Pe
+                }, null, 8, ["column", "is-open"])
+              ])) : (a(), u("div", ld, [
+                s("span", nd, T(ht), 1)
+              ]))
+            ];
+          }),
+          _: 2
+        }, [
+          Ie(Object.keys(o(R)), (Pe) => ({
+            name: Pe,
+            fn: ke((ht) => [
+              Z($.$slots, Pe, jt(gl(ht)))
+            ])
+          }))
+        ]), 1032, ["id", "items", "type", "selected-columns", "tableStyle", "gridClass", "grid2Class", "grid3Class", "grid4Class", "tableClass", "theadClass", "theadRowClass", "theadCellClass", "tbodyClass", "rowStyle", "headerTitle", "headerTitles", "visibleFrom"])) : k("", !0)
+      ]));
+    };
+  }
+}), od = { class: "flex" }, ad = {
+  key: 0,
+  class: "w-4 h-4",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, id = /* @__PURE__ */ s("g", { fill: "none" }, [
+  /* @__PURE__ */ s("path", {
+    d: "M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2.586a1 1 0 0 1-.293.707l-6.414 6.414a1 1 0 0 0-.293.707V17l-4 4v-6.586a1 1 0 0 0-.293-.707L3.293 7.293A1 1 0 0 1 3 6.586V4z",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  })
+], -1), rd = [
+  id
+], ud = /* @__PURE__ */ s("path", {
+  d: "M505.5 658.7c3.2 4.4 9.7 4.4 12.9 0l178-246c3.8-5.3 0-12.7-6.5-12.7H643c-10.2 0-19.9 4.9-25.9 13.2L512 558.6L406.8 413.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246z",
+  fill: "currentColor"
+}, null, -1), dd = /* @__PURE__ */ s("path", {
+  d: "M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z",
+  fill: "currentColor"
+}, null, -1), cd = [
+  ud,
+  dd
+], fd = {
+  key: 2,
+  class: "w-4 h-4",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20"
+}, md = /* @__PURE__ */ s("g", { fill: "none" }, [
+  /* @__PURE__ */ s("path", {
+    d: "M8.998 4.71L6.354 7.354a.5.5 0 1 1-.708-.707L9.115 3.18A.499.499 0 0 1 9.498 3H9.5a.5.5 0 0 1 .354.147l.01.01l3.49 3.49a.5.5 0 1 1-.707.707l-2.65-2.649V16.5a.5.5 0 0 1-1 0V4.71z",
+    fill: "currentColor"
+  })
+], -1), vd = [
+  md
+], hd = {
+  key: 3,
+  class: "w-4 h-4",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20"
+}, gd = /* @__PURE__ */ s("g", { fill: "none" }, [
+  /* @__PURE__ */ s("path", {
+    d: "M10.002 15.29l2.645-2.644a.5.5 0 0 1 .707.707L9.886 16.82a.5.5 0 0 1-.384.179h-.001a.5.5 0 0 1-.354-.147l-.01-.01l-3.49-3.49a.5.5 0 1 1 .707-.707l2.648 2.649V3.5a.5.5 0 0 1 1 0v11.79z",
+    fill: "currentColor"
+  })
+], -1), pd = [
+  gd
+], yd = /* @__PURE__ */ ce({
+  __name: "SettingsIcons",
+  props: {
+    column: null,
+    isOpen: { type: Boolean }
+  },
+  setup(e) {
+    return (t, l) => {
+      var n, i, r, d, c, h, m;
+      return a(), u("div", od, [
+        (r = (i = (n = e.column) == null ? void 0 : n.settings) == null ? void 0 : i.filters) != null && r.length ? (a(), u("svg", ad, rd)) : (a(), u("svg", {
+          key: 1,
+          class: w(["w-4 h-4 transition-transform", e.isOpen ? "rotate-180" : ""]),
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 1024 1024"
+        }, cd, 2)),
+        ((c = (d = e.column) == null ? void 0 : d.settings) == null ? void 0 : c.sort) === "ASC" ? (a(), u("svg", fd, vd)) : ((m = (h = e.column) == null ? void 0 : h.settings) == null ? void 0 : m.sort) === "DESC" ? (a(), u("svg", hd, pd)) : k("", !0)
+      ]);
+    };
+  }
+}), bd = /* @__PURE__ */ ce({
+  __name: "EnsureAccessDialog",
+  props: {
+    title: null,
+    subtitle: null,
+    invalidAccess: null,
+    alertClass: null
+  },
+  emits: ["done"],
+  setup(e) {
+    return (t, l) => {
+      const n = X("EnsureAccess"), i = X("SlideOver");
+      return e.invalidAccess ? (a(), se(i, {
+        key: 0,
+        title: e.title,
+        onDone: l[0] || (l[0] = (r) => t.$emit("done")),
+        "content-class": "relative flex-1"
+      }, tn({
+        default: ke(() => [
+          $e(n, {
+            alertClass: e.alertClass,
+            invalidAccess: e.invalidAccess
+          }, null, 8, ["alertClass", "invalidAccess"])
+        ]),
+        _: 2
+      }, [
+        e.subtitle ? {
+          name: "subtitle",
+          fn: ke(() => [
+            we(T(e.subtitle), 1)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["title"])) : k("", !0);
+    };
+  }
+}), wd = ["for"], xd = { class: "mt-1 relative rounded-md shadow-sm" }, kd = ["type", "name", "id", "placeholder", "value", "aria-invalid", "aria-describedby"], $d = {
+  key: 0,
+  class: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
+}, Cd = /* @__PURE__ */ s("svg", {
+  class: "h-5 w-5 text-red-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+    "clip-rule": "evenodd"
+  })
+], -1), _d = [
+  Cd
+], Ld = ["id"], Vd = ["id"], Sd = {
+  inheritAttrs: !1
+}, Md = /* @__PURE__ */ ce({
+  ...Sd,
+  __name: "TextInput",
+  props: {
+    status: null,
+    id: null,
+    type: null,
+    inputClass: null,
+    label: null,
+    labelClass: null,
+    help: null,
+    placeholder: null,
+    modelValue: null
+  },
+  setup(e, { expose: t }) {
+    const l = e, n = (p) => p.value;
+    t({
+      focus: r
+    });
+    const i = A();
+    function r() {
+      var p;
+      (p = i.value) == null || p.focus();
+    }
+    const d = f(() => l.type || "text"), c = f(() => l.label ?? He(st(l.id))), h = f(() => l.placeholder ?? c.value);
+    let m = Ne("ApiState", void 0);
+    const y = f(() => mt.call({ responseStatus: l.status ?? (m == null ? void 0 : m.error.value) }, l.id)), b = f(() => [nt.base, y.value ? nt.invalid : nt.valid, l.inputClass]);
+    return (p, v) => (a(), u("div", {
+      class: w([p.$attrs.class])
+    }, [
+      Z(p.$slots, "header", Me({
+        inputElement: i.value,
+        id: e.id,
+        modelValue: e.modelValue,
+        status: e.status
+      }, p.$attrs)),
+      o(c) ? (a(), u("label", {
+        key: 0,
+        for: e.id,
+        class: w(`block text-sm font-medium text-gray-700 dark:text-gray-300 ${e.labelClass ?? ""}`)
+      }, T(o(c)), 11, wd)) : k("", !0),
+      s("div", xd, [
+        s("input", Me({
+          ref_key: "inputElement",
+          ref: i,
+          type: o(d),
+          name: e.id,
+          id: e.id,
+          class: o(b),
+          placeholder: o(h),
+          value: e.modelValue,
+          onInput: v[0] || (v[0] = (g) => p.$emit("update:modelValue", n(g.target))),
+          "aria-invalid": o(y) != null,
+          "aria-describedby": `${e.id}-error`,
+          step: "any"
+        }, o(dt)(p.$attrs, ["class"])), null, 16, kd),
+        o(y) ? (a(), u("div", $d, _d)) : k("", !0)
+      ]),
+      o(y) ? (a(), u("p", {
+        key: 1,
+        class: "mt-2 text-sm text-red-500",
+        id: `${e.id}-error`
+      }, T(o(y)), 9, Ld)) : e.help ? (a(), u("p", {
+        key: 2,
+        class: "mt-2 text-sm text-gray-500",
+        id: `${e.id}-description`
+      }, T(e.help), 9, Vd)) : k("", !0),
+      Z(p.$slots, "footer", Me({
+        inputElement: i.value,
+        id: e.id,
+        modelValue: e.modelValue,
+        status: e.status
+      }, p.$attrs))
+    ], 2));
+  }
+}), Ad = ["for"], Td = { class: "mt-1 relative rounded-md shadow-sm" }, Fd = ["name", "id", "placeholder", "aria-invalid", "aria-describedby"], Id = ["id"], Dd = ["id"], jd = {
+  inheritAttrs: !1
+}, Od = /* @__PURE__ */ ce({
+  ...jd,
+  __name: "TextareaInput",
+  props: {
+    status: null,
+    id: null,
+    inputClass: null,
+    label: null,
+    labelClass: null,
+    help: null,
+    placeholder: null,
+    modelValue: null
+  },
+  setup(e) {
+    const t = e, l = (h) => h.value, n = f(() => t.label ?? He(st(t.id))), i = f(() => t.placeholder ?? n.value);
+    let r = Ne("ApiState", void 0);
+    const d = f(() => mt.call({ responseStatus: t.status ?? (r == null ? void 0 : r.error.value) }, t.id)), c = f(() => ["shadow-sm " + nt.base, d.value ? "text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300" : "text-gray-900 " + nt.valid, t.inputClass]);
+    return (h, m) => (a(), u("div", {
+      class: w([h.$attrs.class])
+    }, [
+      o(n) ? (a(), u("label", {
+        key: 0,
+        for: e.id,
+        class: w(`block text-sm font-medium text-gray-700 dark:text-gray-300 ${e.labelClass ?? ""}`)
+      }, T(o(n)), 11, Ad)) : k("", !0),
+      s("div", Td, [
+        s("textarea", Me({
+          name: e.id,
+          id: e.id,
+          class: o(c),
+          placeholder: o(i),
+          onInput: m[0] || (m[0] = (y) => h.$emit("update:modelValue", l(y.target))),
+          "aria-invalid": o(d) != null,
+          "aria-describedby": `${e.id}-error`
+        }, o(dt)(h.$attrs, ["class"])), T(e.modelValue), 17, Fd)
+      ]),
+      o(d) ? (a(), u("p", {
+        key: 1,
+        class: "mt-2 text-sm text-red-500",
+        id: `${e.id}-error`
+      }, T(o(d)), 9, Id)) : e.help ? (a(), u("p", {
+        key: 2,
+        class: "mt-2 text-sm text-gray-500",
+        id: `${e.id}-description`
+      }, T(e.help), 9, Dd)) : k("", !0)
+    ], 2));
+  }
+}), Pd = ["for"], Bd = ["id", "name", "value", "aria-invalid", "aria-describedby"], Rd = ["value"], Ed = ["id"], Hd = {
+  inheritAttrs: !1
+}, zd = /* @__PURE__ */ ce({
+  ...Hd,
+  __name: "SelectInput",
+  props: {
+    status: null,
+    id: null,
+    modelValue: null,
+    inputClass: null,
+    label: null,
+    labelClass: null,
+    options: null,
+    values: null,
+    entries: null
+  },
+  setup(e) {
+    const t = e, l = (c) => c.value, n = f(() => t.label ?? He(st(t.id)));
+    let i = Ne("ApiState", void 0);
+    const r = f(() => mt.call({ responseStatus: t.status ?? (i == null ? void 0 : i.error.value) }, t.id)), d = f(() => t.entries || (t.values ? t.values.map((c) => ({ key: c, value: c })) : t.options ? Object.keys(t.options).map((c) => ({ key: c, value: t.options[c] })) : []));
+    return (c, h) => (a(), u("div", {
+      class: w([c.$attrs.class])
+    }, [
+      o(n) ? (a(), u("label", {
+        key: 0,
+        for: e.id,
+        class: w(`block text-sm font-medium text-gray-700 dark:text-gray-300 ${e.labelClass ?? ""}`)
+      }, T(o(n)), 11, Pd)) : k("", !0),
+      s("select", Me({
+        id: e.id,
+        name: e.id,
+        class: [
+          "mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none sm:text-sm rounded-md dark:text-white dark:bg-gray-900 dark:border-gray-600",
+          o(r) ? "border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500" : "border-gray-300 text-gray-900 focus:ring-indigo-500 focus:border-indigo-500",
+          e.inputClass
+        ],
+        value: e.modelValue,
+        onInput: h[0] || (h[0] = (m) => c.$emit("update:modelValue", l(m.target))),
+        "aria-invalid": o(r) != null,
+        "aria-describedby": `${e.id}-error`
+      }, o(dt)(c.$attrs, ["class"])), [
+        (a(!0), u(Te, null, Ie(o(d), (m) => (a(), u("option", {
+          value: m.key
+        }, T(m.value), 9, Rd))), 256))
+      ], 16, Bd),
+      o(r) ? (a(), u("p", {
+        key: 1,
+        class: "mt-2 text-sm text-red-500",
+        id: `${e.id}-error`
+      }, T(o(r)), 9, Ed)) : k("", !0)
+    ], 2));
+  }
+}), Nd = { class: "flex items-center h-5" }, Ud = ["id", "name", "checked"], qd = { class: "ml-3 text-sm" }, Qd = ["for"], Kd = {
+  key: 0,
+  class: "mt-2 text-sm text-red-500",
+  id: "`${id}-error`"
+}, Zd = {
+  key: 1,
+  class: "mt-2 text-sm text-gray-500",
+  id: "`${id}-description`"
+}, Gd = {
+  inheritAttrs: !1
+}, Wd = /* @__PURE__ */ ce({
+  ...Gd,
+  __name: "CheckboxInput",
+  props: {
+    modelValue: { type: Boolean },
+    status: null,
+    id: null,
+    inputClass: null,
+    label: null,
+    labelClass: null,
+    help: null
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const l = e, n = f(() => l.label ?? He(st(l.id)));
+    let i = Ne("ApiState", void 0);
+    const r = f(() => mt.call({ responseStatus: l.status ?? (i == null ? void 0 : i.error.value) }, l.id));
+    return (d, c) => (a(), u("div", {
+      class: w(["relative flex items-start", d.$attrs.class])
+    }, [
+      s("div", Nd, [
+        s("input", Me({
+          id: e.id,
+          name: e.id,
+          type: "checkbox",
+          checked: e.modelValue,
+          onInput: c[0] || (c[0] = (h) => d.$emit("update:modelValue", h.target.checked)),
+          class: ["focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800", e.inputClass]
+        }, o(dt)(d.$attrs, ["class"])), null, 16, Ud)
+      ]),
+      s("div", qd, [
+        s("label", {
+          for: e.id,
+          class: w(`font-medium text-gray-700 dark:text-gray-300 ${e.labelClass ?? ""}`)
+        }, T(o(n)), 11, Qd),
+        o(r) ? (a(), u("p", Kd, T(o(r)), 1)) : e.help ? (a(), u("p", Zd, T(e.help), 1)) : k("", !0)
+      ])
+    ], 2));
+  }
+}), Jd = ["id"], Xd = ["for"], Yd = { class: "mt-1 relative rounded-md shadow-sm" }, ec = ["id", "name", "value"], tc = ["onClick"], lc = { class: "flex flex-wrap pb-1.5" }, nc = { class: "pt-1.5 pl-1" }, sc = { class: "inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 dark:bg-indigo-800 text-indigo-700 dark:text-indigo-300" }, oc = ["onClick"], ac = /* @__PURE__ */ s("svg", {
+  class: "h-2 w-2",
+  stroke: "currentColor",
+  fill: "none",
+  viewBox: "0 0 8 8"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-width": "1.5",
+    d: "M1 1l6 6m0-6L1 7"
+  })
+], -1), ic = [
+  ac
+], rc = { class: "pt-1.5 pl-1 shrink" }, uc = ["type", "name", "id", "aria-invalid", "aria-describedby", "onPaste"], dc = ["id"], cc = ["onMouseover", "onClick"], fc = { class: "block truncate" }, mc = {
+  key: 1,
+  class: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
+}, vc = /* @__PURE__ */ s("svg", {
+  class: "h-5 w-5 text-red-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+    "clip-rule": "evenodd"
+  })
+], -1), hc = [
+  vc
+], gc = ["id"], pc = ["id"], yc = {
+  inheritAttrs: !1
+}, bc = /* @__PURE__ */ ce({
+  ...yc,
+  __name: "TagInput",
+  props: {
+    status: null,
+    id: null,
+    type: null,
+    inputClass: null,
+    label: null,
+    labelClass: null,
+    help: null,
+    modelValue: { default: () => [] },
+    delimiters: { default: () => [","] },
+    allowableValues: null,
+    string: { type: Boolean },
+    converter: null
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const l = e;
+    function n(x) {
+      return l.converter ? l.converter(x) : x;
+    }
+    const i = f(() => qe(n(l.modelValue), (x) => typeof x == "string" ? x.trim().length == 0 ? [] : x.split(",") : x) || []), r = A(), d = A(!1), c = f(() => !l.allowableValues || l.allowableValues.length == 0 ? [] : l.allowableValues.filter((x) => !i.value.includes(x) && x.toLowerCase().includes(y.value.toLowerCase())));
+    function h(x) {
+      r.value = x;
+    }
+    const m = A(null), y = A(""), b = f(() => l.type || "text"), p = f(() => l.label ?? He(st(l.id)));
+    let v = Ne("ApiState", void 0);
+    const g = f(() => mt.call({ responseStatus: l.status ?? (v == null ? void 0 : v.error.value) }, l.id)), P = f(() => [
+      "w-full cursor-text flex flex-wrap sm:text-sm rounded-md dark:text-white dark:bg-gray-900 border focus-within:border-transparent focus-within:ring-1 focus-within:outline-none",
+      g.value ? "pr-10 border-red-300 text-red-900 placeholder-red-300 focus-within:outline-none focus-within:ring-red-500 focus-within:border-red-500" : "shadow-sm border-gray-300 dark:border-gray-600 focus-within:ring-indigo-500 focus-within:border-indigo-500",
+      l.inputClass
+    ]), N = (x) => O(i.value.filter((K) => K != x));
+    function ee(x) {
+      var K;
+      document.activeElement === x.target && ((K = m.value) == null || K.focus());
+    }
+    const j = A();
+    function z() {
+      d.value = !0, j.value = !0;
+    }
+    function F() {
+      z();
+    }
+    function W() {
+      G(U()), j.value = !1, setTimeout(() => {
+        j.value || (d.value = !1);
+      }, 200);
+    }
+    function O(x) {
+      const K = l.string ? x.join(",") : x;
+      t("update:modelValue", K);
+    }
+    function S(x) {
+      if (x.key == "Backspace" && y.value.length == 0 && i.value.length > 0 && N(i.value[i.value.length - 1]), !(!l.allowableValues || l.allowableValues.length == 0))
+        if (x.code == "Escape" || x.code == "Tab")
+          d.value = !1;
+        else if (x.code == "Home")
+          r.value = c.value[0], J();
+        else if (x.code == "End")
+          r.value = c.value[c.value.length - 1], J();
+        else if (x.code == "ArrowDown") {
+          if (d.value = !0, !r.value)
+            r.value = c.value[0];
+          else {
+            const K = c.value.indexOf(r.value);
+            r.value = K + 1 < c.value.length ? c.value[K + 1] : c.value[0];
+          }
+          Y();
+        } else if (x.code == "ArrowUp") {
+          if (!r.value)
+            r.value = c.value[c.value.length - 1];
+          else {
+            const K = c.value.indexOf(r.value);
+            r.value = K - 1 >= 0 ? c.value[K - 1] : c.value[c.value.length - 1];
+          }
+          Y();
+        } else
+          x.code == "Enter" ? r.value && d.value ? (G(r.value), x.preventDefault()) : d.value = !1 : d.value = c.value.length > 0;
+    }
+    function U() {
+      if (y.value.length == 0)
+        return "";
+      let x = $o(y.value.trim(), ",");
+      return x[0] == "," && (x = x.substring(1)), x = x.trim(), x.length == 0 && d.value && c.value.length > 0 ? r.value : x;
+    }
+    function te(x) {
+      const K = U();
+      if (K.length > 0) {
+        const E = l.delimiters.some((C) => C == x.key);
+        if (E && x.preventDefault(), x.key == "Enter" || x.key == "NumpadEnter" || x.key.length == 1 && E) {
+          G(K);
+          return;
+        }
+      }
+    }
+    const R = { behavior: "smooth", block: "nearest", inline: "nearest", scrollMode: "if-needed" };
+    function J() {
+      setTimeout(() => {
+        let x = pl(`#${l.id}-tag li.active`);
+        x && x.scrollIntoView(R);
+      }, 0);
+    }
+    function Y() {
+      setTimeout(() => {
+        let x = pl(`#${l.id}-tag li.active`);
+        x && ("scrollIntoViewIfNeeded" in x ? x.scrollIntoViewIfNeeded(R) : x.scrollIntoView(R));
+      }, 0);
+    }
+    function G(x) {
+      if (x.length === 0)
+        return;
+      const K = Array.from(i.value);
+      K.indexOf(x) == -1 && K.push(x), O(K), y.value = "", d.value = !1;
+    }
+    function M(x) {
+      var E;
+      const K = (E = x.clipboardData) == null ? void 0 : E.getData("Text");
+      le(K);
+    }
+    function le(x) {
+      if (!x)
+        return;
+      const K = new RegExp(`\\n|\\t|${l.delimiters.join("|")}`), E = Array.from(i.value);
+      x.split(K).map((C) => C.trim()).forEach((C) => {
+        E.indexOf(C) == -1 && E.push(C);
+      }), O(E), y.value = "";
+    }
+    return (x, K) => (a(), u("div", {
+      class: w([x.$attrs.class]),
+      id: `${e.id}-tag`,
+      onmousemove: "cancelBlur=true"
+    }, [
+      o(p) ? (a(), u("label", {
+        key: 0,
+        for: e.id,
+        class: w(`block text-sm font-medium text-gray-700 dark:text-gray-300 ${e.labelClass ?? ""}`)
+      }, T(o(p)), 11, Xd)) : k("", !0),
+      s("div", Yd, [
+        s("input", {
+          type: "hidden",
+          id: e.id,
+          name: e.id,
+          value: o(i).join(",")
+        }, null, 8, ec),
+        s("button", {
+          class: w(o(P)),
+          onClick: Ue(ee, ["prevent"]),
+          onFocus: K[2] || (K[2] = (E) => d.value = !0),
+          tabindex: "-1"
+        }, [
+          s("div", lc, [
+            (a(!0), u(Te, null, Ie(o(i), (E) => (a(), u("div", nc, [
+              s("span", sc, [
+                we(T(E) + " ", 1),
+                s("button", {
+                  type: "button",
+                  onClick: (q) => N(E),
+                  class: "flex-shrink-0 ml-1 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 dark:text-indigo-500 hover:bg-indigo-200 dark:hover:bg-indigo-800 hover:text-indigo-500 dark:hover:text-indigo-400 focus:outline-none focus:bg-indigo-500 focus:text-white dark:focus:text-black"
+                }, ic, 8, oc)
+              ])
+            ]))), 256)),
+            s("div", rc, [
+              kt(s("input", Me({
+                ref_key: "txtInput",
+                ref: m,
+                type: o(b),
+                role: "combobox",
+                "aria-controls": "options",
+                "aria-expanded": "false",
+                autocomplete: "off",
+                spellcheck: "false",
+                name: `${e.id}-txt`,
+                id: `${e.id}-txt`,
+                class: "p-0 dark:bg-transparent rounded-md border-none focus:!border-none focus:!outline-none",
+                style: `box-shadow:none !important;width:${y.value.length + 1}ch`,
+                "onUpdate:modelValue": K[0] || (K[0] = (E) => y.value = E),
+                "aria-invalid": o(g) != null,
+                "aria-describedby": `${e.id}-error`,
+                onKeydown: S,
+                onKeypress: te,
+                onPaste: Ue(M, ["prevent", "stop"]),
+                onFocus: F,
+                onBlur: W,
+                onClick: K[1] || (K[1] = (E) => d.value = !0)
+              }, o(dt)(x.$attrs, ["class", "required"])), null, 16, uc), [
+                [ao, y.value]
+              ])
+            ])
+          ])
+        ], 42, tc),
+        d.value && o(c).length ? (a(), u("ul", {
+          key: 0,
+          class: "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm",
+          onKeydown: S,
+          id: `${e.id}-options`,
+          role: "listbox"
+        }, [
+          (a(!0), u(Te, null, Ie(o(c), (E) => (a(), u("li", {
+            class: w([E === r.value ? "active bg-indigo-600 text-white" : "text-gray-900 dark:text-gray-100", "relative cursor-default select-none py-2 pl-3 pr-9"]),
+            onMouseover: (q) => h(E),
+            onClick: (q) => G(E),
+            role: "option",
+            tabindex: "-1"
+          }, [
+            s("span", fc, T(E), 1)
+          ], 42, cc))), 256))
+        ], 40, dc)) : k("", !0),
+        o(g) ? (a(), u("div", mc, hc)) : k("", !0)
+      ]),
+      o(g) ? (a(), u("p", {
+        key: 1,
+        class: "mt-2 text-sm text-red-500",
+        id: `${e.id}-error`
+      }, T(o(g)), 9, gc)) : e.help ? (a(), u("p", {
+        key: 2,
+        class: "mt-2 text-sm text-gray-500",
+        id: `${e.id}-description`
+      }, T(e.help), 9, pc)) : k("", !0)
+    ], 10, Jd));
+  }
+}), wc = { class: "relative flex-grow mr-2 sm:mr-4" }, xc = ["for"], kc = { class: "block mt-2" }, $c = { class: "sr-only" }, Cc = ["multiple", "name", "id", "placeholder", "aria-invalid", "aria-describedby"], _c = {
+  key: 0,
+  class: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
+}, Lc = /* @__PURE__ */ s("svg", {
+  class: "h-5 w-5 text-red-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+    "clip-rule": "evenodd"
+  })
+], -1), Vc = [
+  Lc
+], Sc = ["id"], Mc = ["id"], Ac = { key: 0 }, Tc = ["title"], Fc = ["alt", "src"], Ic = {
+  key: 1,
+  class: "mt-3"
+}, Dc = { class: "w-full" }, jc = { class: "pr-6 align-bottom pb-2" }, Oc = ["title"], Pc = ["src", "onError"], Bc = ["href"], Rc = {
+  key: 1,
+  class: "overflow-hidden"
+}, Ec = { class: "align-top pb-2 whitespace-nowrap" }, Hc = {
+  key: 0,
+  class: "text-gray-500 dark:text-gray-400 text-sm bg-white dark:bg-black"
+}, zc = /* @__PURE__ */ ce({
+  __name: "FileInput",
+  props: {
+    multiple: { type: Boolean },
+    status: null,
+    id: null,
+    inputClass: null,
+    label: null,
+    labelClass: null,
+    help: null,
+    placeholder: null,
+    modelValue: null,
+    values: null,
+    files: null
+  },
+  setup(e) {
+    var F;
+    const t = e, l = A(null), { assetsPathResolver: n, fallbackPathResolver: i } = St(), r = {}, d = A(), c = A(((F = t.files) == null ? void 0 : F.map(h)) || []);
+    function h(W) {
+      return W.filePath = n(W.filePath), W;
+    }
+    t.values && t.values.length > 0 && (c.value = t.values.map((W) => {
+      let O = W.replace(/\\/g, "/");
+      return { fileName: Co($t(O, "/"), "."), filePath: O, contentType: Kl(O) };
+    }).map(h));
+    const m = f(() => t.label ?? He(st(t.id))), y = f(() => t.placeholder ?? m.value);
+    let b = Ne("ApiState", void 0);
+    const p = f(() => mt.call({ responseStatus: t.status ?? (b == null ? void 0 : b.error.value) }, t.id)), v = f(() => [
+      "block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 dark:file:bg-violet-900 file:text-violet-700 dark:file:text-violet-200 hover:file:bg-violet-100 dark:hover:file:bg-violet-800",
+      p.value ? "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500" : "text-slate-500 dark:text-slate-400",
+      t.inputClass
+    ]), g = (W) => {
+      let O = W.target;
+      d.value = "", c.value = Array.from(O.files || []).map((S) => ({
+        fileName: S.name,
+        filePath: un(S),
+        contentLength: S.size,
+        contentType: S.type || Kl(S.name)
+      }));
+    }, P = () => {
+      var W;
+      return (W = l.value) == null ? void 0 : W.click();
+    }, N = (W) => W == null ? !1 : W.startsWith("data:") || W.startsWith("blob:"), ee = f(() => {
+      if (c.value.length > 0)
+        return c.value[0].filePath;
+      let W = typeof t.modelValue == "string" ? t.modelValue : t.values && t.values[0];
+      return W && yt(n(W)) || null;
+    }), j = (W) => !W || W.startsWith("data:") || W.endsWith(".svg") ? "" : "rounded-full object-cover";
+    function z(W) {
+      d.value = i(ee.value);
+    }
+    return Rt(fs), (W, O) => (a(), u("div", {
+      class: w(["flex", e.multiple ? "flex-col" : "justify-between"])
+    }, [
+      s("div", wc, [
+        o(m) ? (a(), u("label", {
+          key: 0,
+          for: e.id,
+          class: w(`block text-sm font-medium text-gray-700 dark:text-gray-300 ${e.labelClass ?? ""}`)
+        }, T(o(m)), 11, xc)) : k("", !0),
+        s("div", kc, [
+          s("span", $c, T(e.help ?? o(m)), 1),
+          s("input", Me({
+            ref_key: "input",
+            ref: l,
+            type: "file",
+            multiple: e.multiple,
+            name: e.id,
+            id: e.id,
+            class: o(v),
+            placeholder: o(y),
+            "aria-invalid": o(p) != null,
+            "aria-describedby": `${e.id}-error`
+          }, W.$attrs, { onChange: g }), null, 16, Cc),
+          o(p) ? (a(), u("div", _c, Vc)) : k("", !0)
+        ]),
+        o(p) ? (a(), u("p", {
+          key: 1,
+          class: "mt-2 text-sm text-red-500",
+          id: `${e.id}-error`
+        }, T(o(p)), 9, Sc)) : e.help ? (a(), u("p", {
+          key: 2,
+          class: "mt-2 text-sm text-gray-500",
+          id: `${e.id}-description`
+        }, T(e.help), 9, Mc)) : k("", !0)
+      ]),
+      e.multiple ? (a(), u("div", Ic, [
+        s("table", Dc, [
+          (a(!0), u(Te, null, Ie(c.value, (S) => (a(), u("tr", null, [
+            s("td", jc, [
+              s("div", {
+                class: "flex w-full",
+                title: N(S.filePath) ? "" : S.filePath
+              }, [
+                s("img", {
+                  src: r[o(yt)(S.filePath)] || o(n)(o(yt)(S.filePath)),
+                  class: w(["mr-2 h-8 w-8", j(S.filePath)]),
+                  onError: (U) => r[o(yt)(S.filePath)] = o(i)(o(yt)(S.filePath))
+                }, null, 42, Pc),
+                N(S.filePath) ? (a(), u("span", Rc, T(S.fileName), 1)) : (a(), u("a", {
+                  key: 0,
+                  href: o(n)(S.filePath || ""),
+                  target: "_blank",
+                  class: "overflow-hidden"
+                }, T(S.fileName), 9, Bc))
+              ], 8, Oc)
+            ]),
+            s("td", Ec, [
+              S.contentLength && S.contentLength > 0 ? (a(), u("span", Hc, T(o(cn)(S.contentLength)), 1)) : k("", !0)
+            ])
+          ]))), 256))
+        ])
+      ])) : (a(), u("div", Ac, [
+        o(ee) ? (a(), u("div", {
+          key: 0,
+          class: "shrink-0 cursor-pointer",
+          title: N(o(ee)) ? "" : o(ee)
+        }, [
+          s("img", {
+            onClick: P,
+            class: w(["h-16 w-16", j(o(ee))]),
+            alt: `Current ${o(m) ?? ""}`,
+            src: d.value || o(n)(o(ee)),
+            onError: z
+          }, null, 42, Fc)
+        ], 8, Tc)) : k("", !0)
+      ]))
+    ], 2));
+  }
+}), Nc = ["id"], Uc = ["for"], qc = { class: "relative mt-1" }, Qc = ["id", "placeholder"], Kc = /* @__PURE__ */ s("svg", {
+  class: "h-5 w-5 text-gray-400 dark:text-gray-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z",
+    "clip-rule": "evenodd"
+  })
+], -1), Zc = [
+  Kc
+], Gc = ["id"], Wc = ["onMouseover", "onClick"], Jc = /* @__PURE__ */ s("svg", {
+  class: "h-5 w-5",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z",
+    "clip-rule": "evenodd"
+  })
+], -1), Xc = [
+  Jc
+], Yc = {
+  key: 2,
+  class: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none",
+  tabindex: "-1"
+}, e0 = /* @__PURE__ */ s("svg", {
+  class: "h-5 w-5 text-red-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+    "clip-rule": "evenodd"
+  })
+], -1), t0 = [
+  e0
+], l0 = ["id"], n0 = ["id"], s0 = /* @__PURE__ */ ce({
+  __name: "Autocomplete",
+  props: {
+    status: null,
+    id: null,
+    type: null,
+    label: null,
+    help: null,
+    placeholder: null,
+    multiple: { type: Boolean, default: !1 },
+    required: { type: Boolean },
+    options: { default: () => [] },
+    modelValue: null,
+    match: null,
+    viewCount: { default: 100 },
+    pageSize: { default: 8 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: t, emit: l }) {
+    const n = e, i = A(!1);
+    t({ toggle: R });
+    function r(M) {
+      return Array.isArray(n.modelValue) && n.modelValue.indexOf(M) >= 0;
+    }
+    const d = f(() => n.label ?? He(st(n.id)));
+    let c = Ne("ApiState", void 0);
+    const h = f(() => mt.call({ responseStatus: n.status ?? (c == null ? void 0 : c.error.value) }, n.id)), m = f(() => [nt.base, h.value ? nt.invalid : nt.valid]), y = A(null), b = A(""), p = A(null), v = A(n.viewCount), g = A([]), P = f(() => b.value ? n.options.filter((le) => n.match(le, b.value)).slice(0, v.value) : n.options), N = ["Tab", "Escape", "ArrowDown", "ArrowUp", "Enter", "PageUp", "PageDown", "Home", "End"];
+    function ee(M) {
+      p.value = M, g.value.indexOf(M) > Math.floor(v.value * 0.9) && (v.value += n.viewCount, G());
+    }
+    const j = [",", `
+`, "	"];
+    function z(M) {
+      var x;
+      const le = (x = M.clipboardData) == null ? void 0 : x.getData("Text");
+      F(le);
+    }
+    function F(M) {
+      if (!M)
+        return;
+      const le = j.some((x) => M.includes(x));
+      if (!n.multiple || !le) {
+        const x = n.options.filter((K) => n.match(K, M));
+        x.length == 1 && (Y(x[0]), i.value = !1, cl());
+      } else if (le) {
+        const x = new RegExp("\\r|\\n|\\t|,"), E = M.split(x).filter((q) => q.trim()).map((q) => n.options.find((C) => n.match(C, q))).filter((q) => !!q);
+        if (E.length > 0) {
+          b.value = "", i.value = !1, p.value = null;
+          let q = Array.from(n.modelValue || []);
+          E.forEach((C) => {
+            r(C) ? q = q.filter((L) => L != C) : q.push(C);
+          }), l("update:modelValue", q), cl();
+        }
+      }
+    }
+    function W(M) {
+      N.indexOf(M.code) || J();
+    }
+    function O(M) {
+      if (!(M.shiftKey || M.ctrlKey || M.altKey)) {
+        if (!i.value) {
+          M.code == "ArrowDown" && (i.value = !0, p.value = g.value[0]);
+          return;
+        }
+        if (M.code == "Escape")
+          i.value && (M.stopPropagation(), i.value = !1);
+        else if (M.code == "Tab")
+          i.value = !1;
+        else if (M.code == "Home")
+          p.value = g.value[0], U();
+        else if (M.code == "End")
+          p.value = g.value[g.value.length - 1], U();
+        else if (M.code == "ArrowDown") {
+          if (!p.value)
+            p.value = g.value[0];
+          else {
+            const le = g.value.indexOf(p.value);
+            p.value = le + 1 < g.value.length ? g.value[le + 1] : g.value[0];
+          }
+          te();
+        } else if (M.code == "ArrowUp") {
+          if (!p.value)
+            p.value = g.value[g.value.length - 1];
+          else {
+            const le = g.value.indexOf(p.value);
+            p.value = le - 1 >= 0 ? g.value[le - 1] : g.value[g.value.length - 1];
+          }
+          te();
+        } else
+          M.code == "Enter" && (p.value ? (Y(p.value), n.multiple || (M.preventDefault(), cl())) : i.value = !1);
+      }
+    }
+    const S = { behavior: "smooth", block: "nearest", inline: "nearest", scrollMode: "if-needed" };
+    function U() {
+      setTimeout(() => {
+        let M = pl(`#${n.id}-autocomplete li.active`);
+        M && M.scrollIntoView(S);
+      }, 0);
+    }
+    function te() {
+      setTimeout(() => {
+        let M = pl(`#${n.id}-autocomplete li.active`);
+        M && ("scrollIntoViewIfNeeded" in M ? M.scrollIntoViewIfNeeded(S) : M.scrollIntoView(S));
+      }, 0);
+    }
+    function R(M) {
+      var le;
+      i.value = M, M && (J(), (le = y.value) == null || le.focus());
+    }
+    function J() {
+      i.value = !0, G();
+    }
+    function Y(M) {
+      if (b.value = "", i.value = !1, n.multiple) {
+        let le = Array.from(n.modelValue || []);
+        r(M) ? le = le.filter((x) => x != M) : le.push(M), p.value = null, l("update:modelValue", le);
+      } else {
+        let le = M;
+        n.modelValue == M && (le = null), l("update:modelValue", le);
+      }
+    }
+    function G() {
+      g.value = P.value;
+    }
+    return Lt(b, G), (M, le) => (a(), u("div", {
+      id: `${e.id}-autocomplete`
+    }, [
+      o(d) ? (a(), u("label", {
+        key: 0,
+        for: `${e.id}-text`,
+        class: "block text-sm font-medium text-gray-700 dark:text-gray-300"
+      }, T(o(d)), 9, Uc)) : k("", !0),
+      s("div", qc, [
+        kt(s("input", Me({
+          ref_key: "txtInput",
+          ref: y,
+          id: `${e.id}-text`,
+          type: "text",
+          role: "combobox",
+          "aria-controls": "options",
+          "aria-expanded": "false",
+          autocomplete: "off",
+          spellcheck: "false",
+          "onUpdate:modelValue": le[0] || (le[0] = (x) => b.value = x),
+          class: o(m),
+          placeholder: e.multiple || !e.modelValue ? e.placeholder : "",
+          onFocus: J,
+          onKeydown: O,
+          onKeyup: W,
+          onClick: J,
+          onPaste: z,
+          required: !1
+        }, M.$attrs), null, 16, Qc), [
+          [io, b.value]
+        ]),
+        s("button", {
+          type: "button",
+          onClick: le[1] || (le[1] = (x) => R(!i.value)),
+          class: "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none",
+          tabindex: "-1"
+        }, Zc),
+        i.value ? (a(), u("ul", {
+          key: 0,
+          class: "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm",
+          onKeydown: O,
+          id: `${e.id}-options`,
+          role: "listbox"
+        }, [
+          (a(!0), u(Te, null, Ie(g.value, (x) => (a(), u("li", {
+            class: w([x === p.value ? "active bg-indigo-600 text-white" : "text-gray-900 dark:text-gray-100", "relative cursor-default select-none py-2 pl-3 pr-9"]),
+            onMouseover: (K) => ee(x),
+            onClick: (K) => Y(x),
+            role: "option",
+            tabindex: "-1"
+          }, [
+            Z(M.$slots, "item", jt(gl(x))),
+            r(x) ? (a(), u("span", {
+              key: 0,
+              class: w(["absolute inset-y-0 right-0 flex items-center pr-4", x === p.value ? "text-white" : "text-indigo-600"])
+            }, Xc, 2)) : k("", !0)
+          ], 42, Wc))), 256))
+        ], 40, Gc)) : !e.multiple && e.modelValue ? (a(), u("div", {
+          key: 1,
+          onKeydown: O,
+          onClick: le[2] || (le[2] = (x) => R(!i.value)),
+          class: "h-8 -mt-8 ml-3 pt-0.5"
+        }, [
+          Z(M.$slots, "item", jt(gl(e.modelValue)))
+        ], 32)) : k("", !0),
+        o(h) ? (a(), u("div", Yc, t0)) : k("", !0)
+      ]),
+      o(h) ? (a(), u("p", {
+        key: 1,
+        class: "mt-2 text-sm text-red-500",
+        id: `${e.id}-error`
+      }, T(o(h)), 9, l0)) : e.help ? (a(), u("p", {
+        key: 2,
+        class: "mt-2 text-sm text-gray-500",
+        id: `${e.id}-description`
+      }, T(e.help), 9, n0)) : k("", !0)
+    ], 8, Nc));
+  }
+}), o0 = ["id", "name", "value"], a0 = { class: "block truncate" }, i0 = /* @__PURE__ */ ce({
+  __name: "Combobox",
+  props: {
+    id: null,
+    modelValue: null,
+    multiple: { type: Boolean },
+    options: null,
+    values: null,
+    entries: null
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: t, emit: l }) {
+    const n = e;
+    t({
+      toggle(p) {
+        var v;
+        (v = d.value) == null || v.toggle(p);
+      }
+    });
+    function i(p) {
+      l("update:modelValue", p);
+    }
+    const r = f(() => n.multiple != null ? n.multiple : Array.isArray(n.modelValue)), d = A();
+    function c(p, v) {
+      return !v || p.value.toLowerCase().includes(v.toLowerCase());
+    }
+    const h = f(() => n.entries || (n.values ? n.values.map((p) => ({ key: p, value: p })) : n.options ? Object.keys(n.options).map((p) => ({ key: p, value: n.options[p] })) : [])), m = A(r.value ? [] : null);
+    function y() {
+      let p = n.modelValue && typeof n.modelValue == "object" ? n.modelValue.key : n.modelValue;
+      p == null || p === "" ? m.value = r.value ? [] : null : typeof p == "string" ? m.value = h.value.find((v) => v.key === p) || null : Array.isArray(p) && (m.value = h.value.filter((v) => p.includes(v.key)));
+    }
+    tt(y);
+    const b = f(() => m.value == null ? "" : Array.isArray(m.value) ? m.value.map((p) => encodeURIComponent(p.key)).join(",") : m.value.key);
+    return (p, v) => {
+      const g = X("Autocomplete");
+      return a(), u(Te, null, [
+        s("input", {
+          type: "hidden",
+          id: e.id,
+          name: e.id,
+          value: o(b)
+        }, null, 8, o0),
+        $e(g, Me({
+          ref_key: "input",
+          ref: d,
+          id: e.id,
+          options: o(h),
+          match: c,
+          multiple: o(r)
+        }, p.$attrs, {
+          modelValue: m.value,
+          "onUpdate:modelValue": [
+            v[0] || (v[0] = (P) => m.value = P),
+            i
+          ]
+        }), {
+          item: ke(({ key: P, value: N }) => [
+            s("span", a0, T(N), 1)
+          ]),
+          _: 1
+        }, 16, ["id", "options", "multiple", "modelValue"])
+      ], 64);
+    };
+  }
+}), r0 = /* @__PURE__ */ ce({
+  __name: "DynamicInput",
+  props: {
+    input: null,
+    modelValue: null,
+    api: null
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const l = e, n = f(() => l.input.type || "text"), i = "ignore,css,options,meta,allowableValues,allowableEntries,op,prop,type,id,name".split(","), r = f(() => dt(l.input, i)), d = A(qe(
+      l.modelValue[l.input.id],
+      (h) => l.input.type === "file" ? null : l.input.type === "date" && h instanceof Date ? $l(h) : l.input.type === "time" ? ls(h) : h
+    ));
+    Lt(d, () => {
+      l.modelValue[l.input.id] = d.value, t("update:modelValue", l.modelValue);
+    });
+    const c = f(() => {
+      const h = l.modelValue[l.input.id];
+      if (l.input.type !== "file" || !h)
+        return [];
+      if (typeof h == "string")
+        return [{ filePath: h, fileName: $t(h, "/") }];
+      if (!Array.isArray(h) && typeof h == "object")
+        return h;
+      if (Array.isArray(h)) {
+        const m = [];
+        return h.forEach((y) => {
+          typeof y == "string" ? m.push({ filePath: y, fileName: $t(y, "/") }) : typeof y == "object" && m.push(y);
+        }), m;
+      }
+    });
+    return (h, m) => {
+      var j, z, F, W, O, S, U, te, R, J, Y, G, M, le, x, K, E, q, C, L, B, fe, I, V, oe, Le, de, ue;
+      const y = X("SelectInput"), b = X("CheckboxInput"), p = X("TagInput"), v = X("Combobox"), g = X("FileInput"), P = X("TextareaInput"), N = X("MarkdownInput"), ee = X("TextInput");
+      return o(ne).component(o(n)) ? (a(), se(Jn(o(ne).component(o(n))), Me({
+        key: 0,
+        id: e.input.id,
+        modelValue: d.value,
+        "onUpdate:modelValue": m[0] || (m[0] = (_) => d.value = _),
+        status: (j = e.api) == null ? void 0 : j.error,
+        "input-class": (z = e.input.css) == null ? void 0 : z.input,
+        "label-class": (F = e.input.css) == null ? void 0 : F.label
+      }, o(r)), null, 16, ["id", "modelValue", "status", "input-class", "label-class"])) : o(n) == "select" ? (a(), se(y, Me({
+        key: 1,
+        id: e.input.id,
+        modelValue: d.value,
+        "onUpdate:modelValue": m[1] || (m[1] = (_) => d.value = _),
+        status: (W = e.api) == null ? void 0 : W.error,
+        "input-class": (O = e.input.css) == null ? void 0 : O.input,
+        "label-class": (S = e.input.css) == null ? void 0 : S.label,
+        entries: e.input.allowableEntries,
+        values: e.input.allowableValues
+      }, o(r)), null, 16, ["id", "modelValue", "status", "input-class", "label-class", "entries", "values"])) : o(n) == "checkbox" ? (a(), se(b, Me({
+        key: 2,
+        id: e.input.id,
+        modelValue: d.value,
+        "onUpdate:modelValue": m[2] || (m[2] = (_) => d.value = _),
+        status: (U = e.api) == null ? void 0 : U.error,
+        "input-class": (te = e.input.css) == null ? void 0 : te.input,
+        "label-class": (R = e.input.css) == null ? void 0 : R.label
+      }, o(r)), null, 16, ["id", "modelValue", "status", "input-class", "label-class"])) : o(n) == "tag" ? (a(), se(p, Me({
+        key: 3,
+        id: e.input.id,
+        modelValue: d.value,
+        "onUpdate:modelValue": m[3] || (m[3] = (_) => d.value = _),
+        status: (J = e.api) == null ? void 0 : J.error,
+        "input-class": (Y = e.input.css) == null ? void 0 : Y.input,
+        "label-class": (G = e.input.css) == null ? void 0 : G.label,
+        allowableValues: e.input.allowableValues,
+        string: ((M = e.input.prop) == null ? void 0 : M.type) == "String"
+      }, o(r)), null, 16, ["id", "modelValue", "status", "input-class", "label-class", "allowableValues", "string"])) : o(n) == "combobox" ? (a(), se(v, Me({
+        key: 4,
+        id: e.input.id,
+        modelValue: d.value,
+        "onUpdate:modelValue": m[4] || (m[4] = (_) => d.value = _),
+        status: (le = e.api) == null ? void 0 : le.error,
+        "input-class": (x = e.input.css) == null ? void 0 : x.input,
+        "label-class": (K = e.input.css) == null ? void 0 : K.label,
+        entries: e.input.allowableEntries,
+        values: e.input.allowableValues
+      }, o(r)), null, 16, ["id", "modelValue", "status", "input-class", "label-class", "entries", "values"])) : o(n) == "file" ? (a(), se(g, Me({
+        key: 5,
+        id: e.input.id,
+        status: (E = e.api) == null ? void 0 : E.error,
+        modelValue: d.value,
+        "onUpdate:modelValue": m[5] || (m[5] = (_) => d.value = _),
+        "input-class": (q = e.input.css) == null ? void 0 : q.input,
+        "label-class": (C = e.input.css) == null ? void 0 : C.label,
+        files: o(c)
+      }, o(r)), null, 16, ["id", "status", "modelValue", "input-class", "label-class", "files"])) : o(n) == "textarea" ? (a(), se(P, Me({
+        key: 6,
+        id: e.input.id,
+        modelValue: d.value,
+        "onUpdate:modelValue": m[6] || (m[6] = (_) => d.value = _),
+        status: (L = e.api) == null ? void 0 : L.error,
+        "input-class": (B = e.input.css) == null ? void 0 : B.input,
+        "label-class": (fe = e.input.css) == null ? void 0 : fe.label
+      }, o(r)), null, 16, ["id", "modelValue", "status", "input-class", "label-class"])) : o(n) == "MarkdownInput" ? (a(), se(N, Me({
+        key: 7,
+        id: e.input.id,
+        modelValue: d.value,
+        "onUpdate:modelValue": m[7] || (m[7] = (_) => d.value = _),
+        status: (I = e.api) == null ? void 0 : I.error,
+        "input-class": (V = e.input.css) == null ? void 0 : V.input,
+        "label-class": (oe = e.input.css) == null ? void 0 : oe.label
+      }, o(r)), null, 16, ["id", "modelValue", "status", "input-class", "label-class"])) : (a(), se(ee, Me({
+        key: 8,
+        type: o(n),
+        id: e.input.id,
+        modelValue: d.value,
+        "onUpdate:modelValue": m[8] || (m[8] = (_) => d.value = _),
+        status: (Le = e.api) == null ? void 0 : Le.error,
+        "input-class": (de = e.input.css) == null ? void 0 : de.input,
+        "label-class": (ue = e.input.css) == null ? void 0 : ue.label
+      }, o(r)), null, 16, ["type", "id", "modelValue", "status", "input-class", "label-class"]));
+    };
+  }
+}), u0 = { class: "lookup-field" }, d0 = ["name", "value"], c0 = {
+  key: 0,
+  class: "flex justify-between"
+}, f0 = ["for"], m0 = {
+  key: 0,
+  class: "flex items-center"
+}, v0 = { class: "text-sm text-gray-500 dark:text-gray-400 pr-1" }, h0 = /* @__PURE__ */ s("span", { class: "sr-only" }, "Clear", -1), g0 = /* @__PURE__ */ s("svg", {
+  class: "h-4 w-4",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    d: "M6 18L18 6M6 6l12 12"
+  })
+], -1), p0 = [
+  h0,
+  g0
+], y0 = {
+  key: 1,
+  class: "mt-1 relative"
+}, b0 = { class: "w-full inline-flex truncate" }, w0 = { class: "text-blue-700 dark:text-blue-300 flex cursor-pointer" }, x0 = /* @__PURE__ */ s("span", { class: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none" }, [
+  /* @__PURE__ */ s("svg", {
+    class: "h-5 w-5 text-gray-400 dark:text-gray-500",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    /* @__PURE__ */ s("path", {
+      "fill-rule": "evenodd",
+      d: "M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z",
+      "clip-rule": "evenodd"
+    })
+  ])
+], -1), k0 = ["id"], $0 = ["id"], C0 = /* @__PURE__ */ ce({
+  __name: "LookupInput",
+  props: {
+    id: null,
+    status: null,
+    input: null,
+    metadataType: null,
+    modelValue: null,
+    label: null,
+    labelClass: null,
+    help: null
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const l = e, { config: n } = St(), { metadataApi: i } = at(), r = f(() => l.id || l.input.id), d = f(() => l.label ?? He(st(r.value)));
+    let c = Ne("ApiState", void 0);
+    const h = Ne("client"), m = f(() => mt.call({ responseStatus: l.status ?? (c == null ? void 0 : c.error.value) }, r.value)), y = A(""), b = A(""), p = f(() => ye(l.modelValue, r.value)), v = f(() => et(l.metadataType).find((j) => j.name.toLowerCase() == r.value.toLowerCase())), g = f(() => {
+      var j, z, F;
+      return ((F = ot((z = (j = v.value) == null ? void 0 : j.ref) == null ? void 0 : z.model)) == null ? void 0 : F.icon) || n.value.tableIcon;
+    });
+    let P;
+    function N(j) {
+      if (j) {
+        if (P == null) {
+          console.warn("No ModalProvider required by LookupInput");
+          return;
+        }
+        P.openModal({ name: "ModalLookup", ref: j }, (z) => {
+          if (console.debug("openModal", y.value, " -> ", z, Ft.setRefValue(j, z), j), z) {
+            const F = ye(z, j.refId);
+            y.value = Ft.setRefValue(j, z) || F;
+            const W = o(l.modelValue);
+            W[r.value] = F, t("update:modelValue", W);
+          }
+        });
+      }
+    }
+    function ee() {
+      l.modelValue[r.value] = null, y.value = "";
+    }
+    return tt(async () => {
+      var U, te;
+      P = Ne("ModalProvider", void 0);
+      const j = l.modelValue;
+      l.modelValue[r.value] || (l.modelValue[r.value] = null);
+      const z = v.value, F = z == null ? void 0 : z.ref;
+      if (!F) {
+        console.warn(`No RefInfo for property '${r.value}'`);
+        return;
+      }
+      y.value = "";
+      let W = F.selfId == null ? ye(j, z.name) : ye(j, F.selfId);
+      if (Zt(W) && (W = ye(j, F.refId)), W == null)
+        return;
+      if (((U = i.value) == null ? void 0 : U.operations.find((R) => {
+        var J;
+        return ((J = R.dataModel) == null ? void 0 : J.name) == F.model;
+      })) != null) {
+        const R = ye(j, z.name);
+        if (Zt(R))
+          return;
+        if (y.value = `${R}`, b.value = z.name, F.refLabel != null) {
+          const J = et(l.metadataType).find((G) => G.type == F.model);
+          J == null && console.warn(`Could not find ${F.model} Property on ${l.metadataType.name}`);
+          const Y = J != null ? ye(j, J.name) : null;
+          if (Y != null) {
+            let G = ye(Y, F.refLabel);
+            G && (y.value = `${G}`, Ft.setValue(F.model, W, F.refLabel, G));
+          } else {
+            const G = ((te = z.attributes) == null ? void 0 : te.some((le) => le.name == "Computed")) == !0;
+            let M = await Ft.getOrFetchValue(h, i.value, F.model, F.refId, F.refLabel, G, W);
+            y.value = M || `${F.model}: ${y.value}`;
+          }
+        }
+      }
+    }), (j, z) => {
+      var W;
+      const F = X("Icon");
+      return a(), u("div", u0, [
+        s("input", {
+          type: "hidden",
+          name: o(r),
+          value: o(p)
+        }, null, 8, d0),
+        o(d) ? (a(), u("div", c0, [
+          s("label", {
+            for: o(r),
+            class: w(`block text-sm font-medium text-gray-700 dark:text-gray-300 ${e.labelClass ?? ""}`)
+          }, T(o(d)), 11, f0),
+          o(p) ? (a(), u("div", m0, [
+            s("span", v0, T(o(p)), 1),
+            s("button", {
+              onClick: ee,
+              type: "button",
+              title: "clear",
+              class: "mr-1 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:ring-offset-black"
+            }, p0)
+          ])) : k("", !0)
+        ])) : k("", !0),
+        (W = o(v)) != null && W.ref ? (a(), u("div", y0, [
+          s("button", {
+            type: "button",
+            class: "lookup flex relative w-full bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
+            onClick: z[0] || (z[0] = (O) => N(o(v).ref)),
+            "aria-haspopup": "listbox",
+            "aria-expanded": "true",
+            "aria-labelledby": "listbox-label"
+          }, [
+            s("span", b0, [
+              s("span", w0, [
+                $e(F, {
+                  class: "mr-1 w-5 h-5",
+                  image: o(g)
+                }, null, 8, ["image"]),
+                s("span", null, T(y.value), 1)
+              ])
+            ]),
+            x0
+          ])
+        ])) : k("", !0),
+        o(m) ? (a(), u("p", {
+          key: 2,
+          class: "mt-2 text-sm text-red-500",
+          id: `${o(r)}-error`
+        }, T(o(m)), 9, k0)) : e.help ? (a(), u("p", {
+          key: 3,
+          class: "mt-2 text-sm text-gray-500",
+          id: `${o(r)}-description`
+        }, T(e.help), 9, $0)) : k("", !0)
+      ]);
+    };
+  }
+}), _0 = /* @__PURE__ */ ce({
+  __name: "AutoFormFields",
+  props: {
+    modelValue: null,
+    type: null,
+    api: null,
+    formLayout: null,
+    configureField: null,
+    configureFormLayout: null,
+    hideSummary: { type: Boolean },
+    flexClass: { default: "flex flex-1 flex-col justify-between" },
+    divideClass: { default: "divide-y divide-gray-200 px-4 sm:px-6" },
+    spaceClass: { default: "space-y-6 pt-6 pb-5" },
+    fieldsetClass: { default: "grid grid-cols-12 gap-6" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: t, emit: l }) {
+    const n = e;
+    t({ forceUpdate: i, props: n, updateValue: d });
+    function i() {
+      var z;
+      const j = Be();
+      (z = j == null ? void 0 : j.proxy) == null || z.$forceUpdate();
+    }
+    function r(j, z) {
+      d(j.id, ye(z, j.id));
+    }
+    function d(j, z) {
+      n.modelValue[j] = z, l("update:modelValue", n.modelValue), i();
+    }
+    const { metadataApi: c, apiOf: h, typeOf: m, typeOfRef: y, createFormLayout: b, Crud: p } = at(), v = f(() => n.type || Et(n.modelValue)), g = f(() => m(v.value)), P = f(() => {
+      var j, z;
+      return y((z = (j = c.value) == null ? void 0 : j.operations.find((F) => F.request.name == v.value)) == null ? void 0 : z.dataModel) || g.value;
+    }), N = f(() => {
+      const j = g.value;
+      if (!j) {
+        if (n.formLayout) {
+          const U = n.formLayout.map((te) => {
+            const R = { name: te.id, type: ba(te.type) }, J = Object.assign({ prop: R }, te);
+            return n.configureField && n.configureField(J), J;
+          });
+          return n.configureFormLayout && n.configureFormLayout(U), U;
+        }
+        throw new Error(`MetadataType for ${v.value} not found`);
+      }
+      const z = et(j), F = P.value, W = n.formLayout ? n.formLayout : b(j), O = [], S = h(j.name);
+      return W.forEach((U) => {
+        var Y;
+        const te = z.find((G) => G.name == U.name);
+        if (U.ignore)
+          return;
+        const R = ((Y = F == null ? void 0 : F.properties) == null ? void 0 : Y.find((G) => {
+          var M;
+          return G.name.toLowerCase() == ((M = U.name) == null ? void 0 : M.toLowerCase());
+        })) ?? te, J = Object.assign({ prop: R, op: S }, U);
+        n.configureField && n.configureField(J), O.push(J);
+      }), n.configureFormLayout && n.configureFormLayout(O), O;
+    }), ee = f(() => N.value.filter((j) => j.type != "hidden").map((j) => j.id));
+    return (j, z) => {
+      var S;
+      const F = X("ErrorSummary"), W = X("LookupInput"), O = X("DynamicInput");
+      return a(), u(Te, null, [
+        e.hideSummary ? k("", !0) : (a(), se(F, {
+          key: 0,
+          status: (S = e.api) == null ? void 0 : S.error,
+          except: o(ee)
+        }, null, 8, ["status", "except"])),
+        s("div", {
+          class: w(e.flexClass)
+        }, [
+          s("div", {
+            class: w(e.divideClass)
+          }, [
+            s("div", {
+              class: w(e.spaceClass)
+            }, [
+              s("fieldset", {
+                class: w(e.fieldsetClass)
+              }, [
+                (a(!0), u(Te, null, Ie(o(N), (U) => {
+                  var te, R, J;
+                  return a(), u("div", {
+                    key: U.id,
+                    class: w([
+                      "w-full",
+                      ((te = U.css) == null ? void 0 : te.field) ?? (U.type == "textarea" ? "col-span-12" : "col-span-12 xl:col-span-6" + (U.type == "checkbox" ? " flex items-center" : "")),
+                      U.type == "hidden" ? "hidden" : ""
+                    ])
+                  }, [
+                    ((R = U.prop) == null ? void 0 : R.ref) != null && U.type != "file" && !U.prop.isPrimaryKey ? (a(), se(W, {
+                      key: 0,
+                      metadataType: o(P),
+                      input: U,
+                      modelValue: e.modelValue,
+                      "onUpdate:modelValue": (Y) => r(U, Y),
+                      status: (J = e.api) == null ? void 0 : J.error
+                    }, null, 8, ["metadataType", "input", "modelValue", "onUpdate:modelValue", "status"])) : (a(), se(O, {
+                      key: 1,
+                      input: U,
+                      modelValue: e.modelValue,
+                      "onUpdate:modelValue": z[0] || (z[0] = (Y) => j.$emit("update:modelValue", Y)),
+                      api: e.api
+                    }, null, 8, ["input", "modelValue", "api"]))
+                  ], 2);
+                }), 128))
+              ], 2)
+            ], 2)
+          ], 2)
+        ], 2)
+      ], 64);
+    };
+  }
+});
+function Tl() {
+  const e = A(!1), t = A(), l = A(), n = Ne("client");
+  function i({ message: v, errorCode: g, fieldName: P, errors: N }) {
+    return g || (g = "Exception"), N || (N = []), t.value = P ? new Bl({
+      errorCode: g,
+      message: v,
+      errors: [new Un({ fieldName: P, errorCode: g, message: v })]
+    }) : new Bl({ errorCode: g, message: v, errors: N });
+  }
+  function r({ fieldName: v, message: g, errorCode: P }) {
+    if (P || (P = "Exception"), !t.value)
+      i({ fieldName: v, message: g, errorCode: P });
+    else {
+      let N = new Bl(t.value);
+      N.errors = [
+        ...(N.errors || []).filter((ee) => {
+          var j;
+          return ((j = ee.fieldName) == null ? void 0 : j.toLowerCase()) !== (v == null ? void 0 : v.toLowerCase());
+        }),
+        new Un({ fieldName: v, message: g, errorCode: P })
+      ], t.value = N;
+    }
+  }
+  async function d(v, g, P) {
+    e.value = !0;
+    let N = await n.api(Tt(v), g, P);
+    return e.value = !1, l.value = N.response, t.value = N.error, N;
+  }
+  async function c(v, g, P) {
+    e.value = !0;
+    let N = await n.apiVoid(Tt(v), g, P);
+    return e.value = !1, l.value = N.response, t.value = N.error, N;
+  }
+  async function h(v, g, P, N) {
+    e.value = !0;
+    let ee = await n.apiForm(Tt(v), g, P, N);
+    return e.value = !1, l.value = ee.response, t.value = ee.error, ee;
+  }
+  async function m(v, g, P, N) {
+    e.value = !0;
+    let ee = await n.apiFormVoid(Tt(v), g, P, N);
+    return e.value = !1, l.value = ee.response, t.value = ee.error, ee;
+  }
+  async function y(v, g, P, N) {
+    return os(n, v, g, P, N);
+  }
+  function b(v, g) {
+    const P = A(new Je()), N = as(async (ee) => {
+      P.value = await n.api(ee);
+    }, g == null ? void 0 : g.delayMs);
+    return hl(async () => {
+      const ee = v(), j = on(_l(ee));
+      j && (P.value = new Je({ response: j })), (g == null ? void 0 : g.delayMs) === 0 ? P.value = await n.api(ee) : N(ee);
+    }), (async () => P.value = await n.api(v(), g == null ? void 0 : g.args, g == null ? void 0 : g.method))(), P;
+  }
+  let p = { setError: i, addFieldError: r, loading: e, error: t, api: d, apiVoid: c, apiForm: h, apiFormVoid: m, swr: y, swrEffect: b, unRefs: Tt, setRef: ns };
+  return Xt("ApiState", p), p;
+}
+const L0 = { key: 0 }, V0 = { class: "text-red-700" }, S0 = /* @__PURE__ */ s("b", null, "type", -1), M0 = { key: 0 }, A0 = { key: 2 }, T0 = ["innerHTML"], F0 = /* @__PURE__ */ s("input", {
+  type: "submit",
+  class: "hidden"
+}, null, -1), I0 = { class: "flex justify-end" }, D0 = /* @__PURE__ */ s("div", null, null, -1), j0 = {
+  key: 2,
+  class: "relative z-10",
+  "aria-labelledby": "slide-over-title",
+  role: "dialog",
+  "aria-modal": "true"
+}, O0 = /* @__PURE__ */ s("div", { class: "fixed inset-0" }, null, -1), P0 = { class: "fixed inset-0 overflow-hidden" }, B0 = { class: "flex min-h-0 flex-1 flex-col overflow-auto" }, R0 = { class: "flex-1" }, E0 = { class: "bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6" }, H0 = { class: "flex items-start justify-between space-x-3" }, z0 = { class: "space-y-1" }, N0 = { key: 0 }, U0 = { key: 2 }, q0 = ["innerHTML"], Q0 = { class: "flex h-7 items-center" }, K0 = { class: "flex justify-end" }, Z0 = /* @__PURE__ */ ce({
+  __name: "AutoForm",
+  props: {
+    type: null,
+    modelValue: null,
+    heading: null,
+    subHeading: null,
+    showLoading: { type: Boolean, default: !0 },
+    jsconfig: { default: "eccn,edv" },
+    formStyle: { default: "card" },
+    configureField: null,
+    configureFormLayout: null,
+    panelClass: null,
+    bodyClass: null,
+    formClass: null,
+    innerFormClass: null,
+    headerClass: { default: "p-6" },
+    buttonsClass: null,
+    headingClass: null,
+    subHeadingClass: null,
+    submitLabel: { default: "Submit" },
+    allowSubmit: null
+  },
+  emits: ["success", "error", "update:modelValue", "done"],
+  setup(e, { expose: t, emit: l }) {
+    const n = e, i = A(), r = A(1), d = A();
+    t({ forceUpdate: c, props: n, setModel: h, formFields: i, submit: K, close: fe });
+    function c() {
+      var oe;
+      r.value++, Y.value = J();
+      const V = Be();
+      (oe = V == null ? void 0 : V.proxy) == null || oe.$forceUpdate();
+    }
+    async function h(V) {
+      Object.assign(Y.value, V), c(), await xt(() => null);
+    }
+    Xt("ModalProvider", {
+      openModal: p
+    });
+    const y = A(), b = A();
+    function p(V, oe) {
+      y.value = V, b.value = oe;
+    }
+    async function v(V) {
+      b.value && b.value(V), y.value = void 0, b.value = void 0;
+    }
+    const g = Tl(), { getTypeName: P } = is(), { typeOf: N, Crud: ee, createDto: j } = at(), z = A(new Je()), F = f(() => n.panelClass || Ze.panelClass(n.formStyle)), W = f(() => n.formClass || n.formStyle == "card" ? "shadow sm:rounded-md" : It.formClass), O = f(() => n.headingClass || Ze.headingClass(n.formStyle)), S = f(() => n.subHeadingClass || Ze.subHeadingClass(n.formStyle)), U = f(() => typeof n.buttonsClass == "string" ? n.buttonsClass : Ze.buttonsClass), te = f(() => {
+      var V;
+      return n.type ? P(n.type) : (V = n.modelValue) != null && V.getTypeName ? n.modelValue.getTypeName() : null;
+    }), R = f(() => N(te.value)), J = () => n.modelValue || le(), Y = A(J()), G = f(() => g.loading.value), M = f(() => {
+      var V;
+      return n.heading || ((V = N(te.value)) == null ? void 0 : V.description) || He(te.value);
+    });
+    function le() {
+      return typeof n.type == "string" ? j(n.type) : n.type ? new n.type() : n.modelValue;
+    }
+    async function x(V) {
+      if (!V || V.tagName != "FORM") {
+        console.error("Not a valid form", V);
+        return;
+      }
+      const oe = le();
+      let Le = qe(oe == null ? void 0 : oe.getMethod, (_) => typeof _ == "function" ? _() : null) || "POST", de = qe(oe == null ? void 0 : oe.createResponse, (_) => typeof _ == "function" ? _() : null) == null;
+      const ue = n.jsconfig;
+      if (ln.hasRequestBody(Le)) {
+        let _ = new oe.constructor(), ie = new FormData(V);
+        console.debug("AutoForm.submitForm", _, ie), de ? z.value = await g.apiFormVoid(_, ie, { jsconfig: ue }) : z.value = await g.apiForm(_, ie, { jsconfig: ue });
+      } else {
+        let _ = new oe.constructor(_o(Y.value));
+        console.debug("AutoForm.submit", _), de ? z.value = await g.apiVoid(_, { jsconfig: ue }) : z.value = await g.api(_, { jsconfig: ue });
+      }
+      z.value.succeeded ? (l("success", z.value.response), fe()) : l("error", z.value.error);
+    }
+    async function K() {
+      x(d.value);
+    }
+    function E(V) {
+      l("update:modelValue", V);
+    }
+    function q() {
+      l("done");
+    }
+    const C = A(!1), L = A(""), B = {
+      entering: { cls: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-full", to: "translate-x-0" },
+      leaving: { cls: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-0", to: "translate-x-full" }
+    };
+    Lt(C, () => {
+      Ct(B, L, C.value), C.value || setTimeout(q, 700);
+    }), C.value = !0;
+    function fe() {
+      n.formStyle == "slideOver" ? C.value = !1 : q();
+    }
+    const I = (V) => {
+      V.key === "Escape" && fe();
+    };
+    return tt(() => window.addEventListener("keydown", I)), Rt(() => window.removeEventListener("keydown", I)), (V, oe) => {
+      var Ve, he, De, Q, H, re, ve, Se, Oe, Re, _e;
+      const Le = X("AutoFormFields"), de = X("FormLoading"), ue = X("PrimaryButton"), _ = X("CloseButton"), ie = X("SecondaryButton"), xe = X("ModalLookup");
+      return a(), u("div", null, [
+        o(R) ? e.formStyle == "card" ? (a(), u("div", {
+          key: 1,
+          class: w(o(F))
+        }, [
+          s("form", {
+            ref_key: "elForm",
+            ref: d,
+            onSubmit: oe[0] || (oe[0] = Ue((Fe) => x(Fe.target), ["prevent"])),
+            autocomplete: "off",
+            class: w(e.innerFormClass)
+          }, [
+            s("div", {
+              class: w(e.bodyClass)
+            }, [
+              s("div", {
+                class: w(e.headerClass)
+              }, [
+                V.$slots.heading ? (a(), u("div", M0, [
+                  Z(V.$slots, "heading")
+                ])) : (a(), u("h3", {
+                  key: 1,
+                  class: w(o(O))
+                }, T(o(M)), 3)),
+                V.$slots.subheading ? (a(), u("div", A0, [
+                  Z(V.$slots, "subheading")
+                ])) : e.subHeading ? (a(), u("p", {
+                  key: 3,
+                  class: w(o(S))
+                }, T(e.subHeading), 3)) : (Ve = o(R)) != null && Ve.notes ? (a(), u("p", {
+                  key: 4,
+                  class: w(["notes", o(S)]),
+                  innerHTML: (he = o(R)) == null ? void 0 : he.notes
+                }, null, 10, T0)) : k("", !0)
+              ], 2),
+              Z(V.$slots, "header", {
+                instance: (De = Be()) == null ? void 0 : De.exposed,
+                model: Y.value
+              }),
+              F0,
+              (a(), se(Le, {
+                ref_key: "formFields",
+                ref: i,
+                key: r.value,
+                type: e.type,
+                modelValue: Y.value,
+                "onUpdate:modelValue": E,
+                api: z.value,
+                configureField: e.configureField,
+                configureFormLayout: e.configureFormLayout
+              }, null, 8, ["type", "modelValue", "api", "configureField", "configureFormLayout"])),
+              Z(V.$slots, "footer", {
+                instance: (Q = Be()) == null ? void 0 : Q.exposed,
+                model: Y.value
+              })
+            ], 2),
+            Z(V.$slots, "buttons", {}, () => {
+              var Fe, Qe;
+              return [
+                s("div", {
+                  class: w(o(U))
+                }, [
+                  s("div", null, [
+                    Z(V.$slots, "leftbuttons", {
+                      instance: (Fe = Be()) == null ? void 0 : Fe.exposed,
+                      model: Y.value
+                    })
+                  ]),
+                  s("div", null, [
+                    e.showLoading && o(G) ? (a(), se(de, { key: 0 })) : k("", !0)
+                  ]),
+                  s("div", I0, [
+                    D0,
+                    $e(ue, {
+                      disabled: e.allowSubmit ? !e.allowSubmit(Y.value) : !1
+                    }, {
+                      default: ke(() => [
+                        we(T(e.submitLabel), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["disabled"]),
+                    Z(V.$slots, "rightbuttons", {
+                      instance: (Qe = Be()) == null ? void 0 : Qe.exposed,
+                      model: Y.value
+                    })
+                  ])
+                ], 2)
+              ];
+            })
+          ], 34)
+        ], 2)) : (a(), u("div", j0, [
+          O0,
+          s("div", P0, [
+            s("div", {
+              onMousedown: fe,
+              class: "absolute inset-0 overflow-hidden"
+            }, [
+              s("div", {
+                onMousedown: oe[2] || (oe[2] = Ue(() => {
+                }, ["stop"])),
+                class: "pointer-events-none fixed inset-y-0 right-0 flex pl-10"
+              }, [
+                s("div", {
+                  class: w(["pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg", L.value])
+                }, [
+                  s("form", {
+                    ref_key: "elForm",
+                    ref: d,
+                    class: w(o(W)),
+                    onSubmit: oe[1] || (oe[1] = Ue((Fe) => x(Fe.target), ["prevent"]))
+                  }, [
+                    s("div", B0, [
+                      s("div", R0, [
+                        s("div", E0, [
+                          s("div", H0, [
+                            s("div", z0, [
+                              V.$slots.heading ? (a(), u("div", N0, [
+                                Z(V.$slots, "heading")
+                              ])) : (a(), u("h3", {
+                                key: 1,
+                                class: w(o(O))
+                              }, T(o(M)), 3)),
+                              V.$slots.subheading ? (a(), u("div", U0, [
+                                Z(V.$slots, "subheading")
+                              ])) : e.subHeading ? (a(), u("p", {
+                                key: 3,
+                                class: w(o(S))
+                              }, T(e.subHeading), 3)) : (H = o(R)) != null && H.notes ? (a(), u("p", {
+                                key: 4,
+                                class: w(["notes", o(S)]),
+                                innerHTML: (re = o(R)) == null ? void 0 : re.notes
+                              }, null, 10, q0)) : k("", !0)
+                            ]),
+                            s("div", Q0, [
+                              $e(_, {
+                                "button-class": "bg-gray-50 dark:bg-gray-900",
+                                onClose: fe
+                              })
+                            ])
+                          ])
+                        ]),
+                        Z(V.$slots, "header", {
+                          instance: (ve = Be()) == null ? void 0 : ve.exposed,
+                          model: Y.value
+                        }),
+                        (a(), se(Le, {
+                          ref_key: "formFields",
+                          ref: i,
+                          key: r.value,
+                          type: e.type,
+                          modelValue: Y.value,
+                          "onUpdate:modelValue": E,
+                          api: z.value,
+                          configureField: e.configureField,
+                          configureFormLayout: e.configureFormLayout
+                        }, null, 8, ["type", "modelValue", "api", "configureField", "configureFormLayout"])),
+                        Z(V.$slots, "footer", {
+                          instance: (Se = Be()) == null ? void 0 : Se.exposed,
+                          model: Y.value
+                        })
+                      ])
+                    ]),
+                    s("div", {
+                      class: w(o(U))
+                    }, [
+                      s("div", null, [
+                        Z(V.$slots, "leftbuttons", {
+                          instance: (Oe = Be()) == null ? void 0 : Oe.exposed,
+                          model: Y.value
+                        })
+                      ]),
+                      s("div", null, [
+                        e.showLoading && o(G) ? (a(), se(de, { key: 0 })) : k("", !0)
+                      ]),
+                      s("div", K0, [
+                        $e(ie, {
+                          onClick: fe,
+                          disabled: o(G)
+                        }, {
+                          default: ke(() => [
+                            we("Cancel")
+                          ]),
+                          _: 1
+                        }, 8, ["disabled"]),
+                        $e(ue, {
+                          class: "ml-4",
+                          disabled: e.allowSubmit ? !e.allowSubmit(Y.value) : !1
+                        }, {
+                          default: ke(() => [
+                            we(T(e.submitLabel), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["disabled"]),
+                        Z(V.$slots, "rightbuttons", {
+                          instance: (Re = Be()) == null ? void 0 : Re.exposed,
+                          model: Y.value
+                        })
+                      ])
+                    ], 2)
+                  ], 34)
+                ], 2)
+              ], 32)
+            ], 32)
+          ])
+        ])) : (a(), u("div", L0, [
+          s("p", V0, [
+            we("Could not create form for unknown "),
+            S0,
+            we(" " + T(o(te)), 1)
+          ])
+        ])),
+        ((_e = y.value) == null ? void 0 : _e.name) == "ModalLookup" && y.value.ref ? (a(), se(xe, {
+          key: 3,
+          "ref-info": y.value.ref,
+          onDone: v
+        }, null, 8, ["ref-info"])) : k("", !0)
+      ]);
+    };
+  }
+}), G0 = { key: 0 }, W0 = { class: "text-red-700" }, J0 = /* @__PURE__ */ s("b", null, "type", -1), X0 = ["onSubmit"], Y0 = { key: 0 }, ef = { key: 2 }, tf = ["innerHTML"], lf = { class: "flex justify-end" }, nf = {
+  key: 2,
+  class: "relative z-10",
+  "aria-labelledby": "slide-over-title",
+  role: "dialog",
+  "aria-modal": "true"
+}, sf = /* @__PURE__ */ s("div", { class: "fixed inset-0" }, null, -1), of = { class: "fixed inset-0 overflow-hidden" }, af = ["onSubmit"], rf = { class: "flex min-h-0 flex-1 flex-col overflow-auto" }, uf = { class: "flex-1" }, df = { class: "bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6" }, cf = { class: "flex items-start justify-between space-x-3" }, ff = { class: "space-y-1" }, mf = { key: 0 }, vf = { key: 2 }, hf = ["innerHTML"], gf = { class: "flex h-7 items-center" }, pf = { class: "flex justify-end" }, yf = /* @__PURE__ */ ce({
+  __name: "AutoCreateForm",
+  props: {
+    type: null,
+    formStyle: { default: "slideOver" },
+    panelClass: null,
+    formClass: null,
+    headingClass: null,
+    subHeadingClass: null,
+    buttonsClass: null,
+    heading: null,
+    subHeading: null,
+    autosave: { type: Boolean, default: !0 },
+    showLoading: { type: Boolean, default: !0 },
+    showCancel: { type: Boolean, default: !0 },
+    configureField: null,
+    configureFormLayout: null
+  },
+  emits: ["done", "save", "error"],
+  setup(e, { expose: t, emit: l }) {
+    const n = e, i = A(), r = A(1);
+    t({ forceUpdate: d, props: n, setModel: c, formFields: i });
+    function d() {
+      var V, oe;
+      r.value++, (V = i.value) == null || V.forceUpdate();
+      const I = Be();
+      (oe = I == null ? void 0 : I.proxy) == null || oe.$forceUpdate();
+    }
+    function c(I) {
+      Object.assign(O.value, I), d();
+    }
+    function h(I) {
+    }
+    Xt("ModalProvider", {
+      openModal: p
+    });
+    const y = A(), b = A();
+    function p(I, V) {
+      y.value = I, b.value = V;
+    }
+    async function v(I) {
+      b.value && b.value(I), y.value = void 0, b.value = void 0;
+    }
+    const { typeOf: g, typeProperties: P, Crud: N, createDto: ee, formValues: j } = at(), z = f(() => Et(n.type)), F = f(() => g(z.value)), O = A((() => typeof n.type == "string" ? ee(n.type) : n.type ? new n.type() : null)()), S = f(() => n.panelClass || Ze.panelClass(n.formStyle)), U = f(() => n.formClass || Ze.formClass(n.formStyle)), te = f(() => n.headingClass || Ze.headingClass(n.formStyle)), R = f(() => n.subHeadingClass || Ze.subHeadingClass(n.formStyle)), J = f(() => n.buttonsClass || Ze.buttonsClass), Y = f(() => N.model(F.value)), G = f(() => {
+      var I;
+      return n.heading || ((I = g(z.value)) == null ? void 0 : I.description) || (Y.value ? `New ${He(Y.value)}` : He(z.value));
+    }), M = A(new Je());
+    let le = Tl(), x = f(() => le.loading.value);
+    ne.interceptors.has("AutoCreateForm.new") && ne.interceptors.invoke("AutoCreateForm.new", { props: n, model: O });
+    async function K(I) {
+      var de, ue;
+      let V = I.target;
+      if (!n.autosave) {
+        l("save", new O.value.constructor(j(V, P(F.value))));
+        return;
+      }
+      let oe = qe((de = O.value) == null ? void 0 : de.getMethod, (_) => typeof _ == "function" ? _() : null) || "POST", Le = qe((ue = O.value) == null ? void 0 : ue.createResponse, (_) => typeof _ == "function" ? _() : null) == null;
+      if (ln.hasRequestBody(oe)) {
+        let _ = new O.value.constructor(), ie = new FormData(V);
+        Le ? M.value = await le.apiFormVoid(_, ie, { jsconfig: "eccn" }) : M.value = await le.apiForm(_, ie, { jsconfig: "eccn" });
+      } else {
+        let _ = j(V, P(F.value)), ie = new O.value.constructor(_);
+        Le ? M.value = await le.apiVoid(ie, { jsconfig: "eccn" }) : M.value = await le.api(ie, { jsconfig: "eccn" });
+      }
+      M.value.succeeded ? (V.reset(), l("save", M.value.response)) : l("error", M.value.error);
+    }
+    function E() {
+      l("done");
+    }
+    const q = A(!1), C = A(""), L = {
+      entering: { cls: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-full", to: "translate-x-0" },
+      leaving: { cls: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-0", to: "translate-x-full" }
+    };
+    Lt(q, () => {
+      Ct(L, C, q.value), q.value || setTimeout(E, 700);
+    }), q.value = !0;
+    function B() {
+      n.formStyle == "slideOver" ? q.value = !1 : E();
+    }
+    const fe = (I) => {
+      I.key === "Escape" && B();
+    };
+    return tt(() => window.addEventListener("keydown", fe)), Rt(() => window.removeEventListener("keydown", fe)), (I, V) => {
+      var xe, Ve, he, De, Q, H, re, ve, Se;
+      const oe = X("AutoFormFields"), Le = X("FormLoading"), de = X("SecondaryButton"), ue = X("PrimaryButton"), _ = X("CloseButton"), ie = X("ModalLookup");
+      return a(), u("div", null, [
+        o(F) ? e.formStyle == "card" ? (a(), u("div", {
+          key: 1,
+          class: w(o(S))
+        }, [
+          s("form", {
+            onSubmit: Ue(K, ["prevent"])
+          }, [
+            s("div", {
+              class: w(o(U))
+            }, [
+              s("div", null, [
+                I.$slots.heading ? (a(), u("div", Y0, [
+                  Z(I.$slots, "heading")
+                ])) : (a(), u("h3", {
+                  key: 1,
+                  class: w(o(te))
+                }, T(o(G)), 3)),
+                I.$slots.subheading ? (a(), u("div", ef, [
+                  Z(I.$slots, "subheading")
+                ])) : e.subHeading ? (a(), u("p", {
+                  key: 3,
+                  class: w(o(R))
+                }, T(e.subHeading), 3)) : (xe = o(F)) != null && xe.notes ? (a(), u("p", {
+                  key: 4,
+                  class: w(["notes", o(R)]),
+                  innerHTML: (Ve = o(F)) == null ? void 0 : Ve.notes
+                }, null, 10, tf)) : k("", !0)
+              ]),
+              Z(I.$slots, "header", {
+                formInstance: (he = Be()) == null ? void 0 : he.exposed,
+                model: O.value
+              }),
+              (a(), se(oe, {
+                ref_key: "formFields",
+                ref: i,
+                key: r.value,
+                modelValue: O.value,
+                "onUpdate:modelValue": h,
+                api: M.value,
+                configureField: e.configureField,
+                configureFormLayout: e.configureFormLayout
+              }, null, 8, ["modelValue", "api", "configureField", "configureFormLayout"])),
+              Z(I.$slots, "footer", {
+                formInstance: (De = Be()) == null ? void 0 : De.exposed,
+                model: O.value
+              })
+            ], 2),
+            s("div", {
+              class: w(o(J))
+            }, [
+              s("div", null, [
+                e.showLoading && o(x) ? (a(), se(Le, { key: 0 })) : k("", !0)
+              ]),
+              s("div", lf, [
+                e.showCancel ? (a(), se(de, {
+                  key: 0,
+                  onClick: B,
+                  disabled: o(x)
+                }, {
+                  default: ke(() => [
+                    we("Cancel")
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])) : k("", !0),
+                $e(ue, {
+                  type: "submit",
+                  class: "ml-4",
+                  disabled: o(x)
+                }, {
+                  default: ke(() => [
+                    we("Save")
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])
+              ])
+            ], 2)
+          ], 40, X0)
+        ], 2)) : (a(), u("div", nf, [
+          sf,
+          s("div", of, [
+            s("div", {
+              onMousedown: B,
+              class: "absolute inset-0 overflow-hidden"
+            }, [
+              s("div", {
+                onMousedown: V[0] || (V[0] = Ue(() => {
+                }, ["stop"])),
+                class: "pointer-events-none fixed inset-y-0 right-0 flex pl-10"
+              }, [
+                s("div", {
+                  class: w(["pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg", C.value])
+                }, [
+                  s("form", {
+                    class: w(o(U)),
+                    onSubmit: Ue(K, ["prevent"])
+                  }, [
+                    s("div", rf, [
+                      s("div", uf, [
+                        s("div", df, [
+                          s("div", cf, [
+                            s("div", ff, [
+                              I.$slots.heading ? (a(), u("div", mf, [
+                                Z(I.$slots, "heading")
+                              ])) : (a(), u("h3", {
+                                key: 1,
+                                class: w(o(te))
+                              }, T(o(G)), 3)),
+                              I.$slots.subheading ? (a(), u("div", vf, [
+                                Z(I.$slots, "subheading")
+                              ])) : e.subHeading ? (a(), u("p", {
+                                key: 3,
+                                class: w(o(R))
+                              }, T(e.subHeading), 3)) : (Q = o(F)) != null && Q.notes ? (a(), u("p", {
+                                key: 4,
+                                class: w(["notes", o(R)]),
+                                innerHTML: (H = o(F)) == null ? void 0 : H.notes
+                              }, null, 10, hf)) : k("", !0)
+                            ]),
+                            s("div", gf, [
+                              $e(_, {
+                                "button-class": "bg-gray-50 dark:bg-gray-900",
+                                onClose: B
+                              })
+                            ])
+                          ])
+                        ]),
+                        Z(I.$slots, "header", {
+                          formInstance: (re = Be()) == null ? void 0 : re.exposed,
+                          model: O.value
+                        }),
+                        (a(), se(oe, {
+                          ref_key: "formFields",
+                          ref: i,
+                          key: r.value,
+                          modelValue: O.value,
+                          "onUpdate:modelValue": h,
+                          api: M.value,
+                          configureField: e.configureField,
+                          configureFormLayout: e.configureFormLayout
+                        }, null, 8, ["modelValue", "api", "configureField", "configureFormLayout"])),
+                        Z(I.$slots, "footer", {
+                          formInstance: (ve = Be()) == null ? void 0 : ve.exposed,
+                          model: O.value
+                        })
+                      ])
+                    ]),
+                    s("div", {
+                      class: w(o(J))
+                    }, [
+                      s("div", null, [
+                        e.showLoading && o(x) ? (a(), se(Le, { key: 0 })) : k("", !0)
+                      ]),
+                      s("div", pf, [
+                        e.showCancel ? (a(), se(de, {
+                          key: 0,
+                          onClick: B,
+                          disabled: o(x)
+                        }, {
+                          default: ke(() => [
+                            we("Cancel")
+                          ]),
+                          _: 1
+                        }, 8, ["disabled"])) : k("", !0),
+                        $e(ue, {
+                          type: "submit",
+                          class: "ml-4",
+                          disabled: o(x)
+                        }, {
+                          default: ke(() => [
+                            we("Save")
+                          ]),
+                          _: 1
+                        }, 8, ["disabled"])
+                      ])
+                    ], 2)
+                  ], 42, af)
+                ], 2)
+              ], 32)
+            ], 32)
+          ])
+        ])) : (a(), u("div", G0, [
+          s("p", W0, [
+            we("Could not create form for unknown "),
+            J0,
+            we(" " + T(o(z)), 1)
+          ])
+        ])),
+        ((Se = y.value) == null ? void 0 : Se.name) == "ModalLookup" && y.value.ref ? (a(), se(ie, {
+          key: 3,
+          "ref-info": y.value.ref,
+          onDone: v
+        }, null, 8, ["ref-info"])) : k("", !0)
+      ]);
+    };
+  }
+}), bf = { key: 0 }, wf = { class: "text-red-700" }, xf = /* @__PURE__ */ s("b", null, "type", -1), kf = ["onSubmit"], $f = { key: 0 }, Cf = { key: 2 }, _f = ["innerHTML"], Lf = { class: "flex justify-end" }, Vf = {
+  key: 2,
+  class: "relative z-10",
+  "aria-labelledby": "slide-over-title",
+  role: "dialog",
+  "aria-modal": "true"
+}, Sf = /* @__PURE__ */ s("div", { class: "fixed inset-0" }, null, -1), Mf = { class: "fixed inset-0 overflow-hidden" }, Af = ["onSubmit"], Tf = { class: "flex min-h-0 flex-1 flex-col overflow-auto" }, Ff = { class: "flex-1" }, If = { class: "bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6" }, Df = { class: "flex items-start justify-between space-x-3" }, jf = { class: "space-y-1" }, Of = { key: 0 }, Pf = { key: 2 }, Bf = ["innerHTML"], Rf = { class: "flex h-7 items-center" }, Ef = { class: "flex justify-end" }, Hf = /* @__PURE__ */ ce({
+  __name: "AutoEditForm",
+  props: {
+    modelValue: null,
+    type: null,
+    deleteType: null,
+    formStyle: { default: "slideOver" },
+    panelClass: null,
+    formClass: null,
+    headingClass: null,
+    subHeadingClass: null,
+    heading: null,
+    subHeading: null,
+    autosave: { type: Boolean, default: !0 },
+    showLoading: { type: Boolean, default: !0 },
+    configureField: null,
+    configureFormLayout: null
+  },
+  emits: ["done", "save", "delete", "error"],
+  setup(e, { expose: t, emit: l }) {
+    const n = e, i = A(), r = A(1);
+    t({ forceUpdate: d, props: n, setModel: c, formFields: i });
+    function d() {
+      var ie;
+      r.value++, te.value = U();
+      const _ = Be();
+      (ie = _ == null ? void 0 : _.proxy) == null || ie.$forceUpdate();
+    }
+    function c(_) {
+      Object.assign(te.value, _);
+    }
+    function h(_) {
+    }
+    Xt("ModalProvider", {
+      openModal: p
+    });
+    const y = A(), b = A();
+    function p(_, ie) {
+      y.value = _, b.value = ie;
+    }
+    async function v(_) {
+      b.value && b.value(_), y.value = void 0, b.value = void 0;
+    }
+    const { typeOf: g, apiOf: P, typeProperties: N, createFormLayout: ee, getPrimaryKey: j, Crud: z, createDto: F, formValues: W } = at(), O = f(() => Et(n.type)), S = f(() => g(O.value)), U = () => typeof n.type == "string" ? F(n.type, ml(n.modelValue)) : n.type ? new n.type(ml(n.modelValue)) : null, te = A(U()), R = f(() => n.panelClass || Ze.panelClass(n.formStyle)), J = f(() => n.formClass || Ze.formClass(n.formStyle)), Y = f(() => n.headingClass || Ze.headingClass(n.formStyle)), G = f(() => n.subHeadingClass || Ze.subHeadingClass(n.formStyle)), M = f(() => z.model(S.value)), le = f(() => {
+      var _;
+      return n.heading || ((_ = g(O.value)) == null ? void 0 : _.description) || (M.value ? `Update ${He(M.value)}` : He(O.value));
+    }), x = A(new Je());
+    let K = Object.assign({}, ml(n.modelValue));
+    ne.interceptors.has("AutoEditForm.new") && ne.interceptors.invoke("AutoEditForm.new", { props: n, model: te, origModel: K });
+    let E = Tl(), q = f(() => E.loading.value);
+    const C = () => qe(g(z.model(S.value)), (_) => j(_));
+    function L(_) {
+      const { op: ie, prop: xe } = _;
+      ie && (z.isPatch(ie) || z.isUpdate(ie)) && (_.disabled = xe == null ? void 0 : xe.isPrimaryKey), n.configureField && n.configureField(_);
+    }
+    async function B(_) {
+      var De, Q;
+      let ie = _.target;
+      if (!n.autosave) {
+        l("save", new te.value.constructor(W(ie, N(S.value))));
+        return;
+      }
+      let xe = qe((De = te.value) == null ? void 0 : De.getMethod, (H) => typeof H == "function" ? H() : null) || "POST", Ve = qe((Q = te.value) == null ? void 0 : Q.createResponse, (H) => typeof H == "function" ? H() : null) == null, he = C();
+      if (ln.hasRequestBody(xe)) {
+        let H = new te.value.constructor(), re = ye(n.modelValue, he.name), ve = new FormData(ie);
+        he && !Array.from(ve.keys()).some((_e) => _e.toLowerCase() == he.name.toLowerCase()) && ve.append(he.name, re);
+        let Se = [];
+        const Oe = O.value && P(O.value);
+        if (Oe && z.isPatch(Oe)) {
+          let _e = ee(S.value), Fe = {};
+          if (he && (Fe[he.name] = re), _e.forEach((je) => {
+            let Ge = je.id, Mt = ye(K, Ge);
+            if (he && he.name.toLowerCase() === Ge.toLowerCase())
+              return;
+            let vt = ve.get(Ge);
+            ne.interceptors.has("AutoEditForm.save.formLayout") && ne.interceptors.invoke("AutoEditForm.save.formLayout", { origValue: Mt, formLayout: _e, input: je, newValue: vt });
+            let ll = vt != null, nl = je.type === "checkbox" ? ll !== !!Mt : je.type === "file" ? ll : vt != Mt;
+            !vt && !Mt && (nl = !1), nl && (vt ? Fe[Ge] = vt : je.type !== "file" && Se.push(Ge));
+          }), ne.interceptors.has("AutoEditForm.save") && ne.interceptors.invoke("AutoEditForm.save", { origModel: K, formLayout: _e, dirtyValues: Fe }), Array.from(ve.keys()).filter((je) => !Fe[je]).forEach((je) => ve.delete(je)), Array.from(ve.keys()).filter((je) => je.toLowerCase() != he.name.toLowerCase()).length == 0 && Se.length == 0) {
+            de();
+            return;
+          }
+        }
+        const Re = Se.length > 0 ? { jsconfig: "eccn", reset: Se } : { jsconfig: "eccn" };
+        Ve ? x.value = await E.apiFormVoid(H, ve, Re) : x.value = await E.apiForm(H, ve, Re);
+      } else {
+        let H = W(ie, N(S.value));
+        he && !ye(H, he.name) && (H[he.name] = ye(n.modelValue, he.name));
+        let re = new te.value.constructor(H);
+        Ve ? x.value = await E.apiVoid(re, { jsconfig: "eccn" }) : x.value = await E.api(re, { jsconfig: "eccn" });
+      }
+      x.value.succeeded ? (ie.reset(), l("save", x.value.response)) : l("error", x.value.error);
+    }
+    async function fe(_) {
+      let ie = C();
+      const xe = ie ? ye(n.modelValue, ie.name) : null;
+      if (!xe) {
+        console.error(`Could not find Primary Key for Type ${O.value} (${M.value})`);
+        return;
+      }
+      const Ve = { [ie.name]: xe }, he = typeof n.deleteType == "string" ? F(n.deleteType, Ve) : n.deleteType ? new n.deleteType(Ve) : null;
+      qe(he.createResponse, (Q) => typeof Q == "function" ? Q() : null) == null ? x.value = await E.apiVoid(he) : x.value = await E.api(he), x.value.succeeded ? l("delete", x.value.response) : l("error", x.value.error);
+    }
+    function I() {
+      l("done");
+    }
+    const V = A(!1), oe = A(""), Le = {
+      entering: { cls: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-full", to: "translate-x-0" },
+      leaving: { cls: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-0", to: "translate-x-full" }
+    };
+    Lt(V, () => {
+      Ct(Le, oe, V.value), V.value || setTimeout(I, 700);
+    }), V.value = !0;
+    function de() {
+      n.formStyle == "slideOver" ? V.value = !1 : I();
+    }
+    const ue = (_) => {
+      _.key === "Escape" && de();
+    };
+    return tt(() => window.addEventListener("keydown", ue)), Rt(() => window.removeEventListener("keydown", ue)), (_, ie) => {
+      var ve, Se, Oe, Re, _e, Fe, Qe, je, Ge;
+      const xe = X("AutoFormFields"), Ve = X("ConfirmDelete"), he = X("FormLoading"), De = X("SecondaryButton"), Q = X("PrimaryButton"), H = X("CloseButton"), re = X("ModalLookup");
+      return a(), u("div", null, [
+        o(S) ? e.formStyle == "card" ? (a(), u("div", {
+          key: 1,
+          class: w(o(R))
+        }, [
+          s("form", {
+            onSubmit: Ue(B, ["prevent"])
+          }, [
+            s("div", {
+              class: w(o(J))
+            }, [
+              s("div", null, [
+                _.$slots.heading ? (a(), u("div", $f, [
+                  Z(_.$slots, "heading")
+                ])) : (a(), u("h3", {
+                  key: 1,
+                  class: w(o(Y))
+                }, T(o(le)), 3)),
+                _.$slots.subheading ? (a(), u("div", Cf, [
+                  Z(_.$slots, "subheading")
+                ])) : e.subHeading ? (a(), u("p", {
+                  key: 3,
+                  class: w(o(G))
+                }, T(e.subHeading), 3)) : (ve = o(S)) != null && ve.notes ? (a(), u("p", {
+                  key: 4,
+                  class: w(["notes", o(G)]),
+                  innerHTML: (Se = o(S)) == null ? void 0 : Se.notes
+                }, null, 10, _f)) : k("", !0)
+              ]),
+              Z(_.$slots, "header", {
+                formInstance: (Oe = Be()) == null ? void 0 : Oe.exposed,
+                model: te.value
+              }),
+              (a(), se(xe, {
+                ref_key: "formFields",
+                ref: i,
+                key: r.value,
+                modelValue: te.value,
+                "onUpdate:modelValue": h,
+                api: x.value,
+                configureField: e.configureField,
+                configureFormLayout: e.configureFormLayout
+              }, null, 8, ["modelValue", "api", "configureField", "configureFormLayout"])),
+              Z(_.$slots, "footer", {
+                formInstance: (Re = Be()) == null ? void 0 : Re.exposed,
+                model: te.value
+              })
+            ], 2),
+            s("div", {
+              class: w(o(Ze).buttonsClass)
+            }, [
+              s("div", null, [
+                e.deleteType ? (a(), se(Ve, {
+                  key: 0,
+                  onDelete: fe
+                })) : k("", !0)
+              ]),
+              s("div", null, [
+                e.showLoading && o(q) ? (a(), se(he, { key: 0 })) : k("", !0)
+              ]),
+              s("div", Lf, [
+                $e(De, {
+                  onClick: de,
+                  disabled: o(q)
+                }, {
+                  default: ke(() => [
+                    we("Cancel")
+                  ]),
+                  _: 1
+                }, 8, ["disabled"]),
+                $e(Q, {
+                  type: "submit",
+                  class: "ml-4",
+                  disabled: o(q)
+                }, {
+                  default: ke(() => [
+                    we("Save")
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])
+              ])
+            ], 2)
+          ], 40, kf)
+        ], 2)) : (a(), u("div", Vf, [
+          Sf,
+          s("div", Mf, [
+            s("div", {
+              onMousedown: de,
+              class: "absolute inset-0 overflow-hidden"
+            }, [
+              s("div", {
+                onMousedown: ie[0] || (ie[0] = Ue(() => {
+                }, ["stop"])),
+                class: "pointer-events-none fixed inset-y-0 right-0 flex pl-10"
+              }, [
+                s("div", {
+                  class: w(["pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg", oe.value])
+                }, [
+                  s("form", {
+                    class: w(o(J)),
+                    onSubmit: Ue(B, ["prevent"])
+                  }, [
+                    s("div", Tf, [
+                      s("div", Ff, [
+                        s("div", If, [
+                          s("div", Df, [
+                            s("div", jf, [
+                              _.$slots.heading ? (a(), u("div", Of, [
+                                Z(_.$slots, "heading")
+                              ])) : (a(), u("h3", {
+                                key: 1,
+                                class: w(o(Y))
+                              }, T(o(le)), 3)),
+                              _.$slots.subheading ? (a(), u("div", Pf, [
+                                Z(_.$slots, "subheading")
+                              ])) : e.subHeading ? (a(), u("p", {
+                                key: 3,
+                                class: w(o(G))
+                              }, T(e.subHeading), 3)) : (_e = o(S)) != null && _e.notes ? (a(), u("p", {
+                                key: 4,
+                                class: w(["notes", o(G)]),
+                                innerHTML: (Fe = o(S)) == null ? void 0 : Fe.notes
+                              }, null, 10, Bf)) : k("", !0)
+                            ]),
+                            s("div", Rf, [
+                              $e(H, {
+                                "button-class": "bg-gray-50 dark:bg-gray-900",
+                                onClose: de
+                              })
+                            ])
+                          ])
+                        ]),
+                        Z(_.$slots, "header", {
+                          formInstance: (Qe = Be()) == null ? void 0 : Qe.exposed,
+                          model: te.value
+                        }),
+                        (a(), se(xe, {
+                          ref_key: "formFields",
+                          ref: i,
+                          key: r.value,
+                          modelValue: te.value,
+                          "onUpdate:modelValue": h,
+                          api: x.value,
+                          configureField: L,
+                          configureFormLayout: e.configureFormLayout
+                        }, null, 8, ["modelValue", "api", "configureFormLayout"])),
+                        Z(_.$slots, "footer", {
+                          formInstance: (je = Be()) == null ? void 0 : je.exposed,
+                          model: te.value
+                        })
+                      ])
+                    ]),
+                    s("div", {
+                      class: w(o(Ze).buttonsClass)
+                    }, [
+                      s("div", null, [
+                        e.deleteType ? (a(), se(Ve, {
+                          key: 0,
+                          onDelete: fe
+                        })) : k("", !0)
+                      ]),
+                      s("div", null, [
+                        e.showLoading && o(q) ? (a(), se(he, { key: 0 })) : k("", !0)
+                      ]),
+                      s("div", Ef, [
+                        $e(De, {
+                          onClick: de,
+                          disabled: o(q)
+                        }, {
+                          default: ke(() => [
+                            we("Cancel")
+                          ]),
+                          _: 1
+                        }, 8, ["disabled"]),
+                        $e(Q, {
+                          type: "submit",
+                          class: "ml-4",
+                          disabled: o(q)
+                        }, {
+                          default: ke(() => [
+                            we("Save")
+                          ]),
+                          _: 1
+                        }, 8, ["disabled"])
+                      ])
+                    ], 2)
+                  ], 42, Af)
+                ], 2)
+              ], 32)
+            ], 32)
+          ])
+        ])) : (a(), u("div", bf, [
+          s("p", wf, [
+            we("Could not create form for unknown "),
+            xf,
+            we(" " + T(o(O)), 1)
+          ])
+        ])),
+        ((Ge = y.value) == null ? void 0 : Ge.name) == "ModalLookup" && y.value.ref ? (a(), se(re, {
+          key: 3,
+          "ref-info": y.value.ref,
+          onDone: v
+        }, null, 8, ["ref-info"])) : k("", !0)
+      ]);
+    };
+  }
+}), zf = /* @__PURE__ */ s("label", {
+  for: "confirmDelete",
+  class: "ml-2 mr-2 select-none"
+}, "confirm", -1), Nf = ["onClick"], Uf = /* @__PURE__ */ ce({
+  __name: "ConfirmDelete",
+  emits: ["delete"],
+  setup(e, { emit: t }) {
+    let l = A(!1);
+    const n = () => {
+      l.value && t("delete");
+    }, i = f(() => [
+      "select-none inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white",
+      l.value ? "cursor-pointer bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" : "bg-red-400"
+    ]);
+    return (r, d) => (a(), u(Te, null, [
+      kt(s("input", {
+        id: "confirmDelete",
+        type: "checkbox",
+        class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-black",
+        "onUpdate:modelValue": d[0] || (d[0] = (c) => Gn(l) ? l.value = c : l = c)
+      }, null, 512), [
+        [Yl, o(l)]
+      ]),
+      zf,
+      s("span", Me({
+        onClick: Ue(n, ["prevent"]),
+        class: o(i)
+      }, r.$attrs), [
+        Z(r.$slots, "default", {}, () => [
+          we("Delete")
+        ])
+      ], 16, Nf)
+    ], 64));
+  }
+}), qf = {
+  class: "flex",
+  title: "loading..."
+}, Qf = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  x: "0px",
+  y: "0px",
+  width: "24px",
+  height: "30px",
+  viewBox: "0 0 24 30"
+}, Kf = /* @__PURE__ */ wl('<rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2"><animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="8" y="10" width="4" height="10" fill="#333" opacity="0.2"><animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="16" y="10" width="4" height="10" fill="#333" opacity="0.2"><animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate></rect>', 3), Zf = [
+  Kf
+], Gf = { class: "ml-2 mt-1 text-gray-400" }, Wf = /* @__PURE__ */ ce({
+  __name: "FormLoading",
+  props: {
+    icon: { type: Boolean, default: !0 },
+    text: { default: "loading..." }
+  },
+  setup(e) {
+    return Ne("ApiState", void 0), (t, l) => (a(), u("div", qf, [
+      e.icon ? (a(), u("svg", Qf, Zf)) : k("", !0),
+      s("span", Gf, T(e.text), 1)
+    ]));
+  }
+}), Jf = ["onClick"], Xf = {
+  key: 3,
+  class: "flex justify-between items-center"
+}, Yf = { class: "mr-1 select-none" }, e1 = ["onClick"], t1 = /* @__PURE__ */ ce({
+  __name: "DataGrid",
+  props: {
+    items: { default: () => [] },
+    id: { default: "DataGrid" },
+    type: null,
+    tableStyle: { default: "stripedRows" },
+    selectedColumns: null,
+    gridClass: null,
+    grid2Class: null,
+    grid3Class: null,
+    grid4Class: null,
+    tableClass: null,
+    theadClass: null,
+    tbodyClass: null,
+    theadRowClass: null,
+    theadCellClass: null,
+    isSelected: null,
+    headerTitle: null,
+    headerTitles: null,
+    visibleFrom: null,
+    rowClass: null,
+    rowStyle: null
+  },
+  emits: ["headerSelected", "rowSelected"],
+  setup(e, { emit: t }) {
+    const l = e, n = A(), i = A(null), r = (E) => i.value === E, d = en(), c = (E) => Object.keys(d).find((q) => q.toLowerCase() == E.toLowerCase() + "-header"), h = (E) => Object.keys(d).find((q) => q.toLowerCase() == E.toLowerCase()), m = f(() => Nl(l.items).filter((E) => !!(d[E] || d[E + "-header"]))), { typeOf: y, typeProperties: b } = at(), p = f(() => Et(l.type)), v = f(() => y(p.value)), g = f(() => b(v.value));
+    function P(E) {
+      const q = l.headerTitles && ye(l.headerTitles, E) || E;
+      return l.headerTitle ? l.headerTitle(q) : ts(q);
+    }
+    function N(E) {
+      const q = E.toLowerCase();
+      return g.value.find((C) => C.name.toLowerCase() == q);
+    }
+    function ee(E) {
+      const q = N(E);
+      return q != null && q.format ? q.format : (q == null ? void 0 : q.type) == "TimeSpan" || (q == null ? void 0 : q.type) == "TimeOnly" ? { method: "time" } : null;
+    }
+    const j = {
+      xs: "xs:table-cell",
+      sm: "sm:table-cell",
+      md: "md:table-cell",
+      lg: "lg:table-cell",
+      xl: "xl:table-cell",
+      "2xl": "2xl:table-cell",
+      never: ""
+    };
+    function z(E) {
+      const q = l.visibleFrom && ye(l.visibleFrom, E);
+      return q && qe(j[q], (C) => `hidden ${C}`);
+    }
+    const F = f(() => l.gridClass ?? ge.getGridClass(l.tableStyle)), W = f(() => l.grid2Class ?? ge.getGrid2Class(l.tableStyle)), O = f(() => l.grid3Class ?? ge.getGrid3Class(l.tableStyle)), S = f(() => l.grid4Class ?? ge.getGrid4Class(l.tableStyle)), U = f(() => l.tableClass ?? ge.getTableClass(l.tableStyle)), te = f(() => l.tbodyClass ?? ge.getTbodyClass(l.tbodyClass)), R = f(() => l.theadClass ?? ge.getTheadClass(l.tableStyle)), J = f(() => l.theadRowClass ?? ge.getTheadRowClass(l.tableStyle)), Y = f(() => l.theadCellClass ?? ge.getTheadCellClass(l.tableStyle));
+    function G(E, q) {
+      return l.rowClass ? l.rowClass(E, q) : ge.getTableRowClass(l.tableStyle, q, !!(l.isSelected && l.isSelected(E)), l.isSelected != null);
+    }
+    function M(E, q) {
+      return l.rowStyle ? l.rowStyle(E, q) : void 0;
+    }
+    const le = f(() => {
+      const E = (typeof l.selectedColumns == "string" ? l.selectedColumns.split(",") : l.selectedColumns) || (m.value.length > 0 ? m.value : Nl(l.items)), q = g.value.reduce((C, L) => (C[L.name.toLowerCase()] = L.format, C), {});
+      return E.filter((C) => {
+        var L;
+        return ((L = q[C.toLowerCase()]) == null ? void 0 : L.method) != "hidden";
+      });
+    });
+    function x(E, q) {
+      t("headerSelected", q, E);
+    }
+    function K(E, q, C) {
+      t("rowSelected", C, E);
+    }
+    return (E, q) => {
+      const C = X("CellFormat"), L = X("PreviewFormat");
+      return e.items.length ? (a(), u("div", {
+        key: 0,
+        ref_key: "refResults",
+        ref: n,
+        class: w(o(F))
+      }, [
+        s("div", {
+          class: w(o(W))
+        }, [
+          s("div", {
+            class: w(o(O))
+          }, [
+            s("div", {
+              class: w(o(S))
+            }, [
+              s("table", {
+                class: w(o(U))
+              }, [
+                s("thead", {
+                  class: w(o(R))
+                }, [
+                  s("tr", {
+                    class: w(o(J))
+                  }, [
+                    (a(!0), u(Te, null, Ie(o(le), (B) => (a(), u("td", {
+                      class: w([z(B), o(Y), r(B) ? "text-gray-900 dark:text-gray-50" : "text-gray-500 dark:text-gray-400"])
+                    }, [
+                      s("div", {
+                        onClick: (fe) => x(fe, B)
+                      }, [
+                        o(d)[B + "-header"] ? Z(E.$slots, B + "-header", {
+                          key: 0,
+                          column: B
+                        }) : c(B) ? Z(E.$slots, c(B), {
+                          key: 1,
+                          column: B
+                        }) : o(d).header ? Z(E.$slots, "header", {
+                          key: 2,
+                          column: B,
+                          label: P(B)
+                        }) : (a(), u("div", Xf, [
+                          s("span", Yf, T(P(B)), 1)
+                        ]))
+                      ], 8, Jf)
+                    ], 2))), 256))
+                  ], 2)
+                ], 2),
+                s("tbody", {
+                  class: w(o(te))
+                }, [
+                  (a(!0), u(Te, null, Ie(e.items, (B, fe) => (a(), u("tr", {
+                    class: w(G(B, fe)),
+                    style: Xl(M(B, fe)),
+                    onClick: (I) => K(I, fe, B)
+                  }, [
+                    (a(!0), u(Te, null, Ie(o(le), (I) => (a(), u("td", {
+                      class: w([z(I), o(ge).tableCellClass])
+                    }, [
+                      o(d)[I] ? Z(E.$slots, I, jt(Me({ key: 0 }, B))) : h(I) ? Z(E.$slots, h(I), jt(Me({ key: 1 }, B))) : N(I) ? (a(), se(C, {
+                        key: 2,
+                        type: o(v),
+                        propType: N(I),
+                        modelValue: B
+                      }, null, 8, ["type", "propType", "modelValue"])) : (a(), se(L, {
+                        key: 3,
+                        value: o(ye)(B, I),
+                        format: ee(I)
+                      }, null, 8, ["value", "format"]))
+                    ], 2))), 256))
+                  ], 14, e1))), 256))
+                ], 2)
+              ], 2)
+            ], 2)
+          ], 2)
+        ], 2)
+      ], 2)) : k("", !0);
+    };
+  }
+}), l1 = ce({
+  props: {
+    type: Object,
+    propType: Object,
+    modelValue: Object
+  },
+  setup(e, { attrs: t }) {
+    const { typeOf: l } = at();
+    function n(i) {
+      return i != null && i.format ? i.format : (i == null ? void 0 : i.type) == "TimeSpan" || (i == null ? void 0 : i.type) == "TimeOnly" ? { method: "time" } : null;
+    }
+    return () => {
+      var ee;
+      const i = n(e.propType), r = ye(e.modelValue, e.propType.name), d = Object.assign({}, e, t), c = gt("span", { innerHTML: Jt(r, i, d) }), h = Zt(r) && Array.isArray(r) ? gt("span", {}, [
+        gt("span", { class: "mr-2" }, `${r.length}`),
+        c
+      ]) : c, m = (ee = e.propType) == null ? void 0 : ee.ref;
+      if (!m)
+        return h;
+      const b = et(e.type).find((j) => j.type === m.model);
+      if (!b)
+        return h;
+      const p = ye(e.modelValue, b.name), v = p && m.refLabel && ye(p, m.refLabel);
+      if (!v)
+        return h;
+      const g = l(m.model), P = g == null ? void 0 : g.icon, N = P ? gt(zs, { image: P, class: "w-5 h-5 mr-1" }) : null;
+      return gt("span", { class: "flex", title: `${m.model} ${r}` }, [
+        N,
+        v
+      ]);
+    };
+  }
+}), n1 = { key: 0 }, s1 = {
+  key: 0,
+  class: "mr-2"
+}, o1 = ["innerHTML"], a1 = ["innerHTML"], i1 = {
+  inheritAttrs: !1
+}, r1 = /* @__PURE__ */ ce({
+  ...i1,
+  __name: "PreviewFormat",
+  props: {
+    value: null,
+    format: null,
+    includeIcon: { type: Boolean, default: !0 },
+    includeCount: { type: Boolean, default: !0 },
+    maxFieldLength: { default: 150 },
+    maxNestedFields: { default: 2 },
+    maxNestedFieldLength: { default: 30 }
+  },
+  setup(e) {
+    const t = e, l = f(() => Array.isArray(t.value));
+    return (n, i) => o(Zt)(e.value) ? (a(), u("span", n1, [
+      e.includeCount && o(l) ? (a(), u("span", s1, T(e.value.length), 1)) : k("", !0),
+      s("span", {
+        innerHTML: o(Jt)(e.value, e.format, n.$attrs)
+      }, null, 8, o1)
+    ])) : (a(), u("span", {
+      key: 1,
+      innerHTML: o(Jt)(e.value, e.format, n.$attrs)
+    }, null, 8, a1));
+  }
+}), u1 = ["innerHTML"], d1 = { key: 0 }, c1 = /* @__PURE__ */ s("b", null, null, -1), f1 = { key: 2 }, m1 = /* @__PURE__ */ ce({
+  __name: "HtmlFormat",
+  props: {
+    value: null,
+    depth: { default: 0 },
+    fieldAttrs: null,
+    classes: { type: Function, default: (e, t, l, n, i) => n }
+  },
+  setup(e) {
+    const t = e, l = f(() => _t(t.value)), n = f(() => Array.isArray(t.value)), i = (h) => ts(h), r = (h) => t.fieldAttrs ? t.fieldAttrs(h) : null, d = f(() => Nl(t.value)), c = (h) => h ? Object.keys(h).map((m) => ({ key: i(m), val: h[m] })) : [];
+    return (h, m) => {
+      const y = X("HtmlFormat", !0);
+      return a(), u("div", {
+        class: w(e.depth == 0 ? "prose html-format" : "")
+      }, [
+        o(l) ? (a(), u("div", {
+          key: 0,
+          innerHTML: o(Jt)(e.value)
+        }, null, 8, u1)) : o(n) ? (a(), u("div", {
+          key: 1,
+          class: w(e.classes("array", "div", e.depth, o(ge).gridClass))
+        }, [
+          o(_t)(e.value[0]) ? (a(), u("div", d1, "[ " + T(e.value.join(", ")) + " ]", 1)) : (a(), u("div", {
+            key: 1,
+            class: w(e.classes("array", "div", e.depth, o(ge).grid2Class))
+          }, [
+            s("div", {
+              class: w(e.classes("array", "div", e.depth, o(ge).grid3Class))
+            }, [
+              s("div", {
+                class: w(e.classes("array", "div", e.depth, o(ge).grid4Class))
+              }, [
+                s("table", {
+                  class: w(e.classes("object", "table", e.depth, o(ge).tableClass))
+                }, [
+                  s("thead", {
+                    class: w(e.classes("array", "thead", e.depth, o(ge).theadClass))
+                  }, [
+                    s("tr", null, [
+                      (a(!0), u(Te, null, Ie(o(d), (b) => (a(), u("th", {
+                        class: w(e.classes("array", "th", e.depth, o(ge).theadCellClass + " whitespace-nowrap"))
+                      }, [
+                        c1,
+                        we(T(i(b)), 1)
+                      ], 2))), 256))
+                    ])
+                  ], 2),
+                  s("tbody", null, [
+                    (a(!0), u(Te, null, Ie(e.value, (b, p) => (a(), u("tr", {
+                      class: w(e.classes("array", "tr", e.depth, p % 2 == 0 ? "bg-white" : "bg-gray-50", p))
+                    }, [
+                      (a(!0), u(Te, null, Ie(o(d), (v) => (a(), u("td", {
+                        class: w(e.classes("array", "td", e.depth, o(ge).tableCellClass))
+                      }, [
+                        $e(y, Me({
+                          value: b[v],
+                          "field-attrs": e.fieldAttrs,
+                          depth: e.depth + 1,
+                          classes: e.classes
+                        }, r(v)), null, 16, ["value", "field-attrs", "depth", "classes"])
+                      ], 2))), 256))
+                    ], 2))), 256))
+                  ])
+                ], 2)
+              ], 2)
+            ], 2)
+          ], 2))
+        ], 2)) : (a(), u("div", f1, [
+          s("table", {
+            class: w(e.classes("object", "table", e.depth, "table-object"))
+          }, [
+            (a(!0), u(Te, null, Ie(c(e.value), (b) => (a(), u("tr", {
+              class: w(e.classes("object", "tr", e.depth, ""))
+            }, [
+              s("th", {
+                class: w(e.classes("object", "th", e.depth, "align-top py-2 px-4 text-left text-sm font-medium tracking-wider whitespace-nowrap"))
+              }, T(b.key), 3),
+              s("td", {
+                class: w(e.classes("object", "td", e.depth, "align-top py-2 px-4 text-sm"))
+              }, [
+                $e(y, Me({
+                  value: b.val,
+                  "field-attrs": e.fieldAttrs,
+                  depth: e.depth + 1,
+                  classes: e.classes
+                }, r(b.key)), null, 16, ["value", "field-attrs", "depth", "classes"])
+              ], 2)
+            ], 2))), 256))
+          ], 2)
+        ]))
+      ], 2);
+    };
+  }
+}), v1 = { class: "absolute top-0 right-0 pt-4 pr-4" }, h1 = /* @__PURE__ */ s("span", { class: "sr-only" }, "Close", -1), g1 = /* @__PURE__ */ s("svg", {
+  class: "h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2",
+    d: "M6 18L18 6M6 6l12 12"
+  })
+], -1), p1 = [
+  h1,
+  g1
+], y1 = /* @__PURE__ */ ce({
+  __name: "CloseButton",
+  props: {
+    buttonClass: { default: "bg-white dark:bg-black" }
+  },
+  emits: ["close"],
+  setup(e, { emit: t }) {
+    return (l, n) => (a(), u("div", v1, [
+      s("button", {
+        type: "button",
+        onClick: n[0] || (n[0] = (i) => l.$emit("close")),
+        class: w([e.buttonClass, "rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"])
+      }, p1, 2)
+    ]));
+  }
+}), b1 = ["id", "aria-labelledby"], w1 = /* @__PURE__ */ s("div", { class: "fixed inset-0" }, null, -1), x1 = { class: "fixed inset-0 overflow-hidden" }, k1 = { class: "flex h-full flex-col bg-white dark:bg-black shadow-xl" }, $1 = { class: "flex min-h-0 flex-1 flex-col overflow-auto" }, C1 = { class: "flex-1" }, _1 = { class: "bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6" }, L1 = { class: "flex items-start justify-between space-x-3" }, V1 = { class: "space-y-1" }, S1 = ["id"], M1 = {
+  key: 1,
+  class: "text-sm text-gray-500"
+}, A1 = { class: "flex h-7 items-center" }, T1 = { class: "flex-shrink-0 border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:px-6" }, F1 = /* @__PURE__ */ ce({
+  __name: "SlideOver",
+  props: {
+    id: { default: "SlideOver" },
+    title: null,
+    contentClass: { default: "relative mt-6 flex-1 px-4 sm:px-6" }
+  },
+  emits: ["done"],
+  setup(e, { emit: t }) {
+    const l = A(!1), n = A(""), i = {
+      entering: { cls: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-full", to: "translate-x-0" },
+      leaving: { cls: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-0", to: "translate-x-full" }
+    };
+    Lt(l, () => {
+      Ct(i, n, l.value), l.value || setTimeout(() => t("done"), 700);
+    }), l.value = !0;
+    const r = () => l.value = !1, d = (c) => {
+      c.key === "Escape" && r();
+    };
+    return tt(() => window.addEventListener("keydown", d)), Rt(() => window.removeEventListener("keydown", d)), (c, h) => {
+      const m = X("CloseButton");
+      return a(), u("div", {
+        id: e.id,
+        class: "relative z-10",
+        "aria-labelledby": e.id + "-title",
+        role: "dialog",
+        "aria-modal": "true"
+      }, [
+        w1,
+        s("div", x1, [
+          s("div", {
+            onMousedown: r,
+            class: "absolute inset-0 overflow-hidden"
+          }, [
+            s("div", {
+              onMousedown: h[0] || (h[0] = Ue(() => {
+              }, ["stop"])),
+              class: "pointer-events-none fixed inset-y-0 right-0 flex pl-10"
+            }, [
+              s("div", {
+                class: w(["pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg", n.value])
+              }, [
+                s("div", k1, [
+                  s("div", $1, [
+                    s("div", C1, [
+                      s("div", _1, [
+                        s("div", L1, [
+                          s("div", V1, [
+                            e.title ? (a(), u("h2", {
+                              key: 0,
+                              class: "text-lg font-medium text-gray-900 dark:text-gray-50",
+                              id: e.id + "-title"
+                            }, T(e.title), 9, S1)) : k("", !0),
+                            c.$slots.subtitle ? (a(), u("p", M1, [
+                              Z(c.$slots, "subtitle")
+                            ])) : k("", !0)
+                          ]),
+                          s("div", A1, [
+                            $e(m, {
+                              "button-class": "bg-gray-50 dark:bg-gray-900",
+                              onClose: r
+                            })
+                          ])
+                        ])
+                      ]),
+                      s("div", {
+                        class: w(e.contentClass)
+                      }, [
+                        Z(c.$slots, "default")
+                      ], 2)
+                    ])
+                  ]),
+                  s("div", T1, [
+                    Z(c.$slots, "footer")
+                  ])
+                ])
+              ], 2)
+            ], 32)
+          ], 32)
+        ])
+      ], 8, b1);
+    };
+  }
+}), I1 = ["id", "data-transition-for", "aria-labelledby"], D1 = { class: "fixed inset-0 z-10 overflow-y-auto" }, j1 = { class: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" }, O1 = /* @__PURE__ */ s("span", { class: "sr-only" }, "Close", -1), P1 = /* @__PURE__ */ s("svg", {
+  class: "h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2",
+    d: "M6 18L18 6M6 6l12 12"
+  })
+], -1), B1 = [
+  O1,
+  P1
+], R1 = /* @__PURE__ */ ce({
+  __name: "ModalDialog",
+  props: {
+    id: { default: "ModalDialog" },
+    modalClass: { default: Jl.modalClass },
+    sizeClass: { default: Jl.sizeClass }
+  },
+  emits: ["done"],
+  setup(e, { emit: t }) {
+    const l = A(!1), n = A(""), i = {
+      entering: { cls: "ease-out duration-300", from: "opacity-0", to: "opacity-100" },
+      leaving: { cls: "ease-in duration-200", from: "opacity-100", to: "opacity-0" }
+    }, r = A(""), d = {
+      entering: { cls: "ease-out duration-300", from: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95", to: "opacity-100 translate-y-0 sm:scale-100" },
+      leaving: { cls: "ease-in duration-200", from: "opacity-100 translate-y-0 sm:scale-100", to: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" }
+    };
+    Lt(l, () => {
+      Ct(i, n, l.value), Ct(d, r, l.value), l.value || setTimeout(() => t("done"), 200);
+    }), l.value = !0;
+    const c = () => l.value = !1;
+    Xt("ModalProvider", {
+      openModal: b
+    });
+    const m = A(), y = A();
+    function b(g, P) {
+      m.value = g, y.value = P;
+    }
+    async function p(g) {
+      y.value && y.value(g), m.value = void 0, y.value = void 0;
+    }
+    const v = (g) => {
+      g.key === "Escape" && c();
+    };
+    return tt(() => window.addEventListener("keydown", v)), Rt(() => window.removeEventListener("keydown", v)), (g, P) => {
+      var ee;
+      const N = X("ModalLookup");
+      return a(), u("div", {
+        id: e.id,
+        "data-transition-for": e.id,
+        onMousedown: c,
+        class: "relative z-10",
+        "aria-labelledby": `${e.id}-title`,
+        role: "dialog",
+        "aria-modal": "true"
+      }, [
+        s("div", {
+          class: w(["fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity", n.value])
+        }, null, 2),
+        s("div", D1, [
+          s("div", j1, [
+            s("div", {
+              class: w([e.modalClass, e.sizeClass, r.value]),
+              onMousedown: P[0] || (P[0] = Ue(() => {
+              }, ["stop"]))
+            }, [
+              s("div", null, [
+                s("div", { class: "hidden sm:block absolute top-0 right-0 pt-4 pr-4 z-10" }, [
+                  s("button", {
+                    type: "button",
+                    onClick: c,
+                    class: "bg-white dark:bg-black rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"
+                  }, B1)
+                ]),
+                Z(g.$slots, "default")
+              ])
+            ], 34)
+          ])
+        ]),
+        ((ee = m.value) == null ? void 0 : ee.name) == "ModalLookup" && m.value.ref ? (a(), se(N, {
+          key: 0,
+          "ref-info": m.value.ref,
+          onDone: p
+        }, null, 8, ["ref-info"])) : k("", !0)
+      ], 40, I1);
+    };
+  }
+}), E1 = {
+  class: "pt-2 overflow-auto",
+  style: { "min-height": "620px" }
+}, H1 = { class: "mt-3 pl-5 flex flex-wrap items-center" }, z1 = { class: "hidden sm:block text-xl leading-6 font-medium text-gray-900 dark:text-gray-50 mr-3" }, N1 = { class: "hidden md:inline" }, U1 = { class: "flex pb-1 sm:pb-0" }, q1 = ["title"], Q1 = /* @__PURE__ */ s("svg", {
+  class: "w-8 h-8",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("g", {
+    "stroke-width": "1.5",
+    fill: "none"
+  }, [
+    /* @__PURE__ */ s("path", {
+      d: "M9 3H3.6a.6.6 0 0 0-.6.6v16.8a.6.6 0 0 0 .6.6H9M9 3v18M9 3h6M9 21h6m0-18h5.4a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H15m0-18v18",
+      stroke: "currentColor"
+    })
+  ])
+], -1), K1 = [
+  Q1
+], Z1 = ["disabled"], G1 = /* @__PURE__ */ s("svg", {
+  class: "w-8 h-8",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z",
+    fill: "currentColor"
+  })
+], -1), W1 = [
+  G1
+], J1 = ["disabled"], X1 = /* @__PURE__ */ s("svg", {
+  class: "w-8 h-8",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    d: "M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z",
+    fill: "currentColor"
+  })
+], -1), Y1 = [
+  X1
+], em = ["disabled"], tm = /* @__PURE__ */ s("svg", {
+  class: "w-8 h-8",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    d: "M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z",
+    fill: "currentColor"
+  })
+], -1), lm = [
+  tm
+], nm = ["disabled"], sm = /* @__PURE__ */ s("svg", {
+  class: "w-8 h-8",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z",
+    fill: "currentColor"
+  })
+], -1), om = [
+  sm
+], am = {
+  key: 0,
+  class: "flex pb-1 sm:pb-0"
+}, im = { class: "px-4 text-lg text-black dark:text-white" }, rm = { key: 0 }, um = { key: 1 }, dm = /* @__PURE__ */ s("span", { class: "hidden xl:inline" }, " Showing Results ", -1), cm = { key: 2 }, fm = {
+  key: 1,
+  class: "pl-2"
+}, mm = /* @__PURE__ */ s("svg", {
+  class: "w-5 h-5",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-hidden": "true",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("path", {
+    fill: "currentColor",
+    d: "M6.78 2.72a.75.75 0 0 1 0 1.06L4.56 6h8.69a7.75 7.75 0 1 1-7.75 7.75a.75.75 0 0 1 1.5 0a6.25 6.25 0 1 0 6.25-6.25H4.56l2.22 2.22a.75.75 0 1 1-1.06 1.06l-3.5-3.5a.75.75 0 0 1 0-1.06l3.5-3.5a.75.75 0 0 1 1.06 0Z"
+  })
+], -1), vm = [
+  mm
+], hm = { class: "flex pb-1 sm:pb-0" }, gm = {
+  key: 0,
+  class: "pl-2"
+}, pm = /* @__PURE__ */ s("svg", {
+  class: "flex-none w-5 h-5 mr-2 text-gray-400 dark:text-gray-500 group-hover:text-gray-500",
+  "aria-hidden": "true",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor"
+}, [
+  /* @__PURE__ */ s("path", {
+    "fill-rule": "evenodd",
+    d: "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z",
+    "clip-rule": "evenodd"
+  })
+], -1), ym = { class: "mr-1" }, bm = {
+  key: 0,
+  class: "h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, wm = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z",
+  "clip-rule": "evenodd"
+}, null, -1), xm = [
+  wm
+], km = {
+  key: 1,
+  class: "h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, $m = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z",
+  "clip-rule": "evenodd"
+}, null, -1), Cm = [
+  $m
+], _m = { key: 1 }, Lm = { key: 4 }, Vm = { key: 0 }, Sm = {
+  key: 0,
+  class: "cursor-pointer flex justify-between items-center hover:text-gray-900 dark:hover:text-gray-50"
+}, Mm = { class: "mr-1 select-none" }, Am = {
+  key: 1,
+  class: "flex justify-between items-center"
+}, Tm = { class: "mr-1 select-none" }, Fm = /* @__PURE__ */ ce({
+  __name: "ModalLookup",
+  props: {
+    id: { default: "ModalLookup" },
+    refInfo: null,
+    skip: { default: 0 },
+    prefs: null,
+    selectedColumns: null,
+    allowFiltering: { type: [Boolean, null], default: !0 },
+    showPreferences: { type: [Boolean, null], default: !0 },
+    showPagingNav: { type: [Boolean, null], default: !0 },
+    showPagingInfo: { type: [Boolean, null], default: !0 },
+    showResetPreferences: { type: [Boolean, null], default: !0 },
+    showFiltersView: { type: [Boolean, null], default: !0 },
+    toolbarButtonClass: null,
+    canFilter: null
+  },
+  emits: ["done"],
+  setup(e, { emit: t }) {
+    const l = e, n = en(), { config: i } = St(), { metadataApi: r, filterDefinitions: d } = at(), c = Ne("client"), h = i.value.storage, m = f(() => l.toolbarButtonClass ?? ge.toolbarButtonClass), y = f(() => d.value), b = 25, p = A({ take: b }), v = A(new Je()), g = A(l.skip), P = A(!1), N = A(), ee = (Q) => typeof Q == "string" ? Q.split(",") : Q || [];
+    function j(Q, H) {
+      return ge.getTableRowClass("fullWidth", H, !1, !0);
+    }
+    function z() {
+      let Q = ee(l.selectedColumns);
+      return Q.length > 0 ? Q : [];
+    }
+    const F = f(() => ot(l.refInfo.model)), W = f(() => {
+      let H = z().map((ve) => ve.toLowerCase());
+      const re = et(F.value);
+      return H.length > 0 ? H.map((ve) => re.find((Se) => Se.name.toLowerCase() === ve)).filter((ve) => ve != null) : re;
+    }), O = f(() => {
+      let Q = W.value.map((re) => re.name), H = ee(p.value.selectedColumns).map((re) => re.toLowerCase());
+      return H.length > 0 ? Q.filter((re) => H.includes(re.toLowerCase())) : Q;
+    }), S = f(() => p.value.take ?? b), U = f(() => v.value.response ? ye(v.value.response, "results") : []), te = f(() => {
+      var Q;
+      return ((Q = v.value.response) == null ? void 0 : Q.total) ?? U.value.length ?? 0;
+    }), R = f(() => g.value > 0), J = f(() => g.value > 0), Y = f(() => U.value.length >= S.value), G = f(() => U.value.length >= S.value), M = A([]), le = f(() => M.value.some((Q) => Q.settings.filters.length > 0 || !!Q.settings.sort)), x = f(() => M.value.map((Q) => Q.settings.filters.length).reduce((Q, H) => Q + H, 0)), K = f(() => el(F.value)), E = f(() => {
+      var Q;
+      return (Q = r.value) == null ? void 0 : Q.operations.find((H) => {
+        var re;
+        return ((re = H.dataModel) == null ? void 0 : re.name) == l.refInfo.model && ze.isAnyQuery(H);
+      });
+    }), q = A(), C = A(!1), L = A(), B = () => `${l.id}/ApiPrefs/${l.refInfo.model}`, fe = (Q) => `Column/${l.id}:${l.refInfo.model}.${Q}`;
+    async function I(Q) {
+      g.value += Q, g.value < 0 && (g.value = 0);
+      var H = Math.floor(te.value / S.value) * S.value;
+      g.value > H && (g.value = H), await xe();
+    }
+    async function V(Q, H) {
+      t("done", Q);
+    }
+    function oe() {
+      t("done", null);
+    }
+    function Le(Q, H) {
+      var ve, Se, Oe;
+      let re = H.target;
+      if ((re == null ? void 0 : re.tagName) !== "TD") {
+        let Re = (ve = re == null ? void 0 : re.closest("TABLE")) == null ? void 0 : ve.getBoundingClientRect(), _e = M.value.find((Fe) => Fe.name.toLowerCase() == Q.toLowerCase());
+        if (_e && Re) {
+          let Fe = 318, je = (((Se = H.target) == null ? void 0 : Se.tagName) === "DIV" ? H.target : (Oe = H.target) == null ? void 0 : Oe.closest("DIV")).getBoundingClientRect(), Ge = Fe + 25;
+          L.value = {
+            column: _e,
+            topLeft: {
+              x: Math.max(Math.floor(je.x + 25), Ge),
+              y: Math.floor(115)
+            }
+          };
+        }
+      }
+    }
+    function de() {
+      L.value = null;
+    }
+    async function ue(Q) {
+      var re;
+      let H = (re = L.value) == null ? void 0 : re.column;
+      H && (H.settings = Q, h.setItem(fe(H.name), JSON.stringify(H.settings)), await xe()), L.value = null;
+    }
+    async function _(Q) {
+      h.setItem(fe(Q.name), JSON.stringify(Q.settings)), await xe();
+    }
+    async function ie(Q) {
+      C.value = !1, p.value = Q, h.setItem(B(), JSON.stringify(Q)), await xe();
+    }
+    async function xe() {
+      await Ve(he());
+    }
+    async function Ve(Q) {
+      const H = E.value;
+      if (!H) {
+        console.error(`No Query API was found for ${l.refInfo.model}`);
+        return;
+      }
+      let re = Gt(H, Q), ve = es((Re) => {
+        v.value.response = v.value.error = void 0, P.value = Re;
+      }), Se = await c.api(re);
+      ve(), xt(() => v.value = Se);
+      let Oe = ye(Se.response, "results") || [];
+      !Se.succeeded || Oe.label == 0;
+    }
+    function he() {
+      let Q = {
+        include: "total",
+        take: S.value
+      }, H = ee(p.value.selectedColumns || l.selectedColumns);
+      if (H.length > 0) {
+        let ve = K.value;
+        ve && H.includes(ve.name) && (H = [ve.name, ...H]), Q.fields = H.join(",");
+      }
+      let re = [];
+      return M.value.forEach((ve) => {
+        ve.settings.sort && re.push((ve.settings.sort === "DESC" ? "-" : "") + ve.name), ve.settings.filters.forEach((Se) => {
+          let Oe = Se.key.replace("%", ve.name);
+          Q[Oe] = Se.value;
+        });
+      }), typeof Q.skip > "u" && g.value > 0 && (Q.skip = g.value), re.length > 0 && (Q.orderBy = re.join(",")), Q;
+    }
+    async function De() {
+      M.value.forEach((Q) => {
+        Q.settings = { filters: [] }, h.removeItem(fe(Q.name));
+      }), await xe();
+    }
+    return tt(async () => {
+      const Q = l.prefs || yl(h.getItem(B()));
+      Q && (p.value = Q), M.value = W.value.map((H) => ({
+        name: H.name,
+        type: H.type,
+        meta: H,
+        settings: Object.assign(
+          {
+            filters: []
+          },
+          yl(h.getItem(fe(H.name)))
+        )
+      })), isNaN(l.skip) || (g.value = l.skip), await xe();
+    }), (Q, H) => {
+      const re = X("ErrorSummary"), ve = X("Loading"), Se = X("SettingsIcons"), Oe = X("DataGrid"), Re = X("ModalDialog");
+      return a(), u(Te, null, [
+        e.refInfo ? (a(), se(Re, {
+          key: 0,
+          ref_key: "modalDialog",
+          ref: q,
+          id: e.id,
+          onDone: oe
+        }, {
+          default: ke(() => [
+            s("div", E1, [
+              s("div", H1, [
+                s("h3", z1, [
+                  we(" Select "),
+                  s("span", N1, T(o(He)(e.refInfo.model)), 1)
+                ]),
+                s("div", U1, [
+                  e.showPreferences ? (a(), u("button", {
+                    key: 0,
+                    type: "button",
+                    class: "pl-2 text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400",
+                    title: `${e.refInfo.model} Preferences`,
+                    onClick: H[0] || (H[0] = (_e) => C.value = !C.value)
+                  }, K1, 8, q1)) : k("", !0),
+                  e.showPagingNav ? (a(), u("button", {
+                    key: 1,
+                    type: "button",
+                    class: w(["pl-2", o(R) ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500"]),
+                    title: "First page",
+                    disabled: !o(R),
+                    onClick: H[1] || (H[1] = (_e) => I(-o(te)))
+                  }, W1, 10, Z1)) : k("", !0),
+                  e.showPagingNav ? (a(), u("button", {
+                    key: 2,
+                    type: "button",
+                    class: w(["pl-2", o(J) ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500"]),
+                    title: "Previous page",
+                    disabled: !o(J),
+                    onClick: H[2] || (H[2] = (_e) => I(-o(S)))
+                  }, Y1, 10, J1)) : k("", !0),
+                  e.showPagingNav ? (a(), u("button", {
+                    key: 3,
+                    type: "button",
+                    class: w(["pl-2", o(Y) ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500"]),
+                    title: "Next page",
+                    disabled: !o(Y),
+                    onClick: H[3] || (H[3] = (_e) => I(o(S)))
+                  }, lm, 10, em)) : k("", !0),
+                  e.showPagingNav ? (a(), u("button", {
+                    key: 4,
+                    type: "button",
+                    class: w(["pl-2", o(G) ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500"]),
+                    title: "Last page",
+                    disabled: !o(G),
+                    onClick: H[4] || (H[4] = (_e) => I(o(te)))
+                  }, om, 10, nm)) : k("", !0)
+                ]),
+                e.showPagingInfo ? (a(), u("div", am, [
+                  s("div", im, [
+                    P.value ? (a(), u("span", rm, "Querying...")) : k("", !0),
+                    o(U).length ? (a(), u("span", um, [
+                      dm,
+                      we(" " + T(g.value + 1) + " - " + T(Math.min(g.value + o(U).length, o(te))) + " ", 1),
+                      s("span", null, " of " + T(o(te)), 1)
+                    ])) : v.value.completed ? (a(), u("span", cm, "No Results")) : k("", !0)
+                  ])
+                ])) : k("", !0),
+                o(le) && e.showResetPreferences ? (a(), u("div", fm, [
+                  s("button", {
+                    type: "button",
+                    onClick: De,
+                    title: "Reset Preferences & Filters",
+                    class: w(o(m))
+                  }, vm, 2)
+                ])) : k("", !0),
+                s("div", hm, [
+                  e.showFiltersView && o(x) > 0 ? (a(), u("div", gm, [
+                    s("button", {
+                      type: "button",
+                      onClick: H[5] || (H[5] = (_e) => N.value = N.value == "filters" ? null : "filters"),
+                      class: w(o(m)),
+                      "aria-expanded": "false"
+                    }, [
+                      pm,
+                      s("span", ym, T(o(x)) + " " + T(o(x) == 1 ? "Filter" : "Filters"), 1),
+                      N.value != "filters" ? (a(), u("svg", bm, xm)) : (a(), u("svg", km, Cm))
+                    ], 2)
+                  ])) : k("", !0)
+                ])
+              ]),
+              N.value == "filters" ? (a(), se(Sn, {
+                key: 0,
+                class: "border-y border-gray-200 dark:border-gray-800 py-8 my-2",
+                definitions: o(y),
+                columns: M.value,
+                onDone: H[6] || (H[6] = (_e) => N.value = null),
+                onChange: _
+              }, null, 8, ["definitions", "columns"])) : k("", !0),
+              L.value ? (a(), u("div", _m, [
+                $e(Vn, {
+                  definitions: o(y),
+                  column: L.value.column,
+                  "top-left": L.value.topLeft,
+                  onDone: de,
+                  onSave: ue
+                }, null, 8, ["definitions", "column", "top-left"])
+              ])) : k("", !0),
+              v.value.error ? (a(), se(re, {
+                key: 2,
+                status: v.value.error
+              }, null, 8, ["status"])) : P.value ? (a(), se(ve, { key: 3 })) : (a(), u("div", Lm, [
+                o(U).length ? (a(), u("div", Vm, [
+                  $e(Oe, {
+                    id: e.id,
+                    items: o(U),
+                    type: e.refInfo.model,
+                    "selected-columns": o(O),
+                    onFiltersChanged: xe,
+                    tableStyle: "fullWidth",
+                    rowClass: j,
+                    onRowSelected: V,
+                    onHeaderSelected: Le
+                  }, tn({
+                    header: ke(({ column: _e, label: Fe }) => {
+                      var Qe;
+                      return [
+                        e.allowFiltering && (!l.canFilter || l.canFilter(_e)) ? (a(), u("div", Sm, [
+                          s("span", Mm, T(Fe), 1),
+                          $e(Se, {
+                            column: M.value.find((je) => je.name.toLowerCase() === _e.toLowerCase()),
+                            "is-open": ((Qe = L.value) == null ? void 0 : Qe.column.name) === _e
+                          }, null, 8, ["column", "is-open"])
+                        ])) : (a(), u("div", Am, [
+                          s("span", Tm, T(Fe), 1)
+                        ]))
+                      ];
+                    }),
+                    _: 2
+                  }, [
+                    Ie(Object.keys(o(n)), (_e) => ({
+                      name: _e,
+                      fn: ke((Fe) => [
+                        Z(Q.$slots, _e, jt(gl(Fe)))
+                      ])
+                    }))
+                  ]), 1032, ["id", "items", "type", "selected-columns"])
+                ])) : k("", !0)
+              ]))
+            ])
+          ]),
+          _: 3
+        }, 8, ["id"])) : k("", !0),
+        C.value ? (a(), se(Mn, {
+          key: 1,
+          columns: o(W),
+          prefs: p.value,
+          onDone: H[7] || (H[7] = (_e) => C.value = !1),
+          onSave: ie
+        }, null, 8, ["columns", "prefs"])) : k("", !0)
+      ], 64);
+    };
+  }
+}), Im = { class: "sm:hidden" }, Dm = ["for"], jm = ["id", "name"], Om = ["value"], Pm = { class: "hidden sm:block" }, Bm = { class: "border-b border-gray-200" }, Rm = {
+  class: "-mb-px flex",
+  "aria-label": "Tabs"
+}, Em = ["onClick"], Hm = /* @__PURE__ */ ce({
+  __name: "Tabs",
+  props: {
+    tabs: null,
+    id: { default: "tabs" },
+    param: { default: "tab" },
+    label: { type: Function, default: (e) => He(e) },
+    selected: null,
+    tabClass: null,
+    bodyClass: { default: "p-4" },
+    url: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    const t = e, l = f(() => Object.keys(t.tabs)), n = (y) => t.label ? t.label(y) : He(y), i = f(() => t.id || "tabs"), r = f(() => t.param || "tab"), d = A();
+    function c(y) {
+      if (d.value = y, t.url) {
+        const b = l.value[0];
+        nn({ tab: y === b ? void 0 : y });
+      }
+    }
+    function h(y) {
+      return d.value === y;
+    }
+    const m = f(() => `${100 / Object.keys(t.tabs).length}%`);
+    return tt(() => {
+      if (d.value = t.selected || Object.keys(t.tabs)[0], t.url) {
+        const y = location.search ? location.search : location.hash.includes("?") ? "?" + dl(location.hash, "?") : "", p = zl(y)[r.value];
+        p && (d.value = p);
+      }
+    }), (y, b) => (a(), u("div", null, [
+      s("div", Im, [
+        s("label", {
+          for: o(i),
+          class: "sr-only"
+        }, "Select a tab", 8, Dm),
+        s("select", {
+          id: o(i),
+          name: o(i),
+          class: "block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500",
+          onChange: b[0] || (b[0] = (p) => {
+            var v;
+            return c((v = p.target) == null ? void 0 : v.value);
+          })
+        }, [
+          (a(!0), u(Te, null, Ie(o(l), (p) => (a(), u("option", {
+            key: p,
+            value: p
+          }, T(n(p)), 9, Om))), 128))
+        ], 40, jm)
+      ]),
+      s("div", Pm, [
+        s("div", Bm, [
+          s("nav", Rm, [
+            (a(!0), u(Te, null, Ie(o(l), (p) => (a(), u("a", {
+              href: "#",
+              onClick: Ue((v) => c(p), ["prevent"]),
+              style: Xl({ width: o(m) }),
+              class: w([h(p) ? "border-indigo-500 text-indigo-600 py-4 px-1 text-center border-b-2 font-medium text-sm" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-center border-b-2 font-medium text-sm", e.tabClass])
+            }, T(n(p)), 15, Em))), 256))
+          ])
+        ])
+      ]),
+      s("div", {
+        class: w(e.bodyClass)
+      }, [
+        (a(), se(Jn(e.tabs[d.value])))
+      ], 2)
+    ]));
+  }
+}), zm = /* @__PURE__ */ s("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-4 w-4 text-gray-400",
+  preserveAspectRatio: "xMidYMid meet",
+  viewBox: "0 0 32 32"
+}, [
+  /* @__PURE__ */ s("path", {
+    fill: "currentColor",
+    d: "M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z"
+  })
+], -1), Nm = [
+  zm
+], Um = /* @__PURE__ */ s("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-4 w-4 text-indigo-600",
+  preserveAspectRatio: "xMidYMid meet",
+  viewBox: "0 0 32 32"
+}, [
+  /* @__PURE__ */ s("path", {
+    fill: "currentColor",
+    d: "M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z"
+  })
+], -1), qm = [
+  Um
+], Qm = /* @__PURE__ */ ce({
+  __name: "DarkModeToggle",
+  setup(e) {
+    const t = typeof document < "u" ? document.documentElement : null, l = () => !!(t != null && t.classList.contains("dark")), n = A(localStorage.getItem("color-scheme") == "dark");
+    function i() {
+      l() ? t == null || t.classList.remove("dark") : t == null || t.classList.add("dark"), n.value = l(), localStorage.setItem("color-scheme", n.value ? "dark" : "light");
+    }
+    return (r, d) => (a(), u("button", {
+      type: "button",
+      class: "bg-gray-200 dark:bg-gray-700 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black",
+      role: "switch",
+      "aria-checked": "false",
+      onClick: d[0] || (d[0] = (c) => i())
+    }, [
+      s("span", {
+        class: w(`${n.value ? "translate-x-0" : "translate-x-5"} pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white dark:bg-black shadow transform ring-0 transition ease-in-out duration-200`)
+      }, [
+        s("span", {
+          class: w(`${n.value ? "opacity-100 ease-in duration-200" : "opacity-0 ease-out duration-100"} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`),
+          "aria-hidden": "true"
+        }, Nm, 2),
+        s("span", {
+          class: w(`${n.value ? "opacity-0 ease-out duration-100" : "opacity-100 ease-in duration-200"} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`),
+          "aria-hidden": "true"
+        }, qm, 2)
+      ], 2)
+    ]));
+  }
+}), Km = { key: 0 }, Zm = {
+  key: 1,
+  class: "min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8"
+}, Gm = { class: "sm:mx-auto sm:w-full sm:max-w-md" }, Wm = { class: "mt-6 text-center text-3xl font-extrabold text-gray-900" }, Jm = {
+  key: 0,
+  class: "mt-4 text-center text-sm text-gray-600"
+}, Xm = { class: "relative z-0 inline-flex shadow-sm rounded-md" }, Ym = ["onClick"], ev = { class: "mt-8 sm:mx-auto sm:w-full sm:max-w-md" }, tv = { class: "bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10" }, lv = ["onSubmit"], nv = { class: "mt-8" }, sv = {
+  key: 1,
+  class: "mt-6"
+}, ov = /* @__PURE__ */ wl('<div class="relative"><div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-300"></div></div><div class="relative flex justify-center text-sm"><span class="px-2 bg-white text-gray-500"> Or continue with </span></div></div>', 1), av = { class: "mt-6 grid grid-cols-3 gap-3" }, iv = ["href", "title"], rv = {
+  key: 1,
+  class: "h-5 w-5 text-gray-700",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+}, uv = /* @__PURE__ */ s("path", {
+  d: "M16 8a5 5 0 1 0 5 5a5 5 0 0 0-5-5z",
+  fill: "currentColor"
+}, null, -1), dv = /* @__PURE__ */ s("path", {
+  d: "M16 2a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2zm7.992 22.926A5.002 5.002 0 0 0 19 20h-6a5.002 5.002 0 0 0-4.992 4.926a12 12 0 1 1 15.985 0z",
+  fill: "currentColor"
+}, null, -1), cv = [
+  uv,
+  dv
+], fv = /* @__PURE__ */ ce({
+  __name: "SignIn",
+  props: {
+    provider: null,
+    title: { default: "Sign In" },
+    tabs: { type: [Boolean, String], default: !0 },
+    oauth: { type: [Boolean, String], default: !0 }
+  },
+  emits: ["login"],
+  setup(e, { emit: t }) {
+    const l = e, { getMetadata: n, createDto: i } = at(), r = Tl(), d = Ne("client"), { signIn: c } = Ln(), h = n({ assert: !0 }), m = h.plugins.auth, y = document.baseURI, b = h.app.baseUrl, p = A(i("Authenticate")), v = A(new Je()), g = A(l.provider);
+    tt(() => {
+      m == null || m.authProviders.map((R) => R.formLayout).filter((R) => R).forEach((R) => R.forEach((J) => p.value[J.id] = ""));
+    });
+    const P = f(() => (m == null ? void 0 : m.authProviders.filter((R) => R.formLayout)) || []), N = f(() => P.value[0] || {}), ee = f(() => P.value[Math.max(P.value.length - 1, 0)] || {}), j = f(() => (g.value ? m == null ? void 0 : m.authProviders.find((R) => R.name === g.value) : null) ?? N.value), z = (R) => R === !1 || R === "false";
+    function F(R) {
+      return R.label || R.navItem && R.navItem.label;
+    }
+    const W = f(() => {
+      var R;
+      return (((R = j.value) == null ? void 0 : R.formLayout) || []).map((J) => {
+        var Y, G;
+        return Object.assign({}, J, {
+          type: (Y = J.type) == null ? void 0 : Y.toLowerCase(),
+          autocomplete: J.autocomplete || (((G = J.type) == null ? void 0 : G.toLowerCase()) === "password" ? "current-password" : void 0) || (J.id.toLowerCase() === "username" ? "username" : void 0),
+          css: Object.assign({ field: "col-span-12" }, J.css)
+        });
+      });
+    }), O = f(() => z(l.oauth) ? [] : (m == null ? void 0 : m.authProviders.filter((R) => R.type === "oauth")) || []), S = f(() => {
+      let R = Lo(
+        m == null ? void 0 : m.authProviders.filter((Y) => Y.formLayout && Y.formLayout.length > 0),
+        (Y, G) => {
+          let M = F(G) || st(G.name);
+          Y[M] = G.name === N.value.name ? "" : G.name;
+        }
+      );
+      const J = j.value;
+      return J && z(l.tabs) && (R = { [F(J) || st(J.name)]: J }), R;
+    }), U = f(() => {
+      let R = W.value.map((J) => J.id).filter((J) => J);
+      return v.value.summaryMessage(R);
+    });
+    async function te() {
+      if (p.value.provider = j.value.name, j.value.name === "authsecret" ? (d.headers.set("authsecret", p.value.authsecret), p.value = i("Authenticate")) : j.value.name === "basic" && (d.setCredentials(p.value.UserName, p.value.Password), p.value = i("Authenticate"), p.value.UserName = null, p.value.Password = null), v.value = await r.api(p.value), v.value.succeeded) {
+        const R = v.value.response;
+        c(R), t("login", R), v.value = new Je(), p.value = i("Authenticate");
+      }
+    }
+    return (R, J) => {
+      const Y = X("ErrorSummary"), G = X("AutoFormFields"), M = X("PrimaryButton"), le = X("Icon"), x = ro("href");
+      return o(m) ? (a(), u("div", Zm, [
+        s("div", Gm, [
+          s("h2", Wm, T(e.title), 1),
+          Object.keys(o(S)).length > 1 ? (a(), u("p", Jm, [
+            s("span", Xm, [
+              (a(!0), u(Te, null, Ie(o(S), (K, E) => kt((a(), u("a", {
+                onClick: (q) => g.value = K,
+                class: w([
+                  K === "" || K === o(N).name ? "rounded-l-md" : K === o(ee).name ? "rounded-r-md -ml-px" : "-ml-px",
+                  g.value === K ? "z-10 outline-none ring-1 ring-indigo-500 border-indigo-500" : "",
+                  "cursor-pointer relative inline-flex items-center px-4 py-1 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+                ])
+              }, [
+                we(T(E), 1)
+              ], 10, Ym)), [
+                [x, { provider: K }]
+              ])), 256))
+            ])
+          ])) : k("", !0)
+        ]),
+        s("div", ev, [
+          o(U) ? (a(), se(Y, {
+            key: 0,
+            class: "mb-3",
+            errorSummary: o(U)
+          }, null, 8, ["errorSummary"])) : k("", !0),
+          s("div", tv, [
+            o(W).length ? (a(), u("form", {
+              key: 0,
+              onSubmit: Ue(te, ["prevent"])
+            }, [
+              $e(G, {
+                modelValue: p.value,
+                formLayout: o(W),
+                api: v.value,
+                hideSummary: !0,
+                "divide-class": "",
+                "space-class": "space-y-6"
+              }, null, 8, ["modelValue", "formLayout", "api"]),
+              s("div", nv, [
+                $e(M, { class: "w-full" }, {
+                  default: ke(() => [
+                    we("Sign In")
+                  ]),
+                  _: 1
+                })
+              ])
+            ], 40, lv)) : k("", !0),
+            o(O).length ? (a(), u("div", sv, [
+              ov,
+              s("div", av, [
+                (a(!0), u(Te, null, Ie(o(O), (K) => (a(), u("div", null, [
+                  s("a", {
+                    href: o(b) + K.navItem.href + "?continue=" + o(y),
+                    title: F(K),
+                    class: "w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  }, [
+                    K.icon ? (a(), se(le, {
+                      key: 0,
+                      image: K.icon,
+                      class: "h-5 w-5 text-gray-700"
+                    }, null, 8, ["image"])) : (a(), u("svg", rv, cv))
+                  ], 8, iv)
+                ]))), 256))
+              ])
+            ])) : k("", !0)
+          ])
+        ])
+      ])) : (a(), u("div", Km, "No Auth Plugin"));
+    };
+  }
+}), mv = ["for"], vv = {
+  key: 1,
+  class: "border border-gray-200 flex justify-between"
+}, hv = { class: "p-2 flex flex-wrap gap-x-4" }, gv = /* @__PURE__ */ s("title", null, "Bold text (CTRL+B)", -1), pv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79c0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79c0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"
+}, null, -1), yv = [
+  gv,
+  pv
+], bv = /* @__PURE__ */ s("title", null, "Italics (CTRL+I)", -1), wv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8z"
+}, null, -1), xv = [
+  bv,
+  wv
+], kv = /* @__PURE__ */ s("title", null, "Insert Link (CTRL+K)", -1), $v = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5a5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8v2m9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1c0 1.71-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5a5 5 0 0 0-5-5Z"
+}, null, -1), Cv = [
+  kv,
+  $v
+], _v = /* @__PURE__ */ s("title", null, "Blockquote (CTRL+Q)", -1), Lv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "m15 17l2-4h-4V6h7v7l-2 4h-3Zm-9 0l2-4H4V6h7v7l-2 4H6Z"
+}, null, -1), Vv = [
+  _v,
+  Lv
+], Sv = /* @__PURE__ */ s("title", null, "Insert Image (CTRL+SHIFT+L)", -1), Mv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M2.992 21A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992ZM20 15V5H4v14L14 9l6 6Zm0 2.828l-6-6L6.828 19H20v-1.172ZM8 11a2 2 0 1 1 0-4a2 2 0 0 1 0 4Z"
+}, null, -1), Av = [
+  Sv,
+  Mv
+], Tv = /* @__PURE__ */ s("title", null, "Insert Code (CTRL+<)", -1), Fv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6L8 18Zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6l-6 6Z"
+}, null, -1), Iv = [
+  Tv,
+  Fv
+], Dv = /* @__PURE__ */ s("title", null, "H2 Heading (CTRL+H)", -1), jv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M7 20V7H2V4h13v3h-5v13H7Zm9 0v-8h-3V9h9v3h-3v8h-3Z"
+}, null, -1), Ov = [
+  Dv,
+  jv
+], Pv = /* @__PURE__ */ s("title", null, "Numbered List (ALT+1)", -1), Bv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M3 22v-1.5h2.5v-.75H4v-1.5h1.5v-.75H3V16h3q.425 0 .713.288T7 17v1q0 .425-.288.713T6 19q.425 0 .713.288T7 20v1q0 .425-.288.713T6 22H3Zm0-7v-2.75q0-.425.288-.713T4 11.25h1.5v-.75H3V9h3q.425 0 .713.288T7 10v1.75q0 .425-.288.713T6 12.75H4.5v.75H7V15H3Zm1.5-7V3.5H3V2h3v6H4.5ZM9 19v-2h12v2H9Zm0-6v-2h12v2H9Zm0-6V5h12v2H9Z"
+}, null, -1), Rv = [
+  Pv,
+  Bv
+], Ev = /* @__PURE__ */ s("title", null, "Bulleted List (ALT+-)", -1), Hv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M9 19v-2h12v2H9Zm0-6v-2h12v2H9Zm0-6V5h12v2H9ZM5 20q-.825 0-1.413-.588T3 18q0-.825.588-1.413T5 16q.825 0 1.413.588T7 18q0 .825-.588 1.413T5 20Zm0-6q-.825 0-1.413-.588T3 12q0-.825.588-1.413T5 10q.825 0 1.413.588T7 12q0 .825-.588 1.413T5 14Zm0-6q-.825 0-1.413-.588T3 6q0-.825.588-1.413T5 4q.825 0 1.413.588T7 6q0 .825-.588 1.413T5 8Z"
+}, null, -1), zv = [
+  Ev,
+  Hv
+], Nv = /* @__PURE__ */ s("title", null, "Strike Through (ALT+S)", -1), Uv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"
+}, null, -1), qv = [
+  Nv,
+  Uv
+], Qv = /* @__PURE__ */ s("title", null, "Undo (CTRL+Z)", -1), Kv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88c3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+}, null, -1), Zv = [
+  Qv,
+  Kv
+], Gv = /* @__PURE__ */ s("title", null, "Redo (CTRL+SHIFT+Z)", -1), Wv = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16a8.002 8.002 0 0 1 7.6-5.5c1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"
+}, null, -1), Jv = [
+  Gv,
+  Wv
+], Xv = {
+  key: 0,
+  class: "p-2 flex flex-wrap gap-x-4"
+}, Yv = ["href"], eh = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5c0-2.21-1.79-4-4-4z"
+}, null, -1), th = [
+  eh
+], lh = { class: "" }, nh = ["name", "id", "label", "value", "rows", "disabled", "onKeydown"], sh = ["id"], oh = ["id"], ah = /* @__PURE__ */ ce({
+  __name: "MarkdownInput",
+  props: {
+    status: null,
+    id: null,
+    inputClass: null,
+    label: null,
+    labelClass: null,
+    help: null,
+    placeholder: null,
+    modelValue: null,
+    counter: { type: Boolean },
+    rows: null,
+    errorMessages: null,
+    lang: null,
+    autoFocus: { type: Boolean },
+    disabled: { type: Boolean },
+    helpUrl: { default: "https://guides.github.com/features/mastering-markdown/" },
+    hide: null
+  },
+  emits: ["update:modelValue", "close"],
+  setup(e, { expose: t, emit: l }) {
+    const n = e;
+    let i = [], r = [], d = Ne("ApiState", void 0);
+    const c = f(() => mt.call({ responseStatus: n.status ?? (d == null ? void 0 : d.error.value) }, n.id)), h = f(() => n.label ?? He(st(n.id))), m = "bold,italics,link,image,blockquote,code,heading,orderedList,unorderedList,strikethrough,undo,redo,help".split(","), y = f(() => n.hide ? wt(m, n.hide) : wt(m, []));
+    function b(C) {
+      return y.value[C];
+    }
+    const p = f(() => ["shadow-sm font-mono" + nt.base.replace("rounded-md", ""), c.value ? "text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300" : "text-gray-900 " + nt.valid, n.inputClass]), v = "w-5 h-5 cursor-pointer select-none text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400", g = A();
+    t({ props: n, textarea: g, updateModelValue: P, selection: ee, hasSelection: N, selectionInfo: j, insert: F, replace: z });
+    function P(C) {
+      l("update:modelValue", C);
+    }
+    function N() {
+      return g.value.selectionStart !== g.value.selectionEnd;
+    }
+    function ee() {
+      const C = g.value;
+      return C.value.substring(C.selectionStart, C.selectionEnd) || "";
+    }
+    function j() {
+      const C = g.value, L = C.value, B = C.selectionStart, fe = L.substring(B, C.selectionEnd) || "", I = L.substring(0, B), V = I.lastIndexOf(`
+`);
+      return {
+        value: L,
+        sel: fe,
+        selPos: B,
+        beforeSel: I,
+        afterSel: L.substring(B),
+        prevCRPos: V,
+        beforeCR: V >= 0 ? I.substring(0, V + 1) : "",
+        afterCR: V >= 0 ? I.substring(V + 1) : ""
+      };
+    }
+    function z({ value: C, selectionStart: L, selectionEnd: B }) {
+      B == null && (B = L), P(C), xt(() => {
+        g.value.focus(), g.value.setSelectionRange(L, B);
+      });
+    }
+    function F(C, L, B = "", { selectionAtEnd: fe, offsetStart: I, offsetEnd: V, filterValue: oe, filterSelection: Le } = {}) {
+      const de = g.value;
+      let ue = de.value, _ = de.selectionEnd;
+      i.push({ value: ue, selectionStart: de.selectionStart, selectionEnd: de.selectionEnd }), r = [];
+      const ie = de.selectionStart, xe = de.selectionEnd;
+      let Ve = ue.substring(0, ie), he = ue.substring(xe);
+      const De = C && Ve.endsWith(C) && he.startsWith(L);
+      if (ie == xe) {
+        if (De ? (ue = Ve.substring(0, Ve.length - C.length) + he.substring(L.length), _ += -L.length) : (ue = Ve + C + B + L + he, _ += C.length, I = 0, V = (B == null ? void 0 : B.length) || 0, fe && (_ += V, V = 0)), oe) {
+          var H = { pos: _ };
+          ue = oe(ue, H), _ = H.pos;
+        }
+      } else {
+        var re = ue.substring(ie, xe);
+        Le && (re = Le(re)), De ? (ue = Ve.substring(0, Ve.length - C.length) + re + he.substring(L.length), I = -re.length - C.length, V = re.length) : (ue = Ve + C + re + L + he, I ? _ += (C + L).length : (_ = ie, I = C.length, V = re.length));
+      }
+      P(ue), xt(() => {
+        de.focus(), I = _ + (I || 0), V = (I || 0) + (V || 0), de.setSelectionRange(I, V);
+      });
+    }
+    const W = () => F("**", "**", "bold"), O = () => F("_", "_", "italics"), S = () => F("~~", "~~", "strikethrough"), U = () => F("[", "](https://)", "", { offsetStart: -9, offsetEnd: 8 }), te = () => F(`
+> `, `
+`, "Blockquote", {}), R = () => F("![](", ")");
+    function J(C) {
+      const L = ee();
+      if (L && !C.shiftKey)
+        F("`", "`", "code");
+      else {
+        const B = n.lang || "js";
+        L.indexOf(`
+`) === -1 ? F("\n```" + B + `
+`, "\n```\n", "// code") : F("```" + B + `
+`, "```\n", "");
+      }
+    }
+    function Y() {
+      if (N()) {
+        let { sel: C, selPos: L, beforeSel: B, afterSel: fe, prevCRPos: I, beforeCR: V, afterCR: oe } = j();
+        if (C.indexOf(`
+`) === -1)
+          F(`
+ 1. `, `
+`);
+        else if (!C.startsWith(" 1. ")) {
+          let ue = 1;
+          F("", "", " - ", {
+            selectionAtEnd: !0,
+            filterSelection: (_) => " 1. " + _.replace(/\n$/, "").replace(/\n/g, (ie) => `
+ ${++ue}. `) + `
+`
+          });
+        } else
+          F("", "", "", {
+            filterValue: (ue, _) => {
+              if (I >= 0) {
+                let ie = oe.replace(/^ - /, "");
+                B = V + ie, _.pos -= oe.length - ie.length;
+              }
+              return B + fe;
+            },
+            filterSelection: (ue) => ue.replace(/^ 1. /g, "").replace(/\n \d+. /g, `
+`)
+          });
+      } else
+        F(`
+ 1. `, `
+`, "List Item", { offsetStart: -10, offsetEnd: 9 });
+    }
+    function G() {
+      if (N()) {
+        let { sel: C, selPos: L, beforeSel: B, afterSel: fe, prevCRPos: I, beforeCR: V, afterCR: oe } = j();
+        C.indexOf(`
+`) === -1 ? F(`
+ - `, `
+`) : !C.startsWith(" - ") ? F("", "", " - ", {
+          selectionAtEnd: !0,
+          filterSelection: (ue) => " - " + ue.replace(/\n$/, "").replace(/\n/g, `
+ - `) + `
+`
+        }) : F("", "", "", {
+          filterValue: (ue, _) => {
+            if (I >= 0) {
+              let ie = oe.replace(/^ - /, "");
+              B = V + ie, _.pos -= oe.length - ie.length;
+            }
+            return B + fe;
+          },
+          filterSelection: (ue) => ue.replace(/^ - /g, "").replace(/\n - /g, `
+`)
+        });
+      } else
+        F(`
+ - `, `
+`, "List Item", { offsetStart: -10, offsetEnd: 9 });
+    }
+    function M() {
+      const C = ee(), L = C.indexOf(`
+`) === -1;
+      C ? L ? F(`
+## `, `
+`, "") : F("## ", "", "") : F(`
+## `, `
+`, "Heading", { offsetStart: -8, offsetEnd: 7 });
+    }
+    function le() {
+      let { sel: C, selPos: L, beforeSel: B, afterSel: fe, prevCRPos: I, beforeCR: V, afterCR: oe } = j();
+      !C.startsWith("//") && !oe.startsWith("//") ? C ? F("", "", "//", {
+        selectionAtEnd: !0,
+        filterSelection: (de) => "//" + de.replace(/\n$/, "").replace(/\n/g, `
+//`) + `
+`
+      }) : z({
+        value: V + "//" + oe + fe,
+        selectionStart: L + 2
+      }) : F("", "", "", {
+        filterValue: (de, ue) => {
+          if (I >= 0) {
+            let _ = oe.replace(/^\/\//, "");
+            B = V + _, ue.pos -= oe.length - _.length;
+          }
+          return B + fe;
+        },
+        filterSelection: (de) => de.replace(/^\/\//g, "").replace(/\n\/\//g, `
+`)
+      });
+    }
+    const x = () => F(`/*
+`, `*/
+`, "");
+    function K() {
+      if (i.length === 0)
+        return !1;
+      const C = g.value, L = i.pop();
+      return r.push({ value: C.value, selectionStart: C.selectionStart, selectionEnd: C.selectionEnd }), z(L), !0;
+    }
+    function E() {
+      if (r.length === 0)
+        return !1;
+      const C = g.value, L = r.pop();
+      return i.push({ value: C.value, selectionStart: C.selectionStart, selectionEnd: C.selectionEnd }), z(L), !0;
+    }
+    const q = () => null;
+    return tt(() => {
+      i = [], r = [];
+      const C = g.value;
+      C.onkeydown = (L) => {
+        if (L.key === "Escape" || L.keyCode === 27) {
+          l("close");
+          return;
+        }
+        const B = String.fromCharCode(L.keyCode).toLowerCase();
+        B === "	" ? (!L.shiftKey ? F("", "", "    ", {
+          selectionAtEnd: !0,
+          filterSelection: (I) => "    " + I.replace(/\n$/, "").replace(/\n/g, `
+    `) + `
+`
+        }) : F("", "", "", {
+          filterValue: (I, V) => {
+            let { selPos: oe, beforeSel: Le, afterSel: de, prevCRPos: ue, beforeCR: _, afterCR: ie } = j();
+            if (ue >= 0) {
+              let xe = ie.replace(/\t/g, "    ").replace(/^ ? ? ? ?/, "");
+              Le = _ + xe, V.pos -= ie.length - xe.length;
+            }
+            return Le + de;
+          },
+          filterSelection: (I) => I.replace(/\t/g, "    ").replace(/^ ? ? ? ?/g, "").replace(/\n    /g, `
+`)
+        }), L.preventDefault()) : L.ctrlKey ? B === "z" ? L.shiftKey ? E() && L.preventDefault() : K() && L.preventDefault() : B === "b" && !L.shiftKey ? (W(), L.preventDefault()) : B === "h" && !L.shiftKey ? (M(), L.preventDefault()) : B === "i" && !L.shiftKey ? (O(), L.preventDefault()) : B === "q" && !L.shiftKey ? (te(), L.preventDefault()) : B === "k" ? L.shiftKey ? (R(), L.preventDefault()) : (U(), L.preventDefault()) : B === "," || L.key === "<" || L.key === ">" || L.keyCode === 188 ? (J(L), L.preventDefault()) : B === "/" || L.key === "/" ? (le(), L.preventDefault()) : (B === "?" || L.key === "?") && L.shiftKey && (x(), L.preventDefault()) : L.altKey && (L.key === "1" || L.key === "0" ? (Y(), L.preventDefault()) : L.key === "-" ? (G(), L.preventDefault()) : L.key === "s" && (S(), L.preventDefault()));
+      };
+    }), (C, L) => {
+      var B;
+      return a(), u("div", null, [
+        Z(C.$slots, "header", Me({
+          inputElement: g.value,
+          id: e.id,
+          modelValue: e.modelValue,
+          status: e.status
+        }, C.$attrs)),
+        o(h) ? (a(), u("label", {
+          key: 0,
+          for: e.id,
+          class: w(`mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300 ${e.labelClass ?? ""}`)
+        }, T(o(h)), 11, mv)) : k("", !0),
+        e.disabled ? k("", !0) : (a(), u("div", vv, [
+          s("div", hv, [
+            b("bold") ? (a(), u("svg", {
+              key: 0,
+              class: w(v),
+              onClick: W,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, yv)) : k("", !0),
+            b("italics") ? (a(), u("svg", {
+              key: 1,
+              class: w(v),
+              onClick: O,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, xv)) : k("", !0),
+            b("link") ? (a(), u("svg", {
+              key: 2,
+              class: w(v),
+              onClick: U,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, Cv)) : k("", !0),
+            b("blockquote") ? (a(), u("svg", {
+              key: 3,
+              class: w(v),
+              onClick: te,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, Vv)) : k("", !0),
+            b("image") ? (a(), u("svg", {
+              key: 4,
+              class: w(v),
+              onClick: R,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, Av)) : k("", !0),
+            b("code") ? (a(), u("svg", {
+              key: 5,
+              class: w(v),
+              onClick: J,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, Iv)) : k("", !0),
+            b("heading") ? (a(), u("svg", {
+              key: 6,
+              class: w(v),
+              onClick: M,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, Ov)) : k("", !0),
+            b("orderedList") ? (a(), u("svg", {
+              key: 7,
+              class: w(v),
+              icon: "",
+              onClick: Y,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, Rv)) : k("", !0),
+            b("unorderedList") ? (a(), u("svg", {
+              key: 8,
+              class: w(v),
+              onClick: G,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, zv)) : k("", !0),
+            b("strikethrough") ? (a(), u("svg", {
+              key: 9,
+              class: w(v),
+              onClick: S,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, qv)) : k("", !0),
+            b("undo") ? (a(), u("svg", {
+              key: 10,
+              class: w(v),
+              onClick: K,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, Zv)) : k("", !0),
+            b("redo") ? (a(), u("svg", {
+              key: 11,
+              class: w(v),
+              onClick: E,
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24"
+            }, Jv)) : k("", !0),
+            Z(C.$slots, "toolbarbuttons", {
+              instance: (B = Be()) == null ? void 0 : B.exposed
+            })
+          ]),
+          b("help") && e.helpUrl ? (a(), u("div", Xv, [
+            s("a", {
+              title: "formatting help",
+              target: "_blank",
+              href: e.helpUrl,
+              tabindex: "-1"
+            }, [
+              (a(), u("svg", {
+                class: w(v),
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24"
+              }, th))
+            ], 8, Yv)
+          ])) : k("", !0)
+        ])),
+        s("div", lh, [
+          s("textarea", {
+            ref_key: "txt",
+            ref: g,
+            name: e.id,
+            id: e.id,
+            class: w(o(p)),
+            label: e.label,
+            value: e.modelValue,
+            rows: e.rows || 6,
+            disabled: e.disabled,
+            onInput: L[0] || (L[0] = (fe) => {
+              var I;
+              return P(((I = fe.target) == null ? void 0 : I.value) || "");
+            }),
+            onKeydown: Wn(q, ["tab"])
+          }, null, 42, nh)
+        ]),
+        o(c) ? (a(), u("p", {
+          key: 2,
+          class: "mt-2 text-sm text-red-500",
+          id: `${e.id}-error`
+        }, T(o(c)), 9, sh)) : e.help ? (a(), u("p", {
+          key: 3,
+          class: "mt-2 text-sm text-gray-500",
+          id: `${e.id}-description`
+        }, T(e.help), 9, oh)) : k("", !0),
+        Z(C.$slots, "footer", Me({
+          inputElement: g.value,
+          id: e.id,
+          modelValue: e.modelValue,
+          status: e.status
+        }, C.$attrs))
+      ]);
+    };
+  }
+}), ih = {
+  key: 0,
+  class: "relative z-10 lg:hidden",
+  role: "dialog",
+  "aria-modal": "true"
+}, rh = { class: "fixed inset-0 flex" }, uh = /* @__PURE__ */ s("span", { class: "sr-only" }, "Close sidebar", -1), dh = /* @__PURE__ */ s("svg", {
+  class: "h-6 w-6 text-white",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    d: "M6 18L18 6M6 6l12 12"
+  })
+], -1), ch = [
+  uh,
+  dh
+], fh = { class: "flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-2" }, mh = { class: "hidden lg:fixed lg:inset-y-0 lg:z-10 lg:flex lg:w-72 lg:flex-col" }, vh = { class: "flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6" }, hh = {
+  class: /* @__PURE__ */ w(["sticky top-0 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden"])
+}, gh = /* @__PURE__ */ s("span", { class: "sr-only" }, "Open sidebar", -1), ph = /* @__PURE__ */ s("svg", {
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+  })
+], -1), yh = [
+  gh,
+  ph
+], bh = /* @__PURE__ */ ce({
+  __name: "SidebarLayout",
+  setup(e, { expose: t }) {
+    const { transition: l } = is(), n = A(!0), i = A(""), r = {
+      entering: { cls: "transition-opacity ease-linear duration-300", from: "opacity-0", to: "opacity-100" },
+      leaving: { cls: "transition-opacity ease-linear duration-300", from: "opacity-100", to: "opacity-0" }
+    }, d = A(""), c = {
+      entering: { cls: "transition ease-in-out duration-300 transform", from: "-translate-x-full", to: "translate-x-0" },
+      leaving: { cls: "transition ease-in-out duration-300 transform", from: "translate-x-0", to: "-translate-x-full" }
+    }, h = A(""), m = {
+      entering: { cls: "ease-in-out duration-300", from: "opacity-0", to: "opacity-100" },
+      leaving: { cls: "ease-in-out duration-300", from: "opacity-100", to: "opacity-0" }
+    };
+    function y(v) {
+      l(r, i, v), l(c, d, v), l(m, h, v), setTimeout(() => n.value = v, 300);
+    }
+    function b() {
+      y(!0);
+    }
+    function p() {
+      y(!1);
+    }
+    return t({ show: b, hide: p, toggle: y }), (v, g) => (a(), u("div", null, [
+      n.value ? (a(), u("div", ih, [
+        s("div", {
+          class: w(["fixed inset-0 bg-gray-900/80", i.value])
+        }, null, 2),
+        s("div", rh, [
+          s("div", {
+            class: w(["relative mr-16 flex w-full max-w-xs flex-1", d.value])
+          }, [
+            s("div", {
+              class: w(["absolute left-full top-0 flex w-16 justify-center pt-5", h.value])
+            }, [
+              s("button", {
+                type: "button",
+                onClick: p,
+                class: "-m-2.5 p-2.5"
+              }, ch)
+            ], 2),
+            s("div", fh, [
+              Z(v.$slots, "default")
+            ])
+          ], 2)
+        ])
+      ])) : k("", !0),
+      s("div", mh, [
+        s("div", vh, [
+          Z(v.$slots, "default")
+        ])
+      ]),
+      s("div", hh, [
+        s("button", {
+          type: "button",
+          onClick: b,
+          class: "-m-2.5 p-2.5 text-gray-700 lg:hidden"
+        }, yh),
+        Z(v.$slots, "mobiletitlebar")
+      ])
+    ]));
+  }
+}), wh = {
+  Alert: Ho,
+  AlertSuccess: Yo,
+  ErrorSummary: sa,
+  InputDescription: aa,
+  Icon: zs,
+  Loading: Ya,
+  OutlineButton: li,
+  PrimaryButton: oi,
+  SecondaryButton: ri,
+  TextLink: di,
+  Breadcrumbs: gi,
+  Breadcrumb: xi,
+  NavList: Ci,
+  NavListItem: ji,
+  AutoQueryGrid: sd,
+  SettingsIcons: yd,
+  FilterViews: Sn,
+  FilterColumn: Vn,
+  QueryPrefs: Mn,
+  EnsureAccess: qs,
+  EnsureAccessDialog: bd,
+  TextInput: Md,
+  TextareaInput: Od,
+  SelectInput: zd,
+  CheckboxInput: Wd,
+  TagInput: bc,
+  FileInput: zc,
+  Autocomplete: s0,
+  Combobox: i0,
+  DynamicInput: r0,
+  LookupInput: C0,
+  AutoFormFields: _0,
+  AutoForm: Z0,
+  AutoCreateForm: yf,
+  AutoEditForm: Hf,
+  ConfirmDelete: Uf,
+  FormLoading: Wf,
+  DataGrid: t1,
+  CellFormat: l1,
+  PreviewFormat: r1,
+  HtmlFormat: m1,
+  CloseButton: y1,
+  SlideOver: F1,
+  ModalDialog: R1,
+  ModalLookup: Fm,
+  Tabs: Hm,
+  DarkModeToggle: Qm,
+  SignIn: fv,
+  MarkdownInput: ah,
+  SidebarLayout: bh
+}, El = wh, Vh = {
+  install(e) {
+    Object.keys(El).forEach((l) => {
+      e.component(l, El[l]);
+    });
+    function t(l) {
+      const i = Object.keys(l).filter((r) => l[r]).map((r) => `${encodeURIComponent(r)}=${encodeURIComponent(l[r])}`).join("&");
+      return i ? "?" + i : "./";
+    }
+    e.directive("href", function(l, n) {
+      l.href = t(n.value), l.onclick = (i) => {
+        i.preventDefault(), history.pushState(n.value, "", t(n.value));
+      };
+    });
+  },
+  component(e, t) {
+    return e ? t ? ne.components[e] = t : ne.components[e] || El[e] || null : null;
+  }
+};
+export {
+  Lh as css,
+  Vh as default,
+  Ln as useAuth,
+  Tl as useClient,
+  St as useConfig,
+  Ch as useFiles,
+  _h as useFormatters,
+  at as useMetadata,
+  is as useUtils
+};
diff --git a/MyApp/wwwroot/lib/mjs/vue.min.mjs b/MyApp/wwwroot/lib/mjs/vue.min.mjs
new file mode 100644
index 0000000..ffbe425
--- /dev/null
+++ b/MyApp/wwwroot/lib/mjs/vue.min.mjs
@@ -0,0 +1,11 @@
+/**
+* vue v3.4.15
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+function e(e,t){const n=new Set(e.split(","));return t?e=>n.has(e.toLowerCase()):e=>n.has(e)}const t={},n=[],s=()=>{},o=()=>!1,r=e=>111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),i=e=>e.startsWith("onUpdate:"),l=Object.assign,c=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},a=Object.prototype.hasOwnProperty,u=(e,t)=>a.call(e,t),d=Array.isArray,p=e=>"[object Map]"===S(e),h=e=>"[object Set]"===S(e),f=e=>"[object Date]"===S(e),m=e=>"function"==typeof e,g=e=>"string"==typeof e,v=e=>"symbol"==typeof e,y=e=>null!==e&&"object"==typeof e,b=e=>(y(e)||m(e))&&m(e.then)&&m(e.catch),_=Object.prototype.toString,S=e=>_.call(e),x=e=>S(e).slice(8,-1),C=e=>"[object Object]"===S(e),k=e=>g(e)&&"NaN"!==e&&"-"!==e[0]&&""+parseInt(e,10)===e,T=e(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),w=e("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,E=N((e=>e.replace(A,((e,t)=>t?t.toUpperCase():"")))),I=/\B([A-Z])/g,R=N((e=>e.replace(I,"-$1").toLowerCase())),O=N((e=>e.charAt(0).toUpperCase()+e.slice(1))),F=N((e=>e?`on${O(e)}`:"")),L=(e,t)=>!Object.is(e,t),M=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},P=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},$=e=>{const t=parseFloat(e);return isNaN(t)?e:t},B=e=>{const t=g(e)?Number(e):NaN;return isNaN(t)?e:t};let V;const D=()=>V||(V="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{}),U=e("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 j(e){if(d(e)){const t={};for(let n=0;n<e.length;n++){const s=e[n],o=g(s)?K(s):j(s);if(o)for(const e in o)t[e]=o[e]}return t}if(g(e)||y(e))return e}const H=/;(?![^(]*\))/g,q=/:([^]+)/,W=/\/\*[^]*?\*\//g;function K(e){const t={};return e.replace(W,"").split(H).forEach((e=>{if(e){const n=e.split(q);n.length>1&&(t[n[0].trim()]=n[1].trim())}})),t}function z(e){let t="";if(g(e))t=e;else if(d(e))for(let n=0;n<e.length;n++){const s=z(e[n]);s&&(t+=s+" ")}else if(y(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}function G(e){if(!e)return null;let{class:t,style:n}=e;return t&&!g(t)&&(e.class=z(t)),n&&(e.style=j(n)),e}const J=e("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=e("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=e("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=e("area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr"),Y=e("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function ee(e){return!!e||""===e}function te(e,t){if(e===t)return!0;let n=f(e),s=f(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=d(e),s=d(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=y(e),s=y(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=>g(e)?e:null==e?"":d(e)||y(e)&&(e.toString===_||!m(e.toString))?JSON.stringify(e,oe,2):String(e),oe=(e,t)=>t&&t.__v_isRef?oe(e,t.value):p(t)?{[`Map(${t.size})`]:[...t.entries()].reduce(((e,[t,n],s)=>(e[re(t,s)+" =>"]=n,e)),{})}:h(t)?{[`Set(${t.size})`]:[...t.values()].map((e=>re(e)))}:v(t)?re(t):!y(t)||d(t)||C(t)?t:String(t),re=(e,t="")=>{var n;return v(e)?`Symbol(${null!=(n=e.description)?n:t})`:e};let ie,le;class ce{constructor(e=!1){this.detached=e,this._active=!0,this.effects=[],this.cleanups=[],this.parent=ie,!e&&ie&&(this.index=(ie.scopes||(ie.scopes=[])).push(this)-1)}get active(){return this._active}run(e){if(this._active){const t=ie;try{return ie=this,e()}finally{ie=t}}}on(){ie=this}off(){ie=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 ae(e){return new ce(e)}function ue(e,t=ie){t&&t.active&&t.effects.push(e)}function de(){return ie}function pe(e){ie&&ie.cleanups.push(e)}class he{constructor(e,t,n,s){this.fn=e,this.trigger=t,this.scheduler=n,this.active=!0,this.deps=[],this._dirtyLevel=2,this._trackId=0,this._runnings=0,this._shouldSchedule=!1,this._depsLength=0,ue(this,s)}get dirty(){if(1===this._dirtyLevel){Ce();for(let e=0;e<this._depsLength;e++){const t=this.deps[e];if(t.computed&&(fe(t.computed),this._dirtyLevel>=2))break}this._dirtyLevel<2&&(this._dirtyLevel=0),ke()}return this._dirtyLevel>=2}set dirty(e){this._dirtyLevel=e?2:0}run(){if(this._dirtyLevel=0,!this.active)return this.fn();let e=_e,t=le;try{return _e=!0,le=this,this._runnings++,me(this),this.fn()}finally{ge(this),this._runnings--,le=t,_e=e}}stop(){var e;this.active&&(me(this),ge(this),null==(e=this.onStop)||e.call(this),this.active=!1)}}function fe(e){return e.value}function me(e){e._trackId++,e._depsLength=0}function ge(e){if(e.deps&&e.deps.length>e._depsLength){for(let t=e._depsLength;t<e.deps.length;t++)ve(e.deps[t],e);e.deps.length=e._depsLength}}function ve(e,t){const n=e.get(t);void 0!==n&&t._trackId!==n&&(e.delete(t),0===e.size&&e.cleanup())}function ye(e,t){e.effect instanceof he&&(e=e.effect.fn);const n=new he(e,s,(()=>{n.dirty&&n.run()}));t&&(l(n,t),t.scope&&ue(n,t.scope)),t&&t.lazy||n.run();const o=n.run.bind(n);return o.effect=n,o}function be(e){e.effect.stop()}let _e=!0,Se=0;const xe=[];function Ce(){xe.push(_e),_e=!1}function ke(){const e=xe.pop();_e=void 0===e||e}function Te(){Se++}function we(){for(Se--;!Se&&Ae.length;)Ae.shift()()}function Ne(e,t,n){if(t.get(e)!==e._trackId){t.set(e,e._trackId);const n=e.deps[e._depsLength];n!==t?(n&&ve(n,e),e.deps[e._depsLength++]=t):e._depsLength++}}const Ae=[];function Ee(e,t,n){Te();for(const s of e.keys())if(s._dirtyLevel<t&&e.get(s)===s._trackId){const e=s._dirtyLevel;s._dirtyLevel=t,0===e&&(s._shouldSchedule=!0,s.trigger())}Ie(e),we()}function Ie(e){for(const t of e.keys())t.scheduler&&t._shouldSchedule&&(!t._runnings||t.allowRecurse)&&e.get(t)===t._trackId&&(t._shouldSchedule=!1,Ae.push(t.scheduler))}const Re=(e,t)=>{const n=new Map;return n.cleanup=e,n.computed=t,n},Oe=new WeakMap,Fe=Symbol(""),Le=Symbol("");function Me(e,t,n){if(_e&&le){let t=Oe.get(e);t||Oe.set(e,t=new Map);let s=t.get(n);s||t.set(n,s=Re((()=>t.delete(n)))),Ne(le,s)}}function Pe(e,t,n,s,o,r){const i=Oe.get(e);if(!i)return;let l=[];if("clear"===t)l=[...i.values()];else if("length"===n&&d(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":d(e)?k(n)&&l.push(i.get("length")):(l.push(i.get(Fe)),p(e)&&l.push(i.get(Le)));break;case"delete":d(e)||(l.push(i.get(Fe)),p(e)&&l.push(i.get(Le)));break;case"set":p(e)&&l.push(i.get(Fe))}Te();for(const c of l)c&&Ee(c,2);we()}const $e=e("__proto__,__v_isRef,__isVue"),Be=new Set(Object.getOwnPropertyNames(Symbol).filter((e=>"arguments"!==e&&"caller"!==e)).map((e=>Symbol[e])).filter(v)),Ve=De();function De(){const e={};return["includes","indexOf","lastIndexOf"].forEach((t=>{e[t]=function(...e){const n=It(this);for(let t=0,o=this.length;t<o;t++)Me(n,0,t+"");const s=n[t](...e);return-1===s||!1===s?n[t](...e.map(It)):s}})),["push","pop","shift","unshift","splice"].forEach((t=>{e[t]=function(...e){Ce(),Te();const n=It(this)[t].apply(this,e);return we(),ke(),n}})),e}function Ue(e){const t=It(this);return Me(t,0,e),t.hasOwnProperty(e)}class je{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?_t:bt:o?yt:vt).get(e)||Object.getPrototypeOf(e)===Object.getPrototypeOf(n)?e:void 0;const r=d(e);if(!s){if(r&&u(Ve,t))return Reflect.get(Ve,t,n);if("hasOwnProperty"===t)return Ue}const i=Reflect.get(e,t,n);return(v(t)?Be.has(t):$e(t))?i:(s||Me(e,0,t),o?i:$t(i)?r&&k(t)?i:i.value:y(i)?s?Ct(i):St(i):i)}}class He extends je{constructor(e=!1){super(!1,e)}set(e,t,n,s){let o=e[t];if(!this._shallow){const t=Nt(o);if(At(n)||Nt(n)||(o=It(o),n=It(n)),!d(e)&&$t(o)&&!$t(n))return!t&&(o.value=n,!0)}const r=d(e)&&k(t)?Number(t)<e.length:u(e,t),i=Reflect.set(e,t,n,s);return e===It(s)&&(r?L(n,o)&&Pe(e,"set",t,n):Pe(e,"add",t,n)),i}deleteProperty(e,t){const n=u(e,t),s=Reflect.deleteProperty(e,t);return s&&n&&Pe(e,"delete",t,void 0),s}has(e,t){const n=Reflect.has(e,t);return v(t)&&Be.has(t)||Me(e,0,t),n}ownKeys(e){return Me(e,0,d(e)?"length":Fe),Reflect.ownKeys(e)}}class qe extends je{constructor(e=!1){super(!0,e)}set(e,t){return!0}deleteProperty(e,t){return!0}}const We=new He,Ke=new qe,ze=new He(!0),Ge=new qe(!0),Je=e=>e,Xe=e=>Reflect.getPrototypeOf(e);function Qe(e,t,n=!1,s=!1){const o=It(e=e.__v_raw),r=It(t);n||(L(t,r)&&Me(o,0,t),Me(o,0,r));const{has:i}=Xe(o),l=s?Je:n?Ft:Ot;return i.call(o,t)?l(e.get(t)):i.call(o,r)?l(e.get(r)):void(e!==o&&e.get(t))}function Ze(e,t=!1){const n=this.__v_raw,s=It(n),o=It(e);return t||(L(e,o)&&Me(s,0,e),Me(s,0,o)),e===o?n.has(e):n.has(e)||n.has(o)}function Ye(e,t=!1){return e=e.__v_raw,!t&&Me(It(e),0,Fe),Reflect.get(e,"size",e)}function et(e){e=It(e);const t=It(this);return Xe(t).has.call(t,e)||(t.add(e),Pe(t,"add",e,e)),this}function tt(e,t){t=It(t);const n=It(this),{has:s,get:o}=Xe(n);let r=s.call(n,e);r||(e=It(e),r=s.call(n,e));const i=o.call(n,e);return n.set(e,t),r?L(t,i)&&Pe(n,"set",e,t):Pe(n,"add",e,t),this}function nt(e){const t=It(this),{has:n,get:s}=Xe(t);let o=n.call(t,e);o||(e=It(e),o=n.call(t,e)),s&&s.call(t,e);const r=t.delete(e);return o&&Pe(t,"delete",e,void 0),r}function st(){const e=It(this),t=0!==e.size,n=e.clear();return t&&Pe(e,"clear",void 0,void 0),n}function ot(e,t){return function(n,s){const o=this,r=o.__v_raw,i=It(r),l=t?Je:e?Ft:Ot;return!e&&Me(i,0,Fe),r.forEach(((e,t)=>n.call(s,l(e),l(t),o)))}}function rt(e,t,n){return function(...s){const o=this.__v_raw,r=It(o),i=p(r),l="entries"===e||e===Symbol.iterator&&i,c="keys"===e&&i,a=o[e](...s),u=n?Je:t?Ft:Ot;return!t&&Me(r,0,c?Le:Fe),{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 it(e){return function(...t){return"delete"!==e&&("clear"===e?void 0:this)}}function lt(){const e={get(e){return Qe(this,e)},get size(){return Ye(this)},has:Ze,add:et,set:tt,delete:nt,clear:st,forEach:ot(!1,!1)},t={get(e){return Qe(this,e,!1,!0)},get size(){return Ye(this)},has:Ze,add:et,set:tt,delete:nt,clear:st,forEach:ot(!1,!0)},n={get(e){return Qe(this,e,!0)},get size(){return Ye(this,!0)},has(e){return Ze.call(this,e,!0)},add:it("add"),set:it("set"),delete:it("delete"),clear:it("clear"),forEach:ot(!0,!1)},s={get(e){return Qe(this,e,!0,!0)},get size(){return Ye(this,!0)},has(e){return Ze.call(this,e,!0)},add:it("add"),set:it("set"),delete:it("delete"),clear:it("clear"),forEach:ot(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((o=>{e[o]=rt(o,!1,!1),n[o]=rt(o,!0,!1),t[o]=rt(o,!1,!0),s[o]=rt(o,!0,!0)})),[e,n,t,s]}const[ct,at,ut,dt]=lt();function pt(e,t){const n=t?e?dt:ut:e?at:ct;return(t,s,o)=>"__v_isReactive"===s?!e:"__v_isReadonly"===s?e:"__v_raw"===s?t:Reflect.get(u(n,s)&&s in t?n:t,s,o)}const ht={get:pt(!1,!1)},ft={get:pt(!1,!0)},mt={get:pt(!0,!1)},gt={get:pt(!0,!0)},vt=new WeakMap,yt=new WeakMap,bt=new WeakMap,_t=new WeakMap;function St(e){return Nt(e)?e:Tt(e,!1,We,ht,vt)}function xt(e){return Tt(e,!1,ze,ft,yt)}function Ct(e){return Tt(e,!0,Ke,mt,bt)}function kt(e){return Tt(e,!0,Ge,gt,_t)}function Tt(e,t,n,s,o){if(!y(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}}(x(l));var l;if(0===i)return e;const c=new Proxy(e,2===i?s:n);return o.set(e,c),c}function wt(e){return Nt(e)?wt(e.__v_raw):!(!e||!e.__v_isReactive)}function Nt(e){return!(!e||!e.__v_isReadonly)}function At(e){return!(!e||!e.__v_isShallow)}function Et(e){return wt(e)||Nt(e)}function It(e){const t=e&&e.__v_raw;return t?It(t):e}function Rt(e){return P(e,"__v_skip",!0),e}const Ot=e=>y(e)?St(e):e,Ft=e=>y(e)?Ct(e):e;class Lt{constructor(e,t,n,s){this._setter=t,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this.effect=new he((()=>e(this._value)),(()=>Pt(this,1)),(()=>this.dep&&Ie(this.dep))),this.effect.computed=this,this.effect.active=this._cacheable=!s,this.__v_isReadonly=n}get value(){const e=It(this);return e._cacheable&&!e.effect.dirty||L(e._value,e._value=e.effect.run())&&Pt(e,2),Mt(e),e.effect._dirtyLevel>=1&&Pt(e,1),e._value}set value(e){this._setter(e)}get _dirty(){return this.effect.dirty}set _dirty(e){this.effect.dirty=e}}function Mt(e){_e&&le&&(e=It(e),Ne(le,e.dep||(e.dep=Re((()=>e.dep=void 0),e instanceof Lt?e:void 0))))}function Pt(e,t=2,n){const s=(e=It(e)).dep;s&&Ee(s,t)}function $t(e){return!(!e||!0!==e.__v_isRef)}function Bt(e){return Dt(e,!1)}function Vt(e){return Dt(e,!0)}function Dt(e,t){return $t(e)?e:new Ut(e,t)}class Ut{constructor(e,t){this.__v_isShallow=t,this.dep=void 0,this.__v_isRef=!0,this._rawValue=t?e:It(e),this._value=t?e:Ot(e)}get value(){return Mt(this),this._value}set value(e){const t=this.__v_isShallow||At(e)||Nt(e);e=t?e:It(e),L(e,this._rawValue)&&(this._rawValue=e,this._value=t?e:Ot(e),Pt(this,2))}}function jt(e){Pt(e,2)}function Ht(e){return $t(e)?e.value:e}function qt(e){return m(e)?e():Ht(e)}const Wt={get:(e,t,n)=>Ht(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const o=e[t];return $t(o)&&!$t(n)?(o.value=n,!0):Reflect.set(e,t,n,s)}};function Kt(e){return wt(e)?e:new Proxy(e,Wt)}class zt{constructor(e){this.dep=void 0,this.__v_isRef=!0;const{get:t,set:n}=e((()=>Mt(this)),(()=>Pt(this)));this._get=t,this._set=n}get value(){return this._get()}set value(e){this._set(e)}}function Gt(e){return new zt(e)}function Jt(e){const t=d(e)?new Array(e.length):{};for(const n in e)t[n]=Yt(e,n);return t}class Xt{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=It(this._object),t=this._key,null==(n=Oe.get(e))?void 0:n.get(t);var e,t,n}}class Qt{constructor(e){this._getter=e,this.__v_isRef=!0,this.__v_isReadonly=!0}get value(){return this._getter()}}function Zt(e,t,n){return $t(e)?e:m(e)?new Qt(e):y(e)&&arguments.length>1?Yt(e,t,n):Bt(e)}function Yt(e,t,n){const s=e[t];return $t(s)?s:new Xt(e,t,n)}const en={GET:"get",HAS:"has",ITERATE:"iterate"},tn={SET:"set",ADD:"add",DELETE:"delete",CLEAR:"clear"};function nn(e,t){}const sn={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"};function on(e,t,n,s){let o;try{o=s?e(...s):e()}catch(r){ln(r,t,n)}return o}function rn(e,t,n,s){if(m(e)){const o=on(e,t,n,s);return o&&b(o)&&o.catch((e=>{ln(e,t,n)})),o}const o=[];for(let r=0;r<e.length;r++)o.push(rn(e[r],t,n,s));return o}function ln(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 on(i,null,10,[e,o,r])}!function(e,t,n,s=!0){console.error(e)}(e,0,0,s)}let cn=!1,an=!1;const un=[];let dn=0;const pn=[];let hn=null,fn=0;const mn=Promise.resolve();let gn=null;function vn(e){const t=gn||mn;return e?t.then(this?e.bind(this):e):t}function yn(e){un.length&&un.includes(e,cn&&e.allowRecurse?dn+1:dn)||(null==e.id?un.push(e):un.splice(function(e){let t=dn+1,n=un.length;for(;t<n;){const s=t+n>>>1,o=un[s],r=Cn(o);r<e||r===e&&o.pre?t=s+1:n=s}return t}(e.id),0,e),bn())}function bn(){cn||an||(an=!0,gn=mn.then(Tn))}function _n(e){d(e)?pn.push(...e):hn&&hn.includes(e,e.allowRecurse?fn+1:fn)||pn.push(e),bn()}function Sn(e,t,n=(cn?dn+1:0)){for(;n<un.length;n++){const t=un[n];if(t&&t.pre){if(e&&t.id!==e.uid)continue;un.splice(n,1),n--,t()}}}function xn(e){if(pn.length){const e=[...new Set(pn)].sort(((e,t)=>Cn(e)-Cn(t)));if(pn.length=0,hn)return void hn.push(...e);for(hn=e,fn=0;fn<hn.length;fn++)hn[fn]();hn=null,fn=0}}const Cn=e=>null==e.id?1/0:e.id,kn=(e,t)=>{const n=Cn(e)-Cn(t);if(0===n){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function Tn(e){an=!1,cn=!0,un.sort(kn);try{for(dn=0;dn<un.length;dn++){const e=un[dn];e&&!1!==e.active&&on(e,null,14)}}finally{dn=0,un.length=0,xn(),cn=!1,gn=null,(un.length||pn.length)&&Tn()}}function wn(e,n,...s){if(e.isUnmounted)return;const o=e.vnode.props||t;let r=s;const i=n.startsWith("update:"),l=i&&n.slice(7);if(l&&l in o){const e=`${"modelValue"===l?"model":l}Modifiers`,{number:n,trim:i}=o[e]||t;i&&(r=s.map((e=>g(e)?e.trim():e))),n&&(r=s.map($))}let c,a=o[c=F(n)]||o[c=F(E(n))];!a&&i&&(a=o[c=F(R(n))]),a&&rn(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,rn(u,e,6,r)}}function Nn(e,t,n=!1){const s=t.emitsCache,o=s.get(e);if(void 0!==o)return o;const r=e.emits;let i={},c=!1;if(!m(e)){const s=e=>{const n=Nn(e,t,!0);n&&(c=!0,l(i,n))};!n&&t.mixins.length&&t.mixins.forEach(s),e.extends&&s(e.extends),e.mixins&&e.mixins.forEach(s)}return r||c?(d(r)?r.forEach((e=>i[e]=null)):l(i,r),y(e)&&s.set(e,i),i):(y(e)&&s.set(e,null),null)}function An(e,t){return!(!e||!r(t))&&(t=t.slice(2).replace(/Once$/,""),u(e,t[0].toLowerCase()+t.slice(1))||u(e,R(t))||u(e,t))}let En=null,In=null;function Rn(e){const t=En;return En=e,In=e&&e.type.__scopeId||null,t}function On(e){In=e}function Fn(){In=null}const Ln=e=>Mn;function Mn(e,t=En,n){if(!t)return e;if(e._n)return e;const s=(...n)=>{s._d&&Fr(-1);const o=Rn(t);let r;try{r=e(...n)}finally{Rn(o),s._d&&Fr(1)}return r};return s._n=!0,s._c=!0,s._d=!0,s}function Pn(e){const{type:t,vnode:n,proxy:s,withProxy:o,props:r,propsOptions:[l],slots:c,attrs:a,emit:u,render:d,renderCache:p,data:h,setupState:f,ctx:m,inheritAttrs:g}=e;let v,y;const b=Rn(e);try{if(4&n.shapeFlag){const e=o||s;v=Xr(d.call(e,e,p,r,f,h,m)),y=a}else{const e=t;0,v=Xr(e(r,e.length>1?{attrs:a,slots:c,emit:u}:null)),y=t.props?a:$n(a)}}catch(S){Ar.length=0,ln(S,e,1),v=qr(wr)}let _=v;if(y&&!1!==g){const e=Object.keys(y),{shapeFlag:t}=_;e.length&&7&t&&(l&&e.some(i)&&(y=Bn(y,l)),_=Kr(_,y))}return n.dirs&&(_=Kr(_),_.dirs=_.dirs?_.dirs.concat(n.dirs):n.dirs),n.transition&&(_.transition=n.transition),v=_,Rn(b),v}const $n=e=>{let t;for(const n in e)("class"===n||"style"===n||r(n))&&((t||(t={}))[n]=e[n]);return t},Bn=(e,t)=>{const n={};for(const s in e)i(s)&&s.slice(9)in t||(n[s]=e[s]);return n};function Vn(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]&&!An(n,r))return!0}return!1}function Dn({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 Un="components";function jn(e,t){return Kn(Un,e,!0,t)||e}const Hn=Symbol.for("v-ndc");function qn(e){return g(e)?Kn(Un,e,!1)||e:e||Hn}function Wn(e){return Kn("directives",e)}function Kn(e,t,n=!0,s=!1){const o=En||si;if(o){const n=o.type;if(e===Un){const e=bi(n,!1);if(e&&(e===t||e===E(t)||e===O(E(t))))return n}const r=zn(o[e]||n[e],t)||zn(o.appContext[e],t);return!r&&s?n:r}}function zn(e,t){return e&&(e[t]||e[E(t)]||e[O(E(t))])}const Gn=e=>e.__isSuspense;let Jn=0;const Xn={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=Zn(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?(Qn(e,"onPending"),Qn(e,"onFallback"),a(null,e.ssFallback,t,n,s,null,r,i),ts(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:v}=d;if(m)d.pendingBranch=p,Br(p,m)?(c(m,p,d.hiddenContainer,null,o,d,r,i,l),d.deps<=0?d.resolve():g&&(v||(c(f,h,n,s,o,null,r,i,l),ts(d,h)))):(d.pendingId=Jn++,v?(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),ts(d,h))):f&&Br(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&&Br(p,f))c(f,p,n,s,o,d,r,i,l),ts(d,p);else if(Qn(t,"onPending"),d.pendingBranch=p,d.pendingId=512&p.shapeFlag?p.component.suspenseId:Jn++,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=Zn(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:Zn,normalize:function(e){const{shapeFlag:t,children:n}=e,s=32&t;e.ssContent=Yn(s?n.default:n),e.ssFallback=s?Yn(n.fallback):qr(wr)}};function Qn(e,t){const n=e.props&&e.props[t];m(n)&&n()}function Zn(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 v;const y=function(e){var t;return null!=(null==(t=e.props)?void 0:t.suspensible)&&!1!==e.props.suspensible}(e);y&&(null==t?void 0:t.pendingBranch)&&(v=t.pendingId,t.deps++);const b=e.props?B(e.props.timeout):void 0,_=r,S={vnode:e,parent:t,parentComponent:n,namespace:i,container:s,hiddenContainer:o,deps:0,pendingId:Jn++,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),_n(c))}),o&&(m(o.el)!==S.hiddenContainer&&(r=f(o)),h(o,a,S,!0)),d||p(i,u,r,0)),ts(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||_n(c),S.effects=[],y&&t&&t.pendingBranch&&v===t.pendingId&&(t.deps--,0!==t.deps||n||t.resolve()),Qn(s,"onResolve")},fallback(e){if(!S.pendingBranch)return;const{vnode:t,activeBranch:n,parentComponent:s,container:o,namespace:r}=S;Qn(t,"onFallback");const i=f(n),a=()=>{S.isInFallback&&(d(null,e,o,i,s,null,r,l,c),ts(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=>{ln(t,e,0)})).then((o=>{if(e.isUnmounted||S.isUnmounted||S.pendingId!==e.suspenseId)return;e.asyncResolved=!0;const{vnode:r}=e;hi(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),Dn(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 Yn(e){let t;if(m(e)){const n=Or&&e._c;n&&(e._d=!1,Ir()),e=e(),n&&(e._d=!0,t=Er,Rr())}if(d(e)){const t=function(e,t=!0){let n;for(let s=0;s<e.length;s++){const t=e[s];if(!$r(t))return;if(t.type!==wr||"v-if"===t.children){if(n)return;n=t}}return n}(e);e=t}return e=Xr(e),t&&!e.dynamicChildren&&(e.dynamicChildren=t.filter((t=>t!==e))),e}function es(e,t){t&&t.pendingBranch?d(e)?t.effects.push(...e):t.effects.push(e):_n(e)}function ts(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,Dn(s,o))}const ns=Symbol.for("v-scx"),ss=()=>Uo(ns);function os(e,t){return as(e,null,t)}function rs(e,t){return as(e,null,{flush:"post"})}function is(e,t){return as(e,null,{flush:"sync"})}const ls={};function cs(e,t,n){return as(e,t,n)}function as(e,n,{immediate:o,deep:r,flush:i,once:l}=t){if(n&&l){const e=n;n=(...t)=>{e(...t),C()}}const a=si,u=e=>!0===r?e:ps(e,!1===r?1:void 0);let p,h,f=!1,g=!1;if($t(e)?(p=()=>e.value,f=At(e)):wt(e)?(p=()=>u(e),f=!0):d(e)?(g=!0,f=e.some((e=>wt(e)||At(e))),p=()=>e.map((e=>$t(e)?e.value:wt(e)?u(e):m(e)?on(e,a,2):void 0))):p=m(e)?n?()=>on(e,a,2):()=>(h&&h(),rn(e,a,3,[v])):s,n&&r){const e=p;p=()=>ps(e())}let v=e=>{h=S.onStop=()=>{on(e,a,4),h=S.onStop=void 0}},y=g?new Array(e.length).fill(ls):ls;const b=()=>{if(S.active&&S.dirty)if(n){const e=S.run();(r||f||(g?e.some(((e,t)=>L(e,y[t]))):L(e,y)))&&(h&&h(),rn(n,a,3,[e,y===ls?void 0:g&&y[0]===ls?[]:y,v]),y=e)}else S.run()};let _;b.allowRecurse=!!n,"sync"===i?_=b:"post"===i?_=()=>cr(b,a&&a.suspense):(b.pre=!0,a&&(b.id=a.uid),_=()=>yn(b));const S=new he(p,s,_),x=de(),C=()=>{S.stop(),x&&c(x.effects,S)};return n?o?b():y=S.run():"post"===i?cr(S.run.bind(S),a&&a.suspense):S.run(),C}function us(e,t,n){const s=this.proxy,o=g(e)?e.includes(".")?ds(s,e):()=>s[e]:e.bind(s,s);let r;m(t)?r=t:(r=t.handler,n=t);const i=li(this),l=as(o,r.bind(s),n);return i(),l}function ds(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 ps(e,t,n=0,s){if(!y(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),$t(e))ps(e.value,t,n,s);else if(d(e))for(let o=0;o<e.length;o++)ps(e[o],t,n,s);else if(h(e)||p(e))e.forEach((e=>{ps(e,t,n,s)}));else if(C(e))for(const o in e)ps(e[o],t,n,s);return e}function hs(e,n){if(null===En)return e;const s=yi(En)||En.proxy,o=e.dirs||(e.dirs=[]);for(let r=0;r<n.length;r++){let[e,i,l,c=t]=n[r];e&&(m(e)&&(e={mounted:e,updated:e}),e.deep&&ps(i),o.push({dir:e,instance:s,value:i,oldValue:void 0,arg:l,modifiers:c}))}return e}function fs(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&&(Ce(),rn(c,n,8,[e.el,l,e,t]),ke())}}const ms=Symbol("_leaveCb"),gs=Symbol("_enterCb");function vs(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return Hs((()=>{e.isMounted=!0})),Ks((()=>{e.isUnmounting=!0})),e}const ys=[Function,Array],bs={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:ys,onEnter:ys,onAfterEnter:ys,onEnterCancelled:ys,onBeforeLeave:ys,onLeave:ys,onAfterLeave:ys,onLeaveCancelled:ys,onBeforeAppear:ys,onAppear:ys,onAfterAppear:ys,onAppearCancelled:ys},_s={name:"BaseTransition",props:bs,setup(e,{slots:t}){const n=oi(),s=vs();let o;return()=>{const r=t.default&&ws(t.default(),!0);if(!r||!r.length)return;let i=r[0];if(r.length>1)for(const e of r)if(e.type!==wr){i=e;break}const l=It(e),{mode:c}=l;if(s.isLeaving)return Cs(i);const a=ks(i);if(!a)return Cs(i);const u=xs(a,l,s,n);Ts(a,u);const d=n.subTree,p=d&&ks(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!==wr&&(!Br(a,p)||h)){const e=xs(p,l,s,n);if(Ts(p,e),"out-in"===c)return s.isLeaving=!0,e.afterLeave=()=>{s.isLeaving=!1,!1!==n.update.active&&(n.effect.dirty=!0,n.update())},Cs(i);"in-out"===c&&a.type!==wr&&(e.delayLeave=(e,t,n)=>{Ss(s,p)[String(p.key)]=p,e[ms]=()=>{t(),e[ms]=void 0,delete u.delayedLeave},u.delayedLeave=n})}return i}}};function Ss(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 xs(e,t,n,s){const{appear:o,mode:r,persisted:i=!1,onBeforeEnter:l,onEnter:c,onAfterEnter:a,onEnterCancelled:u,onBeforeLeave:p,onLeave:h,onAfterLeave:f,onLeaveCancelled:m,onBeforeAppear:g,onAppear:v,onAfterAppear:y,onAppearCancelled:b}=t,_=String(e.key),S=Ss(n,e),x=(e,t)=>{e&&rn(e,s,9,t)},C=(e,t)=>{const n=t[1];x(e,t),d(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[ms]&&t[ms](!0);const r=S[_];r&&Br(e,r)&&r.el[ms]&&r.el[ms](),x(s,[t])},enter(e){let t=c,s=a,r=u;if(!n.isMounted){if(!o)return;t=v||c,s=y||a,r=b||u}let i=!1;const l=e[gs]=t=>{i||(i=!0,x(t?r:s,[e]),k.delayedLeave&&k.delayedLeave(),e[gs]=void 0)};t?C(t,[e,l]):l()},leave(t,s){const o=String(e.key);if(t[gs]&&t[gs](!0),n.isUnmounting)return s();x(p,[t]);let r=!1;const i=t[ms]=n=>{r||(r=!0,s(),x(n?m:f,[t]),t[ms]=void 0,S[o]===e&&delete S[o])};S[o]=e,h?C(h,[t,i]):i()},clone:e=>xs(e,t,n,s)};return k}function Cs(e){if(Rs(e))return(e=Kr(e)).children=null,e}function ks(e){return Rs(e)?e.children?e.children[0]:void 0:e}function Ts(e,t){6&e.shapeFlag&&e.component?Ts(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 ws(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===kr?(128&i.patchFlag&&o++,s=s.concat(ws(i.children,t,l))):(t||i.type!==wr)&&s.push(null!=l?Kr(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 m(e)?(()=>l({name:e.name},t,{setup:e}))():e}const As=e=>!!e.type.__asyncLoader
+/*! #__NO_SIDE_EFFECTS__ */;function Es(e){m(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=si;if(c)return()=>Is(c,e);const t=t=>{a=null,ln(t,e,13,!s)};if(i&&e.suspense)return d().then((t=>()=>Is(t,e))).catch((e=>(t(e),()=>s?qr(s,{error:e}):null)));const l=Bt(!1),u=Bt(),p=Bt(!!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,yn(e.parent.update))})).catch((e=>{t(e),u.value=e})),()=>l.value&&c?Is(c,e):u.value&&s?qr(s,{error:u.value}):n&&!p.value?qr(n):void 0}})}function Is(e,t){const{ref:n,props:s,children:o,ce:r}=t.vnode,i=qr(e,s,o);return i.ref=n,i.ce=r,delete t.vnode.ce,i}const Rs=e=>e.type.__isKeepAlive,Os={name:"KeepAlive",__isKeepAlive:!0,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(e,{slots:t}){const n=oi(),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){Bs(e),u(e,n,l,!0)}function f(e){o.forEach(((t,n)=>{const s=bi(t.type);!s||e&&e(s)||m(n)}))}function m(e){const t=o.get(e);i&&Br(t,i)?i&&Bs(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),cr((()=>{r.isDeactivated=!1,r.a&&M(r.a);const t=e.props&&e.props.onVnodeMounted;t&&ei(t,r.parent,e)}),l)},s.deactivate=e=>{const t=e.component;a(e,p,null,1,l),cr((()=>{t.da&&M(t.da);const n=e.props&&e.props.onVnodeUnmounted;n&&ei(n,t.parent,e),t.isDeactivated=!0}),l)},cs((()=>[e.include,e.exclude]),(([e,t])=>{e&&f((t=>Fs(e,t))),t&&f((e=>!Fs(t,e)))}),{flush:"post",deep:!0});let g=null;const v=()=>{null!=g&&o.set(g,Vs(n.subTree))};return Hs(v),Ws(v),Ks((()=>{o.forEach((e=>{const{subTree:t,suspense:s}=n,o=Vs(t);if(e.type!==o.type||e.key!==o.key)h(e);else{Bs(o);const e=o.component.da;e&&cr(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(!($r(s)&&(4&s.shapeFlag||128&s.shapeFlag)))return i=null,s;let l=Vs(s);const c=l.type,a=bi(As(l)?l.type.__asyncResolved||{}:c),{include:u,exclude:d,max:p}=e;if(u&&(!a||!Fs(u,a))||d&&a&&Fs(d,a))return i=l,s;const h=null==l.key?c:l.key,f=o.get(h);return l.el&&(l=Kr(l),128&s.shapeFlag&&(s.ssContent=l)),g=h,f?(l.el=f.el,l.component=f.component,l.transition&&Ts(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,Gn(s.type)?s:l}}};function Fs(e,t){return d(e)?e.some((e=>Fs(e,t))):g(e)?e.split(",").includes(t):"[object RegExp]"===S(e)&&e.test(t)}function Ls(e,t){Ps(e,"a",t)}function Ms(e,t){Ps(e,"da",t)}function Ps(e,t,n=si){const s=e.__wdc||(e.__wdc=()=>{let t=n;for(;t;){if(t.isDeactivated)return;t=t.parent}return e()});if(Ds(t,s,n),n){let e=n.parent;for(;e&&e.parent;)Rs(e.parent.vnode)&&$s(s,t,n,e),e=e.parent}}function $s(e,t,n,s){const o=Ds(t,e,s,!0);zs((()=>{c(s[t],o)}),n)}function Bs(e){e.shapeFlag&=-257,e.shapeFlag&=-513}function Vs(e){return 128&e.shapeFlag?e.ssContent:e}function Ds(e,t,n=si,s=!1){if(n){const o=n[e]||(n[e]=[]),r=t.__weh||(t.__weh=(...s)=>{if(n.isUnmounted)return;Ce();const o=li(n),r=rn(t,n,e,s);return o(),ke(),r});return s?o.unshift(r):o.push(r),r}}const Us=e=>(t,n=si)=>(!pi||"sp"===e)&&Ds(e,((...e)=>t(...e)),n),js=Us("bm"),Hs=Us("m"),qs=Us("bu"),Ws=Us("u"),Ks=Us("bum"),zs=Us("um"),Gs=Us("sp"),Js=Us("rtg"),Xs=Us("rtc");function Qs(e,t=si){Ds("ec",e,t)}function Zs(e,t,n,s){let o;const r=n&&n[s];if(d(e)||g(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(y(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}function Ys(e,t){for(let n=0;n<t.length;n++){const s=t[n];if(d(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}function eo(e,t,n={},s,o){if(En.isCE||En.parent&&As(En.parent)&&En.parent.isCE)return"default"!==t&&(n.name=t),qr("slot",n,s&&s());let r=e[t];r&&r._c&&(r._d=!1),Ir();const i=r&&to(r(n)),l=Pr(kr,{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}function to(e){return e.some((e=>!$r(e)||e.type!==wr&&!(e.type===kr&&!to(e.children))))?e:null}function no(e,t){const n={};for(const s in e)n[t&&/[A-Z]/.test(s)?`on:${s}`:F(s)]=e[s];return n}const so=e=>e?ai(e)?yi(e)||e.proxy:so(e.parent):null,oo=l(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=>so(e.parent),$root:e=>so(e.root),$emit:e=>e.emit,$options:e=>Ao(e),$forceUpdate:e=>e.f||(e.f=()=>{e.effect.dirty=!0,yn(e.update)}),$nextTick:e=>e.n||(e.n=vn.bind(e.proxy)),$watch:e=>us.bind(e)}),ro=(e,n)=>e!==t&&!e.__isScriptSetup&&u(e,n),io={get({_:e},n){const{ctx:s,setupState:o,data:r,props:i,accessCache:l,type:c,appContext:a}=e;let d;if("$"!==n[0]){const c=l[n];if(void 0!==c)switch(c){case 1:return o[n];case 2:return r[n];case 4:return s[n];case 3:return i[n]}else{if(ro(o,n))return l[n]=1,o[n];if(r!==t&&u(r,n))return l[n]=2,r[n];if((d=e.propsOptions[0])&&u(d,n))return l[n]=3,i[n];if(s!==t&&u(s,n))return l[n]=4,s[n];ko&&(l[n]=0)}}const p=oo[n];let h,f;return p?("$attrs"===n&&Me(e,0,n),p(e)):(h=c.__cssModules)&&(h=h[n])?h:s!==t&&u(s,n)?(l[n]=4,s[n]):(f=a.config.globalProperties,u(f,n)?f[n]:void 0)},set({_:e},n,s){const{data:o,setupState:r,ctx:i}=e;return ro(r,n)?(r[n]=s,!0):o!==t&&u(o,n)?(o[n]=s,!0):!u(e.props,n)&&(("$"!==n[0]||!(n.slice(1)in e))&&(i[n]=s,!0))},has({_:{data:e,setupState:n,accessCache:s,ctx:o,appContext:r,propsOptions:i}},l){let c;return!!s[l]||e!==t&&u(e,l)||ro(n,l)||(c=i[0])&&u(c,l)||u(o,l)||u(oo,l)||u(r.config.globalProperties,l)},defineProperty(e,t,n){return null!=n.get?e._.accessCache[t]=0:u(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}},lo=l({},io,{get(e,t){if(t!==Symbol.unscopables)return io.get(e,t,e)},has:(e,t)=>"_"!==t[0]&&!U(t)});function co(){return null}function ao(){return null}function uo(e){}function po(e){}function ho(){return null}function fo(){}function mo(e,t){return null}function go(){return yo().slots}function vo(){return yo().attrs}function yo(){const e=oi();return e.setupContext||(e.setupContext=vi(e))}function bo(e){return d(e)?e.reduce(((e,t)=>(e[t]=null,e)),{}):e}function _o(e,t){const n=bo(e);for(const s in t){if(s.startsWith("__skip"))continue;let e=n[s];e?d(e)||m(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}function So(e,t){return e&&t?d(e)&&d(t)?e.concat(t):l({},bo(e),bo(t)):e||t}function xo(e,t){const n={};for(const s in e)t.includes(s)||Object.defineProperty(n,s,{enumerable:!0,get:()=>e[s]});return n}function Co(e){const t=oi();let n=e();return ci(),b(n)&&(n=n.catch((e=>{throw li(t),e}))),[n,()=>li(t)]}let ko=!0;function To(e){const t=Ao(e),n=e.proxy,o=e.ctx;ko=!1,t.beforeCreate&&wo(t.beforeCreate,e,"bc");const{data:r,computed:i,methods:l,watch:c,provide:a,inject:u,created:p,beforeMount:h,mounted:f,beforeUpdate:g,updated:v,activated:b,deactivated:_,beforeUnmount:S,unmounted:x,render:C,renderTracked:k,renderTriggered:T,errorCaptured:w,serverPrefetch:N,expose:A,inheritAttrs:E,components:I,directives:R}=t;if(u&&function(e,t,n=s){d(e)&&(e=Oo(e));for(const s in e){const n=e[s];let o;o=y(n)?"default"in n?Uo(n.from||s,n.default,!0):Uo(n.from||s):Uo(n),$t(o)?Object.defineProperty(t,s,{enumerable:!0,configurable:!0,get:()=>o.value,set:e=>o.value=e}):t[s]=o}}(u,o,null),l)for(const s in l){const e=l[s];m(e)&&(o[s]=e.bind(n))}if(r){const t=r.call(n,n);y(t)&&(e.data=St(t))}if(ko=!0,i)for(const d in i){const e=i[d],t=m(e)?e.bind(n,n):m(e.get)?e.get.bind(n,n):s,r=!m(e)&&m(e.set)?e.set.bind(n):s,l=_i({get:t,set:r});Object.defineProperty(o,d,{enumerable:!0,configurable:!0,get:()=>l.value,set:e=>l.value=e})}if(c)for(const s in c)No(c[s],o,n,s);if(a){const e=m(a)?a.call(n):a;Reflect.ownKeys(e).forEach((t=>{Do(t,e[t])}))}function O(e,t){d(t)?t.forEach((t=>e(t.bind(n)))):t&&e(t.bind(n))}if(p&&wo(p,e,"c"),O(js,h),O(Hs,f),O(qs,g),O(Ws,v),O(Ls,b),O(Ms,_),O(Qs,w),O(Xs,k),O(Js,T),O(Ks,S),O(zs,x),O(Gs,N),d(A))if(A.length){const t=e.exposed||(e.exposed={});A.forEach((e=>{Object.defineProperty(t,e,{get:()=>n[e],set:t=>n[e]=t})}))}else e.exposed||(e.exposed={});C&&e.render===s&&(e.render=C),null!=E&&(e.inheritAttrs=E),I&&(e.components=I),R&&(e.directives=R)}function wo(e,t,n){rn(d(e)?e.map((e=>e.bind(t.proxy))):e.bind(t.proxy),t,n)}function No(e,t,n,s){const o=s.includes(".")?ds(n,s):()=>n[s];if(g(e)){const n=t[e];m(n)&&cs(o,n)}else if(m(e))cs(o,e.bind(n));else if(y(e))if(d(e))e.forEach((e=>No(e,t,n,s)));else{const s=m(e.handler)?e.handler.bind(n):t[e.handler];m(s)&&cs(o,s,e)}}function Ao(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=>Eo(c,e,i,!0))),Eo(c,t,i)):c=t,y(t)&&r.set(t,c),c}function Eo(e,t,n,s=!1){const{mixins:o,extends:r}=t;r&&Eo(e,r,n,!0),o&&o.forEach((t=>Eo(e,t,n,!0)));for(const i in t)if(s&&"expose"===i);else{const s=Io[i]||n&&n[i];e[i]=s?s(e[i],t[i]):t[i]}return e}const Io={data:Ro,props:Mo,emits:Mo,methods:Lo,computed:Lo,beforeCreate:Fo,created:Fo,beforeMount:Fo,mounted:Fo,beforeUpdate:Fo,updated:Fo,beforeDestroy:Fo,beforeUnmount:Fo,destroyed:Fo,unmounted:Fo,activated:Fo,deactivated:Fo,errorCaptured:Fo,serverPrefetch:Fo,components:Lo,directives:Lo,watch:function(e,t){if(!e)return t;if(!t)return e;const n=l(Object.create(null),e);for(const s in t)n[s]=Fo(e[s],t[s]);return n},provide:Ro,inject:function(e,t){return Lo(Oo(e),Oo(t))}};function Ro(e,t){return t?e?function(){return l(m(e)?e.call(this,this):e,m(t)?t.call(this,this):t)}:t:e}function Oo(e){if(d(e)){const t={};for(let n=0;n<e.length;n++)t[e[n]]=e[n];return t}return e}function Fo(e,t){return e?[...new Set([].concat(e,t))]:t}function Lo(e,t){return e?l(Object.create(null),e,t):t}function Mo(e,t){return e?d(e)&&d(t)?[...new Set([...e,...t])]:l(Object.create(null),bo(e),bo(null!=t?t:{})):t}function Po(){return{app:null,config:{isNativeTag:o,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 $o=0;function Bo(e,t){return function(n,s=null){m(n)||(n=l({},n)),null==s||y(s)||(s=null);const o=Po(),r=new WeakSet;let i=!1;const c=o.app={_uid:$o++,_component:n,_props:s,_container:null,_context:o,_instance:null,version:wi,get config(){return o.config},set config(e){},use:(e,...t)=>(r.has(e)||(e&&m(e.install)?(r.add(e),e.install(c,...t)):m(e)&&(r.add(e),e(c,...t))),c),mixin:e=>(o.mixins.includes(e)||o.mixins.push(e),c),component:(e,t)=>t?(o.components[e]=t,c):o.components[e],directive:(e,t)=>t?(o.directives[e]=t,c):o.directives[e],mount(r,l,a){if(!i){const u=qr(n,s);return u.appContext=o,!0===a?a="svg":!1===a&&(a=void 0),l&&t?t(u,r):e(u,r,a),i=!0,c._container=r,r.__vue_app__=c,yi(u.component)||u.component.proxy}},unmount(){i&&(e(null,c._container),delete c._container.__vue_app__)},provide:(e,t)=>(o.provides[e]=t,c),runWithContext(e){Vo=c;try{return e()}finally{Vo=null}}};return c}}let Vo=null;function Do(e,t){if(si){let n=si.provides;const s=si.parent&&si.parent.provides;s===n&&(n=si.provides=Object.create(s)),n[e]=t}else;}function Uo(e,t,n=!1){const s=si||En;if(s||Vo){const o=s?null==s.parent?s.vnode.appContext&&s.vnode.appContext.provides:s.parent.provides:Vo._context.provides;if(o&&e in o)return o[e];if(arguments.length>1)return n&&m(t)?t.call(s&&s.proxy):t}}function jo(){return!!(si||En||Vo)}function Ho(e,n,s,o){const[r,i]=e.propsOptions;let l,c=!1;if(n)for(let t in n){if(T(t))continue;const a=n[t];let d;r&&u(r,d=E(t))?i&&i.includes(d)?(l||(l={}))[d]=a:s[d]=a:An(e.emitsOptions,t)||t in o&&a===o[t]||(o[t]=a,c=!0)}if(i){const n=It(s),o=l||t;for(let t=0;t<i.length;t++){const l=i[t];s[l]=qo(r,n,l,o[l],e,!u(o,l))}}return c}function qo(e,t,n,s,o,r){const i=e[n];if(null!=i){const e=u(i,"default");if(e&&void 0===s){const e=i.default;if(i.type!==Function&&!i.skipFactory&&m(e)){const{propsDefaults:r}=o;if(n in r)s=r[n];else{const i=li(o);s=r[n]=e.call(null,t),i()}}else s=e}i[0]&&(r&&!e?s=!1:!i[1]||""!==s&&s!==R(n)||(s=!0))}return s}function Wo(e,s,o=!1){const r=s.propsCache,i=r.get(e);if(i)return i;const c=e.props,a={},p=[];let h=!1;if(!m(e)){const t=e=>{h=!0;const[t,n]=Wo(e,s,!0);l(a,t),n&&p.push(...n)};!o&&s.mixins.length&&s.mixins.forEach(t),e.extends&&t(e.extends),e.mixins&&e.mixins.forEach(t)}if(!c&&!h)return y(e)&&r.set(e,n),n;if(d(c))for(let n=0;n<c.length;n++){const e=E(c[n]);Ko(e)&&(a[e]=t)}else if(c)for(const t in c){const e=E(t);if(Ko(e)){const n=c[t],s=a[e]=d(n)||m(n)?{type:n}:l({},n);if(s){const t=Jo(Boolean,s.type),n=Jo(String,s.type);s[0]=t>-1,s[1]=n<0||t<n,(t>-1||u(s,"default"))&&p.push(e)}}}const f=[a,p];return y(e)&&r.set(e,f),f}function Ko(e){return"$"!==e[0]}function zo(e){const t=e&&e.toString().match(/^\s*(function|class) (\w+)/);return t?t[2]:null===e?"null":""}function Go(e,t){return zo(e)===zo(t)}function Jo(e,t){return d(t)?t.findIndex((t=>Go(t,e))):m(t)&&Go(t,e)?0:-1}const Xo=e=>"_"===e[0]||"$stable"===e,Qo=e=>d(e)?e.map(Xr):[Xr(e)],Zo=(e,t,n)=>{if(t._n)return t;const s=Mn(((...e)=>Qo(t(...e))),n);return s._c=!1,s},Yo=(e,t,n)=>{const s=e._ctx;for(const o in e){if(Xo(o))continue;const n=e[o];if(m(n))t[o]=Zo(0,n,s);else if(null!=n){const e=Qo(n);t[o]=()=>e}}},er=(e,t)=>{const n=Qo(t);e.slots.default=()=>n},tr=(e,t)=>{if(32&e.vnode.shapeFlag){const n=t._;n?(e.slots=It(t),P(t,"_",n)):Yo(t,e.slots={})}else e.slots={},t&&er(e,t);P(e.slots,Dr,1)},nr=(e,n,s)=>{const{vnode:o,slots:r}=e;let i=!0,c=t;if(32&o.shapeFlag){const e=n._;e?s&&1===e?i=!1:(l(r,n),s||1!==e||delete r._):(i=!n.$stable,Yo(n,r)),c=n}else n&&(er(e,n),c={default:1});if(i)for(const t in r)Xo(t)||null!=c[t]||delete r[t]};function sr(e,n,s,o,r=!1){if(d(e))return void e.forEach(((e,t)=>sr(e,n&&(d(n)?n[t]:n),s,o,r)));if(As(o)&&!r)return;const i=4&o.shapeFlag?yi(o.component)||o.component.proxy:o.el,l=r?null:i,{i:a,r:p}=e,h=n&&n.r,f=a.refs===t?a.refs={}:a.refs,v=a.setupState;if(null!=h&&h!==p&&(g(h)?(f[h]=null,u(v,h)&&(v[h]=null)):$t(h)&&(h.value=null)),m(p))on(p,a,12,[l,f]);else{const t=g(p),n=$t(p),o=e.f;if(t||n){const a=()=>{if(o){const n=t?u(v,p)?v[p]:f[p]:p.value;r?d(n)&&c(n,i):d(n)?n.includes(i)||n.push(i):t?(f[p]=[i],u(v,p)&&(v[p]=f[p])):(p.value=[i],e.k&&(f[e.k]=p.value))}else t?(f[p]=l,u(v,p)&&(v[p]=l)):n&&(p.value=l,e.k&&(f[e.k]=l))};r||o?a():(a.id=-1,cr(a,s))}}}let or=!1;const rr=e=>(e=>e.namespaceURI.includes("svg")&&"foreignObject"!==e.tagName)(e)?"svg":(e=>e.namespaceURI.includes("MathML"))(e)?"mathml":void 0,ir=e=>8===e.nodeType;function lr(e){const{mt:t,p:n,o:{patchProp:s,createText:o,nextSibling:i,parentNode:l,remove:c,insert:a,createComment:u}}=e,d=(n,s,r,c,u,b=!1)=>{const _=ir(n)&&"["===n.data,S=()=>m(n,s,r,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 N=null;switch(x){case Tr:3!==w?""===s.children?(a(s.el=o(""),l(n),n),N=n):N=S():(n.data!==s.children&&(or=!0,n.data=s.children),N=i(n));break;case wr:y(n)?(N=i(n),v(s.el=n.content.firstChild,n,r)):N=8!==w||_?S():i(n);break;case Nr:if(_&&(w=(n=i(n)).nodeType),1===w||3===w){N=n;const e=!s.children.length;for(let t=0;t<s.staticCount;t++)e&&(s.children+=1===N.nodeType?N.outerHTML:N.data),t===s.staticCount-1&&(s.anchor=N),N=i(N);return _?i(N):N}S();break;case kr:N=_?f(n,s,r,c,u,b):S();break;default:if(1&k)N=1===w&&s.type.toLowerCase()===n.tagName.toLowerCase()||y(n)?p(n,s,r,c,u,b):S();else if(6&k){s.slotScopeIds=u;const e=l(n);if(N=_?g(n):ir(n)&&"teleport start"===n.data?g(n,n.data,"teleport end"):i(n),t(s,e,null,r,c,rr(e),b),As(s)){let t;_?(t=qr(kr),t.anchor=N?N.previousSibling:e.lastChild):t=3===n.nodeType?zr(""):qr("div"),t.el=n,s.component.subTree=t}}else 64&k?N=8!==w?S():s.type.hydrate(n,s,r,c,u,b,e,h):128&k&&(N=s.type.hydrate(n,s,r,c,rr(l(n)),u,b,e,d))}return null!=C&&sr(C,null,c,s),N},p=(e,t,n,o,i,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&&fs(t,null,n,"created");let a,b=!1;if(y(e)){b=fr(o,m)&&n&&n.vnode.props&&n.vnode.props.appear;const s=e.content.firstChild;b&&m.beforeEnter(s),v(s,e,n),t.el=e=s}if(16&p&&(!u||!u.innerHTML&&!u.textContent)){let s=h(e.firstChild,t,e,n,o,i,l);for(;s;){or=!0;const e=s;s=s.nextSibling,c(e)}}else 8&p&&e.textContent!==t.children&&(or=!0,e.textContent=t.children);if(u)if(g||!l||48&d)for(const t in u)(g&&(t.endsWith("value")||"indeterminate"===t)||r(t)&&!T(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)&&ei(a,n,t),f&&fs(t,null,n,"beforeMount"),((a=u&&u.onVnodeMounted)||f||b)&&es((()=>{a&&ei(a,n,t),b&&m.enter(e),f&&fs(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]=Xr(c[u]);if(e)e=d(e,t,o,r,i,l);else{if(t.type===Tr&&!t.children)continue;or=!0,n(null,t,s,null,o,r,rr(s),i)}}return e},f=(e,t,n,s,o,r)=>{const{slotScopeIds:c}=t;c&&(o=o?o.concat(c):c);const d=l(e),p=h(i(e),t,d,n,s,o,r);return p&&ir(p)&&"]"===p.data?i(t.anchor=p):(or=!0,a(t.anchor=u("]"),d,p),p)},m=(e,t,s,o,r,a)=>{if(or=!0,t.el=null,a){const t=g(e);for(;;){const n=i(e);if(!n||n===t)break;c(n)}}const u=i(e),d=l(e);return c(e),n(null,t,d,u,s,o,rr(d),r),u},g=(e,t="[",n="]")=>{let s=0;for(;e;)if((e=i(e))&&ir(e)&&(e.data===t&&s++,e.data===n)){if(0===s)return i(e);s--}return e},v=(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},y=e=>1===e.nodeType&&"template"===e.tagName.toLowerCase();return[(e,t)=>{if(!t.hasChildNodes())return n(null,e,t),xn(),void(t._vnode=e);or=!1,d(t.firstChild,e,null,null,null),xn(),t._vnode=e,or&&console.error("Hydration completed but contains mismatches.")},d]}const cr=es;function ar(e){return dr(e)}function ur(e){return dr(e,lr)}function dr(e,o){D().__VUE__=!0;const{insert:r,remove:i,patchProp:l,createElement:c,createText:a,createComment:d,setText:p,setElementText:h,parentNode:f,nextSibling:m,setScopeId:g=s,insertStaticContent:v}=e,y=(e,t,n,s=null,o=null,r=null,i=void 0,l=null,c=!!t.dynamicChildren)=>{if(e===t)return;e&&!Br(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 Tr:_(e,t,n,s);break;case wr:S(e,t,n,s);break;case Nr:null==e&&x(t,n,s,i);break;case kr:F(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?L(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&&sr(u,e&&e.ref,r,t||e,!t)},_=(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=d(t.children||""),n,s):t.el=e.el},x=(e,t,n,s)=>{[e.el,e.anchor]=v(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):A(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:v}=e;if(d=e.el=c(e.type,i,f&&f.is,f),8&m?h(d,e.children):16&m&&N(e.children,d,null,s,o,pr(e,i),a,u),v&&fs(e,null,s,"created"),w(d,e,e.scopeId,a,s),f){for(const t in f)"value"===t||T(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)&&ei(p,s,e)}v&&fs(e,null,s,"beforeMount");const y=fr(o,g);y&&g.beforeEnter(d),r(d,t,n),((p=f&&f.onVnodeMounted)||y||v)&&cr((()=>{p&&ei(p,s,e),y&&g.enter(d),v&&fs(e,null,s,"mounted")}),o)},w=(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;w(e,t,t.scopeId,t.slotScopeIds,o.parent)}}},N=(e,t,n,s,o,r,i,l,c=0)=>{for(let a=c;a<e.length;a++){const c=e[a]=l?Qr(e[a]):Xr(e[a]);y(null,c,t,n,s,o,r,i,l)}},A=(e,n,s,o,r,i,c)=>{const a=n.el=e.el;let{patchFlag:u,dynamicChildren:d,dirs:p}=n;u|=16&e.patchFlag;const f=e.props||t,m=n.props||t;let g;if(s&&hr(s,!1),(g=m.onVnodeBeforeUpdate)&&ei(g,s,n,e),p&&fs(n,e,s,"beforeUpdate"),s&&hr(s,!0),d?I(e.dynamicChildren,d,a,s,o,pr(n,r),i):c||j(e,n,a,null,s,o,pr(n,r),i,!1),u>0){if(16&u)O(a,n,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 t=n.dynamicProps;for(let n=0;n<t.length;n++){const i=t[n],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!==n.children&&h(a,n.children)}else c||null!=d||O(a,n,f,m,s,o,r);((g=m.onVnodeUpdated)||p)&&cr((()=>{g&&ei(g,s,n,e),p&&fs(n,e,s,"updated")}),o)},I=(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===kr||!Br(c,a)||70&c.shapeFlag)?f(c.el):n;y(c,a,u,null,s,o,r,i,!0)}},O=(e,n,s,o,r,i,c)=>{if(s!==o){if(s!==t)for(const t in s)T(t)||t in o||l(e,t,s[t],null,c,n.children,r,i,X);for(const t in o){if(T(t))continue;const a=o[t],u=s[t];a!==u&&"value"!==t&&l(e,t,u,a,c,n.children,r,i,X)}"value"in o&&l(e,"value",s.value,o.value,c)}},F=(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),N(t.children||[],n,p,o,i,l,c,u)):h>0&&64&h&&f&&e.dynamicChildren?(I(e.dynamicChildren,f,n,o,i,l,c),(null!=t.key||o&&t===o.subTree)&&mr(e,t,!0)):j(e,t,n,p,o,i,l,c,u)},L=(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):$(t,n,s,o,r,i,c):B(e,t,c)},$=(e,n,s,o,r,i,l)=>{const c=e.component=function(e,n,s){const o=e.type,r=(n?n.appContext:e.appContext)||ti,i={uid:ni++,vnode:e,type:o,parent:n,appContext:r,root:null,next:null,subTree:null,effect:null,update:null,scope:new ce(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:n?n.provides:Object.create(r.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Wo(o,r),emitsOptions:Nn(o,r),emit:null,emitted:null,propsDefaults:t,inheritAttrs:o.inheritAttrs,ctx:t,data:t,props:t,attrs:t,slots:t,refs:t,setupState:t,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=n?n.root:i,i.emit=wn.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&&ii(t);const{props:n,children:s}=e.vnode,o=ai(e);(function(e,t,n,s=!1){const o={},r={};P(r,Dr,1),e.propsDefaults=Object.create(null),Ho(e,t,o,r);for(const i in e.propsOptions[0])i in o||(o[i]=void 0);e.props=n?s?o:xt(o):e.type.props?o:r,e.attrs=r})(e,n,o,t),tr(e,s);const r=o?function(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=Rt(new Proxy(e.ctx,io));const{setup:s}=n;if(s){const n=e.setupContext=s.length>1?vi(e):null,o=li(e);Ce();const r=on(s,e,0,[e.props,n]);if(ke(),o(),b(r)){if(r.then(ci,ci),t)return r.then((n=>{hi(e,n,t)})).catch((t=>{ln(t,e,0)}));e.asyncDep=r}else hi(e,r,t)}else gi(e,t)}(e,t):void 0;t&&ii(!1)}(c),c.asyncDep){if(r&&r.registerDep(c,V),!e.el){const e=c.subTree=qr(wr);S(null,e,n,s)}}else V(c,e,n,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||Vn(s,i,a):!!i);if(1024&c)return!0;if(16&c)return s?Vn(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]&&!An(a,n))return!0}}return!1}(e,t,n)){if(s.asyncDep&&!s.asyncResolved)return void U(s,t,n);s.next=t,function(e){const t=un.indexOf(e);t>dn&&un.splice(t,1)}(s.update),s.effect.dirty=!0,s.update()}else t.el=e.el,s.vnode=t},V=(e,t,n,o,r,i,l)=>{const c=()=>{if(e.isMounted){let{next:t,bu:n,u:s,parent:o,vnode:a}=e;{const n=gr(e);if(n)return t&&(t.el=a.el,U(e,t,l)),void n.asyncDep.then((()=>{e.isUnmounted||c()}))}let u,d=t;hr(e,!1),t?(t.el=a.el,U(e,t,l)):t=a,n&&M(n),(u=t.props&&t.props.onVnodeBeforeUpdate)&&ei(u,o,t,a),hr(e,!0);const p=Pn(e),h=e.subTree;e.subTree=p,y(h,p,f(h.el),Q(h),e,r,i),t.el=p.el,null===d&&Dn(e,p.el),s&&cr(s,r),(u=t.props&&t.props.onVnodeUpdated)&&cr((()=>ei(u,o,t,a)),r)}else{let s;const{el:l,props:c}=t,{bm:a,m:u,parent:d}=e,p=As(t);if(hr(e,!1),a&&M(a),!p&&(s=c&&c.onVnodeBeforeMount)&&ei(s,d,t),hr(e,!0),l&&ne){const n=()=>{e.subTree=Pn(e),ne(l,e.subTree,e,r,null)};p?t.type.__asyncLoader().then((()=>!e.isUnmounted&&n())):n()}else{const s=e.subTree=Pn(e);y(null,s,n,o,e,r,i),t.el=s.el}if(u&&cr(u,r),!p&&(s=c&&c.onVnodeMounted)){const e=t;cr((()=>ei(s,d,e)),r)}(256&t.shapeFlag||d&&As(d.vnode)&&256&d.vnode.shapeFlag)&&e.a&&cr(e.a,r),e.isMounted=!0,t=n=o=null}},a=e.effect=new he(c,s,(()=>yn(u)),e.scope),u=e.update=()=>{a.dirty&&a.run()};u.id=e.uid,hr(e,!0),u()},U=(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=It(o),[c]=e.propsOptions;let a=!1;if(!(s||i>0)||16&i){let s;Ho(e,t,o,r)&&(a=!0);for(const r in l)t&&(u(t,r)||(s=R(r))!==r&&u(t,s))||(c?!n||void 0===n[r]&&void 0===n[s]||(o[r]=qo(c,l,r,void 0,e,!0)):delete o[r]);if(r!==l)for(const e in r)t&&u(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(An(e.emitsOptions,i))continue;const d=t[i];if(c)if(u(r,i))d!==r[i]&&(r[i]=d,a=!0);else{const t=E(i);o[t]=qo(c,l,t,d,e,!1)}else d!==r[i]&&(r[i]=d,a=!0)}}a&&Pe(e,"set","$attrs")}(e,t.props,s,n),nr(e,t.children,n),Ce(),Sn(e),ke()},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&&N(d,n,s,o,r,i,l,c))},H=(e,t,s,o,r,i,l,c,a)=>{const u=(e=e||n).length,d=(t=t||n).length,p=Math.min(u,d);let h;for(h=0;h<p;h++){const n=t[h]=a?Qr(t[h]):Xr(t[h]);y(e[h],n,s,null,r,i,l,c,a)}u>d?X(e,r,i,!0,!1,p):N(t,s,o,r,i,l,c,a,p)},q=(e,t,s,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 n=e[u],o=t[u]=a?Qr(t[u]):Xr(t[u]);if(!Br(n,o))break;y(n,o,s,null,r,i,l,c,a),u++}for(;u<=p&&u<=h;){const n=e[p],o=t[h]=a?Qr(t[h]):Xr(t[h]);if(!Br(n,o))break;y(n,o,s,null,r,i,l,c,a),p--,h--}if(u>p){if(u<=h){const e=h+1,n=e<d?t[e].el:o;for(;u<=h;)y(null,t[u]=a?Qr(t[u]):Xr(t[u]),s,n,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?Qr(t[u]):Xr(t[u]);null!=e.key&&g.set(e.key,u)}let v,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 n=e[u];if(b>=_){K(n,r,i,!0);continue}let o;if(null!=n.key)o=g.get(n.key);else for(v=m;v<=h;v++)if(0===C[v-m]&&Br(n,t[v])){o=v;break}void 0===o?K(n,r,i,!0):(C[o-m]=u+1,o>=x?x=o:S=!0,y(n,t[o],s,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):n;for(v=k.length-1,u=_-1;u>=0;u--){const e=m+u,n=t[e],p=e+1<d?t[e+1].el:o;0===C[u]?y(null,n,s,p,r,i,l,c,a):S&&(v<0||u!==k[v]?W(n,s,p,2):v--)}}},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===kr){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===Nr)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),cr((()=>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&&sr(l,null,n,e,!0),256&u)return void t.ctx.deactivate(e);const h=1&u&&p,f=!As(e);let m;if(f&&(m=i&&i.onVnodeBeforeUnmount)&&ei(m,t,e),6&u)J(e.component,n,s);else{if(128&u)return void e.suspense.unmount(n,s);h&&fs(e,null,t,"beforeUnmount"),64&u?e.type.remove(e,t,n,o,ee,s):a&&(r!==kr||d>0&&64&d)?X(a,t,n,!1,!0):(r===kr&&384&d||!o&&16&u)&&X(c,t,n),s&&z(e)}(f&&(m=i&&i.onVnodeUnmounted)||h)&&cr((()=>{m&&ei(m,t,e),h&&fs(e,null,t,"unmounted")}),n)},z=e=>{const{type:t,el:n,anchor:s,transition:o}=e;if(t===kr)return void G(n,s);if(t===Nr)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&&M(s),o.stop(),r&&(r.active=!1,K(i,e,t,n)),l&&cr(l,t),cr((()=>{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):y(t._vnode||null,e,t,null,null,null,n),Z||(Z=!0,Sn(),xn(),Z=!1),t._vnode=e},ee={p:y,um:K,m:W,r:z,mt:$,mc:N,pc:j,pbc:I,n:Q,o:e};let te,ne;return o&&([te,ne]=o(ee)),{render:Y,hydrate:te,createApp:Bo(Y,te)}}function pr({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 hr({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function fr(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function mr(e,t,n=!1){const s=e.children,o=t.children;if(d(s)&&d(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]=Qr(o[r]),t.el=e.el),n||mr(e,t)),t.type===Tr&&(t.el=e.el)}}function gr(e){const t=e.subTree.component;if(t)return t.asyncDep&&!t.asyncResolved?t:gr(t)}const vr=e=>e&&(e.disabled||""===e.disabled),yr=e=>"undefined"!=typeof SVGElement&&e instanceof SVGElement,br=e=>"function"==typeof MathMLElement&&e instanceof MathMLElement,_r=(e,t)=>{const n=e&&e.to;if(g(n)){if(t){return t(n)}return null}return n};function Sr(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||vr(u))&&16&c)for(let p=0;p<a.length;p++)o(a[p],t,n,2);d&&s(l,t,n)}const xr={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=vr(t.props);let{shapeFlag:v,children:y,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=_r(t.props,f),p=t.targetAnchor=m("");d&&(h(p,d),"svg"===i||yr(d)?i="svg":("mathml"===i||br(d))&&(i="mathml"));const b=(e,t)=>{16&v&&u(y,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=vr(e.props),v=m?n:u,y=m?s:h;if("svg"===i||yr(u)?i="svg":("mathml"===i||br(u))&&(i="mathml"),b?(p(e.dynamicChildren,b,v,o,r,i,l),mr(e,t,!0)):c||d(e,t,v,y,o,r,i,l,!1),g)m?t.props&&e.props&&t.props.to!==e.props.to&&(t.props.to=e.props.to):Sr(t,n,s,a,1);else if((t.props&&t.props.to)!==(e.props&&e.props.to)){const e=t.target=_r(t.props,f);e&&Sr(t,e,null,a,0)}else m&&Sr(t,u,h,a,1)}Cr(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||!vr(p);for(let s=0;s<c.length;s++){const r=c[s];o(r,t,n,e,!!r.dynamicChildren)}}},move:Sr,hydrate:function(e,t,n,s,o,r,{o:{nextSibling:i,parentNode:l,querySelector:c}},a){const u=t.target=_r(t.props,c);if(u){const c=u._lpa||u.firstChild;if(16&t.shapeFlag)if(vr(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)}Cr(t)}return t.anchor&&i(t.anchor)}};function Cr(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 kr=Symbol.for("v-fgt"),Tr=Symbol.for("v-txt"),wr=Symbol.for("v-cmt"),Nr=Symbol.for("v-stc"),Ar=[];let Er=null;function Ir(e=!1){Ar.push(Er=e?null:[])}function Rr(){Ar.pop(),Er=Ar[Ar.length-1]||null}let Or=1;function Fr(e){Or+=e}function Lr(e){return e.dynamicChildren=Or>0?Er||n:null,Rr(),Or>0&&Er&&Er.push(e),e}function Mr(e,t,n,s,o,r){return Lr(Hr(e,t,n,s,o,r,!0))}function Pr(e,t,n,s,o){return Lr(qr(e,t,n,s,o,!0))}function $r(e){return!!e&&!0===e.__v_isVNode}function Br(e,t){return e.type===t.type&&e.key===t.key}function Vr(e){}const Dr="__vInternal",Ur=({key:e})=>null!=e?e:null,jr=({ref:e,ref_key:t,ref_for:n})=>("number"==typeof e&&(e=""+e),null!=e?g(e)||$t(e)||m(e)?{i:En,r:e,k:t,f:!!n}:e:null);function Hr(e,t=null,n=null,s=0,o=null,r=(e===kr?0:1),i=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Ur(t),ref:t&&jr(t),scopeId:In,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:En};return l?(Zr(c,n),128&r&&e.normalize(c)):n&&(c.shapeFlag|=g(n)?8:16),Or>0&&!i&&Er&&(c.patchFlag>0||6&r)&&32!==c.patchFlag&&Er.push(c),c}const qr=function(e,t=null,n=null,s=0,o=null,r=!1){e&&e!==Hn||(e=wr);if($r(e)){const s=Kr(e,t,!0);return n&&Zr(s,n),Or>0&&!r&&Er&&(6&s.shapeFlag?Er[Er.indexOf(e)]=s:Er.push(s)),s.patchFlag|=-2,s}i=e,m(i)&&"__vccOpts"in i&&(e=e.__vccOpts);var i;if(t){t=Wr(t);let{class:e,style:n}=t;e&&!g(e)&&(t.class=z(e)),y(n)&&(Et(n)&&!d(n)&&(n=l({},n)),t.style=j(n))}const c=g(e)?1:Gn(e)?128:(e=>e.__isTeleport)(e)?64:y(e)?4:m(e)?2:0;return Hr(e,t,n,s,o,c,r,!0)};function Wr(e){return e?Et(e)||Dr in e?l({},e):e:null}function Kr(e,t,n=!1){const{props:s,ref:o,patchFlag:r,children:i}=e,l=t?Yr(s||{},t):s;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&Ur(l),ref:t&&t.ref?n&&o?d(o)?o.concat(jr(t)):[o,jr(t)]:jr(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!==kr?-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&&Kr(e.ssContent),ssFallback:e.ssFallback&&Kr(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function zr(e=" ",t=0){return qr(Tr,null,e,t)}function Gr(e,t){const n=qr(Nr,null,e);return n.staticCount=t,n}function Jr(e="",t=!1){return t?(Ir(),Pr(wr,null,e)):qr(wr,null,e)}function Xr(e){return null==e||"boolean"==typeof e?qr(wr):d(e)?qr(kr,null,e.slice()):"object"==typeof e?Qr(e):qr(Tr,null,String(e))}function Qr(e){return null===e.el&&-1!==e.patchFlag||e.memo?e:Kr(e)}function Zr(e,t){let n=0;const{shapeFlag:s}=e;if(null==t)t=null;else if(d(t))n=16;else if("object"==typeof t){if(65&s){const n=t.default;return void(n&&(n._c&&(n._d=!1),Zr(e,n()),n._c&&(n._d=!0)))}{n=32;const s=t._;s||Dr in t?3===s&&En&&(1===En.slots._?t._=1:(t._=2,e.patchFlag|=1024)):t._ctx=En}}else m(t)?(t={default:t,_ctx:En},n=32):(t=String(t),64&s?(n=16,t=[zr(t)]):n=8);e.children=t,e.shapeFlag|=n}function Yr(...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=z([t.class,s.class]));else if("style"===e)t.style=j([t.style,s.style]);else if(r(e)){const n=t[e],o=s[e];!o||n===o||d(n)&&n.includes(o)||(t[e]=n?[].concat(n,o):o)}else""!==e&&(t[e]=s[e])}return t}function ei(e,t,n,s=null){rn(e,t,7,[n,s])}const ti=Po();let ni=0;let si=null;const oi=()=>si||En;let ri,ii;ri=e=>{si=e},ii=e=>{pi=e};const li=e=>{const t=si;return ri(e),e.scope.on(),()=>{e.scope.off(),ri(t)}},ci=()=>{si&&si.scope.off(),ri(null)};function ai(e){return 4&e.vnode.shapeFlag}let ui,di,pi=!1;function hi(e,t,n){m(t)?e.render=t:y(t)&&(e.setupState=Kt(t)),gi(e,n)}function fi(e){ui=e,di=e=>{e.render._rc&&(e.withProxy=new Proxy(e.ctx,lo))}}const mi=()=>!ui;function gi(e,t,n){const o=e.type;if(!e.render){if(!t&&ui&&!o.render){const t=o.template||Ao(e).template;if(t){const{isCustomElement:n,compilerOptions:s}=e.appContext.config,{delimiters:r,compilerOptions:i}=o,c=l(l({isCustomElement:n,delimiters:r},s),i);o.render=ui(t,c)}}e.render=o.render||s,di&&di(e)}{const t=li(e);Ce();try{To(e)}finally{ke(),t()}}}function vi(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)=>(Me(e,0,"$attrs"),t[n])}))}(e)},slots:e.slots,emit:e.emit,expose:t}}function yi(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(Kt(Rt(e.exposed)),{get:(t,n)=>n in t?t[n]:n in oo?oo[n](e):void 0,has:(e,t)=>t in e||t in oo}))}function bi(e,t=!0){return m(e)?e.displayName||e.name:e.name||t&&e.__name}const _i=(e,t)=>function(e,t,n=!1){let o,r;const i=m(e);return i?(o=e,r=s):(o=e.get,r=e.set),new Lt(o,r,i||!r,n)}(e,0,pi);function Si(e,n,s=t){const o=oi(),r=E(n),i=R(n),l=Gt(((t,l)=>{let c;return is((()=>{const t=e[n];L(c,t)&&(c=t,l())})),{get:()=>(t(),s.get?s.get(c):c),set(e){const t=o.vnode.props;t&&(n in t||r in t||i in t)&&(`onUpdate:${n}`in t||`onUpdate:${r}`in t||`onUpdate:${i}`in t)||!L(e,c)||(c=e,l()),o.emit(`update:${n}`,s.set?s.set(e):e)}}})),c="modelValue"===n?"modelModifiers":`${n}Modifiers`;return l[Symbol.iterator]=()=>{let t=0;return{next:()=>t<2?{value:t++?e[c]||{}:l,done:!1}:{done:!0}}},l}function xi(e,t,n){const s=arguments.length;return 2===s?y(t)&&!d(t)?$r(t)?qr(e,null,[t]):qr(e,t):qr(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):3===s&&$r(n)&&(n=[n]),qr(e,t,n))}function Ci(){}function ki(e,t,n,s){const o=n[s];if(o&&Ti(o,e))return o;const r=t();return r.memo=e.slice(),n[s]=r}function Ti(e,t){const n=e.memo;if(n.length!=t.length)return!1;for(let s=0;s<n.length;s++)if(L(n[s],t[s]))return!1;return Or>0&&Er&&Er.push(e),!0}const wi="3.4.15",Ni=s,Ai=null,Ei=void 0,Ii=s,Ri=null,Oi=null,Fi=null,Li=null,Mi="undefined"!=typeof document?document:null,Pi=Mi&&Mi.createElement("template"),$i={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?Mi.createElementNS("http://www.w3.org/2000/svg",e):"mathml"===t?Mi.createElementNS("http://www.w3.org/1998/Math/MathML",e):Mi.createElement(e,n?{is:n}:void 0);return"select"===e&&s&&null!=s.multiple&&o.setAttribute("multiple",s.multiple),o},createText:e=>Mi.createTextNode(e),createComment:e=>Mi.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Mi.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{Pi.innerHTML="svg"===s?`<svg>${e}</svg>`:"mathml"===s?`<math>${e}</math>`:e;const o=Pi.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]}},Bi="transition",Vi="animation",Di=Symbol("_vtc"),Ui=(e,{slots:t})=>xi(_s,Ki(e),t);Ui.displayName="Transition";const ji={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},Hi=Ui.props=l({},bs,ji),qi=(e,t=[])=>{d(e)?e.forEach((e=>e(...t))):e&&e(...t)},Wi=e=>!!e&&(d(e)?e.some((e=>e.length>1)):e.length>1);function Ki(e){const t={};for(const l in e)l in ji||(t[l]=e[l]);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:c=`${n}-enter-to`,appearFromClass:a=r,appearActiveClass:u=i,appearToClass:d=c,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(y(e))return[zi(e.enter),zi(e.leave)];{const t=zi(e);return[t,t]}}(o),g=m&&m[0],v=m&&m[1],{onBeforeEnter:b,onEnter:_,onEnterCancelled:S,onLeave:x,onLeaveCancelled:C,onBeforeAppear:k=b,onAppear:T=_,onAppearCancelled:w=S}=t,N=(e,t,n)=>{Ji(e,t?d:c),Ji(e,t?u:i),n&&n()},A=(e,t)=>{e._isLeaving=!1,Ji(e,p),Ji(e,f),Ji(e,h),t&&t()},E=e=>(t,n)=>{const o=e?T:_,i=()=>N(t,e,n);qi(o,[t,i]),Xi((()=>{Ji(t,e?a:r),Gi(t,e?d:c),Wi(o)||Zi(t,s,g,i)}))};return l(t,{onBeforeEnter(e){qi(b,[e]),Gi(e,r),Gi(e,i)},onBeforeAppear(e){qi(k,[e]),Gi(e,a),Gi(e,u)},onEnter:E(!1),onAppear:E(!0),onLeave(e,t){e._isLeaving=!0;const n=()=>A(e,t);Gi(e,p),nl(),Gi(e,h),Xi((()=>{e._isLeaving&&(Ji(e,p),Gi(e,f),Wi(x)||Zi(e,s,v,n))})),qi(x,[e,n])},onEnterCancelled(e){N(e,!1),qi(S,[e])},onAppearCancelled(e){N(e,!0),qi(w,[e])},onLeaveCancelled(e){A(e),qi(C,[e])}})}function zi(e){return B(e)}function Gi(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.add(t))),(e[Di]||(e[Di]=new Set)).add(t)}function Ji(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.remove(t)));const n=e[Di];n&&(n.delete(t),n.size||(e[Di]=void 0))}function Xi(e){requestAnimationFrame((()=>{requestAnimationFrame(e)}))}let Qi=0;function Zi(e,t,n,s){const o=e._endId=++Qi,r=()=>{o===e._endId&&s()};if(n)return setTimeout(r,n);const{type:i,timeout:l,propCount:c}=Yi(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 Yi(e,t){const n=window.getComputedStyle(e),s=e=>(n[e]||"").split(", "),o=s(`${Bi}Delay`),r=s(`${Bi}Duration`),i=el(o,r),l=s(`${Vi}Delay`),c=s(`${Vi}Duration`),a=el(l,c);let u=null,d=0,p=0;t===Bi?i>0&&(u=Bi,d=i,p=r.length):t===Vi?a>0&&(u=Vi,d=a,p=c.length):(d=Math.max(i,a),u=d>0?i>a?Bi:Vi:null,p=u?u===Bi?r.length:c.length:0);return{type:u,timeout:d,propCount:p,hasTransform:u===Bi&&/\b(transform|all)(,|$)/.test(s(`${Bi}Property`).toString())}}function el(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max(...t.map(((t,n)=>tl(t)+tl(e[n]))))}function tl(e){return"auto"===e?0:1e3*Number(e.slice(0,-1).replace(",","."))}function nl(){return document.body.offsetHeight}const sl=Symbol("_vod"),ol={beforeMount(e,{value:t},{transition:n}){e[sl]="none"===e.style.display?"":e.style.display,n&&t?n.beforeEnter(e):rl(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:s}){!t!=!n&&(s?t?(s.beforeEnter(e),rl(e,!0),s.enter(e)):s.leave(e,(()=>{rl(e,!1)})):rl(e,t))},beforeUnmount(e,{value:t}){rl(e,t)}};function rl(e,t){e.style.display=t?e[sl]:"none"}const il=Symbol("");function ll(e){const t=oi();if(!t)return;const n=t.ut=(n=e(t.proxy))=>{Array.from(document.querySelectorAll(`[data-v-owner="${t.uid}"]`)).forEach((e=>al(e,n)))},s=()=>{const s=e(t.proxy);cl(t.subTree,s),n(s)};rs(s),Hs((()=>{const e=new MutationObserver(s);e.observe(t.subTree.el.parentNode,{childList:!0}),zs((()=>e.disconnect()))}))}function cl(e,t){if(128&e.shapeFlag){const n=e.suspense;e=n.activeBranch,n.pendingBranch&&!n.isHydrating&&n.effects.push((()=>{cl(n.activeBranch,t)}))}for(;e.component;)e=e.component.subTree;if(1&e.shapeFlag&&e.el)al(e.el,t);else if(e.type===kr)e.children.forEach((e=>cl(e,t)));else if(e.type===Nr){let{el:n,anchor:s}=e;for(;n&&(al(n,t),n!==s);)n=n.nextSibling}}function al(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[il]=s}}const ul=/\s*!important$/;function dl(e,t,n){if(d(n))n.forEach((n=>dl(e,t,n)));else if(null==n&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=function(e,t){const n=hl[t];if(n)return n;let s=E(t);if("filter"!==s&&s in e)return hl[t]=s;s=O(s);for(let o=0;o<pl.length;o++){const n=pl[o]+s;if(n in e)return hl[t]=n}return t}(e,t);ul.test(n)?e.setProperty(R(s),n.replace(ul,""),"important"):e[s]=n}}const pl=["Webkit","Moz","ms"],hl={};const fl="http://www.w3.org/1999/xlink";function ml(e,t,n,s){e.addEventListener(t,n,s)}const gl=Symbol("_vei");function vl(e,t,n,s,o=null){const r=e[gl]||(e[gl]={}),i=r[t];if(s&&i)i.value=s;else{const[n,l]=function(e){let t;if(yl.test(e)){let n;for(t={};n=e.match(yl);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}const n=":"===e[2]?e.slice(3):R(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();rn(function(e,t){if(d(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=Sl(),n}(s,o);ml(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 yl=/(?:Once|Passive|Capture)$/;let bl=0;const _l=Promise.resolve(),Sl=()=>bl||(_l.then((()=>bl=0)),bl=Date.now());const xl=e=>111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123;
+/*! #__NO_SIDE_EFFECTS__ */
+function Cl(e,t){const n=Ns(e);class s extends wl{constructor(e){super(n,e,t)}}return s.def=n,s}
+/*! #__NO_SIDE_EFFECTS__ */const kl=e=>Cl(e,cc),Tl="undefined"!=typeof HTMLElement?HTMLElement:class{};class wl extends Tl{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),vn((()=>{this._connected||(lc(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&&!d(n))for(const r in n){const e=n[r];(e===Number||e&&e.type===Number)&&(r in this._props&&(this._props[r]=B(this._props[r])),(o||(o=Object.create(null)))[E(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=d(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(E))Object.defineProperty(this,s,{get(){return this._getProp(s)},set(e){this._setProp(s,e)}})}_setAttr(e){let t=this.getAttribute(e);const n=E(e);this._numberProps&&this._numberProps[n]&&(t=B(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(R(e),""):"string"==typeof t||"number"==typeof t?this.setAttribute(R(e),t+""):t||this.removeAttribute(R(e))))}_update(){lc(this._createVNode(),this.shadowRoot)}_createVNode(){const e=qr(this._def,l({},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),R(e)!==e&&t(R(e),n)};let n=this;for(;n=n&&(n.parentNode||n.host);)if(n instanceof wl){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)}))}}function Nl(e="$style"){{const n=oi();if(!n)return t;const s=n.type.__cssModules;if(!s)return t;const o=s[e];return o||t}}const Al=new WeakMap,El=new WeakMap,Il=Symbol("_moveCb"),Rl=Symbol("_enterCb"),Ol={name:"TransitionGroup",props:l({},Hi,{tag:String,moveClass:String}),setup(e,{slots:t}){const n=oi(),s=vs();let o,r;return Ws((()=>{if(!o.length)return;const t=e.moveClass||`${e.name||"v"}-move`;if(!function(e,t,n){const s=e.cloneNode(),o=e[Di];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}=Yi(s);return r.removeChild(s),i}(o[0].el,n.vnode.el,t))return;o.forEach(Ll),o.forEach(Ml);const s=o.filter(Pl);nl(),s.forEach((e=>{const n=e.el,s=n.style;Gi(n,t),s.transform=s.webkitTransform=s.transitionDuration="";const o=n[Il]=e=>{e&&e.target!==n||e&&!/transform$/.test(e.propertyName)||(n.removeEventListener("transitionend",o),n[Il]=null,Ji(n,t))};n.addEventListener("transitionend",o)}))})),()=>{const i=It(e),l=Ki(i);let c=i.tag||kr;o=r,r=t.default?ws(t.default()):[];for(let e=0;e<r.length;e++){const t=r[e];null!=t.key&&Ts(t,xs(t,l,s,n))}if(o)for(let e=0;e<o.length;e++){const t=o[e];Ts(t,xs(t,l,s,n)),Al.set(t,t.el.getBoundingClientRect())}return qr(c,null,r)}}},Fl=Ol;function Ll(e){const t=e.el;t[Il]&&t[Il](),t[Rl]&&t[Rl]()}function Ml(e){El.set(e,e.el.getBoundingClientRect())}function Pl(e){const t=Al.get(e),n=El.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 $l=e=>{const t=e.props["onUpdate:modelValue"]||!1;return d(t)?e=>M(t,e):t};function Bl(e){e.target.composing=!0}function Vl(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const Dl=Symbol("_assign"),Ul={created(e,{modifiers:{lazy:t,trim:n,number:s}},o){e[Dl]=$l(o);const r=s||o.props&&"number"===o.props.type;ml(e,t?"change":"input",(t=>{if(t.target.composing)return;let s=e.value;n&&(s=s.trim()),r&&(s=$(s)),e[Dl](s)})),n&&ml(e,"change",(()=>{e.value=e.value.trim()})),t||(ml(e,"compositionstart",Bl),ml(e,"compositionend",Vl),ml(e,"change",Vl))},mounted(e,{value:t}){e.value=null==t?"":t},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:s,number:o}},r){if(e[Dl]=$l(r),e.composing)return;const i=null==t?"":t;if((o||"number"===e.type?$(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}}},jl={deep:!0,created(e,t,n){e[Dl]=$l(n),ml(e,"change",(()=>{const t=e._modelValue,n=zl(e),s=e.checked,o=e[Dl];if(d(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(h(t)){const e=new Set(t);s?e.add(n):e.delete(n),o(e)}else o(Gl(e,s))}))},mounted:Hl,beforeUpdate(e,t,n){e[Dl]=$l(n),Hl(e,t,n)}};function Hl(e,{value:t,oldValue:n},s){e._modelValue=t,d(t)?e.checked=ne(t,s.props.value)>-1:h(t)?e.checked=t.has(s.props.value):t!==n&&(e.checked=te(t,Gl(e,!0)))}const ql={created(e,{value:t},n){e.checked=te(t,n.props.value),e[Dl]=$l(n),ml(e,"change",(()=>{e[Dl](zl(e))}))},beforeUpdate(e,{value:t,oldValue:n},s){e[Dl]=$l(s),t!==n&&(e.checked=te(t,s.props.value))}},Wl={deep:!0,created(e,{value:t,modifiers:{number:n}},s){const o=h(t);ml(e,"change",(()=>{const t=Array.prototype.filter.call(e.options,(e=>e.selected)).map((e=>n?$(zl(e)):zl(e)));e[Dl](e.multiple?o?new Set(t):t:t[0]),e._assigning=!0,vn((()=>{e._assigning=!1}))})),e[Dl]=$l(s)},mounted(e,{value:t,oldValue:n,modifiers:{number:s}}){Kl(e,t,n,s)},beforeUpdate(e,t,n){e[Dl]=$l(n)},updated(e,{value:t,oldValue:n,modifiers:{number:s}}){e._assigning||Kl(e,t,n,s)}};function Kl(e,t,n,s){const o=e.multiple,r=d(t);if((!o||r||h(t))&&(!r||!te(t,n))){for(let n=0,i=e.options.length;n<i;n++){const i=e.options[n],l=zl(i);if(o)if(r){const e=typeof l;i.selected="string"===e||"number"===e?t.includes(s?$(l):l):ne(t,l)>-1}else i.selected=t.has(l);else if(te(zl(i),t))return void(e.selectedIndex!==n&&(e.selectedIndex=n))}o||-1===e.selectedIndex||(e.selectedIndex=-1)}}function zl(e){return"_value"in e?e._value:e.value}function Gl(e,t){const n=t?"_trueValue":"_falseValue";return n in e?e[n]:t}const Jl={created(e,t,n){Xl(e,t,n,null,"created")},mounted(e,t,n){Xl(e,t,n,null,"mounted")},beforeUpdate(e,t,n,s){Xl(e,t,n,s,"beforeUpdate")},updated(e,t,n,s){Xl(e,t,n,s,"updated")}};function Xl(e,t,n,s,o){const r=function(e,t){switch(e){case"SELECT":return Wl;case"TEXTAREA":return Ul;default:switch(t){case"checkbox":return jl;case"radio":return ql;default:return Ul}}}(e.tagName,n.props&&n.props.type)[o];r&&r(e,t,n,s)}const Ql=["ctrl","shift","alt","meta"],Zl={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)=>Ql.some((n=>e[`${n}Key`]&&!t.includes(n)))},Yl=(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=Zl[t[e]];if(s&&s(n,t))return}return e(n,...s)})},ec={esc:"escape",space:" ",up:"arrow-up",left:"arrow-left",right:"arrow-right",down:"arrow-down",delete:"backspace"},tc=(e,t)=>{const n=e._withKeys||(e._withKeys={}),s=t.join(".");return n[s]||(n[s]=n=>{if(!("key"in n))return;const s=R(n.key);return t.some((e=>e===s||ec[e]===s))?e(n):void 0})},nc=l({patchProp:(e,t,n,s,o,l,c,a,u)=>{const d="svg"===o;"class"===t?function(e,t,n){const s=e[Di];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=s.display,r=g(n);if(n&&!r){if(t&&!g(t))for(const e in t)null==n[e]&&dl(s,e,"");for(const e in n)dl(s,e,n[e])}else if(r){if(t!==n){const e=s[il];e&&(n+=";"+e),s.cssText=n}}else t&&e.removeAttribute("style");sl in e&&(s.display=o)}(e,n,s):r(t)?i(t)||vl(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&&xl(t)&&m(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(xl(t)&&g(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,l,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(fl,t.slice(6,t.length)):e.setAttributeNS(fl,t,n);else{const s=Y(t);null==n||s&&!ee(n)?e.removeAttribute(t):e.setAttribute(t,s?"":n)}}(e,t,s,d))}},$i);let sc,oc=!1;function rc(){return sc||(sc=ar(nc))}function ic(){return sc=oc?sc:ur(nc),oc=!0,sc}const lc=(...e)=>{rc().render(...e)},cc=(...e)=>{ic().hydrate(...e)},ac=(...e)=>{const t=rc().createApp(...e),{mount:n}=t;return t.mount=e=>{const s=pc(e);if(!s)return;const o=t._component;m(o)||o.render||o.template||(o.template=s.innerHTML),s.innerHTML="";const r=n(s,!1,dc(s));return s instanceof Element&&(s.removeAttribute("v-cloak"),s.setAttribute("data-v-app","")),r},t},uc=(...e)=>{const t=ic().createApp(...e),{mount:n}=t;return t.mount=e=>{const t=pc(e);if(t)return n(t,!0,dc(t))},t};function dc(e){return e instanceof SVGElement?"svg":"function"==typeof MathMLElement&&e instanceof MathMLElement?"mathml":void 0}function pc(e){if(g(e)){return document.querySelector(e)}return e}const hc=s;var fc=Object.freeze({__proto__:null,BaseTransition:_s,BaseTransitionPropsValidators:bs,Comment:wr,DeprecationTypes:null,EffectScope:ce,ErrorCodes:sn,ErrorTypeStrings:null,Fragment:kr,KeepAlive:Os,ReactiveEffect:he,Static:Nr,Suspense:Xn,Teleport:xr,Text:Tr,TrackOpTypes:en,Transition:Ui,TransitionGroup:Fl,TriggerOpTypes:tn,VueElement:wl,assertNumber:nn,callWithAsyncErrorHandling:rn,callWithErrorHandling:on,camelize:E,capitalize:O,cloneVNode:Kr,compatUtils:null,computed:_i,createApp:ac,createBlock:Pr,createCommentVNode:Jr,createElementBlock:Mr,createElementVNode:Hr,createHydrationRenderer:ur,createPropsRestProxy:xo,createRenderer:ar,createSSRApp:uc,createSlots:Ys,createStaticVNode:Gr,createTextVNode:zr,createVNode:qr,customRef:Gt,defineAsyncComponent:Es,defineComponent:Ns,defineCustomElement:Cl,defineEmits:ao,defineExpose:uo,defineModel:fo,defineOptions:po,defineProps:co,defineSSRCustomElement:kl,defineSlots:ho,devtools:Ei,effect:ye,effectScope:ae,getCurrentInstance:oi,getCurrentScope:de,getTransitionRawChildren:ws,guardReactiveProps:Wr,h:xi,handleError:ln,hasInjectionContext:jo,hydrate:cc,initCustomFormatter:Ci,initDirectivesForSSR:hc,inject:Uo,isMemoSame:Ti,isProxy:Et,isReactive:wt,isReadonly:Nt,isRef:$t,isRuntimeOnly:mi,isShallow:At,isVNode:$r,markRaw:Rt,mergeDefaults:_o,mergeModels:So,mergeProps:Yr,nextTick:vn,normalizeClass:z,normalizeProps:G,normalizeStyle:j,onActivated:Ls,onBeforeMount:js,onBeforeUnmount:Ks,onBeforeUpdate:qs,onDeactivated:Ms,onErrorCaptured:Qs,onMounted:Hs,onRenderTracked:Xs,onRenderTriggered:Js,onScopeDispose:pe,onServerPrefetch:Gs,onUnmounted:zs,onUpdated:Ws,openBlock:Ir,popScopeId:Fn,provide:Do,proxyRefs:Kt,pushScopeId:On,queuePostFlushCb:_n,reactive:St,readonly:Ct,ref:Bt,registerRuntimeCompiler:fi,render:lc,renderList:Zs,renderSlot:eo,resolveComponent:jn,resolveDirective:Wn,resolveDynamicComponent:qn,resolveFilter:null,resolveTransitionHooks:xs,setBlockTracking:Fr,setDevtoolsHook:Ii,setTransitionHooks:Ts,shallowReactive:xt,shallowReadonly:kt,shallowRef:Vt,ssrContextKey:ns,ssrUtils:null,stop:be,toDisplayString:se,toHandlerKey:F,toHandlers:no,toRaw:It,toRef:Zt,toRefs:Jt,toValue:qt,transformVNodeArgs:Vr,triggerRef:jt,unref:Ht,useAttrs:vo,useCssModule:Nl,useCssVars:ll,useModel:Si,useSSRContext:ss,useSlots:go,useTransitionState:vs,vModelCheckbox:jl,vModelDynamic:Jl,vModelRadio:ql,vModelSelect:Wl,vModelText:Ul,vShow:ol,version:wi,warn:Ni,watch:cs,watchEffect:os,watchPostEffect:rs,watchSyncEffect:is,withAsyncContext:Co,withCtx:Mn,withDefaults:mo,withDirectives:hs,withKeys:tc,withMemo:ki,withModifiers:Yl,withScopeId:Ln});const mc=Symbol(""),gc=Symbol(""),vc=Symbol(""),yc=Symbol(""),bc=Symbol(""),_c=Symbol(""),Sc=Symbol(""),xc=Symbol(""),Cc=Symbol(""),kc=Symbol(""),Tc=Symbol(""),wc=Symbol(""),Nc=Symbol(""),Ac=Symbol(""),Ec=Symbol(""),Ic=Symbol(""),Rc=Symbol(""),Oc=Symbol(""),Fc=Symbol(""),Lc=Symbol(""),Mc=Symbol(""),Pc=Symbol(""),$c=Symbol(""),Bc=Symbol(""),Vc=Symbol(""),Dc=Symbol(""),Uc=Symbol(""),jc=Symbol(""),Hc=Symbol(""),qc=Symbol(""),Wc=Symbol(""),Kc=Symbol(""),zc=Symbol(""),Gc=Symbol(""),Jc=Symbol(""),Xc=Symbol(""),Qc=Symbol(""),Zc=Symbol(""),Yc=Symbol(""),ea={[mc]:"Fragment",[gc]:"Teleport",[vc]:"Suspense",[yc]:"KeepAlive",[bc]:"BaseTransition",[_c]:"openBlock",[Sc]:"createBlock",[xc]:"createElementBlock",[Cc]:"createVNode",[kc]:"createElementVNode",[Tc]:"createCommentVNode",[wc]:"createTextVNode",[Nc]:"createStaticVNode",[Ac]:"resolveComponent",[Ec]:"resolveDynamicComponent",[Ic]:"resolveDirective",[Rc]:"resolveFilter",[Oc]:"withDirectives",[Fc]:"renderList",[Lc]:"renderSlot",[Mc]:"createSlots",[Pc]:"toDisplayString",[$c]:"mergeProps",[Bc]:"normalizeClass",[Vc]:"normalizeStyle",[Dc]:"normalizeProps",[Uc]:"guardReactiveProps",[jc]:"toHandlers",[Hc]:"camelize",[qc]:"capitalize",[Wc]:"toHandlerKey",[Kc]:"setBlockTracking",[zc]:"pushScopeId",[Gc]:"popScopeId",[Jc]:"withCtx",[Xc]:"unref",[Qc]:"isRef",[Zc]:"withMemo",[Yc]:"isMemoSame"};const ta={start:{line:1,column:1,offset:0},end:{line:1,column:1,offset:0},source:""};function na(e,t,n,s,o,r,i,l=!1,c=!1,a=!1,u=ta){return e&&(l?(e.helper(_c),e.helper(pa(e.inSSR,a))):e.helper(da(e.inSSR,a)),i&&e.helper(Oc)),{type:13,tag:t,props:n,children:s,patchFlag:o,dynamicProps:r,directives:i,isBlock:l,disableTracking:c,isComponent:a,loc:u}}function sa(e,t=ta){return{type:17,loc:t,elements:e}}function oa(e,t=ta){return{type:15,loc:t,properties:e}}function ra(e,t){return{type:16,loc:ta,key:g(e)?ia(e,!0):e,value:t}}function ia(e,t=!1,n=ta,s=0){return{type:4,loc:n,content:e,isStatic:t,constType:t?3:s}}function la(e,t=ta){return{type:8,loc:t,children:e}}function ca(e,t=[],n=ta){return{type:14,loc:n,callee:e,arguments:t}}function aa(e,t=void 0,n=!1,s=!1,o=ta){return{type:18,params:e,returns:t,newline:n,isSlot:s,loc:o}}function ua(e,t,n,s=!0){return{type:19,test:e,consequent:t,alternate:n,newline:s,loc:ta}}function da(e,t){return e||t?Cc:kc}function pa(e,t){return e||t?Sc:xc}function ha(e,{helper:t,removeHelper:n,inSSR:s}){e.isBlock||(e.isBlock=!0,n(da(s,e.isComponent)),t(_c),t(pa(s,e.isComponent)))}const fa=new Uint8Array([123,123]),ma=new Uint8Array([125,125]);function ga(e){return e>=97&&e<=122||e>=65&&e<=90}function va(e){return 32===e||10===e||9===e||12===e||13===e}function ya(e){return 47===e||62===e||va(e)}function ba(e){const t=new Uint8Array(e.length);for(let n=0;n<e.length;n++)t[n]=e.charCodeAt(n);return t}const _a={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 Sa(e){throw e}function xa(e){}function Ca(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 ka=e=>4===e.type&&e.isStatic;function Ta(e){switch(e){case"Teleport":case"teleport":return gc;case"Suspense":case"suspense":return vc;case"KeepAlive":case"keep-alive":return yc;case"BaseTransition":case"base-transition":return bc}}const wa=/^\d|[^\$\w]/,Na=e=>!wa.test(e),Aa=/[A-Za-z_$\xA0-\uFFFF]/,Ea=/[\.\?\w$\xA0-\uFFFF]/,Ia=/\s+[.[]\s*|\s*[.[]\s+/g,Ra=e=>{e=e.trim().replace(Ia,(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?Aa:Ea).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 Oa(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)&&(g(t)?o.name===t:t.test(o.name)))return o}}function Fa(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)&&La(r.arg,t))return r}}function La(e,t){return!(!e||!ka(e)||e.content!==t)}function Ma(e){return 5===e.type||2===e.type}function Pa(e){return 7===e.type&&"slot"===e.name}function $a(e){return 1===e.type&&3===e.tagType}function Ba(e){return 1===e.type&&2===e.tagType}const Va=new Set([Dc,Uc]);function Da(e,t=[]){if(e&&!g(e)&&14===e.type){const n=e.callee;if(!g(n)&&Va.has(n))return Da(e.arguments[0],t.concat(e))}return[e,t]}function Ua(e,t,n){let s,o,r=13===e.type?e.props:e.arguments[2],i=[];if(r&&!g(r)&&14===r.type){const e=Da(r);r=e[0],i=e[1],o=i[i.length-1]}if(null==r||g(r))s=oa([t]);else if(14===r.type){const e=r.arguments[0];g(e)||15!==e.type?r.callee===jc?s=ca(n.helper($c),[oa([t]),r]):r.arguments.unshift(oa([t])):ja(t,e)||e.properties.unshift(t),!s&&(s=r)}else 15===r.type?(ja(t,r)||r.properties.unshift(t),s=r):(s=ca(n.helper($c),[oa([t]),r]),o&&o.callee===Uc&&(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 ja(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 Ha(e,t){return`_${t}_${e.replace(/[^\w]/g,((t,n)=>"-"===t?"_":e.charCodeAt(n).toString()))}`}const qa=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,Wa={parseMode:"base",ns:0,delimiters:["{{","}}"],getNamespace:()=>0,isVoidTag:o,isPreTag:o,isCustomElement:o,onError:Sa,onWarn:xa,comments:!1,prefixIdentifiers:!1};let Ka=Wa,za=null,Ga="",Ja=null,Xa=null,Qa="",Za=-1,Ya=-1,eu=0,tu=!1,nu=null;const su=[],ou=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=fa,this.delimiterClose=ma,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=fa,this.delimiterClose=ma}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?ya(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||va(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===_a.TitleEnd||this.currentSequence===_a.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===_a.Cdata[this.sequenceIndex]?++this.sequenceIndex===_a.Cdata.length&&(this.state=28,this.currentSequence=_a.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===_a.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(ga(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){ya(e)&&this.handleTagName(e)}stateInSFCRootTagName(e){if(ya(e)){const t=this.buffer.slice(this.sectionStart,this.index);"template"!==t&&this.enterRCDATA(ba("</"+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){va(e)||(62===e?(this.state=1,this.sectionStart=this.index+1):(this.state=ga(e)?9:27,this.sectionStart=this.index))}stateInClosingTagName(e){(62===e||va(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):va(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):va(e)||(this.state=11,this.stateBeforeAttrName(e))}stateInAttrName(e){(61===e||ya(e))&&(this.cbs.onattribname(this.sectionStart,this.index),this.handleAttrNameEnd(e))}stateInDirName(e){61===e||ya(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||ya(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||ya(e))&&(this.cbs.ondirarg(this.sectionStart,this.index+1),this.handleAttrNameEnd(e))}stateInDirModifier(e){61===e||ya(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)):va(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):va(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){va(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=_a.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===_a.ScriptEnd[3]?this.startSpecial(_a.ScriptEnd,4):t===_a.StyleEnd[3]?this.startSpecial(_a.StyleEnd,4):(this.state=6,this.stateInTagName(e))}stateBeforeSpecialT(e){const t=32|e;t===_a.TitleEnd[3]?this.startSpecial(_a.TitleEnd,4):t===_a.TextareaEnd[3]?this.startSpecial(_a.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===_a.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){}}(su,{onerr:Cu,ontext(e,t){au(lu(e,t),e,t)},ontextentity(e,t,n){au(e,t,n)},oninterpolation(e,t){if(tu)return au(lu(e,t),e,t);let n=e+ou.delimiterOpen.length,s=t-ou.delimiterClose.length;for(;va(Ga.charCodeAt(n));)n++;for(;va(Ga.charCodeAt(s-1));)s--;let o=lu(n,s);o.includes("&")&&(o=Ka.decodeEntities(o,!1)),yu({type:5,content:xu(o,!1,bu(n,s)),loc:bu(e,t)})},onopentagname(e,t){const n=lu(e,t);Ja={type:1,tag:n,ns:Ka.getNamespace(n,su[0],Ka.ns),tagType:0,props:[],children:[],loc:bu(e-1,t),codegenNode:void 0}},onopentagend(e){cu(e)},onclosetag(e,t){const n=lu(e,t);if(!Ka.isVoidTag(n)){let s=!1;for(let e=0;e<su.length;e++){if(su[e].tag.toLowerCase()===n.toLowerCase()){s=!0;for(let n=0;n<=e;n++){uu(su.shift(),t,n<e)}break}}s||du(e,60)}},onselfclosingtag(e){var t;const n=Ja.tag;Ja.isSelfClosing=!0,cu(e),(null==(t=su[0])?void 0:t.tag)===n&&uu(su.shift(),e)},onattribname(e,t){Xa={type:6,name:lu(e,t),nameLoc:bu(e,t),value:void 0,loc:bu(e)}},ondirname(e,t){const n=lu(e,t),s="."===n||":"===n?"bind":"@"===n?"on":"#"===n?"slot":n.slice(2);if(tu||""===s)Xa={type:6,name:n,nameLoc:bu(e,t),value:void 0,loc:bu(e)};else if(Xa={type:7,name:s,rawName:n,exp:void 0,arg:void 0,modifiers:"."===n?["prop"]:[],loc:bu(e)},"pre"===s){tu=ou.inVPre=!0,nu=Ja;const e=Ja.props;for(let t=0;t<e.length;t++)7===e[t].type&&(e[t]=Su(e[t]))}},ondirarg(e,t){if(e===t)return;const n=lu(e,t);if(tu)Xa.name+=n,_u(Xa.nameLoc,t);else{const s="["!==n[0];Xa.arg=xu(s?n:n.slice(1,-1),s,bu(e,t),s?3:0)}},ondirmodifier(e,t){const n=lu(e,t);if(tu)Xa.name+="."+n,_u(Xa.nameLoc,t);else if("slot"===Xa.name){const e=Xa.arg;e&&(e.content+="."+n,_u(e.loc,t))}else Xa.modifiers.push(n)},onattribdata(e,t){Qa+=lu(e,t),Za<0&&(Za=e),Ya=t},onattribentity(e,t,n){Qa+=e,Za<0&&(Za=t),Ya=n},onattribnameend(e){const t=lu(Xa.loc.start.offset,e);7===Xa.type&&(Xa.rawName=t),Ja.props.some((e=>(7===e.type?e.rawName:e.name)===t))},onattribend(e,t){if(Ja&&Xa){if(_u(Xa.loc,t),0!==e)if(Qa.includes("&")&&(Qa=Ka.decodeEntities(Qa,!0)),6===Xa.type)"class"===Xa.name&&(Qa=vu(Qa).trim()),Xa.value={type:2,content:Qa,loc:1===e?bu(Za,Ya):bu(Za-1,Ya+1)},ou.inSFCRoot&&"template"===Ja.tag&&"lang"===Xa.name&&Qa&&"html"!==Qa&&ou.enterRCDATA(ba("</template"),0);else{let e=0;Xa.exp=xu(Qa,!1,bu(Za,Ya),0,e),"for"===Xa.name&&(Xa.forParseResult=function(e){const t=e.loc,n=e.content,s=n.match(qa);if(!s)return;const[,o,r]=s,i=(e,n,s=!1)=>{const o=t.start.offset+n;return xu(e,!1,bu(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(iu,"").trim();const a=o.indexOf(c),u=c.match(ru);if(u){c=c.replace(ru,"").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}(Xa.exp))}7===Xa.type&&"pre"===Xa.name||Ja.props.push(Xa)}Qa="",Za=Ya=-1},oncomment(e,t){Ka.comments&&yu({type:3,content:lu(e,t),loc:bu(e-4,t+3)})},onend(){const e=Ga.length;for(let t=0;t<su.length;t++)uu(su[t],e-1)},oncdata(e,t){0!==su[0].ns&&au(lu(e,t),e,t)},onprocessinginstruction(e){0===(su[0]?su[0].ns:Ka.ns)&&Cu(21,e-1)}}),ru=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,iu=/^\(|\)$/g;function lu(e,t){return Ga.slice(e,t)}function cu(e){ou.inSFCRoot&&(Ja.innerLoc=bu(e+1,e+1)),yu(Ja);const{tag:t,ns:n}=Ja;0===n&&Ka.isPreTag(t)&&eu++,Ka.isVoidTag(t)?uu(Ja,e):(su.unshift(Ja),1!==n&&2!==n||(ou.inXML=!0)),Ja=null}function au(e,t,n){var s;{const t=null==(s=su[0])?void 0:s.tag;"script"!==t&&"style"!==t&&e.includes("&")&&(e=Ka.decodeEntities(e,!1))}const o=su[0]||za,r=o.children[o.children.length-1];2===(null==r?void 0:r.type)?(r.content+=e,_u(r.loc,n)):o.children.push({type:2,content:e,loc:bu(t,n)})}function uu(e,t,n=!1){_u(e.loc,n?du(t,60):t+1),ou.inSFCRoot&&(e.innerLoc.end=l({},e.children.length?e.children[e.children.length-1].loc.end:e.innerLoc.start),e.innerLoc.source=lu(e.innerLoc.start.offset,e.innerLoc.end.offset));const{tag:s,ns:o}=e;tu||("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&&pu.has(t[n].name))return!0;return!1}(e)?function({tag:e,props:t}){var n;if(Ka.isCustomElement(e))return!1;if("component"===e||(s=e.charCodeAt(0),s>64&&s<91)||Ta(e)||(null==(n=Ka.isBuiltInComponent)?void 0:n.call(Ka,e))||Ka.isNativeTag&&!Ka.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),ou.inRCDATA||(e.children=fu(e.children,e.tag)),0===o&&Ka.isPreTag(s)&&eu--,nu===e&&(tu=ou.inVPre=!1,nu=null),ou.inXML&&0===(su[0]?su[0].ns:Ka.ns)&&(ou.inXML=!1)}function du(e,t){let n=e;for(;Ga.charCodeAt(n)!==t&&n>=0;)n--;return n}const pu=new Set(["if","else","else-if","for","slot"]);const hu=/\r\n/g;function fu(e,t){var n,s;const o="preserve"!==Ka.whitespace;let r=!1;for(let i=0;i<e.length;i++){const t=e[i];if(2===t.type)if(eu)t.content=t.content.replace(hu,"\n");else if(mu(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&&gu(t.content)))?(r=!0,e[i]=null):t.content=" "}else o&&(t.content=vu(t.content))}if(eu&&t&&Ka.isPreTag(t)){const t=e[0];t&&2===t.type&&(t.content=t.content.replace(/^\r?\n/,""))}return r?e.filter(Boolean):e}function mu(e){for(let t=0;t<e.length;t++)if(!va(e.charCodeAt(t)))return!1;return!0}function gu(e){for(let t=0;t<e.length;t++){const n=e.charCodeAt(t);if(10===n||13===n)return!0}return!1}function vu(e){let t="",n=!1;for(let s=0;s<e.length;s++)va(e.charCodeAt(s))?n||(t+=" ",n=!0):(t+=e[s],n=!1);return t}function yu(e){(su[0]||za).children.push(e)}function bu(e,t){return{start:ou.getPos(e),end:null==t?t:ou.getPos(t),source:null==t?t:lu(e,t)}}function _u(e,t){e.end=ou.getPos(t),e.source=lu(e.start.offset,t)}function Su(e){const t={type:6,name:e.rawName,nameLoc:bu(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 xu(e,t=!1,n,s=0,o=0){return ia(e,t,n,s)}function Cu(e,t,n){Ka.onError(Ca(e,bu(t,t)))}function ku(e,t){if(ou.reset(),Ja=null,Xa=null,Qa="",Za=-1,Ya=-1,su.length=0,Ga=e,Ka=l({},Wa),t){let e;for(e in t)null!=t[e]&&(Ka[e]=t[e])}ou.mode="html"===Ka.parseMode?1:"sfc"===Ka.parseMode?2:0,ou.inXML=1===Ka.ns||2===Ka.ns;const n=null==t?void 0:t.delimiters;n&&(ou.delimiterOpen=ba(n[0]),ou.delimiterClose=ba(n[1]));const s=za=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:ta}}([],e);return ou.parse(Ga),s.loc=bu(0,e.length),s.children=fu(s.children),za=null,s}function Tu(e,t){Nu(e,t,wu(e,e.children[0]))}function wu(e,t){const{children:n}=e;return 1===n.length&&1===t.type&&!Ba(t)}function Nu(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:Au(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=Fu(n);if((!s||512===s||1===s)&&Ru(e,t)>=2){const s=Ou(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++,Nu(e,t),n&&t.scopes.vSlot--}else if(11===e.type)Nu(e,t,1===e.children.length);else if(9===e.type)for(let n=0;n<e.branches.length;n++)Nu(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&&d(e.codegenNode.children)){const n=t.hoist(sa(e.codegenNode.children));t.hmr&&(n.content=`[...${n.content}]`),e.codegenNode.children=n}}function Au(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(Fu(o))return n.set(e,0),0;{let s=3;const r=Ru(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=Au(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=Au(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(_c),t.removeHelper(pa(t.inSSR,o.isComponent)),o.isBlock=!1,t.helper(da(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 Au(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(g(s)||v(s))continue;const o=Au(s,t);if(0===o)return 0;o<r&&(r=o)}return r}}const Eu=new Set([Bc,Vc,Dc,Uc]);function Iu(e,t){if(14===e.type&&!g(e.callee)&&Eu.has(e.callee)){const n=e.arguments[0];if(4===n.type)return Au(n,t);if(14===n.type)return Iu(n,t)}return 0}function Ru(e,t){let n=3;const s=Ou(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=Au(o,t);if(0===i)return i;let l;if(i<n&&(n=i),l=4===r.type?Au(r,t):14===r.type?Iu(r,t):0,0===l)return l;l<n&&(n=l)}}return n}function Ou(e){const t=e.codegenNode;if(13===t.type)return t.props}function Fu(e){const t=e.patchFlag;return t?parseInt(t,10):void 0}function Lu(e,{filename:n="",prefixIdentifiers:o=!1,hoistStatic:r=!1,hmr:i=!1,cacheHandlers:l=!1,nodeTransforms:c=[],directiveTransforms:a={},transformHoist:u=null,isBuiltInComponent:d=s,isCustomElement:p=s,expressionPlugins:h=[],scopeId:f=null,slotted:m=!0,ssr:v=!1,inSSR:y=!1,ssrCssVars:b="",bindingMetadata:_=t,inline:S=!1,isTS:x=!1,onError:C=Sa,onWarn:k=xa,compatConfig:T}){const w=n.replace(/\?.*$/,"").match(/([^/\\]+)\.\w+$/),N={filename:n,selfName:w&&O(E(w[1])),prefixIdentifiers:o,hoistStatic:r,hmr:i,cacheHandlers:l,nodeTransforms:c,directiveTransforms:a,transformHoist:u,isBuiltInComponent:d,isCustomElement:p,expressionPlugins:h,scopeId:f,slotted:m,ssr:v,inSSR:y,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=N.helpers.get(e)||0;return N.helpers.set(e,t+1),e},removeHelper(e){const t=N.helpers.get(e);if(t){const n=t-1;n?N.helpers.set(e,n):N.helpers.delete(e)}},helperString:e=>`_${ea[N.helper(e)]}`,replaceNode(e){N.parent.children[N.childIndex]=N.currentNode=e},removeNode(e){const t=e?N.parent.children.indexOf(e):N.currentNode?N.childIndex:-1;e&&e!==N.currentNode?N.childIndex>t&&(N.childIndex--,N.onNodeRemoved()):(N.currentNode=null,N.onNodeRemoved()),N.parent.children.splice(t,1)},onNodeRemoved:s,addIdentifiers(e){},removeIdentifiers(e){},hoist(e){g(e)&&(e=ia(e)),N.hoists.push(e);const t=ia(`_hoisted_${N.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:ta}}(N.cached++,e,t)};return N}function Mu(e,t){const n=Lu(e,t);Pu(e,n),t.hoistStatic&&Tu(e,n),t.ssr||function(e,t){const{helper:n}=t,{children:s}=e;if(1===s.length){const n=s[0];if(wu(e,n)&&n.codegenNode){const s=n.codegenNode;13===s.type&&ha(s,t),e.codegenNode=s}else e.codegenNode=n}else if(s.length>1){let s=64;e.codegenNode=na(t,n(mc),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 Pu(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&&(d(o)?s.push(...o):s.push(o)),!t.currentNode)return;e=t.currentNode}switch(e.type){case 3:t.ssr||t.helper(Tc);break;case 5:t.ssr||t.helper(Pc);break;case 9:for(let n=0;n<e.branches.length;n++)Pu(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];g(o)||(t.parent=e,t.childIndex=n,t.onNodeRemoved=s,Pu(o,t))}}(e,t)}t.currentNode=e;let o=s.length;for(;o--;)s[o]()}function $u(e,t){const n=g(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(Pa))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 Bu="/*#__PURE__*/",Vu=e=>`${ea[e]}: _${ea[e]}`;function Du(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=>`_${ea[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}function Uu(e,t={}){const n=Du(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,h=n;!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 { ${[Cc,kc,Tc,wc,Nc].filter((e=>i.includes(e))).map(Vu).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} = `),Wu(r,t),s())}t.pure=!1})(e.hoists,t),s(),n("return ")}(e,h);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(Vu).join(", ")} } = _Vue\n`,-1),c())),e.components.length&&(ju(e.components,"component",n),(e.directives.length||e.temps>0)&&c()),e.directives.length&&(ju(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?Wu(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 ju(e,t,{helper:n,push:s,newline:o,isTS:r}){const i=n("component"===t?Ac:Ic);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 ${Ha(n,t)} = ${i}(${JSON.stringify(n)}${c?", true":""})${r?"!":""}`),l<e.length-1&&o()}}function Hu(e,t){const n=e.length>3||!1;t.push("["),n&&t.indent(),qu(e,t,n),n&&t.deindent(),t.push("]")}function qu(e,t,n=!1,s=!0){const{push:o,newline:r}=t;for(let i=0;i<e.length;i++){const l=e[i];g(l)?o(l,-3):d(l)?Hu(l,t):Wu(l,t),i<e.length-1&&(n?(s&&o(","),r()):s&&o(", "))}}function Wu(e,t){if(g(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:Wu(e.codegenNode,t);break;case 2:!function(e,t){t.push(JSON.stringify(e.content),-3,e)}(e,t);break;case 4:Ku(e,t);break;case 5:!function(e,t){const{push:n,helper:s,pure:o}=t;o&&n(Bu);n(`${s(Pc)}(`),Wu(e.content,t),n(")")}(e,t);break;case 8:zu(e,t);break;case 3:!function(e,t){const{push:n,helper:s,pure:o}=t;o&&n(Bu);n(`${s(Tc)}(${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(Oc)+"(");d&&n(`(${s(_c)}(${p?"true":""}), `);o&&n(Bu);const f=d?pa(t.inSSR,h):da(t.inSSR,h);n(s(f)+"(",-2,e),qu(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(", "),Wu(u,t),n(")"))}(e,t);break;case 14:!function(e,t){const{push:n,helper:s,pure:o}=t,r=g(e.callee)?e.callee:s(e.callee);o&&n(Bu);n(r+"(",-2,e),qu(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];Gu(e,t),n(": "),Wu(s,t),c<i.length-1&&(n(","),r())}l&&o(),n(l?"}":" }")}(e,t);break;case 17:!function(e,t){Hu(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(`_${ea[Jc]}(`);n("(",-2,e),d(r)?qu(r,t):r&&Wu(r,t);n(") => "),(c||l)&&(n("{"),s());i?(c&&n("return "),d(i)?Hu(i,t):Wu(i,t)):l&&Wu(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=!Na(n.content);e&&i("("),Ku(n,t),e&&i(")")}else i("("),Wu(n,t),i(")");r&&l(),t.indentLevel++,r||i(" "),i("? "),Wu(s,t),t.indentLevel--,r&&a(),r||i(" "),i(": ");const u=19===o.type;u||t.indentLevel++;Wu(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(Kc)}(-1),`),i());n(`_cache[${e.index}] = `),Wu(e.value,t),e.isVNode&&(n(","),i(),n(`${s(Kc)}(1),`),i(),n(`_cache[${e.index}]`),r());n(")")}(e,t);break;case 21:qu(e.body,t,!0,!1)}}function Ku(e,t){const{content:n,isStatic:s}=e;t.push(s?JSON.stringify(n):n,-3,e)}function zu(e,t){for(let n=0;n<e.children.length;n++){const s=e.children[n];g(s)?t.push(s,-3):Wu(s,t)}}function Gu(e,t){const{push:n}=t;if(8===e.type)n("["),zu(e,t),n("]");else if(e.isStatic){n(Na(e.content)?e.content:JSON.stringify(e.content),-2,e)}else n(`[${e.content}]`,-3,e)}const Ju=$u(/^(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(Ca(28,t.loc)),t.exp=ia("true",!1,s)}if("if"===t.name){const o=Xu(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(Ca(30,e.loc)),n.removeNode();const o=Xu(e,t);i.branches.push(o);const r=s&&s(i,o,!1);Pu(o,n),r&&r(),n.currentNode=null}else n.onError(Ca(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=Qu(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=Qu(t,i+e.branches.length-1,n)}}}))));function Xu(e,t){const n=3===e.tagType;return{type:10,loc:e.loc,condition:"else"===t.name?void 0:t.exp,children:n&&!Oa(e,"for")?e.children:[e],userKey:Fa(e,"key"),isTemplateIf:n}}function Qu(e,t,n){return e.condition?ua(e.condition,Zu(e,t,n),ca(n.helper(Tc),['""',"true"])):Zu(e,t,n)}function Zu(e,t,n){const{helper:s}=n,o=ra("key",ia(`${t}`,!1,ta,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 Ua(e,o,n),e}{let t=64;return na(n,s(mc),oa([o]),r,t+"",void 0,void 0,!0,!1,!1,e.loc)}}{const e=i.codegenNode,t=14===(l=e).type&&l.callee===Zc?l.arguments[1].returns:l;return 13===t.type&&ha(t,n),Ua(t,o,n),e}var l}const Yu=$u("for",((e,t,n)=>{const{helper:s,removeHelper:o}=n;return function(e,t,n,s){if(!t.exp)return void n.onError(Ca(31,t.loc));const o=t.forParseResult;if(!o)return void n.onError(Ca(32,t.loc));ed(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:$a(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=ca(s(Fc),[t.source]),i=$a(e),l=Oa(e,"memo"),c=Fa(e,"key"),a=c&&(6===c.type?ia(c.value.content,!0):c.exp),u=c?ra("key",a):null,d=4===t.source.type&&t.source.constType>0,p=d?64:c?128:256;return t.codegenNode=na(n,s(mc),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=Ba(e)?e:i&&1===e.children.length&&Ba(e.children[0])?e.children[0]:null;if(f?(c=f.codegenNode,i&&u&&Ua(c,u,n)):h?c=na(n,s(mc),u?oa([u]):void 0,e.children,"64",void 0,void 0,!0,void 0,!1):(c=p[0].codegenNode,i&&u&&Ua(c,u,n),c.isBlock!==!d&&(c.isBlock?(o(_c),o(pa(n.inSSR,c.isComponent))):o(da(n.inSSR,c.isComponent))),c.isBlock=!d,c.isBlock?(s(_c),s(pa(n.inSSR,c.isComponent))):s(da(n.inSSR,c.isComponent))),l){const e=aa(td(t.parseResult,[ia("_cached")]));e.body={type:21,body:[la(["const _memo = (",l.exp,")"]),la(["if (_cached",...a?[" && _cached.key === ",a]:[],` && ${n.helperString(Yc)}(_cached, _memo)) return _cached`]),la(["const _item = ",c]),ia("_item.memo = _memo"),ia("return _item")],loc:ta},r.arguments.push(e,ia("_cache"),ia(String(n.cached++)))}else r.arguments.push(aa(td(t.parseResult),c,!0))}}))}));function ed(e,t){e.finalized||(e.finalized=!0)}function td({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||ia("_".repeat(t+1),!1)))}([e,t,n,...s])}const nd=ia("undefined",!1),sd=(e,t)=>{if(1===e.type&&(1===e.tagType||3===e.tagType)){const n=Oa(e,"slot");if(n)return t.scopes.vSlot++,()=>{t.scopes.vSlot--}}},od=(e,t,n,s)=>aa(e,n,!1,!0,n.length?n[0].loc:s);function rd(e,t,n=od){t.helper(Jc);const{children:s,loc:o}=e,r=[],i=[];let l=t.scopes.vSlot>0||t.scopes.vFor>0;const c=Oa(e,"slot",!0);if(c){const{arg:e,exp:t}=c;e&&!ka(e)&&(l=!0),r.push(ra(e||ia("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(!$a(e)||!(o=Oa(e,"slot",!0))){3!==e.type&&d.push(e);continue}if(c){t.onError(Ca(37,o.loc));break}a=!0;const{children:f,loc:m}=e,{arg:v=ia("default",!0),exp:y,loc:b}=o;let _;ka(v)?_=v?v.content:"default":l=!0;const S=Oa(e,"for"),x=n(y,S,f,m);let C,k;if(C=Oa(e,"if"))l=!0,i.push(ua(C.exp,id(v,x,h++),nd));else if(k=Oa(e,/^else(-if)?$/,!0)){let e,n=g;for(;n--&&(e=s[n],3===e.type););if(e&&$a(e)&&Oa(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?ua(k.exp,id(v,x,h++),nd):id(v,x,h++)}else t.onError(Ca(30,k.loc))}else if(S){l=!0;const e=S.forParseResult;e?(ed(e),i.push(ca(t.helper(Fc),[e.source,aa(td(e),id(v,x),!0)]))):t.onError(Ca(32,S.loc))}else{if(_){if(p.has(_)){t.onError(Ca(38,b));continue}p.add(_),"default"===_&&(u=!0)}r.push(ra(v,x))}}if(!c){const e=(e,t)=>ra("default",n(e,void 0,t,o));a?d.length&&d.some((e=>cd(e)))&&(u?t.onError(Ca(39,d[0].loc)):r.push(e(void 0,d))):r.push(e(void 0,s))}const f=l?2:ld(e.children)?3:1;let m=oa(r.concat(ra("_",ia(f+"",!1))),o);return i.length&&(m=ca(t.helper(Mc),[m,sa(i)])),{slots:m,hasDynamicSlots:l}}function id(e,t,n){const s=[ra("name",e),ra("fn",t)];return null!=n&&s.push(ra("key",ia(String(n),!0))),oa(s)}function ld(e){for(let t=0;t<e.length;t++){const n=e[t];switch(n.type){case 1:if(2===n.tagType||ld(n.children))return!0;break;case 9:if(ld(n.branches))return!0;break;case 10:case 11:if(ld(n.children))return!0}}return!1}function cd(e){return 2!==e.type&&12!==e.type||(2===e.type?!!e.content.trim():cd(e.content))}const ad=new WeakMap,ud=(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=fd(s),r=Fa(e,"is");if(r)if(o){const e=6===r.type?r.value&&ia(r.value.content,!0):r.exp;if(e)return ca(t.helper(Ec),[e])}else 6===r.type&&r.value.content.startsWith("vue:")&&(s=r.value.content.slice(4));const i=Ta(s)||t.isBuiltInComponent(s);if(i)return n||t.helper(i),i;return t.helper(Ac),t.components.add(s),Ha(s,"component")}(e,t):`"${n}"`;const i=y(r)&&r.callee===Ec;let l,c,a,u,d,p,h=0,f=i||r===gc||r===vc||!o&&("svg"===n||"foreignObject"===n);if(s.length>0){const n=dd(e,t,void 0,o,i);l=n.props,h=n.patchFlag,d=n.dynamicPropNames;const s=n.directives;p=s&&s.length?sa(s.map((e=>function(e,t){const n=[],s=ad.get(e);s?n.push(t.helperString(s)):(t.helper(Ic),t.directives.add(e.name),n.push(Ha(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=ia("true",!1,o);n.push(oa(e.modifiers.map((e=>ra(e,t))),o))}return sa(n,e.loc)}(e,t)))):void 0,n.shouldUseBlock&&(f=!0)}if(e.children.length>0){r===yc&&(f=!0,h|=1024);if(o&&r!==gc&&r!==yc){const{slots:n,hasDynamicSlots:s}=rd(e,t);c=n,s&&(h|=1024)}else if(1===e.children.length&&r!==gc){const n=e.children[0],s=n.type,o=5===s||8===s;o&&0===Au(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=na(t,r,l,c,a,u,p,!!f,!1,o,e.loc)};function dd(e,t,n=e.props,s,o,i=!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(oa(pd(u),c)),u=[]),e&&d.push(e)},N=({key:e,value:n})=>{if(ka(e)){const i=e.content,l=r(i);if(!l||s&&!o||"onclick"===i.toLowerCase()||"onUpdate:modelValue"===i||T(i)||(_=!0),l&&T(i)&&(x=!0),l&&14===n.type&&(n=n.arguments[0]),20===n.type||(4===n.type||8===n.type)&&Au(n,t)>0)return;"ref"===i?g=!0:"class"===i?y=!0:"style"===i?b=!0:"key"===i||C.includes(i)||C.push(i),!s||"class"!==i&&"style"!==i||C.includes(i)||C.push(i)}else S=!0};for(let r=0;r<n.length;r++){const o=n[r];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(ra(ia("ref_for",!0),ia("true")))),"is"===n&&(fd(l)||r&&r.content.startsWith("vue:")))continue;u.push(ra(ia(n,!0,s),ia(r?r.content:"",i,r?r.loc:e)))}else{const{name:n,arg:r,exp:a,loc:g,modifiers:y}=o,b="bind"===n,_="on"===n;if("slot"===n){s||t.onError(Ca(40,g));continue}if("once"===n||"memo"===n)continue;if("is"===n||b&&La(r,"is")&&fd(l))continue;if(_&&i)continue;if((b&&La(r,"key")||_&&h&&La(r,"vue:before-update"))&&(f=!0),b&&La(r,"ref")&&t.scopes.vFor>0&&u.push(ra(ia("ref_for",!0),ia("true"))),!r&&(b||_)){S=!0,a?b?(k(),d.push(a)):k({type:14,loc:g,callee:t.helper(jc),arguments:s?[a]:[a,"true"]}):t.onError(Ca(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);!i&&n.forEach(N),_&&r&&!ka(r)?k(oa(n,c)):u.push(...n),s&&(p.push(o),v(s)&&ad.set(o,s))}else w(n)||(p.push(o),h&&(f=!0))}}let A;if(d.length?(k(),A=d.length>1?ca(t.helper($c),d,c):d[0]):u.length&&(A=oa(pd(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&&A)switch(A.type){case 15:let e=-1,n=-1,s=!1;for(let t=0;t<A.properties.length;t++){const o=A.properties[t].key;ka(o)?"class"===o.content?e=t:"style"===o.content&&(n=t):o.isHandlerKey||(s=!0)}const o=A.properties[e],r=A.properties[n];s?A=ca(t.helper(Dc),[A]):(o&&!ka(o.value)&&(o.value=ca(t.helper(Bc),[o.value])),r&&(b||4===r.value.type&&"["===r.value.content.trim()[0]||17===r.value.type)&&(r.value=ca(t.helper(Vc),[r.value])));break;case 14:break;default:A=ca(t.helper(Dc),[ca(t.helper(Uc),[A])])}return{props:A,directives:p,patchFlag:m,dynamicPropNames:C,shouldUseBlock:f}}function pd(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 i=o.key.content,l=t.get(i);l?("style"===i||"class"===i||r(i))&&hd(l,o):(t.set(i,o),n.push(o))}return n}function hd(e,t){17===e.value.type?e.value.elements.push(t.value):e.value=sa([e.value,t.value],e.loc)}function fd(e){return"component"===e||"Component"===e}const md=(e,t)=>{if(Ba(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];6===t.type?t.value&&("name"===t.name?s=JSON.stringify(t.value.content):(t.name=E(t.name),o.push(t))):"bind"===t.name&&La(t.arg,"name")?t.exp&&(s=t.exp):("bind"===t.name&&t.arg&&ka(t.arg)&&(t.arg.content=E(t.arg.content)),o.push(t))}if(o.length>0){const{props:s,directives:r}=dd(e,t,o,!1,!1);n=s,r.length&&t.onError(Ca(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]=aa([],n,!1,!1,s),l=4),t.scopeId&&!t.slotted&&(l=5),i.splice(l),e.codegenNode=ca(t.helper(Lc),i,s)}};const gd=/^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/,vd=(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=ia(0!==t.tagType||e.startsWith("vnode")||!/[A-Z]/.test(e)?F(E(e)):`on:${e}`,!0,i.loc)}else l=la([`${n.helperString(Wc)}(`,i,")"]);else l=i,l.children.unshift(`${n.helperString(Wc)}(`),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=Ra(c.content),t=!(e||gd.test(c.content)),n=c.content.includes(";");(t||a&&e)&&(c=la([`${t?"$event":"(...args)"} => ${n?"{":"("}`,c,n?"}":")"]))}let u={props:[ra(l,c||ia("() => {}",!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},yd=(e,t,n)=>{const{modifiers:s,loc:o}=e,r=e.arg;let{exp:i}=e;if(!i&&4===r.type){const t=E(r.content);i=e.exp=ia(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?E(r.content):`${n.helperString(Hc)}(${r.content})`:(r.children.unshift(`${n.helperString(Hc)}(`),r.children.push(")"))),n.inSSR||(s.includes("prop")&&bd(r,"."),s.includes("attr")&&bd(r,"^")),!i||4===i.type&&!i.content.trim()?{props:[ra(r,ia("",!0,o))]}:{props:[ra(r,i)]}},bd=(e,t)=>{4===e.type?e.content=e.isStatic?t+e.content:`\`${t}\${${e.content}}\``:(e.children.unshift(`'${t}' + (`),e.children.push(")"))},_d=(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(Ma(t)){o=!0;for(let o=e+1;o<n.length;o++){const r=n[o];if(!Ma(r)){s=void 0;break}s||(s=n[e]=la([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(Ma(s)||8===s.type){const o=[];2===s.type&&" "===s.content||o.push(s),t.ssr||0!==Au(s,t)||o.push("1"),n[e]={type:12,content:s,loc:s.loc,codegenNode:ca(t.helper(wc),o)}}}}},Sd=new WeakSet,xd=(e,t)=>{if(1===e.type&&Oa(e,"once",!0)){if(Sd.has(e)||t.inVOnce||t.inSSR)return;return Sd.add(e),t.inVOnce=!0,t.helper(Kc),()=>{t.inVOnce=!1;const e=t.currentNode;e.codegenNode&&(e.codegenNode=t.cache(e.codegenNode,!0))}}},Cd=(e,t,n)=>{const{exp:s,arg:o}=e;if(!s)return n.onError(Ca(41,e.loc)),kd();const r=s.loc.source,i=4===s.type?s.content:r,l=n.bindingMetadata[r];if("props"===l||"props-aliased"===l)return kd();if(!i.trim()||!Ra(i))return n.onError(Ca(42,s.loc)),kd();const c=o||ia("modelValue",!0),a=o?ka(o)?`onUpdate:${E(o.content)}`:la(['"onUpdate:" + ',o]):"onUpdate:modelValue";let u;u=la([`${n.isTS?"($event: any)":"$event"} => ((`,s,") = $event)"]);const d=[ra(c,e.exp),ra(a,u)];if(e.modifiers.length&&1===t.tagType){const t=e.modifiers.map((e=>(Na(e)?e:JSON.stringify(e))+": true")).join(", "),n=o?ka(o)?`${o.content}Modifiers`:la([o,' + "Modifiers"']):"modelModifiers";d.push(ra(n,ia(`{ ${t} }`,!1,e.loc,2)))}return kd(d)};function kd(e=[]){return{props:e}}const Td=new WeakSet,wd=(e,t)=>{if(1===e.type){const n=Oa(e,"memo");if(!n||Td.has(e))return;return Td.add(e),()=>{const s=e.codegenNode||t.currentNode.codegenNode;s&&13===s.type&&(1!==e.tagType&&ha(s,t),e.codegenNode=ca(t.helper(Zc),[n.exp,aa(void 0,s),"_cache",String(t.cached++)]))}}};function Nd(e,t={}){const n=t.onError||Sa,s="module"===t.mode;!0===t.prefixIdentifiers?n(Ca(47)):s&&n(Ca(48));t.cacheHandlers&&n(Ca(49)),t.scopeId&&!s&&n(Ca(50));const o=l({},t,{prefixIdentifiers:!1}),r=g(e)?ku(e,o):e,[i,c]=[[xd,Ju,wd,Yu,md,ud,sd,_d],{on:vd,bind:yd,model:Cd}];return Mu(r,l({},o,{nodeTransforms:[...i,...t.nodeTransforms||[]],directiveTransforms:l({},c,t.directiveTransforms||{})})),Uu(r,o)}const Ad=Symbol(""),Ed=Symbol(""),Id=Symbol(""),Rd=Symbol(""),Od=Symbol(""),Fd=Symbol(""),Ld=Symbol(""),Md=Symbol(""),Pd=Symbol(""),$d=Symbol("");var Bd;let Vd;Bd={[Ad]:"vModelRadio",[Ed]:"vModelCheckbox",[Id]:"vModelText",[Rd]:"vModelSelect",[Od]:"vModelDynamic",[Fd]:"withModifiers",[Ld]:"withKeys",[Md]:"vShow",[Pd]:"Transition",[$d]:"TransitionGroup"},Object.getOwnPropertySymbols(Bd).forEach((e=>{ea[e]=Bd[e]}));const Dd={parseMode:"html",isVoidTag:Z,isNativeTag:e=>J(e)||X(e)||Q(e),isPreTag:e=>"pre"===e,decodeEntities:function(e,t=!1){return Vd||(Vd=document.createElement("div")),t?(Vd.innerHTML=`<div foo="${e.replace(/"/g,"&quot;")}">`,Vd.children[0].getAttribute("foo")):(Vd.innerHTML=e,Vd.textContent)},isBuiltInComponent:e=>"Transition"===e||"transition"===e?Pd:"TransitionGroup"===e||"transition-group"===e?$d: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}},Ud=(e,t)=>{const n=K(e);return ia(JSON.stringify(n),!1,t,3)};function jd(e,t){return Ca(e,t)}const Hd=e("passive,once,capture"),qd=e("stop,prevent,self,ctrl,shift,alt,meta,exact,middle"),Wd=e("left,right"),Kd=e("onkeyup,onkeydown,onkeypress",!0),zd=(e,t)=>ka(e)&&"onclick"===e.content.toLowerCase()?ia(t,!0):4!==e.type?la(["(",e,`) === "onClick" ? "${t}" : (`,e,")"]):e,Gd=(e,t)=>{1!==e.type||0!==e.tagType||"script"!==e.tag&&"style"!==e.tag||t.removeNode()},Jd=[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:ia("style",!0,t.loc),exp:Ud(t.value.content,t.loc),modifiers:[],loc:t.loc})}))}],Xd={cloak:()=>({props:[]}),html:(e,t,n)=>{const{exp:s,loc:o}=e;return s||n.onError(jd(53,o)),t.children.length&&(n.onError(jd(54,o)),t.children.length=0),{props:[ra(ia("innerHTML",!0,o),s||ia("",!0))]}},text:(e,t,n)=>{const{exp:s,loc:o}=e;return s||n.onError(jd(55,o)),t.children.length&&(n.onError(jd(56,o)),t.children.length=0),{props:[ra(ia("textContent",!0),s?Au(s,n)>0?s:ca(n.helperString(Pc),[s],o):ia("",!0))]}},model:(e,t,n)=>{const s=Cd(e,t,n);if(!s.props.length||1===t.tagType)return s;e.arg&&n.onError(jd(58,e.arg.loc));const{tag:o}=t,r=n.isCustomElement(o);if("input"===o||"textarea"===o||"select"===o||r){let i=Id,l=!1;if("input"===o||r){const s=Fa(t,"type");if(s){if(7===s.type)i=Od;else if(s.value)switch(s.value.content){case"radio":i=Ad;break;case"checkbox":i=Ed;break;case"file":l=!0,n.onError(jd(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=Od)}else"select"===o&&(i=Rd);l||(s.needRuntime=n.helper(i))}else n.onError(jd(57,e.loc));return s.props=s.props.filter((e=>!(4===e.key.type&&"modelValue"===e.key.content))),s},on:(e,t,n)=>vd(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];Hd(n)?i.push(n):Wd(n)?ka(e)?Kd(e.content)?o.push(n):r.push(n):(o.push(n),r.push(n)):qd(n)?r.push(n):o.push(n)}return{keyModifiers:o,nonKeyModifiers:r,eventOptionModifiers:i}})(o,s);if(l.includes("right")&&(o=zd(o,"onContextmenu")),l.includes("middle")&&(o=zd(o,"onMouseup")),l.length&&(r=ca(n.helper(Fd),[r,JSON.stringify(l)])),!i.length||ka(o)&&!Kd(o.content)||(r=ca(n.helper(Ld),[r,JSON.stringify(i)])),c.length){const e=c.map(O).join("");o=ka(o)?ia(`${o.content}${e}`,!0):la(["(",o,`) + "${e}"`])}return{props:[ra(o,r)]}})),show:(e,t,n)=>{const{exp:s,loc:o}=e;return s||n.onError(jd(61,o)),{props:[],needRuntime:n.helper(Md)}}};const Qd=new WeakMap;function Zd(e,n){if(!g(e)){if(!e.nodeType)return s;e=e.innerHTML}const o=e,r=function(e){let n=Qd.get(null!=e?e:t);return n||(n=Object.create(null),Qd.set(null!=e?e:t,n)),n}(n),i=r[o];if(i)return i;if("#"===e[0]){const t=document.querySelector(e);e=t?t.innerHTML:""}const c=l({hoistStatic:!0,onError:void 0,onWarn:s},n);c.isCustomElement||"undefined"==typeof customElements||(c.isCustomElement=e=>!!customElements.get(e));const{code:a}=function(e,t={}){return Nd(e,l({},Dd,t,{nodeTransforms:[Gd,...Jd,...t.nodeTransforms||[]],directiveTransforms:l({},Xd,t.directiveTransforms||{}),transformHoist:null}))}(e,c),u=new Function("Vue",a)(fc);return u._rc=!0,r[o]=u}fi(Zd);export{_s as BaseTransition,bs as BaseTransitionPropsValidators,wr as Comment,Li as DeprecationTypes,ce as EffectScope,sn as ErrorCodes,Ai as ErrorTypeStrings,kr as Fragment,Os as KeepAlive,he as ReactiveEffect,Nr as Static,Xn as Suspense,xr as Teleport,Tr as Text,en as TrackOpTypes,Ui as Transition,Fl as TransitionGroup,tn as TriggerOpTypes,wl as VueElement,nn as assertNumber,rn as callWithAsyncErrorHandling,on as callWithErrorHandling,E as camelize,O as capitalize,Kr as cloneVNode,Fi as compatUtils,Zd as compile,_i as computed,ac as createApp,Pr as createBlock,Jr as createCommentVNode,Mr as createElementBlock,Hr as createElementVNode,ur as createHydrationRenderer,xo as createPropsRestProxy,ar as createRenderer,uc as createSSRApp,Ys as createSlots,Gr as createStaticVNode,zr as createTextVNode,qr as createVNode,Gt as customRef,Es as defineAsyncComponent,Ns as defineComponent,Cl as defineCustomElement,ao as defineEmits,uo as defineExpose,fo as defineModel,po as defineOptions,co as defineProps,kl as defineSSRCustomElement,ho as defineSlots,Ei as devtools,ye as effect,ae as effectScope,oi as getCurrentInstance,de as getCurrentScope,ws as getTransitionRawChildren,Wr as guardReactiveProps,xi as h,ln as handleError,jo as hasInjectionContext,cc as hydrate,Ci as initCustomFormatter,hc as initDirectivesForSSR,Uo as inject,Ti as isMemoSame,Et as isProxy,wt as isReactive,Nt as isReadonly,$t as isRef,mi as isRuntimeOnly,At as isShallow,$r as isVNode,Rt as markRaw,_o as mergeDefaults,So as mergeModels,Yr as mergeProps,vn as nextTick,z as normalizeClass,G as normalizeProps,j as normalizeStyle,Ls as onActivated,js as onBeforeMount,Ks as onBeforeUnmount,qs as onBeforeUpdate,Ms as onDeactivated,Qs as onErrorCaptured,Hs as onMounted,Xs as onRenderTracked,Js as onRenderTriggered,pe as onScopeDispose,Gs as onServerPrefetch,zs as onUnmounted,Ws as onUpdated,Ir as openBlock,Fn as popScopeId,Do as provide,Kt as proxyRefs,On as pushScopeId,_n as queuePostFlushCb,St as reactive,Ct as readonly,Bt as ref,fi as registerRuntimeCompiler,lc as render,Zs as renderList,eo as renderSlot,jn as resolveComponent,Wn as resolveDirective,qn as resolveDynamicComponent,Oi as resolveFilter,xs as resolveTransitionHooks,Fr as setBlockTracking,Ii as setDevtoolsHook,Ts as setTransitionHooks,xt as shallowReactive,kt as shallowReadonly,Vt as shallowRef,ns as ssrContextKey,Ri as ssrUtils,be as stop,se as toDisplayString,F as toHandlerKey,no as toHandlers,It as toRaw,Zt as toRef,Jt as toRefs,qt as toValue,Vr as transformVNodeArgs,jt as triggerRef,Ht as unref,vo as useAttrs,Nl as useCssModule,ll as useCssVars,Si as useModel,ss as useSSRContext,go as useSlots,vs as useTransitionState,jl as vModelCheckbox,Jl as vModelDynamic,ql as vModelRadio,Wl as vModelSelect,Ul as vModelText,ol as vShow,wi as version,Ni as warn,cs as watch,os as watchEffect,rs as watchPostEffect,is as watchSyncEffect,Co as withAsyncContext,Mn as withCtx,mo as withDefaults,hs as withDirectives,tc as withKeys,ki as withMemo,Yl as withModifiers,Ln as withScopeId};
diff --git a/MyApp/wwwroot/lib/mjs/vue.mjs b/MyApp/wwwroot/lib/mjs/vue.mjs
new file mode 100644
index 0000000..a02c7bc
--- /dev/null
+++ b/MyApp/wwwroot/lib/mjs/vue.mjs
@@ -0,0 +1,16633 @@
+/**
+* vue v3.4.15
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+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 = 2;
+    /**
+     * @internal
+     */
+    this._trackId = 0;
+    /**
+     * @internal
+     */
+    this._runnings = 0;
+    /**
+     * @internal
+     */
+    this._shouldSchedule = false;
+    /**
+     * @internal
+     */
+    this._depsLength = 0;
+    recordEffectScope(this, scope);
+  }
+  get dirty() {
+    if (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 >= 2) {
+            break;
+          }
+        }
+      }
+      if (this._dirtyLevel < 2) {
+        this._dirtyLevel = 0;
+      }
+      resetTracking();
+    }
+    return this._dirtyLevel >= 2;
+  }
+  set dirty(v) {
+    this._dirtyLevel = v ? 2 : 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 && 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()) {
+    if (effect2._dirtyLevel < dirtyLevel && dep.get(effect2) === effect2._trackId) {
+      const lastDirtyLevel = effect2._dirtyLevel;
+      effect2._dirtyLevel = dirtyLevel;
+      if (lastDirtyLevel === 0) {
+        effect2._shouldSchedule = true;
+        {
+          (_a = effect2.onTrigger) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+        }
+        effect2.trigger();
+      }
+    }
+  }
+  scheduleEffects(dep);
+  resetScheduling();
+}
+function scheduleEffects(dep) {
+  for (const effect2 of dep.keys()) {
+    if (effect2.scheduler && effect2._shouldSchedule && (!effect2._runnings || effect2.allowRecurse) && dep.get(effect2) === effect2._trackId) {
+      effect2._shouldSchedule = false;
+      queueEffectSchedulers.push(effect2.scheduler);
+    }
+  }
+}
+
+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,
+        2,
+        {
+          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) {
+  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, 1),
+      () => this.dep && scheduleEffects(this.dep)
+    );
+    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) {
+      if (hasChanged(self._value, self._value = self.effect.run())) {
+        triggerRefValue(self, 2);
+      }
+    }
+    trackRefValue(self);
+    if (self.effect._dirtyLevel >= 1) {
+      triggerRefValue(self, 1);
+    }
+    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) {
+  if (shouldTrack && activeEffect) {
+    ref2 = toRaw(ref2);
+    trackEffect(
+      activeEffect,
+      ref2.dep || (ref2.dep = createDep(
+        () => ref2.dep = void 0,
+        ref2 instanceof ComputedRefImpl ? ref2 : void 0
+      )),
+      {
+        target: ref2,
+        type: "get",
+        key: "value"
+      } 
+    );
+  }
+}
+function triggerRefValue(ref2, dirtyLevel = 2, 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, 2, newVal);
+    }
+  }
+}
+function triggerRef(ref2) {
+  triggerRefValue(ref2, 2, 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 = () => {
+  {
+    const ctx = inject(ssrContextKey);
+    if (!ctx) {
+      warn$1(
+        `Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.`
+      );
+    }
+    return ctx;
+  }
+};
+
+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) {
+        currentApp = app;
+        try {
+          return fn();
+        } finally {
+          currentApp = null;
+        }
+      }
+    };
+    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] !== "$") {
+    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);
+    const isVFor = rawRef.f;
+    if (_isString || _isRef) {
+      const doSet = () => {
+        if (isVFor) {
+          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 (isUnmount || isVFor) {
+        doSet();
+      } else {
+        doSet.id = -1;
+        queuePostRenderEffect(doSet, parentSuspense);
+      }
+    } 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)) {
+              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) {
+  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");
+        }
+      }
+    }
+    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.esm-browser.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.15";
+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)
+      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));
+  };
+  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;
+  }
+}
+
+function patchStyle(el, prev, next) {
+  const style = el.style;
+  const currentDisplay = style.display;
+  const isCssString = isString(next);
+  if (next && !isCssString) {
+    if (prev && !isString(prev)) {
+      for (const key in prev) {
+        if (next[key] == null) {
+          setStyle(style, key, "");
+        }
+      }
+    }
+    for (const key in next) {
+      setStyle(style, key, next[key]);
+    }
+  } else {
+    if (isCssString) {
+      if (prev !== next) {
+        const cssVarText = style[CSS_VAR_TEXT];
+        if (cssVarText) {
+          next += ";" + cssVarText;
+        }
+        style.cssText = next;
+      }
+    } else if (prev) {
+      el.removeAttribute("style");
+    }
+  }
+  if (vShowOldKey in el) {
+    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") {
+  {
+    const instance = getCurrentInstance();
+    if (!instance) {
+      warn(`useCssModule must be called inside setup()`);
+      return EMPTY_OBJ;
+    }
+    const modules = instance.type.__cssModules;
+    if (!modules) {
+      warn(`Current instance does not have CSS modules injected.`);
+      return EMPTY_OBJ;
+    }
+    const mod = modules[name];
+    if (!mod) {
+      warn(`Current instance does not have CSS module named "${name}".`);
+      return EMPTY_OBJ;
+    }
+    return mod;
+  }
+}
+
+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;
+  }
+  if (isArrayValue && looseEqual(value, oldValue)) {
+    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;
+
+var runtimeDom = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  BaseTransition: BaseTransition,
+  BaseTransitionPropsValidators: BaseTransitionPropsValidators,
+  Comment: Comment,
+  DeprecationTypes: DeprecationTypes,
+  EffectScope: EffectScope,
+  ErrorCodes: ErrorCodes,
+  ErrorTypeStrings: ErrorTypeStrings,
+  Fragment: Fragment,
+  KeepAlive: KeepAlive,
+  ReactiveEffect: ReactiveEffect,
+  Static: Static,
+  Suspense: Suspense,
+  Teleport: Teleport,
+  Text: Text,
+  TrackOpTypes: TrackOpTypes,
+  Transition: Transition,
+  TransitionGroup: TransitionGroup,
+  TriggerOpTypes: TriggerOpTypes,
+  VueElement: VueElement,
+  assertNumber: assertNumber,
+  callWithAsyncErrorHandling: callWithAsyncErrorHandling,
+  callWithErrorHandling: callWithErrorHandling,
+  camelize: camelize,
+  capitalize: capitalize,
+  cloneVNode: cloneVNode,
+  compatUtils: compatUtils,
+  computed: computed,
+  createApp: createApp,
+  createBlock: createBlock,
+  createCommentVNode: createCommentVNode,
+  createElementBlock: createElementBlock,
+  createElementVNode: createBaseVNode,
+  createHydrationRenderer: createHydrationRenderer,
+  createPropsRestProxy: createPropsRestProxy,
+  createRenderer: createRenderer,
+  createSSRApp: createSSRApp,
+  createSlots: createSlots,
+  createStaticVNode: createStaticVNode,
+  createTextVNode: createTextVNode,
+  createVNode: createVNode,
+  customRef: customRef,
+  defineAsyncComponent: defineAsyncComponent,
+  defineComponent: defineComponent,
+  defineCustomElement: defineCustomElement,
+  defineEmits: defineEmits,
+  defineExpose: defineExpose,
+  defineModel: defineModel,
+  defineOptions: defineOptions,
+  defineProps: defineProps,
+  defineSSRCustomElement: defineSSRCustomElement,
+  defineSlots: defineSlots,
+  devtools: devtools,
+  effect: effect,
+  effectScope: effectScope,
+  getCurrentInstance: getCurrentInstance,
+  getCurrentScope: getCurrentScope,
+  getTransitionRawChildren: getTransitionRawChildren,
+  guardReactiveProps: guardReactiveProps,
+  h: h,
+  handleError: handleError,
+  hasInjectionContext: hasInjectionContext,
+  hydrate: hydrate,
+  initCustomFormatter: initCustomFormatter,
+  initDirectivesForSSR: initDirectivesForSSR,
+  inject: inject,
+  isMemoSame: isMemoSame,
+  isProxy: isProxy,
+  isReactive: isReactive,
+  isReadonly: isReadonly,
+  isRef: isRef,
+  isRuntimeOnly: isRuntimeOnly,
+  isShallow: isShallow,
+  isVNode: isVNode,
+  markRaw: markRaw,
+  mergeDefaults: mergeDefaults,
+  mergeModels: mergeModels,
+  mergeProps: mergeProps,
+  nextTick: nextTick,
+  normalizeClass: normalizeClass,
+  normalizeProps: normalizeProps,
+  normalizeStyle: normalizeStyle,
+  onActivated: onActivated,
+  onBeforeMount: onBeforeMount,
+  onBeforeUnmount: onBeforeUnmount,
+  onBeforeUpdate: onBeforeUpdate,
+  onDeactivated: onDeactivated,
+  onErrorCaptured: onErrorCaptured,
+  onMounted: onMounted,
+  onRenderTracked: onRenderTracked,
+  onRenderTriggered: onRenderTriggered,
+  onScopeDispose: onScopeDispose,
+  onServerPrefetch: onServerPrefetch,
+  onUnmounted: onUnmounted,
+  onUpdated: onUpdated,
+  openBlock: openBlock,
+  popScopeId: popScopeId,
+  provide: provide,
+  proxyRefs: proxyRefs,
+  pushScopeId: pushScopeId,
+  queuePostFlushCb: queuePostFlushCb,
+  reactive: reactive,
+  readonly: readonly,
+  ref: ref,
+  registerRuntimeCompiler: registerRuntimeCompiler,
+  render: render,
+  renderList: renderList,
+  renderSlot: renderSlot,
+  resolveComponent: resolveComponent,
+  resolveDirective: resolveDirective,
+  resolveDynamicComponent: resolveDynamicComponent,
+  resolveFilter: resolveFilter,
+  resolveTransitionHooks: resolveTransitionHooks,
+  setBlockTracking: setBlockTracking,
+  setDevtoolsHook: setDevtoolsHook,
+  setTransitionHooks: setTransitionHooks,
+  shallowReactive: shallowReactive,
+  shallowReadonly: shallowReadonly,
+  shallowRef: shallowRef,
+  ssrContextKey: ssrContextKey,
+  ssrUtils: ssrUtils,
+  stop: stop,
+  toDisplayString: toDisplayString,
+  toHandlerKey: toHandlerKey,
+  toHandlers: toHandlers,
+  toRaw: toRaw,
+  toRef: toRef,
+  toRefs: toRefs,
+  toValue: toValue,
+  transformVNodeArgs: transformVNodeArgs,
+  triggerRef: triggerRef,
+  unref: unref,
+  useAttrs: useAttrs,
+  useCssModule: useCssModule,
+  useCssVars: useCssVars,
+  useModel: useModel,
+  useSSRContext: useSSRContext,
+  useSlots: useSlots,
+  useTransitionState: useTransitionState,
+  vModelCheckbox: vModelCheckbox,
+  vModelDynamic: vModelDynamic,
+  vModelRadio: vModelRadio,
+  vModelSelect: vModelSelect,
+  vModelText: vModelText,
+  vShow: vShow,
+  version: version,
+  warn: warn,
+  watch: watch,
+  watchEffect: watchEffect,
+  watchPostEffect: watchPostEffect,
+  watchSyncEffect: watchSyncEffect,
+  withAsyncContext: withAsyncContext,
+  withCtx: withCtx,
+  withDefaults: withDefaults,
+  withDirectives: withDirectives,
+  withKeys: withKeys,
+  withMemo: withMemo,
+  withModifiers: withModifiers,
+  withScopeId: withScopeId
+});
+
+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.`,
+  [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
+  [52]: ``
+};
+
+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 isSetupInlined = false;
+  const preambleContext = isSetupInlined ? createCodegenContext(ast, options) : 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: isSetupInlined ? preambleContext.code : ``,
+    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.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 && arg.type === 4) {
+    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, "^");
+    }
+  }
+  if (!exp || exp.type === 4 && !exp.content.trim()) {
+    context.onError(createCompilerError(34, loc));
+    return {
+      props: [createObjectProperty(arg, createSimpleExpression("", true, loc))]
+    };
+  }
+  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("Vue", code)(runtimeDom);
+  render._rc = true;
+  return cache[key] = render;
+}
+registerRuntimeCompiler(compileToFunction);
+
+export { BaseTransition, BaseTransitionPropsValidators, Comment, DeprecationTypes, EffectScope, ErrorCodes, ErrorTypeStrings, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, TrackOpTypes, Transition, TransitionGroup, TriggerOpTypes, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compileToFunction as compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useModel, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId };
diff --git a/MyApp/wwwroot/mjs/app.mjs b/MyApp/wwwroot/mjs/app.mjs
new file mode 100644
index 0000000..1b05f1a
--- /dev/null
+++ b/MyApp/wwwroot/mjs/app.mjs
@@ -0,0 +1,204 @@
+import { createApp, reactive, ref, computed } from "vue"
+import { JsonServiceClient, $1, $$ } from "@servicestack/client"
+import ServiceStackVue from "@servicestack/vue"
+import GettingStarted from "./components/GettingStarted.mjs"
+
+let client = null, Apps = []
+let AppData = {
+    init:false
+}
+export { client, Apps }
+
+/** Shared Global Components */
+const Components = {
+    GettingStarted,
+}
+const CustomElements = [
+    'lite-youtube'
+]
+
+const alreadyMounted = el => el.__vue_app__ 
+
+const mockArgs = { attrs:{}, slots:{}, emit:() => {}, expose: () => {} }
+function hasTemplate(el,component) {
+    return !!(el.firstElementChild
+        || component.template
+        || (component.setup && typeof component.setup({}, mockArgs) == 'function'))
+}
+
+/** Mount Vue3 Component
+ * @param sel {string|Element} - Element or Selector where component should be mounted
+ * @param component 
+ * @param [props] {any} */
+export function mount(sel, component, props) {
+    if (!AppData.init) {
+        init(globalThis)
+    }
+    const el = $1(sel)
+    if (alreadyMounted(el)) return
+
+    if (!hasTemplate(el, component)) {
+        // Fallback for enhanced navigation clearing HTML DOM template of Vue App, requiring a force reload
+        // Avoid by disabling enhanced navigation to page, e.g. by adding data-enhance-nav="false" to element
+        console.warn('Vue Compontent template is missing, force reloading...', el, component)
+        blazorRefresh()
+        return
+    }
+
+    const app = createApp(component, props)
+    app.provide('client', client)
+    Object.keys(Components).forEach(name => {
+        app.component(name, Components[name])
+    })
+    app.use(ServiceStackVue)
+    app.component('RouterLink', ServiceStackVue.component('RouterLink'))
+    app.directive('hash', (el, binding) => {
+        /** @param {Event} e */
+        el.onclick = (e) => {
+            e.preventDefault()
+            location.hash = binding.value
+        }
+    })
+    if (component.install) {
+        component.install(app)
+    }
+    if (client && !app._context.provides.client) {
+        app.provide('client', client)
+    }
+    app.config.errorHandler = error => { console.log(error) }
+    app.config.compilerOptions.isCustomElement = tag => CustomElements.includes(tag)
+    app.mount(el)
+    Apps.push(app)
+    return app
+}
+
+async function mountApp(el, props) {
+    let appPath = el.getAttribute('data-component')
+    if (!appPath.startsWith('/') && !appPath.startsWith('.')) {
+        appPath = `../${appPath}`
+    }
+
+    const module = await import(appPath)
+    unmount(el)
+    mount(el, module.default, props)
+}
+
+export async function remount() {
+    if (!AppData.init) {
+        init({ force: true })
+    } else {
+        mountAll({ force: true })
+    }
+}
+
+//Default Vue App that gets created with [data-component] is empty, e.g. Blog Posts without Vue components
+const DefaultApp = {
+    setup() {
+        function nav(url) {
+            window.open(url)
+        }
+        return { nav }
+    }
+}
+
+function blazorRefresh() {
+    if (globalThis.Blazor)
+        globalThis.Blazor.navigateTo(location.pathname.substring(1), true)
+    else
+        globalThis.location.reload()
+}
+
+export function mountAll(opt) {
+    $$('[data-component]').forEach(el => {
+
+        if (opt && opt.force) {
+            unmount(el)
+        } else {
+            if (alreadyMounted(el)) return
+        }
+
+        let componentName = el.getAttribute('data-component')
+        let propsStr = el.getAttribute('data-props')
+        let props = propsStr && new Function(`return (${propsStr})`)() || {}
+
+        if (!componentName) {
+            mount(el, DefaultApp, props)
+            return
+        }
+
+        if (componentName.includes('.')) {
+            mountApp(el, props)
+            return
+        }
+
+        let component = Components[componentName] || ServiceStackVue.component(componentName)
+        if (!component) {
+            console.error(`Component ${componentName} does not exist`)
+            return
+        }
+
+        mount(el, component, props)
+    })
+    $$('[data-module]').forEach(async el => {
+        let modulePath = el.getAttribute('data-module')
+        if (!modulePath) return
+        if (!modulePath.startsWith('/') && !modulePath.startsWith('.')) {
+            modulePath = `../${modulePath}`
+        }
+        try {
+            const module = await import(modulePath)
+            if (typeof module.default?.load == 'function') {
+                module.default.load()
+            }
+        } catch(e) {
+            console.error(`Couldn't load module ${el.getAttribute('data-module')}`, e)
+        }
+    })
+}
+
+/** @param {any} [exports] */
+export function init(opt) {
+    if (AppData.init) return
+    client = new JsonServiceClient()
+    AppData = reactive(AppData)
+    AppData.init = true
+    mountAll(opt)
+
+    if (opt && opt.exports) {
+        opt.exports.client = client
+        opt.exports.Apps = Apps
+    }
+}
+
+function unmount(el) {
+    if (!el) return
+
+    try {
+        if (el.__vue_app__) {
+            el.__vue_app__.unmount(el)
+        }
+    } catch (e) {
+        console.log('force unmount', el.id)
+        el._vnode = el.__vue_app__ = undefined
+    }
+}
+
+
+/* used in :::sh and :::nuget CopyContainerRenderer */
+globalThis.copy = function (e) {
+    e.classList.add('copying')
+    let $el = document.createElement("textarea")
+    let text = (e.querySelector('code') || e.querySelector('p')).innerHTML
+    $el.innerHTML = text
+    document.body.appendChild($el)
+    $el.select()
+    document.execCommand("copy")
+    document.body.removeChild($el)
+    setTimeout(() => e.classList.remove('copying'), 3000)
+}
+
+document.addEventListener('DOMContentLoaded', () =>
+    Blazor.addEventListener('enhancedload', () => {
+        remount()
+        globalThis.hljs?.highlightAll()
+    }))
diff --git a/MyApp/wwwroot/mjs/components/GettingStarted.mjs b/MyApp/wwwroot/mjs/components/GettingStarted.mjs
new file mode 100644
index 0000000..c833784
--- /dev/null
+++ b/MyApp/wwwroot/mjs/components/GettingStarted.mjs
@@ -0,0 +1,95 @@
+import { ref, computed } from "vue"
+import ShellCommand from "./ShellCommand.mjs"
+
+export default {
+    components: {
+        ShellCommand,
+    },
+    template:/*html*/`
+    <div class="flex flex-col w-96">
+        <h4 class="py-6 text-center text-xl">Create New Project</h4>
+
+      <input type="text" v-model="project" autocomplete="off" spellcheck="false" @keydown="validateSafeName"
+             class="mb-8 sm:text-lg rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:bg-gray-800"/>
+
+        <section class="w-full flex justify-center text-center">
+           <div class="mb-2">
+              <div class="flex justify-center text-center">
+                 <a class="archive-url hover:no-underline netcoretemplates_empty" :href="zipUrl('NetCoreTemplates/blazor')">
+                    <div class="bg-white dark:bg-gray-800 px-4 py-4 mr-4 mb-4 rounded-lg shadow-lg text-center items-center justify-center hover:shadow-2xl dark:border-2 dark:border-pink-600 dark:hover:border-blue-600" style="min-width:150px">
+                       <div class="text-center font-extrabold flex items-center justify-center mb-2">
+                          <div class="text-4xl text-blue-400 my-3">
+                             <svg class="w-14 h-14 text-purple-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M23.834 8.101a13.912 13.912 0 0 1-13.643 11.72a10.105 10.105 0 0 1-1.994-.12a6.111 6.111 0 0 1-5.082-5.761a5.934 5.934 0 0 1 11.867-.084c.025.983-.401 1.846-1.277 1.871c-.936 0-1.374-.668-1.374-1.567v-2.5a1.531 1.531 0 0 0-1.52-1.533H8.715a3.648 3.648 0 1 0 2.695 6.08l.073-.11l.074.121a2.58 2.58 0 0 0 2.2 1.048a2.909 2.909 0 0 0 2.695-3.04a7.912 7.912 0 0 0-.217-1.933a7.404 7.404 0 0 0-14.64 1.603a7.497 7.497 0 0 0 7.308 7.405s.549.05 1.167.035a15.803 15.803 0 0 0 8.475-2.528c.036-.025.072.025.048.061a12.44 12.44 0 0 1-9.69 3.963a8.744 8.744 0 0 1-8.9-8.972a9.049 9.049 0 0 1 3.635-7.247a8.863 8.863 0 0 1 5.229-1.726h2.813a7.915 7.915 0 0 0 5.839-2.578a.11.11 0 0 1 .059-.034a.112.112 0 0 1 .12.053a.113.113 0 0 1 .015.067a7.934 7.934 0 0 1-1.227 3.549a.107.107 0 0 0-.014.06a.11.11 0 0 0 .073.095a.109.109 0 0 0 .062.004a8.505 8.505 0 0 0 5.913-4.876a.155.155 0 0 1 .055-.053a.15.15 0 0 1 .147 0a.153.153 0 0 1 .054.053A10.779 10.779 0 0 1 23.834 8.1zM8.895 11.628a2.188 2.188 0 1 0 2.188 2.188v-2.042a.158.158 0 0 0-.15-.15Z"/></svg>
+                          </div>
+                       </div>
+                       <div class="text-xl font-medium text-gray-700">Blazor</div>
+                       <div class="flex justify-center h-8"></div>
+                       <span class="archive-name px-4 pb-2 text-blue-600 dark:text-indigo-400">{{ projectZip }}</span>
+                       <div class="count mt-1 text-gray-400 text-sm"></div>
+                    </div>
+                 </a>
+              </div>
+           </div>
+           <div class="mb-2">
+              <div class="flex justify-center text-center">
+                 <a class="archive-url hover:no-underline netcoretemplates_empty" :href="zipUrl('NetCoreTemplates/blazor-vue')">
+                    <div class="bg-white dark:bg-gray-800 px-4 py-4 mr-4 mb-4 rounded-lg shadow-lg text-center items-center justify-center hover:shadow-2xl dark:border-2 dark:border-pink-600 dark:hover:border-blue-600" style="min-width:150px">
+                       <div class="text-center font-extrabold flex items-center justify-center mb-2">
+                          <div class="text-4xl text-blue-400 my-3">
+                             <svg class="w-14 h-14 text-purple-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M23.834 8.101a13.912 13.912 0 0 1-13.643 11.72a10.105 10.105 0 0 1-1.994-.12a6.111 6.111 0 0 1-5.082-5.761a5.934 5.934 0 0 1 11.867-.084c.025.983-.401 1.846-1.277 1.871c-.936 0-1.374-.668-1.374-1.567v-2.5a1.531 1.531 0 0 0-1.52-1.533H8.715a3.648 3.648 0 1 0 2.695 6.08l.073-.11l.074.121a2.58 2.58 0 0 0 2.2 1.048a2.909 2.909 0 0 0 2.695-3.04a7.912 7.912 0 0 0-.217-1.933a7.404 7.404 0 0 0-14.64 1.603a7.497 7.497 0 0 0 7.308 7.405s.549.05 1.167.035a15.803 15.803 0 0 0 8.475-2.528c.036-.025.072.025.048.061a12.44 12.44 0 0 1-9.69 3.963a8.744 8.744 0 0 1-8.9-8.972a9.049 9.049 0 0 1 3.635-7.247a8.863 8.863 0 0 1 5.229-1.726h2.813a7.915 7.915 0 0 0 5.839-2.578a.11.11 0 0 1 .059-.034a.112.112 0 0 1 .12.053a.113.113 0 0 1 .015.067a7.934 7.934 0 0 1-1.227 3.549a.107.107 0 0 0-.014.06a.11.11 0 0 0 .073.095a.109.109 0 0 0 .062.004a8.505 8.505 0 0 0 5.913-4.876a.155.155 0 0 1 .055-.053a.15.15 0 0 1 .147 0a.153.153 0 0 1 .054.053A10.779 10.779 0 0 1 23.834 8.1zM8.895 11.628a2.188 2.188 0 1 0 2.188 2.188v-2.042a.158.158 0 0 0-.15-.15Z"/></svg>
+                          </div>
+                       </div>
+                       <div class="text-xl font-medium text-gray-700">Blazor Vue</div>
+                       <div class="flex justify-center h-8"></div>
+                       <span class="archive-name px-4 pb-2 text-blue-600 dark:text-indigo-400">{{ projectZip }}</span>
+                       <div class="count mt-1 text-gray-400 text-sm"></div>
+                    </div>
+                 </a>
+              </div>
+           </div>
+        </section>
+
+      <ShellCommand class="mb-2">dotnet tool install -g x</ShellCommand>
+      <ShellCommand class="mb-2">x new {{template}} {{project}}</ShellCommand>
+
+      <h4 class="py-6 text-center text-xl">In <span class="font-semibold text-indigo-700">/MyApp</span>, Run Tailwind</h4>
+      <ShellCommand class="mb-2">npm run ui:dev</ShellCommand>
+
+      <h4 class="py-6 text-center text-xl">Run .NET Project (New Terminal)</h4>
+      <ShellCommand class="mb-2">dotnet watch</ShellCommand>
+
+    </div>`,
+    props: { template:String },
+    setup(props) {
+        const project = ref('ProjectName')
+
+        const projectZip = computed(() => (project.value || 'MyApp') + '.zip')
+
+        /** @param {string} template */
+        const zipUrl = (template) =>
+            `https://account.servicestack.net/archive/${template}?Name=${project.value || 'MyApp'}`
+
+        /** @param {KeyboardEvent} e */
+        const isAlphaNumeric = (e) => {
+            const c = e.charCode;
+            if (c >= 65 && c <= 90 || c >= 97 && c <= 122 || c >= 48 && c <= 57 || c === 95) //A-Za-z0-9_
+                return;
+            e.preventDefault()
+        }
+
+        /** @param path {string}
+          * @returns {string} */
+        const resolvePath = (path) => navigator.userAgent.indexOf("Win") >= 0 ? path.replace(/\//g,'\\') : path
+        const uiPath = () => resolvePath(`ui`)
+        const apiPath = () => resolvePath(`api/${project.value}`)
+
+        /** @param e {KeyboardEvent} */
+        function validateSafeName(e) {
+            if (e.key.match(/[\W]+/g)) {
+                e.preventDefault()
+                return false
+            }
+        }
+        return { project, projectZip, zipUrl, isAlphaNumeric, uiPath, apiPath, validateSafeName }
+    }
+}
\ No newline at end of file
diff --git a/MyApp/wwwroot/mjs/components/ShellCommand.mjs b/MyApp/wwwroot/mjs/components/ShellCommand.mjs
new file mode 100644
index 0000000..da2a4d6
--- /dev/null
+++ b/MyApp/wwwroot/mjs/components/ShellCommand.mjs
@@ -0,0 +1,57 @@
+import { ref } from "vue"
+import { map } from "@servicestack/client"
+
+export default {
+    template:`<div class="lang relative bg-gray-700 text-gray-300 pl-5 py-3 sm:rounded flex">
+    <div class="flex ml-2 w-full justify-between cursor-pointer" @click="copy">
+      <div>
+          <span>$ </span>
+          <label class="cursor-pointer">
+            <slot>{{text}}</slot>
+          </label>
+      </div>
+      <small class="text-xs text-gray-400 px-3 -mt-1">sh</small>
+    </div>
+
+    <div v-if="successText" class="absolute right-0 -mr-28 -mt-3 rounded-md bg-green-50 p-3">
+        <div class="flex">
+            <div class="flex-shrink-0">
+                <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+                </svg>
+            </div>
+            <div class="ml-3">
+                <p class="text-sm font-medium text-green-800">
+                    {{ successText }}
+                </p>
+            </div>
+        </div>
+    </div>
+
+  </div>`,
+    props:['text'],
+    setup(props) {
+        let successText = ref('')
+        /** @param {MouseEvent} e */
+        function copy(e) {
+            let $el = document.createElement("input")
+            let $lbl = e.target.parentElement.querySelector('label')
+            $el.setAttribute("value", $lbl.innerText)
+            document.body.appendChild($el)
+            $el.select()
+            document.execCommand("copy")
+            document.body.removeChild($el)
+            if (typeof window.getSelection == "function") {
+                const range = document.createRange()
+                range.selectNodeContents($lbl)
+                map(window.getSelection(), sel => {
+                    sel.removeAllRanges()
+                    sel.addRange(range)
+                })
+            }
+            successText.value = 'copied'
+            setTimeout(() => successText.value = '', 3000)
+        }
+        return { successText, copy }
+    }
+}
diff --git a/MyApp/wwwroot/mjs/dtos.mjs b/MyApp/wwwroot/mjs/dtos.mjs
new file mode 100644
index 0000000..fd8b524
--- /dev/null
+++ b/MyApp/wwwroot/mjs/dtos.mjs
@@ -0,0 +1,413 @@
+/* Options:
+Date: 2024-03-01 03:34:06
+Version: 8.13
+Tip: To override a DTO option, remove "//" prefix before updating
+BaseUrl: https://localhost:5001
+
+//AddServiceStackTypes: True
+//AddDocAnnotations: True
+//AddDescriptionAsComments: True
+//IncludeTypes: 
+//ExcludeTypes: 
+//DefaultImports: 
+*/
+
+"use strict";
+export class QueryBase {
+    /** @param {{skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {?number} */
+    skip;
+    /** @type {?number} */
+    take;
+    /** @type {string} */
+    orderBy;
+    /** @type {string} */
+    orderByDesc;
+    /** @type {string} */
+    include;
+    /** @type {string} */
+    fields;
+    /** @type {{ [index: string]: string; }} */
+    meta;
+}
+/** @typedef T {any} */
+export class QueryDb extends QueryBase {
+    /** @param {{skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; },skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
+    constructor(init) { super(init); Object.assign(this, init) }
+    /** @type {?number} */
+    skip;
+    /** @type {?number} */
+    take;
+    /** @type {string} */
+    orderBy;
+    /** @type {string} */
+    orderByDesc;
+    /** @type {string} */
+    include;
+    /** @type {string} */
+    fields;
+    /** @type {{ [index: string]: string; }} */
+    meta;
+}
+export class AuditBase {
+    /** @param {{createdDate?:string,createdBy?:string,modifiedDate?:string,modifiedBy?:string,deletedDate?:string,deletedBy?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    createdDate;
+    /** @type {string} */
+    createdBy;
+    /** @type {string} */
+    modifiedDate;
+    /** @type {string} */
+    modifiedBy;
+    /** @type {?string} */
+    deletedDate;
+    /** @type {string} */
+    deletedBy;
+}
+/** @typedef {'Single'|'Double'|'Queen'|'Twin'|'Suite'} */
+export var RoomType;
+(function (RoomType) {
+    RoomType["Single"] = "Single"
+    RoomType["Double"] = "Double"
+    RoomType["Queen"] = "Queen"
+    RoomType["Twin"] = "Twin"
+    RoomType["Suite"] = "Suite"
+})(RoomType || (RoomType = {}));
+export class Coupon {
+    /** @param {{id?:string,description?:string,discount?:number,expiryDate?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    id;
+    /** @type {string} */
+    description;
+    /** @type {number} */
+    discount;
+    /** @type {string} */
+    expiryDate;
+}
+export class Booking extends AuditBase {
+    /** @param {{id?:number,name?:string,roomType?:RoomType,roomNumber?:number,bookingStartDate?:string,bookingEndDate?:string,cost?:number,couponId?:string,discount?:Coupon,notes?:string,cancelled?:boolean,createdDate?:string,createdBy?:string,modifiedDate?:string,modifiedBy?:string,deletedDate?:string,deletedBy?:string,createdDate?:string,createdBy?:string,modifiedDate?:string,modifiedBy?:string,deletedDate?:string,deletedBy?:string}} [init] */
+    constructor(init) { super(init); Object.assign(this, init) }
+    /** @type {number} */
+    id;
+    /** @type {string} */
+    name;
+    /** @type {RoomType} */
+    roomType;
+    /** @type {number} */
+    roomNumber;
+    /** @type {string} */
+    bookingStartDate;
+    /** @type {?string} */
+    bookingEndDate;
+    /** @type {number} */
+    cost;
+    /** @type {?string} */
+    couponId;
+    /** @type {Coupon} */
+    discount;
+    /** @type {?string} */
+    notes;
+    /** @type {?boolean} */
+    cancelled;
+    /** @type {string} */
+    createdDate;
+    /** @type {string} */
+    createdBy;
+    /** @type {string} */
+    modifiedDate;
+    /** @type {string} */
+    modifiedBy;
+    /** @type {?string} */
+    deletedDate;
+    /** @type {string} */
+    deletedBy;
+}
+export class PageStats {
+    /** @param {{label?:string,total?:number}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    label;
+    /** @type {number} */
+    total;
+}
+export class ResponseError {
+    /** @param {{errorCode?:string,fieldName?:string,message?:string,meta?:{ [index: string]: string; }}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    errorCode;
+    /** @type {string} */
+    fieldName;
+    /** @type {string} */
+    message;
+    /** @type {{ [index: string]: string; }} */
+    meta;
+}
+export class ResponseStatus {
+    /** @param {{errorCode?:string,message?:string,stackTrace?:string,errors?:ResponseError[],meta?:{ [index: string]: string; }}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    errorCode;
+    /** @type {string} */
+    message;
+    /** @type {string} */
+    stackTrace;
+    /** @type {ResponseError[]} */
+    errors;
+    /** @type {{ [index: string]: string; }} */
+    meta;
+}
+export class HelloResponse {
+    /** @param {{result?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    result;
+}
+export class AdminDataResponse {
+    /** @param {{pageStats?:PageStats[]}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {PageStats[]} */
+    pageStats;
+}
+export class AuthenticateResponse {
+    /** @param {{userId?:string,sessionId?:string,userName?:string,displayName?:string,referrerUrl?:string,bearerToken?:string,refreshToken?:string,refreshTokenExpiry?:string,profileUrl?:string,roles?:string[],permissions?:string[],responseStatus?:ResponseStatus,meta?:{ [index: string]: string; }}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    userId;
+    /** @type {string} */
+    sessionId;
+    /** @type {string} */
+    userName;
+    /** @type {string} */
+    displayName;
+    /** @type {string} */
+    referrerUrl;
+    /** @type {string} */
+    bearerToken;
+    /** @type {string} */
+    refreshToken;
+    /** @type {?string} */
+    refreshTokenExpiry;
+    /** @type {string} */
+    profileUrl;
+    /** @type {string[]} */
+    roles;
+    /** @type {string[]} */
+    permissions;
+    /** @type {ResponseStatus} */
+    responseStatus;
+    /** @type {{ [index: string]: string; }} */
+    meta;
+}
+/** @typedef T {any} */
+export class QueryResponse {
+    /** @param {{offset?:number,total?:number,results?:T[],meta?:{ [index: string]: string; },responseStatus?:ResponseStatus}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {number} */
+    offset;
+    /** @type {number} */
+    total;
+    /** @type {T[]} */
+    results;
+    /** @type {{ [index: string]: string; }} */
+    meta;
+    /** @type {ResponseStatus} */
+    responseStatus;
+}
+export class IdResponse {
+    /** @param {{id?:string,responseStatus?:ResponseStatus}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    id;
+    /** @type {ResponseStatus} */
+    responseStatus;
+}
+export class Hello {
+    /** @param {{name?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {?string} */
+    name;
+    getTypeName() { return 'Hello' }
+    getMethod() { return 'GET' }
+    createResponse() { return new HelloResponse() }
+}
+export class AdminData {
+    constructor(init) { Object.assign(this, init) }
+    getTypeName() { return 'AdminData' }
+    getMethod() { return 'GET' }
+    createResponse() { return new AdminDataResponse() }
+}
+export class Authenticate {
+    /** @param {{provider?:string,userName?:string,password?:string,rememberMe?:boolean,accessToken?:string,accessTokenSecret?:string,returnUrl?:string,errorView?:string,meta?:{ [index: string]: string; }}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /**
+     * @type {string}
+     * @description AuthProvider, e.g. credentials */
+    provider;
+    /** @type {string} */
+    userName;
+    /** @type {string} */
+    password;
+    /** @type {?boolean} */
+    rememberMe;
+    /** @type {string} */
+    accessToken;
+    /** @type {string} */
+    accessTokenSecret;
+    /** @type {string} */
+    returnUrl;
+    /** @type {string} */
+    errorView;
+    /** @type {{ [index: string]: string; }} */
+    meta;
+    getTypeName() { return 'Authenticate' }
+    getMethod() { return 'POST' }
+    createResponse() { return new AuthenticateResponse() }
+}
+export class QueryBookings extends QueryDb {
+    /** @param {{id?:number,skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; },skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; },skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
+    constructor(init) { super(init); Object.assign(this, init) }
+    /** @type {?number} */
+    id;
+    /** @type {?number} */
+    skip;
+    /** @type {?number} */
+    take;
+    /** @type {string} */
+    orderBy;
+    /** @type {string} */
+    orderByDesc;
+    /** @type {string} */
+    include;
+    /** @type {string} */
+    fields;
+    /** @type {{ [index: string]: string; }} */
+    meta;
+    getTypeName() { return 'QueryBookings' }
+    getMethod() { return 'GET' }
+    createResponse() { return new QueryResponse() }
+}
+export class QueryCoupons extends QueryDb {
+    /** @param {{id?:string,skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; },skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; },skip?:number,take?:number,orderBy?:string,orderByDesc?:string,include?:string,fields?:string,meta?:{ [index: string]: string; }}} [init] */
+    constructor(init) { super(init); Object.assign(this, init) }
+    /** @type {string} */
+    id;
+    /** @type {?number} */
+    skip;
+    /** @type {?number} */
+    take;
+    /** @type {string} */
+    orderBy;
+    /** @type {string} */
+    orderByDesc;
+    /** @type {string} */
+    include;
+    /** @type {string} */
+    fields;
+    /** @type {{ [index: string]: string; }} */
+    meta;
+    getTypeName() { return 'QueryCoupons' }
+    getMethod() { return 'GET' }
+    createResponse() { return new QueryResponse() }
+}
+export class CreateBooking {
+    /** @param {{name?:string,roomType?:RoomType,roomNumber?:number,cost?:number,bookingStartDate?:string,bookingEndDate?:string,notes?:string,couponId?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /**
+     * @type {string}
+     * @description Name this Booking is for */
+    name;
+    /** @type {RoomType} */
+    roomType;
+    /** @type {number} */
+    roomNumber;
+    /** @type {number} */
+    cost;
+    /** @type {string} */
+    bookingStartDate;
+    /** @type {?string} */
+    bookingEndDate;
+    /** @type {?string} */
+    notes;
+    /** @type {?string} */
+    couponId;
+    getTypeName() { return 'CreateBooking' }
+    getMethod() { return 'POST' }
+    createResponse() { return new IdResponse() }
+}
+export class UpdateBooking {
+    /** @param {{id?:number,name?:string,roomType?:RoomType,roomNumber?:number,cost?:number,bookingStartDate?:string,bookingEndDate?:string,notes?:string,couponId?:string,cancelled?:boolean}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {number} */
+    id;
+    /** @type {?string} */
+    name;
+    /** @type {?RoomType} */
+    roomType;
+    /** @type {?number} */
+    roomNumber;
+    /** @type {?number} */
+    cost;
+    /** @type {?string} */
+    bookingStartDate;
+    /** @type {?string} */
+    bookingEndDate;
+    /** @type {?string} */
+    notes;
+    /** @type {?string} */
+    couponId;
+    /** @type {?boolean} */
+    cancelled;
+    getTypeName() { return 'UpdateBooking' }
+    getMethod() { return 'PATCH' }
+    createResponse() { return new IdResponse() }
+}
+export class DeleteBooking {
+    /** @param {{id?:number}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {number} */
+    id;
+    getTypeName() { return 'DeleteBooking' }
+    getMethod() { return 'DELETE' }
+    createResponse() { }
+}
+export class CreateCoupon {
+    /** @param {{description?:string,discount?:number,expiryDate?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    description;
+    /** @type {number} */
+    discount;
+    /** @type {string} */
+    expiryDate;
+    getTypeName() { return 'CreateCoupon' }
+    getMethod() { return 'POST' }
+    createResponse() { return new IdResponse() }
+}
+export class UpdateCoupon {
+    /** @param {{id?:string,description?:string,discount?:number,expiryDate?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    id;
+    /** @type {string} */
+    description;
+    /** @type {number} */
+    discount;
+    /** @type {string} */
+    expiryDate;
+    getTypeName() { return 'UpdateCoupon' }
+    getMethod() { return 'PATCH' }
+    createResponse() { return new IdResponse() }
+}
+export class DeleteCoupon {
+    /** @param {{id?:string}} [init] */
+    constructor(init) { Object.assign(this, init) }
+    /** @type {string} */
+    id;
+    getTypeName() { return 'DeleteCoupon' }
+    getMethod() { return 'DELETE' }
+    createResponse() { }
+}
+
diff --git a/MyApp/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs b/MyApp/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs
new file mode 100644
index 0000000..89d53c4
--- /dev/null
+++ b/MyApp/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs
@@ -0,0 +1,9 @@
+import { addScript, $1 } from "@servicestack/client"
+const loadJs = addScript('lib/js/qrcode.min.js')
+
+export default {
+    async load() {
+        await loadJs
+        new QRCode($1("#qrCode"), $1('#qrCodeData').dataset.url)
+    }
+}
diff --git a/MyApp/wwwroot/pages/Bookings.mjs b/MyApp/wwwroot/pages/Bookings.mjs
new file mode 100644
index 0000000..790fb0f
--- /dev/null
+++ b/MyApp/wwwroot/pages/Bookings.mjs
@@ -0,0 +1,59 @@
+import { ref } from "vue"
+import { useClient, useFormatters } from "@servicestack/vue"
+import { QueryCoupons } from "/mjs/dtos.mjs"
+
+export default {
+  template:/*html*/`
+    <auto-query-grid type="Booking" :visible-from="{ name:'xl', bookingStartDate:'sm', bookingEndDate:'xl', createdBy:'2xl' }">
+        <template #id="{ id }">
+            <span class="text-gray-900" v-html="id"></span>
+        </template>
+
+        <template #name="{ name }">{{name}}</template>
+
+        <template #roomNumber-header>
+            <span class="hidden lg:inline">Room </span>No
+        </template>
+
+        <template #cost="{ cost }">
+            <span v-html="currency(cost)"></span>
+        </template>
+
+        <template #bookingStartDate-header>
+            Start<span class="hidden lg:inline"> Date</span>
+        </template>
+
+        <template #bookingEndDate-header>
+            End<span class="hidden lg:inline"> Date</span>
+        </template>
+
+        <template #createdBy-header>
+            Employee
+        </template>
+
+        <template #createdBy="{ createdBy }" v-html="createdBy"></template>
+
+        <template #discount="{ discount }">
+            <text-link v-if="discount" class="flex items-end" @click.stop="showCoupon(discount.id)" :title="discount.id">
+                <icon class="w-5 h-5 mr-1" type="Coupon"></icon>
+                <preview-format :value="discount.description"></preview-format>
+            </text-link>
+        </template>
+    </auto-query-grid>
+    <auto-edit-form v-if="coupon" type="UpdateCoupon" v-model="coupon" v-on:done="close" v-on:save="close"></auto-edit-form>
+  `,
+  props: { bookings:Array },
+    setup() {
+        const client = useClient()
+        const coupon = ref()
+        const { currency } = useFormatters()
+        async function showCoupon(id) {
+            const api = await client.api(new QueryCoupons({ id }))
+            if (api.succeeded) {
+                coupon.value = api.response.results[0]
+            }
+        }
+        const close = () => coupon.value = null
+        return { coupon, showCoupon, close, currency }
+    }
+}
diff --git a/MyApp/wwwroot/pages/Counter.mjs b/MyApp/wwwroot/pages/Counter.mjs
new file mode 100644
index 0000000..0d60025
--- /dev/null
+++ b/MyApp/wwwroot/pages/Counter.mjs
@@ -0,0 +1,15 @@
+import { ref } from 'vue'
+
+export default {
+    template: `
+        <p class="my-4">Current count: {{currentCount}}</p>
+
+        <PrimaryButton @click="incrementCount">Click me</PrimaryButton>
+    `,
+    setup() {
+        const currentCount = ref(0)
+        const incrementCount = () => currentCount.value++
+
+        return { currentCount, incrementCount }
+    }
+}
diff --git a/MyApp/wwwroot/posts/components/ChartJs.mjs b/MyApp/wwwroot/posts/components/ChartJs.mjs
new file mode 100644
index 0000000..a0c5a28
--- /dev/null
+++ b/MyApp/wwwroot/posts/components/ChartJs.mjs
@@ -0,0 +1,29 @@
+import { ref, onMounted } from "vue"
+import { addScript } from "@servicestack/client"
+
+const loadJs = addScript('https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js')
+
+export default {
+    template:`<div><canvas ref="chart"></canvas></div>`,
+    props:['type','data','options'],
+    setup(props) {
+        const chart = ref()
+        onMounted(async () => {
+            await loadJs
+
+            const options = props.options || {
+                responsive: true,
+                legend: {
+                    position: "top"
+                }
+            }
+            new Chart(chart.value, {
+                type: props.type || "bar",
+                data: props.data,
+                options,
+            })
+
+        })
+        return { chart }
+    }
+}
diff --git a/MyApp/wwwroot/posts/components/HelloApi.mjs b/MyApp/wwwroot/posts/components/HelloApi.mjs
new file mode 100644
index 0000000..de7fcd9
--- /dev/null
+++ b/MyApp/wwwroot/posts/components/HelloApi.mjs
@@ -0,0 +1,26 @@
+import { ref } from "vue"
+import { useClient } from "@servicestack/vue"
+import { Hello } from "../../mjs/dtos.mjs"
+
+export default {
+    template:/*html*/`<div class="flex flex-wrap justify-center">
+        <TextInput v-model="name" @keyup="update" />
+        <div class="ml-3 mt-2 text-lg">{{ result }}</div>
+    </div>`,
+    props:['value'],
+    setup(props) {
+        let name = ref(props.value)
+        let result = ref('')
+        let client = useClient()
+
+        async function update() {
+            let api = await client.api(new Hello({ name }))
+            if (api.succeeded) {
+                result.value = api.response.result
+            }
+        }
+        update()
+
+        return { name, update, result }
+    }
+}
diff --git a/MyApp/wwwroot/posts/components/VueComponentGallery.mjs b/MyApp/wwwroot/posts/components/VueComponentGallery.mjs
new file mode 100644
index 0000000..381b32f
--- /dev/null
+++ b/MyApp/wwwroot/posts/components/VueComponentGallery.mjs
@@ -0,0 +1,73 @@
+export default {
+    template:/*html*/`
+    <div class="not-prose">
+        <div class="mt-16 mx-auto flex justify-center">
+            <div class="flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="w-32 h-32 sm:w-44 sm:h-44 text-gray-700" viewBox="0 0 32 32"><path fill="currentColor" d="M10 6c1.544 1.76 2.276 4.15 2.217 6.61c3.968 1.67 9.924 6.12 11.181 12.39H28C26.051 14.31 14.918 6.77 10 6zm-2 7c4.67 4.913.81 11.582-4 12h18.97C21.5 18.289 11.95 13.533 8 13z"></path></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="w-32 h-32 sm:w-44 sm:h-44" viewBox="0 0 32 32"><path fill="#41b883" d="M24.4 3.925H30l-14 24.15L2 3.925h10.71l3.29 5.6l3.22-5.6Z"></path><path fill="#41b883" d="m2 3.925l14 24.15l14-24.15h-5.6L16 18.415L7.53 3.925Z"></path><path fill="#35495e" d="M7.53 3.925L16 18.485l8.4-14.56h-5.18L16 9.525l-3.29-5.6Z"></path></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="w-32 h-32 sm:w-44 sm:h-44" viewBox="0 0 32 32"><path fill="#44a8b3" d="M9 13.7q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1q-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1Zm-7 8.4q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1q-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1Z"></path></svg>
+            </div>
+        </div>
+    
+        <div class="text-center">
+            <h1 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
+                Component Gallery
+            </h1>
+            <p class="mt-2 text-lg text-gray-500 dark:text-gray-400">
+                Explore Vue Tailwind Component Gallery
+            </p>
+        </div>
+        <div class="pt-4 pb-16">
+            <div class="mx-auto">
+                <NavList title="">
+                    <NavListItem title="AutoQueryGrid" href="https://docs.servicestack.net/vue/autoquerygrid" :iconSvg="Icons.AutoQueryGrid">
+                        Instant customizable UIs for calling AutoQuery CRUD APIs
+                    </NavListItem>
+                    <NavListItem title="DataGrid" href="https://docs.servicestack.net/vue/datagrid" :iconSvg="Icons.DataGrid">
+                        DataGrid Component Examples for rendering tabular data
+                    </NavListItem>
+                    <NavListItem title="Auto Forms" href="https://docs.servicestack.net/vue/autoform" :iconSvg="Icons.AutoForms">
+                        Render Auto Form UIs from a Request DTO class
+                    </NavListItem>
+                    <NavListItem title="Form Inputs" href="https://docs.servicestack.net/vue/form-inputs" :iconSvg="Icons.FormInputs">
+                        Tailwind UI Input Components
+                    </NavListItem>
+                    <NavListItem title="Markdown Editor" href="https://docs.servicestack.net/vue/markdown" :iconSvg="Icons.Markdown">
+                        Rich Markdown Editing Input Control
+                    </NavListItem>
+                    <NavListItem title="Modals" href="https://docs.servicestack.net/vue/modals" :iconSvg="Icons.Modals">
+                        Modal Dialogs and Slide Overs
+                    </NavListItem>
+                    <NavListItem title="Navigation" href="https://docs.servicestack.net/vue/navigation" :iconSvg="Icons.Navigation">
+                        Breadcrumbs and Link navigation components
+                    </NavListItem>
+                    <NavListItem title="Alerts" href="https://docs.servicestack.net/vue/alerts" :iconSvg="Icons.Alerts">
+                        Tailwind Alert and Notification components
+                    </NavListItem>
+                    <NavListItem title="Formats" href="https://docs.servicestack.net/vue/formats" :iconSvg="Icons.Formats">
+                        HTML Value Formatters
+                    </NavListItem>
+                </NavList>
+            </div>
+        </div>
+    </div>        
+    `,
+    setup() {
+        const svg = (viewbox,body) =>
+            `<svg class='h-6 w-6 text-indigo-700 dark:text-indigo-300' xmlns='http://www.w3.org/2000/svg' viewBox='${viewbox}'>${body}</svg>`
+
+        const Icons = {
+            AutoQueryGrid: svg("0 0 28 28",     "<path fill='currentColor' d='M3 6.75A3.75 3.75 0 0 1 6.75 3h14.5A3.75 3.75 0 0 1 25 6.75v6.262a3.296 3.296 0 0 0-1.5.22V11h-5v6h.856L17 19.356V18.5h-6v5h2.542a3.329 3.329 0 0 0-.02.077L13.166 25H6.75A3.75 3.75 0 0 1 3 21.25V6.75ZM4.5 18.5v2.75a2.25 2.25 0 0 0 2.25 2.25H9.5v-5h-5Zm5-1.5v-6h-5v6h5Zm7.5 0v-6h-6v6h6Zm6.5-10.25a2.25 2.25 0 0 0-2.25-2.25H18.5v5h5V6.75ZM17 4.5h-6v5h6v-5Zm-7.5 0H6.75A2.25 2.25 0 0 0 4.5 6.75V9.5h5v-5Zm13.6 10.17l-7.903 7.902a2.686 2.686 0 0 0-.706 1.247l-.458 1.831a1.087 1.087 0 0 0 1.319 1.318l1.83-.457a2.685 2.685 0 0 0 1.248-.707l7.902-7.902a2.286 2.286 0 0 0-3.232-3.233Z' />"),
+            DataGrid:      svg("0 0 16 16",     "<path fill='currentColor' d='M0 1v14h16V1H0zm6 9V7h4v3H6zm4 1v3H6v-3h4zm0-8v3H6V3h4zM5 3v3H1V3h4zM1 7h4v3H1V7zm10 0h4v3h-4V7zm0-1V3h4v3h-4zM1 11h4v3H1v-3zm10 3v-3h4v3h-4z' />"),
+            AutoForms:     svg("0 0 1024 1024", "<path fill='currentColor' d='M904 512h-56c-4.4 0-8 3.6-8 8v320H184V184h320c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V520c0-4.4-3.6-8-8-8z' /><path fill='currentColor' d='M355.9 534.9L354 653.8c-.1 8.9 7.1 16.2 16 16.2h.4l118-2.9c2-.1 4-.9 5.4-2.3l415.9-415c3.1-3.1 3.1-8.2 0-11.3L785.4 114.3c-1.6-1.6-3.6-2.3-5.7-2.3s-4.1.8-5.7 2.3l-415.8 415a8.3 8.3 0 0 0-2.3 5.6zm63.5 23.6L779.7 199l45.2 45.1l-360.5 359.7l-45.7 1.1l.7-46.4z' />"),
+            FormInputs:    svg("0 0 36 36",     "<path fill='currentColor' d='M21 12H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1ZM8 10h12V7.94H8Z' class='clr-i-outline clr-i-outline-path-1' /><path fill='currentColor' d='M21 14.08H7a1 1 0 0 0-1 1V19a1 1 0 0 0 1 1h11.36L22 16.3v-1.22a1 1 0 0 0-1-1ZM20 18H8v-2h12Z' class='clr-i-outline clr-i-outline-path-2' /><path fill='currentColor' d='M11.06 31.51v-.06l.32-1.39H4V4h20v10.25l2-1.89V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v28a1 1 0 0 0 1 1h8a3.44 3.44 0 0 1 .06-.49Z' class='clr-i-outline clr-i-outline-path-3' /><path fill='currentColor' d='m22 19.17l-.78.79a1 1 0 0 0 .78-.79Z' class='clr-i-outline clr-i-outline-path-4' /><path fill='currentColor' d='M6 26.94a1 1 0 0 0 1 1h4.84l.3-1.3l.13-.55v-.05H8V24h6.34l2-2H7a1 1 0 0 0-1 1Z' class='clr-i-outline clr-i-outline-path-5' /><path fill='currentColor' d='m33.49 16.67l-3.37-3.37a1.61 1.61 0 0 0-2.28 0L14.13 27.09L13 31.9a1.61 1.61 0 0 0 1.26 1.9a1.55 1.55 0 0 0 .31 0a1.15 1.15 0 0 0 .37 0l4.85-1.07L33.49 19a1.6 1.6 0 0 0 0-2.27ZM18.77 30.91l-3.66.81l.89-3.63L26.28 17.7l2.82 2.82Zm11.46-11.52l-2.82-2.82L29 15l2.84 2.84Z' class='clr-i-outline clr-i-outline-path-6' /><path fill='none' d='M0 0h36v36H0z' />"),
+            Markdown:      svg("0 0 15 15",     "<path fill='currentColor' d='m2.5 5.5l.354-.354A.5.5 0 0 0 2 5.5h.5Zm2 2l-.354.354l.354.353l.354-.353L4.5 7.5Zm2-2H7a.5.5 0 0 0-.854-.354L6.5 5.5Zm4 4l-.354.354l.354.353l.354-.353L10.5 9.5ZM1.5 3h12V2h-12v1Zm12.5.5v8h1v-8h-1Zm-.5 8.5h-12v1h12v-1ZM1 11.5v-8H0v8h1Zm.5.5a.5.5 0 0 1-.5-.5H0A1.5 1.5 0 0 0 1.5 13v-1Zm12.5-.5a.5.5 0 0 1-.5.5v1a1.5 1.5 0 0 0 1.5-1.5h-1ZM13.5 3a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 13.5 2v1Zm-12-1A1.5 1.5 0 0 0 0 3.5h1a.5.5 0 0 1 .5-.5V2ZM3 10V5.5H2V10h1Zm-.854-4.146l2 2l.708-.708l-2-2l-.708.708Zm2.708 2l2-2l-.708-.708l-2 2l.708.708ZM6 5.5V10h1V5.5H6Zm4-.5v4.5h1V5h-1ZM8.146 7.854l2 2l.708-.708l-2-2l-.708.708Zm2.708 2l2-2l-.708-.708l-2 2l.708.708Z'/>"),
+            Modals:        svg("0 0 32 32",     "<path fill='currentColor' d='M28 4H10a2.006 2.006 0 0 0-2 2v14a2.006 2.006 0 0 0 2 2h18a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2Zm0 16H10V6h18Z'/><path fill='currentColor' d='M18 26H4V16h2v-2H4a2.006 2.006 0 0 0-2 2v10a2.006 2.006 0 0 0 2 2h14a2.006 2.006 0 0 0 2-2v-2h-2Z'/>"),
+            Navigation:    svg("0 0 12 12",     "<path fill='currentColor' d='M1 3a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2V7a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1v1a2 2 0 0 1-2-2V3Zm3 6a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2v1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1V4a2 2 0 0 0-2 2v3Z' />"),
+            Alerts:        svg("0 0 16 16",     "<path fill='currentColor' d='M8 2a4.5 4.5 0 0 0-4.5 4.5v2.401l-.964 2.414A.5.5 0 0 0 3 12h3c0 1.108.892 2 2 2s2-.892 2-2h3a.5.5 0 0 0 .464-.685L12.5 8.9V7a2.49 2.49 0 0 1-1-.208v2.206a.5.5 0 0 0 .036.185L12.262 11H3.738l.726-1.817a.5.5 0 0 0 .036-.185V6.5a3.5 3.5 0 0 1 5.625-2.782c.107-.325.279-.622.501-.873A4.48 4.48 0 0 0 8 2Zm1 10c0 .556-.444 1-1 1s-1-.444-1-1h2Zm2.368-8.484a1.494 1.494 0 0 0-.351 1.208A1.497 1.497 0 0 0 12.5 6a1.5 1.5 0 1 0-1.132-2.484Z' />"),
+            Formats:       svg("0 0 1024 1024", "<path fill='currentColor' d='M840 192h-56v-72c0-13.3-10.7-24-24-24H168c-13.3 0-24 10.7-24 24v272c0 13.3 10.7 24 24 24h592c13.3 0 24-10.7 24-24V256h32v200H465c-22.1 0-40 17.9-40 40v136h-44c-4.4 0-8 3.6-8 8v228c0 .6.1 1.3.2 1.9c-.1 2-.2 4.1-.2 6.1c0 46.4 37.6 84 84 84s84-37.6 84-84c0-2.1-.1-4.1-.2-6.1c.1-.6.2-1.2.2-1.9V640c0-4.4-3.6-8-8-8h-44V520h351c22.1 0 40-17.9 40-40V232c0-22.1-17.9-40-40-40zM720 352H208V160h512v192zM477 876c0 11-9 20-20 20s-20-9-20-20V696h40v180z' />"),
+            Code:          svg("0 0 24 24",     "<path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 20l4-16m4 4l4 4l-4 4M6 16l-4-4l4-4'></path>"),
+        }
+        return { Icons }
+    }
+}
diff --git a/MyApp/wwwroot/posts/components/VueComponentLibrary.mjs b/MyApp/wwwroot/posts/components/VueComponentLibrary.mjs
new file mode 100644
index 0000000..c53bbf8
--- /dev/null
+++ b/MyApp/wwwroot/posts/components/VueComponentLibrary.mjs
@@ -0,0 +1,47 @@
+export default {
+    template:/*html*/`
+    <div class="not-prose">
+        <div class="text-center">
+            <h1 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
+                Vue Library
+            </h1>
+        </div>
+        <div class="pt-4 pb-16">
+            <div class="mx-auto">
+                <NavList class="mt-8" title="">
+                    <NavListItem title="useMetadata" href="https://docs.servicestack.net/vue/use-metadata" :iconSvg="Icons.Code">
+                        Reflective utils for inspecting API AppMetadata
+                    </NavListItem>
+                    <NavListItem title="useClient" href="https://docs.servicestack.net/vue/use-client" :iconSvg="Icons.Code">
+                        Utilize JSON Api Client features in Components
+                    </NavListItem>
+                    <NavListItem title="useAuth" href="https://docs.servicestack.net/vue/use-auth" :iconSvg="Icons.Code">
+                        Inspect Authenticated Users Info, Roles &amp; Permissions
+                    </NavListItem>
+                    <NavListItem title="useFormatters" href="https://docs.servicestack.net/vue/use-formatters" :iconSvg="Icons.Code">
+                        Built-in Formats and formatting functions
+                    </NavListItem>
+                    <NavListItem title="useFiles" href="https://docs.servicestack.net/vue/use-files" :iconSvg="Icons.Code">
+                        File utils for resolving SVG icons, extensions and MIME types
+                    </NavListItem>
+                    <NavListItem title="useConfig" href="https://docs.servicestack.net/vue/use-config" :iconSvg="Icons.Code">
+                        Manage global configuration &amp; defaults
+                    </NavListItem>
+                    <NavListItem title="useUtils" href="https://docs.servicestack.net/vue/use-utils" :iconSvg="Icons.Code">
+                        General functionality and utils
+                    </NavListItem>
+                </NavList>
+            </div>
+        </div>
+    </div>        
+    `,
+    setup() {
+        const svg = (viewbox,body) =>
+            `<svg class='h-6 w-6 text-indigo-700 dark:text-indigo-300' xmlns='http://www.w3.org/2000/svg' viewBox='${viewbox}'>${body}</svg>`
+
+        const Icons = {
+            Code: svg("0 0 24 24",     "<path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 20l4-16m4 4l4 4l-4 4M6 16l-4-4l4-4'></path>"),
+        }
+        return { Icons }
+    }
+}
diff --git a/MyApp/wwwroot/posts/javascript.mjs b/MyApp/wwwroot/posts/javascript.mjs
new file mode 100644
index 0000000..56384bf
--- /dev/null
+++ b/MyApp/wwwroot/posts/javascript.mjs
@@ -0,0 +1,40 @@
+import { ref } from "vue"
+import HelloApi from './components/HelloApi.mjs'
+import VueComponentGallery from './components/VueComponentGallery.mjs'
+import VueComponentLibrary from './components/VueComponentLibrary.mjs'
+
+/** Simple inline component examples */
+const Hello = {
+    template: `<b>Hello, {{name}}!</b>`,
+    props: { name: String }
+}
+const Counter = {
+    template: `<b @click="count++">Counter {{count}}</b>`,
+    setup() {
+        let count = ref(1)
+        return { count }
+    }
+}
+const Plugin = {
+    template: `<div>
+        <PrimaryButton @click="show=true">Open Modal</PrimaryButton>
+        <ModalDialog v-if="show" @done="show=false">
+            <div class="p-8">Hello @servicestack/vue!</div>
+        </ModalDialog>
+    </div>`,
+    setup() {
+        const show = ref(false)
+        return { show }
+    }
+}
+
+export default {
+    components: {
+        Hello,
+        Counter,
+        Plugin,
+        HelloApi,
+        VueComponentGallery,
+        VueComponentLibrary,
+    }
+}
diff --git a/MyApp/wwwroot/posts/razor-ssg-new-blog-features.mjs b/MyApp/wwwroot/posts/razor-ssg-new-blog-features.mjs
new file mode 100644
index 0000000..2b60cb2
--- /dev/null
+++ b/MyApp/wwwroot/posts/razor-ssg-new-blog-features.mjs
@@ -0,0 +1,5 @@
+import ChartJs from './components/ChartJs.mjs'
+
+export default {
+    components: { ChartJs }
+}
diff --git a/MyApp/wwwroot/tailwind/README.txt b/MyApp/wwwroot/tailwind/README.txt
new file mode 100644
index 0000000..164dc3e
--- /dev/null
+++ b/MyApp/wwwroot/tailwind/README.txt
@@ -0,0 +1,2 @@
+Source code of components containing tailwind classes that also need to be included in tailwind's generated /css/app.css 
+Available from: https://raw.githubusercontent.com/ServiceStack/ServiceStack/main/ServiceStack.Blazor/src/ServiceStack.Blazor/dist/tailwind.html
\ No newline at end of file
diff --git a/MyApp/wwwroot/tailwind/ServiceStack.Blazor.html b/MyApp/wwwroot/tailwind/ServiceStack.Blazor.html
new file mode 100644
index 0000000..c79945b
--- /dev/null
+++ b/MyApp/wwwroot/tailwind/ServiceStack.Blazor.html
@@ -0,0 +1,2157 @@
+@using Microsoft.AspNetCore.Components.Forms
+@namespace ServiceStack.Blazor.Components.Tailwind
+@typeparam Model
+@inherits UiComponentBase
+<div class="fixed z-20 inset-0 overflow-y-auto" @onclick="onDone">
+<div class="absolute" style=@(TopLeft != null ? $"top:{TopLeft.Value.Y}px;left:{TopLeft.Value.X}px" : "") @onclick:stopPropagation="true">
+<div class="absolute top-0 right-0 bg-white dark:bg-black border dark:border-gray-800 rounded normal-case text-sm shadow w-80">
+<div class="p-4">
+<h3 class="text-base font-medium mb-3 dark:text-gray-100">Sort</h3>
+<div class="flex w-full justify-center">
+<button type="button" title="Sort Ascending" @onclick="_ => sort(SortOrder.Ascending)"
+class=@ClassNames(Column.Settings.SortOrder == SortOrder.Ascending ? "bg-indigo-100 dark:bg-indigo-800 border-indigo-500 dark:border-indigo-400" : "bg-white dark:bg-black hover:bg-gray-50 dark:hover:bg-gray-900 border-gray-300 dark:border-gray-700",
+"mr-1 inline-flex items-center px-2.5 py-1.5 border shadow-sm text-sm font-medium rounded text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500")>
+<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path fill-rule="evenodd" d="M10.082 5.629L9.664 7H8.598l1.789-5.332h1.234L13.402 7h-1.12l-.419-1.371h-1.781zm1.57-.785L11 2.687h-.047l-.652 2.157h1.351z" /><path d="M12.96 14H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645V14zm-8.46-.5a.5.5 0 0 1-1 0V3.707L2.354 4.854a.5.5 0 1 1-.708-.708l2-1.999l.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L4.5 3.707V13.5z" /></g></svg>
+<span>ASC</span>
+</button>
+<button type="button" title="Sort Descending" @onclick="_ => sort(SortOrder.Descending)"
+class=@ClassNames(Column.Settings.SortOrder == SortOrder.Descending ? "bg-indigo-100 dark:bg-indigo-800 border-indigo-500 dark:border-indigo-400" : "bg-white dark:bg-black hover:bg-gray-50 dark:hover:bg-gray-900 border-gray-300 dark:border-gray-700",
+"ml-1 inline-flex items-center px-2.5 py-1.5 border shadow-sm text-sm font-medium rounded text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500")>
+<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M12.96 7H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645V7z" /><path fill-rule="evenodd" d="M10.082 12.629L9.664 14H8.598l1.789-5.332h1.234L13.402 14h-1.12l-.419-1.371h-1.781zm1.57-.785L11 9.688h-.047l-.652 2.156h1.351z" /><path d="M4.5 2.5a.5.5 0 0 0-1 0v9.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999l.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L4.5 12.293V2.5z" /></g></svg>
+<span>DESC</span>
+</button>
+</div>
+<h3 class="text-base font-medium mt-4 mb-2 dark:text-gray-100">
+Filter
+</h3>
+@if (Column.FieldType.IsEnum)
+{
+<div>
+@foreach (var c in Column.EnumEntries)
+{
+<div key=@c.Value class="flex items-center">
+<input type="checkbox" id=@c.Value value=@c.Value
+checked=@selectedEnums.Contains(c.Value) @onchange="e => selectedEnumsChanged(c.Value, e.Value is bool b && b)"
+class="h-4 w-4 border-gray-300 dark:border-gray-700 rounded text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500">
+<label for=@c.Value class="ml-3">@c.Value</label>
+</div>
+}
+</div>
+}
+else
+{
+<div>
+@foreach (var filter in filters)
+{
+<div class="mb-2">
+<span class="inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 dark:bg-indigo-800 text-indigo-700 dark:text-indigo-300">
+@Column.Name @filter.Name @Column.GetFilterValue(filter)
+<button type="button" @onclick="_ => removeFilter(filter)"
+class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 dark:text-indigo-500 hover:bg-indigo-200 dark:hover:bg-indigo-800 hover:text-indigo-500 dark:hover:text-indigo-400 focus:outline-none focus:bg-indigo-500 focus:text-white">
+<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+</svg>
+</button>
+</span>
+</div>
+}
+<EditForm Model="NewFilter" class="flex">
+<InputSelect @bind-Value="NewFilter.Query" class=@CssUtils.Tailwind.Input("w-32 mr-1")>
+@foreach (var rule in Column.FilterRules)
+{
+<option value=@rule.Value>@rule.Name</option>
+}
+</InputSelect>
+@if (newFilterValueType != "none")
+{
+<InputText type="text" class=@CssUtils.Tailwind.Input("w-32 mr-1") @bind-Value="NewFilter.Value" @onkeyup="handleKeyUp" />
+}
+<div class="pt-1">
+<button type="button" @onclick="addFilter"
+class="inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white dark:text-black bg-indigo-600 dark:bg-indigo-400 hover:bg-indigo-700 dark:hover:bg-indigo-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
+</svg>
+</button>
+</div>
+</EditForm>
+</div>
+}
+</div>
+<div class="bg-gray-50 dark:bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+<PrimaryButton @onclick="onSave" Style="ButtonStyle.Red" class="ml-2">
+Save
+</PrimaryButton>
+<SecondaryButton @onclick="onDone">
+Cancel
+</SecondaryButton>
+</div>
+</div>
+</div>
+</div>
+@namespace ServiceStack.Blazor.Components.Tailwind
+@typeparam Model
+@inherits UiComponentBase
+<div class=@Class>
+<div class="px-4 sm:px-6 lg:px-8 text-sm">
+<div class="flex flex-wrap">
+@foreach (var c in Columns.Where(c => c.Filters.Count > 0))
+{
+<fieldset class="group pr-4 sm:pr-6 lg:pr-8">
+<legend class="flex justify-between w-full font-medium">
+<span>@c.Label</span>
+<span class="w-6 flex justify-end">
+<span class="hidden group-hover:inline">
+<button @onclick="_ => removeFilters(c)" title=@($"Clear all {c.Title} filters")
+class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-red-600 hover:bg-red-200 hover:text-red-500 focus:outline-none focus:bg-red-500 focus:text-white">
+<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+</svg>
+</button>
+</span>
+</span>
+</legend>
+@if (c.FieldType.IsEnum)
+{
+<div class="pt-2">
+@foreach (var value in c.Filters.FirstOrDefault()!.Values.OrEmpty())
+{
+<div key=@value class="flex items-center">
+<label class="ml-2">@value</label>
+</div>
+}
+</div>
+}
+else
+{
+<div>
+@foreach (var f in c.Filters)
+{
+<div class="pt-2">
+<span class="inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 text-indigo-700">
+@c.Name @f.Name @c.GetFilterValue(f)
+<button type="button" @onclick="_ => removeFilter(c, f)"
+class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white">
+<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+</svg>
+</button>
+</span>
+</div>
+}
+</div>
+}
+</fieldset>
+}
+</div>
+<div class="flex justify-center pt-4">
+<button type="button" @onclick="clearAll"
+class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+<span>Clear All</span>
+</button>
+</div>
+</div>
+</div>
+@namespace ServiceStack.Blazor.Components.Tailwind
+@inherits UiComponentBase
+<ModalDialog Id=@Id Show=@Show Close="Done" SizeClass="w-full sm:max-w-prose">
+<div class="bg-white dark:bg-black px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+<div class="">
+<div class="mt-3 text-center sm:mt-0 sm:mx-4 sm:text-left">
+<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Query Preferences</h3>
+<div class="mt-4">
+<label for=@($"{Id}-take") class="block text-sm font-medium text-gray-700 dark:text-gray-300">Results per page</label>
+<select id=@($"{Id}-take") @bind="Model.Take"
+class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-white dark:bg-black border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+@foreach (var take in allTakes)
+{
+<option class="text-black dark:text-white" value=@take>@take</option>
+}
+</select>
+</div>
+<div class="mt-4 flex items-center py-4 border-b border-gray-200 dark:border-gray-800">
+<input type="radio" id=@($"{Id}-allColumns") @onclick=@(_ => Model.SelectedColumns.Clear()) checked=@(Model.SelectedColumns.Count == 0)
+class="focus:ring-indigo-500 h-4 w-4 bg-white dark:bg-black text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-700">
+<label class="ml-3 block text-gray-700 dark:text-gray-300" for=@($"{Id}-allColumns")>View all columns</label>
+</div>
+<div class="mt-4">
+<div class="pb-2 px-4">
+<div class="">
+@foreach (var c in Columns)
+{
+<div key=@c.Name class="flex items-center">
+<input type="checkbox" id=@c.Name checked=@Model.SelectedColumns.Contains(c.Name) @oninput="x => columnSelected(c, x.Value)"
+class="h-4 w-4 bg-white dark:bg-black border-gray-300 dark:border-gray-700 rounded text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500">
+<label for=@c.Name class="ml-3 dark:text-gray-50">@c.Name</label>
+</div>
+}
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+<div class="bg-gray-50 dark:bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+<PrimaryButton @onclick="save" Style="ButtonStyle.Red" class="ml-2">
+Save
+</PrimaryButton>
+<SecondaryButton @onclick="async _ => await Done.InvokeAsync()">
+Cancel
+</SecondaryButton>
+</div>
+</ModalDialog>
+@namespace ServiceStack.Blazor.Components.Tailwind
+@typeparam Model
+@inherits UiComponentBase
+<div class="flex">
+@if (Column.Settings.Filters.Count > 0)
+{
+<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2.586a1 1 0 0 1-.293.707l-6.414 6.414a1 1 0 0 0-.293.707V17l-4 4v-6.586a1 1 0 0 0-.293-.707L3.293 7.293A1 1 0 0 1 3 6.586V4z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></g></svg>
+}
+else
+{
+<svg class=@CssUtils.ClassNames("w-4 h-4 transition-transform", IsOpen ? "rotate-180" : "") v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M505.5 658.7c3.2 4.4 9.7 4.4 12.9 0l178-246c3.8-5.3 0-12.7-6.5-12.7H643c-10.2 0-19.9 4.9-25.9 13.2L512 558.6L406.8 413.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246z" fill="currentColor" /><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z" fill="currentColor" /></svg>
+}
+@if (Column.Settings.SortOrder == SortOrder.Ascending)
+{
+<svg class="w-4 h-4" v-if="sort==='ASC'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g fill="none"><path d="M8.998 4.71L6.354 7.354a.5.5 0 1 1-.708-.707L9.115 3.18A.499.499 0 0 1 9.498 3H9.5a.5.5 0 0 1 .354.147l.01.01l3.49 3.49a.5.5 0 1 1-.707.707l-2.65-2.649V16.5a.5.5 0 0 1-1 0V4.71z" fill="currentColor" /></g></svg>
+}
+else if (Column.Settings.SortOrder == SortOrder.Descending)
+{
+<svg class="w-4 h-4" v-else-if="sort==='DESC'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g fill="none"><path d="M10.002 15.29l2.645-2.644a.5.5 0 0 1 .707.707L9.886 16.82a.5.5 0 0 1-.384.179h-.001a.5.5 0 0 1-.354-.147l-.01-.01l-3.49-3.49a.5.5 0 1 1 .707-.707l2.648 2.649V3.5a.5.5 0 0 1 1 0v11.79z" fill="currentColor" /></g></svg>
+}
+</div>
+@inherits UiComponentBase
+<div class=@ClassNames(BackgroundColor, BorderColor, "border-l-4 p-4", Class) @attributes="AdditionalAttributes">
+<div class="flex">
+<div class="flex-shrink-0">
+@if (Type == AlertType.Warning)
+{
+<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+</svg>
+}
+else if (Type == AlertType.Error)
+{
+<svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+</svg>
+}
+else if (Type == AlertType.Information)
+{
+<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M19 10.5a8.5 8.5 0 11-17 0 8.5 8.5 0 0117 0zM8.25 9.75A.75.75 0 019 9h.253a1.75 1.75 0 011.709 2.13l-.46 2.066a.25.25 0 00.245.304H11a.75.75 0 010 1.5h-.253a1.75 1.75 0 01-1.709-2.13l.46-2.066a.25.25 0 00-.245-.304H9a.75.75 0 01-.75-.75zM10 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+</svg>
+}
+else if (Type == AlertType.Success)
+{
+<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+</svg>
+}
+</div>
+<div class="ml-3">
+<p class=@ClassNames(TextColor, "text-sm")>
+@if (!string.IsNullOrEmpty(HtmlMessage))
+{
+@((MarkupString)HtmlMessage)
+}
+else
+{
+@ChildContent
+}
+</p>
+</div>
+</div>
+</div>
+@code {
+string BackgroundColor => Type switch
+{
+AlertType.Information => "bg-blue-50 dark:bg-blue-200",
+AlertType.Error => "bg-red-50 dark:bg-red-200",
+AlertType.Success => "bg-green-50 dark:bg-green-200",
+_ => "bg-yellow-50 dark:bg-yellow-200"
+};
+string BorderColor => Type switch
+{
+AlertType.Information => "border-blue-400",
+AlertType.Error => "border-red-400",
+AlertType.Success => "border-green-400",
+_ => "border-yellow-400"
+};
+string TextColor => Type switch
+{
+AlertType.Information => "text-blue-700",
+AlertType.Error => "text-red-700",
+AlertType.Success => "text-green-700",
+_ => "text-yellow-700"
+};
+}
+@inherits AlertSuccessBase
+@if (!dismissed)
+{
+<div class=@(ClassNames(Classes, CssClass())) role="alert">
+<div class="flex">
+<div class="flex-shrink-0">
+<svg class="h-5 w-5 text-green-400 dark:text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+</div>
+<div class="ml-3">
+<h3 class="text-sm font-medium text-green-800">
+@if (!string.IsNullOrEmpty(Message))
+{
+@Message
+}
+else
+{
+@ChildContent
+}
+</h3>
+</div>
+<div class="ml-auto pl-3">
+<div class="-mx-1.5 -my-1.5">
+<button type="button" class="inline-flex rounded-md bg-green-50 dark:bg-green-200 p-1.5 text-green-500 dark:text-green-600 hover:bg-green-100 dark:hover:bg-green-700 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50 dark:ring-offset-green-200"
+@onclick="_ => dismissed = true">
+<span class="sr-only">Dismiss</span>
+<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+</svg>
+</button>
+</div>
+</div>
+</div>
+</div>
+}
+@code {
+bool dismissed = false;
+public static string Classes { get; set; } = "rounded-md bg-green-50 dark:bg-green-200 p-4";
+}
+@typeparam T
+@inherits TextInputBase
+<div id=@($"{Id}-autocomplete") class=@FieldClass>
+@if (!string.IsNullOrEmpty(Label))
+{
+<label for=@Id class=@ClassNames("block text-sm font-medium text-gray-700 dark:text-gray-300", LabelClass)>@UseLabel</label>
+}
+<div class="relative mt-1">
+<input id=@Id type="text" @bind-value="txtValue" @bind-value:event="oninput" class=@ClassNames("block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900",
+CssClass("shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600",
+"pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500"))
+role="combobox" aria-controls="options" aria-expanded="false" autocomplete="off" spellcheck="false" placeholder=@(Multiple || Value == null ? placeholder : "")
+@onkeydown="OnKeyDownAsync" @onkeyup="OnKeyUp" @onclick="update" @onpaste="OnPasteAsync" @attributes="IncludeAttributes">
+<button type="button" @onclick="toggle" class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none" tabindex="-1">
+<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" />
+</svg>
+</button>
+@if (showPopup)
+{
+<ul class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+@onkeydown="OnKeyDownAsync" id=@("{Id}-options") role="listbox">
+@foreach (var option in FilteredValues)
+{
+<li class=@ClassNames(option.Equals(active) ? "active bg-indigo-600 text-white" : "text-gray-900 dark:text-gray-100", "relative cursor-default select-none py-2 pl-3 pr-9")
+@onmouseover="_ => setActive(option)" @onclick="_ => select(option)" role="option" tabindex="-1">
+@Item!(option)
+@if (Values.Contains(option))
+{
+<span class=@ClassNames("absolute inset-y-0 right-0 flex items-center pr-4", option.Equals(active) ? "text-white" : "text-indigo-600")>
+<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+</svg>
+</span>
+}
+</li>
+}
+</ul>
+}
+else if (!Multiple && Value is not null)
+{
+<div @onkeydown="OnKeyDownAsync" @onclick="toggle" class="h-8 -mt-8 ml-3 pt-0.5">
+@Item!(Value)
+</div>
+}
+@if (HasErrorField)
+{
+<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none" tabindex="-1">
+<svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+</svg>
+</div>
+}
+</div>
+@if (HasErrorField)
+{
+<p class="mt-2 text-sm text-red-500" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+}
+else if (!string.IsNullOrEmpty(UseHelp))
+{
+<p id=@($"{Id}-description") class="text-gray-500">@UseHelp</p>
+}
+</div>
+@typeparam Model
+@inherits AutoFormBase<Model>
+@if (FormStyle == FormStyle.Card)
+{
+<div class=@ClassNames(PanelClass, @class)>
+<form @onsubmit="OnSave" @onsubmit:preventDefault>
+<div class=@FormClass>
+<div>
+<h3 class=@HeadingClass>@Title</h3>
+@if (SubHeading != null)
+{
+<p class=@SubHeadingClass>@SubHeading</p>
+}
+else if (Notes != null)
+{
+<p class=@ClassNames("notes", SubHeadingClass)>@((MarkupString)Notes)</p>
+}
+</div>
+<AutoFormFields Type="ApiType" Api="api" FormLayout="FormLayout" ModelDictionary="ModelDictionary" />
+</div>
+<div class=@ButtonsClass>
+<div></div>
+<div class="flex justify-end">
+<SecondaryButton @onclick="OnDone">Cancel</SecondaryButton>
+<PrimaryButton type="submit" class="ml-4">Save</PrimaryButton>
+</div>
+</div>
+</form>
+</div>
+}
+else
+{
+<div class=@ClassNames("relative z-10", @class) aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
+<div class="">
+<div class="">
+<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
+<div class=@ClassNames(PanelClass, SlideOverTransition.Class)>
+<form class=@FormClass @onsubmit="OnSave" @onsubmit:preventDefault>
+<!-- Header -->
+<div class="h-0 flex-1 overflow-y-auto">
+<div class=@TitlebarClass>
+<div class="flex items-start justify-between space-x-3">
+<div class="space-y-1">
+<h2 class=@HeadingClass id="slide-over-title">@Title</h2>
+@if (SubHeading != null)
+{
+<p class=@SubHeadingClass>@SubHeading</p>
+}
+else if (Notes != null)
+{
+<p class=@ClassNames("notes", SubHeadingClass)>@((MarkupString)Notes)</p>
+}
+</div>
+<div class="flex h-7 items-center">
+<button type="button" @onclick="OnDone" class=@CssDefaults.Form.SlideOver.CloseButtonClass>
+<span class="sr-only">Close panel</span>
+<!-- Heroicon name: outline/x-mark -->
+<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+</svg>
+</button>
+</div>
+</div>
+</div>
+<AutoFormFields Type="ApiType" Api="api" FormLayout="FormLayout" ModelDictionary="ModelDictionary" />
+</div>
+<div class=@ButtonsClass>
+<div></div>
+<div class="flex justify-end">
+<SecondaryButton @onclick="OnDone">Cancel</SecondaryButton>
+<PrimaryButton type="submit" class="ml-4">Save</PrimaryButton>
+</div>
+</div>
+</form>
+</div>
+</div>
+</div>
+</div>
+</div>
+}
+@typeparam Model
+@inherits AutoFormBase<Model>
+@if (FormStyle == FormStyle.Card)
+{
+<div class=@ClassNames(PanelClass, @class)>
+<form @onsubmit="OnSave" @onsubmit:preventDefault>
+<div class=@FormClass>
+<div>
+<h3 class=@HeadingClass>@Title</h3>
+@if (SubHeading != null)
+{
+<p class=@SubHeadingClass>@SubHeading</p>
+}
+else if (Notes != null)
+{
+<p class=@ClassNames("notes", SubHeadingClass)>@((MarkupString)Notes)</p>
+}
+</div>
+<AutoFormFields Type="ApiType" Api="api" FormLayout="FormLayout" ModelDictionary="ModelDictionary" />
+</div>
+<div class=@ButtonsClass>
+<div>
+@if (DeleteApiType != null)
+{
+<ConfirmDelete OnDelete="OnDelete" />
+}
+</div>
+<div class="flex justify-end">
+<SecondaryButton @onclick="OnDone">Cancel</SecondaryButton>
+<PrimaryButton type="submit" class="ml-4">Save</PrimaryButton>
+</div>
+</div>
+</form>
+</div>
+}
+else
+{
+<div class=@ClassNames("relative z-10", @class) aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
+<div class="">
+<div class="">
+<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
+<div class=@ClassNames(PanelClass, SlideOverTransition.Class)>
+<form class=@FormClass @onsubmit="OnSave" @onsubmit:preventDefault>
+<!-- Header -->
+<div class="h-0 flex-1 overflow-y-auto">
+<div class=@TitlebarClass>
+<div class="flex items-start justify-between space-x-3">
+<div class="space-y-1">
+<h2 class=@HeadingClass id="slide-over-title">@Title</h2>
+@if (SubHeading != null)
+{
+<p class=@SubHeadingClass>@SubHeading</p>
+}
+else if (Notes != null)
+{
+<p class=@ClassNames("notes", SubHeadingClass)>@((MarkupString)Notes)</p>
+}
+</div>
+<div class="flex h-7 items-center">
+<button type="button" @onclick="OnDone" class=@CssDefaults.Form.SlideOver.CloseButtonClass>
+<span class="sr-only">Close panel</span>
+<!-- Heroicon name: outline/x-mark -->
+<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+</svg>
+</button>
+</div>
+</div>
+</div>
+<AutoFormFields Type="ApiType" Api="api" FormLayout="FormLayout" ModelDictionary="ModelDictionary" />
+</div>
+<div class=@ButtonsClass>
+<div>
+@if (DeleteApiType != null)
+{
+<ConfirmDelete OnDelete="OnDelete" />
+}
+</div>
+<div class="flex justify-end">
+<SecondaryButton @onclick="OnDone">Cancel</SecondaryButton>
+<PrimaryButton type="submit" class="ml-4">Save</PrimaryButton>
+</div>
+</div>
+</form>
+</div>
+</div>
+</div>
+</div>
+</div>
+}
+@using ServiceStack.Html
+@inherits UiComponentBase
+<ErrorSummary ExplicitStatus=@(Api?.Error) Except=@VisibleFields />
+<div class="flex flex-1 flex-col justify-between">
+<div class="divide-y divide-gray-200 px-4 sm:px-6">
+<div class="space-y-6 pt-6 pb-5">
+<fieldset class="grid grid-cols-12 gap-6">
+@foreach (var f in FormLayout.OrEmpty())
+{
+var propType = MetadataType.Properties.FirstOrDefault(x => x.Name == f.Id);
+var dataModelProp = DataModelType.Property(f.Id);
+if (f.Ignore == true || !BlazorUtils.SupportsProperty(propType))
+{
+continue;
+}
+<div class=@CssUtils.ClassNames(
+f.Css?.Field ?? (f.Type == Input.Types.Textarea
+? "col-span-12"
+: "col-span-12 xl:col-span-6" + (f.Type == Input.Types.Checkbox ? " flex items-center" : "")),
+f.Type == Input.Types.Hidden ? "hidden" : "") style="width:100%">
+@if (dataModelProp?.Ref != null && f.Type != Input.Types.File)
+{
+<LookupInput MetadataType=@DataModelType Input=@f Model=@ModelDictionary Status=@Api?.Error />
+}
+else
+{
+<DynamicInput Input=@f Model=@ModelDictionary Status=@Api?.Error />
+}
+</div>
+}
+</fieldset>
+</div>
+</div>
+</div>
+@typeparam Model
+@inherits AuthBlazorComponentBase
+@implements IDisposable
+@if (invalidAccess != null)
+{
+<div class="w-body md:w-body overflow-auto">
+<EnsureAccess Title=@($"View {typeof(Model).Name}") HtmlMessage=@invalidAccess />
+</div>
+}
+else
+{
+<CascadingValue Value="ModalLookup">
+<div class="pt-1">
+<CascadingValue Value="AppMetadata">
+@if (New == true)
+{
+if (invalidCreateAccess != null)
+{
+<EnsureAccess Title=@($"New {typeof(Model).Name}") HtmlMessage=@invalidCreateAccess Done="OnNewDone" />
+}
+else if (CreateForm != null)
+{
+@CreateForm
+}
+else if (Apis!.Create != null)
+{
+<AutoCreateForm @ref="AutoCreateForm" Model="Model" ApiType="Apis!.Create" Done="OnNewDone" Save="OnNewSave" />
+}
+}
+else if (EditModel != null)
+{
+if (invalidUpdateAccess != null)
+{
+<EnsureAccess Title=@($"Edit {typeof(Model).Name}") HtmlMessage=@invalidUpdateAccess Done="OnEditDone" />
+}
+else if (EditForm != null)
+{
+@EditForm(EditModel)
+}
+else if (Apis!.Patch != null || Apis!.Update != null)
+{
+<AutoEditForm @ref="AutoEditForm" Model="Model" Edit="EditModel" ApiType="Apis!.Patch ?? Apis!.Update" DeleteApiType="Apis!.Delete" Done="OnEditDone" Save="OnEditSave" Delete="OnEditSave" />
+}
+}
+</CascadingValue>
+@if (Toolbar != null)
+{
+@Toolbar
+}
+else if (ShowToolbar)
+{
+<QueryPrefs Show=@ShowQueryPrefs Columns="ViewModelColumns" Prefs="ApiPrefs" Done="() => ShowQueryPrefs = false" Save="saveApiPrefs" />
+<div class="pl-1 pt-1 flex flex-wrap">
+<div class="flex mt-1">
+@if (ShowPreferences)
+{
+<button type="button" class="pl-2 text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" title=@($"{typeof(Model).Name} Preferences") @onclick="_ => ShowQueryPrefs = !ShowQueryPrefs">
+<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-width="1.5" fill="none"><path d="M9 3H3.6a.6.6 0 0 0-.6.6v16.8a.6.6 0 0 0 .6.6H9M9 3v18M9 3h6M9 21h6m0-18h5.4a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H15m0-18v18" stroke="currentColor" /></g></svg>
+</button>
+}
+@if (ShowPagingNav)
+{
+<button type="button" class=@ClassNames("pl-2", canFirst ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
+title="First page" disabled=@(!canFirst) @onclick="_ => skipTo(-Total)">
+<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z" fill="currentColor" /></svg>
+</button>
+<button type="button" class=@ClassNames("pl-2", canPrev ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
+title="Previous page" disabled=@(!canPrev) @onclick="_ => skipTo(-ApiPrefs.Take)">
+<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z" fill="currentColor" /></svg>
+</button>
+<button type="button" class=@ClassNames("pl-2", canNext ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
+title="Next page" disabled=@(!canNext)  @onclick="_ => skipTo(ApiPrefs.Take)">
+<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor" /></svg>
+</button>
+<button type="button" class=@ClassNames("pl-2", canLast ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
+title="Last page" disabled=@(!canLast) @onclick="_ => skipTo(Total)">
+<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z" fill="currentColor" /></svg>
+</button>
+}
+</div>
+@if (ShowPagingInfo)
+{
+<div class="flex mt-1">
+<div class="px-4 text-lg text-black dark:text-white">
+@if (apiLoading)
+{
+<span>Querying...</span>
+}
+else if (Results.Count > 0)
+{
+<span>
+<span class="hidden xl:inline">
+Showing Results
+</span>
+@(Skip + 1) - @Math.Min(Skip + Results.Count, Total) <span> of @Total</span>
+</span>
+}
+else if (Api != null)
+{
+<span>No Results</span>
+}
+</div>
+</div>
+}
+<div class="flex flex-wrap">
+@if (ShowRefresh)
+{
+<div class="pl-2 mt-1">
+<button type="button" @onclick="RefreshAsync" title="Refresh" class=@ToolbarButtonClass>
+<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 20v-5h-5M4 4v5h5m10.938 2A8.001 8.001 0 0 0 5.07 8m-1.008 5a8.001 8.001  0 0 0 14.868 3" /></svg>
+</button>
+</div>
+}
+@if (ShowDownloadCsv)
+{
+<div class="pl-2 mt-1">
+<button type="button" @onclick="downloadCsv" title="Download CSV" class=@ToolbarButtonClass>
+<svg class="w-5 h-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28.781 4.405h-10.13V2.018L2 4.588v22.527l16.651 2.868v-3.538h10.13A1.162 1.162 0 0 0 30 25.349V5.5a1.162 1.162 0 0 0-1.219-1.095zm.16 21.126H18.617l-.017-1.889h2.487v-2.2h-2.506l-.012-1.3h2.518v-2.2H18.55l-.012-1.3h2.549v-2.2H18.53v-1.3h2.557v-2.2H18.53v-1.3h2.557v-2.2H18.53v-2h10.411z" fill="#20744a" fill-rule="evenodd" /><path fill="#20744a" d="M22.487 7.439h4.323v2.2h-4.323z" /><path fill="#20744a" d="M22.487 10.94h4.323v2.2h-4.323z" /><path fill="#20744a" d="M22.487 14.441h4.323v2.2h-4.323z" /><path fill="#20744a" d="M22.487 17.942h4.323v2.2h-4.323z" /><path fill="#20744a" d="M22.487 21.443h4.323v2.2h-4.323z" /><path fill="#fff" fill-rule="evenodd" d="M6.347 10.673l2.146-.123l1.349 3.709l1.594-3.862l2.146-.123l-2.606 5.266l2.606 5.279l-2.269-.153l-1.532-4.024l-1.533 3.871l-2.085-.184l2.422-4.663l-2.238-4.993z" /></svg>
+<span class="text-green-900 dark:text-green-100">Excel</span>
+</button>
+</div>
+}
+@if (ShowCopyApiUrl)
+{
+<div class="pl-2 mt-1">
+<button type="button" @onclick="copyApiUrl" title="Copy API URL" class=@ToolbarButtonClass>
+@if (copiedApiUrl)
+{
+<svg class="w-5 h-5 mr-1 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+}
+else
+{
+<svg class="w-5 h-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /><path d="M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></g></svg>
+}
+<span class="whitespace-nowrap">Copy URL</span>
+</button>
+</div>
+}
+@if (hasPrefs && ShowResetPreferences)
+{
+<div class="pl-2 mt-1">
+<button type="button" @onclick="ResetPreferencesAsync" title="Reset Preferences & Filters" class=@ToolbarButtonClass>
+<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M6.78 2.72a.75.75 0 0 1 0 1.06L4.56 6h8.69a7.75 7.75 0 1 1-7.75 7.75a.75.75 0 0 1 1.5 0a6.25 6.25 0 1 0 6.25-6.25H4.56l2.22 2.22a.75.75 0 1 1-1.06 1.06l-3.5-3.5a.75.75 0 0 1 0-1.06l3.5-3.5a.75.75 0 0 1 1.06 0Z" /></svg>
+</button>
+</div>
+}
+@if (ShowFiltersView && filtersCount > 0)
+{
+<div class="pl-2 mt-1">
+<button type="button" @onclick=@(_ => open = open == Features.Filters ? null : Features.Filters) class=@ToolbarButtonClass aria-expanded="false">
+<svg class="flex-none w-5 h-5 mr-2 text-gray-400 dark:text-gray-500 group-hover:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+<path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
+</svg>
+<span class="mr-1">
+@filtersCount @(filtersCount == 1 ? "Filter" : "Filters")
+</span>
+@if (open != Features.Filters)
+{
+<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
+</svg>
+}
+else
+{
+<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd" />
+</svg>
+}
+</button>
+</div>
+}
+@if (ShowNewItem && CreateOp != null)
+{
+<div class="pl-2 mt-1">
+<button type="button" @onclick="OnShowNewItem" title=@($"New {typeof(Model).Name}") class=@ToolbarButtonClass>
+<svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"></path></svg>
+<span class="whitespace-nowrap">@($"New {typeof(Model).Name}")</span>
+</button>
+</div>
+}
+@if (ToolbarButtons != null)
+{
+@ToolbarButtons
+}
+</div>
+</div>
+}
+@if (open == Features.Filters)
+{
+<FilterViews class="border-y border-gray-200 dark:border-gray-800 py-8 my-2" Columns="GetColumns()" Done="() => open = null" FiltersChanged="UpdateAsync" />
+}
+@if (errorSummary != null)
+{
+<ErrorSummary class="p-4" ExplicitStatus="EditApi?.Error ?? Api?.Error"  />
+}
+else if (apiLoading)
+{
+<Loading class="p-4 text-xl text-gray-500 dark:text-gray-400" ImageClass="w-5 h-5" />
+}
+else
+{
+<div>
+@if (Results.Count > 0)
+{
+<div>
+<CascadingValue IsFixed="true" Value="this">
+<DataGrid Id=@Id Model="Model" @ref="DataGrid" Items="Results" SelectedColumns="ApiPrefs.SelectedColumns"
+PropertyChanged="_ => StateHasChanged()" FiltersChanged="UpdateAsync"
+TableStyle=@TableStyle GridClass=@GridClass Grid2Class=@Grid2Class Grid3Class=@Grid3Class Grid4Class=@Grid4Class
+TableClass=@TableClass TableHeadClass=@TableHeadClass TableHeaderRowClass=@TableHeaderRowClass TableHeaderCellClass=@TableHeaderCellClass TableBodyClass=@TableBodyClass
+RowSelected="OnRowSelected" HeaderSelected="HeaderSelected" MaxFieldLength="MaxFieldLength"
+AllowSelection="AllowSelection" AllowFiltering="AllowFiltering" FilterDefinitions="FilterDefinitions"
+>
+<CascadingValue IsFixed="true" Value="DataGrid">
+@Columns
+</CascadingValue>
+</DataGrid>
+</CascadingValue>
+</div>
+}
+</div>
+}
+</div>
+</CascadingValue>
+<DynamicModalLookup @ref="ModalLookup" AppMetadata=@AppMetadata />
+}
+@inherits UiComponentBase
+<CascadingValue IsFixed="true" Value="this">@ChildContent</CascadingValue>
+<nav class=@ClassNames("flex", Class) aria-label="Breadcrumb">
+<ol role="list" class="flex items-center space-x-4">
+<li>
+<div>
+<a href=@HomeHref class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400" title=@HomeLabel>
+<!-- Heroicon name: mini/home -->
+<svg class="h-6 w-6 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd" />
+</svg>
+<span class="sr-only">@HomeLabel</span>
+</a>
+</div>
+</li>
+@foreach (var link in Links)
+{
+<li>
+<div class="flex items-center">
+<!-- Heroicon name: mini/chevron-right -->
+<svg class="h-6 w-6 flex-shrink-0 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+</svg>
+@if (!string.IsNullOrEmpty(link.href))
+{
+<a href=@link.href class="ml-4 text-lg font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" title=@link.title>@link.ChildContent</a>
+}
+else
+{
+<span class="ml-4 text-lg font-medium text-gray-700 dark:text-gray-300" title=@link.title>@link.ChildContent</span>
+}
+</div>
+</li>
+}
+</ol>
+</nav>
+@if (Label != null)
+{
+<span class="flex" title=@Title>
+@if (Icon != null)
+{
+<Icon Image=@Icon Class="w-5 h-5 mr-1" />
+}
+@Label
+</span>
+}
+else
+{
+<PreviewFormat Format=@PropType?.Format Value=@Value />
+}
+@typeparam TValue
+@inherits CheckboxInputBase<TValue>
+<div class=@ClassNames("relative flex items-start", CssClass())>
+<div class="flex items-center h-5">
+<input type="checkbox"
+class="@CheckboxInput.InputClasses"
+id=@Id
+name=@Id
+@bind="CurrentValueAsBool"
+@attributes="IncludeAttributes">
+</div>
+<div class="ml-3 text-sm">
+<label class=@ClassNames(CheckboxInput.LabelClasses, LabelClass) for=@Id>
+@UseLabel
+</label>
+@if (HasErrorField)
+{
+<p class=@ClassNames(CheckboxInput.ErrorClasses)>@ErrorFieldMessage</p>
+}
+else if (!string.IsNullOrEmpty(UseHelp))
+{
+<p id=@($"{Id}-description") class="text-gray-500">@UseHelp</p>
+}
+</div>
+</div>
+@inherits UiComponentBase
+<input id="confirmDelete" type="checkbox" @bind-value="confirmDelete" class="@CheckboxClasses">
+<label for="confirmDelete" class="@LabelClasses">@ConfirmLabel</label>
+<button type="button" disabled=@(!confirmDelete) @onclick="OnDelete"
+class=@ClassNames(ButtonClasses,
+confirmDelete? EnabledClasses : DisabledClasses, Class)>
+@if (ChildContent != null)
+{
+@ChildContent
+}
+else
+{
+@Label
+}
+</button>
+@code {
+public static string CheckboxClasses { get; set; } = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-black";
+public static string LabelClasses { get; set; } = "mx-1 select-none dark:text-gray-300";
+public static string ButtonClasses { get; set; } = "select-none inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white";
+public static string EnabledClasses { get; set; } = "cursor-pointer bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500";
+public static string DisabledClasses { get; set; } = "bg-red-400";
+}
+@inherits UiComponentBase
+<button type="button" class=@ClassNames(ButtonClasses, Class) role="switch" aria-checked="false" @onclick="toggleDark">
+<span class=@ClassNames(!BlazorConfig.Instance.DarkMode ? "translate-x-5" : "translate-x-0", InnerClasses)>
+<span class=@ClassNames(!BlazorConfig.Instance.DarkMode ? "opacity-0 ease-out duration-100" : "opacity-100 ease-in duration-200", IconClasses) aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z" /></svg>
+</span>
+<span class=@ClassNames(!BlazorConfig.Instance.DarkMode ? "opacity-100 ease-in duration-200" : "opacity-0 ease-out duration-100", IconClasses) aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-600" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z" /></svg>
+</span>
+</span>
+</button>
+@code {
+public static string ButtonClasses { get; set; } = "bg-gray-200 dark:bg-gray-700 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black";
+public static string InnerClasses { get; set; } = "pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white dark:bg-black shadow transform ring-0 transition ease-in-out duration-200";
+public static string IconClasses { get; set; } = "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity";
+}
+@inherits UiComponentLiteBase
+<button type="button" onclick="toggleDarkMode()" class=@ClassNames(DarkModeToggle.ButtonClasses, Class) role="switch" aria-checked="false" @attributes="AdditionalAttributes">
+<span class="@DarkModeToggle.InnerClasses" data-class-light="translate-x-5" data-class-dark="translate-x-0">
+<span class="@DarkModeToggle.IconClasses" data-class-light="opacity-0 ease-out duration-100" data-class-dark="opacity-100 ease-in duration-200" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z" /></svg>
+</span>
+<span class="@DarkModeToggle.IconClasses" data-class-light="opacity-100 ease-in duration-200" data-class-dark="opacity-0 ease-out duration-100" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-600" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z" /></svg>
+</span>
+</span>
+</button>
+<script>
+window.toggleDarkMode = (function() {
+let isDark = localStorage.getItem('color-scheme') === 'dark'
+const html = document.documentElement
+function renderDarkMode() {
+html.style.setProperty('color-scheme', isDark ? 'dark' : null)
+html.classList.toggle('dark', isDark)
+document.querySelectorAll('[data-class-light]').forEach(el => {
+const removeClasses = isDark
+? el.dataset.classLight
+: el.dataset.classDark
+const addClasses = isDark
+? el.dataset.classDark
+: el.dataset.classLight
+removeClasses.split(' ').forEach(c => el.classList.remove(c))
+addClasses.split(' ').forEach(c => el.classList.add(c))
+})
+}
+renderDarkMode()
+document.addEventListener('DOMContentLoaded', () =>
+Blazor.addEventListener('enhancedload', () => {
+isDark = localStorage.getItem('color-scheme') === 'dark'
+html.classList.toggle('dark', isDark)
+renderDarkMode()
+}))
+return function() {
+isDark = !isDark
+localStorage.setItem('color-scheme', isDark ? 'dark' : 'light')
+renderDarkMode()
+}
+})()
+</script>
+@typeparam Model
+@inherits UiComponentBase
+<CascadingValue IsFixed="true" Value="this">@ChildContent</CascadingValue>
+@if (Items.Count > 0)
+{
+@if (ShowFilters != null)
+{
+<div class="relative">
+<FilterColumn Column=@ShowFilters TopLeft=@ShowFiltersTopLeft Done="OnFilterDone" Saved="OnFilterSave" />
+</div>
+}
+<div @ref="refResults" class=@ClassNames(GridClass, @class)>
+<div class=@Grid2Class>
+<div class=@Grid3Class>
+<div class=@Grid4Class>
+<table class=@TableClass>
+<thead class=@TableHeadClass>
+<tr class=@TableHeaderRowClass>
+@foreach (var column in VisibleColumns)
+{
+var allowFiltering = AllowFiltering && column.AllowFiltering && !TextUtils.IsComplexType(column.FieldType) && !column.IsComputed;
+var isOpen = column == ShowFilters;
+<td class=@ClassNames(column.VisibleFrom != null ? $"hidden {column.VisibleFrom.Value.ToBreakpointCellClass()}" : null,
+column.HeaderClass ?? ClassNames(TableHeaderCellClass, isOpen ? "text-gray-900 dark:text-gray-50" : "text-gray-500 dark:text-gray-400", column.@class))>
+@if (!allowFiltering)
+{
+<div class="flex justify-between items-center">
+@column.HeaderTemplate
+</div>
+}
+else
+{
+<div @onclick="e => OnHeaderSelected(e, column)" class="flex justify-between items-center cursor-pointer hover:text-gray-900 dark:hover:text-gray-50">
+@column.HeaderTemplate
+<SettingsIcons Column=@column IsOpen=isOpen />
+</div>
+}
+</td>
+}
+</tr>
+</thead>
+<tbody class=@TableBodyClass>
+@{ var i = 0; }
+@foreach (var item in Items)
+{
+<tr @key="item.GetHashCode()"
+class=@ClassNames(CssDefaults.Grid.GetTableRowClass(TableStyle, i++, IsSelected(item), AllowSelection), RowClass?.Invoke(item, i))
+@onclick="e => OnRowSelected(e, item)">
+@foreach (var column in VisibleColumns)
+{
+@column.CellTemplate(item)
+}
+</tr>
+}
+</tbody>
+</table>
+</div>
+</div>
+</div>
+</div>
+}
+@typeparam TValue
+@inherits DateTimeInputBase<TValue>
+<div>
+@if (!string.IsNullOrEmpty(UseLabel))
+{
+<label for=@Id class="@DateTimeInput.LabelClasses">@UseLabel</label>
+}
+<div class="mt-1 relative rounded-md shadow-sm">
+<input type="date" class=@ClassNames(DateTimeInput.InputBaseClasses,
+CssClass(DateTimeInput.InputValidClasses, DateTimeInput.InputInvalidClasses))
+id=@Id name=@Id @bind-value="CurrentValueAsDateTime" placeHolder=@UsePlaceholder @bind-value:event="oninput" @attributes="IncludeAttributes">
+@if (HasErrorField)
+{
+<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+<!-- Heroicon name: solid/exclamation-circle -->
+<svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+</svg>
+</div>
+}
+</div>
+@if (HasErrorField)
+{
+<p class="@DateTimeInput.ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+}
+else if (!string.IsNullOrEmpty(UseHelp))
+{
+<p id=@($"{Id}-description") class="text-gray-500">@UseHelp</p>
+}
+</div>
+@inherits DynamicInputBase
+@if (IsSelect)
+{
+<SelectInput Id=@UseId Status=@Status TValue="string" Input=@Input
+@bind-Value="Value" class=@(Input?.Css?.Input) LabelClass=@(Input?.Css?.Label) Help=@TextUtils.Humanize(UseId) @attributes="AllAttributes" />
+}
+else if (IsCheckbox)
+{
+<CheckboxInput Id=@UseId Status=@Status @bind-Value="Value" class=@(Input?.Css?.Input) LabelClass=@(Input?.Css?.Label) Help=@UseHelp @attributes="AllAttributes" />
+}
+else if (UseType == "file")
+{
+string? value = null;
+ICollection<string>? values = null;
+UploadedFile? file = null;
+List<UploadedFile>? files = null;
+if (ValueObject != null)
+{
+value = ValueObject as string;
+if (value == null)
+{
+values = ValueObject as ICollection<string>;
+if (values == null)
+{
+if (ValueObject is System.Collections.IEnumerable)
+{
+files = ValueObject.ConvertTo<List<UploadedFile>>();
+}
+else
+{
+file = ValueObject.ConvertTo<UploadedFile>();
+}
+}
+}
+}
+<FileInput type=@UseType Id=@UseId Status=@Status class=@(Input?.Css?.Input) LabelClass=@(Input?.Css?.Label) Help=@UseHelp @attributes="AllAttributes"
+Multiple=@(Input?.Multiple ?? false) Accept=@(Input?.Accept)
+Value=@value Values=@values File=@file Files=@files
+OnInput="e => Model[Input!.Id] = e" />
+}
+else if (UseType == "tag")
+{
+<TagInput Id=@UseId Status=@Status @bind-Value="Values" class=@(Input?.Css?.Input) LabelClass=@(Input?.Css?.Label) Help=@UseHelp @attributes="AllAttributes" />
+}
+else
+{
+<TextInput type=@UseType Id=@UseId Status=@Status @bind-Value="Value" class=@(Input?.Css?.Input) LabelClass=@(Input?.Css?.Label) Help=@UseHelp @attributes="AllAttributes" />
+}
+@inherits AuthBlazorComponentBase
+@if (!IsAuthenticated)
+{
+<SlideOver Title=@Title SubHeading=@SubHeading Done="Done">
+<Alert HtmlMessage=@HtmlMessage />
+<div class="md:p-4">
+<button type="button" @onclick="signIn"
+class="@ButtonClasses">
+Sign In
+</button>
+</div>
+</SlideOver>
+}
+@code {
+public static string ButtonClasses { get; set; } = "flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50";
+}
+@inherits ErrorSummaryBase
+@if (UseStatus.ShowSummary(UseExcept))
+{
+<div class=@(ClassNames(Classes, CssClass())) role="alert">
+<div class="flex">
+<div class="flex-shrink-0">
+<!-- Heroicon name: solid/x-circle -->
+<svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+</svg>
+</div>
+<div class="ml-3">
+<p class="@MessageClasses">@UseStatus.SummaryMessage(UseExcept)</p>
+</div>
+</div>
+</div>
+}
+@code {
+public static string Classes { get; set; } = "bg-red-50 dark:bg-red-200 border-l-4 border-red-400 p-4";
+public static string MessageClasses { get; set; } = "text-sm text-red-700 dark:text-red-800";
+}
+@using Microsoft.AspNetCore.Components.Forms
+@inherits TextInputBase
+@implements IDisposable
+<div class=@ClassNames("flex", !Multiple ? "justify-between" : "flex-col")>
+<div>
+@if (!string.IsNullOrEmpty(UseLabel))
+{
+<label for=@Id class=@ClassNames(LabelClasses, LabelClass)>@UseLabel</label>
+}
+<div class="block mt-2">
+<span class="sr-only">UseHelp ?? UseLabel</span>
+@{
+var cls = @ClassNames(InputBaseClasses, CssClass(InputValidClasses, InputInvalidClasses));
+}
+<InputFile @ref="InputFile" class=@cls id=@Id name=@Id placeHolder=@UsePlaceholder multiple=@Multiple accept=@Accept @attributes="IncludeAttributes" OnChange="@OnChange" />
+@if (HasErrorField)
+{
+<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+<!-- Heroicon name: solid/exclamation-circle -->
+<svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+</svg>
+</div>
+}
+</div>
+@if (HasErrorField)
+{
+<p class="@ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+}
+else if (!string.IsNullOrEmpty(UseHelp))
+{
+<p id=@($"{Id}-description") class="text-gray-500">@UseHelp</p>
+}
+</div>
+@if (!Multiple)
+{
+var src = imgSrc();
+if (!string.IsNullOrEmpty(src))
+{
+<div class="shrink-0 cursor-pointer" title=@(!isDataUri(src) ? src : "")>
+<img @onclick="openFile" class=@ClassNames("h-16 w-16", imgCls(src)) alt=@($"Current {UseLabel}")
+src=@(FallbackSrc ?? BlazorConfig.Instance.AssetsPathResolver(src))
+@onerror="() => FallbackSrc = BlazorConfig.Instance.FallbackPathResolver(src)">
+</div>
+}
+}
+else if (FileList.Count > 0)
+{
+<div class="mt-3">
+<table class="w-full">
+@foreach (var file in FileList)
+{
+var filePath = file.FilePath ?? "";
+var src = FileIcons.FilePathUri(filePath)!;
+<tr>
+<td class="pr-6 align-bottom pb-2">
+<div class="flex w-full" title=@(!isDataUri(filePath) ? filePath : "")>
+<img src=@((FallbackSrcMap.TryGetValue(src, out var fallback) ? fallback : null) ?? BlazorConfig.Instance.AssetsPathResolver(src))
+class=@ClassNames("mr-2 h-8 w-8", imgCls(filePath))
+@onerror="() => FallbackSrcMap[src] = BlazorConfig.Instance.FallbackPathResolver(src)">
+@if (!isDataUri(filePath))
+{
+<a href=@BlazorConfig.Instance.AssetsPathResolver(filePath) target="_blank" class="overflow-hidden">
+@file.FileName
+</a>
+}
+else
+{
+<span class="overflow-hidden">@file.FileName</span>
+}
+</div>
+</td>
+<td class="align-top pb-2 whitespace-nowrap">
+@if (file.ContentLength > 0)
+{
+<span class="text-gray-500 dark:text-gray-400 text-sm bg-white dark:bg-black">
+@TextUtils.FormatBytes(file.ContentLength)
+</span>
+}
+</td>
+</tr>
+}
+</table>
+</div>
+}
+</div>
+@code {
+string? imgSrc()
+{
+var inputFile = inputFiles?.FirstOrDefault();
+if (inputFile != null)
+return inputFile.FilePath;
+var filePath = Value ?? Values?.FirstOrDefault() ?? File?.FilePath ?? Files?.FirstOrDefault()?.FilePath;
+if (filePath != null)
+{
+var resolvedFilePath = BlazorConfig.Instance.AssetsPathResolver(filePath);
+return FileIcons.FilePathUri(resolvedFilePath);
+}
+return null;
+}
+bool isDataUri(string? src) => src == null ? false : src.StartsWith("data:") || src.StartsWith("blob:");
+string imgCls(string? src) => string.IsNullOrEmpty(src) || src.StartsWith("data:") || src.EndsWith(".svg")
+? ""
+: "rounded-full object-cover";
+public static string ErrorClasses { get; set; } = "mt-2 text-sm text-red-500";
+public static string LabelClasses { get; set; } = "block text-sm font-medium text-gray-700 dark:text-gray-300";
+public static string InputBaseClasses { get; set; } = "block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900";
+public static string InputValidClasses { get; set; } = "block w-full text-sm text-slate-500 dark:text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 dark:file:bg-violet-900 file:text-violet-700 dark:file:text-violet-200 hover:file:bg-violet-100 dark:hover:file:bg-violet-800";
+public static string InputInvalidClasses { get; set; } = "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500";
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
+@using Microsoft.AspNetCore.Components.Forms
+@typeparam TReq
+@inherits BlazorComponentBase
+<div class="m-2 mt-4" @ref="fileDropContainer">
+<label for="blazor-input-file" class=@(ClassNames(LabelClasses, Class))>
+<span class="flex items-center space-x-2">
+<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-600" fill="none" viewBox="0 0 24 24"
+stroke="currentColor" stroke-width="2">
+<path stroke-linecap="round" stroke-linejoin="round"
+d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+</svg>
+@if (!uploading)
+{
+<span class="font-medium text-gray-600">
+Drop files to Attach, or <span class="text-blue-600 underline">browse</span>
+</span>
+}
+else
+{
+<span class="font-medium text-gray-600">
+@progress
+</span>
+}
+</span>
+@if (toggleInputClear)
+{
+<InputFile id="blazor-input-file" OnChange="@OnChange" class="w-auto absolute opacity-0 h-32"/>
+}
+else
+{
+<InputFile id="blazor-input-file" OnChange="@OnChange" class="w-auto absolute opacity-0 h-32"/>
+}
+</label>
+</div>
+<CascadingValue Value="errorStatus">
+<ErrorSummary/>
+</CascadingValue>
+}
+@code {
+public static string LabelClasses { get; set; } = "flex justify-center w-full h-32 px-4 transition border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none";
+}
+@inherits UiComponentLiteBase
+<h1 class=@ClassNames(Classes, Class) @attributes="AdditionalAttributes">@ChildContent</h1>
+@code {
+[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+public static string Classes { get; set; } = "mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl";
+}
+@inherits UiComponentLiteBase
+<h2 class=@ClassNames(Classes, Class) @attributes="AdditionalAttributes">@ChildContent</h2>
+@code {
+[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+public static string Classes { get; set; } = "mb-4 text-3xl md:text-4xl font-bold tracking-tighter leading-tight md:pr-8 whitespace-nowrap text-center pt-8";
+}
+@inherits UiComponentLiteBase
+<h3 class=@ClassNames(Classes, Class) @attributes="AdditionalAttributes">@ChildContent</h3>
+@code {
+[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+public static string Classes { get; set; } = "mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100 leading-tight";
+}
+@inherits UiComponentLiteBase
+<h4 class=@ClassNames(Classes, Class) @attributes="AdditionalAttributes">@ChildContent</h4>
+@code {
+[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+public static string Classes { get; set; } = "text-xl font-semibold text-gray-900 dark:text-gray-100 leading-tight";
+}
+<div class=@(@class)>
+@((MarkupString) HtmlUtils.HtmlDump(Value ?? ""))
+</div>
+@inherits UiComponentLiteBase
+<a class=@ClassNames(GetStyleClass(Style), Class) @attributes="AdditionalAttributes">@ChildContent</a>
+@code {
+[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+public static string Classes  => GetStyleClass(LinkStyle.Indigo);
+[Parameter] public LinkStyle Style { get; set; } = LinkStyle.Indigo;
+public static string GetStyleClass(LinkStyle style) => style switch
+{
+LinkStyle.Blue => "text-blue-600 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-400",
+LinkStyle.Red => "text-red-600 dark:text-red-300 hover:text-red-500 dark:hover:text-red-400",
+LinkStyle.Green => "text-green-600 dark:text-green-300 hover:text-green-500 dark:hover:text-green-400",
+LinkStyle.Sky => "text-sky-600 dark:text-sky-300 hover:text-sky-500 dark:hover:text-sky-400",
+_ => "text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400"
+};
+}
+@inherits UiComponentBase
+@((MarkupString)ToHtml())
+@inherits UiComponentBase
+@if (!string.IsNullOrEmpty(prerenderedHtml))
+{
+@((MarkupString)prerenderedHtml)
+}
+else
+{
+<div class=@ClassNames(Classes, @class)>
+<h1 class="flex">
+<svg class=@ClassNames("self-center inline mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300", ImageClass)
+role="status" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
+<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
+</svg>
+<span>@Message</span>
+</h1>
+</div>
+}
+@code {
+public static string Classes = "mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-300";
+}
+@inherits TextInputBase
+@implements IHasJsonApiClient
+@if (AppMetadata != null)
+{
+<div class=@ClassNames("lookup-field", FieldClass)>
+<input type="hidden" name=@Input.Id value=@Value />
+@if (!string.IsNullOrEmpty(UseLabel))
+{
+<div class="flex justify-between">
+<label for=@Input.Id class=@ClassNames("block text-sm font-medium text-gray-700 dark:text-gray-300", LabelClass)>@UseLabel</label>
+@if (!string.IsNullOrEmpty(Value))
+{
+<div class="flex items-center">
+<span class="text-sm text-gray-500 dark:text-gray-400 mr-1">@Value</span>
+<button @onclick="Clear" type="button" title="clear" class="mr-1 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:ring-offset-black">
+<span class="sr-only">Clear</span>
+<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
+</button>
+</div>
+}
+</div>
+}
+@if (Property.Ref != null)
+{
+<div class="mt-1 relative">
+<button type="button" class="lookup flex relative w-full bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+@onclick="lookup" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
+<span class="w-full inline-flex truncate">
+<span class="text-blue-700 dark:text-blue-300 flex cursor-pointer">
+<Icon class="mr-1 w-5 h-5" Image=@Icon />
+<span>@refInfoValue</span>
+</span>
+</span>
+<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+</svg>
+</span>
+</button>
+</div>
+}
+else if (ErrorFieldMessage != null)
+{
+<p class="mt-2 text-sm text-red-500" id=@($"{Input.Id}-error")>@ErrorFieldMessage</p>
+}
+</div>
+<DynamicModalLookup @ref="LocalModalLookup" AppMetadata=@AppMetadata />
+}
+@inherits UiComponentBase
+<div @onclick="Close" id=@Id aria-labelledby="modal-title" role="dialog" aria-modal="true" class=@ClassNames("relative z-10", DialogTransition.DisplayClass)>
+<div class=@ClassNames("fixed inset-0 bg-gray-500 dark:bg-gray-400 bg-opacity-75 dark:bg-opacity-75 transition-opacity", DialogTransition.Class)></div>
+<div class="fixed inset-0 z-10 overflow-y-auto">
+<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+<!-- This element is to trick the browser into centering the modal contents. -->
+<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+<div class=@ClassNames("relative transform overflow-hidden rounded-lg bg-white dark:bg-black text-left shadow-xl transition-all sm:my-8", SizeClass,
+ContentTransition.DisplayClass)>
+<div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4" @onclick="Close">
+<button type="button" @onclick="Close"
+class="bg-white dark:bg-black rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+<span class="sr-only">Close</span>
+<!-- Heroicon name: outline/x -->
+<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+</svg>
+</button>
+</div>
+<div @onclick:stopPropagation="true">
+@ChildContent
+</div>
+</div>
+</div>
+</div>
+</div>
+@typeparam Model
+@inherits ModalLookup
+<ModalDialog @ref="ModalDialog" Id=@Id Show=@Show Close="Close">
+<div class="pt-2 overflow-auto" style="min-height:620px">
+<div class="mt-3 pl-5 flex flex-wrap items-center">
+<h3 class="hidden sm:block text-xl leading-6 font-medium text-gray-900 dark:text-gray-50 mr-3">
+Select <span class="hidden md:inline">@TextUtils.Humanize(typeof(Model).Name)</span>
+</h3>
+<div class="flex pb-1 sm:pb-0">
+<button type="button" class="pl-2 text-gray-700 hover:text-indigo-600" title=@($"{typeof(Model).Name} Preferences") @onclick="_ => ShowQueryPrefs = !ShowQueryPrefs">
+<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-width="1.5" fill="none"><path d="M9 3H3.6a.6.6 0 0 0-.6.6v16.8a.6.6 0 0 0 .6.6H9M9 3v18M9 3h6M9 21h6m0-18h5.4a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H15m0-18v18" stroke="currentColor" /></g></svg>
+</button>
+<button type="button" class=@ClassNames("pl-2", canFirst ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
+title="First page" disabled=@(!canFirst) @onclick="_ => skipTo(-Total)">
+<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z" fill="currentColor" /></svg>
+</button>
+<button type="button" class=@ClassNames("pl-2", canPrev ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
+title="Previous page" disabled=@(!canPrev) @onclick="_ => skipTo(-ApiPrefs.Take)">
+<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z" fill="currentColor" /></svg>
+</button>
+<button type="button" class=@ClassNames("pl-2", canNext ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
+title="Next page" disabled=@(!canNext) @onclick="_ => skipTo(ApiPrefs.Take)">
+<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor" /></svg>
+</button>
+<button type="button" class=@ClassNames("pl-2", canLast ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
+title="Last page" disabled=@(!canLast) @onclick="_ => skipTo(Total)">
+<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z" fill="currentColor" /></svg>
+</button>
+</div>
+<div class="flex pb-1 sm:pb-0">
+<div class="px-4 text-lg">
+@if (apiLoading)
+{
+<span>Querying...</span>
+}
+else if (Results.Count > 0)
+{
+<span>
+<span class="hidden xl:inline">
+Showing Results
+</span>
+@(Skip + 1) - @Math.Min(Skip + Results.Count, Total) <span> of @Total</span>
+</span>
+}
+else if (Api != null)
+{
+<span>No Results</span>
+}
+</div>
+</div>
+@if (hasPrefs)
+{
+<div class="pl-2">
+<button type="button" @onclick="clearPrefs" title="Reset Preferences & Filters" class=@ToolbarButtonClass>
+<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M6.78 2.72a.75.75 0 0 1 0 1.06L4.56 6h8.69a7.75 7.75 0 1 1-7.75 7.75a.75.75 0 0 1 1.5 0a6.25 6.25 0 1 0 6.25-6.25H4.56l2.22 2.22a.75.75 0 1 1-1.06 1.06l-3.5-3.5a.75.75 0 0 1 0-1.06l3.5-3.5a.75.75 0 0 1 1.06 0Z" /></svg>
+</button>
+</div>
+}
+@if (filtersCount > 0)
+{
+<div class="pl-2">
+<button type="button" @onclick=@(_ => open = open == Features.Filters ? null : Features.Filters) class=@ToolbarButtonClass aria-expanded="false">
+<svg class="flex-none w-5 h-5 mr-2 text-gray-400 dark:text-gray-500 group-hover:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+<path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
+</svg>
+<span class="mr-1">
+@filtersCount @(filtersCount == 1 ? "Filter" : "Filters")
+</span>
+@if (open != Features.Filters)
+{
+<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
+</svg>
+}
+else
+{
+<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd" />
+</svg>
+}
+</button>
+</div>
+}
+</div>
+@if (open == Features.Filters)
+{
+<FilterViews class="border-y border-gray-200 dark:border-gray-800 py-8 my-2" Columns="GetColumns()" Done="() => open = null" FiltersChanged="UpdateAsync" />
+}
+@if (errorSummary != null)
+{
+<ErrorSummary class="p-4" ExplicitStatus="Api?.Error" />
+}
+else if (apiLoading)
+{
+<Loading class="p-4 text-xl text-gray-500 dark:text-gray-400" ImageClass="w-5 h-5" />
+}
+else
+{
+<div>
+@if (Results.Count > 0)
+{
+<div class="">
+<CascadingValue IsFixed="true" Value="this">
+<DataGrid Id=@Id Model="Model" @ref="DataGrid" Items="Results" SelectedColumns="ApiPrefs.SelectedColumns"
+PropertyChanged="_ => StateHasChanged()" FiltersChanged="UpdateAsync"
+RowSelected="OnRowSelected" HeaderSelected="HeaderSelected"
+AllowSelection="true" AllowFiltering="true" FilterDefinitions="FilterDefinitions"
+FiltersTopLeftResolver="FiltersTopLeftResolver"
+TableStyle="TableStyle.FullWidth">
+<CascadingValue IsFixed="true" Value="DataGrid">
+@Columns
+</CascadingValue>
+</DataGrid>
+</CascadingValue>
+</div>
+}
+</div>
+}
+</div>
+</ModalDialog>
+<QueryPrefs Show=@ShowQueryPrefs Columns="ViewModelColumns" Prefs="ApiPrefs" Done="() => ShowQueryPrefs = false" Save="saveApiPrefs" />
+@inherits UiComponentBase
+@if (!string.IsNullOrEmpty(Title))
+{
+<h2 class="@TitleClasses">
+@Title
+</h2>
+}
+<ul role="list" class="@ListClasses">
+<CascadingValue IsFixed="true" Value="this">@ChildContent</CascadingValue>
+</ul>
+@code {
+public static string TitleClasses { get; set; } = "text-base font-semibold text-gray-500 dark:text-gray-400";
+public static string ListClasses { get; set; } = "mt-4 divide-y divide-gray-200 dark:divide-gray-800 border-t border-b border-gray-200 dark:border-gray-800";
+}
+@inherits UiComponentBase
+<li class="relative flex items-start space-x-4 py-6">
+<div class="flex-shrink-0">
+<span class="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-900">
+<Icon class="w-6 h-6 text-indigo-700 dark:text-indigo-300" Image=@Icon Src=@IconSrc Svg=@IconSvg Alt=@IconAlt />
+</span>
+</div>
+<div class="min-w-0 flex-1">
+<h3 class="text-base font-medium text-gray-900 dark:text-gray-100">
+<span class="rounded-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2">
+<a href=@href class="focus:outline-none">
+<span class="absolute inset-0" aria-hidden="true"></span>
+@Title
+</a>
+</span>
+</h3>
+<p class="text-base text-gray-500">
+@ChildContent
+</p>
+</div>
+<div class="flex-shrink-0 self-center">
+<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+</svg>
+</div>
+</li>
+@using System.Collections
+@using ServiceStack.Text
+@{
+void RenderValue(object? value)
+{
+if (Format?.Method == null)
+{
+@FormatValue(value)
+}
+else
+{
+var str = $"{value}";
+var attrs = (Format.Options != null
+? BlazorConfig.Instance.JSParseObject(Format.Options)
+: null) ?? new();
+var cls = attrs.Remove("cls", out var oClass) ? oClass as string : null;
+if (Format.Method == FormatMethods.IconRounded)
+{
+var src = str;
+<img class=@(cls ?? IconRoundedClass) title=@str
+src=@(UseImageSrc ?? BlazorConfig.Instance.AssetsPathResolver(src)) @onerror="() => UseImageSrc = BlazorConfig.Instance.FallbackPathResolver(src)">
+}
+else if (Format.Method == FormatMethods.Icon)
+{
+var src = str;
+<img class=@(cls ?? IconClass) title=@str
+src=@(UseImageSrc ?? BlazorConfig.Instance.AssetsPathResolver(src)) @onerror="() => UseImageSrc = BlazorConfig.Instance.FallbackPathResolver(src)">
+}
+else if (Format.Method == FormatMethods.Currency)
+{
+<span class=@cls>@($"{value.ConvertTo<decimal>():C}")</span>
+}
+else if (Format.Method == FormatMethods.Bytes)
+{
+<span class=@cls>@TextUtils.FormatBytes(value.ConvertTo<long>())</span>
+}
+else if (Format.Method.StartsWith("link"))
+{
+if (Format.Method == FormatMethods.Link)
+{
+<a class=@(cls ?? "text-blue-600 hover:text-blue-800") href=@str @attributes=attrs @onclick:stopPropagation>@str</a>
+}
+else if (Format.Method == FormatMethods.LinkPhone)
+{
+<a class=@(cls ?? "text-blue-600 hover:text-blue-800") href=@($"tel:{str}") @attributes=attrs @onclick:stopPropagation>@str</a>
+}
+else if (Format.Method == FormatMethods.LinkEmail)
+{
+var href = str;
+if (attrs.Remove("subject", out var oSubject) && oSubject is string subject)
+href = href.AddQueryParam("subject", subject.UrlEncode().Replace("+", "%20"), encode: false);
+if (attrs.Remove("body", out var oBody) && oBody is string body)
+href = href.AddQueryParam("body", body.UrlEncode().Replace("+","%20"), encode:false);
+<a class=@(cls ?? "text-blue-600 hover:text-blue-800") href=@($"mailto:{href}") @attributes=attrs @onclick:stopPropagation>@str</a>
+}
+}
+else if (Format.Method == FormatMethods.Attachment)
+{
+var url = str;
+var fileName = FileIcons.GetFileName(url)!;
+var ext = FileIcons.GetExt(fileName);
+var imgSrc = ext == null || FileIcons.CanPreview(url)
+? BlazorConfig.Instance.AssetsPathResolver(url)
+: FileIcons.IconFallbackSrc(url);
+<a class=@(cls ?? "flex") href=@BlazorConfig.Instance.AssetsPathResolver(url) title=@url target="_blank">
+<img class=@IconClass src=@imgSrc @onerror="() => UseImageSrc = BlazorConfig.Instance.FallbackPathResolver(imgSrc)">
+<span class="pl-1">@fileName</span>
+</a>
+}
+else if (Format.Method != FormatMethods.Hidden)
+{
+<span class=@cls>@FormatValue(value)</span>
+}
+}
+}
+}
+@if (TextUtils.IsComplexType(Value?.GetType()))
+{
+var useValue = Value;
+var e = Value as IEnumerable;
+var isCollection = e != null && Value is not IDictionary;
+var count = e != null && isCollection && IncludeCount ? EnumerableUtils.Count(e) : 0;
+<span class=@CssUtils.ClassNames(@class)>
+@if (isCollection)
+{
+useValue = EnumerableUtils.FirstOrDefault(e);
+<span class="mr-2">@count</span>
+}
+@if (IncludeIcon)
+{
+<Icon class=@ValueIconClass Image=Value!.GetType().GetIcon() />
+}
+<span>
+@if (isCollection)
+{
+@("[ ")
+}
+@if (!isCollection || count > 0)
+{
+@("{ ")
+@if (TextUtils.IsComplexType(useValue?.GetType()))
+{
+var dict = useValue.ToObjectDictionary();
+var keys = dict.Keys.ToList();
+var len = Math.Min(MaxNestedFields, keys.Count);
+for (var i = 0; i < len; i++)
+{
+var key = keys[i];
+var val = dict[key];
+var value = FormatValue(val);
+var str = TextUtils.Truncate(value, MaxNestedFieldLength);
+if (i > 0)
+{
+@(", ")
+}
+{
+<b class="font-medium">@key</b>
+@($": {str}")
+}
+}
+if (keys.Count > len)
+{
+@("...")
+}
+}
+else
+{
+RenderValue(useValue);
+}
+@(" }")
+}
+@if (isCollection)
+{
+@(" ]")
+}
+</span>
+</span>
+}
+else
+{
+RenderValue(Value);
+}
+@inherits UiComponentBase
+@if (!string.IsNullOrEmpty(href))
+{
+<a href=@href class=@ClassNames(Classes(Style), Class) title=@title target=@target @onclick:stopPropagation @attributes="IncludeAttributes">
+@ChildContent
+</a>
+}
+else
+{
+<button type=@type @onclick="onclick" class=@ClassNames(Classes(Style), Class) @attributes="IncludeAttributes">
+@ChildContent
+</button>
+}
+@code {
+public static string BaseClass { get; set; } = "inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black";
+public static string GetStyleClass(ButtonStyle style) => style switch
+{
+ButtonStyle.Blue => "text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+ButtonStyle.Purple => "text-white bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800",
+ButtonStyle.Red => "focus:ring-red-500 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500",
+ButtonStyle.Green => "focus:ring-green-300 text-white bg-green-600 hover:bg-green-700 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500",
+ButtonStyle.Sky => "focus:ring-sky-300 text-white bg-sky-600 hover:bg-sky-700 focus:ring-sky-500 dark:bg-sky-600 dark:hover:bg-sky-700 dark:focus:ring-sky-500",
+ButtonStyle.Cyan => "focus:ring-cyan-300 text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-500",
+_ => "focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800"
+};
+public static string Classes(ButtonStyle style) => BaseClass + " " + GetStyleClass(style);
+}
+@inherits UiComponentBase
+@if (!string.IsNullOrEmpty(href))
+{
+<a href=@href class=@ClassNames(Classes, Class) title=@title target=@target @onclick:stopPropagation @attributes="IncludeAttributes">
+@ChildContent
+</a>
+}
+else
+{
+<button type=@type @onclick="onclick" class=@ClassNames(Classes, Class) @attributes="IncludeAttributes">
+@ChildContent
+</button>
+}
+@typeparam TValue
+@inherits SelectInputBase<TValue>
+<div class=@FieldClass>
+@if (!string.IsNullOrEmpty(UseLabel))
+{
+<label for=@Id class=@ClassNames(SelectInput.LabelClasses, LabelClass)>@UseLabel</label>
+}
+<select id=@Id name=@Id class=@ClassNames(SelectInput.InputBaseClasses,
+CssClass(SelectInput.InputValidClasses, SelectInput.InputInvalidClasses))
+@bind="CurrentValue" @attributes="IncludeAttributes">
+@ChildContent
+@foreach (var kvp in KvpValues())
+{
+<option @key=@kvp.Key value=@kvp.Key>@kvp.Value</option>
+}
+</select>
+@if (HasErrorField)
+{
+<p class="@SelectInput.ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+}
+</div>
+@inherits BlazorComponentBase
+<div class=@SlideOverClass aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
+<div class="">
+<div class="">
+<div class=@DialogClass>
+<div class=@ClassNames(PanelClass, SlideOverTransition.Class)>
+<form class=@FormClass @onsubmit="CloseAsync">
+<!-- Header -->
+<div class="h-0 flex-1 overflow-y-auto">
+@if (ShowTitlebar)
+{
+<div class=@TitlebarClass>
+<div class="flex items-start justify-between space-x-3">
+<div class="space-y-1">
+<h2 class=@HeadingClass id="slide-over-title">@Title</h2>
+@if (SubHeading != null)
+{
+<div class="mt-1">
+<p class="notes text-sm text-gray-500">@((MarkupString)SubHeading)</p>
+</div>
+}
+</div>
+@if (ShowCloseButton)
+{
+<div class="flex h-7 items-center">
+<button type="button" @onclick="CloseAsync" class=@CloseButtonClass>
+<span class="sr-only">Close panel</span>
+<!-- Heroicon name: outline/x-mark -->
+<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+</svg>
+</button>
+</div>
+}
+</div>
+</div>
+}
+@ChildContent
+</div>
+@if (ShowFooter)
+{
+<div class="flex flex-shrink-0 justify-end px-4 py-4">
+<SecondaryButton @onclick="CloseAsync">
+Close
+</SecondaryButton>
+</div>
+}
+</form>
+</div>
+</div>
+</div>
+</div>
+</div>
+@inherits TextInputBase<List<string>>
+<div class=@FieldClass>
+@if (!string.IsNullOrEmpty(UseLabel))
+{
+<label for=@Id class=@ClassNames(@LabelClasses, LabelClass)>@UseLabel</label>
+}
+<div class="mt-1 w-full relative rounded-md shadow-sm">
+@{
+var cls = ClassNames(InputBaseClasses, CssClass(InputValidClasses, InputInvalidClasses));
+}
+<button class=@cls @onclick="handleClick" @onclick:preventDefault>
+<div class="flex flex-wrap pb-1.5">
+@foreach (var tag in Value.OrEmpty())
+{
+<div class="pt-1.5 pl-1">
+<span class="inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 dark:bg-indigo-800 text-indigo-700 dark:text-indigo-300">
+@tag
+<button type="button" @onclick="_ => RemoveTagAsync(tag)" class="flex-shrink-0 ml-1 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 dark:text-indigo-500 hover:bg-indigo-200 dark:hover:bg-indigo-800 hover:text-indigo-500 dark:hover:text-indigo-400 focus:outline-none focus:bg-indigo-500 focus:text-white dark:focus:text-black">
+<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8"><path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7"></path></svg>
+</button>
+</span>
+</div>
+}
+<div class="pt-1.5 pl-1 shrink">
+<input @ref=@txtInput type=@UseType id=@Id name=@Id @bind-value="InputValue" placeHolder=@placeholder
+class="p-0 dark:bg-transparent rounded-md border-none focus:!border-none focus:!outline-none"
+style=@($"box-shadow:none !important;width:{InputValue.Length + 1}ch")
+@onkeydown="KeyDownAsync" @onkeypress="KeyPressAsync" @bind-value:event="oninput" @onpaste="OnPasteAsync" @onblur="OnBlurAsync"
+@attributes="IncludeAttributes">
+</div>
+</div>
+</button>
+@if (HasErrorField)
+{
+<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+<svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+</svg>
+</div>
+}
+</div>
+@if (HasErrorField)
+{
+<p class="@ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+}
+else if (!string.IsNullOrEmpty(UseHelp))
+{
+<p id=@($"{Id}-description") class="text-gray-500">@UseHelp</p>
+}
+</div>
+@code {
+public static string ErrorClasses { get; set; } = "mt-2 text-sm text-red-500";
+public static string LabelClasses { get; set; } = "block text-sm font-medium text-gray-700 dark:text-gray-300";
+public static string InputBaseClasses { get; set; } = "w-full cursor-text flex flex-wrap sm:text-sm rounded-md dark:text-white dark:bg-gray-900 border focus-within:border-transparent focus-within:ring-1 focus-within:outline-none";
+public static string InputValidClasses { get; set; } = "shadow-sm border-gray-300 dark:border-gray-600 focus-within:ring-indigo-500 focus-within:border-indigo-500";
+public static string InputInvalidClasses { get; set; } = "pr-10 border-red-300 text-red-900 placeholder-red-300 focus-within:outline-none focus-within:ring-red-500 focus-within:border-red-500";
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
+@typeparam TValue
+@inherits TextInputBase<TValue>
+<div class=@FieldClass>
+@if (!string.IsNullOrEmpty(UseLabel))
+{
+<label for=@Id class=@ClassNames(TextAreaInput.LabelClasses, LabelClass)>@UseLabel</label>
+}
+<div class="mt-1 relative rounded-md shadow-sm">
+<textarea id=@Id name=@Id @bind="CurrentValue" placeHolder=@UsePlaceholder @attributes="IncludeAttributes"
+class=@ClassNames(TextAreaInput.InputBaseClasses,
+CssClass(TextAreaInput.InputValidClasses,TextAreaInput.InputInvalidClasses)) />
+@if (HasErrorField)
+{
+<p class="@TextAreaInput.ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+}
+else if (!string.IsNullOrEmpty(UseHelp))
+{
+<p id=@($"{Id}-description") class="text-gray-500">@UseHelp</p>
+}
+</div>
+</div>
+@typeparam TValue
+@inherits TextInputBase<TValue>
+<div class=@FieldClass>
+@if (!string.IsNullOrEmpty(UseLabel))
+{
+<label for=@Id class=@ClassNames(TextInput.LabelClasses, LabelClass)>@UseLabel</label>
+}
+<div class="mt-1 relative rounded-md shadow-sm">
+@{
+var cls = ClassNames(TextInput.InputBaseClasses, CssClass(TextInput.InputValidClasses, TextInput.InputInvalidClasses));
+}
+@if (UseType == Html.Input.Types.Textarea)
+{
+<textarea type=@UseType class=@cls id=@Id name=@Id @bind-value="CurrentValue" placeHolder=@UsePlaceholder @bind-value:event="oninput" @attributes="IncludeAttributes"></textarea>
+}
+else
+{
+<input type=@UseType class=@cls id=@Id name=@Id @bind-value="CurrentValue" placeHolder=@UsePlaceholder @bind-value:event="oninput" @attributes="IncludeAttributes">
+}
+@if (HasErrorField)
+{
+<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+<svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+</svg>
+</div>
+}
+</div>
+@if (HasErrorField)
+{
+<p class="@TextInput.ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+}
+else if (!string.IsNullOrEmpty(UseHelp))
+{
+<p id=@($"{Id}-description") class="text-gray-500">@UseHelp</p>
+}
+</div>
+@inherits UiComponentBase
+<a href=@href class=@ClassNames(Classes, Class) title=@title target=@target @onclick="onclick" @onclick:stopPropagation>@ChildContent</a>
+@code {
+public static string Classes { get; set; } = "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200";
+}
+using ServiceStack.Blazor.Components;
+namespace ServiceStack.Blazor;
+/// <summary>
+/// For CSS classes used in *.cs so they're exported to tailwind.html
+/// </summary>
+public static class CssDefaults
+{
+public static class Grid
+{
+public const TableStyle DefaultTableStyle = TableStyle.StripedRows;
+public const string GridClass = "mt-4 flex flex-col";
+public const string Grid2Class = "-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8";
+public const string Grid3Class = "inline-block min-w-full py-2 align-middle md:px-6 lg:px-8";
+public const string Grid4Class = "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg";
+public const string TableClass = "min-w-full divide-y divide-gray-200 dark:divide-gray-700";
+public const string TableHeadClass = "bg-gray-50 dark:bg-gray-900";
+public const string TableCellClass = "px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400";
+public const string TableHeaderRowClass = "select-none";
+public const string TableHeaderCellClass = "px-6 py-4 text-left text-sm font-medium tracking-wider whitespace-nowrap";
+public const string TableBodyClass = "";
+public static string GetGridClass(TableStyle style = DefaultTableStyle) => GridClass;
+public static string GetGrid2Class(TableStyle style = DefaultTableStyle) => style.HasFlag(TableStyle.FullWidth)
+? "overflow-x-auto"
+: Grid2Class;
+public static string GetGrid3Class(TableStyle style = DefaultTableStyle) => style.HasFlag(TableStyle.FullWidth)
+? "inline-block min-w-full py-2 align-middle"
+: Grid3Class;
+public static string GetGrid4Class(TableStyle style = DefaultTableStyle) => style.HasFlag(TableStyle.WhiteBackground)
+? ""
+: style.HasFlag(TableStyle.FullWidth)
+? "overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5"
+: Grid4Class;
+public static string GetTableClass(TableStyle style = DefaultTableStyle) => style.HasFlag(TableStyle.FullWidth) || style.HasFlag(TableStyle.VerticalLines)
+? "min-w-full divide-y divide-gray-300"
+: TableClass;
+public static string GetTableHeadClass(TableStyle style = DefaultTableStyle) => style.HasFlag(TableStyle.WhiteBackground)
+? ""
+: TableHeadClass;
+public static string GetTableHeaderRowClass(TableStyle style = DefaultTableStyle) =>
+TableHeaderRowClass + (style.HasFlag(TableStyle.VerticalLines) ? " divide-x divide-gray-200 dark:divide-gray-700" : "");
+public static string GetTableHeaderCellClass(TableStyle style = DefaultTableStyle) =>
+TableHeaderCellClass + (style.HasFlag(TableStyle.UppercaseHeadings) ? " uppercase" : "");
+public static string GetTableBodyClass(TableStyle style = DefaultTableStyle) =>
+(style.HasFlag(TableStyle.WhiteBackground) || style.HasFlag(TableStyle.VerticalLines)
+? "divide-y divide-gray-200 dark:divide-gray-800"
+: "")
++ (style.HasFlag(TableStyle.VerticalLines)
+? " bg-white"
+: "");
+public static string GetTableRowClass(TableStyle style, int i, bool selected, bool allowSelection) =>
+(allowSelection ? "cursor-pointer " : "") +
+(selected ? "bg-indigo-100 dark:bg-blue-800" : (allowSelection ? "hover:bg-yellow-50 dark:hover:bg-blue-900 " : "") + (style.HasFlag(TableStyle.StripedRows)
+? (i % 2 == 0 ? "bg-white dark:bg-black" : "bg-gray-50 dark:bg-gray-800")
+: "bg-white dark:bg-black")) +
+(style.HasFlag(TableStyle.VerticalLines) ? " divide-x divide-gray-200 dark:divide-gray-700" : "");
+}
+public static class Form
+{
+public const FormStyle DefaultFormStyle = FormStyle.SlideOver;
+public static string GetPanelClass(FormStyle style = FormStyle.SlideOver) => style == FormStyle.Card ? Card.PanelClass : SlideOver.PanelClass;
+public static string GetFormClass(FormStyle style = FormStyle.SlideOver) => style == FormStyle.Card ? Card.FormClass : SlideOver.FormClass;
+public static string GetHeadingClass(FormStyle style = FormStyle.SlideOver) => style == FormStyle.Card ? Card.HeadingClass : SlideOver.HeadingClass;
+public static string GetSubHeadingClass(FormStyle style = FormStyle.SlideOver) => style == FormStyle.Card ? Card.SubHeadingClass : SlideOver.SubHeadingClass;
+public const string ButtonsClass = "mt-4 px-4 py-3 bg-gray-50 dark:bg-gray-900 sm:px-6 flex flex-wrap justify-between";
+public const string LegendClass = "text-base font-medium text-gray-900 dark:text-gray-100 text-center mb-4";
+public static class SlideOver
+{
+public const string PanelClass = "pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg";
+public const string FormClass = "flex h-full flex-col divide-y divide-gray-200 dark:divide-gray-700 shadow-xl bg-white dark:bg-black";
+public const string TitlebarClass = "bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6";
+public const string HeadingClass = "text-lg font-medium text-gray-900 dark:text-gray-100";
+public const string SubHeadingClass = "mt-1 text-sm text-gray-500 dark:text-gray-400";
+public const string CloseButtonClass = "rounded-md bg-gray-50 dark:bg-gray-900 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:ring-offset-black";
+public static DataTransition SlideOverTransition = new DataTransition(
+entering: new(@class: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-full", to: "translate-x-0"),
+leaving: new(@class: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-0", to: "translate-x-full"),
+visible: false);
+}
+public static class Card
+{
+public const string PanelClass = "shadow sm:overflow-hidden sm:rounded-md";
+public const string FormClass = "space-y-6 bg-white dark:bg-black py-6 px-4 sm:p-6";
+public const string HeadingClass = "text-lg font-medium leading-6 text-gray-900 dark:text-gray-100";
+public const string SubHeadingClass = "mt-1 text-sm text-gray-500 dark:text-gray-400";
+}
+}
+public static class Modal
+{
+public const string SizeClass = "sm:max-w-prose lg:max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl sm:w-full";
+}
+public static class SlideOver
+{
+public const string SlideOverClass = "relative z-10";
+public const string DialogClass = "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16";
+public const string PanelClass = "pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg";
+public const string FormClass = "flex h-full flex-col divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-black shadow-xl";
+public const string TitlebarClass = "bg-gray-50 dark:bg-gray-900 p-3 sm:p-6";
+public const string HeadingClass = "text-lg font-medium text-gray-900 dark:text-gray-50";
+public const string CloseButtonClass = "rounded-md bg-gray-50 dark:bg-black text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:ring-offset-black";
+public const string TransitionClass = "transform transition ease-in-out duration-500 sm:duration-700";
+}
+public static class HtmlFormat
+{
+public const string Class = "prose html-format";
+}
+public static class PreviewFormat
+{
+public const string Class = "flex items-center";
+public const string IconClass = "w-6 h-6";
+public const string IconRoundedClass = "w-8 h-8 rounded-full";
+public const string ValueIconClass = "w-5 h-5 mr-1";
+}
+public static string ToBreakpointCellClass(this Breakpoint breakpoint) => breakpoint switch
+{
+// Use full class names so tailwindcss can find it
+Breakpoint.ExtraSmall => "xs:table-cell",
+Breakpoint.Small => "sm:table-cell",
+Breakpoint.Medium => "md:table-cell",
+Breakpoint.Large => "lg:table-cell",
+Breakpoint.ExtraLarge => "xl:table-cell",
+Breakpoint.ExtraLarge2x => "2xl:table-cell",
+_ => throw new NotSupportedException(),
+};
+}
+public enum Breakpoint
+{
+ExtraSmall,
+Small,
+Medium,
+Large,
+ExtraLarge,
+ExtraLarge2x,
+}
+/* CSS Classes for Generic Components */
+public static class TextInput
+{
+public static string ErrorClasses { get; set; } = "mt-2 text-sm text-red-500";
+public static string LabelClasses { get; set; } = "block text-sm font-medium text-gray-700 dark:text-gray-300";
+public static string InputBaseClasses { get; set; } = "block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:shadow-none";
+public static string InputValidClasses { get; set; } = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600";
+public static string InputInvalidClasses { get; set; } = "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500";
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
+public static class DateTimeInput
+{
+public static string ErrorClasses { get; set; } = TextInput.ErrorClasses;
+public static string LabelClasses { get; set; } = TextInput.LabelClasses;
+public static string InputBaseClasses { get; set; } = TextInput.InputBaseClasses;
+public static string InputValidClasses { get; set; } = TextInput.InputValidClasses;
+public static string InputInvalidClasses { get; set; } = TextInput.InputInvalidClasses;
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
+public static class TextAreaInput
+{
+public static string ErrorClasses { get; set; } = TextInput.ErrorClasses;
+public static string LabelClasses { get; set; } = TextInput.LabelClasses;
+public static string InputBaseClasses { get; set; } = "shadow-sm block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:shadow-none";
+public static string InputValidClasses { get; set; } = "text-gray-900 focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600";
+public static string InputInvalidClasses { get; set; } = "text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300";
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
+public static class SelectInput
+{
+public static string ErrorClasses { get; set; } = TextInput.ErrorClasses;
+public static string LabelClasses { get; set; } = TextInput.LabelClasses;
+public static string InputBaseClasses { get; set; } = "mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none border-gray-300 sm:text-sm rounded-md dark:text-white dark:bg-gray-900 dark:border-gray-600 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:shadow-none";
+public static string InputValidClasses { get; set; } = "text-gray-900 focus:ring-indigo-500 focus:border-indigo-500";
+public static string InputInvalidClasses { get; set; } = "text-red-900 focus:ring-red-500 focus:border-red-500";
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
+public static class CheckboxInput
+{
+public static string ErrorClasses { get; set; } = "text-gray-500";
+public static string LabelClasses { get; set; } = "font-medium text-gray-700 dark:text-gray-300";
+public static string InputClasses { get; set; } = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-black";
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..89be0c9
--- /dev/null
+++ b/README.md
@@ -0,0 +1,18 @@
+# blazor-vue
+
+.NET 8.0 Simple, Server Rendered Blazor Tailwind App with Vue interactivity
+
+[![](https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/blazor-vue.png)](http://blazor-vue.web-templates.io/)
+
+> Browse [source code](https://github.com/NetCoreTemplates/blazor-vue), view live demo [blazor-vue.web-templates.io](http://blazor-vue.web-templates.io) and install with [dotnet-new](https://docs.servicestack.net/dotnet-new):
+
+    $ dotnet tool install -g x
+
+    $ x new blazor-vue ProjectName
+
+Alternatively write new project files directly into an empty repository, using the Directory Name as the ProjectName:
+
+    $ git clone https://github.com/<User>/<ProjectName>.git
+    $ cd <ProjectName>
+    $ x new blazor-vue
+