Refactor CssName and update build configuration.

Revised `CssName` to support optional override names and adjusted usage across multiple components for consistency. Updated build.gradle.kts to increment version and enable source maps in the browser configuration.

build.gradle.kts

@@ -9,7 +9,7 @@ plugins {
 }
 
 group = "nl.astraeus"
-version = "1.2.0"
+version = "2.0.0-SNAPSHOT"
 
 repositories {
     mavenCentral()
@@ -27,7 +27,11 @@ kotlin {
             target.set("es2015")
         }
         binaries.library()
-        browser {}
+        browser {
+            commonWebpackConfig {
+                sourceMaps = true
+            }
+        }
     }
     jvm {
         withJava()
@@ -153,4 +157,4 @@ tasks.withType<PublishToMavenRepository> {
 
 tasks.withType<PublishToMavenLocal> {
     dependsOn(tasks.withType<Sign>())
-}
+}

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

@@ -171,6 +171,10 @@ open class BaseKnobComponent(
         +renderedValue
       }
 
+/*      span(KnobMidiValueCls.name) {
+        +midiValue
+      }*/
+
       onWheelFunction = ::wheelFunction
 
       onMouseDownFunction = {
@@ -305,14 +309,14 @@ open class BaseKnobComponent(
   }
 
   companion object : CssId("knob") {
-    object KnobCls : CssName
-    object KnobSvgCls : CssName
-    object KnobTextCls : CssName
-    object KnobValueCls : CssName
-    object KnobBackgroundCls : CssName
+    object KnobCls : CssName()
+    object KnobSvgCls : CssName()
+    object KnobTextCls : CssName()
+    object KnobValueCls : CssName()
+    object KnobBackgroundCls : CssName()
 
-    object KnobVolumeCls : CssName
-    object KnobVolumeBackgroundCls : CssName
+    object KnobVolumeCls : CssName()
+    object KnobVolumeBackgroundCls : CssName()
 
     init {
       defineCss {

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

@@ -15,7 +15,7 @@ class KeyboardInputComponent : Komponent() {
   }
 
   companion object : CssId("keyboard-input") {
-    object KeyboardInputCss : CssName
+    object KeyboardInputCss : CssName()
 
     init {
       defineCss {

src/jsMain/kotlin/nl/astraeus/vst/ui/css/Css.kt

@@ -1,7 +1,12 @@
 package nl.astraeus.vst.ui.css
 
 import kotlinx.browser.document
-import nl.astraeus.css.properties.*
+import nl.astraeus.css.properties.Color
+import nl.astraeus.css.properties.Measurement
+import nl.astraeus.css.properties.UserSelect
+import nl.astraeus.css.properties.hsl
+import nl.astraeus.css.properties.hsla
+import nl.astraeus.css.properties.px
 import nl.astraeus.css.style
 import nl.astraeus.css.style.ConditionalStyle
 import nl.astraeus.css.style.DescriptionProvider
@@ -17,15 +22,9 @@ class StyleDefinition(
   val buttonBorderWidth : Measurement = 1.px,
 )
 
-object NoTextSelectCls : CssName {
-  override val name = "no-text-select"
-}
-object SelectedCls : CssName {
-  override val name = "selected"
-}
-object ActiveCls : CssName {
-  override val name = "active"
-}
+object NoTextSelectCls : CssName("no-text-select")
+object SelectedCls : CssName("selected")
+object ActiveCls : CssName( "active")
 
 fun Color.hover(): Color = if (Css.currentStyle == Css.darkStyle) {
   this.lighten(15)

src/jsMain/kotlin/nl/astraeus/vst/ui/css/CssName.kt

@@ -25,29 +25,36 @@ object CssSettings {
   var minified = false
 }
 
+private val idCharacters = ('a'..'z') + ('A'..'Z')
 private fun nextShortId(): String {
   var id = nextCssId++
   val result = StringBuilder()
 
-  while(id > 0) {
-    val ch = ((id % 26) + 'a'.code).toChar()
-    result.append(ch)
+  while (id > 0) {
+    result.append(idCharacters[id % idCharacters.size])
 
-    id /= 26
+    id /= idCharacters.size
   }
 
   return result.toString()
 }
 
-interface CssName : DescriptionProvider {
-  val name: String
-    get() = if (CssSettings.shortId) {
-    nextShortId()
-  } else {
-    "${CssSettings.preFix}-${this::class.simpleName?.hyphenize() ?: this::class}"
-  }
+abstract class CssName(
+  overrideName: String? = null
+) : DescriptionProvider {
+  val name: String = if (overrideName != null) {
+      if (CssSettings.preFix.isNotBlank()) {
+        "${CssSettings.preFix}-$overrideName"
+      } else {
+        overrideName
+      }
+    } else if (CssSettings.shortId) {
+      "${CssSettings.preFix}-${nextShortId()}"
+    } else {
+      "${CssSettings.preFix}-${this::class.simpleName?.hyphenize() ?: this::class}"
+    }
 
-  fun cls() : DescriptionProvider = cls(this)
+  fun cls(): DescriptionProvider = cls(this)
 
   fun cssName(): String = "${this::class.simpleName?.hyphenize() ?: this::class}"
 
@@ -60,6 +67,7 @@ open class CssId(name: String) : DescriptionProvider {
   } else {
     "daw-$name-css"
   }
+
   override fun description() = name
 
   override fun equals(other: Any?): Boolean {

src/jsMain/kotlin/nl/astraeus/vst/ui/view/BaseVstView.kt

@@ -49,10 +49,10 @@ class BaseVstView(
   }
 
   object BaseVstCss : CssId("base-vst-view") {
-    object BaseVstCss : CssName
-    object StartSplashCss : CssName
-    object StartBoxCss : CssName
-    object StartButtonCss : CssName
+    object BaseVstCss : CssName()
+    object StartSplashCss : CssName()
+    object StartBoxCss : CssName()
+    object StartButtonCss : CssName()
 
     init {
       defineCss {