Add dynamic keyboard dimensions and integrate adjustable knob

Introduced adjustable `keyboardWidth` and `keyboardHeight` for `KeyboardComponent`, making dimensions dynamic. Added a knob component to control keyboard width in `MainView`. Enhanced layouts for flexibility and customization.

src/jsMain/kotlin/nl/astraeus/vst/ui/components/KeyboardComponent.kt

@@ -29,6 +29,8 @@ import org.w3c.dom.events.MouseEvent
 class KeyboardComponent(
   val title: String = "Keyboard",
   val octave: Int = 4,
+  val keyboardWidth: Int = 210,
+  val keyboardHeight: Int = keyboardWidth / 2,
   val onNoteDown: (Int) -> Unit = {},
   val onNoteUp: (Int) -> Unit = {}
 ) : Komponent() {
@@ -41,10 +43,8 @@ class KeyboardComponent(
   private val blackKeys = listOf(61, 63, 66, 68, 70)
 
   // Key dimensions
-  private val keyboardWidth = 210
-  private val keyboardHeight = 100
   private val whiteKeyWidth = keyboardWidth / 7
-  private val blackKeyWidth = whiteKeyWidth * 3 / 2
+  private val blackKeyWidth = (keyboardWidth / 9)
   private val blackKeyHeight = keyboardHeight * 60 / 100
 
   // Calculate positions for black keys