refactoring composer part2

src/lib/components/refactor/ComposerWrap.svelte

@@ -0,0 +1,107 @@
+<script>
+	import Composer from '$lib/core/refactor/Composer.svelte';
+
+	let composer = {
+		id: 'ComposerParent',
+		store: {
+			title: 'Hello Earth',
+			description:
+				'how to use the store and mapping logic of store to store and data to store maps',
+			helloMapMe: 'this is going to be mapped'
+		},
+		machine: {
+			initial: 'NOTREADY',
+			states: {
+				NOTREADY: {
+					on: { TOGGLE: 'READY' }
+				},
+				READY: {
+					on: { TOGGLE: 'NOTREADY' }
+				}
+			}
+		},
+		layout: {
+			columns: '1fr 1fr',
+			rows: '1fr 1fr',
+			areas: `
+				"top aside"
+				"bottom aside"
+			`
+		},
+		children: [
+			{
+				id: 'ComposerCharly',
+				component: 'ComposerCharly',
+				slot: 'aside',
+				machine: {
+					initial: 'NOTREADY',
+					states: {
+						NOTREADY: {
+							on: { TOGGLE: 'READY' }
+						},
+						READY: {
+							on: { TOGGLE: 'NOTREADY' }
+						}
+					}
+				},
+				store: {
+					machine: { state: 'NOTREADY' },
+					hello: 'define me directly',
+					hello2: 'overwrite me with the mapping value'
+				},
+				map: {
+					title: '@hello:title',
+					description: '@hello:description',
+					hello2: '@hello:helloMapMe',
+					pkpWallet: '@wallet:pkpWallet',
+					todos: '@data:queryTodos'
+				},
+				services: ['helloEarthAlert']
+			},
+			{
+				id: 'ComposerBob',
+				component: 'ComposerBob',
+				slot: 'top',
+				store: {
+					machine: { state: 'NOTREADY' }
+				},
+				machine: {
+					initial: 'NOTREADY',
+					states: {
+						NOTREADY: {
+							on: { TOGGLE: 'READY' }
+						},
+						READY: {
+							on: { TOGGLE: 'NOTREADY' }
+						}
+					}
+				}
+			},
+			{
+				id: 'ComposerAlice',
+				component: 'ComposerAlice',
+				slot: 'bottom',
+				machine: {
+					initial: 'RED',
+					states: {
+						GREEN: {
+							on: { SWITCH: 'YELLOW' }
+						},
+						YELLOW: {
+							on: { SWITCH: 'RED' }
+						},
+						RED: {
+							on: { SWITCH: 'GREEN' }
+						}
+					},
+					on: {
+						READY: 'GREEN',
+						NOTREADY: 'RED'
+					}
+				}
+			}
+		]
+	};
+</script>
+
+<Composer {composer} />