From 8d39a3efa5bcecfd8e57f89f998057e3c6746f6c Mon Sep 17 00:00:00 2001
From: Alexander Nozik <altavir@gmail.com>
Date: Tue, 24 Dec 2019 14:14:10 +0300
Subject: [PATCH] Demo structure change and fx update

---
 dataforge-vis-common/build.gradle.kts         |   1 +
 .../hep/dataforge/vis/common/StyleSheet.kt    |  13 +-
 .../jsMain/kotlin/hep/dataforge/js/jsExtra.kt |   3 +-
 .../hep/dataforge/vis/js}/editor/bootstrap.kt |   2 +-
 .../hep/dataforge/vis/js}/editor/jsTree.kt    |   2 +-
 .../hep/dataforge/vis/js/editor/jsoneditor.kt | 185 ++++++++++++++++++
 .../vis/js}/editor/propertyEditor.kt          |  31 ++-
 .../{values => editor}/ColorValueChooser.kt   |   5 +-
 .../ComboBoxValueChooser.kt                   |   5 +-
 .../vis/fx/{meta => editor}/ConfigEditor.kt   |   6 +-
 .../vis/fx/{meta => editor}/FXMeta.kt         |   2 +-
 .../vis/fx/{meta => editor}/MetaViewer.kt     |   2 +-
 .../fx/{values => editor}/TextValueChooser.kt |   5 +-
 .../fx/{values => editor}/ValueCallback.kt    |   2 +-
 .../vis/fx/{values => editor}/ValueChooser.kt |  16 +-
 .../fx/{values => editor}/ValueChooserBase.kt |   2 +-
 .../fx/editor/VisualObjectEditorFragment.kt   |  59 ++++++
 .../vis/fx/editor/VisualObjectTreeFragment.kt |  33 ++++
 .../dataforge/vis/fx/demo/MetaEditorDemo.kt   |   6 +-
 .../vis/spatial/gdml/GDMLTransformer.kt       |   8 +-
 .../dataforge/vis/spatial/gdml/visualGDML.kt  |   2 +-
 .../src/jsMain/web/css/jsoneditor.min.css     |   6 -
 .../vis/spatial/gdml/visualGDMLJvm.kt         |  11 +-
 dataforge-vis-spatial/build.gradle.kts        |   2 +-
 .../spatial/{editor => three}/outputConfig.kt |   4 +-
 .../dataforge/vis/spatial/fx/FXCanvas3D.kt    |  23 ++-
 demo/build.gradle.kts                         |   0
 demo/gdml/build.gradle.kts                    |  39 ++++
 .../vis/spatial/gdml/demo/GDMLDemoApp.kt      |  25 ++-
 .../src/jsMain/web/css/jsoneditor.min.css     |   6 +
 .../gdml}/src/jsMain/web/css/main.css         |   0
 .../src/jsMain/web}/img/jsoneditor-icons.svg  |   0
 .../gdml}/src/jsMain/web/index.html           |   0
 .../vis/spatial/gdml/demo/GDMLDemoApp.kt      |  78 ++++++++
 .../spatial-showcase}/build.gradle.kts        |   0
 .../hep/dataforge/vis/spatial/demo/demo.kt    |   0
 .../vis/spatial/demo/ThreeDemoApp.kt          |   3 -
 .../vis/spatial/demo/ThreeDemoGrid.kt         |   0
 .../dataforge/vis/spatial/demo/VariableBox.kt |   0
 .../src/jsMain/web/index.html                 |   0
 .../dataforge/vis/spatial/demo/FXDemoApp.kt   |   0
 .../dataforge/vis/spatial/demo/FXDemoGrid.kt  |   3 -
 settings.gradle.kts                           |   5 +-
 43 files changed, 514 insertions(+), 81 deletions(-)
 rename {dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial => dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js}/editor/bootstrap.kt (89%)
 rename {dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial => dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js}/editor/jsTree.kt (98%)
 create mode 100644 dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsoneditor.kt
 rename {dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial => dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js}/editor/propertyEditor.kt (59%)
 rename dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/{values => editor}/ColorValueChooser.kt (91%)
 rename dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/{values => editor}/ComboBoxValueChooser.kt (92%)
 rename dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/{meta => editor}/ConfigEditor.kt (97%)
 rename dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/{meta => editor}/FXMeta.kt (99%)
 rename dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/{meta => editor}/MetaViewer.kt (98%)
 rename dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/{values => editor}/TextValueChooser.kt (96%)
 rename dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/{values => editor}/ValueCallback.kt (94%)
 rename dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/{values => editor}/ValueChooser.kt (89%)
 rename dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/{values => editor}/ValueChooserBase.kt (98%)
 create mode 100644 dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectEditorFragment.kt
 create mode 100644 dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectTreeFragment.kt
 rename dataforge-vis-common/src/{jvmMain => jvmTest}/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt (90%)
 delete mode 100644 dataforge-vis-spatial-gdml/src/jsMain/web/css/jsoneditor.min.css
 rename dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/{editor => three}/outputConfig.kt (92%)
 create mode 100644 demo/build.gradle.kts
 create mode 100644 demo/gdml/build.gradle.kts
 rename {dataforge-vis-spatial-gdml => demo/gdml}/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt (86%)
 create mode 100644 demo/gdml/src/jsMain/web/css/jsoneditor.min.css
 rename {dataforge-vis-spatial-gdml => demo/gdml}/src/jsMain/web/css/main.css (100%)
 rename {dataforge-vis-spatial-gdml/src/jsMain/web/css => demo/gdml/src/jsMain/web}/img/jsoneditor-icons.svg (100%)
 rename {dataforge-vis-spatial-gdml => demo/gdml}/src/jsMain/web/index.html (100%)
 create mode 100644 demo/gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
 rename {spatial-demo => demo/spatial-showcase}/build.gradle.kts (100%)
 rename {spatial-demo => demo/spatial-showcase}/src/commonMain/kotlin/hep/dataforge/vis/spatial/demo/demo.kt (100%)
 rename {spatial-demo => demo/spatial-showcase}/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt (93%)
 rename {spatial-demo => demo/spatial-showcase}/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt (100%)
 rename {spatial-demo => demo/spatial-showcase}/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/VariableBox.kt (100%)
 rename {spatial-demo => demo/spatial-showcase}/src/jsMain/web/index.html (100%)
 rename {spatial-demo => demo/spatial-showcase}/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoApp.kt (100%)
 rename {spatial-demo => demo/spatial-showcase}/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoGrid.kt (92%)

