further cleaning up

package.json

@@ -55,7 +55,6 @@
         "@sveltejs/vite-plugin-svelte": "^2.4.3",
         "@wagmi/core": "^1.3.8",
         "@xstate/svelte": "^2.1.0",
-        "chokidar": "^3.5.3",
         "viem": "^1.4.2",
         "xstate": "^4.38.2"
     }

src/app.html

@@ -15,7 +15,6 @@
 		%sveltekit.head%
 	</head>
 	<script>
-		// Fix `global is not defined` error
 		global = window;
 		window.process = {
 			env: {

src/lib/components/Terminal.svelte

@@ -50,7 +50,7 @@
 
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-container-token h-14">
 	<button class="input-group-shim" on:drawer{closeDrawer} on:click={openDrawer}>
-		<Avatar src="logo.png" width="w-10" rounded="rounded-full" />
+		<Avatar src="/logo.png" width="w-10" rounded="rounded-full" />
 	</button>
 
 	<input

src/lib/components/refactor/ComposerForm.svelte

@@ -1,28 +1,19 @@
 <script lang="ts">
 	import { superForm } from 'sveltekit-superforms/client';
-	import { UserSchema } from '$lib/types/UserSchema';
 	import { afterUpdate } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
 
 	export let me;
 
-	const initialFormData = {
-		name: '',
-		email: '',
-		about: '',
-		age: '',
-		favoriteFood: ''
-	};
-
-	const fields = ['name', 'email', 'about', 'age', 'favoriteFood'];
+	const { initialFormData, fields, validators } = $me.context;
 
 	const { form, errors, validate, constraints } = superForm(initialFormData, {
-		validators: UserSchema,
+		validators: validators,
 		warnings: {
 			noValidationAndConstraints: false
 		},
-		validationMethod: 'oninput', // Trigger validation on input events
+		validationMethod: 'oninput',
 		clearOnSubmit: 'errors-and-message'
 	});
 
@@ -69,9 +60,12 @@
 	});
 </script>
 
-<div class="w-full p-6 border-2 border-red-500">
+<div class="p-6">
 	My ID is: {$me.id} <br />
 	My state is: {$me.state}
+</div>
+
+<div class="flex items-center justify-center w-full h-full p-6">
 	{#if $successMessage}
 		<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
 			<div class="alert-message">

src/routes/composer/form/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Composer from '$lib/core/Composer.svelte';
+	import { UserSchema } from '$lib/types/UserSchema';
 
 	let composer = {
 		id: 'FormContainer',
@@ -19,7 +20,15 @@
 					id: 'validation',
 					initial: 'notValidated',
 					context: {
-						isValidated: false
+						initialFormData: {
+							name: '',
+							email: '',
+							about: '',
+							age: '',
+							favoriteFood: ''
+						},
+						fields: ['name', 'email', 'about', 'age', 'favoriteFood'],
+						validators: UserSchema
 					},
 					states: {
 						notValidated: {
@@ -38,10 +47,6 @@
 								}
 							}
 						}
-					},
-					services: {
-						setValidated: (context) => (context.isValidated = true),
-						setNotValidated: (context) => (context.isValidated = false)
 					}
 				}
 			},