added basic composite pattern to load the ui dynamically via json

src/lib/components.ts

@@ -0,0 +1,8 @@
+import LitStatus from '$lib/LitStatus.svelte';
+import Composite from '$lib/components/Composite.svelte';
+
+const components = {
+    "LitStatus": LitStatus,
+};
+
+export default components;

src/lib/components/Composite.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import components from '$lib/components.ts';
+	export let componentsData = [];
+	export let name = '';
+
+	async function getComponent(componentName) {
+		if (components[componentName]) return components[componentName];
+		if (componentName === 'Composite') {
+			const module = await import('$lib/components/Composite.svelte');
+			return module.default;
+		}
+		return null;
+	}
+</script>
+
+{#each componentsData as component (component.id)}
+	{#await getComponent(component.componentName) then Component}
+		{#if Component}
+			<svelte:component
+				this={Component}
+				name={component.name}
+				componentsData={component.components}
+			/>
+		{:else}
+			<p>Component {component.componentName} not found.</p>
+		{/if}
+	{/await}
+{/each}
+
+<p>Composite: {name}</p>

src/routes/+page.svelte

@@ -8,12 +8,30 @@
 	import GoogleAuth from '$lib/components/GoogleAuth.svelte';
 	import Messages from '$lib/components/Messages.svelte';
 	import MessageInput from '$lib/components/MessageInput.svelte';
+	import Composite from '$lib/components/Composite.svelte';
+
+	let componentsData = [
+		{
+			id: 2,
+			componentName: 'Composite',
+			name: 'Nested Composite 1',
+			components: [
+				{
+					id: 3,
+					componentName: 'LitStatus',
+					name: 'Leaf 2'
+				}
+			]
+		}
+	];
 	let pkpWallet;
 	let authSig;
 	let pkpPubKey =
 		'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571';
 </script>
 
+<Composite {componentsData} name="Main Composite" />
+
 <!-- <LitStatus />
 <AuthSign /> -->
 
@@ -25,7 +43,7 @@
 	<WalletConnect bind:pkpWallet bind:authSig bind:pkpPubKey />
 </div> -->
 
-<div class="fixed top-0 left-0 w-full h-full overflow-hidden">
+<!-- <div class="fixed top-0 left-0 w-full h-full overflow-hidden">
 	<main class="grid grid-rows-[auto,1fr,auto] min-h-screen">
 		<header class="bg-gray-100 text-black p-4">
 			<GoogleAuth />
@@ -39,4 +57,4 @@
 			<MessageInput />
 		</footer>
 	</main>
-</div>
+</div> -->