How many places can it be?

Remember that strange jump, Ben — from idle straight to failed? Hold that thought. First, the map. We have four valid states: idle, saving, saved and failed — laid out as a map. This is the entire shape of the workflow, every place it can ever be.

Our initial bug is now fixed. At any moment, the component lives in exactly one of them. We can safely move around — to saving, to saved, to failed — but never to two at once.

What connects them?

Our workflow always starts in idle. From there, one path exists. When the user clicks save, it opens an arrow that takes us to saving. That should be the only way out of idle.

From saving, two possible exits. When the operation succeeds, an arrow opens that takes us to saved. And when the operation fails, a second arrow lands us in failed.

From failed, a retry arrow brings us back to saving. And finally, when we sit in saved, done resets to idle. Five transitions — our complete map.

What stops a sixth arrow?

Ben

So, John — back to that jump. Now that the map is laid out... what actually stops a sixth arrow? Say, idle jumping straight to failed?

Nothing. Any handler can still call setStatus from anywhere, to anywhere. The type names the states — it says nothing about how you move between them.

status.ts

1 type Status =

2 | 'idle'

3 | 'saving'

4 | 'failed'

5 | 'saved'