Merge branch 'main' into preflight-module

packages/gui/.prettierrc

@@ -4,7 +4,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

packages/gui/package.json

@@ -27,8 +27,9 @@
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.19",
-		"prettier": "^2.6.2",
+		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
+		"prettier-plugin-tailwindcss": "^0.2.0",
 		"svelte": "^3.49.0",
 		"svelte-check": "^2.8.0",
 		"svelte-preprocess": "^4.10.7",

packages/gui/src-tauri/Cargo.lock

@@ -1622,6 +1622,16 @@ dependencies = [
  "vcpkg",
 ]
 
+[[package]]
+name = "os_pipe"
+version = "1.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c6a252f1f8c11e84b3ab59d7a488e48e4478a93937e027076638c49536204639"
+dependencies = [
+ "libc",
+ "windows-sys 0.42.0",
+]
+
 [[package]]
 name = "overload"
 version = "0.1.1"
@@ -2339,6 +2349,16 @@ dependencies = [
  "lazy_static",
 ]
 
+[[package]]
+name = "shared_child"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b0d94659ad3c2137fef23ae75b03d5241d633f8acded53d672decfa0e6e0caef"
+dependencies = [
+ "libc",
+ "winapi",
+]
+
 [[package]]
 name = "siphasher"
 version = "0.3.10"