diff --git a/dataforge-vis-common/build.gradle.kts b/dataforge-vis-common/build.gradle.kts
index 767364de..87b03571 100644
--- a/dataforge-vis-common/build.gradle.kts
+++ b/dataforge-vis-common/build.gradle.kts
@@ -29,6 +29,7 @@ kotlin {
             dependencies {
                 api("hep.dataforge:dataforge-output-html:$dataforgeVersion")
                 api(npm("bootstrap","4.4.1"))
+                implementation(npm("jsoneditor"))
             }
         }
     }
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/StyleSheet.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/StyleSheet.kt
index 2fcc1bed..fce0b422 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/StyleSheet.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/StyleSheet.kt
@@ -27,18 +27,21 @@ class StyleSheet() {
         return styleMap[key] ?: (owner?.parent as? VisualGroup)?.styleSheet?.get(key)
     }
 
-    operator fun set(key: String, style: Meta?) {
-        val oldStyle = styleMap[key]
+    /**
+     * Define a style without notifying
+     */
+    fun define(key: String, style: Meta?) {
         if (style == null) {
             styleMap.remove(key)
         } else {
             styleMap[key] = style
         }
-        owner?.styleChanged(key, oldStyle, style)
     }
 
-    infix fun String.put(style: Meta?) {
-        set(this, style)
+    operator fun set(key: String, style: Meta?) {
+        val oldStyle = styleMap[key]
+        define(key, style)
+        owner?.styleChanged(key, oldStyle, style)
     }
 
     operator fun set(key: String, builder: MetaBuilder.() -> Unit) {
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 ad94873d..6354a61c 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
@@ -1,6 +1,7 @@
 package hep.dataforge.js
 
-external fun require(name: String): dynamic
+@JsName("require")
+external fun requireJS(name: String): dynamic
 
 inline fun <T : Any> jsObject(builder: T.() -> Unit): T {
     val obj: T = js("({})") as T
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/bootstrap.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/bootstrap.kt
similarity index 89%
rename from dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/bootstrap.kt
rename to dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/bootstrap.kt
index 7be121b1..2f1e4595 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/bootstrap.kt
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/bootstrap.kt
@@ -1,4 +1,4 @@
-package hep.dataforge.vis.spatial.editor
+package hep.dataforge.vis.js.editor
 
 import kotlinx.html.TagConsumer
 import kotlinx.html.js.div
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/jsTree.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsTree.kt
similarity index 98%
rename from dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/jsTree.kt
rename to dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsTree.kt
index a45c1861..ba9b7dd8 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/jsTree.kt
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsTree.kt
@@ -4,7 +4,7 @@ import hep.dataforge.names.NameToken
 import hep.dataforge.vis.common.VisualGroup
 import hep.dataforge.vis.common.VisualObject
 import hep.dataforge.vis.common.isEmpty
-import hep.dataforge.vis.spatial.editor.card
+import hep.dataforge.vis.js.editor.card
 import kotlinx.html.TagConsumer
 import kotlinx.html.dom.append
 import kotlinx.html.js.*
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsoneditor.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsoneditor.kt
new file mode 100644
index 00000000..8bfaf93a
--- /dev/null
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsoneditor.kt
@@ -0,0 +1,185 @@
+@file:Suppress(
+    "INTERFACE_WITH_SUPERCLASS",
+    "OVERRIDING_FINAL_MEMBER",
+    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
+    "CONFLICTING_OVERLOADS",
+    "EXTERNAL_DELEGATION"
+)
+
+package hep.dataforge.vis.js.editor
+
+import org.w3c.dom.HTMLElement
+
+external interface Node {
+    var field: String
+    var value: String? get() = definedExternally; set(value) = definedExternally
+    var path: dynamic
+}
+
+external interface NodeName {
+    var path: Array<String>
+    var type: dynamic /* 'object' | 'array' */
+    var size: Number
+}
+
+external interface ValidationError {
+    var path: dynamic
+    var message: String
+}
+
+external interface Template {
+    var text: String
+    var title: String
+    var className: String? get() = definedExternally; set(value) = definedExternally
+    var field: String
+    var value: Any
+}
+
+external interface `T$6` {
+    var startFrom: Number
+    var options: Array<String>
+}
+
+external interface AutoCompleteOptions {
+    var confirmKeys: Array<Number>? get() = definedExternally; set(value) = definedExternally
+    var caseSensitive: Boolean? get() = definedExternally; set(value) = definedExternally
+//    var getOptions: AutoCompleteOptionsGetter? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface SelectionPosition {
+    var row: Number
+    var column: Number
+}
+
+external interface SerializableNode {
+    var value: Any
+    var path: dynamic
+}
+
+external interface Color {
+    var rgba: Array<Number>
+    var hsla: Array<Number>
+    var rgbString: String
+    var rgbaString: String
+    var hslString: String
+    var hslaString: String
+    var hex: String
+}
+
+//external interface `T$0` {
+//    var field: Boolean
+//    var value: Boolean
+//}
+//
+//external interface `T$1` {
+//    @nativeGetter
+//    operator fun get(key: String): String?
+//
+//    @nativeSetter
+//    operator fun set(key: String, value: String)
+//}
+
+//external interface Languages {
+//    @nativeGetter
+//    operator fun get(lang: String): `T$1`?
+//
+//    @nativeSetter
+//    operator fun set(lang: String, value: `T$1`)
+//}
+
+external interface JSONEditorOptions {
+//    var ace: AceAjax.Ace? get() = definedExternally; set(value) = definedExternally
+//    var ajv: Ajv? get() = definedExternally; set(value) = definedExternally
+    var onChange: (() -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onChangeJSON: ((json: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onChangeText: ((jsonString: String) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onEditable: ((node: Node) -> dynamic)? get() = definedExternally; set(value) = definedExternally
+    var onError: ((error: Error) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onModeChange: ((newMode: dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */, oldMode: dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onNodeName: ((nodeName: NodeName) -> String?)? get() = definedExternally; set(value) = definedExternally
+    var onValidate: ((json: Any) -> dynamic)? get() = definedExternally; set(value) = definedExternally
+    var escapeUnicode: Boolean? get() = definedExternally; set(value) = definedExternally
+    var sortObjectKeys: Boolean? get() = definedExternally; set(value) = definedExternally
+    var history: Boolean? get() = definedExternally; set(value) = definedExternally
+    var mode: dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */
+    var modes: Array<dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */>? get() = definedExternally; set(value) = definedExternally
+    var name: String? get() = definedExternally; set(value) = definedExternally
+    var schema: Any? get() = definedExternally; set(value) = definedExternally
+    var schemaRefs: Any? get() = definedExternally; set(value) = definedExternally
+    var search: Boolean? get() = definedExternally; set(value) = definedExternally
+    var indentation: Number? get() = definedExternally; set(value) = definedExternally
+    var theme: String? get() = definedExternally; set(value) = definedExternally
+    var templates: Array<Template>? get() = definedExternally; set(value) = definedExternally
+    var autocomplete: AutoCompleteOptions? get() = definedExternally; set(value) = definedExternally
+    var mainMenuBar: Boolean? get() = definedExternally; set(value) = definedExternally
+    var navigationBar: Boolean? get() = definedExternally; set(value) = definedExternally
+    var statusBar: Boolean? get() = definedExternally; set(value) = definedExternally
+    var onTextSelectionChange: ((start: SelectionPosition, end: SelectionPosition, text: String) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onSelectionChange: ((start: SerializableNode, end: SerializableNode) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onEvent: ((node: Node, event: String) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var colorPicker: Boolean? get() = definedExternally; set(value) = definedExternally
+    var onColorPicker: ((parent: HTMLElement, color: String, onChange: (color: Color) -> Unit) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var timestampTag: Boolean? get() = definedExternally; set(value) = definedExternally
+    var language: String? get() = definedExternally; set(value) = definedExternally
+    //var languages: Languages? get() = definedExternally; set(value) = definedExternally
+    var modalAnchor: HTMLElement? get() = definedExternally; set(value) = definedExternally
+    var enableSort: Boolean? get() = definedExternally; set(value) = definedExternally
+    var enableTransform: Boolean? get() = definedExternally; set(value) = definedExternally
+    var maxVisibleChilds: Number? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface JsonPath {
+    var path: dynamic
+}
+
+external interface EditorSelection {
+    var start: SerializableNode
+    var end: SerializableNode
+}
+
+external interface TextSelection {
+    var start: SelectionPosition
+    var end: SelectionPosition
+    var text: String
+}
+
+@JsModule("jsoneditor")
+@JsNonModule
+external open class JSONEditor(
+    container: HTMLElement,
+    options: JSONEditorOptions? = definedExternally /* null */,
+    json: dynamic = definedExternally /* null */
+) {
+    open fun collapseAll()
+    open fun destroy()
+    open fun expandAll()
+    open fun focus()
+    open fun get(): Any
+    open fun getMode(): dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */
+    open fun getName(): String?
+    open fun getNodesByRange(start: JsonPath, end: JsonPath): Array<SerializableNode>
+    open fun getSelection(): EditorSelection
+    open fun getText(): String
+    open fun getTextSelection(): TextSelection
+    open fun refresh()
+    open fun set(json: Any)
+    open fun setMode(mode: String /* 'tree' */)
+    open fun setMode(mode: String /* 'view' */)
+    open fun setMode(mode: String /* 'form' */)
+    open fun setMode(mode: String /* 'code' */)
+    open fun setMode(mode: String /* 'text' */)
+    open fun setName(name: String? = definedExternally /* null */)
+    open fun setSchema(schema: Any?, schemaRefs: Any? = definedExternally /* null */)
+    open fun setSelection(start: JsonPath, end: JsonPath)
+    open fun setText(jsonString: String)
+    open fun setTextSelection(start: SelectionPosition, end: SelectionPosition)
+    open fun update(json: Any)
+    open fun updateText(jsonString: String)
+
+    companion object {
+        var VALID_OPTIONS: Array<String>
+//        var ace: AceAjax.Ace
+//        var Ajv: Ajv
+        var VanillaPicker: Any
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/propertyEditor.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/propertyEditor.kt
similarity index 59%
rename from dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/propertyEditor.kt
rename to dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/propertyEditor.kt
index db40d616..e2cdfcaa 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/propertyEditor.kt
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/propertyEditor.kt
@@ -1,17 +1,12 @@
-package hep.dataforge.vis.spatial.editor
+package hep.dataforge.vis.js.editor
 
 import hep.dataforge.io.toJson
 import hep.dataforge.js.jsObject
 import hep.dataforge.meta.DynamicMeta
 import hep.dataforge.meta.Meta
-import hep.dataforge.meta.builder
 import hep.dataforge.meta.update
 import hep.dataforge.vis.common.VisualObject
 import hep.dataforge.vis.common.findStyle
-import hep.dataforge.vis.spatial.*
-import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_COLOR_KEY
-import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_OPACITY_KEY
-import hep.dataforge.vis.spatial.VisualObject3D.Companion.VISIBLE_KEY
 import kotlinx.html.dom.append
 import kotlinx.html.js.div
 import kotlinx.html.js.h4
@@ -21,21 +16,13 @@ import kotlin.dom.clear
 //FIXME something rotten in JS-Meta converter
 fun Meta.toDynamic() = JSON.parse<dynamic>(toJson().toString())
 
-
-fun Element.propertyEditor(item: VisualObject?) {
+//TODO add node descriptor instead of configuring property selector
+fun Element.propertyEditor(item: VisualObject?, propertySelector: (VisualObject) -> Meta = { it.config }) {
     clear()
     if (item != null) {
         append {
             card("Properties") {
-                val config: Meta = item.prototype.config
-                val metaToEdit = config.builder().apply {
-                    VISIBLE_KEY to (item.visible ?: true)
-                    if (item is VisualObject3D) {
-                        MATERIAL_COLOR_KEY to (item.color ?: "#ffffff")
-                        MATERIAL_OPACITY_KEY to (item.opacity ?: 1.0)
-                    }
-                }
-                val dMeta: dynamic = metaToEdit.toDynamic()
+                val dMeta: dynamic = propertySelector(item).toDynamic()
                 val options: JSONEditorOptions = jsObject {
                     mode = "form"
                     onChangeJSON = { item.config.update(DynamicMeta(it.asDynamic())) }
@@ -48,13 +35,17 @@ fun Element.propertyEditor(item: VisualObject?) {
                 card("Styles") {
                     item.styles.forEach { style ->
                         val styleMeta = item.findStyle(style)
-                        h4("container") { +style.toString() }
+                        h4("container") { +style }
                         if (styleMeta != null) {
                             div("container").apply {
                                 val options: JSONEditorOptions = jsObject {
                                     mode = "view"
                                 }
-                                JSONEditor(this, options, styleMeta.toDynamic())
+                                JSONEditor(
+                                    this,
+                                    options,
+                                    styleMeta.toDynamic()
+                                )
                             }
                         }
                     }
@@ -62,4 +53,4 @@ fun Element.propertyEditor(item: VisualObject?) {
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ColorValueChooser.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ColorValueChooser.kt
similarity index 91%
rename from dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ColorValueChooser.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ColorValueChooser.kt
index e63ee25b..0dac4f8d 100644
--- a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ColorValueChooser.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ColorValueChooser.kt
@@ -1,4 +1,4 @@
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.meta.Meta
 import hep.dataforge.names.Name
@@ -44,6 +44,7 @@ class ColorValueChooser : ValueChooserBase<ColorPicker>() {
     companion object : ValueChooser.Factory {
         override val name: Name = "color".asName()
 
-        override fun invoke(meta: Meta): ValueChooser = ColorValueChooser()
+        override fun invoke(meta: Meta): ValueChooser =
+            ColorValueChooser()
     }
 }
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ComboBoxValueChooser.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ComboBoxValueChooser.kt
similarity index 92%
rename from dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ComboBoxValueChooser.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ComboBoxValueChooser.kt
index f2a830d6..a3643099 100644
--- a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ComboBoxValueChooser.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ComboBoxValueChooser.kt
@@ -3,7 +3,7 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.meta.Meta
 import hep.dataforge.meta.get
@@ -54,7 +54,8 @@ class ComboBoxValueChooser(val values: Collection<Value>? = null) : ValueChooser
     companion object : ValueChooser.Factory {
         override val name: Name = "combo".asName()
 
-        override fun invoke(meta: Meta): ValueChooser = ComboBoxValueChooser(meta["values"].value?.list)
+        override fun invoke(meta: Meta): ValueChooser =
+            ComboBoxValueChooser(meta["values"].value?.list)
     }
 
 }
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/meta/ConfigEditor.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ConfigEditor.kt
similarity index 97%
rename from dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/meta/ConfigEditor.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ConfigEditor.kt
index da961fdb..01c9973d 100644
--- a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/meta/ConfigEditor.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ConfigEditor.kt
@@ -3,14 +3,13 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.meta
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.context.Global
 import hep.dataforge.descriptors.NodeDescriptor
 import hep.dataforge.meta.Config
 import hep.dataforge.names.NameToken
 import hep.dataforge.vis.fx.dfIconView
-import hep.dataforge.vis.fx.values.ValueChooser
 import javafx.scene.control.*
 import javafx.scene.control.cell.TextFieldTreeTableCell
 import javafx.scene.layout.Priority
@@ -29,8 +28,9 @@ class ConfigEditor(
     val allowNew: Boolean = true,
     title: String = "Configuration editor"
 ) : Fragment(title = title, icon = dfIconView) {
+    //TODO replace parameters by properties
 
-    constructor(config: Config, descriptor: NodeDescriptor, title: String = "Configuration editor") :
+    constructor(config: Config, descriptor: NodeDescriptor?, title: String = "Configuration editor") :
             this(FXMeta.root(config, descriptor = descriptor), title = title)
 
     override val root = borderpane {
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/meta/FXMeta.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/FXMeta.kt
similarity index 99%
rename from dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/meta/FXMeta.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/FXMeta.kt
index 9a1929c8..2eb14215 100644
--- a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/meta/FXMeta.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/FXMeta.kt
@@ -1,4 +1,4 @@
-package hep.dataforge.vis.fx.meta
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.descriptors.ItemDescriptor
 import hep.dataforge.descriptors.NodeDescriptor
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/meta/MetaViewer.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/MetaViewer.kt
similarity index 98%
rename from dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/meta/MetaViewer.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/MetaViewer.kt
index 99026620..1120ebf4 100644
--- a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/meta/MetaViewer.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/MetaViewer.kt
@@ -14,7 +14,7 @@
  *  limitations under the License.
  */
 
-package hep.dataforge.vis.fx.meta
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.meta.Meta
 import hep.dataforge.vis.fx.dfIconView
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/TextValueChooser.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/TextValueChooser.kt
similarity index 96%
rename from dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/TextValueChooser.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/TextValueChooser.kt
index f1726fbf..92e59acf 100644
--- a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/TextValueChooser.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/TextValueChooser.kt
@@ -3,7 +3,7 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.meta.Meta
 import hep.dataforge.names.Name
@@ -103,6 +103,7 @@ class TextValueChooser : ValueChooserBase<TextField>() {
 
     companion object : ValueChooser.Factory {
         override val name: Name = "text".asName()
-        override fun invoke(meta: Meta): ValueChooser = TextValueChooser()
+        override fun invoke(meta: Meta): ValueChooser =
+            TextValueChooser()
     }
 }
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ValueCallback.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueCallback.kt
similarity index 94%
rename from dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ValueCallback.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueCallback.kt
index c327ab22..bf7cdb7b 100644
--- a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ValueCallback.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueCallback.kt
@@ -3,7 +3,7 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.values.Value
 
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ValueChooser.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooser.kt
similarity index 89%
rename from dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ValueChooser.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooser.kt
index 6624e653..f8946a4a 100644
--- a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ValueChooser.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooser.kt
@@ -3,7 +3,7 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.context.Context
 import hep.dataforge.context.Named
@@ -87,7 +87,10 @@ interface ValueChooser {
                 val widgetType = descriptor.widgetType
                 val chooser: ValueChooser = when {
                     widgetType != null -> {
-                        findWidgetByType(context, widgetType)?.invoke(
+                        findWidgetByType(
+                            context,
+                            widgetType
+                        )?.invoke(
                             descriptor.widget
                         ) ?: TextValueChooser()
                     }
@@ -105,7 +108,8 @@ interface ValueChooser {
             descriptor: ValueDescriptor? = null,
             setter: (Value) -> Unit
         ): ValueChooser {
-            val chooser = build(context, descriptor)
+            val chooser =
+                build(context, descriptor)
             chooser.setDisplayValue(value.value ?: Null)
             value.onChange {
                 chooser.setDisplayValue(it ?: Null)
@@ -115,7 +119,11 @@ interface ValueChooser {
                     setter(result)
                     ValueCallbackResponse(true, result, "OK")
                 } else {
-                    ValueCallbackResponse(false, value.value ?: Null, "Not allowed")
+                    ValueCallbackResponse(
+                        false,
+                        value.value ?: Null,
+                        "Not allowed"
+                    )
                 }
             }
             return chooser
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ValueChooserBase.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooserBase.kt
similarity index 98%
rename from dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ValueChooserBase.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooserBase.kt
index a9e2fc01..7cbbcc1f 100644
--- a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/values/ValueChooserBase.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooserBase.kt
@@ -3,7 +3,7 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.descriptors.ValueDescriptor
 import hep.dataforge.values.Null
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectEditorFragment.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectEditorFragment.kt
new file mode 100644
index 00000000..d1af9a93
--- /dev/null
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectEditorFragment.kt
@@ -0,0 +1,59 @@
+package hep.dataforge.vis.fx.editor
+
+import hep.dataforge.descriptors.NodeDescriptor
+import hep.dataforge.meta.Config
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.common.findStyle
+import javafx.beans.binding.Binding
+import javafx.beans.property.SimpleObjectProperty
+import javafx.scene.Node
+import javafx.scene.Parent
+import javafx.scene.layout.VBox
+import tornadofx.*
+
+class VisualObjectEditorFragment(val selector: (VisualObject) -> Config) : Fragment() {
+
+    val itemProperty = SimpleObjectProperty<VisualObject>()
+    var item: VisualObject? by itemProperty
+    val descriptorProperty = SimpleObjectProperty<NodeDescriptor>()
+
+    constructor(
+        item: VisualObject?,
+        descriptor: NodeDescriptor?,
+        selector: (VisualObject) -> Config = { it.config }
+    ) : this(selector) {
+        this.item = item
+        this.descriptorProperty.set(descriptor)
+    }
+
+    private val configProperty: Binding<Config?> = itemProperty.objectBinding {
+        it?.let { selector(it) }
+    }
+
+    private val configEditorProperty: Binding<Node?> = configProperty.objectBinding(descriptorProperty) {
+        it?.let {
+            ConfigEditor(it, descriptorProperty.get()).root
+        }
+    }
+
+    private val styleBoxProperty: Binding<Node?> = configProperty.objectBinding() {
+        VBox().apply {
+            item?.styles?.forEach { styleName ->
+                val styleMeta = item?.findStyle(styleName)
+                if (styleMeta != null) {
+                    titledpane(styleName, node = MetaViewer(styleMeta).root)
+                }
+            }
+        }
+    }
+
+    override val root: Parent = vbox {
+        titledpane("Properties", collapsible = false) {
+            contentProperty().bind(configEditorProperty)
+        }
+        titledpane("Styles", collapsible = false) {
+            visibleWhen(itemProperty.booleanBinding { it?.styles?.isNotEmpty() ?: false })
+            contentProperty().bind(styleBoxProperty)
+        }
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectTreeFragment.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectTreeFragment.kt
new file mode 100644
index 00000000..5f18f1ef
--- /dev/null
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectTreeFragment.kt
@@ -0,0 +1,33 @@
+package hep.dataforge.vis.fx.editor
+
+import hep.dataforge.vis.common.VisualGroup
+import hep.dataforge.vis.common.VisualObject
+import javafx.beans.property.SimpleObjectProperty
+import javafx.scene.control.SelectionMode
+import javafx.scene.control.TreeItem
+import tornadofx.*
+
+class VisualObjectTreeFragment : Fragment() {
+    val itemProperty = SimpleObjectProperty<VisualObject>()
+    var item: VisualObject? by itemProperty
+
+    val selectedProperty = SimpleObjectProperty<VisualObject>()
+
+    override val root = borderpane{
+        center = titledpane("Object tree") {
+            treeview<VisualObject> {
+                itemProperty.onChange { rootObject ->
+                    if (rootObject != null) {
+                        root = TreeItem(rootObject)
+                        populate { item ->
+                            (item.value as? VisualGroup)?.children?.values?.toList()
+                        }
+                    }
+                }
+                selectionModel.selectionMode = SelectionMode.SINGLE
+                val selectedValue = selectionModel.selectedItemProperty().objectBinding{it?.value}
+                selectedProperty.bind(selectedValue)
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt b/dataforge-vis-common/src/jvmTest/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt
similarity index 90%
rename from dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt
rename to dataforge-vis-common/src/jvmTest/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt
index 4b12a3ff..b24fa441 100644
--- a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt
+++ b/dataforge-vis-common/src/jvmTest/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt
@@ -4,9 +4,9 @@ import hep.dataforge.descriptors.NodeDescriptor
 import hep.dataforge.meta.buildMeta
 import hep.dataforge.meta.toConfig
 import hep.dataforge.values.ValueType
-import hep.dataforge.vis.fx.meta.ConfigEditor
-import hep.dataforge.vis.fx.meta.FXMeta
-import hep.dataforge.vis.fx.meta.MetaViewer
+import hep.dataforge.vis.fx.editor.ConfigEditor
+import hep.dataforge.vis.fx.editor.FXMeta
+import hep.dataforge.vis.fx.editor.MetaViewer
 import javafx.geometry.Orientation
 import tornadofx.*
 
diff --git a/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/GDMLTransformer.kt b/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/GDMLTransformer.kt
index bb60b8b6..c90760e0 100644
--- a/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/GDMLTransformer.kt
+++ b/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/GDMLTransformer.kt
@@ -16,7 +16,7 @@ import scientifik.gdml.*
 import kotlin.random.Random
 
 class GDMLTransformer(val root: GDML) {
-    private val materialCache = HashMap<GDMLMaterial, Meta>()
+    //private val materialCache = HashMap<GDMLMaterial, Meta>()
     private val random = Random(222)
 
     enum class Action {
@@ -39,7 +39,7 @@ class GDMLTransformer(val root: GDML) {
 
     var solidConfiguration: VisualObject3D.(parent: GDMLVolume, solid: GDMLSolid) -> Unit = { _, _ -> }
 
-    fun VisualObject.useStyle(name: String, builder: MetaBuilder.() -> Unit) {
+    fun VisualObject3D.useStyle(name: String, builder: MetaBuilder.() -> Unit) {
         styleCache.getOrPut(name.toName()) {
             buildMeta(builder)
         }
@@ -69,7 +69,7 @@ class GDMLTransformer(val root: GDML) {
         final.prototypes = proto
         styleCache.forEach {
             final.styleSheet {
-                this[it.key.toString()] = it.value
+                define(it.key.toString(), it.value)
             }
         }
         final.rotationOrder = RotationOrder.ZXY
@@ -77,4 +77,4 @@ class GDMLTransformer(val root: GDML) {
         return final
     }
 
-}
+}
\ No newline at end of file
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 6c9f9baf..ff38c2ae 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
@@ -256,6 +256,6 @@ fun GDML.toVisual(block: GDMLTransformer.() -> Unit = {}): VisualGroup3D {
  */
 fun VisualGroup3D.gdml(gdml: GDML, key: String = "", transformer: GDMLTransformer.() -> Unit = {}) {
     val visual = gdml.toVisual(transformer)
-    println(Visual3DPlugin.json.stringify(VisualGroup3D.serializer(), visual))
+    //println(Visual3DPlugin.json.stringify(VisualGroup3D.serializer(), visual))
     set(key, visual)
 }
\ No newline at end of file
diff --git a/dataforge-vis-spatial-gdml/src/jsMain/web/css/jsoneditor.min.css b/dataforge-vis-spatial-gdml/src/jsMain/web/css/jsoneditor.min.css
deleted file mode 100644
index e436fb54..00000000
--- a/dataforge-vis-spatial-gdml/src/jsMain/web/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/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDMLJvm.kt b/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDMLJvm.kt
index e6095e47..ae1904f5 100644
--- a/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDMLJvm.kt
+++ b/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDMLJvm.kt
@@ -6,8 +6,13 @@ import scientifik.gdml.GDML
 import java.nio.file.Files
 import java.nio.file.Path
 
-fun VisualGroup3D.gdml(file: Path, key: String = "", transformer: GDMLTransformer.() -> Unit = {}) {
+fun GDML.Companion.readFile(file: Path): GDML {
     val xmlReader = StAXReader(Files.newInputStream(file), "UTF-8")
-    val gdml = GDML.format.parse(GDML.serializer(), xmlReader)
+    return GDML.format.parse(GDML.serializer(), xmlReader)
+}
+
+fun VisualGroup3D.gdml(file: Path, key: String = "", transformer: GDMLTransformer.() -> Unit = {}) {
+    val gdml = GDML.readFile(file)
     gdml(gdml, key, transformer)
-}
\ No newline at end of file
+}
+
diff --git a/dataforge-vis-spatial/build.gradle.kts b/dataforge-vis-spatial/build.gradle.kts
index 92033405..896c4ee1 100644
--- a/dataforge-vis-spatial/build.gradle.kts
+++ b/dataforge-vis-spatial/build.gradle.kts
@@ -28,7 +28,7 @@ kotlin {
         }
         jsMain {
             dependencies {
-                api(project(":wrappers"))
+//                api(project(":wrappers"))
                 implementation(npm("three", "0.106.2"))
                 implementation(npm("@hi-level/three-csg", "1.0.6"))
             }
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/outputConfig.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/outputConfig.kt
similarity index 92%
rename from dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/outputConfig.kt
rename to dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/outputConfig.kt
index 308a61bd..273643a5 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/editor/outputConfig.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/outputConfig.kt
@@ -1,6 +1,6 @@
-package hep.dataforge.vis.spatial.editor
+package hep.dataforge.vis.spatial.three
 
-import hep.dataforge.vis.spatial.three.ThreeCanvas
+import hep.dataforge.vis.js.editor.card
 import kotlinx.html.InputType
 import kotlinx.html.dom.append
 import kotlinx.html.js.div
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXCanvas3D.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXCanvas3D.kt
index a8f38b73..184c31aa 100644
--- a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXCanvas3D.kt
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXCanvas3D.kt
@@ -10,6 +10,9 @@ import hep.dataforge.vis.spatial.World.CAMERA_INITIAL_DISTANCE
 import hep.dataforge.vis.spatial.World.CAMERA_INITIAL_X_ANGLE
 import hep.dataforge.vis.spatial.World.CAMERA_INITIAL_Y_ANGLE
 import hep.dataforge.vis.spatial.World.CAMERA_NEAR_CLIP
+import javafx.application.Platform
+import javafx.beans.property.ObjectProperty
+import javafx.beans.property.SimpleObjectProperty
 import javafx.event.EventHandler
 import javafx.scene.*
 import javafx.scene.input.KeyCode
@@ -80,9 +83,26 @@ class FXCanvas3D(val plugin: FX3DPlugin, meta: Meta = EmptyMeta) :
         center = canvas
     }
 
+    val rootObjectProperty: ObjectProperty<VisualObject3D> = SimpleObjectProperty()
+    var rootObject: VisualObject3D? by rootObjectProperty
+
+    private val rootNodeProperty = rootObjectProperty.objectBinding {
+        it?.let { plugin.buildNode(it) }
+    }
+
     init {
         canvas.widthProperty().bind(root.widthProperty())
         canvas.heightProperty().bind(root.heightProperty())
+        rootNodeProperty.addListener { _, oldValue: Node?, newValue: Node? ->
+            Platform.runLater {
+                if (oldValue != null) {
+                    world.children.remove(oldValue)
+                }
+                if (newValue != null) {
+                    world.children.add(newValue)
+                }
+            }
+        }
     }
 
 
@@ -167,8 +187,7 @@ class FXCanvas3D(val plugin: FX3DPlugin, meta: Meta = EmptyMeta) :
     }
 
     override fun render(obj: VisualObject3D, meta: Meta) {
-        val node = plugin.buildNode(obj) ?: kotlin.error("Can't render FX node for object $obj")
-        world.children.add(node)
+        rootObject = obj
     }
 
     companion object {
diff --git a/demo/build.gradle.kts b/demo/build.gradle.kts
new file mode 100644
index 00000000..e69de29b
diff --git a/demo/gdml/build.gradle.kts b/demo/gdml/build.gradle.kts
new file mode 100644
index 00000000..8ba1dcfc
--- /dev/null
+++ b/demo/gdml/build.gradle.kts
@@ -0,0 +1,39 @@
+import org.openjfx.gradle.JavaFXOptions
+
+plugins {
+    id("scientifik.mpp")
+    id("org.openjfx.javafxplugin")
+    id("application")
+}
+
+kotlin {
+
+    jvm {
+        withJava()
+    }
+
+    js {
+        browser {
+            webpackTask {
+                sourceMaps = false
+            }
+        }
+    }
+
+    sourceSets {
+        commonMain {
+            dependencies {
+                api(project(":dataforge-vis-spatial"))
+                api(project(":dataforge-vis-spatial-gdml"))
+            }
+        }
+    }
+}
+
+application {
+    mainClassName = "hep.dataforge.vis.spatial.gdml.demo.GDMLDemoAppKt"
+}
+
+configure<JavaFXOptions> {
+    modules("javafx.controls")
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial-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
similarity index 86%
rename from dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
rename to demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
index 1c270083..b2222909 100644
--- a/dataforge-vis-spatial-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
@@ -4,13 +4,15 @@ import hep.dataforge.context.Global
 import hep.dataforge.js.Application
 import hep.dataforge.js.objectTree
 import hep.dataforge.js.startApplication
+import hep.dataforge.meta.Meta
+import hep.dataforge.meta.builder
 import hep.dataforge.names.NameToken
+import hep.dataforge.vis.spatial.*
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_COLOR_KEY
 import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_OPACITY_KEY
-import hep.dataforge.vis.spatial.Visual3DPlugin
-import hep.dataforge.vis.spatial.VisualGroup3D
-import hep.dataforge.vis.spatial.VisualObject3D
-import hep.dataforge.vis.spatial.editor.propertyEditor
-import hep.dataforge.vis.spatial.editor.threeOutputConfig
+import hep.dataforge.vis.spatial.VisualObject3D.Companion.VISIBLE_KEY
+import hep.dataforge.vis.js.editor.propertyEditor
+import hep.dataforge.vis.spatial.three.threeOutputConfig
 import hep.dataforge.vis.spatial.gdml.GDMLTransformer
 import hep.dataforge.vis.spatial.gdml.LUnit
 import hep.dataforge.vis.spatial.gdml.toVisual
@@ -153,7 +155,18 @@ private class GDMLDemoApp : Application {
             output.camera.layers.set(0)
             configElement.threeOutputConfig(output)
             //tree.visualObjectTree(visual, editor::propertyEditor)
-            treeElement.objectTree(NameToken("World"), visual, editorElement::propertyEditor)
+            treeElement.objectTree(NameToken("World"), visual) {
+                editorElement.propertyEditor(it) {item->
+                    val config: Meta = item.prototype.config
+                    config.builder().apply {
+                        VISIBLE_KEY to (item.visible ?: true)
+                        if (item is VisualObject3D) {
+                            MATERIAL_COLOR_KEY to (item.color ?: "#ffffff")
+                            MATERIAL_OPACITY_KEY to (item.opacity ?: 1.0)
+                        }
+                    }
+                }
+            }
 
 
             output.render(visual)
diff --git a/demo/gdml/src/jsMain/web/css/jsoneditor.min.css b/demo/gdml/src/jsMain/web/css/jsoneditor.min.css
new file mode 100644
index 00000000..63190af9
--- /dev/null
+++ b/demo/gdml/src/jsMain/web/css/jsoneditor.min.css
@@ -0,0 +1,6 @@
+.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/dataforge-vis-spatial-gdml/src/jsMain/web/css/main.css b/demo/gdml/src/jsMain/web/css/main.css
similarity index 100%
rename from dataforge-vis-spatial-gdml/src/jsMain/web/css/main.css
rename to demo/gdml/src/jsMain/web/css/main.css
diff --git a/dataforge-vis-spatial-gdml/src/jsMain/web/css/img/jsoneditor-icons.svg b/demo/gdml/src/jsMain/web/img/jsoneditor-icons.svg
similarity index 100%
rename from dataforge-vis-spatial-gdml/src/jsMain/web/css/img/jsoneditor-icons.svg
rename to demo/gdml/src/jsMain/web/img/jsoneditor-icons.svg
diff --git a/dataforge-vis-spatial-gdml/src/jsMain/web/index.html b/demo/gdml/src/jsMain/web/index.html
similarity index 100%
rename from dataforge-vis-spatial-gdml/src/jsMain/web/index.html
rename to demo/gdml/src/jsMain/web/index.html
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
new file mode 100644
index 00000000..7613536f
--- /dev/null
+++ b/demo/gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
@@ -0,0 +1,78 @@
+package hep.dataforge.vis.spatial.gdml.demo
+
+import hep.dataforge.context.Global
+import hep.dataforge.vis.fx.editor.VisualObjectEditorFragment
+import hep.dataforge.vis.fx.editor.VisualObjectTreeFragment
+import hep.dataforge.vis.spatial.Material3D
+import hep.dataforge.vis.spatial.fx.FX3DPlugin
+import hep.dataforge.vis.spatial.fx.FXCanvas3D
+import hep.dataforge.vis.spatial.gdml.LUnit
+import hep.dataforge.vis.spatial.gdml.readFile
+import hep.dataforge.vis.spatial.gdml.toVisual
+import hep.dataforge.vis.spatial.prototype
+import javafx.geometry.Orientation
+import javafx.scene.Parent
+import javafx.stage.FileChooser
+import scientifik.gdml.GDML
+import tornadofx.*
+
+class GDMLDemoApp : App(GDMLView::class)
+
+class GDMLView : View() {
+    private val fx3d = Global.plugins.fetch(FX3DPlugin)
+    private val canvas = FXCanvas3D(fx3d)
+
+    private val treeFragment = VisualObjectTreeFragment().apply {
+        this.itemProperty.bind(canvas.rootObjectProperty)
+    }
+
+    private val propertyEditor = VisualObjectEditorFragment { it.prototype.config }.apply {
+        //TODO add descriptor here
+        itemProperty.bind(treeFragment.selectedProperty)
+    }
+
+
+    override val root: Parent = borderpane {
+        top {
+            buttonbar {
+                button("Load GDML") {
+                    action {
+                        val file = chooseFile("Select a GDML file", filters = gdmlFilter).firstOrNull()
+                        if (file != null) {
+                            val obj = GDML.readFile(file.toPath()).toVisual {
+                                lUnit = LUnit.CM
+
+                                solidConfiguration = { parent, solid ->
+                                    if(solid.name == "cave"){
+                                        setProperty(Material3D.MATERIAL_WIREFRAME_KEY, true)
+                                    }
+                                    if (parent.physVolumes.isNotEmpty()) {
+                                        useStyle("opaque") {
+                                            Material3D.MATERIAL_OPACITY_KEY put 0.3
+                                        }
+                                    }
+                                }
+                            }
+                            canvas.render(obj)
+                        }
+                    }
+                }
+            }
+        }
+        center {
+            splitpane(Orientation.HORIZONTAL, treeFragment.root, canvas.root, propertyEditor.root) {
+                setDividerPositions(0.2, 0.6, 0.2)
+            }
+        }
+    }
+
+    companion object {
+        private val gdmlFilter = arrayOf(
+            FileChooser.ExtensionFilter("GDML", "*.gdml", "*.xml")
+        )
+    }
+}
+
+fun main() {
+    launch<GDMLDemoApp>()
+}
\ No newline at end of file
diff --git a/spatial-demo/build.gradle.kts b/demo/spatial-showcase/build.gradle.kts
similarity index 100%
rename from spatial-demo/build.gradle.kts
rename to demo/spatial-showcase/build.gradle.kts
diff --git a/spatial-demo/src/commonMain/kotlin/hep/dataforge/vis/spatial/demo/demo.kt b/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vis/spatial/demo/demo.kt
similarity index 100%
rename from spatial-demo/src/commonMain/kotlin/hep/dataforge/vis/spatial/demo/demo.kt
rename to demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vis/spatial/demo/demo.kt
diff --git a/spatial-demo/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt
similarity index 93%
rename from spatial-demo/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt
rename to demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt
index e55a3ccb..7d5c152c 100644
--- a/spatial-demo/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt
+++ b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt
@@ -1,12 +1,9 @@
 package hep.dataforge.vis.spatial.demo
 
-import hep.dataforge.context.ContextBuilder
-import hep.dataforge.context.Global
 import hep.dataforge.js.Application
 import hep.dataforge.js.startApplication
 import hep.dataforge.vis.spatial.three.MeshThreeFactory.Companion.EDGES_ENABLED_KEY
 import hep.dataforge.vis.spatial.three.MeshThreeFactory.Companion.WIREFRAME_ENABLED_KEY
-import hep.dataforge.vis.spatial.three.ThreePlugin
 import hep.dataforge.vis.spatial.x
 import hep.dataforge.vis.spatial.y
 import kotlinx.coroutines.GlobalScope
diff --git a/spatial-demo/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt
similarity index 100%
rename from spatial-demo/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt
rename to demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt
diff --git a/spatial-demo/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/VariableBox.kt b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/VariableBox.kt
similarity index 100%
rename from spatial-demo/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/VariableBox.kt
rename to demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/VariableBox.kt
diff --git a/spatial-demo/src/jsMain/web/index.html b/demo/spatial-showcase/src/jsMain/web/index.html
similarity index 100%
rename from spatial-demo/src/jsMain/web/index.html
rename to demo/spatial-showcase/src/jsMain/web/index.html
diff --git a/spatial-demo/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoApp.kt b/demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoApp.kt
similarity index 100%
rename from spatial-demo/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoApp.kt
rename to demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoApp.kt
diff --git a/spatial-demo/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoGrid.kt b/demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoGrid.kt
similarity index 92%
rename from spatial-demo/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoGrid.kt
rename to demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoGrid.kt
index 21d98b8e..800180e7 100644
--- a/spatial-demo/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoGrid.kt
+++ b/demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoGrid.kt
@@ -4,14 +4,11 @@ import hep.dataforge.context.Global
 import hep.dataforge.meta.Meta
 import hep.dataforge.meta.buildMeta
 import hep.dataforge.names.Name
-import hep.dataforge.names.toName
 import hep.dataforge.output.OutputManager
 import hep.dataforge.output.Renderer
 import hep.dataforge.vis.common.VisualObject
-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.render
 import javafx.collections.FXCollections
 import javafx.scene.Parent
 import javafx.scene.control.Tab
diff --git a/settings.gradle.kts b/settings.gradle.kts
index 9827167d..286667f1 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -27,10 +27,11 @@ rootProject.name = "dataforge-vis"
 
 include(
     ":dataforge-vis-common",
-    ":wrappers",
+//    ":wrappers",
     ":dataforge-vis-spatial",
     ":dataforge-vis-spatial-gdml",
-    ":spatial-demo"
+    ":demo:spatial-showcase",
+    ":demo:gdml"
 )
 
 //if(file("../dataforge-core").exists()) {