More or less working muon monitor

visionforge-compose-html/src/jsMain/kotlin/space/kscience/visionforge/compose/NameCrumbs.kt

@@ -11,9 +11,15 @@ import space.kscience.dataforge.names.length
 
 @Composable
 public fun NameCrumbs(name: Name?, link: (Name) -> Unit): Unit = Nav({
-    attr("aria-label","breadcrumb")
+    attr("aria-label", "breadcrumb")
 }) {
-    Ol({classes("breadcrumb")}) {
+    Ol({
+        classes("breadcrumb")
+        style {
+            property("--bs-breadcrumb-divider", "'.'")
+            property("--bs-breadcrumb-item-padding-x",".2rem")
+        }
+    }) {
         Li({
             classes("breadcrumb-item")
             onClick {
@@ -28,10 +34,9 @@ public fun NameCrumbs(name: Name?, link: (Name) -> Unit): Unit = Nav({
             name.tokens.forEach { token ->
                 tokens.add(token)
                 val fullName = Name(tokens.toList())
-                Text(".")
                 Li({
                     classes("breadcrumb-item")
-                    if(tokens.size == name.length) classes("active")
+                    if (tokens.size == name.length) classes("active")
                     onClick {
                         link(fullName)
                     }

visionforge-compose-html/src/jsMain/kotlin/space/kscience/visionforge/compose/TreeStyles.kt

@@ -22,7 +22,7 @@ public object TreeStyles : StyleSheet(VisionForgeStyles) {
         cursor("pointer")
         userSelect(UserSelect.none)
         /* Create the caret/arrow with a unicode, and style it */
-        before {
+        (self + before) {
             content("\u25B6")
             color(Color.black)
             display(DisplayStyle.InlineBlock)
@@ -34,7 +34,7 @@ public object TreeStyles : StyleSheet(VisionForgeStyles) {
      *  Rotate the caret/arrow icon when clicked on (using JavaScript)
      */
     public val treeCaretDown: String by style {
-        before {
+        (self + before) {
             content("\u25B6")
             color(Color.black)
             display(DisplayStyle.InlineBlock)
@@ -80,7 +80,7 @@ public object TreeStyles : StyleSheet(VisionForgeStyles) {
         textAlign("center")
         textDecoration("none")
         cursor("pointer")
-        disabled {
+        (self + disabled)  {
             cursor("auto")
             border {
                 style(LineStyle.Dashed)

visionforge-threejs/src/jsMain/kotlin/space/kscience/visionforge/solid/three/compose/ThreeView.kt

@@ -33,8 +33,6 @@ private fun SimpleThreeView(
     selected: Name?,
 ) {
 
-    val three: ThreePlugin by derivedStateOf { context.request(ThreePlugin) }
-
     Div({
         style {
             maxWidth(100.vw)
@@ -43,9 +41,9 @@ private fun SimpleThreeView(
             height(100.percent)
         }
     }) {
-        var canvas: ThreeCanvas? = null
+        var canvas: ThreeCanvas? by remember { mutableStateOf(null) }
         DisposableEffect(options) {
-            canvas = ThreeCanvas(three, scopeElement, options ?: Canvas3DOptions())
+            canvas = ThreeCanvas(context.request(ThreePlugin), scopeElement, options ?: Canvas3DOptions())
             onDispose {
                 scopeElement.clear()
                 canvas = null
@@ -75,7 +73,7 @@ public fun ThreeView(
 ) {
     var selected: Name? by remember { mutableStateOf(initialSelected) }
 
-    val optionsSnapshot = remember(options) {
+    val optionsSnapshot by derivedStateOf {
         (options ?: Canvas3DOptions()).apply {
             this.onSelect = {
                 selected = it
@@ -83,7 +81,7 @@ public fun ThreeView(
         }
     }
 
-    val selectedVision: Vision? = remember(solid, selected) {
+    val selectedVision: Vision? by derivedStateOf {
         selected?.let {
             when {
                 it.isEmpty() -> solid