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>

src/lib/components/refactor/ComposerBob.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let store;
+	export let machineService;
+
+	const handleButton = () => {
+		console.log('learn ready machine: ' + JSON.stringify(machineService));
+		console.log('Sending TOGGLE event to the machine');
+		machineService.send('TOGGLE');
+	};
+</script>
+
+<div class="border-2 border-yellow-500">
+	i am the child and this is my state: {$store.machine.state}
+	<button
+		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
+		on:click={handleButton}>Switch</button
+	>
+</div>