Refactoring composite interface part1

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>