populate workbench

ui/packages/app/postcss.config.js

@@ -1,8 +1,8 @@
 module.exports = {
 	extract: "themes.css",
 	plugins: [
+		require("tailwindcss/nesting"),
 		require("tailwindcss"),
-		require("postcss-nested"),
 		require("autoprefixer")
 	]
 };

ui/packages/app/vite.config.js

@@ -4,7 +4,7 @@ import sveltePreprocess from "svelte-preprocess";
 
 // this is dupe config, gonna try fix this
 import tailwind from "tailwindcss";
-import nested from "postcss-nested";
+import nested from "tailwindcss/nesting";
 import autoprefix from "autoprefixer";
 
 export default defineConfig(({ mode }) => {

ui/packages/audio/package.json

@@ -1,10 +1,13 @@
 {
-	"name": "~name~",
+	"name": "@gradio/audio",
 	"version": "0.0.1",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"main": "src/index.ts",
 	"author": "",
 	"license": "ISC",
-	"private": true
+	"private": true,
+	"dependencies": {
+		"@gradio/upload": "workspace:^0.0.1"
+	}
 }

ui/packages/audio/src/Audio.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import type { Value } from "./types";
+
+	import { onDestroy, createEventDispatcher } from "svelte";
+	import { Upload, ModifyUpload } from "@gradio/upload";
+	//@ts-ignore
+	import Range from "svelte-range-slider-pips";
+	import { _ } from "svelte-i18n";
+
+	// export let value: null | Value;
+	export let src: null | string;
+	export let setValue: (val: typeof value) => typeof value;
+	export let theme: string;
+	export let name: string;
+	export let source: "microphone" | "upload";
+
+	let recording = false;
+	let recorder: MediaRecorder;
+	let mode = "";
+	let audio_chunks: Array<Blob> = [];
+	let audio_blob;
+	let player;
+	let inited = false;
+	let crop_values = [0, 100];
+
+	const dispatch = createEventDispatcher();
+
+	function blob_to_data_url(blob: Blob): Promise<string> {
+		return new Promise((fulfill, reject) => {
+			let reader = new FileReader();
+			reader.onerror = reject;
+			reader.onload = (e) => fulfill(reader.result as string);
+			reader.readAsDataURL(blob);
+		});
+	}
+
+	async function prepare_audio() {
+		const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+		recorder = new MediaRecorder(stream);
+
+		recorder.addEventListener("dataavailable", (event) => {
+			audio_chunks.push(event.data);
+		});
+
+		recorder.addEventListener("stop", async () => {
+			recording = false;
+			audio_blob = new Blob(audio_chunks, { type: "audio/wav" });
+
+			dispatch("change", {
+				data: await blob_to_data_url(audio_blob),
+				name
+			});
+		});
+	}
+
+	async function record() {
+		recording = true;
+		audio_chunks = [];
+
+		if (!inited) await prepare_audio();
+
+		recorder.start();
+	}
+
+	onDestroy(() => {
+		if (recorder) {
+			recorder.stop();
+		}
+	});
+
+	const stop = () => {
+		recorder.stop();
+	};
+
+	function clear() {
+		dispatch("change", { data: null, name: null });
+		mode = "";
+		src = "";
+	}
+
+	function loaded(node: HTMLAudioElement) {
+		function clamp_playback() {
+			const start_time = (crop_values[0] / 100) * node.duration;
+			const end_time = (crop_values[1] / 100) * node.duration;
+			if (node.currentTime < start_time) {
+				node.currentTime = start_time;
+			}
+
+			if (node.currentTime > end_time) {
+				node.currentTime = start_time;
+				node.pause();
+			}
+		}
+
+		node.addEventListener("timeupdate", clamp_playback);
+
+		return {
+			destroy: () => node.removeEventListener("timeupdate", clamp_playback)
+		};
+	}
+
+	function handle_change({
+		detail: { values }
+	}: {
+		detail: { values: [number, number] };
+	}) {
+		if (!value?.data) return;
+
+		dispatch("change", {
+			data: src,
+			name,
+			crop_min: values[0],
+			crop_max: values[1]
+		});
+	}
+</script>
+
+<div class="input-audio">
+	{#if src === null}
+		{#if source === "microphone"}
+			{#if recording}
+				<button
+					class="p-2 rounded font-semibold bg-red-200 text-red-500 dark:bg-red-600 dark:text-red-100 shadow transition hover:shadow-md"
+					on:click={stop}
+				>
+					Stop Recording
+				</button>
+			{:else}
+				<button
+					class="p-2 rounded font-semibold shadow transition hover:shadow-md bg-white dark:bg-gray-800"
+					on:click={record}
+				>
+					Record
+				</button>
+			{/if}
+		{:else if source === "upload"}
+			<Upload
+				filetype="audio/*"
+				on:load={({ detail }) => (
+					(src = detail), dispatch("change", { data: detail })
+				)}
+				{theme}
+			>
+				{$_("interface.drop_audio")}
+				<br />- {$_("interface.or")} -<br />
+				{$_("interface.click_to_upload")}
+			</Upload>
+		{/if}
+	{:else}
+		<ModifyUpload
+			on:clear={clear}
+			on:edit={() => (mode = "edit")}
+			absolute={false}
+			{theme}
+		/>
+
+		<audio
+			use:loaded
+			class="w-full"
+			controls
+			bind:this={player}
+			preload="metadata"
+			{src}
+		/>
+
+		{#if mode === "edit" && player?.duration}
+			<Range
+				bind:values={crop_values}
+				range
+				min={0}
+				max={100}
+				step={1}
+				on:change={handle_change}
+			/>
+		{/if}
+	{/if}
+</div>
+
+<style lang="postcss">
+</style>

ui/packages/audio/src/types.ts

@@ -0,0 +1,6 @@
+export interface Value {
+	data: string;
+	name: string;
+	crop_min?: number;
+	crop_max?: number;
+}

ui/packages/upload/package.json

@@ -0,0 +1,10 @@
+{
+	"name": "@gradio/upload",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true
+}

ui/packages/upload/src/ModifyUpload.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import edit from "./edit.svg";
+	import clear from "./clear.svg";
+
+	import { createEventDispatcher } from "svelte";
+
+	export let editable: boolean = false;
+	export let theme: string;
+	export let absolute = true;
+
+	const dispatch =
+		createEventDispatcher<{ edit: undefined; clear: undefined }>();
+</script>
+
+<div
+	class="modify-upload z-10 top-0 right-0 flex justify-end"
+	class:absolute
+	{theme}
+>
+	{#if editable}
+		<button
+			class="edit bg-opacity-30 hover:bg-opacity-100 transition p-1"
+			on:click={() => dispatch("edit")}
+		>
+			<img class="h-4 filter dark:invert" src={edit} alt="Edit" />
+		</button>
+	{/if}
+	<button
+		class="clear bg-opacity-30 hover:bg-opacity-100 transition p-1"
+		on:click={() => dispatch("clear")}
+	>
+		<img class="h-4 filter dark:invert" src={clear} alt="Clear" />
+	</button>
+</div>
+
+<style lang="postcss" global>
+	.modify-upload[theme="default"] {
+		@apply m-1 flex gap-1;
+		.edit {
+			@apply bg-amber-500 dark:bg-red-600 rounded shadow;
+		}
+		.clear {
+			@apply bg-gray-50 dark:bg-gray-500 rounded shadow;
+		}
+	}
+</style>

ui/packages/upload/src/Upload.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	interface FileData {
+		name: string;
+		size: number;
+		data: string;
+		is_example: false;
+	}
+
+	// export let load: (
+	// 	val: Array<string | FileData> | string | FileData | null
+	// ) => Array<string | FileData> | string | FileData | null;
+	export let filetype: string | undefined = undefined;
+	export let theme: string;
+	export let single_file: boolean = true;
+	export let include_file_metadata = true;
+	let hidden_upload: HTMLInputElement;
+	let dragging = false;
+
+	const dispatch = createEventDispatcher();
+
+	const updateDragging = () => {
+		dragging = !dragging;
+	};
+
+	const openFileUpload = () => {
+		hidden_upload.click();
+	};
+
+	const loadFiles = (files: FileList) => {
+		let _files: Array<File> = Array.from(files);
+		if (!files.length || !window.FileReader) {
+			return;
+		}
+		if (single_file) {
+			_files = [files[0]];
+		}
+		var all_file_data: Array<FileData | string> = [];
+		_files.forEach((f, i) => {
+			let ReaderObj = new FileReader();
+			ReaderObj.readAsDataURL(f);
+			ReaderObj.onloadend = function () {
+				all_file_data[i] = include_file_metadata
+					? {
+							name: f.name,
+							size: f.size,
+							data: this.result as string,
+							is_example: false
+					  }
+					: (this.result as string);
+				if (all_file_data.length === files.length) {
+					dispatch("load", single_file ? all_file_data[0] : all_file_data);
+				}
+			};
+		});
+	};
+
+	const loadFilesFromUpload = (e: Event) => {
+		const target = e.target as HTMLInputElement;
+
+		if (!target.files) return;
+		loadFiles(target.files);
+	};
+
+	const loadFilesFromDrop = (e: DragEvent) => {
+		if (!e.dataTransfer?.files) return;
+		loadFiles(e.dataTransfer.files);
+	};
+</script>
+
+<div
+	class={dragging
+		? "upload h-60 border-green-300 text-green-400 dark:text-green-500 dark:border-green-500 border-8 border-dashed w-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10"
+		: "upload h-60 border-gray-300 text-gray-400 dark:text-gray-500 dark:border-gray-500 border-8 border-dashed w-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10"}
+	{theme}
+	on:drag|preventDefault|stopPropagation
+	on:dragstart|preventDefault|stopPropagation
+	on:dragend|preventDefault|stopPropagation
+	on:dragover|preventDefault|stopPropagation
+	on:dragenter|preventDefault|stopPropagation
+	on:dragleave|preventDefault|stopPropagation
+	on:drop|preventDefault|stopPropagation
+	on:click={openFileUpload}
+	on:drop={loadFilesFromDrop}
+	on:dragenter={updateDragging}
+	on:dragleave={updateDragging}
+>
+	<slot />
+	<input
+		class="hidden-upload hidden"
+		type="file"
+		bind:this={hidden_upload}
+		on:change={loadFilesFromUpload}
+		accept={filetype}
+	/>
+</div>
+
+<style lang="postcss" global>
+	.upload[theme="default"] {
+		@apply transition hover:border-gray-400 hover:text-gray-500 dark:hover:border-gray-300 dark:hover:text-gray-300;
+	}
+</style>

ui/packages/upload/src/clear.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.9403949mm"
+   height="5.9403949mm"
+   viewBox="0 0 5.9403949 5.9403949"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="clear.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="10.925474"
+     inkscape:cx="4.1188143"
+     inkscape:cy="15.559965"
+     inkscape:window-width="1248"
+     inkscape:window-height="770"
+     inkscape:window-x="-6"
+     inkscape:window-y="-6"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-115.10942,-119.22353)">
+    <g
+       id="g239"
+       transform="matrix(0.05138986,0.05138986,-0.05138986,0.05138986,117.0869,112.75317)">
+      <rect
+         style="fill:#000000;stroke-width:0.295287"
+         id="rect31"
+         width="20"
+         height="80"
+         x="-111.51107"
+         y="42.193726"
+         rx="2.9434128"
+         ry="2.6448057"
+         transform="scale(-1,1)" />
+      <rect
+         style="fill:#000000;stroke-width:0.295287"
+         id="rect31-3"
+         width="20"
+         height="80"
+         x="-92.193726"
+         y="-141.51106"
+         rx="2.9434128"
+         ry="2.6448057"
+         transform="matrix(0,-1,-1,0,0,0)" />
+    </g>
+  </g>
+</svg>

ui/packages/upload/src/edit.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   fill="#000000"
+   viewBox="0 0 24 24"
+   width="24px"
+   height="24px"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="edit.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="11.291667"
+     inkscape:cx="10.538745"
+     inkscape:cy="16.383764"
+     inkscape:window-width="1248"
+     inkscape:window-height="770"
+     inkscape:window-x="-6"
+     inkscape:window-y="-6"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="m 19.701578,1.2915129 c -0.814834,0 -1.629669,0.307743 -2.251701,0.9246243 l -1.319356,1.3084307 4.503402,4.46611 1.319356,-1.3084308 c 1.242939,-1.2326462 1.242939,-3.232347 0,-4.4661099 C 21.331247,1.5992559 20.516413,1.2915129 19.701578,1.2915129 Z M 14.441745,5.1993591 1.494465,18.039425 v 4.46611 H 5.997867 L 18.945148,9.665469 Z"
+     id="path2"
+     style="stroke-width:1.12118" />
+</svg>

ui/packages/upload/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Upload } from "./Upload.svelte";
+export { default as ModifyUpload } from "./ModifyUpload.svelte";

ui/packages/workbench/package.json

@@ -11,15 +11,18 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
+		"autoprefixer": "^10.4.2",
+		"postcss": "^8.4.5",
+		"postcss-load-config": "^3.1.1",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.2.6",
 		"svelte-preprocess": "^4.10.1",
+		"tailwindcss": "^3.0.12",
 		"tslib": "^2.3.1",
-		"typescript": "~4.5.4",
+		"typescript": "~4.5.4"
-		"postcss": "^8.4.5",
-		"postcss-load-config": "^3.1.1",
-		"autoprefixer": "^10.4.2",
-		"tailwindcss": "^3.0.12"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@gradio/audio": "workspace:^0.0.1"
+	}
 }

ui/packages/workbench/postcss.config.cjs

@@ -1,8 +1,10 @@
 const tailwindcss = require("tailwindcss");
 const autoprefixer = require("autoprefixer");
+const nested = require("tailwindcss/nesting");
 
 const config = {
 	plugins: [
+		nested,
 		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
 		tailwindcss(),
 		//But others, like autoprefixer, need to run after,

ui/packages/workbench/src/routes/_Nav.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { page } from "$app/stores";
+	const comp_routes = [
+		"Audio",
+		"Button",
+		"DataFrame",
+		"Carousel",
+		"Chatbot",
+		"Chart",
+		"Forms",
+		"File",
+		"HighlightedText",
+		"Html",
+		"Image",
+		"JSON",
+		"Label",
+		"Markdown",
+		"Tooltip",
+		"Upload",
+		"Video"
+	].map((n) => [n, n.toLowerCase()]);
+
+	$: console.log($page.url);
+</script>
+
+<nav class="inline-block">
+	<ul class="flex flex-col px-6 ">
+		{#each comp_routes as [name, route]}
+			{@const is_current = $page.url.pathname === `/${route}`}
+			<a
+				class="font-mono text-md hover:text-orange-500 {is_current
+					? 'text-orange-500'
+					: ''} "
+				href="/{route}">{name}</a
+			>
+		{/each}
+	</ul>
+</nav>

ui/packages/workbench/src/routes/__layout.svelte

@@ -1,5 +1,8 @@
 <script>
 	import "../app.css";
+	import Nav from "./_Nav.svelte";
 </script>
 
+<h1 class="font-mono p-4 text-lg text-right">workbench</h1>
+<Nav />
 <slot />

ui/packages/workbench/src/routes/audio.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { Audio } from "@gradio/audio";
+	import audio from "../assets/cantina.wav";
+</script>
+
+<Audio src={null} source="upload" />

ui/packages/workbench/src/routes/index.svelte

@@ -1 +0,0 @@
-<h1 class="font-mono">workbench</h1>

ui/packages/workbench/svelte.config.js

@@ -11,7 +11,7 @@ const config = {
 	// for more information about preprocessors
 	preprocess: [
 		svelte_preprocess({
-			postcss: true
+			postcss: { plugins: [tailwind, nested, autoprefix] }
 		})
 	],
 

ui/pnpm-lock.yaml

@@ -74,26 +74,40 @@ importers:
       vite: 2.7.13
 
   packages/audio:
-    specifiers: {}
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+    dependencies:
+      '@gradio/upload': link:../upload
 
   packages/components:
     specifiers: {}
 
   packages/workbench:
     specifiers:
+      '@gradio/audio': workspace:^0.0.1
       '@sveltejs/adapter-auto': next
       '@sveltejs/kit': next
+      autoprefixer: ^10.4.2
+      postcss: ^8.4.5
+      postcss-load-config: ^3.1.1
       svelte: ^3.44.0
       svelte-check: ^2.2.6
       svelte-preprocess: ^4.10.1
+      tailwindcss: ^3.0.12
       tslib: ^2.3.1
       typescript: ~4.5.4
+    dependencies:
+      '@gradio/audio': link:../audio
     devDependencies:
       '@sveltejs/adapter-auto': 1.0.0-next.17
       '@sveltejs/kit': 1.0.0-next.281_svelte@3.46.3
+      autoprefixer: 10.4.2_postcss@8.4.6
+      postcss: 8.4.6
+      postcss-load-config: 3.1.1
       svelte: 3.46.3
-      svelte-check: 2.4.1_svelte@3.46.3
+      svelte-check: 2.4.1_d5eca2c0d9133f686108b018fa7bac55
-      svelte-preprocess: 4.10.2_svelte@3.46.3+typescript@4.5.5
+      svelte-preprocess: 4.10.2_8ad9ba7d678a7e4906317692d003ce22
+      tailwindcss: 3.0.23_autoprefixer@10.4.2
       tslib: 2.3.1
       typescript: 4.5.5
 
@@ -475,6 +489,22 @@ packages:
     dev: false
     optional: true
 
+  /autoprefixer/10.4.2_postcss@8.4.6:
+    resolution: {integrity: sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.19.1
+      caniuse-lite: 1.0.30001304
+      fraction.js: 4.1.3
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /autoprefixer/9.8.8:
     resolution: {integrity: sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==}
     hasBin: true
@@ -539,7 +569,6 @@ packages:
       escalade: 3.1.1
       node-releases: 2.0.1
       picocolors: 1.0.0
-    dev: false
 
   /buffer-crc32/0.2.13:
     resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
@@ -554,7 +583,6 @@ packages:
 
   /caniuse-lite/1.0.30001304:
     resolution: {integrity: sha512-bdsfZd6K6ap87AGqSHJP/s1V+U6Z5lyrcbBu3ovbCCf8cSYpwTtGrCBObMpJqwxfTbLW6YTIdbb1jEeTelcpYQ==}
-    dev: false
 
   /canvas/2.9.0:
     resolution: {integrity: sha512-0l93g7uxp7rMyr7H+XRQ28A3ud0dKIUTIEkUe1Dxh4rjUYN7B93+SjC3r1PDKA18xcQN87OFGgUnyw7LSgNLSQ==}
@@ -894,7 +922,6 @@ packages:
 
   /electron-to-chromium/1.4.59:
     resolution: {integrity: sha512-AOJ3cAE0TWxz4fQ9zkND5hWrQg16nsZKVz9INOot1oV//u4wWu5xrj9CQMmPTYskkZRunSRc9sAnr4EkexXokg==}
-    dev: false
 
   /emoji-regex/8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -1252,7 +1279,6 @@ packages:
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
-    dev: false
 
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
@@ -1369,6 +1395,10 @@ packages:
     dev: false
     optional: true
 
+  /fraction.js/4.1.3:
+    resolution: {integrity: sha512-pUHWWt6vHzZZiQJcM6S/0PXfS+g6FM4BF5rj9wZyreivhQPdsh5PpE25VtSNxq80wHS5RfY51Ii+8Z0Zl/pmzg==}
+    dev: true
+
   /fs-minipass/2.1.0:
     resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
     engines: {node: '>= 8'}
@@ -1856,7 +1886,6 @@ packages:
 
   /node-releases/2.0.1:
     resolution: {integrity: sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==}
-    dev: false
 
   /nopt/5.0.0:
     resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
@@ -1874,7 +1903,6 @@ packages:
   /normalize-range/0.1.2:
     resolution: {integrity: sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /npmlog/5.0.1:
     resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
@@ -2370,6 +2398,35 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  /svelte-check/2.4.1_d5eca2c0d9133f686108b018fa7bac55:
+    resolution: {integrity: sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.24.0
+    dependencies:
+      chokidar: 3.5.3
+      fast-glob: 3.2.11
+      import-fresh: 3.3.0
+      minimist: 1.2.5
+      picocolors: 1.0.0
+      sade: 1.8.1
+      source-map: 0.7.3
+      svelte: 3.46.3
+      svelte-preprocess: 4.10.2_8ad9ba7d678a7e4906317692d003ce22
+      typescript: 4.5.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - coffeescript
+      - less
+      - node-sass
+      - postcss
+      - postcss-load-config
+      - pug
+      - sass
+      - stylus
+      - sugarss
+    dev: true
+
   /svelte-check/2.4.1_postcss@8.4.6+svelte@3.46.3:
     resolution: {integrity: sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==}
     hasBin: true
@@ -2399,35 +2456,6 @@ packages:
       - sugarss
     dev: false
 
-  /svelte-check/2.4.1_svelte@3.46.3:
-    resolution: {integrity: sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==}
-    hasBin: true
-    peerDependencies:
-      svelte: ^3.24.0
-    dependencies:
-      chokidar: 3.5.3
-      fast-glob: 3.2.11
-      import-fresh: 3.3.0
-      minimist: 1.2.5
-      picocolors: 1.0.0
-      sade: 1.8.1
-      source-map: 0.7.3
-      svelte: 3.46.3
-      svelte-preprocess: 4.10.2_svelte@3.46.3+typescript@4.5.5
-      typescript: 4.5.5
-    transitivePeerDependencies:
-      - '@babel/core'
-      - coffeescript
-      - less
-      - node-sass
-      - postcss
-      - postcss-load-config
-      - pug
-      - sass
-      - stylus
-      - sugarss
-    dev: true
-
   /svelte-hmr/0.14.9_svelte@3.46.3:
     resolution: {integrity: sha512-bKE9+4qb4sAnA+TKHiYurUl970rjA0XmlP9TEP7K/ncyWz3m81kA4HOgmlZK/7irGK7gzZlaPDI3cmf8fp/+tg==}
     peerDependencies:
@@ -2451,6 +2479,59 @@ packages:
       tiny-glob: 0.2.9
     dev: false
 
+  /svelte-preprocess/4.10.2_8ad9ba7d678a7e4906317692d003ce22:
+    resolution: {integrity: sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==}
+    engines: {node: '>= 9.11.2'}
+    requiresBuild: true
+    peerDependencies:
+      '@babel/core': ^7.10.2
+      coffeescript: ^2.5.1
+      less: ^3.11.3 || ^4.0.0
+      node-sass: '*'
+      postcss: ^7 || ^8
+      postcss-load-config: ^2.1.0 || ^3.0.0
+      pug: ^3.0.0
+      sass: ^1.26.8
+      stylus: ^0.55.0
+      sugarss: ^2.0.0
+      svelte: ^3.23.0
+      typescript: ^4.5.2
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      coffeescript:
+        optional: true
+      less:
+        optional: true
+      node-sass:
+        optional: true
+      postcss:
+        optional: true
+      postcss-load-config:
+        optional: true
+      pug:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@types/pug': 2.0.6
+      '@types/sass': 1.43.1
+      detect-indent: 6.1.0
+      magic-string: 0.25.7
+      postcss: 8.4.6
+      postcss-load-config: 3.1.1
+      sorcery: 0.10.0
+      strip-indent: 3.0.0
+      svelte: 3.46.3
+      typescript: 4.5.5
+    dev: true
+
   /svelte-preprocess/4.10.2_a2976755b4ca24b5e005a6d2e55b331d:
     resolution: {integrity: sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==}
     engines: {node: '>= 9.11.2'}
@@ -2554,57 +2635,6 @@ packages:
       svelte: 3.46.3
     dev: false
 
-  /svelte-preprocess/4.10.2_svelte@3.46.3+typescript@4.5.5:
-    resolution: {integrity: sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==}
-    engines: {node: '>= 9.11.2'}
-    requiresBuild: true
-    peerDependencies:
-      '@babel/core': ^7.10.2
-      coffeescript: ^2.5.1
-      less: ^3.11.3 || ^4.0.0
-      node-sass: '*'
-      postcss: ^7 || ^8
-      postcss-load-config: ^2.1.0 || ^3.0.0
-      pug: ^3.0.0
-      sass: ^1.26.8
-      stylus: ^0.55.0
-      sugarss: ^2.0.0
-      svelte: ^3.23.0
-      typescript: ^4.5.2
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      coffeescript:
-        optional: true
-      less:
-        optional: true
-      node-sass:
-        optional: true
-      postcss:
-        optional: true
-      postcss-load-config:
-        optional: true
-      pug:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      typescript:
-        optional: true
-    dependencies:
-      '@types/pug': 2.0.6
-      '@types/sass': 1.43.1
-      detect-indent: 6.1.0
-      magic-string: 0.25.7
-      sorcery: 0.10.0
-      strip-indent: 3.0.0
-      svelte: 3.46.3
-      typescript: 4.5.5
-    dev: true
-
   /svelte-range-slider-pips/2.0.2:
     resolution: {integrity: sha512-VTWHOdwDyWbndGZnI0PQJY9DO7hgQlNubtCcCL6Wlypv5dU4vEsc4A1sX9TWMuvebEe4332SgsQQHzOdZ+guhQ==}
     dev: false
@@ -2651,6 +2681,39 @@ packages:
       - ts-node
     dev: true
 
+  /tailwindcss/3.0.23_autoprefixer@10.4.2:
+    resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==}
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+    peerDependencies:
+      autoprefixer: ^10.0.2
+    dependencies:
+      arg: 5.0.1
+      autoprefixer: 10.4.2_postcss@8.4.6
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      color-name: 1.1.4
+      cosmiconfig: 7.0.1
+      detective: 5.2.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.2.11
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      object-hash: 2.2.0
+      postcss: 8.4.6
+      postcss-js: 4.0.0_postcss@8.4.6
+      postcss-load-config: 3.1.1
+      postcss-nested: 5.0.6_postcss@8.4.6
+      postcss-selector-parser: 6.0.9
+      postcss-value-parser: 4.2.0
+      quick-lru: 5.1.1
+      resolve: 1.22.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: true
+
   /tailwindcss/3.0.23_autoprefixer@9.8.8:
     resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==}
     engines: {node: '>=12.13.0'}