added a basic realtime validation example

src/lib/components/Flows.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { Stepper, Step } from '@skeletonlabs/skeleton';
+	import { form, field } from 'svelte-forms';
+	import { required, between } from 'svelte-forms/validators';
+
+	let step = 1;
+	let name = '';
+	let age = '';
+	let flowData = {};
+
+	const handleNextStep = () => {
+		if (step === 1 && name.trim() === '') {
+			alert('Please enter a valid name.');
+			return;
+		}
+
+		if (step === 2 && age.trim() === '') {
+			alert('Please enter a valid age.');
+			return;
+		}
+
+		step += 1;
+	};
+
+	const handlePrevStep = () => {
+		step -= 1;
+	};
+
+	const handleConfirm = () => {
+		flowData = {
+			name,
+			age
+		};
+		alert('Flow data confirmed: ' + JSON.stringify(flowData));
+	};
+
+	const handleReset = () => {
+		step = 1;
+		name = '';
+		age = '';
+		flowData = {};
+	};
+</script>
+
+<Stepper start={step - 1}>
+	<Step>
+		<svelte:fragment slot="header">Step 1: Name</svelte:fragment>
+		<div>
+			<label for="name">Name:</label>
+			<input class="text-black" type="text" id="name" bind:value={name} />
+		</div>
+		<div slot="navigation">
+			<button class="btn variant-ghost" on:click={handleNextStep}>Next</button>
+		</div>
+	</Step>
+	<Step>
+		<svelte:fragment slot="header">Step 2: Age</svelte:fragment>
+		<div>
+			<label for="age">Age:</label>
+			<input class="text-black" type="number" id="age" bind:value={age} />
+		</div>
+		<div slot="navigation">
+			<button class="btn variant-ghost" on:click={handlePrevStep}>Previous</button>
+			<button class="btn variant-ghost" on:click={handleNextStep}>Next</button>
+		</div>
+	</Step>
+	<Step>
+		<svelte:fragment slot="header">Step 3: Confirm Summary</svelte:fragment>
+		<div>
+			<h3>Confirm Summary:</h3>
+			<p>Name: {name}</p>
+			<p>Age: {age}</p>
+		</div>
+		<div slot="navigation">
+			<button class="btn variant-ghost" on:click={handlePrevStep}>Previous</button>
+			<button class="btn variant-ghost-primary" on:click={handleConfirm}>Confirm</button>
+		</div>
+	</Step>
+</Stepper>
+
+<button on:click={handleReset}>Reset</button>

src/lib/types/UserSchema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const UserSchema = z.object({
+    name: z.string().min(3).max(10)
+});

src/routes/helloearth/+page.svelte

@@ -11,9 +11,10 @@
 		},
 		layout: {
 			areas: `
-				"main"
-				"footer";
+				"main aside"
+				"footer footer";
 			`,
+			columns: '1fr 1fr',
 			rows: '1fr auto'
 		},
 		children: [
@@ -34,6 +35,11 @@
 				},
 				services: ['helloEarthAlert']
 			},
+			{
+				id: 'testflows',
+				component: 'Flows',
+				slot: 'aside'
+			},
 			{
 				id: 'terminal',
 				component: 'Terminal',

src/routes/validation/+page.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { superForm } from 'sveltekit-superforms/client';
+	import { UserSchema } from '$lib/types/UserSchema';
+
+	const initialFormData = { name: '' };
+
+	const { form, errors, validate, constraints } = superForm(initialFormData, {
+		validators: UserSchema,
+		warnings: {
+			noValidationAndConstraints: false
+		},
+		validationMethod: 'oninput' // Trigger validation on input events
+	});
+
+	async function handleSubmit() {
+		// Manually validate the form
+		const validationResult = await validate();
+
+		// Prevent submission if there are errors
+		if (!validationResult.valid) {
+			return;
+		}
+
+		// Here, we'll just log the form data
+		console.log(form);
+	}
+</script>
+
+<div class="flex items-center justify-center min-h-screen">
+	<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
+		<div class="mb-4">
+			{#if $errors.name}
+				<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
+			{:else}
+				<label for="name" class="block mb-2 font-semibold text-white">Name</label>
+			{/if}
+
+			<input
+				name="name"
+				type="text"
+				class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+				bind:value={$form.name}
+				aria-invalid={$errors.name ? 'true' : undefined}
+				{...constraints.name}
+			/>
+		</div>
+
+		<button
+			type="submit"
+			class="w-full px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+			disabled={$errors.name}
+		>
+			Submit
+		</button>
+	</form>
+</div>