@@ -2552,6 +2572,7 @@ dependencies = [
  "objc",
  "once_cell",
  "open",
+ "os_pipe",
  "percent-encoding",
  "rand 0.8.5",
  "raw-window-handle",
@@ -2561,6 +2582,7 @@ dependencies = [
  "serde_json",
  "serde_repr",
  "serialize-to-javascript",
+ "shared_child",
  "state",
  "tar",
  "tauri-macros",

packages/gui/src-tauri/Cargo.toml

@@ -17,7 +17,7 @@ tauri-build = { version = "1.2.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2.0", features = ["http-all", "shell-open", "window-all"] }
+tauri = { version = "1.2.0", features = ["fs-read-dir", "http-all", "shell-all", "window-all"] }
 uuid = "1.2.1"
 futures = "0.3"
 

packages/gui/src-tauri/src/handlers/packages.rs

@@ -1,4 +1,5 @@
 #[tauri::command]
 pub fn install_package(package: String) {
   println!("installing: {}", package);
+  
 }

packages/gui/src-tauri/tauri.conf.json

@@ -18,10 +18,26 @@
 				"scope": ["https://api.tea.xyz/v1/*", "https://github.com/*"]
 			},
 			"shell": {
-				"all": false,
+				"all": true,
-				"execute": false,
+				"execute": true,
 				"open": true,
-				"scope": [],
+				"scope": [
+					{
+						"name": "tea-install",
+						"cmd": "tea",
+						"args": [{ "validator": "\\S+" }, "true"]
+					},
+					{
+						"name": "node",
+						"cmd": "node",
+						"args": ["--version"]
+					},
+					{
+						"name": "list-packages",
+						"cmd": "ls",
+						"args": ["-R ~/.tea/tea.xyz/var/www | grep 'xz\\|gz'"]
+					}
+				],
 				"sidecar": false
 			},
 			"window": {
@@ -55,6 +71,13 @@
 				"startDragging": true,
 				"unmaximize": true,
 				"unminimize": true
+			},
+			"fs": {
+				"readDir": true,
+				"scope": [
+					"$HOME/.tea/*",
+					"$APPDATA/*"
+				]
 			}
 		},
 		"bundle": {

packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
 
-<Placeholder label="BigBlackSpace" />
+<section class="h-56 border border-gray bg-black" />

packages/gui/src/components/CliBanner/CliBanner.svelte

@@ -1,6 +1,27 @@
 <script lang="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+	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>
 
-<Placeholder label="CLI Hero" />
+<section class="mt-4 border border-gray 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="flex h-20 border-t border-gray 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>

packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte

@@ -1,7 +1,26 @@
 <script lang="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+	import { onMount } from 'svelte';
+	import type { Course } from '$libs/types';
+
+	import Gallery from '@tea/ui/Gallery/Gallery.svelte';
+	import { getFeaturedCourses } from '@api';
+
+	let courses: Course[] = [];
+
+	onMount(async () => {
+		if (!courses.length) {
+			courses = await getFeaturedCourses();
+		}
+	});
 </script>
 
-<Placeholder label="FeaturedCourses" />
+<Gallery
-<h1>test</h1>
+	title="FEATURED COURSES"
+	items={courses.map((course) => ({
+		title: course.title,
+		subTitle: course.sub_title,
+		imageUrl: course.banner_image_url,
+		link: course.link
+	}))}
+/>

packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import '$appcss';
-	import { onDestroy, onMount } from 'svelte';
+	import { onMount } from 'svelte';
-	import { watchResize } from 'svelte-watch-resize';
 	import type { Package } from '@tea/ui/types';
-	import FeaturedPackage from './FeaturedPackage.svelte';
+
+	import Gallery from '@tea/ui/Gallery/Gallery.svelte';
 	import {
 		featuredPackages as featuredPackagesStore,
 		initializeFeaturedPackages
@@ -11,78 +11,23 @@
 
 	let featuredPackages: Package[] = [];
 
-	let pkgFocus = 0;
-	let width = 0;
-	let styleFeaturedPackages: string;
-
-	function resetFeaturedStyle() {
-		const position = pkgFocus * width;
-		styleFeaturedPackages = `
-			width: ${featuredPackages.length * width}px;
-			left: -${position}px;
-			transition: left 0.6s ease-in;
-		`;
-	}
-
-	function handleContainerResize(node: HTMLElement) {
-		width = node.clientWidth;
-		resetFeaturedStyle();
-	}
-
-	let loop: NodeJS.Timer;
-
-	function resetLoop() {
-		if (loop) clearInterval(loop);
-		loop = setInterval(() => {
-			pkgFocus++;
-			if (pkgFocus === featuredPackages.length) {
-				pkgFocus = 0;
-			}
-			resetFeaturedStyle();
-		}, 3000);
-		resetFeaturedStyle();
-	}
-
 	featuredPackagesStore.subscribe((v) => {
 		featuredPackages = v;
 	});
 
-	onDestroy(() => clearInterval(loop));
 	onMount(() => {
 		if (!featuredPackages.length) {
 			initializeFeaturedPackages();
 		}
-		resetLoop();
 	});
 </script>
 
-<section class="bg-black w-full h-96" use:watchResize={handleContainerResize}>
+<Gallery
-	<!-- <Placeholder label="FeaturedPackages" /> -->
+	title="FEATURED PACKAGES"
-	<header class="bg-accent h-12 flex justify-between px-2 items-center">
+	items={featuredPackages.map((pkg) => ({
-		<p>FEATURED PACKAGES</p>
+		title: pkg.full_name,
-		<ul class="flex gap-2">
+		subTitle: pkg.maintainer || '',
-			{#each featuredPackages as pkg, i}
+		imageUrl: pkg.thumb_image_url,
-				<button
+		link: `/packages/${pkg.slug}`
-					on:click={() => {
+	}))}
-						pkgFocus = i;
+/>
-						resetLoop();
-					}}
-					class={`border-white border-2 w-4 h-4 rounded-lg bg-purple transition-colors ${
-						i === pkgFocus ? 'bg-purple-900' : ''
-					}`}
-				/>
-			{/each}
-		</ul>
-	</header>
-	<figure class="overflow-hidden absolute bottom-0 top-12 left-0 right-0">
-		<section class="flex absolute top-0 h-full" style={styleFeaturedPackages}>
-			{#each featuredPackages as pkg}
-				<div class="h-full" style={`width:${width}px`}>
-					<a href={`/packages/${pkg.slug}`}>
-						<FeaturedPackage {pkg} />
-					</a>
-				</div>
-			{/each}
-		</section>
-	</figure>
-</section>

packages/gui/src/components/GettingStarted/GettingStarted.svelte

@@ -7,8 +7,8 @@
 	};
 </script>
 
-<header class="text-primary bg-black border border-gray p-4">GETTING STARTED WITH TEA</header>
+<header class="border border-gray bg-black p-4 text-primary">GETTING STARTED WITH TEA</header>
-<section class="grid bg-black grid-cols-3">
+<section class="grid grid-cols-3 bg-black">
 	<div class="border border-gray p-4">
 		<ArticleCard
 			content={{

packages/gui/src/components/NavBar/NavBar.svelte

@@ -79,20 +79,20 @@
 		</a>
 	</nav>
 
-	<SearchInput size="small" {onSearch} />
+	<SearchInput class="border border-gray py-4" size="small" {onSearch} />
 
 	{#each routes as route}
 		<li class={route.active ? 'nav_button active' : 'nav_button'}>
 			<a href={route.path}>
-				<Button class="h-16 text-left pl-4 text-white" active={route.active}>{route.label}</Button>
+				<Button class="h-16 pl-4 text-left text-white" active={route.active}>{route.label}</Button>
 			</a>
 		</li>
 	{/each}
 	<li class="nav_button">
-		<Button class="h-16 text-left pl-4 text-white" onClick={openGithub}>VIEW ON GITHUB</Button>
+		<Button class="h-16 pl-4 text-left text-white" onClick={openGithub}>VIEW ON GITHUB</Button>
 	</li>
 
-	<footer class="border border-x-0 border-gray w-full">
+	<footer class="w-full border border-x-0 border-gray">
 		<a href="/profile">
 			<section class="flex">
 				<img width="40" height="40" src="/images/bored-ape.png" alt="profile" />

packages/gui/src/components/PackageBanner/PackageBanner.svelte

@@ -17,26 +17,26 @@
 	};
 </script>
 
-<section class="border-gray border bg-black mt-4">
+<section class="mt-4 border border-gray bg-black">
 	<header class="flex p-2">
-		<figure class="w-1/3 grow-1">
+		<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">
-			<h3 class="text-primary text-5xl">{pkg.full_name}</h3>
+			<h3 class="text-5xl text-primary">{pkg.full_name}</h3>
 			{#if pkg.maintainer}
 				<h3>* {pkg.maintainer}</h3>
 			{/if}
 			<div class="mt-4">
 				<StarRating maxRating={5} rating={packageRating} />
 			</div>
-			<p class="font-sono mt-4 text-sm">{pkg.desc}</p>
+			<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
 		</article>
 	</header>
-	<footer class="flex text-white border-gray border-t h-20">
+	<footer class="flex h-20 border-t border-gray text-white">
 		<input class="flex-grow bg-black pl-4" disabled value={copyValue} />
-		<Button class="text-sm border-0 border-l-2 w-16" onClick={onCopy}>{copyButtonText}</Button>
+		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
-		<Button class="text-sm border-0 border-l-2 w-56" onClick={() => console.log('cli')}
+		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
 			>OPEN IN TERMINAL</Button
 		>
 	</footer>

packages/gui/src/components/PackageReviews/PackageReviews.svelte

@@ -24,21 +24,21 @@
 	// ideally they should work like metro-ui to not have extreme height diff between columns
 </script>
 
-<header class="text-primary bg-black border border-gray p-4">REVIEWS ({reviews.length})</header>
+<header class="border border-gray bg-black p-4 text-primary">REVIEWS ({reviews.length})</header>
-<section class="flex flex-wrap bg-black flex-row font-machina">
+<section class="flex flex-row flex-wrap bg-black font-machina">
-	<div class="border-gray border-0 border-l-2 p-4 w-1/3">
+	<div class="w-1/3 border-0 border-l-2 border-gray p-4">
 		{#each col1 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
-	<div class="border-gray border-0 border-l-2 p-4 w-1/3">
+	<div class="w-1/3 border-0 border-l-2 border-gray p-4">
 		{#each col2 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
-	<div class="border-gray border-0 p-4 border-x-2 w-1/3">
+	<div class="w-1/3 border-0 border-x-2 border-gray p-4">
 		{#each col3 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />

packages/gui/src/components/PageHeader/PageHeader.svelte

@@ -1,3 +1,3 @@
-<header class="text-primary text-6xl font-machina uppercase mb-8">
+<header class="mb-8 font-machina text-6xl uppercase text-primary">
 	<slot />
 </header>

packages/gui/src/components/Placeholder/Placeholder.svelte

@@ -2,7 +2,7 @@
 	export let label = '';
 </script>
 
-<section class="p-8 bg-gray">
+<section class="bg-gray p-8">
 	<header>{label}</header>
 	<slot />
 </section>

packages/gui/src/components/SearchPackages/SearchPackages.svelte

@@ -3,24 +3,29 @@
 	import Fuse from 'fuse.js';
 	import { packages as packagesStore, initializePackages } from '$libs/stores';
 	import SortingButtons from './SortingButtons.svelte';
-	import type { Package } from '@tea/ui/types';
+	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 { onMount } from 'svelte';
 
-	let allPackages: Package[] = [];
+	import { installPackage } from '@api';
-	let packagesIndex: Fuse<Package>;
+
-	let packages: Package[] = [];
+	let allPackages: GUIPackage[] = [];
+	let packagesIndex: Fuse<GUIPackage>;
+	let packages: GUIPackage[] = [];
 	let initialized = false;
 
 	let sortBy = 'popularity';
 	let sortDirection: 'asc' | 'desc' = 'desc';
 
-	const searchLimit = 5;
+	const searchLimit = 10;
 
-	const setPackages = (pkgs: Package[]) => {
+	const setPackages = (pkgs: GUIPackage[], isSearch?: boolean) => {
-		console.log('pkgs sub', pkgs);
+		packages = isSearch
-		packages = pkgs.sort((a, b) => {
+			? pkgs
+			: pkgs.sort((a, b) => {
 					if (sortBy === 'popularity') {
 						const aPop = +a.dl_count + a.installs;
 						const bPop = +b.dl_count + b.installs;
@@ -37,7 +42,7 @@
 	packagesStore.subscribe((v) => {
 		allPackages = v;
 		setPackages(allPackages);
-		if (!packagesIndex) {
+		if (!packagesIndex && allPackages.length) {
 			// dont remove or this can get crazy
 			packagesIndex = new Fuse(allPackages, {
 				keys: ['name', 'full_name', 'desc']
@@ -53,15 +58,11 @@
 	});
 
 	const onSearch = (term: string) => {
-		if (term !== '' && term.length > 3) {
+		if (term !== '' && term.length > 1) {
-			const res = packagesIndex.search(term);
+			const res = packagesIndex.search(term, { limit: searchLimit });
-			const matchingPackages = [];
+			const matchingPackages: GUIPackage[] = res.map((v) => v.item);
-			for (let i = 0; i < searchLimit; i++) {
+
-				if (res[i]) {
+			setPackages(matchingPackages, true);
-					matchingPackages.push(res[i].item);
-				}
-			}
-			setPackages(matchingPackages);
 		} else {
 			setPackages(allPackages);
 		}
@@ -72,10 +73,19 @@
 		sortDirection = dir;
 		setPackages(packages);
 	};
+
+	const getCTALabel = (state: PackageStates): string => {
+		return {
+			[PackageStates.AVAILABLE]: 'INSTALL',
+			[PackageStates.INSTALLED]: 'INSTALLED',
+			[PackageStates.INSTALLING]: 'INSTALLING',
+			[PackageStates.UNINSTALLED]: 'RE-INSTALL'
+		}[state];
+	};
 </script>
 
-<div class="bg-black border border-gray">
+<div class="border border-gray bg-black">
-	<section class="flex justify-between items-center">
+	<section class="flex items-center justify-between">
 		<div>
 			<SearchInput size="medium" {onSearch} />
 		</div>
@@ -86,8 +96,31 @@
 		</div>
 	</section>
 	<ul class="grid grid-cols-3">
+		{#if packages.length > 0}
 			{#each packages as pkg}
-			<PackageCard {pkg} link={`/packages/${pkg.slug}`} />
+				<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 border-gray p-4">
+					<Preloader />
+				</section>
+			{/each}
+		{/if}
 	</ul>
 </div>

packages/gui/src/components/SearchPackages/SortingButtons.svelte

@@ -20,10 +20,10 @@
 	};
 </script>
 
-<section class="sorting-container font-machina bg-black text-white">
+<section class="sorting-container bg-black font-machina text-white">
 	<div class="dropdown">
 		<div class="dropdown-title">SORT ORDER</div>
-		<ul class="dropdown-content flex column">
+		<ul class="dropdown-content column flex">
 			{#each sortOptions as option}
 				<li class="flex items-center">
 					<button

packages/gui/src/libs/api/mock.ts

@@ -6,6 +6,8 @@
  *  * make cors work with api.tea.xyz/v1
  */
 import type { Package, Review } from '@tea/ui/types';
+import type { GUIPackage, Course } from '../types';
+import { PackageStates } from '../types';
 import { loremIpsum } from 'lorem-ipsum';
 import _ from 'lodash';
 
@@ -152,11 +154,18 @@ const packages: Package[] = [
 	}
 ];
 
-export async function getPackages(): Promise<Package[]> {
+export async function getPackages(): Promise<GUIPackage[]> {
-	return packages;
+	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);
 }
 
@@ -195,5 +204,40 @@ export async function getPackageReviews(full_name: string): Promise<Review[]> {
 		});
 	}
 
+	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;
+}

packages/gui/src/libs/api/tauri.ts

@@ -11,9 +11,14 @@
  *  - connect to a local platform api and returns a data
  */
 import { getClient } from '@tauri-apps/api/http';
+// import { invoke } from '@tauri-apps/api';
+import { Command } from '@tauri-apps/api/shell';
+import { readDir, BaseDirectory } from '@tauri-apps/api/fs';
 import { Buffer } from 'buffer';
-import type { Package, Review } from '../types';
+import type { Package, Review } from '@tea/ui/types';
+import type { GUIPackage, Course } from '../types';
 import * as mock from './mock';
+import { PackageStates } from '../types';
 
 const username = 'user';
 const password = 'password';
@@ -46,9 +51,20 @@ const join = function (...paths: string[]) {
 		.join('/');
 };
 
-export async function getPackages(): Promise<Package[]> {
+export async function getPackages(): Promise<GUIPackage[]> {
-	const packages = await get<Package[]>('packages');
+	const [packages, installedPackages] = await Promise.all([
-	return packages;
+		get<Package[]>('packages'),
+		getInstalledPackages()
+	]);
+
+	return packages.map((pkg) => {
+		const found = installedPackages.find((p) => p.full_name === pkg.full_name);
+		return {
+			...pkg,
+			state: found ? PackageStates.INSTALLED : PackageStates.AVAILABLE,
+			installed_version: found ? found.version : ''
+		};
+	});
 }
 
 export async function getFeaturedPackages(): Promise<Package[]> {
@@ -62,3 +78,67 @@ export async function getPackageReviews(full_name: string): Promise<Review[]> {
 
 	return reviews;
 }
+
+export async function installPackage(full_name: string) {
+	try {
+		await installPackageCommand(full_name);
+	} catch (error) {
+		console.error(error);
+	}
+}
+
+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();
+	});
+}
+
+async function getInstalledPackages() {
+	const entries = await readDir('.tea/tea.xyz/var/www', {
+		dir: BaseDirectory.Home,
+		recursive: false
+	});
+	const packages = entries
+		.filter((o) => o.path.match('^(.*).(g|x)z$'))
+		.map((o) => {
+			const [pkg_version] = (o?.name || '').split('+');
+			const version = pkg_version.split('-').pop();
+			const full_name = pkg_version.replace(`-${version}`, '');
+			return {
+				full_name,
+				version
+			};
+		});
+	return packages;
+}
+
+export async function getFeaturedCourses(): Promise<Course[]> {
+	const courses = await mock.getFeaturedCourses();
+	return courses;
+}

packages/gui/src/libs/stores.ts

@@ -1,13 +1,13 @@
 import { writable } from 'svelte/store';
 import type { Package, Review } from '@tea/ui/types';
-
+import type { GUIPackage } from '$libs/types';
 // TODO: figure out a better structure for managing states maybe turn them into models?
 
 import { getPackages, getFeaturedPackages, getPackageReviews } from '@api';
 
 export const backLink = writable<string>('/');
 
-export const packages = writable<Package[]>([]);
+export const packages = writable<GUIPackage[]>([]);
 
 export const featuredPackages = writable<Package[]>([]);
 
@@ -28,7 +28,7 @@ interface PackagesReview {
 }
 
 function initPackagesReviewStore() {
-	const { set, update, subscribe } = writable<PackagesReview>({});
+	const { update, subscribe } = writable<PackagesReview>({});
 
 	let packagesReviews: PackagesReview = {};
 

packages/gui/src/libs/types.ts

@@ -2,3 +2,24 @@
 // else
 // 		please use the package @tea/ui/src/types.ts
 //		things that go there are shared types/shapes like ie: Package
+
+import type { Package } 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;
+};

packages/gui/src/routes/+layout.svelte

@@ -12,13 +12,13 @@
 </script>
 
 <div id="main-layout">
-	<nav class="">
+	<nav class="border border-t-0 border-l-0 border-b-0 border-gray">
 		<NavBar />
 	</nav>
 	<section class="px-16 pt-24">
 		{#if backLink}
-			<header>
+			<header class="px-16 py-2 text-3xl text-gray hover:text-primary">
-				<a href={backLink}>back</a>
+				<a href={backLink}>&#8592</a>
 			</header>
 		{/if}
 		<figure />

packages/gui/src/routes/packages/[slug]/+page.svelte

@@ -3,30 +3,31 @@
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import { backLink } from '$libs/stores';
 	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
-	import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
+	// import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
 	backLink.set('/packages');
 
 	/** @type {import('./$types').PageData} */
 	export let data;
 
-	import { packages, featuredPackages, packagesReviewStore } from '$libs/stores';
+	import { packages, featuredPackages } from '$libs/stores';
 
-	import type { Package, Review } from '@tea/ui/types';
+	import type { Package } from '@tea/ui/types';
 
 	let pkg: Package;
 
-	let reviews: Review[];
+	// let reviews: Review[];
 
 	const setPkg = (pkgs: Package[]) => {
 		const foundPackage = pkgs.find(({ slug }) => slug === data?.slug) as Package;
 		if (!pkg && foundPackage) {
 			pkg = foundPackage;
 		}
-		if (!reviews && pkg) {
+		// TODO: uncomment when api is ready
-			packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
+		// if (!reviews && pkg) {
-				reviews = updatedReviews;
+		// 	packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
-			});
+		// 		reviews = updatedReviews;
-		}
+		// 	});
+		// }
 	};
 
 	packages.subscribe(setPkg);
@@ -38,7 +39,10 @@
 	<section>
 		<PackageBanner {pkg} />
 	</section>
+	<!-- 
+	TODO: uncomment when api is ready	
 	<section class="mt-8">
 		<PackageReviews reviews={reviews || []} />
 	</section>
+	-->
 </div>

packages/ui/.prettierrc

@@ -4,7 +4,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

packages/ui/package.json

@@ -38,8 +38,9 @@
 		"eslint-plugin-storybook": "^0.6.7",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.19",
-		"prettier": "^2.6.2",
+		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
+		"prettier-plugin-tailwindcss": "^0.2.0",
 		"storybook": "^7.0.0-alpha.51",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
@@ -51,6 +52,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@tailwindcss/line-clamp": "^0.4.2"
+		"@tailwindcss/line-clamp": "^0.4.2",
+		"svelte-watch-resize": "^1.0.3"
 	}
 }

packages/ui/src/ArticleCard/ArticleCard.svelte

@@ -14,20 +14,20 @@
 </script>
 
 <section class="border border-gray">
-	<header class="bg-accent text-white p-2 uppercase">{content.title}</header>
+	<header class="bg-accent p-2 uppercase text-white">{content.title}</header>
 	<figure class="h-24">
-		<img class="object-cover h-24 w-full" src={content.img_url} alt={content.title} />
+		<img class="h-24 w-full object-cover" src={content.img_url} alt={content.title} />
 	</figure>
 	<article class="p-4">
-		<p class="text-xs font-sono line-clamp-3">{content.copy}</p>
+		<p class="font-sono text-xs line-clamp-3">{content.copy}</p>
 		{#if content.link}
 			<a href={content.link || '#'}>
-				<button class="text-primary mt-2">{content.cta_label}</button>
+				<button class="mt-2 text-primary">{content.cta_label}</button>
 			</a>
 		{:else if onClick}
-			<button on:click={onClick} class="text-primary mt-2">{content.cta_label}</button>
+			<button on:click={onClick} class="mt-2 text-primary">{content.cta_label}</button>
 		{:else}
-			<button disabled class="text-gray mt-2">{content.cta_label}</button>
+			<button disabled class="mt-2 text-gray">{content.cta_label}</button>
 		{/if}
 	</article>
 </section>

packages/ui/src/Button/Button.svelte

@@ -10,7 +10,7 @@
 
 <button
 	type="button font-sans"
-	class={`p-2 font-machina text-gray w-full ${clazz} ${active ? 'active' : ''}`}
+	class={`w-full p-2 font-machina text-gray ${clazz} ${active ? 'active' : ''}`}
 	on:click={() => onClick && onClick()}
 >
 	<slot />

packages/ui/src/Gallery/Gallery.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import '$appcss';
+	import { onDestroy, onMount } from 'svelte';
+	import { watchResize } from 'svelte-watch-resize';
+	import Preloader from '../Preloader/Preloader.svelte';
+	import GalleryItem from './GalleryItem.svelte';
+
+	export let title = '';
+
+	interface GalleryItemShape {
+		imageUrl: string;
+		title: string;
+		subTitle: string;
+		link: string;
+	}
+
+	export let items: GalleryItemShape[] = [];
+
+	let focus = 0;
+	let width = 0;
+	let styleFeaturedPackages: string;
+
+	function resetFeaturedStyle() {
+		const position = focus * width;
+		styleFeaturedPackages = `
+			width: ${items.length * width}px;
+			left: -${position}px;
+			transition: left 0.6s ease-in;
+		`;
+	}
+
+	function handleContainerResize(node: HTMLElement) {
+		width = node.clientWidth;
+		resetFeaturedStyle();
+	}
+
+	let loop: NodeJS.Timer;
+
+	function resetLoop() {
+		if (loop) clearInterval(loop);
+		loop = setInterval(() => {
+			focus++;
+			if (focus === items.length) {
+				focus = 0;
+			}
+			resetFeaturedStyle();
+		}, 3000);
+		resetFeaturedStyle();
+	}
+
+	onDestroy(() => clearInterval(loop));
+	onMount(() => {
+		resetLoop();
+	});
+</script>
+
+<section class="h-96 w-full bg-black" use:watchResize={handleContainerResize}>
+	<!-- <Placeholder label="FeaturedPackages" /> -->
+	<header class="flex h-12 items-center justify-between bg-accent px-2">
+		<p>{title}</p>
+		<ul class="flex gap-2">
+			{#each items as _item, i}
+				<button
+					on:click={() => {
+						focus = i;
+						resetLoop();
+					}}
+					class={`bg-purple h-4 w-4 rounded-lg border-2 border-white transition-colors ${
+						i === focus ? 'bg-purple-900' : ''
+					}`}
+				/>
+			{/each}
+		</ul>
+	</header>
+	<figure class="absolute bottom-0 top-12 left-0 right-0 overflow-hidden">
+		{#if items.length}
+			<section class="absolute top-0 flex h-full" style={styleFeaturedPackages}>
+				{#each items as item}
+					<div class="h-full" style={`width:${width}px`}>
+						<a href={item.link}>
+							<GalleryItem {...item} {width} />
+						</a>
+					</div>
+				{/each}
+			</section>
+		{:else}
+			<Preloader />
+		{/if}
+	</figure>
+</section>

packages/ui/src/Gallery/GalleryItem.svelte

@@ -1,29 +1,35 @@
 <script lang="ts">
 	import '$appcss';
-	import type { Package } from '@tea/ui/types';
+	import ImgLoader from '../ImgLoader/ImgLoader.svelte';
-	export let pkg: Package;
+
+	export let width = 0;
+	export let imageUrl = '';
+	export let title = '';
+	export let subTitle = '';
 </script>
 
-<figure class="w-full h-full relative">
+<figure class="gallery-item relative h-full w-full" style={`width:${width}px`}>
-	<img
+	<ImgLoader
-		src={!pkg.thumb_image_url.includes('https://tea.xyz')
+		class="featured-img"
+		src={!imageUrl.includes('https://tea.xyz')
 			? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
-			: pkg.thumb_image_url}
+			: imageUrl}
-		alt={pkg.name}
+		alt={title}
 	/>
+
 	<article class="card-thumb-label">
 		<i class="icon-tea-logo-iconasset-1">
 			<!-- TODO: replace with icon.svg -->
 		</i>
-		<h3 class="text-3xl">{pkg.name}</h3>
+		<h3 class="text-3xl">{title}</h3>
-		{#if pkg.maintainer}
+		{#if subTitle}
-			<h4 class="text-lg mt-2">&#x2022;&nbsp;{pkg.maintainer}</h4>
+			<h4 class="mt-2 text-lg">&#x2022;&nbsp;{subTitle}</h4>
 		{/if}
 	</article>
 </figure>
 
 <style>
-	img {
+	.gallery-item :global(.featured-img) {
 		box-shadow: 0px 0px 12px #0c0c0c !important;
 		width: 100%;
 		height: 100%;

packages/ui/src/ImgLoader/ImgLoader.stories.ts

@@ -0,0 +1,28 @@
+import ImgLoader from './ImgLoader.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+
+interface Props {
+	alt: string;
+	src: string;
+	class: string;
+}
+export default {
+	title: 'Example/ImgLoader',
+	component: ImgLoader,
+	tags: ['docsPage'],
+	render: (props: Props) => ({
+		Component: ImgLoader,
+		props
+	}),
+	argTypes: {}
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Example = {
+	args: {
+		class: 'w-1/2',
+		alt: 'sample',
+		src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/%22_Shot_From_The_Sky%22_Army_Show_1945_Oak_Ridge_%2824971013612%29.jpg/2732px-%22_Shot_From_The_Sky%22_Army_Show_1945_Oak_Ridge_%2824971013612%29.jpg'
+	}
+};

packages/ui/src/ImgLoader/ImgLoader.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import '../app.css';
+	import Preloader from '../Preloader/Preloader.svelte';
+	export let src: string;
+	export let alt = 'loading';
+	export let style = '';
+
+	let clazz = '';
+	export { clazz as class };
+
+	function preloadImage() {
+		return new Promise(function (resolve) {
+			let img = new Image();
+			img.onload = resolve;
+			img.src = src;
+		});
+	}
+</script>
+
+{#await preloadImage()}
+	<Preloader />
+{:then _}
+	<img {style} class={clazz} {src} {alt} />
+{/await}

packages/ui/src/PackageCard/PackageCard.svelte

@@ -1,13 +1,22 @@
 <script type="ts">
 	import '../app.css';
 	import type { Package } from '../types';
+	import ImgLoader from '../ImgLoader/ImgLoader.svelte';
+
 	export let pkg: Package;
 	export let link: string;
+	export let ctaLabel: string;
+
+	export let onClickCTA = () => {
+		console.log('do nothing');
+	};
 </script>
 
-<section class="p-4 border border-gray">
+<section class="package-card border border-gray p-4">
+	<a href={link}>
 		<figure>
-		<img
+			<ImgLoader
+				class="pkg-image"
 				src={!pkg.thumb_image_url.includes('https://tea.xyz')
 					? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
 					: pkg.thumb_image_url}
@@ -23,7 +32,8 @@
 				{/if}
 			</article>
 		</figure>
-	<footer class="flex mt-4 justify-between items-center">
+	</a>
+	<footer class="mt-4 flex items-center justify-between">
 		<div>
 			<p>
 				<span class="text-xs">V&NonBreakingSpace;{pkg.version}</span>
@@ -33,10 +43,7 @@
         <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
 			</p>
 		</div>
-		<!-- TODO: move this button into its own reusable component -->
+		<button class="p-2 font-machina" on:click={onClickCTA}>{ctaLabel}</button>
-		<a href={link}>
-			<button class="detail-btn"><i class="icon-enter-arrow" />details</button>
-		</a>
 	</footer>
 </section>
 
@@ -49,9 +56,10 @@
 
 	figure {
 		position: relative;
+		min-height: 150px;
 	}
 
-	img {
+	.package-card :global(.pkg-image) {
 		box-shadow: 0px 0px 12px #0c0c0c !important;
 		width: 100%;
 		height: 100%;
@@ -88,40 +96,18 @@
 		padding: 0px;
 	}
 
-	.detail-btn {
+	button {
-		position: relative;
-		float: right;
-		right: 0;
-		display: inline-block;
-		font-family: 'pp-neue-machina', sans-serif;
 		background-color: #1a1a1a;
 		border: 0.5px solid #ffffff;
 		color: #fff;
-		padding-top: 0.279vw;
 		text-decoration: none;
 		text-transform: uppercase;
-		width: 120px;
+		min-width: 120px;
-		height: 2.232vw;
-		min-height: 34px;
 		transition: 0.1s linear;
 	}
 
-	.detail-btn:hover {
+	button:hover {
 		background-color: #8000ff;
 		box-shadow: inset 0vw 0vw 0vw 0.223vw #1a1a1a !important;
 	}
-
-	/* Icon Styling */
-
-	.detail-btn .icon-enter-arrow {
-		display: inline-block;
-		position: relative;
-		margin-right: 0.558vw;
-		transition: 0.2s ease-in-out;
-	}
-
-	.detail-btn:hover .icon-enter-arrow {
-		display: inline-block;
-		transform: rotate(-45deg) !important;
-	}
 </style>

packages/ui/src/Preloader/Preloader.stories.ts

@@ -0,0 +1,14 @@
+import Preloader from './Preloader.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+export default {
+	title: 'Example/Preloader',
+	component: Preloader,
+	tags: ['docsPage'],
+	render: () => ({
+		Component: Preloader
+	})
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Example = {};

packages/ui/src/Preloader/Preloader.svelte

@@ -0,0 +1,9 @@
+<script type="ts">
+	import '../app.css';
+	// TODO: add types of preloader here
+	// export let type: EnumPreload = 'logo-pulse';
+</script>
+
+<figure class="flex h-full w-full items-center justify-center bg-black bg-opacity-90 py-8">
+	<i class="icon-tea-logo-iconasset-1 animate-pulse text-4xl text-gray" />
+</figure>

packages/ui/src/ReviewCard/ReviewCard.svelte

@@ -26,10 +26,10 @@
 </script>
 
 <section class="border border-gray p-4">
-	<header class=" text-primary text-lg">{review.title}</header>
+	<header class=" text-lg text-primary">{review.title}</header>
-	<div class="flex mt-2 text-xs">
+	<div class="mt-2 flex text-xs">
 		<i class={`${getStarType()} text-primary`} />
-		<span class="text-gray pl-2">{getStarLabel()}</span>
+		<span class="pl-2 text-gray">{getStarLabel()}</span>
 	</div>
 	<p class="mt-2 text-sm">{review.comment}</p>
 </section>

packages/ui/src/SearchInput/SearchInput.svelte

@@ -1,6 +1,8 @@
 <script type="ts">
 	import '../app.css';
 
+	let clazz = '';
+	export { clazz as class };
 	export let size: 'small' | 'medium' | 'large' = 'small';
 	export let onSearch: (text: string) => void;
 
@@ -14,7 +16,7 @@
 	};
 </script>
 
-<section class={`flex py-2 items-center ${size}`}>
+<section class={`flex items-center py-2 ${size} ${clazz}`}>
 	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>

pnpm-lock.yaml

@@ -25,8 +25,9 @@ importers:
       lodash: ^4.17.21
       lorem-ipsum: ^2.0.8
       postcss: ^8.4.19
-      prettier: ^2.6.2
+      prettier: ^2.7.1
       prettier-plugin-svelte: ^2.7.0
+      prettier-plugin-tailwindcss: ^0.2.0
       svelte: ^3.49.0
       svelte-check: ^2.8.0
       svelte-preprocess: ^4.10.7
@@ -59,6 +60,7 @@ importers:
       postcss: 8.4.19
       prettier: 2.7.1
       prettier-plugin-svelte: 2.8.0_nryolsexf6k3znhuh4uzpugsem
+      prettier-plugin-tailwindcss: 0.2.0_prettier@2.7.1
       svelte: 3.53.1
       svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
       svelte-preprocess: 4.10.7_mvbmsfnr3ibpjsbee6imjcb33m
@@ -89,18 +91,21 @@ importers:
       eslint-plugin-storybook: ^0.6.7
       eslint-plugin-svelte3: ^4.0.0
       postcss: ^8.4.19
-      prettier: ^2.6.2
+      prettier: ^2.7.1
       prettier-plugin-svelte: ^2.7.0
+      prettier-plugin-tailwindcss: ^0.2.0
       storybook: ^7.0.0-alpha.51
       svelte: ^3.44.0
       svelte-check: ^2.7.1
       svelte-preprocess: ^4.10.7
+      svelte-watch-resize: ^1.0.3
       tailwindcss: ^3.2.4
       tslib: ^2.3.1
       typescript: ^4.7.4
       vite: ^3.1.0
     dependencies:
       '@tailwindcss/line-clamp': 0.4.2_tailwindcss@3.2.4
+      svelte-watch-resize: 1.0.3
     devDependencies:
       '@playwright/test': 1.25.0
       '@storybook/addon-essentials': 7.0.0-alpha.51_typescript@4.9.3
@@ -110,7 +115,7 @@ importers:
       '@storybook/svelte-vite': 7.0.0-alpha.51_typescript@4.9.3
       '@storybook/testing-library': 0.0.13
       '@sveltejs/adapter-auto': 1.0.0-next.90
-      '@sveltejs/kit': 1.0.0-next.570_svelte@3.53.1+vite@3.2.4
+      '@sveltejs/kit': 1.0.0-next.572_svelte@3.53.1+vite@3.2.4
       '@sveltejs/package': 1.0.0-next.1_7dvewpees4iyn2tkw2qzal77a4
       '@typescript-eslint/eslint-plugin': 5.43.0_wze2rj5tow7zwqpgbdx2buoy3m
       '@typescript-eslint/parser': 5.43.0_e3uo4sehh4zr4i6m57mkkxxv7y
@@ -122,6 +127,7 @@ importers:
       postcss: 8.4.19
       prettier: 2.7.1
       prettier-plugin-svelte: 2.8.0_nryolsexf6k3znhuh4uzpugsem
+      prettier-plugin-tailwindcss: 0.2.0_prettier@2.7.1
       storybook: 7.0.0-alpha.51_typescript@4.9.3
       svelte: 3.53.1
       svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
@@ -1943,7 +1949,7 @@ packages:
       '@storybook/components': 7.0.0-alpha.51
       '@storybook/csf-plugin': 7.0.0-alpha.51
       '@storybook/csf-tools': 7.0.0-alpha.51
-      '@storybook/mdx2-csf': 0.1.0-next.6
+      '@storybook/mdx2-csf': 0.1.0-next.7
       '@storybook/node-logger': 7.0.0-alpha.51
       '@storybook/postinstall': 7.0.0-alpha.51
       '@storybook/preview-web': 7.0.0-alpha.51
@@ -2357,7 +2363,7 @@ packages:
       '@storybook/client-api': 7.0.0-alpha.51
       '@storybook/client-logger': 7.0.0-alpha.51
       '@storybook/core-common': 7.0.0-alpha.51_typescript@4.9.3
-      '@storybook/mdx2-csf': 0.1.0-next.6
+      '@storybook/mdx2-csf': 0.1.0-next.7
       '@storybook/node-logger': 7.0.0-alpha.51
       '@storybook/preview-web': 7.0.0-alpha.51
       '@storybook/source-loader': 7.0.0-alpha.51
@@ -2886,8 +2892,8 @@ packages:
     resolution: {integrity: sha512-SgjcpweoAWnKvbZ1uINCGcSU1BtNJP2xR0x9obNw+qp6pi0OsOo1iA1DTgB0gJM0vc3BgrKgCMlJ76v/wlRB+Q==}
     dev: true
 
-  /@storybook/mdx2-csf/0.1.0-next.6:
+  /@storybook/mdx2-csf/0.1.0-next.7:
-    resolution: {integrity: sha512-FDBPTDHG9BcI27Zp5kwkqjsv2A3s8aUahtKeHOsmTicOBS8uWqUZ3jmL7vg6N7SpiUUBAft9/vTQfttNLeHO7w==}
+    resolution: {integrity: sha512-ahwV2A4aS/D79WWum8fmrFhhbC28/f4XlEKtNG1s0EkCVwCSU17bthEBRY5/Y3IBR5jfeN/oApizNQMLh7mqAA==}
     dependencies:
       loader-utils: 2.0.4
     dev: true
@@ -3238,6 +3244,34 @@ packages:
       - supports-color
     dev: true
 
+  /@sveltejs/kit/1.0.0-next.572_svelte@3.53.1+vite@3.2.4:
+    resolution: {integrity: sha512-PiKEr55L/uJyMKvDPdyoa5MlAYQwdgs8HLMbr28YcCBmhw/v6V7gutKOKdqeXc3YwKEFVS3z7TvW6c7eDokJdQ==}
+    engines: {node: '>=16.14'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      svelte: ^3.44.0
+      vite: ^3.2.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 1.3.1_svelte@3.53.1+vite@3.2.4
+      '@types/cookie': 0.5.1
+      cookie: 0.5.0
+      devalue: 4.2.0
+      kleur: 4.1.5
+      magic-string: 0.27.0
+      mime: 3.0.0
+      sade: 1.8.1
+      set-cookie-parser: 2.5.1
+      sirv: 2.0.2
+      svelte: 3.53.1
+      tiny-glob: 0.2.9
+      undici: 5.13.0
+      vite: 3.2.4
+    transitivePeerDependencies:
+      - diff-match-patch
+      - supports-color
+    dev: true
+
   /@sveltejs/package/1.0.0-next.1_7dvewpees4iyn2tkw2qzal77a4:
     resolution: {integrity: sha512-U8XBk6Cfy8MjKG41Uyo+fqBpdhu7xUSnhiCNoODRaAtWV02RZoLh+McXrsxEvqi/ycgymctlhJhssqDnD+E+FA==}
     engines: {node: '>=16.9'}
@@ -7378,6 +7412,13 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
+  /magic-string/0.27.0:
+    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
   /make-dir/2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
     engines: {node: '>=6'}
@@ -8496,6 +8537,15 @@ packages:
       svelte: 3.53.1
     dev: true
 
+  /prettier-plugin-tailwindcss/0.2.0_prettier@2.7.1:
+    resolution: {integrity: sha512-Ruqig/mdWCSpqdq9WK44nrmqM4BFWTzBPhPGwC5NK3coV9eZntEQPB84MGZbjAg0XQU02jVRHXNRPREBzxvM+A==}
+    engines: {node: '>=12.17.0'}
+    peerDependencies:
+      prettier: '>=2.2.0'
+    dependencies:
+      prettier: 2.7.1
+    dev: true
+
   /prettier/2.7.1:
     resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
     engines: {node: '>=10.13.0'}