fix: Animated

packages/timing/src/persea/index.js

@@ -1,3 +1,5 @@
+import {gatherWithLatus} from '@latus/core';
+
 import AnimationController from './controllers/animation';
 
 export {
@@ -9,5 +11,8 @@ export default {
     '@avocado/resource/persea.controllers': () => [
       AnimationController,
     ],
+    '@avocado/traits/components': gatherWithLatus(
+      require.context('./traits', false, /\.jsx$/),
+    ),
   },
 };

packages/timing/src/persea/traits/animated.jsx

@@ -2,17 +2,15 @@ import './animated.scss';
 
 import {join} from 'path';
 
-import {
-  Number,
-  Vector as VectorComponent,
-} from '@avocado/persea';
+import {Vector as VectorComponent} from '@avocado/math/persea';
+import {Number} from '@avocado/persea';
 import {JsonTabs, useJsonPatcher} from '@avocado/resource/persea';
 import {
   PropTypes,
   React,
 } from '@latus/react';
 
-import Animation from './animation';
+import Animation from './animated/animation';
 
 const Animated = ({json, path}) => {
   const patch = useJsonPatcher();
@@ -82,4 +80,4 @@ Animated.propTypes = {
 };
 Animated.propTypes = {};
 
-export default Animated;
+export default () => Animated;

packages/timing/src/persea/traits/animated/animation.jsx

@@ -18,15 +18,15 @@ import {
   useState,
 } from '@latus/react';
 
-import AnimationView from '../../animation-view';
-import AnimationVisualization from '../components/animation-visualization';
+import AnimationView from '../../../animation-view';
+import AnimationVisualization from '../../components/animation-visualization';
 
 const Animation = ({
   json,
 }) => {
   const fullJson = useFullJson(json);
   const latus = useLatus();
-  const [container, setContainer] = useState({});
+  const [container, setContainer] = useState(new Container());
   useEffect(() => {
     if (!fullJson) {
       return;