diff --git a/build.gradle.kts b/build.gradle.kts
index b7ee4ffd..95821d28 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -1,15 +1,11 @@
-import scientifik.fx
-import scientifik.serialization
-
-val dataforgeVersion by extra("0.1.7")
+val dataforgeVersion by extra("0.1.8-dev-2")
 
 plugins {
-    val toolsVersion = "0.4.2"
+    val toolsVersion = "0.5.0"
     id("scientifik.mpp") version toolsVersion apply false
     id("scientifik.jvm") version toolsVersion apply false
     id("scientifik.js") version toolsVersion apply false
     id("scientifik.publish") version toolsVersion apply false
-    id("org.openjfx.javafxplugin") version "0.0.8" apply false
 }
 
 allprojects {
@@ -19,12 +15,13 @@ allprojects {
         maven("http://maven.jzy3d.org/releases")
         maven("https://kotlin.bintray.com/js-externals")
         maven("https://kotlin.bintray.com/kotlin-js-wrappers/")
+        maven("https://dl.bintray.com/mipt-npm/dataforge")
 //        maven("https://dl.bintray.com/gbaldeck/kotlin")
 //        maven("https://dl.bintray.com/rjaros/kotlin")
     }
 
     group = "hep.dataforge"
-    version = "0.1.3-dev"
+    version = "0.1.4-dev"
 }
 
 val githubProject by extra("dataforge-vis")
