@tomorrowevening/hermes 0.0.35 → 0.0.37

package/src/editor/multiView/UVMaterial.ts

@@ -0,0 +1,55 @@
+import { ShaderMaterial } from 'three';
+
+const vertex = `#include <common>
+#include <batching_pars_vertex>
+#include <uv_pars_vertex>
+#include <color_pars_vertex>
+#include <morphtarget_pars_vertex>
+#include <skinning_pars_vertex>
+#include <logdepthbuf_pars_vertex>
+#include <clipping_planes_pars_vertex>
+
+void main() {
+	#include <uv_vertex>
+	#include <color_vertex>
+	#include <morphcolor_vertex>
+	#include <batching_vertex>
+
+	#if defined ( USE_SKINNING )
+		#include <beginnormal_vertex>
+		#include <morphnormal_vertex>
+		#include <skinbase_vertex>
+		#include <skinnormal_vertex>
+		#include <defaultnormal_vertex>
+	#endif
+
+	#include <begin_vertex>
+	#include <morphtarget_vertex>
+	#include <skinning_vertex>
+	#include <project_vertex>
+	#include <logdepthbuf_vertex>
+	#include <clipping_planes_vertex>
+	#include <worldpos_vertex>
+}`;
+
+const fragment = `
+#include <common>
+#include <uv_pars_fragment>
+#include <clipping_planes_pars_fragment>
+
+void main() {
+	#include <clipping_planes_fragment>
+	gl_FragColor = vec4(vec3(vUv, 0.0), 1.0);
+}`;
+
+export default class UVMaterial extends ShaderMaterial {
+  constructor() {
+    super({
+      defines: {
+        USE_UV: ''
+      },
+      vertexShader: vertex,
+      fragmentShader: fragment,
+    });
+  }
+}

package/src/editor/scss/_debug.scss

