@fmsim/board 2.0.0-beta.2 → 2.0.0-beta.21

package/custom-elements.json

@@ -31,6 +31,30 @@
             "module": "./data-storage/data-storage.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "PlaybackEngine",
+          "declaration": {
+            "name": "PlaybackEngine",
+            "module": "./playback/playback-engine.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BoardModelCache",
+          "declaration": {
+            "name": "BoardModelCache",
+            "module": "./data-storage/board-model-cache.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CachedBoard",
+          "declaration": {
+            "name": "CachedBoard",
+            "module": "./data-storage/board-model-cache.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -603,6 +627,14 @@
               },
               "attribute": "scene"
             },
+            {
+              "kind": "field",
+              "name": "loadTracker",
+              "type": {
+                "text": "LoadTracker | undefined"
+              },
+              "attribute": "loadTracker"
+            },
             {
               "kind": "field",
               "name": "componentGroupList",
@@ -664,6 +696,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_loadingOverlay",
+              "type": {
+                "text": "LoadingOverlay | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "scopedElements",
@@ -794,6 +834,13 @@
               },
               "fieldName": "scene"
             },
+            {
+              "name": "loadTracker",
+              "type": {
+                "text": "LoadTracker | undefined"
+              },
+              "fieldName": "loadTracker"
+            },
             {
               "name": "componentGroupList",
               "type": {
@@ -912,6 +959,15 @@
               },
               "attribute": "values"
             },
+            {
+              "kind": "field",
+              "name": "loadTracker",
+              "type": {
+                "text": "LoadTracker | undefined"
+              },
+              "description": "앱에서 미리 생성한 LoadTracker — fetch 시작 전 생성하면 네트워크 시간도 추적",
+              "attribute": "loadTracker"
+            },
             {
               "kind": "field",
               "name": "hideFullscreen",
@@ -956,6 +1012,14 @@
               },
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "_loadingOverlay",
+              "type": {
+                "text": "LoadingOverlay | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_oldtarget",
@@ -971,6 +1035,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 +1090,7 @@
             },
             {
               "kind": "field",
-              "name": "_fullscreen",
+              "name": "_fabGroup",
               "type": {
                 "text": "HTMLElement"
               }
@@ -1077,6 +1165,11 @@
               "kind": "field",
               "name": "fmbResetAnimation"
             },
+            {
+              "kind": "field",
+              "name": "_pointerMoveHandler",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "initSceneAsync"
@@ -1085,6 +1178,24 @@
               "kind": "method",
               "name": "initScene"
             },
+            {
+              "kind": "method",
+              "name": "_ensureOverlay",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tracker",
+                  "type": {
+                    "text": "LoadTracker"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "closeScene"
@@ -1170,6 +1281,84 @@
               "kind": "method",
               "name": "onTapFullscreen"
             },
+            {
+              "kind": "method",
+              "name": "onTapToggle3D"
+            },
+            {
+              "kind": "field",
+              "name": "_playbackEngine",
+              "type": {
+                "text": "PlaybackEngine | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onTapPlayback"
+            },
+            {
+              "kind": "method",
+              "name": "_onPlaybackStart",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onPlaybackPause",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onPlaybackResume",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onPlaybackStop",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onPlaybackSeek",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onPlaybackSpeed",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_fetchPlaybackData",
+              "type": {
+                "text": "(startTime: string, endTime: string) => Promise<any> | undefined"
+              },
+              "description": "페이지에서 주입하는 playback 데이터 fetch 함수"
+            },
             {
               "kind": "method",
               "name": "onRunBoard"
@@ -1360,6 +1549,24 @@
             }
           ],
           "events": [
+            {
+              "name": "playback-toggle",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "playback-live-pause",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "playback-live-resume",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
             {
               "name": "run-board",
               "type": {
@@ -1406,6 +1613,14 @@
               },
               "fieldName": "values"
             },
+            {
+              "name": "loadTracker",
+              "type": {
+                "text": "LoadTracker | undefined"
+              },
+              "description": "앱에서 미리 생성한 LoadTracker — fetch 시작 전 생성하면 네트워크 시간도 추적",
+              "fieldName": "loadTracker"
+            },
             {
               "name": "hide-fullscreen",
               "type": {
@@ -1467,6 +1682,14 @@
               },
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "boardName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "popup",
@@ -1475,6 +1698,19 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_resolveName",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "id",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_onInputChanged",
@@ -1545,24 +1781,415 @@
     },
     {
       "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",
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_formatTime",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "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"
                   }
@@ -1810,7 +2437,7 @@
           "type": {
             "text": "ComponentGroup"
           },
-          "default": "{ name: 'etc', description: 'a group of components that have not yet been defined.', icon, templates: [ { type: 'rect', description: 'rectangle shape', icon: rect, group: 'shape', model: { type: 'rect', left: 100, top: 100, width: 100, height: 100, fillStyle: '#fff', strokeStyle: '#000', alpha: 1, hidden: false, lineWidth: 1, lineDash: 'solid', lineCap: 'butt' } }, { type: 'ellipse', description: 'ellipse shape', icon: ellipse, group: 'shape', model: { type: 'ellipse', rx: 50, ry: 50, cx: 150, cy: 150, fillStyle: '#fff', strokeStyle: '#000', alpha: 1, hidden: false, lineWidth: 1, lineDash: 'solid', lineCap: 'butt' } }, { type: 'triangle', description: 'triangle shape', icon: triangle, group: 'shape', model: { type: 'triangle', x1: 150, y1: 100, x2: 100, y2: 200, x3: 200, y3: 200, fillStyle: '#fff', strokeStyle: '#000', alpha: 1, hidden: false, lineWidth: 1, lineDash: 'solid', lineCap: 'butt' } }, { type: 'line', description: 'simple line', icon: lineIcon, group: 'line', model: { type: 'line', x1: 100, y1: 100, x2: 200, y2: 200, fillStyle: '#fff', strokeStyle: '#000', alpha: 1, hidden: false, lineWidth: 3, lineDash: 'solid', lineCap: 'butt' } }, { type: 'dash', description: 'dash line', icon: dash, group: 'line', model: { type: 'line', x1: 100, y1: 100, x2: 200, y2: 200, fillStyle: '#fff', strokeStyle: '#000', alpha: 1, hidden: false, lineWidth: 3, lineDash: 'round-dot', lineCap: 'butt' } }, { type: 'container', description: 'container shape', icon: container, group: 'container', model: { type: 'container', left: 100, top: 100, width: 400, height: 300, fillStyle: '#fff', strokeStyle: '#999', alpha: 1, hidden: false, lineWidth: 1, lineDash: 'solid', lineCap: 'butt' } }, { type: 'popup', description: 'popup window', icon: popup, group: 'container', model: { type: 'popup', left: 100, top: 100, width: 100, height: 100, fillStyle: '#fff', strokeStyle: 'DarkGoldenRod' } } ] }"
+          "default": "{ name: 'etc', description: 'a group of components that have not yet been defined.', icon, templates: [ { type: 'rect', description: 'rectangle shape', icon: rect, group: 'shape', model: { type: 'rect', left: 100, top: 100, width: 100, height: 100, fillStyle: '#fff', strokeStyle: '#000', alpha: 1, hidden: false, lineWidth: 1, lineDash: 'solid', lineCap: 'butt' } }, { type: 'ellipse', description: 'ellipse shape', icon: ellipse, group: 'shape', model: { type: 'ellipse', rx: 50, ry: 50, cx: 150, cy: 150, fillStyle: '#fff', strokeStyle: '#000', alpha: 1, hidden: false, lineWidth: 1, lineDash: 'solid', lineCap: 'butt' } }, { type: 'triangle', description: 'triangle shape', icon: triangle, group: 'shape', model: { type: 'triangle', x1: 150, y1: 100, x2: 100, y2: 200, x3: 200, y3: 200, fillStyle: '#fff', strokeStyle: '#000', alpha: 1, hidden: false, lineWidth: 1, lineDash: 'solid', lineCap: 'butt' } }, { type: 'line', description: 'simple line', icon: lineIcon, group: 'line', model: { type: 'line', x1: 100, y1: 100, x2: 200, y2: 200, fillStyle: '#fff', strokeStyle: '#000', alpha: 1, hidden: false, lineWidth: 3, lineDash: 'solid', lineCap: 'butt' } }, { type: 'dash', description: 'dash line', icon: dash, group: 'line', model: { type: 'line', x1: 100, y1: 100, x2: 200, y2: 200, fillStyle: '#fff', strokeStyle: '#000', alpha: 1, hidden: false, lineWidth: 3, lineDash: 'round-dot', lineCap: 'butt' } }, { type: 'container', description: 'container shape', icon: container, group: 'container', model: { type: 'container', left: 100, top: 100, width: 400, height: 300, fillStyle: '#fff', strokeStyle: '#999', alpha: 1, hidden: false, lineWidth: 1, lineDash: 'solid', lineCap: 'butt' } }, { type: 'popup', description: 'popup window', icon: popup, group: 'container', model: { type: 'popup', left: 100, top: 100, width: 100, height: 100, fillStyle: '#fff', strokeStyle: 'DarkGoldenRod' } }, { type: 'floor-plate', description: 'floor plate for multi-story layout', icon: rect, group: '3d', model: { type: 'floor-plate', left: 100, top: 100, width: 500, height: 500, depth: 2, fillStyle: '#e8e8e8', strokeStyle: '#999999', alpha: 0.7 } } ] }"
         }
       ],
       "exports": [
@@ -2922,29 +3549,158 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/data-storage/data-storage.ts",
+      "path": "src/data-storage/board-model-cache.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DataStorage",
+          "name": "BoardModelCache",
           "members": [
-            {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "id"
-            },
             {
               "kind": "method",
-              "name": "load",
-              "privacy": "public",
+              "name": "get",
+              "static": true,
               "return": {
                 "type": {
-                  "text": "Promise<any>"
+                  "text": "Promise<CachedBoard | null>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "boardId",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "put",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "boardId",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "model",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "updatedAt",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "isValid",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "Promise<boolean>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "boardId",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "serverUpdatedAt",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "remove",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "boardId",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "clear",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BoardModelCache",
+          "declaration": {
+            "name": "BoardModelCache",
+            "module": "src/data-storage/board-model-cache.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>"
                 }
               },
               "parameters": [
@@ -3246,7 +4002,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": [
@@ -3297,121 +4053,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",
+              "name": "_dimension",
               "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "aligners",
-              "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"
             },
@@ -3468,6 +4130,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "id",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "onExecute",
@@ -3550,18 +4231,57 @@
             },
             {
               "kind": "method",
-              "name": "onSelectedChanged",
+              "name": "_onDimensionChanged",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "after",
+                  "name": "dimension",
                   "type": {
-                    "text": "Component[]"
+                    "text": "'2d' | '3d'"
                   }
-                },
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onGizmoAttachChanged",
+              "privacy": "private",
+              "parameters": [
                 {
-                  "name": "before",
+                  "name": "isAttached",
                   "type": {
-                    "text": "Component[]"
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_setGizmoMode",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "mode",
+                  "type": {
+                    "text": "'translate' | 'rotate' | 'scale'"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onSelectedChanged",
+              "parameters": [
+                {
+                  "name": "after",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                },
+                {
+                  "name": "before",
+                  "type": {
+                    "text": "Component[]"
                   }
                 }
               ]
@@ -3574,6 +4294,14 @@
               "kind": "method",
               "name": "onTapRedo"
             },
+            {
+              "kind": "method",
+              "name": "onStartStylePasteMode"
+            },
+            {
+              "kind": "method",
+              "name": "onStartDatabindPasteMode"
+            },
             {
               "kind": "method",
               "name": "onTapCut"
@@ -3754,238 +4482,667 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/selector/board-creation-popup.ts",
+      "path": "src/playback/playback-engine.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "BoardCreationPopup",
+          "name": "PlaybackEngine",
           "members": [
             {
               "kind": "field",
-              "name": "defaultGroup",
+              "name": "_state",
               "type": {
-                "text": "string | undefined"
+                "text": "PlaybackState"
               },
-              "attribute": "defaultGroup"
+              "privacy": "private",
+              "default": "'idle'"
             },
             {
               "kind": "field",
-              "name": "groups",
+              "name": "_frames",
               "type": {
-                "text": "{ id: string; name: string }[] | undefined"
+                "text": "MergedFrame[]"
               },
-              "attribute": "groups"
+              "privacy": "private",
+              "default": "[]"
             },
             {
-              "kind": "method",
-              "name": "onClickSubmit"
-            }
-          ],
-          "events": [
-            {
-              "name": "create-board",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "defaultGroup",
+              "kind": "field",
+              "name": "_currentIndex",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "fieldName": "defaultGroup"
+              "privacy": "private",
+              "default": "0"
             },
             {
-              "name": "groups",
+              "kind": "field",
+              "name": "_timer",
               "type": {
-                "text": "{ id: string; name: string }[] | undefined"
+                "text": "number | undefined"
               },
-              "fieldName": "groups"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "localize(i18next)",
-              "module": "src/selector/board-creation-popup.ts"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "board-creation-popup",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BoardCreationPopup",
-          "declaration": {
-            "name": "BoardCreationPopup",
-            "module": "src/selector/board-creation-popup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "board-creation-popup",
-          "declaration": {
-            "name": "BoardCreationPopup",
-            "module": "src/selector/board-creation-popup.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/selector/board-thumbnail-card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "BoardThumbnailCard",
-          "members": [
+              "privacy": "private"
+            },
             {
               "kind": "field",
-              "name": "defaultGroup",
+              "name": "_speed",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "attribute": "defaultGroup"
+              "privacy": "private",
+              "default": "1"
             },
             {
               "kind": "field",
-              "name": "groups",
+              "name": "_scene",
               "type": {
-                "text": "{ id: string; name: string }[] | undefined"
+                "text": "any"
               },
-              "attribute": "groups"
+              "privacy": "private",
+              "default": "null"
             },
             {
-              "kind": "method",
-              "name": "onClickFlip",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_scenarioNames",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "default": "[]"
             },
             {
-              "kind": "method",
-              "name": "onClickSubmit",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_listeners",
+              "privacy": "private",
+              "default": "new Map<string, Set<Function>>()"
             },
             {
-              "kind": "method",
-              "name": "reset"
-            }
-          ],
-          "events": [
-            {
-              "name": "create-board",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "defaultGroup",
+              "kind": "field",
+              "name": "state",
               "type": {
-                "text": "string | undefined"
+                "text": "PlaybackState"
               },
-              "fieldName": "defaultGroup"
+              "readonly": true
             },
             {
-              "name": "groups",
+              "kind": "field",
+              "name": "currentIndex",
               "type": {
-                "text": "{ id: string; name: string }[] | undefined"
+                "text": "number"
               },
-              "fieldName": "groups"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "localize(i18next)",
-              "module": "src/selector/board-thumbnail-card.ts"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "board-thumbnail-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BoardThumbnailCard",
-          "declaration": {
-            "name": "BoardThumbnailCard",
-            "module": "src/selector/board-thumbnail-card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "board-thumbnail-card",
-          "declaration": {
-            "name": "BoardThumbnailCard",
-            "module": "src/selector/board-thumbnail-card.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/selector/ox-board-creation-card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "BoardCreationCard",
-          "members": [
+              "readonly": true
+            },
             {
               "kind": "field",
-              "name": "defaultGroup",
+              "name": "totalFrames",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "attribute": "defaultGroup"
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "groups",
+              "name": "currentTime",
               "type": {
-                "text": "any"
+                "text": "string | null"
               },
-              "attribute": "groups"
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "popup",
+              "name": "scenarioNames",
               "type": {
-                "text": "any"
+                "text": "string[]"
               },
-              "privacy": "private"
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "onClick"
+              "name": "loadData",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "scenarios",
+                  "type": {
+                    "text": "PlaybackScenario[]"
+                  }
+                }
+              ],
+              "description": "데이터 로드. fetchPlayback을 외부에서 호출하여 결과를 전달한다."
+            },
+            {
+              "kind": "method",
+              "name": "attachScene",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "scene",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "detachScene",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "play",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "speed",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "pause",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resume",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stop",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setSpeed",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "speed",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "seekTo",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "time",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "description": "특정 시간으로 이동.\n해당 시간 이하의 가장 가까운 프레임을 찾고,\nsnapshot부터 그 프레임까지 누적 적용한다."
+            },
+            {
+              "kind": "method",
+              "name": "on",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "PlaybackListener<K>"
+                  }
+                }
+              ],
+              "description": "이벤트 리스너 등록"
+            },
+            {
+              "kind": "method",
+              "name": "off",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "PlaybackListener<K>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "dispose",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_startTimer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_stopTimer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_applyCurrentFrame",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_applyFrame",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_emitFrame",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_setState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "PlaybackState"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_emit",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "detail",
+                  "type": {
+                    "text": "PlaybackEventMap[K]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_formatTime",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PlaybackEngine",
+          "declaration": {
+            "name": "PlaybackEngine",
+            "module": "src/playback/playback-engine.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/selector/board-creation-popup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BoardCreationPopup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultGroup",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "defaultGroup"
+            },
+            {
+              "kind": "field",
+              "name": "groups",
+              "type": {
+                "text": "{ id: string; name: string }[] | undefined"
+              },
+              "attribute": "groups"
+            },
+            {
+              "kind": "method",
+              "name": "onClickSubmit"
+            }
+          ],
+          "events": [
+            {
+              "name": "create-board",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "defaultGroup",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "defaultGroup"
+            },
+            {
+              "name": "groups",
+              "type": {
+                "text": "{ id: string; name: string }[] | undefined"
+              },
+              "fieldName": "groups"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "localize(i18next)",
+              "module": "src/selector/board-creation-popup.ts"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "board-creation-popup",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BoardCreationPopup",
+          "declaration": {
+            "name": "BoardCreationPopup",
+            "module": "src/selector/board-creation-popup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "board-creation-popup",
+          "declaration": {
+            "name": "BoardCreationPopup",
+            "module": "src/selector/board-creation-popup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/selector/board-thumbnail-card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BoardThumbnailCard",
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultGroup",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "defaultGroup"
+            },
+            {
+              "kind": "field",
+              "name": "groups",
+              "type": {
+                "text": "{ id: string; name: string }[] | undefined"
+              },
+              "attribute": "groups"
+            },
+            {
+              "kind": "method",
+              "name": "onClickFlip",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onClickSubmit",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "reset"
+            }
+          ],
+          "events": [
+            {
+              "name": "create-board",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "defaultGroup",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "defaultGroup"
+            },
+            {
+              "name": "groups",
+              "type": {
+                "text": "{ id: string; name: string }[] | undefined"
+              },
+              "fieldName": "groups"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "localize(i18next)",
+              "module": "src/selector/board-thumbnail-card.ts"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "board-thumbnail-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BoardThumbnailCard",
+          "declaration": {
+            "name": "BoardThumbnailCard",
+            "module": "src/selector/board-thumbnail-card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "board-thumbnail-card",
+          "declaration": {
+            "name": "BoardThumbnailCard",
+            "module": "src/selector/board-thumbnail-card.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/selector/ox-board-creation-card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BoardCreationCard",
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultGroup",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "defaultGroup"
+            },
+            {
+              "kind": "field",
+              "name": "groups",
+              "type": {
+                "text": "any"
+              },
+              "attribute": "groups"
+            },
+            {
+              "kind": "field",
+              "name": "popup",
+              "type": {
+                "text": "any"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onClick"
             },
             {
               "kind": "method",
@@ -5513,6 +6670,14 @@
               },
               "attribute": "provider"
             },
+            {
+              "kind": "field",
+              "name": "loadTracker",
+              "type": {
+                "text": "LoadTracker | undefined"
+              },
+              "attribute": "loadTracker"
+            },
             {
               "kind": "field",
               "name": "name",
@@ -5816,6 +6981,13 @@
               },
               "fieldName": "provider"
             },
+            {
+              "name": "loadTracker",
+              "type": {
+                "text": "LoadTracker | undefined"
+              },
+              "fieldName": "loadTracker"
+            },
             {
               "name": "name",
               "type": {
@@ -6956,580 +8128,571 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/inspector/inspector.ts",
+      "path": "src/modeller/property-sidebar/specifics/specific-properties-builder.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SceneInspector",
+          "name": "SpecificPropertiesBuilder",
           "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",
+              "name": "value",
               "type": {
                 "text": "any"
               },
-              "privacy": "private"
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "show",
+              "name": "props",
               "type": {
-                "text": "boolean"
+                "text": "any[]"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "[]",
+              "attribute": "props"
             },
             {
               "kind": "field",
-              "name": "count",
+              "name": "propertyEditor",
               "type": {
-                "text": "number"
+                "text": "any"
               },
-              "privacy": "private",
-              "default": "-1"
+              "attribute": "propertyEditor"
             },
             {
               "kind": "method",
-              "name": "disconnectScene",
+              "name": "_onPropsChanged",
               "parameters": [
                 {
-                  "name": "scene",
-                  "optional": true,
+                  "name": "props",
                   "type": {
-                    "text": "Scene"
+                    "text": "any[]"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "refresh"
+              "name": "_setValues"
             },
             {
               "kind": "method",
-              "name": "_onclick",
+              "name": "_onValueChanged",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "Event"
                   }
                 }
               ]
+            }
+          ],
+          "events": [
+            {
+              "name": "property-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "value"
             },
             {
-              "kind": "method",
-              "name": "_ondblclick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "name": "props",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "fieldName": "props"
+            },
+            {
+              "name": "propertyEditor",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "propertyEditor"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SpecificPropertiesBuilder",
+          "declaration": {
+            "name": "SpecificPropertiesBuilder",
+            "module": "src/modeller/property-sidebar/specifics/specific-properties-builder.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/specifics/specifics.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PropertySpecific",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "any"
+              },
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "extendedMap",
-              "readonly": true
+              "name": "scene",
+              "type": {
+                "text": "Scene | null"
+              },
+              "default": "null",
+              "attribute": "scene"
             },
             {
-              "kind": "method",
-              "name": "getNodeHandleClass",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "Component[]"
+              },
+              "default": "[]",
+              "attribute": "selected"
+            },
+            {
+              "kind": "field",
+              "name": "props",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "attribute": "props"
+            },
+            {
+              "kind": "field",
+              "name": "propertyEditor",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "attribute": "propertyEditor"
+            },
+            {
+              "kind": "field",
+              "name": "boundINeedSelected",
+              "type": {
+                "text": "any"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "scopedElements",
+              "static": true,
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "isExtended",
+              "name": "_onValueChange",
               "parameters": [
                 {
-                  "name": "component",
+                  "name": "e",
                   "type": {
-                    "text": "Component"
+                    "text": "Event"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "toggleExtended",
+              "name": "_isIdentifiable",
               "parameters": [
                 {
-                  "name": "component",
+                  "name": "selected",
                   "type": {
-                    "text": "Component"
+                    "text": "Component[]"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "toggleHidden",
+              "name": "_hasTextProperty",
               "parameters": [
                 {
-                  "name": "component",
+                  "name": "selected",
                   "type": {
-                    "text": "Component"
+                    "text": "Component[]"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "selectComponent",
+              "name": "_onINeedSelected",
               "parameters": [
                 {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                },
-                {
-                  "name": "append",
-                  "default": "false",
+                  "name": "e",
                   "type": {
-                    "text": "boolean"
+                    "text": "CustomEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "shouldBeShown",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
+              "name": "_getValueFromEventTarget",
               "parameters": [
                 {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                },
-                {
-                  "name": "counting",
-                  "default": "false",
+                  "name": "element",
                   "type": {
-                    "text": "boolean"
+                    "text": "HTMLElement"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "renderComponent",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
+              "name": "_onAfterValueChange",
               "parameters": [
                 {
-                  "name": "component",
+                  "name": "key",
                   "type": {
-                    "text": "Component"
+                    "text": "string"
                   }
                 },
                 {
-                  "name": "depth",
+                  "name": "value",
                   "type": {
-                    "text": "number"
+                    "text": "any"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
             }
           ],
           "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "value"
+            },
             {
               "name": "scene",
               "type": {
-                "text": "Scene | undefined"
+                "text": "Scene | null"
               },
+              "default": "null",
               "fieldName": "scene"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "Component[]"
+              },
+              "default": "[]",
+              "fieldName": "selected"
+            },
+            {
+              "name": "props",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "fieldName": "props"
+            },
+            {
+              "name": "propertyEditor",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "fieldName": "propertyEditor"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ScopedElementsMixin",
+              "package": "@open-wc/scoped-elements"
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "AbstractProperty",
+            "module": "/src/modeller/property-sidebar/abstract-property"
           },
-          "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/shapes/box-padding-editor-styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "BoxPaddingEditorStyles",
-          "default": "css` .box-padding { width: 100%; } .box-padding td { background: var(--url-icon-properties-padding) 50% 0 no-repeat; } .box-padding tr:nth-child(1), .box-padding tr:nth-child(3) { height: 20px; } .box-padding tr td:nth-child(1), .box-padding tr td:nth-child(3) { width: 18px; } .box-padding .slide1 { background-position: 0 0; } .box-padding .slide2 { background-position: 50% -40px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide3 { background-position: 100% -440px; } .box-padding .slide4 { background-position: 0 -360px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide5 { background: none; text-align: center; } .box-padding .slide6 { background-position: 100% -160px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide7 { background-position: 0 100%; } .box-padding .slide8 { background-position: 50% -320px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide9 { background-position: 0 0px; } .box-padding input { background-color: transparent; width: 35px; margin: 0px; padding: 0px; clear: both; float: initial; border: 1px solid #fff; border-width: 0 0 1px 0; text-align: right; font-size: 14px; } .slide5 input:nth-child(1), .slide5 input:nth-child(4) { display: block; margin: auto; } .slide5 input:nth-child(2) { float: left; } .slide5 input:nth-child(3) { float: right; margin-top: -25px; } .slide5 input:nth-child(4) { margin-top: -5px; } `"
+          "events": [
+            {
+              "name": "property-change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BoxPaddingEditorStyles",
+          "name": "PropertySpecific",
           "declaration": {
-            "name": "BoxPaddingEditorStyles",
-            "module": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts"
+            "name": "PropertySpecific",
+            "module": "src/modeller/property-sidebar/specifics/specifics.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/shapes/shapes.ts",
+      "path": "src/modeller/property-sidebar/inspector/inspector.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertyShapes",
+          "name": "SceneInspector",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "scene",
               "type": {
-                "text": "Properties | undefined"
+                "text": "Scene | undefined"
               },
-              "attribute": "value"
+              "attribute": "scene"
             },
             {
               "kind": "field",
-              "name": "bounds",
+              "name": "searchText",
               "type": {
-                "text": "BOUNDS | null"
+                "text": "string"
               },
-              "default": "null",
-              "attribute": "bounds"
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "_extendedMap",
               "type": {
-                "text": "Component[]"
+                "text": "any"
               },
-              "default": "[]",
-              "attribute": "selected"
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_onValueChange",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              "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": "_hasTextProperty",
+              "name": "disconnectScene",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "scene",
+                  "optional": true,
                   "type": {
-                    "text": "Component[]"
+                    "text": "Scene"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_hasProperties",
+              "name": "refresh"
+            },
+            {
+              "kind": "method",
+              "name": "_onclick",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "e",
                   "type": {
-                    "text": "Component[]"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_isIdentifiable",
+              "name": "_ondblclick",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "e",
                   "type": {
-                    "text": "Component[]"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "extendedMap",
+              "readonly": true
+            },
             {
               "kind": "method",
-              "name": "_isClassIdentifiable",
+              "name": "getNodeHandleClass",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "component",
                   "type": {
-                    "text": "Component[]"
+                    "text": "Component"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_isLine",
+              "name": "isExtended",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "component",
                   "type": {
-                    "text": "Component[]"
+                    "text": "Component"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_is3dish",
+              "name": "toggleExtended",
               "parameters": [
                 {
-                  "name": "selected",
+                  "name": "component",
                   "type": {
-                    "text": "Component[]"
+                    "text": "Component"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_getValueFromEventTarget",
+              "name": "toggleHidden",
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "component",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "Component"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "_onAfterValueChange",
+              "name": "selectComponent",
               "parameters": [
                 {
-                  "name": "key",
+                  "name": "component",
                   "type": {
-                    "text": "string"
+                    "text": "Component"
                   }
                 },
                 {
-                  "name": "value",
+                  "name": "append",
+                  "default": "false",
                   "type": {
-                    "text": "any"
+                    "text": "boolean"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "bounds-change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "property-change",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "bounds",
-              "type": {
-                "text": "BOUNDS | null"
-              },
-              "default": "null",
-              "fieldName": "bounds"
-            },
-            {
-              "name": "selected",
-              "type": {
-                "text": "Component[]"
-              },
-              "default": "[]",
-              "fieldName": "selected"
-            }
-          ],
-          "superclass": {
-            "name": "AbstractProperty",
-            "module": "/src/modeller/property-sidebar/abstract-property"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PropertyShapes",
-          "declaration": {
-            "name": "PropertyShapes",
-            "module": "src/modeller/property-sidebar/shapes/shapes.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/specifics/specific-properties-builder.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SpecificPropertiesBuilder",
-          "members": [
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "any"
-              },
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "props",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "attribute": "props"
-            },
-            {
-              "kind": "field",
-              "name": "propertyEditor",
-              "type": {
-                "text": "any"
-              },
-              "attribute": "propertyEditor"
+              ]
             },
             {
               "kind": "method",
-              "name": "_onPropsChanged",
+              "name": "shouldBeShown",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
               "parameters": [
                 {
-                  "name": "props",
+                  "name": "component",
                   "type": {
-                    "text": "any[]"
+                    "text": "Component"
+                  }
+                },
+                {
+                  "name": "counting",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_setValues"
-            },
-            {
-              "kind": "method",
-              "name": "_onValueChanged",
+              "name": "renderComponent",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "component",
                   "type": {
-                    "text": "Event"
+                    "text": "Component"
+                  }
+                },
+                {
+                  "name": "depth",
+                  "type": {
+                    "text": "number"
                   }
                 }
               ]
             }
           ],
-          "events": [
-            {
-              "name": "property-change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
           "attributes": [
             {
-              "name": "value",
-              "type": {
-                "text": "any"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "props",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "fieldName": "props"
-            },
-            {
-              "name": "propertyEditor",
+              "name": "scene",
               "type": {
-                "text": "any"
+                "text": "Scene | undefined"
               },
-              "fieldName": "propertyEditor"
+              "fieldName": "scene"
             }
           ],
           "superclass": {
@@ -7542,22 +8705,22 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SpecificPropertiesBuilder",
+          "name": "SceneInspector",
           "declaration": {
-            "name": "SpecificPropertiesBuilder",
-            "module": "src/modeller/property-sidebar/specifics/specific-properties-builder.ts"
+            "name": "SceneInspector",
+            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/specifics/specifics.ts",
+      "path": "src/modeller/property-sidebar/styles/styles.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertySpecific",
+          "name": "PropertyStyles",
           "members": [
             {
               "kind": "field",
@@ -7565,61 +8728,30 @@
               "type": {
                 "text": "any"
               },
+              "default": "{}",
               "attribute": "value"
             },
-            {
-              "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | null"
-              },
-              "default": "null",
-              "attribute": "scene"
-            },
             {
               "kind": "field",
               "name": "selected",
               "type": {
-                "text": "Component[]"
-              },
-              "default": "[]",
-              "attribute": "selected"
-            },
-            {
-              "kind": "field",
-              "name": "props",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "attribute": "props"
-            },
-            {
-              "kind": "field",
-              "name": "propertyEditor",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "attribute": "propertyEditor"
-            },
-            {
-              "kind": "field",
-              "name": "boundINeedSelected",
-              "type": {
-                "text": "any"
+                "text": "Component[]"
               },
-              "privacy": "private"
+              "default": "[]",
+              "attribute": "selected"
             },
             {
               "kind": "field",
-              "name": "scopedElements",
-              "static": true,
-              "readonly": true
+              "name": "fonts",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "attribute": "fonts"
             },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "onButtonGroupClick",
               "parameters": [
                 {
                   "name": "e",
@@ -7627,27 +8759,11 @@
                     "text": "Event"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_isIdentifiable",
-              "parameters": [
-                {
-                  "name": "selected",
-                  "type": {
-                    "text": "Component[]"
-                  }
-                }
               ]
             },
             {
               "kind": "method",
-              "name": "_hasTextProperty",
+              "name": "_isLine",
               "parameters": [
                 {
                   "name": "selected",
@@ -7659,15 +8775,19 @@
             },
             {
               "kind": "method",
-              "name": "_onINeedSelected",
+              "name": "_onValueChange",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "Event"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
             },
             {
               "kind": "method",
@@ -7714,16 +8834,9 @@
               "type": {
                 "text": "any"
               },
+              "default": "{}",
               "fieldName": "value"
             },
-            {
-              "name": "scene",
-              "type": {
-                "text": "Scene | null"
-              },
-              "default": "null",
-              "fieldName": "scene"
-            },
             {
               "name": "selected",
               "type": {
@@ -7733,31 +8846,17 @@
               "fieldName": "selected"
             },
             {
-              "name": "props",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "fieldName": "props"
-            },
-            {
-              "name": "propertyEditor",
+              "name": "fonts",
               "type": {
                 "text": "any[]"
               },
               "default": "[]",
-              "fieldName": "propertyEditor"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ScopedElementsMixin",
-              "package": "@open-wc/scoped-elements"
+              "fieldName": "fonts"
             }
           ],
           "superclass": {
             "name": "AbstractProperty",
-            "module": "/src/modeller/property-sidebar/abstract-property"
+            "module": "/src/modeller/property-sidebar/abstract-property.js"
           },
           "events": [
             {
@@ -7776,57 +8875,133 @@
       "exports": [
         {
           "kind": "js",
-          "name": "PropertySpecific",
+          "name": "PropertyStyles",
           "declaration": {
-            "name": "PropertySpecific",
-            "module": "src/modeller/property-sidebar/specifics/specifics.ts"
+            "name": "PropertyStyles",
+            "module": "src/modeller/property-sidebar/styles/styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/styles/styles.ts",
+      "path": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "BoxPaddingEditorStyles",
+          "default": "css` .box-padding { width: 100%; } .box-padding td { background: var(--url-icon-properties-padding) 50% 0 no-repeat; } .box-padding tr:nth-child(1), .box-padding tr:nth-child(3) { height: 20px; } .box-padding tr td:nth-child(1), .box-padding tr td:nth-child(3) { width: 18px; } .box-padding .slide1 { background-position: 0 0; } .box-padding .slide2 { background-position: 50% -40px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide3 { background-position: 100% -440px; } .box-padding .slide4 { background-position: 0 -360px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide5 { background: none; text-align: center; } .box-padding .slide6 { background-position: 100% -160px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide7 { background-position: 0 100%; } .box-padding .slide8 { background-position: 50% -320px; background-color: rgba(69, 46, 41, 0.2); } .box-padding .slide9 { background-position: 0 0px; } .box-padding input { background-color: transparent; width: 35px; margin: 0px; padding: 0px; clear: both; float: initial; border: 1px solid #fff; border-width: 0 0 1px 0; text-align: right; font-size: 14px; } .slide5 input:nth-child(1), .slide5 input:nth-child(4) { display: block; margin: auto; } .slide5 input:nth-child(2) { float: left; } .slide5 input:nth-child(3) { float: right; margin-top: -25px; } .slide5 input:nth-child(4) { margin-top: -5px; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BoxPaddingEditorStyles",
+          "declaration": {
+            "name": "BoxPaddingEditorStyles",
+            "module": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/shapes/shapes.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertyStyles",
+          "name": "PropertyShapes",
           "members": [
             {
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "any"
+                "text": "Properties | undefined"
               },
-              "default": "{}",
               "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "bounds",
               "type": {
-                "text": "Component[]"
+                "text": "BOUNDS | null"
               },
-              "default": "[]",
-              "attribute": "selected"
+              "default": "null",
+              "attribute": "bounds"
             },
             {
               "kind": "field",
-              "name": "fonts",
+              "name": "selected",
               "type": {
-                "text": "any[]"
+                "text": "Component[]"
               },
               "default": "[]",
-              "attribute": "fonts"
+              "attribute": "selected"
             },
             {
-              "kind": "field",
-              "name": "fontAvailable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "kind": "method",
+              "name": "_onValueChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_hasTextProperty",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_hasProperties",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isIdentifiable",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isClassIdentifiable",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -7842,19 +9017,15 @@
             },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "_is3dish",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "selected",
                   "type": {
-                    "text": "Event"
+                    "text": "Component[]"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              ]
             },
             {
               "kind": "method",
@@ -7895,57 +9066,62 @@
               }
             }
           ],
+          "events": [
+            {
+              "name": "bounds-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "property-change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "value",
               "type": {
-                "text": "any"
+                "text": "Properties | undefined"
               },
-              "default": "{}",
               "fieldName": "value"
             },
             {
-              "name": "selected",
+              "name": "bounds",
               "type": {
-                "text": "Component[]"
+                "text": "BOUNDS | null"
               },
-              "default": "[]",
-              "fieldName": "selected"
+              "default": "null",
+              "fieldName": "bounds"
             },
             {
-              "name": "fonts",
+              "name": "selected",
               "type": {
-                "text": "any[]"
+                "text": "Component[]"
               },
               "default": "[]",
-              "fieldName": "fonts"
+              "fieldName": "selected"
             }
           ],
           "superclass": {
             "name": "AbstractProperty",
-            "module": "/src/modeller/property-sidebar/abstract-property.js"
-          },
-          "events": [
-            {
-              "name": "property-change",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            }
-          ]
+            "module": "/src/modeller/property-sidebar/abstract-property"
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "PropertyStyles",
+          "name": "PropertyShapes",
           "declaration": {
-            "name": "PropertyStyles",
-            "module": "src/modeller/property-sidebar/styles/styles.ts"
+            "name": "PropertyShapes",
+            "module": "src/modeller/property-sidebar/shapes/shapes.ts"
           }
         }
       ]