Added dynamic instantiation of machines in composite

src/lib/core/Composite.svelte

@@ -7,7 +7,7 @@
 	import { dataStore } from '$lib/core/dataLoader';
 	import { createCompositeStore, getCompositeStore } from '$lib/core/compositeStores';
 	import { coreServices } from './coreServices';
-	import { Machine } from 'xstate';
+	import { Machine, interpret } from 'xstate';
 
 	interface ICompositeLayout {
 		areas: string;
@@ -35,6 +35,7 @@
 		core: coreServices
 	};
 	let layoutStyle = '';
+	let machineService;
 
 	$: {
 		layoutStyle = computeLayoutStyle(composite?.layout);
@@ -50,6 +51,33 @@
 				mapAndSubscribe(child);
 			});
 		}
+		if (composite?.machine) {
+			const machine = Machine(composite.machine);
+			machineService = interpret(machine).onTransition((state) => {
+				getCompositeStore(composite.id).update((storeValue) => ({
+					...storeValue,
+					machine: { state: state.value }
+				}));
+			});
+			machineService.start();
+			loadedServices.machine = machineService;
+		}
+
+		if (composite?.children) {
+			composite.children.forEach((child) => {
+				if (child.machine) {
+					const childMachine = Machine(child.machine);
+					machineService = interpret(childMachine).onTransition((state) => {
+						getCompositeStore(child.id).update((storeValue) => ({
+							...storeValue,
+							machine: { state: state.value }
+						}));
+					});
+					machineService.start();
+					loadedServices.machine = machineService;
+				}
+			});
+		}
 	}
 
 	function computeLayoutStyle(layout?: ICompositeLayout): string {