feat: honor MIDI input notes' velocity during recording

src/components/piano-roll/PianoNote.tsx

@@ -1,20 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { PIANO_ROLL_CONSTANTS, DEBUG_MODE } from '../../constants';
 import { useProjectStore } from '../../stores/projectStore';
-
-// Purple (vel=0) → green (vel=64) → red (vel=127), matching Logic Pro
-function velocityToColor(v: number, alpha = 1): string {
-  const lerp = (a: number, b: number, t: number) => Math.round(a + (b - a) * t);
-  let r: number, g: number, b: number;
-  if (v <= 64) {
-    const t = v / 64;
-    r = lerp(123, 90, t); g = lerp(95, 176, t); b = lerp(160, 106, t);
-  } else {
-    const t = (v - 64) / 63;
-    r = lerp(90, 255, t); g = lerp(176, 85, t); b = lerp(106, 85, t);
-  }
-  return alpha === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
+import { velocityToColor } from '../../util/velocityColor';
 
 interface PianoNoteProps {
   id: string;
@@ -290,4 +277,4 @@ const PianoNote: React.FC<PianoNoteProps> = ({
   );
 };
 
-export default PianoNote; 
+export default PianoNote; 

src/components/piano-roll/PianoRoll.css

@@ -418,8 +418,7 @@
 
 .piano-grid-recording-note {
   position: absolute;
-  background-color: rgba(255, 60, 60, 0.35);
-  border: 1px solid rgba(255, 60, 60, 0.85);
+  border: 1px solid transparent;
   pointer-events: none;
   z-index: 3;
 }

src/components/piano-roll/PianoRollContent.tsx

@@ -13,6 +13,7 @@ import { useNoteOperations } from '../../hooks/useNoteOperations';
 import { useNoteSelection } from '../../hooks/useNoteSelection';
 import type { KeySignature } from '../../core/KGProject';
 import type { KGAudioRegion } from '../../core/region/KGAudioRegion';
+import { velocityToColor } from '../../util/velocityColor';
 
 interface PianoRollContentProps {
   contentRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -259,6 +260,8 @@ const PianoRollContent: React.FC<PianoRollContentProps> = ({
           top: (107 - note.pitch) * noteHeight,
           width: Math.max((note.endBeat - note.startBeat) * beatWidth, 4),
           height: noteHeight,
+          backgroundColor: velocityToColor(note.velocity, 0.35),
+          borderColor: velocityToColor(note.velocity, 0.85),
         }}
       />
     ));
@@ -311,4 +314,4 @@ const PianoRollContent: React.FC<PianoRollContentProps> = ({
   );
 };
 
-export default PianoRollContent; 
+export default PianoRollContent;