breaking changes, major refactoring of Composite

src/routes/+page.svelte

@@ -1,36 +1,24 @@
 <script>
-	import Composite from '$lib/components/Composite.svelte';
+	import Wallet from '$lib/Wallet.svelte';
+	import HelloEarth from '$lib/components/HelloEarth/HelloEarth.svelte';
+	import Composite from '$lib/core/Composite.svelte';
 
-	let componentsData = {
+	let composite = {
+		id: 'composite',
 		layout: {
 			areas: `   
-				"header  main"
-				"aside  main"
-				"footer  footer";
+				"top top top"
+				"main main main"
+				"footer footer footer";
 			`,
-			columns: '1fr 1fr',
-			rows: 'auto 1fr auto'
+			columns: '1fr 1fr 1fr',
+			rows: '1fr 1fr auto'
 		},
 		children: [
-			{
-				id: '1',
-				componentName: 'GoogleAuth',
-				slot: 'header',
-				services: ['setupLit']
-			},
-			{
-				id: 'messages',
-				componentName: 'Messages',
-				slot: 'main',
-				store: {
-					prop1: 'prop1',
-					prop2: 'prop2'
-				}
-			},
 			{
 				id: 'wallet',
-				componentName: 'Wallet',
-				slot: 'aside',
+				component: 'Wallet',
+				slot: 'top',
 				store: {
 					pkpWallet: '',
 					rpcURL: 'https://rpc.gnosischain.com/',
@@ -39,12 +27,17 @@
 				}
 			},
 			{
-				id: '3',
-				componentName: 'Terminal',
+				id: 'messages',
+				component: 'Messages',
+				slot: 'main'
+			},
+			{
+				id: 'terminal',
+				component: 'Terminal',
 				slot: 'footer'
 			}
 		]
 	};
 </script>
 
-<Composite {componentsData} />
+<Composite {composite} />