further cleaning up

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">