diff --git a/modules/desktop/.eslintignore b/modules/desktop/.eslintignore
index d0e629b..af70cc6 100644
--- a/modules/desktop/.eslintignore
+++ b/modules/desktop/.eslintignore
@@ -11,5 +11,6 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
-src-tauri/target/*
-coverage/*
\ No newline at end of file
+coverage/*
+build/*
+dist/*
\ No newline at end of file
diff --git a/modules/desktop/.prettierignore b/modules/desktop/.prettierignore
index 27674cb..f3a8782 100644
--- a/modules/desktop/.prettierignore
+++ b/modules/desktop/.prettierignore
@@ -12,12 +12,7 @@ pnpm-lock.yaml
 package-lock.json
 yarn.lock
 build
-/src-tauri/src/*
-/src-tauri/icons/*
-/src-tauri/target/**/*
-/src-tauri/build/*
-/src-tauri/Cargo.lock
-/src-tauri/Cargo.toml
-src-tauri
 coverage/*
-**/*.plist
\ No newline at end of file
+**/*.plist
+build/*
+dist/*
\ No newline at end of file
diff --git a/modules/desktop/README.md b/modules/desktop/README.md
index 13df279..a178aae 100644
--- a/modules/desktop/README.md
+++ b/modules/desktop/README.md
@@ -10,10 +10,7 @@ Once you've created a project and installed dependencies with `npm install` (or
 
 ```bash
 # use if you need interaction with the rust handlers
-pnpm tauri dev
-
-# or if ui dev only
-pnpm run dev -- --open
+pnpm dev
 ```
 
 ## Building
diff --git a/modules/desktop/package.json b/modules/desktop/package.json
index 1f0fa6a..8e35026 100644
--- a/modules/desktop/package.json
+++ b/modules/desktop/package.json
@@ -6,13 +6,17 @@
 	"author": "tea.xyz",
 	"main": "src/electron.cjs",
 	"scripts": {
+		"dev": "cross-env NODE_ENV=dev npm run dev:all",
+		"dev:all": "concurrently -n=svelte,electron -c='#ff3e00',blue \"npm run dev:svelte\" \"npm run dev:electron\"",
+		"dev:svelte": "vite dev",
+		"dev:electron": "electron src/electron.cjs",
 		"pack": "electron-builder --dir --config electron-builder.config.cjs",
 		"dist": "pnpm build && electron-builder --config electron-builder.config.cjs",
 		"package": "pnpm build && electron-builder --config electron-builder.config.cjs",
 		"dev:package": "pnpm build && electron-builder --config electron-builder.config.cjs --dir",
 		"electron": "concurrently --kill-others \"vite dev\" \"electron src/electron.cjs\"",
-		"dev": "vite dev --port 8080",
-		"build": "vite build",
+		"olddev": "vite dev",
+		"build": "vite build && cp build/app.html build/index.html",
 		"preview": "vite preview",
 		"unit:test": "vitest",
 		"coverage": "vitest run --coverage",
@@ -37,7 +41,8 @@
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
 		"autoprefixer": "^10.4.13",
-		"concurrently": "^6.5.1",
+		"concurrently": "^7.6.0",
+		"cross-env": "^7.0.3",
 		"electron": "22.1.0",
 		"electron-builder": "^23.6.0",
 		"electron-reloader": "^1.2.3",
@@ -57,7 +62,7 @@
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.4",
 		"vite": "^4.0.0",
-		"vitest": "^0.27.1"
+		"vitest": "^0.28.3"
 	},
 	"type": "module",
 	"dependencies": {
@@ -67,14 +72,17 @@
 		"@vitest/coverage-c8": "^0.27.1",
 		"bcryptjs": "^2.4.3",
 		"buffer": "^6.0.3",
+		"electron-context-menu": "^3.6.1",
 		"electron-log": "^4.4.8",
 		"electron-serve": "^1.1.0",
+		"electron-vite": "^1.0.18",
 		"electron-window-state": "^5.0.3",
 		"fuse.js": "^6.6.2",
 		"lodash": "^4.17.21",
 		"lorem-ipsum": "^2.0.8",
 		"svelte-markdown": "^0.2.3",
 		"svelte-watch-resize": "^1.0.3",
+		"upath": "^2.0.1",
 		"url-join": "^5.0.0"
 	},
 	"pnpm": {
diff --git a/modules/desktop/playwright.config.ts b/modules/desktop/playwright.config.ts
new file mode 100644
index 0000000..6ad3a7f
--- /dev/null
+++ b/modules/desktop/playwright.config.ts
@@ -0,0 +1,10 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	}
+};
+
+export default config;
diff --git a/modules/desktop/postcss.config.cjs b/modules/desktop/postcss.config.cjs
new file mode 100644
index 0000000..541e3df
--- /dev/null
+++ b/modules/desktop/postcss.config.cjs
@@ -0,0 +1,12 @@
+const { theme, plugins } = require('@tea/ui/tailwind.config.cjs');
+
+module.exports = {
+	plugins: {
+		tailwindcss: {
+			content: ['./src/**/*.{html,svelte,ts,js}', '../ui/src/**/*.{html,svelte,ts,js}'],
+			theme,
+			plugins: [...plugins]
+		},
+		autoprefixer: {}
+	}
+};
diff --git a/modules/desktop/setupTest.js b/modules/desktop/setupTest.js
new file mode 100644
index 0000000..b210af5
--- /dev/null
+++ b/modules/desktop/setupTest.js
@@ -0,0 +1,4 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import { expect } from 'vitest';
+
+expect.extend(matchers);
diff --git a/modules/desktop/src/app.css b/modules/desktop/src/app.css
index f59ef0b..0ad7c95 100644
--- a/modules/desktop/src/app.css
+++ b/modules/desktop/src/app.css
@@ -1,59 +1,43 @@
-:root {
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-		'Open Sans', 'Helvetica Neue', sans-serif;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+	font-family: 'pp-neue-machina';
+	src: url('/fonts/PPNeueMachina-InktrapLight.woff');
 }
 
