Refactoring next part

src/lib/core/refactor/Composer.svelte

@@ -18,7 +18,7 @@
 	interface IComposer {
 		layout?: IComposerLayout;
 		id: string;
-		me?: { id: string; do: any };
+		me?: { id: string; do: any; data: any };
 		slot?: string;
 		component?: string;
 		store?: Record<string, any>;
@@ -27,9 +27,10 @@
 	}
 
 	export let composer: IComposer;
-	let layoutStyle = '';
 
+	let layoutStyle = '';
 	let machineService;
+	let unsubscribers = [];
 
 	$: {
 		layoutStyle = computeLayoutStyle(composer?.layout);
@@ -46,7 +47,8 @@
 			machineService = interpret(machine).onTransition((state) => {
 				getComposerStore(composer.id).update((storeValue) => ({
 					...storeValue,
-					machine: { state: state.value }
+					state: state.value, // updated
+					context: state.context // added
 				}));
 			});
 			machineService.start();
@@ -60,7 +62,8 @@
 					machineService = interpret(childMachine).onTransition((state) => {
 						getComposerStore(child.id).update((storeValue) => ({
 							...storeValue,
-							machine: { state: state.value }
+							state: state.value, // updated
+							context: state.context // added
 						}));
 					});
 					machineService.start();
@@ -92,8 +95,6 @@
 		}
 	}
 
-	let unsubscribers = [];
-
 	onDestroy(() => {
 		unsubscribers.forEach((unsub) => unsub());
 	});
@@ -120,14 +121,14 @@
 </script>
 
 <div
-	class={`grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}`}
+	class={`grid w-full h-full overflow-hidden ${composer?.layout?.style || ''}`}
 	style={layoutStyle}
 >
 	{#await loadComponentAndService(composer) then Component}
 		<svelte:component
 			this={Component}
 			id={composer.id}
-			store={getComposerStore(composer.id)}
+			data={getComposerStore(composer.id)}
 			machine={composer.machine}
 			me={composer.me}
 		/>
@@ -135,14 +136,14 @@
 	{#if composer?.children}
 		{#each composer.children as child (child.id)}
 			<div
-				class="grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}"
+				class="grid w-full h-full overflow-hidden ${composer?.layout?.style || ''}"
 				style={`grid-area: ${child.slot}`}
 			>
 				{#await loadComponentAndService(child) then ChildComponent}
 					<svelte:component
 						this={ChildComponent}
 						id={child.id}
-						store={getComposerStore(child.id)}
+						data={getComposerStore(child.id)}
 						machine={child.machine}
 						me={child.me}
 					/>