@@ -0,0 +1,58 @@
+body {
+  .tp-dfwv,
+  .tp-dfwv button,
+  .tp-dfwv input {
+    text-transform: none;
+  }
+}
+
+.tp-ckbv {
+  float: right;
+}
+
+.tp-dfwv {
+  left: 50%;
+  top: 0;
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  transform: translateX(-50%);
+  width: 400px;
+  z-index: 100;
+
+  .tp-lblv {
+    position: relative;
+  }
+
+  .tp-lblv_v {
+    display: inline-block;
+
+    .tp-ckbv {
+      width: 20px;
+    }
+
+    .tp-fpsv {
+      width: 280px;
+    }
+  }
+
+  .tp-btnv_b {
+    padding: 0 5px;
+  }
+
+  .tp-btngridv {
+    max-height: 100px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .tp-tabv {
+    max-height: 90vh;
+    overflow: hidden auto;
+  }
+}
+
+.tp-dfwv {
+  font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;
+  font-size: 10px;
+}

package/src/editor/scss/_draggable.scss

@@ -0,0 +1,43 @@
+@use 'theme';
+
+.draggable {
+  li {
+    div {
+      background-color: $BAR_COLOR;
+      line-height: 14px;
+      padding: 5px 10px;
+      transition: background-color 0.25s linear;
+      &:hover {
+        background-color: $BTN_HOVER;
+      }
+      span {
+        font-size: 12px;
+        margin: 0px 15px 0 10px;
+        padding: 0px 5px;
+      }
+      .dragIcon {
+        position: absolute;
+        left: 10px;
+      }
+      .closeIcon {
+        background-color: transparent;
+        padding: 0;
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        min-width: 14px;
+        width: 14px;
+        height: 14px;
+        transform: translateY(-50%);
+        &:hover {
+          background-color: transparent;
+        }
+        svg {
+          background-color: transparent;
+          left: 0px;
+          position: relative;
+        }
+      }
+    }
+  }
+}

package/src/editor/scss/_dropdown.scss

@@ -0,0 +1,84 @@
+@use 'theme';
+
+.dropdown {
+  color: #FFF;
+  display: inline-block;
+  margin-right: 1px;
+  text-align: left;
+  height: fit-content;
+  min-width: auto;
+  width: max-content;
+
+  button {
+    backdrop-filter: blur(2px);
+    background-color: $BAR_COLOR;
+    border: none;
+    color: rgba($color: #FFF, $alpha: 0.5);
+    font-size: 12px;
+    padding: 5px 10px;
+    position: relative;
+    text-align: left;
+    min-width: $ROW_HEIGHT;
+    width: 100%;
+    height: $BTN_SIZE;
+    transition: all 0.2s linear;
+
+    &:hover {
+      background-color: $BTN_HOVER;
+      color: #FFF;
+    }
+
+    &.svg {
+      line-height: 0;
+      width: $BTN_SIZE;
+    }
+  }
+
+  p {
+    background-color: $BAR_COLOR;
+    display: inline-block;
+    height: $ROW_HEIGHT;
+    margin: 0;
+    min-width: $ROW_HEIGHT;
+    padding: 5px;
+  }
+
+  svg {
+    position: relative;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    margin-block: 0;
+    padding-inline: 0;
+    position: absolute;
+    width: max-content;
+
+    li {
+      border-top: 1px solid $BORDER_COLOR;
+      display: block;
+      position: relative;
+
+      &.selected button {
+        background-color: $BTN_SELECTED;
+
+        &:hover {
+          background-color: $BTN_SELECTED_HOVER;
+        }
+      }
+    }
+  }
+
+  &.subdropdown {
+    min-width: 100%;
+
+    ul {
+      border-left: 1px solid $BORDER_COLOR;
+      left: 100%;
+      top: -1px;
+    }
+  }
+}

package/src/editor/scss/_sidePanel.scss

@@ -0,0 +1,278 @@
+$barHeight: 20px;
+$maxHeight: calc($barHeight * 10);
+$icon_camera: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC60lEQVRYhe2YT4hNcRTHP48xpmYaNAvRyEQxEhnKQljYsRm9/EmSyJiMFAsMZWNhJYoNIUVJ2VGiyb9ZzIpMpkQSahbGv9GMYWrM+1rc2zjvzvvdd+99rzdvMd+6de75nd+5387vnN/v/G5KEuWMKRNNIB8mCRaKiiL5qQb2ApuBuUAV0Ad0AJeB3sSeJRX6LJbULTf6JTUn9Z+KWMUpPyp/Avoa4CNQZ3Sj/lNpdL/xottR7AjOkHRUUpekN5I6JbVLavDH75lIfZN0UFKTpCWS0pJem/HeJBEMG6yV1ONYtgFJbZJ+GF1jDh+zJb03NuliEuwMkMo4yErS2RA/LcbuYVyCrm1mA7Dal/8Cu4FG4JD/HsTTkCy6a+SVMTPQuc1sBKb78nHghi+/A+YBxwL2lbhRY+ThuARdEVxu5JdGFvACr0otdoZ8Y4+Rn0Sn5sFFsMvI6YB9MzA1YJ8mN8k1wAHzfj4uQVdyrpI0aJL7oqTtkq4FiqPLyCOSbktqlbRL0jlJQ2b8QdwCUZ4qvhRStZL0XFK1pMd57CRvq5mfhKBriRfiFUMY6oD7eOdwPlQAN4G10dfWg+uouwXsiOssAj4AC+JMcEWwvnAuOTEr7gTXPmg34zagOwkbIIOXAo9CbDYBrcBXYN+4UUdy2sRflyS5zVNlfPX7ugpJW5V9nI7mmh+lYU0lCZ2B3TOnAVuAk0BTwC5nuhWro46KauBOQJch5OpRaoIW34GreGf+YZdRqS9NAj4Bp4ClQDvwOWxCqSM4ADQEdKE5XvbXzlITrAVe4TW+M6NMKDXBFLAMuAD0ACfIc7pMZBXXA2cY3/xmodQRHAL2A2+NLtj8ZiEKwUL/z2WMPAJcAVYALWSf8dZuDFGWeBHwKxm3sWYhiGG8Tfo6sA2vSfiSy4GrH3wGrDcfKSSKKf6v1E9yF0XK9Q1XBPuMXMw8HXTonQFwETwNzMFr64v1jzgFHIk9ybHEZYPJo65QlD3Bf2/Q/eaHPiSWAAAAAElFTkSuQmCC');
+$icon_folder: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA8CAYAAACtrX6oAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB90lEQVR4nO2cXWoCQRCEy+R0+6QguCE5XwLJtYToIZTOgxFlWd1Vd7p7yvpgXoLJ1NQ3a/wZnZkZBC8v0QFEWSSYHAkmR4LJkWByJJgcCSZHgsmRYHIkmBwJJkeCyZFgciSYHAkmR4LJkWByxghuAKwBbAEsiqa5jzlO+ZrgLH3MAWxwyLd0n93MhsbaTuzMrB3xO15j9Z/pyG+CTNfyufd36130K4BPAG2BvXYrKwBfOGTKSF8+//5G7IJFZxeG7MTOaC9kWgRmunbldnHr79FCIyRnyjJW7i4qc23FZshwj9zWzN4istdUcM1yj7dxl1xL0QxyQyTXUDiTXHfJ2YtnlOu6tswCmOW6rXGKP1Ii5DPIdVnr0y14glHVhp5y4VXcZT04qvuXNHUB6R90ZBNQeo4SRaR+2pCleK+5ShWS9ol/dOHec5YsJuVLd1FFR81dOmS6F9+9C47O4BEy1dtnXsVmyeIVMs0b4CPG4pFCC427Dzh4hrwkObq87jg/g5YpX19/g2fQPI/N/gB4B7A/+9kewAeAb8cct5ApX19/wwTsxLmZbcxsa2bLBFdGdzR2uIq3lueMV7e/Y75m6PYzM33THTP6ZAM5EkyOBJMjweRIMDkSTI4EkyPB5EgwORJMjgSTI8HkSDA5EkyOBJMjweRIMDl/5nU6ICCWVGoAAAAASUVORK5CYII=');
+$icon_interactive: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAADA0lEQVRYhe2Yu2sUURTGf5uYSJ4EsgqJIkRMEYOFYMBCQcTe57/hs9AqlVpYiChYqREsFBRF8AF2KgpqErQQRKIRi6ghRozEhcSYz+Le1bPD7MzOzm5MkQ+Gc+/Z79z7cfY+5kxGEosZNf9bQByWBKbFsjJiGoEuYC3QAUwC74EPwFTlpHlIKvVplHRS0rSK47KktgRjxj6lEtdJ+hIhzGJO0raFFNghaTYg4oKkPkmdknrlMvsjwNm8EAJrJI2YSZ9IyhbhNkkaMNwZSS3VFrjbTPhC0nLzW6ekDZK6jC8j6ZqJOV9tgTZ7eSF1ks6oEHd9BpHULGnS+2flNldVBK4wAu4Z/0GF47bhHDP+njQCow7qbtO+4209cNy3p4ETwCff34k7FwEGTWw2zTFY6k0y4W2LfwAeA/3AdcNr9PZzGXOEIuomeYbL0BrgvvdlzO8z3tYa37y3b33sKuB5tQTO4zJUDLUhvrkSY0tGOXdxHgpYgNPAU9yaHQP6gB3AS+AB0Ars8fYW8C5+lmS7Khuya88W2dXBmyUXwjmXZhenRUug3xDC2Q9sjRokqcBMSNv6DgH7TH8M2AQMBTh7Tf9o1IRJ16BC2tZ3Ffhp+oPAMPDICw3jRCJNBsNQR+HurjF+y7GJiazakgoMGyxOdJBTCv8vKrEG6yPGawrhBAVWLYP59kVvp4DvuDs6vyluenvJcL6RIKNpDup87BCwEsjxb/FvAdqAcd8fNJwc0G7GicxgUoEzpm3PuYkQ3njAZzl2I0VmMOlfnAM++vZ6CtdWEthXsNEoYlKBv3F3aH6S7ghuFA6Y9pVIZhlvuRvNXTosV4ckiV8duJ/ro/jlCKxVYa3SnyC2SdIrE3skLqbcWqFLhTglqSEmpkPSGxMzGpe9NAKRtCsg8qukw3LlaLPPVqtcYT8Q4OY8L3aeNAKRtF3F8auI/7Wk9lLnSCsQufL0RoTQPKblSta6JONnpIp9As4Cvbjyswd3Rk7hXrUeAiO4czQRKimwKlj0X1iXBKbFH8wWbNSnU+tzAAAAAElFTkSuQmCC');
+$icon_lights: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAETklEQVRYhe2YXYhVVRTHf3d0/JhyUrMpFbImM+whSa3Mynww+4AeIgiKoozooQ+KyMyXIAujF6OXqHyI6iEKKYgIP/owsjSFqCkprdDUTEcjbWZ0HHV+Pex1ucfb9Z57Z9REXHA4Z++99l7/s/ZZ/7X2KaiczNLwfwPIk9MA+yunNMAG4DHgV+BvoB3YFff2TPstYEyfrajVroI6Sr1GvahsbJC63HzZq04pmztSvU5tVRuqYRiYg78JeBR4HPg5ntdmxovz9wJfA3uAxuibDLQCA+IqynnAQuBuYCnwMLC1rx48U12U8cZqdWqMDcx4cI16qTpYbVKHqa+ovWUeHKsujn7VL9ULq2HI+wY7gVeBJdGeFu3J4ZUiy/cAXeHRRuAQsC/GC0B3eG4BcH/0tUV7czUAeVsMsBF4Kha9HZgCvAncAuwPnXHA0wFuGLANuDrGuoGDwFxgTqzzQ7RX5FrP2eLsdb76vnogtme6+nE8H1YPlQXHwbi3q9eqn0e7Tb25VrsF68vFY0lb1AGcDTwItGQ8tQM4AIwGmqP/EPAu8A0wElgJfFGzxTo8mKWXu9Rd4ZF96jvqjSbauEC9Sn1O3R463epLaku99voCsFXdkAH3kNpcQW+IiT/bQne3eufxBtioPqP2mKhioXpWzpxb1T8C5Ifh4ZptVoriRmAIKdrI3Lujf3bobAPeJpF0NVkKrAFuI9HTOBIxnxFrF4OgQKKr/dnJlQA+AcwABgOHA4zAamA5cE7orQL+zAEHiWI+A2bFC7aSguheYCgpqAphZz3wSB7AecCICv2TgH8oFRib4gVqka0k0h8CXAxMBW6ooDejFoCvA9OBQUAvKWM0kDz4XUZvNKXtyZMWUl7vBbaQXq457PeEziDgx/KJlQAuIPFdMcEXv5OdYWBP9M8k8VpnDQCvB4aTSrCNJB5cSdrW3tBpIJVnR0qdUTxAfdGUOVTnmwqEanNmqltC/9OgqePKg5eom8PgdvW+oJ9Kupera0O3U50TL3lcAaI+oHaF4R3qa6Z822wq0Saq89T1lmSxOrxeW/Xm4uGkiqQDmECKuKHxHW0HdpMiewSpvGqKeR8Ay0iBsYIjg6261PE2o9Q3Yqv+MqWxO9R1Hl12qs+q49Vlppy82pSr+5xJKsko4AXgHlJ0t5NIeg3wLXAlqZhtIUV8J6nmWwX8QiLjdhL5TwMWkY4R6/rrwYKlMr1Y321QZ/vfwBijPqm+rF4Wc7PjE9QllurGVeoV5gRNHsAm9fnMom3qrKPoTjKdMXaYyrFygEWQ72XWW24qhPu8xcUc2UU6O8wFPjmK7jhgPHAuMJGUGQ6U6WwE5sfzTXGvei7KA9hFOiR9D/wOfFVFt4dS2tpfRe83Ur7/CPiJakfOGgBCypubatArl2r8VfOax/LfzABKtePAzHO/5FgC7KBEzB2kOrDfUm8mOeFySv9+OyFyGmB/5aQH+C9BVKmVCNuMZgAAAABJRU5ErkJggg==');
+$icon_refresh: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE1UlEQVRoge2aW2gdRRzGf5vGWMSTVBpNUjWNijHgg6KIRqmtD0UpqA9iFeulijWkllIsKOKb+lbxgr6oLQUFtc2LPgjaImILSq36oKLWkpZC7C1p6zkNXkqSz4c5x2zH3T27s7vnnMR8MBxmzsx/vm/2P/fxJPF/QlO9CdQac4JnO+YEz3Y052y/C7gV6Af6gCuAhUABEDAOnASGgX3AV8Au4Le8CHk5TEttwMPA/cBNuHnR18D7wLvAieyoAZKyChdJelXSaWWHcUmvS1qUFc8sjDRLeiZjoTZOS3pOUktavmld+irgPeC6MAcC9gBfYNx0P6Z/lsr/FzD9vBe4HlgK3AzMC7H3HfAQ8JMz4xSttUJSMeSLnJT0vKRLHex2SNogaTjia9/lyttV7IIQsWOSnpZUSNGQldAkabWkkYB6JiUN1lJwTwCJT5Xh4OILBUmbA+qbkjRQK8FI2lquuCjjgl4OYv1hlaQ/LdGTku5MYiftoNUD/F4OtcAS4GPMYFdBCbgR+CWOgTwWHnljCbADmO9L24sZ3SeqFZ6Ja+ndwONW2g3Axlilq/i8J2mLzKicZ/90CVus/lyS1FmtXDWjT5SNvdkAAu3QKumwJfqVNIK7NT3XTkla3gAi7fCYJbhUbojEgj1JOyxjh6oZq0NolnTQ4rkuqkzYoLUGWG6ldQObkowuNcAE8IaVtjKqQNC01A38ALQG5BdwO7DTkWAe6AJGmJ5xpsppx4My21/YAzYTLDbO//XAEcxJSQVNwC1hmW3BQa5soxFde5cV7w/L6BecREichqkl9lrxvrCMFcEe8BbxXdUDtgILkjLLCfut+OWhOcvD9YDcUI8FyXZHrpK0zZO0GPget4FIwArgE4eyrmgHfgQ6EpYbA66O2i39DbT44ucCZxLTywd3Ax8mLLMSGIraLY1b8fMTVpAnPgKGEuTfXskfJfiUFe9MSCpvPAmMxsg3CqyrRKIED1vxXgdSeWIUMz1Ww1kNEyXYPjIJO3uuJ6q59pD9f5TgPVZ8mRun3LEWOBaQPobPlSuIEvwZZtqpoJ/G68dghA0EpK8lYAMRJfgY8K0v3oy5EWxE2K79H1f+F1VWNeutlcqwzKa73hv/oNAu6aikUZmbzMB81Y5p24FDwHm+tEeAd9J9kNxwb/k3dCCLcy79GrDeFz+K2Y0UU1GrE+KcS28C/vDFO2m8/XBsxBE8Arxgpa0BHsieTv6Ie9XSgrnQvsaX9hdwB+aye8Yg7lXLGeA+zt5QzMdMB0uzJhWBCzAXeM5Icre0D1iNORWsoA2zF16VhkQMeMAGzIxxEHPa4gaH+W4w5DThbUltOcyvF0vaGVBfj4s9VxKDkiYCSByR9KiyWZy0SnpW0omAeoqujZuG0D0ydzlBOCDpKUldDnYXS3pR0qkQ20WZBzVOvNNeiPcC24BrQ/6fxOy6Psc8OfoVOMz04FcALgGuxLzaW4bZhnoh9r7BTIf2KWV8pPjClXCOzMud8ZAvkgWKkjZKmpeWbxaCK2GRpJczFl6S9JLMxiATnnm88ViIcbsHMU8RwtwzDFPAl8AHmMelpejsyZD3o5YO4DbMK5s+4DLgQswJqIfpy8eBA8DPmEux3QSfYGSCmfiKJxVm4iueVJgTPNsxJ3i24x9qO45nn/sZdwAAAABJRU5ErkJggg==');
+$icon_ui: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAADjElEQVRYhe2YTWhdRRTHf+lLTFRCkjaLILgIKoIBRRfaSmMFQSsoIrrRuhEqfnTTtV20qHUllIBWcKNQxG4EJWoVEUxKqV8blXYlYv0utr7UtkaN9dfFTMzNfXM/8hJeI/iHYV7OOTP3d+89M3NuulRWs9ZcaIAq/Q+4XJUB3gDsA74BZoDPgaeAdStw3SHgdeD2ykg11baoZ03rS/XKgnGD6niBLxszFedqqpvK4lPG69U/4gTvqneo16lb1e+j/SO1LzF2SD2pbqsBN69SyJTxtTjwPbU75xuLAKr3Zy46FNuoeib6n6kBVwmZAvwuDrqt4K72Rv8LakP9Wv01tqb6T+bCr6rD6og6XQA3rxl1c/56qUXSH/ufCtL229gPxH40Jv0QMAh0ZWIfBG4CNgLjFcthANiWN3YnAn+IweuBown/xtgfAwReAS6NtouAO2P/O/AY8Hb07YqtSNPAwy3WxCt8Oj7yY+q1Od+j6rnovzExtqH+qR5Xb034dxW83ilDjtbKwXXqkTiwqb6o7lDfykw4kZosk2tjBX7UnTm4D4vgigBRr1APFtzthNpTMK5P7S+By0MeLINT6dLCaqYHuAfYFHPsR2AS+Lgkj5aih4ADwMmyoDLAeTUIR9KBleEC4BJgDugFzhIWW1J1ioV9wDuEO14pPQ8cB75gYbtKqgpwN/BA/P0ScMuy0YIGCPvmMIv3zRaVAT4OPJn5+2JCBTK2XDrC6wX4O7ZCFQGOAzuBUyzkx19AH7AXWNsGVC8wQnhyfdHWRXiKw4RTqFUFy3vQcIaOxr1Q9Q1DQTCi9tbYSvJtbdzzThs2cw3n9oz6swVlWtWk/YYiQHV/G1D5do36S+vW6hNFY6oWSTcL53VPG681r6PAfcBsxvYsIW2SqgIUOAE0Cfm4EpoGHom/9wM7yoLrbNRrCMl8btloi7UZeL9q3hTgyyyUTxC2AQmgjYz9MLCnDbANwF3AZYRTZAp4k7BLtCqRmHOJJE5pcokLpNdQGaV0SL2q7iI5XfNJzFaHLNIeQgGb0s2EQmQ47+jUh/t6wslUpquB7XljpwDvbTeuU4CjNeNG8oZOATZrxp3JGzoF+EHNuMN5Q6cAJ4FPKmLmgOfyxhRg6ls5pUZ1yL+aBbYAR0r8W4HP6sCcoKKIjFrq2fwV4QNsO3A3cDnwG3AImAA+TQ2qcxZfUP2n/8O6KrTqAc8D9emWHC8oT9IAAAAASUVORK5CYII=');
+$icon_utils: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAADFElEQVRYhe2YT0hVQRSHf7YwsUVoakFtKmhdUfhUeLSrrFVQEES72rip1EoscFlLK2jRpl21tT8QhFkLq13gIotqlaRPQ8SkgvRrcefiOO/eufN8LzPwwMV375w5893fnHPm+aoArWZb968BsmwNsFz7rwHzkgYltVdgnRpJZyU9lTQm6ZukUUl9GQwSkHS1AgUimwduAHUpvlnXLmCYYpsFDmXNT3p4AJhICDgC7C0RbgvwISHWGNASEiPpYdLbxvYJ2FQC4F1rbj/w1nx+ERoj6WE78NsDeSIw+E7gh5kzYJ5dM/dzwFbH/yDQ58ZJStAnkm570rY+sDDaTHEgqd88GzJ/ayWdk7Td3Ock3Zd0OrRINgKjKQq+ApoCFOw0/j8tteqAaSvWd6LtjgtyKkRBSZqRdFLS+4SxnKQBSU0ZCsaHfLXlOy3plqRxc79BUTtrNPe/QhWU9cbHgQ7gTYKSm1Pm5YAvlm+bM15PlOvXWSwcgGdurFJaRpOBsu010Oj4tVhbBtAFVHni3rR8z5QDKKNYEmSsZI6lPbTbmZ8HdgPbgMNE1R3bMFBbLqCABgNl20vgmAN30ZnXRXQqzbPYfmIbAXYkrbccwLTtts1VrjvFbxa4Q3GalA0Yb/fzALgua2zcjHcDp0hRrVKAAo4CCx64XmtsksDzt1KAbitx4a5YY1+BPctZZ7lwzfgLwlZuxQFb8LcSW7k5FlNgRbY4R5ToIXATREp3OM9a/xZgjqUnhG9bZ4D91linNTZpYlUU0IVzlbMBIGrE5z0+hVAlQ3POt63uwnZ+XvL4ThCQk5VUbhLYR1StNmSPM+eCM8erZBacr1rtE8JVw21Dlz0vVsCTk2lwDcBnE2CB4oKwz9YCyVvltqOkLw9xC/pIyj9jaYBHrMC9Hris3pYzPmmQPdZYeymAeWviPaAmAS4oyT1KrjexY8uXAlgNPLImP2BpnwtuExakXWxXHbjHZs2SiqQeGKTYpgKVy9ru2IbMWiVXcQxpfy1/t0y4+Go2MWJ7SMYvFVWw9hNwWbYGWK6tesA/ap/6uHJWeiAAAAAASUVORK5CYII=');
+$icon_world: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEZklEQVRYhe2YW4iVVRTHf4465oSaUNlUjo7SmCBEPVipTWYXoV7qoejykhRCEVQP9pAFSWVBPdRTMNRLWGRaFr2FSShmEQ1KzQymUhpeMky6ONbcfj3sdZpvvvnO8Zy5lA/+YcP51jpr7bVv/7X2nqByNqPu/w7gTDgX4GgxaYR2DcDlwC3AUmAh0ARMDf1fwGGgE9gFfAb8AJyquSe1ljZFXa6+o/Y4FD3qvmh5neomdYXaUEuftQQ3T31d7Y8O96tdal98P69eos5SXwhZn7pb7cgE2qa2jHWAy9Svo4Nf1VfUG9VPQvauWp/5f726MXSb1WvVF9XjIftWvXWsArxdPRSOt5uWCfV+dUDtVJsL7K5Q98aM3xuyVnVr+Dqi3jHaAJepx8Lhe2pTyJvVn6PzVRXsHw7bw+rckDWqb4b8mHrbSAOcp7aHozZ1Wka3NuQfqHUVfExUt8R/n8rI69XXQt6lLijnoxzNTAEeA64GeoDzgbVBI5OBu+J/FwPrg3aK0A1cGL8fB+YAfUFDF4T+SmAN8ATwZ97BBC3MxdeTuGtqOBSYkGklgu/NyIpgtMnxPRDfpd9kdCuBT/MOimawHlgdwW0DPs918AAwH9gK7MjoyqEHWA6sAPYBGzMD6gWWRHCPhL/TQ4dYfPpOxSFYXKDvVE+YaKZamrpZPWmil7xuoXrQxAiL8vqiXHwTaU99BbTndItJe+Zoga4S2oFjpJR4TU7XBXwZs7oyb1gU4DKgH/iCtP+yaAlH+4E/agjwJCkXTwwfeewgLXdrNQEuAn6neIYaSfvwQA3BlXCAdEAaC3TtpEFclVcUHZIm0sauC2f1Ie8lLZGkmbiI8vSSR3fYDYSPyzJ990YfvQxS0r8oopkTJI76jbTUpRMnMI3Ekd2k0qnaenKAxKUNwN+k7ZH1Wxd9nswHWWvBWo7vxg1FSyzwC/AgsIfBJe4DngNWAW1UziB5dAPPAo8CbwPrGLrELcAGYEY1AR4C5pKW5WhOt5c0iwMxiFpQykBdpGo7i7kkwj+eNypa4g5gOsP5ChKX1ZG4sFbMjyDzgyb6mgl8V02AO0mndAnDZ/h70hZoJg2iWswMm37SKuRxA2kGtw/TFKSelipTXesIUt3uWlNd0R78EXifdEheYnixMDlm5BlqKxZmkChqHcOLhdnAxxQkgErl1jbgPM7CcgtS6nkDeDIcbQZ+IpVgk4A7gUtJBcVOKhesS0n5/QjwEYMF6yzg7gjwLVLuLxhi+X3TrH4TZXmbOj2jezrkZyr5JzlY8q/JyKsu+UdzaToaG/uhCvarw/agOscxvjSVWvbaucPBa+d9plvdXlORm7dbELo+9Z6Qjfm1MzuT2Yv7q9HZlpBtdOjFfar6Yeg2qdep6x2ni3upFT19dDj49PGy6emjMQZg6PaY9lkJ4/L0UWqlx6MNDn8g6o2g98fvPEb0eFSOB8+Eoue32Rm6OR200hn0sY0RPr+NNMD/DGf9C+u5AEeLfwBkrdN1844nCgAAAABJRU5ErkJggg==');
+
+#SidePanel {
+  background-color: #0d0d0d;
+  border: 1px solid #111;
+  max-height: 100%;
+  min-height: $barHeight;
+  overflow-y: auto;
+  pointer-events: visible;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 300px;
+
+  .accordion {
+    border-bottom: 1px dotted #333;
+    background-color: #111;
+    line-height: 0;
+    resize: vertical;
+    overflow-y: auto;
+
+    &.hide {
+      resize: none;
+      overflow-y: hidden;
+    }
+
+    > div {
+      display: grid; 
+      grid-template-rows: 0fr;
+      margin-left: 5px;
+      transition: 0.33s grid-template-rows cubic-bezier(0.645, 0.045, 0.355, 1);
+      > div {
+        overflow: hidden;
+      }
+      &.open {
+        grid-template-rows: 1fr;
+      }
+    }
+
+    .icon {
+      height: $barHeight;
+      width: $barHeight;
+      button {
+        text-indent: -9999px;
+        white-space: nowrap;
+      }
+    }
+
+    .toggle {
+      background-color: #333;
+      display: inline-block;
+      font-size: 12px;
+      font-weight: bold;
+      margin: 0;
+      padding: 0;
+      position: relative;
+      user-select: none;
+      width: 100%;
+      height: 20px;
+      transition: background-color 0.2s linear;
+      &:hover {
+        background-color: #444;
+      }
+      p {
+        margin: 0;
+        padding: 0;
+      }
+      .label {
+        display: inline;
+        position: absolute;
+        left: 25px;
+        top: 3px;
+      }
+    }
+  }
+
+  input {
+    background-color: #222;
+    border: 1px dotted #333;
+    font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;
+    font-size: 10px;
+    padding: 4px;
+  }
+
+  button {
+    background-color: transparent;
+    border: none;
+    color: #FFF;
+    font-size: 12px;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+  }
+
+  #options {
+    border-bottom: 1px solid #111;
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    width: 100%;
+
+    .selected {
+      background-color: #222;
+      button {
+        pointer-events: none;
+      }
+    }
+
+    button {
+      min-width: $barHeight;
+      height: $barHeight;
+      text-align: center;
+      width: 100%;
+      &:hover {
+        background-color: #333;
+      }
+    }
+
+    li {
+      border-right: 1px solid #111;
+      font-size: 12px;
+      line-height: $barHeight;
+      min-height: $barHeight;
+      min-width: $barHeight;
+      text-align: center;
+      width: 100%;
+      &:first-child {
+        border-left: 1px solid #111;
+      }
+    }
+  }
+
+  .status, .refresh {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    width: $barHeight;
+    height: $barHeight;
+    text-indent: -9999px;
+    white-space: nowrap;
+  }
+
+  .status {
+    background-image: $icon_folder;
+    background-position-x: 2px;
+    background-position-y: 2px;
+    background-size: 32px 16px;
+    &.open {
+      background-position-x: 18px;
+    }
+  }
+
+  .refresh {
+    background-color: transparent;
+    background-image: $icon_refresh;
+    background-position: 2px 2px;
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    position: absolute;
+    right: 5px;
+  }
+
+  .childObject {
+    background-color: #111;
+    min-height: $barHeight;
+    overflow: hidden;
+
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: #0d0d0d;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #666;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: #999;
+    }
+
+    .child {
+      background-color: #222;
+      border: none;
+      border-bottom: 1px solid #111;
+      height: $barHeight;
+      position: relative;
+
+      &:hover {
+        background-color: #333;
+      }
+    }
+
+    .name {
+      background-color: transparent;
+      max-lines: 1;
+      overflow: hidden;
+      position: absolute;
+      left: 5px;
+      right: 30px;
+      top: 50%;
+      transform: translateY(-50%);
+      white-space: nowrap;
+    }
+
+    > div {
+      display: grid; 
+      grid-template-rows: 0fr;
+      transition: 0.33s grid-template-rows cubic-bezier(0.645, 0.045, 0.355, 1);
+      &.open {
+        grid-template-rows: 1fr;
+      }
+      .container {
+        padding-left: 5px;
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: auto;
+        max-height: $maxHeight;
+  
+        &.closed {
+          height: 0;
+          overflow: hidden;
+        }
+      }
+    }
+
+    .icon {
+      background-color: transparent;
+      background-image: $icon_world;
+      background-size: 20px 20px;
+      display: inline-block;
+      position: absolute;
+      right: 5px;
+      top: 0;
+      width: $barHeight;
+      height: $barHeight;
+      transform: scale(0.8);
+    }
+
+    .obj3D {
+      background-image: $icon_world;
+    }
+
+    .camera {
+      background-image: $icon_camera;
+    }
+
+    .interactive {
+      background-image: $icon_interactive;
+    }
+
+    .light {
+      background-image: $icon_lights;
+    }
+
+    .ui {
+      background-image: $icon_ui;
+    }
+
+    .utils {
+      background-image: $icon_utils;
+    }
+  }
+}

