diff --git a/info/1111111111111.jpg b/info/1111111111111.jpg
new file mode 100644
index 0000000..a1ef491
Binary files /dev/null and b/info/1111111111111.jpg differ
diff --git a/info/迁移目标.md b/info/迁移目标.md
new file mode 100644
index 0000000..11fb17f
--- /dev/null
+++ b/info/迁移目标.md
@@ -0,0 +1,21 @@
+1. 脚本系统  支持编写代码脚本进行逻辑交互支持(升级后的)
+
+2. GLTF轻量化工具 对GLTF格式模型进行轻量化处理，轻量化率达50%以上(升级后的)
+
+3. 数据组件 支持注册数据源，并驱动模型进行可视化展示
+
+4. 分包打包 支持ktx2等格式纹理打包，拥有更快的打包速度和更小的包体积(升级后的)
+
+5. 离线包 导出和加载场景离线包，支持项目二次开发
+
+6. 扩展3D对象 热力图、U面板、动态路径、水池
+
+
+```text
+把 Astral项目的  Astral/3d/editor/src/views/editor/components/extraPane/resource/builtin/Expansion.vue 
+迁移到 TkAstral3D/packages/editor/src/views/editor/components/extraPane/resource/builtin 下
+要保证扩展中所有相关功能正常
+
+```
+
+
diff --git a/packages/docs/src/.vuepress/navbar.ts b/packages/docs/src/.vuepress/navbar.ts
index eb975bb..d6f084c 100644
--- a/packages/docs/src/.vuepress/navbar.ts
+++ b/packages/docs/src/.vuepress/navbar.ts
@@ -7,10 +7,10 @@ export const navbar = defineNavbarConfig([
         icon: 'icon-park-outline:guide-board',
         link: '/notes/guide/quick-start/介绍.md',
     },
-    { text: 'SDK', link: '/notes/sdk/README.md', icon: 'carbon:api' },
+    { text: 'SDK', link: '/notes/sdk/迁移目标.md', icon: 'carbon:api' },
     { text: '示例', link: 'https://examples.astraljs.com/', icon: 'carbon:carbon-for-ibm-dotcom' },
-    { text: '推广中心', link: '/notes/promotion/README.md', icon: 'mdi:star-shooting-outline' },
-    { text: '商务合作', link: '/notes/cooperation/README.md', icon: 'carbon:partnership' },
+    { text: '推广中心', link: '/notes/promotion/迁移目标.md', icon: 'mdi:star-shooting-outline' },
+    { text: '商务合作', link: '/notes/cooperation/迁移目标.md', icon: 'carbon:partnership' },
     {
         text: '更多',
         icon: 'icon-park-outline:more-three',
@@ -22,8 +22,8 @@ export const navbar = defineNavbarConfig([
         text: `${version}`,
         icon: 'codicon:versions',
         items: [
-            { 
-                text: '更新日志', 
+            {
+                text: '更新日志',
                 link: '/notes/update/logs/',
             }
         ],
diff --git a/packages/editor/public/static/images/resource/expansion/heatmap/flatHeatmap.jpg b/packages/editor/public/static/images/resource/expansion/heatmap/flatHeatmap.jpg
new file mode 100644
index 0000000..12d0a3c
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/heatmap/flatHeatmap.jpg differ
diff --git a/packages/editor/public/static/images/resource/expansion/heatmap/heightHeatmap.jpg b/packages/editor/public/static/images/resource/expansion/heatmap/heightHeatmap.jpg
new file mode 100644
index 0000000..0e82169
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/heatmap/heightHeatmap.jpg differ
diff --git a/packages/editor/public/static/images/resource/expansion/path/diffuse.jpg b/packages/editor/public/static/images/resource/expansion/path/diffuse.jpg
new file mode 100644
index 0000000..eeb444d
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/path/diffuse.jpg differ
diff --git a/packages/editor/public/static/images/resource/expansion/path/flow.png b/packages/editor/public/static/images/resource/expansion/path/flow.png
new file mode 100644
index 0000000..cf391fb
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/path/flow.png differ
diff --git a/packages/editor/public/static/images/resource/expansion/path/light.png b/packages/editor/public/static/images/resource/expansion/path/light.png
new file mode 100644
index 0000000..c3d18a2
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/path/light.png differ
diff --git a/packages/editor/public/static/images/resource/expansion/uipanel/uipanel.svg b/packages/editor/public/static/images/resource/expansion/uipanel/uipanel.svg
new file mode 100644
index 0000000..df3f769
--- /dev/null
+++ b/packages/editor/public/static/images/resource/expansion/uipanel/uipanel.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
+  <rect width="256" height="256" fill="#121212"/>
+  <rect x="24" y="24" width="208" height="208" rx="18" fill="#1f1f1f" stroke="#2d2d2d" stroke-width="4"/>
+  <rect x="40" y="40" width="176" height="56" rx="12" fill="#00b6a4"/>
+  <rect x="40" y="108" width="176" height="84" rx="12" fill="#262626"/>
+  <text x="128" y="78" text-anchor="middle" font-size="28" font-family="Arial, sans-serif" fill="#ffffff">UIPanel</text>
+  <text x="128" y="156" text-anchor="middle" font-size="18" font-family="Arial, sans-serif" fill="#cfd8dc">WYSIWYG</text>
+</svg>
diff --git a/packages/editor/public/static/images/resource/expansion/water/circularWaterSurface.jpg b/packages/editor/public/static/images/resource/expansion/water/circularWaterSurface.jpg
new file mode 100644
index 0000000..141433c
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/water/circularWaterSurface.jpg differ
diff --git a/packages/editor/public/static/images/resource/expansion/water/cylinderWaterPool.jpg b/packages/editor/public/static/images/resource/expansion/water/cylinderWaterPool.jpg
new file mode 100644
index 0000000..be1d78a
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/water/cylinderWaterPool.jpg differ
diff --git a/packages/editor/public/static/images/resource/expansion/water/cylinderWaterPoolVolume.jpg b/packages/editor/public/static/images/resource/expansion/water/cylinderWaterPoolVolume.jpg
new file mode 100644
index 0000000..51abc9e
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/water/cylinderWaterPoolVolume.jpg differ
diff --git a/packages/editor/public/static/images/resource/expansion/water/squareWaterPool.jpg b/packages/editor/public/static/images/resource/expansion/water/squareWaterPool.jpg
new file mode 100644
index 0000000..a4c5964
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/water/squareWaterPool.jpg differ
diff --git a/packages/editor/public/static/images/resource/expansion/water/squareWaterPoolVolume.jpg b/packages/editor/public/static/images/resource/expansion/water/squareWaterPoolVolume.jpg
new file mode 100644
index 0000000..7bc3fde
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/water/squareWaterPoolVolume.jpg differ
diff --git a/packages/editor/public/static/images/resource/expansion/water/squareWaterSurface.jpg b/packages/editor/public/static/images/resource/expansion/water/squareWaterSurface.jpg
new file mode 100644
index 0000000..ebedf22
Binary files /dev/null and b/packages/editor/public/static/images/resource/expansion/water/squareWaterSurface.jpg differ
diff --git a/packages/editor/src/language/zh-CN-en-US.ts b/packages/editor/src/language/zh-CN-en-US.ts
index 9892eed..ecf9ebb 100644
--- a/packages/editor/src/language/zh-CN-en-US.ts
+++ b/packages/editor/src/language/zh-CN-en-US.ts
@@ -1081,6 +1081,24 @@ export default {
               // 其他
               'Dragon':"龙",
             },
+            "Expansion": "扩展",
+            expansion: {
+                "Heat map": "热力图",
+                "Path": "路径",
+                "Flat heatmap": "平面热力图",
+                "Elevation heatmap": "高程热力图",
+                "Flow path": "流动路径",
+                "Flowing light path": "流光路径",
+                "Tube path": "管道路径",
+                "UI Panel": "UI面板",
+                "Water": "水体",
+                "Circular Water Surface": "圆形水面",
+                "Cylinder Water Pool": "圆柱水池",
+                "Cylinder Water Pool Volume": "圆柱水池体",
+                "Square Water Surface": "方形水面",
+                "Square Water Pool": "方形水池",
+                "Square Water Pool Volume": "方形水池体",
+            },
             "Light": '灯光',
             "Camera": '相机',
         }
diff --git a/packages/editor/src/views/editor/components/extraPane/resource/builtin/Expansion.vue b/packages/editor/src/views/editor/components/extraPane/resource/builtin/Expansion.vue
new file mode 100644
index 0000000..e11b93d
--- /dev/null
+++ b/packages/editor/src/views/editor/components/extraPane/resource/builtin/Expansion.vue
@@ -0,0 +1,641 @@
+<template>
+  <div id="extra-resource-expansion" class="flex flex-col">
+    <div class="mb-3 flex flex-wrap items-center gap-2">
+      <n-button
+        v-for="subCategory in subCategories"
+        :key="subCategory.key"
+        strong
+        secondary
+        round
+        :type="activeSubCategory === subCategory.key ? 'primary' : 'default'"
+        @click="selectSubCategory(subCategory.key)"
+      >
+        {{ subCategory.name }}
+      </n-button>
+    </div>
+
+    <div class="flex-1 overflow-y-auto">
+      <div class="grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-3">
+        <n-card
+          size="small"
+          hoverable
+          v-for="item in filteredList"
+          :key="item.key"
+          @contextmenu.prevent="handlePreview(item)"
+          @dblclick="addToScene(item)"
+          draggable="true"
+          @dragstart="dragStart(item)"
+          @dragend="dragEnd"
+        >
+          <template #cover>
+            <img :src="item.image" :alt="item.key" draggable="false" class="w-full object-fill" />
+          </template>
+          <n-tooltip placement="bottom" trigger="hover">
+            <template #trigger>{{ getItemName(item) }}</template>
+            <span>{{ getItemName(item) }}</span>
+          </n-tooltip>
+        </n-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, inject, computed, nextTick } from "vue";
+import type { Ref } from "vue";
+import { Box3, Vector3, type Object3D } from "three";
+import { cpt } from "@/language";
+import { useDragStore } from "@/store/modules/drag";
+import { screenToWorld } from "@/utils/common/scenes";
+import { App, AddObjectCommand, Heatmap, Path, UIPanel, Water, type Preview } from "@astral3d/engine";
+
+interface ExpansionItem {
+  key: string;
+  image: string;
+  name: any;
+  options: Record<string, any>;
+}
+
+const searchText = inject("searchText") as Ref<string>;
+const previewInfo = inject("previewInfo") as any;
+const previewRef = inject("previewRef") as any;
+
+const activeSubCategory = ref("heatmap");
+const subCategories = ref([
+  {key: "heatmap", name: cpt("extra.resource.expansion.Heat map")},
+  {key: "path", name: cpt("extra.resource.expansion.Path")},
+  {key: "uipanel", name: cpt("extra.resource.expansion.UI Panel")},
+  {key: "water", name: cpt("extra.resource.expansion.Water")},
+]);
+
+const pathPreviewPoints = [
+  {x: -3.5, y: 0, z: -1.8},
+  {x: -1.8, y: 0, z: 1.2},
+  {x: 0.4, y: 0, z: -0.8},
+  {x: 2.4, y: 0, z: 1.6},
+  {x: 3.6, y: 0, z: -0.4},
+];
+const pathPreviewPoints3D = [
+  {x: -3.2, y: 0.2, z: -1.4},
+  {x: -1.6, y: 1.1, z: 1.0},
+  {x: 0.3, y: 0.4, z: -0.6},
+  {x: 2.1, y: 1.3, z: 1.4},
+  {x: 3.1, y: 0.5, z: -0.3},
+];
+
+const allList: Record<string, ExpansionItem[]> = {
+  heatmap: [
+    {
+      key: "flatHeatmap",
+      image: "/static/images/resource/expansion/heatmap/flatHeatmap.jpg",
+      name: cpt("extra.resource.expansion.Flat heatmap"),
+      options: {
+        mode: "flat",
+        heatmap: {
+          maxOpacity: 0.8,
+          minOpacity: 0,
+        },
+        data: {
+          max: 5,
+          min: 0,
+          points: [
+            {x: 0, y: 0, value: 5, radius: 1.6},
+            {x: 0.9, y: -0.5, value: 4.4, radius: 1.2},
+            {x: -0.8, y: 0.9, value: 4.0, radius: 1.1},
+            {x: 1.6, y: 0.8, value: 3.6, radius: 0.9},
+            {x: -1.7, y: -0.9, value: 3.2, radius: 0.9},
+            {x: 0.2, y: 1.8, value: 2.8, radius: 0.8},
+            {x: -0.4, y: -2.1, value: 4.6, radius: 0.8},
+            {x: 2.6, y: -1.9, value: 2.9, radius: 0.9},
+            {x: -2.4, y: 2.1, value: 3.7, radius: 0.9},
+            {x: 3.2, y: 2.9, value: 3.8, radius: 1.1},
+            {x: 4.1, y: 2.1, value: 3.0, radius: 0.9},
+            {x: 2.4, y: 3.9, value: 2.4, radius: 0.8},
+            {x: 4.5, y: 3.4, value: 3.8, radius: 0.7},
+            {x: -3.4, y: -2.7, value: 3.1, radius: 0.9},
+            {x: -4.2, y: -2.1, value: 2.3, radius: 0.8},
+            {x: -2.6, y: -3.9, value: 2.0, radius: 0.7},
+            {x: -4.6, y: -3.6, value: 1.4, radius: 0.6},
+            {x: -1.3, y: 3.1, value: 2.2, radius: 0.8},
+            {x: 1.5, y: 2.6, value: 2.7, radius: 0.8},
+            {x: 3.0, y: -3.7, value: 1.9, radius: 0.7},
+            {x: 4.2, y: -3.4, value: 4.4, radius: 0.6},
+            {x: -4.4, y: 1.4, value: 4.6, radius: 0.6},
+            {x: -3.7, y: 2.5, value: 2.1, radius: 0.7},
+            {x: -2.0, y: 4.4, value: 3.3, radius: 0.6},
+            {x: 0.0, y: 4.6, value: 1.2, radius: 0.6},
+            {x: 4.6, y: 0.2, value: 3.5, radius: 0.6},
+            {x: -4.8, y: 0.1, value: 4.0, radius: 0.5},
+            {x: 0.3, y: -4.5, value: 3.1, radius: 0.6},
+            {x: 1.8, y: -4.1, value: 1.4, radius: 0.6},
+            {x: -1.7, y: -4.2, value: 4.6, radius: 0.6},
+            {x: 3.6, y: -1.2, value: 2.5, radius: 0.8},
+            {x: -3.2, y: 0.6, value: 2.7, radius: 0.8},
+            {x: 0.0, y: -2.6, value: 4.3, radius: 0.8},
+            {x: -0.6, y: 2.2, value: 2.9, radius: 0.8},
+            {x: 2.4, y: 0.4, value: 3.1, radius: 0.9},
+            {x: -2.8, y: -0.6, value: 2.4, radius: 0.8},
+            {x: 1.0, y: 4.2, value: 4.6, radius: 0.6},
+            {x: -4.1, y: 4.1, value: 5.0, radius: 0.5},
+          ],
+        },
+      },
+    },
+    {
+      key: "heightHeatmap",
+      image: "/static/images/resource/expansion/heatmap/heightHeatmap.jpg",
+      name: cpt("extra.resource.expansion.Elevation heatmap"),
+      options: {
+        mode: "height",
+        data: {
+          max: 5,
+          min: 0,
+          points: [
+            {x: 0, y: 0, value: 5, radius: 1.6},
+            {x: 0.9, y: -0.5, value: 4.4, radius: 1.2},
+            {x: -0.8, y: 0.9, value: 4.0, radius: 1.1},
+            {x: 1.6, y: 0.8, value: 3.6, radius: 0.9},
+            {x: -1.7, y: -0.9, value: 3.2, radius: 0.9},
+            {x: 0.2, y: 1.8, value: 2.8, radius: 0.8},
+            {x: -0.4, y: -2.1, value: 4.6, radius: 0.8},
+            {x: 2.6, y: -1.9, value: 2.9, radius: 0.9},
+            {x: -2.4, y: 2.1, value: 3.7, radius: 0.9},
+            {x: 3.2, y: 2.9, value: 3.8, radius: 1.1},
+            {x: 4.1, y: 2.1, value: 3.0, radius: 0.9},
+            {x: 2.4, y: 3.9, value: 2.4, radius: 0.8},
+            {x: 4.5, y: 3.4, value: 3.8, radius: 0.7},
+            {x: -3.4, y: -2.7, value: 3.1, radius: 0.9},
+            {x: -4.2, y: -2.1, value: 2.3, radius: 0.8},
+            {x: -2.6, y: -3.9, value: 2.0, radius: 0.7},
+            {x: -4.6, y: -3.6, value: 1.4, radius: 0.6},
+            {x: -1.3, y: 3.1, value: 2.2, radius: 0.8},
+            {x: 1.5, y: 2.6, value: 2.7, radius: 0.8},
+            {x: 3.0, y: -3.7, value: 1.9, radius: 0.7},
+            {x: 4.2, y: -3.4, value: 4.4, radius: 0.6},
+            {x: -4.4, y: 1.4, value: 4.6, radius: 0.6},
+            {x: -3.7, y: 2.5, value: 2.1, radius: 0.7},
+            {x: -2.0, y: 4.4, value: 3.3, radius: 0.6},
+            {x: 0.0, y: 4.6, value: 1.2, radius: 0.6},
+            {x: 4.6, y: 0.2, value: 3.5, radius: 0.6},
+            {x: -4.8, y: 0.1, value: 4.0, radius: 0.5},
+            {x: 0.3, y: -4.5, value: 3.1, radius: 0.6},
+            {x: 1.8, y: -4.1, value: 1.4, radius: 0.6},
+            {x: -1.7, y: -4.2, value: 4.6, radius: 0.6},
+            {x: 3.6, y: -1.2, value: 2.5, radius: 0.8},
+            {x: -3.2, y: 0.6, value: 2.7, radius: 0.8},
+            {x: 0.0, y: -2.6, value: 4.3, radius: 0.8},
+            {x: -0.6, y: 2.2, value: 2.9, radius: 0.8},
+            {x: 2.4, y: 0.4, value: 3.1, radius: 0.9},
+            {x: -2.8, y: -0.6, value: 2.4, radius: 0.8},
+            {x: 1.0, y: 4.2, value: 4.6, radius: 0.6},
+            {x: -4.1, y: 4.1, value: 5.0, radius: 0.5},
+          ],
+        },
+      },
+    },
+  ],
+  path: [
+    {
+      key: "flowPath",
+      image: "/static/images/resource/expansion/path/flow.png",
+      name: cpt("extra.resource.expansion.Flow path"),
+      options: {
+        mode: "path",
+        cornerRadius: 1,
+        cornerSplit: 30,
+        path: {
+          width: 1,
+          arrow: false,
+          progress: 1,
+          side: "both",
+        },
+        flow: {
+          enabled: true,
+          speed: 0.35,
+          direction: [1, 0],
+        },
+        material: {
+          map: "/static/images/resource/expansion/path/flow.png",
+        },
+        points: pathPreviewPoints,
+      },
+    },
+    {
+      key: "flowingLightPath",
+      image: "/static/images/resource/expansion/path/light.png",
+      name: cpt("extra.resource.expansion.Flowing light path"),
+      options: {
+        mode: "path",
+        cornerRadius: 1,
+        cornerSplit: 30,
+        path: {
+          width: 1,
+          arrow: false,
+          progress: 1,
+          side: "both",
+        },
+        flow: {
+          enabled: true,
+          speed: 0.5,
+          direction: [1, 0],
+        },
+        material: {
+          map: "/static/images/resource/expansion/path/light.png",
+        },
+        points: pathPreviewPoints,
+      },
+    },
+    {
+      key: "tubePath",
+      image: "/static/images/resource/expansion/path/diffuse.jpg",
+      name: cpt("extra.resource.expansion.Tube path"),
+      options: {
+        mode: "tube",
+        cornerRadius: 0.15,
+        cornerSplit: 6,
+        tube: {
+          radius: 0.18,
+          radialSegments: 12,
+          progress: 1,
+          startRad: 0,
+        },
+        material: {
+          color: "#4c90f5",
+          map: "/static/images/resource/expansion/path/diffuse.jpg",
+          transparent: true,
+          repeat: [1, 1],
+        },
+        points: pathPreviewPoints3D,
+      },
+    },
+  ],
+  uipanel: [
+    {
+      key: "uiPanel",
+      image: "/static/images/resource/expansion/uipanel/uipanel.svg",
+      name: cpt("extra.resource.expansion.UI Panel"),
+      options: {
+        name: "UIPanel",
+        type: "block",
+        props: {
+          width: 1.6,
+          height: 0.9,
+          padding: 0.04,
+          backgroundColor: "#151515",
+          backgroundOpacity: 0.9,
+          borderRadius: 0.05,
+          flexDirection: "column",
+          justifyContent: "space-between",
+          alignItems: "center",
+        },
+        children: [
+          {
+            type: "block",
+            name: "Header",
+            props: {
+              width: 1.5,
+              height: 0.18,
+              backgroundColor: "#00b6a4",
+              backgroundOpacity: 0.95,
+              borderRadius: 0.04,
+              justifyContent: "center",
+              alignItems: "center",
+            },
+            children: [
+              {
+                type: "text",
+                name: "HeaderTitle",
+                props: {
+                  textContent: "UIPanel",
+                  fontSize: 0.07,
+                  color: "#ffffff",
+                  textAlign: "center",
+                },
+              },
+            ],
+          },
+          {
+            type: "block",
+            name: "Body",
+            props: {
+              width: 1.5,
+              height: 0.5,
+              padding: 0.03,
+              backgroundColor: "#007e82",
+              backgroundOpacity: 0.9,
+              borderRadius: 0.04,
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+            },
+            children: [
+              {
+                type: "text",
+                name: "BodyTitle",
+                props: {
+                  textContent: "WYSIWYG",
+                  fontSize: 0.06,
+                  color: "#cfd8dc",
+                  textAlign: "center",
+                },
+              },
+              {
+                type: "text",
+                name: "BodySubTitle",
+                props: {
+                  textContent: "Drag nodes to layout",
+                  fontSize: 0.045,
+                  color: "#9aa4ad",
+                  textAlign: "center",
+                },
+              },
+            ],
+          },
+          {
+            type: "block",
+            name: "Footer",
+            props: {
+              width: 1.5,
+              height: 0.12,
+              backgroundColor: "#101010",
+              backgroundOpacity: 0.9,
+              borderRadius: 0.04,
+              justifyContent: "center",
+              alignItems: "center",
+            },
+            children: [
+              {
+                type: "text",
+                name: "FooterText",
+                props: {
+                  textContent: "Astral3D UI",
+                  fontSize: 0.04,
+                  color: "#7bd5cd",
+                  textAlign: "center",
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+  water: [
+    {
+      key: "circularWaterSurface",
+      image: "/static/images/resource/expansion/water/circularWaterSurface.jpg",
+      name: cpt("extra.resource.expansion.Circular Water Surface"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "CircularWaterSurface",
+        type: "cylinder",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "none",
+        wallOpacity: 0,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+    {
+      key: "cylinderWaterPool",
+      image: "/static/images/resource/expansion/water/cylinderWaterPool.jpg",
+      name: cpt("extra.resource.expansion.Cylinder Water Pool"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "CylinderWaterPool",
+        type: "cylinder",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "wall",
+        wallOpacity: 1,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+    {
+      key: "cylinderWaterPoolVolume",
+      image: "/static/images/resource/expansion/water/cylinderWaterPoolVolume.jpg",
+      name: cpt("extra.resource.expansion.Cylinder Water Pool Volume"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "CylinderWaterPoolVolume",
+        type: "cylinder",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "volume",
+        wallOpacity: 1,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+    {
+      key: "squareWaterSurface",
+      image: "/static/images/resource/expansion/water/squareWaterSurface.jpg",
+      name: cpt("extra.resource.expansion.Square Water Surface"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "SquareWaterSurface",
+        type: "square",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "none",
+        wallOpacity: 0,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+    {
+      key: "squareWaterPool",
+      image: "/static/images/resource/expansion/water/squareWaterPool.jpg",
+      name: cpt("extra.resource.expansion.Square Water Pool"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "SquareWaterPool",
+        type: "square",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "wall",
+        wallOpacity: 1,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+    {
+      key: "squareWaterPoolVolume",
+      image: "/static/images/resource/expansion/water/squareWaterPoolVolume.jpg",
+      name: cpt("extra.resource.expansion.Square Water Pool Volume"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "SquareWaterPoolVolume",
+        type: "square",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "volume",
+        wallOpacity: 1,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+  ],
+};
+
+const dragStore = useDragStore();
+
+function getItemName(item: ExpansionItem): string {
+  return item.name?.value || item.name || "";
+}
+
+const filteredList = computed(() => {
+  const key = activeSubCategory.value;
+  const list = allList[key] || [];
+  return list.filter(item => getItemName(item).toLowerCase().includes(searchText.value.toLowerCase()));
+});
+
+function selectSubCategory(key: string) {
+  activeSubCategory.value = key;
+}
+
+function getDefaultAddPosition(): number[] | undefined {
+  const container = window.viewer?.container;
+  if (!container) return undefined;
+
+  const centerX = container.offsetWidth / 2;
+  const centerY = container.offsetHeight / 2;
+  const centerPosition = screenToWorld(centerX, centerY);
+  return centerPosition.toArray();
+}
+
+async function handlePreview(item: ExpansionItem) {
+  previewInfo.name = getItemName(item);
+  previewInfo.visible = true;
+
+  await nextTick();
+
+  previewRef.value?.getPreviewer().then((previewer: Preview) => {
+    if (!previewer) return;
+
+    let object3d: Object3D | null = null;
+
+    switch (activeSubCategory.value) {
+      case "heatmap":
+        object3d = new Heatmap(item.options);
+        break;
+      case "path":
+        object3d = new Path(item.options);
+        break;
+      case "uipanel":
+        object3d = new UIPanel(item.options);
+        break;
+    }
+
+    if (!object3d) return;
+
+    previewer.scene.add(object3d);
+
+    const box3 = new Box3();
+    if (activeSubCategory.value === "heatmap") {
+      box3.set(new Vector3(-5, 0, -5), new Vector3(5, 5, 5));
+    } else {
+      box3.setFromObject(object3d);
+    }
+
+    previewer.modules.controls.fitToBox(box3, true);
+  });
+}
+
+function addToScene(item: ExpansionItem, position?: number[]) {
+  const options = JSON.parse(JSON.stringify(item.options || {}));
+  if (!options.name) {
+    options.name = getItemName(item);
+  }
+
+  const initPosition = position || getDefaultAddPosition();
+  if (initPosition) {
+    options.position = initPosition;
+  }
+
+  switch (activeSubCategory.value) {
+    case "heatmap": {
+      const heatmap = new Heatmap(options);
+      App.execute(new AddObjectCommand(heatmap), `Add Heatmap: ${options.name}`);
+      break;
+    }
+    case "path": {
+      const path = new Path(options);
+      App.execute(new AddObjectCommand(path), `Add Path: ${options.name}`);
+      break;
+    }
+    case "uipanel": {
+      const uipanel = new UIPanel(options);
+      App.execute(new AddObjectCommand(uipanel), `Add UIPanel: ${options.name}`);
+      break;
+    }
+    case "water": {
+      Water.waterPool(options, options.position);
+      break;
+    }
+  }
+}
+
+function dragStart(item: ExpansionItem) {
+  dragStore.setData(item);
+}
+
+function dragEnd() {
+  if (dragStore.getActionTarget !== "addToScene" || dragStore.endArea !== "Scene") return;
+
+  const position = screenToWorld(dragStore.endPosition.x, dragStore.endPosition.y).toArray();
+  addToScene(dragStore.getData, position);
+
+  dragStore.setActionTarget("");
+}
+</script>
+
+<style scoped lang="less">
+#extra-resource-expansion {
+  overflow-x: hidden;
+
+  .n-card {
+    cursor: pointer;
+
+    :deep(.n-card-cover) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        aspect-ratio: 1/1;
+      }
+    }
+
+    :deep(.n-card__content) {
+      padding: 0.3rem 0;
+      font-size: 0.65rem;
+      text-align: center;
+
+      .n-button {
+        font-size: 0.65rem !important;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/editor/src/views/editor/components/extraPane/resource/builtin/index.vue b/packages/editor/src/views/editor/components/extraPane/resource/builtin/index.vue
index fba6d81..7a23e54 100644
--- a/packages/editor/src/views/editor/components/extraPane/resource/builtin/index.vue
+++ b/packages/editor/src/views/editor/components/extraPane/resource/builtin/index.vue
@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import {computed, markRaw, reactive, ref, provide, useTemplateRef} from "vue";
 import {cpt} from "@/language";
-import {Buoy, CameraAction, HeatMap, LocationCompany, LocationHeart,ChoroplethMap, ModelAlt, Opacity} from "@vicons/carbon";
+import {Buoy, CameraAction, HeatMap, LocationCompany, LocationHeart,ChoroplethMap, EdtLoop, ModelAlt, Opacity} from "@vicons/carbon";
 import CommonPreview from "@/components/preview/CommonPreview.vue";
 import Models from "@/views/editor/components/extraPane/resource/builtin/Models.vue";
 import Materials from "@/views/editor/components/extraPane/resource/builtin/Materials.vue";
@@ -37,6 +37,7 @@ import Particles from "@/views/editor/components/extraPane/resource/builtin/Part
 import Billboard from "@/views/editor/components/extraPane/resource/builtin/Billboard.vue";
 import HtmlPanel from "@/views/editor/components/extraPane/resource/builtin/HtmlPanel.vue";
 import Tiles from "@/views/editor/components/extraPane/resource/builtin/Tiles.vue";
+import Expansion from "@/views/editor/components/extraPane/resource/builtin/Expansion.vue";
 import Lights from "@/views/editor/components/extraPane/resource/builtin/Lights.vue";
 import Cameras from "@/views/editor/components/extraPane/resource/builtin/Cameras.vue";
 
@@ -48,6 +49,7 @@ const categories = ref([
   { key: 'billboard', name: cpt("home.assets.Billboard"), icon: markRaw(LocationHeart), component: markRaw(Billboard) },
   { key: 'htmlPanel', name: cpt("extra.resource.Html panel"), icon: markRaw(LocationCompany), component: markRaw(HtmlPanel) },
   { key: 'tiles', name: "3D Tiles", icon: markRaw(ChoroplethMap), component: markRaw(Tiles) },
+  { key: 'expansion', name: cpt("extra.resource.Expansion"), icon: markRaw(EdtLoop), component: markRaw(Expansion) },
   { key: 'lights', name: cpt("extra.resource.Light"), icon: markRaw(Buoy), component: markRaw(Lights) },
   { key: 'cameras', name: cpt("extra.resource.Camera"), icon: markRaw(CameraAction), component: markRaw(Cameras) },
 ]);
diff --git a/packages/editor/types/cesium/cesiumApp.d.ts b/packages/editor/types/cesium/cesiumApp.d.ts
new file mode 100644
index 0000000..dbd9acb
--- /dev/null
+++ b/packages/editor/types/cesium/cesiumApp.d.ts
@@ -0,0 +1,66 @@
+import MapLayer from "@/cesium/modules/mapLayer";
+import CameraUtils from "@/cesium/modules/cameraUtils";
+import * as Cesium from 'cesium';
+import * as THREE from 'three';
+import { VNode } from "vue";
+export default class CesiumApp {
+    dom: HTMLElement;
+    cesiumParentElement: HTMLElement;
+    viewer: Cesium.Viewer;
+    helper: Cesium.EventHelper;
+    module: {
+        mapLayer: MapLayer;
+        cameraUtils: CameraUtils;
+    };
+    _three: {
+        camera: THREE.PerspectiveCamera;
+        scene: THREE.Scene;
+        sceneHelpers: THREE.Scene;
+        showSceneHelpers: boolean;
+        renderer: THREE.WebGLRenderer;
+    };
+    constructor(dom: any);
+    getViewer(): Cesium.Viewer;
+    /**
+     * 场景事件监听
+     */
+    eventListener(): void;
+    /**
+     * 鼠标按下处理
+     * @param event
+     */
+    onMouseDown(event: any): void;
+    /**
+     * 鼠标抬起处理
+     * @param event
+     */
+    onMouseUp(event: any): void;
+    /**
+     * three 场景点击事件
+     */
+    handleClick(): void;
+    /**
+     * 初始化cesium 场景后的处理操作
+     */
+    handleInitCesiumAfter(): void;
+    /**
+     * 添加中国地图遮罩
+     */
+    addChinaMask(): void;
+    /**
+     * 获取与鼠标点击位置射线相交的对象数组
+     */
+    getIntersects(point: any): THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>[];
+    /**
+     * 添加VNode至 viewer._toolbar
+     */
+    addVNodeToViewer(vNode: VNode): void;
+    /**
+     * 重置cesium场景
+     */
+    reset(): void;
+    /**
+     * 销毁
+     */
+    destroy(): void;
+}
diff --git a/packages/editor/types/cesium/modules/cameraUtils.d.ts b/packages/editor/types/cesium/modules/cameraUtils.d.ts
new file mode 100644
index 0000000..f28780e
--- /dev/null
+++ b/packages/editor/types/cesium/modules/cameraUtils.d.ts
@@ -0,0 +1,23 @@
+import * as Cesium from 'cesium';
+/**
+ * @Date 2022-06-09
+ * @Author 二三
+ * @param {*} viewer Cesium.Viewer
+ * @Description: cesium相机类
+ */
+export default class CameraUtils {
+    viewer: Cesium.Viewer | null;
+    entity: Cesium.Entity | null;
+    constructor();
+    init(): void;
+    setViewer(viewer: any): void;
+    /**
+     * 修改鼠标操作方式
+     */
+    changeMouseOperate(): void;
+    flyTo(lng: any, lat: any, distance: any, pitch?: number, heading?: number): void;
+    /**
+     * 销毁
+     */
+    destroy(): void;
+}
diff --git a/packages/editor/types/cesium/modules/mapLayer.d.ts b/packages/editor/types/cesium/modules/mapLayer.d.ts
new file mode 100644
index 0000000..bf294eb
--- /dev/null
+++ b/packages/editor/types/cesium/modules/mapLayer.d.ts
@@ -0,0 +1,27 @@
+import * as Cesium from 'cesium';
+/**
+ * @Date 2023-03-07
+ * @Author 二三
+ * @Description: cesium地图底图图层管理
+ */
+export default class MapLayer {
+    viewer: Cesium.Viewer | null;
+    layers: {
+        [s: string]: {
+            satellite?: Cesium.UrlTemplateImageryProvider | Cesium.WebMapTileServiceImageryProvider;
+            mark?: Cesium.UrlTemplateImageryProvider;
+            vector?: Cesium.UrlTemplateImageryProvider;
+        };
+    };
+    constructor();
+    setViewer(viewer: any): void;
+    /**
+     * 获取默认底图
+     * @param layer 底图类型，默认卫星影像图 enum: satellite | vector
+     */
+    getDefaultLayer(layer?: 'satellite' | 'vector'): Cesium.UrlTemplateImageryProvider | Cesium.WebMapTileServiceImageryProvider | undefined;
+    /**
+     * 获取默认底图对应得标记图
+     */
+    getMarkMapByDefaultLayer(): Cesium.UrlTemplateImageryProvider | undefined;
+}
diff --git a/packages/editor/types/cesium/utils/utils.d.ts b/packages/editor/types/cesium/utils/utils.d.ts
new file mode 100644
index 0000000..9f660f9
--- /dev/null
+++ b/packages/editor/types/cesium/utils/utils.d.ts
@@ -0,0 +1,10 @@
+/**
+ * 笛卡尔坐标转换经纬度坐标
+ * @param {*} car3_ps
+ * @returns
+ */
+export declare function getLngLatByCartesian3(car3_ps: any): {
+    longitude: number;
+    latitude: number;
+    elevation: number;
+};
diff --git a/packages/editor/types/cesium/viewPort.d.ts b/packages/editor/types/cesium/viewPort.d.ts
new file mode 100644
index 0000000..fe1498f
--- /dev/null
+++ b/packages/editor/types/cesium/viewPort.d.ts
@@ -0,0 +1,69 @@
+import * as THREE from "three";
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
+import CesiumApp from "@/cesium/cesiumApp";
+/**
+ * @Date 2023-02-06
+ * @Author 二三
+ * @Description: cesium视图出口
+ */
+export default class ViewPort {
+    app: CesiumApp;
+    cesiumParentElement: HTMLElement;
+    _three: {
+        camera: THREE.PerspectiveCamera;
+        scene: THREE.Scene;
+        sceneHelpers: THREE.Scene;
+        showSceneHelpers: boolean;
+        renderer: THREE.WebGLRenderer;
+        transformControls: TransformControls | null;
+        box: THREE.Box3;
+    };
+    threeSelectionBox: THREE.Box3Helper;
+    minWGS84: Array<number>;
+    maxWGS84: Array<number>;
+    animationFrameID: number | null;
+    constructor(dom: any);
+    init(): void;
+    /**
+     * 相关signals注册
+     */
+    signalsRegister(isAdd?: boolean): void;
+    /**
+     *
+     */
+    addButtonToViewer(): void;
+    /**
+     * cesium 开始加载后的相关操作
+     */
+    handleCesiumEvent(): void;
+    /**
+     * 初始化three变换控制器
+     */
+    initThreeTransformControls(): void;
+    /**
+     * 计算场景中心位置等信息
+     */
+    calcCenter(): void;
+    /**
+     * 处理three canvas 的 transformControls，以便于场景融合;
+     */
+    handleThreeMouseMove(event: any): void;
+    /**
+     * 飞行至three场景
+     */
+    flyToThree(): void;
+    /**
+     * cesium 渲染
+     */
+    renderCesium(): void;
+    /**
+     * 两个画布相机融合
+     */
+    fusionCanvas(): void;
+    /**
+     * three 渲染器的渲染
+     */
+    renderThree(): void;
+    loop(): void;
+    destroy(): void;
+}
diff --git a/packages/editor/types/config/cesium.d.ts b/packages/editor/types/config/cesium.d.ts
new file mode 100644
index 0000000..6d966e9
--- /dev/null
+++ b/packages/editor/types/config/cesium.d.ts
@@ -0,0 +1,9 @@
+export declare const CESIUM_DEFAULT_MAP: {
+    label: string;
+    value: string;
+    coordinateSystem: string;
+}[];
+export declare const CESIUM_DEFAULT_MAP_TYPE: {
+    label: string;
+    value: string;
+}[];
diff --git a/packages/editor/types/config/service.d.ts b/packages/editor/types/config/service.d.ts
new file mode 100644
index 0000000..6b43290
--- /dev/null
+++ b/packages/editor/types/config/service.d.ts
@@ -0,0 +1,34 @@
+/** 错误信息的显示时间 */
+export declare const ERROR_MSG_DURATION: number;
+/** 默认的请求错误code */
+export declare const DEFAULT_REQUEST_ERROR_CODE = "DEFAULT";
+/** 默认的请求错误文本 */
+export declare const DEFAULT_REQUEST_ERROR_MSG = "\u8BF7\u6C42\u9519\u8BEF~";
+/** 请求超时的错误code(为固定值：ECONNABORTED) */
+export declare const REQUEST_TIMEOUT_CODE = "ECONNABORTED";
+/** 请求超时的错误文本 */
+export declare const REQUEST_TIMEOUT_MSG = "\u8BF7\u6C42\u8D85\u65F6~";
+/** 网络不可用的code */
+export declare const NETWORK_ERROR_CODE = "NETWORK_ERROR";
+/** 网络不可用的错误文本 */
+export declare const NETWORK_ERROR_MSG = "\u7F51\u7EDC\u4E0D\u53EF\u7528~";
+/** 请求不成功各种状态的错误 */
+export declare const ERROR_STATUS: {
+    400: string;
+    401: string;
+    403: string;
+    404: string;
+    405: string;
+    408: string;
+    500: string;
+    501: string;
+    502: string;
+    503: string;
+    504: string;
+    505: string;
+    DEFAULT: string;
+};
+/** 不弹出错误信息的code */
+export declare const NO_ERROR_MSG_CODE: (string | number)[];
+/** token失效需要刷新token的code */
+export declare const REFRESH_TOKEN_CODE: (string | number)[];
diff --git a/packages/editor/types/core/AssetPreview.d.ts b/packages/editor/types/core/AssetPreview.d.ts
new file mode 100644
index 0000000..0555d87
--- /dev/null
+++ b/packages/editor/types/core/AssetPreview.d.ts
@@ -0,0 +1,15 @@
+import { Preview } from "@astral3d/engine";
+export declare class AssetPreview {
+    #private;
+    previewer: Preview;
+    private container;
+    static getInstance(container?: HTMLElement): AssetPreview;
+    constructor(container?: HTMLElement);
+    updateContainer(container: HTMLElement): void;
+    /**
+     * 加载预览项
+     */
+    load(fileOrUrl: string | File, type?: string): Promise<unknown>;
+    clear(): void;
+    dispose(): void;
+}
diff --git a/packages/editor/types/hooks/index.d.ts b/packages/editor/types/hooks/index.d.ts
new file mode 100644
index 0000000..9fc1ae5
--- /dev/null
+++ b/packages/editor/types/hooks/index.d.ts
@@ -0,0 +1,3 @@
+import useBoolean from './useBoolean';
+import useLoading from './useLoading';
+export { useBoolean, useLoading };
diff --git a/packages/editor/types/hooks/useBoolean.d.ts b/packages/editor/types/hooks/useBoolean.d.ts
new file mode 100644
index 0000000..ba378f9
--- /dev/null
+++ b/packages/editor/types/hooks/useBoolean.d.ts
@@ -0,0 +1,11 @@
+/**
+ * boolean组合式函数
+ * @param initValue 初始值
+ */
+export default function useBoolean(initValue?: boolean): {
+    bool: import("vue").Ref<boolean, boolean>;
+    setBool: (value: boolean) => void;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+};
diff --git a/packages/editor/types/hooks/useLoading.d.ts b/packages/editor/types/hooks/useLoading.d.ts
new file mode 100644
index 0000000..1825fe9
--- /dev/null
+++ b/packages/editor/types/hooks/useLoading.d.ts
@@ -0,0 +1,5 @@
+export default function useLoading(initValue?: boolean): {
+    loading: import("vue").Ref<boolean, boolean>;
+    startLoading: () => void;
+    endLoading: () => void;
+};
diff --git a/packages/editor/types/hooks/useWebSocket.d.ts b/packages/editor/types/hooks/useWebSocket.d.ts
new file mode 100644
index 0000000..da13bbd
--- /dev/null
+++ b/packages/editor/types/hooks/useWebSocket.d.ts
@@ -0,0 +1,25 @@
+/**
+ * 开启 WebSocket 链接，全局只需执行一次
+ * @param url
+ */
+export declare function connectWebSocket(url: any): void;
+/**
+ * 添加 WebSocket 消息监听
+ * @param callback
+ */
+export declare function onWebSocket(callback: (data: object) => any): void;
+/**
+ * 解除 WebSocket 消息监听
+ *
+ * @param callback
+ */
+export declare function offWebSocket(callback: (data: object) => any): void;
+export declare function useWebSocket(): {
+    data: string | null;
+    status: import("@vueuse/core").WebSocketStatus;
+    close: WebSocket["close"];
+    open: import("@vueuse/core").Fn;
+    send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+    ws: WebSocket | undefined;
+} | null;
+export declare function send(message: string | ArrayBuffer | Blob): void;
diff --git a/packages/editor/types/http/api/assetsCategory.d.ts b/packages/editor/types/http/api/assetsCategory.d.ts
new file mode 100644
index 0000000..6ba3b49
--- /dev/null
+++ b/packages/editor/types/http/api/assetsCategory.d.ts
@@ -0,0 +1,6 @@
+/**
+ * 获取资产分类树
+ */
+export declare function fetchAssetsCategoryTreeList(params?: {
+    type: string;
+}): Promise<Service.RequestResult<T>>;
diff --git a/packages/editor/types/http/api/assetsInfo.d.ts b/packages/editor/types/http/api/assetsInfo.d.ts
new file mode 100644
index 0000000..63e4821
--- /dev/null
+++ b/packages/editor/types/http/api/assetsInfo.d.ts
@@ -0,0 +1,20 @@
+/**
+ * 获取资产列表
+ */
+export declare function fetchGetAssetsList(params: Service.ListPageQueryParams): Promise<Service.RequestResult<T>>;
+/**
+ * 新增资产
+ */
+export declare function fetchAddAsset(data: IAssets.Item): Promise<Service.RequestResult<T>>;
+/**
+ * 更新资产
+ */
+export declare function fetchUpdateAsset(data: IAssets.Item): Promise<Service.RequestResult<T>>;
+/**
+ * 移除资产
+ */
+export declare function fetchRemoveAsset(id: IAssets.Item['id']): Promise<Service.RequestResult<T>>;
+/**
+ * 获取分类下的资产tags
+ */
+export declare function fetchGetAssetCategoryTags(type: IAssets.SupportType, category: string): Promise<Service.RequestResult<T>>;
diff --git a/packages/editor/types/http/api/bim.d.ts b/packages/editor/types/http/api/bim.d.ts
new file mode 100644
index 0000000..75aa604
--- /dev/null
+++ b/packages/editor/types/http/api/bim.d.ts
@@ -0,0 +1,12 @@
+/**
+ * 获取bim转换列表
+ */
+export declare function fetchGetBim2GltfList(params: any): Promise<Service.RequestResult<T>>;
+/**
+ * 上传bim文件
+ */
+export declare function fetchUploadRvt(data: any): Promise<Service.RequestResult<T>>;
+/**
+ * 添加数据并启动revit转换（ 需传入接收结果的websocket uname）
+ */
+export declare function fetchAddBim2Gltf(data: any): Promise<Service.RequestResult<T>>;
diff --git a/packages/editor/types/http/api/cad.d.ts b/packages/editor/types/http/api/cad.d.ts
new file mode 100644
index 0000000..8d008cc
--- /dev/null
+++ b/packages/editor/types/http/api/cad.d.ts
@@ -0,0 +1,8 @@
+/**
+ * 获取cad列表
+ */
+export declare function fetchGetCadList(params: any): Promise<Service.RequestResult<T>>;
+/**
+ * 添加数据并启动cad解析（ 需传入接收结果的websocket uname）
+ */
+export declare function fetchAddDwg2dxf(data: any): Promise<Service.RequestResult<T>>;
diff --git a/packages/editor/types/http/api/sceneExample.d.ts b/packages/editor/types/http/api/sceneExample.d.ts
new file mode 100644
index 0000000..4968401
--- /dev/null
+++ b/packages/editor/types/http/api/sceneExample.d.ts
@@ -0,0 +1,17 @@
+/**
+ * 获取所有示例场景
+ */
+export declare function fetchSceneExampleList(params: any): Promise<Service.RequestResult<T>>;
+/**
+ * 获取示例场景
+ */
+export declare function fetchSceneExample(id: any): Promise<Service.RequestResult<T>>;
+/**
+ * 新增示例场景
+ */
+export declare function fetchAddSceneExample(data: any): Promise<Service.RequestResult<T>>;
+/**
+ * 删除示例场景
+ * @param {number} id
+ */
+export declare function fetchDeleteSceneExample(id: number): Promise<Service.RequestResult<T>>;
diff --git a/packages/editor/types/http/api/scenes.d.ts b/packages/editor/types/http/api/scenes.d.ts
new file mode 100644
index 0000000..1bae509
--- /dev/null
+++ b/packages/editor/types/http/api/scenes.d.ts
@@ -0,0 +1,21 @@
+/**
+ * 获取所有工程信息
+ */
+export declare function fetchGetAllScenes(params: Service.ListPageQueryParams): Promise<Service.RequestResult<T>>;
+/**
+ * 获取工程
+ */
+export declare function fetchGetOneScene(id: string): Promise<Service.RequestResult<T>>;
+/**
+ * 保存工程
+ */
+export declare function fetchAddScene(data: any): Promise<Service.RequestResult<T>>;
+/**
+ * 更新工程
+ */
+export declare function fetchUpdateScene(id: string, data: ISceneFetchData): Promise<Service.RequestResult<T>>;
+/**
+ * 删除工程
+ * @param {number} id
+ */
+export declare function fetchDeleteScenes(id: string): Promise<Service.RequestResult<T>>;
diff --git a/packages/editor/types/http/api/sys.d.ts b/packages/editor/types/http/api/sys.d.ts
new file mode 100644
index 0000000..bd25d82
--- /dev/null
+++ b/packages/editor/types/http/api/sys.d.ts
@@ -0,0 +1,8 @@
+/**
+ * 上传
+ */
+export declare function fetchUpload(data: {
+    file: File;
+    biz: string;
+    type?: string;
+}): Promise<Service.RequestResult<T>>;
diff --git a/packages/editor/types/http/request/ConcurrencyManager.d.ts b/packages/editor/types/http/request/ConcurrencyManager.d.ts
new file mode 100644
index 0000000..3ec9839
--- /dev/null
+++ b/packages/editor/types/http/request/ConcurrencyManager.d.ts
@@ -0,0 +1,16 @@
+declare const ConcurrencyManager: (axios: any, MAX_CONCURRENT?: number) => {
+    queue: any;
+    running: any;
+    shiftInitial: () => void;
+    push: (reqHandler: any) => void;
+    shift: () => void;
+    requestHandler: (req: any) => Promise<unknown>;
+    responseHandler: (res: any) => any;
+    responseErrorHandler: (res: any) => Promise<never>;
+    interceptors: {
+        request: null;
+        response: null;
+    };
+    detach: () => void;
+};
+export default ConcurrencyManager;
diff --git a/packages/editor/types/http/request/index.d.ts b/packages/editor/types/http/request/index.d.ts
new file mode 100644
index 0000000..8b6e7f7
--- /dev/null
+++ b/packages/editor/types/http/request/index.d.ts
@@ -0,0 +1,6 @@
+export declare const request: {
+    get: <T>(url: string, config?: import("axios").AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    post: <T>(url: string, data?: any, config?: import("axios").AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    put: <T>(url: string, data?: any, config?: import("axios").AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    delete: <T>(url: string, config: import("axios").AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+};
diff --git a/packages/editor/types/http/request/instance.d.ts b/packages/editor/types/http/request/instance.d.ts
new file mode 100644
index 0000000..1f9e8ca
--- /dev/null
+++ b/packages/editor/types/http/request/instance.d.ts
@@ -0,0 +1,15 @@
+import type { AxiosInstance, AxiosRequestConfig } from 'axios';
+import { Service } from "../../../types/network";
+export default class CustomAxiosInstance {
+    instance: AxiosInstance;
+    backendConfig: Service.BackendResultConfig;
+    manager: any;
+    /**
+     *
+     * @param axiosConfig - axios配置
+     * @param backendConfig - 后端返回的数据配置
+     */
+    constructor(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig);
+    /** 设置请求拦截器 */
+    setInterceptor(): void;
+}
diff --git a/packages/editor/types/http/request/request.d.ts b/packages/editor/types/http/request/request.d.ts
new file mode 100644
index 0000000..62809e6
--- /dev/null
+++ b/packages/editor/types/http/request/request.d.ts
@@ -0,0 +1,32 @@
+import type { Ref } from 'vue';
+import type { AxiosRequestConfig } from 'axios';
+import { Service } from "../../../types/network";
+/**
+ * 创建请求
+ * @param axiosConfig - axios配置
+ * @param backendConfig - 后端接口字段配置
+ */
+export declare function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig): {
+    get: <T>(url: string, config?: AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    post: <T>(url: string, data?: any, config?: AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    put: <T>(url: string, data?: any, config?: AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    delete: <T>(url: string, config: AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+};
+interface RequestResultHook<T = any> {
+    data: Ref<T | null>;
+    error: Ref<Service.RequestError | null>;
+    loading: Ref<boolean>;
+    network: Ref<boolean>;
+}
+/**
+ * 创建hooks请求
+ * @param axiosConfig - axios配置
+ * @param backendConfig - 后端接口字段配置
+ */
+export declare function createHookRequest(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig): {
+    get: <T>(url: string, config?: AxiosRequestConfig) => RequestResultHook<T>;
+    post: <T>(url: string, data?: any, config?: AxiosRequestConfig) => RequestResultHook<T>;
+    put: <T>(url: string, data?: any, config?: AxiosRequestConfig) => RequestResultHook<T>;
+    delete: <T>(url: string, config: AxiosRequestConfig) => RequestResultHook<T>;
+};
+export {};
diff --git a/packages/editor/types/language/index.d.ts b/packages/editor/types/language/index.d.ts
new file mode 100644
index 0000000..a00f77f
--- /dev/null
+++ b/packages/editor/types/language/index.d.ts
@@ -0,0 +1,6 @@
+import type { App } from 'vue';
+import { ComputedRef } from 'vue';
+export declare function setupI18n(app: App): void;
+export declare function t(key: string): string;
+export declare function cpt(key: string): ComputedRef<string>;
+export declare function setLocale(locale: IConfig.Locale): void;
diff --git a/packages/editor/types/language/zh-CN-en-US.d.ts b/packages/editor/types/language/zh-CN-en-US.d.ts
new file mode 100644
index 0000000..b74dd82
--- /dev/null
+++ b/packages/editor/types/language/zh-CN-en-US.d.ts
@@ -0,0 +1,1051 @@
+declare const _default: {
+    ErSan: string;
+    home: {
+        Project: string;
+        'Data Center': string;
+        'Resource Center': string;
+        'Setting Center': string;
+        'Usage Document': string;
+        Details: string;
+        Rename: string;
+        Delete: string;
+        Release: string;
+        Preview: string;
+        Loading: string;
+        'Scroll to load more': string;
+        'No more': string;
+        'My Project': string;
+        'Shared Project': string;
+        'New project': string;
+        Template: string;
+        'Empty project': string;
+        'A blank project without any scene elements': string;
+        'Project default settings': string;
+        "Data sources": string;
+        "Data sets": string;
+        "Add data source": string;
+        "Add data set": string;
+        "Data source config": string;
+        "Data set config": string;
+        "Data source name": string;
+        "Data source type": string;
+        "Connection string": string;
+        Username: string;
+        Password: string;
+        "Test the connection": string;
+        "Data set name": string;
+        "Data set group": string;
+        "Data set type": string;
+        Method: string;
+        "API interface": string;
+        "Query only": string;
+        "Parameter is passed as ": string;
+        "For example:": string;
+        "Data set group config": string;
+        "Parent group": string;
+        "Group name": string;
+        assets: {
+            Model: string;
+            Material: string;
+            Texture: string;
+            Billboard: string;
+            HDR: string;
+            "Upload asset": string;
+            "Edit asset": string;
+            "By previewing the screenshots": string;
+            "Search for assets": string;
+            Name: string;
+            Type: string;
+            Category: string;
+            Size: string;
+            Tags: string;
+        };
+    };
+    layout: {
+        header: {
+            File: string;
+            'Clear Out': string;
+            Import: string;
+            Export: string;
+            'Export Object': string;
+            'Export Scene': string;
+            'PLY (Binary)': string;
+            'STL (Binary)': string;
+            Clone: string;
+            'Delete(Del)': string;
+            AmbientLight: string;
+            DirectionalLight: string;
+            HemisphereLight: string;
+            PointLight: string;
+            SpotLight: string;
+            OrthographicCamera: string;
+            PerspectiveCamera: string;
+            Fullscreen: string;
+            'Exit fullscreen': string;
+            Save: string;
+            'Save locally': string;
+            "Use system theme": string;
+            Undertint: string;
+            Dark: string;
+            'Main color': string;
+        };
+        scene: {
+            toolbar: {
+                "Six views": string;
+                Top: string;
+                Bottom: string;
+                Left: string;
+                Right: string;
+                Front: string;
+                Back: string;
+                "Scene camera": string;
+                Realistic: string;
+                Solid: string;
+                Normals: string;
+                Wireframe: string;
+                local: string;
+                world: string;
+                "Status monitoring": string;
+            };
+            viewportInfo: {
+                Objects: string;
+                Vertices: string;
+                Triangles: string;
+                'Frame time': string;
+            };
+        };
+        sider: {
+            Scene: string;
+            Project: string;
+            scene: {
+                Search: string;
+                'Click Upload': string;
+                Center: string;
+                Width: string;
+                Height: string;
+                Depth: string;
+                "Width segments": string;
+                "Height segments": string;
+                "Depth segments": string;
+                Radius: string;
+                Length: string;
+                "Cap segments": string;
+                "Radial segments": string;
+                Segments: string;
+                "Theta start": string;
+                "Theta length": string;
+                "Radius top": string;
+                "Radius bottom": string;
+                "Open ended": string;
+                "Facet segments": string;
+                'Curve Segments': string;
+                Steps: string;
+                'Enabled bevel': string;
+                'Bevel thickness': string;
+                'Bevel size': string;
+                'Bevel offset': string;
+                'Bevel segments': string;
+                'Convert to Shape': string;
+                Path: string;
+                'Tubular segments': string;
+                Closed: string;
+                'Curve type': string;
+                Tension: string;
+                'Phi start': string;
+                'Phi length': string;
+                Points: string;
+                'Inner radius': string;
+                'Outer radius': string;
+                'Theta segments': string;
+                'Phi segments': string;
+                Extrude: string;
+                Tube: string;
+                Arc: string;
+                P: string;
+                Q: string;
+            };
+            project: {
+                'please enter the scene name': string;
+                'please enter the scene introduction': string;
+                VR: string;
+                materials: string;
+                'select material': string;
+                assign: string;
+            };
+            "Scene config": string;
+            sceneConfig: {
+                "Project information": string;
+                Background: string;
+                Environment: string;
+                Grid: string;
+                Helpers: string;
+            };
+            "Renderer config": string;
+            rendererConfig: {
+                Antialias: string;
+                'Tone mapping': string;
+                'Frame rate limit': string;
+                'Low FPS': string;
+                'Medium FPS': string;
+                'High FPS': string;
+                'Ultra high FPS': string;
+                Unlimited: string;
+                shadows: string;
+                Type: string;
+                "Global illumination": string;
+                Fade: string;
+                "Shadow far": string;
+                "Frustum split mode": string;
+                "Shadow map": string;
+                "Light intensity": string;
+                "Light color": string;
+                "Light direction x": string;
+                "Light direction y": string;
+                "Light direction z": string;
+            };
+            "Post processing": string;
+            postProcessing: {
+                "Anti-aliasing": string;
+                Outline: string;
+                "Edge Strength": string;
+                "Edge Glow": string;
+                "Edge Thickness": string;
+                "Pulse Period": string;
+                "Visible Edge": string;
+                "Hidden Edge": string;
+                Glow: string;
+                Radius: string;
+                Threshold: string;
+                Strength: string;
+                "LUT Color filter": string;
+                Intensity: string;
+                Afterimage: string;
+                Damp: string;
+                Bokeh: string;
+                Focus: string;
+                Aperture: string;
+                MaxBlur: string;
+                Pixelate: string;
+                PixelSize: string;
+                NormalEdgeStrength: string;
+                DepthEdgeStrength: string;
+                "Use a solid color background to achieve the best rendering effect": string;
+                Halftoning: string;
+                Shape: string;
+                Dot: string;
+                Ellipse: string;
+                Line: string;
+                Square: string;
+                RotateR: string;
+                RotateG: string;
+                RotateB: string;
+                Scatter: string;
+                Blending: string;
+                BlendingMode: string;
+                Linear: string;
+                Multiply: string;
+                Add: string;
+                Lighter: string;
+                Darker: string;
+                Greyscale: string;
+            };
+            Weather: string;
+            weather: {
+                Fog: string;
+                Type: string;
+                Color: string;
+                Far: string;
+                Near: string;
+                Density: string;
+                Rain: string;
+                Speed: string;
+                Size: string;
+                Radian: string;
+                Alpha: string;
+                Snow: string;
+                Accumulation: string;
+            };
+            History: string;
+            history: {
+                persistent: string;
+                'Clear History': string;
+            };
+            Object: string;
+            object: {
+                type: string;
+                uuid: string;
+                name: string;
+                position: string;
+                rotation: string;
+                scale: string;
+                fov: string;
+                left: string;
+                right: string;
+                top: string;
+                bottom: string;
+                near: string;
+                far: string;
+                intensity: string;
+                color: string;
+                groundcolor: string;
+                distance: string;
+                angle: string;
+                penumbra: string;
+                decay: string;
+                shadow: string;
+                shadowBias: string;
+                shadowNormalBias: string;
+                shadowRadius: string;
+                shadowIntensity: string;
+                cast: string;
+                receive: string;
+                visible: string;
+                frustumcull: string;
+                renderorder: string;
+                userdata: string;
+            };
+            Geometry: string;
+            geometry: {
+                'Compute Vertex Normals': string;
+                'Afficher normales': string;
+                bounds: string;
+                attributes: string;
+                index: string;
+            };
+            Material: string;
+            material: {
+                slot: string;
+                Programme: string;
+                Info: string;
+                Vert: string;
+                Frag: string;
+                Color: string;
+                Specular: string;
+                Shininess: string;
+                Emissive: string;
+                Reflectivity: string;
+                Roughness: string;
+                Metalness: string;
+                Clearcoat: string;
+                'Clearcoat Roughness': string;
+                Iridescence: string;
+                'Thin-Film IOR': string;
+                'Thin-Film Thickness': string;
+                Sheen: string;
+                'Sheen Roughness': string;
+                'Sheen Color': string;
+                Transmission: string;
+                'Attenuation Distance': string;
+                'Attenuation Color': string;
+                Thickness: string;
+                'Vertex Colors': string;
+                'Depth Packing': string;
+                Map: string;
+                'Specular Map': string;
+                'Emissive Map': string;
+                Matcap: string;
+                'Alpha Map': string;
+                'Bump Map': string;
+                'Normal Map': string;
+                'Clearcoat Normal Map': string;
+                'Displace Map': string;
+                'Rough Map': string;
+                'Metal Map': string;
+                'Irid Map': string;
+                'Sheen Color Map': string;
+                'Sheen Rough. Map': string;
+                'Thin-Film Thickness Map': string;
+                'Env Map': string;
+                'Light Map': string;
+                'AO Map': string;
+                'Gradient Map': string;
+                'Transmission Map': string;
+                'Thickness Map': string;
+                repeat: string;
+                "repetitive mode": string;
+                "Repeat wrapping": string;
+                "Edge stretching": string;
+                "Mirror duplication": string;
+                Side: string;
+                Size: string;
+                'Size Attenuation': string;
+                'Flat Shading': string;
+                Blending: string;
+                Opacity: string;
+                Transparent: string;
+                'Alpha Test': string;
+                'Depth Test': string;
+                'Depth Write': string;
+                Wireframe: string;
+            };
+            Animations: string;
+            animation: {
+                Play: string;
+                Pause: string;
+                Continue: string;
+                Stop: string;
+                'Time scale': string;
+            };
+            Script: string;
+            script: {
+                Edit: string;
+                Remove: string;
+                New: string;
+                'Please enter the script name': string;
+                'The script name already exists': string;
+            };
+            'Scene drawing': string;
+            drawing: {
+                'Click to select or drag the drawing to this area': string;
+            };
+            Particle: string;
+            particle: {
+                Attributes: string;
+                Initializers: string;
+                Behaviours: string;
+                'Total Emit Times': string;
+                'Emitter Damping': string;
+                Duration: string;
+                'Quantitative range': string;
+                'The number range of emitted particles': string;
+                'Time interval': string;
+                'The time interval between each particle emission': string;
+                Mass: string;
+                Average: string;
+                'Determines whether to average the mass value': string;
+                Life: string;
+                'Determines whether to average the life value': string;
+                Radius: string;
+                'Determines whether to average the radius value': string;
+                Rotation: string;
+                'Follow parent': string;
+                "Determines if we should use the emitter's rotation as the starting rotation": string;
+                'Generation region': string;
+                Type: string;
+                Box: string;
+                Line: string;
+                Mesh: string;
+                Point: string;
+                Sphere: string;
+                'Start point': string;
+                'End point': string;
+                Velocity: string;
+                'Velocity radius': string;
+                Direction: string;
+                Radial: string;
+                Polar: string;
+                Theta: string;
+                Phi: string;
+                Vector: string;
+                Body: string;
+                Picture: string;
+                'Mesh source': string;
+                'Built-in': string;
+                'A behaviour which mutates the color of a particle over time': string;
+                'Start color': string;
+                'End color': string;
+                Easing: string;
+                'Ease linear': string;
+                'Ease in quad': string;
+                'Ease out quad': string;
+                'Ease in out quad': string;
+                'Ease in cubic': string;
+                'Ease out cubic': string;
+                'Ease in out cubic': string;
+                'Ease in quart': string;
+                'Ease out quart': string;
+                'Ease in out quart': string;
+                'Ease in sine': string;
+                'Ease out sine': string;
+                'Ease in out sine': string;
+                'Ease in expo': string;
+                'Ease out expo': string;
+                'Ease in out expo': string;
+                'Ease in circ': string;
+                'Ease out circ': string;
+                'Ease in out circ': string;
+                'Ease in back': string;
+                'Ease out back': string;
+                'Ease in out back': string;
+                Scale: string;
+                'Start scale': string;
+                'End scale': string;
+                'Behaviour that applies an alpha transition effect to particles': string;
+                'Start alpha': string;
+                'End alpha': string;
+                Force: string;
+                'Behaviour that forces particles along a specific axis': string;
+                Rotate: string;
+                'Random drift': string;
+                'Random force': string;
+                Delay: string;
+                'Behaviour that causes particles to drift to random coordinates in 3D space': string;
+                Spring: string;
+                'Behaviour that causes particles to spring': string;
+                Factor: string;
+                Friction: string;
+                Attraction: string;
+                'Behaviour that causes particles to be attracted to a target position': string;
+                'Target position': string;
+                Collision: string;
+                'Behaviour that causes particles to move away from other particles they collide with': string;
+                'Mass related': string;
+                'Consider mass when calculating collision displacement': string;
+            };
+            Billboard: string;
+            billboard: {
+                Image: string;
+                "Set top": string;
+                Margin: string;
+                Position: string;
+                Left: string;
+                Right: string;
+                Top: string;
+                Bottom: string;
+                Center: string;
+                Text: string;
+                Content: string;
+                Size: string;
+                Color: string;
+                Weight: string;
+                Italic: string;
+                'Line gap': string;
+                Padding: string;
+                Align: string;
+                'Vertical align': string;
+                'Stroke width': string;
+                'Stroke color': string;
+                Fill: string;
+                'Fill color': string;
+            };
+            "Html panel": string;
+            htmlPanel: {
+                Content: string;
+            };
+            "3D Tiles": string;
+            tiles: {
+                "Color mode": string;
+                "Box bounds": string;
+                "Sphere bounds": string;
+            };
+        };
+        assets: {
+            'Drawing library': string;
+            'Scene library': string;
+        };
+    };
+    setting: {
+        Setting: string;
+        Shortcuts: string;
+        shortcuts: {
+            'Please press a key': string;
+            Translate: string;
+            Rotate: string;
+            Scale: string;
+            Undo: string;
+            Redo: string;
+            Focus: string;
+        };
+        'System Setting': string;
+        system: {
+            'No system Settings are available': string;
+        };
+        'Preview Setting': string;
+        preview: {
+            'Roaming character': string;
+        };
+    };
+    core: {
+        'Any unsaved data will be lost. Are you sure?': string;
+        'Any unsaved data in this scenario will be lost. Do you want to continue?': string;
+        editor: {
+            "Default Camera": string;
+            "Default Scene": string;
+        };
+    };
+    other: {
+        warning: string;
+        Tips: string;
+        Ok: string;
+        Cancel: string;
+        undo: string;
+        redo: string;
+        delete: string;
+        Action: string;
+        Version: string;
+        Loading: string;
+        Load: string;
+        Open: string;
+        Close: string;
+        Enable: string;
+        Minimum: string;
+        Maximum: string;
+        Width: string;
+        Height: string;
+        Depth: string;
+        Coordinate: string;
+        Apply: string;
+        'Query failed': string;
+        'Related document': string;
+        Copy: string;
+        Focus: string;
+        Support: string;
+        Upload: string;
+        Debug: string;
+    };
+    prompt: {
+        'Disable this function in the demonstration environment!': string;
+        'The project is created successfully. Do you want to enter?': string;
+        'Failed to save the cover image': string;
+        'Drag or double click to add to scene': string;
+        'Right-click on the preview': string;
+        'No object selected.': string;
+        'No geometric data for the time being': string;
+        'No material data for the time being': string;
+        'No animation data for the time being': string;
+        "The selected object doesn't have geometry.": string;
+        'No mesh selected': string;
+        'The Undo/Redo History will be cleared. Are you sure?': string;
+        'The history will be preserved across sessions. This can have an impact on performance when working with textures.': string;
+        'Import of glTF asset not possible. Only versions >= 2.0 are supported. Please try to upgrade the file to glTF 2.0 using glTF-Pipeline': string;
+        'Are you sure to delete the scene?': string;
+        'Are you sure to update the scene?': string;
+        Uploading: string;
+        'Please try again later!': string;
+        "Load fail,Please try again later!": string;
+        'There are grammatical errors!': string;
+        'Saved successfully!': string;
+        'Parameter error!': string;
+        "Parse failed": string;
+        "Related modules are under development, unstable versions.": string;
+        "Left click to confirm the drawing point, and right click to complete the drawing.": string;
+        "Your browser does not support the Clipboard API, please use another browser": string;
+        "Successfully copied to clipboard": string;
+        "Failed to copy to clipboard": string;
+        "Please enter the animation name": string;
+        "The name already exists": string;
+        "Failed to create animation": string;
+        "Please select an animation": string;
+        "The animation is running, please stop the animation before performing operations": string;
+        "Can not be applied to the current object": string;
+        'Please enter the text': string;
+        'Click to select or drag the file to this area': string;
+        'Uploading a new file will completely overwrite the original content, do you want to continue?': string;
+        'Are you sure you want to delete this resource?': string;
+        'Are you sure you want to delete it?': string;
+        'Please enter a data source name': string;
+        'Please enter a name for the dataset': string;
+        'Please enter a grouping name for the dataset': string;
+        'This format is not supported, please upload again! Supported formats are:': string;
+        'The entry can not be null': string;
+        'Only Chinese characters, Chinese and English case, numbers, and underscores can be included': string;
+        'Failed to upload': string;
+        'Success to upload': string;
+        'Success to update': string;
+        'Success to delete': string;
+        'Screenshots fail': string;
+    };
+    scene: {
+        'All Projects': string;
+        Type: string;
+        Name: string;
+        Introduction: string;
+        Classification: string;
+        'Project type': string;
+        'Cover Picture': string;
+        Screenshot: string;
+        'Include drawings': string;
+        'Scene data volume': string;
+        'Create time': string;
+        'Update time': string;
+        'Get the scene data': string;
+        'Failed to get scene data': string;
+        'Generate scene data, please wait': string;
+        'Scene data is being regenerated, please wait': string;
+        'Scene information is being saved': string;
+        'Getting texture': string;
+        'Getting geometries': string;
+        'Getting models': string;
+        'Parsing to editor': string;
+        'Loading completed!': string;
+        'Failed to save project!': string;
+        'Scene is packing...': string;
+        'Scene is unpacking...': string;
+        'Scene is being compressed...': string;
+        'The project does not exist!': string;
+    };
+    cesium: {
+        "Please Enter Cesium Token": string;
+        "Default base map": string;
+        "Base map type": string;
+        "Image base map": string;
+        "Vector base map": string;
+        "Mark map": string;
+        map: {
+            Amap: string;
+            Tianditu: string;
+        };
+    };
+    drawing: {
+        Drawing: string;
+        "Get the drawing data": string;
+        "This operation will overwrite the current drawing, and any unsaved data will be lost. Do you want to continue?": string;
+        "adds the current model tag": string;
+        'Please select the model you want to tag': string;
+        "The current model has been tagged": string;
+        "Left-drag to add a mark": string;
+        "drawing reset": string;
+        "Are you sure you want to delete the drawing?": string;
+        "Select the mark whose color you want to change!": string;
+        'Please upload the drawing file': string;
+        "This format is not supported, please upload again! Supported formats are:": string;
+        toolbar: {
+            "Mark color": string;
+            Reset: string;
+            Layer: string;
+            "Add mark": string;
+            Delete: string;
+            Setting: string;
+        };
+    };
+    bim: {
+        "BIM lightweight": string;
+        "BIM lightweight is in progress": string;
+        "BIM lightweight completed": string;
+        "BIM lightweight failed": string;
+        Thumbnail: string;
+        'BIM file': string;
+        "Click or drag the file to this area.Supported formats are:": string;
+        "File name": string;
+        "Please enter the BIM file name": string;
+        'Please upload the BIM file': string;
+        "Upload and lightweight": string;
+        "Failed to upload thumbnail": string;
+        'Failed to upload BIM file': string;
+        In: string;
+        seconds: string;
+        "Whether to load the BIM model into the scene?": string;
+        "New lightweight BIM model received, do you want to view it?": string;
+        "Conversion configuration": string;
+        "Extreme lightweight": string;
+        "Export Property": string;
+        "Conversion view": string;
+        "View name": string;
+        "Please enter the conversion view name": string;
+        "Display style": string;
+        Colour: string;
+        Realistic: string;
+        "View default": string;
+        "Coordinate reference": string;
+        Origin: string;
+        "Project base point": string;
+        "Measuring point": string;
+    };
+    cad: {
+        "CAD parse": string;
+        "CAD upload and parse": string;
+        "CAD file": string;
+        "Upload and parse": string;
+        "CAD parse is in progress": string;
+        "Failed to upload CAD file": string;
+        "CAD parse completed": string;
+        "Do you want to load the preview?": string;
+        "CAD parse failed": string;
+    };
+    preview: {
+        "Scene Tree": string;
+        "Main view": string;
+        "Auto rotation": string;
+        Cutting: string;
+        Measure: string;
+        Distance: string;
+        Area: string;
+        Angle: string;
+        'Clear measuring result': string;
+        Explode: string;
+        Roaming: string;
+        'Mini map': string;
+        Settings: string;
+        "Rotational speed": string;
+        'Explode scalar': string;
+        "Please select initial position": string;
+    };
+    plugin: {
+        "Optional plug-in": string;
+        gltfHandler: {
+            "The model is being optimized...": string;
+            "Select the.glb/.gltf file": string;
+            "Batch processing is supported (up to 10)": string;
+            "You can upload a maximum of 10 files": string;
+            Compress: string;
+            "Floating point compression method.": string;
+            compresses: string;
+            "Meshopt compression level": string;
+            Instance: string;
+            "Use GPU instancing with shared mesh references.": string;
+            "Instance min": string;
+            "Number of instances required for instancing.": string;
+            Flatten: string;
+            "Flatten scene graph.": string;
+            "This item cannot be closed when opening Join": string;
+            Join: string;
+            "Join meshes and reduce draw calls.": string;
+            "Prerequisites: Flatten is enabled": string;
+            Palette: string;
+            "Creates palette textures and merges materials.": string;
+            "Palette min": string;
+            "Minimum number of blocks in the palette texture. If fewer unique material values are found, no palettes will be generated.": string;
+            Prune: string;
+            "Removes properties from the file if they are not referenced by a Scene.": string;
+            "Prune attributes": string;
+            "Whether to prune unused vertex attributes.": string;
+            "Prune leaves": string;
+            "Whether to prune empty leaf nodes.": string;
+            "Prune solid textures": string;
+            "Whether to prune solid (single-color) textures,converting them to material factors.": string;
+            Weld: string;
+            "Merge equivalent vertices.": string;
+            "This item cannot be closed when opening Simplify": string;
+            Simplify: string;
+            "Simplify mesh geometry with meshoptimizer.": string;
+            "Prerequisites: Weld is enabled": string;
+            "Simplify error": string;
+            "Simplification error tolerance, as a fraction of mesh extent.": string;
+            "Simplify lock border": string;
+            "Whether to lock topological borders of the mesh.": string;
+            "Simplify ratio": string;
+            "Target ratio (0-1) of vertices to keep.": string;
+            "Texture compress": string;
+            "AVIF and WebP optimize transfer size;": string;
+            "Auto Compresses in the original format;": string;
+            "none Does not compress.": string;
+            "Texture size": string;
+            "Maximum texture dimensions, in pixels.": string;
+            Optimize: string;
+            "Draco encoder load fail,Refresh the page and try again.": string;
+            "Draco decoder load fail,Refresh the page and try again.": string;
+            "Re-selecting the file will clear the previous optimization result. Do you want to continue?": string;
+            "This operation will clear the relevant optimization results. Do you want to continue?": string;
+            "Import scene": string;
+            Download: string;
+            "Import success!": string;
+        };
+        pointCloudReconstructor: {
+            "The point cloud is being reconstructed...": string;
+            "Select the Point Cloud model file": string;
+            "Please semantically segment the point cloud first": string;
+            "The model is not a point cloud": string;
+            "This operation will empty the associated reconstructions. Do you want to continue?": string;
+            "Re-selecting the file will empty the previous reconstruction. Do you want to continue?": string;
+            "Color tolerance": string;
+            "Color similarity processing, the larger the value, the wider the range of cluster color values.": string;
+            "Distance threshold": string;
+            "Control the sensitivity of object separation, that is, spatial clustering distance threshold.": string;
+            "Min cluster size": string;
+            "Minimum number of cluster points, filtering noise points and small clusters.": string;
+            "Downsample resolution": string;
+            "The grid space division method is used to reduce the number of points, so as to reduce the amount of calculation in the subsequent processing.": string;
+            Reconstruction: string;
+        };
+    };
+    extra: {
+        "New animation": string;
+        "Add keyframe": string;
+        Locked: string;
+        Unlocked: string;
+        "Delete selected keyframes": string;
+        "Jump to first frame": string;
+        "Jump to last frame": string;
+        resource: {
+            model: {
+                Shape: string;
+                Building: string;
+                Person: string;
+                Plant: string;
+                Animal: string;
+                Vehicle: string;
+                Machine: string;
+                Furniture: string;
+                Outdoor: string;
+                Other: string;
+                Group: string;
+                Sprite: string;
+                General: string;
+                Box: string;
+                Circle: string;
+                Torus: string;
+                Cylinder: string;
+                Sphere: string;
+                Plane: string;
+                Ring: string;
+                Tetrahedron: string;
+                Octahedron: string;
+                Dodecahedron: string;
+                Icosahedron: string;
+                Capsule: string;
+                'Double cone': string;
+                TorusKnot: string;
+                Tube: string;
+                Teapot: string;
+                Stall: string;
+                Grass: string;
+                "Maple tree": string;
+                "Dragon spruce": string;
+                "Small tree": string;
+                "Small flower": string;
+                Lemon: string;
+                Rat: string;
+                "Covered car": string;
+                Drill: string;
+                Sofa: string;
+                "Wooden stool": string;
+                "Wooden dining table": string;
+                Baseball: string;
+            };
+            material: {
+                "Wall brick": string;
+                Metal: string;
+                "Red brick": string;
+                "Red sandstone": string;
+                "Rustic stone wall": string;
+                Rusty: string;
+                Gold: string;
+                "Diffused color line": string;
+                "Dynamic checkerboard": string;
+                "Slow smoke": string;
+                "Flow line": string;
+                Flicker: string;
+            };
+            billboard: {
+                Icon: string;
+                Text: string;
+                Location: string;
+                Heart: string;
+                Flag: string;
+                Bookmark: string;
+                Error: string;
+                Correct: string;
+                Warn: string;
+                Notification: string;
+                'Notification message': string;
+                Home: string;
+                Lightbulb: string;
+                Comment: string;
+                Add: string;
+                Read: string;
+                Book: string;
+                Clock: string;
+                'Animal paw print': string;
+                Edit: string;
+                Drafts: string;
+                Refresh: string;
+                Document: string;
+                Building: string;
+                'Building-multiple': string;
+                Store: string;
+                Question: string;
+                Download: string;
+                Share: string;
+                Image: string;
+                Globe: string;
+                Link: string;
+                Chat: string;
+                Send: string;
+                'Send clock': string;
+                Mail: string;
+                Cloud: string;
+                Database: string;
+                Diamond: string;
+                'Area chart': string;
+                'Bar chart': string;
+                'Line chart': string;
+                'Pie chart': string;
+                'Scatter chart': string;
+                'Trending chart': string;
+                Camera: string;
+                Bot: string;
+                Person: string;
+                People: string;
+                Team: string;
+                Beach: string;
+                Setting: string;
+                Webcam: string;
+                Speaker: string;
+                Mic: string;
+                Printer: string;
+                Elevator: string;
+                'Room for mother and infant': string;
+                Restroom: string;
+                'Water closet': string;
+                'Parking lot': string;
+                'Right arrow': string;
+                'Down arrow': string;
+                'Right arrow curving down': string;
+                'Right arrow curving left': string;
+                'Left arrow': string;
+                'Down left arrow': string;
+                'Down right arrow': string;
+                'Up left arrow': string;
+                'Up right arrow': string;
+                'Up arrow': string;
+                'Right arrow curving up': string;
+                'Bus stop': string;
+                Bus: string;
+                'Delivery truck': string;
+                Taxi: string;
+                'Private car': string;
+                Automobile: string;
+                Ambulance: string;
+                Tram: string;
+                Train: string;
+                Airplane: string;
+                ATM: string;
+                Factory: string;
+                'Fire extinguisher': string;
+                'No smoking': string;
+                'No entry': string;
+                Background: string;
+                Background2: string;
+                Background3: string;
+            };
+            "Html panel": string;
+            htmlPanel: {
+                Technology: string;
+                'Factory equipment': string;
+            };
+            particle: {
+                Smoke: string;
+                Fire: string;
+                'Fire line': string;
+                'Fire fly': string;
+                Fireworks: string;
+            };
+            tiles: {
+                'A petrochemical plant': string;
+                'Building group 1': string;
+                Dragon: string;
+            };
+            Expansion: string;
+            expansion: {
+                "Heat map": string;
+                Path: string;
+                "Flat heatmap": string;
+                "Elevation heatmap": string;
+                "Flow path": string;
+                "Flowing light path": string;
+                "Tube path": string;
+                "UI Panel": string;
+                Water: string;
+                "Circular Water Surface": string;
+                "Cylinder Water Pool": string;
+                "Cylinder Water Pool Volume": string;
+                "Square Water Surface": string;
+                "Square Water Pool": string;
+                "Square Water Pool Volume": string;
+            };
+            Light: string;
+            Camera: string;
+        };
+    };
+};
+export default _default;
diff --git a/packages/editor/types/main.d.ts b/packages/editor/types/main.d.ts
new file mode 100644
index 0000000..c8a69d9
--- /dev/null
+++ b/packages/editor/types/main.d.ts
@@ -0,0 +1,4 @@
+import '@/utils/common/init';
+import 'virtual:uno.css';
+import "animate.css/animate.min.css";
+import '@/assets/less/index.less';
diff --git a/packages/editor/types/plugin/glTFHandler/Listr.d.ts b/packages/editor/types/plugin/glTFHandler/Listr.d.ts
new file mode 100644
index 0000000..f51f6ed
--- /dev/null
+++ b/packages/editor/types/plugin/glTFHandler/Listr.d.ts
@@ -0,0 +1,21 @@
+/**
+ * @author ErSan
+ * @email  mlt131220@163.com
+ * @date   2024/9/18 22:24
+ * @description
+ */
+export declare class ListrTask {
+    private title;
+    private taskFn;
+    isFailed: boolean;
+    constructor(title: any, taskFn: any);
+    run(): Promise<void>;
+}
+export declare class Listr {
+    private tasks;
+    constructor(tasks: {
+        title: string;
+        task: (task: any) => Promise<void>;
+    }[]);
+    run(): Promise<void>;
+}
diff --git a/packages/editor/types/plugin/glTFHandler/glTFHandler.d.ts b/packages/editor/types/plugin/glTFHandler/glTFHandler.d.ts
new file mode 100644
index 0000000..0001d74
--- /dev/null
+++ b/packages/editor/types/plugin/glTFHandler/glTFHandler.d.ts
@@ -0,0 +1,28 @@
+import type { ModalReactive } from "naive-ui";
+import type { Plugin } from "@astral3d/engine";
+import { Logger, WebIO } from '@gltf-transform/core';
+export declare const MICROMATCH_OPTIONS: {
+    nocase: boolean;
+    contains: boolean;
+};
+export default class GLTFHandler implements Plugin {
+    icon: string;
+    name: string;
+    version: number;
+    logger: Logger;
+    io: WebIO;
+    modalInstance: ModalReactive | undefined;
+    GLTFHandlerComponentRef: import("vue").Ref<any, any>;
+    dracoScript: {
+        encoder: boolean;
+        decoder: boolean;
+        failMsg: string;
+    };
+    install(): Promise<void>;
+    run(): Promise<void>;
+    finish(): void;
+    uninstall(): void;
+    setLogger(log: string): void;
+    registerDependencies(): Promise<void>;
+    optimize(opts: IPlugin.GLTFHandlerOptimizeModel, inputFile: File, outputFileName?: string): Promise<File | undefined>;
+}
diff --git a/packages/editor/types/plugin/glTFHandler/optimizePng.d.ts b/packages/editor/types/plugin/glTFHandler/optimizePng.d.ts
new file mode 100644
index 0000000..6fd5dd8
--- /dev/null
+++ b/packages/editor/types/plugin/glTFHandler/optimizePng.d.ts
@@ -0,0 +1,2 @@
+import type { Transform } from '@gltf-transform/core';
+export declare const optimizePNG: () => Transform;
diff --git a/packages/editor/types/plugin/glTFHandler/session.d.ts b/packages/editor/types/plugin/glTFHandler/session.d.ts
new file mode 100644
index 0000000..c31d449
--- /dev/null
+++ b/packages/editor/types/plugin/glTFHandler/session.d.ts
@@ -0,0 +1,16 @@
+import { WebIO, Transform, Logger } from '@gltf-transform/core';
+import GLTFHandler from "./glTFHandler";
+export declare class Session {
+    private _io;
+    private _logger;
+    private setLogger;
+    private _input;
+    private _inputName;
+    private _output;
+    private _outputFormat;
+    private _display;
+    constructor(_io: WebIO, _logger: Logger, setLogger: (log: string) => void, _input: string, _inputName: string, _output: string);
+    static create(handler: GLTFHandler, inputFileUrl: string, inputName: string, output: string): Session;
+    setDisplay(display: boolean): this;
+    transform(...transforms: Transform[]): Promise<File>;
+}
diff --git a/packages/editor/types/plugin/glTFHandler/util.d.ts b/packages/editor/types/plugin/glTFHandler/util.d.ts
new file mode 100644
index 0000000..c996116
--- /dev/null
+++ b/packages/editor/types/plugin/glTFHandler/util.d.ts
@@ -0,0 +1,6 @@
+export declare const XMPContext: Record<string, string>;
+export declare function formatLong(x: number): string;
+export declare function formatBytes(bytes: number, decimals?: number): string;
+export declare function dim(str: string): string;
+export declare function encodeGLB(u8: Uint8Array, meta?: Record<string, any>): Promise<Uint8Array<ArrayBufferLike>>;
+export declare function encodePNG(png: Uint8Array): Promise<Uint8Array<ArrayBufferLike>>;
diff --git a/packages/editor/types/plugin/index.d.ts b/packages/editor/types/plugin/index.d.ts
new file mode 100644
index 0000000..ba9b457
--- /dev/null
+++ b/packages/editor/types/plugin/index.d.ts
@@ -0,0 +1 @@
+export declare const installBuiltinPlugin: (viewer: any) => void;
diff --git a/packages/editor/types/plugin/pointCloudReconstructor/PointCloudReconstructor.d.ts b/packages/editor/types/plugin/pointCloudReconstructor/PointCloudReconstructor.d.ts
new file mode 100644
index 0000000..6f400c3
--- /dev/null
+++ b/packages/editor/types/plugin/pointCloudReconstructor/PointCloudReconstructor.d.ts
@@ -0,0 +1,13 @@
+import type { ModalReactive } from "naive-ui";
+import type { Plugin } from "@astral3d/engine";
+export default class PointCloudReconstructor implements Plugin {
+    icon: string;
+    name: string;
+    version: number;
+    modalInstance: ModalReactive | undefined;
+    componentRef: import("vue").Ref<any, any>;
+    install(): Promise<void>;
+    run(): Promise<void>;
+    finish(): void;
+    uninstall(): void;
+}
diff --git a/packages/editor/types/router/index.d.ts b/packages/editor/types/router/index.d.ts
new file mode 100644
index 0000000..a1ae255
--- /dev/null
+++ b/packages/editor/types/router/index.d.ts
@@ -0,0 +1,3 @@
+import type { App } from 'vue';
+export declare const router: import("vue-router").Router;
+export declare function setupRouter(app: App<Element>): void;
diff --git a/packages/editor/types/router/routes.d.ts b/packages/editor/types/router/routes.d.ts
new file mode 100644
index 0000000..6d782a2
--- /dev/null
+++ b/packages/editor/types/router/routes.d.ts
@@ -0,0 +1,5 @@
+export declare const routes: {
+    path: string;
+    name: string;
+    component: () => Promise<typeof import("*.vue")>;
+}[];
diff --git a/packages/editor/types/store/index.d.ts b/packages/editor/types/store/index.d.ts
new file mode 100644
index 0000000..9bf023c
--- /dev/null
+++ b/packages/editor/types/store/index.d.ts
@@ -0,0 +1,4 @@
+import type { App } from 'vue';
+declare const store: import("pinia").Pinia;
+export declare function setupStore(app: App<Element>): void;
+export { store };
diff --git a/packages/editor/types/store/modules/animation.d.ts b/packages/editor/types/store/modules/animation.d.ts
new file mode 100644
index 0000000..6b07b08
--- /dev/null
+++ b/packages/editor/types/store/modules/animation.d.ts
@@ -0,0 +1,372 @@
+import type { TimelineTrack } from "@astral3d/engine";
+export interface IAnimationItem {
+    name: string;
+    uuid: string;
+    isRunning: boolean;
+    isPaused: boolean;
+}
+/**
+ * 模型动画（动画编辑器）
+ */
+export declare const useAnimationStore: import("pinia").StoreDefinition<"model-animation", Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "duration" | "list" | "current" | "trackTree" | "mixerTimeScale" | "currentTime">, Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "getFormattedDuration" | "getFormattedCurrentTime">, Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "pause" | "play" | "getStepVal" | "setTimelineInstance" | "setList" | "setCurrent" | "stop" | "jumpToStart" | "jumpToEnd" | "addKeyframe" | "setPlayTime">>;
+export declare function useAnimationStoreWithOut(): import("pinia").Store<"model-animation", Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "duration" | "list" | "current" | "trackTree" | "mixerTimeScale" | "currentTime">, Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "getFormattedDuration" | "getFormattedCurrentTime">, Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "pause" | "play" | "getStepVal" | "setTimelineInstance" | "setList" | "setCurrent" | "stop" | "jumpToStart" | "jumpToEnd" | "addKeyframe" | "setPlayTime">>;
diff --git a/packages/editor/types/store/modules/assets.d.ts b/packages/editor/types/store/modules/assets.d.ts
new file mode 100644
index 0000000..f4aa084
--- /dev/null
+++ b/packages/editor/types/store/modules/assets.d.ts
@@ -0,0 +1,185 @@
+/**
+ * 资产管理
+ */
+export declare const useAssetsStore: import("pinia").StoreDefinition<"assets-manager", Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, "categories">, Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, never>, Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, "getCategoryChildren" | "fetchCategory">>;
+export declare function useAssetsStoreWithOut(): import("pinia").Store<"assets-manager", Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, "categories">, Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, never>, Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, "getCategoryChildren" | "fetchCategory">>;
diff --git a/packages/editor/types/store/modules/drag.d.ts b/packages/editor/types/store/modules/drag.d.ts
new file mode 100644
index 0000000..0516d8b
--- /dev/null
+++ b/packages/editor/types/store/modules/drag.d.ts
@@ -0,0 +1,291 @@
+import { Vector2 } from "three";
+interface IDragState {
+    data: any;
+    actionTarget: "" | "addToScene";
+    endArea: "" | "Drawing" | "Scene";
+    endPosition: Vector2;
+}
+/**
+ * 拖拽相关
+ */
+export declare const useDragStore: import("pinia").StoreDefinition<"drag", IDragState, {
+    getData: (state: {
+        data: any;
+        actionTarget: "" | "addToScene";
+        endArea: "" | "Drawing" | "Scene";
+        endPosition: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            readonly isVector2: true;
+            set: (x: number, y: number) => Vector2;
+            setScalar: (scalar: number) => Vector2;
+            setX: (x: number) => Vector2;
+            setY: (y: number) => Vector2;
+            setComponent: (index: number, value: number) => Vector2;
+            getComponent: (index: number) => number;
+            clone: () => Vector2;
+            copy: (v: import("three").Vector2Like) => Vector2;
+            add: (v: import("three").Vector2Like) => Vector2;
+            addScalar: (s: number) => Vector2;
+            addVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            addScaledVector: (v: import("three").Vector2Like, s: number) => Vector2;
+            sub: (v: import("three").Vector2Like) => Vector2;
+            subScalar: (s: number) => Vector2;
+            subVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            multiply: (v: import("three").Vector2Like) => Vector2;
+            multiplyScalar: (scalar: number) => Vector2;
+            divide: (v: import("three").Vector2Like) => Vector2;
+            divideScalar: (s: number) => Vector2;
+            applyMatrix3: (m: import("three").Matrix3) => Vector2;
+            min: (v: import("three").Vector2Like) => Vector2;
+            max: (v: import("three").Vector2Like) => Vector2;
+            clamp: (min: import("three").Vector2Like, max: import("three").Vector2Like) => Vector2;
+            clampScalar: (min: number, max: number) => Vector2;
+            clampLength: (min: number, max: number) => Vector2;
+            floor: () => Vector2;
+            ceil: () => Vector2;
+            round: () => Vector2;
+            roundToZero: () => Vector2;
+            negate: () => Vector2;
+            dot: (v: import("three").Vector2Like) => number;
+            cross: (v: import("three").Vector2Like) => number;
+            lengthSq: () => number;
+            length: () => number;
+            manhattanLength: () => number;
+            normalize: () => Vector2;
+            angle: () => number;
+            angleTo: (v: Vector2) => number;
+            distanceTo: (v: import("three").Vector2Like) => number;
+            distanceToSquared: (v: import("three").Vector2Like) => number;
+            manhattanDistanceTo: (v: import("three").Vector2Like) => number;
+            setLength: (length: number) => Vector2;
+            lerp: (v: import("three").Vector2Like, alpha: number) => Vector2;
+            lerpVectors: (v1: import("three").Vector2Like, v2: import("three").Vector2Like, alpha: number) => Vector2;
+            equals: (v: import("three").Vector2Like) => boolean;
+            fromArray: (array: number[] | ArrayLike<number>, offset?: number) => Vector2;
+            toArray: {
+                (array?: number[], offset?: number): number[];
+                (array?: import("three").Vector2Tuple, offset?: 0): import("three").Vector2Tuple;
+                (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
+            };
+            fromBufferAttribute: (attribute: import("three").BufferAttribute, index: number) => Vector2;
+            rotateAround: (center: import("three").Vector2Like, angle: number) => Vector2;
+            random: () => Vector2;
+            [Symbol.iterator]: () => Iterator<number>;
+        };
+    } & import("pinia").PiniaCustomStateProperties<IDragState>) => any;
+    getActionTarget: (state: {
+        data: any;
+        actionTarget: "" | "addToScene";
+        endArea: "" | "Drawing" | "Scene";
+        endPosition: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            readonly isVector2: true;
+            set: (x: number, y: number) => Vector2;
+            setScalar: (scalar: number) => Vector2;
+            setX: (x: number) => Vector2;
+            setY: (y: number) => Vector2;
+            setComponent: (index: number, value: number) => Vector2;
+            getComponent: (index: number) => number;
+            clone: () => Vector2;
+            copy: (v: import("three").Vector2Like) => Vector2;
+            add: (v: import("three").Vector2Like) => Vector2;
+            addScalar: (s: number) => Vector2;
+            addVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            addScaledVector: (v: import("three").Vector2Like, s: number) => Vector2;
+            sub: (v: import("three").Vector2Like) => Vector2;
+            subScalar: (s: number) => Vector2;
+            subVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            multiply: (v: import("three").Vector2Like) => Vector2;
+            multiplyScalar: (scalar: number) => Vector2;
+            divide: (v: import("three").Vector2Like) => Vector2;
+            divideScalar: (s: number) => Vector2;
+            applyMatrix3: (m: import("three").Matrix3) => Vector2;
+            min: (v: import("three").Vector2Like) => Vector2;
+            max: (v: import("three").Vector2Like) => Vector2;
+            clamp: (min: import("three").Vector2Like, max: import("three").Vector2Like) => Vector2;
+            clampScalar: (min: number, max: number) => Vector2;
+            clampLength: (min: number, max: number) => Vector2;
+            floor: () => Vector2;
+            ceil: () => Vector2;
+            round: () => Vector2;
+            roundToZero: () => Vector2;
+            negate: () => Vector2;
+            dot: (v: import("three").Vector2Like) => number;
+            cross: (v: import("three").Vector2Like) => number;
+            lengthSq: () => number;
+            length: () => number;
+            manhattanLength: () => number;
+            normalize: () => Vector2;
+            angle: () => number;
+            angleTo: (v: Vector2) => number;
+            distanceTo: (v: import("three").Vector2Like) => number;
+            distanceToSquared: (v: import("three").Vector2Like) => number;
+            manhattanDistanceTo: (v: import("three").Vector2Like) => number;
+            setLength: (length: number) => Vector2;
+            lerp: (v: import("three").Vector2Like, alpha: number) => Vector2;
+            lerpVectors: (v1: import("three").Vector2Like, v2: import("three").Vector2Like, alpha: number) => Vector2;
+            equals: (v: import("three").Vector2Like) => boolean;
+            fromArray: (array: number[] | ArrayLike<number>, offset?: number) => Vector2;
+            toArray: {
+                (array?: number[], offset?: number): number[];
+                (array?: import("three").Vector2Tuple, offset?: 0): import("three").Vector2Tuple;
+                (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
+            };
+            fromBufferAttribute: (attribute: import("three").BufferAttribute, index: number) => Vector2;
+            rotateAround: (center: import("three").Vector2Like, angle: number) => Vector2;
+            random: () => Vector2;
+            [Symbol.iterator]: () => Iterator<number>;
+        };
+    } & import("pinia").PiniaCustomStateProperties<IDragState>) => "" | "addToScene";
+}, {
+    setData(data: any): void;
+    setActionTarget(actionTarget: any): void;
+    setEndArea(area: any): void;
+}>;
+export declare function useDragStoreWithOut(): import("pinia").Store<"drag", IDragState, {
+    getData: (state: {
+        data: any;
+        actionTarget: "" | "addToScene";
+        endArea: "" | "Drawing" | "Scene";
+        endPosition: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            readonly isVector2: true;
+            set: (x: number, y: number) => Vector2;
+            setScalar: (scalar: number) => Vector2;
+            setX: (x: number) => Vector2;
+            setY: (y: number) => Vector2;
+            setComponent: (index: number, value: number) => Vector2;
+            getComponent: (index: number) => number;
+            clone: () => Vector2;
+            copy: (v: import("three").Vector2Like) => Vector2;
+            add: (v: import("three").Vector2Like) => Vector2;
+            addScalar: (s: number) => Vector2;
+            addVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            addScaledVector: (v: import("three").Vector2Like, s: number) => Vector2;
+            sub: (v: import("three").Vector2Like) => Vector2;
+            subScalar: (s: number) => Vector2;
+            subVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            multiply: (v: import("three").Vector2Like) => Vector2;
+            multiplyScalar: (scalar: number) => Vector2;
+            divide: (v: import("three").Vector2Like) => Vector2;
+            divideScalar: (s: number) => Vector2;
+            applyMatrix3: (m: import("three").Matrix3) => Vector2;
+            min: (v: import("three").Vector2Like) => Vector2;
+            max: (v: import("three").Vector2Like) => Vector2;
+            clamp: (min: import("three").Vector2Like, max: import("three").Vector2Like) => Vector2;
+            clampScalar: (min: number, max: number) => Vector2;
+            clampLength: (min: number, max: number) => Vector2;
+            floor: () => Vector2;
+            ceil: () => Vector2;
+            round: () => Vector2;
+            roundToZero: () => Vector2;
+            negate: () => Vector2;
+            dot: (v: import("three").Vector2Like) => number;
+            cross: (v: import("three").Vector2Like) => number;
+            lengthSq: () => number;
+            length: () => number;
+            manhattanLength: () => number;
+            normalize: () => Vector2;
+            angle: () => number;
+            angleTo: (v: Vector2) => number;
+            distanceTo: (v: import("three").Vector2Like) => number;
+            distanceToSquared: (v: import("three").Vector2Like) => number;
+            manhattanDistanceTo: (v: import("three").Vector2Like) => number;
+            setLength: (length: number) => Vector2;
+            lerp: (v: import("three").Vector2Like, alpha: number) => Vector2;
+            lerpVectors: (v1: import("three").Vector2Like, v2: import("three").Vector2Like, alpha: number) => Vector2;
+            equals: (v: import("three").Vector2Like) => boolean;
+            fromArray: (array: number[] | ArrayLike<number>, offset?: number) => Vector2;
+            toArray: {
+                (array?: number[], offset?: number): number[];
+                (array?: import("three").Vector2Tuple, offset?: 0): import("three").Vector2Tuple;
+                (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
+            };
+            fromBufferAttribute: (attribute: import("three").BufferAttribute, index: number) => Vector2;
+            rotateAround: (center: import("three").Vector2Like, angle: number) => Vector2;
+            random: () => Vector2;
+            [Symbol.iterator]: () => Iterator<number>;
+        };
+    } & import("pinia").PiniaCustomStateProperties<IDragState>) => any;
+    getActionTarget: (state: {
+        data: any;
+        actionTarget: "" | "addToScene";
+        endArea: "" | "Drawing" | "Scene";
+        endPosition: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            readonly isVector2: true;
+            set: (x: number, y: number) => Vector2;
+            setScalar: (scalar: number) => Vector2;
+            setX: (x: number) => Vector2;
+            setY: (y: number) => Vector2;
+            setComponent: (index: number, value: number) => Vector2;
+            getComponent: (index: number) => number;
+            clone: () => Vector2;
+            copy: (v: import("three").Vector2Like) => Vector2;
+            add: (v: import("three").Vector2Like) => Vector2;
+            addScalar: (s: number) => Vector2;
+            addVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            addScaledVector: (v: import("three").Vector2Like, s: number) => Vector2;
+            sub: (v: import("three").Vector2Like) => Vector2;
+            subScalar: (s: number) => Vector2;
+            subVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            multiply: (v: import("three").Vector2Like) => Vector2;
+            multiplyScalar: (scalar: number) => Vector2;
+            divide: (v: import("three").Vector2Like) => Vector2;
+            divideScalar: (s: number) => Vector2;
+            applyMatrix3: (m: import("three").Matrix3) => Vector2;
+            min: (v: import("three").Vector2Like) => Vector2;
+            max: (v: import("three").Vector2Like) => Vector2;
+            clamp: (min: import("three").Vector2Like, max: import("three").Vector2Like) => Vector2;
+            clampScalar: (min: number, max: number) => Vector2;
+            clampLength: (min: number, max: number) => Vector2;
+            floor: () => Vector2;
+            ceil: () => Vector2;
+            round: () => Vector2;
+            roundToZero: () => Vector2;
+            negate: () => Vector2;
+            dot: (v: import("three").Vector2Like) => number;
+            cross: (v: import("three").Vector2Like) => number;
+            lengthSq: () => number;
+            length: () => number;
+            manhattanLength: () => number;
+            normalize: () => Vector2;
+            angle: () => number;
+            angleTo: (v: Vector2) => number;
+            distanceTo: (v: import("three").Vector2Like) => number;
+            distanceToSquared: (v: import("three").Vector2Like) => number;
+            manhattanDistanceTo: (v: import("three").Vector2Like) => number;
+            setLength: (length: number) => Vector2;
+            lerp: (v: import("three").Vector2Like, alpha: number) => Vector2;
+            lerpVectors: (v1: import("three").Vector2Like, v2: import("three").Vector2Like, alpha: number) => Vector2;
+            equals: (v: import("three").Vector2Like) => boolean;
+            fromArray: (array: number[] | ArrayLike<number>, offset?: number) => Vector2;
+            toArray: {
+                (array?: number[], offset?: number): number[];
+                (array?: import("three").Vector2Tuple, offset?: 0): import("three").Vector2Tuple;
+                (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
+            };
+            fromBufferAttribute: (attribute: import("three").BufferAttribute, index: number) => Vector2;
+            rotateAround: (center: import("three").Vector2Like, angle: number) => Vector2;
+            random: () => Vector2;
+            [Symbol.iterator]: () => Iterator<number>;
+        };
+    } & import("pinia").PiniaCustomStateProperties<IDragState>) => "" | "addToScene";
+}, {
+    setData(data: any): void;
+    setActionTarget(actionTarget: any): void;
+    setEndArea(area: any): void;
+}>;
+export {};
diff --git a/packages/editor/types/store/modules/globalConfig.d.ts b/packages/editor/types/store/modules/globalConfig.d.ts
new file mode 100644
index 0000000..b916589
--- /dev/null
+++ b/packages/editor/types/store/modules/globalConfig.d.ts
@@ -0,0 +1,66 @@
+import type { GlobalTheme } from 'naive-ui';
+/**
+ * 全局配置
+ */
+export declare const useGlobalConfigStore: import("pinia").StoreDefinition<"global-config", Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, "theme" | "locale" | "mainColor" | "loading" | "loadingText">, Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, never>, Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, "getProviderTheme" | "setTheme" | "setLocale" | "setPrimaryColor">>;
+export declare function useGlobalConfigStoreWithOut(): import("pinia").Store<"global-config", Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, "theme" | "locale" | "mainColor" | "loading" | "loadingText">, Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, never>, Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, "getProviderTheme" | "setTheme" | "setLocale" | "setPrimaryColor">>;
diff --git a/packages/editor/types/store/modules/plugin.d.ts b/packages/editor/types/store/modules/plugin.d.ts
new file mode 100644
index 0000000..1ec6b67
--- /dev/null
+++ b/packages/editor/types/store/modules/plugin.d.ts
@@ -0,0 +1,62 @@
+export declare const usePluginStore: import("pinia").StoreDefinition<"plugin", Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, "plugins">, Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, never>, Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, "getPluginsList" | "setPlugins" | "addPlugin" | "removePlugin">>;
+export declare function usePluginStoreWithOut(): import("pinia").Store<"plugin", Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, "plugins">, Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, never>, Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, "getPluginsList" | "setPlugins" | "addPlugin" | "removePlugin">>;
diff --git a/packages/editor/types/store/modules/previewOperation.d.ts b/packages/editor/types/store/modules/previewOperation.d.ts
new file mode 100644
index 0000000..e8a664d
--- /dev/null
+++ b/packages/editor/types/store/modules/previewOperation.d.ts
@@ -0,0 +1,22 @@
+import type { Component } from 'vue';
+export interface IPreviewOperation {
+    name: string;
+    active?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    show?: boolean;
+    icon: Component;
+    children?: {
+        [key: string]: IPreviewOperation;
+    };
+}
+interface IPreviewOperationState {
+    menuList: {
+        [key: string]: IPreviewOperation;
+    };
+    autoRotateSpeed: number;
+    explodeScalar: number;
+}
+export declare const usePreviewOperationStore: import("pinia").StoreDefinition<"previewOperation", IPreviewOperationState, {}, {}>;
+export declare function usePreviewOperationStoreWithOut(): import("pinia").Store<"previewOperation", IPreviewOperationState, {}, {}>;
+export {};
diff --git a/packages/editor/types/store/modules/websocket.d.ts b/packages/editor/types/store/modules/websocket.d.ts
new file mode 100644
index 0000000..3dac1a3
--- /dev/null
+++ b/packages/editor/types/store/modules/websocket.d.ts
@@ -0,0 +1,131 @@
+/**
+ * websocket相关
+ */
+export declare const useWebsocketStore: import("pinia").StoreDefinition<"websocket", Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, "ws" | "uname">, Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, never>, Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, "send" | "getIsOpen" | "setWebsocket" | "setUname">>;
+export declare function useWebsocketStoreWithOut(): import("pinia").Store<"websocket", Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, "ws" | "uname">, Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, never>, Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, "send" | "getIsOpen" | "setWebsocket" | "setUname">>;
diff --git a/packages/editor/types/utils/common/base64.d.ts b/packages/editor/types/utils/common/base64.d.ts
new file mode 100644
index 0000000..0f27d6a
--- /dev/null
+++ b/packages/editor/types/utils/common/base64.d.ts
@@ -0,0 +1,12 @@
+/**
+ * byte数组转换成base64 数据
+ * @param {Array<byte>} buffer
+ * @return {string} base64 string
+ */
+export declare function _arrayBufferToBase64(buffer: any): string;
+/**
+ * base64数据转换成byte数组
+ * @param {string} base64
+ * @return {string} buffer
+ */
+export declare function _base64ToArrayBuffer(base64: any): ArrayBuffer;
diff --git a/packages/editor/types/utils/common/color.d.ts b/packages/editor/types/utils/common/color.d.ts
new file mode 100644
index 0000000..ba40983
--- /dev/null
+++ b/packages/editor/types/utils/common/color.d.ts
@@ -0,0 +1 @@
+export declare function decToRgb(number: number): string;
diff --git a/packages/editor/types/utils/common/constant.d.ts b/packages/editor/types/utils/common/constant.d.ts
new file mode 100644
index 0000000..bf7af90
--- /dev/null
+++ b/packages/editor/types/utils/common/constant.d.ts
@@ -0,0 +1,24 @@
+/**
+ * @author ErSan
+ * @email  mlt131220@163.com
+ * @date   2024/3/26 9:57
+ * @description 全局常量
+ */
+export declare const MODEL_SUPPORT_TYPE: string[];
+export declare const ASSET_UPLOAD_SUPPORT_TYPE: {
+    Model: string[];
+    Material: string[];
+    Texture: string[];
+    Billboard: string[];
+    HDR: string[];
+    Tiles: string[];
+};
+export declare const NEED_CONVERT_BIM_MODEL: string[];
+export declare const DRAWING_SUPPORT_TYPE: string[];
+export declare const NEED_CONVERT_DRAWING: string[];
+export declare const DOC_SUPPORT_TYPE: string[];
+export declare const SCENE_TYPE: {
+    label: string;
+    value: string;
+}[];
+export declare const DefaultScreenshot = "/static/images/placeholder/\u622A\u5C4F\u5360\u4F4D\u56FE.png";
diff --git a/packages/editor/types/utils/common/dateTime.d.ts b/packages/editor/types/utils/common/dateTime.d.ts
new file mode 100644
index 0000000..bdf49e1
--- /dev/null
+++ b/packages/editor/types/utils/common/dateTime.d.ts
@@ -0,0 +1 @@
+export declare function dateTimeFormat(fmt: any): any;
diff --git a/packages/editor/types/utils/common/file.d.ts b/packages/editor/types/utils/common/file.d.ts
new file mode 100644
index 0000000..8666a81
--- /dev/null
+++ b/packages/editor/types/utils/common/file.d.ts
@@ -0,0 +1,13 @@
+/**
+ * 通过Fetch API下载文件/图片（支持跨域/Blob处理）
+ * @param {string} url 文件地址
+ * @param {string} filename 保存的文件名
+ */
+export declare function downloadWithFetch(url: string, filename?: string): Promise<void>;
+/**
+ * 文件大小 字节转换单位
+ * @param {number} size
+ * @returns {string|*}
+ */
+export declare const filterSize: (size: number) => string | any;
+export declare const getServiceStaticFile: (url: string) => string;
diff --git a/packages/editor/types/utils/common/init.d.ts b/packages/editor/types/utils/common/init.d.ts
new file mode 100644
index 0000000..a030c8f
--- /dev/null
+++ b/packages/editor/types/utils/common/init.d.ts
@@ -0,0 +1 @@
+import "../signals/signalRegister";
diff --git a/packages/editor/types/utils/common/render.d.ts b/packages/editor/types/utils/common/render.d.ts
new file mode 100644
index 0000000..83af080
--- /dev/null
+++ b/packages/editor/types/utils/common/render.d.ts
@@ -0,0 +1,9 @@
+import type { Component } from 'vue';
+/**
+ * 渲染icon
+ * @param icon vicons
+ * @returns
+ */
+export declare function renderIcon(icon: Component): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;
diff --git a/packages/editor/types/utils/common/scenes.d.ts b/packages/editor/types/utils/common/scenes.d.ts
new file mode 100644
index 0000000..7384758
--- /dev/null
+++ b/packages/editor/types/utils/common/scenes.d.ts
@@ -0,0 +1,25 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/Addons';
+export interface IModel extends THREE.Object3D {
+    metadata: Object;
+}
+export declare function getMaterialName(material: any): any;
+export declare function getObjectType(object: any): "Camera" | "Line" | "Scene" | "Light" | "Mesh" | "Points" | "Object3D";
+/**
+ * 获取当前选中模型 path
+ */
+export declare function getSelectedModelPath(): string;
+export declare function screenToWorld(x: number, y: number): THREE.Vector3;
+export declare function reBufferGeometryUv(geometry: THREE.BufferGeometry): void;
+export declare function setUserData(object: IModel, key: string, value: any): void;
+export declare function setMetaData(object: IModel, key: string, value: any): void;
+/**
+ * 创建基础场景（会用于轻量展示）
+ */
+export declare function createBasicScene(container: HTMLElement): {
+    scene: THREE.Scene;
+    camera: THREE.PerspectiveCamera;
+    renderer: THREE.WebGLRenderer;
+    controls: OrbitControls;
+    dispose: () => void;
+};
diff --git a/packages/editor/types/utils/common/utils.d.ts b/packages/editor/types/utils/common/utils.d.ts
new file mode 100644
index 0000000..4e01c3e
--- /dev/null
+++ b/packages/editor/types/utils/common/utils.d.ts
@@ -0,0 +1,41 @@
+import type { TreeOption } from 'naive-ui';
+export declare function escapeHTML(html: string): string;
+/**
+ * naive UI树结构寻找对应节点位置及所处父节点
+ * @param node 目标节点
+ * @param nodes 树数据
+ */
+export declare function findSiblingsAndIndex(node: TreeOption, nodes?: TreeOption[]): [TreeOption[], number] | [null, null];
+export declare function base64ToFile(dataurl: any, filename: any): File;
+/**
+ * 求次幂
+ */
+export declare function pow1024(num: any): number;
+/**
+ * 动态添加script
+ * @param src
+ * @param async
+ */
+export declare function loadScript(src: string, async?: boolean): Promise<unknown>;
+/**
+ * 复制到剪切板
+ * @param text
+ */
+export declare function copyToClipboard(text: string): Promise<unknown>;
+/**
+ * 获取rem的px值
+ */
+export declare function remToPxNumber(rem: number): number;
+/**
+ * 动态注入脚本，并监听执行完毕事件
+ * @param {string} src
+ */
+export declare function injectJS(src: any): Promise<unknown>;
+/**
+ * 在树形结构中查找指定 key 的节点（深度优先搜索）
+ */
+export declare function findTreeNode(tree: TreeOption[], targetKey: string | number): TreeOption | null;
+/**
+ * 使用深度优先遍历（DFS）递归算法，为没有子节点的节点添加 isLeaf: true 属性
+ */
+export declare function markLeafNodes(tree: TreeOption[]): void;
diff --git a/packages/editor/types/utils/common/verify.d.ts b/packages/editor/types/utils/common/verify.d.ts
new file mode 100644
index 0000000..6010481
--- /dev/null
+++ b/packages/editor/types/utils/common/verify.d.ts
@@ -0,0 +1,2 @@
+export declare function formItemIsFile(_: any, value: File | null): Promise<void>;
+export declare function formItemNotNil(_: any, value: any): Promise<void>;
diff --git a/packages/editor/types/utils/drawing/drawRect.d.ts b/packages/editor/types/utils/drawing/drawRect.d.ts
new file mode 100644
index 0000000..82ad1bd
--- /dev/null
+++ b/packages/editor/types/utils/drawing/drawRect.d.ts
@@ -0,0 +1,78 @@
+/**
+ * 画布中绘制矩形
+ * @param {HTMLCanvasElement}  canvas 画布对象
+ * @param {Array<IDrawingMark>} list 矩形数组
+ **/
+export declare class DrawRect {
+    private canvas;
+    private parentElement;
+    private ctx;
+    private readonly list;
+    selectRectIndex: number;
+    private hoverRectIndex;
+    private sX;
+    private sY;
+    private downClientX;
+    private downClientY;
+    private zoom;
+    private leftMouseDown;
+    private isCanvasDrag;
+    private canvasOffsetX;
+    private canvasOffsetY;
+    private isDrag;
+    private isDraged;
+    rectColor: string;
+    rectSelectColor: string;
+    private dragRect;
+    constructor(canvas: HTMLCanvasElement, parentElement: HTMLDivElement);
+    init(): void;
+    /**
+     * 准备开始画矩形标记框
+     * @public
+     */
+    addRect(): void;
+    exitRect(): void;
+    /**
+     * 删除rect
+     */
+    deleteRect(): void;
+    /**
+     * 图纸复位
+     */
+    canvasReset(): void;
+    /**
+     * 修改当前绘制的颜色
+     * @param {string} color 颜色
+     */
+    setRectColor(color: string): void;
+    get selectRectColor(): string | undefined;
+    /**
+     * 高亮选中的模型对应的rect
+     * @param {string} uuid modelUuid
+     */
+    selectRect(uuid: string): void;
+    private onmousemove;
+    /**
+     * 鼠标按下时
+     * @param ed
+     * @private
+     */
+    private onmousedown;
+    private handleMouseDown;
+    /**
+     * 鼠标抬起时
+     * @private
+     */
+    private onmouseup;
+    private onmouseleave;
+    private onmousewheel;
+    /**
+     * 重新绘制画布
+     */
+    reDrawCanvas(showSelectLineColor?: boolean): void;
+    private onParentMouseDown;
+    private onParentMouseUp;
+    private onParentMouseMove;
+    private onParentMouseLeave;
+    dispose(): void;
+}
diff --git a/packages/editor/types/utils/preview/menuOperation.d.ts b/packages/editor/types/utils/preview/menuOperation.d.ts
new file mode 100644
index 0000000..2c49203
--- /dev/null
+++ b/packages/editor/types/utils/preview/menuOperation.d.ts
@@ -0,0 +1,44 @@
+import * as THREE from 'three';
+import { ClippedEdgesBox, Measure, ModelExplode, Roaming, MiniMap } from "@astral3d/engine";
+export declare class MenuOperation {
+    static InitControlsState: string;
+    static lastRoadCameraPos: THREE.Vector3;
+    static lastRoadCameraTarget: THREE.Vector3;
+    static explodeLayer: number;
+    static explodeModel: THREE.Object3D | null;
+    static _clippedEdgesBox: ClippedEdgesBox | null;
+    static _measure: Measure | null;
+    static _explode: ModelExplode | null;
+    static _roaming: Roaming | null;
+    static _miniMap: MiniMap | null;
+    static Init(key: string): void;
+    static get ClippedEdgesBox(): ClippedEdgesBox;
+    static get Measure(): Measure;
+    static get Explode(): ModelExplode;
+    static get Roaming(): Roaming;
+    static get MiniMap(): MiniMap;
+    /**
+     * 还原视角
+     */
+    static toHome(): void;
+    /**
+     * 自动旋转
+     */
+    static autoRotate(): void;
+    /**
+     * 剖切
+     */
+    static cutting(): void;
+    static distance(): void;
+    static angle(): void;
+    static area(): void;
+    static clearMeasure(): void;
+    static explode(): void;
+    static roaming(): void;
+    static enterRoaming(): void;
+    static leaveRoaming(): void;
+    static miniMap(): void;
+    static settings(): void;
+    static fullscreen(): void;
+    static exitFullscreen(): void;
+}
diff --git a/packages/editor/types/utils/service/error.d.ts b/packages/editor/types/utils/service/error.d.ts
new file mode 100644
index 0000000..ea5030f
--- /dev/null
+++ b/packages/editor/types/utils/service/error.d.ts
@@ -0,0 +1,22 @@
+import type { AxiosError, AxiosResponse } from 'axios';
+import { Service } from "../../../types/network";
+/**
+ * 策略模式
+ * @param actions 每一种可能执行的操作
+ */
+export declare function exeStrategyActions(actions: Common.StrategyAction[]): void;
+/**
+ * 处理axios请求失败的错误
+ * @param axiosError - 错误
+ */
+export declare function handleAxiosError(axiosError: AxiosError): Service.RequestError;
+/**
+ * 处理请求成功后的错误
+ * @param response - 请求的响应
+ */
+export declare function handleResponseError(response: AxiosResponse): Service.RequestError;
+/**
+ * 处理后端返回的错误(业务错误)
+ * @param backendResult - 后端接口的响应数据
+ */
+export declare function handleBackendError(backendResult: Record<string, any>, config: Service.BackendResultConfig): Service.RequestError;
diff --git a/packages/editor/types/utils/service/fetchController.d.ts b/packages/editor/types/utils/service/fetchController.d.ts
new file mode 100644
index 0000000..38ff703
--- /dev/null
+++ b/packages/editor/types/utils/service/fetchController.d.ts
@@ -0,0 +1,8 @@
+/**
+ * 创建一个handlerFetch
+ *
+ * @param limit 并发控制
+ * @param timeout 超时设
+ * @return function 返回一个函数
+ */
+export declare function fetchController(limit: number, timeout: number | boolean): (url: string, options?: any) => void;
diff --git a/packages/editor/types/utils/service/handler.d.ts b/packages/editor/types/utils/service/handler.d.ts
new file mode 100644
index 0000000..4d6635f
--- /dev/null
+++ b/packages/editor/types/utils/service/handler.d.ts
@@ -0,0 +1,5 @@
+import { Service } from "~/network";
+/** 统一失败和成功的请求结果的数据类型 */
+export declare function handleServiceResult(error: Service.RequestError | null, data: any, other?: any): Promise<any>;
+/** 请求结果的适配器：用于接收适配器函数和请求结果 */
+export declare function adapter<T extends Service.ServiceAdapter>(adapterFun: T, ...args: Service.MultiRequestResult<any>): Service.RequestResult<ReturnType<T>>;
diff --git a/packages/editor/types/utils/service/index.d.ts b/packages/editor/types/utils/service/index.d.ts
new file mode 100644
index 0000000..9eb00f1
--- /dev/null
+++ b/packages/editor/types/utils/service/index.d.ts
@@ -0,0 +1,2 @@
+export * from './error';
+export * from './handler';
diff --git a/packages/editor/types/utils/service/msg.d.ts b/packages/editor/types/utils/service/msg.d.ts
new file mode 100644
index 0000000..30a8f60
--- /dev/null
+++ b/packages/editor/types/utils/service/msg.d.ts
@@ -0,0 +1,5 @@
+/**
+ * 显示错误信息
+ * @param error
+ */
+export declare function showErrorMsg(error: Service.RequestError): void;
diff --git a/packages/editor/types/utils/signals/signalRegister.d.ts b/packages/editor/types/utils/signals/signalRegister.d.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/packages/editor/types/utils/signals/signalRegister.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/packages/editor/types/utils/storage/config.d.ts b/packages/editor/types/utils/storage/config.d.ts
new file mode 100644
index 0000000..f4b74f3
--- /dev/null
+++ b/packages/editor/types/utils/storage/config.d.ts
@@ -0,0 +1,12 @@
+import type { Storage } from "@astral3d/engine";
+export default class Config {
+    private static storage;
+    static config: {
+        [s: string]: any;
+    };
+    static initialize(storage: Storage): void;
+    static getKey(key: string): any;
+    static setKey(...args: any[]): void;
+    static clear(): void;
+}
+export declare const initializeConfig: (storage: any) => void;
diff --git a/packages/editor/types/utils/wasm/inject.d.ts b/packages/editor/types/utils/wasm/inject.d.ts
new file mode 100644
index 0000000..6270852
--- /dev/null
+++ b/packages/editor/types/utils/wasm/inject.d.ts
@@ -0,0 +1,4 @@
+import "@/utils/wasm/wasm_exec.js";
+export declare function injectWasm(opts: {
+    wasmUrl: string;
+}): Promise<any>;
diff --git a/packages/editor/types/utils/wasm/optimize.d.ts b/packages/editor/types/utils/wasm/optimize.d.ts
new file mode 100644
index 0000000..a23d108
--- /dev/null
+++ b/packages/editor/types/utils/wasm/optimize.d.ts
@@ -0,0 +1 @@
+export declare function clearBuffer(): void;
diff --git a/packages/editor/types/utils/wasm/wasm_exec.d.ts b/packages/editor/types/utils/wasm/wasm_exec.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/editor/types/views/editor/layouts/index.d.ts b/packages/editor/types/views/editor/layouts/index.d.ts
new file mode 100644
index 0000000..0b4f560
--- /dev/null
+++ b/packages/editor/types/views/editor/layouts/index.d.ts
@@ -0,0 +1,6 @@
+import Header from "./Header.vue";
+import Footer from "./Footer.vue";
+import Scene from "./Scene.vue";
+import Sidebar from "./Sidebar.vue";
+import Assets from "./Assets.vue";
+export { Header, Footer, Scene, Sidebar, Assets };
diff --git a/packages/sdk/lib/core/built-in/assets/Water.ts b/packages/sdk/lib/core/built-in/assets/Water.ts
new file mode 100644
index 0000000..8f1e1a9
--- /dev/null
+++ b/packages/sdk/lib/core/built-in/assets/Water.ts
@@ -0,0 +1,76 @@
+import * as THREE from 'three';
+import { WaterPool } from '@/core/objects';
+import App from "@/core/app/App";
+import { AddObjectCommand } from '@/core/commands/AddObjectCommand';
+
+export class Water {
+    static DefaultTilesUrl = new URL(import.meta.env.BASE_URL + 'resource/textures/tiles.jpg', import.meta.url).href;
+
+    constructor() { }
+
+    static loadFile(url: string) {
+        return new Promise((resolve, reject) => {
+            const loader = new THREE.FileLoader();
+            loader.load(url, resolve, undefined, reject);
+        });
+    }
+
+    /**
+     * 水池/也可以做水面
+     */
+    static waterPool(options?: IWaterPool.Options, position: number[] = [0, 0, 0]) {
+        return new Promise<WaterPool>((resolve, reject) => {
+            const _options: IWaterPool.Options = Object.assign({
+                name: "WaterPool",
+                type: 'cylinder',
+                light: [0.7, 1, -0.3],
+                diameter: 3.2,
+                height: 5,
+                // 仅显示水体体积，不显示池壁纹理
+                wallMode: 'volume',
+                wallOpacity: 0.3,
+                // 使用与原始着色接近的水体颜色（偏亮蓝绿）
+                volumeColor: new THREE.Color(0.4, 0.9, 1.0),
+                // 开启屏幕空间折射，保证能看到水下物体
+                useSceneRefraction: 1,
+                // 水面透视强度
+                surfaceTransmittance: 0.9,
+                // 降低波纹边缘对比度
+                normalStrength: 0.6,
+                refractionStrength: 0.035,
+            }, options);
+
+            if (!_options.tiles && (_options.wallMode ? _options.wallMode === 'wall' : _options.wall === true)) {
+                _options.tiles = new THREE.TextureLoader().load(Water.DefaultTilesUrl);
+                _options.tiles.wrapS = THREE.RepeatWrapping;
+                _options.tiles.wrapT = THREE.RepeatWrapping;
+            }
+
+            const cylinderPool = new WaterPool(_options);
+
+            Promise.all([cylinderPool.loaded]).then(() => {
+                cylinderPool.setPosition(...position);
+                WaterPool.register(cylinderPool);
+
+                const viewer = App.viewer;
+                if (viewer && !cylinderPool.parent) {
+                    App.execute(new AddObjectCommand(cylinderPool), `Add WaterPool: ${_options.name}`);
+                }
+                if (viewer) {
+                    Water.registerRendering();
+                }
+
+                resolve(cylinderPool);
+            }).catch((err) => {
+                reject(err);
+            });
+        });
+    }
+
+    /**
+     * 注册渲染行为
+     */
+    static registerRendering() {
+        WaterPool.registerRendering();
+    }
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/components/core/UpdateManager.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/components/core/UpdateManager.js
new file mode 100644
index 0000000..2cc9d3a
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/components/core/UpdateManager.js
@@ -0,0 +1,71 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+/**
+ * Job:
+ * - recording components required updates
+ * - trigger those updates when 'update' is called
+ *
+ * This module is a bit special. It is, with FontLibrary, one of the only modules in the 'component'
+ * directory not to be used in component composition (Object.assign).
+ *
+ * When MeshUIComponent is instanciated, it calls UpdateManager.register().
+ *
+ * Then when MeshUIComponent receives new attributes, it doesn't update the component right away.
+ * Instead, it calls UpdateManager.requestUpdate(), so that the component is updated when the user
+ * decides it (usually in the render loop).
+ *
+ * This is best for performance, because when a UI is created, thousands of componants can
+ * potentially be instantiated. If they called updates function on their ancestors right away,
+ * a given component could be updated thousands of times in one frame, which is very ineficient.
+ *
+ * Instead, redundant update request are moot, the component will update once when the use calls
+ * update() in their render loop.
+ */
+export default class UpdateManager {
+
+
+	static register( component ) {
+
+		if ( !this.elements.includes( component ) ) {
+
+				this.elements.push( component );
+
+		}
+
+	}
+
+	static remove( component ) {
+
+		const index = this.elements.indexOf( component );
+		if ( index !== -1 ) {
+
+			this.elements.splice( index, 1 );
+
+		}
+
+	}
+
+
+	static update() {
+
+		for ( const UIElement of this.elements ) {
+			UIElement.update();
+
+			UIElement.process(); // Natural process
+			UIElement.process(); // Actual process (optional) - For auto size and stretch
+
+			UIElement.render();
+		}
+
+	}
+
+}
+
+/**
+ * @internal
+ * @type {Array.<MeshUIBaseElement>}
+ */
+UpdateManager.elements = [];
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/DefaultValues.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/DefaultValues.js
new file mode 100644
index 0000000..870c76a
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/DefaultValues.js
@@ -0,0 +1,68 @@
+/** List the default values of the lib components */
+const _values = {
+	fog: false,
+	fontFamily: null,
+	fontSize: 0.05,
+	fontKerning: 'auto',
+	fontStyle: 'normal',
+	fontWeight : 'normal',
+	offset: 0.005,
+	lineHeight: 1.2,
+	lineBreak: '- ,.:?!\n',// added '\n' to also acts as friendly breaks when white-space:normal
+	whiteSpace: 'pre-line',
+	flexDirection : 'column',
+	justifyContent : 'start',
+	alignItems : 'start',
+	backgroundImage: null,
+	textAlign : 'left',
+	boxSizing: 'content-box',
+	position: 'static',
+	color: 0xffffff,
+	fontColor: 0xffffff,
+	fontOpacity: 1,
+	opacity: 1,
+	fontPXRange: 4,
+	fontSupersampling: true,
+	fontSmooth: 'antialiased',
+	borderRadius: 0,
+	borderWidth: 0,
+	borderColor: 'black',
+	borderOpacity: 1,
+	backgroundSize: "cover",
+	backgroundColor: 0x000000,
+	backgroundOpacity: 0,
+	overflow: 'visible',
+	letterSpacing: 0,
+	invertAlpha : false,
+	segments: 1
+};
+
+/**
+ * @param {import('./../core/elements/MeshUIBaseElement').Options} overrideProperties
+ */
+export const set = function ( overrideProperties ) {
+
+	for ( const property in overrideProperties ) {
+
+		_values[property] = overrideProperties[property];
+
+	}
+
+}
+
+/**
+ *
+ * @param {string} property
+ * @return {any}
+ */
+export const get = function ( property ) {
+
+	if( !Object.prototype.hasOwnProperty.call( _values, property) ) {
+
+		console.warn( `ThreeMeshUI::DefaultValues is trying to retrieve non-existing property '${property}'`);
+
+	}
+
+	return _values[property];
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/MeshUIBaseElement.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/MeshUIBaseElement.js
new file mode 100644
index 0000000..7d6ab55
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/MeshUIBaseElement.js
@@ -0,0 +1,1575 @@
+import RenderOrderProperty from '../properties/RenderOrderProperty';
+import OffsetProperty from '../properties/OffsetProperty';
+import FontSmoothProperty from '../properties/FontSmoothProperty';
+import PaddingProperty from '../properties/style-properties/bounds/PaddingProperty';
+import MarginProperty from '../properties/style-properties/bounds/MarginProperty';
+import Mediator from '../../utils/mediator/Mediator';
+import ParentProperty from '../properties/hierarchy/ParentProperty';
+import NumberProperty from '../properties/NumberProperty';
+import SideProperty from '../properties/SideProperty';
+import UpdateManager from '../../components/core/UpdateManager';
+import FontProperty from '../properties/FontProperty';
+import { Object3D } from 'three';
+import Display from '../properties/style-properties/visibility/Display';
+import BoxSizing from '../properties/style-properties/bounds/BoxSizing';
+import StyleColorProperty from '../properties/style-properties/StyleColorProperty';
+import StyleFactorProperty from '../properties/style-properties/StyleFactorProperty';
+import BackgroundImage from '../properties/style-properties/background/BackgroundImage';
+import BackgroundSize from '../properties/style-properties/background/BackgroundSize';
+import Overflow from '../properties/style-properties/visibility/Overflow';
+import BorderRadius from '../properties/style-properties/border/BorderRadius';
+import BorderWidth from '../properties/style-properties/border/BorderWidth';
+import VisibleProperty from '../properties/VisibleProperty';
+import BackgroundColorProperty from '../properties/style-properties/background/BackgroundColorProperty';
+import EmptyProperty from '../properties/EmptyProperty';
+import InlineJustificator from '../properties/InlineJustificator';
+import AlignItemsProperty from '../properties/style-properties/flex/AlignItemsProperty';
+import TextAlignProperty from '../properties/style-properties/font/TextAlignProperty';
+import FlexDirectionProperty from '../properties/style-properties/flex/FlexDirectionProperty';
+import JustifyContentProperty from '../properties/style-properties/flex/JustifyContentProperty';
+import OrderProperty from '../properties/style-properties/flex/OrderProperty';
+import PositionProperty from '../properties/style-properties/PositionProperty';
+import WidthProperty from '../properties/style-properties/bounds/WidthProperty';
+import HeightProperty from '../properties/style-properties/bounds/HeightProperty';
+import TextContentDefault from '../properties/TextContentDefault';
+import FontStyleProperty from '../properties/style-properties/font/FontStyleProperty';
+import FontWeightProperty from '../properties/style-properties/font/FontWeightProperty';
+import FontFamilyProperty from '../properties/style-properties/font/FontFamilyProperty';
+import LineHeightProperty from '../properties/style-properties/font/LineHeightProperty';
+import WhiteSpaceProperty from '../properties/style-properties/font/WhiteSpaceProperty';
+import LetterSpacingProperty from '../properties/style-properties/font/LetterSpacingProperty';
+import FontSizeProperty from '../properties/style-properties/font/FontSizeProperty';
+import FontLibrary from '../../font/FontLibrary';
+import SegmentsProperty from '../properties/geometry/SegmentsProperty';
+import InvertAlphaProperty from '../properties/InvertAlphaProperty';
+import FontKerningProperty from '../properties/style-properties/font/FontKerningProperty';
+import InheritableBooleanProperty from '../properties/InheritableBooleanProperty';
+import InheritableMaterialProperty from '../properties/InheritableMaterialProperty';
+import { directTransferNotNull } from '../../utils/mediator/transformers/CommonTransformers';
+import { uniformOrUserDataTransformer } from '../../utils/mediator/transformers/MaterialTransformers';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Color, Texture, Vector4, Mesh, Material, ShaderMaterial } from 'three';
+import BaseProperty from './../properties/BaseProperty';
+import FontFamily from '../../font/FontFamily';
+import { renderOrderTransformer } from '../../utils/mediator/transformers/MeshTransformers';
+/* eslint-enable no-unused-vars */
+
+export default class MeshUIBaseElement extends Object3D {
+
+	/**
+	 *
+	 * @param {Properties} properties
+	 * @param {Options} values
+	 */
+	constructor( properties, values) {
+
+		super();
+
+		Object.defineProperties( this, {
+				isUI: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+		/**
+		 *
+		 * @type {Mesh|null}
+		 * @internal
+		 */
+		this._backgroundMesh = null;
+
+
+
+		/**
+		 *
+		 * @type {Material}
+		 * @internal
+		 */
+		this._backgroundMaterial = null;
+
+		/**
+		 *
+		 * @type {Material}
+		 * @protected
+		 */
+		this._backgroundCustomDepthMaterial = null;
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+		 * @protected
+		 */
+		this._backgroundMaterialMediation = {};
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(value:any) => any}>}
+		 * @private
+		 */
+		this._backgroundMeshMediation = {
+			backgroundCastShadow: { m: 'castShadow' },
+			backgroundReceiveShadow: { m: 'receiveShadow' },
+			renderOrder: {m: 'renderOrder', t: renderOrderTransformer }
+		};
+
+
+		this._fog = new InheritableBooleanProperty("fog");
+
+		/**
+		 *
+		 * @type {Mesh|null}
+		 * @internal
+		 */
+		this._fontMesh = null;
+
+		/**
+		 *
+		 * @type {InheritableMaterialProperty}
+		 * @internal
+		 */
+		this._fontMaterial = new InheritableMaterialProperty('fontMaterial');
+
+		/**
+		 *
+		 * @type {InheritableMaterialProperty}
+		 * @private
+		 */
+		this._fontCustomDepthMaterial = new InheritableMaterialProperty('fontCustomDepthMaterial');
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(value:any) => any}>}
+		 * @private
+		 */
+		this._fontMeshMediation = {
+			fontMaterial: { m: 'material' },
+			fontCustomDepthMaterial: { m : 'customDepthMaterial', t:directTransferNotNull},
+			fontCastShadow: { m: 'castShadow' },
+			fontReceiveShadow: { m: 'receiveShadow' },
+			renderOrder: {m: 'renderOrder' }
+		};
+
+		// Children lists
+
+		/**
+		 *
+		 * @type {EmptyProperty|ChildrenBox|ChildrenText}
+		 * @internal
+		 */
+		this._children = properties.children ? new properties.children : new EmptyProperty("children");
+		this._parent = new ParentProperty();
+
+		// update parentUI when this component will be added or removed
+		this.addEventListener( 'added', this._rebuildParentUI );
+		this.addEventListener( 'removed', this._rebuildParentUI );
+
+		//material properties
+		this._backgroundSide = new SideProperty( 'backgroundSide' );
+		this._fontSide = new SideProperty( 'fontSide' );
+		this._backgroundAlphaTest = new NumberProperty( 'backgroundAlphaTest', 0.02 );
+		this._fontAlphaTest = new NumberProperty( 'fontAlphaTest', 0.02 );
+
+		// mesh properties
+		this._visible = new VisibleProperty( 'visible', true );
+
+		this._backgroundCastShadow = new InheritableBooleanProperty( 'backgroundCastShadow' );
+		this._fontCastShadow = new InheritableBooleanProperty( 'fontCastShadow' );
+		this._backgroundReceiveShadow = new InheritableBooleanProperty( 'backgroundReceiveShadow' );
+		this._fontReceiveShadow = new InheritableBooleanProperty( 'fontReceiveShadow' );
+
+		// @TODO: RenderOrder for background and fonts
+		this._renderOrder = new RenderOrderProperty();
+
+		// @TODO : background & Text
+		this._segments = properties.segments ? new properties.segments() : new SegmentsProperty();
+
+
+		/**
+		 *
+		 * @type {BoundsBox|BoundsText|EmptyProperty}
+		 * @ignore
+		 * @internal
+		 */
+		this._bounds = properties.bounds ? new properties.bounds() : new EmptyProperty("bounds");
+
+		// styles ---;
+
+		this._order = new OrderProperty();
+
+		this._padding = new PaddingProperty();
+		this._margin = new MarginProperty();
+
+
+		this._position = new PositionProperty();
+
+		/**
+		 *
+		 * @type {FlexDirectionProperty}
+		 * @internal
+		 */
+		this._flexDirection = properties.flexDirection ? new properties.flexDirection() : new FlexDirectionProperty();
+
+		this._justifyContent = properties.justifyContent ? new properties.justifyContent() : new JustifyContentProperty();
+
+		this._alignItems = properties.alignItems ? new properties.alignItems() : new AlignItemsProperty();
+
+		this._display = new Display( 'flex' );
+
+		this._boxSizing = new BoxSizing( 'border-box' );
+		this._width = new WidthProperty();
+		this._height = new HeightProperty();
+
+		this._backgroundColor = properties.backgroundColor ? new properties.backgroundColor() : new BackgroundColorProperty();
+		this._backgroundOpacity = new StyleFactorProperty('backgroundOpacity', 0.5 );
+		this._backgroundImage = new BackgroundImage();
+		this._backgroundSize = new BackgroundSize( 'cover' );
+
+		this._color = properties.color ? new properties.color() : new StyleColorProperty('color', 'inherit');
+		this._fontOpacity = new StyleFactorProperty( 'fontOpacity', 'inherit');
+
+		this._whiteSpace = properties.whiteSpace ? new properties.whiteSpace() : new WhiteSpaceProperty();
+
+		this._fontFamily = properties.fontFamily ? new properties.fontFamily() : new FontFamilyProperty();
+		this._fontStyle = properties.fontStyle ? new properties.fontStyle() : new FontStyleProperty( 'normal' );
+		this._fontWeight = properties.fontWeight ? new properties.fontWeight() : new FontWeightProperty();
+		this._fontSize = properties.fontSize ? new properties.fontSize() : new FontSizeProperty();
+
+		this._lineHeight = properties.lineHeight ? new properties.lineHeight() : new LineHeightProperty();
+
+		this._fontKerning = properties.fontKerning ? new properties.fontKerning() : new FontKerningProperty();
+		this._letterSpacing = properties.letterSpacing ? new properties.letterSpacing() : new LetterSpacingProperty();
+
+		this._overflow = new Overflow( 'visible' );
+
+		this._borderRadius = new BorderRadius( 0 );
+		this._borderWidth = new BorderWidth( 0 );
+		this._borderColor = new StyleColorProperty( 'borderColor', 0xff00ff );
+		this._borderOpacity = new StyleFactorProperty( 'borderOpacity', 1);
+
+		// styles ---;
+
+		this._font = new FontProperty();
+
+		this._lineBreak = properties.lineBreak ? new properties.lineBreak() : new EmptyProperty("lineBreak");
+
+		/**
+		 *
+		 * @type {TextContentDefault|TextContentText|TextContentInline}
+		 * @internal
+		 */
+		this._textContent = properties.textContent ? new properties.textContent() : new TextContentDefault();
+
+		/**
+		 *
+		 * @type {GlyphsProperty}
+		 * @internal
+		 */
+		this._glyphs = properties.glyphs ? new properties.glyphs() : new EmptyProperty("glyphs");
+
+		this._inlines = properties.inlines ? new properties.inlines() : new EmptyProperty("inlines");
+
+
+		/**
+		 *
+		 * @type {BoxLayouter|TextLayouter|EmptyProperty}
+		 * @internal
+		 */
+		this._layouter = properties.layouter ? new properties.layouter() : new EmptyProperty("layouter");
+
+		this._inlineJustificator = new InlineJustificator();
+
+		this._textAlign = properties.textAlign ? new properties.textAlign() : new TextAlignProperty();
+
+		this._autoSize = properties.autoSize ? new properties.autoSize() : new EmptyProperty("autoSize");
+
+		this._renderer = properties.renderer ? new properties.renderer() : new EmptyProperty("renderer");
+
+		this._offset = new OffsetProperty();
+
+		// adds
+		this._invertAlpha = new InvertAlphaProperty();
+		this._fontSmooth = properties.fontSmooth ? new properties.fontSmooth() : new FontSmoothProperty();
+
+		/**
+		 *
+		 * @type {Array.<BaseProperty>}
+		 * @internal
+		 */
+		this._components = [
+
+			this._textContent,
+			this._children,
+			this._parent,
+
+
+			this._autoSize,
+
+
+			this._fog,
+
+			this._fontFamily,
+			this._fontStyle,
+			this._fontWeight,
+			this._font,
+
+			this._whiteSpace,
+
+
+			this._glyphs,
+
+			this._inlines,
+
+			this._visible,
+
+			// Meshes interfaces
+			this._backgroundSide,
+			this._fontSide,
+			this._backgroundAlphaTest,
+			this._fontAlphaTest,
+			this._backgroundCastShadow,
+			this._fontCastShadow,
+			this._backgroundReceiveShadow,
+			this._fontReceiveShadow,
+			this._renderOrder,
+			this._segments,
+			// styles ---;
+
+			this._padding,
+			this._margin,
+			this._width,
+			this._height,
+			this._borderWidth,
+			this._boxSizing,
+
+			this._bounds,
+
+			this._position,
+
+
+			this._flexDirection,
+			this._justifyContent,
+			this._alignItems,
+			this._order,
+
+
+			this._display,
+			this._backgroundColor,
+			this._backgroundOpacity,
+			this._backgroundImage,
+			this._backgroundSize,
+			this._fontOpacity,
+			this._color,
+
+
+			// font : update order : WhiteSpace > Glyph > Inlines > Kerning > newlineBreakability > LineBreak > FontSize
+			// font : process order : ??
+			// this._font,
+
+			this._fontSize,
+			this._lineHeight,
+			this._fontKerning,
+			this._letterSpacing,
+
+			this._borderRadius,
+			this._borderColor,
+			this._borderOpacity,
+
+			// this._styles,
+			// styles ---;
+			this._lineBreak,
+			this._offset,
+			this._layouter,
+
+			this._inlineJustificator,
+			this._textAlign,
+
+
+			// !! this._renderer renderer MUST NOT BE in components !!
+
+			this._invertAlpha,
+			this._fontSmooth,
+
+			this._fontMaterial,
+			this._fontCustomDepthMaterial,
+			this._overflow,
+			this._renderer,
+
+		]
+
+
+		/**
+		 *
+		 * @type {*[]}
+		 * @private
+		 */
+		this._onAfterUpdates = [];
+
+
+		// breaks inheritance chains
+		// if( !values ) values = {};
+		if( !values.backgroundSide ) values.backgroundSide = 0; // FrontSide
+
+
+		if( values ) this.set( values );
+
+	}
+
+
+	///////////////
+	///  UPDATE
+	///////////////
+
+	update( ) {
+
+
+		// console.log( "Update Element", this.name , this.constructor.name );
+
+		const out = {};
+		for ( const component of this._components ) {
+
+			if( component._needsUpdate ) {
+
+				// console.log( '    ', component.id )
+				component.update( this, out );
+				component._needsUpdate = false;
+
+			}
+
+		}
+
+		this._transferToBackgroundMesh( out );
+		this._transferToFontMesh( out );
+
+		this._transferToBackgroundMaterial( out );
+		this._transferToFontMaterial( out );
+
+
+		// update children
+		for ( const child of this._children._uis ) {
+			child.update();
+		}
+
+	}
+
+	process() {
+
+		// process first time : Natural size
+		for ( const child of this._children._uis ) {
+			child.process();
+		}
+
+
+		// console.log( 'Process ', this.name );
+		for ( const component of this._components ) {
+
+			if( component._needsProcess ) {
+
+				// console.log( '    ', component.id );
+				component.process( this );
+				component._needsProcess = false;
+
+			}
+
+		}
+
+	}
+
+	render() {
+
+		// console.log( 'render ', this.name );
+		for ( let i = 0; i < this._components.length; i++ ) {
+			const component = this._components[ i ];
+			if( component._needsRender ) {
+				// console.log( '    ', component.id);
+				component.render( this );
+				component._needsRender = false;
+			}
+		}
+
+		// render all children
+		for ( const child of this._children._uis ) {
+			child.render();
+		}
+
+	}
+
+
+	/**
+	 *
+	 * @param {Options} options
+	 */
+	set( options ) {
+
+		// Retro compatibility, when not recommended way
+		// 2. < v7.x.x way
+		if( options.fontTexture ) {
+
+			console.warn( "ThreeMeshUI::set( {fontTexture} ) is deprecated. Please use fontLibrary to register font families and variants.")
+
+			if( options.fontFamily ) {
+
+				// Set from old way, check if that family is already registered
+				const fontName = options.fontFamily.pages ? options.fontFamily.info.face : options.fontFamily;
+
+				let fontFamily = FontLibrary.getFontFamily( fontName );
+
+				if ( !fontFamily ) {
+
+					const fontStyle = options.fontStyle ? options.fontStyle : 'normal';
+					const fontWeight = options.fontWeight ? options.fontWeight : '400';
+
+					fontFamily = FontLibrary.addFontFamily( fontName )
+						.addVariant( fontWeight, fontStyle, options.fontFamily, options.fontTexture );
+
+				}
+
+				options['fontFamily'] = fontFamily;
+
+				delete options['fontTexture'];
+
+			}
+
+		}
+
+
+
+		for ( let prop of Object.keys( options ) ) {
+
+			const value = options[prop];
+
+			// 1. replace deprecated properties
+			switch ( prop ){
+				case 'contentDirection':
+					console.warn('ThreeMeshUI v7xx: property `contentDirection` is deprecated and has been renamed as `flexDirection`');
+					prop = 'flexDirection';
+					break;
+
+				case 'interLine':
+					console.warn('ThreeMeshUI v7xx: property `interLine` is deprecated and has been renamed as `lineHeight`');
+					prop = 'lineHeight';
+					break;
+
+				case 'content':
+					console.warn( 'ThreeMeshUI v7xx: property `content` is deprecated and has been renamed as `textContent`');
+					prop = 'textContent';
+					break;
+
+				case 'fontColor':
+					console.warn( 'ThreeMeshUI v7xx: property `fontColor` is deprecated and has been renamed as `color`');
+					prop = 'color';
+					break;
+
+				case 'hiddenOverflow':
+					console.warn( 'ThreeMeshUI v7xx: property `hiddenOverflow` is deprecated and has been renamed as `overflow`');
+					prop = 'overflow';
+					break;
+
+				case 'backgroundTexture':
+					console.warn( 'ThreeMeshUI v7xx: property `backgroundTexture` is deprecated and has been renamed as `backgroundImage`');
+					prop = 'backgroundImage';
+					break;
+
+				case 'alignContent':
+					console.warn( 'ThreeMeshUI v7xx: property `alignContent` is deprecated and has been renamed as `alignItems`');
+					prop = 'alignItems';
+					break;
+
+				case "borderTopColor":
+				case "borderBottomColor":
+				case "borderLeftColor":
+				case "borderRightColor":
+					prop = 'borderColor';
+					break;
+			}
+
+				switch ( prop ) {
+
+				// properties
+
+				// As textContent property might alter the hierarchy, do not wait until update
+				case 'textContent' :
+					this.textContent = value;
+					break;
+
+					case 'fontSmooth':
+					case 'renderOrder':
+					case 'segments' :
+					case 'visible' :
+					case 'offset':
+						this[`_${prop}`].value = value;
+						break;
+
+					// styles properties
+					case 'flexDirection' :
+					case 'justifyContent' :
+					case 'alignItems' :
+					case 'color' :
+					case 'fontFamily' :
+					case 'fontOpacity' :
+					case 'fontKerning' :
+					case 'fontSize' :
+					case 'fontStyle' :
+					case 'fontWeight' :
+					case 'textAlign' :
+					case 'letterSpacing' :
+					case 'lineHeight' :
+					case 'whiteSpace':
+					case 'breakOn': // Not valid anymore?
+					case 'width' :
+					case 'height' :
+					case 'padding':
+					case 'margin' :
+					case 'backgroundColor' :
+					case 'backgroundOpacity' :
+					case 'backgroundImage' :
+					case 'backgroundSize' :
+					case 'borderColor' :
+					case 'borderOpacity' :
+					case 'borderRadius' :
+					case 'borderWidth':
+					case 'overflow' :
+					case 'order':
+					case 'boxSizing':
+						if( this[`_${prop}`] ){
+							this[`_${prop}`].inline = value;
+						}
+						break;
+
+					case 'paddingTop':
+						this._padding.top = value;
+						break;
+					case 'paddingRight':
+						this._padding.right = value;
+						break;
+					case 'paddingBottom':
+						this._padding.bottom = value;
+						break;
+					case 'paddingLeft':
+						this._padding.left = value;
+						break;
+
+					case 'marginTop':
+						this._margin.top = value;
+						break;
+					case 'marginRight':
+						this._margin.right = value;
+						break;
+					case 'marginBottom':
+						this._margin.bottom = value;
+						break;
+					case 'marginLeft':
+						this._margin.left = value;
+						break;
+
+					case 'borderTopWidth':
+						this._borderWidth.top = value;
+						break;
+					case 'borderRightWidth':
+						this._borderWidth.right = value;
+						break;
+					case 'borderBottomWidth':
+						this._borderWidth.bottom = value;
+						break;
+					case 'borderLeftWidth':
+						this._borderWidth.left = value;
+						break;
+
+					case 'borderTopLeftRadius':
+						this._borderRadius.topLeft = value;
+						break;
+					case 'borderTopRightRadius':
+						this._borderRadius.topRight = value;
+						break;
+					case 'borderBottomRightRadius':
+						this._borderRadius.bottomRight = value;
+						break;
+					case 'borderBottomLeftRadius':
+						this._borderRadius.bottomLeft = value;
+						break;
+
+
+					// Back & Front linked properties
+					case 'side':
+					case 'castShadow':
+					case 'receiveShadow':
+						const upperCamelCaseProperty = prop.charAt(0).toUpperCase()+prop.substr(1);
+						this[`_background${upperCamelCaseProperty}`].value = value;
+						this[`_font${upperCamelCaseProperty}`].value = value;
+						break;
+
+
+						// Meshes & material properties
+					case 'fontSide':
+					case 'backgroundSide':
+					case 'fontCastShadow':
+					case 'backgroundCastShadow':
+					case 'fontReceiveShadow':
+					case 'backgroundReceiveShadow':
+					case 'fontMaterial':
+					case 'fontCustomDepthMaterial':
+						this[`_${prop}`].value = value;
+						break;
+
+
+					default:
+
+						if( this[`_${prop}`] !== undefined ) {
+							this[`_${prop}`].value = value;
+						} else {
+							this[ prop ] = value
+						}
+				}
+
+		}
+
+	}
+
+	get ( property ) {
+
+		switch ( property ) {
+
+			case 'overflow':
+			case 'width' :
+			case 'height' :
+				return this[`_${property}`].inline;
+		}
+
+	}
+
+	/**
+	 * Filters children in order to compute only one times children lists
+	 * @private
+	 */
+	_rebuildChildrenLists() {
+
+		//console.log( this.name, 'child added' );
+		this._children._needsUpdate = true;
+
+	}
+
+	/**
+	 * Try to retrieve parentUI after each structural change
+	 * @protected
+	 */
+	_rebuildParentUI = () => {
+
+		this._parent._needsUpdate = true;
+
+		// set elements as root
+		if ( this.parent && !this.parent.isUI ) {
+
+			UpdateManager.register( this );
+			this.activatePseudoState('root');
+
+		} else {
+
+			UpdateManager.remove( this );
+			this.deactivatePseudoState('root');
+		}
+
+
+	};
+
+	/**
+	 * When the user calls component.add, it registers for updates,
+	 * then call THREE.Object3D.add.
+	 */
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) {
+
+		let addedUIChildren = false;
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			super.add( arguments[ i ] );
+
+			if( arguments[i].isUI ) {
+				addedUIChildren = true;
+			}
+
+		}
+
+		if( addedUIChildren ) this._rebuildChildrenLists();
+
+		return this;
+
+	}
+
+
+	/**
+	 * When the user calls component.remove, it registers for updates,
+	 * then call THREE.Object3D.remove.
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	remove( object ) {
+
+		for ( const id of Object.keys( arguments ) ) {
+
+			// An inline component relies on its parent for positioning
+			if ( arguments[ id ].isInline ) this.update( null, true );
+
+		}
+
+		super.remove( ...arguments );
+
+		this._rebuildChildrenLists();
+
+		return this;
+
+	}
+
+	/**
+	 *
+	 * @return {Object3D}
+	 */
+	clear() {
+
+		this.removeFromParent();
+
+		this.traverse( ( obj ) => {
+
+			if ( obj.material ) obj.material.dispose();
+			if ( obj.geometry ) obj.geometry.dispose();
+
+		} );
+
+		super.clear();
+
+		// remove properties
+		this._backgroundMesh = null;
+		this._backgroundMaterial = null;
+		this._backgroundMaterialMediation = null;
+		this._backgroundMeshMediation = null;
+
+		this._children.dispose();
+		this._children = null;
+
+		this._parent.dispose();
+		this._parent = null;
+
+		this._backgroundSide = null;
+		this._backgroundAlphaTest = null;
+		this._visible = null;
+		this._backgroundCastShadow = null;
+		this._backgroundReceiveShadow = null;
+		this._renderOrder = null;
+		this._segments = null;
+		this._bounds = null;
+
+		// styles properties
+		this._boxSizing = null;
+		this._padding = null;
+		this._margin = null;
+		this._position = null;
+		this._flexDirection = null;
+		this._justifyContent = null;
+		this._alignItems = null;
+		this._display = null;
+		this._backgroundColor = null;
+		this._backgroundOpacity = null;
+		this._backgroundSize = null;
+		this._fontOpacity = null;
+		this._color = null;
+		this._whiteSpace = null;
+		this._fontFamily = null;
+		this._fontStyle = null;
+		this._fontWeight = null;
+		this._lineHeight = null;
+		this._fontKerning = null;
+		this._letterSpacing = null;
+		this._overflow = null;
+		this._textAlign = null;
+
+		this._font = null;
+		this._lineBreak = null;
+		this._layouter = null;
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get textContent() {
+
+		this._textContent.process( this );
+
+		return this._textContent._value;
+
+	}
+
+	/***********************************************************************************************************************
+	 * TO MATERIAL HOLDER
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @returns {Material|ShaderMaterial}
+	 */
+	get backgroundMaterial() { return this._backgroundMaterial; }
+
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} material
+	 */
+	set backgroundMaterial( material ) {
+
+		this._backgroundMaterial = material;
+
+		// Update the fontMaterialProperties that need to be transferred to
+		this._backgroundMaterialMediation = { ...material.constructor.mediation };
+
+		// transfer all the properties to material
+		this._transferToBackgroundMaterial();
+
+		if ( this._backgroundMesh ) {
+
+			this._backgroundMesh.material = this._backgroundMaterial;
+			uniformOrUserDataTransformer( material, 'frameSize', this._backgroundMesh.scale );
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {Material|null} material
+	 */
+	set backgroundCustomDepthMaterial( material ) {
+
+		this._backgroundCustomDepthMaterial = material;
+
+		this._transferToBackgroundMaterial();
+
+		if ( this._backgroundMesh ) {
+			// transfer to the main if isset
+			this._backgroundMesh.customDepthMaterial = this._backgroundCustomDepthMaterial;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @returns {Material|null}
+	 */
+	get backgroundCustomDepthMaterial() { return this._backgroundCustomDepthMaterial; }
+
+	/**
+	 * According to the list of materialProperties
+	 * some properties are sent to material
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToBackgroundMaterial( options = null ) {
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, this._backgroundMaterial, options, this._backgroundMaterialMediation, this._backgroundCustomDepthMaterial );
+
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set backgroundSide( value ) {
+
+		this._backgroundSide.value = value;
+
+		if ( this._backgroundMaterial ) this._backgroundMaterial.side = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get backgroundSide() { return this._backgroundSide.value; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set backgroundAlphaTest ( value ) {
+
+		this._backgroundAlphaTest.value = value;
+
+		if( this._backgroundMaterial ) this._backgroundMaterial.alphaTest = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get backgroundAlphaTest () { return this._backgroundAlphaTest.value; }
+
+	/** Font Material ----------------------------------------------------------*/
+
+	/**
+	 *
+	 * @returns {Material|ShaderMaterial}
+	 */
+	// get fontMaterial() { return this._fontMaterial__; }
+	get fontMaterial() { return this._fontMaterial.value; }
+
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} material
+	 */
+	set fontMaterial( material ) {
+
+		this._fontMaterial.value = material;
+
+	}
+
+	/**
+	 *
+	 * @param {Material|null} material
+	 */
+	set fontCustomDepthMaterial( material ) {
+
+		this._fontCustomDepthMaterial.value = material;
+
+	}
+
+	/**
+	 *
+	 * @returns {Material|null}
+	 */
+	get fontCustomDepthMaterial() { return this._fontCustomDepthMaterial.value; }
+
+	/**
+	 * According to the list of materialProperties
+	 * some properties are sent to material
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToFontMaterial( options = null ) {
+
+		const fontMat = this._fontMaterial.value;
+		if( !fontMat ) return;
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, fontMat, options, this._fontMaterial._mediation, this._fontCustomDepthMaterial.value );
+
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontSide( value ) {
+
+		this._fontSide.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get fontSide() { return this._fontSide.value; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontAlphaTest ( value ) {
+
+		this._fontAlphaTest.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get fontAlphaTest () { return this._fontAlphaTest.value; }
+
+	/*********************************************************************************************************************
+	 * MESH MEDIATION
+	 ********************************************************************************************************************/
+
+	/**
+	 * According to the list of meshProperties
+	 * some properties are sent to mesh
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToBackgroundMesh( options = null ) {
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+
+		}
+
+		Mediator.mediate( this, this._backgroundMesh, options, this._backgroundMeshMediation );
+
+	}
+
+	/**
+	 * @internal
+	 * @param {Mesh|Array.<Mesh>|null} mesh
+	 */
+	setBackgroundMesh( mesh ) {
+
+		if( this._backgroundMesh ) {
+
+			this.remove( this._backgroundMesh );
+			this.unbindBackgroundMeshProperties();
+
+		}
+
+		this._backgroundMesh = mesh;
+
+		if ( this._backgroundMesh ) {
+
+			this.bindBackgroundMeshProperties();
+
+			if( this._backgroundCustomDepthMaterial ) {
+				this._backgroundMesh.customDepthMaterial = this._backgroundCustomDepthMaterial;
+			}
+
+			if( this._backgroundMaterial ) {
+				uniformOrUserDataTransformer( this._backgroundMaterial, 'frameSize', this._backgroundMesh.scale );
+			}
+
+			this._transferToBackgroundMesh();
+
+			this.add( this._backgroundMesh );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	bindBackgroundMeshProperties () { }
+
+	/**
+	 *
+	 */
+	unbindBackgroundMeshProperties () { }
+
+
+	activatePseudoState ( state ) {
+
+	}
+
+	deactivatePseudoState ( state ) {
+
+	}
+
+	togglePseudoState ( state ) {
+
+	}
+
+
+	hasPseudoState( state ) {
+		return false;
+	}
+
+	set borderRadiusMediation ( value ) {
+		this._borderRadius.mediation = value;
+	}
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set backgroundCastShadow( value ) {
+
+		if( this._backgroundCastShadow ) this._backgroundCastShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get backgroundCastShadow() { return this._backgroundCastShadow; }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set backgroundReceiveShadow( value ) {
+
+		if( this._backgroundReceiveShadow ) this._backgroundReceiveShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get backgroundReceiveShadow() { return this._backgroundReceiveShadow; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set renderOrder( value ) {
+
+		if( this._renderOrder ) this._renderOrder.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get renderOrder() { return this._renderOrder.value; }
+
+	/** Font Mesh --------------------------------------------------------------*/
+
+	/**
+	 * According to the list of meshProperties
+	 * some properties are sent to mesh
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToFontMesh( options = null ) {
+
+		if( !this._fontMesh ) return;
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, this._fontMesh, options, this._fontMeshMediation );
+
+	}
+
+	/**
+	 * @internal
+	 * @param {Mesh|Array.<Mesh>|null} mesh
+	 */
+	setFontMesh( mesh ) {
+
+		if( this._fontMesh ) {
+
+			this.remove( this._fontMesh );
+
+			if ( this._fontMesh.material ) this._fontMesh.material.dispose();
+			if ( this._fontMesh.geometry ) this._fontMesh.geometry.dispose();
+
+			this._fontMesh = null;
+			// deepDelete( this._fontMesh );
+
+			this.unbindFontMeshProperties();
+
+		}
+
+		this._fontMesh = mesh;
+
+		if ( this._fontMesh ) {
+
+			this._fontMesh.raycast = () => {};
+
+			this.bindFontMeshProperties();
+
+			this._transferToFontMaterial();
+			this._transferToFontMesh();
+
+			this.add( this._fontMesh );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	bindFontMeshProperties () { }
+
+	/**
+	 *
+	 */
+	unbindFontMeshProperties () { }
+
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set fog( value ) {
+
+		this._fog.value = value;
+		console.log( this._fog.value )
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get fog() {
+
+		if ( this._fog ) return this._fog.value;
+
+		return false;
+	}
+
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set fontCastShadow( value ) {
+
+		if( this._fontCastShadow ) this._fontCastShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get fontCastShadow() { return this._fontCastShadow; }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set fontReceiveShadow( value ) {
+
+		if( this._fontReceiveShadow ) this._fontReceiveShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get fontReceiveShadow() { return this._fontReceiveShadow; }
+
+	/***********************************************************************************************************************
+	 * GEOMETRY
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set segments (v) {
+
+		this._segments.value = v;
+
+		// @TODO : Geometry Update
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get segments () { return this._segments.value; }
+
+
+	/***********************************************************************************************************************
+	 * HOOKS & ALTERS
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	set onAfterUpdate( func ) {
+
+		console.warn( 'ThreeMeshUI v7xx : `onAfterUpdate()` property has been deprecated, please rely on `addAfterUpdate` instead.' );
+		this.addAfterUpdate( func );
+
+	}
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	addAfterUpdate( func ) {
+
+		this._onAfterUpdates.push( func );
+
+	}
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	removeAfterUpdate( func ) {
+
+		const index = this._onAfterUpdates.indexOf( func );
+		if ( index !== -1 ) {
+
+			this._onAfterUpdates.splice( index, 1 );
+
+		}
+
+	}
+
+	/**
+	 * @todo: afterUpdate not called anymore
+	 */
+	performAfterUpdate() {
+
+		for ( let i = 0; i < this._onAfterUpdates.length; i++ ) {
+
+			this._onAfterUpdates[ i ]();
+
+		}
+
+	}
+
+	/**
+	 * Retrieve a property
+	 * @param propertyName
+	 * @return {BaseProperty|null}
+	 */
+	getProperty( propertyName ){
+
+		if( this[`_${propertyName}`] ){
+
+			return this[`_${propertyName}`];
+
+		}
+
+		return null;
+	}
+
+	/**
+	 *
+	 * @param {string} name
+	 * @param {BaseProperty} instance
+	 * @returns {void}
+	 */
+	appendProperty( name, instance ) {
+
+		this[`_${name}`] = instance;
+		this._components.push( instance );
+
+	}
+
+	/**
+	 *
+	 * @param {string} name
+	 * @param {BaseProperty} instance
+	 * @returns {BaseProperty}
+	 */
+	replaceProperty( name, instance ) {
+
+		const oldProperty = this[`_${name}`];
+
+		const index = this._components.indexOf( oldProperty );
+
+		this._components[index] = this[`_${name}`] = instance;
+		instance.needsUpdate = true;
+
+		return oldProperty;
+
+	}
+
+}
+
+/**
+ * @typedef Properties
+ * @type {Object.<string,Function>}
+ */
+
+/**
+ * @typedef Options
+ * @type {DocumentedOptions & Object.<string,any>}
+ */
+
+/**
+ *
+ * @typedef {Object} DocumentedOptions
+ *
+ * @property [options.name] {string}
+ * @property [options.flexDirection] {"row"|"row-reverse"|"column"|"column-reverse"}
+ * @property [options.justifyContent] {"start"|"center"|"end"|"space-around"|"space-between"|"space-evenly"}
+ * @property [options.alignItems] {"start"|"center"|"end"|"stretch"}
+ * @property [options.overflow] {"visible"|"hidden"}
+ * @property [options.fontKerning] {"normal"|"none"}
+ * @property [options.segments] {number}
+ * @property [options.fontFamily] {FontFamily|string}
+ * @property [options.fontStyle] {"normal"|"italic"}
+ * @property [options.fontWeight] {"light"|"normal"|"bold"|"bolder"|100|200|300|400|500|600|700|800|900|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900"}
+ *
+ * @property [options.color]{Color|number|string} The font color
+ *
+ * @property [options.backgroundColor]{Color|number|string} The background color
+ * @property [options.backgroundOpacity] {number}
+ * @property [options.backgroundSize] {"cover"|"contain"|"stretch"}
+ * @property [options.backgroundImage] {Texture|string}
+ *
+ *
+ * @property [options.borderColor] {Color|number|string}
+ * @property [options.borderOpacity] {number}
+ * @property [options.borderRadius] {Vector4|Array.<number>|number|string}
+ * @property [options.borderWidth] {Vector4|Array.<number>|number|string}
+ *
+ * @property [options.boxSizing] {"content-box"|"border-box"}
+ * @property [options.width] {number|string|"100%"|"auto"}
+ * @property [options.height] {number|string|"100%"|"auto"}
+ * @property [options.padding] {Vector4|Array.<number>|number|string}
+ * @property [options.margin] {Vector4|Array.<number>|number|string}
+ *
+ * @property [options.textAlign] {"left"|"right"|"center"|"justify"|"justify-left"|"justify-right"}
+ * @property [options.visible] {boolean}
+ * @property [options.letterSpacing] {number}
+ *
+ * @property [options.whiteSpace] {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"}
+ * @property [options.fontTexture] {Texture|string} @deprecated
+ * @property [options.textContent] {string}
+ *
+ */
+
+/**
+ * @typedef {"light"|"normal"|"bold"|"bolder"|100|200|300|400|500|600|700|800|900|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900"} FontWeightFormat
+ */
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Inline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Inline.js
new file mode 100644
index 0000000..f644e5b
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Inline.js
@@ -0,0 +1,262 @@
+/**
+ * This is the abstract/base class / interface of any inline
+ * Inline can be positioned according to text rules
+ */
+export default class Inline {
+
+	constructor() {
+
+		/** @protected */ this._offsetX = 0;
+		/** @protected */ this._offsetY = 0;
+
+		/** @protected */ this._lineBreak = null;
+
+		/** @protected */ this._kerning = 0;
+
+		/** @protected */ this._fontFactor = 1;
+		/** @protected */ this._fontSize = 0;
+
+		/** @protected */ this._cumulativeWidth = 0;
+
+		/** @protected */ this._paddingLeft = 0;
+		/** @protected */ this._paddingRight = 0;
+
+		/** @protected */ this._marginLeft = 0;
+		/** @protected */ this._marginRight = 0;
+
+	}
+
+	/**
+	 * @returns {void}
+	 */
+	resetOffsets() {
+
+		this._offsetX = this._offsetY = 0;
+		this._cumulativeWidth = 0;
+
+	}
+
+	/**
+	 * The horizontal distance this inline fills
+	 * @returns {number}
+	 */
+	get xadvance() { return 0 }
+
+	/**
+	 * The offset x of this inline in a line
+	 * @returns {number}
+	 */
+	get xoffset() { return 0 }
+
+	/**
+	 * The offset y of this inline in a line
+	 * @returns {number}
+	 */
+	get yoffset() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get width() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get height() { return 0 }
+
+	/**
+	 *
+	 * @param {string|null} value
+	 */
+	set lineBreak( value ) {
+
+		this._lineBreak = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {string|null}
+	 */
+	get lineBreak() { return this._lineBreak; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get anchor() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get kerning() { return this._kerning * this._fontFactor; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set kerning( value ) {
+
+		this._kerning = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get fontSize() { return this._fontSize }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontSize( value ) {
+
+		this._fontSize = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineHeight() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get offsetX() { return this._offsetX; }
+
+	/**
+	 *
+	 * @param value
+	 */
+	set offsetX( value ){
+
+		this._offsetX = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get offsetY() { return this._offsetY; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set offsetY( value ){
+
+		this._offsetY = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get cumulativeWidth() { return this._cumulativeWidth; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set cumulativeWidth( value ) {
+
+		this._cumulativeWidth = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginLeft() { return this._marginLeft; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set marginLeft( value ) {
+
+		this._marginLeft = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginRight() { return this._marginRight; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set marginRight( value ) {
+
+		this._marginRight = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingLeft() { return this._paddingLeft; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set paddingLeft( value ) {
+
+		this._paddingLeft = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingRight() { return this._paddingRight; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set paddingRight( value ) {
+
+		this._paddingRight = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineBase() { return 0 }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontFactor( value ){
+
+		this._fontFactor = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get fontFactor() { return this._fontFactor }
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Line.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Line.js
new file mode 100644
index 0000000..925d525
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Line.js
@@ -0,0 +1,45 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import Inline from './Inline';
+/* eslint-enable no-unused-vars */
+
+
+/**
+ * Line represents an horizontal combination of positioned inlines with additional properties
+ */
+export default class Line extends Array {
+
+	/**
+	 *
+	 * @param {Inline[]} items
+	 */
+	constructor(...items) {
+		super(...items);
+
+		/**
+		 * The width of this line
+		 * @type {number}
+		 */
+		this.width = 0;
+
+		/**
+		 * The maximum lineBase of this line of inlines
+		 * @type {number}
+		 */
+		this.lineBase = 0;
+
+		/**
+		 * The maximum lineHeight of this line of inlines
+		 * @type {number}
+		 */
+		this.lineHeight = 0;
+
+		/**
+		 * The vertical position of this line
+		 * @type {number}
+		 */
+		this.y = 0;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Lines.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Lines.js
new file mode 100644
index 0000000..72d5528
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Lines.js
@@ -0,0 +1,32 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import Line from './Line';
+/* eslint-enable no-unused-vars */
+
+/**
+ * Lines represents a vertical succession of Line
+ */
+export default class Lines extends Array {
+
+	/**
+	 *
+	 * @param {Line} items
+	 */
+	constructor(...items) {
+		super(...items);
+
+		/**
+		 * The maximum width of Line items
+		 * @type {number}
+		 */
+		this.width = 0;
+
+		/**
+		 * The addition of height of any Line
+		 * @type {number}
+		 */
+		this.height = 0;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/AutoSizePropertyBox.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/AutoSizePropertyBox.js
new file mode 100644
index 0000000..bbac7be
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/AutoSizePropertyBox.js
@@ -0,0 +1,251 @@
+import BaseProperty from './BaseProperty';
+
+/**
+ * Autosize are only trigger when natural size changed
+ */
+export default class AutoSizePropertyBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'autosize' );
+
+		this._needsProcess = true;
+	}
+
+	process( element ) {
+
+		// if( parent ) return;
+
+
+		// has auto size get the height from children
+		if ( element._width._auto ) _processAutoWidth( element );
+		if ( element._height._auto ) _processAutoHeight( element );
+
+		const stretch = element._alignItems._value === 'stretch';
+		const stretchChildrenWidth = stretch && element._flexDirection._value.indexOf( 'column' ) !== -1;
+		const stretchChildrenHeight = stretch && !stretchChildrenWidth;
+
+		for ( const box of element._children._boxes ) {
+
+			if ( ( box._width._auto && stretchChildrenWidth ) || box._width._relative ) {
+
+				box._bounds.setReferenceWidth( box, element._bounds._innerWidth );
+
+			}
+
+			if ( ( box._height._auto && stretchChildrenHeight ) || box._height._relative ) {
+
+				box._bounds.setReferenceHeight( box, element._bounds._innerHeight );
+
+			}
+
+		}
+
+		// // justify stretch - Not that easy
+		// const stretchD = element._justifyContent._value === 'stretch';
+		// const stretchChildrenWidthD = stretchD && element._flexDirection._value.indexOf( 'row' ) !== -1;
+		// const stretchChildrenHeightD = stretchD && !stretchChildrenWidthD;
+		//
+		//
+		// if ( stretchChildrenWidthD ) {
+		//
+		// 	const used = _computeChildrenSideWidth( element );
+		// 	const available = element._bounds._innerWidth - used;
+		// 	if ( available > 0 ) {
+		//
+		// 		const autoElement = element._children._uis.filter( c => c._width._auto );
+		// 		const distributed = available / autoElement.length;
+		//
+		// 		for ( const child of autoElement ) {
+		//
+		// 			const width = child._bounds._offsetWidth + distributed;
+		// 			child._bounds.setReferenceWidth( child, width );
+		//
+		// 		}
+		//
+		// 		element._layouter._needsProcess = true;
+		// 		element._flexDirection._needsProcess = true;
+		//
+		// 	}
+		//
+		// } else if ( stretchChildrenHeightD ) {
+		//
+		// 	const used = _computeChildrenSideHeight( element );
+		// 	const available = element._bounds._innerHeight - used;
+		// 	if ( available > 0 ) {
+		//
+		// 		const autoElement = element._children._uis.filter( c => c._height._auto );
+		// 		const distributed = available / autoElement.length;
+		//
+		// 		for ( const child of autoElement ) {
+		//
+		// 			const height = child._bounds._offsetHeight + distributed;
+		// 			child._bounds.setReferenceHeight( child, height );
+		//
+		// 		}
+		//
+		// 		element._layouter._needsProcess = true;
+		// 		element._flexDirection._needsProcess = true;
+		//
+		// 	}
+		//
+		// }
+
+
+	}
+
+}
+
+function _processAutoWidth( element ) {
+
+	// column : retrieve the biggest child width
+	// row : retrieve the sum of children width
+	element._bounds.setChildrenWidth( element, _computeAutoWidth( element ) );
+
+}
+
+function _processAutoHeight( element ) {
+
+	// column : retrieve the sum of children height
+	// row : retrieve the biggest child height
+	element._bounds.setChildrenHeight( element, _computeAutoHeight( element ) );
+
+}
+
+/**
+ * Retrieve the automatic height from children boxes
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeAutoHeight( element ) {
+
+	switch ( element._flexDirection._value ) {
+
+		case 'row' :
+		case 'row-reverse' :
+			return _computeHighestChildHeight( element );
+
+
+		case 'column' :
+		case 'column-reverse' :
+			return _computeChildrenSideHeight( element );
+
+	}
+
+}
+
+/**
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ *
+ */
+function _computeAutoWidth( element ) {
+
+	switch ( element._flexDirection._value ) {
+
+		case 'row' :
+		case 'row-reverse' :
+			return _computeChildrenSideWidth( element );
+
+
+		case 'column' :
+		case 'column-reverse' :
+			return _computeHighestChildWidth( element );
+
+	}
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideWidth( element ) {
+
+	let sumWidth = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const width = box._bounds._offsetWidth + margin.y + margin.w;
+
+		sumWidth += width;
+
+	}
+
+	return sumWidth;
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideHeight( element ) {
+
+	let sumHeight = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const height = box._bounds._offsetHeight + margin.x + margin.z;
+
+		sumHeight += height;
+
+	}
+
+	return sumHeight;
+
+}
+
+/**
+ * Returns the highest linear dimension among all the children of the passed component
+ * MARGIN INCLUDED
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeHighestChildWidth( element ) {
+
+	let maxWidth = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const width = box._bounds._offsetWidth + margin.y + margin.w;
+
+		if ( width > maxWidth ) maxWidth = width;
+
+	}
+
+	return maxWidth;
+
+}
+
+/**
+ * Returns the highest linear dimension among all the children of the passed component
+ * MARGIN INCLUDED
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeHighestChildHeight( element ) {
+
+	let maxHeight = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const height = box._bounds._offsetHeight + margin.x + margin.z;
+
+		if ( height > maxHeight ) maxHeight = height;
+
+	}
+
+	return maxHeight;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/AutoSizePropertyText.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/AutoSizePropertyText.js
new file mode 100644
index 0000000..09e4722
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/AutoSizePropertyText.js
@@ -0,0 +1,41 @@
+import BaseProperty from './BaseProperty';
+
+/**
+ * Autosize are only trigger when natural size changed
+ */
+export default class AutoSizePropertyText extends BaseProperty {
+
+	constructor() {
+
+		super( 'autosize' );
+
+	}
+
+	process( element ) {
+
+		if( element._layouter._value && element._layouter._value.length ) {
+
+			const lines = element._layouter._value;
+
+			// as this is from children offsetWidth, it means parent innerWidth
+			const padding = element._padding._value;
+			const border = element._borderWidth._value;
+
+			// has auto size get the height from children
+			if ( element._width._auto ) {
+
+				element._bounds.setOffsetWidth( element, lines.width + padding.w + padding.y + border.w + border.y );
+
+			}
+
+			if ( element._height._auto ) {
+
+				element._bounds.setOffsetHeight( element, lines.height + padding.x + padding.z + border.x + border.z );
+
+			}
+
+		}
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BaseProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BaseProperty.js
new file mode 100644
index 0000000..4629147
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BaseProperty.js
@@ -0,0 +1,219 @@
+import * as DefaultValues from '../DefaultValues';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 * @param primitive
+	 */
+	constructor( propertyId, value = null, primitive = true ) {
+
+		/**
+		 *
+		 * @type {string}
+		 * @internal
+		 */
+		this._id = propertyId;
+
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._value = value;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsUpdate = true;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsProcess = false;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsRender = false;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @protected
+		 */
+		this._isPrimitive = primitive;
+
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get id() { return this._id; }
+
+	/**
+	 *
+	 * @return {any}
+	 */
+	get value() { return this._value; }
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set value( value ) {
+
+		if ( !this.isValid( value ) ) return;
+
+		if ( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @param {Object.<string,any>} out
+	 */
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		// the value has been updated from setter
+		// if there is no additional logic
+		// then just output it
+		// => out[this._id] = this._value;
+		this.output( out );
+
+
+		// ??
+		//this.computeOutputValue( element );
+		// if( this._isPrimitive ) this.output( out );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Output this property in a dictionnary
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) { 	/* eslint-enable no-unused-vars */
+
+		// ie:
+		// out['borderRadius'] = this;
+		// out[this._id] = this._value;
+
+	}
+
+
+	/**
+	 *
+	 * @param {Out} out
+	 */
+	_outputValue( out ) {
+
+		out[ this._id ] = this._value;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Execute additional process after all properties have been updated
+	 * @param {MeshUIBaseElement} element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */ }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Execute additional process after all properties have been updated
+	 * @param {MeshUIBaseElement} element
+	 */
+	render( element ) { /* eslint-enable no-unused-vars */ }
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	getInheritedInput( element ) {
+
+		if ( this._value !== 'inherit' ) return this._value;
+
+		const parent = element._parent._value;
+		if ( parent && parent[ `_${this._id}` ] ) {
+
+			return parent[ `_${this._id}` ].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+	/**
+	 *
+	 * @return {any}
+	 */
+	getDefaultValue() {
+
+		return DefaultValues.get( this._id );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {any} value
+	 * @return {boolean}
+	 */
+	isValid( value ) { 	/* eslint-enable no-unused-vars */
+
+		return true;
+
+	}
+
+	/**
+	 *
+	 */
+	emptyStrategyLogic() {
+
+		throw new Error( `ThreeMeshUI::${this.constructor.name} has empty strategy. Update has not been processed.` );
+
+	}
+
+	requestUpdate() {
+		this._needsUpdate = true;
+	}
+
+	requestProcess() {
+		this._needsProcess = false;
+	}
+
+	requestRender() {
+		this._needsRender = false;
+	}
+
+}
+
+
+/**
+ * @typedef Out
+ * @type {Object & Object.<string,any>}
+ */
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BooleanProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BooleanProperty.js
new file mode 100644
index 0000000..f10476f
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BooleanProperty.js
@@ -0,0 +1,43 @@
+import BaseProperty from './BaseProperty';
+
+export default class BooleanProperty extends BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 */
+	constructor( propertyId, value = true ) {
+
+		super( propertyId, value, true );
+
+		/**
+		 * @override
+		 * @type {boolean}
+		 * @private
+		 */
+		this._value = value;
+
+		this.output = this._outputValue;
+
+	}
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set value( value ) {
+
+		this._value = value;
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsBox.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsBox.js
new file mode 100644
index 0000000..94137f8
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsBox.js
@@ -0,0 +1,399 @@
+import BaseProperty from './BaseProperty';
+import { Vector3 } from 'three';
+import { numberEquals } from '../../utils/NumberUtils';
+
+export default class BoundsBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'bounds', null, false );
+
+		/**
+		 *
+		 * @type {Vector3}
+		 * @internal
+		 */
+		this._size = new Vector3( 1, 1, 1 );
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offsetWidth = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offsetHeight = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._innerWidth = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._innerHeight = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._centerX = 0.5;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._centerY = 0.5;
+
+
+		this._needsProcess = true;
+
+	}
+
+	/**
+	 * Set the value of the width 100%
+	 * @param element
+	 * @param value
+	 */
+	setReferenceWidth( element, value ) {
+
+		const width = element._width;
+		const padding = element._padding._value;
+		const borderWidth = element._borderWidth._value;
+		const margin = element._margin._value;
+
+		const factor = width._auto ? 1 : width._value;
+		// const newOffsetWidth = (value * factor) - (margin.y + margin.w);
+		const newOffsetWidth = (value * factor) - (margin.y + margin.w);
+		if ( numberEquals( newOffsetWidth, this._offsetWidth ) ) return;
+
+		this._offsetWidth = newOffsetWidth;
+		this._innerWidth = this._offsetWidth - ( padding.y + padding.w + borderWidth.y + borderWidth.w );
+
+		this._centerX = _computeCenterX( element );
+
+		this._propagateWidth( element );
+
+		this._triggerCascadingDependencies( element );
+
+	}
+
+	/**
+	 * Set the value of the height 100%
+	 * @param element
+	 * @param value
+	 */
+	setReferenceHeight( element, value ) {
+
+		const height = element._height;
+		const padding = element._padding._value;
+		const borderWidth = element._borderWidth._value;
+		const margin = element._margin._value;
+
+		const factor = height._auto ? 1 : height._value;
+
+		const newOffsetHeight = (value * factor) - ( margin.x + margin.z );
+		if ( numberEquals( newOffsetHeight, this._offsetHeight ) ) return;
+
+		this._offsetHeight = newOffsetHeight;
+		this._innerHeight = this._offsetHeight - ( padding.x + padding.z + borderWidth.x + borderWidth.z );
+		this._centerY = _computeCenterY( element );
+
+		this._propagateHeight( element );
+
+		this._triggerCascadingDependencies( element );
+
+	}
+
+	setChildrenWidth( element, value ) {
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		this._innerWidth = value;
+		this._offsetWidth = this._innerWidth + ( padding.y + padding.w + border.y + border.w )
+
+		this._centerX = _computeCenterX( element );
+
+		this._propagateWidth( element );
+		this._triggerCascadingDependencies( element );
+
+
+	}
+
+	setChildrenHeight( element, value ) {
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		this._innerHeight = value;
+		this._offsetHeight = this._innerHeight + ( padding.x + padding.z + border.x + border.z )
+
+		this._centerY = _computeCenterY( element );
+
+		this._propagateHeight( element );
+		this._triggerCascadingDependencies( element );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		// only compute new width if explicitely defined
+		const width = element._width;
+		if( !width._auto && !width._relative ) {
+
+			if ( element._boxSizing._value === 'content-box' ) {
+
+				this._innerWidth = width._value;
+				this._offsetWidth = this._innerWidth + padding.y + padding.w + border.y + border.w;
+
+			} else {
+
+				this._offsetWidth = width._value;
+				this._innerWidth = this._offsetWidth - ( padding.y + padding.w + border.y + border.w );
+
+			}
+
+			this._centerX = _computeCenterX( element );
+			this._needsProcess = true;
+
+			// tells children width has changed
+			this._propagateWidth( element );
+			this._triggerCascadingDependencies( element );
+
+		}
+
+		const height = element._height;
+		if( !height._auto && !height._relative ) {
+
+			if ( element._boxSizing._value === 'content-box' ) {
+
+				this._innerHeight = height._value;
+				this._offsetHeight = this._innerHeight + padding.x + padding.z + border.x + border.z;
+
+			} else {
+
+				this._offsetHeight = height._value;
+				this._innerHeight = this._offsetHeight - ( padding.x + padding.z + border.x + border.z );
+
+			}
+
+			this._centerY = _computeCenterY( element );
+			this._needsProcess = true;
+
+			// tells children height has changed
+			this._propagateHeight( element );
+			this._triggerCascadingDependencies( element );
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */ render( element ) { /* eslint-enable no-unused-vars */
+
+		this._size.x = this._offsetWidth;
+		this._size.y = this._offsetHeight;
+
+		if( element._backgroundMesh ){
+			element._backgroundMesh.updateScale();
+		}
+
+		element._renderer._needsRender = true;
+
+	}
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) {
+
+		out[ 'size' ] = this._size;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		// this._triggerCascadingDependencies( element )
+
+		//console.log( 'process bounds box', element.name );
+
+		// update primitives or unbinded values
+
+		// require cascading processes
+
+		element._overflow._needsRender = true;
+
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @internal
+	 */
+	_computeChildrenSideWidth( element ) {
+
+		return _computeChildrenSideWidth( element );
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @internal
+	 */
+	_computeChildrenSideHeight( element ) {
+
+		return _computeChildrenSideHeight( element );
+
+	}
+
+	_propagateWidth( element ) {
+
+		for ( let i = 0; i < element._children._boxes.length; i++ ) {
+
+			const box = element._children._boxes[ i ];
+			const width = box._width;
+
+			if( width._relative ) box._bounds.setReferenceWidth( box, this._innerWidth );
+
+		}
+
+	}
+
+	_propagateHeight( element ) {
+
+		for ( let i = 0; i < element._children._boxes.length; i++ ) {
+
+			const box = element._children._boxes[ i ];
+			const height = box._height;
+
+			if( height._relative ) box._bounds.setReferenceHeight( box, this._innerHeight );
+
+		}
+
+	}
+
+	_triggerCascadingDependencies( element ) {
+
+		// also change parent when require
+		if ( element._parent._value ) {
+			element._parent._value._autoSize._needsProcess = true;
+		}
+
+		element._flexDirection._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		this._needsRender = true;
+
+		element._borderWidth._needsRender = true;
+		element._borderRadius._needsRender = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+}
+
+
+
+
+/***********************************************************************************************************************
+ * INTERNAL FUNCTIONS
+ **********************************************************************************************************************/
+
+/**
+ * Retrieve the center X according to box sized dimensions
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeCenterX( element ) {
+
+	const padding = element._padding._value;
+	const borderWidth = element._borderWidth._value;
+
+	const leftSide = padding.w + borderWidth.w;
+	const rightSide = padding.y + borderWidth.y;
+
+	return ( leftSide - rightSide ) / 2;
+}
+
+/**
+ * Retrieve the center Y according to box sized dimensions
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeCenterY( element ) {
+
+
+	const padding = element._padding._value;
+	const borderWidth = element._borderWidth._value;
+
+	const topSide = padding.x + borderWidth.x;
+	const bottomSide = padding.z + borderWidth.z;
+
+	return ( bottomSide - topSide ) / 2;
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideWidth( element ) {
+
+	return element._children._boxes.reduce( ( accu, child ) => {
+		// if ( child._bounds._needsProcess ) child._bounds.process( child );
+
+		const margin = child._margin._value;
+		const CHILD_SIZE = child._bounds._offsetWidth + margin.y + margin.w;
+
+		return accu + CHILD_SIZE;
+
+	}, 0 );
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideHeight( element ) {
+
+	return element._children._boxes.reduce( ( accu, child ) => {
+		// if ( child._bounds._needsProcess ) child._bounds.process( child );
+
+		const margin = child._margin._value;
+
+		const CHILD_SIZE = child._bounds._offsetHeight + margin.x + margin.z;
+
+		return accu + CHILD_SIZE;
+
+	}, 0 );
+
+}
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsInlineBlock.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsInlineBlock.js
new file mode 100644
index 0000000..309bad0
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsInlineBlock.js
@@ -0,0 +1,65 @@
+import BaseProperty from './BaseProperty';
+import { Vector3 } from 'three';
+
+export default class BoundsInlineBlock extends BaseProperty {
+
+	constructor() {
+
+		super( 'bounds', null, false );
+
+		/**
+		 *
+		 * @type {Vector3}
+		 * @internal
+		 */
+		this._size = new Vector3( 1, 1, 1 );
+
+		this._offsetWidth = 0;
+		this._offsetHeight = 0;
+
+		this._innerWidth = 0;
+		this._innerHeight = 0;
+	}
+
+
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		this.output( out );
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		this._offsetWidth = this._innerWidth = element._inlines._value[0].width;
+		this._offsetHeight = this._innerHeight = element._inlines._value[0].height;
+
+		this._needsRender = true;
+
+		element._borderWidth._needsRender = true;
+		element._borderRadius._needsRender = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */ render( element ) { /* eslint-enable no-unused-vars */
+
+		this._size.x = this._offsetWidth;
+		this._size.y = this._offsetHeight;
+
+	}
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) {
+
+		out[ 'size' ] = this._size;
+
+	}
+
+}
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsText.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsText.js
new file mode 100644
index 0000000..af8aa1f
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsText.js
@@ -0,0 +1,14 @@
+import BoundsBox from './BoundsBox';
+
+export default class BoundsText extends BoundsBox {
+
+	constructor() {
+
+		super();
+
+		this._innerWidth = Infinity;
+		this._innerHeight = 0;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoxLayouter.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoxLayouter.js
new file mode 100644
index 0000000..7cb6784
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoxLayouter.js
@@ -0,0 +1,87 @@
+import BaseProperty from './BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+import Line from './../../core/elements/glyphs/Line';
+import { Vector3 } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class BoxLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false);
+
+		// configure
+		this._needsUpdate = true;
+
+		/**
+		 * @typedef ChildrenPos
+		 * @type {Object & Object.<string,Vector3>}
+		 */
+
+		/**
+		 *
+		 * @type {ChildrenPos}
+		 * @internal
+		 */
+		this._childrenPos = {};
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Updated when :
+	 * 	- New child added
+	 * 	- Child removed
+	 * 	- Child position changed
+	 * 	- Child visibility changed
+	 * 	- ...?
+	 * 	@override
+	 */
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		//console.log( "BoxLayouter update", element.name );
+		// reset
+		this._childrenPos = {};
+
+		for ( const uiBoxElement of element._children._boxes ) {
+
+			//console.log( uiBoxElement._position._value )
+			if( uiBoxElement._position._value === 'static' ) {
+
+				// bind position
+				this._childrenPos[ uiBoxElement.id ] = uiBoxElement.position;
+
+			}
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	/* eslint-disable no-unused-vars */ process( element ) { 	/* eslint-enable no-unused-vars */
+
+		// As _childrenPos are bounds with child.position, this is not required anymore
+		//
+		// element._position._needsProcess = true;
+		//
+		// for ( const box of element._children._boxes ) {
+		//
+		// 	if( this._childrenPos[box.id] ) {
+		//
+		// 		box.position.x = this._childrenPos[box.id].x;
+		// 		box.position.y = this._childrenPos[box.id].y;
+		//
+		// 	}
+		//
+		// }
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/EmptyProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/EmptyProperty.js
new file mode 100644
index 0000000..0e419fd
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/EmptyProperty.js
@@ -0,0 +1,30 @@
+import BaseProperty from './BaseProperty';
+
+export default class EmptyProperty extends BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId = 'untitled' ) {
+
+		super( propertyId, undefined, false );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @param {Object.<string,any>} out
+	 */
+	update( element , out ) { /* eslint-enable no-unused-vars */ }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Output this property in a dictionnary
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) { /* eslint-enable no-unused-vars */ }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/FontProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/FontProperty.js
new file mode 100644
index 0000000..ab1a1f1
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/FontProperty.js
@@ -0,0 +1,207 @@
+import BaseProperty from './BaseProperty';
+import FontVariant from '../../font/FontVariant';
+
+export default class FontProperty extends BaseProperty{
+
+	/**
+	 *
+	 * @param {FontVariant} [value=null]
+	 */
+	constructor( value = null ) {
+
+		super( 'font', value, false);
+
+		this._needsUpdate = false;
+
+		/**
+		 *
+		 * @type {FontVariant|null}
+		 * @internal
+		 */
+		this._fontVariant = null;
+
+
+		/**
+		 * @typedef ReadyClosure
+		 * @type { ()=> void|null }
+		 */
+
+		/**
+		 *
+		 * @type {ReadyClosure}
+		 * @private
+		 */
+		this._handleFontReadyClosure = null;
+
+		/**
+		 * @override
+		 */
+		this.isValid = _isValid;
+
+	}
+
+	output( out ) {
+
+		out[this._id] = this._fontVariant;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		// if a previous font isset, be sure no event remains
+		if ( this._fontVariant && !this._fontVariant.isReady ) {
+
+			this._fontVariant.removeEventListener( 'ready', this._handleFontReadyClosure );
+
+		}
+
+		// obtain font from value or from style combinaison
+		if( this._value && this._value instanceof FontVariant ) {
+
+			this._fontVariant = this._value;
+
+		} else {
+
+
+			const fontFamily = element._fontFamily._value;
+			if( fontFamily ) {
+
+				this._fontVariant = fontFamily.getVariant(
+					element._fontWeight._value,
+					element._fontStyle._value,
+				);
+
+			}
+
+		}
+
+		if( !this._fontVariant ) return;
+
+		this._fontVariant._alterElementProperties( element );
+
+		this._handleFontReadyClosure = _readyClosure( element, this );
+
+		// new font, means rebuild inlines, now or soon
+		if ( !this._fontVariant.isReady ) {
+
+			// @TODO : clear inlines components
+			// this.inlines = null;
+
+			this._fontVariant.addEventListener( 'ready', this._handleFontReadyClosure );
+
+		} else {
+
+			this._handleFontReadyClosure();
+
+		}
+
+		// Set the default material
+		if( !element._fontMaterial._defaultMaterial || !(element._fontMaterial._defaultMaterial instanceof this._fontVariant.fontMaterial) ) {
+
+			element._fontMaterial._defaultMaterial = new this._fontVariant.fontMaterial();
+			element._fontMaterial._needsUpdate = true;
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @param {FontVariant} value
+	 */
+	set value( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @return {FontVariant}
+	 */
+	get value() { return this._value; }
+
+
+	/**
+	 *
+	 * @return {FontVariant|null}
+	 */
+	get fontVariant() { return this._fontVariant; }
+
+	/**
+	 *
+	 */
+	dispose () {
+
+		if( this._handleFontReadyClosure ) {
+
+			this._fontVariant.removeEventListener( 'ready', this._handleFontReadyClosure );
+			this._handleFontReadyClosure = null;
+
+		}
+
+		this._value = null;
+		this._fontVariant = null;
+
+	}
+
+}
+
+
+/**
+ *
+ * @param {number} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( ! ( value instanceof FontVariant )  ) {
+
+		console.warn(`.font value '${value}' is not valid. It requires a FontVariant instance. Aborted`);
+		return false;
+
+	}
+
+	return true;
+
+}
+
+/**
+ *
+ * @param {MeshUIBaseElement} element
+ * @param {FontProperty} fontProperty
+ * @return {() => void}
+ * @private
+ */
+function _readyClosure( element, fontProperty ) {
+	return function () {
+
+		fontProperty._needsUpdate = true;// ? update itself?
+		element._glyphs._needsProcess = true;
+
+		// this._transferToMaterial();
+
+		// request parse update and parent layout
+		// this.update( true, true, false );
+		// this.getHighestParent().update( false, true, false );
+
+		// remove the listener
+		fontProperty._fontVariant.removeEventListener( 'ready', fontProperty._handleFontReadyClosure );
+		fontProperty._handleFontReadyClosure = null;
+
+	}
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/FontSmoothProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/FontSmoothProperty.js
new file mode 100644
index 0000000..8a91af7
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/FontSmoothProperty.js
@@ -0,0 +1,36 @@
+import InheritableProperty from './InheritableProperty';
+
+export default class FontSmoothProperty extends InheritableProperty{
+
+	constructor() {
+
+		super( 'fontSmooth', 'inherit', true);
+
+		// configure
+		this._needsUpdate = false;
+		this.isValid = _isValid;
+		this.output = this._outputValue;
+	}
+
+}
+
+const AVAILABLE_VALUES = ['inherit','none','antialiased'];
+
+/**
+ *
+ * @param {string} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if(  AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn(`.fontSmoothing value '${value}' is not valid. Aborted`);
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/FontSmoothPropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/FontSmoothPropertyInline.js
new file mode 100644
index 0000000..9822989
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/FontSmoothPropertyInline.js
@@ -0,0 +1,15 @@
+import FontSmoothProperty from './FontSmoothProperty';
+
+export default class FontSmoothPropertyInline extends FontSmoothProperty{
+
+	constructor() {
+
+		super();
+
+		// configure
+		this.output = this._outputValue;
+		this._needsUpdate = true;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/GlyphsProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/GlyphsProperty.js
new file mode 100644
index 0000000..ea4bb10
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/GlyphsProperty.js
@@ -0,0 +1,72 @@
+import BaseProperty from './BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import TypographicGlyph from '../../font/TypographicGlyph';
+/* eslint-enable no-unused-vars */
+
+export default class GlyphsProperty extends BaseProperty{
+
+	constructor() {
+
+		super( "glyphs", null, false);
+
+		this._needsUpdate = false;
+
+		/**
+		 *
+		 * @type {Array.<TypographicGlyph>}
+		 * @private
+		 */
+		this._value = null;
+
+		// value
+
+		// 1. collapsed whiteSpace;
+		// this._textContent = Whitespace.collapseWhitespaceOnString( this.content, this.getWhiteSpace() );
+
+		// 2. glyphs
+		// this._textContentGlyphs = this._textContent.split( '' ).map( ( char ) => this._font.getTypographicGlyph( char ) );
+
+		// 3. Inlines
+		// this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		// 4. kerning
+		// this._buildContentKernings();
+
+
+		// 5.? Apply margin and padding on first and last inlines
+		// if( this._textContentInlines.length ) {
+		//
+		// 	// First gets left side
+		// 	this._textContentInlines[0].paddingLeft = this._padding.w;
+		// 	this._textContentInlines[0].marginLeft = this._margin.w;
+		//
+		// 	// Last gets right side
+		// 	const lastIndex = this._textContentInlines.length - 1;
+		// 	this._textContentInlines[lastIndex].paddingRight = this._padding.y;
+		// 	this._textContentInlines[lastIndex].marginRight = this._margin.y;
+		//
+		// }
+
+	}
+
+	process( element ) {
+
+		if( !element._font._fontVariant ) return;
+		if( !element._font._fontVariant.isReady ) return;
+
+		this._value = element._whiteSpace._whiteSpacedContent.split( '' ).map( ( char ) => element._font._fontVariant.getTypographicGlyph( char ) );
+
+		// @TODO : Even if the value is removed it should trigger a rebuild.
+		if( this._value ) element._inlines._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Array.<TypographicGlyph>}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InheritableBooleanProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InheritableBooleanProperty.js
new file mode 100644
index 0000000..7a7099b
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InheritableBooleanProperty.js
@@ -0,0 +1,18 @@
+import InheritableProperty from './InheritableProperty';
+
+/**
+ * @property {boolean|"inherit"} value
+ */
+export default class InheritableBooleanProperty extends InheritableProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId) {
+
+		super( propertyId, 'inherit', true );
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InheritableMaterialProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InheritableMaterialProperty.js
new file mode 100644
index 0000000..85b66d9
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InheritableMaterialProperty.js
@@ -0,0 +1,107 @@
+import InheritableProperty from './InheritableProperty';
+import { alphaTestTransformer } from '../../utils/mediator/transformers/MaterialTransformers';
+
+/**
+ * @property {Material|null|"inherit"} value
+ */
+export default class InheritableMaterialProperty extends InheritableProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId ) {
+
+		super( propertyId, 'inherit', false );
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+		 * @internal
+		 */
+		this._mediation = {};
+
+		/**
+		 *
+		 * @type {null}
+		 * @internal
+		 */
+		this._defaultMaterial = null;
+
+	}
+
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._notInheritedValue = this._value;
+
+		if ( this._notInheritedValue === 'inherit' ) {
+			this._notInheritedValue = this.getInheritedInput( element );
+		} else {
+			this.propagate( element );
+		}
+
+		// no material
+		if ( !this._notInheritedValue ) {
+
+			// reset mediation
+			this._mediation = {};
+
+		} else if ( this._notInheritedValue.constructor.mediation ) {
+
+			this._mediation = { ...this._notInheritedValue.constructor.mediation };
+
+		} else {
+
+			this._mediation = {
+				clippingPlanes: { m: 'clippingPlanes' },
+				fontAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+				fontSide: { m: 'side' },
+				color: { m: 'color' },
+				fontOpacity: { m: 'opacity' }
+			};
+
+		}
+
+		element._transferToFontMaterial();
+
+		// dispatch to children
+
+
+		this._outputValue( out );
+
+	}
+
+	/**
+	 * @override
+	 */
+	getInheritedInput( element ) {
+
+		if ( this._value !== 'inherit' ) return this._value;
+
+		let recursiveParent = element;
+		let inheritedValue = null;
+		while ( recursiveParent._parent._value ) {
+
+			recursiveParent = recursiveParent._parent._value;
+			if ( recursiveParent[ `_${this._id}` ]._value !== 'inherit' ) {
+
+				inheritedValue = recursiveParent[ `_${this._id}` ]._value;
+				break;
+			}
+
+		}
+
+		if ( inheritedValue !== null ) {
+			return inheritedValue;
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+	getDefaultValue() {
+		return this._defaultMaterial;
+	}
+
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InheritableProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InheritableProperty.js
new file mode 100644
index 0000000..3694294
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InheritableProperty.js
@@ -0,0 +1,90 @@
+import BaseProperty from './BaseProperty';
+
+export default class InheritableProperty extends BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 * @param primitive
+	 */
+	constructor( propertyId, value = null, primitive = true ) {
+
+		super( propertyId, value, primitive );
+
+		// @TODO : I would like to remove this rules ( here )
+		this.output = this._outputValue;
+
+		this._notInheritedValue = null;
+	}
+
+	update( element , out ) { 	/* eslint-enable no-unused-vars */
+
+		this._notInheritedValue = this._value;
+
+		if( this._notInheritedValue === 'inherit' )
+		{
+			this._notInheritedValue = this.getInheritedInput( element );
+		}
+		// else
+		// {
+		// 	this.propagate( element );
+		// }
+
+		// @TODO: Evaluate. This might be too much
+		this.propagate( element );
+
+		this._outputValue( out );
+
+	}
+
+	propagate( element ) {
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+
+			const property = childUIElement[`_${this._id}`];
+			if( property !== undefined && property._value === 'inherit' ) {
+				childUIElement[`_${this._id}`]._needsUpdate = true;
+			}
+
+		}
+	}
+
+	/**
+	 * Output this property in a dictionnary
+	 * @override
+	 */
+	_outputValue( out ) { 	/* eslint-enable no-unused-vars */
+
+		out[this._id] = this._notInheritedValue;
+
+	}
+
+	set value ( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+	/**
+	 *
+	 * @override
+	 * @return {any|"inherit"}
+	 */
+	get value() {
+
+		if( this._value === 'inherit' ) return this._notInheritedValue;
+
+		return this._value;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlineJustificator.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlineJustificator.js
new file mode 100644
index 0000000..7309fd9
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlineJustificator.js
@@ -0,0 +1,75 @@
+import BaseProperty from './BaseProperty';
+
+export default class InlineJustificator extends BaseProperty {
+
+	constructor() {
+		super( 'inlineJustificator', null, false );
+
+		/**
+		 *
+		 * @type {Lines}
+		 * @private
+		 */
+		this._value = null;
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */ }
+
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) {
+
+		const INNER_HEIGHT = element._bounds._innerHeight;
+		const lines = element._layouter._value;
+
+		const textHeight = Math.abs( lines.height );
+
+
+		// Line vertical positioning
+		let justificationOffset = ( () => {
+
+			switch ( element._alignItems._value ) {
+
+				case 'inherit':
+				case 'start':
+					return INNER_HEIGHT / 2 ;
+
+				case 'end':
+					return textHeight - ( INNER_HEIGHT / 2 );
+
+
+				case 'stretch': // @TODO : Stretch should trigger an error in own property
+				case 'center':
+					return textHeight/2;
+
+			}
+		} )();
+
+		//console.log( justificationOffset );
+
+		// Apply padding
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		justificationOffset += ( - padding.x + padding.z ) / 2 + ( - border.x + border.z ) / 2;
+
+		//
+
+		lines.forEach( ( line ) => {
+
+			line.y += justificationOffset;
+
+			line.forEach( ( inline ) => {
+
+				inline.offsetY += justificationOffset;
+
+			} );
+
+		} );
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlineLayouter.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlineLayouter.js
new file mode 100644
index 0000000..445f87a
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlineLayouter.js
@@ -0,0 +1,45 @@
+import BaseProperty from './BaseProperty';
+
+export default class InlineLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false );
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @private
+		 */
+		this._value = null;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		// find the first text parent;
+		this._value = element._parent.find( (p) => { return p.isUI && p.isText } );
+
+		this._needsProcess = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) { 	/* eslint-enable no-unused-vars */
+
+
+		// layout has been changed
+		if( this._value ) {
+
+			this._value._layouter._needsProcess = true;
+
+		}
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlinesProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlinesProperty.js
new file mode 100644
index 0000000..0237a25
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlinesProperty.js
@@ -0,0 +1,78 @@
+import BaseProperty from './BaseProperty';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import Inline from '../elements/glyphs/Inline';
+/* eslint-enable no-unused-vars */
+
+export default class InlinesProperty extends BaseProperty{
+
+	constructor() {
+
+		super( "inlines", null, false );
+
+		/**
+		 *
+		 * @type {Array.<Inline>}
+		 * @private
+		 */
+		this._value = null;
+
+		// value
+
+		// 3. Inlines
+		// this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		// 4. kerning
+		// this._buildContentKernings();
+
+
+		// 5.? Apply margin and padding on first and last inlines
+		// if( this._textContentInlines.length ) {
+		//
+		// 	// First gets left side
+		// 	this._textContentInlines[0].paddingLeft = this._padding.w;
+		// 	this._textContentInlines[0].marginLeft = this._margin.w;
+		//
+		// 	// Last gets right side
+		// 	const lastIndex = this._textContentInlines.length - 1;
+		// 	this._textContentInlines[lastIndex].paddingRight = this._padding.y;
+		// 	this._textContentInlines[lastIndex].marginRight = this._margin.y;
+		//
+		// }
+
+	}
+
+	process( element ) {
+
+		this._value = element._glyphs._value.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		if( this._value.length ) {
+
+			// First gets left side
+			this._value[0].paddingLeft = element._padding._value.w;
+			this._value[0].marginLeft = element._margin._value.w;
+
+			// Last gets right side
+			const lastIndex = this._value.length - 1;
+			this._value[lastIndex].paddingRight = element._padding._value.y;
+			this._value[lastIndex].marginRight = element._margin._value.y;
+
+		}
+
+
+		element._fontSize._needsProcess = true;
+		element._lineBreak._needsProcess = true;
+		element._fontKerning._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Array.<Inline>}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlinesPropertyInlineBlock.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlinesPropertyInlineBlock.js
new file mode 100644
index 0000000..57649a2
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InlinesPropertyInlineBlock.js
@@ -0,0 +1,40 @@
+import BaseProperty from './BaseProperty';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import Inline from '../elements/glyphs/Inline';
+/* eslint-enable no-unused-vars */
+
+/**
+ * @property {Array.<InlineGlyph>} value
+ */
+export default class InlinesPropertyInlineBlock extends BaseProperty{
+
+	constructor() {
+
+		super( "inlines", null, false );
+
+		/**
+		 *
+		 * @type {Array.<Inline>}
+		 * @internal
+		 */
+		this._value = [];
+
+	}
+
+	process( element ) {
+
+		// First gets left side
+		this._value[0].paddingLeft = element._padding._value.w;
+		this._value[0].marginLeft = element._margin._value.w;
+
+		// Last gets right side
+		const lastIndex = this._value.length - 1;
+		this._value[lastIndex].paddingRight = element._padding._value.y;
+		this._value[lastIndex].marginRight = element._margin._value.y;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InvertAlphaProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InvertAlphaProperty.js
new file mode 100644
index 0000000..c79b0c2
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/InvertAlphaProperty.js
@@ -0,0 +1,16 @@
+import InheritableProperty from './InheritableProperty';
+
+/**
+ * Class definition
+ * @property {boolean|"inherit"} value - propriety description
+ *
+ */
+export default class InvertAlphaProperty extends InheritableProperty {
+
+	constructor() {
+
+		super( 'invertAlpha', 'inherit' );
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/LineBreakProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/LineBreakProperty.js
new file mode 100644
index 0000000..4272421
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/LineBreakProperty.js
@@ -0,0 +1,76 @@
+import BaseProperty from './BaseProperty';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+export default class LineBreakProperty extends BaseProperty{
+
+	constructor( defaultValue = "- ,.:?!\n" ) {
+
+		super( "lineBreak", defaultValue, true );
+
+		/**
+		 *
+		 * @type {"mandatory"|"possible"|null}
+		 * @private
+		 */
+		this._newLineBreakability = null;
+
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		const newLineBreakability = element._whiteSpace._newLineBreakability;
+
+		if( !element._inlines._value ) return;
+
+		// update inlines properties before inline placements in lines
+		for ( let i = 0; i < element._inlines._value.length; i++ ) {
+
+
+			const inline = element._inlines._value[ i ];
+			const char = inline.char;
+
+			// Whitespace Breakability ---------------------------------------------------------------------------------------
+			let lineBreak = null;
+
+			// could be inlineBlock without char
+			if( char !== undefined ) {
+
+				// @question : Does it worth to be strategy? I don't really think so
+				if ( newLineBreakability !== 'nowrap' ) {
+
+					if ( this._value.includes( char ) || char.match( /\s/g ) ) lineBreak = 'possible';
+
+				}
+
+				if ( char.match( /\n/g ) ) {
+
+					lineBreak = newLineBreakability;
+
+				}
+
+			}
+
+			inline.lineBreak = lineBreak;
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {string}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/NumberProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/NumberProperty.js
new file mode 100644
index 0000000..e684e1d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/NumberProperty.js
@@ -0,0 +1,42 @@
+import BaseProperty from './BaseProperty';
+import { numberEquals } from '../../utils/NumberUtils';
+
+export default class NumberProperty extends BaseProperty{
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {number} [value]
+	 */
+	constructor( propertyId, value ) {
+
+		super( propertyId, value, true);
+
+		this.output = this._outputValue;
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set value( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		if( numberEquals(this._value, value) ) return;
+
+		this._value = value;
+
+		this._needsUpdate = true;
+
+	}
+
+
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/OffsetProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/OffsetProperty.js
new file mode 100644
index 0000000..618c8d4
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/OffsetProperty.js
@@ -0,0 +1,22 @@
+import InheritableProperty from './InheritableProperty';
+
+export default class OffsetProperty extends InheritableProperty {
+
+	constructor( ) {
+
+		super( 'offset', 'inherit', false );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		super.update( element, out);
+
+		// only process if element has ui parent
+		if( element._parent._value !== null ) element.position.z = this._notInheritedValue;
+
+	}
+
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/RenderOrderProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/RenderOrderProperty.js
new file mode 100644
index 0000000..e1c9cc8
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/RenderOrderProperty.js
@@ -0,0 +1,73 @@
+import BaseProperty from './BaseProperty';
+
+export default class RenderOrderProperty extends BaseProperty{
+
+	constructor() {
+
+		super( 'renderOrder', 'auto', true);
+
+		this.output = this._outputValue;
+
+		this._actualValue = 0;
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set value( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		this._value = value;
+
+		this._needsUpdate = true;
+
+	}
+
+	update( element, out ) {
+
+		if( this._value !== 'auto' ) {
+
+			this._actualValue = this._value;
+
+		} else {
+
+			const parent = element._parent._value;
+			if( parent !== null ) {
+
+				const parentIndex = parent._renderOrder._actualValue;
+				const positionInParent = 1 + parent._children._uis.indexOf( element );
+
+				this._actualValue = parentIndex + positionInParent;
+
+			}
+
+		}
+
+		// update any children
+		for ( const childUIElement of element._children._uis ) {
+
+			const property = childUIElement[`_renderOrder`];
+			if( property._value === 'auto' ) childUIElement[`_renderOrder`]._needsUpdate = true;
+
+		}
+
+		this._outputValue( out );
+
+	}
+
+	_outputValue( out ) {
+
+		out[this._id] = this._actualValue;
+
+	}
+
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/SideProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/SideProperty.js
new file mode 100644
index 0000000..eb1d130
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/SideProperty.js
@@ -0,0 +1,42 @@
+import { BackSide, DoubleSide, FrontSide } from 'three';
+import InheritableProperty from './InheritableProperty';
+
+/**
+ * @property {number|"inherit"} value
+ */
+export default class SideProperty extends InheritableProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId ) {
+
+		super( propertyId, 'inherit', true);
+
+		this.isValid = _isValid;
+
+	}
+
+}
+
+const AVAILABLE_VALUES = [ FrontSide, BackSide, DoubleSide ];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value) === -1 ){
+
+		console.warn(`SideProperty value '${value}' is not valid. Abort`);
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextContentDefault.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextContentDefault.js
new file mode 100644
index 0000000..d5cc2c6
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextContentDefault.js
@@ -0,0 +1,36 @@
+import EmptyProperty from './EmptyProperty';
+
+export default class TextContentDefault extends EmptyProperty{
+
+	constructor() {
+
+		super( "textContent" );
+
+		this._needsUpdate = false;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ set value( v ) { 	/* eslint-enable no-unused-vars */ }
+
+
+	/* eslint-disable no-unused-vars */ process( element ) { /* eslint-enable no-unused-vars */
+
+		let content = "";
+		for ( let i = 0; i < element.children.length; i++ ) {
+			const child = element.children[i];
+
+			if( child.isUI ) {
+
+				content += child.textContent;
+
+			}
+
+		}
+
+		this._value = content;
+
+	}
+
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextContentInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextContentInline.js
new file mode 100644
index 0000000..afcd432
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextContentInline.js
@@ -0,0 +1,19 @@
+import BaseProperty from './BaseProperty';
+
+export default class TextContentInline extends BaseProperty{
+
+	constructor() {
+
+		super( "textContent", null, false );
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		element._glyphs._needsUpdate = true;
+		element._whiteSpace._needsProcess = true;
+
+	}
+
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextContentProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextContentProperty.js
new file mode 100644
index 0000000..8a83264
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextContentProperty.js
@@ -0,0 +1,78 @@
+import InlineElement from '../../elements/basic/InlineElement';
+import TextContentDefault from './TextContentDefault';
+
+export default class TextContentProperty extends TextContentDefault{
+
+	constructor() {
+
+		super( "textContent", null, false );
+
+		this._needsUpdate = false;
+
+	}
+
+	set value( value ) {
+
+		// If content hasn't change, dont update it
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		// prevent multiple update
+		this._needsUpdate = false;
+
+		// Remove all its children (Inlines)
+		for ( let i = element.children.length - 1 ; i >= 0; i-- ) {
+			const child = element.children[ i ];
+			if( child.isUI ) {
+
+				element.remove( child );
+				child.clear();
+
+			}
+
+		}
+
+		// Rebuild its child list
+		element._children._uis = [];
+
+		// If a value, add a child
+		if( this._value ) {
+
+			const childrenInlines = this.buildInlines( this._value );
+			if( childrenInlines.length ){
+				element.add( ...childrenInlines );
+
+			}
+
+		}
+
+		if( element.isInline ) {
+
+			element._glyphs._needsUpdate = true;
+			element._whiteSpace._needsProcess = true;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {string} textContent
+	 * @return {InlineElement[]}
+	 */
+	buildInlines( textContent ) {
+
+		return [ new InlineElement({name:'anonymousInline',textContent}) ];
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextLayouter.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextLayouter.js
new file mode 100644
index 0000000..845c974
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/TextLayouter.js
@@ -0,0 +1,251 @@
+import BaseProperty from './BaseProperty';
+import Lines from '../elements/glyphs/Lines';
+import Line from '../elements/glyphs/Line';
+
+export default class TextLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false );
+
+		/**
+		 *
+		 * @type {Lines}
+		 * @private
+		 */
+		this._value = null;
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */ }
+
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) {
+
+
+		let INNER_WIDTH = element._width._value;
+
+		if ( element._width._auto ) {
+
+			INNER_WIDTH = Infinity;
+
+		} else {
+
+			INNER_WIDTH = element._bounds._innerWidth;
+
+		}
+
+		// Compute lines
+
+		const INTERLINE = element._lineHeight._value;
+
+		// Will stock the characters of each line, so that we can
+		// correct lines position before to merge
+		const lines = new Lines( new Line() );
+
+		let lastInlineOffset = 0;
+		element._children._inlines.forEach( ( inlineElement ) => {
+
+			// Abort condition
+
+			if ( !inlineElement._inlines.value ) return;
+
+			this._resetInlines( inlineElement );
+
+			//////////////////////////////////////////////////////////////
+			// Compute offset of each children according to its dimensions
+			//////////////////////////////////////////////////////////////
+
+			// @TODO: Fontsize best fit
+			const FONTSIZE = inlineElement._fontSize._value;
+
+			const LETTERSPACING = inlineElement._letterSpacing._value * FONTSIZE;
+
+			const WHITESPACE = inlineElement._whiteSpace._value;
+
+			const BREAKON = inlineElement._lineBreak._value;
+
+			const whiteSpaceOptions = {
+				WHITESPACE,
+				LETTERSPACING,
+				BREAKON,
+				INNER_WIDTH
+			}
+
+			const inlineWrapper = inlineElement._whiteSpace._inlineWrapper;
+
+			lastInlineOffset += inlineElement._margin._value.w + inlineElement._padding._value.w;
+
+			inlineElement._inlines.value.forEach( ( inline, i, inlines ) => {
+
+				const line = lines[lines.length - 1];
+
+				// Line break
+				const shouldBreak = inlineWrapper(inlines,i,lastInlineOffset, whiteSpaceOptions );
+
+				if ( shouldBreak ) {
+
+					lines.push( new Line( inline ) );
+
+					inline.offsetX = inline.xoffset;
+
+					// restart the lastInlineOffset as zero.
+					if ( inline.width === 0 ) {
+						lastInlineOffset = 0;
+						return;
+					}
+
+					// compute lastInlineOffset normally
+					// except for kerning which won't apply
+					// as there is visually no lefthanded glyph to kern with
+					inline.cumulativeWidth = inline.xadvance + LETTERSPACING;
+					lastInlineOffset = inline.cumulativeWidth;
+					return;
+
+				}
+
+				lines[ lines.length - 1 ].push( inline );
+				inline.offsetX = lastInlineOffset + inline.xoffset + inline.kerning;
+
+				inline.cumulativeWidth = inline.xadvance + inline.kerning + LETTERSPACING;
+				lastInlineOffset += inline.cumulativeWidth;
+
+				// in case of lineBreak mandatory
+				if( line.length-1 === 1) {
+
+					if ( line[ line.length - 2 ].width === 0 ) {
+
+						// remove the offset of the character following the newline
+						inline.offsetX -= inline.xoffset;
+						lastInlineOffset -= inline.xoffset;
+
+					}
+
+				}
+
+			} );
+
+			lastInlineOffset += inlineElement._margin._value.y + inlineElement._padding._value.y;
+
+		} );
+
+		// Compute single line and combined lines dimensions
+		const inlineCollapser = element._whiteSpace._inlineCollapser;
+
+
+		let width = 0, height =0, lineOffsetY = 0;
+
+		// calculates lines
+		lines.forEach( ( line, i ) => {
+
+			// starts by processing whitespace, it will return a collapsed left offset
+			const whiteSpaceOffset = inlineCollapser( line );
+
+			//
+			let lineHeight = 0;
+			let lineBase = 0;
+
+			line.forEach( ( inline ) => {
+
+				lineHeight = Math.max( lineHeight, inline.lineHeight );
+				lineBase = Math.max( lineBase, inline.lineBase );
+
+				inline.offsetX -= whiteSpaceOffset;
+
+			});
+
+			line.lineHeight = lineHeight;
+			line.lineBase = lineBase;
+
+			// const baseLineDelta = lineHeight - lineBase;
+
+			if( i === 0 ){
+				lineOffsetY = -(lineHeight*INTERLINE - lineHeight) * 0.5;
+			} else {
+				lineOffsetY -= lines[i-1].lineHeight*INTERLINE;
+			}
+
+			line.y = lineOffsetY;
+			line.x = 0;
+
+			// process yoffset
+			line.forEach( ( inline ) => {
+
+				inline.offsetY = lineOffsetY - inline.anchor;
+
+				if( inline.lineHeight < line.lineHeight ){
+					inline.offsetY -= line.lineBase- inline.lineBase;
+				}
+
+			});
+
+
+
+			height += ( line.lineHeight * INTERLINE );
+			// height += ( line.lineHeight);
+
+			//
+			line.width = 0;
+			// if this line have inlines
+			if ( line[ 0 ] ) {
+
+				// compute its width: length from firstInline:LEFT to lastInline:RIGHT
+				// only by the length of its extremities
+				const lastInline = line[ line.length - 1 ];
+
+				// Right + Left ( left is negative )
+				line.width = ( lastInline.offsetX + lastInline.cumulativeWidth + lastInline.paddingRight + lastInline.marginRight ) + line[ 0 ].offsetX;
+
+				width = Math.max( width, line.width);
+			}
+
+		} );
+
+		lines.height = height;
+		lines.width = width;
+
+		this._value = lines;
+
+		if( INNER_WIDTH === Infinity ) {
+
+			element._bounds.setChildrenWidth( element, lines.width );
+
+		}
+
+		if( element._height._auto ) {
+
+			element._bounds.setChildrenHeight( element, lines.height );
+
+		}
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			parent._autoSize._needsProcess = true;
+			parent._flexDirection._needsProcess = true;
+
+		}
+
+		element._inlineJustificator._needsProcess = true;
+		element._textAlign._needsProcess = true;
+
+		element._overflow._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @param inlineElement
+	 * @protected
+	 */
+	_resetInlines ( inlineElement ) {
+
+		// ensure no collapsed remains
+		inlineElement._fontSize.process( inlineElement );
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/VisibleProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/VisibleProperty.js
new file mode 100644
index 0000000..0a7802c
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/VisibleProperty.js
@@ -0,0 +1,50 @@
+import BaseProperty from './BaseProperty';
+
+export default class VisibleProperty extends BaseProperty{
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 */
+	constructor( propertyId, value = true ) {
+
+		super( 'visible', value, true );
+
+		this._needsUpdate = false;
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		element.visible = this._value;
+
+		if( element._parent._value ) {
+
+			element._parent._value._children._needsUpdate = true;
+
+		}
+
+	}
+
+	set value( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/geometry/SegmentsProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/geometry/SegmentsProperty.js
new file mode 100644
index 0000000..d41d95f
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/geometry/SegmentsProperty.js
@@ -0,0 +1,11 @@
+import BaseProperty from '../BaseProperty';
+
+export default class SegmentsProperty extends BaseProperty {
+
+	constructor() {
+
+		super( 'segments', 1, false );
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/geometry/SegmentsPropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/geometry/SegmentsPropertyInline.js
new file mode 100644
index 0000000..080df7f
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/geometry/SegmentsPropertyInline.js
@@ -0,0 +1,13 @@
+import SegmentsPropertyText from './SegmentsPropertyText';
+
+export default class SegmentsPropertyInline extends SegmentsPropertyText {
+
+	constructor() {
+
+		super();
+
+		this._value = 'inherit';
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/geometry/SegmentsPropertyText.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/geometry/SegmentsPropertyText.js
new file mode 100644
index 0000000..a8647f0
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/geometry/SegmentsPropertyText.js
@@ -0,0 +1,52 @@
+import SegmentsProperty from './SegmentsProperty';
+
+export default class SegmentsPropertyText extends SegmentsProperty {
+
+	constructor() {
+
+		super( 'segments', 1, false );
+
+		this._notInheritedValue = undefined;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._notInheritedValue = this._value;
+		if ( this._notInheritedValue === 'inherit' ) {
+
+			this._notInheritedValue = this.getInheritedInput( element );
+
+		}
+
+		element._layouter._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @param {number|"inherit"} v
+	 */
+	set value( v ) {
+
+		if ( this._value === v ) return;
+
+		this._value = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @override
+	 * @return {number}
+	 */
+	get value() {
+
+		if ( this._value === 'inherit' ) return this._notInheritedValue;
+
+		return this._value;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenBase.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenBase.js
new file mode 100644
index 0000000..5797b7b
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenBase.js
@@ -0,0 +1,120 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class ChildrenBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @private
+		 */
+		this._uis = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._boxes = [];
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		
+
+		this._compute( element );
+
+		element._layouter._needsUpdate = true;
+		element._renderOrder._needsUpdate = true;
+
+	}
+
+
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		this._compute( element );
+
+		element._flexDirection._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+	_compute( element ) {
+
+		// Stores all children that are box
+		this._uis = element.children.filter( child => child.visible && child.isUI );
+		this._boxes = this._uis.filter( child => child.isBox ).sort( this._sortOrder );
+
+		// @TODO: check if it has changes boxes values? with array join to 'fingerprint'?
+		// 				computation to remove computation? Does it worth it? When would it worth it?
+		//				// Changed order property of children but doesn't impact the output of boxes => Order have change, okay to have more computation
+		//				// Removed the Added the same element, at the same position => Rare case
+		// 		Conclusion : Not worth it at the time of writing
+
+
+
+	}
+
+
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._uis = null;
+		this._boxes = null;
+
+	}
+
+	/**
+	 *
+	 * Sort children according to their .style.order property or fallback on children index
+	 *
+	 * @param {HTMLElementVR} a
+	 * @param {HTMLElementVR} b
+	 * @return {number}
+	 * @private
+	 */
+	_sortOrder = ( a, b ) => {
+
+		if( a._order._value < b._order._value ) return -1;
+		if( a._order._value > b._order._value ) return 1;
+
+		// if both children have the same order value, use their children index to order them
+		if( this._uis.indexOf(a) < this._uis.indexOf(b) ) {
+			return -1;
+		}
+
+		return 1;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenBox.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenBox.js
new file mode 100644
index 0000000..6c100c5
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenBox.js
@@ -0,0 +1,118 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class ChildrenBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @private
+		 */
+		this._uis = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._boxes = [];
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		this._compute( element );
+
+		element._layouter._needsUpdate = true;
+		element._renderOrder._needsUpdate = true;
+
+	}
+
+
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		this._compute( element );
+
+		element._flexDirection._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+	_compute( element ) {
+
+		// Stores all children that are box
+		this._uis = element.children.filter( child => child.visible && child.isUI );
+		this._boxes = this._uis.filter( child => child.isBox ).sort( this._sortOrder );
+
+		// @TODO: check if it has changes boxes values? with array join to 'fingerprint'?
+		// 				computation to remove computation? Does it worth it? When would it worth it?
+		//				// Changed order property of children but doesn't impact the output of boxes => Order have change, okay to have more computation
+		//				// Removed the Added the same element, at the same position => Rare case
+		// 		Conclusion : Not worth it at the time of writing
+
+
+
+	}
+
+
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._uis = null;
+		this._boxes = null;
+
+	}
+
+	/**
+	 *
+	 * Sort children according to their .style.order property or fallback on children index
+	 *
+	 * @param {HTMLElementVR} a
+	 * @param {HTMLElementVR} b
+	 * @return {number}
+	 * @private
+	 */
+	_sortOrder = ( a, b ) => {
+
+		if( a._order._value < b._order._value ) return -1;
+		if( a._order._value > b._order._value ) return 1;
+
+		// if both children have the same order value, use their children index to order them
+		if( this._uis.indexOf(a) < this._uis.indexOf(b) ) {
+			return -1;
+		}
+
+		return 1;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenInline.js
new file mode 100644
index 0000000..f2c797d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenInline.js
@@ -0,0 +1,71 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class ChildrenInline extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._uis = [];
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		// this._compute( element );
+		//
+		// this._needsProcess = true;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		// this._compute( element );
+
+	}
+
+	/* eslint-disable no-unused-vars */ _compute( element ) { /* eslint-enable no-unused-vars */
+
+		// this._uis = element.children.filter( child => child.visible && child.isUI );
+		//
+		// this._inlines = this._uis.filter( child => child.isInline );
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		// this._inlines = null;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenText.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenText.js
new file mode 100644
index 0000000..92945ac
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ChildrenText.js
@@ -0,0 +1,109 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class ChildrenText extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._uis = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._inlines = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._boxes = [];
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		this._compute( element );
+
+		this._needsProcess = true;
+
+	}
+
+
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		// this._compute( element );
+
+		element._overflow._needsRender = true;
+
+	}
+
+	_compute( element ) {
+
+		this._uis = element.children.filter( child => child.visible && child.isUI );
+
+		this._inlines = this._uis.filter( child => child.isInline ).sort( this._sortOrder );
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._inlines = null;
+
+	}
+
+	/**
+	 *
+	 * Sort children according to their .style.order property or fallback on children index
+	 *
+	 * @param {HTMLElementVR} a
+	 * @param {HTMLElementVR} b
+	 * @return {number}
+	 * @private
+	 */
+	_sortOrder = ( a, b ) => {
+
+		if( a._order._value < b._order._value ) return -1;
+		if( a._order._value > b._order._value ) return 1;
+
+		// if both children have the same order value, use their children index to order them
+		if( this._uis.indexOf(a) < this._uis.indexOf(b) ) {
+			return -1;
+		}
+
+		return 1;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ParentProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ParentProperty.js
new file mode 100644
index 0000000..ea00cc9
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/hierarchy/ParentProperty.js
@@ -0,0 +1,102 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Object3D } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class ParentProperty extends BaseProperty {
+
+	constructor() {
+
+		super('parent', null, false);
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update when :
+	 * 		- element has been added
+	 * 		- element has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) {
+		/* eslint-enable no-unused-vars */
+
+		if ( element.parent && element.parent.isUI ) {
+
+			this._value = element.parent;
+			// this.position.z = this.getOffset();
+
+		} else {
+
+			this._value = null;
+
+		}
+
+		// @TODO : parentElement
+		// // set elements as root
+		// if ( element.isBlock && !this._value ) {
+		//
+		// 	ThreeMeshUI.addRoot( element );
+		// 	element.pseudoClassList.add('root');
+		//
+		// } else {
+		//
+		// 	ThreeMeshUI.removeRoot( element );
+		// 	element.pseudoClassList.remove('root');
+		//
+		// }
+
+
+	}
+
+	set value( value ) {
+
+		console.warn('ParentProperty is readonly');
+
+	}
+
+	/**
+	 *
+	 * @return {MeshUIBaseElement}
+	 */
+	get value() { return this._value; }
+
+
+	/**
+	 *
+	 * @param {(p:Object3D)=>boolean } conditionCallback
+	 */
+	find( conditionCallback ) {
+
+		if( this._value ) {
+
+			if( conditionCallback( this._value) ) {
+
+				return this._value;
+
+			}
+
+			return this._value._parent.find( conditionCallback );
+
+		}
+
+		return null;
+
+	}
+
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._value = null;
+
+	}
+
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyBox.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyBox.js
new file mode 100644
index 0000000..2002522
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyBox.js
@@ -0,0 +1,25 @@
+import BaseProperty from '../BaseProperty';
+import Frame from '../../../frame/Frame';
+
+export default class RendererPropertyBox extends BaseProperty{
+
+	constructor() {
+
+		super( 'renderer' );
+
+	}
+
+
+	render( element ) {
+
+		if( !element._backgroundMesh ) {
+
+			element.setBackgroundMesh( new Frame(element) );
+
+		}
+
+		element.performAfterUpdate();
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyInline.js
new file mode 100644
index 0000000..ef4aeac
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyInline.js
@@ -0,0 +1,35 @@
+import BaseProperty from '../BaseProperty';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils';
+import { Mesh } from 'three';
+
+export default class RendererPropertyInline extends BaseProperty {
+
+    constructor() {
+
+        super('renderer');
+
+    }
+
+
+    render(element) {
+
+        if (!element._inlines._value || !element._inlines._value.length) return;
+
+        const charactersAsGeometries = element._inlines._value.map(
+            inline =>
+                element._font._fontVariant.getGeometricGlyph(inline, element)
+                    .translate(inline.offsetX, inline.offsetY, 0)
+
+        );
+
+        const mergedGeom = mergeGeometries(charactersAsGeometries);
+
+        element.setFontMesh(new Mesh(mergedGeom, element.fontMaterial));
+
+        element._fontMesh.renderOrder = Infinity;
+
+
+
+    }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyInlineBox.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyInlineBox.js
new file mode 100644
index 0000000..1a9653c
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyInlineBox.js
@@ -0,0 +1,29 @@
+import BaseProperty from '../BaseProperty';
+import Frame from '../../../frame/Frame';
+
+export default class RendererPropertyInlineBox extends BaseProperty{
+
+	constructor() {
+
+		super( 'renderer' );
+
+	}
+
+
+	render( element ) {
+
+		if( !element._backgroundMesh ) {
+
+			element.setBackgroundMesh( new Frame(element) );
+
+		}
+
+		element._backgroundMesh.position.x = element._inlines._value[0].offsetX + element._inlines._value[0].width/2;
+		// element._backgroundMesh.position.y = element._inlines._value[0].offsetY + element._inlines._value[0].lineBase/4;
+		element._backgroundMesh.position.y = element._inlines._value[0].offsetY + element._inlines._value[0].lineBase/2;
+
+		element._bounds.render( element );
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyText.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyText.js
new file mode 100644
index 0000000..748c4f5
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/rendering/RendererPropertyText.js
@@ -0,0 +1,28 @@
+import RendererPropertyBox from './RendererPropertyBox';
+
+export default class RendererPropertyText extends RendererPropertyBox{
+
+	constructor() {
+
+		super( 'renderer' );
+
+		this._needsUpdate = false;
+
+	}
+
+
+	render( element ) {
+
+		super.render( element );
+
+		for ( const inlineElement of element._children._inlines ) {
+
+			inlineElement._renderer.render( inlineElement );
+
+		}
+
+		element.performAfterUpdate();
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/PositionProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/PositionProperty.js
new file mode 100644
index 0000000..04dce3d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/PositionProperty.js
@@ -0,0 +1,45 @@
+import SubStyleProperty from './SubStyleProperty';
+
+
+export default class PositionProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'position', 'static', true );
+
+		// configure
+		this._allowsInherit = false;
+
+		this._value = 'static';
+		this._needsUpdate = false;
+
+		this.computeOutputValue = this._computeFromInherited;
+
+		this.isValidValue = _isValid;
+
+	}
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited( element );
+
+		//console.log( "Position update")
+		// require parent to compute children -> bounds -> etc...
+		if( element._parent._value ) element._parent._value._children._needsProcess = true;
+	}
+
+}
+
+const AVAILABLE_VALUES = ['static', 'absolute'];
+
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) position value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/PositionPropertyBox.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/PositionPropertyBox.js
new file mode 100644
index 0000000..74b7c6f
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/PositionPropertyBox.js
@@ -0,0 +1,19 @@
+import PositionProperty from './PositionProperty';
+
+export default class PositionPropertyBox extends PositionProperty {
+
+	constructor( ) {
+
+		super( 'position');
+
+	}
+
+	update( element, out ) {
+
+		super.update( element, out );
+
+		this._needsProcess = true;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleColorProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleColorProperty.js
new file mode 100644
index 0000000..4f86583
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleColorProperty.js
@@ -0,0 +1,50 @@
+import SubStyleProperty from './SubStyleProperty';
+import { Color } from 'three';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+export default class StyleColorProperty extends SubStyleProperty {
+
+	constructor( propertyId, defaultValue ) {
+
+		super( propertyId, defaultValue, false );
+
+		/**
+		 * @type {Color}
+		 * @protected
+		 */
+		this._value = new Color();
+
+		this.output = this._outputValue;
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input !== 'inherit' ) {
+
+			this._value.set(this._input);
+
+		}
+
+	}
+
+	set inline( value ) {
+
+		// Colors are too wide to perform validation checks each time
+		// if( ! this.isValidValue( value ) ) return;
+
+		this._input = this._inline = value;
+
+		this._needsUpdate = true;
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleEmptyProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleEmptyProperty.js
new file mode 100644
index 0000000..8a0cd75
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleEmptyProperty.js
@@ -0,0 +1,21 @@
+import SubStyleProperty from './SubStyleProperty';
+
+export default class StyleEmptyProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId = 'untitled' ) {
+
+		super( propertyId , undefined, false);
+
+		this._needsUpdate = false;
+
+	}
+
+	/* eslint-disable no-unused-vars */ output( out ) {} /* eslint-enable no-unused-vars */
+}
+
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleFactorProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleFactorProperty.js
new file mode 100644
index 0000000..c2b953e
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleFactorProperty.js
@@ -0,0 +1,58 @@
+import SubStyleProperty from './SubStyleProperty';
+
+export default class StyleFactorProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} defaultValue
+	 */
+	constructor( propertyId, defaultValue ) {
+
+		super( propertyId, defaultValue, true );
+
+		this.isValidValue = _isValid;
+
+		this._allowsInherit = false;
+
+		this._input = defaultValue;
+
+		this._value = defaultValue;
+
+		this.output = this._outputValue;
+
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+
+	_outputValue( out ) {
+
+		out[this._id] = this._inheritedInput;
+
+	}
+
+
+
+}
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if ( value < 0 && value > 1.0 ) {
+
+		console.warn( `(.style) styleFactorProperty('${this.id}') value '${value}' is not valid)` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleNumberProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleNumberProperty.js
new file mode 100644
index 0000000..91692a4
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleNumberProperty.js
@@ -0,0 +1,25 @@
+import SubStyleProperty from './SubStyleProperty';
+
+export default class StyleNumberProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} defaultValue
+	 */
+	constructor( propertyId, defaultValue ) {
+
+		super( propertyId, defaultValue );
+
+	}
+
+	/**
+	 * @override
+	 * @return {Number}
+	 */
+	get value() { return this._value; }
+
+}
+
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleVector4Property.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleVector4Property.js
new file mode 100644
index 0000000..c00b23d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/StyleVector4Property.js
@@ -0,0 +1,213 @@
+import { Vector4 } from 'three';
+import SubStyleProperty from './SubStyleProperty';
+
+export default class StyleVector4Property extends SubStyleProperty {
+
+	constructor( propertyId, defaultValue ) {
+
+		super( propertyId, defaultValue, false );
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._input = new Vector4(0,0,0,0);
+
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._inline = null;
+
+		/**
+		 * @override
+		 * @type {Vector4}
+		 * @protected
+		 */
+		this._value = new Vector4(0,0,0,0);
+
+	}
+
+	/**
+	 * @override
+	 * @return {Vector4}
+	 */
+	get value(){
+
+		return this._value;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._vector4ValueSetter( this._value, this._input );
+
+	}
+
+	set inline( value ) {
+
+		this._vector4ValueSetter( this._input, value );
+
+		if( this._input.equals( this._value) ) return;
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set top( v ) {
+
+		if( this._input.x === v ) return;
+
+		this._input.x = v;
+		this._needsUpdate = true;
+
+	}
+
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get top() { return this._input.x; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set right( v ) {
+
+		if( this._input.y === v ) return;
+
+		this._input.y = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get right() { return this._input.y; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottom( v ) {
+		if( this._input.z === v ) return;
+
+		this._input.z = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottom() { return this._input.z; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set left( v ) {
+
+		if( this._input.w === v ) return;
+
+		this._input.w = v;
+		this._needsUpdate = true;
+	}
+
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get left() { return this._input.w; }
+
+	dispose(){
+
+		this._computed = null;
+		this._inline = null;
+		this._input = null;
+		this._output = null;
+
+	}
+
+	/**
+	 *
+	 * @param {Vector4} vector4
+	 * @param {Vector4|Array.<Number>|Number|String} value
+	 * @protected
+	 */
+	_vector4ValueSetter( vector4, value ) {
+
+		if ( value instanceof Vector4 ) {
+
+			vector4.copy( value );
+			return;
+
+		}
+
+		if ( typeof value === 'string' || value instanceof String ) {
+
+			value = value.split( ' ' );
+
+		}
+
+		if ( Array.isArray( value ) ) {
+
+			value = value.map( v => parseFloat( v ) );
+
+			switch ( value.length ) {
+
+				case 1:
+					vector4.setScalar( value[ 0 ] );
+					return;
+
+				case 2:
+					vector4.x = vector4.z = value[ 0 ];
+					vector4.y = vector4.w = value[ 1 ];
+					return;
+
+				case 3:
+					vector4.x = value[ 0 ];
+					vector4.y = value[ 1 ];
+					vector4.z = value[ 2 ];
+					return;
+
+				case 4:
+					vector4.x = value[ 0 ];
+					vector4.y = value[ 1 ];
+					vector4.z = value[ 2 ];
+					vector4.w = value[ 3 ];
+					return;
+
+				default:
+					console.error( 'StyleVector4Property::set() Four Dimension property had more than four values' );
+					return;
+
+			}
+
+		}
+
+		if ( !isNaN( value ) ) {
+
+			vector4.setScalar( value );
+
+		}
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/SubStyleProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/SubStyleProperty.js
new file mode 100644
index 0000000..d6dbbac
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/SubStyleProperty.js
@@ -0,0 +1,168 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+/* eslint-disable no-unused-vars */
+export default class SubStyleProperty extends BaseProperty{
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {boolean} [primitive=true]
+	 * @param {any} defaultValue
+	 */
+	constructor( propertyId, defaultValue, primitive = true) {
+
+		super( propertyId, 'unset', primitive );
+
+		/**
+		 * @type {any}
+		 * @internal
+		 */
+		this._input = 'inherit';
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @protected
+		 */
+		this._allowsInherit = true;
+
+		/**
+		 * The input value that won't be 'inherit'
+		 * @type {any}
+		 * @protected
+		 */
+		this._inheritedInput = undefined;
+
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._inline = undefined;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 * @param {Object.<string,any> } out
+	 */
+	update( element, out ) {
+
+		if( !this._allowsInherit ) {
+
+			this._inheritedInput = this.getInheritedInput( element );
+
+		}
+
+		this.computeOutputValue( element );
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+
+			const property = childUIElement[`_${this._id}`];
+			const target = property._input ? property._input : property._value;
+
+			if( target === 'inherit' ) childUIElement[`_${this._id}`]._needsUpdate = true;
+
+		}
+
+		this.output( out );
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) {
+
+		this._value = this._input;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	_computeFromInherited( element ) {
+
+		this._value = this._inheritedInput;
+
+	}
+
+
+	/**
+	 * @override
+	 * @deprecated
+	 * @param {any} v
+	 */
+	set value( v ) {
+
+		console.warn(".(style) sub-property cannot be directly set. It must comes from inline or computed setter.")
+
+	}
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
+
+		if( ! this.isValidValue( value ) ) return;
+
+		if( value === this._inline ) {
+
+			// do nothing no update, the value hasn't changed
+			return;
+
+		}
+
+		this._input = this._inline = value;
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @return {any}
+	 */
+	get inline() { return this._inline; }
+
+	/**
+	 *
+	 * @param {any} value
+	 * @return {boolean}
+	 */
+	isValidValue( value ) {
+
+		return true;
+
+	}
+
+	/**
+	 * @param {MeshUIBaseElement} element
+	 */
+	getInheritedInput ( element ) {
+
+		if( this._input !== 'inherit' ) return this._input;
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			return parent[`_${this._id}`].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+}
+/* eslint-enable no-unused-vars */
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundColorProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundColorProperty.js
new file mode 100644
index 0000000..11e0c9d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundColorProperty.js
@@ -0,0 +1,39 @@
+import StyleColorProperty from '../StyleColorProperty';
+
+
+export default class BackgroundColorProperty extends StyleColorProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundColor', defaultValue, false );
+
+		this._input = 'transparent';
+
+		this._allowsInherit = false;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+
+		element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
+
+		if( this._input === 'inherit' ) {
+
+			// @TODO: Background should not be inheritable
+			this._value.set(this.getInheritedInput( element ));
+
+		} else if( !(this._input === 'transparent' || this._input === 'none') ) {
+			this._value.set( this._input );
+		}
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundColorPropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundColorPropertyInline.js
new file mode 100644
index 0000000..7c15dd1
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundColorPropertyInline.js
@@ -0,0 +1,44 @@
+import StyleColorProperty from '../StyleColorProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+export default class BackgroundColorPropertyInline extends StyleColorProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundColor', defaultValue, false );
+
+		this._allowsInherit = false;
+
+		this._input = 0x000000;
+
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		// @TODO : Changes multiple mesh visibility
+		// element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set(this.getInheritedInput( element ));
+
+		} else {
+
+			this._value.set( this._input );
+
+		}
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundImage.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundImage.js
new file mode 100644
index 0000000..fc008aa
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundImage.js
@@ -0,0 +1,102 @@
+import SubStyleProperty from '../SubStyleProperty';
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Texture, Vector2 } from 'three';
+/* eslint-enable no-unused-vars */
+
+
+export default class BackgroundImage extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundImage', defaultValue, true );
+
+
+		this._input = null;
+
+		// configure
+		this._allowsInherit = false;
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @internal
+		 */
+		this._textureSize = new Vector2( 1,1 );
+
+		this.isValidValue = _isValid;
+
+	}
+
+	/**
+	 * @override
+	 * @return {any|Texture|null}
+	 */
+	get value() {
+
+		return this._value;
+
+	}
+
+	output( out ) {
+
+		out[this._id] = this._value;
+
+		out['tSize'] = this._textureSize;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		// @TODO : URL
+		this._value = this._inheritedInput;
+
+		// ?
+		// out[this.id] = this._value;
+
+		if( this._value instanceof Texture && !this._value.image ) {
+			console.warn( `ThreeMeshUI - .backgroundImage :: Please provide preloaded texture in order to have accurate sizing.`);
+			return;
+		}
+
+		this._needsProcess = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._value ) {
+
+			this._textureSize.set( this._value.image.width, this._value.image.height );
+
+		} else {
+
+			this._textureSize.set( 1 , 1 );
+
+		}
+
+	}
+
+}
+
+/* eslint-disable no-unused-vars */
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) { /* eslint-enable no-unused-vars */
+
+	// @TODO : Texture or URL() or String or ID ?
+	//console.log( "todo, validate image value", value);
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundSize.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundSize.js
new file mode 100644
index 0000000..e224fde
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/background/BackgroundSize.js
@@ -0,0 +1,39 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+/**
+ * @property {"cover"|"contain"|"stretch"} value
+ */
+export default class BackgroundSize extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundSize', defaultValue, true );
+
+		this.isValidValue = _isValid;
+
+		this.output = this._outputValue;
+	}
+
+}
+
+const AVAILABLE_VALUES = ['cover','contain','stretch'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) backgroundSize value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/border/BorderRadius.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/border/BorderRadius.js
new file mode 100644
index 0000000..39502bf
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/border/BorderRadius.js
@@ -0,0 +1,513 @@
+import { Vector2 } from 'three';
+import * as Units from '../../../../utils/Units';
+import StyleVector4Property from '../StyleVector4Property';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Vector4 } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class BorderRadius extends StyleVector4Property {
+
+	/**
+	 *
+	 * @param {Vector4} defaultValue
+	 */
+	constructor( defaultValue ) {
+
+		super( 'borderRadius', defaultValue );
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._valueUV = this._value.clone();
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._input = new Vector4(0,0,0,0);
+		/**
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		this._mediation = true;
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerTL = new Vector2(0, 1);
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerTR = new Vector2(1, 1);
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerBR = new Vector2(1, 0);
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerBL = new Vector2(0, 0);
+
+		const mediationTop = new BorderRadiusMediator( this._valueUV, [ 'x', 'y' ] ); // bottom
+		const mediationBottom = new BorderRadiusMediator( this._valueUV, [ 'z', 'w'] ); // top
+		const mediationLeft = new BorderRadiusMediator( this._valueUV, [ 'x', 'w'] ); // right
+		const mediationRight = new BorderRadiusMediator( this._valueUV, [ 'y', 'z'] ); // left
+
+		mediationTop.complementaryMediation = mediationBottom;
+		mediationBottom.complementaryMediation = mediationTop;
+		mediationLeft.complementaryMediation = mediationRight;
+		mediationRight.complementaryMediation = mediationLeft;
+
+		/**
+		 *
+		 * @type {Array.<BorderRadiusMediator>}
+		 * @private
+		 */
+		this._sideMediators = [ mediationTop, mediationBottom, mediationLeft, mediationRight ];
+
+		this._units = Units.WORLD_UNITS;
+
+	}
+
+	/**
+	 *
+	 * @param {string} units
+	 */
+	set units( units ) {
+
+		this._units = Units.validateUnits( units );
+
+		this._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get units() { return this._units; }
+
+	/**
+	 *
+	 * @param {boolean} v
+	 */
+	set mediation ( v) {
+
+		if( v !== this._mediation ){
+
+			this._mediation = v;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @returns {boolean}
+	 */
+	get mediation () { return this._mediation; }
+
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+
+	output( out ) {
+
+		out["cornerTL"] = this._cornerTL;
+		out["cornerTR"] = this._cornerTR;
+		out["cornerBR"] = this._cornerBR;
+		out["cornerBL"] = this._cornerBL;
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._vector4ValueSetter( this._value, this._input );
+
+		this._needsProcess = true;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	process( element ){ /* eslint-enable no-unused-vars */
+
+		this._needsRender = true;
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	render( element ){
+
+		this._valueUV.copy( this._value );
+
+		const elementWidth = element._bounds._offsetWidth;
+		const elementHeight = element._bounds._offsetHeight;
+
+		// @TODO: Units process could be strategies
+		if( this._units === Units.PERCENT ) {
+			this._valueUV.divideScalar(100);
+		}
+
+		// @TODO: Units process could be strategies
+		if( this._units === Units.WORLD_UNITS ) {
+			this._valueUV.divideScalar( Math.min(elementWidth , elementHeight) );
+		}
+
+
+
+		/**
+		 * mediate
+		 * Be sure no side is greater than 1 (uv units)
+		 */
+		if( this._mediation ) {
+
+			do {
+
+				this._sideMediators.forEach( srm => srm.computeValue() );
+				this._sideMediators.sort( ( a, b ) => {
+					return a.value < b.value ? 1 : -1
+				} );
+
+				if ( this._sideMediators[ 0 ].value > 1.0 ) {
+					this._sideMediators[ 0 ].mediate();
+				}
+
+			} while ( this._sideMediators[ 0 ].value > 1.0 );
+
+		}
+
+
+		let sX = elementWidth > elementHeight ? elementHeight/elementWidth : 1;
+		let sY = elementWidth < elementHeight ? elementWidth/elementHeight : 1;
+
+		// Do not scale pourcentages, allowing ovals
+		if( this._units === Units.PERCENT ){
+			sX = sY = 1.0;
+		}
+
+		this._cornerTL.x = this._valueUV.x * sX;
+		this._cornerTL.y = 1 - (this._valueUV.x * sY );
+
+		this._cornerTR.x = 1 - (this._valueUV.y * sX );
+		this._cornerTR.y = 1 - (this._valueUV.y * sY );
+
+		this._cornerBR.x = 1 - (this._valueUV.z * sX );
+		this._cornerBR.y = this._valueUV.z * sY;
+
+		this._cornerBL.x = this._valueUV.w * sX;
+		this._cornerBL.y = this._valueUV.w * sY;
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		for ( const sideMediator of this._sideMediators ) {
+
+			sideMediator.dispose();
+
+		}
+
+		this._sideMediators = null;
+
+		this._cornerTL = null;
+		this._cornerTR = null;
+		this._cornerBR = null;
+		this._cornerBL = null;
+
+		super.dispose();
+
+	}
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set topLeft( v ) {
+
+		if( this._input.x === v ) return;
+
+		this._input.x = v;
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get topLeft() { return this._input.x; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set topRight( v ) {
+
+		if( this._input.y === v ) return;
+
+		this._input.y = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get topRight() { return this._input.y; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottomRight( v ) {
+		if( this._input.z === v ) return;
+
+		this._input.z = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottomRight() { return this._input.z; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottomLeft( v ) {
+
+		if( this._input.w === v ) return;
+
+		this._input.w = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottomLeft() { return this._input.w; }
+
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set top( v ) {
+
+		if( this._input.x === v && this._input.y === v ) return;
+
+		this._input.x = this._input.y = v;
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get top() { return (this._input.x + this._input.y) / 2; }
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set right( v ) {
+
+		if( this._input.y === v && this._input.z === v ) return;
+
+		this._input.y = this._input.z = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get right() { return (this._input.y + this._input.z) / 2; }
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set bottom( v ) {
+		if( this._input.z === v && this._input.w === v ) return;
+
+		this._input.z = this._input.w = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get bottom() { return (this._input.z + this._input.w) / 2; }
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set left( v ) {
+
+		if( this._input.w === v && this._input.x === v ) return;
+
+		this._input.w = this._input.x = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get left() { return (this._input.w + this._input.x) / 2; }
+
+}
+
+/**
+ * Job: Contains two border radiuses values of the same side
+ * 			If their sums is greater than 1 (uv units) mediation could occurs
+ */
+class BorderRadiusMediator {
+
+	/**
+	 *
+	 * @param {Vector4} borderRadiuses
+	 * @param {Array.<string>} sideProperties
+	 */
+	constructor( borderRadiuses, sideProperties ) {
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._borderRadiuses = borderRadiuses;
+
+		/**
+		 *
+		 * @type {Array<string>}
+		 * @private
+		 */
+		this._sideProperties = sideProperties;
+
+		/**
+		 *
+		 * @type {BorderRadiusMediator|null}
+		 * @private
+		 */
+		this._complementaryMediation = null;
+
+		/**
+		 *
+		 * @type {number}
+		 * @private
+		 */
+		this._value = 0;
+	}
+
+	/**
+	 * The sum of the border radius of that side
+	 * @returns {number}
+	 */
+	get value(){ return this._value; }
+
+	/**
+	 * A complementary side mediation ie: For top, complementary is bottom
+	 * @param {BorderRadiusMediator} brm
+	 */
+	set complementaryMediation( brm ){
+
+		this._complementaryMediation = brm;
+
+	}
+
+	/**
+	 * Adds all side property to compute the value of that side
+	 */
+	computeValue(){
+
+		let totalRadius = 0;
+
+		for ( const radius of this._sideProperties ) {
+
+			totalRadius += this._borderRadiuses[radius];
+
+		}
+
+		this._value = totalRadius;
+	}
+
+	/**
+	 *
+	 * @param {boolean} [mediateOpposite=true]
+	 */
+	mediate( mediateOpposite = true ){
+
+		// Mediation only occurs when sum of radius are greater than 1 (uv units)
+		if( this._value < 1.0 ) return;
+
+		// Simply divide each component by the sum
+		for ( const radius of this._sideProperties ) {
+
+			this._borderRadiuses[radius] /= this._value;
+
+		}
+
+		if( mediateOpposite ) {
+
+			// and also mediate the complementary
+			this._complementaryMediation.mediate( false );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._complementaryMediation = null;
+		this._borderRadiuses = null;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/border/BorderWidth.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/border/BorderWidth.js
new file mode 100644
index 0000000..3186574
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/border/BorderWidth.js
@@ -0,0 +1,131 @@
+import * as Units from '../../../../utils/Units';
+import StyleVector4Property from '../StyleVector4Property';
+
+export default class BorderWidth extends StyleVector4Property{
+
+	/**
+	 *
+	 * @param defaultValue
+	 */
+	constructor( defaultValue ) {
+
+		super ( 'borderWidth', defaultValue, false );
+
+
+		this._valueUV = this._value.clone();
+
+		// configure
+		this.output = this._outputValue;
+
+		this._units = Units.WORLD_UNITS;
+
+	}
+
+	/**
+	 *
+	 * @param {string} units
+	 */
+	set units( units ) {
+
+		this._units = Units.validateUnits( units );
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get units() { return this._units; }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	computeOutputValue( element) { /* eslint-enable no-unused-vars */
+
+		this._vector4ValueSetter( this._value, this._input );
+
+		this._needsProcess = true;
+
+		element._bounds._needsUpdate = true;
+		element._layouter._needsUpdate = true;
+
+		// for ( let i = 0; i < element._children._uis.length; i++ ) {
+		// 	const child = element._children._uis[ i ];
+		// 	element._bounds._needsUpdate = true;
+		// }
+
+	}
+
+	_outputValue( out ) {
+		out[this._id] = this._valueUV;
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) {
+		this._needsRender = true;
+		element._borderRadius._needsRender = true;
+	}
+
+	/**
+	 * @override
+	 */
+	render( element ) {
+
+		this._valueUV.copy( this._value );
+
+		const offsetWidth = element._bounds._offsetWidth;
+		const offsetHeight = element._bounds._offsetHeight;
+
+		// @TODO: Units process could be strategies
+		if( this._units === Units.PERCENT ){
+
+			console.log( "Percent" );
+			// this._valueUV.divideScalar( 100 );
+			console.log( this._valueUV );
+
+		}
+
+		// @TODO: Units process could be strategies
+		if( this._units === Units.WORLD_UNITS ) {
+
+			if( offsetWidth !== 0) {
+				this._valueUV.w /= offsetWidth;
+				this._valueUV.y /= offsetWidth;
+			}
+
+
+			if( offsetHeight !== 0 ) {
+				this._valueUV.x /= offsetHeight;
+				this._valueUV.z /= offsetHeight;
+			}
+
+
+		} else if( this._units === Units.UV ) {
+
+			// @TODO: Units process could be strategies
+
+			if( offsetWidth !== 0 ) {
+				const sX = offsetWidth > offsetHeight ? offsetHeight/offsetWidth : 1;
+				this._valueUV.y *= sX;
+				this._valueUV.w *= sX;
+			}
+
+			if( offsetHeight !== 0 ) {
+				const sY = offsetWidth < offsetHeight ? offsetWidth/offsetHeight : 1;
+
+				this._valueUV.x *= sY;
+				this._valueUV.z *= sY;
+			}
+
+		}
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/BoxSizing.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/BoxSizing.js
new file mode 100644
index 0000000..daea467
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/BoxSizing.js
@@ -0,0 +1,51 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class BoxSizing extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'boxSizing', defaultValue );
+
+		// Configure
+		this._allowsInherit = false;
+
+		this.isValidValue = _isValid;
+
+	}
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		element._bounds._needsUpdate = true;
+
+	}
+
+}
+
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = ['border-box', 'content-box'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) boxSizing value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/HeightProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/HeightProperty.js
new file mode 100644
index 0000000..119b568
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/HeightProperty.js
@@ -0,0 +1,19 @@
+import StyleSideProperty from './StyleSideProperty';
+
+export default class HeightProperty extends StyleSideProperty {
+
+	constructor() {
+
+		super( 'height' );
+
+	}
+
+	computeOutputValue( element ) {
+
+		super.computeOutputValue( element );
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/MarginProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/MarginProperty.js
new file mode 100644
index 0000000..27e6e9a
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/MarginProperty.js
@@ -0,0 +1,23 @@
+import StyleVector4Property from '../StyleVector4Property';
+import { Vector4 } from 'three';
+
+export default class MarginProperty extends StyleVector4Property {
+
+	constructor() {
+
+		super('margin', new Vector4(0,0,0,0) )
+
+	}
+
+	computeOutputValue( element ) {
+
+		super.computeOutputValue( element );
+
+		element._renderer._needsRender = true;
+
+		if( element._parent._value ){
+			element._parent._value._flexDirection._needsProcess = true;
+		}
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/PaddingProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/PaddingProperty.js
new file mode 100644
index 0000000..eb20fdd
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/PaddingProperty.js
@@ -0,0 +1,26 @@
+import StyleVector4Property from '../StyleVector4Property';
+import { Vector4 } from 'three';
+
+export default class PaddingProperty extends StyleVector4Property {
+
+	constructor() {
+
+		super('padding', new Vector4(0,0,0,0) )
+
+	}
+
+	computeOutputValue( element ) {
+
+		super.computeOutputValue( element );
+
+		element._bounds._needsUpdate = true;
+		element._bounds._needsRender = true;
+		element._layouter._needsProcess = true;
+		element._renderer._needsRender = true;
+
+		if( element._parent._value ){
+			element._parent._value._layouter._needsProcess = true;
+		}
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/StyleSideProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/StyleSideProperty.js
new file mode 100644
index 0000000..f7048f5
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/StyleSideProperty.js
@@ -0,0 +1,199 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class StyleSideProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {number} defaultValue
+	 */
+	constructor( propertyId, defaultValue = null ) {
+
+		super( propertyId, defaultValue, true );
+
+		/**
+		 * @type {any}
+		 * @internal
+		 */
+		this._input = 'auto';
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._auto = true;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._relative = false;
+
+		this._updateRequired = true;
+
+
+
+	}
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
+
+		if( ! this.isValidValue( value ) ) return;
+
+		if( value === this._inline ) {
+
+			// do nothing no update, the value hasn't changed
+			return;
+
+		}
+
+		this._inline = value;
+
+		if( this._input === this._inline ) return;
+
+		this._parseInput();
+
+	}
+
+	get inline() { return this._inline; }
+
+	_parseInput() {
+
+		let updateRequired = true;
+
+		// Inline has priority if set
+		if( this._inline !== undefined && this._inline !== 'unset' ) {
+
+			this._input = this._inline;
+
+		}
+		// or fallback on computed
+		else if( this._computed !== undefined ) {
+
+			// do not require an update if the value remains
+			if( this._computed === this._input ) updateRequired = false;
+			this._input = this._computed;
+
+		}
+		// or fallback on default value
+		else {
+
+			updateRequired = this._input === 'inherit';
+
+		}
+
+		if( updateRequired ) {
+
+			this._auto = !this._input || this._input === 'auto';
+
+
+			if ( !this._auto ) {
+
+				// string can be percentages
+				// console.log( this._input, typeof this._input, this._input.endsWith('%'))
+				if ( ( typeof this._input === 'string' || this._input instanceof String ) && this._input.endsWith( '%' ) ) {
+
+
+					this._relative = true;
+					this._value = 0;
+
+
+					const floatValue = parseFloat( this._input.replace( '%', '' ).trim() );
+					if ( !isNaN( floatValue ) ) {
+
+						this._value = floatValue / 100;
+
+					}
+
+				} else {
+
+					this._relative = false;
+					this._value = this._input;
+
+				}
+
+			} else {
+
+
+				this._relative = false;
+
+			}
+
+			this._needsUpdate = this._updateRequired = updateRequired;
+
+		}
+
+	}
+
+	update( element, out ) {
+
+		if( this._updateRequired ) {
+
+			this._updateRequired = false;
+
+			if( !this._allowsInherit ) {
+
+				this._inheritedInput = this.getInheritedInput( element );
+
+			}
+
+			this.computeOutputValue( element );
+
+			// rebuild same properties on children 'inheritance'
+			for ( const childUIElement of element._children._uis ) {
+
+				childUIElement[`_${this._id}`]._needsUpdate = true;
+
+			}
+
+			this.output( out );
+
+			if( element._parent._value ) element._parent._value._layouter._needsProcess = true;
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		element._bounds._needsUpdate = true;
+		element._renderer._needsRender = true;
+		// element._autoSize._needsProcess = true;
+
+	}
+
+	getInheritedInput ( element ) {
+
+		if( this._input !== 'inherit' && !this._auto ) return this._input;
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			return parent[`_${this._id}`].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+	getDefaultValue() {
+
+		return 0;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/WidthProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/WidthProperty.js
new file mode 100644
index 0000000..812d204
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/bounds/WidthProperty.js
@@ -0,0 +1,13 @@
+import StyleSideProperty from './StyleSideProperty';
+
+export default class WidthProperty extends StyleSideProperty {
+
+	constructor() {
+
+		super( 'width' );
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/AlignItemsProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/AlignItemsProperty.js
new file mode 100644
index 0000000..84d0393
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/AlignItemsProperty.js
@@ -0,0 +1,38 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = ['start', 'center', 'end', 'stretch'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+const _isValid = function ( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) alignItems value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+export default class AlignItemsProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'alignItems', 'inherit', true );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/AlignItemsPropertyBox.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/AlignItemsPropertyBox.js
new file mode 100644
index 0000000..1d1df8a
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/AlignItemsPropertyBox.js
@@ -0,0 +1,264 @@
+import AlignItemsProperty from './AlignItemsProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class AlignItemsPropertyBox extends AlignItemsProperty {
+
+	constructor( ) {
+
+		super();
+
+		// configure this property
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		// strategies
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement, (child:MeshUIBaseElement, parentOffset:number )=> number ) =>  void  }
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(child:MeshUIBaseElement, parentOffset:number )=> number}
+		 * @private
+		 */
+		this._childAlign = this.emptyStrategyLogic;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) {
+
+		// Stretch : Current or previous requires a bounds update of children
+		// if( this._value === 'stretch' || this._input === 'stretch' ) {
+		//
+		// 	for ( let i = 0; i < element._children._boxes.length; i++ ) {
+		// 		element._children._boxes[ i ]._bounds._needsProcess = true;
+		// 	}
+		//
+		// }
+
+		this._value = this._inheritedInput;
+
+		switch( element._flexDirection._value ) {
+
+			case 'row':
+			case 'row-reverse':
+				this._process = _processRow;
+				switch ( this._value ) {
+					case 'start':
+						this._childAlign = _alignChildRowStart;
+						break;
+					case 'end':
+						this._childAlign = _alignChildRowEnd;
+						break;
+
+					default:
+						this._childAlign = _alignChild;
+				}
+				break;
+
+			case 'column':
+			case 'column-reverse':
+				this._process = _processColumn;
+
+				switch ( this._value ) {
+					case 'start':
+						this._childAlign = _alignChildColumnStart;
+						break;
+					case 'end':
+						this._childAlign = _alignChildColumnEnd;
+						break;
+
+					default:
+						this._childAlign = _alignChild;
+				}
+
+				break;
+
+		}
+
+		this._needsProcess = true;
+		// @TODO: Store children here
+		element._autoSize._needsProcess = true;
+
+		element._flexDirection._needsProcess = true; //not mandatory
+		element._justifyContent._needsProcess = true;
+
+		this._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		// return;
+		// if( !element._children._boxes.length ) return;
+
+		this._process( element, this._childAlign );
+
+		// @TODO : Could be strategized
+		let snap = 'center';
+		let snapXon = 'center';
+		let snapYon = 'center';
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		if( element._flexDirection._value.indexOf('column') !== -1 ) {
+
+			if( this._value === 'start' ) {
+				snap = snapXon = 'left';
+			}else if( this._value === 'end' ){
+				snap = snapXon ='right';
+			}else {
+				snap = 'centerX';
+			}
+
+		} else {
+
+			/* eslint-disable no-lonely-if */
+			if( this._value === 'start' ) {
+				snap = snapYon = 'top';
+			}else if( this._value === 'end' ){
+				snap = snapYon ='bottom';
+			}else{
+				snap = 'centerY';
+			}
+			/* eslint-enable no-lonely-if */
+
+		}
+
+		// apply 4 directional padding and borders
+		let y = -(padding.x - padding.z) / 2 - (border.x - border.z)  / 2;
+		let x = -(padding.y - padding.w) / 2 - ( border.y - border.w ) / 2;
+
+
+		if( snapXon === 'left' ) {
+
+			x = (padding.w - padding.y) / 2 + (border.w - border.y) / 2;
+
+		} else if( snapXon === 'right' ) {
+
+			x = - ( padding.y - padding.w ) / 2 - ( border.y - border.w ) / 2;
+
+		}
+
+		if( snapYon === 'top' ) {
+
+			y = - (padding.x - padding.z) / 2 - (border.x - border.z)  / 2;
+
+		} else if( snapYon === 'bottom' ) {
+
+			y = (padding.z - padding.x) / 2 + (border.z - border.x)  / 2;
+
+		}
+
+
+		element._children._boxes.forEach( ( child ) => {
+			let marginX = 0;
+			let marginY = 0;
+			// let marginY = ( -child._margin._value.x + child._margin._value.z ) /2;
+			// let marginY = ( -child._margin._value.x + child._margin._value.z ) /2;
+
+			if( snap === 'top' ) {
+
+				marginY = - child._margin._value.x;
+
+			} else if( snap === 'bottom' ) {
+
+				marginY = child._margin._value.z;
+
+			} else if( snap === 'left' ) {
+
+				marginX = child._margin._value.w;
+
+			} else if( snap === 'right' ) {
+
+				marginX = - child._margin._value.y;
+
+			} else if( snap === 'centerX' ) {
+
+				marginX = ( child._margin._value.w - child._margin._value.y ) /2;
+
+			} else if( snap === 'centerY' ) {
+
+				marginY = ( - child._margin._value.x + child._margin._value.z ) /2;
+
+			}
+
+			element._layouter._childrenPos[ child.id ].x += x + marginX;
+			element._layouter._childrenPos[ child.id ].y += y + marginY;
+
+		} );
+
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+function _alignChild() {
+	return 0;
+}
+
+/**
+ *
+ * @param child
+ * @param parentOffset
+ * @return {number}
+ * @private
+ */
+function _alignChildRowEnd( child, parentOffset ) {
+	return - parentOffset + ( child._bounds._offsetHeight / 2 );
+}
+
+function _alignChildRowStart( child, parentOffset ) {
+	return parentOffset - ( child._bounds._offsetHeight / 2 );
+}
+
+function _alignChildColumnEnd( child, parentOffset ) {
+	return parentOffset - ( child._bounds._offsetWidth / 2 );
+}
+
+function _alignChildColumnStart( child, parentOffset ) {
+	return - parentOffset + ( child._bounds._offsetWidth / 2 );
+}
+
+function _processColumn( element, childAligner ) {
+
+	const AXIS_TARGET = element._bounds._innerWidth / 2;
+
+	element._children._boxes.forEach( ( child ) => {
+		element._layouter._childrenPos[ child.id ].x = childAligner( child, AXIS_TARGET );
+
+	} );
+
+}
+
+function _processRow( element, childAligner ) {
+
+	const AXIS_TARGET = element._bounds._innerHeight / 2;
+
+	element._children._boxes.forEach( ( child ) => {
+		element._layouter._childrenPos[ child.id ].y = childAligner( child, AXIS_TARGET );
+
+	} );
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/FlexDirectionProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/FlexDirectionProperty.js
new file mode 100644
index 0000000..1c89912
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/FlexDirectionProperty.js
@@ -0,0 +1,42 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class FlexDirectionProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'flexDirection', 'inherit', true );
+
+		// configure
+
+		this.isValid = _isValid;
+
+	}
+
+}
+
+const AVAILABLE_VALUES = ['row','row-reverse', 'column', 'column-reverse'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) flexDirection value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/FlexDirectionPropertyBox.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/FlexDirectionPropertyBox.js
new file mode 100644
index 0000000..1c01a9d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/FlexDirectionPropertyBox.js
@@ -0,0 +1,259 @@
+import FlexDirectionProperty from './FlexDirectionProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class FlexDirectionPropertyBox extends FlexDirectionProperty {
+
+	constructor( ) {
+
+		super();
+
+		// Configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offset = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._reverse = 1;
+
+		/**
+		 *
+		 * @param { (element:MeshUIBaseElement) => void} element
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+	}
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		switch ( this._value ) {
+			case "row":
+				this._process = _processRow;
+				// this._offset = - element._bounds._innerWidth / 2;
+				break;
+
+			case "row-reverse":
+				this._process = _processRowReverse;
+				// this._offset = element._bounds._innerWidth / 2;
+				break;
+
+			case "column":
+				this._process = _processColumn;
+				// this._offset = element._bounds._innerHeight / 2;
+				break;
+
+			case "column-reverse":
+				this._process = _processColumnReverse;
+				// this._offset = - element._bounds._innerHeight / 2;
+				break;
+		}
+
+		// also update dependencies
+		if( !element._justifyContent._needsUpdate ) element._justifyContent.computeOutputValue( element );
+		if( !element._alignItems._needsUpdate ) element._alignItems.computeOutputValue( element );
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+		// this will be defined from strategy
+
+		//console.log( element.name, 'flexDirection process');
+
+
+		switch ( this._value ) {
+			case "row":
+				this._offset = - element._bounds._innerWidth / 2;
+				break;
+
+			case "row-reverse":
+				this._offset = element._bounds._innerWidth / 2;
+				break;
+
+			case "column":
+				this._offset = element._bounds._innerHeight / 2;
+				break;
+
+			case "column-reverse":
+				this._offset = - element._bounds._innerHeight / 2;
+				break;
+		}
+
+		this._reverse = -Math.sign( this._offset );
+		if( this._reverse === 0 ) {
+			this._reverse = 1;
+		}
+
+
+		this._process( element );
+
+		element._justifyContent._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+function _processRow( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 */
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetWidth;
+
+		// increase with the left margin before placing the child
+		accu += child._margin._value.w * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+		position.y = 0;
+
+
+		// increase the next child with this child right margin
+		accu += REVERSE * ( CHILD_SIZE + child._margin._value.y ) ;
+
+	}
+
+}
+
+function _processRowReverse( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 */
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetWidth;
+
+		// decrease with the right margin before placing the child
+		accu += child._margin._value.y * REVERSE;
+
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+		position.y = 0;
+
+		// decrease the next child with this child left margin
+		accu += (CHILD_SIZE + child._margin._value.w) * REVERSE ;
+
+	}
+
+}
+
+function _processColumn( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetHeight;
+
+		// increase with the top margin before placing the child
+		accu += child._margin._value.x * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = 0;
+		position.y = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+
+		// increase the next child with this child bottom margin
+		accu += (CHILD_SIZE + child._margin._value.z) * REVERSE ;
+
+	}
+
+}
+
+function _processColumnReverse( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetHeight;
+
+		// decrease with the bottom margin before placing the child
+		accu += child._margin._value.z * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = 0;
+		position.y = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+
+		// decrease the next child with this child top margin
+		accu += ( CHILD_SIZE + child._margin._value.x ) * REVERSE ;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/FlexDirectionPropertyText.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/FlexDirectionPropertyText.js
new file mode 100644
index 0000000..792a46e
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/FlexDirectionPropertyText.js
@@ -0,0 +1,29 @@
+import FlexDirectionProperty from './FlexDirectionProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class FlexDirectionPropertyText extends FlexDirectionProperty {
+
+	constructor( ) {
+
+		super();
+
+		this._value = this._input = 'column';
+
+		// Configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		// @TODO : Evaluate the needs of this property. Could be empty
+		this._value = this._inheritedInput;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/JustifyContentProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/JustifyContentProperty.js
new file mode 100644
index 0000000..0538d4b
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/JustifyContentProperty.js
@@ -0,0 +1,43 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class JustifyContentProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'justifyContent', 'inherit', true );
+
+		/**
+		 *
+		 * @override
+		 */
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = [ 'start', 'center', 'end', 'space-between', 'space-around', 'space-evenly' ];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if ( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) justifyContent value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/JustifyContentPropertyBox.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/JustifyContentPropertyBox.js
new file mode 100644
index 0000000..21537bc
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/JustifyContentPropertyBox.js
@@ -0,0 +1,284 @@
+import JustifyContentProperty from './JustifyContentProperty';
+
+export default class JustifyContentPropertyBox extends JustifyContentProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'justifyContent', defaultValue, true );
+
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		// strategies
+		/**
+		 *
+		 * @type {(axisOffset:number) => number}
+		 * @private
+		 */
+		this._computeOffset = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement, availableSpace:number, reverse:number) => Array.<number> }
+		 * @private
+		 */
+		this._computeMargin = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement) => void}
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+	}
+
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		//console.log( element._flexDirection._value );
+		switch ( element._flexDirection._value ) {
+
+			case 'column-reverse':
+			case 'column':
+				this._process = _column.bind( this );
+				break;
+
+
+			case 'row-reverse':
+			case 'row':
+				this._process = _row.bind( this );
+				break;
+
+		}
+
+		switch ( this._value ) {
+			case 'end':
+				this._computeOffset = _justificationOffsetEnd;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'center':
+				this._computeOffset = _justificationOffsetCenter;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'start':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'space-between':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceBetween;
+				break;
+
+			case 'space-around':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceAround;
+				break;
+
+			case 'space-evenly':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceEvenly;
+				break;
+		}
+
+		// @TODO : 	If flexDirection was keeping its children position,
+		//  				it won't be necessary to compute the same result again
+		//					but it will increase the memory footprint
+		element._flexDirection._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		this._process( element );
+
+		element._alignItems._needsProcess = true; // not mandatory : Layout could sum each
+
+	}
+
+}
+
+function _row( element ) {
+
+	const startPos = element._flexDirection._offset;
+
+	const { usedDirectionSpace, remainingSpace } = _rowRemainingSpace( element );
+
+	// Items Offset
+	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
+	const justificationOffset = this._computeOffset( axisOffset );
+
+	// Items margin
+	// const justificationMargins = _getJustificationMargin( boxComponent.childrenBoxes, remainingSpace, JUSTIFICATION, REVERSE );
+	const justificationMargins = this._computeMargin( element, remainingSpace, element._flexDirection._reverse );
+
+
+	// Apply
+	element._children._boxes.forEach( ( child, childIndex ) => {
+
+		element._layouter._childrenPos[ child.id ].x -= justificationOffset - justificationMargins[ childIndex ];
+
+	} );
+
+}
+
+function _column( element ) {
+
+
+	const startPos = element._flexDirection._offset;
+
+	const { usedDirectionSpace, remainingSpace } = _columnRemainingSpace( element );
+
+	// Items Offset
+	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
+	const justificationOffset = this._computeOffset( axisOffset );
+
+	// Items margin
+	const justificationMargins = this._computeMargin( element, remainingSpace, element._flexDirection._reverse );
+
+	// Apply
+	element._children._boxes.forEach( ( child, childIndex ) => {
+
+		element._layouter._childrenPos[ child.id ].y -= justificationOffset - justificationMargins[ childIndex ];
+
+	} );
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+/**
+ *
+ * @param {MeshUIBaseElement} element
+ * @return {{usedDirectionSpace: *, remainingSpace: number}}
+ * @private
+ */
+function _rowRemainingSpace( element ) {
+
+	const usedDirectionSpace = element._bounds._computeChildrenSideWidth( element );
+	return { usedDirectionSpace, remainingSpace: element._bounds._innerWidth - usedDirectionSpace };
+
+}
+
+function _columnRemainingSpace( element ) {
+
+	const usedDirectionSpace = element._bounds._computeChildrenSideHeight( element );
+	return { usedDirectionSpace, remainingSpace: element._bounds._innerHeight - usedDirectionSpace };
+
+}
+
+
+/* eslint-disable no-unused-vars */ function _justificationOffset( axisOffset ) { /* eslint-enable no-unused-vars */
+
+	return 0;
+
+}
+
+function _justificationOffsetEnd( axisOffset ) {
+
+	return axisOffset;
+
+}
+
+function _justificationOffsetCenter( axisOffset ) {
+
+	return axisOffset / 2;
+
+}
+
+/* eslint-disable no-unused-vars */
+function _justificationMargin( element, availableSpace = 0, reverse = 1 ) { /* eslint-enable no-unused-vars */
+
+	return Array( element._children._boxes.length ).fill( 0 );
+
+}
+
+function _justificationMarginSpaceBetween( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+		// only one children would act as start
+		if ( length > 1 ) {
+
+			const margin = availableSpace / ( length - 1 ) * reverse;
+			// set this margin for any children
+
+			// except for first child
+			justificationMargins[ 0 ] = 0;
+
+			for ( let i = 1; i < length; i++ ) {
+
+				justificationMargins[ i ] = margin * i;
+
+			}
+
+		}
+
+	}
+
+	return justificationMargins;
+
+}
+
+function _justificationMarginSpaceEvenly( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+		const margin = availableSpace / ( length + 1 ) * reverse;
+
+		// set this margin for any children
+		for ( let i = 0; i < length; i++ ) {
+
+			justificationMargins[ i ] = margin * ( i + 1 );
+
+		}
+
+	}
+
+	return justificationMargins;
+
+}
+
+function _justificationMarginSpaceAround( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+
+		const margin = availableSpace / ( length ) * reverse;
+
+		const start = margin / 2;
+		justificationMargins[ 0 ] = start;
+
+		// set this margin for any children
+		for ( let i = 1; i < length; i++ ) {
+
+			justificationMargins[ i ] = start + margin * i;
+
+		}
+
+
+	}
+
+	return justificationMargins;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/OrderProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/OrderProperty.js
new file mode 100644
index 0000000..5c3034a
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/flex/OrderProperty.js
@@ -0,0 +1,32 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class OrderProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'order', 0, true );
+
+		this._value = 0;
+
+		this._input = 0;
+
+		// configure
+		this._allowsInherit = false;
+	}
+
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._value = this._inheritedInput;
+
+		// require parent children (order) update, which will require layout update
+		if( element._parent._value ) {
+
+			element._parent._value._children._needsProcess = true;
+
+		}
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/ColorProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/ColorProperty.js
new file mode 100644
index 0000000..3bbb3fc
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/ColorProperty.js
@@ -0,0 +1,37 @@
+import StyleColorProperty from '../StyleColorProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Color } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class ColorProperty extends StyleColorProperty {
+
+	constructor( ) {
+
+		super( 'color', 'inherit', false );
+
+		this.output = this._outputValue;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set( this.getInheritedInput( element ) );
+
+		} else {
+
+			this._value.set( this._input);
+
+		}
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontFamilyProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontFamilyProperty.js
new file mode 100644
index 0000000..422f422
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontFamilyProperty.js
@@ -0,0 +1,75 @@
+import SubStyleProperty from '../SubStyleProperty';
+import FontLibrary from '../../../../font/FontLibrary';
+import FontFamily from '../../../../font/FontFamily';
+
+
+export default class FontFamilyProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'fontFamily', 'inherit' , true );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input instanceof FontFamily ) {
+
+			this._value = this._input;
+
+		} else if ( this._input === 'inherit' ) {
+
+			// do nothing
+
+		} else if ( typeof this._input === 'string' ) {
+
+			// string - family
+			const fontFamily = FontLibrary.getFontFamily( this._input );
+
+			if( fontFamily ) {
+
+				this._value = fontFamily;
+
+			} else {
+
+				console.warn( `(.style) fontFamily, the font '${this._input}' is not registered. Aborted.`)
+
+			}
+
+		} else {
+
+			console.warn( `(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily.`);
+			console.warn( `If you want to set a specific font, please use .font property instead.`);
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {any|FontFamily|null}
+	 */
+	get value() { return this._value; }
+
+	getInheritedInput ( element ) {
+
+		if( this._input !== 'inherit' ) return this._input;
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			return parent[`_${this._id}`].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontFamilyPropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontFamilyPropertyInline.js
new file mode 100644
index 0000000..80d4c6c
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontFamilyPropertyInline.js
@@ -0,0 +1,69 @@
+import FontLibrary from '../../../../font/FontLibrary';
+import { default as RegisteredFontFamily } from '../../../../font/FontFamily';
+import FontFamilyProperty from './FontFamilyProperty';
+
+
+export default class FontFamilyPropertyInline extends FontFamilyProperty {
+
+	constructor( ) {
+
+		super( 'fontFamily', 'inherit' , true );
+
+		this._input = 'inherit';
+		this._needsUpdate = true;
+
+		// configure
+		this._allowsInherit = false;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		let abstractedInput = this._inheritedInput;
+
+		if( abstractedInput === 'inherit' ) {
+			abstractedInput = this.getInheritedInput( element );
+		}
+
+		if( abstractedInput instanceof RegisteredFontFamily ) {
+
+			this._value = abstractedInput;
+			element._font._needsUpdate = true;
+
+		} else if ( typeof abstractedInput === 'string' ) {
+
+			// string - family
+			const fontFamily = FontLibrary.getFontFamily(abstractedInput);
+
+			if( fontFamily ) {
+
+				this._value = fontFamily;
+				element._font._needsUpdate = true;
+
+			} else {
+
+				console.warn( `(.style) fontFamily, the font '${abstractedInput}' is not registered. Aborted.`)
+
+			}
+
+		} else {
+
+			console.warn( `(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily.`);
+			console.warn( `If you want to set a specific font, please use .font property instead.`);
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {any|FontFamilyPropertyInline|null}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontKerningProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontKerningProperty.js
new file mode 100644
index 0000000..66c21e5
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontKerningProperty.js
@@ -0,0 +1,30 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class FontKerningProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'fontKerning', 'inherit' );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+
+const AVAILABLE_VALUES = ['normal', 'none', 'inherit'];
+
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) fontKerning value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontKerningPropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontKerningPropertyInline.js
new file mode 100644
index 0000000..e15e003
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontKerningPropertyInline.js
@@ -0,0 +1,45 @@
+import FontKerningProperty from './FontKerningProperty';
+
+
+export default class FontKerningPropertyInline extends FontKerningProperty {
+
+	constructor() {
+
+		super();
+
+		// Configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+	}
+
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited(element);
+
+		// this._needsProcess = true;
+		element._parent._value._layouter._needsProcess = false;
+	}
+
+	process( element ) {
+
+		// apply kerning on inlines
+		if ( this._value !== 'none' ) {
+
+			// First character won't be kerned with its void lefthanded peer
+			const whiteSpacedContent = element._whiteSpace._whiteSpacedContent;
+			const inlines = element._inlines._value;
+			for ( let i = 1; i < inlines.length; i++ ) {
+
+				const glyphPair = whiteSpacedContent[ i - 1 ] + whiteSpacedContent[ i ];
+
+				// retrieve the kerning from the font
+				// as set it on the characterInline
+				inlines[ i ].kerning = element._font._fontVariant.getKerningAmount( glyphPair );
+
+			}
+
+		}
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontKerningPropertyText.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontKerningPropertyText.js
new file mode 100644
index 0000000..4edc305
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontKerningPropertyText.js
@@ -0,0 +1,25 @@
+import FontKerningProperty from './FontKerningProperty';
+
+
+export default class FontKerningPropertyText extends FontKerningProperty {
+
+	constructor() {
+
+		super();
+
+		this._value = this._input = this.getDefaultValue();
+
+		// Configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited(element);
+
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontSizeProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontSizeProperty.js
new file mode 100644
index 0000000..73dfb5c
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontSizeProperty.js
@@ -0,0 +1,13 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class FontSizeProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'fontSize', 'inherit', true );
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontSizePropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontSizePropertyInline.js
new file mode 100644
index 0000000..2f253e5
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontSizePropertyInline.js
@@ -0,0 +1,58 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class FontSizePropertyInline extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'fontSize', 'inherit', true );
+
+		// Configure
+		this._allowsInherit = false;
+
+	}
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		if( element._font._fontVariant ) {
+			element._bounds._needsProcess = true;
+			element._layouter._needsProcess = true;
+		}
+
+	}
+
+	process( element ) {
+
+		if( !element._font._fontVariant || !element._font._fontVariant.isReady ) return;
+
+		const SCALE_MULT = this._value / element._font._fontVariant.typographic.size;
+
+		// First character won't be kerned with its void lefthanded peer
+		const inlines = element._inlines._value;
+
+		// update inlines properties before inline placements in lines
+		for ( let i = 0; i < inlines.length; i++ ) {
+
+			const inline = inlines[ i ];
+
+			inline.resetOffsets();
+
+			inline.fontSize = this._value;
+			inline.fontFactor = SCALE_MULT;
+
+		}
+
+		// element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontStyleProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontStyleProperty.js
new file mode 100644
index 0000000..fce6366
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontStyleProperty.js
@@ -0,0 +1,29 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class FontStyleProperty extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'fontStyle', defaultValue, true );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+
+const AVAILABLE_VALUES = ['normal', 'italic'];
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) fontStyle value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontStylePropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontStylePropertyInline.js
new file mode 100644
index 0000000..32f08b0
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontStylePropertyInline.js
@@ -0,0 +1,15 @@
+import FontStyleProperty from './FontStyleProperty';
+
+
+export default class FontStylePropertyInline extends FontStyleProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontWeightProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontWeightProperty.js
new file mode 100644
index 0000000..02b7044
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontWeightProperty.js
@@ -0,0 +1,27 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class FontWeightProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'fontWeight', 'inherit', true );
+
+		this.isValid = _isValid;
+	}
+
+}
+
+const AVAILABLE_VALUES = ['100','200','300','400','500','600','700','800','900','light','normal','bold','bolder'];
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value.toString() ) === -1 ) {
+
+		console.warn( `(.style) fontWeight value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontWeightPropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontWeightPropertyInline.js
new file mode 100644
index 0000000..e1c1da2
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/FontWeightPropertyInline.js
@@ -0,0 +1,18 @@
+import FontWeightProperty from './FontWeightProperty';
+import { uniformizeFontWeight } from '../../../../font/utils/FontUtils';
+
+export default class FontWeightPropertyInline extends FontWeightProperty {
+
+	constructor() {
+
+		super();
+
+	}
+
+	computeOutputValue( element ) {
+
+		this._value = uniformizeFontWeight( this.getInheritedInput( element )	);
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LetterSpacingProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LetterSpacingProperty.js
new file mode 100644
index 0000000..fe9b379
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LetterSpacingProperty.js
@@ -0,0 +1,13 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class LetterSpacingProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'letterSpacing', 'inherit', true );
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LetterSpacingPropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LetterSpacingPropertyInline.js
new file mode 100644
index 0000000..2e66db0
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LetterSpacingPropertyInline.js
@@ -0,0 +1,28 @@
+import LetterSpacingProperty from './LetterSpacingProperty';
+
+export default class LetterSpacingPropertyInline extends LetterSpacingProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._input = 'inherit';
+		this._allowsInherit = false;
+
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited( element );
+
+
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LineHeightProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LineHeightProperty.js
new file mode 100644
index 0000000..c7d5a9f
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LineHeightProperty.js
@@ -0,0 +1,22 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class LineHeightProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 */
+	constructor() {
+
+		super( 'lineHeight', 'inherit', true );
+
+	}
+
+	update( element, out ) {
+		super.update( element, out );
+
+		element._layouter._needsProcess = true;
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LineHeightPropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LineHeightPropertyInline.js
new file mode 100644
index 0000000..8fb6fea
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/LineHeightPropertyInline.js
@@ -0,0 +1,21 @@
+
+import LineHeightProperty from './LineHeightProperty';
+
+export default class LineHeightPropertyInline extends LineHeightProperty {
+
+	/**
+	 *
+	 */
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/TextAlignProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/TextAlignProperty.js
new file mode 100644
index 0000000..a482123
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/TextAlignProperty.js
@@ -0,0 +1,39 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class TextAlignProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'textAlign', 'inherit', true );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = ['left', 'right', 'center', 'justify', 'justify-left', 'justify-right','justify-center'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+const _isValid = function ( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) textAlign value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/TextAlignPropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/TextAlignPropertyInline.js
new file mode 100644
index 0000000..9883d46
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/TextAlignPropertyInline.js
@@ -0,0 +1,25 @@
+import TextAlignProperty from './TextAlignProperty';
+
+
+export default class TextAlignPropertyInline extends TextAlignProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = false;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._value = this._inheritedInput;
+
+		element._layouter._needsProcess = true;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/TextAlignPropertyText.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/TextAlignPropertyText.js
new file mode 100644
index 0000000..a64905f
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/TextAlignPropertyText.js
@@ -0,0 +1,168 @@
+import TextAlignProperty from './TextAlignProperty';
+
+
+export default class TextAlignPropertyText extends TextAlignProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		//
+		// @TODO : strategies
+
+	}
+
+
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._value = this._inheritedInput;
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		_process( element );
+
+		element._renderer._needsRender = true;
+
+	}
+
+}
+
+function _process( element ) {
+
+	const lines = element._layouter._value;
+	const ALIGNMENT = element._textAlign._value;
+	const INNER_WIDTH = element._bounds._innerWidth;
+
+	// Start the alignment by sticking to directions : left, right, center
+	for ( let i = 0; i < lines.length; i++ ) {
+
+		const line = lines[ i ];
+
+		// compute the alignment offset of the line
+		const offsetX = _computeLineOffset( element, line, i === lines.length - 1 );
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		// const paddingAmount = - ( padding.w + padding.y ) / 2 - ( border.w + border.y ) / 2;
+		// const paddingAmount = - ( padding.w + padding.y ) / 2;
+		const paddingAmount = ( - padding.w + padding.y ) / 2 + ( - border.w + border.y ) / 2;
+
+		line.x += offsetX;
+
+		// apply the offset to each characters of the line
+		for ( let j = 0; j < line.length; j++ ) {
+
+			line[ j ].offsetX += offsetX - paddingAmount;
+			// line[ j ].offsetX += offsetX;
+
+		}
+
+		// line.x = line[ 0 ].offsetX;
+
+
+	}
+
+	// last operations for justifications alignments
+	if ( ALIGNMENT.indexOf( 'justify' ) === 0 ) {
+
+		for ( let i = 0; i < lines.length; i++ ) {
+
+			const line = lines[ i ];
+
+
+			// do not process last line for justify-left or justify-right
+			if ( ALIGNMENT.indexOf( '-' ) !== -1 && i === lines.length - 1 ) return;
+
+			// can only justify is space is remaining
+			const REMAINING_SPACE = INNER_WIDTH - line.width;
+			if ( REMAINING_SPACE <= 0 ) return;
+
+			// count the valid spaces to extend
+			// Do not take the first nor the last space into account
+			let validSpaces = 0;
+			for ( let j = 1; j < line.length - 1; j++ ) {
+
+				validSpaces += line[ j ].char === ' ' ? 1 : 0;
+
+			}
+			const additionalSpace = REMAINING_SPACE / validSpaces;
+
+
+			// for right justification, process the loop in reverse
+			let inverter = 1;
+			if ( ALIGNMENT === 'justify-right' ) {
+
+				line.reverse();
+				inverter = -1;
+
+			}
+
+			let incrementalOffsetX = 0;
+
+			// start at ONE to avoid first space
+			for ( let j = 1; j <= line.length - 1; j++ ) {
+
+				// apply offset on each char
+				const inlineCharacter = line[ j ];
+				inlineCharacter.offsetX += incrementalOffsetX * inverter;
+
+				// and increase it when space
+				incrementalOffsetX += inlineCharacter.char === ' ' ? additionalSpace : 0;
+
+			}
+
+			// for right justification, the loop was processed in reverse
+			if ( ALIGNMENT === 'justify-right' ) {
+				line.reverse();
+			}
+
+
+		}
+
+	}
+
+}
+
+function _computeLineOffset ( element, line, lastLine ) {
+
+	switch ( element._textAlign._value ) {
+
+		case 'justify-left':
+		case 'justify':
+		case 'left':
+			return - element._bounds._innerWidth / 2;
+
+		case 'justify-right':
+		case 'right':
+			return -line.width + ( element._bounds._innerWidth / 2 );
+
+
+		case 'center':
+			return -line.width / 2;
+
+		case 'justify-center':
+			if ( lastLine ) {
+
+				// center alignement
+				return -line.width / 2;
+
+			}
+
+			// left alignment
+			return - element._bounds._innerWidth / 2;
+
+		default:
+			console.warn( `textAlign: '${element._textAlign._value}' is not valid` );
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/WhiteSpaceProperty.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/WhiteSpaceProperty.js
new file mode 100644
index 0000000..fae2595
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/WhiteSpaceProperty.js
@@ -0,0 +1,39 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class WhiteSpaceProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'whiteSpace', 'inherit' );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) whiteSpace value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/WhiteSpacePropertyInline.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/WhiteSpacePropertyInline.js
new file mode 100644
index 0000000..52e4b76
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/font/WhiteSpacePropertyInline.js
@@ -0,0 +1,467 @@
+import WhiteSpaceProperty from './WhiteSpaceProperty';
+
+/**
+ * @typedef  StringCollapserStrategy
+ * @type {(textContent:{string}) => string}
+ */
+
+
+/**
+ * @typedef  InlineCollapserStrategy
+ * @type {(line:{Line}) => number }
+ */
+
+
+/**
+ * @typedef InlineWrapperStrategy
+ * @type {(inlines:{Array}, i:{number}, lastInlineOffset:{number}, options:Object<string,any>) => boolean}
+ */
+
+export default class WhiteSpacePropertyInline extends WhiteSpaceProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+
+		this._whiteSpacedContent = '';
+
+		// strategies
+
+		/**
+		 *
+		 * @type {StringCollapserStrategy}
+		 * @internal
+		 */
+		this._stringCollapser = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {InlineCollapserStrategy}
+		 * @internal
+		 */
+		this._inlineCollapser = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {InlineWrapperStrategy}
+		 * @internal
+		 */
+		this._inlineWrapper = this.emptyStrategyLogic;
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @private
+	 */
+	_computeFromInherited( element ) { /* eslint-enable no-unused-vars */
+		super._computeFromInherited( element );
+
+		// set strategies
+		this._newLineBreakability = _newlineBreakability( this._value );
+
+		// REDO Whitespace Matrix
+		// https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
+
+		switch ( this._value ) {
+
+			case 'nowrap':
+			case 'normal':
+				this._stringCollapser = _stringCollapseNewLine;
+				break;
+
+			case 'pre-line':
+				this._stringCollapser = _stringCollapseMultipleSpace;
+				break;
+
+			default:
+				this._stringCollapser = _stringCollapseNothing;
+
+		}
+
+		switch ( this._value ) {
+
+			case 'pre-line':
+			case 'nowrap':
+			case 'normal':
+				this._inlineCollapser = _inlineCollapseMultiple;
+				break;
+
+			case 'pre-wrap':
+				this._inlineCollapser = _inlineCollapseSingle;
+				break;
+
+			default:
+				this._inlineCollapser = _inlineCollapseNothing;
+
+		}
+
+		switch ( this._value ) {
+
+			case 'pre-line':
+			case 'pre-wrap':
+			case 'normal':
+				this._inlineWrapper = _lineBreakerWrapText;
+				break;
+
+			case 'pre':
+				this._inlineWrapper = _lineBreakerLineBreakOnly;
+				break;
+
+			default:
+				this._inlineWrapper = _lineBreakerNoWrap;
+
+		}
+
+
+		this._needsProcess = true;
+
+	}
+
+
+	process( element ) {
+
+		// @TODO: Make a property for Text -> inlineCollapser
+		if( element.isInline && !element.isInlineBlock ) {
+
+			this._whiteSpacedContent = this._stringCollapser( element._textContent._value );
+
+			element._glyphs._needsProcess = true;
+
+		}
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_helper_functions
+ *
+ * Throughout, whitespace is defined as one of the characters
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * This does not use Javascript's "\s" because that includes non-breaking
+ * spaces (and also some other characters).
+ **/
+const WHITE_CHARS = { '\t': '\u0009', '\n': '\u000A', '\r': '\u000D', ' ': '\u0020' };
+
+/**
+ * Get the breakability of a newline character according to white-space property
+ *
+ * @param whiteSpace
+ * @returns {string|null}
+ */
+const _newlineBreakability = function ( whiteSpace ) {
+
+	switch ( whiteSpace ) {
+
+		case 'pre':
+		case 'pre-wrap':
+		case 'pre-line':
+			return 'mandatory';
+	}
+
+	// case NOWRAP:
+	// case NORMAL:
+	// default:
+
+	return null;
+
+};
+
+
+// STRING COLLAPSER -----------------------------------------------------
+
+/**
+ * Treat newlines as spaces
+ * @param textContentValue
+ * @return {*}
+ * @private
+ *
+ */
+function _stringCollapseNewLine( textContentValue ) {
+
+	return _stringCollapseMultipleSpace( textContentValue.replace( /\n/g, ' ' ) );
+
+}
+
+/**
+ * Treat sequences of spaces as only one space
+ * @param textContentValue
+ * @return {*}
+ * @private
+ */
+function _stringCollapseMultipleSpace( textContentValue ) {
+
+	return textContentValue.replace( /[ ]{2,}/g, ' ' );
+
+}
+
+/**
+ *
+ * @param textContentValue
+ * @return {*}
+ * @private
+ */
+function _stringCollapseNothing ( textContentValue ) {
+	return textContentValue;
+}
+
+// LineBreakers -----------------------------------------------------
+
+/**
+ *
+ * @param inlines
+ * @param i
+ * @param lastInlineOffset
+ * @param options
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerWrapText( inlines, i, lastInlineOffset, options ) {
+	const inline = inlines[ i ];
+
+	// prevent additional computation if line break is mandatory
+	if ( inline.lineBreak === 'mandatory' ) return true;
+
+	// ?? Missing letterSpacing ?
+	// prevent additional computation if this character already exceed the available size
+	if ( lastInlineOffset + inline.xadvance + inline.xoffset + inline.kerning > options.INNER_WIDTH ) return true;
+
+
+	const nextBreak = _distanceToNextBreak( inlines, i, options );
+	return _shouldFriendlyBreak( inlines[ i - 1 ], lastInlineOffset, nextBreak, options );
+}
+
+/* eslint-disable no-unused-vars */
+/**
+ *
+ * @param inlines
+ * @param i
+ * @param lastInlineOffset
+ * @param options
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerLineBreakOnly( inlines, i, lastInlineOffset, options ) { /* eslint-enable no-unused-vars */
+
+	return inlines[ i ].lineBreak === 'mandatory';
+
+}
+
+/**
+ *
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerNoWrap() {
+	return false;
+}
+
+// Inlines collapser -----------------------------------------------------
+
+/**
+ *
+ * @param line
+ * @return {number}
+ * @private
+ */
+function _inlineCollapseSingle( line ) {
+	if ( !line[ 0 ] ) return 0;
+
+	const firstInline = line[ 0 ];
+	const lastInline = line[ line.length - 1 ];
+
+	// only process whiteChars glyphs inlines
+	// if( firstInline.glyph && whiteChars[firstInline.glyph] && line.length > 1 ){
+	if ( firstInline.char && firstInline.char === '\n' && line.length > 1 ) {
+	// if ( firstInline.char && WHITE_CHARS[ firstInline.char ] && line.length > 1 ) {
+
+		_collapseLeftInlines( [ firstInline ], line[ 1 ] );
+
+	}
+
+	// if( lastInline.glyph && whiteChars[lastInline.glyph] && line.length > 1 ){
+	if ( lastInline.char && lastInline.char === '\n' && line.length > 1 ) {
+	// if ( lastInline.char && WHITE_CHARS[ firstInline.char ] && line.length > 1 ) {
+
+		_collapseRightInlines( [ lastInline ], line[ line.length - 2 ] );
+
+	}
+
+	return firstInline.offsetX;
+
+}
+
+function _inlineCollapseMultiple( line ) {
+
+	if ( !line[ 0 ] ) return 0;
+
+	let inlinesToCollapse = [];
+	let collapsingTarget;
+	// collect starting whitespaces to collapse
+	for ( let i = 0; i < line.length; i++ ) {
+
+		const inline = line[ i ];
+
+		if ( inline.char && WHITE_CHARS[ inline.char ] && line.length > i ) {
+
+			inlinesToCollapse.push( inline );
+			collapsingTarget = line[ i + 1 ];
+			continue;
+
+		}
+
+		break;
+
+	}
+
+	_collapseLeftInlines( inlinesToCollapse, collapsingTarget );
+
+
+	inlinesToCollapse = [];
+	collapsingTarget = null;
+	// collect ending whitespace to collapse
+	for ( let i = line.length - 1; i > 0; i-- ) {
+
+		const inline = line[ i ];
+		if ( inline.char && WHITE_CHARS[ inline.char ] && i > 0 ) {
+
+			inlinesToCollapse.push( inline );
+			collapsingTarget = line[ i - 1 ];
+			continue;
+
+		}
+
+		break;
+
+	}
+
+	_collapseRightInlines( inlinesToCollapse, collapsingTarget );
+
+	return line[ 0 ].offsetX;
+
+}
+
+/**
+ *
+ * @param line
+ * @return {number|*}
+ * @private
+ */
+function _inlineCollapseNothing( line ) {
+
+	if ( !line[ 0 ] ) return 0;
+	return line[ 0 ].offsetX;
+
+}
+
+/***********************************************************************************************************************
+ * Internal logics
+ **********************************************************************************************************************/
+
+
+/**
+ * Visually collapse inlines from right to left ( endtrim )
+ * @param {Array} inlines
+ * @param targetInline
+ * @private
+ */
+function _collapseRightInlines( inlines, targetInline ) {
+
+	if ( !targetInline ) return;
+
+	for ( let i = 0; i < inlines.length; i++ ) {
+
+		const inline = inlines[ i ];
+
+		inline.fontFactor = 0;
+		inline.offsetX = targetInline.offsetX + targetInline.cumulativeWidth;
+		inline.cumulativeWidth = 0;
+
+	}
+
+}
+
+/**
+ * Visually collapse inlines from left to right (starttrim)
+ * @param {Array} inlines
+ * @param targetInline
+ * @private
+ */
+function _collapseLeftInlines( inlines, targetInline ) {
+
+	if ( !targetInline ) return;
+
+	for ( let i = 0; i < inlines.length; i++ ) {
+
+		const inline = inlines[ i ];
+
+		inline.fontFactor = 0;
+		// inline.offsetX += inline.cumulativeWidth;
+		inline.offsetX = targetInline.offsetX;
+		inline.cumulativeWidth = 0;
+
+	}
+
+}
+
+/**
+ * get the distance in world coord to the next glyph defined
+ * as break-line-safe ( like whitespace for instance )
+ * @private
+ */
+function _distanceToNextBreak( inlines, currentIdx, options, accu ) {
+
+	accu = accu || 0;
+
+	// end of the text
+	if ( !inlines[ currentIdx ] ) return accu;
+
+	const inline = inlines[ currentIdx ];
+
+	// const kerning = inline.kerning ? inline.kerning : 0;
+	// const xoffset = inline.xoffset ? inline.xoffset : 0;
+	// const xadvance = inline.xadvance ? inline.xadvance : inline.width;
+
+	// if inline.lineBreak is set, it is 'mandatory' or 'possible'
+	if ( inline.lineBreak ) return accu + inline.xadvance;
+
+	// no line break is possible on this character
+	return _distanceToNextBreak(
+		inlines,
+		currentIdx + 1,
+		options,
+		accu + inline.xadvance + inline.xoffset + inline.kerning + options.LETTERSPACING
+	);
+
+}
+
+/**
+ * Test if we should line break here even if the current glyph is not out of boundary.
+ * It might be necessary if the last glyph was break-line-friendly (whitespace, hyphen..)
+ * and the distance to the next friendly glyph is out of boundary.
+ */
+function _shouldFriendlyBreak( prevChar, lastInlineOffset, nextBreak, options ) {
+
+	// We can't check if last glyph is break-line-friendly it does not exist
+	if ( !prevChar || !prevChar.char ) return false;
+
+	// Next break-line-friendly glyph is inside boundary
+	if ( lastInlineOffset + nextBreak < options.INNER_WIDTH ) return false;
+
+	// Previous glyph was break-line-friendly
+	return options.BREAKON.indexOf( prevChar.char ) > -1;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/visibility/Display.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/visibility/Display.js
new file mode 100644
index 0000000..d0dff1d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/visibility/Display.js
@@ -0,0 +1,46 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class Display extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'display', defaultValue );
+
+		// configure
+		this._value = 'flex';
+		this._allowsInherit = false;
+		this._needsUpdate = false;
+
+
+		this.isValidValue = _isValid;
+
+	}
+
+	computeOutputValue( element ) {
+
+		element._visible._value = this._output !== 'none';
+
+	}
+}
+
+const AVAILABLE_VALUES = ['none','flex'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) display value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/visibility/Overflow.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/visibility/Overflow.js
new file mode 100644
index 0000000..b57376d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/style-properties/visibility/Overflow.js
@@ -0,0 +1,206 @@
+import SubStyleProperty from '../SubStyleProperty';
+import { Plane, Vector3 } from 'three';
+
+
+export default class Overflow extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'overflow', defaultValue, true );
+
+		this.isValidValue = _isValid;
+
+		/**
+		 *
+		 * @type {Array.<Plane>|null}
+		 * @internal
+		 */
+		this._clippingPlanes = null;
+
+		this._renderStrategy = this._emptyRender;
+	}
+
+	/**
+	 * Update of overflow is a bit different, as parent may trigger changes on it
+	 * @override
+	 */
+	update( element, out ) {
+
+		// in any case, it will compute value. It doesn't have updateRequire evaluation
+		// let updateRequired = true;
+
+		// Inline has priority if set
+		if ( this._inline !== undefined && this._inline !== 'unset' ) {
+
+			this._input = this._inline;
+
+		}
+		// or fallback on computed
+		else if ( this._computed !== undefined ) {
+
+			this._input = this._computed;
+
+		}
+
+		if ( !this._allowsInherit ) {
+
+			this._inheritedInput = this.getInheritedInput( element );
+
+		}
+
+		this.computeOutputValue( element );
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+			childUIElement[ `_overflow` ]._needsUpdate = true;
+		}
+
+		this.output( out );
+
+	}
+
+	output( out ) {
+
+		out['clippingPlanes'] = this._clippingPlanes;
+
+	}
+
+	computeOutputValue( element ) {
+
+		// update self --------------------
+		super.computeOutputValue( element );
+
+		if( this._value === 'hidden' ) {
+
+			this._renderStrategy = this._propagateRender;
+
+		}else{
+
+			this._renderStrategy = this._emptyRender;
+			this._clippingPlanes = null;
+		}
+
+
+		const parent = element._parent._value;
+		if( parent !== null ) {
+
+			// Check that parent is hiddenOverflow or has clippingPlanes
+			const overflowParent = parent._overflow;
+			if ( ( overflowParent._value === 'hidden' || overflowParent._clippingPlanes !== null ) && !this._clippingPlanes ) {
+
+				// add planes and render
+				this._clippingPlanes =  [
+					// top
+					new Plane( new Vector3( 0, -1, 0 ), 1 ),
+					// right
+					new Plane( new Vector3( -1, 0, 0 ), 1 ),
+					// bottom
+					new Plane( new Vector3( 0, 1, 0 ), 1 ),
+					// left
+					new Plane( new Vector3( 1, 0, 0 ), 1 ),
+				];
+
+				// bind the parent to the clipping plane in a custom property
+				for ( let i = 0; i < this._clippingPlanes.length; i++ ) {
+					this._clippingPlanes[ i ].parent = parent;
+				}
+
+				// Also add parent clipping planes if isset
+				if( overflowParent._clippingPlanes !== null ) {
+					this._clippingPlanes.push( ...overflowParent._clippingPlanes );
+				}
+
+				this._renderStrategy = this._hiddenRender;
+				this._needsRender = true;
+
+			} else if ( ( overflowParent._value === 'visible' || overflowParent._clippingPlanes === null ) && this._clippingPlanes !== null ){
+
+				// remove planes and render
+				this._clippingPlanes = null;
+				this._renderStrategy = this._emptyRender;
+				this._needsRender = true;
+
+			}
+
+		}
+
+	}
+
+	render( element) {
+
+		this._renderStrategy( element );
+
+	}
+
+	/* eslint-disable no-unused-vars */	_emptyRender( element ) { /* eslint-enable no-unused-vars */ }
+
+	_hiddenRender( element ) {
+
+
+		const parentUI = element._parent._value;
+
+		const yLimit = parentUI._bounds._offsetHeight;
+		const xLimit = parentUI._bounds._offsetWidth;
+		const padding = parentUI._padding._value;
+		const border = parentUI._borderWidth._value;
+
+		for ( let i = 0; i < 4 && i < this._clippingPlanes.length ; i++ ) {
+			const clippingPlane = this._clippingPlanes[ i ];
+
+			switch ( i % 4 ) {
+				// top
+				case 0:
+					clippingPlane.constant = yLimit / 2 - ( padding.x + border.x );
+					break;
+
+				// right
+				case 1:
+					clippingPlane.constant = xLimit / 2 - ( padding.y + border.y );
+					break;
+
+				// bottom
+				case 2:
+					clippingPlane.constant = yLimit / 2 - ( padding.z + border.z );
+					break;
+
+				// left
+				case 3:
+					clippingPlane.constant = xLimit / 2 - ( padding.w + border.w );
+					break;
+			}
+
+			clippingPlane.applyMatrix4( parentUI.matrixWorld )
+
+		}
+
+		for ( let i = 0; i < element._children._uis.length; i++ ) {
+			const ui = element._children._uis[ i ];
+			ui._overflow._needsRender = true;
+		}
+
+	}
+
+	_propagateRender( element ) {
+
+		for ( let i = 0; i < element._children._uis.length; i++ ) {
+			const ui = element._children._uis[ i ];
+			ui._overflow._needsRender = true;
+		}
+
+	}
+
+}
+
+const AVAILABLE_VALUES = ['visible', 'hidden'];
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) overflow value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/BlockElement.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/BlockElement.js
new file mode 100644
index 0000000..b1a6f45
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/BlockElement.js
@@ -0,0 +1,94 @@
+import BoxElement from './BoxElement';
+import BoxLayouter from '../../core/properties/BoxLayouter';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+import { Object3D } from 'three';
+/* eslint-enable no-unused-vars */
+
+
+export default class BlockElement extends BoxElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = {} ) {
+
+		const properties = {};
+		BlockElement.definePropertiesValues( properties, values );
+
+		super( properties , values );
+
+		BlockElement.init( this );
+
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Block Element can only contains box elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) {
+		/* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isBox ) {
+
+				validChildren.push( argument );
+
+			} else {
+
+				console.warn( 'Block element can only contain Box elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {  /* eslint-enable no-unused-vars */
+
+		properties.layouter = BoxLayouter;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init ( element ) {
+
+		Object.defineProperties( element , {
+				isBlock: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/BoxElement.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/BoxElement.js
new file mode 100644
index 0000000..65d2d42
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/BoxElement.js
@@ -0,0 +1,116 @@
+import FrameMaterial from '../../frame/materials/FrameMaterial';
+import MeshUIBaseElement from '../../core/elements/MeshUIBaseElement';
+import ChildrenBox from '../../core/properties/hierarchy/ChildrenBox';
+import BoundsBox from '../../core/properties/BoundsBox';
+import AlignItemsPropertyBox from '../../core/properties/style-properties/flex/AlignItemsPropertyBox';
+import FlexDirectionPropertyBox from '../../core/properties/style-properties/flex/FlexDirectionPropertyBox';
+import JustifyContentPropertyBox from '../../core/properties/style-properties/flex/JustifyContentPropertyBox';
+import { Vector3 } from 'three';
+import RendererPropertyBox from '../../core/properties/rendering/RendererPropertyBox';
+import PositionPropertyBox from '../../core/properties/style-properties/PositionPropertyBox';
+import AutoSizePropertyBox from '../../core/properties/AutoSizePropertyBox';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Object3D } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class BoxElement extends MeshUIBaseElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	constructor( properties, values) {
+
+		BoxElement.definePropertiesValues( properties, values );
+
+		super( properties, values );
+
+		BoxElement.init( this );
+
+	}
+
+	/**
+	 * When the backgroundMesh has been set, bind properties
+	 * @override
+	 */
+	bindBackgroundMeshProperties () {
+
+		// bind the background scale with bounds
+		this._bounds._size = this._backgroundMesh.scale;
+		this._bounds._needsProcess = true;
+
+	}
+
+	/**
+	 * When the backgroundMesh has been unset, unbind properties
+	 * @override
+	 */
+	unbindBackgroundMeshProperties () {
+
+		// detach bounds size
+		this._bounds._size = new Vector3(1,1,1);
+		this._bounds._needsProcess = true;
+
+	}
+
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
+
+		// customize property
+		if( !properties.children ) properties.children = ChildrenBox;
+		if( !properties.bounds ) properties.bounds = BoundsBox;
+		if( !properties.flexDirection ) properties.flexDirection = FlexDirectionPropertyBox;
+		if( !properties.justifyContent ) properties.justifyContent = JustifyContentPropertyBox;
+		if( !properties.alignItems ) properties.alignItems = AlignItemsPropertyBox;
+		if( !properties.position ) properties.position = PositionPropertyBox;
+		if( !properties.autoSize ) properties.autoSize = AutoSizePropertyBox;
+
+		if( !properties.renderer ) properties.renderer = RendererPropertyBox;
+
+
+		// configure
+		// /* ie: * /if ( !values.width ) values.width = '100%';
+
+
+		// break inheritance chains
+		if ( !values.fontSide ) values.fontSide = 0; // FrontSide;
+		if ( !values.invertAlpha ) values.invertAlpha = false;
+		if ( !values.fontCastShadow ) values.fontCastShadow = false;
+		if ( !values.fontReceiveShadow ) values.fontReceiveShadow = false;
+		if ( !values.backgroundCastShadow ) values.backgroundCastShadow = false;
+		if ( !values.backgroundReceiveShadow ) values.backgroundReceiveShadow = false;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isBox: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+
+		element.backgroundMaterial = new FrameMaterial();
+		element._renderer.render( element );
+
+		element._backgroundMesh.visible = false;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/InlineBlockElement.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/InlineBlockElement.js
new file mode 100644
index 0000000..c552ae9
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/InlineBlockElement.js
@@ -0,0 +1,294 @@
+import LineBreakProperty from '../../core/properties/LineBreakProperty';
+import ChildrenInline from '../../core/properties/hierarchy/ChildrenInline';
+import FontKerningProperty from '../../core/properties/style-properties/font/FontKerningProperty';
+import BackgroundColorProperty from '../../core/properties/style-properties/background/BackgroundColorProperty';
+import MeshUIBaseElement from '../../core/elements/MeshUIBaseElement';
+import InlineLayouter from '../../core/properties/InlineLayouter';
+import Inline from '../../core/elements/glyphs/Inline';
+import FrameMaterial from '../../frame/materials/FrameMaterial';
+import InlinesPropertyInlineBlock from '../../core/properties/InlinesPropertyInlineBlock';
+import LetterSpacingPropertyInline from '../../core/properties/style-properties/font/LetterSpacingPropertyInline';
+import FontSizePropertyInline from '../../core/properties/style-properties/font/FontSizePropertyInline';
+import RendererPropertyInlineBox from '../../core/properties/rendering/RendererPropertyInlineBox';
+import BoundsInlineBlock from '../../core/properties/BoundsInlineBlock';
+import { Vector3 } from 'three';
+import WhiteSpacePropertyInline from '../../core/properties/style-properties/font/WhiteSpacePropertyInline';
+import FontFamilyPropertyInline from '../../core/properties/style-properties/font/FontFamilyPropertyInline';
+import FontWeightPropertyInline from '../../core/properties/style-properties/font/FontWeightPropertyInline';
+import FontStylePropertyInline from '../../core/properties/style-properties/font/FontStylePropertyInline';
+
+export default class InlineBlockElement extends MeshUIBaseElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = {}) {
+
+		const properties = {};
+		InlineBlockElement.definePropertiesValues( properties, values );
+
+		super( properties, values );
+
+		InlineBlockElement.init( this );
+
+	}
+
+	clear() {
+
+		// remove cross reference
+		for ( const inline of this._inlines._value ) {
+			inline.clear();
+		}
+
+		return super.clear();
+	}
+
+	/**
+	 * When the backgroundMesh has been set, bind properties
+	 * @override
+	 */
+	bindBackgroundMeshProperties () {
+
+		this._backgroundMesh.raycast = ()=>{};
+
+		// bind the background scale with bounds
+		this._bounds._size = this._backgroundMesh.scale;
+		this._bounds._needsUpdate = true;
+
+	}
+
+	/**
+	 * When the backgroundMesh has been unset, unbind properties
+	 * @override
+	 */
+	unbindBackgroundMeshProperties () {
+
+		// detach bounds size
+		this._bounds._size = new Vector3(1,1,1);
+		this._bounds._needsUpdate = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI ) {
+
+				validChildren.push( argument );
+
+				argument.position.z = 0.005;
+
+			} else {
+
+				console.warn( 'ThreeMeshUI::InlineBlockElement cannot contains UI Elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
+
+		if( !properties.children ) properties.children = ChildrenInline;
+		if( !properties.bounds ) properties.bounds = BoundsInlineBlock;
+		if( !properties.inlines ) properties.inlines = InlinesPropertyInlineBlock;
+		if( !properties.layouter ) properties.layouter = InlineLayouter;
+		if( !properties.renderer ) properties.renderer = RendererPropertyInlineBox;
+
+		// reset inlineElement specificity
+		if( !properties.fontFamily ) properties.fontFamily = FontFamilyPropertyInline;
+		if( !properties.fontWeight ) properties.fontWeight = FontWeightPropertyInline;
+		if( !properties.fontStyle ) properties.fontStyle = FontStylePropertyInline;
+		if( !properties.fontSize ) properties.fontSize = FontSizePropertyInline;
+
+		if( !properties.backgroundColor ) properties.backgroundColor = BackgroundColorProperty;
+
+		if( !properties.lineBreak ) properties.lineBreak = LineBreakProperty;
+		if( !properties.letterSpacing ) properties.letterSpacing = LetterSpacingPropertyInline;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningProperty;
+
+		if( !values.backgroundSize ) values.backgroundSize = 'cover';
+		if( !values.width ) values.width = '100%';
+		if( !values.height ) values.height = '100%';
+		if( !values.boxSizing ) values.boxSizing = 'border-box';
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isInline: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				},
+				isInlineBlock: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+		element._inlines._value = [new InlineBlockInline(element)];
+
+		element.backgroundMaterial = new FrameMaterial();
+		element._renderer.render( element );
+
+	}
+
+}
+
+
+
+
+/**
+ * InlineBlock has its own Inline implementation
+ */
+class InlineBlockInline extends Inline {
+
+	/**
+	 *
+	 * @param {InlineBlockElement} parent
+	 */
+	constructor( parent ) {
+
+		super();
+
+		/**
+		 * @TODO: This currently make a circular reference that should ideally be removed
+		 * @type {InlineBlockElement}
+		 * @private
+		 */
+		this._uiElement = parent;
+
+	}
+
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get xadvance() {
+
+		const padding = this._uiElement._padding._value;
+		const width = this._uiElement._width;
+		if( width._relative ) {
+			return width._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
+
+		return padding.w + padding.y + width.value ;
+	}
+
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get width() {
+
+		const width = this._uiElement._width;
+
+		if( width._relative ) {
+			return width._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
+
+		return width.value;
+
+	}
+
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get height() {
+
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement ) ;
+		}
+
+		return height.value;
+
+	}
+
+	get anchor(){
+		return this.height;
+	}
+
+
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get lineHeight() {
+
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
+
+		return height.value;
+
+	}
+
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get lineBase() {
+
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
+
+		return height.value;
+
+	}
+
+	/**
+	 *
+	 */
+	clear() {
+
+		this._uiElement = null;
+
+	}
+
+}
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/InlineElement.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/InlineElement.js
new file mode 100644
index 0000000..c02ac1a
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/InlineElement.js
@@ -0,0 +1,156 @@
+import MeshUIBaseElement from '../../core/elements/MeshUIBaseElement';
+import TextContentProperty from '../../core/properties/TextContentProperty';
+import InlinesProperty from '../../core/properties/InlinesProperty';
+import GlyphsProperty from '../../core/properties/GlyphsProperty';
+import ColorProperty from '../../core/properties/style-properties/font/ColorProperty';
+import LineBreakProperty from '../../core/properties/LineBreakProperty';
+import InlineLayouter from '../../core/properties/InlineLayouter';
+import BackgroundColorPropertyInline from '../../core/properties/style-properties/background/BackgroundColorPropertyInline';
+import FontStylePropertyInline from '../../core/properties/style-properties/font/FontStylePropertyInline';
+import FontWeightPropertyInline from '../../core/properties/style-properties/font/FontWeightPropertyInline';
+import FontFamilyPropertyInline from '../../core/properties/style-properties/font/FontFamilyPropertyInline';
+import WhiteSpacePropertyInline from '../../core/properties/style-properties/font/WhiteSpacePropertyInline';
+import LetterSpacingPropertyInline from '../../core/properties/style-properties/font/LetterSpacingPropertyInline';
+import FontSizePropertyInline from '../../core/properties/style-properties/font/FontSizePropertyInline';
+import SegmentsPropertyInline from '../../core/properties/geometry/SegmentsPropertyInline';
+import FontKerningPropertyInline from '../../core/properties/style-properties/font/FontKerningPropertyInline';
+import ChildrenInline from '../../core/properties/hierarchy/ChildrenInline';
+import RendererPropertyInline from '../../core/properties/rendering/RendererPropertyInline';
+import TextAlignPropertyInline from '../../core/properties/style-properties/font/TextAlignPropertyInline';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Object3D } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class InlineElement extends MeshUIBaseElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 * @param {object} [properties={}]
+	 */
+	constructor( values = { }, properties = {}) {
+
+		InlineElement.definePropertiesValues( properties, values );
+
+		super( properties, values );
+
+		InlineElement.init( this );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Text Element can only contains inline elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isInline ) {
+
+				validChildren.push( argument );
+
+				argument.position.z = 0.005;
+
+			} else {
+
+				console.warn( 'Inline element can only contain inline elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+	_rebuildParentUI = () => {
+
+		super._rebuildParentUI();
+
+		this._layouter._needsUpdate = true;
+
+	}
+
+	set textContent( value ) {
+
+		this._textContent.value = value;
+
+	}
+
+	get textContent () { return this._textContent._value; }
+
+	set invertAlpha( value ) {
+
+		this._invertAlpha.value = value;
+
+	}
+
+	get invertAlpha () { return this._invertAlpha._value; }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {  /* eslint-enable no-unused-vars */
+
+		if( !properties.children ) properties.children = ChildrenInline;
+		if( !properties.textContent ) properties.textContent = TextContentProperty;
+		if( !properties.glyphs ) properties.glyphs = GlyphsProperty;
+		if( !properties.inlines ) properties.inlines = InlinesProperty;
+		if( !properties.layouter ) properties.layouter = InlineLayouter;
+		if( !properties.renderer ) properties.renderer = RendererPropertyInline;
+
+
+		if( !properties.fontFamily ) properties.fontFamily = FontFamilyPropertyInline;
+		if( !properties.fontWeight ) properties.fontWeight = FontWeightPropertyInline;
+		if( !properties.fontStyle ) properties.fontStyle = FontStylePropertyInline;
+		if( !properties.fontSize ) properties.fontSize = FontSizePropertyInline;
+		if( !properties.color ) properties.color = ColorProperty;
+		if( !properties.backgroundColor ) properties.backgroundColor = BackgroundColorPropertyInline;
+		if( !properties.lineBreak ) properties.lineBreak = LineBreakProperty;
+		if( !properties.letterSpacing ) properties.letterSpacing = LetterSpacingPropertyInline;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.segments ) properties.segments = SegmentsPropertyInline;
+		if( !properties.textAlign ) properties.textAlign = TextAlignPropertyInline;
+
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningPropertyInline;
+
+		// if( !properties.inlines ) properties.inlines = InlinesProperty;
+
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isInline: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+	}
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/TextElement.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/TextElement.js
new file mode 100644
index 0000000..e274c5e
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/basic/TextElement.js
@@ -0,0 +1,165 @@
+import BoxElement from './BoxElement';
+import TextContentProperty from '../../core/properties/TextContentProperty';
+import TextLayouter from '../../core/properties/TextLayouter';
+import TextAlignPropertyText from '../../core/properties/style-properties/font/TextAlignPropertyText';
+import FlexDirectionPropertyText from '../../core/properties/style-properties/flex/FlexDirectionPropertyText';
+import JustifyContentProperty from '../../core/properties/style-properties/flex/JustifyContentProperty';
+import AlignItemsProperty from '../../core/properties/style-properties/flex/AlignItemsProperty';
+import LineHeightPropertyInline from '../../core/properties/style-properties/font/LineHeightPropertyInline';
+import WhiteSpacePropertyInline from '../../core/properties/style-properties/font/WhiteSpacePropertyInline';
+import SegmentsPropertyText from '../../core/properties/geometry/SegmentsPropertyText';
+import FontKerningPropertyText from '../../core/properties/style-properties/font/FontKerningPropertyText';
+import BoundsText from '../../core/properties/BoundsText';
+import ChildrenText from '../../core/properties/hierarchy/ChildrenText';
+import AutoSizePropertyText from '../../core/properties/AutoSizePropertyText';
+import RendererPropertyText from '../../core/properties/rendering/RendererPropertyText';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Object3D } from 'three';
+import MeshUIBaseElement from '../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class TextElement extends BoxElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 * @param [properties={}]
+	 */
+	constructor( values = {}, properties = {}) {
+
+		TextElement.definePropertiesValues( properties, values );
+
+		super( properties, values );
+
+		TextElement.init( this );
+
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Text Element can only contains inline elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+		let updateLayout = false;
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isInline ) {
+
+				if( argument.isInline ) {
+					updateLayout = true;
+				}
+
+				validChildren.push( argument );
+
+			} else {
+
+				console.warn( 'Block element can only contain Box elements.', argument );
+
+			}
+
+		}
+
+		if( validChildren.length > 0 ) {
+
+			super.add( ...validChildren )
+
+		}
+
+		if( updateLayout ) {
+			this._children._needsUpdate = true;
+			this._layouter._needsProcess = true;
+		}
+
+		return this;
+
+	}
+
+
+	set textContent ( value ) {
+
+		this._textContent.value = value;
+
+	}
+
+	// Must redefine getter also, or issue.
+	get textContent() {
+
+		return super.textContent;
+
+	}
+
+	set invertAlpha( value ) {
+
+		this._invertAlpha.value = value;
+
+	}
+
+	get invertAlpha () { return this._invertAlpha._value; }
+
+	get lines() { return this._layouter._value; }
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
+
+		properties.flexDirection = FlexDirectionPropertyText;
+		properties.justifyContent = JustifyContentProperty;
+		properties.alignItems = AlignItemsProperty;
+		properties.bounds = BoundsText;
+		properties.autoSize = AutoSizePropertyText;
+		properties.renderer = RendererPropertyText;
+
+		if( !properties.children ) properties.children = ChildrenText;
+		if( !properties.textContent ) properties.textContent = TextContentProperty;
+		if( !properties.layouter ) properties.layouter = TextLayouter;
+		if( !properties.lineHeight ) properties.lineHeight = LineHeightPropertyInline;
+		if( !properties.textAlign ) properties.textAlign = TextAlignPropertyText;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningPropertyText;
+		if( !properties.segments ) properties.segments = SegmentsPropertyText;
+
+		// configure
+		if ( !values.width ) values.width = '100%';
+
+
+		// break inheritance chains
+		if ( !values.fontSide ) values.fontSide = 0; // FrontSide;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isText: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+	}
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/html/properties/StyleComputedPropertyWrapper.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/html/properties/StyleComputedPropertyWrapper.js
new file mode 100644
index 0000000..1f0c7a0
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/html/properties/StyleComputedPropertyWrapper.js
@@ -0,0 +1,924 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Color, Vector4 } from 'three';
+import MeshUIBaseElement from './../../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+/**
+ * Wrapper of properties to fit html naming and multiple inputs : computed & computed(css)
+ */
+export default class StyleComputedPropertyWrapper {
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( element ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @private
+		 */
+		this._element = element;
+
+	}
+
+	set( values ) {
+
+		for ( const property in values ) {
+			this[property] = values[property];
+		}
+
+	}
+
+	/***********************************************************************************************************************
+	 * computed GETTERS - SETTERS
+	 **********************************************************************************************************************/
+
+	/** Box Properties ---------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"border-box"|"content-box"} value
+	 */
+	set boxSizing( value ) {
+
+		this._element._boxSizing.computed = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"border-box"|"content-box"}
+	 */
+	get boxSizing() { return this._element._boxSizing._computed; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set width ( v ) {
+
+		this._element._width.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get width () { return this._element._width._computed; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set height ( v ) {
+
+		this._element._height.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get height () { return this._element._height._computed; }
+
+
+	/**
+	 *
+	 * @param {Vector4|Array.<number>|number|string} v
+	 */
+	set padding( v ) {
+
+		this._element._padding.computed = v;
+
+	}
+
+
+	/**
+	 *
+	 * @return {Vector4}
+	 */
+	get padding () { return this._element._padding._computed; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingTop ( v ) {
+
+		this._element._padding.computedTop = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingTop () { return this._element._padding.computedTop; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingRight (v) {
+
+		this._element._padding.computedRight = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingRight () { return this._element._padding.computedRight; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingBottom (v) {
+
+		this._element._padding.computedBottom = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingBottom () { return this._element._padding.computedBottom; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingLeft ( v ) {
+
+		this._element._padding.computedLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingLeft () { return this._element._padding.computedLeft; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<number>|number|string} v
+	 */
+	set margin( v ) {
+
+		this._element._margin.computed = v;
+
+	}
+
+
+	/**
+	 *
+	 * @return {Vector4}
+	 */
+	get margin () {
+		return this._element._margin._computed;
+	}
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginTop ( v ) {
+
+		this._element._margin.computedTop = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginTop () { return this._element._margin.computedTop; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginRight (v) {
+
+		this._element._margin.computedRight = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginRight () { return this._element._margin.computedRight; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginBottom (v) {
+
+		this._element._margin.computedBottom = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginBottom () { return this._element._margin.computedBottom; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginLeft ( v ) {
+
+		this._element._margin.computedLeft = v;
+
+	}
+
+	/** Display Properties -----------------------------------------------------*/
+
+
+	/**
+	 *
+	 * @param {"flex"|"none"} value
+	 */
+	set display ( value ) {
+
+		this._element._display.computed = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"flex"|"none"}
+	 */
+	get display() { return this._element._display._computed; }
+
+
+	/**
+	 *
+	 * @param {"visible"|"hidden"} v
+	 */
+	set overflow ( v ) {
+
+		this._element._overflow.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"visible"|"hidden"}
+	 */
+	get overflow () { return this._element._overflow._computed; }
+
+	/** Position Properties ----------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"static"|"absolute"} v
+	 */
+	set position ( v ) {
+
+		this._element._position.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"static"|"absolute"}
+	 */
+	get position () { return this._element._position._computed; }
+
+
+	/** Flex Properties --------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"column"|"column-reverse"|"row"|"row-reverse"} value
+	 */
+	set flexDirection( value ) {
+
+		this._element._flexDirection.computed = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"column"|"column-reverse"|"row"|"row-reverse"}
+	 */
+	get flexDirection() { return this._element._flexDirection._computed; }
+
+	/**
+	 *
+	 * @param {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"} value
+	 */
+	set justifyContent( value ) {
+
+		this._element._justifyContent.computed = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"}
+	 */
+	get justifyContent() { return this._element._justifyContent._computed; }
+
+	/**
+	 *
+	 * @param {"start"|"center"|"end"|"stretch"} value
+	 */
+	set alignItems ( value ) {
+
+		this._element._alignItems.computed = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"start"|"center"|"end"|"stretch"}
+	 */
+	get alignItems() { return this._element._alignItems._computed; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set order (v) {
+
+		this._element._order.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get order () { return this._element._order._computed; }
+
+
+	/** Background Properties --------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {Color|number|string} v
+	 */
+	set backgroundColor( v ) {
+
+		this._element._backgroundColor.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Color|number|string}
+	 */
+	get backgroundColor() { return this._element._backgroundColor._computed; }
+
+
+	set backgroundOpacity ( v ) {
+
+		this._element._backgroundOpacity.computed = v;
+
+	}
+
+	get backgroundOpacity () { return this._element._backgroundOpacity._computed; }
+
+	/**
+	 *
+	 * @param {Texture|string} v
+	 */
+	set backgroundImage ( v ) {
+
+		this._element._backgroundImage.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Texture|string}
+	 */
+	get backgroundImage () { return this._element._backgroundImage._computed; }
+
+	/**
+	 *
+	 * @param {"cover"|"contain"|"stretch"} v
+	 */
+	set backgroundSize ( v ) {
+
+		this._element._backgroundSize.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"cover"|"contain"|"stretch"}
+	 */
+	get backgroundSize() { return this._element._backgroundSize._computed; }
+
+
+	/** Text Properties --------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"} v
+	 */
+	set whiteSpace ( v ) {
+
+		this._element._whiteSpace.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"}
+	 */
+	get whiteSpace () { return this._element._whiteSpace._computed; }
+
+
+
+
+
+	/**
+	 *
+	 * @param {Color|number|string} v
+	 */
+	set color( v ) {
+
+		this._element._color.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Color|number|string}
+	 */
+	get color () { return this._element._color._computed; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set opacity ( v ) {
+
+		this._element._fontOpacity.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get opacity () { return this._element._fontOpacity._computed; }
+
+
+
+
+	/**
+	 *
+	 * @param {"normal"|"italic"} v
+	 */
+	set fontStyle (v) {
+
+		this._element._fontStyle.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"italic"}
+	 */
+	get fontStyle () { return this._element._fontStyle._computed; }
+
+
+	/**
+	 *
+	 * @param {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}  v
+	 */
+	set fontWeight ( v ) {
+
+		this._element._fontWeight.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}
+	 */
+	get fontWeight () { return this._element._fontWeight._computed; }
+
+	/**
+	 *
+	 * @param {"normal"|"none"} v
+	 */
+	set fontKerning ( v ) {
+
+		this._element._fontKerning.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"none"}
+	 */
+	get fontKerning () { return this._element._fontKerning._computed; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set letterSpacing (v) {
+
+		this._element._letterSpacing.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get letterSpacing () { return this._element._letterSpacing._computed; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set lineHeight ( v ) {
+
+		this._element._lineHeight.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get lineHeight () { return this._element._lineHeight._computed; }
+
+
+	/**
+	 *
+	 * @param {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"} v
+	 */
+	set textAlign ( v ) {
+
+		this._element._textAlign.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"}
+	 */
+	get textAlign() { return this._element._textAlign._computed; }
+
+
+	/** Border Properties ----------------------------------------------------------------------------------------------*/
+
+	/**
+	 * Set the units of borderRadius
+	 * @param {string|"rem"} v
+	 */
+	set borderRadiusUnits( v ) {
+
+		// @TODO:
+		this._element._borderRadius.units = v;
+
+	}
+
+	/**
+	 * Get the units of borderRadius
+	 * @returns {string}
+	 */
+	get borderRadiusUnits() { /* @TODO:computed units */ return this._element._borderRadius.units; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<Number>|Number|string} v
+	 */
+	set borderRadius( v ) {
+
+		this._element._borderRadius.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Vector4}
+	 */
+	get borderRadius() { return this._element._borderRadius._computed; }
+
+	/**
+	 * Set the top left radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopLeftRadius( v ) {
+
+		this._element._borderRadius.computedTopLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopLeftRadius() { return this._element._borderRadius.computedTopLeft; }
+
+
+	/**
+	 * Set the top right radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopRightRadius( v ) {
+
+		this._element._borderRadius.computedTopRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopRightRadius() { return this._element._borderWidth.computedTopRight; }
+
+	/**
+	 * Set the bottom right radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomRightRadius( v ) {
+
+		this._element._borderRadius.computedBottomRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomRightRadius() { return this._element._borderWidth.computedBottomRight; }
+
+	/**
+	 * Set the bottom left radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomLeftRadius( v ) {
+
+		this._element._borderRadius.computedBottomLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomLeftRadius() { return this._element._borderWidth.computedBottomLeft; }
+
+	/**
+	 * Set the top left and top right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopRadius( v ) {
+
+		this._element._borderRadius.computedTop = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopRadius() { return this._element._borderWidth.computedTop; }
+
+	/**
+	 * Set the top right and bottom right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderRightRadius( v ) {
+
+		this._element._borderRadius.computedRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderRightRadius() { return this._element._borderRadius.computedRight; }
+
+	/**
+	 * Set the top left and bottom left radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderLeftRadius( v ) {
+
+		this._element._borderRadius.computedLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderLeftRadius() { return this._element._borderRadius.computedLeft; }
+
+	/**
+	 * Set the bottom left and bottom right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomRadius( v ) {
+
+		this._element._borderRadius.computedBottom = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomRadius() { return this._element._borderRadius.computedBottom; }
+
+
+	/**
+	 * Set the units of borderWidth
+	 * @param {string|"rem"} v
+	 */
+	set borderWidthUnits( v ) {
+
+		// @TODO : computed and Computed units to be implemented
+		this._element._borderWidth.units = v;
+
+	}
+
+	/**
+	 * Get the units of borderWidth
+	 * @returns {string}
+	 */
+	get borderWidthUnits() { return this._element._borderWidth.units; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<Number>|Number|string} v
+	 */
+	set borderWidth( v ) {
+
+		this._element._borderWidth.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Vector4}
+	 */
+	get borderWidth() { return this._element._borderWidth._computed; }
+
+	/**
+	 * Set the width of the top side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderTopWidth( v ) {
+
+		this._element._borderWidth.computedTop = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopWidth() { return this._element._borderWidth.computedTop; }
+
+	/**
+	 * Set the width of the right side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderRightWidth( v ) {
+
+		this._element._borderWidth.computedRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderRightWidth() { return this._element._borderWidth.computedRight; }
+
+	/**
+	 * Set the width of the bottom side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderBottomWidth( v ) {
+
+		this._element._borderWidth.computedBottom = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomWidth() { return this._element._borderWidth.computedBottom; }
+
+	/**
+	 * Set the width of the left side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderLeftWidth( v ) {
+
+		this._element._borderWidth.computedLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderLeftWidth() { return this._element._borderWidth.computedLeft; }
+
+
+	/**
+	 *
+	 * @param {Color|Number|string} v
+	 */
+	set borderColor( v ) {
+
+		this._element._borderColor.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Color}
+	 */
+	get borderColor() { return this._element._borderColor._computed; }
+
+	/**
+	 *
+	 * @param v
+	 */
+	set borderOpacity (v) {
+
+		this._element._borderOpacity.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get borderOpacity () { return this._element._borderOpacity._computed; }
+
+
+
+	/**
+	 *
+	 * @param value
+	 */
+	set computed( value ) {
+
+		// do update
+		// this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Object.<string,any>}
+	 */
+	get computed() {
+
+		const output = {};
+		for ( const component of this._element._components ) {
+
+			output[component.id] = component.output;
+
+		}
+
+		return output;
+
+	}
+
+
+	dispose () {
+
+		this._element = null;
+
+	}
+
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/html/properties/StylePropertyWrapper.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/html/properties/StylePropertyWrapper.js
new file mode 100644
index 0000000..3882f80
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/elements/html/properties/StylePropertyWrapper.js
@@ -0,0 +1,917 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Color, Vector4 } from 'three';
+import MeshUIBaseElement from '../../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+
+/**
+ * Wrapper of properties to fit html naming and multiple inputs : inline & computed(css)
+ */
+export default class StylePropertyWrapper {
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( element ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @private
+		 */
+		this._element = element;
+
+	}
+
+	/***********************************************************************************************************************
+	 * INLINE GETTERS - SETTERS
+	 **********************************************************************************************************************/
+
+	/** Box Properties ---------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"border-box"|"content-box"} value
+	 */
+	set boxSizing( value ) {
+
+		this._element._boxSizing.inline = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"border-box"|"content-box"}
+	 */
+	get boxSizing() { return this._element._boxSizing._inline; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set width ( v ) {
+
+		this._element._width.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get width () { return this._element._width._inline; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set height ( v ) {
+
+		this._element._height.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get height () { return this._element._height._inline; }
+
+
+	/**
+	 *
+	 * @param {Vector4|Array.<number>|number|string} v
+	 */
+	set padding( v ) {
+
+		this._element._padding.inline = v;
+
+	}
+
+
+	/**
+	 *
+	 * @return {Vector4}
+	 */
+	get padding () { return this._element._padding._inline; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingTop ( v ) {
+
+		this._element._padding.top = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingTop () { return this._element._padding.top; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingRight (v) {
+
+		this._element._padding.right = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingRight () { return this._element._padding.right; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingBottom (v) {
+
+		this._element._padding.bottom = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingBottom () { return this._element._padding.bottom; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingLeft ( v ) {
+
+		this._element._padding.left = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingLeft () { return this._element._padding.left; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<number>|number|string} v
+	 */
+	set margin( v ) {
+
+		this._element._margin.inline = v;
+
+	}
+
+
+	/**
+	 *
+	 * @return {Vector4}
+	 */
+	get margin () {
+		return this._element._margin._inline;
+	}
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginTop ( v ) {
+
+		this._element._margin.top = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginTop () { return this._element._margin.top; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginRight (v) {
+
+		this._element._margin.right = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginRight () { return this._element._margin.right; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginBottom (v) {
+
+		this._element._margin.bottom = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginBottom () { return this._element._margin.bottom; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginLeft ( v ) {
+
+		this._element._margin.left = v;
+
+	}
+
+	/** Display Properties -----------------------------------------------------*/
+
+
+	/**
+	 *
+	 * @param {"flex"|"none"} value
+	 */
+	set display ( value ) {
+
+		this._element._display.inline = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"flex"|"none"}
+	 */
+	get display() { return this._element._display._inline; }
+
+
+	/**
+	 *
+	 * @param {"visible"|"hidden"} v
+	 */
+	set overflow ( v ) {
+
+		this._element._overflow.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"visible"|"hidden"}
+	 */
+	get overflow () { return this._element._overflow._inline; }
+
+	/** Position Properties ----------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"static"|"absolute"} v
+	 */
+	set position ( v ) {
+
+		this._element._position.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"static"|"absolute"}
+	 */
+	get position () { return this._element._position._inline; }
+
+
+	/** Flex Properties --------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"column"|"column-reverse"|"row"|"row-reverse"} value
+	 */
+	set flexDirection( value ) {
+
+		this._element._flexDirection.inline = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"column"|"column-reverse"|"row"|"row-reverse"}
+	 */
+	get flexDirection() { return this._element._flexDirection._inline; }
+
+	/**
+	 *
+	 * @param {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"} value
+	 */
+	set justifyContent( value ) {
+
+		this._element._justifyContent.inline = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"}
+	 */
+	get justifyContent() { return this._element._justifyContent._inline; }
+
+	/**
+	 *
+	 * @param {"start"|"center"|"end"|"stretch"} value
+	 */
+	set alignItems ( value ) {
+
+		this._element._alignItems.inline = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"start"|"center"|"end"|"stretch"}
+	 */
+	get alignItems() { return this._element._alignItems._inline; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set order (v) {
+
+		this._element._order.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get order () { return this._element._order._inline; }
+
+
+	/** Background Properties --------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {Color|number|string} v
+	 */
+	set backgroundColor( v ) {
+
+		this._element._backgroundColor.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Color|number|string}
+	 */
+	get backgroundColor() { return this._element._backgroundColor._inline; }
+
+
+	set backgroundOpacity ( v ) {
+
+		this._element._backgroundOpacity.inline = v;
+
+	}
+
+	get backgroundOpacity () { return this._element._backgroundOpacity._inline; }
+
+	/**
+	 *
+	 * @param {Texture|string} v
+	 */
+	set backgroundImage ( v ) {
+
+		this._element._backgroundImage.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Texture|string}
+	 */
+	get backgroundImage () { return this._element._backgroundImage._inline; }
+
+	/**
+	 *
+	 * @param {"cover"|"contain"|"stretch"} v
+	 */
+	set backgroundSize ( v ) {
+
+		this._element._backgroundSize.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"cover"|"contain"|"stretch"}
+	 */
+	get backgroundSize() { return this._element._backgroundSize._inline; }
+
+
+	/** Text Properties --------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"} v
+	 */
+	set whiteSpace ( v ) {
+
+		this._element._whiteSpace.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"}
+	 */
+	get whiteSpace () { return this._element._whiteSpace._inline; }
+
+
+
+
+
+	/**
+	 *
+	 * @param {Color|number|string} v
+	 */
+	set color( v ) {
+
+		this._element._color.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Color|number|string}
+	 */
+	get color () { return this._element._color._inline; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set opacity ( v ) {
+
+		this._element._fontOpacity.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get opacity () { return this._element._fontOpacity._inline; }
+
+
+
+
+	/**
+	 *
+	 * @param {"normal"|"italic"} v
+	 */
+	set fontStyle (v) {
+
+		this._element._fontStyle.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"italic"}
+	 */
+	get fontStyle () { return this._element._fontStyle._inline; }
+
+
+	/**
+	 *
+	 * @param {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}  v
+	 */
+	set fontWeight ( v ) {
+
+		this._element._fontWeight.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}
+	 */
+	get fontWeight () { return this._element._fontWeight._inline; }
+
+	/**
+	 *
+	 * @param {"normal"|"none"} v
+	 */
+	set fontKerning ( v ) {
+
+		this._element._fontKerning.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"none"}
+	 */
+	get fontKerning () { return this._element._fontKerning._inline; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set letterSpacing (v) {
+
+		this._element._letterSpacing.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get letterSpacing () { return this._element._letterSpacing._inline; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set lineHeight ( v ) {
+
+		this._element._lineHeight.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get lineHeight () { return this._element._lineHeight._inline; }
+
+
+	/**
+	 *
+	 * @param {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"} v
+	 */
+	set textAlign ( v ) {
+
+		this._element._textAlign.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"}
+	 */
+	get textAlign() { return this._element._textAlign._inline; }
+
+
+	/** Border Properties ----------------------------------------------------------------------------------------------*/
+
+	/**
+	 * Set the units of borderRadius
+	 * @param {string|"rem"} v
+	 */
+	set borderRadiusUnits( v ) {
+
+		// @TODO:
+		this._element._borderRadius.units = v;
+
+	}
+
+	/**
+	 * Get the units of borderRadius
+	 * @returns {string}
+	 */
+	get borderRadiusUnits() { /* @TODO:inline units */ return this._element._borderRadius.units; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<Number>|Number|string} v
+	 */
+	set borderRadius( v ) {
+
+		this._element._borderRadius.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Vector4}
+	 */
+	get borderRadius() { return this._element._borderRadius._inline; }
+
+	/**
+	 * Set the top left radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopLeftRadius( v ) {
+
+		this._element._borderRadius.topLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopLeftRadius() { return this._element._borderRadius.topLeft; }
+
+
+	/**
+	 * Set the top right radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopRightRadius( v ) {
+
+		this._element._borderRadius.topRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopRightRadius() { return this._element._borderWidth.topRight; }
+
+	/**
+	 * Set the bottom right radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomRightRadius( v ) {
+
+		this._element._borderRadius.bottomRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomRightRadius() { return this._element._borderWidth.bottomRight; }
+
+	/**
+	 * Set the bottom left radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomLeftRadius( v ) {
+
+		this._element._borderRadius.bottomLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomLeftRadius() { return this._element._borderWidth.bottomLeft; }
+
+	/**
+	 * Set the top left and top right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopRadius( v ) {
+
+		this._element._borderRadius.top = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopRadius() { return this._element._borderWidth.top; }
+
+	/**
+	 * Set the top right and bottom right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderRightRadius( v ) {
+
+		this._element._borderRadius.right = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderRightRadius() { return this._element._borderRadius.right; }
+
+	/**
+	 * Set the top left and bottom left radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderLeftRadius( v ) {
+
+		this._element._borderRadius.left = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderLeftRadius() { return this._element._borderRadius.left; }
+
+	/**
+	 * Set the bottom left and bottom right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomRadius( v ) {
+
+		this._element._borderRadius.bottom = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomRadius() { return this._element._borderRadius.bottom; }
+
+
+	/**
+	 * Set the units of borderWidth
+	 * @param {string|"rem"} v
+	 */
+	set borderWidthUnits( v ) {
+
+		// @TODO : Inline and Computed units to be implemented
+		this._element._borderWidth.units = v;
+
+	}
+
+	/**
+	 * Get the units of borderWidth
+	 * @returns {string}
+	 */
+	get borderWidthUnits() { return this._element._borderWidth.units; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<Number>|Number|string} v
+	 */
+	set borderWidth( v ) {
+
+		this._element._borderWidth.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Vector4}
+	 */
+	get borderWidth() { return this._element._borderWidth._inline; }
+
+	/**
+	 * Set the width of the top side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderTopWidth( v ) {
+
+		this._element._borderWidth.top = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopWidth() { return this._element._borderWidth.top; }
+
+	/**
+	 * Set the width of the right side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderRightWidth( v ) {
+
+		this._element._borderWidth.right = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderRightWidth() { return this._element._borderWidth.right; }
+
+	/**
+	 * Set the width of the bottom side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderBottomWidth( v ) {
+
+		this._element._borderWidth.bottom = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomWidth() { return this._element._borderWidth.bottom; }
+
+	/**
+	 * Set the width of the left side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderLeftWidth( v ) {
+
+		this._element._borderWidth.left = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderLeftWidth() { return this._element._borderWidth.left; }
+
+
+	/**
+	 *
+	 * @param {Color|Number|string} v
+	 */
+	set borderColor( v ) {
+
+		this._element._borderColor.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Color}
+	 */
+	get borderColor() { return this._element._borderColor._inline; }
+
+	/**
+	 *
+	 * @param v
+	 */
+	set borderOpacity (v) {
+
+		this._element._borderOpacity.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get borderOpacity () { return this._element._borderOpacity._inline; }
+
+
+
+	/**
+	 *
+	 * @param value
+	 */
+	set computed( value ) {
+
+		// do update
+		// this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Object.<string,any>}
+	 */
+	get computed() {
+
+		const output = {};
+		for ( const component of this._element._components ) {
+
+			output[component.id] = component.output;
+
+		}
+
+		return output;
+
+	}
+
+
+	dispose () {
+
+		this._element = null;
+
+	}
+
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/FontFamily.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/FontFamily.js
new file mode 100644
index 0000000..231b497
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/FontFamily.js
@@ -0,0 +1,163 @@
+import { EventDispatcher } from 'three';
+import MSDFFontVariant from './msdf/MSDFFontVariant';
+//JSDoc related imports
+
+/* eslint-disable no-unused-vars */
+import FontVariant from './FontVariant';
+import { Texture } from 'three';
+import { uniformizeFontWeight } from './utils/FontUtils';
+/* eslint-enable no-unused-vars */
+
+export default class FontFamily extends EventDispatcher {
+
+	/**
+	 *
+	 * @param {string} name
+	 */
+	constructor( name ) {
+
+		super();
+
+		/**
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		this._name = name;
+
+		/**
+		 *
+		 * @type {Array.<FontVariant>}
+		 * @private
+		 */
+		this._variants = [];
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		this._isReady = false;
+
+	}
+
+	get isReady() { return this._isReady; }
+
+	/**
+	 *
+	 * @param {string|number} weight
+	 * @param {string} style
+	 * @param {string|Object} json
+	 * @param {string|Texture} texture
+	 * @param {boolean} [override=false]
+	 */
+	addVariant( weight, style, json, texture, override = false){
+
+		if( override || !this.getVariant( weight, style) ){
+
+			this._isReady = false;
+
+			const newVariant = new MSDFFontVariant( weight, style, json, texture);
+
+			this._variants.push( newVariant );
+
+			if( !newVariant.isReady ){
+
+				newVariant.addEventListener( "ready", this._checkReadiness )
+
+			} else {
+
+				this._checkReadiness();
+
+			}
+
+		} else {
+
+			console.warn(`FontFamily('${this._name}')::addVariant() - Variant(${weight}, ${style}) already exists.`);
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 *
+	 * @param {FontVariant} variantImplementation
+	 * @param {boolean} [override=false]
+	 */
+	addCustomImplementationVariant( variantImplementation, override = false){
+
+		if( override || !this.getVariant( variantImplementation.weight, variantImplementation.style) ){
+
+			this._isReady = false;
+
+			this._variants.push( variantImplementation );
+
+			if( !variantImplementation.isReady ){
+
+				variantImplementation.addEventListener( "ready", this._checkReadiness )
+
+			} else {
+
+				this._checkReadiness();
+
+			}
+
+		} else {
+
+			console.warn(`FontFamily('${this._name}')::addCustomImplementationVariant() - Variant(${variantImplementation.weight}, ${variantImplementation.style}) already exists.`);
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 *
+	 * @param {string|number} weight
+	 * @param {string} style
+	 * @returns {FontVariant|null}
+	 */
+	getVariant( weight, style ){
+
+		weight = uniformizeFontWeight(weight);
+
+		return this._variants.find( fontVariant => fontVariant.weight === weight && fontVariant.style === style );
+
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get name(){ return this._name; }
+
+	_checkReadiness = () => {
+
+		if( this._variants.every( v => v.isReady ) ) {
+
+			_setReady( this );
+
+		}
+
+	}
+
+}
+
+const _readyEvent = { type: 'ready' };
+
+/**
+ * Set the ready status of a fontVariant
+ * @param {FontFamily} fontFamily
+ * @private
+ */
+function _setReady( fontFamily ) {
+
+	fontFamily._isReady = true;
+	fontFamily.dispatchEvent( _readyEvent );
+
+}
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/FontLibrary.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/FontLibrary.js
new file mode 100644
index 0000000..2cd8fc7
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/FontLibrary.js
@@ -0,0 +1,165 @@
+import FontFamily from './FontFamily';
+
+// JSDoc related imports
+/* eslint-disable no-unused-vars */
+import FontVariant from './FontVariant';
+/* eslint-enable no-unused-vars */
+
+
+const _fontFamilies = {};
+
+/* eslint-disable no-unused-vars */
+
+/**
+ *
+ * @param {FontFamily} fontFamily
+ * @returns {Promise<unknown>}
+ */
+const prepare = function ( fontFamily ) {
+
+	/**
+	 *
+	 * @type {FontFamily[]}
+	 */
+	const families = [ ...arguments ];
+
+	// Check all family are right instance
+	families.forEach( f => {
+
+		if( !(f instanceof FontFamily) ) {
+
+			throw new Error(`FontLibrary::prepare() - One of the provided parameter is not a FontFamily. Instead ${typeof f} given.`);
+
+		}
+
+	})
+
+	/**
+	 * Check that all provided families are loaded
+	 * @returns {boolean}
+	 */
+	const areAllLoaded = function() {
+
+		return families.every( f => f.isReady );
+
+	}
+
+	// @TODO: Should handle possible rejection
+	return new Promise((resolve,reject)=>{
+
+		// Direct resolve if all loaded
+		if ( areAllLoaded() ){
+
+			resolve();
+
+		} else {
+
+			// Add listener on each family not ready
+			for ( let i = 0; i < families.length; i++ ) {
+
+				const family = families[ i ];
+				if( !family.isReady ){
+
+					family.addEventListener( "ready" , ()=> {
+
+						// Resolve if all other families are loaded
+						if( areAllLoaded() ) {
+
+							resolve();
+
+						}
+
+					});
+
+				}
+
+			}
+
+		}
+
+	});
+
+}
+
+/* eslint-enable no-unused-vars */
+
+
+/**
+ *
+ * @param {string} name
+ * @returns {FontFamily}
+ */
+const addFontFamily = function ( name ) {
+
+	if ( _fontFamilies[ name ] ) {
+		console.error( `FontLibrary::addFontFamily - Font('${name}') is already registered` );
+	}
+
+	_fontFamilies[ name ] = new FontFamily( name );
+
+	return _fontFamilies[ name ];
+
+}
+
+/**
+ *
+ * @param {string} name
+ * @returns {FontFamily}
+ */
+const getFontFamily = function( name ) {
+
+	return _fontFamilies[ name ];
+
+}
+
+
+/**
+ *
+ * @param { (fontVariant:FontVariant, character:string ) => string|null } handler
+ */
+const setMissingCharacterHandler = function ( handler ) {
+
+	_missingCharacterHandler = handler;
+
+}
+
+/**
+ *
+ * @type { (fontVariant:FontVariant, character:string ) => string|null }
+ * @private
+ */
+let _missingCharacterHandler = function ( fontVariant, character ) {
+
+	console.error( `The character '${character}' is not included in the font characters set.` );
+
+	// return a glyph has fallback
+	return " ";
+
+};
+
+/**
+ *
+ * @param {FontVariant} fontVariant
+ * @param {string} character
+ *
+ * @returns {string}
+ */
+function missingCharacter( fontVariant, character ) {
+
+	// Execute the user defined handled
+	return _missingCharacterHandler( fontVariant, character );
+
+}
+
+
+//
+
+const FontLibrary = {
+	addFontFamily,
+	getFontFamily,
+	prepare,
+	setMissingCharacterHandler,
+	missingCharacter
+};
+
+export default FontLibrary;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/FontVariant.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/FontVariant.js
new file mode 100644
index 0000000..8fc9737
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/FontVariant.js
@@ -0,0 +1,271 @@
+import { EventDispatcher } from 'three';
+
+
+// JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { BufferGeometry, Material, ShaderMaterial, Texture } from 'three';
+import InlineGlyph from './InlineGlyph';
+import MeshUIBaseElement from './../core/elements/MeshUIBaseElement';
+import TypographicFont from './TypographicFont';
+import TypographicGlyph from './TypographicGlyph';
+import { uniformizeFontWeight } from './utils/FontUtils';
+/* eslint-enable no-unused-vars */
+
+
+/**
+ * @abstract
+ */
+class FontVariant extends EventDispatcher {
+
+	/**
+	 *
+	 * @param {import('./../core/elements/MeshUIBaseElement').FontWeightFormat} weight
+	 * @param {"normal"|"italic"} style
+	 */
+	constructor( weight, style ) {
+
+		super();
+
+		/** @private */ this._isReady = false;
+
+		/** @protected */ this._weight = uniformizeFontWeight( weight );
+		/** @protected */ this._style = style;
+
+		/** @protected */ this._size = 42;
+		/** @protected */ this._lineHeight = 42;
+		/** @protected */ this._lineBase = 42;
+
+		/**
+		 *
+		 * @type {TypographicFont}
+		 * @protected
+		 */
+		this._font = null;
+
+	}
+
+	/**
+	 *
+	 * @returns {TypographicFont}
+	 */
+	get typographic() { return this._font; }
+
+	/**
+	 *
+	 * @returns {boolean}
+	 */
+	get isReady() {
+
+		return this._isReady;
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get weight() {
+
+		return this._weight;
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get style() {
+
+		return this._style;
+
+	}
+
+	/**
+	 *
+	 * @returns {Texture}
+	 */
+	get texture() {
+
+		return this._texture;
+
+	}
+
+	/**
+	 * @param {Function.<ShaderMaterial|Material>} v
+	 * @abstract
+	 */
+	set fontMaterial( v ) {
+		throw Error( `FontVariant('${this.id}')::fontMaterial - is abstract.` );
+	}
+
+	/**
+	 * @return {Function.<ShaderMaterial|Material>}
+	 * @abstract
+	 */
+	get fontMaterial() {
+		throw Error( `FontVariant('${this.id}')::fontMaterial - is abstract.` );
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get id(){
+		return `${this._name}(w:${this.weight},s:${this.style})`;
+	}
+
+	/**
+	 *
+	 * @param {string} character
+	 * @returns {TypographicGlyph}
+	 */
+	getTypographicGlyph( character ) {
+
+		let typographicGlyph = this._chars[ character ];
+		if ( typographicGlyph ) return typographicGlyph;
+
+		// Auto generate whitespace chars
+		if ( character.match( /\s/ ) ) return this._chars[ " " ];
+
+		const fallbackCharacter = this._getFallbackCharacter( character );
+		if( fallbackCharacter ) {
+
+			typographicGlyph = this._chars[ fallbackCharacter ];
+			if ( typographicGlyph ) return typographicGlyph;
+
+		}
+
+		throw Error( `FontVariant('${this.id}')::getTypographicGlyph() - character('${character}') and/or fallback character were not found in provided msdf charset.` );
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @abstract
+	 * @protected
+	 * @param {string} missingChar
+	 * @returns {string|null}
+	 */
+	_getFallbackCharacter( missingChar ) {  /* eslint-enable no-unused-vars */
+		throw new Error(`FontVariant(${typeof this})::_getFallbackCharacter() is abstract and should therefore be overridden.`);
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Convert an InlineCharacter to a geometry
+	 *
+	 * @abstract
+	 * @param {InlineGlyph} inline
+	 * @param {MeshUIBaseElement} element
+	 * @returns {BufferGeometry|Array.<BufferGeometry>}
+	 */
+	getGeometricGlyph( inline, element ) {
+
+		throw new Error(`FontVariant(${typeof this})::getGeometryCharacter() is abstract and should therefore be overridden.`);
+
+	}
+
+	/* eslint-enable no-unused-vars */
+
+
+	/**
+	 * Obtain the kerning amount of a glyphPair
+	 * @param {string} glyphPair
+	 * @returns {number}
+	 */
+	getKerningAmount( glyphPair ){
+
+		//or zero offset if kerning glyphPais is not defined
+		return this._kernings[ glyphPair ] ? this._kernings[ glyphPair ] : 0;
+
+	}
+
+
+	/**
+	 * Perform some changes on the character description of this font
+	 * @param {Object.<string,Object.<string,number|string>>} adjustmentObject
+	 */
+	adjustTypographicGlyphs( adjustmentObject ){
+
+		for ( const char in adjustmentObject ) {
+
+			const typographicGlyph = this.getTypographicGlyph( char );
+			const glyphAdjustment = adjustmentObject[ char ];
+			for ( const propertyToAdjust in glyphAdjustment ) {
+
+				typographicGlyph["_"+propertyToAdjust] = adjustmentObject[char][propertyToAdjust];
+
+			}
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @private
+	 */
+	_checkReadiness() {
+
+		if ( this._readyCondition() ) {
+
+			_setReady( this );
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @abstract
+	 * @param element
+	 * @internal
+	 */
+	_alterElementProperties( element ) {  /* eslint-enable no-unused-vars */
+
+		throw new Error(`FontVariant(${typeof this})::_alterElementProperties() is abstract and should therefore be overridden.`);
+
+	}
+
+	/**
+	 *
+	 * @abstract
+	 * @returns {boolean}
+	 * @protected
+	 */
+	_readyCondition () {
+
+		// ie: MSDFFontVariant
+		// Must have chars and a texture
+		// return this._chars && this._texture
+
+		throw new Error(`FontVariant(${typeof this})::_readyCondition() is abstract and should therefore be overridden.`);
+	}
+
+}
+
+/***********************************************************************************************************************
+ * INTERNAL STUFF
+ **********************************************************************************************************************/
+
+
+const _readyEvent = { type: 'ready' };
+
+/**
+ * Set the ready status of a fontVariant
+ * @param {FontVariant} fontVariant
+ * @private
+ */
+function _setReady( fontVariant ) {
+
+	fontVariant._isReady = true;
+	fontVariant.dispatchEvent( _readyEvent );
+
+}
+
+/**
+ * @typedef {Object.<string,number>} KerningPairs
+ *
+ */
+
+export default FontVariant;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/InlineGlyph.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/InlineGlyph.js
new file mode 100644
index 0000000..068f156
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/InlineGlyph.js
@@ -0,0 +1,100 @@
+import Inline from '../core/elements/glyphs/Inline';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import TypographicGlyph from './TypographicGlyph';
+/* eslint-enable no-unused-vars */
+
+export default class InlineGlyph extends Inline {
+
+	/**
+	 *
+	 * @param {TypographicGlyph} characterDesc
+	 */
+	constructor( characterDesc ) {
+
+		super();
+
+		/** @protected */ this._typographic = characterDesc;
+
+	}
+
+	/**
+	 *
+	 * @returns {TypographicGlyph}
+	 */
+	get typographic(){
+
+		return this._typographic;
+
+	}
+
+	/*********************************************************************************************************************
+	 * GETTERS FROM CHARACTER DESCRIPTION
+	 ********************************************************************************************************************/
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get xadvance() { return this._typographic.xadvance * this._fontFactor; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get xoffset() { return this._typographic.xoffset * this._fontFactor; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get yoffset() { return this._typographic.yoffset * this._fontFactor; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get width() { return this._typographic.width * this._fontFactor ; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get height() { return this._typographic.height * this._fontFactor; }
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get char() { return this._typographic.char; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get anchor() {
+
+		// const lineHeight = this._typographic.font.lineHeight;
+		// const lineBase = this._typographic.font.lineBase;
+		//
+		// return ( ( this._typographic.yoffset + this._typographic.height - lineBase ) * this._fontSize ) / lineHeight;
+
+		return this.yoffset;
+
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get lineHeight() { return this._typographic.font.lineHeight * this._fontFactor; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get lineBase() { return this._typographic.font.lineBase * this._fontFactor; }
+
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/TypographicFont.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/TypographicFont.js
new file mode 100644
index 0000000..9b03e5f
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/TypographicFont.js
@@ -0,0 +1,43 @@
+export default class TypographicFont {
+
+	constructor() {
+
+		/** @protected */ this._size = 42;
+		/** @protected */ this._lineHeight = 42;
+		/** @protected */ this._lineBase = 38;
+		/** @protected */ this._name = "-";
+		/** @protected */ this._charset = "";
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get size() { return this._size; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineHeight() { return this._lineHeight; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineBase() { return this._lineBase; }
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get name() { return this._name; }
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get charset() { return this._charset; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/TypographicGlyph.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/TypographicGlyph.js
new file mode 100644
index 0000000..a77c820
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/TypographicGlyph.js
@@ -0,0 +1,138 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import TypographicFont from './TypographicFont';
+import InlineGlyph from './InlineGlyph';
+/* eslint-enable no-unused-vars */
+
+/**
+ * @class
+ * @abstract
+ */
+export default class TypographicGlyph {
+
+	/**
+	 *
+	 * @param {TypographicFont} typographicFont
+	 */
+	constructor( typographicFont ) {
+
+		/** @protected */ this._char = "";
+		/** @protected */ this._width = 1;
+		/** @protected */ this._heigth = 1;
+		/** @protected */ this._xadvance = 1;
+		/** @protected */ this._xoffset = 0;
+		/** @protected */ this._yoffset = 0;
+
+		/**
+		 *
+		 * @type {TypographicFont}
+		 * @protected
+		 */
+		this._font = typographicFont;
+
+	}
+
+	/**
+	 *
+	 * @returns {TypographicFont}
+	 */
+	get font() {
+
+		return this._font;
+
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get char() {
+
+		return this._char;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get width() {
+
+		return this._width;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get height() {
+
+		return this._heigth;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get xadvance() {
+
+		return this._xadvance;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get xoffset() {
+
+		return this._xoffset;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get yoffset() {
+
+		return this._yoffset;
+
+	}
+
+	/**
+	 *
+	 * @param value
+	 */
+	set yoffset( value ) {
+
+		this._yoffset = value;
+
+	}
+
+	/**
+	 *
+	 * @abstract
+	 * @param {string} otherChar
+	 * @returns {TypographicGlyph}
+	 */
+	/* eslint-disable no-unused-vars */ clone( otherChar ) { /* eslint-enable no-unused-vars */
+
+		throw new Error("Abstract... Need to be implemented");
+
+	}
+
+	/**
+	 *
+	 * @abstract
+	 * @returns {InlineGlyph}
+	 */
+	asInlineGlyph() {
+
+		throw new Error("Abstract... Need to be implemented")
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFFontVariant.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFFontVariant.js
new file mode 100644
index 0000000..b79f2bc
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFFontVariant.js
@@ -0,0 +1,385 @@
+import { FileLoader, LinearFilter, Texture, TextureLoader, Vector2 } from 'three';
+import MSDFTypographicFont from './MSDFTypographicFont';
+import MSDFTypographicGlyph from './MSDFTypographicGlyph';
+import MSDFGeometricGlyph from './MSDFGeometricGlyph';
+import MSDFFontMaterial from './materials/MSDFFontMaterial';
+import FontVariant from '../FontVariant';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import InlineGlyph from './../InlineGlyph';
+import FontLibrary from '../FontLibrary';
+/* eslint-enable no-unused-vars */
+
+/**
+ * @extends {FontVariant}
+ */
+export default class MSDFFontVariant extends FontVariant {
+
+	constructor( weight, style, json, texture ) {
+
+		super(weight, style);
+
+		// provide default values
+		this._unitRange = new Vector2( 1, 1 );
+
+		if ( json.pages ) {
+
+			this._buildData( json );
+
+		} else {
+
+			_loadJson( this, json );
+
+		}
+
+		if ( texture instanceof Texture ) {
+
+			this._texture = texture;
+			this._buildTexture( texture );
+
+		} else if( typeof(texture) === 'string' || texture instanceof String ){
+
+			_loadTexture( this, texture );
+
+		} else {
+
+			throw new Error(`ThreeMeshUI::MSDFVariant provided 'texture' parameter is '${typeof texture}'. Only Texture and String allowed.`)
+
+		}
+
+		this._defaultMaterialClass = MSDFFontMaterial;
+
+
+		this._checkReadiness();
+
+	}
+
+
+	get texture() {
+
+		return this._texture;
+
+	}
+
+	get unitRange() {
+
+		return this._unitRange;
+
+	}
+
+	/**
+	 * @param {Function.<Material|ShaderMaterial>} v
+	 * @override
+	 */
+	set fontMaterial( v ) {
+
+		this._defaultMaterialClass = v;
+
+	}
+
+	/**
+	 *
+	 * @override
+	 * @returns {Function.<Material|ShaderMaterial>}
+	 */
+	get fontMaterial() {
+
+		return this._defaultMaterialClass;
+
+	}
+
+	/**
+	 *
+	 * @param {MSDFJson} json
+	 * @private
+	 */
+	_buildData( json ) {
+
+		this._font = new MSDFTypographicFont( json );
+
+		/**
+		 *
+		 * @type {import('../FontVariant').KerningPairs}
+		 * @private
+		 */
+		this._kernings = this._buildKerningPairs( json );
+		this._chars = this._buildCharacters( json );
+
+		this._chars[ " " ] = this._buildCharacterWhite( json );
+		this._chars[ "\n" ] = this._buildCharacterWhite( json, '\n' , 0.001, 1);
+		this._chars[ "\t" ] = this._buildCharacterWhite( json, '\t' , 4, 1);
+
+		this._size = json.info.size;
+		this._lineHeight = json.common.lineHeight;
+		this._lineBase = json.common.base;
+
+		this._distanceRange = json.distanceField.distanceRange;
+
+		// precompute the unit range as recommended by chlumsky
+		// @see https://github.com/Chlumsky/msdfgen
+		// "I would suggest precomputing unitRange as a uniform variable instead of pxRange for better performance."
+		this._unitRange = new Vector2(this._distanceRange, this._distanceRange)
+			.divide( new Vector2( json.common.scaleW, json.common.scaleH ) );
+
+	}
+
+	/**
+	 *
+	 * @param texture
+	 * @private
+	 */
+	_buildTexture( texture ) {
+
+		texture.generateMipmaps = false;
+		texture.minFilter = LinearFilter;
+		texture.magFilter = LinearFilter;
+
+		texture.needsUpdate = true;
+
+	}
+
+	/**
+	 * @abstract
+	 * @protected
+	 * @param {string} missingChar
+	 * @returns {string|null}
+	 */
+	_getFallbackCharacter( missingChar ) {
+		return FontLibrary.missingCharacter( this, missingChar );
+	}
+
+	/**
+	 *
+	 * @override
+	 * @param {import('./../InlineGlyph').default|import('./MSDFInlineGlyph').default} inline
+	 * @param {import('./../../core/elements/MeshUIBaseElement').default} element
+	 * @returns {MSDFGeometricGlyph}
+	 */
+	getGeometricGlyph( inline, element ) {
+
+		return new MSDFGeometricGlyph( inline, element );
+
+	}
+
+	/**
+	 * Abstraction implementation
+	 *
+	 * @returns {boolean}
+	 * @private
+	 */
+	_readyCondition() {
+
+		return this._chars && this._texture && this._texture.image;
+
+	}
+
+	/**
+	 * Ensure that each font variant has its kerning dictionary
+	 * @see src/font/msdf/FontVariantMSDF.js for an implementation
+	 *
+	 * @param {MSDFJson} json
+	 * @returns {import('../FontVariant').KerningPairs}
+	 * @private
+	 */
+	_buildKerningPairs( json ) {
+
+		const friendlyKernings = {};
+
+		// Loop through each kernings pairs defined in msdf json
+		for ( let i = 0; i < json.kernings.length; i++ ) {
+
+			const kerning = json.kernings[ i ];
+
+			// ignore zero kerned glyph pair
+			if ( kerning.amount === 0 ) continue;
+
+			// Build and store the glyph paired characters "ij","WA", ... as keys, referecing their kerning amount
+			const glyphPair = String.fromCharCode( kerning.first, kerning.second );
+
+			// This would then be available for fast access
+			friendlyKernings[ glyphPair ] = kerning.amount;
+
+		}
+
+		// update the font to keep it
+		return friendlyKernings;
+
+	}
+
+
+	/**
+	 *
+	 * @param {MSDFJson} json
+	 * @private
+	 */
+	_buildCharacters( json ) {
+
+		const friendlyChars = {};
+
+		for ( let i = 0; i < json.chars.length; i++ ) {
+			const charOBJ = json.chars[ i ];
+
+			friendlyChars[ charOBJ.char ] = new MSDFTypographicGlyph( this._font, charOBJ );
+
+		}
+
+		return friendlyChars;
+
+	}
+
+	/**
+	 *
+	 * @param {MSDFJson} json
+	 * @param char
+	 * @param scaleX
+	 * @param scaleY
+	 * @private
+	 */
+	_buildCharacterWhite( json, char = " ", scaleX = 1, scaleY = 1 ) {
+		return new MSDFTypographicGlyph( this._font,
+			{
+				char,
+				width: (json.info.size / 3)*scaleX,
+				height: (json.info.size * 0.7)*scaleY,
+			});
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @private
+	 */
+	_alterElementProperties( element ) { /* eslint-enable no-unused-vars */ }
+}
+
+/***********************************************************************************************************************
+ * INTERNAL STUFF
+ **********************************************************************************************************************/
+
+
+/**
+ * Load a msdf json then build fontVariant data
+ *
+ * @param {FontVariant} fontVariant
+ * @param {string} jsonUrl
+ * @private
+ */
+function _loadJson( fontVariant, jsonUrl ) {
+
+	new FileLoader().setResponseType( 'json' ) .load( jsonUrl, ( response ) => {
+
+		fontVariant._buildData( response );
+		fontVariant._checkReadiness();
+
+	} );
+
+}
+
+/**
+ * Load a msdf texture then build texture
+ *
+ * @param {FontVariant} fontVariant
+ * @param {string} textureUrl
+ * @private
+ */
+function _loadTexture( fontVariant, textureUrl ) {
+
+	fontVariant._texture = new TextureLoader().load( textureUrl, ( texture ) => {
+
+		fontVariant._buildTexture( texture );
+		fontVariant._checkReadiness();
+
+	} );
+
+}
+
+/***********************************************************************************************************************
+ * MSDF FILE FORMAT DESCRIPTION
+ * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
+ **********************************************************************************************************************/
+
+/**
+ * @typedef {Object} MSDFJson
+ *
+ * @property {MSDFJsonInfo} info
+ * @property {MSDFJsonCommon} common
+ * @property {Array.<MSDFJsonPage>} pages
+ * @property {Array.<MSDFJsonChar>} chars
+ * @property {{fieldType:string, distanceRange:number}} distanceField
+ * @property {Array.<MSDFJsonKerning>} kernings
+ */
+
+/**
+ *
+ * @typedef {Object} MSDFJsonInfo
+ *
+ * @property {string} face This is the name of the true type font.
+ * @property {number} size The size of the true type font.
+ * @property {boolean} bold The font is bold.
+ * @property {boolean} italic The font is italic.
+ * @property {string[]} charset The name of the OEM charset used (when not unicode).
+ * @property {boolean} unicode 	Set to 1 if it is the unicode charset.
+ * @property {number} stretchH The font height stretch in percentage. 100% means no stretch.
+ * @property {number} smooth Set to 1 if smoothing was turned on.
+ * @property {number} aa The supersampling level used. 1 means no supersampling was used.
+ * @property {Array.<number>} padding TThe padding for each character (up, right, down, left).
+ * @property {Array.<number>} spacing The spacing for each character (horizontal, vertical).
+ * @property {number} outline (not found) The outline thickness for the characters.
+ */
+
+/**
+ *
+ * @typedef {Object} MSDFJsonCommon
+ *
+ * @property {number} lineHeight This is the distance in pixels between each line of text.
+ * @property {number} base The number of pixels from the absolute top of the line to the base of the characters.
+ * @property {number} scaleW The width of the texture, normally used to scale the x pos of the character image.
+ * @property {number} scaleH The height of the texture, normally used to scale the y pos of the character image.
+ * @property {number} pages The number of texture pages included in the font.
+ * @property {boolean} packed
+ * @property {number} alphaChnl
+ * @property {number} redChnl
+ * @property {number} greenChnl
+ * @property {number[]} blueChnl
+ */
+
+/**
+ * @typedef {Object} MSDFJsonPage
+ *
+ * @property {string} id The page id.
+ * @property {string} file The texture file name.
+ */
+
+/**
+ *
+ * @typedef {Object} MSDFJsonChar
+ *
+ * @property {number} id The character id.
+ * @property {number} index The character index.
+ * @property {string} char The character.
+ * @property {number} x The left position of the character image in the texture.
+ * @property {number} y The top position of the character image in the texture.
+ * @property {number} width The width of the character image in the texture.
+ * @property {number} height The height of the character image in the texture.
+ * @property {number} xoffset How much the current position should be offset when copying the image from the texture to the screen.
+ * @property {number} yoffset How much the current position should be offset when copying the image from the texture to the screen.
+ * @property {number} xadvance How much the current position should be advanced after drawing the character.
+ * @property {string} page The texture page where the character image is found.
+ * @property {number} chnl The texture channel where the character image is found (1 = blue, 2 = green, 4 = red, 8 = alpha, 15 = all channels).
+ * @property {Object} [uv]
+ * /
+
+
+
+/**
+ *
+ * @typedef {Object} MSDFJsonKerning
+ *
+ * @property {number} first The first character id.
+ * @property {number} second The second character id.
+ * @property {number} amount How much the x position should be adjusted when drawing the second character immediately following the first.
+ *
+ */
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFGeometricGlyph.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFGeometricGlyph.js
new file mode 100644
index 0000000..db56121
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFGeometricGlyph.js
@@ -0,0 +1,127 @@
+import { BufferAttribute, PlaneGeometry } from 'three';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+import MSDFInlineGlyph from './MSDFInlineGlyph';
+/* eslint-enable no-unused-vars */
+
+export default class MSDFGeometricGlyph extends PlaneGeometry {
+
+	/**
+	 *
+	 * @param {MSDFInlineGlyph} inline
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( inline, element ) {
+
+
+		// default w & h segments
+		let wS = 1, hS=1;
+
+		// If charOBJ, try to distribute segments proportionally
+		const typographicFontSize = inline.typographic.font.size;
+
+		const segments = element._segments.value;
+
+		wS = Math.ceil((inline.typographic.width / typographicFontSize) * segments );
+		hS = Math.ceil((inline.typographic.height / typographicFontSize) * segments );
+
+		super( inline.width, inline.height, wS, hS );
+
+		// If inline has UVs
+		if ( inline.uv ) {
+
+			this._mapUVs( inline );
+
+			this._transformGeometry( inline );
+
+			// White spaces (we don't want our plane geometry to have a visual width nor a height)
+		} else {
+
+			this._nullifyUVs();
+
+			this.scale( 0, 0, 1 );
+
+			this.translate( 0, inline.fontSize / 2, 0 );
+
+		}
+
+		this.name = "GlyphGeometry";
+		// Demo alter geometry
+		// const maxOffset = inline.fontSize / 10;
+		// this.translate(0 , -maxOffset + Math.random() * maxOffset*2, 0 )
+		// this.rotateZ(-0.1 + 0.2 * Math.random() )
+
+	}
+
+	/**
+	 * Compute the right UVs that will map the MSDF texture so that the passed character
+	 * will appear centered in full size
+	 * @param {MSDFInlineGlyph} inline
+	 * @private
+	 */
+	_mapUVs( inline ) {
+
+
+		const width = inline.uv.right - inline.uv.left;
+		const height = inline.uv.bottom - inline.uv.top;
+
+		const originalUvArray = this.getAttribute('uv').array.slice()
+
+		const uvGlyph = [];
+		for (let i = 0; i < originalUvArray.length; i += 2) {
+			const u = originalUvArray[i];
+			const v = originalUvArray[i + 1];
+
+			uvGlyph.push(inline.uv.left + width * u);
+			uvGlyph.push(inline.uv.top + height * v);
+		}
+		this.setAttribute('uvG', new BufferAttribute(new Float32Array(uvGlyph), 2));
+
+	}
+
+	/**
+	 * Set all UVs to 0, so that none of the glyphs on the texture will appear
+	 * @private
+	 * */
+	_nullifyUVs() {
+
+		// const uvAttribute = this.attributes.uv;
+		//
+		// for ( let i = 0; i < uvAttribute.count; i++ ) {
+		//
+		// 	uvAttribute.setXY( i, 0, 0 );
+		//
+		// }
+
+		const uvGlyph = [];
+		const length = this.getAttribute('uv').array.length;
+		for ( let i = 0; i < length; i++ ) {
+			uvGlyph.push(0);
+		}
+		this.setAttribute('uvG', new BufferAttribute(new Float32Array(uvGlyph), 2));
+
+	}
+
+	/**
+	 *
+	 * @TODO: Apply pivot properties when splitText isset
+	 * Gives the previously computed scale and offset to the geometry
+	 * @param {MSDFInlineGlyph} inline
+	 * @private
+	 */
+	_transformGeometry( inline ) {
+
+		//
+
+		// @TODO : Evaluate this as being a property. It can wait until splitGeometry
+		this.translate(
+			inline.width / 2,
+			-inline.height/2,
+			0
+		);
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFInlineGlyph.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFInlineGlyph.js
new file mode 100644
index 0000000..35175eb
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFInlineGlyph.js
@@ -0,0 +1,29 @@
+import InlineGlyph from '../InlineGlyph';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MSDFTypographicGlyph from './MSDFTypographicGlyph';
+/* eslint-enable no-unused-vars */
+
+/**
+ * @extends InlineGlyph
+ */
+export default class MSDFInlineGlyph extends InlineGlyph{
+
+	/**
+	 *
+	 * @param {MSDFTypographicGlyph} characterDesc
+	 */
+	constructor( characterDesc ) {
+
+		super( characterDesc );
+
+	}
+
+	/**
+	 *
+	 * @returns {{left:number, right:number, top:number, bottom:number}|null}
+	 */
+	get uv() { return this.typographic.uv; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFTypographicFont.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFTypographicFont.js
new file mode 100644
index 0000000..f57f016
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFTypographicFont.js
@@ -0,0 +1,40 @@
+import TypographicFont from '../TypographicFont';
+
+export default class MSDFTypographicFont extends TypographicFont{
+
+	/**
+	 *
+	 * @param {import('./MSDFFontVariant').MSDFJson} json
+	 */
+	constructor( json ) {
+
+		super();
+
+		// base description
+		this._size = json.info.size;
+		this._lineHeight = json.common.lineHeight;
+		this._lineBase = json.common.base;
+
+		this._name = json.info.face;
+
+		// MSDF
+		this._textureWidth = json.common.scaleW;
+		this._textureHeight = json.common.scaleH;
+
+		this._charset = json.chars.map( char => char.char ).join("");
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get textureWidth() { return this._textureWidth; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get textureHeight() { return this._textureHeight; }
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFTypographicGlyph.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFTypographicGlyph.js
new file mode 100644
index 0000000..5f46a67
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/MSDFTypographicGlyph.js
@@ -0,0 +1,88 @@
+import TypographicGlyph from '../TypographicGlyph';
+import MSDFInlineGlyph from './MSDFInlineGlyph';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MSDFTypographicFont from './MSDFTypographicFont';
+/* eslint-enable no-unused-vars */
+
+
+/**
+ * @property {MSDFTypographicFont} _font
+ */
+export default class MSDFTypographicGlyph extends TypographicGlyph {
+
+	/**
+	 * @param {MSDFTypographicFont} fontDescription
+	 * @param {import('./MSDFFontVariant').MSDFJsonChar} characterData
+	 */
+	constructor( fontDescription, characterData ) {
+
+		super( fontDescription );
+
+		this._char = characterData.char;
+		this._width = characterData.width;
+		this._heigth = characterData.height;
+
+		this._xadvance = characterData.xadvance ? characterData.xadvance : this._width;
+		this._xoffset = characterData.xoffset ? characterData.xoffset : 0;
+		this._yoffset = characterData.yoffset ? characterData.yoffset : 0;
+
+		// Msdf requires uvs
+		this._uv = characterData.uv ? characterData.uv : null;
+
+		if ( !isNaN( characterData.x ) ) {
+			// transform absolute pixel values into uv values [0,1]
+			this._uv = {
+				left: characterData.x / fontDescription.textureWidth,
+				right: ( characterData.x + characterData.width ) / fontDescription.textureWidth,
+				top: 1 - ( ( characterData.y + characterData.height ) / fontDescription.textureHeight ),
+				bottom: 1 - ( characterData.y / fontDescription.textureHeight )
+			};
+		}
+	}
+
+
+	/**
+	 *
+	 * @returns {{left: number, right: number, top: number, bottom: number}|null}
+	 */
+	get uv() {
+
+		return this._uv;
+
+	}
+
+	/**
+	 * @override
+	 * @param {string} otherChar
+	 * @returns {MSDFTypographicGlyph}
+	 */
+	clone( otherChar ) {
+
+		return new MSDFTypographicGlyph( this._font, {
+			char: otherChar,
+			width: this._width,
+			height: this._heigth,
+			xadvance: this._xadvance,
+			xoffset: this._xoffset,
+			yoffset: this._yoffset,
+
+			// Msdf requires uvs
+			uv: null
+		} );
+
+	}
+
+
+	/**
+	 * @override
+	 * @returns {MSDFInlineGlyph}
+	 */
+	asInlineGlyph() {
+
+		return new MSDFInlineGlyph( this );
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/materials/MSDFDepthMaterial.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/materials/MSDFDepthMaterial.js
new file mode 100644
index 0000000..6e4c547
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/materials/MSDFDepthMaterial.js
@@ -0,0 +1,55 @@
+/* eslint-disable no-unused-vars */
+import { Material, ShaderMaterial } from 'three';
+/* eslint-enable no-unused-vars */
+
+import { MeshDepthMaterial, RGBADepthPacking } from 'three';
+import MSDFFontMaterialUtils from '../utils/MSDFFontMaterialUtils';
+
+export default class MSDFDepthMaterial extends MeshDepthMaterial {
+
+	/**
+	 * This static method is mandatory for extending ThreeMeshUI.MSDFFontMaterial
+	 * It will provide a mediation for properties from ThreeMeshUI.Text to THREE.Material
+	 * @see {MSDFFontMaterialUtils.mediation}
+	 * @returns {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+	 */
+	static get mediation() {
+
+		return MSDFFontMaterialUtils.mediation;
+
+	}
+
+	constructor( options = {} ) {
+
+		// ensure the proper depthPacking
+		options.depthPacking = RGBADepthPacking;
+		// three-mesh-ui font material requires
+		// some material options to be set as default
+		// in order to work properly
+		MSDFFontMaterialUtils.ensureMaterialOptions( options );
+		delete options['transparent'];
+
+		super( options );
+
+		// three-mesh-ui font material requires
+		// some webgl preprocessor to be set
+		// in order to work properly
+		MSDFFontMaterialUtils.ensureDefines( this );
+
+		// three-mesh-ui font material requires
+		// some userData properties to be set
+		// in order to work properly
+		MSDFFontMaterialUtils.ensureUserData( this, options );
+
+		// three-mesh-ui custom font material can be achieve
+		// by modifying the shader before its compilation
+		this.onBeforeCompile = shader => {
+
+			MSDFFontMaterialUtils.bindUniformsWithUserData( shader, this );
+			MSDFFontMaterialUtils.injectShaderChunks( shader );
+
+		}
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/materials/MSDFFontMaterial.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/materials/MSDFFontMaterial.js
new file mode 100644
index 0000000..8c5a82c
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/materials/MSDFFontMaterial.js
@@ -0,0 +1,173 @@
+import { ShaderMaterial, UniformsLib, Vector2 } from 'three';
+import MSDFFontMaterialUtils from '../utils/MSDFFontMaterialUtils';
+import { vertexShader, fragmentShader } from '../renderers/ShaderLib/msdf-fontmaterial.glsl';
+
+// JSDoc related import
+/* eslint-disable no-unused-vars */
+import { Material, Texture, Color } from 'three';
+/* eslint-enable no-unused-vars */
+
+export const ALPHA_TEST = 0.02;
+
+
+/**
+ * This material implements the msdf rendering shader
+ */
+export default class MSDFFontMaterial extends ShaderMaterial {
+
+	/**
+	 * This static method is mandatory for extending ThreeMeshUI.MSDFFontMaterial
+	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
+	 * @see {MSDFFontMaterialUtils.mediation}
+	 * @returns {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+	 */
+	static get mediation() {
+
+		return MSDFFontMaterialUtils.mediation;
+
+	}
+
+	constructor( materialOptions = {} ) {
+
+		super( {
+
+			uniforms: {
+				'glyphMap': { value: null }, // texture
+				'diffuse': { value: null }, // vec3
+				'opacity': { value: 1 },
+				'unitRange': { value: new Vector2(0,0) }, // vec2
+				'alphaTest': { value: ALPHA_TEST },
+
+				...UniformsLib.fog,
+			},
+			transparent: true,
+			clipping: true,
+			vertexShader,
+			fragmentShader,
+			extensions: {
+				derivatives: true
+			},
+		} );
+
+		// webgl preprocessor AlphaTest set by default
+		this.defines[ 'USE_ALPHATEST' ] = '';
+		this.needsUpdate = true;
+
+		// initiate additional properties
+		this.noRGSS = materialOptions.noRGSS || false;
+
+		// Set fog as default
+		this.fog = false;
+	}
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {Color}
+	 */
+	get color() {
+
+		return this.uniforms.diffuse.value;
+
+	}
+
+	/**
+	 *
+	 * @param {Color} v
+	 */
+	set color( v ) {
+
+		this.uniforms.diffuse.value = v;
+
+	}
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set opacity( v ) {
+
+		if( this.uniforms )
+			this.uniforms.opacity.value = v;
+
+	}
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {number}
+	 */
+	get opacity() {
+
+		return this.uniforms.opacity.value;
+
+	}
+
+
+
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {Vector2}
+	 */
+	get unitRange() {
+
+		return this.uniforms.unitRange.value;
+
+	}
+
+	/**
+	 *
+	 * @param {Vector2} v
+	 */
+	set unitRange( v ) {
+
+		this.uniforms.unitRange.value.copy( v );
+
+	}
+
+	/**
+	 *
+	 * @returns {Texture}
+	 */
+	get glyphMap() {
+
+		return this.uniforms.glyphMap.value;
+
+	}
+
+	/**
+	 *
+	 * @param {Texture} v
+	 */
+	set glyphMap( v ) {
+
+		this.uniforms.glyphMap.value = v;
+
+	}
+
+	/**
+	 * Is this a default fontMaterial instance
+	 * @returns {boolean}
+	 */
+	get isDefault() {
+
+		return this.constructor === MSDFFontMaterial;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get alphaTest() {
+		return this.uniforms.alphaTest.value;
+	}
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set alphaTest( v ) {
+		this.uniforms.alphaTest.value = v;
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.js
new file mode 100644
index 0000000..4c23ca3
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.js
@@ -0,0 +1,45 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+	float alpha;
+#ifdef NO_RGSS
+
+	alpha = tap( vUvG );
+
+#else
+
+	// shader-based supersampling based on https://bgolus.medium.com/sharper-mipmapping-using-shader-based-supersampling-ed7aadb47bec
+	// per pixel partial derivatives
+	vec2 dx = dFdx(vUvG);
+	vec2 dy = dFdy(vUvG);
+	// rotated grid uv offsets
+	vec2 uvOffsets = vec2(0.125, 0.375);
+	vec2 offsetUV = vec2(0.0, 0.0);
+	// supersampled using 2x2 rotated grid
+	alpha = 0.0;
+	offsetUV.xy = vUvG + uvOffsets.x * dx + uvOffsets.y * dy;
+	alpha += tap(offsetUV);
+	offsetUV.xy = vUvG - uvOffsets.x * dx - uvOffsets.y * dy;
+	alpha += tap(offsetUV);
+	offsetUV.xy = vUvG + uvOffsets.y * dx - uvOffsets.x * dy;
+	alpha += tap(offsetUV);
+	offsetUV.xy = vUvG - uvOffsets.y * dx + uvOffsets.x * dy;
+	alpha += tap(offsetUV);
+	alpha *= 0.25;
+
+#endif
+
+	alpha = clamp( alpha, 0.0, 1.0 );
+
+#ifdef INVERT_ALPHA
+
+	alpha = 1.0 - alpha;
+
+#endif
+
+	diffuseColor.a *= alpha;
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.js
new file mode 100644
index 0000000..8ee9dfb
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.js
@@ -0,0 +1,30 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+varying vec2 vUvG;
+uniform sampler2D glyphMap;
+uniform vec2 unitRange;
+// functions from the original msdf repo:
+// https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field
+float median(float r, float g, float b) {
+	return max(min(r, g), min(max(r, g), b));
+}
+float screenPxRange() {
+
+	// precomputed unitRange as recommended by Chlumsky
+	// vec2 unitRange = vec2(pxRange)/vec2(textureSize(glyphMap, 0));
+	vec2 screenTexSize = vec2(1.0)/fwidth(vUvG);
+	return max(0.5*dot(unitRange, screenTexSize), 1.0);
+}
+float tap(vec2 offsetUV) {
+	vec3 msd = texture( glyphMap, offsetUV ).rgb;
+	float sd = median(msd.r, msd.g, msd.b);
+	float screenPxDistance = screenPxRange() * (sd - 0.5);
+	float alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);
+	return alpha;
+}
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.js
new file mode 100644
index 0000000..54937de
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.js
@@ -0,0 +1,10 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+attribute vec2 uvG;
+varying vec2 vUvG;
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.js
new file mode 100644
index 0000000..7bfcecc
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.js
@@ -0,0 +1,9 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */ `
+vUvG = uvG;
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.js
new file mode 100644
index 0000000..ee14b4d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.js
@@ -0,0 +1,9 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+gl_Position.z -= 0.00001;
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderLib/msdf-fontmaterial.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderLib/msdf-fontmaterial.glsl.js
new file mode 100644
index 0000000..112dd8c
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/renderers/ShaderLib/msdf-fontmaterial.glsl.js
@@ -0,0 +1,50 @@
+import msdfAlphaglyphParsVertexGlsl from '../ShaderChunks/msdf-alphaglyph.pars.vertex.glsl';
+import msdfOffsetglyphVertexGlsl from '../ShaderChunks/msdf-offsetglyph.vertex.glsl';
+import msdfAlphaglyphParsFragmentGlsl from '../ShaderChunks/msdf-alphaglyph.pars.fragment.glsl';
+import msdfAlphaglyphFragmentGlsl from '../ShaderChunks/msdf-alphaglyph.fragment.glsl';
+import msdfAlphaglyphVertexGlsl from '../ShaderChunks/msdf-alphaglyph.vertex.glsl';
+
+/**
+ *
+ * @type {string}
+ */
+export const vertexShader = /* glsl */`
+${msdfAlphaglyphParsVertexGlsl}
+
+#include <fog_pars_vertex>
+#include <clipping_planes_pars_vertex>
+
+void main() {
+	${msdfAlphaglyphVertexGlsl}
+	#include <begin_vertex>
+	#include <project_vertex>
+	${msdfOffsetglyphVertexGlsl}
+	#include <clipping_planes_vertex>
+	#include <fog_vertex>
+}
+`
+
+/**
+ *
+ * @type {string}
+ */
+export const fragmentShader = /* glsl */`
+uniform vec3 diffuse;
+uniform float opacity;
+${msdfAlphaglyphParsFragmentGlsl}
+#include <alphatest_pars_fragment>
+#include <fog_pars_fragment>
+#include <clipping_planes_pars_fragment>
+void main() {
+	// instead of <color_fragment> : vec4 diffuseColor
+	vec4 diffuseColor = vec4( diffuse, opacity );
+	${msdfAlphaglyphFragmentGlsl}
+	#include <alphatest_fragment>
+	// instead of <output_fragment>
+	gl_FragColor = diffuseColor;
+
+
+	#include <clipping_planes_fragment>
+	#include <fog_fragment>
+}
+`
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/utils/MSDFFontMaterialUtils.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/utils/MSDFFontMaterialUtils.js
new file mode 100644
index 0000000..2b93456
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/msdf/utils/MSDFFontMaterialUtils.js
@@ -0,0 +1,264 @@
+import msdfAlphaglyphParsVertexGlsl from '../renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl';
+import msdfAlphaglyphVertexGlsl from '../renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl';
+import msdfOffsetglyphVertexGlsl from '../renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl';
+import msdfAlphaglyphParsFragmentGlsl from '../renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl';
+import msdfAlphaglyphFragmentGlsl from '../renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl';
+import { Vector2 } from 'three';
+
+/* eslint-disable no-unused-vars */
+import { Material, ShaderMaterial } from 'three';
+import { alphaTestTransformer, toPreprocessorTriggerTransformer } from '../../../utils/mediator/transformers/MaterialTransformers';
+/* eslint-enable no-unused-vars */
+
+/**
+ * MSDFFontMaterialUtils provides utilities
+ * for customizing other threejs or custom materials
+ * into a three-mesh-ui MSDFFontMaterial
+ */
+export default class MSDFFontMaterialUtils {
+
+	/**
+	 * Alter a material options with required fontMaterial options and or default values
+	 * @param {Object.<string,any>} materialOptions
+	 */
+	static ensureMaterialOptions( materialOptions ) {
+		materialOptions.transparent = true;
+		materialOptions.alphaTest = materialOptions.alphaTest || 0.02;
+	}
+
+	/**
+	 * As three-mesh-ui FontMaterial relies on webgl preprocessors,
+	 * lets force the material to have a proper defines object
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 */
+	static ensureDefines( threeMaterial ) {
+		if ( !threeMaterial.defines ) {
+			threeMaterial.defines = {};
+		}
+	}
+
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 * @param {Object.<string,any>} materialOptions
+	 */
+	static ensureUserData( threeMaterial, materialOptions ) {
+		threeMaterial.userData.glyphMap = { value: materialOptions.glyphMap };
+		threeMaterial.userData.unitRange = { value: new Vector2() };
+	}
+
+	/**
+	 *
+	 * @param {any} shader
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 */
+	static bindUniformsWithUserData( shader, threeMaterial ) {
+
+		shader.uniforms.glyphMap = threeMaterial.userData.glyphMap;
+		shader.uniforms.unitRange = threeMaterial.userData.unitRange;
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectShaderChunks( shader ) {
+		MSDFFontMaterialUtils.injectVertexShaderChunks( shader );
+		MSDFFontMaterialUtils.injectFragmentShaderChunks( shader );
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectVertexShaderChunks( shader ) {
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_pars_vertex>',
+			'#include <uv_pars_vertex>\n' + msdfAlphaglyphParsVertexGlsl
+		);
+
+		// vertex chunks
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_vertex>',
+			'#include <uv_vertex>\n' + msdfAlphaglyphVertexGlsl
+		)
+
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <project_vertex>',
+			'#include <project_vertex>\n' + msdfOffsetglyphVertexGlsl
+		)
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectFragmentShaderChunks( shader ) {
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <uv_pars_fragment>',
+			'#include <uv_pars_fragment>\n' + msdfAlphaglyphParsFragmentGlsl
+		)
+
+		// fragment chunks
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <alphamap_fragment>',
+			'#include <alphamap_fragment>\n' + msdfAlphaglyphFragmentGlsl
+		)
+	}
+
+
+
+	/**
+	 * Mix a threejs Material into a three-mesh-ui FontMaterial
+	 * @param {typeof Material|ShaderMaterial} materialClass
+	 * @returns {typeof Material|ShaderMaterial}
+	 */
+	static from( materialClass ) {
+
+		return class extends materialClass {
+
+			/**
+			 *
+			 * @abstract
+			 * @returns {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+			 */
+			static get fontMaterialProperties() {
+				return MSDFFontMaterialUtils.mediation;
+			}
+
+			constructor( options = {} ) {
+
+				// same as FontMaterial extension
+				MSDFFontMaterialUtils.ensureMaterialOptions( options );
+				super( options );
+				MSDFFontMaterialUtils.ensureDefines( this );
+				MSDFFontMaterialUtils.ensureUserData( this, options );
+
+				// defines two internal properties in order to kept
+				// user allowed to use onBeforeCompile for its own stuff
+				// 1- store an callback for user
+				/* eslint-disable no-unused-vars */
+				this._userDefinedOnBeforeCompile = (shader) => {};
+				/* eslint-enable no-unused-vars */
+				// 2- store the cumulative callback
+				this._onBeforeCompile = this._cumulativeOnBeforeCompile;
+			}
+
+			////////////////////////////
+			// OnBeforeCompile Override
+			///////////////////////////
+
+			/**
+			 * Override the setter of onBeforeCompile in order to never overwrite
+			 * the three-mesh-ui fontMaterial onBeforeCompile
+			 * @param { (shader:any) => void }fct
+			 */
+			set onBeforeCompile( fct ) {
+				// only store it as userDefinedCallback
+				this._userDefinedOnBeforeCompile = fct;
+			}
+
+			/**
+			 * Override the getter of onBeforeCompile in order to
+			 * always deliver the cumulativeCallbacks to threejs
+			 * @returns { (shader:any) => void }
+			 */
+			get onBeforeCompile() {
+				return this._onBeforeCompile;
+			}
+
+			/**
+			 *
+			 * On before compile that first run three-mesh-ui fontMaterial
+			 * then user defined onBeforeCompile
+			 * @param shader
+			 * @private
+			 */
+			_cumulativeOnBeforeCompile = ( shader ) => {
+				// bind uniforms
+				MSDFFontMaterialUtils.bindUniformsWithUserData( shader, this );
+
+				// inject both vertex and fragment shaders
+				MSDFFontMaterialUtils.injectShaderChunks( shader );
+
+				// user defined additional onBeforeCompile
+				this._userDefinedOnBeforeCompile( shader );
+			}
+		}
+	}
+
+	/**
+	 *
+	 * @returns {Object<{m: string, t?: (function((Material|ShaderMaterial), string, *): void)}>}
+	 */
+	static get mediation() {
+
+		return mediationDefinitions;
+
+	}
+
+}
+
+/**
+ * Convert a fontVariant to a material glyphMap texture
+ * @type {(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void }
+ * @private
+ */
+const _fontToGlyphMapTransformer = function( fontMaterial, materialProperty, value) {
+
+	const texture = value ? value.texture : null;
+	const unitRange = value ? value.unitRange : new Vector2();
+
+	if( fontMaterial[materialProperty] !== undefined ) {
+
+		fontMaterial.glyphMap = texture;
+		fontMaterial.unitRange = unitRange;
+		return;
+	}
+
+	if( fontMaterial.userData && fontMaterial.userData.glyphMap ) {
+
+		fontMaterial.userData.glyphMap.value = texture;
+		fontMaterial.userData.unitRange.value = unitRange;
+
+	}
+
+}
+
+/**
+ *
+ * @type {(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void }
+ * @private
+ */
+const _RGSSTransformer = function( fontMaterial, materialProperty, value){
+
+	if ( value && value !== 'antialiased' ) {
+
+		fontMaterial.defines['NO_RGSS'] = '';
+
+	} else {
+
+		delete fontMaterial.defines['NO_RGSS'];
+
+	}
+
+	fontMaterial.needsUpdate = true;
+
+}
+
+
+/**
+ *
+ * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+ */
+const mediationDefinitions = {
+	clippingPlanes: { m: 'clippingPlanes' },
+	color: { m: 'color' },
+	fog: { m: 'fog' },
+	font: { m: "glyphMap", t: _fontToGlyphMapTransformer },
+	fontAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+	fontSide: { m: 'side' },
+	fontOpacity: { m: 'opacity' },
+	fontSmooth: { m: 'NO_RGSS', t: _RGSSTransformer },
+	invertAlpha: { m: 'INVERT_ALPHA', t: toPreprocessorTriggerTransformer },
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/font/utils/FontUtils.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/utils/FontUtils.js
new file mode 100644
index 0000000..c5fa9ea
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/font/utils/FontUtils.js
@@ -0,0 +1,23 @@
+const FONT_WEIGHT_LOOK_UP_TABLE = {
+	'light'		: '100',
+	'normal'	: '400',
+	'bold' 		: '700',
+	'bolder' 	: '900'
+}
+
+/**
+ *
+ * @param weight
+ * @return {string}
+ */
+export function uniformizeFontWeight( weight ) {
+
+	if( !isNaN(weight) ) return weight.toString();
+
+	const converted = FONT_WEIGHT_LOOK_UP_TABLE[weight];
+
+	if( converted ) return converted;
+
+	return weight;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/Frame.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/Frame.js
new file mode 100644
index 0000000..717a336
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/Frame.js
@@ -0,0 +1,241 @@
+import { BufferAttribute, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from 'three';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+let _hiddenMaterial;
+
+/**
+ * Returns a basic plane mesh.
+ */
+export default class Frame extends Mesh {
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( element) {
+
+		const slice = element.slice;
+		const slices = {};
+
+		let w =1, h=1;
+
+		if( slice ) {
+			const segments = 1;
+
+			w = slice.width ? slice.width : 1;
+			h = slice.height ? slice.height : 1;
+
+			if ( slice.top ) {
+				if ( slice.left ) {
+					const topLeftGeometry = new PlaneGeometry( slice.left*w, slice.top*h, segments, segments );
+					_sliceUV( topLeftGeometry, 0, slice.left, 1 - slice.top, 1 );
+					topLeftGeometry.translate( slice.left * w / 2, -slice.top*h / 2, 0 );
+					slices.topLeft = topLeftGeometry;
+				}
+
+				const topGeometry = new PlaneGeometry( 1, slice.top*h, segments, segments );
+				_sliceUV( topGeometry, slice.left, 1 - slice.right, 1 - slice.top, 1 );
+				topGeometry.translate( 0, -slice.top*h / 2, 0 );
+				slices.top = topGeometry;
+
+				if ( slice.right ) {
+					const topRightGeometry = new PlaneGeometry( slice.right*w, slice.top*h, segments, segments );
+					_sliceUV( topRightGeometry, 1 - slice.right, 1, 1 - slice.top, 1 );
+					topRightGeometry.translate( -slice.right*w / 2, -slice.top*h / 2, 0 );
+					slices.topRight = topRightGeometry;
+				}
+
+			}
+
+			if ( slice.left ) {
+				const leftGeometry = new PlaneGeometry( slice.left*w, 1, segments, segments )
+				_sliceUV( leftGeometry, 0, slice.left, slice.bottom, 1 - slice.top );
+				leftGeometry.translate( slice.left * w / 2, 0, 0 );
+				slices.left = leftGeometry;
+			}
+
+			const center = new PlaneGeometry( 1, 1, segments, segments );
+			_sliceUV( center, slice.left, 1 - slice.right, slice.bottom, 1 - slice.top );
+			// center.translate( 0,0,-0.1)
+			slices.middle = center;
+
+			if ( slice.right ) {
+				const rightGeometry = new PlaneGeometry( slice.right*w, 1, segments, segments );
+				_sliceUV( rightGeometry, 1 - slice.right, 1, slice.bottom, 1 - slice.top );
+				rightGeometry.translate( -slice.right * w/ 2, 0, 0 );
+				slices.right = rightGeometry;
+			}
+
+			if ( slice.bottom ) {
+
+				if ( slice.left ) {
+					const bottomLeftGeometry = new PlaneGeometry( slice.left * w, slice.bottom * h, segments, segments );
+					_sliceUV( bottomLeftGeometry, 0, slice.left, 0, slice.bottom );
+					bottomLeftGeometry.translate( slice.left * w / 2, slice.bottom * h / 2, 0 )
+					slices.bottomLeft = bottomLeftGeometry;
+				}
+
+				const bottomGeometry = new PlaneGeometry( 1, slice.bottom * h, segments, segments );
+				_sliceUV( bottomGeometry, slice.left, 1 - slice.right, 0, slice.bottom );
+				bottomGeometry.translate( 0, slice.bottom * h / 2, 0 )
+				slices.bottom = bottomGeometry;
+
+				if ( slice.right ) {
+					const bottomRightGeometry = new PlaneGeometry( slice.right * w, slice.bottom * h, segments, segments );
+					_sliceUV( bottomRightGeometry, 1 - slice.right, 1, 0, slice.bottom );
+					bottomRightGeometry.translate( -slice.right * w / 2, slice.bottom * h / 2, 0 )
+					slices.bottomRight = bottomRightGeometry;
+				}
+			}
+		}
+
+		let material = element.backgroundMaterial;
+		if( slice ){
+			if( !_hiddenMaterial ) _hiddenMaterial = new MeshBasicMaterial({alphaTest:1.1});
+			material = _hiddenMaterial;
+		}
+
+
+		const geometry = new PlaneGeometry( 1, 1, element._segments.value, element._segments.value );
+
+		// Add additional uv for borders computations by copying initial uv
+		const uvB = new BufferAttribute( new Float32Array( geometry.getAttribute('uv').array ), 2);
+		geometry.setAttribute('uvB', uvB ).name = 'uvB';
+
+		super( geometry, material );
+		this.name = 'UIBackground';
+
+
+		if( slice ) {
+
+			this.slice = slice;
+			this.sliceSize = new Vector3( 1 - ( slice.left + slice.right ), 1 - ( slice.bottom + slice.top ), 1 )
+			this.sliceScale = new Vector3(w,h,1);
+
+			// build slice meshes
+			for ( const sliceSide in slices ) {
+
+				const slice = new Mesh( slices[ sliceSide ], element.backgroundMaterial );
+				this.add( slice );
+				slices[ sliceSide ] = slice;
+
+			}
+
+			this.updateScale = this.updateScaleSlice;
+
+			this.slices = slices;
+		}
+
+	}
+
+	updateScale(){}
+
+	updateScaleSlice(){
+
+		const s = new Vector3(1,1,1);
+		if( this.scale.x < (this.slice.left+this.slice.right)* this.sliceScale.x ){
+			s.x = this.scale.x / ((this.slice.left+this.slice.right) * this.sliceScale.x);
+		}
+
+		if( this.scale.y < (this.slice.bottom+this.slice.top)* this.sliceScale.y ){
+			s.y = this.scale.y / ((this.slice.bottom+this.slice.top) * this.sliceScale.y);
+		}
+
+		for ( const sliceSide in this.slices ) {
+			const slice = this.slices[sliceSide];
+
+			// Invert size to have constant
+			slice.scale.set( 1/this.scale.x, 1/this.scale.y, this.scale.y )
+
+			const offset = _slicePositions[sliceSide];
+			for ( const offsetAxis in offset ) {
+				slice.position[offsetAxis] = this.scale[offsetAxis] * offset[offsetAxis] * slice.scale[offsetAxis];
+			}
+
+			const scale = _sliceScales[sliceSide];
+			if( scale ) {
+
+				// offset
+				if( scale.x ){
+					slice.position.x = this.sliceScale.x * 0.5 * (this.slice.left - this.slice.right) * (1/this.scale.x);
+				}
+
+				if( scale.y ){
+					slice.position.y = this.sliceScale.y *0.5 * (this.slice.bottom - this.slice.top) * (1/this.scale.y);
+				}
+
+				for ( const scaleAxis in scale ) {
+
+					const natural = this.scale[scaleAxis]-((1-this.sliceSize[scaleAxis])*this.sliceScale[scaleAxis])
+					slice.scale[ scaleAxis ] = Math.max(0,natural * (1/this.scale[scaleAxis]) ) ;
+
+				}
+			}
+		}
+
+		if( s.x !== 1){
+			this.slices.left.scale.x *= s.x;
+			this.slices.topLeft.scale.x *= s.x;
+			this.slices.bottomLeft.scale.x *= s.x;
+			this.slices.right.scale.x *= s.x;
+			this.slices.topRight.scale.x *= s.x;
+			this.slices.bottomRight.scale.x *= s.x;
+		}
+
+		if( s.y !== 1){
+			this.slices.top.scale.y *= s.y;
+			this.slices.topLeft.scale.y *= s.y;
+			this.slices.topRight.scale.y *= s.y;
+			this.slices.bottom.scale.y *= s.y;
+			this.slices.bottomLeft.scale.y *= s.y;
+			this.slices.bottomRight.scale.y *= s.y;
+		}
+
+	}
+}
+
+
+const _slicePositions = {
+	topLeft: {x:-0.5,y:0.5},
+	top: {y:0.5},
+	topRight: {x:0.5,y:0.5},
+	left: {x:-0.5},
+	right: {x:0.5},
+	bottomLeft: {x:-0.5,y:-0.5},
+	bottom: {y:-0.5},
+	bottomRight : {x:0.5,y:-0.5}
+}
+
+const _sliceScales = {
+	top: {x:1},
+	left: {y:1},
+	right: {y:1},
+	bottom: {x:1},
+	middle:{x:1,y:1}
+}
+
+function _sliceUV( geometry, uMin, uMax, vMin, vMax ){
+
+	const uLength = uMax-uMin;
+	const vLength = vMax-vMin;
+
+	const uvAttribute = geometry.attributes.uv;
+
+	for ( let i = 0; i < uvAttribute.count; i ++ ) {
+
+		const u = uvAttribute.getX( i );
+		const v = uvAttribute.getY( i );
+
+		uvAttribute.setXY( i, uMin + u*uLength, vMin + v*vLength );
+
+	}
+
+	// Add additional uv for borders computations by copying initial uv
+	const uvB = new BufferAttribute( new Float32Array( geometry.getAttribute('uv').array ), 2);
+	geometry.setAttribute('uvB', uvB ).name = 'uvB';
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/materials/FrameDepthMaterial.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/materials/FrameDepthMaterial.js
new file mode 100644
index 0000000..7b3479d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/materials/FrameDepthMaterial.js
@@ -0,0 +1,53 @@
+import { MeshDepthMaterial, RGBADepthPacking } from 'three';
+import FrameMaterialUtils from '../utils/FrameMaterialUtils';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { ShaderMaterial } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class FrameDepthMaterial extends MeshDepthMaterial {
+
+
+	/**
+	 * This static method is mandatory for extending ThreeMeshUI.FrameMaterial
+	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
+	 * @see {FrameMaterialUtils.mediation}
+	 * @returns {Object.<{m:string, t?:(frameMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+	 */
+	static get mediation() {
+
+		return FrameMaterialUtils.mediation;
+
+	}
+
+	constructor( options = {} ) {
+
+		// ensure the proper depthPacking
+		options.depthPacking = RGBADepthPacking;
+
+		//ensure options
+		FrameMaterialUtils.ensureMaterialOptions( options );
+		delete options['transparent'];
+
+		super( options );
+
+		FrameMaterialUtils.ensureDefines( this );
+
+		FrameMaterialUtils.ensureUserData( this, options );
+
+		// override the shaders
+		this.onBeforeCompile = shader => {
+
+			// links this material userDatas with its uniforms
+			FrameMaterialUtils.bindUniformsWithUserData( shader, this );
+
+			// inject ThreeMeshUI shaderChunks to provide msdf rendering
+			FrameMaterialUtils.injectShaderChunks( shader );
+
+		}
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/materials/FrameMaterial.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/materials/FrameMaterial.js
new file mode 100644
index 0000000..174ee2b
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/materials/FrameMaterial.js
@@ -0,0 +1,149 @@
+import { Color, FrontSide, ShaderMaterial, UniformsLib, Vector2, Vector3, Vector4 } from 'three';
+import { fragmentShader, vertexShader } from '../renderers/ShaderLib/framematerial.glsl';
+import FrameMaterialUtils from '../utils/FrameMaterialUtils';
+
+export default class FrameMaterial extends ShaderMaterial {
+
+
+	/**
+	 * This static method is mandatory for extending ThreeMeshUI.FrameMaterial
+	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
+	 * @see {FrameMaterialUtils.mediation}
+	 * @returns {Object.<{m:string, t?:(frameMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+	 */
+	static get mediation() {
+
+		return FrameMaterialUtils.mediation;
+
+	}
+
+	constructor() {
+		super ( {
+			uniforms: {
+				alphaTest: { value: 0.02 },
+				map: { value: null },
+				diffuse: { value: new Color(0xffffff) },
+				opacity: { value: 1.0 },
+				borderColor: { value: new Color(0x000000) },
+				borderOpacity: { value: 0 },
+				borderRadius: { value: new Vector4(0,0,0,0) },
+				// Corners for customized radius not all starting on center [0.5,0.5];
+				// Corners will be generated from borderRadiuses
+				cornerTL: { value : new Vector2(0,1) },
+				cornerTR: { value : new Vector2(1,1) },
+				cornerBR: { value : new Vector2(1,0) },
+				cornerBL: { value : new Vector2(0,0) },
+				borderWidth: { value: new Vector4(0,0,0,0) },
+
+				frameSize: { value: new Vector3( 1, 1, 1 ) },
+				textureSize: { value: new Vector2( 1, 1 ) },
+
+				...UniformsLib.fog,
+			},
+			side: FrontSide,
+			transparent: true,
+			clipping: true,
+			vertexShader: vertexShader,
+			fragmentShader: fragmentShader,
+			extensions: {
+				derivatives: true
+			}
+		} );
+
+		// webgl preprocessor AlphaTest set by default
+		this.defines[ 'USE_ALPHATEST' ] = '';
+		// Set fog as default
+		this.fog = false;
+
+		this.needsUpdate = true;
+	}
+
+	set map( value ) {
+
+		this.uniforms.map.value = value;
+		if( !value ) {
+
+			if( this.defines['USE_UV'] !== undefined ) {
+
+				delete this.defines['USE_UV'];
+				this.needsUpdate = true;
+
+			}
+
+		} else if( this.defines['USE_UV'] === undefined ) {
+
+			this.defines['USE_UV'] = '';
+			this.needsUpdate = true;
+
+		}
+
+		this.needsUpdate = true;
+
+	}
+
+	get map(){
+		return this.uniforms.map.value;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get alphaTest() {
+
+		return this.uniforms.alphaTest.value;
+
+	}
+
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set alphaTest( v ) {
+		this.uniforms.alphaTest.value = v;
+	}
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set opacity( v ) {
+
+		if( this.uniforms )
+			this.uniforms.opacity.value = v;
+
+	}
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {number}
+	 */
+	get opacity() {
+
+		return this.uniforms.opacity.value;
+
+	}
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {Color}
+	 */
+	get color() {
+
+		return this.uniforms.diffuse.value;
+
+	}
+
+	/**
+	 *
+	 * @param {Color} v
+	 */
+	set color( v ) {
+
+		this.uniforms.diffuse.value = v;
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-background.fragment.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-background.fragment.glsl.js
new file mode 100644
index 0000000..5bb9229
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-background.fragment.glsl.js
@@ -0,0 +1,14 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+#ifdef USE_MAP
+
+	vec4 textureSample = sampleTexture();
+	diffuseColor *= textureSample;
+
+#endif
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.js
new file mode 100644
index 0000000..b8656b0
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.js
@@ -0,0 +1,54 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+
+#ifdef USE_MAP
+
+vec4 sampleTexture() {
+
+	vec2 uv = vUv;
+
+	// default stretch
+	#if BACKGROUND_MAPPING != 0
+
+	float textureRatio = textureSize.x / textureSize.y;
+	float panelRatio = frameSize.x / frameSize.y;
+	float ratio = panelRatio / textureRatio;
+	float ratio2 = textureRatio / panelRatio;
+
+		// contain
+		#if BACKGROUND_MAPPING == 1
+		if ( textureRatio < panelRatio ) { // repeat on X
+			float newX = uv.x * ratio;
+			newX += 0.5 - 0.5 * ratio;
+			uv.x = newX;
+		} else { // repeat on Y
+			float newY = uv.y * ratio2;
+			newY += 0.5 - 0.5 * ratio2;
+			uv.y = newY;
+		}
+		#else
+		// cover
+		if ( textureRatio < panelRatio ) { // stretch on Y
+			float newY = uv.y * ratio2;
+			newY += 0.5 - 0.5 * ratio2;
+			uv.y = newY;
+		} else { // stretch on X
+			float newX = uv.x * ratio;
+			newX += 0.5 - 0.5 * ratio;
+			uv.x = newX;
+		}
+
+		#endif
+
+	#endif
+
+	return texture2D( map, uv );
+
+}
+#endif
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.fragment.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.fragment.glsl.js
new file mode 100644
index 0000000..49986db
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.fragment.glsl.js
@@ -0,0 +1,133 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+
+vec4 borderColor = vec4( borderColor, borderOpacity );
+
+// This could be tweak to produce more smoothing
+float mult = 1.0;
+
+// Step 1 ----------------------------------------------
+// Draw the four borders ( top - right - bottom - left )
+// Without worrying about radiuses ( Straight boorders )
+
+// Top
+float topBorderUVy = 1.0 - borderWidth.x;
+if( borderWidth.x > 0.0 && vUvB.y > topBorderUVy )
+{
+
+	float w = fwidth( 1.0 - vUvB.y ) * mult;
+	float step = smoothstep( topBorderUVy , topBorderUVy + w , vUvB.y );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+
+}
+
+// Left
+float leftBorderUVx = borderWidth.w;
+if( borderWidth.w > 0.0 && vUvB.x < leftBorderUVx )
+{
+
+	float w = fwidth( vUvB.x ) * mult ;
+	float step = smoothstep( leftBorderUVx , leftBorderUVx - w , vUvB.x );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+
+}
+
+// Bottom
+float bottomBorderUVy = borderWidth.z;
+if( borderWidth.z > 0.0 && vUvB.y < bottomBorderUVy )
+{
+	float w = fwidth( vUvB.y ) * mult;
+	float step = smoothstep( bottomBorderUVy , bottomBorderUVy - w , vUvB.y );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+}
+
+// Right
+float rightBorderUVx = 1.0 - borderWidth.y;
+if( borderWidth.y > 0.0 && vUvB.x > rightBorderUVx )
+{
+	float w = fwidth( 1.0 - vUvB.x ) * mult;
+	float step = smoothstep( rightBorderUVx , rightBorderUVx + w , vUvB.x );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+}
+
+
+// Step 2 ----------------------------------------------
+// Process each corners ( topLeft, topRight, bottomRight, bottomLeft )
+// To transparentize outside radiuses
+// To draw ellipse border on the corner
+
+
+// Top Left corner
+if( vUvB.x < cornerTL.x && vUvB.y > cornerTL.y ) {
+
+		// Only draw border if width is set
+		if( borderWidth.w + borderWidth.x > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerTL, cornerTL.x - borderWidth.w,  ( 1.0 - cornerTL.y ) - borderWidth.x );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+		// Then then radius
+		float radiusFactor = getEllipticFactor( vUvB, cornerTL, cornerTL.x, 1.0 - cornerTL.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+// Bottom Left
+if( vUvB.x < cornerBL.x && vUvB.y < cornerBL.y ) {
+
+		if( borderWidth.w + borderWidth.z > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerBL, cornerBL.x - borderWidth.w,  cornerBL.y - borderWidth.z );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+
+		float radiusFactor = getEllipticFactor( vUvB, cornerBL, cornerBL.x, cornerBL.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+// Top Right
+if( vUvB.x > cornerTR.x && vUvB.y > cornerTR.y ) {
+
+		if( borderWidth.y + borderWidth.x > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerTR, ( 1.0 - cornerTR.x ) - borderWidth.y,  ( 1.0 - cornerTR.y ) - borderWidth.x );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+		float radiusFactor = getEllipticFactor( vUvB, cornerTR, 1.0 - cornerTR.x, 1.0 - cornerTR.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+// Bottom Right
+if( vUvB.x > cornerBR.x && vUvB.y < cornerBR.y ) {
+
+		if( borderWidth.y + borderWidth.z > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerBR, ( 1.0 - cornerBR.x ) - borderWidth.y,  cornerBR.y - borderWidth.z );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+		float radiusFactor = getEllipticFactor( vUvB, cornerBR, 1.0 - cornerBR.x, cornerBR.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.js
new file mode 100644
index 0000000..15bc498
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.js
@@ -0,0 +1,35 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+
+// borders sequences are : x:TOP, y:RIGHT, z:BOTTOM, w:LEFT
+uniform vec4 borderWidth;
+uniform vec3 borderColor;
+uniform float borderOpacity;
+uniform vec4 borderRadius;
+
+uniform vec2 cornerTL;
+uniform vec2 cornerTR;
+uniform vec2 cornerBR;
+uniform vec2 cornerBL;
+
+varying vec2 vUvB;
+
+float getEllipticFactor( vec2 uv, vec2 center, float radiusX, float radiusY )
+{
+
+		float edx = uv.x - center.x;
+		float edy = uv.y - center.y;
+
+		float ddx = (edx * edx) / (radiusX * radiusX);
+		float ddy = (edy * edy) / (radiusY * radiusY);
+
+		return ddx + ddy;
+
+}
+
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.js
new file mode 100644
index 0000000..40eeff2
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.js
@@ -0,0 +1,13 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+
+// FrameBorder vertex pars
+attribute vec2 uvB;
+varying vec2 vUvB;
+
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.vertex.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.vertex.glsl.js
new file mode 100644
index 0000000..1623c74
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-border.vertex.glsl.js
@@ -0,0 +1,12 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+
+	// FrameBorder vertex shader
+	vUvB = uvB;
+
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.js
new file mode 100644
index 0000000..4878042
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.js
@@ -0,0 +1,13 @@
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+
+// To be removed - required for both border and background
+uniform vec3 frameSize;
+uniform vec2 textureSize;
+
+`;
+
+export default program;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderLib/framematerial.glsl.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderLib/framematerial.glsl.js
new file mode 100644
index 0000000..fb81a4d
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/renderers/ShaderLib/framematerial.glsl.js
@@ -0,0 +1,84 @@
+import frameBorderParsVertexGlsl from '../ShaderChunk/frame-border.pars.vertex.glsl';
+import frameBorderVertexGlsl from '../ShaderChunk/frame-border.vertex.glsl';
+import frameBackgroundParsFragmentGlsl from '../ShaderChunk/frame-background.pars.fragment.glsl';
+import frameBorderParsFragmentGlsl from '../ShaderChunk/frame-border.pars.fragment.glsl';
+import frameCommonParsFragmentGlsl from '../ShaderChunk/frame-common.pars.fragment.glsl';
+import frameBackgroundFragmentGlsl from '../ShaderChunk/frame-background.fragment.glsl';
+import frameBorderFragmentGlsl from '../ShaderChunk/frame-border.fragment.glsl';
+
+export const vertexShader = /* glsl */`
+// Would be automatic on three materials and from USE_UV
+#ifdef USE_MAP
+varying vec2 vUv;
+#endif
+
+${frameBorderParsVertexGlsl}
+
+#include <fog_pars_vertex>
+#include <clipping_planes_pars_vertex>
+
+void main() {
+
+	#ifdef USE_MAP
+	vUv = uv;
+	#endif
+
+	${frameBorderVertexGlsl}
+
+	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+	gl_Position = projectionMatrix * mvPosition;
+
+	#include <clipping_planes_vertex>
+	#include <fog_vertex>
+
+}
+`
+
+export const fragmentShader = /* glsl */`
+
+// Basic
+uniform vec3 diffuse;
+uniform float opacity;
+
+#ifdef USE_ALPHATEST
+	uniform float alphaTest;
+#endif
+
+${frameCommonParsFragmentGlsl}
+
+${frameBorderParsFragmentGlsl}
+
+
+#ifdef USE_MAP
+varying vec2 vUv;
+uniform sampler2D map;
+#endif
+
+${frameBackgroundParsFragmentGlsl}
+
+#include <fog_pars_fragment>
+#include <clipping_planes_pars_fragment>
+
+void main() {
+
+	vec4 diffuseColor = vec4( diffuse, opacity );
+
+	// map
+	${frameBackgroundFragmentGlsl}
+
+	${frameBorderFragmentGlsl}
+
+	#ifdef USE_ALPHATEST
+
+	if ( diffuseColor.a < alphaTest ) discard;
+
+	#endif
+
+	// output
+	gl_FragColor = diffuseColor;
+
+
+	#include <clipping_planes_fragment>
+	#include <fog_fragment>
+}
+`
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/utils/FrameMaterialUtils.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/utils/FrameMaterialUtils.js
new file mode 100644
index 0000000..39c03c6
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/frame/utils/FrameMaterialUtils.js
@@ -0,0 +1,214 @@
+import { Vector2, Vector3, Vector4 } from 'three';
+
+//JSDoc related import
+/* eslint-disable no-unused-vars */
+import { Material, ShaderMaterial } from 'three';
+import { alphaTestTransformer, asPreprocessorValueTransformer, uniformOrUserDataTransformer } from '../../utils/mediator/transformers/MaterialTransformers';
+import frameBorderParsVertexGlsl from '../renderers/ShaderChunk/frame-border.pars.vertex.glsl';
+import frameBorderVertexGlsl from '../renderers/ShaderChunk/frame-border.vertex.glsl';
+import frameBackgroundParsFragmentGlsl from '../renderers/ShaderChunk/frame-background.pars.fragment.glsl';
+import frameBorderParsFragmentGlsl from '../renderers/ShaderChunk/frame-border.pars.fragment.glsl';
+import frameCommonParsFragmentGlsl from '../renderers/ShaderChunk/frame-common.pars.fragment.glsl';
+import frameBackgroundFragmentGlsl from '../renderers/ShaderChunk/frame-background.fragment.glsl';
+import frameBorderFragmentGlsl from '../renderers/ShaderChunk/frame-border.fragment.glsl';
+/* eslint-enable no-unused-vars */
+
+
+export default class FrameMaterialUtils {
+
+
+
+	/**
+	 *
+	 * @returns {Object<{m: string, t?: (function((Material|ShaderMaterial), string, *): void)}>}
+	 */
+	static get mediation() {
+
+		return _mediationDefinitions;
+
+	}
+
+
+	/**
+	 * Alter a material options with required fontMaterial options and or default values
+	 * @param {Object.<string,any>} materialOptions
+	 */
+	static ensureMaterialOptions( materialOptions ) {
+		materialOptions.transparent = true;
+		materialOptions.alphaTest = materialOptions.alphaTest || 0.02;
+	}
+
+	/**
+	 * As three-mesh-ui FontMaterial relies on webgl preprocessors,
+	 * lets force the material to have a proper defines object
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 */
+	static ensureDefines( threeMaterial ) {
+		if ( !threeMaterial.defines ) {
+			threeMaterial.defines = {};
+		}
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 * @param {Object.<string,any>} materialOptions
+	 */
+	static ensureUserData( threeMaterial, materialOptions ) {
+		threeMaterial.userData.borderColor = { value: null };
+		threeMaterial.userData.borderRadius = { value: new Vector4(0,0,0,0) };
+		// Store corners based on borderRadiuses
+		threeMaterial.userData.cornerTL = { value : new Vector2(0,1) };
+		threeMaterial.userData.cornerTR = { value : new Vector2(1,1) };
+		threeMaterial.userData.cornerBR = { value : new Vector2(1,0) };
+		threeMaterial.userData.cornerBL = { value : new Vector2(0,0) };
+
+		threeMaterial.userData.borderWidth = { value: new Vector4(0,0,0,0) };
+		threeMaterial.userData.borderOpacity = { value: null };
+		threeMaterial.userData.frameSize = { value: new Vector3( 1, 1, 1 ) };
+		threeMaterial.userData.textureSize = { value: new Vector2( 1, 1 ) };
+
+	}
+	/* eslint-enable no-unused-vars */
+
+	/**
+	 *
+	 * @param {any} shader
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 */
+	static bindUniformsWithUserData( shader, threeMaterial ) {
+
+		shader.uniforms.borderColor = threeMaterial.userData.borderColor;
+		// Border radiuses and corners
+		shader.uniforms.borderRadius = threeMaterial.userData.borderRadius;
+		shader.uniforms.cornerTL = threeMaterial.userData.cornerTL;
+		shader.uniforms.cornerTR = threeMaterial.userData.cornerTR;
+		shader.uniforms.cornerBR = threeMaterial.userData.cornerBR;
+		shader.uniforms.cornerBL = threeMaterial.userData.cornerBL;
+
+		shader.uniforms.borderWidth = threeMaterial.userData.borderWidth;
+		shader.uniforms.borderOpacity = threeMaterial.userData.borderOpacity;
+		shader.uniforms.frameSize = threeMaterial.userData.frameSize;
+		shader.uniforms.textureSize = threeMaterial.userData.textureSize;
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectShaderChunks( shader ) {
+		FrameMaterialUtils.injectVertexShaderChunks( shader );
+		FrameMaterialUtils.injectFragmentShaderChunks( shader );
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectVertexShaderChunks( shader ) {
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_pars_vertex>',
+			'#include <uv_pars_vertex>\n' + frameBorderParsVertexGlsl
+		);
+
+		// vertex chunks
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_vertex>',
+			'#include <uv_vertex>\n' + frameBorderVertexGlsl
+		)
+
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectFragmentShaderChunks( shader ) {
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_pars_fragment>',
+			'#include <map_pars_fragment>\n' + frameBackgroundParsFragmentGlsl
+		)
+
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_pars_fragment>',
+			'#include <map_pars_fragment>\n' + frameBorderParsFragmentGlsl
+		)
+
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_pars_fragment>',
+			'#include <map_pars_fragment>\n' + frameCommonParsFragmentGlsl
+		)
+
+		// fragment chunks
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_fragment>',
+			frameBackgroundFragmentGlsl
+		)
+
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <alphamap_fragment>',
+			frameBorderFragmentGlsl+'\n#include <alphamap_fragment>'
+		)
+
+	}
+
+}
+
+/**
+ *
+ * @param target
+ * @param property
+ * @param value
+ * @private
+ */
+const _backgroundSizeTransformer = function( target, property, value ) {
+
+	value = ['stretch','contain','cover'].indexOf(value);
+	asPreprocessorValueTransformer(target, 'BACKGROUND_MAPPING', value);
+
+}
+
+// /**
+//  *
+//  * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+//  */
+// const _mediationDefinitions = {
+// 	alphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+// 	backgroundTexture: { m: 'map' },
+// 	backgroundColor: { m: 'color' },
+// 	backgroundOpacity: { m:'opacity' },
+// 	backgroundSize: { m: 'u_backgroundMapping', t: _backgroundSizeTransformer },
+// 	_borderWidthComponent: { m: 'borderWidth', t: _linkComponentOutput },
+// 	borderColor: { m: 'borderColor', t: uniformOrUserDataTransformer },
+// 	_borderRadiusComponent: { m: 'computedCorners', t: _linkCornersOutput },
+// 	borderOpacity: { m: 'borderOpacity', t: uniformOrUserDataTransformer },
+// 	size: { m: 'frameSize', t: uniformOrUserDataTransformer },
+// 	tSize: { m: 'textureSize', t: uniformOrUserDataTransformer }
+// }
+
+
+/**
+ * 7xx
+ * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+ */
+const _mediationDefinitions = {
+	clippingPlanes : {m: 'clippingPlanes'},
+	backgroundAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+	backgroundSide: { m: 'side' },
+	// backgroundTexture: { m: 'map' },
+	backgroundImage: { m: 'map'},
+	backgroundColor: { m: 'color' },
+	backgroundOpacity: { m:'opacity' },
+	backgroundSize: { m: 'computedBackgroundSize', t: _backgroundSizeTransformer },
+	borderWidth: { m: 'borderWidth', t: uniformOrUserDataTransformer },
+	borderColor: { m: 'borderColor', t: uniformOrUserDataTransformer },
+	cornerTL : { m: 'cornerTL', t: uniformOrUserDataTransformer },
+	cornerTR : { m: 'cornerTR', t: uniformOrUserDataTransformer },
+	cornerBR : { m: 'cornerBR', t: uniformOrUserDataTransformer },
+	cornerBL : { m: 'cornerBL', t: uniformOrUserDataTransformer },
+	borderOpacity: { m: 'borderOpacity', t: uniformOrUserDataTransformer },
+	fog: {m : "fog"},
+	size: { m: 'frameSize', t: uniformOrUserDataTransformer },
+	tSize: { m: 'textureSize', t: uniformOrUserDataTransformer }
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/renderers/shaders/ShaderChunkUI.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/renderers/shaders/ShaderChunkUI.js
new file mode 100644
index 0000000..18ba80c
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/renderers/shaders/ShaderChunkUI.js
@@ -0,0 +1,48 @@
+import msdfAlphaglyphVertexGlsl from '../../font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl';
+import msdfAlphaglyphFragmentGlsl from '../../font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl';
+import msdfAlphaglyphParsFragmentGlsl from '../../font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl';
+import msdfAlphaglyphParsVertexGlsl from '../../font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl';
+import msdfOffsetglyphVertexGlsl from '../../font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl';
+import frameBorderParsVertexGlsl from '../../frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl';
+import frameBorderVertexGlsl from '../../frame/renderers/ShaderChunk/frame-border.vertex.glsl';
+import frameBorderParsFragmentGlsl from '../../frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl';
+import frameBorderFragmentGlsl from '../../frame/renderers/ShaderChunk/frame-border.fragment.glsl';
+import frameCommonParsFragmentGlsl from '../../frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl';
+import frameBackgroundParsFragmentGlsl from '../../frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl';
+import frameBackgroundFragmentGlsl from '../../frame/renderers/ShaderChunk/frame-background.fragment.glsl';
+
+
+/* eslint-disable camelcase */
+
+/**
+ * @typedef {Object} ChunksUI
+ * @property msdf_alphaglyph_vertex {string}
+ * @property frame_border_fragment {string}
+ * @property frame_background_pars_fragment {string}
+ * @property frame_common_pars {string}
+ * @property msdf_alphaglyph_pars_vertex {string}
+ * @property frame_border_pars_fragment {string}
+ * @property msdf_offset_vertex {string}
+ * @property frame_border_pars_vertex {string}
+ * @property msdf_alphaglyph_pars_fragment {string}
+ * @property frame_border_vertex {string}
+ * @property frame_background_fragment {string}
+ * @property msdf_alphaglyph_fragment {string}
+ */
+
+
+export const ShaderChunkUI = {
+	msdfAlphaglyphParsVertexGlsl,
+	msdfAlphaglyphVertexGlsl,
+	msdfOffsetglyphVertexGlsl,
+	msdfAlphaglyphParsFragmentGlsl,
+	msdfAlphaglyphFragmentGlsl,
+	frameBorderParsVertexGlsl,
+	frameBorderVertexGlsl,
+	frameCommonParsFragmentGlsl,
+	frameBorderParsFragmentGlsl,
+	frameBorderFragmentGlsl,
+	frameBackgroundParsFragmentGlsl,
+	frameBackgroundFragmentGlsl,
+};
+/* eslint-enable camelcase */
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/three-mesh-ui.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/three-mesh-ui.js
new file mode 100644
index 0000000..ba29bea
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/three-mesh-ui.js
@@ -0,0 +1,76 @@
+/* global global */
+
+import UpdateManager from './components/core/UpdateManager.js';
+import FontLibrary from './font/FontLibrary.js';
+import { ShaderChunkUI } from './renderers/shaders/ShaderChunkUI';
+import TypographicFont from './font/TypographicFont';
+import TypographicGlyph from './font/TypographicGlyph';
+import InlineGlyph from './font/InlineGlyph';
+import MSDFFontMaterialUtils from './font/msdf/utils/MSDFFontMaterialUtils';
+import * as DefaultValues from './core/DefaultValues';
+import MeshUIBaseElement from './core/elements/MeshUIBaseElement';
+import BlockElement from './elements/basic/BlockElement';
+import TextElement from './elements/basic/TextElement';
+import InlineElement from './elements/basic/InlineElement';
+import InlineBlockElement from './elements/basic/InlineBlockElement';
+import InheritableProperty from './core/properties/InheritableProperty';
+import BaseProperty from './core/properties/BaseProperty';
+import * as MaterialTransformers from './utils/mediator/transformers/MaterialTransformers';
+import Behavior from './utils/Behavior';
+import FontVariant from './font/FontVariant';
+import TextContentProperty from './core/properties/TextContentProperty';
+
+
+
+
+const update = () => UpdateManager.update();
+
+const ThreeMeshUI = {
+	BaseProperty,
+	Block: BlockElement,
+	Text : TextElement,
+	Inline: InlineElement,
+	InlineBlock : InlineBlockElement,
+	// Keyboard : KeyboardElement,
+	MeshUIBaseElement,
+	FontLibrary,
+	update,
+	MSDFFontMaterialUtils,
+	ShaderChunkUI,
+	Behavior,
+	FontVariant,
+	DefaultValues,
+	InheritableProperty,
+	TextContentProperty,
+};
+
+
+if ( typeof global !== 'undefined' ) global.ThreeMeshUI = ThreeMeshUI;
+
+export { BlockElement as Block };
+export { TextElement as Text };
+export { InlineElement as Inline };
+export { InlineBlockElement as InlineBlock };
+export { FontLibrary };
+export { update };
+export { ShaderChunkUI };
+export { MSDFFontMaterialUtils };
+export { TypographicFont }
+export { TypographicGlyph }
+export { InlineGlyph }
+export { MeshUIBaseElement }
+export { DefaultValues }
+export { InheritableProperty }
+export { BaseProperty }
+export { MaterialTransformers }
+export { Behavior }
+export { FontVariant }
+export { TextContentProperty }
+
+export default ThreeMeshUI;
+
+// console.warn("ThreeMeshUI v7.1.x - Three "+window.__THREE__)
+
+
+
+
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/types.d.ts b/packages/sdk/lib/core/libs/three-mesh-ui/src/types.d.ts
new file mode 100644
index 0000000..9e25664
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/types.d.ts
@@ -0,0 +1,189 @@
+import type {Color, Object3D, BufferGeometry, EventDispatcher, Texture} from "three";
+
+export type BlockOptions = {
+    width: number;
+    height: number;
+    padding?: number;
+    fontFamily?: string;
+    fontTexture?: string;
+    backgroundColor?: Color;
+    backgroundOpacity?: number;
+    borderRadius?: number | [topLeft: number, topRight: number, bottomRight: number, bottomLeft: number];
+    // @todo add missing properties
+    [property: string]: any;
+}
+
+export declare class Block extends Object3D {
+    constructor(options: BlockOptions);
+}
+
+export type TextOptions = {
+    // @todo add missing properties
+    [property: string]: any;
+}
+
+export declare class Text extends Object3D {
+    constructor(options: TextOptions);
+}
+
+export type InlineBlockOptions = {
+    // @todo add missing properties
+    [property: string]: any;
+}
+
+export declare class InlineBlock extends Object3D {
+    constructor(options: InlineBlockOptions);
+}
+
+export type KeyboardOptions = {
+    // @todo add missing properties
+    [property: string]: any;
+}
+
+export declare class Keyboard extends Object3D {
+    constructor(options: KeyboardOptions);
+}
+
+// @TODO: To be evaluated by typescripters ---------------------------------
+// export declare abstract class FontVariant {
+// 	private _isReady:boolean;
+// 	public isReady:boolean;
+// 	private _weight:string;
+// 	public weight:string;
+// 	private _style:string;
+// 	public style:string;
+// 	private _size:number;
+// 	public size:number;
+// 	private _lineHeight:number;
+// 	public lineHeight:number;
+// 	private _lineBase:number;
+// 	public lineBase:number;
+// 	private _font:TypographyFont;
+// 	public font:TypographyFont;
+// 	protected constructor(weight: string, style: string);
+// 	getCharacterDescription(character:string):TypographyCharacter
+// 	abstract getCharacterGeometry( inline:InlineCharacter): BufferGeometry
+// 	getKerningAmount(pairs):number;
+// 	private _checkReadiness():boolean;
+// 	protected abstract _readyCondition ():boolean
+//  adjustCharactersDescription(adjustmentObject:any):void
+// }
+//
+// export declare class TypographyFont {
+//
+// 	private _size:number;
+// 	public size:number;
+// 	private _lineHeight:number;
+// 	public lineHeight:number;
+// 	private _lineBase:number;
+// 	public lineBase:number;
+// 	private _name:number;
+// 	public name:number;
+//
+// }
+//
+// export declare abstract class TypographyCharacter {
+//
+// 	protected constructor( typographicFont:TypographyFont );
+// 	protected _char:string;
+// 	public char:string;
+// 	protected _width:number
+// 	public width:number
+// 	protected _heigth:number
+// 	public heigth:number
+// 	protected _xadvance:number;
+// 	public xadvance:number;
+// 	protected _xoffset:number;
+// 	public xoffset:number;
+// 	protected _yoffset:number;
+// 	public yoffset:number;
+// 	protected _font:TypographyFont;
+// 	public font:TypographyFont;
+// 	public abstract asCharacterInline():InlineCharacter
+// }
+//
+// export declare abstract class InlineCharacter {
+//
+// 	protected _typographic:TypographyCharacter;
+// 	protected _fontFactor:number;
+// 	protected _lineBreak:string|null;
+// 	public lineBreak:string|null;
+// 	protected _fontSize:number;
+// 	public fontSize:number;
+// 	protected _kerning:number;
+// 	public kerning:number;
+// 	protected _offsetX:number;
+// 	public offsetX:number;
+// 	protected _offsetY:number;
+// 	public offsetY:number;
+//
+// 	protected constructor( characterDesc:TypographyCharacter );
+//
+// 	get typographic():TypographyCharacter
+// 	resetOffsets():void
+// 	get xadvance():number
+// 	get xoffset():number
+// 	get yoffset():number
+//
+// 	get width():number
+//
+// 	get height():number
+//
+// 	get char():string
+//
+// 	get anchor():number;
+//
+// 	get lineHeight():number
+//
+// 	get lineBase():number
+//
+// 	set fontFactor( value:number )
+//
+// }
+//
+// export declare class FontFamily extends EventDispatcher {
+//
+// 	private _name:string;
+// 	private _variants:FontVariant[];
+// 	private _isReady:boolean;
+//
+// 	constructor( name:string );
+//
+// 	get isReady():boolean
+//
+// 	addVariant( weight:string, style:string, json:Object|string, texture:Texture|string, override:boolean):FontFamily
+// 	addCustomImplementationVariant( variantImplementation:FontVariant, override:boolean):FontFamily
+// 	getVariant( weight:string, style:string ):FontVariant
+// 	get name():string;
+// 	private _checkReadiness():boolean;
+//
+// }
+//
+//
+// export declare namespace FontLibrary {
+// 	export function addFontFamily(fontFamilyName:string);
+// 	export function getFontFamily(fontFamilyName:string);
+// 	export function load(fontFamily:FontFamily, ...args:FontFamily[]):Promise<unknown>;
+// 	export function setMissingCharacterHandler(fontVariant:FontVariant, character:string):string|null;
+// 	export function missingCharacter(handler:(fontVariant:FontVariant, character:string) => string|null);
+// }
+// ----------------------------           End of evaluation
+
+export declare namespace FontLibrary {
+	export function addFontFamily(fontFamilyName:string);
+	export function getFontFamily(fontFamilyName:string);
+	export function load(fontFamily:any, ...args:any[]):Promise<unknown>;
+	export function setMissingCharacterHandler(fontVariant:any, character:string):string|null;
+	export function missingCharacter(handler:(fontVariant:any, character:string) => string|null);
+}
+
+export declare function update(): void;
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            block: any
+            text: any
+        }
+    }
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/Behavior.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/Behavior.js
new file mode 100644
index 0000000..e89a9b0
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/Behavior.js
@@ -0,0 +1,59 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+
+export default class Behavior {
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} subject
+	 */
+	constructor( subject ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @protected
+		 */
+		this._subject = subject;
+
+	}
+
+	/**
+	 * @abstract
+	 */
+	attach() {
+
+		console.error(`Behavior::attach() - Is abstract and therefore should be overridden in ${this.constructor.name}`);
+
+	}
+
+	/**
+	 * @abstract
+	 * @returns {void}
+	 */
+	act() {
+
+		throw new Error(`Behavior::act() - Is abstract and therefore should be overridden in ${this.constructor.name}`);
+
+	}
+
+	/**
+	 * @abstract
+	 */
+	detach() {
+
+		console.error(`Behavior::detach() - Is abstract and therefore should be overridden in ${this.constructor.name}`);
+
+	}
+
+	/**
+	 *
+	 */
+	clear() {
+
+	}
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/NumberUtils.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/NumberUtils.js
new file mode 100644
index 0000000..0254627
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/NumberUtils.js
@@ -0,0 +1,24 @@
+/**
+ * Get rid of the precision issue
+ * @param numA
+ * @param numB
+ * @param precision
+ * @return {boolean}
+ */
+export const numberEquals = function ( numA, numB, precision = 6 ) {
+
+	return numA.toFixed(precision) === numB.toFixed(precision)
+
+}
+
+/**
+ *
+ * @param unprecisedNumber
+ * @param precision
+ * @return {number}
+ */
+export const numberPrecise = function ( unprecisedNumber, precision = 6 ) {
+
+	return parseFloat( unprecisedNumber.toFixed( precision ) );
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/Units.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/Units.js
new file mode 100644
index 0000000..a177520
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/Units.js
@@ -0,0 +1,26 @@
+export const WORLD_UNITS = 'rem';
+
+//
+export const CENTIMETERS = 'cm';
+export const MILLIMETERS = 'mm';
+export const INCHES = 'in';
+
+export const UV = 'em';
+export const PERCENT = '%';
+
+const availableUnits = [ WORLD_UNITS, UV, PERCENT ];
+
+
+/**
+ * Obtain a valid unit
+ * @param {string} requestedUnits
+ * @returns {string}
+ */
+export const validateUnits = function( requestedUnits ) {
+
+	// Sent default units if requested units not available
+	if( availableUnits.indexOf( requestedUnits) === -1 ) return WORLD_UNITS;
+
+	return requestedUnits;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/deepDelete.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/deepDelete.js
new file mode 100644
index 0000000..de0f9a0
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/deepDelete.js
@@ -0,0 +1,24 @@
+import UpdateManager from '../components/core/UpdateManager.js';
+
+/** Recursively erase THE CHILDREN of the passed object */
+function deepDelete( object3D ) {
+
+	object3D.children.forEach( ( child ) => {
+
+		if ( child.children.length > 0 ) deepDelete( child );
+
+		object3D.remove( child );
+
+		UpdateManager.disposeOf( child );
+
+		if ( child.material ) child.material.dispose();
+
+		if ( child.geometry ) child.geometry.dispose();
+
+	} );
+
+	object3D.children = [];
+
+}
+
+export default deepDelete;
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/Mediator.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/Mediator.js
new file mode 100644
index 0000000..9472643
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/Mediator.js
@@ -0,0 +1,120 @@
+import { directTransfer } from './transformers/CommonTransformers';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+/**
+ * An option function to transform value from subject to target
+ * @typedef {(target:any, targetProperty:string, value:any) => void} MediationTransformer
+ *
+ */
+
+/**
+ * @typedef {Object.<{subjectProperty:string, trans?:MediationTransformer}>} MediationDefinition
+ *
+ */
+
+export default class Mediator{
+
+	/**
+	 * @constructor
+	 * @param {MediationDefinition} definition
+	 */
+	constructor( definition ) {
+
+		/**
+		 *
+		 * @type {MediationDefinition}
+		 * @private
+		 */
+		this._definition = definition;
+
+	}
+
+	/**
+	 *
+	 * @param {MediationDefinition} value
+	 */
+	set definition( value ) {
+
+		this._definition = value;
+
+	}
+
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} subject
+	 * @param {any} target
+	 * @param {Object.<(string|number), any>} options
+	 * @param {any} [secondTarget=null]
+	 */
+	mediate( subject, target, options, secondTarget = null ) {
+
+		// Mediate each subject properties to material
+		for ( const subjectProperty in this._definition ) {
+			const mediationDefinition = this._definition[subjectProperty];
+
+			if ( options[subjectProperty] !== undefined ) {
+
+				// retrieve the mediation transformer to use for this property
+				const mediationTransformer = mediationDefinition.t ? mediationDefinition.t : directTransfer;
+				mediationTransformer( target, mediationDefinition.m, options[subjectProperty] );
+
+				// Also transfert to second target is isset
+				if( secondTarget ) {
+
+					mediationTransformer( secondTarget, mediationDefinition.m, options[subjectProperty] );
+
+				}
+
+			}
+
+		}
+
+	}
+
+
+	/***********************************************************************************************************************
+	 * STATIC
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @param {MeshUIComponent} subject
+	 * @param {any} target
+	 * @param {Object.<(string|number), any>} options
+	 * @param {Object.<{subjectProperty:string, t?:(target:any, targetProperty:string, value:any) => void}>} mediationDefinitions
+	 * @param {any} [secondTarget=null]
+	 */
+	static mediate( subject, target, options, mediationDefinitions, secondTarget = null ) {
+
+		// Cannot mediate if target not defined
+		if( !target ) return;
+
+		// Mediate each subject properties to material
+		for ( const subjectProperty in mediationDefinitions ) {
+			const definition = mediationDefinitions[subjectProperty];
+
+			if ( options[subjectProperty] !== undefined ) {
+
+				// retrieve the mediation transformer to use for this property
+				const mediationTransformer = definition.t ? definition.t : directTransfer;
+				mediationTransformer( target, definition.m, options[subjectProperty] );
+
+				// Also transfert to second target is isset
+				if( secondTarget ) {
+
+					mediationTransformer( secondTarget, definition.m, options[subjectProperty] );
+
+				}
+
+			}
+
+		}
+
+	}
+
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/transformers/CommonTransformers.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/transformers/CommonTransformers.js
new file mode 100644
index 0000000..a6c1d2f
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/transformers/CommonTransformers.js
@@ -0,0 +1,17 @@
+/**
+ * Transfer the alphaTest value from MeshUIComponent to material
+ * @type {import('../Mediator').MediationTransformer}
+ */
+export const directTransfer = function ( target, targetProperty, value ) {
+
+	target[targetProperty] = value;
+
+}
+
+export const directTransferNotNull = function( target, targetProperty, value ) {
+
+	if( value === null ) return;
+
+	target[targetProperty] = value;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/transformers/MaterialTransformers.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/transformers/MaterialTransformers.js
new file mode 100644
index 0000000..b08e2c7
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/transformers/MaterialTransformers.js
@@ -0,0 +1,79 @@
+
+/**
+ * Transfer the alphaTest value from MeshUIComponent to material
+ * @type {import('../Mediator').MediationTransformer}
+ */
+export const alphaTestTransformer = function ( target, targetProperty, value) {
+
+	// set the value in the material
+	target.alphaTest = value;
+
+	toPreprocessorTriggerTransformer(target, 'USE_ALPHATEST', value > 0 );
+
+}
+
+/**
+ * Transform a value as a preprocessor trigger
+ * @type {import('../Mediator').MediationTransformer}
+ */
+export const toPreprocessorTriggerTransformer = function ( target, targetProperty, value) {
+
+	if( !target.defines ) return;
+
+	if ( value ) {
+
+		if( target.defines[targetProperty] === undefined ) {
+
+			target.defines[targetProperty] = '';
+			target.needsUpdate = true;
+
+		}
+
+	} else if( target.defines[targetProperty] !== undefined ) {
+
+		delete target.defines[targetProperty];
+		target.needsUpdate = true;
+
+	}
+
+}
+
+/**
+ * Transform a value as a preprocessor value
+ * @type {import('../Mediator').MediationTransformer}
+ */
+export const asPreprocessorValueTransformer = function ( target, targetProperty, value) {
+
+	// abort if nothing to update, same value
+	if( target.defines[targetProperty] && target.defines[targetProperty] === value ) return;
+
+	// or change the preprocessor and update
+	target.defines[targetProperty] = value;
+	target.needsUpdate = true;
+
+}
+
+/**
+ * Transform a value as a uniform or userData value
+ * Non primitive values are bounds
+ * @type {import('../Mediator').MediationTransformer}
+ */
+export const uniformOrUserDataTransformer = function( material, property, value ) {
+
+	if( material.userData[property] ) {
+
+		material.userData[property].value = value;
+
+	}else{
+
+		material.uniforms[property].value = value;
+
+	}
+
+}
+
+export const toUserDataTransformer = function( material, property, value ) {
+
+	material.userData[property].value = value;
+
+}
diff --git a/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/transformers/MeshTransformers.js b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/transformers/MeshTransformers.js
new file mode 100644
index 0000000..0f7e23e
--- /dev/null
+++ b/packages/sdk/lib/core/libs/three-mesh-ui/src/utils/mediator/transformers/MeshTransformers.js
@@ -0,0 +1,25 @@
+export const renderOrderTransformer = function ( target, targetProperty, value ) {
+
+	/**
+	 * Propagate the render order to each child
+	 */
+	target.traverse( ( child ) => {
+
+		child.renderOrder = value;
+
+	} );
+
+}
+
+export const layer = function ( target, targetProperty, value ) {
+
+	/**
+	 * Propagate the layer to each child
+	 */
+	target.parent.traverse( ( child ) => {
+
+		child.layers.set( value );
+
+	} );
+
+}
diff --git a/packages/sdk/lib/core/objects/Heatmap.ts b/packages/sdk/lib/core/objects/Heatmap.ts
new file mode 100644
index 0000000..6bfa4fb
--- /dev/null
+++ b/packages/sdk/lib/core/objects/Heatmap.ts
@@ -0,0 +1,453 @@
+import * as THREE from "three";
+import h337 from "heatmap.js-fix";
+import { deepAssign, deepEqual } from "@/utils";
+
+type HeatmapRenderer = {
+    canvas: HTMLCanvasElement;
+};
+
+type HeatmapInstance = {
+    setData: (data: { max: number; min?: number; data: HeatmapCanvasPoint[] }) => void;
+    configure?: (config: Record<string, unknown>) => void;
+    _renderer?: HeatmapRenderer;
+    _store?: { _cfgRadius?: number };
+};
+
+type HeatmapCanvasPoint = {
+    x: number;
+    y: number;
+    value: number;
+    radius?: number;
+};
+
+export const getDefaultHeatmapOptions = (): IHeatmap.options => ({
+    name: "Heatmap",
+    position: [0, 0, 0],
+    mode: "flat",
+    size: {
+        width: 10,
+        height: 10,
+    },
+    resolution: {
+        width: 512,
+        height: 512,
+    },
+    material: {
+        transparent: true,
+        opacity: 1,
+        depthWrite: false,
+        depthTest: true,
+        side: "double",
+    },
+    height: {
+        scale: 2,
+        segments: {
+            width: 128,
+            height: 128,
+        },
+    },
+    heatmap: {
+        radius: 40,
+        blur: 0.85,
+        maxOpacity: 1,
+        minOpacity: 0,
+        gradient: {
+            "0.0": "#2c7bb6",
+            "0.5": "#ffffbf",
+            "1.0": "#d7191c",
+        },
+    },
+    data: {
+        max: 1,
+        min: 0,
+        points: [],
+    },
+});
+
+const DEFAULT_HEATMAP_RADIUS = getDefaultHeatmapOptions().heatmap.radius ?? 0;
+
+export default class Heatmap extends THREE.Mesh {
+    type = "Heatmap";
+    isHeatmap = true;
+
+    options: IHeatmap.options = getDefaultHeatmapOptions();
+    heatmap: HeatmapInstance;
+    container: HTMLDivElement;
+    canvas: HTMLCanvasElement;
+    texture: THREE.CanvasTexture;
+
+    constructor(options: Partial<IHeatmap.options> = {}) {
+        super();
+
+        if (typeof document === "undefined") {
+            throw new Error("[Astral 3D]: Heatmap requires a DOM environment.");
+        }
+
+        deepAssign(this.options, options);
+        if (options.heatmap?.gradient) {
+            this.options.heatmap.gradient = { ...options.heatmap.gradient };
+        }
+        this.name = this.options.name;
+
+        this.container = this.createContainer();
+        this.heatmap = this.createHeatmap();
+        this.canvas = this.resolveCanvas();
+        this.texture = new THREE.CanvasTexture(this.canvas);
+        this.texture.colorSpace = THREE.SRGBColorSpace;
+
+        this.material = new THREE.MeshBasicMaterial({
+            map: this.texture,
+            transparent: this.options.material.transparent,
+            opacity: this.options.material.opacity,
+            depthWrite: this.options.material.depthWrite,
+            depthTest: this.options.material.depthTest,
+            side: this.resolveSide(this.options.material.side),
+        });
+
+        this.geometry = this.createGeometry();
+
+        const position = this.options.position;
+        this.position.set(position[0] || 0, position[1] || 0, position[2] || 0);
+        // Default to horizontal (XZ) plane with Y-up.
+        this.rotation.x = -Math.PI / 2;
+
+        if (this.options.data?.points?.length) {
+            this.setData(this.options.data);
+        } else {
+            this.heatmap.setData({
+                max: this.options.data.max || 1,
+                min: this.options.data.min || 0,
+                data: [],
+            });
+        }
+    }
+
+    private createContainer() {
+        const container = document.createElement("div");
+        const { width, height } = this.options.resolution;
+        container.style.position = "absolute";
+        container.style.left = "-10000px";
+        container.style.top = "-10000px";
+        container.style.width = `${width}px`;
+        container.style.height = `${height}px`;
+        container.style.visibility = "hidden";
+        container.style.pointerEvents = "none";
+
+        const host = document.body || document.documentElement;
+        host.appendChild(container);
+
+        return container;
+    }
+
+    private createHeatmap() {
+        const config = {
+            container: this.container,
+            radius: this.options.heatmap.radius,
+            blur: this.options.heatmap.blur,
+            maxOpacity: this.options.heatmap.maxOpacity,
+            minOpacity: this.options.heatmap.minOpacity,
+            gradient: this.options.heatmap.gradient,
+        };
+
+        return (h337 as { create: (cfg: Record<string, unknown>) => HeatmapInstance }).create(config);
+    }
+
+    private clearContainer() {
+        while (this.container.firstChild) {
+            this.container.removeChild(this.container.firstChild);
+        }
+    }
+
+    private refreshCanvas() {
+        const canvas = this.resolveCanvas();
+        if (canvas !== this.canvas) {
+            this.canvas = canvas;
+            this.texture.image = this.canvas;
+        }
+        this.texture.needsUpdate = true;
+    }
+
+    private rebuildHeatmap() {
+        this.clearContainer();
+        this.heatmap = this.createHeatmap();
+        this.refreshCanvas();
+    }
+
+    private syncHeatmapRuntimeConfig() {
+        const heatmapAny = this.heatmap as HeatmapInstance | undefined;
+        if (!heatmapAny) return;
+
+        if (heatmapAny._store && typeof this.options.heatmap.radius === "number") {
+            heatmapAny._store._cfgRadius = this.options.heatmap.radius;
+        }
+
+        const rendererAny = heatmapAny._renderer as { _templates?: Record<string, HTMLCanvasElement> } | undefined;
+        if (rendererAny && rendererAny._templates) {
+            rendererAny._templates = {};
+        }
+    }
+
+    private getSegments() {
+        if (this.options.mode !== "height") {
+            return { width: 1, height: 1 };
+        }
+
+        const segments = this.options.height?.segments || { width: 1, height: 1 };
+        return {
+            width: Math.max(1, Math.floor(segments.width)),
+            height: Math.max(1, Math.floor(segments.height)),
+        };
+    }
+
+    private createGeometry() {
+        const size = this.options.size;
+        const segments = this.getSegments();
+        return new THREE.PlaneGeometry(size.width, size.height, segments.width, segments.height);
+    }
+
+    private ensureGeometry() {
+        const size = this.options.size;
+        const segments = this.getSegments();
+        const geometry = this.geometry as THREE.PlaneGeometry | undefined;
+        const parameters = geometry?.parameters;
+
+        const needsRebuild =
+            !parameters ||
+            parameters.width !== size.width ||
+            parameters.height !== size.height ||
+            parameters.widthSegments !== segments.width ||
+            parameters.heightSegments !== segments.height;
+
+        if (!needsRebuild) return;
+
+        this.geometry.dispose();
+        this.geometry = new THREE.PlaneGeometry(size.width, size.height, segments.width, segments.height);
+    }
+
+    private resolveCanvas() {
+        const canvas = this.heatmap._renderer?.canvas || this.container.querySelector("canvas");
+        if (!canvas) {
+            const fallback = document.createElement("canvas");
+            this.container.appendChild(fallback);
+            return fallback;
+        }
+
+        canvas.width = this.options.resolution.width;
+        canvas.height = this.options.resolution.height;
+
+        return canvas;
+    }
+
+    private flattenGeometry() {
+        const geometry = this.geometry as THREE.BufferGeometry;
+        const position = geometry.getAttribute("position") as THREE.BufferAttribute | undefined;
+        if (!position) return;
+
+        for (let i = 0; i < position.count; i += 1) {
+            position.setZ(i, 0);
+        }
+
+        position.needsUpdate = true;
+        geometry.computeVertexNormals();
+    }
+
+    private updateRelief() {
+        this.ensureGeometry();
+
+        if (this.options.mode !== "height") {
+            this.flattenGeometry();
+            return;
+        }
+
+        const context = this.canvas.getContext("2d");
+        if (!context) return;
+
+        const canvasWidth = this.canvas.width;
+        const canvasHeight = this.canvas.height;
+        const imageData = context.getImageData(0, 0, canvasWidth, canvasHeight).data;
+        const geometry = this.geometry as THREE.BufferGeometry;
+        const position = geometry.getAttribute("position") as THREE.BufferAttribute | undefined;
+        const uv = geometry.getAttribute("uv") as THREE.BufferAttribute | undefined;
+        if (!position || !uv) return;
+
+        const heightScale = this.options.height?.scale ?? 1;
+        for (let i = 0; i < position.count; i += 1) {
+            const u = uv.getX(i);
+            const v = uv.getY(i);
+            const x = Math.round(this.clamp(u * (canvasWidth - 1), 0, canvasWidth - 1));
+            const y = Math.round(this.clamp((1 - v) * (canvasHeight - 1), 0, canvasHeight - 1));
+            const index = (y * canvasWidth + x) * 4;
+            const alpha = imageData[index + 3] / 255;
+            position.setZ(i, alpha * heightScale);
+        }
+
+        position.needsUpdate = true;
+        geometry.computeVertexNormals();
+    }
+
+    private resolveSide(side?: IHeatmap.Side) {
+        switch (side) {
+            case "front":
+                return THREE.FrontSide;
+            case "back":
+                return THREE.BackSide;
+            case "double":
+            default:
+                return THREE.DoubleSide;
+        }
+    }
+
+    private clamp(value: number, min: number, max: number) {
+        return Math.min(Math.max(value, min), max);
+    }
+
+    private toCanvasPoint(point: IHeatmap.Point): HeatmapCanvasPoint {
+        const size = this.options.size;
+        const resolution = this.options.resolution;
+        const safeWidth = Math.max(size.width, 0.000001);
+        const safeHeight = Math.max(size.height, 0.000001);
+        const scaleX = resolution.width / safeWidth;
+        const scaleY = resolution.height / safeHeight;
+
+        // Map local plane coordinates (centered at origin) to heatmap pixels.
+        const x = (point.x + size.width / 2) * scaleX;
+        const y = (size.height / 2 - point.y) * scaleY;
+
+        const canvasPoint: HeatmapCanvasPoint = {
+            x: this.clamp(x, 0, resolution.width),
+            y: this.clamp(y, 0, resolution.height),
+            value: point.value,
+        };
+
+        if (typeof point.radius === "number") {
+            const radiusScale = Math.min(scaleX, scaleY);
+            const baseRadius = typeof this.options.heatmap.radius === "number" ? this.options.heatmap.radius : DEFAULT_HEATMAP_RADIUS;
+            const radiusFactor = DEFAULT_HEATMAP_RADIUS > 0 ? Math.max(0, baseRadius) / DEFAULT_HEATMAP_RADIUS : 1;
+            canvasPoint.radius = point.radius * radiusScale * radiusFactor;
+        }
+
+        return canvasPoint;
+    }
+
+    private buildHeatmapData(data: IHeatmap.Data) {
+        const points = data.points || [];
+        const values = points.map((point) => point.value).filter((value) => Number.isFinite(value));
+        const max = typeof data.max === "number" ? data.max : values.length ? Math.max(...values) : 1;
+        const min = typeof data.min === "number" ? data.min : values.length ? Math.min(...values) : 0;
+
+        return {
+            max,
+            min,
+            data: points.map((point) => this.toCanvasPoint(point)),
+        };
+    }
+
+    setData(data: IHeatmap.Data) {
+        this.options.data = {
+            max: data.max,
+            min: data.min,
+            points: Array.isArray(data.points) ? data.points.slice() : [],
+        };
+
+        const heatmapData = this.buildHeatmapData(this.options.data);
+        this.heatmap.setData(heatmapData);
+        this.texture.needsUpdate = true;
+        this.updateRelief();
+    }
+
+    addData(points: IHeatmap.Point | IHeatmap.Point[]) {
+        const list = Array.isArray(points) ? points : [points];
+        const next = this.options.data.points.concat(list);
+        this.setData({
+            ...this.options.data,
+            points: next,
+        });
+    }
+
+    clear() {
+        this.setData({
+            max: 1,
+            min: 0,
+            points: [],
+        });
+
+        return this;
+    }
+
+    setSize(size: IHeatmap.Size) {
+        this.options.size = { width: size.width, height: size.height };
+        this.ensureGeometry();
+        this.setData(this.options.data);
+    }
+
+    setMode(mode: IHeatmap.Mode) {
+        if (this.options.mode === mode) return this;
+
+        this.options.mode = mode;
+        this.ensureGeometry();
+        this.updateRelief();
+        return this;
+    }
+
+    updateHeatmapConfig(config: Partial<IHeatmap.HeatmapConfig>) {
+        const previousGradient = this.options.heatmap.gradient;
+        const { gradient, ...rest } = config;
+        deepAssign(this.options.heatmap, rest);
+        if (gradient && typeof gradient === "object" && !Array.isArray(gradient)) {
+            this.options.heatmap.gradient = { ...gradient };
+        }
+        const gradientChanged = !deepEqual(previousGradient, this.options.heatmap.gradient);
+
+        this.syncHeatmapRuntimeConfig();
+        if (gradientChanged) {
+            this.rebuildHeatmap();
+        } else if (this.heatmap.configure) {
+            this.heatmap.configure({
+                radius: this.options.heatmap.radius,
+                blur: this.options.heatmap.blur,
+                maxOpacity: this.options.heatmap.maxOpacity,
+                minOpacity: this.options.heatmap.minOpacity,
+                gradient: this.options.heatmap.gradient,
+            });
+            this.refreshCanvas();
+        } else {
+            this.rebuildHeatmap();
+        }
+
+        this.setData(this.options.data);
+    }
+
+    toJSON(meta?: THREE.JSONMeta) {
+        const options = JSON.parse(JSON.stringify(this.options));
+        options.position = this.position.toArray();
+
+        // 同步材质属性
+        options.material = {
+            transparent: (this.material as THREE.Material).transparent,
+            opacity: (this.material as THREE.Material).opacity,
+            depthWrite: (this.material as THREE.Material).depthWrite,
+            depthTest: (this.material as THREE.Material).depthTest,
+            side: this.options.material.side,
+        };
+
+        const superJSON = super.toJSON(meta);
+        superJSON.object.type = this.type;
+        superJSON.object.options = options;
+
+        return superJSON;
+    }
+
+    static fromJSON(json: { options: IHeatmap.options }) {
+        return new Heatmap(json.options);
+    }
+
+    dispose() {
+        this.geometry.dispose();
+        this.texture.dispose();
+        (this.material as THREE.Material).dispose();
+
+        if (this.container.parentElement) {
+            this.container.parentElement.removeChild(this.container);
+        }
+    }
+}
diff --git a/packages/sdk/lib/core/objects/Path.ts b/packages/sdk/lib/core/objects/Path.ts
new file mode 100644
index 0000000..87c6dea
--- /dev/null
+++ b/packages/sdk/lib/core/objects/Path.ts
@@ -0,0 +1,424 @@
+import * as THREE from "three";
+import { PathGeometry, PathPointList, PathTubeGeometry } from "three.path";
+import App from "@/core/app/App";
+import { useAddSignal, useRemoveSignal } from "@/hooks";
+import { deepAssign } from "@/utils";
+
+export const getDefaultPathOptions = (): IPath.options => ({
+    name: "Path",
+    position: [0, 0, 0],
+    mode: "path",
+    points: [],
+    closed: false,
+    cornerRadius: 0.1,
+    cornerSplit: 10,
+    up: [0, 1, 0],
+    path: {
+        width: 0.4,
+        arrow: false,
+        progress: 1,
+        side: "both",
+    },
+    tube: {
+        radius: 0.1,
+        radialSegments: 8,
+        progress: 1,
+        startRad: 0,
+    },
+    flow: {
+        enabled: false,
+        speed: 0.2,
+        direction: [1, 0],
+    },
+    material: {
+        color: "#ffffff",
+        transparent: true,
+        opacity: 1,
+        depthWrite: false,
+        depthTest: true,
+        side: "double",
+        map: "",
+        repeat: [1, 1],
+        offset: [0, 0],
+        rotation: 0,
+    },
+});
+
+export default class Path extends THREE.Mesh {
+    type = "Path";
+    isPath = true;
+
+    options: IPath.options = getDefaultPathOptions();
+    private pathPointList = new PathPointList();
+    private texture?: THREE.Texture;
+    private static flowPaths = new Set<Path>();
+    private static flowSignalBound = false;
+    private static flowLastTime = 0;
+    private handleAdded = () => {
+        this.updateFlowRegistration();
+    };
+    private handleRemoved = () => {
+        this.updateFlowRegistration();
+    };
+
+    private static bindFlowSignal() {
+        if (Path.flowSignalBound) return;
+        Path.flowSignalBound = true;
+        useAddSignal("sceneRendered", Path.handleFlowTick);
+    }
+
+    private static unbindFlowSignal() {
+        if (!Path.flowSignalBound) return;
+        Path.flowSignalBound = false;
+        Path.flowLastTime = 0;
+        useRemoveSignal("sceneRendered", Path.handleFlowTick);
+    }
+
+    private static handleFlowTick() {
+        if (Path.flowPaths.size === 0) {
+            Path.flowLastTime = 0;
+            return;
+        }
+
+        const now = performance.now();
+        const hasPrevious = Path.flowLastTime > 0;
+        const delta = hasPrevious ? (now - Path.flowLastTime) / 1000 : 0;
+        Path.flowLastTime = now;
+
+        if (delta > 0) {
+            Path.flowPaths.forEach(path => path.updateFlow(delta));
+        }
+        (App.viewer as any)?.pluginRequestRender?.(true);
+    }
+
+    constructor(options: Partial<IPath.options> = {}, material?: THREE.Material) {
+        super();
+
+        deepAssign(this.options, options);
+        //if (options.path) this.options.path = { ...this.options.path, ...options.path };
+        //if (options.tube) this.options.tube = { ...this.options.tube, ...options.tube };
+        // if (options.flow) {
+        //     this.options.flow = { ...this.options.flow, ...options.flow };
+        //     if (Array.isArray(options.flow.direction)) {
+        //         this.options.flow.direction = options.flow.direction.slice();
+        //     }
+        // }
+        // if (options.material) this.options.material = { ...this.options.material, ...options.material };
+        // if (Array.isArray(options.points)) {
+        //     this.options.points = options.points.map(point => ({ ...point }));
+        // }
+        // if (Array.isArray(options.position)) {
+        //     this.options.position = options.position.slice();
+        // }
+        // if (Array.isArray(options.up)) {
+        //     this.options.up = options.up.slice();
+        // }
+
+        this.name = this.options.name;
+
+        this.updatePathPointList();
+        this.geometry = this.createGeometry();
+
+        if (material) {
+            this.material = material;
+            if (options.material) {
+                this.applyMaterialOptions(this.material);
+            }
+        } else {
+            this.material = this.createMaterial();
+        }
+
+        this.position.fromArray(this.options.position);
+
+        this.addEventListener("added", this.handleAdded);
+        this.addEventListener("removed", this.handleRemoved);
+        this.updateFlowRegistration();
+    }
+
+    private resolveMaterialSide(side?: IPath.MaterialSide) {
+        switch (side) {
+            case "front":
+                return THREE.FrontSide;
+            case "back":
+                return THREE.BackSide;
+            case "double":
+            default:
+                return THREE.DoubleSide;
+        }
+    }
+
+    private resolveMaterialSideName(side?: THREE.Side): IPath.MaterialSide {
+        switch (side) {
+            case THREE.FrontSide:
+                return "front";
+            case THREE.BackSide:
+                return "back";
+            case THREE.DoubleSide:
+            default:
+                return "double";
+        }
+    }
+
+    private createMaterial() {
+        const materialOptions = this.options.material;
+        const color = materialOptions?.color ?? "#ffffff";
+        const material = new THREE.MeshBasicMaterial({
+            color: new THREE.Color(color as any),
+            transparent: materialOptions?.transparent ?? true,
+            opacity: materialOptions?.opacity ?? 1,
+            depthWrite: materialOptions?.depthWrite ?? false,
+            depthTest: materialOptions?.depthTest ?? true,
+            side: this.resolveMaterialSide(materialOptions?.side),
+        });
+
+        this.applyMaterialOptions(material);
+        return material;
+    }
+
+    private updatePathPointList() {
+        const points = this.options.points || [];
+        const vectors = points.map(point => new THREE.Vector3(point.x, point.y, point.z));
+        const up = Array.isArray(this.options.up) ? new THREE.Vector3(this.options.up[0], this.options.up[1], this.options.up[2]) : null;
+        this.pathPointList.set(
+            vectors,
+            this.options.cornerRadius ?? 0,
+            this.options.cornerSplit ?? 0,
+            up,
+            Boolean(this.options.closed)
+        );
+    }
+
+    private createGeometry(): PathGeometry | PathTubeGeometry {
+        const mode = this.options.mode;
+        if (mode === "tube") {
+            return new PathTubeGeometry({
+                pathPointList: this.pathPointList,
+                options: this.options.tube,
+                usage: THREE.DynamicDrawUsage,
+            });
+        }
+
+        return new PathGeometry({
+            pathPointList: this.pathPointList,
+            options: this.options.path,
+            usage: THREE.DynamicDrawUsage,
+        });
+    }
+
+    private updateGeometry() {
+        this.updatePathPointList();
+        this.rebuildGeometry();
+        this.geometry.computeBoundingBox();
+        this.geometry.computeBoundingSphere();
+    }
+
+    private rebuildGeometry() {
+        this.geometry.dispose();
+        this.geometry = this.createGeometry();
+    }
+
+    private loadTexture(url: string) {
+        const loader = new THREE.TextureLoader();
+        const texture = loader.load(url, () => {
+            (this.material as THREE.Material).needsUpdate = true;
+        });
+
+        texture.colorSpace = THREE.SRGBColorSpace;
+        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+
+        const repeat = this.options.material?.repeat;
+        if (Array.isArray(repeat) && repeat.length >= 2) {
+            texture.repeat.set(Number(repeat[0]) || 1, Number(repeat[1]) || 1);
+        }
+
+        const offset = this.options.material?.offset;
+        if (Array.isArray(offset) && offset.length >= 2) {
+            texture.offset.set(Number(offset[0]) || 0, Number(offset[1]) || 0);
+        }
+
+        if (typeof this.options.material?.rotation === "number") {
+            texture.rotation = this.options.material.rotation;
+        }
+
+        return texture;
+    }
+
+    private updateFlowRegistration() {
+        if (this.options.flow?.enabled && this.parent) {
+            Path.flowPaths.add(this);
+            Path.bindFlowSignal();
+        } else {
+            Path.flowPaths.delete(this);
+        }
+        if (Path.flowPaths.size === 0) {
+            Path.unbindFlowSignal();
+        }
+    }
+
+    private updateFlow(delta: number) {
+        const flow = this.options.flow;
+        if (!flow?.enabled) return;
+
+        const meshMaterial = this.material as THREE.MeshBasicMaterial;
+        const map = meshMaterial?.map;
+        if (!map) return;
+
+        const speed = typeof flow.speed === "number" ? flow.speed : 0;
+        if (speed === 0) return;
+
+        const direction = Array.isArray(flow.direction) && flow.direction.length >= 2 ? flow.direction : [1, 0];
+
+        map.offset.x += direction[0] * speed * delta;
+        map.offset.y += direction[1] * speed * delta;
+
+        map.offset.x -= Math.floor(map.offset.x);
+        map.offset.y -= Math.floor(map.offset.y);
+    }
+
+    private applyMaterialOptions(material: THREE.Material) {
+        const materialOptions = this.options.material;
+        if (!materialOptions) return;
+
+        const meshMaterial = material as THREE.MeshBasicMaterial;
+
+        if (materialOptions.color !== undefined && meshMaterial.color) {
+            meshMaterial.color = new THREE.Color(materialOptions.color as any);
+        }
+
+        if (typeof materialOptions.opacity === "number") {
+            meshMaterial.opacity = materialOptions.opacity;
+        }
+        if (typeof materialOptions.transparent === "boolean") {
+            meshMaterial.transparent = materialOptions.transparent;
+        }
+        if (typeof materialOptions.depthWrite === "boolean") {
+            meshMaterial.depthWrite = materialOptions.depthWrite;
+        }
+        if (typeof materialOptions.depthTest === "boolean") {
+            meshMaterial.depthTest = materialOptions.depthTest;
+        }
+        if (materialOptions.side) {
+            meshMaterial.side = this.resolveMaterialSide(materialOptions.side);
+        }
+
+        if (typeof materialOptions.map === "string" && materialOptions.map.trim() !== "") {
+            if (this.texture) this.texture.dispose();
+            this.texture = this.loadTexture(materialOptions.map);
+            meshMaterial.map = this.texture;
+            meshMaterial.transparent = true;
+        }
+
+        meshMaterial.needsUpdate = true;
+    }
+
+    updateOptions(options: Partial<IPath.options>) {
+        let needsGeometryUpdate = false;
+        let flowChanged = false;
+        if (options.name !== undefined) {
+            this.options.name = options.name;
+            this.name = options.name;
+        }
+        if (Array.isArray(options.position)) {
+            this.options.position = options.position.slice();
+            this.position.fromArray(this.options.position);
+        }
+        if (Array.isArray(options.points)) {
+            this.options.points = options.points.map(point => ({ ...point }));
+            needsGeometryUpdate = true;
+        }
+        if (options.mode) {
+            this.options.mode = options.mode;
+            needsGeometryUpdate = true;
+        }
+        if (typeof options.closed === "boolean") {
+            this.options.closed = options.closed;
+            needsGeometryUpdate = true;
+        }
+        if (typeof options.cornerRadius === "number") {
+            this.options.cornerRadius = options.cornerRadius;
+            needsGeometryUpdate = true;
+        }
+        if (typeof options.cornerSplit === "number") {
+            this.options.cornerSplit = options.cornerSplit;
+            needsGeometryUpdate = true;
+        }
+        if (Array.isArray(options.up)) {
+            this.options.up = options.up.slice();
+            needsGeometryUpdate = true;
+        }
+        if (options.path) {
+            this.options.path = { ...this.options.path, ...options.path };
+            needsGeometryUpdate = true;
+        }
+        if (options.tube) {
+            this.options.tube = { ...this.options.tube, ...options.tube };
+            needsGeometryUpdate = true;
+        }
+        if (options.flow) {
+            this.options.flow = { ...this.options.flow, ...options.flow };
+            if (Array.isArray(options.flow.direction)) {
+                this.options.flow.direction = options.flow.direction.slice();
+            }
+            flowChanged = true;
+        }
+        if (options.material) this.options.material = { ...this.options.material, ...options.material };
+
+        if (needsGeometryUpdate) {
+            this.updateGeometry();
+        }
+
+        if (options.material) {
+            this.applyMaterialOptions(this.material as THREE.Material);
+        }
+        if (flowChanged) {
+            this.updateFlowRegistration();
+        }
+    }
+
+    setPoints(points: IPath.Point[]) {
+        this.options.points = points.map(point => ({ ...point }));
+        this.updateGeometry();
+    }
+
+    toJSON(meta?: THREE.JSONMeta) {
+        const options = JSON.parse(JSON.stringify(this.options));
+        options.position = this.position.toArray();
+
+        const material = this.material as THREE.Material & { color?: THREE.Color };
+        if (!options.material) options.material = {};
+        if (material.color) {
+            options.material.color = `#${material.color.getHexString()}`;
+        }
+        options.material.opacity = material.opacity;
+        options.material.transparent = material.transparent;
+        options.material.depthWrite = material.depthWrite;
+        options.material.depthTest = material.depthTest;
+        options.material.side = this.resolveMaterialSideName(material.side);
+
+        const superJSON = super.toJSON(meta);
+        superJSON.object.type = this.type;
+        superJSON.object.options = options;
+
+        return superJSON;
+    }
+
+    static fromJSON(json: { options: IPath.options; material?: THREE.Material }) {
+        return new Path(json.options, json.material);
+    }
+
+    dispose() {
+        this.removeEventListener("added", this.handleAdded);
+        this.removeEventListener("removed", this.handleRemoved);
+        this.geometry.dispose();
+        if (Array.isArray(this.material)) {
+            this.material.forEach(mat => mat.dispose());
+        } else {
+            (this.material as THREE.Material).dispose();
+        }
+        if (this.texture) {
+            this.texture.dispose();
+            this.texture = undefined;
+        }
+        Path.flowPaths.delete(this);
+    }
+}
diff --git a/packages/sdk/lib/core/objects/UIPanel.ts b/packages/sdk/lib/core/objects/UIPanel.ts
new file mode 100644
index 0000000..925a786
--- /dev/null
+++ b/packages/sdk/lib/core/objects/UIPanel.ts
@@ -0,0 +1,548 @@
+import * as THREE from "three";
+import App from "@/core/app/App";
+import { useAddSignal, useRemoveSignal } from "@/hooks";
+import { Block, FontLibrary } from "@/core/libs/three-mesh-ui/src/three-mesh-ui.js";
+import { getMousePosition } from "@/utils";
+import UIPanelBlock from "./UIPanelBlock";
+import UIPanelText from "./UIPanelText";
+import UIPanelInline from "./UIPanelInline";
+import UIPanelInlineBlock from "./UIPanelInlineBlock";
+import {
+    UIPanelElementController,
+    UIPanelNode,
+    UIPanelStateMap,
+    canAcceptUIPanelChild,
+    cloneUIPanelNode,
+    createUIPanelNodeId,
+    extractUIPanelProps,
+    normalizeUIPanelNode,
+    requestUIPanelRender,
+    stripUIPanelNodeChildren,
+} from "./UIPanelElementBase";
+
+const DEFAULT_FONT_FAMILY = "Roboto";
+const DEFAULT_FONT_JSON = new URL(`${import.meta.env.BASE_URL}resource/fonts/roboto/regular.json`, import.meta.url).href;
+const DEFAULT_FONT_PNG = new URL(`${import.meta.env.BASE_URL}resource/fonts/roboto/regular.png`, import.meta.url).href;
+const BlockBase = Block as unknown as new (options?: Record<string, any>) => THREE.Object3D;
+
+export const getDefaultUIPanelOptions = (): IUIPanel.options => {
+    return {
+        id: createUIPanelNodeId(),
+        type: "block",
+        name: "UIPanel",
+        position: [0, 0, 0],
+        rotation: [0, 0, 0],
+        scale: [1, 1, 1],
+        font: {
+            family: DEFAULT_FONT_FAMILY,
+            weight: "400",
+            style: "normal",
+        },
+        props: {
+            width: 1.6,
+            height: 0.9,
+            padding: 0.06,
+            backgroundColor: "#1f1f1f",
+            backgroundOpacity: 0.8,
+            borderRadius: 0.05,
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        children: [
+            {
+                id: createUIPanelNodeId(),
+                type: "text",
+                name: "Title",
+                props: {
+                    textContent: "UIPanel",
+                    fontSize: 0.08,
+                    color: "#ffffff",
+                    textAlign: "center",
+                },
+                children: [],
+            },
+        ],
+    };
+};
+
+const toRotationArray = (values?: number[]): [number, number, number] => {
+    if (!Array.isArray(values)) return [0, 0, 0];
+    return [Number(values[0] ?? 0), Number(values[1] ?? 0), Number(values[2] ?? 0)];
+};
+
+const resolveUIPanelOptions = (options: Partial<IUIPanel.options> = {}): IUIPanel.options => {
+    const resolved = getDefaultUIPanelOptions();
+    if (options.id) resolved.id = options.id;
+    if (options.type) resolved.type = options.type;
+    if (options.name) resolved.name = options.name;
+    if (options.props) resolved.props = { ...(resolved.props || {}), ...options.props };
+    if (options.states !== undefined) {
+        resolved.states = options.states ? JSON.parse(JSON.stringify(options.states)) : undefined;
+    }
+    if (Array.isArray(options.children)) {
+        resolved.children = options.children.map(child => cloneUIPanelNode(child));
+    }
+    if (Array.isArray(options.position)) resolved.position = options.position.slice();
+    if (Array.isArray(options.rotation)) resolved.rotation = toRotationArray(options.rotation);
+    if (Array.isArray(options.scale)) resolved.scale = options.scale.slice();
+    if (options.font) resolved.font = { ...resolved.font, ...options.font };
+
+    if (resolved.type !== "block") resolved.type = "block";
+    normalizeUIPanelNode(resolved);
+    return resolved;
+};
+
+const extractRootOptions = (options: IUIPanel.options): IUIPanel.options => {
+    return {
+        id: options.id || createUIPanelNodeId(),
+        type: "block",
+        name: options.name || "UIPanel",
+        position: Array.isArray(options.position) ? options.position.slice() : [0, 0, 0],
+        rotation: Array.isArray(options.rotation) ? toRotationArray(options.rotation) : [0, 0, 0],
+        scale: Array.isArray(options.scale) ? options.scale.slice() : [1, 1, 1],
+        font: options.font ? { ...options.font } : undefined,
+        props: options.props ? JSON.parse(JSON.stringify(options.props)) : {},
+        states: options.states ? JSON.parse(JSON.stringify(options.states)) : undefined,
+        children: [],
+    };
+};
+
+type UIPanelElement = THREE.Object3D & {
+    options?: UIPanelNode;
+    updateRootId?: (rootId: string) => void;
+    hasInteractiveState?: () => boolean;
+    applyState?: (state: string | null) => void;
+};
+
+export default class UIPanel extends BlockBase {
+    type = "UIPanel";
+    isUIPanel = true;
+    options: IUIPanel.options;
+    declare set: (options: Record<string, any>) => void;
+    private controller: UIPanelElementController;
+    private elementMap = new Map<string, UIPanelElement>();
+    private hoveredNodeId: string | null = null;
+    private pressedNodeId: string | null = null;
+    private static fontReady = false;
+    private static interactivePanels = new Set<UIPanel>();
+    private static interactionBound = false;
+    private static boundViewer: any | null = null;
+    private static pointerMoveHandler = (payload: any) => UIPanel.handlePointerMove(payload);
+    private static pointerDownHandler = (payload: any) => UIPanel.handlePointerDown(payload);
+    private static pointerUpHandler = (payload: any) => UIPanel.handlePointerUp(payload);
+    private static viewerInitHandler = (viewer: any) => UIPanel.bindViewer(viewer);
+    private handleAdded = () => {
+        this.updateInteractionRegistration();
+        this.requestUpdate();
+    };
+    private handleRemoved = () => {
+        this.updateInteractionRegistration();
+    };
+
+    constructor(options: Partial<IUIPanel.options> = {}, init: { buildChildren?: boolean } = {}) {
+        const resolvedOptions = resolveUIPanelOptions(options);
+        const rootOptions = extractRootOptions(resolvedOptions);
+        const { props } = extractUIPanelProps(rootOptions as UIPanelNode);
+        super(props);
+
+        this.options = rootOptions;
+        this.name = this.options.name;
+        this.position.fromArray(this.options.position);
+        if (this.options.rotation) this.rotation.fromArray(toRotationArray(this.options.rotation));
+        if (this.options.scale) this.scale.fromArray(this.options.scale);
+
+        this.controller = new UIPanelElementController(this, this.options as UIPanelNode, this.type, {
+            rootId: this.uuid,
+        });
+
+        this.ensureDefaultFont();
+        this.applyRootFont();
+
+        this.registerElement(this as UIPanelElement);
+
+        if (init.buildChildren !== false && Array.isArray(resolvedOptions.children)) {
+            resolvedOptions.children.forEach(child => {
+                const element = this.createElement(child);
+                if (element) this.add(element);
+            });
+        }
+
+        this.addEventListener("added", this.handleAdded);
+        this.addEventListener("removed", this.handleRemoved);
+        this.updateInteractionRegistration();
+    }
+
+    copy(source: this, recursive = true) {
+        this.elementMap.clear();
+        super.copy(source, recursive);
+        if (source?.options) {
+            this.options = extractRootOptions(source.options);
+            this.controller.updateOptions(this.options as UIPanelNode);
+            this.applyRootFont();
+
+            const registerDirect = (element: UIPanelElement) => {
+                if (!element?.options?.id) return;
+                this.elementMap.set(element.options.id, element);
+                element.updateRootId?.(this.uuid);
+            };
+
+            registerDirect(this as UIPanelElement);
+            if (recursive) {
+                this.traverse(child => {
+                    if (child === this) return;
+                    registerDirect(child as UIPanelElement);
+                });
+            }
+            this.updateInteractionRegistration();
+        }
+        return this;
+    }
+
+    requestUpdate() {
+        requestUIPanelRender();
+    }
+
+    registerElement(element: UIPanelElement) {
+        if (!element?.options?.id) return;
+        this.elementMap.set(element.options.id, element);
+        element.updateRootId?.(this.uuid);
+        this.updateInteractionRegistration();
+    }
+
+    refreshInteraction() {
+        this.updateInteractionRegistration();
+    }
+
+    unregisterElement(element: UIPanelElement) {
+        if (!element?.options?.id) return;
+        const nodeId = element.options.id;
+        this.elementMap.delete(nodeId);
+        if (this.hoveredNodeId === nodeId) this.hoveredNodeId = null;
+        if (this.pressedNodeId === nodeId) this.pressedNodeId = null;
+        this.updateInteractionRegistration();
+    }
+
+    getElementByNodeId(nodeId: string) {
+        return this.elementMap.get(nodeId) || null;
+    }
+
+    updateOptions(options: Partial<IUIPanel.options>) {
+        if (options.name !== undefined) {
+            this.options.name = options.name;
+            this.name = options.name;
+        }
+        if (Array.isArray(options.position)) {
+            this.options.position = options.position.slice();
+            this.position.fromArray(this.options.position);
+        }
+        if (Array.isArray(options.rotation)) {
+            const rotation = toRotationArray(options.rotation);
+            this.options.rotation = rotation.slice();
+            this.rotation.fromArray(rotation);
+        }
+        if (Array.isArray(options.scale)) {
+            this.options.scale = options.scale.slice();
+            this.scale.fromArray(this.options.scale);
+        }
+        if (options.font) {
+            this.options.font = { ...this.options.font, ...options.font };
+            this.applyRootFont();
+            this.requestUpdate();
+        }
+        if (options.props) {
+            this.controller.setProps(options.props);
+        }
+        if (options.states !== undefined) {
+            this.controller.setStates(options.states as UIPanelStateMap);
+            this.updateInteractionRegistration();
+        }
+    }
+
+    setProps(patch: Record<string, any>) {
+        this.controller.setProps(patch);
+    }
+
+    setStates(states?: UIPanelStateMap) {
+        this.controller.setStates(states);
+        this.updateInteractionRegistration();
+    }
+
+    applyState(state: string | null) {
+        this.controller.applyState(state);
+    }
+
+    hasInteractiveState() {
+        return this.controller.hasInteractiveState();
+    }
+
+    dispose() {
+        this.controller.dispose();
+        this.removeEventListener("added", this.handleAdded);
+        this.removeEventListener("removed", this.handleRemoved);
+        UIPanel.interactivePanels.delete(this);
+
+        this.children.slice().forEach(child => {
+            const anyChild = child as any;
+            anyChild.dispose?.();
+        });
+        this.elementMap.clear();
+        this.updateInteractionRegistration();
+    }
+
+    toJSON(meta?: THREE.JSONMeta) {
+        const snapshot = this.controller.detachInternalMeshes();
+        const data = super.toJSON(meta) as any;
+        this.controller.restoreInternalMeshes(snapshot);
+
+        const options = JSON.parse(JSON.stringify(this.options)) as IUIPanel.options;
+        options.position = this.position.toArray();
+        options.rotation = [this.rotation.x, this.rotation.y, this.rotation.z];
+        options.scale = this.scale.toArray();
+        data.object.type = this.type;
+        data.object.options = options;
+
+        return data;
+    }
+
+    static fromJSON(json: { options: IUIPanel.options }, init?: { buildChildren?: boolean }) {
+        return new UIPanel(json.options, { buildChildren: false, ...init });
+    }
+
+    private createElement(node: UIPanelNode): UIPanelElement | null {
+        normalizeUIPanelNode(node);
+        const elementOptions = stripUIPanelNodeChildren(node);
+        let element: UIPanelElement | null = null;
+        const init = { rootId: this.uuid };
+
+        switch (node.type) {
+            case "text":
+                element = new UIPanelText(elementOptions, init) as UIPanelElement;
+                break;
+            case "inline":
+                element = new UIPanelInline(elementOptions, init) as UIPanelElement;
+                break;
+            case "inlineBlock":
+                element = new UIPanelInlineBlock(elementOptions, init) as UIPanelElement;
+                break;
+            case "block":
+            default:
+                element = new UIPanelBlock(elementOptions, init) as UIPanelElement;
+                break;
+        }
+
+        if (!element) return null;
+
+        this.registerElement(element);
+
+        if (node.children && node.children.length > 0) {
+            node.children.forEach(child => {
+                if (!canAcceptUIPanelChild(node.type, child.type)) return;
+                const childElement = this.createElement(child);
+                if (childElement) element.add(childElement);
+            });
+        }
+
+        return element;
+    }
+
+    private ensureDefaultFont() {
+        if (UIPanel.fontReady) return;
+
+        try {
+            const existing = FontLibrary.getFontFamily(DEFAULT_FONT_FAMILY);
+            const family = existing || FontLibrary.addFontFamily(DEFAULT_FONT_FAMILY);
+            family.addVariant("400", "normal", DEFAULT_FONT_JSON, DEFAULT_FONT_PNG);
+            FontLibrary.prepare(family).then(() => {
+                UIPanel.fontReady = true;
+                this.requestUpdate();
+            });
+        } catch {
+            UIPanel.fontReady = true;
+        }
+    }
+
+    private applyRootFont() {
+        const font = this.options.font;
+        if (!font) return;
+
+        const fontProps: Record<string, any> = {};
+        if (font.family) fontProps.fontFamily = font.family;
+        if (font.texture) fontProps.fontTexture = font.texture;
+        if (font.weight) fontProps.fontWeight = font.weight;
+        if (font.style) fontProps.fontStyle = font.style;
+
+        if (Object.keys(fontProps).length > 0 && this.set) {
+            this.set(fontProps);
+        }
+    }
+
+    private hasInteractiveNodes() {
+        for (const element of this.elementMap.values()) {
+            if (element?.hasInteractiveState?.()) return true;
+        }
+        return false;
+    }
+
+    private updateInteractionRegistration() {
+        if (this.hasInteractiveNodes()) {
+            UIPanel.interactivePanels.add(this);
+            UIPanel.bindInteraction();
+        } else {
+            UIPanel.interactivePanels.delete(this);
+            if (UIPanel.interactivePanels.size === 0) {
+                UIPanel.unbindInteraction();
+            }
+        }
+    }
+
+    private resolveInteractiveNodeId(object: THREE.Object3D) {
+        let current: THREE.Object3D | null = object;
+        while (current && current !== this) {
+            const nodeId = (current as any).metadata?.__uiPanelNodeId;
+            if (nodeId) {
+                const element = this.elementMap.get(nodeId);
+                if (element?.hasInteractiveState?.()) return nodeId as string;
+            }
+            current = current.parent;
+        }
+
+        const rootId = this.options.id;
+        if (rootId) {
+            const element = this.elementMap.get(rootId);
+            if (element?.hasInteractiveState?.()) return rootId;
+        }
+        return null;
+    }
+
+    private applyStateForNode(nodeId: string, state: string | null) {
+        const element = this.elementMap.get(nodeId);
+        element?.applyState?.(state);
+    }
+
+    private setHoverNode(nodeId: string | null) {
+        if (this.hoveredNodeId === nodeId) return;
+        const previous = this.hoveredNodeId;
+        this.hoveredNodeId = nodeId;
+
+        if (previous && previous !== this.pressedNodeId) {
+            this.applyStateForNode(previous, null);
+        }
+        if (nodeId && nodeId !== this.pressedNodeId) {
+            this.applyStateForNode(nodeId, "hover");
+        }
+    }
+
+    private setPressedNode(nodeId: string | null) {
+        if (this.pressedNodeId === nodeId) return;
+        const previous = this.pressedNodeId;
+        this.pressedNodeId = nodeId;
+
+        if (previous) {
+            const fallback = this.hoveredNodeId === previous ? "hover" : null;
+            this.applyStateForNode(previous, fallback);
+        }
+        if (nodeId) {
+            this.applyStateForNode(nodeId, "active");
+        }
+    }
+
+    private static getPointerEvent(payload: any) {
+        if (!payload) return null;
+        if (payload.event) return payload.event;
+        if (payload.clientX !== undefined) return payload;
+        return null;
+    }
+
+    private static handlePointerMove(payload: any) {
+        const viewer = UIPanel.boundViewer || App.viewer;
+        if (!viewer || UIPanel.interactivePanels.size === 0) return;
+        const pointer = UIPanel.getPointerEvent(payload);
+        if (!pointer) return;
+
+        const array = getMousePosition(viewer.container, pointer.clientX, pointer.clientY);
+        const mouse = new THREE.Vector2();
+        mouse.set(array[0] * 2 - 1, -(array[1] * 2) + 1);
+        viewer.raycaster.setFromCamera(mouse, viewer.camera);
+
+        let best: { panel: UIPanel; nodeId: string; distance: number } | null = null;
+
+        UIPanel.interactivePanels.forEach(panel => {
+            const intersects = viewer.raycaster.intersectObject(panel, true);
+            if (!intersects.length) return;
+            const nodeId = panel.resolveInteractiveNodeId(intersects[0].object);
+            if (!nodeId) return;
+            const distance = intersects[0].distance;
+            if (!best || distance < best.distance) {
+                best = { panel, nodeId, distance };
+            }
+        });
+
+        UIPanel.interactivePanels.forEach(panel => {
+            if (best && panel === best.panel) {
+                panel.setHoverNode(best.nodeId);
+            } else {
+                panel.setHoverNode(null);
+            }
+        });
+    }
+
+    private static handlePointerDown(payload: any) {
+        const pointer = UIPanel.getPointerEvent(payload);
+        if (!pointer || pointer.button !== 0) return;
+        UIPanel.interactivePanels.forEach(panel => {
+            if (!panel.hoveredNodeId) return;
+            const element = panel.getElementByNodeId(panel.hoveredNodeId) as any;
+            if (element?.options?.states?.active) {
+                panel.setPressedNode(panel.hoveredNodeId);
+            }
+        });
+    }
+
+    private static handlePointerUp(payload: any) {
+        const pointer = UIPanel.getPointerEvent(payload);
+        if (!pointer || pointer.button !== 0) return;
+        UIPanel.interactivePanels.forEach(panel => {
+            if (panel.pressedNodeId) {
+                panel.setPressedNode(null);
+            }
+        });
+    }
+
+    private static bindViewer(viewer: any) {
+        if (!viewer || UIPanel.boundViewer === viewer) return;
+        if (UIPanel.boundViewer) {
+            UIPanel.unbindViewer(UIPanel.boundViewer);
+        }
+        UIPanel.boundViewer = viewer;
+        viewer.addEventListener("onPointerMove", UIPanel.pointerMoveHandler);
+        viewer.addEventListener("onPointerDown", UIPanel.pointerDownHandler);
+        viewer.addEventListener("onPointerUp", UIPanel.pointerUpHandler);
+    }
+
+    private static unbindViewer(viewer: any) {
+        viewer.removeEventListener("onPointerMove", UIPanel.pointerMoveHandler);
+        viewer.removeEventListener("onPointerDown", UIPanel.pointerDownHandler);
+        viewer.removeEventListener("onPointerUp", UIPanel.pointerUpHandler);
+        if (UIPanel.boundViewer === viewer) UIPanel.boundViewer = null;
+    }
+
+    private static bindInteraction() {
+        if (UIPanel.interactionBound) return;
+        UIPanel.interactionBound = true;
+        if (App.viewer) {
+            UIPanel.bindViewer(App.viewer);
+        } else {
+            useAddSignal("viewerInitCompleted", UIPanel.viewerInitHandler);
+        }
+    }
+
+    private static unbindInteraction() {
+        if (!UIPanel.interactionBound) return;
+        UIPanel.interactionBound = false;
+        if (UIPanel.boundViewer) {
+            UIPanel.unbindViewer(UIPanel.boundViewer);
+        }
+        useRemoveSignal("viewerInitCompleted", UIPanel.viewerInitHandler);
+    }
+}
diff --git a/packages/sdk/lib/core/objects/UIPanelBlock.ts b/packages/sdk/lib/core/objects/UIPanelBlock.ts
new file mode 100644
index 0000000..87b42d7
--- /dev/null
+++ b/packages/sdk/lib/core/objects/UIPanelBlock.ts
@@ -0,0 +1,113 @@
+import * as THREE from "three";
+import { Block } from "@/core/libs/three-mesh-ui/src/three-mesh-ui.js";
+import App from "@/core/app/App";
+import { findUIPanelRoot } from "@/utils/scene/uipanel";
+import {
+    UIPanelElementController,
+    UIPanelElementInit,
+    UIPanelNode,
+    extractUIPanelProps,
+    normalizeUIPanelElementOptions,
+} from "./UIPanelElementBase";
+
+const BlockBase = Block as unknown as new (options?: Record<string, any>) => THREE.Object3D;
+
+export default class UIPanelBlock extends BlockBase {
+    type = "UIPanelBlock";
+    isUIPanelElement = true;
+    options: UIPanelNode;
+    declare set: (options: Record<string, any>) => void;
+    private controller: UIPanelElementController;
+    private handleAdded = () => {
+        const parent = this.parent as any;
+        if (!parent || !this.isValidParent(parent)) {
+            parent?.remove?.(this);
+            return;
+        }
+        const panel = findUIPanelRoot(this) as any;
+        if (!panel) return;
+        this.controller.updateRootId(panel.uuid);
+        panel.registerElement?.(this);
+        this.traverse(child => {
+            if (child === this) return;
+            const anyChild = child as any;
+            if (!anyChild.isUIPanelElement || !anyChild.options?.id) return;
+            panel.registerElement?.(anyChild);
+        });
+        panel.requestUpdate?.();
+    };
+    private handleRemoved = () => {
+        const rootId = (this as any).metadata?.__uiPanelRootId;
+        const panel = rootId ? App.getObjectByUuid(rootId) : null;
+        panel?.unregisterElement?.(this);
+    };
+
+    constructor(options: Partial<UIPanelNode> = {}, init: UIPanelElementInit = {}) {
+        const normalized = normalizeUIPanelElementOptions(options, "block", "Block");
+        const { props } = extractUIPanelProps(normalized);
+        super(props);
+        this.options = normalized;
+        this.name = normalized.name || "Block";
+        this.controller = new UIPanelElementController(this, this.options, this.type, init);
+
+        this.addEventListener("added", this.handleAdded);
+        this.addEventListener("removed", this.handleRemoved);
+    }
+
+    updateRootId(rootId: string) {
+        this.controller.updateRootId(rootId);
+    }
+
+    updateOptions(options: Partial<UIPanelNode>) {
+        if (options.name !== undefined) {
+            this.options.name = options.name;
+            this.name = options.name || this.name;
+        }
+        if (options.props) this.setProps(options.props);
+        if (options.states !== undefined) this.setStates(options.states);
+    }
+
+    setProps(patch: Record<string, any>) {
+        this.controller.setProps(patch);
+    }
+
+    setStates(states?: Record<string, Record<string, any>>) {
+        this.controller.setStates(states);
+        const rootId = (this as any).metadata?.__uiPanelRootId;
+        const panel = rootId ? App.getObjectByUuid(rootId) : null;
+        panel?.refreshInteraction?.();
+    }
+
+    applyState(state: string | null) {
+        this.controller.applyState(state);
+    }
+
+    hasInteractiveState() {
+        return this.controller.hasInteractiveState();
+    }
+
+    dispose() {
+        this.controller.dispose();
+    }
+
+    toJSON(meta?: THREE.JSONMeta) {
+        const snapshot = this.controller.detachInternalMeshes();
+        const data = super.toJSON(meta) as any;
+        this.controller.restoreInternalMeshes(snapshot);
+
+        data.object.type = this.type;
+        const options = JSON.parse(JSON.stringify(this.options)) as UIPanelNode;
+        options.name = this.name;
+        data.object.options = options;
+
+        return data;
+    }
+
+    static fromJSON(json: { options: UIPanelNode }, init: UIPanelElementInit = {}) {
+        return new UIPanelBlock(json.options, init);
+    }
+
+    private isValidParent(parent: any) {
+        return parent?.type === "UIPanel" || parent?.type === "UIPanelBlock";
+    }
+}
diff --git a/packages/sdk/lib/core/objects/UIPanelElementBase.ts b/packages/sdk/lib/core/objects/UIPanelElementBase.ts
new file mode 100644
index 0000000..9053d2f
--- /dev/null
+++ b/packages/sdk/lib/core/objects/UIPanelElementBase.ts
@@ -0,0 +1,486 @@
+import * as THREE from "three";
+import App from "@/core/app/App";
+import ThreeMeshUI from "@/core/libs/three-mesh-ui/src/three-mesh-ui.js";
+import Frame from "@/core/libs/three-mesh-ui/src/frame/Frame.js";
+import { useAddSignal } from "@/hooks";
+
+export type UIPanelNode = IUIPanel.Node;
+export type UIPanelStateMap = Record<string, Record<string, any>>;
+export type UIPanelElementHost = THREE.Object3D & {
+    set?: (options: Record<string, any>) => void;
+    setBackgroundMesh?: (mesh: any) => void;
+    setFontMesh?: (mesh: any) => void;
+    _backgroundMesh?: THREE.Object3D;
+    _fontMesh?: THREE.Object3D;
+};
+
+export type UIPanelElementInit = {
+    rootId?: string;
+};
+
+export const createUIPanelNodeId = () => THREE.MathUtils.generateUUID();
+const UIPANEL_LOCAL_POSITION_KEY = "__localPosition";
+const UIPANEL_POSITION_EPSILON = 1e-6;
+
+export const UIPANEL_ELEMENT_TYPES: Record<IUIPanel.NodeType, string> = {
+    block: "UIPanelBlock",
+    text: "UIPanelText",
+    inline: "UIPanelInline",
+    inlineBlock: "UIPanelInlineBlock",
+};
+
+export const canAcceptUIPanelChild = (parentType: IUIPanel.NodeType, childType: IUIPanel.NodeType) => {
+    if (parentType === "block") {
+        return childType === "block" || childType === "text" || childType === "inline" || childType === "inlineBlock";
+    }
+    return false;
+};
+
+export const normalizeUIPanelNode = (node: UIPanelNode) => {
+    if (!node.type || !UIPANEL_ELEMENT_TYPES[node.type]) node.type = "block";
+    if (!node.id) node.id = createUIPanelNodeId();
+    if (!node.name) node.name = node.type;
+    if (!node.props || typeof node.props !== "object") node.props = {};
+    if (node.states && typeof node.states !== "object") node.states = undefined;
+
+    if (!Array.isArray(node.children)) node.children = [];
+
+    if (node.children.length > 0) {
+        const next: UIPanelNode[] = [];
+        node.children.forEach(child => {
+            if (!child) return;
+            normalizeUIPanelNode(child);
+            if (canAcceptUIPanelChild(node.type, child.type)) {
+                next.push(child);
+            }
+        });
+        node.children = next;
+    }
+};
+
+export const cloneUIPanelNode = (node: UIPanelNode): UIPanelNode => {
+    return {
+        id: node.id || createUIPanelNodeId(),
+        type: node.type,
+        name: node.name,
+        props: node.props ? JSON.parse(JSON.stringify(node.props)) : undefined,
+        states: node.states ? JSON.parse(JSON.stringify(node.states)) : undefined,
+        children: Array.isArray(node.children) ? node.children.map(child => cloneUIPanelNode(child)) : [],
+    };
+};
+
+export const stripUIPanelNodeChildren = (node: UIPanelNode): UIPanelNode => {
+    const copy = cloneUIPanelNode(node);
+    copy.children = [];
+    return copy;
+};
+
+export const normalizeUIPanelElementOptions = (
+    options: Partial<UIPanelNode>,
+    type: IUIPanel.NodeType,
+    fallbackName: string
+): UIPanelNode => {
+    const normalized: UIPanelNode = {
+        id: options.id || createUIPanelNodeId(),
+        type,
+        name: options.name || fallbackName,
+        props: options.props ? JSON.parse(JSON.stringify(options.props)) : {},
+        states: options.states ? JSON.parse(JSON.stringify(options.states)) : undefined,
+        children: [],
+    };
+    return normalized;
+};
+
+export const extractUIPanelProps = (node: UIPanelNode) => {
+    const props = node.props ? { ...node.props } : {};
+    const backgroundImage = props.backgroundImage;
+    if (typeof backgroundImage === "string" || backgroundImage instanceof THREE.Texture) {
+        delete props.backgroundImage;
+    }
+    if (Object.prototype.hasOwnProperty.call(props, UIPANEL_LOCAL_POSITION_KEY)) {
+        delete props[UIPANEL_LOCAL_POSITION_KEY];
+    }
+    return { props, backgroundImage };
+};
+
+const applyUIPanelLocalPositions = () => {
+    const scene = App.scene;
+    if (!scene) return;
+    scene.traverse(child => {
+        const element = child as any;
+        if (!element?.isUIPanelElement) return;
+        const stored = element.options?.props?.[UIPANEL_LOCAL_POSITION_KEY];
+        if (!Array.isArray(stored) || stored.length < 3) return;
+        if (!element.position?.fromArray) return;
+        element.position.fromArray(stored);
+    });
+};
+
+export const requestUIPanelRender = () => {
+    try {
+        ThreeMeshUI.update();
+        applyUIPanelLocalPositions();
+    } catch { }
+    (App.viewer as any)?.pluginRequestRender?.(true);
+};
+
+export const applyUIPanelMetadata = (
+    target: any,
+    data: {
+        nodeId: string;
+        rootId: string;
+        nodeType: IUIPanel.NodeType;
+        elementType: string;
+        role: "element" | "background" | "font";
+    }
+) => {
+    if (!target) return;
+    target.metadata = target.metadata || {};
+    target.metadata.__uiPanelNodeId = data.nodeId;
+    target.metadata.__uiPanelRootId = data.rootId;
+    target.metadata.__uiPanelNodeType = data.nodeType;
+    target.metadata.__uiPanelElementType = data.elementType;
+    target.metadata.__uiPanelRole = data.role;
+};
+
+const removeChildAt = (parent: THREE.Object3D, child: THREE.Object3D) => {
+    const index = parent.children.indexOf(child);
+    if (index >= 0) {
+        parent.children.splice(index, 1);
+        child.parent = null;
+        return index;
+    }
+    return -1;
+};
+
+const insertChildAt = (parent: THREE.Object3D, child: THREE.Object3D, index: number) => {
+    if (child.parent === parent) return;
+    if (index < 0 || index >= parent.children.length) {
+        parent.add(child);
+        return;
+    }
+    parent.children.splice(index, 0, child);
+    child.parent = parent;
+};
+
+export class UIPanelElementController {
+    private static controllerMap = new Map<UIPanelElementHost, UIPanelElementController>();
+    private static signalBound = false;
+    private static historySignalBound = false;
+    private static handleObjectChanged = (object: any) => {
+        const controller = UIPanelElementController.controllerMap.get(object as UIPanelElementHost);
+        controller?.syncExternalProps();
+    };
+    private static handleHistoryChanged = (cmd: any) => {
+        const target = cmd?.object as UIPanelElementHost | undefined;
+        if (!target) return;
+        const controller = UIPanelElementController.controllerMap.get(target);
+        controller?.syncHistoryCommand(cmd);
+    };
+    private static registerController(host: UIPanelElementHost, controller: UIPanelElementController) {
+        UIPanelElementController.controllerMap.set(host, controller);
+        if (!UIPanelElementController.signalBound) {
+            UIPanelElementController.signalBound = true;
+            useAddSignal("objectChanged", UIPanelElementController.handleObjectChanged);
+        }
+        if (!UIPanelElementController.historySignalBound) {
+            UIPanelElementController.historySignalBound = true;
+            useAddSignal("historyChanged", UIPanelElementController.handleHistoryChanged);
+        }
+    }
+    private static unregisterController(host: UIPanelElementHost) {
+        UIPanelElementController.controllerMap.delete(host);
+    }
+
+    private host: UIPanelElementHost;
+    private options: UIPanelNode;
+    private elementType: string;
+    private rootId: string;
+    private resolvedProps: Record<string, any> = {};
+    private backgroundTexture: THREE.Texture | null = null;
+    private backgroundTextureUrl: string | null = null;
+    private currentState: string | null = null;
+    private lastVisible = true;
+
+    constructor(host: UIPanelElementHost, options: UIPanelNode, elementType: string, init: UIPanelElementInit = {}) {
+        this.host = host;
+        this.options = options;
+        this.elementType = elementType;
+        this.rootId = init.rootId || "";
+        this.bindMeshHooks();
+        this.refreshMetadata();
+        this.applyProps(this.options.props || {});
+        this.lastVisible = Boolean(this.host.visible);
+        UIPanelElementController.registerController(this.host, this);
+    }
+
+    updateRootId(rootId: string) {
+        if (!rootId || this.rootId === rootId) return;
+        this.rootId = rootId;
+        this.refreshMetadata();
+    }
+
+    updateOptions(options: UIPanelNode) {
+        this.options = options;
+        this.refreshMetadata();
+    }
+
+    detachInternalMeshes() {
+        const background = this.host._backgroundMesh || null;
+        const font = this.host._fontMesh || null;
+        const backgroundIndex = background ? removeChildAt(this.host, background) : -1;
+        const fontIndex = font ? removeChildAt(this.host, font) : -1;
+        return { background, font, backgroundIndex, fontIndex };
+    }
+
+    restoreInternalMeshes(snapshot: { background: THREE.Object3D | null; font: THREE.Object3D | null; backgroundIndex: number; fontIndex: number }) {
+        if (snapshot.background) {
+            insertChildAt(this.host, snapshot.background, snapshot.backgroundIndex);
+        }
+        if (snapshot.font) {
+            insertChildAt(this.host, snapshot.font, snapshot.fontIndex);
+        }
+    }
+
+    setProps(patch: Record<string, any>) {
+        this.options.props = { ...(this.options.props || {}), ...patch };
+        if (Object.prototype.hasOwnProperty.call(patch, "visible")) {
+            const nextVisible = Boolean(patch.visible);
+            this.host.visible = nextVisible;
+            this.lastVisible = nextVisible;
+            this.markParentChildrenDirty();
+        }
+        if (
+            Object.prototype.hasOwnProperty.call(patch, "backgroundColor") ||
+            Object.prototype.hasOwnProperty.call(patch, "backgroundOpacity") ||
+            Object.prototype.hasOwnProperty.call(patch, "backgroundImage")
+        ) {
+            this.ensureBackgroundMesh();
+        }
+        this.applyProps(this.options.props || {});
+    }
+
+    setStates(states?: UIPanelStateMap) {
+        if (states && Object.keys(states).length > 0) {
+            this.options.states = JSON.parse(JSON.stringify(states));
+        } else {
+            delete this.options.states;
+        }
+        this.applyState(this.currentState);
+    }
+
+    hasInteractiveState() {
+        const states = this.options.states;
+        if (!states) return false;
+        return Boolean(states.hover || states.active);
+    }
+
+    applyState(state: string | null) {
+        this.currentState = state;
+        const baseProps = this.resolvedProps || {};
+        const states = this.options.states || {};
+        const stateProps = state && states[state] ? { ...states[state] } : null;
+        if (stateProps && typeof stateProps.backgroundImage === "string") {
+            delete stateProps.backgroundImage;
+        }
+        if (this.host.set) {
+            this.host.set(stateProps ? { ...baseProps, ...stateProps } : { ...baseProps });
+        }
+        requestUIPanelRender();
+    }
+
+    dispose() {
+        this.releaseBackgroundTexture();
+        UIPanelElementController.unregisterController(this.host);
+    }
+
+    private refreshMetadata() {
+        this.applyMeshMetadata(this.host, "element");
+        if (this.host._backgroundMesh) this.applyMeshMetadata(this.host._backgroundMesh, "background");
+        if (this.host._fontMesh) this.applyMeshMetadata(this.host._fontMesh, "font");
+    }
+
+    private applyMeshMetadata(target: any, role: "element" | "background" | "font") {
+        if (role === "background" || role === "font") {
+            target.ignore = true;
+            if (!target.proxy) {
+                target.proxy = this.host;
+            }
+            this.enableUIPanelRaycast(target);
+        }
+        applyUIPanelMetadata(target, {
+            nodeId: this.options.id,
+            rootId: this.rootId,
+            nodeType: this.options.type,
+            elementType: this.elementType,
+            role,
+        });
+    }
+
+    private enableUIPanelRaycast(target: any) {
+        if (!target?.isMesh) return;
+        if (target.raycast === THREE.Mesh.prototype.raycast) return;
+        target.raycast = THREE.Mesh.prototype.raycast;
+    }
+
+    private bindMeshHooks() {
+        const host = this.host as any;
+        const originalSetBackgroundMesh = host.setBackgroundMesh?.bind(host);
+        if (originalSetBackgroundMesh) {
+            host.setBackgroundMesh = (mesh: any) => {
+                this.applyMeshMetadata(mesh, "background");
+                return originalSetBackgroundMesh(mesh);
+            };
+        }
+
+        const originalSetFontMesh = host.setFontMesh?.bind(host);
+        if (originalSetFontMesh) {
+            host.setFontMesh = (mesh: any) => {
+                this.applyMeshMetadata(mesh, "font");
+                return originalSetFontMesh(mesh);
+            };
+        }
+    }
+
+    private ensureBackgroundMesh() {
+        if (!this.host.setBackgroundMesh) return;
+        const existing = this.host._backgroundMesh;
+        if (existing) {
+            const isAttached = existing.parent === this.host && this.host.children.includes(existing);
+            if (!isAttached) {
+                existing.parent?.remove(existing);
+                this.host.setBackgroundMesh(existing as any);
+            }
+            return existing;
+        }
+        const backgroundMesh = new Frame(this.host as any);
+        this.host.setBackgroundMesh(backgroundMesh);
+        return backgroundMesh;
+    }
+
+    private releaseBackgroundTexture() {
+        const texture = this.backgroundTexture;
+        if (texture) {
+            texture.dispose();
+        }
+        this.backgroundTexture = null;
+        this.backgroundTextureUrl = null;
+        if (this.host.set) {
+            this.host.set({ backgroundImage: null });
+        }
+    }
+
+    private setBackgroundTexture(texture: THREE.Texture) {
+        this.releaseBackgroundTexture();
+        texture.colorSpace = THREE.SRGBColorSpace;
+        this.backgroundTexture = texture;
+        this.backgroundTextureUrl = "__texture__";
+        if (this.host.set) {
+            this.host.set({ backgroundImage: texture });
+        }
+    }
+
+    private applyBackgroundImage(url: string) {
+        const trimmed = typeof url === "string" ? url.trim() : "";
+        if (!trimmed) {
+            this.releaseBackgroundTexture();
+            return;
+        }
+        if (this.backgroundTextureUrl === trimmed && this.backgroundTexture) {
+            if (this.host.set) {
+                this.host.set({ backgroundImage: this.backgroundTexture });
+            }
+            return;
+        }
+
+        this.releaseBackgroundTexture();
+        this.backgroundTextureUrl = trimmed;
+        App.resource.loadURLTexture(trimmed, (texture: THREE.Texture) => {
+            if (this.backgroundTextureUrl !== trimmed) {
+                texture.dispose?.();
+                return;
+            }
+            texture.colorSpace = THREE.SRGBColorSpace;
+            this.backgroundTexture = texture;
+            if (this.host.set) {
+                this.host.set({ backgroundImage: texture });
+            }
+            requestUIPanelRender();
+        });
+    }
+
+    private buildResolvedProps(props: Record<string, any>) {
+        const resolved: Record<string, any> = { ...props };
+        if (Object.prototype.hasOwnProperty.call(resolved, UIPANEL_LOCAL_POSITION_KEY)) {
+            delete resolved[UIPANEL_LOCAL_POSITION_KEY];
+        }
+        if (Object.prototype.hasOwnProperty.call(resolved, "backgroundImage")) {
+            const value = resolved.backgroundImage;
+            if (typeof value === "string") {
+                delete resolved.backgroundImage;
+                this.applyBackgroundImage(value);
+            } else if (value instanceof THREE.Texture) {
+                this.setBackgroundTexture(value);
+                resolved.backgroundImage = value;
+            } else if (!value) {
+                delete resolved.backgroundImage;
+                this.releaseBackgroundTexture();
+            }
+        } else if (this.backgroundTexture) {
+            resolved.backgroundImage = this.backgroundTexture;
+        }
+        return resolved;
+    }
+
+    private applyProps(props: Record<string, any>) {
+        this.resolvedProps = this.buildResolvedProps(props);
+        this.applyLineBreak(props);
+        this.applyState(this.currentState);
+    }
+
+    private applyLineBreak(props: Record<string, any>) {
+        const value = props.lineBreak ?? props.breakOn;
+        if (value === undefined) return;
+        const lineBreak = (this.host as any)?._lineBreak;
+        if (!lineBreak || typeof lineBreak.value === "undefined") return;
+        lineBreak.value = value;
+    }
+
+    private syncExternalProps() {
+        this.syncExternalVisible();
+    }
+
+    private syncExternalVisible() {
+        const actual = Boolean(this.host.visible);
+        if (actual === this.lastVisible) return;
+        this.setProps({ visible: actual });
+    }
+
+    private syncHistoryCommand(cmd: any) {
+        if (!cmd || cmd.type !== "SetPositionCommand") return;
+        this.syncLocalPositionFromHost();
+    }
+
+    private syncLocalPositionFromHost() {
+        const host = this.host as any;
+        if (!host?.isUIPanelElement || !this.options) return;
+        const props = this.options.props || (this.options.props = {});
+        const stored = props[UIPANEL_LOCAL_POSITION_KEY];
+        const position = this.host.position;
+        const needsUpdate =
+            !Array.isArray(stored) ||
+            stored.length < 3 ||
+            Math.abs(stored[0] - position.x) > UIPANEL_POSITION_EPSILON ||
+            Math.abs(stored[1] - position.y) > UIPANEL_POSITION_EPSILON ||
+            Math.abs(stored[2] - position.z) > UIPANEL_POSITION_EPSILON;
+        if (needsUpdate) {
+            props[UIPANEL_LOCAL_POSITION_KEY] = position.toArray();
+        }
+    }
+
+    private markParentChildrenDirty() {
+        const parent = this.host.parent as any;
+        if (!parent?.isUI || !parent._children) return;
+        parent._children._needsUpdate = true;
+    }
+}
diff --git a/packages/sdk/lib/core/objects/UIPanelInline.ts b/packages/sdk/lib/core/objects/UIPanelInline.ts
new file mode 100644
index 0000000..f71b302
--- /dev/null
+++ b/packages/sdk/lib/core/objects/UIPanelInline.ts
@@ -0,0 +1,107 @@
+import * as THREE from "three";
+import { Inline } from "@/core/libs/three-mesh-ui/src/three-mesh-ui.js";
+import App from "@/core/app/App";
+import { findUIPanelRoot } from "@/utils/scene/uipanel";
+import {
+    UIPanelElementController,
+    UIPanelElementInit,
+    UIPanelNode,
+    extractUIPanelProps,
+    normalizeUIPanelElementOptions,
+} from "./UIPanelElementBase";
+
+const InlineBase = Inline as unknown as new (options?: Record<string, any>) => THREE.Object3D;
+
+export default class UIPanelInline extends InlineBase {
+    type = "UIPanelInline";
+    isUIPanelElement = true;
+    options: UIPanelNode;
+    declare set: (options: Record<string, any>) => void;
+    private controller: UIPanelElementController;
+    private handleAdded = () => {
+        const parent = this.parent as any;
+        if (!parent || !this.isValidParent(parent)) {
+            parent?.remove?.(this);
+            return;
+        }
+        const panel = findUIPanelRoot(this) as any;
+        if (!panel) return;
+        this.controller.updateRootId(panel.uuid);
+        panel.registerElement?.(this);
+        panel.requestUpdate?.();
+    };
+    private handleRemoved = () => {
+        const rootId = (this as any).metadata?.__uiPanelRootId;
+        const panel = rootId ? App.getObjectByUuid(rootId) : null;
+        panel?.unregisterElement?.(this);
+    };
+
+    constructor(options: Partial<UIPanelNode> = {}, init: UIPanelElementInit = {}) {
+        const normalized = normalizeUIPanelElementOptions(options, "inline", "Inline");
+        const { props } = extractUIPanelProps(normalized);
+        super(props);
+        this.options = normalized;
+        this.name = normalized.name || "Inline";
+        this.controller = new UIPanelElementController(this, this.options, this.type, init);
+
+        this.addEventListener("added", this.handleAdded);
+        this.addEventListener("removed", this.handleRemoved);
+    }
+
+    updateRootId(rootId: string) {
+        this.controller.updateRootId(rootId);
+    }
+
+    updateOptions(options: Partial<UIPanelNode>) {
+        if (options.name !== undefined) {
+            this.options.name = options.name;
+            this.name = options.name || this.name;
+        }
+        if (options.props) this.setProps(options.props);
+        if (options.states !== undefined) this.setStates(options.states);
+    }
+
+    setProps(patch: Record<string, any>) {
+        this.controller.setProps(patch);
+    }
+
+    setStates(states?: Record<string, Record<string, any>>) {
+        this.controller.setStates(states);
+        const rootId = (this as any).metadata?.__uiPanelRootId;
+        const panel = rootId ? App.getObjectByUuid(rootId) : null;
+        panel?.refreshInteraction?.();
+    }
+
+    applyState(state: string | null) {
+        this.controller.applyState(state);
+    }
+
+    hasInteractiveState() {
+        return this.controller.hasInteractiveState();
+    }
+
+    dispose() {
+        this.controller.dispose();
+    }
+
+    toJSON(meta?: THREE.JSONMeta) {
+        const snapshot = this.controller.detachInternalMeshes();
+        const data = super.toJSON(meta) as any;
+        this.controller.restoreInternalMeshes(snapshot);
+
+        data.object.type = this.type;
+        const options = JSON.parse(JSON.stringify(this.options)) as UIPanelNode;
+        options.name = this.name;
+        data.object.options = options;
+
+        return data;
+    }
+
+    static fromJSON(json: { options: UIPanelNode }, init: UIPanelElementInit = {}) {
+        return new UIPanelInline(json.options, init);
+    }
+
+    private isValidParent(parent: any) {
+        return parent?.type === "UIPanel" || parent?.type === "UIPanelBlock";
+    }
+}
diff --git a/packages/sdk/lib/core/objects/UIPanelInlineBlock.ts b/packages/sdk/lib/core/objects/UIPanelInlineBlock.ts
new file mode 100644
index 0000000..6c3c755
--- /dev/null
+++ b/packages/sdk/lib/core/objects/UIPanelInlineBlock.ts
@@ -0,0 +1,107 @@
+import * as THREE from "three";
+import { InlineBlock } from "@/core/libs/three-mesh-ui/src/three-mesh-ui.js";
+import App from "@/core/app/App";
+import { findUIPanelRoot } from "@/utils/scene/uipanel";
+import {
+    UIPanelElementController,
+    UIPanelElementInit,
+    UIPanelNode,
+    extractUIPanelProps,
+    normalizeUIPanelElementOptions,
+} from "./UIPanelElementBase";
+
+const InlineBlockBase = InlineBlock as unknown as new (options?: Record<string, any>) => THREE.Object3D;
+
+export default class UIPanelInlineBlock extends InlineBlockBase {
+    type = "UIPanelInlineBlock";
+    isUIPanelElement = true;
+    options: UIPanelNode;
+    declare set: (options: Record<string, any>) => void;
+    private controller: UIPanelElementController;
+    private handleAdded = () => {
+        const parent = this.parent as any;
+        if (!parent || !this.isValidParent(parent)) {
+            parent?.remove?.(this);
+            return;
+        }
+        const panel = findUIPanelRoot(this) as any;
+        if (!panel) return;
+        this.controller.updateRootId(panel.uuid);
+        panel.registerElement?.(this);
+        panel.requestUpdate?.();
+    };
+    private handleRemoved = () => {
+        const rootId = (this as any).metadata?.__uiPanelRootId;
+        const panel = rootId ? App.getObjectByUuid(rootId) : null;
+        panel?.unregisterElement?.(this);
+    };
+
+    constructor(options: Partial<UIPanelNode> = {}, init: UIPanelElementInit = {}) {
+        const normalized = normalizeUIPanelElementOptions(options, "inlineBlock", "InlineBlock");
+        const { props } = extractUIPanelProps(normalized);
+        super(props);
+        this.options = normalized;
+        this.name = normalized.name || "InlineBlock";
+        this.controller = new UIPanelElementController(this, this.options, this.type, init);
+
+        this.addEventListener("added", this.handleAdded);
+        this.addEventListener("removed", this.handleRemoved);
+    }
+
+    updateRootId(rootId: string) {
+        this.controller.updateRootId(rootId);
+    }
+
+    updateOptions(options: Partial<UIPanelNode>) {
+        if (options.name !== undefined) {
+            this.options.name = options.name;
+            this.name = options.name || this.name;
+        }
+        if (options.props) this.setProps(options.props);
+        if (options.states !== undefined) this.setStates(options.states);
+    }
+
+    setProps(patch: Record<string, any>) {
+        this.controller.setProps(patch);
+    }
+
+    setStates(states?: Record<string, Record<string, any>>) {
+        this.controller.setStates(states);
+        const rootId = (this as any).metadata?.__uiPanelRootId;
+        const panel = rootId ? App.getObjectByUuid(rootId) : null;
+        panel?.refreshInteraction?.();
+    }
+
+    applyState(state: string | null) {
+        this.controller.applyState(state);
+    }
+
+    hasInteractiveState() {
+        return this.controller.hasInteractiveState();
+    }
+
+    dispose() {
+        this.controller.dispose();
+    }
+
+    toJSON(meta?: THREE.JSONMeta) {
+        const snapshot = this.controller.detachInternalMeshes();
+        const data = super.toJSON(meta) as any;
+        this.controller.restoreInternalMeshes(snapshot);
+
+        data.object.type = this.type;
+        const options = JSON.parse(JSON.stringify(this.options)) as UIPanelNode;
+        options.name = this.name;
+        data.object.options = options;
+
+        return data;
+    }
+
+    static fromJSON(json: { options: UIPanelNode }, init: UIPanelElementInit = {}) {
+        return new UIPanelInlineBlock(json.options, init);
+    }
+
+    private isValidParent(parent: any) {
+        return parent?.type === "UIPanel" || parent?.type === "UIPanelBlock";
+    }
+}
diff --git a/packages/sdk/lib/core/objects/UIPanelText.ts b/packages/sdk/lib/core/objects/UIPanelText.ts
new file mode 100644
index 0000000..35dad34
--- /dev/null
+++ b/packages/sdk/lib/core/objects/UIPanelText.ts
@@ -0,0 +1,199 @@
+import * as THREE from "three";
+import { Text } from "@/core/libs/three-mesh-ui/src/three-mesh-ui.js";
+import App from "@/core/app/App";
+import { findUIPanelRoot } from "@/utils/scene/uipanel";
+import {
+    UIPanelElementController,
+    UIPanelElementInit,
+    UIPanelNode,
+    extractUIPanelProps,
+    normalizeUIPanelElementOptions,
+} from "./UIPanelElementBase";
+
+const TextBase = Text as unknown as new (options?: Record<string, any>) => THREE.Object3D;
+
+export default class UIPanelText extends TextBase {
+    type = "UIPanelText";
+    isUIPanelElement = true;
+    options: UIPanelNode;
+    declare set: (options: Record<string, any>) => void;
+    declare addAfterUpdate: (fn: () => void) => void;
+    declare removeAfterUpdate: (fn: () => void) => void;
+    private controller: UIPanelElementController;
+    private inlineRebuildQueued = false;
+    private handleAdded = () => {
+        const parent = this.parent as any;
+        if (!parent || !this.isValidParent(parent)) {
+            parent?.remove?.(this);
+            return;
+        }
+        const panel = findUIPanelRoot(this) as any;
+        if (!panel) return;
+        this.controller.updateRootId(panel.uuid);
+        panel.registerElement?.(this);
+        panel.requestUpdate?.();
+        this.syncAnonymousInlineProxy();
+    };
+    private handleRemoved = () => {
+        const rootId = (this as any).metadata?.__uiPanelRootId;
+        const panel = rootId ? App.getObjectByUuid(rootId) : null;
+        panel?.unregisterElement?.(this);
+    };
+    private handleAfterUpdate = () => {
+        if (this.reconcileAnonymousInlineChildren()) {
+            return;
+        }
+        this.syncAnonymousInlineProxy();
+    };
+
+    constructor(options: Partial<UIPanelNode> = {}, init: UIPanelElementInit = {}) {
+        const normalized = normalizeUIPanelElementOptions(options, "text", "Text");
+        const { props } = extractUIPanelProps(normalized);
+        super(props);
+        this.options = normalized;
+        this.name = normalized.name || "Text";
+        this.controller = new UIPanelElementController(this, this.options, this.type, init);
+
+        this.addEventListener("added", this.handleAdded);
+        this.addEventListener("removed", this.handleRemoved);
+        this.addAfterUpdate?.(this.handleAfterUpdate);
+    }
+
+    updateRootId(rootId: string) {
+        this.controller.updateRootId(rootId);
+    }
+
+    updateOptions(options: Partial<UIPanelNode>) {
+        if (options.name !== undefined) {
+            this.options.name = options.name;
+            this.name = options.name || this.name;
+        }
+        if (options.props) this.setProps(options.props);
+        if (options.states !== undefined) this.setStates(options.states);
+    }
+
+    setProps(patch: Record<string, any>) {
+        this.controller.setProps(patch);
+        if (Object.prototype.hasOwnProperty.call(patch, "textContent")) {
+            this.syncAnonymousInlineProxy();
+        }
+    }
+
+    setStates(states?: Record<string, Record<string, any>>) {
+        this.controller.setStates(states);
+        const rootId = (this as any).metadata?.__uiPanelRootId;
+        const panel = rootId ? App.getObjectByUuid(rootId) : null;
+        panel?.refreshInteraction?.();
+    }
+
+    applyState(state: string | null) {
+        this.controller.applyState(state);
+    }
+
+    hasInteractiveState() {
+        return this.controller.hasInteractiveState();
+    }
+
+    dispose() {
+        this.controller.dispose();
+        this.removeAfterUpdate?.(this.handleAfterUpdate);
+    }
+
+    toJSON(meta?: THREE.JSONMeta) {
+        const snapshot = this.controller.detachInternalMeshes();
+        const inlineSnapshot = this.detachAnonymousInlineChildren();
+        const data = super.toJSON(meta) as any;
+        this.restoreAnonymousInlineChildren(inlineSnapshot);
+        this.controller.restoreInternalMeshes(snapshot);
+
+        data.object.type = this.type;
+        const options = JSON.parse(JSON.stringify(this.options)) as UIPanelNode;
+        options.name = this.name;
+        data.object.options = options;
+
+        return data;
+    }
+
+    static fromJSON(json: { options: UIPanelNode }, init: UIPanelElementInit = {}) {
+        return new UIPanelText(json.options, init);
+    }
+
+    private isValidParent(parent: any) {
+        return parent?.type === "UIPanel" || parent?.type === "UIPanelBlock";
+    }
+
+    private syncAnonymousInlineProxy() {
+        this.children.forEach(child => {
+            if (!this.isAnonymousInlineChild(child)) return;
+            this.enableAnonymousInlineRaycast(child as any);
+            child.traverse(node => {
+                const anyNode = node as any;
+                if (!anyNode.proxy) {
+                    anyNode.proxy = this;
+                }
+            });
+        });
+    }
+
+    private reconcileAnonymousInlineChildren() {
+        const anonymousChildren = this.children.filter(child => this.isAnonymousInlineChild(child));
+        if (anonymousChildren.length === 0) return false;
+        const hasInline = anonymousChildren.some(child => (child as any).isInline);
+        if (anonymousChildren.length === 1 && hasInline) {
+            return false;
+        }
+        anonymousChildren.forEach(child => {
+            this.remove(child);
+            (child as any).clear?.();
+        });
+        const textProp = (this as any)._textContent;
+        if (textProp) {
+            textProp._needsUpdate = true;
+        }
+        this.queueInlineRebuild();
+        return true;
+    }
+
+    private queueInlineRebuild() {
+        if (this.inlineRebuildQueued) return;
+        this.inlineRebuildQueued = true;
+        queueMicrotask(() => {
+            this.inlineRebuildQueued = false;
+            const panel = findUIPanelRoot(this) as any;
+            panel?.requestUpdate?.();
+        });
+    }
+
+    private detachAnonymousInlineChildren() {
+        const snapshot: Array<{ child: THREE.Object3D; index: number }> = [];
+        for (let i = this.children.length - 1; i >= 0; i--) {
+            const child = this.children[i];
+            if (!this.isAnonymousInlineChild(child)) continue;
+            this.children.splice(i, 1);
+            child.parent = null;
+            snapshot.push({ child, index: i });
+        }
+        return snapshot;
+    }
+
+    private restoreAnonymousInlineChildren(snapshot: Array<{ child: THREE.Object3D; index: number }>) {
+        if (!snapshot.length) return;
+        snapshot.sort((a, b) => a.index - b.index).forEach(({ child, index }) => {
+            if (child.parent === this) return;
+            const targetIndex = Math.min(Math.max(index, 0), this.children.length);
+            this.children.splice(targetIndex, 0, child);
+            child.parent = this;
+        });
+    }
+
+    private isAnonymousInlineChild(child: THREE.Object3D) {
+        return (child as any).name === "anonymousInline";
+    }
+
+    private enableAnonymousInlineRaycast(child: any) {
+        const fontMesh = child?._fontMesh;
+        if (fontMesh?.isMesh) {
+            fontMesh.raycast = THREE.Mesh.prototype.raycast;
+        }
+    }
+}
diff --git a/packages/sdk/lib/core/objects/WaterPool.js b/packages/sdk/lib/core/objects/WaterPool.js
new file mode 100644
index 0000000..c2c4ddf
--- /dev/null
+++ b/packages/sdk/lib/core/objects/WaterPool.js
@@ -0,0 +1,1562 @@
+import * as THREE from 'three';
+import App from '@/core/app/App';
+import Loader from '@/core/loader/Loader';
+
+const DEFAULT_LIGHT = [0.7559289460184544, 0.7559289460184544, -0.3779644730092272];
+const COLOR_BLACK = new THREE.Color('black');
+const WATERPOOL_CLEAR_COLOR = 0x272727;
+const WATERPOOL_PICK_MATERIAL = new THREE.MeshBasicMaterial({
+    colorWrite: false,
+    depthWrite: false,
+    depthTest: false,
+    transparent: true,
+    opacity: 0,
+    side: THREE.DoubleSide,
+});
+
+const waterPoolSet = new Set();
+let waterPoolRenderingRegistered = false;
+let waterPoolRenderingPending = false;
+const waterPoolSceneState = {
+    texture: null,
+    resolution: new THREE.Vector2(),
+    renderId: 0,
+    lastCaptureId: -1,
+};
+
+function markWaterPoolRenderFrame() {
+    waterPoolSceneState.renderId += 1;
+}
+
+function ensureWaterPoolSceneTexture(renderer) {
+    if (!renderer) return;
+    renderer.getSize(waterPoolSceneState.resolution);
+    const w = waterPoolSceneState.resolution.x;
+    const h = waterPoolSceneState.resolution.y;
+    const texture = waterPoolSceneState.texture;
+    const image = texture ? texture.image : null;
+    if (!texture || !image || image.width !== w || image.height !== h) {
+        if (texture) texture.dispose();
+        waterPoolSceneState.texture = new THREE.FramebufferTexture(w, h);
+        waterPoolSceneState.texture.minFilter = THREE.LinearFilter;
+        waterPoolSceneState.texture.magFilter = THREE.LinearFilter;
+    }
+}
+
+function captureWaterPoolSceneTexture(renderer) {
+    if (!renderer) return;
+    if (waterPoolSceneState.lastCaptureId === waterPoolSceneState.renderId) {
+        return;
+    }
+    ensureWaterPoolSceneTexture(renderer);
+    if (!waterPoolSceneState.texture) return;
+    renderer.copyFramebufferToTexture(waterPoolSceneState.texture);
+    waterPoolSceneState.lastCaptureId = waterPoolSceneState.renderId;
+}
+
+function registerWaterPoolRendering() {
+    if (waterPoolRenderingRegistered) return;
+
+    const viewer = App?.viewer;
+    if (!viewer) {
+        waterPoolRenderingPending = true;
+        return;
+    }
+
+    waterPoolRenderingPending = false;
+    viewer.addEventListener("beforeRender", () => {
+        markWaterPoolRenderFrame();
+    });
+    viewer.addEventListener("afterAnimation", (e) => {
+        if (waterPoolSet.size === 0) return;
+
+        const renderer = App.viewer?.renderer;
+        if (!renderer) return;
+
+        waterPoolSet.forEach((pool) => {
+            if (!pool || typeof pool.step !== 'function') return;
+
+            pool.step(renderer);
+        });
+
+        e.toBeRender(true);
+
+        const prevClearColor = renderer.getClearColor(new THREE.Color());
+        const prevClearAlpha = renderer.getClearAlpha();
+        renderer.setRenderTarget(null);
+        renderer.setClearColor(WATERPOOL_CLEAR_COLOR, 0);
+        renderer.clear();
+        renderer.setClearColor(prevClearColor, prevClearAlpha);
+    });
+
+    waterPoolRenderingRegistered = true;
+}
+
+function registerWaterPool(pool) {
+    if (!pool) return;
+    if (pool._waterPoolRegistered || pool._waterPoolRegistering) return;
+    if (pool.loaded && typeof pool.loaded.then === 'function') {
+        pool._waterPoolRegistering = true;
+        pool.loaded.then(() => {
+            pool._waterPoolRegistering = false;
+            if (pool._waterPoolRemoved) return;
+            if (pool._waterPoolRegistered) return;
+            pool._waterPoolRegistered = true;
+            waterPoolSet.add(pool);
+            registerWaterPoolRendering();
+        }).catch(() => {
+            pool._waterPoolRegistering = false;
+        });
+        return;
+    }
+    pool._waterPoolRegistered = true;
+    waterPoolSet.add(pool);
+    registerWaterPoolRendering();
+}
+
+function unregisterWaterPool(pool) {
+    if (!pool) return;
+    pool._waterPoolRegistered = false;
+    pool._waterPoolRegistering = false;
+    waterPoolSet.delete(pool);
+}
+
+function serializeTexture(texture) {
+    if (!texture) return null;
+    if (!texture.isTexture || !texture.image) return null;
+    if (typeof document === 'undefined') return null;
+
+    const image = texture.image;
+    try {
+        if (image instanceof HTMLCanvasElement) {
+            return { type: 'texture', dataUrl: image.toDataURL('image/png') };
+        }
+    } catch (error) {
+        return null;
+    }
+
+    const canvas = document.createElement('canvas');
+    const width = image.width || image.videoWidth;
+    const height = image.height || image.videoHeight;
+    if (!width || !height) return null;
+
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return null;
+
+    try {
+        if (image instanceof ImageData) {
+            ctx.putImageData(image, 0, 0);
+        } else if (image.data && image.width && image.height) {
+            const data = image.data instanceof Uint8ClampedArray ? image.data : new Uint8ClampedArray(image.data);
+            const imageData = new ImageData(data, image.width, image.height);
+            ctx.putImageData(imageData, 0, 0);
+        } else {
+            ctx.drawImage(image, 0, 0, width, height);
+        }
+        return { type: 'texture', dataUrl: canvas.toDataURL('image/png') };
+    } catch (error) {
+        return null;
+    }
+}
+
+function restoreTexture(serialized) {
+    if (!serialized) return null;
+    if (serialized.type === 'texture' && serialized.dataUrl) {
+        const tex = new THREE.TextureLoader().load(serialized.dataUrl);
+        tex.wrapS = THREE.RepeatWrapping;
+        tex.wrapT = THREE.RepeatWrapping;
+        return tex;
+    }
+    return null;
+}
+
+function loadText(url) {
+    return new Promise((resolve, reject) => {
+        const loader = new THREE.FileLoader();
+        const _url = new URL(import.meta.env.BASE_URL + url, import.meta.url).href;
+        loader.load(_url, resolve, undefined, reject);
+    });
+}
+
+let shaderChunksPromise = null;
+function ensureShaderChunks() {
+    if (THREE.ShaderChunk['utils'] && THREE.ShaderChunk['cylinder_utils']) {
+        return Promise.resolve();
+    }
+    if (shaderChunksPromise) {
+        return shaderChunksPromise;
+    }
+    shaderChunksPromise = Promise.all([
+        loadText('resource/shaders/water/utils.glsl'),
+        loadText('resource/shaders/water/cylinder_utils.glsl')
+    ]).then(([utils, cylinderUtils]) => {
+        THREE.ShaderChunk['utils'] = utils;
+        THREE.ShaderChunk['cylinder_utils'] = cylinderUtils;
+    }).catch((error) => {
+        shaderChunksPromise = null;
+        throw error;
+    });
+    return shaderChunksPromise;
+}
+
+function createWallMaterial(type, light, tiles, wallOpacity, wallMode, volumeColor) {
+    const vertexPromise = loadText('resource/shaders/water/pool/vertex.glsl');
+    const fragmentPromise = type === 'cylinder'
+        ? loadText('resource/shaders/water/cylinder_pool/fragment.glsl')
+        : loadText('resource/shaders/water/pool/fragment.glsl');
+
+    return Promise.all([vertexPromise, fragmentPromise]).then(([vertexShader, fragmentShader]) => {
+        const material = new THREE.RawShaderMaterial({
+            uniforms: {
+                light: { value: light },
+                tiles: { value: tiles },
+                useTiles: { value: tiles ? 1 : 0 },
+                tilesColor: { value: volumeColor },
+                water: { value: null },
+                causticTex: { value: null },
+                sceneTexture: { value: null },
+                resolution: { value: new THREE.Vector2(1, 1) },
+                useSceneRefraction: { value: 1 },
+                surfaceTransmittance: { value: 0.65 },
+                normalStrength: { value: 0.6 },
+                refractionStrength: { value: 0.035 },
+                wallMode: { value: wallMode },
+                wallOpacity: { value: wallOpacity },
+                volumeColor: { value: volumeColor },
+                poolHeight: { value: 1 },
+                poolHalfSize: { value: new THREE.Vector2(1, 1) },
+                poolRadius: { value: 1 },
+            },
+            vertexShader: vertexShader,
+            fragmentShader: fragmentShader,
+            glslVersion: THREE.GLSL3,
+        });
+        material.side = THREE.DoubleSide;
+        if (wallOpacity < 1) {
+            material.transparent = true;
+            material.depthWrite = false;
+        }
+        return material;
+    });
+}
+
+class WaterSimulation {
+    constructor(size = 256) {
+        this._camera = new THREE.OrthographicCamera(0, 1, 1, 0, 0, 2000);
+        this._geometry = new THREE.PlaneGeometry(2, 2);
+
+        this._textureA = new THREE.WebGLRenderTarget(size, size, { type: THREE.FloatType });
+        this._textureB = new THREE.WebGLRenderTarget(size, size, { type: THREE.FloatType });
+        this.texture = this._textureA;
+
+        const shadersPromises = [
+            loadText('resource/shaders/water/simulation/vertex.glsl'),
+            loadText('resource/shaders/water/simulation/drop_fragment.glsl'),
+            loadText('resource/shaders/water/simulation/normal_fragment.glsl'),
+            loadText('resource/shaders/water/simulation/update_fragment.glsl'),
+        ];
+
+        const delta = 1 / size;
+
+        this.loaded = Promise.all(shadersPromises)
+            .then(([vertexShader, dropFragmentShader, normalFragmentShader, updateFragmentShader]) => {
+                const dropMaterial = new THREE.RawShaderMaterial({
+                    uniforms: {
+                        center: { value: [0, 0] },
+                        radius: { value: 0 },
+                        strength: { value: 0 },
+                        tInput: { value: null },
+                    },
+                    vertexShader: vertexShader,
+                    fragmentShader: dropFragmentShader,
+                    glslVersion: THREE.GLSL3,
+                });
+
+                const normalMaterial = new THREE.RawShaderMaterial({
+                    uniforms: {
+                        delta: { value: [delta, delta] },
+                        tInput: { value: null },
+                    },
+                    vertexShader: vertexShader,
+                    fragmentShader: normalFragmentShader,
+                    glslVersion: THREE.GLSL3,
+                });
+
+                const updateMaterial = new THREE.RawShaderMaterial({
+                    uniforms: {
+                        delta: { value: [delta, delta] },
+                        tInput: { value: null },
+                    },
+                    vertexShader: vertexShader,
+                    fragmentShader: updateFragmentShader,
+                    glslVersion: THREE.GLSL3,
+                });
+
+                this._dropMesh = new THREE.Mesh(this._geometry, dropMaterial);
+                this._normalMesh = new THREE.Mesh(this._geometry, normalMaterial);
+                this._updateMesh = new THREE.Mesh(this._geometry, updateMaterial);
+            });
+    }
+
+    addDrop(renderer, x, y, radius, strength) {
+        this._dropMesh.material.uniforms['center'].value = [x, y];
+        this._dropMesh.material.uniforms['radius'].value = radius;
+        this._dropMesh.material.uniforms['strength'].value = strength;
+
+        this._render(renderer, this._dropMesh);
+    }
+
+    stepSimulation(renderer) {
+        this._render(renderer, this._updateMesh);
+    }
+
+    updateNormals(renderer) {
+        this._render(renderer, this._normalMesh);
+    }
+
+    _render(renderer, mesh) {
+        const oldTexture = this.texture;
+        const newTexture = this.texture === this._textureA ? this._textureB : this._textureA;
+
+        mesh.material.uniforms['tInput'].value = oldTexture.texture;
+
+        renderer.setRenderTarget(newTexture);
+        renderer.render(mesh, this._camera);
+
+        this.texture = newTexture;
+    }
+}
+
+class Caustics {
+    constructor(lightFrontGeometry, light, size = 1024) {
+        this._camera = new THREE.OrthographicCamera(0, 1, 1, 0, 0, 2000);
+        this._geometry = lightFrontGeometry;
+        this.texture = new THREE.WebGLRenderTarget(size, size, { type: THREE.UnsignedByteType });
+
+        const shadersPromises = [
+            loadText('resource/shaders/water/caustics/vertex.glsl'),
+            loadText('resource/shaders/water/caustics/fragment.glsl')
+        ];
+
+        this.loaded = Promise.all(shadersPromises)
+            .then(([vertexShader, fragmentShader]) => {
+                const material = new THREE.RawShaderMaterial({
+                    uniforms: {
+                        light: { value: light },
+                        water: { value: null },
+                        poolHeight: { value: 1 },
+                        poolHalfSize: { value: new THREE.Vector2(1, 1) },
+                        poolRadius: { value: 1 },
+                    },
+                    vertexShader: vertexShader,
+                    fragmentShader: fragmentShader,
+                    glslVersion: THREE.GLSL3,
+                });
+
+                this._causticMesh = new THREE.Mesh(this._geometry, material);
+            });
+    }
+
+    update(renderer, waterTexture) {
+        this._causticMesh.material.uniforms['water'].value = waterTexture;
+
+        renderer.setRenderTarget(this.texture);
+        renderer.setClearColor(COLOR_BLACK, 0);
+        renderer.clear();
+        renderer.render(this._causticMesh, this._camera);
+    }
+}
+
+class CylinderCaustics {
+    constructor(lightFrontGeometry, light, size = 1024) {
+        this._camera = new THREE.OrthographicCamera(0, 1, 1, 0, 0, 2000);
+        this._geometry = lightFrontGeometry;
+        this.texture = new THREE.WebGLRenderTarget(size, size, { type: THREE.UnsignedByteType });
+
+        const shadersPromises = [
+            loadText('resource/shaders/water/cylinder_caustics/vertex.glsl'),
+            loadText('resource/shaders/water/cylinder_caustics/fragment.glsl')
+        ];
+
+        this.loaded = Promise.all(shadersPromises)
+            .then(([vertexShader, fragmentShader]) => {
+                const material = new THREE.RawShaderMaterial({
+                    uniforms: {
+                        light: { value: light },
+                        water: { value: null },
+                        poolHeight: { value: 1 },
+                        poolHalfSize: { value: new THREE.Vector2(1, 1) },
+                        poolRadius: { value: 1 },
+                    },
+                    vertexShader: vertexShader,
+                    fragmentShader: fragmentShader,
+                    glslVersion: THREE.GLSL3,
+                });
+
+                this._causticMesh = new THREE.Mesh(this._geometry, material);
+            });
+    }
+
+    update(renderer, waterTexture) {
+        this._causticMesh.material.uniforms['water'].value = waterTexture;
+
+        renderer.setRenderTarget(this.texture);
+        renderer.setClearColor(COLOR_BLACK, 0);
+        renderer.clear();
+        renderer.render(this._causticMesh, this._camera);
+    }
+}
+
+class Water {
+    constructor({ light, tiles, sky, segments }) {
+        this.geometry = new THREE.PlaneGeometry(2, 2, segments, segments);
+
+        const shadersPromises = [
+            loadText('resource/shaders/water/water/vertex.glsl'),
+            loadText('resource/shaders/water/water/fragment.glsl')
+        ];
+
+        this.loaded = Promise.all(shadersPromises)
+            .then(([vertexShader, fragmentShader]) => {
+                const baseUniforms = {
+                    light: { value: light },
+                    tiles: { value: tiles },
+                    useTiles: { value: tiles ? 1 : 0 },
+                    tilesColor: { value: new THREE.Color(0x2c5965) },
+                    sky: { value: sky },
+                    water: { value: null },
+                    causticTex: { value: null },
+                    underwater: { value: false },
+                    wallMode: { value: 0 },
+                    volumeColor: { value: new THREE.Color(0x2c5965) },
+                    surfaceColor: { value: new THREE.Color(0x4a8aa0) },
+                    useSky: { value: 0 },
+                    useSceneRefraction: { value: 1 },
+                    surfaceTransmittance: { value: 0.65 },
+                    normalStrength: { value: 0.6 },
+                    refractionStrength: { value: 0.035 },
+                    hasWall: { value: 1 },
+                    poolHeight: { value: 1 },
+                    poolHalfSize: { value: new THREE.Vector2(1, 1) },
+                    poolRadius: { value: 1 },
+                    sceneTexture: { value: null },
+                    resolution: { value: new THREE.Vector2(1, 1) },
+                };
+
+                const frontUniforms = THREE.UniformsUtils.clone(baseUniforms);
+                const backUniforms = THREE.UniformsUtils.clone(baseUniforms);
+
+                this.materialFront = new THREE.RawShaderMaterial({
+                    uniforms: frontUniforms,
+                    vertexShader: vertexShader,
+                    fragmentShader: fragmentShader,
+                    glslVersion: THREE.GLSL3,
+                });
+                this.materialBack = new THREE.RawShaderMaterial({
+                    uniforms: backUniforms,
+                    vertexShader: vertexShader,
+                    fragmentShader: fragmentShader,
+                    glslVersion: THREE.GLSL3,
+                });
+
+                this.materialFront.side = THREE.FrontSide;
+                this.materialBack.side = THREE.BackSide;
+                this.materialFront.uniforms['underwater'].value = true;
+                this.materialBack.uniforms['underwater'].value = false;
+
+                this.materials = [this.materialFront, this.materialBack];
+
+                this.meshFront = new THREE.Mesh(this.geometry, this.materialFront);
+                this.meshBack = new THREE.Mesh(this.geometry, this.materialBack);
+                this.meshes = [this.meshFront, this.meshBack];
+
+                this.material = this.materialFront;
+                this.mesh = this.meshFront;
+            });
+    }
+
+    getMaterials() {
+        if (this.materials && this.materials.length) {
+            return this.materials;
+        }
+        if (this.material) {
+            return [this.material];
+        }
+        return [];
+    }
+
+    _applyTextures(waterTexture, causticsTexture) {
+        const materials = this.getMaterials();
+        if (!materials.length) {
+            return;
+        }
+        materials.forEach((material) => {
+            if (!material || !material.uniforms) {
+                return;
+            }
+            material.uniforms['water'].value = waterTexture;
+            material.uniforms['causticTex'].value = causticsTexture;
+        });
+    }
+
+    draw(renderer, camera, waterTexture, causticsTexture) {
+        this._applyTextures(waterTexture, causticsTexture);
+
+        if (this.meshFront) {
+            renderer.render(this.meshFront, camera);
+        }
+        if (this.meshBack) {
+            renderer.render(this.meshBack, camera);
+        }
+    }
+}
+
+class CylinderWater {
+    constructor({ light, tiles, sky, segments }) {
+        this.geometry = new THREE.PlaneGeometry(2, 2, segments, segments);
+
+        const shadersPromises = [
+            loadText('resource/shaders/water/water/vertex.glsl'),
+            loadText('resource/shaders/water/cylinder_water/fragment.glsl')
+        ];
+
+        this.loaded = Promise.all(shadersPromises)
+            .then(([vertexShader, fragmentShader]) => {
+                const baseUniforms = {
+                    light: { value: light },
+                    tiles: { value: tiles },
+                    useTiles: { value: tiles ? 1 : 0 },
+                    tilesColor: { value: new THREE.Color(0x2c5965) },
+                    sky: { value: sky },
+                    water: { value: null },
+                    causticTex: { value: null },
+                    underwater: { value: false },
+                    wallMode: { value: 0 },
+                    volumeColor: { value: new THREE.Color(0x2c5965) },
+                    surfaceColor: { value: new THREE.Color(0x4a8aa0) },
+                    useSky: { value: 0 },
+                    useSceneRefraction: { value: 1 },
+                    surfaceTransmittance: { value: 0.65 },
+                    normalStrength: { value: 0.6 },
+                    refractionStrength: { value: 0.035 },
+                    hasWall: { value: 1 },
+                    poolHeight: { value: 1 },
+                    poolHalfSize: { value: new THREE.Vector2(1, 1) },
+                    poolRadius: { value: 1 },
+                    sceneTexture: { value: null },
+                    resolution: { value: new THREE.Vector2(1, 1) },
+                };
+
+                const frontUniforms = THREE.UniformsUtils.clone(baseUniforms);
+                const backUniforms = THREE.UniformsUtils.clone(baseUniforms);
+
+                this.materialFront = new THREE.RawShaderMaterial({
+                    uniforms: frontUniforms,
+                    vertexShader: vertexShader,
+                    fragmentShader: fragmentShader,
+                    glslVersion: THREE.GLSL3,
+                });
+                this.materialBack = new THREE.RawShaderMaterial({
+                    uniforms: backUniforms,
+                    vertexShader: vertexShader,
+                    fragmentShader: fragmentShader,
+                    glslVersion: THREE.GLSL3,
+                });
+
+                this.materialFront.side = THREE.FrontSide;
+                this.materialBack.side = THREE.BackSide;
+                this.materialFront.uniforms['underwater'].value = true;
+                this.materialBack.uniforms['underwater'].value = false;
+
+                this.materials = [this.materialFront, this.materialBack];
+
+                this.meshFront = new THREE.Mesh(this.geometry, this.materialFront);
+                this.meshBack = new THREE.Mesh(this.geometry, this.materialBack);
+                this.meshes = [this.meshFront, this.meshBack];
+
+                this.material = this.materialFront;
+                this.mesh = this.meshFront;
+            });
+    }
+
+    getMaterials() {
+        if (this.materials && this.materials.length) {
+            return this.materials;
+        }
+        if (this.material) {
+            return [this.material];
+        }
+        return [];
+    }
+
+    _applyTextures(waterTexture, causticsTexture) {
+        const materials = this.getMaterials();
+        if (!materials.length) {
+            return;
+        }
+        materials.forEach((material) => {
+            if (!material || !material.uniforms) {
+                return;
+            }
+            material.uniforms['water'].value = waterTexture;
+            material.uniforms['causticTex'].value = causticsTexture;
+        });
+    }
+
+    draw(renderer, camera, waterTexture, causticsTexture) {
+        this._applyTextures(waterTexture, causticsTexture);
+
+        if (this.meshFront) {
+            renderer.render(this.meshFront, camera);
+        }
+        if (this.meshBack) {
+            renderer.render(this.meshBack, camera);
+        }
+    }
+}
+
+class SquarePoolWall {
+    constructor(material) {
+        this._geometry = new THREE.BufferGeometry();
+        const vertices = new Float32Array([
+            -1, -1, -1,
+            -1, -1, 1,
+            -1, 1, -1,
+            -1, 1, 1,
+            1, -1, -1,
+            1, 1, -1,
+            1, -1, 1,
+            1, 1, 1,
+            -1, -1, -1,
+            1, -1, -1,
+            -1, -1, 1,
+            1, -1, 1,
+            -1, 1, -1,
+            -1, 1, 1,
+            1, 1, -1,
+            1, 1, 1,
+            -1, -1, -1,
+            -1, 1, -1,
+            1, -1, -1,
+            1, 1, -1,
+            -1, -1, 1,
+            1, -1, 1,
+            -1, 1, 1,
+            1, 1, 1
+        ]);
+        const indices = new Uint32Array([
+            0, 1, 2,
+            2, 1, 3,
+            4, 5, 6,
+            6, 5, 7,
+            12, 13, 14,
+            14, 13, 15,
+            16, 17, 18,
+            18, 17, 19,
+            20, 21, 22,
+            22, 21, 23
+        ]);
+
+        this._geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+        this._geometry.setIndex(new THREE.BufferAttribute(indices, 1));
+
+        this._material = material;
+        this.mesh = new THREE.Mesh(this._geometry, this._material);
+    }
+
+    draw(renderer, camera, waterTexture, causticsTexture) {
+        this._applyUniforms(waterTexture, causticsTexture);
+        renderer.render(this.mesh, camera);
+    }
+
+    _applyUniforms(waterTexture, causticsTexture) {
+        if (!this._material || !this._material.uniforms) {
+            return;
+        }
+        if (this._material.uniforms.water) {
+            this._material.uniforms.water.value = waterTexture;
+        }
+        if (this._material.uniforms.causticTex) {
+            this._material.uniforms.causticTex.value = causticsTexture;
+        }
+    }
+}
+
+class CylinderPoolWall {
+    constructor(material, segments = 64) {
+        this._geometry = this._buildGeometry(segments);
+        this._material = material;
+        this.mesh = new THREE.Mesh(this._geometry, this._material);
+    }
+
+    _buildGeometry(segments) {
+        const geometry = new THREE.BufferGeometry();
+        const vertices = [];
+        const indices = [];
+
+        for (let i = 0; i <= segments; i++) {
+            const angle = (i / segments) * Math.PI * 2;
+            const x = Math.cos(angle);
+            const z = Math.sin(angle);
+            vertices.push(x, -1, z);
+            vertices.push(x, 1, z);
+        }
+
+        for (let i = 0; i < segments; i++) {
+            const base = i * 2;
+            indices.push(base, base + 1, base + 2);
+            indices.push(base + 2, base + 1, base + 3);
+        }
+        // 移除顶部盖面，避免与水面重叠产生伪影
+
+        geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
+        geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(indices), 1));
+
+        return geometry;
+    }
+
+    draw(renderer, camera, waterTexture, causticsTexture) {
+        this._applyUniforms(waterTexture, causticsTexture);
+        renderer.render(this.mesh, camera);
+    }
+
+    _applyUniforms(waterTexture, causticsTexture) {
+        if (!this._material || !this._material.uniforms) {
+            return;
+        }
+        if (this._material.uniforms.water) {
+            this._material.uniforms.water.value = waterTexture;
+        }
+        if (this._material.uniforms.causticTex) {
+            this._material.uniforms.causticTex.value = causticsTexture;
+        }
+    }
+}
+
+function buildSquareRaycastTarget() {
+    const targetGeometry = new THREE.PlaneGeometry(2, 2);
+    const posAttr = targetGeometry.getAttribute('position');
+    for (let i = 0; i < posAttr.count; i++) {
+        const y = posAttr.getY(i);
+        posAttr.setZ(i, -y);
+        posAttr.setY(i, 0);
+    }
+    posAttr.needsUpdate = true;
+    const targetMesh = new THREE.Mesh(targetGeometry, WATERPOOL_PICK_MATERIAL);
+    targetMesh.visible = true;
+    targetMesh.updateMatrixWorld(true);
+    return targetMesh;
+}
+
+function buildCylinderRaycastTarget() {
+    const targetGeometry = new THREE.CircleGeometry(1, 64);
+    const posAttr = targetGeometry.getAttribute('position');
+    for (let i = 0; i < posAttr.count; i++) {
+        const y = posAttr.getY(i);
+        posAttr.setZ(i, -y);
+        posAttr.setY(i, 0);
+    }
+    posAttr.needsUpdate = true;
+    const targetMesh = new THREE.Mesh(targetGeometry, WATERPOOL_PICK_MATERIAL);
+    targetMesh.visible = true;
+    targetMesh.updateMatrixWorld(true);
+    return targetMesh;
+}
+
+export class WaterPool extends THREE.Group {
+    static register(pool) {
+        registerWaterPool(pool);
+    }
+
+    static unregister(pool) {
+        unregisterWaterPool(pool);
+    }
+
+    static registerRendering() {
+        registerWaterPoolRendering();
+    }
+
+    constructor(options = {}) {
+        super();
+
+        this.type = 'WaterPool';
+        this.isWaterPool = true;
+
+        this.name = options.name || 'WaterPool';
+        this.poolType = options.type === 'cylinder' ? 'cylinder' : 'square';
+        this.light = options.light || DEFAULT_LIGHT;
+        this.tiles = options.tiles || null;
+        this.sky = options.sky || null;
+        const wallMode = (options.wallMode === 'wall' || options.wallMode === 'volume' || options.wallMode === 'none')
+            ? options.wallMode
+            : null;
+        this.hasWall = wallMode ? wallMode !== 'none' : options.wall === true;
+        this.wallMode = wallMode || (this.hasWall ? 'wall' : 'none');
+        this.wallOpacity = Number.isFinite(options.wallOpacity)
+            ? THREE.MathUtils.clamp(options.wallOpacity, 0, 1)
+            : 1;
+        // 体积水模式下默认关闭屏幕空间折射，避免水面发黑
+        this.useSceneRefraction = options.useSceneRefraction !== undefined
+            ? options.useSceneRefraction
+            : (this.wallMode === 'volume' ? 0 : 1);
+        // 顶部水面透视强度（0~1），用于控制看到水下物体的程度
+        this.surfaceTransmittance = Number.isFinite(options.surfaceTransmittance)
+            ? THREE.MathUtils.clamp(options.surfaceTransmittance, 0, 1)
+            : 0.65;
+        // 波纹法线强度与折射偏移强度，降低边缘过强的明暗对比
+        this.normalStrength = Number.isFinite(options.normalStrength)
+            ? THREE.MathUtils.clamp(options.normalStrength, 0, 1)
+            : 0.6;
+        // 屏幕空间折射强度
+        this.refractionStrength = Number.isFinite(options.refractionStrength)
+            ? THREE.MathUtils.clamp(options.refractionStrength, 0, 1)
+            : 0.035;
+        // 体积水颜色，避免 wallMode 时出现“发光蓝”
+        this.volumeColor = (options.volumeColor instanceof THREE.Color)
+            ? options.volumeColor
+            : new THREE.Color(options.volumeColor !== undefined ? options.volumeColor : 0x2c5965);
+        // 水面颜色默认与体积色一致，保证水面/水体颜色接近
+        this.surfaceColor = (options.surfaceColor instanceof THREE.Color)
+            ? options.surfaceColor
+            : new THREE.Color(options.surfaceColor !== undefined ? options.surfaceColor : this.volumeColor.getHex());
+        // 是否有天空盒，避免 sky 为空导致水面发黑
+        this.useSky = !!this.sky;
+        this._halfWidth = 1;
+        this._halfDepth = 1;
+        this._poolHeight = 1;
+        this._radius = 1;
+        this._uniformHalfSize = new THREE.Vector2(1, 1);
+        this._tempMat4 = new THREE.Matrix4();
+        this._tempVec3 = new THREE.Vector3();
+        this._disturbance = null;
+        this._sceneTexture = null;
+        this._resolution = new THREE.Vector2();
+        this._waterPoolRegistered = false;
+        this._waterPoolRegistering = false;
+        this._waterPoolRemoved = false;
+        this._renderOrderBase = Number.isFinite(options.renderOrder) ? options.renderOrder : 1000;
+        this._lastSceneCaptureFrame = -1;
+        this._beforeRenderHandler = this._handleBeforeRender.bind(this);
+        this._addedHandler = () => {
+            this._waterPoolRemoved = false;
+            WaterPool.register(this);
+            if (waterPoolRenderingPending) {
+                WaterPool.registerRendering();
+            }
+        };
+        this._removedHandler = () => {
+            this._waterPoolRemoved = true;
+            WaterPool.unregister(this);
+        };
+        this.addEventListener('added', this._addedHandler);
+        this.addEventListener('removed', this._removedHandler);
+
+        const simulationSize = options.simulationSize || 256;
+        const causticsSize = options.causticsSize || 1024;
+        const waterSegments = options.waterSegments || 200;
+        const wallSegments = options.wallSegments || 64;
+
+        this.simulationSize = simulationSize;
+        this.causticsSize = causticsSize;
+        this.waterSegments = waterSegments;
+        this.wallSegments = wallSegments;
+
+        this._updateSize(options);
+
+        this.simulation = new WaterSimulation(simulationSize);
+        this.water = this.poolType === 'cylinder'
+            ? new CylinderWater({ light: this.light, tiles: this.tiles, sky: this.sky, segments: waterSegments })
+            : new Water({ light: this.light, tiles: this.tiles, sky: this.sky, segments: waterSegments });
+        this.caustics = this.poolType === 'cylinder'
+            ? new CylinderCaustics(this.water.geometry, this.light, causticsSize)
+            : new Caustics(this.water.geometry, this.light, causticsSize);
+
+        this.wall = null;
+
+        this.raycastTarget = this.poolType === 'cylinder'
+            ? buildCylinderRaycastTarget()
+            : buildSquareRaycastTarget();
+
+        const tasks = [
+            ensureShaderChunks(),
+            this.simulation.loaded,
+            this.water.loaded,
+            this.caustics.loaded,
+        ];
+
+        if (this.hasWall) {
+            const wallModeValue = this.wallMode === 'volume' ? 1 : 0;
+            const wallTask = createWallMaterial(
+                this.poolType,
+                this.light,
+                this.tiles,
+                this.wallOpacity,
+                wallModeValue,
+                this.volumeColor
+            ).then((material) => {
+                this.wall = this.poolType === 'cylinder'
+                    ? new CylinderPoolWall(material, wallSegments)
+                    : new SquarePoolWall(material);
+            });
+            tasks.push(wallTask);
+        }
+
+        this.loaded = Promise.all(tasks).then(() => {
+            this.waterMeshFront = this.water.meshFront || this.water.mesh;
+            this.waterMeshBack = this.water.meshBack || null;
+            this.waterMesh = this.waterMeshFront || this.water.mesh || null;
+            this.waterMeshes = this._getWaterMeshes();
+            if (this.wall) {
+                this.wallMesh = this.wall.mesh;
+            }
+            this._applyScale();
+            this._attachMeshesToGroup();
+            this._applyRenderOrder();
+            this._installRenderHooks();
+            return this;
+        });
+
+    }
+
+    _updateSize(options = {}) {
+        if (this.poolType === 'cylinder') {
+            const diameter = options.diameter || (options.radius ? options.radius * 2 : 2);
+            const height = options.height || 2;
+            const radius = options.radius || diameter / 2;
+
+            this.diameter = diameter;
+            this.radius = radius;
+            this.width = diameter;
+            this.depth = diameter;
+            this.height = height;
+
+            this._radius = radius;
+            this._halfWidth = radius;
+            this._halfDepth = radius;
+            this._poolHeight = height;
+        } else {
+            const width = options.width || options.size || 2;
+            const depth = options.depth || options.size || width;
+            const height = options.height || 2;
+
+            this.width = width;
+            this.depth = depth;
+            this.height = height;
+
+            this._halfWidth = width / 2;
+            this._halfDepth = depth / 2;
+            this._poolHeight = height;
+        }
+    }
+
+    _getWaterMeshes() {
+        if (this.waterMeshes && this.waterMeshes.length) {
+            return this.waterMeshes;
+        }
+        if (this.water && Array.isArray(this.water.meshes) && this.water.meshes.length) {
+            return this.water.meshes;
+        }
+        if (this.waterMesh) {
+            return [this.waterMesh];
+        }
+        if (this.water && this.water.mesh) {
+            return [this.water.mesh];
+        }
+        return [];
+    }
+
+    _getWaterMaterials() {
+        if (!this.water) {
+            return [];
+        }
+        if (typeof this.water.getMaterials === 'function') {
+            return this.water.getMaterials();
+        }
+        if (Array.isArray(this.water.materials) && this.water.materials.length) {
+            return this.water.materials;
+        }
+        if (this.water.material) {
+            return [this.water.material];
+        }
+        return [];
+    }
+
+    _attachMeshesToGroup() {
+        if (this.wallMesh && this.wallMesh.parent !== this) {
+            this.add(this.wallMesh);
+        }
+        const waterMeshes = this._getWaterMeshes();
+        waterMeshes.forEach((mesh) => {
+            if (mesh && mesh.parent !== this) {
+                this.add(mesh);
+            }
+        });
+        if (this.raycastTarget && this.raycastTarget.parent !== this) {
+            this.raycastTarget.ignore = false;
+            this.add(this.raycastTarget);
+        }
+        if (this.wallMesh) {
+            this.wallMesh.ignore = true;
+        }
+        waterMeshes.forEach((mesh) => {
+            if (mesh) {
+                mesh.ignore = true;
+            }
+        });
+        this._applyProxyToMeshes();
+    }
+
+    _applyProxyToMeshes() {
+        this.traverse((child) => {
+            if (child && child.isMesh) {
+                child.proxy = this;
+                //child.ignore = true;
+            }
+        });
+    }
+
+    _applyRenderOrder() {
+        const baseOrder = Number.isFinite(this._renderOrderBase) ? this._renderOrderBase : 0;
+        if (this.wallMesh) {
+            this.wallMesh.renderOrder = baseOrder;
+        }
+        if (this.waterMeshFront) {
+            this.waterMeshFront.renderOrder = baseOrder + 1;
+        }
+        if (this.waterMeshBack) {
+            this.waterMeshBack.renderOrder = baseOrder + 2;
+        }
+        if (!this.waterMeshFront && this.waterMesh) {
+            this.waterMesh.renderOrder = baseOrder + 1;
+        }
+    }
+
+    _installRenderHooks() {
+        const waterMeshes = this._getWaterMeshes();
+        if (!waterMeshes.length) {
+            if (this.wallMesh) {
+                this.wallMesh.onBeforeRender = this._beforeRenderHandler;
+            }
+            return;
+        }
+        waterMeshes.forEach((mesh) => {
+            if (!mesh) {
+                return;
+            }
+            mesh.onBeforeRender = this._beforeRenderHandler;
+        });
+        if (this.wallMesh) {
+            this.wallMesh.onBeforeRender = this._beforeRenderHandler;
+        }
+    }
+
+    _handleBeforeRender(renderer) {
+        this._prepareSceneTexture(renderer);
+    }
+
+    _prepareSceneTexture(renderer) {
+        if (!renderer) {
+            return;
+        }
+        this._ensureSceneTexture(renderer);
+        captureWaterPoolSceneTexture(renderer);
+        this._applySceneTextureUniforms();
+    }
+
+    _applySceneTextureUniforms() {
+        const materials = this._getWaterMaterials();
+        if (!materials.length) {
+            if (this.wall && this.wall._material && this.wall._material.uniforms) {
+                if (this.wall._material.uniforms.sceneTexture) {
+                    this.wall._material.uniforms.sceneTexture.value = this._sceneTexture;
+                }
+                if (this.wall._material.uniforms.resolution) {
+                    this.wall._material.uniforms.resolution.value.copy(this._resolution);
+                }
+            }
+            return;
+        }
+        materials.forEach((material) => {
+            if (!material || !material.uniforms) {
+                return;
+            }
+            if (material.uniforms.sceneTexture) {
+                material.uniforms.sceneTexture.value = this._sceneTexture;
+            }
+            if (material.uniforms.resolution) {
+                material.uniforms.resolution.value.copy(this._resolution);
+            }
+        });
+
+        if (this.wall && this.wall._material && this.wall._material.uniforms) {
+            if (this.wall._material.uniforms.sceneTexture) {
+                this.wall._material.uniforms.sceneTexture.value = this._sceneTexture;
+            }
+            if (this.wall._material.uniforms.resolution) {
+                this.wall._material.uniforms.resolution.value.copy(this._resolution);
+            }
+        }
+    }
+
+    _applyWaterTextures(waterTexture, causticsTexture) {
+        const materials = this._getWaterMaterials();
+        materials.forEach((material) => {
+            if (!material || !material.uniforms) {
+                return;
+            }
+            if (material.uniforms.water) {
+                material.uniforms.water.value = waterTexture;
+            }
+            if (material.uniforms.causticTex) {
+                material.uniforms.causticTex.value = causticsTexture;
+            }
+        });
+
+        if (this.wall && this.wall._material && this.wall._material.uniforms) {
+            if (this.wall._material.uniforms.water) {
+                this.wall._material.uniforms.water.value = waterTexture;
+            }
+            if (this.wall._material.uniforms.causticTex) {
+                this.wall._material.uniforms.causticTex.value = causticsTexture;
+            }
+        }
+    }
+
+    _applyScale() {
+        const waterMeshes = this._getWaterMeshes();
+        if (waterMeshes.length) {
+            waterMeshes.forEach((mesh) => {
+                if (mesh) {
+                    mesh.scale.set(1, 1, 1);
+                }
+            });
+            const geometry = waterMeshes[0].geometry;
+            if (geometry) {
+                // Update bounding sphere to match shader-transformed geometry.
+                // The vertex shader scales vertices by poolHalfSize, so the actual
+                // rendered extent exceeds the original PlaneGeometry bounding sphere.
+                const r = this.poolType === 'cylinder'
+                    ? this._radius
+                    : Math.sqrt(this._halfWidth * this._halfWidth + this._halfDepth * this._halfDepth);
+                geometry.boundingSphere = new THREE.Sphere(
+                    new THREE.Vector3(0, 0, 0), r
+                );
+            }
+        }
+
+        if (this.wallMesh) {
+            this.wallMesh.scale.set(1, 1, 1);
+            // 墙体在着色器中按尺寸缩放，需要手动更新包围体避免视锥裁剪错误
+            this._updateWallBounds();
+        }
+
+        if (this.raycastTarget) {
+            const scaleX = this.poolType === 'cylinder' ? this._radius : this._halfWidth;
+            const scaleZ = this.poolType === 'cylinder' ? this._radius : this._halfDepth;
+            this.raycastTarget.scale.set(scaleX, 1, scaleZ);
+            this.raycastTarget.updateMatrixWorld(true);
+        }
+
+        this._applyUniforms();
+    }
+
+    _updateWallBounds() {
+        if (!this.wallMesh || !this.wallMesh.geometry) {
+            return;
+        }
+
+        const minY = -this._poolHeight;
+        // 墙体顶部与水面齐平，避免超出水面
+        const maxY = 0;
+        const min = new THREE.Vector3(-this._halfWidth, minY, -this._halfDepth);
+        const max = new THREE.Vector3(this._halfWidth, maxY, this._halfDepth);
+        const box = new THREE.Box3(min, max);
+        const sphere = new THREE.Sphere();
+        box.getBoundingSphere(sphere);
+
+        this.wallMesh.geometry.boundingBox = box;
+        this.wallMesh.geometry.boundingSphere = sphere;
+    }
+
+    setSize(options = {}) {
+        this._updateSize(options);
+        this._applyScale();
+    }
+
+    _applyUniforms() {
+        this._uniformHalfSize.set(this._halfWidth, this._halfDepth);
+        this._updateMaterialUniforms(this._getWaterMaterials());
+        this._updateMaterialUniforms(this.wall ? this.wall._material : null);
+        this._updateMaterialUniforms(this._getCausticsMaterial());
+    }
+
+    _updateMaterialUniforms(material) {
+        if (Array.isArray(material)) {
+            material.forEach((item) => this._updateMaterialUniforms(item));
+            return;
+        }
+        if (!material || !material.uniforms) {
+            return;
+        }
+        if (material.uniforms.tiles) {
+            material.uniforms.tiles.value = this.tiles;
+        }
+        if (material.uniforms.useTiles) {
+            material.uniforms.useTiles.value = this.tiles ? 1 : 0;
+        }
+        if (material.uniforms.tilesColor) {
+            material.uniforms.tilesColor.value = this.volumeColor;
+        }
+        if (material.uniforms.wallMode) {
+            material.uniforms.wallMode.value = this.wallMode === 'volume' ? 1 : 0;
+        }
+        if (material.uniforms.wallOpacity) {
+            material.uniforms.wallOpacity.value = this.wallOpacity;
+        }
+        if (material.uniforms.volumeColor) {
+            material.uniforms.volumeColor.value = this.volumeColor;
+        }
+        if (material.uniforms.surfaceColor) {
+            material.uniforms.surfaceColor.value = this.surfaceColor;
+        }
+        if (material.uniforms.useSky) {
+            material.uniforms.useSky.value = this.useSky ? 1 : 0;
+        }
+        if (material.uniforms.useSceneRefraction) {
+            material.uniforms.useSceneRefraction.value = this.useSceneRefraction ? 1 : 0;
+        }
+        if (material.uniforms.hasWall) {
+            material.uniforms.hasWall.value = this.hasWall ? 1 : 0;
+        }
+        if (material.uniforms.surfaceTransmittance) {
+            material.uniforms.surfaceTransmittance.value = this.surfaceTransmittance;
+        }
+        if (material.uniforms.normalStrength) {
+            material.uniforms.normalStrength.value = this.normalStrength;
+        }
+        if (material.uniforms.refractionStrength) {
+            material.uniforms.refractionStrength.value = this.refractionStrength;
+        }
+        if (material.uniforms.poolHalfSize) {
+            material.uniforms.poolHalfSize.value = this._uniformHalfSize;
+        }
+        if (material.uniforms.poolHeight) {
+            material.uniforms.poolHeight.value = this._poolHeight;
+        }
+        if (material.uniforms.poolRadius) {
+            material.uniforms.poolRadius.value = this._radius;
+        }
+    }
+
+    _getCausticsMaterial() {
+        if (!this.caustics || !this.caustics._causticMesh) {
+            return null;
+        }
+        return this.caustics._causticMesh.material || null;
+    }
+
+    setPosition(x, y, z) {
+        this.position.set(x, y, z);
+        const waterMeshes = this._getWaterMeshes();
+        waterMeshes.forEach((mesh) => {
+            if (mesh) {
+                mesh.position.set(0, 0, 0);
+            }
+        });
+        if (this.wallMesh) {
+            this.wallMesh.position.set(0, 0, 0);
+        }
+        if (this.raycastTarget) {
+            this.raycastTarget.position.set(0, 0, 0);
+            this.raycastTarget.updateMatrixWorld(true);
+        }
+        this.updateMatrixWorld(true);
+    }
+
+    getDropCoordsFromWorld(point, out = new THREE.Vector2()) {
+        if (!this.raycastTarget) {
+            return out.set(0, 0);
+        }
+        this.raycastTarget.updateMatrixWorld(true);
+        const local = this._tempVec3.copy(point)
+            .applyMatrix4(this._tempMat4.copy(this.raycastTarget.matrixWorld).invert());
+        return out.set(local.x, local.z);
+    }
+
+    addDrop(renderer, x, y, radius, strength) {
+        this.simulation.addDrop(renderer, x, y, radius, strength);
+    }
+
+    startDisturbance(options = {}) {
+        const mode = options.mode === 'uniform' ? 'uniform' : 'drag';
+        const travelRadius = Number.isFinite(options.travelRadius) ? options.travelRadius : 0.85;
+        const driftSpeed = Number.isFinite(options.driftSpeed) ? options.driftSpeed : 0.015;
+        const jitter = Number.isFinite(options.jitter) ? options.jitter : 0.01;
+        const spread = Number.isFinite(options.spread) ? options.spread : 0.08;
+        const angle = Math.random() * Math.PI * 2;
+
+        this._disturbance = {
+            mode,
+            dropsPerStep: options.dropsPerStep || 1,
+            radiusMin: options.radiusMin || 0.01,
+            radiusMax: options.radiusMax || 0.05,
+            strengthMin: options.strengthMin || 0.005,
+            strengthMax: options.strengthMax || 0.02,
+            // “拖动式”随机扰动的运动参数，避免波纹过于平均
+            travelRadius,
+            driftSpeed,
+            jitter,
+            spread,
+            x: Math.cos(angle) * travelRadius * 0.5,
+            y: Math.sin(angle) * travelRadius * 0.5,
+            vx: Math.cos(angle) * driftSpeed,
+            vy: Math.sin(angle) * driftSpeed,
+        };
+    }
+
+    stopDisturbance() {
+        this._disturbance = null;
+    }
+
+    step(renderer) {
+        if (this._disturbance) {
+            const d = this._disturbance;
+            if (d.mode === 'uniform') {
+                for (let i = 0; i < d.dropsPerStep; i++) {
+                    const angle = Math.random() * Math.PI * 2;
+                    const r = Math.random() * 0.8;
+                    const radius = d.radiusMin + Math.random() * (d.radiusMax - d.radiusMin);
+                    const strength = (Math.random() > 0.5 ? 1 : -1)
+                        * (d.strengthMin + Math.random() * (d.strengthMax - d.strengthMin));
+                    this.simulation.addDrop(
+                        renderer,
+                        Math.cos(angle) * r, Math.sin(angle) * r,
+                        radius, strength
+                    );
+                }
+            } else {
+                // 随机游走 + 抖动，模拟鼠标来回滑动的水波
+                d.vx += (Math.random() - 0.5) * d.jitter;
+                d.vy += (Math.random() - 0.5) * d.jitter;
+
+                const speed = Math.hypot(d.vx, d.vy);
+                if (speed > d.driftSpeed) {
+                    const scale = d.driftSpeed / speed;
+                    d.vx *= scale;
+                    d.vy *= scale;
+                }
+
+                d.x += d.vx;
+                d.y += d.vy;
+
+                const dist2 = d.x * d.x + d.y * d.y;
+                const limit = d.travelRadius;
+                if (dist2 > limit * limit) {
+                    const len = Math.sqrt(dist2) || 1;
+                    d.x = (d.x / len) * limit;
+                    d.y = (d.y / len) * limit;
+                    d.vx = -d.vx;
+                    d.vy = -d.vy;
+                }
+
+                for (let i = 0; i < d.dropsPerStep; i++) {
+                    const radius = d.radiusMin + Math.random() * (d.radiusMax - d.radiusMin);
+                    const strength = (Math.random() > 0.5 ? 1 : -1)
+                        * (d.strengthMin + Math.random() * (d.strengthMax - d.strengthMin));
+                    const ox = (Math.random() - 0.5) * d.spread;
+                    const oy = (Math.random() - 0.5) * d.spread;
+                    this.simulation.addDrop(renderer, d.x + ox, d.y + oy, radius, strength);
+                }
+            }
+        }
+
+        this.simulation.stepSimulation(renderer);
+        this.simulation.updateNormals(renderer);
+        this.caustics.update(renderer, this.simulation.texture.texture);
+
+        this._applyWaterTextures(this.simulation.texture.texture, this.caustics.texture.texture);
+    }
+
+    _ensureSceneTexture(renderer) {
+        const effect = App?.viewer?.effect;
+        const composer = effect?.composer;
+        const outputBuffer = effect?.enabled ? composer?.outputBuffer : null;
+
+        if (outputBuffer && outputBuffer.texture) {
+            this._sceneTexture = outputBuffer.texture;
+            this._resolution.set(outputBuffer.width, outputBuffer.height);
+            return;
+        }
+
+        ensureWaterPoolSceneTexture(renderer);
+        this._sceneTexture = waterPoolSceneState.texture;
+        if (this._sceneTexture) {
+            this._resolution.copy(waterPoolSceneState.resolution);
+        }
+    }
+
+    render(renderer, camera) {
+        const waterTexture = this.simulation.texture.texture;
+        const causticsTexture = this.caustics.texture.texture;
+
+        if (!THREE.ShaderChunk['utils'] || !THREE.ShaderChunk['cylinder_utils']) {
+            return;
+        }
+
+        this._applyWaterTextures(waterTexture, causticsTexture);
+        this._prepareSceneTexture(renderer);
+
+        if (this.parent) {
+            return;
+        }
+
+        // 先渲染墙体，让帧缓冲包含场景+墙体
+        if (this.wall) {
+            this.wall.draw(renderer, camera, waterTexture, causticsTexture);
+        }
+
+        // 最后渲染水面
+        this.water.draw(renderer, camera, waterTexture, causticsTexture);
+    }
+
+    clone(recursive = true) {
+        const self = super.clone(false);
+        self.matrix = self.matrix.toArray();
+        self.up = self.up.toArray();
+
+        const options = {
+            name: this.name,
+            type: this.poolType === 'cylinder' ? 'cylinder' : 'square',
+            light: Array.isArray(this.light) ? [...this.light] : DEFAULT_LIGHT,
+            tiles: this.tiles || null,
+            sky: this.sky || null,
+            wallMode: this.wallMode,
+            wall: !!this.hasWall,
+            wallOpacity: this.wallOpacity,
+            useSceneRefraction: this.useSceneRefraction ? 1 : 0,
+            surfaceTransmittance: this.surfaceTransmittance,
+            normalStrength: this.normalStrength,
+            refractionStrength: this.refractionStrength,
+            volumeColor: this.volumeColor ? this.volumeColor.clone() : new THREE.Color(0x2c5965),
+            surfaceColor: this.surfaceColor ? this.surfaceColor.clone() : new THREE.Color(0x4a8aa0),
+            simulationSize: this.simulationSize,
+            causticsSize: this.causticsSize,
+            waterSegments: this.waterSegments,
+            wallSegments: this.wallSegments,
+            diameter: this.diameter,
+            width: this.width,
+            depth: this.depth,
+            height: this.height,
+            renderOrder: this._renderOrderBase,
+        };
+
+        const cloned = new WaterPool(options);
+        const _uuid = cloned.uuid;
+        Loader.objectLoader.copyAttrByData(cloned, self);
+        cloned.uuid = _uuid;
+
+        if (this._disturbance) {
+            const disturbance = {
+                mode: this._disturbance.mode,
+                dropsPerStep: this._disturbance.dropsPerStep,
+                radiusMin: this._disturbance.radiusMin,
+                radiusMax: this._disturbance.radiusMax,
+                strengthMin: this._disturbance.strengthMin,
+                strengthMax: this._disturbance.strengthMax,
+                travelRadius: this._disturbance.travelRadius,
+                driftSpeed: this._disturbance.driftSpeed,
+                jitter: this._disturbance.jitter,
+                spread: this._disturbance.spread,
+            };
+            cloned._disturbance = { ...disturbance };
+            if (cloned.loaded && typeof cloned.loaded.then === 'function') {
+                cloned.loaded.then(() => {
+                    cloned.startDisturbance(disturbance);
+                });
+            } else {
+                cloned.startDisturbance(disturbance);
+            }
+        }
+
+        return cloned;
+    }
+
+    toJSON(meta) {
+        const internalChildren = this.children.slice();
+        internalChildren.forEach((child) => this.remove(child));
+
+        const data = super.toJSON(meta);
+        const options = {
+            name: this.name,
+            type: this.poolType === 'cylinder' ? 'cylinder' : 'square',
+            light: Array.isArray(this.light) ? [...this.light] : DEFAULT_LIGHT,
+            tiles: serializeTexture(this.tiles),
+            wallMode: this.wallMode,
+            wall: !!this.hasWall,
+            wallOpacity: this.wallOpacity,
+            useSceneRefraction: this.useSceneRefraction ? 1 : 0,
+            surfaceTransmittance: this.surfaceTransmittance,
+            normalStrength: this.normalStrength,
+            refractionStrength: this.refractionStrength,
+            volumeColor: this.volumeColor ? `#${this.volumeColor.getHexString()}` : '#2c5965',
+            surfaceColor: this.surfaceColor ? `#${this.surfaceColor.getHexString()}` : '#4a8aa0',
+            simulationSize: this.simulationSize,
+            causticsSize: this.causticsSize,
+            waterSegments: this.waterSegments,
+            wallSegments: this.wallSegments,
+            diameter: this.diameter,
+            width: this.width,
+            depth: this.depth,
+            height: this.height,
+            disturbance: this._disturbance
+                ? {
+                    enabled: true,
+                    mode: this._disturbance.mode,
+                    dropsPerStep: this._disturbance.dropsPerStep,
+                    radiusMin: this._disturbance.radiusMin,
+                    radiusMax: this._disturbance.radiusMax,
+                    strengthMin: this._disturbance.strengthMin,
+                    strengthMax: this._disturbance.strengthMax,
+                    travelRadius: this._disturbance.travelRadius,
+                    driftSpeed: this._disturbance.driftSpeed,
+                    jitter: this._disturbance.jitter,
+                    spread: this._disturbance.spread,
+                }
+                : { enabled: false },
+        };
+
+        data.object.type = this.type;
+        data.object.options = options;
+        data.object.children = [];
+
+        internalChildren.forEach((child) => this.add(child));
+
+        return data;
+    }
+
+    static fromJSON(json = {}) {
+        const options = json.options ? { ...json.options } : {};
+
+        if (options.tiles && typeof options.tiles === 'object') {
+            options.tiles = restoreTexture(options.tiles);
+        }
+        const sceneEnv = App?.viewer?.scene?.environment || null;
+        if (sceneEnv) {
+            options.sky = sceneEnv;
+        }
+
+        const pool = new WaterPool(options);
+
+        if (pool.loaded && typeof pool.loaded.then === 'function') {
+            pool.loaded.then(() => {
+                pool.startDisturbance(options.disturbance);
+            });
+        } else {
+            pool.startDisturbance(options.disturbance);
+        }
+
+        return pool;
+    }
+}
diff --git a/packages/sdk/lib/core/objects/index.ts b/packages/sdk/lib/core/objects/index.ts
index 145e8e1..477344b 100644
--- a/packages/sdk/lib/core/objects/index.ts
+++ b/packages/sdk/lib/core/objects/index.ts
@@ -1,4 +1,12 @@
 export {default as Billboard, getDefaultBillboardOptions} from "./Billboard";
 export {HtmlPanelConverter, HtmlPanel, HtmlSprite} from "./HtmlPanel";
+export {default as Heatmap, getDefaultHeatmapOptions} from "./Heatmap";
+export {default as UIPanel, getDefaultUIPanelOptions} from "./UIPanel";
+export {default as UIPanelBlock} from "./UIPanelBlock";
+export {default as UIPanelText} from "./UIPanelText";
+export {default as UIPanelInline} from "./UIPanelInline";
+export {default as UIPanelInlineBlock} from "./UIPanelInlineBlock";
+export {default as Path, getDefaultPathOptions} from "./Path";
 export {default as ParticleEmitter, getDefaultParticleConfig} from "./ParticleEmitter";
-export {default as Tiles, getDefault3DTilesOptions} from "./Tile.ts";
\ No newline at end of file
+export {default as Tiles, getDefault3DTilesOptions} from "./Tile.ts";
+export {WaterPool} from "./WaterPool";
\ No newline at end of file
diff --git a/packages/sdk/lib/index.ts b/packages/sdk/lib/index.ts
index da497a2..6e19dfb 100644
--- a/packages/sdk/lib/index.ts
+++ b/packages/sdk/lib/index.ts
@@ -19,6 +19,8 @@ export * from "./core/built-in/assets/BasicObject3D";
 export * from "./core/objects";
 // 导出内置粒子
 export * from "./core/built-in/assets/Particles";
+// 导出内置水体
+export * from "./core/built-in/assets/Water";
 // 导出内置几何形状
 export * from "./core/geometries";
 // 导出工具类(漫游、小地图、剖切)
diff --git a/packages/sdk/lib/utils/scene/index.ts b/packages/sdk/lib/utils/scene/index.ts
index 1528bc9..d7ee610 100644
--- a/packages/sdk/lib/utils/scene/index.ts
+++ b/packages/sdk/lib/utils/scene/index.ts
@@ -4,6 +4,7 @@ import App from "@/core/app/App";
 export * from "./material";
 export * from "./Stats";
 export * from "./controls";
+export * from "./uipanel";
 
 /**
  * 获取对象到父对象的路径(结果不包含parentObject)
diff --git a/packages/sdk/lib/utils/scene/uipanel.ts b/packages/sdk/lib/utils/scene/uipanel.ts
new file mode 100644
index 0000000..369ad8d
--- /dev/null
+++ b/packages/sdk/lib/utils/scene/uipanel.ts
@@ -0,0 +1,38 @@
+import type { Object3D } from "three";
+
+export const UIPANEL_TYPES = new Set(["UIPanel", "UIPanelBlock", "UIPanelText", "UIPanelInline", "UIPanelInlineBlock"]);
+
+/**
+ * 判断是否是UIPanel 3D对象
+ */
+export function isUIPanelObject(object:Object3D | null){
+    return object && object.type === "UIPanel" && object.options;
+}
+
+export function isUIPanelRelatedObject(object: Object3D | null) {
+	if (!object) return false;
+	if (UIPANEL_TYPES.has(object.type)) return true;
+	// return Boolean(findUIPanelNodeId(object));
+
+    if (object.metadata?.__uiPanelRootId || object.metadata?.__uiPanelNodeId) return true;
+    return false;
+}
+
+export function findUIPanelRoot(object: Object3D | null) {
+	let current: Object3D | null = object;
+	while (current) {
+		if (isUIPanelObject(current)) return current;
+		current = current.parent;
+	}
+	return null;
+}
+
+export function findUIPanelNodeId(object: Object3D | null) {
+	let current: any = object;
+	while (current) {
+		const nodeId = current.metadata?.__uiPanelNodeId;
+		if (nodeId) return nodeId as string;
+		current = current.parent;
+	}
+	return null;
+}
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index c4a2914..1812599 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -23,6 +23,8 @@
     "dependencies": {
         "3d-tiles-renderer": "^0.4.16",
         "@babel/runtime": "7.27.0",
+        "heatmap.js-fix": "^1.0.0",
+        "three.path": "^1.0.1",
         "@dxfom/mtext": "^0.3.2",
         "@needle-tools/three-animation-pointer": "^1.0.7",
         "camera-controls": "^2.9.0",
diff --git a/packages/sdk/public/resource/fonts/roboto/regular.json b/packages/sdk/public/resource/fonts/roboto/regular.json
new file mode 100644
index 0000000..206526b
--- /dev/null
+++ b/packages/sdk/public/resource/fonts/roboto/regular.json
@@ -0,0 +1 @@
+{"pages":["Roboto-Regular.png"],"chars":[{"id":40,"index":12,"char":"(","width":15,"height":47,"xoffset":1,"yoffset":0,"xadvance":14,"chnl":15,"x":0,"y":0,"page":0},{"id":41,"index":13,"char":")","width":15,"height":47,"xoffset":-1,"yoffset":0,"xadvance":15,"chnl":15,"x":0,"y":48,"page":0},{"id":91,"index":63,"char":"[","width":12,"height":45,"xoffset":1,"yoffset":0,"xadvance":11,"chnl":15,"x":0,"y":96,"page":0},{"id":93,"index":65,"char":"]","width":12,"height":45,"xoffset":-2,"yoffset":0,"xadvance":11,"chnl":15,"x":0,"y":142,"page":0},{"id":123,"index":95,"char":"{","width":16,"height":44,"xoffset":-1,"yoffset":1,"xadvance":14,"chnl":15,"x":0,"y":188,"page":0},{"id":125,"index":97,"char":"}","width":16,"height":44,"xoffset":-2,"yoffset":1,"xadvance":14,"chnl":15,"x":13,"y":96,"page":0},{"id":1092,"index":247,"char":"ф","width":30,"height":44,"xoffset":0,"yoffset":3,"xadvance":30,"chnl":15,"x":13,"y":141,"page":0},{"id":197,"index":644,"char":"Å","width":30,"height":44,"xoffset":-1,"yoffset":-6,"xadvance":27,"chnl":15,"x":16,"y":0,"page":0},{"id":106,"index":78,"char":"j","width":12,"height":43,"xoffset":-3,"yoffset":4,"xadvance":10,"chnl":15,"x":16,"y":45,"page":0},{"id":36,"index":8,"char":"$","width":23,"height":43,"xoffset":0,"yoffset":-1,"xadvance":24,"chnl":15,"x":29,"y":45,"page":0},{"id":64,"index":36,"char":"@","width":37,"height":43,"xoffset":0,"yoffset":5,"xadvance":38,"chnl":15,"x":47,"y":0,"page":0},{"id":198,"index":129,"char":"Æ","width":43,"height":34,"xoffset":-2,"yoffset":4,"xadvance":39,"chnl":15,"x":30,"y":89,"page":0},{"id":958,"index":197,"char":"ξ","width":21,"height":42,"xoffset":0,"yoffset":4,"xadvance":21,"chnl":15,"x":53,"y":44,"page":0},{"id":950,"index":192,"char":"ζ","width":22,"height":42,"xoffset":0,"yoffset":4,"xadvance":22,"chnl":15,"x":0,"y":233,"page":0},{"id":946,"index":188,"char":"β","width":23,"height":42,"xoffset":1,"yoffset":4,"xadvance":25,"chnl":15,"x":17,"y":186,"page":0},{"id":1044,"index":217,"char":"Д","width":33,"height":41,"xoffset":-1,"yoffset":4,"xadvance":32,"chnl":15,"x":0,"y":276,"page":0},{"id":1025,"index":941,"char":"Ё","width":23,"height":41,"xoffset":1,"yoffset":-3,"xadvance":24,"chnl":15,"x":23,"y":229,"page":0},{"id":1046,"index":218,"char":"Ж","width":41,"height":34,"xoffset":-1,"yoffset":4,"xadvance":38,"chnl":15,"x":41,"y":186,"page":0},{"id":1049,"index":954,"char":"Й","width":27,"height":41,"xoffset":2,"yoffset":-3,"xadvance":30,"chnl":15,"x":44,"y":124,"page":0},{"id":1062,"index":224,"char":"Ц","width":30,"height":41,"xoffset":2,"yoffset":4,"xadvance":31,"chnl":15,"x":72,"y":124,"page":0},{"id":1065,"index":227,"char":"Щ","width":39,"height":41,"xoffset":2,"yoffset":4,"xadvance":41,"chnl":15,"x":75,"y":44,"page":0},{"id":220,"index":664,"char":"Ü","width":26,"height":41,"xoffset":1,"yoffset":-3,"xadvance":27,"chnl":15,"x":85,"y":0,"page":0},{"id":214,"index":660,"char":"Ö","width":28,"height":41,"xoffset":0,"yoffset":-3,"xadvance":29,"chnl":15,"x":112,"y":0,"page":0},{"id":196,"index":643,"char":"Ä","width":30,"height":41,"xoffset":-1,"yoffset":-3,"xadvance":27,"chnl":15,"x":0,"y":318,"page":0},{"id":209,"index":655,"char":"Ñ","width":27,"height":41,"xoffset":1,"yoffset":-3,"xadvance":30,"chnl":15,"x":0,"y":360,"page":0},{"id":81,"index":53,"char":"Q","width":28,"height":39,"xoffset":0,"yoffset":4,"xadvance":29,"chnl":15,"x":0,"y":402,"page":0},{"id":87,"index":59,"char":"W","width":39,"height":34,"xoffset":-1,"yoffset":4,"xadvance":37,"chnl":15,"x":74,"y":87,"page":0},{"id":124,"index":96,"char":"|","width":7,"height":39,"xoffset":2,"yoffset":4,"xadvance":10,"chnl":15,"x":28,"y":360,"page":0},{"id":229,"index":671,"char":"å","width":22,"height":38,"xoffset":0,"yoffset":1,"xadvance":23,"chnl":15,"x":31,"y":318,"page":0},{"id":216,"index":131,"char":"Ø","width":28,"height":37,"xoffset":0,"yoffset":3,"xadvance":29,"chnl":15,"x":34,"y":271,"page":0},{"id":100,"index":72,"char":"d","width":23,"height":36,"xoffset":0,"yoffset":3,"xadvance":24,"chnl":15,"x":47,"y":221,"page":0},{"id":102,"index":74,"char":"f","width":17,"height":36,"xoffset":-1,"yoffset":2,"xadvance":15,"chnl":15,"x":0,"y":442,"page":0},{"id":104,"index":76,"char":"h","width":21,"height":36,"xoffset":1,"yoffset":3,"xadvance":23,"chnl":15,"x":18,"y":442,"page":0},{"id":107,"index":79,"char":"k","width":22,"height":36,"xoffset":1,"yoffset":3,"xadvance":21,"chnl":15,"x":29,"y":400,"page":0},{"id":108,"index":80,"char":"l","width":8,"height":36,"xoffset":1,"yoffset":3,"xadvance":10,"chnl":15,"x":36,"y":357,"page":0},{"id":98,"index":70,"char":"b","width":23,"height":36,"xoffset":1,"yoffset":3,"xadvance":24,"chnl":15,"x":45,"y":357,"page":0},{"id":47,"index":19,"char":"/","width":20,"height":36,"xoffset":-2,"yoffset":4,"xadvance":17,"chnl":15,"x":54,"y":309,"page":0},{"id":92,"index":64,"char":"\\","width":20,"height":36,"xoffset":-1,"yoffset":4,"xadvance":17,"chnl":15,"x":63,"y":258,"page":0},{"id":1073,"index":234,"char":"б","width":24,"height":36,"xoffset":0,"yoffset":2,"xadvance":23,"chnl":15,"x":71,"y":221,"page":0},{"id":1060,"index":223,"char":"Ф","width":33,"height":36,"xoffset":0,"yoffset":3,"xadvance":32,"chnl":15,"x":83,"y":166,"page":0},{"id":1064,"index":226,"char":"Ш","width":36,"height":34,"xoffset":2,"yoffset":4,"xadvance":40,"chnl":15,"x":103,"y":122,"page":0},{"id":1070,"index":232,"char":"Ю","width":36,"height":35,"xoffset":2,"yoffset":4,"xadvance":38,"chnl":15,"x":114,"y":86,"page":0},{"id":948,"index":190,"char":"δ","width":24,"height":36,"xoffset":0,"yoffset":2,"xadvance":24,"chnl":15,"x":115,"y":42,"page":0},{"id":966,"index":204,"char":"φ","width":30,"height":36,"xoffset":0,"yoffset":12,"xadvance":30,"chnl":15,"x":140,"y":42,"page":0},{"id":968,"index":205,"char":"ψ","width":30,"height":36,"xoffset":0,"yoffset":12,"xadvance":29,"chnl":15,"x":141,"y":0,"page":0},{"id":230,"index":134,"char":"æ","width":36,"height":27,"xoffset":0,"yoffset":11,"xadvance":35,"chnl":15,"x":0,"y":479,"page":0},{"id":121,"index":93,"char":"y","width":23,"height":35,"xoffset":-2,"yoffset":12,"xadvance":20,"chnl":15,"x":40,"y":437,"page":0},{"id":112,"index":84,"char":"p","width":23,"height":35,"xoffset":1,"yoffset":11,"xadvance":24,"chnl":15,"x":40,"y":473,"page":0},{"id":113,"index":85,"char":"q","width":23,"height":35,"xoffset":0,"yoffset":11,"xadvance":24,"chnl":15,"x":52,"y":394,"page":0},{"id":103,"index":75,"char":"g","width":23,"height":35,"xoffset":0,"yoffset":11,"xadvance":24,"chnl":15,"x":69,"y":346,"page":0},{"id":109,"index":81,"char":"m","width":35,"height":27,"xoffset":1,"yoffset":11,"xadvance":37,"chnl":15,"x":75,"y":295,"page":0},{"id":79,"index":51,"char":"O","width":28,"height":35,"xoffset":0,"yoffset":4,"xadvance":29,"chnl":15,"x":84,"y":258,"page":0},{"id":83,"index":55,"char":"S","width":26,"height":35,"xoffset":0,"yoffset":4,"xadvance":25,"chnl":15,"x":96,"y":203,"page":0},{"id":71,"index":43,"char":"G","width":27,"height":35,"xoffset":1,"yoffset":4,"xadvance":29,"chnl":15,"x":117,"y":157,"page":0},{"id":67,"index":39,"char":"C","width":27,"height":35,"xoffset":0,"yoffset":4,"xadvance":27,"chnl":15,"x":64,"y":430,"page":0},{"id":56,"index":28,"char":"8","width":23,"height":35,"xoffset":0,"yoffset":4,"xadvance":24,"chnl":15,"x":64,"y":466,"page":0},{"id":51,"index":23,"char":"3","width":23,"height":35,"xoffset":0,"yoffset":4,"xadvance":24,"chnl":15,"x":88,"y":466,"page":0},{"id":48,"index":20,"char":"0","width":23,"height":35,"xoffset":0,"yoffset":4,"xadvance":24,"chnl":15,"x":76,"y":382,"page":0},{"id":37,"index":9,"char":"%","width":31,"height":35,"xoffset":0,"yoffset":4,"xadvance":31,"chnl":15,"x":92,"y":418,"page":0},{"id":8364,"index":413,"char":"€","width":24,"height":35,"xoffset":0,"yoffset":4,"xadvance":24,"chnl":15,"x":93,"y":323,"page":0},{"id":38,"index":10,"char":"&","width":28,"height":35,"xoffset":0,"yoffset":4,"xadvance":26,"chnl":15,"x":112,"y":454,"page":0},{"id":1105,"index":971,"char":"ё","width":23,"height":35,"xoffset":0,"yoffset":4,"xadvance":22,"chnl":15,"x":100,"y":359,"page":0},{"id":1078,"index":238,"char":"ж","width":35,"height":26,"xoffset":-2,"yoffset":12,"xadvance":32,"chnl":15,"x":111,"y":294,"page":0},{"id":1047,"index":219,"char":"З","width":26,"height":35,"xoffset":0,"yoffset":4,"xadvance":25,"chnl":15,"x":118,"y":321,"page":0},{"id":1054,"index":957,"char":"О","width":28,"height":35,"xoffset":0,"yoffset":4,"xadvance":29,"chnl":15,"x":113,"y":239,"page":0},{"id":1088,"index":967,"char":"р","width":23,"height":35,"xoffset":1,"yoffset":11,"xadvance":24,"chnl":15,"x":123,"y":193,"page":0},{"id":1057,"index":960,"char":"С","width":27,"height":35,"xoffset":0,"yoffset":4,"xadvance":27,"chnl":15,"x":142,"y":229,"page":0},{"id":1091,"index":969,"char":"у","width":23,"height":35,"xoffset":-2,"yoffset":12,"xadvance":20,"chnl":15,"x":145,"y":122,"page":0},{"id":1097,"index":251,"char":"щ","width":35,"height":33,"xoffset":1,"yoffset":12,"xadvance":35,"chnl":15,"x":145,"y":158,"page":0},{"id":1069,"index":231,"char":"Э","width":27,"height":35,"xoffset":1,"yoffset":4,"xadvance":28,"chnl":15,"x":147,"y":192,"page":0},{"id":252,"index":691,"char":"ü","width":21,"height":35,"xoffset":1,"yoffset":4,"xadvance":23,"chnl":15,"x":151,"y":79,"page":0},{"id":246,"index":687,"char":"ö","width":24,"height":35,"xoffset":0,"yoffset":4,"xadvance":24,"chnl":15,"x":171,"y":37,"page":0},{"id":228,"index":670,"char":"ä","width":22,"height":35,"xoffset":0,"yoffset":4,"xadvance":23,"chnl":15,"x":172,"y":0,"page":0},{"id":241,"index":682,"char":"ñ","width":21,"height":35,"xoffset":1,"yoffset":3,"xadvance":23,"chnl":15,"x":195,"y":0,"page":0},{"id":961,"index":199,"char":"ρ","width":23,"height":35,"xoffset":1,"yoffset":11,"xadvance":24,"chnl":15,"x":169,"y":115,"page":0},{"id":952,"index":194,"char":"θ","width":23,"height":35,"xoffset":1,"yoffset":4,"xadvance":24,"chnl":15,"x":173,"y":73,"page":0},{"id":947,"index":189,"char":"γ","width":23,"height":35,"xoffset":-1,"yoffset":12,"xadvance":21,"chnl":15,"x":196,"y":36,"page":0},{"id":951,"index":193,"char":"η","width":22,"height":35,"xoffset":1,"yoffset":11,"xadvance":24,"chnl":15,"x":217,"y":0,"page":0},{"id":955,"index":196,"char":"λ","width":25,"height":35,"xoffset":-1,"yoffset":3,"xadvance":23,"chnl":15,"x":124,"y":357,"page":0},{"id":967,"index":935,"char":"χ","width":26,"height":35,"xoffset":0,"yoffset":12,"xadvance":21,"chnl":15,"x":145,"y":321,"page":0},{"id":956,"index":933,"char":"μ","width":21,"height":35,"xoffset":1,"yoffset":12,"xadvance":24,"chnl":15,"x":147,"y":265,"page":0},{"id":920,"index":179,"char":"Θ","width":28,"height":35,"xoffset":0,"yoffset":4,"xadvance":29,"chnl":15,"x":169,"y":265,"page":0},{"id":927,"index":919,"char":"Ο","width":28,"height":35,"xoffset":0,"yoffset":4,"xadvance":29,"chnl":15,"x":170,"y":228,"page":0},{"id":105,"index":77,"char":"i","width":8,"height":34,"xoffset":1,"yoffset":4,"xadvance":10,"chnl":15,"x":175,"y":192,"page":0},{"id":119,"index":91,"char":"w","width":34,"height":26,"xoffset":-1,"yoffset":12,"xadvance":32,"chnl":15,"x":181,"y":151,"page":0},{"id":65,"index":37,"char":"A","width":30,"height":34,"xoffset":-1,"yoffset":4,"xadvance":27,"chnl":15,"x":193,"y":109,"page":0},{"id":90,"index":62,"char":"Z","width":26,"height":34,"xoffset":0,"yoffset":4,"xadvance":25,"chnl":15,"x":197,"y":72,"page":0},{"id":69,"index":41,"char":"E","width":23,"height":34,"xoffset":1,"yoffset":4,"xadvance":24,"chnl":15,"x":220,"y":36,"page":0},{"id":82,"index":54,"char":"R","width":26,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":240,"y":0,"page":0},{"id":84,"index":56,"char":"T","width":27,"height":34,"xoffset":-1,"yoffset":4,"xadvance":25,"chnl":15,"x":184,"y":178,"page":0},{"id":89,"index":61,"char":"Y","width":29,"height":34,"xoffset":-2,"yoffset":4,"xadvance":25,"chnl":15,"x":124,"y":393,"page":0},{"id":85,"index":57,"char":"U","width":26,"height":34,"xoffset":1,"yoffset":4,"xadvance":27,"chnl":15,"x":150,"y":357,"page":0},{"id":73,"index":45,"char":"I","width":8,"height":34,"xoffset":2,"yoffset":4,"xadvance":11,"chnl":15,"x":172,"y":301,"page":0},{"id":80,"index":52,"char":"P","width":25,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":141,"y":428,"page":0},{"id":68,"index":40,"char":"D","width":26,"height":34,"xoffset":1,"yoffset":4,"xadvance":28,"chnl":15,"x":154,"y":392,"page":0},{"id":70,"index":42,"char":"F","width":22,"height":34,"xoffset":1,"yoffset":4,"xadvance":23,"chnl":15,"x":141,"y":463,"page":0},{"id":72,"index":44,"char":"H","width":27,"height":34,"xoffset":1,"yoffset":4,"xadvance":30,"chnl":15,"x":164,"y":463,"page":0},{"id":74,"index":46,"char":"J","width":23,"height":34,"xoffset":-1,"yoffset":4,"xadvance":23,"chnl":15,"x":167,"y":427,"page":0},{"id":75,"index":47,"char":"K","width":27,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":177,"y":336,"page":0},{"id":76,"index":48,"char":"L","width":22,"height":34,"xoffset":1,"yoffset":4,"xadvance":23,"chnl":15,"x":181,"y":301,"page":0},{"id":77,"index":49,"char":"M","width":34,"height":34,"xoffset":1,"yoffset":4,"xadvance":37,"chnl":15,"x":198,"y":264,"page":0},{"id":88,"index":60,"char":"X","width":28,"height":34,"xoffset":-1,"yoffset":4,"xadvance":26,"chnl":15,"x":204,"y":299,"page":0},{"id":86,"index":58,"char":"V","width":30,"height":34,"xoffset":-1,"yoffset":4,"xadvance":27,"chnl":15,"x":199,"y":213,"page":0},{"id":66,"index":38,"char":"B","width":24,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":212,"y":178,"page":0},{"id":78,"index":50,"char":"N","width":27,"height":34,"xoffset":1,"yoffset":4,"xadvance":30,"chnl":15,"x":230,"y":213,"page":0},{"id":55,"index":27,"char":"7","width":24,"height":34,"xoffset":0,"yoffset":4,"xadvance":24,"chnl":15,"x":181,"y":371,"page":0},{"id":57,"index":29,"char":"9","width":23,"height":34,"xoffset":0,"yoffset":4,"xadvance":24,"chnl":15,"x":205,"y":334,"page":0},{"id":52,"index":24,"char":"4","width":26,"height":34,"xoffset":-1,"yoffset":4,"xadvance":24,"chnl":15,"x":191,"y":406,"page":0},{"id":53,"index":25,"char":"5","width":23,"height":34,"xoffset":1,"yoffset":4,"xadvance":24,"chnl":15,"x":206,"y":369,"page":0},{"id":54,"index":26,"char":"6","width":23,"height":34,"xoffset":1,"yoffset":4,"xadvance":24,"chnl":15,"x":229,"y":334,"page":0},{"id":49,"index":21,"char":"1","width":15,"height":34,"xoffset":1,"yoffset":4,"xadvance":24,"chnl":15,"x":192,"y":441,"page":0},{"id":50,"index":22,"char":"2","width":24,"height":34,"xoffset":0,"yoffset":4,"xadvance":24,"chnl":15,"x":192,"y":476,"page":0},{"id":33,"index":5,"char":"!","width":8,"height":34,"xoffset":1,"yoffset":4,"xadvance":11,"chnl":15,"x":208,"y":441,"page":0},{"id":63,"index":35,"char":"?","width":21,"height":34,"xoffset":0,"yoffset":4,"xadvance":20,"chnl":15,"x":217,"y":441,"page":0},{"id":163,"index":101,"char":"£","width":25,"height":34,"xoffset":0,"yoffset":4,"xadvance":24,"chnl":15,"x":218,"y":404,"page":0},{"id":35,"index":7,"char":"#","width":27,"height":34,"xoffset":0,"yoffset":4,"xadvance":26,"chnl":15,"x":230,"y":369,"page":0},{"id":1040,"index":950,"char":"А","width":30,"height":34,"xoffset":-1,"yoffset":4,"xadvance":27,"chnl":15,"x":217,"y":476,"page":0},{"id":1041,"index":216,"char":"Б","width":25,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":239,"y":439,"page":0},{"id":1042,"index":951,"char":"В","width":24,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":244,"y":404,"page":0},{"id":1043,"index":952,"char":"Г","width":22,"height":34,"xoffset":2,"yoffset":4,"xadvance":23,"chnl":15,"x":248,"y":474,"page":0},{"id":1045,"index":953,"char":"Е","width":23,"height":34,"xoffset":1,"yoffset":4,"xadvance":24,"chnl":15,"x":265,"y":439,"page":0},{"id":1048,"index":220,"char":"И","width":27,"height":34,"xoffset":2,"yoffset":4,"xadvance":30,"chnl":15,"x":271,"y":474,"page":0},{"id":1081,"index":965,"char":"й","width":22,"height":34,"xoffset":1,"yoffset":4,"xadvance":24,"chnl":15,"x":233,"y":248,"page":0},{"id":1050,"index":947,"char":"К","width":27,"height":34,"xoffset":2,"yoffset":4,"xadvance":27,"chnl":15,"x":233,"y":283,"page":0},{"id":1051,"index":221,"char":"Л","width":29,"height":34,"xoffset":-1,"yoffset":4,"xadvance":30,"chnl":15,"x":256,"y":248,"page":0},{"id":1052,"index":955,"char":"М","width":34,"height":34,"xoffset":1,"yoffset":4,"xadvance":37,"chnl":15,"x":253,"y":318,"page":0},{"id":1053,"index":956,"char":"Н","width":27,"height":34,"xoffset":1,"yoffset":4,"xadvance":30,"chnl":15,"x":261,"y":283,"page":0},{"id":1055,"index":958,"char":"П","width":27,"height":34,"xoffset":2,"yoffset":4,"xadvance":30,"chnl":15,"x":258,"y":353,"page":0},{"id":1056,"index":959,"char":"Р","width":25,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":269,"y":388,"page":0},{"id":1058,"index":961,"char":"Т","width":27,"height":34,"xoffset":-1,"yoffset":4,"xadvance":25,"chnl":15,"x":286,"y":353,"page":0},{"id":1059,"index":222,"char":"У","width":28,"height":34,"xoffset":0,"yoffset":4,"xadvance":26,"chnl":15,"x":288,"y":318,"page":0},{"id":1061,"index":962,"char":"Х","width":28,"height":34,"xoffset":-1,"yoffset":4,"xadvance":26,"chnl":15,"x":289,"y":423,"page":0},{"id":1063,"index":225,"char":"Ч","width":26,"height":34,"xoffset":1,"yoffset":4,"xadvance":29,"chnl":15,"x":295,"y":388,"page":0},{"id":1066,"index":228,"char":"Ъ","width":34,"height":34,"xoffset":-2,"yoffset":4,"xadvance":32,"chnl":15,"x":314,"y":353,"page":0},{"id":1067,"index":229,"char":"Ы","width":33,"height":34,"xoffset":2,"yoffset":4,"xadvance":36,"chnl":15,"x":299,"y":458,"page":0},{"id":1068,"index":230,"char":"Ь","width":25,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":318,"y":423,"page":0},{"id":1071,"index":233,"char":"Я","width":25,"height":34,"xoffset":0,"yoffset":4,"xadvance":27,"chnl":15,"x":322,"y":388,"page":0},{"id":962,"index":200,"char":"ς","width":22,"height":34,"xoffset":0,"yoffset":11,"xadvance":23,"chnl":15,"x":333,"y":458,"page":0},{"id":969,"index":206,"char":"ω","width":34,"height":27,"xoffset":1,"yoffset":12,"xadvance":35,"chnl":15,"x":216,"y":144,"page":0},{"id":917,"index":912,"char":"Ε","width":23,"height":34,"xoffset":1,"yoffset":4,"xadvance":24,"chnl":15,"x":344,"y":423,"page":0},{"id":929,"index":920,"char":"Ρ","width":25,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":348,"y":388,"page":0},{"id":932,"index":921,"char":"Τ","width":27,"height":34,"xoffset":-1,"yoffset":4,"xadvance":25,"chnl":15,"x":237,"y":172,"page":0},{"id":933,"index":922,"char":"Υ","width":29,"height":34,"xoffset":-2,"yoffset":4,"xadvance":25,"chnl":15,"x":258,"y":207,"page":0},{"id":921,"index":915,"char":"Ι","width":8,"height":34,"xoffset":2,"yoffset":4,"xadvance":11,"chnl":15,"x":286,"y":242,"page":0},{"id":928,"index":182,"char":"Π","width":27,"height":34,"xoffset":2,"yoffset":4,"xadvance":30,"chnl":15,"x":289,"y":277,"page":0},{"id":913,"index":910,"char":"Α","width":30,"height":34,"xoffset":-1,"yoffset":4,"xadvance":27,"chnl":15,"x":356,"y":458,"page":0},{"id":931,"index":183,"char":"Σ","width":25,"height":34,"xoffset":-1,"yoffset":4,"xadvance":24,"chnl":15,"x":368,"y":423,"page":0},{"id":916,"index":178,"char":"Δ","width":32,"height":34,"xoffset":-1,"yoffset":4,"xadvance":30,"chnl":15,"x":387,"y":458,"page":0},{"id":934,"index":184,"char":"Φ","width":31,"height":34,"xoffset":0,"yoffset":4,"xadvance":30,"chnl":15,"x":224,"y":71,"page":0},{"id":915,"index":177,"char":"Γ","width":22,"height":34,"xoffset":2,"yoffset":4,"xadvance":23,"chnl":15,"x":244,"y":35,"page":0},{"id":919,"index":914,"char":"Η","width":27,"height":34,"xoffset":1,"yoffset":4,"xadvance":30,"chnl":15,"x":224,"y":106,"page":0},{"id":926,"index":181,"char":"Ξ","width":23,"height":34,"xoffset":0,"yoffset":4,"xadvance":24,"chnl":15,"x":252,"y":106,"page":0},{"id":922,"index":916,"char":"Κ","width":27,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":256,"y":70,"page":0},{"id":923,"index":180,"char":"Λ","width":29,"height":34,"xoffset":-1,"yoffset":4,"xadvance":28,"chnl":15,"x":265,"y":141,"page":0},{"id":918,"index":913,"char":"Ζ","width":26,"height":34,"xoffset":0,"yoffset":4,"xadvance":25,"chnl":15,"x":276,"y":105,"page":0},{"id":935,"index":923,"char":"Χ","width":28,"height":34,"xoffset":-1,"yoffset":4,"xadvance":26,"chnl":15,"x":288,"y":176,"page":0},{"id":936,"index":185,"char":"Ψ","width":29,"height":34,"xoffset":0,"yoffset":4,"xadvance":29,"chnl":15,"x":295,"y":140,"page":0},{"id":937,"index":186,"char":"Ω","width":27,"height":34,"xoffset":0,"yoffset":4,"xadvance":28,"chnl":15,"x":295,"y":211,"page":0},{"id":914,"index":911,"char":"Β","width":24,"height":34,"xoffset":1,"yoffset":4,"xadvance":26,"chnl":15,"x":317,"y":175,"page":0},{"id":925,"index":918,"char":"Ν","width":27,"height":34,"xoffset":1,"yoffset":4,"xadvance":30,"chnl":15,"x":267,"y":0,"page":0},{"id":924,"index":917,"char":"Μ","width":34,"height":34,"xoffset":1,"yoffset":4,"xadvance":37,"chnl":15,"x":267,"y":35,"page":0},{"id":1076,"index":237,"char":"д","width":27,"height":33,"xoffset":-1,"yoffset":12,"xadvance":25,"chnl":15,"x":284,"y":70,"page":0},{"id":1094,"index":248,"char":"ц","width":24,"height":33,"xoffset":1,"yoffset":12,"xadvance":25,"chnl":15,"x":295,"y":0,"page":0},{"id":1102,"index":256,"char":"ю","width":33,"height":27,"xoffset":1,"yoffset":11,"xadvance":34,"chnl":15,"x":295,"y":246,"page":0},{"id":116,"index":88,"char":"t","width":16,"height":32,"xoffset":-2,"yoffset":6,"xadvance":14,"chnl":15,"x":303,"y":104,"page":0},{"id":59,"index":31,"char":";","width":10,"height":32,"xoffset":-1,"yoffset":12,"xadvance":9,"chnl":15,"x":302,"y":34,"page":0},{"id":1096,"index":250,"char":"ш","width":32,"height":26,"xoffset":1,"yoffset":12,"xadvance":34,"chnl":15,"x":323,"y":210,"page":0},{"id":248,"index":137,"char":"ø","width":24,"height":32,"xoffset":0,"yoffset":9,"xadvance":24,"chnl":15,"x":312,"y":67,"page":0},{"id":1099,"index":253,"char":"ы","width":30,"height":26,"xoffset":1,"yoffset":12,"xadvance":33,"chnl":15,"x":313,"y":34,"page":0},{"id":1084,"index":243,"char":"м","width":29,"height":26,"xoffset":1,"yoffset":12,"xadvance":31,"chnl":15,"x":320,"y":0,"page":0},{"id":1098,"index":252,"char":"ъ","width":28,"height":26,"xoffset":-1,"yoffset":12,"xadvance":26,"chnl":15,"x":320,"y":100,"page":0},{"id":960,"index":198,"char":"π","width":28,"height":26,"xoffset":-1,"yoffset":12,"xadvance":25,"chnl":15,"x":337,"y":61,"page":0},{"id":97,"index":69,"char":"a","width":22,"height":27,"xoffset":0,"yoffset":11,"xadvance":23,"chnl":15,"x":265,"y":176,"page":0},{"id":101,"index":73,"char":"e","width":23,"height":27,"xoffset":0,"yoffset":11,"xadvance":22,"chnl":15,"x":344,"y":27,"page":0},{"id":114,"index":86,"char":"r","width":15,"height":27,"xoffset":1,"yoffset":11,"xadvance":14,"chnl":15,"x":325,"y":127,"page":0},{"id":117,"index":89,"char":"u","width":21,"height":27,"xoffset":1,"yoffset":12,"xadvance":23,"chnl":15,"x":341,"y":127,"page":0},{"id":111,"index":83,"char":"o","width":24,"height":27,"xoffset":0,"yoffset":11,"xadvance":24,"chnl":15,"x":349,"y":88,"page":0},{"id":115,"index":87,"char":"s","width":22,"height":27,"xoffset":0,"yoffset":11,"xadvance":22,"chnl":15,"x":366,"y":55,"page":0},{"id":99,"index":71,"char":"c","width":23,"height":27,"xoffset":0,"yoffset":11,"xadvance":22,"chnl":15,"x":342,"y":155,"page":0},{"id":110,"index":82,"char":"n","width":21,"height":27,"xoffset":1,"yoffset":11,"xadvance":23,"chnl":15,"x":363,"y":116,"page":0},{"id":58,"index":30,"char":":","width":9,"height":27,"xoffset":1,"yoffset":12,"xadvance":10,"chnl":15,"x":251,"y":141,"page":0},{"id":126,"index":98,"char":"~","width":27,"height":12,"xoffset":1,"yoffset":18,"xadvance":29,"chnl":15,"x":112,"y":490,"page":0},{"id":1072,"index":963,"char":"а","width":22,"height":27,"xoffset":0,"yoffset":11,"xadvance":23,"chnl":15,"x":374,"y":83,"page":0},{"id":1077,"index":964,"char":"е","width":23,"height":27,"xoffset":0,"yoffset":11,"xadvance":22,"chnl":15,"x":368,"y":0,"page":0},{"id":1079,"index":239,"char":"з","width":21,"height":27,"xoffset":0,"yoffset":11,"xadvance":21,"chnl":15,"x":389,"y":28,"page":0},{"id":1086,"index":966,"char":"о","width":24,"height":27,"xoffset":0,"yoffset":11,"xadvance":24,"chnl":15,"x":392,"y":0,"page":0},{"id":1089,"index":968,"char":"с","width":23,"height":27,"xoffset":0,"yoffset":11,"xadvance":22,"chnl":15,"x":317,"y":274,"page":0},{"id":1101,"index":255,"char":"э","width":22,"height":27,"xoffset":0,"yoffset":11,"xadvance":23,"chnl":15,"x":329,"y":237,"page":0},{"id":949,"index":191,"char":"ε","width":23,"height":27,"xoffset":0,"yoffset":11,"xadvance":23,"chnl":15,"x":317,"y":302,"page":0},{"id":964,"index":202,"char":"τ","width":23,"height":27,"xoffset":0,"yoffset":12,"xadvance":22,"chnl":15,"x":341,"y":265,"page":0},{"id":965,"index":203,"char":"υ","width":22,"height":27,"xoffset":1,"yoffset":12,"xadvance":23,"chnl":15,"x":352,"y":237,"page":0},{"id":959,"index":932,"char":"ο","width":24,"height":27,"xoffset":0,"yoffset":11,"xadvance":24,"chnl":15,"x":356,"y":183,"page":0},{"id":945,"index":187,"char":"α","width":25,"height":27,"xoffset":0,"yoffset":11,"xadvance":24,"chnl":15,"x":366,"y":144,"page":0},{"id":963,"index":201,"char":"σ","width":26,"height":27,"xoffset":0,"yoffset":12,"xadvance":24,"chnl":15,"x":385,"y":111,"page":0},{"id":122,"index":94,"char":"z","width":22,"height":26,"xoffset":0,"yoffset":12,"xadvance":21,"chnl":15,"x":389,"y":56,"page":0},{"id":120,"index":92,"char":"x","width":23,"height":26,"xoffset":-1,"yoffset":12,"xadvance":21,"chnl":15,"x":397,"y":83,"page":0},{"id":118,"index":90,"char":"v","width":23,"height":26,"xoffset":-1,"yoffset":12,"xadvance":20,"chnl":15,"x":411,"y":28,"page":0},{"id":43,"index":15,"char":"+","width":24,"height":26,"xoffset":0,"yoffset":9,"xadvance":24,"chnl":15,"x":417,"y":0,"page":0},{"id":1074,"index":235,"char":"в","width":23,"height":26,"xoffset":1,"yoffset":12,"xadvance":24,"chnl":15,"x":412,"y":55,"page":0},{"id":1075,"index":236,"char":"г","width":18,"height":26,"xoffset":1,"yoffset":12,"xadvance":18,"chnl":15,"x":368,"y":28,"page":0},{"id":1080,"index":240,"char":"и","width":22,"height":26,"xoffset":1,"yoffset":12,"xadvance":24,"chnl":15,"x":435,"y":27,"page":0},{"id":1082,"index":241,"char":"к","width":23,"height":26,"xoffset":1,"yoffset":12,"xadvance":23,"chnl":15,"x":442,"y":0,"page":0},{"id":1083,"index":242,"char":"л","width":24,"height":26,"xoffset":-1,"yoffset":12,"xadvance":24,"chnl":15,"x":466,"y":0,"page":0},{"id":1085,"index":244,"char":"н","width":22,"height":26,"xoffset":1,"yoffset":12,"xadvance":24,"chnl":15,"x":458,"y":27,"page":0},{"id":1087,"index":245,"char":"п","width":22,"height":26,"xoffset":1,"yoffset":12,"xadvance":24,"chnl":15,"x":481,"y":27,"page":0},{"id":1090,"index":246,"char":"т","width":23,"height":26,"xoffset":-1,"yoffset":12,"xadvance":20,"chnl":15,"x":341,"y":293,"page":0},{"id":1093,"index":970,"char":"х","width":23,"height":26,"xoffset":-1,"yoffset":12,"xadvance":21,"chnl":15,"x":341,"y":320,"page":0},{"id":1095,"index":249,"char":"ч","width":22,"height":26,"xoffset":0,"yoffset":12,"xadvance":23,"chnl":15,"x":349,"y":347,"page":0},{"id":1100,"index":254,"char":"ь","width":22,"height":26,"xoffset":1,"yoffset":12,"xadvance":23,"chnl":15,"x":436,"y":54,"page":0},{"id":1103,"index":257,"char":"я","width":23,"height":26,"xoffset":-1,"yoffset":12,"xadvance":23,"chnl":15,"x":459,"y":54,"page":0},{"id":953,"index":195,"char":"ι","width":12,"height":26,"xoffset":2,"yoffset":12,"xadvance":14,"chnl":15,"x":350,"y":0,"page":0},{"id":954,"index":931,"char":"κ","width":23,"height":26,"xoffset":1,"yoffset":12,"xadvance":23,"chnl":15,"x":483,"y":54,"page":0},{"id":957,"index":934,"char":"ν","width":23,"height":26,"xoffset":-1,"yoffset":12,"xadvance":20,"chnl":15,"x":436,"y":81,"page":0},{"id":8211,"index":385,"char":"–","width":25,"height":7,"xoffset":1,"yoffset":18,"xadvance":28,"chnl":15,"x":64,"y":503,"page":0},{"id":95,"index":67,"char":"_","width":23,"height":7,"xoffset":-2,"yoffset":34,"xadvance":19,"chnl":15,"x":100,"y":395,"page":0},{"id":42,"index":14,"char":"*","width":21,"height":21,"xoffset":-1,"yoffset":4,"xadvance":18,"chnl":15,"x":491,"y":0,"page":0},{"id":61,"index":33,"char":"=","width":21,"height":16,"xoffset":1,"yoffset":14,"xadvance":23,"chnl":15,"x":113,"y":275,"page":0},{"id":176,"index":113,"char":"°","width":14,"height":15,"xoffset":1,"yoffset":4,"xadvance":16,"chnl":15,"x":199,"y":248,"page":0},{"id":45,"index":17,"char":"-","width":14,"height":7,"xoffset":-1,"yoffset":20,"xadvance":12,"chnl":15,"x":54,"y":346,"page":0},{"id":44,"index":16,"char":",","width":10,"height":14,"xoffset":-1,"yoffset":30,"xadvance":8,"chnl":15,"x":184,"y":213,"page":0},{"id":34,"index":6,"char":"\"","width":12,"height":14,"xoffset":1,"yoffset":3,"xadvance":13,"chnl":15,"x":83,"y":203,"page":0},{"id":39,"index":11,"char":"'","width":7,"height":14,"xoffset":0,"yoffset":3,"xadvance":7,"chnl":15,"x":140,"y":498,"page":0},{"id":46,"index":18,"char":".","width":9,"height":9,"xoffset":1,"yoffset":30,"xadvance":11,"chnl":15,"x":123,"y":229,"page":0}],"info":{"face":"Roboto-Regular","size":42,"bold":0,"italic":0,"charset":["a","z","e","r","t","y","u","i","o","p","q","s","d","f","g","h","j","k","l","m","w","x","c","v","b","n","A","Z","E","R","T","Y","U","I","O","P","Q","S","D","F","G","H","J","K","L","M","W","X","C","V","B","N","/","\\","*","-","–","+","7","8","9","4","5","6","1","2","3","0",",",";",":","!","?",".","%","$","£","€","=","{","}","(",")","[","]","&","~","\"","'","#","_","|","°","@","А","а","Б","б","В","в","Г","г","Д","д","Е","е","Ё","ё","Ж","ж","З","з","И","и","Й","й","К","к","Л","л","М","м","Н","н","О","о","П","п","Р","р","С","с","Т","т","У","у","Ф","ф","Х","х","Ц","ц","Ч","ч","Ш","ш","Щ","щ","Ъ","ъ","Ы","ы","Ь","ь","Э","э","Ю","ю","Я","я","ü","Ü","ö","Ö","ä","Ä","ñ","Ñ","ς","ε","ρ","τ","υ","θ","ι","ο","π","α","σ","δ","φ","γ","η","ξ","κ","λ","ζ","χ","ψ","ω","β","ν","μ","Ε","Ρ","Τ","Υ","Θ","Ι","Ο","Π","Α","Σ","Δ","Φ","Γ","Η","Ξ","Κ","Λ","Ζ","Χ","Ψ","Ω","Β","Ν","Μ","å","Å","æ","Æ","ø","Ø"],"unicode":1,"stretchH":100,"smooth":1,"aa":1,"padding":[2,2,2,2],"spacing":[0,0]},"common":{"lineHeight":44,"base":34,"scaleW":512,"scaleH":512,"pages":1,"packed":0,"alphaChnl":0,"redChnl":0,"greenChnl":0,"blueChnl":0},"distanceField":{"fieldType":"msdf","distanceRange":4},"kernings":[{"first":97,"second":121,"amount":0},{"first":97,"second":118,"amount":0},{"first":97,"second":34,"amount":-1},{"first":97,"second":39,"amount":-1},{"first":97,"second":1090,"amount":0},{"first":97,"second":1091,"amount":0},{"first":97,"second":947,"amount":0},{"first":97,"second":957,"amount":0},{"first":122,"second":101,"amount":0},{"first":122,"second":111,"amount":0},{"first":122,"second":113,"amount":0},{"first":122,"second":100,"amount":0},{"first":122,"second":103,"amount":0},{"first":122,"second":99,"amount":0},{"first":122,"second":1077,"amount":0},{"first":122,"second":1105,"amount":0},{"first":122,"second":1086,"amount":0},{"first":122,"second":1089,"amount":0},{"first":122,"second":1092,"amount":0},{"first":122,"second":246,"amount":0},{"first":122,"second":962,"amount":0},{"first":122,"second":959,"amount":0},{"first":122,"second":945,"amount":0},{"first":122,"second":963,"amount":0},{"first":101,"second":121,"amount":0},{"first":101,"second":118,"amount":0},{"first":101,"second":34,"amount":0},{"first":101,"second":39,"amount":0},{"first":101,"second":1090,"amount":0},{"first":101,"second":1091,"amount":0},{"first":101,"second":947,"amount":0},{"first":101,"second":957,"amount":0},{"first":114,"second":97,"amount":-1},{"first":114,"second":101,"amount":0},{"first":114,"second":116,"amount":1},{"first":114,"second":121,"amount":0},{"first":114,"second":111,"amount":0},{"first":114,"second":113,"amount":0},{"first":114,"second":100,"amount":0},{"first":114,"second":102,"amount":0},{"first":114,"second":103,"amount":0},{"first":114,"second":119,"amount":0},{"first":114,"second":99,"amount":0},{"first":114,"second":118,"amount":0},{"first":114,"second":44,"amount":-3},{"first":114,"second":46,"amount":-3},{"first":114,"second":34,"amount":0},{"first":114,"second":39,"amount":0},{"first":114,"second":1072,"amount":-1},{"first":114,"second":1077,"amount":0},{"first":114,"second":1105,"amount":0},{"first":114,"second":1086,"amount":0},{"first":114,"second":1089,"amount":0},{"first":114,"second":1091,"amount":0},{"first":114,"second":1092,"amount":0},{"first":114,"second":246,"amount":0},{"first":114,"second":228,"amount":-1},{"first":114,"second":962,"amount":0},{"first":114,"second":959,"amount":0},{"first":114,"second":945,"amount":0},{"first":114,"second":963,"amount":0},{"first":114,"second":947,"amount":0},{"first":114,"second":957,"amount":0},{"first":114,"second":229,"amount":-1},{"first":116,"second":111,"amount":0},{"first":116,"second":1086,"amount":0},{"first":116,"second":246,"amount":0},{"first":116,"second":959,"amount":0},{"first":121,"second":97,"amount":0},{"first":121,"second":101,"amount":0},{"first":121,"second":111,"amount":0},{"first":121,"second":113,"amount":0},{"first":121,"second":100,"amount":0},{"first":121,"second":102,"amount":0},{"first":121,"second":103,"amount":0},{"first":121,"second":99,"amount":0},{"first":121,"second":44,"amount":-2},{"first":121,"second":46,"amount":-2},{"first":121,"second":34,"amount":0},{"first":121,"second":39,"amount":0},{"first":121,"second":1072,"amount":0},{"first":121,"second":1076,"amount":-1},{"first":121,"second":1077,"amount":0},{"first":121,"second":1105,"amount":0},{"first":121,"second":1083,"amount":-1},{"first":121,"second":1086,"amount":0},{"first":121,"second":1089,"amount":0},{"first":121,"second":1092,"amount":0},{"first":121,"second":246,"amount":0},{"first":121,"second":228,"amount":0},{"first":121,"second":962,"amount":0},{"first":121,"second":961,"amount":0},{"first":121,"second":964,"amount":0},{"first":121,"second":959,"amount":0},{"first":121,"second":960,"amount":0},{"first":121,"second":945,"amount":0},{"first":121,"second":963,"amount":0},{"first":121,"second":948,"amount":0},{"first":121,"second":229,"amount":0},{"first":111,"second":122,"amount":0},{"first":111,"second":121,"amount":0},{"first":111,"second":120,"amount":0},{"first":111,"second":118,"amount":0},{"first":111,"second":34,"amount":-3},{"first":111,"second":39,"amount":-3},{"first":111,"second":1076,"amount":-1},{"first":111,"second":1078,"amount":0},{"first":111,"second":1083,"amount":0},{"first":111,"second":1090,"amount":0},{"first":111,"second":1091,"amount":0},{"first":111,"second":1093,"amount":0},{"first":111,"second":964,"amount":0},{"first":111,"second":947,"amount":0},{"first":111,"second":957,"amount":0},{"first":112,"second":122,"amount":0},{"first":112,"second":121,"amount":0},{"first":112,"second":120,"amount":0},{"first":112,"second":118,"amount":0},{"first":112,"second":34,"amount":-1},{"first":112,"second":39,"amount":-1},{"first":112,"second":1076,"amount":0},{"first":112,"second":1078,"amount":0},{"first":112,"second":1083,"amount":0},{"first":112,"second":1090,"amount":-2},{"first":112,"second":1091,"amount":0},{"first":112,"second":1093,"amount":0},{"first":112,"second":964,"amount":0},{"first":112,"second":947,"amount":0},{"first":112,"second":957,"amount":0},{"first":102,"second":101,"amount":0},{"first":102,"second":113,"amount":0},{"first":102,"second":100,"amount":0},{"first":102,"second":103,"amount":0},{"first":102,"second":99,"amount":0},{"first":102,"second":125,"amount":0},{"first":102,"second":41,"amount":0},{"first":102,"second":93,"amount":0},{"first":102,"second":34,"amount":0},{"first":102,"second":39,"amount":0},{"first":102,"second":1077,"amount":0},{"first":102,"second":1105,"amount":0},{"first":102,"second":1089,"amount":0},{"first":102,"second":1092,"amount":0},{"first":102,"second":962,"amount":0},{"first":102,"second":945,"amount":0},{"first":102,"second":963,"amount":0},{"first":104,"second":34,"amount":-2},{"first":104,"second":39,"amount":-2},{"first":104,"second":1090,"amount":-1},{"first":107,"second":101,"amount":0},{"first":107,"second":113,"amount":0},{"first":107,"second":100,"amount":0},{"first":107,"second":103,"amount":0},{"first":107,"second":99,"amount":0},{"first":107,"second":1077,"amount":0},{"first":107,"second":1105,"amount":0},{"first":107,"second":1089,"amount":0},{"first":107,"second":1092,"amount":0},{"first":107,"second":962,"amount":0},{"first":107,"second":945,"amount":0},{"first":107,"second":963,"amount":0},{"first":109,"second":34,"amount":-2},{"first":109,"second":39,"amount":-2},{"first":109,"second":1090,"amount":-1},{"first":119,"second":44,"amount":-3},{"first":119,"second":46,"amount":-3},{"first":120,"second":101,"amount":0},{"first":120,"second":111,"amount":0},{"first":120,"second":113,"amount":0},{"first":120,"second":100,"amount":0},{"first":120,"second":103,"amount":0},{"first":120,"second":99,"amount":0},{"first":120,"second":1077,"amount":0},{"first":120,"second":1105,"amount":0},{"first":120,"second":1086,"amount":0},{"first":120,"second":1089,"amount":0},{"first":120,"second":1092,"amount":0},{"first":120,"second":246,"amount":0},{"first":120,"second":962,"amount":0},{"first":120,"second":959,"amount":0},{"first":120,"second":945,"amount":0},{"first":120,"second":963,"amount":0},{"first":99,"second":34,"amount":0},{"first":99,"second":39,"amount":0},{"first":118,"second":97,"amount":0},{"first":118,"second":101,"amount":0},{"first":118,"second":111,"amount":0},{"first":118,"second":113,"amount":0},{"first":118,"second":100,"amount":0},{"first":118,"second":102,"amount":0},{"first":118,"second":103,"amount":0},{"first":118,"second":99,"amount":0},{"first":118,"second":44,"amount":-2},{"first":118,"second":46,"amount":-2},{"first":118,"second":34,"amount":0},{"first":118,"second":39,"amount":0},{"first":118,"second":1072,"amount":0},{"first":118,"second":1076,"amount":-1},{"first":118,"second":1077,"amount":0},{"first":118,"second":1105,"amount":0},{"first":118,"second":1083,"amount":-1},{"first":118,"second":1086,"amount":0},{"first":118,"second":1089,"amount":0},{"first":118,"second":1092,"amount":0},{"first":118,"second":246,"amount":0},{"first":118,"second":228,"amount":0},{"first":118,"second":962,"amount":0},{"first":118,"second":961,"amount":0},{"first":118,"second":964,"amount":0},{"first":118,"second":959,"amount":0},{"first":118,"second":960,"amount":0},{"first":118,"second":945,"amount":0},{"first":118,"second":963,"amount":0},{"first":118,"second":948,"amount":0},{"first":118,"second":229,"amount":0},{"first":98,"second":122,"amount":0},{"first":98,"second":121,"amount":0},{"first":98,"second":120,"amount":0},{"first":98,"second":118,"amount":0},{"first":98,"second":34,"amount":-1},{"first":98,"second":39,"amount":-1},{"first":98,"second":1076,"amount":0},{"first":98,"second":1078,"amount":0},{"first":98,"second":1083,"amount":0},{"first":98,"second":1090,"amount":-2},{"first":98,"second":1091,"amount":0},{"first":98,"second":1093,"amount":0},{"first":98,"second":964,"amount":0},{"first":98,"second":947,"amount":0},{"first":98,"second":957,"amount":0},{"first":110,"second":34,"amount":-2},{"first":110,"second":39,"amount":-2},{"first":110,"second":1090,"amount":-1},{"first":65,"second":122,"amount":0},{"first":65,"second":116,"amount":0},{"first":65,"second":121,"amount":-1},{"first":65,"second":117,"amount":0},{"first":65,"second":111,"amount":0},{"first":65,"second":119,"amount":-1},{"first":65,"second":118,"amount":-1},{"first":65,"second":84,"amount":-3},{"first":65,"second":89,"amount":-2},{"first":65,"second":85,"amount":0},{"first":65,"second":79,"amount":0},{"first":65,"second":81,"amount":0},{"first":65,"second":71,"amount":0},{"first":65,"second":87,"amount":-1},{"first":65,"second":67,"amount":0},{"first":65,"second":86,"amount":-2},{"first":65,"second":63,"amount":-1},{"first":65,"second":34,"amount":-2},{"first":65,"second":39,"amount":-2},{"first":65,"second":1044,"amount":0},{"first":65,"second":1051,"amount":0},{"first":65,"second":1083,"amount":0},{"first":65,"second":1054,"amount":0},{"first":65,"second":1086,"amount":0},{"first":65,"second":1057,"amount":0},{"first":65,"second":1058,"amount":-3},{"first":65,"second":1090,"amount":-1},{"first":65,"second":1091,"amount":-1},{"first":65,"second":1063,"amount":-1},{"first":65,"second":1095,"amount":-2},{"first":65,"second":1068,"amount":-1},{"first":65,"second":252,"amount":0},{"first":65,"second":220,"amount":0},{"first":65,"second":246,"amount":0},{"first":65,"second":214,"amount":0},{"first":65,"second":964,"amount":-1},{"first":65,"second":965,"amount":0},{"first":65,"second":959,"amount":0},{"first":65,"second":947,"amount":-1},{"first":65,"second":955,"amount":0},{"first":65,"second":957,"amount":-1},{"first":65,"second":933,"amount":-2},{"first":65,"second":920,"amount":0},{"first":65,"second":927,"amount":0},{"first":65,"second":934,"amount":-1},{"first":65,"second":936,"amount":-1},{"first":65,"second":216,"amount":0},{"first":90,"second":101,"amount":0},{"first":90,"second":121,"amount":-1},{"first":90,"second":117,"amount":0},{"first":90,"second":111,"amount":0},{"first":90,"second":113,"amount":0},{"first":90,"second":100,"amount":0},{"first":90,"second":103,"amount":0},{"first":90,"second":119,"amount":-1},{"first":90,"second":99,"amount":0},{"first":90,"second":118,"amount":-1},{"first":90,"second":65,"amount":0},{"first":90,"second":79,"amount":-1},{"first":90,"second":81,"amount":-1},{"first":90,"second":71,"amount":-1},{"first":90,"second":67,"amount":-1},{"first":90,"second":1040,"amount":0},{"first":90,"second":1077,"amount":0},{"first":90,"second":1105,"amount":0},{"first":90,"second":1054,"amount":-1},{"first":90,"second":1086,"amount":0},{"first":90,"second":1057,"amount":-1},{"first":90,"second":1089,"amount":0},{"first":90,"second":1091,"amount":-1},{"first":90,"second":1092,"amount":0},{"first":90,"second":252,"amount":0},{"first":90,"second":246,"amount":0},{"first":90,"second":214,"amount":-1},{"first":90,"second":196,"amount":0},{"first":90,"second":962,"amount":0},{"first":90,"second":965,"amount":0},{"first":90,"second":959,"amount":0},{"first":90,"second":945,"amount":0},{"first":90,"second":963,"amount":0},{"first":90,"second":947,"amount":-1},{"first":90,"second":968,"amount":-1},{"first":90,"second":957,"amount":-1},{"first":90,"second":920,"amount":-1},{"first":90,"second":927,"amount":-1},{"first":90,"second":913,"amount":0},{"first":90,"second":916,"amount":0},{"first":90,"second":934,"amount":-1},{"first":90,"second":923,"amount":0},{"first":90,"second":197,"amount":0},{"first":90,"second":216,"amount":-1},{"first":69,"second":101,"amount":0},{"first":69,"second":121,"amount":-1},{"first":69,"second":117,"amount":0},{"first":69,"second":111,"amount":0},{"first":69,"second":113,"amount":0},{"first":69,"second":100,"amount":0},{"first":69,"second":102,"amount":0},{"first":69,"second":103,"amount":0},{"first":69,"second":119,"amount":0},{"first":69,"second":99,"amount":0},{"first":69,"second":118,"amount":-1},{"first":69,"second":84,"amount":0},{"first":69,"second":1077,"amount":0},{"first":69,"second":1105,"amount":0},{"first":69,"second":1086,"amount":0},{"first":69,"second":1089,"amount":0},{"first":69,"second":1058,"amount":0},{"first":69,"second":1091,"amount":-1},{"first":69,"second":1092,"amount":0},{"first":69,"second":252,"amount":0},{"first":69,"second":246,"amount":0},{"first":69,"second":962,"amount":0},{"first":69,"second":965,"amount":0},{"first":69,"second":959,"amount":0},{"first":69,"second":945,"amount":0},{"first":69,"second":963,"amount":0},{"first":69,"second":947,"amount":-1},{"first":69,"second":957,"amount":-1},{"first":82,"second":84,"amount":-2},{"first":82,"second":89,"amount":-1},{"first":82,"second":86,"amount":0},{"first":82,"second":1058,"amount":-2},{"first":82,"second":933,"amount":-1},{"first":84,"second":97,"amount":-2},{"first":84,"second":122,"amount":-1},{"first":84,"second":101,"amount":-2},{"first":84,"second":114,"amount":-2},{"first":84,"second":121,"amount":-1},{"first":84,"second":117,"amount":-2},{"first":84,"second":111,"amount":-2},{"first":84,"second":112,"amount":-2},{"first":84,"second":113,"amount":-2},{"first":84,"second":115,"amount":-2},{"first":84,"second":100,"amount":-2},{"first":84,"second":103,"amount":-2},{"first":84,"second":109,"amount":-2},{"first":84,"second":119,"amount":-1},{"first":84,"second":120,"amount":-2},{"first":84,"second":99,"amount":-2},{"first":84,"second":118,"amount":-1},{"first":84,"second":110,"amount":-2},{"first":84,"second":65,"amount":-2},{"first":84,"second":84,"amount":0},{"first":84,"second":89,"amount":0},{"first":84,"second":79,"amount":-1},{"first":84,"second":81,"amount":-1},{"first":84,"second":83,"amount":0},{"first":84,"second":71,"amount":-1},{"first":84,"second":74,"amount":-5},{"first":84,"second":87,"amount":0},{"first":84,"second":67,"amount":-1},{"first":84,"second":86,"amount":0},{"first":84,"second":45,"amount":-5},{"first":84,"second":8211,"amount":-5},{"first":84,"second":44,"amount":-4},{"first":84,"second":46,"amount":-4},{"first":84,"second":1040,"amount":-2},{"first":84,"second":1072,"amount":-2},{"first":84,"second":1073,"amount":-1},{"first":84,"second":1074,"amount":-2},{"first":84,"second":1075,"amount":-2},{"first":84,"second":1044,"amount":-2},{"first":84,"second":1076,"amount":-3},{"first":84,"second":1077,"amount":-2},{"first":84,"second":1105,"amount":-2},{"first":84,"second":1078,"amount":-2},{"first":84,"second":1079,"amount":-3},{"first":84,"second":1080,"amount":-2},{"first":84,"second":1081,"amount":-2},{"first":84,"second":1082,"amount":-2},{"first":84,"second":1051,"amount":-1},{"first":84,"second":1083,"amount":-3},{"first":84,"second":1084,"amount":-2},{"first":84,"second":1085,"amount":-2},{"first":84,"second":1054,"amount":-1},{"first":84,"second":1086,"amount":-2},{"first":84,"second":1087,"amount":-2},{"first":84,"second":1088,"amount":-2},{"first":84,"second":1057,"amount":-1},{"first":84,"second":1089,"amount":-2},{"first":84,"second":1058,"amount":0},{"first":84,"second":1090,"amount":-2},{"first":84,"second":1091,"amount":-1},{"first":84,"second":1092,"amount":-2},{"first":84,"second":1093,"amount":-2},{"first":84,"second":1094,"amount":-2},{"first":84,"second":1095,"amount":-3},{"first":84,"second":1096,"amount":-2},{"first":84,"second":1097,"amount":-2},{"first":84,"second":1099,"amount":-3},{"first":84,"second":1068,"amount":0},{"first":84,"second":1100,"amount":-2},{"first":84,"second":1101,"amount":-3},{"first":84,"second":1102,"amount":-2},{"first":84,"second":1103,"amount":-3},{"first":84,"second":252,"amount":-2},{"first":84,"second":246,"amount":-2},{"first":84,"second":214,"amount":-1},{"first":84,"second":228,"amount":-2},{"first":84,"second":196,"amount":-2},{"first":84,"second":241,"amount":-2},{"first":84,"second":962,"amount":-2},{"first":84,"second":949,"amount":-3},{"first":84,"second":961,"amount":-3},{"first":84,"second":964,"amount":-2},{"first":84,"second":965,"amount":-2},{"first":84,"second":953,"amount":-3},{"first":84,"second":959,"amount":-2},{"first":84,"second":960,"amount":-2},{"first":84,"second":945,"amount":-2},{"first":84,"second":963,"amount":-2},{"first":84,"second":948,"amount":-1},{"first":84,"second":966,"amount":-3},{"first":84,"second":947,"amount":-1},{"first":84,"second":951,"amount":-2},{"first":84,"second":968,"amount":-3},{"first":84,"second":969,"amount":-3},{"first":84,"second":957,"amount":-1},{"first":84,"second":933,"amount":0},{"first":84,"second":920,"amount":-1},{"first":84,"second":927,"amount":-1},{"first":84,"second":913,"amount":-2},{"first":84,"second":916,"amount":-2},{"first":84,"second":934,"amount":-2},{"first":84,"second":923,"amount":-2},{"first":84,"second":229,"amount":-2},{"first":84,"second":197,"amount":-2},{"first":84,"second":230,"amount":-2},{"first":84,"second":198,"amount":-4},{"first":84,"second":248,"amount":-2},{"first":84,"second":216,"amount":-1},{"first":89,"second":97,"amount":-1},{"first":89,"second":122,"amount":-1},{"first":89,"second":101,"amount":-1},{"first":89,"second":114,"amount":-1},{"first":89,"second":116,"amount":0},{"first":89,"second":121,"amount":0},{"first":89,"second":117,"amount":-1},{"first":89,"second":111,"amount":-1},{"first":89,"second":112,"amount":-1},{"first":89,"second":113,"amount":-1},{"first":89,"second":115,"amount":-1},{"first":89,"second":100,"amount":-1},{"first":89,"second":102,"amount":0},{"first":89,"second":103,"amount":-1},{"first":89,"second":109,"amount":-1},{"first":89,"second":120,"amount":0},{"first":89,"second":99,"amount":-1},{"first":89,"second":118,"amount":0},{"first":89,"second":110,"amount":-1},{"first":89,"second":65,"amount":-2},{"first":89,"second":84,"amount":0},{"first":89,"second":89,"amount":0},{"first":89,"second":85,"amount":-2},{"first":89,"second":79,"amount":-1},{"first":89,"second":81,"amount":-1},{"first":89,"second":83,"amount":0},{"first":89,"second":71,"amount":-1},{"first":89,"second":74,"amount":-2},{"first":89,"second":87,"amount":0},{"first":89,"second":88,"amount":0},{"first":89,"second":67,"amount":-1},{"first":89,"second":86,"amount":0},{"first":89,"second":42,"amount":-1},{"first":89,"second":45,"amount":-1},{"first":89,"second":8211,"amount":-1},{"first":89,"second":44,"amount":-4},{"first":89,"second":46,"amount":-4},{"first":89,"second":125,"amount":0},{"first":89,"second":41,"amount":0},{"first":89,"second":93,"amount":0},{"first":89,"second":38,"amount":-1},{"first":89,"second":1040,"amount":-2},{"first":89,"second":1072,"amount":-1},{"first":89,"second":1075,"amount":-1},{"first":89,"second":1077,"amount":-1},{"first":89,"second":1105,"amount":-1},{"first":89,"second":1046,"amount":0},{"first":89,"second":1078,"amount":0},{"first":89,"second":1080,"amount":-1},{"first":89,"second":1081,"amount":-1},{"first":89,"second":1082,"amount":-1},{"first":89,"second":1084,"amount":-1},{"first":89,"second":1085,"amount":-1},{"first":89,"second":1054,"amount":-1},{"first":89,"second":1086,"amount":-1},{"first":89,"second":1087,"amount":-1},{"first":89,"second":1088,"amount":-1},{"first":89,"second":1057,"amount":-1},{"first":89,"second":1089,"amount":-1},{"first":89,"second":1058,"amount":0},{"first":89,"second":1091,"amount":0},{"first":89,"second":1092,"amount":-1},{"first":89,"second":1061,"amount":0},{"first":89,"second":1093,"amount":0},{"first":89,"second":1094,"amount":-1},{"first":89,"second":1096,"amount":-1},{"first":89,"second":1097,"amount":-1},{"first":89,"second":1100,"amount":-1},{"first":89,"second":1102,"amount":-1},{"first":89,"second":252,"amount":-1},{"first":89,"second":220,"amount":-2},{"first":89,"second":246,"amount":-1},{"first":89,"second":214,"amount":-1},{"first":89,"second":228,"amount":-1},{"first":89,"second":196,"amount":-2},{"first":89,"second":241,"amount":-1},{"first":89,"second":962,"amount":-1},{"first":89,"second":949,"amount":-1},{"first":89,"second":961,"amount":-1},{"first":89,"second":964,"amount":0},{"first":89,"second":965,"amount":-1},{"first":89,"second":952,"amount":0},{"first":89,"second":953,"amount":-1},{"first":89,"second":959,"amount":-1},{"first":89,"second":960,"amount":0},{"first":89,"second":945,"amount":-1},{"first":89,"second":963,"amount":-1},{"first":89,"second":948,"amount":0},{"first":89,"second":966,"amount":-1},{"first":89,"second":947,"amount":0},{"first":89,"second":951,"amount":-1},{"first":89,"second":950,"amount":0},{"first":89,"second":968,"amount":-1},{"first":89,"second":969,"amount":-1},{"first":89,"second":946,"amount":0},{"first":89,"second":957,"amount":0},{"first":89,"second":933,"amount":0},{"first":89,"second":920,"amount":-1},{"first":89,"second":927,"amount":-1},{"first":89,"second":913,"amount":-2},{"first":89,"second":916,"amount":-2},{"first":89,"second":934,"amount":-1},{"first":89,"second":923,"amount":-2},{"first":89,"second":935,"amount":0},{"first":89,"second":229,"amount":-1},{"first":89,"second":197,"amount":-2},{"first":89,"second":230,"amount":-1},{"first":89,"second":198,"amount":-2},{"first":89,"second":248,"amount":-1},{"first":89,"second":216,"amount":-1},{"first":85,"second":65,"amount":0},{"first":85,"second":1040,"amount":0},{"first":85,"second":196,"amount":0},{"first":85,"second":913,"amount":0},{"first":85,"second":916,"amount":0},{"first":85,"second":923,"amount":0},{"first":85,"second":197,"amount":0},{"first":73,"second":65,"amount":0},{"first":73,"second":84,"amount":-1},{"first":73,"second":89,"amount":-1},{"first":73,"second":88,"amount":0},{"first":73,"second":1040,"amount":0},{"first":73,"second":1044,"amount":0},{"first":73,"second":1076,"amount":0},{"first":73,"second":1046,"amount":0},{"first":73,"second":1051,"amount":0},{"first":73,"second":1083,"amount":0},{"first":73,"second":1058,"amount":-1},{"first":73,"second":1061,"amount":0},{"first":73,"second":1063,"amount":-1},{"first":73,"second":1095,"amount":-1},{"first":73,"second":196,"amount":0},{"first":73,"second":933,"amount":-1},{"first":73,"second":913,"amount":0},{"first":73,"second":916,"amount":0},{"first":73,"second":923,"amount":0},{"first":73,"second":935,"amount":0},{"first":73,"second":197,"amount":0},{"first":79,"second":65,"amount":0},{"first":79,"second":90,"amount":0},{"first":79,"second":84,"amount":-1},{"first":79,"second":89,"amount":-1},{"first":79,"second":88,"amount":0},{"first":79,"second":86,"amount":0},{"first":79,"second":44,"amount":-2},{"first":79,"second":46,"amount":-2},{"first":79,"second":1040,"amount":0},{"first":79,"second":1044,"amount":-1},{"first":79,"second":1046,"amount":0},{"first":79,"second":1051,"amount":-1},{"first":79,"second":1058,"amount":-1},{"first":79,"second":1061,"amount":0},{"first":79,"second":1068,"amount":-1},{"first":79,"second":196,"amount":0},{"first":79,"second":955,"amount":0},{"first":79,"second":933,"amount":-1},{"first":79,"second":913,"amount":0},{"first":79,"second":931,"amount":0},{"first":79,"second":916,"amount":0},{"first":79,"second":926,"amount":0},{"first":79,"second":923,"amount":0},{"first":79,"second":918,"amount":0},{"first":79,"second":935,"amount":0},{"first":79,"second":197,"amount":0},{"first":79,"second":198,"amount":-1},{"first":80,"second":97,"amount":0},{"first":80,"second":101,"amount":0},{"first":80,"second":116,"amount":0},{"first":80,"second":121,"amount":0},{"first":80,"second":111,"amount":0},{"first":80,"second":113,"amount":0},{"first":80,"second":100,"amount":0},{"first":80,"second":103,"amount":0},{"first":80,"second":99,"amount":0},{"first":80,"second":118,"amount":0},{"first":80,"second":65,"amount":-3},{"first":80,"second":90,"amount":-1},{"first":80,"second":74,"amount":-4},{"first":80,"second":88,"amount":-1},{"first":80,"second":44,"amount":-7},{"first":80,"second":46,"amount":-7},{"first":80,"second":1040,"amount":-3},{"first":80,"second":1072,"amount":0},{"first":80,"second":1044,"amount":-2},{"first":80,"second":1076,"amount":-1},{"first":80,"second":1077,"amount":0},{"first":80,"second":1105,"amount":0},{"first":80,"second":1046,"amount":-1},{"first":80,"second":1051,"amount":-1},{"first":80,"second":1083,"amount":-1},{"first":80,"second":1086,"amount":0},{"first":80,"second":1089,"amount":0},{"first":80,"second":1091,"amount":0},{"first":80,"second":1092,"amount":0},{"first":80,"second":1061,"amount":-1},{"first":80,"second":246,"amount":0},{"first":80,"second":228,"amount":0},{"first":80,"second":196,"amount":-3},{"first":80,"second":962,"amount":0},{"first":80,"second":961,"amount":-1},{"first":80,"second":959,"amount":0},{"first":80,"second":945,"amount":0},{"first":80,"second":963,"amount":0},{"first":80,"second":948,"amount":0},{"first":80,"second":947,"amount":0},{"first":80,"second":955,"amount":-1},{"first":80,"second":957,"amount":0},{"first":80,"second":913,"amount":-3},{"first":80,"second":916,"amount":-3},{"first":80,"second":923,"amount":-3},{"first":80,"second":918,"amount":-1},{"first":80,"second":935,"amount":-1},{"first":80,"second":229,"amount":0},{"first":80,"second":197,"amount":-3},{"first":80,"second":198,"amount":-2},{"first":81,"second":84,"amount":-1},{"first":81,"second":89,"amount":-1},{"first":81,"second":87,"amount":0},{"first":81,"second":86,"amount":-1},{"first":81,"second":1058,"amount":-1},{"first":81,"second":933,"amount":-1},{"first":68,"second":65,"amount":0},{"first":68,"second":90,"amount":0},{"first":68,"second":84,"amount":-1},{"first":68,"second":89,"amount":-1},{"first":68,"second":88,"amount":0},{"first":68,"second":86,"amount":0},{"first":68,"second":44,"amount":-2},{"first":68,"second":46,"amount":-2},{"first":68,"second":1040,"amount":0},{"first":68,"second":1044,"amount":-1},{"first":68,"second":1046,"amount":0},{"first":68,"second":1051,"amount":-1},{"first":68,"second":1058,"amount":-1},{"first":68,"second":1061,"amount":0},{"first":68,"second":1068,"amount":-1},{"first":68,"second":196,"amount":0},{"first":68,"second":955,"amount":0},{"first":68,"second":933,"amount":-1},{"first":68,"second":913,"amount":0},{"first":68,"second":931,"amount":0},{"first":68,"second":916,"amount":0},{"first":68,"second":926,"amount":0},{"first":68,"second":923,"amount":0},{"first":68,"second":918,"amount":0},{"first":68,"second":935,"amount":0},{"first":68,"second":197,"amount":0},{"first":68,"second":198,"amount":-1},{"first":70,"second":97,"amount":-1},{"first":70,"second":101,"amount":0},{"first":70,"second":114,"amount":-1},{"first":70,"second":121,"amount":0},{"first":70,"second":117,"amount":0},{"first":70,"second":111,"amount":0},{"first":70,"second":113,"amount":0},{"first":70,"second":100,"amount":0},{"first":70,"second":103,"amount":0},{"first":70,"second":99,"amount":0},{"first":70,"second":118,"amount":0},{"first":70,"second":65,"amount":-3},{"first":70,"second":84,"amount":0},{"first":70,"second":74,"amount":-5},{"first":70,"second":44,"amount":-5},{"first":70,"second":46,"amount":-5},{"first":70,"second":1040,"amount":-3},{"first":70,"second":1072,"amount":-1},{"first":70,"second":1077,"amount":0},{"first":70,"second":1105,"amount":0},{"first":70,"second":1086,"amount":0},{"first":70,"second":1089,"amount":0},{"first":70,"second":1058,"amount":0},{"first":70,"second":1091,"amount":0},{"first":70,"second":1092,"amount":0},{"first":70,"second":252,"amount":0},{"first":70,"second":246,"amount":0},{"first":70,"second":228,"amount":-1},{"first":70,"second":196,"amount":-3},{"first":70,"second":962,"amount":0},{"first":70,"second":965,"amount":0},{"first":70,"second":959,"amount":0},{"first":70,"second":945,"amount":0},{"first":70,"second":963,"amount":0},{"first":70,"second":947,"amount":0},{"first":70,"second":957,"amount":0},{"first":70,"second":913,"amount":-3},{"first":70,"second":916,"amount":-3},{"first":70,"second":923,"amount":-3},{"first":70,"second":229,"amount":-1},{"first":70,"second":197,"amount":-3},{"first":72,"second":65,"amount":0},{"first":72,"second":84,"amount":-1},{"first":72,"second":89,"amount":-1},{"first":72,"second":88,"amount":0},{"first":72,"second":1040,"amount":0},{"first":72,"second":1044,"amount":0},{"first":72,"second":1076,"amount":0},{"first":72,"second":1046,"amount":0},{"first":72,"second":1051,"amount":0},{"first":72,"second":1083,"amount":0},{"first":72,"second":1058,"amount":-1},{"first":72,"second":1061,"amount":0},{"first":72,"second":1063,"amount":-1},{"first":72,"second":1095,"amount":-1},{"first":72,"second":196,"amount":0},{"first":72,"second":933,"amount":-1},{"first":72,"second":913,"amount":0},{"first":72,"second":916,"amount":0},{"first":72,"second":923,"amount":0},{"first":72,"second":935,"amount":0},{"first":72,"second":197,"amount":0},{"first":74,"second":65,"amount":0},{"first":74,"second":1040,"amount":0},{"first":74,"second":196,"amount":0},{"first":74,"second":913,"amount":0},{"first":74,"second":916,"amount":0},{"first":74,"second":923,"amount":0},{"first":74,"second":197,"amount":0},{"first":75,"second":101,"amount":-1},{"first":75,"second":121,"amount":-1},{"first":75,"second":117,"amount":0},{"first":75,"second":111,"amount":-1},{"first":75,"second":112,"amount":0},{"first":75,"second":113,"amount":-1},{"first":75,"second":100,"amount":-1},{"first":75,"second":103,"amount":-1},{"first":75,"second":109,"amount":0},{"first":75,"second":119,"amount":-1},{"first":75,"second":99,"amount":-1},{"first":75,"second":118,"amount":-1},{"first":75,"second":110,"amount":0},{"first":75,"second":79,"amount":-1},{"first":75,"second":81,"amount":-1},{"first":75,"second":71,"amount":-1},{"first":75,"second":67,"amount":-1},{"first":75,"second":45,"amount":-1},{"first":75,"second":8211,"amount":-1},{"first":75,"second":1073,"amount":-1},{"first":75,"second":1075,"amount":0},{"first":75,"second":1077,"amount":-1},{"first":75,"second":1105,"amount":-1},{"first":75,"second":1080,"amount":0},{"first":75,"second":1081,"amount":0},{"first":75,"second":1082,"amount":0},{"first":75,"second":1084,"amount":0},{"first":75,"second":1085,"amount":0},{"first":75,"second":1054,"amount":-1},{"first":75,"second":1086,"amount":-1},{"first":75,"second":1087,"amount":0},{"first":75,"second":1088,"amount":0},{"first":75,"second":1057,"amount":-1},{"first":75,"second":1089,"amount":-1},{"first":75,"second":1090,"amount":-1},{"first":75,"second":1091,"amount":-1},{"first":75,"second":1092,"amount":-1},{"first":75,"second":1094,"amount":0},{"first":75,"second":1095,"amount":-2},{"first":75,"second":1096,"amount":0},{"first":75,"second":1097,"amount":0},{"first":75,"second":1100,"amount":0},{"first":75,"second":1102,"amount":0},{"first":75,"second":252,"amount":0},{"first":75,"second":246,"amount":-1},{"first":75,"second":214,"amount":-1},{"first":75,"second":241,"amount":0},{"first":75,"second":962,"amount":-1},{"first":75,"second":964,"amount":-2},{"first":75,"second":965,"amount":0},{"first":75,"second":959,"amount":-1},{"first":75,"second":945,"amount":-1},{"first":75,"second":963,"amount":-1},{"first":75,"second":947,"amount":-1},{"first":75,"second":951,"amount":0},{"first":75,"second":957,"amount":-1},{"first":75,"second":920,"amount":-1},{"first":75,"second":927,"amount":-1},{"first":75,"second":934,"amount":-1},{"first":75,"second":216,"amount":-1},{"first":76,"second":121,"amount":-3},{"first":76,"second":117,"amount":-1},{"first":76,"second":119,"amount":-2},{"first":76,"second":118,"amount":-3},{"first":76,"second":65,"amount":0},{"first":76,"second":84,"amount":-6},{"first":76,"second":89,"amount":-5},{"first":76,"second":85,"amount":-1},{"first":76,"second":79,"amount":-1},{"first":76,"second":81,"amount":-1},{"first":76,"second":71,"amount":-1},{"first":76,"second":87,"amount":-3},{"first":76,"second":67,"amount":-1},{"first":76,"second":86,"amount":-4},{"first":76,"second":34,"amount":-7},{"first":76,"second":39,"amount":-7},{"first":76,"second":1040,"amount":0},{"first":76,"second":1054,"amount":-1},{"first":76,"second":1057,"amount":-1},{"first":76,"second":1058,"amount":-6},{"first":76,"second":1091,"amount":-3},{"first":76,"second":252,"amount":-1},{"first":76,"second":220,"amount":-1},{"first":76,"second":214,"amount":-1},{"first":76,"second":196,"amount":0},{"first":76,"second":965,"amount":-1},{"first":76,"second":947,"amount":-3},{"first":76,"second":957,"amount":-3},{"first":76,"second":933,"amount":-5},{"first":76,"second":920,"amount":-1},{"first":76,"second":927,"amount":-1},{"first":76,"second":913,"amount":0},{"first":76,"second":916,"amount":0},{"first":76,"second":923,"amount":0},{"first":76,"second":197,"amount":0},{"first":76,"second":216,"amount":-1},{"first":77,"second":65,"amount":0},{"first":77,"second":84,"amount":-1},{"first":77,"second":89,"amount":-1},{"first":77,"second":88,"amount":0},{"first":77,"second":1040,"amount":0},{"first":77,"second":1044,"amount":0},{"first":77,"second":1076,"amount":0},{"first":77,"second":1046,"amount":0},{"first":77,"second":1051,"amount":0},{"first":77,"second":1083,"amount":0},{"first":77,"second":1058,"amount":-1},{"first":77,"second":1061,"amount":0},{"first":77,"second":1063,"amount":-1},{"first":77,"second":1095,"amount":-1},{"first":77,"second":196,"amount":0},{"first":77,"second":933,"amount":-1},{"first":77,"second":913,"amount":0},{"first":77,"second":916,"amount":0},{"first":77,"second":923,"amount":0},{"first":77,"second":935,"amount":0},{"first":77,"second":197,"amount":0},{"first":87,"second":97,"amount":-1},{"first":87,"second":101,"amount":-1},{"first":87,"second":114,"amount":0},{"first":87,"second":117,"amount":0},{"first":87,"second":111,"amount":-1},{"first":87,"second":113,"amount":-1},{"first":87,"second":100,"amount":-1},{"first":87,"second":103,"amount":-1},{"first":87,"second":99,"amount":-1},{"first":87,"second":65,"amount":-1},{"first":87,"second":84,"amount":0},{"first":87,"second":45,"amount":-1},{"first":87,"second":8211,"amount":-1},{"first":87,"second":44,"amount":-3},{"first":87,"second":46,"amount":-3},{"first":87,"second":125,"amount":0},{"first":87,"second":41,"amount":0},{"first":87,"second":93,"amount":0},{"first":87,"second":1040,"amount":-1},{"first":87,"second":1072,"amount":-1},{"first":87,"second":1077,"amount":-1},{"first":87,"second":1105,"amount":-1},{"first":87,"second":1086,"amount":-1},{"first":87,"second":1089,"amount":-1},{"first":87,"second":1058,"amount":0},{"first":87,"second":1092,"amount":-1},{"first":87,"second":252,"amount":0},{"first":87,"second":246,"amount":-1},{"first":87,"second":228,"amount":-1},{"first":87,"second":196,"amount":-1},{"first":87,"second":962,"amount":-1},{"first":87,"second":965,"amount":0},{"first":87,"second":959,"amount":-1},{"first":87,"second":945,"amount":-1},{"first":87,"second":963,"amount":-1},{"first":87,"second":913,"amount":-1},{"first":87,"second":916,"amount":-1},{"first":87,"second":923,"amount":-1},{"first":87,"second":229,"amount":-1},{"first":87,"second":197,"amount":-1},{"first":88,"second":101,"amount":-1},{"first":88,"second":121,"amount":-1},{"first":88,"second":117,"amount":0},{"first":88,"second":111,"amount":0},{"first":88,"second":113,"amount":-1},{"first":88,"second":100,"amount":-1},{"first":88,"second":103,"amount":-1},{"first":88,"second":99,"amount":-1},{"first":88,"second":118,"amount":-1},{"first":88,"second":79,"amount":-1},{"first":88,"second":81,"amount":-1},{"first":88,"second":71,"amount":-1},{"first":88,"second":67,"amount":-1},{"first":88,"second":86,"amount":0},{"first":88,"second":45,"amount":-1},{"first":88,"second":8211,"amount":-1},{"first":88,"second":1073,"amount":0},{"first":88,"second":1044,"amount":0},{"first":88,"second":1077,"amount":-1},{"first":88,"second":1105,"amount":-1},{"first":88,"second":1051,"amount":0},{"first":88,"second":1083,"amount":0},{"first":88,"second":1054,"amount":-1},{"first":88,"second":1086,"amount":0},{"first":88,"second":1057,"amount":-1},{"first":88,"second":1089,"amount":-1},{"first":88,"second":1090,"amount":-1},{"first":88,"second":1091,"amount":-1},{"first":88,"second":1092,"amount":-1},{"first":88,"second":1095,"amount":-1},{"first":88,"second":252,"amount":0},{"first":88,"second":246,"amount":0},{"first":88,"second":214,"amount":-1},{"first":88,"second":962,"amount":-1},{"first":88,"second":964,"amount":-1},{"first":88,"second":965,"amount":0},{"first":88,"second":952,"amount":0},{"first":88,"second":959,"amount":0},{"first":88,"second":945,"amount":-1},{"first":88,"second":963,"amount":-1},{"first":88,"second":948,"amount":0},{"first":88,"second":966,"amount":-1},{"first":88,"second":947,"amount":-1},{"first":88,"second":955,"amount":0},{"first":88,"second":968,"amount":-1},{"first":88,"second":969,"amount":0},{"first":88,"second":957,"amount":-1},{"first":88,"second":920,"amount":-1},{"first":88,"second":927,"amount":-1},{"first":88,"second":934,"amount":-1},{"first":88,"second":216,"amount":-1},{"first":67,"second":84,"amount":-1},{"first":67,"second":125,"amount":0},{"first":67,"second":41,"amount":-1},{"first":67,"second":93,"amount":0},{"first":67,"second":1058,"amount":-1},{"first":86,"second":97,"amount":-1},{"first":86,"second":101,"amount":-1},{"first":86,"second":114,"amount":-1},{"first":86,"second":121,"amount":0},{"first":86,"second":117,"amount":-1},{"first":86,"second":111,"amount":-1},{"first":86,"second":113,"amount":-1},{"first":86,"second":100,"amount":-1},{"first":86,"second":103,"amount":-1},{"first":86,"second":99,"amount":-1},{"first":86,"second":118,"amount":0},{"first":86,"second":65,"amount":-2},{"first":86,"second":79,"amount":0},{"first":86,"second":81,"amount":0},{"first":86,"second":71,"amount":0},{"first":86,"second":67,"amount":0},{"first":86,"second":45,"amount":-1},{"first":86,"second":8211,"amount":-1},{"first":86,"second":44,"amount":-5},{"first":86,"second":46,"amount":-5},{"first":86,"second":125,"amount":0},{"first":86,"second":41,"amount":0},{"first":86,"second":93,"amount":0},{"first":86,"second":1040,"amount":-2},{"first":86,"second":1072,"amount":-1},{"first":86,"second":1077,"amount":-1},{"first":86,"second":1105,"amount":-1},{"first":86,"second":1054,"amount":0},{"first":86,"second":1086,"amount":-1},{"first":86,"second":1057,"amount":0},{"first":86,"second":1089,"amount":-1},{"first":86,"second":1091,"amount":0},{"first":86,"second":1092,"amount":-1},{"first":86,"second":252,"amount":-1},{"first":86,"second":246,"amount":-1},{"first":86,"second":214,"amount":0},{"first":86,"second":228,"amount":-1},{"first":86,"second":196,"amount":-2},{"first":86,"second":962,"amount":-1},{"first":86,"second":965,"amount":-1},{"first":86,"second":959,"amount":-1},{"first":86,"second":945,"amount":-1},{"first":86,"second":963,"amount":-1},{"first":86,"second":947,"amount":0},{"first":86,"second":957,"amount":0},{"first":86,"second":920,"amount":0},{"first":86,"second":927,"amount":0},{"first":86,"second":913,"amount":-2},{"first":86,"second":916,"amount":-2},{"first":86,"second":923,"amount":-2},{"first":86,"second":229,"amount":-1},{"first":86,"second":197,"amount":-2},{"first":86,"second":216,"amount":0},{"first":66,"second":84,"amount":-1},{"first":66,"second":89,"amount":-1},{"first":66,"second":86,"amount":0},{"first":66,"second":1058,"amount":-1},{"first":66,"second":1059,"amount":0},{"first":66,"second":933,"amount":-1},{"first":78,"second":65,"amount":0},{"first":78,"second":84,"amount":-1},{"first":78,"second":89,"amount":-1},{"first":78,"second":88,"amount":0},{"first":78,"second":1040,"amount":0},{"first":78,"second":1044,"amount":0},{"first":78,"second":1076,"amount":0},{"first":78,"second":1046,"amount":0},{"first":78,"second":1051,"amount":0},{"first":78,"second":1083,"amount":0},{"first":78,"second":1058,"amount":-1},{"first":78,"second":1061,"amount":0},{"first":78,"second":1063,"amount":-1},{"first":78,"second":1095,"amount":-1},{"first":78,"second":196,"amount":0},{"first":78,"second":933,"amount":-1},{"first":78,"second":913,"amount":0},{"first":78,"second":916,"amount":0},{"first":78,"second":923,"amount":0},{"first":78,"second":935,"amount":0},{"first":78,"second":197,"amount":0},{"first":47,"second":47,"amount":-5},{"first":44,"second":34,"amount":-3},{"first":44,"second":39,"amount":-3},{"first":46,"second":34,"amount":-3},{"first":46,"second":39,"amount":-3},{"first":123,"second":85,"amount":0},{"first":123,"second":74,"amount":0},{"first":123,"second":220,"amount":0},{"first":40,"second":89,"amount":0},{"first":40,"second":87,"amount":0},{"first":40,"second":86,"amount":0},{"first":40,"second":933,"amount":0},{"first":91,"second":85,"amount":0},{"first":91,"second":74,"amount":0},{"first":91,"second":220,"amount":0},{"first":34,"second":97,"amount":-1},{"first":34,"second":101,"amount":-1},{"first":34,"second":111,"amount":-1},{"first":34,"second":112,"amount":0},{"first":34,"second":113,"amount":-1},{"first":34,"second":115,"amount":-2},{"first":34,"second":100,"amount":-1},{"first":34,"second":103,"amount":-1},{"first":34,"second":109,"amount":0},{"first":34,"second":119,"amount":0},{"first":34,"second":99,"amount":-1},{"first":34,"second":110,"amount":0},{"first":34,"second":65,"amount":-2},{"first":34,"second":34,"amount":-2},{"first":34,"second":39,"amount":-2},{"first":34,"second":1040,"amount":-2},{"first":34,"second":1072,"amount":-1},{"first":34,"second":1075,"amount":0},{"first":34,"second":1077,"amount":-1},{"first":34,"second":1105,"amount":-1},{"first":34,"second":1080,"amount":0},{"first":34,"second":1081,"amount":0},{"first":34,"second":1082,"amount":0},{"first":34,"second":1084,"amount":0},{"first":34,"second":1085,"amount":0},{"first":34,"second":1086,"amount":-1},{"first":34,"second":1087,"amount":0},{"first":34,"second":1088,"amount":0},{"first":34,"second":1089,"amount":-1},{"first":34,"second":1092,"amount":-1},{"first":34,"second":1094,"amount":0},{"first":34,"second":1096,"amount":0},{"first":34,"second":1097,"amount":0},{"first":34,"second":1100,"amount":0},{"first":34,"second":1102,"amount":0},{"first":34,"second":246,"amount":-1},{"first":34,"second":228,"amount":-1},{"first":34,"second":196,"amount":-2},{"first":34,"second":241,"amount":0},{"first":34,"second":962,"amount":-1},{"first":34,"second":959,"amount":-1},{"first":34,"second":945,"amount":-1},{"first":34,"second":963,"amount":-1},{"first":34,"second":951,"amount":0},{"first":34,"second":913,"amount":-2},{"first":34,"second":916,"amount":-2},{"first":34,"second":923,"amount":-2},{"first":34,"second":229,"amount":-1},{"first":34,"second":197,"amount":-2},{"first":39,"second":97,"amount":-1},{"first":39,"second":101,"amount":-1},{"first":39,"second":111,"amount":-1},{"first":39,"second":112,"amount":0},{"first":39,"second":113,"amount":-1},{"first":39,"second":115,"amount":-2},{"first":39,"second":100,"amount":-1},{"first":39,"second":103,"amount":-1},{"first":39,"second":109,"amount":0},{"first":39,"second":119,"amount":0},{"first":39,"second":99,"amount":-1},{"first":39,"second":110,"amount":0},{"first":39,"second":65,"amount":-2},{"first":39,"second":34,"amount":-2},{"first":39,"second":39,"amount":-2},{"first":39,"second":1040,"amount":-2},{"first":39,"second":1072,"amount":-1},{"first":39,"second":1075,"amount":0},{"first":39,"second":1077,"amount":-1},{"first":39,"second":1105,"amount":-1},{"first":39,"second":1080,"amount":0},{"first":39,"second":1081,"amount":0},{"first":39,"second":1082,"amount":0},{"first":39,"second":1084,"amount":0},{"first":39,"second":1085,"amount":0},{"first":39,"second":1086,"amount":-1},{"first":39,"second":1087,"amount":0},{"first":39,"second":1088,"amount":0},{"first":39,"second":1089,"amount":-1},{"first":39,"second":1092,"amount":-1},{"first":39,"second":1094,"amount":0},{"first":39,"second":1096,"amount":0},{"first":39,"second":1097,"amount":0},{"first":39,"second":1100,"amount":0},{"first":39,"second":1102,"amount":0},{"first":39,"second":246,"amount":-1},{"first":39,"second":228,"amount":-1},{"first":39,"second":196,"amount":-2},{"first":39,"second":241,"amount":0},{"first":39,"second":962,"amount":-1},{"first":39,"second":959,"amount":-1},{"first":39,"second":945,"amount":-1},{"first":39,"second":963,"amount":-1},{"first":39,"second":951,"amount":0},{"first":39,"second":913,"amount":-2},{"first":39,"second":916,"amount":-2},{"first":39,"second":923,"amount":-2},{"first":39,"second":229,"amount":-1},{"first":39,"second":197,"amount":-2},{"first":1040,"second":122,"amount":0},{"first":1040,"second":116,"amount":0},{"first":1040,"second":121,"amount":-1},{"first":1040,"second":117,"amount":0},{"first":1040,"second":111,"amount":0},{"first":1040,"second":119,"amount":-1},{"first":1040,"second":118,"amount":-1},{"first":1040,"second":84,"amount":-3},{"first":1040,"second":89,"amount":-2},{"first":1040,"second":85,"amount":0},{"first":1040,"second":79,"amount":0},{"first":1040,"second":81,"amount":0},{"first":1040,"second":71,"amount":0},{"first":1040,"second":87,"amount":-1},{"first":1040,"second":67,"amount":0},{"first":1040,"second":86,"amount":-2},{"first":1040,"second":63,"amount":-1},{"first":1040,"second":34,"amount":-2},{"first":1040,"second":39,"amount":-2},{"first":1040,"second":1044,"amount":0},{"first":1040,"second":1051,"amount":0},{"first":1040,"second":1083,"amount":0},{"first":1040,"second":1054,"amount":0},{"first":1040,"second":1086,"amount":0},{"first":1040,"second":1057,"amount":0},{"first":1040,"second":1058,"amount":-3},{"first":1040,"second":1090,"amount":-1},{"first":1040,"second":1091,"amount":-1},{"first":1040,"second":1063,"amount":-1},{"first":1040,"second":1095,"amount":-2},{"first":1040,"second":1068,"amount":-1},{"first":1040,"second":252,"amount":0},{"first":1040,"second":220,"amount":0},{"first":1040,"second":246,"amount":0},{"first":1040,"second":214,"amount":0},{"first":1040,"second":964,"amount":-1},{"first":1040,"second":965,"amount":0},{"first":1040,"second":959,"amount":0},{"first":1040,"second":947,"amount":-1},{"first":1040,"second":955,"amount":0},{"first":1040,"second":957,"amount":-1},{"first":1040,"second":933,"amount":-2},{"first":1040,"second":920,"amount":0},{"first":1040,"second":927,"amount":0},{"first":1040,"second":934,"amount":-1},{"first":1040,"second":936,"amount":-1},{"first":1040,"second":216,"amount":0},{"first":1072,"second":121,"amount":0},{"first":1072,"second":118,"amount":0},{"first":1072,"second":34,"amount":-1},{"first":1072,"second":39,"amount":-1},{"first":1072,"second":1090,"amount":0},{"first":1072,"second":1091,"amount":0},{"first":1072,"second":947,"amount":0},{"first":1072,"second":957,"amount":0},{"first":1041,"second":120,"amount":0},{"first":1041,"second":84,"amount":-1},{"first":1041,"second":89,"amount":-1},{"first":1041,"second":88,"amount":0},{"first":1041,"second":86,"amount":-1},{"first":1041,"second":1046,"amount":0},{"first":1041,"second":1078,"amount":0},{"first":1041,"second":1058,"amount":-1},{"first":1041,"second":1090,"amount":-1},{"first":1041,"second":1059,"amount":0},{"first":1041,"second":1061,"amount":0},{"first":1041,"second":1093,"amount":0},{"first":1041,"second":1063,"amount":0},{"first":1041,"second":1068,"amount":-1},{"first":1041,"second":933,"amount":-1},{"first":1041,"second":935,"amount":0},{"first":1073,"second":112,"amount":0},{"first":1073,"second":109,"amount":0},{"first":1073,"second":120,"amount":0},{"first":1073,"second":110,"amount":0},{"first":1073,"second":1075,"amount":0},{"first":1073,"second":1076,"amount":0},{"first":1073,"second":1078,"amount":0},{"first":1073,"second":1080,"amount":0},{"first":1073,"second":1081,"amount":0},{"first":1073,"second":1082,"amount":0},{"first":1073,"second":1084,"amount":0},{"first":1073,"second":1085,"amount":0},{"first":1073,"second":1087,"amount":0},{"first":1073,"second":1088,"amount":0},{"first":1073,"second":1090,"amount":0},{"first":1073,"second":1093,"amount":0},{"first":1073,"second":1094,"amount":0},{"first":1073,"second":1096,"amount":0},{"first":1073,"second":1097,"amount":0},{"first":1073,"second":1100,"amount":0},{"first":1073,"second":1102,"amount":0},{"first":1073,"second":241,"amount":0},{"first":1073,"second":951,"amount":0},{"first":1042,"second":84,"amount":-1},{"first":1042,"second":89,"amount":-1},{"first":1042,"second":86,"amount":0},{"first":1042,"second":1058,"amount":-1},{"first":1042,"second":1059,"amount":0},{"first":1042,"second":933,"amount":-1},{"first":1074,"second":121,"amount":0},{"first":1074,"second":118,"amount":0},{"first":1074,"second":34,"amount":0},{"first":1074,"second":39,"amount":0},{"first":1074,"second":1090,"amount":0},{"first":1074,"second":1091,"amount":0},{"first":1074,"second":947,"amount":0},{"first":1074,"second":957,"amount":0},{"first":1043,"second":97,"amount":-4},{"first":1043,"second":122,"amount":-3},{"first":1043,"second":101,"amount":-4},{"first":1043,"second":114,"amount":-3},{"first":1043,"second":121,"amount":-3},{"first":1043,"second":117,"amount":-4},{"first":1043,"second":111,"amount":-4},{"first":1043,"second":112,"amount":-4},{"first":1043,"second":113,"amount":-4},{"first":1043,"second":115,"amount":-4},{"first":1043,"second":100,"amount":-4},{"first":1043,"second":103,"amount":-4},{"first":1043,"second":109,"amount":-4},{"first":1043,"second":119,"amount":-2},{"first":1043,"second":120,"amount":-3},{"first":1043,"second":99,"amount":-4},{"first":1043,"second":118,"amount":-3},{"first":1043,"second":110,"amount":-4},{"first":1043,"second":65,"amount":-4},{"first":1043,"second":84,"amount":0},{"first":1043,"second":89,"amount":0},{"first":1043,"second":79,"amount":-1},{"first":1043,"second":81,"amount":-1},{"first":1043,"second":83,"amount":-1},{"first":1043,"second":71,"amount":-1},{"first":1043,"second":87,"amount":0},{"first":1043,"second":67,"amount":-1},{"first":1043,"second":86,"amount":0},{"first":1043,"second":45,"amount":-8},{"first":1043,"second":8211,"amount":-8},{"first":1043,"second":44,"amount":-8},{"first":1043,"second":46,"amount":-8},{"first":1043,"second":1040,"amount":-4},{"first":1043,"second":1072,"amount":-4},{"first":1043,"second":1073,"amount":-1},{"first":1043,"second":1074,"amount":-4},{"first":1043,"second":1075,"amount":-4},{"first":1043,"second":1044,"amount":-4},{"first":1043,"second":1076,"amount":-5},{"first":1043,"second":1077,"amount":-4},{"first":1043,"second":1105,"amount":-4},{"first":1043,"second":1078,"amount":-3},{"first":1043,"second":1079,"amount":-5},{"first":1043,"second":1080,"amount":-4},{"first":1043,"second":1081,"amount":-4},{"first":1043,"second":1082,"amount":-4},{"first":1043,"second":1051,"amount":-2},{"first":1043,"second":1083,"amount":-5},{"first":1043,"second":1084,"amount":-4},{"first":1043,"second":1085,"amount":-4},{"first":1043,"second":1054,"amount":-1},{"first":1043,"second":1086,"amount":-4},{"first":1043,"second":1087,"amount":-4},{"first":1043,"second":1088,"amount":-4},{"first":1043,"second":1057,"amount":-1},{"first":1043,"second":1089,"amount":-4},{"first":1043,"second":1058,"amount":0},{"first":1043,"second":1090,"amount":-3},{"first":1043,"second":1091,"amount":-3},{"first":1043,"second":1092,"amount":-4},{"first":1043,"second":1093,"amount":-3},{"first":1043,"second":1094,"amount":-4},{"first":1043,"second":1095,"amount":-5},{"first":1043,"second":1096,"amount":-4},{"first":1043,"second":1097,"amount":-4},{"first":1043,"second":1099,"amount":-5},{"first":1043,"second":1068,"amount":0},{"first":1043,"second":1100,"amount":-4},{"first":1043,"second":1101,"amount":-5},{"first":1043,"second":1102,"amount":-4},{"first":1043,"second":1103,"amount":-5},{"first":1043,"second":252,"amount":-4},{"first":1043,"second":246,"amount":-4},{"first":1043,"second":214,"amount":-1},{"first":1043,"second":228,"amount":-4},{"first":1043,"second":196,"amount":-4},{"first":1043,"second":241,"amount":-4},{"first":1043,"second":962,"amount":-4},{"first":1043,"second":949,"amount":-5},{"first":1043,"second":961,"amount":-6},{"first":1043,"second":964,"amount":-4},{"first":1043,"second":965,"amount":-4},{"first":1043,"second":953,"amount":-6},{"first":1043,"second":959,"amount":-4},{"first":1043,"second":960,"amount":-5},{"first":1043,"second":945,"amount":-4},{"first":1043,"second":963,"amount":-4},{"first":1043,"second":948,"amount":-2},{"first":1043,"second":966,"amount":-6},{"first":1043,"second":947,"amount":-3},{"first":1043,"second":951,"amount":-4},{"first":1043,"second":968,"amount":-5},{"first":1043,"second":969,"amount":-6},{"first":1043,"second":957,"amount":-3},{"first":1043,"second":933,"amount":0},{"first":1043,"second":920,"amount":-1},{"first":1043,"second":927,"amount":-1},{"first":1043,"second":913,"amount":-4},{"first":1043,"second":916,"amount":-4},{"first":1043,"second":934,"amount":-3},{"first":1043,"second":923,"amount":-4},{"first":1043,"second":229,"amount":-4},{"first":1043,"second":197,"amount":-4},{"first":1043,"second":230,"amount":-4},{"first":1043,"second":198,"amount":-7},{"first":1043,"second":248,"amount":-4},{"first":1043,"second":216,"amount":-1},{"first":1075,"second":101,"amount":0},{"first":1075,"second":111,"amount":0},{"first":1075,"second":113,"amount":0},{"first":1075,"second":100,"amount":0},{"first":1075,"second":103,"amount":0},{"first":1075,"second":99,"amount":0},{"first":1075,"second":1076,"amount":-1},{"first":1075,"second":1077,"amount":0},{"first":1075,"second":1105,"amount":0},{"first":1075,"second":1083,"amount":-1},{"first":1075,"second":1086,"amount":0},{"first":1075,"second":1089,"amount":0},{"first":1075,"second":1092,"amount":0},{"first":1075,"second":246,"amount":0},{"first":1075,"second":962,"amount":0},{"first":1075,"second":959,"amount":0},{"first":1075,"second":945,"amount":0},{"first":1075,"second":963,"amount":0},{"first":1044,"second":65,"amount":0},{"first":1044,"second":84,"amount":-1},{"first":1044,"second":89,"amount":-1},{"first":1044,"second":79,"amount":0},{"first":1044,"second":81,"amount":0},{"first":1044,"second":71,"amount":0},{"first":1044,"second":67,"amount":0},{"first":1044,"second":86,"amount":-1},{"first":1044,"second":1040,"amount":0},{"first":1044,"second":1044,"amount":0},{"first":1044,"second":1076,"amount":0},{"first":1044,"second":1051,"amount":0},{"first":1044,"second":1083,"amount":0},{"first":1044,"second":1054,"amount":0},{"first":1044,"second":1057,"amount":0},{"first":1044,"second":1058,"amount":-1},{"first":1044,"second":1063,"amount":-1},{"first":1044,"second":1095,"amount":-1},{"first":1044,"second":1068,"amount":-1},{"first":1044,"second":214,"amount":0},{"first":1044,"second":196,"amount":0},{"first":1044,"second":933,"amount":-1},{"first":1044,"second":920,"amount":0},{"first":1044,"second":927,"amount":0},{"first":1044,"second":913,"amount":0},{"first":1044,"second":916,"amount":0},{"first":1044,"second":923,"amount":0},{"first":1044,"second":197,"amount":0},{"first":1044,"second":216,"amount":0},{"first":1076,"second":1076,"amount":0},{"first":1076,"second":1090,"amount":0},{"first":1076,"second":1095,"amount":0},{"first":1076,"second":1098,"amount":-1},{"first":1045,"second":101,"amount":0},{"first":1045,"second":121,"amount":-1},{"first":1045,"second":117,"amount":0},{"first":1045,"second":111,"amount":0},{"first":1045,"second":113,"amount":0},{"first":1045,"second":100,"amount":0},{"first":1045,"second":102,"amount":0},{"first":1045,"second":103,"amount":0},{"first":1045,"second":119,"amount":0},{"first":1045,"second":99,"amount":0},{"first":1045,"second":118,"amount":-1},{"first":1045,"second":84,"amount":0},{"first":1045,"second":1077,"amount":0},{"first":1045,"second":1105,"amount":0},{"first":1045,"second":1086,"amount":0},{"first":1045,"second":1089,"amount":0},{"first":1045,"second":1058,"amount":0},{"first":1045,"second":1091,"amount":-1},{"first":1045,"second":1092,"amount":0},{"first":1045,"second":252,"amount":0},{"first":1045,"second":246,"amount":0},{"first":1045,"second":962,"amount":0},{"first":1045,"second":965,"amount":0},{"first":1045,"second":959,"amount":0},{"first":1045,"second":945,"amount":0},{"first":1045,"second":963,"amount":0},{"first":1045,"second":947,"amount":-1},{"first":1045,"second":957,"amount":-1},{"first":1077,"second":121,"amount":0},{"first":1077,"second":118,"amount":0},{"first":1077,"second":34,"amount":0},{"first":1077,"second":39,"amount":0},{"first":1077,"second":1090,"amount":0},{"first":1077,"second":1091,"amount":0},{"first":1077,"second":947,"amount":0},{"first":1077,"second":957,"amount":0},{"first":1025,"second":101,"amount":0},{"first":1025,"second":121,"amount":-1},{"first":1025,"second":117,"amount":0},{"first":1025,"second":111,"amount":0},{"first":1025,"second":113,"amount":0},{"first":1025,"second":100,"amount":0},{"first":1025,"second":102,"amount":0},{"first":1025,"second":103,"amount":0},{"first":1025,"second":119,"amount":0},{"first":1025,"second":99,"amount":0},{"first":1025,"second":118,"amount":-1},{"first":1025,"second":84,"amount":0},{"first":1025,"second":1077,"amount":0},{"first":1025,"second":1105,"amount":0},{"first":1025,"second":1086,"amount":0},{"first":1025,"second":1089,"amount":0},{"first":1025,"second":1058,"amount":0},{"first":1025,"second":1091,"amount":-1},{"first":1025,"second":1092,"amount":0},{"first":1025,"second":252,"amount":0},{"first":1025,"second":246,"amount":0},{"first":1025,"second":962,"amount":0},{"first":1025,"second":965,"amount":0},{"first":1025,"second":959,"amount":0},{"first":1025,"second":945,"amount":0},{"first":1025,"second":963,"amount":0},{"first":1025,"second":947,"amount":-1},{"first":1025,"second":957,"amount":-1},{"first":1105,"second":121,"amount":0},{"first":1105,"second":118,"amount":0},{"first":1105,"second":34,"amount":0},{"first":1105,"second":39,"amount":0},{"first":1105,"second":1090,"amount":0},{"first":1105,"second":1091,"amount":0},{"first":1105,"second":947,"amount":0},{"first":1105,"second":957,"amount":0},{"first":1046,"second":101,"amount":-1},{"first":1046,"second":121,"amount":-1},{"first":1046,"second":117,"amount":0},{"first":1046,"second":111,"amount":0},{"first":1046,"second":113,"amount":-1},{"first":1046,"second":100,"amount":-1},{"first":1046,"second":103,"amount":-1},{"first":1046,"second":99,"amount":-1},{"first":1046,"second":118,"amount":-1},{"first":1046,"second":79,"amount":-1},{"first":1046,"second":81,"amount":-1},{"first":1046,"second":71,"amount":-1},{"first":1046,"second":67,"amount":-1},{"first":1046,"second":86,"amount":0},{"first":1046,"second":45,"amount":-1},{"first":1046,"second":8211,"amount":-1},{"first":1046,"second":1073,"amount":0},{"first":1046,"second":1044,"amount":0},{"first":1046,"second":1077,"amount":-1},{"first":1046,"second":1105,"amount":-1},{"first":1046,"second":1051,"amount":0},{"first":1046,"second":1083,"amount":0},{"first":1046,"second":1054,"amount":-1},{"first":1046,"second":1086,"amount":0},{"first":1046,"second":1057,"amount":-1},{"first":1046,"second":1089,"amount":-1},{"first":1046,"second":1090,"amount":-1},{"first":1046,"second":1091,"amount":-1},{"first":1046,"second":1092,"amount":-1},{"first":1046,"second":1095,"amount":-1},{"first":1046,"second":252,"amount":0},{"first":1046,"second":246,"amount":0},{"first":1046,"second":214,"amount":-1},{"first":1046,"second":962,"amount":-1},{"first":1046,"second":964,"amount":-1},{"first":1046,"second":965,"amount":0},{"first":1046,"second":952,"amount":0},{"first":1046,"second":959,"amount":0},{"first":1046,"second":945,"amount":-1},{"first":1046,"second":963,"amount":-1},{"first":1046,"second":948,"amount":0},{"first":1046,"second":966,"amount":-1},{"first":1046,"second":947,"amount":-1},{"first":1046,"second":955,"amount":0},{"first":1046,"second":968,"amount":-1},{"first":1046,"second":969,"amount":0},{"first":1046,"second":957,"amount":-1},{"first":1046,"second":920,"amount":-1},{"first":1046,"second":927,"amount":-1},{"first":1046,"second":934,"amount":-1},{"first":1046,"second":216,"amount":-1},{"first":1078,"second":101,"amount":0},{"first":1078,"second":111,"amount":0},{"first":1078,"second":113,"amount":0},{"first":1078,"second":100,"amount":0},{"first":1078,"second":103,"amount":0},{"first":1078,"second":99,"amount":0},{"first":1078,"second":1077,"amount":0},{"first":1078,"second":1105,"amount":0},{"first":1078,"second":1086,"amount":0},{"first":1078,"second":1089,"amount":0},{"first":1078,"second":1092,"amount":0},{"first":1078,"second":246,"amount":0},{"first":1078,"second":962,"amount":0},{"first":1078,"second":959,"amount":0},{"first":1078,"second":945,"amount":0},{"first":1078,"second":963,"amount":0},{"first":1047,"second":84,"amount":0},{"first":1047,"second":89,"amount":0},{"first":1047,"second":88,"amount":0},{"first":1047,"second":86,"amount":0},{"first":1047,"second":55,"amount":0},{"first":1047,"second":1046,"amount":0},{"first":1047,"second":1051,"amount":0},{"first":1047,"second":1058,"amount":0},{"first":1047,"second":1059,"amount":0},{"first":1047,"second":1061,"amount":0},{"first":1047,"second":1068,"amount":0},{"first":1047,"second":933,"amount":0},{"first":1047,"second":935,"amount":0},{"first":1079,"second":34,"amount":0},{"first":1079,"second":39,"amount":0},{"first":1048,"second":65,"amount":0},{"first":1048,"second":84,"amount":-1},{"first":1048,"second":89,"amount":-1},{"first":1048,"second":88,"amount":0},{"first":1048,"second":1040,"amount":0},{"first":1048,"second":1044,"amount":0},{"first":1048,"second":1076,"amount":0},{"first":1048,"second":1046,"amount":0},{"first":1048,"second":1051,"amount":0},{"first":1048,"second":1083,"amount":0},{"first":1048,"second":1058,"amount":-1},{"first":1048,"second":1061,"amount":0},{"first":1048,"second":1063,"amount":-1},{"first":1048,"second":1095,"amount":-1},{"first":1048,"second":196,"amount":0},{"first":1048,"second":933,"amount":-1},{"first":1048,"second":913,"amount":0},{"first":1048,"second":916,"amount":0},{"first":1048,"second":923,"amount":0},{"first":1048,"second":935,"amount":0},{"first":1048,"second":197,"amount":0},{"first":1050,"second":101,"amount":-1},{"first":1050,"second":121,"amount":-1},{"first":1050,"second":117,"amount":0},{"first":1050,"second":111,"amount":-1},{"first":1050,"second":112,"amount":0},{"first":1050,"second":113,"amount":-1},{"first":1050,"second":100,"amount":-1},{"first":1050,"second":103,"amount":-1},{"first":1050,"second":109,"amount":0},{"first":1050,"second":119,"amount":-1},{"first":1050,"second":99,"amount":-1},{"first":1050,"second":118,"amount":-1},{"first":1050,"second":110,"amount":0},{"first":1050,"second":79,"amount":-1},{"first":1050,"second":81,"amount":-1},{"first":1050,"second":71,"amount":-1},{"first":1050,"second":67,"amount":-1},{"first":1050,"second":45,"amount":-1},{"first":1050,"second":8211,"amount":-1},{"first":1050,"second":1073,"amount":-1},{"first":1050,"second":1075,"amount":0},{"first":1050,"second":1077,"amount":-1},{"first":1050,"second":1105,"amount":-1},{"first":1050,"second":1080,"amount":0},{"first":1050,"second":1081,"amount":0},{"first":1050,"second":1082,"amount":0},{"first":1050,"second":1084,"amount":0},{"first":1050,"second":1085,"amount":0},{"first":1050,"second":1054,"amount":-1},{"first":1050,"second":1086,"amount":-1},{"first":1050,"second":1087,"amount":0},{"first":1050,"second":1088,"amount":0},{"first":1050,"second":1057,"amount":-1},{"first":1050,"second":1089,"amount":-1},{"first":1050,"second":1090,"amount":-1},{"first":1050,"second":1091,"amount":-1},{"first":1050,"second":1092,"amount":-1},{"first":1050,"second":1094,"amount":0},{"first":1050,"second":1095,"amount":-2},{"first":1050,"second":1096,"amount":0},{"first":1050,"second":1097,"amount":0},{"first":1050,"second":1100,"amount":0},{"first":1050,"second":1102,"amount":0},{"first":1050,"second":252,"amount":0},{"first":1050,"second":246,"amount":-1},{"first":1050,"second":214,"amount":-1},{"first":1050,"second":241,"amount":0},{"first":1050,"second":962,"amount":-1},{"first":1050,"second":964,"amount":-2},{"first":1050,"second":965,"amount":0},{"first":1050,"second":959,"amount":-1},{"first":1050,"second":945,"amount":-1},{"first":1050,"second":963,"amount":-1},{"first":1050,"second":947,"amount":-1},{"first":1050,"second":951,"amount":0},{"first":1050,"second":957,"amount":-1},{"first":1050,"second":920,"amount":-1},{"first":1050,"second":927,"amount":-1},{"first":1050,"second":934,"amount":-1},{"first":1050,"second":216,"amount":-1},{"first":1082,"second":101,"amount":0},{"first":1082,"second":111,"amount":0},{"first":1082,"second":113,"amount":0},{"first":1082,"second":100,"amount":0},{"first":1082,"second":103,"amount":0},{"first":1082,"second":99,"amount":0},{"first":1082,"second":1077,"amount":0},{"first":1082,"second":1105,"amount":0},{"first":1082,"second":1086,"amount":0},{"first":1082,"second":1089,"amount":0},{"first":1082,"second":1092,"amount":0},{"first":1082,"second":246,"amount":0},{"first":1082,"second":962,"amount":0},{"first":1082,"second":959,"amount":0},{"first":1082,"second":945,"amount":0},{"first":1082,"second":963,"amount":0},{"first":1051,"second":65,"amount":0},{"first":1051,"second":84,"amount":-1},{"first":1051,"second":89,"amount":-1},{"first":1051,"second":88,"amount":0},{"first":1051,"second":1040,"amount":0},{"first":1051,"second":1044,"amount":0},{"first":1051,"second":1076,"amount":0},{"first":1051,"second":1046,"amount":0},{"first":1051,"second":1051,"amount":0},{"first":1051,"second":1083,"amount":0},{"first":1051,"second":1058,"amount":-1},{"first":1051,"second":1061,"amount":0},{"first":1051,"second":1063,"amount":-1},{"first":1051,"second":1095,"amount":-1},{"first":1051,"second":196,"amount":0},{"first":1051,"second":933,"amount":-1},{"first":1051,"second":913,"amount":0},{"first":1051,"second":916,"amount":0},{"first":1051,"second":923,"amount":0},{"first":1051,"second":935,"amount":0},{"first":1051,"second":197,"amount":0},{"first":1052,"second":65,"amount":0},{"first":1052,"second":84,"amount":-1},{"first":1052,"second":89,"amount":-1},{"first":1052,"second":88,"amount":0},{"first":1052,"second":1040,"amount":0},{"first":1052,"second":1044,"amount":0},{"first":1052,"second":1076,"amount":0},{"first":1052,"second":1046,"amount":0},{"first":1052,"second":1051,"amount":0},{"first":1052,"second":1083,"amount":0},{"first":1052,"second":1058,"amount":-1},{"first":1052,"second":1061,"amount":0},{"first":1052,"second":1063,"amount":-1},{"first":1052,"second":1095,"amount":-1},{"first":1052,"second":196,"amount":0},{"first":1052,"second":933,"amount":-1},{"first":1052,"second":913,"amount":0},{"first":1052,"second":916,"amount":0},{"first":1052,"second":923,"amount":0},{"first":1052,"second":935,"amount":0},{"first":1052,"second":197,"amount":0},{"first":1053,"second":65,"amount":0},{"first":1053,"second":84,"amount":-1},{"first":1053,"second":89,"amount":-1},{"first":1053,"second":88,"amount":0},{"first":1053,"second":1040,"amount":0},{"first":1053,"second":1044,"amount":0},{"first":1053,"second":1076,"amount":0},{"first":1053,"second":1046,"amount":0},{"first":1053,"second":1051,"amount":0},{"first":1053,"second":1083,"amount":0},{"first":1053,"second":1058,"amount":-1},{"first":1053,"second":1061,"amount":0},{"first":1053,"second":1063,"amount":-1},{"first":1053,"second":1095,"amount":-1},{"first":1053,"second":196,"amount":0},{"first":1053,"second":933,"amount":-1},{"first":1053,"second":913,"amount":0},{"first":1053,"second":916,"amount":0},{"first":1053,"second":923,"amount":0},{"first":1053,"second":935,"amount":0},{"first":1053,"second":197,"amount":0},{"first":1054,"second":65,"amount":0},{"first":1054,"second":90,"amount":0},{"first":1054,"second":84,"amount":-1},{"first":1054,"second":89,"amount":-1},{"first":1054,"second":88,"amount":0},{"first":1054,"second":86,"amount":0},{"first":1054,"second":44,"amount":-2},{"first":1054,"second":46,"amount":-2},{"first":1054,"second":1040,"amount":0},{"first":1054,"second":1044,"amount":-1},{"first":1054,"second":1046,"amount":0},{"first":1054,"second":1051,"amount":-1},{"first":1054,"second":1058,"amount":-1},{"first":1054,"second":1061,"amount":0},{"first":1054,"second":1068,"amount":-1},{"first":1054,"second":196,"amount":0},{"first":1054,"second":955,"amount":0},{"first":1054,"second":933,"amount":-1},{"first":1054,"second":913,"amount":0},{"first":1054,"second":931,"amount":0},{"first":1054,"second":916,"amount":0},{"first":1054,"second":926,"amount":0},{"first":1054,"second":923,"amount":0},{"first":1054,"second":918,"amount":0},{"first":1054,"second":935,"amount":0},{"first":1054,"second":197,"amount":0},{"first":1054,"second":198,"amount":-1},{"first":1086,"second":122,"amount":0},{"first":1086,"second":121,"amount":0},{"first":1086,"second":120,"amount":0},{"first":1086,"second":118,"amount":0},{"first":1086,"second":34,"amount":-3},{"first":1086,"second":39,"amount":-3},{"first":1086,"second":1076,"amount":-1},{"first":1086,"second":1078,"amount":0},{"first":1086,"second":1083,"amount":0},{"first":1086,"second":1090,"amount":0},{"first":1086,"second":1091,"amount":0},{"first":1086,"second":1093,"amount":0},{"first":1086,"second":964,"amount":0},{"first":1086,"second":947,"amount":0},{"first":1086,"second":957,"amount":0},{"first":1056,"second":97,"amount":0},{"first":1056,"second":101,"amount":0},{"first":1056,"second":116,"amount":0},{"first":1056,"second":121,"amount":0},{"first":1056,"second":111,"amount":0},{"first":1056,"second":113,"amount":0},{"first":1056,"second":100,"amount":0},{"first":1056,"second":103,"amount":0},{"first":1056,"second":99,"amount":0},{"first":1056,"second":118,"amount":0},{"first":1056,"second":65,"amount":-3},{"first":1056,"second":90,"amount":-1},{"first":1056,"second":74,"amount":-4},{"first":1056,"second":88,"amount":-1},{"first":1056,"second":44,"amount":-7},{"first":1056,"second":46,"amount":-7},{"first":1056,"second":1040,"amount":-3},{"first":1056,"second":1072,"amount":0},{"first":1056,"second":1044,"amount":-2},{"first":1056,"second":1076,"amount":-1},{"first":1056,"second":1077,"amount":0},{"first":1056,"second":1105,"amount":0},{"first":1056,"second":1046,"amount":-1},{"first":1056,"second":1051,"amount":-1},{"first":1056,"second":1083,"amount":-1},{"first":1056,"second":1086,"amount":0},{"first":1056,"second":1089,"amount":0},{"first":1056,"second":1091,"amount":0},{"first":1056,"second":1092,"amount":0},{"first":1056,"second":1061,"amount":-1},{"first":1056,"second":246,"amount":0},{"first":1056,"second":228,"amount":0},{"first":1056,"second":196,"amount":-3},{"first":1056,"second":962,"amount":0},{"first":1056,"second":961,"amount":-1},{"first":1056,"second":959,"amount":0},{"first":1056,"second":945,"amount":0},{"first":1056,"second":963,"amount":0},{"first":1056,"second":948,"amount":0},{"first":1056,"second":947,"amount":0},{"first":1056,"second":955,"amount":-1},{"first":1056,"second":957,"amount":0},{"first":1056,"second":913,"amount":-3},{"first":1056,"second":916,"amount":-3},{"first":1056,"second":923,"amount":-3},{"first":1056,"second":918,"amount":-1},{"first":1056,"second":935,"amount":-1},{"first":1056,"second":229,"amount":0},{"first":1056,"second":197,"amount":-3},{"first":1056,"second":198,"amount":-2},{"first":1088,"second":122,"amount":0},{"first":1088,"second":121,"amount":0},{"first":1088,"second":120,"amount":0},{"first":1088,"second":118,"amount":0},{"first":1088,"second":34,"amount":-1},{"first":1088,"second":39,"amount":-1},{"first":1088,"second":1076,"amount":0},{"first":1088,"second":1078,"amount":0},{"first":1088,"second":1083,"amount":0},{"first":1088,"second":1090,"amount":-2},{"first":1088,"second":1091,"amount":0},{"first":1088,"second":1093,"amount":0},{"first":1088,"second":964,"amount":0},{"first":1088,"second":947,"amount":0},{"first":1088,"second":957,"amount":0},{"first":1057,"second":84,"amount":-1},{"first":1057,"second":125,"amount":0},{"first":1057,"second":41,"amount":-1},{"first":1057,"second":93,"amount":0},{"first":1057,"second":1058,"amount":-1},{"first":1089,"second":34,"amount":0},{"first":1089,"second":39,"amount":0},{"first":1058,"second":97,"amount":-2},{"first":1058,"second":122,"amount":-1},{"first":1058,"second":101,"amount":-2},{"first":1058,"second":114,"amount":-2},{"first":1058,"second":121,"amount":-1},{"first":1058,"second":117,"amount":-2},{"first":1058,"second":111,"amount":-2},{"first":1058,"second":112,"amount":-2},{"first":1058,"second":113,"amount":-2},{"first":1058,"second":115,"amount":-2},{"first":1058,"second":100,"amount":-2},{"first":1058,"second":103,"amount":-2},{"first":1058,"second":109,"amount":-2},{"first":1058,"second":119,"amount":-1},{"first":1058,"second":120,"amount":-2},{"first":1058,"second":99,"amount":-2},{"first":1058,"second":118,"amount":-1},{"first":1058,"second":110,"amount":-2},{"first":1058,"second":65,"amount":-2},{"first":1058,"second":84,"amount":0},{"first":1058,"second":89,"amount":0},{"first":1058,"second":79,"amount":-1},{"first":1058,"second":81,"amount":-1},{"first":1058,"second":83,"amount":0},{"first":1058,"second":71,"amount":-1},{"first":1058,"second":74,"amount":-5},{"first":1058,"second":87,"amount":0},{"first":1058,"second":67,"amount":-1},{"first":1058,"second":86,"amount":0},{"first":1058,"second":45,"amount":-5},{"first":1058,"second":8211,"amount":-5},{"first":1058,"second":44,"amount":-4},{"first":1058,"second":46,"amount":-4},{"first":1058,"second":1040,"amount":-2},{"first":1058,"second":1072,"amount":-2},{"first":1058,"second":1073,"amount":-1},{"first":1058,"second":1074,"amount":-2},{"first":1058,"second":1075,"amount":-2},{"first":1058,"second":1044,"amount":-2},{"first":1058,"second":1076,"amount":-3},{"first":1058,"second":1077,"amount":-2},{"first":1058,"second":1105,"amount":-2},{"first":1058,"second":1078,"amount":-2},{"first":1058,"second":1079,"amount":-3},{"first":1058,"second":1080,"amount":-2},{"first":1058,"second":1081,"amount":-2},{"first":1058,"second":1082,"amount":-2},{"first":1058,"second":1051,"amount":-1},{"first":1058,"second":1083,"amount":-3},{"first":1058,"second":1084,"amount":-2},{"first":1058,"second":1085,"amount":-2},{"first":1058,"second":1054,"amount":-1},{"first":1058,"second":1086,"amount":-2},{"first":1058,"second":1087,"amount":-2},{"first":1058,"second":1088,"amount":-2},{"first":1058,"second":1057,"amount":-1},{"first":1058,"second":1089,"amount":-2},{"first":1058,"second":1058,"amount":0},{"first":1058,"second":1090,"amount":-2},{"first":1058,"second":1091,"amount":-1},{"first":1058,"second":1092,"amount":-2},{"first":1058,"second":1093,"amount":-2},{"first":1058,"second":1094,"amount":-2},{"first":1058,"second":1095,"amount":-3},{"first":1058,"second":1096,"amount":-2},{"first":1058,"second":1097,"amount":-2},{"first":1058,"second":1099,"amount":-3},{"first":1058,"second":1068,"amount":0},{"first":1058,"second":1100,"amount":-2},{"first":1058,"second":1101,"amount":-3},{"first":1058,"second":1102,"amount":-2},{"first":1058,"second":1103,"amount":-3},{"first":1058,"second":252,"amount":-2},{"first":1058,"second":246,"amount":-2},{"first":1058,"second":214,"amount":-1},{"first":1058,"second":228,"amount":-2},{"first":1058,"second":196,"amount":-2},{"first":1058,"second":241,"amount":-2},{"first":1058,"second":962,"amount":-2},{"first":1058,"second":949,"amount":-3},{"first":1058,"second":961,"amount":-3},{"first":1058,"second":964,"amount":-2},{"first":1058,"second":965,"amount":-2},{"first":1058,"second":953,"amount":-3},{"first":1058,"second":959,"amount":-2},{"first":1058,"second":960,"amount":-2},{"first":1058,"second":945,"amount":-2},{"first":1058,"second":963,"amount":-2},{"first":1058,"second":948,"amount":-1},{"first":1058,"second":966,"amount":-3},{"first":1058,"second":947,"amount":-1},{"first":1058,"second":951,"amount":-2},{"first":1058,"second":968,"amount":-3},{"first":1058,"second":969,"amount":-3},{"first":1058,"second":957,"amount":-1},{"first":1058,"second":933,"amount":0},{"first":1058,"second":920,"amount":-1},{"first":1058,"second":927,"amount":-1},{"first":1058,"second":913,"amount":-2},{"first":1058,"second":916,"amount":-2},{"first":1058,"second":934,"amount":-2},{"first":1058,"second":923,"amount":-2},{"first":1058,"second":229,"amount":-2},{"first":1058,"second":197,"amount":-2},{"first":1058,"second":230,"amount":-2},{"first":1058,"second":198,"amount":-4},{"first":1058,"second":248,"amount":-2},{"first":1058,"second":216,"amount":-1},{"first":1090,"second":97,"amount":0},{"first":1090,"second":101,"amount":-2},{"first":1090,"second":121,"amount":0},{"first":1090,"second":111,"amount":-1},{"first":1090,"second":113,"amount":-2},{"first":1090,"second":100,"amount":-2},{"first":1090,"second":102,"amount":0},{"first":1090,"second":103,"amount":-2},{"first":1090,"second":99,"amount":-2},{"first":1090,"second":118,"amount":0},{"first":1090,"second":34,"amount":0},{"first":1090,"second":39,"amount":0},{"first":1090,"second":1072,"amount":0},{"first":1090,"second":1076,"amount":-2},{"first":1090,"second":1077,"amount":-2},{"first":1090,"second":1105,"amount":-2},{"first":1090,"second":1083,"amount":-2},{"first":1090,"second":1086,"amount":-1},{"first":1090,"second":1089,"amount":-2},{"first":1090,"second":1091,"amount":0},{"first":1090,"second":1092,"amount":-2},{"first":1090,"second":246,"amount":-1},{"first":1090,"second":228,"amount":0},{"first":1090,"second":962,"amount":-1},{"first":1090,"second":961,"amount":-2},{"first":1090,"second":959,"amount":-1},{"first":1090,"second":945,"amount":-2},{"first":1090,"second":963,"amount":-2},{"first":1090,"second":948,"amount":-2},{"first":1090,"second":966,"amount":-1},{"first":1090,"second":947,"amount":0},{"first":1090,"second":957,"amount":0},{"first":1090,"second":229,"amount":0},{"first":1059,"second":97,"amount":-2},{"first":1059,"second":101,"amount":-1},{"first":1059,"second":111,"amount":-1},{"first":1059,"second":112,"amount":-2},{"first":1059,"second":113,"amount":-1},{"first":1059,"second":115,"amount":-1},{"first":1059,"second":100,"amount":-1},{"first":1059,"second":103,"amount":-1},{"first":1059,"second":109,"amount":-2},{"first":1059,"second":99,"amount":-1},{"first":1059,"second":110,"amount":-2},{"first":1059,"second":65,"amount":-2},{"first":1059,"second":84,"amount":0},{"first":1059,"second":89,"amount":0},{"first":1059,"second":79,"amount":0},{"first":1059,"second":81,"amount":0},{"first":1059,"second":71,"amount":0},{"first":1059,"second":67,"amount":0},{"first":1059,"second":45,"amount":-2},{"first":1059,"second":8211,"amount":-2},{"first":1059,"second":44,"amount":-8},{"first":1059,"second":46,"amount":-8},{"first":1059,"second":1040,"amount":-2},{"first":1059,"second":1072,"amount":-2},{"first":1059,"second":1074,"amount":-1},{"first":1059,"second":1075,"amount":-2},{"first":1059,"second":1044,"amount":-2},{"first":1059,"second":1076,"amount":-2},{"first":1059,"second":1077,"amount":-1},{"first":1059,"second":1105,"amount":-1},{"first":1059,"second":1079,"amount":-1},{"first":1059,"second":1080,"amount":-2},{"first":1059,"second":1081,"amount":-2},{"first":1059,"second":1082,"amount":-2},{"first":1059,"second":1051,"amount":-1},{"first":1059,"second":1083,"amount":-1},{"first":1059,"second":1084,"amount":-2},{"first":1059,"second":1085,"amount":-2},{"first":1059,"second":1054,"amount":0},{"first":1059,"second":1086,"amount":-1},{"first":1059,"second":1087,"amount":-2},{"first":1059,"second":1088,"amount":-2},{"first":1059,"second":1057,"amount":0},{"first":1059,"second":1089,"amount":-1},{"first":1059,"second":1058,"amount":0},{"first":1059,"second":1092,"amount":-1},{"first":1059,"second":1094,"amount":-2},{"first":1059,"second":1095,"amount":0},{"first":1059,"second":1096,"amount":-2},{"first":1059,"second":1097,"amount":-2},{"first":1059,"second":1099,"amount":-1},{"first":1059,"second":1068,"amount":0},{"first":1059,"second":1100,"amount":-2},{"first":1059,"second":1102,"amount":-2},{"first":1059,"second":1103,"amount":-1},{"first":1059,"second":246,"amount":-1},{"first":1059,"second":214,"amount":0},{"first":1059,"second":228,"amount":-2},{"first":1059,"second":196,"amount":-2},{"first":1059,"second":241,"amount":-2},{"first":1059,"second":962,"amount":-1},{"first":1059,"second":959,"amount":-1},{"first":1059,"second":945,"amount":-1},{"first":1059,"second":963,"amount":-1},{"first":1059,"second":951,"amount":-2},{"first":1059,"second":933,"amount":0},{"first":1059,"second":920,"amount":0},{"first":1059,"second":927,"amount":0},{"first":1059,"second":913,"amount":-2},{"first":1059,"second":916,"amount":-2},{"first":1059,"second":923,"amount":-2},{"first":1059,"second":229,"amount":-2},{"first":1059,"second":197,"amount":-2},{"first":1059,"second":216,"amount":0},{"first":1091,"second":97,"amount":0},{"first":1091,"second":101,"amount":0},{"first":1091,"second":111,"amount":0},{"first":1091,"second":113,"amount":0},{"first":1091,"second":100,"amount":0},{"first":1091,"second":102,"amount":0},{"first":1091,"second":103,"amount":0},{"first":1091,"second":99,"amount":0},{"first":1091,"second":44,"amount":-2},{"first":1091,"second":46,"amount":-2},{"first":1091,"second":34,"amount":0},{"first":1091,"second":39,"amount":0},{"first":1091,"second":1072,"amount":0},{"first":1091,"second":1076,"amount":-1},{"first":1091,"second":1077,"amount":0},{"first":1091,"second":1105,"amount":0},{"first":1091,"second":1083,"amount":-1},{"first":1091,"second":1086,"amount":0},{"first":1091,"second":1089,"amount":0},{"first":1091,"second":1092,"amount":0},{"first":1091,"second":246,"amount":0},{"first":1091,"second":228,"amount":0},{"first":1091,"second":962,"amount":0},{"first":1091,"second":961,"amount":0},{"first":1091,"second":964,"amount":0},{"first":1091,"second":959,"amount":0},{"first":1091,"second":960,"amount":0},{"first":1091,"second":945,"amount":0},{"first":1091,"second":963,"amount":0},{"first":1091,"second":948,"amount":0},{"first":1091,"second":229,"amount":0},{"first":1092,"second":122,"amount":0},{"first":1092,"second":121,"amount":0},{"first":1092,"second":120,"amount":0},{"first":1092,"second":118,"amount":0},{"first":1092,"second":34,"amount":-1},{"first":1092,"second":39,"amount":-1},{"first":1092,"second":1076,"amount":0},{"first":1092,"second":1078,"amount":0},{"first":1092,"second":1083,"amount":0},{"first":1092,"second":1090,"amount":-2},{"first":1092,"second":1091,"amount":0},{"first":1092,"second":1093,"amount":0},{"first":1092,"second":964,"amount":0},{"first":1092,"second":947,"amount":0},{"first":1092,"second":957,"amount":0},{"first":1061,"second":101,"amount":-1},{"first":1061,"second":121,"amount":-1},{"first":1061,"second":117,"amount":0},{"first":1061,"second":111,"amount":0},{"first":1061,"second":113,"amount":-1},{"first":1061,"second":100,"amount":-1},{"first":1061,"second":103,"amount":-1},{"first":1061,"second":99,"amount":-1},{"first":1061,"second":118,"amount":-1},{"first":1061,"second":79,"amount":-1},{"first":1061,"second":81,"amount":-1},{"first":1061,"second":71,"amount":-1},{"first":1061,"second":67,"amount":-1},{"first":1061,"second":86,"amount":0},{"first":1061,"second":45,"amount":-1},{"first":1061,"second":8211,"amount":-1},{"first":1061,"second":1073,"amount":0},{"first":1061,"second":1044,"amount":0},{"first":1061,"second":1077,"amount":-1},{"first":1061,"second":1105,"amount":-1},{"first":1061,"second":1051,"amount":0},{"first":1061,"second":1083,"amount":0},{"first":1061,"second":1054,"amount":-1},{"first":1061,"second":1086,"amount":0},{"first":1061,"second":1057,"amount":-1},{"first":1061,"second":1089,"amount":-1},{"first":1061,"second":1090,"amount":-1},{"first":1061,"second":1091,"amount":-1},{"first":1061,"second":1092,"amount":-1},{"first":1061,"second":1095,"amount":-1},{"first":1061,"second":252,"amount":0},{"first":1061,"second":246,"amount":0},{"first":1061,"second":214,"amount":-1},{"first":1061,"second":962,"amount":-1},{"first":1061,"second":964,"amount":-1},{"first":1061,"second":965,"amount":0},{"first":1061,"second":952,"amount":0},{"first":1061,"second":959,"amount":0},{"first":1061,"second":945,"amount":-1},{"first":1061,"second":963,"amount":-1},{"first":1061,"second":948,"amount":0},{"first":1061,"second":966,"amount":-1},{"first":1061,"second":947,"amount":-1},{"first":1061,"second":955,"amount":0},{"first":1061,"second":968,"amount":-1},{"first":1061,"second":969,"amount":0},{"first":1061,"second":957,"amount":-1},{"first":1061,"second":920,"amount":-1},{"first":1061,"second":927,"amount":-1},{"first":1061,"second":934,"amount":-1},{"first":1061,"second":216,"amount":-1},{"first":1093,"second":101,"amount":0},{"first":1093,"second":111,"amount":0},{"first":1093,"second":113,"amount":0},{"first":1093,"second":100,"amount":0},{"first":1093,"second":103,"amount":0},{"first":1093,"second":99,"amount":0},{"first":1093,"second":1077,"amount":0},{"first":1093,"second":1105,"amount":0},{"first":1093,"second":1086,"amount":0},{"first":1093,"second":1089,"amount":0},{"first":1093,"second":1092,"amount":0},{"first":1093,"second":246,"amount":0},{"first":1093,"second":962,"amount":0},{"first":1093,"second":959,"amount":0},{"first":1093,"second":945,"amount":0},{"first":1093,"second":963,"amount":0},{"first":1062,"second":65,"amount":0},{"first":1062,"second":84,"amount":-1},{"first":1062,"second":89,"amount":-1},{"first":1062,"second":88,"amount":0},{"first":1062,"second":1040,"amount":0},{"first":1062,"second":1044,"amount":0},{"first":1062,"second":1076,"amount":0},{"first":1062,"second":1046,"amount":0},{"first":1062,"second":1051,"amount":0},{"first":1062,"second":1083,"amount":0},{"first":1062,"second":1058,"amount":-1},{"first":1062,"second":1061,"amount":0},{"first":1062,"second":1063,"amount":-1},{"first":1062,"second":1095,"amount":-1},{"first":1062,"second":196,"amount":0},{"first":1062,"second":933,"amount":-1},{"first":1062,"second":913,"amount":0},{"first":1062,"second":916,"amount":0},{"first":1062,"second":923,"amount":0},{"first":1062,"second":935,"amount":0},{"first":1062,"second":197,"amount":0},{"first":1094,"second":1076,"amount":0},{"first":1094,"second":1083,"amount":0},{"first":1094,"second":1090,"amount":0},{"first":1094,"second":1095,"amount":0},{"first":1094,"second":1103,"amount":0},{"first":1063,"second":65,"amount":0},{"first":1063,"second":84,"amount":-1},{"first":1063,"second":89,"amount":-1},{"first":1063,"second":88,"amount":0},{"first":1063,"second":1040,"amount":0},{"first":1063,"second":1044,"amount":0},{"first":1063,"second":1076,"amount":0},{"first":1063,"second":1046,"amount":0},{"first":1063,"second":1051,"amount":0},{"first":1063,"second":1083,"amount":0},{"first":1063,"second":1058,"amount":-1},{"first":1063,"second":1061,"amount":0},{"first":1063,"second":1063,"amount":-1},{"first":1063,"second":1095,"amount":-1},{"first":1063,"second":196,"amount":0},{"first":1063,"second":933,"amount":-1},{"first":1063,"second":913,"amount":0},{"first":1063,"second":916,"amount":0},{"first":1063,"second":923,"amount":0},{"first":1063,"second":935,"amount":0},{"first":1063,"second":197,"amount":0},{"first":1064,"second":65,"amount":0},{"first":1064,"second":84,"amount":-1},{"first":1064,"second":89,"amount":-1},{"first":1064,"second":88,"amount":0},{"first":1064,"second":1040,"amount":0},{"first":1064,"second":1044,"amount":0},{"first":1064,"second":1076,"amount":0},{"first":1064,"second":1046,"amount":0},{"first":1064,"second":1051,"amount":0},{"first":1064,"second":1083,"amount":0},{"first":1064,"second":1058,"amount":-1},{"first":1064,"second":1061,"amount":0},{"first":1064,"second":1063,"amount":-1},{"first":1064,"second":1095,"amount":-1},{"first":1064,"second":196,"amount":0},{"first":1064,"second":933,"amount":-1},{"first":1064,"second":913,"amount":0},{"first":1064,"second":916,"amount":0},{"first":1064,"second":923,"amount":0},{"first":1064,"second":935,"amount":0},{"first":1064,"second":197,"amount":0},{"first":1065,"second":65,"amount":0},{"first":1065,"second":84,"amount":-1},{"first":1065,"second":89,"amount":-1},{"first":1065,"second":88,"amount":0},{"first":1065,"second":86,"amount":-1},{"first":1065,"second":1040,"amount":0},{"first":1065,"second":1044,"amount":0},{"first":1065,"second":1076,"amount":0},{"first":1065,"second":1046,"amount":0},{"first":1065,"second":1051,"amount":0},{"first":1065,"second":1083,"amount":0},{"first":1065,"second":1058,"amount":-1},{"first":1065,"second":1090,"amount":-1},{"first":1065,"second":1059,"amount":0},{"first":1065,"second":1061,"amount":0},{"first":1065,"second":1063,"amount":-1},{"first":1065,"second":1095,"amount":0},{"first":1065,"second":1068,"amount":-1},{"first":1065,"second":1069,"amount":0},{"first":1065,"second":196,"amount":0},{"first":1065,"second":933,"amount":-1},{"first":1065,"second":913,"amount":0},{"first":1065,"second":916,"amount":0},{"first":1065,"second":923,"amount":0},{"first":1065,"second":935,"amount":0},{"first":1065,"second":197,"amount":0},{"first":1097,"second":101,"amount":0},{"first":1097,"second":113,"amount":0},{"first":1097,"second":100,"amount":0},{"first":1097,"second":103,"amount":0},{"first":1097,"second":99,"amount":0},{"first":1097,"second":1076,"amount":1},{"first":1097,"second":1077,"amount":0},{"first":1097,"second":1105,"amount":0},{"first":1097,"second":1083,"amount":0},{"first":1097,"second":1089,"amount":0},{"first":1097,"second":1090,"amount":-1},{"first":1097,"second":1092,"amount":0},{"first":1097,"second":1095,"amount":0},{"first":1097,"second":962,"amount":0},{"first":1097,"second":945,"amount":0},{"first":1097,"second":963,"amount":0},{"first":1066,"second":120,"amount":-1},{"first":1066,"second":84,"amount":-5},{"first":1066,"second":89,"amount":-2},{"first":1066,"second":88,"amount":0},{"first":1066,"second":86,"amount":-1},{"first":1066,"second":34,"amount":-1},{"first":1066,"second":39,"amount":-1},{"first":1066,"second":1046,"amount":0},{"first":1066,"second":1078,"amount":-1},{"first":1066,"second":1051,"amount":0},{"first":1066,"second":1058,"amount":-5},{"first":1066,"second":1090,"amount":-1},{"first":1066,"second":1059,"amount":0},{"first":1066,"second":1061,"amount":0},{"first":1066,"second":1093,"amount":-1},{"first":1066,"second":1063,"amount":-1},{"first":1066,"second":1068,"amount":-1},{"first":1066,"second":933,"amount":-2},{"first":1066,"second":935,"amount":0},{"first":1098,"second":121,"amount":-1},{"first":1098,"second":120,"amount":0},{"first":1098,"second":118,"amount":-1},{"first":1098,"second":34,"amount":-3},{"first":1098,"second":39,"amount":-3},{"first":1098,"second":1078,"amount":0},{"first":1098,"second":1090,"amount":-1},{"first":1098,"second":1091,"amount":-1},{"first":1098,"second":1093,"amount":0},{"first":1098,"second":1095,"amount":-1},{"first":1098,"second":947,"amount":-1},{"first":1098,"second":957,"amount":-1},{"first":1067,"second":65,"amount":0},{"first":1067,"second":84,"amount":-1},{"first":1067,"second":89,"amount":-1},{"first":1067,"second":88,"amount":0},{"first":1067,"second":1040,"amount":0},{"first":1067,"second":1044,"amount":0},{"first":1067,"second":1076,"amount":0},{"first":1067,"second":1046,"amount":0},{"first":1067,"second":1051,"amount":0},{"first":1067,"second":1083,"amount":0},{"first":1067,"second":1058,"amount":-1},{"first":1067,"second":1061,"amount":0},{"first":1067,"second":1063,"amount":-1},{"first":1067,"second":1095,"amount":-1},{"first":1067,"second":196,"amount":0},{"first":1067,"second":933,"amount":-1},{"first":1067,"second":913,"amount":0},{"first":1067,"second":916,"amount":0},{"first":1067,"second":923,"amount":0},{"first":1067,"second":935,"amount":0},{"first":1067,"second":197,"amount":0},{"first":1068,"second":120,"amount":-1},{"first":1068,"second":84,"amount":-5},{"first":1068,"second":89,"amount":-2},{"first":1068,"second":88,"amount":0},{"first":1068,"second":86,"amount":-1},{"first":1068,"second":34,"amount":-1},{"first":1068,"second":39,"amount":-1},{"first":1068,"second":1046,"amount":0},{"first":1068,"second":1078,"amount":-1},{"first":1068,"second":1051,"amount":0},{"first":1068,"second":1058,"amount":-5},{"first":1068,"second":1090,"amount":-1},{"first":1068,"second":1059,"amount":0},{"first":1068,"second":1061,"amount":0},{"first":1068,"second":1093,"amount":-1},{"first":1068,"second":1063,"amount":-1},{"first":1068,"second":1068,"amount":-1},{"first":1068,"second":933,"amount":-2},{"first":1068,"second":935,"amount":0},{"first":1100,"second":121,"amount":-1},{"first":1100,"second":120,"amount":0},{"first":1100,"second":118,"amount":-1},{"first":1100,"second":34,"amount":-3},{"first":1100,"second":39,"amount":-3},{"first":1100,"second":1078,"amount":0},{"first":1100,"second":1090,"amount":-1},{"first":1100,"second":1091,"amount":-1},{"first":1100,"second":1093,"amount":0},{"first":1100,"second":1095,"amount":-1},{"first":1100,"second":947,"amount":-1},{"first":1100,"second":957,"amount":-1},{"first":1069,"second":84,"amount":-1},{"first":1069,"second":89,"amount":-1},{"first":1069,"second":88,"amount":-1},{"first":1069,"second":1044,"amount":-1},{"first":1069,"second":1046,"amount":-1},{"first":1069,"second":1051,"amount":-1},{"first":1069,"second":1083,"amount":0},{"first":1069,"second":1058,"amount":-1},{"first":1069,"second":1059,"amount":0},{"first":1069,"second":1061,"amount":-1},{"first":1069,"second":933,"amount":-1},{"first":1069,"second":935,"amount":-1},{"first":1101,"second":122,"amount":0},{"first":1101,"second":121,"amount":0},{"first":1101,"second":120,"amount":0},{"first":1101,"second":118,"amount":0},{"first":1101,"second":34,"amount":-1},{"first":1101,"second":39,"amount":-1},{"first":1101,"second":1076,"amount":0},{"first":1101,"second":1078,"amount":0},{"first":1101,"second":1083,"amount":0},{"first":1101,"second":1090,"amount":-2},{"first":1101,"second":1091,"amount":0},{"first":1101,"second":1093,"amount":0},{"first":1101,"second":964,"amount":0},{"first":1101,"second":947,"amount":0},{"first":1101,"second":957,"amount":0},{"first":1070,"second":84,"amount":-1},{"first":1070,"second":88,"amount":-1},{"first":1070,"second":1044,"amount":-1},{"first":1070,"second":1076,"amount":-1},{"first":1070,"second":1046,"amount":-1},{"first":1070,"second":1051,"amount":-1},{"first":1070,"second":1083,"amount":0},{"first":1070,"second":1058,"amount":-1},{"first":1070,"second":1059,"amount":0},{"first":1070,"second":1061,"amount":-1},{"first":1070,"second":935,"amount":-1},{"first":1102,"second":121,"amount":0},{"first":1102,"second":120,"amount":0},{"first":1102,"second":118,"amount":0},{"first":1102,"second":1076,"amount":0},{"first":1102,"second":1078,"amount":0},{"first":1102,"second":1083,"amount":0},{"first":1102,"second":1091,"amount":0},{"first":1102,"second":1093,"amount":0},{"first":1102,"second":947,"amount":0},{"first":1102,"second":957,"amount":0},{"first":1071,"second":84,"amount":0},{"first":1071,"second":89,"amount":0},{"first":1071,"second":1058,"amount":0},{"first":1071,"second":933,"amount":0},{"first":220,"second":65,"amount":0},{"first":220,"second":1040,"amount":0},{"first":220,"second":196,"amount":0},{"first":220,"second":913,"amount":0},{"first":220,"second":916,"amount":0},{"first":220,"second":923,"amount":0},{"first":220,"second":197,"amount":0},{"first":246,"second":122,"amount":0},{"first":246,"second":121,"amount":0},{"first":246,"second":120,"amount":0},{"first":246,"second":118,"amount":0},{"first":246,"second":34,"amount":-3},{"first":246,"second":39,"amount":-3},{"first":246,"second":1076,"amount":-1},{"first":246,"second":1078,"amount":0},{"first":246,"second":1083,"amount":0},{"first":246,"second":1090,"amount":0},{"first":246,"second":1091,"amount":0},{"first":246,"second":1093,"amount":0},{"first":246,"second":964,"amount":0},{"first":246,"second":947,"amount":0},{"first":246,"second":957,"amount":0},{"first":214,"second":65,"amount":0},{"first":214,"second":90,"amount":0},{"first":214,"second":84,"amount":-1},{"first":214,"second":89,"amount":-1},{"first":214,"second":88,"amount":0},{"first":214,"second":86,"amount":0},{"first":214,"second":44,"amount":-2},{"first":214,"second":46,"amount":-2},{"first":214,"second":1040,"amount":0},{"first":214,"second":1044,"amount":-1},{"first":214,"second":1046,"amount":0},{"first":214,"second":1051,"amount":-1},{"first":214,"second":1058,"amount":-1},{"first":214,"second":1061,"amount":0},{"first":214,"second":1068,"amount":-1},{"first":214,"second":196,"amount":0},{"first":214,"second":955,"amount":0},{"first":214,"second":933,"amount":-1},{"first":214,"second":913,"amount":0},{"first":214,"second":931,"amount":0},{"first":214,"second":916,"amount":0},{"first":214,"second":926,"amount":0},{"first":214,"second":923,"amount":0},{"first":214,"second":918,"amount":0},{"first":214,"second":935,"amount":0},{"first":214,"second":197,"amount":0},{"first":214,"second":198,"amount":-1},{"first":228,"second":121,"amount":0},{"first":228,"second":118,"amount":0},{"first":228,"second":34,"amount":-1},{"first":228,"second":39,"amount":-1},{"first":228,"second":1090,"amount":0},{"first":228,"second":1091,"amount":0},{"first":228,"second":947,"amount":0},{"first":228,"second":957,"amount":0},{"first":196,"second":122,"amount":0},{"first":196,"second":116,"amount":0},{"first":196,"second":121,"amount":-1},{"first":196,"second":117,"amount":0},{"first":196,"second":111,"amount":0},{"first":196,"second":119,"amount":-1},{"first":196,"second":118,"amount":-1},{"first":196,"second":84,"amount":-3},{"first":196,"second":89,"amount":-2},{"first":196,"second":85,"amount":0},{"first":196,"second":79,"amount":0},{"first":196,"second":81,"amount":0},{"first":196,"second":71,"amount":0},{"first":196,"second":87,"amount":-1},{"first":196,"second":67,"amount":0},{"first":196,"second":86,"amount":-2},{"first":196,"second":63,"amount":-1},{"first":196,"second":34,"amount":-2},{"first":196,"second":39,"amount":-2},{"first":196,"second":1044,"amount":0},{"first":196,"second":1051,"amount":0},{"first":196,"second":1083,"amount":0},{"first":196,"second":1054,"amount":0},{"first":196,"second":1086,"amount":0},{"first":196,"second":1057,"amount":0},{"first":196,"second":1058,"amount":-3},{"first":196,"second":1090,"amount":-1},{"first":196,"second":1091,"amount":-1},{"first":196,"second":1063,"amount":-1},{"first":196,"second":1095,"amount":-2},{"first":196,"second":1068,"amount":-1},{"first":196,"second":252,"amount":0},{"first":196,"second":220,"amount":0},{"first":196,"second":246,"amount":0},{"first":196,"second":214,"amount":0},{"first":196,"second":964,"amount":-1},{"first":196,"second":965,"amount":0},{"first":196,"second":959,"amount":0},{"first":196,"second":947,"amount":-1},{"first":196,"second":955,"amount":0},{"first":196,"second":957,"amount":-1},{"first":196,"second":933,"amount":-2},{"first":196,"second":920,"amount":0},{"first":196,"second":927,"amount":0},{"first":196,"second":934,"amount":-1},{"first":196,"second":936,"amount":-1},{"first":196,"second":216,"amount":0},{"first":241,"second":34,"amount":-2},{"first":241,"second":39,"amount":-2},{"first":241,"second":1090,"amount":-1},{"first":209,"second":65,"amount":0},{"first":209,"second":84,"amount":-1},{"first":209,"second":89,"amount":-1},{"first":209,"second":88,"amount":0},{"first":209,"second":1040,"amount":0},{"first":209,"second":1044,"amount":0},{"first":209,"second":1076,"amount":0},{"first":209,"second":1046,"amount":0},{"first":209,"second":1051,"amount":0},{"first":209,"second":1083,"amount":0},{"first":209,"second":1058,"amount":-1},{"first":209,"second":1061,"amount":0},{"first":209,"second":1063,"amount":-1},{"first":209,"second":1095,"amount":-1},{"first":209,"second":196,"amount":0},{"first":209,"second":933,"amount":-1},{"first":209,"second":913,"amount":0},{"first":209,"second":916,"amount":0},{"first":209,"second":923,"amount":0},{"first":209,"second":935,"amount":0},{"first":209,"second":197,"amount":0},{"first":962,"second":1090,"amount":-1},{"first":961,"second":122,"amount":0},{"first":961,"second":121,"amount":0},{"first":961,"second":120,"amount":0},{"first":961,"second":118,"amount":0},{"first":961,"second":34,"amount":-1},{"first":961,"second":39,"amount":-1},{"first":961,"second":1076,"amount":0},{"first":961,"second":1078,"amount":0},{"first":961,"second":1083,"amount":0},{"first":961,"second":1090,"amount":-2},{"first":961,"second":1091,"amount":0},{"first":961,"second":1093,"amount":0},{"first":961,"second":964,"amount":0},{"first":961,"second":947,"amount":0},{"first":961,"second":957,"amount":0},{"first":964,"second":101,"amount":0},{"first":964,"second":121,"amount":0},{"first":964,"second":111,"amount":0},{"first":964,"second":113,"amount":0},{"first":964,"second":100,"amount":0},{"first":964,"second":102,"amount":0},{"first":964,"second":103,"amount":0},{"first":964,"second":99,"amount":0},{"first":964,"second":118,"amount":0},{"first":964,"second":34,"amount":0},{"first":964,"second":39,"amount":0},{"first":964,"second":1077,"amount":0},{"first":964,"second":1105,"amount":0},{"first":964,"second":1086,"amount":0},{"first":964,"second":1089,"amount":0},{"first":964,"second":1091,"amount":0},{"first":964,"second":1092,"amount":0},{"first":964,"second":246,"amount":0},{"first":964,"second":962,"amount":0},{"first":964,"second":964,"amount":0},{"first":964,"second":959,"amount":0},{"first":964,"second":960,"amount":0},{"first":964,"second":945,"amount":0},{"first":964,"second":963,"amount":0},{"first":964,"second":948,"amount":0},{"first":964,"second":947,"amount":0},{"first":964,"second":957,"amount":0},{"first":965,"second":1090,"amount":-1},{"first":953,"second":101,"amount":0},{"first":953,"second":121,"amount":-1},{"first":953,"second":117,"amount":0},{"first":953,"second":113,"amount":0},{"first":953,"second":100,"amount":0},{"first":953,"second":103,"amount":0},{"first":953,"second":99,"amount":0},{"first":953,"second":118,"amount":-1},{"first":953,"second":34,"amount":-1},{"first":953,"second":39,"amount":-1},{"first":953,"second":1077,"amount":0},{"first":953,"second":1105,"amount":0},{"first":953,"second":1089,"amount":0},{"first":953,"second":1091,"amount":-1},{"first":953,"second":1092,"amount":0},{"first":953,"second":252,"amount":0},{"first":953,"second":962,"amount":0},{"first":953,"second":964,"amount":-1},{"first":953,"second":965,"amount":0},{"first":953,"second":952,"amount":0},{"first":953,"second":960,"amount":0},{"first":953,"second":945,"amount":0},{"first":953,"second":963,"amount":0},{"first":953,"second":966,"amount":-1},{"first":953,"second":947,"amount":-1},{"first":953,"second":955,"amount":0},{"first":953,"second":957,"amount":-1},{"first":959,"second":122,"amount":0},{"first":959,"second":121,"amount":0},{"first":959,"second":120,"amount":0},{"first":959,"second":118,"amount":0},{"first":959,"second":34,"amount":-3},{"first":959,"second":39,"amount":-3},{"first":959,"second":1076,"amount":-1},{"first":959,"second":1078,"amount":0},{"first":959,"second":1083,"amount":0},{"first":959,"second":1090,"amount":0},{"first":959,"second":1091,"amount":0},{"first":959,"second":1093,"amount":0},{"first":959,"second":964,"amount":0},{"first":959,"second":947,"amount":0},{"first":959,"second":957,"amount":0},{"first":945,"second":955,"amount":0},{"first":963,"second":964,"amount":0},{"first":948,"second":1090,"amount":-1},{"first":948,"second":964,"amount":0},{"first":966,"second":122,"amount":0},{"first":966,"second":120,"amount":0},{"first":966,"second":1078,"amount":0},{"first":966,"second":1090,"amount":-2},{"first":966,"second":1093,"amount":0},{"first":947,"second":97,"amount":0},{"first":947,"second":101,"amount":0},{"first":947,"second":111,"amount":0},{"first":947,"second":113,"amount":0},{"first":947,"second":100,"amount":0},{"first":947,"second":102,"amount":0},{"first":947,"second":103,"amount":0},{"first":947,"second":99,"amount":0},{"first":947,"second":44,"amount":-2},{"first":947,"second":46,"amount":-2},{"first":947,"second":34,"amount":0},{"first":947,"second":39,"amount":0},{"first":947,"second":1072,"amount":0},{"first":947,"second":1076,"amount":-1},{"first":947,"second":1077,"amount":0},{"first":947,"second":1105,"amount":0},{"first":947,"second":1083,"amount":-1},{"first":947,"second":1086,"amount":0},{"first":947,"second":1089,"amount":0},{"first":947,"second":1092,"amount":0},{"first":947,"second":246,"amount":0},{"first":947,"second":228,"amount":0},{"first":947,"second":962,"amount":0},{"first":947,"second":961,"amount":0},{"first":947,"second":964,"amount":0},{"first":947,"second":959,"amount":0},{"first":947,"second":960,"amount":0},{"first":947,"second":945,"amount":0},{"first":947,"second":963,"amount":0},{"first":947,"second":948,"amount":0},{"first":947,"second":229,"amount":0},{"first":951,"second":34,"amount":-2},{"first":951,"second":39,"amount":-2},{"first":951,"second":1090,"amount":-1},{"first":958,"second":101,"amount":-1},{"first":958,"second":113,"amount":-1},{"first":958,"second":100,"amount":-1},{"first":958,"second":103,"amount":-1},{"first":958,"second":99,"amount":-1},{"first":958,"second":1077,"amount":-1},{"first":958,"second":1105,"amount":-1},{"first":958,"second":1089,"amount":-1},{"first":958,"second":1092,"amount":-1},{"first":958,"second":962,"amount":-1},{"first":958,"second":945,"amount":-1},{"first":958,"second":963,"amount":-1},{"first":958,"second":955,"amount":0},{"first":955,"second":121,"amount":-1},{"first":955,"second":117,"amount":0},{"first":955,"second":102,"amount":0},{"first":955,"second":118,"amount":-1},{"first":955,"second":34,"amount":-2},{"first":955,"second":39,"amount":-2},{"first":955,"second":1091,"amount":-1},{"first":955,"second":252,"amount":0},{"first":955,"second":964,"amount":-5},{"first":955,"second":965,"amount":0},{"first":955,"second":952,"amount":0},{"first":955,"second":960,"amount":0},{"first":955,"second":947,"amount":-1},{"first":955,"second":955,"amount":0},{"first":955,"second":957,"amount":-1},{"first":950,"second":101,"amount":-1},{"first":950,"second":121,"amount":-1},{"first":950,"second":117,"amount":-1},{"first":950,"second":111,"amount":-1},{"first":950,"second":112,"amount":0},{"first":950,"second":113,"amount":-1},{"first":950,"second":100,"amount":-1},{"first":950,"second":103,"amount":-1},{"first":950,"second":109,"amount":0},{"first":950,"second":99,"amount":-1},{"first":950,"second":118,"amount":-1},{"first":950,"second":110,"amount":0},{"first":950,"second":1075,"amount":0},{"first":950,"second":1077,"amount":-1},{"first":950,"second":1105,"amount":-1},{"first":950,"second":1080,"amount":0},{"first":950,"second":1081,"amount":0},{"first":950,"second":1082,"amount":0},{"first":950,"second":1084,"amount":0},{"first":950,"second":1085,"amount":0},{"first":950,"second":1086,"amount":-1},{"first":950,"second":1087,"amount":0},{"first":950,"second":1088,"amount":0},{"first":950,"second":1089,"amount":-1},{"first":950,"second":1091,"amount":-1},{"first":950,"second":1092,"amount":-1},{"first":950,"second":1094,"amount":0},{"first":950,"second":1096,"amount":0},{"first":950,"second":1097,"amount":0},{"first":950,"second":1100,"amount":0},{"first":950,"second":1102,"amount":0},{"first":950,"second":252,"amount":-1},{"first":950,"second":246,"amount":-1},{"first":950,"second":241,"amount":0},{"first":950,"second":962,"amount":-1},{"first":950,"second":949,"amount":-1},{"first":950,"second":964,"amount":-1},{"first":950,"second":965,"amount":-1},{"first":950,"second":952,"amount":0},{"first":950,"second":953,"amount":0},{"first":950,"second":959,"amount":-1},{"first":950,"second":960,"amount":-1},{"first":950,"second":945,"amount":-1},{"first":950,"second":963,"amount":-1},{"first":950,"second":948,"amount":0},{"first":950,"second":966,"amount":-1},{"first":950,"second":947,"amount":-1},{"first":950,"second":951,"amount":0},{"first":950,"second":958,"amount":0},{"first":950,"second":968,"amount":-1},{"first":950,"second":969,"amount":-1},{"first":950,"second":957,"amount":-1},{"first":968,"second":122,"amount":0},{"first":968,"second":120,"amount":0},{"first":968,"second":1078,"amount":0},{"first":968,"second":1093,"amount":0},{"first":969,"second":122,"amount":0},{"first":969,"second":121,"amount":0},{"first":969,"second":120,"amount":0},{"first":969,"second":118,"amount":0},{"first":969,"second":1078,"amount":0},{"first":969,"second":1091,"amount":0},{"first":969,"second":1093,"amount":0},{"first":969,"second":947,"amount":0},{"first":969,"second":957,"amount":0},{"first":957,"second":97,"amount":0},{"first":957,"second":101,"amount":0},{"first":957,"second":111,"amount":0},{"first":957,"second":113,"amount":0},{"first":957,"second":100,"amount":0},{"first":957,"second":102,"amount":0},{"first":957,"second":103,"amount":0},{"first":957,"second":99,"amount":0},{"first":957,"second":44,"amount":-2},{"first":957,"second":46,"amount":-2},{"first":957,"second":34,"amount":0},{"first":957,"second":39,"amount":0},{"first":957,"second":1072,"amount":0},{"first":957,"second":1076,"amount":-1},{"first":957,"second":1077,"amount":0},{"first":957,"second":1105,"amount":0},{"first":957,"second":1083,"amount":-1},{"first":957,"second":1086,"amount":0},{"first":957,"second":1089,"amount":0},{"first":957,"second":1092,"amount":0},{"first":957,"second":246,"amount":0},{"first":957,"second":228,"amount":0},{"first":957,"second":962,"amount":0},{"first":957,"second":961,"amount":0},{"first":957,"second":964,"amount":0},{"first":957,"second":959,"amount":0},{"first":957,"second":960,"amount":0},{"first":957,"second":945,"amount":0},{"first":957,"second":963,"amount":0},{"first":957,"second":948,"amount":0},{"first":957,"second":229,"amount":0},{"first":917,"second":101,"amount":0},{"first":917,"second":121,"amount":-1},{"first":917,"second":117,"amount":0},{"first":917,"second":111,"amount":0},{"first":917,"second":113,"amount":0},{"first":917,"second":100,"amount":0},{"first":917,"second":102,"amount":0},{"first":917,"second":103,"amount":0},{"first":917,"second":119,"amount":0},{"first":917,"second":99,"amount":0},{"first":917,"second":118,"amount":-1},{"first":917,"second":84,"amount":0},{"first":917,"second":1077,"amount":0},{"first":917,"second":1105,"amount":0},{"first":917,"second":1086,"amount":0},{"first":917,"second":1089,"amount":0},{"first":917,"second":1058,"amount":0},{"first":917,"second":1091,"amount":-1},{"first":917,"second":1092,"amount":0},{"first":917,"second":252,"amount":0},{"first":917,"second":246,"amount":0},{"first":917,"second":962,"amount":0},{"first":917,"second":965,"amount":0},{"first":917,"second":959,"amount":0},{"first":917,"second":945,"amount":0},{"first":917,"second":963,"amount":0},{"first":917,"second":947,"amount":-1},{"first":917,"second":957,"amount":-1},{"first":929,"second":97,"amount":0},{"first":929,"second":101,"amount":0},{"first":929,"second":116,"amount":0},{"first":929,"second":121,"amount":0},{"first":929,"second":111,"amount":0},{"first":929,"second":113,"amount":0},{"first":929,"second":100,"amount":0},{"first":929,"second":103,"amount":0},{"first":929,"second":99,"amount":0},{"first":929,"second":118,"amount":0},{"first":929,"second":65,"amount":-3},{"first":929,"second":90,"amount":-1},{"first":929,"second":74,"amount":-4},{"first":929,"second":88,"amount":-1},{"first":929,"second":44,"amount":-7},{"first":929,"second":46,"amount":-7},{"first":929,"second":1040,"amount":-3},{"first":929,"second":1072,"amount":0},{"first":929,"second":1044,"amount":-2},{"first":929,"second":1076,"amount":-1},{"first":929,"second":1077,"amount":0},{"first":929,"second":1105,"amount":0},{"first":929,"second":1046,"amount":-1},{"first":929,"second":1051,"amount":-1},{"first":929,"second":1083,"amount":-1},{"first":929,"second":1086,"amount":0},{"first":929,"second":1089,"amount":0},{"first":929,"second":1091,"amount":0},{"first":929,"second":1092,"amount":0},{"first":929,"second":1061,"amount":-1},{"first":929,"second":246,"amount":0},{"first":929,"second":228,"amount":0},{"first":929,"second":196,"amount":-3},{"first":929,"second":962,"amount":0},{"first":929,"second":961,"amount":-1},{"first":929,"second":959,"amount":0},{"first":929,"second":945,"amount":0},{"first":929,"second":963,"amount":0},{"first":929,"second":948,"amount":0},{"first":929,"second":947,"amount":0},{"first":929,"second":955,"amount":-1},{"first":929,"second":957,"amount":0},{"first":929,"second":913,"amount":-3},{"first":929,"second":916,"amount":-3},{"first":929,"second":923,"amount":-3},{"first":929,"second":918,"amount":-1},{"first":929,"second":935,"amount":-1},{"first":929,"second":229,"amount":0},{"first":929,"second":197,"amount":-3},{"first":929,"second":198,"amount":-2},{"first":932,"second":97,"amount":-2},{"first":932,"second":122,"amount":-1},{"first":932,"second":101,"amount":-2},{"first":932,"second":114,"amount":-2},{"first":932,"second":121,"amount":-1},{"first":932,"second":117,"amount":-2},{"first":932,"second":111,"amount":-2},{"first":932,"second":112,"amount":-2},{"first":932,"second":113,"amount":-2},{"first":932,"second":115,"amount":-2},{"first":932,"second":100,"amount":-2},{"first":932,"second":103,"amount":-2},{"first":932,"second":109,"amount":-2},{"first":932,"second":119,"amount":-1},{"first":932,"second":120,"amount":-2},{"first":932,"second":99,"amount":-2},{"first":932,"second":118,"amount":-1},{"first":932,"second":110,"amount":-2},{"first":932,"second":65,"amount":-2},{"first":932,"second":84,"amount":0},{"first":932,"second":89,"amount":0},{"first":932,"second":79,"amount":-1},{"first":932,"second":81,"amount":-1},{"first":932,"second":83,"amount":0},{"first":932,"second":71,"amount":-1},{"first":932,"second":74,"amount":-5},{"first":932,"second":87,"amount":0},{"first":932,"second":67,"amount":-1},{"first":932,"second":86,"amount":0},{"first":932,"second":45,"amount":-5},{"first":932,"second":8211,"amount":-5},{"first":932,"second":44,"amount":-4},{"first":932,"second":46,"amount":-4},{"first":932,"second":1040,"amount":-2},{"first":932,"second":1072,"amount":-2},{"first":932,"second":1073,"amount":-1},{"first":932,"second":1074,"amount":-2},{"first":932,"second":1075,"amount":-2},{"first":932,"second":1044,"amount":-2},{"first":932,"second":1076,"amount":-3},{"first":932,"second":1077,"amount":-2},{"first":932,"second":1105,"amount":-2},{"first":932,"second":1078,"amount":-2},{"first":932,"second":1079,"amount":-3},{"first":932,"second":1080,"amount":-2},{"first":932,"second":1081,"amount":-2},{"first":932,"second":1082,"amount":-2},{"first":932,"second":1051,"amount":-1},{"first":932,"second":1083,"amount":-3},{"first":932,"second":1084,"amount":-2},{"first":932,"second":1085,"amount":-2},{"first":932,"second":1054,"amount":-1},{"first":932,"second":1086,"amount":-2},{"first":932,"second":1087,"amount":-2},{"first":932,"second":1088,"amount":-2},{"first":932,"second":1057,"amount":-1},{"first":932,"second":1089,"amount":-2},{"first":932,"second":1058,"amount":0},{"first":932,"second":1090,"amount":-2},{"first":932,"second":1091,"amount":-1},{"first":932,"second":1092,"amount":-2},{"first":932,"second":1093,"amount":-2},{"first":932,"second":1094,"amount":-2},{"first":932,"second":1095,"amount":-3},{"first":932,"second":1096,"amount":-2},{"first":932,"second":1097,"amount":-2},{"first":932,"second":1099,"amount":-3},{"first":932,"second":1068,"amount":0},{"first":932,"second":1100,"amount":-2},{"first":932,"second":1101,"amount":-3},{"first":932,"second":1102,"amount":-2},{"first":932,"second":1103,"amount":-3},{"first":932,"second":252,"amount":-2},{"first":932,"second":246,"amount":-2},{"first":932,"second":214,"amount":-1},{"first":932,"second":228,"amount":-2},{"first":932,"second":196,"amount":-2},{"first":932,"second":241,"amount":-2},{"first":932,"second":962,"amount":-2},{"first":932,"second":949,"amount":-3},{"first":932,"second":961,"amount":-3},{"first":932,"second":964,"amount":-2},{"first":932,"second":965,"amount":-2},{"first":932,"second":953,"amount":-3},{"first":932,"second":959,"amount":-2},{"first":932,"second":960,"amount":-2},{"first":932,"second":945,"amount":-2},{"first":932,"second":963,"amount":-2},{"first":932,"second":948,"amount":-1},{"first":932,"second":966,"amount":-3},{"first":932,"second":947,"amount":-1},{"first":932,"second":951,"amount":-2},{"first":932,"second":968,"amount":-3},{"first":932,"second":969,"amount":-3},{"first":932,"second":957,"amount":-1},{"first":932,"second":933,"amount":0},{"first":932,"second":920,"amount":-1},{"first":932,"second":927,"amount":-1},{"first":932,"second":913,"amount":-2},{"first":932,"second":916,"amount":-2},{"first":932,"second":934,"amount":-2},{"first":932,"second":923,"amount":-2},{"first":932,"second":229,"amount":-2},{"first":932,"second":197,"amount":-2},{"first":932,"second":230,"amount":-2},{"first":932,"second":198,"amount":-4},{"first":932,"second":248,"amount":-2},{"first":932,"second":216,"amount":-1},{"first":933,"second":97,"amount":-1},{"first":933,"second":122,"amount":-1},{"first":933,"second":101,"amount":-1},{"first":933,"second":114,"amount":-1},{"first":933,"second":116,"amount":0},{"first":933,"second":121,"amount":0},{"first":933,"second":117,"amount":-1},{"first":933,"second":111,"amount":-1},{"first":933,"second":112,"amount":-1},{"first":933,"second":113,"amount":-1},{"first":933,"second":115,"amount":-1},{"first":933,"second":100,"amount":-1},{"first":933,"second":102,"amount":0},{"first":933,"second":103,"amount":-1},{"first":933,"second":109,"amount":-1},{"first":933,"second":120,"amount":0},{"first":933,"second":99,"amount":-1},{"first":933,"second":118,"amount":0},{"first":933,"second":110,"amount":-1},{"first":933,"second":65,"amount":-2},{"first":933,"second":84,"amount":0},{"first":933,"second":89,"amount":0},{"first":933,"second":85,"amount":-2},{"first":933,"second":79,"amount":-1},{"first":933,"second":81,"amount":-1},{"first":933,"second":83,"amount":0},{"first":933,"second":71,"amount":-1},{"first":933,"second":74,"amount":-2},{"first":933,"second":87,"amount":0},{"first":933,"second":88,"amount":0},{"first":933,"second":67,"amount":-1},{"first":933,"second":86,"amount":0},{"first":933,"second":42,"amount":-1},{"first":933,"second":45,"amount":-1},{"first":933,"second":8211,"amount":-1},{"first":933,"second":44,"amount":-4},{"first":933,"second":46,"amount":-4},{"first":933,"second":125,"amount":0},{"first":933,"second":41,"amount":0},{"first":933,"second":93,"amount":0},{"first":933,"second":38,"amount":-1},{"first":933,"second":1040,"amount":-2},{"first":933,"second":1072,"amount":-1},{"first":933,"second":1075,"amount":-1},{"first":933,"second":1077,"amount":-1},{"first":933,"second":1105,"amount":-1},{"first":933,"second":1046,"amount":0},{"first":933,"second":1078,"amount":0},{"first":933,"second":1080,"amount":-1},{"first":933,"second":1081,"amount":-1},{"first":933,"second":1082,"amount":-1},{"first":933,"second":1084,"amount":-1},{"first":933,"second":1085,"amount":-1},{"first":933,"second":1054,"amount":-1},{"first":933,"second":1086,"amount":-1},{"first":933,"second":1087,"amount":-1},{"first":933,"second":1088,"amount":-1},{"first":933,"second":1057,"amount":-1},{"first":933,"second":1089,"amount":-1},{"first":933,"second":1058,"amount":0},{"first":933,"second":1091,"amount":0},{"first":933,"second":1092,"amount":-1},{"first":933,"second":1061,"amount":0},{"first":933,"second":1093,"amount":0},{"first":933,"second":1094,"amount":-1},{"first":933,"second":1096,"amount":-1},{"first":933,"second":1097,"amount":-1},{"first":933,"second":1100,"amount":-1},{"first":933,"second":1102,"amount":-1},{"first":933,"second":252,"amount":-1},{"first":933,"second":220,"amount":-2},{"first":933,"second":246,"amount":-1},{"first":933,"second":214,"amount":-1},{"first":933,"second":228,"amount":-1},{"first":933,"second":196,"amount":-2},{"first":933,"second":241,"amount":-1},{"first":933,"second":962,"amount":-1},{"first":933,"second":949,"amount":-1},{"first":933,"second":961,"amount":-1},{"first":933,"second":964,"amount":0},{"first":933,"second":965,"amount":-1},{"first":933,"second":952,"amount":0},{"first":933,"second":953,"amount":-1},{"first":933,"second":959,"amount":-1},{"first":933,"second":960,"amount":0},{"first":933,"second":945,"amount":-1},{"first":933,"second":963,"amount":-1},{"first":933,"second":948,"amount":0},{"first":933,"second":966,"amount":-1},{"first":933,"second":947,"amount":0},{"first":933,"second":951,"amount":-1},{"first":933,"second":950,"amount":0},{"first":933,"second":968,"amount":-1},{"first":933,"second":969,"amount":-1},{"first":933,"second":946,"amount":0},{"first":933,"second":957,"amount":0},{"first":933,"second":933,"amount":0},{"first":933,"second":920,"amount":-1},{"first":933,"second":927,"amount":-1},{"first":933,"second":913,"amount":-2},{"first":933,"second":916,"amount":-2},{"first":933,"second":934,"amount":-1},{"first":933,"second":923,"amount":-2},{"first":933,"second":935,"amount":0},{"first":933,"second":229,"amount":-1},{"first":933,"second":197,"amount":-2},{"first":933,"second":230,"amount":-1},{"first":933,"second":198,"amount":-2},{"first":933,"second":248,"amount":-1},{"first":933,"second":216,"amount":-1},{"first":920,"second":65,"amount":0},{"first":920,"second":90,"amount":0},{"first":920,"second":84,"amount":-1},{"first":920,"second":89,"amount":-1},{"first":920,"second":88,"amount":0},{"first":920,"second":86,"amount":0},{"first":920,"second":44,"amount":-2},{"first":920,"second":46,"amount":-2},{"first":920,"second":1040,"amount":0},{"first":920,"second":1044,"amount":-1},{"first":920,"second":1046,"amount":0},{"first":920,"second":1051,"amount":-1},{"first":920,"second":1058,"amount":-1},{"first":920,"second":1061,"amount":0},{"first":920,"second":1068,"amount":-1},{"first":920,"second":196,"amount":0},{"first":920,"second":955,"amount":0},{"first":920,"second":933,"amount":-1},{"first":920,"second":913,"amount":0},{"first":920,"second":931,"amount":0},{"first":920,"second":916,"amount":0},{"first":920,"second":926,"amount":0},{"first":920,"second":923,"amount":0},{"first":920,"second":918,"amount":0},{"first":920,"second":935,"amount":0},{"first":920,"second":197,"amount":0},{"first":920,"second":198,"amount":-1},{"first":921,"second":65,"amount":0},{"first":921,"second":84,"amount":-1},{"first":921,"second":89,"amount":-1},{"first":921,"second":88,"amount":0},{"first":921,"second":1040,"amount":0},{"first":921,"second":1044,"amount":0},{"first":921,"second":1076,"amount":0},{"first":921,"second":1046,"amount":0},{"first":921,"second":1051,"amount":0},{"first":921,"second":1083,"amount":0},{"first":921,"second":1058,"amount":-1},{"first":921,"second":1061,"amount":0},{"first":921,"second":1063,"amount":-1},{"first":921,"second":1095,"amount":-1},{"first":921,"second":196,"amount":0},{"first":921,"second":933,"amount":-1},{"first":921,"second":913,"amount":0},{"first":921,"second":916,"amount":0},{"first":921,"second":923,"amount":0},{"first":921,"second":935,"amount":0},{"first":921,"second":197,"amount":0},{"first":927,"second":65,"amount":0},{"first":927,"second":90,"amount":0},{"first":927,"second":84,"amount":-1},{"first":927,"second":89,"amount":-1},{"first":927,"second":88,"amount":0},{"first":927,"second":86,"amount":0},{"first":927,"second":44,"amount":-2},{"first":927,"second":46,"amount":-2},{"first":927,"second":1040,"amount":0},{"first":927,"second":1044,"amount":-1},{"first":927,"second":1046,"amount":0},{"first":927,"second":1051,"amount":-1},{"first":927,"second":1058,"amount":-1},{"first":927,"second":1061,"amount":0},{"first":927,"second":1068,"amount":-1},{"first":927,"second":196,"amount":0},{"first":927,"second":955,"amount":0},{"first":927,"second":933,"amount":-1},{"first":927,"second":913,"amount":0},{"first":927,"second":931,"amount":0},{"first":927,"second":916,"amount":0},{"first":927,"second":926,"amount":0},{"first":927,"second":923,"amount":0},{"first":927,"second":918,"amount":0},{"first":927,"second":935,"amount":0},{"first":927,"second":197,"amount":0},{"first":927,"second":198,"amount":-1},{"first":913,"second":122,"amount":0},{"first":913,"second":116,"amount":0},{"first":913,"second":121,"amount":-1},{"first":913,"second":117,"amount":0},{"first":913,"second":111,"amount":0},{"first":913,"second":119,"amount":-1},{"first":913,"second":118,"amount":-1},{"first":913,"second":84,"amount":-3},{"first":913,"second":89,"amount":-2},{"first":913,"second":85,"amount":0},{"first":913,"second":79,"amount":0},{"first":913,"second":81,"amount":0},{"first":913,"second":71,"amount":0},{"first":913,"second":87,"amount":-1},{"first":913,"second":67,"amount":0},{"first":913,"second":86,"amount":-2},{"first":913,"second":63,"amount":-1},{"first":913,"second":34,"amount":-2},{"first":913,"second":39,"amount":-2},{"first":913,"second":1044,"amount":0},{"first":913,"second":1051,"amount":0},{"first":913,"second":1083,"amount":0},{"first":913,"second":1054,"amount":0},{"first":913,"second":1086,"amount":0},{"first":913,"second":1057,"amount":0},{"first":913,"second":1058,"amount":-3},{"first":913,"second":1090,"amount":-1},{"first":913,"second":1091,"amount":-1},{"first":913,"second":1063,"amount":-1},{"first":913,"second":1095,"amount":-2},{"first":913,"second":1068,"amount":-1},{"first":913,"second":252,"amount":0},{"first":913,"second":220,"amount":0},{"first":913,"second":246,"amount":0},{"first":913,"second":214,"amount":0},{"first":913,"second":964,"amount":-1},{"first":913,"second":965,"amount":0},{"first":913,"second":959,"amount":0},{"first":913,"second":947,"amount":-1},{"first":913,"second":955,"amount":0},{"first":913,"second":957,"amount":-1},{"first":913,"second":933,"amount":-2},{"first":913,"second":920,"amount":0},{"first":913,"second":927,"amount":0},{"first":913,"second":934,"amount":-1},{"first":913,"second":936,"amount":-1},{"first":913,"second":216,"amount":0},{"first":931,"second":79,"amount":-1},{"first":931,"second":81,"amount":-1},{"first":931,"second":71,"amount":-1},{"first":931,"second":67,"amount":-1},{"first":931,"second":1054,"amount":-1},{"first":931,"second":1057,"amount":-1},{"first":931,"second":214,"amount":-1},{"first":931,"second":955,"amount":0},{"first":931,"second":920,"amount":-1},{"first":931,"second":927,"amount":-1},{"first":931,"second":934,"amount":-1},{"first":931,"second":216,"amount":-1},{"first":916,"second":122,"amount":0},{"first":916,"second":116,"amount":0},{"first":916,"second":121,"amount":-1},{"first":916,"second":117,"amount":0},{"first":916,"second":111,"amount":0},{"first":916,"second":119,"amount":-1},{"first":916,"second":118,"amount":-1},{"first":916,"second":84,"amount":-3},{"first":916,"second":89,"amount":-2},{"first":916,"second":85,"amount":0},{"first":916,"second":79,"amount":0},{"first":916,"second":81,"amount":0},{"first":916,"second":71,"amount":0},{"first":916,"second":87,"amount":-1},{"first":916,"second":67,"amount":0},{"first":916,"second":86,"amount":-2},{"first":916,"second":63,"amount":-1},{"first":916,"second":34,"amount":-2},{"first":916,"second":39,"amount":-2},{"first":916,"second":1044,"amount":0},{"first":916,"second":1051,"amount":0},{"first":916,"second":1083,"amount":0},{"first":916,"second":1054,"amount":0},{"first":916,"second":1086,"amount":0},{"first":916,"second":1057,"amount":0},{"first":916,"second":1058,"amount":-3},{"first":916,"second":1090,"amount":-1},{"first":916,"second":1091,"amount":-1},{"first":916,"second":1063,"amount":-1},{"first":916,"second":1095,"amount":-2},{"first":916,"second":1068,"amount":-1},{"first":916,"second":252,"amount":0},{"first":916,"second":220,"amount":0},{"first":916,"second":246,"amount":0},{"first":916,"second":214,"amount":0},{"first":916,"second":964,"amount":-1},{"first":916,"second":965,"amount":0},{"first":916,"second":959,"amount":0},{"first":916,"second":947,"amount":-1},{"first":916,"second":955,"amount":0},{"first":916,"second":957,"amount":-1},{"first":916,"second":933,"amount":-2},{"first":916,"second":920,"amount":0},{"first":916,"second":927,"amount":0},{"first":916,"second":934,"amount":-1},{"first":916,"second":936,"amount":-1},{"first":916,"second":216,"amount":0},{"first":934,"second":65,"amount":-1},{"first":934,"second":89,"amount":-1},{"first":934,"second":88,"amount":-1},{"first":934,"second":1040,"amount":-1},{"first":934,"second":1046,"amount":-1},{"first":934,"second":1061,"amount":-1},{"first":934,"second":196,"amount":-1},{"first":934,"second":955,"amount":-1},{"first":934,"second":933,"amount":-1},{"first":934,"second":913,"amount":-1},{"first":934,"second":916,"amount":-1},{"first":934,"second":923,"amount":-1},{"first":934,"second":935,"amount":-1},{"first":934,"second":197,"amount":-1},{"first":915,"second":97,"amount":-4},{"first":915,"second":122,"amount":-3},{"first":915,"second":101,"amount":-4},{"first":915,"second":114,"amount":-3},{"first":915,"second":121,"amount":-3},{"first":915,"second":117,"amount":-4},{"first":915,"second":111,"amount":-4},{"first":915,"second":112,"amount":-4},{"first":915,"second":113,"amount":-4},{"first":915,"second":115,"amount":-4},{"first":915,"second":100,"amount":-4},{"first":915,"second":103,"amount":-4},{"first":915,"second":109,"amount":-4},{"first":915,"second":119,"amount":-2},{"first":915,"second":120,"amount":-3},{"first":915,"second":99,"amount":-4},{"first":915,"second":118,"amount":-3},{"first":915,"second":110,"amount":-4},{"first":915,"second":65,"amount":-4},{"first":915,"second":84,"amount":0},{"first":915,"second":89,"amount":0},{"first":915,"second":79,"amount":-1},{"first":915,"second":81,"amount":-1},{"first":915,"second":83,"amount":-1},{"first":915,"second":71,"amount":-1},{"first":915,"second":87,"amount":0},{"first":915,"second":67,"amount":-1},{"first":915,"second":86,"amount":0},{"first":915,"second":45,"amount":-8},{"first":915,"second":8211,"amount":-8},{"first":915,"second":44,"amount":-8},{"first":915,"second":46,"amount":-8},{"first":915,"second":1040,"amount":-4},{"first":915,"second":1072,"amount":-4},{"first":915,"second":1073,"amount":-1},{"first":915,"second":1074,"amount":-4},{"first":915,"second":1075,"amount":-4},{"first":915,"second":1044,"amount":-4},{"first":915,"second":1076,"amount":-5},{"first":915,"second":1077,"amount":-4},{"first":915,"second":1105,"amount":-4},{"first":915,"second":1078,"amount":-3},{"first":915,"second":1079,"amount":-5},{"first":915,"second":1080,"amount":-4},{"first":915,"second":1081,"amount":-4},{"first":915,"second":1082,"amount":-4},{"first":915,"second":1051,"amount":-2},{"first":915,"second":1083,"amount":-5},{"first":915,"second":1084,"amount":-4},{"first":915,"second":1085,"amount":-4},{"first":915,"second":1054,"amount":-1},{"first":915,"second":1086,"amount":-4},{"first":915,"second":1087,"amount":-4},{"first":915,"second":1088,"amount":-4},{"first":915,"second":1057,"amount":-1},{"first":915,"second":1089,"amount":-4},{"first":915,"second":1058,"amount":0},{"first":915,"second":1090,"amount":-3},{"first":915,"second":1091,"amount":-3},{"first":915,"second":1092,"amount":-4},{"first":915,"second":1093,"amount":-3},{"first":915,"second":1094,"amount":-4},{"first":915,"second":1095,"amount":-5},{"first":915,"second":1096,"amount":-4},{"first":915,"second":1097,"amount":-4},{"first":915,"second":1099,"amount":-5},{"first":915,"second":1068,"amount":0},{"first":915,"second":1100,"amount":-4},{"first":915,"second":1101,"amount":-5},{"first":915,"second":1102,"amount":-4},{"first":915,"second":1103,"amount":-5},{"first":915,"second":252,"amount":-4},{"first":915,"second":246,"amount":-4},{"first":915,"second":214,"amount":-1},{"first":915,"second":228,"amount":-4},{"first":915,"second":196,"amount":-4},{"first":915,"second":241,"amount":-4},{"first":915,"second":962,"amount":-4},{"first":915,"second":949,"amount":-5},{"first":915,"second":961,"amount":-6},{"first":915,"second":964,"amount":-4},{"first":915,"second":965,"amount":-4},{"first":915,"second":953,"amount":-6},{"first":915,"second":959,"amount":-4},{"first":915,"second":960,"amount":-5},{"first":915,"second":945,"amount":-4},{"first":915,"second":963,"amount":-4},{"first":915,"second":948,"amount":-2},{"first":915,"second":966,"amount":-6},{"first":915,"second":947,"amount":-3},{"first":915,"second":951,"amount":-4},{"first":915,"second":968,"amount":-5},{"first":915,"second":969,"amount":-6},{"first":915,"second":957,"amount":-3},{"first":915,"second":933,"amount":0},{"first":915,"second":920,"amount":-1},{"first":915,"second":927,"amount":-1},{"first":915,"second":913,"amount":-4},{"first":915,"second":916,"amount":-4},{"first":915,"second":934,"amount":-3},{"first":915,"second":923,"amount":-4},{"first":915,"second":229,"amount":-4},{"first":915,"second":197,"amount":-4},{"first":915,"second":230,"amount":-4},{"first":915,"second":198,"amount":-7},{"first":915,"second":248,"amount":-4},{"first":915,"second":216,"amount":-1},{"first":919,"second":65,"amount":0},{"first":919,"second":84,"amount":-1},{"first":919,"second":89,"amount":-1},{"first":919,"second":88,"amount":0},{"first":919,"second":1040,"amount":0},{"first":919,"second":1044,"amount":0},{"first":919,"second":1076,"amount":0},{"first":919,"second":1046,"amount":0},{"first":919,"second":1051,"amount":0},{"first":919,"second":1083,"amount":0},{"first":919,"second":1058,"amount":-1},{"first":919,"second":1061,"amount":0},{"first":919,"second":1063,"amount":-1},{"first":919,"second":1095,"amount":-1},{"first":919,"second":196,"amount":0},{"first":919,"second":933,"amount":-1},{"first":919,"second":913,"amount":0},{"first":919,"second":916,"amount":0},{"first":919,"second":923,"amount":0},{"first":919,"second":935,"amount":0},{"first":919,"second":197,"amount":0},{"first":926,"second":79,"amount":0},{"first":926,"second":81,"amount":0},{"first":926,"second":71,"amount":0},{"first":926,"second":67,"amount":0},{"first":926,"second":1054,"amount":0},{"first":926,"second":1057,"amount":0},{"first":926,"second":214,"amount":0},{"first":926,"second":955,"amount":0},{"first":926,"second":920,"amount":0},{"first":926,"second":927,"amount":0},{"first":926,"second":216,"amount":0},{"first":922,"second":101,"amount":-1},{"first":922,"second":121,"amount":-1},{"first":922,"second":117,"amount":0},{"first":922,"second":111,"amount":-1},{"first":922,"second":112,"amount":0},{"first":922,"second":113,"amount":-1},{"first":922,"second":100,"amount":-1},{"first":922,"second":103,"amount":-1},{"first":922,"second":109,"amount":0},{"first":922,"second":119,"amount":-1},{"first":922,"second":99,"amount":-1},{"first":922,"second":118,"amount":-1},{"first":922,"second":110,"amount":0},{"first":922,"second":79,"amount":-1},{"first":922,"second":81,"amount":-1},{"first":922,"second":71,"amount":-1},{"first":922,"second":67,"amount":-1},{"first":922,"second":45,"amount":-1},{"first":922,"second":8211,"amount":-1},{"first":922,"second":1073,"amount":-1},{"first":922,"second":1075,"amount":0},{"first":922,"second":1077,"amount":-1},{"first":922,"second":1105,"amount":-1},{"first":922,"second":1080,"amount":0},{"first":922,"second":1081,"amount":0},{"first":922,"second":1082,"amount":0},{"first":922,"second":1084,"amount":0},{"first":922,"second":1085,"amount":0},{"first":922,"second":1054,"amount":-1},{"first":922,"second":1086,"amount":-1},{"first":922,"second":1087,"amount":0},{"first":922,"second":1088,"amount":0},{"first":922,"second":1057,"amount":-1},{"first":922,"second":1089,"amount":-1},{"first":922,"second":1090,"amount":-1},{"first":922,"second":1091,"amount":-1},{"first":922,"second":1092,"amount":-1},{"first":922,"second":1094,"amount":0},{"first":922,"second":1095,"amount":-2},{"first":922,"second":1096,"amount":0},{"first":922,"second":1097,"amount":0},{"first":922,"second":1100,"amount":0},{"first":922,"second":1102,"amount":0},{"first":922,"second":252,"amount":0},{"first":922,"second":246,"amount":-1},{"first":922,"second":214,"amount":-1},{"first":922,"second":241,"amount":0},{"first":922,"second":962,"amount":-1},{"first":922,"second":964,"amount":-2},{"first":922,"second":965,"amount":0},{"first":922,"second":959,"amount":-1},{"first":922,"second":945,"amount":-1},{"first":922,"second":963,"amount":-1},{"first":922,"second":947,"amount":-1},{"first":922,"second":951,"amount":0},{"first":922,"second":957,"amount":-1},{"first":922,"second":920,"amount":-1},{"first":922,"second":927,"amount":-1},{"first":922,"second":934,"amount":-1},{"first":922,"second":216,"amount":-1},{"first":923,"second":122,"amount":0},{"first":923,"second":116,"amount":0},{"first":923,"second":121,"amount":-1},{"first":923,"second":117,"amount":0},{"first":923,"second":111,"amount":0},{"first":923,"second":119,"amount":-1},{"first":923,"second":118,"amount":-1},{"first":923,"second":84,"amount":-3},{"first":923,"second":89,"amount":-2},{"first":923,"second":85,"amount":0},{"first":923,"second":79,"amount":0},{"first":923,"second":81,"amount":0},{"first":923,"second":71,"amount":0},{"first":923,"second":87,"amount":-1},{"first":923,"second":67,"amount":0},{"first":923,"second":86,"amount":-2},{"first":923,"second":63,"amount":-1},{"first":923,"second":34,"amount":-2},{"first":923,"second":39,"amount":-2},{"first":923,"second":1044,"amount":0},{"first":923,"second":1051,"amount":0},{"first":923,"second":1083,"amount":0},{"first":923,"second":1054,"amount":0},{"first":923,"second":1086,"amount":0},{"first":923,"second":1057,"amount":0},{"first":923,"second":1058,"amount":-3},{"first":923,"second":1090,"amount":-1},{"first":923,"second":1091,"amount":-1},{"first":923,"second":1063,"amount":-1},{"first":923,"second":1095,"amount":-2},{"first":923,"second":1068,"amount":-1},{"first":923,"second":252,"amount":0},{"first":923,"second":220,"amount":0},{"first":923,"second":246,"amount":0},{"first":923,"second":214,"amount":0},{"first":923,"second":964,"amount":-1},{"first":923,"second":965,"amount":0},{"first":923,"second":959,"amount":0},{"first":923,"second":947,"amount":-1},{"first":923,"second":955,"amount":0},{"first":923,"second":957,"amount":-1},{"first":923,"second":933,"amount":-2},{"first":923,"second":920,"amount":0},{"first":923,"second":927,"amount":0},{"first":923,"second":934,"amount":-1},{"first":923,"second":936,"amount":-1},{"first":923,"second":216,"amount":0},{"first":918,"second":101,"amount":0},{"first":918,"second":121,"amount":-1},{"first":918,"second":117,"amount":0},{"first":918,"second":111,"amount":0},{"first":918,"second":113,"amount":0},{"first":918,"second":100,"amount":0},{"first":918,"second":103,"amount":0},{"first":918,"second":119,"amount":-1},{"first":918,"second":99,"amount":0},{"first":918,"second":118,"amount":-1},{"first":918,"second":65,"amount":0},{"first":918,"second":79,"amount":-1},{"first":918,"second":81,"amount":-1},{"first":918,"second":71,"amount":-1},{"first":918,"second":67,"amount":-1},{"first":918,"second":1040,"amount":0},{"first":918,"second":1077,"amount":0},{"first":918,"second":1105,"amount":0},{"first":918,"second":1054,"amount":-1},{"first":918,"second":1086,"amount":0},{"first":918,"second":1057,"amount":-1},{"first":918,"second":1089,"amount":0},{"first":918,"second":1091,"amount":-1},{"first":918,"second":1092,"amount":0},{"first":918,"second":252,"amount":0},{"first":918,"second":246,"amount":0},{"first":918,"second":214,"amount":-1},{"first":918,"second":196,"amount":0},{"first":918,"second":962,"amount":0},{"first":918,"second":965,"amount":0},{"first":918,"second":959,"amount":0},{"first":918,"second":945,"amount":0},{"first":918,"second":963,"amount":0},{"first":918,"second":947,"amount":-1},{"first":918,"second":968,"amount":-1},{"first":918,"second":957,"amount":-1},{"first":918,"second":920,"amount":-1},{"first":918,"second":927,"amount":-1},{"first":918,"second":913,"amount":0},{"first":918,"second":916,"amount":0},{"first":918,"second":934,"amount":-1},{"first":918,"second":923,"amount":0},{"first":918,"second":197,"amount":0},{"first":918,"second":216,"amount":-1},{"first":935,"second":101,"amount":-1},{"first":935,"second":121,"amount":-1},{"first":935,"second":117,"amount":0},{"first":935,"second":111,"amount":0},{"first":935,"second":113,"amount":-1},{"first":935,"second":100,"amount":-1},{"first":935,"second":103,"amount":-1},{"first":935,"second":99,"amount":-1},{"first":935,"second":118,"amount":-1},{"first":935,"second":79,"amount":-1},{"first":935,"second":81,"amount":-1},{"first":935,"second":71,"amount":-1},{"first":935,"second":67,"amount":-1},{"first":935,"second":86,"amount":0},{"first":935,"second":45,"amount":-1},{"first":935,"second":8211,"amount":-1},{"first":935,"second":1073,"amount":0},{"first":935,"second":1044,"amount":0},{"first":935,"second":1077,"amount":-1},{"first":935,"second":1105,"amount":-1},{"first":935,"second":1051,"amount":0},{"first":935,"second":1083,"amount":0},{"first":935,"second":1054,"amount":-1},{"first":935,"second":1086,"amount":0},{"first":935,"second":1057,"amount":-1},{"first":935,"second":1089,"amount":-1},{"first":935,"second":1090,"amount":-1},{"first":935,"second":1091,"amount":-1},{"first":935,"second":1092,"amount":-1},{"first":935,"second":1095,"amount":-1},{"first":935,"second":252,"amount":0},{"first":935,"second":246,"amount":0},{"first":935,"second":214,"amount":-1},{"first":935,"second":962,"amount":-1},{"first":935,"second":964,"amount":-1},{"first":935,"second":965,"amount":0},{"first":935,"second":952,"amount":0},{"first":935,"second":959,"amount":0},{"first":935,"second":945,"amount":-1},{"first":935,"second":963,"amount":-1},{"first":935,"second":948,"amount":0},{"first":935,"second":966,"amount":-1},{"first":935,"second":947,"amount":-1},{"first":935,"second":955,"amount":0},{"first":935,"second":968,"amount":-1},{"first":935,"second":969,"amount":0},{"first":935,"second":957,"amount":-1},{"first":935,"second":920,"amount":-1},{"first":935,"second":927,"amount":-1},{"first":935,"second":934,"amount":-1},{"first":935,"second":216,"amount":-1},{"first":936,"second":65,"amount":-1},{"first":936,"second":44,"amount":-5},{"first":936,"second":46,"amount":-5},{"first":936,"second":1040,"amount":-1},{"first":936,"second":196,"amount":-1},{"first":936,"second":961,"amount":0},{"first":936,"second":913,"amount":-1},{"first":936,"second":916,"amount":-1},{"first":936,"second":923,"amount":-1},{"first":936,"second":197,"amount":-1},{"first":914,"second":84,"amount":-1},{"first":914,"second":89,"amount":-1},{"first":914,"second":86,"amount":0},{"first":914,"second":1058,"amount":-1},{"first":914,"second":1059,"amount":0},{"first":914,"second":933,"amount":-1},{"first":925,"second":65,"amount":0},{"first":925,"second":84,"amount":-1},{"first":925,"second":89,"amount":-1},{"first":925,"second":88,"amount":0},{"first":925,"second":1040,"amount":0},{"first":925,"second":1044,"amount":0},{"first":925,"second":1076,"amount":0},{"first":925,"second":1046,"amount":0},{"first":925,"second":1051,"amount":0},{"first":925,"second":1083,"amount":0},{"first":925,"second":1058,"amount":-1},{"first":925,"second":1061,"amount":0},{"first":925,"second":1063,"amount":-1},{"first":925,"second":1095,"amount":-1},{"first":925,"second":196,"amount":0},{"first":925,"second":933,"amount":-1},{"first":925,"second":913,"amount":0},{"first":925,"second":916,"amount":0},{"first":925,"second":923,"amount":0},{"first":925,"second":935,"amount":0},{"first":925,"second":197,"amount":0},{"first":924,"second":65,"amount":0},{"first":924,"second":84,"amount":-1},{"first":924,"second":89,"amount":-1},{"first":924,"second":88,"amount":0},{"first":924,"second":1040,"amount":0},{"first":924,"second":1044,"amount":0},{"first":924,"second":1076,"amount":0},{"first":924,"second":1046,"amount":0},{"first":924,"second":1051,"amount":0},{"first":924,"second":1083,"amount":0},{"first":924,"second":1058,"amount":-1},{"first":924,"second":1061,"amount":0},{"first":924,"second":1063,"amount":-1},{"first":924,"second":1095,"amount":-1},{"first":924,"second":196,"amount":0},{"first":924,"second":933,"amount":-1},{"first":924,"second":913,"amount":0},{"first":924,"second":916,"amount":0},{"first":924,"second":923,"amount":0},{"first":924,"second":935,"amount":0},{"first":924,"second":197,"amount":0},{"first":229,"second":121,"amount":0},{"first":229,"second":118,"amount":0},{"first":229,"second":34,"amount":-1},{"first":229,"second":39,"amount":-1},{"first":229,"second":1090,"amount":0},{"first":229,"second":1091,"amount":0},{"first":229,"second":947,"amount":0},{"first":229,"second":957,"amount":0},{"first":197,"second":122,"amount":0},{"first":197,"second":116,"amount":0},{"first":197,"second":121,"amount":-1},{"first":197,"second":117,"amount":0},{"first":197,"second":111,"amount":0},{"first":197,"second":119,"amount":-1},{"first":197,"second":118,"amount":-1},{"first":197,"second":84,"amount":-3},{"first":197,"second":89,"amount":-2},{"first":197,"second":85,"amount":0},{"first":197,"second":79,"amount":0},{"first":197,"second":81,"amount":0},{"first":197,"second":71,"amount":0},{"first":197,"second":87,"amount":-1},{"first":197,"second":67,"amount":0},{"first":197,"second":86,"amount":-2},{"first":197,"second":63,"amount":-1},{"first":197,"second":34,"amount":-2},{"first":197,"second":39,"amount":-2},{"first":197,"second":1044,"amount":0},{"first":197,"second":1051,"amount":0},{"first":197,"second":1083,"amount":0},{"first":197,"second":1054,"amount":0},{"first":197,"second":1086,"amount":0},{"first":197,"second":1057,"amount":0},{"first":197,"second":1058,"amount":-3},{"first":197,"second":1090,"amount":-1},{"first":197,"second":1091,"amount":-1},{"first":197,"second":1063,"amount":-1},{"first":197,"second":1095,"amount":-2},{"first":197,"second":1068,"amount":-1},{"first":197,"second":252,"amount":0},{"first":197,"second":220,"amount":0},{"first":197,"second":246,"amount":0},{"first":197,"second":214,"amount":0},{"first":197,"second":964,"amount":-1},{"first":197,"second":965,"amount":0},{"first":197,"second":959,"amount":0},{"first":197,"second":947,"amount":-1},{"first":197,"second":955,"amount":0},{"first":197,"second":957,"amount":-1},{"first":197,"second":933,"amount":-2},{"first":197,"second":920,"amount":0},{"first":197,"second":927,"amount":0},{"first":197,"second":934,"amount":-1},{"first":197,"second":936,"amount":-1},{"first":197,"second":216,"amount":0}]}
\ No newline at end of file
diff --git a/packages/sdk/public/resource/fonts/roboto/regular.png b/packages/sdk/public/resource/fonts/roboto/regular.png
new file mode 100644
index 0000000..8754035
Binary files /dev/null and b/packages/sdk/public/resource/fonts/roboto/regular.png differ
diff --git a/packages/sdk/public/resource/shaders/water/caustics/fragment.glsl b/packages/sdk/public/resource/shaders/water/caustics/fragment.glsl
new file mode 100644
index 0000000..efe95de
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/caustics/fragment.glsl
@@ -0,0 +1,28 @@
+precision highp float;
+precision highp int;
+
+#include <utils>
+
+in vec3 oldPos;
+in vec3 newPos;
+in vec3 ray;
+
+out vec4 fragColor;
+
+void main() {
+  /* if the triangle gets smaller, it gets brighter, and vice versa */
+  float oldArea = length(dFdx(oldPos)) * length(dFdy(oldPos));
+  float newArea = length(dFdx(newPos)) * length(dFdy(newPos));
+  fragColor = vec4(oldArea / newArea * 0.2, 1.0, 0.0, 0.0);
+
+  vec3 refractedLight = refract(-light, vec3(0.0, 1.0, 0.0), IOR_AIR / IOR_WATER);
+
+  /* shadow for the rim of the pool */
+  vec2 t = intersectCube(
+    newPos,
+    -refractedLight,
+    vec3(-poolHalfSize.x, -poolHeight, -poolHalfSize.y),
+    vec3(poolHalfSize.x, poolHeight * 2.0, poolHalfSize.y)
+  );
+  fragColor.r *= 1.0 / (1.0 + exp(-200.0 / (1.0 + 10.0 * (t.y - t.x)) * (newPos.y - refractedLight.y * t.y - poolHeight * 2.0 / 12.0)));
+}
diff --git a/packages/sdk/public/resource/shaders/water/caustics/vertex.glsl b/packages/sdk/public/resource/shaders/water/caustics/vertex.glsl
new file mode 100644
index 0000000..c4c043b
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/caustics/vertex.glsl
@@ -0,0 +1,39 @@
+out vec3 oldPos;
+out vec3 newPos;
+out vec3 ray;
+in vec3 position;
+
+#include <utils>
+
+
+/* project the ray onto the plane */
+vec3 project(vec3 origin, vec3 ray, vec3 refractedLight) {
+  vec2 tcube = intersectCube(
+    origin,
+    ray,
+    vec3(-poolHalfSize.x, -poolHeight, -poolHalfSize.y),
+    vec3(poolHalfSize.x, poolHeight * 2.0, poolHalfSize.y)
+  );
+  origin += ray * tcube.y;
+  float tplane = (-origin.y - poolHeight) / refractedLight.y;
+
+  return origin + refractedLight * tplane;
+}
+
+
+void main() {
+  vec4 info = texture(water, position.xy * 0.5 + 0.5);
+  info.ba *= 0.5;
+  vec3 normal = vec3(info.b, sqrt(1.0 - dot(info.ba, info.ba)), info.a);
+
+  /* project the vertices along the refracted vertex ray */
+  vec3 refractedLight = refract(-light, vec3(0.0, 1.0, 0.0), IOR_AIR / IOR_WATER);
+  vec3 basePos = vec3(position.x * poolHalfSize.x, 0.0, position.y * poolHalfSize.y);
+  ray = refract(-light, normal, IOR_AIR / IOR_WATER);
+  oldPos = project(basePos, refractedLight, refractedLight);
+  newPos = project(basePos + vec3(0.0, info.r, 0.0), ray, refractedLight);
+
+  vec2 normalizedPos = vec2(newPos.x / poolHalfSize.x, newPos.z / poolHalfSize.y);
+  vec2 refractedOffset = vec2(refractedLight.x / poolHalfSize.x, refractedLight.z / poolHalfSize.y) / refractedLight.y;
+  gl_Position = vec4(0.75 * (normalizedPos + refractedOffset), 0.0, 1.0);
+}
diff --git a/packages/sdk/public/resource/shaders/water/cylinder_caustics/fragment.glsl b/packages/sdk/public/resource/shaders/water/cylinder_caustics/fragment.glsl
new file mode 100644
index 0000000..5ffadea
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/cylinder_caustics/fragment.glsl
@@ -0,0 +1,22 @@
+precision highp float;
+precision highp int;
+
+#include <utils>
+#include <cylinder_utils>
+
+in vec3 oldPos;
+in vec3 newPos;
+in vec3 ray;
+
+out vec4 fragColor;
+
+void main() {
+  float oldArea = length(dFdx(oldPos)) * length(dFdy(oldPos));
+  float newArea = length(dFdx(newPos)) * length(dFdy(newPos));
+  fragColor = vec4(oldArea / newArea * 0.2, 1.0, 0.0, 0.0);
+
+  vec3 refractedLight = refract(-light, vec3(0.0, 1.0, 0.0), IOR_AIR / IOR_WATER);
+
+  vec2 t = intersectCylinder(newPos, -refractedLight, poolRadius, -poolHeight, poolHeight * 2.0);
+  fragColor.r *= 1.0 / (1.0 + exp(-200.0 / (1.0 + 10.0 * (t.y - t.x)) * (newPos.y - refractedLight.y * t.y - poolHeight * 2.0 / 12.0)));
+}
diff --git a/packages/sdk/public/resource/shaders/water/cylinder_caustics/vertex.glsl b/packages/sdk/public/resource/shaders/water/cylinder_caustics/vertex.glsl
new file mode 100644
index 0000000..978dddb
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/cylinder_caustics/vertex.glsl
@@ -0,0 +1,42 @@
+out vec3 oldPos;
+out vec3 newPos;
+out vec3 ray;
+in vec3 position;
+
+#include <utils>
+#include <cylinder_utils>
+
+
+vec3 project(vec3 origin, vec3 ray, vec3 refractedLight) {
+  vec2 tcyl = intersectCylinder(origin, ray, poolRadius, -poolHeight, poolHeight * 2.0);
+  origin += ray * tcyl.y;
+  float tplane = (-origin.y - poolHeight) / refractedLight.y;
+
+  return origin + refractedLight * tplane;
+}
+
+
+void main() {
+  // Collapse vertices outside the unit circle to avoid degenerate caustic triangles
+  if (position.x * position.x + position.y * position.y > 1.0) {
+    oldPos = vec3(0.0);
+    newPos = vec3(0.0);
+    ray = vec3(0.0);
+    gl_Position = vec4(0.0);
+    return;
+  }
+
+  vec4 info = texture(water, position.xy * 0.5 + 0.5);
+  info.ba *= 0.5;
+  vec3 normal = vec3(info.b, sqrt(1.0 - dot(info.ba, info.ba)), info.a);
+
+  vec3 refractedLight = refract(-light, vec3(0.0, 1.0, 0.0), IOR_AIR / IOR_WATER);
+  vec3 basePos = vec3(position.x * poolRadius, 0.0, position.y * poolRadius);
+  ray = refract(-light, normal, IOR_AIR / IOR_WATER);
+  oldPos = project(basePos, refractedLight, refractedLight);
+  newPos = project(basePos + vec3(0.0, info.r, 0.0), ray, refractedLight);
+
+  vec2 normalizedPos = newPos.xz / poolRadius;
+  vec2 refractedOffset = (refractedLight.xz / poolRadius) / refractedLight.y;
+  gl_Position = vec4(0.75 * (normalizedPos + refractedOffset), 0.0, 1.0);
+}
diff --git a/packages/sdk/public/resource/shaders/water/cylinder_pool/fragment.glsl b/packages/sdk/public/resource/shaders/water/cylinder_pool/fragment.glsl
new file mode 100644
index 0000000..54235bb
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/cylinder_pool/fragment.glsl
@@ -0,0 +1,48 @@
+precision highp float;
+precision highp int;
+
+#include <utils>
+#include <cylinder_utils>
+
+uniform float wallOpacity;
+uniform float wallMode;
+uniform vec3 volumeColor;
+uniform sampler2D sceneTexture;
+uniform vec2 resolution;
+uniform float useSceneRefraction;
+uniform float surfaceTransmittance;
+uniform float normalStrength;
+uniform float refractionStrength;
+
+in vec3 pos;
+
+out vec4 fragColor;
+
+void main() {
+  vec3 baseColor = wallMode > 0.5 ? volumeColor : getCylinderWallColor(pos) * volumeColor;
+
+  vec4 info = texture(water, pos.xz * 0.5 + 0.5);
+  vec2 screenUV = gl_FragCoord.xy / resolution;
+  vec2 offset = info.ba * normalStrength * refractionStrength;
+
+  vec3 mixedColor = baseColor;
+  if (useSceneRefraction > 0.5) {
+    vec2 refractedUV = clamp(screenUV + offset, 0.0, 1.0);
+    vec3 sceneColor = texture(sceneTexture, refractedUV).rgb;
+    mixedColor = mix(baseColor, sceneColor, surfaceTransmittance);
+  }
+
+  float depth = 0.0;
+  if (pos.y < info.r) {
+    depth = clamp((info.r - pos.y) / max(poolHeight, 0.0001), 0.0, 1.0);
+    float atten = wallMode > 0.5 ? mix(0.95, 0.35, depth) : mix(0.98, 0.6, depth);
+    mixedColor *= atten;
+  }
+
+  float alpha = wallOpacity;
+  if (wallMode > 0.5 && pos.y < info.r) {
+    alpha = mix(wallOpacity * 0.6, min(1.0, wallOpacity + 0.5), depth);
+  }
+
+  fragColor = vec4(mixedColor, alpha);
+}
diff --git a/packages/sdk/public/resource/shaders/water/cylinder_utils.glsl b/packages/sdk/public/resource/shaders/water/cylinder_utils.glsl
new file mode 100644
index 0000000..0bee70e
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/cylinder_utils.glsl
@@ -0,0 +1,73 @@
+vec2 intersectCylinder(vec3 origin, vec3 ray, float radius, float yMin, float yMax) {
+  float a = ray.x * ray.x + ray.z * ray.z;
+  float b = 2.0 * (origin.x * ray.x + origin.z * ray.z);
+  float c = origin.x * origin.x + origin.z * origin.z - radius * radius;
+
+  float tNear = -1e10;
+  float tFar = 1e10;
+
+  if (a > 1e-6) {
+    float discriminant = b * b - 4.0 * a * c;
+    if (discriminant < 0.0) return vec2(1e10, -1e10);
+    float sqrtDisc = sqrt(discriminant);
+    tNear = (-b - sqrtDisc) / (2.0 * a);
+    tFar = (-b + sqrtDisc) / (2.0 * a);
+  }
+
+  if (abs(ray.y) > 1e-6) {
+    float tBottom = (yMin - origin.y) / ray.y;
+    float tTop = (yMax - origin.y) / ray.y;
+    float tCapNear = min(tBottom, tTop);
+    float tCapFar = max(tBottom, tTop);
+    tNear = max(tNear, tCapNear);
+    tFar = min(tFar, tCapFar);
+  } else {
+    if (origin.y < yMin || origin.y > yMax) return vec2(1e10, -1e10);
+  }
+
+  return vec2(tNear, tFar);
+}
+
+
+vec3 getCylinderWallColor(vec3 point) {
+  float scale = 0.5;
+
+  vec3 wallColor = tilesColor;
+  vec3 normal;
+  float r = length(point.xz);
+
+  float edge = poolRadius - 0.001;
+
+  if (r > edge) {
+    float angle = atan(point.z, point.x);
+    vec2 uv = vec2(angle / 3.14159 * 0.5 + 0.5, point.y / poolHeight * 0.5 + 0.5);
+    if (useTiles > 0.5) {
+      wallColor = texture(tiles, uv).rgb;
+    }
+    normal = vec3(-point.x / r, 0.0, -point.z / r);
+  } else {
+    vec2 uv = point.xz / (poolRadius * 2.0) + 0.5;
+    if (useTiles > 0.5) {
+      wallColor = texture(tiles, uv).rgb;
+    }
+    normal = vec3(0.0, 1.0, 0.0);
+  }
+
+  scale /= length(point);
+
+  vec3 refractedLight = -refract(-light, vec3(0.0, 1.0, 0.0), IOR_AIR / IOR_WATER);
+  float diffuse = max(0.0, dot(refractedLight, normal));
+  vec2 waterCoord = point.xz / (poolRadius * 2.0) + 0.5;
+  vec4 info = texture(water, waterCoord);
+  if (point.y < info.r) {
+    vec2 causticCoord = (point.xz - point.y * refractedLight.xz / refractedLight.y) / (poolRadius * 2.0);
+    vec4 caustic = texture(causticTex, 0.75 * causticCoord + 0.5);
+    scale += diffuse * caustic.r * 2.0 * caustic.g;
+  } else {
+    vec2 t = intersectCylinder(point, refractedLight, poolRadius, -poolHeight, poolHeight * 2.0);
+    diffuse *= 1.0 / (1.0 + exp(-200.0 / (1.0 + 10.0 * (t.y - t.x)) * (point.y + refractedLight.y * t.y - poolHeight * 2.0 / 12.0)));
+    scale += diffuse * 0.5;
+  }
+
+  return wallColor * scale;
+}
diff --git a/packages/sdk/public/resource/shaders/water/cylinder_water/fragment.glsl b/packages/sdk/public/resource/shaders/water/cylinder_water/fragment.glsl
new file mode 100644
index 0000000..465788e
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/cylinder_water/fragment.glsl
@@ -0,0 +1,114 @@
+precision highp float;
+precision highp int;
+
+#include <utils>
+#include <cylinder_utils>
+
+uniform float underwater;
+uniform samplerCube sky;
+uniform float useSky;
+uniform sampler2D sceneTexture;
+uniform vec2 resolution;
+uniform float useSceneRefraction;
+uniform float surfaceTransmittance;
+uniform float normalStrength;
+uniform float refractionStrength;
+uniform float hasWall;
+uniform vec3 surfaceColor;
+uniform vec3 volumeColor;
+
+in vec3 eye;
+in vec3 pos;
+
+out vec4 fragColor;
+
+
+vec3 getSurfaceRayColor(vec3 origin, vec3 ray, vec3 waterColor) {
+  vec3 color;
+
+  if (ray.y < 0.0) {
+    vec2 t = intersectCylinder(origin, ray, poolRadius, -poolHeight, poolHeight * 2.0);
+    color = getCylinderWallColor(origin + ray * t.y);
+  } else {
+    vec2 t = intersectCylinder(origin, ray, poolRadius, -poolHeight, poolHeight * 2.0);
+    vec3 hit = origin + ray * t.y;
+    if (hit.y < poolHeight * 7.0 / 12.0) {
+      color = getCylinderWallColor(hit);
+    } else {
+      if (useSky > 0.5) {
+        color = texture(sky, ray).rgb;
+        color += 0.01 * vec3(pow(max(0.0, dot(light, ray)), 20.0)) * vec3(10.0, 8.0, 6.0);
+      } else {
+        color = waterColor;
+      }
+    }
+  }
+
+  if (ray.y < 0.0) color *= waterColor;
+
+  return color;
+}
+
+
+void main() {
+  if (pos.x * pos.x + pos.z * pos.z > poolRadius * poolRadius) discard;
+
+  vec2 coord = pos.xz / (poolRadius * 2.0) + 0.5;
+  vec4 info = texture(water, coord);
+
+  for (int i = 0; i < 5; i++) {
+    coord += info.ba * 0.005;
+    info = texture(water, coord);
+  }
+
+  vec2 normalXY = info.ba * normalStrength;
+  vec3 normal = vec3(normalXY.x, sqrt(max(0.0, 1.0 - dot(normalXY, normalXY))), normalXY.y);
+  vec3 incomingRay = normalize(pos - eye);
+  vec3 surfaceTint = surfaceColor;
+  vec3 volumeTint = volumeColor;
+
+  if (underwater == 1.) {
+    normal = -normal;
+    vec3 reflectedRay = reflect(incomingRay, normal);
+    vec3 refractedRay = refract(incomingRay, normal, IOR_WATER / IOR_AIR);
+    float fresnel = mix(0.5, 1.0, pow(1.0 - dot(normal, -incomingRay), 3.0));
+
+    vec3 reflectedColor = getSurfaceRayColor(pos, reflectedRay, volumeTint);
+
+    vec3 refractedColor = getSurfaceRayColor(pos, refractedRay, vec3(1.0)) * vec3(0.8, 1.0, 1.1);
+    if (useSceneRefraction > 0.5) {
+      vec2 screenUV = gl_FragCoord.xy / resolution;
+      vec2 refractedUV = clamp(screenUV + normal.xz * refractionStrength, 0.0, 1.0);
+      vec3 sceneColor = texture(sceneTexture, refractedUV).rgb;
+      // 有墙体时降低屏幕空间折射占比，避免水面过于“薄”
+      float mixFactor = surfaceTransmittance;
+      if (hasWall > 0.5) {
+        mixFactor *= 0.6;
+      }
+      refractedColor = mix(refractedColor, sceneColor, mixFactor);
+    }
+
+    fragColor = vec4(mix(reflectedColor, refractedColor, (1.0 - fresnel) * length(refractedRay)), 1.0);
+  } else {
+    vec3 reflectedRay = reflect(incomingRay, normal);
+    vec3 refractedRay = refract(incomingRay, normal, IOR_AIR / IOR_WATER);
+    float fresnel = mix(0.25, 1.0, pow(1.0 - dot(normal, -incomingRay), 3.0));
+
+    vec3 reflectedColor = getSurfaceRayColor(pos, reflectedRay, surfaceTint);
+
+    vec3 refractedColor = getSurfaceRayColor(pos, refractedRay, surfaceTint);
+    if (useSceneRefraction > 0.5) {
+      vec2 screenUV = gl_FragCoord.xy / resolution;
+      vec2 refractedUV = clamp(screenUV + normal.xz * refractionStrength, 0.0, 1.0);
+      vec3 sceneColor = texture(sceneTexture, refractedUV).rgb;
+      // 有墙体时降低屏幕空间折射占比，避免水面过于“薄”
+      float mixFactor = surfaceTransmittance;
+      if (hasWall > 0.5) {
+        mixFactor *= 0.6;
+      }
+      refractedColor = mix(refractedColor, sceneColor, mixFactor);
+    }
+
+    fragColor = vec4(mix(refractedColor, reflectedColor, fresnel), 1.0);
+  }
+}
diff --git a/packages/sdk/public/resource/shaders/water/debug/fragment.glsl b/packages/sdk/public/resource/shaders/water/debug/fragment.glsl
new file mode 100644
index 0000000..dc03426
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/debug/fragment.glsl
@@ -0,0 +1,13 @@
+precision highp float;
+precision highp int;
+
+uniform sampler2D tInput;
+in vec2 coord;
+
+out vec4 fragColor;
+
+void main() {
+  vec4 color = texture(tInput, coord);
+
+  fragColor = vec4(color.x, color.y, color.z, 1.);
+}
diff --git a/packages/sdk/public/resource/shaders/water/debug/vertex.glsl b/packages/sdk/public/resource/shaders/water/debug/vertex.glsl
new file mode 100644
index 0000000..831cfc4
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/debug/vertex.glsl
@@ -0,0 +1,10 @@
+uniform sampler2D tInput;
+in vec3 position;
+out vec2 coord;
+
+
+void main() {
+  coord = position.xy + 0.5;
+
+  gl_Position = vec4(position.xy * 2., 0., 1.);
+}
diff --git a/packages/sdk/public/resource/shaders/water/pool/fragment.glsl b/packages/sdk/public/resource/shaders/water/pool/fragment.glsl
new file mode 100644
index 0000000..2ab4d12
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/pool/fragment.glsl
@@ -0,0 +1,47 @@
+precision highp float;
+precision highp int;
+
+#include <utils>
+
+uniform float wallOpacity;
+uniform float wallMode;
+uniform vec3 volumeColor;
+uniform sampler2D sceneTexture;
+uniform vec2 resolution;
+uniform float useSceneRefraction;
+uniform float surfaceTransmittance;
+uniform float normalStrength;
+uniform float refractionStrength;
+
+in vec3 pos;
+
+out vec4 fragColor;
+
+void main() {
+  vec3 baseColor = wallMode > 0.5 ? volumeColor : getWallColor(pos) * volumeColor;
+
+  vec4 info = texture(water, pos.xz * 0.5 + 0.5);
+  vec2 screenUV = gl_FragCoord.xy / resolution;
+  vec2 offset = info.ba * normalStrength * refractionStrength;
+
+  vec3 mixedColor = baseColor;
+  if (useSceneRefraction > 0.5) {
+    vec2 refractedUV = clamp(screenUV + offset, 0.0, 1.0);
+    vec3 sceneColor = texture(sceneTexture, refractedUV).rgb;
+    mixedColor = mix(baseColor, sceneColor, surfaceTransmittance);
+  }
+
+  float depth = 0.0;
+  if (pos.y < info.r) {
+    depth = clamp((info.r - pos.y) / max(poolHeight, 0.0001), 0.0, 1.0);
+    float atten = wallMode > 0.5 ? mix(0.95, 0.35, depth) : mix(0.98, 0.6, depth);
+    mixedColor *= atten;
+  }
+
+  float alpha = wallOpacity;
+  if (wallMode > 0.5 && pos.y < info.r) {
+    alpha = mix(wallOpacity * 0.6, min(1.0, wallOpacity + 0.5), depth);
+  }
+
+  fragColor = vec4(mixedColor, alpha);
+}
diff --git a/packages/sdk/public/resource/shaders/water/pool/vertex.glsl b/packages/sdk/public/resource/shaders/water/pool/vertex.glsl
new file mode 100644
index 0000000..3146bac
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/pool/vertex.glsl
@@ -0,0 +1,19 @@
+#include <utils>
+
+uniform mat4 projectionMatrix;
+uniform mat4 modelViewMatrix;
+
+in vec3 position;
+
+out vec3 pos;
+
+
+void main() {
+  pos = position.xyz;
+  pos.x *= poolHalfSize.x;
+  pos.z *= poolHalfSize.y;
+  // 墙体高度与水面齐平：y ∈ [-1, 1] 映射到 [-poolHeight, 0]
+  pos.y = ((1.0 - pos.y) * 0.5 - 1.0) * poolHeight;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+}
diff --git a/packages/sdk/public/resource/shaders/water/simulation/drop_fragment.glsl b/packages/sdk/public/resource/shaders/water/simulation/drop_fragment.glsl
new file mode 100644
index 0000000..05063c7
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/simulation/drop_fragment.glsl
@@ -0,0 +1,23 @@
+precision highp float;
+precision highp int;
+
+const float PI = 3.141592653589793;
+uniform sampler2D tInput;
+uniform vec2 center;
+uniform float radius;
+uniform float strength;
+in vec2 coord;
+
+out vec4 fragColor;
+
+void main() {
+  /* Get vertex info */
+  vec4 info = texture(tInput, coord);
+
+  /* Add the drop to the height */
+  float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);
+  drop = 0.5 - cos(drop * PI) * 0.5;
+  info.r += drop * strength;
+
+  fragColor = info;
+}
diff --git a/packages/sdk/public/resource/shaders/water/simulation/normal_fragment.glsl b/packages/sdk/public/resource/shaders/water/simulation/normal_fragment.glsl
new file mode 100644
index 0000000..bc27217
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/simulation/normal_fragment.glsl
@@ -0,0 +1,20 @@
+precision highp float;
+precision highp int;
+
+uniform sampler2D tInput;
+uniform vec2 delta;
+in vec2 coord;
+
+out vec4 fragColor;
+
+void main() {
+  /* get vertex info */
+  vec4 info = texture(tInput, coord);
+
+  /* update the normal */
+  vec3 dx = vec3(delta.x, texture(tInput, vec2(coord.x + delta.x, coord.y)).r - info.r, 0.0);
+  vec3 dy = vec3(0.0, texture(tInput, vec2(coord.x, coord.y + delta.y)).r - info.r, delta.y);
+  info.ba = normalize(cross(dy, dx)).xz;
+
+  fragColor = info;
+}
diff --git a/packages/sdk/public/resource/shaders/water/simulation/update_fragment.glsl b/packages/sdk/public/resource/shaders/water/simulation/update_fragment.glsl
new file mode 100644
index 0000000..304cfc5
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/simulation/update_fragment.glsl
@@ -0,0 +1,34 @@
+precision highp float;
+precision highp int;
+
+uniform sampler2D tInput;
+uniform vec2 delta;
+in vec2 coord;
+
+out vec4 fragColor;
+
+void main() {
+  /* get vertex info */
+  vec4 info = texture(tInput, coord);
+
+  /* calculate average neighbor height */
+  vec2 dx = vec2(delta.x, 0.0);
+  vec2 dy = vec2(0.0, delta.y);
+  float average = (
+    texture(tInput, coord - dx).r +
+    texture(tInput, coord - dy).r +
+    texture(tInput, coord + dx).r +
+    texture(tInput, coord + dy).r
+  ) * 0.25;
+
+  /* change the velocity to move toward the average */
+  info.g += (average - info.r) * 2.0;
+
+  /* attenuate the velocity a little so waves do not last forever */
+  info.g *= 0.995;
+
+  /* move the vertex along the velocity */
+  info.r += info.g;
+
+  fragColor = info;
+}
diff --git a/packages/sdk/public/resource/shaders/water/simulation/vertex.glsl b/packages/sdk/public/resource/shaders/water/simulation/vertex.glsl
new file mode 100644
index 0000000..822a519
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/simulation/vertex.glsl
@@ -0,0 +1,9 @@
+in vec3 position;
+out vec2 coord;
+
+
+void main() {
+  coord = position.xy * 0.5 + 0.5;
+
+  gl_Position = vec4(position.xyz, 1.0);
+}
diff --git a/packages/sdk/public/resource/shaders/water/utils.glsl b/packages/sdk/public/resource/shaders/water/utils.glsl
new file mode 100644
index 0000000..24f4d14
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/utils.glsl
@@ -0,0 +1,87 @@
+const float IOR_AIR = 1.0;
+const float IOR_WATER = 1.333;
+
+const vec3 abovewaterColor = vec3(0.25, 1.0, 1.25);
+const vec3 underwaterColor = vec3(0.4, 0.9, 1.0);
+
+uniform float poolHeight;
+uniform vec2 poolHalfSize;
+uniform float poolRadius;
+
+uniform vec3 light;
+uniform sampler2D tiles;
+uniform sampler2D causticTex;
+uniform sampler2D water;
+uniform float useTiles;
+uniform vec3 tilesColor;
+
+
+vec2 intersectCube(vec3 origin, vec3 ray, vec3 cubeMin, vec3 cubeMax) {
+  vec3 tMin = (cubeMin - origin) / ray;
+  vec3 tMax = (cubeMax - origin) / ray;
+  vec3 t1 = min(tMin, tMax);
+  vec3 t2 = max(tMin, tMax);
+  float tNear = max(max(t1.x, t1.y), t1.z);
+  float tFar = min(min(t2.x, t2.y), t2.z);
+  return vec2(tNear, tFar);
+}
+
+
+vec3 getWallColor(vec3 point) {
+  float scale = 0.5;
+
+  vec3 wallColor = tilesColor;
+  vec3 normal;
+  float edgeX = poolHalfSize.x - 0.001;
+  float edgeZ = poolHalfSize.y - 0.001;
+
+  if (abs(point.x) > edgeX) {
+    vec2 uv = vec2(point.y / poolHeight, point.z / poolHalfSize.y);
+    if (useTiles > 0.5) {
+      wallColor = texture(tiles, uv * 0.5 + vec2(1.0, 0.5)).rgb;
+    }
+    normal = vec3(-sign(point.x), 0.0, 0.0);
+  } else if (abs(point.z) > edgeZ) {
+    vec2 uv = vec2(point.y / poolHeight, point.x / poolHalfSize.x);
+    if (useTiles > 0.5) {
+      wallColor = texture(tiles, uv * 0.5 + vec2(1.0, 0.5)).rgb;
+    }
+    normal = vec3(0.0, 0.0, -sign(point.z));
+  } else {
+    vec2 uv = vec2(point.x / poolHalfSize.x, point.z / poolHalfSize.y);
+    if (useTiles > 0.5) {
+      wallColor = texture(tiles, uv * 0.5 + 0.5).rgb;
+    }
+    normal = vec3(0.0, 1.0, 0.0);
+  }
+
+  scale /= length(point); /* pool ambient occlusion */
+
+  /* caustics */
+  vec3 refractedLight = -refract(-light, vec3(0.0, 1.0, 0.0), IOR_AIR / IOR_WATER);
+  float diffuse = max(0.0, dot(refractedLight, normal));
+  vec2 waterCoord = vec2(
+    point.x / (poolHalfSize.x * 2.0) + 0.5,
+    point.z / (poolHalfSize.y * 2.0) + 0.5
+  );
+  vec4 info = texture(water, waterCoord);
+  if (point.y < info.r) {
+    vec2 poolScale = poolHalfSize * 2.0;
+    vec2 causticCoord = (point.xz - point.y * refractedLight.xz / refractedLight.y) / poolScale;
+    vec4 caustic = texture(causticTex, 0.75 * causticCoord + 0.5);
+    scale += diffuse * caustic.r * 2.0 * caustic.g;
+  } else {
+    /* shadow for the rim of the pool */
+    vec2 t = intersectCube(
+      point,
+      refractedLight,
+      vec3(-poolHalfSize.x, -poolHeight, -poolHalfSize.y),
+      vec3(poolHalfSize.x, poolHeight * 2.0, poolHalfSize.y)
+    );
+    diffuse *= 1.0 / (1.0 + exp(-200.0 / (1.0 + 10.0 * (t.y - t.x)) * (point.y + refractedLight.y * t.y - poolHeight * 2.0 / 12.0)));
+
+    scale += diffuse * 0.5;
+  }
+
+  return wallColor * scale;
+}
diff --git a/packages/sdk/public/resource/shaders/water/water/fragment.glsl b/packages/sdk/public/resource/shaders/water/water/fragment.glsl
new file mode 100644
index 0000000..8fc0547
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/water/fragment.glsl
@@ -0,0 +1,111 @@
+precision highp float;
+precision highp int;
+
+#include <utils>
+
+uniform float underwater;
+uniform samplerCube sky;
+uniform float useSky;
+uniform float normalStrength;
+uniform sampler2D sceneTexture;
+uniform vec2 resolution;
+uniform float useSceneRefraction;
+uniform float surfaceTransmittance;
+uniform float refractionStrength;
+uniform float hasWall;
+uniform vec3 surfaceColor;
+uniform vec3 volumeColor;
+
+in vec3 eye;
+in vec3 pos;
+
+out vec4 fragColor;
+
+vec3 getSurfaceRayColor(vec3 origin, vec3 ray, vec3 waterColor) {
+  vec3 color;
+
+  if (ray.y < 0.0) {
+    vec2 t = intersectCube(
+      origin,
+      ray,
+      vec3(-poolHalfSize.x, -poolHeight, -poolHalfSize.y),
+      vec3(poolHalfSize.x, poolHeight * 2.0, poolHalfSize.y)
+    );
+    color = getWallColor(origin + ray * t.y);
+  } else {
+    vec2 t = intersectCube(
+      origin,
+      ray,
+      vec3(-poolHalfSize.x, -poolHeight, -poolHalfSize.y),
+      vec3(poolHalfSize.x, poolHeight * 2.0, poolHalfSize.y)
+    );
+    vec3 hit = origin + ray * t.y;
+    if (hit.y < poolHeight * 7.0 / 12.0) {
+      color = getWallColor(hit);
+    } else {
+      if (useSky > 0.5) {
+        color = texture(sky, ray).rgb;
+        color += 0.01 * vec3(pow(max(0.0, dot(light, ray)), 20.0)) * vec3(10.0, 8.0, 6.0);
+      } else {
+        color = waterColor;
+      }
+    }
+  }
+
+  if (ray.y < 0.0) color *= waterColor;
+
+  return color;
+}
+
+
+void main() {
+  vec2 coord = vec2(
+    pos.x / (poolHalfSize.x * 2.0) + 0.5,
+    pos.z / (poolHalfSize.y * 2.0) + 0.5
+  );
+  vec4 info = texture(water, coord);
+
+  /* make water look more "peaked" */
+  for (int i = 0; i < 5; i++) {
+    coord += info.ba * 0.005;
+    info = texture(water, coord);
+  }
+
+  vec2 normalXY = info.ba * normalStrength;
+  vec3 normal = vec3(normalXY.x, sqrt(max(0.0, 1.0 - dot(normalXY, normalXY))), normalXY.y);
+  vec3 incomingRay = normalize(pos - eye);
+  vec3 surfaceTint = surfaceColor;
+  vec3 volumeTint = volumeColor;
+
+  if (underwater == 1.) {
+    normal = -normal;
+    vec3 reflectedRay = reflect(incomingRay, normal);
+    vec3 refractedRay = refract(incomingRay, normal, IOR_WATER / IOR_AIR);
+    float fresnel = mix(0.5, 1.0, pow(1.0 - dot(normal, -incomingRay), 3.0));
+
+    vec3 reflectedColor = getSurfaceRayColor(pos, reflectedRay, volumeTint);
+    vec3 refractedColor = getSurfaceRayColor(pos, refractedRay, vec3(1.0)) * vec3(0.8, 1.0, 1.1);
+
+    fragColor = vec4(mix(reflectedColor, refractedColor, (1.0 - fresnel) * length(refractedRay)), 1.0);
+  } else {
+    vec3 reflectedRay = reflect(incomingRay, normal);
+    vec3 refractedRay = refract(incomingRay, normal, IOR_AIR / IOR_WATER);
+    float fresnel = mix(0.25, 1.0, pow(1.0 - dot(normal, -incomingRay), 3.0));
+
+    vec3 reflectedColor = getSurfaceRayColor(pos, reflectedRay, surfaceTint);
+    vec3 refractedColor = getSurfaceRayColor(pos, refractedRay, surfaceTint);
+    if (useSceneRefraction > 0.5) {
+      vec2 screenUV = gl_FragCoord.xy / resolution;
+      vec2 refractedUV = clamp(screenUV + normal.xz * refractionStrength, 0.0, 1.0);
+      vec3 sceneColor = texture(sceneTexture, refractedUV).rgb;
+      // 有墙体时降低屏幕空间折射占比，避免水面过于“薄”
+      float mixFactor = surfaceTransmittance;
+      if (hasWall > 0.5) {
+        mixFactor *= 0.6;
+      }
+      refractedColor = mix(refractedColor, sceneColor, mixFactor);
+    }
+
+    fragColor = vec4(mix(refractedColor, reflectedColor, fresnel), 1.0);
+  }
+}
diff --git a/packages/sdk/public/resource/shaders/water/water/vertex.glsl b/packages/sdk/public/resource/shaders/water/water/vertex.glsl
new file mode 100644
index 0000000..a04878a
--- /dev/null
+++ b/packages/sdk/public/resource/shaders/water/water/vertex.glsl
@@ -0,0 +1,27 @@
+uniform mat4 projectionMatrix;
+uniform mat4 modelViewMatrix;
+uniform sampler2D water;
+uniform vec2 poolHalfSize;
+
+in vec3 position;
+
+out vec3 eye;
+out vec3 pos;
+
+
+void main() {
+  vec4 info = texture(water, position.xy * 0.5 + 0.5);
+  vec2 scaled = position.xy * poolHalfSize;
+  pos = vec3(scaled.x, info.r, scaled.y);
+
+  vec3 axis_x = vec3(modelViewMatrix[0].x, modelViewMatrix[0].y, modelViewMatrix[0].z);
+  vec3 axis_y = vec3(modelViewMatrix[1].x, modelViewMatrix[1].y, modelViewMatrix[1].z);
+  vec3 axis_z = vec3(modelViewMatrix[2].x, modelViewMatrix[2].y, modelViewMatrix[2].z);
+  vec3 offset = vec3(modelViewMatrix[3].x, modelViewMatrix[3].y, modelViewMatrix[3].z);
+
+  eye = vec3(dot(-offset, axis_x), dot(-offset, axis_y), dot(-offset, axis_z));
+  eye.x *= poolHalfSize.x;
+  eye.z *= poolHalfSize.y;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+}
diff --git a/packages/sdk/public/resource/textures/tiles.jpg b/packages/sdk/public/resource/textures/tiles.jpg
new file mode 100644
index 0000000..be94ab6
Binary files /dev/null and b/packages/sdk/public/resource/textures/tiles.jpg differ
diff --git a/packages/sdk/types/heatmap.js-fix.d.ts b/packages/sdk/types/heatmap.js-fix.d.ts
new file mode 100644
index 0000000..129831b
--- /dev/null
+++ b/packages/sdk/types/heatmap.js-fix.d.ts
@@ -0,0 +1 @@
+declare module "heatmap.js-fix";
diff --git a/packages/sdk/types/objects/Heatmap.d.ts b/packages/sdk/types/objects/Heatmap.d.ts
new file mode 100644
index 0000000..64e8921
--- /dev/null
+++ b/packages/sdk/types/objects/Heatmap.d.ts
@@ -0,0 +1,56 @@
+declare namespace IHeatmap {
+    type Mode = "flat" | "height";
+
+    interface Point {
+        x: number;
+        y: number;
+        value: number;
+        radius?: number;
+    }
+
+    interface Data {
+        max?: number;
+        min?: number;
+        points: Point[];
+    }
+
+    interface Size {
+        width: number;
+        height: number;
+    }
+
+    interface HeightOptions {
+        scale: number;
+        segments: Size;
+    }
+
+    interface HeatmapConfig {
+        radius?: number;
+        blur?: number;
+        maxOpacity?: number;
+        minOpacity?: number;
+        gradient?: Record<string, string>;
+    }
+
+    type Side = "front" | "back" | "double";
+
+    interface Material {
+        transparent?: boolean;
+        opacity?: number;
+        depthWrite?: boolean;
+        depthTest?: boolean;
+        side?: Side;
+    }
+
+    interface options {
+        name: string;
+        position: number[];
+        mode: Mode;
+        size: Size;
+        resolution: Size;
+        material: Material;
+        height: HeightOptions;
+        heatmap: HeatmapConfig;
+        data: Data;
+    }
+}
diff --git a/packages/sdk/types/objects/Path.d.ts b/packages/sdk/types/objects/Path.d.ts
new file mode 100644
index 0000000..cf09334
--- /dev/null
+++ b/packages/sdk/types/objects/Path.d.ts
@@ -0,0 +1,61 @@
+declare namespace IPath {
+    type Mode = "path" | "tube";
+
+    type GeometrySide = "left" | "right" | "both";
+
+    type MaterialSide = "front" | "back" | "double";
+
+    interface Point {
+        x: number;
+        y: number;
+        z: number;
+    }
+
+    interface PathConfig {
+        width?: number;
+        arrow?: boolean;
+        progress?: number;
+        side?: GeometrySide;
+    }
+
+    interface TubeConfig {
+        radius?: number;
+        radialSegments?: number;
+        progress?: number;
+        startRad?: number;
+    }
+
+    interface FlowConfig {
+        enabled?: boolean;
+        speed?: number;
+        direction?: number[];
+    }
+
+    interface Material {
+        color?: string | number;
+        map?: string;
+        transparent?: boolean;
+        opacity?: number;
+        depthWrite?: boolean;
+        depthTest?: boolean;
+        side?: MaterialSide;
+        repeat?: number[];
+        offset?: number[];
+        rotation?: number;
+    }
+
+    interface options {
+        name: string;
+        position: number[];
+        mode: Mode;
+        points: Point[];
+        closed: boolean;
+        cornerRadius: number;
+        cornerSplit: number;
+        up?: number[] | null;
+        path: PathConfig;
+        tube: TubeConfig;
+        flow: FlowConfig;
+        material: Material;
+    }
+}
diff --git a/packages/sdk/types/objects/UIPanel.d.ts b/packages/sdk/types/objects/UIPanel.d.ts
new file mode 100644
index 0000000..31a0b53
--- /dev/null
+++ b/packages/sdk/types/objects/UIPanel.d.ts
@@ -0,0 +1,29 @@
+declare namespace IUIPanel {
+    type NodeType = "block" | "text" | "inline" | "inlineBlock";
+
+    type DropPosition = "before" | "after" | "inside";
+
+    interface Node {
+        id: string;
+        type: NodeType;
+        name?: string;
+        props?: Record<string, any>;
+        states?: Record<string, Record<string, any>>;
+        children?: Node[];
+    }
+
+    interface FontConfig {
+        family?: string;
+        texture?: string;
+        weight?: string | number;
+        style?: string;
+    }
+
+    interface options extends Node {
+        name: string;
+        position: number[];
+        rotation?: number[];
+        scale?: number[];
+        font?: FontConfig;
+    }
+}
diff --git a/packages/sdk/types/objects/WaterPool.d.ts b/packages/sdk/types/objects/WaterPool.d.ts
new file mode 100644
index 0000000..7a86e6d
--- /dev/null
+++ b/packages/sdk/types/objects/WaterPool.d.ts
@@ -0,0 +1,57 @@
+declare namespace IWaterPool {
+    interface Options {
+        name?: string;
+        // 水池类型，圆柱水池或者方形水池
+        type?: 'cylinder' | 'square';
+        // 光照方向
+        light?: [number, number, number];
+        // 水池壁纹理
+        tiles?: tiles;
+        // 环境贴图/天空盒
+        sky?: any;
+        // 水体控制. none = 无壁无水体（水面）, wall = 有壁, volume = 无壁有体积水体
+        wallMode?: 'none' | 'wall' | 'volume';
+        // 是否显示水壁。当传入wallMode时，此参数无效
+        wall?: boolean;
+        // 水池壁透明度
+        wallOpacity?: number;
+        // 开启屏幕空间折射，保证能看到水下物体。未配置时, 如果wallMode === 'volume'，则自动关闭（避免水面发黑）
+        useSceneRefraction?: number;
+        // 顶部水面透视强度（0~1），用于控制看到水下物体的程度
+        surfaceTransmittance?: number;
+        // 波纹法线强度与折射偏移强度，降低边缘过强的明暗对比
+        normalStrength?: number;
+        // 屏幕空间折射强度（0~1），控制水面折射效果的强弱
+        refractionStrength?: number;
+        // 体积水颜色，wallMode === 'volume'生效
+        volumeColor?: THREE.Color;
+        // 水面颜色，一般默认与体积色一致，保证水面/水体颜色接近
+        surfaceColor?: THREE.Color;
+        simulationSize?: number;
+        causticsSize?: number;
+        waterSegments?: number;
+        wallSegments?: number;
+        // 水面直径(type === 'cylinder')
+        diameter?: number;
+        // 水面宽度(type === 'square')
+        width?: number;
+        // 水面长度(type === 'square')
+        depth?: number;
+        // 水池高度
+        height?: number;
+        // 水波效果
+        disturbance?: {
+            enabled?: boolean;
+            mode?: 'drag' | 'uniform';
+            dropsPerStep?: number;
+            radiusMin?: number;
+            radiusMax?: number;
+            strengthMin?: number;
+            strengthMax?: number;
+            travelRadius?: number;
+            driftSpeed?: number;
+            jitter?: number;
+            spread?: number;
+        };
+    }
+}
\ No newline at end of file
diff --git a/packages/sdk/types/three.path.d.ts b/packages/sdk/types/three.path.d.ts
new file mode 100644
index 0000000..5f24fb5
--- /dev/null
+++ b/packages/sdk/types/three.path.d.ts
@@ -0,0 +1,34 @@
+declare module "three.path" {
+    import * as THREE from "three";
+
+    export class PathPointList {
+        array: any[];
+        count: number;
+        set(points: THREE.Vector3[], cornerRadius?: number, cornerSplit?: number, up?: THREE.Vector3 | null, close?: boolean): void;
+        distance(): number;
+    }
+
+    export interface PathGeometryOptions {
+        width?: number;
+        progress?: number;
+        arrow?: boolean;
+        side?: "left" | "right" | "both";
+    }
+
+    export class PathGeometry extends THREE.BufferGeometry {
+        constructor(initData?: number | { pathPointList: PathPointList; options?: PathGeometryOptions; usage?: number }, generateUv2?: boolean);
+        update(pathPointList: PathPointList, options?: PathGeometryOptions): void;
+    }
+
+    export interface PathTubeGeometryOptions {
+        radius?: number;
+        radialSegments?: number;
+        progress?: number;
+        startRad?: number;
+    }
+
+    export class PathTubeGeometry extends THREE.BufferGeometry {
+        constructor(initData?: number | { pathPointList: PathPointList; options?: PathTubeGeometryOptions; usage?: number }, generateUv2?: boolean);
+        update(pathPointList: PathPointList, options?: PathTubeGeometryOptions): void;
+    }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc1c162..80f5015 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -211,40 +211,6 @@ importers:
         specifier: ^0.21.2
         version: 0.21.2(vite@6.3.2(@types/node@24.7.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(stylus@0.64.0)(terser@5.39.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
 
-  packages/examples:
-    dependencies:
-      '@astral3d/engine':
-        specifier: workspace:^
-        version: link:../sdk
-      '@vue/repl':
-        specifier: ^4.7.0
-        version: 4.7.0
-      naive-ui:
-        specifier: 'catalog:'
-        version: 2.43.1(vue@3.5.22(typescript@5.8.3))
-      vite-plugin-static-copy:
-        specifier: 'catalog:'
-        version: 3.1.0(vite@6.3.2(@types/node@24.7.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(stylus@0.64.0)(terser@5.39.0))
-      vue:
-        specifier: 'catalog:'
-        version: 3.5.22(typescript@5.8.3)
-    devDependencies:
-      '@types/node':
-        specifier: 'catalog:'
-        version: 24.7.0
-      '@vitejs/plugin-vue':
-        specifier: 'catalog:'
-        version: 6.0.1(vite@6.3.2(@types/node@24.7.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(stylus@0.64.0)(terser@5.39.0))(vue@3.5.22(typescript@5.8.3))
-      '@vue/tsconfig':
-        specifier: ^0.8.1
-        version: 0.8.1(typescript@5.8.3)(vue@3.5.22(typescript@5.8.3))
-      typescript:
-        specifier: 'catalog:'
-        version: 5.8.3
-      vite:
-        specifier: 'catalog:'
-        version: 6.3.2(@types/node@24.7.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(stylus@0.64.0)(terser@5.39.0)
-
   packages/sdk:
     dependencies:
       3d-tiles-renderer:
@@ -262,6 +228,9 @@ importers:
       camera-controls:
         specifier: ^2.9.0
         version: 2.10.1(three@0.176.0)
+      heatmap.js-fix:
+        specifier: ^1.0.0
+        version: 1.0.0
       js-base64:
         specifier: ^3.7.7
         version: 3.7.7
@@ -289,6 +258,9 @@ importers:
       three-viewport-gizmo:
         specifier: ^2.0.2
         version: 2.2.0(three@0.176.0)
+      three.path:
+        specifier: ^1.0.1
+        version: 1.0.1
       web-ifc-three:
         specifier: ^0.0.126
         version: 0.0.126(three@0.176.0)
@@ -2469,9 +2441,6 @@ packages:
   '@vue/reactivity@3.5.22':
     resolution: {integrity: sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==}
 
-  '@vue/repl@4.7.0':
-    resolution: {integrity: sha512-1veaAsfO6xYLblo8jr2hQDlegdPjaCZkchZuG7PRhC9zX0bN2aLenu2rT7AEPAXDXK0OXCsB2+WIUevOTyMvLg==}
-
   '@vue/runtime-core@3.5.22':
     resolution: {integrity: sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==}
 
@@ -2492,17 +2461,6 @@ packages:
   '@vue/shared@3.5.22':
     resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
 
-  '@vue/tsconfig@0.8.1':
-    resolution: {integrity: sha512-aK7feIWPXFSUhsCP9PFqPyFOcz4ENkb8hZ2pneL6m2UjCkccvaOhC/5KCKluuBufvp2KzkbdA2W2pk20vLzu3g==}
-    peerDependencies:
-      typescript: 5.x
-      vue: ^3.4.0
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-      vue:
-        optional: true
-
   '@vuepress-plume/plugin-fonts@1.0.0-rc.164':
     resolution: {integrity: sha512-DJVXo5lxHf3rNXfhXxTocCARnKs8X2if4dfTKsArIdY4je7LnB4YoIohy8broHoxUGNkiBNfS8cpdZfSdn5DwQ==}
     peerDependencies:
@@ -3668,6 +3626,9 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  heatmap.js-fix@1.0.0:
+    resolution: {integrity: sha512-N+vqDBCWIJa3pEsNwFLxYuBkI2SGjipArwxrxnzyCQFrs2w93YSFbdwyyCI2vWPFznfpitWRlhU2LD3ThvTuvA==}
+
   highlight.js@11.11.1:
     resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
     engines: {node: '>=12.0.0'}
@@ -5212,6 +5173,12 @@ packages:
     peerDependencies:
       three: '>=0.162.0 <1.0.0'
 
+  three.path@1.0.1:
+    resolution: {integrity: sha512-YZGPv75s65V0JMCPqG+DBq72YEb7bzQES3lFWggjoJZ9zbTd/f5ukN+yolIqIkQTm9FWelQ367VhbMihQUq59Q==}
+
+  three@0.132.2:
+    resolution: {integrity: sha512-0wcR7LxxkXMn6Gi58gEs3QvY8WpTVXA31L2VOvpjm4ZPYFRHCZC13UqynheFoS5OXDYgtBneN0dhbaNBE8iLhQ==}
+
   three@0.176.0:
     resolution: {integrity: sha512-PWRKYWQo23ojf9oZSlRGH8K09q7nRSWx6LY/HF/UUrMdYgN9i1e2OwJYHoQjwc6HF/4lvvYLC5YC1X8UJL2ZpA==}
 
@@ -8244,8 +8211,6 @@ snapshots:
     dependencies:
       '@vue/shared': 3.5.22
 
-  '@vue/repl@4.7.0': {}
-
   '@vue/runtime-core@3.5.22':
     dependencies:
       '@vue/reactivity': 3.5.22
@@ -8270,11 +8235,6 @@ snapshots:
 
   '@vue/shared@3.5.22': {}
 
-  '@vue/tsconfig@0.8.1(typescript@5.8.3)(vue@3.5.22(typescript@5.8.3))':
-    optionalDependencies:
-      typescript: 5.8.3
-      vue: 3.5.22(typescript@5.8.3)
-
   '@vuepress-plume/plugin-fonts@1.0.0-rc.164(vuepress@2.0.0-rc.25(@vuepress/bundler-vite@2.0.0-rc.24(@types/node@24.7.0)(jiti@2.4.2)(sass-embedded@1.86.3)(stylus@0.64.0)(terser@5.39.0)(typescript@5.8.3))(typescript@5.8.3)(vue@3.5.22(typescript@5.8.3)))':
     dependencies:
       vuepress: 2.0.0-rc.25(@vuepress/bundler-vite@2.0.0-rc.24(@types/node@24.7.0)(jiti@2.4.2)(sass-embedded@1.86.3)(stylus@0.64.0)(terser@5.39.0)(typescript@5.8.3))(typescript@5.8.3)(vue@3.5.22(typescript@5.8.3))
@@ -9721,6 +9681,8 @@ snapshots:
 
   he@1.2.0: {}
 
+  heatmap.js-fix@1.0.0: {}
+
   highlight.js@11.11.1: {}
 
   hookable@5.5.3: {}
@@ -11379,6 +11341,12 @@ snapshots:
     dependencies:
       three: 0.176.0
 
+  three.path@1.0.1:
+    dependencies:
+      three: 0.132.2
+
+  three@0.132.2: {}
+
   three@0.176.0: {}
 
   tinyexec@0.3.2: {}