feat(Composite.svelte): update layout interface

Refactor the Composite component to support a new layout format with additional customization through the customTailwind property. This change simplifies the way layouts are defined and provides greater flexibility for design customizations.

BREAKING CHANGE: The layout interface in Composite.svelte has been modified. Components that depend on the old layout structure may need to be updated.

src/lib/components/Composite.svelte

@@ -8,6 +8,12 @@
 		layout: '',
 		children: []
 	};
+	$: layoutStyle = `
+        grid-template-areas: ${componentsData.layout.areas};
+        gap: ${componentsData.layout.gap || '0px'};
+        grid-template-columns: ${componentsData.layout.columns || '1fr'};
+        grid-template-rows: ${componentsData.layout.rows || 'auto'};
+    `;
 
 	function initializeComponentState(child) {
 		child.store = createComponentStore(child.id, child.state || {});
@@ -86,7 +92,10 @@
 	}
 </script>
 
-<div class="grid w-full h-full" style="display: grid; {componentsData.layout || ''}">
+<div
+	class={`grid w-full h-full ${componentsData.layout.customTailwind || ''}`}
+	style="display: grid; {layoutStyle}"
+>
 	{#each componentsData.children as component (component.id)}
 		{#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]}
 			{#if Component}

src/routes/+page.svelte

@@ -2,14 +2,12 @@
 	import Composite from '$lib/components/Composite.svelte';
 
 	let componentsData = {
-		layout: `
+		layout: {
-			grid-template-areas: 
+			areas: `"nav", "main", "footer"`,
-			"auth",
+			gap: '10px',
-				"header",
+			columns: '1fr',
-				"main",
+			template: 'auto 1fr auto'
-				"footer"
+		},
-			grid-template-rows: 1fr 1fr auto;
-		`,
 		children: [
 			{
 				id: '1',