plugin v1.0.1

assets/css/creator.css

@@ -243,6 +243,25 @@ body.sidebar-hidden .sample-browser { width: 0; min-width: 0; border-right: none
     repeating-linear-gradient(to right, #3a3e44 0, #3a3e44 1px, transparent 1px, transparent 100%);
 }
 
+/* Estilo para o Canvas de Onda ao Vivo dentro da Track Info */
+#live-waveform-canvas {
+    width: 100%;       /* Ocupa a largura do painel lateral */
+    height: 40px;      /* Altura fixa definida no JS */
+    background-color: #222; /* Fundo escuro para contraste */
+    border-radius: 4px;
+    margin-top: 8px;   /* Espaço entre os knobs e o canvas */
+    border: 1px solid var(--border-color);
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
+}
+
+/* Ajuste no container track-info para acomodar o novo elemento */
+.audio-track-lane .track-info {
+    /* Garante que o conteúdo flua verticalmente */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start; /* Alinha tudo ao topo */
+    gap: 5px;
+}
 /* Régua */
 .ruler-wrapper { display: flex; flex-shrink: 0; background-color: #383c42; border-bottom: 1px solid var(--border-color); }
 .ruler-spacer { width: var(--track-info-width); flex-shrink: 0; border-right: 2px solid var(--border-color); }

assets/js/creations/audio/audio_state.js

@@ -371,7 +371,18 @@ export function updateClipPan(clipId, pan) {
 
 export function addAudioTrackLane() {
   const newTrackName = `Pista de Áudio ${audioState.tracks.length + 1}`;
-  audioState.tracks.push({ id: Date.now(), name: newTrackName });
+  
+  // 1. Cria o objeto da pista
+  const newTrack = { id: Date.now(), name: newTrackName };
+  
+  // 2. Adiciona ao estado
+  audioState.tracks.push(newTrack);
+  
+  // 3. ATUALIZAÇÃO CRÍTICA: Renderiza a UI imediatamente para a pista aparecer
+  renderAudioEditor(); 
+  
+  // 4. ATUALIZAÇÃO CRÍTICA: Retorna a pista para que o recording.js possa usar o ID
+  return newTrack;
 }
 
 export function removeAudioClip(clipId) {

assets/js/creations/main.js

@@ -109,6 +109,23 @@ document.addEventListener("DOMContentLoaded", () => {
   const zoomInBtn = document.getElementById("zoom-in-btn");
   const zoomOutBtn = document.getElementById("zoom-out-btn");
   const deleteClipBtn = document.getElementById("delete-clip");
+  // Configuração do botão de Gravação
+  const recordBtn = document.getElementById('record-btn');
+
+  if (recordBtn) {
+    recordBtn.addEventListener('click', async () => {
+        // PASSO CRÍTICO: O navegador exige isso antes de gravar
+        if (Tone.context.state !== 'running') {
+            await Tone.start();
+            console.log("Audio Context iniciado via clique.");
+        }
+        
+        // Chama a função que você criou no recording.js
+        toggleRecording();
+    });
+    } else {
+        console.error("Botão de gravação (#record-btn) não encontrado no DOM.");
+    }
 
   //envia pattern pro editor de áudio
 

assets/js/creations/recording.js

@@ -102,12 +102,8 @@ async function _startRecording() {
     if (!success) return;
 
     try {
-        // --- MUDANÇA: Lógica movida para cá ---
-        // 1. Cria a pista de áudio *antes* de gravar
-        addAudioTrackLane(); //
-        
-        // 2. Pega o ID da pista recém-criada
-        const newTrack = appState.audio.tracks[appState.audio.tracks.length - 1]; //
+        const newTrack = addAudioTrackLane(); // Agora isso vai funcionar!
+        currentRecordingTrackId = newTrack.id;
         if (!newTrack) {
             console.error("Falha ao criar a nova pista de áudio no estado.");
             return;