state machine: add demo & fix

src/routes/statemachine/+page.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import PhoneInput from '$lib/PhoneInput.svelte';
+	import StateMachine, { type StateMachinePage } from '$lib/StateMachine.svelte';
+	import TextInput from '$lib/TextInput.svelte';
+	import { ArrowRight, Check } from 'phosphor-svelte';
+
+	let stateMachineRef: StateMachine;
+	let index = $state(1);
+
+	const pages: StateMachinePage[] = [
+		{
+			hero: {
+				text: 'Hey there!',
+				fontSize: 'large',
+				colour: 'light',
+				size: 'large'
+			},
+			snippet: firstPage,
+			button: {
+				text: 'Next',
+				onclick: () => console.log('next'),
+				icon: {
+					component: ArrowRight,
+					props: { size: '1.2em', weight: 'bold' }
+				}
+			}
+		},
+		{
+			hero: {
+				text: 'How can we reach you?',
+				fontSize: 'small',
+				colour: 'dark',
+				size: 'small'
+			},
+			snippet: secondPage,
+			button: {
+				text: 'Submit',
+				onclick: () => console.log('finish'),
+				icon: {
+					component: Check,
+					props: { size: '1.2em', weight: 'bold' }
+				}
+			}
+		}
+	];
+
+	const successPage: StateMachinePage = {
+		disableBack: true,
+		hero: {
+			text: 'All done! 🎉',
+			fontSize: 'small',
+			size: 'large',
+			colour: 'light'
+		},
+		snippet: finishedSnippet,
+		button: false
+	};
+
+	const failurePage: StateMachinePage = {
+		disableBack: true,
+		hero: {
+			text: 'Something went wrong 😔',
+			fontSize: 'small',
+			size: 'large',
+			colour: 'dark'
+		},
+		snippet: failureSnippet,
+		button: false
+	};
+</script>
+
+<StateMachine
+	bind:this={stateMachineRef}
+	{pages}
+	success={successPage}
+	failure={failurePage}
+	{index}
+></StateMachine>
+
+{#snippet firstPage()}
+	<TextInput label="What's your name?" validate={{ required: true }} />
+{/snippet}
+
+{#snippet secondPage()}
+	<PhoneInput label="What's your phone number?" required={true} />
+{/snippet}
+
+{#snippet finishedSnippet()}
+	<p>All done! Thanks so much for submitting.</p>
+{/snippet}
+
+{#snippet failureSnippet()}
+	<p class="my-3">
+		We're sorry for the inconvenience. Something went wrong on our end and we couldn't process your
+		submission.
+	</p>
+{/snippet}