feat: implemented playback looping; fixed an linter error in Toolbar.tsx

src/components/MainContent.tsx

@@ -448,8 +448,6 @@ const MainContent: React.FC<MainContentProps> = ({
     setActiveRegionId(null);
   };
 
-
-
   /**
    * Add keyboard event listener for region deletion
    * Handles Backspace (Windows) and Delete (Mac) keys to delete selected regions
@@ -622,6 +620,12 @@ const MainContent: React.FC<MainContentProps> = ({
                 originalSettings.loopingRange[1] !== currentLoopingRange[1];
 
               if (settingsChanged) {
+                // Stop playback if currently playing (get fresh state from store)
+                const { isPlaying: currentIsPlaying, stopPlaying: currentStopPlaying } = useProjectStore.getState();
+                if (currentIsPlaying) {
+                  currentStopPlaying();
+                }
+
                 // Revert to original state first (since we updated in real-time)
                 core.getCurrentProject().setIsLooping(originalSettings.isLooping);
                 core.getCurrentProject().setLoopingRange(originalSettings.loopingRange);

src/components/Toolbar.tsx

@@ -246,7 +246,7 @@ const Toolbar: React.FC = () => {
       const midiData = convertProjectToMidi(currentProject);
       
       // Create a downloadable blob
-      const blob = new Blob([midiData], { type: 'audio/midi' });
+      const blob = new Blob([midiData.buffer as ArrayBuffer], { type: 'audio/midi' });
       
       // Create a temporary download link
       const url = URL.createObjectURL(blob);

src/stores/projectStore.ts

@@ -573,7 +573,13 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     },
 
     toggleLoop: () => {
-      const { isLooping, loopingRange, maxBars } = get();
+      const { isLooping, loopingRange, maxBars, isPlaying, stopPlaying } = get();
+
+      // Stop playback if currently playing
+      if (isPlaying) {
+        stopPlaying();
+      }
+
       toggleLoop(isLooping, loopingRange, maxBars);
     },