@fmsim/board 1.0.87 → 2.0.0-beta.11

package/custom-elements.json

@@ -2,6 +2,91 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "stories/restful-attachment-selector.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "default": "{ title: 'Components/RestfulAttachmentSelector', component: 'restful-attachment-selector', argTypes: { category: { control: 'select', options: ['', 'audio', 'video', 'image', 'text', 'application'], description: '첨부파일 카테고리' }, creatable: { control: 'boolean', description: '파일 업로드 가능 여부' }, userName: { control: 'text', description: '사용자 이름' } }, parameters: { layout: 'centered' } } satisfies Meta"
+        },
+        {
+          "kind": "variable",
+          "name": "Default",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: args => html` <restful-attachment-selector .category=${args.category} .creatable=${args.creatable} .userName=${args.userName} style=\"width: 800px; height: 600px;\" ></restful-attachment-selector> `, args: { category: '', creatable: true, userName: 'testUser' } }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithCategory",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...Default, args: { ...Default.args, category: 'document' } }"
+        },
+        {
+          "kind": "variable",
+          "name": "ReadOnly",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...Default, args: { ...Default.args, creatable: false } }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithTestData",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...Default, args: { ...Default.args, category: 'document' }, play: async ({ canvasElement }) => { const selector = canvasElement.querySelector('restful-attachment-selector') as RestfulAttachmentSelector if (selector) { // 테스트 데이터 주입 selector.attachments = [ { id: 'test-1', name: 'test1.txt', description: 'Test file 1', mimetype: 'text/plain', encoding: '7bit', category: 'document', path: 'test1.txt', bulk: '27', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), creatorId: 'testUser', updaterId: 'testUser', fullpath: 'http://localhost:16060/mcs/lv/images/test1.txt', download: 'http://localhost:16060/mcs/lv/downloadFile/test1.txt' }, { id: 'test-2', name: 'test2.jpg', description: 'Test image', mimetype: 'image/jpeg', encoding: '7bit', category: 'image', path: 'test2.jpg', bulk: '1024', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), creatorId: 'testUser', updaterId: 'testUser', fullpath: 'http://localhost:16060/mcs/lv/images/test2.jpg', download: 'http://localhost:16060/mcs/lv/downloadFile/test2.jpg' } ] } } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/restful-attachment-selector.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Default",
+          "declaration": {
+            "name": "Default",
+            "module": "stories/restful-attachment-selector.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithCategory",
+          "declaration": {
+            "name": "WithCategory",
+            "module": "stories/restful-attachment-selector.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ReadOnly",
+          "declaration": {
+            "name": "ReadOnly",
+            "module": "stories/restful-attachment-selector.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithTestData",
+          "declaration": {
+            "name": "WithTestData",
+            "module": "stories/restful-attachment-selector.stories.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/index.ts",
@@ -564,7 +649,7 @@
               "kind": "field",
               "name": "mode",
               "type": {
-                "text": "SCENE_MODE"
+                "text": "SceneMode"
               },
               "attribute": "mode"
             },
@@ -759,7 +844,7 @@
             {
               "name": "mode",
               "type": {
-                "text": "SCENE_MODE"
+                "text": "SceneMode"
               },
               "fieldName": "mode"
             },
@@ -936,7 +1021,7 @@
               "kind": "field",
               "name": "_scene",
               "type": {
-                "text": "Scene | null"
+                "text": "any"
               },
               "default": "null"
             },
@@ -971,6 +1056,30 @@
                 "text": "Array<Animation> | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "_fabExpanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_playbackActive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_is3dMode",
+              "type": {
+                "text": "boolean"
+              },
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "currentBoardId",
@@ -1002,7 +1111,7 @@
             },
             {
               "kind": "field",
-              "name": "_fullscreen",
+              "name": "_fabGroup",
               "type": {
                 "text": "HTMLElement"
               }
@@ -1077,6 +1186,11 @@
               "kind": "field",
               "name": "fmbResetAnimation"
             },
+            {
+              "kind": "field",
+              "name": "_pointerMoveHandler",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "initSceneAsync"
@@ -1170,6 +1284,19 @@
               "kind": "method",
               "name": "onTapFullscreen"
             },
+            {
+              "kind": "method",
+              "name": "onTapToggle3D"
+            },
+            {
+              "kind": "method",
+              "name": "onTapPlayback"
+            },
+            {
+              "kind": "method",
+              "name": "_stopPlayback",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "onRunBoard"
@@ -1360,6 +1487,12 @@
             }
           ],
           "events": [
+            {
+              "name": "playback-toggle",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
             {
               "name": "run-board",
               "type": {
@@ -1545,101 +1678,492 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/ox-property-editor-board-selector.ts",
+      "path": "src/ox-playback-controls.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "PropertyEditorBoardSelector",
+          "description": "플레이백 컨트롤 오버레이 바 (2행 구조)\n\n1행: 시작 시점 설정 (datetime + ±1h 버튼) + 배속 선택\n2행: 재생 제어 (play/pause/stop) + 1시간 범위 시크바 + 닫기",
+          "name": "PlaybackControls",
           "members": [
+            {
+              "kind": "field",
+              "name": "playbackState",
+              "type": {
+                "text": "PlaybackState"
+              },
+              "default": "'idle'",
+              "attribute": "playbackState"
+            },
+            {
+              "kind": "field",
+              "name": "speed",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "attribute": "speed"
+            },
+            {
+              "kind": "field",
+              "name": "currentTime",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "currentTime"
+            },
+            {
+              "kind": "field",
+              "name": "timeRange",
+              "type": {
+                "text": "{ from: Date; to: Date }"
+              },
+              "default": "{ from: new Date(Date.now() - ONE_HOUR), to: new Date() }",
+              "description": "외부에서 전달받은 초기 시간 범위 (from만 사용, to는 from+1h로 자동 계산)",
+              "attribute": "timeRange"
+            },
+            {
+              "kind": "field",
+              "name": "_startTime",
+              "type": {
+                "text": "Date"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_seekValue",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_currentPlayTime",
+              "type": {
+                "text": "Date | null"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_speeds",
+              "type": {
+                "text": "array"
+              },
+              "privacy": "private",
+              "default": "[1, 2, 4, 8]"
+            },
+            {
+              "kind": "field",
+              "name": "_timer",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_endTime",
+              "type": {
+                "text": "Date"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
-              "name": "editorTemplate",
+              "name": "_floorToHour",
+              "privacy": "private",
+              "static": true,
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "Date"
                 }
               },
               "parameters": [
                 {
-                  "name": "value",
-                  "type": {
-                    "text": "any"
-                  }
-                },
-                {
-                  "name": "spec",
+                  "name": "date",
                   "type": {
-                    "text": "PropertySpec"
+                    "text": "Date"
                   }
                 }
               ]
-            }
-          ],
-          "superclass": {
-            "name": "OxPropertyEditor",
-            "package": "@operato/property-editor"
-          },
-          "tagName": "ox-property-editor-board-selector",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "ox-property-editor-board-selector",
-          "declaration": {
-            "name": "PropertyEditorBoardSelector",
-            "module": "src/ox-property-editor-board-selector.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/ox-property-editor-theme.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "OxPropertyEditorTheme",
-          "members": [
-            {
-              "kind": "field",
-              "name": "oxSelect",
-              "type": {
-                "text": "LitElement"
-              }
             },
             {
               "kind": "method",
-              "name": "editorTemplate",
+              "name": "_formatTime",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "string"
                 }
               },
               "parameters": [
                 {
-                  "name": "value",
-                  "type": {
-                    "text": "any"
-                  }
-                },
-                {
-                  "name": "spec",
+                  "name": "date",
                   "type": {
-                    "text": "PropertySpec"
+                    "text": "Date"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_getOptionValue",
-              "parameters": [
-                {
-                  "name": "item",
+              "name": "_toDateString",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_updateSeekPosition",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onDateChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onHourChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_shiftTime",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "hours",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_shiftStartTime",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "newStart",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "description": "시작 시간 변경 시 현재 재생 시간도 같은 offset만큼 이동.\n재생 중이면 타이머 유지."
+            },
+            {
+              "kind": "method",
+              "name": "_onStart",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onTogglePlayPause",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onStop",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onSeekInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onSeekChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onSpeedChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "speed",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_startTimer",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_stopTimer",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_updateSeekFromPlayTime",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "playback-start",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "플레이백 시작 요청 { fromTime, speed }"
+            },
+            {
+              "name": "playback-pause",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "일시정지 요청"
+            },
+            {
+              "name": "playback-resume",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "재개 요청"
+            },
+            {
+              "name": "playback-stop",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "중지 요청"
+            },
+            {
+              "name": "playback-seek",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "시크 요청 { toTime }"
+            },
+            {
+              "name": "playback-speed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "배속 변경 요청 { speed }"
+            },
+            {
+              "name": "playback-tick",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "playbackState",
+              "type": {
+                "text": "PlaybackState"
+              },
+              "default": "'idle'",
+              "fieldName": "playbackState"
+            },
+            {
+              "name": "speed",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "speed"
+            },
+            {
+              "name": "currentTime",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "currentTime"
+            },
+            {
+              "name": "timeRange",
+              "type": {
+                "text": "{ from: Date; to: Date }"
+              },
+              "default": "{ from: new Date(Date.now() - ONE_HOUR), to: new Date() }",
+              "description": "외부에서 전달받은 초기 시간 범위 (from만 사용, to는 from+1h로 자동 계산)",
+              "fieldName": "timeRange"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ox-playback-controls",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PlaybackControls",
+          "declaration": {
+            "name": "PlaybackControls",
+            "module": "src/ox-playback-controls.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ox-playback-controls",
+          "declaration": {
+            "name": "PlaybackControls",
+            "module": "src/ox-playback-controls.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/ox-property-editor-board-selector.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PropertyEditorBoardSelector",
+          "members": [
+            {
+              "kind": "method",
+              "name": "editorTemplate",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                },
+                {
+                  "name": "spec",
+                  "type": {
+                    "text": "PropertySpec"
+                  }
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "OxPropertyEditor",
+            "package": "@operato/property-editor"
+          },
+          "tagName": "ox-property-editor-board-selector",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ox-property-editor-board-selector",
+          "declaration": {
+            "name": "PropertyEditorBoardSelector",
+            "module": "src/ox-property-editor-board-selector.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/ox-property-editor-theme.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "OxPropertyEditorTheme",
+          "members": [
+            {
+              "kind": "field",
+              "name": "oxSelect",
+              "type": {
+                "text": "LitElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "editorTemplate",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                },
+                {
+                  "name": "spec",
+                  "type": {
+                    "text": "PropertySpec"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_getOptionValue",
+              "parameters": [
+                {
+                  "name": "item",
                   "type": {
                     "text": "Option"
                   }
@@ -1712,85 +2236,92 @@
     },
     {
       "kind": "javascript-module",
-      "path": "stories/restful-attachment-selector.stories.ts",
+      "path": "src/data-storage/data-storage.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "meta",
-          "default": "{ title: 'Components/RestfulAttachmentSelector', component: 'restful-attachment-selector', argTypes: { category: { control: 'select', options: ['', 'audio', 'video', 'image', 'text', 'application'], description: '첨부파일 카테고리' }, creatable: { control: 'boolean', description: '파일 업로드 가능 여부' }, userName: { control: 'text', description: '사용자 이름' } }, parameters: { layout: 'centered' } } satisfies Meta"
-        },
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <restful-attachment-selector .category=${args.category} .creatable=${args.creatable} .userName=${args.userName} style=\"width: 800px; height: 600px;\" ></restful-attachment-selector> `, args: { category: '', creatable: true, userName: 'testUser' } }"
-        },
-        {
-          "kind": "variable",
-          "name": "WithCategory",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...Default, args: { ...Default.args, category: 'document' } }"
-        },
-        {
-          "kind": "variable",
-          "name": "ReadOnly",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...Default, args: { ...Default.args, creatable: false } }"
-        },
-        {
-          "kind": "variable",
-          "name": "WithTestData",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...Default, args: { ...Default.args, category: 'document' }, play: async ({ canvasElement }) => { const selector = canvasElement.querySelector('restful-attachment-selector') as RestfulAttachmentSelector if (selector) { // 테스트 데이터 주입 selector.attachments = [ { id: 'test-1', name: 'test1.txt', description: 'Test file 1', mimetype: 'text/plain', encoding: '7bit', category: 'document', path: 'test1.txt', bulk: '27', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), creatorId: 'testUser', updaterId: 'testUser', fullpath: 'http://localhost:16060/mcs/lv/images/test1.txt', download: 'http://localhost:16060/mcs/lv/downloadFile/test1.txt' }, { id: 'test-2', name: 'test2.jpg', description: 'Test image', mimetype: 'image/jpeg', encoding: '7bit', category: 'image', path: 'test2.jpg', bulk: '1024', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), creatorId: 'testUser', updaterId: 'testUser', fullpath: 'http://localhost:16060/mcs/lv/images/test2.jpg', download: 'http://localhost:16060/mcs/lv/downloadFile/test2.jpg' } ] } } }"
+          "kind": "class",
+          "description": "",
+          "name": "DataStorage",
+          "members": [
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "id"
+            },
+            {
+              "kind": "method",
+              "name": "load",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "Promise<any>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "save",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "Component"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "clear",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "stories/restful-attachment-selector.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "stories/restful-attachment-selector.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithCategory",
-          "declaration": {
-            "name": "WithCategory",
-            "module": "stories/restful-attachment-selector.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ReadOnly",
-          "declaration": {
-            "name": "ReadOnly",
-            "module": "stories/restful-attachment-selector.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithTestData",
+          "name": "DataStorage",
           "declaration": {
-            "name": "WithTestData",
-            "module": "stories/restful-attachment-selector.stories.ts"
+            "name": "DataStorage",
+            "module": "src/data-storage/data-storage.ts"
           }
         }
       ]
@@ -2856,158 +3387,66 @@
           "name": "RestfulInputBackgroundPattern",
           "members": [
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "BackgroundPatternOption | undefined"
-              },
-              "attribute": "value"
-            },
-            {
-              "kind": "method",
-              "name": "_onChange",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "BackgroundPatternOption | undefined"
-              },
-              "fieldName": "value"
-            }
-          ],
-          "superclass": {
-            "name": "OxFormField",
-            "package": "@operato/input"
-          },
-          "tagName": "restful-input-background-pattern",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "RestfulInputBackgroundPattern",
-          "declaration": {
-            "name": "RestfulInputBackgroundPattern",
-            "module": "src/component/restrul-input-background-pattern.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "restful-input-background-pattern",
-          "declaration": {
-            "name": "RestfulInputBackgroundPattern",
-            "module": "src/component/restrul-input-background-pattern.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/data-storage/data-storage.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "DataStorage",
-          "members": [
-            {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "id"
-            },
-            {
-              "kind": "method",
-              "name": "load",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "Promise<any>"
-                }
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "BackgroundPatternOption | undefined"
               },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
+              "attribute": "value"
             },
             {
               "kind": "method",
-              "name": "save",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
+              "name": "_onChange",
               "parameters": [
                 {
-                  "name": "key",
-                  "type": {
-                    "text": "Component"
-                  }
-                },
-                {
-                  "name": "value",
+                  "name": "e",
                   "type": {
-                    "text": "any"
+                    "text": "Event"
                   }
                 }
               ]
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "clear",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "BackgroundPatternOption | undefined"
               },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
+              "fieldName": "value"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "OxFormField",
+            "package": "@operato/input"
+          },
+          "tagName": "restful-input-background-pattern",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DataStorage",
+          "name": "RestfulInputBackgroundPattern",
           "declaration": {
-            "name": "DataStorage",
-            "module": "src/data-storage/data-storage.ts"
+            "name": "RestfulInputBackgroundPattern",
+            "module": "src/component/restrul-input-background-pattern.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "restful-input-background-pattern",
+          "declaration": {
+            "name": "RestfulInputBackgroundPattern",
+            "module": "src/component/restrul-input-background-pattern.ts"
           }
         }
       ]
@@ -3150,6 +3589,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "render3D",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "movement",
+                  "type": {
+                    "text": "MOVEMENT"
+                  }
+                },
+                {
+                  "name": "rootModel",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "eventMap",
@@ -3162,13 +3620,13 @@
                 {
                   "name": "after",
                   "type": {
-                    "text": "Properties"
+                    "text": "Record<string, any>"
                   }
                 },
                 {
                   "name": "before",
                   "type": {
-                    "text": "Properties"
+                    "text": "Record<string, any>"
                   }
                 },
                 {
@@ -3191,13 +3649,13 @@
                 {
                   "name": "after",
                   "type": {
-                    "text": "Properties"
+                    "text": "Record<string, any>"
                   }
                 },
                 {
                   "name": "before",
                   "type": {
-                    "text": "Properties"
+                    "text": "Record<string, any>"
                   }
                 }
               ]
@@ -3227,7 +3685,7 @@
         {
           "kind": "variable",
           "name": "style",
-          "default": "css` :host { color: white; background-color: var(--edit-toolbar-background-color, #394e64); overflow-x: hidden; } [tools] { display: flex; align-items: center; overflow: none; padding: 0px 10px; } [tools] > * { padding: 0px; } [tools] > span[button] { min-width: 30px; } [tools] > span[padding] { flex: 1; } [tools] > .vline { display: block; flex: none; border-left: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.15); width: 0px; height: 18px; margin: 0 3px; } span[button] { min-height: 35px; background: var(--url-icon-htoolbar) no-repeat; background-position-x: 50%; opacity: 0.8; } span[button]:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.1); cursor: pointer; } #fullscreen, #toggle-property { flex: none; } #align-left { background-position-y: 8px; } #align-center { background-position-y: -42px; } #align-right { background-position-y: -92px; } #align-top { background-position-y: -142px; } #align-middle { background-position-y: -192px; } #align-bottom { background-position-y: -242px; } #undo { background-position-y: -592px; } #redo { background-position-y: -642px; } #front { background-position-y: -292px; } #back { background-position-y: -342px; } #forward { background-position-y: -392px; } #backward { background-position-y: -442px; } #symmetry-x { background-position-y: -492px; } #symmetry-y { background-position-y: -542px; } #group { background-position-y: -492px; } #ungroup { background-position-y: -542px; } #fullscreen { background-position-y: -692px; } #toggle-property { background-position-y: -692px; float: right; } #zoomin { background-position-y: -742px; } #zoomout { background-position-y: -792px; } #fit-scene { background-position-y: -1492px; } #cut { background-position-y: -842px; } #copy { background-position-y: -892px; } #paste { background-position-y: -942px; } #delete { background-position-y: -992px; } #font-increase { background-position-y: -1042px; } #font-decrease { background-position-y: -1092px; } #style-copy { background-position-y: -1142px; } #context-menu { background-position-y: -692px; } #symmetry-x { background-position-y: -1192px; } #symmetry-y { background-position-y: -1242px; } #rotate-cw { background-position-y: -1292px; } #rotate-ccw { background-position-y: -1342px; } #distribute-horizontal { background-position-y: -1542px; } #distribute-vertical { background-position-y: -1593px; } #toggle-property { background-position-y: -1392px; } #preview { background-position-y: -1640px; } /* bigger buttons */ #fullscreen { background: var(--url-icon-fullscreen) 50% 10px no-repeat; width: var(--edit-toolbar-bigger-icon-size); height: var(--edit-toolbar-bigger-icon-size); border-left: var(--edit-toolbar-bigger-icon-line); } #toggle-property { background: var(--url-icon-collapse) 80% 10px no-repeat; width: var(--edit-toolbar-bigger-icon-size); height: var(--edit-toolbar-bigger-icon-size); border-left: var(--edit-toolbar-bigger-icon-line); } #toggle-property[active] { background: var(--url-icon-collapse-active) 80% 10px no-repeat; } #generate-model { background-position-y: -1492px; } `"
+          "default": "css` :host { background-color: var(--edit-toolbar-background-color, var(--md-sys-color-secondary, #394e64)); overflow-x: hidden; } [tools] { display: flex; align-items: center; overflow: hidden; padding: 0px 10px; } [tools] > * { padding: 0px; } [tools] > span[button] { min-width: 30px; } [tools] > span[padding] { flex: 1; } [tools] > .vline { display: block; flex: none; border-left: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.15); width: 0px; height: 18px; margin: 0 3px; } span[button] { min-height: 35px; background: var(--url-icon-htoolbar) no-repeat; background-position-x: 50%; opacity: 0.8; } span[button]:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.1); cursor: pointer; } #fullscreen, #toggle-property { flex: none; } #align-left { background-position-y: 8px; } #align-center { background-position-y: -42px; } #align-right { background-position-y: -92px; } #align-top { background-position-y: -142px; } #align-middle { background-position-y: -192px; } #align-bottom { background-position-y: -242px; } #undo { background-position-y: -592px; } #redo { background-position-y: -642px; } #front { background-position-y: -292px; } #back { background-position-y: -342px; } #forward { background-position-y: -392px; } #backward { background-position-y: -442px; } #symmetry-x { background-position-y: -492px; } #symmetry-y { background-position-y: -542px; } #group { background-position-y: -492px; } #ungroup { background-position-y: -542px; } #fullscreen { background-position-y: -692px; } #toggle-property { background-position-y: -692px; float: right; } #zoomin { background-position-y: -742px; } #zoomout { background-position-y: -792px; } #fit-scene { background-position-y: -1492px; } #cut { background-position-y: -842px; } #copy { background-position-y: -892px; } #paste { background-position-y: -942px; } #delete { background-position-y: -992px; } #font-increase { background-position-y: -1042px; } #font-decrease { background-position-y: -1092px; } #style-copy { background-position-y: -1142px; } #databind-copy { background-position-y: -1692px; } #context-menu { background-position-y: -692px; } #symmetry-x { background-position-y: -1192px; } #symmetry-y { background-position-y: -1242px; } #rotate-cw { background-position-y: -1292px; } #rotate-ccw { background-position-y: -1342px; } #distribute-horizontal { background-position-y: -1542px; } #distribute-vertical { background-position-y: -1593px; } #align-z-front { background-position-y: -142px; filter: hue-rotate(180deg); } #align-z-middle { background-position-y: -192px; filter: hue-rotate(180deg); } #align-z-back { background-position-y: -242px; filter: hue-rotate(180deg); } #distribute-z { background-position-y: -1593px; filter: hue-rotate(180deg); } .gizmo-btn { background: none !important; color: rgba(255, 255, 255, 0.5); min-width: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 3px; padding: 2px; } .gizmo-btn[disabled] { opacity: 0.3; pointer-events: none; } #toggle-property { background-position-y: -1392px; } #preview { background-position-y: -1640px; } /* bigger buttons */ #fullscreen { background: var(--url-icon-fullscreen) 50% 10px no-repeat; width: var(--edit-toolbar-bigger-icon-size); height: var(--edit-toolbar-bigger-icon-size); border-left: var(--edit-toolbar-bigger-icon-line); } #toggle-property { background: var(--url-icon-collapse) 80% 10px no-repeat; width: var(--edit-toolbar-bigger-icon-size); height: var(--edit-toolbar-bigger-icon-size); border-left: var(--edit-toolbar-bigger-icon-line); } #toggle-property[active] { background: var(--url-icon-collapse-active) 80% 10px no-repeat; } #generate-model { background-position-y: -1492px; } `"
         }
       ],
       "exports": [
@@ -3278,121 +3736,27 @@
             },
             {
               "kind": "field",
-              "name": "cliped",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "redo",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "undo",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "fullscreen",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "cut",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "copy",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "paste",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "delete",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "forward",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "backward",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "front",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "back",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "aligners",
+              "name": "_dimension",
               "type": {
-                "text": "NodeListOf<HTMLSpanElement>"
+                "text": "'2d' | '3d' | null"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "zorders",
+              "name": "_gizmoAttached",
               "type": {
-                "text": "NodeListOf<HTMLSpanElement>"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "distributes",
+              "name": "cliped",
               "type": {
-                "text": "NodeListOf<HTMLSpanElement>"
+                "text": "string | undefined"
               },
               "privacy": "private"
             },
@@ -3449,6 +3813,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "id",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "onExecute",
@@ -3521,10 +3904,49 @@
                   }
                 },
                 {
-                  "name": "before",
-                  "optional": true,
+                  "name": "before",
+                  "optional": true,
+                  "type": {
+                    "text": "Scene"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onDimensionChanged",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "dimension",
+                  "type": {
+                    "text": "'2d' | '3d'"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onGizmoAttachChanged",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isAttached",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_setGizmoMode",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "mode",
                   "type": {
-                    "text": "Scene"
+                    "text": "'translate' | 'rotate' | 'scale'"
                   }
                 }
               ]
@@ -3555,6 +3977,14 @@
               "kind": "method",
               "name": "onTapRedo"
             },
+            {
+              "kind": "method",
+              "name": "onStartStylePasteMode"
+            },
+            {
+              "kind": "method",
+              "name": "onStartDatabindPasteMode"
+            },
             {
               "kind": "method",
               "name": "onTapCut"
@@ -4291,69 +4721,278 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/component-toolbar/component-detail.ts",
+      "path": "src/modeller/scene-viewer/confidential-overlay.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ComponentDetail",
+          "name": "ConfidentialOverlay",
+          "members": [
+            {
+              "kind": "method",
+              "name": "_draw",
+              "parameters": [
+                {
+                  "name": "context",
+                  "type": {
+                    "text": "CanvasRenderingContext2D"
+                  }
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "SceneLayer",
+            "package": "@hatiolab/things-scene"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ConfidentialOverlay",
+            "module": "src/modeller/scene-viewer/confidential-overlay.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/scene-viewer/ox-scene-handler.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "OxSceneHandler",
           "members": [
             {
               "kind": "field",
-              "name": "template",
+              "name": "type",
               "type": {
-                "text": "{ about: string } | null"
+                "text": "string"
               },
-              "default": "null",
-              "attribute": "template"
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "model",
+              "type": {
+                "text": "{\n    type: Object\n    notify: true\n  }"
+              },
+              "attribute": "model"
             }
           ],
           "attributes": [
             {
-              "name": "template",
+              "name": "type",
               "type": {
-                "text": "{ about: string } | null"
+                "text": "string"
               },
-              "default": "null",
-              "fieldName": "template"
+              "fieldName": "type"
+            },
+            {
+              "name": "model",
+              "type": {
+                "text": "{\n    type: Object\n    notify: true\n  }"
+              },
+              "fieldName": "model"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
+          "tagName": "ox-scene-handler",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ComponentDetail",
+          "name": "default",
           "declaration": {
-            "name": "ComponentDetail",
-            "module": "src/modeller/component-toolbar/component-detail.ts"
+            "name": "OxSceneHandler",
+            "module": "src/modeller/scene-viewer/ox-scene-handler.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ox-scene-handler",
+          "declaration": {
+            "name": "OxSceneHandler",
+            "module": "src/modeller/scene-viewer/ox-scene-handler.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/component-toolbar/component-menu.ts",
+      "path": "src/modeller/scene-viewer/ox-scene-layer.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "OxSceneLayer",
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "String | undefined"
+              },
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "String | undefined"
+              },
+              "attribute": "text"
+            },
+            {
+              "kind": "method",
+              "name": "getModel"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "String | undefined"
+              },
+              "fieldName": "type"
+            },
+            {
+              "name": "text",
+              "type": {
+                "text": "String | undefined"
+              },
+              "fieldName": "text"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ox-scene-layer",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "OxSceneLayer",
+            "module": "src/modeller/scene-viewer/ox-scene-layer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ox-scene-layer",
+          "declaration": {
+            "name": "OxSceneLayer",
+            "module": "src/modeller/scene-viewer/ox-scene-layer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/scene-viewer/ox-scene-property.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "OxSceneProperty",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "type"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "type"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ox-scene-property",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "OxSceneProperty",
+            "module": "src/modeller/scene-viewer/ox-scene-property.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ox-scene-property",
+          "declaration": {
+            "name": "OxSceneProperty",
+            "module": "src/modeller/scene-viewer/ox-scene-property.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/scene-viewer/ox-scene-viewer.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ComponentMenu",
+          "name": "OxSceneViewer",
           "members": [
-            {
-              "kind": "field",
-              "name": "groups",
-              "type": {
-                "text": "Pallet[]"
-              },
-              "default": "[]",
-              "attribute": "groups"
-            },
             {
               "kind": "field",
               "name": "scene",
@@ -4365,533 +5004,431 @@
             },
             {
               "kind": "field",
-              "name": "group",
+              "name": "model",
               "type": {
-                "text": "string | null"
+                "text": "Model | undefined"
               },
-              "default": "''",
-              "attribute": "group"
+              "attribute": "model"
             },
             {
               "kind": "field",
-              "name": "templates",
+              "name": "mode",
               "type": {
-                "text": "PalletItem[]"
+                "text": "SceneMode"
               },
-              "default": "[]"
+              "attribute": "mode"
             },
             {
               "kind": "field",
-              "name": "template",
+              "name": "screenSize",
               "type": {
-                "text": "PalletItem | any"
-              }
+                "text": "number"
+              },
+              "default": "13.3",
+              "attribute": "screenSize"
             },
             {
               "kind": "field",
-              "name": "detail",
+              "name": "variables",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "Properties"
+              },
+              "default": "{}",
+              "attribute": "variables"
             },
             {
               "kind": "field",
-              "name": "scopedElements",
-              "static": true,
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "findTemplate",
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "string | null | undefined"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "onHoverComponent",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "onClickTemplate",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "name": "data",
+              "type": {
+                "text": "any"
+              },
+              "attribute": "data"
             },
             {
-              "kind": "method",
-              "name": "templateIcon",
-              "parameters": [
-                {
-                  "name": "template",
-                  "type": {
-                    "text": "PalletItem"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "groups",
+              "kind": "field",
+              "name": "themes",
               "type": {
-                "text": "Pallet[]"
+                "text": "any | undefined"
               },
-              "default": "[]",
-              "fieldName": "groups"
+              "attribute": "themes"
             },
             {
-              "name": "scene",
+              "kind": "field",
+              "name": "fit",
               "type": {
-                "text": "Scene | null"
+                "text": "FITMODE"
               },
-              "default": "null",
-              "fieldName": "scene"
+              "default": "'none'",
+              "attribute": "fit"
             },
             {
-              "name": "group",
+              "kind": "field",
+              "name": "selected",
               "type": {
-                "text": "string | null"
+                "text": "Component[]"
               },
-              "default": "''",
-              "fieldName": "group"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ScopedElementsMixin",
-              "package": "@open-wc/scoped-elements"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ComponentMenu",
-          "declaration": {
-            "name": "ComponentMenu",
-            "module": "src/modeller/component-toolbar/component-menu.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/component-toolbar/component-toolbar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ComponentToolbar",
-          "members": [
+              "default": "[]",
+              "attribute": "selected"
+            },
             {
               "kind": "field",
-              "name": "componentGroupList",
+              "name": "disposeWhenDetached",
               "type": {
-                "text": "ComponentGroup[]"
+                "text": "boolean"
               },
-              "default": "[]",
-              "attribute": "componentGroupList"
+              "default": "false",
+              "attribute": "disposeWhenDetached"
             },
             {
               "kind": "field",
-              "name": "group",
+              "name": "baseUrl",
               "type": {
-                "text": "string | null | undefined"
+                "text": "string"
               },
-              "attribute": "group"
+              "default": "''",
+              "attribute": "baseUrl"
             },
             {
               "kind": "field",
-              "name": "scene",
+              "name": "provider",
               "type": {
-                "text": "Scene"
+                "text": "any"
               },
-              "attribute": "scene"
+              "attribute": "provider"
             },
             {
               "kind": "field",
-              "name": "mode",
+              "name": "name",
               "type": {
-                "text": "SCENE_MODE"
+                "text": "string"
               },
-              "attribute": "mode"
+              "default": "'noname'",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "shift",
+              "name": "enableInspector",
               "type": {
-                "text": "HTMLImageElement"
-              }
+                "text": "boolean"
+              },
+              "default": "true",
+              "attribute": "enableInspector"
             },
             {
               "kind": "field",
-              "name": "menu",
+              "name": "showInspector",
               "type": {
-                "text": "HTMLElement"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "attribute": "showInspector"
             },
             {
               "kind": "field",
-              "name": "componentsContainer",
+              "name": "lastOffsetWidth",
               "type": {
-                "text": "HTMLElement"
+                "text": "number | undefined"
               },
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "groups",
-              "type": {
-                "text": "NodeListOf<HTMLElement>"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "_setScene",
+              "parameters": [
+                {
+                  "name": "scene",
+                  "type": {
+                    "text": "Scene | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_setMode",
+              "parameters": [
+                {
+                  "name": "mode",
+                  "type": {
+                    "text": "SceneMode"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_setVariables",
+              "parameters": [
+                {
+                  "name": "variables",
+                  "type": {
+                    "text": "Properties"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_setSelected",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_disposeScene"
+            },
+            {
+              "kind": "method",
+              "name": "resize",
+              "parameters": [
+                {
+                  "name": "force",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "icons",
-              "type": {
-                "text": "{ [name: string]: string }"
-              },
-              "privacy": "private",
-              "default": "{}"
+              "kind": "method",
+              "name": "_onModelChanged",
+              "parameters": [
+                {
+                  "name": "model",
+                  "optional": true,
+                  "type": {
+                    "text": "Model"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "scopedElements",
-              "static": true,
-              "readonly": true
+              "kind": "method",
+              "name": "_onDisplayChanged",
+              "parameters": [
+                {
+                  "name": "screenSize",
+                  "type": {
+                    "text": "string | number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "onWheelEvent",
+              "name": "_onModeChanged",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "mode",
                   "type": {
-                    "text": "Event"
+                    "text": "SceneMode"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_setMode",
+              "name": "_onDataChanged",
               "parameters": [
                 {
-                  "name": "mode",
+                  "name": "data",
                   "type": {
-                    "text": "SCENE_MODE"
+                    "text": "any"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onClickShift",
+              "name": "_onSelectedChanged",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "after",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "Component[]"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onClickGroup",
+              "name": "_onSceneModeChanged",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "after",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "SceneMode"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onBaseUrlChanged",
+              "parameters": [
+                {
+                  "name": "after",
+                  "type": {
+                    "text": "string"
                   }
                 }
               ]
             }
           ],
           "events": [
+            {
+              "name": "scene-changed",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
             {
               "name": "mode-changed",
               "type": {
                 "text": "CustomEvent"
               }
+            },
+            {
+              "name": "variables-changed",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "selected-changed",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "componentGroupList",
+              "name": "scene",
               "type": {
-                "text": "ComponentGroup[]"
+                "text": "Scene | null"
               },
-              "default": "[]",
-              "fieldName": "componentGroupList"
+              "default": "null",
+              "fieldName": "scene"
             },
             {
-              "name": "group",
+              "name": "model",
               "type": {
-                "text": "string | null | undefined"
+                "text": "Model | undefined"
               },
-              "fieldName": "group"
+              "fieldName": "model"
             },
             {
-              "name": "scene",
+              "name": "mode",
               "type": {
-                "text": "Scene"
+                "text": "SceneMode"
               },
-              "fieldName": "scene"
+              "fieldName": "mode"
             },
             {
-              "name": "mode",
+              "name": "screenSize",
               "type": {
-                "text": "SCENE_MODE"
+                "text": "number"
               },
-              "fieldName": "mode"
-            }
-          ],
-          "mixins": [
+              "default": "13.3",
+              "fieldName": "screenSize"
+            },
             {
-              "name": "ScopedElementsMixin",
-              "package": "@open-wc/scoped-elements"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ComponentToolbar",
-          "declaration": {
-            "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": "` <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\" > <style type=\"text/css\"> .st0 { fill: {{strokeColor}}; } .st1 { fill: none; stroke: {{strokeColor}}; stroke-width: 0.75; stroke-linejoin: round; stroke-miterlimit: 10; } </style> <g> <polygon class=\"st0\" points=\"2.7,3.9 2.7,22.8 7.8,17.2 16.1,16.9 \" /> <path class=\"st1\" 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 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 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 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 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 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\" /> </g> </svg> `"
-        },
-        {
-          "kind": "variable",
-          "name": "ICON_SHIFT_MODE",
-          "default": "` <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\" > <style type=\"text/css\"> .st0 { fill: {{strokeColor}}; stroke: {{strokeColor}}; fill-rule: evenodd; clip-rule: evenodd; } .st1 { fill: {{strokeColor}}; stroke: {{strokeColor}}; stroke-width: 0.75; stroke-linejoin: round; stroke-miterlimit: 10; } </style> <g> <path class=\"st0\" 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 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 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 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 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 C6.7,22.7,7,23.2,7.8,23.2z\" /> <path class=\"st1\" 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 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 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 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 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 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\" /> </g> </svg> `"
-        }
-      ],
-      "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/scene-viewer/confidential-overlay.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ConfidentialOverlay",
-          "members": [
+              "name": "variables",
+              "type": {
+                "text": "Properties"
+              },
+              "default": "{}",
+              "fieldName": "variables"
+            },
             {
-              "kind": "method",
-              "name": "_draw",
-              "parameters": [
-                {
-                  "name": "context",
-                  "type": {
-                    "text": "CanvasRenderingContext2D"
-                  }
-                }
-              ]
-            }
-          ],
-          "superclass": {
-            "name": "SceneLayer",
-            "package": "@hatiolab/things-scene"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ConfidentialOverlay",
-            "module": "src/modeller/scene-viewer/confidential-overlay.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/scene-viewer/ox-scene-handler.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "OxSceneHandler",
-          "members": [
+              "name": "data",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "data"
+            },
             {
-              "kind": "field",
-              "name": "type",
+              "name": "themes",
               "type": {
-                "text": "string"
+                "text": "any | undefined"
+              },
+              "fieldName": "themes"
+            },
+            {
+              "name": "fit",
+              "type": {
+                "text": "FITMODE"
               },
-              "attribute": "type"
+              "default": "'none'",
+              "fieldName": "fit"
             },
             {
-              "kind": "field",
-              "name": "model",
+              "name": "selected",
               "type": {
-                "text": "{\n    type: Object\n    notify: true\n  }"
+                "text": "Component[]"
               },
-              "attribute": "model"
-            }
-          ],
-          "attributes": [
+              "default": "[]",
+              "fieldName": "selected"
+            },
             {
-              "name": "type",
+              "name": "disposeWhenDetached",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "fieldName": "type"
+              "default": "false",
+              "fieldName": "disposeWhenDetached"
             },
             {
-              "name": "model",
+              "name": "baseUrl",
               "type": {
-                "text": "{\n    type: Object\n    notify: true\n  }"
+                "text": "string"
               },
-              "fieldName": "model"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "ox-scene-handler",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "OxSceneHandler",
-            "module": "src/modeller/scene-viewer/ox-scene-handler.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "ox-scene-handler",
-          "declaration": {
-            "name": "OxSceneHandler",
-            "module": "src/modeller/scene-viewer/ox-scene-handler.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/scene-viewer/ox-scene-layer.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "OxSceneLayer",
-          "members": [
+              "default": "''",
+              "fieldName": "baseUrl"
+            },
             {
-              "kind": "field",
-              "name": "type",
+              "name": "provider",
               "type": {
-                "text": "String | undefined"
+                "text": "any"
               },
-              "attribute": "type"
+              "fieldName": "provider"
             },
             {
-              "kind": "field",
-              "name": "text",
+              "name": "name",
               "type": {
-                "text": "String | undefined"
+                "text": "string"
               },
-              "attribute": "text"
+              "default": "'noname'",
+              "fieldName": "name"
             },
             {
-              "kind": "method",
-              "name": "getModel"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
+              "name": "enableInspector",
               "type": {
-                "text": "String | undefined"
+                "text": "boolean"
               },
-              "fieldName": "type"
+              "default": "true",
+              "fieldName": "enableInspector"
             },
             {
-              "name": "text",
+              "name": "showInspector",
               "type": {
-                "text": "String | undefined"
+                "text": "boolean"
               },
-              "fieldName": "text"
+              "default": "false",
+              "fieldName": "showInspector"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "ox-scene-layer",
+          "tagName": "ox-scene-viewer",
           "customElement": true
         }
       ],
@@ -4900,180 +5437,154 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "OxSceneLayer",
-            "module": "src/modeller/scene-viewer/ox-scene-layer.ts"
+            "name": "OxSceneViewer",
+            "module": "src/modeller/scene-viewer/ox-scene-viewer.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "ox-scene-layer",
+          "name": "ox-scene-viewer",
           "declaration": {
-            "name": "OxSceneLayer",
-            "module": "src/modeller/scene-viewer/ox-scene-layer.ts"
+            "name": "OxSceneViewer",
+            "module": "src/modeller/scene-viewer/ox-scene-viewer.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/scene-viewer/ox-scene-property.ts",
+      "path": "src/modeller/property-sidebar/abstract-property.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "OxSceneProperty",
+          "name": "AbstractProperty",
           "members": [
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "name"
+              "kind": "method",
+              "name": "_onValueChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "value"
+              "kind": "method",
+              "name": "_getValueFromEventTarget",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "type"
+              "kind": "method",
+              "name": "_onAfterValueChange",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
             }
           ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "name"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "value"
-            },
+          "events": [
             {
-              "name": "type",
+              "name": "property-change",
               "type": {
-                "text": "string"
-              },
-              "fieldName": "type"
+                "text": "CustomEvent"
+              }
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "ox-scene-property",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "OxSceneProperty",
-            "module": "src/modeller/scene-viewer/ox-scene-property.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "ox-scene-property",
+          "name": "AbstractProperty",
           "declaration": {
-            "name": "OxSceneProperty",
-            "module": "src/modeller/scene-viewer/ox-scene-property.ts"
+            "name": "AbstractProperty",
+            "module": "src/modeller/property-sidebar/abstract-property.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/scene-viewer/ox-scene-viewer.ts",
+      "path": "src/modeller/property-sidebar/property-shared-style.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "OxSceneViewer",
-          "members": [
-            {
-              "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | null"
-              },
-              "default": "null",
-              "attribute": "scene"
-            },
-            {
-              "kind": "field",
-              "name": "model",
-              "type": {
-                "text": "Model | undefined"
-              },
-              "attribute": "model"
-            },
-            {
-              "kind": "field",
-              "name": "mode",
-              "type": {
-                "text": "SCENE_MODE"
-              },
-              "attribute": "mode"
-            },
-            {
-              "kind": "field",
-              "name": "screenSize",
-              "type": {
-                "text": "number"
-              },
-              "default": "13.3",
-              "attribute": "screenSize"
-            },
+          "kind": "variable",
+          "name": "PropertySharedStyle",
+          "default": "css` fieldset { border: none; margin: 4px; padding: 9px 4px 9px 4px; border-bottom: var(--property-sidebar-fieldset-border); color: var(--property-sidebar-fieldset-legend-color); font: var(--property-sidebar-fieldset-label); } fieldset legend { padding: 5px 0 0 5px; color: var(--property-sidebar-fieldset-legend-color); font: var(--property-sidebar-fieldset-legend); text-transform: capitalize; } select, input { border: var(--property-sidebar-fieldset-border); } ox-input-data { height: 300px; } /* property grid */ .property-grid { display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 5px; grid-auto-rows: minmax(24px, auto); align-items: center; } .property-grid > * { width: 100%; box-sizing: border-box; } .property-grid > label { grid-column: span 3; text-align: right; text-transform: capitalize; line-height: 2; } .property-grid > input, .property-grid > table, .property-grid > select, .property-grid > ox-input-angle, .property-grid > ox-buttons-radio, .property-grid > ox-input-color, [custom-editor] { grid-column: span 7; align-self: stretch; } .property-grid > .checkbox-row { grid-column: span 10; } .property-grid > .property-full-label { grid-column: span 3; text-align: right; text-transform: capitalize; } .property-grid > .property-half-label { grid-column: span 1; } .property-grid > .property-full-input { grid-column: span 7; } .property-grid > .property-half-input { grid-column: span 4; } /* checkbox-row */ .checkbox-row { display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 5px; grid-auto-rows: minmax(24px, auto); align-items: center; } .checkbox-row > input { grid-column: 4 / 5; } .checkbox-row > label { grid-column: span 6; text-align: left; } /* image resources */ .icon-only-label { grid-column: span 1; background: var(--url-icon-properties-label) no-repeat; float: left; margin: 0; align-self: stretch; } .icon-only-label.color { background-position: 100% -500px; } .icon-only-label.font-size { background-position: 100% -594px; } .icon-only-label.leading { background-position: 100% -696px; } .icon-only-label.hscale { background-position: 100% -296px; } .icon-only-label.vscale { background-position: 100% -396px; } .icon-only-label.linewidth { background-position: 100% -894px; } .icon-only-label.lineHeight { background-position: 100% -995px; } .icon-only-label.letterSpacing { background-position: 100% -1594px; } `"
+        }
+      ],
+      "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": "PropertySidebar",
+          "members": [
             {
               "kind": "field",
-              "name": "variables",
+              "name": "scene",
               "type": {
-                "text": "Properties"
+                "text": "Scene | null"
               },
-              "default": "{}",
-              "attribute": "variables"
+              "default": "null",
+              "attribute": "scene"
             },
             {
               "kind": "field",
-              "name": "data",
+              "name": "bounds",
               "type": {
                 "text": "any"
               },
-              "attribute": "data"
-            },
-            {
-              "kind": "field",
-              "name": "themes",
-              "type": {
-                "text": "any | undefined"
-              },
-              "attribute": "themes"
+              "default": "{}",
+              "attribute": "bounds"
             },
             {
               "kind": "field",
-              "name": "fit",
+              "name": "model",
               "type": {
-                "text": "FITMODE"
+                "text": "Model | null"
               },
-              "default": "'none'",
-              "attribute": "fit"
+              "default": "{}",
+              "attribute": "model"
             },
             {
               "kind": "field",
@@ -5086,123 +5597,100 @@
             },
             {
               "kind": "field",
-              "name": "disposeWhenDetached",
+              "name": "specificProps",
               "type": {
-                "text": "boolean"
+                "text": "any"
               },
-              "default": "false",
-              "attribute": "disposeWhenDetached"
+              "attribute": "specificProps"
             },
             {
               "kind": "field",
-              "name": "baseUrl",
+              "name": "tabName",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "attribute": "baseUrl"
+              "default": "'specific'",
+              "attribute": "tabName"
             },
             {
               "kind": "field",
-              "name": "provider",
+              "name": "collapsed",
               "type": {
-                "text": "any"
+                "text": "boolean"
               },
-              "attribute": "provider"
+              "default": "false",
+              "attribute": "collapsed"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "fonts",
               "type": {
-                "text": "string"
+                "text": "any[]"
               },
-              "default": "'noname'",
-              "attribute": "name"
+              "default": "[]",
+              "attribute": "fonts"
             },
             {
               "kind": "field",
-              "name": "enableInspector",
+              "name": "propertyEditor",
               "type": {
-                "text": "boolean"
+                "text": "any[]"
               },
-              "default": "true",
-              "attribute": "enableInspector"
+              "default": "[]",
+              "attribute": "propertyEditor"
             },
             {
               "kind": "field",
-              "name": "showInspector",
+              "name": "propertyTarget",
               "type": {
-                "text": "boolean"
+                "text": "Component | null"
               },
-              "default": "false",
-              "attribute": "showInspector"
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "lastOffsetWidth",
-              "type": {
-                "text": "number | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_setScene",
-              "parameters": [
-                {
-                  "name": "scene",
-                  "type": {
-                    "text": "Scene | null"
-                  }
-                }
-              ]
+              "name": "scopedElements",
+              "static": true,
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "_setMode",
+              "name": "_onPropertyChanged",
               "parameters": [
                 {
-                  "name": "mode",
+                  "name": "e",
                   "type": {
-                    "text": "SCENE_MODE"
+                    "text": "CustomEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_setVariables",
+              "name": "_onBoundsChanged",
               "parameters": [
                 {
-                  "name": "variables",
+                  "name": "e",
                   "type": {
-                    "text": "Properties"
+                    "text": "CustomEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_setSelected",
-              "parameters": [
-                {
-                  "name": "selected",
-                  "type": {
-                    "text": "Component[]"
-                  }
-                }
-              ]
+              "name": "_onChangedByScene"
             },
             {
               "kind": "method",
-              "name": "_disposeScene"
+              "name": "_setPropertyTargetAsDefault"
             },
             {
               "kind": "method",
-              "name": "resize",
+              "name": "_onCollapsed",
               "parameters": [
                 {
-                  "name": "force",
+                  "name": "collapsed",
                   "type": {
                     "text": "boolean"
                   }
@@ -5211,52 +5699,7 @@
             },
             {
               "kind": "method",
-              "name": "_onModelChanged",
-              "parameters": [
-                {
-                  "name": "model",
-                  "optional": true,
-                  "type": {
-                    "text": "Model"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onDisplayChanged",
-              "parameters": [
-                {
-                  "name": "screenSize",
-                  "type": {
-                    "text": "string | number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onModeChanged",
-              "parameters": [
-                {
-                  "name": "mode",
-                  "type": {
-                    "text": "SCENE_MODE"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onDataChanged",
-              "parameters": [
-                {
-                  "name": "data",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ]
+              "name": "_onSceneChanged"
             },
             {
               "kind": "method",
@@ -5272,115 +5715,53 @@
             },
             {
               "kind": "method",
-              "name": "_onSceneModeChanged",
+              "name": "_setPropertyTarget",
               "parameters": [
                 {
-                  "name": "after",
+                  "name": "newTarget",
                   "type": {
-                    "text": "SCENE_MODE"
+                    "text": "Component | null"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onBaseUrlChanged",
+              "name": "_setBounds",
               "parameters": [
                 {
-                  "name": "after",
+                  "name": "bounds",
                   "type": {
-                    "text": "string"
+                    "text": "BOUNDS"
                   }
                 }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "name": "scene-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "mode-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "variables-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "selected-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "scene",
-              "type": {
-                "text": "Scene | null"
-              },
-              "default": "null",
-              "fieldName": "scene"
-            },
-            {
-              "name": "model",
-              "type": {
-                "text": "Model | undefined"
-              },
-              "fieldName": "model"
-            },
-            {
-              "name": "mode",
-              "type": {
-                "text": "SCENE_MODE"
-              },
-              "fieldName": "mode"
-            },
-            {
-              "name": "screenSize",
-              "type": {
-                "text": "number"
-              },
-              "default": "13.3",
-              "fieldName": "screenSize"
-            },
+              ]
+            }
+          ],
+          "attributes": [
             {
-              "name": "variables",
+              "name": "scene",
               "type": {
-                "text": "Properties"
+                "text": "Scene | null"
               },
-              "default": "{}",
-              "fieldName": "variables"
+              "default": "null",
+              "fieldName": "scene"
             },
             {
-              "name": "data",
+              "name": "bounds",
               "type": {
                 "text": "any"
               },
-              "fieldName": "data"
-            },
-            {
-              "name": "themes",
-              "type": {
-                "text": "any | undefined"
-              },
-              "fieldName": "themes"
+              "default": "{}",
+              "fieldName": "bounds"
             },
             {
-              "name": "fit",
+              "name": "model",
               "type": {
-                "text": "FITMODE"
+                "text": "Model | null"
               },
-              "default": "'none'",
-              "fieldName": "fit"
+              "default": "{}",
+              "fieldName": "model"
             },
             {
               "name": "selected",
@@ -5391,138 +5772,259 @@
               "fieldName": "selected"
             },
             {
-              "name": "disposeWhenDetached",
+              "name": "specificProps",
               "type": {
-                "text": "boolean"
+                "text": "any"
               },
-              "default": "false",
-              "fieldName": "disposeWhenDetached"
+              "fieldName": "specificProps"
             },
             {
-              "name": "baseUrl",
+              "name": "tabName",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "fieldName": "baseUrl"
+              "default": "'specific'",
+              "fieldName": "tabName"
             },
             {
-              "name": "provider",
+              "name": "collapsed",
               "type": {
-                "text": "any"
+                "text": "boolean"
               },
-              "fieldName": "provider"
+              "default": "false",
+              "fieldName": "collapsed"
             },
             {
-              "name": "name",
+              "name": "fonts",
               "type": {
-                "text": "string"
+                "text": "any[]"
               },
-              "default": "'noname'",
-              "fieldName": "name"
+              "default": "[]",
+              "fieldName": "fonts"
             },
             {
-              "name": "enableInspector",
+              "name": "propertyEditor",
               "type": {
-                "text": "boolean"
+                "text": "any[]"
               },
-              "default": "true",
-              "fieldName": "enableInspector"
-            },
+              "default": "[]",
+              "fieldName": "propertyEditor"
+            }
+          ],
+          "mixins": [
             {
-              "name": "showInspector",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "showInspector"
+              "name": "ScopedElementsMixin",
+              "package": "@open-wc/scoped-elements"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "ox-scene-viewer",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "PropertySidebar",
           "declaration": {
-            "name": "OxSceneViewer",
-            "module": "src/modeller/scene-viewer/ox-scene-viewer.ts"
+            "name": "PropertySidebar",
+            "module": "src/modeller/property-sidebar/property-sidebar.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/component-toolbar/component-detail.ts",
+      "declarations": [
         {
-          "kind": "custom-element-definition",
-          "name": "ox-scene-viewer",
+          "kind": "class",
+          "description": "",
+          "name": "ComponentDetail",
+          "members": [
+            {
+              "kind": "field",
+              "name": "template",
+              "type": {
+                "text": "{ about: string } | null"
+              },
+              "default": "null",
+              "attribute": "template"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "template",
+              "type": {
+                "text": "{ about: string } | null"
+              },
+              "default": "null",
+              "fieldName": "template"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ComponentDetail",
           "declaration": {
-            "name": "OxSceneViewer",
-            "module": "src/modeller/scene-viewer/ox-scene-viewer.ts"
+            "name": "ComponentDetail",
+            "module": "src/modeller/component-toolbar/component-detail.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/abstract-property.ts",
+      "path": "src/modeller/component-toolbar/component-menu.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "AbstractProperty",
+          "name": "ComponentMenu",
           "members": [
+            {
+              "kind": "field",
+              "name": "groups",
+              "type": {
+                "text": "Pallet[]"
+              },
+              "default": "[]",
+              "attribute": "groups"
+            },
+            {
+              "kind": "field",
+              "name": "scene",
+              "type": {
+                "text": "Scene | null"
+              },
+              "default": "null",
+              "attribute": "scene"
+            },
+            {
+              "kind": "field",
+              "name": "group",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "''",
+              "attribute": "group"
+            },
+            {
+              "kind": "field",
+              "name": "templates",
+              "type": {
+                "text": "PalletItem[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "template",
+              "type": {
+                "text": "PalletItem | any"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "detail",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "scopedElements",
+              "static": true,
+              "readonly": true
+            },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "findTemplate",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "type",
                   "type": {
-                    "text": "Event"
+                    "text": "string | null | undefined"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_getValueFromEventTarget",
+              "name": "onHoverComponent",
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "e",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onAfterValueChange",
+              "name": "onClickTemplate",
               "parameters": [
                 {
-                  "name": "key",
+                  "name": "e",
                   "type": {
-                    "text": "string"
+                    "text": "MouseEvent"
                   }
-                },
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "templateIcon",
+              "parameters": [
                 {
-                  "name": "value",
+                  "name": "template",
                   "type": {
-                    "text": "any"
+                    "text": "PalletItem"
                   }
                 }
               ]
             }
           ],
-          "events": [
+          "attributes": [
             {
-              "name": "property-change",
+              "name": "groups",
               "type": {
-                "text": "CustomEvent"
-              }
+                "text": "Pallet[]"
+              },
+              "default": "[]",
+              "fieldName": "groups"
+            },
+            {
+              "name": "scene",
+              "type": {
+                "text": "Scene | null"
+              },
+              "default": "null",
+              "fieldName": "scene"
+            },
+            {
+              "name": "group",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "''",
+              "fieldName": "group"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ScopedElementsMixin",
+              "package": "@open-wc/scoped-elements"
             }
           ],
           "superclass": {
@@ -5535,131 +6037,95 @@
       "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` fieldset { border: none; margin: 4px; padding: 9px 4px 9px 4px; border-bottom: var(--property-sidebar-fieldset-border); color: var(--property-sidebar-fieldset-legend-color); font: var(--property-sidebar-fieldset-label); } fieldset legend { padding: 5px 0 0 5px; color: var(--property-sidebar-fieldset-legend-color); font: var(--property-sidebar-fieldset-legend); text-transform: capitalize; } select, input { border: var(--property-sidebar-fieldset-border); } ox-input-data { height: 300px; } /* property grid */ .property-grid { display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 5px; grid-auto-rows: minmax(24px, auto); align-items: center; } .property-grid > * { width: 100%; box-sizing: border-box; } .property-grid > label { grid-column: span 3; text-align: right; text-transform: capitalize; line-height: 2; } .property-grid > input, .property-grid > table, .property-grid > select, .property-grid > ox-input-angle, .property-grid > ox-buttons-radio, .property-grid > ox-input-color, [custom-editor] { grid-column: span 7; align-self: stretch; } .property-grid > .checkbox-row { grid-column: span 10; } .property-grid > .property-full-label { grid-column: span 3; text-align: right; text-transform: capitalize; } .property-grid > .property-half-label { grid-column: span 1; } .property-grid > .property-full-input { grid-column: span 7; } .property-grid > .property-half-input { grid-column: span 4; } /* checkbox-row */ .checkbox-row { display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 5px; grid-auto-rows: minmax(24px, auto); align-items: center; } .checkbox-row > input { grid-column: 4 / 5; } .checkbox-row > label { grid-column: span 6; text-align: left; } /* image resources */ .icon-only-label { grid-column: span 1; background: var(--url-icon-properties-label) no-repeat; float: left; margin: 0; align-self: stretch; } .icon-only-label.color { background-position: 100% -500px; } .icon-only-label.font-size { background-position: 100% -594px; } .icon-only-label.leading { background-position: 100% -696px; } .icon-only-label.hscale { background-position: 100% -296px; } .icon-only-label.vscale { background-position: 100% -396px; } .icon-only-label.linewidth { background-position: 100% -894px; } .icon-only-label.lineHeight { background-position: 100% -995px; } .icon-only-label.letterSpacing { background-position: 100% -1594px; } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PropertySharedStyle",
+          "name": "ComponentMenu",
           "declaration": {
-            "name": "PropertySharedStyle",
-            "module": "src/modeller/property-sidebar/property-shared-style.ts"
+            "name": "ComponentMenu",
+            "module": "src/modeller/component-toolbar/component-menu.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": "SceneMode"
               },
-              "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",
@@ -5669,160 +6135,90 @@
             },
             {
               "kind": "method",
-              "name": "_onPropertyChanged",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onBoundsChanged",
+              "name": "onWheelEvent",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onChangedByScene"
-            },
-            {
-              "kind": "method",
-              "name": "_setPropertyTargetAsDefault"
-            },
-            {
-              "kind": "method",
-              "name": "_onCollapsed",
-              "parameters": [
-                {
-                  "name": "collapsed",
-                  "type": {
-                    "text": "boolean"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onSceneChanged"
-            },
-            {
-              "kind": "method",
-              "name": "_onSelectedChanged",
+              "name": "_setMode",
               "parameters": [
                 {
-                  "name": "after",
+                  "name": "mode",
                   "type": {
-                    "text": "Component[]"
+                    "text": "SceneMode"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_setPropertyTarget",
+              "name": "_onClickShift",
               "parameters": [
                 {
-                  "name": "newTarget",
+                  "name": "e",
                   "type": {
-                    "text": "Component | null"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_setBounds",
+              "name": "_onClickGroup",
               "parameters": [
                 {
-                  "name": "bounds",
+                  "name": "e",
                   "type": {
-                    "text": "BOUNDS"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             }
           ],
-          "attributes": [
-            {
-              "name": "scene",
-              "type": {
-                "text": "Scene | null"
-              },
-              "default": "null",
-              "fieldName": "scene"
-            },
-            {
-              "name": "bounds",
-              "type": {
-                "text": "any"
-              },
-              "default": "{}",
-              "fieldName": "bounds"
-            },
+          "events": [
             {
-              "name": "model",
+              "name": "mode-changed",
               "type": {
-                "text": "Model | null"
-              },
-              "default": "{}",
-              "fieldName": "model"
-            },
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "name": "selected",
+              "name": "componentGroupList",
               "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": "SceneMode"
               },
-              "default": "[]",
-              "fieldName": "propertyEditor"
+              "fieldName": "mode"
             }
           ],
           "mixins": [
@@ -5841,10 +6237,44 @@
       "exports": [
         {
           "kind": "js",
-          "name": "PropertySidebar",
+          "name": "ComponentToolbar",
+          "declaration": {
+            "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": "` <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\" > <style type=\"text/css\"> .st0 { fill: {{strokeColor}}; } .st1 { fill: none; stroke: {{strokeColor}}; stroke-width: 0.75; stroke-linejoin: round; stroke-miterlimit: 10; } </style> <g> <polygon class=\"st0\" points=\"2.7,3.9 2.7,22.8 7.8,17.2 16.1,16.9 \" /> <path class=\"st1\" 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 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 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 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 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 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\" /> </g> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "ICON_SHIFT_MODE",
+          "default": "` <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\" > <style type=\"text/css\"> .st0 { fill: {{strokeColor}}; stroke: {{strokeColor}}; fill-rule: evenodd; clip-rule: evenodd; } .st1 { fill: {{strokeColor}}; stroke: {{strokeColor}}; stroke-width: 0.75; stroke-linejoin: round; stroke-miterlimit: 10; } </style> <g> <path class=\"st0\" 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 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 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 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 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 C6.7,22.7,7,23.2,7.8,23.2z\" /> <path class=\"st1\" 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 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 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 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 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 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\" /> </g> </svg> `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ICON_EDIT_MODE",
           "declaration": {
-            "name": "PropertySidebar",
-            "module": "src/modeller/property-sidebar/property-sidebar.ts"
+            "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"
           }
         }
       ]
@@ -6366,6 +6796,246 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/inspector/inspector.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SceneInspector",
+          "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",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "count",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "-1"
+            },
+            {
+              "kind": "method",
+              "name": "disconnectScene",
+              "parameters": [
+                {
+                  "name": "scene",
+                  "optional": true,
+                  "type": {
+                    "text": "Scene"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "refresh"
+            },
+            {
+              "kind": "method",
+              "name": "_onclick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_ondblclick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "extendedMap",
+              "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",
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                },
+                {
+                  "name": "append",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "shouldBeShown",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                },
+                {
+                  "name": "counting",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderComponent",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                },
+                {
+                  "name": "depth",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "scene",
+              "type": {
+                "text": "Scene | undefined"
+              },
+              "fieldName": "scene"
+            }
+          ],
+          "superclass": {
+            "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",
@@ -7178,246 +7848,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/inspector/inspector.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SceneInspector",
-          "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",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "count",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "-1"
-            },
-            {
-              "kind": "method",
-              "name": "disconnectScene",
-              "parameters": [
-                {
-                  "name": "scene",
-                  "optional": true,
-                  "type": {
-                    "text": "Scene"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "refresh"
-            },
-            {
-              "kind": "method",
-              "name": "_onclick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_ondblclick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "extendedMap",
-              "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",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                },
-                {
-                  "name": "append",
-                  "default": "false",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "shouldBeShown",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                },
-                {
-                  "name": "counting",
-                  "default": "false",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderComponent",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                },
-                {
-                  "name": "depth",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "fieldName": "scene"
-            }
-          ],
-          "superclass": {
-            "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/specifics/specific-properties-builder.ts",
@@ -7802,12 +8232,16 @@
               "attribute": "fonts"
             },
             {
-              "kind": "field",
-              "name": "fontAvailable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "kind": "method",
+              "name": "onButtonGroupClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",