How to work with "state"?

Hi,

I can see that for xstate matches there is a shorthand in ember-statechart-component:

<Toggle as |toggle|>
  (toggle.matches 'inactive')
</Toggle>

From the official xstate documentation it seems like it should also work in this way:

<!-- This does not work -->
<Toggle as |toggle|>
  (toggle.snapshot.matches 'inactive')
</Toggle>

But this does not work with:

Uncaught TypeError: Cannot read properties of undefined (reading 'value')

And respective this(?) is there set to undefined:

(screenshot tests step1, but it's supposed to be inactive in the example above)

I came to this conclusion from an ability to access context on snapshot which works for me:

<Toggle as |toggle|>
  {{toggle.snapshot.context.isActive}}
</Toggle>

I do not necessarily care about how do I call state.matches as there is a way, but I wanted to access state.can and possibly other functions, but it does not work for me.

Start by reproducing the two Handlebars examples in issue #522, comparing the working toggle.matches call with toggle.snapshot.matches and the reported undefined-value error. Check the ember-statechart-component API against the linked XState matches, context, and can documentation; done means the intended state methods are either accessible through the yielded value or the supported usage is documented.