package/src/editor/scss/_theme.scss

@@ -0,0 +1,9 @@
+$ROW_HEIGHT: 22px;
+$BAR_COLOR: rgba(34, 34, 34, 0.8);
+$BORDER_COLOR: rgba(17, 17, 17, 0.9);
+$BTN_SIZE: 32px;
+$BTN_HOVER: rgba(51, 51, 51, 0.8);
+$BTN_SELECTED: rgba(68, 68, 68, 0.8);
+$BTN_SELECTED_HOVER: rgba(85, 85, 85, 0.8);
+$PANEL: rgba(25, 25, 25, 0.8);
+$PANEL_DARK: rgba(17, 17, 17, 0.8);

package/src/editor/scss/index.scss

@@ -0,0 +1,67 @@
+@import 'theme';
+@import 'debug';
+@import 'sidePanel';
+
+.editor {
+  font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;
+  font-size: 10px;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  button {
+    background: none;
+    border: none;
+    color: white;
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+  }
+
+  header {
+    display: inline-block;
+    pointer-events: visible;
+    position: relative;
+    left: 50px;
+    top: 12px;
+    z-index: 101;
+  }
+
+  footer {
+    position: absolute;
+    right: 5px;
+    bottom: 0;
+  }
+}
+
+@import 'dropdown';
+@import 'draggable';
+
+.fsAbsolute {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.absoluteCenter {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.hideText {
+  text-indent: -9999px;
+  white-space: nowrap;
+}

package/src/editor/sidePanel/Accordion.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { capitalize } from '@/editor/utils';
+
+type AccordionProps = {
+  label: string
+  button?: JSX.Element
+  children?: JSX.Element | JSX.Element[]
+  open?: boolean
+  onToggle?: (value: boolean) => void
+}
+
+export default function Accordion(props: AccordionProps) {
+  const [open, setOpen] = useState(props.open !== undefined ? props.open : true);
+  const hide = !open || props.children === undefined;
+
+  return (
+    <div className={`accordion ${hide ? 'hide' : ''}`}>
+      <button
+        className='toggle'
+        onClick={() => {
+          const value = !open;
+          if (props.onToggle !== undefined) props.onToggle(value);
+          setOpen(value);
+        }}
+      >
+        <p
+          className={`status ${open ? 'open' : ''}`}
+        >
+          Toggle
+        </p>
+        <p className='label'>{capitalize(props.label)}</p>
+      </button>
+      {props.button}
+      <div className={open ? 'open' : ''}>
+        <div>
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+}