Refactoring composite interface part1

src/routes/composer/+page.svelte

@@ -0,0 +1,59 @@
+<script>
+	import Composer from '$lib/core/refactor/Composer.svelte';
+
+	let composer = {
+		id: 'ComposerParent',
+		layout: {
+			columns: '1fr 1fr',
+			areas: `
+				"left right"
+			`
+		},
+		children: [
+			{
+				id: 'ComposerBob',
+				component: 'ComposerBob',
+				slot: 'left',
+				store: {
+					machine: { state: 'NOTREADY' }
+				},
+				machine: {
+					initial: 'NOTREADY',
+					states: {
+						NOTREADY: {
+							on: { TOGGLE: 'READY' }
+						},
+						READY: {
+							on: { TOGGLE: 'NOTREADY' }
+						}
+					}
+				}
+			},
+			{
+				id: 'ComposerAlice',
+				component: 'ComposerAlice',
+				slot: 'right',
+				machine: {
+					initial: 'RED',
+					states: {
+						GREEN: {
+							on: { SWITCH: 'YELLOW' }
+						},
+						YELLOW: {
+							on: { SWITCH: 'RED' }
+						},
+						RED: {
+							on: { SWITCH: 'GREEN' }
+						}
+					},
+					on: {
+						READY: 'GREEN',
+						NOTREADY: 'RED'
+					}
+				}
+			}
+		]
+	};
+</script>
+
+<Composer {composer} />