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/BaseKnobComponent.kt

@@ -1,6 +1,7 @@
 package nl.astraeus.vst.ui.components
 
 import kotlinx.html.classes
+import kotlinx.html.div
 import kotlinx.html.js.onMouseDownFunction
 import kotlinx.html.js.onMouseLeaveFunction
 import kotlinx.html.js.onMouseMoveFunction
@@ -87,7 +88,7 @@ open class BaseKnobComponent(
   private fun getRadius() = min(getMiddleX(), getMiddleY() - 16) - 5
 
   override fun HtmlBuilder.render() {
-    span(KnobCls.name) {
+    div(KnobCls.name) {
       style = "width: ${width}px; height: ${height}px"
       knobElement = currentElement()
 

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,12 +43,9 @@ class KeyboardComponent(
   private val blackKeys = listOf(61, 63, 66, 68, 70)
 
   // Key dimensions
-  private val keyboardWidth = 210
+  private val whiteKeyWidth = keyboardWidth / 7
-  private val keyboardHeight = 100
+  private val blackKeyWidth = (keyboardWidth / 9)
-  private val whiteKeyWidth = 30
+  private val blackKeyHeight = keyboardHeight * 60 / 100
-  private val whiteKeyHeight = 100
-  private val blackKeyWidth = 20
-  private val blackKeyHeight = 60
 
   // Calculate positions for black keys
   private val blackKeyPositions = listOf(
@@ -58,13 +57,11 @@ class KeyboardComponent(
   )
 
   fun noteDown(midiNote: Int) {
-    println("noteDown $midiNote")
     pressedNotes.add(midiNote)
     onNoteDown(midiNote)
   }
 
   fun noteUp(midiNote: Int) {
-    println("noteUp $midiNote")
     pressedNotes.remove(midiNote)
     onNoteUp(midiNote)
   }
@@ -182,12 +179,11 @@ class KeyboardComponent(
 
           // Draw white keys
           for (i in 0 until 7) {
-            val midiNote = whiteKeys[i] + (octave - 4) * 12
             rect(
               i * whiteKeyWidth,
               0,
               whiteKeyWidth,
-              whiteKeyHeight,
+              keyboardHeight,
               0,
               WhiteKeyCls.name
             )
@@ -195,7 +191,6 @@ class KeyboardComponent(
 
           // Draw black keys
           for (i in 0 until 5) {
-            val midiNote = blackKeys[i] + (octave - 4) * 12
             rect(
               blackKeyPositions[i],
               0,

test-app/src/jsMain/kotlin/nl/astraeus/vst/ui/view/MainView.kt

@@ -4,10 +4,12 @@ package nl.astraeus.vst.ui.view
 
 import kotlinx.html.div
 import kotlinx.html.h1
+import kotlinx.html.hr
 import kotlinx.html.js.onClickFunction
 import kotlinx.html.option
 import kotlinx.html.select
 import kotlinx.html.span
+import kotlinx.html.style
 import nl.astraeus.css.properties.AlignItems
 import nl.astraeus.css.properties.BoxSizing
 import nl.astraeus.css.properties.Display
@@ -39,6 +41,7 @@ import nl.astraeus.vst.ui.css.hover
 class MainView : Komponent() {
   private var messages: MutableList<String> = ArrayList()
   var started = true
+  var keyboardWidth = 500
 
   fun addMessage(message: String) {
     messages.add(message)
@@ -113,7 +116,30 @@ class MainView : Komponent() {
         }
       }
       div {
-        include(KeyboardComponent())
+        style = "height: 150px;"
+        include(
+          KnobComponent(
+            value = keyboardWidth.toDouble(),
+            label = "Keyboard",
+            minValue = 100.0,
+            maxValue = 2000.0,
+            step = 5.0,
+            width = 100,
+            height = 120,
+          ) { value ->
+            keyboardWidth = value.toInt()
+            requestUpdate()
+          }
+        )
+      }
+      hr {}
+      div {
+        include(KeyboardComponent(
+          keyboardWidth = keyboardWidth,
+          keyboardHeight = keyboardWidth / 2,
+          onNoteDown = { println("Note down: $it") },
+          onNoteUp = { println("Note up: $it") },
+        ))
       }
         /*
       div {