functional-typescript-xstatelisted

# Functional Statecharts with XState ## Overview A statechart is a state machine plus three things a plain union does not have: states inside states, regions that are active at once, and time as a first-class trigger. Each is a real capability and each costs the same thing — the lifecycle stops being a function you can call with two arguments and becomes a library value. So this pack is mostly about the second half of that trade. The modelling itself is unchanged and lives in [functional-modeling-state-machines](../functional-modeling-state-machines/SKILL.md); the TypeScript is in [functional-typescript](../functional-typescript/SKILL.md). **Check the installed version before writing code.** The shapes below target XState 5, which reorganised everything around actors and renamed `interpret` to `createActor`; version 4 spells most of this differently. ## When to use - A lifecycle with states inside states - Two parts of one lifecycle that are active at the same time - A transition that fires because time passed, not because something happened - One machine per row, each with its own lifetime - Deciding whether any of that is true yet Not for: a lifecycle a discriminated union and a transition function already describe. That is most of them. ## When a union is still the answer Ask which of the four the lifecycle actually has. If the answer is none, a union plus a pure `(state, event) => state` is smaller, needs no library, and can be called from a test with two argum