-.text-primary {
-	color: #ff3e00;
+@font-face {
+	font-family: 'sono';
+	src: url('/fonts/Sono-Light.woff2');
 }
 
-.button {
-	padding: 10px 10px;
-	display: inline-block;
-	background-color: #ff3e00;
-	color: white;
-	text-decoration: none;
-	border: none;
+html {
+	background-color: #1a1a1a;
+	color: #fff;
+	user-select: none;
+	cursor: default;
 }
 
-/* The sidebar menu */
-.sidenav {
-	height: 100%; /* Full-height: remove this if you want "auto" height */
-	width: 160px; /* Set the width of the sidebar */
-	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
-	z-index: 1; /* Stay on top */
-	top: 0; /* Stay at the top */
-	left: 0;
-	background-color: #ff3e00;
-	overflow-x: hidden; /* Disable horizontal scroll */
-	padding-top: 20px;
-}
-
-.sidenav a {
-	padding: 6px 8px 6px 16px;
-	text-decoration: none;
-	font-size: 20px;
-	font-weight: bold;
-	color: white;
-	display: block;
-}
-
-.sidenav a:hover {
-	background-color: #f1f1f1;
-	color: $primary;
-}
-
-.main {
-	margin-left: 160px; /* Same as the width of the sidebar */
-	padding: 0px 10px;
-}
-
-/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
-@media screen and (max-height: 450px) {
-	.sidenav {
-		padding-top: 15px;
-	}
-	.sidenav a {
-		font-size: 18px;
+@layer base {
+	html {
+		font-family: sono, sans-serif;
 	}
 }
+
+.text-primary,
+header,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+button,
+.click-copy {
+	font-family: 'pp-neue-machina' !important;
+}
+
+.pk-version {
+	font-family: 'sono';
+}
diff --git a/modules/desktop/src/app.d.ts b/modules/desktop/src/app.d.ts
new file mode 100644
index 0000000..8f4d638
--- /dev/null
+++ b/modules/desktop/src/app.d.ts
@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Locals {}
+	// interface PageData {}
+	// interface Error {}
+	// interface Platform {}
+}
diff --git a/modules/desktop/src/app.html b/modules/desktop/src/app.html
index 3ce0fcb..5b53ef7 100644
--- a/modules/desktop/src/app.html
+++ b/modules/desktop/src/app.html
@@ -2,14 +2,11 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<script>
-			const ipc = require('electron').ipcRenderer;
-		</script>
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
 	<body>
-		<div id="svelte">%sveltekit.body%</div>
+		<div>%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/modules/desktop/src/components/Badges/Badges.svelte b/modules/desktop/src/components/Badges/Badges.svelte
new file mode 100644
index 0000000..7f27f4a
--- /dev/null
+++ b/modules/desktop/src/components/Badges/Badges.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+
+	export let arg1: string;
+</script>
+
+<Placeholder label="Badges" />
+<h1>{arg1 || 'tes'}</h1>
diff --git a/modules/desktop/src/components/BigBlackSpace/BigBlackSpace.svelte b/modules/desktop/src/components/BigBlackSpace/BigBlackSpace.svelte
new file mode 100644
index 0000000..051bab1
--- /dev/null
+++ b/modules/desktop/src/components/BigBlackSpace/BigBlackSpace.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import '$appcss';
+</script>
+
+<section class="border-gray h-56 border bg-black" />
diff --git a/modules/desktop/src/components/CategorizedPackages/CategorizedPackages.svelte b/modules/desktop/src/components/CategorizedPackages/CategorizedPackages.svelte
new file mode 100644
index 0000000..f88ffe3
--- /dev/null
+++ b/modules/desktop/src/components/CategorizedPackages/CategorizedPackages.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import MiniPackageCard from '@tea/ui/MiniPackageCard/MiniPackageCard.svelte';
+	import type { Category } from '$libs/types';
+	import { onMount } from 'svelte';
+	import { getCategorizedPackages } from '@api';
+
+	let categories: Category[] = [];
+
+	onMount(async () => {
+		categories = await getCategorizedPackages();
+	});
+</script>
+
+{#each categories as category}
+	<PanelHeader ctaLabel={category.cta_label} ctaLink={'#'} title={category.label} />
+	<ul class="border-gray grid grid-cols-3 border border-r-0 bg-black">
+		{#each category.packages as pkg}
+			<div class="border-gray border border-t-0 border-l-0 p-4">
+				<MiniPackageCard {pkg} ctaLabel="DETAILS" link={`/packages/${pkg.slug}`} />
+			</div>
+		{/each}
+	</ul>
+{/each}
diff --git a/modules/desktop/src/components/CliBanner/CliBanner.svelte b/modules/desktop/src/components/CliBanner/CliBanner.svelte
new file mode 100644
index 0000000..680ce72
--- /dev/null
+++ b/modules/desktop/src/components/CliBanner/CliBanner.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import '$appcss';
+	import Button from '@tea/ui/Button/Button.svelte';
+	let copyButtonText = 'COPY';
+	const copyValue = `sh <(curl https://tea.xyz)`;
+
+	const onCopy = () => {
+		copyButtonText = 'COPIED!';
+		navigator.clipboard.writeText(copyValue);
+	};
+</script>
+
+<section class="border-gray mt-4 border bg-black">
+	<header class="flex flex-col items-center py-8">
+		<figure>
+			<img alt="tea" src="/images/tea-icon.png" class="rounded-md" />
+		</figure>
+		<p class="text-primary">tea.cli ver. 0.6.0</p>
+	</header>
+	<footer class="border-gray flex h-20 border-t text-white">
+		<input class="flex-grow bg-black pl-4" disabled value="sh <(curl tea.xyz)>" />
+		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
+		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
+			>OPEN IN TERMINAL</Button
+		>
+	</footer>
+</section>
diff --git a/modules/desktop/src/components/EssentialWorkshops/EssentialWorkshops.svelte b/modules/desktop/src/components/EssentialWorkshops/EssentialWorkshops.svelte
new file mode 100644
index 0000000..786082c
--- /dev/null
+++ b/modules/desktop/src/components/EssentialWorkshops/EssentialWorkshops.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import '$appcss';
+	import type { AirtablePost } from '@tea/ui/types';
+	import Posts from '@tea/ui/Posts/Posts.svelte';
+	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
+	import { postsStore } from '$libs/stores';
+
+	export let title = 'Workshops';
+	export let ctaLabel = 'View all';
+
+	let courses: AirtablePost[] = [];
+
+	postsStore.subscribeByTag('course', (posts) => (courses = posts));
+</script>
+
+<PanelHeader {title} {ctaLabel} ctaLink="/" />
+{#if courses.length}
+	<Posts posts={courses} linkTarget="_blank" />
+{:else}
+	<section class="border-gray h-64 border bg-black p-4">
+		<Preloader />
+	</section>
+{/if}
diff --git a/modules/desktop/src/components/FeaturedCourses/FeaturedCourses.svelte b/modules/desktop/src/components/FeaturedCourses/FeaturedCourses.svelte
new file mode 100644
index 0000000..68ffc6e
--- /dev/null
+++ b/modules/desktop/src/components/FeaturedCourses/FeaturedCourses.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import '$appcss';
+	import { postsStore } from '$libs/stores';
+	import type { Course } from '$libs/types';
+
+	import Gallery from '@tea/ui/Gallery/Gallery.svelte';
+
+	let courses: Course[] = [];
+
+	postsStore.subscribeByTag('featured_course', (posts) => {
+		courses = posts.map((post) => {
+			return {
+				title: post.title,
+				sub_title: post.sub_title,
+				banner_image_url: post.thumb_image_url,
+				link: post.link
+			} as Course;
+		});
+	});
+</script>
+
+<Gallery
+	title="FEATURED COURSES"
+	items={courses.map((course) => ({
+		title: course.title,
+		subTitle: course.sub_title,
+		imageUrl: course.banner_image_url,
+		link: course.link
+	}))}
+	linkTarget="_blank"
+/>
diff --git a/modules/desktop/src/components/FeaturedPackages/FeaturedPackages.svelte b/modules/desktop/src/components/FeaturedPackages/FeaturedPackages.svelte
new file mode 100644
index 0000000..83ac856
--- /dev/null
+++ b/modules/desktop/src/components/FeaturedPackages/FeaturedPackages.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import '$appcss';
+	import { onMount } from 'svelte';
+	import type { Package } from '@tea/ui/types';
+
+	import Gallery from '@tea/ui/Gallery/Gallery.svelte';
+	import {
+		featuredPackages as featuredPackagesStore,
+		initializeFeaturedPackages
+	} from '$libs/stores';
+
+	let featuredPackages: Package[] = [];
+
+	featuredPackagesStore.subscribe((v) => {
+		featuredPackages = v;
+	});
+
+	onMount(() => {
+		if (!featuredPackages.length) {
+			initializeFeaturedPackages();
+		}
+	});
+</script>
+
+<Gallery
+	title="FEATURED PACKAGES"
+	items={featuredPackages.map((pkg) => ({
+		title: pkg.full_name,
+		subTitle: pkg.maintainer || '',
+		imageUrl: pkg.thumb_image_url,
+		link: `/packages/${pkg.slug}`
+	}))}
+/>
diff --git a/modules/desktop/src/components/FooterLinks/FooterLinks.svelte b/modules/desktop/src/components/FooterLinks/FooterLinks.svelte
new file mode 100644
index 0000000..b6d4a7e
--- /dev/null
+++ b/modules/desktop/src/components/FooterLinks/FooterLinks.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import Button from '@tea/ui/Button/Button.svelte';
+</script>
+
+<footer class="font-machina relative h-auto w-full bg-black">
+	<section class="p-4 px-16 py-16">
+		<h3 class="text-primary mb-5 text-2xl">QUICK LINKS</h3>
+		<menu class="flex gap-4">
+			<div class="border-gray flex-grow border border-l-0 border-r-0">
+				<a href="/">
+					<Button>
+						<div class="text-primary flex justify-between hover:text-black">
+							<div class="uppercase">About the tea store</div>
+							<div>&#8594</div>
+						</div>
+					</Button>
+				</a>
+			</div>
+			<div class="border-gray flex-grow border border-l-0 border-r-0">
+				<a href="/">
+					<Button>
+						<div class="text-primary flex justify-between hover:text-black">
+							<div class="uppercase">REPORT A PROBLEM</div>
+							<div>&#8594</div>
+						</div>
+					</Button>
+				</a>
+			</div>
+			<div class="border-gray flex-grow border border-l-0 border-r-0">
+				<a href="https://tea.xyz" target="_blank" rel="noreferrer">
+					<Button>
+						<div class="text-primary flex justify-between hover:text-black">
+							<div class="uppercase">VISIT TEA.XYZ</div>
+							<div>&#8594</div>
+						</div>
+					</Button>
+				</a>
+			</div>
+		</menu>
+	</section>
+
+	<section class="border-gray h-16 border border-r-0 p-4 px-16">
+		<div class="text-gray flex gap-4 text-xs">
+			<a
+				href="https://tea.xyz/terms-of-use/"
+				target="_blank"
+				rel="noreferrer"
+				class="hover:text-white"
+			>
+				TERMS & SERVICES
+			</a>
+			<a
+				href="https://tea.xyz/privacy-policy/"
+				target="_blank"
+				rel="noreferrer"
+				class="hover:text-white"
+			>
+				PRIVACY POLICY
+			</a>
+		</div>
+	</section>
+</footer>
+
+<style>
+	h3 {
+		font-family: 'pp-neue-machina', sans-serif;
+		color: #00ffd0;
+	}
+
+	p,
+	.nav-item {
+		font-family: 'sono', sans-serif;
+		color: #ffffff;
+	}
+
+	.list-group-item {
+		font-family: 'pp-neue-machina', sans-serif;
+		text-transform: uppercase;
+		transition: 0.1s ease-in;
+	}
+
+	.list-group-item:hover {
+		padding-left: 1vw;
+	}
+</style>
diff --git a/modules/desktop/src/components/GettingStarted/GettingStarted.svelte b/modules/desktop/src/components/GettingStarted/GettingStarted.svelte
new file mode 100644
index 0000000..2da8bd6
--- /dev/null
+++ b/modules/desktop/src/components/GettingStarted/GettingStarted.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import '$appcss';
+	import ArticleCard from '@tea/ui/ArticleCard/ArticleCard.svelte';
+
+	const doStuff = () => {
+		console.log('do stuff!');
+	};
+</script>
+
+<header class="border-gray text-primary border bg-black p-4">GETTING STARTED WITH TEA</header>
+<section class="grid grid-cols-3 bg-black">
+	<div class="border-gray border p-4">
+		<ArticleCard
+			content={{
+				title: 'installing tea',
+				copy: "It's time to take your first sip! Click below to visit our tea-cli documentation page.",
+				img_url: '/images/bored-ape.png',
+				cta_label: 'Get Started',
+				link: '/cli'
+			}}
+		/>
+	</div>
+	<div class="border-gray border p-4">
+		<ArticleCard
+			content={{
+				title: 'authenticating',
+				copy: 'Using tea without authenticating is like playing a video game without the DLC. Join us today!',
+				img_url: '/images/bored-ape.png',
+				cta_label: 'Get Started',
+				link: ''
+			}}
+			onClick={doStuff}
+		/>
+	</div>
+	<div class="border-gray border p-4">
+		<ArticleCard
+			content={{
+				title: 'give us a star',
+				copy: 'Revolutions are built on the will of the people. Show your support for a more equitable internet.',
+				img_url: '/images/bored-ape.png',
+				cta_label: 'Get Started'
+			}}
+		/>
+	</div>
+</section>
diff --git a/modules/desktop/src/components/InstalledPackages/InstalledPackages.svelte b/modules/desktop/src/components/InstalledPackages/InstalledPackages.svelte
new file mode 100644
index 0000000..bc21028
--- /dev/null
+++ b/modules/desktop/src/components/InstalledPackages/InstalledPackages.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import '$appcss';
+	import type { GUIPackage } from '$libs/types';
+	import { PackageStates } from '$libs/types';
+	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import { packagesStore } from '$libs/stores';
+	import MiniPackageCard from '@tea/ui/MiniPackageCard/MiniPackageCard.svelte';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
+	let packages: GUIPackage[] = [];
+
+	packagesStore.subscribe((v) => {
+		packages = v.filter((p) => p.state === PackageStates.INSTALLED);
+	});
+</script>
+
+<PanelHeader title="My installs" ctaLabel="Check for updates >" ctaLink="#" />
+
+<ul class="border-gray grid grid-cols-3 border border-r-0 bg-black">
+	{#if packages.length > 0}
+		{#each packages as pkg}
+			<div class="border-gray border border-t-0 border-l-0 p-4">
+				<MiniPackageCard
+					{pkg}
+					ctaLabel="DETAILS"
+					onClickCTA={async () => {
+						console.log('do something with:', pkg.full_name);
+					}}
+				/>
+			</div>
+		{/each}
+	{:else}
+		{#each Array(12) as _}
+			<section class="h-50 border-gray border p-4">
+				<Preloader />
+			</section>
+		{/each}
+	{/if}
+</ul>
diff --git a/modules/desktop/src/components/News/News.svelte b/modules/desktop/src/components/News/News.svelte
new file mode 100644
index 0000000..eab21a8
--- /dev/null
+++ b/modules/desktop/src/components/News/News.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import '$appcss';
+	import { postsStore } from '$libs/stores';
+	import type { AirtablePost } from '@tea/ui/types';
+	import Posts from '@tea/ui/Posts/Posts.svelte';
+	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
+
+	let news: AirtablePost[] = [];
+
+	postsStore.subscribeByTag('news', (posts) => (news = posts));
+</script>
+
+<PanelHeader title="Open-source News" ctaLabel="Read more articles >" ctaLink="/" />
+{#if news.length}
+	<Posts posts={news} linkTarget="_blank" />
+{:else}
+	<section class="border-gray h-64 border bg-black p-4">
+		<Preloader />
+	</section>
+{/if}
diff --git a/modules/desktop/src/components/PackageBanner/PackageBanner.svelte b/modules/desktop/src/components/PackageBanner/PackageBanner.svelte
new file mode 100644
index 0000000..f1e7dd4
--- /dev/null
+++ b/modules/desktop/src/components/PackageBanner/PackageBanner.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import '$appcss';
+	import '@tea/ui/icons/icons.css';
+	import type { Package, Bottle } from '@tea/ui/types';
+	import Button from '@tea/ui/Button/Button.svelte';
+	import StarRating from '@tea/ui/StarRating/StarRating.svelte';
+	import { onMount } from 'svelte';
+	import { getPackageBottles } from '@api';
+
+	export let pkg: Package;
+	let bottles: Bottle[] = [];
+	let packageRating = 0;
+	let copyButtonText = 'COPY';
+	const copyValue = `sh <(curl tea.xyz ) +${pkg.full_name}`;
+
+	const onCopy = () => {
+		copyButtonText = 'COPIED!';
+		navigator.clipboard.writeText(copyValue);
+	};
+
+	onMount(async () => {
+		try {
+			bottles = await getPackageBottles(pkg.full_name);
+		} catch (err) {
+			console.error(err);
+		}
+	});
+</script>
+
+<section class="border-gray mt-4 border bg-black">
+	<header class="flex p-2">
+		<figure class="grow-1 w-1/3">
+			<img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} />
+		</figure>
+		<article class="w-2/3 p-4 pt-8">
+			<h3 class="text-primary text-3xl">{pkg.full_name}</h3>
+			<h3>&#x2022; {pkg.maintainer || ''}{pkg.maintainer ? ' |' : ''} {bottles.length} bottles</h3>
+			<div class="mt-4">
+				<StarRating maxRating={5} rating={packageRating} />
+			</div>
+			<p class="font-sono mt-4 text-sm">{pkg.desc}</p>
+		</article>
+	</header>
+
+	<footer class="border-gray flex h-20 border-t text-white">
+		<input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} />
+		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
+		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
+			>OPEN IN TERMINAL</Button
+		>
+	</footer>
+</section>
diff --git a/modules/desktop/src/components/PackageDetail/PackageDetail.svelte b/modules/desktop/src/components/PackageDetail/PackageDetail.svelte
new file mode 100644
index 0000000..8b16f0f
--- /dev/null
+++ b/modules/desktop/src/components/PackageDetail/PackageDetail.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { Package } from '@tea/ui/types';
+	export let pkg: Package;
+</script>
+
+<section class="h-64 w-full">
+	<h1>{pkg.full_name}</h1>
+</section>
diff --git a/modules/desktop/src/components/PackageReviews/PackageReviews.svelte b/modules/desktop/src/components/PackageReviews/PackageReviews.svelte
new file mode 100644
index 0000000..8f9e65c
--- /dev/null
+++ b/modules/desktop/src/components/PackageReviews/PackageReviews.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import '$appcss';
+	import { afterUpdate } from 'svelte';
+	import ReviewCard from '@tea/ui/ReviewCard/ReviewCard.svelte';
+
+	import type { Review } from '@tea/ui/types';
+	export let reviews: Review[];
+
+	export let showLimit = 9;
+	let showMore = false;
+
+	const getColReviews = (n: number) => {
+		const showReviews = reviews.filter((_item, i) => (i - n) % 3 === 0);
+		return showMore ? showReviews : showReviews.slice(0, showLimit / 3);
+	};
+
+	let col1: Review[] = [];
+	let col2: Review[] = [];
+	let col3: Review[] = [];
+
+	afterUpdate(() => {
+		col1 = getColReviews(0);
+		col2 = getColReviews(1);
+		col3 = getColReviews(2);
+	});
+
+	// TODO: problem with reviews with differing heights
+	// ideally they should work like metro-ui to not have extreme height diff between columns
+</script>
+
+<header class="border-gray text-primary border bg-black p-4">REVIEWS ({reviews.length})</header>
+<section class="font-machina flex flex-row flex-wrap bg-black">
+	<div class="border-gray w-1/3 border-0 border-l-2 border-b-2 p-4">
+		{#each col1 as review}
+			<ReviewCard {review} />
+			<div class="mt-4" />
+		{/each}
+	</div>
+	<div class="border-gray w-1/3 border-0 border-l-2 border-b-2 p-4">
+		{#each col2 as review}
+			<ReviewCard {review} />
+			<div class="mt-4" />
+		{/each}
+	</div>
+	<div class="border-gray w-1/3 border-0 border-x-2 border-b-2 p-4">
+		{#each col3 as review}
+			<ReviewCard {review} />
+			<div class="mt-4" />
+		{/each}
+	</div>
+</section>
+{#if showLimit <= reviews.length && showMore === false}
+	<footer class="border-gray border bg-black p-4">
+		<button on:click={() => (showMore = true)}>SHOW MORE</button>
+	</footer>
+{/if}
diff --git a/modules/desktop/src/components/Packages/Packages.svelte b/modules/desktop/src/components/Packages/Packages.svelte
new file mode 100644
index 0000000..cbb8d37
--- /dev/null
+++ b/modules/desktop/src/components/Packages/Packages.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import '$appcss';
+	import type { GUIPackage } from '$libs/types';
+	import { PackageStates } from '$libs/types';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
+	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import { onMount } from 'svelte';
+
+	// TODO: replace with getting foundation essentials
+	import { getTopPackages } from '$libs/api/mock';
+	import { installPackage } from '@api';
+
+	export let title = 'Packages';
+
+	let packages: GUIPackage[] = [];
+
+	const getCTALabel = (state: PackageStates): string => {
+		return {
+			[PackageStates.AVAILABLE]: 'INSTALL',
+			[PackageStates.INSTALLED]: 'INSTALLED',
+			[PackageStates.INSTALLING]: 'INSTALLING',
+			[PackageStates.UNINSTALLED]: 'RE-INSTALL'
+		}[state];
+	};
+
+	onMount(async () => {
+		if (!packages.length) {
+			packages = await getTopPackages();
+		}
+	});
+</script>
+
+<header class="border-gray text-primary flex items-center justify-between border bg-black p-4">
+	<span>{title}</span>
+	<a href="/packages" class="font-sono text-sm underline">View all packages</a>
+</header>
+<ul class="grid grid-cols-3 bg-black">
+	{#if packages.length > 0}
+		{#each packages as pkg}
+			<div class={pkg.state === PackageStates.INSTALLING ? 'animate-pulse' : ''}>
+				<PackageCard
+					{pkg}
+					link={`/packages/${pkg.slug}`}
+					ctaLabel={getCTALabel(pkg.state)}
+					onClickCTA={async () => {
+						try {
+							pkg.state = PackageStates.INSTALLING;
+							await installPackage(pkg.full_name);
+							pkg.state = PackageStates.INSTALLED;
+						} catch (error) {
+							console.error(error);
+						}
+					}}
+				/>
+			</div>
+		{/each}
+	{:else}
+		{#each Array(9) as _}
+			<section class="h-50 border-gray border p-4">
+				<Preloader />
+			</section>
+		{/each}
+	{/if}
+</ul>
diff --git a/modules/desktop/src/components/PageHeader/PageHeader.svelte b/modules/desktop/src/components/PageHeader/PageHeader.svelte
new file mode 100644
index 0000000..fbf71b9
--- /dev/null
+++ b/modules/desktop/src/components/PageHeader/PageHeader.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let coverUrl = '';
+	let clazz = '';
+	export { clazz as class };
+</script>
+
+<figure class={`font-machina relative mb-8 h-32 w-full uppercase ${clazz}`}>
+	{#if coverUrl}
+		<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
+	{/if}
+	<div class="text-primary absolute bottom-0 z-10 text-6xl leading-[32px]">
+		<slot />
+	</div>
+</figure>
diff --git a/modules/desktop/src/components/Placeholder/Placeholder.svelte b/modules/desktop/src/components/Placeholder/Placeholder.svelte
new file mode 100644
index 0000000..2980d06
--- /dev/null
+++ b/modules/desktop/src/components/Placeholder/Placeholder.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let label = '';
+</script>
+
+<section class="bg-gray p-8">
+	<header>{label}</header>
+	<slot />
+</section>
+
+<style>
+	section {
+		position: relative;
+		min-height: 240px;
+		height: 100%;
+		width: 100%;
+		min-width: 100%;
+		/* background-color: #ccc; */
+		display: flex;
+	}
+	header {
+		color: rgb(50, 48, 48);
+		font-size: 3em;
+	}
+</style>
diff --git a/modules/desktop/src/components/Preflight/Preflight.svelte b/modules/desktop/src/components/Preflight/Preflight.svelte
new file mode 100644
index 0000000..fa60289
--- /dev/null
+++ b/modules/desktop/src/components/Preflight/Preflight.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import '$appcss';
+	const openGithub = () => {
+		// open('https://github.com/teaxyz');
+	};
+</script>
+
+<div class="card social-box" style="width: 100%; float:right;">
+	<header class="border-gray text-primary border-b pt-7 pb-7 pl-5">PRE-FLIGHT</header>
+	<div class="listbox-item border-gray border-b p-6">
+		<a href="/cli">
+			<p>Install Tea</p>
+		</a>
+	</div>
+	<div class="listbox-item border-gray border-b p-6">
+		<div>
+			<p>Authenticate</p>
+		</div>
+	</div>
+	<div class="listbox-item p-6">
+		<button on:click={openGithub}>Give tea a star</button>
+	</div>
+</div>
+
+<style>
+	.card {
+		border: 2px solid #949494;
+		background-color: #1a1a1a;
+	}
+
+	.listbox-item {
+		height: 75px;
+	}
+</style>
diff --git a/modules/desktop/src/components/ProfileBanner/ProfileBanner.svelte b/modules/desktop/src/components/ProfileBanner/ProfileBanner.svelte
new file mode 100644
index 0000000..8d741ec
--- /dev/null
+++ b/modules/desktop/src/components/ProfileBanner/ProfileBanner.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import '$appcss';
+	import { authStore } from '$libs/stores';
+	import type { Developer } from '@tea/ui/types';
+
+	let user: Developer | null = null;
+	const authPage = `http://localhost:3000/v1/auth/user?device_id=${authStore.deviceId}`; // https://api.tea.xyz/v1/auth/user?device_id=device_id
+
+	authStore.subscribe((u) => (user = u));
+</script>
+
+{#if user}
+	<section class="border-gray border-2 bg-black p-2">
+		<div class="profile_banner border-gray container flex border bg-black">
+			<img class="w-1/5" src={user.avatar_url || '/images/bored-ape.png'} alt="profile" />
+			<div class="flex w-4/5 items-center p-5">
+				<div class="w-1/2 pl-5">
+					<p class="text-gray uppercase">Authenticated with GitHub</p>
+					<p />
+					<p class="text-primary text-4xl">@{user.login}</p>
+				</div>
+				<div class="border-gray h-full border-l" />
+				<div class="w-1/2 pl-10">
+					<p class="text-gray uppercase leading-loose">
+						Country: <span>{user?.country}</span><br />Wallet:
+						{#if user.wallet}
+							<span>{user.wallet}</span>
+						{:else}
+							<a class="text-green underline" href="/">Connect Now</a>
+						{/if}
+					</p>
+				</div>
+			</div>
+		</div>
+	</section>
+{/if}
diff --git a/modules/desktop/src/components/SearchPackages/SearchPackages.svelte b/modules/desktop/src/components/SearchPackages/SearchPackages.svelte
new file mode 100644
index 0000000..7593716
--- /dev/null
+++ b/modules/desktop/src/components/SearchPackages/SearchPackages.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	import '$appcss';
+	import { packagesStore } from '$libs/stores';
+	import SortingButtons from './SortingButtons.svelte';
+	import type { GUIPackage } from '$libs/types';
+	import { PackageStates } from '$libs/types';
+	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
+
+	import { installPackage } from '@api';
+
+	let packages: GUIPackage[] = [];
+
+	let sortBy = 'popularity';
+	let sortDirection: 'asc' | 'desc' = 'desc';
+
+	const searchLimit = 10;
+
+	const setPackages = (pkgs: GUIPackage[], isSearch?: boolean) => {
+		packages = isSearch
+			? pkgs
+			: pkgs.sort((a, b) => {
+					if (sortBy === 'popularity') {
+						const aPop = +a.dl_count + a.installs;
+						const bPop = +b.dl_count + b.installs;
+						return sortDirection === 'asc' ? aPop - bPop : bPop - aPop;
+					} else {
+						// most recent
+						const aDate = new Date(a.last_modified);
+						const bDate = new Date(b.last_modified);
+						return sortDirection === 'asc' ? +aDate - +bDate : +bDate - +aDate;
+					}
+			  });
+	};
+
+	const onSearch = async (term: string) => {
+		if (term !== '' && term.length > 1) {
+			const matchingPackages: GUIPackage[] = await packagesStore.search(term, searchLimit);
+			setPackages(matchingPackages, true);
+		} else {
+			setPackages(packagesStore.packages, false);
+		}
+	};
+
+	const onSort = (opt: string, dir: 'asc' | 'desc') => {
+		sortBy = opt;
+		sortDirection = dir;
+		setPackages(packages);
+	};
+
+	const getCTALabel = (state: PackageStates): string => {
+		return {
+			[PackageStates.AVAILABLE]: 'INSTALL',
+			[PackageStates.INSTALLED]: 'INSTALLED',
+			[PackageStates.INSTALLING]: 'INSTALLING',
+			[PackageStates.UNINSTALLED]: 'RE-INSTALL'
+		}[state];
+	};
+
+	packagesStore.subscribe(setPackages);
+</script>
+
+<div class="border-gray border bg-black">
+	<section class="flex items-center justify-between">
+		<div>
+			<SearchInput size="medium" {onSearch} />
+		</div>
+		<div class="pr-4">
+			<section class="border-gray h-12 w-48 border">
+				<SortingButtons {onSort} />
+			</section>
+		</div>
+	</section>
+	<ul class="grid grid-cols-3">
+		{#if packages.length > 0}
+			{#each packages as pkg}
+				<div class={pkg.state === PackageStates.INSTALLING ? 'animate-pulse' : ''}>
+					<PackageCard
+						{pkg}
+						link={`/packages/${pkg.slug}`}
+						ctaLabel={getCTALabel(pkg.state)}
+						onClickCTA={async () => {
+							try {
+								pkg.state = PackageStates.INSTALLING;
+								await installPackage(pkg.full_name);
+								pkg.state = PackageStates.INSTALLED;
+							} catch (error) {
+								console.error(error);
+							}
+						}}
+					/>
+				</div>
+			{/each}
+		{:else}
+			{#each Array(12) as _}
+				<section class="h-50 border-gray border p-4">
+					<Preloader />
+				</section>
+			{/each}
+		{/if}
+	</ul>
+</div>
diff --git a/modules/desktop/src/components/SearchPackages/SortingButtons.svelte b/modules/desktop/src/components/SearchPackages/SortingButtons.svelte
new file mode 100644
index 0000000..34424c3
--- /dev/null
+++ b/modules/desktop/src/components/SearchPackages/SortingButtons.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import '$appcss';
+
+	export let onSort: (opt: string, dir: 'asc' | 'desc') => void;
+
+	let sortBy = 'popularity';
+	let sortDirection: 'asc' | 'desc' = 'desc';
+
+	const sortOptions = ['popularity', 'most recent'];
+
+	const setSortBy = (opt: string) => {
+		sortBy = opt;
+		if (onSort) {
+			onSort(sortBy, sortDirection);
+		}
+	};
+	const setSortDir = (opt: string, dir: 'asc' | 'desc') => {
+		sortDirection = dir;
+		setSortBy(opt);
+	};
+</script>
+
+<section class="sorting-container font-machina bg-black text-white">
+	<div class="dropdown">
+		<div class="dropdown-title">SORT ORDER</div>
+		<ul class="dropdown-content column flex">
+			{#each sortOptions as option}
+				<li class="flex items-center">
+					<button
+						class={`sort-btn uppercase ${sortBy === option ? 'active' : ''}`}
+						on:click={() => setSortBy(option)}
+					>
+						{option}
+					</button>
+					<div class="direction-arrows">
+						<button
+							on:click={() => setSortDir(option, 'asc')}
+							class={sortBy === option && sortDirection === 'asc' ? 'active' : ''}>&uarr;</button
+						>
+						<button
+							on:click={() => setSortDir(option, 'desc')}
+							class={sortBy === option && sortDirection === 'desc' ? 'active' : ''}>&darr;</button
+						>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</section>
+
+<style>
+	.direction-arrows {
+		float: right;
+	}
+	.direction-arrows button {
+		opacity: 0.3;
+	}
+	.direction-arrows button.active {
+		opacity: 1;
+	}
+
+	.sorting-container {
+		display: inline-block;
+		text-align: center;
+		text-decoration: none;
+		text-transform: uppercase;
+		max-width: 240px;
+		width: 100%;
+		height: 100%;
+		min-height: 34px;
+		transition: 0.1s linear;
+	}
+
+	.dropdown {
+		width: 100%;
+		height: auto;
+		position: relative;
+		display: inline-block;
+		cursor: pointer;
+	}
+
+	.dropdown-content {
+		display: none;
+		position: absolute;
+		background-color: #1a1a1a;
+		width: 100%;
+		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+		z-index: 1;
+		color: white;
+		list-style: none;
+		padding: 0px;
+	}
+
+	.dropdown-content li {
+		position: relative;
+		padding: 0px 10px;
+		height: 40px;
+		width: 100%;
+		line-height: 40px;
+	}
+
+	.dropdown-content li .sort-btn {
+		height: 100%;
+		width: calc(100% - 40px);
+		opacity: 0.6;
+	}
+
+	.dropdown-content li .sort-btn.active {
+		font-weight: bold;
+		opacity: 1;
+	}
+
+	.dropdown-content li .direction-arrows {
+		position: absolute;
+		right: 10px;
+		top: 0px;
+	}
+
+	.dropdown-content li:hover {
+		background: #00ffd0;
+		color: black;
+	}
+	.dropdown:hover .dropdown-content {
+		display: block;
+	}
+
+	.dropdown-title {
+		height: 50px;
+		line-height: 50px;
+		padding-left: 10px;
+	}
+</style>
diff --git a/modules/desktop/src/components/SearchPopupResults/SearchPopupResults.svelte b/modules/desktop/src/components/SearchPopupResults/SearchPopupResults.svelte
new file mode 100644
index 0000000..c616793
--- /dev/null
+++ b/modules/desktop/src/components/SearchPopupResults/SearchPopupResults.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+	import { searchStore } from '$libs/stores';
+	import type { GUIPackage } from '$libs/types';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
+	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import { PackageStates } from '$libs/types';
+	import Posts from '@tea/ui/Posts/Posts.svelte';
+
+	import { installPackage } from '@api';
+	import type { AirtablePost } from '@tea/ui/types';
+	let term: string;
+	let packages: GUIPackage[] = [];
+	let articles: AirtablePost[] = []; // news, blogs, etc
+	let workshops: AirtablePost[] = []; // workshops, course
+	let loading = true;
+
+	searchStore.subscribe((v) => {
+		term = v;
+	});
+	searchStore.packagesSearch.subscribe((pkgs) => {
+		packages = pkgs;
+	});
+	searchStore.postsSearch.subscribe((posts) => {
+		let partialArticles: AirtablePost[] = [];
+		let partialWorkshops: AirtablePost[] = [];
+		for (let post of posts) {
+			if (post.tags.includes('news')) {
+				partialArticles.push(post);
+			}
+			if (post.tags.includes('course') || post.tags.includes('featured_course')) {
+				partialWorkshops.push(post);
+			}
+		}
+
+		articles = partialArticles;
+		workshops = partialWorkshops;
+	});
+
+	searchStore.searching.subscribe((v) => (loading = v));
+
+	const getCTALabel = (state: PackageStates): string => {
+		return {
+			[PackageStates.AVAILABLE]: 'INSTALL',
+			[PackageStates.INSTALLED]: 'INSTALLED',
+			[PackageStates.INSTALLING]: 'INSTALLING',
+			[PackageStates.UNINSTALLED]: 'RE-INSTALL'
+		}[state];
+	};
+
+	const onClose = () => {
+		term = '';
+	};
+</script>
+
+<section class={term ? 'show' : ''}>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<figure on:click={onClose} />
+	<div class="border-gray z-20 border bg-black">
+		<header class="flex justify-between p-4">
+			<div class="text-primary text-2xl">Showing search results for `{term}`</div>
+
+			<button on:click={onClose}>&#x2715</button>
+		</header>
+		<menu class="bg-accent flex h-8 w-full gap-4 px-4 text-xs">
+			<button>packages ({packages.length})</button>
+			<button>articles ({articles.length})</button>
+			<button>workshops ({workshops.length})</button>
+		</menu>
+		<header class="text-primary p-4 text-lg">
+			Top Package Results ({packages.length})
+		</header>
+		<ul class="grid grid-cols-3">
+			{#if packages.length > 0}
+				{#each packages as pkg}
+					<div class={pkg.state === PackageStates.INSTALLING ? 'animate-pulse' : ''}>
+						<PackageCard
+							{pkg}
+							link={`/packages/${pkg.slug}`}
+							ctaLabel={getCTALabel(pkg.state)}
+							onClickCTA={async () => {
+								try {
+									pkg.state = PackageStates.INSTALLING;
+									await installPackage(pkg.full_name);
+									pkg.state = PackageStates.INSTALLED;
+								} catch (error) {
+									console.error(error);
+								}
+							}}
+						/>
+					</div>
+				{/each}
+			{:else if loading}
+				{#each Array(12) as _}
+					<section class="h-50 border-gray border p-4">
+						<Preloader />
+					</section>
+				{/each}
+			{/if}
+		</ul>
+		<header class="text-primary p-4 text-lg">
+			Top Article Results ({articles.length})
+		</header>
+		{#if articles.length}
+			<Posts posts={articles} linkTarget="_blank" />
+		{:else if loading}
+			<section class="border-gray h-64 border bg-black p-4">
+				<Preloader />
+			</section>
+		{/if}
+		<header class="text-primary p-4 text-lg">
+			Top Workshop Results ({workshops.length})
+		</header>
+		{#if workshops.length}
+			<Posts posts={workshops} linkTarget="_blank" />
+		{:else if loading}
+			<section class="border-gray h-64 border bg-black p-4">
+				<Preloader />
+			</section>
+		{/if}
+	</div>
+</section>
+
+<style>
+	section {
+		position: fixed;
+		top: 80px;
+		left: 0px;
+		right: 0;
+		background: rgba(0, 0, 0, 0.7);
+		transition: opacity 0.3s ease-in-out;
+		opacity: 0%;
+		overflow: hidden;
+		height: 0px;
+	}
+
+	section.show {
+		padding: 36px;
+		z-index: 10;
+	}
+
+	section > figure {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+	}
+	section.show {
+		opacity: 100%;
+		height: 100%;
+	}
+
+	section > div {
+		position: relative;
+		height: 0%;
+		transition: height 0.6s ease-in-out;
+		overflow-y: scroll;
+	}
+
+	section.show > div {
+		height: 90%;
+	}
+</style>
diff --git a/modules/desktop/src/components/SuggestedPackages/SuggestedPackages.svelte b/modules/desktop/src/components/SuggestedPackages/SuggestedPackages.svelte
new file mode 100644
index 0000000..3ac5d73
--- /dev/null
+++ b/modules/desktop/src/components/SuggestedPackages/SuggestedPackages.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import '$appcss';
+	import type { GUIPackage } from '$libs/types';
+	import type { Package } from '@tea/ui/types';
+	import { PackageStates } from '$libs/types';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
+	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import { onMount } from 'svelte';
+	import { installPackage } from '@api';
+	import { packagesStore } from '$libs/stores';
+
+	export let pkg: Package;
+
+	let packages: GUIPackage[] = [];
+
+	const getCTALabel = (state: PackageStates): string => {
+		return {
+			[PackageStates.AVAILABLE]: 'INSTALL',
+			[PackageStates.INSTALLED]: 'INSTALLED',
+			[PackageStates.INSTALLING]: 'INSTALLING',
+			[PackageStates.UNINSTALLED]: 'RE-INSTALL'
+		}[state];
+	};
+
+	onMount(async () => {
+		if (!packages.length) {
+			const matches = await packagesStore.search(pkg.desc, 4);
+			packages = matches.filter((mp) => mp.full_name !== pkg.full_name).slice(0, 3);
+		}
+	});
+</script>
+
+<header class="border-gray text-primary flex items-center justify-between border bg-black p-4">
+	<span>MORE LIKE THIS</span>
+</header>
+<ul class="grid grid-cols-3 bg-black">
+	{#if packages.length > 0}
+		{#each packages as pkg}
+			<div class={pkg.state === PackageStates.INSTALLING ? 'animate-pulse' : ''}>
+				<PackageCard
+					{pkg}
+					link={`/packages/${pkg.slug}`}
+					ctaLabel={getCTALabel(pkg.state)}
+					onClickCTA={async () => {
+						try {
+							pkg.state = PackageStates.INSTALLING;
+							await installPackage(pkg.full_name);
+							pkg.state = PackageStates.INSTALLED;
+						} catch (error) {
+							console.error(error);
+						}
+					}}
+				/>
+			</div>
+		{/each}
+	{:else}
+		{#each Array(9) as _}
+			<section class="h-50 border-gray border p-4">
+				<Preloader />
+			</section>
+		{/each}
+	{/if}
+</ul>
diff --git a/modules/desktop/src/components/TopBar/ProfileNavButton.svelte b/modules/desktop/src/components/TopBar/ProfileNavButton.svelte
new file mode 100644
index 0000000..f0d2bb0
--- /dev/null
+++ b/modules/desktop/src/components/TopBar/ProfileNavButton.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	// import { authStore } from '$libs/stores';
+	import type { Developer } from '@tea/ui/types';
+	// import { baseUrl } from '$libs/v1Client';
+
+	let user: Developer | null = null;
+	// const deviceId = authStore.deviceIdStore;
+
+	const openGithub = () => {
+		// open(`${baseUrl}/auth/user?device_id=${$deviceId}`);
+		try {
+			// authStore.pollSession();
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
+	// authStore.subscribe((u) => (user = u));
+</script>
+
+{#if user}
+	<a href="/profile">
+		<section class="flex">
+			<img width="40" height="40" src={user.avatar_url || '/images/bored-ape.png'} alt="profile" />
+			<div class="text-gray p-2">@{user.login}</div>
+		</section>
+	</a>
+{:else}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<section class="flex" on:click={openGithub}>
+		<figure class="p-2">
+			<img width="28" height="28" src="/images/github.png" alt="profile" />
+		</figure>
+		<div class="text-gray p-2">Login</div>
+	</section>
+{/if}
diff --git a/modules/desktop/src/components/TopBar/TopBar.svelte b/modules/desktop/src/components/TopBar/TopBar.svelte
new file mode 100644
index 0000000..dc76a70
--- /dev/null
+++ b/modules/desktop/src/components/TopBar/TopBar.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { beforeUpdate } from 'svelte';
+	import { searchStore } from '$libs/stores';
+	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
+	import { navStore } from '$libs/stores';
+
+	import ProfileNavButton from './ProfileNavButton.svelte';
+
+	let { nextPath, prevPath } = navStore;
+
+	const onSearch = (term: string) => {
+		searchStore.search(term);
+	};
+
+	let currentPath: string;
+	beforeUpdate(async () => {
+		currentPath = $page.url.pathname;
+	});
+</script>
+
+<header class="border-gray flex w-full border border-l-0 border-r-0">
+	<a href="/">
+		<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
+	</a>
+	<ul class="text-gray flex h-10 gap-4 pl-4 align-middle leading-10">
+		<button on:click={navStore.back} class={$prevPath ? 'active' : ''}>&#8592</button>
+		<button on:click={navStore.next} class={$nextPath ? 'active' : ''}>&#8594</button>
+	</ul>
+	<SearchInput
+		class="flex-grow border border-none py-4"
+		size="small"
+		placeholder="search the tea store"
+		{onSearch}
+	/>
+	<ul class="text-gray flex gap-4 pr-4 pt-2 align-middle">
+		<button class="icon-filter hover:text-white" />
+		<button class="icon-share hover:text-white" />
+		<button class="icon-star-empty hover:text-white" />
+	</ul>
+	<ProfileNavButton />
+</header>
+<menu
+	class="border-gray text-gray flex h-10 gap-4 border border-l-0 border-r-0 border-t-0 pl-4 align-middle leading-10"
+>
+	<a href="/cli" class={currentPath === '/cli' ? 'active' : ''}>install teaCli</a>
+	<a href="/documentation" class={currentPath === '/documentation' ? 'active' : ''}>documentation</a
+	>
+	<a href="/packages" class={currentPath === '/packages' ? 'active' : ''}>packages</a>
+	<a href="https://github.com/teaxyz" target="_blank" rel="noreferrer">
+		<i class="icon-star-empty" /> Github (5.2k)
+	</a>
+</menu>
+
+<style>
+	@tailwind base;
+	@tailwind components;
+	@tailwind utilities;
+
+	menu > a:hover {
+		color: white;
+	}
+	menu a.active {
+		color: white;
+	}
+
+	ul button {
+		pointer-events: none;
+	}
+
+	ul button.active {
+		color: white;
+		pointer-events: all;
+	}
+</style>
diff --git a/modules/desktop/src/electron.cjs b/modules/desktop/src/electron.cjs
index c2d73ca..6d5dc24 100644
--- a/modules/desktop/src/electron.cjs
+++ b/modules/desktop/src/electron.cjs
@@ -1,67 +1,103 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell, dialog } = require('electron');
+const windowStateManager = require('electron-window-state');
+const { app, BrowserWindow, ipcMain } = require('electron');
+const contextMenu = require('electron-context-menu');
+const serve = require('electron-serve');
 const path = require('path');
 
+try {
+	require('electron-reloader')(module);
+} catch (e) {
+	console.error(e);
+}
+
+const serveURL = serve({ directory: '.' });
+const port = process.env.PORT || 3000;
+const dev = !app.isPackaged;
 let mainWindow;
-let deeplink;
-
-if (process.defaultApp) {
-	if (process.argv.length >= 2) {
-		app.setAsDefaultProtocolClient('electron-fiddle', process.execPath, [
-			path.resolve(process.argv[1])
-		]);
-	}
-} else {
-	app.setAsDefaultProtocolClient('electron-fiddle');
-}
-
-const gotTheLock = app.requestSingleInstanceLock();
-
-if (!gotTheLock) {
-	app.quit();
-} else {
-	app.on('second-instance', (event, commandLine, workingDirectory) => {
-		// Someone tried to run a second instance, we should focus our window.
-		if (mainWindow) {
-			if (mainWindow.isMinimized()) mainWindow.restore();
-			mainWindow.focus();
-		}
-	});
-
-	// Create mainWindow, load the rest of the app, etc...
-	app.whenReady().then(() => {
-		createWindow();
-	});
-
-	app.on('open-url', (event, url) => {
-		dialog.showErrorBox('Welcome Back', `You arrived from: ${url}`);
-		deeplink = url;
-	});
-}
 
 function createWindow() {
-	// Create the browser window.
-	mainWindow = new BrowserWindow({
-		width: 800,
-		height: 600,
-		webPreferences: {
-			preload: path.join(__dirname, 'preload.js')
-		}
+	let windowState = windowStateManager({
+		defaultWidth: 800,
+		defaultHeight: 600
 	});
-	//   const path = deeplink.replace('electron-fiddle://', '');
-	mainWindow.loadFile('index.html');
+
+	const mainWindow = new BrowserWindow({
+		backgroundColor: 'whitesmoke',
+		autoHideMenuBar: true,
+		trafficLightPosition: {
+			x: 17,
+			y: 32
+		},
+		minHeight: 450,
+		minWidth: 500,
+		webPreferences: {
+			enableRemoteModule: true,
+			contextIsolation: true,
+			nodeIntegration: true,
+			spellcheck: false,
+			devTools: dev,
+			preload: path.join(app.getAppPath(), 'preload.cjs')
+		},
+		x: windowState.x,
+		y: windowState.y,
+		width: windowState.width,
+		height: windowState.height
+	});
+
+	windowState.manage(mainWindow);
+
+	mainWindow.once('ready-to-show', () => {
+		mainWindow.show();
+		mainWindow.focus();
+	});
+
+	mainWindow.on('close', () => {
+		windowState.saveState(mainWindow);
+	});
+
+	return mainWindow;
 }
 
-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
-app.on('window-all-closed', function () {
+contextMenu({
+	showLookUpSelection: false,
+	showSearchWithGoogle: false,
+	showCopyImage: false,
+	prepend: (defaultActions, params, browserWindow) => [
+		{
+			label: 'Make App 💻'
+		}
+	]
+});
+
+function loadVite(port) {
+	mainWindow.loadURL(`http://localhost:${port}`).catch((e) => {
+		console.log('Error loading URL, retrying', e);
+		setTimeout(() => {
+			loadVite(port);
+		}, 200);
+	});
+}
+
+function createMainWindow() {
+	mainWindow = createWindow();
+	mainWindow.once('close', () => {
+		mainWindow = null;
+	});
+
+	if (dev) loadVite(port);
+	else serveURL(mainWindow);
+}
+
+app.once('ready', createMainWindow);
+app.on('activate', () => {
+	if (!mainWindow) {
+		createMainWindow();
+	}
+});
+app.on('window-all-closed', () => {
 	if (process.platform !== 'darwin') app.quit();
 });
 
-// Handle window controls via IPC
-ipcMain.on('shell:open', () => {
-	const pageDirectory = __dirname.replace('app.asar', 'app.asar.unpacked');
-	const pagePath = path.join('file://', pageDirectory, 'index.html');
-	shell.openExternal(pagePath);
+ipcMain.on('to-main', (event, count) => {
+	return mainWindow.webContents.send('from-main', `next count is ${count + 1}`);
 });
diff --git a/modules/desktop/src/lib/Counter.svelte b/modules/desktop/src/lib/Counter.svelte
deleted file mode 100644
index 842d327..0000000
--- a/modules/desktop/src/lib/Counter.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-	let count = 0;
-
-	const increment = () => {
-		count += 1;
-	};
-</script>
-
-<button class="button" on:click={increment}>
-	Clicks: {count}
-</button>
diff --git a/modules/desktop/src/lib/SideBar.svelte b/modules/desktop/src/lib/SideBar.svelte
deleted file mode 100644
index ddce33c..0000000
--- a/modules/desktop/src/lib/SideBar.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<!-- Based on: https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp -->
-<script>
-	import '../app.css';
-</script>
-
-<div class="sidenav">
-	<a href="/page1">Page 1</a>
-	<a href="/page2">Page 2</a>
-	<a href="/page3">Page 3</a>
-</div>
diff --git a/modules/desktop/src/libs/__tests__/teaDir.test.ts b/modules/desktop/src/libs/__tests__/teaDir.test.ts
new file mode 100644
index 0000000..ca50f06
--- /dev/null
+++ b/modules/desktop/src/libs/__tests__/teaDir.test.ts
@@ -0,0 +1,49 @@
+import { getPkgBottles } from '../teaDir';
+
+describe('teaDir module', () => {
+	it('should getPkgBottles from nested Dir object/s', () => {
+		const results = getPkgBottles({
+			name: 'kkos',
+			path: '/Users/x/.tea/github.com/kkos',
+			children: [
+				{ name: '.DS_Store', path: '/Users/x/.tea/github.com/kkos/.DS_Store' },
+				{
+					name: 'oniguruma',
+					path: '/Users/x/.tea/github.com/kkos/oniguruma',
+					children: [
+						{ name: '.DS_Store', path: '/Users/x/.tea/github.com/kkos/oniguruma/.DS_Store' },
+						{
+							path: '/Users/x/.tea/github.com/kkos/oniguruma/v6',
+							name: 'v6',
+							children: [
+								{ name: '.DS_Store', path: '/Users/x/.tea/github.com/kkos/oniguruma/v6/.DS_Store' }
+							]
+						},
+						{
+							name: 'v*',
+							path: '/Users/x/.tea/github.com/kkos/oniguruma/v*',
+							children: []
+						},
+						{
+							name: 'v6.9.8',
+							path: '/Users/x/.tea/github.com/kkos/oniguruma/v6.9.8',
+							children: []
+						},
+						{
+							name: 'v6.9',
+							path: '/Users/x/.tea/github.com/kkos/oniguruma/v6.9',
+							children: []
+						}
+					]
+				}
+			]
+		});
+
+		expect(results).toEqual([
+			'github.com/kkos/oniguruma/v*',
+			'github.com/kkos/oniguruma/v6',
+			'github.com/kkos/oniguruma/v6.9',
+			'github.com/kkos/oniguruma/v6.9.8'
+		]);
+	});
+});
diff --git a/modules/desktop/src/libs/api/mock.ts b/modules/desktop/src/libs/api/mock.ts
new file mode 100644
index 0000000..bca61a8
--- /dev/null
+++ b/modules/desktop/src/libs/api/mock.ts
@@ -0,0 +1,359 @@
+/**
+ * primarily used to make this desktop app work in the website preview setting in the CI/CD
+ * may contain fake/mock data
+ *
+ * TODO:
+ *  * make cors work with api.tea.xyz/v1
+ */
+import type { Package, Review, AirtablePost, Bottle } from '@tea/ui/types';
+import type { GUIPackage, Course, Category } from '../types';
+import { PackageStates } from '../types';
+import { loremIpsum } from 'lorem-ipsum';
+import _ from 'lodash';
+
+const packages: Package[] = [
+	{
+		slug: 'mesonbuild_com',
+		homepage: 'https://mesonbuild.com',
+		name: 'mesonbuild.com',
+		version: '0.63.3',
+		last_modified: '2022-10-06T15:45:08.000Z',
+		full_name: 'mesonbuild.com',
+		dl_count: 270745,
+		thumb_image_name: 'mesonbuild_com_option 1.jpg ',
+		maintainer: '',
+		desc: 'Fast and user friendly build system',
+		thumb_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg',
+		installs: 0
+	},
+	{
+		slug: 'pixman_org',
+		homepage: 'http://www.pixman.org/',
+		maintainer: 'freedesktop',
+		name: 'pixman.org',
+		version: '0.40.0',
+		last_modified: '2022-09-26T19:37:47.000Z',
+		full_name: 'pixman.org',
+		dl_count: 0,
+		thumb_image_name: 'pixman_org_option 1.jpg ',
+		desc: 'Pixman is a library that provides low-level pixel manipulation features such as image compositing and trapezoid rasterization.',
+		thumb_image_url: 'https://tea.xyz/Images/packages/pixman_org.jpg',
+		installs: 0
+	},
+	{
+		slug: 'freedesktop_org_pkg_config',
+		homepage: 'https://freedesktop.org',
+		maintainer: 'freedesktop.org',
+		name: 'pkg-config',
+		version: '0.29.2',
+		last_modified: '2022-10-20T01:32:15.000Z',
+		full_name: 'freedesktop.org/pkg-config',
+		dl_count: 2661501,
+		thumb_image_name: 'freedecktop_org_pkg_config option 1.jpg ',
+		desc: 'Manage compile and link flags for libraries',
+		thumb_image_url: 'https://tea.xyz/Images/packages/freedesktop_org_pkg_config.jpg',
+		installs: 0
+	},
+	{
+		slug: 'gnu_org_gettext',
+		homepage: 'https://gnu.org',
+		maintainer: 'gnu.org',
+		name: 'gettext',
+		version: '0.21.1',
+		last_modified: '2022-10-20T01:23:46.000Z',
+		full_name: 'gnu.org/gettext',
+		dl_count: 3715970,
+		thumb_image_name: 'gnu_org_gettext_option 1.jpg ',
+		desc: 'GNU internationalization (i18n) and localization (l10n) library',
+		thumb_image_url: 'https://tea.xyz/Images/packages/gnu_org_gettext.jpg',
+		installs: 0
+	},
+	{
+		slug: 'ipfs_tech',
+		homepage: 'https://ipfs.tech',
+		name: 'ipfs.tech',
+		version: '0.16.0',
+		last_modified: '2022-10-19T21:36:52.000Z',
+		full_name: 'ipfs.tech',
+		dl_count: 14457,
+		thumb_image_name: 'ipfs_tech_option 2.jpg ',
+		maintainer: '',
+		desc: 'Peer-to-peer hypermedia protocol',
+		thumb_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg',
+		installs: 0
+	},
+	{
+		slug: 'nixos_org_patchelf',
+		homepage: 'https://nixos.org',
+		maintainer: 'nixos.org',
+		name: 'patchelf',
+		version: '0.15.0',
+		last_modified: '2022-09-27T04:50:44.000Z',
+		full_name: 'nixos.org/patchelf',
+		dl_count: 0,
+		thumb_image_name: 'nixos_org_patchelf_option 1.jpg ',
+		desc: 'PatchELF is a simple utility for modifying existing ELF executables and libraries.',
+		thumb_image_url: 'https://tea.xyz/Images/packages/nixos_org_patchelf.jpg',
+		installs: 0
+	},
+	{
+		slug: 'tea_xyz',
+		homepage: 'https://tea.xyz',
+		maintainer: 'tea.xyz',
+		name: 'tea.xyz',
+		version: '0.8.6',
+		last_modified: '2022-10-19T19:13:51.000Z',
+		full_name: 'tea.xyz',
+		dl_count: 0,
+		thumb_image_name: 'tea_xyz_option 2.jpg ',
+		desc: 'Website of tea.xyz',
+		thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz.jpg',
+		installs: 0
+	},
+	{
+		slug: 'charm_sh_gum',
+		homepage: 'https://charm.sh',
+		maintainer: 'charm.sh',
+		name: 'gum',
+		version: '0.8.0',
+		last_modified: '2022-10-21T02:15:16.000Z',
+		full_name: 'charm.sh/gum',
+		dl_count: 0,
+		thumb_image_name: 'charm_sh_gum.jpg ',
+		desc: '',
+		thumb_image_url: 'https://tea.xyz/Images/packages/charm_sh_gum.jpg',
+		installs: 0
+	},
+	{
+		slug: 'pyyaml_org',
+		homepage: 'https://pyyaml.org',
+		name: 'pyyaml.org',
+		version: '0.2.5',
+		last_modified: '2022-10-03T15:35:14.000Z',
+		full_name: 'pyyaml.org',
+		dl_count: 107505,
+		thumb_image_name: 'pyyaml_org_option 1.jpg ',
+		maintainer: '',
+		desc: 'YAML framework for Python',
+		thumb_image_url: 'https://tea.xyz/Images/packages/pyyaml_org.jpg',
+		installs: 0
+	},
+	{
+		slug: 'tea_xyz_gx_cc',
+		homepage: 'https://tea.xyz',
+		maintainer: 'tea.xyz',
+		name: 'cc',
+		version: '0.1.0',
+		last_modified: '2022-10-19T16:47:44.000Z',
+		full_name: 'tea.xyz/gx/cc',
+		dl_count: 0,
+		thumb_image_name: 'tea_xyz_gx.jpg ',
+		desc: '',
+		thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg',
+		installs: 0
+	}
+];
+
+export async function getPackages(): Promise<GUIPackage[]> {
+	await delay(2000);
+	return packages.map((pkg) => {
+		return {
+			...pkg,
+			state: PackageStates.AVAILABLE
+		};
+	});
+}
+
+export async function getFeaturedPackages(): Promise<Package[]> {
+	await delay(2000);
+	return packages.slice(0, 4);
+}
+
+export async function getPackageReviews(full_name: string): Promise<Review[]> {
+	console.log(`generating reviews for ${full_name}`);
+
+	const reviewCount = _.random(9, 21);
+	const reviews: Review[] = [];
+
+	for (let i = 0; i < reviewCount; i++) {
+		const title = loremIpsum({
+			count: _.random(2, 5),
+			format: 'plain',
+			paragraphLowerBound: 3,
+			paragraphUpperBound: 7,
+			random: Math.random,
+			sentenceLowerBound: 5,
+			sentenceUpperBound: 15,
+			units: 'words'
+		});
+		const comment = loremIpsum({
+			count: 2,
+			format: 'plain',
+			paragraphLowerBound: 3,
+			paragraphUpperBound: 7,
+			random: Math.random,
+			sentenceLowerBound: 5,
+			sentenceUpperBound: 15,
+			units: 'sentences'
+		});
+		const rating = _.random(0, 5);
+		reviews.push({
+			title,
+			comment,
+			rating
+		});
+	}
+
+	await delay(2000);
+	return reviews;
+}
+
+export async function installPackage(full_name: string) {
+	console.log('installing: ', full_name);
+	await delay(10000);
+}
+
+function delay(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export async function getFeaturedCourses(): Promise<Course[]> {
+	const mockCourses: Course[] = [
+		{
+			title: 'Developing With Tea',
+			sub_title: 'by Mxcl',
+			link: '#',
+			banner_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg'
+		},
+		{
+			title: 'Brewing Tea',
+			sub_title: 'by Mxcl',
+			link: '#',
+			banner_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg'
+		},
+		{
+			title: 'Harvesting Tea',
+			sub_title: 'by Mxcl',
+			link: '#',
+			banner_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg'
+		}
+	];
+
+	return mockCourses;
+}
+
+export async function getTopPackages(): Promise<GUIPackage[]> {
+	await delay(500);
+	return packages.slice(0, 9).map((pkg) => {
+		return {
+			...pkg,
+			state: PackageStates.AVAILABLE
+		};
+	});
+}
+
+export async function getAllPosts(type: string): Promise<AirtablePost[]> {
+	console.log('filter by type:', type);
+	const posts: AirtablePost[] = [
+		{
+			airtable_record_id: 'a',
+			link: 'https://google.com',
+			title: 'Tea Inc releases game changing api!',
+			sub_title: 'lorem ipsum dolor sit amet',
+			short_description: 'lorem ipsum dolor sit amet',
+			thumb_image_url: '/images/bored-ape.png',
+			thumb_image_name: 'borred-api.png',
+			created_at: new Date(),
+			updated_at: new Date(),
+			published_at: new Date(),
+			tags: ['news']
+		},
+		{
+			airtable_record_id: 'b',
+			link: 'https://google.com',
+			title: 'Bored Ape not bored anymore',
+			sub_title: 'lorem ipsum dolor sit amet',
+			short_description: 'lorem ipsum dolor sit amet',
+			thumb_image_url: '/images/bored-ape.png',
+			thumb_image_name: 'borred-api.png',
+			created_at: new Date(),
+			updated_at: new Date(),
+			published_at: new Date(),
+			tags: ['news']
+		},
+		{
+			airtable_record_id: 'c',
+			link: 'https://google.com',
+			title: 'Markdown can be executed! hoohah!',
+			sub_title: 'lorem ipsum dolor sit amet',
+			short_description: 'lorem ipsum dolor sit amet',
+			thumb_image_url: '/images/bored-ape.png',
+			thumb_image_name: 'borred-api.png',
+			created_at: new Date(),
+			updated_at: new Date(),
+			published_at: new Date(),
+			tags: ['news']
+		}
+	];
+
+	return posts;
+}
+
+export async function getCategorizedPackages(): Promise<Category[]> {
+	const mockPackages = packages.slice(0, 9).map((pkg) => ({
+		...pkg,
+		state: PackageStates.AVAILABLE
+	}));
+	return [
+		{
+			label: 'framework essentials',
+			cta_label: 'View all essentials >',
+			packages: mockPackages
+		},
+		{
+			label: 'star-struck heavyweights',
+			cta_label: 'View all star-strucks >',
+			packages: mockPackages
+		},
+		{
+			label: 'simply delightful',
+			cta_label: 'View all delightful packages >',
+			packages: mockPackages
+		}
+	];
+}
+
+export async function getDeviceAuth(deviceId: string): Promise<any> {
+	// const data = await get<any>(`/auth/device/${deviceId}`);
+	return {
+		status: 'SUCCESS',
+		user: {
+			developer_id: 'xxx',
+			name: 'Neil paul Molina',
+			login: 'getneil',
+			avatar_url: 'https://avatars.githubusercontent.com/u/7913978?v=4',
+			created_at: 'xxx',
+			updated_at: 'xxx',
+			country: 'germany',
+			wallet: 'wallet'
+		},
+		key: 'xxx'
+	};
+}
+
+export async function getPackageBottles(name: string): Promise<Bottle[]> {
+	return [
+		{ name, platform: 'darwin', arch: 'aarch64', version: '3.39.4' },
+		{ name, platform: 'darwin', arch: 'aarch64', version: '3.40.0' },
+		{ name, platform: 'darwin', arch: 'x86-64', version: '3.39.4' },
+		{ name, platform: 'darwin', arch: 'x86-64', version: '3.40.0' },
+		{ name, platform: 'linux', arch: 'aarch64', version: '3.39.4' },
+		{ name, platform: 'linux', arch: 'aarch64', version: '3.40.0' },
+		{ name, platform: 'linux', arch: 'x86-64', version: '3.39.4' },
+		{ name, platform: 'linux', arch: 'x86-64', version: '3.40.0' }
+	];
+}
+
+export async function registerDevice(): Promise<string> {
+	return 'uuid1234';
+}
diff --git a/modules/desktop/src/libs/cli.ts b/modules/desktop/src/libs/cli.ts
new file mode 100644
index 0000000..cb71432
--- /dev/null
+++ b/modules/desktop/src/libs/cli.ts
@@ -0,0 +1,32 @@
+export async function installPackageCommand(full_name: string) {
+	return new Promise((resolve, reject) => {
+		// const teaInstallCommand = new Command('tea-install', [`+${full_name}`, 'true']);
+		// teaInstallCommand.on('error', reject);
+
+		// const handleLineOutput = async (line: string | { code: number }) => {
+		// 	const c = await child;
+		// 	if (
+		// 		(typeof line === 'string' && line.includes('installed:')) ||
+		// 		(typeof line !== 'string' && line?.code === 0)
+		// 	) {
+		// 		c.kill();
+		// 		resolve(c.pid);
+		// 	} else if (typeof line !== 'string' && line?.code === 1) {
+		// 		reject();
+		// 	}
+		// };
+
+		// teaInstallCommand.stdout.on('data', handleLineOutput);
+		// teaInstallCommand.stderr.on('data', handleLineOutput);
+		// teaInstallCommand.on('close', (line: string) => {
+		// 	console.log('command closed!');
+		// 	handleLineOutput(line || '');
+		// });
+		// teaInstallCommand.on('error', (line: string) => {
+		// 	console.log('command error!', line);
+		// 	handleLineOutput(line || '');
+		// });
+		// const child = teaInstallCommand.spawn();
+		setTimeout(resolve, 10000);
+	});
+}
diff --git a/modules/desktop/src/libs/stores.ts b/modules/desktop/src/libs/stores.ts
new file mode 100644
index 0000000..289ab7f
--- /dev/null
+++ b/modules/desktop/src/libs/stores.ts
@@ -0,0 +1,144 @@
+import { writable } from 'svelte/store';
+import Fuse from 'fuse.js';
+
+import type { Package, Review, AirtablePost } from '@tea/ui/types';
+import type { GUIPackage } from '$libs/types';
+
+import { getFeaturedPackages, getPackageReviews, getAllPosts } from '@api';
+import initAuthStore from './stores/auth';
+import initNavStore from './stores/nav';
+import initPackagesStore from './stores/pkgs';
+
+export const featuredPackages = writable<Package[]>([]);
+
+export const packagesStore = initPackagesStore();
+
+export const initializeFeaturedPackages = async () => {
+	console.log('intialize featured packages');
+	const packages = await getFeaturedPackages();
+	featuredPackages.set(packages);
+};
+
+interface PackagesReview {
+	[full_name: string]: Review[];
+}
+
+function initPackagesReviewStore() {
+	const { update, subscribe } = writable<PackagesReview>({});
+
+	let packagesReviews: PackagesReview = {};
+
+	subscribe((v) => (packagesReviews = v));
+
+	const getSetPackageReviews = async (full_name: string) => {
+		if (full_name && !packagesReviews[full_name]) {
+			packagesReviews[full_name] = [];
+			const reviews = await getPackageReviews(full_name);
+			update((v) => {
+				return {
+					...v,
+					[full_name]: reviews
+				};
+			});
+		}
+	};
+
+	return {
+		subscribe: (full_name: string, reset: (reviews: Review[]) => void) => {
+			getSetPackageReviews(full_name);
+			return subscribe((value) => {
+				if (value[full_name]) {
+					reset(value[full_name]);
+				}
+			});
+		}
+	};
+}
+
+export const packagesReviewStore = initPackagesReviewStore();
+
+function initPosts() {
+	let initialized = false;
+	const { subscribe, set } = writable<AirtablePost[]>([]);
+	const posts: AirtablePost[] = [];
+	let postsIndex: Fuse<AirtablePost>;
+
+	if (!initialized) {
+		initialized = true;
+		getAllPosts().then(set);
+	}
+
+	subscribe((v) => {
+		posts.push(...v);
+		postsIndex = new Fuse(posts, {
+			keys: ['title', 'sub_title', 'short_description', 'tags']
+		});
+	});
+
+	return {
+		subscribe,
+		search: async (term: string, limit = 10) => {
+			const res = postsIndex.search(term, { limit });
+			const matchingPosts: AirtablePost[] = res.map((v) => v.item);
+			return matchingPosts;
+		},
+		subscribeByTag: (tag: string, cb: (posts: AirtablePost[]) => void) => {
+			subscribe((newPosts: AirtablePost[]) => {
+				const filteredPosts = newPosts.filter((post) => post.tags.includes(tag));
+				cb(filteredPosts);
+			});
+		}
+	};
+}
+export const postsStore = initPosts();
+
+function initSearchStore() {
+	const searching = writable<boolean>(false);
+	const { subscribe, set } = writable<string>('');
+	const packagesSearch = writable<GUIPackage[]>([]);
+	const postsSearch = writable<AirtablePost[]>([]);
+
+	// TODO:
+	// should use algolia if user is somehow online
+
+	const packagesFound: GUIPackage[] = [];
+
+	let term = '';
+
+	subscribe((v) => (term = v));
+	packagesSearch.subscribe((v) => packagesFound.push(...v));
+
+	return {
+		term,
+		searching,
+		packagesSearch,
+		postsSearch,
+		packagesFound,
+		subscribe,
+		search: async (term: string) => {
+			searching.set(true);
+			try {
+				if (term) {
+					const [resultPkgs, resultPosts] = await Promise.all([
+						packagesStore.search(term, 5),
+						postsStore.search(term, 10)
+					]);
+					packagesSearch.set(resultPkgs);
+					postsSearch.set(resultPosts);
+				} else {
+					packagesSearch.set([]);
+					postsSearch.set([]);
+				}
+				set(term);
+			} finally {
+				searching.set(false);
+			}
+		}
+	};
+}
+
+export const searchStore = initSearchStore();
+
+export const authStore = initAuthStore();
+
+export const navStore = initNavStore();
diff --git a/modules/desktop/src/libs/stores/auth.ts b/modules/desktop/src/libs/stores/auth.ts
new file mode 100644
index 0000000..289f8d8
--- /dev/null
+++ b/modules/desktop/src/libs/stores/auth.ts
@@ -0,0 +1,131 @@
+import { writable } from 'svelte/store';
+// import { app } from 'electron';
+// import { join } from 'upath';
+// import fs from 'fs';
+import { getDeviceAuth, registerDevice } from '@api';
+import type { Developer } from '@tea/ui/types';
+
+const basePath = '.tea/tea.xyz/gui';
+export interface Session {
+	device_id?: string;
+	key?: string;
+	user?: Developer;
+}
+
+export let session: Session | null = null;
+export const getSession = async (): Promise<Session | null> => {
+	// await app.whenReady();
+	// if (session && session?.user) return session;
+	// const homePath = app.getPath('home');
+	// const sessionFilePath = await join(homePath, basePath, 'tmp.dat');
+	// try {
+	// 	const encryptedData = fs.readFileSync(sessionFilePath, 'utf-8');
+	// 	session = JSON.parse(encryptedData || '{}') as Session;
+	// 	return session;
+	// } catch (error) {
+	// 	return null;
+	// }
+	return null;
+};
+
+export default function initAuthStore() {
+	const sessionStore = writable<Session>({});
+	let pollLoop = 0;
+
+	const deviceIdStore = writable<string>('');
+	let deviceId = '';
+
+	initSession().then((sess) => {
+		if (sess) {
+			session = sess;
+			sessionStore.set(sess);
+			deviceIdStore.set(sess.device_id!);
+			deviceId = sess.device_id!;
+		}
+	});
+
+	let timer: NodeJS.Timer | null;
+
+	async function updateSession(data: Session) {
+		const localSession = {
+			device_id: deviceId,
+			key: data.key,
+			user: data.user
+		};
+		saveLocallySessionData(localSession);
+		sessionStore.set(localSession);
+	}
+
+	async function pollSession() {
+		if (!timer) {
+			timer = setInterval(async () => {
+				pollLoop++;
+				try {
+					const data = await getDeviceAuth(deviceId);
+					console.log('dd', deviceId, data);
+					if (data.status === 'SUCCESS') {
+						updateSession({
+							key: data.key,
+							user: data.user
+						});
+						timer && clearInterval(timer);
+						timer = null;
+					}
+				} catch (error) {
+					console.error(error);
+				}
+
+				if (pollLoop > 20 && timer) {
+					clearInterval(timer);
+					pollLoop = 0;
+					timer = null;
+				}
+			}, 2000);
+		}
+	}
+
+	return {
+		deviceId,
+		deviceIdStore,
+		subscribe: (cb: (u: Developer) => void) => {
+			return sessionStore.subscribe((v) => v?.user && cb(v.user));
+		},
+		pollSession
+	};
+}
+
+const initSession = async (): Promise<Session | void> => {
+	// const homePath = app.getPath('home');
+	// try {
+	// 	await fs.mkdirSync(join(homePath, basePath));
+	// } catch (error) {
+	// 	console.error(error);
+	// }
+	// const session = await getLocalSessionData();
+	// return session;
+};
+
+const getLocalSessionData = async (): Promise<Session | void> => {
+	let data: Session;
+	try {
+		const session = await getSession();
+		if (!session) throw new Error('no session');
+		data = session;
+	} catch (error) {
+		console.error('register device:', error);
+		const deviceId = await registerDevice();
+		data = {
+			device_id: deviceId
+		};
+		await saveLocallySessionData(data);
+	}
+
+	return data;
+};
+
+const saveLocallySessionData = async (data: Session) => {
+	// const homePath = app.getPath('home');
+	// const sessionFilePath = await join(homePath, basePath, 'tmp.dat');
+	// // TODO: encrypt first
+	// await fs.writeFileSync(sessionFilePath, JSON.stringify(data), 'utf-8');
+};
diff --git a/modules/desktop/src/libs/stores/nav.ts b/modules/desktop/src/libs/stores/nav.ts
new file mode 100644
index 0000000..5f441dd
--- /dev/null
+++ b/modules/desktop/src/libs/stores/nav.ts
@@ -0,0 +1,55 @@
+import { writable } from 'svelte/store';
+import { goto } from '$app/navigation';
+
+export default function initNavStore() {
+	const historyStore = writable<string[]>(['/']);
+	let history = ['/'];
+
+	historyStore.subscribe((v) => (history = v));
+
+	const prevPathStore = writable<string>('');
+	const nextPathStore = writable<string>('');
+
+	let currentIndex = 0; // if non next/back click
+
+	let isMovingNext = false;
+	let isMovingBack = false;
+
+	return {
+		historyStore,
+		prevPath: prevPathStore,
+		nextPath: nextPathStore,
+		next: () => {
+			if (currentIndex < history.length - 1) {
+				isMovingNext = true;
+				goto(history[currentIndex + 1]);
+				prevPathStore.set(history[currentIndex]);
+				currentIndex++;
+				if (currentIndex >= history.length - 1) nextPathStore.set('');
+			}
+		},
+		back: () => {
+			if (currentIndex > 0) {
+				isMovingBack = true;
+				goto(history[currentIndex - 1]);
+				nextPathStore.set(history[currentIndex]);
+				currentIndex--;
+				if (currentIndex === 0) prevPathStore.set('');
+			}
+		},
+		setNewPath: (newNextPath: string, newPrevPath: string) => {
+			const oldCurrentPath = history[currentIndex];
+			const isNavArrows = isMovingBack || isMovingNext;
+			if (!isNavArrows && newNextPath !== oldCurrentPath) {
+				historyStore.update((history) => {
+					const cleanHistory = history.filter((_v, i) => i <= currentIndex);
+					currentIndex = cleanHistory.length;
+					prevPathStore.set(cleanHistory[currentIndex - 1]);
+					return [...cleanHistory, newNextPath];
+				});
+			}
+			isMovingNext = false;
+			isMovingBack = false;
+		}
+	};
+}
diff --git a/modules/desktop/src/libs/stores/pkgs.ts b/modules/desktop/src/libs/stores/pkgs.ts
new file mode 100644
index 0000000..0a142c0
--- /dev/null
+++ b/modules/desktop/src/libs/stores/pkgs.ts
@@ -0,0 +1,36 @@
+import { writable } from 'svelte/store';
+import type { GUIPackage } from '../types';
+import { getPackages } from '@api';
+import Fuse from 'fuse.js';
+
+export default function initPackagesStore() {
+	let initialized = false;
+	const { subscribe, set } = writable<GUIPackage[]>([]);
+	const packages: GUIPackage[] = [];
+	let packagesIndex: Fuse<GUIPackage>;
+
+	if (!initialized) {
+		initialized = true;
+		getPackages().then((pkgs) => {
+			set(pkgs);
+			packagesIndex = new Fuse(pkgs, {
+				keys: ['name', 'full_name', 'desc']
+			});
+		});
+	}
+
+	subscribe((v) => packages.push(...v));
+
+	return {
+		packages,
+		subscribe,
+		search: async (term: string, limit = 5): Promise<GUIPackage[]> => {
+			if (!term || !packagesIndex) return [];
+			// TODO: if online, use algolia else use Fuse
+
+			const res = packagesIndex.search(term, { limit });
+			const matchingPackages: GUIPackage[] = res.map((v) => v.item);
+			return matchingPackages;
+		}
+	};
+}
diff --git a/modules/desktop/src/libs/teaDir.ts b/modules/desktop/src/libs/teaDir.ts
new file mode 100644
index 0000000..c5016e1
--- /dev/null
+++ b/modules/desktop/src/libs/teaDir.ts
@@ -0,0 +1,61 @@
+import { app } from 'electron';
+import fs from 'fs';
+import { join } from 'upath';
+
+type Dir = {
+	name: string;
+	path: string;
+	children?: Dir[];
+};
+export async function getInstalledPackages() {
+	// const homePath = app.getPath('home');
+	// const packageFolders = (await readDir('.tea/', {
+	// 	dir: BaseDirectory.Home,
+	// 	recursive: true
+	// })) as Dir[];
+
+	// const pkgs = packageFolders
+	// 	.filter((p) => p.name !== 'tea.xyz')
+	// 	.map(getPkgBottles)
+	// 	.filter((pkgBottles) => pkgBottles.length)
+	// 	.map((pkgBottles) => {
+	// 		const versions = pkgBottles.map((v) => v.split('/v')[1]);
+	// 		const full_name = pkgBottles[0].split('/v')[0];
+
+	// 		const isSemverVersion = versions.filter((v) => semverTest.test(v));
+	// 		const isNotAsterisk = versions.filter((v) => v !== '*');
+	// 		const version =
+	// 			(isSemverVersion.length && isSemverVersion[0]) ||
+	// 			(isNotAsterisk.length && isNotAsterisk[0]) ||
+	// 			'*';
+	// 		return {
+	// 			version,
+	// 			full_name
+	// 		};
+	// 	});
+	// return pkgs;
+	return [];
+}
+
+const semverTest =
+	/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/g;
+
+export const getPkgBottles = (packageDir: Dir): string[] => {
+	const bottles: string[] = [];
+
+	const pkg = packageDir.path.split('.tea/')[1];
+	const version = pkg.split('/v')[1];
+
+	const isVersion = semverTest.test(version) || !isNaN(+version) || version === '*';
+
+	if (version && isVersion) {
+		bottles.push(pkg);
+	} else if (packageDir?.children?.length) {
+		const childBottles = packageDir.children
+			.map(getPkgBottles)
+			.reduce((arr, bottles) => [...arr, ...bottles], []);
+		bottles.push(...childBottles);
+	}
+
+	return bottles.filter((b) => b !== undefined).sort(); // ie: ["gohugo.io/v*", "gohugo.io/v0", "gohugo.io/v0.108", "gohugo.io/v0.108.0"]
+};
diff --git a/modules/desktop/src/libs/types.ts b/modules/desktop/src/libs/types.ts
new file mode 100644
index 0000000..5636799
--- /dev/null
+++ b/modules/desktop/src/libs/types.ts
@@ -0,0 +1,44 @@
+// as much possible add types here that are unique to @tea/gui use only
+// else
+// 		please use the package @tea/ui/src/types.ts
+//		things that go there are shared types/shapes like ie: Package
+
+import type { Package, Developer } from '@tea/ui/types';
+
+export enum PackageStates {
+	AVAILABLE,
+	INSTALLED,
+	INSTALLING,
+	UNINSTALLED
+}
+
+export type GUIPackage = Package & {
+	state: PackageStates;
+	installed_version?: string;
+};
+
+export type Course = {
+	title: string;
+	sub_title: string;
+	banner_image_url: string;
+	link: string;
+};
+
+export type Category = {
+	label: string;
+	cta_label: string;
+	packages: GUIPackage[];
+};
+
+export enum AuthStatus {
+	UNKNOWN = 'UNKNOWN',
+	PENDING = 'PENDING',
+	SUCCESS = 'SUCCESS',
+	FAILED = 'FAILED'
+}
+
+export type DeviceAuth = {
+	status: AuthStatus;
+	user: Developer;
+	key: string;
+};
diff --git a/modules/desktop/src/libs/v1Client.ts b/modules/desktop/src/libs/v1Client.ts
new file mode 100644
index 0000000..99beb77
--- /dev/null
+++ b/modules/desktop/src/libs/v1Client.ts
@@ -0,0 +1,63 @@
+import { net, app } from 'electron';
+import type { Session } from '$libs/stores/auth';
+import bcrypt from 'bcryptjs';
+import { getSession } from '$libs/stores/auth';
+import urlJoin from 'url-join';
+
+export const baseUrl = 'https://api.tea.xyz/v1';
+
+export async function get<T>(path: string, query?: { [key: string]: string }) {
+	console.log(`GET /api/${path}`);
+
+	await app.isReady(); // wait for electrong dont remove
+
+	const [session] = await Promise.all([getSession()]);
+
+	const headers =
+		session?.device_id && session?.user
+			? await getHeaders(`GET/${path}`, session)
+			: { Authorization: 'public ' };
+
+	return new Promise((resolve, reject) => {
+		const url = urlJoin(baseUrl, path);
+
+		const req = net.request({
+			method: 'GET',
+			url
+		});
+
+		for (const k in headers) {
+			const v = headers[k as keyof typeof headers];
+			if (v) req.setHeader(k, v);
+		}
+
+		const buffer: Buffer[] = [];
+		req.on('response', (res) => {
+			res.on('error', reject);
+			res.on('data', (b) => buffer.push(b));
+			res.on('end', () => {
+				const bodyRaw = Buffer.concat(buffer);
+				const body = JSON.parse(bodyRaw.toString());
+				resolve(body);
+			});
+		});
+
+		req.on('error', reject);
+	});
+}
+
+async function getHeaders(path: string, session: Session) {
+	const unixMs = new Date().getTime();
+	const unixHexSecs = Math.round(unixMs / 1000).toString(16); // hex
+	const deviceId = session.device_id?.split('-')[0];
+	const preHash = [unixHexSecs, session.key, deviceId, path].join('');
+
+	const Authorization = bcrypt.hashSync(preHash, 10);
+
+	return {
+		Authorization,
+		['tea-ts']: unixMs.toString(),
+		['tea-uid']: session.user?.developer_id,
+		['tea-gui_id']: session.device_id
+	};
+}
diff --git a/modules/desktop/src/preload.cjs b/modules/desktop/src/preload.cjs
new file mode 100644
index 0000000..8432cb9
--- /dev/null
+++ b/modules/desktop/src/preload.cjs
@@ -0,0 +1,13 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electron', {
+	send: (channel, data) => {
+		ipcRenderer.send(channel, data);
+	},
+	sendSync: (channel, data) => {
+		ipcRenderer.sendSync(channel, data);
+	},
+	receive: (channel, func) => {
+		ipcRenderer.on(channel, (event, ...args) => func(...args));
+	}
+});
diff --git a/modules/desktop/src/routes/+layout.js b/modules/desktop/src/routes/+layout.js
deleted file mode 100644
index 189f71e..0000000
--- a/modules/desktop/src/routes/+layout.js
+++ /dev/null
@@ -1 +0,0 @@
-export const prerender = true;
diff --git a/modules/desktop/src/routes/+layout.svelte b/modules/desktop/src/routes/+layout.svelte
index 9dca94a..bdb93bd 100644
--- a/modules/desktop/src/routes/+layout.svelte
+++ b/modules/desktop/src/routes/+layout.svelte
@@ -1,10 +1,87 @@
-<script>
-	import '../app.css';
-	import SideBar from '$lib/SideBar.svelte';
+<script lang="ts">
+	import '$appcss';
+	// import { navigating } from '$app/stores';
+	// import { afterNavigate } from '$app/navigation';
+	import TopBar from '$components/TopBar/TopBar.svelte';
+	import FooterLinks from '$components/FooterLinks/FooterLinks.svelte';
+	import { navStore } from '$libs/stores';
+
+	import SearchPopupResults from '$components/SearchPopupResults/SearchPopupResults.svelte';
+
+	let view: HTMLElement;
+
+	// $: if ($navigating) view.scrollTop = 0;
+
+	// afterNavigate(({ from, to }) => {
+	// 	if (to && to?.route.id && from && from?.url) {
+	// 		const nextPath = to.url.href.replace(to.url.origin, '');
+	// 		const fromPath = from?.url.href.replace(from.url.origin, '');
+	// 		navStore.setNewPath(nextPath, fromPath || '/');
+	// 	}
+	// });
 </script>
 
-<SideBar />
-
-<div class="main">
-	<slot />
+<div id="main-layout" class="w-full">
+	<TopBar />
+	<section class="relative pt-24" bind:this={view}>
+		<figure />
+		<div class="content">
+			<slot />
+		</div>
+		<footer class="border-gray mt-8 w-full border border-r-0 bg-black">
+			<FooterLinks />
+		</footer>
+		<!-- <SearchPopupResults /> -->
+	</section>
 </div>
+
+<style>
+	#main-layout {
+		height: 100vh;
+	}
+	section {
+		height: calc(100vh - 82px);
+		overflow-y: scroll;
+		box-sizing: border-box;
+	}
+
+	figure {
+		z-index: 0;
+		position: fixed;
+		top: 220px;
+		left: 0px;
+		right: 0px;
+		bottom: 0px;
+		background-image: url('/images/gui-background-grid.svg');
+	}
+	@media screen and (min-width: 1440px) {
+		figure {
+			background-size: cover;
+			background-repeat: repeat-y;
+		}
+		.content {
+			padding: 0vw 3.6vw !important;
+		}
+	}
+	@media screen and (max-width: 1440px) {
+		figure {
+			background-size: contain;
+			background-repeat: repeat;
+		}
+		.content {
+			padding: 0vw 3.33vw;
+		}
+	}
+
+	slot {
+		z-index: 1;
+	}
+
+	div {
+		position: relative;
+	}
+
+	footer {
+		height: 100px;
+	}
+</style>
diff --git a/modules/desktop/src/routes/+layout.ts b/modules/desktop/src/routes/+layout.ts
new file mode 100644
index 0000000..83addb7
--- /dev/null
+++ b/modules/desktop/src/routes/+layout.ts
@@ -0,0 +1,2 @@
+export const ssr = false;
+export const prerender = false;
diff --git a/modules/desktop/src/routes/+page.svelte b/modules/desktop/src/routes/+page.svelte
index 5966219..8852286 100644
--- a/modules/desktop/src/routes/+page.svelte
+++ b/modules/desktop/src/routes/+page.svelte
@@ -1,49 +1,51 @@
-<script>
-	import Counter from '$lib/Counter.svelte';
+<!-- home / discover / welcome page -->
+<script lang="ts">
+	import '$appcss';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
+	import Packages from '$components/Packages/Packages.svelte';
+	import News from '$components/News/News.svelte';
+
+	import HeaderCard from '@tea/ui/HeaderCard/HeaderCard.svelte';
+	import ListAction from '@tea/ui/ListAction/ListAction.svelte';
 </script>
 
-<svelte:head>
-	<title>Svelte Template</title>
-</svelte:head>
-
-<main>
-	<h1 class="text-primary">Hello world!</h1>
-	<Counter />
-	<p>
-		Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.
-		<i class="fas fa-heart fa-fw" />
-	</p>
-</main>
-
-<style lang="css">
-	main {
-		text-align: center;
-		padding: 1em;
-		margin: 0 auto;
-	}
-
-	h1 {
-		text-transform: uppercase;
-		font-size: 4rem;
-		font-weight: 100;
-		line-height: 1.1;
-		margin: 4rem auto;
-		max-width: 14rem;
-	}
-
-	p {
-		max-width: 14rem;
-		margin: 2rem auto;
-		line-height: 1.35;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			max-width: none;
-		}
-
-		p {
-			max-width: none;
-		}
-	}
-</style>
+<div>
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">Discover</PageHeader>
+	<section class="mt-8 mb-8">
+		<Packages title="FOUNDATION ESSENTIALS" />
+	</section>
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">ASSET TYPE</PageHeader>
+	<section class="mt-8 mb-8 flex gap-4">
+		<div>
+			<HeaderCard
+				title="Browser Packages"
+				imgUrl="/images/bored-ape.png"
+				ctaUrl="/packages"
+				ctaLabel="Browse packages >"
+				articleTitle="What are packages?"
+				description="Collections of files aggregated to form larger frameworks & functions. Think Python or Node.js."
+			/>
+			<ListAction title="Top packages this week" mainCtaTitle="VIEW ALL PACKAGES" />
+		</div>
+		<div>
+			<HeaderCard
+				title="Browse Scripts"
+				imgUrl="/images/bored-ape.png"
+				ctaUrl="/packages"
+				ctaLabel="Browse scripts >"
+				articleTitle="What are scripts?"
+				description="Invisible applications that chain packages together in order to perform cool actions on your computer."
+			/>
+			<ListAction title="Top scripts this week" mainCtaTitle="VIEW ALL SCRIPTS" />
+		</div>
+	</section>
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">TUTORIALS</PageHeader>
+	<section class="mt-8 mb-8">
+		<EssentialWorkshops title="WORKSHOPS TO GET STARTED" ctaLabel="Read more articles >" />
+	</section>
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">OPEN-SOURCE NEWS</PageHeader>
+	<section class="mt-8">
+		<News />
+	</section>
+</div>
diff --git a/modules/desktop/src/routes/cli/+page.svelte b/modules/desktop/src/routes/cli/+page.svelte
new file mode 100644
index 0000000..f3490c3
--- /dev/null
+++ b/modules/desktop/src/routes/cli/+page.svelte
@@ -0,0 +1,18 @@
+<script>
+	import '$appcss';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import CliBanner from '$components/CliBanner/CliBanner.svelte';
+	import BigBlackSpace from '$components/BigBlackSpace/BigBlackSpace.svelte';
+</script>
+
+<div>
+	<PageHeader>INSTALL TEA</PageHeader>
+
+	<section>
+		<CliBanner />
+	</section>
+
+	<section class="mt-8">
+		<BigBlackSpace />
+	</section>
+</div>
diff --git a/modules/desktop/src/routes/documentation/+page.svelte b/modules/desktop/src/routes/documentation/+page.svelte
new file mode 100644
index 0000000..3d72e17
--- /dev/null
+++ b/modules/desktop/src/routes/documentation/+page.svelte
@@ -0,0 +1,18 @@
+<script>
+	import '$appcss';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import FeaturedCourses from '$components/FeaturedCourses/FeaturedCourses.svelte';
+	import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
+</script>
+
+<div>
+	<PageHeader>Documentation</PageHeader>
+
+	<section>
+		<FeaturedCourses />
+	</section>
+
+	<section class="mt-8">
+		<EssentialWorkshops />
+	</section>
+</div>
diff --git a/modules/desktop/src/routes/packages/+page.svelte b/modules/desktop/src/routes/packages/+page.svelte
new file mode 100644
index 0000000..8b184ef
--- /dev/null
+++ b/modules/desktop/src/routes/packages/+page.svelte
@@ -0,0 +1,10 @@
+<script>
+	import '$appcss';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import SearchPackages from '$components/SearchPackages/SearchPackages.svelte';
+</script>
+
+<div>
+	<PageHeader>Packages</PageHeader>
+	<SearchPackages />
+</div>
diff --git a/modules/desktop/src/routes/packages/[slug]/+page.svelte b/modules/desktop/src/routes/packages/[slug]/+page.svelte
new file mode 100644
index 0000000..8cba314
--- /dev/null
+++ b/modules/desktop/src/routes/packages/[slug]/+page.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	import '$appcss';
+	import { onMount } from 'svelte';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import { packagesReviewStore } from '$libs/stores';
+	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
+	import type { Review, Bottle } from '@tea/ui/types';
+	import SuggestedPackages from '$components/SuggestedPackages/SuggestedPackages.svelte';
+	import Tabs from '@tea/ui/Tabs/Tabs.svelte';
+	import type { Tab } from '@tea/ui/types';
+	import Bottles from '@tea/ui/Bottles/Bottles.svelte';
+	import { getPackageBottles } from '@api';
+	import PackageMetas from '@tea/ui/PackageMetas/PackageMetas.svelte';
+	import Markdown from '@tea/ui/Markdown/Markdown.svelte';
+	import PackageSnippets from '@tea/ui/PackageSnippets/PackageSnippets.svelte';
+
+	/** @type {import('./$types').PageData} */
+	export let data;
+
+	import { packagesStore, featuredPackages } from '$libs/stores';
+
+	import type { Package } from '@tea/ui/types';
+
+	let pkg: Package;
+
+	let reviews: Review[];
+	let bottles: Bottle[] = [];
+	let versions: string[] = [];
+
+	let tabs: Tab[] = [];
+
+	const setPkg = (pkgs: Package[]) => {
+		const foundPackage = pkgs.find(({ slug }) => slug === data?.slug) as Package;
+		if (!pkg && foundPackage) {
+			pkg = foundPackage;
+			tabs.push({
+				label: 'details',
+				component: Markdown,
+				props: { pkg }
+			});
+		}
+
+		if (!reviews && pkg) {
+			packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
+				reviews = updatedReviews;
+			});
+		}
+	};
+
+	packagesStore.subscribe(setPkg);
+	featuredPackages.subscribe(setPkg);
+
+	onMount(async () => {
+		try {
+			const newBottles = await getPackageBottles(pkg.full_name);
+			const newVersion = newBottles.map((b) => b.version);
+			versions = [...new Set(newVersion)];
+
+			bottles.push(...newBottles);
+			tabs = [
+				...tabs,
+				{
+					label: `versions (${versions.length || 0})`,
+					component: Bottles,
+					props: {
+						bottles
+					}
+				}
+			];
+		} catch (err) {
+			console.error(err);
+		}
+	});
+</script>
+
+<div>
+	<PageHeader coverUrl={pkg.thumb_image_url}>{pkg.full_name}</PageHeader>
+	<section>
+		<PackageBanner {pkg} />
+	</section>
+
+	<section class="mt-8 flex gap-8">
+		<div class="w-2/3">
+			<Tabs class="bg-black" {tabs} />
+		</div>
+		<div class="w-1/3">
+			<PackageMetas />
+		</div>
+	</section>
+	<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png">SNIPPETS</PageHeader>
+	<section class="mt-8">
+		<PackageSnippets />
+	</section>
+	<!-- <section class="mt-8">
+		<PackageReviews reviews={reviews || []} />
+	</section> -->
+	{#if pkg}
+		<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png"
+			>YOU MAY ALSO LIKE...</PageHeader
+		>
+		<section class="mt-8">
+			<SuggestedPackages {pkg} />
+		</section>
+	{/if}
+</div>
diff --git a/modules/desktop/src/routes/packages/[slug]/+page.ts b/modules/desktop/src/routes/packages/[slug]/+page.ts
new file mode 100644
index 0000000..9231f34
--- /dev/null
+++ b/modules/desktop/src/routes/packages/[slug]/+page.ts
@@ -0,0 +1,11 @@
+import type { LoadEvent } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export function load({ params }: LoadEvent) {
+	// TODO: search package details here
+	return {
+		title: `${params.slug}`,
+		content: '',
+		slug: params.slug
+	};
+}
diff --git a/modules/desktop/src/routes/page1/+page.svelte b/modules/desktop/src/routes/page1/+page.svelte
deleted file mode 100644
index 0d3de4b..0000000
--- a/modules/desktop/src/routes/page1/+page.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<svelte:head>
-	<title>Page 1</title>
-</svelte:head>
-
-<h1 class="pagetitle">Page 1</h1>
-<p>This is the page 1</p>
-
-<div style="display: flex; justify-content: center;">
-	<a class="button" href="/">Home</a>
-	<a class="button" style="margin-left: 2px;" href="/page2">Page 2</a>
-	<a class="button" style="margin-left: 2px;" href="/page3">Page 3</a>
-</div>
diff --git a/modules/desktop/src/routes/page2/+page.svelte b/modules/desktop/src/routes/page2/+page.svelte
deleted file mode 100644
index 8d85381..0000000
--- a/modules/desktop/src/routes/page2/+page.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<svelte:head>
-	<title>Page 2</title>
-</svelte:head>
-
-<h1 class="pagetitle">Page 2</h1>
-<p>This is the page 2</p>
-
-<div style="display: flex; justify-content: center;">
-	<a class="button" style="margin-left: 2px;" href="/">Home</a>
-	<a class="button" style="margin-left: 2px;" href="/page1">Page 1</a>
-	<a class="button" style="margin-left: 2px;" href="/page3">Page 3</a>
-</div>
diff --git a/modules/desktop/src/routes/page3/+page.svelte b/modules/desktop/src/routes/page3/+page.svelte
deleted file mode 100644
index 1df0067..0000000
--- a/modules/desktop/src/routes/page3/+page.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<svelte:head>
-	<title>Page 3</title>
-</svelte:head>
-
-<h1 class="pagetitle">Page 3</h1>
-<p>This is the page 3</p>
-
-<div style="display: flex; justify-content: center;">
-	<a class="button" href="/">Home</a>
-	<a class="button" style="margin-left: 2px;" href="/page1">Page 1</a>
-	<a class="button" style="margin-left: 2px;" href="/page2">Page 2</a>
-</div>
diff --git a/modules/desktop/src/routes/profile/+page.svelte b/modules/desktop/src/routes/profile/+page.svelte
new file mode 100644
index 0000000..94e6ce3
--- /dev/null
+++ b/modules/desktop/src/routes/profile/+page.svelte
@@ -0,0 +1,28 @@
+<script>
+	import '$appcss';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import ProfileBanner from '$components/ProfileBanner/ProfileBanner.svelte';
+	import Preflight from '$components/Preflight/Preflight.svelte';
+	import Badges from '$components/Badges/Badges.svelte';
+	import InstalledPackages from '$components/InstalledPackages/InstalledPackages.svelte';
+</script>
+
+<div>
+	<PageHeader>PROFILE</PageHeader>
+	<section>
+		<ProfileBanner />
+	</section>
+
+	<section class="mt-8 grid grid-cols-2 gap-8">
+		<div>
+			<Preflight />
+		</div>
+		<div>
+			<Badges />
+		</div>
+	</section>
+
+	<section class="mt-8">
+		<InstalledPackages />
+	</section>
+</div>
diff --git a/modules/desktop/static/favicon.png b/modules/desktop/static/favicon.png
new file mode 100644
index 0000000..825b9e6
Binary files /dev/null and b/modules/desktop/static/favicon.png differ
diff --git a/modules/desktop/static/fonts/PPNeueMachina-InktrapLight.woff b/modules/desktop/static/fonts/PPNeueMachina-InktrapLight.woff
new file mode 100644
index 0000000..6c3052b
Binary files /dev/null and b/modules/desktop/static/fonts/PPNeueMachina-InktrapLight.woff differ
diff --git a/modules/desktop/static/fonts/Sono-Light.woff2 b/modules/desktop/static/fonts/Sono-Light.woff2
new file mode 100644
index 0000000..24cfacb
Binary files /dev/null and b/modules/desktop/static/fonts/Sono-Light.woff2 differ
diff --git a/modules/desktop/static/images/bored-ape.png b/modules/desktop/static/images/bored-ape.png
new file mode 100644
index 0000000..7b03ac1
Binary files /dev/null and b/modules/desktop/static/images/bored-ape.png differ
diff --git a/modules/desktop/static/images/close.svg b/modules/desktop/static/images/close.svg
new file mode 100644
index 0000000..08c0a8c
--- /dev/null
+++ b/modules/desktop/static/images/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/></svg>
\ No newline at end of file
diff --git a/modules/desktop/static/images/expand.svg b/modules/desktop/static/images/expand.svg
new file mode 100644
index 0000000..8de57e2
--- /dev/null
+++ b/modules/desktop/static/images/expand.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 19H5l.007-7H7v5h5v2Zm6.992-7H17V7h-5V5h7l-.008 7Z"/></svg>
\ No newline at end of file
diff --git a/modules/desktop/static/images/footer-grid-element.svg b/modules/desktop/static/images/footer-grid-element.svg
new file mode 100644
index 0000000..ec904c8
--- /dev/null
+++ b/modules/desktop/static/images/footer-grid-element.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="961.504" height="157.742" viewBox="0 0 961.504 157.742">
+  <g id="Group_1224" data-name="Group 1224" transform="translate(-159.75 -8720.324)">
+    <path id="Rectangle_616" data-name="Rectangle 616" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(160 8720.574)" fill="#949494"/>
+    <path id="Rectangle_617" data-name="Rectangle 617" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(240.084 8720.574)" fill="#949494"/>
+    <path id="Rectangle_618" data-name="Rectangle 618" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(320.168 8720.574)" fill="#949494"/>
+    <path id="Rectangle_619" data-name="Rectangle 619" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(400.251 8720.574)" fill="#949494"/>
+    <path id="Rectangle_620" data-name="Rectangle 620" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(480.334 8720.574)" fill="#949494"/>
+    <path id="Rectangle_621" data-name="Rectangle 621" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(560.418 8720.574)" fill="#949494"/>
+    <path id="Rectangle_622" data-name="Rectangle 622" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(640.502 8720.574)" fill="#949494"/>
+    <path id="Rectangle_2829" data-name="Rectangle 2829" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(880.754 8720.574)" fill="#949494"/>
+    <path id="Rectangle_623" data-name="Rectangle 623" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(720.586 8720.574)" fill="#949494"/>
+    <path id="Rectangle_2827" data-name="Rectangle 2827" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(960.838 8720.574)" fill="#949494"/>
+    <path id="Rectangle_624" data-name="Rectangle 624" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(800.669 8720.574)" fill="#949494"/>
+    <path id="Rectangle_2825" data-name="Rectangle 2825" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(1040.92 8720.574)" fill="#949494"/>
+    <path id="Rectangle_616-2" data-name="Rectangle 616" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(160 8799.358)" fill="#949494"/>
+    <path id="Rectangle_617-2" data-name="Rectangle 617" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(240.084 8799.358)" fill="#949494"/>
+    <path id="Rectangle_618-2" data-name="Rectangle 618" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(320.168 8799.358)" fill="#949494"/>
+    <path id="Rectangle_619-2" data-name="Rectangle 619" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(400.251 8799.358)" fill="#949494"/>
+    <path id="Rectangle_620-2" data-name="Rectangle 620" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(480.334 8799.358)" fill="#949494"/>
+    <path id="Rectangle_621-2" data-name="Rectangle 621" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(560.418 8799.358)" fill="#949494"/>
+    <path id="Rectangle_622-2" data-name="Rectangle 622" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(640.502 8799.358)" fill="#949494"/>
+    <path id="Rectangle_2830" data-name="Rectangle 2830" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(880.754 8799.358)" fill="#949494"/>
+    <path id="Rectangle_623-2" data-name="Rectangle 623" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(720.586 8799.358)" fill="#949494"/>
+    <path id="Rectangle_2828" data-name="Rectangle 2828" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(960.838 8799.358)" fill="#949494"/>
+    <path id="Rectangle_624-2" data-name="Rectangle 624" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(800.669 8799.358)" fill="#949494"/>
+    <path id="Rectangle_2826" data-name="Rectangle 2826" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(1040.92 8799.358)" fill="#949494"/>
+  </g>
+</svg>
diff --git a/modules/desktop/static/images/github.png b/modules/desktop/static/images/github.png
new file mode 100644
index 0000000..3a1bfa4
Binary files /dev/null and b/modules/desktop/static/images/github.png differ
diff --git a/modules/desktop/static/images/gui-background-grid.svg b/modules/desktop/static/images/gui-background-grid.svg
new file mode 100644
index 0000000..1da61ed
--- /dev/null
+++ b/modules/desktop/static/images/gui-background-grid.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2880.52 1920.36"><defs><style>.cls-1{fill:none;stroke:#949494;stroke-miterlimit:10;stroke-width:.5px;}</style></defs><g id="Grid"><g><rect class="cls-1" x=".25" y="480.25" width="120" height="120"/><rect class="cls-1" x="120.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="240.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="360.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="480.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="600.25" y="480.25" width="120" height="120"/><rect class="cls-1" x=".25" y="360.25" width="120" height="120"/><rect class="cls-1" x="120.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="240.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="360.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="480.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="600.25" y="360.25" width="120" height="120"/><rect class="cls-1" x=".25" y="240.25" width="120" height="120"/><rect class="cls-1" x="120.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="240.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="360.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="480.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="600.25" y="240.25" width="120" height="120"/><rect class="cls-1" x=".25" y="120.25" width="120" height="120"/><rect class="cls-1" x="120.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="240.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="360.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="480.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="600.25" y="120.25" width="120" height="120"/><rect class="cls-1" x=".25" y=".25" width="120" height="120"/><rect class="cls-1" x="120.25" y=".25" width="120" height="120"/><rect class="cls-1" x="240.25" y=".25" width="120" height="120"/><rect class="cls-1" x="360.25" y=".25" width="120" height="120"/><rect class="cls-1" x="480.25" y=".25" width="120" height="120"/><rect class="cls-1" x="600.25" y=".25" width="120" height="120"/><rect class="cls-1" x=".25" y="960.25" width="120" height="120"/><rect class="cls-1" x="120.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="240.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="360.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="480.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="600.25" y="960.25" width="120" height="120"/><rect class="cls-1" x=".25" y="840.25" width="120" height="120"/><rect class="cls-1" x="120.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="240.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="360.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="480.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="600.25" y="840.25" width="120" height="120"/><rect class="cls-1" x=".25" y="720.25" width="120" height="120"/><rect class="cls-1" x="120.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="240.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="360.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="480.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="600.25" y="720.25" width="120" height="120"/><rect class="cls-1" x=".25" y="600.25" width="120" height="120"/><rect class="cls-1" x="120.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="240.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="360.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="480.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="600.25" y="600.25" width="120" height="120"/><g><rect class="cls-1" x="720.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="840.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="960.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="1080.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="1200.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="1320.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="1440.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="1560.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="1680.25" y="480.25" width="120" height="120"/><rect class="cls-1" x="720.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="840.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="960.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="1080.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="1200.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="1320.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="1440.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="1560.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="1680.25" y="360.25" width="120" height="120"/><rect class="cls-1" x="720.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="840.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="960.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="1080.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="1200.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="1320.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="1440.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="1560.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="1680.25" y="240.25" width="120" height="120"/><rect class="cls-1" x="720.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="840.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="960.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="1080.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="1200.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="1320.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="1440.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="1560.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="1680.25" y="120.25" width="120" height="120"/><rect class="cls-1" x="720.25" y=".25" width="120" height="120"/><rect class="cls-1" x="840.25" y=".25" width="120" height="120"/><rect class="cls-1" x="960.25" y=".25" width="120" height="120"/><rect class="cls-1" x="1080.25" y=".25" width="120" height="120"/><rect class="cls-1" x="1200.25" y=".25" width="120" height="120"/><rect class="cls-1" x="1320.25" y=".25" width="120" height="120"/><rect class="cls-1" x="1440.25" y=".25" width="120" height="120"/><rect class="cls-1" x="1560.25" y=".25" width="120" height="120"/><rect class="cls-1" x="1680.25" y=".25" width="120" height="120"/><rect class="cls-1" x="720.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="840.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="960.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="1080.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="1200.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="1320.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="1440.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="1560.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="1680.25" y="960.25" width="120" height="120"/><rect class="cls-1" x="720.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="840.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="960.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="1080.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="1200.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="1320.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="1440.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="1560.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="1680.25" y="840.25" width="120" height="120"/><rect class="cls-1" x="720.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="840.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="960.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="1080.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="1200.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="1320.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="1440.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="1560.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="1680.25" y="720.25" width="120" height="120"/><rect class="cls-1" x="720.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="840.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="960.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="1080.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="1200.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="1320.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="1440.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="1560.25" y="600.25" width="120" height="120"/><rect class="cls-1" x="1680.25" y="600.25" width="120" height="120"/></g><g><rect class="cls-1" x="1800.27" y="480.25" width="120" height="120"/><rect class="cls-1" x="1920.27" y="480.25" width="120" height="120"/><rect class="cls-1" x="2040.27" y="480.25" width="120" height="120"/><rect class="cls-1" x="2160.27" y="480.25" width="120" height="120"/><rect class="cls-1" x="2280.27" y="480.25" width="120" height="120"/><rect class="cls-1" x="2400.27" y="480.25" width="120" height="120"/><rect class="cls-1" x="2520.27" y="480.25" width="120" height="120"/><rect class="cls-1" x="2640.27" y="480.25" width="120" height="120"/><rect class="cls-1" x="2760.27" y="480.25" width="120" height="120"/><rect class="cls-1" x="1800.27" y="360.25" width="120" height="120"/><rect class="cls-1" x="1920.27" y="360.25" width="120" height="120"/><rect class="cls-1" x="2040.27" y="360.25" width="120" height="120"/><rect class="cls-1" x="2160.27" y="360.25" width="120" height="120"/><rect class="cls-1" x="2280.27" y="360.25" width="120" height="120"/><rect class="cls-1" x="2400.27" y="360.25" width="120" height="120"/><rect class="cls-1" x="2520.27" y="360.25" width="120" height="120"/><rect class="cls-1" x="2640.27" y="360.25" width="120" height="120"/><rect class="cls-1" x="2760.27" y="360.25" width="120" height="120"/><rect class="cls-1" x="1800.27" y="240.25" width="120" height="120"/><rect class="cls-1" x="1920.27" y="240.25" width="120" height="120"/><rect class="cls-1" x="2040.27" y="240.25" width="120" height="120"/><rect class="cls-1" x="2160.27" y="240.25" width="120" height="120"/><rect class="cls-1" x="2280.27" y="240.25" width="120" height="120"/><rect class="cls-1" x="2400.27" y="240.25" width="120" height="120"/><rect class="cls-1" x="2520.27" y="240.25" width="120" height="120"/><rect class="cls-1" x="2640.27" y="240.25" width="120" height="120"/><rect class="cls-1" x="2760.27" y="240.25" width="120" height="120"/><rect class="cls-1" x="1800.27" y="120.25" width="120" height="120"/><rect class="cls-1" x="1920.27" y="120.25" width="120" height="120"/><rect class="cls-1" x="2040.27" y="120.25" width="120" height="120"/><rect class="cls-1" x="2160.27" y="120.25" width="120" height="120"/><rect class="cls-1" x="2280.27" y="120.25" width="120" height="120"/><rect class="cls-1" x="2400.27" y="120.25" width="120" height="120"/><rect class="cls-1" x="2520.27" y="120.25" width="120" height="120"/><rect class="cls-1" x="2640.27" y="120.25" width="120" height="120"/><rect class="cls-1" x="2760.27" y="120.25" width="120" height="120"/><rect class="cls-1" x="1800.27" y=".25" width="120" height="120"/><rect class="cls-1" x="1920.27" y=".25" width="120" height="120"/><rect class="cls-1" x="2040.27" y=".25" width="120" height="120"/><rect class="cls-1" x="2160.27" y=".25" width="120" height="120"/><rect class="cls-1" x="2280.27" y=".25" width="120" height="120"/><rect class="cls-1" x="2400.27" y=".25" width="120" height="120"/><rect class="cls-1" x="2520.27" y=".25" width="120" height="120"/><rect class="cls-1" x="2640.27" y=".25" width="120" height="120"/><rect class="cls-1" x="2760.27" y=".25" width="120" height="120"/><rect class="cls-1" x="1800.27" y="960.25" width="120" height="120"/><rect class="cls-1" x="1920.27" y="960.25" width="120" height="120"/><rect class="cls-1" x="2040.27" y="960.25" width="120" height="120"/><rect class="cls-1" x="2160.27" y="960.25" width="120" height="120"/><rect class="cls-1" x="2280.27" y="960.25" width="120" height="120"/><rect class="cls-1" x="2400.27" y="960.25" width="120" height="120"/><rect class="cls-1" x="2520.27" y="960.25" width="120" height="120"/><rect class="cls-1" x="2640.27" y="960.25" width="120" height="120"/><rect class="cls-1" x="2760.27" y="960.25" width="120" height="120"/><rect class="cls-1" x="1800.27" y="840.25" width="120" height="120"/><rect class="cls-1" x="1920.27" y="840.25" width="120" height="120"/><rect class="cls-1" x="2040.27" y="840.25" width="120" height="120"/><rect class="cls-1" x="2160.27" y="840.25" width="120" height="120"/><rect class="cls-1" x="2280.27" y="840.25" width="120" height="120"/><rect class="cls-1" x="2400.27" y="840.25" width="120" height="120"/><rect class="cls-1" x="2520.27" y="840.25" width="120" height="120"/><rect class="cls-1" x="2640.27" y="840.25" width="120" height="120"/><rect class="cls-1" x="2760.27" y="840.25" width="120" height="120"/><rect class="cls-1" x="1800.27" y="720.25" width="120" height="120"/><rect class="cls-1" x="1920.27" y="720.25" width="120" height="120"/><rect class="cls-1" x="2040.27" y="720.25" width="120" height="120"/><rect class="cls-1" x="2160.27" y="720.25" width="120" height="120"/><rect class="cls-1" x="2280.27" y="720.25" width="120" height="120"/><rect class="cls-1" x="2400.27" y="720.25" width="120" height="120"/><rect class="cls-1" x="2520.27" y="720.25" width="120" height="120"/><rect class="cls-1" x="2640.27" y="720.25" width="120" height="120"/><rect class="cls-1" x="2760.27" y="720.25" width="120" height="120"/><rect class="cls-1" x="1800.27" y="600.25" width="120" height="120"/><rect class="cls-1" x="1920.27" y="600.25" width="120" height="120"/><rect class="cls-1" x="2040.27" y="600.25" width="120" height="120"/><rect class="cls-1" x="2160.27" y="600.25" width="120" height="120"/><rect class="cls-1" x="2280.27" y="600.25" width="120" height="120"/><rect class="cls-1" x="2400.27" y="600.25" width="120" height="120"/><rect class="cls-1" x="2520.27" y="600.25" width="120" height="120"/><rect class="cls-1" x="2640.27" y="600.25" width="120" height="120"/><rect class="cls-1" x="2760.27" y="600.25" width="120" height="120"/></g><rect class="cls-1" x=".25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="120.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="240.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="360.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="480.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="600.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x=".25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="120.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="240.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="360.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="480.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="600.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x=".25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="120.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="240.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="360.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="480.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="600.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x=".25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="120.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="240.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="360.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="480.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="600.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x=".25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="120.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="240.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="360.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="480.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="600.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x=".25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="120.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="240.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="360.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="480.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="600.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x=".25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="120.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="240.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="360.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="480.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="600.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="720.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="840.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="960.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="1080.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="1200.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="1320.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="1440.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="1560.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="1680.25" y="1560.11" width="120" height="120"/><rect class="cls-1" x="720.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="840.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="960.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="1080.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="1200.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="1320.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="1440.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="1560.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="1680.25" y="1440.11" width="120" height="120"/><rect class="cls-1" x="720.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="840.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="960.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="1080.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="1200.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="1320.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="1440.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="1560.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="1680.25" y="1320.11" width="120" height="120"/><rect class="cls-1" x="720.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="840.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="960.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="1080.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="1200.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="1320.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="1440.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="1560.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="1680.25" y="1200.11" width="120" height="120"/><rect class="cls-1" x="720.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="840.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="960.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="1080.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="1200.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="1320.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="1440.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="1560.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="1680.25" y="1080.11" width="120" height="120"/><rect class="cls-1" x="720.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="840.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="960.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="1080.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="1200.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="1320.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="1440.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="1560.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="1680.25" y="1800.11" width="120" height="120"/><rect class="cls-1" x="720.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="840.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="960.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="1080.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="1200.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="1320.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="1440.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="1560.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="1680.25" y="1680.11" width="120" height="120"/><rect class="cls-1" x="1800.27" y="1560.11" width="120" height="120"/><rect class="cls-1" x="1920.27" y="1560.11" width="120" height="120"/><rect class="cls-1" x="2040.27" y="1560.11" width="120" height="120"/><rect class="cls-1" x="2160.27" y="1560.11" width="120" height="120"/><rect class="cls-1" x="2280.27" y="1560.11" width="120" height="120"/><rect class="cls-1" x="2400.27" y="1560.11" width="120" height="120"/><rect class="cls-1" x="2520.27" y="1560.11" width="120" height="120"/><rect class="cls-1" x="2640.27" y="1560.11" width="120" height="120"/><rect class="cls-1" x="2760.27" y="1560.11" width="120" height="120"/><rect class="cls-1" x="1800.27" y="1440.11" width="120" height="120"/><rect class="cls-1" x="1920.27" y="1440.11" width="120" height="120"/><rect class="cls-1" x="2040.27" y="1440.11" width="120" height="120"/><rect class="cls-1" x="2160.27" y="1440.11" width="120" height="120"/><rect class="cls-1" x="2280.27" y="1440.11" width="120" height="120"/><rect class="cls-1" x="2400.27" y="1440.11" width="120" height="120"/><rect class="cls-1" x="2520.27" y="1440.11" width="120" height="120"/><rect class="cls-1" x="2640.27" y="1440.11" width="120" height="120"/><rect class="cls-1" x="2760.27" y="1440.11" width="120" height="120"/><rect class="cls-1" x="1800.27" y="1320.11" width="120" height="120"/><rect class="cls-1" x="1920.27" y="1320.11" width="120" height="120"/><rect class="cls-1" x="2040.27" y="1320.11" width="120" height="120"/><rect class="cls-1" x="2160.27" y="1320.11" width="120" height="120"/><rect class="cls-1" x="2280.27" y="1320.11" width="120" height="120"/><rect class="cls-1" x="2400.27" y="1320.11" width="120" height="120"/><rect class="cls-1" x="2520.27" y="1320.11" width="120" height="120"/><rect class="cls-1" x="2640.27" y="1320.11" width="120" height="120"/><rect class="cls-1" x="2760.27" y="1320.11" width="120" height="120"/><rect class="cls-1" x="1800.27" y="1200.11" width="120" height="120"/><rect class="cls-1" x="1920.27" y="1200.11" width="120" height="120"/><rect class="cls-1" x="2040.27" y="1200.11" width="120" height="120"/><rect class="cls-1" x="2160.27" y="1200.11" width="120" height="120"/><rect class="cls-1" x="2280.27" y="1200.11" width="120" height="120"/><rect class="cls-1" x="2400.27" y="1200.11" width="120" height="120"/><rect class="cls-1" x="2520.27" y="1200.11" width="120" height="120"/><rect class="cls-1" x="2640.27" y="1200.11" width="120" height="120"/><rect class="cls-1" x="2760.27" y="1200.11" width="120" height="120"/><rect class="cls-1" x="1800.27" y="1080.11" width="120" height="120"/><rect class="cls-1" x="1920.27" y="1080.11" width="120" height="120"/><rect class="cls-1" x="2040.27" y="1080.11" width="120" height="120"/><rect class="cls-1" x="2160.27" y="1080.11" width="120" height="120"/><rect class="cls-1" x="2280.27" y="1080.11" width="120" height="120"/><rect class="cls-1" x="2400.27" y="1080.11" width="120" height="120"/><rect class="cls-1" x="2520.27" y="1080.11" width="120" height="120"/><rect class="cls-1" x="2640.27" y="1080.11" width="120" height="120"/><rect class="cls-1" x="2760.27" y="1080.11" width="120" height="120"/><rect class="cls-1" x="1800.27" y="1800.11" width="120" height="120"/><rect class="cls-1" x="1920.27" y="1800.11" width="120" height="120"/><rect class="cls-1" x="2040.27" y="1800.11" width="120" height="120"/><rect class="cls-1" x="2160.27" y="1800.11" width="120" height="120"/><rect class="cls-1" x="2280.27" y="1800.11" width="120" height="120"/><rect class="cls-1" x="2400.27" y="1800.11" width="120" height="120"/><rect class="cls-1" x="2520.27" y="1800.11" width="120" height="120"/><rect class="cls-1" x="2640.27" y="1800.11" width="120" height="120"/><rect class="cls-1" x="2760.27" y="1800.11" width="120" height="120"/><rect class="cls-1" x="1800.27" y="1680.11" width="120" height="120"/><rect class="cls-1" x="1920.27" y="1680.11" width="120" height="120"/><rect class="cls-1" x="2040.27" y="1680.11" width="120" height="120"/><rect class="cls-1" x="2160.27" y="1680.11" width="120" height="120"/><rect class="cls-1" x="2280.27" y="1680.11" width="120" height="120"/><rect class="cls-1" x="2400.27" y="1680.11" width="120" height="120"/><rect class="cls-1" x="2520.27" y="1680.11" width="120" height="120"/><rect class="cls-1" x="2640.27" y="1680.11" width="120" height="120"/><rect class="cls-1" x="2760.27" y="1680.11" width="120" height="120"/></g></g></svg>
\ No newline at end of file
diff --git a/modules/desktop/static/images/headers/header_bg_1.png b/modules/desktop/static/images/headers/header_bg_1.png
new file mode 100644
index 0000000..3411052
Binary files /dev/null and b/modules/desktop/static/images/headers/header_bg_1.png differ
diff --git a/modules/desktop/static/images/minimize.svg b/modules/desktop/static/images/minimize.svg
new file mode 100644
index 0000000..49c2ef5
--- /dev/null
+++ b/modules/desktop/static/images/minimize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 14H4v-4h16"/></svg>
\ No newline at end of file
diff --git a/modules/desktop/static/images/tea-icon.png b/modules/desktop/static/images/tea-icon.png
new file mode 100644
index 0000000..acd0859
Binary files /dev/null and b/modules/desktop/static/images/tea-icon.png differ
diff --git a/modules/desktop/svelte.config.js b/modules/desktop/svelte.config.js
index 5c6fc2c..c3ff64f 100644
--- a/modules/desktop/svelte.config.js
+++ b/modules/desktop/svelte.config.js
@@ -1,14 +1,28 @@
-import preprocess from 'svelte-preprocess';
 import adapter from '@sveltejs/adapter-static';
-//import node from "@sveltejs/adapter-node";
+import preprocess from 'svelte-preprocess';
 
-//const dev = process.env.NODE_ENV == "development"
-
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: [
+		preprocess({
+			postcss: true
+		})
+	],
 	kit: {
-		//adapter: node()
-		adapter: adapter()
-	},
-
-	preprocess: preprocess()
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: 'app.html'
+		}),
+		alias: {
+			'@tea/ui/*': '../ui/src/*'
+		}
+		// ssr: false,
+		// hydrate the <div id="svelte"> element in src/app.html
+		// target: '#svelte'
+	}
 };
+
+export default config;
diff --git a/modules/desktop/tailwind.config.ts b/modules/desktop/tailwind.config.ts
new file mode 100644
index 0000000..72fc202
--- /dev/null
+++ b/modules/desktop/tailwind.config.ts
@@ -0,0 +1,6 @@
+import { theme, plugins } from '@tea/ui/tailwind.config.cjs';
+module.exports = {
+	content: ['./src/**/*.{html,svelte,ts,js}', '../ui/src/**/*.{html,svelte,ts,js}'],
+	theme,
+	plugins: [...plugins]
+};
diff --git a/modules/desktop/tsconfig.json b/modules/desktop/tsconfig.json
new file mode 100644
index 0000000..959a31f
--- /dev/null
+++ b/modules/desktop/tsconfig.json
@@ -0,0 +1,26 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"moduleResolution": "node",
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"types": ["vitest/globals", "@testing-library/jest-dom"],
+		"paths": {
+			"$appcss": ["src/app.css"],
+			"$libs/*": ["src/libs/*"],
+			"@api": ["src/libs/api/mock.ts"],
+			"$components/*": ["src/components/*"],
+			"@tea/ui/*": ["../ui/src/*"]
+		}
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/modules/desktop/vite.config.ts b/modules/desktop/vite.config.ts
index 5229638..e57755c 100644
--- a/modules/desktop/vite.config.ts
+++ b/modules/desktop/vite.config.ts
@@ -1,11 +1,39 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import type { UserConfig } from 'vite';
+import path from 'path';
 
-/** @type {import('vite').UserConfig} */
-const config = {
+// const isMock = process.env.BUILD_FOR === 'preview';
+
+const config: UserConfig = {
 	plugins: [sveltekit()],
-
+	resolve: {
+		alias: {
+			'@tea/ui/*': path.resolve('../ui/src/*'),
+			// this dynamic-ish static importing is followed by the svelte build
+			// but for vscode editing intellisense tsconfig.json is being used
+			// TODO: replace it with correct api
+			'@api': path.resolve('src/libs/api/mock.ts'),
+			$components: path.resolve('./src/components'),
+			$libs: path.resolve('./src/libs'),
+			$appcss: path.resolve('./src/app.css')
+		}
+	},
 	server: {
-		port: 3000
+		port: 3000,
+		fs: {
+			allow: ['..']
+		}
+	},
+	test: {
+		// Jest like globals
+		globals: true,
+		environment: 'jsdom',
+		include: ['src/**/*.{test,spec}.ts'],
+		// Extend jest-dom matchers
+		setupFiles: ['./setupTest.js'],
+		coverage: {
+			provider: 'c8'
+		}
 	}
 };
 
diff --git a/modules/gui/src/setupTets b/modules/gui/src/setupTets
deleted file mode 100644
index e69de29..0000000
diff --git a/modules/ui/src/types.ts b/modules/ui/src/types.ts
index f2a00c9..c1efbfb 100644
--- a/modules/ui/src/types.ts
+++ b/modules/ui/src/types.ts
@@ -71,7 +71,8 @@ export type Tab = {
 			| Array<string>
 			| Array<number>
 			| Array<Date>
-			| Array<Record<string, unknown>>;
+			| Array<Record<string, unknown>>
+			| Package;
 	};
 	component: ComponentType;
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7f9323..1dc11d3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,12 +27,15 @@ importers:
       autoprefixer: ^10.4.13
       bcryptjs: ^2.4.3
       buffer: ^6.0.3
-      concurrently: ^6.5.1
+      concurrently: ^7.6.0
+      cross-env: ^7.0.3
       electron: 22.1.0
       electron-builder: ^23.6.0
+      electron-context-menu: ^3.6.1
       electron-log: ^4.4.8
       electron-reloader: ^1.2.3
       electron-serve: ^1.1.0
+      electron-vite: ^1.0.18
       electron-window-state: ^5.0.3
       eslint: ^8.16.0
       eslint-config-prettier: ^8.3.0
@@ -54,9 +57,10 @@ importers:
       tailwindcss: ^3.2.4
       tslib: ^2.3.1
       typescript: ^4.7.4
+      upath: ^2.0.1
       url-join: ^5.0.0
       vite: ^4.0.0
-      vitest: ^0.27.1
+      vitest: ^0.28.3
     dependencies:
       '@electron/asar': 3.2.3
       '@types/bcryptjs': 2.4.2
@@ -64,14 +68,17 @@ importers:
       '@vitest/coverage-c8': 0.27.1_jsdom@21.0.0
       bcryptjs: 2.4.3
       buffer: 6.0.3
+      electron-context-menu: 3.6.1
       electron-log: 4.4.8
       electron-serve: 1.1.0
+      electron-vite: 1.0.18_vite@4.0.4
       electron-window-state: 5.0.3
       fuse.js: 6.6.2
       lodash: 4.17.21
       lorem-ipsum: 2.0.8
       svelte-markdown: 0.2.3_svelte@3.55.1
       svelte-watch-resize: 1.0.3
+      upath: 2.0.1
       url-join: 5.0.0
     devDependencies:
       '@electron/notarize': 1.2.3
@@ -88,7 +95,8 @@ importers:
       '@typescript-eslint/eslint-plugin': 5.43.0_wze2rj5tow7zwqpgbdx2buoy3m
       '@typescript-eslint/parser': 5.43.0_e3uo4sehh4zr4i6m57mkkxxv7y
       autoprefixer: 10.4.13_postcss@8.4.20
-      concurrently: 6.5.1
+      concurrently: 7.6.0
+      cross-env: 7.0.3
       electron: 22.1.0
       electron-builder: 23.6.0
       electron-reloader: 1.2.3
@@ -108,7 +116,7 @@ importers:
       tslib: 2.4.1
       typescript: 4.9.3
       vite: 4.0.4
-      vitest: 0.27.1_jsdom@21.0.0
+      vitest: 0.28.3_jsdom@21.0.0
 
   modules/gui:
     specifiers:
@@ -290,7 +298,6 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.1.1
       '@jridgewell/trace-mapping': 0.3.17
-    dev: true
 
   /@aw-web-design/x-default-browser/1.4.88:
     resolution: {integrity: sha512-AkEmF0wcwYC2QkhK703Y83fxWARttIWXDmQN8+cof8FmFZ5BRhnNXGymeb1S73bOCLfWjYELxtujL56idCN/XA==}
@@ -304,13 +311,40 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/highlight': 7.18.6
-    dev: true
 
   /@babel/compat-data/7.20.1:
     resolution: {integrity: sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==}
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@babel/compat-data/7.20.14:
+    resolution: {integrity: sha512-0YpKHD6ImkWMEINCyDAD0HLLUH/lPCefG8ld9it8DJB2wnApraKuhgYTvTY1z7UFIfBTGy5LwncZ+5HWWGbhFw==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/core/7.20.12:
+    resolution: {integrity: sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.20.14
+      '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.12
+      '@babel/helper-module-transforms': 7.20.11
+      '@babel/helpers': 7.20.13
+      '@babel/parser': 7.20.15
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.20.13
+      '@babel/types': 7.20.7
+      convert-source-map: 1.9.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@babel/core/7.20.2:
     resolution: {integrity: sha512-w7DbG8DtMrJcFOi4VrLm+8QM4az8Mo+PuLBKLp2zrYRCow8W/f9xiXm5sN53C8HksCyDQwCKha9JiDoIyPjT2g==}
     engines: {node: '>=6.9.0'}
@@ -334,6 +368,15 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/generator/7.20.14:
+    resolution: {integrity: sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.20.7
+      '@jridgewell/gen-mapping': 0.3.2
+      jsesc: 2.5.2
+    dev: false
+
   /@babel/generator/7.20.4:
     resolution: {integrity: sha512-luCf7yk/cm7yab6CAW1aiFnmEfBJplb/JojV56MYEK7ziWfGmFlTfmL9Ehwfy4gFhbjBfWO1wj7/TuSbVNEEtA==}
     engines: {node: '>=6.9.0'}
@@ -371,6 +414,20 @@ packages:
       semver: 6.3.0
     dev: true
 
+  /@babel/helper-compilation-targets/7.20.7_@babel+core@7.20.12:
+    resolution: {integrity: sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.20.14
+      '@babel/core': 7.20.12
+      '@babel/helper-validator-option': 7.18.6
+      browserslist: 4.21.4
+      lru-cache: 5.1.1
+      semver: 6.3.0
+    dev: false
+
   /@babel/helper-create-class-features-plugin/7.20.2_@babel+core@7.20.2:
     resolution: {integrity: sha512-k22GoYRAHPYr9I+Gvy2ZQlAe5mGy8BqWst2wRt8cwIufWTxrsVshhIBvYNqC80N0GSFWTsqRVexOtfzlgOEDvA==}
     engines: {node: '>=6.9.0'}
@@ -419,7 +476,6 @@ packages:
   /@babel/helper-environment-visitor/7.18.9:
     resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-explode-assignable-expression/7.18.6:
     resolution: {integrity: sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==}
@@ -432,16 +488,14 @@ packages:
     resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/template': 7.18.10
-      '@babel/types': 7.20.2
-    dev: true
+      '@babel/template': 7.20.7
+      '@babel/types': 7.20.7
 
   /@babel/helper-hoist-variables/7.18.6:
     resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.20.2
-    dev: true
+      '@babel/types': 7.20.7
 
   /@babel/helper-member-expression-to-functions/7.18.9:
     resolution: {integrity: sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==}
@@ -454,8 +508,23 @@ packages:
     resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.20.2
-    dev: true
+      '@babel/types': 7.20.7
+
+  /@babel/helper-module-transforms/7.20.11:
+    resolution: {integrity: sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-simple-access': 7.20.2
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/helper-validator-identifier': 7.19.1
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.20.13
+      '@babel/types': 7.20.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
 
   /@babel/helper-module-transforms/7.20.2:
     resolution: {integrity: sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==}
@@ -483,7 +552,6 @@ packages:
   /@babel/helper-plugin-utils/7.20.2:
     resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-remap-async-to-generator/7.18.9_@babel+core@7.20.2:
     resolution: {integrity: sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==}
@@ -517,8 +585,7 @@ packages:
     resolution: {integrity: sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.20.2
-    dev: true
+      '@babel/types': 7.20.7
 
   /@babel/helper-skip-transparent-expression-wrappers/7.20.0:
     resolution: {integrity: sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==}
@@ -531,23 +598,19 @@ packages:
     resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.20.2
-    dev: true
+      '@babel/types': 7.20.7
 
   /@babel/helper-string-parser/7.19.4:
     resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-identifier/7.19.1:
     resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-option/7.18.6:
     resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-wrap-function/7.19.0:
     resolution: {integrity: sha512-txX8aN8CZyYGTwcLhlk87KRqncAzhh5TpQamZUa0/u3an36NtDpUP6bQgBCBcLeBs09R/OwQu3OjK0k/HwfNDg==}
@@ -572,6 +635,17 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/helpers/7.20.13:
+    resolution: {integrity: sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.20.13
+      '@babel/types': 7.20.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@babel/highlight/7.18.6:
     resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
     engines: {node: '>=6.9.0'}
@@ -579,7 +653,13 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       chalk: 2.4.2
       js-tokens: 4.0.0
-    dev: true
+
+  /@babel/parser/7.20.15:
+    resolution: {integrity: sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.20.7
 
   /@babel/parser/7.20.3:
     resolution: {integrity: sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==}
@@ -983,6 +1063,16 @@ packages:
       '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
+  /@babel/plugin-transform-arrow-functions/7.20.7_@babel+core@7.20.12:
+    resolution: {integrity: sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.20.12
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: false
+
   /@babel/plugin-transform-async-to-generator/7.18.6_@babel+core@7.20.2:
     resolution: {integrity: sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==}
     engines: {node: '>=6.9.0'}
@@ -1582,6 +1672,14 @@ packages:
       '@babel/types': 7.20.2
     dev: true
 
+  /@babel/template/7.20.7:
+    resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/parser': 7.20.15
+      '@babel/types': 7.20.7
+
   /@babel/traverse/7.20.1:
     resolution: {integrity: sha512-d3tN8fkVJwFLkHkBN479SOsw4DMZnz8cdbL/gvuDuzy3TS6Nfw80HuQqhw1pITbIruHyh7d1fMA47kWzmcUEGA==}
     engines: {node: '>=6.9.0'}
@@ -1600,6 +1698,24 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/traverse/7.20.13:
+    resolution: {integrity: sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.20.14
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.20.15
+      '@babel/types': 7.20.7
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@babel/types/7.20.2:
     resolution: {integrity: sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==}
     engines: {node: '>=6.9.0'}
@@ -1609,6 +1725,14 @@ packages:
       to-fast-properties: 2.0.0
     dev: true
 
+  /@babel/types/7.20.7:
+    resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+
   /@bcoe/v8-coverage/0.2.3:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: false
@@ -1779,6 +1903,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/android-arm/0.16.17:
+    resolution: {integrity: sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/android-arm64/0.16.10:
     resolution: {integrity: sha512-47Y+NwVKTldTlDhSgJHZ/RpvBQMUDG7eKihqaF/u6g7s0ZPz4J1vy8A3rwnnUOF2CuDn7w7Gj/QcMoWz3U3SJw==}
     engines: {node: '>=12'}
@@ -1787,6 +1920,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/android-arm64/0.16.17:
+    resolution: {integrity: sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/android-x64/0.16.10:
     resolution: {integrity: sha512-C4PfnrBMcuAcOurQzpF1tTtZz94IXO5JmICJJ3NFJRHbXXsQUg9RFG45KvydKqtFfBaFLCHpduUkUfXwIvGnRg==}
     engines: {node: '>=12'}
@@ -1795,6 +1937,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/android-x64/0.16.17:
+    resolution: {integrity: sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/darwin-arm64/0.16.10:
     resolution: {integrity: sha512-bH/bpFwldyOKdi9HSLCLhhKeVgRYr9KblchwXgY2NeUHBB/BzTUHtUSBgGBmpydB1/4E37m+ggXXfSrnD7/E7g==}
     engines: {node: '>=12'}
@@ -1803,6 +1954,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/darwin-arm64/0.16.17:
+    resolution: {integrity: sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/darwin-x64/0.16.10:
     resolution: {integrity: sha512-OXt7ijoLuy+AjDSKQWu+KdDFMBbdeaL6wtgMKtDUXKWHiAMKHan5+R1QAG6HD4+K0nnOvEJXKHeA9QhXNAjOTQ==}
     engines: {node: '>=12'}
@@ -1811,6 +1971,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/darwin-x64/0.16.17:
+    resolution: {integrity: sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/freebsd-arm64/0.16.10:
     resolution: {integrity: sha512-shSQX/3GHuspE3Uxtq5kcFG/zqC+VuMnJkqV7LczO41cIe6CQaXHD3QdMLA4ziRq/m0vZo7JdterlgbmgNIAlQ==}
     engines: {node: '>=12'}
@@ -1819,6 +1988,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/freebsd-arm64/0.16.17:
+    resolution: {integrity: sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/freebsd-x64/0.16.10:
     resolution: {integrity: sha512-5YVc1zdeaJGASijZmTzSO4h6uKzsQGG3pkjI6fuXvolhm3hVRhZwnHJkforaZLmzvNv5Tb7a3QL2FAVmrgySIA==}
     engines: {node: '>=12'}
@@ -1827,6 +2005,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/freebsd-x64/0.16.17:
+    resolution: {integrity: sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-arm/0.16.10:
     resolution: {integrity: sha512-c360287ZWI2miBnvIj23bPyVctgzeMT2kQKR+x94pVqIN44h3GF8VMEs1SFPH1UgyDr3yBbx3vowDS1SVhyVhA==}
     engines: {node: '>=12'}
@@ -1835,6 +2022,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-arm/0.16.17:
+    resolution: {integrity: sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-arm64/0.16.10:
     resolution: {integrity: sha512-2aqeNVxIaRfPcIaMZIFoblLh588sWyCbmj1HHCCs9WmeNWm+EIN0SmvsmPvTa/TsNZFKnxTcvkX2eszTcCqIrA==}
     engines: {node: '>=12'}
@@ -1843,6 +2039,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-arm64/0.16.17:
+    resolution: {integrity: sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-ia32/0.16.10:
     resolution: {integrity: sha512-sqMIEWeyrLGU7J5RB5fTkLRIFwsgsQ7ieWXlDLEmC2HblPYGb3AucD7inw2OrKFpRPKsec1l+lssiM3+NV5aOw==}
     engines: {node: '>=12'}
@@ -1851,6 +2056,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-ia32/0.16.17:
+    resolution: {integrity: sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-loong64/0.14.54:
     resolution: {integrity: sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==}
     engines: {node: '>=12'}
@@ -1877,6 +2091,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-loong64/0.16.17:
+    resolution: {integrity: sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-mips64el/0.16.10:
     resolution: {integrity: sha512-FN8mZOH7531iPHM0kaFhAOqqNHoAb6r/YHW2ZIxNi0a85UBi2DO4Vuyn7t1p4UN8a4LoAnLOT1PqNgHkgBJgbA==}
     engines: {node: '>=12'}
@@ -1885,6 +2108,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-mips64el/0.16.17:
+    resolution: {integrity: sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-ppc64/0.16.10:
     resolution: {integrity: sha512-Dg9RiqdvHOAWnOKIOTsIx8dFX9EDlY2IbPEY7YFzchrCiTZmMkD7jWA9UdZbNUygPjdmQBVPRCrLydReFlX9yg==}
     engines: {node: '>=12'}
@@ -1893,6 +2125,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-ppc64/0.16.17:
+    resolution: {integrity: sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-riscv64/0.16.10:
     resolution: {integrity: sha512-XMqtpjwzbmlar0BJIxmzu/RZ7EWlfVfH68Vadrva0Wj5UKOdKvqskuev2jY2oPV3aoQUyXwnMbMrFmloO2GfAw==}
     engines: {node: '>=12'}
@@ -1901,6 +2142,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-riscv64/0.16.17:
+    resolution: {integrity: sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-s390x/0.16.10:
     resolution: {integrity: sha512-fu7XtnoeRNFMx8DjK3gPWpFBDM2u5ba+FYwg27SjMJwKvJr4bDyKz5c+FLXLUSSAkMAt/UL+cUbEbra+rYtUgw==}
     engines: {node: '>=12'}
@@ -1909,6 +2159,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-s390x/0.16.17:
+    resolution: {integrity: sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/linux-x64/0.16.10:
     resolution: {integrity: sha512-61lcjVC/RldNNMUzQQdyCWjCxp9YLEQgIxErxU9XluX7juBdGKb0pvddS0vPNuCvotRbzijZ1pzII+26haWzbA==}
     engines: {node: '>=12'}
@@ -1917,6 +2176,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-x64/0.16.17:
+    resolution: {integrity: sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/netbsd-x64/0.16.10:
     resolution: {integrity: sha512-JeZXCX3viSA9j4HqSoygjssdqYdfHd6yCFWyfSekLbz4Ef+D2EjvsN02ZQPwYl5a5gg/ehdHgegHhlfOFP0HCA==}
     engines: {node: '>=12'}
@@ -1925,6 +2193,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/netbsd-x64/0.16.17:
+    resolution: {integrity: sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/openbsd-x64/0.16.10:
     resolution: {integrity: sha512-3qpxQKuEVIIg8SebpXsp82OBrqjPV/OwNWmG+TnZDr3VGyChNnGMHccC1xkbxCHDQNnnXjxhMQNyHmdFJbmbRA==}
     engines: {node: '>=12'}
@@ -1933,6 +2210,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/openbsd-x64/0.16.17:
+    resolution: {integrity: sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/sunos-x64/0.16.10:
     resolution: {integrity: sha512-z+q0xZ+et/7etz7WoMyXTHZ1rB8PMSNp/FOqURLJLOPb3GWJ2aj4oCqFCjPwEbW1rsT7JPpxeH/DwGAWk/I1Bg==}
     engines: {node: '>=12'}
@@ -1941,6 +2227,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/sunos-x64/0.16.17:
+    resolution: {integrity: sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/win32-arm64/0.16.10:
     resolution: {integrity: sha512-+YYu5sbQ9npkNT9Dec+tn1F/kjg6SMgr6bfi/6FpXYZvCRfu2YFPZGb+3x8K30s8eRxFpoG4sGhiSUkr1xbHEw==}
     engines: {node: '>=12'}
@@ -1949,6 +2244,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/win32-arm64/0.16.17:
+    resolution: {integrity: sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/win32-ia32/0.16.10:
     resolution: {integrity: sha512-Aw7Fupk7XNehR1ftHGYwUteyJ2q+em/aE+fVU3YMTBN2V5A7Z4aVCSV+SvCp9HIIHZavPFBpbdP3VfjQpdf6Xg==}
     engines: {node: '>=12'}
@@ -1957,6 +2261,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/win32-ia32/0.16.17:
+    resolution: {integrity: sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/win32-x64/0.16.10:
     resolution: {integrity: sha512-qddWullt3sC1EIpfHvCRBq3H4g3L86DZpD6n8k2XFjFVyp01D++uNbN1hT/JRsHxTbyyemZcpwL5aRlJwc/zFw==}
     engines: {node: '>=12'}
@@ -1965,6 +2278,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/win32-x64/0.16.17:
+    resolution: {integrity: sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@eslint/eslintrc/1.3.3:
     resolution: {integrity: sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2113,7 +2435,6 @@ packages:
     dependencies:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true
 
   /@jridgewell/gen-mapping/0.3.2:
     resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==}
@@ -2122,7 +2443,6 @@ packages:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.14
       '@jridgewell/trace-mapping': 0.3.17
-    dev: true
 
   /@jridgewell/resolve-uri/3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
@@ -2131,7 +2451,6 @@ packages:
   /@jridgewell/set-array/1.1.2:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/sourcemap-codec/1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
@@ -4256,6 +4575,7 @@ packages:
 
   /@types/glob/7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+    requiresBuild: true
     dependencies:
       '@types/minimatch': 5.1.2
       '@types/node': 18.11.9
@@ -4668,6 +4988,38 @@ packages:
       - terser
     dev: false
 
+  /@vitest/expect/0.28.3:
+    resolution: {integrity: sha512-dnxllhfln88DOvpAK1fuI7/xHwRgTgR4wdxHldPaoTaBu6Rh9zK5b//v/cjTkhOfNP/AJ8evbNO8H7c3biwd1g==}
+    dependencies:
+      '@vitest/spy': 0.28.3
+      '@vitest/utils': 0.28.3
+      chai: 4.3.7
+    dev: true
+
+  /@vitest/runner/0.28.3:
+    resolution: {integrity: sha512-P0qYbATaemy1midOLkw7qf8jraJszCoEvjQOSlseiXZyEDaZTZ50J+lolz2hWiWv6RwDu1iNseL9XLsG0Jm2KQ==}
+    dependencies:
+      '@vitest/utils': 0.28.3
+      p-limit: 4.0.0
+      pathe: 1.1.0
+    dev: true
+
+  /@vitest/spy/0.28.3:
+    resolution: {integrity: sha512-jULA6suS6CCr9VZfr7/9x97pZ0hC55prnUNHNrg5/q16ARBY38RsjsfhuUXt6QOwvIN3BhSS0QqPzyh5Di8g6w==}
+    dependencies:
+      tinyspy: 1.0.2
+    dev: true
+
+  /@vitest/utils/0.28.3:
+    resolution: {integrity: sha512-YHiQEHQqXyIbhDqETOJUKx9/psybF7SFFVCNfOvap0FvyUqbzTSDCa3S5lL4C0CLXkwVZttz9xknDoyHMguFRQ==}
+    dependencies:
+      cli-truncate: 3.1.0
+      diff: 5.1.0
+      loupe: 2.3.6
+      picocolors: 1.0.0
+      pretty-format: 27.5.1
+    dev: true
+
   /@yarnpkg/esbuild-plugin-pnp/3.0.0-rc.15_esbuild@0.14.54:
     resolution: {integrity: sha512-kYzDJO5CA9sy+on/s2aIW0411AklfCi8Ck/4QDivOqsMKpStZA2SsR+X27VTggGwpStWaLrjJcDcdDMowtG8MA==}
     engines: {node: '>=14.15.0'}
@@ -4788,7 +5140,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       color-convert: 1.9.3
-    dev: true
 
   /ansi-styles/4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
@@ -4966,8 +5317,6 @@ packages:
   /astral-regex/2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
-    dev: true
-    optional: true
 
   /astring/1.8.3:
     resolution: {integrity: sha512-sRpyiNrx2dEYIMmUXprS8nlpRg2Drs8m9ElX9vVEXaCB4XEAJhKfs7IcX0IwShjuOAjLR6wzIrgoptz1n19i1A==}
@@ -5245,7 +5594,6 @@ packages:
       electron-to-chromium: 1.4.284
       node-releases: 2.0.6
       update-browserslist-db: 1.0.10_browserslist@4.21.4
-    dev: true
 
   /bser/2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
@@ -5458,7 +5806,6 @@ packages:
 
   /caniuse-lite/1.0.30001431:
     resolution: {integrity: sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==}
-    dev: true
 
   /ccount/2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -5483,7 +5830,6 @@ packages:
       ansi-styles: 3.2.1
       escape-string-regexp: 1.0.5
       supports-color: 5.5.0
-    dev: true
 
   /chalk/3.0.0:
     resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
@@ -5587,8 +5933,14 @@ packages:
     dependencies:
       slice-ansi: 3.0.0
       string-width: 4.2.3
+
+  /cli-truncate/3.1.0:
+    resolution: {integrity: sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 5.1.2
     dev: true
-    optional: true
 
   /cliui/7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
@@ -5596,6 +5948,7 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
+    dev: false
 
   /cliui/8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
@@ -5638,7 +5991,6 @@ packages:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
       color-name: 1.1.3
-    dev: true
 
   /color-convert/2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -5648,7 +6000,6 @@ packages:
 
   /color-name/1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-    dev: true
 
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
@@ -5746,19 +6097,20 @@ packages:
       typedarray: 0.0.6
     dev: true
 
-  /concurrently/6.5.1:
-    resolution: {integrity: sha512-FlSwNpGjWQfRwPLXvJ/OgysbBxPkWpiVjy1042b0U7on7S7qwwMIILRj7WTN1mTgqa582bG6NFuScOoh6Zgdag==}
-    engines: {node: '>=10.0.0'}
+  /concurrently/7.6.0:
+    resolution: {integrity: sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==}
+    engines: {node: ^12.20.0 || ^14.13.0 || >=16.0.0}
     hasBin: true
     dependencies:
       chalk: 4.1.2
       date-fns: 2.29.3
       lodash: 4.17.21
-      rxjs: 6.6.7
+      rxjs: 7.8.0
+      shell-quote: 1.8.0
       spawn-command: 0.0.2-1
       supports-color: 8.1.1
       tree-kill: 1.2.2
-      yargs: 16.2.0
+      yargs: 17.6.2
     dev: true
 
   /config-chain/1.1.13:
@@ -5843,6 +6195,14 @@ packages:
     dev: true
     optional: true
 
+  /cross-env/7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+    dependencies:
+      cross-spawn: 7.0.3
+    dev: true
+
   /cross-spawn/7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -6286,10 +6646,30 @@ packages:
       - supports-color
     dev: true
 
+  /electron-context-menu/3.6.1:
+    resolution: {integrity: sha512-lcpO6tzzKUROeirhzBjdBWNqayEThmdW+2I2s6H6QMrwqTVyT3EK47jW3Nxm60KTxl5/bWfEoIruoUNn57/QkQ==}
+    dependencies:
+      cli-truncate: 2.1.0
+      electron-dl: 3.5.0
+      electron-is-dev: 2.0.0
+    dev: false
+
+  /electron-dl/3.5.0:
+    resolution: {integrity: sha512-Oj+VSuScVx8hEKM2HEvTQswTX6G3MLh7UoAz/oZuvKyNDfudNi1zY6PK/UnFoK1nCl9DF6k+3PFwElKbtZlDig==}
+    dependencies:
+      ext-name: 5.0.0
+      pupa: 2.1.1
+      unused-filename: 2.1.0
+    dev: false
+
   /electron-is-dev/1.2.0:
     resolution: {integrity: sha512-R1oD5gMBPS7PVU8gJwH6CtT0e6VSoD0+SzSnYpNm+dBkcijgA+K7VAMHDfnRq/lkKPZArpzplTW6jfiMYosdzw==}
     dev: true
 
+  /electron-is-dev/2.0.0:
+    resolution: {integrity: sha512-3X99K852Yoqu9AcW50qz3ibYBWY79/pBhlMCab8ToEWS48R0T9tyxRiQhwylE7zQdXrMnx2JKqUJyMPmt5FBqA==}
+    dev: false
+
   /electron-log/4.4.8:
     resolution: {integrity: sha512-QQ4GvrXO+HkgqqEOYbi+DHL7hj5JM+nHi/j+qrN9zeeXVKy8ZABgbu4CnG+BBqDZ2+tbeq9tUC4DZfIWFU5AZA==}
     dev: false
@@ -6340,7 +6720,28 @@ packages:
 
   /electron-to-chromium/1.4.284:
     resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
-    dev: true
+
+  /electron-vite/1.0.18_vite@4.0.4:
+    resolution: {integrity: sha512-oErozXFCE2YcJyFrKFfR8LKOBPFxXlaOxw/tz/xGEBNf9z+Hh6CA8xZrHKF7yVaCcOmRTw9R2cwBC4XUi4YkkA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': ^1.0.0
+      vite: ^3.0.0 || ^4.0.0
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.20.12
+      '@babel/plugin-transform-arrow-functions': 7.20.7_@babel+core@7.20.12
+      cac: 6.7.14
+      esbuild: 0.16.17
+      magic-string: 0.27.0
+      picocolors: 1.0.0
+      vite: 4.0.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
 
   /electron-window-state/5.0.3:
     resolution: {integrity: sha512-1mNTwCfkolXl3kMf50yW3vE2lZj0y92P/HYWFBrb+v2S/pCka5mdwN3cagKm458A7NjndSwijynXgcLWRodsVg==}
@@ -6908,10 +7309,45 @@ packages:
       '@esbuild/win32-ia32': 0.16.10
       '@esbuild/win32-x64': 0.16.10
 
+  /esbuild/0.16.17:
+    resolution: {integrity: sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.16.17
+      '@esbuild/android-arm64': 0.16.17
+      '@esbuild/android-x64': 0.16.17
+      '@esbuild/darwin-arm64': 0.16.17
+      '@esbuild/darwin-x64': 0.16.17
+      '@esbuild/freebsd-arm64': 0.16.17
+      '@esbuild/freebsd-x64': 0.16.17
+      '@esbuild/linux-arm': 0.16.17
+      '@esbuild/linux-arm64': 0.16.17
+      '@esbuild/linux-ia32': 0.16.17
+      '@esbuild/linux-loong64': 0.16.17
+      '@esbuild/linux-mips64el': 0.16.17
+      '@esbuild/linux-ppc64': 0.16.17
+      '@esbuild/linux-riscv64': 0.16.17
+      '@esbuild/linux-s390x': 0.16.17
+      '@esbuild/linux-x64': 0.16.17
+      '@esbuild/netbsd-x64': 0.16.17
+      '@esbuild/openbsd-x64': 0.16.17
+      '@esbuild/sunos-x64': 0.16.17
+      '@esbuild/win32-arm64': 0.16.17
+      '@esbuild/win32-ia32': 0.16.17
+      '@esbuild/win32-x64': 0.16.17
+    dev: false
+
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
 
+  /escape-goat/2.1.1:
+    resolution: {integrity: sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==}
+    engines: {node: '>=8'}
+    dev: false
+
   /escape-goat/4.0.0:
     resolution: {integrity: sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==}
     engines: {node: '>=12'}
@@ -6924,7 +7360,6 @@ packages:
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
-    dev: true
 
   /escape-string-regexp/2.0.0:
     resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
@@ -7328,6 +7763,21 @@ packages:
       - supports-color
     dev: true
 
+  /ext-list/2.2.2:
+    resolution: {integrity: sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: false
+
+  /ext-name/5.0.0:
+    resolution: {integrity: sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ext-list: 2.2.2
+      sort-keys-length: 1.0.1
+    dev: false
+
   /extend-shallow/2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
     engines: {node: '>=0.10.0'}
@@ -7684,7 +8134,6 @@ packages:
   /gensync/1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /get-caller-file/2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
@@ -7825,7 +8274,6 @@ packages:
   /globals/11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
-    dev: true
 
   /globals/13.17.0:
     resolution: {integrity: sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==}
@@ -7933,7 +8381,6 @@ packages:
   /has-flag/3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
-    dev: true
 
   /has-flag/4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
@@ -8387,6 +8834,11 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
+  /is-fullwidth-code-point/4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+    dev: true
+
   /is-function/1.0.2:
     resolution: {integrity: sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==}
     dev: true
@@ -8457,6 +8909,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /is-plain-obj/1.1.0:
+    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /is-plain-obj/4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
@@ -8752,7 +9209,6 @@ packages:
 
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: true
 
   /js-yaml/3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
@@ -8848,7 +9304,6 @@ packages:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /json-buffer/3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
@@ -8877,6 +9332,12 @@ packages:
     hasBin: true
     dev: true
 
+  /json5/2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: false
+
   /jsonc-parser/3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
 
@@ -9059,6 +9520,12 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
+  /lru-cache/5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    dependencies:
+      yallist: 3.1.1
+    dev: false
+
   /lru-cache/6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -9089,7 +9556,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true
 
   /make-dir/2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
@@ -9708,6 +10174,11 @@ packages:
       pkg-types: 1.0.1
       ufo: 1.0.1
 
+  /modify-filename/1.1.0:
+    resolution: {integrity: sha512-EickqnKq3kVVaZisYuCxhtKbZjInCuwgwZWyAmRIp1NTMhri7r3380/uqwrUHfaDiPzLVTuoNy4whX66bxPVog==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /mri/1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -9815,7 +10286,6 @@ packages:
 
   /node-releases/2.0.6:
     resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
-    dev: true
 
   /normalize-package-data/2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
@@ -10010,6 +10480,13 @@ packages:
     dependencies:
       yocto-queue: 0.1.0
 
+  /p-limit/4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      yocto-queue: 1.0.0
+    dev: true
+
   /p-locate/3.0.0:
     resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
     engines: {node: '>=6'}
@@ -10132,6 +10609,10 @@ packages:
   /pathe/1.0.0:
     resolution: {integrity: sha512-nPdMG0Pd09HuSsr7QOKUXO2Jr9eqaDiZvDwdyIhNG5SHYujkQHYKDfGQkulBxvbDHz8oHLsTgKN86LSwYzSHAg==}
 
+  /pathe/1.1.0:
+    resolution: {integrity: sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==}
+    dev: true
+
   /pathval/1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
 
@@ -10424,6 +10905,13 @@ packages:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
 
+  /pupa/2.1.1:
+    resolution: {integrity: sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==}
+    engines: {node: '>=8'}
+    dependencies:
+      escape-goat: 2.1.1
+    dev: false
+
   /pupa/3.1.0:
     resolution: {integrity: sha512-FLpr4flz5xZTSJxSeaheeMKN/EDzMdK7b8PTOC6a5PYFKTucWbdqjgqaEyH0shFiSJrVB1+Qqi4Tk19ccU6Aug==}
     engines: {node: '>=12.20'}
@@ -10907,11 +11395,10 @@ packages:
     dependencies:
       queue-microtask: 1.2.3
 
-  /rxjs/6.6.7:
-    resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
-    engines: {npm: '>=2.0.0'}
+  /rxjs/7.8.0:
+    resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==}
     dependencies:
-      tslib: 1.14.1
+      tslib: 2.4.1
     dev: true
 
   /sade/1.8.1:
@@ -11099,6 +11586,10 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  /shell-quote/1.8.0:
+    resolution: {integrity: sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ==}
+    dev: true
+
   /shelljs/0.8.5:
     resolution: {integrity: sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==}
     engines: {node: '>=4'}
@@ -11155,8 +11646,14 @@ packages:
       ansi-styles: 4.3.0
       astral-regex: 2.0.0
       is-fullwidth-code-point: 3.0.0
+
+  /slice-ansi/5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 4.0.0
     dev: true
-    optional: true
 
   /smart-buffer/4.2.0:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
@@ -11216,6 +11713,20 @@ packages:
       sander: 0.5.1
     dev: true
 
+  /sort-keys-length/1.0.1:
+    resolution: {integrity: sha512-GRbEOUqCxemTAk/b32F2xa8wDTs+Z1QHOkbhJDQTvv/6G3ZkbJ+frYWsTcc7cBB3Fu4wy4XlLCuNtJuMn7Gsvw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      sort-keys: 1.1.2
+    dev: false
+
+  /sort-keys/1.1.2:
+    resolution: {integrity: sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-plain-obj: 1.1.0
+    dev: false
+
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -11339,6 +11850,10 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /std-env/3.3.2:
+    resolution: {integrity: sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA==}
+    dev: true
+
   /store2/2.14.2:
     resolution: {integrity: sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==}
     dev: true
@@ -11460,7 +11975,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       has-flag: 3.0.0
-    dev: true
 
   /supports-color/7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
@@ -11934,6 +12448,11 @@ packages:
     resolution: {integrity: sha512-NX5KeqHOBZU6Bc0xj9Vr5Szbb1j8tUHIeD18s41aDJaPeC5QTdEhK0SpdpUrZlj2nv5cctNcSjaKNanXlfcVEQ==}
     engines: {node: '>=14.0.0'}
 
+  /tinypool/0.3.1:
+    resolution: {integrity: sha512-zLA1ZXlstbU2rlpA4CIeVaqvWq41MTWqLY3FfsAXgC8+f7Pk7zroaJQxDgxn1xNudKW6Kmj4808rPFShUlIRmQ==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
   /tinyspy/1.0.2:
     resolution: {integrity: sha512-bSGlgwLBYf7PnUsQ6WOc6SJ3pGOcd+d8AA6EUnLDDM0kWEstC1JIlSZA3UNliDXhd9ABoS7hiRBDCu+XP/sf1Q==}
     engines: {node: '>=14.0.0'}
@@ -11958,7 +12477,6 @@ packages:
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
-    dev: true
 
   /to-object-path/0.3.0:
     resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
@@ -12322,6 +12840,19 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /unused-filename/2.1.0:
+    resolution: {integrity: sha512-BMiNwJbuWmqCpAM1FqxCTD7lXF97AvfQC8Kr/DIeA6VtvhJaMDupZ82+inbjl5yVP44PcxOuCSxye1QMS0wZyg==}
+    engines: {node: '>=8'}
+    dependencies:
+      modify-filename: 1.1.0
+      path-exists: 4.0.0
+    dev: false
+
+  /upath/2.0.1:
+    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
+    engines: {node: '>=4'}
+    dev: false
+
   /update-browserslist-db/1.0.10_browserslist@4.21.4:
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
     hasBin: true
@@ -12331,7 +12862,6 @@ packages:
       browserslist: 4.21.4
       escalade: 3.1.1
       picocolors: 1.0.0
-    dev: true
 
   /update-notifier/6.0.2:
     resolution: {integrity: sha512-EDxhTEVPZZRLWYcJ4ZXjGFN0oP7qYvbXWzEgRm/Yql4dHX5wDbvh89YHP6PK1lzZJYrMtXUuZZz8XGK+U6U1og==}
@@ -12497,6 +13027,29 @@ packages:
       - supports-color
       - terser
 
+  /vite-node/0.28.3_@types+node@18.11.9:
+    resolution: {integrity: sha512-uJJAOkgVwdfCX8PUQhqLyDOpkBS5+j+FdbsXoPVPDlvVjRkb/W/mLYQPSL6J+t8R0UV8tJSe8c9VyxVQNsDSyg==}
+    engines: {node: '>=v14.16.0'}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4
+      mlly: 1.1.0
+      pathe: 1.1.0
+      picocolors: 1.0.0
+      source-map: 0.6.1
+      source-map-support: 0.5.21
+      vite: 4.0.4_@types+node@18.11.9
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /vite/3.2.4:
     resolution: {integrity: sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -12594,7 +13147,6 @@ packages:
       rollup: 3.7.5
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /vite/4.0.4_@types+node@18.11.9:
     resolution: {integrity: sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==}
@@ -12711,6 +13263,62 @@ packages:
       - supports-color
       - terser
 
+  /vitest/0.28.3_jsdom@21.0.0:
+    resolution: {integrity: sha512-N41VPNf3VGJlWQizGvl1P5MGyv3ZZA2Zvh+2V8L6tYBAAuqqDK4zExunT1Cdb6dGfZ4gr+IMrnG8d4Z6j9ctPw==}
+    engines: {node: '>=v14.16.0'}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@vitest/browser': '*'
+      '@vitest/ui': '*'
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/chai': 4.3.4
+      '@types/chai-subset': 1.3.3
+      '@types/node': 18.11.9
+      '@vitest/expect': 0.28.3
+      '@vitest/runner': 0.28.3
+      '@vitest/spy': 0.28.3
+      '@vitest/utils': 0.28.3
+      acorn: 8.8.1
+      acorn-walk: 8.2.0
+      cac: 6.7.14
+      chai: 4.3.7
+      debug: 4.3.4
+      jsdom: 21.0.0
+      local-pkg: 0.4.2
+      pathe: 1.1.0
+      picocolors: 1.0.0
+      source-map: 0.6.1
+      std-env: 3.3.2
+      strip-literal: 1.0.0
+      tinybench: 2.3.1
+      tinypool: 0.3.1
+      tinyspy: 1.0.2
+      vite: 4.0.4_@types+node@18.11.9
+      vite-node: 0.28.3_@types+node@18.11.9
+      why-is-node-running: 2.2.2
+    transitivePeerDependencies:
+      - less
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /w3c-xmlserializer/4.0.0:
     resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
     engines: {node: '>=14'}
@@ -12942,6 +13550,10 @@ packages:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
 
+  /yallist/3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+    dev: false
+
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
@@ -12953,6 +13565,7 @@ packages:
   /yargs-parser/20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
+    dev: false
 
   /yargs-parser/21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
@@ -12970,6 +13583,7 @@ packages:
       string-width: 4.2.3
       y18n: 5.0.8
       yargs-parser: 20.2.9
+    dev: false
 
   /yargs/17.6.2:
     resolution: {integrity: sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==}
@@ -12995,6 +13609,11 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  /yocto-queue/1.0.0:
+    resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
+    engines: {node: '>=12.20'}
+    dev: true
+
   /zwitch/2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true