Cleaning Up xStateFlows and abstracting generic interfaces

src/lib/components/Recipies/oRecipe.svelte

@@ -0,0 +1,45 @@
+<!-- src/lib/components/Recipies/oRecipe.svelte -->
+<script>
+	import { interpret } from 'xstate';
+	import Composite from '$lib/core/Composite.svelte';
+
+	export let machine;
+
+	let current = machine.initialState.value;
+
+	const service = interpret(machine)
+		.onTransition((state) => {
+			current = state.value;
+		})
+		.start();
+
+	// Derive possible actions from the current state
+	$: possibleActions = machine.states[current]?.meta.buttons || [];
+</script>
+
+<main class="grid w-full h-full grid-rows-layout">
+	<div class="w-full h-full p-4 overflow-scroll">
+		<p>Current state: {current}</p>
+		<h1>{machine.states[current].meta.title}</h1>
+		{#if machine.states[current].meta.composite}
+			<Composite composite={machine.states[current].meta.composite} />
+		{/if}
+	</div>
+	<div class="p-4">
+		{#each possibleActions as { type, label, disabled } (type)}
+			<button
+				class="px-4 py-2 text-white bg-blue-500 rounded"
+				on:click={() => service.send(type)}
+				{disabled}
+			>
+				{label}
+			</button>
+		{/each}
+	</div>
+</main>
+
+<style>
+	.grid-rows-layout {
+		grid-template-rows: 1fr auto;
+	}
+</style>