Refactoring composite interface part1

src/lib/components/refactor/ComposerAlice.svelte

@@ -0,0 +1,27 @@
+<script>
+	export let services;
+	export let store;
+
+	export let machineService;
+
+	let childStore;
+
+	$: if (services.core) {
+		childStore = services.core.subscribeComposer('@ComposerBob');
+	}
+
+	$: {
+		if ($childStore && $childStore.machine.state) {
+			console.log('learn color machine: ' + JSON.stringify(machineService));
+			machineService.send($childStore.machine.state);
+		}
+	}
+</script>
+
+<div class="p-2 border-2 border-blue-500">
+	I am the parent, this is my state: {$store.machine.state}
+	<div
+		class="p-2 border-2"
+		style="background-color: {$store.machine.state}; border-radius: 50%; width: 50px; height: 50px;"
+	/>
+</div>