added dynamically loading of xstates machines from composite definitions

src/lib/components/Recipies/oRecipe.svelte

@@ -3,7 +3,7 @@
 	import { interpret } from 'xstate';
 	import Composite from '$lib/core/Composite.svelte';
 
-	export let machine;
+	// export let machine;
 
 	let composite = {
 		id: 'testingstuff',
@@ -16,10 +16,22 @@
 		children: [
 			{
 				id: 'child',
-				// component: 'LearnReady',
+				component: 'LearnReady',
 				slot: 'left',
 				store: {
 					xstate: 'NOTREADY'
+				},
+				machine: {
+					id: 'compositemachine',
+					initial: 'NOTREADY',
+					states: {
+						NOTREADY: {
+							on: { TOGGLE: 'READY' }
+						},
+						READY: {
+							on: { TOGGLE: 'NOTREADY' }
+						}
+					}
 				}
 			},
 			{
@@ -30,23 +42,26 @@
 		]
 	};
 
-	let current = machine.initialState.value;
+	// let current = machine.initialState.value;
 
-	const service = interpret(machine)
-		.onTransition((state) => {
-			current = state.value;
-		})
-		.start();
+	// const service = interpret(machine)
+	// 	.onTransition((state) => {
+	// 		current = state.value;
+	// 	})
+	// 	.start();
 
 	// Derive possible actions from the current state
-	$: possibleActions = machine.states[current]?.meta.buttons || [];
+	// $: possibleActions = machine.states[current]?.meta.buttons || [];
 </script>
 
+<div class="h-1/4">
+	<Composite {composite} />
+</div>
+
+<!-- 
 <main class="grid w-full h-full grid-rows-layout">
 	<div class="w-full h-full p-4 overflow-scroll">
-		<div class="h-1/4">
-			<Composite {composite} />
-		</div>
+	
 		<p>Current state: {current}</p>
 		<h1>{machine.states[current].meta.title}</h1>
 		{#if machine.states[current].meta.composite}
@@ -70,4 +85,4 @@
 	.grid-rows-layout {
 		grid-template-rows: 1fr auto;
 	}
-</style>
+</style> -->