refactor(Composite): add ICompositeLayout interface & enhance children area assignment

src/lib/components/Composite.svelte

@@ -4,15 +4,28 @@
 	import services from '$lib/servicesLoader';
 	import { createComponentStore, getComponentStore } from '$lib/stores/componentStores.ts';
 
-	export let componentsData = {
+	interface ICompositeLayout {
-		layout: '',
+		areas: string;
-		children: []
+		columns?: string;
+		rows?: string;
+		gap?: string;
+		tailwindClasses?: string;
+	}
+
+	export let componentsData: {
+		layout: ICompositeLayout;
+		children: Array<any>;
 	};
+
 	$: layoutStyle = `
         grid-template-areas: ${componentsData.layout.areas};
-        gap: ${componentsData.layout.gap || '0px'};
+        ${componentsData.layout.gap ? `gap: ${componentsData.layout.gap};` : ''}
-        grid-template-columns: ${componentsData.layout.columns || '1fr'};
+        ${
-        grid-template-rows: ${componentsData.layout.rows || 'auto'};
+					componentsData.layout.columns
+						? `grid-template-columns: ${componentsData.layout.columns};`
+						: ''
+				}
+        ${componentsData.layout.rows ? `grid-template-rows: ${componentsData.layout.rows};` : ''}
     `;
 
 	function initializeComponentState(child) {
@@ -28,7 +41,7 @@
 	}
 
 	function mapAndSubscribe(component) {
-		console.log('Mapping and subscribing for:', component.id); // Debug line
+		console.log('Mapping and subscribing for:', component.id);
 
 		if (component.map) {
 			const localStore = getComponentStore(component.id);
@@ -38,7 +51,7 @@
 				const externalStore = getComponentStore(externalID);
 				if (externalStore) {
 					externalStore.subscribe((externalState) => {
-						console.log('External state:', externalState); // Debug line
+						console.log('External state:', externalState);
 						if (externalState && externalKey in externalState) {
 							localStore.update((storeValue) => {
 								storeValue = storeValue || {};
@@ -78,6 +91,7 @@
 		}
 		return null;
 	}
+
 	async function getServiceProps(component) {
 		const loadedServices = [];
 		if (component.services) {
@@ -92,14 +106,11 @@
 	}
 </script>
 
-<div
+<div class={`grid w-full h-full ${componentsData.layout.tailwindClasses}`} style={layoutStyle}>
-	class={`grid w-full h-full ${componentsData.layout.customTailwind || ''}`}
-	style="display: grid; {layoutStyle}"
->
 	{#each componentsData.children as component (component.id)}
+		<div class={`w-full h-full overflow-hidden`} style={`grid-area: ${component.slot}`}>
 			{#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]}
 				{#if Component}
-				<div class="w-full h-full overflow-hidden {component.slot}">
 					<svelte:component
 						this={Component}
 						id={component.id}
@@ -127,10 +138,10 @@
 					{#if component.children && component.children.length}
 						<Composite componentsData={component} />
 					{/if}
-				</div>
 				{:else}
 					<p>Component {component.componentName} not found.</p>
 				{/if}
 			{/await}
+		</div>
 	{/each}
 </div>

src/lib/components/Wallet/Wallet.svelte

@@ -14,6 +14,7 @@
 	});
 </script>
 
+PkpWallet
 {#if pkpWallet}
 	<div class="mb-4 text-lg font-medium">
 		PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span>

src/routes/+page.svelte

@@ -3,10 +3,13 @@
 
 	let componentsData = {
 		layout: {
-			areas: `"nav", "main", "footer"`,
+			areas: `   
-			gap: '10px',
+				"header header header"
-			columns: '1fr',
+				"main main aside"
-			template: 'auto 1fr auto'
+				"footer footer footer";
+			`,
+			columns: '1fr 1fr 1fr',
+			rows: 'auto 1fr auto'
 		},
 		children: [
 			{
@@ -18,18 +21,18 @@
 			{
 				id: '2',
 				componentName: 'Messages',
-				slot: 'Main'
+				slot: 'main'
+			},
+			{
+				id: '4',
+				componentName: 'Wallet',
+				slot: 'aside',
+				state: {
+					rpcURL: 'https://rpc.gnosischain.com/',
+					pkpPubKey:
+						'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
+				}
 			},
-			// {
-			// 	id: '2',
-			// 	componentName: 'Wallet',
-			// 	slot: 'main',
-			// 	state: {
-			// 		rpcURL: 'https://rpc.gnosischain.com/',
-			// 		pkpPubKey:
-			// 			'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
-			// 	}
-			// },
 			{
 				id: '3',
 				componentName: 'Terminal',