diff --git a/app/src/components/AudioArea.vue b/app/src/components/AudioArea.vue
index 36063b7..0c80f05 100644
--- a/app/src/components/AudioArea.vue
+++ b/app/src/components/AudioArea.vue
@@ -6,6 +6,7 @@
 
 <script lang="ts">
 import {defineComponent, PropType, ref, watch} from "vue";
+import {BoundingBox} from "@/components/SVGContent.vue";
 
 export default defineComponent({
   name: "AudioArea",
@@ -64,14 +65,6 @@ export interface AudioAreaDef {
   src: string
 }
 
-export interface BoundingBox {
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  z: number
-}
-
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/app/src/components/SVGContent.vue b/app/src/components/SVGContent.vue
index 2c10b25..a7d2439 100644
--- a/app/src/components/SVGContent.vue
+++ b/app/src/components/SVGContent.vue
@@ -30,10 +30,20 @@
 import {defineComponent, onMounted, reactive, ref} from "vue";
 import createPanZoom, {PanZoom} from "panzoom";
 import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/VideoScroll.vue";
-import AudioArea, {AudioAreaDef, BoundingBox} from "@/components/AudioArea.vue";
+import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue";
 import Stats from "stats.js";
 import {rotate} from "@/utils";
 
+
+export interface BoundingBox {
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  z: number
+}
+
+
 export default defineComponent({
   name: "SVGContent",
   components: {AudioArea, VideoScroll},