@@ -32,9 +29,9 @@ val bintrayRepo by extra("dataforge")
 val fxVersion by extra("14")
 
 subprojects {
-    apply(plugin = "scientifik.publish")
-    serialization()
-    afterEvaluate {
-        fx(scientifik.FXModule.CONTROLS, version = fxVersion)
+    if(name.startsWith("dataforge")) {
+        apply(plugin = "scientifik.publish")
     }
+    useSerialization()
+    useFx(FXModule.CONTROLS, version = fxVersion)
 }
\ No newline at end of file
diff --git a/dataforge-vis-common/build.gradle.kts b/dataforge-vis-common/build.gradle.kts
index 11236809..7ebb7feb 100644
--- a/dataforge-vis-common/build.gradle.kts
+++ b/dataforge-vis-common/build.gradle.kts
@@ -32,19 +32,23 @@ kotlin {
             dependencies {
                 api("hep.dataforge:dataforge-output-html:$dataforgeVersion")
 
-                //React, React DOM + Wrappers (chapter 3)
-                api("org.jetbrains:kotlin-react:16.13.0-pre.94-kotlin-1.3.70")
-                api("org.jetbrains:kotlin-react-dom:16.13.0-pre.94-kotlin-1.3.70")
-                api(npm("react", "16.13.0"))
-                api(npm("react-dom", "16.13.0"))
+                api("org.jetbrains:kotlin-react:16.13.1-pre.104-kotlin-1.3.72")
+                api("org.jetbrains:kotlin-react-dom:16.13.1-pre.104-kotlin-1.3.72")
+                api("org.jetbrains.kotlinx:kotlinx-html:0.6.12")
 
-                //Kotlin Styled (chapter 3)
-                api("org.jetbrains:kotlin-styled:1.0.0-pre.94-kotlin-1.3.70")
-                api(npm("styled-components"))
-                api(npm("inline-style-prefixer"))
+                api("org.jetbrains:kotlin-extensions:1.0.1-pre.104-kotlin-1.3.72")
+                api("org.jetbrains:kotlin-css-js:1.0.0-pre.94-kotlin-1.3.70")
+                api("org.jetbrains:kotlin-styled:1.0.0-pre.104-kotlin-1.3.72")
 
-                api(npm("source-map-resolve","0.6.0"))
-                api(npm("file-saver","2.0.2"))
+                api(npm("core-js", "2.6.5"))
+
+                api(npm("react", "16.13.1"))
+                api(npm("react-dom", "16.13.1"))
+
+                api(npm("react-is", "16.13.0"))
+                api(npm("inline-style-prefixer", "5.1.0"))
+                api(npm("styled-components", "4.3.2"))
+                //api(project(":ringui-wrapper"))
             }
         }
     }
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/AbstractVisualObject.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/AbstractVisualObject.kt
index 259a5e3a..d57e20b3 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/AbstractVisualObject.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/AbstractVisualObject.kt
@@ -83,20 +83,34 @@ abstract class AbstractVisualObject : VisualObject {
 
     override fun getProperty(name: Name, inherit: Boolean): MetaItem<*>? {
         return if (inherit) {
-            properties?.get(name) ?: mergedStyles[name] ?: parent?.getProperty(name, inherit)
+            sequence {
+                yield(properties?.get(name))
+                yield(mergedStyles[name])
+                yield(parent?.getProperty(name, inherit))
+            }.merge()
         } else {
-            properties?.get(name) ?: mergedStyles[name]
+            sequence {
+                yield(properties?.get(name))
+                yield(mergedStyles[name])
+            }.merge()
         }
     }
 
+    /**
+     * Reset all properties to their default values
+     */
+    fun resetProperties() {
+        properties?.removeListener(this)
+        properties = null
+    }
+
     companion object {
         val descriptor = NodeDescriptor {
-            defineValue(STYLE_KEY){
+            value(STYLE_KEY) {
                 type(ValueType.STRING)
                 multiple = true
             }
         }
-
     }
 }
 
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/VisualObject.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/VisualObject.kt
index b757fcb3..bab25b1f 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/VisualObject.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/VisualObject.kt
@@ -44,6 +44,9 @@ interface VisualObject : Configurable {
      */
     fun propertyChanged(name: Name, before: MetaItem<*>?, after: MetaItem<*>?): Unit
 
+    /**
+     * Send a signal that property value should be reevaluated
+     */
     fun propertyInvalidated(name: Name) = propertyChanged(name, null, null)
 
     /**
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/misc.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/misc.kt
index 756fd42e..f6ccc200 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/misc.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/misc.kt
@@ -1,5 +1,8 @@
 package hep.dataforge.vis
 
+import hep.dataforge.meta.Laminate
+import hep.dataforge.meta.MetaItem
+import hep.dataforge.meta.node
 import hep.dataforge.names.Name
 import hep.dataforge.names.isEmpty
 
@@ -16,4 +19,16 @@ tailrec fun Name.selectable(): Name? = when {
     else -> {
         cutLast().selectable()
     }
+}
+
+fun Sequence<MetaItem<*>?>.merge(): MetaItem<*>?{
+    return when (val first = filterNotNull().firstOrNull()) {
+        null -> null
+        is MetaItem.ValueItem -> first //fast search for first entry if it is value
+        is MetaItem.NodeItem -> {
+            //merge nodes if first encountered node is meta
+            val laminate: Laminate = Laminate(mapNotNull { it.node }.toList())
+            MetaItem.NodeItem(laminate)
+        }
+    }
 }
\ No newline at end of file
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/valueWidget.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/valueWidget.kt
index 80e44a35..7227a7f0 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/valueWidget.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/valueWidget.kt
@@ -2,22 +2,25 @@ package hep.dataforge.vis
 
 import hep.dataforge.meta.*
 import hep.dataforge.meta.descriptors.ValueDescriptor
+import hep.dataforge.meta.descriptors.attributes
+import hep.dataforge.meta.descriptors.setAttribute
+import hep.dataforge.names.toName
 import hep.dataforge.values.asValue
 
 /**
  * Extension property to access the "widget" key of [ValueDescriptor]
  */
 var ValueDescriptor.widget: Meta
-    get() = getProperty("widget").node ?: Meta.EMPTY
+    get() = attributes["widget"].node ?: Meta.EMPTY
     set(value) {
-        setProperty("widget", value)
+        setAttribute("widget".toName(), value)
     }
 
 /**
  * Extension property to access the "widget.type" key of [ValueDescriptor]
  */
 var ValueDescriptor.widgetType: String?
-    get() = getProperty("widget.type").string
+    get() = attributes["widget.type"].string
     set(value) {
-        setProperty("widget.type", value?.asValue())
+        setAttribute("widget.type".toName(), value)
     }
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/jsExtra.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/jsExtra.kt
index 6354a61c..e3105dd5 100644
--- a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/jsExtra.kt
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/jsExtra.kt
@@ -12,10 +12,6 @@ inline fun <T : Any> jsObject(builder: T.() -> Unit): T {
 
 inline fun js(builder: dynamic.() -> Unit): dynamic = jsObject(builder)
 
-//fun <T : Any> clone(obj: T) = objectAssign(jsObject<T> {}, obj)
-
-//inline fun <T : Any> assign(obj: T, builder: T.() -> Unit) = clone(obj).apply(builder)
-
 fun toPlainObjectStripNull(obj: Any) = js {
     for (key in Object.keys(obj)) {
         val value = obj.asDynamic()[key]
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/valueChooser.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/valueChooser.kt
deleted file mode 100644
index 9b71a03a..00000000
--- a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/valueChooser.kt
+++ /dev/null
@@ -1,90 +0,0 @@
-package hep.dataforge.vis.editor
-
-import hep.dataforge.meta.Config
-import hep.dataforge.meta.descriptors.ValueDescriptor
-import hep.dataforge.meta.get
-import hep.dataforge.meta.setValue
-import hep.dataforge.meta.string
-import hep.dataforge.names.Name
-import hep.dataforge.values.*
-import hep.dataforge.vis.widgetType
-import kotlinx.html.InputType
-import kotlinx.html.js.onChangeFunction
-import org.w3c.dom.HTMLInputElement
-import org.w3c.dom.HTMLSelectElement
-import org.w3c.dom.events.Event
-import react.RBuilder
-import react.dom.*
-
-internal fun RBuilder.valueChooser(root: Config, name: Name, value: Value, descriptor: ValueDescriptor?) {
-    val onValueChange: (Event) -> Unit = {
-        val res = when (val t = it.target) {
-            // (it.target as HTMLInputElement).value
-            is HTMLInputElement -> if (t.type == "checkbox") {
-                if (t.checked) True else False
-            } else {
-                t.value.asValue()
-            }
-            is HTMLSelectElement -> t.value.asValue()
-            else -> error("Unknown event target: $t")
-        }
-
-        try {
-            root.setValue(name, res)
-        } catch (ex: Exception) {
-            console.error("Can't set config property ${name} to $res")
-        }
-    }
-
-    div() {
-        val type = descriptor?.type?.firstOrNull()
-        when {
-            type == ValueType.BOOLEAN -> {
-                input(type = InputType.checkBox) {
-                    attrs {
-                        checked = value.boolean
-                        onChangeFunction = onValueChange
-                    }
-                }
-            }
-            type == ValueType.NUMBER -> input(type = InputType.number, classes = "form-control w-100") {
-                attrs {
-                    descriptor.attributes["step"].string?.let {
-                        step = it
-                    }
-                    descriptor.attributes["min"].string?.let {
-                        min = it
-                    }
-                    descriptor.attributes["max"].string?.let {
-                        max = it
-                    }
-                    this.defaultValue = value.string
-                    onChangeFunction = onValueChange
-                }
-            }
-            descriptor?.allowedValues?.isNotEmpty() ?: false -> select (classes = "w-100") {
-                descriptor!!.allowedValues.forEach {
-                    option {
-                        +it.string
-                    }
-                }
-                attrs {
-                    multiple = false
-                    onChangeFunction = onValueChange
-                }
-            }
-            descriptor?.widgetType == "color" -> input(type = InputType.color) {
-                attrs {
-                    this.value = value.string
-                    onChangeFunction = onValueChange
-                }
-            }
-            else -> input(type = InputType.text, classes = "form-control w-100") {
-                attrs {
-                    this.value = value.string
-                    onChangeFunction = onValueChange
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jvmTest/kotlin/hep/dataforge/vis/demo/MetaEditorDemo.kt b/dataforge-vis-common/src/jvmTest/kotlin/hep/dataforge/vis/demo/MetaEditorDemo.kt
index 0c4060f1..f41a9d41 100644
--- a/dataforge-vis-common/src/jvmTest/kotlin/hep/dataforge/vis/demo/MetaEditorDemo.kt
+++ b/dataforge-vis-common/src/jvmTest/kotlin/hep/dataforge/vis/demo/MetaEditorDemo.kt
@@ -26,21 +26,21 @@ class MetaEditorDemo : View("Meta editor demo") {
     }.asConfig()
 
     val descriptor = NodeDescriptor {
-        defineNode("aNode") {
+        node("aNode") {
             info = "A root demo node"
-            defineValue("b") {
+            value("b") {
                 info = "b number value"
                 type(ValueType.NUMBER)
             }
-            defineNode("otherNode") {
-                defineValue("otherValue") {
+            node("otherNode") {
+                value("otherValue") {
                     type(ValueType.BOOLEAN)
                     default(false)
                     info = "default value"
                 }
             }
         }
-        defineValue("multiple") {
+        node("multiple") {
             info = "A sns value"
             multiple = true
         }
diff --git a/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt b/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt
index 9f3bb093..c6f6d034 100644
--- a/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt
+++ b/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt
@@ -253,9 +253,7 @@ private fun volume(
 }
 
 fun GDML.toVisual(block: GDMLTransformer.() -> Unit = {}): VisualGroup3D {
-
     val context = GDMLTransformer(this).apply(block)
-
     return context.finalize(volume(context, world))
 }
 
diff --git a/dataforge-vis-spatial/build.gradle.kts b/dataforge-vis-spatial/build.gradle.kts
index ac9f58eb..6cc31048 100644
--- a/dataforge-vis-spatial/build.gradle.kts
+++ b/dataforge-vis-spatial/build.gradle.kts
@@ -1,10 +1,10 @@
-import scientifik.serialization
+import scientifik.*
 
 plugins {
     id("scientifik.mpp")
 }
 
-serialization()
+useSerialization()
 
 kotlin {
     js {
@@ -30,9 +30,10 @@ kotlin {
         }
         jsMain {
             dependencies {
-//                api(project(":wrappers"))
+                implementation(project(":ui:bootstrap"))//to be removed later
                 implementation(npm("three", "0.114.0"))
                 implementation(npm("three-csg-ts", "1.0.1"))
+                api(npm("file-saver", "2.0.2"))
             }
         }
     }
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Material3D.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Material3D.kt
index 71766435..6d55d40c 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Material3D.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Material3D.kt
@@ -2,6 +2,7 @@ package hep.dataforge.vis.spatial
 
 import hep.dataforge.meta.*
 import hep.dataforge.meta.descriptors.NodeDescriptor
+import hep.dataforge.meta.descriptors.attributes
 import hep.dataforge.names.asName
 import hep.dataforge.names.plus
 import hep.dataforge.values.ValueType
@@ -39,7 +40,8 @@ class Material3D : Scheme() {
         val MATERIAL_KEY = "material".asName()
         internal val COLOR_KEY = "color".asName()
         val MATERIAL_COLOR_KEY = MATERIAL_KEY + COLOR_KEY
-        val SPECULAR_COLOR_KEY = "specularColor".asName()
+        internal val SPECULAR_COLOR_KEY = "specularColor".asName()
+        val MATERIAL_SPECULAR_COLOR_KEY = MATERIAL_KEY + SPECULAR_COLOR_KEY
         internal val OPACITY_KEY = "opacity".asName()
         val MATERIAL_OPACITY_KEY = MATERIAL_KEY + OPACITY_KEY
         internal val WIREFRAME_KEY = "wireframe".asName()
@@ -48,21 +50,22 @@ class Material3D : Scheme() {
         val descriptor by lazy {
             //must be lazy to avoid initialization bug
             NodeDescriptor {
-                defineValue(COLOR_KEY) {
+                value(COLOR_KEY) {
                     type(ValueType.STRING, ValueType.NUMBER)
                     default("#ffffff")
                     widgetType = "color"
                 }
-                defineValue(OPACITY_KEY) {
+                value(OPACITY_KEY) {
                     type(ValueType.NUMBER)
                     default(1.0)
-                    config["attributes"] = Meta {
+                    attributes {
                         this["min"] = 0.0
                         this["max"] = 1.0
                         this["step"] = 0.1
                     }
+                    widgetType = "slider"
                 }
-                defineValue(WIREFRAME_KEY) {
+                value(WIREFRAME_KEY) {
                     type(ValueType.BOOLEAN)
                     default(false)
                 }
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Proxy.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Proxy.kt
index b7fb006f..6a72c3f4 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Proxy.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Proxy.kt
@@ -50,14 +50,18 @@ class Proxy private constructor(
 
     override fun getProperty(name: Name, inherit: Boolean): MetaItem<*>? {
         return if (inherit) {
-            properties?.get(name)
-                ?: mergedStyles[name]
-                ?: prototype.getProperty(name)
-                ?: parent?.getProperty(name)
+            sequence {
+                yield(properties?.get(name))
+                yield(mergedStyles[name])
+                yield(prototype.getProperty(name))
+                yield(parent?.getProperty(name, inherit))
+            }.merge()
         } else {
-            properties?.get(name)
-                ?: mergedStyles[name]
-                ?: prototype.getProperty(name, false)
+            sequence {
+                yield(properties?.get(name))
+                yield(mergedStyles[name])
+                yield(prototype.getProperty(name, false))
+            }.merge()
         }
     }
 
@@ -125,14 +129,18 @@ class Proxy private constructor(
 
         override fun getProperty(name: Name, inherit: Boolean): MetaItem<*>? {
             return if (inherit) {
-                properties?.get(name)
-                    ?: mergedStyles[name]
-                    ?: prototype.getProperty(name)
-                    ?: parent?.getProperty(name)
+                sequence {
+                    yield(properties?.get(name))
+                    yield(mergedStyles[name])
+                    yield(prototype.getProperty(name))
+                    yield(parent?.getProperty(name, inherit))
+                }.merge()
             } else {
-                properties?.get(name)
-                    ?: mergedStyles[name]
-                    ?: prototype.getProperty(name, false)
+                sequence {
+                    yield(properties?.get(name))
+                    yield(mergedStyles[name])
+                    yield(prototype.getProperty(name, false))
+                }.merge()
             }
         }
 
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualObject3D.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualObject3D.kt
index 8cd0369d..5c40d4fe 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualObject3D.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualObject3D.kt
@@ -63,18 +63,18 @@ interface VisualObject3D : VisualObject {
 
         val descriptor by lazy {
             NodeDescriptor {
-                defineValue(VISIBLE_KEY) {
+                value(VISIBLE_KEY) {
                     type(ValueType.BOOLEAN)
                     default(true)
                 }
 
                 //TODO replace by descriptor merge
-                defineValue(VisualObject.STYLE_KEY){
+                value(VisualObject.STYLE_KEY){
                     type(ValueType.STRING)
                     multiple = true
                 }
 
-                defineItem(Material3D.MATERIAL_KEY.toString(), Material3D.descriptor)
+                item(Material3D.MATERIAL_KEY.toString(), Material3D.descriptor)
             }
         }
     }
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvas.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvas.kt
index 0a49e96a..1a60cccc 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvas.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvas.kt
@@ -96,7 +96,7 @@ class ThreeCanvas(element: HTMLElement, val three: ThreePlugin, val canvas: Canv
             val picked = pick()
 
             if (picked != null && this.picked != picked) {
-                this.picked?.toggleHighlight(false,HIGHLIGHT_NAME, HIGHLIGHT_MATERIAL)
+                this.picked?.toggleHighlight(false, HIGHLIGHT_NAME, HIGHLIGHT_MATERIAL)
                 picked.toggleHighlight(true, HIGHLIGHT_NAME, HIGHLIGHT_MATERIAL)
                 this.picked = picked
             }
@@ -131,10 +131,7 @@ class ThreeCanvas(element: HTMLElement, val three: ThreePlugin, val canvas: Canv
         }
     }
 
-    private fun Object3D.isStatic(): Boolean {
-        return false
-    }
-
+    //find first non-static parent in this object ancestry
     private fun Object3D?.upTrace(): Object3D? = if (this?.name?.startsWith("@") == true) parent else this
 
     private fun pick(): Object3D? {
@@ -144,7 +141,8 @@ class ThreeCanvas(element: HTMLElement, val three: ThreePlugin, val canvas: Canv
         // calculate objects intersecting the picking ray
         return root?.let { root ->
             val intersects = raycaster.intersectObject(root, true)
-            val obj = intersects.map { it.`object` }.firstOrNull { !it.isStatic() }
+            //skip invisible objects
+            val obj = intersects.map { it.`object` }.firstOrNull { it.visible }
             obj.upTrace()
         }
     }
@@ -168,7 +166,7 @@ class ThreeCanvas(element: HTMLElement, val three: ThreePlugin, val canvas: Canv
         }
     }
 
-    fun clear(){
+    fun clear() {
         scene.children.find { it.name == "@root" }?.let {
             scene.remove(it)
         }
@@ -186,7 +184,7 @@ class ThreeCanvas(element: HTMLElement, val three: ThreePlugin, val canvas: Canv
         root = object3D
     }
 
-    private var highlighted: Object3D? = null
+    private var selected: Object3D? = null
 
     /**
      * Toggle highlight for the given [Mesh] object
@@ -224,15 +222,15 @@ class ThreeCanvas(element: HTMLElement, val three: ThreePlugin, val canvas: Canv
      */
     fun select(name: Name?) {
         if (name == null) {
-            highlighted?.toggleHighlight(false, SELECT_NAME, SELECTED_MATERIAL)
-            highlighted = null
+            selected?.toggleHighlight(false, SELECT_NAME, SELECTED_MATERIAL)
+            selected = null
             return
         }
         val obj = root?.findChild(name)
-        if (obj != null && highlighted != obj) {
-            highlighted?.toggleHighlight(false, SELECT_NAME, SELECTED_MATERIAL)
+        if (obj != null && selected != obj) {
+            selected?.toggleHighlight(false, SELECT_NAME, SELECTED_MATERIAL)
             obj.toggleHighlight(true, SELECT_NAME, SELECTED_MATERIAL)
-            highlighted = obj
+            selected = obj
         }
     }
 
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvasComponent.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvasComponent.kt
index 37fbc997..a5618284 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvasComponent.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvasComponent.kt
@@ -29,7 +29,7 @@ interface ThreeCanvasState : RState {
 
 class ThreeCanvasComponent : RComponent<ThreeCanvasProps, ThreeCanvasState>() {
 
-    var canvas: ThreeCanvas? = null
+    private var canvas: ThreeCanvas? = null
 
     override fun componentDidMount() {
         if(canvas == null) {
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeMaterials.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeMaterials.kt
index be99f14f..342212fe 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeMaterials.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeMaterials.kt
@@ -5,6 +5,7 @@ import hep.dataforge.values.ValueType
 import hep.dataforge.vis.Colors
 import hep.dataforge.vis.VisualObject
 import hep.dataforge.vis.spatial.Material3D
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_SPECULAR_COLOR_KEY
 import info.laht.threekt.materials.LineBasicMaterial
 import info.laht.threekt.materials.Material
 import info.laht.threekt.materials.MeshBasicMaterial
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/outputConfig.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/outputConfig.kt
index a2796502..196651b9 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/outputConfig.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/outputConfig.kt
@@ -1,8 +1,8 @@
 package hep.dataforge.vis.spatial.three
 
-import hep.dataforge.js.accordion
-import hep.dataforge.js.entry
 import hep.dataforge.js.requireJS
+import hep.dataforge.vis.bootstrap.accordion
+import hep.dataforge.vis.bootstrap.entry
 import hep.dataforge.vis.spatial.Visual3D
 import hep.dataforge.vis.spatial.VisualGroup3D
 import kotlinx.html.*
diff --git a/demo/gdml/build.gradle.kts b/demo/gdml/build.gradle.kts
index 798a866d..fdaeadc8 100644
--- a/demo/gdml/build.gradle.kts
+++ b/demo/gdml/build.gradle.kts
@@ -1,6 +1,4 @@
-import scientifik.DependencyConfiguration
-import scientifik.FXModule
-import scientifik.fx
+import scientifik.*
 
 plugins {
     id("scientifik.mpp")
@@ -8,7 +6,7 @@ plugins {
 }
 
 val fxVersion: String by rootProject.extra
-fx(FXModule.CONTROLS, version = fxVersion, configuration = DependencyConfiguration.IMPLEMENTATION)
+useFx(FXModule.CONTROLS, version = fxVersion, configuration = DependencyConfiguration.IMPLEMENTATION)
 
 kotlin {
 
@@ -17,6 +15,7 @@ kotlin {
     }
 
     js {
+        useCommonJs()
         browser {
             webpackTask {
                 //sourceMaps = false
@@ -27,8 +26,14 @@ kotlin {
     sourceSets {
         commonMain {
             dependencies {
-                api(project(":dataforge-vis-spatial"))
-                api(project(":dataforge-vis-spatial-gdml"))
+                implementation(project(":dataforge-vis-spatial"))
+                implementation(project(":dataforge-vis-spatial-gdml"))
+            }
+        }
+        jsMain{
+            dependencies {
+                implementation(project(":ui:bootstrap"))
+                implementation(npm("react-file-drop", "3.0.6"))
             }
         }
     }
diff --git a/demo/gdml/src/jsMain/kotlin/drop/FileDrop.kt b/demo/gdml/src/jsMain/kotlin/drop/FileDrop.kt
new file mode 100644
index 00000000..2799eead
--- /dev/null
+++ b/demo/gdml/src/jsMain/kotlin/drop/FileDrop.kt
@@ -0,0 +1,40 @@
+@file:JsModule("react-file-drop")
+@file:JsNonModule
+
+package drop
+
+import org.w3c.dom.DragEvent
+import org.w3c.files.FileList
+import react.*
+
+external enum class DropEffects {
+    copy,
+    move,
+    link,
+    none
+}
+
+external interface FileDropProps: RProps {
+    var className: String?
+    var targetClassName: String?
+    var draggingOverFrameClassName: String?
+    var draggingOverTargetClassName: String?
+
+//    var frame?: Exclude<HTMLElementTagNameMap[keyof HTMLElementTagNameMap], HTMLElement> | HTMLDocument;
+    var onFrameDragEnter: ((event: DragEvent) -> Unit)?
+    var onFrameDragLeave: ((event: DragEvent) -> Unit)?
+    var onFrameDrop: ((event: DragEvent) -> Unit)?
+//    var onDragOver: ReactDragEventHandler<HTMLDivElement>?
+//    var onDragLeave: ReactDragEventHandler<HTMLDivElement>?
+    var onDrop: ((files: FileList?, event: dynamic) -> Unit)?//event:DragEvent<HTMLDivElement>)
+    var dropEffect: DropEffects?
+}
+
+external interface FileDropState: RState {
+    var draggingOverFrame: Boolean
+    var draggingOverTarget: Boolean
+}
+
+external class FileDrop : Component<FileDropProps, FileDropState> {
+    override fun render(): dynamic
+}
\ No newline at end of file
diff --git a/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLAppComponent.kt b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLAppComponent.kt
new file mode 100644
index 00000000..6f3cae91
--- /dev/null
+++ b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLAppComponent.kt
@@ -0,0 +1,138 @@
+package hep.dataforge.vis.spatial.gdml.demo
+
+import hep.dataforge.context.Context
+import hep.dataforge.names.Name
+import hep.dataforge.names.isEmpty
+import hep.dataforge.vis.VisualGroup
+import hep.dataforge.vis.VisualObject
+import hep.dataforge.vis.bootstrap.*
+import hep.dataforge.vis.react.component
+import hep.dataforge.vis.react.state
+import hep.dataforge.vis.spatial.VisualGroup3D
+import hep.dataforge.vis.spatial.VisualObject3D
+import hep.dataforge.vis.spatial.gdml.toVisual
+import hep.dataforge.vis.spatial.specifications.Camera
+import hep.dataforge.vis.spatial.specifications.Canvas
+import hep.dataforge.vis.spatial.three.ThreeCanvas
+import hep.dataforge.vis.spatial.three.ThreeCanvasComponent
+import hep.dataforge.vis.spatial.three.canvasControls
+import org.w3c.files.FileReader
+import org.w3c.files.get
+import react.RProps
+import react.dom.h1
+import scientifik.gdml.GDML
+import scientifik.gdml.parse
+import kotlin.browser.window
+import kotlin.math.PI
+
+interface GDMLAppProps : RProps {
+    var context: Context
+    var rootObject: VisualObject?
+    var selected: Name?
+}
+
+private val canvasConfig = Canvas {
+    camera = Camera {
+        distance = 2100.0
+        latitude = PI / 6
+        azimuth = PI + PI / 6
+    }
+}
+
+val GDMLApp = component<GDMLAppProps> { props ->
+    var selected by state { props.selected }
+    var canvas: ThreeCanvas? by state { null }
+    var visual: VisualObject? by state { props.rootObject }
+
+    val select: (Name?) -> Unit = {
+        selected = it
+    }
+
+    fun loadData(name: String, data: String) {
+        visual = when {
+            name.endsWith(".gdml") || name.endsWith(".xml") -> {
+                val gdml = GDML.parse(data)
+                gdml.toVisual(gdmlConfiguration)
+            }
+            name.endsWith(".json") -> VisualGroup3D.parseJson(data)
+            else -> {
+                window.alert("File extension is not recognized: $name")
+                error("File extension is not recognized: $name")
+            }
+        }
+    }
+
+    flexColumn {
+        h1 { +"GDML/JSON loader demo" }
+        gridRow {
+            gridColumn(3) {
+                card("Load data") {
+                    fileDrop("(drag file here)") { files ->
+                        val file = files?.get(0)
+                        if (file != null) {
+
+                            FileReader().apply {
+                                onload = {
+                                    val string = result as String
+                                    loadData(file.name, string)
+                                }
+                                readAsText(file)
+                            }
+                        }
+                    }
+                }
+                //tree
+                card("Object tree") {
+                    visual?.let {
+                        objectTree(it, selected, select)
+                    }
+                }
+            }
+
+            gridColumn(6) {
+                //canvas
+                (visual as? VisualObject3D)?.let { visual3D ->
+                    child(ThreeCanvasComponent::class) {
+                        attrs {
+                            this.context = props.context
+                            this.obj = visual3D
+                            this.selected = selected
+                            this.clickCallback = select
+                            this.canvasCallback = {
+                                canvas = it
+                            }
+                        }
+                    }
+                }
+            }
+            gridColumn(3) {
+                gridRow {
+                    //settings
+                    canvas?.let {
+                        card("Canvas configuration") {
+                            canvasControls(it)
+                        }
+                    }
+                }
+                gridRow {
+                    namecrumbs(selected, "World") { selected = it }
+                }
+                gridRow {
+                    //properties
+                    card("Properties") {
+                        selected.let { selected ->
+                            val selectedObject: VisualObject? = when {
+                                selected == null -> null
+                                selected.isEmpty() -> visual
+                                else -> (visual as? VisualGroup)?.get(selected)
+                            }
+                            if (selectedObject != null) {
+                                configEditor(selectedObject, default = selectedObject.allProperties(), key = selected)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
index 0c451902..3c969d00 100644
--- a/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
+++ b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
@@ -3,193 +3,72 @@ package hep.dataforge.vis.spatial.gdml.demo
 import hep.dataforge.context.Global
 import hep.dataforge.js.Application
 import hep.dataforge.js.startApplication
-import hep.dataforge.names.Name
-import hep.dataforge.names.isEmpty
-import hep.dataforge.vis.VisualGroup
-import hep.dataforge.vis.VisualObject
-import hep.dataforge.vis.editor.renderObjectTree
-import hep.dataforge.vis.editor.visualPropertyEditor
 import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_OPACITY_KEY
-import hep.dataforge.vis.spatial.VisualGroup3D
-import hep.dataforge.vis.spatial.VisualObject3D
 import hep.dataforge.vis.spatial.gdml.GDMLTransformer
 import hep.dataforge.vis.spatial.gdml.LUnit
 import hep.dataforge.vis.spatial.gdml.toVisual
-import hep.dataforge.vis.spatial.three.ThreePlugin
-import hep.dataforge.vis.spatial.three.displayCanvasControls
-import hep.dataforge.vis.spatial.three.output
-import org.w3c.dom.*
-import org.w3c.files.FileList
-import org.w3c.files.FileReader
-import org.w3c.files.get
-import scientifik.gdml.GDML
+import react.child
+import react.dom.div
+import react.dom.render
 import kotlin.browser.document
-import kotlin.browser.window
-import kotlin.dom.clear
+
+
+val gdmlConfiguration: GDMLTransformer.() -> Unit = {
+    lUnit = LUnit.CM
+    volumeAction = { volume ->
+        when {
+            volume.name.startsWith("ecal01lay") -> GDMLTransformer.Action.REJECT
+            volume.name.startsWith("UPBL") -> GDMLTransformer.Action.REJECT
+            volume.name.startsWith("USCL") -> GDMLTransformer.Action.REJECT
+            volume.name.startsWith("VPBL") -> GDMLTransformer.Action.REJECT
+            volume.name.startsWith("VSCL") -> GDMLTransformer.Action.REJECT
+            else -> GDMLTransformer.Action.CACHE
+        }
+    }
+
+    solidConfiguration = { parent, solid ->
+        if (
+            solid.name.startsWith("Yoke")
+            || solid.name.startsWith("Pole")
+            || parent.physVolumes.isNotEmpty()
+        ) {
+            useStyle("opaque") {
+                MATERIAL_OPACITY_KEY put 0.3
+            }
+        }
+    }
+}
 
 private class GDMLDemoApp : Application {
-    /**
-     * Handle mouse drag according to https://www.html5rocks.com/en/tutorials/file/dndfiles/
-     */
-    private fun handleDragOver(event: DragEvent) {
-        event.stopPropagation()
-        event.preventDefault()
-        event.dataTransfer?.dropEffect = "copy"
-    }
-
-    /**
-     * Load data from text file
-     */
-    private fun loadData(event: DragEvent, block: (name: String, data: String) -> Unit) {
-        event.stopPropagation()
-        event.preventDefault()
-
-        val file = (event.dataTransfer?.files as FileList)[0]
-            ?: throw RuntimeException("Failed to load file")
-
-        FileReader().apply {
-            onload = {
-                val string = result as String
-                block(file.name, string)
-            }
-            readAsText(file)
-        }
-    }
-
-    private fun spinner(show: Boolean) {
-//        if( show){
-//
-//        val style = if (show) {
-//            "display:block;"
-//        } else {
-//            "display:none;"
-//        }
-//        document.getElementById("canvas")?.append {
-//
-//        }
-    }
-
-    private fun message(message: String?) {
-        console.log(message)
-//        document.getElementById("messages")?.let { element ->
-//            if (message == null) {
-//                element.clear()
-//            } else {
-//                element.append {
-//                    p {
-//                        +message
-//                    }
-//                }
-//            }
-//        }
-    }
-
-    private val gdmlConfiguration: GDMLTransformer.() -> Unit = {
-        lUnit = LUnit.CM
-        volumeAction = { volume ->
-            when {
-                volume.name.startsWith("ecal01lay") -> GDMLTransformer.Action.REJECT
-                volume.name.startsWith("UPBL") -> GDMLTransformer.Action.REJECT
-                volume.name.startsWith("USCL") -> GDMLTransformer.Action.REJECT
-                volume.name.startsWith("VPBL") -> GDMLTransformer.Action.REJECT
-                volume.name.startsWith("VSCL") -> GDMLTransformer.Action.REJECT
-                else -> GDMLTransformer.Action.CACHE
-            }
-        }
-
-        solidConfiguration = { parent, solid ->
-            if (
-                solid.name.startsWith("Yoke")
-                || solid.name.startsWith("Pole")
-                || parent.physVolumes.isNotEmpty()
-            ) {
-                useStyle("opaque") {
-                    MATERIAL_OPACITY_KEY put 0.3
-                }
-            }
-        }
-    }
-
 
     override fun start(state: Map<String, Any>) {
 
         val context = Global.context("demo") {}
-        val three = context.plugins.load(ThreePlugin)
-        //val url = URL("https://drive.google.com/open?id=1w5e7fILMN83JGgB8WANJUYm8OW2s0WVO")
+        val element = document.getElementById("app") ?: error("Element with id 'app' not found on page")
 
-        val canvasElement = document.getElementById("canvas") ?: error("Element with id 'canvas' not found on page")
-        val configElement = document.getElementById("config") ?: error("Element with id 'layers' not found on page")
-        val treeElement = document.getElementById("tree") ?: error("Element with id 'tree' not found on page")
-        val editorElement = document.getElementById("editor") ?: error("Element with id 'editor' not found on page")
-        canvasElement.clear()
-
-        val action: (name: String, data: String) -> Unit = { name, data ->
-            canvasElement.clear()
-            spinner(true)
-            val visual: VisualObject3D = when {
-                name.endsWith(".gdml") || name.endsWith(".xml") -> {
-                    message("Loading GDML")
-                    val gdml = GDML.format.parse(GDML.serializer(), data)
-                    message("Converting GDML into DF-VIS format")
-                    gdml.toVisual(gdmlConfiguration)
-                }
-                name.endsWith(".json") -> VisualGroup3D.parseJson(data)
-                else -> {
-                    window.alert("File extension is not recognized: $name")
-                    error("File extension is not recognized: $name")
-                }
-            }
-
-            //Optimize tree
-            //(visual as? VisualGroup3D)?.transformInPlace(UnRef, RemoveSingleChild)
-
-            message("Rendering")
-
-            //output.camera.layers.enable(1)
-            val canvas = three.output(canvasElement as HTMLElement)
-
-            canvas.camera.layers.set(0)
-            configElement.displayCanvasControls(canvas)
-            //tree.visualObjectTree(visual, editor::propertyEditor)
-            fun selectElement(name: Name) {
-                val child: VisualObject = when {
-                    name.isEmpty() -> visual
-                    visual is VisualGroup -> visual[name] ?: return
-                    else -> return
-                }
-                canvas.select(name)
-                editorElement.visualPropertyEditor(name, child)
-
-            }
-
-//        canvas.clickListener = ::selectElement
-
-            //tree.visualObjectTree(visual, editor::propertyEditor)
-            treeElement.renderObjectTree(visual) { treeName ->
-                selectElement(treeName)
-            }
-            canvas.render(visual)
-            message(null)
-            spinner(false)
-        }
-
-        (document.getElementById("drop_zone") as? HTMLDivElement)?.apply {
-            addEventListener("dragover", { handleDragOver(it as DragEvent) }, false)
-            addEventListener("drop", { loadData(it as DragEvent, action) }, false)
-        }
-        (document.getElementById("file_load_button") as? HTMLInputElement)?.apply {
-            addEventListener("change", {
-                (it.target as HTMLInputElement).files?.asList()?.first()?.let { file ->
-                    FileReader().apply {
-                        onload = {
-                            val string = result as String
-                            action(file.name, string)
-                        }
-                        readAsText(file)
+        render(element) {
+            div("h-100") {
+                child(GDMLApp) {
+                    attrs {
+                        this.context = context
+                        this.rootObject = cubes().toVisual(gdmlConfiguration)
                     }
                 }
-            }, false)
+            }
         }
+//        (document.getElementById("file_load_button") as? HTMLInputElement)?.apply {
+//            addEventListener("change", {
+//                (it.target as HTMLInputElement).files?.asList()?.first()?.let { file ->
+//                    FileReader().apply {
+//                        onload = {
+//                            val string = result as String
+//                            action(file.name, string)
+//                        }
+//                        readAsText(file)
+//                    }
+//                }
+//            }, false)
+//        }
 
     }
 }
diff --git a/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/fileDrop.kt b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/fileDrop.kt
new file mode 100644
index 00000000..aa0445aa
--- /dev/null
+++ b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/fileDrop.kt
@@ -0,0 +1,30 @@
+package hep.dataforge.vis.spatial.gdml.demo
+
+import drop.FileDrop
+import kotlinx.css.*
+import kotlinx.css.properties.border
+import org.w3c.files.FileList
+import react.RBuilder
+import styled.css
+import styled.styledDiv
+
+//TODO move styles to inline
+
+fun RBuilder.fileDrop(title: String, action: (files: FileList?) -> Unit) {
+    styledDiv {
+        css {
+            border(style = BorderStyle.dashed, width = 1.px, color = Color.orange)
+            alignContent = Align.center
+        }
+
+        child(FileDrop::class) {
+            attrs {
+                onDrop = { files, _ ->
+                    console.info("loaded $files")
+                    action(files)
+                }
+            }
+            +title
+        }
+    }
+}
\ No newline at end of file
diff --git a/demo/gdml/src/jsMain/resources/css/fileDrop.css b/demo/gdml/src/jsMain/resources/css/fileDrop.css
new file mode 100644
index 00000000..6f66e353
--- /dev/null
+++ b/demo/gdml/src/jsMain/resources/css/fileDrop.css
@@ -0,0 +1,62 @@
+.file-drop {
+    /* relatively position the container bc the contents are absolute */
+    position: relative;
+    height: 100px;
+    width: 100%;
+}
+
+.file-drop > .file-drop-target {
+    /* basic styles */
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: 2px;
+
+    /* horizontally and vertically center all content */
+    display: flex;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+
+    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+
+    align-items: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+
+    justify-content: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+
+    align-content: center;
+    -webkit-align-content: center;
+    -ms-flex-line-pack: center;
+
+    text-align: center;
+}
+
+.file-drop > .file-drop-target.file-drop-dragging-over-frame {
+    /* overlay a black mask when dragging over the frame */
+    border: none;
+    background-color: rgba(0, 0, 0, 0.65);
+    box-shadow: none;
+    z-index: 50;
+    opacity: 1;
+
+    /* typography */
+    color: white;
+}
+
+.file-drop > .file-drop-target.file-drop-dragging-over-target {
+    /* turn stuff orange when we are dragging over the target */
+    color: #ff6e40;
+    box-shadow: 0 0 13px 3px #ff6e40;
+}
\ No newline at end of file
diff --git a/demo/gdml/src/jsMain/resources/css/jsoneditor.min.css b/demo/gdml/src/jsMain/resources/css/jsoneditor.min.css
deleted file mode 100644
index 63190af9..00000000
--- a/demo/gdml/src/jsMain/resources/css/jsoneditor.min.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.jsoneditor .search input{height:auto;border:inherit;border:none;box-shadow:none}.jsoneditor table{border-collapse:collapse;width:auto}.jsoneditor td,.jsoneditor th{padding:0;display:table-cell;text-align:left;vertical-align:inherit;border-radius:inherit}.jsoneditor{color:#1a1a1a;border:thin solid #3883fa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;position:relative;padding:0;line-height:100%}div.jsoneditor-default,div.jsoneditor-field,div.jsoneditor-readonly,div.jsoneditor-value{border:1px solid transparent;min-height:16px;min-width:32px;padding:2px;margin:1px;word-wrap:break-word;float:left}div.jsoneditor-field p,div.jsoneditor-value p{margin:0}div.jsoneditor-value{word-break:break-word}div.jsoneditor-value.jsoneditor-empty::after{content:"value"}div.jsoneditor-value.jsoneditor-string{color:#006000}div.jsoneditor-value.jsoneditor-number{color:#ee422e}div.jsoneditor-value.jsoneditor-boolean{color:#ff8c00}div.jsoneditor-value.jsoneditor-null{color:#004ed0}div.jsoneditor-value.jsoneditor-invalid{color:#000}div.jsoneditor-readonly{min-width:16px;color:grey}div.jsoneditor-empty{border-color:#d3d3d3;border-style:dashed;border-radius:2px}div.jsoneditor-field.jsoneditor-empty::after{content:"field"}div.jsoneditor td{vertical-align:top}div.jsoneditor td.jsoneditor-separator{padding:3px 0;vertical-align:top;color:grey}div.jsoneditor td.jsoneditor-tree{vertical-align:top}div.jsoneditor div.jsoneditor-anchor{cursor:pointer}div.jsoneditor div.jsoneditor-anchor .picker_wrapper.popup.popup_bottom{top:28px;left:-10px}div.jsoneditor.busy pre.jsoneditor-preview{background:#f5f5f5;color:grey}div.jsoneditor.busy div.jsoneditor-busy{display:inherit}div.jsoneditor code.jsoneditor-preview{background:0 0}div.jsoneditor.jsoneditor-mode-preview pre.jsoneditor-preview{width:100%;height:100%;box-sizing:border-box;overflow:auto;padding:2px;margin:0;white-space:pre-wrap;word-break:break-all}div.jsoneditor-default{color:grey;padding-left:10px}div.jsoneditor-tree{width:100%;height:100%;position:relative;overflow:auto}div.jsoneditor-tree button.jsoneditor-button{width:24px;height:24px;padding:0;margin:0;border:none;cursor:pointer;background:transparent url(../img/jsoneditor-icons.svg)}div.jsoneditor-tree button.jsoneditor-button:focus{background-color:#f5f5f5;outline:#e5e5e5 solid 1px}div.jsoneditor-tree button.jsoneditor-collapsed{background-position:0 -48px}div.jsoneditor-tree button.jsoneditor-expanded{background-position:0 -72px}div.jsoneditor-tree button.jsoneditor-contextmenu{background-position:-48px -72px}div.jsoneditor-tree button.jsoneditor-invisible{visibility:hidden;background:0 0}div.jsoneditor-tree button.jsoneditor-dragarea{background:url(../img/jsoneditor-icons.svg) -72px -72px;cursor:move}div.jsoneditor-tree :focus{outline:0}div.jsoneditor-tree div.jsoneditor-show-more{display:inline-block;padding:3px 4px;margin:2px 0;background-color:#e5e5e5;border-radius:3px;color:grey;font-family:arial,sans-serif;font-size:10pt}div.jsoneditor-tree div.jsoneditor-show-more a{display:inline-block;color:grey}div.jsoneditor-tree div.jsoneditor-color{display:inline-block;width:12px;height:12px;margin:4px;border:1px solid grey;cursor:pointer}div.jsoneditor-tree div.jsoneditor-date{background:#a1a1a1;color:#fff;font-family:arial,sans-serif;border-radius:3px;display:inline-block;padding:3px;margin:0 3px}div.jsoneditor-tree table.jsoneditor-tree{border-collapse:collapse;border-spacing:0;width:100%}div.jsoneditor-tree .jsoneditor-button.jsoneditor-schema-error{width:24px;height:24px;padding:0;margin:0 4px 0 0;background:url(../img/jsoneditor-icons.svg) -168px -48px}div.jsoneditor-outer{position:static;width:100%;height:100%;margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}div.jsoneditor-outer.has-nav-bar{margin-top:-26px;padding-top:26px}div.jsoneditor-outer.has-nav-bar.has-main-menu-bar{margin-top:-61px;padding-top:61px}div.jsoneditor-outer.has-status-bar{margin-bottom:-26px;padding-bottom:26px}div.jsoneditor-outer.has-main-menu-bar{margin-top:-35px;padding-top:35px}div.jsoneditor-busy{position:absolute;top:15%;left:0;box-sizing:border-box;width:100%;text-align:center;display:none}div.jsoneditor-busy span{background-color:#ffffab;border:1px solid #fe0;border-radius:3px;padding:5px 15px;box-shadow:0 0 5px rgba(0,0,0,.4)}div.jsoneditor-field.jsoneditor-empty::after,div.jsoneditor-value.jsoneditor-empty::after{pointer-events:none;color:#d3d3d3;font-size:8pt}a.jsoneditor-value.jsoneditor-url,div.jsoneditor-value.jsoneditor-url{color:#006000;text-decoration:underline}a.jsoneditor-value.jsoneditor-url{display:inline-block;padding:2px;margin:2px}a.jsoneditor-value.jsoneditor-url:focus,a.jsoneditor-value.jsoneditor-url:hover{color:#ee422e}div.jsoneditor-field.jsoneditor-highlight,div.jsoneditor-field[contenteditable=true]:focus,div.jsoneditor-field[contenteditable=true]:hover,div.jsoneditor-value.jsoneditor-highlight,div.jsoneditor-value[contenteditable=true]:focus,div.jsoneditor-value[contenteditable=true]:hover{background-color:#ffffab;border:1px solid #fe0;border-radius:2px}div.jsoneditor-field.jsoneditor-highlight-active,div.jsoneditor-field.jsoneditor-highlight-active:focus,div.jsoneditor-field.jsoneditor-highlight-active:hover,div.jsoneditor-value.jsoneditor-highlight-active,div.jsoneditor-value.jsoneditor-highlight-active:focus,div.jsoneditor-value.jsoneditor-highlight-active:hover{background-color:#fe0;border:1px solid #ffc700;border-radius:2px}div.jsoneditor-value.jsoneditor-array,div.jsoneditor-value.jsoneditor-object{min-width:16px}div.jsoneditor-mode-form tr.jsoneditor-expandable td.jsoneditor-tree,div.jsoneditor-mode-view tr.jsoneditor-expandable td.jsoneditor-tree{cursor:pointer}div.jsoneditor-tree button.jsoneditor-contextmenu.jsoneditor-selected,div.jsoneditor-tree button.jsoneditor-contextmenu:focus,div.jsoneditor-tree button.jsoneditor-contextmenu:hover,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu{background-position:-48px -48px}div.jsoneditor-tree div.jsoneditor-show-more a:focus,div.jsoneditor-tree div.jsoneditor-show-more a:hover{color:#ee422e}.ace-jsoneditor,textarea.jsoneditor-text{min-height:150px}textarea.jsoneditor-text{width:100%;height:100%;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;outline-width:0;border:none;background-color:#fff;resize:none}tr.jsoneditor-highlight,tr.jsoneditor-selected{background-color:#d3d3d3}tr.jsoneditor-selected button.jsoneditor-contextmenu,tr.jsoneditor-selected button.jsoneditor-dragarea{visibility:hidden}tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea{visibility:visible}div.jsoneditor-tree button.jsoneditor-dragarea:focus,div.jsoneditor-tree button.jsoneditor-dragarea:hover,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea{background-position:-72px -48px}div.jsoneditor td,div.jsoneditor th,div.jsoneditor tr{padding:0;margin:0}.jsoneditor-popover,.jsoneditor-schema-error,div.jsoneditor td,div.jsoneditor textarea,div.jsoneditor th,div.jsoneditor-field,div.jsoneditor-value,pre.jsoneditor-preview{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt;color:#1a1a1a}.jsoneditor-schema-error{cursor:default;display:inline-block;height:24px;line-height:24px;position:relative;text-align:center;width:24px}.jsoneditor-popover{background-color:#4c4c4c;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.4);color:#fff;padding:7px 10px;position:absolute;cursor:auto;width:200px;z-index:999}.jsoneditor-popover.jsoneditor-above{bottom:32px;left:-98px}.jsoneditor-popover.jsoneditor-above:before{border-top:7px solid #4c4c4c;bottom:-7px}.jsoneditor-popover.jsoneditor-below{top:32px;left:-98px}.jsoneditor-popover.jsoneditor-below:before{border-bottom:7px solid #4c4c4c;top:-7px}.jsoneditor-popover.jsoneditor-left{top:-7px;right:32px}.jsoneditor-popover.jsoneditor-left:before{border-left:7px solid #4c4c4c;border-top:7px solid transparent;border-bottom:7px solid transparent;content:"";top:19px;right:-14px;left:inherit;margin-left:inherit;margin-top:-7px;position:absolute}.jsoneditor-popover.jsoneditor-right{top:-7px;left:32px}.jsoneditor-popover.jsoneditor-right:before{border-right:7px solid #4c4c4c;border-top:7px solid transparent;border-bottom:7px solid transparent;content:"";top:19px;left:-14px;margin-left:inherit;margin-top:-7px;position:absolute}.jsoneditor-popover:before{border-right:7px solid transparent;border-left:7px solid transparent;content:"";display:block;left:50%;margin-left:-7px;position:absolute}.jsoneditor-text-errors tr.jump-to-line:hover{text-decoration:underline;cursor:pointer}.jsoneditor-schema-error:focus .jsoneditor-popover,.jsoneditor-schema-error:hover .jsoneditor-popover{display:block;animation:fade-in .3s linear 1,move-up .3s linear 1}@keyframes fade-in{from{opacity:0}to{opacity:1}}.jsoneditor .jsoneditor-validation-errors-container{max-height:130px;overflow-y:auto}.jsoneditor .jsoneditor-validation-errors{width:100%;overflow:hidden}.jsoneditor .jsoneditor-additional-errors{position:absolute;margin:auto;bottom:31px;left:calc(50% - 92px);color:grey;background-color:#ebebeb;padding:7px 15px;border-radius:8px}.jsoneditor .jsoneditor-additional-errors.visible{visibility:visible;opacity:1;transition:opacity 2s linear}.jsoneditor .jsoneditor-additional-errors.hidden{visibility:hidden;opacity:0;transition:visibility 0s 2s,opacity 2s linear}.jsoneditor .jsoneditor-text-errors{width:100%;border-collapse:collapse;border-top:1px solid #ffc700}.jsoneditor .jsoneditor-text-errors td{padding:3px 6px;vertical-align:middle}.jsoneditor .jsoneditor-text-errors td pre{margin:0;white-space:normal}.jsoneditor .jsoneditor-text-errors tr{background-color:#ffffab}.jsoneditor .jsoneditor-text-errors tr.parse-error{background-color:#ee2e2e70}.jsoneditor-text-errors .jsoneditor-schema-error{border:none;width:24px;height:24px;padding:0;margin:0 4px 0 0;cursor:pointer}.jsoneditor-text-errors tr .jsoneditor-schema-error{background:url(../img/jsoneditor-icons.svg) -168px -48px}.jsoneditor-text-errors tr.parse-error .jsoneditor-schema-error{background:url(../img/jsoneditor-icons.svg) -25px 0}.fadein{-webkit-animation:fadein .3s;animation:fadein .3s;-moz-animation:fadein .3s;-o-animation:fadein .3s}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.jsoneditor-contextmenu-root{position:relative;width:0;height:0}.jsoneditor-contextmenu{position:absolute;box-sizing:content-box;z-index:99}.jsoneditor-contextmenu .jsoneditor-menu{position:relative;left:0;top:0;width:128px;height:auto;background:#fff;border:1px solid #d3d3d3;box-shadow:2px 2px 12px rgba(128,128,128,.3);list-style:none;margin:0;padding:0}.jsoneditor-contextmenu .jsoneditor-menu button{position:relative;padding:0 4px 0 0;margin:0;width:128px;height:auto;border:none;cursor:pointer;color:#4d4d4d;background:0 0;font-size:10pt;font-family:arial,sans-serif;box-sizing:border-box;text-align:left}.jsoneditor-contextmenu .jsoneditor-menu button::-moz-focus-inner{padding:0;border:0}.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-default{width:96px}.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand{float:right;width:32px;height:24px;border-left:1px solid #e5e5e5}.jsoneditor-contextmenu .jsoneditor-menu li{overflow:hidden}.jsoneditor-contextmenu .jsoneditor-menu li ul{display:none;position:relative;left:-10px;top:0;border:none;box-shadow:inset 0 0 10px rgba(128,128,128,.5);padding:0 10px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.jsoneditor-contextmenu .jsoneditor-menu li ul .jsoneditor-icon{margin-left:24px}.jsoneditor-contextmenu .jsoneditor-menu li ul li button{padding-left:24px;animation:all ease-in-out 1s}.jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand{position:absolute;top:0;right:0;width:24px;height:24px;padding:0;margin:0 4px 0 0;background:url(../img/jsoneditor-icons.svg) 0 -72px}.jsoneditor-contextmenu .jsoneditor-icon{position:absolute;top:0;left:0;width:24px;height:24px;border:none;padding:0;margin:0;background-image:url(../img/jsoneditor-icons.svg)}.jsoneditor-contextmenu .jsoneditor-text{padding:4px 0 4px 24px;word-wrap:break-word}.jsoneditor-contextmenu .jsoneditor-text.jsoneditor-right-margin{padding-right:24px}.jsoneditor-contextmenu .jsoneditor-separator{height:0;border-top:1px solid #e5e5e5;padding-top:5px;margin-top:5px}.jsoneditor-contextmenu button.jsoneditor-remove .jsoneditor-icon{background-position:-24px 0}.jsoneditor-contextmenu button.jsoneditor-append .jsoneditor-icon{background-position:0 0}.jsoneditor-contextmenu button.jsoneditor-insert .jsoneditor-icon{background-position:0 0}.jsoneditor-contextmenu button.jsoneditor-duplicate .jsoneditor-icon{background-position:-48px 0}.jsoneditor-contextmenu button.jsoneditor-sort-asc .jsoneditor-icon{background-position:-168px 0}.jsoneditor-contextmenu button.jsoneditor-sort-desc .jsoneditor-icon{background-position:-192px 0}.jsoneditor-contextmenu button.jsoneditor-transform .jsoneditor-icon{background-position:-216px 0}.jsoneditor-contextmenu button.jsoneditor-extract .jsoneditor-icon{background-position:0 -24px}.jsoneditor-contextmenu button.jsoneditor-type-string .jsoneditor-icon{background-position:-144px 0}.jsoneditor-contextmenu button.jsoneditor-type-auto .jsoneditor-icon{background-position:-120px 0}.jsoneditor-contextmenu button.jsoneditor-type-object .jsoneditor-icon{background-position:-72px 0}.jsoneditor-contextmenu button.jsoneditor-type-array .jsoneditor-icon{background-position:-96px 0}.jsoneditor-contextmenu button.jsoneditor-type-modes .jsoneditor-icon{background-image:none;width:6px}.jsoneditor-contextmenu li,.jsoneditor-contextmenu ul{box-sizing:content-box;position:relative}.jsoneditor-contextmenu .jsoneditor-menu button:focus,.jsoneditor-contextmenu .jsoneditor-menu button:hover{color:#1a1a1a;background-color:#f5f5f5;outline:0}.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover{color:#fff;background-color:#ee422e}.jsoneditor-contextmenu .jsoneditor-menu li ul li button:focus,.jsoneditor-contextmenu .jsoneditor-menu li ul li button:hover{background-color:#f5f5f5}.jsoneditor-modal{max-width:95%;border-radius:2px!important;padding:45px 15px 15px 15px!important;box-shadow:2px 2px 12px rgba(128,128,128,.3);color:#4d4d4d;line-height:1.3em}.jsoneditor-modal.jsoneditor-modal-transform{width:600px!important}.jsoneditor-modal .pico-modal-header{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;padding:0 10px;height:30px;line-height:30px;font-family:arial,sans-serif;font-size:11pt;background:#3883fa;color:#fff}.jsoneditor-modal table{width:100%}.jsoneditor-modal table td{padding:3px 0}.jsoneditor-modal table td.jsoneditor-modal-input{text-align:right;padding-right:0;white-space:nowrap}.jsoneditor-modal table td.jsoneditor-modal-actions{padding-top:15px}.jsoneditor-modal table th{vertical-align:middle}.jsoneditor-modal p:first-child{margin-top:0}.jsoneditor-modal a{color:#3883fa}.jsoneditor-modal .jsoneditor-jmespath-block{margin-bottom:10px}.jsoneditor-modal .pico-close{background:0 0!important;font-size:24px!important;top:7px!important;right:7px!important;color:#fff}.jsoneditor-modal input{padding:4px}.jsoneditor-modal input[type=text]{cursor:inherit}.jsoneditor-modal input[disabled]{background:#d3d3d3;color:grey}.jsoneditor-modal .jsoneditor-select-wrapper{position:relative;display:inline-block}.jsoneditor-modal .jsoneditor-select-wrapper:after{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #666;position:absolute;right:8px;top:14px;pointer-events:none}.jsoneditor-modal select{padding:3px 24px 3px 10px;min-width:180px;max-width:350px;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:0;text-overflow:"";font-size:10pt;line-height:1.5em}.jsoneditor-modal select::-ms-expand{display:none}.jsoneditor-modal .jsoneditor-button-group input{padding:4px 10px;margin:0;border-radius:0;border-left-style:none}.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-first{border-top-left-radius:3px;border-bottom-left-radius:3px;border-left-style:solid}.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-last{border-top-right-radius:3px;border-bottom-right-radius:3px}.jsoneditor-modal .jsoneditor-transform-preview{background:#f5f5f5;height:200px}.jsoneditor-modal .jsoneditor-transform-preview.jsoneditor-error{color:#ee422e}.jsoneditor-modal .jsoneditor-jmespath-wizard{line-height:1.2em;width:100%;padding:0;border-radius:3px}.jsoneditor-modal .jsoneditor-jmespath-label{font-weight:700;color:#1e90ff;margin-top:20px;margin-bottom:5px}.jsoneditor-modal .jsoneditor-jmespath-wizard-table{width:100%}.jsoneditor-modal .jsoneditor-jmespath-wizard-label{font-style:italic;margin:4px 0 2px 0}.jsoneditor-modal .jsoneditor-inline{position:relative;display:inline-block;width:100%;padding-top:2px;padding-bottom:2px}.jsoneditor-modal .jsoneditor-inline:not(:last-child){padding-right:2px}.jsoneditor-modal .jsoneditor-jmespath-filter{display:flex;flex-wrap:wrap}.jsoneditor-modal .jsoneditor-jmespath-filter-field{width:180px}.jsoneditor-modal .jsoneditor-jmespath-filter-relation{width:100px}.jsoneditor-modal .jsoneditor-jmespath-filter-value{min-width:180px;flex:1}.jsoneditor-modal .jsoneditor-jmespath-sort-field{width:170px}.jsoneditor-modal .jsoneditor-jmespath-sort-order{width:150px}.jsoneditor-modal .jsoneditor-jmespath-select-fields{width:100%}.jsoneditor-modal .selectr-selected{border-color:#d3d3d3;padding:4px 28px 4px 8px}.jsoneditor-modal .selectr-selected .selectr-tag{background-color:#3883fa;border-radius:5px}.jsoneditor-modal table td,.jsoneditor-modal table th{text-align:left;vertical-align:top;font-weight:400;color:#4d4d4d;border-spacing:0;border-collapse:collapse}.jsoneditor-modal #query,.jsoneditor-modal input,.jsoneditor-modal select,.jsoneditor-modal textarea{background:#fff;border:1px solid #d3d3d3;color:#4d4d4d;border-radius:3px;padding:4px}.jsoneditor-modal,.jsoneditor-modal #query,.jsoneditor-modal input,.jsoneditor-modal option,.jsoneditor-modal select,.jsoneditor-modal table td,.jsoneditor-modal table th,.jsoneditor-modal textarea{font-size:10.5pt;font-family:arial,sans-serif}.jsoneditor-modal #query,.jsoneditor-modal .jsoneditor-transform-preview{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt;width:100%;box-sizing:border-box}.jsoneditor-modal input[type=button],.jsoneditor-modal input[type=submit]{background:#f5f5f5;padding:4px 20px}.jsoneditor-modal input,.jsoneditor-modal select{cursor:pointer}.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc{background:#3883fa;border-color:#3883fa;color:#fff}.jsoneditor-menu{width:100%;height:35px;padding:2px;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;background-color:#3883fa;border-bottom:1px solid #3883fa}.jsoneditor-menu>.jsoneditor-modes>button,.jsoneditor-menu>button{width:26px;height:26px;margin:2px;padding:0;border-radius:2px;border:1px solid transparent;background:transparent url(../img/jsoneditor-icons.svg);color:#fff;opacity:.8;font-family:arial,sans-serif;font-size:10pt;float:left}.jsoneditor-menu>.jsoneditor-modes>button:hover,.jsoneditor-menu>button:hover{background-color:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4)}.jsoneditor-menu>.jsoneditor-modes>button:active,.jsoneditor-menu>.jsoneditor-modes>button:focus,.jsoneditor-menu>button:active,.jsoneditor-menu>button:focus{background-color:rgba(255,255,255,.3)}.jsoneditor-menu>.jsoneditor-modes>button:disabled,.jsoneditor-menu>button:disabled{opacity:.5;background-color:transparent;border:none}.jsoneditor-menu>button.jsoneditor-collapse-all{background-position:0 -96px}.jsoneditor-menu>button.jsoneditor-expand-all{background-position:0 -120px}.jsoneditor-menu>button.jsoneditor-sort{background-position:-120px -96px}.jsoneditor-menu>button.jsoneditor-transform{background-position:-144px -96px}.jsoneditor.jsoneditor-mode-form>.jsoneditor-menu>button.jsoneditor-sort,.jsoneditor.jsoneditor-mode-form>.jsoneditor-menu>button.jsoneditor-transform,.jsoneditor.jsoneditor-mode-view>.jsoneditor-menu>button.jsoneditor-sort,.jsoneditor.jsoneditor-mode-view>.jsoneditor-menu>button.jsoneditor-transform{display:none}.jsoneditor-menu>button.jsoneditor-undo{background-position:-24px -96px}.jsoneditor-menu>button.jsoneditor-undo:disabled{background-position:-24px -120px}.jsoneditor-menu>button.jsoneditor-redo{background-position:-48px -96px}.jsoneditor-menu>button.jsoneditor-redo:disabled{background-position:-48px -120px}.jsoneditor-menu>button.jsoneditor-compact{background-position:-72px -96px}.jsoneditor-menu>button.jsoneditor-format{background-position:-72px -120px}.jsoneditor-menu>button.jsoneditor-repair{background-position:-96px -96px}.jsoneditor-menu>.jsoneditor-modes{display:inline-block;float:left}.jsoneditor-menu>.jsoneditor-modes>button{background-image:none;width:auto;padding-left:6px;padding-right:6px}.jsoneditor-menu>.jsoneditor-modes>button.jsoneditor-separator,.jsoneditor-menu>button.jsoneditor-separator{margin-left:10px}.jsoneditor-menu a{font-family:arial,sans-serif;font-size:10pt;color:#fff;opacity:.8;vertical-align:middle}.jsoneditor-menu a:hover{opacity:1}.jsoneditor-menu a.jsoneditor-poweredBy{font-size:8pt;position:absolute;right:0;top:0;padding:10px}.jsoneditor-search{font-family:arial,sans-serif;position:absolute;right:4px;top:4px;border-collapse:collapse;border-spacing:0;display:flex}.jsoneditor-search input{color:#1a1a1a;width:120px;border:none;outline:0;margin:1px;line-height:20px}.jsoneditor-search button{width:16px;height:24px;padding:0;margin:0;border:none;background:url(../img/jsoneditor-icons.svg);vertical-align:top}.jsoneditor-search button:hover{background-color:transparent}.jsoneditor-search button.jsoneditor-refresh{width:18px;background-position:-99px -73px}.jsoneditor-search button.jsoneditor-next{cursor:pointer;background-position:-124px -73px}.jsoneditor-search button.jsoneditor-next:hover{background-position:-124px -49px}.jsoneditor-search button.jsoneditor-previous{cursor:pointer;background-position:-148px -73px;margin-right:2px}.jsoneditor-search button.jsoneditor-previous:hover{background-position:-148px -49px}.jsoneditor-results{font-family:arial,sans-serif;color:#fff;padding-right:5px;line-height:26px}.jsoneditor-frame{border:1px solid transparent;background-color:#fff;padding:0 2px;margin:0}.jsoneditor .autocomplete.dropdown{position:absolute;background:#fff;box-shadow:2px 2px 12px rgba(128,128,128,.3);border:1px solid #d3d3d3;z-index:100;overflow-x:hidden;overflow-y:auto;cursor:default;margin:0;padding:5px;text-align:left;outline:0;font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt}.jsoneditor .autocomplete.dropdown .item{color:#333}.jsoneditor .autocomplete.dropdown .item.hover{background-color:#ddd}.jsoneditor .autocomplete.hint{color:#aaa;top:4px;left:4px}.jsoneditor-treepath{padding:0 5px;overflow:hidden;white-space:nowrap;outline:0}.jsoneditor-treepath.show-all{word-wrap:break-word;white-space:normal;position:absolute;background-color:#ebebeb;z-index:999;box-shadow:2px 2px 12px rgba(128,128,128,.3)}.jsoneditor-treepath.show-all span.jsoneditor-treepath-show-all-btn{display:none}.jsoneditor-treepath div.jsoneditor-contextmenu-root{position:absolute;left:0}.jsoneditor-treepath .jsoneditor-treepath-show-all-btn{position:absolute;background-color:#ebebeb;left:0;height:20px;padding:0 3px;cursor:pointer}.jsoneditor-treepath .jsoneditor-treepath-element{margin:1px;font-family:arial,sans-serif;font-size:10pt}.jsoneditor-treepath .jsoneditor-treepath-seperator{margin:2px;font-size:9pt;font-family:arial,sans-serif}.jsoneditor-treepath span.jsoneditor-treepath-element:hover,.jsoneditor-treepath span.jsoneditor-treepath-seperator:hover{cursor:pointer;text-decoration:underline}.jsoneditor-statusbar{line-height:26px;height:26px;color:grey;background-color:#ebebeb;border-top:1px solid #d3d3d3;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:10pt}.jsoneditor-statusbar>.jsoneditor-curserinfo-val{margin-right:12px}.jsoneditor-statusbar>.jsoneditor-curserinfo-count{margin-left:4px}.jsoneditor-statusbar>.jsoneditor-validation-error-icon{float:right;width:24px;height:24px;padding:0;margin-top:1px;background:url(../img/jsoneditor-icons.svg) -168px -48px;cursor:pointer}.jsoneditor-statusbar>.jsoneditor-validation-error-count{float:right;margin:0 4px 0 0;cursor:pointer}.jsoneditor-statusbar>.jsoneditor-parse-error-icon{float:right;width:24px;height:24px;padding:0;margin:1px;background:url(../img/jsoneditor-icons.svg) -25px 0}.jsoneditor-statusbar .jsoneditor-array-info a{color:inherit}div.jsoneditor-statusbar>.jsoneditor-curserinfo-label,div.jsoneditor-statusbar>.jsoneditor-size-info{margin:0 4px}.jsoneditor-navigation-bar{width:100%;height:26px;line-height:26px;padding:0;margin:0;border-bottom:1px solid #d3d3d3;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:grey;background-color:#ebebeb;overflow:hidden;font-family:arial,sans-serif;font-size:10pt}/*!
- * Selectr 2.4.0
- * https://github.com/Mobius1/Selectr
- *
- * Released under the MIT license
- */.selectr-container{position:relative}.selectr-container li{list-style:none}.selectr-hidden{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0 none}.selectr-visible{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;z-index:11}.selectr-desktop.multiple .selectr-visible{display:none}.selectr-desktop.multiple.native-open .selectr-visible{top:100%;min-height:200px!important;height:auto;opacity:1;display:block}.selectr-container.multiple.selectr-mobile .selectr-selected{z-index:0}.selectr-selected{position:relative;z-index:1;box-sizing:border-box;width:100%;padding:7px 28px 7px 14px;cursor:pointer;border:1px solid #999;border-radius:3px;background-color:#fff}.selectr-selected::before{position:absolute;top:50%;right:10px;width:0;height:0;content:'';-o-transform:rotate(0) translate3d(0,-50%,0);-ms-transform:rotate(0) translate3d(0,-50%,0);-moz-transform:rotate(0) translate3d(0,-50%,0);-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0);border-width:4px 4px 0 4px;border-style:solid;border-color:#6c7a86 transparent transparent}.selectr-container.native-open .selectr-selected::before,.selectr-container.open .selectr-selected::before{border-width:0 4px 4px 4px;border-style:solid;border-color:transparent transparent #6c7a86}.selectr-label{display:none;overflow:hidden;width:100%;white-space:nowrap;text-overflow:ellipsis}.selectr-placeholder{color:#6c7a86}.selectr-tags{margin:0;padding:0;white-space:normal}.has-selected .selectr-tags{margin:0 0 -2px}.selectr-tag{list-style:none;position:relative;float:left;padding:2px 25px 2px 8px;margin:0 2px 2px 0;cursor:default;color:#fff;border:medium none;border-radius:10px;background:#acb7bf none repeat scroll 0 0}.selectr-container.multiple.has-selected .selectr-selected{padding:5px 28px 5px 5px}.selectr-options-container{position:absolute;z-index:10000;top:calc(100% - 1px);left:0;display:none;box-sizing:border-box;width:100%;border-width:0 1px 1px;border-style:solid;border-color:transparent #999 #999;border-radius:0 0 3px 3px;background-color:#fff}.selectr-container.open .selectr-options-container{display:block}.selectr-input-container{position:relative;display:none}.selectr-clear,.selectr-input-clear,.selectr-tag-remove{position:absolute;top:50%;right:22px;width:20px;height:20px;padding:0;cursor:pointer;-o-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);border:medium none;background-color:transparent;z-index:11}.selectr-clear,.selectr-input-clear{display:none}.selectr-container.has-selected .selectr-clear,.selectr-input-container.active .selectr-input-clear{display:block}.selectr-selected .selectr-tag-remove{right:2px}.selectr-clear::after,.selectr-clear::before,.selectr-input-clear::after,.selectr-input-clear::before,.selectr-tag-remove::after,.selectr-tag-remove::before{position:absolute;top:5px;left:9px;width:2px;height:10px;content:' ';background-color:#6c7a86}.selectr-tag-remove::after,.selectr-tag-remove::before{top:4px;width:3px;height:12px;background-color:#fff}.selectr-clear:before,.selectr-input-clear::before,.selectr-tag-remove::before{-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.selectr-clear:after,.selectr-input-clear::after,.selectr-tag-remove::after{-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.selectr-input-container.active,.selectr-input-container.active .selectr-clear{display:block}.selectr-input{top:5px;left:5px;box-sizing:border-box;width:calc(100% - 30px);margin:10px 15px;padding:7px 30px 7px 9px;border:1px solid #999;border-radius:3px}.selectr-notice{display:none;box-sizing:border-box;width:100%;padding:8px 16px;border-top:1px solid #999;border-radius:0 0 3px 3px;background-color:#fff}.selectr-container.notice .selectr-notice{display:block}.selectr-container.notice .selectr-selected{border-radius:3px 3px 0 0}.selectr-options{position:relative;top:calc(100% + 2px);display:none;overflow-x:auto;overflow-y:scroll;max-height:200px;margin:0;padding:0}.selectr-container.notice .selectr-options-container,.selectr-container.open .selectr-input-container,.selectr-container.open .selectr-options{display:block}.selectr-option{position:relative;display:block;padding:5px 20px;list-style:outside none none;cursor:pointer;font-weight:400}.selectr-options.optgroups>.selectr-option{padding-left:25px}.selectr-optgroup{font-weight:700;padding:0}.selectr-optgroup--label{font-weight:700;margin-top:10px;padding:5px 15px}.selectr-match{text-decoration:underline}.selectr-option.selected{background-color:#ddd}.selectr-option.active{color:#fff;background-color:#5897fb}.selectr-option.disabled{opacity:.4}.selectr-option.excluded{display:none}.selectr-container.open .selectr-selected{border-color:#999 #999 transparent #999;border-radius:3px 3px 0 0}.selectr-container.open .selectr-selected::after{-o-transform:rotate(180deg) translate3d(0,50%,0);-ms-transform:rotate(180deg) translate3d(0,50%,0);-moz-transform:rotate(180deg) translate3d(0,50%,0);-webkit-transform:rotate(180deg) translate3d(0,50%,0);transform:rotate(180deg) translate3d(0,50%,0)}.selectr-disabled{opacity:.6}.has-selected .selectr-placeholder,.selectr-empty{display:none}.has-selected .selectr-label{display:block}.taggable .selectr-selected{padding:4px 28px 4px 4px}.taggable .selectr-selected::after{display:table;content:" ";clear:both}.taggable .selectr-label{width:auto}.taggable .selectr-tags{float:left;display:block}.taggable .selectr-placeholder{display:none}.input-tag{float:left;min-width:90px;width:auto}.selectr-tag-input{border:medium none;padding:3px 10px;width:100%;font-family:inherit;font-weight:inherit;font-size:inherit}.selectr-input-container.loading::after{position:absolute;top:50%;right:20px;width:20px;height:20px;content:'';-o-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-o-transform-origin:50% 0 0;-ms-transform-origin:50% 0 0;-moz-transform-origin:50% 0 0;-webkit-transform-origin:50% 0 0;transform-origin:50% 0 0;-moz-animation:.5s linear 0s normal forwards infinite running spin;-webkit-animation:.5s linear 0s normal forwards infinite running spin;animation:.5s linear 0s normal forwards infinite running spin;border-width:3px;border-style:solid;border-color:#aaa #ddd #ddd;border-radius:50%}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0)}100%{-webkit-transform:rotate(360deg) translate3d(0,-50%,0);transform:rotate(360deg) translate3d(0,-50%,0)}}@keyframes spin{0%{-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0)}100%{-webkit-transform:rotate(360deg) translate3d(0,-50%,0);transform:rotate(360deg) translate3d(0,-50%,0)}}.selectr-container.open.inverted .selectr-selected{border-color:transparent #999 #999;border-radius:0 0 3px 3px}.selectr-container.inverted .selectr-options-container{border-width:1px 1px 0;border-color:#999 #999 transparent;border-radius:3px 3px 0 0;background-color:#fff}.selectr-container.inverted .selectr-options-container{top:auto;bottom:calc(100% - 1px)}.selectr-container ::-webkit-input-placeholder{color:#6c7a86;opacity:1}.selectr-container ::-moz-placeholder{color:#6c7a86;opacity:1}.selectr-container :-ms-input-placeholder{color:#6c7a86;opacity:1}.selectr-container ::placeholder{color:#6c7a86;opacity:1}
\ No newline at end of file
diff --git a/demo/gdml/src/jsMain/resources/css/main.css b/demo/gdml/src/jsMain/resources/css/main.css
deleted file mode 100644
index 9eb3f7fd..00000000
--- a/demo/gdml/src/jsMain/resources/css/main.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.drop_zone {
-    outline: 1px solid orange;
-}
-
-.loader {
-    border: 16px solid #f3f3f3; /* Light grey */
-    border-top: 16px solid #3498db; /* Blue */
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-/* Remove default bullets */
-ul, .tree {
-    list-style-type: none;
-}
-
-/* Style the caret/arrow */
-.tree-caret {
-    cursor: pointer;
-    user-select: none; /* Prevent text selection */
-}
-
-.objTree-label {
-    cursor: pointer;
-}
-
-/* Create the caret/arrow with a unicode, and style it */
-.tree-caret::before {
-    content: "\25B6";
-    color: black;
-    display: inline-block;
-    margin-right: 6px;
-}
-
-.objTree-leaf::before {
-    content: "\25C6";
-    color: black;
-    display: inline-block;
-    margin-right: 6px;
-}
-
-/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-.tree-caret-down::before {
-    transform: rotate(90deg);
-}
diff --git a/demo/gdml/src/jsMain/resources/img/jsoneditor-icons.svg b/demo/gdml/src/jsMain/resources/img/jsoneditor-icons.svg
deleted file mode 100644
index 332be179..00000000
--- a/demo/gdml/src/jsMain/resources/img/jsoneditor-icons.svg
+++ /dev/null
@@ -1,748 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-        xmlns:dc="http://purl.org/dc/elements/1.1/"
-        xmlns:cc="http://creativecommons.org/ns#"
-        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-        width="240"
-        height="144"
-        id="svg4136"
-        version="1.1"
-        inkscape:version="0.91 r13725"
-        sodipodi:docname="jsoneditor-icons.svg">
-  <title
-     id="title6512">JSON Editor Icons</title>
-  <metadata
-     id="metadata4148">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>JSON Editor Icons</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs4146" />
-  <sodipodi:namedview
-     pagecolor="#ff63ff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1026"
-     id="namedview4144"
-     showgrid="true"
-     inkscape:zoom="4"
-     inkscape:cx="13.229181"
-     inkscape:cy="119.82429"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4136"
-     showguides="false"
-     borderlayer="false"
-     inkscape:showpageshadow="true"
-     showborder="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4640"
-       empspacing="24" />
-  </sodipodi:namedview>
-  <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
-  <rect
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
-     id="svg_1"
-     height="16"
-     width="16"
-     y="4"
-     x="4" />
-  <rect
-     id="svg_1-7"
-     height="16"
-     width="16"
-     y="3.999995"
-     x="28.000006"
-     style="fill:#ec3f29;fill-opacity:0.94117647;stroke:none;stroke-width:0" />
-  <rect
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
-     x="52.000004"
-     y="3.999995"
-     width="16"
-     height="16"
-     id="rect4165" />
-  <rect
-     id="rect4175"
-     height="16"
-     width="16"
-     y="3.9999852"
-     x="172.00002"
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
-  <rect
-     id="rect4175-3"
-     height="16"
-     width="16"
-     y="3.999995"
-     x="196"
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
-  <g
-     id="g4299"
-     style="stroke:none">
-    <rect
-       x="7.0000048"
-       y="10.999998"
-       width="9.9999924"
-       height="1.9999986"
-       id="svg_1-1"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
-    <rect
-       x="11.000005"
-       y="7.0000114"
-       width="1.9999955"
-       height="9.9999838"
-       id="svg_1-1-1"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
-  </g>
-  <g
-     id="g4299-3"
-     transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,19.029435,12.000001)"
-     style="stroke:none">
-    <rect
-       x="7.0000048"
-       y="10.999998"
-       width="9.9999924"
-       height="1.9999986"
-       id="svg_1-1-0"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
-    <rect
-       x="11.000005"
-       y="7.0000114"
-       width="1.9999955"
-       height="9.9999838"
-       id="svg_1-1-1-9"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
-  </g>
-  <rect
-     id="svg_1-7-5"
-     height="6.9999905"
-     width="6.9999909"
-     y="7.0000048"
-     x="55.000004"
-     style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
-  <rect
-     style="fill:#ffffff;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     x="58"
-     y="10.00001"
-     width="6.9999909"
-     height="6.9999905"
-     id="rect4354" />
-  <rect
-     id="svg_1-7-5-7"
-     height="6.9999905"
-     width="6.9999909"
-     y="10.000005"
-     x="58.000004"
-     style="fill:#ffffff;fill-opacity:1;stroke:#3c80df;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
-  <g
-     id="g4378">
-    <rect
-       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
-       x="198"
-       y="10.999999"
-       width="7.9999909"
-       height="1.9999965"
-       id="svg_1-7-5-3" />
-    <rect
-       id="rect4374"
-       height="1.9999946"
-       width="11.999995"
-       y="7.0000005"
-       x="198"
-       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
-    <rect
-       id="rect4376"
-       height="1.9999995"
-       width="3.9999928"
-       y="14.999996"
-       x="198"
-       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
-  </g>
-  <g
-     transform="matrix(1,0,0,-1,-23.999995,23.999995)"
-     id="g4383">
-    <rect
-       id="rect4385"
-       height="1.9999965"
-       width="7.9999909"
-       y="10.999999"
-       x="198"
-       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
-    <rect
-       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
-       x="198"
-       y="7.0000005"
-       width="11.999995"
-       height="1.9999946"
-       id="rect4387" />
-    <rect
-       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
-       x="198"
-       y="14.999996"
-       width="3.9999928"
-       height="1.9999995"
-       id="rect4389" />
-  </g>
-  <rect
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
-     id="rect3754-4"
-     width="16"
-     height="16"
-     x="76"
-     y="3.9999199" />
-  <path
-     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     d="m 85.10447,6.0157384 -0.0156,1.4063 c 3.02669,-0.2402 0.33008,3.6507996 2.48438,4.5780996 -2.18694,1.0938 0.49191,4.9069 -2.45313,4.5781 l -0.0156,1.4219 c 5.70828,0.559 1.03264,-5.1005 4.70313,-5.2656 l 0,-1.4063 c -3.61303,-0.027 1.11893,-5.7069996 -4.70313,-5.3124996 z"
-     id="path4351"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccc" />
-  <path
-     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     d="m 82.78125,5.9984384 0.0156,1.4063 c -3.02668,-0.2402 -0.33007,3.6506996 -2.48437,4.5780996 2.18694,1.0938 -0.49192,4.9069 2.45312,4.5781 l 0.0156,1.4219 c -5.70827,0.559 -1.03263,-5.1004 -4.70312,-5.2656 l 0,-1.4063 c 3.61303,-0.027 -1.11894,-5.7070996 4.70312,-5.3124996 z"
-     id="path4351-9"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccc" />
-  <rect
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
-     id="rect3754-25"
-     width="16"
-     height="16"
-     x="100"
-     y="3.9999199" />
-  <path
-     style="fill:#ffffff;fill-opacity:1;stroke:none"
-     d="m 103.719,5.6719384 0,12.7187996 3.03125,0 0,-1.5313 -1.34375,0 0,-9.6249996 1.375,0 0,-1.5625 z"
-     id="path2987"
-     inkscape:connector-curvature="0" />
-  <path
-     style="fill:#ffffff;fill-opacity:1;stroke:none"
-     d="m 112.2185,5.6721984 0,12.7187996 -3.03125,0 0,-1.5313 1.34375,0 0,-9.6249996 -1.375,0 0,-1.5625 z"
-     id="path2987-1"
-     inkscape:connector-curvature="0" />
-  <rect
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
-     id="rect3754-73"
-     width="16"
-     height="16"
-     x="124"
-     y="3.9999199" />
-  <path
-     style="fill:#ffffff;fill-opacity:1;stroke:none"
-     d="m 126.2824,17.602938 1.78957,0 1.14143,-2.8641 5.65364,0 1.14856,2.8641 1.76565,0 -4.78687,-11.1610996 -1.91903,0 z"
-     id="path3780"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="ccccccccc" />
-  <path
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
-     d="m 129.72704,13.478838 4.60852,0.01 -2.30426,-5.5497996 z"
-     id="path3782"
-     inkscape:connector-curvature="0" />
-  <rect
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
-     id="rect3754-35"
-     width="16"
-     height="16"
-     x="148"
-     y="3.9999199" />
-  <path
-     style="fill:#ffffff;fill-opacity:1;stroke:none"
-     d="m 156.47655,5.8917384 0,2.1797 0.46093,2.3983996 1.82813,0 0.39844,-2.3983996 0,-2.1797 z"
-     id="path5008-2"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="ccccccc" />
-  <path
-     style="fill:#ffffff;fill-opacity:1;stroke:none"
-     d="m 152.51561,5.8906384 0,2.1797 0.46094,2.3983996 1.82812,0 0.39844,-2.3983996 0,-2.1797 z"
-     id="path5008-2-8"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="ccccccc" />
-  <rect
-     id="svg_1-7-2"
-     height="1.9999961"
-     width="11.999996"
-     y="64"
-     x="54"
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
-  <rect
-     id="svg_1-7-2-2"
-     height="2.9999905"
-     width="2.9999907"
-     y="52"
-     x="80.000008"
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
-  <rect
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
-     x="85.000008"
-     y="52"
-     width="2.9999907"
-     height="2.9999905"
-     id="rect4561" />
-  <rect
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
-     x="80.000008"
-     y="58"
-     width="2.9999907"
-     height="2.9999905"
-     id="rect4563" />
-  <rect
-     id="rect4565"
-     height="2.9999905"
-     width="2.9999907"
-     y="58"
-     x="85.000008"
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
-  <rect
-     id="rect4567"
-     height="2.9999905"
-     width="2.9999907"
-     y="64"
-     x="80.000008"
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
-  <rect
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
-     x="85.000008"
-     y="64"
-     width="2.9999907"
-     height="2.9999905"
-     id="rect4569" />
-  <circle
-     style="opacity:1;fill:none;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-     id="path4571"
-     cx="110.06081"
-     cy="57.939209"
-     r="4.7438836" />
-  <rect
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
-     x="116.64566"
-     y="-31.79752"
-     width="4.229713"
-     height="6.4053884"
-     id="rect4563-2"
-     transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
-  <path
-     style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     d="M 125,56 138.77027,56.095 132,64 Z"
-     id="path4613"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccc" />
-  <path
-     sodipodi:nodetypes="cccc"
-     inkscape:connector-curvature="0"
-     id="path4615"
-     d="M 149,64 162.77027,63.905 156,56 Z"
-     style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-  <rect
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
-     x="54"
-     y="53"
-     width="11.999996"
-     height="1.9999961"
-     id="rect4638" />
-  <rect
-     id="svg_1-7-2-24"
-     height="1.9999957"
-     width="12.99999"
-     y="-56"
-     x="53"
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
-     transform="matrix(0,1,-1,0,0,0)" />
-  <rect
-     transform="matrix(0,1,-1,0,0,0)"
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
-     x="53"
-     y="-66"
-     width="12.99999"
-     height="1.9999957"
-     id="rect4657" />
-  <rect
-     id="rect4659"
-     height="0.99999291"
-     width="11.999999"
-     y="57"
-     x="54"
-     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
-  <rect
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
-     x="54"
-     y="88.000122"
-     width="11.999996"
-     height="1.9999961"
-     id="rect4661" />
-  <rect
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
-     x="80.000008"
-     y="76.000122"
-     width="2.9999907"
-     height="2.9999905"
-     id="rect4663" />
-  <rect
-     id="rect4665"
-     height="2.9999905"
-     width="2.9999907"
-     y="76.000122"
-     x="85.000008"
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
-  <rect
-     id="rect4667"
-     height="2.9999905"
-     width="2.9999907"
-     y="82.000122"
-     x="80.000008"
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
-  <rect
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
-     x="85.000008"
-     y="82.000122"
-     width="2.9999907"
-     height="2.9999905"
-     id="rect4669" />
-  <rect
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
-     x="80.000008"
-     y="88.000122"
-     width="2.9999907"
-     height="2.9999905"
-     id="rect4671" />
-  <rect
-     id="rect4673"
-     height="2.9999905"
-     width="2.9999907"
-     y="88.000122"
-     x="85.000008"
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
-  <circle
-     r="4.7438836"
-     cy="81.939331"
-     cx="110.06081"
-     id="circle4675"
-     style="opacity:1;fill:none;fill-opacity:1;stroke:#d3d3d3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-  <rect
-     transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
-     id="rect4677"
-     height="6.4053884"
-     width="4.229713"
-     y="-14.826816"
-     x="133.6163"
-     style="fill:#d3d3d3;fill-opacity:1;stroke:#d3d3d3;stroke-width:0;stroke-opacity:1" />
-  <path
-     sodipodi:nodetypes="cccc"
-     inkscape:connector-curvature="0"
-     id="path4679"
-     d="m 125,80.000005 13.77027,0.09499 L 132,87.999992 Z"
-     style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-  <path
-     style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     d="M 149,88.0002 162.77027,87.9052 156,80.0002 Z"
-     id="path4681"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccc" />
-  <rect
-     id="rect4683"
-     height="1.9999961"
-     width="11.999996"
-     y="77.000122"
-     x="54"
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
-  <rect
-     transform="matrix(0,1,-1,0,0,0)"
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
-     x="77.000122"
-     y="-56"
-     width="12.99999"
-     height="1.9999957"
-     id="rect4685" />
-  <rect
-     id="rect4687"
-     height="1.9999957"
-     width="12.99999"
-     y="-66"
-     x="77.000122"
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
-     transform="matrix(0,1,-1,0,0,0)" />
-  <rect
-     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
-     x="54"
-     y="81.000122"
-     width="11.999999"
-     height="0.99999291"
-     id="rect4689" />
-  <rect
-     id="rect4761-1"
-     height="1.9999945"
-     width="15.99999"
-     y="101"
-     x="76.000008"
-     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
-  <rect
-     id="rect4761-0"
-     height="1.9999945"
-     width="15.99999"
-     y="105"
-     x="76.000008"
-     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
-  <rect
-     id="rect4761-7"
-     height="1.9999945"
-     width="9"
-     y="109"
-     x="76.000008"
-     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
-  <rect
-     id="rect4761-1-1"
-     height="1.9999945"
-     width="12"
-     y="125"
-     x="76.000008"
-     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
-  <rect
-     id="rect4761-1-1-4"
-     height="1.9999945"
-     width="10"
-     y="137"
-     x="76.000008"
-     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
-  <rect
-     id="rect4761-1-1-4-4"
-     height="1.9999945"
-     width="10"
-     y="129"
-     x="82"
-     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
-  <rect
-     id="rect4761-1-1-4-4-3"
-     height="1.9999945"
-     width="9"
-     y="133"
-     x="82"
-     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
-  <path
-     inkscape:connector-curvature="0"
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     d="m 36.398438,100.0254 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,100.5991 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1452 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533865,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550756,0 6.710442,-2.4113 7.650391,-5.9414 0.939949,-3.5301 -0.618463,-7.2736 -3.710938,-9.0703 -1.159678,-0.6738 -2.431087,-1.0231 -3.701171,-1.0625 z"
-     id="path4138" />
-  <path
-     inkscape:connector-curvature="0"
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     d="m 59.722656,99.9629 c -1.270084,0.039 -2.541493,0.3887 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5402 -3.710937,9.0703 0.939949,3.5301 4.09768,5.9414 7.648437,5.9414 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4056 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
-     id="path4138-1" />
-  <path
-     inkscape:connector-curvature="0"
-     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
-     d="m 10.5,100 0,2 -2.4999996,0 L 12,107 l 4,-5 -2.5,0 0,-2 -3,0 z"
-     id="path3055-0-77" />
-  <path
-     style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.96599996;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     d="m 4.9850574,108.015 14.0298856,-0.03"
-     id="path5244-5-0-5"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cc" />
-  <path
-     style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.96599996;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     d="m 4.9849874,132.015 14.0298866,-0.03"
-     id="path5244-5-0-5-8"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cc" />
-  <path
-     inkscape:connector-curvature="0"
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     d="m 36.398438,123.9629 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,124.5366 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1453 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533864,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550757,0 6.710442,-2.4093 7.650391,-5.9394 0.939949,-3.5301 -0.618463,-7.2756 -3.710938,-9.0723 -1.159678,-0.6737 -2.431087,-1.0231 -3.701171,-1.0625 z"
-     id="path4138-12" />
-  <path
-     inkscape:connector-curvature="0"
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     d="m 59.722656,123.9629 c -1.270084,0.039 -2.541493,0.3888 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5422 -3.710937,9.0723 0.939949,3.5301 4.09768,5.9394 7.648437,5.9394 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4055 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
-     id="path4138-1-3" />
-  <path
-     id="path6191"
-     d="m 10.5,116 0,-2 -2.4999996,0 L 12,109 l 4,5 -2.5,0 0,2 -3,0 z"
-     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
-     inkscape:connector-curvature="0" />
-  <path
-     inkscape:connector-curvature="0"
-     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
-     d="m 10.5,129 0,-2 -2.4999996,0 L 12,122 l 4,5 -2.5,0 0,2 -3,0 z"
-     id="path6193" />
-  <path
-     id="path6195"
-     d="m 10.5,135 0,2 -2.4999996,0 L 12,142 l 4,-5 -2.5,0 0,-2 -3,0 z"
-     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
-     inkscape:connector-curvature="0" />
-  <path
-     sodipodi:type="star"
-     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-     id="path4500"
-     sodipodi:sides="3"
-     sodipodi:cx="11.55581"
-     sodipodi:cy="60.073242"
-     sodipodi:r1="5.1116104"
-     sodipodi:r2="2.5558052"
-     sodipodi:arg1="0"
-     sodipodi:arg2="1.0471976"
-     inkscape:flatsided="false"
-     inkscape:rounded="0"
-     inkscape:randomized="0"
-     d="m 16.66742,60.073242 -3.833708,2.213392 -3.8337072,2.213393 0,-4.426785 0,-4.426784 3.8337082,2.213392 z"
-     inkscape:transform-center-x="-1.2779026" />
-  <path
-     inkscape:transform-center-x="1.277902"
-     d="m -31.500004,60.073242 -3.833708,2.213392 -3.833707,2.213393 0,-4.426785 0,-4.426784 3.833707,2.213392 z"
-     inkscape:randomized="0"
-     inkscape:rounded="0"
-     inkscape:flatsided="false"
-     sodipodi:arg2="1.0471976"
-     sodipodi:arg1="0"
-     sodipodi:r2="2.5558052"
-     sodipodi:r1="5.1116104"
-     sodipodi:cy="60.073242"
-     sodipodi:cx="-36.611614"
-     sodipodi:sides="3"
-     id="path4502"
-     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-     sodipodi:type="star"
-     transform="scale(-1,1)" />
-  <path
-     d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z"
-     inkscape:randomized="0"
-     inkscape:rounded="0"
-     inkscape:flatsided="false"
-     sodipodi:arg2="1.0471976"
-     sodipodi:arg1="0"
-     sodipodi:r2="2.5558052"
-     sodipodi:r1="5.1116104"
-     sodipodi:cy="60.073212"
-     sodipodi:cx="11.55581"
-     sodipodi:sides="3"
-     id="path4504"
-     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-     sodipodi:type="star"
-     transform="matrix(0,1,-1,0,72.0074,71.7877)"
-     inkscape:transform-center-y="1.2779029" />
-  <path
-     inkscape:transform-center-y="-1.2779026"
-     transform="matrix(0,-1,-1,0,96,96)"
-     sodipodi:type="star"
-     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-     id="path4506"
-     sodipodi:sides="3"
-     sodipodi:cx="11.55581"
-     sodipodi:cy="60.073212"
-     sodipodi:r1="5.1116104"
-     sodipodi:r2="2.5558052"
-     sodipodi:arg1="0"
-     sodipodi:arg2="1.0471976"
-     inkscape:flatsided="false"
-     inkscape:rounded="0"
-     inkscape:randomized="0"
-     d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z" />
-  <path
-     sodipodi:nodetypes="cccc"
-     inkscape:connector-curvature="0"
-     id="path4615-5"
-     d="m 171.82574,65.174193 16.34854,0 -8.17427,-13.348454 z"
-     style="fill:#fbb917;fill-opacity:1;fill-rule:evenodd;stroke:#fbb917;stroke-width:1.65161395;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-  <path
-     style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     d="m 179,55 0,6 2,0 0,-6"
-     id="path4300"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccc" />
-  <path
-     style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     d="m 179,62 0,2 2,0 0,-2"
-     id="path4300-6"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccc" />
-  <path
-     style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:0.8"
-     d="M 99.994369,113.0221 102,114.98353 l 7,-6.9558 3,0.97227 2,-1 1,-2 0,-3 -3,3 -3,-3 3,-3 -3,0 -2,1 -1,2 0.99437,3.0221 z"
-     id="path4268"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="ccccccccccccccc" />
-  <rect
-     id="rect4175-3-5"
-     height="16"
-     width="16"
-     y="4"
-     x="220"
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
-  <path
-     style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     d="m 234,6 0,2 -5,5 0,5 -2,0 0,-5 -5,-5 0,-2"
-     id="path3546"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccc" />
-  <g
-     transform="matrix(1.3333328,0,0,-1.5999992,-139.9999,127.19999)"
-     id="g4383-6">
-    <rect
-       id="rect4385-2"
-       height="1.2499905"
-       width="5.9999924"
-       y="12.625005"
-       x="198.00002"
-       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0" />
-    <rect
-       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
-       x="198.00002"
-       y="15.125007"
-       width="7.4999928"
-       height="1.2499949"
-       id="rect4387-9" />
-    <rect
-       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
-       x="198.00002"
-       y="7.6250024"
-       width="2.9999909"
-       height="1.2499905"
-       id="rect4389-1-0" />
-    <rect
-       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
-       x="198.00002"
-       y="10.125004"
-       width="4.4999919"
-       height="1.2499905"
-       id="rect4389-1-9" />
-    <path
-       style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 207.00001,16.375004 0,-5.625005 -2.25,0 3,-3.1250014 3,3.1250014 -2.25,0 0,5.625005 -1.5,0"
-       id="path4402"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccccccc" />
-  </g>
-  <path
-     style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     d="m 164,100 0,3 -6,6 0,7 -4,0 0,-7 -6,-6 0,-3"
-     id="path3546-2-2"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccc" />
-  <rect
-     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
-     id="svg_1-3"
-     height="16"
-     width="16"
-     y="28"
-     x="4" />
-  <path
-     sodipodi:nodetypes="ccccccccc"
-     inkscape:connector-curvature="0"
-     id="path4402-5-7"
-     d="m 15,41 0,-7 -4,0 0,3 -5,-4 5,-4 0,3 6,0 0,9"
-     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-</svg>
diff --git a/demo/gdml/src/jsMain/resources/index.html b/demo/gdml/src/jsMain/resources/index.html
index 6a8a8ebe..1a503224 100644
--- a/demo/gdml/src/jsMain/resources/index.html
+++ b/demo/gdml/src/jsMain/resources/index.html
@@ -4,45 +4,14 @@
     <meta charset="utf-8">
     <!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
     <title>Three js demo for particle physics</title>
-    <script type="text/javascript" src="main.bundle.js"></script>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-    <link rel="stylesheet" href="css/jsoneditor.min.css">
+    <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/fileDrop.css">
+    <script type="text/javascript" src="main.bundle.js"></script>
+    <script type="text/javascript" src ="js/jquery-3.4.1.min.js"></script>
+    <script type="text/javascript" src ="js/bootstrap.bundle.min.js"></script>
 </head>
 <body class="testApp">
-
-<div class="container">
-    <h1>GDML demo</h1>
-</div>
-
-<div class="container-fluid h-100">
-    <div class="row h-100">
-        <div class="col-lg-3">
-            <div class="card">
-                <div class="card-body">
-                    <a>Load file:</a>
-                    <input type="file" id="file_load_button" accept=".gdml, application/xml, application/json"/>
-                </div>
-            </div>
-            <div class="card">
-                <div class="card-body" id="drop_zone">
-                    Load data
-                    <br/>
-                    (drag file here)
-                </div>
-            </div>
-            <div class="overflow-auto" id="tree"></div>
-        </div>
-        <div class="col-lg-6">
-            <div id="canvas"></div>
-        </div>
-        <div class="col-lg-3">
-            <div class="row" id="config"></div>
-            <div class="row" id="editor"></div>
-        </div>
-    </div>
-</div>
-<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script></body>
+<div class="container-fluid" id = "app"> </div>
+</body>
 </html>
\ No newline at end of file
diff --git a/demo/gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt b/demo/gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
index 9de54bc5..b3b6dc90 100644
--- a/demo/gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
+++ b/demo/gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
@@ -5,9 +5,9 @@ import hep.dataforge.vis.editor.VisualObjectEditorFragment
 import hep.dataforge.vis.editor.VisualObjectTreeFragment
 import hep.dataforge.vis.spatial.Material3D
 import hep.dataforge.vis.spatial.Visual3D
-import hep.dataforge.vis.spatial.VisualGroup3D
 import hep.dataforge.vis.spatial.fx.FX3DPlugin
 import hep.dataforge.vis.spatial.fx.FXCanvas3D
+import hep.dataforge.vis.spatial.gdml.toVisual
 import javafx.geometry.Orientation
 import javafx.scene.Parent
 import javafx.stage.FileChooser
@@ -36,10 +36,15 @@ class GDMLView : View() {
             buttonbar {
                 button("Load GDML/json") {
                     action {
-                        val file = chooseFile("Select a GDML/json file", filters = fileNameFilter).firstOrNull()
-                            ?: return@action
-                        val visual: VisualGroup3D = Visual3D.readFile(file)
-                        canvas.render(visual)
+                        runAsync {
+                            val file = chooseFile("Select a GDML/json file", filters = fileNameFilter).firstOrNull()
+                                ?: return@runAsync null
+                            Visual3D.readFile(file)
+                        } ui {
+                            if (it != null) {
+                                canvas.render(it)
+                            }
+                        }
                     }
                 }
             }
@@ -51,6 +56,14 @@ class GDMLView : View() {
         }
     }
 
+    init {
+        runAsync {
+            cubes().toVisual()
+        } ui {
+            canvas.render(it)
+        }
+    }
+
     companion object {
         private val fileNameFilter = arrayOf(
             FileChooser.ExtensionFilter("GDML", "*.gdml", "*.xml"),
diff --git a/demo/muon-monitor/build.gradle.kts b/demo/muon-monitor/build.gradle.kts
index b2290bb1..42ea975e 100644
--- a/demo/muon-monitor/build.gradle.kts
+++ b/demo/muon-monitor/build.gradle.kts
@@ -1,3 +1,5 @@
+import kotlinx.atomicfu.plugin.gradle.withKotlinTargets
+import org.jetbrains.kotlin.gradle.plugin.KotlinCompilation.Companion.MAIN_COMPILATION_NAME
 import scientifik.jsDistDirectory
 
 plugins {
@@ -13,7 +15,7 @@ kotlin {
 
     val installJS = tasks.getByName("jsBrowserDistribution")
 
-    js{
+    js {
         browser {
             dceTask {
                 dceOptions {
@@ -28,14 +30,15 @@ kotlin {
 
     jvm {
         withJava()
-        compilations.findByName("main").apply {
-            tasks.getByName<ProcessResources>("jvmProcessResources") {
+        compilations[MAIN_COMPILATION_NAME]?.apply {
+            tasks.getByName<ProcessResources>(processResourcesTaskName) {
                 dependsOn(installJS)
                 afterEvaluate {
                     from(project.jsDistDirectory)
                 }
             }
         }
+
     }
 
     sourceSets {
@@ -53,6 +56,7 @@ kotlin {
         }
         jsMain {
             dependencies {
+                implementation(project(":ui:bootstrap"))
                 implementation("io.ktor:ktor-client-js:$ktorVersion")
                 implementation("io.ktor:ktor-client-serialization-js:$ktorVersion")
                 implementation(npm("text-encoding"))
@@ -70,17 +74,4 @@ kotlin {
 
 application {
     mainClassName = "ru.mipt.npm.muon.monitor.server.MMServerKt"
-}
-
-//configure<JavaFXOptions> {
-//    modules("javafx.controls")
-//}
-
-val common = project(":dataforge-vis-common")
-
-val copyJsResourcesFromCommon by tasks.creating(Copy::class){
-    from(common.buildDir.resolve("processedResources\\js\\main\\"))
-    into(buildDir.resolve("processedResources\\js\\main\\"))
-}
-
-tasks.getByPath("jsProcessResources").dependsOn(copyJsResourcesFromCommon)
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Model.kt b/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Model.kt
index b76be164..358a1c04 100644
--- a/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Model.kt
+++ b/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Model.kt
@@ -62,6 +62,7 @@ class Model {
 
     fun reset() {
         map.values.forEach {
+            it.config
             it.setProperty(Material3D.MATERIAL_COLOR_KEY, null)
         }
         tracks.removeAll()
diff --git a/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt
index bf05be52..d7a0a3af 100644
--- a/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt
+++ b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt
@@ -1,15 +1,15 @@
 package ru.mipt.npm.muon.monitor
 
 import hep.dataforge.context.Context
-import hep.dataforge.js.card
-import hep.dataforge.js.component
-import hep.dataforge.js.state
 import hep.dataforge.names.Name
 import hep.dataforge.names.NameToken
 import hep.dataforge.names.isEmpty
 import hep.dataforge.vis.VisualObject
-import hep.dataforge.vis.editor.configEditor
-import hep.dataforge.vis.editor.objectTree
+import hep.dataforge.vis.bootstrap.card
+import hep.dataforge.vis.bootstrap.configEditor
+import hep.dataforge.vis.bootstrap.objectTree
+import hep.dataforge.vis.react.component
+import hep.dataforge.vis.react.state
 import hep.dataforge.vis.spatial.specifications.Camera
 import hep.dataforge.vis.spatial.specifications.Canvas
 import hep.dataforge.vis.spatial.three.ThreeCanvas
@@ -48,13 +48,14 @@ val MMApp = component<MMAppProps> { props ->
     }
 
     val visual = props.model.root
+
     div("row") {
         h1("mx-auto") {
-            +"Muon monitor demo"
+            +"GDML/JSON render demo"
         }
     }
     div("row") {
-        div("col-lg-3 mh-100 px-0") {
+        div("col-lg-3 px-0 overflow-auto") {
             //tree
             card("Object tree") {
                 objectTree(visual, selected, select)
@@ -154,7 +155,7 @@ val MMApp = component<MMAppProps> { props ->
                             else -> visual[selected]
                         }
                         if (selectedObject != null) {
-                            configEditor(selectedObject, default = selectedObject.allProperties())
+                            configEditor(selectedObject, default = selectedObject.allProperties(), key = selected)
                         }
                     }
                 }
diff --git a/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt
index 86482004..50792b82 100644
--- a/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt
+++ b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt
@@ -9,6 +9,7 @@ import io.ktor.client.features.json.JsonFeature
 import io.ktor.client.features.json.serializer.KotlinxSerializer
 import kotlinx.serialization.json.Json
 import react.child
+import react.dom.div
 import react.dom.render
 import kotlin.browser.document
 
@@ -30,11 +31,13 @@ private class MMDemoApp : Application {
         val element = document.getElementById("app") ?: error("Element with id 'app' not found on page")
 
         render(element) {
-            child(MMApp) {
-                attrs {
-                    model = this@MMDemoApp.model
-                    connection = this@MMDemoApp.connection
-                    this.context = context
+            div("container-fluid h-100") {
+                child(MMApp) {
+                    attrs {
+                        model = this@MMDemoApp.model
+                        connection = this@MMDemoApp.connection
+                        this.context = context
+                    }
                 }
             }
         }
diff --git a/demo/spatial-showcase/build.gradle.kts b/demo/spatial-showcase/build.gradle.kts
index 064f207d..f83aaaa1 100644
--- a/demo/spatial-showcase/build.gradle.kts
+++ b/demo/spatial-showcase/build.gradle.kts
@@ -1,6 +1,4 @@
-import scientifik.DependencyConfiguration
-import scientifik.FXModule
-import scientifik.fx
+import scientifik.*
 
 plugins {
     id("scientifik.mpp")
@@ -8,7 +6,7 @@ plugins {
 }
 
 val fxVersion: String by rootProject.extra
-fx(FXModule.CONTROLS, version = fxVersion, configuration = DependencyConfiguration.IMPLEMENTATION)
+useFx(FXModule.CONTROLS, version = fxVersion, configuration = DependencyConfiguration.IMPLEMENTATION)
 
 kotlin {
 
diff --git a/playground/build.gradle.kts b/playground/build.gradle.kts
index 3ad5ff15..5c53e40d 100644
--- a/playground/build.gradle.kts
+++ b/playground/build.gradle.kts
@@ -21,6 +21,7 @@ kotlin {
             dependencies {
                 api(project(":dataforge-vis-spatial"))
                 api(project(":dataforge-vis-spatial-gdml"))
+                api(project(":ui:bootstrap"))
             }
         }
     }
diff --git a/playground/src/jsMain/kotlin/PlayGroundApp.kt b/playground/src/jsMain/kotlin/PlayGroundApp.kt
index 79efa165..59a52021 100644
--- a/playground/src/jsMain/kotlin/PlayGroundApp.kt
+++ b/playground/src/jsMain/kotlin/PlayGroundApp.kt
@@ -2,8 +2,8 @@ import hep.dataforge.context.Global
 import hep.dataforge.js.Application
 import hep.dataforge.js.startApplication
 import hep.dataforge.names.Name
-import hep.dataforge.vis.editor.objectTree
-import hep.dataforge.vis.editor.visualPropertyEditor
+import hep.dataforge.vis.bootstrap.objectTree
+import hep.dataforge.vis.bootstrap.visualPropertyEditor
 import hep.dataforge.vis.spatial.Point3D
 import hep.dataforge.vis.spatial.VisualGroup3D
 import hep.dataforge.vis.spatial.box
@@ -45,8 +45,6 @@ private class PlayGroundApp : Application {
                 }
             }
         }
-
-
     }
 
 }
diff --git a/settings.gradle.kts b/settings.gradle.kts
index b6673c37..636071e3 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -25,6 +25,11 @@ pluginManagement {
 rootProject.name = "dataforge-vis"
 
 include(
+    ":ui",
+    ":ui:react",
+    ":ui:ring",
+    ":ui:material",
+    ":ui:bootstrap",
     ":dataforge-vis-common",
     ":dataforge-vis-spatial",
     ":dataforge-vis-spatial-gdml",
@@ -33,13 +38,3 @@ include(
     ":demo:muon-monitor",
     ":playground"
 )
-
-//if(file("../dataforge-core").exists()) {
-//    includeBuild("../dataforge-core"){
-//        dependencySubstitution {
-//            //substitute(module("hep.dataforge:dataforge-output")).with(project(":dataforge-output"))
-//            substitute(module("hep.dataforge:dataforge-output-jvm")).with(project(":dataforge-output"))
-//            substitute(module("hep.dataforge:dataforge-output-js")).with(project(":dataforge-output"))
-//        }
-//    }
-//}
\ No newline at end of file
diff --git a/ui/bootstrap/build.gradle.kts b/ui/bootstrap/build.gradle.kts
new file mode 100644
index 00000000..9a974d8d
--- /dev/null
+++ b/ui/bootstrap/build.gradle.kts
@@ -0,0 +1,16 @@
+plugins {
+    id("scientifik.js")
+}
+
+val dataforgeVersion: String by rootProject.extra
+
+kotlin {
+    target {
+        useCommonJs()
+    }
+}
+
+dependencies{
+    api(project(":dataforge-vis-common"))
+    api(project(":ui:react"))
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/MetaViewerComponent.kt b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/MetaViewerComponent.kt
similarity index 98%
rename from dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/MetaViewerComponent.kt
rename to ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/MetaViewerComponent.kt
index 75e99c7c..0a287e07 100644
--- a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/MetaViewerComponent.kt
+++ b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/MetaViewerComponent.kt
@@ -1,4 +1,4 @@
-package hep.dataforge.vis.editor
+package hep.dataforge.vis.bootstrap
 
 import hep.dataforge.meta.Meta
 import hep.dataforge.meta.MetaItem
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ObjectTree.kt b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/ObjectTree.kt
similarity index 93%
rename from dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ObjectTree.kt
rename to ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/ObjectTree.kt
index af4faaa9..1862a0bb 100644
--- a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ObjectTree.kt
+++ b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/ObjectTree.kt
@@ -1,15 +1,13 @@
-package hep.dataforge.vis.editor
+package hep.dataforge.vis.bootstrap
 
-import hep.dataforge.js.RFBuilder
-import hep.dataforge.js.card
-import hep.dataforge.js.component
-import hep.dataforge.js.state
 import hep.dataforge.names.Name
 import hep.dataforge.names.plus
 import hep.dataforge.names.startsWith
 import hep.dataforge.vis.VisualGroup
 import hep.dataforge.vis.VisualObject
 import hep.dataforge.vis.isEmpty
+import hep.dataforge.vis.react.RFBuilder
+import hep.dataforge.vis.react.component
 import kotlinx.html.classes
 import kotlinx.html.js.onClickFunction
 import org.w3c.dom.Element
@@ -29,7 +27,7 @@ interface TreeState : RState {
 }
 
 private fun RFBuilder.objectTree(props: ObjectTreeProps): Unit {
-    var expanded: Boolean by state{ props.selected?.startsWith(props.name) ?: false }
+    var expanded: Boolean by useState{ props.selected?.startsWith(props.name) ?: false }
 
     val onClick: (Event) -> Unit = {
         expanded = !expanded
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/bootstrap.kt b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/bootstrap.kt
similarity index 57%
rename from dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/bootstrap.kt
rename to ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/bootstrap.kt
index 9c3b15f7..4a0d5a42 100644
--- a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/bootstrap.kt
+++ b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/bootstrap.kt
@@ -1,9 +1,13 @@
-package hep.dataforge.js
+package hep.dataforge.vis.bootstrap
 
+import hep.dataforge.names.Name
+import hep.dataforge.names.NameToken
 import kotlinx.html.*
 import kotlinx.html.js.div
+import kotlinx.html.js.onClickFunction
 import org.w3c.dom.HTMLElement
 import react.RBuilder
+import react.ReactElement
 import react.dom.*
 
 inline fun TagConsumer<HTMLElement>.card(title: String, crossinline block: TagConsumer<HTMLElement>.() -> Unit) {
@@ -16,7 +20,7 @@ inline fun TagConsumer<HTMLElement>.card(title: String, crossinline block: TagCo
 }
 
 inline fun RBuilder.card(title: String, crossinline block: RBuilder.() -> Unit) {
-    div("card w-100 h-100") {
+    div("card w-100") {
         div("card-body") {
             h3(classes = "card-title") {
                 +title
@@ -26,7 +30,6 @@ inline fun RBuilder.card(title: String, crossinline block: RBuilder.() -> Unit)
     }
 }
 
-
 fun TagConsumer<HTMLElement>.accordion(id: String, elements: List<Pair<String, DIV.() -> Unit>>) {
     div("container-fluid") {
         div("accordion") {
@@ -59,7 +62,6 @@ fun TagConsumer<HTMLElement>.accordion(id: String, elements: List<Pair<String, D
     }
 }
 
-
 typealias AccordionBuilder = MutableList<Pair<String, DIV.() -> Unit>>
 
 fun AccordionBuilder.entry(title: String, builder: DIV.() -> Unit) {
@@ -71,8 +73,8 @@ fun TagConsumer<HTMLElement>.accordion(id: String, builder: AccordionBuilder.()
     accordion(id, list)
 }
 
-fun RBuilder.accordion(id: String, elements: List<Pair<String, RDOMBuilder<DIV>.() -> Unit>>) {
-    div("container-fluid") {
+fun RBuilder.accordion(id: String, elements: List<Pair<String, RDOMBuilder<DIV>.() -> Unit>>): ReactElement {
+    return div("container-fluid") {
         div("accordion") {
             attrs {
                 this.id = id
@@ -111,13 +113,102 @@ fun RBuilder.accordion(id: String, elements: List<Pair<String, RDOMBuilder<DIV>.
     }
 }
 
+fun RBuilder.namecrumbs(name: Name?, rootTitle: String, link: (Name) -> Unit) {
+    div("container-fluid p-0") {
+        nav {
+            attrs {
+                attributes["aria-label"] = "breadcrumb"
+            }
+            ol("breadcrumb") {
+                li("breadcrumb-item") {
+                    button(classes = "btn btn-link p-0") {
+                        +rootTitle
+                        attrs {
+                            onClickFunction = {
+                                link(Name.EMPTY)
+                            }
+                        }
+                    }
+                }
+                if (name != null) {
+                    val tokens = ArrayList<NameToken>(name.length)
+                    name.tokens.forEach { token ->
+                        tokens.add(token)
+                        val fullName = Name(tokens.toList())
+                        li("breadcrumb-item") {
+                            button(classes = "btn btn-link p-0") {
+                                +token.toString()
+                                attrs {
+                                    onClickFunction = {
+                                        console.log("Selected = $fullName")
+                                        link(fullName)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 typealias RAccordionBuilder = MutableList<Pair<String, RDOMBuilder<DIV>.() -> Unit>>
 
 fun RAccordionBuilder.entry(title: String, builder: RDOMBuilder<DIV>.() -> Unit) {
     add(title to builder)
 }
 
-fun RBuilder.accordion(id: String, builder: RAccordionBuilder.() -> Unit) {
+fun RBuilder.accordion(id: String, builder: RAccordionBuilder.() -> Unit): ReactElement {
     val list = ArrayList<Pair<String, RDOMBuilder<DIV>.() -> Unit>>().apply(builder)
-    accordion(id, list)
+    return accordion(id, list)
+}
+
+fun joinStyles(vararg styles: String?) = styles.joinToString(separator = " ") { it ?: "" }
+
+inline fun RBuilder.flexColumn(classes: String? = null, block: RDOMBuilder<DIV>.() -> Unit) =
+    div(joinStyles(classes, "d-flex flex-column"), block)
+
+inline fun RBuilder.flexRow(classes: String? = null, block: RDOMBuilder<DIV>.() -> Unit) =
+    div(joinStyles(classes, "d-flex flex-row"), block)
+
+enum class ContainerSize(val suffix: String) {
+    DEFAULT(""),
+    SM("-sm"),
+    MD("-md"),
+    LG("-lg"),
+    XL("-xl"),
+    FLUID("-fluid")
+}
+
+inline fun RBuilder.container(
+    classes: String? = null,
+    size: ContainerSize = ContainerSize.FLUID,
+    block: RDOMBuilder<DIV>.() -> Unit
+): ReactElement = div(joinStyles(classes, "container${size.suffix}"), block)
+
+
+enum class GridMaxSize(val suffix: String) {
+    NONE(""),
+    SM("-sm"),
+    MD("-md"),
+    LG("-lg"),
+    XL("-xl")
+}
+
+inline fun RBuilder.gridColumn(
+    weight: Int? = null,
+    classes: String? = null,
+    maxSize: GridMaxSize = GridMaxSize.NONE,
+    block: RDOMBuilder<DIV>.() -> Unit
+): ReactElement {
+    val weightSuffix = weight?.let { "-$it" } ?: ""
+    return div(joinStyles(classes, "col${maxSize.suffix}$weightSuffix"), block)
+}
+
+inline fun RBuilder.gridRow(
+    classes: String? = null,
+    block: RDOMBuilder<DIV>.() -> Unit
+): ReactElement {
+    return div(joinStyles(classes, "row"), block)
 }
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ConfigEditorComponent.kt b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/configEditor.kt
similarity index 50%
rename from dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ConfigEditorComponent.kt
rename to ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/configEditor.kt
index 6da696f6..ccbf69df 100644
--- a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ConfigEditorComponent.kt
+++ b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/configEditor.kt
@@ -1,13 +1,14 @@
-package hep.dataforge.vis.editor
+package hep.dataforge.vis.bootstrap
 
-import hep.dataforge.js.RFBuilder
-import hep.dataforge.js.component
-import hep.dataforge.js.state
 import hep.dataforge.meta.*
 import hep.dataforge.meta.descriptors.*
 import hep.dataforge.names.Name
 import hep.dataforge.names.NameToken
 import hep.dataforge.names.plus
+import hep.dataforge.values.Value
+import hep.dataforge.vis.react.RFBuilder
+import hep.dataforge.vis.react.component
+import hep.dataforge.vis.react.state
 import kotlinx.html.classes
 import kotlinx.html.js.onClickFunction
 import org.w3c.dom.Element
@@ -15,7 +16,7 @@ import org.w3c.dom.events.Event
 import react.*
 import react.dom.*
 
-interface ConfigEditorProps : RProps {
+interface ConfigEditorItemProps : RProps {
 
     /**
      * Root config object - always non null
@@ -38,19 +39,22 @@ interface ConfigEditorProps : RProps {
     var descriptor: NodeDescriptor?
 }
 
-private fun RFBuilder.configEditorItem(props: ConfigEditorProps) {
+private val ConfigEditorItem: FunctionalComponent<ConfigEditorItemProps> = component { props ->
+    configEditorItem(props)
+}
+
+private fun RFBuilder.configEditorItem(props: ConfigEditorItemProps) {
     var expanded: Boolean by state { true }
-    val item = props.root[props.name]
+    var item: MetaItem<Config>? by state { props.root[props.name] }
     val descriptorItem: ItemDescriptor? = props.descriptor?.get(props.name)
     val defaultItem = props.default?.get(props.name)
-    val actualItem: MetaItem<Meta>? = item ?: defaultItem ?: descriptorItem?.defaultItem()
+    var actualItem: MetaItem<Meta>? by state { item ?: defaultItem ?: descriptorItem?.defaultItem() }
 
     val token = props.name.last()?.toString() ?: "Properties"
 
-    var kostyl by state { false }
-
     fun update() {
-        kostyl = !kostyl
+        item = props.root[props.name]
+        actualItem = item ?: defaultItem ?: descriptorItem?.defaultItem()
     }
 
     useEffectWithCleanup(listOf(props.root)) {
@@ -66,6 +70,15 @@ private fun RFBuilder.configEditorItem(props: ConfigEditorProps) {
         expanded = !expanded
     }
 
+    val valueChanged: (Value?) -> Unit = {
+        if (it == null) {
+            props.root.remove(props.name)
+        } else {
+            props.root[props.name] = it
+        }
+        update()
+    }
+
     val removeClick: (Event) -> Unit = {
         props.root.remove(props.name)
         update()
@@ -103,7 +116,16 @@ private fun RFBuilder.configEditorItem(props: ConfigEditorProps) {
 
                     keys.forEach { token ->
                         li("tree-item align-middle") {
-                            configEditor(props.root, props.name + token, props.descriptor, props.default)
+                            child(ConfigEditorItem) {
+                                attrs {
+                                    this.key = props.name.toString()
+                                    this.root = props.root
+                                    this.name = props.name + token
+                                    this.default = props.default
+                                    this.descriptor = props.descriptor
+                                }
+                            }
+                            //configEditor(props.root, props.name + token, props.descriptor, props.default)
                         }
                     }
                 }
@@ -111,20 +133,27 @@ private fun RFBuilder.configEditorItem(props: ConfigEditorProps) {
         }
         is MetaItem.ValueItem -> {
             div {
-                div("d-flex flex-row align-items-center") {
-                    div("flex-grow-1 p-1 mr-auto tree-label") {
-                        +token
-                        attrs {
-                            if (item == null) {
-                                classes += "tree-label-inactive"
+                div("row form-group") {
+                    div("col d-inline-flex") {
+                        span("tree-label align-self-center") {
+                            +token
+                            attrs {
+                                if (item == null) {
+                                    classes += "tree-label-inactive"
+                                }
                             }
                         }
                     }
-                    div("d-inline-flex") {
-                        valueChooser(props.root, props.name, actualItem.value, descriptorItem as? ValueDescriptor)
+                    div("col-6 d-inline-flex") {
+                        valueChooser(
+                            props.name,
+                            actualItem,
+                            descriptorItem as? ValueDescriptor,
+                            valueChanged
+                        )
                     }
-                    div("d-inline-flex p-1") {
-                        button(classes = "btn btn-link") {
+                    div("col-auto d-inline-flex p-1") {
+                        button(classes = "btn btn-link align-self-center") {
                             +"\u00D7"
                             attrs {
                                 if (item == null) {
@@ -141,30 +170,55 @@ private fun RFBuilder.configEditorItem(props: ConfigEditorProps) {
     }
 }
 
-val ConfigEditor: FunctionalComponent<ConfigEditorProps> = component { configEditorItem(it) }
+interface ConfigEditorProps : RProps {
+    var id: Name
+    var root: Config
+    var default: Meta?
+    var descriptor: NodeDescriptor?
+}
+val ConfigEditor = component<ConfigEditorProps> { props ->
+    child(ConfigEditorItem) {
+        attrs {
+            this.key = ""
+            this.root = props.root
+            this.name = Name.EMPTY
+            this.default = props.default
+            this.descriptor = props.descriptor
+        }
+    }
+}
 
-fun RBuilder.configEditor(
-    config: Config,
-    name: Name = Name.EMPTY,
-    descriptor: NodeDescriptor? = null,
-    default: Meta? = null
-) {
+fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null, key: Any? = null) {
+    render(this) {
+        child(ConfigEditor) {
+            attrs {
+                this.key = key?.toString() ?: ""
+                this.root = config
+                this.descriptor = descriptor
+                this.default = default
+            }
+        }
+    }
+}
+
+fun RBuilder.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null, key: Any? = null) {
     child(ConfigEditor) {
         attrs {
+            this.key = key?.toString() ?: ""
             this.root = config
-            this.name = name
             this.descriptor = descriptor
             this.default = default
         }
     }
 }
 
-fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null) {
-    render(this) {
-        configEditor(config, Name.EMPTY, descriptor, default)
+fun RBuilder.configEditor(obj: Configurable, descriptor: NodeDescriptor? = obj.descriptor, default: Meta? = null, key: Any? = null) {
+    child(ConfigEditor) {
+        attrs {
+            this.key = key?.toString() ?: ""
+            this.root = obj.config
+            this.descriptor = descriptor
+            this.default = default
+        }
     }
 }
-
-fun RBuilder.configEditor(obj: Configurable, descriptor: NodeDescriptor? = obj.descriptor, default: Meta? = null) {
-    configEditor(obj.config, Name.EMPTY, descriptor ?: obj.descriptor, default)
-}
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/propertyEditor.kt b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/propertyEditor.kt
similarity index 95%
rename from dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/propertyEditor.kt
rename to ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/propertyEditor.kt
index 00f928ee..d4b69c48 100644
--- a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/propertyEditor.kt
+++ b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/propertyEditor.kt
@@ -1,6 +1,5 @@
-package hep.dataforge.vis.editor
+package hep.dataforge.vis.bootstrap
 
-import hep.dataforge.js.card
 import hep.dataforge.meta.Meta
 import hep.dataforge.meta.descriptors.NodeDescriptor
 import hep.dataforge.names.Name
diff --git a/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/valueChooser.kt b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/valueChooser.kt
new file mode 100644
index 00000000..d49cd552
--- /dev/null
+++ b/ui/bootstrap/src/main/kotlin/hep/dataforge/vis/bootstrap/valueChooser.kt
@@ -0,0 +1,182 @@
+package hep.dataforge.vis.bootstrap
+
+import hep.dataforge.meta.MetaItem
+import hep.dataforge.meta.descriptors.ValueDescriptor
+import hep.dataforge.meta.get
+import hep.dataforge.meta.string
+import hep.dataforge.meta.value
+import hep.dataforge.names.Name
+import hep.dataforge.values.*
+import hep.dataforge.vis.Colors
+import hep.dataforge.vis.widgetType
+import kotlinx.html.InputType
+import kotlinx.html.js.onChangeFunction
+import kotlinx.html.js.onKeyDownFunction
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.HTMLInputElement
+import org.w3c.dom.HTMLSelectElement
+import org.w3c.dom.events.Event
+import org.w3c.dom.events.KeyboardEvent
+import react.*
+import react.dom.div
+import react.dom.input
+import react.dom.option
+import react.dom.select
+
+interface ValueChooserProps : RProps {
+    var item: MetaItem<*>?
+    var descriptor: ValueDescriptor?
+    var valueChanged: ((Value?) -> Unit)?
+}
+
+interface ValueChooserState : RState {
+    var value: Value?
+    var rawInput: Boolean?
+}
+
+class ValueChooserComponent(props: ValueChooserProps) : RComponent<ValueChooserProps, ValueChooserState>(props) {
+    private val element = createRef<HTMLElement>()
+
+    override fun ValueChooserState.init(props: ValueChooserProps) {
+        value = props.item.value
+    }
+
+    private fun getValue(): Value? {
+        val element = element.current ?: return null//state.element ?: return null
+        return when (element) {
+            is HTMLInputElement -> if (element.type == "checkbox") {
+                if (element.checked) True else False
+            } else {
+                element.value.asValue()
+            }
+            is HTMLSelectElement -> element.value.asValue()
+            else -> error("Unknown event target: $element")
+        }
+    }
+
+    private val valueChanged: (Event) -> Unit = { _ ->
+        setState {
+            value = getValue()
+        }
+    }
+
+    private val valueChangeAndCommit: (Event) -> Unit = { event ->
+        val res = getValue()
+        setState {
+            value = res
+        }
+        props.valueChanged?.invoke(res)
+
+    }
+
+    private val keyDown: (Event) -> Unit = { event ->
+        if (event is KeyboardEvent && event.key == "Enter") {
+            props.valueChanged?.invoke(getValue())
+        }
+    }
+
+    override fun shouldComponentUpdate(
+        nextProps: ValueChooserProps,
+        nextState: ValueChooserState
+    ): Boolean = nextProps.item !== props.item
+
+    override fun componentDidUpdate(prevProps: ValueChooserProps, prevState: ValueChooserState, snapshot: Any) {
+        (element.current as? HTMLInputElement)?.let { element ->
+            if (element.type == "checkbox") {
+                element.checked = state.value?.boolean ?: false
+            } else {
+                element.value = state.value?.string ?: ""
+            }
+            element.indeterminate = state.value == null
+        }
+//        (state.element as? HTMLSelectElement)?.let { element ->
+//            state.value?.let { element.value = it.string }
+//        }
+    }
+
+    private fun RBuilder.stringInput() = input(type = InputType.text) {
+        attrs {
+            this.value = state.value?.string ?: ""
+            onChangeFunction = valueChanged
+            onKeyDownFunction = keyDown
+        }
+        ref = element
+    }
+
+    override fun RBuilder.render() {
+        div("align-self-center") {
+            val descriptor = props.descriptor
+            val type = descriptor?.type?.firstOrNull()
+            when {
+                state.rawInput == true -> stringInput()
+                descriptor?.widgetType == "color" -> input(type = InputType.color) {
+                    ref = element
+                    attrs {
+                        this.value = state.value?.let { value ->
+                            if (value.type == ValueType.NUMBER) Colors.rgbToString(value.int)
+                            else value.string
+                        } ?: "#000000"
+                        onChangeFunction = valueChangeAndCommit
+                    }
+                }
+                type == ValueType.BOOLEAN -> {
+                    input(type = InputType.checkBox) {
+                        ref = element
+                        attrs {
+                            checked = state.value?.boolean ?: false
+                            onChangeFunction = valueChangeAndCommit
+                        }
+                    }
+                }
+                type == ValueType.NUMBER -> input(type = InputType.number) {
+                    ref = element
+                    attrs {
+                        descriptor.attributes["step"].string?.let {
+                            step = it
+                        }
+                        descriptor.attributes["min"].string?.let {
+                            min = it
+                        }
+                        descriptor.attributes["max"].string?.let {
+                            max = it
+                        }
+                        this.value = state.value?.string ?: ""
+                        onChangeFunction = valueChanged
+                        onKeyDownFunction = keyDown
+                    }
+                }
+                descriptor?.allowedValues?.isNotEmpty() ?: false -> select {
+                    descriptor!!.allowedValues.forEach {
+                        option {
+                            +it.string
+                        }
+                    }
+                    ref = element
+                    attrs {
+                        this.value = state.value?.string ?: ""
+                        multiple = false
+                        onChangeFunction = valueChangeAndCommit
+                    }
+                }
+                else -> stringInput()
+            }
+        }
+    }
+
+}
+
+internal fun RBuilder.valueChooser(
+    name: Name,
+    item: MetaItem<*>?,
+    descriptor: ValueDescriptor? = null,
+    callback: (Value?) -> Unit
+) {
+    child(ValueChooserComponent::class) {
+        attrs {
+            key = name.toString()
+            this.item = item
+            this.descriptor = descriptor
+            this.valueChanged = callback
+        }
+    }
+}
diff --git a/dataforge-vis-common/src/jsMain/resources/css/bootstrap.min.css b/ui/bootstrap/src/main/resources/css/bootstrap.min.css
similarity index 100%
rename from dataforge-vis-common/src/jsMain/resources/css/bootstrap.min.css
rename to ui/bootstrap/src/main/resources/css/bootstrap.min.css
diff --git a/dataforge-vis-common/src/jsMain/resources/css/bootstrap.min.css.map b/ui/bootstrap/src/main/resources/css/bootstrap.min.css.map
similarity index 100%
rename from dataforge-vis-common/src/jsMain/resources/css/bootstrap.min.css.map
rename to ui/bootstrap/src/main/resources/css/bootstrap.min.css.map
diff --git a/dataforge-vis-common/src/jsMain/resources/css/main.css b/ui/bootstrap/src/main/resources/css/main.css
similarity index 100%
rename from dataforge-vis-common/src/jsMain/resources/css/main.css
rename to ui/bootstrap/src/main/resources/css/main.css
diff --git a/dataforge-vis-common/src/jsMain/resources/js/bootstrap.bundle.min.js b/ui/bootstrap/src/main/resources/js/bootstrap.bundle.min.js
similarity index 100%
rename from dataforge-vis-common/src/jsMain/resources/js/bootstrap.bundle.min.js
rename to ui/bootstrap/src/main/resources/js/bootstrap.bundle.min.js
diff --git a/dataforge-vis-common/src/jsMain/resources/js/bootstrap.bundle.min.js.map b/ui/bootstrap/src/main/resources/js/bootstrap.bundle.min.js.map
similarity index 100%
rename from dataforge-vis-common/src/jsMain/resources/js/bootstrap.bundle.min.js.map
rename to ui/bootstrap/src/main/resources/js/bootstrap.bundle.min.js.map
diff --git a/dataforge-vis-common/src/jsMain/resources/js/jquery-3.4.1.min.js b/ui/bootstrap/src/main/resources/js/jquery-3.4.1.min.js
similarity index 100%
rename from dataforge-vis-common/src/jsMain/resources/js/jquery-3.4.1.min.js
rename to ui/bootstrap/src/main/resources/js/jquery-3.4.1.min.js
diff --git a/ui/build.gradle.kts b/ui/build.gradle.kts
new file mode 100644
index 00000000..e69de29b
diff --git a/ui/material/build.gradle.kts b/ui/material/build.gradle.kts
new file mode 100644
index 00000000..459380c5
--- /dev/null
+++ b/ui/material/build.gradle.kts
@@ -0,0 +1,22 @@
+plugins {
+    id("scientifik.js")
+}
+
+val dataforgeVersion: String by rootProject.extra
+
+kotlin {
+    target {
+        useCommonJs()
+    }
+}
+
+dependencies{
+    api(project(":dataforge-vis-common"))
+    api(project(":ui:react"))
+
+    api("subroh0508.net.kotlinmaterialui:core:0.3.16")
+    api("subroh0508.net.kotlinmaterialui:lab:0.3.16")
+    api(npm("@material-ui/core","4.9.13"))
+    api(npm("@material-ui/lab","4.0.0-alpha.52"))
+    //api(npm("@material-ui/icons","4.9.1"))
+}
\ No newline at end of file
diff --git a/ui/material/src/main/kotlin/hep/dataforge/vis/material/configEditor.kt b/ui/material/src/main/kotlin/hep/dataforge/vis/material/configEditor.kt
new file mode 100644
index 00000000..821a073f
--- /dev/null
+++ b/ui/material/src/main/kotlin/hep/dataforge/vis/material/configEditor.kt
@@ -0,0 +1,193 @@
+package hep.dataforge.vis.material
+
+import hep.dataforge.meta.*
+import hep.dataforge.meta.descriptors.*
+import hep.dataforge.names.Name
+import hep.dataforge.names.NameToken
+import hep.dataforge.names.isEmpty
+import hep.dataforge.names.plus
+import hep.dataforge.vis.react.component
+import hep.dataforge.vis.react.state
+import kotlinx.css.Display
+import kotlinx.css.display
+import kotlinx.css.flexGrow
+import kotlinx.css.flexShrink
+import kotlinx.html.js.onClickFunction
+import materialui.components.button.button
+import materialui.components.grid.enums.GridAlignItems
+import materialui.components.grid.enums.GridJustify
+import materialui.components.grid.grid
+import materialui.components.typography.typographyH6
+import materialui.lab.components.treeItem.treeItem
+import materialui.lab.components.treeView.treeView
+import org.w3c.dom.Element
+import org.w3c.dom.events.Event
+import react.*
+import react.dom.render
+import react.dom.span
+import styled.css
+import styled.styledDiv
+
+interface ConfigEditorProps : RProps {
+
+    /**
+     * Root config object - always non null
+     */
+    var root: Config
+
+    /**
+     * Full path to the displayed node in [root]. Could be empty
+     */
+    var name: Name
+
+    /**
+     * Root default
+     */
+    var default: Meta?
+
+    /**
+     * Root descriptor
+     */
+    var descriptor: NodeDescriptor?
+}
+
+private fun RBuilder.configEditorItem(
+    root: Config,
+    name: Name,
+    descriptor: NodeDescriptor?,
+    default: Meta?
+) {
+    val item = root[name]
+    val descriptorItem: ItemDescriptor? = descriptor?.get(name)
+    val defaultItem = default?.get(name)
+    val actualItem: MetaItem<Meta>? = item ?: defaultItem ?: descriptorItem?.defaultItem()
+
+    val token = name.last()?.toString() ?: "Properties"
+
+    val removeClick: (Event) -> Unit = {
+        root.remove(name)
+    }
+
+    treeItem {
+        attrs {
+            nodeId = name.toString()
+            label {
+                row {
+                    attrs {
+                        alignItems = GridAlignItems.stretch
+                        justify = GridJustify.spaceBetween
+                        spacing(1)
+                    }
+                    grid {
+                        typographyH6 {
+                            +token
+                        }
+                    }
+                    if (actualItem is MetaItem.ValueItem) {
+                        styledDiv {
+                            css {
+                                display = Display.flex
+                                flexGrow = 1.0
+                            }
+                            valueChooser(root, name, actualItem.value, descriptorItem as? ValueDescriptor)
+                        }
+                    }
+                    if (!name.isEmpty()) {
+                        styledDiv {
+                            css {
+                                display = Display.flex
+                                flexShrink = 1.0
+                            }
+                            button {
+                                +"\u00D7"
+                                attrs {
+                                    if (item == null) {
+                                        disabled = true
+                                    } else {
+                                        onClickFunction = removeClick
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        if (actualItem is MetaItem.NodeItem) {
+            val keys = buildSet<NameToken> {
+                (descriptorItem as? NodeDescriptor)?.items?.keys?.forEach {
+                    add(NameToken(it))
+                }
+                item?.node?.items?.keys?.let { addAll(it) }
+                defaultItem?.node?.items?.keys?.let { addAll(it) }
+            }
+
+            keys.forEach { token ->
+                configEditorItem(root, name + token, descriptor, default)
+            }
+        }
+    }
+}
+
+val ConfigEditor: FunctionalComponent<ConfigEditorProps> = component { props ->
+    var kostyl by state { false }
+
+    fun update() {
+        kostyl = !kostyl
+    }
+
+    useEffectWithCleanup(listOf(props.root)) {
+        props.root.onChange(this) { name, _, _ ->
+            if (name == props.name) {
+                update()
+            }
+        }
+        return@useEffectWithCleanup { props.root.removeListener(this) }
+    }
+
+    treeView {
+        attrs {
+            defaultCollapseIcon {
+                span {
+                    +"-"
+                }
+                //child(ExpandMoreIcon::class) {}
+            }//{<ExpandMoreIcon />}
+            defaultExpandIcon {
+                span {
+                    +"+"
+                }
+                //child(ChevronRightIcon::class) {}
+            }//{<ChevronRightIcon />}
+            set("disableSelection", true)
+        }
+        configEditorItem(props.root, props.name, props.descriptor, props.default)
+    }
+
+}
+
+fun RBuilder.configEditor(
+    config: Config,
+    name: Name = Name.EMPTY,
+    descriptor: NodeDescriptor? = null,
+    default: Meta? = null
+) {
+    child(ConfigEditor) {
+        attrs {
+            this.root = config
+            this.name = name
+            this.descriptor = descriptor
+            this.default = default
+        }
+    }
+}
+
+fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null) {
+    render(this) {
+        configEditor(config, Name.EMPTY, descriptor, default)
+    }
+}
+
+fun RBuilder.configEditor(obj: Configurable, descriptor: NodeDescriptor? = obj.descriptor, default: Meta? = null) {
+    configEditor(obj.config, Name.EMPTY, descriptor ?: obj.descriptor, default)
+}
diff --git a/ui/material/src/main/kotlin/hep/dataforge/vis/material/icons.kt b/ui/material/src/main/kotlin/hep/dataforge/vis/material/icons.kt
new file mode 100644
index 00000000..1025b8ba
--- /dev/null
+++ b/ui/material/src/main/kotlin/hep/dataforge/vis/material/icons.kt
@@ -0,0 +1,16 @@
+package hep.dataforge.vis.material
+
+import react.Component
+import react.RClass
+import react.RProps
+import react.RState
+
+//@JsModule("@material-ui/icons/ExpandMore")
+//external class ExpandMoreIcon : Component<RProps, RState>{
+//    override fun render(): dynamic
+//}
+//
+//@JsModule("@material-ui/icons/ChevronRight")
+//external class ChevronRightIcon : Component<RProps, RState>{
+//    override fun render(): dynamic
+//}
\ No newline at end of file
diff --git a/ui/material/src/main/kotlin/hep/dataforge/vis/material/misc.kt b/ui/material/src/main/kotlin/hep/dataforge/vis/material/misc.kt
new file mode 100644
index 00000000..2967cae1
--- /dev/null
+++ b/ui/material/src/main/kotlin/hep/dataforge/vis/material/misc.kt
@@ -0,0 +1,98 @@
+package hep.dataforge.vis.material
+
+import hep.dataforge.vis.react.component
+import hep.dataforge.vis.react.state
+import kotlinx.html.DIV
+import materialui.components.card.card
+import materialui.components.cardcontent.cardContent
+import materialui.components.cardheader.cardHeader
+import materialui.components.container.container
+import materialui.components.container.enums.ContainerMaxWidth
+import materialui.components.expansionpanel.expansionPanel
+import materialui.components.expansionpaneldetails.expansionPanelDetails
+import materialui.components.expansionpanelsummary.expansionPanelSummary
+import materialui.components.grid.GridElementBuilder
+import materialui.components.grid.enums.GridDirection
+import materialui.components.grid.enums.GridStyle
+import materialui.components.grid.grid
+import materialui.components.paper.paper
+import materialui.components.typography.typographyH3
+import materialui.components.typography.typographyH5
+import react.RBuilder
+import react.RProps
+import react.child
+import react.dom.RDOMBuilder
+
+
+fun accordionComponent(elements: List<Pair<String, RDOMBuilder<DIV>.() -> Unit>>) =
+    component<RProps> {
+        val expandedIndex: Int? by state { null }
+
+        container {
+            attrs {
+                maxWidth = ContainerMaxWidth.`false`
+            }
+            elements.forEachIndexed { index, (header, body) ->
+                expansionPanel {
+                    attrs {
+                        expanded = index == expandedIndex
+                    }
+                    expansionPanelSummary {
+                        typographyH5 {
+                            +header
+                        }
+                    }
+                    expansionPanelDetails {
+                        this.body()
+                    }
+                }
+            }
+        }
+    }
+
+typealias RAccordionBuilder = MutableList<Pair<String, RDOMBuilder<DIV>.() -> Unit>>
+
+fun RAccordionBuilder.entry(title: String, builder: RDOMBuilder<DIV>.() -> Unit) {
+    add(title to builder)
+}
+
+fun RBuilder.accordion(builder: RAccordionBuilder.() -> Unit) {
+    val list: List<Pair<String, RDOMBuilder<DIV>.() -> Unit>> =
+        ArrayList<Pair<String, RDOMBuilder<DIV>.() -> Unit>>().apply(builder)
+    child(accordionComponent(list))
+}
+
+fun RBuilder.materialCard(title: String, block: RBuilder.() -> Unit) {
+    card {
+        cardHeader {
+            attrs {
+                this.title = typographyH5 {
+                    +title
+                }
+            }
+        }
+        cardContent {
+            paper {
+                this.block()
+            }
+        }
+    }
+}
+
+fun RBuilder.column(vararg classMap: Pair<GridStyle, String>, block: GridElementBuilder<DIV>.() -> Unit) =
+    grid(*classMap) {
+        attrs {
+            container = true
+            direction = GridDirection.column
+        }
+        block()
+    }
+
+fun RBuilder.row(vararg classMap: Pair<GridStyle, String>, block: GridElementBuilder<DIV>.() -> Unit) =
+    grid(*classMap) {
+        attrs {
+            container = true
+            direction = GridDirection.row
+        }
+        block()
+    }
diff --git a/ui/material/src/main/kotlin/hep/dataforge/vis/material/objectTree.kt b/ui/material/src/main/kotlin/hep/dataforge/vis/material/objectTree.kt
new file mode 100644
index 00000000..976ae836
--- /dev/null
+++ b/ui/material/src/main/kotlin/hep/dataforge/vis/material/objectTree.kt
@@ -0,0 +1,92 @@
+package hep.dataforge.vis.material
+
+import hep.dataforge.names.Name
+import hep.dataforge.names.plus
+import hep.dataforge.names.toName
+import hep.dataforge.vis.VisualGroup
+import hep.dataforge.vis.VisualObject
+import hep.dataforge.vis.isEmpty
+import hep.dataforge.vis.react.component
+import hep.dataforge.vis.react.state
+import materialui.lab.components.treeItem.treeItem
+import materialui.lab.components.treeView.treeView
+import react.FunctionalComponent
+import react.RBuilder
+import react.RProps
+import react.child
+import react.dom.span
+
+interface ObjectTreeProps : RProps {
+    var name: Name
+    var selected: Name?
+    var obj: VisualObject
+    var clickCallback: (Name?) -> Unit
+}
+
+private fun RBuilder.treeBranch(name: Name, obj: VisualObject): Unit {
+    treeItem {
+        val token = name.last()?.toString() ?: "World"
+        attrs {
+            nodeId = name.toString()
+            label {
+                span {
+                    +token
+                }
+            }
+        }
+
+        if (obj is VisualGroup) {
+            obj.children.entries
+                .filter { !it.key.toString().startsWith("@") } // ignore statics and other hidden children
+                .sortedBy { (it.value as? VisualGroup)?.isEmpty ?: true }
+                .forEach { (childToken, child) ->
+                    treeBranch(name + childToken, child)
+                }
+        }
+    }
+}
+
+val ObjectTree: FunctionalComponent<ObjectTreeProps> = component { props ->
+    var selected: String? by state { props.selected.toString() }
+    treeView {
+        attrs {
+            this.selected = selected
+            this.onNodeSelect = { _, selectedItem ->
+                @Suppress("CAST_NEVER_SUCCEEDS")
+                selected = (selectedItem as? String)
+                val itemName = selected?.toName()
+                props.clickCallback(itemName)
+                Unit
+            }
+            defaultCollapseIcon {
+                span{
+                    +"-"
+                }
+                //child(ExpandMoreIcon::class) {}
+            }//{<ExpandMoreIcon />}
+            defaultExpandIcon {
+                span{
+                    +"+"
+                }
+                //child(ChevronRightIcon::class) {}
+            }//{<ChevronRightIcon />}
+        }
+        treeBranch(props.name, props.obj)
+    }
+}
+
+fun RBuilder.objectTree(
+    visualObject: VisualObject,
+    selected: Name? = null,
+    clickCallback: (Name?) -> Unit = {}
+) {
+    child(ObjectTree) {
+        attrs {
+            this.name = Name.EMPTY
+            this.obj = visualObject
+            this.selected = selected
+            this.clickCallback = clickCallback
+        }
+    }
+}
+
diff --git a/ui/material/src/main/kotlin/hep/dataforge/vis/material/valueChooser.kt b/ui/material/src/main/kotlin/hep/dataforge/vis/material/valueChooser.kt
new file mode 100644
index 00000000..7ccf296d
--- /dev/null
+++ b/ui/material/src/main/kotlin/hep/dataforge/vis/material/valueChooser.kt
@@ -0,0 +1,114 @@
+package hep.dataforge.vis.material
+
+import hep.dataforge.meta.Config
+import hep.dataforge.meta.descriptors.ValueDescriptor
+import hep.dataforge.meta.get
+import hep.dataforge.meta.number
+import hep.dataforge.meta.setValue
+import hep.dataforge.names.Name
+import hep.dataforge.values.*
+import hep.dataforge.vis.widgetType
+import kotlinx.html.InputType
+import kotlinx.html.js.onChangeFunction
+import kotlinx.html.js.onKeyDownFunction
+import materialui.components.input.input
+import materialui.components.select.select
+import materialui.components.slider.slider
+import materialui.components.switches.switch
+import materialui.components.textfield.textField
+import org.w3c.dom.HTMLInputElement
+import org.w3c.dom.HTMLSelectElement
+import org.w3c.dom.events.Event
+import org.w3c.dom.events.KeyboardEvent
+import react.RBuilder
+import react.dom.option
+
+internal fun RBuilder.valueChooser(root: Config, name: Name, value: Value, descriptor: ValueDescriptor?) {
+    val onValueChange: (Event) -> Unit = { event ->
+        if (event !is KeyboardEvent || event.key == "Enter") {
+            val res = when (val t = event.target) {
+                // (it.target as HTMLInputElement).value
+                is HTMLInputElement -> if (t.type == "checkbox") {
+                    if (t.checked) True else False
+                } else {
+                    t.value.asValue()
+                }
+                is HTMLSelectElement -> t.value.asValue()
+                else -> error("Unknown event target: $t")
+            }
+
+            try {
+                root.setValue(name, res)
+            } catch (ex: Exception) {
+                console.error("Can't set config property ${name} to $res")
+            }
+        }
+    }
+
+
+    val type = descriptor?.type?.firstOrNull()
+    when {
+        descriptor?.widgetType == "slider" -> slider {
+            attrs {
+                descriptor.attributes["step"].number?.let {
+                    step = it
+                }
+                descriptor.attributes["min"].number?.let {
+                    min = it
+                }
+                descriptor.attributes["max"].number?.let {
+                    max = it
+                }
+                this.defaultValue = value.number
+                onChangeFunction = onValueChange
+            }
+        }
+        descriptor?.widgetType == "color" -> input {
+            attrs {
+                fullWidth = true
+                this.type = InputType.color
+                this.value = value.string
+                onChangeFunction = onValueChange
+            }
+        }
+
+        type == ValueType.BOOLEAN -> switch {
+            attrs {
+                defaultChecked = value.boolean
+                onChangeFunction = onValueChange
+            }
+        }
+
+        type == ValueType.NUMBER -> textField {
+            attrs {
+                fullWidth = true
+                this.type = InputType.number
+                defaultValue = value.string
+                onChangeFunction = onValueChange
+                //onKeyDownFunction = onValueChange
+            }
+        }
+        descriptor?.allowedValues?.isNotEmpty() ?: false -> select {
+            descriptor!!.allowedValues.forEach {
+                option {
+                    +it.string
+                }
+            }
+            attrs {
+                fullWidth = true
+                multiple = false
+                onChangeFunction = onValueChange
+            }
+        }
+        else -> textField {
+            attrs {
+                this.type = InputType.text
+                fullWidth = true
+                this.defaultValue = value.string
+                //onFocusOutFunction = onValueChange
+                onKeyDownFunction = onValueChange
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/ui/material/src/main/kotlin/materialui/components/slider/builder.kt b/ui/material/src/main/kotlin/materialui/components/slider/builder.kt
new file mode 100644
index 00000000..3e764c15
--- /dev/null
+++ b/ui/material/src/main/kotlin/materialui/components/slider/builder.kt
@@ -0,0 +1,37 @@
+package materialui.components.slider
+
+import kotlinx.html.DIV
+import kotlinx.html.Tag
+import materialui.components.MaterialElementBuilder
+import materialui.components.getValue
+import materialui.components.inputbase.enums.InputBaseStyle
+import materialui.components.setValue
+import react.RClass
+import react.ReactElement
+
+class SliderElementBuilder<Props: SliderProps> internal constructor(
+    type: RClass<Props>,
+    classMap: List<Pair<Enum<*>, String>>
+) : MaterialElementBuilder<DIV, Props>(type, classMap, { DIV(mapOf(), it) }) {
+    fun Tag.classes(vararg classMap: Pair<InputBaseStyle, String>) {
+        classes(classMap.toList())
+    }
+    var Tag.defaultValue: Number? by materialProps
+    var Tag.disabled: Boolean? by materialProps// = false
+    var Tag.getAriaLabel: String? by materialProps
+    var Tag.getAriaValueText: String? by materialProps
+    var Tag.marks: Array<String>? by materialProps
+    var Tag.max: Number? by materialProps// = 100
+    var Tag.min: Number? by materialProps// = 0,
+    var Tag.name: String? by materialProps
+    var Tag.onChange: ((dynamic, Number) -> Unit)? by materialProps
+    var Tag.onChangeCommitted: ((dynamic, Number) -> Unit)? by materialProps
+    var Tag.orientation: SliderOrientation? by materialProps
+    var Tag.scale: ((Number) -> Number)? by materialProps// {it}
+    var Tag.step: Number? by materialProps// = 1,
+    //ThumbComponent = 'span',
+    var Tag.track: SliderTrack by materialProps
+    var Tag.value: Number? by materialProps
+    var Tag.ValueLabelComponent: ReactElement? by materialProps
+    var Tag.valueLabelDisplay: SliderValueLabelDisplay by materialProps
+}
\ No newline at end of file
diff --git a/ui/material/src/main/kotlin/materialui/components/slider/enums.kt b/ui/material/src/main/kotlin/materialui/components/slider/enums.kt
new file mode 100644
index 00000000..8a8f9148
--- /dev/null
+++ b/ui/material/src/main/kotlin/materialui/components/slider/enums.kt
@@ -0,0 +1,18 @@
+package materialui.components.slider
+
+enum class SliderOrientation {
+    horizontal,
+    vertical
+}
+
+enum class SliderTrack{
+    normal,
+    `false`,
+    inverted,
+}
+
+enum class SliderValueLabelDisplay{
+    on,
+    auto,
+    off
+}
\ No newline at end of file
diff --git a/ui/material/src/main/kotlin/materialui/components/slider/slider.kt b/ui/material/src/main/kotlin/materialui/components/slider/slider.kt
new file mode 100644
index 00000000..12a8f8e0
--- /dev/null
+++ b/ui/material/src/main/kotlin/materialui/components/slider/slider.kt
@@ -0,0 +1,38 @@
+package materialui.components.slider
+
+import materialui.components.StandardProps
+import materialui.components.input.enums.InputStyle
+import react.RBuilder
+import react.RClass
+import react.ReactElement
+
+@JsModule("@material-ui/core/Slider")
+private external val sliderModule: dynamic
+
+external interface SliderProps : StandardProps {
+    var defaultValue: Number?
+    var disabled: Boolean?// = false
+    var getAriaLabel: String?
+    var getAriaValueText: String?
+    var marks: Array<String>?
+    var max: Number?// = 100
+    var min: Number?// = 0,
+    var name: String?
+    var onChange: ((dynamic, Number) -> Unit)?
+    var onChangeCommitted: ((dynamic, Number) -> Unit)?
+    var orientation: SliderOrientation?
+    var scale: ((Number) -> Number)?// {it}
+    var step: Number? // = 1,
+    //ThumbComponent = 'span',
+    var track: SliderTrack
+    var value: Number?
+    var ValueLabelComponent: ReactElement?
+    var valueLabelDisplay: SliderValueLabelDisplay
+    //valueLabelFormat = Identity,
+}
+
+@Suppress("UnsafeCastFromDynamic")
+private val sliderComponent: RClass<SliderProps> = sliderModule.default
+
+fun RBuilder.slider(vararg classMap: Pair<InputStyle, String>, block: SliderElementBuilder<SliderProps>.() -> Unit) =
+    child(SliderElementBuilder(sliderComponent, classMap.toList()).apply(block).create())
diff --git a/ui/react/build.gradle.kts b/ui/react/build.gradle.kts
new file mode 100644
index 00000000..57aa27a6
--- /dev/null
+++ b/ui/react/build.gradle.kts
@@ -0,0 +1,30 @@
+plugins {
+    id("scientifik.js")
+}
+
+kotlin {
+    target {
+        useCommonJs()
+    }
+}
+
+
+dependencies{
+
+    api("org.jetbrains:kotlin-react:16.13.1-pre.104-kotlin-1.3.72")
+    api("org.jetbrains:kotlin-react-dom:16.13.1-pre.104-kotlin-1.3.72")
+    api("org.jetbrains.kotlinx:kotlinx-html:0.6.12")
+
+    api("org.jetbrains:kotlin-extensions:1.0.1-pre.104-kotlin-1.3.72")
+    api("org.jetbrains:kotlin-css-js:1.0.0-pre.94-kotlin-1.3.70")
+    api("org.jetbrains:kotlin-styled:1.0.0-pre.104-kotlin-1.3.72")
+
+    api(npm("core-js", "2.6.5"))
+
+    api(npm("react", "16.13.1"))
+    api(npm("react-dom", "16.13.1"))
+
+    api(npm("react-is", "16.13.0"))
+    api(npm("inline-style-prefixer", "5.1.0"))
+    api(npm("styled-components", "4.3.2"))
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/react.kt b/ui/react/src/main/kotlin/hep/dataforge/vis/react/react.kt
similarity index 96%
rename from dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/react.kt
rename to ui/react/src/main/kotlin/hep/dataforge/vis/react/react.kt
index 1ed93464..489a30e7 100644
--- a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/react.kt
+++ b/ui/react/src/main/kotlin/hep/dataforge/vis/react/react.kt
@@ -1,4 +1,4 @@
-package hep.dataforge.js
+package hep.dataforge.vis.react
 
 import react.*
 import kotlin.properties.ReadWriteProperty
diff --git a/ui/ring/build.gradle.kts b/ui/ring/build.gradle.kts
new file mode 100644
index 00000000..6cb807a3
--- /dev/null
+++ b/ui/ring/build.gradle.kts
@@ -0,0 +1,22 @@
+plugins {
+    id("scientifik.js")
+}
+
+val dataforgeVersion: String by rootProject.extra
+
+kotlin {
+    target {
+        useCommonJs()
+    }
+}
+
+
+dependencies{
+    api(project(":ui:react"))
+
+    implementation(npm("@jetbrains/logos", "1.1.6"))
+    implementation(npm("@jetbrains/ring-ui", "3.0.13"))
+
+
+    implementation(npm("svg-inline-loader", "0.8.0"))
+}
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/Alert.kt b/ui/ring/src/main/kotlin/ringui/Alert.kt
new file mode 100644
index 00000000..10d9b5a7
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/Alert.kt
@@ -0,0 +1,34 @@
+package ringui
+
+import react.RBuilder
+import react.RHandler
+import react.dom.WithClassName
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/alert/alert.js
+external interface AlertProps : WithClassName {
+    var timeout: Number
+    var onCloseRequest: () -> Unit
+    var onClose: () -> Unit
+    var isShaking: Boolean
+    var isClosing: Boolean
+    var inline: Boolean
+    var showWithAnimation: Boolean
+    var closeable: Boolean
+    var type: AlertType
+}
+
+typealias AlertType = String
+
+object AlertTypes {
+    var ERROR = "error"
+    var MESSAGE = "message"
+    var SUCCESS = "success"
+    var WARNING = "warning"
+    var LOADING = "loading"
+}
+
+fun RBuilder.ringAlert(handler: RHandler<AlertProps>) {
+    RingUI.Alert {
+        handler()
+    }
+}
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/Button.kt b/ui/ring/src/main/kotlin/ringui/Button.kt
new file mode 100644
index 00000000..cacbcad2
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/Button.kt
@@ -0,0 +1,35 @@
+package ringui
+
+import org.w3c.dom.events.MouseEvent
+import react.RBuilder
+import react.RHandler
+import react.dom.WithClassName
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/button/button.js
+external interface ButtonProps : WithClassName {
+    var theme: String
+    var active: Boolean
+    var danger: Boolean
+    var delayed: Boolean
+    var loader: Boolean
+    var primary: Boolean
+
+    var short: Boolean
+    var text: Boolean
+    var inline: Boolean
+    var dropdown: Boolean
+
+    var href: String
+
+    var icon: dynamic /* string | func */
+    var iconSize: Number
+    var iconClassName: String
+
+    var onMouseDown: (MouseEvent) -> Unit
+}
+
+fun RBuilder.ringButton(handler: RHandler<ButtonProps>) {
+    RingUI.Button {
+        handler()
+    }
+}
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/Dialog.kt b/ui/ring/src/main/kotlin/ringui/Dialog.kt
new file mode 100644
index 00000000..6ef54bf5
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/Dialog.kt
@@ -0,0 +1,28 @@
+package ringui
+
+import react.RBuilder
+import react.RHandler
+import react.dom.WithClassName
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/dialog/dialog.js
+external interface DialogProps : WithClassName {
+    var contentClassName: String
+    var show: Boolean
+    var showCloseButton: Boolean
+    var onOverlayClick: () -> Unit
+    var onEscPress: () -> Unit
+    var onCloseClick: () -> Unit
+    // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
+    // Use it if you don't need different behaviors for this cases.
+    var onCloseAttempt: () -> Unit
+    // focusTrap may break popups inside dialog, so use it carefully
+    var trapFocus: Boolean
+    var autoFocusFirst: Boolean
+}
+
+fun RBuilder.ringDialog(show: Boolean, handler: RHandler<DialogProps>) {
+    RingUI.Dialog {
+        attrs.show = show
+        handler()
+    }
+}
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/Icon.kt b/ui/ring/src/main/kotlin/ringui/Icon.kt
new file mode 100644
index 00000000..3bb9c640
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/Icon.kt
@@ -0,0 +1,21 @@
+package ringui
+
+import react.RBuilder
+import react.RHandler
+import react.dom.WithClassName
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/icon/icon.js
+external interface IconProps : WithClassName {
+    var color: String
+    var glyph: dynamic /* string | func */
+    var height: Number
+    var size: Number
+    var width: Number
+    var loading: Boolean
+}
+
+fun RBuilder.ringIcon(handler: RHandler<IconProps>) {
+    RingUI.Icon {
+        handler()
+    }
+}
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/Link.kt b/ui/ring/src/main/kotlin/ringui/Link.kt
new file mode 100644
index 00000000..bd3d7835
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/Link.kt
@@ -0,0 +1,24 @@
+package ringui
+
+import org.w3c.dom.events.MouseEvent
+import react.RBuilder
+import react.RHandler
+import react.dom.WithClassName
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/link/link.js
+external interface LinkProps : WithClassName {
+    var innerClassName: String
+    var active: Boolean
+    var inherit: Boolean
+    var pseudo: Boolean
+    var hover: Boolean
+    var href: String
+    var onPlainLeftClick: (MouseEvent) -> Unit
+    var onClick: (MouseEvent) -> Unit
+}
+
+fun RBuilder.ringLink(handler: RHandler<LinkProps>) {
+    RingUI.Link {
+        handler()
+    }
+}
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/RingUI.kt b/ui/ring/src/main/kotlin/ringui/RingUI.kt
new file mode 100644
index 00000000..c7d3b5ef
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/RingUI.kt
@@ -0,0 +1,14 @@
+package ringui
+
+import ringui.header.HeaderProps
+import react.RClass
+
+@JsModule("@jetbrains/ring-ui")
+external object RingUI {
+    val Alert: RClass<AlertProps>
+    val Button: RClass<ButtonProps>
+    val Dialog: RClass<DialogProps>
+    val Header: RClass<HeaderProps>
+    val Link: RClass<LinkProps>
+    val Icon: RClass<IconProps>
+}
diff --git a/ui/ring/src/main/kotlin/ringui/UserCard.kt b/ui/ring/src/main/kotlin/ringui/UserCard.kt
new file mode 100644
index 00000000..97f5192f
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/UserCard.kt
@@ -0,0 +1,38 @@
+package ringui
+
+import react.RBuilder
+import react.RClass
+import react.RHandler
+import react.RProps
+
+@JsModule("@jetbrains/ring-ui/components/user-card/user-card")
+private external object UserCardModule {
+    val UserCard: RClass<UserCardProps>
+}
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/user-card/card.js
+external interface UserCardProps : RProps {
+    var user: UserCardModel
+    var wording: UserCardWording
+}
+
+data class UserCardModel(
+    val name: String,
+    val login: String,
+    val avatarUrl: String,
+    val email: String? = null,
+    val href: String? = null
+)
+
+data class UserCardWording(
+    val banned: String,
+    val online: String,
+    val offline: String
+)
+
+fun RBuilder.ringUserCard(user: UserCardModel, handler: RHandler<UserCardProps> = {}) {
+    UserCardModule.UserCard {
+        attrs.user = user
+        handler()
+    }
+}
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/header/Header.kt b/ui/ring/src/main/kotlin/ringui/header/Header.kt
new file mode 100644
index 00000000..e04635be
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/header/Header.kt
@@ -0,0 +1,31 @@
+package ringui.header
+
+import ringui.RingUI
+import react.RBuilder
+import react.RClass
+import react.RHandler
+import react.dom.WithClassName
+
+@JsModule("@jetbrains/ring-ui/components/header/header")
+internal external object HeaderModule {
+    val RerenderableHeader: RClass<HeaderProps>
+    val Logo: RClass<HeaderLogoProps>
+    val Tray: RClass<HeaderTrayProps>
+    val TrayIcon: RClass<WithClassName>
+    val Profile: RClass<WithClassName>
+    val SmartProfile: RClass<WithClassName>
+    val Services: RClass<WithClassName>
+    val SmartServices: RClass<WithClassName>
+}
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/header/header.js
+external interface HeaderProps : WithClassName {
+    var spaced: Boolean
+    var theme: String
+}
+
+fun RBuilder.ringHeader(handler: RHandler<HeaderProps>) {
+    RingUI.Header {
+        handler()
+    }
+}
diff --git a/ui/ring/src/main/kotlin/ringui/header/Logo.kt b/ui/ring/src/main/kotlin/ringui/header/Logo.kt
new file mode 100644
index 00000000..4a6b4472
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/header/Logo.kt
@@ -0,0 +1,21 @@
+package ringui.header
+
+import ringui.IconProps
+import kotlinx.html.A
+import react.RElementBuilder
+import react.RHandler
+import styled.StyledDOMBuilder
+
+external interface HeaderLogoProps : IconProps
+
+fun StyledDOMBuilder<A>.ringLogo(handler: RHandler<HeaderLogoProps>) {
+    HeaderModule.Logo {
+        handler()
+    }
+}
+
+fun RElementBuilder<HeaderProps>.ringLogo(handler: RHandler<HeaderLogoProps>) {
+    HeaderModule.Logo {
+        handler()
+    }
+}
diff --git a/ui/ring/src/main/kotlin/ringui/header/Tray.kt b/ui/ring/src/main/kotlin/ringui/header/Tray.kt
new file mode 100644
index 00000000..ce47a44d
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/header/Tray.kt
@@ -0,0 +1,26 @@
+package ringui.header
+
+import ringui.ButtonProps
+import react.RElementBuilder
+import react.RHandler
+import react.dom.WithClassName
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/header/tray.js
+external interface HeaderTrayProps : WithClassName
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/header/tray-icon.js
+external interface HeaderTrayIconProps : ButtonProps {
+    var rotatable: Boolean
+}
+
+fun RElementBuilder<HeaderProps>.ringTray(handler: RHandler<HeaderTrayProps>) {
+    HeaderModule.Tray {
+        handler()
+    }
+}
+
+fun RElementBuilder<HeaderTrayProps>.ringTrayIcon(handler: RHandler<WithClassName>) {
+    HeaderModule.TrayIcon {
+        handler()
+    }
+}
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/island/Content.kt b/ui/ring/src/main/kotlin/ringui/island/Content.kt
new file mode 100644
index 00000000..d183f702
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/island/Content.kt
@@ -0,0 +1,20 @@
+package ringui.island
+
+import react.RElementBuilder
+import react.RHandler
+import react.dom.WithClassName
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/island/content.js
+external interface IslandContentProps : WithClassName {
+    var scrollableWrapperClassName: String
+    var fade: Boolean
+    var bottomBorder: Boolean
+    var onScroll: () -> Unit
+    var onScrollToBottom: () -> Unit
+}
+
+fun RElementBuilder<IslandProps>.ringIslandContent(handler: RHandler<IslandContentProps>) {
+    IslandModule.Content {
+        handler()
+    }
+}
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/island/Header.kt b/ui/ring/src/main/kotlin/ringui/island/Header.kt
new file mode 100644
index 00000000..952a3cfc
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/island/Header.kt
@@ -0,0 +1,18 @@
+package ringui.island
+
+import react.RElementBuilder
+import react.RHandler
+import react.dom.WithClassName
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/island/header.js
+external interface IslandHeaderProps : WithClassName {
+    var border: Boolean
+    var wrapWithTitle: Boolean
+    var phase: Number
+}
+
+fun RElementBuilder<IslandProps>.ringIslandHeader(handler: RHandler<IslandHeaderProps>) {
+    IslandModule.Header {
+        handler()
+    }
+}
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/island/Island.kt b/ui/ring/src/main/kotlin/ringui/island/Island.kt
new file mode 100644
index 00000000..1e02e892
--- /dev/null
+++ b/ui/ring/src/main/kotlin/ringui/island/Island.kt
@@ -0,0 +1,32 @@
+package ringui.island
+
+import react.RBuilder
+import react.RClass
+import react.RHandler
+import react.dom.WithClassName
+
+@JsModule("@jetbrains/ring-ui/components/island/island")
+internal external object IslandModule {
+    val default: RClass<IslandProps>
+    val Content: RClass<IslandContentProps>
+    val Header: RClass<IslandHeaderProps>
+    val AdaptiveIsland: RClass<IslandProps>
+}
+
+// https://github.com/JetBrains/ring-ui/blob/master/components/island/island.js
+external interface IslandProps : WithClassName {
+    val narrow: Boolean
+    val withoutPaddings: Boolean
+}
+
+fun RBuilder.ringIsland(handler: RHandler<IslandProps>) {
+    IslandModule.default {
+        handler()
+    }
+}
+
+fun RBuilder.ringAdaptiveIsland(handler: RHandler<IslandProps>) {
+    IslandModule.AdaptiveIsland {
+        handler()
+    }
+}
\ No newline at end of file
diff --git a/ui/ring/webpack.config.d/01.ring.js b/ui/ring/webpack.config.d/01.ring.js
new file mode 100644
index 00000000..549b6c50
--- /dev/null
+++ b/ui/ring/webpack.config.d/01.ring.js
@@ -0,0 +1,7 @@
+// wrap is useful, because declaring variables in module can be already declared
+// module creates own lexical environment
+;(function (config) {
+    const ringConfig = require('@jetbrains/ring-ui/webpack.config').config;
+
+    config.module.rules.push(...ringConfig.module.rules);
+})(config);
\ No newline at end of file
diff --git a/ui/ring/webpack.config.d/02.svg.js b/ui/ring/webpack.config.d/02.svg.js
new file mode 100644
index 00000000..df178fd3
--- /dev/null
+++ b/ui/ring/webpack.config.d/02.svg.js
@@ -0,0 +1,15 @@
+// wrap is useful, because declaring variables in module can be already declared
+// module creates own lexical environment
+;(function (config) {
+    const path = require("path");
+    config.module.rules.push(
+        {
+            test: /\.svg$/,
+            loader: "svg-inline-loader",
+            options: {removeSVGTagAttrs: false},
+            include: [
+                path.resolve(require.resolve("@jetbrains/logos"), "..", "..")
+            ]
+        }
+    );
+})(config);
\ No newline at end of file