Hi folks... I have an update, but it's not a code update, but rather a decision update...
After a deep dive in XState, I found another library that has a learning curve about as steep as GraphQL, or even GSAP. It's a 13kb library, and I found it much more confusing than a few barebones FSM's, like Robot (probably #2 in the JS FSM arena), which is only 1kb in size and makes some design decisions that streamline what XState can do, but it keeps it functional and it's lite on all the features.
But nearly all those features are already provided by GSAP.
I was sold on the switch from XState to Robot, but then I decided to take the Xstate course on Frontend Masters w/ the author, and before he explained XState, the first 20 minutes was creating a basic functional finite state machines w/o any libraries...
I actually found that simple exercise to be the most profound, because GSAP has much of what I want to do already built in... state change delays could be done w/ a simple delay value and an "onComplete" callback.
So... Here is the update. I doubt I will be using either XState or Robot, but rather a very streamlined fsm that only handles the basics, and I'll let GSAP timelines do the rest... I just feel this is the best of both worlds.
Lastly, Svelte's framework makes it really easy to make these into simple, well-encapsulated modules, and the syntax magic to shorten the expression even more. I'm confident that tiny functional fsm will be all that's needed, faster than a library, and a great opportunity for me to wrestle with the whole function within a function, within a function thing...
More updates coming as I get to coding...
My site will be done faster too