@exponential_app/eui 0.2.1 → 0.4.0

package/fixtures/motion-state.json

@@ -0,0 +1,722 @@
+{
+  "$comment": "EXP-1605: dotLottie state machines in eUI Motion (apps/desktop/crates/eui-motion/src/state_machine.rs), the ONE interpreter every renderer uses. A case = a machine (the dotLottie 2 JSON a Motion's `stateMachine` prop or a .lottie `s/` file carries) + steps; each step: `post` an interaction (click|pointerDown|pointerUp|pointerEnter|pointerExit|complete|loopComplete, `layer` = the hit layer) and/or `set` inputs (a bound eUI `inputs` value) and/or `complete` (the state's playback finished: its guard-less transition), then the expected `state`, the states `entered` since the previous step (hosts send each as the Motion's `on.state` action, context {state}), `final`, the state's playback `range` [from, to) in frames and `autoplay` on the timeline 30 fps / ip 0 / op 30 with markers low = 0..10 and high = 10..30, and the `inputs` after the step. Replayed by eui-motion tests/state_machine.rs (UPDATE_MOTION_FIXTURES=1 rewrites), over WASM (TS) and uniffi (Swift, Kotlin).",
+  "lottie": {
+    "v": "5.12.0",
+    "fr": 30,
+    "ip": 0,
+    "op": 30,
+    "w": 10,
+    "h": 10,
+    "layers": [],
+    "markers": [
+      {
+        "cm": "low",
+        "tm": 0,
+        "dr": 10
+      },
+      {
+        "cm": "high",
+        "tm": 10,
+        "dr": 20
+      }
+    ]
+  },
+  "cases": [
+    {
+      "id": "toggle-on-click",
+      "covers": "a button that plays `on` / `off` segments, toggled by clicks",
+      "machine": {
+        "initial": "off",
+        "inputs": [
+          {
+            "type": "Boolean",
+            "name": "on",
+            "value": false
+          }
+        ],
+        "interactions": [
+          {
+            "type": "Click",
+            "actions": [
+              {
+                "type": "Toggle",
+                "inputName": "on"
+              }
+            ]
+          }
+        ],
+        "states": [
+          {
+            "name": "off",
+            "type": "PlaybackState",
+            "segment": [
+              0,
+              10
+            ],
+            "loop": false,
+            "autoplay": true,
+            "transitions": [
+              {
+                "type": "Transition",
+                "toState": "on",
+                "guards": [
+                  {
+                    "type": "Boolean",
+                    "inputName": "on",
+                    "conditionType": "Equal",
+                    "compareTo": true
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "name": "on",
+            "type": "PlaybackState",
+            "segment": [
+              10,
+              20
+            ],
+            "loop": false,
+            "autoplay": true,
+            "transitions": [
+              {
+                "type": "Transition",
+                "toState": "off",
+                "guards": [
+                  {
+                    "type": "Boolean",
+                    "inputName": "on",
+                    "conditionType": "Equal",
+                    "compareTo": false
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "initial": {
+        "state": "off",
+        "entered": [
+          "off"
+        ],
+        "final": false,
+        "range": [
+          0.0,
+          10.0
+        ],
+        "autoplay": true,
+        "inputs": {
+          "on": false
+        }
+      },
+      "steps": [
+        {
+          "state": "on",
+          "entered": [
+            "on"
+          ],
+          "final": false,
+          "range": [
+            10.0,
+            20.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "on": true
+          },
+          "step": {
+            "post": "click"
+          }
+        },
+        {
+          "state": "off",
+          "entered": [
+            "off"
+          ],
+          "final": false,
+          "range": [
+            0.0,
+            10.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "on": false
+          },
+          "step": {
+            "post": "click"
+          }
+        },
+        {
+          "state": "off",
+          "entered": [],
+          "final": false,
+          "range": [
+            0.0,
+            10.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "on": false
+          },
+          "step": {
+            "post": "pointerEnter"
+          }
+        }
+      ]
+    },
+    {
+      "id": "hover-in-out",
+      "covers": "hover plays `in`, leaving plays `out`, then idles",
+      "machine": {
+        "initial": "idle",
+        "inputs": [
+          {
+            "type": "Event",
+            "name": "enter"
+          },
+          {
+            "type": "Event",
+            "name": "leave"
+          }
+        ],
+        "interactions": [
+          {
+            "type": "PointerEnter",
+            "actions": [
+              {
+                "type": "Fire",
+                "inputName": "enter"
+              }
+            ]
+          },
+          {
+            "type": "PointerExit",
+            "actions": [
+              {
+                "type": "Fire",
+                "inputName": "leave"
+              }
+            ]
+          }
+        ],
+        "states": [
+          {
+            "name": "idle",
+            "type": "PlaybackState",
+            "segment": [
+              0,
+              1
+            ],
+            "autoplay": false,
+            "transitions": [
+              {
+                "type": "Transition",
+                "toState": "in",
+                "guards": [
+                  {
+                    "type": "Event",
+                    "inputName": "enter"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "name": "in",
+            "type": "PlaybackState",
+            "segment": [
+              0,
+              15
+            ],
+            "loop": false,
+            "autoplay": true,
+            "transitions": [
+              {
+                "type": "Transition",
+                "toState": "out",
+                "guards": [
+                  {
+                    "type": "Event",
+                    "inputName": "leave"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "name": "out",
+            "type": "PlaybackState",
+            "segment": [
+              15,
+              30
+            ],
+            "loop": false,
+            "autoplay": true,
+            "transitions": [
+              {
+                "type": "Transition",
+                "toState": "idle"
+              }
+            ]
+          }
+        ]
+      },
+      "initial": {
+        "state": "idle",
+        "entered": [
+          "idle"
+        ],
+        "final": false,
+        "range": [
+          0.0,
+          1.0
+        ],
+        "autoplay": false,
+        "inputs": {}
+      },
+      "steps": [
+        {
+          "state": "in",
+          "entered": [
+            "in"
+          ],
+          "final": false,
+          "range": [
+            0.0,
+            15.0
+          ],
+          "autoplay": true,
+          "inputs": {},
+          "step": {
+            "post": "pointerEnter"
+          }
+        },
+        {
+          "state": "out",
+          "entered": [
+            "out"
+          ],
+          "final": false,
+          "range": [
+            15.0,
+            30.0
+          ],
+          "autoplay": true,
+          "inputs": {},
+          "step": {
+            "post": "pointerExit"
+          }
+        },
+        {
+          "state": "idle",
+          "entered": [
+            "idle"
+          ],
+          "final": false,
+          "range": [
+            0.0,
+            1.0
+          ],
+          "autoplay": false,
+          "inputs": {},
+          "step": {
+            "complete": true
+          }
+        },
+        {
+          "state": "idle",
+          "entered": [],
+          "final": false,
+          "range": [
+            0.0,
+            1.0
+          ],
+          "autoplay": false,
+          "inputs": {},
+          "step": {
+            "post": "pointerExit"
+          }
+        }
+      ]
+    },
+    {
+      "id": "progress-thresholds",
+      "covers": "a bound numeric input picks a state by threshold (eUI `inputs` binding)",
+      "machine": {
+        "initial": "low",
+        "inputs": [
+          {
+            "type": "Numeric",
+            "name": "level",
+            "value": 0
+          }
+        ],
+        "states": [
+          {
+            "name": "low",
+            "type": "PlaybackState",
+            "marker": "low",
+            "transitions": [
+              {
+                "type": "Transition",
+                "toState": "high",
+                "guards": [
+                  {
+                    "type": "Numeric",
+                    "inputName": "level",
+                    "conditionType": "GreaterThanOrEqual",
+                    "compareTo": 50
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "name": "high",
+            "type": "PlaybackState",
+            "marker": "high",
+            "transitions": [
+              {
+                "type": "Transition",
+                "toState": "done",
+                "guards": [
+                  {
+                    "type": "Numeric",
+                    "inputName": "level",
+                    "conditionType": "Equal",
+                    "compareTo": 100
+                  }
+                ]
+              },
+              {
+                "type": "Transition",
+                "toState": "low",
+                "guards": [
+                  {
+                    "type": "Numeric",
+                    "inputName": "level",
+                    "conditionType": "LessThan",
+                    "compareTo": 50
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "name": "done",
+            "type": "PlaybackState",
+            "segment": [
+              29,
+              30
+            ],
+            "final": true,
+            "transitions": [
+              {
+                "type": "Transition",
+                "toState": "low",
+                "guards": [
+                  {
+                    "type": "Numeric",
+                    "inputName": "level",
+                    "conditionType": "LessThan",
+                    "compareTo": 50
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "initial": {
+        "state": "low",
+        "entered": [
+          "low"
+        ],
+        "final": false,
+        "range": [
+          0.0,
+          10.0
+        ],
+        "autoplay": true,
+        "inputs": {
+          "level": 0.0
+        }
+      },
+      "steps": [
+        {
+          "state": "low",
+          "entered": [],
+          "final": false,
+          "range": [
+            0.0,
+            10.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "level": 30.0
+          },
+          "step": {
+            "set": {
+              "level": 30
+            }
+          }
+        },
+        {
+          "state": "high",
+          "entered": [
+            "high"
+          ],
+          "final": false,
+          "range": [
+            10.0,
+            30.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "level": 60.0
+          },
+          "step": {
+            "set": {
+              "level": 60
+            }
+          }
+        },
+        {
+          "state": "low",
+          "entered": [
+            "low"
+          ],
+          "final": false,
+          "range": [
+            0.0,
+            10.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "level": 10.0
+          },
+          "step": {
+            "set": {
+              "level": 10
+            }
+          }
+        },
+        {
+          "state": "high",
+          "entered": [
+            "high"
+          ],
+          "final": false,
+          "range": [
+            10.0,
+            30.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "level": 60.0
+          },
+          "step": {
+            "set": {
+              "level": 60
+            }
+          }
+        },
+        {
+          "state": "done",
+          "entered": [
+            "done"
+          ],
+          "final": true,
+          "range": [
+            29.0,
+            30.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "level": 100.0
+          },
+          "step": {
+            "set": {
+              "level": 100
+            }
+          }
+        },
+        {
+          "state": "done",
+          "entered": [],
+          "final": true,
+          "range": [
+            29.0,
+            30.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "level": 0.0
+          },
+          "step": {
+            "set": {
+              "level": 0
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "counter-actions",
+      "covers": "clicks increment a counter; three clicks reach `burst`; a layer-scoped interaction ignores other layers",
+      "machine": {
+        "initial": "rest",
+        "inputs": [
+          {
+            "type": "Numeric",
+            "name": "n",
+            "value": 0
+          }
+        ],
+        "interactions": [
+          {
+            "type": "Click",
+            "layerName": "button",
+            "actions": [
+              {
+                "type": "Increment",
+                "inputName": "n",
+                "value": 1
+              }
+            ]
+          }
+        ],
+        "states": [
+          {
+            "name": "rest",
+            "type": "PlaybackState",
+            "segment": [
+              0,
+              5
+            ],
+            "transitions": [
+              {
+                "type": "Transition",
+                "toState": "burst",
+                "guards": [
+                  {
+                    "type": "Numeric",
+                    "inputName": "n",
+                    "conditionType": "GreaterThanOrEqual",
+                    "compareTo": 3
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "name": "burst",
+            "type": "PlaybackState",
+            "segment": [
+              5,
+              30
+            ],
+            "loop": false,
+            "mode": "Reverse",
+            "entryActions": [
+              {
+                "type": "SetNumeric",
+                "inputName": "n",
+                "value": 0
+              }
+            ]
+          }
+        ]
+      },
+      "initial": {
+        "state": "rest",
+        "entered": [
+          "rest"
+        ],
+        "final": false,
+        "range": [
+          0.0,
+          5.0
+        ],
+        "autoplay": true,
+        "inputs": {
+          "n": 0.0
+        }
+      },
+      "steps": [
+        {
+          "state": "rest",
+          "entered": [],
+          "final": false,
+          "range": [
+            0.0,
+            5.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "n": 1.0
+          },
+          "step": {
+            "post": "click",
+            "layer": "button"
+          }
+        },
+        {
+          "state": "rest",
+          "entered": [],
+          "final": false,
+          "range": [
+            0.0,
+            5.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "n": 1.0
+          },
+          "step": {
+            "post": "click",
+            "layer": "background"
+          }
+        },
+        {
+          "state": "rest",
+          "entered": [],
+          "final": false,
+          "range": [
+            0.0,
+            5.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "n": 2.0
+          },
+          "step": {
+            "post": "click",
+            "layer": "button"
+          }
+        },
+        {
+          "state": "burst",
+          "entered": [
+            "burst"
+          ],
+          "final": false,
+          "range": [
+            5.0,
+            30.0
+          ],
+          "autoplay": true,
+          "inputs": {
+            "n": 0.0
+          },
+          "step": {
+            "post": "click",
+            "layer": "button"
+          }
+        }
+      ]
+    }
+  ]
+}