Amostras de áudio funcionais até o momento. Agulha de tempo, mute/solo e ajustado com a velocidade de reprodução

assets/css/style.css

@@ -10,18 +10,28 @@
   --text-dark: #888;
   --accent-green: #2ecc71;
   --accent-red: #d9534f;
+  --background-light: #4a4f57;
+  --background-lighter: #5c626b;
+  --border-color-dark: #1a1c1e;
+  --accent-blue: #3498db;
 }
 
 /* =============================================== */
-/* ESTILOS GLOBAIS E LAYOUT PRINCIPAL
+/* ESTILOS GLOBAIS E LAYOUT PRINCIPAL (CORRIGIDO)
 /* =============================================== */
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background-color: var(--bg-body);
   color: var(--text-light);
+  /* Retornamos ao layout com padding para compatibilidade */
   padding-left: 300px;
+  padding-top: 50px; /* Adiciona espaço para a toolbar fixa */
+  box-sizing: border-box;
   transition: padding-left .3s ease;
+  height: 100vh;
+  display: flex; /* Usamos flex no body para o main-content crescer */
+  flex-direction: column;
 }
 
 body.sidebar-hidden {
@@ -33,7 +43,13 @@ body.knob-dragging {
 }
 
 .main-content {
-  padding: 2rem;
+  padding: 1rem;
+  flex-grow: 1; /* Faz o conteúdo principal ocupar o espaço restante */
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: hidden; /* Evita que o conteúdo transborde */
+  height: 100%; /* Garante que o flexbox interno funcione */
 }
 
 /* =============================================== */
@@ -73,43 +89,13 @@ body.sidebar-hidden .sample-browser {
   padding: 10px;
 }
 
-.browser-content ul {
+.browser-content ul { list-style: none; padding-left: 15px; }
-  list-style: none;
+.browser-content li { padding: 5px; cursor: pointer; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
-  padding-left: 15px;
+.browser-content li:hover { background-color: var(--bg-editor); }
-}
+.browser-content li i { margin-right: 8px; width: 12px; color: var(--text-dark); transition: transform .2s; }
-
+.browser-content li.directory > ul { display: none; }
-.browser-content li {
+.browser-content li.directory.open > ul { display: block; }
-  padding: 5px;
+.browser-content li.directory.open > .fa-folder { transform: rotate(90deg); }
-  cursor: pointer;
-  border-radius: 3px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  user-select: none;
-}
-
-.browser-content li:hover {
-  background-color: var(--bg-editor);
-}
-
-.browser-content li i {
-  margin-right: 8px;
-  width: 12px;
-  color: var(--text-dark);
-  transition: transform .2s;
-}
-
-.browser-content li.directory > ul {
-  display: none;
-}
-
-.browser-content li.directory.open > ul {
-  display: block;
-}
-
-.browser-content li.directory.open > .fa-folder {
-  transform: rotate(90deg);
-}
 
 #sidebar-toggle {
   position: fixed;
@@ -150,27 +136,90 @@ body.sidebar-hidden #sidebar-toggle {
   background-color: var(--bg-toolbar);
   border-bottom: 2px solid var(--border-color);
   transition: left .3s ease;
+  height: 50px; /* Altura fixa para o cálculo do padding do body */
+  box-sizing: border-box;
 }
 
 body.sidebar-hidden .global-toolbar {
   left: 0;
 }
 
+/* =============================================== */
+/* NOVO: EDITOR DE AMOSTRAS DE ÁUDIO (AUDIO EDITOR)
+/* =============================================== */
 
-/* =============================================== */
+/* O container principal que substitui o .future-panel */
-/* EDITOR DE BATIDAS (BEAT EDITOR)
+.audio-editor {
-/* =============================================== */
+  height: 50%;
-.beat-editor {
+  background-color: var(--bg-editor);
-  background-color: var(--bg-body);
   border: 1px solid var(--border-color);
-  width: 100%;
+  border-radius: 8px;
-  max-width: 900px;
-  margin: auto;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
-  border-radius: 4px;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
+/* Container para as faixas de áudio, com scroll vertical */
+#audio-track-container {
+  overflow-y: auto;
+  flex-grow: 1;
+}
+
+/* Estilo para cada linha de faixa de áudio */
+.audio-track-lane {
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  background-color: var(--bg-editor);
+  border-bottom: 1px solid var(--bg-toolbar);
+  min-height: 40px; /* Altura mínima para cada faixa */
+  box-sizing: border-box;
+}
+
+
+/* =============================================== */
+/* ESTILOS DO EDITOR DE ÁUDIO (MARCADORES)
+/* =============================================== */
+
+/* Wrapper para a visualização do espectrograma, permite scroll horizontal */
+.spectrogram-view-wrapper {
+  flex-grow: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background-color: #2a2c30;
+  border-radius: 3px;
+}
+
+/* Garante que o grid possa conter elementos posicionados de forma absoluta */
+.spectrogram-view-grid {
+  position: relative;
+  display: inline-block; /* Faz o contêiner se ajustar à largura do canvas */
+  height: 100%;
+}
+
+/* Estilo para os números de compasso */
+.bar-marker {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%); /* Centraliza o número sobre a linha */
+  background-color: rgba(0, 0, 0, 0.5);
+  color: var(--text-dark);
+  padding: 1px 5px;
+  font-size: 0.7rem;
+  border-radius: 3px;
+  user-select: none; /* Impede que o texto seja selecionado */
+  z-index: 5; /* Garante que fique acima da forma de onda mas abaixo da agulha */
+}
+
+/* Mantém o canvas como block para evitar espaçamentos */
+.waveform-canvas {
+  display: block;
+}
+
+/* =============================================== */
+/* TOOLBAR DO EDITOR
+/* =============================================== */
 .editor-header {
   background-color: var(--bg-toolbar);
   padding: 4px 10px;
@@ -179,590 +228,264 @@ body.sidebar-hidden .global-toolbar {
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
 }
 
-.window-controls i {
+.window-controls i { margin-left: 12px; cursor: pointer; }
-  margin-left: 12px;
+
-  cursor: pointer;
+.editor-toolbar, .editor-header .playback-controls {
+  display: flex;
+  align-items: center;
+  gap: 15px;
 }
 
 .editor-toolbar {
   background-color: var(--bg-toolbar);
   padding: 5px 10px;
-  display: flex;
-  align-items: center;
-  gap: 15px;
   border-bottom: 2px solid var(--border-color);
+  flex-shrink: 0;
 }
 
-.editor-toolbar i {
+.editor-toolbar i, .editor-header .playback-controls i {
-  cursor: pointer;
+    cursor: pointer;
-  padding: 5px;
+    padding: 5px;
-  border-radius: 3px;
+    border-radius: 3px;
+    font-size: 1rem;
 }
 
-.editor-toolbar i.enabled {
+.editor-toolbar i.enabled { background-color: var(--bg-body); box-shadow: inset 0 0 2px #000; }
-  background-color: var(--bg-body);
-  box-shadow: inset 0 0 2px #000;
-}
 
-.pattern-selector {
+.pattern-manager { display: flex; align-items: center; gap: 10px; }
-  background-color: var(--bg-body);
+.pattern-selector { background-color: var(--bg-body); color: var(--text-light); padding: 5px 10px; border: 1px solid var(--border-color); font-size: .9rem; border-radius: 2px; }
-  padding: 5px 15px;
+.pattern-btn { background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-light); cursor: pointer; border-radius: 3px; width: 28px; height: 28px; font-size: 1.2rem; }
-  border: 1px solid var(--border-color);
-  flex-grow: 1;
-  font-size: .9rem;
-  border-radius: 2px;
-}
 
 /* =============================================== */
 /* FAIXAS (TRACK LANES) E SEQUENCIADOR
 /* =============================================== */
+#track-container {
+  overflow-y: auto;
+  flex-grow: 1;
+}
+
 .track-lane {
   display: flex;
   align-items: center;
   padding: 8px 10px;
   background-color: var(--bg-editor);
-  border: 2px dashed transparent;
+  border-bottom: 1px solid var(--bg-toolbar);
-  transition: border-color 0.2s;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  transition: border-color 0.2s, background-color 0.2s;
+}
+
+.track-lane.active-track {
+  background-color: #40454d;
 }
 
 .track-lane.drag-over {
   border-color: var(--accent-green);
 }
 
-.track-info {
+/* Localize a regra .track-mute e substitua por esta */
-  display: flex;
+.track-solo-btn {
-  align-items: center;
-  gap: 8px;
-  width: 180px;
-  flex-shrink: 0;
-}
-
-.track-info .fa-gear {
-  font-size: 1.2rem;
-  cursor: pointer;
-}
-
-.track-mute {
   width: 25px;
   height: 12px;
-  background-color: var(--accent-green);
+  background-color: var(--accent-red); /* Cor padrão: vermelho */
   border-radius: 6px;
   cursor: pointer;
   border: 1px solid var(--border-color);
   box-shadow: inset 0 0 2px #000;
+  transition: background-color 0.2s, opacity 0.2s;
 }
 
-.track-name {
+.track-solo-btn:hover {
-  color: var(--accent-red);
+  opacity: 0.8;
-  font-weight: 700;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
-.track-controls {
+/* Quando solado (ativo), o botão fica verde */
-  display: flex;
+.track-solo-btn.active {
-  gap: 5px;
-  margin: 0 10px;
-  padding-left: 10px;
-  border-left: 1px solid var(--bg-toolbar);
-  flex-shrink: 0;
-}
-
-.knob-container {
-  text-align: center;
-  font-size: .7rem;
-  color: var(--text-dark);
-}
-
-.knob {
-  width: 28px;
-  height: 28px;
-  background-color: var(--bg-toolbar);
-  border-radius: 50%;
-  border: 1px solid var(--border-color);
-  margin-bottom: 2px;
-  cursor: grab;
-  box-shadow: inset 0 0 4px #222;
-  position: relative;
-}
-
-.knob:active {
-  cursor: grabbing;
-}
-
-.knob-indicator {
-  width: 2px;
-  height: 8px;
-  background-color: var(--text-light);
-  position: absolute;
-  top: 2px;
-  left: 50%;
-  transform-origin: bottom center;
-  transform: translateX(-50%) rotate(0deg);
-  border-radius: 1px;
-}
-
-.step-sequencer-wrapper {
-  flex-grow: 1;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-bottom: 8px;
-}
-
-.step-sequencer {
-  display: flex;
-  gap: 4px;
-}
-
-.step-sequencer-wrapper::-webkit-scrollbar {
-  height: 8px;
-}
-.step-sequencer-wrapper::-webkit-scrollbar-track {
-  background: var(--border-color);
-  border-radius: 4px;
-}
-.step-sequencer-wrapper::-webkit-scrollbar-thumb {
-  background: var(--bg-toolbar);
-  border-radius: 4px;
-}
-.step-sequencer-wrapper::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
-/* (CORREÇÃO) CSS para as marcações de compasso */
-.step-wrapper {
-  position: relative;
-}
-
-.step-marker {
-  position: absolute;
-  top: -16px;
-  left: 1px;
-  font-size: .6rem;
-  color: var(--text-dark);
-  user-select: none;
-}
-
-.step {
-  width: 28px;
-  height: 28px;
-  background-color: #2a2a2a;
-  border: 1px solid #4a4a4a;
-  border-radius: 2px;
-  cursor: pointer;
-  transition: background-color .1s, transform 0.1s;
-  flex-shrink: 0;
-}
-
-.step-dark {
-  background-color: #1e1e1e;
-}
-
-.step:hover {
-  background-color: #555;
-  border-color: #888;
-}
-
-.step.active {
   background-color: var(--accent-green);
-  border: 1px solid #fff;
+  opacity: 1;
-  box-shadow: 0 0 8px var(--accent-green);
 }
 
-.step.playing {
+.track-info { display: flex; align-items: center; gap: 8px; width: 180px; flex-shrink: 0; }
-  transform: scale(1.1);
+.track-info .fa-gear { font-size: 1.2rem; cursor: pointer; }
-  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.8);
+.track-mute { width: 25px; height: 12px; background-color: var(--accent-green); border-radius: 6px; cursor: pointer; border: 1px solid var(--border-color); box-shadow: inset 0 0 2px #000; transition: background-color 0.2s, opacity 0.2s; }
+.track-mute:hover {
+  opacity: 0.8;
 }
+.track-mute.active {
+  background-color: var(--text-dark);
+  opacity: 0.7;
+}
+.track-name { color: var(--accent-red); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.track-controls { display: flex; gap: 5px; margin: 0 10px; padding-left: 10px; border-left: 1px solid var(--bg-toolbar); flex-shrink: 0; }
+.knob-container { text-align: center; font-size: .7rem; color: var(--text-dark); }
+.knob { width: 28px; height: 28px; background-color: var(--bg-toolbar); border-radius: 50%; border: 1px solid var(--border-color); margin-bottom: 2px; cursor: grab; box-shadow: inset 0 0 4px #222; position: relative; }
+.knob:active { cursor: grabbing; }
+.knob-indicator { width: 2px; height: 8px; background-color: var(--text-light); position: absolute; top: 2px; left: 50%; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); border-radius: 1px; }
 
+.step-sequencer-wrapper { flex-grow: 1; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
+.step-sequencer { display: flex; gap: 4px; }
+.step-sequencer-wrapper::-webkit-scrollbar { height: 8px; }
+.step-sequencer-wrapper::-webkit-scrollbar-track { background: var(--border-color); border-radius: 4px; }
+.step-sequencer-wrapper::-webkit-scrollbar-thumb { background: var(--bg-toolbar); border-radius: 4px; }
+.step-sequencer-wrapper::-webkit-scrollbar-thumb:hover { background: #555; }
+.step-wrapper { position: relative; }
+.step-marker { position: absolute; top: -16px; left: 1px; font-size: .6rem; color: var(--text-dark); user-select: none; }
+.step { width: 28px; height: 28px; background-color: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 2px; cursor: pointer; transition: background-color .1s, transform 0.1s; flex-shrink: 0; }
+.step-dark { background-color: #1e1e1e; }
+.step:hover { background-color: #555; border-color: #888; }
+.step.active { background-color: var(--accent-green); border: 1px solid #fff; box-shadow: 0 0 8px var(--accent-green); }
+.step.playing { transform: scale(1.1); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.8); }
 
 /* =============================================== */
 /* CONTROLES E INPUTS
 /* =============================================== */
-.interactive-input-container {
+.interactive-input-container { display: flex; align-items: center; justify-content: center; gap: 4px; }
-  display: flex;
+.compasso-group { display: flex; align-items: center; gap: 4px; }
-  align-items: center;
+.value-input { background: 0 0; border: 0; outline: 0; color: var(--accent-green); font-weight: 700; font-size: 1.4rem; font-family: Courier New, Courier, monospace; text-align: center; padding: 0; width: 55px; }
-  justify-content: center;
+.compasso-input { width: 25px; }
-  gap: 4px;
+.compasso-separator { color: var(--accent-green); font-weight: 700; font-size: 1.4rem; font-family: Courier New, Courier, monospace; margin: 0 2px; }
-}
+.value-input::-webkit-outer-spin-button, .value-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.value-input[type=number] { -moz-appearance: textfield; }
+.adjust-btn { background: 0 0; border: 0; color: var(--text-dark); font-size: 1rem; font-weight: 700; cursor: pointer; padding: 0 5px; transition: color .2s; line-height: 1; }
+.adjust-btn:hover { color: #fff; }
+.control-group { display: flex; align-items: center; gap: 15px; padding: 0 10px; }
+.control-group i { font-size: 1.2rem; cursor: pointer; color: var(--text-light); transition: color .2s; }
+.control-group i:hover { color: #fff; }
+.fa-play, .fa-pause { color: var(--accent-green) !important; }
+.divider { width: 1px; height: 25px; background-color: var(--border-color); }
+.info-display-group { display: flex; align-items: center; gap: 5px; }
+.info-display { background-color: #1a1c1e; padding: 5px 8px; border-radius: 3px; text-align: center; }
+.info-display .label { color: var(--text-dark); font-size: .6rem; text-transform: uppercase; }
+.spacer { flex-grow: 1; }
+#metronome-btn { background: 0 0; border: 1px solid var(--text-dark); color: var(--accent-green); font-family: inherit; font-weight: 700; font-size: .8rem; padding: 5px 10px; border-radius: 3px; cursor: pointer; transition: all .2s; }
+#metronome-btn:hover { border-color: var(--text-light); background-color: var(--bg-editor); }
+#metronome-btn.active { background-color: var(--accent-green); color: var(--bg-body); border-color: var(--accent-green); }
 
-.compasso-group {
+.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 2000; display: flex; justify-content: center; align-items: center; padding: 1rem; visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s; }
-  display: flex;
+.modal-overlay.visible { visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.3s; }
-  align-items: center;
+.modal-content { background-color: var(--bg-body); padding: 1.5rem 2rem; border-radius: 6px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); width: 100%; max-width: 500px; position: relative; display: flex; flex-direction: column; gap: 1.5rem; max-height: 90vh; }
-  gap: 4px;
+.modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; border: none; background: none; }
-}
+.modal-close:hover { color: var(--text-light); }
+.modal-title { margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bg-toolbar); color: var(--text-light); text-align: center; flex-shrink: 0; }
+.modal-section { margin: 0; }
+.modal-section h3 { margin-top: 0; margin-bottom: 0.8rem; font-size: 1rem; color: var(--text-light); }
+#server-projects-list { max-height: 250px; overflow-y: auto; background-color: var(--bg-toolbar); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.5rem; min-height: 50px; }
+#server-projects-list .project-item { background-color: var(--bg-editor); padding: 10px 15px; border-radius: 4px; margin-bottom: 8px; cursor: pointer; transition: background-color 0.2s, color 0.2s; border: 1px solid transparent; }
+#server-projects-list .project-item:last-child { margin-bottom: 0; }
+#server-projects-list .project-item:hover { background-color: var(--bg-body); color: #fff; border-color: var(--accent-green); }
+.modal-button { background-color: var(--bg-toolbar); color: var(--text-light); border: 1px solid var(--border-color); padding: 0.8rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s, border-color 0.2s; width: 100%; text-align: center; }
+.modal-button:hover { background-color: #4a4f57; border-color: #333; }
 
-.value-input {
+.file-menu-container { position: relative; }
-  background: 0 0;
+.toolbar-btn { background-color: var(--background-light); color: var(--text-light); border: 1px solid var(--border-color); border-radius: 3px; padding: 5px 10px; cursor: pointer; font-family: inherit; font-size: 0.8rem; }
-  border: 0;
+.toolbar-btn:hover { background-color: var(--background-lighter); }
-  outline: 0;
+.file-menu-dropdown { position: absolute; top: 100%; left: 0; background-color: var(--background-lighter); border: 1px solid var(--border-color-dark); border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); min-width: 200px; z-index: 1000; overflow: hidden; display: flex; flex-direction: column; }
-  color: var(--accent-green);
+.file-menu-dropdown.hidden { display: none; }
-  font-weight: 700;
+.file-menu-dropdown a { color: var(--text-light); padding: 8px 12px; text-decoration: none; display: block; font-size: 0.9rem; }
-  font-size: 1.4rem;
+.file-menu-dropdown a:hover { background-color: var(--accent-blue); color: white; }
-  font-family: Courier New, Courier, monospace;
+.menu-divider { height: 1px; background-color: var(--border-color); margin: 4px 0; }
-  text-align: center;
-  padding: 0;
-  width: 55px;
-}
-
-.compasso-input {
-  width: 25px;
-}
-
-.compasso-separator {
-  color: var(--accent-green);
-  font-weight: 700;
-  font-size: 1.4rem;
-  font-family: Courier New, Courier, monospace;
-  margin: 0 2px;
-}
-
-.value-input::-webkit-outer-spin-button,
-.value-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.value-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.adjust-btn {
-  background: 0 0;
-  border: 0;
-  color: var(--text-dark);
-  font-size: 1rem;
-  font-weight: 700;
-  cursor: pointer;
-  padding: 0 5px;
-  transition: color .2s;
-  line-height: 1;
-}
-
-.adjust-btn:hover {
-  color: #fff;
-}
-
-.control-group {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding: 0 10px;
-}
-
-.control-group i {
-  font-size: 1.2rem;
-  cursor: pointer;
-  color: var(--text-light);
-  transition: color .2s;
-}
-
-.control-group i:hover {
-  color: #fff;
-}
-
-.fa-play,
-.fa-pause {
-  color: var(--accent-green) !important;
-}
-
-.divider {
-  width: 1px;
-  height: 25px;
-  background-color: var(--border-color);
-}
-
-.info-display-group {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.info-display {
-  background-color: #1a1c1e;
-  padding: 5px 8px;
-  border-radius: 3px;
-  text-align: center;
-}
-
-.info-display .label {
-  color: var(--text-dark);
-  font-size: .6rem;
-  text-transform: uppercase;
-}
-
-.spacer {
-  flex-grow: 1;
-}
-
-#metronome-btn {
-  background: 0 0;
-  border: 1px solid var(--text-dark);
-  color: var(--accent-green);
-  font-family: inherit;
-  font-weight: 700;
-  font-size: .8rem;
-  padding: 5px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  transition: all .2s;
-}
-
-#metronome-btn:hover {
-  border-color: var(--text-light);
-  background-color: var(--bg-editor);
-}
-
-#metronome-btn.active {
-  background-color: var(--accent-green);
-  color: var(--bg-body);
-  border-color: var(--accent-green);
-}
-
-/* =============================================== */
-/* MODAL (CAIXA DE DIÁLOGO)
-/* =============================================== */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 2000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility 0s 0.3s, opacity 0.3s;
-}
-
-.modal-overlay.visible {
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 0s, opacity 0.3s;
-}
-
-.modal-content {
-  background-color: var(--bg-body);
-  padding: 1.5rem 2rem;
-  border-radius: 6px;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-  width: 100%;
-  max-width: 500px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  max-height: 90vh;
-}
-
-.modal-close {
-  position: absolute;
-  top: 10px;
-  right: 15px;
-  font-size: 1.5rem;
-  color: var(--text-dark);
-  cursor: pointer;
-  border: none;
-  background: none;
-}
-
-.modal-close:hover {
-  color: var(--text-light);
-}
-
-.modal-title {
-  margin: 0;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--bg-toolbar);
-  color: var(--text-light);
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.modal-section {
-  margin: 0;
-}
-
-.modal-section h3 {
-  margin-top: 0;
-  margin-bottom: 0.8rem;
-  font-size: 1rem;
-  color: var(--text-light);
-}
-
-#server-projects-list {
-  max-height: 250px;
-  overflow-y: auto;
-  background-color: var(--bg-toolbar);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 0.5rem;
-  min-height: 50px;
-}
-
-#server-projects-list .project-item {
-  background-color: var(--bg-editor);
-  padding: 10px 15px;
-  border-radius: 4px;
-  margin-bottom: 8px;
-  cursor: pointer;
-  transition: background-color 0.2s, color 0.2s;
-  border: 1px solid transparent;
-}
-#server-projects-list .project-item:last-child {
-  margin-bottom: 0;
-}
-#server-projects-list .project-item:hover {
-  background-color: var(--bg-body);
-  color: #fff;
-  border-color: var(--accent-green);
-}
-
-.modal-button {
-  background-color: var(--bg-toolbar);
-  color: var(--text-light);
-  border: 1px solid var(--border-color);
-  padding: 0.8rem 1.5rem;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.2s, border-color 0.2s;
-  width: 100%;
-  text-align: center;
-}
-
-.modal-button:hover {
-  background-color: #4a4f57;
-  border-color: #333;
-}
 
 
 /* =============================================== */
-/* ESTILOS RESPONSIVOS
+/* ESTILOS RESPONSIVOS (MELHORADO)
 /* =============================================== */
+@media (max-width: 1200px) {
+  .info-display-group {
+    gap: 2px;
+  }
+  .info-display {
+    padding: 4px 6px;
+  }
+  .value-input {
+    font-size: 1.2rem;
+    width: 45px;
+  }
+  .compasso-input {
+    width: 20px;
+  }
+}
 
 @media (max-width: 992px) {
-  .main-content {
+  .global-toolbar {
-      padding: 1.5rem;
+    gap: 10px;
+    flex-wrap: wrap;
+    height: auto; /* Permite que a toolbar cresça se o conteúdo quebrar linha */
+    padding-bottom: 10px;
   }
-  .beat-editor {
+  body {
-      max-width: 100%;
+      padding-top: 80px; /* Aumenta o espaço para a toolbar maior */
+  }
+  .info-display-group {
+    order: 3; /* Move o grupo de informações para o final da toolbar */
+    width: 100%;
+    justify-content: space-around;
+  }
+  .spacer {
+    display: none;
   }
 }
 
 @media (max-width: 768px) {
   body {
-      padding-left: 0 !important;
+    padding-left: 0 !important;
-  }
-  .main-content {
-      padding: 1rem;
   }
   .sample-browser {
-      transform: translateX(-100%);
+    transform: translateX(-100%);
-      width: 280px;
+    position: fixed; /* Volta a ser fixo para deslizar por cima */
+    width: 280px;
   }
   body:not(.sidebar-hidden) .sample-browser {
-      transform: translateX(0);
+    transform: translateX(0);
   }
   #sidebar-toggle {
-      left: 5px;
+    left: 5px;
+    transform: translateX(0);
+    position: fixed; /* Garante que o botão fique visível */
   }
   .global-toolbar {
-      left: 0;
+    left: 0;
-      padding-left: 45px;
+    padding-left: 45px;
   }
-  .editor-toolbar,
+  .main-content {
-  .control-group {
+      padding: 10px;
-      flex-wrap: wrap;
+      padding-top: 85px; /* Ajusta o padding para a toolbar fixa */
-      gap: 10px;
   }
-  .track-lane {
+  .track-lane, .audio-track-lane {
-      flex-direction: column;
+    flex-direction: column;
-      align-items: stretch;
+    align-items: stretch;
-      gap: 15px;
+    gap: 15px;
-      padding: 15px;
+    padding: 15px;
   }
   .track-info,
   .track-controls {
-      width: 100%;
+    width: 100%;
   }
   .track-controls {
-      border-left: none;
+    border-left: none;
-      padding-left: 0;
+    padding-left: 0;
-      justify-content: space-around;
+    justify-content: space-around;
   }
   .step-sequencer-wrapper {
-      width: 100%;
+    width: 100%;
-  }
-  .modal-content {
-      max-width: 95vw;
-      padding: 1rem 1.5rem;
-      gap: 1rem;
   }
 }
 
-/* --- ESTILOS PARA O MENU ARQUIVO --- */
+.spectrogram-view-wrapper {
-
+  position: relative; /* Essencial para o posicionamento absoluto do filho */
-.file-menu-container {
+  overflow: hidden;   /* Garante que a agulha não saia dos limites */
-  position: relative; /* Essencial para o posicionamento do dropdown */
 }
 
-.toolbar-btn {
+.playhead {
-  background-color: var(--background-light);
-  color: var(--text-light);
-  border: 1px solid var(--border-color);
-  border-radius: 3px;
-  padding: 5px 10px;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 0.8rem;
-}
-
-.toolbar-btn:hover {
-  background-color: var(--background-lighter);
-}
-
-.file-menu-dropdown {
   position: absolute;
-  top: 100%;
+  top: 0;
-  left: 0;
+  left: 0; /* A posição será atualizada via JavaScript */
-  background-color: var(--background-lighter);
+  width: 2px;
-  border: 1px solid var(--border-color-dark);
+  height: 100%;
-  border-radius: 4px;
+  background-color: var(--accent-red, #e74c3c); /* Use uma cor de destaque */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 10;
-  min-width: 200px;
+  pointer-events: none; /* Impede que a agulha intercepte cliques do mouse */
-  z-index: 1000;
+  transition: background-color 0.3s; /* Efeito suave ao parar */
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.file-menu-dropdown.hidden {
-  display: none;
-}
-
-.file-menu-dropdown a {
-  color: var(--text-light);
-  padding: 8px 12px;
-  text-decoration: none;
-  display: block;
-  font-size: 0.9rem;
-}
-
-.file-menu-dropdown a:hover {
-  background-color: var(--accent-blue);
-  color: white;
-}
-
-.menu-divider {
-  height: 1px;
-  background-color: var(--border-color);
-  margin: 4px 0;
 }

assets/js/creations/audio.js

@@ -1,7 +1,8 @@
 // js/audio.js
 import { appState } from "./state.js";
-import { highlightStep } from "./ui.js";
+import { highlightStep, updateAudioEditorUI, updatePlayheadVisual, resetPlayheadVisual } from "./ui.js";
 import { getTotalSteps } from "./utils.js";
+import { PIXELS_PER_STEP } from "./config.js";
 
 let audioContext;
 let mainGainNode;
@@ -30,6 +31,7 @@ export function initializeAudioContext() {
   }
 }
 
+// ... (funções de master volume/pan, formatTime, metronome, sample player, tick, etc. permanecem iguais)...
 export function updateMasterVolume(volume) {
   if (mainGainNode) {
     mainGainNode.gain.setValueAtTime(volume, audioContext.currentTime);
@@ -120,7 +122,6 @@ function tick() {
   appState.tracks.forEach((track) => {
     if (!track.patterns || track.patterns.length === 0) return;
     
-    // Usa o índice GLOBAL para saber qual pattern tocar, sincronizando com a UI.
     const activePattern = track.patterns[appState.activePatternIndex];
 
     if (activePattern && activePattern.steps[appState.currentStep] && track.samplePath) {
@@ -190,4 +191,104 @@ export function togglePlayback() {
     appState.currentStep = 0;
     startPlayback();
   }
+}
+
+function animationLoop() {
+    if (!appState.isAudioEditorPlaying || !audioContext) return;
+    const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
+    const stepsPerSecond = (bpm / 60) * 4;
+    const pixelsPerSecond = stepsPerSecond * PIXELS_PER_STEP;
+    const totalElapsedTime = (audioContext.currentTime - appState.audioEditorStartTime) + appState.audioEditorPlaybackTime;
+    const newPositionPx = totalElapsedTime * pixelsPerSecond;
+    const maxDuration = appState.audioTracks.reduce((max, track) => (track.audioBuffer && track.audioBuffer.duration > max) ? track.audioBuffer.duration : max, 0);
+    if (totalElapsedTime >= maxDuration && maxDuration > 0) {
+        stopAudioEditorPlayback();
+        appState.audioEditorPlaybackTime = 0;
+        resetPlayheadVisual();
+        return;
+    }
+    updatePlayheadVisual(newPositionPx);
+    appState.audioEditorAnimationId = requestAnimationFrame(animationLoop);
+}
+
+// --- LÓGICA DE REPRODUÇÃO ATUALIZADA ---
+export function startAudioEditorPlayback() {
+  if (appState.isAudioEditorPlaying || appState.audioTracks.length === 0) return;
+  initializeAudioContext();
+
+  appState.isAudioEditorPlaying = true;
+  appState.activeAudioSources = [];
+  updateAudioEditorUI();
+
+  const startTime = audioContext.currentTime;
+  appState.audioEditorStartTime = startTime;
+  
+  // Verifica se existe alguma faixa no modo "solo"
+  const isAnyTrackSoloed = appState.audioTracks.some(t => t.isSoloed);
+
+  appState.audioTracks.forEach(track => {
+    // Condições para tocar:
+    // 1. A faixa deve ter um buffer de áudio.
+    // 2. A faixa não pode estar mutada.
+    const canPlay = track.audioBuffer && !track.isMuted;
+    
+    // 3. Lógica de solo:
+    //    - Se houver alguma faixa solada, esta faixa TAMBÉM deve estar solada.
+    //    - Se NENHUMA faixa estiver solada, todas podem tocar.
+    const shouldPlay = isAnyTrackSoloed ? track.isSoloed : true;
+
+    if (canPlay && shouldPlay) {
+      if (appState.audioEditorPlaybackTime >= track.audioBuffer.duration) return;
+      
+      const source = audioContext.createBufferSource();
+      source.buffer = track.audioBuffer;
+      source.connect(track.gainNode);
+      source.start(startTime, appState.audioEditorPlaybackTime);
+      appState.activeAudioSources.push(source);
+    }
+  });
+  
+  if (appState.activeAudioSources.length > 0) {
+      if (appState.audioEditorAnimationId) {
+          cancelAnimationFrame(appState.audioEditorAnimationId);
+      }
+      animationLoop();
+  } else {
+      appState.isAudioEditorPlaying = false;
+      updateAudioEditorUI();
+  }
+}
+
+export function stopAudioEditorPlayback() {
+  if (!appState.isAudioEditorPlaying) return;
+  const elapsedTime = (audioContext.currentTime - appState.audioEditorStartTime);
+  appState.audioEditorPlaybackTime += elapsedTime;
+  if (appState.audioEditorAnimationId) {
+    cancelAnimationFrame(appState.audioEditorAnimationId);
+    appState.audioEditorAnimationId = null;
+  }
+  appState.activeAudioSources.forEach(source => {
+    try {
+      source.stop(0);
+    } catch (e) { /* Ignora erros */ }
+  });
+  appState.activeAudioSources = [];
+  appState.isAudioEditorPlaying = false;
+  updateAudioEditorUI();
+}
+
+export function seekAudioEditor(newTime) {
+    const wasPlaying = appState.isAudioEditorPlaying;
+    if (wasPlaying) {
+        stopAudioEditorPlayback();
+    }
+    appState.audioEditorPlaybackTime = newTime;
+    const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
+    const stepsPerSecond = (bpm / 60) * 4;
+    const pixelsPerSecond = stepsPerSecond * PIXELS_PER_STEP;
+    const newPositionPx = newTime * pixelsPerSecond;
+    updatePlayheadVisual(newPositionPx);
+    if (wasPlaying) {
+        startAudioEditorPlayback();
+    }
 }

assets/js/creations/config.js

@@ -7,3 +7,8 @@ export const NOTE_LENGTH = 12;
 // Constantes para os valores padrão dos knobs
 export const DEFAULT_VOLUME = 0.8;
 export const DEFAULT_PAN = 0.0;
+
+// --- ADICIONADO ---
+// Constantes para o layout do editor de áudio
+export const PIXELS_PER_STEP = 32; // Cada step (1/16) terá 32px de largura
+export const PIXELS_PER_BAR = 512; // 16 steps * 32px/step = 512px por compasso (bar)

assets/js/creations/main.js

@@ -11,6 +11,8 @@ import {
   initializeAudioContext,
   updateMasterVolume,
   updateMasterPan,
+  startAudioEditorPlayback,
+  stopAudioEditorPlayback,
 } from "./audio.js";
 import { handleFileLoad, generateMmpFile } from "./file.js";
 import {
@@ -33,6 +35,8 @@ document.addEventListener("DOMContentLoaded", () => {
   const removeInstrumentBtn = document.getElementById("remove-instrument-btn");
   const playBtn = document.getElementById("play-btn");
   const stopBtn = document.getElementById("stop-btn");
+  const audioEditorPlayBtn = document.getElementById("audio-editor-play-btn");
+  const audioEditorStopBtn = document.getElementById("audio-editor-stop-btn");
   const rewindBtn = document.getElementById("rewind-btn");
   const metronomeBtn = document.getElementById("metronome-btn");
   const mmpFileInput = document.getElementById("mmp-file-input");
@@ -248,6 +252,17 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 
+  // Listeners para os controles do editor de áudio
+  audioEditorPlayBtn.addEventListener("click", () => {
+      if (appState.isAudioEditorPlaying) {
+          stopAudioEditorPlayback();
+      } else {
+          startAudioEditorPlayback();
+      }
+  });
+
+  audioEditorStopBtn.addEventListener("click", stopAudioEditorPlayback);
+
   loadAndRenderSampleBrowser();
   renderApp();
   setupMasterKnobs();

assets/js/creations/state.js

@@ -5,18 +5,25 @@ import {
   getAudioContext,
   getMainGainNode,
 } from "./audio.js";
-import { renderApp } from "./ui.js";
+import { renderApp, renderAudioEditor } from "./ui.js";
 import { getTotalSteps } from "./utils.js";
 
 export let appState = {
   tracks: [],
+  audioTracks: [],
   activeTrackId: null,
-  activePatternIndex: 0, // <-- VOLTOU A SER GLOBAL
+  activePatternIndex: 0,
   isPlaying: false,
+  isAudioEditorPlaying: false,
+  activeAudioSources: [],
+  audioEditorStartTime: 0,
+  audioEditorAnimationId: null,
+  audioEditorPlaybackTime: 0, 
   playbackIntervalId: null,
   currentStep: 0,
   metronomeEnabled: false,
   originalXmlDoc: null,
+  currentBeatBasslineName: 'Novo Projeto',
   masterVolume: DEFAULT_VOLUME,
   masterPan: DEFAULT_PAN,
 };
@@ -37,6 +44,54 @@ export async function loadAudioForTrack(track) {
   return track;
 }
 
+export function addAudioTrack(samplePath) {
+    initializeAudioContext();
+    const audioContext = getAudioContext();
+    const mainGainNode = getMainGainNode();
+
+    const newAudioTrack = {
+        id: Date.now() + Math.random(),
+        name: samplePath.split('/').pop(),
+        samplePath: samplePath,
+        audioBuffer: null,
+        volume: DEFAULT_VOLUME,
+        pan: DEFAULT_PAN,
+        isMuted: false,
+        isSoloed: false, // <-- ADICIONADO: Começa como não-solada
+        gainNode: audioContext.createGain(),
+        pannerNode: audioContext.createStereoPanner(),
+    };
+
+    newAudioTrack.gainNode.connect(newAudioTrack.pannerNode);
+    newAudioTrack.pannerNode.connect(mainGainNode);
+    newAudioTrack.gainNode.gain.value = newAudioTrack.volume;
+    newAudioTrack.pannerNode.pan.value = newAudioTrack.pan;
+
+    appState.audioTracks.push(newAudioTrack);
+    
+    loadAudioForTrack(newAudioTrack).then(() => {
+        renderAudioEditor();
+    });
+}
+
+// A função de mute agora será a de solo.
+export function toggleAudioTrackSolo(trackId) {
+    const track = appState.audioTracks.find(t => t.id == trackId);
+    if (track) {
+        track.isSoloed = !track.isSoloed;
+        renderAudioEditor(); // Re-renderiza para mostrar a nova cor
+    }
+}
+
+// Mantemos a função de mute caso precise no futuro, mas ela não está conectada ao botão.
+export function toggleAudioTrackMute(trackId) {
+    const track = appState.audioTracks.find(t => t.id == trackId);
+    if (track) {
+        track.isMuted = !track.isMuted;
+        renderAudioEditor();
+    }
+}
+
 export function addTrackToState() {
   initializeAudioContext();
   const audioContext = getAudioContext();
@@ -52,7 +107,7 @@ export function addTrackToState() {
     patterns: referenceTrack 
       ? referenceTrack.patterns.map(p => ({ name: p.name, steps: new Array(p.steps.length).fill(false), pos: p.pos }))
       : [{ name: "Pattern 1", steps: new Array(totalSteps).fill(false), pos: 0 }],
-    // activePatternIndex foi removido daqui
+    activePatternIndex: 0,
     volume: DEFAULT_VOLUME,
     pan: DEFAULT_PAN,
     gainNode: audioContext.createGain(),
@@ -64,18 +119,12 @@ export function addTrackToState() {
   newTrack.pannerNode.pan.value = newTrack.pan;
 
   appState.tracks.push(newTrack);
-  if (!appState.activeTrackId) {
-      appState.activeTrackId = newTrack.id;
-  }
   renderApp();
 }
 
 export function removeLastTrackFromState() {
   if (appState.tracks.length > 0) {
-    const removedTrack = appState.tracks.pop();
+    appState.tracks.pop();
-    if (appState.activeTrackId === removedTrack.id) {
-        appState.activeTrackId = appState.tracks[0]?.id || null;
-    }
     renderApp();
   }
 }
@@ -87,18 +136,14 @@ export async function updateTrackSample(trackId, samplePath) {
     track.name = samplePath.split("/").pop();
     track.audioBuffer = null;
     await loadAudioForTrack(track);
-    const trackLane = document.querySelector(`.track-lane[data-track-id="${trackId}"] .track-name`);
+    renderApp();
-    if (trackLane) {
-      trackLane.textContent = track.name;
-    }
   }
 }
 
 export function toggleStepState(trackId, stepIndex) {
   const track = appState.tracks.find((t) => t.id == trackId);
   if (track && track.patterns && track.patterns.length > 0) {
-    // Usa o índice GLOBAL para saber qual pattern modificar
+    const activePattern = track.patterns[track.activePatternIndex];
-    const activePattern = track.patterns[appState.activePatternIndex];
     if (activePattern && activePattern.steps.length > stepIndex) {
       activePattern.steps[stepIndex] = !activePattern.steps[stepIndex];
     }
@@ -106,7 +151,7 @@ export function toggleStepState(trackId, stepIndex) {
 }
 
 export function updateTrackVolume(trackId, volume) {
-  const track = appState.tracks.find((t) => t.id == trackId);
+  const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
   if (track) {
     const clampedVolume = Math.max(0, Math.min(1.5, volume));
     track.volume = clampedVolume;
@@ -117,7 +162,7 @@ export function updateTrackVolume(trackId, volume) {
 }
 
 export function updateTrackPan(trackId, pan) {
-  const track = appState.tracks.find((t) => t.id == trackId);
+  const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
   if (track) {
     const clampedPan = Math.max(-1, Math.min(1, pan));
     track.pan = clampedPan;

assets/js/creations/ui.js

@@ -5,17 +5,34 @@ import {
   updateTrackSample,
   updateTrackVolume,
   updateTrackPan,
+  addAudioTrack,
+  toggleAudioTrackSolo, 
 } from "./state.js";
-import { playSample, stopPlayback } from "./audio.js";
+import { playSample, stopPlayback, seekAudioEditor } from "./audio.js";
 import { getTotalSteps } from "./utils.js";
 import { loadProjectFromServer } from "./file.js";
+import { drawWaveform } from "./waveform.js";
+import { PIXELS_PER_STEP, PIXELS_PER_BAR } from "./config.js";
+
+export function updateAudioEditorUI() {
+    const playBtn = document.getElementById('audio-editor-play-btn');
+    if (playBtn) {
+        if (appState.isAudioEditorPlaying) {
+            playBtn.classList.remove('fa-play');
+            playBtn.classList.add('fa-pause');
+        } else {
+            playBtn.classList.remove('fa-pause');
+            playBtn.classList.add('fa-play');
+        }
+    }
+}
 
 let samplePathMap = {};
 const globalPatternSelector = document.getElementById('global-pattern-selector');
 
 if (globalPatternSelector) {
     globalPatternSelector.addEventListener('change', () => {
-        // A linha stopPlayback() foi REMOVIDA daqui, permitindo a troca em tempo real.
+        stopPlayback();
         appState.activePatternIndex = parseInt(globalPatternSelector.value, 10);
         
         const firstTrack = appState.tracks[0];
@@ -105,6 +122,137 @@ function buildSamplePathMap(tree, currentPath) {
   }
 }
 
+export function renderAudioEditor() {
+    const audioEditor = document.querySelector('.audio-editor');
+    const audioTrackContainer = document.getElementById('audio-track-container');
+    if (!audioEditor || !audioTrackContainer) return;
+
+    audioEditor.ondragover = (e) => {
+        e.preventDefault();
+        audioEditor.classList.add("drag-over");
+    };
+    audioEditor.ondragleave = () => {
+        audioEditor.classList.remove("drag-over");
+    };
+    audioEditor.ondrop = (e) => {
+        e.preventDefault();
+        audioEditor.classList.remove("drag-over");
+        const filePath = e.dataTransfer.getData("text/plain");
+        if (filePath) {
+            addAudioTrack(filePath);
+        }
+    };
+
+    audioTrackContainer.innerHTML = ''; 
+
+    appState.audioTracks.forEach(trackData => {
+        const audioTrackLane = document.createElement('div');
+        audioTrackLane.className = 'audio-track-lane';
+        audioTrackLane.dataset.trackId = trackData.id;
+
+        audioTrackLane.innerHTML = `
+            <div class="track-info">
+                <i class="fa-solid fa-gear"></i>
+                <div class="track-solo-btn"></div>
+                <span class="track-name">${trackData.name}</span>
+            </div>
+            <div class="track-controls">
+                <div class="knob-container">
+                    <div class="knob" data-control="volume" data-track-id="${trackData.id}"><div class="knob-indicator"></div></div>
+                    <span>VOL</span>
+                </div>
+                <div class="knob-container">
+                    <div class="knob" data-control="pan" data-track-id="${trackData.id}"><div class="knob-indicator"></div></div>
+                    <span>PAN</span>
+                </div>
+            </div>
+            <div class="spectrogram-view-wrapper">
+                <div class="spectrogram-view-grid">
+                    <div class="playhead"></div>
+                </div>
+            </div>
+        `;
+
+        const grid = audioTrackLane.querySelector('.spectrogram-view-grid');
+        const canvas = document.createElement('canvas');
+        canvas.className = 'waveform-canvas';
+        canvas.height = 60;
+        grid.prepend(canvas);
+
+        audioTrackContainer.appendChild(audioTrackLane);
+        
+        if (trackData.audioBuffer) {
+            const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
+            const sampleDuration = trackData.audioBuffer.duration;
+
+            const stepsPerSecond = (bpm / 60) * 4;
+            const totalSteps = sampleDuration * stepsPerSecond;
+            
+            const canvasWidth = totalSteps * PIXELS_PER_STEP;
+            canvas.width = canvasWidth;
+
+            drawWaveform(canvas, trackData.audioBuffer, 'var(--accent-green)');
+            
+            const numberOfBars = Math.ceil(canvasWidth / PIXELS_PER_BAR);
+            for (let i = 0; i < numberOfBars; i++) {
+                if (i === 0) continue; 
+                const marker = document.createElement('div');
+                marker.className = 'bar-marker';
+                marker.textContent = i + 1;
+                marker.style.left = `${i * PIXELS_PER_BAR}px`;
+                grid.appendChild(marker);
+            }
+        }
+
+        const soloButton = audioTrackLane.querySelector('.track-solo-btn');
+        if (soloButton) {
+            if (trackData.isSoloed) {
+                soloButton.classList.add('active');
+            }
+            soloButton.addEventListener('click', (e) => {
+                e.stopPropagation();
+                toggleAudioTrackSolo(trackData.id);
+            });
+        }
+
+        const volumeKnob = audioTrackLane.querySelector('.knob[data-control="volume"]');
+        addKnobInteraction(volumeKnob);
+        updateKnobVisual(volumeKnob, "volume");
+
+        const panKnob = audioTrackLane.querySelector('.knob[data-control="pan"]');
+        addKnobInteraction(panKnob);
+        updateKnobVisual(panKnob, "pan");
+
+        const waveformWrapper = audioTrackLane.querySelector('.spectrogram-view-wrapper');
+        const handleSeek = (event) => {
+            const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
+            const stepsPerSecond = (bpm / 60) * 4;
+            const pixelsPerSecond = stepsPerSecond * PIXELS_PER_STEP;
+
+            const rect = waveformWrapper.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const scrollLeft = waveformWrapper.scrollLeft;
+            const absoluteX = clickX + scrollLeft;
+            
+            const newTime = absoluteX / pixelsPerSecond;
+            
+            seekAudioEditor(newTime);
+        };
+        
+        waveformWrapper.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            handleSeek(e);
+            const onMouseMove = (moveEvent) => handleSeek(moveEvent);
+            const onMouseUp = () => {
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+            };
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        });
+    });
+}
+
 export function renderApp() {
   const trackContainer = document.getElementById("track-container");
   trackContainer.innerHTML = "";
@@ -139,25 +287,12 @@ export function renderApp() {
 
     trackLane.addEventListener('click', () => {
         if (appState.activeTrackId === trackData.id) return;
-        
+        stopPlayback();
-        // A linha stopPlayback() também foi REMOVIDA daqui
-        
         appState.activeTrackId = trackData.id;
         document.querySelectorAll('.track-lane').forEach(lane => lane.classList.remove('active-track'));
         trackLane.classList.add('active-track');
         updateGlobalPatternSelector();
-
+        redrawSequencer();
-        // Apenas redesenha a UI, sem parar a música
-        const activeTrack = appState.tracks.find(t => t.id === appState.activeTrackId);
-        if (activeTrack) {
-            const activePattern = activeTrack.patterns[activeTrack.activePatternIndex];
-            if (activePattern) {
-                const stepsPerBar = 16;
-                const requiredBars = Math.ceil(activePattern.steps.length / stepsPerBar);
-                document.getElementById("bars-input").value = requiredBars > 0 ? requiredBars : 1;
-                redrawSequencer();
-            }
-        }
     });
 
     trackLane.addEventListener("dragover", (e) => { e.preventDefault(); trackLane.classList.add("drag-over"); });
@@ -182,6 +317,7 @@ export function renderApp() {
   
   updateGlobalPatternSelector();
   redrawSequencer();
+  renderAudioEditor();
 }
 
 export function redrawSequencer() {
@@ -266,7 +402,7 @@ function addKnobInteraction(knobElement) {
       if (e.button !== 0) return;
       e.preventDefault();
       const trackId = knobElement.dataset.trackId;
-      const track = appState.tracks.find((t) => t.id == trackId);
+      const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
       if (!track) return;
       const startY = e.clientY;
       const startValue = controlType === "volume" ? track.volume : track.pan;
@@ -293,7 +429,7 @@ function addKnobInteraction(knobElement) {
     knobElement.addEventListener("wheel", (e) => {
       e.preventDefault();
       const trackId = knobElement.dataset.trackId;
-      const track = appState.tracks.find((t) => t.id == trackId);
+      const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
       if (!track) return;
       const step = 0.05;
       const direction = e.deltaY < 0 ? 1 : -1;
@@ -310,7 +446,7 @@ function addKnobInteraction(knobElement) {
 
 function updateKnobVisual(knobElement, controlType) {
     const trackId = knobElement.dataset.trackId;
-    const track = appState.tracks.find((t) => t.id == trackId);
+    const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
     if (!track) return;
     const indicator = knobElement.querySelector(".knob-indicator");
     if (!indicator) return;
@@ -359,11 +495,7 @@ export function highlightStep(stepIndex, isActive) {
 export async function loadAndRenderSampleBrowser() {
   const browserContent = document.getElementById("browser-content");
   try {
-    // --- CORREÇÃO AQUI ---
-    // Adiciona um timestamp à URL para evitar que o navegador use uma versão antiga (em cache) do arquivo.
     const response = await fetch(`metadata/samples-manifest.json?v=${Date.now()}`);
-    // --- FIM DA CORREÇÃO ---
-
     if (!response.ok) {
       throw new Error("Arquivo samples-manifest.json não encontrado.");
     }
@@ -459,4 +591,16 @@ export async function showOpenProjectModal() {
 export function closeOpenProjectModal() {
     const openProjectModal = document.getElementById("open-project-modal");
     openProjectModal.classList.remove("visible");
+}
+
+export function updatePlayheadVisual(pixels) {
+    document.querySelectorAll('.audio-track-lane .playhead').forEach(ph => {
+        ph.style.left = `${pixels}px`;
+    });
+}
+
+export function resetPlayheadVisual() {
+    document.querySelectorAll('.audio-track-lane .playhead').forEach(ph => {
+        ph.style.left = '0px';
+    });
 }

assets/js/creations/waveform.js

@@ -0,0 +1,48 @@
+// js/waveform.js
+
+/**
+ * Desenha a forma de onda de um AudioBuffer em um elemento Canvas.
+ * @param {HTMLCanvasElement} canvas - O elemento canvas onde o desenho será feito.
+ * @param {AudioBuffer} audioBuffer - O buffer de áudio decodificado da faixa.
+ * @param {string} color - A cor da forma de onda (ex: '#2ecc71').
+ */
+export function drawWaveform(canvas, audioBuffer, color) {
+  if (!canvas || !audioBuffer) return;
+
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width;
+  const height = canvas.height;
+  const channelData = audioBuffer.getChannelData(0); // Pega os dados do primeiro canal
+  const step = Math.ceil(channelData.length / width);
+  const amp = height / 2; // Amplitude máxima do desenho
+
+  ctx.clearRect(0, 0, width, height); // Limpa o canvas
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+
+  for (let i = 0; i < width; i++) {
+    let min = 1.0;
+    let max = -1.0;
+
+    // Encontra o valor mínimo e máximo para um bloco de amostras
+    for (let j = 0; j < step; j++) {
+      const datum = channelData[(i * step) + j];
+      if (datum < min) {
+        min = datum;
+      }
+      if (datum > max) {
+        max = datum;
+      }
+    }
+    
+    // Desenha a linha vertical para aquele ponto no tempo
+    const x = i;
+    const y_max = (1 + max) * amp;
+    const y_min = (1 + min) * amp;
+    
+    ctx.moveTo(x, y_max);
+    ctx.lineTo(x, y_min);
+  }
+  ctx.stroke();
+}

creation.html

@@ -18,108 +18,148 @@
     </aside>
 
     <button id="sidebar-toggle"><i class="fa-solid fa-caret-left"></i></button>
-
+    <div class="app-container">
-    <header class="global-toolbar">
+      <header class="global-toolbar">
-      <div class="control-group">
+        <div class="control-group">
-        <i class="fa-solid fa-file" id="new-project-btn" title="Novo Projeto"></i>
+          <i class="fa-solid fa-file" id="new-project-btn" title="Novo Projeto"></i>
-        <i class="fa-solid fa-folder-open" id="open-mmp-btn" title="Abrir Projeto do Servidor"></i>
+          <i class="fa-solid fa-folder-open" id="open-mmp-btn" title="Abrir Projeto do Servidor"></i>
-        <i class="fa-solid fa-save" id="save-mmp-btn" title="Salvar Projeto (.mmp)"></i>
+          <i class="fa-solid fa-save" id="save-mmp-btn" title="Salvar Projeto (.mmp)"></i>
-        <i class="fa-solid fa-upload" id="upload-sample-btn" title="Carregar Sample do Computador"></i>
+          <i class="fa-solid fa-upload" id="upload-sample-btn" title="Carregar Sample do Computador"></i>
-      </div>
-      <div class="divider"></div>
-      <div class="control-group">
-        <i class="fa-solid fa-backward-step" id="rewind-btn" title="Voltar ao Início"></i>
-        <i class="fa-solid fa-play" title="Play/Pause Global (Futuro)"></i>
-        <i class="fa-solid fa-stop" title="Stop Global (Futuro)"></i>
-        <i class="fa-solid fa-circle-dot" title="Gravar"></i>
-      </div>
-      <div class="divider"></div>
-      <div class="info-display-group">
-        <div class="info-display">
-          <div class="interactive-input-container">
-            <button class="adjust-btn" data-target="bpm" data-step="-1">-</button>
-            <input type="text" class="value-input" id="bpm-input" value="140" data-min="20" data-max="400"/>
-            <button class="adjust-btn" data-target="bpm" data-step="1">+</button>
-          </div>
-          <div class="label">ANDAMENTO/BPM</div>
         </div>
-        <div class="info-display">
+        <div class="divider"></div>
-          <div class="interactive-input-container">
+        <div class="control-group">
-            <button class="adjust-btn" data-target="bars" data-step="-1">-</button>
+          <i class="fa-solid fa-backward-step" id="rewind-btn" title="Voltar ao Início"></i>
-            <input type="text" class="value-input" id="bars-input" value="1" data-min="1" data-max="64"/>
+          <i class="fa-solid fa-play" title="Play/Pause Global (Futuro)"></i>
-            <button class="adjust-btn" data-target="bars" data-step="1">+</button>
+          <i class="fa-solid fa-stop" title="Stop Global (Futuro)"></i>
-          </div>
+          <i class="fa-solid fa-circle-dot" title="Gravar"></i>
-          <div class="label">COMPASSOS</div>
         </div>
-        <div class="info-display">
+        <div class="divider"></div>
-          <div class="interactive-input-container">
+        <div class="info-display-group">
-            <div class="compasso-group">
+          <div class="info-display">
-              <button class="adjust-btn" data-target="compasso-a" data-step="-1">-</button>
+            <div class="interactive-input-container">
-              <input type="text" class="value-input compasso-input" id="compasso-a-input" value="4" data-min="1" data-max="16"/>
+              <button class="adjust-btn" data-target="bpm" data-step="-1">-</button>
-              <button class="adjust-btn" data-target="compasso-a" data-step="1">+</button>
+              <input type="text" class="value-input" id="bpm-input" value="140" data-min="20" data-max="400"/>
+              <button class="adjust-btn" data-target="bpm" data-step="1">+</button>
             </div>
-            <span class="compasso-separator">/</span>
+            <div class="label">ANDAMENTO/BPM</div>
-            <div class="compasso-group">
+          </div>
-              <button class="adjust-btn" data-target="compasso-b" data-step="-1">-</button>
+          <div class="info-display">
-              <input type="text" class="value-input compasso-input" id="compasso-b-input" value="4" data-min="1" data-max="16"/>
+            <div class="interactive-input-container">
-              <button class="adjust-btn" data-target="compasso-b" data-step="1">+</button>
+              <button class="adjust-btn" data-target="bars" data-step="-1">-</button>
+              <input type="text" class="value-input" id="bars-input" value="1" data-min="1" data-max="64"/>
+              <button class="adjust-btn" data-target="bars" data-step="1">+</button>
+            </div>
+            <div class="label">COMPASSOS</div>
+          </div>
+          <div class="info-display">
+            <div class="interactive-input-container">
+              <div class="compasso-group">
+                <button class="adjust-btn" data-target="compasso-a" data-step="-1">-</button>
+                <input type="text" class="value-input compasso-input" id="compasso-a-input" value="4" data-min="1" data-max="16"/>
+                <button class="adjust-btn" data-target="compasso-a" data-step="1">+</button>
+              </div>
+              <span class="compasso-separator">/</span>
+              <div class="compasso-group">
+                <button class="adjust-btn" data-target="compasso-b" data-step="-1">-</button>
+                <input type="text" class="value-input compasso-input" id="compasso-b-input" value="4" data-min="1" data-max="16"/>
+                <button class="adjust-btn" data-target="compasso-b" data-step="1">+</button>
+              </div>
+            </div>
+            <div class="label">COMPASSO</div>
+          </div>
+          <div class="info-display">
+            <div id="timer-display" class="interactive-input-container" style="font-size: 0.7rem; color: var(--text-dark)">00:00:00</div>
+            <div class="label">MIN:SEC:MSEC</div>
+          </div>
+        </div>
+        <div class="control-group">
+          <button id="metronome-btn" title="Metrônomo On/Off">Metrônomo</button>
+        </div>
+        <div class="spacer"></div>
+        <div class="control-group master-controls">
+          <div class="knob-container">
+              <div class="knob" id="master-volume-knob"><div class="knob-indicator"></div></div>
+              <span>VOL MASTER</span>
+          </div>
+          <div class="knob-container">
+              <div class="knob" id="master-pan-knob"><div class="knob-indicator"></div></div>
+              <span>PAN MASTER</span>
+          </div>
+        </div>
+      </header>
+      
+      <main class="main-content">
+        <div class="beat-editor">
+          <div class="editor-header">
+            Mostrar/esconder Editor de Bases
+            <div class="window-controls">
+              <i class="fa-solid fa-minus"></i><i class="fa-regular fa-square"></i><i class="fa-solid fa-xmark"></i>
             </div>
           </div>
-          <div class="label">COMPASSO</div>
+          <div class="editor-toolbar">
-        </div>
+            <div class="playback-controls">
-        <div class="info-display">
+              <i class="fa-solid fa-play" id="play-btn" title="Play/Pause"></i>
-          <div id="timer-display" class="interactive-input-container" style="font-size: 0.7rem; color: var(--text-dark)">00:00:00</div>
+              <i class="fa-solid fa-stop" id="stop-btn" title="Stop"></i>
-          <div class="label">MIN:SEC:MSEC</div>
+            </div>
-        </div>
+            <div class="pattern-manager">
-      </div>
+              <h2 id="beat-bassline-title"></h2>
-      <div class="control-group">
+              <select id="global-pattern-selector" class="pattern-selector" disabled>
-        <button id="metronome-btn" title="Metrônomo On/Off">Metrônomo</button>
+                  <option>Selecione uma faixa</option>
-      </div>
+              </select>
-      <div class="spacer"></div>
+              <button id="add-pattern-btn" class="pattern-btn">+</button>
-      <div class="control-group master-controls">
+              <button id="remove-pattern-btn" class="pattern-btn">-</button>
-        <div class="knob-container">
+            </div>
-            <div class="knob" id="master-volume-knob"><div class="knob-indicator"></div></div>
+            <div class="tool-icons">
-            <span>VOL MASTER</span>
+              <i class="fa-solid fa-table-cells"></i><i class="fa-solid fa-bars-staggered"></i><i class="fa-solid fa-wave-square enabled"></i><i class="fa-solid fa-plus" id="add-bar-btn" title="Adicionar 1 Compasso"></i>
-        </div>
+            </div>
-        <div class="knob-container">
+            <div class="zoom-controls">
-            <div class="knob" id="master-pan-knob"><div class="knob-indicator"></div></div>
+              <i class="fa-solid fa-minus" id="remove-instrument-btn"></i><i class="fa-solid fa-plus" id="add-instrument-btn"></i>
-            <span>PAN MASTER</span>
+            </div>
-        </div>
-      </div>
-    </header>
-
-    <main class="main-content">
-      <div class="beat-editor">
-        <div class="editor-header">
-          Mostrar/esconder Editor de Bases
-          <div class="window-controls">
-            <i class="fa-solid fa-minus"></i><i class="fa-regular fa-square"></i><i class="fa-solid fa-xmark"></i>
           </div>
+          <div id="track-container"></div>
         </div>
-        <div class="editor-toolbar">
+        <div class="audio-editor">
-          <div class="playback-controls">
+          <div class="editor-header">
-            <i class="fa-solid fa-play" id="play-btn" title="Play/Pause"></i>
+            <span>Editor de Amostras de Áudio</span>
-            <i class="fa-solid fa-stop" id="stop-btn" title="Stop"></i>
+            
-          </div>
+            <div class="playback-controls">
-          <div class="pattern-manager">
+              <i class="fa-solid fa-play" id="audio-editor-play-btn" title="Play/Pause"></i>
-            <h2 id="beat-bassline-title"></h2>
+              <i class="fa-solid fa-stop" id="audio-editor-stop-btn" title="Stop"></i>
-            <select id="global-pattern-selector" class="pattern-selector" disabled>
+            </div>
-                <option>Selecione uma faixa</option>
+            </div>
-            </select>
+          <div id="audio-track-container">
-            <button id="add-pattern-btn" class="pattern-btn">+</button>
+            <div class="audio-track-lane">
-            <button id="remove-pattern-btn" class="pattern-btn">-</button>
+              <div class="track-info">
-          </div>
+                <i class="fa-solid fa-gear"></i>
-          <div class="tool-icons">
+                <div class="track-mute"></div>
-            <i class="fa-solid fa-table-cells"></i><i class="fa-solid fa-bars-staggered"></i><i class="fa-solid fa-wave-square enabled"></i><i class="fa-solid fa-plus" id="add-bar-btn" title="Adicionar 1 Compasso"></i>
+                <span class="track-name">bassslap02.ogg</span>
-          </div>
+              </div>
-          <div class="zoom-controls">
+              <div class="track-controls">
-            <i class="fa-solid fa-minus" id="remove-instrument-btn"></i><i class="fa-solid fa-plus" id="add-instrument-btn"></i>
+                <div class="knob-container">
-          </div>
+                  <div class="knob" data-control="volume">
+                    <div class="knob-indicator"></div>
+                  </div>
+                  <span>VOL</span>
+                </div>
+                <div class="knob-container">
+                  <div class="knob" data-control="pan">
+                    <div class="knob-indicator"></div>
+                  </div>
+                  <span>PAN</span>
+                </div>
+                <div class="spectrogram-view-wrapper">
+                    <div class="spectrogram-view-grid"></div>
+                </div>
+                <div class="spectrogram-view-wrapper">
+                    <canvas id="spectrogram-canvas-1" width="800" height="100"></canvas>
+                </div>
+              </div>
+              
+            </div>
+            </div>
         </div>
-        <div id="track-container"></div>
+      </main>
-      </div>
+    </div>
-    </main>
-
     <input type="file" id="mmp-file-input" accept=".mmp, .mmpz" style="display: none"/>
     <input type="file" id="sample-file-input" accept=".wav,.flac,.ogg,.mp3" style="display: none"/>
 

metadata/samples-manifest.json

@@ -528,7 +528,11 @@
       "_isFile": true
     }
   },
-  "samples": {},
+  "samples": {
+    "bassdrum_acoustic02_-_Copia.ogg": {
+      "_isFile": true
+    }
+  },
   "shapes": {
     "additive.wav": {
       "_isFile": true

readme.md

@@ -8,9 +8,12 @@ Isso ativará o ambiente de desenvolvimento.
 # ----------------------- // --------------------------
 
 # Serviço Watchdog para verificar alterações nas pastas de samples
-Foi criado um serviço(/etc/systemd/system/mmpCreator-upload-server.service) com nome "mmpCreator-upload-server.service" para verificar alterações na pasta src/samples se há alguma mudança. Caso tenha, ele fará um novo build do site para que seja atualizado em tempo real todas as alterações. (tempo de 5 em 5 segundos)
+Foi criado um serviço (/etc/systemd/system/mmpCreator-upload-server.service) com nome "mmpCreator-upload-server.service" para verificar alterações na pasta src/samples se há alguma mudança. Caso tenha, ele fará um novo build do site para que seja atualizado em tempo real todas as alterações. (tempo de 5 em 5 segundos)
 A atualização no site é feita a partir de build do site feito pelo script.
 
+# TO DO
+- Verificar caminho do build, pois está sendo feito apenas na parte de testes
+
 # ----------------------- // --------------------------
 
 # Servidor de Upload de samples

src/manual.md

@@ -0,0 +1,129 @@
+# Visão Geral do Código
+    Este é o código de um sequenciador de música para a web, similar a um "DAW" (Digital Audio Workstation) simplificado, focado em criar batidas e melodias. Ele permite carregar e salvar projetos no formato .mmp (LMMS), manipular trilhas de instrumentos, programar notas em um sequenciador e controlar aspectos como volume e pan.
+
+# main.js - O Ponto de Partida
+    Este arquivo inicializa a aplicação. Ele conecta os botões da interface (como "Play", "Salvar", "Adicionar Trilha") às suas funções correspondentes, que estão em outros arquivos. Pense nele como o cérebro que delega as tarefas.
+
+# Função Principal 
+    - Configura todos os "ouvintes de eventos" (event listeners).
+
+    Exemplo: Quando o usuário clica no botão com o ID play-btn, a função togglePlayback do arquivo audio.js é chamada para iniciar ou parar a música.
+
+```JavaScript
+
+// Exemplo de como um botão é conectado a uma função
+playBtn.addEventListener("click", togglePlayback);
+addInstrumentBtn.addEventListener("click", addTrackToState);
+saveMmpBtn.addEventListener("click", generateMmpFile);
+```
+# state.js - O Coração da Aplicação
+
+    Aqui fica guardado todo o estado atual do projeto. Isso inclui as trilhas, as notas, o volume de cada instrumento, se a música está tocando ou não, etc. Quando algo muda (por exemplo, o usuário adiciona uma nota), este estado é atualizado, e a interface visual reflete essa mudança.
+
+
+# Função Principal
+    - Manter um objeto central (appState) com todas as informações do projeto.
+
+    Exemplo: O objeto appState contém uma lista (tracks) onde cada item representa um instrumento com seus padrões de notas, volume e nome do sample.
+
+```JavaScript
+
+export let appState = {
+  tracks: [], // Lista de instrumentos
+  isPlaying: false, // A música está tocando?
+  currentStep: 0, // Qual passo da batida está sendo tocado
+  masterVolume: 0.8, // Volume geral
+};
+```
+
+# ui.js - A Interface Gráfica
+    
+    Este arquivo é responsável por desenhar tudo o que o usuário vê e com o que interage na tela: as trilhas, os "knobs" de volume, a grade do sequenciador e o navegador de arquivos de áudio. Ele lê os dados do state.js para saber o que mostrar.
+
+# Função Principal 
+    - Gerar e atualizar os elementos HTML da página.
+
+    Exemplo: A função renderApp cria uma "div" para cada trilha existente no appState, e redrawSequencer desenha os quadradinhos de notas, colorindo os que estão ativos.
+
+```JavaScript
+
+// Exemplo da lógica para desenhar os passos da batida
+for (let i = 0; i < totalGridSteps; i++) {
+  const stepElement = document.createElement("div");
+  // Se a nota 'i' estiver marcada como ativa no estado, adiciona a classe 'active'
+  if (patternSteps[i] === true) {
+    stepElement.classList.add("active");
+  }
+  sequencerContainer.appendChild(stepElement);
+}
+``` 
+
+# audio.js - O Módulo de Som
+
+    Este é o motor de áudio. Ele usa a API de Áudio do navegador para carregar os samples (os sons dos instrumentos), controlar a reprodução, gerenciar o tempo (BPM), tocar o metrônomo e garantir que as notas toquem na hora certa.
+
+# Função Principal 
+    - Controlar a reprodução de áudio e o tempo da música.
+
+    Exemplo: A função tick é chamada repetidamente em um intervalo de tempo preciso (calculado a partir do BPM). A cada chamada, ela verifica quais notas devem ser tocadas no passo atual e dispara os sons correspondentes.
+
+```JavaScript
+
+function tick() {
+  // Para cada trilha...
+  appState.tracks.forEach((track) => {
+    // Se a nota no passo atual estiver ativa...
+    if (activePattern.steps[appState.currentStep]) {
+      // Toca o som daquela trilha
+      playSample(track.samplePath, track.id);
+    }
+  });
+  // Avança para o próximo passo
+  appState.currentStep = (appState.currentStep + 1) % totalSteps;
+}
+```
+
+# file.js - O Gerenciador de Arquivos
+
+    Responsável por ler, interpretar e salvar arquivos de projeto. Ele sabe como decodificar o formato .mmp (baseado em XML) e traduzi-lo para a estrutura de dados que a aplicação entende (appState). Também faz o caminho inverso, convertendo o estado atual do projeto em um arquivo .mmp que pode ser salvo.
+
+# Função Principal
+    - Ler e escrever projetos no formato .mmp.
+
+    Exemplo: Ao carregar um arquivo, a função parseMmpContent usa o DOMParser do navegador para ler o XML, extrair informações como BPM e as notas de cada trilha, e popular o appState.
+
+# Utilitários
+    - config.js e utils.js
+
+# config.js
+    - Guarda valores constantes e configurações padrão, como o volume inicial ou o pan. Isso facilita a manutenção, mantendo números "mágicos" em um só lugar.
+
+# utils.js 
+    - Contém pequenas funções de ajuda usadas em várias partes do código. Por exemplo, a função getTotalSteps calcula quantos "passos" a música terá com base no número de compassos e na fórmula de compasso definidos pelo usuário.
+
+# upload_server.py - O Servidor de Suporte
+    
+    Este é um pequeno servidor web escrito em Python que roda nos bastidores. Sua principal tarefa é permitir o upload de novos samples de áudio. Quando um novo arquivo é enviado, ele o salva na pasta correta e, crucialmente, atualiza os arquivos de "manifesto" (.json). Esses manifestos são listas que a interface web consulta para saber quais samples e projetos estão disponíveis para serem carregados.
+
+# Função Principal 
+    - Receber uploads de arquivos e manter os manifestos de samples e projetos atualizados.
+
+    Exemplo: Um usuário faz o upload do arquivo kick_drum.wav. O servidor salva este arquivo e automaticamente adiciona uma entrada para kick_drum.wav no arquivo samples-manifest.json. Da próxima vez que o usuário abrir o navegador de samples, o novo bumbo aparecerá na lista.
+
+# style.css - A Aparência
+    
+    Este é o arquivo de estilização. Ele define todas as cores, tamanhos, fontes e o layout da aplicação. É o que dá ao sequenciador sua aparência de "software de música", com temas escuros e elementos visuais que lembram equipamentos de estúdio.
+
+# Função Principal 
+    - Definir o estilo visual de todos os componentes.
+
+    Exemplo: O estilo para um passo ativo no sequenciador é definido aqui, fazendo-o brilhar em verde.
+
+```CSS
+
+.step.active {
+  background-color: var(--accent-green);
+  border: 1px solid #fff;
+  box-shadow: 0 0 8px var(--accent-green);
+}
+```