Spark transformer that expands animated state fields into phase tracking state and calculations.

When a state field has animated: true or animated: [options], this transformer:

1. Adds a {field}_phase ephemeral state field (string, default "idle")
2. Adds a {field}_visible calculation: phase != "idle"
3. Adds a {field}_animating calculation: phase in ["entering", "exiting"]
4. If async: :async_field option is set, adds {field}_async_ready calculation

Phase State Machine

The phases are:

• "idle" - closed/hidden state
• "entering" - animation in progress
• "loading" - waiting for async data (only when async option set)
• "visible" - fully open/visible
• "exiting" - close animation in progress

Options

• async: :field_name - coordinate with async data loading
• preserve_dom: true - keep DOM alive during exit animation
• duration: 200 - fallback timeout in ms

Example

state :product_id, :any, animated: [async: :product, preserve_dom: true]

Expands to:

state :product_id, :any
state :product_id_phase, :string, from: :ephemeral, default: "idle"
calculate :product_id_visible, rx(@product_id_phase != "idle")
calculate :product_id_animating, rx(@product_id_phase == "entering" or @product_id_phase == "exiting")
calculate :product_id_async_ready, rx(@product_id_phase == "visible" or @product != nil)