<!-- src/lib/components/Recipies/oRecipe.svelte --> <script> import { interpret } from 'xstate'; import Composite from '$lib/core/Composite.svelte'; // export let machine; let composite = { id: 'testingstuff', layout: { columns: '1fr 1fr', areas: ` "left right" ` }, children: [ { id: 'child', component: 'LearnReady', slot: 'left', store: { xstate: 'NOTREADY' }, machine: { id: 'compositemachine', initial: 'NOTREADY', states: { NOTREADY: { on: { TOGGLE: 'READY' } }, READY: { on: { TOGGLE: 'NOTREADY' } } } } }, { id: 'parent', component: 'LearnColor', slot: 'right' } ] }; // let current = machine.initialState.value; // const service = interpret(machine) // .onTransition((state) => { // current = state.value; // }) // .start(); // Derive possible actions from the current state // $: possibleActions = machine.states[current]?.meta.buttons || []; </script> <div class="h-1/4"> <Composite {composite} /> </div> <!-- <main class="grid w-full h-full grid-rows-layout"> <div class="w-full h-full p-4 overflow-scroll"> <p>Current state: {current}</p> <h1>{machine.states[current].meta.title}</h1> {#if machine.states[current].meta.composite} <Composite composite={machine.states[current].meta.composite} /> {/if} </div> <div class="p-4"> {#each possibleActions as { type, label, disabled } (type)} <button class="px-4 py-2 text-white bg-blue-500 rounded" on:click={() => service.send(type)} {disabled} > {label} </button> {/each} </div> </main> <style> .grid-rows-layout { grid-template-rows: 1fr auto; } </style> -->