refactor save

src/lib/components/refactor/ComposerAlice.svelte

@@ -15,10 +15,10 @@
 	}
 </script>
 
-<div class="p-2 border-2 border-blue-500">
+<div class="p-8 border-2 border-blue-500">
 	<p>My ID is: {me.id}</p>
 
-	I am the parent, this is my state: {$data.state}
+	My state is: {$data.state}
 	<div
 		class="p-2 border-2"
 		style="background-color: {$data.state}; border-radius: 50%; width: 50px; height: 50px;"

src/lib/components/refactor/ComposerBob.svelte

@@ -9,10 +9,10 @@
 	};
 </script>
 
-<div class="border-2 border-yellow-500">
+<div class="p-8 border-2 border-yellow-500">
 	<p>My ID is: {me.id}</p>
 
-	i am the child and this is my state: {$data.state}
+	My state is: {$data.state}
 	<button
 		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
 		on:click={handleButton}>Switch</button

src/lib/components/refactor/ComposerCharly.svelte

@@ -14,15 +14,18 @@
 	}
 </script>
 
-<div class="flex flex-col h-screen">
+<div class="flex flex-col h-screen border-2 border-green-500">
-	<section class=" h-96">
+	<section class="p-8 h-96">
+		<p>My ID is: {me.id}</p>
+
+		My state is: {$data.state}
 		{#if $data.store.todos}
 			{#each $data.store.todos as todo}
 				<p>{todo.text}</p>
 			{/each}
 		{/if}
 	</section>
-	<section class="flex-grow overflow-y-auto">
+	<section class="flex-grow p-8 overflow-y-auto">
 		{#if $data.store.messages}
 			{#each $data.store.messages as message}
 				<p>{message.text}</p>

src/lib/components/refactor/ComposerWrap.svelte

@@ -31,7 +31,7 @@
 				component: 'ComposerCharly',
 				slot: 'aside',
 				data: {
-					queries: {
+					map: {
 						todos: queryTodos,
 						messages: queryMessages
 					}

src/lib/core/refactor/Composer.svelte

@@ -115,8 +115,8 @@
 
 		if (child.id) {
 			child.store = createComposerStore(child.id, child.store || {});
-			if (child.data?.queries) {
+			if (child.data?.map) {
-				subscribeAndMapQueries(child.id, child.data.queries);
+				subscribeAndMapQueries(child.id, child.data.map);
 			}
 		}