add input for repl and sync with component state

src/App.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Input from "./Input.svelte";
+	import Output from "./Output.svelte";
 	import type { Component } from "./types";
 
 	let components: Component[] = [
@@ -20,4 +22,11 @@
 			source: "<h1>Hello</h1>",
 		},
 	];
+
+	let current: number = 0;
 </script>
+
+<main>
+	<Input bind:components bind:current />
+	<Output />
+</main>

src/Input.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { Component } from "./types";
+
+	export let components: Component[] = [];
+	export let current: number = 0;
+
+	$: current_component = components.findIndex(({ id }) => id === current);
+</script>
+
+<section>
+	<textarea bind:value={components[current_component].source} />
+</section>

src/Output.svelte

@@ -0,0 +1,2 @@
+<script lang="ts">
+</script>