@fmsim/board 0.0.88 → 0.0.89

package/custom-elements.json

@@ -3116,31 +3116,62 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/component-toolbar/component-detail.ts",
+      "path": "src/modeller/property-sidebar/abstract-property.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ComponentDetail",
+          "name": "AbstractProperty",
           "members": [
             {
-              "kind": "field",
-              "name": "template",
-              "type": {
-                "text": "{ about: string } | null"
-              },
-              "default": "null",
-              "attribute": "template"
+              "kind": "method",
+              "name": "_onValueChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_getValueFromEventTarget",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onAfterValueChange",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "template",
+              "name": "property-change",
               "type": {
-                "text": "{ about: string } | null"
-              },
-              "default": "null",
-              "fieldName": "template"
+                "text": "CustomEvent"
+              }
             }
           ],
           "superclass": {
@@ -3153,71 +3184,131 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ComponentDetail",
+          "name": "AbstractProperty",
           "declaration": {
-            "name": "ComponentDetail",
-            "module": "src/modeller/component-toolbar/component-detail.ts"
+            "name": "AbstractProperty",
+            "module": "src/modeller/property-sidebar/abstract-property.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/component-toolbar/component-menu.ts",
+      "path": "src/modeller/property-sidebar/property-shared-style.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PropertySharedStyle",
+          "default": "css`\n  fieldset {\n    border: none;\n    margin: 4px;\n    padding: 9px 4px 9px 4px;\n    border-bottom: var(--property-sidebar-fieldset-border);\n    color: var(--property-sidebar-fieldset-legend-color);\n    font: var(--property-sidebar-fieldset-label);\n  }\n\n  fieldset legend {\n    padding: 5px 0 0 5px;\n    color: var(--property-sidebar-fieldset-legend-color);\n    font: var(--property-sidebar-fieldset-legend);\n    text-transform: capitalize;\n  }\n\n  select,\n  input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  ox-input-data {\n    height: 300px;\n  }\n\n  /* property grid */\n  .property-grid {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .property-grid > * {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .property-grid > label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    line-height: 2;\n  }\n\n  .property-grid > input,\n  .property-grid > table,\n  .property-grid > select,\n  .property-grid > ox-input-angle,\n  .property-grid > ox-buttons-radio,\n  .property-grid > ox-input-color,\n  [custom-editor] {\n    grid-column: span 7;\n    align-self: stretch;\n  }\n\n  .property-grid > .checkbox-row {\n    grid-column: span 10;\n  }\n\n  .property-grid > .property-full-label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n  }\n\n  .property-grid > .property-half-label {\n    grid-column: span 1;\n  }\n\n  .property-grid > .property-full-input {\n    grid-column: span 7;\n  }\n\n  .property-grid > .property-half-input {\n    grid-column: span 4;\n  }\n\n  /* checkbox-row */\n  .checkbox-row {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .checkbox-row > input {\n    grid-column: 4 / 5;\n  }\n\n  .checkbox-row > label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  /* image resources */\n  .icon-only-label {\n    grid-column: span 1;\n\n    background: var(--url-icon-properties-label) no-repeat;\n    float: left;\n    margin: 0;\n    align-self: stretch;\n  }\n\n  .icon-only-label.color {\n    background-position: 100% -500px;\n  }\n  .icon-only-label.font-size {\n    background-position: 100% -594px;\n  }\n  .icon-only-label.leading {\n    background-position: 100% -696px;\n  }\n  .icon-only-label.hscale {\n    background-position: 100% -296px;\n  }\n  .icon-only-label.vscale {\n    background-position: 100% -396px;\n  }\n  .icon-only-label.linewidth {\n    background-position: 100% -894px;\n  }\n  .icon-only-label.lineHeight {\n    background-position: 100% -995px;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PropertySharedStyle",
+          "declaration": {
+            "name": "PropertySharedStyle",
+            "module": "src/modeller/property-sidebar/property-shared-style.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/property-sidebar.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ComponentMenu",
+          "name": "PropertySidebar",
           "members": [
             {
               "kind": "field",
-              "name": "groups",
+              "name": "scene",
               "type": {
-                "text": "Pallet[]"
+                "text": "Scene | null"
+              },
+              "default": "null",
+              "attribute": "scene"
+            },
+            {
+              "kind": "field",
+              "name": "bounds",
+              "type": {
+                "text": "any"
+              },
+              "default": "{}",
+              "attribute": "bounds"
+            },
+            {
+              "kind": "field",
+              "name": "model",
+              "type": {
+                "text": "Model | null"
+              },
+              "default": "{}",
+              "attribute": "model"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "Component[]"
               },
               "default": "[]",
-              "attribute": "groups"
+              "attribute": "selected"
             },
             {
               "kind": "field",
-              "name": "scene",
+              "name": "specificProps",
               "type": {
-                "text": "Scene | null"
+                "text": "any"
               },
-              "default": "null",
-              "attribute": "scene"
+              "attribute": "specificProps"
             },
             {
               "kind": "field",
-              "name": "group",
+              "name": "tabName",
               "type": {
                 "text": "string | null"
               },
-              "default": "''",
-              "attribute": "group"
+              "default": "'specific'",
+              "attribute": "tabName"
             },
             {
               "kind": "field",
-              "name": "templates",
+              "name": "collapsed",
               "type": {
-                "text": "PalletItem[]"
+                "text": "boolean"
               },
-              "default": "[]"
+              "default": "false",
+              "attribute": "collapsed"
             },
             {
               "kind": "field",
-              "name": "template",
+              "name": "fonts",
               "type": {
-                "text": "PalletItem | any"
-              }
+                "text": "any[]"
+              },
+              "default": "[]",
+              "attribute": "fonts"
             },
             {
               "kind": "field",
-              "name": "detail",
+              "name": "propertyEditor",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "any[]"
+              },
+              "default": "[]",
+              "attribute": "propertyEditor"
+            },
+            {
+              "kind": "field",
+              "name": "propertyTarget",
+              "type": {
+                "text": "Component | null"
+              },
+              "default": "null"
             },
             {
               "kind": "field",
@@ -3227,62 +3318,90 @@
             },
             {
               "kind": "method",
-              "name": "findTemplate",
+              "name": "_onPropertyChanged",
               "parameters": [
                 {
-                  "name": "type",
+                  "name": "e",
                   "type": {
-                    "text": "string | null | undefined"
+                    "text": "CustomEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "onHoverComponent",
+              "name": "_onBoundsChanged",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "CustomEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "onClickTemplate",
+              "name": "_onChangedByScene"
+            },
+            {
+              "kind": "method",
+              "name": "_setPropertyTargetAsDefault"
+            },
+            {
+              "kind": "method",
+              "name": "_onCollapsed",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "collapsed",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "boolean"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "templateIcon",
+              "name": "_onSceneChanged"
+            },
+            {
+              "kind": "method",
+              "name": "_onSelectedChanged",
               "parameters": [
                 {
-                  "name": "template",
+                  "name": "after",
                   "type": {
-                    "text": "PalletItem"
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_setPropertyTarget",
+              "parameters": [
+                {
+                  "name": "newTarget",
+                  "type": {
+                    "text": "Component | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_setBounds",
+              "parameters": [
+                {
+                  "name": "bounds",
+                  "type": {
+                    "text": "BOUNDS"
                   }
                 }
               ]
             }
           ],
           "attributes": [
-            {
-              "name": "groups",
-              "type": {
-                "text": "Pallet[]"
-              },
-              "default": "[]",
-              "fieldName": "groups"
-            },
             {
               "name": "scene",
               "type": {
@@ -3292,119 +3411,197 @@
               "fieldName": "scene"
             },
             {
-              "name": "group",
+              "name": "bounds",
               "type": {
-                "text": "string | null"
+                "text": "any"
               },
-              "default": "''",
-              "fieldName": "group"
-            }
-          ],
-          "mixins": [
+              "default": "{}",
+              "fieldName": "bounds"
+            },
             {
-              "name": "ScopedElementsMixin",
-              "package": "@open-wc/scoped-elements"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
+              "name": "model",
+              "type": {
+                "text": "Model | null"
+              },
+              "default": "{}",
+              "fieldName": "model"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "Component[]"
+              },
+              "default": "[]",
+              "fieldName": "selected"
+            },
+            {
+              "name": "specificProps",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "specificProps"
+            },
+            {
+              "name": "tabName",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "'specific'",
+              "fieldName": "tabName"
+            },
+            {
+              "name": "collapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "collapsed"
+            },
+            {
+              "name": "fonts",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "fieldName": "fonts"
+            },
+            {
+              "name": "propertyEditor",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "fieldName": "propertyEditor"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ScopedElementsMixin",
+              "package": "@open-wc/scoped-elements"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ComponentMenu",
+          "name": "PropertySidebar",
           "declaration": {
-            "name": "ComponentMenu",
-            "module": "src/modeller/component-toolbar/component-menu.ts"
+            "name": "PropertySidebar",
+            "module": "src/modeller/property-sidebar/property-sidebar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/component-toolbar/component-toolbar.ts",
+      "path": "src/modeller/component-toolbar/component-detail.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ComponentToolbar",
+          "name": "ComponentDetail",
           "members": [
             {
               "kind": "field",
-              "name": "componentGroupList",
+              "name": "template",
               "type": {
-                "text": "ComponentGroup[]"
+                "text": "{ about: string } | null"
               },
-              "default": "[]",
-              "attribute": "componentGroupList"
-            },
+              "default": "null",
+              "attribute": "template"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "group",
+              "name": "template",
               "type": {
-                "text": "string | null | undefined"
+                "text": "{ about: string } | null"
               },
-              "attribute": "group"
-            },
+              "default": "null",
+              "fieldName": "template"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ComponentDetail",
+          "declaration": {
+            "name": "ComponentDetail",
+            "module": "src/modeller/component-toolbar/component-detail.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/component-toolbar/component-menu.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ComponentMenu",
+          "members": [
             {
               "kind": "field",
-              "name": "scene",
+              "name": "groups",
               "type": {
-                "text": "Scene"
+                "text": "Pallet[]"
               },
-              "attribute": "scene"
+              "default": "[]",
+              "attribute": "groups"
             },
             {
               "kind": "field",
-              "name": "mode",
+              "name": "scene",
               "type": {
-                "text": "SCENE_MODE"
+                "text": "Scene | null"
               },
-              "attribute": "mode"
-            },
-            {
-              "kind": "field",
-              "name": "shift",
-              "type": {
-                "text": "HTMLImageElement"
-              }
+              "default": "null",
+              "attribute": "scene"
             },
             {
               "kind": "field",
-              "name": "menu",
+              "name": "group",
               "type": {
-                "text": "HTMLElement"
+                "text": "string | null"
               },
-              "privacy": "private"
+              "default": "''",
+              "attribute": "group"
             },
             {
               "kind": "field",
-              "name": "componentsContainer",
+              "name": "templates",
               "type": {
-                "text": "HTMLElement"
+                "text": "PalletItem[]"
               },
-              "privacy": "private"
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "groups",
+              "name": "template",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
-              },
-              "privacy": "private"
+                "text": "PalletItem | any"
+              }
             },
             {
               "kind": "field",
-              "name": "icons",
+              "name": "detail",
               "type": {
-                "text": "{ [name: string]: string }"
-              },
-              "privacy": "private",
-              "default": "{}"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
@@ -3414,31 +3611,31 @@
             },
             {
               "kind": "method",
-              "name": "onWheelEvent",
+              "name": "findTemplate",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "type",
                   "type": {
-                    "text": "Event"
+                    "text": "string | null | undefined"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_setMode",
+              "name": "onHoverComponent",
               "parameters": [
                 {
-                  "name": "mode",
+                  "name": "e",
                   "type": {
-                    "text": "SCENE_MODE"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onClickShift",
+              "name": "onClickTemplate",
               "parameters": [
                 {
                   "name": "e",
@@ -3450,54 +3647,41 @@
             },
             {
               "kind": "method",
-              "name": "_onClickGroup",
+              "name": "templateIcon",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "template",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "PalletItem"
                   }
                 }
               ]
             }
           ],
-          "events": [
-            {
-              "name": "mode-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
           "attributes": [
             {
-              "name": "componentGroupList",
+              "name": "groups",
               "type": {
-                "text": "ComponentGroup[]"
+                "text": "Pallet[]"
               },
               "default": "[]",
-              "fieldName": "componentGroupList"
-            },
-            {
-              "name": "group",
-              "type": {
-                "text": "string | null | undefined"
-              },
-              "fieldName": "group"
+              "fieldName": "groups"
             },
             {
               "name": "scene",
               "type": {
-                "text": "Scene"
+                "text": "Scene | null"
               },
+              "default": "null",
               "fieldName": "scene"
             },
             {
-              "name": "mode",
+              "name": "group",
               "type": {
-                "text": "SCENE_MODE"
+                "text": "string | null"
               },
-              "fieldName": "mode"
+              "default": "''",
+              "fieldName": "group"
             }
           ],
           "mixins": [
@@ -3516,243 +3700,95 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ComponentToolbar",
+          "name": "ComponentMenu",
           "declaration": {
-            "name": "ComponentToolbar",
-            "module": "src/modeller/component-toolbar/component-toolbar.ts"
+            "name": "ComponentMenu",
+            "module": "src/modeller/component-toolbar/component-menu.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/component-toolbar/mode-icons.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ICON_EDIT_MODE",
-          "default": "`\n  <svg\n    version=\"1.1\"\n    id=\"Layer_1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 30 30\"\n    style=\"enable-background:new 0 0 30 30;\"\n    xml:space=\"preserve\"\n  >\n    <style type=\"text/css\">\n      .st0 {\n        fill: {{strokeColor}};\n      }\n      .st1 {\n        fill: none;\n        stroke: {{strokeColor}};\n        stroke-width: 0.75;\n        stroke-linejoin: round;\n        stroke-miterlimit: 10;\n      }\n    </style>\n    <g>\n      <polygon class=\"st0\" points=\"2.7,3.9 2.7,22.8 7.8,17.2 16.1,16.9 \t\" />\n      <path\n        class=\"st1\"\n        d=\"M27.7,20.1L26.1,19c-0.1,0-0.2,0-0.2,0c0,0.1,0,0.2,0,0.2l1.2,0.9h-4.9v-5l0.9,1.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2l-1.1-1.6c-0.1-0.1-0.2-0.1-0.2,0L20.8,16c0,0.1,0,0.2,0,0.2s0.2,0,0.2,0l0.9-1.2v5h-5\n      l1.2-0.9c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0l-1.6,1.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0.1,0.1l1.6,1.1c0,0,0.1,0,0.1,0\n      c0,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.2l-1.2-0.9h5v5L21,24.2c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l1.1,1.6c0,0,0.1,0.1,0.1,0.1\n      s0.1,0,0.1-0.1l1.1-1.6c0-0.1,0-0.2,0-0.2c-0.1,0-0.2,0-0.2,0l-0.9,1.2v-5h4.9l-1.2,0.9c-0.1,0-0.1,0.1,0,0.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0l1.6-1.1c0,0,0.1-0.1,0.1-0.1C27.7,20.2,27.7,20.1,27.7,20.1z\"\n      />\n    </g>\n  </svg>\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "ICON_SHIFT_MODE",
-          "default": "`\n  <svg\n    version=\"1.1\"\n    id=\"Layer_1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 30 30\"\n    style=\"enable-background:new 0 0 30 30;\"\n    xml:space=\"preserve\"\n  >\n    <style type=\"text/css\">\n      .st0 {\n        fill: {{strokeColor}};\n        stroke: {{strokeColor}};\n        fill-rule: evenodd;\n        clip-rule: evenodd;\n      }\n      .st1 {\n        fill: {{strokeColor}};\n        stroke: {{strokeColor}};\n        stroke-width: 0.75;\n        stroke-linejoin: round;\n        stroke-miterlimit: 10;\n      }\n    </style>\n    <g>\n      <path\n        class=\"st0\"\n        d=\"M7.8,23.2c1.6,0,3.8,0,5.7,0c0.8,0,1.3-0.3,1.6-1.2c0.4-2.9,1.5-4.9,2.4-6.9s1.4-2.5,1.6-3.4\n      c0.1-0.5,0.2-1.6-0.4-1.9c-0.6-0.3-1.2,0.1-1.9,1.3c-0.8,1.6-1,2-1.4,2c-0.3,0-0.1-4,0-5.4c0.1-1.3-0.6-1.8-1.3-1.8\n      c-0.8-0.1-1.5,0.4-1.5,1.5c0,1.5-0.2,5.2-0.7,5.2c-0.4,0-0.3-4.3-0.6-6.7c-0.1-1-0.6-1.8-1.5-1.8C9.1,4.2,8.4,4.7,8.3,5.8\n      c-0.1,1.3,1,6.7,0.5,6.7c-0.4,0-1.4-3.3-2.3-5.1C6,6.5,5.6,6,4.6,6.4C3.9,6.7,3.5,7.6,3.8,8.5c0.5,1.2,2.7,6.8,2.2,6.8\n      c-0.4,0-1.4-1.4-2.7-2.1c-1.1-0.6-1.8-0.4-2.1-0.1c-0.4,0.3-0.7,1,0.9,2.8c0.6,0.6,3.1,2.3,3.7,3.2c0.7,1.3,0.6,1,0.8,2.8\n      C6.7,22.7,7,23.2,7.8,23.2z\"\n      />\n      <path\n        class=\"st1\"\n        d=\"M28.7,20.1L27.1,19c-0.1,0-0.2,0-0.2,0c0,0.1,0,0.2,0,0.2l1.2,0.9h-4.9v-5l0.9,1.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2l-1.1-1.6c-0.1-0.1-0.2-0.1-0.2,0L21.8,16c0,0.1,0,0.2,0,0.2s0.2,0,0.2,0l0.9-1.2v5h-5\n      l1.2-0.9c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0l-1.6,1.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0.1,0.1l1.6,1.1c0,0,0.1,0,0.1,0\n      c0,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.2l-1.2-0.9h5v5L22,24.2c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l1.1,1.6c0,0,0.1,0.1,0.1,0.1\n      s0.1,0,0.1-0.1l1.1-1.6c0-0.1,0-0.2,0-0.2c-0.1,0-0.2,0-0.2,0l-0.9,1.2v-5h4.9l-1.2,0.9c-0.1,0-0.1,0.1,0,0.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0l1.6-1.1c0,0,0.1-0.1,0.1-0.1C28.7,20.2,28.7,20.1,28.7,20.1z\"\n      />\n    </g>\n  </svg>\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ICON_EDIT_MODE",
-          "declaration": {
-            "name": "ICON_EDIT_MODE",
-            "module": "src/modeller/component-toolbar/mode-icons.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ICON_SHIFT_MODE",
-          "declaration": {
-            "name": "ICON_SHIFT_MODE",
-            "module": "src/modeller/component-toolbar/mode-icons.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/abstract-property.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "AbstractProperty",
-          "members": [
-            {
-              "kind": "method",
-              "name": "_onValueChange",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_getValueFromEventTarget",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onAfterValueChange",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "name": "property-change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AbstractProperty",
-          "declaration": {
-            "name": "AbstractProperty",
-            "module": "src/modeller/property-sidebar/abstract-property.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/property-shared-style.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "PropertySharedStyle",
-          "default": "css`\n  fieldset {\n    border: none;\n    margin: 4px;\n    padding: 9px 4px 9px 4px;\n    border-bottom: var(--property-sidebar-fieldset-border);\n    color: var(--property-sidebar-fieldset-legend-color);\n    font: var(--property-sidebar-fieldset-label);\n  }\n\n  fieldset legend {\n    padding: 5px 0 0 5px;\n    color: var(--property-sidebar-fieldset-legend-color);\n    font: var(--property-sidebar-fieldset-legend);\n    text-transform: capitalize;\n  }\n\n  select,\n  input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  ox-input-data {\n    height: 300px;\n  }\n\n  /* property grid */\n  .property-grid {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .property-grid > * {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .property-grid > label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    line-height: 2;\n  }\n\n  .property-grid > input,\n  .property-grid > table,\n  .property-grid > select,\n  .property-grid > ox-input-angle,\n  .property-grid > ox-buttons-radio,\n  .property-grid > ox-input-color,\n  [custom-editor] {\n    grid-column: span 7;\n    align-self: stretch;\n  }\n\n  .property-grid > .checkbox-row {\n    grid-column: span 10;\n  }\n\n  .property-grid > .property-full-label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n  }\n\n  .property-grid > .property-half-label {\n    grid-column: span 1;\n  }\n\n  .property-grid > .property-full-input {\n    grid-column: span 7;\n  }\n\n  .property-grid > .property-half-input {\n    grid-column: span 4;\n  }\n\n  /* checkbox-row */\n  .checkbox-row {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .checkbox-row > input {\n    grid-column: 4 / 5;\n  }\n\n  .checkbox-row > label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  /* image resources */\n  .icon-only-label {\n    grid-column: span 1;\n\n    background: var(--url-icon-properties-label) no-repeat;\n    float: left;\n    margin: 0;\n    align-self: stretch;\n  }\n\n  .icon-only-label.color {\n    background-position: 100% -500px;\n  }\n  .icon-only-label.font-size {\n    background-position: 100% -594px;\n  }\n  .icon-only-label.leading {\n    background-position: 100% -696px;\n  }\n  .icon-only-label.hscale {\n    background-position: 100% -296px;\n  }\n  .icon-only-label.vscale {\n    background-position: 100% -396px;\n  }\n  .icon-only-label.linewidth {\n    background-position: 100% -894px;\n  }\n  .icon-only-label.lineHeight {\n    background-position: 100% -995px;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PropertySharedStyle",
-          "declaration": {
-            "name": "PropertySharedStyle",
-            "module": "src/modeller/property-sidebar/property-shared-style.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/property-sidebar.ts",
+      "path": "src/modeller/component-toolbar/component-toolbar.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertySidebar",
+          "name": "ComponentToolbar",
           "members": [
             {
               "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | null"
-              },
-              "default": "null",
-              "attribute": "scene"
-            },
-            {
-              "kind": "field",
-              "name": "bounds",
+              "name": "componentGroupList",
               "type": {
-                "text": "any"
+                "text": "ComponentGroup[]"
               },
-              "default": "{}",
-              "attribute": "bounds"
+              "default": "[]",
+              "attribute": "componentGroupList"
             },
             {
               "kind": "field",
-              "name": "model",
+              "name": "group",
               "type": {
-                "text": "Model | null"
+                "text": "string | null | undefined"
               },
-              "default": "{}",
-              "attribute": "model"
+              "attribute": "group"
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "scene",
               "type": {
-                "text": "Component[]"
+                "text": "Scene"
               },
-              "default": "[]",
-              "attribute": "selected"
+              "attribute": "scene"
             },
             {
               "kind": "field",
-              "name": "specificProps",
+              "name": "mode",
               "type": {
-                "text": "any"
+                "text": "SCENE_MODE"
               },
-              "attribute": "specificProps"
+              "attribute": "mode"
             },
             {
               "kind": "field",
-              "name": "tabName",
+              "name": "shift",
               "type": {
-                "text": "string | null"
-              },
-              "default": "'specific'",
-              "attribute": "tabName"
+                "text": "HTMLImageElement"
+              }
             },
             {
               "kind": "field",
-              "name": "collapsed",
+              "name": "menu",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement"
               },
-              "default": "false",
-              "attribute": "collapsed"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "fonts",
+              "name": "componentsContainer",
               "type": {
-                "text": "any[]"
+                "text": "HTMLElement"
               },
-              "default": "[]",
-              "attribute": "fonts"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "propertyEditor",
+              "name": "groups",
               "type": {
-                "text": "any[]"
+                "text": "NodeListOf<HTMLElement>"
               },
-              "default": "[]",
-              "attribute": "propertyEditor"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "propertyTarget",
+              "name": "icons",
               "type": {
-                "text": "Component | null"
+                "text": "{ [name: string]: string }"
               },
-              "default": "null"
+              "privacy": "private",
+              "default": "{}"
             },
             {
               "kind": "field",
@@ -3762,160 +3798,90 @@
             },
             {
               "kind": "method",
-              "name": "_onPropertyChanged",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onBoundsChanged",
+              "name": "onWheelEvent",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onChangedByScene"
-            },
-            {
-              "kind": "method",
-              "name": "_setPropertyTargetAsDefault"
-            },
-            {
-              "kind": "method",
-              "name": "_onCollapsed",
+              "name": "_setMode",
               "parameters": [
                 {
-                  "name": "collapsed",
+                  "name": "mode",
                   "type": {
-                    "text": "boolean"
+                    "text": "SCENE_MODE"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onSceneChanged"
-            },
-            {
-              "kind": "method",
-              "name": "_onSelectedChanged",
+              "name": "_onClickShift",
               "parameters": [
                 {
-                  "name": "after",
+                  "name": "e",
                   "type": {
-                    "text": "Component[]"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_setPropertyTarget",
+              "name": "_onClickGroup",
               "parameters": [
                 {
-                  "name": "newTarget",
+                  "name": "e",
                   "type": {
-                    "text": "Component | null"
+                    "text": "MouseEvent"
                   }
                 }
               ]
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "_setBounds",
-              "parameters": [
-                {
-                  "name": "bounds",
-                  "type": {
-                    "text": "BOUNDS"
-                  }
-                }
-              ]
+              "name": "mode-changed",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "scene",
+              "name": "componentGroupList",
               "type": {
-                "text": "Scene | null"
-              },
-              "default": "null",
-              "fieldName": "scene"
-            },
-            {
-              "name": "bounds",
-              "type": {
-                "text": "any"
-              },
-              "default": "{}",
-              "fieldName": "bounds"
-            },
-            {
-              "name": "model",
-              "type": {
-                "text": "Model | null"
-              },
-              "default": "{}",
-              "fieldName": "model"
-            },
-            {
-              "name": "selected",
-              "type": {
-                "text": "Component[]"
+                "text": "ComponentGroup[]"
               },
               "default": "[]",
-              "fieldName": "selected"
-            },
-            {
-              "name": "specificProps",
-              "type": {
-                "text": "any"
-              },
-              "fieldName": "specificProps"
-            },
-            {
-              "name": "tabName",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "'specific'",
-              "fieldName": "tabName"
+              "fieldName": "componentGroupList"
             },
             {
-              "name": "collapsed",
+              "name": "group",
               "type": {
-                "text": "boolean"
+                "text": "string | null | undefined"
               },
-              "default": "false",
-              "fieldName": "collapsed"
+              "fieldName": "group"
             },
             {
-              "name": "fonts",
+              "name": "scene",
               "type": {
-                "text": "any[]"
+                "text": "Scene"
               },
-              "default": "[]",
-              "fieldName": "fonts"
+              "fieldName": "scene"
             },
             {
-              "name": "propertyEditor",
+              "name": "mode",
               "type": {
-                "text": "any[]"
+                "text": "SCENE_MODE"
               },
-              "default": "[]",
-              "fieldName": "propertyEditor"
+              "fieldName": "mode"
             }
           ],
           "mixins": [
@@ -3934,10 +3900,44 @@
       "exports": [
         {
           "kind": "js",
-          "name": "PropertySidebar",
+          "name": "ComponentToolbar",
           "declaration": {
-            "name": "PropertySidebar",
-            "module": "src/modeller/property-sidebar/property-sidebar.ts"
+            "name": "ComponentToolbar",
+            "module": "src/modeller/component-toolbar/component-toolbar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/component-toolbar/mode-icons.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ICON_EDIT_MODE",
+          "default": "`\n  <svg\n    version=\"1.1\"\n    id=\"Layer_1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 30 30\"\n    style=\"enable-background:new 0 0 30 30;\"\n    xml:space=\"preserve\"\n  >\n    <style type=\"text/css\">\n      .st0 {\n        fill: {{strokeColor}};\n      }\n      .st1 {\n        fill: none;\n        stroke: {{strokeColor}};\n        stroke-width: 0.75;\n        stroke-linejoin: round;\n        stroke-miterlimit: 10;\n      }\n    </style>\n    <g>\n      <polygon class=\"st0\" points=\"2.7,3.9 2.7,22.8 7.8,17.2 16.1,16.9 \t\" />\n      <path\n        class=\"st1\"\n        d=\"M27.7,20.1L26.1,19c-0.1,0-0.2,0-0.2,0c0,0.1,0,0.2,0,0.2l1.2,0.9h-4.9v-5l0.9,1.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2l-1.1-1.6c-0.1-0.1-0.2-0.1-0.2,0L20.8,16c0,0.1,0,0.2,0,0.2s0.2,0,0.2,0l0.9-1.2v5h-5\n      l1.2-0.9c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0l-1.6,1.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0.1,0.1l1.6,1.1c0,0,0.1,0,0.1,0\n      c0,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.2l-1.2-0.9h5v5L21,24.2c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l1.1,1.6c0,0,0.1,0.1,0.1,0.1\n      s0.1,0,0.1-0.1l1.1-1.6c0-0.1,0-0.2,0-0.2c-0.1,0-0.2,0-0.2,0l-0.9,1.2v-5h4.9l-1.2,0.9c-0.1,0-0.1,0.1,0,0.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0l1.6-1.1c0,0,0.1-0.1,0.1-0.1C27.7,20.2,27.7,20.1,27.7,20.1z\"\n      />\n    </g>\n  </svg>\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "ICON_SHIFT_MODE",
+          "default": "`\n  <svg\n    version=\"1.1\"\n    id=\"Layer_1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 30 30\"\n    style=\"enable-background:new 0 0 30 30;\"\n    xml:space=\"preserve\"\n  >\n    <style type=\"text/css\">\n      .st0 {\n        fill: {{strokeColor}};\n        stroke: {{strokeColor}};\n        fill-rule: evenodd;\n        clip-rule: evenodd;\n      }\n      .st1 {\n        fill: {{strokeColor}};\n        stroke: {{strokeColor}};\n        stroke-width: 0.75;\n        stroke-linejoin: round;\n        stroke-miterlimit: 10;\n      }\n    </style>\n    <g>\n      <path\n        class=\"st0\"\n        d=\"M7.8,23.2c1.6,0,3.8,0,5.7,0c0.8,0,1.3-0.3,1.6-1.2c0.4-2.9,1.5-4.9,2.4-6.9s1.4-2.5,1.6-3.4\n      c0.1-0.5,0.2-1.6-0.4-1.9c-0.6-0.3-1.2,0.1-1.9,1.3c-0.8,1.6-1,2-1.4,2c-0.3,0-0.1-4,0-5.4c0.1-1.3-0.6-1.8-1.3-1.8\n      c-0.8-0.1-1.5,0.4-1.5,1.5c0,1.5-0.2,5.2-0.7,5.2c-0.4,0-0.3-4.3-0.6-6.7c-0.1-1-0.6-1.8-1.5-1.8C9.1,4.2,8.4,4.7,8.3,5.8\n      c-0.1,1.3,1,6.7,0.5,6.7c-0.4,0-1.4-3.3-2.3-5.1C6,6.5,5.6,6,4.6,6.4C3.9,6.7,3.5,7.6,3.8,8.5c0.5,1.2,2.7,6.8,2.2,6.8\n      c-0.4,0-1.4-1.4-2.7-2.1c-1.1-0.6-1.8-0.4-2.1-0.1c-0.4,0.3-0.7,1,0.9,2.8c0.6,0.6,3.1,2.3,3.7,3.2c0.7,1.3,0.6,1,0.8,2.8\n      C6.7,22.7,7,23.2,7.8,23.2z\"\n      />\n      <path\n        class=\"st1\"\n        d=\"M28.7,20.1L27.1,19c-0.1,0-0.2,0-0.2,0c0,0.1,0,0.2,0,0.2l1.2,0.9h-4.9v-5l0.9,1.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2l-1.1-1.6c-0.1-0.1-0.2-0.1-0.2,0L21.8,16c0,0.1,0,0.2,0,0.2s0.2,0,0.2,0l0.9-1.2v5h-5\n      l1.2-0.9c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0l-1.6,1.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0.1,0.1l1.6,1.1c0,0,0.1,0,0.1,0\n      c0,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.2l-1.2-0.9h5v5L22,24.2c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l1.1,1.6c0,0,0.1,0.1,0.1,0.1\n      s0.1,0,0.1-0.1l1.1-1.6c0-0.1,0-0.2,0-0.2c-0.1,0-0.2,0-0.2,0l-0.9,1.2v-5h4.9l-1.2,0.9c-0.1,0-0.1,0.1,0,0.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0l1.6-1.1c0,0,0.1-0.1,0.1-0.1C28.7,20.2,28.7,20.1,28.7,20.1z\"\n      />\n    </g>\n  </svg>\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ICON_EDIT_MODE",
+          "declaration": {
+            "name": "ICON_EDIT_MODE",
+            "module": "src/modeller/component-toolbar/mode-icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ICON_SHIFT_MODE",
+          "declaration": {
+            "name": "ICON_SHIFT_MODE",
+            "module": "src/modeller/component-toolbar/mode-icons.ts"
           }
         }
       ]
@@ -5193,458 +5193,352 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "BoxPaddingEditorStyles",
-          "default": "css`\n  .box-padding {\n    width: 100%;\n  }\n\n  .box-padding td {\n    background: var(--url-icon-properties-padding) 50% 0 no-repeat;\n  }\n\n  .box-padding tr:nth-child(1),\n  .box-padding tr:nth-child(3) {\n    height: 20px;\n  }\n\n  .box-padding tr td:nth-child(1),\n  .box-padding tr td:nth-child(3) {\n    width: 18px;\n  }\n\n  .box-padding .slide1 {\n    background-position: 0 0;\n  }\n\n  .box-padding .slide2 {\n    background-position: 50% -40px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide3 {\n    background-position: 100% -440px;\n  }\n\n  .box-padding .slide4 {\n    background-position: 0 -360px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide5 {\n    background: none;\n    text-align: center;\n  }\n\n  .box-padding .slide6 {\n    background-position: 100% -160px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide7 {\n    background-position: 0 100%;\n  }\n\n  .box-padding .slide8 {\n    background-position: 50% -320px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide9 {\n    background-position: 0 0px;\n  }\n\n  .box-padding input {\n    background-color: transparent;\n    width: 35px;\n    margin: 0px;\n    padding: 0px;\n    clear: both;\n    float: initial;\n    border: 1px solid #fff;\n    border-width: 0 0 1px 0;\n    text-align: right;\n    font-size: 14px;\n  }\n\n  .slide5 input:nth-child(1),\n  .slide5 input:nth-child(4) {\n    display: block;\n    margin: auto;\n  }\n\n  .slide5 input:nth-child(2) {\n    float: left;\n  }\n\n  .slide5 input:nth-child(3) {\n    float: right;\n    margin-top: -25px;\n  }\n\n  .slide5 input:nth-child(4) {\n    margin-top: -5px;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BoxPaddingEditorStyles",
-          "declaration": {
-            "name": "BoxPaddingEditorStyles",
-            "module": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/shapes/shapes.ts",
+      "path": "src/modeller/property-sidebar/inspector/inspector.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertyShapes",
+          "name": "SceneInspector",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "scene",
               "type": {
-                "text": "Properties | undefined"
+                "text": "Scene | undefined"
               },
-              "attribute": "value"
+              "attribute": "scene"
             },
             {
               "kind": "field",
-              "name": "bounds",
+              "name": "searchText",
               "type": {
-                "text": "BOUNDS | null"
+                "text": "string"
               },
-              "default": "null",
-              "attribute": "bounds"
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "_extendedMap",
               "type": {
-                "text": "Component[]"
+                "text": "any"
               },
-              "default": "[]",
-              "attribute": "selected"
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "show",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "count",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "-1"
             },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "disconnectScene",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "scene",
+                  "optional": true,
                   "type": {
-                    "text": "Event"
+                    "text": "Scene"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "_hasTextProperty",
+              "name": "refresh"
+            },
+            {
+              "kind": "method",
+              "name": "_onclick",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "e",
                   "type": {
-                    "text": "Component[]"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_hasProperties",
+              "name": "_ondblclick",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "e",
                   "type": {
-                    "text": "Component[]"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "extendedMap",
+              "readonly": true
+            },
             {
               "kind": "method",
-              "name": "_isIdentifiable",
+              "name": "getNodeHandleClass",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "component",
                   "type": {
-                    "text": "Component[]"
+                    "text": "Component"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_isClassIdentifiable",
+              "name": "isExtended",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "component",
                   "type": {
-                    "text": "Component[]"
+                    "text": "Component"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_isLine",
+              "name": "toggleExtended",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "component",
                   "type": {
-                    "text": "Component[]"
+                    "text": "Component"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_is3dish",
+              "name": "toggleHidden",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "component",
                   "type": {
-                    "text": "Component[]"
+                    "text": "Component"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_getValueFromEventTarget",
+              "name": "selectComponent",
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "component",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "Component"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "_onAfterValueChange",
+              "name": "shouldBeShown",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
               "parameters": [
                 {
-                  "name": "key",
+                  "name": "component",
                   "type": {
-                    "text": "string"
+                    "text": "Component"
                   }
                 },
                 {
-                  "name": "value",
+                  "name": "counting",
+                  "default": "false",
                   "type": {
-                    "text": "any"
+                    "text": "boolean"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            }
-          ],
-          "events": [
+              ]
+            },
             {
-              "name": "bounds-change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "property-change",
-              "type": {
-                "text": "CustomEvent"
+              "kind": "method",
+              "name": "renderComponent",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               },
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                },
+                {
+                  "name": "depth",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             }
           ],
           "attributes": [
             {
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "bounds",
-              "type": {
-                "text": "BOUNDS | null"
-              },
-              "default": "null",
-              "fieldName": "bounds"
-            },
-            {
-              "name": "selected",
+              "name": "scene",
               "type": {
-                "text": "Component[]"
+                "text": "Scene | undefined"
               },
-              "default": "[]",
-              "fieldName": "selected"
+              "fieldName": "scene"
             }
           ],
           "superclass": {
-            "name": "AbstractProperty",
-            "module": "/src/modeller/property-sidebar/abstract-property"
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SceneInspector",
+          "declaration": {
+            "name": "SceneInspector",
+            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
           }
         }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/effects/effects-shared-style.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "EffectsSharedStyle",
+          "default": "css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n\n    align-items: center;\n  }\n\n  * {\n    align-self: stretch;\n  }\n\n  label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n\n    align-self: center;\n  }\n\n  input,\n  select,\n  ox-input-angle,\n  ox-input-color,\n  [custom-editor] {\n    grid-column: span 7;\n  }\n\n  input,\n  select,\n  ox-input-angle input,\n  ox-input-color input,\n  [custom-editor] input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  ox-input-data {\n    height: 300px;\n  }\n\n  input[type='checkbox'] {\n    grid-column: 4 / 5;\n    align-self: center;\n  }\n\n  label.checkbox-label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n  }\n`"
+        }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "PropertyShapes",
+          "name": "EffectsSharedStyle",
           "declaration": {
-            "name": "PropertyShapes",
-            "module": "src/modeller/property-sidebar/shapes/shapes.ts"
+            "name": "EffectsSharedStyle",
+            "module": "src/modeller/property-sidebar/effects/effects-shared-style.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/inspector/inspector.ts",
+      "path": "src/modeller/property-sidebar/effects/effects.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SceneInspector",
+          "name": "PropertyEffects",
           "members": [
             {
               "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "attribute": "scene"
-            },
-            {
-              "kind": "field",
-              "name": "searchText",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
-            },
-            {
-              "kind": "field",
-              "name": "_extendedMap",
-              "type": {
-                "text": "any"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "show",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "Properties | undefined"
               },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "disconnectScene",
-              "parameters": [
-                {
-                  "name": "scene",
-                  "optional": true,
-                  "type": {
-                    "text": "Scene"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "refresh"
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "sortableConfig",
+              "name": "scene",
               "type": {
-                "text": "Sortable.Options"
+                "text": "Scene | undefined"
               },
-              "default": "{\n    group: 'inspector',\n    animation: 150,\n    draggable: '.component',\n    swapThreshold: 1,\n    onSort: this.onSort.bind(this)\n  }"
-            },
-            {
-              "kind": "method",
-              "name": "onSort",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Sortable.SortableEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onclick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_ondblclick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "attribute": "scene"
             },
             {
               "kind": "field",
-              "name": "extendedMap",
+              "name": "scopedElements",
+              "static": true,
               "readonly": true
             },
             {
               "kind": "method",
-              "name": "getNodeHandleClass",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "isExtended",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "toggleExtended",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "toggleHidden",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "selectComponent",
+              "name": "_onValueChange",
               "parameters": [
                 {
-                  "name": "component",
+                  "name": "e",
                   "type": {
-                    "text": "Component"
+                    "text": "Event"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "shouldBeShown",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
+              "name": "_getValueFromEventTarget",
               "parameters": [
                 {
-                  "name": "component",
+                  "name": "element",
                   "type": {
-                    "text": "Component"
+                    "text": "HTMLElement"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "renderComponent",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
+              "name": "_onAfterValueChange",
               "parameters": [
                 {
-                  "name": "component",
+                  "name": "key",
                   "type": {
-                    "text": "Component"
+                    "text": "string"
                   }
                 },
                 {
-                  "name": "depth",
+                  "name": "value",
                   "type": {
-                    "text": "number"
+                    "text": "any"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
             }
           ],
           "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "Properties | undefined"
+              },
+              "fieldName": "value"
+            },
             {
               "name": "scene",
               "type": {
@@ -5653,77 +5547,98 @@
               "fieldName": "scene"
             }
           ],
+          "mixins": [
+            {
+              "name": "ScopedElementsMixin",
+              "package": "@open-wc/scoped-elements"
+            }
+          ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "AbstractProperty",
+            "module": "/src/modeller/property-sidebar/abstract-property.js"
           },
-          "customElement": true
+          "events": [
+            {
+              "name": "property-change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SceneInspector",
+          "name": "PropertyEffects",
           "declaration": {
-            "name": "SceneInspector",
-            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
+            "name": "PropertyEffects",
+            "module": "src/modeller/property-sidebar/effects/effects.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/specifics/specific-properties-builder.ts",
+      "path": "src/modeller/property-sidebar/effects/property-event-hover.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SpecificPropertiesBuilder",
+          "name": "PropertyEventHover",
           "members": [
             {
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "any"
+                "text": "Properties | undefined"
               },
               "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "props",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "attribute": "props"
-            },
-            {
-              "kind": "field",
-              "name": "propertyEditor",
+              "name": "scene",
               "type": {
-                "text": "any"
+                "text": "Scene | undefined"
               },
-              "attribute": "propertyEditor"
+              "attribute": "scene"
             },
             {
               "kind": "method",
-              "name": "_onPropsChanged",
+              "name": "_getPlaceHoder",
               "parameters": [
                 {
-                  "name": "props",
+                  "name": "action",
                   "type": {
-                    "text": "any[]"
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_setValues"
+              "name": "_getTargetList",
+              "return": {
+                "type": {
+                  "text": "{ value: string; description: string }[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_onValueChanged",
+              "name": "_onValueChange",
               "parameters": [
                 {
                   "name": "e",
@@ -5736,7 +5651,7 @@
           ],
           "events": [
             {
-              "name": "property-change",
+              "name": "change",
               "type": {
                 "text": "CustomEvent"
               }
@@ -5746,24 +5661,16 @@
             {
               "name": "value",
               "type": {
-                "text": "any"
+                "text": "Properties | undefined"
               },
               "fieldName": "value"
             },
             {
-              "name": "props",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "fieldName": "props"
-            },
-            {
-              "name": "propertyEditor",
+              "name": "scene",
               "type": {
-                "text": "any"
+                "text": "Scene | undefined"
               },
-              "fieldName": "propertyEditor"
+              "fieldName": "scene"
             }
           ],
           "superclass": {
@@ -5776,28 +5683,28 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SpecificPropertiesBuilder",
+          "name": "PropertyEventHover",
           "declaration": {
-            "name": "SpecificPropertiesBuilder",
-            "module": "src/modeller/property-sidebar/specifics/specific-properties-builder.ts"
+            "name": "PropertyEventHover",
+            "module": "src/modeller/property-sidebar/effects/property-event-hover.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/specifics/specifics.ts",
+      "path": "src/modeller/property-sidebar/effects/property-event-tap.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertySpecific",
+          "name": "PropertyEventTap",
           "members": [
             {
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "any"
+                "text": "Properties | undefined"
               },
               "attribute": "value"
             },
@@ -5805,140 +5712,73 @@
               "kind": "field",
               "name": "scene",
               "type": {
-                "text": "Scene | null"
+                "text": "Scene | undefined"
               },
-              "default": "null",
               "attribute": "scene"
             },
             {
               "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "Component[]"
-              },
-              "default": "[]",
-              "attribute": "selected"
-            },
-            {
-              "kind": "field",
-              "name": "props",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "attribute": "props"
-            },
-            {
-              "kind": "field",
-              "name": "propertyEditor",
+              "name": "scenarios",
               "type": {
-                "text": "any[]"
+                "text": "{ value: string; description: string }[]"
               },
-              "default": "[]",
-              "attribute": "propertyEditor"
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "boundINeedSelected",
+              "name": "targetList",
               "type": {
-                "text": "any"
+                "text": "{ value: string; description: string }[]"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "scopedElements",
-              "static": true,
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "_onValueChange",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              "default": "[]"
             },
             {
               "kind": "method",
-              "name": "_isIdentifiable",
+              "name": "_getPlaceHoder",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "action",
                   "type": {
-                    "text": "Component[]"
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_hasTextProperty",
+              "name": "_getInputList",
+              "return": {
+                "type": {
+                  "text": "{ value: string; description: string }[]"
+                }
+              },
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "action",
                   "type": {
-                    "text": "Component[]"
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onINeedSelected",
+              "name": "_onValueChange",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "Event"
                   }
                 }
               ]
-            },
-            {
-              "kind": "method",
-              "name": "_getValueFromEventTarget",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "_onAfterValueChange",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
               }
             }
           ],
@@ -5946,107 +5786,44 @@
             {
               "name": "value",
               "type": {
-                "text": "any"
+                "text": "Properties | undefined"
               },
               "fieldName": "value"
             },
             {
               "name": "scene",
               "type": {
-                "text": "Scene | null"
-              },
-              "default": "null",
-              "fieldName": "scene"
-            },
-            {
-              "name": "selected",
-              "type": {
-                "text": "Component[]"
-              },
-              "default": "[]",
-              "fieldName": "selected"
-            },
-            {
-              "name": "props",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "fieldName": "props"
-            },
-            {
-              "name": "propertyEditor",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "fieldName": "propertyEditor"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ScopedElementsMixin",
-              "package": "@open-wc/scoped-elements"
-            }
-          ],
-          "superclass": {
-            "name": "AbstractProperty",
-            "module": "/src/modeller/property-sidebar/abstract-property"
-          },
-          "events": [
-            {
-              "name": "property-change",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+                "text": "Scene | undefined"
+              },
+              "fieldName": "scene"
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PropertySpecific",
-          "declaration": {
-            "name": "PropertySpecific",
-            "module": "src/modeller/property-sidebar/specifics/specifics.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/effects-shared-style.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "EffectsSharedStyle",
-          "default": "css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n\n    align-items: center;\n  }\n\n  * {\n    align-self: stretch;\n  }\n\n  label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n\n    align-self: center;\n  }\n\n  input,\n  select,\n  ox-input-angle,\n  ox-input-color,\n  [custom-editor] {\n    grid-column: span 7;\n  }\n\n  input,\n  select,\n  ox-input-angle input,\n  ox-input-color input,\n  [custom-editor] input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  ox-input-data {\n    height: 300px;\n  }\n\n  input[type='checkbox'] {\n    grid-column: 4 / 5;\n    align-self: center;\n  }\n\n  label.checkbox-label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n  }\n`"
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EffectsSharedStyle",
+          "name": "PropertyEventTap",
           "declaration": {
-            "name": "EffectsSharedStyle",
-            "module": "src/modeller/property-sidebar/effects/effects-shared-style.ts"
+            "name": "PropertyEventTap",
+            "module": "src/modeller/property-sidebar/effects/property-event-tap.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/effects.ts",
+      "path": "src/modeller/property-sidebar/effects/property-event.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertyEffects",
+          "name": "PropertyEvent",
           "members": [
             {
               "kind": "field",
@@ -6080,48 +5857,14 @@
                     "text": "Event"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_getValueFromEventTarget",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            },
+              ]
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "_onAfterValueChange",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
               }
             }
           ],
@@ -6148,42 +5891,31 @@
             }
           ],
           "superclass": {
-            "name": "AbstractProperty",
-            "module": "/src/modeller/property-sidebar/abstract-property.js"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "events": [
-            {
-              "name": "property-change",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            }
-          ]
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "PropertyEffects",
+          "name": "PropertyEvent",
           "declaration": {
-            "name": "PropertyEffects",
-            "module": "src/modeller/property-sidebar/effects/effects.ts"
+            "name": "PropertyEvent",
+            "module": "src/modeller/property-sidebar/effects/property-event.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/property-event-hover.ts",
+      "path": "src/modeller/property-sidebar/effects/property-shadow.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "PropertyEventHover",
+          "description": "컴포넌트의 그림자 속성을 편집하는 element\n\nExample:\n <property-shadow",
+          "name": "PropertyShadow",
           "members": [
             {
               "kind": "field",
@@ -6193,43 +5925,6 @@
               },
               "attribute": "value"
             },
-            {
-              "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "attribute": "scene"
-            },
-            {
-              "kind": "method",
-              "name": "_getPlaceHoder",
-              "parameters": [
-                {
-                  "name": "action",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_getTargetList",
-              "return": {
-                "type": {
-                  "text": "{ value: string; description: string }[]"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "action",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "_onValueChange",
@@ -6258,13 +5953,6 @@
                 "text": "Properties | undefined"
               },
               "fieldName": "value"
-            },
-            {
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "fieldName": "scene"
             }
           ],
           "superclass": {
@@ -6277,87 +5965,95 @@
       "exports": [
         {
           "kind": "js",
-          "name": "PropertyEventHover",
+          "name": "PropertyShadow",
           "declaration": {
-            "name": "PropertyEventHover",
-            "module": "src/modeller/property-sidebar/effects/property-event-hover.ts"
+            "name": "PropertyShadow",
+            "module": "src/modeller/property-sidebar/effects/property-shadow.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/property-event-tap.ts",
+      "path": "src/modeller/property-sidebar/effects/value-converter.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "convert",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "any"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "convert",
+          "declaration": {
+            "name": "convert",
+            "module": "src/modeller/property-sidebar/effects/value-converter.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/specifics/specific-properties-builder.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertyEventTap",
+          "name": "SpecificPropertiesBuilder",
           "members": [
             {
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "Properties | undefined"
+                "text": "any"
               },
               "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "attribute": "scene"
-            },
-            {
-              "kind": "field",
-              "name": "scenarios",
+              "name": "props",
               "type": {
-                "text": "{ value: string; description: string }[]"
+                "text": "any[]"
               },
-              "default": "[]"
+              "default": "[]",
+              "attribute": "props"
             },
             {
               "kind": "field",
-              "name": "targetList",
+              "name": "propertyEditor",
               "type": {
-                "text": "{ value: string; description: string }[]"
+                "text": "any"
               },
-              "default": "[]"
+              "attribute": "propertyEditor"
             },
             {
               "kind": "method",
-              "name": "_getPlaceHoder",
+              "name": "_onPropsChanged",
               "parameters": [
                 {
-                  "name": "action",
+                  "name": "props",
                   "type": {
-                    "text": "string"
+                    "text": "any[]"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_getInputList",
-              "return": {
-                "type": {
-                  "text": "{ value: string; description: string }[]"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "action",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "name": "_setValues"
             },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "_onValueChanged",
               "parameters": [
                 {
                   "name": "e",
@@ -6370,7 +6066,7 @@
           ],
           "events": [
             {
-              "name": "change",
+              "name": "property-change",
               "type": {
                 "text": "CustomEvent"
               }
@@ -6380,16 +6076,24 @@
             {
               "name": "value",
               "type": {
-                "text": "Properties | undefined"
+                "text": "any"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "props",
+              "type": {
+                "text": "any[]"
               },
-              "fieldName": "value"
+              "default": "[]",
+              "fieldName": "props"
             },
             {
-              "name": "scene",
+              "name": "propertyEditor",
               "type": {
-                "text": "Scene | undefined"
+                "text": "any"
               },
-              "fieldName": "scene"
+              "fieldName": "propertyEditor"
             }
           ],
           "superclass": {
@@ -6402,28 +6106,28 @@
       "exports": [
         {
           "kind": "js",
-          "name": "PropertyEventTap",
+          "name": "SpecificPropertiesBuilder",
           "declaration": {
-            "name": "PropertyEventTap",
-            "module": "src/modeller/property-sidebar/effects/property-event-tap.ts"
+            "name": "SpecificPropertiesBuilder",
+            "module": "src/modeller/property-sidebar/specifics/specific-properties-builder.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/property-event.ts",
+      "path": "src/modeller/property-sidebar/specifics/specifics.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertyEvent",
+          "name": "PropertySpecific",
           "members": [
             {
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "Properties | undefined"
+                "text": "any"
               },
               "attribute": "value"
             },
@@ -6431,10 +6135,46 @@
               "kind": "field",
               "name": "scene",
               "type": {
-                "text": "Scene | undefined"
+                "text": "Scene | null"
               },
+              "default": "null",
               "attribute": "scene"
             },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "Component[]"
+              },
+              "default": "[]",
+              "attribute": "selected"
+            },
+            {
+              "kind": "field",
+              "name": "props",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "attribute": "props"
+            },
+            {
+              "kind": "field",
+              "name": "propertyEditor",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "attribute": "propertyEditor"
+            },
+            {
+              "kind": "field",
+              "name": "boundINeedSelected",
+              "type": {
+                "text": "any"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "scopedElements",
@@ -6451,14 +6191,84 @@
                     "text": "Event"
                   }
                 }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_isIdentifiable",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
               ]
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
+              "kind": "method",
+              "name": "_hasTextProperty",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onINeedSelected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_getValueFromEventTarget",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onAfterValueChange",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
               }
             }
           ],
@@ -6466,119 +6276,62 @@
             {
               "name": "value",
               "type": {
-                "text": "Properties | undefined"
+                "text": "any"
               },
               "fieldName": "value"
             },
             {
               "name": "scene",
               "type": {
-                "text": "Scene | undefined"
+                "text": "Scene | null"
               },
+              "default": "null",
               "fieldName": "scene"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ScopedElementsMixin",
-              "package": "@open-wc/scoped-elements"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PropertyEvent",
-          "declaration": {
-            "name": "PropertyEvent",
-            "module": "src/modeller/property-sidebar/effects/property-event.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/property-shadow.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "컴포넌트의 그림자 속성을 편집하는 element\n\nExample:\n <property-shadow",
-          "name": "PropertyShadow",
-          "members": [
+            },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "selected",
               "type": {
-                "text": "Properties | undefined"
+                "text": "Component[]"
               },
-              "attribute": "value"
+              "default": "[]",
+              "fieldName": "selected"
             },
             {
-              "kind": "method",
-              "name": "_onValueChange",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
+              "name": "props",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "fieldName": "props"
+            },
             {
-              "name": "change",
+              "name": "propertyEditor",
               "type": {
-                "text": "CustomEvent"
-              }
+                "text": "any[]"
+              },
+              "default": "[]",
+              "fieldName": "propertyEditor"
             }
           ],
-          "attributes": [
+          "mixins": [
             {
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "fieldName": "value"
+              "name": "ScopedElementsMixin",
+              "package": "@open-wc/scoped-elements"
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "AbstractProperty",
+            "module": "/src/modeller/property-sidebar/abstract-property"
           },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PropertyShadow",
-          "declaration": {
-            "name": "PropertyShadow",
-            "module": "src/modeller/property-sidebar/effects/property-shadow.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/value-converter.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "convert",
-          "parameters": [
+          "events": [
             {
-              "name": "element",
+              "name": "property-change",
               "type": {
-                "text": "any"
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
               }
             }
           ]
@@ -6587,10 +6340,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "convert",
+          "name": "PropertySpecific",
           "declaration": {
-            "name": "convert",
-            "module": "src/modeller/property-sidebar/effects/value-converter.ts"
+            "name": "PropertySpecific",
+            "module": "src/modeller/property-sidebar/specifics/specifics.ts"
           }
         }
       ]
@@ -6760,6 +6513,249 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "BoxPaddingEditorStyles",
+          "default": "css`\n  .box-padding {\n    width: 100%;\n  }\n\n  .box-padding td {\n    background: var(--url-icon-properties-padding) 50% 0 no-repeat;\n  }\n\n  .box-padding tr:nth-child(1),\n  .box-padding tr:nth-child(3) {\n    height: 20px;\n  }\n\n  .box-padding tr td:nth-child(1),\n  .box-padding tr td:nth-child(3) {\n    width: 18px;\n  }\n\n  .box-padding .slide1 {\n    background-position: 0 0;\n  }\n\n  .box-padding .slide2 {\n    background-position: 50% -40px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide3 {\n    background-position: 100% -440px;\n  }\n\n  .box-padding .slide4 {\n    background-position: 0 -360px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide5 {\n    background: none;\n    text-align: center;\n  }\n\n  .box-padding .slide6 {\n    background-position: 100% -160px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide7 {\n    background-position: 0 100%;\n  }\n\n  .box-padding .slide8 {\n    background-position: 50% -320px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide9 {\n    background-position: 0 0px;\n  }\n\n  .box-padding input {\n    background-color: transparent;\n    width: 35px;\n    margin: 0px;\n    padding: 0px;\n    clear: both;\n    float: initial;\n    border: 1px solid #fff;\n    border-width: 0 0 1px 0;\n    text-align: right;\n    font-size: 14px;\n  }\n\n  .slide5 input:nth-child(1),\n  .slide5 input:nth-child(4) {\n    display: block;\n    margin: auto;\n  }\n\n  .slide5 input:nth-child(2) {\n    float: left;\n  }\n\n  .slide5 input:nth-child(3) {\n    float: right;\n    margin-top: -25px;\n  }\n\n  .slide5 input:nth-child(4) {\n    margin-top: -5px;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BoxPaddingEditorStyles",
+          "declaration": {
+            "name": "BoxPaddingEditorStyles",
+            "module": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/shapes/shapes.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PropertyShapes",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "Properties | undefined"
+              },
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "bounds",
+              "type": {
+                "text": "BOUNDS | null"
+              },
+              "default": "null",
+              "attribute": "bounds"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "Component[]"
+              },
+              "default": "[]",
+              "attribute": "selected"
+            },
+            {
+              "kind": "method",
+              "name": "_onValueChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_hasTextProperty",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_hasProperties",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isIdentifiable",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isClassIdentifiable",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isLine",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_is3dish",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_getValueFromEventTarget",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onAfterValueChange",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "bounds-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "property-change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "Properties | undefined"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "bounds",
+              "type": {
+                "text": "BOUNDS | null"
+              },
+              "default": "null",
+              "fieldName": "bounds"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "Component[]"
+              },
+              "default": "[]",
+              "fieldName": "selected"
+            }
+          ],
+          "superclass": {
+            "name": "AbstractProperty",
+            "module": "/src/modeller/property-sidebar/abstract-property"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PropertyShapes",
+          "declaration": {
+            "name": "PropertyShapes",
+            "module": "src/modeller/property-sidebar/shapes/shapes.ts"
+          }
+        }
+      ]
     }
   ]
 }